@heyramzi/ui 6.1.0 → 8.0.0

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

@@ -0,0 +1,91 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import { Button } from "../../shadcn/button/index.js";
+import * as Empty from "../../shadcn/empty/index.js";
+import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	icon?: PhosphorIcon;
+	iconWeight?: IconWeight;
+	title: string;
+	description?: string;
+	actionLabel?: string;
+	actionHref?: string;
+	onAction?: () => void;
+}
+
+// =========================
+// PROPS
+// =========================
+let {
+	icon: Icon,
+	iconWeight,
+	title,
+	description,
+	actionLabel,
+	actionHref,
+	onAction,
+}: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- The four parts arrive in reading order. The stagger is what says the page
+     finished loading and is simply empty. -->
+<Empty.Root class="t-empty py-16">
+	<Empty.Header class="max-w-md">
+		{#if Icon}
+			<Empty.Media class="mb-4 size-16 rounded-2xl bg-brand-indigo/10 text-brand-indigo">
+				<Icon weight={iconWeight} class="size-8" />
+			</Empty.Media>
+		{/if}
+		<Empty.Title class="font-heading text-lg font-semibold">{title}</Empty.Title>
+		{#if description}
+			<Empty.Description>{description}</Empty.Description>
+		{/if}
+	</Empty.Header>
+	{#if actionLabel && (actionHref || onAction)}
+		<Empty.Content>
+			{#if actionHref}
+				<Button href={actionHref}>{actionLabel}</Button>
+			{:else}
+				<Button onclick={onAction}>{actionLabel}</Button>
+			{/if}
+		</Empty.Content>
+	{/if}
+</Empty.Root>
+
+<!-- =========================== -->
+<!-- STYLE -->
+<!-- =========================== -->
+<style>
+	/* Never `:nth-child` here: one such rule makes every DOM insert on the page restyle its later siblings. */
+	:global(.t-empty) > :global(*) {
+		animation: t-empty-in var(--duration-very-slow) var(--ease-smooth-out) both;
+		animation-delay: calc((sibling-index() - 1) * var(--duration-stagger));
+	}
+
+	@keyframes -global-t-empty-in {
+		from {
+			opacity: 0;
+			transform: translateY(var(--distance-small));
+		}
+		to {
+			opacity: 1;
+			transform: none;
+		}
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		:global(.t-empty) > :global(*) {
+			animation-duration: 1ms;
+			animation-delay: 0ms;
+		}
+	}
+</style>

package/src/components/list-page/filter-item.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { Checkbox } from "../../shadcn/checkbox/index.js";
+import { Check } from "phosphor-svelte";
+import { cn } from "@heyramzi/utils";
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	checked: boolean;
+	onclick: () => void;
+	variant?: "checkbox" | "radio";
+	children: Snippet;
+};
+
+// =========================
+// PROPS
+// =========================
+let { checked, onclick, variant = "checkbox", children }: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<button
+	type="button"
+	class="flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm transition-colors hover:bg-muted"
+	{onclick}
+>
+	{#if variant === "radio"}
+		<span
+			class={cn(
+				"grid size-3.5 shrink-0 place-items-center rounded-full border transition-colors",
+				checked ? "border-primary bg-primary text-primary-foreground" : "border-border",
+			)}
+		>
+			{#if checked}
+				<Check class="size-2.5" weight="bold" />
+			{/if}
+		</span>
+	{:else}
+		<Checkbox {checked} />
+	{/if}
+	{@render children()}
+</button>

package/src/components/list-page/filter-popover.svelte

@@ -0,0 +1,88 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import * as Popover from "../../shadcn/popover/index.js";
+import { Funnel as FunnelIcon } from "phosphor-svelte";
+import { cn } from "@heyramzi/utils";
+import { Button } from "../../shadcn/button/index.js";
+import { toolbarTriggerClass } from "./toolbar-trigger.js";
+import type { PhosphorIcon } from "../../lib/icon-types.js";
+
+// phosphor-svelte v2 (resolved here) and v3 (what consumers run) differ only in
+// Component generics. The cast bridges that type-only gap.
+const DefaultFunnelIcon = FunnelIcon as unknown as PhosphorIcon;
+
+// =========================
+// TYPES
+// =========================
+type Props = {
+	label: string;
+	icon?: PhosphorIcon;
+	count?: number;
+	active?: boolean;
+	onClear?: () => void;
+	align?: "start" | "center" | "end";
+	width?: `w-${string}`;
+	open?: boolean;
+	clearLabel?: string;
+	triggerClass?: string;
+	contentClass?: string;
+	children: Snippet;
+	trailing?: Snippet;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	label,
+	icon: IconComponent = DefaultFunnelIcon,
+	count = 0,
+	active,
+	onClear,
+	align = "start",
+	width = "w-52",
+	open = $bindable(false),
+	clearLabel = "Clear",
+	triggerClass,
+	contentClass,
+	children,
+	trailing,
+}: Props = $props();
+
+// =========================
+// DERIVED
+// =========================
+let hasCount = $derived(count > 0);
+let isActive = $derived(active ?? hasCount);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Popover.Root bind:open>
+	<Popover.Trigger class={toolbarTriggerClass({ active: isActive, className: triggerClass })}>
+		<IconComponent class="size-3.5" />
+		<span>{label}</span>
+		{#if trailing}
+			{@render trailing()}
+		{/if}
+		{#if hasCount}
+			<span
+				class="ml-0.5 inline-flex size-4 items-center justify-center rounded-full bg-brand-indigo/15 text-[10px] font-semibold text-brand-indigo dark:text-brand-indigo-light"
+			>
+				{count}
+			</span>
+		{/if}
+	</Popover.Trigger>
+	<Popover.Content class={cn("p-2", width, contentClass)} {align}>
+		{@render children()}
+		{#if onClear && hasCount}
+			<Button variant="ghost" size="sm" class="mt-2 w-full text-xs text-muted-foreground" onclick={onClear}>
+				{clearLabel}
+			</Button>
+		{/if}
+	</Popover.Content>
+</Popover.Root>

package/src/components/list-page/filter-section.ts

@@ -0,0 +1,12 @@
+import { cn } from "@heyramzi/utils";
+
+// The header for each control group in a toolbar popover, in one place so
+// sections can't drift in size or weight.
+
+// `first:` drops the leading header's top padding, since the popover pads itself.
+export function filterSectionClass(className?: string): string {
+  return cn(
+    "px-2 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground first:pt-1",
+    className,
+  );
+}

package/src/components/list-page/grouped-list.svelte

@@ -0,0 +1,116 @@
+<script lang="ts" generics="TGroup">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { untrack, type Snippet } from "svelte";
+	import { SvelteSet } from "svelte/reactivity";
+	import { CaretDown } from "phosphor-svelte";
+	import { cn } from "@heyramzi/utils";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Props = {
+		groups: TGroup[];
+		getKey: (group: TGroup) => string;
+		defaultCollapsed?: string[];
+		/** WHY: a page that drives its own keyboard cursor has to know which rows
+		    are on screen, and the collapsed set is the only thing that says so. */
+		onCollapsedChange?: (keys: string[]) => void;
+		header: Snippet<[TGroup, { collapsed: boolean }]>;
+		/** Controls beside the header, outside its toggle button so a click on
+		    one doesn't collapse the group. Shown on hover of the header row. */
+		actions?: Snippet<[TGroup]>;
+		rows: Snippet<[TGroup]>;
+		class?: string;
+		onGroupDragOver?: (e: DragEvent, group: TGroup) => void;
+		onGroupDragLeave?: (e: DragEvent) => void;
+		onGroupDrop?: (e: DragEvent, group: TGroup) => void;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		groups,
+		getKey,
+		defaultCollapsed = [],
+		onCollapsedChange,
+		header,
+		actions,
+		rows,
+		class: className,
+		onGroupDragOver,
+		onGroupDragLeave,
+		onGroupDrop,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	const collapsed = new SvelteSet<string>(untrack(() => defaultCollapsed));
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function toggle(key: string) {
+		if (collapsed.has(key)) {
+			collapsed.delete(key);
+		} else {
+			collapsed.add(key);
+		}
+		onCollapsedChange?.([...collapsed]);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class={cn("flex w-full flex-col", className)}>
+	{#each groups as group, index (getKey(group))}
+		{@const key = getKey(group)}
+		{@const isCollapsed = collapsed.has(key)}
+		<div
+			class={cn(index > 0 && "mt-3 border-t border-border/50 pt-3")}
+			role={onGroupDragOver || onGroupDrop ? "group" : undefined}
+			ondragover={onGroupDragOver ? (e) => onGroupDragOver(e, group) : undefined}
+			ondragleave={onGroupDragLeave}
+			ondrop={onGroupDrop ? (e) => onGroupDrop(e, group) : undefined}
+		>
+			<div class="group/header flex items-center gap-1 rounded-lg transition-colors hover:bg-muted/60">
+				<button
+					type="button"
+					class="flex min-w-0 flex-1 cursor-pointer items-center gap-2.5 rounded-lg px-3 py-2 text-left"
+					onclick={() => toggle(key)}
+					aria-expanded={!isCollapsed}
+				>
+					<CaretDown
+						class={cn(
+							"size-3 shrink-0 text-muted-foreground/60 transition-transform duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)]",
+							isCollapsed && "-rotate-90",
+						)}
+						weight="bold"
+					/>
+					{@render header(group, { collapsed: isCollapsed })}
+				</button>
+				{#if actions}
+					<div
+						class="flex shrink-0 items-center gap-1 pe-2 opacity-0 transition-opacity group-hover/header:opacity-100 focus-within:opacity-100 any-pointer-coarse:opacity-100"
+					>
+						{@render actions(group)}
+					</div>
+				{/if}
+			</div>
+
+			{#if !isCollapsed}
+				<div>
+					{@render rows(group)}
+				</div>
+			{/if}
+		</div>
+	{/each}
+</div>
+
+<!-- No entrance motion. Four stacked animations made the last group of a
+     40-row board arrive two seconds late. Working surfaces don't animate in. -->
+<!-- No `overflow: hidden` either: it clipped anything a row opened. -->

package/src/components/list-page/index.ts

@@ -0,0 +1,28 @@
+export { default as DetailEmpty } from "./detail-empty.svelte";
+export { default as DetailHeader } from "./detail-header.svelte";
+export { default as DetailPanel } from "./detail-panel.svelte";
+export { default as DetailRow } from "./detail-row.svelte";
+export { default as DetailStack } from "./detail-stack.svelte";
+export { default as EmptyState } from "./empty-state.svelte";
+export { default as FilterItem } from "./filter-item.svelte";
+export { default as PrevNext } from "./prev-next.svelte";
+export { stepTo } from "./step.js";
+export { default as NoticeBar } from "./notice-bar.svelte";
+export { default as RailBody } from "./rail-body.svelte";
+export { default as RailEmpty } from "./rail-empty.svelte";
+export { default as RailHead } from "./rail-head.svelte";
+export { default as RailRow } from "./rail-row.svelte";
+export { default as SectionLabel } from "./section-label.svelte";
+export { queueRailClass, queueRailWidth } from "./queue-rail.js";
+export { default as FilterPopover } from "./filter-popover.svelte";
+export { filterSectionClass } from "./filter-section.js";
+export { default as GroupedList } from "./grouped-list.svelte";
+export { default as ListPageShell } from "./list-page-shell.svelte";
+export { default as MasterDetail } from "./master-detail.svelte";
+// The segmented control isn't re-exported here. Two import paths drifted, so
+// its one home is `@heyramzi/ui/components/segmented`.
+export { default as ToolbarSearch } from "./toolbar-search.svelte";
+export { toolbarTriggerClass } from "./toolbar-trigger.js";
+export { listTable } from "./list-table.js";
+export type { ViewMode } from "./types.js";
+export { getSectionHost, setSectionHost, type SectionHost } from "./section-host.js";

package/src/components/list-page/list-page-shell.svelte

@@ -0,0 +1,195 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import EmptyState from "./empty-state.svelte";
+	import { cn } from "@heyramzi/utils";
+	import { pageGutterClass } from "../../lib/layout.js";
+	import { getSectionHost } from "./section-host.js";
+	import SectionRuns from "../segmented/section-runs.svelte";
+	import type { PhosphorIcon, IconWeight } from "../../lib/icon-types.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	type EmptyConfig = {
+		icon?: PhosphorIcon;
+		iconWeight?: IconWeight;
+		title: string;
+		description?: string;
+		actionLabel?: string;
+		onAction?: () => void;
+		actionHref?: string;
+	};
+
+	type Props = {
+		isEmpty?: boolean;
+		emptyState?: EmptyConfig;
+		hideToolbarWhenEmpty?: boolean;
+		maxWidth?: string | false;
+		fillHeight?: boolean;
+		containerClass?: string;
+		toolbarClass?: string;
+		tabs?: Snippet;
+		search?: Snippet;
+		filters?: Snippet;
+		rightActions?: Snippet;
+		summary?: Snippet;
+		content?: Snippet;
+		empty?: Snippet;
+		extra?: Snippet;
+	};
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		isEmpty = false,
+		emptyState,
+		hideToolbarWhenEmpty = false,
+		maxWidth = "1600px",
+		fillHeight = false,
+		containerClass,
+		toolbarClass,
+		tabs,
+		search,
+		filters,
+		rightActions,
+		summary,
+		content,
+		empty,
+		extra,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	// Null off an app shell, where the toolbar just has no section strip to draw.
+	const section = getSectionHost();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let hideChrome = $derived(isEmpty && hideToolbarWhenEmpty);
+	// WHY the section strip counts: on a page whose only chrome is the section
+	// nav, this row is what draws it, and skipping the row would drop the tabs.
+	let hasToolbar = $derived(
+		Boolean(search || filters || tabs || rightActions || section?.strip) && !hideChrome,
+	);
+	// Whether anything holds the left of the row. With nothing there, the tabs
+	// take that edge instead of floating mid-row beside the actions.
+	let hasLeading = $derived(Boolean(search || filters || section?.strip));
+
+	// =========================
+	// EFFECTS
+	// =========================
+	// Claiming stops the app shell drawing its own strip above this page.
+	// Unmount releases it, so shell-less pages get the standalone row back.
+	$effect(() => {
+		if (!hasToolbar) return;
+		return section?.claim();
+	});
+	// The shared gutter from `lib/layout.ts`. A typed one put the search field
+	// 8px left of the section tabs above it.
+	let outerClass = $derived(
+		cn(
+			`flex flex-col gap-4 py-4 ${pageGutterClass}`,
+			fillHeight && "min-h-0 flex-1",
+			!fillHeight && "flex-1",
+			containerClass,
+		),
+	);
+	// flex-1 lets a snippet pin a footer with mt-auto. min-w-0 keeps wide
+	// tables and chip rows from causing horizontal scroll.
+	let innerClass = $derived(
+		maxWidth === false
+			? cn("flex min-w-0 flex-1 flex-col gap-4", fillHeight && "min-h-0")
+			: cn(
+					"mx-auto flex w-full min-w-0 flex-1 flex-col gap-4",
+					fillHeight && "min-h-0",
+				),
+	);
+	let innerStyle = $derived(maxWidth ? `max-width: ${maxWidth}` : undefined);
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class={outerClass}>
+	<div class={innerClass} style={innerStyle}>
+		{#if hasToolbar}
+			<!-- One row on every list page: search and filters left, then tabs,
+			     view toggle and primary action right. -->
+			<!-- Without room, `order` keeps the actions beside search and drops
+			     filters to a scrolling line below. flex-wrap stays on at every width. -->
+			<!-- A container query, not a breakpoint: an 834px iPad read as desktop
+			     and clipped a 733px toolbar into a 538px column. -->
+			<!-- Sticky, because the section tabs live here. `-mx-4 px-4` covers the
+			     gutter, `-mt-4 py-4` pulls the top padding inside the sticky box. -->
+			<div
+				class="@container/toolbar sticky top-0 z-20 -mx-4 -mt-4 bg-background/95 px-4 py-4 backdrop-blur supports-[backdrop-filter]:bg-background/70"
+			>
+				<div class={cn("flex flex-wrap items-center gap-2", toolbarClass)}>
+					<!-- The section tabs lead: which page comes before which slice of it.
+					     One row replaces two rows that held four controls. -->
+					{#if section?.strip}
+						<SectionRuns
+							strip={section.strip}
+							class="order-first w-full max-w-full @3xl/toolbar:w-auto"
+						/>
+					{/if}
+					{#if search}
+						<div class="order-1 flex min-w-0 flex-1 items-center @3xl/toolbar:flex-none">
+							{@render search()}
+						</div>
+					{/if}
+					{#if tabs || rightActions}
+						<!-- Shrinks and wraps, not shrink-0: /tasks needs 610px here, and
+						     shrink-0 clipped its last control off an iPad screen. -->
+						<div
+							class={cn(
+								"order-2 flex min-w-0 flex-wrap items-center gap-2 @3xl/toolbar:order-3",
+								hasLeading ? "@3xl/toolbar:ms-auto" : "flex-1",
+							)}
+						>
+							{#if tabs}
+								<div class={cn("flex min-w-0 items-center", !hasLeading && "me-auto")}>
+									{@render tabs()}
+								</div>
+							{/if}
+							{#if rightActions}
+								{@render rightActions()}
+							{/if}
+						</div>
+					{/if}
+					{#if filters}
+						<div
+							class="no-scrollbar order-3 flex w-full max-w-full min-w-0 items-center gap-2 overflow-x-auto @3xl/toolbar:order-2 @3xl/toolbar:w-auto"
+						>
+							{@render filters()}
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
+		{#if summary && !hideChrome}
+			{@render summary()}
+		{/if}
+
+		{#if extra && !hideChrome}
+			{@render extra()}
+		{/if}
+
+		{#if isEmpty}
+			{#if empty}
+				{@render empty()}
+			{:else if emptyState}
+				<EmptyState {...emptyState} />
+			{/if}
+		{:else if content}
+			{@render content()}
+		{/if}
+	</div>
+</div>

package/src/components/list-page/list-table.ts

@@ -0,0 +1,19 @@
+import { cn } from "@heyramzi/utils";
+
+/**
+ * The list-page table rhythm, Attio's: one 40px row, a hairline under each, a flat hover.
+ */
+export const listTable = {
+  /** The header row: 36px, a hairline under it. On the cells: `thead` zeroes its row's border. */
+  headRow: (className?: string) =>
+    cn(
+      "hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-9 [&>th]:border-b [&>th]:border-border",
+      className,
+    ),
+  /** A body row. The shared row lifts on hover; a flush list row does not. */
+  row: (className?: string) =>
+    cn(
+      "border-b border-border/50 last:border-b-0 hover:translate-y-0 hover:bg-muted/40 hover:shadow-none [&>td]:h-10 [&>td]:py-0",
+      className,
+    ),
+};