@heyramzi/ui 7.0.0 → 8.1.0

package/src/showcase/demos/effects/text-effect.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-	import { TextEffect } from "../../../index.js";
-
-	let run = $state(0);
-</script>
-
-<div class="stage">
-	{#key run}
-		<TextEffect
-			text="Ship the thing."
-			per="char"
-			preset="blur-slide"
-			as="h3"
-			class="line"
-			onMount
-		/>
-		<TextEffect
-			text="Every primitive is CSS, no runtime."
-			preset="fade"
-			delay={400}
-			class="sub"
-			onMount
-		/>
-	{/key}
-	<button onclick={() => run++}>Replay</button>
-</div>
-
-<style>
-	.stage {
-		display: grid;
-		gap: 0.5rem;
-		justify-items: start;
-		padding: 1rem;
-	}
-	.stage :global(.line) {
-		margin: 0;
-		font-size: 1.25rem;
-		font-weight: 600;
-		color: var(--foreground);
-	}
-	.stage :global(.sub) {
-		margin: 0;
-		font-size: 0.8125rem;
-		color: var(--muted-foreground);
-	}
-	button {
-		margin-top: 0.5rem;
-		padding: 0.25rem 0.625rem;
-		font-size: 0.75rem;
-		color: var(--foreground);
-		background: var(--card);
-		border: 1px solid var(--border);
-		border-radius: 0.5rem;
-	}
-</style>

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

@@ -1,45 +0,0 @@
-<script lang="ts">
-	import * as Accordion from "../../../shadcn/accordion/index.js";
-</script>
-
-<Accordion.Root type="single" class="w-full sm:max-w-[70%]" value="item-1">
-	<Accordion.Item value="item-1">
-		<Accordion.Trigger>Product Information</Accordion.Trigger>
-		<Accordion.Content class="flex flex-col gap-4 text-balance">
-			<p>
-				Our flagship product combines cutting-edge technology with sleek design. Built with premium
-				materials, it offers unparalleled performance and reliability.
-			</p>
-			<p>
-				Key features include advanced processing capabilities, and an intuitive user interface
-				designed for both beginners and experts.
-			</p>
-		</Accordion.Content>
-	</Accordion.Item>
-	<Accordion.Item value="item-2">
-		<Accordion.Trigger>Shipping Details</Accordion.Trigger>
-		<Accordion.Content class="flex flex-col gap-4 text-balance">
-			<p>
-				We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5
-				business days, while express shipping ensures delivery within 1-2 business days.
-			</p>
-			<p>
-				All orders are carefully packaged and fully insured. Track your shipment in real-time
-				through our dedicated tracking portal.
-			</p>
-		</Accordion.Content>
-	</Accordion.Item>
-	<Accordion.Item value="item-3">
-		<Accordion.Trigger>Return Policy</Accordion.Trigger>
-		<Accordion.Content class="flex flex-col gap-4 text-balance">
-			<p>
-				We stand behind our products with a comprehensive 30-day return policy. If you&apos;re not
-				completely satisfied, simply return the item in its original condition.
-			</p>
-			<p>
-				Our hassle-free return process includes free return shipping and full refunds processed
-				within 48 hours of receiving the returned item.
-			</p>
-		</Accordion.Content>
-	</Accordion.Item>
-</Accordion.Root>

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

@@ -1,23 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-<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

@@ -1,30 +0,0 @@
-<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

@@ -1,26 +0,0 @@
-<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

@@ -1,34 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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

@@ -1,11 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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

@@ -1,39 +0,0 @@
-<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/code-block.svelte

@@ -1,80 +0,0 @@
-<script lang="ts">
-	import DownloadIcon from "@lucide/svelte/icons/download";
-	import FileCodeIcon from "@lucide/svelte/icons/file-code";
-	import WrapTextIcon from "@lucide/svelte/icons/text-wrap";
-	import * as CodeBlock from "../../../shadcn/code-block/index.js";
-	import { useHighlightedCode } from "../../../shadcn/hooks/use-highlighted-code.svelte.js";
-	import { Button } from "../../../shadcn/button/index.js";
-
-	const code = `import { streamText } from "ai"
-
-export async function POST(request: Request) {
-  const { messages } = await request.json()
-
-  const result = streamText({
-    model: "anthropic/claude-sonnet-4.5",
-    system: "You are a helpful assistant. Answer in one short paragraph.",
-    messages,
-  })
-
-  return result.toUIMessageStreamResponse()
-}`;
-
-	function download(value: string, filename: string) {
-		const url = URL.createObjectURL(new Blob([value], { type: "text/plain" }));
-		const link = document.createElement("a");
-		link.href = url;
-		link.download = filename;
-		link.click();
-		URL.revokeObjectURL(url);
-	}
-
-	let wrap = $state(false);
-
-	const lines = useHighlightedCode(
-		() => code,
-		() => "ts"
-	);
-</script>
-
-<div class="w-full max-w-lg">
-	<CodeBlock.Root>
-		<CodeBlock.Header>
-			<CodeBlock.Title>
-				<FileCodeIcon />
-				app/api/chat/route.ts
-			</CodeBlock.Title>
-			<CodeBlock.Actions>
-				<Button
-					variant="ghost"
-					size="sm"
-					icon
-					aria-label="Wrap lines"
-					aria-pressed={wrap}
-					class="aria-pressed:text-foreground"
-					onclick={() => (wrap = !wrap)}
-				>
-					<WrapTextIcon />
-				</Button>
-				<Button
-					variant="ghost"
-					size="sm"
-					icon
-					aria-label="Download"
-					onclick={() => download(code, "route.ts")}
-				>
-					<DownloadIcon />
-				</Button>
-				<CodeBlock.CopyButton value={code} />
-			</CodeBlock.Actions>
-		</CodeBlock.Header>
-		<CodeBlock.Content {wrap} lineNumbers>
-			{#each lines.current as line, index (index)}
-				<CodeBlock.Line
-					variant={index >= 5 && index <= 9 ? "highlighted" : "default"}
-					code={line}
-				/>
-			{/each}
-		</CodeBlock.Content>
-	</CodeBlock.Root>
-</div>

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

@@ -1,20 +0,0 @@
-<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

@@ -1,48 +0,0 @@
-<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

@@ -1,54 +0,0 @@
-<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>