Sidebar

1// Base UI base sidebar — class strings from the maintainer-supplied radix source, verbatim. Composes
2// this base's own button, input, separator, sheet, skeleton and tooltip, so it inherits their
3// dialects (the sheet's transition motion, the separator's aria-orientation) for free.
4//
5// THE TOOLTIP TRIGGER USES `render`, WHICH IS THE WHOLE REASON THIS FAMILY IS PORTABLE. Radix wraps
6// the menu button with `<TooltipTrigger asChild>{button}</TooltipTrigger>`; Base UI has no Slot, but
7// `Tooltip.Trigger` accepts a `render` prop taking an element, which is the same composition —
8// `render={button}`. That is a real primitive with a documented prop, not a guess.
9//
10// `asChild` IS ABSENT FROM THIS BASE'S OWN PARTS, matching badge, breadcrumb and item. Five of them
11// take it in the radix source — GroupLabel, GroupAction, MenuButton, MenuAction, MenuSubButton — and
12// each renders a plain host element, so there is no primitive here whose `render` prop to borrow and
13// nothing settles which spelling upstream's Base UI sidebar uses. It is typed `never` so markup
14// carried over from the radix base fails to compile rather than silently rendering the wrapper AND
15// its child.
16//
17// THAT GAP IS LOAD-BEARING HERE, more than it was for badge: `<SidebarMenuButton asChild>` wrapping
18// a router link is the ordinary way to build a nav. Until the upstream source settles the spelling,
19// build the link inside the button, or apply the exported `sidebarMenuButtonVariants({ variant, size })`
20// to your own element.
21//
22// Octane adaptations: "use client" dropped, lucide-react -> @octanejs/lucide; the provider/Sheet
23// trees compose with createElement where a child must be a real element descriptor, and CSS custom
24// properties in `style` are cast (they sit outside CSSProperties).
25import {
26	createContext,
27	createElement,
28	useCallback,
29	useContext,
30	useEffect,
31	useMemo,
32	useState,
33	type OctaneNode,
34} from 'octane';
35import { cva, type VariantProps } from 'class-variance-authority';
36import { PanelLeftIcon } from '@octanejs/lucide';
37 
38import { cn } from '@/lib/utils';
39import { useIsMobile } from '@/hooks/use-mobile';
40import { Button } from '@/components/ui/button';
41import { Input } from '@/components/ui/input';
42import { Separator } from '@/components/ui/separator';
43import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
44import { Skeleton } from '@/components/ui/skeleton';
45// … truncated