@heyramzi/ui 7.0.0 → 8.1.0

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

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

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

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

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

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

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>