@heyramzi/ui 2.1.0 → 2.2.0

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

@@ -1,43 +1,46 @@
 <script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import { cn } from "../../lib/utils.js";
-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();
+	// =========================
+	// IMPORTS
+	// =========================
+	import type { Snippet } from "svelte";
+	import { cn } from "../../lib/utils.js";
+	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>
 
 <!-- =========================== -->
@@ -86,7 +89,10 @@ let {
 	.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 {
+	.track
+		:global(
+			[data-slot="tabs-list"]:has(> .ui-segment:last-child[data-state="active"]) + .ui-segment
+		)::before {
 		opacity: 0;
 	}
 
@@ -109,7 +115,12 @@ let {
 	@media (hover: hover) {
 		.track
 			:global(
-				.ui-segment:hover:not([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="open"])
+				.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);
 		}
@@ -139,7 +150,8 @@ let {
 
 	/* 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"])) {
+	.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);
 	}
@@ -153,7 +165,12 @@ let {
 	@media (hover: hover) {
 		.track[data-variant="underline"]
 			:global(
-				.ui-segment:hover:not([data-state="active"], [aria-current="page"], [aria-pressed="true"], [data-state="open"])
+				.ui-segment:hover:not(
+						[data-state="active"],
+						[aria-current="page"],
+						[aria-pressed="true"],
+						[data-state="open"]
+					)
 			) {
 			background-color: transparent;
 		}
@@ -174,9 +191,8 @@ let {
 		box-shadow: inset 0 -2px 0 var(--segmented-rule, var(--color-foreground));
 	}
 
-	/* On a coarse pointer the well is 44px and its segments fill it, so the hit area is the strip.
-	   A clipped well can't hold a hit area that hangs outside it. The border becomes a ring drawn
-	   over the segments, and the pill keeps its 2px gap inside that ring. */
+	/* On a coarse pointer the well grows to 44px and its segments are the hit area, since a
+	   clipped well can't hold one hanging outside it. */
 	@media (any-pointer: coarse) {
 		.track[data-variant="pill"]::after {
 			content: "";

package/src/components/segmented/segmented.ts

@@ -52,9 +52,8 @@ export const segmentedTriggerClass = tv({
     "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.
+    // The pill sits concentric in the track's 2px inset; the underline has no well, so
+    // no padding, and its rule 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",

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

@@ -1,109 +1,109 @@
 <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;
+	/**
+	 * 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 "../../lib/utils.js";
-
-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;
-}
+	import { Star } from "phosphor-svelte";
+	import { cn } from "../../lib/utils.js";
+
+	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
@@ -152,7 +152,7 @@ function handleLeave() {
 	{/if}
 
 	{#if name}
-		<input type="hidden" {name} value={value} />
+		<input type="hidden" {name} {value} />
 	{/if}
 </div>
 

package/src/components/svg/svg.svelte

@@ -1,9 +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();
+	// 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);
+	const markup = $derived(className ? src.replace("<svg", `<svg class="${className}"`) : src);
 </script>
 
 {@html markup}

package/src/components/table-view/table-view.svelte

@@ -36,7 +36,17 @@
 	// =========================
 	// PROPS
 	// =========================
-	let { columns, rows, rowKey, label, footer, cell, rowClass, minWidth = "0", class: className }: Props = $props();
+	let {
+		columns,
+		rows,
+		rowKey,
+		label,
+		footer,
+		cell,
+		rowClass,
+		minWidth = "0",
+		class: className,
+	}: Props = $props();
 
 	// =========================
 	// FUNCTIONS
@@ -63,7 +73,12 @@
 			)}
 		>
 			{#if cell}
-				{@render cell({ row, column, value: (row as Record<string, unknown>)[column.key], text: textOf(column, row) })}
+				{@render cell({
+					row,
+					column,
+					value: (row as Record<string, unknown>)[column.key],
+					text: textOf(column, row),
+				})}
 			{:else}
 				{textOf(column, row)}
 			{/if}

package/src/components/table-view/table-view.test.ts

@@ -25,7 +25,13 @@ function render(extra: Record<string, unknown> = {}) {
     },
   });
   flushSync();
-  return { target, done: () => { void unmount(app); target.remove(); } };
+  return {
+    target,
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
 }
 
 describe("TableView", () => {

package/src/components/table-view/types.ts

@@ -1,14 +1,14 @@
 /** One column of a `TableView`. */
 export interface TableColumn<Row> {
-	/** The key of the value in the row. */
-	key: string;
-	label: string;
-	/** A number or an amount: right-aligned, tabular figures, never wraps. */
-	numeric?: boolean;
-	/** Turns the raw value into the text shown. A string value that has no `format` prints as it is. A money column passes its own currency formatter. */
-	format?: (value: unknown, row: Row) => string;
-	/** A column width such as `"30%"` or `"8rem"`. Leave it out and the table shares the rest. */
-	width?: string;
-	/** Draws the column in the muted colour. */
-	muted?: boolean;
+  /** The key of the value in the row. */
+  key: string;
+  label: string;
+  /** A number or an amount: right-aligned, tabular figures, never wraps. */
+  numeric?: boolean;
+  /** Turns the raw value into the text shown. A string value that has no `format` prints as it is. A money column passes its own currency formatter. */
+  format?: (value: unknown, row: Row) => string;
+  /** A column width such as `"30%"` or `"8rem"`. Leave it out and the table shares the rest. */
+  width?: string;
+  /** Draws the column in the muted colour. */
+  muted?: boolean;
 }

package/src/components/tags-input/index.ts

@@ -0,0 +1,13 @@
+export { default as TagsInput } from "./tags-input.svelte";
+export {
+  addTag,
+  canCreate,
+  cleanTags,
+  collectOptions,
+  editDistance,
+  findOption,
+  fold,
+  matchOptions,
+  removeTag,
+  splitTags,
+} from "./tags.js";