@heyramzi/ui 0.0.0-stage → 1.53.1

package/src/components/segmented/segmented-track.svelte

@@ -0,0 +1,186 @@
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import { cn } from "@heyramzi/utils";
+import { segmentedTrackClass, type SegmentedVariant } from "./segmented.js";
+import { slidingPill } from "../../lib/sliding-pill.js";
+
+// =========================
+// TYPES
+// =========================
+interface Props {
+	/** Fill the row rather than sit at its natural width. */
+	fill?: boolean;
+	/** `pill`, a bordered well with a travelling highlight, or `underline`, a travelling rule. */
+	variant?: SegmentedVariant;
+	class?: string;
+	children: Snippet;
+	/**
+	 * A last segment that isn't an item: today the overflow trigger. It's inside
+	 * the track but outside the ARIA container, so a `tablist` owns only tabs.
+	 */
+	after?: Snippet;
+	// What the ARIA shapes differ by: `role`/`aria-label` for the filter, nothing
+	// for the nav (its <nav> has it), bits-ui's wiring for tabs.
+	[key: string]: unknown;
+};
+
+// =========================
+// PROPS
+// =========================
+let {
+	fill = false,
+	variant = "pill",
+	class: className,
+	children,
+	after,
+	...rest
+}: Props = $props();
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<!-- WHY its own component: the active segment is a travelling pill, and the
+     pill needs one element inside the track that no caller can forget. -->
+<div
+	{...rest}
+	data-variant={variant}
+	class={cn("track relative", segmentedTrackClass({ variant, fill }), className)}
+>
+	<!-- Renders at zero width until the attachment measures, so a server-rendered
+	     strip shows the segment's own background and never an empty pill. -->
+	<span class="pill" aria-hidden="true" {@attach slidingPill}></span>
+	{@render children()}
+	{@render after?.()}
+</div>
+
+<!-- =========================== -->
+<!-- STYLES -->
+<!-- =========================== -->
+<style>
+	/* Inset separators keep the strip one bordered object. */
+	.track :global(.ui-segment)::before {
+		content: "";
+		position: absolute;
+		top: 22%;
+		bottom: 22%;
+		left: 0;
+		width: 1px;
+		background-color: var(--color-border);
+		transition: opacity var(--duration-fast) var(--ease-smooth-out);
+		pointer-events: none;
+	}
+
+	.track :global(.pill + .ui-segment)::before,
+	.track :global([data-slot="tabs-list"] > .ui-segment:first-child)::before {
+		display: none;
+	}
+
+	/* The highlight and hover wash hide the seams on either side. */
+	.track :global(.ui-segment[data-state="active"])::before,
+	.track :global(.ui-segment[aria-current="page"])::before,
+	.track :global(.ui-segment[aria-pressed="true"])::before,
+	.track :global(.ui-segment[data-state="active"] + .ui-segment)::before,
+	.track :global(.ui-segment[aria-current="page"] + .ui-segment)::before,
+	.track :global(.ui-segment[aria-pressed="true"] + .ui-segment)::before,
+	.track :global([data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment)::before {
+		opacity: 0;
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.track :global(.ui-segment:hover)::before,
+		.track :global(.ui-segment:hover + .ui-segment)::before {
+			opacity: 0;
+		}
+	}
+
+	/* The label's colour lands with the pill, on the same fast step. */
+	.track :global(.ui-segment) {
+		transition:
+			background-color var(--duration-quick) var(--ease-smooth-out),
+			color var(--duration-fast) var(--ease-smooth-out),
+			transform var(--duration-micro) var(--ease-smooth-out);
+	}
+
+	/* A faint wash in the well says which segment the pointer would pick. */
+	@media (hover: hover) {
+		.track
+			:global(
+				.ui-segment:hover:not([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="open"])
+			) {
+			background-color: color-mix(in oklch, var(--color-muted) 55%, transparent);
+		}
+	}
+
+	.pill {
+		position: absolute;
+		top: 2px;
+		bottom: 2px;
+		left: 0;
+		z-index: 0;
+		width: 0;
+		opacity: 0;
+		/* Concentric with the border and the 2px inset. */
+		border-radius: calc(var(--radius-lg) - 3px);
+		background-color: var(--color-muted);
+		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-foreground) 6%, transparent);
+		transform: translateX(0);
+		/* transitions-dev `16-tabs-sliding`: the fast step, 250ms. */
+		transition:
+			transform var(--duration-fast) var(--ease-smooth-out),
+			width var(--duration-fast) var(--ease-smooth-out),
+			opacity var(--duration-quick) var(--ease-smooth-out);
+		will-change: transform, width;
+		pointer-events: none;
+	}
+
+	/* Before the attachment measures, the active segment draws the pill itself,
+	   so a server-rendered strip is right before any JS arrives. */
+	.track:not([data-pill="on"]) :global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+		background-color: var(--color-muted);
+		box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--color-foreground) 6%, transparent);
+	}
+
+	/* The underline: no seams, no wash, and the pill becomes a 2px rule on the
+	   hairline. `--segmented-rule` lets a brand colour it from a class. */
+	.track[data-variant="underline"] :global(.ui-segment)::before {
+		display: none;
+	}
+
+	@media (hover: hover) {
+		.track[data-variant="underline"]
+			:global(
+				.ui-segment:hover:not([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="open"])
+			) {
+			background-color: transparent;
+		}
+	}
+
+	.track[data-variant="underline"] .pill {
+		top: auto;
+		bottom: -1px;
+		height: 2px;
+		border-radius: 1px;
+		background-color: var(--segmented-rule, var(--color-foreground));
+		box-shadow: none;
+	}
+
+	.track[data-variant="underline"]:not([data-pill="on"])
+		:global(:is([data-state="active"], [aria-current="page"], [aria-pressed="true"])) {
+		background-color: transparent;
+		box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.pill {
+			transition: opacity var(--duration-quick) var(--ease-smooth-out);
+		}
+
+		.track :global(.ui-segment) {
+			transition: none;
+		}
+	}
+</style>

package/src/components/segmented/segmented.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from "vite-plus/test";
+import { segmentedTrackClass } from "./segmented.js";
+
+describe("segmentedTrackClass", () => {
+  // Every segmented control shares one height, whatever its look.
+  it("holds one height across variants", () => {
+    for (const variant of ["pill", "underline"] as const) {
+      const classes = segmentedTrackClass({ variant }).split(" ");
+      expect(classes).toContain("h-7");
+      expect(classes).toContain("any-pointer-coarse:h-10");
+    }
+  });
+
+  it("draws the pill as a bordered well and the underline as a hairline", () => {
+    expect(segmentedTrackClass({ variant: "pill" })).toContain("rounded-lg");
+    const underline = segmentedTrackClass({ variant: "underline" });
+    expect(underline).toContain("border-b");
+    expect(underline).not.toContain("rounded-lg");
+  });
+});

package/src/components/segmented/segmented.ts

@@ -0,0 +1,80 @@
+import { tv } from "tailwind-variants";
+import { pageGutterClass } from "../../lib/layout.js";
+
+/**
+ * The one look for a segmented control: the track and trigger here, what a
+ * segment says in `segment.svelte`.
+ */
+
+// WHY a recipe, not one component: tabs are a `tablist`, filters a `group` of
+// `aria-pressed` toggles, page links a `nav`. Only the ARIA shape may differ.
+
+// The look used to drift three ways, one with an at-rest shadow. All three read from here now.
+export const segmentedTrackClass = tv({
+  // WHY the height lives on the track: it carries the inset, so an `h-7` trigger
+  // drew 30px beside a 28px button. One toolbar row came out at five heights.
+
+  // WHY no size variant: `sm` drew 24px, and every tab control must share one height.
+  base: "h-7 any-pointer-coarse:h-10 shrink-0 items-stretch",
+  variants: {
+    // `pill`: a bordered well with a travelling highlight. `underline`: bare
+    // labels over one hairline, the active one marked by a rule that travels.
+    variant: {
+      pill: "overflow-hidden rounded-lg border border-border p-0.5",
+      underline: "gap-5 border-b border-border",
+    },
+    // Fill the row rather than sit at its natural width. For a narrow rail.
+    fill: { true: "flex w-full", false: "inline-flex w-fit" },
+  },
+  defaultVariants: { variant: "pill", fill: false },
+});
+
+export type SegmentedVariant = "pill" | "underline";
+
+export const segmentedTriggerClass = tv({
+  base: [
+    // `t-press` is the kit's one press: colour, shadow and a pixel of travel.
+
+    // `relative z-[1]` keeps the label above the travelling pill, or the pill
+    // paints over the word it highlights.
+
+    // `ui-segment` isn't a style. `segmented-track.svelte` matches on it to time
+    // the label colour with the pill.
+    "ui-segment group/segment t-press relative z-[1] inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium select-none",
+    "text-muted-foreground hover:text-foreground",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+    // WHY an inset focus ring: the track clips to its rounded corners, so an
+    // outside ring was cut in half on the end segments.
+    "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none",
+    // WHY no height on the trigger: an icon makes a segment taller than a word.
+    // `h-full` against the track's `items-stretch` keeps every segment the same box.
+    "h-full text-xs",
+  ],
+  variants: {
+    // The pill is concentric with the track's border and its 2px inset. The
+    // underline has no well to be concentric with, so no padding either: the
+    // rule under a label is as wide as the label.
+    variant: {
+      pill: "rounded-[calc(var(--radius-lg)-3px)] px-2.5 any-pointer-coarse:px-3.5",
+      underline: "rounded-sm px-0",
+    },
+    // WHY `min-w-fit flex-auto`, not equal fractions: fractions cut "Approved" to
+    // "Appro…" in a 280px rail. Each segment claims its label and shares the slack.
+    fill: { true: "min-w-fit flex-auto", false: "" },
+    active: { true: "text-foreground", false: "" },
+  },
+  defaultVariants: { variant: "pill", fill: false, active: false },
+});
+
+/**
+ * The row a segmented strip sits in, and the one recipe for a navigation row
+ * under the app header. Written per caller it produced two different left
+ * edges.
+ */
+// WHY no bottom hairline: with a section strip and a page toolbar stacked it
+// drew two rules for one boundary. The gap is the boundary.
+export const segmentedRowClass = `flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 py-2 ${pageGutterClass}`;
+
+/** The active style, for a strip whose state lives in a `data-active` attribute. */
+export const segmentedActiveClass = "data-active:text-foreground";

package/src/components/star-rating-input/index.ts

@@ -0,0 +1,9 @@
+import Root from "./star-rating-input.svelte";
+
+export type { StarRatingSize } from "./star-rating-input.svelte";
+
+export {
+  Root,
+  //
+  Root as StarRatingInput,
+};

package/src/components/star-rating-input/star-rating-input.svelte

@@ -0,0 +1,263 @@
+<script lang="ts" module>
+/**
+ * Two sizes, picked by the job: `sm` reads a value back in a row or cell,
+ * `lg` is the ask.
+ */
+// A middle `md` step used to exist. Nobody could place it, so the same question
+// ended up asked at three sizes.
+export type StarRatingSize = "sm" | "lg";
+
+const STAR_SIZE: Record<StarRatingSize, string> = {
+	sm: "size-4",
+	lg: "size-7",
+};
+
+const HIT_SIZE: Record<StarRatingSize, string> = {
+	sm: "p-0.5",
+	lg: "p-1",
+};
+
+/** Pop duration plus the longest stagger, after which the class can come off. */
+const POP_WINDOW_MS = 350 + 4 * 40;
+</script>
+
+<script lang="ts">
+import { Star } from "phosphor-svelte";
+import { cn } from "@heyramzi/utils";
+
+interface Props {
+	/** Current rating value (0 = unrated). */
+	value: number;
+	/** Maximum rating. Defaults to 5. */
+	max?: number;
+	/** Visual size of each star. `sm` reads back, `lg` asks. */
+	size?: StarRatingSize;
+	/** Render as static display, no hover or click. */
+	readonly?: boolean;
+	/** Disable interaction. */
+	disabled?: boolean;
+	/** Form field name for native submission. When set, a hidden input is rendered. */
+	name?: string;
+	/** ARIA label for the radiogroup. */
+	ariaLabel?: string;
+	/** Per-step descriptive labels (length must equal max). */
+	labels?: readonly string[];
+	/** Show the label of the currently hovered/selected step beside the stars. */
+	showLabel?: boolean;
+	class?: string;
+	onchange?: (value: number) => void;
+};
+
+let {
+	value = $bindable(0),
+	max = 5,
+	size = "sm",
+	readonly = false,
+	disabled = false,
+	name,
+	ariaLabel,
+	labels,
+	showLabel = false,
+	class: className,
+	onchange,
+}: Props = $props();
+
+let hover = $state(0);
+/** Held for the length of the pop, then dropped so the next pick can replay it. */
+let popping = $state(false);
+let popTimer: ReturnType<typeof setTimeout> | undefined;
+let displayed = $derived(hover || value);
+let starSize = $derived(STAR_SIZE[size]);
+let hitSize = $derived(HIT_SIZE[size]);
+let groupAriaLabel = $derived(ariaLabel ?? `Rating, ${max} stars`);
+let labelText = $derived(
+	displayed > 0 && labels && labels.length >= displayed ? labels[displayed - 1] : "",
+);
+
+function buttonAriaLabel(step: number): string {
+	const stepLabel = labels?.[step - 1];
+	const base = `${step} of ${max}`;
+	return stepLabel ? `${base} (${stepLabel})` : base;
+}
+
+function setRating(step: number) {
+	if (readonly || disabled) return;
+	value = step;
+	onchange?.(step);
+
+	// Drop the class before re-adding it, or a second pick inside the animation
+	// window finds it already set and nothing replays.
+	popping = false;
+	clearTimeout(popTimer);
+	requestAnimationFrame(() => {
+		popping = true;
+		popTimer = setTimeout(() => (popping = false), POP_WINDOW_MS);
+	});
+}
+
+function handleEnter(step: number) {
+	if (readonly || disabled) return;
+	hover = step;
+}
+
+function handleLeave() {
+	if (readonly || disabled) return;
+	hover = 0;
+}
+</script>
+
+<!-- One star, drawn once. It used to be written twice, once per branch, and the
+     two copies had already drifted apart on the glow. -->
+{#snippet star(step: number)}
+	<Star
+		class={cn("star", starSize, step <= displayed && "is-filled")}
+		weight={step <= displayed ? "fill" : "regular"}
+	/>
+{/snippet}
+
+<div class={cn("rating", `rating-${size}`, className)}>
+	<div
+		class={cn("stars", popping && "is-popping")}
+		role={readonly ? "img" : "radiogroup"}
+		aria-label={groupAriaLabel}
+		onmouseleave={handleLeave}
+	>
+		{#each Array(max) as _, i (i)}
+			{@const step = i + 1}
+			{#if readonly}
+				<span class={cn("hit", hitSize)}>{@render star(step)}</span>
+			{:else}
+				<button
+					type="button"
+					role="radio"
+					aria-checked={value === step}
+					aria-label={buttonAriaLabel(step)}
+					{disabled}
+					data-on={step <= value}
+					onclick={() => setRating(step)}
+					onmouseenter={() => handleEnter(step)}
+					onfocus={() => handleEnter(step)}
+					onblur={handleLeave}
+					style:--pop-delay="{i * 40}ms"
+					class={cn("hit hit-button", hitSize, disabled && "is-disabled")}
+				>
+					{@render star(step)}
+				</button>
+			{/if}
+		{/each}
+	</div>
+
+	{#if showLabel && labelText}
+		<span class="rating-caption">{labelText}</span>
+	{/if}
+
+	{#if name}
+		<input type="hidden" {name} value={value} />
+	{/if}
+</div>
+
+<style>
+	.rating {
+		--like-pop: var(--duration-medium);
+		--like-pop-ease: var(--ease-smooth-out);
+		--like-fill: var(--duration-quick);
+		--like-ease: var(--ease-smooth-out);
+
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+	}
+
+	.stars {
+		display: flex;
+		align-items: center;
+	}
+
+	.hit {
+		display: inline-flex;
+		border-radius: var(--radius-sm);
+	}
+
+	.hit-button {
+		transition: transform var(--duration-quick, 150ms) var(--ease-smooth-out, ease);
+	}
+
+	.hit-button:focus-visible {
+		outline: none;
+		box-shadow: 0 0 0 2px var(--color-ring);
+	}
+
+	@media (hover: hover) and (pointer: fine) {
+		.hit-button:not(.is-disabled):hover {
+			transform: scale(1.1);
+		}
+	}
+
+	.hit-button:not(.is-disabled):active {
+		transform: scale(0.95);
+	}
+
+	.is-disabled {
+		cursor: not-allowed;
+		opacity: 0.6;
+	}
+
+	.rating :global(.star) {
+		color: var(--color-border);
+		transition: color var(--like-fill) var(--like-ease);
+	}
+
+	.rating :global(.star.is-filled) {
+		color: var(--color-warning-400);
+	}
+
+	/* The glow is the size's business, not a prop: it belongs to the ask, where
+	   the stars are large enough to carry it, and it turned to mud at 16px. */
+	.rating-lg :global(.star.is-filled) {
+		filter: drop-shadow(0 0 4px color-mix(in oklab, var(--color-warning-400) 45%, transparent));
+	}
+
+	/* transitions.dev like-button pop. Every selected star pops, left to right,
+	   as one gesture. A class on the group drives it, since rebuilding the row
+	   would drop keyboard focus. */
+	.is-popping .hit-button[data-on="true"] {
+		animation: t-like-pop var(--like-pop) var(--like-pop-ease) var(--pop-delay, 0ms);
+	}
+
+	@keyframes t-like-pop {
+		0% {
+			transform: scale(1);
+		}
+		30% {
+			transform: scale(0.82);
+		}
+		100% {
+			transform: scale(1);
+		}
+	}
+
+	.rating-caption {
+		font-size: 0.75rem;
+		font-weight: 500;
+		font-variant-numeric: tabular-nums;
+		color: var(--color-muted-foreground);
+	}
+
+	@media (prefers-reduced-motion: reduce) {
+		.hit-button,
+		.is-popping .hit-button[data-on="true"] {
+			animation: none;
+			transition: none;
+		}
+
+		.hit-button:not(.is-disabled):active {
+			transform: none;
+		}
+
+		@media (hover: hover) and (pointer: fine) {
+			.hit-button:not(.is-disabled):hover {
+				transform: none;
+			}
+		}
+	}
+</style>

package/src/components/svg/index.ts

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

package/src/components/svg/svg.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+// Renders a drawing kept in its own .svg file, imported with `?raw`.
+// The markup is ours and static, so rendering it as HTML is safe.
+let { src, class: className = "" }: { src: string; class?: string } = $props();
+
+const markup = $derived(className ? src.replace("<svg", `<svg class="${className}"`) : src);
+</script>
+
+{@html markup}