{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "extends": "none",
  "name": "sidebar",
  "title": "sidebar",
  "description": "sidebar",
  "dependencies": [
    "@heroicons/react",
    "react-aria-components",
    "cn"
  ],
  "registryDependencies": [
    "https://intentui.com/r/dialog",
    "https://intentui.com/r/sheet",
    "https://intentui.com/r/tree",
    "https://intentui.com/r/use-mobile",
    "https://intentui.com/r/primitive",
    "https://intentui.com/r/button",
    "https://intentui.com/r/link",
    "https://intentui.com/r/tooltip"
  ],
  "files": [
    {
      "path": "src/components/ui/sidebar.tsx",
      "content": "\"use client\"\n\nimport { DialogCloseIcon } from \"./dialog\"\n\nimport { ChevronDownIcon } from \"@heroicons/react/20/solid\"\nimport { createContext, use, useCallback, useEffect, useMemo, useRef, useState } from \"react\"\nimport { type ButtonProps, Button as PrimitiveButton } from \"react-aria-components/Button\"\nimport { composeRenderProps } from \"react-aria-components/composeRenderProps\"\nimport {\n  type DisclosurePanelProps,\n  type DisclosureProps,\n  Disclosure,\n  DisclosurePanel,\n} from \"react-aria-components/Disclosure\"\nimport { DisclosureGroup, type DisclosureGroupProps } from \"react-aria-components/DisclosureGroup\"\nimport { Header } from \"react-aria-components/Header\"\nimport { Heading } from \"react-aria-components/Heading\"\nimport { type LinkProps, type LinkRenderProps } from \"react-aria-components/Link\"\nimport {\n  type NavigationTreeItemContentProps,\n  type NavigationTreeItemProps,\n  type NavigationTreeProps,\n  NavigationTree,\n  NavigationTreeItem,\n  NavigationTreeItemContent,\n} from \"react-aria-components/NavigationTree\"\nimport { Separator, type SeparatorProps } from \"react-aria-components/Separator\"\nimport { cn } from \"cn\"\nimport { Sheet } from \"@/components/ui/sheet\"\nimport { TreeIndicator } from \"@/components/ui/tree\"\nimport { useIsMobile } from \"@/hooks/use-mobile\"\nimport { cx } from \"@/lib/primitive\"\nimport { Button } from \"./button\"\nimport { Link } from \"./link\"\nimport { TooltipTrigger, Tooltip } from \"./tooltip\"\n\nconst SIDEBAR_WIDTH = \"17rem\"\nconst SIDEBAR_WIDTH_DOCK = \"3.25rem\"\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\n\nexport type SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  isOpenOnMobile: boolean\n  setIsOpenOnMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null)\n\nexport function useSidebar() {\n  const context = use(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nexport interface SidebarProviderProps extends React.ComponentProps<\"div\"> {\n  defaultOpen?: boolean\n  isOpen?: boolean\n  shortcut?: string\n  onOpenChange?: (open: boolean) => void\n}\n\nexport function SidebarProvider({\n  defaultOpen = true,\n  isOpen: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  shortcut = \"b\",\n  ref,\n  ...props\n}: SidebarProviderProps) {\n  const [openMobile, setOpenMobile] = useState(false)\n\n  const [internalOpenState, setInternalOpenState] = useState(defaultOpen)\n  const open = openProp ?? internalOpenState\n  const setOpen = useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        setInternalOpenState(openState)\n      }\n\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  const isMobile = useIsMobile()\n  const isMobileRef = useRef(isMobile)\n  isMobileRef.current = isMobile\n\n  const toggleSidebar = useCallback(() => {\n    if (isMobileRef.current) {\n      setOpenMobile((prev) => !prev)\n    } else {\n      setOpen((prev) => !prev)\n    }\n  }, [setOpen])\n\n  useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === shortcut && (event.metaKey || event.ctrlKey)) {\n        const activeElement = document.activeElement\n\n        const isInTextInput =\n          activeElement instanceof HTMLInputElement ||\n          activeElement instanceof HTMLTextAreaElement ||\n          activeElement?.getAttribute(\"contenteditable\") === \"true\" ||\n          activeElement?.getAttribute(\"role\") === \"textbox\"\n\n        if (!isInTextInput) {\n          event.preventDefault()\n          toggleSidebar()\n        }\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar, shortcut])\n\n  const state = isMobile || open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile: isMobile ?? false,\n      isOpenOnMobile: openMobile,\n      setIsOpenOnMobile: setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n  )\n\n  if (isMobile === undefined) {\n    return null\n  }\n\n  return (\n    <SidebarContext value={contextValue}>\n      <div\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-dock\": SIDEBAR_WIDTH_DOCK,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"@container **:[svg]:shrink-0\",\n          \"flex w-full text-sidebar-foreground\",\n          \"group/sidebar-root peer/sidebar-root has-data-[intent=inset]:bg-sidebar dark:has-data-[intent=inset]:bg-background\",\n          className\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext>\n  )\n}\n\nexport interface SidebarProps extends React.ComponentProps<\"div\"> {\n  intent?: \"default\" | \"float\" | \"inset\"\n  collapsible?: \"hidden\" | \"dock\" | \"none\"\n  side?: \"left\" | \"right\"\n  closeButton?: boolean\n}\n\nexport function Sidebar({\n  children,\n  closeButton = true,\n  collapsible = \"hidden\",\n  side = \"left\",\n  intent = \"default\",\n  className,\n  ...props\n}: SidebarProps) {\n  const { isMobile, state, isOpenOnMobile, setIsOpenOnMobile } = useSidebar()\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-intent={intent}\n        data-collapsible=\"none\"\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <>\n        <span className=\"sr-only\" aria-hidden data-intent={intent} />\n        <Sheet\n          isFloat\n          isOpen={isOpenOnMobile}\n          onOpenChange={setIsOpenOnMobile}\n\n          aria-label=\"Sidebar\"\n          data-slot=\"sidebar\"\n          data-intent=\"default\"\n          className=\"entering:blur-in exiting:blur-out w-(--sidebar-width) [--sidebar-width:18rem] has-data-[slot=calendar]:[--sidebar-width:23rem]\"\n          position={side}\n        >\n          <Heading slot=\"title\" className=\"sr-only\">\n            Sidebar\n          </Heading>\n          {children}\n          {closeButton && <DialogCloseIcon isDismissable />}\n        </Sheet>\n      </>\n    )\n  }\n\n  return (\n    <div\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-intent={intent}\n      data-side={side}\n      data-slot=\"sidebar\"\n      className=\"group peer text-sidebar-foreground hidden md:block\"\n      {...props}\n    >\n      <div\n        data-slot=\"sidebar-gap\"\n        aria-hidden=\"true\"\n        className={cn([\n          \"w-(--sidebar-width) group-data-[collapsible=hidden]:w-0\",\n          \"group-data-[side=right]:-rotate-180\",\n          \"relative h-svh bg-transparent transition-[width] duration-200 ease-linear\",\n          intent === \"default\" && \"group-data-[collapsible=dock]:w-(--sidebar-width-dock)\",\n          intent === \"float\" &&\n            \"group-data-[collapsible=dock]:w-[calc(var(--sidebar-width-dock)+(--spacing(4)))]\",\n          intent === \"inset\" &&\n            \"group-data-[collapsible=dock]:w-[calc(var(--sidebar-width-dock)+(--spacing(2)))]\",\n        ])}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden w-(--sidebar-width) bg-sidebar not-has-data-[slot=sidebar-footer]:pb-2 md:flex\",\n          \"transition-[left,right,width] duration-200 ease-linear\",\n          side === \"left\" && \"left-0 group-data-[collapsible=hidden]:-left-(--sidebar-width)\",\n          side === \"right\" && \"right-0 group-data-[collapsible=hidden]:-right-(--sidebar-width)\",\n          intent === \"float\" &&\n            \"bg-background p-2 group-data-[collapsible=dock]:w-[calc(--spacing(4)+2px)]\",\n          intent === \"inset\" &&\n            \"group-data-[collapsible=dock]:w-[calc(var(--sidebar-width-dock)+(--spacing(2))+2px)] dark:bg-background\",\n          intent === \"default\" && [\n            \"group-data-[collapsible=dock]:w-(--sidebar-width-dock)\",\n            \"border-sidebar-border group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          ],\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"default\"\n          data-slot=\"sidebar-inner\"\n          className=\"text-sidebar-foreground group-data-[intent=float]:border-sidebar-border group-data-[intent=float]:bg-sidebar flex size-full flex-col group-data-[intent=float]:rounded-lg group-data-[intent=float]:border group-data-[intent=float]:shadow-xs\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport function SidebarHeader({ className, ref, ...props }: React.ComponentProps<\"div\">) {\n  const { state } = useSidebar()\n  return (\n    <div\n      ref={ref}\n      data-slot=\"sidebar-header\"\n      className={cn(\n        \"flex flex-col gap-2 p-2.5 [.border-b]:border-sidebar-border\",\n        \"in-data-[intent=inset]:p-4\",\n        state === \"collapsed\" ? \"items-center p-2.5\" : \"p-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      className={cn([\n        \"mt-auto flex shrink-0 items-center justify-center p-4 **:data-[slot=chevron]:text-muted-foreground\",\n        \"in-data-[intent=inset]:px-6 in-data-[intent=inset]:py-4\",\n        className,\n      ])}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  const { state } = useSidebar()\n  const [isAtBottom, setIsAtBottom] = useState(false)\n  const ref = useRef<HTMLDivElement>(null)\n\n  useEffect(() => {\n    const el = ref.current\n    if (!el) return\n\n    const check = () => {\n      const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 1\n      setIsAtBottom(atBottom)\n    }\n\n    check()\n    el.addEventListener(\"scroll\", check, { passive: true })\n\n    const observer = new ResizeObserver(check)\n    observer.observe(el)\n\n    return () => {\n      el.removeEventListener(\"scroll\", check)\n      observer.disconnect()\n    }\n  }, [])\n\n  return (\n    <div\n      ref={ref}\n      data-slot=\"sidebar-content\"\n      className={cn(\n        \"flex min-h-0 flex-1 scroll-mb-96 flex-col overflow-auto *:data-[slot=sidebar-section]:border-l-0\",\n        state === \"collapsed\" ? \"items-center\" : !isAtBottom && \"mask-b-from-95%\",\n        className\n      )}\n      {...props}\n    >\n      {props.children}\n    </div>\n  )\n}\n\nexport function SidebarSectionGroup({ className, ...props }: React.ComponentProps<\"section\">) {\n  const { state, isMobile } = useSidebar()\n  const collapsed = state === \"collapsed\" && !isMobile\n  return (\n    <section\n      data-slot=\"sidebar-section-group\"\n      className={cn(\n        \"flex w-full min-w-0 flex-col gap-y-0.5\",\n        collapsed && \"items-center justify-center\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarSectionProps extends React.ComponentProps<\"div\"> {\n  label?: string\n}\n\nexport function SidebarSection({ className, ...props }: SidebarSectionProps) {\n  const { state } = useSidebar()\n  return (\n    <div\n      data-slot=\"sidebar-section\"\n      className={cn(\n        \"col-span-full flex min-w-0 flex-col gap-y-0.5 **:data-[slot=sidebar-section]:**:gap-y-0\",\n        \"in-data-[state=collapsed]:p-2 p-4\",\n        className\n      )}\n      {...props}\n    >\n      {state !== \"collapsed\" && \"label\" in props && (\n        <Header className=\"text-sidebar-foreground/70 ring-sidebar-ring mb-1 flex shrink-0 items-center rounded-md px-2 text-xs/6 transition-[margin,opa] duration-200 ease-linear outline-none group-data-[collapsible=dock]:-mt-8 group-data-[collapsible=dock]:opacity-0 *:[svg]:size-4 *:[svg]:shrink-0\">\n          {props.label}\n        </Header>\n      )}\n      <div\n        data-slot=\"sidebar-section-inner\"\n        className=\"grid grid-cols-[auto_1fr] gap-y-0.5 in-data-[state=collapsed]:gap-y-1.5 *:data-[slot=control]:col-span-full\"\n      >\n        {props.children}\n      </div>\n    </div>\n  )\n}\n\nexport interface SidebarItemProps extends Omit<React.ComponentProps<typeof Link>, \"children\"> {\n  isCurrent?: boolean\n  children?:\n    | React.ReactNode\n    | ((\n        values: LinkRenderProps & { defaultChildren: React.ReactNode; isCollapsed: boolean }\n      ) => React.ReactNode)\n  tooltip?: string | React.ComponentProps<typeof Tooltip>\n}\n\nexport function SidebarItem({\n  isCurrent,\n  tooltip,\n  children,\n  className,\n  ref,\n  ...props\n}: SidebarItemProps) {\n  const { state, isMobile } = useSidebar()\n  const isCollapsed = state === \"collapsed\" && !isMobile\n  const link = (\n    <Link\n      ref={ref}\n      data-slot=\"sidebar-item\"\n      aria-current={isCurrent ? \"page\" : undefined}\n      className={composeRenderProps(\n        className,\n        (className, { isFocusVisible, isPressed, isHovered, isDisabled }) =>\n          cn(\n            \"w-full min-w-0 items-center rounded-lg p-2 text-start font-medium text-base/6 text-sidebar-foreground has-[a]:p-0\",\n            \"group/sidebar-item relative col-span-full overflow-hidden focus-visible:outline-hidden\",\n            \"grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] supports-[grid-template-columns:subgrid]:grid-cols-subgrid sm:text-sm/5 **:last:[svg]:ms-auto\",\n            // icon\n            \"[&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground **:[svg]:shrink-0\",\n            \"**:last:[svg]:size-5 sm:**:last:[svg]:size-4\",\n            \"[&:has(svg+[data-slot=sidebar-label])_svg:has(+[data-slot=sidebar-label])]:me-2\",\n\n            // avatar\n            \"**:data-[slot=avatar]:[--avatar-size:--spacing(5)]\",\n            \"[&:has([data-slot=avatar]+[data-slot=sidebar-label])_[data-slot=avatar]:has(+[data-slot=sidebar-label])]:me-2\",\n            \"[--sidebar-current-background:var(--color-sidebar-primary)] [--sidebar-current-foreground:var(--color-sidebar-primary-foreground)]\",\n            isCurrent &&\n              \"font-medium text-(--sidebar-current-foreground) hover:bg-(--sidebar-current-background) hover:text-(--sidebar-current-foreground) [&_.text-muted-foreground]:text-foreground/80 [&_svg:not([class*='text-'])]:text-(--sidebar-current-foreground) hover:[&_svg:not([class*='text-'])]:text-(--sidebar-current-foreground)\",\n            isFocusVisible && \"inset-ring inset-ring-sidebar-ring outline-hidden\",\n            isPressed &&\n              \"bg-sidebar-accent text-sidebar-accent-foreground [&_svg:not([class*='text-'])]:text-sidebar-accent-foreground\",\n            isHovered &&\n              \"bg-sidebar-accent text-sidebar-accent-foreground [&_svg:not([class*='text-'])]:text-sidebar-accent-foreground\",\n            isDisabled && \"opacity-50\",\n            className\n          )\n      )}\n      {...props}\n    >\n      {(values) => (\n        <>{typeof children === \"function\" ? children({ ...values, isCollapsed }) : children}</>\n      )}\n    </Link>\n  )\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <TooltipTrigger delay={0}>\n      {link}\n      <Tooltip\n        className=\"**:data-[slot=sidebar-label-mask]:hidden **:[svg]:hidden\"\n        inverse\n        placement=\"right\"\n        arrow\n        hidden={!isCollapsed || isMobile || !tooltip}\n        {...tooltip}\n      />\n    </TooltipTrigger>\n  )\n}\n\nexport function SidebarBadge({ className, ...props }: React.ComponentProps<\"span\">) {\n  const { state, isMobile } = useSidebar()\n\n  if (state === \"collapsed\" && !isMobile) {\n    return (\n      <span\n        aria-hidden\n        data-slot=\"sidebar-badge\"\n        className=\"bg-primary absolute end-1 top-1 size-1.5 rounded-full\"\n      />\n    )\n  }\n\n  return (\n    <span\n      data-slot=\"sidebar-badge\"\n      className={cn(\n        \"absolute inset-ring-1 inset-ring-sidebar-border inset-y-1/2 end-1.5 h-5.5 w-auto -translate-y-1/2 rounded-full bg-foreground/5 px-2 text-[10px]/5.5 group-hover/sidebar-item:inset-ring-muted-foreground/30 group-current:inset-ring-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarLinkProps extends LinkProps {\n  ref?: React.RefObject<HTMLAnchorElement>\n}\n\nexport function SidebarLink({ className, ref, ...props }: SidebarLinkProps) {\n  return (\n    <Link\n      ref={ref}\n      className={cx(\n        \"col-span-full min-w-0 shrink-0 items-center p-2 focus:outline-hidden\",\n        \"grid grid-cols-[auto_1fr_1.5rem_0.5rem_auto] supports-[grid-template-columns:subgrid]:grid-cols-subgrid\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarInset({ className, ref, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      ref={ref}\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background lg:min-w-0\",\n        \"md:group-has-data-[intent=inset]/sidebar-root:border group-has-data-[intent=inset]/sidebar-root:border-sidebar-border group-has-data-[intent=inset]/sidebar-root:bg-muted\",\n        \"md:group-has-data-[intent=inset]/sidebar-root:m-2\",\n        \"md:group-has-data-[side=left]:group-has-data-[intent=inset]/sidebar-root:ms-0\",\n        \"md:group-has-data-[side=right]:group-has-data-[intent=inset]/sidebar-root:me-0\",\n        \"md:group-has-data-[intent=inset]/sidebar-root:rounded-2xl\",\n        \"md:group-has-data-[intent=inset]/sidebar-root:peer-data-[state=collapsed]:ms-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport type SidebarDisclosureGroupProps = DisclosureGroupProps\nexport function SidebarDisclosureGroup({\n  allowsMultipleExpanded = true,\n  className,\n  ...props\n}: SidebarDisclosureGroupProps) {\n  return (\n    <DisclosureGroup\n      data-slot=\"sidebar-disclosure-group\"\n      allowsMultipleExpanded={allowsMultipleExpanded}\n      className={cx(\n        \"col-span-full flex min-w-0 flex-col gap-y-0.5 in-data-[state=collapsed]:gap-y-1.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarDisclosureProps extends DisclosureProps {\n  ref?: React.Ref<HTMLDivElement>\n}\n\nexport function SidebarDisclosure({ className, ref, ...props }: SidebarDisclosureProps) {\n  const { state } = useSidebar()\n  return (\n    <Disclosure\n      ref={ref}\n      data-slot=\"sidebar-disclosure\"\n      className={cx(\"col-span-full min-w-0\", state === \"collapsed\" ? \"px-2\" : \"px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarDisclosureTriggerProps extends ButtonProps {\n  ref?: React.Ref<HTMLButtonElement>\n}\n\nexport function SidebarDisclosureTrigger({\n  className,\n  ref,\n  ...props\n}: SidebarDisclosureTriggerProps) {\n  const { state } = useSidebar()\n  return (\n    <Heading level={3}>\n      <PrimitiveButton\n        ref={ref}\n        slot=\"trigger\"\n        className={composeRenderProps(\n          className,\n          (className, { isPressed, isFocusVisible, isHovered, isDisabled }) =>\n            cn(\n              \"flex w-full min-w-0 items-center rounded-lg text-start font-medium text-base/6 text-sidebar-foreground\",\n              \"group/sidebar-disclosure-trigger relative col-span-full overflow-hidden focus-visible:outline-hidden\",\n              \"**:[svg]:size-5 **:[svg]:shrink-0 **:[svg]:text-muted-foreground sm:**:[svg]:size-4\",\n              \"**:last:[svg]:size-5 sm:**:last:[svg]:size-4\",\n              \"**:data-[slot=avatar]:size-6 sm:**:data-[slot=avatar]:size-5\",\n              \"col-span-full gap-3 p-2 **:data-[slot=chevron]:text-muted-foreground sm:gap-2 sm:text-sm/5 **:last:[svg]:ms-auto\",\n\n              isFocusVisible && \"inset-ring inset-ring-ring/70\",\n              (isPressed || isHovered) &&\n                \"bg-sidebar-accent text-sidebar-accent-foreground **:data-[slot=chevron]:text-sidebar-accent-foreground **:[svg]:text-sidebar-accent-foreground **:last:[svg]:text-sidebar-accent-foreground\",\n              isDisabled && \"opacity-50\",\n              className\n            )\n        )}\n        {...props}\n      >\n        {(values) => (\n          <>\n            {typeof props.children === \"function\" ? props.children(values) : props.children}\n            {state !== \"collapsed\" && (\n              <ChevronDownIcon\n                data-slot=\"chevron\"\n                className=\"z-10 ms-auto size-3.5 transition-transform duration-200 group-aria-expanded/sidebar-disclosure-trigger:rotate-180\"\n              />\n            )}\n          </>\n        )}\n      </PrimitiveButton>\n    </Heading>\n  )\n}\n\nexport function SidebarDisclosurePanel({ className, ...props }: DisclosurePanelProps) {\n  return (\n    <DisclosurePanel\n      data-slot=\"sidebar-disclosure-panel\"\n      className={cx(\n        \"h-(--disclosure-panel-height) overflow-clip transition-[height] duration-200\",\n        className\n      )}\n      {...props}\n    >\n      <div\n        data-slot=\"sidebar-disclosure-panel-content\"\n        className=\"col-span-full grid grid-cols-[auto_1fr] gap-y-0.5 in-data-[state=collapsed]:gap-y-1.5\"\n      >\n        {props.children}\n      </div>\n    </DisclosurePanel>\n  )\n}\n\nexport function SidebarSeparator({ className, ...props }: SeparatorProps) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      orientation=\"horizontal\"\n      className={cn(\n        \"mx-auto h-px w-[calc(var(--sidebar-width)-(--spacing(10)))] border-0 bg-sidebar-border forced-colors:bg-[ButtonBorder]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarTrigger({\n  onPress,\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n  return (\n    <Button\n      aria-label={props[\"aria-label\"] || \"Toggle Sidebar\"}\n      data-slot=\"sidebar-trigger\"\n      intent={props.intent || \"plain\"}\n      size={props.size || \"sq-sm\"}\n      className={cx(\"shrink-0\", className)}\n      onPress={(event) => {\n        onPress?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      {children || (\n        <>\n          <svg\n            className=\"size-4\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            viewBox=\"0 0 16 16\"\n            width={16}\n            height={16}\n            fill=\"currentcolor\"\n          >\n            <path d=\"M13.25 2.5c.69 0 1.25.56 1.25 1.25v8.5c0 .69-.56 1.25-1.25 1.25H7.5V15h5.75A2.75 2.75 0 0 0 16 12.25v-8.5A2.75 2.75 0 0 0 13.25 1H7.5v1.5zM5.75 1a.75.75 0 0 1 .75.75v12.5a.75.75 0 0 1-.75.75h-3A2.75 2.75 0 0 1 0 12.25v-8.5A2.75 2.75 0 0 1 2.75 1z\" />\n          </svg>\n          <span className=\"sr-only\">Toggle Sidebar</span>\n        </>\n      )}\n    </Button>\n  )\n}\n\nexport function SidebarRail({ className, ref, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return !props.children ? (\n    <button\n      ref={ref}\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      title=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 outline-hidden transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-transparent group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=hidden]:translate-x-0 group-data-[collapsible=hidden]:hover:bg-sidebar-accent group-data-[collapsible=hidden]:after:left-full\",\n        \"[[data-side=left][data-collapsible=hidden]_&]:-right-2 [[data-side=right][data-collapsible=hidden]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  ) : (\n    props.children\n  )\n}\n\nexport function SidebarLabel({ className, ref, ...props }: React.ComponentProps<\"span\">) {\n  const { state, isMobile } = useSidebar()\n  const collapsed = state === \"collapsed\" && !isMobile\n  if (!collapsed) {\n    return (\n      <span\n        data-slot=\"sidebar-label\"\n        tabIndex={-1}\n        ref={ref}\n        className={cn(\"col-start-2 truncate pe-6 outline-hidden\", className)}\n        {...props}\n      />\n    )\n  }\n  return null\n}\n\nexport interface SidebarNavProps extends React.ComponentProps<\"nav\"> {\n  isSticky?: boolean\n}\n\nexport function SidebarNav({ isSticky = false, className, ...props }: SidebarNavProps) {\n  return (\n    <nav\n      data-slot=\"sidebar-nav\"\n      className={cn(\n        \"isolate flex items-center justify-between gap-x-2 px-(--container-padding,--spacing(4)) py-2.5 text-navbar-foreground sm:justify-start sm:px-(--gutter,--spacing(4)) md:w-full\",\n        isSticky && \"static top-0 z-40 group-has-data-[intent=default]/sidebar-root:sticky\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarMenuTriggerProps extends ButtonProps {\n  alwaysVisible?: boolean\n}\nexport function SidebarMenuTrigger({\n  alwaysVisible = false,\n  className,\n  ...props\n}: SidebarMenuTriggerProps) {\n  return (\n    <PrimitiveButton\n      className={cx(\n        !alwaysVisible &&\n          \"pressed:text-foreground text-muted-foreground pressed:opacity-100 hover:text-foreground opacity-0\",\n        \"absolute end-0 flex h-full w-[calc(var(--sidebar-width)-90%)] items-center justify-end pe-2.5 outline-hidden\",\n        \"pressed:[&_svg:not([class*='text-'])]:text-foreground [&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4 **:[svg]:shrink-0\",\n        \"group/sidebar-item:pressed:opacity-100 group-hover/sidebar-item:opacity-100 group-focus-visible/sidebar-item:opacity-100\",\n        \"group/tree-item:pressed:opacity-100 group-hover/tree-item:opacity-100 group-focus-visible/tree-item:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarTreeProps<T extends object> extends NavigationTreeProps<T> {}\nexport function SidebarTree<T extends object>({ className, ...props }: SidebarTreeProps<T>) {\n  return (\n    <NavigationTree\n      className={cx(\n        \"col-span-full flex w-full min-w-0 cursor-default flex-col gap-y-0.5 p-4 outline-hidden forced-color-adjust-none in-data-[state=collapsed]:p-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarTreeItem<T extends object>({\n  className,\n  ...props\n}: NavigationTreeItemProps<T>) {\n  return (\n    <NavigationTreeItem\n      className={cx(\n        \"min-w-0 shrink-0 cursor-default outline-hidden select-none\",\n        \"href\" in props && \"cursor-pointer\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport interface SidebarTreeContentProps extends NavigationTreeItemContentProps {\n  className?: string\n  isCurrent?: boolean\n}\n\nexport function SidebarTreeContent({ className, isCurrent, children }: SidebarTreeContentProps) {\n  return (\n    <NavigationTreeItemContent>\n      {(values) => (\n        <div data-slot=\"sidebar-item-content\" className=\"relative flex w-full min-w-0 items-center\">\n          <div\n            aria-hidden\n            className=\"shrink-0\"\n            style={{\n              width: `calc((var(--tree-item-level) - 1) * 1.25rem)`,\n            }}\n          />\n          <div\n            className={cn(\n              \"group/tree-item flex min-w-0 flex-1 items-center gap-x-2 rounded-lg p-2 font-medium text-base/6 text-sidebar-foreground sm:text-sm/5\",\n              \"[&_svg:not([class*='size-'])]:size-5 sm:[&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground **:[svg]:-mx-0.5 **:[svg]:shrink-0\",\n              \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:[&_svg:not([class*='text-'])]:text-sidebar-accent-foreground\",\n              \"[--sidebar-current-background:var(--color-sidebar-primary)] [--sidebar-current-foreground:var(--color-sidebar-primary-foreground)]\",\n              values.isFocusVisible && \"inset-ring inset-ring-sidebar-ring\",\n              values.isPressed &&\n                \"bg-sidebar-accent text-sidebar-accent-foreground [&_svg:not([class*='text-'])]:text-sidebar-accent-foreground\",\n              (values.isCurrent || isCurrent) &&\n                \"font-medium text-(--sidebar-current-foreground) hover:bg-(--sidebar-current-background) hover:text-(--sidebar-current-foreground) [&_.text-muted-foreground]:text-foreground/80 [&_svg:not([class*='text-'])]:text-(--sidebar-current-foreground) hover:[&_svg:not([class*='text-'])]:text-(--sidebar-current-foreground)\",\n              values.isCurrentAncestor &&\n                \"text-sidebar-accent-foreground [&_svg:not([class*='text-'])]:text-sidebar-accent-foreground\",\n              values.isDisabled && \"opacity-50\",\n              className\n            )}\n          >\n            {values.hasChildItems && (\n              <TreeIndicator\n                values={{\n                  isDisabled: values.isDisabled,\n                  isExpanded: values.isExpanded,\n                }}\n              />\n            )}\n            {typeof children === \"function\" ? children(values) : children}\n          </div>\n        </div>\n      )}\n    </NavigationTreeItemContent>\n  )\n}\n\nexport interface SidebarTreeLinkProps extends Omit<LinkProps, \"href\"> {}\n\nexport function SidebarTreeLink({ className, ...props }: SidebarTreeLinkProps) {\n  return (\n    <Link\n      data-slot=\"sidebar-tree-link\"\n      className={cx(\n        \"flex min-w-0 flex-1 items-center gap-x-2 outline-hidden focus-visible:outline-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function SidebarTreeLabel({ className, ...props }: React.ComponentProps<\"span\">) {\n  const { state, isMobile } = useSidebar()\n\n  if (state === \"collapsed\" && !isMobile) {\n    return null\n  }\n\n  return (\n    <span\n      data-slot=\"sidebar-label\"\n      className={cn(\"col-start-2 truncate pe-6 outline-hidden\", className)}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}