@heyramzi/ui 0.0.0-stage → 1.53.0

package/src/components/data-table/row-context-menu.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import * as ContextMenu from "../../shadcn/context-menu/index.js";
+import { HoldToConfirm } from "../hold-to-confirm/index.js";
+import { ArrowUpRight, Copy, LinkSimple, Trash } from "phosphor-svelte";
+import type { Snippet } from "svelte";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	onDelete: () => void;
+	href?: string;
+	id?: string;
+	deleteLabel?: string;
+	copyLinkLabel?: string;
+	copyIdLabel?: string;
+	/** Called after a successful clipboard copy so consumers can show their own toast */
+	onCopied?: () => void;
+	children: Snippet<[Record<string, unknown>]>;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	onDelete,
+	href,
+	id,
+	deleteLabel = "Delete",
+	copyLinkLabel = "Copy link",
+	copyIdLabel = "Copy ID",
+	onCopied,
+	children,
+}: Props = $props();
+
+// =========================
+// FUNCTIONS
+// =========================
+function handleOpen() {
+	if (href) window.location.href = href;
+}
+
+// WHY the whole URL and not the path: what leaves this menu is pasted into a
+// message, a doc or an agent prompt, none of which can resolve "/clients/42".
+async function handleCopyLink() {
+	if (!href) return;
+	await navigator.clipboard.writeText(new URL(href, window.location.origin).href);
+	onCopied?.();
+}
+
+async function handleCopyId() {
+	if (!id) return;
+	await navigator.clipboard.writeText(id);
+	onCopied?.();
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<ContextMenu.Root>
+	<ContextMenu.Trigger>
+		{#snippet child({ props })}
+			{@render children(props)}
+		{/snippet}
+	</ContextMenu.Trigger>
+	<ContextMenu.Content class="w-48">
+		{#if href}
+			<ContextMenu.Item onclick={handleOpen}>
+				<ArrowUpRight size={14} />
+				Open
+			</ContextMenu.Item>
+		{/if}
+		{#if href}
+			<ContextMenu.Item onclick={handleCopyLink}>
+				<LinkSimple size={14} />
+				{copyLinkLabel}
+			</ContextMenu.Item>
+		{/if}
+		{#if id}
+			<ContextMenu.Item onclick={handleCopyId}>
+				<Copy size={14} />
+				{copyIdLabel}
+			</ContextMenu.Item>
+		{/if}
+		{#if href || id}
+			<ContextMenu.Separator />
+		{/if}
+		<HoldToConfirm
+			duration={800}
+			onConfirm={onDelete}
+			class="relative flex w-full cursor-default items-center justify-start gap-2 rounded-md px-1.5 py-1 text-sm text-destructive outline-hidden"
+		>
+			{#snippet idle()}
+				<Trash size={14} />
+				{deleteLabel}
+			{/snippet}
+			{#snippet holding()}
+				Hold to delete...
+			{/snippet}
+		</HoldToConfirm>
+	</ContextMenu.Content>
+</ContextMenu.Root>

package/src/components/data-table/row-context-menu.test.ts

@@ -0,0 +1,18 @@
+import { existsSync, readFileSync } from "node:fs";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vite-plus/test";
+
+const here = dirname(fileURLToPath(import.meta.url));
+const sourcePath = resolve(here, "row-context-menu.svelte");
+if (!existsSync(sourcePath)) {
+  throw new Error(`Unable to find source file: ${sourcePath}`);
+}
+const source = readFileSync(sourcePath, "utf8");
+
+describe("row context menu delete affordance", () => {
+  it("renders the hold-to-delete action at full menu-item width", () => {
+    expect(source).toContain("w-full");
+    expect(source).toContain("justify-start");
+  });
+});

package/src/components/data-table/sortable-head.svelte

@@ -0,0 +1,56 @@
+<script lang="ts" generics="T">
+import type { Snippet } from "svelte";
+import { CaretDown, CaretUp, CaretUpDown } from "phosphor-svelte";
+import { cn } from "@heyramzi/utils";
+import type { SortDirection, SortState } from "./data-table.js";
+
+// ========================= TYPES
+type Props = {
+	key: keyof T & string;
+	sort: SortState<T>;
+	onSort: (key: keyof T & string) => void;
+	class?: string;
+	children: Snippet;
+};
+
+// ========================= PROPS
+let { key, sort, onSort, class: className, children }: Props = $props();
+
+// ========================= DERIVED
+let active = $derived(sort?.key === key);
+let direction = $derived<SortDirection | null>(sort && active ? sort.direction : null);
+let ariaSort = $derived<"ascending" | "descending" | "none">(
+	direction === "asc" ? "ascending" : direction === "desc" ? "descending" : "none",
+);
+
+function handleKeydown(e: KeyboardEvent) {
+	if (e.key === "Enter" || e.key === " ") {
+		e.preventDefault();
+		onSort(key);
+	}
+}
+</script>
+
+<th
+	data-slot="table-head"
+	class={cn(
+		"text-muted-foreground h-8 px-2 text-left align-middle text-xs font-medium whitespace-nowrap select-none",
+		"cursor-pointer hover:bg-muted/30 transition-colors",
+		className,
+	)}
+	tabindex="0"
+	aria-sort={ariaSort}
+	onclick={() => onSort(key)}
+	onkeydown={handleKeydown}
+>
+	<span class="inline-flex items-center gap-1">
+		{@render children()}
+		{#if direction === "asc"}
+			<CaretUp class="size-3.5 text-foreground" weight="bold" />
+		{:else if direction === "desc"}
+			<CaretDown class="size-3.5 text-foreground" weight="bold" />
+		{:else}
+			<CaretUpDown class="size-3.5 text-muted-foreground/50" />
+		{/if}
+	</span>
+</th>

package/src/components/data-table/table-skeleton.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+// ========================= IMPORTS
+import { Skeleton } from "../../shadcn/skeleton/index.js";
+
+// ========================= TYPES
+type ColumnDef = {
+	width?: string;
+	align?: "left" | "center" | "right";
+	/** Show a small circle before the skeleton bar (e.g. logo/avatar column) */
+	circle?: boolean;
+};
+
+type Props = {
+	/** Number of skeleton rows to render */
+	rows?: number;
+	/** Column definitions control skeleton widths and alignment */
+	columns?: ColumnDef[];
+	/** Simple mode: just specify column count */
+	columnCount?: number;
+	class?: string;
+};
+
+// ========================= PROPS
+let {
+	rows = 5,
+	columns,
+	columnCount = 6,
+	class: className,
+}: Props = $props();
+
+// ========================= DERIVED
+let cols = $derived(
+	columns ??
+		Array.from<unknown, ColumnDef>({ length: columnCount }, () => ({
+			width: undefined,
+			align: "left" as const,
+		})),
+);
+
+const WIDTHS = ["w-24", "w-20", "w-28", "w-16", "w-32", "w-20"];
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<tbody class={className}>
+	{#each { length: rows } as _, rowIdx (rowIdx)}
+		<tr
+			data-slot="table-row"
+			class="border-b border-border/50 transition-opacity"
+			style="animation: skeleton-fade-in var(--duration-slow) var(--ease-out) calc(var(--duration-stagger) * {rowIdx}) both"
+		>
+			{#each cols as col, colIdx (colIdx)}
+				<td
+					data-slot="table-cell"
+					class="h-11 px-2 {col.align === 'center' ? 'text-center' : col.align === 'right' ? 'text-right' : ''}"
+				>
+					<div class="flex items-center gap-2 {col.align === 'center' ? 'justify-center' : col.align === 'right' ? 'justify-end' : ''}">
+						{#if col.circle}
+							<Skeleton class="size-6 shrink-0 rounded-md" />
+						{/if}
+						<Skeleton
+							class="h-3.5 rounded {col.width ?? WIDTHS[(rowIdx + colIdx) % WIDTHS.length]}"
+						/>
+					</div>
+				</td>
+			{/each}
+		</tr>
+	{/each}
+</tbody>
+
+<style>
+	@keyframes skeleton-fade-in {
+		from {
+			opacity: 0;
+			transform: translateY(4px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+</style>

package/src/components/hold-to-confirm/hold-to-confirm.svelte

@@ -0,0 +1,232 @@
+<script lang="ts">
+	// ========================= IMPORTS
+	import { cn } from "@heyramzi/utils";
+	import { buttonVariants, type ButtonSize, type ButtonVariant } from "../../shadcn/button/index.js";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+
+	// ========================= TYPES
+	type Props = {
+		duration?: number;
+		onConfirm: () => void;
+		disabled?: boolean;
+		/** Uses the button recipe so call sites stop drawing their own.
+		 *  `variant: null` opts out, for a caller that really is a menu row. */
+		variant?: ButtonVariant | null;
+		size?: ButtonSize;
+		/** Square, for a glyph with no label. Mirrors `Button`. */
+		icon?: boolean;
+		class?: string;
+		idle: Snippet;
+		holding: Snippet;
+	} & HTMLButtonAttributes;
+
+	// ========================= PROPS
+	let {
+		duration = 800,
+		onConfirm,
+		disabled = false,
+		variant = "destructive",
+		size = "default",
+		icon = false,
+		class: className = "",
+		idle,
+		holding,
+		...restProps
+	}: Props = $props();
+
+	// ========================= STATE
+	let progress = $state(0);
+	let isHolding = $state(false);
+	let rafId: number | null = $state(null);
+	let startTime: number | null = $state(null);
+
+	// ========================= FUNCTIONS
+	function startHold() {
+		if (disabled) return;
+		isHolding = true;
+		startTime = performance.now();
+		tick();
+	}
+
+	function tick() {
+		if (!isHolding || !startTime) return;
+
+		const elapsed = performance.now() - startTime;
+		progress = Math.min(elapsed / duration, 1);
+
+		if (progress >= 1) {
+			complete();
+			return;
+		}
+
+		rafId = requestAnimationFrame(tick);
+	}
+
+	function cancelHold() {
+		if (!isHolding) return;
+		isHolding = false;
+		startTime = null;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		// WHY: dropping is-holding lets the fill retract via the CSS transition below
+		progress = 0;
+	}
+
+	function complete() {
+		isHolding = false;
+		startTime = null;
+		if (rafId !== null) {
+			cancelAnimationFrame(rafId);
+			rafId = null;
+		}
+		onConfirm();
+		// Reset after confirm fires
+		progress = 0;
+	}
+
+	function handleKeydown(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			e.preventDefault();
+			startHold();
+		}
+	}
+
+	function handleKeyup(e: KeyboardEvent) {
+		if (e.key === " " || e.key === "Enter") {
+			cancelHold();
+		}
+	}
+</script>
+
+<!-- ========================= MARKUP -->
+<button
+	{...restProps}
+	type="button"
+	class={cn(
+		// Callers size this at about 22px. On touch, a hold needs a box the finger
+		// can stay inside for the whole press without cancelling it.
+		"hold-to-confirm relative overflow-hidden select-none",
+		"any-pointer-coarse:inline-flex any-pointer-coarse:min-h-10 any-pointer-coarse:min-w-10 any-pointer-coarse:items-center any-pointer-coarse:justify-center",
+		variant && buttonVariants({ variant, size, icon }),
+		disabled && "pointer-events-none opacity-50",
+		className,
+	)}
+	style="--progress: {progress}"
+	data-holding={isHolding}
+	onpointerdown={startHold}
+	onpointerup={cancelHold}
+	onpointerleave={cancelHold}
+	onpointercancel={cancelHold}
+	onkeydown={handleKeydown}
+	onkeyup={handleKeyup}
+	{disabled}
+>
+	<!-- Fill sweep: scales from the left across the whole control -->
+	<span
+		class="hold-to-confirm-fill pointer-events-none absolute inset-0 z-0 origin-left bg-destructive"
+		class:is-holding={isHolding}
+	></span>
+
+	<!-- Leading edge: a bright sliver that rides the head of the fill -->
+	<span
+		class="hold-to-confirm-edge pointer-events-none absolute inset-y-0 z-0"
+		class:is-holding={isHolding}
+	></span>
+
+	<!-- Content -->
+	<span class="relative z-[1] flex items-center gap-1.5">
+		{#if isHolding}
+			<span class="hold-to-confirm-text flex items-center gap-1.5 text-destructive-foreground">
+				{@render holding()}
+			</span>
+		{:else}
+			<span class="hold-to-confirm-text flex items-center gap-1.5">
+				{@render idle()}
+			</span>
+		{/if}
+	</span>
+</button>
+
+<!-- ========================= STYLE -->
+<style>
+	.hold-to-confirm {
+		touch-action: none;
+	}
+
+	.hold-to-confirm:active:not(:disabled) {
+		transform: scale(0.97);
+	}
+
+	/* Fill: GPU-friendly scaleX. A vertical sheen survives the horizontal
+	   scale because it runs top-to-bottom, so the wipe keeps a crisp surface. */
+	.hold-to-confirm-fill {
+		transform: scaleX(var(--progress, 0));
+		background-image: linear-gradient(
+			to bottom,
+			color-mix(in oklch, var(--color-destructive-foreground) 14%, transparent),
+			transparent 55%
+		);
+		transition: transform var(--duration-quick) var(--ease-smooth-out);
+	}
+
+	.hold-to-confirm-fill.is-holding {
+		transition: none;
+	}
+
+	/* Leading edge: positioned (not scaled) so its glow stays crisp at any
+	   width. Sits exactly at the head of the fill and fades in while held. */
+	.hold-to-confirm-edge {
+		left: calc(var(--progress, 0) * 100%);
+		width: 2px;
+		margin-left: -2px;
+		opacity: 0;
+		background: color-mix(in oklch, var(--color-destructive-foreground) 65%, var(--color-destructive));
+		box-shadow: 0 0 4px 0 color-mix(in oklch, var(--color-destructive) 92%, transparent);
+		transition:
+			left var(--duration-quick) var(--ease-smooth-out),
+			opacity var(--duration-quick) var(--ease-out);
+	}
+
+	.hold-to-confirm-edge.is-holding {
+		opacity: 1;
+		transition: opacity var(--duration-quick) var(--ease-out);
+	}
+
+	.hold-to-confirm-text {
+		animation: holdTextFadeIn var(--duration-quick) var(--ease-out);
+	}
+
+	@keyframes holdTextFadeIn {
+		from {
+			opacity: 0;
+		}
+		to {
+			opacity: 1;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hold-to-confirm:active:not(:disabled) {
+			transform: none;
+		}
+
+		.hold-to-confirm-fill {
+			transition: none;
+			transform: scaleX(var(--progress, 0));
+			background-image: none;
+			opacity: 0.5;
+		}
+
+		.hold-to-confirm-edge {
+			transition: none;
+			box-shadow: none;
+		}
+
+		.hold-to-confirm-text {
+			animation: none;
+		}
+	}
+</style>

package/src/components/hold-to-confirm/index.ts

@@ -0,0 +1 @@
+export { default as HoldToConfirm } from "./hold-to-confirm.svelte";

package/src/components/icon/icon.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	icon: PhosphorIcon;
+	size?: number;
+	class?: string;
+	weight?: IconWeight;
+};
+
+// =========================
+// PROPS
+// =========================
+let { icon: IconComp, size = 24, class: className = "", weight }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<IconComp {size} class={className} {weight} />

package/src/components/icon/index.ts

@@ -0,0 +1 @@
+export { default as Icon } from "./icon.svelte";

package/src/components/language-flag/index.ts

@@ -0,0 +1 @@
+export { default as LanguageFlag } from "./language-flag.svelte";

package/src/components/language-flag/language-flag.svelte

@@ -0,0 +1,60 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { cn } from "@heyramzi/utils";
+
+	// =========================
+	// CONSTANTS
+	// =========================
+	// The host serves these files from /flags. Pass `flags` for another set or path.
+	const DEFAULT_FLAGS: Record<string, string> = {
+		en: "/flags/US.svg",
+		fr: "/flags/FR.svg",
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	interface Props {
+		language: string;
+		/** Language code to image URL. */
+		flags?: Record<string, string>;
+		size?: "sm" | "md";
+		showLabel?: boolean;
+		class?: string;
+	}
+
+	let {
+		language,
+		flags = DEFAULT_FLAGS,
+		size = "sm",
+		showLabel = false,
+		class: className,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let src = $derived(flags[language]);
+	let sizeClass = $derived(size === "md" ? "size-5" : "size-3.5");
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if src}
+	<span class={cn("inline-flex items-center gap-1.5", className)}>
+		<img
+			{src}
+			alt={language.toUpperCase()}
+			class={cn("shrink-0 rounded-sm", sizeClass)}
+			loading="lazy"
+		/>
+		{#if showLabel}
+			<span class="text-xs font-medium uppercase text-muted-foreground">{language}</span>
+		{/if}
+	</span>
+{:else if showLabel}
+	<span class={cn("text-xs font-medium uppercase text-muted-foreground", className)}>{language}</span>
+{/if}

package/src/components/list-page/detail-empty.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import EmptyState from "./empty-state.svelte";
+import { cn } from "@heyramzi/utils";
+import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	// Shown when nothing is picked or the board is empty. Both mean "content
+	// goes here", so both get a dashed `border-2` edge.
+	icon?: PhosphorIcon;
+	iconWeight?: IconWeight;
+	title: string;
+	description?: string;
+	actionLabel?: string;
+	actionHref?: string;
+	onAction?: () => void;
+	class?: string;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	icon,
+	iconWeight,
+	title,
+	description,
+	actionLabel,
+	actionHref,
+	onAction,
+	class: className,
+}: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div
+	class={cn(
+		"flex h-full items-center justify-center rounded-xl border-2 border-dashed border-border",
+		className,
+	)}
+>
+	<EmptyState {icon} {iconWeight} {title} {description} {actionLabel} {actionHref} {onAction} />
+</div>