@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/scrubber/scrubber.js

@@ -0,0 +1,217 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Direction } from "radix-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/scrubber/scrubber.tsx
+const scrubberVariants = cva("relative w-full select-none", {
+	variants: { size: {
+		sm: "h-7 text-xs",
+		md: "h-9 text-[0.8125rem]",
+		lg: "h-11 text-sm"
+	} },
+	defaultVariants: { size: "md" }
+});
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+function precisionOf(step) {
+	const text = String(step);
+	const exponent = /e-(\d+)$/.exec(text);
+	if (exponent) return Number(exponent[1]);
+	return text.split(".")[1]?.length ?? 0;
+}
+/** A drag-to-scrub numeric control with keyboard stepping and typed entry. */
+function Scrubber({ className, size, label = "Value", value: valueProp, defaultValue, onValueChange, onValueCommit, min = 0, max = 1, step = .01, largeStep = 10, decimals: decimalsProp, ticks = 9, formatValue, editable = true, disabled = false, name, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-valuetext": ariaValueText, ...props }) {
+	const dir = Direction.useDirection(dirProp);
+	const decimals = decimalsProp ?? precisionOf(step);
+	const snap = (raw) => Number(clamp(Math.round((raw - min) / step) * step + min, min, max).toFixed(10));
+	const [uncontrolled, setUncontrolled] = useState(() => snap(defaultValue ?? min));
+	const controlled = valueProp !== void 0;
+	const value = controlled ? valueProp : uncontrolled;
+	const [dragging, setDragging] = useState(false);
+	const [draft, setDraft] = useState(null);
+	const editing = draft !== null;
+	const trackRef = useRef(null);
+	const inputRef = useRef(null);
+	const latest = useRef(value);
+	const open = useRef(false);
+	useEffect(() => {
+		if (!editing) return;
+		inputRef.current?.focus();
+		inputRef.current?.select();
+	}, [editing]);
+	const labelId = useId();
+	const range = max - min;
+	const percent = range > 0 ? (clamp(value, min, max) - min) / range * 100 : 0;
+	const text = formatValue ? formatValue(value) : value.toFixed(decimals);
+	function setValue(raw) {
+		const next = snap(raw);
+		latest.current = next;
+		if (next === value) return next;
+		if (!controlled) setUncontrolled(next);
+		onValueChange?.(next);
+		return next;
+	}
+	function fromPointer(clientX) {
+		const rect = trackRef.current?.getBoundingClientRect();
+		if (!rect || rect.width === 0) return value;
+		const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);
+		return min + (dir === "rtl" ? 1 - ratio : ratio) * range;
+	}
+	function handlePointerDown(event) {
+		if (disabled || editing || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		setDragging(true);
+		latest.current = value;
+		setValue(fromPointer(event.clientX));
+	}
+	function handlePointerMove(event) {
+		if (!dragging) return;
+		setValue(fromPointer(event.clientX));
+	}
+	function handlePointerEnd() {
+		if (!dragging) return;
+		setDragging(false);
+		onValueCommit?.(latest.current);
+	}
+	function startEditing() {
+		if (disabled || !editable) return;
+		open.current = true;
+		setDraft(value.toFixed(decimals));
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		if (event.key === "Enter" && editable) {
+			event.preventDefault();
+			startEditing();
+			return;
+		}
+		const forward = dir === "rtl" ? -1 : 1;
+		const big = event.shiftKey ? largeStep : 1;
+		const moves = {
+			ArrowRight: forward * big,
+			ArrowLeft: -forward * big,
+			ArrowUp: big,
+			ArrowDown: -big,
+			PageUp: largeStep,
+			PageDown: -largeStep
+		};
+		let next;
+		if (event.key === "Home") next = min;
+		else if (event.key === "End") next = max;
+		else if (event.key in moves) next = value + (moves[event.key] ?? 0) * step;
+		else return;
+		event.preventDefault();
+		const committed = setValue(next);
+		onValueCommit?.(committed);
+	}
+	function finishEditing(commit, refocus) {
+		if (!open.current || draft === null) return;
+		open.current = false;
+		const parsed = Number.parseFloat(draft.replace(",", "."));
+		setDraft(null);
+		if (commit && Number.isFinite(parsed)) {
+			const committed = setValue(parsed);
+			onValueCommit?.(committed);
+		}
+		if (refocus) trackRef.current?.focus();
+	}
+	const active = "group-hover/scrubber:opacity-80 group-hover/scrubber:scale-100";
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "scrubber",
+		"data-disabled": disabled ? "" : void 0,
+		dir: dirProp,
+		className: cn(scrubberVariants({ size }), disabled && "opacity-55", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: trackRef,
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"data-slot": "scrubber-track",
+				"data-dragging": dragging ? "" : void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? labelId,
+				"aria-describedby": ariaDescribedBy,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-valuenow": Number(value.toFixed(decimals)),
+				"aria-valuetext": ariaValueText ?? text,
+				"aria-orientation": "horizontal",
+				"aria-disabled": disabled || void 0,
+				"aria-keyshortcuts": editable && !disabled ? "Enter" : void 0,
+				className: cn("group/scrubber relative size-full touch-none overflow-hidden rounded-lg bg-muted", disabled ? "cursor-not-allowed" : "cursor-ew-resize", focusRing),
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerEnd,
+				onPointerCancel: handlePointerEnd,
+				onDoubleClick: startEditing,
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "scrubber-fill",
+						"aria-hidden": "true",
+						className: cn("pointer-events-none absolute inset-y-0 start-0 rounded-lg bg-foreground/14", !dragging && "transition-[width] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]"),
+						style: { width: `${String(percent)}%` }
+					}),
+					Array.from({ length: Math.max(0, ticks) }, (_, index) => /* @__PURE__ */ jsx("span", {
+						"data-slot": "scrubber-tick",
+						"aria-hidden": "true",
+						className: "pointer-events-none absolute top-1/2 h-1.5 w-px -translate-y-1/2 rounded-full bg-foreground/25",
+						style: { insetInlineStart: `${String((index + 1) / (ticks + 1) * 100)}%` }
+					}, index)),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "scrubber-thumb",
+						"aria-hidden": "true",
+						className: cn("pointer-events-none absolute top-1/2 z-[1] h-3/5 w-1 -translate-y-1/2 rounded-full bg-foreground/90", "scale-70 opacity-15 duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", dragging ? "transition-[opacity,scale]" : "transition-[opacity,scale,inset-inline-start]", "group-focus-visible/scrubber:scale-100 group-focus-visible/scrubber:opacity-80", "group-data-[dragging]/scrubber:scale-100 group-data-[dragging]/scrubber:opacity-80", !disabled && active),
+						style: { insetInlineStart: `clamp(0.25rem, calc(${String(percent)}% - 0.5rem), calc(100% - 0.5rem))` }
+					}),
+					/* @__PURE__ */ jsx("span", {
+						id: labelId,
+						"data-slot": "scrubber-label",
+						className: "pointer-events-none absolute start-3 top-1/2 z-[2] -translate-y-1/2 font-medium whitespace-nowrap text-foreground",
+						children: label
+					}),
+					/* @__PURE__ */ jsx("span", {
+						"data-slot": "scrubber-value",
+						"aria-hidden": "true",
+						className: cn("pointer-events-none absolute end-2.5 top-1/2 z-[2] -translate-y-1/2 font-mono font-medium text-foreground tabular-nums", editing && "invisible"),
+						children: text
+					})
+				]
+			}),
+			editing ? /* @__PURE__ */ jsx("input", {
+				type: "text",
+				inputMode: "decimal",
+				"data-slot": "scrubber-input",
+				"aria-labelledby": ariaLabel ? void 0 : ariaLabelledBy ?? labelId,
+				"aria-label": ariaLabel,
+				ref: inputRef,
+				value: draft,
+				onChange: (event) => setDraft(event.target.value),
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						finishEditing(true, true);
+					} else if (event.key === "Escape") {
+						event.preventDefault();
+						finishEditing(false, true);
+					}
+				},
+				onBlur: () => finishEditing(true, false),
+				className: cn("absolute inset-y-1 end-1 z-[3] w-20 rounded-md border border-input bg-background px-1.5", "text-end font-mono font-medium text-foreground tabular-nums", focusRing)
+			}) : null,
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value,
+				disabled
+			}) : null
+		]
+	});
+}
+//#endregion
+export { Scrubber, scrubberVariants };
+
+//# sourceMappingURL=scrubber.js.map

package/dist/components/scrubber/scrubber.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"scrubber.js","names":[],"sources":["../../../src/components/scrubber/scrubber.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Scrubber (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Direction } from \"radix-ui\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A design-tool number field: a labelled bar you drag across to scrub a value,\n * with the number at the end. The bar is a `role=\"slider\"` — arrows, Shift +\n * arrows and Page Up/Down for big steps, Home/End — and typing an exact value\n * is one key away: Enter (or a double-click) swaps the number for a text field;\n * Enter or leaving the field commits, Escape cancels, and focus comes back to\n * the slider.\n *\n * The source animated the capsule thumb with a `motion` spring. It carries no\n * gesture velocity, so here it is a CSS transition on data attributes, and the\n * global reduced-motion rule stops it.\n */\n\nconst scrubberVariants = cva(\"relative w-full select-none\", {\n  variants: {\n    size: {\n      sm: \"h-7 text-xs\",\n      md: \"h-9 text-[0.8125rem]\",\n      lg: \"h-11 text-sm\",\n    },\n  },\n  defaultVariants: {\n    size: \"md\",\n  },\n});\n\nexport interface ScrubberProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof scrubberVariants> {\n  /** Visible label at the start of the bar. It also names the slider. */\n  label?: ReactNode;\n  value?: number;\n  defaultValue?: number;\n  /** Called on every change: while dragging, per key press, and on a typed entry. */\n  onValueChange?: (value: number) => void;\n  /** Called when an interaction ends: pointer released, key press or typed entry. */\n  onValueCommit?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Steps moved by Shift + arrow and Page Up / Page Down. */\n  largeStep?: number;\n  /** Decimal places shown. Defaults to the precision of `step`. */\n  decimals?: number;\n  /** Number of evenly spaced tick marks; 0 hides them. */\n  ticks?: number;\n  /** Formats the displayed value and `aria-valuetext`. Defaults to `decimals` places. */\n  formatValue?: (value: number) => string;\n  /** Allow typing an exact value (Enter or double-click). */\n  editable?: boolean;\n  disabled?: boolean;\n  /** Submits the value with a form under this name. */\n  name?: string;\n}\n\nconst clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);\n\nfunction precisionOf(step: number): number {\n  const text = String(step);\n  const exponent = /e-(\\d+)$/.exec(text);\n  if (exponent) return Number(exponent[1]);\n  return text.split(\".\")[1]?.length ?? 0;\n}\n\n/** A drag-to-scrub numeric control with keyboard stepping and typed entry. */\nexport function Scrubber({\n  className,\n  size,\n  label = \"Value\",\n  value: valueProp,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 1,\n  step = 0.01,\n  largeStep = 10,\n  decimals: decimalsProp,\n  ticks = 9,\n  formatValue,\n  editable = true,\n  disabled = false,\n  name,\n  dir: dirProp,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  \"aria-valuetext\": ariaValueText,\n  ...props\n}: ScrubberProps) {\n  const dir = Direction.useDirection(dirProp as \"ltr\" | \"rtl\" | undefined);\n  const decimals = decimalsProp ?? precisionOf(step);\n  const snap = (raw: number) =>\n    Number(clamp(Math.round((raw - min) / step) * step + min, min, max).toFixed(10));\n\n  const [uncontrolled, setUncontrolled] = useState(() => snap(defaultValue ?? min));\n  const controlled = valueProp !== undefined;\n  const value = controlled ? valueProp : uncontrolled;\n  const [dragging, setDragging] = useState(false);\n  const [draft, setDraft] = useState<string | null>(null);\n  const editing = draft !== null;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n  const inputRef = useRef<HTMLInputElement>(null);\n  // The value an in-progress drag last produced, reported on release.\n  const latest = useRef(value);\n  // Whether a typed entry is open. A ref, because refocusing the slider blurs\n  // the field before React has re-rendered, and that blur must not commit an\n  // entry Escape has just cancelled.\n  const open = useRef(false);\n\n  // Typed entry replaces the number the user just asked to edit.\n  useEffect(() => {\n    if (!editing) return;\n    inputRef.current?.focus();\n    inputRef.current?.select();\n  }, [editing]);\n  const labelId = useId();\n  const range = max - min;\n  const percent = range > 0 ? ((clamp(value, min, max) - min) / range) * 100 : 0;\n  const text = formatValue ? formatValue(value) : value.toFixed(decimals);\n\n  function setValue(raw: number) {\n    const next = snap(raw);\n    latest.current = next;\n    if (next === value) return next;\n    if (!controlled) setUncontrolled(next);\n    onValueChange?.(next);\n    return next;\n  }\n\n  function fromPointer(clientX: number) {\n    const rect = trackRef.current?.getBoundingClientRect();\n    if (!rect || rect.width === 0) return value;\n    const ratio = clamp((clientX - rect.left) / rect.width, 0, 1);\n    return min + (dir === \"rtl\" ? 1 - ratio : ratio) * range;\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (disabled || editing || event.button !== 0) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    setDragging(true);\n    latest.current = value;\n    setValue(fromPointer(event.clientX));\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    if (!dragging) return;\n    setValue(fromPointer(event.clientX));\n  }\n\n  function handlePointerEnd() {\n    if (!dragging) return;\n    setDragging(false);\n    onValueCommit?.(latest.current);\n  }\n\n  function startEditing() {\n    if (disabled || !editable) return;\n    open.current = true;\n    setDraft(value.toFixed(decimals));\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (disabled) return;\n    if (event.key === \"Enter\" && editable) {\n      event.preventDefault();\n      startEditing();\n      return;\n    }\n    const forward = dir === \"rtl\" ? -1 : 1;\n    const big = event.shiftKey ? largeStep : 1;\n    const moves: Record<string, number> = {\n      ArrowRight: forward * big,\n      ArrowLeft: -forward * big,\n      ArrowUp: big,\n      ArrowDown: -big,\n      PageUp: largeStep,\n      PageDown: -largeStep,\n    };\n    let next: number;\n    if (event.key === \"Home\") next = min;\n    else if (event.key === \"End\") next = max;\n    else if (event.key in moves) next = value + (moves[event.key] ?? 0) * step;\n    else return;\n    event.preventDefault();\n    // Not inlined into the optional call: `f?.(x)` skips evaluating x when f is absent.\n    const committed = setValue(next);\n    onValueCommit?.(committed);\n  }\n\n  function finishEditing(commit: boolean, refocus: boolean) {\n    if (!open.current || draft === null) return;\n    open.current = false;\n    const parsed = Number.parseFloat(draft.replace(\",\", \".\"));\n    setDraft(null);\n    if (commit && Number.isFinite(parsed)) {\n      const committed = setValue(parsed);\n      onValueCommit?.(committed);\n    }\n    if (refocus) trackRef.current?.focus();\n  }\n\n  const active = \"group-hover/scrubber:opacity-80 group-hover/scrubber:scale-100\";\n\n  return (\n    <div\n      data-slot=\"scrubber\"\n      data-disabled={disabled ? \"\" : undefined}\n      dir={dirProp}\n      className={cn(scrubberVariants({ size }), disabled && \"opacity-55\", className)}\n      {...props}\n    >\n      <div\n        ref={trackRef}\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        data-slot=\"scrubber-track\"\n        data-dragging={dragging ? \"\" : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabel ? undefined : (ariaLabelledBy ?? labelId)}\n        aria-describedby={ariaDescribedBy}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuenow={Number(value.toFixed(decimals))}\n        aria-valuetext={ariaValueText ?? text}\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        aria-keyshortcuts={editable && !disabled ? \"Enter\" : undefined}\n        className={cn(\n          \"group/scrubber relative size-full touch-none overflow-hidden rounded-lg bg-muted\",\n          disabled ? \"cursor-not-allowed\" : \"cursor-ew-resize\",\n          focusRing,\n        )}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerEnd}\n        onPointerCancel={handlePointerEnd}\n        onDoubleClick={startEditing}\n      >\n        <span\n          data-slot=\"scrubber-fill\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute inset-y-0 start-0 rounded-lg bg-foreground/14\",\n            !dragging &&\n              \"transition-[width] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n          )}\n          style={{ width: `${String(percent)}%` }}\n        />\n        {Array.from({ length: Math.max(0, ticks) }, (_, index) => (\n          <span\n            key={index}\n            data-slot=\"scrubber-tick\"\n            aria-hidden=\"true\"\n            className=\"pointer-events-none absolute top-1/2 h-1.5 w-px -translate-y-1/2 rounded-full bg-foreground/25\"\n            style={{ insetInlineStart: `${String(((index + 1) / (ticks + 1)) * 100)}%` }}\n          />\n        ))}\n        <span\n          data-slot=\"scrubber-thumb\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute top-1/2 z-[1] h-3/5 w-1 -translate-y-1/2 rounded-full bg-foreground/90\",\n            \"scale-70 opacity-15 duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            dragging\n              ? \"transition-[opacity,scale]\"\n              : \"transition-[opacity,scale,inset-inline-start]\",\n            \"group-focus-visible/scrubber:scale-100 group-focus-visible/scrubber:opacity-80\",\n            \"group-data-[dragging]/scrubber:scale-100 group-data-[dragging]/scrubber:opacity-80\",\n            !disabled && active,\n          )}\n          style={{\n            insetInlineStart: `clamp(0.25rem, calc(${String(percent)}% - 0.5rem), calc(100% - 0.5rem))`,\n          }}\n        />\n        <span\n          id={labelId}\n          data-slot=\"scrubber-label\"\n          className=\"pointer-events-none absolute start-3 top-1/2 z-[2] -translate-y-1/2 font-medium whitespace-nowrap text-foreground\"\n        >\n          {label}\n        </span>\n        <span\n          data-slot=\"scrubber-value\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"pointer-events-none absolute end-2.5 top-1/2 z-[2] -translate-y-1/2 font-mono font-medium text-foreground tabular-nums\",\n            editing && \"invisible\",\n          )}\n        >\n          {text}\n        </span>\n      </div>\n      {editing ? (\n        <input\n          type=\"text\"\n          inputMode=\"decimal\"\n          data-slot=\"scrubber-input\"\n          aria-labelledby={ariaLabel ? undefined : (ariaLabelledBy ?? labelId)}\n          aria-label={ariaLabel}\n          ref={inputRef}\n          value={draft}\n          onChange={(event) => setDraft(event.target.value)}\n          onKeyDown={(event) => {\n            if (event.key === \"Enter\") {\n              event.preventDefault();\n              finishEditing(true, true);\n            } else if (event.key === \"Escape\") {\n              event.preventDefault();\n              finishEditing(false, true);\n            }\n          }}\n          onBlur={() => finishEditing(true, false)}\n          className={cn(\n            \"absolute inset-y-1 end-1 z-[3] w-20 rounded-md border border-input bg-background px-1.5\",\n            \"text-end font-mono font-medium text-foreground tabular-nums\",\n            focusRing,\n          )}\n        />\n      ) : null}\n      {name ? <input type=\"hidden\" name={name} value={value} disabled={disabled} /> : null}\n    </div>\n  );\n}\n\nexport { scrubberVariants };\n"],"mappings":"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"}

package/dist/components/select/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["class-variance-authority", "radix-ui"],
 	registryDependencies: [],
 	files: ["select.tsx"],
-	a11y: "Full listbox keyboard model: arrows move, typeahead jumps, Enter selects, Escape closes and restores focus. Give the trigger a name with aria-labelledby or a Label. Past about a dozen options prefer Combobox — scrolling a long listbox by keyboard is slow."
+	a11y: "Full listbox keyboard model: arrows move, typeahead jumps, Enter selects, Escape closes and restores focus. Give the trigger a name with aria-labelledby or a Label. Past about a dozen options prefer Combobox — scrolling a long listbox by keyboard is slow. The opening pop, option stagger and tick pop are decoration and stop under reduced motion."
 });
 //#endregion
 export { meta };

package/dist/components/select/meta.js.map

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/select/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"select\",\n  title: \"Select\",\n  description: \"Picks one value from a short list of options.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"select.tsx\"],\n  a11y:\n    \"Full listbox keyboard model: arrows move, typeahead jumps, Enter selects, Escape closes and \" +\n    \"restores focus. Give the trigger a name with aria-labelledby or a Label. Past about a dozen \" +\n    \"options prefer Combobox — scrolling a long listbox by keyboard is slow.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAGJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/select/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"select\",\n  title: \"Select\",\n  description: \"Picks one value from a short list of options.\",\n  category: \"form\",\n  status: \"stable\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"select.tsx\"],\n  a11y:\n    \"Full listbox keyboard model: arrows move, typeahead jumps, Enter selects, Escape closes and \" +\n    \"restores focus. Give the trigger a name with aria-labelledby or a Label. Past about a dozen \" +\n    \"options prefer Combobox — scrolling a long listbox by keyboard is slow. The opening pop, \" +\n    \"option stagger and tick pop are decoration and stop under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAIJ,CAAC"}

package/dist/components/select/select.d.ts

@@ -8,6 +8,11 @@ import { ComponentPropsWithRef, ReactNode } from "react";
  * For a short, known list. Past roughly a dozen options people want to type
  * rather than scroll — reach for Combobox there. Unlike a native `<select>`,
  * the options are real elements, so they can carry icons and descriptions.
+ *
+ * The list opens with the same motion as DropdownMenu and ContextMenu — a pop
+ * from the trigger with a slight overshoot, options dropping in 20ms apart —
+ * and the selected option's tick pops in. All of it is decoration and stops
+ * under reduced motion.
  */
 declare const Select$1: import("react").FC<Select.SelectProps>;
 declare const SelectGroup: import("react").ForwardRefExoticComponent<Select.SelectGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/select/select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"select.d.ts","names":[],"sources":["../../../src/components/select/select.tsx"],"mappings":";;;;;;;;;;;cAgBa,0BAAM,GAAA,OAAA;cACN,6BAAW,0BAAA,OAAA,mCAAA,cAAA;cACX,6BAAW,0BAAA,OAAA,mCAAA,cAAA;cAElB,wBAAqB;;6CAyB1B;UAEgB,2BAEb,6BAA6B,OAAgB,UAC7C,oBAAoB;iBAER,gBACd,WACA,aACA,aACG,SACF,qCAAkB,IAAA;KAqDT,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBACd,WACA,UACA,UACA,eACG,SACF,qCAAkB,IAAA;UA0BJ,wBAAwB,6BAA6B,OAAgB;;;;;;;;EAQpF,QAAQ;;iBAGM,aAAa,WAAW,OAAO,aAAa,SAAS,kCAAe,IAAA;iBAwCpE,cACd,cACG,SACF,6BAA6B,OAAgB,yBAAM,IAAA;iBAUtC,kBACd,cACG,SACF,6BAA6B,OAAgB,6BAAU,IAAA"}
+{"version":3,"file":"select.d.ts","names":[],"sources":["../../../src/components/select/select.tsx"],"mappings":";;;;;;;;;;;;;;;;cAsBa,0BAAM,GAAA,OAAA;cACN,6BAAW,0BAAA,OAAA,mCAAA,cAAA;cACX,6BAAW,0BAAA,OAAA,mCAAA,cAAA;cAElB,wBAAqB;;6CAyB1B;UAEgB,2BAEb,6BAA6B,OAAgB,UAC7C,oBAAoB;iBAER,gBACd,WACA,aACA,aACG,SACF,qCAAkB,IAAA;KA8ET,qBAAqB,6BAA6B,OAAgB;iBAE9D,gBACd,WACA,UACA,UACA,eACG,SACF,qCAAkB,IAAA;UAoCJ,wBAAwB,6BAA6B,OAAgB;;;;;;;;EAQpF,QAAQ;;iBAGM,aAAa,WAAW,OAAO,aAAa,SAAS,kCAAe,IAAA;iBA8CpE,cACd,cACG,SACF,6BAA6B,OAAgB,yBAAM,IAAA;iBAUtC,kBACd,cACG,SACF,6BAA6B,OAAgB,6BAAU,IAAA"}

package/dist/components/select/select.js

@@ -11,6 +11,11 @@ import { cva } from "class-variance-authority";
 * For a short, known list. Past roughly a dozen options people want to type
 * rather than scroll — reach for Combobox there. Unlike a native `<select>`,
 * the options are real elements, so they can carry icons and descriptions.
+*
+* The list opens with the same motion as DropdownMenu and ContextMenu — a pop
+* from the trigger with a slight overshoot, options dropping in 20ms apart —
+* and the selected option's tick pops in. All of it is decoration and stops
+* under reduced motion.
 */
 const Select$1 = Select.Root;
 const SelectGroup = Select.Group;
@@ -68,35 +73,52 @@ function ScrollButton({ direction, className, ...props }) {
 		})
 	});
 }
+const PREFIX = "dowel-select";
+const STYLES = `
+@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}
+@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}
+@keyframes ${PREFIX}-check-in{from{opacity:0;transform:scale(0)}}
+${Array.from({ length: 11 }, (_, i) => `[data-slot=select-viewport]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`).join("\n")}
+[data-slot=select-viewport]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}
+`;
+function Styles() {
+	return /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	});
+}
 function SelectContent({ className, children, position = "popper", sideOffset = 6, ...props }) {
-	return /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Styles, {}), /* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsxs(Select.Content, {
 		"data-slot": "select-content",
 		position,
 		sideOffset: position === "popper" ? sideOffset : void 0,
-		className: cn("relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]", "min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover", "p-1 text-popover-foreground shadow-lg", "origin-[var(--radix-select-content-transform-origin)]", "data-[state=closed]:animate-float-out data-[state=open]:animate-float-in", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", className),
+		className: cn("relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]", "min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover", "p-1 text-popover-foreground shadow-lg", "origin-[var(--radix-select-content-transform-origin)]", "data-[state=closed]:animate-float-out", "data-[state=open]:animate-[dowel-select-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]", className),
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ScrollButton, { direction: "up" }),
 			/* @__PURE__ */ jsx(Select.Viewport, {
-				className: "p-0",
+				"data-slot": "select-viewport",
+				className: "p-0 [&>*]:animate-[dowel-select-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]",
 				children
 			}),
 			/* @__PURE__ */ jsx(ScrollButton, { direction: "down" })
 		]
-	}) });
+	}) })] });
 }
 function SelectItem({ className, label, children, ...props }) {
 	return /* @__PURE__ */ jsxs(Select.Item, {
 		"data-slot": "select-item",
-		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		className: cn("relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none", "transition-colors duration-[var(--duration-instant)]", "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground", "data-[disabled]:pointer-events-none data-[disabled]:opacity-55", "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
 		...props,
 		children: [label === void 0 ? /* @__PURE__ */ jsx(Select.ItemText, { children }) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Select.ItemText, { children: label }), children] }), /* @__PURE__ */ jsx("span", {
-			className: "absolute right-2 grid size-4 place-items-center",
+			className: "absolute end-2 grid size-4 place-items-center",
 			children: /* @__PURE__ */ jsx(Select.ItemIndicator, { children: /* @__PURE__ */ jsx("svg", {
 				viewBox: "0 0 24 24",
 				fill: "none",
 				"aria-hidden": "true",
-				className: "size-3.5",
+				"data-slot": "select-item-check",
+				className: "size-3.5 animate-[dowel-select-check-in_calc(200ms*var(--motion-scale))_var(--ease-overshoot)]",
 				children: /* @__PURE__ */ jsx("path", {
 					d: "m5 13 4 4L19 7",
 					stroke: "currentColor",

package/dist/components/select/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { focusRing, invalidStyles } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Picks one value from a list.\n *\n * For a short, known list. Past roughly a dozen options people want to type\n * rather than scroll — reach for Combobox there. Unlike a native `<select>`,\n * the options are real elements, so they can carry icons and descriptions.\n */\nexport const Select = SelectPrimitive.Root;\nexport const SelectGroup = SelectPrimitive.Group;\nexport const SelectValue = SelectPrimitive.Value;\n\nconst selectTriggerVariants = cva(\n  cn(\n    \"flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n    \"whitespace-nowrap text-foreground shadow-xs\",\n    \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n    \"data-[placeholder]:text-muted-foreground\",\n    \"focus-visible:border-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\n    focusRing,\n    invalidStyles,\n  ),\n  {\n    variants: {\n      triggerSize: {\n        sm: \"h-8 px-2.5 text-sm\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-10 px-3.5 text-base\",\n      },\n    },\n    defaultVariants: {\n      triggerSize: \"md\",\n    },\n  },\n);\n\nexport interface SelectTriggerProps\n  extends\n    ComponentPropsWithRef<typeof SelectPrimitive.Trigger>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nexport function SelectTrigger({\n  className,\n  triggerSize,\n  children,\n  ...props\n}: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(selectTriggerVariants({ triggerSize }), className)}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-60\">\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\n/** Scroll affordance shown only when the list overflows. Decorative. */\nfunction ScrollButton({\n  direction,\n  className,\n  ...props\n}: {\n  direction: \"up\" | \"down\";\n} & ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>) {\n  const Comp =\n    direction === \"up\" ? SelectPrimitive.ScrollUpButton : SelectPrimitive.ScrollDownButton;\n\n  return (\n    <Comp\n      data-slot={`select-scroll-${direction}`}\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-60\">\n        <path\n          d={direction === \"up\" ? \"m7 14 5-5 5 5\" : \"m7 10 5 5 5-5\"}\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </Comp>\n  );\n}\n\nexport type SelectContentProps = ComponentPropsWithRef<typeof SelectPrimitive.Content>;\n\nexport function SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  sideOffset = 6,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        position={position}\n        sideOffset={position === \"popper\" ? sideOffset : undefined}\n        className={cn(\n          \"relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]\",\n          \"min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover\",\n          \"p-1 text-popover-foreground shadow-lg\",\n          \"origin-[var(--radix-select-content-transform-origin)]\",\n          \"data-[state=closed]:animate-float-out data-[state=open]:animate-float-in\",\n          position === \"popper\" && \"w-full min-w-[var(--radix-select-trigger-width)]\",\n          className,\n        )}\n        {...props}\n      >\n        <ScrollButton direction=\"up\" />\n        <SelectPrimitive.Viewport className=\"p-0\">{children}</SelectPrimitive.Viewport>\n        <ScrollButton direction=\"down\" />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  );\n}\n\nexport interface SelectItemProps extends ComponentPropsWithRef<typeof SelectPrimitive.Item> {\n  /**\n   * What the trigger shows once this option is chosen.\n   *\n   * The primitive clones the item's text into the trigger, so a rich option —\n   * a name with a description under it — would otherwise drag all of that into\n   * a one-line trigger. Give the label here and the rest as children.\n   */\n  label?: ReactNode;\n}\n\nexport function SelectItem({ className, label, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 pr-8 pl-2 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {label === undefined ? (\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      ) : (\n        <>\n          <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>\n          {children}\n        </>\n      )}\n      {/* Decorative: selection is already announced through aria-selected. */}\n      <span className=\"absolute right-2 grid size-4 place-items-center\">\n        <SelectPrimitive.ItemIndicator>\n          <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-3.5\">\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { selectTriggerVariants };\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["Select","SelectPrimitive"],"sources":["../../../src/components/select/select.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Select (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport { Select as SelectPrimitive } from \"radix-ui\";\nimport type { ComponentPropsWithRef, ReactNode } from \"react\";\n\nimport { focusRing, invalidStyles } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * Picks one value from a list.\n *\n * For a short, known list. Past roughly a dozen options people want to type\n * rather than scroll — reach for Combobox there. Unlike a native `<select>`,\n * the options are real elements, so they can carry icons and descriptions.\n *\n * The list opens with the same motion as DropdownMenu and ContextMenu — a pop\n * from the trigger with a slight overshoot, options dropping in 20ms apart —\n * and the selected option's tick pops in. All of it is decoration and stops\n * under reduced motion.\n */\nexport const Select = SelectPrimitive.Root;\nexport const SelectGroup = SelectPrimitive.Group;\nexport const SelectValue = SelectPrimitive.Value;\n\nconst selectTriggerVariants = cva(\n  cn(\n    \"flex w-full items-center justify-between gap-2 rounded-md border border-input bg-background\",\n    \"whitespace-nowrap text-foreground shadow-xs\",\n    \"transition-[border-color,box-shadow] duration-[var(--duration-fast)]\",\n    \"data-[placeholder]:text-muted-foreground\",\n    \"focus-visible:border-ring\",\n    \"disabled:cursor-not-allowed disabled:opacity-55\",\n    \"[&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"*:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2\",\n    focusRing,\n    invalidStyles,\n  ),\n  {\n    variants: {\n      triggerSize: {\n        sm: \"h-8 px-2.5 text-sm\",\n        md: \"h-9 px-3 text-sm\",\n        lg: \"h-10 px-3.5 text-base\",\n      },\n    },\n    defaultVariants: {\n      triggerSize: \"md\",\n    },\n  },\n);\n\nexport interface SelectTriggerProps\n  extends\n    ComponentPropsWithRef<typeof SelectPrimitive.Trigger>,\n    VariantProps<typeof selectTriggerVariants> {}\n\nexport function SelectTrigger({\n  className,\n  triggerSize,\n  children,\n  ...props\n}: SelectTriggerProps) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(selectTriggerVariants({ triggerSize }), className)}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-60\">\n          <path\n            d=\"m7 10 5 5 5-5\"\n            stroke=\"currentColor\"\n            strokeWidth=\"2\"\n            strokeLinecap=\"round\"\n            strokeLinejoin=\"round\"\n          />\n        </svg>\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n}\n\n/** Scroll affordance shown only when the list overflows. Decorative. */\nfunction ScrollButton({\n  direction,\n  className,\n  ...props\n}: {\n  direction: \"up\" | \"down\";\n} & ComponentPropsWithRef<typeof SelectPrimitive.ScrollUpButton>) {\n  const Comp =\n    direction === \"up\" ? SelectPrimitive.ScrollUpButton : SelectPrimitive.ScrollDownButton;\n\n  return (\n    <Comp\n      data-slot={`select-scroll-${direction}`}\n      className={cn(\"flex cursor-default items-center justify-center py-1\", className)}\n      {...props}\n    >\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" aria-hidden=\"true\" className=\"size-4 opacity-60\">\n        <path\n          d={direction === \"up\" ? \"m7 14 5-5 5 5\" : \"m7 10 5 5 5-5\"}\n          stroke=\"currentColor\"\n          strokeWidth=\"2\"\n          strokeLinecap=\"round\"\n          strokeLinejoin=\"round\"\n        />\n      </svg>\n    </Comp>\n  );\n}\n\nconst PREFIX = \"dowel-select\";\n\n/** Stagger delays for the first dozen entries; later ones arrive with the twelfth. */\nconst STAGGER = Array.from(\n  { length: 11 },\n  (_, i) =>\n    `[data-slot=select-viewport]>:nth-child(${String(i + 2)}){animation-delay:calc(${String((i + 1) * 20)}ms * var(--motion-scale))}`,\n).join(\"\\n\");\n\nconst STYLES = `\n@keyframes ${PREFIX}-in{from{opacity:0;transform:translateY(-4px) scale(.95)}}\n@keyframes ${PREFIX}-item-in{from{opacity:0;transform:translateY(-4px)}}\n@keyframes ${PREFIX}-check-in{from{opacity:0;transform:scale(0)}}\n${STAGGER}\n[data-slot=select-viewport]>:nth-child(n+13){animation-delay:calc(240ms * var(--motion-scale))}\n`;\n\nfunction Styles() {\n  return (\n    <style href={PREFIX} precedence=\"dowel\">\n      {STYLES}\n    </style>\n  );\n}\n\nexport type SelectContentProps = ComponentPropsWithRef<typeof SelectPrimitive.Content>;\n\nexport function SelectContent({\n  className,\n  children,\n  position = \"popper\",\n  sideOffset = 6,\n  ...props\n}: SelectContentProps) {\n  return (\n    <>\n      <Styles />\n      <SelectPrimitive.Portal>\n        <SelectPrimitive.Content\n          data-slot=\"select-content\"\n          position={position}\n          sideOffset={position === \"popper\" ? sideOffset : undefined}\n          className={cn(\n            \"relative z-[var(--z-popover)] max-h-[var(--radix-select-content-available-height)]\",\n            \"min-w-32 overflow-x-hidden overflow-y-auto rounded-lg border border-border bg-popover\",\n            \"p-1 text-popover-foreground shadow-lg\",\n            \"origin-[var(--radix-select-content-transform-origin)]\",\n            // Keyframe names spelled out because Tailwind reads class names from the source.\n            \"data-[state=closed]:animate-float-out\",\n            \"data-[state=open]:animate-[dowel-select-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)]\",\n            position === \"popper\" && \"w-full min-w-[var(--radix-select-trigger-width)]\",\n            className,\n          )}\n          {...props}\n        >\n          <ScrollButton direction=\"up\" />\n          <SelectPrimitive.Viewport\n            data-slot=\"select-viewport\"\n            className=\"p-0 [&>*]:animate-[dowel-select-item-in_calc(250ms*var(--motion-scale))_var(--ease-overshoot)_both]\"\n          >\n            {children}\n          </SelectPrimitive.Viewport>\n          <ScrollButton direction=\"down\" />\n        </SelectPrimitive.Content>\n      </SelectPrimitive.Portal>\n    </>\n  );\n}\n\nexport interface SelectItemProps extends ComponentPropsWithRef<typeof SelectPrimitive.Item> {\n  /**\n   * What the trigger shows once this option is chosen.\n   *\n   * The primitive clones the item's text into the trigger, so a rich option —\n   * a name with a description under it — would otherwise drag all of that into\n   * a one-line trigger. Give the label here and the rest as children.\n   */\n  label?: ReactNode;\n}\n\nexport function SelectItem({ className, label, children, ...props }: SelectItemProps) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-md py-1.5 ps-2 pe-8 text-sm outline-none select-none\",\n        \"transition-colors duration-[var(--duration-instant)]\",\n        \"data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground\",\n        \"data-[disabled]:pointer-events-none data-[disabled]:opacity-55\",\n        \"[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className,\n      )}\n      {...props}\n    >\n      {label === undefined ? (\n        <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n      ) : (\n        <>\n          <SelectPrimitive.ItemText>{label}</SelectPrimitive.ItemText>\n          {children}\n        </>\n      )}\n      {/* Decorative: selection is already announced through aria-selected. */}\n      <span className=\"absolute end-2 grid size-4 place-items-center\">\n        <SelectPrimitive.ItemIndicator>\n          <svg\n            viewBox=\"0 0 24 24\"\n            fill=\"none\"\n            aria-hidden=\"true\"\n            data-slot=\"select-item-check\"\n            className=\"size-3.5 animate-[dowel-select-check-in_calc(200ms*var(--motion-scale))_var(--ease-overshoot)]\"\n          >\n            <path\n              d=\"m5 13 4 4L19 7\"\n              stroke=\"currentColor\"\n              strokeWidth=\"2.5\"\n              strokeLinecap=\"round\"\n              strokeLinejoin=\"round\"\n            />\n          </svg>\n        </SelectPrimitive.ItemIndicator>\n      </span>\n    </SelectPrimitive.Item>\n  );\n}\n\nexport function SelectLabel({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs font-medium text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function SelectSeparator({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  );\n}\n\nexport { selectTriggerVariants };\n"],"mappings":"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"}

package/dist/components/selection-list/index.d.ts

@@ -0,0 +1,2 @@
+import { SelectionList, SelectionListItem, SelectionListProps, selectionListVariants } from "./selection-list.js";
+export { SelectionList, type SelectionListItem, type SelectionListProps, selectionListVariants };

package/dist/components/selection-list/index.js

@@ -0,0 +1,2 @@
+import { SelectionList, selectionListVariants } from "./selection-list.js";
+export { SelectionList, selectionListVariants };

package/dist/components/selection-list/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/selection-list/meta.ts
+const meta = defineMeta({
+	name: "selection-list",
+	title: "Selection List",
+	description: "A multi-select list of people with a liquid tick and an action that springs out from under it once someone is picked.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: ["avatar", "button"],
+	files: ["selection-list.tsx", "selection-list-spring.ts"],
+	a11y: "The list is a role=\"listbox\" aria-multiselectable=\"true\" with a single tab stop; name it with aria-label (default \"Select people\") or aria-labelledby. Rows are role=\"option\" with aria-selected. ArrowUp/ArrowDown rove with wrap-around, Home/End jump, Space/Enter toggle and Ctrl/Cmd+A selects or clears everything. The hover highlight follows keyboard focus as well as the pointer. The action button is disabled, inert and aria-hidden while tucked away (nothing selected); a pending action shows aria-busy, and the done label is announced through a polite live region. When the action tucks away again focus returns to the list. The tick, avatars and highlight are aria-hidden; under reduced motion the goo fill becomes a plain fill."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/selection-list/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/selection-list/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"selection-list\",\n  title: \"Selection List\",\n  description:\n    \"A multi-select list of people with a liquid tick and an action that springs out from under it once someone is picked.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [\"avatar\", \"button\"],\n  files: [\"selection-list.tsx\", \"selection-list-spring.ts\"],\n  a11y:\n    'The list is a role=\"listbox\" aria-multiselectable=\"true\" with a single tab stop; name it with aria-label ' +\n    '(default \"Select people\") or aria-labelledby. Rows are role=\"option\" with aria-selected. ArrowUp/ArrowDown ' +\n    \"rove with wrap-around, Home/End jump, Space/Enter toggle and Ctrl/Cmd+A selects or clears everything. The \" +\n    \"hover highlight follows keyboard focus as well as the pointer. The action button is disabled, inert and \" +\n    \"aria-hidden while tucked away (nothing selected); a pending action shows aria-busy, and the done label is \" +\n    \"announced through a polite live region. When the action tucks away again focus returns to the list. The \" +\n    \"tick, avatars and highlight are aria-hidden; under reduced motion the goo fill becomes a plain fill.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC,UAAU,QAAQ;CACzC,OAAO,CAAC,sBAAsB,0BAA0B;CACxD,MACE;AAOJ,CAAC"}

package/dist/components/selection-list/selection-list-spring.js

@@ -0,0 +1,21 @@
+//#region src/components/selection-list/selection-list-spring.ts
+function springEasing(bounce, samples = 48) {
+	const zeta = 1 - Math.min(Math.max(bounce, 0), 1) * .7;
+	const omega = Math.log(1e3) / zeta;
+	const points = [];
+	for (let i = 0; i <= samples; i += 1) {
+		const t = i / samples;
+		let x;
+		if (zeta >= .999) x = 1 - Math.exp(-omega * t) * (1 + omega * t);
+		else {
+			const wd = omega * Math.sqrt(1 - zeta * zeta);
+			x = 1 - Math.exp(-zeta * omega * t) * (Math.cos(wd * t) + zeta * omega / wd * Math.sin(wd * t));
+		}
+		points.push(i === samples ? "1" : String(Math.round(x * 1e3) / 1e3));
+	}
+	return `linear(${points.join(", ")})`;
+}
+//#endregion
+export { springEasing };
+
+//# sourceMappingURL=selection-list-spring.js.map

package/dist/components/selection-list/selection-list-spring.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-list-spring.js","names":[],"sources":["../../../src/components/selection-list/selection-list-spring.ts"],"sourcesContent":["/*\n * A damped spring expressed as a CSS `linear()` easing, so a state-driven\n * spring (overshoot, settle) runs as a plain CSS transition: no animation\n * library, and the global reduced-motion rule and --motion-scale still apply.\n *\n * `bounce` 0..1 (0 = critically damped, no overshoot; 1 = very lively).\n * Returns the easing string. Pair it with a duration from the caller.\n * Browsers without linear() drop the declaration, so set it through a CSS\n * variable consumed inside `@supports (transition-timing-function: linear(0, 1))`\n * in the hoisted stylesheet, with a cubic-bezier fallback in the class list.\n */\nexport function springEasing(bounce: number, samples = 48): string {\n  const b = Math.min(Math.max(bounce, 0), 1);\n  const zeta = 1 - b * 0.7; // damping ratio 1 → 0.3\n  // Choose ω so the envelope has decayed to ~0.1% at t = 1.\n  const omega = Math.log(1000) / zeta;\n  const points: string[] = [];\n  for (let i = 0; i <= samples; i += 1) {\n    const t = i / samples;\n    let x: number;\n    if (zeta >= 0.999) {\n      x = 1 - Math.exp(-omega * t) * (1 + omega * t);\n    } else {\n      const wd = omega * Math.sqrt(1 - zeta * zeta);\n      x =\n        1 -\n        Math.exp(-zeta * omega * t) *\n          (Math.cos(wd * t) + ((zeta * omega) / wd) * Math.sin(wd * t));\n    }\n    points.push(i === samples ? \"1\" : String(Math.round(x * 1000) / 1000));\n  }\n  return `linear(${points.join(\", \")})`;\n}\n"],"mappings":";AAWA,SAAgB,aAAa,QAAgB,UAAU,IAAY;CAEjE,MAAM,OAAO,IADH,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,CACvB,IAAI;CAErB,MAAM,QAAQ,KAAK,IAAI,GAAI,IAAI;CAC/B,MAAM,SAAmB,CAAC;CAC1B,KAAK,IAAI,IAAI,GAAG,KAAK,SAAS,KAAK,GAAG;EACpC,MAAM,IAAI,IAAI;EACd,IAAI;EACJ,IAAI,QAAQ,MACV,IAAI,IAAI,KAAK,IAAI,CAAC,QAAQ,CAAC,KAAK,IAAI,QAAQ;OACvC;GACL,MAAM,KAAK,QAAQ,KAAK,KAAK,IAAI,OAAO,IAAI;GAC5C,IACE,IACA,KAAK,IAAI,CAAC,OAAO,QAAQ,CAAC,KACvB,KAAK,IAAI,KAAK,CAAC,IAAM,OAAO,QAAS,KAAM,KAAK,IAAI,KAAK,CAAC;EACjE;EACA,OAAO,KAAK,MAAM,UAAU,MAAM,OAAO,KAAK,MAAM,IAAI,GAAI,IAAI,GAAI,CAAC;CACvE;CACA,OAAO,UAAU,OAAO,KAAK,IAAI,EAAE;AACrC"}

package/dist/components/selection-list/selection-list.d.ts

@@ -0,0 +1,42 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/selection-list/selection-list.d.ts
+/** The box surface. `inverted` is the workbench's dark fill. */
+declare const selectionListVariants: (props?: ({
+  tone?: "default" | "inverted" | null | undefined;
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface SelectionListItem {
+  id: string;
+  name: string;
+  /** Secondary line, such as a handle. */
+  description?: string;
+  /** Image URL. Initials are shown while it loads and if it fails. */
+  avatar?: string;
+}
+interface SelectionListProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof selectionListVariants> {
+  items: SelectionListItem[];
+  /** Controlled selection, as item ids. */
+  value?: string[];
+  defaultValue?: string[];
+  onValueChange?: (value: string[]) => void;
+  /** Radius of the box in pixels; the pill and action radii derive from it. */
+  corner?: number;
+  /** The action's label for a selection count. */
+  actionLabel?: string | ((count: number) => string);
+  /** Shown on the action, and announced, once it has run. */
+  doneLabel?: string;
+  /** Runs with the selected ids. Return a promise to show a busy state until it settles. */
+  onAction?: (ids: string[]) => unknown;
+  /** Milliseconds the done label shows before the action tucks away. */
+  resetAfter?: number;
+  /** Overshoot of the action's spring, 0–1. */
+  bounce?: number;
+  listClassName?: string;
+  actionClassName?: string;
+}
+/** A multi-select list of people whose action springs out once someone is picked. */
+declare function SelectionList({ className, style, items, value: valueProp, defaultValue, onValueChange, corner, actionLabel, doneLabel, onAction, resetAfter, bounce, tone, stroke, listClassName, actionClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SelectionListProps): import("react").JSX.Element;
+//#endregion
+export { SelectionList, SelectionListItem, SelectionListProps, selectionListVariants };
+//# sourceMappingURL=selection-list.d.ts.map

package/dist/components/selection-list/selection-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-list.d.ts","names":[],"sources":["../../../src/components/selection-list/selection-list.tsx"],"mappings":";;;;cAmDM,wBAAqB;;;6CAiBzB;UAEe;EACf;EACA;;EAEA;;EAEA;;UAGe,2BAEb,KAAK,yEACL,oBAAoB;EACtB,OAAO;;EAEP;EACA;EACA,iBAAiB;;EAEjB;;EAEA,yBAAyB;;EAEzB;;EAEA,YAAY;;EAEZ;;EAEA;EACA;EACA;;;iBA8Fc,gBACd,WACA,OACA,OACA,OAAO,WACP,cACA,eACA,QACA,aACA,WACA,UACA,YACA,QACA,MACA,QACA,eACA,+BACc,8BACK,mBAChB,SACF,qCAAkB,IAAA"}