{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "dependencies": [
    "@kobalte/core",
    "lucide-solid"
  ],
  "registryDependencies": [
    "@gc-solid/button",
    "@gc-solid/separator",
    "@gc-solid/sheet",
    "@gc-solid/input",
    "@gc-solid/skeleton",
    "@gc-solid/tooltip",
    "@gc-solid/use-mobile"
  ],
  "files": [
    {
      "path": "ui/sidebar.tsx",
      "content": "import type { Accessor, Component, ComponentProps, JSX, ValidComponent } from \"solid-js\"\nimport {\n  createContext,\n  createEffect,\n  createMemo,\n  createSignal,\n  Match,\n  mergeProps,\n  onCleanup,\n  Show,\n  Switch,\n  splitProps,\n  useContext\n} from \"solid-js\"\n\nimport type { PolymorphicProps } from \"@kobalte/core\"\nimport { Polymorphic } from \"@kobalte/core\"\nimport type { VariantProps } from \"class-variance-authority\"\nimport { cva } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"~/hooks/use-mobile\"\nimport { cn } from \"@/lib/utils\"\nimport type { ButtonProps } from \"@/components/ui/button\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from \"@/components/ui/sheet\"\nimport { Skeleton } from \"@/components/ui/skeleton\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"@/components/ui/tooltip\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContext = {\n  state: Accessor<\"expanded\" | \"collapsed\">\n  open: Accessor<boolean>\n  setOpen: (open: boolean) => void\n  openMobile: Accessor<boolean>\n  setOpenMobile: (open: boolean) => void\n  isMobile: Accessor<boolean>\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = createContext<SidebarContext | null>(null)\n\nfunction useSidebar() {\n  const context = useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\ntype SidebarProviderProps = Omit<ComponentProps<\"div\">, \"style\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n  style?: JSX.CSSProperties\n}\n\nconst SidebarProvider: Component<SidebarProviderProps> = (rawProps) => {\n  const props = mergeProps({ defaultOpen: true }, rawProps)\n  const [local, others] = splitProps(props, [\n    \"defaultOpen\",\n    \"open\",\n    \"onOpenChange\",\n    \"class\",\n    \"style\",\n    \"children\"\n  ])\n\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = createSignal(false)\n\n  // This is the internal state of the sidebar.\n  // We use open and onOpenChange for control from outside the component.\n  const [_open, _setOpen] = createSignal(local.defaultOpen)\n  const open = () => local.open ?? _open()\n  const setOpen = (value: boolean | ((value: boolean) => boolean)) => {\n    if (local.onOpenChange) {\n      return local.onOpenChange?.(typeof value === \"function\" ? value(open()) : value)\n    }\n    _setOpen(value)\n\n    // This sets the cookie to keep the sidebar state.\n    document.cookie = `${SIDEBAR_COOKIE_NAME}=${open()}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n  }\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = () => {\n    return isMobile() ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  createEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    onCleanup(() => window.removeEventListener(\"keydown\", handleKeyDown))\n  })\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = () => (open() ? \"expanded\" : \"collapsed\")\n\n  const contextValue = {\n    state,\n    open,\n    setOpen,\n    isMobile,\n    openMobile,\n    setOpenMobile,\n    toggleSidebar\n  }\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        class={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          local.class\n        )}\n        data-slot=\"sidebar-wrapper\"\n        style={{\n          \"--sidebar-width\": SIDEBAR_WIDTH,\n          \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n          ...local.style\n        }}\n        {...others}\n      >\n        {local.children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\ntype SidebarProps = ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}\n\nconst Sidebar: Component<SidebarProps> = (rawProps) => {\n  const props = mergeProps<SidebarProps[]>(\n    {\n      side: \"left\",\n      variant: \"sidebar\",\n      collapsible: \"offcanvas\"\n    },\n    rawProps\n  )\n  const [local, others] = splitProps(props, [\"side\", \"variant\", \"collapsible\", \"class\", \"children\"])\n\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  return (\n    <Switch>\n      <Match when={local.collapsible === \"none\"}>\n        <div\n          class={cn(\n            \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n            local.class\n          )}\n          data-slot=\"sidebar\"\n          {...others}\n        >\n          {local.children}\n        </div>\n      </Match>\n      <Match when={isMobile()}>\n        <Sheet onOpenChange={setOpenMobile} open={openMobile()} {...others}>\n          <SheetContent\n            class=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            data-mobile=\"true\"\n            data-sidebar=\"sidebar\"\n            data-slot=\"sidebar\"\n            side={local.side}\n            style={{\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE\n            }}\n          >\n            <SheetHeader class=\"sr-only\">\n              <SheetTitle>Sidebar</SheetTitle>\n              <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n            </SheetHeader>\n            <div class=\"flex size-full flex-col\">{local.children}</div>\n          </SheetContent>\n        </Sheet>\n      </Match>\n      <Match when={!isMobile()}>\n        <div\n          class=\"group peer hidden text-sidebar-foreground md:block\"\n          data-collapsible={state() === \"collapsed\" ? local.collapsible : \"\"}\n          data-side={local.side}\n          data-slot=\"sidebar\"\n          data-state={state()}\n          data-variant={local.variant}\n        >\n          {/* This is what handles the sidebar gap on desktop */}\n          <div\n            class={cn(\n              \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n              \"group-data-[collapsible=offcanvas]:w-0\",\n              \"group-data-[side=right]:rotate-180\",\n              local.variant === \"floating\" || local.variant === \"inset\"\n                ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n            )}\n            data-slot=\"sidebar-gap\"\n          />\n          <div\n            class={cn(\n              \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex\",\n              local.side === \"left\"\n                ? \"left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]\"\n                : \"right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]\",\n              // Adjust the padding for floating and inset variants.\n              local.variant === \"floating\" || local.variant === \"inset\"\n                ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n              local.class\n            )}\n            data-slot=\"sidebar-container\"\n            {...others}\n          >\n            <div\n              class=\"flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm\"\n              data-sidebar=\"sidebar\"\n              data-slot=\"sidebar-inner\"\n            >\n              {local.children}\n            </div>\n          </div>\n        </div>\n      </Match>\n    </Switch>\n  )\n}\n\ntype SidebarTriggerProps<T extends ValidComponent = \"button\"> = ButtonProps<T> & {\n  onClick?: (event: MouseEvent) => void\n}\n\nconst SidebarTrigger = <T extends ValidComponent = \"button\">(props: SidebarTriggerProps<T>) => {\n  const [local, others] = splitProps(props as SidebarTriggerProps, [\"class\", \"onClick\"])\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      class={cn(\"size-7\", local.class)}\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      onClick={(event: MouseEvent) => {\n        local.onClick?.(event)\n        toggleSidebar()\n      }}\n      size=\"icon\"\n      variant=\"ghost\"\n      {...others}\n    >\n      <svg\n        class=\"size-4\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        stroke-width=\"2\"\n        viewBox=\"0 0 24 24\"\n      >\n        <rect height=\"18\" rx=\"2\" width=\"18\" x=\"3\" y=\"3\" />\n        <path d=\"M9 3v18\" />\n      </svg>\n      <span class=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nconst SidebarRail: Component<ComponentProps<\"button\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      aria-label=\"Toggle Sidebar\"\n      class={cn(\n        \"-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border 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=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        local.class\n      )}\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      onClick={toggleSidebar}\n      tabIndex={-1}\n      title=\"Toggle Sidebar\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarInset: Component<ComponentProps<\"main\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <main\n      class={cn(\n        \"relative flex w-full flex-1 flex-col bg-background\",\n        \"md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm\",\n        local.class\n      )}\n      data-slot=\"sidebar-inset\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarInput = (props: ComponentProps<typeof Input>) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <Input\n      class={cn(\"h-8 w-full bg-background shadow-none\", local.class)}\n      data-sidebar=\"input\"\n      data-slot=\"sidebar-input\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-col gap-2 p-2\", local.class)}\n      data-sidebar=\"header\"\n      data-slot=\"sidebar-header\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"flex flex-col gap-2 p-2\", local.class)}\n      data-sidebar=\"footer\"\n      data-slot=\"sidebar-footer\"\n      {...others}\n    />\n  )\n}\n\ntype SidebarSeparatorProps<T extends ValidComponent = \"hr\"> = ComponentProps<typeof Separator<T>>\n\nconst SidebarSeparator = <T extends ValidComponent = \"hr\">(props: SidebarSeparatorProps<T>) => {\n  const [local, others] = splitProps(props as SidebarSeparatorProps, [\"class\"])\n  return (\n    <Separator\n      class={cn(\"mx-2 w-auto bg-sidebar-border\", local.class)}\n      data-sidebar=\"separator\"\n      data-slot=\"sidebar-separator\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarContent: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\n        \"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden\",\n        local.class\n      )}\n      data-sidebar=\"content\"\n      data-slot=\"sidebar-content\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarGroup: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"relative flex w-full min-w-0 flex-col p-2\", local.class)}\n      data-sidebar=\"group\"\n      data-slot=\"sidebar-group\"\n      {...others}\n    />\n  )\n}\n\ntype SidebarGroupLabelProps<T extends ValidComponent = \"div\"> = ComponentProps<T>\n\nconst SidebarGroupLabel = <T extends ValidComponent = \"div\">(\n  props: PolymorphicProps<T, SidebarGroupLabelProps<T>>\n) => {\n  const [local, others] = splitProps(props as SidebarGroupLabelProps, [\"class\"])\n\n  return (\n    <Polymorphic<SidebarGroupLabelProps>\n      as=\"div\"\n      class={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        \"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0\",\n        local.class\n      )}\n      data-sidebar=\"group-label\"\n      data-slot=\"sidebar-group-label\"\n      {...others}\n    />\n  )\n}\n\ntype SidebarGroupActionProps<T extends ValidComponent = \"button\"> = ComponentProps<T>\n\nconst SidebarGroupAction = <T extends ValidComponent = \"button\">(\n  props: PolymorphicProps<T, SidebarGroupActionProps<T>>\n) => {\n  const [local, others] = splitProps(props as SidebarGroupActionProps, [\"class\"])\n  return (\n    <Polymorphic<SidebarGroupActionProps>\n      as=\"button\"\n      class={cn(\n        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:-inset-2 after:absolute md:after:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      data-sidebar=\"group-action\"\n      data-slot=\"sidebar-group-action\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarGroupContent: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\"w-full text-sm\", local.class)}\n      data-sidebar=\"group-content\"\n      data-slot=\"sidebar-group-content\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarMenu: Component<ComponentProps<\"ul\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <ul\n      class={cn(\"flex w-full min-w-0 flex-col gap-1\", local.class)}\n      data-sidebar=\"menu\"\n      data-slot=\"sidebar-menu\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarMenuItem: Component<ComponentProps<\"li\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <li\n      class={cn(\"group/menu-item relative\", local.class)}\n      data-sidebar=\"menu-item\"\n      data-slot=\"sidebar-menu-item\"\n      {...others}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\"\n      },\n      size: {\n        default: \"h-8 text-sm\",\n        sm: \"h-7 text-xs\",\n        lg: \"h-12 text-sm group-data-[collapsible=icon]:p-0!\"\n      }\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\"\n    }\n  }\n)\n\ntype SidebarMenuButtonProps<T extends ValidComponent = \"button\"> = ComponentProps<T> &\n  VariantProps<typeof sidebarMenuButtonVariants> & {\n    isActive?: boolean\n    tooltip?: string\n  }\n\nconst SidebarMenuButton = <T extends ValidComponent = \"button\">(\n  rawProps: PolymorphicProps<T, SidebarMenuButtonProps<T>>\n) => {\n  const props = mergeProps({ isActive: false, variant: \"default\", size: \"default\" }, rawProps)\n  const [local, others] = splitProps(props as SidebarMenuButtonProps, [\n    \"isActive\",\n    \"tooltip\",\n    \"variant\",\n    \"size\",\n    \"class\"\n  ])\n  const { isMobile, state } = useSidebar()\n\n  const MenuButton = (props: SidebarMenuButtonProps) => {\n    const [_local, _others] = splitProps(props, [\"class\"])\n    return (\n      <Polymorphic<SidebarMenuButtonProps>\n        as=\"button\"\n        class={cn(\n          sidebarMenuButtonVariants({ variant: local.variant, size: local.size }),\n          _local.class,\n          local.class\n        )}\n        data-active={local.isActive}\n        data-sidebar=\"menu-button\"\n        data-size={local.size}\n        data-slot=\"sidebar-menu-button\"\n        {..._others}\n        {...others}\n      />\n    )\n  }\n\n  return (\n    <Show fallback={<MenuButton />} when={local.tooltip}>\n      <Tooltip placement=\"right\">\n        <TooltipTrigger as={MenuButton} class=\"w-full\" />\n        <TooltipContent hidden={state() !== \"collapsed\" || isMobile()}>\n          {local.tooltip}\n        </TooltipContent>\n      </Tooltip>\n    </Show>\n  )\n}\n\ntype SidebarMenuActionProps<T extends ValidComponent = \"button\"> = ComponentProps<T> & {\n  showOnHover?: boolean\n}\n\nconst SidebarMenuAction = <T extends ValidComponent = \"button\">(\n  rawProps: PolymorphicProps<T, SidebarMenuActionProps<T>>\n) => {\n  const props = mergeProps({ showOnHover: false }, rawProps)\n  const [local, others] = splitProps(props as SidebarMenuActionProps, [\"class\", \"showOnHover\"])\n\n  return (\n    <Polymorphic<SidebarMenuActionProps>\n      as=\"button\"\n      class={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0\",\n        // Increases the hit area of the button on mobile.\n        \"after:-inset-2 after:absolute md:after:hidden\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0\",\n        local.class\n      )}\n      data-sidebar=\"menu-action\"\n      data-slot=\"sidebar-menu-action\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarMenuBadge: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      class={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums\",\n        \"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground\",\n        \"peer-data-[size=sm]/menu-button:top-1\",\n        \"peer-data-[size=default]/menu-button:top-1.5\",\n        \"peer-data-[size=lg]/menu-button:top-2.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      data-sidebar=\"menu-badge\"\n      data-slot=\"sidebar-menu-badge\"\n      {...others}\n    />\n  )\n}\n\ntype SidebarMenuSkeletonProps = ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}\n\nconst SidebarMenuSkeleton: Component<SidebarMenuSkeletonProps> = (rawProps) => {\n  const props = mergeProps({ showIcon: false }, rawProps)\n  const [local, others] = splitProps(props, [\"class\", \"showIcon\"])\n\n  // Random width between 50 to 90%.\n  const width = createMemo(() => `${Math.floor(Math.random() * 40) + 50}%`)\n\n  return (\n    <div\n      class={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", local.class)}\n      data-sidebar=\"menu-skeleton\"\n      data-slot=\"sidebar-menu-skeleton\"\n      {...others}\n    >\n      {local.showIcon && <Skeleton class=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        class=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={{\n          \"--skeleton-width\": width()\n        }}\n      />\n    </div>\n  )\n}\n\nconst SidebarMenuSub: Component<ComponentProps<\"ul\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <ul\n      class={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      data-sidebar=\"menu-sub\"\n      data-slot=\"sidebar-menu-sub\"\n      {...others}\n    />\n  )\n}\n\nconst SidebarMenuSubItem: Component<ComponentProps<\"li\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <li\n      class={cn(\"group/menu-sub-item relative\", local.class)}\n      data-sidebar=\"menu-sub-item\"\n      data-slot=\"sidebar-menu-sub-item\"\n      {...others}\n    />\n  )\n}\n\ntype SidebarMenuSubButtonProps<T extends ValidComponent = \"a\"> = ComponentProps<T> & {\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}\n\nconst SidebarMenuSubButton = <T extends ValidComponent = \"a\">(\n  rawProps: PolymorphicProps<T, SidebarMenuSubButtonProps<T>>\n) => {\n  const props = mergeProps({ size: \"md\" }, rawProps)\n  const [local, others] = splitProps(props as SidebarMenuSubButtonProps, [\n    \"size\",\n    \"isActive\",\n    \"class\"\n  ])\n\n  return (\n    <Polymorphic<SidebarMenuSubButtonProps>\n      as=\"a\"\n      class={cn(\n        \"-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        \"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground\",\n        local.size === \"sm\" && \"text-xs\",\n        local.size === \"md\" && \"text-sm\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      data-active={local.isActive}\n      data-sidebar=\"menu-sub-button\"\n      data-size={local.size}\n      data-slot=\"sidebar-menu-sub-button\"\n      {...others}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar\n}\n",
      "type": "registry:ui"
    }
  ]
}