@invopop/popui 0.1.96 → 0.1.98

package/dist/sidebar/sidebar-inset.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
+</script>
+
+<main
+  bind:this={ref}
+  data-slot="sidebar-inset"
+  class={cn(
+    'bg-background relative flex w-full flex-1 flex-col 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-[state=collapsed]:peer-data-[variant=inset]:ml-2',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</main>

package/dist/sidebar/sidebar-inset.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarInset: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarInset = ReturnType<typeof SidebarInset>;
+export default SidebarInset;

package/dist/sidebar/sidebar-menu-action.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    showOnHover = false,
+    children,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+    showOnHover?: boolean
+  } = $props()
+
+  const mergedProps = $derived({
+    class: cn(
+      '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 group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5',
+      showOnHover &&
+        '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',
+      className
+    ),
+    'data-slot': 'sidebar-menu-action',
+    'data-sidebar': 'menu-action',
+    ...restProps
+  })
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

package/dist/sidebar/sidebar-menu-action.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    showOnHover?: boolean;
+};
+declare const SidebarMenuAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuAction = ReturnType<typeof SidebarMenuAction>;
+export default SidebarMenuAction;

package/dist/sidebar/sidebar-menu-badge.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-menu-badge"
+  data-sidebar="menu-badge"
+  class={cn(
+    'text-sidebar-foreground peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-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 group-data-[collapsible=icon]:hidden peer-data-[size=sm]/menu-button:top-1 peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/sidebar/sidebar-menu-badge.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenuBadge: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLElement>>, {}, "ref">;
+type SidebarMenuBadge = ReturnType<typeof SidebarMenuBadge>;
+export default SidebarMenuBadge;

package/dist/sidebar/sidebar-menu-button.svelte

@@ -0,0 +1,102 @@
+<script lang="ts" module>
+  import { tv, type VariantProps } from 'tailwind-variants'
+
+  export const sidebarMenuButtonVariants = tv({
+    base: 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+    variants: {
+      variant: {
+        default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
+        outline:
+          'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]'
+      },
+      size: {
+        default: 'h-8 text-sm',
+        sm: 'h-7 text-xs',
+        lg: 'h-12 text-sm group-data-[collapsible=icon]:!p-0'
+      }
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default'
+    }
+  })
+
+  export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant']
+  export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size']
+</script>
+
+<script lang="ts">
+  import { Tooltip as TooltipPrimitive } from 'bits-ui'
+  import { mergeProps } from 'svelte-toolbelt'
+  import type { ComponentProps, Snippet } from 'svelte'
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import TooltipContent from '../tooltip/tooltip-content.svelte'
+  import { cn, type WithElementRef, type WithoutChildrenOrChild } from '../utils.js'
+  import { useSidebar } from './context.svelte.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    child,
+    variant = 'default',
+    size = 'default',
+    isActive = false,
+    tooltipContent,
+    tooltipContentProps,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    isActive?: boolean
+    variant?: SidebarMenuButtonVariant
+    size?: SidebarMenuButtonSize
+    tooltipContent?: Snippet | string
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipContent>>
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  } = $props()
+
+  const sidebar = useSidebar()
+
+  const buttonProps = $derived({
+    class: cn(sidebarMenuButtonVariants({ variant, size }), className),
+    'data-slot': 'sidebar-menu-button',
+    'data-sidebar': 'menu-button',
+    'data-size': size,
+    'data-active': isActive,
+    ...restProps
+  })
+</script>
+
+{#snippet Button({ props }: { props?: Record<string, unknown> })}
+  {@const mergedProps = mergeProps(buttonProps, props)}
+  {#if child}
+    {@render child({ props: mergedProps })}
+  {:else}
+    <button bind:this={ref} {...mergedProps}>
+      {@render children?.()}
+    </button>
+  {/if}
+{/snippet}
+
+{#if !tooltipContent}
+  {@render Button({})}
+{:else}
+  <TooltipPrimitive.Root>
+    <TooltipPrimitive.Trigger>
+      {#snippet child({ props })}
+        {@render Button({ props })}
+      {/snippet}
+    </TooltipPrimitive.Trigger>
+    <TooltipContent
+      side="right"
+      align="center"
+      hidden={sidebar.state !== 'collapsed' || sidebar.isMobile}
+      {...tooltipContentProps}
+    >
+      {#if typeof tooltipContent === 'string'}
+        {tooltipContent}
+      {:else if tooltipContent}
+        {@render tooltipContent()}
+      {/if}
+    </TooltipContent>
+  </TooltipPrimitive.Root>
+{/if}

package/dist/sidebar/sidebar-menu-button.svelte.d.ts

@@ -0,0 +1,51 @@
+import { type VariantProps } from 'tailwind-variants';
+export declare const sidebarMenuButtonVariants: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        outline: string;
+    };
+    size: {
+        default: string;
+        sm: string;
+        lg: string;
+    };
+}, undefined, "peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", unknown, unknown, undefined>>;
+export type SidebarMenuButtonVariant = VariantProps<typeof sidebarMenuButtonVariants>['variant'];
+export type SidebarMenuButtonSize = VariantProps<typeof sidebarMenuButtonVariants>['size'];
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import TooltipContent from '../tooltip/tooltip-content.svelte';
+import { type WithElementRef, type WithoutChildrenOrChild } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes, HTMLButtonElement> & {
+    isActive?: boolean;
+    variant?: SidebarMenuButtonVariant;
+    size?: SidebarMenuButtonSize;
+    tooltipContent?: Snippet | string;
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof TooltipContent>>;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarMenuButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuButton = ReturnType<typeof SidebarMenuButton>;
+export default SidebarMenuButton;

package/dist/sidebar/sidebar-menu-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement> = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-item"
+  data-sidebar="menu-item"
+  class={cn('group/menu-item relative', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</li>

package/dist/sidebar/sidebar-menu-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenuItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLLIElement>, HTMLLIElement>, {}, "ref">;
+type SidebarMenuItem = ReturnType<typeof SidebarMenuItem>;
+export default SidebarMenuItem;

package/dist/sidebar/sidebar-menu-skeleton.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+  import { Skeleton } from '../skeleton/index.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    showIcon = false,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    showIcon?: boolean
+  } = $props()
+
+  const width = `${Math.floor(Math.random() * 40) + 50}%`
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-menu-skeleton"
+  data-sidebar="menu-skeleton"
+  class={cn('flex h-8 items-center gap-2 rounded-md px-2', className)}
+  {...restProps}
+>
+  {#if showIcon}
+    <Skeleton class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+  {/if}
+  <Skeleton
+    class="h-4 max-w-(--skeleton-width) flex-1"
+    data-sidebar="menu-skeleton-text"
+    style="--skeleton-width: {width};"
+  />
+  {@render children?.()}
+</div>

package/dist/sidebar/sidebar-menu-skeleton.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    showIcon?: boolean;
+};
+declare const SidebarMenuSkeleton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuSkeleton = ReturnType<typeof SidebarMenuSkeleton>;
+export default SidebarMenuSkeleton;

package/dist/sidebar/sidebar-menu-sub-button.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAnchorAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    children,
+    child,
+    class: className,
+    size = 'md',
+    isActive = false,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+    size?: 'sm' | 'md'
+    isActive?: boolean
+  } = $props()
+
+  const mergedProps = $derived({
+    class: cn(
+      '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 data-[active=true]:bg-sidebar-accent data-[active=true]: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 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-4 [&>svg]:shrink-0 data-[size=md]:text-sm data-[size=sm]:text-xs',
+      className
+    ),
+    'data-slot': 'sidebar-menu-sub-button',
+    'data-sidebar': 'menu-sub-button',
+    'data-size': size,
+    'data-active': isActive,
+    ...restProps
+  })
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <a bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </a>
+{/if}

package/dist/sidebar/sidebar-menu-sub-button.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+};
+declare const SidebarMenuSubButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuSubButton = ReturnType<typeof SidebarMenuSubButton>;
+export default SidebarMenuSubButton;

package/dist/sidebar/sidebar-menu-sub-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    children,
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLLIElement>> = $props()
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="sidebar-menu-sub-item"
+  data-sidebar="menu-sub-item"
+  class={cn('group/menu-sub-item relative', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</li>

package/dist/sidebar/sidebar-menu-sub-item.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenuSubItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLLIElement>>, {}, "ref">;
+type SidebarMenuSubItem = ReturnType<typeof SidebarMenuSubItem>;
+export default SidebarMenuSubItem;

package/dist/sidebar/sidebar-menu-sub.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLUListElement>> = $props()
+</script>
+
+<ul
+  bind:this={ref}
+  data-slot="sidebar-menu-sub"
+  data-sidebar="menu-sub"
+  class={cn(
+    'border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</ul>

package/dist/sidebar/sidebar-menu-sub.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenuSub: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>>, {}, "ref">;
+type SidebarMenuSub = ReturnType<typeof SidebarMenuSub>;
+export default SidebarMenuSub;

package/dist/sidebar/sidebar-menu.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement> = $props()
+</script>
+
+<ul
+  bind:this={ref}
+  data-slot="sidebar-menu"
+  data-sidebar="menu"
+  class={cn('flex w-full min-w-0 flex-col gap-1', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</ul>

package/dist/sidebar/sidebar-menu.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+declare const SidebarMenu: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLUListElement>, HTMLUListElement>, {}, "ref">;
+type SidebarMenu = ReturnType<typeof SidebarMenu>;
+export default SidebarMenu;

package/dist/sidebar/sidebar-provider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements'
+  import * as Tooltip from '../tooltip/index.js'
+  import { cn, type WithElementRef } from '../utils.js'
+  import { SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_WIDTH_ICON } from './constants.js'
+  import { setSidebar } from './context.svelte.js'
+
+  let {
+    ref = $bindable(null),
+    open = $bindable(true),
+    onOpenChange = () => {},
+    class: className,
+    style,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean
+    onOpenChange?: (open: boolean) => void
+  } = $props()
+
+  const sidebar = setSidebar({
+    open: () => open,
+    setOpen: (value: boolean) => {
+      open = value
+      onOpenChange(value)
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${open}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    }
+  })
+</script>
+
+<svelte:window onkeydown={sidebar.handleShortcutKeydown} />
+
+<Tooltip.Provider delayDuration={0}>
+  <div
+    data-slot="sidebar-wrapper"
+    style="--sidebar-width: {sidebar.width}; --sidebar-width-icon: {SIDEBAR_WIDTH_ICON}; {style ??
+      ''}"
+    class={cn(
+      'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
+      className
+    )}
+    bind:this={ref}
+    {...restProps}
+  >
+    {@render children?.()}
+  </div>
+</Tooltip.Provider>

package/dist/sidebar/sidebar-provider.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../utils.js';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+};
+declare const SidebarProvider: import("svelte").Component<$$ComponentProps, {}, "open" | "ref">;
+type SidebarProvider = ReturnType<typeof SidebarProvider>;
+export default SidebarProvider;