@yamada-ui/pin-input 1.0.28-dev-20240503234826 → 1.0.28-dev-20240504023206

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/{chunk-DY3R3ULS.mjs → chunk-XNTJGWGG.mjs} +4 -3
  2. package/dist/{chunk-DY3R3ULS.mjs.map → chunk-XNTJGWGG.mjs.map} +1 -1
  3. package/dist/index.js +3 -2
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/pin-input.js +3 -2
  7. package/dist/pin-input.js.map +1 -1
  8. package/dist/pin-input.mjs +1 -1
  9. package/package.json +3 -3
package/dist/{chunk-DY3R3ULS.mjs → chunk-XNTJGWGG.mjs} RENAMED
@@ -136,7 +136,7 @@ var PinInput = forwardRef(
136
136
  if (eventValue.length > 2) {
137
137
  if (!validate(eventValue, type))
138
138
  return;
139
- const nextValue2 = eventValue.split("").filter((_, index2) => index2 < descendants.count());
139
+ const nextValue2 = eventValue.split("").filter((_2, index2) => index2 < descendants.count());
140
140
  setValues(nextValue2);
141
141
  if (nextValue2.length === descendants.count()) {
142
142
  onComplete == null ? void 0 : onComplete(nextValue2.join(""));
@@ -213,13 +213,14 @@ var PinInput = forwardRef(
213
213
  for (let i = 0; i < items; i++) {
214
214
  cloneChildren.push(/* @__PURE__ */ jsx(PinInputField, {}, i));
215
215
  }
216
+ const { "aria-readonly": _, ...restWithoutAriaReadonly } = rest;
216
217
  return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ jsx(
217
218
  ui.div,
218
219
  {
219
220
  ref,
220
221
  className: cx("ui-pin-input", className),
221
- ...rest,
222
222
  __css: css,
223
+ ...restWithoutAriaReadonly,
223
224
  children: cloneChildren
224
225
  }
225
226
  ) }) });
@@ -246,4 +247,4 @@ export {
246
247
  PinInput,
247
248
  PinInputField
248
249
  };
249
- //# sourceMappingURL=chunk-DY3R3ULS.mjs.map
250
+ //# sourceMappingURL=chunk-XNTJGWGG.mjs.map
package/dist/{chunk-DY3R3ULS.mjs.map → chunk-XNTJGWGG.mjs.map} RENAMED
@@ -1 +1 @@
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 getFormControlProperties,\n useFormControlProps,\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\" | \"mask\"> &\n ThemeProps<\"PinInput\"> &\n FormControlOptions &\n PinInputOptions\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see Docs https://yamada-ui.com/components/forms/pin-input\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(\n rest,\n getFormControlProperties({ omit: [\"aria-readonly\"] }),\n ),\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"]}
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 getFormControlProperties,\n useFormControlProps,\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\" | \"mask\"> &\n ThemeProps<\"PinInput\"> &\n FormControlOptions &\n PinInputOptions\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see Docs https://yamada-ui.com/components/forms/pin-input\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(\n rest,\n getFormControlProperties({ omit: [\"aria-readonly\"] }),\n ),\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 const { \"aria-readonly\": _, ...restWithoutAriaReadonly } = rest\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 __css={css}\n {...restWithoutAriaReadonly}\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 CHANGED
@@ -146,7 +146,7 @@ var PinInput = (0, import_core.forwardRef)(
146
146
  if (eventValue.length > 2) {
147
147
  if (!validate(eventValue, type))
148
148
  return;
149
- const nextValue2 = eventValue.split("").filter((_, index2) => index2 < descendants.count());
149
+ const nextValue2 = eventValue.split("").filter((_2, index2) => index2 < descendants.count());
150
150
  setValues(nextValue2);
151
151
  if (nextValue2.length === descendants.count()) {
152
152
  onComplete == null ? void 0 : onComplete(nextValue2.join(""));
@@ -223,13 +223,14 @@ var PinInput = (0, import_core.forwardRef)(
223
223
  for (let i = 0; i < items; i++) {
224
224
  cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
225
225
  }
226
+ const { "aria-readonly": _, ...restWithoutAriaReadonly } = rest;
226
227
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
227
228
  import_core.ui.div,
228
229
  {
229
230
  ref,
230
231
  className: (0, import_utils.cx)("ui-pin-input", className),
231
- ...rest,
232
232
  __css: css,
233
+ ...restWithoutAriaReadonly,
233
234
  children: cloneChildren
234
235
  }
235
236
  ) }) });
package/dist/index.js.map CHANGED
@@ -1 +1 @@
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 getFormControlProperties,\n useFormControlProps,\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\" | \"mask\"> &\n ThemeProps<\"PinInput\"> &\n FormControlOptions &\n PinInputOptions\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see Docs https://yamada-ui.com/components/forms/pin-input\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(\n rest,\n getFormControlProperties({ omit: [\"aria-readonly\"] }),\n ),\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"]}
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 getFormControlProperties,\n useFormControlProps,\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\" | \"mask\"> &\n ThemeProps<\"PinInput\"> &\n FormControlOptions &\n PinInputOptions\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see Docs https://yamada-ui.com/components/forms/pin-input\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(\n rest,\n getFormControlProperties({ omit: [\"aria-readonly\"] }),\n ),\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 const { \"aria-readonly\": _, ...restWithoutAriaReadonly } = rest\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 __css={css}\n {...restWithoutAriaReadonly}\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 CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  PinInput,
4
4
  PinInputField
5
- } from "./chunk-DY3R3ULS.mjs";
5
+ } from "./chunk-XNTJGWGG.mjs";
6
6
  export {
7
7
  PinInput,
8
8
  PinInputField
package/dist/pin-input.js CHANGED
@@ -144,7 +144,7 @@ var PinInput = (0, import_core.forwardRef)(
144
144
  if (eventValue.length > 2) {
145
145
  if (!validate(eventValue, type))
146
146
  return;
147
- const nextValue2 = eventValue.split("").filter((_, index2) => index2 < descendants.count());
147
+ const nextValue2 = eventValue.split("").filter((_2, index2) => index2 < descendants.count());
148
148
  setValues(nextValue2);
149
149
  if (nextValue2.length === descendants.count()) {
150
150
  onComplete == null ? void 0 : onComplete(nextValue2.join(""));
@@ -221,13 +221,14 @@ var PinInput = (0, import_core.forwardRef)(
221
221
  for (let i = 0; i < items; i++) {
222
222
  cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
223
223
  }
224
+ const { "aria-readonly": _, ...restWithoutAriaReadonly } = rest;
224
225
  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
225
226
  import_core.ui.div,
226
227
  {
227
228
  ref,
228
229
  className: (0, import_utils.cx)("ui-pin-input", className),
229
- ...rest,
230
230
  __css: css,
231
+ ...restWithoutAriaReadonly,
231
232
  children: cloneChildren
232
233
  }
233
234
  ) }) });
package/dist/pin-input.js.map CHANGED
@@ -1 +1 @@
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 getFormControlProperties,\n useFormControlProps,\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\" | \"mask\"> &\n ThemeProps<\"PinInput\"> &\n FormControlOptions &\n PinInputOptions\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see Docs https://yamada-ui.com/components/forms/pin-input\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(\n rest,\n getFormControlProperties({ omit: [\"aria-readonly\"] }),\n ),\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"]}
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 getFormControlProperties,\n useFormControlProps,\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\" | \"mask\"> &\n ThemeProps<\"PinInput\"> &\n FormControlOptions &\n PinInputOptions\n\n/**\n * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.\n *\n * @see Docs https://yamada-ui.com/components/forms/pin-input\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(\n rest,\n getFormControlProperties({ omit: [\"aria-readonly\"] }),\n ),\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 const { \"aria-readonly\": _, ...restWithoutAriaReadonly } = rest\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 __css={css}\n {...restWithoutAriaReadonly}\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 CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  PinInput,
4
4
  PinInputField
5
- } from "./chunk-DY3R3ULS.mjs";
5
+ } from "./chunk-XNTJGWGG.mjs";
6
6
  export {
7
7
  PinInput,
8
8
  PinInputField
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@yamada-ui/pin-input",
3
- "version": "1.0.28-dev-20240503234826",
3
+ "version": "1.0.28-dev-20240504023206",
4
4
  "description": "Yamada UI pin input component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,9 +36,9 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.6.7-dev-20240503234826",
39
+ "@yamada-ui/core": "1.6.7-dev-20240504023206",
40
40
  "@yamada-ui/utils": "1.2.0",
41
- "@yamada-ui/form-control": "1.0.28-dev-20240503234826",
41
+ "@yamada-ui/form-control": "1.0.28-dev-20240504023206",
42
42
  "@yamada-ui/use-descendant": "1.0.13",
43
43
  "@yamada-ui/use-controllable-state": "1.0.13"
44
44
  },