@tiny-design/react 1.0.11 → 1.1.1

package/lib/index.js

@@ -5,83 +5,84 @@ const require_index$1 = require("./alert/index.js");
 const require_index$2 = require("./sticky/index.js");
 const require_index$3 = require("./anchor/index.js");
 const require_index$4 = require("./aspect-ratio/index.js");
-const require_auto_complete = require("./auto-complete/auto-complete.js");
-const require_index$5 = require("./avatar/index.js");
-const require_index$6 = require("./back-top/index.js");
-const require_index$7 = require("./badge/index.js");
-const require_index$8 = require("./breadcrumb/index.js");
-const require_index$9 = require("./button/index.js");
+const require_index$5 = require("./auto-complete/index.js");
+const require_index$6 = require("./avatar/index.js");
+const require_index$7 = require("./back-top/index.js");
+const require_index$8 = require("./badge/index.js");
+const require_index$9 = require("./breadcrumb/index.js");
+const require_index$10 = require("./button/index.js");
 const require_en_US = require("./locale/en_US.js");
 const require_use_locale = require("./_utils/use-locale.js");
-const require_index$10 = require("./calendar/index.js");
-const require_index$11 = require("./card/index.js");
-const require_index$12 = require("./carousel/index.js");
-const require_index$13 = require("./cascader/index.js");
-const require_index$14 = require("./checkbox/index.js");
-const require_index$15 = require("./intl-provider/index.js");
-const require_index$16 = require("./config-provider/index.js");
-const require_index$17 = require("./copy-to-clipboard/index.js");
-const require_index$18 = require("./col/index.js");
-const require_index$19 = require("./collapse/index.js");
-const require_index$20 = require("./color-picker/index.js");
-const require_index$21 = require("./countdown/index.js");
-const require_index$22 = require("./date-picker/index.js");
-const require_index$23 = require("./descriptions/index.js");
-const require_index$24 = require("./divider/index.js");
-const require_index$25 = require("./dropdown/index.js");
-const require_index$26 = require("./overlay/index.js");
-const require_index$27 = require("./drawer/index.js");
-const require_index$28 = require("./empty/index.js");
-const require_index$29 = require("./flex/index.js");
-const require_index$30 = require("./flip/index.js");
-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$11 = require("./calendar/index.js");
+const require_index$12 = require("./card/index.js");
+const require_index$13 = require("./carousel/index.js");
+const require_index$14 = require("./cascader/index.js");
+const require_index$15 = require("./checkbox/index.js");
+const require_index$16 = require("./intl-provider/index.js");
+const require_index$17 = require("./config-provider/index.js");
+const require_index$18 = require("./copy-to-clipboard/index.js");
+const require_index$19 = require("./col/index.js");
+const require_index$20 = require("./collapse/index.js");
+const require_index$21 = require("./color-picker/index.js");
+const require_index$22 = require("./countdown/index.js");
+const require_index$23 = require("./date-picker/index.js");
+const require_index$24 = require("./descriptions/index.js");
+const require_index$25 = require("./divider/index.js");
+const require_index$26 = require("./dropdown/index.js");
+const require_index$27 = require("./overlay/index.js");
+const require_index$28 = require("./drawer/index.js");
+const require_index$29 = require("./empty/index.js");
+const require_index$30 = require("./flex/index.js");
+const require_index$31 = require("./flip/index.js");
+const require_index$32 = require("./form/index.js");
+const require_index$33 = require("./image/index.js");
+const require_index$34 = require("./input/index.js");
+const require_index$35 = require("./input-number/index.js");
+const require_index$36 = require("./input-otp/index.js");
+const require_index$37 = require("./input-password/index.js");
+const require_index$38 = require("./keyboard/index.js");
+const require_index$39 = require("./layout/index.js");
+const require_index$40 = require("./link/index.js");
+const require_index$41 = require("./pagination/index.js");
+const require_index$42 = require("./list/index.js");
+const require_index$43 = require("./loader/index.js");
+const require_index$44 = require("./loading-bar/index.js");
+const require_index$45 = require("./menu/index.js");
+const require_index$46 = require("./message/index.js");
+const require_index$47 = require("./native-select/index.js");
+const require_index$48 = require("./row/index.js");
+const require_index$49 = require("./modal/index.js");
+const require_index$50 = require("./notification/index.js");
+const require_index$51 = require("./popover/index.js");
+const require_index$52 = require("./pop-confirm/index.js");
+const require_index$53 = require("./progress/index.js");
+const require_index$54 = require("./radio/index.js");
+const require_index$55 = require("./rate/index.js");
+const require_index$56 = require("./result/index.js");
+const require_index$57 = require("./scroll-indicator/index.js");
+const require_index$58 = require("./segmented/index.js");
+const require_index$59 = require("./select/index.js");
+const require_index$60 = require("./skeleton/index.js");
+const require_index$61 = require("./tooltip/index.js");
+const require_index$62 = require("./slider/index.js");
+const require_index$63 = require("./split/index.js");
+const require_index$64 = require("./split-button/index.js");
+const require_index$65 = require("./space/index.js");
+const require_index$66 = require("./speed-dial/index.js");
+const require_index$67 = require("./steps/index.js");
+const require_index$68 = require("./statistic/index.js");
+const require_index$69 = require("./strength-indicator/index.js");
+const require_index$70 = require("./switch/index.js");
+const require_index$71 = require("./table/index.js");
+const require_index$72 = require("./tabs/index.js");
+const require_index$73 = require("./tag/index.js");
+const require_index$74 = require("./textarea/index.js");
+const require_index$75 = require("./timeline/index.js");
+const require_index$76 = require("./time-picker/index.js");
+const require_index$77 = require("./transfer/index.js");
+const require_index$78 = require("./tree/index.js");
+const require_index$79 = require("./typography/index.js");
+const require_index$80 = 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");
@@ -89,83 +90,84 @@ const require_use_theme = require("./_utils/use-theme.js");
 exports.Alert = require_index$1;
 exports.Anchor = require_index$3;
 exports.AspectRatio = require_index$4;
-exports.AutoComplete = require_auto_complete;
-exports.Avatar = require_index$5;
-exports.BackTop = require_index$6;
-exports.Badge = require_index$7;
-exports.Breadcrumb = require_index$8;
-exports.Button = require_index$9;
-exports.Calendar = require_index$10;
-exports.Card = require_index$11;
-exports.Carousel = require_index$12;
-exports.Cascader = require_index$13;
-exports.Checkbox = require_index$14;
-exports.Col = require_index$18;
-exports.Collapse = require_index$19;
-exports.ColorPicker = require_index$20;
-exports.ConfigProvider = require_index$16;
-exports.CopyToClipboard = require_index$17;
-exports.Countdown = require_index$21;
-exports.DatePicker = require_index$22;
-exports.Descriptions = require_index$23;
-exports.Divider = require_index$24;
-exports.Drawer = require_index$27;
-exports.Dropdown = require_index$25;
-exports.Empty = require_index$28;
-exports.Flex = require_index$29;
-exports.Flip = require_index$30;
-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.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.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.AutoComplete = require_index$5;
+exports.Avatar = require_index$6;
+exports.BackTop = require_index$7;
+exports.Badge = require_index$8;
+exports.Breadcrumb = require_index$9;
+exports.Button = require_index$10;
+exports.Calendar = require_index$11;
+exports.Card = require_index$12;
+exports.Carousel = require_index$13;
+exports.Cascader = require_index$14;
+exports.Checkbox = require_index$15;
+exports.Col = require_index$19;
+exports.Collapse = require_index$20;
+exports.ColorPicker = require_index$21;
+exports.ConfigProvider = require_index$17;
+exports.CopyToClipboard = require_index$18;
+exports.Countdown = require_index$22;
+exports.DatePicker = require_index$23;
+exports.Descriptions = require_index$24;
+exports.Divider = require_index$25;
+exports.Drawer = require_index$28;
+exports.Dropdown = require_index$26;
+exports.Empty = require_index$29;
+exports.Flex = require_index$30;
+exports.Flip = require_index$31;
+exports.Form = require_index$32;
+exports.Image = require_index$33;
+exports.Input = require_index$34;
+exports.InputNumber = require_index$35;
+exports.InputOTP = require_index$36;
+exports.InputPassword = require_index$37;
+exports.IntlProvider = require_index$16;
+exports.Keyboard = require_index$38;
+exports.Layout = require_index$39;
+exports.Link = require_index$40;
+exports.List = require_index$42;
+exports.Loader = require_index$43;
+exports.LoadingBar = require_index$44;
+exports.Menu = require_index$45;
+exports.Message = require_index$46;
+exports.Modal = require_index$49;
+exports.NativeSelect = require_index$47;
+exports.Notification = require_index$50;
+exports.Overlay = require_index$27;
+exports.Pagination = require_index$41;
+exports.PopConfirm = require_index$52;
+exports.Popover = require_index$51;
+exports.Progress = require_index$53;
+exports.Radio = require_index$54;
+exports.Rate = require_index$55;
+exports.Result = require_index$56;
+exports.Row = require_index$48;
+exports.ScrollIndicator = require_index$57;
+exports.Segmented = require_index$58;
+exports.Select = require_index$59;
+exports.Skeleton = require_index$60;
+exports.Slider = require_index$62;
+exports.Space = require_index$65;
+exports.SpeedDial = require_index$66;
+exports.Split = require_index$63;
+exports.SplitButton = require_index$64;
+exports.Statistic = require_index$68;
+exports.Steps = require_index$67;
 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$69;
+exports.Switch = require_index$70;
+exports.Table = require_index$71;
+exports.Tabs = require_index$72;
+exports.Tag = require_index$73;
+exports.Textarea = require_index$74;
+exports.TimePicker = require_index$76;
+exports.Timeline = require_index$75;
+exports.Tooltip = require_index$61;
+exports.Transfer = require_index$77;
 exports.Transition = require_index;
-exports.Tree = require_index$76;
-exports.Typography = require_index$77;
-exports.Upload = require_index$78;
+exports.Tree = require_index$78;
+exports.Typography = require_index$79;
+exports.Upload = require_index$80;
 exports.en_US = require_en_US;
 exports.useLocale = require_use_locale.useLocale;
 exports.useTheme = require_use_theme.useTheme;

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;
+  }
+}