@heyramzi/ui 7.0.0 → 8.1.0

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

@@ -1,382 +0,0 @@
-/* Generated by scripts/sync-shadcn.mjs. Do not edit: the demos are upstream's
- * own, and the sync rewrites this list. */
-import type { Component } from "svelte";
-import AccordionDemo from "./accordion.svelte";
-import AlertDemo from "./alert.svelte";
-import AlertDialogDemo from "./alert-dialog.svelte";
-import AttachmentDemo from "./attachment.svelte";
-import AvatarDemo from "./avatar.svelte";
-import BadgeDemo from "./badge.svelte";
-import BreadcrumbDemo from "./breadcrumb.svelte";
-import BubbleDemo from "./bubble.svelte";
-import ButtonDemo from "./button.svelte";
-import CalendarDemo from "./calendar.svelte";
-import CardDemo from "./card.svelte";
-import CheckboxDemo from "./checkbox.svelte";
-import CodeBlockDemo from "./code-block.svelte";
-import CollapsibleDemo from "./collapsible.svelte";
-import CommandDemo from "./command.svelte";
-import ContextMenuDemo from "./context-menu.svelte";
-import DialogDemo from "./dialog.svelte";
-import DropdownMenuDemo from "./dropdown-menu.svelte";
-import EmptyDemo from "./empty.svelte";
-import FieldDemo from "./field.svelte";
-import HoverCardDemo from "./hover-card.svelte";
-import InputDemo from "./input.svelte";
-import InputOtpDemo from "./input-otp.svelte";
-import LabelDemo from "./label.svelte";
-import MarkerDemo from "./marker.svelte";
-import MessageDemo from "./message.svelte";
-import MessageScrollerDemo from "./message-scroller.svelte";
-import PopoverDemo from "./popover.svelte";
-import ProgressDemo from "./progress.svelte";
-import RadioGroupDemo from "./radio-group.svelte";
-import ScrollAreaDemo from "./scroll-area.svelte";
-import SelectDemo from "./select.svelte";
-import SeparatorDemo from "./separator.svelte";
-import SheetDemo from "./sheet.svelte";
-import SkeletonDemo from "./skeleton.svelte";
-import SliderDemo from "./slider.svelte";
-import SonnerDemo from "./sonner.svelte";
-import SpinnerDemo from "./spinner.svelte";
-import SwitchDemo from "./switch.svelte";
-import TableDemo from "./table.svelte";
-import TabsDemo from "./tabs.svelte";
-import TextareaDemo from "./textarea.svelte";
-import ToggleDemo from "./toggle.svelte";
-import ToggleGroupDemo from "./toggle-group.svelte";
-import TooltipDemo from "./tooltip.svelte";
-import TraceDemo from "./trace.svelte";
-
-export type ShadcnDemo = {
-  name: string;
-  title: string;
-  note: string;
-  path: string;
-  Comp: Component;
-};
-
-export const SHADCN_DEMOS: ShadcnDemo[] = [
-  {
-    name: "accordion",
-    title: "Accordion",
-    note: "A vertically stacked set of interactive headings that each reveal a section of content.",
-    path: 'import * as Accordion from "@heyramzi/ui/shadcn/accordion";',
-    Comp: AccordionDemo,
-  },
-  {
-    name: "alert",
-    title: "Alert",
-    note: "Displays a callout for user attention.",
-    path: 'import * as Alert from "@heyramzi/ui/shadcn/alert";',
-    Comp: AlertDemo,
-  },
-  {
-    name: "alert-dialog",
-    title: "Alert Dialog",
-    note: "A modal dialog that interrupts the user with important content and expects a response.",
-    path: 'import * as AlertDialog from "@heyramzi/ui/shadcn/alert-dialog";\nimport { buttonVariants } from "@heyramzi/ui/shadcn/button";',
-    Comp: AlertDialogDemo,
-  },
-  {
-    name: "attachment",
-    title: "Attachment",
-    note: "Displays a file or image attachment with media, metadata, upload state, and actions.",
-    path: 'import * as Attachment from "@heyramzi/ui/shadcn/attachment";\nimport { Spinner } from "@heyramzi/ui/shadcn/spinner";',
-    Comp: AttachmentDemo,
-  },
-  {
-    name: "avatar",
-    title: "Avatar",
-    note: "An image element with a fallback for representing the user.",
-    path: 'import * as Avatar from "@heyramzi/ui/shadcn/avatar";',
-    Comp: AvatarDemo,
-  },
-  {
-    name: "badge",
-    title: "Badge",
-    note: "Displays a badge or a component that looks like a badge.",
-    path: 'import { Badge } from "@heyramzi/ui/shadcn/badge";',
-    Comp: BadgeDemo,
-  },
-  {
-    name: "breadcrumb",
-    title: "Breadcrumb",
-    note: "Displays the path to the current resource using a hierarchy of links.",
-    path: 'import * as Breadcrumb from "@heyramzi/ui/shadcn/breadcrumb";\nimport * as DropdownMenu from "@heyramzi/ui/shadcn/dropdown-menu";',
-    Comp: BreadcrumbDemo,
-  },
-  {
-    name: "bubble",
-    title: "Bubble",
-    note: "Displays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and collapsible content.",
-    path: 'import * as Bubble from "@heyramzi/ui/shadcn/bubble";',
-    Comp: BubbleDemo,
-  },
-  {
-    name: "button",
-    title: "Button",
-    note: "Displays a button or a component that looks like a button.",
-    path: 'import { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: ButtonDemo,
-  },
-  {
-    name: "calendar",
-    title: "Calendar",
-    note: "A calendar component that allows users to select a date or a range of dates.",
-    path: 'import { Calendar } from "@heyramzi/ui/shadcn/calendar";',
-    Comp: CalendarDemo,
-  },
-  {
-    name: "card",
-    title: "Card",
-    note: "Displays a card with header, content, and footer.",
-    path: 'import * as Card from "@heyramzi/ui/shadcn/card";\nimport { Button } from "@heyramzi/ui/shadcn/button";\nimport { Input } from "@heyramzi/ui/shadcn/input";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: CardDemo,
-  },
-  {
-    name: "checkbox",
-    title: "Checkbox",
-    note: "A control that allows the user to toggle between checked and not checked.",
-    path: 'import { Checkbox } from "@heyramzi/ui/shadcn/checkbox";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: CheckboxDemo,
-  },
-  {
-    name: "code-block",
-    title: "Code Block",
-    note: "Displays code, terminal output and diffs with an optional header, line numbers and a copy button.",
-    path: 'import * as CodeBlock from "@heyramzi/ui/shadcn/code-block";\nimport { useHighlightedCode } from "@heyramzi/ui/shadcn/hooks/use-highlighted-code.svelte.js";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: CodeBlockDemo,
-  },
-  {
-    name: "collapsible",
-    title: "Collapsible",
-    note: "An interactive component which expands/collapses a panel.",
-    path: 'import * as Collapsible from "@heyramzi/ui/shadcn/collapsible";\nimport { buttonVariants } from "@heyramzi/ui/shadcn/button";',
-    Comp: CollapsibleDemo,
-  },
-  {
-    name: "command",
-    title: "Command",
-    note: "Command menu for search and quick actions.",
-    path: 'import * as Command from "@heyramzi/ui/shadcn/command";',
-    Comp: CommandDemo,
-  },
-  {
-    name: "context-menu",
-    title: "Context Menu",
-    note: "Displays a menu of actions triggered by a right click.",
-    path: 'import * as ContextMenu from "@heyramzi/ui/shadcn/context-menu";',
-    Comp: ContextMenuDemo,
-  },
-  {
-    name: "dialog",
-    title: "Dialog",
-    note: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.",
-    path: 'import * as Dialog from "@heyramzi/ui/shadcn/dialog";\nimport { Button, buttonVariants } from "@heyramzi/ui/shadcn/button";\nimport { Input } from "@heyramzi/ui/shadcn/input";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: DialogDemo,
-  },
-  {
-    name: "dropdown-menu",
-    title: "Dropdown Menu",
-    note: "Displays a menu to the user — such as a set of actions or functions — triggered by a button.",
-    path: 'import * as DropdownMenu from "@heyramzi/ui/shadcn/dropdown-menu";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: DropdownMenuDemo,
-  },
-  {
-    name: "empty",
-    title: "Empty",
-    note: "Use the Empty component to display an empty state.",
-    path: 'import * as Empty from "@heyramzi/ui/shadcn/empty";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: EmptyDemo,
-  },
-  {
-    name: "field",
-    title: "Field",
-    note: "Combine labels, controls, and help text to compose accessible form fields and grouped inputs.",
-    path: 'import * as Field from "@heyramzi/ui/shadcn/field";\nimport * as Select from "@heyramzi/ui/shadcn/select";\nimport { Button } from "@heyramzi/ui/shadcn/button";\nimport { Checkbox } from "@heyramzi/ui/shadcn/checkbox";\nimport { Input } from "@heyramzi/ui/shadcn/input";\nimport { Textarea } from "@heyramzi/ui/shadcn/textarea";',
-    Comp: FieldDemo,
-  },
-  {
-    name: "hover-card",
-    title: "Hover Card",
-    note: "For sighted users to preview content available behind a link.",
-    path: 'import * as Avatar from "@heyramzi/ui/shadcn/avatar";\nimport * as HoverCard from "@heyramzi/ui/shadcn/hover-card";',
-    Comp: HoverCardDemo,
-  },
-  {
-    name: "input",
-    title: "Input",
-    note: "A text input component for forms and user data entry with built-in styling and accessibility features.",
-    path: 'import { Input } from "@heyramzi/ui/shadcn/input";',
-    Comp: InputDemo,
-  },
-  {
-    name: "input-otp",
-    title: "Input OTP",
-    note: "Accessible one-time password component with copy-paste functionality.",
-    path: 'import * as InputOTP from "@heyramzi/ui/shadcn/input-otp";',
-    Comp: InputOtpDemo,
-  },
-  {
-    name: "label",
-    title: "Label",
-    note: "Renders an accessible label associated with controls.",
-    path: 'import { Checkbox } from "@heyramzi/ui/shadcn/checkbox";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: LabelDemo,
-  },
-  {
-    name: "marker",
-    title: "Marker",
-    note: "Displays an inline status, system note, bordered row, or labeled separator in a conversation.",
-    path: 'import * as Marker from "@heyramzi/ui/shadcn/marker";\nimport { Spinner } from "@heyramzi/ui/shadcn/spinner";',
-    Comp: MarkerDemo,
-  },
-  {
-    name: "message",
-    title: "Message",
-    note: "Displays a message in a conversation, with optional avatar, header, footer, and alignment.",
-    path: 'import * as Avatar from "@heyramzi/ui/shadcn/avatar";\nimport * as Bubble from "@heyramzi/ui/shadcn/bubble";\nimport * as Marker from "@heyramzi/ui/shadcn/marker";\nimport * as Message from "@heyramzi/ui/shadcn/message";',
-    Comp: MessageDemo,
-  },
-  {
-    name: "message-scroller",
-    title: "Message Scroller",
-    note: "A chat scroll container that anchors turns, opens saved transcripts, follows streamed responses, loads history without jumping, and jumps to any message.",
-    path: 'import * as Card from "@heyramzi/ui/shadcn/card";\nimport * as DropdownMenu from "@heyramzi/ui/shadcn/dropdown-menu";\nimport * as Empty from "@heyramzi/ui/shadcn/empty";\nimport * as InputGroup from "@heyramzi/ui/shadcn/input-group";\nimport * as MessageScroller from "@heyramzi/ui/shadcn/message-scroller";\nimport * as Tooltip from "@heyramzi/ui/shadcn/tooltip";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: MessageScrollerDemo,
-  },
-  {
-    name: "popover",
-    title: "Popover",
-    note: "Displays rich content in a portal, triggered by a button.",
-    path: 'import * as Popover from "@heyramzi/ui/shadcn/popover";\nimport { buttonVariants } from "@heyramzi/ui/shadcn/button";\nimport { Input } from "@heyramzi/ui/shadcn/input";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: PopoverDemo,
-  },
-  {
-    name: "progress",
-    title: "Progress",
-    note: "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
-    path: 'import { Progress } from "@heyramzi/ui/shadcn/progress";',
-    Comp: ProgressDemo,
-  },
-  {
-    name: "radio-group",
-    title: "Radio Group",
-    note: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
-    path: 'import * as RadioGroup from "@heyramzi/ui/shadcn/radio-group";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: RadioGroupDemo,
-  },
-  {
-    name: "scroll-area",
-    title: "Scroll Area",
-    note: "Augments native scroll functionality for custom, cross-browser styling.",
-    path: 'import { ScrollArea } from "@heyramzi/ui/shadcn/scroll-area";\nimport { Separator } from "@heyramzi/ui/shadcn/separator";',
-    Comp: ScrollAreaDemo,
-  },
-  {
-    name: "select",
-    title: "Select",
-    note: "Displays a list of options for the user to pick from—triggered by a button.",
-    path: 'import * as Select from "@heyramzi/ui/shadcn/select";',
-    Comp: SelectDemo,
-  },
-  {
-    name: "separator",
-    title: "Separator",
-    note: "Visually or semantically separates content.",
-    path: 'import { Separator } from "@heyramzi/ui/shadcn/separator";',
-    Comp: SeparatorDemo,
-  },
-  {
-    name: "sheet",
-    title: "Sheet",
-    note: "Extends the Dialog component to display content that complements the main content of the screen.",
-    path: 'import * as Sheet from "@heyramzi/ui/shadcn/sheet";\nimport { Button } from "@heyramzi/ui/shadcn/button";\nimport { buttonVariants } from "@heyramzi/ui/shadcn/button";\nimport { Input } from "@heyramzi/ui/shadcn/input";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: SheetDemo,
-  },
-  {
-    name: "skeleton",
-    title: "Skeleton",
-    note: "Use to show a placeholder while content is loading.",
-    path: 'import { Skeleton } from "@heyramzi/ui/shadcn/skeleton";',
-    Comp: SkeletonDemo,
-  },
-  {
-    name: "slider",
-    title: "Slider",
-    note: "An input where the user selects a value from within a given range.",
-    path: 'import { Slider } from "@heyramzi/ui/shadcn/slider";',
-    Comp: SliderDemo,
-  },
-  {
-    name: "sonner",
-    title: "Sonner",
-    note: "An opinionated toast component for Svelte.",
-    path: 'import { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: SonnerDemo,
-  },
-  {
-    name: "spinner",
-    title: "Spinner",
-    note: "An indicator that can be used to show a loading state.",
-    path: 'import { Spinner } from "@heyramzi/ui/shadcn/spinner";',
-    Comp: SpinnerDemo,
-  },
-  {
-    name: "switch",
-    title: "Switch",
-    note: "A control that allows the user to toggle between checked and not checked.",
-    path: 'import { Label } from "@heyramzi/ui/shadcn/label";\nimport { Switch } from "@heyramzi/ui/shadcn/switch";',
-    Comp: SwitchDemo,
-  },
-  {
-    name: "table",
-    title: "Table",
-    note: "A responsive table component.",
-    path: 'import * as Table from "@heyramzi/ui/shadcn/table";',
-    Comp: TableDemo,
-  },
-  {
-    name: "tabs",
-    title: "Tabs",
-    note: "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
-    path: 'import * as Card from "@heyramzi/ui/shadcn/card";\nimport * as Tabs from "@heyramzi/ui/shadcn/tabs";\nimport { Button } from "@heyramzi/ui/shadcn/button";\nimport { Input } from "@heyramzi/ui/shadcn/input";\nimport { Label } from "@heyramzi/ui/shadcn/label";',
-    Comp: TabsDemo,
-  },
-  {
-    name: "textarea",
-    title: "Textarea",
-    note: "Displays a form textarea or a component that looks like a textarea.",
-    path: 'import { Textarea } from "@heyramzi/ui/shadcn/textarea";',
-    Comp: TextareaDemo,
-  },
-  {
-    name: "toggle",
-    title: "Toggle",
-    note: "A two-state button that can be either on or off.",
-    path: 'import { Toggle } from "@heyramzi/ui/shadcn/toggle";',
-    Comp: ToggleDemo,
-  },
-  {
-    name: "toggle-group",
-    title: "Toggle Group",
-    note: "A set of two-state buttons that can be toggled on or off.",
-    path: 'import * as ToggleGroup from "@heyramzi/ui/shadcn/toggle-group";',
-    Comp: ToggleGroupDemo,
-  },
-  {
-    name: "tooltip",
-    title: "Tooltip",
-    note: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
-    path: 'import * as Tooltip from "@heyramzi/ui/shadcn/tooltip";\nimport { buttonVariants } from "@heyramzi/ui/shadcn/button";',
-    Comp: TooltipDemo,
-  },
-  {
-    name: "trace",
-    title: "Trace",
-    note: "The building block for reasoning, tool calls, sources and more.",
-    path: 'import * as Bubble from "@heyramzi/ui/shadcn/bubble";\nimport * as CodeBlock from "@heyramzi/ui/shadcn/code-block";\nimport * as Message from "@heyramzi/ui/shadcn/message";\nimport * as Trace from "@heyramzi/ui/shadcn/trace";\nimport { Button } from "@heyramzi/ui/shadcn/button";',
-    Comp: TraceDemo,
-  },
-];

package/src/showcase/demos/shadcn/input-otp.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import * as InputOTP from "../../../shadcn/input-otp/index.js";
-</script>
-
-<InputOTP.Root maxlength={6}>
-	{#snippet children({ cells })}
-		<InputOTP.Group>
-			{#each cells.slice(0, 3) as cell (cell)}
-				<InputOTP.Slot {cell} />
-			{/each}
-		</InputOTP.Group>
-		<InputOTP.Separator />
-		<InputOTP.Group>
-			{#each cells.slice(3, 6) as cell (cell)}
-				<InputOTP.Slot {cell} />
-			{/each}
-		</InputOTP.Group>
-	{/snippet}
-</InputOTP.Root>

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

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { Input } from "../../../shadcn/input/index.js";
-</script>
-
-<Input type="email" placeholder="Email" class="max-w-xs" />

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

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { Checkbox } from "../../../shadcn/checkbox/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<div>
-	<div class="flex items-center space-x-2">
-		<Checkbox id="terms" />
-		<Label for="terms">Accept terms and conditions</Label>
-	</div>
-</div>

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

@@ -1,30 +0,0 @@
-<script lang="ts">
-	import GitBranchIcon from "@lucide/svelte/icons/git-branch";
-	import SearchIcon from "@lucide/svelte/icons/search";
-	import * as Marker from "../../../shadcn/marker/index.js";
-	import { Spinner } from "../../../shadcn/spinner/index.js";
-</script>
-
-<div class="flex w-full max-w-sm flex-col gap-8 py-12">
-	<Marker.Root>
-		<Marker.Icon>
-			<GitBranchIcon />
-		</Marker.Icon>
-		<Marker.Content>Switched to a new branch</Marker.Content>
-	</Marker.Root>
-	<Marker.Root role="status">
-		<Marker.Icon>
-			<Spinner />
-		</Marker.Icon>
-		<Marker.Content class="shimmer">Thinking...</Marker.Content>
-	</Marker.Root>
-	<Marker.Root variant="separator">
-		<Marker.Content>Conversation compacted</Marker.Content>
-	</Marker.Root>
-	<Marker.Root>
-		<Marker.Icon>
-			<SearchIcon />
-		</Marker.Icon>
-		<Marker.Content>Explored 4 files</Marker.Content>
-	</Marker.Root>
-</div>

package/src/showcase/demos/shadcn/message-scroller.svelte

@@ -1,44 +0,0 @@
-<!-- Ours, not upstream's: theirs streams through @ai-sdk/svelte and docs-only helpers this package doesn't ship. -->
-<script lang="ts">
-	import * as Bubble from "../../../shadcn/bubble/index.js";
-	import * as Message from "../../../shadcn/message/index.js";
-	import * as MessageScroller from "../../../shadcn/message-scroller/index.js";
-	import { Response } from "../../../ai/index.js";
-
-	const turns = [
-		{ id: "q1", role: "user", text: "How should I clean up our beam effects?" },
-		{
-			id: "a1",
-			role: "assistant",
-			text: "Here is the plan:\n\n1. **Extract** the beam into the shared package\n2. **Showcase** it on the Effects page\n3. **Migrate** both apps onto the shared copy",
-		},
-		{ id: "q2", role: "user", text: "And the old copies?" },
-		{ id: "a2", role: "assistant", text: "Delete them in the same change, so nothing imports the stale one." },
-	] as const;
-</script>
-
-<div class="h-68 w-full max-w-md">
-	<MessageScroller.Provider>
-		<MessageScroller.Root>
-			<MessageScroller.Viewport>
-				<MessageScroller.Content class="gap-4 p-1">
-					{#each turns as turn (turn.id)}
-						{@const user = turn.role === "user"}
-						<MessageScroller.Item messageId={turn.id} scrollAnchor={user}>
-							<Message.Root align={user ? "end" : "start"}>
-								<Message.Content>
-									<Bubble.Root variant={user ? "default" : "muted"} align={user ? "end" : "start"}>
-										<Bubble.Content>
-											{#if user}{turn.text}{:else}<Response content={turn.text} />{/if}
-										</Bubble.Content>
-									</Bubble.Root>
-								</Message.Content>
-							</Message.Root>
-						</MessageScroller.Item>
-					{/each}
-				</MessageScroller.Content>
-			</MessageScroller.Viewport>
-			<MessageScroller.Button />
-		</MessageScroller.Root>
-	</MessageScroller.Provider>
-</div>

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

@@ -1,75 +0,0 @@
-<script lang="ts">
-	import * as Avatar from "../../../shadcn/avatar/index.js";
-	import * as Bubble from "../../../shadcn/bubble/index.js";
-	import * as Marker from "../../../shadcn/marker/index.js";
-	import * as Message from "../../../shadcn/message/index.js";
-</script>
-
-<div class="flex w-full max-w-sm flex-col gap-6 py-12">
-	<Message.Root align="end">
-		<Message.Avatar>
-			<Avatar.Root>
-				<Avatar.Image src="/avatars/10.png" alt="@me" />
-				<Avatar.Fallback>ME</Avatar.Fallback>
-			</Avatar.Root>
-		</Message.Avatar>
-		<Message.Content>
-			<Bubble.Root>
-				<Bubble.Content>Deploying to prod real quick.</Bubble.Content>
-			</Bubble.Root>
-		</Message.Content>
-	</Message.Root>
-	<Message.Root>
-		<Message.Avatar>
-			<Avatar.Root>
-				<Avatar.Image src="/avatars/02.png" alt="@rabbit" />
-				<Avatar.Fallback>R</Avatar.Fallback>
-			</Avatar.Root>
-		</Message.Avatar>
-		<Message.Content>
-			<Bubble.Root variant="muted">
-				<Bubble.Content>It's 4:55 PM. On a Friday.</Bubble.Content>
-			</Bubble.Root>
-		</Message.Content>
-	</Message.Root>
-	<Message.Root align="end">
-		<Message.Avatar>
-			<Avatar.Root>
-				<Avatar.Image src="/avatars/10.png" alt="@me" />
-				<Avatar.Fallback>ME</Avatar.Fallback>
-			</Avatar.Root>
-		</Message.Avatar>
-		<Message.Content>
-			<Bubble.Root>
-				<Bubble.Content>It's a one-line change.</Bubble.Content>
-			</Bubble.Root>
-			<Message.Footer>Delivered</Message.Footer>
-		</Message.Content>
-	</Message.Root>
-	<Message.Root>
-		<Message.Avatar>
-			<Avatar.Root>
-				<Avatar.Image src="/avatars/02.png" alt="@rabbit" />
-				<Avatar.Fallback>R</Avatar.Fallback>
-			</Avatar.Root>
-		</Message.Avatar>
-		<Message.Content>
-			<Bubble.Group>
-				<Bubble.Root variant="muted">
-					<Bubble.Content>It's always a one-line change 😭.</Bubble.Content>
-				</Bubble.Root>
-				<Bubble.Root variant="muted">
-					<Bubble.Content>Alright, let me take a look.</Bubble.Content>
-					<Bubble.Reactions aria-label="Reactions: thumbs up">
-						<span>👍</span>
-					</Bubble.Reactions>
-				</Bubble.Root>
-			</Bubble.Group>
-		</Message.Content>
-	</Message.Root>
-	<Marker.Root role="status">
-		<Marker.Content class="shimmer">
-			<span class="font-medium">Oliver</span> is typing...
-		</Marker.Content>
-	</Marker.Root>
-</div>

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

@@ -1,36 +0,0 @@
-<script lang="ts">
-	import * as Popover from "../../../shadcn/popover/index.js";
-	import { buttonVariants } from "../../../shadcn/button/index.js";
-	import { Input } from "../../../shadcn/input/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<Popover.Root>
-	<Popover.Trigger class={buttonVariants({ variant: "outline" })}>Open popover</Popover.Trigger>
-	<Popover.Content class="w-80">
-		<div class="grid gap-4">
-			<div class="space-y-2">
-				<h4 class="leading-none font-medium">Dimensions</h4>
-				<p class="text-sm text-muted-foreground">Set the dimensions for the layer.</p>
-			</div>
-			<div class="grid gap-2">
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label for="width">Width</Label>
-					<Input id="width" value="100%" class="col-span-2 h-8" />
-				</div>
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label for="maxWidth">Max. width</Label>
-					<Input id="maxWidth" value="300px" class="col-span-2 h-8" />
-				</div>
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label for="height">Height</Label>
-					<Input id="height" value="25px" class="col-span-2 h-8" />
-				</div>
-				<div class="grid grid-cols-3 items-center gap-4">
-					<Label for="maxHeight">Max. height</Label>
-					<Input id="maxHeight" value="none" class="col-span-2 h-8" />
-				</div>
-			</div>
-		</div>
-	</Popover.Content>
-</Popover.Root>

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

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import { onMount } from "svelte";
-	import { Progress } from "../../../shadcn/progress/index.js";
-
-	let value = $state(13);
-
-	onMount(() => {
-		const timer = setTimeout(() => (value = 66), 500);
-		return () => clearTimeout(timer);
-	});
-</script>
-
-<Progress {value} max={100} class="w-[60%]" />

package/src/showcase/demos/shadcn/radio-group.svelte

@@ -1,19 +0,0 @@
-<script lang="ts">
-	import * as RadioGroup from "../../../shadcn/radio-group/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<RadioGroup.Root value="comfortable">
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="default" id="r1" />
-		<Label for="r1">Default</Label>
-	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="comfortable" id="r2" />
-		<Label for="r2">Comfortable</Label>
-	</div>
-	<div class="flex items-center space-x-2">
-		<RadioGroup.Item value="compact" id="r3" />
-		<Label for="r3">Compact</Label>
-	</div>
-</RadioGroup.Root>

package/src/showcase/demos/shadcn/scroll-area.svelte

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { ScrollArea } from "../../../shadcn/scroll-area/index.js";
-	import { Separator } from "../../../shadcn/separator/index.js";
-
-	const tags = Array.from({ length: 50 }).map((_, i, a) => `v1.2.0-beta.${a.length - i}`);
-</script>
-
-<ScrollArea class="h-72 w-48 rounded-md border">
-	<div class="p-4">
-		<h4 class="mb-4 text-sm leading-none font-medium">Tags</h4>
-		{#each tags as tag (tag)}
-			<div class="text-sm">
-				{tag}
-			</div>
-			<Separator class="my-2" />
-		{/each}
-	</div>
-</ScrollArea>