@heyramzi/ui 6.1.0 → 8.0.0

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

@@ -1,115 +0,0 @@
-<script lang="ts">
-	import * as Field from "../../../shadcn/field/index.js";
-	import * as Select from "../../../shadcn/select/index.js";
-	import { Button } from "../../../shadcn/button/index.js";
-	import { Checkbox } from "../../../shadcn/checkbox/index.js";
-	import { Input } from "../../../shadcn/input/index.js";
-	import { Textarea } from "../../../shadcn/textarea/index.js";
-
-	let month = $state<string>();
-	let year = $state<string>();
-</script>
-
-<div class="w-full max-w-md">
-	<form>
-		<Field.Group>
-			<Field.Set>
-				<Field.Legend>Payment Method</Field.Legend>
-				<Field.Description>All transactions are secure and encrypted</Field.Description>
-				<Field.Group>
-					<Field.Field>
-						<Field.Label for="checkout-7j9-card-name-43j">Name on Card</Field.Label>
-						<Input id="checkout-7j9-card-name-43j" placeholder="John Doe" required />
-					</Field.Field>
-					<div class="grid grid-cols-3 gap-4">
-						<Field.Field class="col-span-2">
-							<Field.Label for="checkout-7j9-card-number-uw1">Card Number</Field.Label>
-							<Input id="checkout-7j9-card-number-uw1" placeholder="1234 5678 9012 3456" required />
-							<Field.Description>Enter your 16-digit number.</Field.Description>
-						</Field.Field>
-						<Field.Field class="col-span-1">
-							<Field.Label for="checkout-7j9-cvv">CVV</Field.Label>
-							<Input id="checkout-7j9-cvv" placeholder="123" required />
-						</Field.Field>
-					</div>
-					<div class="grid grid-cols-2 gap-4">
-						<Field.Field>
-							<Field.Label for="checkout-7j9-exp-month-ts6">Month</Field.Label>
-							<Select.Root type="single" bind:value={month}>
-								<Select.Trigger id="checkout-7j9-exp-month-ts6">
-									<span>
-										{month || "MM"}
-									</span>
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Item value="01">01</Select.Item>
-									<Select.Item value="02">02</Select.Item>
-									<Select.Item value="03">03</Select.Item>
-									<Select.Item value="04">04</Select.Item>
-									<Select.Item value="05">05</Select.Item>
-									<Select.Item value="06">06</Select.Item>
-									<Select.Item value="07">07</Select.Item>
-									<Select.Item value="08">08</Select.Item>
-									<Select.Item value="09">09</Select.Item>
-									<Select.Item value="10">10</Select.Item>
-									<Select.Item value="11">11</Select.Item>
-									<Select.Item value="12">12</Select.Item>
-								</Select.Content>
-							</Select.Root>
-						</Field.Field>
-						<Field.Field>
-							<Field.Label for="checkout-7j9-exp-year-f59">Year</Field.Label>
-							<Select.Root type="single" bind:value={year}>
-								<Select.Trigger id="checkout-7j9-exp-year-f59">
-									<span>
-										{year || "YYYY"}
-									</span>
-								</Select.Trigger>
-								<Select.Content>
-									<Select.Item value="2024">2024</Select.Item>
-									<Select.Item value="2025">2025</Select.Item>
-									<Select.Item value="2026">2026</Select.Item>
-									<Select.Item value="2027">2027</Select.Item>
-									<Select.Item value="2028">2028</Select.Item>
-									<Select.Item value="2029">2029</Select.Item>
-								</Select.Content>
-							</Select.Root>
-						</Field.Field>
-					</div>
-				</Field.Group>
-			</Field.Set>
-			<Field.Separator />
-			<Field.Set>
-				<Field.Legend>Billing Address</Field.Legend>
-				<Field.Description>
-					The billing address associated with your payment method
-				</Field.Description>
-				<Field.Group>
-					<Field.Field orientation="horizontal">
-						<Checkbox id="checkout-7j9-same-as-shipping-wgm" checked={true} />
-						<Field.Label for="checkout-7j9-same-as-shipping-wgm" class="font-normal">
-							Same as shipping address
-						</Field.Label>
-					</Field.Field>
-				</Field.Group>
-			</Field.Set>
-			<Field.Separator />
-			<Field.Set>
-				<Field.Group>
-					<Field.Field>
-						<Field.Label for="checkout-7j9-optional-comments">Comments</Field.Label>
-						<Textarea
-							id="checkout-7j9-optional-comments"
-							placeholder="Add any additional comments"
-							class="resize-none"
-						/>
-					</Field.Field>
-				</Field.Group>
-			</Field.Set>
-			<Field.Field orientation="horizontal">
-				<Button type="submit">Submit</Button>
-				<Button variant="outline" type="button">Cancel</Button>
-			</Field.Field>
-		</Field.Group>
-	</form>
-</div>

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

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import CalendarDaysIcon from "@lucide/svelte/icons/calendar-days";
-	import * as Avatar from "../../../shadcn/avatar/index.js";
-	import * as HoverCard from "../../../shadcn/hover-card/index.js";
-</script>
-
-<HoverCard.Root>
-	<HoverCard.Trigger
-		href="https://github.com/sveltejs"
-		target="_blank"
-		rel="noreferrer noopener"
-		class="rounded-sm underline-offset-4 hover:underline focus-visible:outline-2 focus-visible:outline-offset-8 focus-visible:outline-black"
-	>
-		@sveltejs
-	</HoverCard.Trigger>
-	<HoverCard.Content class="w-80">
-		<div class="flex justify-between space-x-4">
-			<Avatar.Root>
-				<Avatar.Image src="https://github.com/sveltejs.png" />
-				<Avatar.Fallback>SK</Avatar.Fallback>
-			</Avatar.Root>
-			<div class="space-y-1">
-				<h4 class="text-sm font-semibold">@sveltejs</h4>
-				<p class="text-sm">Cybernetically enhanced web apps.</p>
-				<div class="flex items-center pt-2">
-					<CalendarDaysIcon class="me-2 size-4 opacity-70" />
-					<span class="text-xs text-muted-foreground"> Joined September 2022 </span>
-				</div>
-			</div>
-		</div>
-	</HoverCard.Content>
-</HoverCard.Root>

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

@@ -1,358 +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 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 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";
-
-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: "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: "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,
-  },
-];

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.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>