@yamada-ui/pin-input 1.0.43-next-20241005220055 → 1.0.43-next-20241008193728

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 (12) hide show
  1. package/dist/{chunk-ZEJ5NH2C.mjs → chunk-EDMXO275.mjs} +33 -34
  2. package/dist/chunk-EDMXO275.mjs.map +1 -0
  3. package/dist/index.js +26 -27
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1 -1
  6. package/dist/pin-input.d.mts +27 -27
  7. package/dist/pin-input.d.ts +27 -27
  8. package/dist/pin-input.js +26 -27
  9. package/dist/pin-input.js.map +1 -1
  10. package/dist/pin-input.mjs +1 -1
  11. package/package.json +6 -6
  12. package/dist/chunk-ZEJ5NH2C.mjs.map +0 -1
package/dist/{chunk-ZEJ5NH2C.mjs → chunk-EDMXO275.mjs} RENAMED
@@ -2,10 +2,10 @@
2
2
 
3
3
  // src/pin-input.tsx
4
4
  import {
5
- ui,
6
5
  forwardRef,
7
- useComponentMultiStyle,
8
- omitThemeProps
6
+ omitThemeProps,
7
+ ui,
8
+ useComponentMultiStyle
9
9
  } from "@yamada-ui/core";
10
10
  import {
11
11
  formControlProperties,
@@ -16,11 +16,11 @@ import { createDescendant } from "@yamada-ui/use-descendant";
16
16
  import {
17
17
  createContext,
18
18
  cx,
19
+ filterUndefined,
20
+ getValidChildren,
19
21
  handlerAll,
20
22
  mergeRefs,
21
- pickObject,
22
- filterUndefined,
23
- getValidChildren
23
+ pickObject
24
24
  } from "@yamada-ui/utils";
25
25
  import { useCallback, useEffect, useId, useState } from "react";
26
26
  import { jsx } from "react/jsx-runtime";
@@ -32,37 +32,37 @@ var validate = (value, type) => {
32
32
  return regex.test(value);
33
33
  };
34
34
  var [PinInputProvider, usePinInputContext] = createContext({
35
- strict: false,
36
- name: "PinInputContext"
35
+ name: "PinInputContext",
36
+ errorMessage: `PinInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<PinInput />"`
37
37
  });
38
- var { DescendantsContextProvider, useDescendants, useDescendant } = createDescendant();
38
+ var { DescendantsContextProvider, useDescendant, useDescendants } = createDescendant();
39
39
  var PinInput = forwardRef(
40
- ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
40
+ ({ errorBorderColor, focusBorderColor, ...props }, ref) => {
41
41
  const [styles, mergedProps] = useComponentMultiStyle("PinInput", {
42
- focusBorderColor,
43
42
  errorBorderColor,
43
+ focusBorderColor,
44
44
  ...props
45
45
  });
46
46
  let {
47
47
  id,
48
- className,
49
48
  type = "number",
50
- placeholder = "\u25CB",
51
- value,
52
- defaultValue,
49
+ className,
53
50
  autoFocus,
51
+ children,
52
+ defaultValue,
53
+ items = 4,
54
54
  manageFocus = true,
55
- otp = false,
56
55
  mask,
56
+ otp = false,
57
+ placeholder = "\u25CB",
58
+ value,
57
59
  onChange: onChangeProp,
58
60
  onComplete,
59
- items = 4,
60
- children,
61
61
  ...rest
62
62
  } = useFormControlProps(omitThemeProps(mergedProps));
63
63
  const {
64
- readOnly,
65
64
  "aria-readonly": _ariaReadonly,
65
+ readOnly,
66
66
  ...formControlProps
67
67
  } = pickObject(rest, formControlProperties);
68
68
  const uuid = useId();
@@ -77,8 +77,8 @@ var PinInput = forwardRef(
77
77
  requestAnimationFrame(() => firstValue.node.focus());
78
78
  }, [autoFocus, descendants]);
79
79
  const [values, setValues] = useControllableState({
80
- value: toArray(value),
81
80
  defaultValue: toArray(defaultValue) || [],
81
+ value: toArray(value),
82
82
  onChange: (values2) => onChangeProp == null ? void 0 : onChangeProp(values2.join(""))
83
83
  });
84
84
  const focusNext = useCallback(
@@ -97,7 +97,7 @@ var PinInput = forwardRef(
97
97
  nextValues[index] = value2;
98
98
  setValues(nextValues);
99
99
  nextValues = nextValues.filter(Boolean);
100
- const isComplete = value2 !== "" && nextValues.length === descendants.count() && nextValues.every((value3) => value3 != null && value3 !== "");
100
+ const isComplete = value2 !== "" && nextValues.length === descendants.count();
101
101
  if (isComplete) {
102
102
  onComplete == null ? void 0 : onComplete(nextValues.join(""));
103
103
  (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
@@ -111,9 +111,9 @@ var PinInput = forwardRef(
111
111
  (value2, eventValue) => {
112
112
  let nextValue = eventValue;
113
113
  if (!(value2 == null ? void 0 : value2.length)) return nextValue;
114
- if (value2[0] === eventValue.charAt(0)) {
114
+ if (value2.startsWith(eventValue.charAt(0))) {
115
115
  nextValue = eventValue.charAt(1);
116
- } else if (value2[0] === eventValue.charAt(1)) {
116
+ } else if (value2.startsWith(eventValue.charAt(1))) {
117
117
  nextValue = eventValue.charAt(0);
118
118
  }
119
119
  return nextValue;
@@ -155,13 +155,12 @@ var PinInput = forwardRef(
155
155
  );
156
156
  const onKeyDown = useCallback(
157
157
  (index) => ({ key, target }) => {
158
- var _a;
159
158
  if (key !== "Backspace" || !manageFocus) return;
160
159
  if (target.value === "") {
161
160
  const prevInput = descendants.prevValue(index, void 0, false);
162
161
  if (!prevInput) return;
163
162
  setValue("", index - 1, false);
164
- (_a = prevInput.node) == null ? void 0 : _a.focus();
163
+ prevInput.node.focus();
165
164
  setMoveFocus(true);
166
165
  } else {
167
166
  setMoveFocus(false);
@@ -179,18 +178,18 @@ var PinInput = forwardRef(
179
178
  index,
180
179
  ...props2
181
180
  }) => ({
182
- inputMode: type === "number" ? "numeric" : "text",
183
181
  type: mask ? "password" : type === "number" ? "tel" : "text",
182
+ inputMode: type === "number" ? "numeric" : "text",
184
183
  ...formControlProps,
185
184
  ...filterUndefined(props2),
186
185
  id: `${id}-${index}`,
186
+ autoComplete: otp ? "one-time-code" : "off",
187
+ placeholder: focusedIndex === index && !readOnly && !props2.readOnly ? "" : placeholder,
187
188
  value: values[index] || "",
189
+ onBlur: handlerAll(props2.onBlur, onBlur),
188
190
  onChange: handlerAll(props2.onChange, onChange(index)),
189
- onKeyDown: handlerAll(props2.onKeyDown, onKeyDown(index)),
190
191
  onFocus: handlerAll(props2.onFocus, onFocus(index)),
191
- onBlur: handlerAll(props2.onBlur, onBlur),
192
- autoComplete: otp ? "one-time-code" : "off",
193
- placeholder: focusedIndex === index && !readOnly && !props2.readOnly ? "" : placeholder
192
+ onKeyDown: handlerAll(props2.onKeyDown, onKeyDown(index))
194
193
  }),
195
194
  [
196
195
  type,
@@ -209,8 +208,8 @@ var PinInput = forwardRef(
209
208
  ]
210
209
  );
211
210
  const css = {
212
- display: "flex",
213
211
  alignItems: "center",
212
+ display: "flex",
214
213
  ...styles.container
215
214
  };
216
215
  let cloneChildren = getValidChildren(children);
@@ -218,7 +217,7 @@ var PinInput = forwardRef(
218
217
  for (let i = 0; i < items; i++) {
219
218
  cloneChildren.push(/* @__PURE__ */ jsx(PinInputField, {}, i));
220
219
  }
221
- return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(PinInputProvider, { value: { getInputProps, styles }, children: /* @__PURE__ */ jsx(
220
+ return /* @__PURE__ */ jsx(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ jsx(PinInputProvider, { value: { styles, getInputProps }, children: /* @__PURE__ */ jsx(
222
221
  ui.div,
223
222
  {
224
223
  ref,
@@ -234,7 +233,7 @@ PinInput.displayName = "PinInput";
234
233
  PinInput.__ui__ = "PinInput";
235
234
  var PinInputField = forwardRef(
236
235
  ({ className, ...rest }, ref) => {
237
- const { getInputProps, styles } = usePinInputContext();
236
+ const { styles, getInputProps } = usePinInputContext();
238
237
  const { index, register } = useDescendant();
239
238
  rest = useFormControlProps(rest);
240
239
  const css = { ...styles.field };
@@ -255,4 +254,4 @@ export {
255
254
  PinInput,
256
255
  PinInputField
257
256
  };
258
- //# sourceMappingURL=chunk-ZEJ5NH2C.mjs.map
257
+ //# sourceMappingURL=chunk-EDMXO275.mjs.map
package/dist/chunk-EDMXO275.mjs.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"sources":["../src/pin-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, KeyboardEvent, Ref } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\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 filterUndefined,\n getValidChildren,\n handlerAll,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\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\ninterface PinInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getInputProps: (\n props: {\n index: number\n ref?: Ref<HTMLInputElement>\n } & PinInputFieldProps,\n ) => PinInputFieldProps\n}\n\nconst [PinInputProvider, usePinInputContext] = createContext<PinInputContext>({\n name: \"PinInputContext\",\n errorMessage: `PinInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<PinInput />\"`,\n})\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n createDescendant<HTMLInputElement>()\n\ninterface 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 * If `true`, the pin input receives focus on mount.\n *\n * @default false\n */\n autoFocus?: boolean\n /**\n * The initial value of the pin input.\n */\n defaultValue?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The number of inputs to display.\n *\n * @default 4\n */\n items?: number\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 input's value will be masked just like `type=password`.\n */\n mask?: boolean\n /**\n * If `true`, the pin input component signals to its fields that they should.\n */\n otp?: boolean\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 * 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\nexport interface PinInputProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"mask\" | \"onChange\">,\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 ({ errorBorderColor, focusBorderColor, ...props }, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"PinInput\", {\n errorBorderColor,\n focusBorderColor,\n ...props,\n })\n let {\n id,\n type = \"number\",\n className,\n autoFocus,\n children,\n defaultValue,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"○\",\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n readOnly,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const uuid = useId()\n\n id ??= uuid\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 defaultValue: toArray(defaultValue) || [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(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 = 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 !== \"\" && nextValues.length === descendants.count()\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.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ 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 descendants,\n getNextValue,\n onComplete,\n setValue,\n setValues,\n type,\n values,\n ],\n )\n\n const onKeyDown = useCallback(\n (index: number) =>\n ({ key, target }: 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 [descendants, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getInputProps = useCallback(\n ({\n index,\n ...props\n }: {\n index: number\n ref?: Ref<HTMLInputElement>\n } & PinInputFieldProps): PinInputFieldProps => ({\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n ...formControlProps,\n ...filterUndefined(props),\n id: `${id}-${index}`,\n autoComplete: otp ? \"one-time-code\" : \"off\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n value: values[index] || \"\",\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n type,\n mask,\n formControlProps,\n id,\n values,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n otp,\n focusedIndex,\n readOnly,\n placeholder,\n ],\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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={{ styles, getInputProps }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pin-input\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n </PinInputProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nPinInput.displayName = \"PinInput\"\nPinInput.__ui__ = \"PinInput\"\n\nexport interface PinInputFieldProps\n extends HTMLUIProps<\"input\">,\n FormControlOptions {}\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = 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\nPinInputField.displayName = \"PinInputField\"\nPinInputField.__ui__ = \"PinInputField\"\n"],"mappings":"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","names":["values","value","nextValue","index","props"]}
package/dist/index.js CHANGED
@@ -42,37 +42,37 @@ var validate = (value, type) => {
42
42
  return regex.test(value);
43
43
  };
44
44
  var [PinInputProvider, usePinInputContext] = (0, import_utils.createContext)({
45
- strict: false,
46
- name: "PinInputContext"
45
+ name: "PinInputContext",
46
+ errorMessage: `PinInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<PinInput />"`
47
47
  });
48
- var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
48
+ var { DescendantsContextProvider, useDescendant, useDescendants } = (0, import_use_descendant.createDescendant)();
49
49
  var PinInput = (0, import_core.forwardRef)(
50
- ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
50
+ ({ errorBorderColor, focusBorderColor, ...props }, ref) => {
51
51
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("PinInput", {
52
- focusBorderColor,
53
52
  errorBorderColor,
53
+ focusBorderColor,
54
54
  ...props
55
55
  });
56
56
  let {
57
57
  id,
58
- className,
59
58
  type = "number",
60
- placeholder = "\u25CB",
61
- value,
62
- defaultValue,
59
+ className,
63
60
  autoFocus,
61
+ children,
62
+ defaultValue,
63
+ items = 4,
64
64
  manageFocus = true,
65
- otp = false,
66
65
  mask,
66
+ otp = false,
67
+ placeholder = "\u25CB",
68
+ value,
67
69
  onChange: onChangeProp,
68
70
  onComplete,
69
- items = 4,
70
- children,
71
71
  ...rest
72
72
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
73
73
  const {
74
- readOnly,
75
74
  "aria-readonly": _ariaReadonly,
75
+ readOnly,
76
76
  ...formControlProps
77
77
  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
78
78
  const uuid = (0, import_react.useId)();
@@ -87,8 +87,8 @@ var PinInput = (0, import_core.forwardRef)(
87
87
  requestAnimationFrame(() => firstValue.node.focus());
88
88
  }, [autoFocus, descendants]);
89
89
  const [values, setValues] = (0, import_use_controllable_state.useControllableState)({
90
- value: toArray(value),
91
90
  defaultValue: toArray(defaultValue) || [],
91
+ value: toArray(value),
92
92
  onChange: (values2) => onChangeProp == null ? void 0 : onChangeProp(values2.join(""))
93
93
  });
94
94
  const focusNext = (0, import_react.useCallback)(
@@ -107,7 +107,7 @@ var PinInput = (0, import_core.forwardRef)(
107
107
  nextValues[index] = value2;
108
108
  setValues(nextValues);
109
109
  nextValues = nextValues.filter(Boolean);
110
- const isComplete = value2 !== "" && nextValues.length === descendants.count() && nextValues.every((value3) => value3 != null && value3 !== "");
110
+ const isComplete = value2 !== "" && nextValues.length === descendants.count();
111
111
  if (isComplete) {
112
112
  onComplete == null ? void 0 : onComplete(nextValues.join(""));
113
113
  (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
@@ -121,9 +121,9 @@ var PinInput = (0, import_core.forwardRef)(
121
121
  (value2, eventValue) => {
122
122
  let nextValue = eventValue;
123
123
  if (!(value2 == null ? void 0 : value2.length)) return nextValue;
124
- if (value2[0] === eventValue.charAt(0)) {
124
+ if (value2.startsWith(eventValue.charAt(0))) {
125
125
  nextValue = eventValue.charAt(1);
126
- } else if (value2[0] === eventValue.charAt(1)) {
126
+ } else if (value2.startsWith(eventValue.charAt(1))) {
127
127
  nextValue = eventValue.charAt(0);
128
128
  }
129
129
  return nextValue;
@@ -165,13 +165,12 @@ var PinInput = (0, import_core.forwardRef)(
165
165
  );
166
166
  const onKeyDown = (0, import_react.useCallback)(
167
167
  (index) => ({ key, target }) => {
168
- var _a;
169
168
  if (key !== "Backspace" || !manageFocus) return;
170
169
  if (target.value === "") {
171
170
  const prevInput = descendants.prevValue(index, void 0, false);
172
171
  if (!prevInput) return;
173
172
  setValue("", index - 1, false);
174
- (_a = prevInput.node) == null ? void 0 : _a.focus();
173
+ prevInput.node.focus();
175
174
  setMoveFocus(true);
176
175
  } else {
177
176
  setMoveFocus(false);
@@ -189,18 +188,18 @@ var PinInput = (0, import_core.forwardRef)(
189
188
  index,
190
189
  ...props2
191
190
  }) => ({
192
- inputMode: type === "number" ? "numeric" : "text",
193
191
  type: mask ? "password" : type === "number" ? "tel" : "text",
192
+ inputMode: type === "number" ? "numeric" : "text",
194
193
  ...formControlProps,
195
194
  ...(0, import_utils.filterUndefined)(props2),
196
195
  id: `${id}-${index}`,
196
+ autoComplete: otp ? "one-time-code" : "off",
197
+ placeholder: focusedIndex === index && !readOnly && !props2.readOnly ? "" : placeholder,
197
198
  value: values[index] || "",
199
+ onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
198
200
  onChange: (0, import_utils.handlerAll)(props2.onChange, onChange(index)),
199
- onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown(index)),
200
201
  onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus(index)),
201
- onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
202
- autoComplete: otp ? "one-time-code" : "off",
203
- placeholder: focusedIndex === index && !readOnly && !props2.readOnly ? "" : placeholder
202
+ onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown(index))
204
203
  }),
205
204
  [
206
205
  type,
@@ -219,8 +218,8 @@ var PinInput = (0, import_core.forwardRef)(
219
218
  ]
220
219
  );
221
220
  const css = {
222
- display: "flex",
223
221
  alignItems: "center",
222
+ display: "flex",
224
223
  ...styles.container
225
224
  };
226
225
  let cloneChildren = (0, import_utils.getValidChildren)(children);
@@ -228,7 +227,7 @@ var PinInput = (0, import_core.forwardRef)(
228
227
  for (let i = 0; i < items; i++) {
229
228
  cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
230
229
  }
231
- 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)(
230
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { styles, getInputProps }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
232
231
  import_core.ui.div,
233
232
  {
234
233
  ref,
@@ -244,7 +243,7 @@ PinInput.displayName = "PinInput";
244
243
  PinInput.__ui__ = "PinInput";
245
244
  var PinInputField = (0, import_core.forwardRef)(
246
245
  ({ className, ...rest }, ref) => {
247
- const { getInputProps, styles } = usePinInputContext();
246
+ const { styles, getInputProps } = usePinInputContext();
248
247
  const { index, register } = useDescendant();
249
248
  rest = (0, import_form_control.useFormControlProps)(rest);
250
249
  const css = { ...styles.field };
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 useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\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\ninterface PinInputContext {\n getInputProps: (\n props: PinInputFieldProps & {\n index: number\n ref?: Ref<HTMLInputElement>\n },\n ) => PinInputFieldProps\n styles: { [key: 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\ninterface 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 interface PinInputProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"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] = useComponentMultiStyle(\"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: onChangeProp,\n onComplete,\n items = 4,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n readOnly,\n \"aria-readonly\": _ariaReadonly,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const uuid = useId()\n\n id ??= uuid\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) => onChangeProp?.(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 onChange = useCallback(\n (index: number) =>\n ({ 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 descendants,\n getNextValue,\n onComplete,\n setValue,\n setValues,\n type,\n values,\n ],\n )\n\n const onKeyDown = useCallback(\n (index: number) =>\n ({ key, target }: 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 [descendants, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getInputProps = useCallback(\n ({\n index,\n ...props\n }: PinInputFieldProps & {\n index: number\n ref?: Ref<HTMLInputElement>\n }): PinInputFieldProps => ({\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n ...formControlProps,\n ...filterUndefined(props),\n id: `${id}-${index}`,\n value: values[index] || \"\",\n onChange: handlerAll(props.onChange, onChange(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n onFocus: handlerAll(props.onFocus, onFocus(index)),\n onBlur: handlerAll(props.onBlur, onBlur),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n }),\n [\n type,\n mask,\n formControlProps,\n id,\n values,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n otp,\n focusedIndex,\n readOnly,\n placeholder,\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 __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n </PinInputProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nPinInput.displayName = \"PinInput\"\nPinInput.__ui__ = \"PinInput\"\n\nexport interface PinInputFieldProps\n extends HTMLUIProps<\"input\">,\n 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\nPinInputField.displayName = \"PinInputField\"\nPinInputField.__ui__ = \"PinInputField\"\n"],"mappings":"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","names":["values","value","nextValue","index","props"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/pin-input.tsx"],"sourcesContent":["export { PinInput, PinInputField } from \"./pin-input\"\nexport type { PinInputFieldProps, PinInputProps } from \"./pin-input\"\n","import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, KeyboardEvent, Ref } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\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 filterUndefined,\n getValidChildren,\n handlerAll,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\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\ninterface PinInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getInputProps: (\n props: {\n index: number\n ref?: Ref<HTMLInputElement>\n } & PinInputFieldProps,\n ) => PinInputFieldProps\n}\n\nconst [PinInputProvider, usePinInputContext] = createContext<PinInputContext>({\n name: \"PinInputContext\",\n errorMessage: `PinInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<PinInput />\"`,\n})\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n createDescendant<HTMLInputElement>()\n\ninterface 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 * If `true`, the pin input receives focus on mount.\n *\n * @default false\n */\n autoFocus?: boolean\n /**\n * The initial value of the pin input.\n */\n defaultValue?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The number of inputs to display.\n *\n * @default 4\n */\n items?: number\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 input's value will be masked just like `type=password`.\n */\n mask?: boolean\n /**\n * If `true`, the pin input component signals to its fields that they should.\n */\n otp?: boolean\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 * 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\nexport interface PinInputProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"mask\" | \"onChange\">,\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 ({ errorBorderColor, focusBorderColor, ...props }, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"PinInput\", {\n errorBorderColor,\n focusBorderColor,\n ...props,\n })\n let {\n id,\n type = \"number\",\n className,\n autoFocus,\n children,\n defaultValue,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"○\",\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n readOnly,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const uuid = useId()\n\n id ??= uuid\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 defaultValue: toArray(defaultValue) || [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(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 = 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 !== \"\" && nextValues.length === descendants.count()\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.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ 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 descendants,\n getNextValue,\n onComplete,\n setValue,\n setValues,\n type,\n values,\n ],\n )\n\n const onKeyDown = useCallback(\n (index: number) =>\n ({ key, target }: 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 [descendants, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getInputProps = useCallback(\n ({\n index,\n ...props\n }: {\n index: number\n ref?: Ref<HTMLInputElement>\n } & PinInputFieldProps): PinInputFieldProps => ({\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n ...formControlProps,\n ...filterUndefined(props),\n id: `${id}-${index}`,\n autoComplete: otp ? \"one-time-code\" : \"off\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n value: values[index] || \"\",\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n type,\n mask,\n formControlProps,\n id,\n values,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n otp,\n focusedIndex,\n readOnly,\n placeholder,\n ],\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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={{ styles, getInputProps }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pin-input\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n </PinInputProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nPinInput.displayName = \"PinInput\"\nPinInput.__ui__ = \"PinInput\"\n\nexport interface PinInputFieldProps\n extends HTMLUIProps<\"input\">,\n FormControlOptions {}\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = 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\nPinInputField.displayName = \"PinInputField\"\nPinInputField.__ui__ = \"PinInputField\"\n"],"mappings":"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","names":["values","value","nextValue","index","props"]}
package/dist/index.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  PinInput,
4
4
  PinInputField
5
- } from "./chunk-ZEJ5NH2C.mjs";
5
+ } from "./chunk-EDMXO275.mjs";
6
6
  export {
7
7
  PinInput,
8
8
  PinInputField
package/dist/pin-input.d.mts CHANGED
@@ -15,63 +15,63 @@ interface PinInputOptions {
15
15
  */
16
16
  type?: "alphanumeric" | "number";
17
17
  /**
18
- * The placeholder for the pin input.
18
+ * If `true`, the pin input receives focus on mount.
19
19
  *
20
- * @default '○'
21
- */
22
- placeholder?: string;
23
- /**
24
- * The value of the pin input.
20
+ * @default false
25
21
  */
26
- value?: string;
22
+ autoFocus?: boolean;
27
23
  /**
28
24
  * The initial value of the pin input.
29
25
  */
30
26
  defaultValue?: string;
31
27
  /**
32
- * If `true`, the pin input receives focus on mount.
28
+ * The border color when the input is invalid.
29
+ */
30
+ errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
31
+ /**
32
+ * The border color when the input is focused.
33
+ */
34
+ focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
35
+ /**
36
+ * The number of inputs to display.
33
37
  *
34
- * @default false
38
+ * @default 4
35
39
  */
36
- autoFocus?: boolean;
40
+ items?: number;
37
41
  /**
38
42
  * If `true`, focus will move automatically to the next input once filled.
39
43
  *
40
44
  * @default true
41
45
  */
42
46
  manageFocus?: boolean;
43
- /**
44
- * If `true`, the pin input component signals to its fields that they should.
45
- */
46
- otp?: boolean;
47
47
  /**
48
48
  * If `true`, the input's value will be masked just like `type=password`.
49
49
  */
50
50
  mask?: boolean;
51
51
  /**
52
- * Function called on input change.
52
+ * If `true`, the pin input component signals to its fields that they should.
53
53
  */
54
- onChange?: (value: string) => void;
54
+ otp?: boolean;
55
55
  /**
56
- * Function called when all inputs have valid values.
56
+ * The placeholder for the pin input.
57
+ *
58
+ * @default '○'
57
59
  */
58
- onComplete?: (value: string) => void;
60
+ placeholder?: string;
59
61
  /**
60
- * The number of inputs to display.
61
- *
62
- * @default 4
62
+ * The value of the pin input.
63
63
  */
64
- items?: number;
64
+ value?: string;
65
65
  /**
66
- * The border color when the input is focused.
66
+ * Function called on input change.
67
67
  */
68
- focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
68
+ onChange?: (value: string) => void;
69
69
  /**
70
- * The border color when the input is invalid.
70
+ * Function called when all inputs have valid values.
71
71
  */
72
- errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
72
+ onComplete?: (value: string) => void;
73
73
  }
74
- interface PinInputProps extends Omit<HTMLUIProps, "defaultValue" | "onChange" | "mask">, ThemeProps<"PinInput">, FormControlOptions, PinInputOptions {
74
+ interface PinInputProps extends Omit<HTMLUIProps, "defaultValue" | "mask" | "onChange">, ThemeProps<"PinInput">, FormControlOptions, PinInputOptions {
75
75
  }
76
76
  /**
77
77
  * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.
package/dist/pin-input.d.ts CHANGED
@@ -15,63 +15,63 @@ interface PinInputOptions {
15
15
  */
16
16
  type?: "alphanumeric" | "number";
17
17
  /**
18
- * The placeholder for the pin input.
18
+ * If `true`, the pin input receives focus on mount.
19
19
  *
20
- * @default '○'
21
- */
22
- placeholder?: string;
23
- /**
24
- * The value of the pin input.
20
+ * @default false
25
21
  */
26
- value?: string;
22
+ autoFocus?: boolean;
27
23
  /**
28
24
  * The initial value of the pin input.
29
25
  */
30
26
  defaultValue?: string;
31
27
  /**
32
- * If `true`, the pin input receives focus on mount.
28
+ * The border color when the input is invalid.
29
+ */
30
+ errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
31
+ /**
32
+ * The border color when the input is focused.
33
+ */
34
+ focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
35
+ /**
36
+ * The number of inputs to display.
33
37
  *
34
- * @default false
38
+ * @default 4
35
39
  */
36
- autoFocus?: boolean;
40
+ items?: number;
37
41
  /**
38
42
  * If `true`, focus will move automatically to the next input once filled.
39
43
  *
40
44
  * @default true
41
45
  */
42
46
  manageFocus?: boolean;
43
- /**
44
- * If `true`, the pin input component signals to its fields that they should.
45
- */
46
- otp?: boolean;
47
47
  /**
48
48
  * If `true`, the input's value will be masked just like `type=password`.
49
49
  */
50
50
  mask?: boolean;
51
51
  /**
52
- * Function called on input change.
52
+ * If `true`, the pin input component signals to its fields that they should.
53
53
  */
54
- onChange?: (value: string) => void;
54
+ otp?: boolean;
55
55
  /**
56
- * Function called when all inputs have valid values.
56
+ * The placeholder for the pin input.
57
+ *
58
+ * @default '○'
57
59
  */
58
- onComplete?: (value: string) => void;
60
+ placeholder?: string;
59
61
  /**
60
- * The number of inputs to display.
61
- *
62
- * @default 4
62
+ * The value of the pin input.
63
63
  */
64
- items?: number;
64
+ value?: string;
65
65
  /**
66
- * The border color when the input is focused.
66
+ * Function called on input change.
67
67
  */
68
- focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
68
+ onChange?: (value: string) => void;
69
69
  /**
70
- * The border color when the input is invalid.
70
+ * Function called when all inputs have valid values.
71
71
  */
72
- errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, "colors">;
72
+ onComplete?: (value: string) => void;
73
73
  }
74
- interface PinInputProps extends Omit<HTMLUIProps, "defaultValue" | "onChange" | "mask">, ThemeProps<"PinInput">, FormControlOptions, PinInputOptions {
74
+ interface PinInputProps extends Omit<HTMLUIProps, "defaultValue" | "mask" | "onChange">, ThemeProps<"PinInput">, FormControlOptions, PinInputOptions {
75
75
  }
76
76
  /**
77
77
  * `PinInput` is a component used to capture pin codes or OTP (One-Time Password) inputs.
package/dist/pin-input.js CHANGED
@@ -40,37 +40,37 @@ var validate = (value, type) => {
40
40
  return regex.test(value);
41
41
  };
42
42
  var [PinInputProvider, usePinInputContext] = (0, import_utils.createContext)({
43
- strict: false,
44
- name: "PinInputContext"
43
+ name: "PinInputContext",
44
+ errorMessage: `PinInputContext returned is 'undefined'. Seems you forgot to wrap the components in "<PinInput />"`
45
45
  });
46
- var { DescendantsContextProvider, useDescendants, useDescendant } = (0, import_use_descendant.createDescendant)();
46
+ var { DescendantsContextProvider, useDescendant, useDescendants } = (0, import_use_descendant.createDescendant)();
47
47
  var PinInput = (0, import_core.forwardRef)(
48
- ({ focusBorderColor, errorBorderColor, ...props }, ref) => {
48
+ ({ errorBorderColor, focusBorderColor, ...props }, ref) => {
49
49
  const [styles, mergedProps] = (0, import_core.useComponentMultiStyle)("PinInput", {
50
- focusBorderColor,
51
50
  errorBorderColor,
51
+ focusBorderColor,
52
52
  ...props
53
53
  });
54
54
  let {
55
55
  id,
56
- className,
57
56
  type = "number",
58
- placeholder = "\u25CB",
59
- value,
60
- defaultValue,
57
+ className,
61
58
  autoFocus,
59
+ children,
60
+ defaultValue,
61
+ items = 4,
62
62
  manageFocus = true,
63
- otp = false,
64
63
  mask,
64
+ otp = false,
65
+ placeholder = "\u25CB",
66
+ value,
65
67
  onChange: onChangeProp,
66
68
  onComplete,
67
- items = 4,
68
- children,
69
69
  ...rest
70
70
  } = (0, import_form_control.useFormControlProps)((0, import_core.omitThemeProps)(mergedProps));
71
71
  const {
72
- readOnly,
73
72
  "aria-readonly": _ariaReadonly,
73
+ readOnly,
74
74
  ...formControlProps
75
75
  } = (0, import_utils.pickObject)(rest, import_form_control.formControlProperties);
76
76
  const uuid = (0, import_react.useId)();
@@ -85,8 +85,8 @@ var PinInput = (0, import_core.forwardRef)(
85
85
  requestAnimationFrame(() => firstValue.node.focus());
86
86
  }, [autoFocus, descendants]);
87
87
  const [values, setValues] = (0, import_use_controllable_state.useControllableState)({
88
- value: toArray(value),
89
88
  defaultValue: toArray(defaultValue) || [],
89
+ value: toArray(value),
90
90
  onChange: (values2) => onChangeProp == null ? void 0 : onChangeProp(values2.join(""))
91
91
  });
92
92
  const focusNext = (0, import_react.useCallback)(
@@ -105,7 +105,7 @@ var PinInput = (0, import_core.forwardRef)(
105
105
  nextValues[index] = value2;
106
106
  setValues(nextValues);
107
107
  nextValues = nextValues.filter(Boolean);
108
- const isComplete = value2 !== "" && nextValues.length === descendants.count() && nextValues.every((value3) => value3 != null && value3 !== "");
108
+ const isComplete = value2 !== "" && nextValues.length === descendants.count();
109
109
  if (isComplete) {
110
110
  onComplete == null ? void 0 : onComplete(nextValues.join(""));
111
111
  (_a = descendants.value(index)) == null ? void 0 : _a.node.blur();
@@ -119,9 +119,9 @@ var PinInput = (0, import_core.forwardRef)(
119
119
  (value2, eventValue) => {
120
120
  let nextValue = eventValue;
121
121
  if (!(value2 == null ? void 0 : value2.length)) return nextValue;
122
- if (value2[0] === eventValue.charAt(0)) {
122
+ if (value2.startsWith(eventValue.charAt(0))) {
123
123
  nextValue = eventValue.charAt(1);
124
- } else if (value2[0] === eventValue.charAt(1)) {
124
+ } else if (value2.startsWith(eventValue.charAt(1))) {
125
125
  nextValue = eventValue.charAt(0);
126
126
  }
127
127
  return nextValue;
@@ -163,13 +163,12 @@ var PinInput = (0, import_core.forwardRef)(
163
163
  );
164
164
  const onKeyDown = (0, import_react.useCallback)(
165
165
  (index) => ({ key, target }) => {
166
- var _a;
167
166
  if (key !== "Backspace" || !manageFocus) return;
168
167
  if (target.value === "") {
169
168
  const prevInput = descendants.prevValue(index, void 0, false);
170
169
  if (!prevInput) return;
171
170
  setValue("", index - 1, false);
172
- (_a = prevInput.node) == null ? void 0 : _a.focus();
171
+ prevInput.node.focus();
173
172
  setMoveFocus(true);
174
173
  } else {
175
174
  setMoveFocus(false);
@@ -187,18 +186,18 @@ var PinInput = (0, import_core.forwardRef)(
187
186
  index,
188
187
  ...props2
189
188
  }) => ({
190
- inputMode: type === "number" ? "numeric" : "text",
191
189
  type: mask ? "password" : type === "number" ? "tel" : "text",
190
+ inputMode: type === "number" ? "numeric" : "text",
192
191
  ...formControlProps,
193
192
  ...(0, import_utils.filterUndefined)(props2),
194
193
  id: `${id}-${index}`,
194
+ autoComplete: otp ? "one-time-code" : "off",
195
+ placeholder: focusedIndex === index && !readOnly && !props2.readOnly ? "" : placeholder,
195
196
  value: values[index] || "",
197
+ onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
196
198
  onChange: (0, import_utils.handlerAll)(props2.onChange, onChange(index)),
197
- onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown(index)),
198
199
  onFocus: (0, import_utils.handlerAll)(props2.onFocus, onFocus(index)),
199
- onBlur: (0, import_utils.handlerAll)(props2.onBlur, onBlur),
200
- autoComplete: otp ? "one-time-code" : "off",
201
- placeholder: focusedIndex === index && !readOnly && !props2.readOnly ? "" : placeholder
200
+ onKeyDown: (0, import_utils.handlerAll)(props2.onKeyDown, onKeyDown(index))
202
201
  }),
203
202
  [
204
203
  type,
@@ -217,8 +216,8 @@ var PinInput = (0, import_core.forwardRef)(
217
216
  ]
218
217
  );
219
218
  const css = {
220
- display: "flex",
221
219
  alignItems: "center",
220
+ display: "flex",
222
221
  ...styles.container
223
222
  };
224
223
  let cloneChildren = (0, import_utils.getValidChildren)(children);
@@ -226,7 +225,7 @@ var PinInput = (0, import_core.forwardRef)(
226
225
  for (let i = 0; i < items; i++) {
227
226
  cloneChildren.push(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputField, {}, i));
228
227
  }
229
- 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)(
228
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DescendantsContextProvider, { value: descendants, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PinInputProvider, { value: { styles, getInputProps }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
230
229
  import_core.ui.div,
231
230
  {
232
231
  ref,
@@ -242,7 +241,7 @@ PinInput.displayName = "PinInput";
242
241
  PinInput.__ui__ = "PinInput";
243
242
  var PinInputField = (0, import_core.forwardRef)(
244
243
  ({ className, ...rest }, ref) => {
245
- const { getInputProps, styles } = usePinInputContext();
244
+ const { styles, getInputProps } = usePinInputContext();
246
245
  const { index, register } = useDescendant();
247
246
  rest = (0, import_form_control.useFormControlProps)(rest);
248
247
  const css = { ...styles.field };
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 useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\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\ninterface PinInputContext {\n getInputProps: (\n props: PinInputFieldProps & {\n index: number\n ref?: Ref<HTMLInputElement>\n },\n ) => PinInputFieldProps\n styles: { [key: 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\ninterface 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 interface PinInputProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"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] = useComponentMultiStyle(\"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: onChangeProp,\n onComplete,\n items = 4,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n readOnly,\n \"aria-readonly\": _ariaReadonly,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const uuid = useId()\n\n id ??= uuid\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) => onChangeProp?.(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 onChange = useCallback(\n (index: number) =>\n ({ 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 descendants,\n getNextValue,\n onComplete,\n setValue,\n setValues,\n type,\n values,\n ],\n )\n\n const onKeyDown = useCallback(\n (index: number) =>\n ({ key, target }: 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 [descendants, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getInputProps = useCallback(\n ({\n index,\n ...props\n }: PinInputFieldProps & {\n index: number\n ref?: Ref<HTMLInputElement>\n }): PinInputFieldProps => ({\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n ...formControlProps,\n ...filterUndefined(props),\n id: `${id}-${index}`,\n value: values[index] || \"\",\n onChange: handlerAll(props.onChange, onChange(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n onFocus: handlerAll(props.onFocus, onFocus(index)),\n onBlur: handlerAll(props.onBlur, onBlur),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n }),\n [\n type,\n mask,\n formControlProps,\n id,\n values,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n otp,\n focusedIndex,\n readOnly,\n placeholder,\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 __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n </PinInputProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nPinInput.displayName = \"PinInput\"\nPinInput.__ui__ = \"PinInput\"\n\nexport interface PinInputFieldProps\n extends HTMLUIProps<\"input\">,\n 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\nPinInputField.displayName = \"PinInputField\"\nPinInputField.__ui__ = \"PinInputField\"\n"],"mappings":"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","names":["values","value","nextValue","index","props"]}
1
+ {"version":3,"sources":["../src/pin-input.tsx"],"sourcesContent":["import type {\n ColorModeToken,\n CSS,\n CSSUIObject,\n HTMLUIProps,\n ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport type { ChangeEvent, KeyboardEvent, Ref } from \"react\"\nimport {\n forwardRef,\n omitThemeProps,\n ui,\n useComponentMultiStyle,\n} from \"@yamada-ui/core\"\nimport {\n formControlProperties,\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 filterUndefined,\n getValidChildren,\n handlerAll,\n mergeRefs,\n pickObject,\n} from \"@yamada-ui/utils\"\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\ninterface PinInputContext {\n styles: { [key: string]: CSSUIObject | undefined }\n getInputProps: (\n props: {\n index: number\n ref?: Ref<HTMLInputElement>\n } & PinInputFieldProps,\n ) => PinInputFieldProps\n}\n\nconst [PinInputProvider, usePinInputContext] = createContext<PinInputContext>({\n name: \"PinInputContext\",\n errorMessage: `PinInputContext returned is 'undefined'. Seems you forgot to wrap the components in \"<PinInput />\"`,\n})\n\nconst { DescendantsContextProvider, useDescendant, useDescendants } =\n createDescendant<HTMLInputElement>()\n\ninterface 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 * If `true`, the pin input receives focus on mount.\n *\n * @default false\n */\n autoFocus?: boolean\n /**\n * The initial value of the pin input.\n */\n defaultValue?: string\n /**\n * The border color when the input is invalid.\n */\n errorBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The border color when the input is focused.\n */\n focusBorderColor?: ColorModeToken<CSS.Property.BorderColor, \"colors\">\n /**\n * The number of inputs to display.\n *\n * @default 4\n */\n items?: number\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 input's value will be masked just like `type=password`.\n */\n mask?: boolean\n /**\n * If `true`, the pin input component signals to its fields that they should.\n */\n otp?: boolean\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 * 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\nexport interface PinInputProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"mask\" | \"onChange\">,\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 ({ errorBorderColor, focusBorderColor, ...props }, ref) => {\n const [styles, mergedProps] = useComponentMultiStyle(\"PinInput\", {\n errorBorderColor,\n focusBorderColor,\n ...props,\n })\n let {\n id,\n type = \"number\",\n className,\n autoFocus,\n children,\n defaultValue,\n items = 4,\n manageFocus = true,\n mask,\n otp = false,\n placeholder = \"○\",\n value,\n onChange: onChangeProp,\n onComplete,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n \"aria-readonly\": _ariaReadonly,\n readOnly,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const uuid = useId()\n\n id ??= uuid\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 defaultValue: toArray(defaultValue) || [],\n value: toArray(value),\n onChange: (values) => onChangeProp?.(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 = 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 !== \"\" && nextValues.length === descendants.count()\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.startsWith(eventValue.charAt(0))) {\n nextValue = eventValue.charAt(1)\n } else if (value.startsWith(eventValue.charAt(1))) {\n nextValue = eventValue.charAt(0)\n }\n\n return nextValue\n },\n [],\n )\n\n const onChange = useCallback(\n (index: number) =>\n ({ 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 descendants,\n getNextValue,\n onComplete,\n setValue,\n setValues,\n type,\n values,\n ],\n )\n\n const onKeyDown = useCallback(\n (index: number) =>\n ({ key, target }: 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 [descendants, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getInputProps = useCallback(\n ({\n index,\n ...props\n }: {\n index: number\n ref?: Ref<HTMLInputElement>\n } & PinInputFieldProps): PinInputFieldProps => ({\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n ...formControlProps,\n ...filterUndefined(props),\n id: `${id}-${index}`,\n autoComplete: otp ? \"one-time-code\" : \"off\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n value: values[index] || \"\",\n onBlur: handlerAll(props.onBlur, onBlur),\n onChange: handlerAll(props.onChange, onChange(index)),\n onFocus: handlerAll(props.onFocus, onFocus(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n }),\n [\n type,\n mask,\n formControlProps,\n id,\n values,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n otp,\n focusedIndex,\n readOnly,\n placeholder,\n ],\n )\n\n const css: CSSUIObject = {\n alignItems: \"center\",\n display: \"flex\",\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={{ styles, getInputProps }}>\n <ui.div\n ref={ref}\n className={cx(\"ui-pin-input\", className)}\n __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n </PinInputProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nPinInput.displayName = \"PinInput\"\nPinInput.__ui__ = \"PinInput\"\n\nexport interface PinInputFieldProps\n extends HTMLUIProps<\"input\">,\n FormControlOptions {}\n\nexport const PinInputField = forwardRef<PinInputFieldProps, \"input\">(\n ({ className, ...rest }, ref) => {\n const { styles, getInputProps } = 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\nPinInputField.displayName = \"PinInputField\"\nPinInputField.__ui__ = \"PinInputField\"\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AASA,kBAKO;AACP,0BAGO;AACP,oCAAqC;AACrC,4BAAiC;AACjC,mBAQO;AACP,mBAAwD;AAoV7B;AAlV3B,IAAM,UAAU,CAAC,UAAmB,+BAAO,MAAM;AAEjD,IAAM,WAAW,CAAC,OAAe,SAAgC;AAC/D,QAAM,gBAAgB;AACtB,QAAM,sBAAsB;AAE5B,QAAM,QAAQ,SAAS,iBAAiB,sBAAsB;AAE9D,SAAO,MAAM,KAAK,KAAK;AACzB;AAYA,IAAM,CAAC,kBAAkB,kBAAkB,QAAI,4BAA+B;AAAA,EAC5E,MAAM;AAAA,EACN,cAAc;AAChB,CAAC;AAED,IAAM,EAAE,4BAA4B,eAAe,eAAe,QAChE,wCAAmC;AAmF9B,IAAM,eAAW;AAAA,EACtB,CAAC,EAAE,kBAAkB,kBAAkB,GAAG,MAAM,GAAG,QAAQ;AACzD,UAAM,CAAC,QAAQ,WAAW,QAAI,oCAAuB,YAAY;AAAA,MAC/D;AAAA,MACA;AAAA,MACA,GAAG;AAAA,IACL,CAAC;AACD,QAAI;AAAA,MACF;AAAA,MACA,OAAO;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,QAAQ;AAAA,MACR,cAAc;AAAA,MACd;AAAA,MACA,MAAM;AAAA,MACN,cAAc;AAAA,MACd;AAAA,MACA,UAAU;AAAA,MACV;AAAA,MACA,GAAG;AAAA,IACL,QAAI,6CAAoB,4BAAe,WAAW,CAAC;AACnD,UAAM;AAAA,MACJ,iBAAiB;AAAA,MACjB;AAAA,MACA,GAAG;AAAA,IACL,QAAI,yBAAW,MAAM,yCAAqB;AAC1C,UAAM,WAAO,oBAAM;AAEnB,2BAAO;AAEP,UAAM,cAAc,eAAe;AAEnC,UAAM,CAAC,WAAW,YAAY,QAAI,uBAAkB,IAAI;AACxD,UAAM,CAAC,cAAc,eAAe,QAAI,uBAAiB,EAAE;AAE3D,gCAAU,MAAM;AACd,UAAI,CAAC,UAAW;AAEhB,YAAM,aAAa,YAAY,WAAW;AAE1C,UAAI,CAAC,WAAY;AAEjB,4BAAsB,MAAM,WAAW,KAAK,MAAM,CAAC;AAAA,IACrD,GAAG,CAAC,WAAW,WAAW,CAAC;AAE3B,UAAM,CAAC,QAAQ,SAAS,QAAI,oDAA+B;AAAA,MACzD,cAAc,QAAQ,YAAY,KAAK,CAAC;AAAA,MACxC,OAAO,QAAQ,KAAK;AAAA,MACpB,UAAU,CAACA,YAAW,6CAAeA,QAAO,KAAK,EAAE;AAAA,IACrD,CAAC;AAED,UAAM,gBAAY;AAAA,MAChB,CAAC,UAAkB;AACjB,YAAI,CAAC,aAAa,CAAC,YAAa;AAEhC,cAAM,OAAO,YAAY,UAAU,OAAO,QAAW,KAAK;AAE1D,YAAI,CAAC,KAAM;AAEX,8BAAsB,MAAM,KAAK,KAAK,MAAM,CAAC;AAAA,MAC/C;AAAA,MACA,CAAC,aAAa,WAAW,WAAW;AAAA,IACtC;AAEA,UAAM,eAAW;AAAA,MACf,CAACC,QAAe,OAAe,UAAU,SAAS;AAlNxD;AAmNQ,YAAI,aAAa,CAAC,GAAG,MAAM;AAE3B,mBAAW,KAAK,IAAIA;AAEpB,kBAAU,UAAU;AAEpB,qBAAa,WAAW,OAAO,OAAO;AAEtC,cAAM,aACJA,WAAU,MAAM,WAAW,WAAW,YAAY,MAAM;AAE1D,YAAI,YAAY;AACd,mDAAa,WAAW,KAAK,EAAE;AAC/B,4BAAY,MAAM,KAAK,MAAvB,mBAA0B,KAAK;AAAA,QACjC,WAAW,SAAS;AAClB,oBAAU,KAAK;AAAA,QACjB;AAAA,MACF;AAAA,MACA,CAAC,QAAQ,WAAW,aAAa,YAAY,SAAS;AAAA,IACxD;AAEA,UAAM,mBAAe;AAAA,MACnB,CAACA,QAA2B,eAAuB;AACjD,YAAI,YAAY;AAEhB,YAAI,EAACA,UAAA,gBAAAA,OAAO,QAAQ,QAAO;AAE3B,YAAIA,OAAM,WAAW,WAAW,OAAO,CAAC,CAAC,GAAG;AAC1C,sBAAY,WAAW,OAAO,CAAC;AAAA,QACjC,WAAWA,OAAM,WAAW,WAAW,OAAO,CAAC,CAAC,GAAG;AACjD,sBAAY,WAAW,OAAO,CAAC;AAAA,QACjC;AAEA,eAAO;AAAA,MACT;AAAA,MACA,CAAC;AAAA,IACH;AAEA,UAAM,eAAW;AAAA,MACf,CAAC,UACC,CAAC,EAAE,OAAO,MAAqC;AA3PvD;AA4PU,cAAM,aAAa,OAAO;AAC1B,cAAM,eAAe,OAAO,KAAK;AACjC,cAAM,YAAY,aAAa,cAAc,UAAU;AAEvD,YAAI,cAAc,IAAI;AACpB,mBAAS,IAAI,KAAK;AAElB;AAAA,QACF;AAEA,YAAI,WAAW,SAAS,GAAG;AACzB,cAAI,CAAC,SAAS,YAAY,IAAI,EAAG;AAEjC,gBAAMC,aAAY,WACf,MAAM,EAAE,EACR,OAAO,CAAC,GAAGC,WAAUA,SAAQ,YAAY,MAAM,CAAC;AAEnD,oBAAUD,UAAS;AAEnB,cAAIA,WAAU,WAAW,YAAY,MAAM,GAAG;AAC5C,qDAAaA,WAAU,KAAK,EAAE;AAC9B,8BAAY,MAAM,KAAK,MAAvB,mBAA0B,KAAK;AAAA,UACjC;AAAA,QACF,OAAO;AACL,cAAI,SAAS,WAAW,IAAI,EAAG,UAAS,WAAW,KAAK;AAExD,uBAAa,IAAI;AAAA,QACnB;AAAA,MACF;AAAA,MACF;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,gBAAY;AAAA,MAChB,CAAC,UACC,CAAC,EAAE,KAAK,OAAO,MAAuC;AACpD,YAAI,QAAQ,eAAe,CAAC,YAAa;AAEzC,YAAK,OAA4B,UAAU,IAAI;AAC7C,gBAAM,YAAY,YAAY,UAAU,OAAO,QAAW,KAAK;AAE/D,cAAI,CAAC,UAAW;AAEhB,mBAAS,IAAI,QAAQ,GAAG,KAAK;AAC7B,oBAAU,KAAK,MAAM;AACrB,uBAAa,IAAI;AAAA,QACnB,OAAO;AACL,uBAAa,KAAK;AAAA,QACpB;AAAA,MACF;AAAA,MACF,CAAC,aAAa,aAAa,QAAQ;AAAA,IACrC;AAEA,UAAM,cAAU;AAAA,MACd,CAAC,UAAkB,MAAM,gBAAgB,KAAK;AAAA,MAC9C,CAAC;AAAA,IACH;AAEA,UAAM,aAAS,0BAAY,MAAM,gBAAgB,EAAE,GAAG,CAAC,CAAC;AAExD,UAAM,oBAAgB;AAAA,MACpB,CAAC;AAAA,QACC;AAAA,QACA,GAAGE;AAAA,MACL,OAGgD;AAAA,QAC9C,MAAM,OAAO,aAAa,SAAS,WAAW,QAAQ;AAAA,QACtD,WAAW,SAAS,WAAW,YAAY;AAAA,QAC3C,GAAG;AAAA,QACH,OAAG,8BAAgBA,MAAK;AAAA,QACxB,IAAI,GAAG,EAAE,IAAI,KAAK;AAAA,QAClB,cAAc,MAAM,kBAAkB;AAAA,QACtC,aACE,iBAAiB,SAAS,CAAC,YAAY,CAACA,OAAM,WAC1C,KACA;AAAA,QACN,OAAO,OAAO,KAAK,KAAK;AAAA,QACxB,YAAQ,yBAAWA,OAAM,QAAQ,MAAM;AAAA,QACvC,cAAU,yBAAWA,OAAM,UAAU,SAAS,KAAK,CAAC;AAAA,QACpD,aAAS,yBAAWA,OAAM,SAAS,QAAQ,KAAK,CAAC;AAAA,QACjD,eAAW,yBAAWA,OAAM,WAAW,UAAU,KAAK,CAAC;AAAA,MACzD;AAAA,MACA;AAAA,QACE;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,IACF;AAEA,UAAM,MAAmB;AAAA,MACvB,YAAY;AAAA,MACZ,SAAS;AAAA,MACT,GAAG,OAAO;AAAA,IACZ;AAEA,QAAI,oBAAgB,+BAAiB,QAAQ;AAE7C,QAAI,CAAC,cAAc;AACjB,eAAS,IAAI,GAAG,IAAI,OAAO,KAAK;AAC9B,sBAAc,KAAK,4CAAC,mBAAmB,CAAG,CAAE;AAAA,MAC9C;AAEF,WACE,4CAAC,8BAA2B,OAAO,aACjC,sDAAC,oBAAiB,OAAO,EAAE,QAAQ,cAAc,GAC/C;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,eAAW,iBAAG,gBAAgB,SAAS;AAAA,QACvC,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH,GACF,GACF;AAAA,EAEJ;AACF;AAEA,SAAS,cAAc;AACvB,SAAS,SAAS;AAMX,IAAM,oBAAgB;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,KAAK,GAAG,QAAQ;AAC/B,UAAM,EAAE,QAAQ,cAAc,IAAI,mBAAmB;AACrD,UAAM,EAAE,OAAO,SAAS,IAAI,cAAc;AAE1C,eAAO,yCAAoB,IAAI;AAE/B,UAAM,MAAmB,EAAE,GAAG,OAAO,MAAM;AAE3C,WACE;AAAA,MAAC,eAAG;AAAA,MAAH;AAAA,QACC,eAAW,iBAAG,uBAAuB,SAAS;AAAA,QAC7C,GAAG,cAAc,EAAE,GAAG,MAAM,SAAK,wBAAU,UAAU,GAAG,GAAG,MAAM,CAAC;AAAA,QACnE,OAAO;AAAA;AAAA,IACT;AAAA,EAEJ;AACF;AAEA,cAAc,cAAc;AAC5B,cAAc,SAAS;","names":["values","value","nextValue","index","props"]}
package/dist/pin-input.mjs CHANGED
@@ -2,7 +2,7 @@
2
2
  import {
3
3
  PinInput,
4
4
  PinInputField
5
- } from "./chunk-ZEJ5NH2C.mjs";
5
+ } from "./chunk-EDMXO275.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.43-next-20241005220055",
3
+ "version": "1.0.43-next-20241008193728",
4
4
  "description": "Yamada UI pin input component",
5
5
  "keywords": [
6
6
  "yamada",
@@ -36,11 +36,11 @@
36
36
  "url": "https://github.com/yamada-ui/yamada-ui/issues"
37
37
  },
38
38
  "dependencies": {
39
- "@yamada-ui/core": "1.15.2-next-20241005220055",
40
- "@yamada-ui/form-control": "2.1.4-next-20241005220055",
41
- "@yamada-ui/use-controllable-state": "1.0.21",
42
- "@yamada-ui/use-descendant": "1.0.22",
43
- "@yamada-ui/utils": "1.5.2"
39
+ "@yamada-ui/core": "1.15.2-next-20241008193728",
40
+ "@yamada-ui/form-control": "2.1.4-next-20241008193728",
41
+ "@yamada-ui/use-controllable-state": "1.0.22-next-20241008193728",
42
+ "@yamada-ui/utils": "1.5.3-next-20241008193728",
43
+ "@yamada-ui/use-descendant": "1.0.23-next-20241008193728"
44
44
  },
45
45
  "devDependencies": {
46
46
  "clean-package": "2.2.0",
package/dist/chunk-ZEJ5NH2C.mjs.map DELETED
@@ -1 +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 useComponentMultiStyle,\n omitThemeProps,\n} from \"@yamada-ui/core\"\nimport type { FormControlOptions } from \"@yamada-ui/form-control\"\nimport {\n formControlProperties,\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\ninterface PinInputContext {\n getInputProps: (\n props: PinInputFieldProps & {\n index: number\n ref?: Ref<HTMLInputElement>\n },\n ) => PinInputFieldProps\n styles: { [key: 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\ninterface 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 interface PinInputProps\n extends Omit<HTMLUIProps, \"defaultValue\" | \"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] = useComponentMultiStyle(\"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: onChangeProp,\n onComplete,\n items = 4,\n children,\n ...rest\n } = useFormControlProps(omitThemeProps(mergedProps))\n const {\n readOnly,\n \"aria-readonly\": _ariaReadonly,\n ...formControlProps\n } = pickObject(rest, formControlProperties)\n const uuid = useId()\n\n id ??= uuid\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) => onChangeProp?.(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 onChange = useCallback(\n (index: number) =>\n ({ 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 descendants,\n getNextValue,\n onComplete,\n setValue,\n setValues,\n type,\n values,\n ],\n )\n\n const onKeyDown = useCallback(\n (index: number) =>\n ({ key, target }: 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 [descendants, manageFocus, setValue],\n )\n\n const onFocus = useCallback(\n (index: number) => () => setFocusedIndex(index),\n [],\n )\n\n const onBlur = useCallback(() => setFocusedIndex(-1), [])\n\n const getInputProps = useCallback(\n ({\n index,\n ...props\n }: PinInputFieldProps & {\n index: number\n ref?: Ref<HTMLInputElement>\n }): PinInputFieldProps => ({\n inputMode: type === \"number\" ? \"numeric\" : \"text\",\n type: mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\",\n ...formControlProps,\n ...filterUndefined(props),\n id: `${id}-${index}`,\n value: values[index] || \"\",\n onChange: handlerAll(props.onChange, onChange(index)),\n onKeyDown: handlerAll(props.onKeyDown, onKeyDown(index)),\n onFocus: handlerAll(props.onFocus, onFocus(index)),\n onBlur: handlerAll(props.onBlur, onBlur),\n autoComplete: otp ? \"one-time-code\" : \"off\",\n placeholder:\n focusedIndex === index && !readOnly && !props.readOnly\n ? \"\"\n : placeholder,\n }),\n [\n type,\n mask,\n formControlProps,\n id,\n values,\n onChange,\n onKeyDown,\n onFocus,\n onBlur,\n otp,\n focusedIndex,\n readOnly,\n placeholder,\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 __css={css}\n {...rest}\n >\n {cloneChildren}\n </ui.div>\n </PinInputProvider>\n </DescendantsContextProvider>\n )\n },\n)\n\nPinInput.displayName = \"PinInput\"\nPinInput.__ui__ = \"PinInput\"\n\nexport interface PinInputFieldProps\n extends HTMLUIProps<\"input\">,\n 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\nPinInputField.displayName = \"PinInputField\"\nPinInputField.__ui__ = \"PinInputField\"\n"],"mappings":"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","names":["values","value","nextValue","index","props"]}