@heyramzi/ui 0.0.0-stage → 6.0.1

package/src/showcase/demos/shadcn/alert-dialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import * as AlertDialog from "../../../shadcn/alert-dialog/index.js";
+	import { buttonVariants } from "../../../shadcn/button/index.js";
+</script>
+
+<AlertDialog.Root>
+	<AlertDialog.Trigger class={buttonVariants({ variant: "outline" })}>
+		Show Dialog
+	</AlertDialog.Trigger>
+	<AlertDialog.Content>
+		<AlertDialog.Header>
+			<AlertDialog.Title>Are you absolutely sure?</AlertDialog.Title>
+			<AlertDialog.Description>
+				This action cannot be undone. This will permanently delete your account and remove your data
+				from our servers.
+			</AlertDialog.Description>
+		</AlertDialog.Header>
+		<AlertDialog.Footer>
+			<AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
+			<AlertDialog.Action>Continue</AlertDialog.Action>
+		</AlertDialog.Footer>
+	</AlertDialog.Content>
+</AlertDialog.Root>

package/src/showcase/demos/shadcn/alert.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import AlertCircleIcon from "@lucide/svelte/icons/alert-circle";
+	import CheckCircle2Icon from "@lucide/svelte/icons/check-circle-2";
+	import PopcornIcon from "@lucide/svelte/icons/popcorn";
+	import * as Alert from "../../../shadcn/alert/index.js";
+</script>
+
+<div class="grid w-full max-w-xl items-start gap-4">
+	<Alert.Root>
+		<CheckCircle2Icon />
+		<Alert.Title>Success! Your changes have been saved</Alert.Title>
+		<Alert.Description>This is an alert with icon, title and description.</Alert.Description>
+	</Alert.Root>
+	<Alert.Root>
+		<PopcornIcon />
+		<Alert.Title>This Alert has a title and an icon. No description.</Alert.Title>
+	</Alert.Root>
+	<Alert.Root variant="destructive">
+		<AlertCircleIcon />
+		<Alert.Title>Unable to process your payment.</Alert.Title>
+		<Alert.Description>
+			<p>Please verify your billing information and try again.</p>
+			<ul class="list-inside list-disc text-sm">
+				<li>Check your card details</li>
+				<li>Ensure sufficient funds</li>
+				<li>Verify billing address</li>
+			</ul>
+		</Alert.Description>
+	</Alert.Root>
+</div>

package/src/showcase/demos/shadcn/attachment.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import FileCodeIcon from "@lucide/svelte/icons/file-code";
+	import XIcon from "@lucide/svelte/icons/x";
+	import * as Attachment from "../../../shadcn/attachment/index.js";
+	import { Spinner } from "../../../shadcn/spinner/index.js";
+
+	const images = [
+		{
+			name: "workspace.png",
+			meta: "PNG · 820 KB",
+			src: "https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=900&auto=format&fit=crop&q=80",
+			alt: "Workspace",
+		},
+		{
+			name: "desk-reference.jpg",
+			meta: "JPG · 1.1 MB",
+			src: "https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=900&auto=format&fit=crop&q=80",
+			alt: "Desk",
+		},
+		{
+			name: "office-reference.jpg",
+			meta: "JPG · 940 KB",
+			src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=900&auto=format&fit=crop&q=80",
+			alt: "Office",
+		},
+	];
+</script>
+
+<div class="mx-auto flex w-full max-w-sm flex-col gap-3 py-12">
+	<Attachment.Group>
+		{#each images as image (image.name)}
+			<Attachment.Root orientation="vertical">
+				<Attachment.Media variant="image">
+					<img src={image.src} alt={image.alt} />
+				</Attachment.Media>
+				<Attachment.Content>
+					<Attachment.Title>{image.name}</Attachment.Title>
+					<Attachment.Description>{image.meta}</Attachment.Description>
+				</Attachment.Content>
+			</Attachment.Root>
+		{/each}
+	</Attachment.Group>
+	<Attachment.Root state="uploading" class="w-full">
+		<Attachment.Media>
+			<Spinner />
+		</Attachment.Media>
+		<Attachment.Content>
+			<Attachment.Title>sales-dashboard.pdf</Attachment.Title>
+			<Attachment.Description>Uploading · 64%</Attachment.Description>
+		</Attachment.Content>
+		<Attachment.Actions>
+			<Attachment.Action aria-label="Cancel upload">
+				<XIcon />
+			</Attachment.Action>
+		</Attachment.Actions>
+	</Attachment.Root>
+	<Attachment.Root class="w-full">
+		<Attachment.Media>
+			<FileCodeIcon />
+		</Attachment.Media>
+		<Attachment.Content>
+			<Attachment.Title>message-renderer.tsx</Attachment.Title>
+			<Attachment.Description>TypeScript · 12 KB</Attachment.Description>
+		</Attachment.Content>
+		<Attachment.Actions>
+			<Attachment.Action aria-label="Remove message-renderer.tsx">
+				<XIcon />
+			</Attachment.Action>
+		</Attachment.Actions>
+	</Attachment.Root>
+</div>

package/src/showcase/demos/shadcn/avatar.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import * as Avatar from "../../../shadcn/avatar/index.js";
+</script>
+
+<div class="flex flex-row flex-wrap items-center gap-12">
+	<Avatar.Root>
+		<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
+		<Avatar.Fallback>CN</Avatar.Fallback>
+	</Avatar.Root>
+	<Avatar.Root class="rounded-lg">
+		<Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+		<Avatar.Fallback>ER</Avatar.Fallback>
+	</Avatar.Root>
+	<div
+		class="flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background *:data-[slot=avatar]:grayscale"
+	>
+		<Avatar.Root>
+			<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
+			<Avatar.Fallback>CN</Avatar.Fallback>
+		</Avatar.Root>
+		<Avatar.Root>
+			<Avatar.Image src="https://github.com/leerob.png" alt="@leerob" />
+			<Avatar.Fallback>LR</Avatar.Fallback>
+		</Avatar.Root>
+		<Avatar.Root>
+			<Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
+			<Avatar.Fallback>ER</Avatar.Fallback>
+		</Avatar.Root>
+	</div>
+</div>

package/src/showcase/demos/shadcn/badge.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+	import BadgeCheckIcon from "@lucide/svelte/icons/badge-check";
+	import { Badge } from "../../../shadcn/badge/index.js";
+</script>
+
+<div class="flex flex-col items-center gap-2">
+	<div class="flex w-full flex-wrap gap-2">
+		<Badge>Badge</Badge>
+		<Badge variant="secondary">Secondary</Badge>
+		<Badge variant="destructive">Destructive</Badge>
+		<Badge variant="outline">Outline</Badge>
+	</div>
+	<div class="flex w-full flex-wrap gap-2">
+		<Badge variant="secondary" class="bg-blue-500 text-white dark:bg-blue-600">
+			<BadgeCheckIcon />
+			Verified
+		</Badge>
+		<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">8</Badge>
+		<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="destructive">
+			99
+		</Badge>
+		<Badge class="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums" variant="outline">
+			20+
+		</Badge>
+	</div>
+</div>

package/src/showcase/demos/shadcn/breadcrumb.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import * as Breadcrumb from "../../../shadcn/breadcrumb/index.js";
+	import * as DropdownMenu from "../../../shadcn/dropdown-menu/index.js";
+</script>
+
+<Breadcrumb.Root>
+	<Breadcrumb.List>
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/">Home</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<DropdownMenu.Root>
+				<DropdownMenu.Trigger class="flex items-center gap-1">
+					<Breadcrumb.Ellipsis class="size-4" />
+					<span class="sr-only">Toggle menu</span>
+				</DropdownMenu.Trigger>
+				<DropdownMenu.Content align="start">
+					<DropdownMenu.Item>Documentation</DropdownMenu.Item>
+					<DropdownMenu.Item>Themes</DropdownMenu.Item>
+					<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+				</DropdownMenu.Content>
+			</DropdownMenu.Root>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
+		</Breadcrumb.Item>
+		<Breadcrumb.Separator />
+		<Breadcrumb.Item>
+			<Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
+		</Breadcrumb.Item>
+	</Breadcrumb.List>
+</Breadcrumb.Root>

package/src/showcase/demos/shadcn/bubble.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import * as Bubble from "../../../shadcn/bubble/index.js";
+</script>
+
+<div class="flex w-full max-w-sm flex-col gap-8 py-12">
+	<Bubble.Root align="end">
+		<Bubble.Content>Hey there! what's up?</Bubble.Content>
+	</Bubble.Root>
+	<Bubble.Group>
+		<Bubble.Root variant="muted">
+			<Bubble.Content>Hey! Want to see chat bubbles?</Bubble.Content>
+		</Bubble.Root>
+		<Bubble.Root variant="muted">
+			<Bubble.Content>
+				I can group messages, switch sides, and keep the whole thread easy to scan.
+			</Bubble.Content>
+			<Bubble.Reactions role="img" aria-label="Reaction: thumbs up">
+				<span>👍</span>
+			</Bubble.Reactions>
+		</Bubble.Root>
+	</Bubble.Group>
+	<Bubble.Root align="end">
+		<Bubble.Content>Sure. Hit me with your best demo.</Bubble.Content>
+	</Bubble.Root>
+	<Bubble.Root variant="muted">
+		<Bubble.Content>
+			Yes. You are reading a demo that is demoing itself. Very meta. Very on-brand.
+		</Bubble.Content>
+		<Bubble.Reactions role="img" aria-label="Reactions: thumbs up, fire, eyes, and 2 more">
+			<span>👍</span>
+			<span>🔥</span>
+			<span>👀</span>
+			<span>+2</span>
+		</Bubble.Reactions>
+	</Bubble.Root>
+</div>

package/src/showcase/demos/shadcn/button.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import ArrowUpIcon from "@lucide/svelte/icons/arrow-up";
+	import { Button } from "../../../shadcn/button/index.js";
+</script>
+
+<div class="flex flex-wrap items-center gap-2 md:flex-row">
+	<Button variant="outline">Button</Button>
+	<Button variant="outline" size="icon" aria-label="Submit">
+		<ArrowUpIcon />
+	</Button>
+</div>

package/src/showcase/demos/shadcn/calendar.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { getLocalTimeZone, today } from "@internationalized/date";
+	import { Calendar } from "../../../shadcn/calendar/index.js";
+
+	let value = today(getLocalTimeZone());
+</script>
+
+<Calendar type="single" bind:value class="rounded-md border shadow-sm" captionLayout="dropdown" />

package/src/showcase/demos/shadcn/card.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import * as Card from "../../../shadcn/card/index.js";
+	import { Button } from "../../../shadcn/button/index.js";
+	import { Input } from "../../../shadcn/input/index.js";
+	import { Label } from "../../../shadcn/label/index.js";
+</script>
+
+<Card.Root class="-my-4 w-full max-w-sm">
+	<Card.Header>
+		<Card.Title>Login to your account</Card.Title>
+		<Card.Description>Enter your email below to login to your account</Card.Description>
+		<Card.Action>
+			<Button variant="link">Sign Up</Button>
+		</Card.Action>
+	</Card.Header>
+	<Card.Content>
+		<form>
+			<div class="flex flex-col gap-6">
+				<div class="grid gap-2">
+					<Label for="email">Email</Label>
+					<Input id="email" type="email" placeholder="m@example.com" required />
+				</div>
+				<div class="grid gap-2">
+					<div class="flex items-center">
+						<Label for="password">Password</Label>
+						<a href="##" class="ms-auto inline-block text-sm underline-offset-4 hover:underline">
+							Forgot your password?
+						</a>
+					</div>
+					<Input id="password" type="password" required />
+				</div>
+			</div>
+		</form>
+	</Card.Content>
+	<Card.Footer class="flex-col gap-2">
+		<Button type="submit" class="w-full">Login</Button>
+		<Button variant="outline" class="w-full">Login with Google</Button>
+	</Card.Footer>
+</Card.Root>

package/src/showcase/demos/shadcn/checkbox.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	import { Checkbox } from "../../../shadcn/checkbox/index.js";
+	import { Label } from "../../../shadcn/label/index.js";
+</script>
+
+<div class="flex flex-col gap-6">
+	<div class="flex items-center gap-3">
+		<Checkbox id="terms" />
+		<Label for="terms">Accept terms and conditions</Label>
+	</div>
+	<div class="flex items-start gap-3">
+		<Checkbox id="terms-2" checked />
+		<div class="grid gap-2">
+			<Label for="terms-2">Accept terms and conditions</Label>
+			<p class="text-sm text-muted-foreground">
+				By clicking this checkbox, you agree to the terms and conditions.
+			</p>
+		</div>
+	</div>
+	<div class="flex items-start gap-3">
+		<Checkbox id="toggle" disabled />
+		<Label for="toggle">Enable notifications</Label>
+	</div>
+	<Label
+		class="flex items-start gap-3 rounded-lg border p-3 hover:bg-accent/50 has-[[aria-checked=true]]:border-blue-600 has-[[aria-checked=true]]:bg-blue-50 dark:has-[[aria-checked=true]]:border-blue-900 dark:has-[[aria-checked=true]]:bg-blue-950"
+	>
+		<Checkbox
+			id="toggle-2"
+			checked
+			class="data-[state=checked]:border-blue-600 data-[state=checked]:bg-blue-600 data-[state=checked]:text-white dark:data-[state=checked]:border-blue-700 dark:data-[state=checked]:bg-blue-700"
+		/>
+		<div class="grid gap-1.5 font-normal">
+			<p class="text-sm leading-none font-medium">Enable notifications</p>
+			<p class="text-sm text-muted-foreground">
+				You can enable or disable notifications at any time.
+			</p>
+		</div>
+	</Label>
+</div>

package/src/showcase/demos/shadcn/collapsible.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+	import * as Collapsible from "../../../shadcn/collapsible/index.js";
+	import { buttonVariants } from "../../../shadcn/button/index.js";
+</script>
+
+<Collapsible.Root class="w-[350px] space-y-2">
+	<div class="flex items-center justify-between space-x-4 px-4">
+		<h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
+		<Collapsible.Trigger class={buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}>
+			<ChevronsUpDownIcon />
+			<span class="sr-only">Toggle</span>
+		</Collapsible.Trigger>
+	</div>
+	<div class="rounded-md border px-4 py-3 font-mono text-sm">@huntabyte/bits-ui</div>
+	<Collapsible.Content class="space-y-2">
+		<div class="rounded-md border px-4 py-3 font-mono text-sm">@melt-ui/melt-ui</div>
+		<div class="rounded-md border px-4 py-3 font-mono text-sm">@sveltejs/svelte</div>
+	</Collapsible.Content>
+</Collapsible.Root>

package/src/showcase/demos/shadcn/command.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import CalculatorIcon from "@lucide/svelte/icons/calculator";
+	import CalendarIcon from "@lucide/svelte/icons/calendar";
+	import CreditCardIcon from "@lucide/svelte/icons/credit-card";
+	import SettingsIcon from "@lucide/svelte/icons/settings";
+	import SmileIcon from "@lucide/svelte/icons/smile";
+	import UserIcon from "@lucide/svelte/icons/user";
+	import * as Command from "../../../shadcn/command/index.js";
+</script>
+
+<Command.Root class="rounded-lg border shadow-md md:min-w-[450px]">
+	<Command.Input placeholder="Type a command or search..." />
+	<Command.List>
+		<Command.Empty>No results found.</Command.Empty>
+		<Command.Group heading="Suggestions">
+			<Command.Item>
+				<CalendarIcon />
+				<span>Calendar</span>
+			</Command.Item>
+			<Command.Item>
+				<SmileIcon />
+				<span>Search Emoji</span>
+			</Command.Item>
+			<Command.Item disabled>
+				<CalculatorIcon />
+				<span>Calculator</span>
+			</Command.Item>
+		</Command.Group>
+		<Command.Separator />
+		<Command.Group heading="Settings">
+			<Command.Item>
+				<UserIcon />
+				<span>Profile</span>
+				<Command.Shortcut>⌘P</Command.Shortcut>
+			</Command.Item>
+			<Command.Item>
+				<CreditCardIcon />
+				<span>Billing</span>
+				<Command.Shortcut>⌘B</Command.Shortcut>
+			</Command.Item>
+			<Command.Item>
+				<SettingsIcon />
+				<span>Settings</span>
+				<Command.Shortcut>⌘S</Command.Shortcut>
+			</Command.Item>
+		</Command.Group>
+	</Command.List>
+</Command.Root>

package/src/showcase/demos/shadcn/context-menu.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import * as ContextMenu from "../../../shadcn/context-menu/index.js";
+
+	let showBookmarks = $state(false);
+	let showFullURLs = $state(true);
+
+	let value = $state("pedro");
+</script>
+
+<ContextMenu.Root>
+	<ContextMenu.Trigger
+		class="flex h-[150px] w-[300px] items-center justify-center rounded-md border border-dashed text-sm"
+	>
+		Right click here
+	</ContextMenu.Trigger>
+	<ContextMenu.Content class="w-52">
+		<ContextMenu.Item>
+			Back
+			<ContextMenu.Shortcut>⌘[</ContextMenu.Shortcut>
+		</ContextMenu.Item>
+		<ContextMenu.Item disabled>
+			Forward
+			<ContextMenu.Shortcut>⌘]</ContextMenu.Shortcut>
+		</ContextMenu.Item>
+		<ContextMenu.Item>
+			Reload
+			<ContextMenu.Shortcut>⌘R</ContextMenu.Shortcut>
+		</ContextMenu.Item>
+		<ContextMenu.Sub>
+			<ContextMenu.SubTrigger>More Tools</ContextMenu.SubTrigger>
+			<ContextMenu.SubContent class="w-48">
+				<ContextMenu.Item>
+					Save Page As...
+					<ContextMenu.Shortcut>⇧⌘S</ContextMenu.Shortcut>
+				</ContextMenu.Item>
+				<ContextMenu.Item>Create Shortcut...</ContextMenu.Item>
+				<ContextMenu.Item>Name Window...</ContextMenu.Item>
+				<ContextMenu.Separator />
+				<ContextMenu.Item>Developer Tools</ContextMenu.Item>
+			</ContextMenu.SubContent>
+		</ContextMenu.Sub>
+		<ContextMenu.Separator />
+		<ContextMenu.CheckboxItem bind:checked={showBookmarks}>Show Bookmarks</ContextMenu.CheckboxItem>
+		<ContextMenu.CheckboxItem bind:checked={showFullURLs}>Show Full URLs</ContextMenu.CheckboxItem>
+		<ContextMenu.Separator />
+		<ContextMenu.RadioGroup bind:value>
+			<ContextMenu.Group>
+				<ContextMenu.Label>People</ContextMenu.Label>
+				<ContextMenu.RadioItem value="pedro">Pedro Duarte</ContextMenu.RadioItem>
+				<ContextMenu.RadioItem value="colm">Colm Tuite</ContextMenu.RadioItem>
+			</ContextMenu.Group>
+		</ContextMenu.RadioGroup>
+	</ContextMenu.Content>
+</ContextMenu.Root>

package/src/showcase/demos/shadcn/demo-harness.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+	// What ShadcnSection puts around a demo, so the test mounts what the page
+	// mounts: `input-group` reaches for a tooltip provider it does not create.
+	import type { Component } from "svelte";
+	import { TooltipProvider } from "../../../shadcn/tooltip/index.js";
+
+	let { Comp }: { Comp: Component } = $props();
+</script>
+
+<TooltipProvider>
+	<Comp />
+</TooltipProvider>

package/src/showcase/demos/shadcn/demos.test.ts

@@ -0,0 +1,20 @@
+// The demos are upstream's and arrive by script, so nothing reviews them before
+// they land. This is the gate: every one of them mounts and draws something.
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import Harness from "./demo-harness.svelte";
+import { SHADCN_DEMOS } from "./index.js";
+
+describe("shadcn demos", () => {
+  for (const demo of SHADCN_DEMOS) {
+    it(`${demo.name} renders`, () => {
+      const target = document.createElement("div");
+      document.body.appendChild(target);
+      const app = mount(Harness, { target, props: { Comp: demo.Comp } });
+      flushSync();
+      expect(target.innerHTML.length).toBeGreaterThan(0);
+      void unmount(app);
+      target.remove();
+    });
+  }
+});

package/src/showcase/demos/shadcn/dialog.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import * as Dialog from "../../../shadcn/dialog/index.js";
+	import { Button, buttonVariants } from "../../../shadcn/button/index.js";
+	import { Input } from "../../../shadcn/input/index.js";
+	import { Label } from "../../../shadcn/label/index.js";
+</script>
+
+<Dialog.Root>
+	<form>
+		<Dialog.Trigger type="button" class={buttonVariants({ variant: "outline" })}>
+			Open Dialog
+		</Dialog.Trigger>
+		<Dialog.Content class="sm:max-w-[425px]">
+			<Dialog.Header>
+				<Dialog.Title>Edit profile</Dialog.Title>
+				<Dialog.Description>
+					Make changes to your profile here. Click save when you&apos;re done.
+				</Dialog.Description>
+			</Dialog.Header>
+			<div class="grid gap-4">
+				<div class="grid gap-3">
+					<Label for="name-1">Name</Label>
+					<Input id="name-1" name="name" defaultValue="Pedro Duarte" />
+				</div>
+				<div class="grid gap-3">
+					<Label for="username-1">Username</Label>
+					<Input id="username-1" name="username" defaultValue="@peduarte" />
+				</div>
+			</div>
+			<Dialog.Footer>
+				<Dialog.Close type="button" class={buttonVariants({ variant: "outline" })}>
+					Cancel
+				</Dialog.Close>
+				<Button type="submit">Save changes</Button>
+			</Dialog.Footer>
+		</Dialog.Content>
+	</form>
+</Dialog.Root>

package/src/showcase/demos/shadcn/dropdown-menu.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+	import * as DropdownMenu from "../../../shadcn/dropdown-menu/index.js";
+	import { Button } from "../../../shadcn/button/index.js";
+</script>
+
+<DropdownMenu.Root>
+	<DropdownMenu.Trigger>
+		{#snippet child({ props })}
+			<Button {...props} variant="outline">Open</Button>
+		{/snippet}
+	</DropdownMenu.Trigger>
+	<DropdownMenu.Content class="w-56" align="start">
+		<DropdownMenu.Label>My Account</DropdownMenu.Label>
+		<DropdownMenu.Group>
+			<DropdownMenu.Item>
+				Profile
+				<DropdownMenu.Shortcut>⇧⌘P</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+			<DropdownMenu.Item>
+				Billing
+				<DropdownMenu.Shortcut>⌘B</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+			<DropdownMenu.Item>
+				Settings
+				<DropdownMenu.Shortcut>⌘S</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+			<DropdownMenu.Item>
+				Keyboard shortcuts
+				<DropdownMenu.Shortcut>⌘K</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Group>
+			<DropdownMenu.Item>Team</DropdownMenu.Item>
+			<DropdownMenu.Sub>
+				<DropdownMenu.SubTrigger>Invite users</DropdownMenu.SubTrigger>
+				<DropdownMenu.SubContent>
+					<DropdownMenu.Item>Email</DropdownMenu.Item>
+					<DropdownMenu.Item>Message</DropdownMenu.Item>
+					<DropdownMenu.Separator />
+					<DropdownMenu.Item>More...</DropdownMenu.Item>
+				</DropdownMenu.SubContent>
+			</DropdownMenu.Sub>
+			<DropdownMenu.Item>
+				New Team
+				<DropdownMenu.Shortcut>⌘+T</DropdownMenu.Shortcut>
+			</DropdownMenu.Item>
+		</DropdownMenu.Group>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item>GitHub</DropdownMenu.Item>
+		<DropdownMenu.Item>Support</DropdownMenu.Item>
+		<DropdownMenu.Item disabled>API</DropdownMenu.Item>
+		<DropdownMenu.Separator />
+		<DropdownMenu.Item>
+			Log out
+			<DropdownMenu.Shortcut>⇧⌘Q</DropdownMenu.Shortcut>
+		</DropdownMenu.Item>
+	</DropdownMenu.Content>
+</DropdownMenu.Root>

package/src/showcase/demos/shadcn/empty.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import ArrowUpRightIcon from "@lucide/svelte/icons/arrow-up-right";
+	import FolderCodeIcon from "@tabler/icons-svelte-runes/icons/folder-code";
+	import * as Empty from "../../../shadcn/empty/index.js";
+	import { Button } from "../../../shadcn/button/index.js";
+</script>
+
+<Empty.Root>
+	<Empty.Header>
+		<Empty.Media variant="icon">
+			<FolderCodeIcon />
+		</Empty.Media>
+		<Empty.Title>No Projects Yet</Empty.Title>
+		<Empty.Description>
+			You haven't created any projects yet. Get started by creating your first project.
+		</Empty.Description>
+	</Empty.Header>
+	<Empty.Content>
+		<div class="flex gap-2">
+			<Button>Create Project</Button>
+			<Button variant="outline">Import Project</Button>
+		</div>
+	</Empty.Content>
+	<Button variant="link" class="text-muted-foreground" size="sm">
+		<a href="#/">
+			Learn More <ArrowUpRightIcon class="inline" />
+		</a>
+	</Button>
+</Empty.Root>