{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "sidebar",
  "type": "registry:ui",
  "title": "Sidebar",
  "description": "A sidebar component",
  "dependencies": [
    "solid-js",
    "@kobalte/core",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://solid-ui.com/r/button.json",
    "https://solid-ui.com/r/sheet.json",
    "https://solid-ui.com/r/separator.json",
    "https://solid-ui.com/r/skeleton.json",
    "https://solid-ui.com/r/text-field.json",
    "https://solid-ui.com/r/tooltip.json"
  ],
  "files": [
    {
      "path": "src/registry/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  splitProps,\n  Switch,\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 { cn } from \"~/lib/utils\"\nimport type { ButtonProps } from \"~/registry/ui/button\"\nimport { Button } from \"~/registry/ui/button\"\nimport { Separator } from \"~/registry/ui/separator\"\nimport { Sheet, SheetContent } from \"~/registry/ui/sheet\"\nimport { Skeleton } from \"~/registry/ui/skeleton\"\nimport { TextField, TextFieldInput } from \"~/registry/ui/text-field\"\nimport { Tooltip, TooltipContent, TooltipTrigger } from \"~/registry/ui/tooltip\"\n\nconst MOBILE_BREAKPOINT = 768\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 Sidebar.\")\n  }\n\n  return context\n}\n\nexport function useIsMobile(fallback = false) {\n  const [isMobile, setIsMobile] = createSignal(fallback)\n\n  createEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)\n    const onChange = (e: MediaQueryListEvent | MediaQueryList) => {\n      setIsMobile(e.matches)\n    }\n    mql.addEventListener(\"change\", onChange)\n    onChange(mql)\n    onCleanup(() => mql.removeEventListener(\"change\", onChange))\n  })\n\n  return isMobile\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        style={{\n          \"--sidebar-width\": SIDEBAR_WIDTH,\n          \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n          ...local.style\n        }}\n        class={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full text-sidebar-foreground has-[[data-variant=inset]]:bg-sidebar\",\n          local.class\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            \"test w-(--sidebar-width) flex h-full flex-col bg-sidebar text-sidebar-foreground\",\n            local.class\n          )}\n          {...others}\n        >\n          {local.children}\n        </div>\n      </Match>\n      <Match when={isMobile()}>\n        <Sheet open={openMobile()} onOpenChange={setOpenMobile} {...others}>\n          <SheetContent\n            data-sidebar=\"sidebar\"\n            data-mobile=\"true\"\n            class=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n            style={{\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE\n            }}\n            position={local.side}\n          >\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 md:block\"\n          data-state={state()}\n          data-collapsible={state() === \"collapsed\" ? local.collapsible : \"\"}\n          data-variant={local.variant}\n          data-side={local.side}\n        >\n          {/* This is what handles the sidebar gap on desktop */}\n          <div\n            class={cn(\n              \"w-(--sidebar-width) relative h-svh 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)_+_theme(spacing.4))]\"\n                : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n            )}\n          />\n          <div\n            class={cn(\n              \"w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh 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)_+_theme(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            {...others}\n          >\n            <div\n              data-sidebar=\"sidebar\"\n              class=\"flex size-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\"\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      data-sidebar=\"trigger\"\n      variant=\"ghost\"\n      size=\"icon\"\n      class={cn(\"size-7\", local.class)}\n      onClick={(event: MouseEvent) => {\n        local.onClick?.(event)\n        toggleSidebar()\n      }}\n      {...others}\n    >\n      <svg\n        viewBox=\"0 0 24 24\"\n        fill=\"none\"\n        stroke=\"currentColor\"\n        stroke-width=\"2\"\n        stroke-linecap=\"round\"\n        stroke-linejoin=\"round\"\n        class=\"size-4\"\n      >\n        <rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />\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      data-sidebar=\"rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      class={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 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=left]:-right-4 group-data-[side=right]:left-0 sm:flex\",\n        \"[[data-side=left]_&]:cursor-w-resize [[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 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        local.class\n      )}\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 min-h-svh flex-1 flex-col bg-background\",\n        \"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\ntype SidebarInputProps<T extends ValidComponent = \"input\"> = ComponentProps<\n  typeof TextFieldInput<T>\n>\n\nconst SidebarInput = <T extends ValidComponent = \"input\">(props: SidebarInputProps<T>) => {\n  const [local, others] = splitProps(props as SidebarInputProps, [\"class\"])\n  return (\n    <TextField>\n      <TextFieldInput\n        data-sidebar=\"input\"\n        class={cn(\n          \"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring\",\n          local.class\n        )}\n        {...others}\n      />\n    </TextField>\n  )\n}\n\nconst SidebarHeader: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div data-sidebar=\"header\" class={cn(\"flex flex-col gap-2 p-2\", local.class)} {...others} />\n  )\n}\n\nconst SidebarFooter: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div data-sidebar=\"footer\" class={cn(\"flex flex-col gap-2 p-2\", local.class)} {...others} />\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      data-sidebar=\"separator\"\n      class={cn(\"mx-2 w-auto bg-sidebar-border\", local.class)}\n      {...others}\n    />\n  )\n}\n\nconst SidebarContent: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      data-sidebar=\"content\"\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      {...others}\n    />\n  )\n}\n\nconst SidebarGroup: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      data-sidebar=\"group\"\n      class={cn(\"relative flex w-full min-w-0 flex-col p-2\", local.class)}\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      data-sidebar=\"group-label\"\n      class={cn(\n        \"flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] 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      {...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      data-sidebar=\"group-action\"\n      class={cn(\n        \"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none 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:absolute after:-inset-2 after:md:hidden\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\nconst SidebarGroupContent: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return <div data-sidebar=\"group-content\" class={cn(\"w-full text-sm\", local.class)} {...others} />\n}\n\nconst SidebarMenu: Component<ComponentProps<\"ul\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <ul\n      data-sidebar=\"menu\"\n      class={cn(\"flex w-full min-w-0 flex-col gap-1\", local.class)}\n      {...others}\n    />\n  )\n}\n\nconst SidebarMenuItem: Component<ComponentProps<\"li\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <li data-sidebar=\"menu-item\" class={cn(\"group/menu-item relative\", local.class)} {...others} />\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-none 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 button = (\n    <Polymorphic<SidebarMenuButtonProps>\n      as=\"button\"\n      data-sidebar=\"menu-button\"\n      data-size={local.size}\n      data-active={local.isActive}\n      class={cn(\n        sidebarMenuButtonVariants({ variant: local.variant, size: local.size }),\n        local.class\n      )}\n      {...others}\n    />\n  )\n\n  return (\n    <Show when={local.tooltip} fallback={button}>\n      <Tooltip placement=\"right\">\n        <TooltipTrigger class=\"w-full\">{button}</TooltipTrigger>\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      data-sidebar=\"menu-action\"\n      class={cn(\n        \"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none 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:absolute after:-inset-2 after:md: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      {...others}\n    />\n  )\n}\n\nconst SidebarMenuBadge: Component<ComponentProps<\"div\">> = (props) => {\n  const [local, others] = splitProps(props, [\"class\"])\n  return (\n    <div\n      data-sidebar=\"menu-badge\"\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 text-xs font-medium tabular-nums text-sidebar-foreground\",\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      {...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      data-sidebar=\"menu-skeleton\"\n      class={cn(\"flex h-8 items-center gap-2 rounded-md px-2\", local.class)}\n      {...others}\n    >\n      {local.showIcon && <Skeleton class=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n      <Skeleton\n        class=\"max-w-(--skeleton-width) h-4 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      data-sidebar=\"menu-sub\"\n      class={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5\",\n        \"group-data-[collapsible=icon]:hidden\",\n        local.class\n      )}\n      {...others}\n    />\n  )\n}\n\nconst SidebarMenuSubItem: Component<ComponentProps<\"li\">> = (props) => <li {...props} />\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      data-sidebar=\"menu-sub-button\"\n      data-size={local.size}\n      data-active={local.isActive}\n      class={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none 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      {...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"
    }
  ]
}