{
  "name": "sidebar",
  "title": "Sidebar",
  "description": "Kura Sidebar component source.",
  "type": "ui",
  "add": "when-added",
  "files": [
    {
      "type": "ui",
      "role": "file",
      "content": "export 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",
      "path": "sidebar/constants.ts",
      "_imports_": [],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "import { IsMobile } from '$lib/hooks/is-mobile.svelte.js';\nimport { getContext, setContext } from 'svelte';\nimport { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';\n\ntype Getter<T> = () => T;\n\nexport type SidebarStateProps = {\n  /**\n   * A getter function that returns the current open state of the sidebar.\n   * We use a getter function here to support `bind:open` on the `Sidebar.Provider`\n   * component.\n   */\n  open: Getter<boolean>;\n\n  /**\n   * A function that sets the open state of the sidebar. To support `bind:open`, we need\n   * a source of truth for changing the open state to ensure it will be synced throughout\n   * the sub-components and any `bind:` references.\n   */\n  setOpen: (open: boolean) => void;\n};\n\nclass SidebarState {\n  readonly props: SidebarStateProps;\n  open = $derived.by(() => this.props.open());\n  openMobile = $state(false);\n  setOpen: SidebarStateProps['setOpen'];\n  #isMobile: IsMobile;\n  state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));\n\n  constructor(props: SidebarStateProps) {\n    this.setOpen = props.setOpen;\n    this.#isMobile = new IsMobile();\n    this.props = props;\n  }\n\n  // Convenience getter for checking if the sidebar is mobile\n  // without this, we would need to use `sidebar.isMobile.current` everywhere\n  get isMobile() {\n    return this.#isMobile.current;\n  }\n\n  // Event handler to apply to the `<svelte:window>`\n  handleShortcutKeydown = (e: KeyboardEvent) => {\n    if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      this.toggle();\n    }\n  };\n\n  setOpenMobile = (value: boolean) => {\n    this.openMobile = value;\n  };\n\n  toggle = () => {\n    return this.#isMobile.current ? (this.openMobile = !this.openMobile) : this.setOpen(!this.open);\n  };\n}\n\nconst SYMBOL_KEY = 'scn-sidebar';\n\n/**\n * Instantiates a new `SidebarState` instance and sets it in the context.\n *\n * @param props The constructor props for the `SidebarState` class.\n * @returns  The `SidebarState` instance.\n */\nexport function setSidebar(props: SidebarStateProps): SidebarState {\n  return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));\n}\n\n/**\n * Retrieves the `SidebarState` instance from the context. This is a class instance,\n * so you cannot destructure it.\n * @returns The `SidebarState` instance.\n */\nexport function useSidebar(): SidebarState {\n  return getContext(Symbol.for(SYMBOL_KEY));\n}\n",
      "path": "sidebar/context.svelte.ts",
      "_imports_": [
        {
          "import": "$lib/hooks/is-mobile.svelte.js",
          "item": "is-mobile",
          "file": {
            "type": "hook",
            "path": "is-mobile.svelte.ts"
          },
          "meta": {}
        },
        {
          "import": "./constants.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/constants.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "import { useSidebar } from './context.svelte.js';\nimport Content from './sidebar-content.svelte';\nimport Footer from './sidebar-footer.svelte';\nimport GroupAction from './sidebar-group-action.svelte';\nimport GroupContent from './sidebar-group-content.svelte';\nimport GroupLabel from './sidebar-group-label.svelte';\nimport Group from './sidebar-group.svelte';\nimport Header from './sidebar-header.svelte';\nimport Input from './sidebar-input.svelte';\nimport Inset from './sidebar-inset.svelte';\nimport MenuAction from './sidebar-menu-action.svelte';\nimport MenuBadge from './sidebar-menu-badge.svelte';\nimport MenuButton from './sidebar-menu-button.svelte';\nimport MenuItem from './sidebar-menu-item.svelte';\nimport MenuSkeleton from './sidebar-menu-skeleton.svelte';\nimport MenuSubButton from './sidebar-menu-sub-button.svelte';\nimport MenuSubItem from './sidebar-menu-sub-item.svelte';\nimport MenuSub from './sidebar-menu-sub.svelte';\nimport Menu from './sidebar-menu.svelte';\nimport Provider from './sidebar-provider.svelte';\nimport Rail from './sidebar-rail.svelte';\nimport Separator from './sidebar-separator.svelte';\nimport Trigger from './sidebar-trigger.svelte';\nimport Root from './sidebar.svelte';\n\nexport {\n  Content,\n  Footer,\n  Group,\n  GroupAction,\n  GroupContent,\n  GroupLabel,\n  Header,\n  Input,\n  Inset,\n  Menu,\n  MenuAction,\n  MenuBadge,\n  MenuButton,\n  MenuItem,\n  MenuSkeleton,\n  MenuSub,\n  MenuSubButton,\n  MenuSubItem,\n  Provider,\n  Rail,\n  Root,\n  Separator,\n  //\n  Root as Sidebar,\n  Content as SidebarContent,\n  Footer as SidebarFooter,\n  Group as SidebarGroup,\n  GroupAction as SidebarGroupAction,\n  GroupContent as SidebarGroupContent,\n  GroupLabel as SidebarGroupLabel,\n  Header as SidebarHeader,\n  Input as SidebarInput,\n  Inset as SidebarInset,\n  Menu as SidebarMenu,\n  MenuAction as SidebarMenuAction,\n  MenuBadge as SidebarMenuBadge,\n  MenuButton as SidebarMenuButton,\n  MenuItem as SidebarMenuItem,\n  MenuSkeleton as SidebarMenuSkeleton,\n  MenuSub as SidebarMenuSub,\n  MenuSubButton as SidebarMenuSubButton,\n  MenuSubItem as SidebarMenuSubItem,\n  Provider as SidebarProvider,\n  Rail as SidebarRail,\n  Separator as SidebarSeparator,\n  Trigger as SidebarTrigger,\n  Trigger,\n  useSidebar\n};\n",
      "path": "sidebar/index.ts",
      "_imports_": [
        {
          "import": "./context.svelte.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/context.svelte.ts"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-content.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-content.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-footer.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-footer.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-group-action.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-group-action.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-group-content.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-group-content.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-group-label.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-group-label.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-group.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-group.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-header.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-header.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-input.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-input.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-inset.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-inset.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-action.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-action.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-badge.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-badge.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-button.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-item.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-item.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-skeleton.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-skeleton.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-sub-button.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-sub-button.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-sub-item.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-sub-item.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu-sub.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu-sub.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-menu.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-menu.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-provider.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-provider.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-rail.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-rail.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-separator.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-separator.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar-trigger.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar-trigger.svelte"
          },
          "meta": {}
        },
        {
          "import": "./sidebar.svelte",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/sidebar.svelte"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-content\"\n  data-sidebar=\"content\"\n  class={cn(\n    'no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto border-y border-border [--radius:0] group-data-[collapsible=icon]:overflow-hidden',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-content.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-footer\"\n  data-sidebar=\"footer\"\n  class={cn('flex flex-col gap-2 border-t border-border p-2', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-footer.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { Snippet } from 'svelte';\n  import type { HTMLButtonAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    child,\n    ...restProps\n  }: WithElementRef<HTMLButtonAttributes> & {\n    child?: Snippet<[{ props: Record<string, unknown> }]>;\n  } = $props();\n\n  const mergedProps = $derived({\n    class: cn(\n      'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center border border-transparent p-0 text-muted-foreground/50 outline-hidden transition-colors hover:border-primary/50 hover:bg-muted hover:text-link focus-visible:ring-1 focus-visible:ring-ring/60 group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0',\n      className\n    ),\n    'data-slot': 'sidebar-group-action',\n    'data-sidebar': 'group-action',\n    ...restProps\n  });\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <button bind:this={ref} {...mergedProps}>\n    {@render children?.()}\n  </button>\n{/if}\n",
      "path": "sidebar/sidebar-group-action.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-group-content\"\n  data-sidebar=\"group-content\"\n  class={cn('w-full text-sm text-muted-foreground', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-group-content.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    children,\n    child,\n    class: className,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> & {\n    child?: Snippet<[{ props: Record<string, unknown> }]>;\n  } = $props();\n\n  const mergedProps = $derived({\n    class: cn(\n      'flex h-8 shrink-0 items-center px-3  text-xs font-medium   text-muted-foreground/50 outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-1 focus-visible:ring-ring/60 [&>svg]:size-3.5 [&>svg]:shrink-0',\n      className\n    ),\n    'data-slot': 'sidebar-group-label',\n    'data-sidebar': 'group-label',\n    ...restProps\n  });\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <div bind:this={ref} {...mergedProps}>\n    {@render children?.()}\n  </div>\n{/if}\n",
      "path": "sidebar/sidebar-group-label.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-group\"\n  data-sidebar=\"group\"\n  class={cn(\n    'relative flex w-full min-w-0 flex-col border-b border-border p-2 last:border-b-0',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-group.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-header\"\n  data-sidebar=\"header\"\n  class={cn('flex flex-col gap-2 border-b border-border p-2 [--radius:0]', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-header.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import type { ComponentProps } from 'svelte';\n  import { Input } from '$lib/components/ui/input/index.js';\n  import { cn } from '$lib/utils.js';\n\n  let {\n    ref = $bindable(null),\n    value = $bindable(''),\n    class: className,\n    ...restProps\n  }: ComponentProps<typeof Input> = $props();\n</script>\n\n<Input\n  bind:ref\n  bind:value\n  data-slot=\"sidebar-input\"\n  data-sidebar=\"input\"\n  class={cn(\n    'h-8 w-full border-border bg-muted  text-xs text-foreground shadow-[inset_0_0_0_1px_rgba(161,161,170,0.1)] placeholder:text-muted-foreground/50',\n    className\n  )}\n  {...restProps}\n/>\n",
      "path": "sidebar/sidebar-input.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/input/index.js",
          "item": "input",
          "file": {
            "type": "ui",
            "path": "input/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<main\n  bind:this={ref}\n  data-slot=\"sidebar-inset\"\n  class={cn(\n    'relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:border md:peer-data-[variant=inset]:border-border md:peer-data-[variant=inset]: md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</main>\n",
      "path": "sidebar/sidebar-inset.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { Snippet } from 'svelte';\n  import type { HTMLButtonAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    showOnHover = false,\n    children,\n    child,\n    ...restProps\n  }: WithElementRef<HTMLButtonAttributes> & {\n    child?: Snippet<[{ props: Record<string, unknown> }]>;\n    showOnHover?: boolean;\n  } = $props();\n\n  const mergedProps = $derived({\n    class: cn(\n      'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center border border-transparent p-0 text-muted-foreground/50 outline-hidden transition-colors hover:border-primary/50 hover:bg-muted hover:text-link focus-visible:ring-1 focus-visible:ring-ring/60 peer-hover/menu-button:text-link peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0',\n      showOnHover &&\n        'peer-data-active/menu-button:text-link group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 md:opacity-0',\n      className\n    ),\n    'data-slot': 'sidebar-menu-action',\n    'data-sidebar': 'menu-action',\n    ...restProps\n  });\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <button bind:this={ref} {...mergedProps}>\n    {@render children?.()}\n  </button>\n{/if}\n",
      "path": "sidebar/sidebar-menu-action.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-menu-badge\"\n  data-sidebar=\"menu-badge\"\n  class={cn(\n    'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center border border-border bg-muted px-1  text-[11px] font-medium tabular-nums text-muted-foreground select-none peer-hover/menu-button:text-link peer-data-active/menu-button:text-link peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 group-data-[collapsible=icon]:hidden',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-menu-badge.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\" module>\n  import { tv, type VariantProps } from 'tailwind-variants';\n\n  export const sidebarMenuButtonVariants = tv({\n    base: 'flex w-full items-center gap-2 overflow-hidden border border-transparent px-3 py-2 text-left  text-xs   text-muted-foreground outline-hidden transition-[width,height,padding,background-color,border-color,color] hover:border-primary/50 hover:bg-muted hover:text-foreground active:border-primary/50 active:bg-muted active:text-foreground data-active:border-primary/50 data-active:bg-muted data-active:text-link data-open:hover:border-primary/50 data-open:hover:bg-muted data-open:hover:text-foreground focus-visible:ring-1 focus-visible:ring-ring/60 data-active:font-medium group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! peer/menu-button group/menu-button disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',\n    variants: {\n      variant: {\n        default: '',\n        outline: 'border-border bg-popover  hover:border-primary/50'\n      },\n      size: {\n        default: 'h-9',\n        sm: 'h-8 text-xs',\n        lg: 'h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!'\n      }\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'default'\n    }\n  });\n\n  export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];\n  export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];\n</script>\n\n<script lang=\"ts\">\n  import * as Tooltip from '$lib/components/ui/tooltip/index.js';\n  import { cn, type WithElementRef, type WithoutChildrenOrChild } from '$lib/utils.js';\n  import { mergeProps } from 'bits-ui';\n  import type { ComponentProps, Snippet } from 'svelte';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { useSidebar } from './context.svelte.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    child,\n    variant = 'default',\n    size = 'default',\n    isActive = false,\n    tooltipContent,\n    tooltipContentProps,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n    isActive?: boolean;\n    variant?: SidebarMenuButtonVariant;\n    size?: SidebarMenuButtonSize;\n    tooltipContent?: Snippet | string;\n    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;\n    child?: Snippet<[{ props: Record<string, unknown> }]>;\n  } = $props();\n\n  const sidebar = useSidebar();\n\n  const buttonProps = $derived({\n    class: cn(sidebarMenuButtonVariants({ variant, size }), className),\n    'data-slot': 'sidebar-menu-button',\n    'data-sidebar': 'menu-button',\n    'data-size': size,\n    'data-active': isActive,\n    ...restProps\n  });\n</script>\n\n{#snippet Button({ props }: { props?: Record<string, unknown> })}\n  {@const mergedProps = mergeProps(buttonProps, props)}\n  {#if child}\n    {@render child({ props: mergedProps })}\n  {:else}\n    <button bind:this={ref} {...mergedProps}>\n      {@render children?.()}\n    </button>\n  {/if}\n{/snippet}\n\n{#if !tooltipContent}\n  {@render Button({})}\n{:else}\n  <Tooltip.Root>\n    <Tooltip.Trigger>\n      {#snippet child({ props })}\n        {@render Button({ props })}\n      {/snippet}\n    </Tooltip.Trigger>\n    <Tooltip.Content\n      side=\"right\"\n      align=\"center\"\n      hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}\n      {...tooltipContentProps}\n    >\n      {#if typeof tooltipContent === 'string'}\n        {tooltipContent}\n      {:else if tooltipContent}\n        {@render tooltipContent()}\n      {/if}\n    </Tooltip.Content>\n  </Tooltip.Root>\n{/if}\n",
      "path": "sidebar/sidebar-menu-button.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/tooltip/index.js",
          "item": "tooltip",
          "file": {
            "type": "ui",
            "path": "tooltip/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "./context.svelte.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/context.svelte.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props();\n</script>\n\n<li\n  bind:this={ref}\n  data-slot=\"sidebar-menu-item\"\n  data-sidebar=\"menu-item\"\n  class={cn('group/menu-item relative border-border/60', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "path": "sidebar/sidebar-menu-item.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import { Skeleton } from '$lib/components/ui/skeleton/index.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    showIcon = false,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLElement>> & {\n    showIcon?: boolean;\n  } = $props();\n\n  // Random width between 50% and 90%\n  const width = `${Math.floor(Math.random() * 40) + 50}%`;\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"sidebar-menu-skeleton\"\n  data-sidebar=\"menu-skeleton\"\n  class={cn('flex h-8 items-center gap-2 border border-transparent px-2', className)}\n  {...restProps}\n>\n  {#if showIcon}\n    <Skeleton class=\"size-3.5 rounded-none bg-muted\" data-sidebar=\"menu-skeleton-icon\" />\n  {/if}\n  <Skeleton\n    class=\"h-3 max-w-(--skeleton-width) flex-1 rounded-none bg-muted\"\n    data-sidebar=\"menu-skeleton-text\"\n    style=\"--skeleton-width: {width};\"\n  />\n  {@render children?.()}\n</div>\n",
      "path": "sidebar/sidebar-menu-skeleton.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/components/ui/skeleton/index.js",
          "item": "skeleton",
          "file": {
            "type": "ui",
            "path": "skeleton/index.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { Snippet } from 'svelte';\n  import type { HTMLAnchorAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    children,\n    child,\n    class: className,\n    size = 'md',\n    isActive = false,\n    ...restProps\n  }: WithElementRef<HTMLAnchorAttributes> & {\n    child?: Snippet<[{ props: Record<string, unknown> }]>;\n    size?: 'sm' | 'md';\n    isActive?: boolean;\n  } = $props();\n\n  const mergedProps = $derived({\n    class: cn(\n      'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden border border-transparent px-3  text-muted-foreground outline-hidden hover:border-primary/50 hover:bg-muted hover:text-foreground active:border-primary/50 active:bg-muted active:text-foreground data-active:border-primary/50 data-active:bg-muted data-active:text-link focus-visible:ring-1 focus-visible:ring-ring/60 data-[size=md]:text-xs data-[size=sm]:text-[11px] data-[size=md]: data-[size=sm]: data-[size=md]: data-[size=sm]: group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-link',\n      className\n    ),\n    'data-slot': 'sidebar-menu-sub-button',\n    'data-sidebar': 'menu-sub-button',\n    'data-size': size,\n    'data-active': isActive,\n    ...restProps\n  });\n</script>\n\n{#if child}\n  {@render child({ props: mergedProps })}\n{:else}\n  <a bind:this={ref} {...mergedProps}>\n    {@render children?.()}\n  </a>\n{/if}\n",
      "path": "sidebar/sidebar-menu-sub-button.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    children,\n    class: className,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props();\n</script>\n\n<li\n  bind:this={ref}\n  data-slot=\"sidebar-menu-sub-item\"\n  data-sidebar=\"menu-sub-item\"\n  class={cn('group/menu-sub-item relative border-border/60', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</li>\n",
      "path": "sidebar/sidebar-menu-sub-item.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props();\n</script>\n\n<ul\n  bind:this={ref}\n  data-slot=\"sidebar-menu-sub\"\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-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n</ul>\n",
      "path": "sidebar/sidebar-menu-sub.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props();\n</script>\n\n<ul\n  bind:this={ref}\n  data-slot=\"sidebar-menu\"\n  data-sidebar=\"menu\"\n  class={cn('flex w-full min-w-0 flex-col gap-0.5', className)}\n  {...restProps}\n>\n  {@render children?.()}\n</ul>\n",
      "path": "sidebar/sidebar-menu.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import * as Tooltip from '$lib/components/ui/tooltip/index.js';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import {\n    SIDEBAR_COOKIE_MAX_AGE,\n    SIDEBAR_COOKIE_NAME,\n    SIDEBAR_WIDTH,\n    SIDEBAR_WIDTH_ICON\n  } from './constants.js';\n  import { setSidebar } from './context.svelte.js';\n\n  let {\n    ref = $bindable(null),\n    open = $bindable(true),\n    onOpenChange = () => {},\n    class: className,\n    style,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    open?: boolean;\n    onOpenChange?: (open: boolean) => void;\n  } = $props();\n\n  const sidebar = setSidebar({\n    open: () => open,\n    setOpen: (value: boolean) => {\n      open = value;\n      onOpenChange(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</script>\n\n<svelte:window onkeydown={sidebar.handleShortcutKeydown} />\n\n<Tooltip.Provider delayDuration={0}>\n  <div\n    data-slot=\"sidebar-wrapper\"\n    style=\"--sidebar-width: {SIDEBAR_WIDTH}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style}\"\n    class={cn(\n      'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-popover',\n      className\n    )}\n    bind:this={ref}\n    {...restProps}\n  >\n    {@render children?.()}\n  </div>\n</Tooltip.Provider>\n",
      "path": "sidebar/sidebar-provider.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/tooltip/index.js",
          "item": "tooltip",
          "file": {
            "type": "ui",
            "path": "tooltip/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "./constants.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/constants.ts"
          },
          "meta": {}
        },
        {
          "import": "./context.svelte.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/context.svelte.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { useSidebar } from './context.svelte.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();\n\n  const sidebar = useSidebar();\n</script>\n\n<button\n  bind:this={ref}\n  data-sidebar=\"rail\"\n  data-slot=\"sidebar-rail\"\n  aria-label=\"Toggle Sidebar\"\n  tabindex={-1}\n  onclick={sidebar.toggle}\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 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 after:bg-border hover:after:bg-primary 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-muted 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  {...restProps}\n>\n  {@render children?.()}\n</button>\n",
      "path": "sidebar/sidebar-rail.svelte",
      "_imports_": [
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "./context.svelte.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/context.svelte.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Separator } from '$lib/components/ui/separator/index.js';\n  import { cn } from '$lib/utils.js';\n  import type { ComponentProps } from 'svelte';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: ComponentProps<typeof Separator> = $props();\n</script>\n\n<Separator\n  bind:ref\n  data-slot=\"sidebar-separator\"\n  data-sidebar=\"separator\"\n  class={cn('mx-2 w-auto bg-border', className)}\n  {...restProps}\n/>\n",
      "path": "sidebar/sidebar-separator.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/separator/index.js",
          "item": "separator",
          "file": {
            "type": "ui",
            "path": "separator/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import { Button } from '$lib/components/ui/button/index.js';\n  import SidebarIcon from 'phosphor-svelte/lib/SidebarIcon';\n  import { cn } from '$lib/utils.js';\n  import type { ComponentProps } from 'svelte';\n  import { useSidebar } from './context.svelte.js';\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    onclick,\n    ...restProps\n  }: ComponentProps<typeof Button> & {\n    onclick?: (e: MouseEvent) => void;\n  } = $props();\n\n  const sidebar = useSidebar();\n</script>\n\n<Button\n  bind:ref\n  data-sidebar=\"trigger\"\n  data-slot=\"sidebar-trigger\"\n  variant=\"ghost\"\n  size=\"icon-sm\"\n  class={cn(\n    'cn-sidebar-trigger rounded-none border border-border bg-popover text-muted-foreground hover:bg-muted hover:text-foreground',\n    className\n  )}\n  type=\"button\"\n  onclick={(e) => {\n    onclick?.(e);\n    sidebar.toggle();\n  }}\n  {...restProps}\n>\n  <SidebarIcon />\n  <span class=\"sr-only\">Toggle Sidebar</span>\n</Button>\n",
      "path": "sidebar/sidebar-trigger.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/button/index.js",
          "item": "button",
          "file": {
            "type": "ui",
            "path": "button/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "./context.svelte.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/context.svelte.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    },
    {
      "type": "ui",
      "role": "file",
      "content": "<script lang=\"ts\">\n  import * as Sheet from '$lib/components/ui/sheet/index.js';\n  import { cn, type WithElementRef } from '$lib/utils.js';\n  import type { HTMLAttributes } from 'svelte/elements';\n  import { SIDEBAR_WIDTH_MOBILE } from './constants.js';\n  import { useSidebar } from './context.svelte.js';\n\n  let {\n    ref = $bindable(null),\n    side = 'left',\n    variant = 'sidebar',\n    collapsible = 'offcanvas',\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {\n    side?: 'left' | 'right';\n    variant?: 'sidebar' | 'floating' | 'inset';\n    collapsible?: 'offcanvas' | 'icon' | 'none';\n  } = $props();\n\n  const sidebar = useSidebar();\n</script>\n\n{#if collapsible === 'none'}\n  <div\n    class={cn(\n      'flex h-full w-(--sidebar-width) flex-col border-r border-border bg-popover text-foreground',\n      className\n    )}\n    bind:this={ref}\n    {...restProps}\n  >\n    {@render children?.()}\n  </div>\n{:else if sidebar.isMobile}\n  <Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>\n    <Sheet.Content\n      bind:ref\n      data-sidebar=\"sidebar\"\n      data-slot=\"sidebar\"\n      data-mobile=\"true\"\n      class={cn(\n        'w-(--sidebar-width) border-r border-border bg-popover p-0 text-foreground [&>button]:hidden',\n        className\n      )}\n      style=\"--sidebar-width: {SIDEBAR_WIDTH_MOBILE};\"\n      {side}\n    >\n      <Sheet.Header class=\"sr-only\">\n        <Sheet.Title>Sidebar</Sheet.Title>\n        <Sheet.Description>Displays the mobile sidebar.</Sheet.Description>\n      </Sheet.Header>\n      <div class=\"flex h-full w-full flex-col\">\n        {@render children?.()}\n      </div>\n    </Sheet.Content>\n  </Sheet.Root>\n{:else}\n  <div\n    bind:this={ref}\n    class=\"group peer hidden text-foreground md:block\"\n    data-state={sidebar.state}\n    data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}\n    data-variant={variant}\n    data-side={side}\n    data-slot=\"sidebar\"\n  >\n    <!-- This is what handles the sidebar gap on desktop -->\n    <div\n      data-slot=\"sidebar-gap\"\n      class={cn(\n        'transition-[width] duration-200 ease-linear relative w-(--sidebar-width) bg-transparent',\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      data-slot=\"sidebar-container\"\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          ? 'start-0 group-data-[collapsible=offcanvas]:start-[calc(var(--sidebar-width)*-1)]'\n          : 'end-0 group-data-[collapsible=offcanvas]:end-[calc(var(--sidebar-width)*-1)]',\n        // Adjust the padding for floating and inset variants.\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-e group-data-[side=right]:border-s',\n        className\n      )}\n      {...restProps}\n    >\n      <div\n        data-sidebar=\"sidebar\"\n        data-slot=\"sidebar-inner\"\n        class=\"flex size-full flex-col bg-popover group-data-[variant=floating]:border group-data-[variant=floating]:border-border\"\n      >\n        {@render children?.()}\n      </div>\n    </div>\n  </div>\n{/if}\n",
      "path": "sidebar/sidebar.svelte",
      "_imports_": [
        {
          "import": "$lib/components/ui/sheet/index.js",
          "item": "sheet",
          "file": {
            "type": "ui",
            "path": "sheet/index.ts"
          },
          "meta": {}
        },
        {
          "import": "$lib/utils.js",
          "item": "utils",
          "file": {
            "type": "lib",
            "path": "utils.ts"
          },
          "meta": {}
        },
        {
          "import": "./constants.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/constants.ts"
          },
          "meta": {}
        },
        {
          "import": "./context.svelte.js",
          "item": "sidebar",
          "file": {
            "type": "ui",
            "path": "sidebar/context.svelte.ts"
          },
          "meta": {}
        }
      ],
      "registryDependencies": [],
      "dependencies": [],
      "devDependencies": []
    }
  ],
  "registryDependencies": [
    "styles",
    "is-mobile",
    "utils",
    "input",
    "tooltip",
    "skeleton",
    "separator",
    "button",
    "sheet"
  ],
  "dependencies": [
    {
      "ecosystem": "js",
      "name": "tailwind-variants",
      "version": "^3.2.2"
    },
    {
      "ecosystem": "js",
      "name": "bits-ui",
      "version": "^2.18.1"
    },
    {
      "ecosystem": "js",
      "name": "phosphor-svelte",
      "version": "^3.1.0"
    }
  ],
  "devDependencies": []
}