@tanglemedia/svelte-starter-ui-shadcn 0.0.1

package/dist/lib/components/ui/sheet/index.js

@@ -0,0 +1,14 @@
+import { Dialog as SheetPrimitive } from "bits-ui";
+import Overlay from "./sheet-overlay.svelte";
+import Content from "./sheet-content.svelte";
+import Header from "./sheet-header.svelte";
+import Footer from "./sheet-footer.svelte";
+import Title from "./sheet-title.svelte";
+import Description from "./sheet-description.svelte";
+const Root = SheetPrimitive.Root;
+const Close = SheetPrimitive.Close;
+const Trigger = SheetPrimitive.Trigger;
+const Portal = SheetPrimitive.Portal;
+export { Root, Close, Trigger, Portal, Overlay, Content, Header, Footer, Title, Description, 
+//
+Root as Sheet, Close as SheetClose, Trigger as SheetTrigger, Portal as SheetPortal, Overlay as SheetOverlay, Content as SheetContent, Header as SheetHeader, Footer as SheetFooter, Title as SheetTitle, Description as SheetDescription, };

package/dist/lib/components/ui/sheet/sheet-content.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const sheetVariants = tv({
+		base: "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+		variants: {
+			side: {
+				top: "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 border-b",
+				bottom: "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 border-t",
+				left: "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+				right: "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+			},
+		},
+		defaultVariants: {
+			side: "right",
+		},
+	});
+
+	export type Side = VariantProps<typeof sheetVariants>["side"];
+</script>
+
+<script lang="ts">
+	import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import X from "@lucide/svelte/icons/x";
+	import type { Snippet } from "svelte";
+	import SheetOverlay from "./sheet-overlay.svelte";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		side = "right",
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+		portalProps?: SheetPrimitive.PortalProps;
+		side?: Side;
+		children: Snippet;
+	} = $props();
+</script>
+
+<SheetPrimitive.Portal {...portalProps}>
+	<SheetOverlay />
+	<SheetPrimitive.Content bind:ref class={cn(sheetVariants({ side }), className)} {...restProps}>
+		{@render children?.()}
+		<SheetPrimitive.Close
+			class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none"
+		>
+			<X class="size-4" />
+			<span class="sr-only">Close</span>
+		</SheetPrimitive.Close>
+	</SheetPrimitive.Content>
+</SheetPrimitive.Portal>

package/dist/lib/components/ui/sheet/sheet-content.svelte.d.ts

@@ -0,0 +1,34 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const sheetVariants: import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", {
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    side: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+    };
+}, undefined, "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 gap-4 p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500", unknown, unknown, undefined>>;
+export type Side = VariantProps<typeof sheetVariants>["side"];
+import { Dialog as SheetPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildrenOrChild<SheetPrimitive.ContentProps> & {
+    portalProps?: SheetPrimitive.PortalProps;
+    side?: Side;
+    children: Snippet;
+};
+declare const SheetContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SheetContent = ReturnType<typeof SheetContent>;
+export default SheetContent;

package/dist/lib/components/ui/sheet/sheet-description.svelte

@@ -0,0 +1,16 @@
+<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
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/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/lib/components/ui/sheet/sheet-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sheet/sheet-footer.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { WithElementRef } from "bits-ui";
+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/lib/components/ui/sheet/sheet-header.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	class={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sheet/sheet-header.svelte.d.ts

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

package/dist/lib/components/ui/sheet/sheet-overlay.svelte

@@ -0,0 +1,19 @@
+<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
+	class={cn(
+		"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
+		className
+	)}
+	{...restProps}
+/>

package/dist/lib/components/ui/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/lib/components/ui/sheet/sheet-title.svelte

@@ -0,0 +1,16 @@
+<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
+	class={cn("text-foreground text-lg font-semibold", className)}
+	{...restProps}
+/>

package/dist/lib/components/ui/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/lib/components/ui/sidebar/constants.d.ts

@@ -0,0 +1,6 @@
+export declare const SIDEBAR_COOKIE_NAME = "sidebar:state";
+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 = "b";

package/dist/lib/components/ui/sidebar/constants.js

@@ -0,0 +1,6 @@
+export const SIDEBAR_COOKIE_NAME = "sidebar:state";
+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 = "b";

package/dist/lib/components/ui/sidebar/context.svelte.d.ts

@@ -0,0 +1,42 @@
+type Getter<T> = () => T;
+export type SidebarStateProps = {
+    /**
+     * A getter function that returns the current open state of the sidebar.
+     * We use a getter function here to support `bind:open` on the `Sidebar.Provider`
+     * component.
+     */
+    open: Getter<boolean>;
+    /**
+     * A function that sets the open state of the sidebar. To support `bind:open`, we need
+     * a source of truth for changing the open state to ensure it will be synced throughout
+     * the sub-components and any `bind:` references.
+     */
+    setOpen: (open: boolean) => void;
+};
+declare class SidebarState {
+    #private;
+    readonly props: SidebarStateProps;
+    open: boolean;
+    openMobile: boolean;
+    setOpen: SidebarStateProps['setOpen'];
+    state: string;
+    constructor(props: SidebarStateProps);
+    get isMobile(): boolean;
+    handleShortcutKeydown: (e: KeyboardEvent) => void;
+    setOpenMobile: (value: boolean) => void;
+    toggle: () => boolean | void;
+}
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export declare function setSidebar(props: SidebarStateProps): SidebarState;
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export declare function useSidebar(): SidebarState;
+export {};

package/dist/lib/components/ui/sidebar/context.svelte.js

@@ -0,0 +1,52 @@
+import { IsMobile } from '../../../hooks/is-mobile.svelte.js';
+import { getContext, setContext } from 'svelte';
+import { SIDEBAR_KEYBOARD_SHORTCUT } from './constants.js';
+class SidebarState {
+    props;
+    open = $derived.by(() => this.props.open());
+    openMobile = $state(false);
+    setOpen;
+    #isMobile;
+    state = $derived.by(() => (this.open ? 'expanded' : 'collapsed'));
+    constructor(props) {
+        this.setOpen = props.setOpen;
+        this.#isMobile = new IsMobile();
+        this.props = props;
+    }
+    // Convenience getter for checking if the sidebar is mobile
+    // without this, we would need to use `sidebar.isMobile.current` everywhere
+    get isMobile() {
+        return this.#isMobile.current;
+    }
+    // Event handler to apply to the `<svelte:window>`
+    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';
+/**
+ * Instantiates a new `SidebarState` instance and sets it in the context.
+ *
+ * @param props The constructor props for the `SidebarState` class.
+ * @returns  The `SidebarState` instance.
+ */
+export function setSidebar(props) {
+    return setContext(Symbol.for(SYMBOL_KEY), new SidebarState(props));
+}
+/**
+ * Retrieves the `SidebarState` instance from the context. This is a class instance,
+ * so you cannot destructure it.
+ * @returns The `SidebarState` instance.
+ */
+export function useSidebar() {
+    return getContext(Symbol.for(SYMBOL_KEY));
+}

package/dist/lib/components/ui/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, 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, Trigger, useSidebar, };

package/dist/lib/components/ui/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, 
+//
+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, Trigger, useSidebar, };

package/dist/lib/components/ui/sidebar/sidebar-content.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="content"
+	class={cn(
+		"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sidebar/sidebar-content.svelte.d.ts

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

package/dist/lib/components/ui/sidebar/sidebar-footer.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="footer"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sidebar/sidebar-footer.svelte.d.ts

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

package/dist/lib/components/ui/sidebar/sidebar-group-action.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		...restProps
+	}: WithElementRef<HTMLButtonAttributes> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const propObj = $derived({
+		class: cn(
+			"text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-none transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+			// Increases the hit area of the button on mobile.
+			"after:absolute after:-inset-2 after:md:hidden",
+			"group-data-[collapsible=icon]:hidden",
+			className
+		),
+		"data-sidebar": "group-action",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: propObj })}
+{:else}
+	<button bind:this={ref} {...propObj}>
+		{@render children?.()}
+	</button>
+{/if}

package/dist/lib/components/ui/sidebar/sidebar-group-action.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { WithElementRef } from "bits-ui";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+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/lib/components/ui/sidebar/sidebar-group-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="group-content"
+	class={cn("w-full text-sm", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sidebar/sidebar-group-content.svelte.d.ts

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

package/dist/lib/components/ui/sidebar/sidebar-group-label.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { cn } from "../../../utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	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-none transition-[margin,opa] 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-sidebar": "group-label",
+		...restProps,
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render children?.()}
+	</div>
+{/if}

package/dist/lib/components/ui/sidebar/sidebar-group-label.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { WithElementRef } from "bits-ui";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+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/lib/components/ui/sidebar/sidebar-group.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="group"
+	class={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sidebar/sidebar-group.svelte.d.ts

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

package/dist/lib/components/ui/sidebar/sidebar-header.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-sidebar="header"
+	class={cn("flex flex-col gap-2 p-2", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/lib/components/ui/sidebar/sidebar-header.svelte.d.ts

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