@invopop/popui 0.1.96 → 0.1.98

package/dist/sheet/sheet-content.svelte.d.ts

@@ -0,0 +1,15 @@
+export type Side = 'top' | 'right' | 'bottom' | 'left';
+import { Dialog as SheetPrimitive } from 'bits-ui';
+import type { Snippet } from 'svelte';
+import SheetPortal from './sheet-portal.svelte';
+import { type WithoutChildrenOrChild } from '../utils.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SheetPortal>>;
+    side?: Side;
+    showCloseButton?: boolean;
+    children: Snippet;
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

package/dist/sheet/sheet-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.DescriptionProps = $props()
+</script>
+
+<SheetPrimitive.Description
+  bind:ref
+  data-slot="sheet-description"
+  class={cn('text-foreground-secondary text-sm', className)}
+  {...restProps}
+/>

package/dist/sheet/sheet-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetDescription: import("svelte").Component<SheetPrimitive.DescriptionProps, {}, "ref">;
+type SheetDescription = ReturnType<typeof SheetDescription>;
+export default SheetDescription;

package/dist/sheet/sheet-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../utils.js'
+  import type { HTMLAttributes } from 'svelte/elements'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-footer"
+  class={cn('mt-auto flex flex-col gap-2 p-4', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/sheet/sheet-footer.svelte.d.ts

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

package/dist/sheet/sheet-header.svelte

@@ -0,0 +1,20 @@
+<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<HTMLDivElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sheet-header"
+  class={cn('flex flex-col gap-1.5 p-4', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/sheet/sheet-header.svelte.d.ts

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

package/dist/sheet/sheet-overlay.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.OverlayProps = $props()
+</script>
+
+<SheetPrimitive.Overlay
+  bind:ref
+  data-slot="sheet-overlay"
+  class={cn(
+    'fixed inset-0 z-50 bg-black/10 supports-[backdrop-filter]:backdrop-blur-xs',
+    className
+  )}
+  {...restProps}
+/>

package/dist/sheet/sheet-overlay.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetOverlay: import("svelte").Component<SheetPrimitive.OverlayProps, {}, "ref">;
+type SheetOverlay = ReturnType<typeof SheetOverlay>;
+export default SheetOverlay;

package/dist/sheet/sheet-portal.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  let { ...restProps }: SheetPrimitive.PortalProps = $props()
+</script>
+
+<SheetPrimitive.Portal {...restProps} />

package/dist/sheet/sheet-portal.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const SheetPortal: import("svelte").Component<import("bits-ui").PortalProps, {}, "">;
+type SheetPortal = ReturnType<typeof SheetPortal>;
+export default SheetPortal;

package/dist/sheet/sheet-title.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+  import { cn } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: SheetPrimitive.TitleProps = $props()
+</script>
+
+<SheetPrimitive.Title
+  bind:ref
+  data-slot="sheet-title"
+  class={cn('text-foreground font-medium', className)}
+  {...restProps}
+/>

package/dist/sheet/sheet-title.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetTitle: import("svelte").Component<SheetPrimitive.TitleProps, {}, "ref">;
+type SheetTitle = ReturnType<typeof SheetTitle>;
+export default SheetTitle;

package/dist/sheet/sheet-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  let { ref = $bindable(null), ...restProps }: SheetPrimitive.TriggerProps = $props()
+</script>
+
+<SheetPrimitive.Trigger bind:ref data-slot="sheet-trigger" {...restProps} />

package/dist/sheet/sheet-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Dialog as SheetPrimitive } from 'bits-ui';
+declare const SheetTrigger: import("svelte").Component<SheetPrimitive.TriggerProps, {}, "ref">;
+type SheetTrigger = ReturnType<typeof SheetTrigger>;
+export default SheetTrigger;

package/dist/sheet/sheet.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+  import { Dialog as SheetPrimitive } from 'bits-ui'
+
+  let { open = $bindable(false), ...restProps }: SheetPrimitive.RootProps = $props()
+</script>
+
+<SheetPrimitive.Root bind:open {...restProps} />

package/dist/sheet/sheet.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const Sheet: import("svelte").Component<import("bits-ui").AlertDialogRootPropsWithoutHTML, {}, "open">;
+type Sheet = ReturnType<typeof Sheet>;
+export default Sheet;

package/dist/sidebar/constants.d.ts

@@ -0,0 +1,10 @@
+export declare const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export declare const SIDEBAR_WIDTH_STORAGE_KEY = "sidebar_width";
+export declare const SIDEBAR_COOKIE_MAX_AGE: number;
+export declare const SIDEBAR_WIDTH = "16rem";
+export declare const SIDEBAR_WIDTH_MOBILE = "18rem";
+export declare const SIDEBAR_WIDTH_ICON = "3rem";
+export declare const SIDEBAR_KEYBOARD_SHORTCUT = ".";
+export declare const SIDEBAR_MIN_WIDTH_PX = 240;
+export declare const SIDEBAR_MAX_WIDTH_PX = 384;
+export declare const SIDEBAR_DRAG_THRESHOLD_PX = 4;

package/dist/sidebar/constants.js

@@ -0,0 +1,10 @@
+export const SIDEBAR_COOKIE_NAME = 'sidebar_state';
+export const SIDEBAR_WIDTH_STORAGE_KEY = 'sidebar_width';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '16rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '3rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = '.';
+export const SIDEBAR_MIN_WIDTH_PX = 240;
+export const SIDEBAR_MAX_WIDTH_PX = 384;
+export const SIDEBAR_DRAG_THRESHOLD_PX = 4;

package/dist/sidebar/context.svelte.d.ts

@@ -0,0 +1,23 @@
+type Getter<T> = () => T;
+export type SidebarStateProps = {
+    open: Getter<boolean>;
+    setOpen: (open: boolean) => void;
+};
+declare class SidebarState {
+    #private;
+    readonly props: SidebarStateProps;
+    open: boolean;
+    openMobile: boolean;
+    width: string;
+    setOpen: SidebarStateProps['setOpen'];
+    state: string;
+    constructor(props: SidebarStateProps);
+    get isMobile(): boolean;
+    setWidth: (px: number) => void;
+    handleShortcutKeydown: (e: KeyboardEvent) => void;
+    setOpenMobile: (value: boolean) => void;
+    toggle: () => boolean | void;
+}
+export declare function setSidebar(props: SidebarStateProps): SidebarState;
+export declare function useSidebar(): SidebarState;
+export {};

package/dist/sidebar/context.svelte.js

@@ -0,0 +1,58 @@
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_MAX_WIDTH_PX, SIDEBAR_MIN_WIDTH_PX, SIDEBAR_WIDTH, SIDEBAR_WIDTH_STORAGE_KEY } from './constants.js';
+import { IsMobile } from './is-mobile.svelte.js';
+class SidebarState {
+    props;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    width = $state(SIDEBAR_WIDTH);
+    setOpen;
+    #isMobile;
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+    constructor(props) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+        if (typeof localStorage !== 'undefined') {
+            const stored = localStorage.getItem(SIDEBAR_WIDTH_STORAGE_KEY);
+            if (stored)
+                this.width = stored;
+        }
+    }
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+    setWidth = (px) => {
+        const clamped = Math.max(SIDEBAR_MIN_WIDTH_PX, Math.min(SIDEBAR_MAX_WIDTH_PX, px));
+        this.width = `${clamped}px`;
+        if (typeof localStorage !== 'undefined') {
+            try {
+                localStorage.setItem(SIDEBAR_WIDTH_STORAGE_KEY, this.width);
+            }
+            catch {
+                // ignore quota / private-mode errors
+            }
+        }
+    };
+    handleShortcutKeydown = (e) => {
+        if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this.toggle();
+        }
+    };
+    setOpenMobile = (value) => {
+        this.openMobile = value;
+    };
+    toggle = () => {
+        return this.#isMobile.current
+            ? (this.openMobile = !this.openMobile)
+            : this.setOpen(!this.open);
+    };
+}
+const SYMBOL_KEY = 'scn-sidebar';
+export function setSidebar(props) {
+    return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+export function useSidebar() {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}

package/dist/sidebar/index.d.ts

@@ -0,0 +1,25 @@
+import { useSidebar } from './context.svelte.js';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Group from './sidebar-group.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import MenuAction from './sidebar-menu-action.svelte';
+import MenuBadge from './sidebar-menu-badge.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuSkeleton from './sidebar-menu-skeleton.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.svelte';
+import MenuSub from './sidebar-menu-sub.svelte';
+import Menu from './sidebar-menu.svelte';
+import Provider from './sidebar-provider.svelte';
+import Rail from './sidebar-rail.svelte';
+import Separator from './sidebar-separator.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Root from './sidebar.svelte';
+export { Content, Footer, Group, GroupAction, GroupContent, GroupLabel, Header, Input, Inset, Menu, MenuAction, MenuBadge, MenuButton, MenuItem, MenuSkeleton, MenuSub, MenuSubButton, MenuSubItem, Provider, Rail, Root, Separator, Trigger, Root as Sidebar, Content as SidebarContent, Footer as SidebarFooter, Group as SidebarGroup, GroupAction as SidebarGroupAction, GroupContent as SidebarGroupContent, GroupLabel as SidebarGroupLabel, Header as SidebarHeader, Input as SidebarInput, Inset as SidebarInset, Menu as SidebarMenu, MenuAction as SidebarMenuAction, MenuBadge as SidebarMenuBadge, MenuButton as SidebarMenuButton, MenuItem as SidebarMenuItem, MenuSkeleton as SidebarMenuSkeleton, MenuSub as SidebarMenuSub, MenuSubButton as SidebarMenuSubButton, MenuSubItem as SidebarMenuSubItem, Provider as SidebarProvider, Rail as SidebarRail, Separator as SidebarSeparator, Trigger as SidebarTrigger, useSidebar };

package/dist/sidebar/index.js

@@ -0,0 +1,27 @@
+import { useSidebar } from './context.svelte.js';
+import Content from './sidebar-content.svelte';
+import Footer from './sidebar-footer.svelte';
+import GroupAction from './sidebar-group-action.svelte';
+import GroupContent from './sidebar-group-content.svelte';
+import GroupLabel from './sidebar-group-label.svelte';
+import Group from './sidebar-group.svelte';
+import Header from './sidebar-header.svelte';
+import Input from './sidebar-input.svelte';
+import Inset from './sidebar-inset.svelte';
+import MenuAction from './sidebar-menu-action.svelte';
+import MenuBadge from './sidebar-menu-badge.svelte';
+import MenuButton from './sidebar-menu-button.svelte';
+import MenuItem from './sidebar-menu-item.svelte';
+import MenuSkeleton from './sidebar-menu-skeleton.svelte';
+import MenuSubButton from './sidebar-menu-sub-button.svelte';
+import MenuSubItem from './sidebar-menu-sub-item.svelte';
+import MenuSub from './sidebar-menu-sub.svelte';
+import Menu from './sidebar-menu.svelte';
+import Provider from './sidebar-provider.svelte';
+import Rail from './sidebar-rail.svelte';
+import Separator from './sidebar-separator.svelte';
+import Trigger from './sidebar-trigger.svelte';
+import Root from './sidebar.svelte';
+export { Content, Footer, Group, GroupAction, GroupContent, GroupLabel, Header, Input, Inset, Menu, MenuAction, MenuBadge, MenuButton, MenuItem, MenuSkeleton, MenuSub, MenuSubButton, MenuSubItem, Provider, Rail, Root, Separator, Trigger, 
+//
+Root as Sidebar, Content as SidebarContent, Footer as SidebarFooter, Group as SidebarGroup, GroupAction as SidebarGroupAction, GroupContent as SidebarGroupContent, GroupLabel as SidebarGroupLabel, Header as SidebarHeader, Input as SidebarInput, Inset as SidebarInset, Menu as SidebarMenu, MenuAction as SidebarMenuAction, MenuBadge as SidebarMenuBadge, MenuButton as SidebarMenuButton, MenuItem as SidebarMenuItem, MenuSkeleton as SidebarMenuSkeleton, MenuSub as SidebarMenuSub, MenuSubButton as SidebarMenuSubButton, MenuSubItem as SidebarMenuSubItem, Provider as SidebarProvider, Rail as SidebarRail, Separator as SidebarSeparator, Trigger as SidebarTrigger, useSidebar };

package/dist/sidebar/is-mobile.svelte.d.ts

@@ -0,0 +1,4 @@
+import { MediaQuery } from 'svelte/reactivity';
+export declare class IsMobile extends MediaQuery {
+    constructor(breakpoint?: number);
+}

package/dist/sidebar/is-mobile.svelte.js

@@ -0,0 +1,7 @@
+import { MediaQuery } from 'svelte/reactivity';
+const DEFAULT_MOBILE_BREAKPOINT = 768;
+export class IsMobile extends MediaQuery {
+    constructor(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+        super(`max-width: ${breakpoint - 1}px`);
+    }
+}

package/dist/sidebar/sidebar-content.svelte

@@ -0,0 +1,25 @@
+<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-content"
+  data-sidebar="content"
+  class={cn(
+    'flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
+    '[&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/sidebar/sidebar-footer.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<HTMLElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-footer"
+  data-sidebar="footer"
+  class={cn('flex flex-col gap-2 p-2', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

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

@@ -0,0 +1,33 @@
+<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,
+    children,
+    child,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  } = $props()
+
+  const mergedProps = $derived({
+    class: cn(
+      '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 group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden',
+      className
+    ),
+    'data-slot': 'sidebar-group-action',
+    'data-sidebar': 'group-action',
+    ...restProps
+  })
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <button bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </button>
+{/if}

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

@@ -0,0 +1,11 @@
+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>;
+    }]>;
+};
+declare const SidebarGroupAction: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarGroupAction = ReturnType<typeof SidebarGroupAction>;
+export default SidebarGroupAction;

package/dist/sidebar/sidebar-group-content.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<HTMLDivElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group-content"
+  data-sidebar="group-content"
+  class={cn('w-full text-sm', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

package/dist/sidebar/sidebar-group-content.svelte.d.ts

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

package/dist/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte'
+  import type { HTMLAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    children,
+    child,
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    child?: Snippet<[{ props: Record<string, unknown> }]>
+  } = $props()
+
+  const mergedProps = $derived({
+    class: cn(
+      'text-sidebar-foreground/70 ring-sidebar-ring 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 group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+      className
+    ),
+    'data-slot': 'sidebar-group-label',
+    'data-sidebar': 'group-label',
+    ...restProps
+  })
+</script>
+
+{#if child}
+  {@render child({ props: mergedProps })}
+{:else}
+  <div bind:this={ref} {...mergedProps}>
+    {@render children?.()}
+  </div>
+{/if}

package/dist/sidebar/sidebar-group-label.svelte.d.ts

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

package/dist/sidebar/sidebar-group.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<HTMLElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-group"
+  data-sidebar="group"
+  class={cn('relative flex w-full min-w-0 flex-col p-2', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/sidebar/sidebar-header.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<HTMLElement>> = $props()
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="sidebar-header"
+  data-sidebar="header"
+  class={cn('flex flex-col gap-2 p-2', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

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

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

package/dist/sidebar/sidebar-input.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLInputAttributes } from 'svelte/elements'
+  import { cn, type WithElementRef } from '../utils.js'
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLInputAttributes, HTMLInputElement> = $props()
+</script>
+
+<input
+  bind:this={ref}
+  bind:value
+  data-slot="sidebar-input"
+  data-sidebar="input"
+  class={cn(
+    'bg-background border-input flex h-8 w-full rounded-md border px-3 py-1 text-sm shadow-none transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-foreground-secondary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sidebar-ring disabled:cursor-not-allowed disabled:opacity-50',
+    className
+  )}
+  {...restProps}
+/>

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

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