{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar",
  "description": "Composable app sidebar navigation with provider-owned collapsed state, semantic links, icon rail behavior, grouped content, a distinctive navigation-strokes toggle and optional compact edge control, Motion-powered reduced-motion-safe toggle feedback, animated selection indicator, collapse choreography, collapsed tooltips and badge dots, group and mobile drawer exit animations, hover-revealed row actions, separator, and token-backed styling, and useSidebarState for surface-aware extensions.",
  "dependencies": [
    "motion@^12.43.0"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://components.dethink.co.uk/r/dethink-base.json"
  ],
  "files": [
    {
      "path": "packages/components/src/components/sidebar/sidebar.tsx",
      "type": "registry:file",
      "target": "~/components/dethink/components/sidebar/sidebar.tsx",
      "content": "import {\n  Children,\n  cloneElement,\n  createContext,\n  forwardRef,\n  isValidElement,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n  useSyncExternalStore,\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type CSSProperties,\n  type ForwardedRef,\n  type HTMLAttributes,\n  type KeyboardEventHandler,\n  type MouseEvent,\n  type MouseEventHandler,\n  type ReactElement,\n  type ReactNode,\n  type Ref,\n  type TransitionEventHandler,\n} from \"react\";\nimport { createPortal } from \"react-dom\";\nimport {\n  AnimatePresence,\n  motion as motionElement,\n  useReducedMotion,\n  type HTMLMotionProps,\n  type Transition,\n  type Variants,\n} from \"motion/react\";\nimport { cn } from \"../../utils/cn\";\nimport { getDethinkPortalOwner } from \"../../utils/portal-owner\";\n\nconst subscribePortal = () => () => {};\nconst getPortalSnapshot = () => document.body;\nconst getServerPortalSnapshot = () => null;\n\nexport type SidebarSide = \"left\" | \"right\";\nexport type SidebarVariant =\n  \"default\" | \"floating\" | \"inset\" | \"rail\" | \"bordered\";\nexport type SidebarMotion = \"none\" | \"subtle\" | \"standard\" | \"expressive\";\nexport type SidebarTriggerAction = \"toggle\" | \"expand\" | \"collapse\";\n\nexport interface SidebarProviderProps extends HTMLAttributes<HTMLDivElement> {\n  animate?: boolean;\n  collapsed?: boolean;\n  defaultCollapsed?: boolean;\n  defaultMobileOpen?: boolean;\n  mobileOpen?: boolean;\n  motion?: SidebarMotion;\n  onCollapsedChange?: (collapsed: boolean) => void;\n  onMobileOpenChange?: (open: boolean) => void;\n  side?: SidebarSide;\n  variant?: SidebarVariant;\n}\n\nexport interface SidebarProps extends HTMLAttributes<HTMLElement> {\n  side?: SidebarSide;\n  variant?: SidebarVariant;\n}\n\nexport interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {}\nexport interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {}\nexport interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {}\nexport interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {\n  collapsible?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  open?: boolean;\n}\nexport interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {}\nexport interface SidebarGroupContentProps extends HTMLAttributes<HTMLDivElement> {}\nexport interface SidebarGroupTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {}\nexport interface SidebarMobileProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  \"title\"\n> {\n  closeButtonLabel?: string;\n  label?: ReactNode;\n  overlayClassName?: string;\n  side?: SidebarSide;\n  showCloseButton?: boolean;\n}\nexport interface SidebarMobileTriggerProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> {\n  children?: ReactNode;\n  closeLabel?: string;\n  openLabel?: string;\n  side?: SidebarSide;\n}\nexport interface SidebarMenuProps extends HTMLAttributes<HTMLUListElement> {}\nexport interface SidebarMenuItemProps extends HTMLAttributes<HTMLLIElement> {}\nexport interface SidebarMenuBadgeProps extends HTMLAttributes<HTMLSpanElement> {}\n\nexport interface SidebarTriggerProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> {\n  action?: SidebarTriggerAction;\n  children?: ReactNode;\n  collapseLabel?: string;\n  expandLabel?: string;\n  side?: SidebarSide;\n}\n\nexport interface SidebarRailProps extends Omit<\n  ButtonHTMLAttributes<HTMLButtonElement>,\n  \"children\"\n> {\n  children?: ReactNode;\n  collapseLabel?: string;\n  expandLabel?: string;\n  side?: SidebarSide;\n}\n\ntype SidebarMenuCommonProps = {\n  active?: boolean;\n  badge?: ReactNode;\n  description?: ReactNode;\n  disabled?: boolean;\n  external?: boolean;\n  icon?: ReactNode;\n  shortcut?: ReactNode;\n  tooltip?: string;\n};\n\ntype SidebarMenuLinkBaseProps = SidebarMenuCommonProps & {\n  asChild?: boolean;\n  current?: boolean;\n};\n\ntype NativeSidebarMenuLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"children\" | \"href\"\n> &\n  SidebarMenuLinkBaseProps & {\n    asChild?: false;\n    children: ReactNode;\n    href: string;\n  };\n\ntype ChildSidebarMenuLinkProps = Omit<\n  AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"children\" | \"href\"\n> &\n  SidebarMenuLinkBaseProps & {\n    asChild: true;\n    children: ReactElement<SidebarMenuLinkSlotProps>;\n    href?: string;\n  };\n\nexport type SidebarMenuLinkProps =\n  NativeSidebarMenuLinkProps | ChildSidebarMenuLinkProps;\n\nexport interface SidebarMenuButtonProps\n  extends ButtonHTMLAttributes<HTMLButtonElement>, SidebarMenuCommonProps {}\n\nexport interface SidebarMenuActionProps extends ButtonHTMLAttributes<HTMLButtonElement> {\n  label?: string;\n  showOnHover?: boolean;\n}\n\nexport interface SidebarSeparatorProps extends HTMLAttributes<HTMLDivElement> {}\n\nexport interface SidebarInsetProps extends HTMLAttributes<HTMLElement> {\n  as?: \"div\" | \"main\" | \"section\";\n}\n\nexport interface SidebarSkipLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {\n  targetId?: string;\n}\n\ntype SidebarMenuLinkSlotProps = Record<string, unknown> & {\n  children?: ReactNode;\n  className?: string;\n  href?: string;\n  onClick?: MouseEventHandler<HTMLElement>;\n  ref?: Ref<HTMLElement>;\n  rel?: string;\n  target?: AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"];\n  \"aria-current\"?: AnchorHTMLAttributes<HTMLAnchorElement>[\"aria-current\"];\n};\n\ninterface SidebarContextValue {\n  collapsed: boolean;\n  mobileOpen: boolean;\n  mobileTriggerElement: HTMLButtonElement | null;\n  motion: SidebarMotion;\n  setCollapsed: (collapsed: boolean) => void;\n  setMobileOpen: (open: boolean) => void;\n  setMobileTriggerElement: (element: HTMLButtonElement | null) => void;\n  side: SidebarSide;\n  toggleCollapsed: () => void;\n  toggleMobileOpen: () => void;\n  variant: SidebarVariant;\n}\n\nconst SidebarContext = createContext<SidebarContextValue | null>(null);\n\ninterface SidebarSurfaceContextValue {\n  collapsed: boolean;\n  side: SidebarSide;\n  variant: SidebarVariant;\n}\n\nconst SidebarSurfaceContext = createContext<SidebarSurfaceContextValue | null>(\n  null,\n);\n\nexport interface SidebarState {\n  collapsed: boolean;\n  side: SidebarSide;\n  variant: SidebarVariant;\n  setCollapsed: (collapsed: boolean) => void;\n}\n\n/** State for sidebar extensions, resolved against the current desktop/mobile surface. */\nexport function useSidebarState(): SidebarState {\n  const context = useSidebarContext(\"useSidebarState\");\n  const surface = useContext(SidebarSurfaceContext);\n  return {\n    collapsed: surface?.collapsed ?? context.collapsed,\n    side: surface?.side ?? context.side,\n    variant: surface?.variant ?? context.variant,\n    setCollapsed: context.setCollapsed,\n  };\n}\n\ninterface SidebarGroupContextValue {\n  collapsible: boolean;\n  contentId: string;\n  open: boolean;\n  setOpen: (open: boolean) => void;\n  toggleOpen: () => void;\n}\n\nconst SidebarGroupContext = createContext<SidebarGroupContextValue | null>(\n  null,\n);\n\nconst sidebarProviderClasses =\n  \"group/sidebar-provider flex min-h-0 w-full min-w-0 text-foreground [--sidebar-motion-duration:220ms] [--sidebar-motion-ease:cubic-bezier(0.34,1.24,0.64,1)] [--sidebar-width:16rem] [--sidebar-width-collapsed:3.5rem] data-[motion=expressive]:[--sidebar-motion-duration:320ms] data-[motion=expressive]:[--sidebar-motion-ease:cubic-bezier(0.34,1.56,0.64,1)] data-[motion=none]:[--sidebar-motion-duration:0ms] data-[motion=none]:[--sidebar-motion-ease:linear] data-[motion=standard]:[--sidebar-motion-duration:220ms] data-[motion=standard]:[--sidebar-motion-ease:cubic-bezier(0.34,1.24,0.64,1)] data-[motion=subtle]:[--sidebar-motion-duration:150ms] data-[motion=subtle]:[--sidebar-motion-ease:cubic-bezier(0.16,1,0.3,1)]\";\n\nconst sidebarClasses =\n  \"group group/sidebar relative flex min-h-0 w-[var(--sidebar-width)] shrink-0 flex-col overflow-visible border-border bg-background text-foreground outline-none data-[collapsed=true]:w-[var(--sidebar-width-collapsed)] data-[side=left]:border-r data-[side=right]:border-l\";\n\nconst sidebarViewportClasses =\n  \"flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-[inherit]\";\n\nconst sidebarVariantClasses: Record<SidebarVariant, string> = {\n  default: \"shadow-none\",\n  floating:\n    \"m-[var(--dt-space-2)] h-[calc(100%_-_(var(--dt-space-2)*2))] rounded-lg border shadow-lg\",\n  inset: \"border-e-0 bg-muted/40 p-[var(--dt-space-2)]\",\n  rail: \"w-[var(--sidebar-width-collapsed)]\",\n  bordered: \"border bg-background shadow-sm\",\n};\n\nconst sidebarSectionClasses =\n  \"min-w-0 px-[var(--dt-space-2)] py-[var(--dt-space-2)]\";\n\nconst sidebarContentClasses =\n  \"min-h-0 flex-1 overflow-x-hidden overflow-y-auto overscroll-contain px-[var(--dt-space-2)] py-[var(--dt-space-2)]\";\n\nconst sidebarGroupClasses =\n  \"grid min-w-0 gap-[var(--dt-space-1)] py-[var(--dt-space-1)]\";\n\nconst sidebarGroupLabelClasses =\n  \"min-w-0 px-[var(--dt-space-2)] py-[var(--dt-space-1)] text-xs font-semibold uppercase tracking-normal text-muted-foreground group-data-[collapsed=true]:sr-only\";\n\nconst sidebarGroupTriggerClasses =\n  \"group group/sidebar-group-trigger flex min-h-8 w-full min-w-0 items-center justify-between gap-[var(--dt-space-2)] rounded-md px-[var(--dt-space-2)] py-[var(--dt-space-1-5)] text-start text-xs font-semibold uppercase tracking-normal text-muted-foreground outline-none motion-safe:transition-[color,box-shadow] motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring group-data-[collapsed=true]:sr-only\";\n\nconst sidebarGroupTriggerIconClasses =\n  \"size-4 shrink-0 text-muted-foreground motion-safe:transition-[rotate] motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none group-data-[open=true]:rotate-90 rtl:group-data-[open=false]:rotate-180 [&>svg]:size-4\";\n\nconst sidebarGroupContentClasses = \"grid min-w-0 grid-rows-[1fr]\";\n\nconst sidebarGroupContentInnerClasses =\n  \"grid min-h-0 min-w-0 gap-[var(--dt-space-1)] overflow-hidden\";\n\nconst sidebarMobileOverlayClasses =\n  \"fixed inset-0 z-50 bg-foreground/35 text-foreground outline-none\";\n\nconst sidebarMobilePanelClasses =\n  \"fixed inset-y-0 flex w-[min(var(--sidebar-width),calc(100vw_-_var(--dt-space-6)))] max-w-sm flex-col overflow-hidden border-border bg-background shadow-xl outline-none data-[side=left]:left-0 data-[side=left]:border-r data-[side=right]:right-0 data-[side=right]:border-l\";\n\nconst sidebarMobileCloseClasses =\n  \"absolute end-[var(--dt-space-3)] top-[var(--dt-space-3)] z-10\";\n\nconst sidebarMenuClasses = \"grid min-w-0 list-none gap-[var(--dt-space-1)] p-0\";\n\nconst sidebarMenuItemClasses = \"group/sidebar-menu-item relative min-w-0\";\n\nconst sidebarMenuInteractiveClasses =\n  \"group group/sidebar-menu-interactive relative grid min-h-9 w-full min-w-0 grid-cols-[1rem_minmax(0,1fr)_auto] items-center gap-[var(--dt-space-2)] rounded-md px-[var(--dt-space-2)] py-[var(--dt-space-2)] text-start text-sm leading-5 text-muted-foreground outline-none motion-safe:transition-[color,box-shadow,scale] motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none hover:bg-muted hover:text-foreground focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring active:bg-muted motion-safe:active:scale-[0.985] data-[active=true]:bg-muted data-[active=true]:text-foreground data-[current=true]:bg-primary/10 data-[current=true]:font-medium data-[current=true]:text-foreground data-[current=true]:hover:bg-primary/10 data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 group-data-[collapsed=true]:grid-cols-[1rem] group-data-[collapsed=true]:justify-center group-data-[collapsed=true]:px-0\";\n\nconst sidebarMenuIndicatorClasses =\n  \"pointer-events-none absolute inset-y-[var(--dt-space-1-5)] start-0 w-0.5 rounded-full bg-primary motion-safe:animate-sidebar-indicator-in motion-reduce:animate-none\";\n\nconst sidebarMenuIconClasses =\n  \"pointer-events-none relative flex size-4 shrink-0 items-center justify-center text-muted-foreground group-data-[active=true]:text-foreground group-data-[current=true]:text-primary [&>svg]:size-4\";\n\nconst sidebarMenuIconFallbackClasses =\n  \"text-[0.625rem] font-semibold uppercase leading-none opacity-0 motion-safe:transition-opacity motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none group-data-[collapsed=true]:opacity-100\";\n\nconst sidebarMenuBadgeDotClasses =\n  \"absolute -end-0.5 -top-0.5 size-1.5 rounded-full bg-primary opacity-0 motion-safe:transition-opacity motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none group-data-[collapsed=true]:opacity-100\";\n\nconst sidebarMenuLabelClasses =\n  \"min-w-0 truncate motion-safe:transition-[opacity,translate] motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none group-data-[collapsed=true]:pointer-events-none group-data-[collapsed=true]:absolute group-data-[collapsed=true]:start-8 group-data-[collapsed=true]:opacity-0 group-data-[collapsed=true]:-translate-x-2 rtl:group-data-[collapsed=true]:translate-x-2\";\n\nconst sidebarMenuDescriptionClasses =\n  \"col-start-2 min-w-0 truncate text-xs leading-5 text-muted-foreground motion-safe:transition-opacity motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none group-data-[collapsed=true]:pointer-events-none group-data-[collapsed=true]:absolute group-data-[collapsed=true]:opacity-0\";\n\nconst sidebarMenuMetaClasses =\n  \"ms-[var(--dt-space-2)] inline-flex shrink-0 items-center gap-[var(--dt-space-1)] justify-self-end motion-safe:transition-opacity motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] motion-reduce:transition-none group-data-[collapsed=true]:pointer-events-none group-data-[collapsed=true]:absolute group-data-[collapsed=true]:end-2 group-data-[collapsed=true]:opacity-0\";\n\nconst sidebarMenuBadgeClasses =\n  \"inline-flex min-w-5 items-center justify-center rounded-full bg-muted px-[var(--dt-space-1-5)] py-0.5 text-[0.6875rem] font-medium leading-4 text-muted-foreground\";\n\nconst sidebarMenuShortcutClasses =\n  \"rounded-sm bg-muted px-[var(--dt-space-1)] py-0.5 font-mono text-[0.6875rem] leading-4 text-muted-foreground\";\n\nconst sidebarTriggerClasses =\n  \"inline-flex size-10 shrink-0 items-center justify-center rounded-md border-0 bg-transparent text-muted-foreground outline-none motion-safe:transition-[background-color,color,box-shadow,scale] motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] hover:bg-muted hover:text-foreground active:scale-95 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none disabled:opacity-50 [&>svg]:size-[18px] [&>svg]:shrink-0\";\n\nconst sidebarRailClasses =\n  \"group/sidebar-rail absolute top-[var(--dt-space-3)] z-20 hidden h-10 w-6 cursor-pointer items-center justify-center outline-none disabled:pointer-events-none disabled:opacity-50 data-[side=left]:left-full data-[side=left]:-translate-x-2 data-[side=right]:right-full data-[side=right]:translate-x-2 md:flex\";\n\nconst sidebarRailHandleClasses =\n  \"relative flex h-8 w-5 items-center justify-center rounded-md border border-border bg-background text-muted-foreground shadow-sm ring-offset-background group-hover/sidebar-rail:bg-muted group-hover/sidebar-rail:text-foreground group-focus-visible/sidebar-rail:ring-2 group-focus-visible/sidebar-rail:ring-ring group-focus-visible/sidebar-rail:ring-offset-2 contrast-more:border-current [&>span]:flex [&>span]:items-center [&>span]:justify-center [&_svg]:size-2.5 [&_svg]:shrink-0\";\n\nconst sidebarMotionTransitions: Record<\n  Exclude<SidebarMotion, \"none\">,\n  Transition\n> = {\n  subtle: { type: \"spring\", stiffness: 520, damping: 40, mass: 0.65 },\n  standard: { type: \"spring\", stiffness: 460, damping: 34, mass: 0.7 },\n  expressive: { type: \"spring\", stiffness: 420, damping: 27, mass: 0.75 },\n};\n\nconst sidebarStaticTransition: Transition = { duration: 0 };\n\nfunction getSidebarMotionTransition(motion: SidebarMotion) {\n  return motion === \"none\"\n    ? sidebarStaticTransition\n    : sidebarMotionTransitions[motion];\n}\n\nfunction useResolvedSidebarMotion(motion: SidebarMotion) {\n  const shouldReduceMotion = useReducedMotion();\n\n  return motion === \"none\" || shouldReduceMotion === true ? \"none\" : motion;\n}\n\nconst sidebarRailHandleVariants: Variants = {\n  rest: { scale: 1 },\n  hover: { scale: 1.03 },\n  tap: { scale: 0.96 },\n};\n\nconst sidebarMenuActionRevealClasses =\n  \"absolute end-[var(--dt-space-1)] top-1/2 size-7 -translate-y-1/2 border-0 bg-transparent opacity-0 motion-safe:transition-[opacity,color,box-shadow,scale] motion-safe:duration-[var(--sidebar-motion-duration)] motion-safe:ease-[var(--sidebar-motion-ease)] focus-visible:opacity-100 group-focus-within/sidebar-menu-item:opacity-100 group-hover/sidebar-menu-item:opacity-100 group-data-[collapsed=true]:hidden\";\n\nconst sidebarSeparatorClasses =\n  \"mx-[var(--dt-space-2)] my-[var(--dt-space-1)] h-px shrink-0 rounded-full bg-border\";\n\nconst sidebarInsetClasses = \"min-w-0 flex-1 bg-background text-foreground\";\n\nconst sidebarSkipLinkClasses =\n  \"sr-only fixed start-[var(--dt-space-3)] top-[var(--dt-space-3)] z-50 rounded-md bg-background px-[var(--dt-space-3)] py-[var(--dt-space-2)] text-sm font-medium text-foreground shadow-lg ring-2 ring-ring focus:not-sr-only\";\n\nconst exitFallbackMs = 500;\n\nfunction canAnimateExit(motion: SidebarMotion) {\n  if (motion === \"none\") {\n    return false;\n  }\n\n  if (\n    typeof window === \"undefined\" ||\n    typeof window.matchMedia !== \"function\"\n  ) {\n    return false;\n  }\n\n  return !window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n}\n\nfunction useSidebarContext(componentName: string) {\n  const context = useContext(SidebarContext);\n\n  if (!context) {\n    throw new Error(`${componentName} must be used within SidebarProvider.`);\n  }\n\n  return context;\n}\n\nfunction resolveNextState<T>(\n  next: T | ((currentValue: T) => T),\n  currentValue: T,\n) {\n  return typeof next === \"function\"\n    ? (next as (currentValue: T) => T)(currentValue)\n    : next;\n}\n\nfunction useControllableBoolean({\n  defaultValue = false,\n  onChange,\n  value,\n}: {\n  defaultValue?: boolean;\n  onChange?: (value: boolean) => void;\n  value?: boolean;\n}) {\n  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);\n  const isControlled = value !== undefined;\n  const currentValue = value ?? uncontrolledValue;\n\n  const setValue = useCallback(\n    (next: boolean | ((currentValue: boolean) => boolean)) => {\n      const nextValue = resolveNextState(next, currentValue);\n\n      if (!isControlled) {\n        setUncontrolledValue(nextValue);\n      }\n\n      onChange?.(nextValue);\n    },\n    [currentValue, isControlled, onChange],\n  );\n\n  return [currentValue, setValue] as const;\n}\n\nfunction setRef<T>(ref: Ref<T> | undefined, node: T | null) {\n  if (typeof ref === \"function\") {\n    ref(node);\n    return;\n  }\n\n  if (ref) {\n    (ref as { current: T | null }).current = node;\n  }\n}\n\nfunction composeRefs<T>(...refs: Array<Ref<T> | undefined>) {\n  return (node: T | null) => {\n    for (const ref of refs) {\n      setRef(ref, node);\n    }\n  };\n}\n\nfunction composeClickHandlers(\n  componentHandler: MouseEventHandler<HTMLElement> | undefined,\n  childHandler: MouseEventHandler<HTMLElement> | undefined,\n) {\n  if (!componentHandler && !childHandler) {\n    return undefined;\n  }\n\n  return (event: MouseEvent<HTMLElement>) => {\n    componentHandler?.(event);\n\n    if (!event.defaultPrevented) {\n      childHandler?.(event);\n    }\n  };\n}\n\nconst focusableSelector = [\n  \"a[href]\",\n  \"button:not([disabled])\",\n  \"input:not([disabled])\",\n  \"select:not([disabled])\",\n  \"textarea:not([disabled])\",\n  \"[tabindex]:not([tabindex='-1'])\",\n].join(\",\");\n\nfunction isFocusableElement(element: HTMLElement) {\n  if (\n    element.tabIndex < 0 ||\n    element.matches(\":disabled\") ||\n    element.closest('[hidden], [inert], [aria-hidden=\"true\"]')\n  ) {\n    return false;\n  }\n\n  for (\n    let current: HTMLElement | null = element;\n    current;\n    current = current.parentElement\n  ) {\n    const style = window.getComputedStyle(current);\n    if (style.display === \"none\" || style.visibility === \"hidden\") return false;\n  }\n  return true;\n}\n\nfunction getFocusableElements(container: HTMLElement) {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(focusableSelector),\n  ).filter(isFocusableElement);\n}\n\nfunction getChildRef(child: ReactElement<SidebarMenuLinkSlotProps>) {\n  return (\n    child.props.ref ??\n    (\n      child as ReactElement<SidebarMenuLinkSlotProps> & {\n        ref?: Ref<HTMLElement>;\n      }\n    ).ref\n  );\n}\n\nfunction mergeRelForTarget(\n  rel: string | undefined,\n  target: AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"] | undefined,\n) {\n  if (target !== \"_blank\") {\n    return rel;\n  }\n\n  const tokens = new Set((rel ?? \"\").split(/\\s+/).filter(Boolean));\n  tokens.add(\"noopener\");\n\n  return Array.from(tokens).join(\" \");\n}\n\nfunction hasCurrentState(\n  ariaCurrent: AnchorHTMLAttributes<HTMLAnchorElement>[\"aria-current\"],\n) {\n  return (\n    ariaCurrent !== undefined &&\n    ariaCurrent !== false &&\n    ariaCurrent !== \"false\"\n  );\n}\n\nfunction resolveMenuTooltip(tooltip: string | undefined, children: ReactNode) {\n  if (tooltip !== undefined) {\n    return tooltip || undefined;\n  }\n\n  return typeof children === \"string\" && children.trim() ? children : undefined;\n}\n\nfunction useTooltipAnchorName() {\n  const id = useId();\n\n  return `--dt-sidebar-item-${id.replace(/[^a-zA-Z0-9-]/g, \"\")}`;\n}\n\nfunction tooltipAnchorStyle(\n  anchorName: string,\n  tooltip: string | undefined,\n  style: CSSProperties | undefined,\n) {\n  if (!tooltip) {\n    return style;\n  }\n\n  return {\n    ...({ \"--dt-sidebar-tooltip-anchor\": anchorName } as CSSProperties),\n    ...style,\n  };\n}\n\nfunction ChevronLeftIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n      stroke=\"currentColor\"\n    >\n      <path\n        d=\"M10 3.5 5.5 8l4.5 4.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.75\"\n      />\n    </svg>\n  );\n}\n\nfunction ChevronRightIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n      stroke=\"currentColor\"\n    >\n      <path\n        d=\"m6 3.5 4.5 4.5L6 12.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.75\"\n      />\n    </svg>\n  );\n}\n\nfunction CloseIcon() {\n  return (\n    <svg\n      aria-hidden=\"true\"\n      fill=\"none\"\n      viewBox=\"0 0 16 16\"\n      stroke=\"currentColor\"\n    >\n      <path\n        d=\"m4.25 4.25 7.5 7.5m0-7.5-7.5 7.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        strokeWidth=\"1.75\"\n      />\n    </svg>\n  );\n}\n\nfunction getTriggerDirection(collapsed: boolean, side: SidebarSide) {\n  if (side === \"right\") {\n    return collapsed ? \"left\" : \"right\";\n  }\n\n  return collapsed ? \"right\" : \"left\";\n}\n\nfunction renderTriggerIcon(collapsed: boolean, side: SidebarSide) {\n  const direction = getTriggerDirection(collapsed, side);\n  return (\n    <svg\n      aria-hidden=\"true\"\n      data-slot=\"sidebar-toggle-icon\"\n      data-direction={direction}\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.6\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n    >\n      <path\n        d={\n          side === \"left\"\n            ? \"M4 6h10M4 12h7M4 18h10\"\n            : \"M10 6h10M13 12h7M10 18h10\"\n        }\n      />\n      <path\n        d={\n          side === \"left\"\n            ? direction === \"left\"\n              ? \"m20 9-3 3 3 3\"\n              : \"m17 9 3 3-3 3\"\n            : direction === \"left\"\n              ? \"m7 9-3 3 3 3\"\n              : \"m4 9 3 3-3 3\"\n        }\n      />\n    </svg>\n  );\n}\n\nfunction isSidebarRailChild(child: ReactNode) {\n  if (!isValidElement(child) || typeof child.type === \"string\") {\n    return false;\n  }\n\n  return (\n    (\n      child.type as unknown as {\n        displayName?: string;\n      }\n    ).displayName === \"SidebarRail\"\n  );\n}\n\nfunction renderMenuContent({\n  badge,\n  children,\n  current = false,\n  description,\n  icon,\n  shortcut,\n}: Pick<\n  SidebarMenuCommonProps,\n  \"badge\" | \"description\" | \"icon\" | \"shortcut\"\n> & {\n  children: ReactNode;\n  current?: boolean;\n}) {\n  return (\n    <>\n      {current ? (\n        <span\n          aria-hidden=\"true\"\n          data-slot=\"sidebar-menu-indicator\"\n          className={sidebarMenuIndicatorClasses}\n        />\n      ) : null}\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"sidebar-menu-icon\"\n        className={sidebarMenuIconClasses}\n      >\n        {icon ??\n          (typeof children === \"string\" && children.trim() ? (\n            <span\n              data-slot=\"sidebar-menu-icon-fallback\"\n              className={sidebarMenuIconFallbackClasses}\n            >\n              {children.trim().charAt(0)}\n            </span>\n          ) : null)}\n        {badge ? (\n          <span\n            data-slot=\"sidebar-menu-badge-dot\"\n            className={sidebarMenuBadgeDotClasses}\n          />\n        ) : null}\n      </span>\n      <span data-slot=\"sidebar-menu-label\" className={sidebarMenuLabelClasses}>\n        {children}\n      </span>\n      {description ? (\n        <span\n          data-slot=\"sidebar-menu-description\"\n          className={sidebarMenuDescriptionClasses}\n        >\n          {description}\n        </span>\n      ) : null}\n      {badge || shortcut ? (\n        <span data-slot=\"sidebar-menu-meta\" className={sidebarMenuMetaClasses}>\n          {badge ? <SidebarMenuBadge>{badge}</SidebarMenuBadge> : null}\n          {shortcut ? (\n            <span\n              data-slot=\"sidebar-menu-shortcut\"\n              className={sidebarMenuShortcutClasses}\n            >\n              {shortcut}\n            </span>\n          ) : null}\n        </span>\n      ) : null}\n    </>\n  );\n}\n\nexport function sidebarProviderClassNames({\n  className,\n}: Pick<SidebarProviderProps, \"className\"> = {}) {\n  return cn(sidebarProviderClasses, className);\n}\n\nexport function sidebarClassNames({\n  className,\n  variant = \"default\",\n}: Pick<SidebarProps, \"className\" | \"variant\"> = {}) {\n  return cn(sidebarClasses, sidebarVariantClasses[variant], className);\n}\n\nexport function sidebarHeaderClassNames({\n  className,\n}: Pick<SidebarHeaderProps, \"className\"> = {}) {\n  return cn(sidebarSectionClasses, className);\n}\n\nexport function sidebarFooterClassNames({\n  className,\n}: Pick<SidebarFooterProps, \"className\"> = {}) {\n  return cn(sidebarSectionClasses, className);\n}\n\nexport function sidebarContentClassNames({\n  className,\n}: Pick<SidebarContentProps, \"className\"> = {}) {\n  return cn(sidebarContentClasses, className);\n}\n\nexport function sidebarGroupClassNames({\n  className,\n}: Pick<SidebarGroupProps, \"className\"> = {}) {\n  return cn(sidebarGroupClasses, className);\n}\n\nexport function sidebarGroupLabelClassNames({\n  className,\n}: Pick<SidebarGroupLabelProps, \"className\"> = {}) {\n  return cn(sidebarGroupLabelClasses, className);\n}\n\nexport function sidebarGroupTriggerClassNames({\n  className,\n}: Pick<SidebarGroupTriggerProps, \"className\"> = {}) {\n  return cn(sidebarGroupTriggerClasses, className);\n}\n\nexport function sidebarGroupContentClassNames({\n  className,\n}: Pick<SidebarGroupContentProps, \"className\"> = {}) {\n  return cn(sidebarGroupContentClasses, className);\n}\n\nexport function sidebarMobileClassNames({\n  className,\n}: Pick<SidebarMobileProps, \"className\"> = {}) {\n  return cn(sidebarMobilePanelClasses, className);\n}\n\nexport function sidebarMobileOverlayClassNames({\n  className,\n}: {\n  className?: string;\n} = {}) {\n  return cn(sidebarMobileOverlayClasses, className);\n}\n\nexport function sidebarMobileTriggerClassNames({\n  className,\n}: Pick<SidebarMobileTriggerProps, \"className\"> = {}) {\n  return cn(sidebarTriggerClasses, className);\n}\n\nexport function sidebarMenuClassNames({\n  className,\n}: Pick<SidebarMenuProps, \"className\"> = {}) {\n  return cn(sidebarMenuClasses, className);\n}\n\nexport function sidebarMenuItemClassNames({\n  className,\n}: Pick<SidebarMenuItemProps, \"className\"> = {}) {\n  return cn(sidebarMenuItemClasses, className);\n}\n\nexport function sidebarMenuLinkClassNames({\n  className,\n}: Pick<SidebarMenuLinkProps, \"className\"> = {}) {\n  return cn(sidebarMenuInteractiveClasses, className);\n}\n\nexport function sidebarMenuButtonClassNames({\n  className,\n}: Pick<SidebarMenuButtonProps, \"className\"> = {}) {\n  return cn(sidebarMenuInteractiveClasses, className);\n}\n\nexport function sidebarMenuBadgeClassNames({\n  className,\n}: Pick<SidebarMenuBadgeProps, \"className\"> = {}) {\n  return cn(sidebarMenuBadgeClasses, className);\n}\n\nexport function sidebarMenuActionClassNames({\n  className,\n  showOnHover = false,\n}: Pick<SidebarMenuActionProps, \"className\" | \"showOnHover\"> = {}) {\n  return cn(\n    sidebarTriggerClasses,\n    \"size-7\",\n    showOnHover && sidebarMenuActionRevealClasses,\n    className,\n  );\n}\n\nexport function sidebarSeparatorClassNames({\n  className,\n}: Pick<SidebarSeparatorProps, \"className\"> = {}) {\n  return cn(sidebarSeparatorClasses, className);\n}\n\nexport function sidebarTriggerClassNames({\n  className,\n}: Pick<SidebarTriggerProps, \"className\"> = {}) {\n  return cn(sidebarTriggerClasses, className);\n}\n\nexport function sidebarRailClassNames({\n  className,\n}: Pick<SidebarRailProps, \"className\"> = {}) {\n  return cn(sidebarRailClasses, className);\n}\n\nexport function sidebarInsetClassNames({\n  className,\n}: Pick<SidebarInsetProps, \"className\"> = {}) {\n  return cn(sidebarInsetClasses, className);\n}\n\nexport function sidebarSkipLinkClassNames({\n  className,\n}: Pick<SidebarSkipLinkProps, \"className\"> = {}) {\n  return cn(sidebarSkipLinkClasses, className);\n}\n\nexport const SidebarProvider = forwardRef<HTMLDivElement, SidebarProviderProps>(\n  (\n    {\n      animate = true,\n      children,\n      className,\n      collapsed,\n      defaultCollapsed = false,\n      defaultMobileOpen = false,\n      mobileOpen,\n      motion = \"standard\",\n      onCollapsedChange,\n      onMobileOpenChange,\n      side = \"left\",\n      variant = \"default\",\n      ...props\n    },\n    ref,\n  ) => {\n    const [mobileTriggerElement, setMobileTriggerElement] =\n      useState<HTMLButtonElement | null>(null);\n    const [resolvedCollapsed, setCollapsed] = useControllableBoolean({\n      defaultValue: defaultCollapsed,\n      onChange: onCollapsedChange,\n      value: collapsed,\n    });\n    const [resolvedMobileOpen, setMobileOpen] = useControllableBoolean({\n      defaultValue: defaultMobileOpen,\n      onChange: onMobileOpenChange,\n      value: mobileOpen,\n    });\n    const resolvedMotion = animate ? motion : \"none\";\n    const value = useMemo<SidebarContextValue>(\n      () => ({\n        collapsed: resolvedCollapsed,\n        mobileOpen: resolvedMobileOpen,\n        mobileTriggerElement,\n        motion: resolvedMotion,\n        setCollapsed,\n        setMobileOpen,\n        setMobileTriggerElement,\n        side,\n        toggleCollapsed: () => setCollapsed((currentValue) => !currentValue),\n        toggleMobileOpen: () => setMobileOpen((currentValue) => !currentValue),\n        variant,\n      }),\n      [\n        mobileTriggerElement,\n        resolvedCollapsed,\n        resolvedMobileOpen,\n        resolvedMotion,\n        setCollapsed,\n        setMobileOpen,\n        setMobileTriggerElement,\n        side,\n        variant,\n      ],\n    );\n\n    return (\n      <SidebarContext.Provider value={value}>\n        <div\n          {...props}\n          ref={ref}\n          data-slot=\"sidebar-provider\"\n          data-animate={animate ? \"true\" : \"false\"}\n          data-collapsed={resolvedCollapsed ? \"true\" : \"false\"}\n          data-mobile-open={resolvedMobileOpen ? \"true\" : \"false\"}\n          data-motion={resolvedMotion}\n          data-side={side}\n          data-variant={variant}\n          className={sidebarProviderClassNames({ className })}\n        >\n          {children}\n        </div>\n      </SidebarContext.Provider>\n    );\n  },\n);\n\nSidebarProvider.displayName = \"SidebarProvider\";\n\nexport const Sidebar = forwardRef<HTMLElement, SidebarProps>(\n  (\n    {\n      \"aria-label\": ariaLabel = \"Sidebar\",\n      children,\n      className,\n      side: sideProp,\n      variant: variantProp,\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useSidebarContext(\"Sidebar\");\n    const side = sideProp ?? context.side;\n    const variant = variantProp ?? context.variant;\n    const surfaceCollapsed = context.collapsed || variant === \"rail\";\n    const resolvedMotion = useResolvedSidebarMotion(context.motion);\n    const motionTransition = getSidebarMotionTransition(resolvedMotion);\n    const motionWidth = surfaceCollapsed\n      ? \"var(--sidebar-width-collapsed)\"\n      : \"var(--sidebar-width)\";\n    const surfaceContext = useMemo<SidebarSurfaceContextValue>(\n      () => ({\n        collapsed: surfaceCollapsed,\n        side,\n        variant,\n      }),\n      [side, surfaceCollapsed, variant],\n    );\n    const resolvedChildren = Children.toArray(children);\n    const railChildren = resolvedChildren.filter(isSidebarRailChild);\n    const viewportChildren = resolvedChildren.filter(\n      (child) => !isSidebarRailChild(child),\n    );\n\n    return (\n      <SidebarSurfaceContext.Provider value={surfaceContext}>\n        <motionElement.nav\n          {...(props as HTMLMotionProps<\"nav\">)}\n          ref={ref as ForwardedRef<HTMLElement>}\n          aria-label={ariaLabel}\n          animate={{ width: motionWidth }}\n          data-slot=\"sidebar\"\n          data-collapsed={surfaceCollapsed ? \"true\" : \"false\"}\n          data-mobile-open={context.mobileOpen ? \"true\" : \"false\"}\n          data-motion={resolvedMotion}\n          data-side={side}\n          data-variant={variant}\n          className={sidebarClassNames({ className, variant })}\n          initial={false}\n          transition={motionTransition}\n        >\n          <div data-slot=\"sidebar-viewport\" className={sidebarViewportClasses}>\n            {viewportChildren}\n          </div>\n          {railChildren}\n        </motionElement.nav>\n      </SidebarSurfaceContext.Provider>\n    );\n  },\n);\n\nSidebar.displayName = \"Sidebar\";\n\nexport const SidebarHeader = forwardRef<HTMLDivElement, SidebarHeaderProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      {...props}\n      ref={ref}\n      data-slot=\"sidebar-header\"\n      className={sidebarHeaderClassNames({ className })}\n    />\n  ),\n);\n\nSidebarHeader.displayName = \"SidebarHeader\";\n\nexport const SidebarFooter = forwardRef<HTMLDivElement, SidebarFooterProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      {...props}\n      ref={ref}\n      data-slot=\"sidebar-footer\"\n      className={sidebarFooterClassNames({ className })}\n    />\n  ),\n);\n\nSidebarFooter.displayName = \"SidebarFooter\";\n\nexport const SidebarContent = forwardRef<HTMLDivElement, SidebarContentProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      {...props}\n      ref={ref}\n      data-slot=\"sidebar-content\"\n      className={sidebarContentClassNames({ className })}\n    />\n  ),\n);\n\nSidebarContent.displayName = \"SidebarContent\";\n\nexport const SidebarGroup = forwardRef<HTMLDivElement, SidebarGroupProps>(\n  (\n    {\n      children,\n      className,\n      collapsible = false,\n      defaultOpen = true,\n      onOpenChange,\n      open,\n      ...props\n    },\n    ref,\n  ) => {\n    const [resolvedOpen, setOpen] = useControllableBoolean({\n      defaultValue: defaultOpen,\n      onChange: onOpenChange,\n      value: open,\n    });\n    const contentId = useId();\n    const value = useMemo<SidebarGroupContextValue>(\n      () => ({\n        collapsible,\n        contentId,\n        open: resolvedOpen,\n        setOpen,\n        toggleOpen: () => setOpen((currentValue) => !currentValue),\n      }),\n      [collapsible, contentId, resolvedOpen, setOpen],\n    );\n\n    return (\n      <SidebarGroupContext.Provider value={value}>\n        <div\n          {...props}\n          ref={ref}\n          data-collapsible={collapsible ? \"true\" : undefined}\n          data-open={collapsible ? String(resolvedOpen) : undefined}\n          data-slot=\"sidebar-group\"\n          className={sidebarGroupClassNames({ className })}\n        >\n          {children}\n        </div>\n      </SidebarGroupContext.Provider>\n    );\n  },\n);\n\nSidebarGroup.displayName = \"SidebarGroup\";\n\nexport const SidebarGroupLabel = forwardRef<\n  HTMLDivElement,\n  SidebarGroupLabelProps\n>(({ className, ...props }, ref) => (\n  <div\n    {...props}\n    ref={ref}\n    data-slot=\"sidebar-group-label\"\n    className={sidebarGroupLabelClassNames({ className })}\n  />\n));\n\nSidebarGroupLabel.displayName = \"SidebarGroupLabel\";\n\nexport const SidebarGroupTrigger = forwardRef<\n  HTMLButtonElement,\n  SidebarGroupTriggerProps\n>(\n  (\n    { children, className, onClick, tabIndex, type = \"button\", ...props },\n    ref,\n  ) => {\n    const context = useContext(SidebarGroupContext);\n    const surfaceContext = useContext(SidebarSurfaceContext);\n    const surfaceCollapsed = surfaceContext?.collapsed ?? false;\n\n    if (!context || !context.collapsible) {\n      throw new Error(\n        \"SidebarGroupTrigger must be used inside a collapsible SidebarGroup.\",\n      );\n    }\n\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      context.toggleOpen();\n      onClick?.(event);\n    };\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type={type}\n        tabIndex={surfaceCollapsed ? -1 : tabIndex}\n        aria-controls={context.contentId}\n        aria-expanded={context.open}\n        data-open={String(context.open)}\n        data-slot=\"sidebar-group-trigger\"\n        className={sidebarGroupTriggerClassNames({ className })}\n        onClick={handleClick}\n      >\n        <span className=\"min-w-0 truncate\">{children}</span>\n        <span aria-hidden=\"true\" className={sidebarGroupTriggerIconClasses}>\n          <ChevronRightIcon />\n        </span>\n      </button>\n    );\n  },\n);\n\nSidebarGroupTrigger.displayName = \"SidebarGroupTrigger\";\n\nexport const SidebarGroupContent = forwardRef<\n  HTMLDivElement,\n  SidebarGroupContentProps\n>(({ children, className, hidden, id, onTransitionEnd, ...props }, ref) => {\n  const context = useContext(SidebarGroupContext);\n  const sidebarContext = useContext(SidebarContext);\n  const motion = sidebarContext?.motion ?? \"standard\";\n  const isOpen = context?.collapsible ? context.open : true;\n  const [present, setPresent] = useState(isOpen);\n\n  const [previousOpen, setPreviousOpen] = useState(isOpen);\n  if (previousOpen !== isOpen) {\n    setPreviousOpen(isOpen);\n    if (isOpen || !canAnimateExit(motion)) setPresent(isOpen);\n  }\n  useEffect(() => {\n    if (isOpen || !canAnimateExit(motion)) return undefined;\n\n    const fallback = window.setTimeout(() => setPresent(false), exitFallbackMs);\n\n    return () => window.clearTimeout(fallback);\n  }, [isOpen, motion]);\n\n  const handleTransitionEnd: TransitionEventHandler<HTMLDivElement> = (\n    event,\n  ) => {\n    if (\n      event.target === event.currentTarget &&\n      event.propertyName === \"grid-template-rows\" &&\n      !isOpen\n    ) {\n      setPresent(false);\n    }\n\n    onTransitionEnd?.(event);\n  };\n\n  const isHidden =\n    hidden ??\n    (context?.collapsible\n      ? !isOpen && (!present || !canAnimateExit(motion))\n      : undefined);\n\n  return (\n    <div\n      {...props}\n      ref={ref}\n      id={id ?? context?.contentId}\n      hidden={isHidden}\n      data-open={context?.collapsible ? String(context.open) : undefined}\n      data-slot=\"sidebar-group-content\"\n      className={sidebarGroupContentClassNames({ className })}\n      onTransitionEnd={handleTransitionEnd}\n    >\n      <div\n        data-slot=\"sidebar-group-content-inner\"\n        className={sidebarGroupContentInnerClasses}\n      >\n        {children}\n      </div>\n    </div>\n  );\n});\n\nSidebarGroupContent.displayName = \"SidebarGroupContent\";\n\nexport const SidebarMobile = forwardRef<HTMLDivElement, SidebarMobileProps>(\n  (\n    {\n      children,\n      className,\n      closeButtonLabel = \"Close sidebar\",\n      onClick,\n      onKeyDown,\n      label = \"Sidebar navigation\",\n      overlayClassName,\n      side: sideProp,\n      showCloseButton = true,\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useSidebarContext(\"SidebarMobile\");\n    const surfaceContext = useContext(SidebarSurfaceContext);\n    const side = sideProp ?? surfaceContext?.side ?? context.side;\n    const overlayRef = useRef<HTMLDivElement | null>(null);\n    const panelRef = useRef<HTMLDivElement | null>(null);\n    const directionAnchorRef = useRef<HTMLSpanElement | null>(null);\n    const [inheritedDirection, setInheritedDirection] = useState(\"ltr\");\n    const portalElement = useSyncExternalStore(\n      subscribePortal,\n      getPortalSnapshot,\n      getServerPortalSnapshot,\n    );\n    const titleId = useId();\n    const wasOpenRef = useRef(context.mobileOpen);\n    const resolvedMotion = useResolvedSidebarMotion(context.motion);\n    const motionDisabled = resolvedMotion === \"none\";\n    const motionTransition = getSidebarMotionTransition(resolvedMotion);\n    const panelOffset =\n      side === \"left\" ? \"calc(var(--dt-space-3) * -1)\" : \"var(--dt-space-3)\";\n\n    useEffect(() => {\n      if (context.mobileOpen) {\n        if (directionAnchorRef.current) {\n          setInheritedDirection(\n            getComputedStyle(directionAnchorRef.current).direction,\n          );\n        }\n        panelRef.current?.focus();\n      }\n\n      if (wasOpenRef.current && !context.mobileOpen) {\n        context.mobileTriggerElement?.focus();\n      }\n\n      wasOpenRef.current = context.mobileOpen;\n    }, [context.mobileOpen, context.mobileTriggerElement, portalElement]);\n\n    useEffect(() => {\n      if (!context.mobileOpen || !portalElement || !overlayRef.current) {\n        return undefined;\n      }\n\n      const overlayElement = overlayRef.current;\n      // Overlays opened from inside the drawer (menus, dialogs) portal to\n      // containers on <body>; those must stay usable.\n      const ownedByDrawer = (element: Element) => {\n        const owner = getDethinkPortalOwner(element);\n        return owner !== null && overlayElement.contains(owner);\n      };\n      const bodyChildren = Array.from(document.body.children).filter(\n        (element) => element !== overlayElement && !ownedByDrawer(element),\n      );\n      const previousInertState = bodyChildren.map(\n        (element) => [element, element.hasAttribute(\"inert\")] as const,\n      );\n\n      for (const element of bodyChildren) {\n        element.setAttribute(\"inert\", \"\");\n      }\n\n      return () => {\n        for (const [element, hadInert] of previousInertState) {\n          if (hadInert) {\n            element.setAttribute(\"inert\", \"\");\n          } else {\n            element.removeAttribute(\"inert\");\n          }\n        }\n      };\n    }, [context.mobileOpen, portalElement]);\n\n    useEffect(() => {\n      if (!context.mobileOpen) {\n        return undefined;\n      }\n\n      const handleDocumentKeyDown = (event: globalThis.KeyboardEvent) => {\n        if (event.key === \"Escape\") {\n          context.setMobileOpen(false);\n        }\n      };\n\n      document.addEventListener(\"keydown\", handleDocumentKeyDown);\n\n      return () =>\n        document.removeEventListener(\"keydown\", handleDocumentKeyDown);\n    }, [context]);\n\n    const handleOverlayClick: MouseEventHandler<HTMLDivElement> = (event) => {\n      if (event.target === event.currentTarget) {\n        context.setMobileOpen(false);\n        onClick?.(event);\n      }\n    };\n    const handlePanelClick: MouseEventHandler<HTMLDivElement> = (event) => {\n      const target = event.target;\n\n      onClick?.(event);\n\n      if (\n        !event.defaultPrevented &&\n        target instanceof Element &&\n        target.closest('a[data-slot=\"sidebar-menu-link\"]')\n      ) {\n        context.setMobileOpen(false);\n      }\n    };\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n      if (event.key === \"Escape\") {\n        event.stopPropagation();\n        context.setMobileOpen(false);\n      }\n\n      if (event.key === \"Tab\" && !event.defaultPrevented) {\n        const panelElement = panelRef.current;\n\n        if (!panelElement) {\n          return;\n        }\n\n        const focusableElements = getFocusableElements(panelElement);\n\n        if (focusableElements.length === 0) {\n          event.preventDefault();\n          panelElement.focus();\n          return;\n        }\n\n        // Own the complete loop: Safari may skip links/buttons in native Tab order.\n        const index = focusableElements.indexOf(\n          document.activeElement as HTMLElement,\n        );\n        const nextIndex = event.shiftKey\n          ? index <= 0\n            ? focusableElements.length - 1\n            : index - 1\n          : (index + 1) % focusableElements.length;\n        event.preventDefault();\n        focusableElements[nextIndex].focus();\n      }\n\n      onKeyDown?.(event);\n    };\n\n    const overlay = (\n      <AnimatePresence initial={false}>\n        {context.mobileOpen ? (\n          <motionElement.div\n            key=\"sidebar-mobile-overlay\"\n            ref={overlayRef}\n            animate={{ opacity: 1 }}\n            initial={motionDisabled ? false : { opacity: 0 }}\n            exit={\n              motionDisabled\n                ? { opacity: 1 }\n                : { opacity: 0, pointerEvents: \"none\" }\n            }\n            data-slot=\"sidebar-mobile-overlay\"\n            data-motion={resolvedMotion}\n            data-state=\"open\"\n            className={sidebarMobileOverlayClassNames({\n              className: overlayClassName,\n            })}\n            transition={motionTransition}\n            onClick={handleOverlayClick}\n          >\n            <motionElement.div\n              {...(props as HTMLMotionProps<\"div\">)}\n              ref={composeRefs(ref, panelRef)}\n              dir={props.dir ?? inheritedDirection}\n              role=\"dialog\"\n              tabIndex={-1}\n              animate={{ opacity: 1, scale: 1, x: 0 }}\n              initial={\n                motionDisabled\n                  ? false\n                  : { opacity: 0, scale: 0.985, x: panelOffset }\n              }\n              exit={\n                motionDisabled\n                  ? { opacity: 1, scale: 1, x: 0 }\n                  : { opacity: 0, scale: 0.985, x: panelOffset }\n              }\n              aria-labelledby={titleId}\n              aria-modal=\"true\"\n              data-motion={resolvedMotion}\n              data-side={side}\n              data-slot=\"sidebar-mobile\"\n              data-state=\"open\"\n              className={sidebarMobileClassNames({ className })}\n              transition={motionTransition}\n              onClick={handlePanelClick}\n              onKeyDown={handleKeyDown}\n            >\n              <h2 id={titleId} className=\"sr-only\">\n                {label}\n              </h2>\n              {showCloseButton ? (\n                <button\n                  type=\"button\"\n                  aria-label={closeButtonLabel}\n                  data-slot=\"sidebar-mobile-close\"\n                  className={cn(\n                    sidebarTriggerClasses,\n                    sidebarMobileCloseClasses,\n                  )}\n                  onClick={() => context.setMobileOpen(false)}\n                >\n                  <CloseIcon />\n                </button>\n              ) : null}\n              <SidebarSurfaceContext.Provider\n                value={{ collapsed: false, side, variant: \"default\" }}\n              >\n                {children}\n              </SidebarSurfaceContext.Provider>\n            </motionElement.div>\n          </motionElement.div>\n        ) : null}\n      </AnimatePresence>\n    );\n\n    return (\n      <>\n        <span hidden ref={directionAnchorRef} />\n        {portalElement ? createPortal(overlay, portalElement) : overlay}\n      </>\n    );\n  },\n);\n\nSidebarMobile.displayName = \"SidebarMobile\";\n\nexport const SidebarMobileTrigger = forwardRef<\n  HTMLButtonElement,\n  SidebarMobileTriggerProps\n>(\n  (\n    {\n      children,\n      className,\n      closeLabel = \"Close sidebar\",\n      onClick,\n      openLabel = \"Open sidebar\",\n      side: sideProp,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useSidebarContext(\"SidebarMobileTrigger\");\n    const surfaceContext = useContext(SidebarSurfaceContext);\n    const side = sideProp ?? surfaceContext?.side ?? context.side;\n    const label = context.mobileOpen ? closeLabel : openLabel;\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      context.setMobileTriggerElement(event.currentTarget);\n      context.toggleMobileOpen();\n      onClick?.(event);\n    };\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type={type}\n        aria-expanded={context.mobileOpen}\n        aria-label={props[\"aria-label\"] ?? label}\n        data-mobile-open={context.mobileOpen ? \"true\" : \"false\"}\n        data-side={side}\n        data-slot=\"sidebar-mobile-trigger\"\n        className={sidebarMobileTriggerClassNames({ className })}\n        onClick={handleClick}\n      >\n        {children ?? renderTriggerIcon(!context.mobileOpen, side)}\n      </button>\n    );\n  },\n);\n\nSidebarMobileTrigger.displayName = \"SidebarMobileTrigger\";\n\nexport const SidebarMenu = forwardRef<HTMLUListElement, SidebarMenuProps>(\n  ({ className, ...props }, ref) => (\n    <ul\n      {...props}\n      ref={ref}\n      data-slot=\"sidebar-menu\"\n      className={sidebarMenuClassNames({ className })}\n    />\n  ),\n);\n\nSidebarMenu.displayName = \"SidebarMenu\";\n\nexport const SidebarMenuItem = forwardRef<HTMLLIElement, SidebarMenuItemProps>(\n  ({ className, ...props }, ref) => (\n    <li\n      {...props}\n      ref={ref}\n      data-slot=\"sidebar-menu-item\"\n      className={sidebarMenuItemClassNames({ className })}\n    />\n  ),\n);\n\nSidebarMenuItem.displayName = \"SidebarMenuItem\";\n\nexport const SidebarMenuLink = forwardRef<\n  HTMLAnchorElement,\n  SidebarMenuLinkProps\n>(\n  (\n    {\n      active = false,\n      asChild = false,\n      badge,\n      children,\n      className,\n      current = false,\n      description,\n      disabled = false,\n      external = false,\n      href,\n      icon,\n      onClick,\n      rel,\n      shortcut,\n      style,\n      target,\n      tooltip,\n      \"aria-current\": ariaCurrent,\n      ...props\n    },\n    ref,\n  ) => {\n    const tooltipAnchorName = useTooltipAnchorName();\n    const resolvedTarget = target ?? (external ? \"_blank\" : undefined);\n    const resolvedRel = mergeRelForTarget(rel, resolvedTarget);\n    const resolvedAriaCurrent = ariaCurrent ?? (current ? \"page\" : undefined);\n    const isCurrent = current || hasCurrentState(resolvedAriaCurrent);\n    const classes = sidebarMenuLinkClassNames({ className });\n    const handleClick: MouseEventHandler<HTMLElement> = (event) => {\n      if (disabled) {\n        event.preventDefault();\n        return;\n      }\n\n      onClick?.(event as MouseEvent<HTMLAnchorElement>);\n    };\n\n    if (asChild) {\n      const child = Children.only(children);\n\n      if (!isValidElement<SidebarMenuLinkSlotProps>(child)) {\n        throw new Error(\n          \"SidebarMenuLink with asChild expects a single React element child.\",\n        );\n      }\n\n      const childTarget = child.props.target ?? resolvedTarget;\n      const childRel = mergeRelForTarget(\n        child.props.rel ?? resolvedRel,\n        childTarget,\n      );\n      const childAriaCurrent =\n        child.props[\"aria-current\"] ?? resolvedAriaCurrent;\n      const childIsCurrent = current || hasCurrentState(childAriaCurrent);\n      const childTooltip = resolveMenuTooltip(tooltip, child.props.children);\n      const childStyle =\n        style || child.props.style\n          ? { ...style, ...(child.props.style as CSSProperties | undefined) }\n          : undefined;\n      const clonedProps: SidebarMenuLinkSlotProps = {\n        ...props,\n        ...child.props,\n        ref: (node) => {\n          composeRefs(ref as Ref<HTMLElement>, getChildRef(child))(node);\n        },\n        style: tooltipAnchorStyle(tooltipAnchorName, childTooltip, childStyle),\n        \"aria-current\": childAriaCurrent,\n        \"aria-disabled\": disabled ? true : child.props[\"aria-disabled\"],\n        \"data-active\": active ? \"true\" : undefined,\n        \"data-current\": childIsCurrent ? \"true\" : undefined,\n        \"data-disabled\": disabled ? \"true\" : undefined,\n        \"data-external\": external ? \"true\" : undefined,\n        \"data-sidebar-tooltip\": childTooltip,\n        \"data-slot\": \"sidebar-menu-link\",\n        className: cn(classes, child.props.className),\n        onClick: composeClickHandlers(handleClick, child.props.onClick),\n      };\n\n      if (child.props.href ?? href) {\n        clonedProps.href = child.props.href ?? href;\n      }\n\n      if (childTarget !== undefined) {\n        clonedProps.target = childTarget;\n      }\n\n      if (childRel !== undefined) {\n        clonedProps.rel = childRel;\n      }\n\n      return cloneElement(\n        child,\n        // eslint-disable-next-line react-hooks/refs -- React forwards this ref during commit; createElement/cloneElement does not read ref.current.\n        clonedProps,\n        renderMenuContent({\n          badge,\n          children: child.props.children,\n          current: childIsCurrent,\n          description,\n          icon,\n          shortcut,\n        }),\n      );\n    }\n\n    const resolvedTooltip = resolveMenuTooltip(tooltip, children);\n\n    return (\n      <a\n        {...props}\n        ref={ref as ForwardedRef<HTMLAnchorElement>}\n        href={href}\n        rel={resolvedRel}\n        style={tooltipAnchorStyle(tooltipAnchorName, resolvedTooltip, style)}\n        target={resolvedTarget}\n        aria-current={resolvedAriaCurrent}\n        aria-disabled={disabled ? true : undefined}\n        data-active={active ? \"true\" : undefined}\n        data-current={isCurrent ? \"true\" : undefined}\n        data-disabled={disabled ? \"true\" : undefined}\n        data-external={external ? \"true\" : undefined}\n        data-sidebar-tooltip={resolvedTooltip}\n        data-slot=\"sidebar-menu-link\"\n        className={classes}\n        onClick={handleClick as MouseEventHandler<HTMLAnchorElement>}\n      >\n        {renderMenuContent({\n          badge,\n          children,\n          current: isCurrent,\n          description,\n          icon,\n          shortcut,\n        })}\n      </a>\n    );\n  },\n);\n\nSidebarMenuLink.displayName = \"SidebarMenuLink\";\n\nexport const SidebarMenuButton = forwardRef<\n  HTMLButtonElement,\n  SidebarMenuButtonProps\n>(\n  (\n    {\n      active = false,\n      badge,\n      children,\n      className,\n      description,\n      disabled = false,\n      icon,\n      shortcut,\n      style,\n      tooltip,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const tooltipAnchorName = useTooltipAnchorName();\n    const resolvedTooltip = resolveMenuTooltip(tooltip, children);\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type={type}\n        disabled={disabled}\n        style={tooltipAnchorStyle(tooltipAnchorName, resolvedTooltip, style)}\n        data-active={active ? \"true\" : undefined}\n        data-disabled={disabled ? \"true\" : undefined}\n        data-sidebar-tooltip={resolvedTooltip}\n        data-slot=\"sidebar-menu-button\"\n        className={sidebarMenuButtonClassNames({ className })}\n      >\n        {renderMenuContent({ badge, children, description, icon, shortcut })}\n      </button>\n    );\n  },\n);\n\nSidebarMenuButton.displayName = \"SidebarMenuButton\";\n\nexport const SidebarMenuBadge = forwardRef<\n  HTMLSpanElement,\n  SidebarMenuBadgeProps\n>(({ className, ...props }, ref) => (\n  <span\n    {...props}\n    ref={ref}\n    data-slot=\"sidebar-menu-badge\"\n    className={sidebarMenuBadgeClassNames({ className })}\n  />\n));\n\nSidebarMenuBadge.displayName = \"SidebarMenuBadge\";\n\nexport const SidebarMenuAction = forwardRef<\n  HTMLButtonElement,\n  SidebarMenuActionProps\n>(\n  (\n    {\n      children,\n      className,\n      label,\n      showOnHover = false,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      {...props}\n      ref={ref}\n      type={type}\n      aria-label={props[\"aria-label\"] ?? label}\n      data-show-on-hover={showOnHover ? \"true\" : undefined}\n      data-slot=\"sidebar-menu-action\"\n      className={sidebarMenuActionClassNames({ className, showOnHover })}\n    >\n      {children}\n    </button>\n  ),\n);\n\nSidebarMenuAction.displayName = \"SidebarMenuAction\";\n\nexport const SidebarSeparator = forwardRef<\n  HTMLDivElement,\n  SidebarSeparatorProps\n>(({ className, ...props }, ref) => (\n  <div\n    {...props}\n    ref={ref}\n    aria-hidden=\"true\"\n    data-slot=\"sidebar-separator\"\n    className={sidebarSeparatorClassNames({ className })}\n  />\n));\n\nSidebarSeparator.displayName = \"SidebarSeparator\";\n\nexport const SidebarTrigger = forwardRef<\n  HTMLButtonElement,\n  SidebarTriggerProps\n>(\n  (\n    {\n      action = \"toggle\",\n      children,\n      className,\n      collapseLabel = \"Collapse sidebar\",\n      expandLabel = \"Expand sidebar\",\n      onClick,\n      side: sideProp,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useSidebarContext(\"SidebarTrigger\");\n    const surfaceContext = useContext(SidebarSurfaceContext);\n    const collapsed = surfaceContext?.collapsed ?? context.collapsed;\n    const side = sideProp ?? surfaceContext?.side ?? context.side;\n    const nextCollapsed =\n      action === \"expand\" ? false : action === \"collapse\" ? true : !collapsed;\n    const label = nextCollapsed ? collapseLabel : expandLabel;\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      if (props.disabled) {\n        return;\n      }\n\n      if (action === \"expand\") {\n        context.setCollapsed(false);\n      } else if (action === \"collapse\") {\n        context.setCollapsed(true);\n      } else {\n        context.toggleCollapsed();\n      }\n\n      onClick?.(event);\n    };\n\n    return (\n      <button\n        {...props}\n        ref={ref}\n        type={type}\n        aria-expanded={!collapsed}\n        aria-label={props[\"aria-label\"] ?? label}\n        title={props.title ?? props[\"aria-label\"] ?? label}\n        data-collapsed={collapsed ? \"true\" : \"false\"}\n        data-side={side}\n        data-slot=\"sidebar-trigger\"\n        className={sidebarTriggerClassNames({ className })}\n        onClick={handleClick}\n      >\n        {children ?? renderTriggerIcon(collapsed, side)}\n      </button>\n    );\n  },\n);\n\nSidebarTrigger.displayName = \"SidebarTrigger\";\n\nexport const SidebarRail = forwardRef<HTMLButtonElement, SidebarRailProps>(\n  (\n    {\n      children,\n      className,\n      collapseLabel = \"Collapse sidebar\",\n      expandLabel = \"Expand sidebar\",\n      onClick,\n      side: sideProp,\n      type = \"button\",\n      ...props\n    },\n    ref,\n  ) => {\n    const context = useSidebarContext(\"SidebarRail\");\n    const surfaceContext = useContext(SidebarSurfaceContext);\n    const collapsed = surfaceContext?.collapsed ?? context.collapsed;\n    const side = sideProp ?? surfaceContext?.side ?? context.side;\n    const label = collapsed ? expandLabel : collapseLabel;\n    const resolvedMotion = useResolvedSidebarMotion(context.motion);\n    const motionDisabled = resolvedMotion === \"none\";\n    const motionTransition = getSidebarMotionTransition(resolvedMotion);\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n      if (props.disabled) {\n        return;\n      }\n\n      context.toggleCollapsed();\n      onClick?.(event);\n    };\n\n    return (\n      <motionElement.button\n        {...(props as HTMLMotionProps<\"button\">)}\n        ref={ref}\n        type={type}\n        animate=\"rest\"\n        aria-expanded={!collapsed}\n        aria-label={props[\"aria-label\"] ?? label}\n        data-collapsed={collapsed ? \"true\" : \"false\"}\n        data-motion={resolvedMotion}\n        data-motion-behavior=\"transform\"\n        data-reduced-motion={motionDisabled ? \"true\" : \"false\"}\n        data-side={side}\n        data-slot=\"sidebar-rail\"\n        initial={false}\n        className={sidebarRailClassNames({ className })}\n        onClick={handleClick}\n        whileHover={motionDisabled || props.disabled ? undefined : \"hover\"}\n        whileTap={motionDisabled || props.disabled ? undefined : \"tap\"}\n      >\n        <motionElement.span\n          aria-hidden=\"true\"\n          data-slot=\"sidebar-rail-handle\"\n          className={sidebarRailHandleClasses}\n          transition={motionTransition}\n          variants={sidebarRailHandleVariants}\n        >\n          {children ?? (\n            <motionElement.span\n              data-direction={getTriggerDirection(collapsed, side)}\n              data-slot=\"sidebar-rail-chevron\"\n              initial={false}\n              animate={{ rotate: collapsed ? 180 : 0 }}\n              transition={motionTransition}\n            >\n              {side === \"right\" ? <ChevronRightIcon /> : <ChevronLeftIcon />}\n            </motionElement.span>\n          )}\n        </motionElement.span>\n      </motionElement.button>\n    );\n  },\n);\n\nSidebarRail.displayName = \"SidebarRail\";\n\nexport const SidebarInset = forwardRef<HTMLElement, SidebarInsetProps>(\n  ({ as = \"main\", className, ...props }, ref) => {\n    if (as === \"div\") {\n      return (\n        <div\n          {...props}\n          ref={ref as ForwardedRef<HTMLDivElement>}\n          data-slot=\"sidebar-inset\"\n          className={sidebarInsetClassNames({ className })}\n        />\n      );\n    }\n\n    if (as === \"section\") {\n      return (\n        <section\n          {...props}\n          ref={ref as ForwardedRef<HTMLElement>}\n          data-slot=\"sidebar-inset\"\n          className={sidebarInsetClassNames({ className })}\n        />\n      );\n    }\n\n    return (\n      <main\n        {...props}\n        ref={ref as ForwardedRef<HTMLElement>}\n        data-slot=\"sidebar-inset\"\n        className={sidebarInsetClassNames({ className })}\n      />\n    );\n  },\n);\n\nSidebarInset.displayName = \"SidebarInset\";\n\nexport const SidebarSkipLink = forwardRef<\n  HTMLAnchorElement,\n  SidebarSkipLinkProps\n>(\n  (\n    {\n      children = \"Skip to content\",\n      className,\n      href,\n      targetId = \"content\",\n      ...props\n    },\n    ref,\n  ) => (\n    <a\n      {...props}\n      ref={ref}\n      href={href ?? `#${targetId}`}\n      data-slot=\"sidebar-skip-link\"\n      className={sidebarSkipLinkClassNames({ className })}\n    >\n      {children}\n    </a>\n  ),\n);\n\nSidebarSkipLink.displayName = \"SidebarSkipLink\";\n"
    },
    {
      "path": "packages/components/src/components/sidebar/index.ts",
      "type": "registry:file",
      "target": "~/components/dethink/components/sidebar/index.ts",
      "content": "export {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarGroupTrigger,\n  SidebarHeader,\n  SidebarInset,\n  SidebarMobile,\n  SidebarMobileTrigger,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuLink,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarSkipLink,\n  SidebarTrigger,\n  sidebarClassNames,\n  sidebarContentClassNames,\n  sidebarFooterClassNames,\n  sidebarGroupClassNames,\n  sidebarGroupContentClassNames,\n  sidebarGroupLabelClassNames,\n  sidebarGroupTriggerClassNames,\n  sidebarHeaderClassNames,\n  sidebarInsetClassNames,\n  sidebarMobileClassNames,\n  sidebarMobileOverlayClassNames,\n  sidebarMobileTriggerClassNames,\n  sidebarMenuActionClassNames,\n  sidebarMenuBadgeClassNames,\n  sidebarMenuButtonClassNames,\n  sidebarMenuItemClassNames,\n  sidebarMenuLinkClassNames,\n  sidebarMenuClassNames,\n  sidebarProviderClassNames,\n  sidebarRailClassNames,\n  sidebarSeparatorClassNames,\n  sidebarSkipLinkClassNames,\n  sidebarTriggerClassNames,\n  useSidebarState,\n  type SidebarState,\n  type SidebarContentProps,\n  type SidebarFooterProps,\n  type SidebarGroupContentProps,\n  type SidebarGroupLabelProps,\n  type SidebarGroupProps,\n  type SidebarGroupTriggerProps,\n  type SidebarHeaderProps,\n  type SidebarInsetProps,\n  type SidebarMobileProps,\n  type SidebarMobileTriggerProps,\n  type SidebarMenuActionProps,\n  type SidebarMenuBadgeProps,\n  type SidebarMenuButtonProps,\n  type SidebarMenuItemProps,\n  type SidebarMenuLinkProps,\n  type SidebarMenuProps,\n  type SidebarMotion,\n  type SidebarProps,\n  type SidebarProviderProps,\n  type SidebarRailProps,\n  type SidebarSeparatorProps,\n  type SidebarSide,\n  type SidebarSkipLinkProps,\n  type SidebarTriggerAction,\n  type SidebarTriggerProps,\n  type SidebarVariant,\n} from \"./sidebar\";\n"
    },
    {
      "path": "packages/components/src/utils/cn.ts",
      "type": "registry:file",
      "target": "~/components/dethink/utils/cn.ts",
      "content": "import { clsx, type ClassValue } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n"
    },
    {
      "path": "packages/components/src/utils/portal-owner.ts",
      "type": "registry:file",
      "target": "~/components/dethink/utils/portal-owner.ts",
      "content": "/**\n * Links a Dethink portal container on <body> to the component root that owns\n * it, so a modal surface (the mobile sidebar) can keep overlays opened from\n * inside it usable while it makes the rest of the page inert. A global symbol\n * key, so components copied from the registry agree without sharing imports.\n */\nconst PORTAL_OWNER: unique symbol = Symbol.for(\"dethink.portal-owner\");\n\ntype OwnedElement = Element & { [PORTAL_OWNER]?: Element };\n\nexport function setDethinkPortalOwner(container: Element, owner: Element) {\n  (container as OwnedElement)[PORTAL_OWNER] = owner;\n}\n\n/** The element owning a Dethink portal container, or null for any other element. */\nexport function getDethinkPortalOwner(element: Element): Element | null {\n  return (element as OwnedElement)[PORTAL_OWNER] ?? null;\n}\n"
    }
  ]
}