jaci-ui 0.3.0 → 0.4.0

package/dist/components/field/field.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.js","names":["Field","BaseField"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useContext } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { FieldRoot as BaseFieldRoot } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { field } from \"../../styled-system/recipes\";\nimport { JaciFormContext } from \"../form\";\n\nexport type FieldValidationMode = \"onSubmit\" | \"onBlur\" | \"onChange\";\n\ninterface FieldContextValue {\n  errors: ReactNode[];\n  insideField: boolean;\n  invalid: boolean;\n  name: string | undefined;\n}\n\nconst FieldContext = createContext<FieldContextValue>({\n  errors: [],\n  insideField: false,\n  invalid: false,\n  name: undefined,\n});\n\nfunction normalizeErrors(errors: ReactNode | ReactNode[] | undefined): ReactNode[] {\n  if (errors === undefined || errors === null || errors === false) {\n    return [];\n  }\n\n  return Array.isArray(errors) ? errors : [errors];\n}\n\nfunction renderErrors(errors: ReactNode[]) {\n  if (errors.length <= 1) {\n    return errors[0];\n  }\n\n  return (\n    <ul>\n      {errors.map((error, index) => (\n        <li key={typeof error === \"string\" ? error : index}>{error}</li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface FieldProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Field name used to resolve errors supplied to the parent Form. */\n  name?: string;\n  /** Direct error content, useful outside a Form or with custom validation. */\n  errors?: ReactNode | ReactNode[];\n  /** Disables the field and its Base UI validation state. */\n  disabled?: boolean;\n  /** Native/Base UI validation callback. */\n  validate?: BaseFieldRoot.Props[\"validate\"];\n  /** Validation timing used by the parent Form. */\n  validationMode?: FieldValidationMode;\n  /** Debounce duration for `validationMode=\"onChange\"`. */\n  validationDebounceTime?: number;\n  /** Controlled dirty/touched state for integrations with external form state. */\n  dirty?: boolean;\n  touched?: boolean;\n  /** Imperative field validation actions. */\n  actionsRef?: BaseFieldRoot.Props[\"actionsRef\"];\n  children?: ReactNode;\n}\n\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  htmlFor: string;\n}\n\nexport const Field = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    actionsRef,\n    children,\n    className,\n    dirty,\n    disabled = false,\n    errors: directErrors,\n    invalid: invalidProp = false,\n    name,\n    touched,\n    validate,\n    validationDebounceTime,\n    validationMode,\n    ...props\n  },\n  ref,\n) {\n  const { errors: formErrors } = useContext(JaciFormContext);\n  const formError = name ? formErrors[name] : undefined;\n  const errors =\n    directErrors === undefined ? normalizeErrors(formError) : normalizeErrors(directErrors);\n  const invalid = invalidProp || errors.length > 0;\n  const styles = field({ invalid });\n\n  return (\n    <FieldContext.Provider value={{ errors, insideField: true, invalid, name }}>\n      <BaseField.Root\n        {...props}\n        ref={ref}\n        actionsRef={actionsRef}\n        className={cx(styles.root, className)}\n        data-invalid={invalid || undefined}\n        data-jaci-component=\"field\"\n        data-slot=\"field\"\n        disabled={disabled}\n        dirty={dirty}\n        invalid={invalid}\n        name={name}\n        touched={touched}\n        validate={validate}\n        validationDebounceTime={validationDebounceTime}\n        validationMode={validationMode}\n      >\n        {children}\n      </BaseField.Root>\n    </FieldContext.Provider>\n  );\n});\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, htmlFor, ...props },\n  ref,\n) {\n  const { insideField, invalid } = useContext(FieldContext);\n\n  const labelProps = {\n    ...props,\n    className: cx(field({ invalid }).label, className),\n    \"data-slot\": \"field-label\",\n    htmlFor,\n  };\n\n  if (!insideField) {\n    return (\n      <label {...labelProps} ref={ref} htmlFor={htmlFor}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Label {...labelProps} ref={ref as Ref<HTMLElement>}>\n      {children}\n    </BaseField.Label>\n  );\n});\n\nexport const FieldDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"p\">>(\n  function FieldDescription({ className, ...props }, ref) {\n    const { insideField, invalid } = useContext(FieldContext);\n    const descriptionProps = {\n      ...props,\n      className: cx(field({ invalid }).description, className),\n      \"data-slot\": \"field-description\",\n    };\n\n    if (!insideField) {\n      return <p {...descriptionProps} ref={ref} />;\n    }\n\n    return <BaseField.Description {...descriptionProps} ref={ref} />;\n  },\n);\n\nexport interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  children?: ReactNode;\n  match?: boolean | keyof ValidityState;\n}\n\nexport const FieldError = forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, match, ...props },\n  ref,\n) {\n  const { errors, insideField, invalid } = useContext(FieldContext);\n  const content = children ?? renderErrors(errors);\n\n  if (!insideField) {\n    if (content === undefined || content === null || content === false) {\n      return null;\n    }\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(field({ invalid }).error, className)}\n        data-slot=\"field-error\"\n        role=\"alert\"\n      >\n        {content}\n      </p>\n    );\n  }\n\n  return (\n    <BaseField.Error\n      {...props}\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(field({ invalid }).error, className)}\n      data-slot=\"field-error\"\n      match={match ?? (invalid ? true : undefined)}\n      render={<p />}\n      role=\"alert\"\n    >\n      {content}\n    </BaseField.Error>\n  );\n});\n\nexport function useFieldState() {\n  return useContext(FieldContext);\n}\n"],"mappings":"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"}
+{"version":3,"file":"field.js","names":["FieldRoot","Field","BaseField"],"sources":["../../../src/components/field/field.tsx"],"sourcesContent":["\"use client\";\n\nimport { Field as BaseField } from \"@base-ui/react/field\";\nimport { createContext, forwardRef, useCallback, useContext, useId, useRef, useState } from \"react\";\nimport type { ComponentPropsWithoutRef, ReactNode, Ref } from \"react\";\nimport type { FieldRoot as BaseFieldRoot } from \"@base-ui/react/field\";\n\nimport { cx } from \"../../styled-system/css\";\nimport { field } from \"../../styled-system/recipes\";\nimport { JaciFormContext } from \"../form\";\n\nexport type FieldValidationMode = \"onSubmit\" | \"onBlur\" | \"onChange\";\n\ninterface FieldContextValue {\n  controlId: string | undefined;\n  descriptionId: string | undefined;\n  dirty: boolean;\n  errorId: string | undefined;\n  errors: ReactNode[];\n  insideField: boolean;\n  invalid: boolean;\n  labelId: string | undefined;\n  name: string | undefined;\n  pending: boolean;\n  touched: boolean;\n  valid: boolean | null;\n}\n\nconst FieldContext = createContext<FieldContextValue>({\n  controlId: undefined,\n  descriptionId: undefined,\n  dirty: false,\n  errorId: undefined,\n  errors: [],\n  insideField: false,\n  invalid: false,\n  labelId: undefined,\n  name: undefined,\n  pending: false,\n  touched: false,\n  valid: null,\n});\n\nfunction normalizeErrors(errors: ReactNode | ReactNode[] | undefined): ReactNode[] {\n  if (errors === undefined || errors === null || errors === false) {\n    return [];\n  }\n\n  return Array.isArray(errors) ? errors : [errors];\n}\n\nfunction renderErrors(errors: ReactNode[]) {\n  if (errors.length <= 1) {\n    return errors[0];\n  }\n\n  return (\n    <ul>\n      {errors.map((error, index) => (\n        <li key={typeof error === \"string\" ? error : index}>{error}</li>\n      ))}\n    </ul>\n  );\n}\n\nexport interface FieldProps extends Omit<ComponentPropsWithoutRef<\"div\">, \"children\"> {\n  /** Marks the field invalid when an external validator owns its state. */\n  invalid?: boolean;\n  /** Field name used to resolve errors supplied to the parent Form. */\n  name?: string;\n  /** Direct error content, useful outside a Form or with custom validation. */\n  errors?: ReactNode | ReactNode[];\n  /** Disables the field and its Base UI validation state. */\n  disabled?: boolean;\n  /** Native/Base UI validation callback. */\n  validate?: BaseFieldRoot.Props[\"validate\"];\n  /** Validation timing used by the parent Form. */\n  validationMode?: FieldValidationMode;\n  /** Debounce duration for `validationMode=\"onChange\"`. */\n  validationDebounceTime?: number;\n  /** Controlled dirty/touched state for integrations with external form state. */\n  dirty?: boolean;\n  touched?: boolean;\n  /** Marks the field as awaiting asynchronous validation. */\n  pending?: boolean;\n  /** Imperative field validation actions. */\n  actionsRef?: BaseFieldRoot.Props[\"actionsRef\"];\n  children?: ReactNode;\n}\n\nexport interface FieldLabelProps extends ComponentPropsWithoutRef<\"label\"> {\n  htmlFor?: string;\n}\n\nconst FieldRoot = forwardRef<HTMLDivElement, FieldProps>(function Field(\n  {\n    actionsRef,\n    children,\n    className,\n    dirty,\n    disabled = false,\n    errors: directErrors,\n    invalid: invalidProp = false,\n    name,\n    pending: pendingProp = false,\n    touched,\n    validate,\n    validationDebounceTime,\n    validationMode,\n    ...props\n  },\n  ref,\n) {\n  const generatedId = useId();\n  const controlId = `${generatedId}-control`;\n  const labelId = `${generatedId}-label`;\n  const descriptionId = `${generatedId}-description`;\n  const errorId = `${generatedId}-error`;\n  const [pendingValidation, setPendingValidation] = useState(false);\n  const [validationErrors, setValidationErrors] = useState<ReactNode[]>([]);\n  const [validationValid, setValidationValid] = useState<boolean | null>(null);\n  const validationSequence = useRef(0);\n  const { errors: formErrors } = useContext(JaciFormContext);\n  const formError = name ? formErrors[name] : undefined;\n  const externalErrors =\n    directErrors === undefined ? normalizeErrors(formError) : normalizeErrors(directErrors);\n  const errors =\n    directErrors !== undefined || formError !== undefined ? externalErrors : validationErrors;\n  const invalid = invalidProp || errors.length > 0;\n  const pending = pendingProp || pendingValidation;\n  const wrappedValidate = useCallback<NonNullable<BaseFieldRoot.Props[\"validate\"]>>(\n    (value, formValues) => {\n      const sequence = ++validationSequence.current;\n      if (!validate) return null;\n      const result = validate(value, formValues);\n      if (!result || typeof result !== \"object\" || !(\"then\" in result)) {\n        const resultErrors = normalizeErrors(result);\n        setValidationErrors(resultErrors);\n        setValidationValid(resultErrors.length === 0);\n        setPendingValidation(false);\n        return result;\n      }\n      setValidationErrors([]);\n      setValidationValid(null);\n      setPendingValidation(true);\n      return Promise.resolve(result)\n        .then((validationResult) => {\n          if (sequence !== validationSequence.current) return null;\n          const resultErrors = normalizeErrors(validationResult);\n          setValidationErrors(resultErrors);\n          setValidationValid(resultErrors.length === 0);\n          return validationResult;\n        })\n        .finally(() => {\n          if (sequence === validationSequence.current) setPendingValidation(false);\n        });\n    },\n    [validate],\n  );\n  const styles = field({ invalid });\n\n  return (\n    <FieldContext.Provider\n      value={{\n        controlId,\n        descriptionId,\n        dirty: dirty ?? false,\n        errorId,\n        errors,\n        insideField: true,\n        invalid,\n        labelId,\n        name,\n        pending,\n        touched: touched ?? false,\n        valid: invalid ? false : validationValid,\n      }}\n    >\n      <BaseField.Root\n        {...props}\n        ref={ref}\n        actionsRef={actionsRef}\n        className={cx(styles.root, className)}\n        aria-busy={pending || undefined}\n        data-dirty={dirty || undefined}\n        data-invalid={invalid || undefined}\n        data-jaci-component=\"field\"\n        data-pending={pending || undefined}\n        data-slot=\"field\"\n        data-touched={touched || undefined}\n        disabled={disabled}\n        dirty={dirty}\n        invalid={invalid}\n        name={name}\n        touched={touched}\n        {...(validate ? { validate: wrappedValidate } : {})}\n        validationDebounceTime={validationDebounceTime}\n        validationMode={validationMode}\n      >\n        {children}\n      </BaseField.Root>\n    </FieldContext.Provider>\n  );\n});\n\nexport interface FieldControlProps extends ComponentPropsWithoutRef<typeof BaseField.Control> {}\n\nexport const FieldControl = forwardRef<HTMLElement, FieldControlProps>(function FieldControl(\n  {\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-errormessage\": ariaErrorMessage,\n    \"aria-invalid\": ariaInvalid,\n    \"aria-labelledby\": ariaLabelledBy,\n    className,\n    id,\n    ...props\n  },\n  ref,\n) {\n  const { controlId, descriptionId, errorId, invalid, labelId, pending, insideField } =\n    useContext(FieldContext);\n  const describedBy =\n    [ariaDescribedBy, descriptionId, invalid ? errorId : undefined].filter(Boolean).join(\" \") ||\n    undefined;\n  const labelledBy = [ariaLabelledBy, labelId].filter(Boolean).join(\" \") || undefined;\n  const controlProps = {\n    ...props,\n    \"aria-busy\": pending || undefined,\n    \"aria-describedby\": describedBy,\n    \"aria-errormessage\": ariaErrorMessage ?? (invalid ? errorId : undefined),\n    \"aria-invalid\": ariaInvalid ?? (invalid || undefined),\n    \"aria-labelledby\": labelledBy,\n    className,\n    \"data-pending\": pending || undefined,\n    id: id ?? controlId,\n  };\n  if (!insideField) return <BaseField.Control {...controlProps} ref={ref} />;\n  return <BaseField.Control {...controlProps} ref={ref} />;\n});\n\nexport const FieldLabel = forwardRef<HTMLLabelElement, FieldLabelProps>(function FieldLabel(\n  { children, className, htmlFor, ...props },\n  ref,\n) {\n  const { controlId, insideField, invalid, labelId } = useContext(FieldContext);\n\n  const labelProps = {\n    ...props,\n    className: cx(field({ invalid }).label, className),\n    \"data-slot\": \"field-label\",\n    htmlFor: htmlFor ?? controlId,\n    id: props.id ?? labelId,\n  };\n\n  if (!insideField) {\n    return (\n      <label {...labelProps} ref={ref} htmlFor={htmlFor ?? controlId}>\n        {children}\n      </label>\n    );\n  }\n\n  return (\n    <BaseField.Label {...labelProps} ref={ref as Ref<HTMLElement>}>\n      {children}\n    </BaseField.Label>\n  );\n});\n\nexport const FieldDescription = forwardRef<HTMLParagraphElement, ComponentPropsWithoutRef<\"p\">>(\n  function FieldDescription({ className, ...props }, ref) {\n    const { descriptionId, insideField, invalid } = useContext(FieldContext);\n    const descriptionProps = {\n      ...props,\n      className: cx(field({ invalid }).description, className),\n      \"data-slot\": \"field-description\",\n      id: props.id ?? descriptionId,\n    };\n\n    if (!insideField) {\n      return <p {...descriptionProps} ref={ref} />;\n    }\n\n    return <BaseField.Description {...descriptionProps} ref={ref} />;\n  },\n);\n\nexport interface FieldErrorProps extends Omit<ComponentPropsWithoutRef<\"p\">, \"children\"> {\n  children?: ReactNode;\n  match?: boolean | keyof ValidityState;\n}\n\nexport const FieldError = forwardRef<HTMLParagraphElement, FieldErrorProps>(function FieldError(\n  { children, className, match, ...props },\n  ref,\n) {\n  const { errorId, errors, insideField, invalid } = useContext(FieldContext);\n  const content = children ?? renderErrors(errors);\n\n  if (!insideField) {\n    if (content === undefined || content === null || content === false) {\n      return null;\n    }\n\n    return (\n      <p\n        {...props}\n        ref={ref}\n        className={cx(field({ invalid }).error, className)}\n        data-slot=\"field-error\"\n        id={props.id ?? errorId}\n        role=\"alert\"\n      >\n        {content}\n      </p>\n    );\n  }\n\n  return (\n    <BaseField.Error\n      {...props}\n      ref={ref as Ref<HTMLDivElement>}\n      className={cx(field({ invalid }).error, className)}\n      data-slot=\"field-error\"\n      id={props.id ?? errorId}\n      match={match ?? (invalid ? true : undefined)}\n      render={<p />}\n      role=\"alert\"\n    >\n      {content}\n    </BaseField.Error>\n  );\n});\n\nexport function useFieldState() {\n  return useContext(FieldContext);\n}\n\nexport const Field = Object.assign(FieldRoot, {\n  Root: FieldRoot,\n  Control: FieldControl,\n  Label: FieldLabel,\n  Description: FieldDescription,\n  Error: FieldError,\n});\n"],"mappings":"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"}

package/dist/components/field/index.d.cts

@@ -1,2 +1,2 @@
-import { Field, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.cjs";
-export { Field, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };
+import { Field, FieldControl, FieldControlProps, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.cjs";
+export { Field, FieldControl, type FieldControlProps, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };

package/dist/components/field/index.d.ts

@@ -1,2 +1,2 @@
-import { Field, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.js";
-export { Field, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };
+import { Field, FieldControl, FieldControlProps, FieldDescription, FieldError, FieldErrorProps, FieldLabel, FieldLabelProps, FieldProps, FieldValidationMode, useFieldState } from "./field.js";
+export { Field, FieldControl, type FieldControlProps, FieldDescription, FieldError, type FieldErrorProps, FieldLabel, type FieldLabelProps, type FieldProps, type FieldValidationMode, useFieldState };

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

@@ -0,0 +1,2 @@
+import { PinInput, PinInputControl, PinInputControlProps, PinInputDescription, PinInputDescriptionProps, PinInputError, PinInputErrorProps, PinInputHiddenInput, PinInputHiddenInputProps, PinInputInput, PinInputInputProps, PinInputInputs, PinInputInputsProps, PinInputLabel, PinInputLabelProps, PinInputRoot, PinInputRootProps } from "./pin-input.cjs";
+export { PinInput, PinInputControl, type PinInputControlProps, PinInputDescription, type PinInputDescriptionProps, PinInputError, type PinInputErrorProps, PinInputHiddenInput, type PinInputHiddenInputProps, PinInputInput, type PinInputInputProps, PinInputInputs, type PinInputInputsProps, PinInputLabel, type PinInputLabelProps, PinInputRoot, type PinInputRootProps };

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

@@ -0,0 +1,2 @@
+import { PinInput, PinInputControl, PinInputControlProps, PinInputDescription, PinInputDescriptionProps, PinInputError, PinInputErrorProps, PinInputHiddenInput, PinInputHiddenInputProps, PinInputInput, PinInputInputProps, PinInputInputs, PinInputInputsProps, PinInputLabel, PinInputLabelProps, PinInputRoot, PinInputRootProps } from "./pin-input.js";
+export { PinInput, PinInputControl, type PinInputControlProps, PinInputDescription, type PinInputDescriptionProps, PinInputError, type PinInputErrorProps, PinInputHiddenInput, type PinInputHiddenInputProps, PinInputInput, type PinInputInputProps, PinInputInputs, type PinInputInputsProps, PinInputLabel, type PinInputLabelProps, PinInputRoot, type PinInputRootProps };

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