@dowel-ui/react 0.5.0 → 0.8.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/stepper/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"stepper\",\n  title: \"Stepper\",\n  description:\n    \"A multi-step wizard's progress — connectors fill, finished steps draw a check, and each step's content slides in from the side it comes from.\",\n  category: \"navigation\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\"],\n  registryDependencies: [],\n  files: [\"stepper.tsx\"],\n  a11y:\n    'An ordered list named \"Progress\", with aria-current=\"step\" on the current step and finished steps ' +\n    'named with a visually hidden \"completed\". Steps are plain list items unless `navigation` makes them ' +\n    \"choosable; then they are buttons sharing one tab stop, moved between with the arrow keys (mirrored in \" +\n    \"RTL, Up/Down when vertical), Home and End, and chosen with Enter or Space. The content area is a group \" +\n    \"labelled by the current step. Horizontal labels collapse to screen-reader-only text on narrow screens. \" +\n    \"All motion is CSS decoration 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,0BAA0B;CACzC,sBAAsB,CAAC;CACvB,OAAO,CAAC,aAAa;CACrB,MACE;AAMJ,CAAC"}

package/dist/components/stepper/stepper.d.ts

@@ -0,0 +1,45 @@
+import { VariantProps } from "class-variance-authority";
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/stepper/stepper.d.ts
+declare const stepperVariants: (props?: ({
+  orientation?: "horizontal" | "vertical" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/** The round marker for a step, by its state. */
+declare const stepperIndicatorVariants: (props?: ({
+  state?: "current" | "complete" | "upcoming" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type StepperStepState = "complete" | "current" | "upcoming";
+interface StepperStep {
+  label: ReactNode;
+  description?: ReactNode;
+  /** Shown in the marker instead of the step number, until the step is complete. */
+  icon?: ReactNode;
+  /** Rendered below the list while this step is current. */
+  content?: ReactNode;
+  disabled?: boolean;
+}
+interface StepperProps extends Omit<ComponentPropsWithRef<"div">, "children">, VariantProps<typeof stepperVariants> {
+  steps: StepperStep[];
+  /** Controlled current step, zero-based. */
+  step?: number;
+  /** Initial step when uncontrolled. */
+  defaultStep?: number;
+  onStepChange?: (step: number) => void;
+  /**
+   * Which steps can be chosen directly.
+   *
+   * - `none` (default): an indicator only; the wizard's own buttons move it.
+   * - `completed`: finished steps can be revisited, as most wizards allow.
+   * - `all`: any step, as in the source's `allowClickNavigation`.
+   */
+  navigation?: "none" | "completed" | "all";
+  /** Names the list. */
+  label?: string;
+  /** Appended to a finished step's name for assistive technology. */
+  completedLabel?: string;
+}
+/** A multi-step wizard's progress, with optional per-step content. */
+declare function Stepper({ className, steps, step: stepProp, defaultStep, onStepChange, orientation, navigation, label, completedLabel, ...props }: StepperProps): import("react").JSX.Element;
+//#endregion
+export { Stepper, StepperProps, StepperStep, StepperStepState, stepperIndicatorVariants, stepperVariants };
+//# sourceMappingURL=stepper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.d.ts","names":[],"sources":["../../../src/components/stepper/stepper.tsx"],"mappings":";;;cAgDM,kBAAe;;6CAUnB;;cAGI,2BAAwB;;6CAiB7B;KAEW;UAEK;EACf,OAAO;EACP,cAAc;;EAEd,OAAO;;EAEP,UAAU;EACV;;UAGe,qBACP,KAAK,2CAA2C,oBAAoB;EAC5E,OAAO;;EAEP;;EAEA;EACA,gBAAgB;;;;;;;;EAQhB;;EAEA;;EAEA;;;iBA6Bc,UACd,WACA,OACA,MAAM,UACN,aACA,cACA,aACA,YACA,OACA,mBACG,SACF,+BAAY,IAAA"}

package/dist/components/stepper/stepper.js

@@ -0,0 +1,207 @@
+"use client";
+import { focusRing } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { useId, useRef, useState } from "react";
+//#region src/components/stepper/stepper.tsx
+const PREFIX = "dowel-stepper";
+const STYLES = `
+@keyframes ${PREFIX}-pulse{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}
+@keyframes ${PREFIX}-enter{from{opacity:0;transform:translateX(calc(var(--${PREFIX}-from) * var(--${PREFIX}-flip, 1)))}}
+[data-slot=stepper-pulse]{animation:${PREFIX}-pulse calc(600ms * var(--motion-scale)) var(--ease-out-quint) both}
+[data-slot=stepper-panel]{animation:${PREFIX}-enter calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}
+[data-slot=stepper-panel]:dir(rtl){--${PREFIX}-flip:-1}
+[data-slot=stepper-connector-fill]{transform-origin:left}
+[data-slot=stepper-connector-fill]:dir(rtl){transform-origin:right}
+[data-orientation=vertical] [data-slot=stepper-connector-fill]{transform-origin:top}
+`;
+const stepperVariants = cva("flex", {
+	variants: { orientation: {
+		horizontal: "flex-row items-start",
+		vertical: "flex-col"
+	} },
+	defaultVariants: { orientation: "horizontal" }
+});
+/** The round marker for a step, by its state. */
+const stepperIndicatorVariants = cva(cn("relative grid size-10 shrink-0 place-items-center rounded-full border-2 text-sm font-medium", "transition-[background-color,border-color,color,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]"), {
+	variants: { state: {
+		complete: "border-primary bg-primary text-primary-foreground",
+		current: "border-primary bg-primary text-primary-foreground",
+		upcoming: "border-border bg-background text-muted-foreground"
+	} },
+	defaultVariants: { state: "upcoming" }
+});
+function isRightToLeft(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+function Check() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 24",
+		fill: "none",
+		"aria-hidden": "true",
+		className: "col-start-1 row-start-1 size-5 group-data-[state=current]/step:opacity-0 group-data-[state=upcoming]/step:opacity-0",
+		children: /* @__PURE__ */ jsx("path", {
+			d: "M5 13l4 4L19 7",
+			stroke: "currentColor",
+			strokeWidth: "2.5",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			pathLength: 1,
+			className: "transition-[stroke-dashoffset] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)] [stroke-dasharray:1] group-data-[state=current]/step:[stroke-dashoffset:1] group-data-[state=upcoming]/step:[stroke-dashoffset:1]"
+		})
+	});
+}
+/** A multi-step wizard's progress, with optional per-step content. */
+function Stepper({ className, steps, step: stepProp, defaultStep = 0, onStepChange, orientation = "horizontal", navigation = "none", label = "Progress", completedLabel = "completed", ...props }) {
+	const id = useId();
+	const [uncontrolled, setUncontrolled] = useState(defaultStep);
+	const current = Math.max(0, Math.min(stepProp ?? uncontrolled, steps.length - 1));
+	const [shown, setShown] = useState(current);
+	const [direction, setDirection] = useState(1);
+	const [focusIndex, setFocusIndex] = useState(null);
+	const buttons = useRef([]);
+	const vertical = orientation === "vertical";
+	if (shown !== current) {
+		setDirection(current > shown ? 1 : -1);
+		setShown(current);
+	}
+	const navigable = (index) => !steps[index]?.disabled && (navigation === "all" || navigation === "completed" && index <= current);
+	function go(index) {
+		if (index === current || !navigable(index)) return;
+		if (stepProp === void 0) setUncontrolled(index);
+		onStepChange?.(index);
+	}
+	const stops = steps.map((_, index) => index).filter(navigable);
+	const tabStop = stops.includes(focusIndex ?? -1) ? focusIndex : stops.includes(current) ? current : stops[stops.length - 1] ?? null;
+	function handleKeyDown(event) {
+		if (stops.length === 0 || tabStop === null) return;
+		const rtl = isRightToLeft(event.currentTarget);
+		const nextKey = vertical ? "ArrowDown" : rtl ? "ArrowLeft" : "ArrowRight";
+		const previousKey = vertical ? "ArrowUp" : rtl ? "ArrowRight" : "ArrowLeft";
+		const at = stops.indexOf(tabStop);
+		const target = {
+			[nextKey]: stops[Math.min(at + 1, stops.length - 1)],
+			[previousKey]: stops[Math.max(at - 1, 0)],
+			Home: stops[0],
+			End: stops[stops.length - 1]
+		}[event.key];
+		if (target === void 0) return;
+		event.preventDefault();
+		setFocusIndex(target);
+		buttons.current[target]?.focus();
+	}
+	const content = steps[current]?.content;
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "stepper",
+		"data-orientation": orientation,
+		className: cn("flex w-full gap-6", vertical ? "flex-row" : "flex-col", className),
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("style", {
+				href: PREFIX,
+				precedence: "dowel",
+				children: STYLES
+			}),
+			/* @__PURE__ */ jsx("ol", {
+				"aria-label": label,
+				"data-slot": "stepper-list",
+				className: cn(stepperVariants({ orientation }), vertical ? "shrink-0" : "w-full"),
+				children: steps.map((step, index) => {
+					const state = index < current ? "complete" : index === current ? "current" : "upcoming";
+					const last = index === steps.length - 1;
+					const base = `${id}-${String(index)}`;
+					const inner = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+						"aria-hidden": "true",
+						"data-slot": "stepper-indicator",
+						className: stepperIndicatorVariants({ state }),
+						children: [state === "current" ? /* @__PURE__ */ jsx("span", {
+							"data-slot": "stepper-pulse",
+							className: "absolute -inset-0.5 rounded-full border-2 border-primary"
+						}, current) : null, /* @__PURE__ */ jsxs("span", {
+							className: "grid place-items-center",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "col-start-1 row-start-1 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)] group-data-[state=complete]/step:scale-50 group-data-[state=complete]/step:opacity-0 [&_svg]:size-4",
+								children: step.icon ?? index + 1
+							}), /* @__PURE__ */ jsx(Check, {})]
+						})]
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cn("grid gap-0.5 text-start", !vertical && "sr-only sm:not-sr-only"),
+						children: [
+							/* @__PURE__ */ jsx("span", {
+								id: `${base}-label`,
+								"data-slot": "stepper-label",
+								className: "text-sm font-medium text-muted-foreground transition-colors duration-[var(--duration-normal)] group-data-[state=current]/step:text-foreground",
+								children: step.label
+							}),
+							state === "complete" ? /* @__PURE__ */ jsx("span", {
+								id: `${base}-status`,
+								className: "sr-only",
+								children: completedLabel
+							}) : null,
+							step.description != null ? /* @__PURE__ */ jsx("span", {
+								id: `${base}-description`,
+								"data-slot": "stepper-description",
+								className: "text-xs text-muted-foreground",
+								children: step.description
+							}) : null
+						]
+					})] });
+					const shared = {
+						"data-slot": "stepper-trigger",
+						"aria-current": state === "current" ? "step" : void 0,
+						className: cn("flex items-center gap-3 rounded-md", vertical && "items-start")
+					};
+					return /* @__PURE__ */ jsxs("li", {
+						"data-slot": "stepper-item",
+						"data-state": state,
+						className: cn("group/step relative flex", vertical ? "flex-col pb-6 last:pb-0" : "items-center", !vertical && !last && "flex-1"),
+						children: [navigable(index) ? /* @__PURE__ */ jsx("button", {
+							...shared,
+							ref: (node) => {
+								buttons.current[index] = node;
+							},
+							type: "button",
+							tabIndex: tabStop === index ? 0 : -1,
+							"aria-labelledby": state === "complete" ? `${base}-label ${base}-status` : `${base}-label`,
+							"aria-describedby": step.description != null ? `${base}-description` : void 0,
+							className: cn(shared.className, "cursor-pointer [&:active_[data-slot=stepper-indicator]]:scale-90", focusRing),
+							onFocus: () => {
+								setFocusIndex(index);
+							},
+							onKeyDown: handleKeyDown,
+							onClick: () => {
+								go(index);
+							},
+							children: inner
+						}) : /* @__PURE__ */ jsx("div", {
+							...shared,
+							"data-disabled": step.disabled ? "" : void 0,
+							children: inner
+						}), !last ? /* @__PURE__ */ jsx("span", {
+							"aria-hidden": "true",
+							"data-slot": "stepper-connector",
+							className: cn("overflow-hidden rounded-full bg-muted", vertical ? "absolute start-5 top-12 bottom-2 w-0.5 -translate-x-1/2 rtl:translate-x-1/2" : "mx-2 h-0.5 flex-1"),
+							children: /* @__PURE__ */ jsx("span", {
+								"data-slot": "stepper-connector-fill",
+								className: cn("block size-full bg-primary transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]", state !== "complete" && (vertical ? "scale-y-0" : "scale-x-0"))
+							})
+						}) : null]
+					}, index);
+				})
+			}),
+			content != null ? /* @__PURE__ */ jsx("div", {
+				role: "group",
+				"aria-labelledby": `${id}-${String(current)}-label`,
+				"data-slot": "stepper-panel",
+				style: { [`--${PREFIX}-from`]: `${String(direction * 20)}px` },
+				className: "min-w-0 flex-1",
+				children: content
+			}, current) : null
+		]
+	});
+}
+//#endregion
+export { Stepper, stepperIndicatorVariants, stepperVariants };
+
+//# sourceMappingURL=stepper.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"stepper.js","names":[],"sources":["../../../src/components/stepper/stepper.tsx"],"sourcesContent":["\"use client\";\n\n// Ported from SmoothUI Animated Stepper (MIT, © 2024 Eduardo Calvo). See THIRD_PARTY_NOTICES.md.\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport {\n  useId,\n  useRef,\n  useState,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactNode,\n} from \"react\";\n\nimport { focusRing } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * A wizard's progress as what it is: an ordered list of steps, the current one\n * marked with aria-current=\"step\". Steps are only buttons when there is\n * somewhere to go — by default a stepper is an indicator the wizard drives,\n * and a row of buttons that do nothing is worse than none.\n *\n * When steps are navigable they share one tab stop: arrow keys (mirrored in\n * RTL, vertical in a vertical stepper), Home and End move focus between them,\n * and Enter or Space goes to the focused step. Focus and selection are kept\n * apart, as in a toolbar, so walking the list does not throw away the page.\n *\n * The source animated with `motion`; everything here is a transition or a\n * keyframe: the connector fills, the number crossfades into a check that\n * draws itself, the current step pulses once, and the content slides in from\n * the side it is coming from. All of it is decoration and stops under reduced\n * motion.\n */\n\nconst PREFIX = \"dowel-stepper\";\n\nconst STYLES = `\n@keyframes ${PREFIX}-pulse{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.6)}}\n@keyframes ${PREFIX}-enter{from{opacity:0;transform:translateX(calc(var(--${PREFIX}-from) * var(--${PREFIX}-flip, 1)))}}\n[data-slot=stepper-pulse]{animation:${PREFIX}-pulse calc(600ms * var(--motion-scale)) var(--ease-out-quint) both}\n[data-slot=stepper-panel]{animation:${PREFIX}-enter calc(250ms * var(--motion-scale)) var(--ease-out-quint) both}\n[data-slot=stepper-panel]:dir(rtl){--${PREFIX}-flip:-1}\n[data-slot=stepper-connector-fill]{transform-origin:left}\n[data-slot=stepper-connector-fill]:dir(rtl){transform-origin:right}\n[data-orientation=vertical] [data-slot=stepper-connector-fill]{transform-origin:top}\n`;\n\nconst stepperVariants = cva(\"flex\", {\n  variants: {\n    orientation: {\n      horizontal: \"flex-row items-start\",\n      vertical: \"flex-col\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"horizontal\",\n  },\n});\n\n/** The round marker for a step, by its state. */\nconst stepperIndicatorVariants = cva(\n  cn(\n    \"relative grid size-10 shrink-0 place-items-center rounded-full border-2 text-sm font-medium\",\n    \"transition-[background-color,border-color,color,scale] duration-[var(--duration-normal)] ease-[var(--ease-out-quint)]\",\n  ),\n  {\n    variants: {\n      state: {\n        complete: \"border-primary bg-primary text-primary-foreground\",\n        current: \"border-primary bg-primary text-primary-foreground\",\n        upcoming: \"border-border bg-background text-muted-foreground\",\n      },\n    },\n    defaultVariants: {\n      state: \"upcoming\",\n    },\n  },\n);\n\nexport type StepperStepState = \"complete\" | \"current\" | \"upcoming\";\n\nexport interface StepperStep {\n  label: ReactNode;\n  description?: ReactNode;\n  /** Shown in the marker instead of the step number, until the step is complete. */\n  icon?: ReactNode;\n  /** Rendered below the list while this step is current. */\n  content?: ReactNode;\n  disabled?: boolean;\n}\n\nexport interface StepperProps\n  extends Omit<ComponentPropsWithRef<\"div\">, \"children\">, VariantProps<typeof stepperVariants> {\n  steps: StepperStep[];\n  /** Controlled current step, zero-based. */\n  step?: number;\n  /** Initial step when uncontrolled. */\n  defaultStep?: number;\n  onStepChange?: (step: number) => void;\n  /**\n   * Which steps can be chosen directly.\n   *\n   * - `none` (default): an indicator only; the wizard's own buttons move it.\n   * - `completed`: finished steps can be revisited, as most wizards allow.\n   * - `all`: any step, as in the source's `allowClickNavigation`.\n   */\n  navigation?: \"none\" | \"completed\" | \"all\";\n  /** Names the list. */\n  label?: string;\n  /** Appended to a finished step's name for assistive technology. */\n  completedLabel?: string;\n}\n\nfunction isRightToLeft(element: Element): boolean {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\nfunction Check() {\n  return (\n    <svg\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      aria-hidden=\"true\"\n      className=\"col-start-1 row-start-1 size-5 group-data-[state=current]/step:opacity-0 group-data-[state=upcoming]/step:opacity-0\"\n    >\n      <path\n        d=\"M5 13l4 4L19 7\"\n        stroke=\"currentColor\"\n        strokeWidth=\"2.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        pathLength={1}\n        className=\"transition-[stroke-dashoffset] duration-[var(--duration-slow)] ease-[var(--ease-out-quint)] [stroke-dasharray:1] group-data-[state=current]/step:[stroke-dashoffset:1] group-data-[state=upcoming]/step:[stroke-dashoffset:1]\"\n      />\n    </svg>\n  );\n}\n\n/** A multi-step wizard's progress, with optional per-step content. */\nexport function Stepper({\n  className,\n  steps,\n  step: stepProp,\n  defaultStep = 0,\n  onStepChange,\n  orientation = \"horizontal\",\n  navigation = \"none\",\n  label = \"Progress\",\n  completedLabel = \"completed\",\n  ...props\n}: StepperProps) {\n  const id = useId();\n  const [uncontrolled, setUncontrolled] = useState(defaultStep);\n  const current = Math.max(0, Math.min(stepProp ?? uncontrolled, steps.length - 1));\n  const [shown, setShown] = useState(current);\n  const [direction, setDirection] = useState(1);\n  const [focusIndex, setFocusIndex] = useState<number | null>(null);\n  const buttons = useRef<(HTMLButtonElement | null)[]>([]);\n  const vertical = orientation === \"vertical\";\n\n  // Which way the content slides: forward comes in from the end side.\n  if (shown !== current) {\n    setDirection(current > shown ? 1 : -1);\n    setShown(current);\n  }\n\n  const navigable = (index: number) =>\n    !steps[index]?.disabled &&\n    (navigation === \"all\" || (navigation === \"completed\" && index <= current));\n\n  function go(index: number) {\n    if (index === current || !navigable(index)) return;\n    if (stepProp === undefined) setUncontrolled(index);\n    onStepChange?.(index);\n  }\n\n  const stops = steps.map((_, index) => index).filter(navigable);\n  const tabStop = stops.includes(focusIndex ?? -1)\n    ? focusIndex\n    : stops.includes(current)\n      ? current\n      : (stops[stops.length - 1] ?? null);\n\n  function handleKeyDown(event: KeyboardEvent<HTMLButtonElement>) {\n    if (stops.length === 0 || tabStop === null) return;\n    const rtl = isRightToLeft(event.currentTarget);\n    const nextKey = vertical ? \"ArrowDown\" : rtl ? \"ArrowLeft\" : \"ArrowRight\";\n    const previousKey = vertical ? \"ArrowUp\" : rtl ? \"ArrowRight\" : \"ArrowLeft\";\n    const at = stops.indexOf(tabStop);\n    const target = {\n      [nextKey]: stops[Math.min(at + 1, stops.length - 1)],\n      [previousKey]: stops[Math.max(at - 1, 0)],\n      Home: stops[0],\n      End: stops[stops.length - 1],\n    }[event.key];\n    if (target === undefined) return;\n    event.preventDefault();\n    setFocusIndex(target);\n    buttons.current[target]?.focus();\n  }\n\n  const content = steps[current]?.content;\n\n  return (\n    <div\n      data-slot=\"stepper\"\n      data-orientation={orientation}\n      className={cn(\"flex w-full gap-6\", vertical ? \"flex-row\" : \"flex-col\", className)}\n      {...props}\n    >\n      <style href={PREFIX} precedence=\"dowel\">\n        {STYLES}\n      </style>\n      <ol\n        aria-label={label}\n        data-slot=\"stepper-list\"\n        className={cn(stepperVariants({ orientation }), vertical ? \"shrink-0\" : \"w-full\")}\n      >\n        {steps.map((step, index) => {\n          const state: StepperStepState =\n            index < current ? \"complete\" : index === current ? \"current\" : \"upcoming\";\n          const last = index === steps.length - 1;\n          const base = `${id}-${String(index)}`;\n          const inner = (\n            <>\n              <span\n                aria-hidden=\"true\"\n                data-slot=\"stepper-indicator\"\n                className={stepperIndicatorVariants({ state })}\n              >\n                {state === \"current\" ? (\n                  <span\n                    key={current}\n                    data-slot=\"stepper-pulse\"\n                    className=\"absolute -inset-0.5 rounded-full border-2 border-primary\"\n                  />\n                ) : null}\n                <span className=\"grid place-items-center\">\n                  <span className=\"col-start-1 row-start-1 transition-[opacity,scale] duration-[var(--duration-normal)] ease-[var(--ease-overshoot)] group-data-[state=complete]/step:scale-50 group-data-[state=complete]/step:opacity-0 [&_svg]:size-4\">\n                    {step.icon ?? index + 1}\n                  </span>\n                  <Check />\n                </span>\n              </span>\n              <span\n                className={cn(\"grid gap-0.5 text-start\", !vertical && \"sr-only sm:not-sr-only\")}\n              >\n                <span\n                  id={`${base}-label`}\n                  data-slot=\"stepper-label\"\n                  className=\"text-sm font-medium text-muted-foreground transition-colors duration-[var(--duration-normal)] group-data-[state=current]/step:text-foreground\"\n                >\n                  {step.label}\n                </span>\n                {state === \"complete\" ? (\n                  <span id={`${base}-status`} className=\"sr-only\">\n                    {completedLabel}\n                  </span>\n                ) : null}\n                {step.description != null ? (\n                  <span\n                    id={`${base}-description`}\n                    data-slot=\"stepper-description\"\n                    className=\"text-xs text-muted-foreground\"\n                  >\n                    {step.description}\n                  </span>\n                ) : null}\n              </span>\n            </>\n          );\n          const shared = {\n            \"data-slot\": \"stepper-trigger\",\n            \"aria-current\": state === \"current\" ? (\"step\" as const) : undefined,\n            className: cn(\"flex items-center gap-3 rounded-md\", vertical && \"items-start\"),\n          };\n\n          return (\n            <li\n              key={index}\n              data-slot=\"stepper-item\"\n              data-state={state}\n              className={cn(\n                \"group/step relative flex\",\n                vertical ? \"flex-col pb-6 last:pb-0\" : \"items-center\",\n                !vertical && !last && \"flex-1\",\n              )}\n            >\n              {navigable(index) ? (\n                <button\n                  {...shared}\n                  ref={(node) => {\n                    buttons.current[index] = node;\n                  }}\n                  type=\"button\"\n                  tabIndex={tabStop === index ? 0 : -1}\n                  aria-labelledby={\n                    state === \"complete\" ? `${base}-label ${base}-status` : `${base}-label`\n                  }\n                  aria-describedby={\n                    step.description != null ? `${base}-description` : undefined\n                  }\n                  className={cn(\n                    shared.className,\n                    \"cursor-pointer [&:active_[data-slot=stepper-indicator]]:scale-90\",\n                    focusRing,\n                  )}\n                  onFocus={() => {\n                    setFocusIndex(index);\n                  }}\n                  onKeyDown={handleKeyDown}\n                  onClick={() => {\n                    go(index);\n                  }}\n                >\n                  {inner}\n                </button>\n              ) : (\n                <div {...shared} data-disabled={step.disabled ? \"\" : undefined}>\n                  {inner}\n                </div>\n              )}\n              {!last ? (\n                <span\n                  aria-hidden=\"true\"\n                  data-slot=\"stepper-connector\"\n                  className={cn(\n                    \"overflow-hidden rounded-full bg-muted\",\n                    vertical\n                      ? \"absolute start-5 top-12 bottom-2 w-0.5 -translate-x-1/2 rtl:translate-x-1/2\"\n                      : \"mx-2 h-0.5 flex-1\",\n                  )}\n                >\n                  <span\n                    data-slot=\"stepper-connector-fill\"\n                    className={cn(\n                      \"block size-full bg-primary transition-transform duration-[var(--duration-slow)] ease-[var(--ease-out-quint)]\",\n                      state !== \"complete\" && (vertical ? \"scale-y-0\" : \"scale-x-0\"),\n                    )}\n                  />\n                </span>\n              ) : null}\n            </li>\n          );\n        })}\n      </ol>\n      {content != null ? (\n        <div\n          key={current}\n          role=\"group\"\n          aria-labelledby={`${id}-${String(current)}-label`}\n          data-slot=\"stepper-panel\"\n          style={{ [`--${PREFIX}-from`]: `${String(direction * 20)}px` } as CSSProperties}\n          className=\"min-w-0 flex-1\"\n        >\n          {content}\n        </div>\n      ) : null}\n    </div>\n  );\n}\n\nexport { stepperIndicatorVariants, stepperVariants };\n"],"mappings":"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"}

package/dist/components/swipe-carousel/carousel-controls.js

@@ -0,0 +1,98 @@
+"use client";
+import { mirrorForDirection } from "../../lib/styles.js";
+import { cn } from "../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useState } from "react";
+//#region src/components/swipe-carousel/carousel-controls.tsx
+const REDUCED_MOTION = "(prefers-reduced-motion: reduce)";
+function prefersReducedMotion() {
+	return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia(REDUCED_MOTION).matches;
+}
+/** `index` wrapped into `[0, count)`. */
+function wrapIndex(index, count) {
+	if (count <= 0) return 0;
+	return (index % count + count) % count;
+}
+/** A controllable slide index that wraps or clamps. */
+function useCarouselIndex({ count, index: indexProp, defaultIndex = 0, onIndexChange, loop }) {
+	const [uncontrolled, setUncontrolled] = useState(defaultIndex);
+	const controlled = indexProp !== void 0;
+	const raw = controlled ? indexProp : uncontrolled;
+	const last = Math.max(0, count - 1);
+	const index = loop ? wrapIndex(raw, count) : Math.min(Math.max(raw, 0), last);
+	const goTo = useCallback((target) => {
+		const next = loop ? wrapIndex(target, count) : Math.min(Math.max(target, 0), last);
+		if (next === index) return;
+		if (!controlled) setUncontrolled(next);
+		onIndexChange?.(next);
+	}, [
+		loop,
+		count,
+		last,
+		index,
+		controlled,
+		onIndexChange
+	]);
+	return {
+		index,
+		goTo,
+		next: () => {
+			goTo(index + 1);
+		},
+		previous: () => {
+			goTo(index - 1);
+		},
+		canNext: count > 1 && (loop || index < last),
+		canPrevious: count > 1 && (loop || index > 0)
+	};
+}
+function isRightToLeft(element) {
+	return element.closest("[dir]")?.getAttribute("dir") === "rtl";
+}
+/**
+* Arrow keys (mirrored in RTL), Home and End, for the carousel's own controls.
+* It is bound to the buttons rather than the region, so arrow keys pressed
+* inside a slide's content — a text field, a slider — are never taken over.
+* Returns true when it handled the key.
+*/
+function handleCarouselKey(event, keys) {
+	if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;
+	const rtl = isRightToLeft(event.currentTarget);
+	const action = {
+		ArrowRight: rtl ? keys.previous : keys.next,
+		ArrowLeft: rtl ? keys.next : keys.previous,
+		Home: keys.first,
+		End: keys.last
+	}[event.key];
+	if (!action) return false;
+	event.preventDefault();
+	action();
+	return true;
+}
+/** A round previous/next button whose chevron mirrors in RTL. */
+function CarouselButton({ direction, className, ...props }) {
+	return /* @__PURE__ */ jsx(Button, {
+		type: "button",
+		variant: "outline",
+		size: "icon-sm",
+		"data-slot": `carousel-${direction}`,
+		className: cn("size-8 rounded-full bg-background/70 backdrop-blur-sm", className),
+		...props,
+		children: /* @__PURE__ */ jsx("svg", {
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			className: cn("size-4", mirrorForDirection),
+			children: /* @__PURE__ */ jsx("path", { d: direction === "previous" ? "m15 18-6-6 6-6" : "m9 18 6-6-6-6" })
+		})
+	});
+}
+//#endregion
+export { CarouselButton, handleCarouselKey, prefersReducedMotion, useCarouselIndex, wrapIndex };
+
+//# sourceMappingURL=carousel-controls.js.map

package/dist/components/swipe-carousel/carousel-controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"carousel-controls.js","names":[],"sources":["../../../src/components/swipe-carousel/carousel-controls.tsx"],"sourcesContent":["\"use client\";\n\n// Original design (pattern inspired by the WAI-ARIA APG Carousel pattern).\nimport { useCallback, useState, type KeyboardEvent } from \"react\";\n\nimport { Button, type ButtonProps } from \"@/components/button\";\nimport { mirrorForDirection } from \"@/lib/styles\";\nimport { cn } from \"@/lib/utils\";\n\n/*\n * The state and keyboard rules every Dowel carousel shares, kept in one file\n * that each carousel carries so it installs on its own. This carousel never\n * rotates by itself, so it carries the subset without the rotation control\n * (see reviews-carousel/carousel-controls.tsx for the full set).\n *\n * - The index is controllable (`index` / `defaultIndex` / `onIndexChange`).\n * - Arrow keys follow the reading direction: in a right-to-left document the\n *   right arrow goes back, because \"next\" lies toward the inline end.\n */\n\nconst REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\n\nexport function prefersReducedMotion(): boolean {\n  return (\n    typeof window !== \"undefined\" &&\n    typeof window.matchMedia === \"function\" &&\n    window.matchMedia(REDUCED_MOTION).matches\n  );\n}\n\n/** `index` wrapped into `[0, count)`. */\nexport function wrapIndex(index: number, count: number): number {\n  if (count <= 0) return 0;\n  return ((index % count) + count) % count;\n}\n\nexport interface CarouselIndexOptions {\n  count: number;\n  index?: number;\n  defaultIndex?: number;\n  onIndexChange?: (index: number) => void;\n  /** Wrap from the last slide to the first. Otherwise the ends are hard stops. */\n  loop: boolean;\n}\n\n/** A controllable slide index that wraps or clamps. */\nexport function useCarouselIndex({\n  count,\n  index: indexProp,\n  defaultIndex = 0,\n  onIndexChange,\n  loop,\n}: CarouselIndexOptions) {\n  const [uncontrolled, setUncontrolled] = useState(defaultIndex);\n  const controlled = indexProp !== undefined;\n  const raw = controlled ? indexProp : uncontrolled;\n  const last = Math.max(0, count - 1);\n  const index = loop ? wrapIndex(raw, count) : Math.min(Math.max(raw, 0), last);\n\n  const goTo = useCallback(\n    (target: number) => {\n      const next = loop ? wrapIndex(target, count) : Math.min(Math.max(target, 0), last);\n      if (next === index) return;\n      if (!controlled) setUncontrolled(next);\n      onIndexChange?.(next);\n    },\n    [loop, count, last, index, controlled, onIndexChange],\n  );\n\n  return {\n    index,\n    goTo,\n    next: () => {\n      goTo(index + 1);\n    },\n    previous: () => {\n      goTo(index - 1);\n    },\n    canNext: count > 1 && (loop || index < last),\n    canPrevious: count > 1 && (loop || index > 0),\n  };\n}\n\nfunction isRightToLeft(element: Element): boolean {\n  return element.closest(\"[dir]\")?.getAttribute(\"dir\") === \"rtl\";\n}\n\nexport interface CarouselKeys {\n  next: () => void;\n  previous: () => void;\n  first: () => void;\n  last: () => void;\n}\n\n/**\n * Arrow keys (mirrored in RTL), Home and End, for the carousel's own controls.\n * It is bound to the buttons rather than the region, so arrow keys pressed\n * inside a slide's content — a text field, a slider — are never taken over.\n * Returns true when it handled the key.\n */\nexport function handleCarouselKey(\n  event: KeyboardEvent<HTMLElement>,\n  keys: CarouselKeys,\n): boolean {\n  if (event.defaultPrevented || event.altKey || event.ctrlKey || event.metaKey) return false;\n  const rtl = isRightToLeft(event.currentTarget);\n  const action = {\n    ArrowRight: rtl ? keys.previous : keys.next,\n    ArrowLeft: rtl ? keys.next : keys.previous,\n    Home: keys.first,\n    End: keys.last,\n  }[event.key];\n  if (!action) return false;\n  event.preventDefault();\n  action();\n  return true;\n}\n\nexport interface CarouselButtonProps extends Omit<ButtonProps, \"children\"> {\n  direction: \"previous\" | \"next\";\n}\n\n/** A round previous/next button whose chevron mirrors in RTL. */\nexport function CarouselButton({ direction, className, ...props }: CarouselButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant=\"outline\"\n      size=\"icon-sm\"\n      data-slot={`carousel-${direction}`}\n      className={cn(\"size-8 rounded-full bg-background/70 backdrop-blur-sm\", className)}\n      {...props}\n    >\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={cn(\"size-4\", mirrorForDirection)}\n      >\n        <path d={direction === \"previous\" ? \"m15 18-6-6 6-6\" : \"m9 18 6-6-6-6\"} />\n      </svg>\n    </Button>\n  );\n}\n"],"mappings":";;;;;;;AAoBA,MAAM,iBAAiB;AAEvB,SAAgB,uBAAgC;CAC9C,OACE,OAAO,WAAW,eAClB,OAAO,OAAO,eAAe,cAC7B,OAAO,WAAW,cAAc,CAAC,CAAC;AAEtC;;AAGA,SAAgB,UAAU,OAAe,OAAuB;CAC9D,IAAI,SAAS,GAAG,OAAO;CACvB,QAAS,QAAQ,QAAS,SAAS;AACrC;;AAYA,SAAgB,iBAAiB,EAC/B,OACA,OAAO,WACP,eAAe,GACf,eACA,QACuB;CACvB,MAAM,CAAC,cAAc,mBAAmB,SAAS,YAAY;CAC7D,MAAM,aAAa,cAAc,KAAA;CACjC,MAAM,MAAM,aAAa,YAAY;CACrC,MAAM,OAAO,KAAK,IAAI,GAAG,QAAQ,CAAC;CAClC,MAAM,QAAQ,OAAO,UAAU,KAAK,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,IAAI;CAE5E,MAAM,OAAO,aACV,WAAmB;EAClB,MAAM,OAAO,OAAO,UAAU,QAAQ,KAAK,IAAI,KAAK,IAAI,KAAK,IAAI,QAAQ,CAAC,GAAG,IAAI;EACjF,IAAI,SAAS,OAAO;EACpB,IAAI,CAAC,YAAY,gBAAgB,IAAI;EACrC,gBAAgB,IAAI;CACtB,GACA;EAAC;EAAM;EAAO;EAAM;EAAO;EAAY;CAAa,CACtD;CAEA,OAAO;EACL;EACA;EACA,YAAY;GACV,KAAK,QAAQ,CAAC;EAChB;EACA,gBAAgB;GACd,KAAK,QAAQ,CAAC;EAChB;EACA,SAAS,QAAQ,MAAM,QAAQ,QAAQ;EACvC,aAAa,QAAQ,MAAM,QAAQ,QAAQ;CAC7C;AACF;AAEA,SAAS,cAAc,SAA2B;CAChD,OAAO,QAAQ,QAAQ,OAAO,CAAC,EAAE,aAAa,KAAK,MAAM;AAC3D;;;;;;;AAeA,SAAgB,kBACd,OACA,MACS;CACT,IAAI,MAAM,oBAAoB,MAAM,UAAU,MAAM,WAAW,MAAM,SAAS,OAAO;CACrF,MAAM,MAAM,cAAc,MAAM,aAAa;CAC7C,MAAM,SAAS;EACb,YAAY,MAAM,KAAK,WAAW,KAAK;EACvC,WAAW,MAAM,KAAK,OAAO,KAAK;EAClC,MAAM,KAAK;EACX,KAAK,KAAK;CACZ,EAAE,MAAM;CACR,IAAI,CAAC,QAAQ,OAAO;CACpB,MAAM,eAAe;CACrB,OAAO;CACP,OAAO;AACT;;AAOA,SAAgB,eAAe,EAAE,WAAW,WAAW,GAAG,SAA8B;CACtF,OACE,oBAAC,QAAD;EACE,MAAK;EACL,SAAQ;EACR,MAAK;EACL,aAAW,YAAY;EACvB,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;EAEJ,UAAA,oBAAC,OAAD;GACE,SAAQ;GACR,MAAK;GACL,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,eAAY;GACZ,WAAW,GAAG,UAAU,kBAAkB;GAE1C,UAAA,oBAAC,QAAD,EAAM,GAAG,cAAc,aAAa,mBAAmB,gBAAkB,CAAA;EACtE,CAAA;CACC,CAAA;AAEZ"}

package/dist/components/swipe-carousel/index.d.ts

@@ -0,0 +1,2 @@
+import { SwipeCarousel, SwipeCarouselLabels, SwipeCarouselProps, swipeCarouselVariants } from "./swipe-carousel.js";
+export { SwipeCarousel, type SwipeCarouselLabels, type SwipeCarouselProps, swipeCarouselVariants };

package/dist/components/swipe-carousel/index.js

@@ -0,0 +1,2 @@
+import { SwipeCarousel, swipeCarouselVariants } from "./swipe-carousel.js";
+export { SwipeCarousel, swipeCarouselVariants };

package/dist/components/swipe-carousel/meta.js

@@ -0,0 +1,17 @@
+import { defineMeta } from "../../registry/schema.js";
+//#region src/components/swipe-carousel/meta.ts
+const meta = defineMeta({
+	name: "swipe-carousel",
+	title: "Swipe Carousel",
+	description: "Cards on a ring seen from the front — swipe, tap or step and the ring turns, so nothing ever leaves the frame.",
+	category: "display",
+	status: "beta",
+	dependencies: ["class-variance-authority", "motion"],
+	registryDependencies: ["button"],
+	files: ["swipe-carousel.tsx", "carousel-controls.tsx"],
+	a11y: "Follows the APG carousel pattern: a section with aria-roledescription=\"carousel\", each card a labelled group with aria-roledescription=\"slide\", and only the front card exposed (the others are aria-hidden and inert). The swipe is never the only way through: named previous/next buttons, arrow keys (mirrored in RTL), Home and End, and a tap on a card peeking out at either side all turn the ring. A drag that ends over a link in the front card does not follow it. Under reduced motion the ring jumps instead of springing and the idle float stops; the spring is `motion`, wrapped in MotionConfig reducedMotion=\"user\"."
+});
+//#endregion
+export { meta };
+
+//# sourceMappingURL=meta.js.map

package/dist/components/swipe-carousel/meta.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meta.js","names":[],"sources":["../../../src/components/swipe-carousel/meta.ts"],"sourcesContent":["import { defineMeta } from \"@/registry/schema\";\n\nexport const meta = defineMeta({\n  name: \"swipe-carousel\",\n  title: \"Swipe Carousel\",\n  description:\n    \"Cards on a ring seen from the front — swipe, tap or step and the ring turns, so nothing ever leaves the frame.\",\n  category: \"display\",\n  status: \"beta\",\n  dependencies: [\"class-variance-authority\", \"motion\"],\n  registryDependencies: [\"button\"],\n  files: [\"swipe-carousel.tsx\", \"carousel-controls.tsx\"],\n  a11y:\n    'Follows the APG carousel pattern: a section with aria-roledescription=\"carousel\", each card a ' +\n    'labelled group with aria-roledescription=\"slide\", and only the front card exposed (the others are ' +\n    \"aria-hidden and inert). The swipe is never the only way through: named previous/next buttons, arrow \" +\n    \"keys (mirrored in RTL), Home and End, and a tap on a card peeking out at either side all turn the \" +\n    \"ring. A drag that ends over a link in the front card does not follow it. Under reduced motion the ring \" +\n    \"jumps instead of springing and the idle float stops; the spring is `motion`, wrapped in \" +\n    'MotionConfig reducedMotion=\"user\".',\n});\n"],"mappings":";;AAEA,MAAa,OAAO,WAAW;CAC7B,MAAM;CACN,OAAO;CACP,aACE;CACF,UAAU;CACV,QAAQ;CACR,cAAc,CAAC,4BAA4B,QAAQ;CACnD,sBAAsB,CAAC,QAAQ;CAC/B,OAAO,CAAC,sBAAsB,uBAAuB;CACrD,MACE;AAOJ,CAAC"}

package/dist/components/swipe-carousel/swipe-carousel.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithRef, ReactNode } from "react";
+//#region src/components/swipe-carousel/swipe-carousel.d.ts
+declare const swipeCarouselVariants: (props?: import("class-variance-authority/types").ClassProp | undefined) => string;
+interface SwipeCarouselLabels {
+  previous: string;
+  next: string;
+  slide: (index: number, count: number) => string;
+}
+interface SwipeCarouselProps extends Omit<ComponentPropsWithRef<"section">, "children"> {
+  /** One child per card: an image, or any content. */
+  children?: ReactNode;
+  index?: number;
+  defaultIndex?: number;
+  onIndexChange?: (index: number) => void;
+  /** Any CSS length. */
+  cardWidth?: string;
+  /** Height as a multiple of width. */
+  aspectRatio?: number;
+  /** Lets each card drift gently while idle. */
+  float?: boolean;
+  labels?: Partial<SwipeCarouselLabels>;
+}
+/** A card that orbits a carousel on a ring, swiped, clicked or stepped with keys. */
+declare function SwipeCarousel({ className, children, index: indexProp, defaultIndex, onIndexChange, cardWidth, aspectRatio, float, labels: labelsProp, ...props }: SwipeCarouselProps): import("react").JSX.Element | null;
+//#endregion
+export { SwipeCarousel, SwipeCarouselLabels, SwipeCarouselProps, swipeCarouselVariants };
+//# sourceMappingURL=swipe-carousel.d.ts.map

package/dist/components/swipe-carousel/swipe-carousel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"swipe-carousel.d.ts","names":[],"sources":["../../../src/components/swipe-carousel/swipe-carousel.tsx"],"mappings":";;cAuEM,wBAAqB,iDAAA;UAQV;EACf;EACA;EACA,QAAQ,eAAe;;UASR,2BAA2B,KAAK;;EAE/C,WAAW;EACX;EACA;EACA,iBAAiB;;EAEjB;;EAEA;;EAEA;EACA,SAAS,QAAQ;;;iBA0BH,gBACd,WACA,UACA,OAAO,WACP,cACA,eACA,WACA,aACA,OACA,QAAQ,eACL,SACF,qCAAkB,IAAA"}