@heyramzi/ui 6.1.0 → 8.0.0

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>

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

@@ -1,29 +0,0 @@
-<script lang="ts">
-	import * as Select from "../../../shadcn/select/index.js";
-
-	const fruits = [
-		{ value: "apple", label: "Apple" },
-		{ value: "banana", label: "Banana" },
-		{ value: "blueberry", label: "Blueberry" },
-		{ value: "grapes", label: "Grapes", disabled: true },
-		{ value: "pineapple", label: "Pineapple" },
-	];
-
-	let value = $state("");
-</script>
-
-<Select.Root type="single" name="favoriteFruit" items={fruits} bind:value>
-	<Select.Trigger class="w-[180px]">
-		<Select.Value placeholder="Select a fruit" />
-	</Select.Trigger>
-	<Select.Content>
-		<Select.Group>
-			<Select.Label>Fruits</Select.Label>
-			{#each fruits as fruit (fruit.value)}
-				<Select.Item value={fruit.value} label={fruit.label} disabled={fruit.disabled}>
-					{fruit.label}
-				</Select.Item>
-			{/each}
-		</Select.Group>
-	</Select.Content>
-</Select.Root>

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

@@ -1,12 +0,0 @@
-<script lang="ts">
-	import { Separator } from "../../../shadcn/separator/index.js";
-</script>
-
-<div class="flex max-w-sm flex-col gap-4 text-sm">
-	<div class="flex flex-col gap-1.5">
-		<div class="leading-none font-medium">shadcn/ui</div>
-		<div class="text-muted-foreground">The Foundation for your Design System</div>
-	</div>
-	<Separator />
-	<div>A set of beautifully designed components that you can customize, extend, and build on.</div>
-</div>

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

@@ -1,48 +0,0 @@
-<script lang="ts">
-	import * as Sheet from "../../../shadcn/sheet/index.js";
-	import { Button } from "../../../shadcn/button/index.js";
-	import { buttonVariants } from "../../../shadcn/button/index.js";
-	import { Input } from "../../../shadcn/input/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<div class="flex flex-wrap gap-2">
-<Sheet.Root>
-	<Sheet.Trigger class={buttonVariants({ variant: "outline" })}>Open from the right</Sheet.Trigger>
-	<Sheet.Content side="right">
-		<Sheet.Header>
-			<Sheet.Title>Edit profile</Sheet.Title>
-			<Sheet.Description>
-				Make changes to your profile here. Click save when you're done.
-			</Sheet.Description>
-		</Sheet.Header>
-		<div class="grid flex-1 auto-rows-min gap-6 px-4">
-			<div class="grid gap-3">
-				<Label for="name" class="text-end">Name</Label>
-				<Input id="name" value="Pedro Duarte" />
-			</div>
-			<div class="grid gap-3">
-				<Label for="username" class="text-end">Username</Label>
-				<Input id="username" value="@peduarte" />
-			</div>
-		</div>
-		<Sheet.Footer>
-			<Button type="submit">Save changes</Button>
-			<Sheet.Close class={buttonVariants({ variant: "outline" })}>Close</Sheet.Close>
-		</Sheet.Footer>
-	</Sheet.Content>
-</Sheet.Root>
-<Sheet.Root>
-	<Sheet.Trigger class={buttonVariants({ variant: "outline" })}>Open from the bottom</Sheet.Trigger>
-	<Sheet.Content side="bottom">
-		<Sheet.Header>
-			<Sheet.Title>Share this page</Sheet.Title>
-			<Sheet.Description>Anyone with the link can view it.</Sheet.Description>
-		</Sheet.Header>
-		<Sheet.Footer>
-			<Button type="submit">Copy link</Button>
-			<Sheet.Close class={buttonVariants({ variant: "outline" })}>Close</Sheet.Close>
-		</Sheet.Footer>
-	</Sheet.Content>
-</Sheet.Root>
-</div>

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

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { Skeleton } from "../../../shadcn/skeleton/index.js";
-</script>
-
-<div class="flex items-center space-x-4">
-	<Skeleton class="size-12 rounded-full" />
-	<div class="space-y-2">
-		<Skeleton class="h-4 w-[250px]" />
-		<Skeleton class="h-4 w-[200px]" />
-	</div>
-</div>

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

@@ -1,7 +0,0 @@
-<script lang="ts">
-	import { Slider } from "../../../shadcn/slider/index.js";
-
-	let value = $state(50);
-</script>
-
-<Slider type="single" bind:value max={100} step={1} class="max-w-[70%]" />

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

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import { toast } from "svelte-sonner";
-	import { Button } from "../../../shadcn/button/index.js";
-</script>
-
-<Button
-	variant="outline"
-	onclick={() =>
-		toast("Event has been created", {
-			description: "Sunday, December 03, 2023 at 9:00 AM",
-			action: {
-				label: "Undo",
-				onClick: () => console.info("Undo"),
-			},
-		})}
->
-	Show Toast
-</Button>

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

@@ -1,11 +0,0 @@
-<script lang="ts">
-	import { Spinner } from "../../../shadcn/spinner/index.js";
-</script>
-
-<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
-	<div class="bg-muted/50 flex items-center gap-3 rounded-md border p-3 text-sm">
-		<Spinner />
-		<span class="line-clamp-1 flex-1 font-medium">Processing payment...</span>
-		<span class="tabular-nums">$100.00</span>
-	</div>
-</div>

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

@@ -1,9 +0,0 @@
-<script lang="ts">
-	import { Label } from "../../../shadcn/label/index.js";
-	import { Switch } from "../../../shadcn/switch/index.js";
-</script>
-
-<div class="flex items-center space-x-2">
-	<Switch id="airplane-mode" />
-	<Label for="airplane-mode">Airplane Mode</Label>
-</div>

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

@@ -1,76 +0,0 @@
-<script lang="ts">
-	import * as Table from "../../../shadcn/table/index.js";
-
-	const invoices = [
-		{
-			invoice: "INV001",
-			paymentStatus: "Paid",
-			totalAmount: "$250.00",
-			paymentMethod: "Credit Card",
-		},
-		{
-			invoice: "INV002",
-			paymentStatus: "Pending",
-			totalAmount: "$150.00",
-			paymentMethod: "PayPal",
-		},
-		{
-			invoice: "INV003",
-			paymentStatus: "Unpaid",
-			totalAmount: "$350.00",
-			paymentMethod: "Bank Transfer",
-		},
-		{
-			invoice: "INV004",
-			paymentStatus: "Paid",
-			totalAmount: "$450.00",
-			paymentMethod: "Credit Card",
-		},
-		{
-			invoice: "INV005",
-			paymentStatus: "Paid",
-			totalAmount: "$550.00",
-			paymentMethod: "PayPal",
-		},
-		{
-			invoice: "INV006",
-			paymentStatus: "Pending",
-			totalAmount: "$200.00",
-			paymentMethod: "Bank Transfer",
-		},
-		{
-			invoice: "INV007",
-			paymentStatus: "Unpaid",
-			totalAmount: "$300.00",
-			paymentMethod: "Credit Card",
-		},
-	];
-</script>
-
-<Table.Root>
-	<Table.Caption>A list of your recent invoices.</Table.Caption>
-	<Table.Header>
-		<Table.Row>
-			<Table.Head class="w-[100px]">Invoice</Table.Head>
-			<Table.Head>Status</Table.Head>
-			<Table.Head>Method</Table.Head>
-			<Table.Head class="text-end">Amount</Table.Head>
-		</Table.Row>
-	</Table.Header>
-	<Table.Body>
-		{#each invoices as invoice (invoice)}
-			<Table.Row>
-				<Table.Cell class="font-medium">{invoice.invoice}</Table.Cell>
-				<Table.Cell>{invoice.paymentStatus}</Table.Cell>
-				<Table.Cell>{invoice.paymentMethod}</Table.Cell>
-				<Table.Cell class="text-end">{invoice.totalAmount}</Table.Cell>
-			</Table.Row>
-		{/each}
-	</Table.Body>
-	<Table.Footer>
-		<Table.Row>
-			<Table.Cell colspan={3}>Total</Table.Cell>
-			<Table.Cell class="text-end">$2,500.00</Table.Cell>
-		</Table.Row>
-	</Table.Footer>
-</Table.Root>

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

@@ -1,62 +0,0 @@
-<script lang="ts">
-	import * as Card from "../../../shadcn/card/index.js";
-	import * as Tabs from "../../../shadcn/tabs/index.js";
-	import { Button } from "../../../shadcn/button/index.js";
-	import { Input } from "../../../shadcn/input/index.js";
-	import { Label } from "../../../shadcn/label/index.js";
-</script>
-
-<div class="-mb-4 flex w-full max-w-sm flex-col gap-6">
-	<Tabs.Root value="account">
-		<Tabs.List>
-			<Tabs.Trigger value="account">Account</Tabs.Trigger>
-			<Tabs.Trigger value="password">Password</Tabs.Trigger>
-		</Tabs.List>
-		<Tabs.Content value="account">
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Account</Card.Title>
-					<Card.Description>
-						Make changes to your account here. Click save when you&apos;re done.
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="grid gap-6">
-					<div class="grid gap-3">
-						<Label for="tabs-demo-name">Name</Label>
-						<Input id="tabs-demo-name" value="Pedro Duarte" />
-					</div>
-					<div class="grid gap-3">
-						<Label for="tabs-demo-username">Username</Label>
-						<Input id="tabs-demo-username" value="@peduarte" />
-					</div>
-				</Card.Content>
-				<Card.Footer>
-					<Button>Save changes</Button>
-				</Card.Footer>
-			</Card.Root>
-		</Tabs.Content>
-		<Tabs.Content value="password">
-			<Card.Root>
-				<Card.Header>
-					<Card.Title>Password</Card.Title>
-					<Card.Description>
-						Change your password here. After saving, you&apos;ll be logged out.
-					</Card.Description>
-				</Card.Header>
-				<Card.Content class="grid gap-6">
-					<div class="grid gap-3">
-						<Label for="tabs-demo-current">Current password</Label>
-						<Input id="tabs-demo-current" type="password" />
-					</div>
-					<div class="grid gap-3">
-						<Label for="tabs-demo-new">New password</Label>
-						<Input id="tabs-demo-new" type="password" />
-					</div>
-				</Card.Content>
-				<Card.Footer>
-					<Button>Save password</Button>
-				</Card.Footer>
-			</Card.Root>
-		</Tabs.Content>
-	</Tabs.Root>
-</div>

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

@@ -1,5 +0,0 @@
-<script lang="ts">
-	import { Textarea } from "../../../shadcn/textarea/index.js";
-</script>
-
-<Textarea placeholder="Type your message here." />

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

@@ -1,18 +0,0 @@
-<script lang="ts">
-	import BoldIcon from "@lucide/svelte/icons/bold";
-	import ItalicIcon from "@lucide/svelte/icons/italic";
-	import UnderlineIcon from "@lucide/svelte/icons/underline";
-	import * as ToggleGroup from "../../../shadcn/toggle-group/index.js";
-</script>
-
-<ToggleGroup.Root variant="outline" type="multiple">
-	<ToggleGroup.Item value="bold" aria-label="Toggle bold">
-		<BoldIcon class="h-4 w-4" />
-	</ToggleGroup.Item>
-	<ToggleGroup.Item value="italic" aria-label="Toggle italic">
-		<ItalicIcon class="h-4 w-4" />
-	</ToggleGroup.Item>
-	<ToggleGroup.Item value="strikethrough" aria-label="Toggle strikethrough">
-		<UnderlineIcon class="h-4 w-4" />
-	</ToggleGroup.Item>
-</ToggleGroup.Root>

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

@@ -1,14 +0,0 @@
-<script lang="ts">
-	import BookmarkIcon from "@lucide/svelte/icons/bookmark";
-	import { Toggle } from "../../../shadcn/toggle/index.js";
-</script>
-
-<Toggle
-	aria-label="Toggle bookmark"
-	size="sm"
-	variant="outline"
-	class="data-[state=on]:bg-transparent data-[state=on]:*:[svg]:fill-blue-500 data-[state=on]:*:[svg]:stroke-blue-500"
->
-	<BookmarkIcon />
-	Bookmark
-</Toggle>

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

@@ -1,13 +0,0 @@
-<script lang="ts">
-	import * as Tooltip from "../../../shadcn/tooltip/index.js";
-	import { buttonVariants } from "../../../shadcn/button/index.js";
-</script>
-
-<Tooltip.Provider>
-	<Tooltip.Root>
-		<Tooltip.Trigger class={buttonVariants({ variant: "outline" })}>Hover</Tooltip.Trigger>
-		<Tooltip.Content>
-			<p>Add to library</p>
-		</Tooltip.Content>
-	</Tooltip.Root>
-</Tooltip.Provider>

package/src/showcase/heart.svg

@@ -1 +0,0 @@
-<svg class="t-like-heart" viewBox="0 0 24 24" width="18" height="18" stroke-width="1.6"><path d="M12 20s-7-4.35-7-9a4 4 0 017-2.65A4 4 0 0119 11c0 4.65-7 9-7 9z" stroke-linejoin="round" /></svg>

package/src/showcase/index.ts

@@ -1,38 +0,0 @@
-// Chrome for a component showcase: the sticky section rail, the section frame, the demo stage, the compact row for a component with no demo, and the copy control they share.
-
-// WHY the chrome is shared and the content is not: every Studio app vendors its own component kit, so the inventory and the demos are local by nature.
-
-// What repeats across apps is the reading structure, and it was drifting.
-
-// Styling is scoped CSS, not Tailwind utilities: a consumer does not `@source` this package, so utility classes written here would never be generated. Every colour reads `var(--color-x, var(--x))`.
-
-// Tailwind v4's `@theme inline` resolves a token into the utilities that use it and emits no custom property, so an app built that way has `--card` and no `--color-card`,
-
-// while an app that declares its palette in `@theme` has the opposite. The pair covers both.
-export {
-  default as ShowcaseShell,
-  type ShowcaseShellProps,
-} from "./ShowcaseShell.svelte";
-export { default as ShowcaseNav, type ShowcaseNavProps } from "./ShowcaseNav.svelte";
-export {
-  default as ShowcaseSection,
-  type ShowcaseSectionProps,
-} from "./ShowcaseSection.svelte";
-export {
-  default as ShowcaseStage,
-  type ShowcaseStageProps,
-} from "./ShowcaseStage.svelte";
-export {
-  default as ShowcaseVariant,
-  type ShowcaseVariantProps,
-} from "./ShowcaseVariant.svelte";
-export {
-  default as ShowcaseList,
-  type ShowcaseListProps,
-  type ShowcaseListItem,
-} from "./ShowcaseList.svelte";
-export {
-  default as ShowcaseImport,
-  type ShowcaseImportProps,
-} from "./ShowcaseImport.svelte";
-export type { ShowcaseSectionMeta } from "./types.js";

package/src/showcase/kit.test.ts

@@ -1,72 +0,0 @@
-/*
- * The showcase has to hold everything the package ships.
- */
-
-/*
- * A demo that is written once and then forgotten is how a kit ends up with a page that shows two thirds of it.
- */
-
-/*
- * These assert coverage off the source, not off a number typed here: an animation with no stage, or a synced primitive missing from the generated list, fails.
- */
-
-import { existsSync, readFileSync, readdirSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { flushSync, mount, unmount } from "svelte";
-import { describe, expect, it } from "vite-plus/test";
-import AnimationsSection from "./AnimationsSection.svelte";
-import ShadcnSection from "./ShadcnSection.svelte";
-import { SHADCN_DEMOS } from "./demos/shadcn/index.js";
-
-/** The runner's cwd is the workspace root or the package; find the package. */
-function packageRoot(): string {
-  let dir = process.cwd();
-  for (;;) {
-    if (existsSync(join(dir, "src", "showcase", "kit.ts"))) return dir;
-    const candidate = join(dir, "packages", "ui");
-    if (existsSync(join(candidate, "src", "showcase", "kit.ts"))) return candidate;
-    const parent = dirname(dir);
-    if (parent === dir) throw new Error("packages/ui not found");
-    dir = parent;
-  }
-}
-
-const PKG = packageRoot();
-const SRC = join(PKG, "src");
-
-function render(Comp: Parameters<typeof mount>[0]) {
-  const target = document.createElement("div");
-  document.body.appendChild(target);
-  const app = mount(Comp, { target });
-  flushSync();
-  const stages = target.querySelectorAll(".sc-stage").length;
-  void unmount(app);
-  target.remove();
-  return stages;
-}
-
-describe("showcase coverage", () => {
-  it("gives every animation a stage", () => {
-    const section = readFileSync(join(SRC, "showcase", "AnimationsSection.svelte"), "utf8");
-    const missing = readdirSync(join(SRC, "animations"))
-      .filter((file) => file.endsWith(".css") && file !== "index.css")
-      .filter((file) => !section.includes(`animations/${file.replace(".css", "")}`));
-    expect(missing).toEqual([]);
-  });
-
-  it("lists every synced shadcn demo", () => {
-    const vendored = readdirSync(join(PKG, ".upstream", "shadcn-demos"))
-      .filter((file) => file.endsWith(".svelte"))
-      .map((file) => file.replace(".svelte", ""));
-    const listed = new Set(SHADCN_DEMOS.map((demo) => demo.name));
-    expect(vendored.filter((name) => !listed.has(name))).toEqual([]);
-  });
-
-  it("renders a stage for every shadcn primitive", () => {
-    expect(render(ShadcnSection)).toBe(SHADCN_DEMOS.length);
-  });
-
-  it("renders the animation stages", () => {
-    expect(render(AnimationsSection)).toBe(27);
-  });
-});

package/src/showcase/kit.ts

@@ -1,17 +0,0 @@
-// The showcase of @heyramzi/ui itself: its shadcn primitives,
-// its motion vocabulary, its visual effects, its chart set and its AI surface.
-
-// WHY they ship with the package and not with the app showing them: they demo
-
-// what every consumer installs identically, so a second copy in a second app is only a copy that drifts. Recovered from the retired orcastrate GUI (vibe-kit @ ccbccb7a^).
-
-// The shadcn stages are not written here at all: `pnpm sync:shadcn` vendors
-// upstream's own example per primitive and generates the list.
-
-// Each section brings its own layout, so render it inside a `ShowcaseSection`
-// marked `bare`, or in a bare <section> carrying the anchor id.
-export { default as AnimationsSection } from "./AnimationsSection.svelte";
-export { default as ShadcnSection } from "./ShadcnSection.svelte";
-export { default as EffectsSection } from "./EffectsSection.svelte";
-export { default as ChartsSection } from "./ChartsSection.svelte";
-export { default as AiSection } from "./AiSection.svelte";

package/src/showcase/plus.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"><path d="M8 3.5v9M3.5 8h9" /></svg>