@tiny-design/react 1.4.0 → 1.5.0

package/es/color-picker/style/index.css

@@ -18,7 +18,7 @@
 .ty-color-picker__swatch {
   width: 32px;
   height: 32px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
   padding: 3px;
   cursor: pointer;
@@ -124,7 +124,7 @@
 .ty-color-picker__format-btn {
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
   background: transparent;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   padding: 2px 6px;
   cursor: pointer;
   font-size: 12px;
@@ -137,7 +137,7 @@
 .ty-color-picker__hex-input {
   flex: 1;
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   padding: 2px 6px;
   font-size: 12px;
   font-family: lucida console, consolas, monaco, andale mono, ubuntu mono, monospace;
@@ -159,7 +159,7 @@
 .ty-color-picker__preset {
   width: 20px;
   height: 20px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   cursor: pointer;
   border: 1px solid var(--ty-color-picker-border, #dee2e6);
   transition: transform 0.15s;

package/es/date-picker/style/_index.scss

@@ -5,7 +5,7 @@ $dp: #{$prefix}-date-picker;
 .#{$dp} {
   display: inline-flex;
   position: relative;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   // ---- Input ----
   &__input {

package/es/date-picker/style/index.css

@@ -1,7 +1,7 @@
 .ty-date-picker {
   display: inline-flex;
   position: relative;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-date-picker__input {
   display: inline-flex;

package/es/descriptions/style/_index.scss

@@ -1,7 +1,6 @@
 @use '../../style/variables' as *;
 
 .#{$prefix}-descriptions {
-
   &__body {
     width: 100%;
     overflow: hidden;
@@ -24,7 +23,7 @@
     font-size: 16px;
   }
 
-  &__item_colon:after {
+  &__item_colon::after {
     content: ':';
     margin-left: 2px;
     margin-right: 5px;
@@ -32,15 +31,15 @@
 
   &__item-label {
     color: var(--ty-color-text-label);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     font-weight: 400;
-    line-height: $line-height-base;
+    line-height: var(--ty-line-height-base);
   }
 
   &__item-content {
     color: var(--ty-color-text-secondary);
-    font-size: $font-size-base;
-    line-height: $line-height-base;
+    font-size: var(--ty-font-size-base);
+    line-height: var(--ty-line-height-base);
   }
 
   &_bordered {

package/es/descriptions/style/index.css

@@ -17,25 +17,25 @@
   font-weight: 600;
   font-size: 16px;
 }
-.ty-descriptions__item_colon:after {
+.ty-descriptions__item_colon::after {
   content: ":";
   margin-left: 2px;
   margin-right: 5px;
 }
 .ty-descriptions__item-label {
   color: var(--ty-color-text-label);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   font-weight: 400;
-  line-height: 1.5;
+  line-height: var(--ty-line-height-base);
 }
 .ty-descriptions__item-content {
   color: var(--ty-color-text-secondary);
-  font-size: 1rem;
-  line-height: 1.5;
+  font-size: var(--ty-font-size-base);
+  line-height: var(--ty-line-height-base);
 }
 .ty-descriptions_bordered .ty-descriptions__body {
   border: 1px solid var(--ty-descriptions-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-descriptions_bordered .ty-descriptions__row {
   border-bottom: 1px solid var(--ty-descriptions-border);

package/es/empty/style/_index.scss

@@ -16,7 +16,7 @@
 
   &__desc {
     color: var(--ty-empty-desc-color);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     margin: 0;
   }
 

package/es/empty/style/index.css

@@ -12,7 +12,7 @@
 }
 .ty-empty__desc {
   color: var(--ty-empty-desc-color);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   margin: 0;
 }
 .ty-empty__footer {

package/es/form/style/_index.scss

@@ -1,7 +1,6 @@
 @use '../../style/variables' as *;
 
 .#{$prefix}-form {
-
   &_vertical {
     .#{$prefix}-form-item__label {
       text-align: left;
@@ -23,15 +22,15 @@
     text-align: right;
     vertical-align: top;
     color: var(--ty-color-text);
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
 
-    &_required:before {
+    &_required::before {
       content: '*';
       margin-right: 3px;
       color: var(--ty-form-error-color);
     }
 
-    &_colon:after {
+    &_colon::after {
       content: ':';
       margin: 0 8px 0 2px;
     }
@@ -65,7 +64,7 @@
 
   &__notice {
     font-size: 13px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background: var(--ty-form-notice-bg);
     color: var(--ty-form-notice-color);
     padding: 5px;
@@ -86,7 +85,7 @@
 
       &:focus{
         border-color: var(--ty-form-error-hover);
-        box-shadow: 0 0 0 2px rgba(255,77,79,.2);
+        box-shadow: 0 0 0 2px rgb(255 77 79 / 20%);
       }
     }
   }

package/es/form/style/index.css

@@ -15,14 +15,14 @@
   text-align: right;
   vertical-align: top;
   color: var(--ty-color-text);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
-.ty-form-item__label_required:before {
+.ty-form-item__label_required::before {
   content: "*";
   margin-right: 3px;
   color: var(--ty-form-error-color);
 }
-.ty-form-item__label_colon:after {
+.ty-form-item__label_colon::after {
   content: ":";
   margin: 0 8px 0 2px;
 }
@@ -50,7 +50,7 @@
 }
 .ty-form-item__notice {
   font-size: 13px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background: var(--ty-form-notice-bg);
   color: var(--ty-form-notice-color);
   padding: 5px;

package/es/index.d.ts

@@ -40,6 +40,7 @@ import { Link } from "./link/link.js";
 import { DefaultList } from "./list/index.js";
 import { Loader } from "./loader/loader.js";
 import { _default } from "./loading-bar/index.js";
+import { Marquee } from "./marquee/marquee.js";
 import { DefaultMenu } from "./menu/index.js";
 import { messageContainer } from "./message/message-container.js";
 import { DefaultSelect } from "./native-select/index.js";
@@ -87,4 +88,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, 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, Waterfall, 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, Marquee, 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, Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/es/index.js

@@ -46,6 +46,7 @@ import pagination_default from "./pagination/index.js";
 import DefaultList from "./list/index.js";
 import loader_default from "./loader/index.js";
 import loading_bar_default from "./loading-bar/index.js";
+import marquee_default from "./marquee/index.js";
 import DefaultMenu from "./menu/index.js";
 import message_default from "./message/index.js";
 import DefaultSelect from "./native-select/index.js";
@@ -87,4 +88,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, auto_complete_default as 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, waterfall_default as Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };
+export { alert_default as Alert, DefaultAnchor as Anchor, aspect_ratio_default as AspectRatio, auto_complete_default as 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, marquee_default as Marquee, 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, waterfall_default as Waterfall, en_US, useLocale, useTheme, withLocale, withSpin, zh_CN };

package/es/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/es/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/es/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/es/input-number/input-number.js

@@ -12,8 +12,12 @@ import { jsx, jsxs } from "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.forwardRef((props, ref) => {
@@ -24,16 +28,18 @@ const InputNumber = React.forwardRef((props, ref) => {
 		[`${prefixCls}_disabled`]: disabled,
 		[`${prefixCls}_always-controls`]: controls
 	});
+	const resolvedPrecision = precision ?? Math.max(getDecimalPrecision(step), getDecimalPrecision(defaultValue));
 	const [value, setValue] = 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);
@@ -43,7 +49,7 @@ const InputNumber = React.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);
@@ -60,7 +66,7 @@ const InputNumber = React.forwardRef((props, ref) => {
 		children: [/* @__PURE__ */ 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/es/input-number/input-number.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-number.js","names":[],"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,cAAc,MAAM,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,gBAAgB,WAAW,cAAc;CAC/C,MAAM,YAAY,aAAa,gBAAgB,cAAc,WAAW,cAAc;CAEtF,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,UAAU,GADxC,MAAM,QAAQ,cAAc,iBAAiB,QACW;GACvE,GAAG,UAAU,aAAa;GAC1B,GAAG,UAAU,oBAAoB;EACnC,CAAC;CACF,MAAM,CAAC,OAAO,YAAY,SACxB,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,iBAAgB;AACd,aAAW,SAAS,SAAS,MAAM,MAAgB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAAY;YAAtC,CACE,oBAAC,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,qBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;aAA7B,CACE,oBAAC,QAAD;IAAM,WAAW,GAAG,UAAU;IAAO,SAAS;cAC5C,oBAAC,WAAD;KAAW,MAAM;KAAG,WAAW,GAAG,UAAU,SAAS,UAAU;KAAmB,CAAA;IAC7E,CAAA,EACP,oBAAC,QAAD;IAAM,WAAW,GAAG,UAAU;IAAS,SAAS;cAC9C,oBAAC,WAAD;KAAW,MAAM;KAAG,WAAW,GAAG,UAAU;KAAW,CAAA;IAClD,CAAA,CACH;KACF;;EAER;AAEF,YAAY,cAAc"}
+{"version":3,"file":"input-number.js","names":[],"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":";;;;;;;;;;;AAWA,MAAM,WAAW,QAAkC;AACjD,QAAO,CAAC,MAAM,CAAC,IAAI;;AAGrB,MAAM,uBAAuB,QAAwB;CACnD,MAAM,MAAM,OAAO,IAAI;CACvB,MAAM,WAAW,IAAI,QAAQ,IAAI;AACjC,QAAO,aAAa,KAAK,IAAI,IAAI,SAAS,WAAW;;AAGvD,MAAM,eAAe,KAAa,cAA8B;AAC9D,QAAO,WAAW,IAAI,QAAQ,UAAU,CAAC;;AAG3C,MAAM,cAAc,MAAM,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,gBAAgB,WAAW,cAAc;CAC/C,MAAM,YAAY,aAAa,gBAAgB,cAAc,WAAW,cAAc;CAEtF,MAAM,MAAM,WAAW,WAAW,WAAW,GAAG,UAAU,GADxC,MAAM,QAAQ,cAAc,iBAAiB,QACW;GACvE,GAAG,UAAU,aAAa;GAC1B,GAAG,UAAU,oBAAoB;EACnC,CAAC;CACF,MAAM,oBAAoB,aAAa,KAAK,IAAI,oBAAoB,KAAK,EAAE,oBAAoB,aAAa,CAAC;CAC7G,MAAM,CAAC,OAAO,YAAY,SACxB,WAAW,QAAS,MAAM,QAAmB,aAC9C;CAED,MAAM,iBAAiB,MAAiD;EACtE,MAAM,MAAM,OAAO,EAAE,OAAO,MAAM,MAAM,CAAC;EACzC,MAAM,MAAM,oBAAoB,IAAI,YAAY,KAAK,kBAAkB,GAAG;AAC1E,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,kBAAkB;AAC1D,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,kBAAkB;AAC1D,OAAI,OAAO,KAAK;AACd,MAAE,WAAW,UAAU,SAAS,IAAI;AACpC,gBAAY,SAAS,KAAK,EAAE;;;;AAKlC,iBAAgB;AACd,aAAW,SAAS,SAAS,MAAM,MAAgB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAAY;YAAtC,CACE,oBAAC,SAAD;GACE,cAAa;GACH;GACV,OAAO,oBAAoB,IAAI,MAAM,QAAQ,kBAAkB,GAAG;GAClE,MAAK;GACL,WAAW,GAAG,UAAU;GACnB;GACA;GACC;GACN,UAAU;GACV,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,iBAAe;GACf,CAAA,EACF,qBAAC,OAAD;GAAK,WAAW,GAAG,UAAU;aAA7B,CACE,oBAAC,QAAD;IAAM,WAAW,GAAG,UAAU;IAAO,SAAS;cAC5C,oBAAC,WAAD;KAAW,MAAM;KAAG,WAAW,GAAG,UAAU,SAAS,UAAU;KAAmB,CAAA;IAC7E,CAAA,EACP,oBAAC,QAAD;IAAM,WAAW,GAAG,UAAU;IAAS,SAAS;cAC9C,oBAAC,WAAD;KAAW,MAAM;KAAG,WAAW,GAAG,UAAU;KAAW,CAAA;IAClD,CAAA,CACH;KACF;;EAER;AAEF,YAAY,cAAc"}

package/es/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/es/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/es/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/es/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;