{
  "$schema": "https://uipkge.dev/schema/registry-item.json",
  "name": "sidebar",
  "title": "Sidebar",
  "type": "registry:ui",
  "files": [
    {
      "path": "packages/registry-svelte/components/sidebar/Sidebar.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarProps extends HTMLAttributes<HTMLDivElement> {\n    side?: 'left' | 'right'\n    variant?: 'sidebar' | 'floating' | 'inset'\n    collapsible?: 'offcanvas' | 'icon' | 'none'\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '$lib/components/ui/sheet'\n  import { cn } from '$lib/utils'\n  import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils'\n\n  let {\n    class: className,\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarProps = $props()\n\n  const sidebar = useSidebar()\n</script>\n\n{#if collapsible === 'none'}\n  <div\n    bind:this={ref}\n    data-uipkge=\"\"\n    data-slot=\"sidebar\"\n    class={cn('bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', className)}\n    {...restProps}\n  >\n    {@render children?.()}\n  </div>\n{:else if sidebar.isMobile}\n  <Sheet open={sidebar.openMobile} onOpenChange={sidebar.setOpenMobile}>\n    <SheetContent\n      data-sidebar=\"sidebar\"\n      data-uipkge=\"\"\n      data-slot=\"sidebar\"\n      data-mobile=\"true\"\n      {side}\n      class=\"bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden\"\n      style=\"--sidebar-width:{SIDEBAR_WIDTH_MOBILE}\"\n      {...restProps}\n    >\n      <SheetHeader class=\"sr-only\">\n        <SheetTitle>Sidebar</SheetTitle>\n        <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n      </SheetHeader>\n      <div class=\"flex h-full w-full flex-col\">\n        {@render children?.()}\n      </div>\n    </SheetContent>\n  </Sheet>\n{:else}\n  <div\n    bind:this={ref}\n    class=\"group peer text-sidebar-foreground hidden md:block\"\n    data-uipkge=\"\"\n    data-slot=\"sidebar\"\n    data-state={sidebar.state}\n    data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}\n    data-variant={variant}\n    data-side={side}\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        variant === 'floating' || 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    ></div>\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        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 (token-aligned with React/shadcn).\n        variant === 'floating' || 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        className,\n      )}\n      {...restProps}\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        class=\"bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm\"\n      >\n        {@render children?.()}\n      </div>\n    </div>\n  </div>\n{/if}\n\n<style>\n  /* Push any OverlayScroll thumb inside a sidebar 2.5rem in from the right\n     edge so it clears SidebarRail's inside-zone. The CSS variable\n     cascades to every descendant, so consumers wrapping their nav in\n     OverlayScroll (a common pattern when nav items overflow viewport\n     height) get this for free -- no per-call thumb-offset config. */\n  [data-slot='sidebar'] {\n    --ovs-thumb-right: 2.5rem;\n  }\n</style>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/Sidebar.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarContent.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarContentProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarContentProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-content\"\n  data-sidebar=\"content\"\n  class={cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarContent.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarFooter.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarFooterProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarFooterProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-footer\"\n  data-sidebar=\"footer\"\n  class={cn('flex flex-col gap-2 p-2', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarFooter.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarGroup.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarGroupProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarGroupProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-group\"\n  data-sidebar=\"group\"\n  class={cn('relative flex w-full min-w-0 flex-col p-2', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarGroup.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarGroupAction.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n\n  export interface SidebarGroupActionProps extends HTMLButtonAttributes {\n    /** Render your own element — spread `props` onto it. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLButtonElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, child, children, ref = $bindable(null), ...restProps }: SidebarGroupActionProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'sidebar-group-action',\n    'data-sidebar': 'group-action',\n    class: cn(\n      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'after:absolute after:-inset-2 md:after:hidden',\n      'group-data-[collapsible=icon]:hidden',\n      className,\n    ),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <button bind:this={ref} type=\"button\" {...mergedProps}>{@render children?.()}</button>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarGroupAction.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarGroupContent.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarGroupContentProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarGroupContentProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-group-content\"\n  data-sidebar=\"group-content\"\n  class={cn('w-full text-sm', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarGroupContent.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarGroupLabel.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarGroupLabelProps extends HTMLAttributes<HTMLDivElement> {\n    /** Render your own element — spread `props` onto it. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, child, children, ref = $bindable(null), ...restProps }: SidebarGroupLabelProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'sidebar-group-label',\n    'data-sidebar': 'group-label',\n    class: cn(\n      'text-sidebar-foreground/70 ring-sidebar-ring mt-2 mb-1 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden 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      className,\n    ),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <div bind:this={ref} {...mergedProps}>{@render children?.()}</div>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarGroupLabel.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarHeader.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarHeaderProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarHeaderProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-header\"\n  data-sidebar=\"header\"\n  class={cn('flex flex-col gap-2 p-2', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarHeader.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarInput.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { InputProps } from '$lib/components/ui/input'\n\n  // Extends InputProps (not raw HTML attrs): the rest-spread below must match\n  // Input exactly — Input redefines `size`/`prefix`, so raw attrs are not assignable.\n  export interface SidebarInputProps extends InputProps {\n    children?: Snippet\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Input } from '$lib/components/ui/input'\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarInputProps = $props()\n</script>\n\n<!-- Sidebar-tuned wrapper over the kit's <Input> with sidebar height + bg defaults. -->\n<Input\n  data-uipkge=\"\"\n  data-slot=\"sidebar-input\"\n  data-sidebar=\"input\"\n  bind:ref\n  class={cn('bg-background h-8 w-full shadow-none', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</Input>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarInput.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarInset.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarInsetProps extends HTMLAttributes<HTMLElement> {\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarInsetProps = $props()\n</script>\n\n<main\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-inset\"\n  class={cn(\n    // min-w-0 is load-bearing: a flex-1 child without it inherits min-width: auto,\n    // which means any single wide descendant (chart, table, code block) blows the\n    // inset's width past its grid track. The upstream shadcn-ui sidebar omits this.\n    'bg-background relative flex w-full min-w-0 flex-1 flex-col',\n    '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 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</main>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarInset.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenu.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuProps extends HTMLAttributes<HTMLUListElement> {\n    ref?: HTMLUListElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarMenuProps = $props()\n</script>\n\n<ul\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-menu\"\n  data-sidebar=\"menu\"\n  class={cn('flex w-full min-w-0 flex-col gap-1', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</ul>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenu.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuAction.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuActionProps extends HTMLButtonAttributes {\n    showOnHover?: boolean\n    /** Render your own element — spread `props` onto it. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLButtonElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    showOnHover = false,\n    child,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarMenuActionProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'sidebar-menu-action',\n    'data-sidebar': 'menu-action',\n    class: cn(\n      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n      'after:absolute after:-inset-2 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      showOnHover &&\n        'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',\n      className,\n    ),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <button bind:this={ref} type=\"button\" {...mergedProps}>{@render children?.()}</button>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuAction.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuBadge.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuBadgeProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarMenuBadgeProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-menu-badge\"\n  data-sidebar=\"menu-badge\"\n  class={cn(\n    'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',\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',\n    'group-data-[collapsible=icon]:hidden',\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuBadge.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuButton.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuButtonProps extends HTMLButtonAttributes {\n    variant?: 'default' | 'outline'\n    size?: 'default' | 'sm' | 'lg'\n    isActive?: boolean\n    /** Tooltip shown when the sidebar is collapsed to icons. */\n    tooltip?: string | Snippet\n    /** Render your own element — spread `props` onto it. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Tooltip, TooltipContent, TooltipTrigger } from '$lib/components/ui/tooltip'\n  import { useSidebar } from './utils'\n  import SidebarMenuButtonChild from './SidebarMenuButtonChild.svelte'\n\n  let {\n    class: className,\n    variant = 'default',\n    size = 'default',\n    isActive,\n    tooltip,\n    child,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarMenuButtonProps = $props()\n\n  const sidebar = useSidebar()\n</script>\n\n{#if !tooltip}\n  <SidebarMenuButtonChild {variant} {size} {isActive} {child} bind:ref class={className} {...restProps}>\n    {@render children?.()}\n  </SidebarMenuButtonChild>\n{:else}\n  <!-- w-full: the Tooltip positioning wrapper must not shrink-wrap the\n       full-width menu button (truncated sidebar labels). -->\n  <Tooltip class=\"w-full\">\n    <TooltipTrigger>\n      {#snippet child({ props }: { props: Record<string, unknown> })}\n        <SidebarMenuButtonChild\n          {variant}\n          {size}\n          {isActive}\n          {child}\n          bind:ref\n          class={className}\n          {...restProps}\n          {...props}\n        >\n          {@render children?.()}\n        </SidebarMenuButtonChild>\n      {/snippet}\n    </TooltipTrigger>\n    <TooltipContent side=\"right\" align=\"center\" hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}>\n      {#if typeof tooltip === 'string'}\n        {tooltip}\n      {:else}\n        {@render tooltip()}\n      {/if}\n    </TooltipContent>\n  </Tooltip>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuButton.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuButtonChild.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuButtonChildProps extends HTMLButtonAttributes {\n    variant?: 'default' | 'outline'\n    size?: 'default' | 'sm' | 'lg'\n    isActive?: boolean\n    /** Render your own element — spread `props` onto it. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { sidebarMenuButtonVariants } from './sidebar.variants'\n\n  let {\n    class: className,\n    variant = 'default',\n    size = 'default',\n    isActive,\n    child,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarMenuButtonChildProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'sidebar-menu-button',\n    'data-sidebar': 'menu-button',\n    'data-size': size,\n    'data-active': isActive,\n    class: cn(sidebarMenuButtonVariants({ variant, size }), className),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <button bind:this={ref as HTMLButtonElement | null} type=\"button\" {...mergedProps}>\n    {@render children?.()}\n  </button>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuButtonChild.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuItemProps extends HTMLAttributes<HTMLLIElement> {\n    ref?: HTMLLIElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarMenuItemProps = $props()\n</script>\n\n<li\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-menu-item\"\n  data-sidebar=\"menu-item\"\n  class={cn('group/menu-item relative', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuSkeleton.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n    showIcon?: boolean\n    width?: string\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Skeleton } from '$lib/components/ui/skeleton'\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    showIcon = false,\n    width = '70%',\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarMenuSkeletonProps = $props()\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-menu-skeleton\"\n  data-sidebar=\"menu-skeleton\"\n  class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}\n  {...restProps}\n>\n  {#if showIcon}\n    <Skeleton class=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />\n  {/if}\n\n  <Skeleton class=\"h-4 max-w-(--skeleton-width) flex-1\" data-sidebar=\"menu-skeleton-text\" style=\"--skeleton-width:{width}\" />\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuSkeleton.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuSub.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuSubProps extends HTMLAttributes<HTMLUListElement> {\n    ref?: HTMLUListElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarMenuSubProps = $props()\n</script>\n\n<ul\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-menu-sub\"\n  data-sidebar=\"menu-badge\"\n  class={cn(\n    'border-sidebar-border mx-3 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2 py-0.5',\n    'group-data-[collapsible=icon]:hidden',\n    className,\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</ul>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuSub.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuSubButton.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { Snippet } from 'svelte'\n  import type { HTMLAnchorAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuSubButtonProps extends HTMLAnchorAttributes {\n    size?: 'sm' | 'md'\n    isActive?: boolean\n    /** Render your own element — spread `props` onto it. */\n    child?: Snippet<[{ props: Record<string, unknown> }]>\n    ref?: HTMLAnchorElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let {\n    class: className,\n    size = 'md',\n    isActive,\n    child,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarMenuSubButtonProps = $props()\n\n  const mergedProps = $derived({\n    'data-uipkge': '',\n    'data-slot': 'sidebar-menu-sub-button',\n    'data-sidebar': 'menu-sub-button',\n    'data-size': size,\n    'data-active': isActive,\n    class: cn(\n      'text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 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',\n      'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n      size === 'sm' && 'text-xs',\n      size === 'md' && 'text-sm',\n      'group-data-[collapsible=icon]:hidden',\n      className,\n    ),\n    ...restProps,\n  })\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <a bind:this={ref} {...mergedProps}>{@render children?.()}</a>\n{/if}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuSubButton.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarMenuSubItem.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarMenuSubItemProps extends HTMLAttributes<HTMLLIElement> {\n    ref?: HTMLLIElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarMenuSubItemProps = $props()\n</script>\n\n<li\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-menu-sub-item\"\n  data-sidebar=\"menu-sub-item\"\n  class={cn('group/menu-sub-item relative', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarMenuSubItem.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarProvider.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarProviderProps extends HTMLAttributes<HTMLDivElement> {\n    /** Uncontrolled initial open state (defaults to true). Use this when you do not need to bind or control open. */\n    defaultOpen?: boolean\n    /** Controlled open state. Bind with `bind:open` for two-way binding or pass `defaultOpen` for initial-only. */\n    open?: boolean\n    onOpenChange?: (open: boolean) => void\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import {\n    setSidebarContext,\n    SIDEBAR_COOKIE_MAX_AGE,\n    SIDEBAR_COOKIE_NAME,\n    SIDEBAR_KEYBOARD_SHORTCUT,\n    SIDEBAR_WIDTH,\n    SIDEBAR_WIDTH_ICON,\n  } from './utils'\n\n  let {\n    class: className,\n    defaultOpen = true,\n    open = $bindable(defaultOpen),\n    onOpenChange,\n    children,\n    ref = $bindable(null),\n    ...restProps\n  }: SidebarProviderProps = $props()\n\n  // `matchMedia` doesn't exist during SSR. Gating on `mounted` makes both the\n  // server and the client's first synchronous render produce the desktop\n  // branch unconditionally; `onMount` then flips the flag and `Sidebar`'s\n  // mobile branch re-runs against the real matchMedia signal. Cost: a brief\n  // desktop-layout flash for mobile users on first paint. That's the\n  // universal tradeoff for SSR-without-viewport-detection.\n  let mounted: boolean = $state(false)\n  let mobileQuery: boolean = $state(false)\n  let openMobile: boolean = $state(false)\n\n  $effect(() => {\n    mounted = true\n    if (typeof window === 'undefined' || !('matchMedia' in window)) return\n    const mq = window.matchMedia('(max-width: 768px)')\n    const sync = () => (mobileQuery = mq.matches)\n    sync()\n    mq.addEventListener('change', sync)\n\n    const onKeyDown = (event: KeyboardEvent) => {\n      if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n    document.addEventListener('keydown', onKeyDown)\n    return () => {\n      mq.removeEventListener('change', sync)\n      document.removeEventListener('keydown', onKeyDown)\n    }\n  })\n\n  const isMobile = $derived(mounted && mobileQuery)\n\n  function setOpen(value: boolean) {\n    open = value\n    onOpenChange?.(value)\n    if (typeof document !== 'undefined') {\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\n  function setOpenMobile(value: boolean) {\n    openMobile = value\n  }\n\n  // Helper to toggle the sidebar.\n  function toggleSidebar() {\n    return isMobile ? setOpenMobile(!openMobile) : setOpen(!open)\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  // Named `sidebarState`, not `state`: a `state` binding in this scope would\n  // make the compiler read every `$state(...)` below as a store subscription.\n  const sidebarState: 'expanded' | 'collapsed' = $derived(open ? 'expanded' : 'collapsed')\n\n  // Getters over $state keep every consumer reactive without runes in utils.ts.\n  // Consumers must read via `sidebar.open` (not destructured) to stay subscribed.\n  setSidebarContext({\n    get state() {\n      return sidebarState\n    },\n    get open() {\n      return open\n    },\n    setOpen,\n    get isMobile() {\n      return isMobile\n    },\n    get openMobile() {\n      return openMobile\n    },\n    setOpenMobile,\n    toggleSidebar,\n  })\n</script>\n\n<div\n  bind:this={ref}\n  data-uipkge=\"\"\n  data-slot=\"sidebar-wrapper\"\n  style=\"--sidebar-width:{SIDEBAR_WIDTH};--sidebar-width-icon:{SIDEBAR_WIDTH_ICON}\"\n  class={cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarProvider.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarRail.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLButtonAttributes } from 'svelte/elements'\n\n  export interface SidebarRailProps extends HTMLButtonAttributes {\n    ref?: HTMLButtonElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { cn } from '$lib/utils'\n  import { useSidebar } from './utils'\n\n  let { class: className, children, ref = $bindable(null), onclick, ...restProps }: SidebarRailProps = $props()\n\n  const sidebar = useSidebar()\n\n  function handleClick(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {\n    sidebar.toggleSidebar()\n    onclick?.(e)\n  }\n</script>\n\n<button\n  bind:this={ref}\n  type=\"button\"\n  data-sidebar=\"rail\"\n  data-uipkge=\"\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  title=\"Toggle Sidebar\"\n  class={cn(\n    'hover:after:bg-sidebar-border focus-visible:ring-ring absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-colors duration-200 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-px focus-visible:ring-2 focus-visible:outline-none 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    'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 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    className,\n  )}\n  onclick={handleClick}\n  {...restProps}\n>\n  {@render children?.()}\n</button>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarRail.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarSeparator.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarSeparatorProps extends HTMLAttributes<HTMLDivElement> {\n    ref?: HTMLDivElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { Separator } from '$lib/components/ui/separator'\n  import { cn } from '$lib/utils'\n\n  let { class: className, children, ref = $bindable(null), ...restProps }: SidebarSeparatorProps = $props()\n</script>\n\n<Separator\n  data-uipkge=\"\"\n  data-slot=\"sidebar-separator\"\n  data-sidebar=\"separator\"\n  bind:ref\n  class={cn('bg-sidebar-border mx-2 w-auto', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</Separator>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarSeparator.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/SidebarTrigger.svelte",
      "content": "<script lang=\"ts\" module>\n  import type { HTMLAttributes } from 'svelte/elements'\n\n  export interface SidebarTriggerProps extends HTMLAttributes<HTMLButtonElement> {\n    ref?: HTMLButtonElement | null\n  }\n</script>\n\n<script lang=\"ts\">\n  import { PanelLeft } from '@lucide/svelte'\n  import { Button } from '$lib/components/ui/button'\n  import { cn } from '$lib/utils'\n  import { useSidebar } from './utils'\n\n  let { class: className, children, ref = $bindable(null), onclick, ...restProps }: SidebarTriggerProps = $props()\n\n  const sidebar = useSidebar()\n\n  function handleClick(e: MouseEvent & { currentTarget: EventTarget & HTMLButtonElement }) {\n    sidebar.toggleSidebar()\n    onclick?.(e)\n  }\n</script>\n\n<Button\n  data-sidebar=\"trigger\"\n  data-uipkge=\"\"\n  data-slot=\"sidebar-trigger\"\n  variant=\"ghost\"\n  size=\"icon\"\n  bind:ref\n  class={cn('focus-visible:ring-ring h-7 w-7 focus-visible:ring-2 focus-visible:outline-none', className)}\n  onclick={handleClick}\n  {...restProps}\n>\n  <PanelLeft />\n  <span class=\"sr-only\">Toggle Sidebar</span>\n  {@render children?.()}\n</Button>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/SidebarTrigger.svelte"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/sidebar.variants.ts",
      "content": "import type { VariantProps } from 'class-variance-authority'\nimport { cva } from 'class-variance-authority'\n\n/**\n * Variant definitions live in their own file (rather than the package\n * `index.ts`) so consuming Vue SFCs can import without creating a circular\n * dependency through the index. See card.variants.ts for the canonical\n * example + the SSR symptom that motivated the split.\n */\n\nexport const sidebarMenuButtonVariants = cva(\n  'peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm text-sidebar-foreground/80 outline-hidden ring-sidebar-ring transition-[width,height,padding,color,background-color] 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 [&>svg]:text-sidebar-foreground/70',\n  {\n    variants: {\n      variant: {\n        default: 'hover:bg-sidebar-accent hover:text-foreground',\n        outline:\n          'bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_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\nexport type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/sidebar.variants.ts"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/index.ts",
      "content": "export { default as Sidebar, type SidebarProps } from './Sidebar.svelte'\nexport { default as SidebarContent, type SidebarContentProps } from './SidebarContent.svelte'\nexport { default as SidebarFooter, type SidebarFooterProps } from './SidebarFooter.svelte'\nexport { default as SidebarGroup, type SidebarGroupProps } from './SidebarGroup.svelte'\nexport { default as SidebarGroupAction, type SidebarGroupActionProps } from './SidebarGroupAction.svelte'\nexport { default as SidebarGroupContent, type SidebarGroupContentProps } from './SidebarGroupContent.svelte'\nexport { default as SidebarGroupLabel, type SidebarGroupLabelProps } from './SidebarGroupLabel.svelte'\nexport { default as SidebarHeader, type SidebarHeaderProps } from './SidebarHeader.svelte'\nexport { default as SidebarInput, type SidebarInputProps } from './SidebarInput.svelte'\nexport { default as SidebarInset, type SidebarInsetProps } from './SidebarInset.svelte'\nexport { default as SidebarMenu, type SidebarMenuProps } from './SidebarMenu.svelte'\nexport { default as SidebarMenuAction, type SidebarMenuActionProps } from './SidebarMenuAction.svelte'\nexport { default as SidebarMenuBadge, type SidebarMenuBadgeProps } from './SidebarMenuBadge.svelte'\nexport { default as SidebarMenuButton, type SidebarMenuButtonProps } from './SidebarMenuButton.svelte'\nexport { default as SidebarMenuItem, type SidebarMenuItemProps } from './SidebarMenuItem.svelte'\nexport { default as SidebarMenuSkeleton, type SidebarMenuSkeletonProps } from './SidebarMenuSkeleton.svelte'\nexport { default as SidebarMenuSub, type SidebarMenuSubProps } from './SidebarMenuSub.svelte'\nexport { default as SidebarMenuSubButton, type SidebarMenuSubButtonProps } from './SidebarMenuSubButton.svelte'\nexport { default as SidebarMenuSubItem, type SidebarMenuSubItemProps } from './SidebarMenuSubItem.svelte'\nexport { default as SidebarProvider, type SidebarProviderProps } from './SidebarProvider.svelte'\nexport { default as SidebarRail, type SidebarRailProps } from './SidebarRail.svelte'\nexport { default as SidebarSeparator, type SidebarSeparatorProps } from './SidebarSeparator.svelte'\nexport { default as SidebarTrigger, type SidebarTriggerProps } from './SidebarTrigger.svelte'\n\nexport { useSidebar } from './utils'\n\n// Re-export variant API from the sibling file (kept separate to avoid the\n// Component.svelte <-> index.ts circular import that broke dev SSR for Card).\nexport { sidebarMenuButtonVariants, type SidebarMenuButtonVariants } from './sidebar.variants'\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/index.ts"
    },
    {
      "path": "packages/registry-svelte/components/sidebar/utils.ts",
      "content": "import { getContext, setContext } from 'svelte'\n\nexport const SIDEBAR_COOKIE_NAME = 'sidebar_state'\nexport const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nexport const SIDEBAR_WIDTH = '16rem'\nexport const SIDEBAR_WIDTH_MOBILE = '18rem'\nexport const SIDEBAR_WIDTH_ICON = '3rem'\nexport const SIDEBAR_KEYBOARD_SHORTCUT = 'b'\n\nconst SIDEBAR_CONTEXT_KEY = Symbol('uipkge-sidebar')\n\nexport interface SidebarContextValue {\n  readonly state: 'expanded' | 'collapsed'\n  readonly open: boolean\n  setOpen: (value: boolean) => void\n  readonly isMobile: boolean\n  readonly openMobile: boolean\n  setOpenMobile: (value: boolean) => void\n  toggleSidebar: () => void\n}\n\nexport function setSidebarContext(value: SidebarContextValue) {\n  setContext(SIDEBAR_CONTEXT_KEY, value)\n}\n\nexport function useSidebar(): SidebarContextValue {\n  return getContext<SidebarContextValue>(SIDEBAR_CONTEXT_KEY)\n}\n",
      "type": "registry:ui",
      "target": "~/src/lib/components/ui/sidebar/utils.ts"
    }
  ],
  "dependencies": [
    "@lucide/svelte",
    "class-variance-authority"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/svelte/button.json",
    "https://uipkge.dev/r/svelte/input.json",
    "https://uipkge.dev/r/svelte/separator.json",
    "https://uipkge.dev/r/svelte/sheet.json",
    "https://uipkge.dev/r/svelte/skeleton.json",
    "https://uipkge.dev/r/svelte/tooltip.json"
  ],
  "description": "Full-height app sidebar — collapsible to icons, with grouping, sub-grouping, and integrated search. The navigation surface for product apps with many sections.",
  "categories": [
    "navigation"
  ]
}