@dowel-ui/react 0.7.0 → 0.8.0

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

@@ -0,0 +1,2 @@
+import { ExpandableList, expandableListVariants } from "./expandable-list.js";
+export { ExpandableList, expandableListVariants };

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

@@ -0,0 +1,21 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/expandable-list/meta.ts
+const meta = defineMeta({
+	name: "expandable-list",
+	title: "Expandable List",
+	description: "A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.",
+	category: "display",
+	status: "beta",
+	dependencies: [
+		"class-variance-authority",
+		"motion",
+		"radix-ui"
+	],
+	registryDependencies: [],
+	files: ["expandable-list.tsx"],
+	a11y: "Each row is a button with aria-haspopup=\"dialog\" and aria-expanded. The detail is a Radix modal dialog: focus moves in and is trapped, the page behind is inert, it is named by the item's title and described by its content, and Escape, the backdrop or the named Close button dismiss it — after which focus returns to the row that opened it. Row media is aria-hidden. The grow-from-row animation uses motion's layoutId inside MotionConfig reducedMotion=\"user\", so under reduced motion the dialog appears in place."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/expandable-list/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"expandable-list\",\n  title: \"Expandable List\",\n  description:\n    \"A list of compact rows — jobs, releases, people — each growing into a detail dialog out of its place in the list.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"expandable-list.tsx\"],\n  a11y:\n    'Each row is a button with aria-haspopup=\"dialog\" and aria-expanded. The detail is a Radix modal dialog: ' +\n    \"focus moves in and is trapped, the page behind is inert, it is named by the item's title and described by \" +\n    \"its content, and Escape, the backdrop or the named Close button dismiss it — after which focus returns to \" +\n    \"the row that opened it. Row media is aria-hidden. The grow-from-row animation uses motion's layoutId inside \" +\n    'MotionConfig reducedMotion=\"user\", so under reduced motion the dialog appears in place.',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc;EAAC;EAA4B;EAAU;CAAU;CAC/D,sBAAsB,CAAC;CACvB,OAAO,CAAC,qBAAqB;CAC7B,MACE;AAKJ,CAAC"}

package/dist/components/expanding-search/expanding-search.d.ts

@@ -0,0 +1,30 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/expanding-search/expanding-search.d.ts
+declare const expandingSearchVariants: (props?: ({
+  stroke?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ExpandingSearchProps extends Omit<ComponentPropsWithRef<"form">, "onSubmit" | "defaultValue" | "onChange">, VariantProps<typeof expandingSearchVariants> {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Called with the text on Enter. */
+  onSearch?: (value: string) => void;
+  /** Names the trigger and the field. */
+  label?: string;
+  placeholder?: string;
+  clearLabel?: string;
+  /** The open field's inline size, any CSS length. */
+  expandedWidth?: string;
+  disabled?: boolean;
+  /** Spread onto the <input> — for combobox wiring. */
+  inputProps?: Omit<ComponentPropsWithRef<"input">, "value" | "defaultValue">;
+}
+/** A search button that expands into a field, and collapses back with Escape. */
+declare function ExpandingSearch({ className, stroke, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, onSearch, label, placeholder, clearLabel, expandedWidth, disabled, inputProps, onBlur, style, children, ...props }: ExpandingSearchProps): import("react").JSX.Element;
+//#endregion
+export { ExpandingSearch, ExpandingSearchProps, expandingSearchVariants };
+//# sourceMappingURL=expanding-search.d.ts.map

package/dist/components/expanding-search/expanding-search.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-search.d.ts","names":[],"sources":["../../../src/components/expanding-search/expanding-search.tsx"],"mappings":";;;cAmCM,0BAAuB;;6CAY5B;UASgB,6BAEb,KAAK,0EACL,oBAAoB;EACtB;EACA;EACA,iBAAiB;EACjB;EACA;EACA,gBAAgB;;EAEhB,YAAY;;EAEZ;EACA;EACA;;EAEA;EACA;;EAEA,aAAa,KAAK;;;iBAqBJ,kBACd,WACA,QACA,OAAO,WACP,cACA,eACA,MAAM,UACN,aACA,cACA,UACA,OACA,aACA,YACA,eACA,UACA,YACA,QACA,OACA,aACG,SACF,uCAAoB,IAAA"}

package/dist/components/expanding-search/expanding-search.js

@@ -0,0 +1,141 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useEffect, useId, useRef, useState } from "react";
+//#region src/components/expanding-search/expanding-search.tsx
+const expandingSearchVariants = cva("relative inline-flex h-10 items-center rounded-full bg-card text-card-foreground", {
+	variants: { 
+	/** A hairline ring. */
+stroke: {
+		true: "shadow-[inset_0_0_0_1px_var(--color-border)]",
+		false: ""
+	} },
+	defaultVariants: { stroke: true }
+});
+const iconButton = cn("grid size-10 shrink-0 place-items-center rounded-full text-muted-foreground", "transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]", "hover:text-foreground disabled:pointer-events-none disabled:opacity-55", focusRing);
+function Glyph({ d }) {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: "2",
+		strokeLinecap: "round",
+		strokeLinejoin: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: /* @__PURE__ */ jsx("path", { d })
+	});
+}
+/** A search button that expands into a field, and collapses back with Escape. */
+function ExpandingSearch({ className, stroke, value: valueProp, defaultValue = "", onValueChange, open: openProp, defaultOpen = false, onOpenChange, onSearch, label = "Search", placeholder = "Search…", clearLabel = "Clear search", expandedWidth = "14rem", disabled = false, inputProps = {}, onBlur, style, children, ...props }) {
+	const inputId = useId();
+	const [innerValue, setInnerValue] = useState(defaultValue);
+	const value = valueProp ?? innerValue;
+	const [innerOpen, setInnerOpen] = useState(defaultOpen);
+	const open = openProp ?? innerOpen;
+	const triggerRef = useRef(null);
+	const inputRef = useRef(null);
+	const focusNext = useRef(null);
+	useEffect(() => {
+		const target = focusNext.current;
+		focusNext.current = null;
+		if (target === "input") inputRef.current?.focus();
+		else if (target === "trigger") triggerRef.current?.focus();
+	});
+	function setValue(next) {
+		if (valueProp === void 0) setInnerValue(next);
+		onValueChange?.(next);
+	}
+	function setOpen(next, focus) {
+		focusNext.current = focus;
+		if (next === open) return;
+		if (openProp === void 0) setInnerOpen(next);
+		onOpenChange?.(next);
+	}
+	function handleKeyDown(event) {
+		inputProps.onKeyDown?.(event);
+		if (event.defaultPrevented || event.key !== "Escape") return;
+		event.preventDefault();
+		if (value) setValue("");
+		else setOpen(false, "trigger");
+	}
+	function handleBlur(event) {
+		onBlur?.(event);
+		if (event.currentTarget.contains(event.relatedTarget)) return;
+		if (!value) setOpen(false, null);
+	}
+	function handleSubmit(event) {
+		event.preventDefault();
+		if (open) onSearch?.(value);
+	}
+	return /* @__PURE__ */ jsxs("form", {
+		role: "search",
+		"aria-label": label,
+		"data-slot": "expanding-search",
+		"data-state": open ? "open" : "closed",
+		className: cn(expandingSearchVariants({ stroke }), className),
+		style: {
+			"--expanding-search-width": expandedWidth,
+			...style
+		},
+		onSubmit: handleSubmit,
+		onBlur: handleBlur,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("button", {
+				ref: triggerRef,
+				type: "button",
+				"aria-label": label,
+				"aria-expanded": open,
+				"aria-controls": inputId,
+				disabled,
+				"data-slot": "expanding-search-trigger",
+				className: iconButton,
+				onClick: () => {
+					setOpen(!open, open ? null : "input");
+				},
+				children: /* @__PURE__ */ jsx(Glyph, { d: "m21 21-4.34-4.34M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z" })
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				"data-slot": "expanding-search-field",
+				className: cn("flex h-full items-center overflow-hidden", "transition-[width,visibility] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", open ? "visible w-[var(--expanding-search-width)]" : "invisible w-0"),
+				children: [/* @__PURE__ */ jsx("input", {
+					ref: inputRef,
+					id: inputId,
+					type: "search",
+					"aria-label": label,
+					placeholder,
+					disabled,
+					autoComplete: "off",
+					...inputProps,
+					value,
+					"data-slot": "expanding-search-input",
+					className: cn("h-full min-w-0 flex-1 bg-transparent pe-1 text-sm outline-none placeholder:text-muted-foreground", "[&::-webkit-search-cancel-button]:appearance-none", inputProps.className),
+					onChange: (event) => {
+						inputProps.onChange?.(event);
+						setValue(event.target.value);
+					},
+					onKeyDown: handleKeyDown
+				}), value ? /* @__PURE__ */ jsx("button", {
+					type: "button",
+					"aria-label": clearLabel,
+					"data-slot": "expanding-search-clear",
+					className: cn(iconButton, "size-8 hover:bg-foreground/6"),
+					onClick: () => {
+						setValue("");
+						focusNext.current = "input";
+						inputRef.current?.focus();
+					},
+					children: /* @__PURE__ */ jsx(Glyph, { d: "M18 6 6 18M6 6l12 12" })
+				}) : null]
+			}),
+			children
+		]
+	});
+}
+//#endregion
+export { ExpandingSearch, expandingSearchVariants };
+
+//# sourceMappingURL=expanding-search.js.map

package/dist/components/expanding-search/expanding-search.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"expanding-search.js","names":[],"sources":["../../../src/components/expanding-search/expanding-search.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by bencho Search; no code referenced).\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useEffect,\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type FocusEvent,\n  type FormEvent,\n  type KeyboardEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A search button that opens into a field.\n *\n * A search landmark holding a trigger (aria-expanded, aria-controls) and a\n * field whose inline size transitions open. Opening focuses the field;\n * Escape clears it first, then collapses and returns focus to the trigger;\n * leaving an empty field collapses it quietly. A clear button appears once\n * there is text.\n *\n * Combobox-ready: `inputProps` is spread onto the <input>, so a consumer can\n * add role=\"combobox\", aria-activedescendant and its own key handling, and\n * render the listbox as `children`. Its onKeyDown runs first, and calling\n * preventDefault there (say, to close its listbox on Escape) stops this\n * component's own Escape handling.\n */\n\nconst expandingSearchVariants = cva(\n  \"relative inline-flex h-10 items-center rounded-full bg-card text-card-foreground\",\n  {\n    variants: {\n      /** A hairline ring. */\n      stroke: {\n        true: \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        false: \"\",\n      },\n    },\n    defaultVariants: { stroke: true },\n  },\n);\n\nconst iconButton = cn(\n  \"grid size-10 shrink-0 place-items-center rounded-full text-muted-foreground\",\n  \"transition-[background-color,color] duration-[var(--duration-fast)] ease-[var(--ease-out-quint)]\",\n  \"hover:text-foreground disabled:pointer-events-none disabled:opacity-55\",\n  focusRing,\n);\n\nexport interface ExpandingSearchProps\n  extends\n    Omit<ComponentPropsWithRef<\"form\">, \"onSubmit\" | \"defaultValue\" | \"onChange\">,\n    VariantProps<typeof expandingSearchVariants> {\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  /** Called with the text on Enter. */\n  onSearch?: (value: string) => void;\n  /** Names the trigger and the field. */\n  label?: string;\n  placeholder?: string;\n  clearLabel?: string;\n  /** The open field's inline size, any CSS length. */\n  expandedWidth?: string;\n  disabled?: boolean;\n  /** Spread onto the <input> — for combobox wiring. */\n  inputProps?: Omit<ComponentPropsWithRef<\"input\">, \"value\" | \"defaultValue\">;\n}\n\nfunction Glyph({ d }: { d: string }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"2\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      <path d={d} />\n    </svg>\n  );\n}\n\n/** A search button that expands into a field, and collapses back with Escape. */\nexport function ExpandingSearch({\n  className,\n  stroke,\n  value: valueProp,\n  defaultValue = \"\",\n  onValueChange,\n  open: openProp,\n  defaultOpen = false,\n  onOpenChange,\n  onSearch,\n  label = \"Search\",\n  placeholder = \"Search…\",\n  clearLabel = \"Clear search\",\n  expandedWidth = \"14rem\",\n  disabled = false,\n  inputProps = {},\n  onBlur,\n  style,\n  children,\n  ...props\n}: ExpandingSearchProps) {\n  const inputId = useId();\n  const [innerValue, setInnerValue] = useState(defaultValue);\n  const value = valueProp ?? innerValue;\n  const [innerOpen, setInnerOpen] = useState(defaultOpen);\n  const open = openProp ?? innerOpen;\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const inputRef = useRef<HTMLInputElement | null>(null);\n  const focusNext = useRef<\"input\" | \"trigger\" | null>(null);\n\n  useEffect(() => {\n    const target = focusNext.current;\n    focusNext.current = null;\n    if (target === \"input\") inputRef.current?.focus();\n    else if (target === \"trigger\") triggerRef.current?.focus();\n  });\n\n  function setValue(next: string) {\n    if (valueProp === undefined) setInnerValue(next);\n    onValueChange?.(next);\n  }\n\n  function setOpen(next: boolean, focus: \"input\" | \"trigger\" | null) {\n    focusNext.current = focus;\n    if (next === open) return;\n    if (openProp === undefined) setInnerOpen(next);\n    onOpenChange?.(next);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    inputProps.onKeyDown?.(event);\n    if (event.defaultPrevented || event.key !== \"Escape\") return;\n    event.preventDefault();\n    if (value) setValue(\"\");\n    else setOpen(false, \"trigger\");\n  }\n\n  function handleBlur(event: FocusEvent<HTMLFormElement>) {\n    onBlur?.(event);\n    if (event.currentTarget.contains(event.relatedTarget)) return;\n    if (!value) setOpen(false, null);\n  }\n\n  function handleSubmit(event: FormEvent<HTMLFormElement>) {\n    event.preventDefault();\n    if (open) onSearch?.(value);\n  }\n\n  return (\n    <form\n      role=\"search\"\n      aria-label={label}\n      data-slot=\"expanding-search\"\n      data-state={open ? \"open\" : \"closed\"}\n      className={cn(expandingSearchVariants({ stroke }), className)}\n      style={{ \"--expanding-search-width\": expandedWidth, ...style } as CSSProperties}\n      onSubmit={handleSubmit}\n      onBlur={handleBlur}\n      {...props}\n    >\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        aria-label={label}\n        aria-expanded={open}\n        aria-controls={inputId}\n        disabled={disabled}\n        data-slot=\"expanding-search-trigger\"\n        className={iconButton}\n        onClick={() => {\n          setOpen(!open, open ? null : \"input\");\n        }}\n      >\n        <Glyph d=\"m21 21-4.34-4.34M11 19a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z\" />\n      </button>\n      <div\n        data-slot=\"expanding-search-field\"\n        className={cn(\n          \"flex h-full items-center overflow-hidden\",\n          \"transition-[width,visibility] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n          open ? \"visible w-[var(--expanding-search-width)]\" : \"invisible w-0\",\n        )}\n      >\n        <input\n          ref={inputRef}\n          id={inputId}\n          type=\"search\"\n          aria-label={label}\n          placeholder={placeholder}\n          disabled={disabled}\n          autoComplete=\"off\"\n          {...inputProps}\n          value={value}\n          data-slot=\"expanding-search-input\"\n          className={cn(\n            \"h-full min-w-0 flex-1 bg-transparent pe-1 text-sm outline-none placeholder:text-muted-foreground\",\n            \"[&::-webkit-search-cancel-button]:appearance-none\",\n            inputProps.className,\n          )}\n          onChange={(event) => {\n            inputProps.onChange?.(event);\n            setValue(event.target.value);\n          }}\n          onKeyDown={handleKeyDown}\n        />\n        {value ? (\n          <button\n            type=\"button\"\n            aria-label={clearLabel}\n            data-slot=\"expanding-search-clear\"\n            className={cn(iconButton, \"size-8 hover:bg-foreground/6\")}\n            onClick={() => {\n              setValue(\"\");\n              focusNext.current = \"input\";\n              inputRef.current?.focus();\n            }}\n          >\n            <Glyph d=\"M18 6 6 18M6 6l12 12\" />\n          </button>\n        ) : null}\n      </div>\n      {children}\n    </form>\n  );\n}\n\nexport { expandingSearchVariants };\n"],"mappings":"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"}

package/dist/components/expanding-search/index.d.ts

@@ -0,0 +1,2 @@
+import { ExpandingSearch, ExpandingSearchProps, expandingSearchVariants } from "./expanding-search.js";
+export { ExpandingSearch, type ExpandingSearchProps, expandingSearchVariants };

package/dist/components/expanding-search/index.js

@@ -0,0 +1,2 @@
+import { ExpandingSearch, expandingSearchVariants } from "./expanding-search.js";
+export { ExpandingSearch, expandingSearchVariants };

package/dist/components/expanding-search/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/expanding-search/meta.ts
+const meta = defineMeta({
+	name: "expanding-search",
+	title: "Expanding Search",
+	description: "A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority"],
+	registryDependencies: [],
+	files: ["expanding-search.tsx"],
+	a11y: "A labelled search landmark. The trigger is a button with aria-expanded and aria-controls; opening moves focus into the field. Escape clears the text first, then collapses and returns focus to the trigger; leaving an empty field collapses it without moving focus. The collapsed field is visibility-hidden, so it is out of the tab order. `inputProps` reaches the input for combobox wiring, and its onKeyDown can preventDefault to keep Escape for its own listbox."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/expanding-search/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/expanding-search/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"expanding-search\",\n  title: \"Expanding Search\",\n  description:\n    \"A search button that opens into a field, clears, and collapses back with Escape — ready for a combobox.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"expanding-search.tsx\"],\n  a11y:\n    \"A labelled search landmark. The trigger is a button with aria-expanded and aria-controls; opening moves \" +\n    \"focus into the field. Escape clears the text first, then collapses and returns focus to the trigger; \" +\n    \"leaving an empty field collapses it without moving focus. The collapsed field is visibility-hidden, so \" +\n    \"it is out of the tab order. `inputProps` reaches the input for combobox wiring, and its onKeyDown can \" +\n    \"preventDefault to keep Escape for its own listbox.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,sBAAsB;CAC9B,MACE;AAKJ,CAAC"}

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

@@ -0,0 +1,33 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef } from "react";
+//#region src/components/exposure-slider/exposure-slider.d.ts
+declare const exposureSliderVariants: (props?: ({
+  accent?: "primary" | "success" | "warning" | "destructive" | "info" | "foreground" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+interface ExposureSliderProps extends Omit<ComponentPropsWithRef<"div">, "defaultValue" | "onChange" | "children">, VariantProps<typeof exposureSliderVariants> {
+  /** Controlled value. */
+  value?: number;
+  /** Initial value when uncontrolled. */
+  defaultValue?: number;
+  /** Called on every change — each notch crossed while dragging, each key press. */
+  onValueChange?: (value: number) => void;
+  /** Called when an interaction ends: pointer released, or a key press. */
+  onValueCommit?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Steps moved by Page Up / Page Down. */
+  largeStep?: number;
+  /** Show the ring with the current value above the ruler. */
+  showIndicator?: boolean;
+  /** Formats the value for the ring and for `aria-valuetext`, e.g. `v => \`${v} EV\``. */
+  formatValue?: (value: number) => string;
+  disabled?: boolean;
+  /** Submits the value with a form under this name. */
+  name?: string;
+}
+/** An exposure-style dial: a draggable ruler of notches with a value ring. */
+declare function ExposureSlider({ className, style, accent, value: valueProp, defaultValue, onValueChange, onValueCommit, min, max, step, largeStep, showIndicator, formatValue, disabled, name, dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-valuetext": ariaValueText, ...props }: ExposureSliderProps): import("react").JSX.Element;
+//#endregion
+export { ExposureSlider, ExposureSliderProps, exposureSliderVariants };
+//# sourceMappingURL=exposure-slider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"exposure-slider.d.ts","names":[],"sources":["../../../src/components/exposure-slider/exposure-slider.tsx"],"mappings":";;;cAoCM,yBAAsB;;6CAkB3B;UAEgB,4BAEb,KAAK,yEACL,oBAAoB;;EAEtB;;EAEA;;EAEA,iBAAiB;;EAEjB,iBAAiB;EACjB;EACA;EACA;;EAEA;;EAEA;;EAEA,eAAe;EACf;;EAEA;;;iBAcc,iBACd,WACA,OACA,QACA,OAAO,WACP,cACA,eACA,eACA,KACA,KACA,MACA,WACA,eACA,aACA,UACA,MACA,KAAK,uBACS,8BACK,oCACC,mCACF,kBACf,SACF,sCAAmB,IAAA"}

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;