jaci-ui 0.2.0 → 0.4.0

package/dist/components/pin-input/pin-input.cjs

@@ -0,0 +1,266 @@
+"use client";
+const require_cx = require("../../styled-system/css/cx.cjs");
+const require_pin_input = require("../../styled-system/recipes/pin-input.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/components/pin-input/pin-input.tsx
+const PinInputContext = (0, react.createContext)(null);
+function digitKey(index) {
+	return `digit-${index}`;
+}
+function usePinInputContext() {
+	const context = (0, react.useContext)(PinInputContext);
+	if (!context) throw new Error("PinInput parts must be rendered inside PinInput.Root.");
+	return context;
+}
+const PinInputRoot = (0, react.forwardRef)(function PinInputRoot({ autoFocus = false, children, className, defaultValue = "", disabled = false, id: providedId, invalid = false, length, name, onValueChange, onComplete, otp = false, type = "text", value: controlledValue, ...props }, ref) {
+	const generatedId = (0, react.useId)();
+	const id = providedId ?? generatedId;
+	const styles = require_pin_input.pinInput();
+	const safeLength = Math.max(1, Math.floor(length));
+	const [uncontrolledValue, setUncontrolledValue] = (0, react.useState)(() => defaultValue.slice(0, safeLength));
+	const value = (controlledValue ?? uncontrolledValue).slice(0, safeLength);
+	const inputRefs = (0, react.useRef)([]);
+	const composingRef = (0, react.useRef)(false);
+	const updateValue = (0, react.useCallback)((next) => {
+		const normalized = next.slice(0, safeLength);
+		if (controlledValue === void 0) setUncontrolledValue(normalized);
+		onValueChange?.(normalized);
+		if (normalized.length === safeLength) onComplete?.(normalized);
+	}, [
+		controlledValue,
+		onComplete,
+		onValueChange,
+		safeLength
+	]);
+	const normalize = (0, react.useCallback)((next) => {
+		const characters = Array.from(next);
+		return (otp ? characters.filter((character) => /[0-9]/u.test(character)) : characters).join("").slice(0, safeLength);
+	}, [otp, safeLength]);
+	const focusIndex = (0, react.useCallback)((index) => {
+		inputRefs.current[Math.max(0, Math.min(safeLength - 1, index))]?.focus();
+	}, [safeLength]);
+	const onInput = (0, react.useCallback)((index, nextCharacter) => {
+		if (composingRef.current) return;
+		const characters = Array.from(value);
+		const next = normalize(nextCharacter).slice(-1);
+		characters[index] = next;
+		const nextValue = characters.join("").slice(0, safeLength);
+		updateValue(nextValue);
+		if (next) focusIndex(index + 1);
+	}, [
+		focusIndex,
+		normalize,
+		safeLength,
+		updateValue,
+		value
+	]);
+	const onCompositionStart = (0, react.useCallback)(() => {
+		composingRef.current = true;
+	}, []);
+	const onCompositionEnd = (0, react.useCallback)((index, event) => {
+		composingRef.current = false;
+		onInput(index, event.currentTarget.value);
+	}, [onInput]);
+	const onPaste = (0, react.useCallback)((index, event) => {
+		event.preventDefault();
+		const pasted = normalize(event.clipboardData.getData("text"));
+		if (!pasted) return;
+		const characters = Array.from(value);
+		Array.from(pasted).forEach((character, offset) => {
+			if (index + offset < safeLength) characters[index + offset] = character;
+		});
+		const nextValue = characters.join("").slice(0, safeLength);
+		updateValue(nextValue);
+		focusIndex(Math.min(safeLength - 1, index + pasted.length));
+	}, [
+		focusIndex,
+		normalize,
+		safeLength,
+		updateValue,
+		value
+	]);
+	const context = {
+		disabled,
+		id,
+		invalid,
+		inputRefs,
+		length: safeLength,
+		onInput,
+		onCompositionEnd,
+		onCompositionStart,
+		onKeyDown: (0, react.useCallback)((index, event) => {
+			if (event.key === "Backspace" && !event.currentTarget.value && index > 0) {
+				event.preventDefault();
+				const characters = Array.from(value);
+				characters[index - 1] = "";
+				updateValue(characters.join(""));
+				focusIndex(index - 1);
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				focusIndex(index - 1);
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				focusIndex(index + 1);
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				focusIndex(0);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				focusIndex(safeLength - 1);
+			}
+		}, [
+			focusIndex,
+			safeLength,
+			updateValue,
+			value
+		]),
+		onPaste,
+		otp,
+		styles,
+		type,
+		value
+	};
+	(0, react.useEffect)(() => {
+		if (autoFocus) inputRefs.current[0]?.focus();
+	}, [autoFocus]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		...props,
+		className: require_cx.cx(styles.root, className),
+		"data-disabled": disabled || void 0,
+		"data-invalid": invalid || void 0,
+		"data-jaci-component": "pin-input",
+		"data-slot": "pin-input",
+		id,
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinInputContext.Provider, {
+			value: context,
+			children
+		}), name ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			"aria-hidden": "true",
+			className: styles.hiddenInput,
+			disabled,
+			name,
+			tabIndex: -1,
+			value,
+			readOnly: true
+		}) : null]
+	});
+});
+const PinInputLabel = (0, react.forwardRef)(function PinInputLabel({ className, ...props }, ref) {
+	const { id, styles } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+		...props,
+		className: require_cx.cx(styles.label, className),
+		"data-slot": "pin-input-label",
+		htmlFor: props.htmlFor ?? `${id}-0`,
+		ref
+	});
+});
+const PinInputControl = (0, react.forwardRef)(function PinInputControl({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: require_cx.cx(styles.control, className),
+		"data-slot": "pin-input-control",
+		ref
+	});
+});
+const PinInputInputs = (0, react.forwardRef)(function PinInputInputs({ className, ...props }, ref) {
+	const { length, styles } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...props,
+		className: require_cx.cx(styles.inputs, className),
+		"data-slot": "pin-input-inputs",
+		ref,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PinInputInput, { index }, digitKey(index)))
+	});
+});
+const PinInputInput = (0, react.forwardRef)(function PinInputInput({ className, index, id, onCompositionEnd: onInputCompositionEnd, onCompositionStart: onInputCompositionStart, ...props }, ref) {
+	const { disabled, id: rootId, inputRefs, invalid, length, onInput, onCompositionEnd, onCompositionStart, onKeyDown, onPaste, otp, styles, type, value } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		"aria-label": props["aria-label"] ?? `Digit ${index + 1} of ${length}`,
+		"aria-invalid": invalid || void 0,
+		autoComplete: otp ? "one-time-code" : props.autoComplete,
+		className: require_cx.cx(styles.input, className),
+		"data-slot": "pin-input-input",
+		disabled: disabled || props.disabled,
+		id: id ?? `${rootId}-${index}`,
+		inputMode: otp ? "numeric" : props.inputMode,
+		maxLength: 1,
+		onChange: (event) => onInput(index, event.currentTarget.value),
+		onCompositionEnd: (event) => {
+			onCompositionEnd(index, event);
+			onInputCompositionEnd?.(event);
+		},
+		onCompositionStart: (event) => {
+			onCompositionStart();
+			onInputCompositionStart?.(event);
+		},
+		onKeyDown: (event) => onKeyDown(index, event),
+		onPaste: (event) => onPaste(index, event),
+		ref: (node) => {
+			inputRefs.current[index] = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		type,
+		value: Array.from(value)[index] ?? ""
+	});
+});
+const PinInputDescription = (0, react.forwardRef)(function PinInputDescription({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		className: require_cx.cx(styles.description, className),
+		"data-slot": "pin-input-description",
+		ref
+	});
+});
+const PinInputError = (0, react.forwardRef)(function PinInputError({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+		...props,
+		className: require_cx.cx(styles.error, className),
+		"data-slot": "pin-input-error",
+		role: "alert",
+		ref
+	});
+});
+const PinInputHiddenInput = (0, react.forwardRef)(function PinInputHiddenInput(props, ref) {
+	const { disabled, styles, value } = usePinInputContext();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		...props,
+		"aria-hidden": "true",
+		className: styles.hiddenInput,
+		disabled: disabled || props.disabled,
+		readOnly: true,
+		ref,
+		tabIndex: -1,
+		type: "hidden",
+		value
+	});
+});
+const PinInput = {
+	Root: PinInputRoot,
+	Label: PinInputLabel,
+	Control: PinInputControl,
+	Inputs: PinInputInputs,
+	Input: PinInputInput,
+	Description: PinInputDescription,
+	Error: PinInputError,
+	HiddenInput: PinInputHiddenInput
+};
+//#endregion
+exports.PinInput = PinInput;
+exports.PinInputControl = PinInputControl;
+exports.PinInputDescription = PinInputDescription;
+exports.PinInputError = PinInputError;
+exports.PinInputHiddenInput = PinInputHiddenInput;
+exports.PinInputInput = PinInputInput;
+exports.PinInputInputs = PinInputInputs;
+exports.PinInputLabel = PinInputLabel;
+exports.PinInputRoot = PinInputRoot;
+
+//# sourceMappingURL=pin-input.cjs.map

package/dist/components/pin-input/pin-input.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"pin-input.cjs","names":["pinInput","cx"],"sources":["../../../src/components/pin-input/pin-input.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  createContext,\n  forwardRef,\n  useCallback,\n  useContext,\n  useEffect,\n  useId,\n  useRef,\n  useState,\n} from \"react\";\nimport type {\n  ClipboardEvent,\n  CompositionEvent,\n  ComponentPropsWithoutRef,\n  KeyboardEvent,\n  MutableRefObject,\n  ReactNode,\n} from \"react\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { pinInput } from \"../../styled-system/recipes\";\n\ninterface PinInputContextValue {\n  disabled: boolean;\n  id: string;\n  invalid: boolean;\n  inputRefs: MutableRefObject<Array<HTMLInputElement | null>>;\n  length: number;\n  onInput: (index: number, value: string) => void;\n  onCompositionEnd: (index: number, event: CompositionEvent<HTMLInputElement>) => void;\n  onCompositionStart: () => void;\n  onKeyDown: (index: number, event: KeyboardEvent<HTMLInputElement>) => void;\n  onPaste: (index: number, event: ClipboardEvent<HTMLInputElement>) => void;\n  otp: boolean;\n  styles: ReturnType<typeof pinInput>;\n  type: \"text\" | \"password\";\n  value: string;\n}\n\nconst PinInputContext = createContext<PinInputContextValue | null>(null);\n\nfunction digitKey(index: number) {\n  return `digit-${index}`;\n}\n\nfunction usePinInputContext() {\n  const context = useContext(PinInputContext);\n  if (!context) throw new Error(\"PinInput parts must be rendered inside PinInput.Root.\");\n  return context;\n}\n\nexport interface PinInputRootProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\" | \"defaultValue\"> {\n  length: number;\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (value: string) => void;\n  onComplete?: (value: string) => void;\n  type?: \"text\" | \"password\";\n  otp?: boolean;\n  autoFocus?: boolean;\n  disabled?: boolean;\n  invalid?: boolean;\n  name?: string;\n  children?: ReactNode;\n}\n\nexport const PinInputRoot = forwardRef<HTMLDivElement, PinInputRootProps>(function PinInputRoot(\n  {\n    autoFocus = false,\n    children,\n    className,\n    defaultValue = \"\",\n    disabled = false,\n    id: providedId,\n    invalid = false,\n    length,\n    name,\n    onValueChange,\n    onComplete,\n    otp = false,\n    type = \"text\",\n    value: controlledValue,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const id = providedId ?? generatedId;\n  const styles = pinInput();\n  const safeLength = Math.max(1, Math.floor(length));\n  const [uncontrolledValue, setUncontrolledValue] = useState(() =>\n    defaultValue.slice(0, safeLength),\n  );\n  const value = (controlledValue ?? uncontrolledValue).slice(0, safeLength);\n  const inputRefs = useRef<Array<HTMLInputElement | null>>([]);\n  const composingRef = useRef(false);\n  const updateValue = useCallback(\n    (next: string) => {\n      const normalized = next.slice(0, safeLength);\n      if (controlledValue === undefined) setUncontrolledValue(normalized);\n      onValueChange?.(normalized);\n      if (normalized.length === safeLength) onComplete?.(normalized);\n    },\n    [controlledValue, onComplete, onValueChange, safeLength],\n  );\n  const normalize = useCallback(\n    (next: string) => {\n      const characters = Array.from(next);\n      return (otp ? characters.filter((character) => /[0-9]/u.test(character)) : characters)\n        .join(\"\")\n        .slice(0, safeLength);\n    },\n    [otp, safeLength],\n  );\n  const focusIndex = useCallback(\n    (index: number) => {\n      inputRefs.current[Math.max(0, Math.min(safeLength - 1, index))]?.focus();\n    },\n    [safeLength],\n  );\n  const onInput = useCallback(\n    (index: number, nextCharacter: string) => {\n      if (composingRef.current) return;\n      const characters = Array.from(value);\n      const next = normalize(nextCharacter).slice(-1);\n      characters[index] = next;\n      const nextValue = characters.join(\"\").slice(0, safeLength);\n      updateValue(nextValue);\n      if (next) focusIndex(index + 1);\n    },\n    [focusIndex, normalize, safeLength, updateValue, value],\n  );\n  const onCompositionStart = useCallback(() => {\n    composingRef.current = true;\n  }, []);\n  const onCompositionEnd = useCallback(\n    (index: number, event: CompositionEvent<HTMLInputElement>) => {\n      composingRef.current = false;\n      onInput(index, event.currentTarget.value);\n    },\n    [onInput],\n  );\n  const onPaste = useCallback(\n    (index: number, event: ClipboardEvent<HTMLInputElement>) => {\n      event.preventDefault();\n      const pasted = normalize(event.clipboardData.getData(\"text\"));\n      if (!pasted) return;\n      const characters = Array.from(value);\n      Array.from(pasted).forEach((character, offset) => {\n        if (index + offset < safeLength) characters[index + offset] = character;\n      });\n      const nextValue = characters.join(\"\").slice(0, safeLength);\n      updateValue(nextValue);\n      focusIndex(Math.min(safeLength - 1, index + pasted.length));\n    },\n    [focusIndex, normalize, safeLength, updateValue, value],\n  );\n  const onKeyDown = useCallback(\n    (index: number, event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === \"Backspace\" && !event.currentTarget.value && index > 0) {\n        event.preventDefault();\n        const characters = Array.from(value);\n        characters[index - 1] = \"\";\n        updateValue(characters.join(\"\"));\n        focusIndex(index - 1);\n      } else if (event.key === \"ArrowLeft\") {\n        event.preventDefault();\n        focusIndex(index - 1);\n      } else if (event.key === \"ArrowRight\") {\n        event.preventDefault();\n        focusIndex(index + 1);\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        focusIndex(0);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        focusIndex(safeLength - 1);\n      }\n    },\n    [focusIndex, safeLength, updateValue, value],\n  );\n  const context: PinInputContextValue = {\n    disabled,\n    id,\n    invalid,\n    inputRefs,\n    length: safeLength,\n    onInput,\n    onCompositionEnd,\n    onCompositionStart,\n    onKeyDown,\n    onPaste,\n    otp,\n    styles,\n    type,\n    value,\n  };\n\n  useEffect(() => {\n    if (autoFocus) inputRefs.current[0]?.focus();\n  }, [autoFocus]);\n\n  return (\n    <div\n      {...props}\n      className={cx(styles.root, className)}\n      data-disabled={disabled || undefined}\n      data-invalid={invalid || undefined}\n      data-jaci-component=\"pin-input\"\n      data-slot=\"pin-input\"\n      id={id}\n      ref={ref}\n    >\n      <PinInputContext.Provider value={context}>{children}</PinInputContext.Provider>\n      {name ? (\n        <input\n          aria-hidden=\"true\"\n          className={styles.hiddenInput}\n          disabled={disabled}\n          name={name}\n          tabIndex={-1}\n          value={value}\n          readOnly\n        />\n      ) : null}\n    </div>\n  );\n});\n\nexport type PinInputLabelProps = ComponentPropsWithoutRef<\"label\">;\nexport const PinInputLabel = forwardRef<HTMLLabelElement, PinInputLabelProps>(\n  function PinInputLabel({ className, ...props }, ref) {\n    const { id, styles } = usePinInputContext();\n    return (\n      // biome-ignore lint/a11y/noLabelWithoutControl: the generated Inputs slot supplies the control.\n      <label\n        {...props}\n        className={cx(styles.label, className)}\n        data-slot=\"pin-input-label\"\n        htmlFor={props.htmlFor ?? `${id}-0`}\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type PinInputControlProps = ComponentPropsWithoutRef<\"div\">;\nexport const PinInputControl = forwardRef<HTMLDivElement, PinInputControlProps>(\n  function PinInputControl({ className, ...props }, ref) {\n    const { styles } = usePinInputContext();\n    return (\n      <div\n        {...props}\n        className={cx(styles.control, className)}\n        data-slot=\"pin-input-control\"\n        ref={ref}\n      />\n    );\n  },\n);\n\nexport type PinInputInputsProps = ComponentPropsWithoutRef<\"div\">;\nexport const PinInputInputs = forwardRef<HTMLDivElement, PinInputInputsProps>(\n  function PinInputInputs({ className, ...props }, ref) {\n    const { length, styles } = usePinInputContext();\n    return (\n      <div\n        {...props}\n        className={cx(styles.inputs, className)}\n        data-slot=\"pin-input-inputs\"\n        ref={ref}\n      >\n        {Array.from({ length }, (_, index) => (\n          <PinInputInput index={index} key={digitKey(index)} />\n        ))}\n      </div>\n    );\n  },\n);\n\nexport interface PinInputInputProps\n  extends Omit<\n    ComponentPropsWithoutRef<\"input\">,\n    \"defaultValue\" | \"onChange\" | \"onKeyDown\" | \"onPaste\" | \"type\" | \"value\"\n  > {\n  index: number;\n}\nexport const PinInputInput = forwardRef<HTMLInputElement, PinInputInputProps>(\n  function PinInputInput(\n    {\n      className,\n      index,\n      id,\n      onCompositionEnd: onInputCompositionEnd,\n      onCompositionStart: onInputCompositionStart,\n      ...props\n    },\n    ref,\n  ) {\n    const {\n      disabled,\n      id: rootId,\n      inputRefs,\n      invalid,\n      length,\n      onInput,\n      onCompositionEnd,\n      onCompositionStart,\n      onKeyDown,\n      onPaste,\n      otp,\n      styles,\n      type,\n      value,\n    } = usePinInputContext();\n    return (\n      <input\n        {...props}\n        aria-label={props[\"aria-label\"] ?? `Digit ${index + 1} of ${length}`}\n        aria-invalid={invalid || undefined}\n        autoComplete={otp ? \"one-time-code\" : props.autoComplete}\n        className={cx(styles.input, className)}\n        data-slot=\"pin-input-input\"\n        disabled={disabled || props.disabled}\n        id={id ?? `${rootId}-${index}`}\n        inputMode={otp ? \"numeric\" : props.inputMode}\n        maxLength={1}\n        onChange={(event) => onInput(index, event.currentTarget.value)}\n        onCompositionEnd={(event) => {\n          onCompositionEnd(index, event);\n          onInputCompositionEnd?.(event);\n        }}\n        onCompositionStart={(event) => {\n          onCompositionStart();\n          onInputCompositionStart?.(event);\n        }}\n        onKeyDown={(event) => onKeyDown(index, event)}\n        onPaste={(event) => onPaste(index, event)}\n        ref={(node) => {\n          inputRefs.current[index] = node;\n          if (typeof ref === \"function\") ref(node);\n          else if (ref) ref.current = node;\n        }}\n        type={type}\n        value={Array.from(value)[index] ?? \"\"}\n      />\n    );\n  },\n);\n\nexport type PinInputDescriptionProps = ComponentPropsWithoutRef<\"p\">;\nexport const PinInputDescription = forwardRef<HTMLParagraphElement, PinInputDescriptionProps>(\n  function PinInputDescription({ className, ...props }, ref) {\n    const { styles } = usePinInputContext();\n    return (\n      <p\n        {...props}\n        className={cx(styles.description, className)}\n        data-slot=\"pin-input-description\"\n        ref={ref}\n      />\n    );\n  },\n);\nexport type PinInputErrorProps = ComponentPropsWithoutRef<\"p\">;\nexport const PinInputError = forwardRef<HTMLParagraphElement, PinInputErrorProps>(\n  function PinInputError({ className, ...props }, ref) {\n    const { styles } = usePinInputContext();\n    return (\n      <p\n        {...props}\n        className={cx(styles.error, className)}\n        data-slot=\"pin-input-error\"\n        role=\"alert\"\n        ref={ref}\n      />\n    );\n  },\n);\nexport type PinInputHiddenInputProps = Omit<\n  ComponentPropsWithoutRef<\"input\">,\n  \"name\" | \"type\" | \"value\"\n>;\nexport const PinInputHiddenInput = forwardRef<HTMLInputElement, PinInputHiddenInputProps>(\n  function PinInputHiddenInput(props, ref) {\n    const { disabled, styles, value } = usePinInputContext();\n    return (\n      <input\n        {...props}\n        aria-hidden=\"true\"\n        className={styles.hiddenInput}\n        disabled={disabled || props.disabled}\n        readOnly\n        ref={ref}\n        tabIndex={-1}\n        type=\"hidden\"\n        value={value}\n      />\n    );\n  },\n);\n\nexport const PinInput = {\n  Root: PinInputRoot,\n  Label: PinInputLabel,\n  Control: PinInputControl,\n  Inputs: PinInputInputs,\n  Input: PinInputInput,\n  Description: PinInputDescription,\n  Error: PinInputError,\n  HiddenInput: PinInputHiddenInput,\n};\n"],"mappings":"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"}

package/dist/components/pin-input/pin-input.d.cts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/pin-input/pin-input.d.ts
+interface PinInputRootProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue"> {
+  length: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  type?: "text" | "password";
+  otp?: boolean;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  name?: string;
+  children?: ReactNode;
+}
+declare const PinInputRoot: import("react").ForwardRefExoticComponent<PinInputRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type PinInputLabelProps = ComponentPropsWithoutRef<"label">;
+declare const PinInputLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+type PinInputControlProps = ComponentPropsWithoutRef<"div">;
+declare const PinInputControl: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type PinInputInputsProps = ComponentPropsWithoutRef<"div">;
+declare const PinInputInputs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface PinInputInputProps extends Omit<ComponentPropsWithoutRef<"input">, "defaultValue" | "onChange" | "onKeyDown" | "onPaste" | "type" | "value"> {
+  index: number;
+}
+declare const PinInputInput: import("react").ForwardRefExoticComponent<PinInputInputProps & import("react").RefAttributes<HTMLInputElement>>;
+type PinInputDescriptionProps = ComponentPropsWithoutRef<"p">;
+declare const PinInputDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+type PinInputErrorProps = ComponentPropsWithoutRef<"p">;
+declare const PinInputError: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+type PinInputHiddenInputProps = Omit<ComponentPropsWithoutRef<"input">, "name" | "type" | "value">;
+declare const PinInputHiddenInput: import("react").ForwardRefExoticComponent<PinInputHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const PinInput: {
+  Root: import("react").ForwardRefExoticComponent<PinInputRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Inputs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<PinInputInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Error: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<PinInputHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+};
+//#endregion
+export { PinInput, PinInputControl, PinInputControlProps, PinInputDescription, PinInputDescriptionProps, PinInputError, PinInputErrorProps, PinInputHiddenInput, PinInputHiddenInputProps, PinInputInput, PinInputInputProps, PinInputInputs, PinInputInputsProps, PinInputLabel, PinInputLabelProps, PinInputRoot, PinInputRootProps };
+//# sourceMappingURL=pin-input.d.cts.map

package/dist/components/pin-input/pin-input.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+//#region src/components/pin-input/pin-input.d.ts
+interface PinInputRootProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue"> {
+  length: number;
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  onComplete?: (value: string) => void;
+  type?: "text" | "password";
+  otp?: boolean;
+  autoFocus?: boolean;
+  disabled?: boolean;
+  invalid?: boolean;
+  name?: string;
+  children?: ReactNode;
+}
+declare const PinInputRoot: import("react").ForwardRefExoticComponent<PinInputRootProps & import("react").RefAttributes<HTMLDivElement>>;
+type PinInputLabelProps = ComponentPropsWithoutRef<"label">;
+declare const PinInputLabel: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+type PinInputControlProps = ComponentPropsWithoutRef<"div">;
+declare const PinInputControl: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+type PinInputInputsProps = ComponentPropsWithoutRef<"div">;
+declare const PinInputInputs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+interface PinInputInputProps extends Omit<ComponentPropsWithoutRef<"input">, "defaultValue" | "onChange" | "onKeyDown" | "onPaste" | "type" | "value"> {
+  index: number;
+}
+declare const PinInputInput: import("react").ForwardRefExoticComponent<PinInputInputProps & import("react").RefAttributes<HTMLInputElement>>;
+type PinInputDescriptionProps = ComponentPropsWithoutRef<"p">;
+declare const PinInputDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+type PinInputErrorProps = ComponentPropsWithoutRef<"p">;
+declare const PinInputError: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+type PinInputHiddenInputProps = Omit<ComponentPropsWithoutRef<"input">, "name" | "type" | "value">;
+declare const PinInputHiddenInput: import("react").ForwardRefExoticComponent<PinInputHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+declare const PinInput: {
+  Root: import("react").ForwardRefExoticComponent<PinInputRootProps & import("react").RefAttributes<HTMLDivElement>>;
+  Label: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref"> & import("react").RefAttributes<HTMLLabelElement>>;
+  Control: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Inputs: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+  Input: import("react").ForwardRefExoticComponent<PinInputInputProps & import("react").RefAttributes<HTMLInputElement>>;
+  Description: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  Error: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("react").RefAttributes<HTMLParagraphElement>>;
+  HiddenInput: import("react").ForwardRefExoticComponent<PinInputHiddenInputProps & import("react").RefAttributes<HTMLInputElement>>;
+};
+//#endregion
+export { PinInput, PinInputControl, PinInputControlProps, PinInputDescription, PinInputDescriptionProps, PinInputError, PinInputErrorProps, PinInputHiddenInput, PinInputHiddenInputProps, PinInputInput, PinInputInputProps, PinInputInputs, PinInputInputsProps, PinInputLabel, PinInputLabelProps, PinInputRoot, PinInputRootProps };
+//# sourceMappingURL=pin-input.d.ts.map

package/dist/components/pin-input/pin-input.js

@@ -0,0 +1,258 @@
+"use client";
+import { cx } from "../../styled-system/css/cx.js";
+import { pinInput } from "../../styled-system/recipes/pin-input.js";
+import { createContext, forwardRef, useCallback, useContext, useEffect, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/pin-input/pin-input.tsx
+const PinInputContext = createContext(null);
+function digitKey(index) {
+	return `digit-${index}`;
+}
+function usePinInputContext() {
+	const context = useContext(PinInputContext);
+	if (!context) throw new Error("PinInput parts must be rendered inside PinInput.Root.");
+	return context;
+}
+const PinInputRoot = forwardRef(function PinInputRoot({ autoFocus = false, children, className, defaultValue = "", disabled = false, id: providedId, invalid = false, length, name, onValueChange, onComplete, otp = false, type = "text", value: controlledValue, ...props }, ref) {
+	const generatedId = useId();
+	const id = providedId ?? generatedId;
+	const styles = pinInput();
+	const safeLength = Math.max(1, Math.floor(length));
+	const [uncontrolledValue, setUncontrolledValue] = useState(() => defaultValue.slice(0, safeLength));
+	const value = (controlledValue ?? uncontrolledValue).slice(0, safeLength);
+	const inputRefs = useRef([]);
+	const composingRef = useRef(false);
+	const updateValue = useCallback((next) => {
+		const normalized = next.slice(0, safeLength);
+		if (controlledValue === void 0) setUncontrolledValue(normalized);
+		onValueChange?.(normalized);
+		if (normalized.length === safeLength) onComplete?.(normalized);
+	}, [
+		controlledValue,
+		onComplete,
+		onValueChange,
+		safeLength
+	]);
+	const normalize = useCallback((next) => {
+		const characters = Array.from(next);
+		return (otp ? characters.filter((character) => /[0-9]/u.test(character)) : characters).join("").slice(0, safeLength);
+	}, [otp, safeLength]);
+	const focusIndex = useCallback((index) => {
+		inputRefs.current[Math.max(0, Math.min(safeLength - 1, index))]?.focus();
+	}, [safeLength]);
+	const onInput = useCallback((index, nextCharacter) => {
+		if (composingRef.current) return;
+		const characters = Array.from(value);
+		const next = normalize(nextCharacter).slice(-1);
+		characters[index] = next;
+		const nextValue = characters.join("").slice(0, safeLength);
+		updateValue(nextValue);
+		if (next) focusIndex(index + 1);
+	}, [
+		focusIndex,
+		normalize,
+		safeLength,
+		updateValue,
+		value
+	]);
+	const onCompositionStart = useCallback(() => {
+		composingRef.current = true;
+	}, []);
+	const onCompositionEnd = useCallback((index, event) => {
+		composingRef.current = false;
+		onInput(index, event.currentTarget.value);
+	}, [onInput]);
+	const onPaste = useCallback((index, event) => {
+		event.preventDefault();
+		const pasted = normalize(event.clipboardData.getData("text"));
+		if (!pasted) return;
+		const characters = Array.from(value);
+		Array.from(pasted).forEach((character, offset) => {
+			if (index + offset < safeLength) characters[index + offset] = character;
+		});
+		const nextValue = characters.join("").slice(0, safeLength);
+		updateValue(nextValue);
+		focusIndex(Math.min(safeLength - 1, index + pasted.length));
+	}, [
+		focusIndex,
+		normalize,
+		safeLength,
+		updateValue,
+		value
+	]);
+	const context = {
+		disabled,
+		id,
+		invalid,
+		inputRefs,
+		length: safeLength,
+		onInput,
+		onCompositionEnd,
+		onCompositionStart,
+		onKeyDown: useCallback((index, event) => {
+			if (event.key === "Backspace" && !event.currentTarget.value && index > 0) {
+				event.preventDefault();
+				const characters = Array.from(value);
+				characters[index - 1] = "";
+				updateValue(characters.join(""));
+				focusIndex(index - 1);
+			} else if (event.key === "ArrowLeft") {
+				event.preventDefault();
+				focusIndex(index - 1);
+			} else if (event.key === "ArrowRight") {
+				event.preventDefault();
+				focusIndex(index + 1);
+			} else if (event.key === "Home") {
+				event.preventDefault();
+				focusIndex(0);
+			} else if (event.key === "End") {
+				event.preventDefault();
+				focusIndex(safeLength - 1);
+			}
+		}, [
+			focusIndex,
+			safeLength,
+			updateValue,
+			value
+		]),
+		onPaste,
+		otp,
+		styles,
+		type,
+		value
+	};
+	useEffect(() => {
+		if (autoFocus) inputRefs.current[0]?.focus();
+	}, [autoFocus]);
+	return /* @__PURE__ */ jsxs("div", {
+		...props,
+		className: cx(styles.root, className),
+		"data-disabled": disabled || void 0,
+		"data-invalid": invalid || void 0,
+		"data-jaci-component": "pin-input",
+		"data-slot": "pin-input",
+		id,
+		ref,
+		children: [/* @__PURE__ */ jsx(PinInputContext.Provider, {
+			value: context,
+			children
+		}), name ? /* @__PURE__ */ jsx("input", {
+			"aria-hidden": "true",
+			className: styles.hiddenInput,
+			disabled,
+			name,
+			tabIndex: -1,
+			value,
+			readOnly: true
+		}) : null]
+	});
+});
+const PinInputLabel = forwardRef(function PinInputLabel({ className, ...props }, ref) {
+	const { id, styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("label", {
+		...props,
+		className: cx(styles.label, className),
+		"data-slot": "pin-input-label",
+		htmlFor: props.htmlFor ?? `${id}-0`,
+		ref
+	});
+});
+const PinInputControl = forwardRef(function PinInputControl({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(styles.control, className),
+		"data-slot": "pin-input-control",
+		ref
+	});
+});
+const PinInputInputs = forwardRef(function PinInputInputs({ className, ...props }, ref) {
+	const { length, styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("div", {
+		...props,
+		className: cx(styles.inputs, className),
+		"data-slot": "pin-input-inputs",
+		ref,
+		children: Array.from({ length }, (_, index) => /* @__PURE__ */ jsx(PinInputInput, { index }, digitKey(index)))
+	});
+});
+const PinInputInput = forwardRef(function PinInputInput({ className, index, id, onCompositionEnd: onInputCompositionEnd, onCompositionStart: onInputCompositionStart, ...props }, ref) {
+	const { disabled, id: rootId, inputRefs, invalid, length, onInput, onCompositionEnd, onCompositionStart, onKeyDown, onPaste, otp, styles, type, value } = usePinInputContext();
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		"aria-label": props["aria-label"] ?? `Digit ${index + 1} of ${length}`,
+		"aria-invalid": invalid || void 0,
+		autoComplete: otp ? "one-time-code" : props.autoComplete,
+		className: cx(styles.input, className),
+		"data-slot": "pin-input-input",
+		disabled: disabled || props.disabled,
+		id: id ?? `${rootId}-${index}`,
+		inputMode: otp ? "numeric" : props.inputMode,
+		maxLength: 1,
+		onChange: (event) => onInput(index, event.currentTarget.value),
+		onCompositionEnd: (event) => {
+			onCompositionEnd(index, event);
+			onInputCompositionEnd?.(event);
+		},
+		onCompositionStart: (event) => {
+			onCompositionStart();
+			onInputCompositionStart?.(event);
+		},
+		onKeyDown: (event) => onKeyDown(index, event),
+		onPaste: (event) => onPaste(index, event),
+		ref: (node) => {
+			inputRefs.current[index] = node;
+			if (typeof ref === "function") ref(node);
+			else if (ref) ref.current = node;
+		},
+		type,
+		value: Array.from(value)[index] ?? ""
+	});
+});
+const PinInputDescription = forwardRef(function PinInputDescription({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cx(styles.description, className),
+		"data-slot": "pin-input-description",
+		ref
+	});
+});
+const PinInputError = forwardRef(function PinInputError({ className, ...props }, ref) {
+	const { styles } = usePinInputContext();
+	return /* @__PURE__ */ jsx("p", {
+		...props,
+		className: cx(styles.error, className),
+		"data-slot": "pin-input-error",
+		role: "alert",
+		ref
+	});
+});
+const PinInputHiddenInput = forwardRef(function PinInputHiddenInput(props, ref) {
+	const { disabled, styles, value } = usePinInputContext();
+	return /* @__PURE__ */ jsx("input", {
+		...props,
+		"aria-hidden": "true",
+		className: styles.hiddenInput,
+		disabled: disabled || props.disabled,
+		readOnly: true,
+		ref,
+		tabIndex: -1,
+		type: "hidden",
+		value
+	});
+});
+const PinInput = {
+	Root: PinInputRoot,
+	Label: PinInputLabel,
+	Control: PinInputControl,
+	Inputs: PinInputInputs,
+	Input: PinInputInput,
+	Description: PinInputDescription,
+	Error: PinInputError,
+	HiddenInput: PinInputHiddenInput
+};
+//#endregion
+export { PinInput, PinInputControl, PinInputDescription, PinInputError, PinInputHiddenInput, PinInputInput, PinInputInputs, PinInputLabel, PinInputRoot };
+
+//# sourceMappingURL=pin-input.js.map