@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/exposure-slider/exposure-slider.js

@@ -0,0 +1,227 @@
+"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, useRef, useState } from "react";
+//#region src/components/exposure-slider/exposure-slider.tsx
+/** Pixels per notch: a 3px mark plus a 10px gap, as in the source. */
+const NOTCH = 13;
+const exposureSliderVariants = cva("flex w-full max-w-md flex-col items-center gap-6 text-foreground", {
+	variants: { 
+	/** The colour of the centre notch, the ring and a non-neutral value. */
+accent: {
+		primary: "[--exposure-accent:var(--color-primary)]",
+		warning: "[--exposure-accent:var(--color-warning)]",
+		destructive: "[--exposure-accent:var(--color-destructive)]",
+		success: "[--exposure-accent:var(--color-success)]",
+		info: "[--exposure-accent:var(--color-info)]",
+		foreground: "[--exposure-accent:var(--color-foreground)]"
+	} },
+	defaultVariants: { accent: "warning" }
+});
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+/** Opacity and clip for a notch, from its distance to the centre in notches. */
+function notchStyle(distance) {
+	return {
+		opacity: distance <= 1 ? 1 - distance * .4 : distance <= 3 ? .6 - (distance - 1) * .15 : .3,
+		clip: distance <= 1 ? distance * 30 : distance <= 2 ? 30 + (distance - 1) * 20 : 50
+	};
+}
+/** An exposure-style dial: a draggable ruler of notches with a value ring. */
+function ExposureSlider({ className, style, accent, value: valueProp, defaultValue = 0, onValueChange, onValueCommit, min = -20, max = 20, step = 1, largeStep = 10, showIndicator = true, formatValue = String, disabled = false, name, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-valuetext": ariaValueText, ...props }) {
+	const dir = Direction.useDirection(dirProp);
+	const count = Math.max(1, Math.floor((max - min) / step) + 1);
+	const toIndex = (v) => clamp(Math.round((v - min) / step), 0, count - 1);
+	const toValue = (index) => Number((min + index * step).toFixed(10));
+	const [uncontrolled, setUncontrolled] = useState(() => toValue(toIndex(defaultValue)));
+	const controlled = valueProp !== void 0;
+	const value = controlled ? toValue(toIndex(valueProp)) : uncontrolled;
+	const index = toIndex(value);
+	const [dragPosition, setDragPosition] = useState(null);
+	const drag = useRef(null);
+	const position = dragPosition ?? index;
+	const dragging = dragPosition !== null;
+	const forward = dir === "rtl" ? -1 : 1;
+	useMissingNameWarning(ariaLabel, ariaLabelledBy);
+	function setValue(next) {
+		if (next === value) return;
+		if (!controlled) setUncontrolled(next);
+		onValueChange?.(next);
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		const moves = {
+			ArrowRight: forward,
+			ArrowLeft: -forward,
+			ArrowUp: 1,
+			ArrowDown: -1,
+			PageUp: largeStep,
+			PageDown: -largeStep
+		};
+		let target;
+		if (event.key === "Home") target = 0;
+		else if (event.key === "End") target = count - 1;
+		else if (event.key in moves) target = clamp(index + (moves[event.key] ?? 0), 0, count - 1);
+		else return;
+		event.preventDefault();
+		const next = toValue(target);
+		setValue(next);
+		onValueCommit?.(next);
+	}
+	function handlePointerDown(event) {
+		if (disabled || event.button !== 0) return;
+		event.currentTarget.setPointerCapture(event.pointerId);
+		drag.current = {
+			startX: event.clientX,
+			startPosition: index,
+			value
+		};
+		setDragPosition(index);
+	}
+	function handlePointerMove(event) {
+		const current = drag.current;
+		if (!current) return;
+		const moved = -(event.clientX - current.startX) * forward / NOTCH;
+		const next = clamp(current.startPosition + moved, 0, count - 1);
+		setDragPosition(next);
+		const nextValue = toValue(Math.round(next));
+		if (nextValue !== current.value) {
+			current.value = nextValue;
+			setValue(nextValue);
+		}
+	}
+	function handlePointerEnd() {
+		const current = drag.current;
+		if (!current) return;
+		drag.current = null;
+		setDragPosition(null);
+		onValueCommit?.(current.value);
+	}
+	const offset = -position * NOTCH * forward;
+	const normalized = max === min ? 0 : (value - min) / (max - min) * 2 - 1;
+	const neutral = Math.abs(normalized) < .005;
+	const text = formatValue(value);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "exposure-slider",
+		"data-disabled": disabled ? "" : void 0,
+		dir: dirProp,
+		className: cn(exposureSliderVariants({ accent }), disabled && "opacity-55", className),
+		style,
+		...props,
+		children: [
+			showIndicator ? /* @__PURE__ */ jsxs("div", {
+				"data-slot": "exposure-slider-indicator",
+				"aria-hidden": "true",
+				className: "relative grid size-[4.75rem] place-items-center",
+				children: [/* @__PURE__ */ jsxs("svg", {
+					viewBox: "0 0 100 100",
+					className: "absolute inset-0 size-full overflow-visible",
+					children: [/* @__PURE__ */ jsx("circle", {
+						cx: "50",
+						cy: "50",
+						r: "48",
+						fill: "currentColor",
+						fillOpacity: .067,
+						stroke: "currentColor",
+						strokeOpacity: .3,
+						strokeWidth: "3"
+					}), [1, -1].map((sign) => {
+						const amount = Math.max(0, normalized * sign);
+						return /* @__PURE__ */ jsx("circle", {
+							"data-slot": "exposure-slider-arc",
+							"data-sign": sign > 0 ? "positive" : "negative",
+							cx: "50",
+							cy: "50",
+							r: "48",
+							fill: "none",
+							pathLength: 1,
+							stroke: "var(--exposure-accent)",
+							strokeWidth: "3",
+							strokeDasharray: `${String(amount)} ${String(1 - amount)}`,
+							className: cn("transition-[stroke-dasharray] ease-[var(--ease-out-quint)]", dragging ? "duration-[var(--duration-instant)]" : "duration-[var(--duration-normal)]"),
+							style: {
+								transform: sign > 0 ? "rotate(-90deg)" : "scaleX(-1) rotate(-90deg)",
+								transformBox: "fill-box",
+								transformOrigin: "50% 50%"
+							}
+						}, sign);
+					})]
+				}), /* @__PURE__ */ jsx("span", {
+					"data-slot": "exposure-slider-value",
+					className: cn("relative text-lg font-semibold tabular-nums transition-colors duration-[var(--duration-fast)]", !neutral && "text-[var(--exposure-accent)]"),
+					children: text
+				})]
+			}) : null,
+			/* @__PURE__ */ jsx("div", {
+				role: "slider",
+				tabIndex: disabled ? -1 : 0,
+				"data-slot": "exposure-slider-ruler",
+				"data-dragging": dragging ? "" : void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-valuemin": min,
+				"aria-valuemax": toValue(count - 1),
+				"aria-valuenow": value,
+				"aria-valuetext": ariaValueText ?? text,
+				"aria-orientation": "horizontal",
+				"aria-disabled": disabled || void 0,
+				className: cn("relative h-10 w-full touch-pan-y overflow-hidden rounded-md select-none", disabled ? "cursor-not-allowed" : "cursor-grab data-[dragging]:cursor-grabbing", focusRing),
+				style: { maskImage: "linear-gradient(to right, transparent, currentColor 20%, currentColor 80%, transparent)" },
+				onKeyDown: handleKeyDown,
+				onPointerDown: handlePointerDown,
+				onPointerMove: handlePointerMove,
+				onPointerUp: handlePointerEnd,
+				onPointerCancel: handlePointerEnd,
+				onLostPointerCapture: handlePointerEnd,
+				children: /* @__PURE__ */ jsx("div", {
+					"data-slot": "exposure-slider-track",
+					"aria-hidden": "true",
+					className: cn("flex h-full items-center", !dragging && "transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]"),
+					style: {
+						paddingInline: `calc(50% - ${String(NOTCH / 2)}px)`,
+						transform: `translateX(${String(offset)}px)`
+					},
+					children: Array.from({ length: count }, (_, notch) => {
+						const distance = Math.abs(notch - position);
+						const { opacity, clip } = notchStyle(distance);
+						const centre = distance < .5;
+						return /* @__PURE__ */ jsx("span", {
+							"data-slot": "exposure-slider-notch",
+							"data-centre": centre ? "" : void 0,
+							className: "flex h-full shrink-0 justify-center",
+							style: { width: NOTCH },
+							children: /* @__PURE__ */ jsx("span", {
+								className: cn("h-full w-[3px] rounded-sm", centre ? "bg-[var(--exposure-accent)]" : "bg-current", !dragging && "transition-[opacity,clip-path] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]"),
+								style: {
+									opacity,
+									clipPath: `inset(${String(clip)}% 0 0)`
+								}
+							})
+						}, notch);
+					})
+				})
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value,
+				disabled
+			}) : null
+		]
+	});
+}
+/** Warns, in development only, when the slider would render without a name. */
+function useMissingNameWarning(ariaLabel, ariaLabelledBy) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (ariaLabel || ariaLabelledBy) return;
+		console.warn("[ExposureSlider] The slider has no accessible name. Pass aria-label or aria-labelledby.");
+	}, [ariaLabel, ariaLabelledBy]);
+}
+//#endregion
+export { ExposureSlider, exposureSliderVariants };
+
+//# sourceMappingURL=exposure-slider.js.map

package/dist/components/exposure-slider/exposure-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"exposure-slider.js","names":[],"sources":["../../../src/components/exposure-slider/exposure-slider.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Exposure Slider (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  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type KeyboardEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * An iOS-camera exposure dial: a ruler of notches slides under a fixed centre\n * mark, and a ring above it fills clockwise for positive values and\n * anticlockwise for negative ones.\n *\n * It is a real slider. The ruler is the `role=\"slider\"` element — focusable,\n * named, with aria-valuenow/-valuetext — and every drag has a keyboard\n * equivalent (arrows, Page Up/Down, Home/End). Dragging is relative, as on the\n * camera: the ruler moves with the finger rather than jumping to it.\n *\n * The source smoothed the drag with a `motion` spring. Nothing here carries\n * gesture velocity — release snaps to the nearest notch — so the settle is a\n * CSS transition on `transform`, switched off while the pointer is down so the\n * ruler tracks the finger exactly. The global reduced-motion rule stops it.\n */\n\n/** Pixels per notch: a 3px mark plus a 10px gap, as in the source. */\nconst NOTCH = 13;\n\nconst exposureSliderVariants = cva(\n  \"flex w-full max-w-md flex-col items-center gap-6 text-foreground\",\n  {\n    variants: {\n      /** The colour of the centre notch, the ring and a non-neutral value. */\n      accent: {\n        primary: \"[--exposure-accent:var(--color-primary)]\",\n        warning: \"[--exposure-accent:var(--color-warning)]\",\n        destructive: \"[--exposure-accent:var(--color-destructive)]\",\n        success: \"[--exposure-accent:var(--color-success)]\",\n        info: \"[--exposure-accent:var(--color-info)]\",\n        foreground: \"[--exposure-accent:var(--color-foreground)]\",\n      },\n    },\n    defaultVariants: {\n      accent: \"warning\",\n    },\n  },\n);\n\nexport interface ExposureSliderProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof exposureSliderVariants> {\n  /** Controlled value. */\n  value?: number;\n  /** Initial value when uncontrolled. */\n  defaultValue?: number;\n  /** Called on every change — each notch crossed while dragging, each key press. */\n  onValueChange?: (value: number) => void;\n  /** Called when an interaction ends: pointer released, or a key press. */\n  onValueCommit?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Steps moved by Page Up / Page Down. */\n  largeStep?: number;\n  /** Show the ring with the current value above the ruler. */\n  showIndicator?: boolean;\n  /** Formats the value for the ring and for `aria-valuetext`, e.g. `v => \\`${v} EV\\``. */\n  formatValue?: (value: number) => string;\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\n/** Opacity and clip for a notch, from its distance to the centre in notches. */\nfunction notchStyle(distance: number): { opacity: number; clip: number } {\n  const opacity =\n    distance <= 1 ? 1 - distance * 0.4 : distance <= 3 ? 0.6 - (distance - 1) * 0.15 : 0.3;\n  const clip = distance <= 1 ? distance * 30 : distance <= 2 ? 30 + (distance - 1) * 20 : 50;\n  return { opacity, clip };\n}\n\n/** An exposure-style dial: a draggable ruler of notches with a value ring. */\nexport function ExposureSlider({\n  className,\n  style,\n  accent,\n  value: valueProp,\n  defaultValue = 0,\n  onValueChange,\n  onValueCommit,\n  min = -20,\n  max = 20,\n  step = 1,\n  largeStep = 10,\n  showIndicator = true,\n  formatValue = String,\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}: ExposureSliderProps) {\n  const dir = Direction.useDirection(dirProp as \"ltr\" | \"rtl\" | undefined);\n  const count = Math.max(1, Math.floor((max - min) / step) + 1);\n  const toIndex = (v: number) => clamp(Math.round((v - min) / step), 0, count - 1);\n  const toValue = (index: number) => Number((min + index * step).toFixed(10));\n\n  const [uncontrolled, setUncontrolled] = useState(() => toValue(toIndex(defaultValue)));\n  const controlled = valueProp !== undefined;\n  const value = controlled ? toValue(toIndex(valueProp)) : uncontrolled;\n  const index = toIndex(value);\n\n  // The fractional notch under the centre mark while a drag is in progress.\n  const [dragPosition, setDragPosition] = useState<number | null>(null);\n  const drag = useRef<{ startX: number; startPosition: number; value: number } | null>(null);\n  const position = dragPosition ?? index;\n  const dragging = dragPosition !== null;\n  const forward = dir === \"rtl\" ? -1 : 1;\n\n  useMissingNameWarning(ariaLabel, ariaLabelledBy);\n\n  function setValue(next: number) {\n    if (next === value) return;\n    if (!controlled) setUncontrolled(next);\n    onValueChange?.(next);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLDivElement>) {\n    if (disabled) return;\n    const moves: Record<string, number> = {\n      ArrowRight: forward,\n      ArrowLeft: -forward,\n      ArrowUp: 1,\n      ArrowDown: -1,\n      PageUp: largeStep,\n      PageDown: -largeStep,\n    };\n    let target: number;\n    if (event.key === \"Home\") target = 0;\n    else if (event.key === \"End\") target = count - 1;\n    else if (event.key in moves) target = clamp(index + (moves[event.key] ?? 0), 0, count - 1);\n    else return;\n    event.preventDefault();\n    const next = toValue(target);\n    setValue(next);\n    onValueCommit?.(next);\n  }\n\n  function handlePointerDown(event: PointerEvent<HTMLDivElement>) {\n    if (disabled || event.button !== 0) return;\n    event.currentTarget.setPointerCapture(event.pointerId);\n    drag.current = { startX: event.clientX, startPosition: index, value };\n    setDragPosition(index);\n  }\n\n  function handlePointerMove(event: PointerEvent<HTMLDivElement>) {\n    const current = drag.current;\n    if (!current) return;\n    // Dragging the ruler towards the start brings higher notches to the centre.\n    const moved = (-(event.clientX - current.startX) * forward) / NOTCH;\n    const next = clamp(current.startPosition + moved, 0, count - 1);\n    setDragPosition(next);\n    const nextValue = toValue(Math.round(next));\n    if (nextValue !== current.value) {\n      current.value = nextValue;\n      setValue(nextValue);\n    }\n  }\n\n  function handlePointerEnd() {\n    const current = drag.current;\n    if (!current) return;\n    drag.current = null;\n    setDragPosition(null);\n    onValueCommit?.(current.value);\n  }\n\n  const offset = -position * NOTCH * forward;\n  const normalized = max === min ? 0 : ((value - min) / (max - min)) * 2 - 1;\n  const neutral = Math.abs(normalized) < 0.005;\n  const text = formatValue(value);\n\n  return (\n    <div\n      data-slot=\"exposure-slider\"\n      data-disabled={disabled ? \"\" : undefined}\n      dir={dirProp}\n      className={cn(exposureSliderVariants({ accent }), disabled && \"opacity-55\", className)}\n      style={style}\n      {...props}\n    >\n      {showIndicator ? (\n        <div\n          data-slot=\"exposure-slider-indicator\"\n          aria-hidden=\"true\"\n          className=\"relative grid size-[4.75rem] place-items-center\"\n        >\n          <svg viewBox=\"0 0 100 100\" className=\"absolute inset-0 size-full overflow-visible\">\n            <circle\n              cx=\"50\"\n              cy=\"50\"\n              r=\"48\"\n              fill=\"currentColor\"\n              fillOpacity={0.067}\n              stroke=\"currentColor\"\n              strokeOpacity={0.3}\n              strokeWidth=\"3\"\n            />\n            {/* Positive values fill clockwise, negative ones mirror it. */}\n            {[1, -1].map((sign) => {\n              const amount = Math.max(0, normalized * sign);\n              return (\n                <circle\n                  key={sign}\n                  data-slot=\"exposure-slider-arc\"\n                  data-sign={sign > 0 ? \"positive\" : \"negative\"}\n                  cx=\"50\"\n                  cy=\"50\"\n                  r=\"48\"\n                  fill=\"none\"\n                  pathLength={1}\n                  stroke=\"var(--exposure-accent)\"\n                  strokeWidth=\"3\"\n                  strokeDasharray={`${String(amount)} ${String(1 - amount)}`}\n                  className={cn(\n                    \"transition-[stroke-dasharray] ease-[var(--ease-out-quint)]\",\n                    dragging\n                      ? \"duration-[var(--duration-instant)]\"\n                      : \"duration-[var(--duration-normal)]\",\n                  )}\n                  style={{\n                    transform: sign > 0 ? \"rotate(-90deg)\" : \"scaleX(-1) rotate(-90deg)\",\n                    transformBox: \"fill-box\",\n                    transformOrigin: \"50% 50%\",\n                  }}\n                />\n              );\n            })}\n          </svg>\n          <span\n            data-slot=\"exposure-slider-value\"\n            className={cn(\n              \"relative text-lg font-semibold tabular-nums transition-colors duration-[var(--duration-fast)]\",\n              !neutral && \"text-[var(--exposure-accent)]\",\n            )}\n          >\n            {text}\n          </span>\n        </div>\n      ) : null}\n\n      <div\n        role=\"slider\"\n        tabIndex={disabled ? -1 : 0}\n        data-slot=\"exposure-slider-ruler\"\n        data-dragging={dragging ? \"\" : undefined}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-valuemin={min}\n        aria-valuemax={toValue(count - 1)}\n        aria-valuenow={value}\n        aria-valuetext={ariaValueText ?? text}\n        aria-orientation=\"horizontal\"\n        aria-disabled={disabled || undefined}\n        className={cn(\n          \"relative h-10 w-full touch-pan-y overflow-hidden rounded-md select-none\",\n          disabled ? \"cursor-not-allowed\" : \"cursor-grab data-[dragging]:cursor-grabbing\",\n          focusRing,\n        )}\n        style={{\n          maskImage:\n            \"linear-gradient(to right, transparent, currentColor 20%, currentColor 80%, transparent)\",\n        }}\n        onKeyDown={handleKeyDown}\n        onPointerDown={handlePointerDown}\n        onPointerMove={handlePointerMove}\n        onPointerUp={handlePointerEnd}\n        onPointerCancel={handlePointerEnd}\n        onLostPointerCapture={handlePointerEnd}\n      >\n        <div\n          data-slot=\"exposure-slider-track\"\n          aria-hidden=\"true\"\n          className={cn(\n            \"flex h-full items-center\",\n            !dragging &&\n              \"transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          )}\n          style={{\n            paddingInline: `calc(50% - ${String(NOTCH / 2)}px)`,\n            transform: `translateX(${String(offset)}px)`,\n          }}\n        >\n          {Array.from({ length: count }, (_, notch) => {\n            const distance = Math.abs(notch - position);\n            const { opacity, clip } = notchStyle(distance);\n            const centre = distance < 0.5;\n            return (\n              <span\n                key={notch}\n                data-slot=\"exposure-slider-notch\"\n                data-centre={centre ? \"\" : undefined}\n                className=\"flex h-full shrink-0 justify-center\"\n                style={{ width: NOTCH }}\n              >\n                <span\n                  className={cn(\n                    \"h-full w-[3px] rounded-sm\",\n                    centre ? \"bg-[var(--exposure-accent)]\" : \"bg-current\",\n                    !dragging &&\n                      \"transition-[opacity,clip-path] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n                  )}\n                  style={{ opacity, clipPath: `inset(${String(clip)}% 0 0)` }}\n                />\n              </span>\n            );\n          })}\n        </div>\n      </div>\n      {name ? <input type=\"hidden\" name={name} value={value} disabled={disabled} /> : null}\n    </div>\n  );\n}\n\n/** Warns, in development only, when the slider would render without a name. */\nfunction useMissingNameWarning(ariaLabel?: string, ariaLabelledBy?: string) {\n  useEffect(() => {\n    if (process.env.NODE_ENV === \"production\") return;\n    if (ariaLabel || ariaLabelledBy) return;\n    console.warn(\n      \"[ExposureSlider] The slider has no accessible name. Pass aria-label or aria-labelledby.\",\n    );\n  }, [ariaLabel, ariaLabelledBy]);\n}\n\nexport { exposureSliderVariants };\n"],"mappings":"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"}

package/dist/components/exposure-slider/index.d.ts

@@ -0,0 +1,2 @@
+import { ExposureSlider, ExposureSliderProps, exposureSliderVariants } from "./exposure-slider.js";
+export { ExposureSlider, type ExposureSliderProps, exposureSliderVariants };

package/dist/components/exposure-slider/index.js

@@ -0,0 +1,2 @@
+import { ExposureSlider, exposureSliderVariants } from "./exposure-slider.js";
+export { ExposureSlider, exposureSliderVariants };

package/dist/components/exposure-slider/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/exposure-slider/meta.ts
+const meta = defineMeta({
+	name: "exposure-slider",
+	title: "Exposure Slider",
+	description: "A camera-style exposure dial: a draggable ruler of notches under a fixed centre mark, with a value ring.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["exposure-slider.tsx"],
+	a11y: "The ruler is a focusable role=\"slider\" with aria-valuenow, -valuemin, -valuemax and an aria-valuetext taken from formatValue. Arrow keys move one step (Left/Right follow the reading direction), Page Up/Down move largeStep, Home/End jump to the ends — so the drag is never the only way to set it. aria-label and aria-labelledby passed to the component land on the slider, and a development warning fires when it has no name. The ring and notches are aria-hidden: the slider already reports the value. The settle animation is a CSS transition and stops under reduced motion."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/exposure-slider/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/exposure-slider/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"exposure-slider\",\n  title: \"Exposure Slider\",\n  description:\n    \"A camera-style exposure dial: a draggable ruler of notches under a fixed centre mark, with a value ring.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"exposure-slider.tsx\"],\n  a11y:\n    'The ruler is a focusable role=\"slider\" with aria-valuenow, -valuemin, -valuemax and an aria-valuetext taken ' +\n    \"from formatValue. Arrow keys move one step (Left/Right follow the reading direction), Page Up/Down move \" +\n    \"largeStep, Home/End jump to the ends — so the drag is never the only way to set it. aria-label and \" +\n    \"aria-labelledby passed to the component land on the slider, and a development warning fires when it has no \" +\n    \"name. The ring and notches are aria-hidden: the slider already reports the value. The settle animation is a \" +\n    \"CSS transition and stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,UAAU;CACrD,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAMJ,CAAC"}

package/dist/components/file-upload/file-upload.d.ts

@@ -10,16 +10,27 @@ interface FileUploadProps extends Omit<ComponentPropsWithRef<"div">, "onDrop"> {
   disabled?: boolean;
   /** Shown under the prompt: accepted types, size limit. */
   hint?: ReactNode;
+  /**
+   * A decorative icon above the prompt, hidden from assistive technology. It
+   * lifts while a drag is over the dropzone.
+   */
+  icon?: ReactNode;
   children?: ReactNode;
 }
-declare function FileUpload({ className, label, onFiles, accept, multiple, disabled, hint, children, ...props }: FileUploadProps): import("react").JSX.Element;
+declare function FileUpload({ className, label, onFiles, accept, multiple, disabled, hint, icon, children, ...props }: FileUploadProps): import("react").JSX.Element;
 interface FileUploadListProps extends ComponentPropsWithRef<"ul"> {
   files: QueuedFile[];
+  /**
+   * Lets a removed file slide out before it leaves the DOM. The departing row
+   * is `aria-hidden`, inert and has no buttons. Off by default, because the old
+   * row briefly remains in the markup.
+   */
+  animateExit?: boolean;
   onCancel?: (id: string) => void;
   onRetry?: (id: string) => void;
   onRemove?: (id: string) => void;
 }
-declare function FileUploadList({ className, files, onCancel, onRetry, onRemove, ...props }: FileUploadListProps): import("react").JSX.Element | null;
+declare function FileUploadList({ className, files, onCancel, onRetry, onRemove, animateExit, ...props }: FileUploadListProps): import("react").JSX.Element | null;
 interface FileUploadItemProps extends Omit<ComponentPropsWithRef<"li">, "children"> {
   entry: QueuedFile;
   onCancel?: (id: string) => void;

package/dist/components/file-upload/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"mappings":";;;UAqCiB,wBAAwB,KAAK;;EAE5C;EACA,UAAU,OAAO;EACjB;EACA;EACA;;EAEA,OAAO;EACP,WAAW;;iBAGG,aACd,WACA,OACA,SACA,QACA,UACA,UACA,MACA,aACG,SACF,kCAAe,IAAA;UAsFD,4BAA4B;EAC3C,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;UAsBL,4BAA4B,KAAK;EAChD,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;;;;;;;iBA+FN,mBACd,WACA,UACG,SACF;EACD;IAAS;IAAe;IAAgB;IAAc;;oBACvD,IAAA"}
+{"version":3,"file":"file-upload.d.ts","names":[],"sources":["../../../src/components/file-upload/file-upload.tsx"],"mappings":";;;UA2DiB,wBAAwB,KAAK;;EAE5C;EACA,UAAU,OAAO;EACjB;EACA;EACA;;EAEA,OAAO;;;;;EAKP,OAAO;EACP,WAAW;;iBAGG,aACd,WACA,OACA,SACA,QACA,UACA,UACA,MACA,MACA,aACG,SACF,kCAAe,IAAA;UAoGD,4BAA4B;EAC3C,OAAO;;;;;;EAMP;EACA,YAAY;EACZ,WAAW;EACX,YAAY;;iBAQE,iBACd,WACA,OACA,UACA,SACA,UACA,gBACG,SACF,sCAAmB,IAAA;UAuFL,4BAA4B,KAAK;EAChD,OAAO;EACP,YAAY;EACZ,WAAW;EACX,YAAY;;iBAGE,iBACd,WACA,OACA,UACA,SACA,aACG,SACF,sCAAmB,IAAA;;;;;;;iBAkGN,mBACd,WACA,UACG,SACF;EACD;IAAS;IAAe;IAAgB;IAAc;;oBACvD,IAAA"}

package/dist/components/file-upload/file-upload.js

@@ -3,7 +3,7 @@ import { disabledStyles, focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { formatBytes } from "./upload-queue.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useId, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 //#region src/components/file-upload/file-upload.tsx
 /**
 * The visible half of uploading. The queue is in `upload-queue.ts` and is the
@@ -17,6 +17,15 @@ import { useId, useRef, useState } from "react";
 * Space, and needs nothing added. Drag and drop is layered on top as a pointer
 * convenience, and every drop can also be done from the input.
 */
+const ITEM_KEYFRAMES = `
+@keyframes dowel-file-upload-in{from{opacity:0;transform:translateX(var(--dowel-file-upload-x)) scale(0.95)}}
+@keyframes dowel-file-upload-out{to{opacity:0;transform:translateX(calc(-1.5 * var(--dowel-file-upload-x))) scale(0.95)}}
+[data-slot="file-upload-item"]{--dowel-file-upload-x:-1rem;animation:dowel-file-upload-in var(--duration-normal) var(--ease-out-quint)}
+[data-slot="file-upload-item"]:dir(rtl){--dowel-file-upload-x:1rem}
+[data-slot="file-upload-item"][data-state="closed"]{animation:dowel-file-upload-out var(--duration-fast) var(--ease-in-quint) forwards}
+`;
+/** Clears departing rows whose animation never runs (hidden, unstyled). */
+const EXIT_FALLBACK_MS = 1e3;
 const STATUS_LABEL = {
 	queued: "Waiting",
 	uploading: "Uploading",
@@ -24,7 +33,7 @@ const STATUS_LABEL = {
 	failed: "Failed",
 	cancelled: "Cancelled"
 };
-function FileUpload({ className, label, onFiles, accept, multiple = true, disabled = false, hint, children, ...props }) {
+function FileUpload({ className, label, onFiles, accept, multiple = true, disabled = false, hint, icon, children, ...props }) {
 	const inputId = useId();
 	const hintId = useId();
 	const [dragging, setDragging] = useState(false);
@@ -57,53 +66,107 @@ function FileUpload({ className, label, onFiles, accept, multiple = true, disabl
 				event.preventDefault();
 			},
 			onDrop: handleDrop,
-			className: cn("rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center", "transition-colors duration-[var(--duration-fast)]", dragging && "border-primary bg-primary/5", disabled && "pointer-events-none opacity-55"),
-			children: [/* @__PURE__ */ jsxs("label", {
-				htmlFor: inputId,
-				className: cn("inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm", "focus-within:ring-2 focus-within:ring-ring/55"),
-				children: [
-					/* @__PURE__ */ jsx("span", {
-						className: "font-medium",
-						children: label
-					}),
-					/* @__PURE__ */ jsxs("span", {
-						className: "text-xs text-muted-foreground",
-						children: [
-							"Drop ",
-							multiple ? "files" : "a file",
-							" here, or choose from your device"
-						]
-					}),
-					/* @__PURE__ */ jsx("input", {
-						id: inputId,
-						type: "file",
-						accept,
-						multiple,
-						disabled,
-						"aria-describedby": hint ? hintId : void 0,
-						onChange: (event) => {
-							const chosen = [...event.target.files ?? []];
-							if (chosen.length > 0) onFiles(chosen);
-							event.target.value = "";
-						},
-						className: "sr-only"
-					})
-				]
-			}), hint ? /* @__PURE__ */ jsx("p", {
-				id: hintId,
-				className: "mt-2 text-xs text-muted-foreground",
-				children: hint
-			}) : null]
+			className: cn("rounded-lg border border-dashed border-border-strong bg-muted/30 px-4 py-6 text-center", "transition-[color,background-color,border-color,scale] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", dragging && "scale-[1.02] border-primary bg-primary/5", disabled && "pointer-events-none opacity-55"),
+			children: [
+				icon ? /* @__PURE__ */ jsx("div", {
+					"aria-hidden": "true",
+					"data-slot": "file-upload-icon",
+					className: cn("mx-auto mb-2 flex w-fit text-muted-foreground [&_svg:not([class*='size-'])]:size-8", "transition-[color,translate,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)]", dragging && "-translate-y-1 scale-115 text-foreground"),
+					children: icon
+				}) : null,
+				/* @__PURE__ */ jsxs("label", {
+					htmlFor: inputId,
+					className: cn("inline-flex cursor-pointer flex-col items-center gap-1 rounded-md px-2 py-1 text-sm", "focus-within:ring-2 focus-within:ring-ring/55"),
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: "font-medium",
+							children: label
+						}),
+						/* @__PURE__ */ jsxs("span", {
+							className: "text-xs text-muted-foreground",
+							children: [
+								"Drop ",
+								multiple ? "files" : "a file",
+								" here, or choose from your device"
+							]
+						}),
+						/* @__PURE__ */ jsx("input", {
+							id: inputId,
+							type: "file",
+							accept,
+							multiple,
+							disabled,
+							"aria-describedby": hint ? hintId : void 0,
+							onChange: (event) => {
+								const chosen = [...event.target.files ?? []];
+								if (chosen.length > 0) onFiles(chosen);
+								event.target.value = "";
+							},
+							className: "sr-only"
+						})
+					]
+				}),
+				hint ? /* @__PURE__ */ jsx("p", {
+					id: hintId,
+					className: "mt-2 text-xs text-muted-foreground",
+					children: hint
+				}) : null
+			]
 		}), children]
 	});
 }
-function FileUploadList({ className, files, onCancel, onRetry, onRemove, ...props }) {
-	if (files.length === 0) return null;
+function FileUploadList({ className, files, onCancel, onRetry, onRemove, animateExit = false, ...props }) {
+	const [previous, setPrevious] = useState(files);
+	const [leaving, setLeaving] = useState([]);
+	if (previous !== files) {
+		setPrevious(files);
+		const present = new Set(files.map((entry) => entry.id));
+		const gone = animateExit ? previous.flatMap((entry, index) => present.has(entry.id) ? [] : [{
+			entry,
+			index
+		}]) : [];
+		setLeaving((current) => [...current.filter((item) => !present.has(item.entry.id) && !gone.some((g) => g.entry.id === item.entry.id)), ...gone]);
+	}
+	useEffect(() => {
+		if (leaving.length === 0) return;
+		const timer = setTimeout(() => {
+			setLeaving([]);
+		}, EXIT_FALLBACK_MS);
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [leaving]);
+	const listenForExitEnd = useCallback((id) => (element) => {
+		if (!element) return;
+		const onEnd = (event) => {
+			if (event.target !== element) return;
+			setLeaving((current) => current.filter((item) => item.entry.id !== id));
+		};
+		element.addEventListener("animationend", onEnd);
+		return () => {
+			element.removeEventListener("animationend", onEnd);
+		};
+	}, []);
+	const rows = files.map((entry) => ({
+		entry,
+		gone: false
+	}));
+	for (const item of [...leaving].sort((a, b) => a.index - b.index)) rows.splice(Math.min(item.index, rows.length), 0, {
+		entry: item.entry,
+		gone: true
+	});
+	if (rows.length === 0) return null;
 	return /* @__PURE__ */ jsx("ul", {
 		"data-slot": "file-upload-list",
 		className: cn("flex list-none flex-col gap-2", className),
 		...props,
-		children: files.map((entry) => /* @__PURE__ */ jsx(FileUploadItem, {
+		children: rows.map(({ entry, gone }) => gone ? /* @__PURE__ */ jsx(FileUploadItem, {
+			ref: listenForExitEnd(entry.id),
+			entry,
+			"data-state": "closed",
+			"aria-hidden": "true",
+			inert: true
+		}, `gone:${entry.id}`) : /* @__PURE__ */ jsx(FileUploadItem, {
 			entry,
 			onCancel,
 			onRetry,
@@ -119,59 +182,67 @@ function FileUploadItem({ className, entry, onCancel, onRetry, onRemove, ...prop
 		"data-status": status,
 		className: cn("flex items-center gap-3 rounded-lg border px-3 py-2 text-sm", status === "failed" ? "border-destructive/40 bg-destructive/5" : "border-border bg-card", className),
 		...props,
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: "flex min-w-0 flex-1 flex-col gap-1",
-			children: [
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-baseline justify-between gap-2",
-					children: [/* @__PURE__ */ jsx("span", {
-						className: "truncate font-medium",
-						children: file.name
-					}), /* @__PURE__ */ jsx("span", {
-						className: "shrink-0 text-xs text-muted-foreground tabular-nums",
-						children: formatBytes(file.size)
-					})]
-				}),
-				/* @__PURE__ */ jsxs("p", {
-					className: cn("text-xs", status === "failed" ? "text-destructive" : "text-muted-foreground"),
-					children: [
-						STATUS_LABEL[status],
-						status === "uploading" && percent !== null ? ` · ${String(percent)}%` : null,
-						error ? ` · ${error}` : null
-					]
-				}),
-				status === "uploading" ? /* @__PURE__ */ jsx("div", {
-					role: "progressbar",
-					"aria-label": `Uploading ${file.name}`,
-					"aria-valuenow": percent ?? void 0,
-					"aria-valuemin": 0,
-					"aria-valuemax": 100,
-					className: "h-1 w-full overflow-hidden rounded-full bg-muted",
-					children: /* @__PURE__ */ jsx("div", {
-						"data-slot": "file-upload-progress",
-						className: "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
-						style: { width: `${String(percent ?? 0)}%` }
-					})
-				}) : null
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "flex shrink-0 items-center gap-1",
-			children: [
-				status === "uploading" && onCancel ? /* @__PURE__ */ jsx(ItemButton, {
-					onClick: () => onCancel(id),
-					children: "Cancel"
-				}) : null,
-				(status === "failed" || status === "cancelled") && onRetry ? /* @__PURE__ */ jsx(ItemButton, {
-					onClick: () => onRetry(id),
-					children: "Retry"
-				}) : null,
-				onRemove ? /* @__PURE__ */ jsx(ItemButton, {
-					onClick: () => onRemove(id),
-					"aria-label": `Remove ${file.name}`,
-					children: "Remove"
-				}) : null
-			]
-		})]
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: "dowel-file-upload",
+				precedence: "dowel",
+				children: ITEM_KEYFRAMES
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex min-w-0 flex-1 flex-col gap-1",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-baseline justify-between gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "truncate font-medium",
+							children: file.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "shrink-0 text-xs text-muted-foreground tabular-nums",
+							children: formatBytes(file.size)
+						})]
+					}),
+					/* @__PURE__ */ jsxs("p", {
+						className: cn("text-xs", status === "failed" ? "text-destructive" : "text-muted-foreground"),
+						children: [
+							STATUS_LABEL[status],
+							status === "uploading" && percent !== null ? ` · ${String(percent)}%` : null,
+							error ? ` · ${error}` : null
+						]
+					}),
+					status === "uploading" ? /* @__PURE__ */ jsx("div", {
+						role: "progressbar",
+						"aria-label": `Uploading ${file.name}`,
+						"aria-valuenow": percent ?? void 0,
+						"aria-valuemin": 0,
+						"aria-valuemax": 100,
+						className: "h-1 w-full overflow-hidden rounded-full bg-muted",
+						children: /* @__PURE__ */ jsx("div", {
+							"data-slot": "file-upload-progress",
+							className: "h-full rounded-full bg-primary transition-[width] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]",
+							style: { width: `${String(percent ?? 0)}%` }
+						})
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex shrink-0 items-center gap-1",
+				children: [
+					status === "uploading" && onCancel ? /* @__PURE__ */ jsx(ItemButton, {
+						onClick: () => onCancel(id),
+						children: "Cancel"
+					}) : null,
+					(status === "failed" || status === "cancelled") && onRetry ? /* @__PURE__ */ jsx(ItemButton, {
+						onClick: () => onRetry(id),
+						children: "Retry"
+					}) : null,
+					onRemove ? /* @__PURE__ */ jsx(ItemButton, {
+						onClick: () => onRemove(id),
+						"aria-label": `Remove ${file.name}`,
+						children: "Remove"
+					}) : null
+				]
+			})
+		]
 	});
 }
 function ItemButton({ className, ...props }) {