@yamada-ui/pin-input 0.4.7 → 0.4.9

package/dist/{chunk-UYIAVDTA.mjs → chunk-PNFE67BC.mjs}

@@ -243,3 +243,4 @@ export {
   PinInput,
   PinInputField
 };
+//# sourceMappingURL=chunk-PNFE67BC.mjs.map

package/dist/chunk-PNFE67BC.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pin-input.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n  useFormControlProps,\n  formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n  filterUndefined,\n  getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, KeyboardEvent, Ref } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: PinInputProps[\"type\"]) => {\n  const NUMERIC_REGEX = /^[0-9]+$/\n  const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n  const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n  return regex.test(value)\n}\n\ntype PinInputContext = {\n  getInputProps: (\n    props: PinInputFieldProps & {\n      index: number\n      ref?: Ref<HTMLInputElement>\n    },\n  ) => PinInputFieldProps\n  styles: Record<string, CSSUIObject>\n}\n\nconst [PinInputProvider, usePinInputContext] = createContext<PinInputContext>({\n  strict: false,\n  name: \"PinInputContext\",\n})\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLInputElement>()\n\ntype PinInputOptions = {\n  /**\n   * The top-level id string that will be applied to the input fields.\n   * The index of the input will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The type of values the pin-input should allow.\n   *\n   * @default 'number'\n   */\n  type?: \"alphanumeric\" | \"number\"\n  /**\n   * The placeholder for the pin input.\n   *\n   * @default '○'\n   */\n  placeholder?: string\n  /**\n   * The value of the pin input.\n   */\n  value?: string\n  /**\n   * The initial value of the pin input.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the pin input receives focus on mount.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * If `true`, focus will move automatically to the next input once filled.\n   *\n   * @default true\n   */\n  manageFocus?: boolean\n  /**\n   * If `true`, the pin input component signals to its fields that they should.\n   */\n  otp?: boolean\n  /**\n   * If `true`, the input's value will be masked just like `type=password`.\n   */\n  mask?: boolean\n  /**\n   * Function called on input change.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Function called when all inputs have valid values.\n   */\n  onComplete?: (value: string) => void\n  /**\n   * The number of inputs to display.\n   *\n   * @default 4\n   */\n  items?: number\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type PinInputProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n  ThemeProps<\"PinInput\"> &\n  FormControlOptions &\n  PinInputOptions\n\nexport const PinInput = forwardRef<PinInputProps, \"div\">(\n  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"PinInput\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    let {\n      id,\n      className,\n      type = \"number\",\n      placeholder = \"○\",\n      value,\n      defaultValue,\n      autoFocus,\n      manageFocus = true,\n      otp = false,\n      mask,\n      onChange,\n      onComplete,\n      items = 4,\n      children,\n      ...rest\n    } = useFormControlProps(omitThemeProps(mergedProps))\n\n    id ??= useId()\n\n    const descendants = useDescendants()\n\n    const [moveFocus, setMoveFocus] = useState<boolean>(true)\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n    useEffect(() => {\n      if (!autoFocus) return\n\n      const firstValue = descendants.firstValue()\n\n      if (!firstValue) return\n\n      requestAnimationFrame(() => firstValue.node.focus())\n    }, [autoFocus, descendants])\n\n    const [values, setValues] = useControllableState<string[]>({\n      value: toArray(value),\n      defaultValue: toArray(defaultValue) || [],\n      onChange: (values) => onChange?.(values.join(\"\")),\n    })\n\n    const focusNext = useCallback(\n      (index: number) => {\n        if (!moveFocus || !manageFocus) return\n\n        const next = descendants.nextValue(index, undefined, false)\n\n        if (!next) return\n\n        requestAnimationFrame(() => next.node.focus())\n      },\n      [descendants, moveFocus, manageFocus],\n    )\n\n    const setValue = useCallback(\n      (value: string, index: number, isFocus: boolean = true) => {\n        let nextValues = [...values]\n\n        nextValues[index] = value\n\n        setValues(nextValues)\n\n        nextValues = nextValues.filter(Boolean)\n\n        const isComplete =\n          value !== \"\" &&\n          nextValues.length === descendants.count() &&\n          nextValues.every((value) => value != null && value !== \"\")\n\n        if (isComplete) {\n          onComplete?.(nextValues.join(\"\"))\n          descendants.value(index)?.node.blur()\n        } else if (isFocus) {\n          focusNext(index)\n        }\n      },\n      [values, setValues, descendants, onComplete, focusNext],\n    )\n\n    const getNextValue = useCallback(\n      (value: string | undefined, eventValue: string) => {\n        let nextValue = eventValue\n\n        if (!value?.length) return nextValue\n\n        if (value[0] === eventValue.charAt(0)) {\n          nextValue = eventValue.charAt(1)\n        } else if (value[0] === eventValue.charAt(1)) {\n          nextValue = eventValue.charAt(0)\n        }\n\n        return nextValue\n      },\n      [],\n    )\n\n    const getInputProps = useCallback(\n      ({\n        index,\n        ...props\n      }: PinInputFieldProps & {\n        index: number\n        ref?: Ref<HTMLInputElement>\n      }): PinInputFieldProps => {\n        const onChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n          const eventValue = target.value\n          const currentValue = values[index]\n          const nextValue = getNextValue(currentValue, eventValue)\n\n          if (nextValue === \"\") {\n            setValue(\"\", index)\n\n            return\n          }\n\n          if (eventValue.length > 2) {\n            if (!validate(eventValue, type)) return\n\n            const nextValue = eventValue\n              .split(\"\")\n              .filter((_, index) => index < descendants.count())\n\n            setValues(nextValue)\n\n            if (nextValue.length === descendants.count()) {\n              onComplete?.(nextValue.join(\"\"))\n              descendants.value(index)?.node.blur()\n            }\n          } else {\n            if (validate(nextValue, type)) setValue(nextValue, index)\n\n            setMoveFocus(true)\n          }\n        }\n\n        const onKeyDown = ({\n          key,\n          target,\n        }: KeyboardEvent<HTMLInputElement>) => {\n          if (key !== \"Backspace\" || !manageFocus) return\n\n          if ((target as HTMLInputElement).value === \"\") {\n            const prevInput = descendants.prevValue(index, undefined, false)\n\n            if (!prevInput) return\n\n            setValue(\"\", index - 1, false)\n            prevInput.node?.focus()\n            setMoveFocus(true)\n          } else {\n            setMoveFocus(false)\n          }\n        }\n\n        const onFocus = () => setFocusedIndex(index)\n\n        const onBlur = () => setFocusedIndex(-1)\n\n        return {\n          inputMode: type === \"number\" ? \"numeric\" : \"text\",\n          type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n          ...pickObject(rest, formControlProperties),\n          ...filterUndefined(props),\n          id: `${id}-${index}`,\n          value: values[index] || \"\",\n          onChange: handlerAll(props.onChange, onChange),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n          onFocus: handlerAll(props.onFocus, onFocus),\n          onBlur: handlerAll(props.onBlur, onBlur),\n          autoComplete: otp ? \"one-time-code\" : \"off\",\n          placeholder:\n            focusedIndex === index && !rest.readOnly && !props.readOnly\n              ? \"\"\n              : placeholder,\n        }\n      },\n      [\n        descendants,\n        focusedIndex,\n        getNextValue,\n        id,\n        manageFocus,\n        mask,\n        onComplete,\n        otp,\n        placeholder,\n        rest,\n        setValue,\n        setValues,\n        type,\n        values,\n      ],\n    )\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    let cloneChildren = getValidChildren(children)\n\n    if (!cloneChildren.length)\n      for (let i = 0; i < items; i++) {\n        cloneChildren.push(<PinInputField key={i} />)\n      }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <PinInputProvider value={{ getInputProps, styles }}>\n          <ui.div\n            ref={ref}\n            className={cx(\"ui-pin-input\", className)}\n            {...rest}\n            __css={css}\n          >\n            {cloneChildren}\n          </ui.div>\n        </PinInputProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nexport type PinInputFieldProps = HTMLUIProps<\"input\"> & FormControlOptions\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { getInputProps, styles } = usePinInputContext()\n    const { index, register } = useDescendant()\n\n    rest = useFormControlProps(rest)\n\n    const css: CSSUIObject = { ...styles.field }\n\n    return (\n      <ui.input\n        className={cx(\"ui-pin-input__field\", className)}\n        {...getInputProps({ ...rest, ref: mergeRefs(register, ref), index })}\n        __css={css}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":["values","value","props","onChange","nextValue","index"]}

package/dist/index.js

@@ -253,3 +253,4 @@ var PinInputField = (0, import_core.forwardRef)(
   PinInput,
   PinInputField
 });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/pin-input.tsx"],"sourcesContent":["export { PinInput, PinInputField } from \"./pin-input\"\nexport type { PinInputProps, PinInputFieldProps } from \"./pin-input\"\n","import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n  useFormControlProps,\n  formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n  filterUndefined,\n  getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, KeyboardEvent, Ref } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: PinInputProps[\"type\"]) => {\n  const NUMERIC_REGEX = /^[0-9]+$/\n  const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n  const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n  return regex.test(value)\n}\n\ntype PinInputContext = {\n  getInputProps: (\n    props: PinInputFieldProps & {\n      index: number\n      ref?: Ref<HTMLInputElement>\n    },\n  ) => PinInputFieldProps\n  styles: Record<string, CSSUIObject>\n}\n\nconst [PinInputProvider, usePinInputContext] = createContext<PinInputContext>({\n  strict: false,\n  name: \"PinInputContext\",\n})\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLInputElement>()\n\ntype PinInputOptions = {\n  /**\n   * The top-level id string that will be applied to the input fields.\n   * The index of the input will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The type of values the pin-input should allow.\n   *\n   * @default 'number'\n   */\n  type?: \"alphanumeric\" | \"number\"\n  /**\n   * The placeholder for the pin input.\n   *\n   * @default '○'\n   */\n  placeholder?: string\n  /**\n   * The value of the pin input.\n   */\n  value?: string\n  /**\n   * The initial value of the pin input.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the pin input receives focus on mount.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * If `true`, focus will move automatically to the next input once filled.\n   *\n   * @default true\n   */\n  manageFocus?: boolean\n  /**\n   * If `true`, the pin input component signals to its fields that they should.\n   */\n  otp?: boolean\n  /**\n   * If `true`, the input's value will be masked just like `type=password`.\n   */\n  mask?: boolean\n  /**\n   * Function called on input change.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Function called when all inputs have valid values.\n   */\n  onComplete?: (value: string) => void\n  /**\n   * The number of inputs to display.\n   *\n   * @default 4\n   */\n  items?: number\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type PinInputProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n  ThemeProps<\"PinInput\"> &\n  FormControlOptions &\n  PinInputOptions\n\nexport const PinInput = forwardRef<PinInputProps, \"div\">(\n  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"PinInput\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    let {\n      id,\n      className,\n      type = \"number\",\n      placeholder = \"○\",\n      value,\n      defaultValue,\n      autoFocus,\n      manageFocus = true,\n      otp = false,\n      mask,\n      onChange,\n      onComplete,\n      items = 4,\n      children,\n      ...rest\n    } = useFormControlProps(omitThemeProps(mergedProps))\n\n    id ??= useId()\n\n    const descendants = useDescendants()\n\n    const [moveFocus, setMoveFocus] = useState<boolean>(true)\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n    useEffect(() => {\n      if (!autoFocus) return\n\n      const firstValue = descendants.firstValue()\n\n      if (!firstValue) return\n\n      requestAnimationFrame(() => firstValue.node.focus())\n    }, [autoFocus, descendants])\n\n    const [values, setValues] = useControllableState<string[]>({\n      value: toArray(value),\n      defaultValue: toArray(defaultValue) || [],\n      onChange: (values) => onChange?.(values.join(\"\")),\n    })\n\n    const focusNext = useCallback(\n      (index: number) => {\n        if (!moveFocus || !manageFocus) return\n\n        const next = descendants.nextValue(index, undefined, false)\n\n        if (!next) return\n\n        requestAnimationFrame(() => next.node.focus())\n      },\n      [descendants, moveFocus, manageFocus],\n    )\n\n    const setValue = useCallback(\n      (value: string, index: number, isFocus: boolean = true) => {\n        let nextValues = [...values]\n\n        nextValues[index] = value\n\n        setValues(nextValues)\n\n        nextValues = nextValues.filter(Boolean)\n\n        const isComplete =\n          value !== \"\" &&\n          nextValues.length === descendants.count() &&\n          nextValues.every((value) => value != null && value !== \"\")\n\n        if (isComplete) {\n          onComplete?.(nextValues.join(\"\"))\n          descendants.value(index)?.node.blur()\n        } else if (isFocus) {\n          focusNext(index)\n        }\n      },\n      [values, setValues, descendants, onComplete, focusNext],\n    )\n\n    const getNextValue = useCallback(\n      (value: string | undefined, eventValue: string) => {\n        let nextValue = eventValue\n\n        if (!value?.length) return nextValue\n\n        if (value[0] === eventValue.charAt(0)) {\n          nextValue = eventValue.charAt(1)\n        } else if (value[0] === eventValue.charAt(1)) {\n          nextValue = eventValue.charAt(0)\n        }\n\n        return nextValue\n      },\n      [],\n    )\n\n    const getInputProps = useCallback(\n      ({\n        index,\n        ...props\n      }: PinInputFieldProps & {\n        index: number\n        ref?: Ref<HTMLInputElement>\n      }): PinInputFieldProps => {\n        const onChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n          const eventValue = target.value\n          const currentValue = values[index]\n          const nextValue = getNextValue(currentValue, eventValue)\n\n          if (nextValue === \"\") {\n            setValue(\"\", index)\n\n            return\n          }\n\n          if (eventValue.length > 2) {\n            if (!validate(eventValue, type)) return\n\n            const nextValue = eventValue\n              .split(\"\")\n              .filter((_, index) => index < descendants.count())\n\n            setValues(nextValue)\n\n            if (nextValue.length === descendants.count()) {\n              onComplete?.(nextValue.join(\"\"))\n              descendants.value(index)?.node.blur()\n            }\n          } else {\n            if (validate(nextValue, type)) setValue(nextValue, index)\n\n            setMoveFocus(true)\n          }\n        }\n\n        const onKeyDown = ({\n          key,\n          target,\n        }: KeyboardEvent<HTMLInputElement>) => {\n          if (key !== \"Backspace\" || !manageFocus) return\n\n          if ((target as HTMLInputElement).value === \"\") {\n            const prevInput = descendants.prevValue(index, undefined, false)\n\n            if (!prevInput) return\n\n            setValue(\"\", index - 1, false)\n            prevInput.node?.focus()\n            setMoveFocus(true)\n          } else {\n            setMoveFocus(false)\n          }\n        }\n\n        const onFocus = () => setFocusedIndex(index)\n\n        const onBlur = () => setFocusedIndex(-1)\n\n        return {\n          inputMode: type === \"number\" ? \"numeric\" : \"text\",\n          type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n          ...pickObject(rest, formControlProperties),\n          ...filterUndefined(props),\n          id: `${id}-${index}`,\n          value: values[index] || \"\",\n          onChange: handlerAll(props.onChange, onChange),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n          onFocus: handlerAll(props.onFocus, onFocus),\n          onBlur: handlerAll(props.onBlur, onBlur),\n          autoComplete: otp ? \"one-time-code\" : \"off\",\n          placeholder:\n            focusedIndex === index && !rest.readOnly && !props.readOnly\n              ? \"\"\n              : placeholder,\n        }\n      },\n      [\n        descendants,\n        focusedIndex,\n        getNextValue,\n        id,\n        manageFocus,\n        mask,\n        onComplete,\n        otp,\n        placeholder,\n        rest,\n        setValue,\n        setValues,\n        type,\n        values,\n      ],\n    )\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    let cloneChildren = getValidChildren(children)\n\n    if (!cloneChildren.length)\n      for (let i = 0; i < items; i++) {\n        cloneChildren.push(<PinInputField key={i} />)\n      }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <PinInputProvider value={{ getInputProps, styles }}>\n          <ui.div\n            ref={ref}\n            className={cx(\"ui-pin-input\", className)}\n            {...rest}\n            __css={css}\n          >\n            {cloneChildren}\n          </ui.div>\n        </PinInputProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nexport type PinInputFieldProps = HTMLUIProps<\"input\"> & FormControlOptions\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { getInputProps, styles } = usePinInputContext()\n    const { index, register } = useDescendant()\n\n    rest = useFormControlProps(rest)\n\n    const css: CSSUIObject = { ...styles.field }\n\n    return (\n      <ui.input\n        className={cx(\"ui-pin-input__field\", className)}\n        {...getInputProps({ ...rest, ref: mergeRefs(register, ref), index })}\n        __css={css}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":["values","value","props","onChange","nextValue","index"]}

package/dist/index.mjs

@@ -2,8 +2,9 @@
 import {
   PinInput,
   PinInputField
-} from "./chunk-UYIAVDTA.mjs";
+} from "./chunk-PNFE67BC.mjs";
 export {
   PinInput,
   PinInputField
 };
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/pin-input.js

@@ -251,3 +251,4 @@ var PinInputField = (0, import_core.forwardRef)(
   PinInput,
   PinInputField
 });
+//# sourceMappingURL=pin-input.js.map

package/dist/pin-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/pin-input.tsx"],"sourcesContent":["import type {\n  CSSUIObject,\n  HTMLUIProps,\n  ThemeProps,\n  ColorModeToken,\n  CSS,\n} from \"@yamada-ui/core\"\nimport {\n  ui,\n  forwardRef,\n  useMultiComponentStyle,\n  omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n  useFormControlProps,\n  formControlProperties,\n} from \"@yamada-ui/form-control\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport { createDescendant } from \"@yamada-ui/use-descendant\"\nimport {\n  createContext,\n  cx,\n  handlerAll,\n  mergeRefs,\n  pickObject,\n  filterUndefined,\n  getValidChildren,\n} from \"@yamada-ui/utils\"\nimport type { ChangeEvent, KeyboardEvent, Ref } from \"react\"\nimport { useCallback, useEffect, useId, useState } from \"react\"\n\nconst toArray = (value?: string) => value?.split(\"\")\n\nconst validate = (value: string, type: PinInputProps[\"type\"]) => {\n  const NUMERIC_REGEX = /^[0-9]+$/\n  const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i\n\n  const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX\n\n  return regex.test(value)\n}\n\ntype PinInputContext = {\n  getInputProps: (\n    props: PinInputFieldProps & {\n      index: number\n      ref?: Ref<HTMLInputElement>\n    },\n  ) => PinInputFieldProps\n  styles: Record<string, CSSUIObject>\n}\n\nconst [PinInputProvider, usePinInputContext] = createContext<PinInputContext>({\n  strict: false,\n  name: \"PinInputContext\",\n})\n\nconst { DescendantsContextProvider, useDescendants, useDescendant } =\n  createDescendant<HTMLInputElement>()\n\ntype PinInputOptions = {\n  /**\n   * The top-level id string that will be applied to the input fields.\n   * The index of the input will be appended to this top-level id.\n   */\n  id?: string\n  /**\n   * The type of values the pin-input should allow.\n   *\n   * @default 'number'\n   */\n  type?: \"alphanumeric\" | \"number\"\n  /**\n   * The placeholder for the pin input.\n   *\n   * @default '○'\n   */\n  placeholder?: string\n  /**\n   * The value of the pin input.\n   */\n  value?: string\n  /**\n   * The initial value of the pin input.\n   */\n  defaultValue?: string\n  /**\n   * If `true`, the pin input receives focus on mount.\n   *\n   * @default false\n   */\n  autoFocus?: boolean\n  /**\n   * If `true`, focus will move automatically to the next input once filled.\n   *\n   * @default true\n   */\n  manageFocus?: boolean\n  /**\n   * If `true`, the pin input component signals to its fields that they should.\n   */\n  otp?: boolean\n  /**\n   * If `true`, the input's value will be masked just like `type=password`.\n   */\n  mask?: boolean\n  /**\n   * Function called on input change.\n   */\n  onChange?: (value: string) => void\n  /**\n   * Function called when all inputs have valid values.\n   */\n  onComplete?: (value: string) => void\n  /**\n   * The number of inputs to display.\n   *\n   * @default 4\n   */\n  items?: number\n  /**\n   * The border color when the input is focused.\n   */\n  focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n  /**\n   * The border color when the input is invalid.\n   */\n  errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n}\n\nexport type PinInputProps = Omit<HTMLUIProps<\"div\">, \"onChange\"> &\n  ThemeProps<\"PinInput\"> &\n  FormControlOptions &\n  PinInputOptions\n\nexport const PinInput = forwardRef<PinInputProps, \"div\">(\n  ({ focusBorderColor, errorBorderColor, ...props }, ref) => {\n    const [styles, mergedProps] = useMultiComponentStyle(\"PinInput\", {\n      focusBorderColor,\n      errorBorderColor,\n      ...props,\n    })\n    let {\n      id,\n      className,\n      type = \"number\",\n      placeholder = \"○\",\n      value,\n      defaultValue,\n      autoFocus,\n      manageFocus = true,\n      otp = false,\n      mask,\n      onChange,\n      onComplete,\n      items = 4,\n      children,\n      ...rest\n    } = useFormControlProps(omitThemeProps(mergedProps))\n\n    id ??= useId()\n\n    const descendants = useDescendants()\n\n    const [moveFocus, setMoveFocus] = useState<boolean>(true)\n    const [focusedIndex, setFocusedIndex] = useState<number>(-1)\n\n    useEffect(() => {\n      if (!autoFocus) return\n\n      const firstValue = descendants.firstValue()\n\n      if (!firstValue) return\n\n      requestAnimationFrame(() => firstValue.node.focus())\n    }, [autoFocus, descendants])\n\n    const [values, setValues] = useControllableState<string[]>({\n      value: toArray(value),\n      defaultValue: toArray(defaultValue) || [],\n      onChange: (values) => onChange?.(values.join(\"\")),\n    })\n\n    const focusNext = useCallback(\n      (index: number) => {\n        if (!moveFocus || !manageFocus) return\n\n        const next = descendants.nextValue(index, undefined, false)\n\n        if (!next) return\n\n        requestAnimationFrame(() => next.node.focus())\n      },\n      [descendants, moveFocus, manageFocus],\n    )\n\n    const setValue = useCallback(\n      (value: string, index: number, isFocus: boolean = true) => {\n        let nextValues = [...values]\n\n        nextValues[index] = value\n\n        setValues(nextValues)\n\n        nextValues = nextValues.filter(Boolean)\n\n        const isComplete =\n          value !== \"\" &&\n          nextValues.length === descendants.count() &&\n          nextValues.every((value) => value != null && value !== \"\")\n\n        if (isComplete) {\n          onComplete?.(nextValues.join(\"\"))\n          descendants.value(index)?.node.blur()\n        } else if (isFocus) {\n          focusNext(index)\n        }\n      },\n      [values, setValues, descendants, onComplete, focusNext],\n    )\n\n    const getNextValue = useCallback(\n      (value: string | undefined, eventValue: string) => {\n        let nextValue = eventValue\n\n        if (!value?.length) return nextValue\n\n        if (value[0] === eventValue.charAt(0)) {\n          nextValue = eventValue.charAt(1)\n        } else if (value[0] === eventValue.charAt(1)) {\n          nextValue = eventValue.charAt(0)\n        }\n\n        return nextValue\n      },\n      [],\n    )\n\n    const getInputProps = useCallback(\n      ({\n        index,\n        ...props\n      }: PinInputFieldProps & {\n        index: number\n        ref?: Ref<HTMLInputElement>\n      }): PinInputFieldProps => {\n        const onChange = ({ target }: ChangeEvent<HTMLInputElement>) => {\n          const eventValue = target.value\n          const currentValue = values[index]\n          const nextValue = getNextValue(currentValue, eventValue)\n\n          if (nextValue === \"\") {\n            setValue(\"\", index)\n\n            return\n          }\n\n          if (eventValue.length > 2) {\n            if (!validate(eventValue, type)) return\n\n            const nextValue = eventValue\n              .split(\"\")\n              .filter((_, index) => index < descendants.count())\n\n            setValues(nextValue)\n\n            if (nextValue.length === descendants.count()) {\n              onComplete?.(nextValue.join(\"\"))\n              descendants.value(index)?.node.blur()\n            }\n          } else {\n            if (validate(nextValue, type)) setValue(nextValue, index)\n\n            setMoveFocus(true)\n          }\n        }\n\n        const onKeyDown = ({\n          key,\n          target,\n        }: KeyboardEvent<HTMLInputElement>) => {\n          if (key !== \"Backspace\" || !manageFocus) return\n\n          if ((target as HTMLInputElement).value === \"\") {\n            const prevInput = descendants.prevValue(index, undefined, false)\n\n            if (!prevInput) return\n\n            setValue(\"\", index - 1, false)\n            prevInput.node?.focus()\n            setMoveFocus(true)\n          } else {\n            setMoveFocus(false)\n          }\n        }\n\n        const onFocus = () => setFocusedIndex(index)\n\n        const onBlur = () => setFocusedIndex(-1)\n\n        return {\n          inputMode: type === \"number\" ? \"numeric\" : \"text\",\n          type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n          ...pickObject(rest, formControlProperties),\n          ...filterUndefined(props),\n          id: `${id}-${index}`,\n          value: values[index] || \"\",\n          onChange: handlerAll(props.onChange, onChange),\n          onKeyDown: handlerAll(props.onKeyDown, onKeyDown),\n          onFocus: handlerAll(props.onFocus, onFocus),\n          onBlur: handlerAll(props.onBlur, onBlur),\n          autoComplete: otp ? \"one-time-code\" : \"off\",\n          placeholder:\n            focusedIndex === index && !rest.readOnly && !props.readOnly\n              ? \"\"\n              : placeholder,\n        }\n      },\n      [\n        descendants,\n        focusedIndex,\n        getNextValue,\n        id,\n        manageFocus,\n        mask,\n        onComplete,\n        otp,\n        placeholder,\n        rest,\n        setValue,\n        setValues,\n        type,\n        values,\n      ],\n    )\n\n    const css: CSSUIObject = {\n      display: \"flex\",\n      alignItems: \"center\",\n      ...styles.container,\n    }\n\n    let cloneChildren = getValidChildren(children)\n\n    if (!cloneChildren.length)\n      for (let i = 0; i < items; i++) {\n        cloneChildren.push(<PinInputField key={i} />)\n      }\n\n    return (\n      <DescendantsContextProvider value={descendants}>\n        <PinInputProvider value={{ getInputProps, styles }}>\n          <ui.div\n            ref={ref}\n            className={cx(\"ui-pin-input\", className)}\n            {...rest}\n            __css={css}\n          >\n            {cloneChildren}\n          </ui.div>\n        </PinInputProvider>\n      </DescendantsContextProvider>\n    )\n  },\n)\n\nexport type PinInputFieldProps = HTMLUIProps<\"input\"> & FormControlOptions\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n  ({ className, ...rest }, ref) => {\n    const { getInputProps, styles } = usePinInputContext()\n    const { index, register } = useDescendant()\n\n    rest = useFormControlProps(rest)\n\n    const css: CSSUIObject = { ...styles.field }\n\n    return (\n      <ui.input\n        className={cx(\"ui-pin-input__field\", className)}\n        {...getInputProps({ ...rest, ref: mergeRefs(register, ref), index })}\n        __css={css}\n      />\n    )\n  },\n)\n"],"mappings":"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","names":["values","value","props","onChange","nextValue","index"]}

package/dist/pin-input.mjs

@@ -2,8 +2,9 @@
 import {
   PinInput,
   PinInputField
-} from "./chunk-UYIAVDTA.mjs";
+} from "./chunk-PNFE67BC.mjs";
 export {
   PinInput,
   PinInputField
 };
+//# sourceMappingURL=pin-input.mjs.map

package/dist/pin-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/pin-input",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "Yamada UI pin input component",
   "keywords": [
     "yamada",
@@ -35,11 +35,11 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/core": "0.14.0",
-    "@yamada-ui/utils": "0.4.1",
-    "@yamada-ui/form-control": "0.3.25",
-    "@yamada-ui/use-descendant": "0.2.9",
-    "@yamada-ui/use-controllable-state": "0.4.2"
+    "@yamada-ui/core": "0.14.2",
+    "@yamada-ui/utils": "0.5.0",
+    "@yamada-ui/form-control": "0.3.27",
+    "@yamada-ui/use-descendant": "0.2.10",
+    "@yamada-ui/use-controllable-state": "0.4.3"
   },
   "devDependencies": {
     "react": "^18.0.0",
@@ -58,7 +58,8 @@
     ],
     "banner": {
       "js": "\"use client\""
-    }
+    },
+    "sourcemap": true
   },
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",