@puzzle-ui/ui 0.0.0-stage → 0.1.0

package/dist/components/forms/form-field/index.js

@@ -0,0 +1,61 @@
+import { Label } from "../label/index.js";
+import { resolveFormFieldState } from "./form-field-state.js";
+import "./form-field.css";
+import { cn } from "@puzzle-ui/core";
+import { cloneElement, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+// src/components/forms/form-field/index.tsx
+const FormField = ({ label, description, error, invalid, required = false, disabled = false, controlId, optional = false, className, children, ...rootProps }) => {
+	const generatedId = useId();
+	const child = children;
+	const childProps = child.props;
+	const { resolvedControlId, isInvalid, errorContent, hasError, descriptionId, errorId, describedBy } = resolveFormFieldState({
+		generatedId,
+		controlId,
+		childProps,
+		description,
+		error,
+		invalid
+	});
+	const control = cloneElement(child, {
+		id: resolvedControlId,
+		required: required || childProps.required === true,
+		disabled: disabled || childProps.disabled === true,
+		"aria-describedby": describedBy,
+		"aria-invalid": isInvalid ? true : childProps["aria-invalid"]
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rootProps,
+		className: cn("puzzle-form-field", className),
+		"data-invalid": isInvalid || void 0,
+		"data-disabled": disabled || void 0,
+		children: [
+			label != null && /* @__PURE__ */ jsx(Label, {
+				htmlFor: resolvedControlId,
+				required,
+				optional,
+				className: "puzzle-form-field__label",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "puzzle-form-field__control",
+				children: control
+			}),
+			description != null && /* @__PURE__ */ jsx("div", {
+				id: descriptionId,
+				className: "puzzle-form-field__description",
+				children: description
+			}),
+			hasError && /* @__PURE__ */ jsx("div", {
+				id: errorId,
+				className: "puzzle-form-field__error",
+				"aria-live": "polite",
+				"aria-atomic": "true",
+				children: errorContent
+			})
+		]
+	});
+};
+export { FormField };
+
+//# sourceMappingURL=index.js.map

package/dist/components/forms/form-field/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../../src/components/forms/form-field/index.tsx"],"sourcesContent":["import {\n  cloneElement,\n  useId,\n  type ComponentPropsWithoutRef,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\n\nimport { Label } from \"../label\";\nimport { resolveFormFieldState } from \"./form-field-state\";\n\nimport \"./form-field.css\";\n\ntype FormFieldProps = Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> & {\n  /** Visible label associated with the control. */\n  label?: ReactNode;\n\n  /** Supporting text displayed below the control. */\n  description?: ReactNode;\n\n  /** Validation error message. */\n  error?: ReactNode | boolean;\n\n  /** Explicitly controls the invalid state. Defaults to whether an error exists. */\n  invalid?: boolean;\n\n  /** Marks the control as required. */\n  required?: boolean;\n\n  /** Disables the control. */\n  disabled?: boolean;\n\n  /** ID applied to the actual form control. */\n  controlId?: string;\n\n  /** Displays an optional indicator beside the label. */\n  optional?: boolean;\n\n  /** A single Puzzle control or native form element. */\n  children: ReactElement;\n};\n\nconst FormField = ({\n  label,\n  description,\n  error,\n  invalid,\n  required = false,\n  disabled = false,\n  controlId,\n  optional = false,\n  className,\n  children,\n  ...rootProps\n}: FormFieldProps) => {\n  const generatedId = useId();\n\n  const child = children as ReactElement<Record<string, unknown>>;\n  const childProps = child.props;\n\n  const {\n    resolvedControlId,\n    isInvalid,\n    errorContent,\n    hasError,\n    descriptionId,\n    errorId,\n    describedBy,\n  } = resolveFormFieldState({\n    generatedId,\n    controlId,\n    childProps,\n    description,\n    error,\n    invalid,\n  });\n\n  const control = cloneElement(child, {\n    id: resolvedControlId,\n    required: required || childProps.required === true,\n    disabled: disabled || childProps.disabled === true,\n    \"aria-describedby\": describedBy,\n    \"aria-invalid\": isInvalid ? true : childProps[\"aria-invalid\"],\n  });\n\n  return (\n    <div\n      {...rootProps}\n      className={cn(\"puzzle-form-field\", className)}\n      data-invalid={isInvalid || undefined}\n      data-disabled={disabled || undefined}\n    >\n      {label != null && (\n        <Label\n          htmlFor={resolvedControlId}\n          required={required}\n          optional={optional}\n          className=\"puzzle-form-field__label\"\n        >\n          {label}\n        </Label>\n      )}\n\n      <div className=\"puzzle-form-field__control\">{control}</div>\n\n      {description != null && (\n        <div id={descriptionId} className=\"puzzle-form-field__description\">\n          {description}\n        </div>\n      )}\n\n      {hasError && (\n        <div\n          id={errorId}\n          className=\"puzzle-form-field__error\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {errorContent}\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport { FormField, type FormFieldProps };\n"],"mappings":";;;;;;;AA4CA,MAAM,aAAa,EACjB,OACA,aACA,OACA,SACA,WAAW,OACX,WAAW,OACX,WACA,WAAW,OACX,WACA,UACA,GAAG,gBACiB;CACpB,MAAM,cAAc,MAAM;CAE1B,MAAM,QAAQ;CACd,MAAM,aAAa,MAAM;CAEzB,MAAM,EACJ,mBACA,WACA,cACA,UACA,eACA,SACA,gBACE,sBAAsB;EACxB;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,UAAU,aAAa,OAAO;EAClC,IAAI;EACJ,UAAU,YAAY,WAAW,aAAa;EAC9C,UAAU,YAAY,WAAW,aAAa;EAC9C,oBAAoB;EACpB,gBAAgB,YAAY,OAAO,WAAW;CAChD,CAAC;CAED,OACE,qBAAC,OAAD;EACE,GAAI;EACJ,WAAW,GAAG,qBAAqB,SAAS;EAC5C,gBAAc,aAAa,KAAA;EAC3B,iBAAe,YAAY,KAAA;EAJ7B,UAAA;GAMG,SAAS,QACR,oBAAC,OAAD;IACE,SAAS;IACC;IACA;IACV,WAAU;IAET,UAAA;GACI,CAAA;GAGT,oBAAC,OAAD;IAAK,WAAU;IAA8B,UAAA;GAAa,CAAA;GAEzD,eAAe,QACd,oBAAC,OAAD;IAAK,IAAI;IAAe,WAAU;IAC/B,UAAA;GACE,CAAA;GAGN,YACC,oBAAC,OAAD;IACE,IAAI;IACJ,WAAU;IACV,aAAU;IACV,eAAY;IAEX,UAAA;GACE,CAAA;EAEJ;;AAET"}

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

@@ -0,0 +1,4 @@
+import { TextInput, TextInputProps, TextInputType } from "./text-input.cjs";
+import { TextAreaInput, TextAreaInputProps } from "./text-area-input.cjs";
+import { NumberInput, NumberInputProps } from "./number-input.cjs";
+export { NumberInput, type NumberInputProps, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, type TextInputType };

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

@@ -0,0 +1,4 @@
+import { TextInput, TextInputProps, TextInputType } from "./text-input.js";
+import { TextAreaInput, TextAreaInputProps } from "./text-area-input.js";
+import { NumberInput, NumberInputProps } from "./number-input.js";
+export { NumberInput, type NumberInputProps, TextAreaInput, type TextAreaInputProps, TextInput, type TextInputProps, type TextInputType };

package/dist/components/forms/input/input.css

@@ -0,0 +1,153 @@
+.puzzle-input {
+  box-sizing: border-box;
+  align-items: center;
+  gap: var(--puzzle-space-2, .5rem);
+  width: 100%;
+  min-width: 0;
+  min-height: 2.5rem;
+  padding: 0 var(--puzzle-space-3, .75rem);
+  border: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  background: var(--puzzle-color-surface);
+  color: var(--puzzle-color-text);
+  transition: border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        background-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  display: flex;
+}
+
+.puzzle-input:focus-within {
+  border-color: var(--puzzle-color-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--puzzle-color-ring), transparent 82%);
+}
+
+.puzzle-input[data-disabled="true"] {
+  opacity: .6;
+  cursor: not-allowed;
+}
+
+.puzzle-input__control {
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.375rem;
+  color: inherit;
+  font: inherit;
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  background: none;
+  border: 0;
+  outline: 0;
+  flex: auto;
+  padding: 0;
+  display: block;
+}
+
+.puzzle-input__control::placeholder, .puzzle-input--textarea::placeholder {
+  color: var(--puzzle-color-text-subtle, var(--puzzle-color-text-muted));
+  opacity: 1;
+}
+
+.puzzle-input__control:disabled {
+  cursor: not-allowed;
+}
+
+.puzzle-input__affix {
+  color: var(--puzzle-color-text-muted);
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  display: inline-flex;
+}
+
+.puzzle-input__affix > svg {
+  width: 1.125em;
+  height: 1.125em;
+}
+
+.puzzle-input__icon-button, .puzzle-input__stepper {
+  color: var(--puzzle-color-text-muted);
+  cursor: pointer;
+  touch-action: manipulation;
+  background: none;
+  border: 0;
+  flex: none;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  display: inline-flex;
+}
+
+.puzzle-input__icon-button {
+  border-radius: var(--puzzle-radius-sm, .375rem);
+  width: 2rem;
+  height: 2rem;
+}
+
+.puzzle-input__icon-button:hover:not(:disabled), .puzzle-input__stepper:hover:not(:disabled) {
+  color: var(--puzzle-color-text);
+}
+
+.puzzle-input__icon-button:focus-visible, .puzzle-input__stepper:focus-visible {
+  outline: 2px solid var(--puzzle-color-ring);
+  outline-offset: 2px;
+}
+
+.puzzle-input__icon-button:disabled, .puzzle-input__stepper:disabled {
+  opacity: .35;
+  cursor: not-allowed;
+}
+
+.puzzle-input--textarea {
+  width: 100%;
+  min-height: 0;
+  padding: var(--puzzle-space-2, .5rem) var(--puzzle-space-3, .75rem);
+  font: inherit;
+  line-height: var(--puzzle-font-line-height-normal, 1.5);
+  color: var(--puzzle-color-text);
+  background: var(--puzzle-color-surface);
+  border: var(--puzzle-border-width, 1px) solid var(--puzzle-color-border);
+  border-radius: var(--puzzle-radius-md, .5rem);
+  transition: border-color var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease),
+        box-shadow var(--puzzle-duration-fast, .15s) var(--puzzle-easing-standard, ease);
+  outline: 0;
+  display: block;
+}
+
+.puzzle-input--textarea:focus {
+  border-color: var(--puzzle-color-ring);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--puzzle-color-ring), transparent 82%);
+}
+
+.puzzle-input--textarea:disabled {
+  opacity: .6;
+  cursor: not-allowed;
+}
+
+.puzzle-input--number {
+  gap: var(--puzzle-space-2, .5rem);
+  padding-inline: .1rem;
+}
+
+.puzzle-input--number .puzzle-input__control {
+  text-align: center;
+  font-variant-numeric: tabular-nums;
+}
+
+.puzzle-input__stepper {
+  border-radius: var(--puzzle-radius-sm, .375rem);
+  -webkit-user-select: none;
+  user-select: none;
+  width: 2rem;
+  height: 2rem;
+}
+
+.puzzle-input__stepper svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .puzzle-input, .puzzle-input--textarea {
+    transition: none;
+  }
+}

package/dist/components/forms/input/number-input.cjs

@@ -0,0 +1,192 @@
+"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_icons = require("@puzzle-ui/icons");
+// src/components/forms/input/number-input.tsx
+const clamp = (value, min, max) => Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));
+const getPrecision = (value) => {
+	const valueString = String(value);
+	if (valueString.includes("e-")) return Number(valueString.split("e-")[1]) || 0;
+	return valueString.split(".")[1]?.length ?? 0;
+};
+const NumberInput = ({ value, initialValue = 0, onChange, min, max, step = 1, largeStep, fractionDigits = getPrecision(step), longPressDelay = 450, repeatInterval = 120, decrementLabel = "Decrease value", incrementLabel = "Increase value", disabled, readOnly, className, onBlur, onFocus, onKeyDown, ...inputProps }) => {
+	const isControlled = value !== void 0;
+	const digits = Math.min(12, Math.max(0, Math.trunc(fractionDigits)));
+	const factor = 10 ** digits;
+	const safeStep = Number.isFinite(step) && step > 0 ? step : 1;
+	const safeLargeStep = largeStep !== void 0 && Number.isFinite(largeStep) && largeStep > 0 ? largeStep : safeStep * 10;
+	const allowsNegative = min === void 0 || min < 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(() => clamp(Number.isFinite(initialValue) ? initialValue : 0, min, max));
+	const currentValue = clamp(isControlled ? value : internalValue, min, max);
+	const [draft, setDraft] = (0, react.useState)(() => String(Number(currentValue.toFixed(digits))));
+	const currentValueRef = (0, react.useRef)(currentValue);
+	const focusedRef = (0, react.useRef)(false);
+	const holdTimerRef = (0, react.useRef)(null);
+	const repeatTimerRef = (0, react.useRef)(null);
+	const holdStartedAtRef = (0, react.useRef)(0);
+	const holdDirectionRef = (0, react.useRef)(1);
+	currentValueRef.current = currentValue;
+	(0, react.useEffect)(() => {
+		if (!focusedRef.current) setDraft(String(Number(currentValue.toFixed(digits))));
+	}, [currentValue, digits]);
+	const commit = (0, react.useCallback)((nextValue) => {
+		const rounded = Math.round(clamp(nextValue, min, max) * factor) / factor;
+		if (!Number.isFinite(rounded) || rounded === currentValueRef.current) return;
+		currentValueRef.current = rounded;
+		if (!isControlled) setInternalValue(rounded);
+		setDraft(String(rounded));
+		onChange?.(rounded);
+	}, [
+		factor,
+		isControlled,
+		max,
+		min,
+		onChange
+	]);
+	const changeBy = (0, react.useCallback)((direction, amount = safeStep) => {
+		const next = Math.round((currentValueRef.current + direction * amount) * factor) / factor;
+		commit(next);
+	}, [
+		commit,
+		factor,
+		safeStep
+	]);
+	const stopHold = (0, react.useCallback)(() => {
+		if (holdTimerRef.current) clearTimeout(holdTimerRef.current);
+		if (repeatTimerRef.current) clearTimeout(repeatTimerRef.current);
+		holdTimerRef.current = null;
+		repeatTimerRef.current = null;
+	}, []);
+	const scheduleRepeat = (0, react.useCallback)(() => {
+		const elapsed = Date.now() - holdStartedAtRef.current;
+		const interval = Math.max(45, repeatInterval - Math.floor(elapsed / 1800) * 20);
+		repeatTimerRef.current = setTimeout(() => {
+			changeBy(holdDirectionRef.current);
+			scheduleRepeat();
+		}, interval);
+	}, [changeBy, repeatInterval]);
+	const startHold = (direction) => (event) => {
+		if (disabled || readOnly || event.button !== 0) return;
+		event.preventDefault();
+		stopHold();
+		holdDirectionRef.current = direction;
+		holdStartedAtRef.current = Date.now();
+		changeBy(direction);
+		holdTimerRef.current = setTimeout(scheduleRepeat, longPressDelay);
+	};
+	const handleStepperKeyDown = (direction) => (event) => {
+		if (event.key !== " " && event.key !== "Enter") return;
+		event.preventDefault();
+		changeBy(direction);
+	};
+	const handleInputKeyDown = (event) => {
+		onKeyDown?.(event);
+		if (event.defaultPrevented || disabled || readOnly) return;
+		switch (event.key) {
+			case "ArrowUp":
+				changeBy(1);
+				break;
+			case "ArrowDown":
+				changeBy(-1);
+				break;
+			case "PageUp":
+				changeBy(1, safeLargeStep);
+				break;
+			case "PageDown":
+				changeBy(-1, safeLargeStep);
+				break;
+			case "Home":
+				if (min === void 0) return;
+				commit(min);
+				break;
+			case "End":
+				if (max === void 0) return;
+				commit(max);
+				break;
+			default: return;
+		}
+		event.preventDefault();
+	};
+	const handleInputChange = (event) => {
+		const nextDraft = event.target.value;
+		setDraft(nextDraft);
+		if (nextDraft.trim() === "" || nextDraft === "-" || nextDraft === "." || nextDraft === "-.") return;
+		const parsed = Number(nextDraft.replace(",", "."));
+		if (Number.isFinite(parsed)) commit(parsed);
+	};
+	const handleBlur = (event) => {
+		focusedRef.current = false;
+		const parsed = Number(draft.replace(",", "."));
+		const nextValue = draft.trim() !== "" && Number.isFinite(parsed) ? clamp(Math.round(parsed * factor) / factor, min, max) : currentValueRef.current;
+		commit(nextValue);
+		setDraft(String(Number(nextValue.toFixed(digits))));
+		onBlur?.(event);
+	};
+	(0, react.useEffect)(() => stopHold, [stopHold]);
+	const atMinimum = min !== void 0 && currentValue <= min;
+	const atMaximum = max !== void 0 && currentValue >= max;
+	const trimmedDraft = draft.trim();
+	const draftIsIncomplete = trimmedDraft === "" || trimmedDraft === "-" || trimmedDraft === "." || trimmedDraft === "-.";
+	const draftValue = Number(trimmedDraft.replace(",", "."));
+	const draftIsInvalid = !draftIsIncomplete && (!Number.isFinite(draftValue) || min !== void 0 && draftValue < min || max !== void 0 && draftValue > max);
+	const stepperDisabled = disabled || readOnly;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _puzzle_ui_core.cn)("puzzle-input", "puzzle-input--number", className),
+		"data-disabled": disabled || void 0,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "puzzle-input__stepper",
+				"aria-label": decrementLabel,
+				tabIndex: -1,
+				disabled: stepperDisabled || atMinimum,
+				onPointerDown: startHold(-1),
+				onPointerUp: stopHold,
+				onPointerLeave: stopHold,
+				onPointerCancel: stopHold,
+				onKeyDown: handleStepperKeyDown(-1),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, { name: "lucide:minus" })
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				...inputProps,
+				type: "text",
+				role: "spinbutton",
+				"aria-valuenow": currentValue,
+				"aria-valuemin": min,
+				"aria-valuemax": max,
+				"aria-invalid": draftIsInvalid || inputProps["aria-invalid"],
+				inputMode: allowsNegative ? "text" : digits > 0 ? "decimal" : "numeric",
+				pattern: `${allowsNegative ? "-?" : ""}[0-9]*${digits > 0 ? "[.,]?[0-9]*" : ""}`,
+				disabled,
+				readOnly,
+				value: draft,
+				className: "puzzle-input__control",
+				onFocus: (event) => {
+					focusedRef.current = true;
+					onFocus?.(event);
+				},
+				onChange: handleInputChange,
+				onKeyDown: handleInputKeyDown,
+				onBlur: handleBlur
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: "puzzle-input__stepper",
+				"aria-label": incrementLabel,
+				tabIndex: -1,
+				disabled: stepperDisabled || atMaximum,
+				onPointerDown: startHold(1),
+				onPointerUp: stopHold,
+				onPointerLeave: stopHold,
+				onPointerCancel: stopHold,
+				onKeyDown: handleStepperKeyDown(1),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_puzzle_ui_icons.Icon, { name: "lucide:plus" })
+			})
+		]
+	});
+};
+exports.NumberInput = NumberInput;
+
+//# sourceMappingURL=number-input.cjs.map

package/dist/components/forms/input/number-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"number-input.cjs","names":["useState","useRef","useCallback","cn","Icon"],"sources":["../../../../src/components/forms/input/number-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n  type ComponentPropsWithoutRef,\n  type PointerEvent as ReactPointerEvent,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ChangeEvent,\n  type FocusEvent,\n} from \"react\";\n\nimport { cn } from \"@puzzle-ui/core\";\nimport { Icon } from \"@puzzle-ui/icons\";\n\nimport \"./input.css\";\n\ntype NumberInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"type\" | \"value\" | \"defaultValue\" | \"onChange\" | \"step\" | \"min\" | \"max\"\n> & {\n  value?: number;\n  initialValue?: number;\n\n  onChange?: (value: number) => void;\n\n  min?: number;\n  max?: number;\n  step?: number;\n\n  /** Amount applied by PageUp and PageDown. Defaults to ten times `step`. */\n  largeStep?: number;\n\n  fractionDigits?: number;\n\n  longPressDelay?: number;\n  repeatInterval?: number;\n\n  /** Accessible label of the decrement button. */\n  decrementLabel?: string;\n\n  /** Accessible label of the increment button. */\n  incrementLabel?: string;\n};\n\ntype Direction = -1 | 1;\n\nconst clamp = (value: number, min?: number, max?: number) =>\n  Math.min(max ?? Infinity, Math.max(min ?? -Infinity, value));\n\nconst getPrecision = (value: number) => {\n  const valueString = String(value);\n\n  if (valueString.includes(\"e-\")) {\n    return Number(valueString.split(\"e-\")[1]) || 0;\n  }\n\n  return valueString.split(\".\")[1]?.length ?? 0;\n};\n\nconst NumberInput = ({\n  value,\n  initialValue = 0,\n  onChange,\n\n  min,\n  max,\n  step = 1,\n  largeStep,\n\n  fractionDigits = getPrecision(step),\n\n  longPressDelay = 450,\n  repeatInterval = 120,\n\n  decrementLabel = \"Decrease value\",\n  incrementLabel = \"Increase value\",\n\n  disabled,\n  readOnly,\n  className,\n\n  onBlur,\n  onFocus,\n  onKeyDown,\n\n  ...inputProps\n}: NumberInputProps) => {\n  const isControlled = value !== undefined;\n\n  const digits = Math.min(12, Math.max(0, Math.trunc(fractionDigits)));\n\n  const factor = 10 ** digits;\n\n  const safeStep = Number.isFinite(step) && step > 0 ? step : 1;\n\n  const safeLargeStep =\n    largeStep !== undefined && Number.isFinite(largeStep) && largeStep > 0\n      ? largeStep\n      : safeStep * 10;\n\n  const allowsNegative = min === undefined || min < 0;\n\n  const [internalValue, setInternalValue] = useState(() =>\n    clamp(Number.isFinite(initialValue) ? initialValue : 0, min, max),\n  );\n\n  const currentValue = clamp(isControlled ? value : internalValue, min, max);\n\n  const [draft, setDraft] = useState(() =>\n    String(Number(currentValue.toFixed(digits))),\n  );\n\n  const currentValueRef = useRef(currentValue);\n  const focusedRef = useRef(false);\n\n  const holdTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const repeatTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n  const holdStartedAtRef = useRef(0);\n  const holdDirectionRef = useRef<Direction>(1);\n\n  currentValueRef.current = currentValue;\n\n  useEffect(() => {\n    if (!focusedRef.current) {\n      setDraft(String(Number(currentValue.toFixed(digits))));\n    }\n  }, [currentValue, digits]);\n\n  const commit = useCallback(\n    (nextValue: number) => {\n      const rounded = Math.round(clamp(nextValue, min, max) * factor) / factor;\n\n      if (!Number.isFinite(rounded) || rounded === currentValueRef.current) {\n        return;\n      }\n\n      currentValueRef.current = rounded;\n\n      if (!isControlled) {\n        setInternalValue(rounded);\n      }\n\n      setDraft(String(rounded));\n\n      onChange?.(rounded);\n    },\n    [factor, isControlled, max, min, onChange],\n  );\n\n  const changeBy = useCallback(\n    (direction: Direction, amount = safeStep) => {\n      const next =\n        Math.round((currentValueRef.current + direction * amount) * factor) /\n        factor;\n\n      commit(next);\n    },\n    [commit, factor, safeStep],\n  );\n\n  const stopHold = useCallback(() => {\n    if (holdTimerRef.current) {\n      clearTimeout(holdTimerRef.current);\n    }\n\n    if (repeatTimerRef.current) {\n      clearTimeout(repeatTimerRef.current);\n    }\n\n    holdTimerRef.current = null;\n    repeatTimerRef.current = null;\n  }, []);\n\n  const scheduleRepeat = useCallback(() => {\n    const elapsed = Date.now() - holdStartedAtRef.current;\n\n    const interval = Math.max(\n      45,\n      repeatInterval - Math.floor(elapsed / 1800) * 20,\n    );\n\n    repeatTimerRef.current = setTimeout(() => {\n      changeBy(holdDirectionRef.current);\n      scheduleRepeat();\n    }, interval);\n  }, [changeBy, repeatInterval]);\n\n  const startHold =\n    (direction: Direction) => (event: ReactPointerEvent<HTMLButtonElement>) => {\n      if (disabled || readOnly || event.button !== 0) {\n        return;\n      }\n\n      event.preventDefault();\n\n      stopHold();\n\n      holdDirectionRef.current = direction;\n      holdStartedAtRef.current = Date.now();\n\n      changeBy(direction);\n\n      holdTimerRef.current = setTimeout(scheduleRepeat, longPressDelay);\n    };\n\n  const handleStepperKeyDown =\n    (direction: Direction) =>\n    (event: ReactKeyboardEvent<HTMLButtonElement>) => {\n      if (event.key !== \" \" && event.key !== \"Enter\") {\n        return;\n      }\n\n      event.preventDefault();\n      changeBy(direction);\n    };\n\n  const handleInputKeyDown = (event: ReactKeyboardEvent<HTMLInputElement>) => {\n    onKeyDown?.(event);\n\n    if (event.defaultPrevented || disabled || readOnly) {\n      return;\n    }\n\n    switch (event.key) {\n      case \"ArrowUp\":\n        changeBy(1);\n        break;\n      case \"ArrowDown\":\n        changeBy(-1);\n        break;\n      case \"PageUp\":\n        changeBy(1, safeLargeStep);\n        break;\n      case \"PageDown\":\n        changeBy(-1, safeLargeStep);\n        break;\n      case \"Home\":\n        if (min === undefined) return;\n        commit(min);\n        break;\n      case \"End\":\n        if (max === undefined) return;\n        commit(max);\n        break;\n      default:\n        return;\n    }\n\n    event.preventDefault();\n  };\n\n  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {\n    const nextDraft = event.target.value;\n\n    setDraft(nextDraft);\n\n    if (\n      nextDraft.trim() === \"\" ||\n      nextDraft === \"-\" ||\n      nextDraft === \".\" ||\n      nextDraft === \"-.\"\n    ) {\n      return;\n    }\n\n    const parsed = Number(nextDraft.replace(\",\", \".\"));\n\n    if (Number.isFinite(parsed)) {\n      commit(parsed);\n    }\n  };\n\n  const handleBlur = (event: FocusEvent<HTMLInputElement>) => {\n    focusedRef.current = false;\n\n    const parsed = Number(draft.replace(\",\", \".\"));\n\n    const nextValue =\n      draft.trim() !== \"\" && Number.isFinite(parsed)\n        ? clamp(Math.round(parsed * factor) / factor, min, max)\n        : currentValueRef.current;\n\n    commit(nextValue);\n\n    setDraft(String(Number(nextValue.toFixed(digits))));\n\n    onBlur?.(event);\n  };\n\n  useEffect(() => stopHold, [stopHold]);\n\n  const atMinimum = min !== undefined && currentValue <= min;\n\n  const atMaximum = max !== undefined && currentValue >= max;\n\n  const trimmedDraft = draft.trim();\n  const draftIsIncomplete =\n    trimmedDraft === \"\" ||\n    trimmedDraft === \"-\" ||\n    trimmedDraft === \".\" ||\n    trimmedDraft === \"-.\";\n  const draftValue = Number(trimmedDraft.replace(\",\", \".\"));\n\n  const draftIsInvalid =\n    !draftIsIncomplete &&\n    (!Number.isFinite(draftValue) ||\n      (min !== undefined && draftValue < min) ||\n      (max !== undefined && draftValue > max));\n\n  const stepperDisabled = disabled || readOnly;\n\n  return (\n    <div\n      className={cn(\"puzzle-input\", \"puzzle-input--number\", className)}\n      data-disabled={disabled || undefined}\n    >\n      <button\n        type=\"button\"\n        className=\"puzzle-input__stepper\"\n        aria-label={decrementLabel}\n        tabIndex={-1}\n        disabled={stepperDisabled || atMinimum}\n        onPointerDown={startHold(-1)}\n        onPointerUp={stopHold}\n        onPointerLeave={stopHold}\n        onPointerCancel={stopHold}\n        onKeyDown={handleStepperKeyDown(-1)}\n      >\n        <Icon name=\"lucide:minus\" />\n      </button>\n\n      <input\n        {...inputProps}\n        type=\"text\"\n        role=\"spinbutton\"\n        aria-valuenow={currentValue}\n        aria-valuemin={min}\n        aria-valuemax={max}\n        aria-invalid={draftIsInvalid || inputProps[\"aria-invalid\"]}\n        inputMode={allowsNegative ? \"text\" : digits > 0 ? \"decimal\" : \"numeric\"}\n        pattern={`${allowsNegative ? \"-?\" : \"\"}[0-9]*${digits > 0 ? \"[.,]?[0-9]*\" : \"\"}`}\n        disabled={disabled}\n        readOnly={readOnly}\n        value={draft}\n        className=\"puzzle-input__control\"\n        onFocus={(event) => {\n          focusedRef.current = true;\n          onFocus?.(event);\n        }}\n        onChange={handleInputChange}\n        onKeyDown={handleInputKeyDown}\n        onBlur={handleBlur}\n      />\n\n      <button\n        type=\"button\"\n        className=\"puzzle-input__stepper\"\n        aria-label={incrementLabel}\n        tabIndex={-1}\n        disabled={stepperDisabled || atMaximum}\n        onPointerDown={startHold(1)}\n        onPointerUp={stopHold}\n        onPointerLeave={stopHold}\n        onPointerCancel={stopHold}\n        onKeyDown={handleStepperKeyDown(1)}\n      >\n        <Icon name=\"lucide:plus\" />\n      </button>\n    </div>\n  );\n};\n\nexport { NumberInput, type NumberInputProps };\n"],"mappings":"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"}

package/dist/components/forms/input/number-input.d.cts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef } from "react";
+type NumberInputProps = Omit<ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "step" | "min" | "max"> & {
+  value?: number;
+  initialValue?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Amount applied by PageUp and PageDown. Defaults to ten times `step`. */
+  largeStep?: number;
+  fractionDigits?: number;
+  longPressDelay?: number;
+  repeatInterval?: number;
+  /** Accessible label of the decrement button. */
+  decrementLabel?: string;
+  /** Accessible label of the increment button. */
+  incrementLabel?: string;
+};
+declare const NumberInput: ({ value, initialValue, onChange, min, max, step, largeStep, fractionDigits, longPressDelay, repeatInterval, decrementLabel, incrementLabel, disabled, readOnly, className, onBlur, onFocus, onKeyDown, ...inputProps }: NumberInputProps) => import("react").JSX.Element;
+export { NumberInput, type NumberInputProps };

package/dist/components/forms/input/number-input.d.ts

@@ -0,0 +1,20 @@
+import { ComponentPropsWithoutRef } from "react";
+type NumberInputProps = Omit<ComponentPropsWithoutRef<"input">, "type" | "value" | "defaultValue" | "onChange" | "step" | "min" | "max"> & {
+  value?: number;
+  initialValue?: number;
+  onChange?: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  /** Amount applied by PageUp and PageDown. Defaults to ten times `step`. */
+  largeStep?: number;
+  fractionDigits?: number;
+  longPressDelay?: number;
+  repeatInterval?: number;
+  /** Accessible label of the decrement button. */
+  decrementLabel?: string;
+  /** Accessible label of the increment button. */
+  incrementLabel?: string;
+};
+declare const NumberInput: ({ value, initialValue, onChange, min, max, step, largeStep, fractionDigits, longPressDelay, repeatInterval, decrementLabel, incrementLabel, disabled, readOnly, className, onBlur, onFocus, onKeyDown, ...inputProps }: NumberInputProps) => import("react").JSX.Element;
+export { NumberInput, type NumberInputProps };