@aphexcms/ui 0.1.0 → 0.1.1

package/dist/components/ui/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 outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent 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! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>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 outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground group-has-data-[sidebar=menu-action]/menu-item:pr-8 data-[active=true]:bg-sidebar-accent 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! flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm transition-[width,height,padding] focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:font-medium [&>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 * as Tooltip from '../tooltip/index.js';
+import { type WithElementRef, type WithoutChildrenOrChild } from '../../../utils.js';
+import type { ComponentProps, Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {
+    isActive?: boolean;
+    variant?: SidebarMenuButtonVariant;
+    size?: SidebarMenuButtonSize;
+    tooltipContent?: Snippet | string;
+    tooltipContentProps?: WithoutChildrenOrChild<ComponentProps<typeof Tooltip.Content>>;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+};
+declare const SidebarMenuButton: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarMenuButton = ReturnType<typeof SidebarMenuButton>;
+export default SidebarMenuButton;

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

@@ -0,0 +1,21 @@
+<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<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/components/ui/sidebar/sidebar-menu-item.svelte.d.ts

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

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import { Skeleton } from '../skeleton/index.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		showIcon = false,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		showIcon?: boolean;
+	} = $props();
+
+	// Random width between 50% and 90%
+	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="max-w-(--skeleton-width) h-4 flex-1"
+		data-sidebar="menu-skeleton-text"
+		style="--skeleton-width: {width};"
+	/>
+	{@render children?.()}
+</div>

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

@@ -0,0 +1,8 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+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/components/ui/sidebar/sidebar-menu-sub-button.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+	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 outline-hidden flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+			'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',
+			size === 'sm' && 'text-xs',
+			size === 'md' && 'text-sm',
+			'group-data-[collapsible=icon]:hidden',
+			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/components/ui/sidebar/sidebar-menu-sub-button.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { Snippet } from 'svelte';
+import type { HTMLAnchorAttributes } from 'svelte/elements';
+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/components/ui/sidebar/sidebar-menu-sub-item.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	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/components/ui/sidebar/sidebar-menu-sub-item.svelte.d.ts

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

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

@@ -0,0 +1,25 @@
+<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<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/components/ui/sidebar/sidebar-menu-sub.svelte.d.ts

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

package/dist/components/ui/sidebar/sidebar-menu.svelte

@@ -0,0 +1,21 @@
+<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<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/components/ui/sidebar/sidebar-menu.svelte.d.ts

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

package/dist/components/ui/sidebar/sidebar-provider.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+	import * as Tooltip from '../tooltip/index.js';
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import {
+		SIDEBAR_COOKIE_MAX_AGE,
+		SIDEBAR_COOKIE_NAME,
+		SIDEBAR_WIDTH,
+		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);
+
+			// This sets the cookie to keep the sidebar state.
+			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 has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full',
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>

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

@@ -0,0 +1,9 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+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;

package/dist/components/ui/sidebar/sidebar-rail.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { useSidebar } from './context.svelte.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement> = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<button
+	bind:this={ref}
+	data-sidebar="rail"
+	data-slot="sidebar-rail"
+	aria-label="Toggle Sidebar"
+	tabIndex={-1}
+	onclick={sidebar.toggle}
+	title="Toggle Sidebar"
+	class={cn(
+		'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-[calc(1/2*100%-1px)] after:w-[2px] group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',
+		'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+		'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+		'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+		'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+		'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</button>

package/dist/components/ui/sidebar/sidebar-rail.svelte.d.ts

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

package/dist/components/ui/sidebar/sidebar-separator.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import { Separator } from '../separator/index.js';
+	import { cn } from '../../../utils.js';
+	import type { ComponentProps } from 'svelte';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="sidebar-separator"
+	data-sidebar="separator"
+	class={cn('bg-sidebar-border', className)}
+	{...restProps}
+/>

package/dist/components/ui/sidebar/sidebar-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const SidebarSeparator: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "child" | "children"> & {
+    child?: import("svelte").Snippet<[{
+        props: Record<string, unknown>;
+    }]> | undefined;
+    children?: import("svelte").Snippet<[]> | undefined;
+    style?: import("bits-ui").StyleProperties | string | null | undefined;
+    ref?: HTMLElement | null | undefined;
+} & import("bits-ui").Without<import("bits-ui").BitsPrimitiveDivAttributes, import("bits-ui").SeparatorRootPropsWithoutHTML>, {}, "ref">;
+type SidebarSeparator = ReturnType<typeof SidebarSeparator>;
+export default SidebarSeparator;

package/dist/components/ui/sidebar/sidebar-trigger.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Button } from '../button/index.js';
+	import { cn } from '../../../utils.js';
+	import PanelLeftIcon from '@lucide/svelte/icons/panel-left';
+	import type { ComponentProps } from 'svelte';
+	import { useSidebar } from './context.svelte.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		onclick,
+		...restProps
+	}: ComponentProps<typeof Button> & {
+		onclick?: (e: MouseEvent) => void;
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+<Button
+	data-sidebar="trigger"
+	data-slot="sidebar-trigger"
+	variant="ghost"
+	size="icon"
+	class={cn('size-7', className)}
+	type="button"
+	onclick={(e) => {
+		onclick?.(e);
+		sidebar.toggle();
+	}}
+	{...restProps}
+>
+	<PanelLeftIcon />
+	<span class="sr-only">Toggle Sidebar</span>
+</Button>

package/dist/components/ui/sidebar/sidebar-trigger.svelte.d.ts

@@ -0,0 +1,8 @@
+import { Button } from '../button/index.js';
+import type { ComponentProps } from 'svelte';
+type $$ComponentProps = ComponentProps<typeof Button> & {
+    onclick?: (e: MouseEvent) => void;
+};
+declare const SidebarTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type SidebarTrigger = ReturnType<typeof SidebarTrigger>;
+export default SidebarTrigger;

package/dist/components/ui/sidebar/sidebar.svelte

@@ -0,0 +1,101 @@
+<script lang="ts">
+	import * as Sheet from '../sheet/index.js';
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { SIDEBAR_WIDTH_MOBILE } from './constants.js';
+	import { useSidebar } from './context.svelte.js';
+
+	let {
+		ref = $bindable(null),
+		side = 'left',
+		variant = 'sidebar',
+		collapsible = 'offcanvas',
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		side?: 'left' | 'right';
+		variant?: 'sidebar' | 'floating' | 'inset';
+		collapsible?: 'offcanvas' | 'icon' | 'none';
+	} = $props();
+
+	const sidebar = useSidebar();
+</script>
+
+{#if collapsible === 'none'}
+	<div
+		class={cn(
+			'bg-sidebar text-sidebar-foreground w-(--sidebar-width) flex h-full flex-col',
+			className
+		)}
+		bind:this={ref}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{:else if sidebar.isMobile}
+	<Sheet.Root bind:open={() => sidebar.openMobile, (v) => sidebar.setOpenMobile(v)} {...restProps}>
+		<Sheet.Content
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			class="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			style="--sidebar-width: {SIDEBAR_WIDTH_MOBILE};"
+			{side}
+		>
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>Sidebar</Sheet.Title>
+				<Sheet.Description>Displays the mobile sidebar.</Sheet.Description>
+			</Sheet.Header>
+			<div class="flex h-full w-full flex-col">
+				{@render children?.()}
+			</div>
+		</Sheet.Content>
+	</Sheet.Root>
+{:else}
+	<div
+		bind:this={ref}
+		class="text-sidebar-foreground group peer hidden md:block"
+		data-state={sidebar.state}
+		data-collapsible={sidebar.state === 'collapsed' ? collapsible : ''}
+		data-variant={variant}
+		data-side={side}
+		data-slot="sidebar"
+	>
+		<!-- This is what handles the sidebar gap on desktop -->
+		<div
+			data-slot="sidebar-gap"
+			class={cn(
+				'w-(--sidebar-width) relative bg-transparent transition-[width] duration-200 ease-linear',
+				'group-data-[collapsible=offcanvas]:w-0',
+				'group-data-[side=right]:rotate-180',
+				variant === 'floating' || variant === 'inset'
+					? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+			)}
+		></div>
+		<div
+			data-slot="sidebar-container"
+			class={cn(
+				'w-(--sidebar-width) fixed inset-y-0 z-10 hidden h-svh transition-[left,right,width] duration-200 ease-linear md:flex',
+				side === 'left'
+					? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]'
+					: 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+				// Adjust the padding for floating and inset variants.
+				variant === 'floating' || variant === 'inset'
+					? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
+					: 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+				className
+			)}
+			{...restProps}
+		>
+			<div
+				data-sidebar="sidebar"
+				data-slot="sidebar-inner"
+				class="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+			>
+				{@render children?.()}
+			</div>
+		</div>
+	</div>
+{/if}

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

@@ -0,0 +1,10 @@
+import { type WithElementRef } from '../../../utils.js';
+import type { HTMLAttributes } from 'svelte/elements';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+};
+declare const Sidebar: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type Sidebar = ReturnType<typeof Sidebar>;
+export default Sidebar;

package/dist/components/ui/skeleton/index.d.ts

@@ -0,0 +1,2 @@
+import Root from './skeleton.svelte';
+export { Root, Root as Skeleton };

package/dist/components/ui/skeleton/index.js

@@ -0,0 +1,4 @@
+import Root from './skeleton.svelte';
+export { Root, 
+//
+Root as Skeleton };

package/dist/components/ui/skeleton/skeleton.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from '../../../utils.js';
+	import type { HTMLAttributes } from 'svelte/elements';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="skeleton"
+	class={cn('bg-accent animate-pulse rounded-md', className)}
+	{...restProps}
+></div>

package/dist/components/ui/skeleton/skeleton.svelte.d.ts

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

package/dist/components/ui/tabs/index.d.ts

@@ -0,0 +1,5 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/components/ui/tabs/index.js

@@ -0,0 +1,7 @@
+import Root from './tabs.svelte';
+import Content from './tabs-content.svelte';
+import List from './tabs-list.svelte';
+import Trigger from './tabs-trigger.svelte';
+export { Root, Content, List, Trigger, 
+//
+Root as Tabs, Content as TabsContent, List as TabsList, Trigger as TabsTrigger };

package/dist/components/ui/tabs/tabs-content.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Tabs as TabsPrimitive } from 'bits-ui';
+	import { cn } from '../../../utils.js';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+	bind:ref
+	data-slot="tabs-content"
+	class={cn('flex-1 outline-none', className)}
+	{...restProps}
+/>

package/dist/components/ui/tabs/tabs-content.svelte.d.ts

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