@puzzle-ui/ui 0.0.0-stage → 0.2.0

package/dist/components/forms/slider/index.js

@@ -0,0 +1,93 @@
+"use client";
+import "./slider.css";
+import { cn } from "@puzzle-ui/core";
+import { useId, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/slider/index.tsx
+const getPrecision = (value) => {
+	const [coefficient, exponent = "0"] = String(value).toLowerCase().split("e");
+	const decimals = coefficient.split(".")[1]?.length ?? 0;
+	return Math.min(12, Math.max(0, decimals - Number(exponent)));
+};
+const normalizeSliderValue = (value, min, max, step) => {
+	if (max <= min) return min;
+	const boundedValue = Math.min(max, Math.max(min, value));
+	if (step === "any") return boundedValue;
+	const factor = 10 ** Math.max(getPrecision(min), getPrecision(step));
+	const steppedValue = min + Math.round((boundedValue - min) / step) * step;
+	return Math.min(max, Math.max(min, Math.round(steppedValue * factor) / factor));
+};
+const Slider = ({ value, defaultValue, onChange, min = 0, max = 100, step = 1, size = "md", marks, showValue = false, formatValue, className, id, ref, disabled = false, style, "aria-invalid": ariaInvalid, "aria-valuetext": ariaValueText, ...inputProps }) => {
+	const generatedId = useId();
+	const inputId = id ?? generatedId;
+	const resolvedMin = Number.isFinite(min) ? min : 0;
+	const resolvedMax = Math.max(resolvedMin, Number.isFinite(max) ? max : 100);
+	const resolvedStep = step === "any" ? "any" : Number.isFinite(step) && step > 0 ? step : 1;
+	const isControlled = value !== void 0;
+	const [internalValue, setInternalValue] = useState(() => normalizeSliderValue(defaultValue ?? (resolvedMin + resolvedMax) / 2, resolvedMin, resolvedMax, resolvedStep));
+	const currentValue = normalizeSliderValue(isControlled ? value : internalValue, resolvedMin, resolvedMax, resolvedStep);
+	const progress = resolvedMax > resolvedMin ? (currentValue - resolvedMin) / (resolvedMax - resolvedMin) * 100 : 0;
+	const formattedValue = formatValue?.(currentValue);
+	const isInvalid = ariaInvalid === true || ariaInvalid === "true";
+	const resolvedMarks = (marks ?? []).filter((mark) => Number.isFinite(mark.value) && mark.value >= resolvedMin && mark.value <= resolvedMax).slice().sort((a, b) => a.value - b.value);
+	const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);
+	const handleChange = (event) => {
+		const nextValue = normalizeSliderValue(event.currentTarget.valueAsNumber, resolvedMin, resolvedMax, resolvedStep);
+		if (!isControlled) setInternalValue(nextValue);
+		onChange?.(nextValue);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("puzzle-slider", className),
+		"data-size": size,
+		"data-disabled": disabled || void 0,
+		"data-invalid": isInvalid || void 0,
+		children: [
+			showValue && /* @__PURE__ */ jsx("output", {
+				htmlFor: inputId,
+				className: "puzzle-slider__value",
+				children: formattedValue ?? currentValue
+			}),
+			/* @__PURE__ */ jsx("input", {
+				...inputProps,
+				ref,
+				id: inputId,
+				className: "puzzle-slider__input",
+				type: "range",
+				min: resolvedMin,
+				max: resolvedMax,
+				step: resolvedStep,
+				value: currentValue,
+				disabled,
+				"aria-invalid": ariaInvalid,
+				"aria-valuetext": ariaValueText ?? formattedValue,
+				style: {
+					...style,
+					"--puzzle-slider-progress": `${progress}%`
+				},
+				onChange: handleChange
+			}),
+			resolvedMarks.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: "puzzle-slider__marks",
+				"data-has-labels": hasMarkLabels || void 0,
+				children: resolvedMarks.map((mark, index) => {
+					const position = resolvedMax > resolvedMin ? (mark.value - resolvedMin) / (resolvedMax - resolvedMin) * 100 : 0;
+					return /* @__PURE__ */ jsxs("span", {
+						className: "puzzle-slider__mark",
+						"data-edge": index === 0 ? "start" : index === resolvedMarks.length - 1 ? "end" : void 0,
+						style: { insetInlineStart: `${position}%` },
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "puzzle-slider__mark-tick",
+							"aria-hidden": "true"
+						}), mark.label != null && /* @__PURE__ */ jsx("span", {
+							className: "puzzle-slider__mark-label",
+							children: mark.label
+						})]
+					}, `${mark.value}-${index}`);
+				})
+			})
+		]
+	});
+};
+export { Slider };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/slider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/slider/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useId,\n  useState,\n  type ChangeEvent,\n  type ComponentPropsWithRef,\n  type CSSProperties,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./slider.css\";\n\ntype SliderSize = \"sm\" | \"md\" | \"lg\";\n\ntype SliderMark = {\n  /** Numeric position of the mark. */\n  value: number;\n\n  /** Optional visible label below the mark. */\n  label?: ReactNode;\n};\n\ntype SliderProps = Omit<\n  ComponentPropsWithRef<\"input\">,\n  | \"type\"\n  | \"value\"\n  | \"defaultValue\"\n  | \"onChange\"\n  | \"min\"\n  | \"max\"\n  | \"step\"\n  | \"size\"\n  | \"className\"\n> & {\n  /** Controlled numeric value. */\n  value?: number;\n\n  /** Initial value for uncontrolled usage. Defaults to the range midpoint. */\n  defaultValue?: number;\n\n  /** Called whenever the selected value changes. */\n  onChange?: (value: number) => void;\n\n  /** Minimum selectable value. Defaults to 0. */\n  min?: number;\n\n  /** Maximum selectable value. Defaults to 100. */\n  max?: number;\n\n  /** Allowed increment. Use \"any\" to disable step rounding. */\n  step?: number | \"any\";\n\n  /** Visual size of the slider. */\n  size?: SliderSize;\n\n  /** Optional marks displayed below the track. */\n  marks?: readonly SliderMark[];\n\n  /** Displays the current value above the slider. */\n  showValue?: boolean;\n\n  /**\n   * Formats the visible value and supplies aria-valuetext.\n   * An explicitly supplied aria-valuetext takes precedence.\n   */\n  formatValue?: (value: number) => string;\n\n  /** Class applied to the outer slider element. */\n  className?: string;\n};\n\nconst getPrecision = (value: number) => {\n  const [coefficient, exponent = \"0\"] = String(value).toLowerCase().split(\"e\");\n\n  const decimals = coefficient.split(\".\")[1]?.length ?? 0;\n\n  return Math.min(12, Math.max(0, decimals - Number(exponent)));\n};\n\nconst normalizeSliderValue = (\n  value: number,\n  min: number,\n  max: number,\n  step: number | \"any\",\n) => {\n  if (max <= min) {\n    return min;\n  }\n\n  const boundedValue = Math.min(max, Math.max(min, value));\n\n  if (step === \"any\") {\n    return boundedValue;\n  }\n\n  const precision = Math.max(getPrecision(min), getPrecision(step));\n  const factor = 10 ** precision;\n\n  const steppedValue = min + Math.round((boundedValue - min) / step) * step;\n\n  return Math.min(\n    max,\n    Math.max(min, Math.round(steppedValue * factor) / factor),\n  );\n};\n\nconst Slider = ({\n  value,\n  defaultValue,\n  onChange,\n  min = 0,\n  max = 100,\n  step = 1,\n  size = \"md\",\n  marks,\n  showValue = false,\n  formatValue,\n  className,\n  id,\n  ref,\n  disabled = false,\n  style,\n  \"aria-invalid\": ariaInvalid,\n  \"aria-valuetext\": ariaValueText,\n  ...inputProps\n}: SliderProps) => {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n\n  const resolvedMin = Number.isFinite(min) ? min : 0;\n\n  const requestedMax = Number.isFinite(max) ? max : 100;\n  const resolvedMax = Math.max(resolvedMin, requestedMax);\n\n  const resolvedStep =\n    step === \"any\" ? \"any\" : Number.isFinite(step) && step > 0 ? step : 1;\n\n  const isControlled = value !== undefined;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    normalizeSliderValue(\n      defaultValue ?? (resolvedMin + resolvedMax) / 2,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    ),\n  );\n\n  const currentValue = normalizeSliderValue(\n    isControlled ? value : internalValue,\n    resolvedMin,\n    resolvedMax,\n    resolvedStep,\n  );\n\n  const progress =\n    resolvedMax > resolvedMin\n      ? ((currentValue - resolvedMin) / (resolvedMax - resolvedMin)) * 100\n      : 0;\n\n  const formattedValue = formatValue?.(currentValue);\n\n  const isInvalid = ariaInvalid === true || ariaInvalid === \"true\";\n\n  const resolvedMarks = (marks ?? [])\n    .filter(\n      (mark) =>\n        Number.isFinite(mark.value) &&\n        mark.value >= resolvedMin &&\n        mark.value <= resolvedMax,\n    )\n    .slice()\n    .sort((a, b) => a.value - b.value);\n\n  const hasMarkLabels = resolvedMarks.some((mark) => mark.label != null);\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextValue = normalizeSliderValue(\n      event.currentTarget.valueAsNumber,\n      resolvedMin,\n      resolvedMax,\n      resolvedStep,\n    );\n\n    if (!isControlled) {\n      setInternalValue(nextValue);\n    }\n\n    onChange?.(nextValue);\n  };\n\n  return (\n    <div\n      className={cn(\"puzzle-slider\", className)}\n      data-size={size}\n      data-disabled={disabled || undefined}\n      data-invalid={isInvalid || undefined}\n    >\n      {showValue && (\n        <output htmlFor={inputId} className=\"puzzle-slider__value\">\n          {formattedValue ?? currentValue}\n        </output>\n      )}\n\n      <input\n        {...inputProps}\n        ref={ref}\n        id={inputId}\n        className=\"puzzle-slider__input\"\n        type=\"range\"\n        min={resolvedMin}\n        max={resolvedMax}\n        step={resolvedStep}\n        value={currentValue}\n        disabled={disabled}\n        aria-invalid={ariaInvalid}\n        aria-valuetext={ariaValueText ?? formattedValue}\n        style={\n          {\n            ...style,\n            \"--puzzle-slider-progress\": `${progress}%`,\n          } as CSSProperties\n        }\n        onChange={handleChange}\n      />\n\n      {resolvedMarks.length > 0 && (\n        <div\n          className=\"puzzle-slider__marks\"\n          data-has-labels={hasMarkLabels || undefined}\n        >\n          {resolvedMarks.map((mark, index) => {\n            const position =\n              resolvedMax > resolvedMin\n                ? ((mark.value - resolvedMin) / (resolvedMax - resolvedMin)) *\n                  100\n                : 0;\n\n            return (\n              <span\n                key={`${mark.value}-${index}`}\n                className=\"puzzle-slider__mark\"\n                data-edge={\n                  index === 0\n                    ? \"start\"\n                    : index === resolvedMarks.length - 1\n                      ? \"end\"\n                      : undefined\n                }\n                style={{\n                  insetInlineStart: `${position}%`,\n                }}\n              >\n                <span className=\"puzzle-slider__mark-tick\" aria-hidden=\"true\" />\n\n                {mark.label != null && (\n                  <span className=\"puzzle-slider__mark-label\">\n                    {mark.label}\n                  </span>\n                )}\n              </span>\n            );\n          })}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { Slider, type SliderProps, type SliderMark, type SliderSize };\n"],"mappings":"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"}

package/dist/components/forms/slider/slider.css

@@ -0,0 +1,202 @@
+.puzzle-slider {
+  --puzzle-slider-thumb-size: 1.125rem;
+  --puzzle-slider-track-height: .375rem;
+  --puzzle-slider-fill: var(--puzzle-color-primary);
+  gap: var(--puzzle-space-1, .25rem);
+  width: 100%;
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  font-family: var(--puzzle-font-family-body, inherit);
+  flex-direction: column;
+  display: flex;
+}
+
+.puzzle-slider[data-size="sm"] {
+  --puzzle-slider-thumb-size: .875rem;
+  --puzzle-slider-track-height: .25rem;
+}
+
+.puzzle-slider[data-size="md"] {
+  --puzzle-slider-thumb-size: 1.125rem;
+  --puzzle-slider-track-height: .375rem;
+}
+
+.puzzle-slider[data-size="lg"] {
+  --puzzle-slider-thumb-size: 1.375rem;
+  --puzzle-slider-track-height: .5rem;
+}
+
+.puzzle-slider__value {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  align-self: flex-end;
+}
+
+.puzzle-slider__input {
+  -webkit-appearance: none;
+  appearance: none;
+  cursor: pointer;
+  touch-action: pan-y;
+  -webkit-tap-highlight-color: transparent;
+  background: none;
+  border: 0;
+  width: 100%;
+  min-width: 0;
+  height: 2rem;
+  margin: 0;
+  padding: 0;
+  display: block;
+}
+
+.puzzle-slider__input::-webkit-slider-runnable-track {
+  width: 100%;
+  height: var(--puzzle-slider-track-height);
+  background: linear-gradient(to right,
+        var(--puzzle-slider-fill) 0,
+        var(--puzzle-slider-fill) var(--puzzle-slider-progress, 50%),
+        var(--puzzle-color-border) var(--puzzle-slider-progress, 50%),
+        var(--puzzle-color-border) 100%);
+  border-radius: 9999px;
+}
+
+.puzzle-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  width: var(--puzzle-slider-thumb-size);
+  height: var(--puzzle-slider-thumb-size);
+  margin-top: calc((var(--puzzle-slider-track-height) - var(--puzzle-slider-thumb-size)) / 2);
+  border: 2px solid var(--puzzle-slider-fill);
+  background: var(--puzzle-color-surface);
+  transition: border-color var(--puzzle-duration-fast, .15s) ease,
+        box-shadow var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px #0000001f;
+}
+
+.puzzle-slider__input::-moz-range-track {
+  height: var(--puzzle-slider-track-height);
+  background: var(--puzzle-color-border);
+  border-radius: 9999px;
+}
+
+.puzzle-slider__input::-moz-range-progress {
+  height: var(--puzzle-slider-track-height);
+  background: var(--puzzle-slider-fill);
+  border-radius: 9999px;
+}
+
+.puzzle-slider__input::-moz-range-thumb {
+  box-sizing: border-box;
+  width: var(--puzzle-slider-thumb-size);
+  height: var(--puzzle-slider-thumb-size);
+  border: 2px solid var(--puzzle-slider-fill);
+  background: var(--puzzle-color-surface);
+  transition: border-color var(--puzzle-duration-fast, .15s) ease,
+        box-shadow var(--puzzle-duration-fast, .15s) ease,
+        background-color var(--puzzle-duration-fast, .15s) ease;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px #0000001f;
+}
+
+:dir(rtl) .puzzle-slider__input::-webkit-slider-runnable-track {
+  background: linear-gradient(to left,
+        var(--puzzle-slider-fill) 0,
+        var(--puzzle-slider-fill) var(--puzzle-slider-progress, 50%),
+        var(--puzzle-color-border) var(--puzzle-slider-progress, 50%),
+        var(--puzzle-color-border) 100%);
+}
+
+.puzzle-slider__input:hover:not(:disabled)::-webkit-slider-thumb, .puzzle-slider__input:hover:not(:disabled)::-moz-range-thumb {
+  border-color: var(--puzzle-color-primary);
+}
+
+.puzzle-slider__input:focus-visible::-webkit-slider-thumb, .puzzle-slider__input:focus-visible::-moz-range-thumb {
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--puzzle-slider-fill), transparent 78%);
+}
+
+.puzzle-slider__marks {
+  height: .375rem;
+  margin-inline: calc(var(--puzzle-slider-thumb-size) / 2);
+  position: relative;
+}
+
+.puzzle-slider__marks[data-has-labels="true"] {
+  height: 1.5rem;
+}
+
+.puzzle-slider__mark {
+  align-items: center;
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  display: flex;
+  position: absolute;
+  top: 0;
+  transform: translateX(-50%);
+}
+
+.puzzle-slider__mark[data-edge="start"] {
+  transform: translateX(0);
+}
+
+.puzzle-slider__mark[data-edge="end"], :dir(rtl) .puzzle-slider__mark[data-edge="start"] {
+  transform: translateX(-100%);
+}
+
+:dir(rtl) .puzzle-slider__mark[data-edge="end"] {
+  transform: translateX(0);
+}
+
+.puzzle-slider__mark-tick {
+  background: var(--puzzle-color-border-strong, var(--puzzle-color-border));
+  flex: none;
+  width: 1px;
+  height: .375rem;
+  display: block;
+}
+
+.puzzle-slider__mark-label {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  white-space: nowrap;
+}
+
+.puzzle-slider[data-disabled="true"] {
+  opacity: .55;
+  cursor: not-allowed;
+}
+
+.puzzle-slider__input:disabled {
+  cursor: not-allowed;
+}
+
+.puzzle-slider[data-invalid="true"] {
+  --puzzle-slider-fill: var(--puzzle-color-danger);
+}
+
+@media (forced-colors: active) {
+  .puzzle-slider__input:focus-visible {
+    outline-offset: 3px;
+    outline: 2px solid highlight;
+  }
+
+  .puzzle-slider__input::-webkit-slider-thumb, .puzzle-slider__input::-moz-range-thumb {
+    background: canvas;
+    border-color: buttontext;
+  }
+
+  .puzzle-slider__mark-tick {
+    background: buttontext;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-slider__input::-webkit-slider-thumb, .puzzle-slider__input::-moz-range-thumb {
+    transition: none;
+  }
+}

package/dist/components/forms/stepper/index.cjs

@@ -0,0 +1,113 @@
+"use client";
+;/* empty css              */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _puzzle_ui_hooks = require("@puzzle-ui/hooks");
+// src/components/forms/stepper/index.tsx
+const StepperStep = (_props) => null;
+const isStepperStep = (child) => (0, react.isValidElement)(child) && child.type === StepperStep;
+const StepperRoot = ({ activeStep, activeStepId, defaultActiveStep = 0, defaultActiveStepId, onStepChange, onStepIdChange, orientation = "horizontal", clickable = false, linear = true, children, className, ...rootProps }) => {
+	const [uncontrolledActiveStep, setUncontrolledActiveStep] = (0, react.useState)(defaultActiveStep);
+	const [uncontrolledActiveStepId, setUncontrolledActiveStepId] = (0, react.useState)(defaultActiveStepId);
+	const orientations = (0, _puzzle_ui_core.resolveResponsiveValue)(orientation);
+	const steps = react.Children.toArray(children).filter(isStepperStep);
+	const isIdSelection = activeStepId !== void 0 || defaultActiveStepId !== void 0;
+	const requestedActiveStepId = activeStepId ?? uncontrolledActiveStepId;
+	if (isIdSelection) {
+		const stepIds = /* @__PURE__ */ new Set();
+		for (const step of steps) {
+			const id = step.props.id;
+			if (id === void 0) throw new Error("Stepper ID-based selection requires an id on every step.");
+			const key = `${typeof id}:${id}`;
+			if (stepIds.has(key)) throw new Error("Stepper step IDs must be unique.");
+			stepIds.add(key);
+		}
+	}
+	const requestedActiveStep = activeStep ?? uncontrolledActiveStep;
+	const requestedActiveStepIndex = isIdSelection ? steps.findIndex((step) => step.props.id === requestedActiveStepId) : void 0;
+	if (isIdSelection && steps.length > 0 && requestedActiveStepIndex === -1) throw new Error("Stepper activeStepId must match an available step ID.");
+	const currentActiveStep = isIdSelection ? requestedActiveStepIndex ?? -1 : steps.length === 0 ? -1 : Number.isFinite(requestedActiveStep) ? Math.min(steps.length - 1, Math.max(0, Math.trunc(requestedActiveStep))) : 0;
+	const direction = rootProps.dir === "rtl" ? "rtl" : "ltr";
+	const focusItems = steps.map((step, index) => {
+		const selectable = clickable && !step.props.disabled && (!linear || index <= currentActiveStep);
+		return {
+			id: step.props.id === void 0 ? `index:${index}` : `${typeof step.props.id}:${step.props.id}`,
+			disabled: !selectable
+		};
+	});
+	const activeFocusId = currentActiveStep >= 0 ? focusItems[currentActiveStep]?.id : void 0;
+	const rovingFocus = (0, _puzzle_ui_hooks.useRovingFocus)({
+		items: focusItems,
+		orientation: "both",
+		dir: direction,
+		initialActiveId: activeFocusId
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ol", {
+		...rootProps,
+		className: (0, _puzzle_ui_core.cn)("puzzle-stepper", className),
+		"data-orientation-mobile": orientations.mobile,
+		"data-orientation-tablet": orientations.tablet,
+		"data-orientation-desktop": orientations.desktop,
+		children: steps.map((step, index) => {
+			const { id, label, description, icon, completed: completedProp, error, disabled = false, optional, className: stepClassName } = step.props;
+			const state = error ? "error" : completedProp ?? index < currentActiveStep ? "completed" : index === currentActiveStep ? "active" : "upcoming";
+			const selectable = !disabled && (!linear || index <= currentActiveStep);
+			const focusId = id === void 0 ? `index:${index}` : `${typeof id}:${id}`;
+			const handleClick = () => {
+				if (!selectable || index === currentActiveStep) return;
+				if (isIdSelection) {
+					if (activeStepId === void 0) setUncontrolledActiveStepId(id);
+				} else if (activeStep === void 0) setUncontrolledActiveStep(index);
+				onStepChange?.(index);
+				if (isIdSelection && id !== void 0) onStepIdChange?.(id);
+			};
+			const content = /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-stepper__indicator",
+				"data-has-icon": icon != null ? "true" : "false",
+				"aria-hidden": "true",
+				children: icon ?? (state === "completed" || state === "error" ? null : index + 1)
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: "puzzle-stepper__label",
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-stepper__label-text",
+						children: label
+					}),
+					description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-stepper__description",
+						children: description
+					}),
+					optional != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: "puzzle-stepper__optional",
+						children: optional
+					})
+				]
+			})] });
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+				className: (0, _puzzle_ui_core.cn)("puzzle-stepper__item", stepClassName),
+				"data-state": state,
+				"data-disabled": disabled || clickable && !selectable ? "true" : void 0,
+				"aria-current": index === currentActiveStep ? "step" : void 0,
+				children: clickable ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: "puzzle-stepper__step",
+					disabled: !selectable,
+					ref: rovingFocus.getItemRef(focusId),
+					tabIndex: rovingFocus.getItemTabIndex(focusId, !selectable),
+					onFocus: () => rovingFocus.onItemFocus(focusId),
+					onKeyDown: (event) => rovingFocus.onItemKeyDown(event, focusId),
+					onClick: handleClick,
+					children: content
+				}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "puzzle-stepper__step",
+					children: content
+				})
+			}, id === void 0 ? step.key ?? index : `${typeof id}:${id}`);
+		})
+	});
+};
+const Stepper = Object.assign(StepperRoot, { Step: StepperStep });
+exports.Stepper = Stepper;
+
+//# sourceMappingURL=index.cjs.map

package/dist/components/forms/stepper/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["isValidElement","useState","resolveResponsiveValue","Children","useRovingFocus","cn"],"sources":["../../../../src/components/forms/stepper/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  cn,\n  resolveResponsiveValue,\n  type ResponsiveValue,\n} from \"@puzzle-ui/core\";\nimport { useRovingFocus } from \"@puzzle-ui/hooks\";\nimport {\n  Children,\n  isValidElement,\n  useState,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\nimport \"./stepper.css\";\n\ntype StepperOrientation = \"horizontal\" | \"vertical\";\n\ntype StepperStepProps = {\n  /** Stable identifier, useful when steps are reordered. */\n  id?: string | number;\n\n  /** Visible label of the step. */\n  label: ReactNode;\n\n  /** Optional supporting text below the label. */\n  description?: ReactNode;\n\n  /** Custom indicator content. */\n  icon?: ReactNode;\n\n  /** Overrides the automatically calculated completed state. */\n  completed?: boolean;\n\n  /** Displays the step as an error. */\n  error?: boolean;\n\n  /** Prevents navigation to this step. */\n  disabled?: boolean;\n\n  /** Optional content displayed below the label. */\n  optional?: ReactNode;\n\n  /** Class applied to the step item. */\n  className?: string;\n};\n\ntype StepperProps = Omit<ComponentPropsWithoutRef<\"ol\">, \"children\"> & {\n  /** Active step index. Values are clamped to available steps. Defaults to 0. */\n  activeStep?: number;\n\n  /** Active step ID. Enables controlled ID-based selection. */\n  activeStepId?: string | number;\n\n  /** Initial active step for uncontrolled usage. Defaults to 0. */\n  defaultActiveStep?: number;\n\n  /** Initial active step ID for uncontrolled ID-based selection. */\n  defaultActiveStepId?: string | number;\n\n  /** Called when the active step changes. */\n  onStepChange?: (step: number) => void;\n\n  /** Called when an ID-based active step changes. */\n  onStepIdChange?: (stepId: string | number) => void;\n\n  /** Layout direction, optionally responsive. */\n  orientation?: ResponsiveValue<StepperOrientation>;\n\n  /** Allows users to select steps. Defaults to false. */\n  clickable?: boolean;\n\n  /** Prevents selecting steps ahead of the active step. Defaults to true. */\n  linear?: boolean;\n\n  children: ReactNode;\n};\n\nconst StepperStep = (_props: StepperStepProps) => null;\n\ntype StepperStepElement = ReactElement<StepperStepProps, typeof StepperStep>;\n\nconst isStepperStep = (child: ReactNode): child is StepperStepElement =>\n  isValidElement<StepperStepProps>(child) && child.type === StepperStep;\n\nconst StepperRoot = ({\n  activeStep,\n  activeStepId,\n  defaultActiveStep = 0,\n  defaultActiveStepId,\n  onStepChange,\n  onStepIdChange,\n  orientation = \"horizontal\",\n  clickable = false,\n  linear = true,\n  children,\n  className,\n  ...rootProps\n}: StepperProps) => {\n  const [uncontrolledActiveStep, setUncontrolledActiveStep] =\n    useState(defaultActiveStep);\n  const [uncontrolledActiveStepId, setUncontrolledActiveStepId] =\n    useState(defaultActiveStepId);\n\n  const orientations = resolveResponsiveValue(orientation);\n  const steps = Children.toArray(children).filter(isStepperStep);\n  const isIdSelection =\n    activeStepId !== undefined || defaultActiveStepId !== undefined;\n  const requestedActiveStepId = activeStepId ?? uncontrolledActiveStepId;\n\n  if (isIdSelection) {\n    const stepIds = new Set<string>();\n\n    for (const step of steps) {\n      const id = step.props.id;\n\n      if (id === undefined) {\n        throw new Error(\n          \"Stepper ID-based selection requires an id on every step.\",\n        );\n      }\n\n      const key = `${typeof id}:${id}`;\n\n      if (stepIds.has(key)) {\n        throw new Error(\"Stepper step IDs must be unique.\");\n      }\n\n      stepIds.add(key);\n    }\n  }\n\n  const requestedActiveStep = activeStep ?? uncontrolledActiveStep;\n  const requestedActiveStepIndex = isIdSelection\n    ? steps.findIndex((step) => step.props.id === requestedActiveStepId)\n    : undefined;\n\n  if (\n    isIdSelection &&\n    steps.length > 0 &&\n    requestedActiveStepIndex === -1\n  ) {\n    throw new Error(\"Stepper activeStepId must match an available step ID.\");\n  }\n\n  const currentActiveStep = isIdSelection\n    ? (requestedActiveStepIndex ?? -1)\n    : steps.length === 0\n      ? -1\n      : Number.isFinite(requestedActiveStep)\n        ? Math.min(\n            steps.length - 1,\n            Math.max(0, Math.trunc(requestedActiveStep)),\n          )\n        : 0;\n  const direction = rootProps.dir === \"rtl\" ? \"rtl\" : \"ltr\";\n\n  const focusItems = steps.map((step, index) => {\n    const selectable =\n      clickable &&\n      !step.props.disabled &&\n      (!linear || index <= currentActiveStep);\n\n    return {\n      id:\n        step.props.id === undefined\n          ? `index:${index}`\n          : `${typeof step.props.id}:${step.props.id}`,\n      disabled: !selectable,\n    };\n  });\n\n  const activeFocusId =\n    currentActiveStep >= 0\n      ? focusItems[currentActiveStep]?.id\n      : undefined;\n  const rovingFocus = useRovingFocus<HTMLButtonElement>({\n    items: focusItems,\n    orientation: \"both\",\n    dir: direction,\n    initialActiveId: activeFocusId,\n  });\n\n  return (\n    <ol\n      {...rootProps}\n      className={cn(\"puzzle-stepper\", className)}\n      data-orientation-mobile={orientations.mobile}\n      data-orientation-tablet={orientations.tablet}\n      data-orientation-desktop={orientations.desktop}\n    >\n      {steps.map((step, index) => {\n        const {\n          id,\n          label,\n          description,\n          icon,\n          completed: completedProp,\n          error,\n          disabled = false,\n          optional,\n          className: stepClassName,\n        } = step.props;\n\n        const completed = completedProp ?? index < currentActiveStep;\n\n        const state = error\n          ? \"error\"\n          : completed\n            ? \"completed\"\n            : index === currentActiveStep\n              ? \"active\"\n              : \"upcoming\";\n\n        const selectable = !disabled && (!linear || index <= currentActiveStep);\n        const focusId =\n          id === undefined ? `index:${index}` : `${typeof id}:${id}`;\n\n        const handleClick = () => {\n          if (!selectable || index === currentActiveStep) {\n            return;\n          }\n\n          if (isIdSelection) {\n            if (activeStepId === undefined) {\n              setUncontrolledActiveStepId(id);\n            }\n          } else if (activeStep === undefined) {\n            setUncontrolledActiveStep(index);\n          }\n\n          onStepChange?.(index);\n          if (isIdSelection && id !== undefined) {\n            onStepIdChange?.(id);\n          }\n        };\n\n        const content = (\n          <>\n            <span\n              className=\"puzzle-stepper__indicator\"\n              data-has-icon={icon != null ? \"true\" : \"false\"}\n              aria-hidden=\"true\"\n            >\n              {icon ??\n                (state === \"completed\" || state === \"error\" ? null : index + 1)}\n            </span>\n\n            <span className=\"puzzle-stepper__label\">\n              <span className=\"puzzle-stepper__label-text\">{label}</span>\n\n              {description != null && (\n                <span className=\"puzzle-stepper__description\">\n                  {description}\n                </span>\n              )}\n\n              {optional != null && (\n                <span className=\"puzzle-stepper__optional\">{optional}</span>\n              )}\n            </span>\n          </>\n        );\n\n        return (\n          <li\n            key={\n              id === undefined ? (step.key ?? index) : `${typeof id}:${id}`\n            }\n            className={cn(\"puzzle-stepper__item\", stepClassName)}\n            data-state={state}\n            data-disabled={\n              disabled || (clickable && !selectable) ? \"true\" : undefined\n            }\n            aria-current={index === currentActiveStep ? \"step\" : undefined}\n          >\n            {clickable ? (\n              <button\n                type=\"button\"\n                className=\"puzzle-stepper__step\"\n                disabled={!selectable}\n                ref={rovingFocus.getItemRef(focusId)}\n                tabIndex={rovingFocus.getItemTabIndex(focusId, !selectable)}\n                onFocus={() => rovingFocus.onItemFocus(focusId)}\n                onKeyDown={(event) =>\n                  rovingFocus.onItemKeyDown(event, focusId)\n                }\n                onClick={handleClick}\n              >\n                {content}\n              </button>\n            ) : (\n              <div className=\"puzzle-stepper__step\">{content}</div>\n            )}\n          </li>\n        );\n      })}\n    </ol>\n  );\n};\n\nconst Stepper = Object.assign(StepperRoot, {\n  Step: StepperStep,\n});\n\nexport {\n  Stepper,\n  type StepperProps,\n  type StepperStepProps,\n  type StepperOrientation,\n};\n"],"mappings":"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"}

package/dist/components/forms/stepper/index.d.cts

@@ -0,0 +1,48 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { ResponsiveValue } from "@puzzle-ui/core";
+type StepperOrientation = "horizontal" | "vertical";
+type StepperStepProps = {
+  /** Stable identifier, useful when steps are reordered. */
+  id?: string | number;
+  /** Visible label of the step. */
+  label: ReactNode;
+  /** Optional supporting text below the label. */
+  description?: ReactNode;
+  /** Custom indicator content. */
+  icon?: ReactNode;
+  /** Overrides the automatically calculated completed state. */
+  completed?: boolean;
+  /** Displays the step as an error. */
+  error?: boolean;
+  /** Prevents navigation to this step. */
+  disabled?: boolean;
+  /** Optional content displayed below the label. */
+  optional?: ReactNode;
+  /** Class applied to the step item. */
+  className?: string;
+};
+type StepperProps = Omit<ComponentPropsWithoutRef<"ol">, "children"> & {
+  /** Active step index. Values are clamped to available steps. Defaults to 0. */
+  activeStep?: number;
+  /** Active step ID. Enables controlled ID-based selection. */
+  activeStepId?: string | number;
+  /** Initial active step for uncontrolled usage. Defaults to 0. */
+  defaultActiveStep?: number;
+  /** Initial active step ID for uncontrolled ID-based selection. */
+  defaultActiveStepId?: string | number;
+  /** Called when the active step changes. */
+  onStepChange?: (step: number) => void;
+  /** Called when an ID-based active step changes. */
+  onStepIdChange?: (stepId: string | number) => void;
+  /** Layout direction, optionally responsive. */
+  orientation?: ResponsiveValue<StepperOrientation>;
+  /** Allows users to select steps. Defaults to false. */
+  clickable?: boolean;
+  /** Prevents selecting steps ahead of the active step. Defaults to true. */
+  linear?: boolean;
+  children: ReactNode;
+};
+declare const Stepper: (({ activeStep, activeStepId, defaultActiveStep, defaultActiveStepId, onStepChange, onStepIdChange, orientation, clickable, linear, children, className, ...rootProps }: StepperProps) => import("react").JSX.Element) & {
+  Step: (_props: StepperStepProps) => null;
+};
+export { Stepper, type StepperOrientation, type StepperProps, type StepperStepProps };

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

@@ -0,0 +1,48 @@
+import { ResponsiveValue } from "@puzzle-ui/core";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+type StepperOrientation = "horizontal" | "vertical";
+type StepperStepProps = {
+  /** Stable identifier, useful when steps are reordered. */
+  id?: string | number;
+  /** Visible label of the step. */
+  label: ReactNode;
+  /** Optional supporting text below the label. */
+  description?: ReactNode;
+  /** Custom indicator content. */
+  icon?: ReactNode;
+  /** Overrides the automatically calculated completed state. */
+  completed?: boolean;
+  /** Displays the step as an error. */
+  error?: boolean;
+  /** Prevents navigation to this step. */
+  disabled?: boolean;
+  /** Optional content displayed below the label. */
+  optional?: ReactNode;
+  /** Class applied to the step item. */
+  className?: string;
+};
+type StepperProps = Omit<ComponentPropsWithoutRef<"ol">, "children"> & {
+  /** Active step index. Values are clamped to available steps. Defaults to 0. */
+  activeStep?: number;
+  /** Active step ID. Enables controlled ID-based selection. */
+  activeStepId?: string | number;
+  /** Initial active step for uncontrolled usage. Defaults to 0. */
+  defaultActiveStep?: number;
+  /** Initial active step ID for uncontrolled ID-based selection. */
+  defaultActiveStepId?: string | number;
+  /** Called when the active step changes. */
+  onStepChange?: (step: number) => void;
+  /** Called when an ID-based active step changes. */
+  onStepIdChange?: (stepId: string | number) => void;
+  /** Layout direction, optionally responsive. */
+  orientation?: ResponsiveValue<StepperOrientation>;
+  /** Allows users to select steps. Defaults to false. */
+  clickable?: boolean;
+  /** Prevents selecting steps ahead of the active step. Defaults to true. */
+  linear?: boolean;
+  children: ReactNode;
+};
+declare const Stepper: (({ activeStep, activeStepId, defaultActiveStep, defaultActiveStepId, onStepChange, onStepIdChange, orientation, clickable, linear, children, className, ...rootProps }: StepperProps) => import("react").JSX.Element) & {
+  Step: (_props: StepperStepProps) => null;
+};
+export { Stepper, type StepperOrientation, type StepperProps, type StepperStepProps };