@puzzle-ui/ui 0.0.0-stage → 0.2.0

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

@@ -0,0 +1,113 @@
+"use client";
+import "./stepper.css";
+import { cn, resolveResponsiveValue } from "@puzzle-ui/core";
+import { Children, isValidElement, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useRovingFocus } from "@puzzle-ui/hooks";
+// src/components/forms/stepper/index.tsx
+const StepperStep = (_props) => null;
+const isStepperStep = (child) => 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] = useState(defaultActiveStep);
+	const [uncontrolledActiveStepId, setUncontrolledActiveStepId] = useState(defaultActiveStepId);
+	const orientations = resolveResponsiveValue(orientation);
+	const steps = 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 = useRovingFocus({
+		items: focusItems,
+		orientation: "both",
+		dir: direction,
+		initialActiveId: activeFocusId
+	});
+	return /* @__PURE__ */ jsx("ol", {
+		...rootProps,
+		className: 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__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ 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__ */ jsxs("span", {
+				className: "puzzle-stepper__label",
+				children: [
+					/* @__PURE__ */ jsx("span", {
+						className: "puzzle-stepper__label-text",
+						children: label
+					}),
+					description != null && /* @__PURE__ */ jsx("span", {
+						className: "puzzle-stepper__description",
+						children: description
+					}),
+					optional != null && /* @__PURE__ */ jsx("span", {
+						className: "puzzle-stepper__optional",
+						children: optional
+					})
+				]
+			})] });
+			return /* @__PURE__ */ jsx("li", {
+				className: 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__ */ 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__ */ jsx("div", {
+					className: "puzzle-stepper__step",
+					children: content
+				})
+			}, id === void 0 ? step.key ?? index : `${typeof id}:${id}`);
+		})
+	});
+};
+const Stepper = Object.assign(StepperRoot, { Step: StepperStep });
+export { Stepper };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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/stepper.css

@@ -0,0 +1,241 @@
+.puzzle-stepper {
+  --puzzle-stepper-indicator-size: 2rem;
+  flex-direction: var(--puzzle-stepper-direction, row);
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+}
+
+.puzzle-stepper__item {
+  flex: var(--puzzle-stepper-item-flex, 1 1 0);
+  min-width: 0;
+  padding-block-end: var(--puzzle-stepper-item-padding, 0);
+  display: flex;
+  position: relative;
+}
+
+.puzzle-stepper__item:not(:last-child):after {
+  z-index: 0;
+  content: "";
+  background: var(--puzzle-color-border);
+  inline-size: var(--puzzle-stepper-connector-inline-size, auto);
+  block-size: var(--puzzle-stepper-connector-block-size, 2px);
+  position: absolute;
+  inset-block-start: var(--puzzle-stepper-connector-block-start, calc(var(--puzzle-stepper-indicator-size) / 2 - 1px));
+  inset-block-end: var(--puzzle-stepper-connector-block-end, auto);
+  inset-inline-start: var(--puzzle-stepper-connector-inline-start, calc(50% + var(--puzzle-stepper-indicator-size) / 2));
+  inset-inline-end: var(--puzzle-stepper-connector-inline-end, calc(-50% + var(--puzzle-stepper-indicator-size) / 2));
+}
+
+.puzzle-stepper__item[data-state="completed"]:after {
+  background: var(--puzzle-color-success);
+}
+
+.puzzle-stepper__step {
+  z-index: 1;
+  flex-direction: var(--puzzle-stepper-step-direction, column);
+  align-items: var(--puzzle-stepper-step-align, center);
+  gap: var(--puzzle-space-2, .5rem);
+  width: 100%;
+  min-width: 0;
+  color: inherit;
+  font: inherit;
+  text-align: var(--puzzle-stepper-step-text-align, center);
+  background: none;
+  border: 0;
+  padding: 0;
+  display: flex;
+  position: relative;
+}
+
+.puzzle-stepper__indicator {
+  flex: 0 0 var(--puzzle-stepper-indicator-size);
+  width: var(--puzzle-stepper-indicator-size);
+  height: var(--puzzle-stepper-indicator-size);
+  border: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border-strong, var(--puzzle-color-border));
+  border-radius: var(--puzzle-radius-full, 9999px);
+  background: var(--puzzle-color-surface);
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-body2, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  transition: background-color var(--puzzle-duration-fast, .15s) ease,
+        border-color var(--puzzle-duration-fast, .15s) ease,
+        color var(--puzzle-duration-fast, .15s) ease;
+  place-items: center;
+  line-height: 1;
+  display: grid;
+}
+
+.puzzle-stepper__item[data-state="active"] .puzzle-stepper__indicator {
+  border-color: var(--puzzle-color-primary);
+  background: var(--puzzle-color-primary);
+  color: var(--puzzle-color-primary-foreground);
+}
+
+.puzzle-stepper__item[data-state="completed"] .puzzle-stepper__indicator {
+  border-color: var(--puzzle-color-success);
+  background: var(--puzzle-color-success);
+  color: var(--puzzle-color-success-foreground);
+}
+
+.puzzle-stepper__item[data-state="error"] .puzzle-stepper__indicator {
+  border-color: var(--puzzle-color-danger);
+  background: var(--puzzle-color-danger);
+  color: var(--puzzle-color-danger-foreground);
+}
+
+.puzzle-stepper__item[data-state="completed"] .puzzle-stepper__indicator[data-has-icon="false"]:after {
+  content: "";
+  border-block-end: 2px solid;
+  border-inline-end: 2px solid;
+  width: .375rem;
+  height: .625rem;
+  transform: translateY(-.1rem) rotate(45deg);
+}
+
+.puzzle-stepper__item[data-state="error"] .puzzle-stepper__indicator[data-has-icon="false"]:after {
+  content: "!";
+  font-weight: 700;
+}
+
+.puzzle-stepper__label {
+  gap: var(--puzzle-space-1, .25rem);
+  flex-direction: column;
+  min-width: 0;
+  display: flex;
+}
+
+.puzzle-stepper__label-text {
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-body2, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-body2, 1.4);
+}
+
+.puzzle-stepper__item[data-state="active"] .puzzle-stepper__label-text {
+  font-weight: var(--puzzle-font-weight-semibold, 600);
+}
+
+.puzzle-stepper__item[data-state="upcoming"] .puzzle-stepper__label-text {
+  color: var(--puzzle-color-text-muted);
+}
+
+.puzzle-stepper__item[data-state="error"] .puzzle-stepper__label-text {
+  color: var(--puzzle-color-danger);
+}
+
+.puzzle-stepper__description, .puzzle-stepper__optional {
+  color: var(--puzzle-color-text-subtle);
+  font-size: var(--puzzle-font-size-caption, .75rem);
+  line-height: var(--puzzle-font-line-height-caption, 1.4);
+}
+
+.puzzle-stepper__item[data-disabled="true"] .puzzle-stepper__label {
+  opacity: .6;
+}
+
+button.puzzle-stepper__step {
+  cursor: pointer;
+}
+
+button.puzzle-stepper__step:disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+button.puzzle-stepper__step:not(:disabled):hover .puzzle-stepper__label-text {
+  color: var(--puzzle-color-primary);
+}
+
+button.puzzle-stepper__step:focus-visible {
+  border-radius: var(--puzzle-radius-sm, .25rem);
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 4px;
+}
+
+.puzzle-stepper[data-orientation-mobile="vertical"] {
+  --puzzle-stepper-direction: column;
+  --puzzle-stepper-item-flex: 0 0 auto;
+  --puzzle-stepper-item-padding: var(--puzzle-space-6, 1.5rem);
+  --puzzle-stepper-step-direction: row;
+  --puzzle-stepper-step-align: flex-start;
+  --puzzle-stepper-step-text-align: start;
+  --puzzle-stepper-connector-block-start: var(--puzzle-stepper-indicator-size);
+  --puzzle-stepper-connector-block-end: calc(var(--puzzle-stepper-indicator-size) / -2);
+  --puzzle-stepper-connector-inline-start: calc(var(--puzzle-stepper-indicator-size) / 2 - 1px);
+  --puzzle-stepper-connector-inline-end: auto;
+  --puzzle-stepper-connector-inline-size: 2px;
+  --puzzle-stepper-connector-block-size: auto;
+}
+
+@media (width >= 768px) {
+  .puzzle-stepper:not([data-orientation-tablet="vertical"]) {
+    --puzzle-stepper-direction: initial;
+    --puzzle-stepper-item-flex: initial;
+    --puzzle-stepper-item-padding: initial;
+    --puzzle-stepper-step-direction: initial;
+    --puzzle-stepper-step-align: initial;
+    --puzzle-stepper-step-text-align: initial;
+    --puzzle-stepper-connector-block-start: initial;
+    --puzzle-stepper-connector-block-end: initial;
+    --puzzle-stepper-connector-inline-start: initial;
+    --puzzle-stepper-connector-inline-end: initial;
+    --puzzle-stepper-connector-inline-size: initial;
+    --puzzle-stepper-connector-block-size: initial;
+  }
+
+  .puzzle-stepper[data-orientation-tablet="vertical"] {
+    --puzzle-stepper-direction: column;
+    --puzzle-stepper-item-flex: 0 0 auto;
+    --puzzle-stepper-item-padding: var(--puzzle-space-6, 1.5rem);
+    --puzzle-stepper-step-direction: row;
+    --puzzle-stepper-step-align: flex-start;
+    --puzzle-stepper-step-text-align: start;
+    --puzzle-stepper-connector-block-start: var(--puzzle-stepper-indicator-size);
+    --puzzle-stepper-connector-block-end: calc(var(--puzzle-stepper-indicator-size) / -2);
+    --puzzle-stepper-connector-inline-start: calc(var(--puzzle-stepper-indicator-size) / 2 - 1px);
+    --puzzle-stepper-connector-inline-end: auto;
+    --puzzle-stepper-connector-inline-size: 2px;
+    --puzzle-stepper-connector-block-size: auto;
+  }
+}
+
+@media (width >= 1024px) {
+  .puzzle-stepper:not([data-orientation-desktop="vertical"]) {
+    --puzzle-stepper-direction: initial;
+    --puzzle-stepper-item-flex: initial;
+    --puzzle-stepper-item-padding: initial;
+    --puzzle-stepper-step-direction: initial;
+    --puzzle-stepper-step-align: initial;
+    --puzzle-stepper-step-text-align: initial;
+    --puzzle-stepper-connector-block-start: initial;
+    --puzzle-stepper-connector-block-end: initial;
+    --puzzle-stepper-connector-inline-start: initial;
+    --puzzle-stepper-connector-inline-end: initial;
+    --puzzle-stepper-connector-inline-size: initial;
+    --puzzle-stepper-connector-block-size: initial;
+  }
+
+  .puzzle-stepper[data-orientation-desktop="vertical"] {
+    --puzzle-stepper-direction: column;
+    --puzzle-stepper-item-flex: 0 0 auto;
+    --puzzle-stepper-item-padding: var(--puzzle-space-6, 1.5rem);
+    --puzzle-stepper-step-direction: row;
+    --puzzle-stepper-step-align: flex-start;
+    --puzzle-stepper-step-text-align: start;
+    --puzzle-stepper-connector-block-start: var(--puzzle-stepper-indicator-size);
+    --puzzle-stepper-connector-block-end: calc(var(--puzzle-stepper-indicator-size) / -2);
+    --puzzle-stepper-connector-inline-start: calc(var(--puzzle-stepper-indicator-size) / 2 - 1px);
+    --puzzle-stepper-connector-inline-end: auto;
+    --puzzle-stepper-connector-inline-size: 2px;
+    --puzzle-stepper-connector-block-size: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-stepper__indicator {
+    transition: none;
+  }
+}

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

@@ -0,0 +1,45 @@
+"use client";
+;/* empty css             */
+let _puzzle_ui_core = require("@puzzle-ui/core");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+// src/components/forms/switch/index.tsx
+const Switch = ({ size = "md", label, description, checked, defaultChecked, disabled = false, required = false, className, id, onChange, "aria-describedby": ariaDescribedBy, ...rest }) => {
+	const generatedId = (0, react.useId)();
+	const inputId = id ?? (description != null ? generatedId : void 0);
+	const descriptionId = description != null ? `${inputId ?? generatedId}-description` : void 0;
+	const describedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
+	const classes = (0, _puzzle_ui_core.cn)("puzzle-switch", `puzzle-switch--${size}`, disabled && "puzzle-switch--disabled", className);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		className: classes,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...rest,
+				id: inputId,
+				className: "puzzle-switch__input",
+				type: "checkbox",
+				role: "switch",
+				...checked !== void 0 ? { checked } : defaultChecked !== void 0 ? { defaultChecked } : {},
+				disabled,
+				required,
+				"aria-describedby": describedBy,
+				onChange
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "puzzle-switch__control",
+				"aria-hidden": "true"
+			}),
+			(label != null || description != null) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: (0, _puzzle_ui_core.cn)("puzzle-switch__content", label == null && "puzzle-switch__content--description-only"),
+				children: [label, description != null && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					id: descriptionId,
+					className: "puzzle-switch__description",
+					children: description
+				})]
+			})
+		]
+	});
+};
+exports.Switch = Switch;
+
+//# sourceMappingURL=index.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["useId","cn"],"sources":["../../../../src/components/forms/switch/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId } from \"react\";\nimport type { ChangeEventHandler, InputHTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./switch.css\";\n\ntype SwitchSize = \"sm\" | \"md\";\n\ntype SwitchProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"children\" | \"onChange\"\n> & {\n  size?: SwitchSize;\n  label?: ReactNode;\n  description?: ReactNode;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n};\n\nconst Switch = ({\n  size = \"md\",\n  label,\n  description,\n  checked,\n  defaultChecked,\n  disabled = false,\n  required = false,\n  className,\n  id,\n  onChange,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: SwitchProps) => {\n  const generatedId = useId();\n\n  const inputId = id ?? (description != null ? generatedId : undefined);\n  const descriptionId =\n    description != null ? `${inputId ?? generatedId}-description` : undefined;\n\n  const describedBy =\n    [ariaDescribedBy, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n  const classes = cn(\n    \"puzzle-switch\",\n    `puzzle-switch--${size}`,\n    disabled && \"puzzle-switch--disabled\",\n    className,\n  );\n\n  return (\n    <label className={classes}>\n      <input\n        {...rest}\n        id={inputId}\n        className=\"puzzle-switch__input\"\n        type=\"checkbox\"\n        role=\"switch\"\n        {...(checked !== undefined\n          ? { checked }\n          : defaultChecked !== undefined\n            ? { defaultChecked }\n            : {})}\n        disabled={disabled}\n        required={required}\n        aria-describedby={describedBy}\n        onChange={onChange}\n      />\n\n      <span className=\"puzzle-switch__control\" aria-hidden=\"true\" />\n\n      {(label != null || description != null) && (\n        <span\n          className={cn(\n            \"puzzle-switch__content\",\n            label == null && \"puzzle-switch__content--description-only\",\n          )}\n        >\n          {label}\n\n          {description != null && (\n            <span id={descriptionId} className=\"puzzle-switch__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n    </label>\n  );\n};\n\nexport { Switch, type SwitchProps, type SwitchSize };\n"],"mappings":";;;;;;AAsBA,MAAM,UAAU,EACd,OAAO,MACP,OACA,aACA,SACA,gBACA,WAAW,OACX,WAAW,OACX,WACA,IACA,UACA,oBAAoB,iBACpB,GAAG,WACc;CACjB,MAAM,eAAA,GAAcA,MAAAA,MAAAA,CAAM;CAE1B,MAAM,UAAU,OAAO,eAAe,OAAO,cAAc,KAAA;CAC3D,MAAM,gBACJ,eAAe,OAAO,GAAG,WAAW,YAAY,gBAAgB,KAAA;CAElE,MAAM,cACJ,CAAC,iBAAiB,aAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAEhE,MAAM,WAAA,GAAUC,gBAAAA,GAAAA,CACd,iBACA,kBAAkB,QAClB,YAAY,2BACZ,SACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,SAAD;EAAO,WAAW;EAAlB,UAAA;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,WAAU;IACV,MAAK;IACL,MAAK;IACL,GAAK,YAAY,KAAA,IACb,EAAE,QAAQ,IACV,mBAAmB,KAAA,IACjB,EAAE,eAAe,IACjB,CAAC;IACG;IACA;IACV,oBAAkB;IACR;GACX,CAAA;GAED,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;IAAM,WAAU;IAAyB,eAAY;GAAQ,CAAA;IAE3D,SAAS,QAAQ,eAAe,SAChC,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;IACE,YAAA,GAAWA,gBAAAA,GAAAA,CACT,0BACA,SAAS,QAAQ,0CACnB;IAJF,UAAA,CAMG,OAEA,eAAe,QACd,iBAAA,GAAA,kBAAA,IAAA,CAAC,QAAD;KAAM,IAAI;KAAe,WAAU;KAChC,UAAA;IACG,CAAA,CAEJ;;EAEH;;AAEX"}

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

@@ -0,0 +1,11 @@
+import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+type SwitchSize = "sm" | "md";
+type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "onChange"> & {
+  size?: SwitchSize;
+  label?: ReactNode;
+  description?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+};
+declare const Switch: ({ size, label, description, checked, defaultChecked, disabled, required, className, id, onChange, "aria-describedby": ariaDescribedBy, ...rest }: SwitchProps) => import("react").JSX.Element;
+export { Switch, type SwitchProps, type SwitchSize };

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

@@ -0,0 +1,11 @@
+import { ChangeEventHandler, InputHTMLAttributes, ReactNode } from "react";
+type SwitchSize = "sm" | "md";
+type SwitchProps = Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "children" | "onChange"> & {
+  size?: SwitchSize;
+  label?: ReactNode;
+  description?: ReactNode;
+  onChange?: ChangeEventHandler<HTMLInputElement>;
+  className?: string;
+};
+declare const Switch: ({ size, label, description, checked, defaultChecked, disabled, required, className, id, onChange, "aria-describedby": ariaDescribedBy, ...rest }: SwitchProps) => import("react").JSX.Element;
+export { Switch, type SwitchProps, type SwitchSize };

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

@@ -0,0 +1,45 @@
+"use client";
+import "./switch.css";
+import { cn } from "@puzzle-ui/core";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/switch/index.tsx
+const Switch = ({ size = "md", label, description, checked, defaultChecked, disabled = false, required = false, className, id, onChange, "aria-describedby": ariaDescribedBy, ...rest }) => {
+	const generatedId = useId();
+	const inputId = id ?? (description != null ? generatedId : void 0);
+	const descriptionId = description != null ? `${inputId ?? generatedId}-description` : void 0;
+	const describedBy = [ariaDescribedBy, descriptionId].filter(Boolean).join(" ") || void 0;
+	const classes = cn("puzzle-switch", `puzzle-switch--${size}`, disabled && "puzzle-switch--disabled", className);
+	return /* @__PURE__ */ jsxs("label", {
+		className: classes,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				...rest,
+				id: inputId,
+				className: "puzzle-switch__input",
+				type: "checkbox",
+				role: "switch",
+				...checked !== void 0 ? { checked } : defaultChecked !== void 0 ? { defaultChecked } : {},
+				disabled,
+				required,
+				"aria-describedby": describedBy,
+				onChange
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: "puzzle-switch__control",
+				"aria-hidden": "true"
+			}),
+			(label != null || description != null) && /* @__PURE__ */ jsxs("span", {
+				className: cn("puzzle-switch__content", label == null && "puzzle-switch__content--description-only"),
+				children: [label, description != null && /* @__PURE__ */ jsx("span", {
+					id: descriptionId,
+					className: "puzzle-switch__description",
+					children: description
+				})]
+			})
+		]
+	});
+};
+export { Switch };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/switch/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { useId } from \"react\";\nimport type { ChangeEventHandler, InputHTMLAttributes, ReactNode } from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport \"./switch.css\";\n\ntype SwitchSize = \"sm\" | \"md\";\n\ntype SwitchProps = Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"type\" | \"size\" | \"children\" | \"onChange\"\n> & {\n  size?: SwitchSize;\n  label?: ReactNode;\n  description?: ReactNode;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n};\n\nconst Switch = ({\n  size = \"md\",\n  label,\n  description,\n  checked,\n  defaultChecked,\n  disabled = false,\n  required = false,\n  className,\n  id,\n  onChange,\n  \"aria-describedby\": ariaDescribedBy,\n  ...rest\n}: SwitchProps) => {\n  const generatedId = useId();\n\n  const inputId = id ?? (description != null ? generatedId : undefined);\n  const descriptionId =\n    description != null ? `${inputId ?? generatedId}-description` : undefined;\n\n  const describedBy =\n    [ariaDescribedBy, descriptionId].filter(Boolean).join(\" \") || undefined;\n\n  const classes = cn(\n    \"puzzle-switch\",\n    `puzzle-switch--${size}`,\n    disabled && \"puzzle-switch--disabled\",\n    className,\n  );\n\n  return (\n    <label className={classes}>\n      <input\n        {...rest}\n        id={inputId}\n        className=\"puzzle-switch__input\"\n        type=\"checkbox\"\n        role=\"switch\"\n        {...(checked !== undefined\n          ? { checked }\n          : defaultChecked !== undefined\n            ? { defaultChecked }\n            : {})}\n        disabled={disabled}\n        required={required}\n        aria-describedby={describedBy}\n        onChange={onChange}\n      />\n\n      <span className=\"puzzle-switch__control\" aria-hidden=\"true\" />\n\n      {(label != null || description != null) && (\n        <span\n          className={cn(\n            \"puzzle-switch__content\",\n            label == null && \"puzzle-switch__content--description-only\",\n          )}\n        >\n          {label}\n\n          {description != null && (\n            <span id={descriptionId} className=\"puzzle-switch__description\">\n              {description}\n            </span>\n          )}\n        </span>\n      )}\n    </label>\n  );\n};\n\nexport { Switch, type SwitchProps, type SwitchSize };\n"],"mappings":";;;;;;AAsBA,MAAM,UAAU,EACd,OAAO,MACP,OACA,aACA,SACA,gBACA,WAAW,OACX,WAAW,OACX,WACA,IACA,UACA,oBAAoB,iBACpB,GAAG,WACc;CACjB,MAAM,cAAc,MAAM;CAE1B,MAAM,UAAU,OAAO,eAAe,OAAO,cAAc,KAAA;CAC3D,MAAM,gBACJ,eAAe,OAAO,GAAG,WAAW,YAAY,gBAAgB,KAAA;CAElE,MAAM,cACJ,CAAC,iBAAiB,aAAa,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAEhE,MAAM,UAAU,GACd,iBACA,kBAAkB,QAClB,YAAY,2BACZ,SACF;CAEA,OACE,qBAAC,SAAD;EAAO,WAAW;EAAlB,UAAA;GACE,oBAAC,SAAD;IACE,GAAI;IACJ,IAAI;IACJ,WAAU;IACV,MAAK;IACL,MAAK;IACL,GAAK,YAAY,KAAA,IACb,EAAE,QAAQ,IACV,mBAAmB,KAAA,IACjB,EAAE,eAAe,IACjB,CAAC;IACG;IACA;IACV,oBAAkB;IACR;GACX,CAAA;GAED,oBAAC,QAAD;IAAM,WAAU;IAAyB,eAAY;GAAQ,CAAA;IAE3D,SAAS,QAAQ,eAAe,SAChC,qBAAC,QAAD;IACE,WAAW,GACT,0BACA,SAAS,QAAQ,0CACnB;IAJF,UAAA,CAMG,OAEA,eAAe,QACd,oBAAC,QAAD;KAAM,IAAI;KAAe,WAAU;KAChC,UAAA;IACG,CAAA,CAEJ;;EAEH;;AAEX"}

package/dist/components/forms/switch/switch.css

@@ -0,0 +1,142 @@
+.puzzle-switch {
+  --puzzle-switch-width: 2.5rem;
+  --puzzle-switch-height: 1.375rem;
+  --puzzle-switch-thumb-size: 1rem;
+  align-items: center;
+  gap: var(--puzzle-space-3, .75rem);
+  width: fit-content;
+  color: var(--puzzle-color-text);
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-switch--sm {
+  --puzzle-switch-width: 2rem;
+  --puzzle-switch-height: 1.125rem;
+  --puzzle-switch-thumb-size: .75rem;
+}
+
+.puzzle-switch--disabled {
+  cursor: not-allowed;
+  opacity: .6;
+}
+
+.puzzle-switch__input {
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  position: absolute;
+  overflow: hidden;
+}
+
+.puzzle-switch__control {
+  box-sizing: border-box;
+  width: var(--puzzle-switch-width);
+  height: var(--puzzle-switch-height);
+  border: 1px solid var(--puzzle-color-border-strong);
+  border-radius: var(--puzzle-radius-full, 9999px);
+  background-color: var(--puzzle-color-surface-sunken);
+  transition: background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  flex: none;
+  align-items: center;
+  padding: 2px;
+  display: inline-flex;
+  position: relative;
+}
+
+.puzzle-switch__control:after {
+  width: var(--puzzle-switch-thumb-size);
+  height: var(--puzzle-switch-thumb-size);
+  background-color: var(--puzzle-color-surface);
+  content: "";
+  transition: transform var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  border-radius: 50%;
+  display: block;
+  box-shadow: 0 1px 2px #0000002e;
+}
+
+.puzzle-switch__input:checked + .puzzle-switch__control {
+  border-color: var(--puzzle-color-primary);
+  background-color: var(--puzzle-color-primary);
+}
+
+.puzzle-switch__input:checked + .puzzle-switch__control:after {
+  background-color: var(--puzzle-color-primary-foreground);
+  transform: translateX(calc(var(--puzzle-switch-width) - var(--puzzle-switch-thumb-size) - 6px));
+}
+
+.puzzle-switch__input:focus-visible + .puzzle-switch__control {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-switch__content {
+  min-width: 0;
+  color: var(--puzzle-color-text);
+  font-size: var(--puzzle-font-size-sm, .875rem);
+  font-weight: var(--puzzle-font-weight-medium, 500);
+  line-height: var(--puzzle-font-line-height-body2, 1.5);
+  flex-direction: column;
+  gap: .125rem;
+  display: flex;
+}
+
+.puzzle-switch__description, .puzzle-switch__content--description-only {
+  color: var(--puzzle-color-text-muted);
+  font-size: var(--puzzle-font-size-xs, .75rem);
+  font-weight: var(--puzzle-font-weight-normal, 400);
+  line-height: var(--puzzle-font-line-height-body2, 1.5);
+}
+
+@media (forced-colors: active) {
+  .puzzle-switch--disabled {
+    opacity: 1;
+    color: graytext;
+  }
+
+  .puzzle-switch--disabled .puzzle-switch__content, .puzzle-switch--disabled .puzzle-switch__description {
+    color: graytext;
+  }
+
+  .puzzle-switch__control {
+    background-color: canvas;
+    border-color: canvastext;
+  }
+
+  .puzzle-switch__control:after {
+    box-shadow: none;
+    background-color: canvastext;
+  }
+
+  .puzzle-switch__input:checked + .puzzle-switch__control {
+    background-color: highlight;
+    border-color: highlight;
+  }
+
+  .puzzle-switch__input:checked + .puzzle-switch__control:after {
+    background-color: highlighttext;
+  }
+
+  .puzzle-switch__input:disabled + .puzzle-switch__control, .puzzle-switch__input:disabled:checked + .puzzle-switch__control {
+    background-color: canvas;
+    border-color: graytext;
+  }
+
+  .puzzle-switch__input:disabled + .puzzle-switch__control:after {
+    background-color: graytext;
+  }
+
+  .puzzle-switch__input:focus-visible + .puzzle-switch__control {
+    outline-color: highlight;
+  }
+}