@dowel-ui/react 0.5.0 → 0.8.0

package/dist/components/drag-stepper/drag-stepper.js

@@ -0,0 +1,232 @@
+"use client";
+import { focusRingInset } 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/drag-stepper/drag-stepper.tsx
+const dragStepperVariants = cva(cn("group/stepper relative isolate inline-flex h-[2.875rem] items-stretch overflow-hidden rounded-full select-none", "transition-[scale] duration-[calc(320ms*var(--motion-scale))] ease-[cubic-bezier(.24,1.34,.38,1)]", "data-[sweep]:scale-x-[1.06]"), {
+	variants: { 
+	/** `light` sits on the card surface; `dark` inverts to a foreground slab. */
+fill: {
+		light: "bg-card text-card-foreground",
+		dark: "bg-foreground text-background"
+	} },
+	defaultVariants: { fill: "light" }
+});
+const clamp = (value, lo, hi) => Math.min(Math.max(value, lo), hi);
+function precisionOf(step) {
+	const text = String(step);
+	const exponent = /e-(\d+)$/.exec(text);
+	if (exponent) return Number(exponent[1]);
+	return text.split(".")[1]?.length ?? 0;
+}
+function Glyph({ plus }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		stroke: "currentColor",
+		strokeWidth: 2,
+		strokeLinecap: "round",
+		"aria-hidden": "true",
+		className: "size-4",
+		children: [/* @__PURE__ */ jsx("path", { d: "M5 12h14" }), plus ? /* @__PURE__ */ jsx("path", { d: "M12 5v14" }) : null]
+	});
+}
+/** A pill stepper whose side buttons, held, turn into a drag-to-scrub sweep. */
+function DragStepper({ className, fill, stroke = false, value: valueProp, defaultValue = 24, onValueChange, min = 0, max = 100, step = 1, largeStep = 10, holdDelay = 250, sensitivity = .6, disabled = false, name, formatValue, decrementLabel = "Decrease", incrementLabel = "Increase", dir: dirProp, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }) {
+	const dir = Direction.useDirection(dirProp);
+	const decimals = precisionOf(step);
+	const snap = (raw) => Number(clamp(Math.round((raw - min) / step) * step + min, min, max).toFixed(decimals));
+	const [uncontrolled, setUncontrolled] = useState(() => snap(defaultValue));
+	const controlled = valueProp !== void 0;
+	const value = controlled ? valueProp : uncontrolled;
+	const [draft, setDraft] = useState(null);
+	const [sweep, setSweep] = useState(false);
+	const current = useRef(value);
+	useEffect(() => {
+		current.current = value;
+	}, [value]);
+	const swallowClick = useRef(false);
+	const cleanup = useRef(null);
+	useEffect(() => () => cleanup.current?.(), []);
+	useMissingNameWarning(ariaLabel, ariaLabelledBy);
+	function setValue(raw) {
+		const next = snap(raw);
+		if (next === current.current) return;
+		if (!controlled) {
+			current.current = next;
+			setUncontrolled(next);
+		}
+		onValueChange?.(next);
+	}
+	function handleSidePointerDown(event) {
+		if (disabled || event.button !== 0) return;
+		cleanup.current?.();
+		swallowClick.current = false;
+		const startX = event.clientX;
+		let startValue = current.current;
+		let sweeping = false;
+		const move = (e) => {
+			if (!sweeping) return;
+			const dx = (e.clientX - startX) * (dir === "rtl" ? -1 : 1);
+			setValue(startValue + dx * sensitivity);
+		};
+		const end = () => {
+			if (sweeping) swallowClick.current = true;
+			stop();
+		};
+		const timer = window.setTimeout(() => {
+			sweeping = true;
+			startValue = current.current;
+			setSweep(true);
+		}, holdDelay);
+		function stop() {
+			window.clearTimeout(timer);
+			window.removeEventListener("pointermove", move);
+			window.removeEventListener("pointerup", end);
+			window.removeEventListener("pointercancel", end);
+			cleanup.current = null;
+			setSweep(false);
+		}
+		window.addEventListener("pointermove", move);
+		window.addEventListener("pointerup", end);
+		window.addEventListener("pointercancel", end);
+		cleanup.current = stop;
+	}
+	function handleSideClick(event, direction) {
+		if (swallowClick.current && event.detail !== 0) {
+			swallowClick.current = false;
+			return;
+		}
+		swallowClick.current = false;
+		if (disabled) return;
+		setValue(current.current + direction * step);
+	}
+	function commitDraft() {
+		if (draft === null) return;
+		const parsed = Number.parseFloat(draft.replace(",", "."));
+		setDraft(null);
+		if (Number.isFinite(parsed)) setValue(parsed);
+	}
+	function handleKeyDown(event) {
+		if (disabled) return;
+		if (event.key === "Enter") {
+			event.preventDefault();
+			commitDraft();
+			return;
+		}
+		if (event.key === "Escape") {
+			if (draft === null) return;
+			event.preventDefault();
+			setDraft(null);
+			return;
+		}
+		const forward = dir === "rtl" ? -1 : 1;
+		const moves = {
+			ArrowUp: 1,
+			ArrowDown: -1,
+			PageUp: largeStep,
+			PageDown: -largeStep
+		};
+		if (draft === null) {
+			moves.ArrowRight = forward;
+			moves.ArrowLeft = -forward;
+		}
+		let next;
+		if (event.key === "Home") next = min;
+		else if (event.key === "End") next = max;
+		else if (event.key in moves) next = current.current + (moves[event.key] ?? 0) * step;
+		else return;
+		event.preventDefault();
+		setDraft(null);
+		setValue(next);
+	}
+	const range = max - min;
+	const ratio = range > 0 ? (clamp(value, min, max) - min) / range : 0;
+	const text = value.toFixed(decimals);
+	const atMin = value <= min;
+	const atMax = value >= max;
+	const side = cn("relative z-[1] flex size-[2.875rem] shrink-0 items-center justify-center rounded-full", "opacity-55 transition-opacity duration-[var(--duration-fast)] hover:opacity-100", "disabled:opacity-25 aria-disabled:opacity-25 aria-disabled:hover:opacity-25", disabled ? "cursor-not-allowed" : "cursor-pointer", focusRingInset);
+	return /* @__PURE__ */ jsxs("div", {
+		role: "group",
+		"data-slot": "drag-stepper",
+		"data-sweep": sweep ? "" : void 0,
+		"data-disabled": disabled ? "" : void 0,
+		dir: dirProp,
+		className: cn(dragStepperVariants({ fill }), stroke && "shadow-[inset_0_0_0_1px_var(--color-border)]", disabled && "opacity-55", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("i", {
+				"data-slot": "drag-stepper-fill",
+				"aria-hidden": "true",
+				className: cn("pointer-events-none absolute inset-0 -z-[1] bg-current/7 opacity-0", "transition-opacity duration-[calc(220ms*var(--motion-scale))] group-data-[sweep]/stepper:opacity-100"),
+				style: {
+					transform: `scaleX(${String(ratio)})`,
+					transformOrigin: dir === "rtl" ? "right" : "left"
+				}
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "drag-stepper-decrement",
+				"aria-label": decrementLabel,
+				"aria-disabled": atMin || void 0,
+				disabled,
+				className: side,
+				onPointerDown: handleSidePointerDown,
+				onClick: (event) => atMin ? void 0 : handleSideClick(event, -1),
+				children: /* @__PURE__ */ jsx(Glyph, {})
+			}),
+			/* @__PURE__ */ jsx("input", {
+				type: "text",
+				role: "spinbutton",
+				inputMode: "numeric",
+				autoComplete: "off",
+				"data-slot": "drag-stepper-input",
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-valuenow": value,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-valuetext": formatValue?.(value),
+				disabled,
+				value: draft ?? text,
+				onChange: (event) => setDraft(event.target.value),
+				onKeyDown: handleKeyDown,
+				onBlur: commitDraft,
+				className: cn("relative z-[1] w-[3.625rem] min-w-0 rounded-full bg-transparent text-center text-[1.0625rem] font-medium tabular-nums", "transition-[scale] duration-[calc(320ms*var(--motion-scale))] ease-[cubic-bezier(.24,1.34,.38,1)]", "group-data-[sweep]/stepper:scale-[1.18] disabled:cursor-not-allowed", focusRingInset)
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				"data-slot": "drag-stepper-increment",
+				"aria-label": incrementLabel,
+				"aria-disabled": atMax || void 0,
+				disabled,
+				className: side,
+				onPointerDown: handleSidePointerDown,
+				onClick: (event) => atMax ? void 0 : handleSideClick(event, 1),
+				children: /* @__PURE__ */ jsx(Glyph, { plus: true })
+			}),
+			name ? /* @__PURE__ */ jsx("input", {
+				type: "hidden",
+				name,
+				value,
+				disabled
+			}) : null
+		]
+	});
+}
+/** Warns, in development only, when the spinbutton would render unnamed. */
+function useMissingNameWarning(ariaLabel, ariaLabelledBy) {
+	useEffect(() => {
+		if (process.env.NODE_ENV === "production") return;
+		if (ariaLabel ?? ariaLabelledBy) return;
+		console.warn("[DragStepper] The value has no accessible name. Pass aria-label or aria-labelledby.");
+	}, [ariaLabel, ariaLabelledBy]);
+}
+//#endregion
+export { DragStepper, dragStepperVariants };
+
+//# sourceMappingURL=drag-stepper.js.map

package/dist/components/drag-stepper/drag-stepper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drag-stepper.js","names":[],"sources":["../../../src/components/drag-stepper/drag-stepper.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from bencho Drag stepper (MIT, © 2026 Lorenzo Cabra). 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 MouseEvent,\n  type PointerEvent,\n} from \"react\";\n\nimport { focusRingInset } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A pill number stepper: − and + either side of the value. A tap steps once;\n * pressing and holding a side button for `holdDelay` enters *sweep mode*,\n * where the pill stretches, the number swells, a faint fill shows where the\n * value sits in its range, and dragging sideways scrubs the value until the\n * pointer lifts.\n *\n * The source's value was a plain label. Here it is a real spinbutton: an\n * <input> you can arrow, page, Home/End and type into. Nothing carries gesture\n * velocity, so every animation is a CSS transition on data-sweep and the global\n * reduced-motion rule stops it.\n */\n\nconst dragStepperVariants = cva(\n  cn(\n    \"group/stepper relative isolate inline-flex h-[2.875rem] items-stretch overflow-hidden rounded-full select-none\",\n    \"transition-[scale] duration-[calc(320ms*var(--motion-scale))] ease-[cubic-bezier(.24,1.34,.38,1)]\",\n    \"data-[sweep]:scale-x-[1.06]\",\n  ),\n  {\n    variants: {\n      /** `light` sits on the card surface; `dark` inverts to a foreground slab. */\n      fill: {\n        light: \"bg-card text-card-foreground\",\n        dark: \"bg-foreground text-background\",\n      },\n    },\n    defaultVariants: {\n      fill: \"light\",\n    },\n  },\n);\n\nexport interface DragStepperProps\n  extends\n    Omit<ComponentPropsWithRef<\"div\">, \"defaultValue\" | \"onChange\" | \"children\">,\n    VariantProps<typeof dragStepperVariants> {\n  /** Controlled value. */\n  value?: number;\n  /** Initial value when uncontrolled. */\n  defaultValue?: number;\n  /** Called on every change: tap, key, typed entry and each sweep move. */\n  onValueChange?: (value: number) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** Steps moved by Page Up / Page Down (multiplied by `step`). */\n  largeStep?: number;\n  /** Milliseconds a side button must be held to enter sweep mode. */\n  holdDelay?: number;\n  /** Units scrubbed per pixel of horizontal drag in sweep mode. */\n  sensitivity?: number;\n  /** A 1px inset hairline ring around the pill. */\n  stroke?: boolean;\n  disabled?: boolean;\n  /** Submits the value with a form under this name. */\n  name?: string;\n  /** Spoken value (`aria-valuetext`), for units: `(v) => \\`${v} guests\\``. */\n  formatValue?: (value: number) => string;\n  /** Accessible name of the − button. */\n  decrementLabel?: string;\n  /** Accessible name of the + button. */\n  incrementLabel?: string;\n}\n\nconst clamp = (value: number, lo: number, hi: number) => Math.min(Math.max(value, lo), hi);\n\nfunction precisionOf(step: number): number {\n  const text = String(step);\n  const exponent = /e-(\\d+)$/.exec(text);\n  if (exponent) return Number(exponent[1]);\n  return text.split(\".\")[1]?.length ?? 0;\n}\n\nfunction Glyph({ plus }: { plus?: boolean }) {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth={2}\n      strokeLinecap=\"round\"\n      aria-hidden=\"true\"\n      className=\"size-4\"\n    >\n      {/* rtl-ok: a minus sign, not an arrow; it means the same in every direction. */}\n      <path d=\"M5 12h14\" />\n      {plus ? <path d=\"M12 5v14\" /> : null}\n    </svg>\n  );\n}\n\n/** A pill stepper whose side buttons, held, turn into a drag-to-scrub sweep. */\nexport function DragStepper({\n  className,\n  fill,\n  stroke = false,\n  value: valueProp,\n  defaultValue = 24,\n  onValueChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  largeStep = 10,\n  holdDelay = 250,\n  sensitivity = 0.6,\n  disabled = false,\n  name,\n  formatValue,\n  decrementLabel = \"Decrease\",\n  incrementLabel = \"Increase\",\n  dir: dirProp,\n  \"aria-label\": ariaLabel,\n  \"aria-labelledby\": ariaLabelledBy,\n  \"aria-describedby\": ariaDescribedBy,\n  ...props\n}: DragStepperProps) {\n  const dir = Direction.useDirection(dirProp as \"ltr\" | \"rtl\" | undefined);\n  const decimals = precisionOf(step);\n  const snap = (raw: number) =>\n    Number(clamp(Math.round((raw - min) / step) * step + min, min, max).toFixed(decimals));\n\n  const [uncontrolled, setUncontrolled] = useState(() => snap(defaultValue));\n  const controlled = valueProp !== undefined;\n  const value = controlled ? valueProp : uncontrolled;\n  const [draft, setDraft] = useState<string | null>(null);\n  const [sweep, setSweep] = useState(false);\n\n  // The latest value, readable from window listeners registered mid-gesture.\n  const current = useRef(value);\n  useEffect(() => {\n    current.current = value;\n  }, [value]);\n  // A hold that became a sweep swallows the click the release produces.\n  const swallowClick = useRef(false);\n  const cleanup = useRef<(() => void) | null>(null);\n\n  useEffect(() => () => cleanup.current?.(), []);\n  useMissingNameWarning(ariaLabel, ariaLabelledBy);\n\n  function setValue(raw: number) {\n    const next = snap(raw);\n    if (next === current.current) return;\n    // Controlled: the parent's re-render moves `current`, or leaves it be.\n    if (!controlled) {\n      current.current = next;\n      setUncontrolled(next);\n    }\n    onValueChange?.(next);\n  }\n\n  function handleSidePointerDown(event: PointerEvent<HTMLButtonElement>) {\n    if (disabled || event.button !== 0) return;\n    cleanup.current?.();\n    swallowClick.current = false;\n    const startX = event.clientX;\n    let startValue = current.current;\n    let sweeping = false;\n\n    const move = (e: globalThis.PointerEvent) => {\n      if (!sweeping) return;\n      const dx = (e.clientX - startX) * (dir === \"rtl\" ? -1 : 1);\n      setValue(startValue + dx * sensitivity);\n    };\n    const end = () => {\n      if (sweeping) swallowClick.current = true;\n      stop();\n    };\n    const timer = window.setTimeout(() => {\n      sweeping = true;\n      startValue = current.current;\n      setSweep(true);\n    }, holdDelay);\n\n    function stop() {\n      window.clearTimeout(timer);\n      window.removeEventListener(\"pointermove\", move);\n      window.removeEventListener(\"pointerup\", end);\n      window.removeEventListener(\"pointercancel\", end);\n      cleanup.current = null;\n      setSweep(false);\n    }\n\n    window.addEventListener(\"pointermove\", move);\n    window.addEventListener(\"pointerup\", end);\n    window.addEventListener(\"pointercancel\", end);\n    cleanup.current = stop;\n  }\n\n  function handleSideClick(event: MouseEvent<HTMLButtonElement>, direction: 1 | -1) {\n    // A keyboard click (detail 0) is never the tail of a hold.\n    if (swallowClick.current && event.detail !== 0) {\n      swallowClick.current = false;\n      return;\n    }\n    swallowClick.current = false;\n    if (disabled) return;\n    setValue(current.current + direction * step);\n  }\n\n  function commitDraft() {\n    if (draft === null) return;\n    const parsed = Number.parseFloat(draft.replace(\",\", \".\"));\n    setDraft(null);\n    if (Number.isFinite(parsed)) setValue(parsed);\n  }\n\n  function handleKeyDown(event: KeyboardEvent<HTMLInputElement>) {\n    if (disabled) return;\n    if (event.key === \"Enter\") {\n      event.preventDefault();\n      commitDraft();\n      return;\n    }\n    if (event.key === \"Escape\") {\n      if (draft === null) return;\n      event.preventDefault();\n      setDraft(null);\n      return;\n    }\n    const forward = dir === \"rtl\" ? -1 : 1;\n    const moves: Record<string, number> = {\n      ArrowUp: 1,\n      ArrowDown: -1,\n      PageUp: largeStep,\n      PageDown: -largeStep,\n    };\n    // Left/Right step only while not typing, so the caret still moves in a draft.\n    if (draft === null) {\n      moves.ArrowRight = forward;\n      moves.ArrowLeft = -forward;\n    }\n    let next: number;\n    if (event.key === \"Home\") next = min;\n    else if (event.key === \"End\") next = max;\n    else if (event.key in moves) next = current.current + (moves[event.key] ?? 0) * step;\n    else return;\n    event.preventDefault();\n    setDraft(null);\n    setValue(next);\n  }\n\n  const range = max - min;\n  const ratio = range > 0 ? (clamp(value, min, max) - min) / range : 0;\n  const text = value.toFixed(decimals);\n  const atMin = value <= min;\n  const atMax = value >= max;\n\n  const side = cn(\n    \"relative z-[1] flex size-[2.875rem] shrink-0 items-center justify-center rounded-full\",\n    \"opacity-55 transition-opacity duration-[var(--duration-fast)] hover:opacity-100\",\n    \"disabled:opacity-25 aria-disabled:opacity-25 aria-disabled:hover:opacity-25\",\n    disabled ? \"cursor-not-allowed\" : \"cursor-pointer\",\n    focusRingInset,\n  );\n\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"drag-stepper\"\n      data-sweep={sweep ? \"\" : undefined}\n      data-disabled={disabled ? \"\" : undefined}\n      dir={dirProp}\n      className={cn(\n        dragStepperVariants({ fill }),\n        stroke && \"shadow-[inset_0_0_0_1px_var(--color-border)]\",\n        disabled && \"opacity-55\",\n        className,\n      )}\n      {...props}\n    >\n      <i\n        data-slot=\"drag-stepper-fill\"\n        aria-hidden=\"true\"\n        className={cn(\n          \"pointer-events-none absolute inset-0 -z-[1] bg-current/7 opacity-0\",\n          \"transition-opacity duration-[calc(220ms*var(--motion-scale))] group-data-[sweep]/stepper:opacity-100\",\n        )}\n        style={{\n          transform: `scaleX(${String(ratio)})`,\n          transformOrigin: dir === \"rtl\" ? \"right\" : \"left\",\n        }}\n      />\n      <button\n        type=\"button\"\n        data-slot=\"drag-stepper-decrement\"\n        aria-label={decrementLabel}\n        aria-disabled={atMin || undefined}\n        disabled={disabled}\n        className={side}\n        onPointerDown={handleSidePointerDown}\n        onClick={(event) => (atMin ? undefined : handleSideClick(event, -1))}\n      >\n        <Glyph />\n      </button>\n      <input\n        type=\"text\"\n        role=\"spinbutton\"\n        inputMode=\"numeric\"\n        autoComplete=\"off\"\n        data-slot=\"drag-stepper-input\"\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledBy}\n        aria-describedby={ariaDescribedBy}\n        aria-valuenow={value}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-valuetext={formatValue?.(value)}\n        disabled={disabled}\n        value={draft ?? text}\n        onChange={(event) => setDraft(event.target.value)}\n        onKeyDown={handleKeyDown}\n        onBlur={commitDraft}\n        className={cn(\n          \"relative z-[1] w-[3.625rem] min-w-0 rounded-full bg-transparent text-center text-[1.0625rem] font-medium tabular-nums\",\n          \"transition-[scale] duration-[calc(320ms*var(--motion-scale))] ease-[cubic-bezier(.24,1.34,.38,1)]\",\n          \"group-data-[sweep]/stepper:scale-[1.18] disabled:cursor-not-allowed\",\n          focusRingInset,\n        )}\n      />\n      <button\n        type=\"button\"\n        data-slot=\"drag-stepper-increment\"\n        aria-label={incrementLabel}\n        aria-disabled={atMax || undefined}\n        disabled={disabled}\n        className={side}\n        onPointerDown={handleSidePointerDown}\n        onClick={(event) => (atMax ? undefined : handleSideClick(event, 1))}\n      >\n        <Glyph plus />\n      </button>\n      {name ? <input type=\"hidden\" name={name} value={value} disabled={disabled} /> : null}\n    </div>\n  );\n}\n\n/** Warns, in development only, when the spinbutton would render unnamed. */\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      \"[DragStepper] The value has no accessible name. Pass aria-label or aria-labelledby.\",\n    );\n  }, [ariaLabel, ariaLabelledBy]);\n}\n\nexport { dragStepperVariants };\n"],"mappings":";;;;;;;;AA+BA,MAAM,sBAAsB,IAC1B,GACE,kHACA,qGACA,6BACF,GACA;CACE,UAAU;;AAER,MAAM;EACJ,OAAO;EACP,MAAM;CACR,EACF;CACA,iBAAiB,EACf,MAAM,QACR;AACF,CACF;AAkCA,MAAM,SAAS,OAAe,IAAY,OAAe,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,GAAG,EAAE;AAEzF,SAAS,YAAY,MAAsB;CACzC,MAAM,OAAO,OAAO,IAAI;CACxB,MAAM,WAAW,WAAW,KAAK,IAAI;CACrC,IAAI,UAAU,OAAO,OAAO,SAAS,EAAE;CACvC,OAAO,KAAK,MAAM,GAAG,CAAC,CAAC,EAAE,EAAE,UAAU;AACvC;AAEA,SAAS,MAAM,EAAE,QAA4B;CAC3C,OACE,qBAAC,OAAD;EACE,SAAQ;EACR,MAAK;EACL,QAAO;EACP,aAAa;EACb,eAAc;EACd,eAAY;EACZ,WAAU;EAPZ,UAAA,CAUE,oBAAC,QAAD,EAAM,GAAE,WAAY,CAAA,GACnB,OAAO,oBAAC,QAAD,EAAM,GAAE,WAAY,CAAA,IAAI,IAC7B;;AAET;;AAGA,SAAgB,YAAY,EAC1B,WACA,MACA,SAAS,OACT,OAAO,WACP,eAAe,IACf,eACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,YAAY,IACZ,YAAY,KACZ,cAAc,IACd,WAAW,OACX,MACA,aACA,iBAAiB,YACjB,iBAAiB,YACjB,KAAK,SACL,cAAc,WACd,mBAAmB,gBACnB,oBAAoB,iBACpB,GAAG,SACgB;CACnB,MAAM,MAAM,UAAU,aAAa,OAAoC;CACvE,MAAM,WAAW,YAAY,IAAI;CACjC,MAAM,QAAQ,QACZ,OAAO,MAAM,KAAK,OAAO,MAAM,OAAO,IAAI,IAAI,OAAO,KAAK,KAAK,GAAG,CAAC,CAAC,QAAQ,QAAQ,CAAC;CAEvF,MAAM,CAAC,cAAc,mBAAmB,eAAe,KAAK,YAAY,CAAC;CACzE,MAAM,aAAa,cAAc,KAAA;CACjC,MAAM,QAAQ,aAAa,YAAY;CACvC,MAAM,CAAC,OAAO,YAAY,SAAwB,IAAI;CACtD,MAAM,CAAC,OAAO,YAAY,SAAS,KAAK;CAGxC,MAAM,UAAU,OAAO,KAAK;CAC5B,gBAAgB;EACd,QAAQ,UAAU;CACpB,GAAG,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,OAAO,KAAK;CACjC,MAAM,UAAU,OAA4B,IAAI;CAEhD,sBAAsB,QAAQ,UAAU,GAAG,CAAC,CAAC;CAC7C,sBAAsB,WAAW,cAAc;CAE/C,SAAS,SAAS,KAAa;EAC7B,MAAM,OAAO,KAAK,GAAG;EACrB,IAAI,SAAS,QAAQ,SAAS;EAE9B,IAAI,CAAC,YAAY;GACf,QAAQ,UAAU;GAClB,gBAAgB,IAAI;EACtB;EACA,gBAAgB,IAAI;CACtB;CAEA,SAAS,sBAAsB,OAAwC;EACrE,IAAI,YAAY,MAAM,WAAW,GAAG;EACpC,QAAQ,UAAU;EAClB,aAAa,UAAU;EACvB,MAAM,SAAS,MAAM;EACrB,IAAI,aAAa,QAAQ;EACzB,IAAI,WAAW;EAEf,MAAM,QAAQ,MAA+B;GAC3C,IAAI,CAAC,UAAU;GACf,MAAM,MAAM,EAAE,UAAU,WAAW,QAAQ,QAAQ,KAAK;GACxD,SAAS,aAAa,KAAK,WAAW;EACxC;EACA,MAAM,YAAY;GAChB,IAAI,UAAU,aAAa,UAAU;GACrC,KAAK;EACP;EACA,MAAM,QAAQ,OAAO,iBAAiB;GACpC,WAAW;GACX,aAAa,QAAQ;GACrB,SAAS,IAAI;EACf,GAAG,SAAS;EAEZ,SAAS,OAAO;GACd,OAAO,aAAa,KAAK;GACzB,OAAO,oBAAoB,eAAe,IAAI;GAC9C,OAAO,oBAAoB,aAAa,GAAG;GAC3C,OAAO,oBAAoB,iBAAiB,GAAG;GAC/C,QAAQ,UAAU;GAClB,SAAS,KAAK;EAChB;EAEA,OAAO,iBAAiB,eAAe,IAAI;EAC3C,OAAO,iBAAiB,aAAa,GAAG;EACxC,OAAO,iBAAiB,iBAAiB,GAAG;EAC5C,QAAQ,UAAU;CACpB;CAEA,SAAS,gBAAgB,OAAsC,WAAmB;EAEhF,IAAI,aAAa,WAAW,MAAM,WAAW,GAAG;GAC9C,aAAa,UAAU;GACvB;EACF;EACA,aAAa,UAAU;EACvB,IAAI,UAAU;EACd,SAAS,QAAQ,UAAU,YAAY,IAAI;CAC7C;CAEA,SAAS,cAAc;EACrB,IAAI,UAAU,MAAM;EACpB,MAAM,SAAS,OAAO,WAAW,MAAM,QAAQ,KAAK,GAAG,CAAC;EACxD,SAAS,IAAI;EACb,IAAI,OAAO,SAAS,MAAM,GAAG,SAAS,MAAM;CAC9C;CAEA,SAAS,cAAc,OAAwC;EAC7D,IAAI,UAAU;EACd,IAAI,MAAM,QAAQ,SAAS;GACzB,MAAM,eAAe;GACrB,YAAY;GACZ;EACF;EACA,IAAI,MAAM,QAAQ,UAAU;GAC1B,IAAI,UAAU,MAAM;GACpB,MAAM,eAAe;GACrB,SAAS,IAAI;GACb;EACF;EACA,MAAM,UAAU,QAAQ,QAAQ,KAAK;EACrC,MAAM,QAAgC;GACpC,SAAS;GACT,WAAW;GACX,QAAQ;GACR,UAAU,CAAC;EACb;EAEA,IAAI,UAAU,MAAM;GAClB,MAAM,aAAa;GACnB,MAAM,YAAY,CAAC;EACrB;EACA,IAAI;EACJ,IAAI,MAAM,QAAQ,QAAQ,OAAO;OAC5B,IAAI,MAAM,QAAQ,OAAO,OAAO;OAChC,IAAI,MAAM,OAAO,OAAO,OAAO,QAAQ,WAAW,MAAM,MAAM,QAAQ,KAAK;OAC3E;EACL,MAAM,eAAe;EACrB,SAAS,IAAI;EACb,SAAS,IAAI;CACf;CAEA,MAAM,QAAQ,MAAM;CACpB,MAAM,QAAQ,QAAQ,KAAK,MAAM,OAAO,KAAK,GAAG,IAAI,OAAO,QAAQ;CACnE,MAAM,OAAO,MAAM,QAAQ,QAAQ;CACnC,MAAM,QAAQ,SAAS;CACvB,MAAM,QAAQ,SAAS;CAEvB,MAAM,OAAO,GACX,yFACA,mFACA,+EACA,WAAW,uBAAuB,kBAClC,cACF;CAEA,OACE,qBAAC,OAAD;EACE,MAAK;EACL,aAAU;EACV,cAAY,QAAQ,KAAK,KAAA;EACzB,iBAAe,WAAW,KAAK,KAAA;EAC/B,KAAK;EACL,WAAW,GACT,oBAAoB,EAAE,KAAK,CAAC,GAC5B,UAAU,gDACV,YAAY,cACZ,SACF;EACA,GAAI;EAZN,UAAA;GAcE,oBAAC,KAAD;IACE,aAAU;IACV,eAAY;IACZ,WAAW,GACT,sEACA,sGACF;IACA,OAAO;KACL,WAAW,UAAU,OAAO,KAAK,EAAE;KACnC,iBAAiB,QAAQ,QAAQ,UAAU;IAC7C;GACD,CAAA;GACD,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,cAAY;IACZ,iBAAe,SAAS,KAAA;IACd;IACV,WAAW;IACX,eAAe;IACf,UAAU,UAAW,QAAQ,KAAA,IAAY,gBAAgB,OAAO,EAAE;IAElE,UAAA,oBAAC,OAAD,CAAQ,CAAA;GACF,CAAA;GACR,oBAAC,SAAD;IACE,MAAK;IACL,MAAK;IACL,WAAU;IACV,cAAa;IACb,aAAU;IACV,cAAY;IACZ,mBAAiB;IACjB,oBAAkB;IAClB,iBAAe;IACf,iBAAe;IACf,iBAAe;IACf,kBAAgB,cAAc,KAAK;IACzB;IACV,OAAO,SAAS;IAChB,WAAW,UAAU,SAAS,MAAM,OAAO,KAAK;IAChD,WAAW;IACX,QAAQ;IACR,WAAW,GACT,yHACA,qGACA,uEACA,cACF;GACD,CAAA;GACD,oBAAC,UAAD;IACE,MAAK;IACL,aAAU;IACV,cAAY;IACZ,iBAAe,SAAS,KAAA;IACd;IACV,WAAW;IACX,eAAe;IACf,UAAU,UAAW,QAAQ,KAAA,IAAY,gBAAgB,OAAO,CAAC;IAEjE,UAAA,oBAAC,OAAD,EAAO,MAAA,KAAM,CAAA;GACP,CAAA;GACP,OAAO,oBAAC,SAAD;IAAO,MAAK;IAAe;IAAa;IAAiB;GAAW,CAAA,IAAI;EAC7E;;AAET;;AAGA,SAAS,sBAAsB,WAAoB,gBAAyB;CAC1E,gBAAgB;EACd,IAAI,QAAQ,IAAI,aAAa,cAAc;EAC3C,IAAI,aAAa,gBAAgB;EACjC,QAAQ,KACN,qFACF;CACF,GAAG,CAAC,WAAW,cAAc,CAAC;AAChC"}

package/dist/components/drag-stepper/index.d.ts

@@ -0,0 +1,2 @@
+import { DragStepper, DragStepperProps, dragStepperVariants } from "./drag-stepper.js";
+export { DragStepper, type DragStepperProps, dragStepperVariants };

package/dist/components/drag-stepper/index.js

@@ -0,0 +1,2 @@
+import { DragStepper, dragStepperVariants } from "./drag-stepper.js";
+export { DragStepper, dragStepperVariants };

package/dist/components/drag-stepper/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/drag-stepper/meta.ts
+const meta = defineMeta({
+	name: "drag-stepper",
+	title: "Drag Stepper",
+	description: "A pill number stepper: tap − or + to step, or hold either one to stretch into a sweep and drag to scrub.",
+	category: "form",
+	status: "beta",
+	dependencies: ["class-variance-authority", "radix-ui"],
+	registryDependencies: [],
+	files: ["drag-stepper.tsx"],
+	a11y: "The value is a text input with role=\"spinbutton\", aria-valuenow, -valuemin, -valuemax and an optional aria-valuetext from formatValue. Up/Right step up and Down/Left step down (Left/Right mirror in right-to-left layouts, and leave the caret alone while a number is being typed), Page Up/Down take large steps, Home/End jump to the bounds. Typing commits on Enter or blur, clamped to the range; Escape discards the draft. The − and + side buttons are real, named buttons (\"Decrease\", \"Increase\") that step on click, so Enter and Space work; they report aria-disabled at the bounds but stay focusable. Holding one to sweep is a pointer convenience with no keyboard-only behaviour behind it. The fill is aria-hidden, and the sweep's stretch and swell are CSS transitions that stop under reduced motion. A development warning fires when the value is unnamed."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/drag-stepper/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/drag-stepper/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"drag-stepper\",\n  title: \"Drag Stepper\",\n  description:\n    \"A pill number stepper: tap − or + to step, or hold either one to stretch into a sweep and drag to scrub.\",\n  category: \"form\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"radix-ui\"],\n  registryDependencies: [],\n  files: [\"drag-stepper.tsx\"],\n  a11y:\n    'The value is a text input with role=\"spinbutton\", aria-valuenow, -valuemin, -valuemax and an optional ' +\n    \"aria-valuetext from formatValue. Up/Right step up and Down/Left step down (Left/Right mirror in right-to-left \" +\n    \"layouts, and leave the caret alone while a number is being typed), Page Up/Down take large steps, Home/End \" +\n    \"jump to the bounds. Typing commits on Enter or blur, clamped to the range; Escape discards the draft. The − \" +\n    'and + side buttons are real, named buttons (\"Decrease\", \"Increase\") that step on click, so Enter and Space ' +\n    \"work; they report aria-disabled at the bounds but stay focusable. Holding one to sweep is a pointer \" +\n    \"convenience with no keyboard-only behaviour behind it. The fill is aria-hidden, and the sweep's stretch and \" +\n    \"swell are CSS transitions that stop under reduced motion. A development warning fires when the value is \" +\n    \"unnamed.\",\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,kBAAkB;CAC1B,MACE;AASJ,CAAC"}

package/dist/components/drawer/drawer.d.ts

@@ -18,8 +18,16 @@ declare function DrawerOverlay({ className, ...props }: ComponentPropsWithRef<ty
 interface DrawerContentProps extends ComponentPropsWithRef<typeof Dialog.Content> {
   /** Shows the grab handle. Turn off only if the drawer cannot be dragged. */
   showHandle?: boolean;
+  /**
+   * How the content arrives. `default` slides up as one piece. `spring` slides
+   * the panel the same way, then brings its sections — header, body, footer —
+   * in one after another. The panel itself never overshoots, because a bottom
+   * sheet that bounced would lift off the edge it is attached to. Stops under
+   * reduced motion.
+   */
+  animation?: "default" | "spring";
 }
-declare function DrawerContent({ className, children, showHandle, ...props }: DrawerContentProps): import("react").JSX.Element;
+declare function DrawerContent({ className, children, showHandle, animation, ...props }: DrawerContentProps): import("react").JSX.Element;
 declare function DrawerHeader({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 declare function DrawerBody({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;
 declare function DrawerFooter({ className, ...props }: ComponentPropsWithRef<"div">): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"drawer.d.ts","names":[],"sources":["../../../src/components/drawer/drawer.tsx"],"mappings":";;;UA2CiB,oBAAoB,KACnC,6BAA6B,OAAgB;;;;;;;EAS7C,gBAAgB;;iBAGF,SAAS,MAAM,aAAa,cAAc,aAAa,SAAS,8BAAW,IAAA;cA4B9E,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;iBAER,gBACd,cACG,SACF,6BAA6B,OAAgB,2BAAQ,IAAA;UA2BvC,2BAA2B,6BACnC,OAAgB;;EAGvB;;iBAGc,gBACd,WACA,UACA,eACG,SACF,qCAAkB,IAAA;iBAyFL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,aAAa,cAAc,SAAS,+CAA4B,IAAA;iBAUhE,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,cACd,cACG,SACF,6BAA6B,OAAgB,yBAAM,IAAA;iBAUtC,oBACd,cACG,SACF,6BAA6B,OAAgB,+BAAY,IAAA;;iBAW5C,eACd,cACG,SACF,6BAA6B,OAAgB,yBAAM,IAAA"}
+{"version":3,"file":"drawer.d.ts","names":[],"sources":["../../../src/components/drawer/drawer.tsx"],"mappings":";;;UA4CiB,oBAAoB,KACnC,6BAA6B,OAAgB;;;;;;;EAS7C,gBAAgB;;iBAGF,SAAS,MAAM,aAAa,cAAc,aAAa,SAAS,8BAAW,IAAA;cA4B9E,+BAAa,0BAAA,OAAA,qCAAA,cAAA;cACb,8BAAY,GAAA,OAAA;cACZ,6BAAW,0BAAA,OAAA,mCAAA,cAAA;iBAER,gBACd,cACG,SACF,6BAA6B,OAAgB,2BAAQ,IAAA;UAiDvC,2BAA2B,6BACnC,OAAgB;;EAGvB;;;;;;;;EAQA;;iBAGc,gBACd,WACA,UACA,YACA,cACG,SACF,qCAAkB,IAAA;iBAoGL,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,aAAa,cAAc,SAAS,+CAA4B,IAAA;iBAUhE,eAAe,cAAc,SAAS,+CAA4B,IAAA;iBAUlE,cACd,cACG,SACF,6BAA6B,OAAgB,yBAAM,IAAA;iBAUtC,oBACd,cACG,SACF,6BAA6B,OAAgB,+BAAY,IAAA;;iBAW5C,eACd,cACG,SACF,6BAA6B,OAAgB,yBAAM,IAAA"}

package/dist/components/drawer/drawer.js

@@ -2,7 +2,7 @@
 import { focusRing } from "../../lib/styles.js";
 import { cn } from "../../lib/utils.js";
 import { Dialog } from "radix-ui";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 //#region src/components/drawer/drawer.tsx
 const DrawerContext = createContext(null);
@@ -52,7 +52,21 @@ const DISMISS_VELOCITY = .5;
 * drawer would close it.
 */
 const MIN_FLICK_DISTANCE = 24;
-function DrawerContent({ className, children, showHandle = true, ...props }) {
+const PREFIX = "dowel-drawer";
+/** Sections start once the panel is mostly up, then follow 50ms apart. */
+const STAGGER_BASE_MS = 120;
+const STAGGER_STEP_MS = 50;
+const STAGGERED = 6;
+const SPRING_CHILD = `[data-slot=drawer-content][data-animation=spring][data-state=open]>:not([data-slot=drawer-handle])`;
+const delay = (index) => `calc(${String(STAGGER_BASE_MS + index * STAGGER_STEP_MS)}ms * var(--motion-scale))`;
+const STYLES = `
+@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(6px)}}
+${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:${delay(0)}}
+${Array.from({ length: 5 }, (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:${delay(i + 1)}}`).join("\n")}
+${SPRING_CHILD}:nth-child(n+${String(7)}){animation-delay:${delay(STAGGERED)}}
+`;
+function DrawerContent({ className, children, showHandle = true, animation = "default", ...props }) {
+	const spring = animation === "spring";
 	const { close } = useDrawerContext("DrawerContent");
 	const contentRef = useRef(null);
 	const gesture = useRef(null);
@@ -88,10 +102,15 @@ function DrawerContent({ className, children, showHandle = true, ...props }) {
 		onPointerUp: handlePointerUp,
 		onPointerCancel: handlePointerUp
 	};
-	return /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [spring ? /* @__PURE__ */ jsx("style", {
+		href: PREFIX,
+		precedence: "dowel",
+		children: STYLES
+	}) : null, /* @__PURE__ */ jsxs(DrawerPortal, { children: [/* @__PURE__ */ jsx(DrawerOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
 		ref: contentRef,
 		"data-slot": "drawer-content",
 		"data-dragging": isDragging || void 0,
+		"data-animation": spring ? "spring" : void 0,
 		style: offset > 0 ? { transform: `translate3d(0, ${String(offset)}px, 0)` } : void 0,
 		className: cn("fixed inset-x-0 bottom-0 z-[var(--z-drawer)] flex max-h-[92svh] flex-col", "rounded-t-2xl border-t border-border bg-card text-card-foreground shadow-xl", "[--slide-y:100%]", "data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in", "data-[dragging]:animate-none data-[dragging]:transition-none", "transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]", className),
 		...props,
@@ -102,12 +121,12 @@ function DrawerContent({ className, children, showHandle = true, ...props }) {
 			...dragHandlers,
 			children: /* @__PURE__ */ jsx("div", { className: "h-1.5 w-10 rounded-full bg-border-strong" })
 		}) : null, children]
-	})] });
+	})] })] });
 }
 function DrawerHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "drawer-header",
-		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-left", className),
+		className: cn("flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-start", className),
 		...props
 	});
 }

package/dist/components/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../../src/components/drawer/drawer.tsx"],"sourcesContent":["\"use client\";\n\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A bottom sheet that can be dismissed by dragging it down.\n *\n * Drag is a pointer-only affordance. Escape, the overlay and the close button\n * are the accessible equivalents and are always present, so keyboard and screen\n * reader users are never dependent on the gesture.\n *\n * Deliberately bottom-anchored only. A drawer that enters from the side with no\n * gesture is a Sheet, and having two components that differ by nothing but a\n * name is worse than having one. Snap points are not supported in this version.\n */\n\ninterface DrawerContextValue {\n  close: () => void;\n}\n\nconst DrawerContext = createContext<DrawerContextValue | null>(null);\n\nfunction useDrawerContext(component: string): DrawerContextValue {\n  const context = useContext(DrawerContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Drawer>.`);\n  }\n  return context;\n}\n\nexport interface DrawerProps extends Omit<\n  ComponentPropsWithRef<typeof DrawerPrimitive.Root>,\n  \"onOpenChange\"\n> {\n  /**\n   * Redeclared as a property rather than inherited as a method signature. The\n   * inherited shorthand reads as a method, which makes destructuring it look\n   * like an unbound `this` hazard to static analysis; a plain function property\n   * says what this actually is.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function Drawer({ open, defaultOpen, onOpenChange, children, ...props }: DrawerProps) {\n  // State is owned here (while still supporting the controlled form) because\n  // dismissing by drag has to close the drawer, and the primitive exposes no\n  // imperative close.\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n  const isControlled = open !== undefined;\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const contextValue = useMemo<DrawerContextValue>(\n    () => ({ close: () => setOpen(false) }),\n    [setOpen],\n  );\n\n  return (\n    <DrawerPrimitive.Root open={isOpen} onOpenChange={setOpen} {...props}>\n      <DrawerContext.Provider value={contextValue}>{children}</DrawerContext.Provider>\n    </DrawerPrimitive.Root>\n  );\n}\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nexport function DrawerOverlay({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Fraction of the drawer's height past which release dismisses it. */\nconst DISMISS_DISTANCE_RATIO = 0.25;\n/** Downward speed (px/ms) that dismisses a short but deliberate flick. */\nconst DISMISS_VELOCITY = 0.5;\n/**\n * Travel below which nothing dismisses, however fast.\n *\n * A tap on the handle registers as a few pixels of movement over a couple of\n * milliseconds, which is an enormous velocity. Without a floor, touching the\n * drawer would close it.\n */\nconst MIN_FLICK_DISTANCE = 24;\n\nexport interface DrawerContentProps extends ComponentPropsWithRef<\n  typeof DrawerPrimitive.Content\n> {\n  /** Shows the grab handle. Turn off only if the drawer cannot be dragged. */\n  showHandle?: boolean;\n}\n\nexport function DrawerContent({\n  className,\n  children,\n  showHandle = true,\n  ...props\n}: DrawerContentProps) {\n  const { close } = useDrawerContext(\"DrawerContent\");\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const gesture = useRef<{ startY: number; startTime: number } | null>(null);\n  const [offset, setOffset] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {\n    if (event.button !== 0) return;\n    gesture.current = { startY: event.clientY, startTime: event.timeStamp };\n    setIsDragging(true);\n    event.currentTarget.setPointerCapture(event.pointerId);\n  };\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLElement>) => {\n    if (!gesture.current) return;\n    // Downward only: dragging up must not detach the drawer from the edge.\n    setOffset(Math.max(0, event.clientY - gesture.current.startY));\n  };\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLElement>) => {\n    if (!gesture.current) return;\n\n    const distance = Math.max(0, event.clientY - gesture.current.startY);\n    const elapsed = Math.max(1, event.timeStamp - gesture.current.startTime);\n    const velocity = distance / elapsed;\n    const height = contentRef.current?.getBoundingClientRect().height ?? 0;\n\n    gesture.current = null;\n    setIsDragging(false);\n    setOffset(0);\n\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n\n    const draggedPastThreshold = height > 0 && distance > height * DISMISS_DISTANCE_RATIO;\n    const flicked = distance >= MIN_FLICK_DISTANCE && velocity > DISMISS_VELOCITY;\n\n    if (draggedPastThreshold || flicked) {\n      close();\n    }\n  };\n\n  const dragHandlers = {\n    onPointerDown: handlePointerDown,\n    onPointerMove: handlePointerMove,\n    onPointerUp: handlePointerUp,\n    onPointerCancel: handlePointerUp,\n  };\n\n  return (\n    <DrawerPortal>\n      <DrawerOverlay />\n      <DrawerPrimitive.Content\n        ref={contentRef}\n        data-slot=\"drawer-content\"\n        data-dragging={isDragging || undefined}\n        style={offset > 0 ? { transform: `translate3d(0, ${String(offset)}px, 0)` } : undefined}\n        className={cn(\n          \"fixed inset-x-0 bottom-0 z-[var(--z-drawer)] flex max-h-[92svh] flex-col\",\n          \"rounded-t-2xl border-t border-border bg-card text-card-foreground shadow-xl\",\n          \"[--slide-y:100%]\",\n          \"data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in\",\n          // While a finger is down the transform is driven directly; afterwards\n          // it springs back. Suppressing the entry animation mid-drag stops the\n          // two from fighting over the same property.\n          \"data-[dragging]:animate-none data-[dragging]:transition-none\",\n          \"transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n          className,\n        )}\n        {...props}\n      >\n        {showHandle ? (\n          <div\n            data-slot=\"drawer-handle\"\n            aria-hidden=\"true\"\n            className=\"flex shrink-0 cursor-grab touch-none justify-center pt-3 pb-1 active:cursor-grabbing\"\n            {...dragHandlers}\n          >\n            <div className=\"h-1.5 w-10 rounded-full bg-border-strong\" />\n          </div>\n        ) : null}\n        {children}\n      </DrawerPrimitive.Content>\n    </DrawerPortal>\n  );\n}\n\nexport function DrawerHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-left\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBody({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-body\"\n      className={cn(\"overflow-y-auto overscroll-contain px-6 py-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"flex shrink-0 flex-col gap-2 px-6 pt-2 pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Close control for the drawer footer, styled as a full-width secondary action. */\nexport function DrawerCancel({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Close>) {\n  return (\n    <DrawerPrimitive.Close\n      data-slot=\"drawer-cancel\"\n      className={cn(\n        \"inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-5 text-sm font-medium\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"drawer.js","names":["DrawerPrimitive"],"sources":["../../../src/components/drawer/drawer.tsx"],"sourcesContent":["\"use client\";\n\n// Motion from SmoothUI Drawer (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { Dialog as DrawerPrimitive } from \"radix-ui\";\nimport {\n  createContext,\n  useCallback,\n  useContext,\n  useMemo,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type PointerEvent as ReactPointerEvent,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/**\n * A bottom sheet that can be dismissed by dragging it down.\n *\n * Drag is a pointer-only affordance. Escape, the overlay and the close button\n * are the accessible equivalents and are always present, so keyboard and screen\n * reader users are never dependent on the gesture.\n *\n * Deliberately bottom-anchored only. A drawer that enters from the side with no\n * gesture is a Sheet, and having two components that differ by nothing but a\n * name is worse than having one. Snap points are not supported in this version.\n */\n\ninterface DrawerContextValue {\n  close: () => void;\n}\n\nconst DrawerContext = createContext<DrawerContextValue | null>(null);\n\nfunction useDrawerContext(component: string): DrawerContextValue {\n  const context = useContext(DrawerContext);\n  if (!context) {\n    throw new Error(`${component} must be rendered inside <Drawer>.`);\n  }\n  return context;\n}\n\nexport interface DrawerProps extends Omit<\n  ComponentPropsWithRef<typeof DrawerPrimitive.Root>,\n  \"onOpenChange\"\n> {\n  /**\n   * Redeclared as a property rather than inherited as a method signature. The\n   * inherited shorthand reads as a method, which makes destructuring it look\n   * like an unbound `this` hazard to static analysis; a plain function property\n   * says what this actually is.\n   */\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport function Drawer({ open, defaultOpen, onOpenChange, children, ...props }: DrawerProps) {\n  // State is owned here (while still supporting the controlled form) because\n  // dismissing by drag has to close the drawer, and the primitive exposes no\n  // imperative close.\n  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen ?? false);\n  const isControlled = open !== undefined;\n  const isOpen = isControlled ? open : uncontrolledOpen;\n\n  const setOpen = useCallback(\n    (next: boolean) => {\n      if (!isControlled) setUncontrolledOpen(next);\n      onOpenChange?.(next);\n    },\n    [isControlled, onOpenChange],\n  );\n\n  const contextValue = useMemo<DrawerContextValue>(\n    () => ({ close: () => setOpen(false) }),\n    [setOpen],\n  );\n\n  return (\n    <DrawerPrimitive.Root open={isOpen} onOpenChange={setOpen} {...props}>\n      <DrawerContext.Provider value={contextValue}>{children}</DrawerContext.Provider>\n    </DrawerPrimitive.Root>\n  );\n}\n\nexport const DrawerTrigger = DrawerPrimitive.Trigger;\nexport const DrawerPortal = DrawerPrimitive.Portal;\nexport const DrawerClose = DrawerPrimitive.Close;\n\nexport function DrawerOverlay({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Overlay>) {\n  return (\n    <DrawerPrimitive.Overlay\n      data-slot=\"drawer-overlay\"\n      className={cn(\n        \"fixed inset-0 z-[var(--z-overlay)] bg-overlay\",\n        \"data-[state=closed]:animate-overlay-out data-[state=open]:animate-overlay-in\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n/** Fraction of the drawer's height past which release dismisses it. */\nconst DISMISS_DISTANCE_RATIO = 0.25;\n/** Downward speed (px/ms) that dismisses a short but deliberate flick. */\nconst DISMISS_VELOCITY = 0.5;\n/**\n * Travel below which nothing dismisses, however fast.\n *\n * A tap on the handle registers as a few pixels of movement over a couple of\n * milliseconds, which is an enormous velocity. Without a floor, touching the\n * drawer would close it.\n */\nconst MIN_FLICK_DISTANCE = 24;\n\nconst PREFIX = \"dowel-drawer\";\n\n/** Sections start once the panel is mostly up, then follow 50ms apart. */\nconst STAGGER_BASE_MS = 120;\nconst STAGGER_STEP_MS = 50;\nconst STAGGERED = 6;\n\nconst SPRING_CHILD = `[data-slot=drawer-content][data-animation=spring][data-state=open]>:not([data-slot=drawer-handle])`;\n\nconst delay = (index: number) =>\n  `calc(${String(STAGGER_BASE_MS + index * STAGGER_STEP_MS)}ms * var(--motion-scale))`;\n\nconst STYLES = `\n@keyframes ${PREFIX}-section-in{from{opacity:0;transform:translateY(6px)}}\n${SPRING_CHILD}{animation:${PREFIX}-section-in calc(250ms * var(--motion-scale)) var(--ease-out-quint) both;animation-delay:${delay(0)}}\n${Array.from(\n  { length: STAGGERED - 1 },\n  (_, i) => `${SPRING_CHILD}:nth-child(${String(i + 2)}){animation-delay:${delay(i + 1)}}`,\n).join(\"\\n\")}\n${SPRING_CHILD}:nth-child(n+${String(STAGGERED + 1)}){animation-delay:${delay(STAGGERED)}}\n`;\n\nexport interface DrawerContentProps extends ComponentPropsWithRef<\n  typeof DrawerPrimitive.Content\n> {\n  /** Shows the grab handle. Turn off only if the drawer cannot be dragged. */\n  showHandle?: boolean;\n  /**\n   * How the content arrives. `default` slides up as one piece. `spring` slides\n   * the panel the same way, then brings its sections — header, body, footer —\n   * in one after another. The panel itself never overshoots, because a bottom\n   * sheet that bounced would lift off the edge it is attached to. Stops under\n   * reduced motion.\n   */\n  animation?: \"default\" | \"spring\";\n}\n\nexport function DrawerContent({\n  className,\n  children,\n  showHandle = true,\n  animation = \"default\",\n  ...props\n}: DrawerContentProps) {\n  const spring = animation === \"spring\";\n  const { close } = useDrawerContext(\"DrawerContent\");\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const gesture = useRef<{ startY: number; startTime: number } | null>(null);\n  const [offset, setOffset] = useState(0);\n  const [isDragging, setIsDragging] = useState(false);\n\n  const handlePointerDown = (event: ReactPointerEvent<HTMLElement>) => {\n    if (event.button !== 0) return;\n    gesture.current = { startY: event.clientY, startTime: event.timeStamp };\n    setIsDragging(true);\n    event.currentTarget.setPointerCapture(event.pointerId);\n  };\n\n  const handlePointerMove = (event: ReactPointerEvent<HTMLElement>) => {\n    if (!gesture.current) return;\n    // Downward only: dragging up must not detach the drawer from the edge.\n    setOffset(Math.max(0, event.clientY - gesture.current.startY));\n  };\n\n  const handlePointerUp = (event: ReactPointerEvent<HTMLElement>) => {\n    if (!gesture.current) return;\n\n    const distance = Math.max(0, event.clientY - gesture.current.startY);\n    const elapsed = Math.max(1, event.timeStamp - gesture.current.startTime);\n    const velocity = distance / elapsed;\n    const height = contentRef.current?.getBoundingClientRect().height ?? 0;\n\n    gesture.current = null;\n    setIsDragging(false);\n    setOffset(0);\n\n    if (event.currentTarget.hasPointerCapture(event.pointerId)) {\n      event.currentTarget.releasePointerCapture(event.pointerId);\n    }\n\n    const draggedPastThreshold = height > 0 && distance > height * DISMISS_DISTANCE_RATIO;\n    const flicked = distance >= MIN_FLICK_DISTANCE && velocity > DISMISS_VELOCITY;\n\n    if (draggedPastThreshold || flicked) {\n      close();\n    }\n  };\n\n  const dragHandlers = {\n    onPointerDown: handlePointerDown,\n    onPointerMove: handlePointerMove,\n    onPointerUp: handlePointerUp,\n    onPointerCancel: handlePointerUp,\n  };\n\n  return (\n    <>\n      {spring ? (\n        <style href={PREFIX} precedence=\"dowel\">\n          {STYLES}\n        </style>\n      ) : null}\n      <DrawerPortal>\n        <DrawerOverlay />\n        <DrawerPrimitive.Content\n          ref={contentRef}\n          data-slot=\"drawer-content\"\n          data-dragging={isDragging || undefined}\n          data-animation={spring ? \"spring\" : undefined}\n          style={\n            offset > 0 ? { transform: `translate3d(0, ${String(offset)}px, 0)` } : undefined\n          }\n          className={cn(\n            \"fixed inset-x-0 bottom-0 z-[var(--z-drawer)] flex max-h-[92svh] flex-col\",\n            \"rounded-t-2xl border-t border-border bg-card text-card-foreground shadow-xl\",\n            \"[--slide-y:100%]\",\n            \"data-[state=closed]:animate-slide-out data-[state=open]:animate-slide-in\",\n            // While a finger is down the transform is driven directly; afterwards\n            // it springs back. Suppressing the entry animation mid-drag stops the\n            // two from fighting over the same property.\n            \"data-[dragging]:animate-none data-[dragging]:transition-none\",\n            \"transition-transform duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n            className,\n          )}\n          {...props}\n        >\n          {showHandle ? (\n            <div\n              data-slot=\"drawer-handle\"\n              aria-hidden=\"true\"\n              className=\"flex shrink-0 cursor-grab touch-none justify-center pt-3 pb-1 active:cursor-grabbing\"\n              {...dragHandlers}\n            >\n              <div className=\"h-1.5 w-10 rounded-full bg-border-strong\" />\n            </div>\n          ) : null}\n          {children}\n        </DrawerPrimitive.Content>\n      </DrawerPortal>\n    </>\n  );\n}\n\nexport function DrawerHeader({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-header\"\n      className={cn(\"flex shrink-0 flex-col gap-1.5 px-6 pt-4 pb-2 text-start\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerBody({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-body\"\n      className={cn(\"overflow-y-auto overscroll-contain px-6 py-2\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerFooter({ className, ...props }: ComponentPropsWithRef<\"div\">) {\n  return (\n    <div\n      data-slot=\"drawer-footer\"\n      className={cn(\"flex shrink-0 flex-col gap-2 px-6 pt-2 pb-6\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerTitle({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Title>) {\n  return (\n    <DrawerPrimitive.Title\n      data-slot=\"drawer-title\"\n      className={cn(\"text-lg leading-tight font-semibold tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nexport function DrawerDescription({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Description>) {\n  return (\n    <DrawerPrimitive.Description\n      data-slot=\"drawer-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  );\n}\n\n/** Close control for the drawer footer, styled as a full-width secondary action. */\nexport function DrawerCancel({\n  className,\n  ...props\n}: ComponentPropsWithRef<typeof DrawerPrimitive.Close>) {\n  return (\n    <DrawerPrimitive.Close\n      data-slot=\"drawer-cancel\"\n      className={cn(\n        \"inline-flex h-10 items-center justify-center rounded-md border border-input bg-background px-5 text-sm font-medium\",\n        \"transition-colors duration-[var(--duration-fast)] hover:bg-accent hover:text-accent-foreground\",\n        focusRing,\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n"],"mappings":"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"}

package/dist/components/drawer/meta.js

@@ -9,7 +9,7 @@ const meta = defineMeta({
 	dependencies: ["radix-ui"],
 	registryDependencies: [],
 	files: ["drawer.tsx"],
-	a11y: "Drag is pointer-only and never the sole way out: Escape, the overlay and DrawerCancel all dismiss. The grab handle is aria-hidden because it duplicates those affordances. Always render a DrawerTitle."
+	a11y: "Drag is pointer-only and never the sole way out: Escape, the overlay and DrawerCancel all dismiss. The grab handle is aria-hidden because it duplicates those affordances. Always render a DrawerTitle. The optional section stagger stops under reduced motion."
 });
 //#endregion
 export { meta };

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

@@ -1 +1 @@
-{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/drawer/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"drawer\",\n  title: \"Drawer\",\n  description: \"A bottom sheet that can be dismissed by dragging it down.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"drawer.tsx\"],\n  a11y:\n    \"Drag is pointer-only and never the sole way out: Escape, the overlay and DrawerCancel all \" +\n    \"dismiss. The grab handle is aria-hidden because it duplicates those affordances. Always \" +\n    \"render a DrawerTitle.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAGJ,CAAC"}
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/drawer/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"drawer\",\n  title: \"Drawer\",\n  description: \"A bottom sheet that can be dismissed by dragging it down.\",\n  category: \"overlay\",\n  status: \"stable\",\n  dependencies: [\"radix-ui\"],\n  registryDependencies: [],\n  files: [\"drawer.tsx\"],\n  a11y:\n    \"Drag is pointer-only and never the sole way out: Escape, the overlay and DrawerCancel all \" +\n    \"dismiss. The grab handle is aria-hidden because it duplicates those affordances. Always \" +\n    \"render a DrawerTitle. The optional section stagger stops under reduced motion.\",\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aAAa;CACb,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,UAAU;CACzB,sBAAsB,CAAC;CACvB,OAAO,CAAC,YAAY;CACpB,MACE;AAGJ,CAAC"}

package/dist/components/dropdown-menu/dropdown-menu.d.ts

@@ -7,6 +7,11 @@ import { ComponentPropsWithRef } from "react";
  * Actions, not navigation and not form state: a menu item does something. For a
  * list of links use a nav, and for a value the user picks from use Select
  * (Phase 3) — the roles differ and assistive technology treats them differently.
+ *
+ * Opens with the same motion as ContextMenu, so the two menus feel like one
+ * system: the surface pops from its anchor with a slight overshoot and the items
+ * drop in with a 20ms stagger. Both are decoration and stop under reduced
+ * motion; closing keeps the shared quick float-out.
  */
 declare const DropdownMenu$1: import("react").FC<DropdownMenu.DropdownMenuProps>;
 declare const DropdownMenuTrigger: import("react").ForwardRefExoticComponent<DropdownMenu.DropdownMenuTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/dist/components/dropdown-menu/dropdown-menu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dropdown-menu.d.ts","names":[],"sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"mappings":";;;;;;;;;;cAca,gCAAY,GAAA,aAAA;cACZ,qCAAmB,0BAAA,aAAA,2CAAA,cAAA;cACnB,mCAAiB,0BAAA,aAAA,yCAAA,cAAA;cACjB,oCAAkB,GAAA,aAAA;cAClB,iCAAe,GAAA,aAAA;cACf,wCAAsB,0BAAA,aAAA,8CAAA,cAAA;KAqBvB,2BAA2B,6BAC9B,aAAsB;iBAGf,sBACd,WACA,eACG,SACF,2CAAwB,IAAA;UAaV,8BAA8B,6BACtC,aAAsB;;EAG7B;;EAEA;;iBAGc,mBACd,WACA,SACA,UACG,SACF,wCAAqB,IAAA;iBAyCR,2BACd,WACA,aACG,SACF,6BAA6B,aAAsB,gCAAa,IAAA;iBAanD,wBACd,WACA,aACG,SACF,6BAA6B,aAAsB,6BAAU,IAAA;UAa/C,+BAA+B,6BACvC,aAAsB;EAE7B;;iBAGc,oBAAoB,WAAW,UAAU,SAAS,yCAAsB,IAAA;iBAcxE,wBACd,cACG,SACF,6BAA6B,aAAsB,6BAAU,IAAA;;;iBAYhD,uBAAuB,cAAc,SAAS,gDAA6B,IAAA;UAW1E,oCAAoC,6BAC5C,aAAsB;EAE7B;;iBAGc,yBACd,WACA,OACA,aACG,SACF,8CAA2B,IAAA;iBAqBd,yBACd,cACG,SACF,6BAA6B,aAAsB,8BAAW,IAAA"}
+{"version":3,"file":"dropdown-menu.d.ts","names":[],"sources":["../../../src/components/dropdown-menu/dropdown-menu.tsx"],"mappings":";;;;;;;;;;;;;;;cAqBa,gCAAY,GAAA,aAAA;cACZ,qCAAmB,0BAAA,aAAA,2CAAA,cAAA;cACnB,mCAAiB,0BAAA,aAAA,yCAAA,cAAA;cACjB,oCAAkB,GAAA,aAAA;cAClB,iCAAe,GAAA,aAAA;cACf,wCAAsB,0BAAA,aAAA,8CAAA,cAAA;KAiDvB,2BAA2B,6BAC9B,aAAsB;iBAGf,sBACd,WACA,eACG,SACF,2CAAwB,IAAA;UAgBV,8BAA8B,6BACtC,aAAsB;;EAG7B;;EAEA;;iBAGc,mBACd,WACA,SACA,UACG,SACF,wCAAqB,IAAA;iBAyCR,2BACd,WACA,aACG,SACF,6BAA6B,aAAsB,gCAAa,IAAA;iBAanD,wBACd,WACA,aACG,SACF,6BAA6B,aAAsB,6BAAU,IAAA;UAa/C,+BAA+B,6BACvC,aAAsB;EAE7B;;iBAGc,oBAAoB,WAAW,UAAU,SAAS,yCAAsB,IAAA;iBAcxE,wBACd,cACG,SACF,6BAA6B,aAAsB,6BAAU,IAAA;;;iBAYhD,uBAAuB,cAAc,SAAS,gDAA6B,IAAA;UAW1E,oCAAoC,6BAC5C,aAAsB;EAE7B;;iBAGc,yBACd,WACA,OACA,aACG,SACF,8CAA2B,IAAA;iBA0Bd,yBACd,cACG,SACF,6BAA6B,aAAsB,8BAAW,IAAA"}