@svadmin/ui 0.0.6 → 0.4.1

package/src/components/fields/DateField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: string | number | Date | null | undefined; locale?: string; options?: Intl.DateTimeFormatOptions }
+  let { value, locale = 'en-US', options = { dateStyle: 'medium' } }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.DateTimeFormat(locale, options).format(new Date(value as string | number | Date)) : '—');
+</script>
+<span class="field-date">{formatted}</span>

package/src/components/fields/EmailField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined }
+  let { value }: Props = $props();
+</script>
+{#if value}
+  <a href="mailto:{value}" class="text-primary hover:underline no-underline">{value}</a>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/fields/FileField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Download } from 'lucide-svelte';
+  interface Props { value: string | null | undefined; title?: string }
+  let { value, title }: Props = $props();
+  const fileName = $derived(value ? value.split('/').pop() ?? value : null);
+</script>
+{#if value}
+  <a href={value} download class="text-primary hover:underline no-underline inline-flex items-center gap-1" title={title ?? fileName ?? ''}>
+    <Download class="h-3.5 w-3.5 opacity-60" />
+    {fileName}
+  </a>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/fields/ImageField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; alt?: string; width?: number; height?: number }
+  let { value, alt = '', width = 80, height = 80 }: Props = $props();
+</script>
+{#if value}
+  <img src={value} {alt} {width} {height} class="rounded-lg object-cover border border-border" />
+{:else}
+  <span class="inline-flex items-center justify-center w-20 h-20 bg-muted rounded-lg text-muted-foreground">—</span>
+{/if}

package/src/components/fields/JsonField.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+  import { Copy, Check, ChevronDown, ChevronRight } from 'lucide-svelte';
+
+  let { value } = $props<{
+    value: unknown;
+  }>();
+
+  let expanded = $state(false);
+  let copied = $state(false);
+  let copyTimer: ReturnType<typeof setTimeout> | undefined;
+
+  $effect(() => {
+    return () => { if (copyTimer) clearTimeout(copyTimer); };
+  });
+
+  const formatted = $derived(
+    value != null ? JSON.stringify(value, null, 2) : '—'
+  );
+
+  const preview = $derived(
+    value != null ? JSON.stringify(value).slice(0, 80) + (JSON.stringify(value).length > 80 ? '...' : '') : '—'
+  );
+
+  function copyJson() {
+    navigator.clipboard.writeText(formatted);
+    copied = true;
+    if (copyTimer) clearTimeout(copyTimer);
+    copyTimer = setTimeout(() => { copied = false; }, 2000);
+  }
+</script>
+
+{#if value == null}
+  <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="space-y-1">
+    <div class="flex items-center gap-2">
+      <Button
+        variant="ghost"
+        size="sm"
+        class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
+        onclick={() => { expanded = !expanded; }}
+      >
+        {#if expanded}
+          <ChevronDown class="h-3 w-3" />
+        {:else}
+          <ChevronRight class="h-3 w-3" />
+        {/if}
+        {expanded ? t('common.collapse') : t('common.expand')}
+      </Button>
+      <Button
+        variant="ghost"
+        size="sm"
+        class="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground h-auto py-0.5 px-1"
+        onclick={copyJson}
+        aria-label={t('common.copy')}
+      >
+        {#if copied}
+          <Check class="h-3 w-3 text-emerald-500" />
+        {:else}
+          <Copy class="h-3 w-3" />
+        {/if}
+      </Button>
+    </div>
+    {#if expanded}
+      <pre class="rounded-lg bg-muted p-3 text-xs overflow-auto max-h-64 font-mono">{formatted}</pre>
+    {:else}
+      <code class="text-xs font-mono bg-muted px-1.5 py-0.5 rounded">{preview}</code>
+    {/if}
+  </div>
+{/if}

package/src/components/fields/MarkdownField.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined }
+  let { value }: Props = $props();
+</script>
+{#if value}
+  <div class="prose prose-sm dark:prose-invert max-w-none leading-relaxed [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:text-[0.875em] [&_pre]:bg-muted [&_pre]:p-3 [&_pre]:rounded-lg [&_pre]:overflow-x-auto [&_a]:text-primary">{@html value}</div>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/fields/MultiSelectField.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+
+  let { value } = $props<{
+    value: (string | number)[] | null | undefined;
+    options?: { label: string; value: string | number }[];
+  }>();
+
+  const items = $derived(Array.isArray(value) ? value : []);
+</script>
+
+{#if items.length > 0}
+  <div class="flex flex-wrap gap-1">
+    {#each items as item}
+      <Badge variant="secondary">{String(item)}</Badge>
+    {/each}
+  </div>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/fields/NumberField.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  interface Props { value: number | string | null | undefined; locale?: string; options?: Intl.NumberFormatOptions }
+  let { value, locale = 'en-US', options = {} }: Props = $props();
+  const formatted = $derived(value != null ? new Intl.NumberFormat(locale, options).format(Number(value)) : '—');
+</script>
+<span class="field-number">{formatted}</span>

package/src/components/fields/RelationField.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  import { ExternalLink } from 'lucide-svelte';
+
+  let { value, resourceName, displayValue } = $props<{
+    value: string | number | null | undefined;
+    resourceName?: string;
+    displayValue?: string;
+  }>();
+
+  const display = $derived(displayValue ?? (value != null ? `#${value}` : '—'));
+  const href = $derived(resourceName && value != null ? `#/${resourceName}/show/${value}` : undefined);
+</script>
+
+{#if href}
+  <a
+    {href}
+    class="inline-flex items-center gap-1 text-primary hover:underline text-sm"
+  >
+    {display}
+    <ExternalLink class="h-3 w-3" />
+  </a>
+{:else}
+  <span class="text-muted-foreground">{display}</span>
+{/if}

package/src/components/fields/RichTextField.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  import { t } from '@svadmin/core/i18n';
+  import { Button } from '../ui/button/index.js';
+
+  let { value, maxLength = 200 } = $props<{
+    value: string | null | undefined;
+    maxLength?: number;
+  }>();
+
+  const text = $derived(value ?? '');
+  const truncated = $derived(text.length > maxLength);
+  const display = $derived(truncated ? text.slice(0, maxLength) + '...' : text);
+
+  let showFull = $state(false);
+</script>
+
+{#if !text}
+  <span class="text-muted-foreground">—</span>
+{:else}
+  <div class="prose prose-sm dark:prose-invert max-w-none">
+    <p class="whitespace-pre-wrap text-sm leading-relaxed">
+      {showFull ? text : display}
+    </p>
+    {#if truncated}
+      <Button
+        variant="link"
+        size="sm"
+        class="text-xs text-primary h-auto p-0"
+        onclick={() => { showFull = !showFull; }}
+      >
+        {showFull ? t('common.showLess') : t('common.showMore')}
+      </Button>
+    {/if}
+  </div>
+{/if}

package/src/components/fields/SelectField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+
+  let { value, options } = $props<{
+    value: string | number | null | undefined;
+    options?: { label: string; value: string | number }[];
+  }>();
+
+  const label = $derived(
+    options?.find(o => o.value === value)?.label ?? (value != null ? String(value) : '—')
+  );
+</script>
+
+<Badge variant="outline">{label}</Badge>

package/src/components/fields/TagField.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { Badge } from '../ui/badge/index.js';
+  interface Props { value: string | string[] | null | undefined }
+  let { value }: Props = $props();
+  const tags = $derived(Array.isArray(value) ? value : value ? [value] : []);
+</script>
+<span class="inline-flex flex-wrap gap-1">
+  {#each tags as tag}
+    <Badge variant="secondary">{tag}</Badge>
+  {/each}
+  {#if tags.length === 0}<span class="text-muted-foreground">—</span>{/if}
+</span>

package/src/components/fields/TextField.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  interface Props { value: string | null | undefined; maxLength?: number }
+  let { value, maxLength }: Props = $props();
+  const display = $derived(value && maxLength && value.length > maxLength ? value.slice(0, maxLength) + '…' : value);
+  const needsTooltip = $derived(value && maxLength && value.length > maxLength);
+</script>
+{#if value}
+  <span class="inline-block" title={needsTooltip ? value : undefined}>{display}</span>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/fields/UrlField.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import { ExternalLink } from 'lucide-svelte';
+  interface Props { value: string | null | undefined; label?: string }
+  let { value, label }: Props = $props();
+  const display = $derived(label ?? value ?? '');
+</script>
+{#if value}
+  <a href={value} target="_blank" rel="noopener noreferrer" class="text-primary hover:underline no-underline inline-flex items-center gap-1">
+    {display}
+    <ExternalLink class="h-3 w-3 opacity-60" />
+  </a>
+{:else}
+  <span class="text-muted-foreground">—</span>
+{/if}

package/src/components/ui/alert-dialog/alert-dialog-content.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import type { WithoutChildrenOrChild } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithoutChildrenOrChild<AlertDialogPrimitive.ContentProps> & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Portal>
+	<AlertDialogPrimitive.Overlay
+		class="fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+	/>
+	<AlertDialogPrimitive.Content
+		bind:ref
+		class={cn(
+			"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+			className,
+		)}
+		{...restProps}
+	/>
+</AlertDialogPrimitive.Portal>

package/src/components/ui/alert-dialog/alert-dialog-description.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.DescriptionProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Description
+	bind:ref
+	class={cn("text-sm text-muted-foreground", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-footer.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...restProps}></div>

package/src/components/ui/alert-dialog/alert-dialog-header.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+
+	let { class: className, ...restProps }: HTMLAttributes<HTMLDivElement> = $props();
+</script>
+
+<div class={cn("flex flex-col space-y-2 text-center sm:text-left", className)} {...restProps}></div>

package/src/components/ui/alert-dialog/alert-dialog-overlay.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.OverlayProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Overlay
+	bind:ref
+	class={cn("fixed inset-0 z-50 bg-black/80", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/alert-dialog-portal.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	let { ...restProps }: AlertDialogPrimitive.PortalProps = $props();
+</script>
+
+<AlertDialogPrimitive.Portal {...restProps} />

package/src/components/ui/alert-dialog/alert-dialog-title.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+	import { cn } from "../../../utils.js";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: AlertDialogPrimitive.TitleProps & { class?: string } = $props();
+</script>
+
+<AlertDialogPrimitive.Title
+	bind:ref
+	class={cn("text-lg font-semibold", className)}
+	{...restProps}
+/>

package/src/components/ui/alert-dialog/index.ts

@@ -0,0 +1,20 @@
+import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
+
+const Root = AlertDialogPrimitive.Root;
+const Trigger = AlertDialogPrimitive.Trigger;
+const Action = AlertDialogPrimitive.Action;
+const Cancel = AlertDialogPrimitive.Cancel;
+
+export {
+	Root,
+	Trigger,
+	Action,
+	Cancel,
+};
+export { default as Content } from "./alert-dialog-content.svelte";
+export { default as Description } from "./alert-dialog-description.svelte";
+export { default as Footer } from "./alert-dialog-footer.svelte";
+export { default as Header } from "./alert-dialog-header.svelte";
+export { default as Overlay } from "./alert-dialog-overlay.svelte";
+export { default as Portal } from "./alert-dialog-portal.svelte";
+export { default as Title } from "./alert-dialog-title.svelte";

package/src/components/ui/avatar/avatar.svelte

@@ -16,7 +16,8 @@
 		defaultVariants: { size: "default" },
 	});
 
-	export type AvatarSize = VariantProps<typeof avatarVariants>["size"];
+	// AvatarSize type is exported from the package index.ts
+	type AvatarSize = VariantProps<typeof avatarVariants>["size"];
 
 	type Props = WithElementRef<HTMLImgAttributes> & {
 		size?: AvatarSize;

package/src/components/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { Ellipsis } from 'lucide-svelte';
+
+  let { class: className, ...restProps }: HTMLAttributes<HTMLSpanElement> = $props();
+</script>
+
+<span
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-ellipsis"
+  class={cn("flex size-9 items-center justify-center", className)}
+  {...restProps}
+>
+  <Ellipsis class="size-4" />
+  <span class="sr-only">More</span>
+</span>

package/src/components/ui/breadcrumb/breadcrumb-item.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLLiAttributes & { children?: Snippet } = $props();
+</script>
+
+<li
+  data-slot="breadcrumb-item"
+  class={cn("inline-flex items-center gap-1.5", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</li>

package/src/components/ui/breadcrumb/breadcrumb-link.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAnchorAttributes & { children?: Snippet } = $props();
+</script>
+
+<a
+  data-slot="breadcrumb-link"
+  class={cn("hover:text-foreground transition-colors", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</a>

package/src/components/ui/breadcrumb/breadcrumb-list.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLOlAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLOlAttributes & { children?: Snippet } = $props();
+</script>
+
+<ol
+  data-slot="breadcrumb-list"
+  class={cn("text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</ol>

package/src/components/ui/breadcrumb/breadcrumb-page.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLSpanElement> & { children?: Snippet } = $props();
+</script>
+
+<span
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  data-slot="breadcrumb-page"
+  class={cn("text-foreground font-normal", className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>

package/src/components/ui/breadcrumb/breadcrumb-separator.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+  import { ChevronRight } from 'lucide-svelte';
+
+  let { class: className, children, ...restProps }: HTMLLiAttributes & { children?: Snippet } = $props();
+</script>
+
+<li
+  role="presentation"
+  aria-hidden="true"
+  data-slot="breadcrumb-separator"
+  class={cn("[&>svg]:size-3.5", className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    <ChevronRight />
+  {/if}
+</li>

package/src/components/ui/breadcrumb/breadcrumb.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let { class: className, children, ...restProps }: HTMLAttributes<HTMLElement> & { children?: Snippet } = $props();
+</script>
+
+<nav aria-label="breadcrumb" data-slot="breadcrumb" class={cn("", className)} {...restProps}>
+  {@render children?.()}
+</nav>

package/src/components/ui/breadcrumb/index.ts

@@ -0,0 +1,7 @@
+export { default as Root } from './breadcrumb.svelte';
+export { default as Item } from './breadcrumb-item.svelte';
+export { default as Link } from './breadcrumb-link.svelte';
+export { default as Page } from './breadcrumb-page.svelte';
+export { default as Separator } from './breadcrumb-separator.svelte';
+export { default as Ellipsis } from './breadcrumb-ellipsis.svelte';
+export { default as List } from './breadcrumb-list.svelte';

package/src/components/ui/collapsible/index.ts

@@ -0,0 +1,7 @@
+import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+
+export { Root, Trigger, Content };

package/src/components/ui/command/command-dialog.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Command } from 'cmdk-sv';
+  import * as Dialog from '../dialog/index.js';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let {
+    open = $bindable(false),
+    class: className,
+    children,
+    ...restProps
+  }: {
+    open?: boolean;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+  } = $props();
+</script>
+
+<Dialog.Dialog bind:open {...restProps}>
+  <Dialog.DialogContent class="overflow-hidden p-0">
+    <Command.Root
+      class={cn(
+        "[&_[data-cmdk-group-heading]]:text-muted-foreground flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3",
+        className
+      )}
+    >
+      {@render children?.()}
+    </Command.Root>
+  </Dialog.DialogContent>
+</Dialog.Dialog>

package/src/components/ui/command/index.ts

@@ -0,0 +1,2 @@
+export { Command as Root, Command } from 'cmdk-sv';
+export { default as CommandDialog } from './command-dialog.svelte';

package/src/components/ui/context-menu/index.ts

@@ -0,0 +1,11 @@
+import { ContextMenu as ContextMenuPrimitive } from 'bits-ui';
+
+const Root = ContextMenuPrimitive.Root;
+const Trigger = ContextMenuPrimitive.Trigger;
+const Content = ContextMenuPrimitive.Content;
+const Item = ContextMenuPrimitive.Item;
+const Separator = ContextMenuPrimitive.Separator;
+const Group = ContextMenuPrimitive.Group;
+const GroupHeading = ContextMenuPrimitive.GroupHeading;
+
+export { Root, Trigger, Content, Item, Separator, Group, GroupHeading };

package/src/components/ui/drawer/drawer-content.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<DrawerPrimitive.Portal>
+  <DrawerPrimitive.Overlay class="fixed inset-0 z-50 bg-black/80" />
+  <DrawerPrimitive.Content
+    class={cn(
+      "bg-background fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border",
+      className
+    )}
+    {...restProps}
+  >
+    <div class="bg-muted mx-auto mt-4 h-2 w-[100px] rounded-full"></div>
+    {@render children?.()}
+  </DrawerPrimitive.Content>
+</DrawerPrimitive.Portal>

package/src/components/ui/drawer/drawer-description.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+  import { Drawer as DrawerPrimitive } from 'vaul-svelte';
+  import { cn } from '../../../utils.js';
+  import type { Snippet } from 'svelte';
+
+  let { class: className, children, ...restProps }: { class?: string; children?: Snippet; [key: string]: unknown } = $props();
+</script>
+
+<DrawerPrimitive.Description class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+  {@render children?.()}
+</DrawerPrimitive.Description>