@tiny-design/react 1.0.10 → 1.1.0

package/es/index.d.ts

@@ -31,6 +31,7 @@ import { DefaultForm } from "./form/index.js";
 import { Image } from "./image/image.js";
 import { DefaultInput } from "./input/index.js";
 import { InputNumber } from "./input-number/input-number.js";
+import { InputOTP } from "./input-otp/input-otp.js";
 import { InputPassword } from "./input-password/input-password.js";
 import { IntlProvider } from "./intl-provider/intl-provider.js";
 import { Keyboard } from "./keyboard/keyboard.js";
@@ -85,4 +86,4 @@ import { en_US } from "./locale/en_US.js";
 import { zh_CN } from "./locale/zh_CN.js";
 import { useLocale } from "./_utils/use-locale.js";
 import { ThemeMode, useTheme } from "./_utils/use-theme.js";
-export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/es/index.js

@@ -37,6 +37,7 @@ import DefaultForm from "./form/index.js";
 import image_default from "./image/index.js";
 import DefaultInput from "./input/index.js";
 import input_number_default from "./input-number/index.js";
+import input_otp_default from "./input-otp/index.js";
 import input_password_default from "./input-password/index.js";
 import keyboard_default from "./keyboard/index.js";
 import DefaultLayout from "./layout/index.js";
@@ -85,4 +86,4 @@ import { withLocale } from "./intl-provider/with-locale.js";
 import { withSpin } from "./with-spin/with-spin.js";
 import zh_CN from "./locale/zh_CN.js";
 import { useTheme } from "./_utils/use-theme.js";
-export { alert_default as Alert, DefaultAnchor as Anchor, aspect_ratio_default as AspectRatio, AutoComplete, DefaultAvatar as Avatar, back_top_default as BackTop, badge_default as Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, calendar_default as Calendar, DefaultCard as Card, DefaultCarousel as Carousel, cascader_default as Cascader, DefaultCheckbox as Checkbox, col_default as Col, DefaultCollapse as Collapse, color_picker_default as ColorPicker, config_provider_default as ConfigProvider, copy_to_clipboard_default as CopyToClipboard, countdown_default as Countdown, date_picker_default as DatePicker, DefaultDesc as Descriptions, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_default as Empty, flex_default as Flex, DefaultFlip as Flip, DefaultForm as Form, image_default as Image, DefaultInput as Input, input_number_default as InputNumber, input_password_default as InputPassword, intl_provider_default as IntlProvider, keyboard_default as Keyboard, DefaultLayout as Layout, link_default as Link, DefaultList as List, loader_default as Loader, loading_bar_default as LoadingBar, DefaultMenu as Menu, message_default as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notification_default as Notification, overlay_default as Overlay, pagination_default as Pagination, pop_confirm_default as PopConfirm, popover_default as Popover, Progress, DefaultRadio as Radio, rate_default as Rate, result_default as Result, row_default as Row, scroll_indicator_default as ScrollIndicator, segmented_default as Segmented, DefaultSelect$1 as Select, skeleton_default as Skeleton, slider_default as Slider, space_default as Space, DefaultSpeedDial as SpeedDial, split_default as Split, split_button_default as SplitButton, statistic_default as Statistic, DefaultSteps as Steps, sticky_default as Sticky, strength_indicator_default as StrengthIndicator, switch_default as Switch, table_default as Table, DefaultTabs as Tabs, DefaultTag as Tag, textarea_default as Textarea, time_picker_default as TimePicker, DefaultTimeline as Timeline, tooltip_default as Tooltip, transfer_default as Transfer, transition_default as Transition, tree_default as Tree, DefaultTypo as Typography, upload_default as Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { alert_default as Alert, DefaultAnchor as Anchor, aspect_ratio_default as AspectRatio, AutoComplete, DefaultAvatar as Avatar, back_top_default as BackTop, badge_default as Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, calendar_default as Calendar, DefaultCard as Card, DefaultCarousel as Carousel, cascader_default as Cascader, DefaultCheckbox as Checkbox, col_default as Col, DefaultCollapse as Collapse, color_picker_default as ColorPicker, config_provider_default as ConfigProvider, copy_to_clipboard_default as CopyToClipboard, countdown_default as Countdown, date_picker_default as DatePicker, DefaultDesc as Descriptions, divider_default as Divider, drawer_default as Drawer, dropdown_default as Dropdown, empty_default as Empty, flex_default as Flex, DefaultFlip as Flip, DefaultForm as Form, image_default as Image, DefaultInput as Input, input_number_default as InputNumber, input_otp_default as InputOTP, input_password_default as InputPassword, intl_provider_default as IntlProvider, keyboard_default as Keyboard, DefaultLayout as Layout, link_default as Link, DefaultList as List, loader_default as Loader, loading_bar_default as LoadingBar, DefaultMenu as Menu, message_default as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notification_default as Notification, overlay_default as Overlay, pagination_default as Pagination, pop_confirm_default as PopConfirm, popover_default as Popover, Progress, DefaultRadio as Radio, rate_default as Rate, result_default as Result, row_default as Row, scroll_indicator_default as ScrollIndicator, segmented_default as Segmented, DefaultSelect$1 as Select, skeleton_default as Skeleton, slider_default as Slider, space_default as Space, DefaultSpeedDial as SpeedDial, split_default as Split, split_button_default as SplitButton, statistic_default as Statistic, DefaultSteps as Steps, sticky_default as Sticky, strength_indicator_default as StrengthIndicator, switch_default as Switch, table_default as Table, DefaultTabs as Tabs, DefaultTag as Tag, textarea_default as Textarea, time_picker_default as TimePicker, DefaultTimeline as Timeline, tooltip_default as Tooltip, transfer_default as Transfer, transition_default as Transition, tree_default as Tree, DefaultTypo as Typography, upload_default as Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/es/input/input-group-addon.js

@@ -14,11 +14,15 @@ const InputGroupAddon = (props) => {
 		className: cls,
 		style,
 		children: React.Children.map(children, (child) => {
-			const childProps = {
-				disabled,
-				size: inputSize
-			};
-			return React.cloneElement(child, childProps);
+			const displayName = child.type?.displayName;
+			if (displayName === "Input" || displayName === "Button" || displayName === "Select") {
+				const childProps = {
+					disabled,
+					size: inputSize
+				};
+				return React.cloneElement(child, childProps);
+			}
+			return child;
 		})
 	});
 	return /* @__PURE__ */ jsx("div", {

package/es/input/input-group-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-addon.js","names":[],"sources":["../../src/input/input-group-addon.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputGroupAddonProps, InputProps } from './types';\nimport { SizeType } from '../_utils/props';\n\nconst InputGroupAddon = (props: InputGroupAddonProps): React.ReactElement => {\n  const {\n    disabled = false,\n    size = 'md',\n    noBorder,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('input-group-addon', configContext.prefixCls, customisedCls);\n  const inputSize = props.size || configContext.componentSize || size;\n  const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n    [`${prefixCls}_no-border`]: noBorder,\n  });\n\n  if (React.isValidElement(children)) {\n    return (\n      <div className={cls} style={style}>\n        {React.Children.map(children, (child: React.ReactElement) => {\n          const childProps: Partial<InputProps> = {\n            disabled,\n            size: inputSize as SizeType,\n          };\n          return React.cloneElement(child, childProps);\n        })}\n      </div>\n    );\n  }\n  return (\n    <div {...otherProps} className={cls} style={style}>\n      {children}\n    </div>\n  );\n};\n\nInputGroupAddon.displayName = 'InputGroupAddon';\n\nexport default InputGroupAddon;\n"],"mappings":";;;;;;AAOA,MAAM,mBAAmB,UAAoD;CAC3E,MAAM,EACJ,WAAW,OACX,OAAO,MACP,UACA,WACA,OACA,UACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,gBAAgB,WAAW,cAAc;CAC/C,MAAM,YAAY,aAAa,qBAAqB,cAAc,WAAW,cAAc;CAC3F,MAAM,YAAY,MAAM,QAAQ,cAAc,iBAAiB;CAC/D,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,UAAU,GAAG,aAAa,GACvE,GAAG,UAAU,cAAc,UAC7B,CAAC;AAEF,KAAI,MAAM,eAAe,SAAS,CAChC,QACE,oBAAC,OAAD;EAAK,WAAW;EAAY;YACzB,MAAM,SAAS,IAAI,WAAW,UAA8B;GAC3D,MAAM,aAAkC;IACtC;IACA,MAAM;IACP;AACD,UAAO,MAAM,aAAa,OAAO,WAAW;IAC5C;EACE,CAAA;AAGV,QACE,oBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAY;EACzC;EACG,CAAA;;AAIV,gBAAgB,cAAc"}
+{"version":3,"file":"input-group-addon.js","names":[],"sources":["../../src/input/input-group-addon.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputGroupAddonProps, InputProps } from './types';\nimport { SizeType } from '../_utils/props';\n\nconst InputGroupAddon = (props: InputGroupAddonProps): React.ReactElement => {\n  const {\n    disabled = false,\n    size = 'md',\n    noBorder,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('input-group-addon', configContext.prefixCls, customisedCls);\n  const inputSize = props.size || configContext.componentSize || size;\n  const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n    [`${prefixCls}_no-border`]: noBorder,\n  });\n\n  if (React.isValidElement(children)) {\n    return (\n      <div className={cls} style={style}>\n        {React.Children.map(children, (child: React.ReactElement) => {\n          const displayName = (child.type as any)?.displayName;\n          if (displayName === 'Input' || displayName === 'Button' || displayName === 'Select') {\n            const childProps: Partial<InputProps> = {\n              disabled,\n              size: inputSize as SizeType,\n            };\n            return React.cloneElement(child, childProps);\n          }\n          return child;\n        })}\n      </div>\n    );\n  }\n  return (\n    <div {...otherProps} className={cls} style={style}>\n      {children}\n    </div>\n  );\n};\n\nInputGroupAddon.displayName = 'InputGroupAddon';\n\nexport default InputGroupAddon;\n"],"mappings":";;;;;;AAOA,MAAM,mBAAmB,UAAoD;CAC3E,MAAM,EACJ,WAAW,OACX,OAAO,MACP,UACA,WACA,OACA,UACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,gBAAgB,WAAW,cAAc;CAC/C,MAAM,YAAY,aAAa,qBAAqB,cAAc,WAAW,cAAc;CAC3F,MAAM,YAAY,MAAM,QAAQ,cAAc,iBAAiB;CAC/D,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,UAAU,GAAG,aAAa,GACvE,GAAG,UAAU,cAAc,UAC7B,CAAC;AAEF,KAAI,MAAM,eAAe,SAAS,CAChC,QACE,oBAAC,OAAD;EAAK,WAAW;EAAY;YACzB,MAAM,SAAS,IAAI,WAAW,UAA8B;GAC3D,MAAM,cAAe,MAAM,MAAc;AACzC,OAAI,gBAAgB,WAAW,gBAAgB,YAAY,gBAAgB,UAAU;IACnF,MAAM,aAAkC;KACtC;KACA,MAAM;KACP;AACD,WAAO,MAAM,aAAa,OAAO,WAAW;;AAE9C,UAAO;IACP;EACE,CAAA;AAGV,QACE,oBAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAY;EACzC;EACG,CAAA;;AAIV,gBAAgB,cAAc"}

package/es/input-otp/index.d.ts

@@ -0,0 +1 @@
+import { InputOTP } from "./input-otp.js";

package/es/input-otp/index.js

@@ -0,0 +1,9 @@
+import '../style/base.css';
+import './style/index.css';
+import InputOTP from "./input-otp.js";
+//#region src/input-otp/index.tsx
+var input_otp_default = InputOTP;
+//#endregion
+export { input_otp_default as default };
+
+//# sourceMappingURL=index.js.map

package/es/input-otp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/input-otp/index.tsx"],"sourcesContent":["import InputOTP from './input-otp';\n\nexport default InputOTP;\n"],"mappings":";;AAEA,IAAA,oBAAe"}

package/es/input-otp/input-otp.d.ts

@@ -0,0 +1,13 @@
+import { InputOTPProps } from "./types.js";
+import React from "react";
+
+//#region src/input-otp/input-otp.d.ts
+interface InputOTPRef {
+  focus: () => void;
+  blur: () => void;
+  nativeElement: HTMLDivElement | null;
+}
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<InputOTPRef>>;
+//#endregion
+export { InputOTP };
+//# sourceMappingURL=input-otp.d.ts.map

package/es/input-otp/input-otp.js

@@ -0,0 +1,128 @@
+import { ConfigContext } from "../config-provider/config-context.js";
+import { getPrefixCls } from "../_utils/general.js";
+import OTPInput from "./otp-input.js";
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/input-otp/input-otp.tsx
+function strToArr(str) {
+	return (str || "").split("");
+}
+const InputOTP = React.forwardRef((props, ref) => {
+	const { length = 6, size = "md", defaultValue, value, onChange, formatter, separator, disabled = false, mask, autoFocus, autoComplete, className, style, prefixCls: customisedCls, onFocus, ...otherProps } = props;
+	const configContext = useContext(ConfigContext);
+	const prefixCls = getPrefixCls("input-otp", configContext.prefixCls, customisedCls);
+	const inputSize = size || configContext.componentSize || "md";
+	const containerRef = useRef(null);
+	const inputsRef = useRef({});
+	const internalFormatter = useCallback((txt) => formatter ? formatter(txt) : txt, [formatter]);
+	const [valueCells, setValueCells] = useState(() => strToArr(internalFormatter(defaultValue || "")));
+	useEffect(() => {
+		if (value !== void 0) setValueCells(strToArr(value));
+	}, [value]);
+	React.useImperativeHandle(ref, () => ({
+		focus: () => {
+			let nextIndex = 0;
+			for (let i = 0; i < length; i += 1) {
+				if (!inputsRef.current[i]?.value) {
+					nextIndex = i;
+					break;
+				}
+				nextIndex = i;
+			}
+			inputsRef.current[nextIndex]?.focus();
+		},
+		blur: () => {
+			for (let i = 0; i < length; i += 1) inputsRef.current[i]?.blur();
+		},
+		nativeElement: containerRef.current
+	}));
+	const triggerValueCellsChange = useCallback((nextValueCells) => {
+		setValueCells((prev) => {
+			const prevValue = prev.join("");
+			const nextValue = nextValueCells.join("");
+			if (onChange && prevValue !== nextValue) onChange(nextValue);
+			return nextValueCells;
+		});
+	}, [onChange]);
+	const patchValue = useCallback((index, txt) => {
+		let nextCells = [...valueCells];
+		for (let i = 0; i < index; i += 1) if (!nextCells[i]) nextCells[i] = "";
+		if (txt.length <= 1) nextCells[index] = txt;
+		else nextCells = nextCells.slice(0, index).concat(strToArr(txt));
+		nextCells = nextCells.slice(0, length);
+		for (let i = nextCells.length - 1; i >= 0; i -= 1) {
+			if (nextCells[i]) break;
+			nextCells.pop();
+		}
+		nextCells = strToArr(internalFormatter(nextCells.map((c) => c || " ").join(""))).map((c, i) => {
+			if (c === " " && !nextCells[i]) return nextCells[i];
+			return c;
+		});
+		return nextCells;
+	}, [
+		valueCells,
+		length,
+		internalFormatter
+	]);
+	const onInputChange = useCallback((index, txt) => {
+		const nextCells = patchValue(index, txt);
+		const nextIndex = Math.min(index + txt.length, length - 1);
+		if (nextIndex !== index && nextCells[index] !== void 0) inputsRef.current[nextIndex]?.focus();
+		triggerValueCellsChange(nextCells);
+	}, [
+		patchValue,
+		length,
+		triggerValueCellsChange
+	]);
+	const onInputActiveChange = useCallback((nextIndex) => {
+		const clampedIndex = Math.max(0, Math.min(nextIndex, length - 1));
+		inputsRef.current[clampedIndex]?.focus();
+	}, [length]);
+	const onInputFocus = useCallback((event, index) => {
+		if (onFocus) onFocus(event);
+	}, [onFocus]);
+	const renderSeparator = useMemo(() => {
+		if (!separator) return null;
+		return (index) => {
+			const separatorNode = typeof separator === "function" ? separator(index) : separator;
+			if (!separatorNode) return null;
+			return /* @__PURE__ */ jsx("span", {
+				className: `${prefixCls}__separator`,
+				children: separatorNode
+			});
+		};
+	}, [separator, prefixCls]);
+	const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, { [`${prefixCls}_disabled`]: disabled });
+	return /* @__PURE__ */ jsx("div", {
+		...otherProps,
+		ref: containerRef,
+		className: cls,
+		style,
+		role: "group",
+		children: Array.from({ length }).map((_, index) => {
+			const singleValue = valueCells[index] || "";
+			return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx(OTPInput, {
+				ref: (el) => {
+					inputsRef.current[index] = el;
+				},
+				index,
+				size: inputSize,
+				prefixCls,
+				value: singleValue,
+				disabled,
+				mask,
+				autoFocus: index === 0 && autoFocus,
+				autoComplete,
+				onChange: onInputChange,
+				onActiveChange: onInputActiveChange,
+				onFocus: (e) => onInputFocus(e, index)
+			}), index < length - 1 && renderSeparator?.(index)] }, `otp-${index}`);
+		})
+	});
+});
+InputOTP.displayName = "InputOTP";
+//#endregion
+export { InputOTP as default };
+
+//# sourceMappingURL=input-otp.js.map

package/es/input-otp/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":[],"sources":["../../src/input-otp/input-otp.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useContext, useCallback, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputOTPProps } from './types';\nimport OTPInput from './otp-input';\n\nfunction strToArr(str: string): string[] {\n  return (str || '').split('');\n}\n\nexport interface InputOTPRef {\n  focus: () => void;\n  blur: () => void;\n  nativeElement: HTMLDivElement | null;\n}\n\nconst InputOTP = React.forwardRef<InputOTPRef, InputOTPProps>(\n  (props, ref) => {\n    const {\n      length = 6,\n      size = 'md',\n      defaultValue,\n      value,\n      onChange,\n      formatter,\n      separator,\n      disabled = false,\n      mask,\n      autoFocus,\n      autoComplete,\n      className,\n      style,\n      prefixCls: customisedCls,\n      onFocus,\n      ...otherProps\n    } = props;\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('input-otp', configContext.prefixCls, customisedCls);\n    const inputSize = size || configContext.componentSize || 'md';\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputsRef = useRef<Record<number, HTMLInputElement | null>>({});\n\n    // Formatter helper\n    const internalFormatter = useCallback(\n      (txt: string) => (formatter ? formatter(txt) : txt),\n      [formatter]\n    );\n\n    // Value state\n    const [valueCells, setValueCells] = useState<string[]>(() =>\n      strToArr(internalFormatter(defaultValue || ''))\n    );\n\n    useEffect(() => {\n      if (value !== undefined) {\n        setValueCells(strToArr(value));\n      }\n    }, [value]);\n\n    // Imperative handle\n    React.useImperativeHandle(ref, () => ({\n      focus: () => {\n        // Focus first empty cell (or last cell if all filled)\n        let nextIndex = 0;\n        for (let i = 0; i < length; i += 1) {\n          if (!inputsRef.current[i]?.value) {\n            nextIndex = i;\n            break;\n          }\n          nextIndex = i;\n        }\n        inputsRef.current[nextIndex]?.focus();\n      },\n      blur: () => {\n        for (let i = 0; i < length; i += 1) {\n          inputsRef.current[i]?.blur();\n        }\n      },\n      nativeElement: containerRef.current,\n    }));\n\n    // Trigger onChange when value cells change\n    const triggerValueCellsChange = useCallback(\n      (nextValueCells: string[]) => {\n        setValueCells((prev) => {\n          const prevValue = prev.join('');\n          const nextValue = nextValueCells.join('');\n          if (onChange && prevValue !== nextValue) {\n            onChange(nextValue);\n          }\n          return nextValueCells;\n        });\n      },\n      [onChange]\n    );\n\n    // Patch value at given index\n    const patchValue = useCallback(\n      (index: number, txt: string) => {\n        let nextCells = [...valueCells];\n\n        // Fill cells till index\n        for (let i = 0; i < index; i += 1) {\n          if (!nextCells[i]) {\n            nextCells[i] = '';\n          }\n        }\n\n        if (txt.length <= 1) {\n          nextCells[index] = txt;\n        } else {\n          nextCells = nextCells.slice(0, index).concat(strToArr(txt));\n        }\n        nextCells = nextCells.slice(0, length);\n\n        // Clean trailing empty cells\n        for (let i = nextCells.length - 1; i >= 0; i -= 1) {\n          if (nextCells[i]) {\n            break;\n          }\n          nextCells.pop();\n        }\n\n        // Format if needed\n        const formattedValue = internalFormatter(\n          nextCells.map((c) => c || ' ').join('')\n        );\n        nextCells = strToArr(formattedValue).map((c, i) => {\n          if (c === ' ' && !nextCells[i]) {\n            return nextCells[i];\n          }\n          return c;\n        });\n\n        return nextCells;\n      },\n      [valueCells, length, internalFormatter]\n    );\n\n    // Handle input change\n    const onInputChange = useCallback(\n      (index: number, txt: string) => {\n        const nextCells = patchValue(index, txt);\n        const nextIndex = Math.min(index + txt.length, length - 1);\n        if (nextIndex !== index && nextCells[index] !== undefined) {\n          inputsRef.current[nextIndex]?.focus();\n        }\n        triggerValueCellsChange(nextCells);\n      },\n      [patchValue, length, triggerValueCellsChange]\n    );\n\n    // Handle active change (arrow keys, backspace)\n    const onInputActiveChange = useCallback(\n      (nextIndex: number) => {\n        const clampedIndex = Math.max(0, Math.min(nextIndex, length - 1));\n        inputsRef.current[clampedIndex]?.focus();\n      },\n      [length]\n    );\n\n    // Handle focus — keep focus on the interacted cell\n    const onInputFocus = useCallback(\n      (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n        if (onFocus) {\n          (onFocus as React.FocusEventHandler<HTMLDivElement>)(event as unknown as React.FocusEvent<HTMLDivElement>);\n        }\n      },\n      [onFocus]\n    );\n\n    // Render separator\n    const renderSeparator = useMemo(() => {\n      if (!separator) return null;\n      return (index: number) => {\n        const separatorNode =\n          typeof separator === 'function' ? separator(index) : separator;\n        if (!separatorNode) return null;\n        return (\n          <span className={`${prefixCls}__separator`}>\n            {separatorNode}\n          </span>\n        );\n      };\n    }, [separator, prefixCls]);\n\n    const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n      [`${prefixCls}_disabled`]: disabled,\n    });\n\n    return (\n      <div\n        {...otherProps}\n        ref={containerRef}\n        className={cls}\n        style={style}\n        role=\"group\"\n      >\n        {Array.from({ length }).map((_, index) => {\n          const singleValue = valueCells[index] || '';\n          return (\n            <React.Fragment key={`otp-${index}`}>\n              <OTPInput\n                ref={(el) => {\n                  inputsRef.current[index] = el;\n                }}\n                index={index}\n                size={inputSize}\n                prefixCls={prefixCls}\n                value={singleValue}\n                disabled={disabled}\n                mask={mask}\n                autoFocus={index === 0 && autoFocus}\n                autoComplete={autoComplete}\n                onChange={onInputChange}\n                onActiveChange={onInputActiveChange}\n                onFocus={(e) => onInputFocus(e, index)}\n              />\n              {index < length - 1 && renderSeparator?.(index)}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":"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"}

package/es/input-otp/otp-input.js

@@ -0,0 +1,60 @@
+import React, { useCallback, useRef } from "react";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+//#region src/input-otp/otp-input.tsx
+const OTPInput = React.forwardRef((props, ref) => {
+	const { index, value, disabled, mask, size = "md", autoFocus, autoComplete, prefixCls, onChange, onActiveChange, onFocus } = props;
+	const inputRef = useRef(null);
+	const setRef = useCallback((el) => {
+		inputRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	}, [ref]);
+	const syncSelection = useCallback(() => {
+		requestAnimationFrame(() => {
+			const inputEle = inputRef.current;
+			if (document.activeElement === inputEle && inputEle) inputEle.select();
+		});
+	}, []);
+	const onInternalInput = (e) => {
+		onChange(index, e.target.value);
+	};
+	const onInternalFocus = (e) => {
+		onFocus?.(e);
+		syncSelection();
+	};
+	const onInternalKeyDown = (event) => {
+		const { key, ctrlKey, metaKey } = event;
+		if (key === "ArrowLeft") onActiveChange(index - 1);
+		else if (key === "ArrowRight") onActiveChange(index + 1);
+		else if (key === "z" && (ctrlKey || metaKey)) event.preventDefault();
+		else if (key === "Backspace" && !value) onActiveChange(index - 1);
+		syncSelection();
+	};
+	const displayValue = mask && typeof mask === "string" && value ? mask : value;
+	const inputType = mask === true ? "password" : "text";
+	return /* @__PURE__ */ jsx("input", {
+		ref: setRef,
+		"aria-label": `OTP Input ${index + 1}`,
+		type: inputType,
+		inputMode: "numeric",
+		autoComplete: autoComplete || "one-time-code",
+		className: classNames(`${prefixCls}__cell`, `${prefixCls}__cell_${size}`, {
+			[`${prefixCls}__cell_disabled`]: disabled,
+			[`${prefixCls}__cell_mask`]: mask
+		}),
+		value: displayValue,
+		disabled,
+		autoFocus,
+		onInput: onInternalInput,
+		onFocus: onInternalFocus,
+		onKeyDown: onInternalKeyDown,
+		onMouseDown: syncSelection,
+		onMouseUp: syncSelection
+	});
+});
+OTPInput.displayName = "OTPInput";
+//#endregion
+export { OTPInput as default };
+
+//# sourceMappingURL=otp-input.js.map

package/es/input-otp/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","names":[],"sources":["../../src/input-otp/otp-input.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { OTPInputCellProps } from './types';\n\nconst OTPInput = React.forwardRef<HTMLInputElement, OTPInputCellProps>(\n  (props, ref) => {\n    const {\n      index,\n      value,\n      disabled,\n      mask,\n      size = 'md',\n      autoFocus,\n      autoComplete,\n      prefixCls,\n      onChange,\n      onActiveChange,\n      onFocus,\n    } = props;\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    // Merge refs\n    const setRef = useCallback(\n      (el: HTMLInputElement | null) => {\n        inputRef.current = el;\n        if (typeof ref === 'function') {\n          ref(el);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = el;\n        }\n      },\n      [ref]\n    );\n\n    const syncSelection = useCallback(() => {\n      requestAnimationFrame(() => {\n        const inputEle = inputRef.current;\n        if (document.activeElement === inputEle && inputEle) {\n          inputEle.select();\n        }\n      });\n    }, []);\n\n    const onInternalInput = (e: React.FormEvent<HTMLInputElement>): void => {\n      onChange(index, (e.target as HTMLInputElement).value);\n    };\n\n    const onInternalFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n      onFocus?.(e);\n      syncSelection();\n    };\n\n    const onInternalKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n      const { key, ctrlKey, metaKey } = event;\n\n      if (key === 'ArrowLeft') {\n        onActiveChange(index - 1);\n      } else if (key === 'ArrowRight') {\n        onActiveChange(index + 1);\n      } else if (key === 'z' && (ctrlKey || metaKey)) {\n        event.preventDefault();\n      } else if (key === 'Backspace' && !value) {\n        onActiveChange(index - 1);\n      }\n\n      syncSelection();\n    };\n\n    const displayValue = mask && typeof mask === 'string' && value ? mask : value;\n    const inputType = mask === true ? 'password' : 'text';\n\n    return (\n      <input\n        ref={setRef}\n        aria-label={`OTP Input ${index + 1}`}\n        type={inputType}\n        inputMode=\"numeric\"\n        autoComplete={autoComplete || 'one-time-code'}\n        className={classNames(`${prefixCls}__cell`, `${prefixCls}__cell_${size}`, {\n          [`${prefixCls}__cell_disabled`]: disabled,\n          [`${prefixCls}__cell_mask`]: mask,\n        })}\n        value={displayValue}\n        disabled={disabled}\n        autoFocus={autoFocus}\n        onInput={onInternalInput}\n        onFocus={onInternalFocus}\n        onKeyDown={onInternalKeyDown}\n        onMouseDown={syncSelection}\n        onMouseUp={syncSelection}\n      />\n    );\n  }\n);\n\nOTPInput.displayName = 'OTPInput';\n\nexport default OTPInput;\n"],"mappings":";;;;AAIA,MAAM,WAAW,MAAM,YACpB,OAAO,QAAQ;CACd,MAAM,EACJ,OACA,OACA,UACA,MACA,OAAO,MACP,WACA,cACA,WACA,UACA,gBACA,YACE;CAEJ,MAAM,WAAW,OAAgC,KAAK;CAGtD,MAAM,SAAS,aACZ,OAAgC;AAC/B,WAAS,UAAU;AACnB,MAAI,OAAO,QAAQ,WACjB,KAAI,GAAG;WACE,IACR,KAAwD,UAAU;IAGvE,CAAC,IAAI,CACN;CAED,MAAM,gBAAgB,kBAAkB;AACtC,8BAA4B;GAC1B,MAAM,WAAW,SAAS;AAC1B,OAAI,SAAS,kBAAkB,YAAY,SACzC,UAAS,QAAQ;IAEnB;IACD,EAAE,CAAC;CAEN,MAAM,mBAAmB,MAA+C;AACtE,WAAS,OAAQ,EAAE,OAA4B,MAAM;;CAGvD,MAAM,mBAA8D,MAAM;AACxE,YAAU,EAAE;AACZ,iBAAe;;CAGjB,MAAM,qBAAmE,UAAU;EACjF,MAAM,EAAE,KAAK,SAAS,YAAY;AAElC,MAAI,QAAQ,YACV,gBAAe,QAAQ,EAAE;WAChB,QAAQ,aACjB,gBAAe,QAAQ,EAAE;WAChB,QAAQ,QAAQ,WAAW,SACpC,OAAM,gBAAgB;WACb,QAAQ,eAAe,CAAC,MACjC,gBAAe,QAAQ,EAAE;AAG3B,iBAAe;;CAGjB,MAAM,eAAe,QAAQ,OAAO,SAAS,YAAY,QAAQ,OAAO;CACxE,MAAM,YAAY,SAAS,OAAO,aAAa;AAE/C,QACE,oBAAC,SAAD;EACE,KAAK;EACL,cAAY,aAAa,QAAQ;EACjC,MAAM;EACN,WAAU;EACV,cAAc,gBAAgB;EAC9B,WAAW,WAAW,GAAG,UAAU,SAAS,GAAG,UAAU,SAAS,QAAQ;IACvE,GAAG,UAAU,mBAAmB;IAChC,GAAG,UAAU,eAAe;GAC9B,CAAC;EACF,OAAO;EACG;EACC;EACX,SAAS;EACT,SAAS;EACT,WAAW;EACX,aAAa;EACb,WAAW;EACX,CAAA;EAGP;AAED,SAAS,cAAc"}

package/es/input-otp/style/_index.scss

@@ -0,0 +1,53 @@
+@use '../../style/variables' as *;
+@use '../../input/style/mixin' as *;
+
+.#{$prefix}-input-otp {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  &__cell {
+    @include input-default;
+
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    padding: 0;
+    font-size: $input-md-font-size;
+    border-radius: $input-border-radius;
+    caret-color: currentcolor;
+
+    &_sm {
+      width: 28px;
+      height: 28px;
+      font-size: $input-sm-font-size;
+    }
+
+    &_md {
+      width: 36px;
+      height: 36px;
+      font-size: $input-md-font-size;
+    }
+
+    &_lg {
+      width: 44px;
+      height: 44px;
+      font-size: $input-lg-font-size;
+    }
+
+    &_disabled {
+      @include input-default-disabled;
+    }
+  }
+
+  &__separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--ty-color-text-secondary);
+    font-size: $font-size-base;
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+  }
+}

package/es/input-otp/style/index.css

@@ -0,0 +1,71 @@
+.ty-input-otp {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.ty-input-otp__cell {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  color: var(--ty-color-text);
+  border: 1px solid var(--ty-input-border);
+  transition: all 0.3s;
+  outline: 0;
+  border-radius: 2px;
+  font-size: 1rem;
+  background-color: var(--ty-input-bg);
+}
+.ty-input-otp__cell:hover {
+  border-color: var(--ty-color-primary);
+}
+.ty-input-otp__cell:focus {
+  border-color: var(--ty-input-focus-border);
+  box-shadow: var(--ty-input-focus-shadow);
+}
+.ty-input-otp__cell::-moz-placeholder {
+  color: var(--ty-color-text-placeholder);
+}
+.ty-input-otp__cell::placeholder {
+  color: var(--ty-color-text-placeholder);
+}
+.ty-input-otp__cell {
+  width: 36px;
+  height: 36px;
+  text-align: center;
+  padding: 0;
+  font-size: 1rem;
+  border-radius: 2px;
+  caret-color: currentcolor;
+}
+.ty-input-otp__cell_sm {
+  width: 28px;
+  height: 28px;
+  font-size: 0.875rem;
+}
+.ty-input-otp__cell_md {
+  width: 36px;
+  height: 36px;
+  font-size: 1rem;
+}
+.ty-input-otp__cell_lg {
+  width: 44px;
+  height: 44px;
+  font-size: 1.25rem;
+}
+.ty-input-otp__cell_disabled {
+  cursor: not-allowed;
+  background-color: var(--ty-input-disabled-bg);
+  color: var(--ty-input-disabled-color);
+}
+.ty-input-otp__cell_disabled:hover {
+  border-color: var(--ty-input-border);
+}
+.ty-input-otp__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ty-color-text-secondary);
+  font-size: 1rem;
+}
+.ty-input-otp_disabled {
+  cursor: not-allowed;
+}

package/es/input-otp/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/es/input-otp/style/index.js

@@ -0,0 +1 @@
+import "./index.css";

package/es/input-otp/types.d.ts

@@ -0,0 +1,31 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import React from "react";
+
+//#region src/input-otp/types.d.ts
+interface InputOTPProps extends BaseProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'> {
+  /** Number of OTP input cells */
+  length?: number;
+  /** Size of the input */
+  size?: SizeType;
+  /** Default value of the OTP input */
+  defaultValue?: string;
+  /** Controlled value of the OTP input */
+  value?: string;
+  /** Callback when all cells are filled */
+  onChange?: (value: string) => void;
+  /** Custom formatter to restrict/modify input */
+  formatter?: (value: string) => string;
+  /** Separator element between cells */
+  separator?: ((index: number) => React.ReactNode) | React.ReactNode;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Whether to mask the values, or a custom mask character */
+  mask?: boolean | string;
+  /** Auto focus the first cell on mount */
+  autoFocus?: boolean;
+  /** Autocomplete attribute */
+  autoComplete?: string;
+}
+//#endregion
+export { InputOTPProps };
+//# sourceMappingURL=types.d.ts.map

package/es/style/_component.scss

@@ -28,6 +28,7 @@
 @use "../image/style/index" as *;
 @use "../input/style/index" as *;
 @use "../input-number/style/index" as *;
+@use "../input-otp/style/index" as *;
 @use "../input-password/style/index" as *;
 @use "../layout/style/index" as *;
 @use "../link/style/index" as *;
@@ -75,4 +76,4 @@
 @use "../tree/style/index" as *;
 @use "../typography/style/index" as *;
 @use "../upload/style/index" as *;
-@use "../with-spin/style/index" as *;
+@use "../with-spin/style/index" as *;

package/lib/index.d.ts

@@ -31,6 +31,7 @@ import { DefaultForm } from "./form/index.js";
 import { Image } from "./image/image.js";
 import { DefaultInput } from "./input/index.js";
 import { InputNumber } from "./input-number/input-number.js";
+import { InputOTP } from "./input-otp/input-otp.js";
 import { InputPassword } from "./input-password/input-password.js";
 import { IntlProvider } from "./intl-provider/intl-provider.js";
 import { Keyboard } from "./keyboard/keyboard.js";
@@ -85,4 +86,4 @@ import { en_US } from "./locale/en_US.js";
 import { zh_CN } from "./locale/zh_CN.js";
 import { useLocale } from "./_utils/use-locale.js";
 import { ThemeMode, useTheme } from "./_utils/use-theme.js";
-export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { Alert, DefaultAnchor as Anchor, AspectRatio, AutoComplete, DefaultAvatar as Avatar, BackTop, Badge, DefaultBreadcrumb as Breadcrumb, DefaultButton as Button, Calendar, DefaultCard as Card, DefaultCarousel as Carousel, Cascader, DefaultCheckbox as Checkbox, Col, DefaultCollapse as Collapse, ColorPicker, ConfigProvider, CopyToClipboard, Countdown, DatePicker, DefaultDesc as Descriptions, Divider, Drawer, Dropdown, Empty, Flex, DefaultFlip as Flip, DefaultForm as Form, Image, DefaultInput as Input, InputNumber, InputOTP, InputPassword, IntlProvider, Keyboard, DefaultLayout as Layout, Link, DefaultList as List, Loader, _default as LoadingBar, type Locale, DefaultMenu as Menu, messageContainer as Message, ModalWithContext as Modal, DefaultSelect as NativeSelect, notificationContainer as Notification, Overlay, Pagination, PopConfirm, Popover, Progress, DefaultRadio as Radio, Rate, Result, Row, ScrollIndicator, Segmented, DefaultSelect$1 as Select, Skeleton, Slider, Space, DefaultSpeedDial as SpeedDial, Split, SplitButton, Statistic, DefaultSteps as Steps, Sticky, StrengthIndicator, Switch, Table, DefaultTabs as Tabs, DefaultTag as Tag, Textarea, type ThemeMode, TimePicker, DefaultTimeline as Timeline, Tooltip, Transfer, Transition, Tree, DefaultTypo as Typography, Upload, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/lib/index.js

@@ -38,50 +38,51 @@ const require_index$31 = require("./form/index.js");
 const require_index$32 = require("./image/index.js");
 const require_index$33 = require("./input/index.js");
 const require_index$34 = require("./input-number/index.js");
-const require_index$35 = require("./input-password/index.js");
-const require_index$36 = require("./keyboard/index.js");
-const require_index$37 = require("./layout/index.js");
-const require_index$38 = require("./link/index.js");
-const require_index$39 = require("./pagination/index.js");
-const require_index$40 = require("./list/index.js");
-const require_index$41 = require("./loader/index.js");
-const require_index$42 = require("./loading-bar/index.js");
-const require_index$43 = require("./menu/index.js");
-const require_index$44 = require("./message/index.js");
-const require_index$45 = require("./native-select/index.js");
-const require_index$46 = require("./row/index.js");
-const require_index$47 = require("./modal/index.js");
-const require_index$48 = require("./notification/index.js");
-const require_index$49 = require("./popover/index.js");
-const require_index$50 = require("./pop-confirm/index.js");
-const require_index$51 = require("./progress/index.js");
-const require_index$52 = require("./radio/index.js");
-const require_index$53 = require("./rate/index.js");
-const require_index$54 = require("./result/index.js");
-const require_index$55 = require("./scroll-indicator/index.js");
-const require_index$56 = require("./segmented/index.js");
-const require_index$57 = require("./select/index.js");
-const require_index$58 = require("./skeleton/index.js");
-const require_index$59 = require("./tooltip/index.js");
-const require_index$60 = require("./slider/index.js");
-const require_index$61 = require("./split/index.js");
-const require_index$62 = require("./split-button/index.js");
-const require_index$63 = require("./space/index.js");
-const require_index$64 = require("./speed-dial/index.js");
-const require_index$65 = require("./steps/index.js");
-const require_index$66 = require("./statistic/index.js");
-const require_index$67 = require("./strength-indicator/index.js");
-const require_index$68 = require("./switch/index.js");
-const require_index$69 = require("./table/index.js");
-const require_index$70 = require("./tabs/index.js");
-const require_index$71 = require("./tag/index.js");
-const require_index$72 = require("./textarea/index.js");
-const require_index$73 = require("./timeline/index.js");
-const require_index$74 = require("./time-picker/index.js");
-const require_index$75 = require("./transfer/index.js");
-const require_index$76 = require("./tree/index.js");
-const require_index$77 = require("./typography/index.js");
-const require_index$78 = require("./upload/index.js");
+const require_index$35 = require("./input-otp/index.js");
+const require_index$36 = require("./input-password/index.js");
+const require_index$37 = require("./keyboard/index.js");
+const require_index$38 = require("./layout/index.js");
+const require_index$39 = require("./link/index.js");
+const require_index$40 = require("./pagination/index.js");
+const require_index$41 = require("./list/index.js");
+const require_index$42 = require("./loader/index.js");
+const require_index$43 = require("./loading-bar/index.js");
+const require_index$44 = require("./menu/index.js");
+const require_index$45 = require("./message/index.js");
+const require_index$46 = require("./native-select/index.js");
+const require_index$47 = require("./row/index.js");
+const require_index$48 = require("./modal/index.js");
+const require_index$49 = require("./notification/index.js");
+const require_index$50 = require("./popover/index.js");
+const require_index$51 = require("./pop-confirm/index.js");
+const require_index$52 = require("./progress/index.js");
+const require_index$53 = require("./radio/index.js");
+const require_index$54 = require("./rate/index.js");
+const require_index$55 = require("./result/index.js");
+const require_index$56 = require("./scroll-indicator/index.js");
+const require_index$57 = require("./segmented/index.js");
+const require_index$58 = require("./select/index.js");
+const require_index$59 = require("./skeleton/index.js");
+const require_index$60 = require("./tooltip/index.js");
+const require_index$61 = require("./slider/index.js");
+const require_index$62 = require("./split/index.js");
+const require_index$63 = require("./split-button/index.js");
+const require_index$64 = require("./space/index.js");
+const require_index$65 = require("./speed-dial/index.js");
+const require_index$66 = require("./steps/index.js");
+const require_index$67 = require("./statistic/index.js");
+const require_index$68 = require("./strength-indicator/index.js");
+const require_index$69 = require("./switch/index.js");
+const require_index$70 = require("./table/index.js");
+const require_index$71 = require("./tabs/index.js");
+const require_index$72 = require("./tag/index.js");
+const require_index$73 = require("./textarea/index.js");
+const require_index$74 = require("./timeline/index.js");
+const require_index$75 = require("./time-picker/index.js");
+const require_index$76 = require("./transfer/index.js");
+const require_index$77 = require("./tree/index.js");
+const require_index$78 = require("./typography/index.js");
+const require_index$79 = require("./upload/index.js");
 const require_with_locale = require("./intl-provider/with-locale.js");
 const require_with_spin = require("./with-spin/with-spin.js");
 const require_zh_CN = require("./locale/zh_CN.js");
@@ -118,54 +119,55 @@ exports.Form = require_index$31;
 exports.Image = require_index$32;
 exports.Input = require_index$33;
 exports.InputNumber = require_index$34;
-exports.InputPassword = require_index$35;
+exports.InputOTP = require_index$35;
+exports.InputPassword = require_index$36;
 exports.IntlProvider = require_index$15;
-exports.Keyboard = require_index$36;
-exports.Layout = require_index$37;
-exports.Link = require_index$38;
-exports.List = require_index$40;
-exports.Loader = require_index$41;
-exports.LoadingBar = require_index$42;
-exports.Menu = require_index$43;
-exports.Message = require_index$44;
-exports.Modal = require_index$47;
-exports.NativeSelect = require_index$45;
-exports.Notification = require_index$48;
+exports.Keyboard = require_index$37;
+exports.Layout = require_index$38;
+exports.Link = require_index$39;
+exports.List = require_index$41;
+exports.Loader = require_index$42;
+exports.LoadingBar = require_index$43;
+exports.Menu = require_index$44;
+exports.Message = require_index$45;
+exports.Modal = require_index$48;
+exports.NativeSelect = require_index$46;
+exports.Notification = require_index$49;
 exports.Overlay = require_index$26;
-exports.Pagination = require_index$39;
-exports.PopConfirm = require_index$50;
-exports.Popover = require_index$49;
-exports.Progress = require_index$51;
-exports.Radio = require_index$52;
-exports.Rate = require_index$53;
-exports.Result = require_index$54;
-exports.Row = require_index$46;
-exports.ScrollIndicator = require_index$55;
-exports.Segmented = require_index$56;
-exports.Select = require_index$57;
-exports.Skeleton = require_index$58;
-exports.Slider = require_index$60;
-exports.Space = require_index$63;
-exports.SpeedDial = require_index$64;
-exports.Split = require_index$61;
-exports.SplitButton = require_index$62;
-exports.Statistic = require_index$66;
-exports.Steps = require_index$65;
+exports.Pagination = require_index$40;
+exports.PopConfirm = require_index$51;
+exports.Popover = require_index$50;
+exports.Progress = require_index$52;
+exports.Radio = require_index$53;
+exports.Rate = require_index$54;
+exports.Result = require_index$55;
+exports.Row = require_index$47;
+exports.ScrollIndicator = require_index$56;
+exports.Segmented = require_index$57;
+exports.Select = require_index$58;
+exports.Skeleton = require_index$59;
+exports.Slider = require_index$61;
+exports.Space = require_index$64;
+exports.SpeedDial = require_index$65;
+exports.Split = require_index$62;
+exports.SplitButton = require_index$63;
+exports.Statistic = require_index$67;
+exports.Steps = require_index$66;
 exports.Sticky = require_index$2;
-exports.StrengthIndicator = require_index$67;
-exports.Switch = require_index$68;
-exports.Table = require_index$69;
-exports.Tabs = require_index$70;
-exports.Tag = require_index$71;
-exports.Textarea = require_index$72;
-exports.TimePicker = require_index$74;
-exports.Timeline = require_index$73;
-exports.Tooltip = require_index$59;
-exports.Transfer = require_index$75;
+exports.StrengthIndicator = require_index$68;
+exports.Switch = require_index$69;
+exports.Table = require_index$70;
+exports.Tabs = require_index$71;
+exports.Tag = require_index$72;
+exports.Textarea = require_index$73;
+exports.TimePicker = require_index$75;
+exports.Timeline = require_index$74;
+exports.Tooltip = require_index$60;
+exports.Transfer = require_index$76;
 exports.Transition = require_index;
-exports.Tree = require_index$76;
-exports.Typography = require_index$77;
-exports.Upload = require_index$78;
+exports.Tree = require_index$77;
+exports.Typography = require_index$78;
+exports.Upload = require_index$79;
 exports.en_US = require_en_US;
 exports.useLocale = require_use_locale.useLocale;
 exports.useTheme = require_use_theme.useTheme;

package/lib/input/input-group-addon.js

@@ -17,11 +17,15 @@ const InputGroupAddon = (props) => {
 		className: cls,
 		style,
 		children: react.default.Children.map(children, (child) => {
-			const childProps = {
-				disabled,
-				size: inputSize
-			};
-			return react.default.cloneElement(child, childProps);
+			const displayName = child.type?.displayName;
+			if (displayName === "Input" || displayName === "Button" || displayName === "Select") {
+				const childProps = {
+					disabled,
+					size: inputSize
+				};
+				return react.default.cloneElement(child, childProps);
+			}
+			return child;
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

package/lib/input/input-group-addon.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-group-addon.js","names":["ConfigContext","getPrefixCls","React"],"sources":["../../src/input/input-group-addon.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputGroupAddonProps, InputProps } from './types';\nimport { SizeType } from '../_utils/props';\n\nconst InputGroupAddon = (props: InputGroupAddonProps): React.ReactElement => {\n  const {\n    disabled = false,\n    size = 'md',\n    noBorder,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('input-group-addon', configContext.prefixCls, customisedCls);\n  const inputSize = props.size || configContext.componentSize || size;\n  const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n    [`${prefixCls}_no-border`]: noBorder,\n  });\n\n  if (React.isValidElement(children)) {\n    return (\n      <div className={cls} style={style}>\n        {React.Children.map(children, (child: React.ReactElement) => {\n          const childProps: Partial<InputProps> = {\n            disabled,\n            size: inputSize as SizeType,\n          };\n          return React.cloneElement(child, childProps);\n        })}\n      </div>\n    );\n  }\n  return (\n    <div {...otherProps} className={cls} style={style}>\n      {children}\n    </div>\n  );\n};\n\nInputGroupAddon.displayName = 'InputGroupAddon';\n\nexport default InputGroupAddon;\n"],"mappings":";;;;;;;;;AAOA,MAAM,mBAAmB,UAAoD;CAC3E,MAAM,EACJ,WAAW,OACX,OAAO,MACP,UACA,WACA,OACA,UACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,iBAAA,GAAA,MAAA,YAA2BA,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,qBAAqB,cAAc,WAAW,cAAc;CAC3F,MAAM,YAAY,MAAM,QAAQ,cAAc,iBAAiB;CAC/D,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAAG,UAAU,GAAG,aAAa,GACvE,GAAG,UAAU,cAAc,UAC7B,CAAC;AAEF,KAAIC,MAAAA,QAAM,eAAe,SAAS,CAChC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW;EAAY;YACzBA,MAAAA,QAAM,SAAS,IAAI,WAAW,UAA8B;GAC3D,MAAM,aAAkC;IACtC;IACA,MAAM;IACP;AACD,UAAOA,MAAAA,QAAM,aAAa,OAAO,WAAW;IAC5C;EACE,CAAA;AAGV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAY;EACzC;EACG,CAAA;;AAIV,gBAAgB,cAAc"}
+{"version":3,"file":"input-group-addon.js","names":["ConfigContext","getPrefixCls","React"],"sources":["../../src/input/input-group-addon.tsx"],"sourcesContent":["import React, { useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputGroupAddonProps, InputProps } from './types';\nimport { SizeType } from '../_utils/props';\n\nconst InputGroupAddon = (props: InputGroupAddonProps): React.ReactElement => {\n  const {\n    disabled = false,\n    size = 'md',\n    noBorder,\n    className,\n    style,\n    children,\n    prefixCls: customisedCls,\n    ...otherProps\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('input-group-addon', configContext.prefixCls, customisedCls);\n  const inputSize = props.size || configContext.componentSize || size;\n  const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n    [`${prefixCls}_no-border`]: noBorder,\n  });\n\n  if (React.isValidElement(children)) {\n    return (\n      <div className={cls} style={style}>\n        {React.Children.map(children, (child: React.ReactElement) => {\n          const displayName = (child.type as any)?.displayName;\n          if (displayName === 'Input' || displayName === 'Button' || displayName === 'Select') {\n            const childProps: Partial<InputProps> = {\n              disabled,\n              size: inputSize as SizeType,\n            };\n            return React.cloneElement(child, childProps);\n          }\n          return child;\n        })}\n      </div>\n    );\n  }\n  return (\n    <div {...otherProps} className={cls} style={style}>\n      {children}\n    </div>\n  );\n};\n\nInputGroupAddon.displayName = 'InputGroupAddon';\n\nexport default InputGroupAddon;\n"],"mappings":";;;;;;;;;AAOA,MAAM,mBAAmB,UAAoD;CAC3E,MAAM,EACJ,WAAW,OACX,OAAO,MACP,UACA,WACA,OACA,UACA,WAAW,eACX,GAAG,eACD;CACJ,MAAM,iBAAA,GAAA,MAAA,YAA2BA,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,qBAAqB,cAAc,WAAW,cAAc;CAC3F,MAAM,YAAY,MAAM,QAAQ,cAAc,iBAAiB;CAC/D,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAAG,UAAU,GAAG,aAAa,GACvE,GAAG,UAAU,cAAc,UAC7B,CAAC;AAEF,KAAIC,MAAAA,QAAM,eAAe,SAAS,CAChC,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAW;EAAY;YACzBA,MAAAA,QAAM,SAAS,IAAI,WAAW,UAA8B;GAC3D,MAAM,cAAe,MAAM,MAAc;AACzC,OAAI,gBAAgB,WAAW,gBAAgB,YAAY,gBAAgB,UAAU;IACnF,MAAM,aAAkC;KACtC;KACA,MAAM;KACP;AACD,WAAOA,MAAAA,QAAM,aAAa,OAAO,WAAW;;AAE9C,UAAO;IACP;EACE,CAAA;AAGV,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAY,WAAW;EAAY;EACzC;EACG,CAAA;;AAIV,gBAAgB,cAAc"}

package/lib/input-otp/index.js

@@ -0,0 +1,8 @@
+require('../style/base.css');
+require('./style/index.css');
+//#region src/input-otp/index.tsx
+var input_otp_default = require("./input-otp.js").default;
+//#endregion
+exports.default = input_otp_default;
+
+//# sourceMappingURL=index.js.map

package/lib/input-otp/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["InputOTP"],"sources":["../../src/input-otp/index.tsx"],"sourcesContent":["import InputOTP from './input-otp';\n\nexport default InputOTP;\n"],"mappings":";AAEA,IAAA,8CAAeA"}

package/lib/input-otp/input-otp.d.ts

@@ -0,0 +1,13 @@
+import { InputOTPProps } from "./types.js";
+import React from "react";
+
+//#region src/input-otp/input-otp.d.ts
+interface InputOTPRef {
+  focus: () => void;
+  blur: () => void;
+  nativeElement: HTMLDivElement | null;
+}
+declare const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<InputOTPRef>>;
+//#endregion
+export { InputOTP };
+//# sourceMappingURL=input-otp.d.ts.map

package/lib/input-otp/input-otp.js

@@ -0,0 +1,131 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+const require_config_context = require("../config-provider/config-context.js");
+const require_general = require("../_utils/general.js");
+const require_otp_input = require("./otp-input.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/input-otp/input-otp.tsx
+function strToArr(str) {
+	return (str || "").split("");
+}
+const InputOTP = react.default.forwardRef((props, ref) => {
+	const { length = 6, size = "md", defaultValue, value, onChange, formatter, separator, disabled = false, mask, autoFocus, autoComplete, className, style, prefixCls: customisedCls, onFocus, ...otherProps } = props;
+	const configContext = (0, react.useContext)(require_config_context.ConfigContext);
+	const prefixCls = require_general.getPrefixCls("input-otp", configContext.prefixCls, customisedCls);
+	const inputSize = size || configContext.componentSize || "md";
+	const containerRef = (0, react.useRef)(null);
+	const inputsRef = (0, react.useRef)({});
+	const internalFormatter = (0, react.useCallback)((txt) => formatter ? formatter(txt) : txt, [formatter]);
+	const [valueCells, setValueCells] = (0, react.useState)(() => strToArr(internalFormatter(defaultValue || "")));
+	(0, react.useEffect)(() => {
+		if (value !== void 0) setValueCells(strToArr(value));
+	}, [value]);
+	react.default.useImperativeHandle(ref, () => ({
+		focus: () => {
+			let nextIndex = 0;
+			for (let i = 0; i < length; i += 1) {
+				if (!inputsRef.current[i]?.value) {
+					nextIndex = i;
+					break;
+				}
+				nextIndex = i;
+			}
+			inputsRef.current[nextIndex]?.focus();
+		},
+		blur: () => {
+			for (let i = 0; i < length; i += 1) inputsRef.current[i]?.blur();
+		},
+		nativeElement: containerRef.current
+	}));
+	const triggerValueCellsChange = (0, react.useCallback)((nextValueCells) => {
+		setValueCells((prev) => {
+			const prevValue = prev.join("");
+			const nextValue = nextValueCells.join("");
+			if (onChange && prevValue !== nextValue) onChange(nextValue);
+			return nextValueCells;
+		});
+	}, [onChange]);
+	const patchValue = (0, react.useCallback)((index, txt) => {
+		let nextCells = [...valueCells];
+		for (let i = 0; i < index; i += 1) if (!nextCells[i]) nextCells[i] = "";
+		if (txt.length <= 1) nextCells[index] = txt;
+		else nextCells = nextCells.slice(0, index).concat(strToArr(txt));
+		nextCells = nextCells.slice(0, length);
+		for (let i = nextCells.length - 1; i >= 0; i -= 1) {
+			if (nextCells[i]) break;
+			nextCells.pop();
+		}
+		nextCells = strToArr(internalFormatter(nextCells.map((c) => c || " ").join(""))).map((c, i) => {
+			if (c === " " && !nextCells[i]) return nextCells[i];
+			return c;
+		});
+		return nextCells;
+	}, [
+		valueCells,
+		length,
+		internalFormatter
+	]);
+	const onInputChange = (0, react.useCallback)((index, txt) => {
+		const nextCells = patchValue(index, txt);
+		const nextIndex = Math.min(index + txt.length, length - 1);
+		if (nextIndex !== index && nextCells[index] !== void 0) inputsRef.current[nextIndex]?.focus();
+		triggerValueCellsChange(nextCells);
+	}, [
+		patchValue,
+		length,
+		triggerValueCellsChange
+	]);
+	const onInputActiveChange = (0, react.useCallback)((nextIndex) => {
+		const clampedIndex = Math.max(0, Math.min(nextIndex, length - 1));
+		inputsRef.current[clampedIndex]?.focus();
+	}, [length]);
+	const onInputFocus = (0, react.useCallback)((event, index) => {
+		if (onFocus) onFocus(event);
+	}, [onFocus]);
+	const renderSeparator = (0, react.useMemo)(() => {
+		if (!separator) return null;
+		return (index) => {
+			const separatorNode = typeof separator === "function" ? separator(index) : separator;
+			if (!separatorNode) return null;
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: `${prefixCls}__separator`,
+				children: separatorNode
+			});
+		};
+	}, [separator, prefixCls]);
+	const cls = (0, classnames.default)(prefixCls, className, `${prefixCls}_${inputSize}`, { [`${prefixCls}_disabled`]: disabled });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...otherProps,
+		ref: containerRef,
+		className: cls,
+		style,
+		role: "group",
+		children: Array.from({ length }).map((_, index) => {
+			const singleValue = valueCells[index] || "";
+			return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react.default.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_otp_input.default, {
+				ref: (el) => {
+					inputsRef.current[index] = el;
+				},
+				index,
+				size: inputSize,
+				prefixCls,
+				value: singleValue,
+				disabled,
+				mask,
+				autoFocus: index === 0 && autoFocus,
+				autoComplete,
+				onChange: onInputChange,
+				onActiveChange: onInputActiveChange,
+				onFocus: (e) => onInputFocus(e, index)
+			}), index < length - 1 && renderSeparator?.(index)] }, `otp-${index}`);
+		})
+	});
+});
+InputOTP.displayName = "InputOTP";
+//#endregion
+exports.default = InputOTP;
+
+//# sourceMappingURL=input-otp.js.map

package/lib/input-otp/input-otp.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-otp.js","names":["React","ConfigContext","getPrefixCls","OTPInput"],"sources":["../../src/input-otp/input-otp.tsx"],"sourcesContent":["import React, { useRef, useState, useEffect, useContext, useCallback, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputOTPProps } from './types';\nimport OTPInput from './otp-input';\n\nfunction strToArr(str: string): string[] {\n  return (str || '').split('');\n}\n\nexport interface InputOTPRef {\n  focus: () => void;\n  blur: () => void;\n  nativeElement: HTMLDivElement | null;\n}\n\nconst InputOTP = React.forwardRef<InputOTPRef, InputOTPProps>(\n  (props, ref) => {\n    const {\n      length = 6,\n      size = 'md',\n      defaultValue,\n      value,\n      onChange,\n      formatter,\n      separator,\n      disabled = false,\n      mask,\n      autoFocus,\n      autoComplete,\n      className,\n      style,\n      prefixCls: customisedCls,\n      onFocus,\n      ...otherProps\n    } = props;\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('input-otp', configContext.prefixCls, customisedCls);\n    const inputSize = size || configContext.componentSize || 'md';\n\n    const containerRef = useRef<HTMLDivElement>(null);\n    const inputsRef = useRef<Record<number, HTMLInputElement | null>>({});\n\n    // Formatter helper\n    const internalFormatter = useCallback(\n      (txt: string) => (formatter ? formatter(txt) : txt),\n      [formatter]\n    );\n\n    // Value state\n    const [valueCells, setValueCells] = useState<string[]>(() =>\n      strToArr(internalFormatter(defaultValue || ''))\n    );\n\n    useEffect(() => {\n      if (value !== undefined) {\n        setValueCells(strToArr(value));\n      }\n    }, [value]);\n\n    // Imperative handle\n    React.useImperativeHandle(ref, () => ({\n      focus: () => {\n        // Focus first empty cell (or last cell if all filled)\n        let nextIndex = 0;\n        for (let i = 0; i < length; i += 1) {\n          if (!inputsRef.current[i]?.value) {\n            nextIndex = i;\n            break;\n          }\n          nextIndex = i;\n        }\n        inputsRef.current[nextIndex]?.focus();\n      },\n      blur: () => {\n        for (let i = 0; i < length; i += 1) {\n          inputsRef.current[i]?.blur();\n        }\n      },\n      nativeElement: containerRef.current,\n    }));\n\n    // Trigger onChange when value cells change\n    const triggerValueCellsChange = useCallback(\n      (nextValueCells: string[]) => {\n        setValueCells((prev) => {\n          const prevValue = prev.join('');\n          const nextValue = nextValueCells.join('');\n          if (onChange && prevValue !== nextValue) {\n            onChange(nextValue);\n          }\n          return nextValueCells;\n        });\n      },\n      [onChange]\n    );\n\n    // Patch value at given index\n    const patchValue = useCallback(\n      (index: number, txt: string) => {\n        let nextCells = [...valueCells];\n\n        // Fill cells till index\n        for (let i = 0; i < index; i += 1) {\n          if (!nextCells[i]) {\n            nextCells[i] = '';\n          }\n        }\n\n        if (txt.length <= 1) {\n          nextCells[index] = txt;\n        } else {\n          nextCells = nextCells.slice(0, index).concat(strToArr(txt));\n        }\n        nextCells = nextCells.slice(0, length);\n\n        // Clean trailing empty cells\n        for (let i = nextCells.length - 1; i >= 0; i -= 1) {\n          if (nextCells[i]) {\n            break;\n          }\n          nextCells.pop();\n        }\n\n        // Format if needed\n        const formattedValue = internalFormatter(\n          nextCells.map((c) => c || ' ').join('')\n        );\n        nextCells = strToArr(formattedValue).map((c, i) => {\n          if (c === ' ' && !nextCells[i]) {\n            return nextCells[i];\n          }\n          return c;\n        });\n\n        return nextCells;\n      },\n      [valueCells, length, internalFormatter]\n    );\n\n    // Handle input change\n    const onInputChange = useCallback(\n      (index: number, txt: string) => {\n        const nextCells = patchValue(index, txt);\n        const nextIndex = Math.min(index + txt.length, length - 1);\n        if (nextIndex !== index && nextCells[index] !== undefined) {\n          inputsRef.current[nextIndex]?.focus();\n        }\n        triggerValueCellsChange(nextCells);\n      },\n      [patchValue, length, triggerValueCellsChange]\n    );\n\n    // Handle active change (arrow keys, backspace)\n    const onInputActiveChange = useCallback(\n      (nextIndex: number) => {\n        const clampedIndex = Math.max(0, Math.min(nextIndex, length - 1));\n        inputsRef.current[clampedIndex]?.focus();\n      },\n      [length]\n    );\n\n    // Handle focus — keep focus on the interacted cell\n    const onInputFocus = useCallback(\n      (event: React.FocusEvent<HTMLInputElement>, index: number) => {\n        if (onFocus) {\n          (onFocus as React.FocusEventHandler<HTMLDivElement>)(event as unknown as React.FocusEvent<HTMLDivElement>);\n        }\n      },\n      [onFocus]\n    );\n\n    // Render separator\n    const renderSeparator = useMemo(() => {\n      if (!separator) return null;\n      return (index: number) => {\n        const separatorNode =\n          typeof separator === 'function' ? separator(index) : separator;\n        if (!separatorNode) return null;\n        return (\n          <span className={`${prefixCls}__separator`}>\n            {separatorNode}\n          </span>\n        );\n      };\n    }, [separator, prefixCls]);\n\n    const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n      [`${prefixCls}_disabled`]: disabled,\n    });\n\n    return (\n      <div\n        {...otherProps}\n        ref={containerRef}\n        className={cls}\n        style={style}\n        role=\"group\"\n      >\n        {Array.from({ length }).map((_, index) => {\n          const singleValue = valueCells[index] || '';\n          return (\n            <React.Fragment key={`otp-${index}`}>\n              <OTPInput\n                ref={(el) => {\n                  inputsRef.current[index] = el;\n                }}\n                index={index}\n                size={inputSize}\n                prefixCls={prefixCls}\n                value={singleValue}\n                disabled={disabled}\n                mask={mask}\n                autoFocus={index === 0 && autoFocus}\n                autoComplete={autoComplete}\n                onChange={onInputChange}\n                onActiveChange={onInputActiveChange}\n                onFocus={(e) => onInputFocus(e, index)}\n              />\n              {index < length - 1 && renderSeparator?.(index)}\n            </React.Fragment>\n          );\n        })}\n      </div>\n    );\n  }\n);\n\nInputOTP.displayName = 'InputOTP';\n\nexport default InputOTP;\n"],"mappings":"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"}

package/lib/input-otp/otp-input.js

@@ -0,0 +1,63 @@
+const require_runtime = require("../_virtual/_rolldown/runtime.js");
+let react = require("react");
+react = require_runtime.__toESM(react);
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/input-otp/otp-input.tsx
+const OTPInput = react.default.forwardRef((props, ref) => {
+	const { index, value, disabled, mask, size = "md", autoFocus, autoComplete, prefixCls, onChange, onActiveChange, onFocus } = props;
+	const inputRef = (0, react.useRef)(null);
+	const setRef = (0, react.useCallback)((el) => {
+		inputRef.current = el;
+		if (typeof ref === "function") ref(el);
+		else if (ref) ref.current = el;
+	}, [ref]);
+	const syncSelection = (0, react.useCallback)(() => {
+		requestAnimationFrame(() => {
+			const inputEle = inputRef.current;
+			if (document.activeElement === inputEle && inputEle) inputEle.select();
+		});
+	}, []);
+	const onInternalInput = (e) => {
+		onChange(index, e.target.value);
+	};
+	const onInternalFocus = (e) => {
+		onFocus?.(e);
+		syncSelection();
+	};
+	const onInternalKeyDown = (event) => {
+		const { key, ctrlKey, metaKey } = event;
+		if (key === "ArrowLeft") onActiveChange(index - 1);
+		else if (key === "ArrowRight") onActiveChange(index + 1);
+		else if (key === "z" && (ctrlKey || metaKey)) event.preventDefault();
+		else if (key === "Backspace" && !value) onActiveChange(index - 1);
+		syncSelection();
+	};
+	const displayValue = mask && typeof mask === "string" && value ? mask : value;
+	const inputType = mask === true ? "password" : "text";
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+		ref: setRef,
+		"aria-label": `OTP Input ${index + 1}`,
+		type: inputType,
+		inputMode: "numeric",
+		autoComplete: autoComplete || "one-time-code",
+		className: (0, classnames.default)(`${prefixCls}__cell`, `${prefixCls}__cell_${size}`, {
+			[`${prefixCls}__cell_disabled`]: disabled,
+			[`${prefixCls}__cell_mask`]: mask
+		}),
+		value: displayValue,
+		disabled,
+		autoFocus,
+		onInput: onInternalInput,
+		onFocus: onInternalFocus,
+		onKeyDown: onInternalKeyDown,
+		onMouseDown: syncSelection,
+		onMouseUp: syncSelection
+	});
+});
+OTPInput.displayName = "OTPInput";
+//#endregion
+exports.default = OTPInput;
+
+//# sourceMappingURL=otp-input.js.map

package/lib/input-otp/otp-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"otp-input.js","names":["React"],"sources":["../../src/input-otp/otp-input.tsx"],"sourcesContent":["import React, { useRef, useCallback } from 'react';\nimport classNames from 'classnames';\nimport { OTPInputCellProps } from './types';\n\nconst OTPInput = React.forwardRef<HTMLInputElement, OTPInputCellProps>(\n  (props, ref) => {\n    const {\n      index,\n      value,\n      disabled,\n      mask,\n      size = 'md',\n      autoFocus,\n      autoComplete,\n      prefixCls,\n      onChange,\n      onActiveChange,\n      onFocus,\n    } = props;\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    // Merge refs\n    const setRef = useCallback(\n      (el: HTMLInputElement | null) => {\n        inputRef.current = el;\n        if (typeof ref === 'function') {\n          ref(el);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current = el;\n        }\n      },\n      [ref]\n    );\n\n    const syncSelection = useCallback(() => {\n      requestAnimationFrame(() => {\n        const inputEle = inputRef.current;\n        if (document.activeElement === inputEle && inputEle) {\n          inputEle.select();\n        }\n      });\n    }, []);\n\n    const onInternalInput = (e: React.FormEvent<HTMLInputElement>): void => {\n      onChange(index, (e.target as HTMLInputElement).value);\n    };\n\n    const onInternalFocus: React.FocusEventHandler<HTMLInputElement> = (e) => {\n      onFocus?.(e);\n      syncSelection();\n    };\n\n    const onInternalKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (event) => {\n      const { key, ctrlKey, metaKey } = event;\n\n      if (key === 'ArrowLeft') {\n        onActiveChange(index - 1);\n      } else if (key === 'ArrowRight') {\n        onActiveChange(index + 1);\n      } else if (key === 'z' && (ctrlKey || metaKey)) {\n        event.preventDefault();\n      } else if (key === 'Backspace' && !value) {\n        onActiveChange(index - 1);\n      }\n\n      syncSelection();\n    };\n\n    const displayValue = mask && typeof mask === 'string' && value ? mask : value;\n    const inputType = mask === true ? 'password' : 'text';\n\n    return (\n      <input\n        ref={setRef}\n        aria-label={`OTP Input ${index + 1}`}\n        type={inputType}\n        inputMode=\"numeric\"\n        autoComplete={autoComplete || 'one-time-code'}\n        className={classNames(`${prefixCls}__cell`, `${prefixCls}__cell_${size}`, {\n          [`${prefixCls}__cell_disabled`]: disabled,\n          [`${prefixCls}__cell_mask`]: mask,\n        })}\n        value={displayValue}\n        disabled={disabled}\n        autoFocus={autoFocus}\n        onInput={onInternalInput}\n        onFocus={onInternalFocus}\n        onKeyDown={onInternalKeyDown}\n        onMouseDown={syncSelection}\n        onMouseUp={syncSelection}\n      />\n    );\n  }\n);\n\nOTPInput.displayName = 'OTPInput';\n\nexport default OTPInput;\n"],"mappings":";;;;;;;AAIA,MAAM,WAAWA,MAAAA,QAAM,YACpB,OAAO,QAAQ;CACd,MAAM,EACJ,OACA,OACA,UACA,MACA,OAAO,MACP,WACA,cACA,WACA,UACA,gBACA,YACE;CAEJ,MAAM,YAAA,GAAA,MAAA,QAA2C,KAAK;CAGtD,MAAM,UAAA,GAAA,MAAA,cACH,OAAgC;AAC/B,WAAS,UAAU;AACnB,MAAI,OAAO,QAAQ,WACjB,KAAI,GAAG;WACE,IACR,KAAwD,UAAU;IAGvE,CAAC,IAAI,CACN;CAED,MAAM,iBAAA,GAAA,MAAA,mBAAkC;AACtC,8BAA4B;GAC1B,MAAM,WAAW,SAAS;AAC1B,OAAI,SAAS,kBAAkB,YAAY,SACzC,UAAS,QAAQ;IAEnB;IACD,EAAE,CAAC;CAEN,MAAM,mBAAmB,MAA+C;AACtE,WAAS,OAAQ,EAAE,OAA4B,MAAM;;CAGvD,MAAM,mBAA8D,MAAM;AACxE,YAAU,EAAE;AACZ,iBAAe;;CAGjB,MAAM,qBAAmE,UAAU;EACjF,MAAM,EAAE,KAAK,SAAS,YAAY;AAElC,MAAI,QAAQ,YACV,gBAAe,QAAQ,EAAE;WAChB,QAAQ,aACjB,gBAAe,QAAQ,EAAE;WAChB,QAAQ,QAAQ,WAAW,SACpC,OAAM,gBAAgB;WACb,QAAQ,eAAe,CAAC,MACjC,gBAAe,QAAQ,EAAE;AAG3B,iBAAe;;CAGjB,MAAM,eAAe,QAAQ,OAAO,SAAS,YAAY,QAAQ,OAAO;CACxE,MAAM,YAAY,SAAS,OAAO,aAAa;AAE/C,QACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;EACE,KAAK;EACL,cAAY,aAAa,QAAQ;EACjC,MAAM;EACN,WAAU;EACV,cAAc,gBAAgB;EAC9B,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,SAAS,GAAG,UAAU,SAAS,QAAQ;IACvE,GAAG,UAAU,mBAAmB;IAChC,GAAG,UAAU,eAAe;GAC9B,CAAC;EACF,OAAO;EACG;EACC;EACX,SAAS;EACT,SAAS;EACT,WAAW;EACX,aAAa;EACb,WAAW;EACX,CAAA;EAGP;AAED,SAAS,cAAc"}

package/lib/input-otp/style/_index.scss

@@ -0,0 +1,53 @@
+@use '../../style/variables' as *;
+@use '../../input/style/mixin' as *;
+
+.#{$prefix}-input-otp {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+
+  &__cell {
+    @include input-default;
+
+    width: 36px;
+    height: 36px;
+    text-align: center;
+    padding: 0;
+    font-size: $input-md-font-size;
+    border-radius: $input-border-radius;
+    caret-color: currentcolor;
+
+    &_sm {
+      width: 28px;
+      height: 28px;
+      font-size: $input-sm-font-size;
+    }
+
+    &_md {
+      width: 36px;
+      height: 36px;
+      font-size: $input-md-font-size;
+    }
+
+    &_lg {
+      width: 44px;
+      height: 44px;
+      font-size: $input-lg-font-size;
+    }
+
+    &_disabled {
+      @include input-default-disabled;
+    }
+  }
+
+  &__separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--ty-color-text-secondary);
+    font-size: $font-size-base;
+  }
+
+  &_disabled {
+    cursor: not-allowed;
+  }
+}

package/lib/input-otp/style/index.css

@@ -0,0 +1,71 @@
+.ty-input-otp {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.ty-input-otp__cell {
+  box-sizing: border-box;
+  width: 100%;
+  margin: 0;
+  color: var(--ty-color-text);
+  border: 1px solid var(--ty-input-border);
+  transition: all 0.3s;
+  outline: 0;
+  border-radius: 2px;
+  font-size: 1rem;
+  background-color: var(--ty-input-bg);
+}
+.ty-input-otp__cell:hover {
+  border-color: var(--ty-color-primary);
+}
+.ty-input-otp__cell:focus {
+  border-color: var(--ty-input-focus-border);
+  box-shadow: var(--ty-input-focus-shadow);
+}
+.ty-input-otp__cell::-moz-placeholder {
+  color: var(--ty-color-text-placeholder);
+}
+.ty-input-otp__cell::placeholder {
+  color: var(--ty-color-text-placeholder);
+}
+.ty-input-otp__cell {
+  width: 36px;
+  height: 36px;
+  text-align: center;
+  padding: 0;
+  font-size: 1rem;
+  border-radius: 2px;
+  caret-color: currentcolor;
+}
+.ty-input-otp__cell_sm {
+  width: 28px;
+  height: 28px;
+  font-size: 0.875rem;
+}
+.ty-input-otp__cell_md {
+  width: 36px;
+  height: 36px;
+  font-size: 1rem;
+}
+.ty-input-otp__cell_lg {
+  width: 44px;
+  height: 44px;
+  font-size: 1.25rem;
+}
+.ty-input-otp__cell_disabled {
+  cursor: not-allowed;
+  background-color: var(--ty-input-disabled-bg);
+  color: var(--ty-input-disabled-color);
+}
+.ty-input-otp__cell_disabled:hover {
+  border-color: var(--ty-input-border);
+}
+.ty-input-otp__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--ty-color-text-secondary);
+  font-size: 1rem;
+}
+.ty-input-otp_disabled {
+  cursor: not-allowed;
+}

package/lib/input-otp/style/index.d.ts

@@ -0,0 +1 @@
+export { };

package/lib/input-otp/style/index.js

@@ -0,0 +1 @@
+require("./index.css");

package/lib/input-otp/types.d.ts

@@ -0,0 +1,31 @@
+import { BaseProps, SizeType } from "../_utils/props.js";
+import React from "react";
+
+//#region src/input-otp/types.d.ts
+interface InputOTPProps extends BaseProps, Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'onInput'> {
+  /** Number of OTP input cells */
+  length?: number;
+  /** Size of the input */
+  size?: SizeType;
+  /** Default value of the OTP input */
+  defaultValue?: string;
+  /** Controlled value of the OTP input */
+  value?: string;
+  /** Callback when all cells are filled */
+  onChange?: (value: string) => void;
+  /** Custom formatter to restrict/modify input */
+  formatter?: (value: string) => string;
+  /** Separator element between cells */
+  separator?: ((index: number) => React.ReactNode) | React.ReactNode;
+  /** Whether the input is disabled */
+  disabled?: boolean;
+  /** Whether to mask the values, or a custom mask character */
+  mask?: boolean | string;
+  /** Auto focus the first cell on mount */
+  autoFocus?: boolean;
+  /** Autocomplete attribute */
+  autoComplete?: string;
+}
+//#endregion
+export { InputOTPProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/style/_component.scss

@@ -28,6 +28,7 @@
 @use "../image/style/index" as *;
 @use "../input/style/index" as *;
 @use "../input-number/style/index" as *;
+@use "../input-otp/style/index" as *;
 @use "../input-password/style/index" as *;
 @use "../layout/style/index" as *;
 @use "../link/style/index" as *;
@@ -75,4 +76,4 @@
 @use "../tree/style/index" as *;
 @use "../typography/style/index" as *;
 @use "../upload/style/index" as *;
-@use "../with-spin/style/index" as *;
+@use "../with-spin/style/index" as *;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-design/react",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "description": "A friendly UI component set for React",
   "license": "MIT",
   "keywords": [
@@ -55,8 +55,8 @@
     "classnames": "^2.3.1",
     "react-transition-group": "^4.4.2",
     "tslib": "^2.3.1",
-    "@tiny-design/icons": "1.0.10",
-    "@tiny-design/tokens": "1.0.10"
+    "@tiny-design/icons": "1.1.0",
+    "@tiny-design/tokens": "1.1.0"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.0.0",