@tiny-design/react 1.4.0 → 1.5.1

package/lib/index.js

@@ -47,43 +47,44 @@ 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_index$81 = require("./waterfall/index.js");
+const require_index$45 = require("./marquee/index.js");
+const require_index$46 = require("./menu/index.js");
+const require_index$47 = require("./message/index.js");
+const require_index$48 = require("./native-select/index.js");
+const require_index$49 = require("./row/index.js");
+const require_index$50 = require("./modal/index.js");
+const require_index$51 = require("./notification/index.js");
+const require_index$52 = require("./popover/index.js");
+const require_index$53 = require("./pop-confirm/index.js");
+const require_index$54 = require("./progress/index.js");
+const require_index$55 = require("./radio/index.js");
+const require_index$56 = require("./rate/index.js");
+const require_index$57 = require("./result/index.js");
+const require_index$58 = require("./scroll-indicator/index.js");
+const require_index$59 = require("./segmented/index.js");
+const require_index$60 = require("./select/index.js");
+const require_index$61 = require("./skeleton/index.js");
+const require_index$62 = require("./tooltip/index.js");
+const require_index$63 = require("./slider/index.js");
+const require_index$64 = require("./split/index.js");
+const require_index$65 = require("./split-button/index.js");
+const require_index$66 = require("./space/index.js");
+const require_index$67 = require("./speed-dial/index.js");
+const require_index$68 = require("./steps/index.js");
+const require_index$69 = require("./statistic/index.js");
+const require_index$70 = require("./strength-indicator/index.js");
+const require_index$71 = require("./switch/index.js");
+const require_index$72 = require("./table/index.js");
+const require_index$73 = require("./tabs/index.js");
+const require_index$74 = require("./tag/index.js");
+const require_index$75 = require("./textarea/index.js");
+const require_index$76 = require("./timeline/index.js");
+const require_index$77 = require("./time-picker/index.js");
+const require_index$78 = require("./transfer/index.js");
+const require_index$79 = require("./tree/index.js");
+const require_index$80 = require("./typography/index.js");
+const require_index$81 = require("./upload/index.js");
+const require_index$82 = require("./waterfall/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");
@@ -129,47 +130,48 @@ 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.Marquee = require_index$45;
+exports.Menu = require_index$46;
+exports.Message = require_index$47;
+exports.Modal = require_index$50;
+exports.NativeSelect = require_index$48;
+exports.Notification = require_index$51;
 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.PopConfirm = require_index$53;
+exports.Popover = require_index$52;
+exports.Progress = require_index$54;
+exports.Radio = require_index$55;
+exports.Rate = require_index$56;
+exports.Result = require_index$57;
+exports.Row = require_index$49;
+exports.ScrollIndicator = require_index$58;
+exports.Segmented = require_index$59;
+exports.Select = require_index$60;
+exports.Skeleton = require_index$61;
+exports.Slider = require_index$63;
+exports.Space = require_index$66;
+exports.SpeedDial = require_index$67;
+exports.Split = require_index$64;
+exports.SplitButton = require_index$65;
+exports.Statistic = require_index$69;
+exports.Steps = require_index$68;
 exports.Sticky = require_index$2;
-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.StrengthIndicator = require_index$70;
+exports.Switch = require_index$71;
+exports.Table = require_index$72;
+exports.Tabs = require_index$73;
+exports.Tag = require_index$74;
+exports.Textarea = require_index$75;
+exports.TimePicker = require_index$77;
+exports.Timeline = require_index$76;
+exports.Tooltip = require_index$62;
+exports.Transfer = require_index$78;
 exports.Transition = require_index;
-exports.Tree = require_index$78;
-exports.Typography = require_index$79;
-exports.Upload = require_index$80;
-exports.Waterfall = require_index$81;
+exports.Tree = require_index$79;
+exports.Typography = require_index$80;
+exports.Upload = require_index$81;
+exports.Waterfall = require_index$82;
 exports.en_US = require_en_US;
 exports.useLocale = require_use_locale.useLocale;
 exports.useTheme = require_use_theme.useTheme;

package/lib/input/style/_index.scss

@@ -4,10 +4,11 @@
 .#{$prefix}-input {
   position: relative;
   box-sizing: border-box;
+  width: 100%;
   color: var(--ty-color-text);
 
   &__input {
-    @include input-default();
+    @include input-default;
   }
 
   &__prefix,
@@ -77,7 +78,7 @@
 
   &_disabled {
     .#{$prefix}-input__input {
-      @include input-default-disabled();
+      @include input-default-disabled;
     }
   }
 }
@@ -124,7 +125,7 @@
       }
     }
 
-    &:not(:first-child):not(:last-child) {
+    &:not(:first-child, :last-child) {
       .#{$prefix}-input__input {
         border-radius: 0;
       }
@@ -166,7 +167,7 @@
     border-top-left-radius: 0;
   }
 
-  &:not(:first-child):not(:last-child) {
+  &:not(:first-child, :last-child) {
     border-radius: 0;
     border-left: 0;
     border-right: 0;

package/lib/input/style/_mixin.scss

@@ -10,7 +10,7 @@
   transition: all 0.3s;
   outline: 0;
   border-radius: $input-border-radius;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   background-color: var(--ty-input-bg);
 
   &:hover {

package/lib/input/style/index.css

@@ -1,6 +1,7 @@
 .ty-input {
   position: relative;
   box-sizing: border-box;
+  width: 100%;
   color: var(--ty-color-text);
 }
 .ty-input__input {
@@ -11,8 +12,8 @@
   border: 1px solid var(--ty-input-border);
   transition: all 0.3s;
   outline: 0;
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   background-color: var(--ty-input-bg);
 }
 .ty-input__input:hover {
@@ -51,25 +52,25 @@
   cursor: pointer;
 }
 .ty-input_sm .ty-input__input {
-  font-size: 0.875rem;
-  height: 24px;
-  line-height: 24px;
+  font-size: var(--ty-font-size-sm);
+  height: var(--ty-height-sm);
+  line-height: var(--ty-height-sm);
 }
 .ty-input_sm .ty-input__clear-btn {
   transform: scale(0.7);
 }
 .ty-input_md .ty-input__input {
-  font-size: 1rem;
-  height: 32px;
-  line-height: 32px;
+  font-size: var(--ty-font-size-base);
+  height: var(--ty-height-md);
+  line-height: var(--ty-height-md);
 }
 .ty-input_md .ty-input__clear-btn {
   transform: scale(0.8);
 }
 .ty-input_lg .ty-input__input {
-  font-size: 1.25rem;
-  height: 42px;
-  line-height: 42px;
+  font-size: var(--ty-font-size-lg);
+  height: var(--ty-height-lg);
+  line-height: var(--ty-height-lg);
 }
 .ty-input_disabled .ty-input__input {
   cursor: not-allowed;
@@ -92,13 +93,13 @@
   justify-content: center;
 }
 .ty-input-group_sm {
-  height: 24px;
+  height: var(--ty-height-sm);
 }
 .ty-input-group_md {
-  height: 32px;
+  height: var(--ty-height-md);
 }
 .ty-input-group_lg {
-  height: 42px;
+  height: var(--ty-height-lg);
 }
 .ty-input-group .ty-input {
   z-index: 1;
@@ -112,7 +113,7 @@
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
-.ty-input-group .ty-input:not(:first-child):not(:last-child) .ty-input__input {
+.ty-input-group .ty-input:not(:first-child, :last-child) .ty-input__input {
   border-radius: 0;
 }
 
@@ -122,18 +123,18 @@
   box-sizing: border-box;
   text-align: center;
   line-height: 1;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text);
   padding: 0 7px;
 }
 .ty-input-group-addon_sm {
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-input-group-addon_md {
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-input-group-addon_lg {
-  font-size: 1.25rem;
+  font-size: var(--ty-font-size-lg);
 }
 .ty-input-group-addon:first-child {
   border-right: 0;
@@ -145,7 +146,7 @@
   border-bottom-left-radius: 0;
   border-top-left-radius: 0;
 }
-.ty-input-group-addon:not(:first-child):not(:last-child) {
+.ty-input-group-addon:not(:first-child, :last-child) {
   border-radius: 0;
   border-left: 0;
   border-right: 0;

package/lib/input-number/input-number.js

@@ -15,8 +15,12 @@ let react_jsx_runtime = require("react/jsx-runtime");
 const isValid = (val) => {
 	return !isNaN(+val);
 };
+const getDecimalPrecision = (num) => {
+	const str = String(num);
+	const dotIndex = str.indexOf(".");
+	return dotIndex === -1 ? 0 : str.length - dotIndex - 1;
+};
 const toPrecision = (val, precision) => {
-	if (precision === void 0) return val;
 	return parseFloat(val.toFixed(precision));
 };
 const InputNumber = react.default.forwardRef((props, ref) => {
@@ -27,16 +31,18 @@ const InputNumber = react.default.forwardRef((props, ref) => {
 		[`${prefixCls}_disabled`]: disabled,
 		[`${prefixCls}_always-controls`]: controls
 	});
+	const resolvedPrecision = precision ?? Math.max(getDecimalPrecision(step), getDecimalPrecision(defaultValue));
 	const [value, setValue] = (0, react.useState)("value" in props ? props.value : defaultValue);
 	const inputOnChange = (e) => {
-		const val = toPrecision(Number(e.target.value.trim()), precision);
+		const raw = Number(e.target.value.trim());
+		const val = resolvedPrecision > 0 ? toPrecision(raw, resolvedPrecision) : raw;
 		!("value" in props) && setValue(val);
 		onChange && isValid(val) && onChange(val, e);
 	};
 	const plusOnClick = (e) => {
 		e.stopPropagation();
 		if (!disabled && isValid(step)) {
-			const val = toPrecision(+value + +step, precision);
+			const val = toPrecision(+value + +step, resolvedPrecision);
 			if (val <= max) {
 				!("value" in props) && setValue(val);
 				onChange && onChange(val, e);
@@ -46,7 +52,7 @@ const InputNumber = react.default.forwardRef((props, ref) => {
 	const minusOnClick = (e) => {
 		e.stopPropagation();
 		if (!disabled && isValid(step)) {
-			const val = toPrecision(+value - +step, precision);
+			const val = toPrecision(+value - +step, resolvedPrecision);
 			if (val >= min) {
 				!("value" in props) && setValue(val);
 				onChange && onChange(val, e);
@@ -63,7 +69,7 @@ const InputNumber = react.default.forwardRef((props, ref) => {
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 			autoComplete: "off",
 			disabled,
-			value: precision !== void 0 ? value.toFixed(precision) : value,
+			value: resolvedPrecision > 0 ? value.toFixed(resolvedPrecision) : value,
 			type: "number",
 			className: `${prefixCls}__input`,
 			max,

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

@@ -1 +1 @@
-{"version":3,"file":"input-number.js","names":["React","ConfigContext","getPrefixCls","ArrowDown"],"sources":["../../src/input-number/input-number.tsx"],"sourcesContent":["import React, { useEffect, useState, MouseEvent, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputNumberProps } from './types';\nimport { ArrowDown } from '../_utils/components';\n\n/**\n * Valid the string is a number\n * @param val\n */\nconst isValid = (val: string | number): boolean => {\n  return !isNaN(+val);\n};\n\nconst toPrecision = (val: number, precision?: number): number => {\n  if (precision === undefined) return val;\n  return parseFloat(val.toFixed(precision));\n};\n\nconst InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>((props, ref) => {\n  const {\n    size = 'md',\n    disabled = false,\n    defaultValue = 0,\n    step = 1,\n    precision,\n    controls = false,\n    min = Number.NEGATIVE_INFINITY,\n    max = Number.POSITIVE_INFINITY,\n    onChange,\n    className,\n    prefixCls: customisedCls,\n    style,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('input-number', configContext.prefixCls, customisedCls);\n  const inputSize = props.size || configContext.componentSize || size;\n  const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n    [`${prefixCls}_disabled`]: disabled,\n    [`${prefixCls}_always-controls`]: controls,\n  });\n  const [value, setValue] = useState<number>(\n    'value' in props ? (props.value as number) : defaultValue\n  );\n\n  const inputOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const raw = Number(e.target.value.trim());\n    const val = toPrecision(raw, precision);\n    !('value' in props) && setValue(val);\n    onChange && isValid(val) && onChange(val, e);\n  };\n\n  const plusOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    e.stopPropagation();\n    if (!disabled && isValid(step)) {\n      const val = toPrecision(+value + +step, precision);\n      if (val <= max) {\n        !('value' in props) && setValue(val);\n        onChange && onChange(val, e);\n      }\n    }\n  };\n\n  const minusOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    e.stopPropagation();\n    if (!disabled && isValid(step)) {\n      const val = toPrecision(+value - +step, precision);\n      if (val >= min) {\n        !('value' in props) && setValue(val);\n        onChange && onChange(val, e);\n      }\n    }\n  };\n\n  useEffect(() => {\n    'value' in props && setValue(props.value as number);\n  }, [props]);\n\n  return (\n    <div ref={ref} className={cls} style={style}>\n      <input\n        autoComplete=\"off\"\n        disabled={disabled}\n        value={precision !== undefined ? value.toFixed(precision) : value}\n        type=\"number\"\n        className={`${prefixCls}__input`}\n        max={max}\n        min={min}\n        step={step}\n        onChange={inputOnChange}\n        aria-valuenow={value}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-disabled={disabled}\n      />\n      <div className={`${prefixCls}__controls`}>\n        <span className={`${prefixCls}__up`} onClick={plusOnClick}>\n          <ArrowDown size={8} className={`${prefixCls}__icon ${prefixCls}__icon_reverse`} />\n        </span>\n        <span className={`${prefixCls}__down`} onClick={minusOnClick}>\n          <ArrowDown size={8} className={`${prefixCls}__icon`} />\n        </span>\n      </div>\n    </div>\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":";;;;;;;;;;;;;;AAWA,MAAM,WAAW,QAAkC;AACjD,QAAO,CAAC,MAAM,CAAC,IAAI;;AAGrB,MAAM,eAAe,KAAa,cAA+B;AAC/D,KAAI,cAAc,KAAA,EAAW,QAAO;AACpC,QAAO,WAAW,IAAI,QAAQ,UAAU,CAAC;;AAG3C,MAAM,cAAcA,MAAAA,QAAM,YAA8C,OAAO,QAAQ;CACrF,MAAM,EACJ,OAAO,MACP,WAAW,OACX,eAAe,GACf,OAAO,GACP,WACA,WAAW,OACX,MAAM,OAAO,mBACb,MAAM,OAAO,mBACb,UACA,WACA,WAAW,eACX,UACE;CACJ,MAAM,iBAAA,GAAA,MAAA,YAA2BC,uBAAAA,cAAc;CAC/C,MAAM,YAAYC,gBAAAA,aAAa,gBAAgB,cAAc,WAAW,cAAc;CAEtF,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,GAAG,UAAU,GADxC,MAAM,QAAQ,cAAc,iBAAiB,QACW;GACvE,GAAG,UAAU,aAAa;GAC1B,GAAG,UAAU,oBAAoB;EACnC,CAAC;CACF,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UACZ,WAAW,QAAS,MAAM,QAAmB,aAC9C;CAED,MAAM,iBAAiB,MAAiD;EAEtE,MAAM,MAAM,YADA,OAAO,EAAE,OAAO,MAAM,MAAM,CAAC,EACZ,UAAU;AACvC,IAAE,WAAW,UAAU,SAAS,IAAI;AACpC,cAAY,QAAQ,IAAI,IAAI,SAAS,KAAK,EAAE;;CAG9C,MAAM,eAAe,MAAyC;AAC5D,IAAE,iBAAiB;AACnB,MAAI,CAAC,YAAY,QAAQ,KAAK,EAAE;GAC9B,MAAM,MAAM,YAAY,CAAC,QAAQ,CAAC,MAAM,UAAU;AAClD,OAAI,OAAO,KAAK;AACd,MAAE,WAAW,UAAU,SAAS,IAAI;AACpC,gBAAY,SAAS,KAAK,EAAE;;;;CAKlC,MAAM,gBAAgB,MAAyC;AAC7D,IAAE,iBAAiB;AACnB,MAAI,CAAC,YAAY,QAAQ,KAAK,EAAE;GAC9B,MAAM,MAAM,YAAY,CAAC,QAAQ,CAAC,MAAM,UAAU;AAClD,OAAI,OAAO,KAAK;AACd,MAAE,WAAW,UAAU,SAAS,IAAI;AACpC,gBAAY,SAAS,KAAK,EAAE;;;;AAKlC,EAAA,GAAA,MAAA,iBAAgB;AACd,aAAW,SAAS,SAAS,MAAM,MAAgB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAU;EAAK,WAAW;EAAY;YAAtC,CACE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,cAAa;GACH;GACV,OAAO,cAAc,KAAA,IAAY,MAAM,QAAQ,UAAU,GAAG;GAC5D,MAAK;GACL,WAAW,GAAG,UAAU;GACnB;GACA;GACC;GACN,UAAU;GACV,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,CAAA,EACF,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAW,GAAG,UAAU;aAA7B,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,GAAG,UAAU;IAAO,SAAS;cAC5C,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,WAAD;KAAW,MAAM;KAAG,WAAW,GAAG,UAAU,SAAS,UAAU;KAAmB,CAAA;IAC7E,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAW,GAAG,UAAU;IAAS,SAAS;cAC9C,iBAAA,GAAA,kBAAA,KAACA,mBAAAA,WAAD;KAAW,MAAM;KAAG,WAAW,GAAG,UAAU;KAAW,CAAA;IAClD,CAAA,CACH;KACF;;EAER;AAEF,YAAY,cAAc"}
+{"version":3,"file":"input-number.js","names":["React","ConfigContext","getPrefixCls","ArrowDown"],"sources":["../../src/input-number/input-number.tsx"],"sourcesContent":["import React, { useEffect, useState, MouseEvent, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { InputNumberProps } from './types';\nimport { ArrowDown } from '../_utils/components';\n\n/**\n * Valid the string is a number\n * @param val\n */\nconst isValid = (val: string | number): boolean => {\n  return !isNaN(+val);\n};\n\nconst getDecimalPrecision = (num: number): number => {\n  const str = String(num);\n  const dotIndex = str.indexOf('.');\n  return dotIndex === -1 ? 0 : str.length - dotIndex - 1;\n};\n\nconst toPrecision = (val: number, precision: number): number => {\n  return parseFloat(val.toFixed(precision));\n};\n\nconst InputNumber = React.forwardRef<HTMLDivElement, InputNumberProps>((props, ref) => {\n  const {\n    size = 'md',\n    disabled = false,\n    defaultValue = 0,\n    step = 1,\n    precision,\n    controls = false,\n    min = Number.NEGATIVE_INFINITY,\n    max = Number.POSITIVE_INFINITY,\n    onChange,\n    className,\n    prefixCls: customisedCls,\n    style,\n  } = props;\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('input-number', configContext.prefixCls, customisedCls);\n  const inputSize = props.size || configContext.componentSize || size;\n  const cls = classNames(prefixCls, className, `${prefixCls}_${inputSize}`, {\n    [`${prefixCls}_disabled`]: disabled,\n    [`${prefixCls}_always-controls`]: controls,\n  });\n  const resolvedPrecision = precision ?? Math.max(getDecimalPrecision(step), getDecimalPrecision(defaultValue));\n  const [value, setValue] = useState<number>(\n    'value' in props ? (props.value as number) : defaultValue\n  );\n\n  const inputOnChange = (e: React.ChangeEvent<HTMLInputElement>): void => {\n    const raw = Number(e.target.value.trim());\n    const val = resolvedPrecision > 0 ? toPrecision(raw, resolvedPrecision) : raw;\n    !('value' in props) && setValue(val);\n    onChange && isValid(val) && onChange(val, e);\n  };\n\n  const plusOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    e.stopPropagation();\n    if (!disabled && isValid(step)) {\n      const val = toPrecision(+value + +step, resolvedPrecision);\n      if (val <= max) {\n        !('value' in props) && setValue(val);\n        onChange && onChange(val, e);\n      }\n    }\n  };\n\n  const minusOnClick = (e: MouseEvent<HTMLSpanElement>): void => {\n    e.stopPropagation();\n    if (!disabled && isValid(step)) {\n      const val = toPrecision(+value - +step, resolvedPrecision);\n      if (val >= min) {\n        !('value' in props) && setValue(val);\n        onChange && onChange(val, e);\n      }\n    }\n  };\n\n  useEffect(() => {\n    'value' in props && setValue(props.value as number);\n  }, [props]);\n\n  return (\n    <div ref={ref} className={cls} style={style}>\n      <input\n        autoComplete=\"off\"\n        disabled={disabled}\n        value={resolvedPrecision > 0 ? value.toFixed(resolvedPrecision) : value}\n        type=\"number\"\n        className={`${prefixCls}__input`}\n        max={max}\n        min={min}\n        step={step}\n        onChange={inputOnChange}\n        aria-valuenow={value}\n        aria-valuemax={max}\n        aria-valuemin={min}\n        aria-disabled={disabled}\n      />\n      <div className={`${prefixCls}__controls`}>\n        <span className={`${prefixCls}__up`} onClick={plusOnClick}>\n          <ArrowDown size={8} className={`${prefixCls}__icon ${prefixCls}__icon_reverse`} />\n        </span>\n        <span className={`${prefixCls}__down`} onClick={minusOnClick}>\n          <ArrowDown size={8} className={`${prefixCls}__icon`} />\n        </span>\n      </div>\n    </div>\n  );\n});\n\nInputNumber.displayName = 'InputNumber';\n\nexport default InputNumber;\n"],"mappings":"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"}

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

@@ -4,6 +4,7 @@
 .#{$prefix}-input-number {
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 
   &:hover {
     .#{$prefix}-input-number__controls {
@@ -12,13 +13,14 @@
   }
 
   &__input {
-    @include input-default();
+    @include input-default;
+
     padding-left: 7px;
     padding-right: 25px;
 
     &::-webkit-inner-spin-button,
     &::-webkit-outer-spin-button {
-      -webkit-appearance: none;
+      appearance: none;
     }
   }
 
@@ -112,7 +114,7 @@
   &_disabled {
     .#{$prefix}-input-number {
       &__input {
-        @include input-default-disabled();
+        @include input-default-disabled;
       }
 
       &__up,

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

@@ -1,6 +1,7 @@
 .ty-input-number {
   position: relative;
   box-sizing: border-box;
+  width: 100%;
 }
 .ty-input-number:hover .ty-input-number__controls {
   opacity: 1;
@@ -13,8 +14,8 @@
   border: 1px solid var(--ty-input-border);
   transition: all 0.3s;
   outline: 0;
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   background-color: var(--ty-input-bg);
 }
 .ty-input-number__input:hover {
@@ -36,6 +37,7 @@
 }
 .ty-input-number__input::-webkit-inner-spin-button, .ty-input-number__input::-webkit-outer-spin-button {
   -webkit-appearance: none;
+          appearance: none;
 }
 .ty-input-number__controls {
   box-sizing: border-box;
@@ -84,19 +86,19 @@
   transform: rotate(180deg);
 }
 .ty-input-number_sm .ty-input-number__input {
-  font-size: 0.875rem;
-  height: 24px;
-  line-height: 24px;
+  font-size: var(--ty-font-size-sm);
+  height: var(--ty-height-sm);
+  line-height: var(--ty-height-sm);
 }
 .ty-input-number_md .ty-input-number__input {
-  font-size: 1rem;
-  height: 32px;
-  line-height: 32px;
+  font-size: var(--ty-font-size-base);
+  height: var(--ty-height-md);
+  line-height: var(--ty-height-md);
 }
 .ty-input-number_lg .ty-input-number__input {
-  font-size: 1.25rem;
-  height: 42px;
-  line-height: 42px;
+  font-size: var(--ty-font-size-lg);
+  height: var(--ty-height-lg);
+  line-height: var(--ty-height-lg);
 }
 .ty-input-number_disabled .ty-input-number__input {
   cursor: not-allowed;

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

@@ -41,13 +41,11 @@ const InputOTP = react.default.forwardRef((props, ref) => {
 		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 prevValue = valueCells.join("");
+		const nextValue = nextValueCells.join("");
+		setValueCells(nextValueCells);
+		if (onChange && prevValue !== nextValue) onChange(nextValue);
+	}, [onChange, valueCells]);
 	const patchValue = (0, react.useCallback)((index, txt) => {
 		let nextCells = [...valueCells];
 		for (let i = 0; i < index; i += 1) if (!nextCells[i]) nextCells[i] = "";

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

@@ -1 +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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"}
+{"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        const prevValue = valueCells.join('');\n        const nextValue = nextValueCells.join('');\n        setValueCells(nextValueCells);\n        if (onChange && prevValue !== nextValue) {\n          onChange(nextValue);\n        }\n      },\n      [onChange, valueCells]\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/style/_index.scss

@@ -44,7 +44,7 @@
     display: inline-flex;
     align-items: center;
     color: var(--ty-color-text-secondary);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
   }
 
   &_disabled {

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

@@ -11,8 +11,8 @@
   border: 1px solid var(--ty-input-border);
   transition: all 0.3s;
   outline: 0;
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   background-color: var(--ty-input-bg);
 }
 .ty-input-otp__cell:hover {
@@ -33,24 +33,24 @@
   height: 36px;
   text-align: center;
   padding: 0;
-  font-size: 1rem;
-  border-radius: 2px;
+  font-size: var(--ty-font-size-base);
+  border-radius: var(--ty-border-radius);
   caret-color: currentcolor;
 }
 .ty-input-otp__cell_sm {
   width: 28px;
   height: 28px;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-input-otp__cell_md {
   width: 36px;
   height: 36px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-input-otp__cell_lg {
   width: 44px;
   height: 44px;
-  font-size: 1.25rem;
+  font-size: var(--ty-font-size-lg);
 }
 .ty-input-otp__cell_disabled {
   cursor: not-allowed;
@@ -64,7 +64,7 @@
   display: inline-flex;
   align-items: center;
   color: var(--ty-color-text-secondary);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-input-otp_disabled {
   cursor: not-allowed;