@heyramzi/ui 3.1.0 → 3.3.1

package/src/record/record-shell.svelte

@@ -66,33 +66,45 @@
 	{@render header()}
 	{@render banner?.()}
 
+	<!-- The rail is drawn twice, once docked and once in the sheet. Only one is ever on
+	     screen, and the sheet mounts its copy on open. -->
 	{#if rail}
-		<button
-			type="button"
-			class={cn(
-				"t-press flex min-h-11 w-full items-center gap-3 border-b border-border py-2 text-left @3xl:hidden",
-				gutterClass,
-			)}
-			aria-haspopup="dialog"
-			aria-expanded={railOpen}
-			onclick={() => (railOpen = true)}
-		>
-			<span class="text-sm font-medium">{railTitle ?? t.steps}</span>
-			{#if railProgress}
-				<span class="text-xs tabular-nums text-muted-foreground">
-					{t.stepsCount(railProgress.done, railProgress.total)}
-				</span>
-				<Progress
-					value={percent}
-					max={100}
-					class="h-1 flex-1"
-					aria-label={t.stepsCount(railProgress.done, railProgress.total)}
-				/>
-			{:else}
-				<span class="flex-1"></span>
-			{/if}
-			<CaretRight class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
-		</button>
+		<Sheet.Root bind:open={railOpen}>
+			<Sheet.Trigger>
+				{#snippet child({ props })}
+					<button
+						type="button"
+						{...props}
+						class={cn(
+							"t-press flex min-h-11 w-full items-center gap-3 border-b border-border py-2 text-left @3xl:hidden",
+							gutterClass,
+						)}
+					>
+						<span class="text-sm font-medium">{railTitle ?? t.steps}</span>
+						{#if railProgress}
+							<span class="text-xs tabular-nums text-muted-foreground">
+								{t.stepsCount(railProgress.done, railProgress.total)}
+							</span>
+							<Progress
+								value={percent}
+								max={100}
+								class="h-1 flex-1"
+								aria-label={t.stepsCount(railProgress.done, railProgress.total)}
+							/>
+						{:else}
+							<span class="flex-1"></span>
+						{/if}
+						<CaretRight class="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+					</button>
+				{/snippet}
+			</Sheet.Trigger>
+			<Sheet.Content side="bottom" class="gap-0 p-0">
+				<Sheet.Header class="sr-only">
+					<Sheet.Title>{railTitle ?? t.steps}</Sheet.Title>
+				</Sheet.Header>
+				<div class="overflow-y-auto p-4 pt-6">{@render rail()}</div>
+			</Sheet.Content>
+		</Sheet.Root>
 	{/if}
 
 	<div class="flex min-w-0 flex-col @3xl:flex-row">
@@ -123,16 +135,3 @@
 		{/if}
 	</div>
 </div>
-
-<!-- The rail is drawn twice, once docked and once here. Only one is ever on screen,
-     and the sheet mounts its copy on open. -->
-{#if rail}
-	<Sheet.Root bind:open={railOpen}>
-		<Sheet.Content side="bottom" class="gap-0 p-0">
-			<Sheet.Header class="sr-only">
-				<Sheet.Title>{railTitle ?? t.steps}</Sheet.Title>
-			</Sheet.Header>
-			<div class="overflow-y-auto p-4 pt-6">{@render rail()}</div>
-		</Sheet.Content>
-	</Sheet.Root>
-{/if}

package/src/record/record-timeline.svelte

@@ -13,6 +13,7 @@
 	import { TONE_ICON } from "../lib/tone.js";
 	import { DEFAULT_RECORD_FILTERS, DEFAULT_RECORD_KINDS } from "./kinds.js";
 	import { formatDayHeader, formatMoney, formatTime } from "./format.js";
+	import { measureClamp } from "./measure-clamp.js";
 	import {
 		dayRelation,
 		eventsForFilter,
@@ -78,6 +79,8 @@
 	// =========================
 	let showAll = $state(false);
 	const expanded = new SvelteSet<string>();
+	// Ids whose body is cut by its clamp, as measured.
+	const cut = new SvelteSet<string>();
 
 	// =========================
 	// DERIVED
@@ -110,10 +113,11 @@
 		return kindByKey.get(event.kind) ?? { key: event.kind, label: event.kind };
 	}
 
-	// A body this long, or with a line break, gets a More toggle. Measuring each
-	// row would re-layout the list on every resize.
-	function isLong(body: string | null | undefined): boolean {
-		return Boolean(body && (body.length > 180 || body.includes("\n")));
+	function measureBody(id: string) {
+		return measureClamp(
+			() => expanded.has(id),
+			(isCut) => (isCut ? cut.add(id) : cut.delete(id)),
+		);
 	}
 </script>
 
@@ -180,6 +184,7 @@
 										</p>
 										{#if event.body}
 											<p
+												{@attach measureBody(event.id)}
 												class={cn(
 													"mt-0.5 text-sm leading-snug whitespace-pre-line text-muted-foreground wrap-anywhere",
 													!expanded.has(event.id) && "line-clamp-3",
@@ -187,7 +192,7 @@
 											>
 												{event.body}
 											</p>
-											{#if isLong(event.body)}
+											{#if cut.has(event.id) || expanded.has(event.id)}
 												<Button
 													variant="ghost"
 													size="sm"

package/src/record/steps-rail.svelte

@@ -17,7 +17,8 @@
 	import CountChip from "../components/chip/count-chip.svelte";
 	import { Input } from "../shadcn/input/index.js";
 	import { Skeleton } from "../shadcn/skeleton/index.js";
-	import * as Popover from "../shadcn/popover/index.js";
+	import { DropdownMenu as MenuPrimitive } from "bits-ui";
+	import * as DropdownMenu from "../shadcn/dropdown-menu/index.js";
 	import * as ContextMenu from "../shadcn/context-menu/index.js";
 	import { todayIso } from "../work/dates.js";
 	import { formatRange } from "./format.js";
@@ -267,8 +268,8 @@
 			</span>
 		{/if}
 		{#if onToggle && !loading && ordered.length > 0}
-			<Popover.Root bind:open={menuOpen}>
-				<Popover.Trigger>
+			<DropdownMenu.Root bind:open={menuOpen}>
+				<DropdownMenu.Trigger>
 					{#snippet child({ props })}
 						<Button
 							{...props}
@@ -276,7 +277,7 @@
 							size="sm"
 							icon
 							class="relative ml-auto text-muted-foreground"
-							aria-label={t.editSteps}
+							aria-label={hiddenCount > 0 ? `${t.editSteps}: ${hiddenCount}` : t.editSteps}
 						>
 							<DotsThreeVertical aria-hidden="true" class="size-4" weight="bold" />
 							{#if hiddenCount > 0}
@@ -289,44 +290,57 @@
 							{/if}
 						</Button>
 					{/snippet}
-				</Popover.Trigger>
-				<Popover.Content align="end" class="w-64 p-1">
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="end" class="w-64 rounded-2xl">
 					{#each menuBuckets as bucket (bucket.key)}
-						{#if bucket.label}
-							<p class="px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground">
-								{bucket.label}
-							</p>
-						{/if}
-						{#each bucket.steps as step (step.id)}
-							<Button
-								variant="ghost"
-								class="w-full justify-start gap-2.5 px-2 text-left"
-								aria-pressed={!step.hidden}
-								onclick={() => onToggle(step.id, Boolean(step.hidden))}
-							>
-								<span class="flex size-4 shrink-0 items-center justify-center">
-									{#if step.hidden}
-										<EyeSlash aria-hidden="true" class="size-3.5 text-muted-foreground" />
-									{:else}
-										<Eye aria-hidden="true" class="size-3.5" />
-									{/if}
-								</span>
-								<span
-									class={cn(
-										"min-w-0 flex-1 truncate",
-										step.hidden && "text-muted-foreground line-through",
-									)}>{step.label}</span
+						<DropdownMenu.Group>
+							{#if bucket.label}
+								<DropdownMenu.GroupHeading
+									class="px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground"
+								>
+									{bucket.label}
+								</DropdownMenu.GroupHeading>
+							{/if}
+							{#each bucket.steps as step (step.id)}
+								<!-- Bits' item around the kit's ghost Button, not the shadcn row: the eye is
+								     the checkmark here, so the row keeps its own look. -->
+								<MenuPrimitive.CheckboxItem
+									checked={!step.hidden}
+									closeOnSelect={false}
+									onCheckedChange={(shown) => onToggle(step.id, shown)}
 								>
-							</Button>
-						{/each}
+									{#snippet child({ props })}
+										<Button
+											{...props}
+											variant="ghost"
+											class="w-full justify-start gap-2.5 px-2 text-left"
+										>
+											<span class="flex size-4 shrink-0 items-center justify-center">
+												{#if step.hidden}
+													<EyeSlash aria-hidden="true" class="size-3.5 text-muted-foreground" />
+												{:else}
+													<Eye aria-hidden="true" class="size-3.5" />
+												{/if}
+											</span>
+											<span
+												class={cn(
+													"min-w-0 flex-1 truncate",
+													step.hidden && "text-muted-foreground line-through",
+												)}>{step.label}</span
+											>
+										</Button>
+									{/snippet}
+								</MenuPrimitive.CheckboxItem>
+							{/each}
+						</DropdownMenu.Group>
 					{/each}
-					<p
+					<div
 						class="mt-1 border-t border-border px-2 pt-2 pb-1 text-xs tabular-nums text-muted-foreground"
 					>
 						{t.shownCount(visible.length, ordered.length)}
-					</p>
-				</Popover.Content>
-			</Popover.Root>
+					</div>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
 		{/if}
 	</div>
 

package/src/record/where-we-are.svelte

@@ -9,6 +9,7 @@
 	import type { Tone } from "../lib/tone.js";
 	import { gutterClass } from "./gutter.js";
 	import { formatAge } from "./format.js";
+	import { measureClamp } from "./measure-clamp.js";
 	import { resolveLabels, type RecordLabels } from "./types.js";
 
 	// =========================
@@ -35,7 +36,6 @@
 	// =========================
 	let expanded = $state(false);
 	let clamped = $state(false);
-	let text = $state<HTMLElement | null>(null);
 
 	// =========================
 	// DERIVED
@@ -43,23 +43,6 @@
 	let t = $derived(resolveLabels(labels));
 	let age = $derived(at ? formatAge(at, now, locale) : null);
 	let hasMeta = $derived(Boolean(health || actor || age));
-
-	// =========================
-	// EFFECTS
-	// =========================
-	// Measured, not guessed from length: a note that fits two lines at 1280px
-	// overflows at 390px, and "More" shows only when text is cut.
-	$effect(() => {
-		if (!text) return;
-		const el = text;
-		const measure = () => {
-			if (!expanded) clamped = el.scrollHeight > el.clientHeight + 1;
-		};
-		measure();
-		const observer = new ResizeObserver(measure);
-		observer.observe(el);
-		return () => observer.disconnect();
-	});
 </script>
 
 <!-- =========================== -->
@@ -83,7 +66,10 @@
 			<!-- No `title` attribute: a native tooltip would repeat the whole note
 			     over the steps list. "More" opens it in place. -->
 			<p
-				bind:this={text}
+				{@attach measureClamp(
+					() => expanded,
+					(cut) => (clamped = cut),
+				)}
 				class={cn("text-sm leading-snug text-muted-foreground", !expanded && "line-clamp-2")}
 			>
 				<span class="font-medium text-foreground">{t.whereWeAre}</span>

package/src/shadcn/button-group/button-group-separator.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { Separator } from "../separator/index.js";
+	import { cn } from "../../lib/utils.js";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		orientation = "vertical",
+		...restProps
+	}: ComponentProps<typeof Separator> = $props();
+</script>
+
+<Separator
+	bind:ref
+	data-slot="button-group-separator"
+	{orientation}
+	class={cn(
+		"bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
+		className
+	)}
+	{...restProps}
+/>

package/src/shadcn/button-group/button-group-separator.svelte.d.ts

@@ -0,0 +1,13 @@
+declare const $$Component: import("svelte").Component<Omit<{
+    orientation?: import("bits-ui").Orientation;
+    decorative?: boolean;
+}, "children" | "child"> & {
+    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 $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/button-group/button-group-text.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		child,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+	} = $props();
+
+	const mergedProps = $derived({
+		...restProps,
+		class: cn("bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none", className),
+		"data-slot": "button-group-text",
+	});
+</script>
+
+{#if child}
+	{@render child({ props: mergedProps })}
+{:else}
+	<div bind:this={ref} {...mergedProps}>
+		{@render mergedProps.children?.()}
+	</div>
+{/if}

package/src/shadcn/button-group/button-group-text.svelte.d.ts

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

package/src/shadcn/button-group/button-group.svelte

@@ -0,0 +1,46 @@
+<script lang="ts" module>
+	import { tv, type VariantProps } from "tailwind-variants";
+
+	export const buttonGroupVariants = tv({
+		base: "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+		variants: {
+			orientation: {
+				horizontal:
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+				vertical:
+					"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+			},
+		},
+		defaultVariants: {
+			orientation: "horizontal",
+		},
+	});
+
+	export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+</script>
+
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		orientation = "horizontal",
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		orientation?: ButtonGroupOrientation;
+	} = $props();
+</script>
+
+<div
+	bind:this={ref}
+	role="group"
+	data-slot="button-group"
+	data-orientation={orientation}
+	class={cn(buttonGroupVariants({ orientation }), className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/button-group/button-group.svelte.d.ts

@@ -0,0 +1,16 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const buttonGroupVariants: import("tailwind-variants").TVReturnType<{
+    orientation: {
+        horizontal: string;
+        vertical: string;
+    };
+}, undefined, "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", undefined, undefined, undefined>;
+export type ButtonGroupOrientation = VariantProps<typeof buttonGroupVariants>["orientation"];
+import { type WithElementRef } from "../../lib/utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    orientation?: ButtonGroupOrientation;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/button-group/index.ts

@@ -0,0 +1,15 @@
+import Separator from "./button-group-separator.svelte";
+import Text from "./button-group-text.svelte";
+import Root, { buttonGroupVariants, type ButtonGroupOrientation } from "./button-group.svelte";
+
+export {
+	Root,
+	Text,
+	Separator,
+	buttonGroupVariants,
+	type ButtonGroupOrientation,
+	//
+	Root as ButtonGroup,
+	Text as ButtonGroupText,
+	Separator as ButtonGroupSeparator,
+};

package/src/shadcn/checkbox/checkbox-box.ts

@@ -0,0 +1,4 @@
+// The checkbox's square, shared with rows that draw it as a picture inside a menu item,
+// where a real checkbox would put a button inside a button.
+export const checkboxBoxClass =
+  "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 not-data-checked:enabled:hover:border-foreground/30 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-[15px] disabled:cursor-not-allowed disabled:opacity-50";

package/src/shadcn/checkbox/checkbox.svelte

@@ -2,6 +2,7 @@
 	import { Checkbox as CheckboxPrimitive } from "bits-ui";
 	import { cn, type WithoutChildrenOrChild } from "../../lib/utils.js";
 	import { Check, Minus } from "phosphor-svelte";
+	import { checkboxBoxClass } from "./checkbox-box.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,10 +16,7 @@
 <CheckboxPrimitive.Root
 	bind:ref
 	data-slot="checkbox"
-	class={cn(
-		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 not-data-checked:enabled:hover:border-foreground/30 focus-visible:border-ring focus-visible:shadow-(--ring-focus) aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-sm border shadow-btn transition-[background-color,border-color,box-shadow] duration-[var(--duration-quick)] ease-[var(--ease-smooth-out)] group-has-disabled/field:opacity-50 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 any-pointer-coarse:after:-inset-[15px] disabled:cursor-not-allowed disabled:opacity-50",
-		className,
-	)}
+	class={cn(checkboxBoxClass, className)}
 	bind:checked
 	bind:indeterminate
 	{...restProps}

package/src/shadcn/drawer/drawer-close.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+
+	let { ref = $bindable(null), ...restProps }: DrawerPrimitive.CloseProps = $props();
+</script>
+
+<DrawerPrimitive.Close bind:ref data-slot="drawer-close" {...restProps} />

package/src/shadcn/drawer/drawer-close.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.TriggerProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-content.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../lib/utils.js";
+	import type { WithoutChildrenOrChild } from "../../lib/utils.js";
+	import DrawerOverlay from "./drawer-overlay.svelte";
+	import DrawerPortal from "./drawer-portal.svelte";
+	import type { ComponentProps } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		portalProps,
+		children,
+		...restProps
+	}: DrawerPrimitive.ContentProps & {
+		portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+	} = $props();
+</script>
+
+<DrawerPortal {...portalProps}>
+	<DrawerOverlay />
+	<DrawerPrimitive.Content
+		bind:ref
+		data-slot="drawer-content"
+		class={cn(
+			"bg-popover text-popover-foreground flex h-auto flex-col text-sm data-[vaul-drawer-direction=bottom]:rounded-t-xl data-[vaul-drawer-direction=bottom]:border-t data-[vaul-drawer-direction=left]:rounded-r-xl data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=right]:rounded-l-xl data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=top]:rounded-b-xl data-[vaul-drawer-direction=top]:border-b group/drawer-content fixed z-50 data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:start-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:end-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=left]:sm:max-w-sm data-[vaul-drawer-direction=right]:sm:max-w-sm",
+			className
+		)}
+		{...restProps}
+	>
+		<div
+			class="bg-muted mx-auto mt-4 hidden h-1.5 w-[100px] shrink-0 rounded-full mx-auto hidden shrink-0 group-data-[vaul-drawer-direction=bottom]/drawer-content:block"
+		></div>
+		{@render children?.()}
+	</DrawerPrimitive.Content>
+</DrawerPortal>

package/src/shadcn/drawer/drawer-content.svelte.d.ts

@@ -0,0 +1,10 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+import type { WithoutChildrenOrChild } from "../../lib/utils.js";
+import DrawerPortal from "./drawer-portal.svelte";
+import type { ComponentProps } from "svelte";
+type $$ComponentProps = DrawerPrimitive.ContentProps & {
+    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof DrawerPortal>>;
+};
+declare const $$Component: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-description.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { Drawer as DrawerPrimitive } from "vaul-svelte";
+	import { cn } from "../../lib/utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: DrawerPrimitive.DescriptionProps = $props();
+</script>
+
+<DrawerPrimitive.Description
+	bind:ref
+	data-slot="drawer-description"
+	class={cn("text-muted-foreground text-sm", className)}
+	{...restProps}
+/>

package/src/shadcn/drawer/drawer-description.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Drawer as DrawerPrimitive } from "vaul-svelte";
+declare const $$Component: import("svelte").Component<DrawerPrimitive.DescriptionProps, {}, "ref">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/shadcn/drawer/drawer-footer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/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="drawer-footer"
+	class={cn("gap-2 p-4 mt-auto flex flex-col", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/drawer/drawer-footer.svelte.d.ts

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

package/src/shadcn/drawer/drawer-header.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../lib/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="drawer-header"
+	class={cn(
+		"gap-0.5 p-4 md:gap-1.5 md:text-left flex flex-col group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center",
+		className
+	)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/src/shadcn/drawer/drawer-header.svelte.d.ts

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