@tiny-design/react 1.4.0 → 1.5.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/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;

package/lib/list/style/_index.scss

@@ -2,11 +2,11 @@
 
 .#{$prefix}-list {
   color: var(--ty-color-text, #{$gray-800});
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
 
   &_bordered {
     border: 1px solid var(--ty-list-border, #{$gray-300});
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
   }
 
   &_sm {
@@ -136,6 +136,6 @@
 
   &__description {
     color: var(--ty-color-text-secondary, #{$gray-600});
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 }

package/lib/list/style/index.css

@@ -1,10 +1,10 @@
 .ty-list {
   color: var(--ty-color-text, #32325d);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-list_bordered {
   border: 1px solid var(--ty-list-border, #dee2e6);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-list_sm .ty-list-item {
   padding: 8px 16px;
@@ -104,5 +104,5 @@
 }
 .ty-list-item-meta__description {
   color: var(--ty-color-text-secondary, #8898aa);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }

package/lib/marquee/index.js

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

package/lib/marquee/index.js.map

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

package/lib/marquee/marquee.d.ts

@@ -0,0 +1,8 @@
+import { MarqueeProps } from "./types.js";
+import React from "react";
+
+//#region src/marquee/marquee.d.ts
+declare const Marquee: React.MemoExoticComponent<React.ForwardRefExoticComponent<MarqueeProps & React.RefAttributes<HTMLDivElement>>>;
+//#endregion
+export { Marquee };
+//# sourceMappingURL=marquee.d.ts.map

package/lib/marquee/marquee.js

@@ -0,0 +1,45 @@
+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");
+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/marquee/marquee.tsx
+const Marquee = react.default.memo(react.default.forwardRef((props, ref) => {
+	const { direction = "left", duration = 50, pauseOnHover = true, gap = 16, fade = false, infinite = true, prefixCls: customisedCls, className, style, children, ...otherProps } = props;
+	const prefixCls = require_general.getPrefixCls("marquee", (0, react.useContext)(require_config_context.ConfigContext).prefixCls, customisedCls);
+	const cls = (0, classnames.default)(prefixCls, { [`${prefixCls}_fade`]: fade }, className);
+	const trackCls = (0, classnames.default)(`${prefixCls}__track`, {
+		[`${prefixCls}__track_reverse`]: direction === "right",
+		[`${prefixCls}__track_pause-on-hover`]: pauseOnHover,
+		[`${prefixCls}__track_once`]: !infinite
+	});
+	const trackStyle = {
+		"--ty-marquee-duration": `${duration}s`,
+		"--ty-marquee-gap": `${gap}px`
+	};
+	const items = (0, react.useMemo)(() => {
+		const childArray = react.default.Children.toArray(children);
+		if (!infinite) return childArray;
+		const cloned = childArray.map((child) => react.default.isValidElement(child) ? react.default.cloneElement(child, { key: `${child.key}-dup` }) : child);
+		return [...childArray, ...cloned];
+	}, [children, infinite]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		...otherProps,
+		ref,
+		className: cls,
+		style,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: trackCls,
+			style: trackStyle,
+			children: items
+		})
+	});
+}));
+Marquee.displayName = "Marquee";
+//#endregion
+exports.default = Marquee;
+
+//# sourceMappingURL=marquee.js.map

package/lib/marquee/marquee.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"marquee.js","names":["React","getPrefixCls","ConfigContext"],"sources":["../../src/marquee/marquee.tsx"],"sourcesContent":["import React, { useContext, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { MarqueeProps } from './types';\n\nconst Marquee = React.memo(\n  React.forwardRef<HTMLDivElement, MarqueeProps>((props, ref) => {\n    const {\n      direction = 'left',\n      duration = 50,\n      pauseOnHover = true,\n      gap = 16,\n      fade = false,\n      infinite = true,\n      prefixCls: customisedCls,\n      className,\n      style,\n      children,\n      ...otherProps\n    } = props;\n\n    const configContext = useContext(ConfigContext);\n    const prefixCls = getPrefixCls('marquee', configContext.prefixCls, customisedCls);\n\n    const cls = classNames(\n      prefixCls,\n      {\n        [`${prefixCls}_fade`]: fade,\n      },\n      className\n    );\n\n    const trackCls = classNames(`${prefixCls}__track`, {\n      [`${prefixCls}__track_reverse`]: direction === 'right',\n      [`${prefixCls}__track_pause-on-hover`]: pauseOnHover,\n      [`${prefixCls}__track_once`]: !infinite,\n    });\n\n    const trackStyle: React.CSSProperties = {\n      '--ty-marquee-duration': `${duration}s`,\n      '--ty-marquee-gap': `${gap}px`,\n    } as React.CSSProperties;\n\n    const items = useMemo(() => {\n      const childArray = React.Children.toArray(children);\n      if (!infinite) return childArray;\n      const cloned = childArray.map((child) =>\n        React.isValidElement(child)\n          ? React.cloneElement(child, { key: `${child.key}-dup` })\n          : child\n      );\n      return [...childArray, ...cloned];\n    }, [children, infinite]);\n\n    return (\n      <div {...otherProps} ref={ref} className={cls} style={style}>\n        <div className={trackCls} style={trackStyle}>\n          {items}\n        </div>\n      </div>\n    );\n  })\n);\n\nMarquee.displayName = 'Marquee';\n\nexport default Marquee;\n"],"mappings":";;;;;;;;;AAMA,MAAM,UAAUA,MAAAA,QAAM,KACpBA,MAAAA,QAAM,YAA0C,OAAO,QAAQ;CAC7D,MAAM,EACJ,YAAY,QACZ,WAAW,IACX,eAAe,MACf,MAAM,IACN,OAAO,OACP,WAAW,MACX,WAAW,eACX,WACA,OACA,UACA,GAAG,eACD;CAGJ,MAAM,YAAYC,gBAAAA,aAAa,YAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACS,WAAW,cAAc;CAEjF,MAAM,OAAA,GAAA,WAAA,SACJ,WACA,GACG,GAAG,UAAU,SAAS,MACxB,EACD,UACD;CAED,MAAM,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,UAAU;GAChD,GAAG,UAAU,mBAAmB,cAAc;GAC9C,GAAG,UAAU,0BAA0B;GACvC,GAAG,UAAU,gBAAgB,CAAC;EAChC,CAAC;CAEF,MAAM,aAAkC;EACtC,yBAAyB,GAAG,SAAS;EACrC,oBAAoB,GAAG,IAAI;EAC5B;CAED,MAAM,SAAA,GAAA,MAAA,eAAsB;EAC1B,MAAM,aAAaF,MAAAA,QAAM,SAAS,QAAQ,SAAS;AACnD,MAAI,CAAC,SAAU,QAAO;EACtB,MAAM,SAAS,WAAW,KAAK,UAC7BA,MAAAA,QAAM,eAAe,MAAM,GACvBA,MAAAA,QAAM,aAAa,OAAO,EAAE,KAAK,GAAG,MAAM,IAAI,OAAO,CAAC,GACtD,MACL;AACD,SAAO,CAAC,GAAG,YAAY,GAAG,OAAO;IAChC,CAAC,UAAU,SAAS,CAAC;AAExB,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,GAAI;EAAiB;EAAK,WAAW;EAAY;YACpD,iBAAA,GAAA,kBAAA,KAAC,OAAD;GAAK,WAAW;GAAU,OAAO;aAC9B;GACG,CAAA;EACF,CAAA;EAER,CACH;AAED,QAAQ,cAAc"}

package/lib/marquee/style/_index.scss

@@ -0,0 +1,77 @@
+@use '../../style/variables' as *;
+
+.#{$prefix}-marquee {
+  overflow: hidden;
+  width: 0;
+  min-width: 100%;
+
+  &_fade {
+    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+  }
+
+  &__track {
+    display: flex;
+    gap: var(--ty-marquee-gap, 16px);
+    width: max-content;
+    animation: ty-marquee-left var(--ty-marquee-duration, 50s) linear infinite;
+
+    &_reverse {
+      animation-name: ty-marquee-right;
+    }
+
+    &_pause-on-hover:hover {
+      animation-play-state: paused;
+    }
+
+    &_once {
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
+      animation-name: ty-marquee-once-left;
+
+      &.#{$prefix}-marquee__track_reverse {
+        animation-name: ty-marquee-once-right;
+      }
+    }
+  }
+}
+
+@keyframes ty-marquee-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-50%);
+  }
+}
+
+@keyframes ty-marquee-right {
+  from {
+    transform: translateX(-50%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes ty-marquee-once-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes ty-marquee-once-right {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}

package/lib/marquee/style/index.css

@@ -0,0 +1,64 @@
+.ty-marquee {
+  overflow: hidden;
+  width: 0;
+  min-width: 100%;
+}
+.ty-marquee_fade {
+  -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+          mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+  mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
+}
+.ty-marquee__track {
+  display: flex;
+  gap: var(--ty-marquee-gap, 16px);
+  width: -moz-max-content;
+  width: max-content;
+  animation: ty-marquee-left var(--ty-marquee-duration, 50s) linear infinite;
+}
+.ty-marquee__track_reverse {
+  animation-name: ty-marquee-right;
+}
+.ty-marquee__track_pause-on-hover:hover {
+  animation-play-state: paused;
+}
+.ty-marquee__track_once {
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
+  animation-name: ty-marquee-once-left;
+}
+.ty-marquee__track_once.ty-marquee__track_reverse {
+  animation-name: ty-marquee-once-right;
+}
+
+@keyframes ty-marquee-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-50%);
+  }
+}
+@keyframes ty-marquee-right {
+  from {
+    transform: translateX(-50%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes ty-marquee-once-left {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes ty-marquee-once-right {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}

package/lib/marquee/style/index.d.ts

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

package/lib/marquee/style/index.js

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

package/lib/marquee/types.d.ts

@@ -0,0 +1,21 @@
+import { BaseProps } from "../_utils/props.js";
+import React from "react";
+
+//#region src/marquee/types.d.ts
+interface MarqueeProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['div']> {
+  /** Scroll direction */
+  direction?: 'left' | 'right';
+  /** Animation duration in seconds */
+  duration?: number;
+  /** Pause animation on hover */
+  pauseOnHover?: boolean;
+  /** Gap between items in pixels */
+  gap?: number;
+  /** Apply edge fade mask */
+  fade?: boolean;
+  /** Loop the animation infinitely (duplicates children for seamless loop) */
+  infinite?: boolean;
+}
+//#endregion
+export { MarqueeProps };
+//# sourceMappingURL=types.d.ts.map

package/lib/native-select/style/index.css

@@ -9,7 +9,7 @@
   vertical-align: middle;
   box-sizing: border-box;
   border: 1px solid var(--ty-input-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background-color: var(--ty-native-select-bg);
   background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDEyIDE2Ij4gIDxwYXRoIGZpbGw9IiMzOTNFNDgiIGQ9Ik0wLjIyMiw1LjYxMyBMNS40NTEsMC4yMjMgQzUuNzU2MjEyMDksLTAuMDc0MzYzMjMzMyA2LjI0Mjc4NzkxLC0wLjA3NDM2MzIzMzMgNi41NDgsMC4yMjMgTDExLjc3OCw1LjYxMyBDMTIuMTgsNi4wMjcgMTIuMDI1LDYuNjY3IDExLjQwNyw2LjY2NyBMMC41OTIsNi42NjcgQy0wLjAyNCw2LjY2NyAtMC4xOCw2LjAyNyAwLjIyMiw1LjYxMyBaIE0wLjU5Miw5LjMzMyBMMTEuNDA3LDkuMzMzIEMxMi4wMjUsOS4zMzMgMTIuMTgsOS45NzMgMTEuNzc3LDEwLjM4NyBMNi41NDcsMTUuNzc3IEM2LjI0MTkxMjU4LDE2LjA3MzcxNDMgNS43NTYwODc0MiwxNi4wNzM3MTQzIDUuNDUxLDE1Ljc3NyBMMC4yMjIsMTAuMzg3IEMtMC4xOCw5Ljk3MyAtMC4wMjQsOS4zMzMgMC41OTIsOS4zMzMgWiIvPjwvc3ZnPg==");
   background-repeat: no-repeat, repeat;
@@ -43,13 +43,13 @@
 }
 .ty-select-native_sm {
   padding: 3px 25px 3px 7px;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-select-native_md {
   padding: 6px 25px 6px 7px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-select-native_lg {
   padding: 9px 25px 9px 7px;
-  font-size: 1.25rem;
+  font-size: var(--ty-font-size-lg);
 }

package/lib/notification/style/_index.scss

@@ -5,7 +5,7 @@
   padding: 16px 24px;
   border-radius: 3px;
   color: var(--ty-color-text-secondary);
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   box-shadow: var(--ty-shadow-modal);
   box-sizing: border-box;
   display: flex;

package/lib/notification/style/index.css

@@ -3,7 +3,7 @@
   padding: 16px 24px;
   border-radius: 3px;
   color: var(--ty-color-text-secondary);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   box-shadow: var(--ty-shadow-modal);
   box-sizing: border-box;
   display: flex;

package/lib/pop-confirm/style/_index.scss

@@ -9,7 +9,7 @@
 
   &__messages {
     padding: 0 0 12px;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
     display: flex;
     align-items: center;
   }

package/lib/pop-confirm/style/index.css

@@ -6,7 +6,7 @@
 }
 .ty-pop-confirm__messages {
   padding: 0 0 12px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   display: flex;
   align-items: center;
 }

package/lib/popup/style/_index.scss

@@ -5,19 +5,19 @@
   box-sizing: border-box;
   border-radius: $popover-border-radius;
   white-space: nowrap;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   text-align: left;
   box-shadow: var(--ty-shadow-popup);
   z-index: 999;
 
-  &__arrow, &__arrow:before {
+  &__arrow, &__arrow::before {
     width: $popover-arrow-size;
     height: $popover-arrow-size;
     box-sizing: border-box;
     position: absolute;
   }
 
-  &__arrow:before {
+  &__arrow::before {
     content: '';
     transform: rotate(45deg);
   }
@@ -26,7 +26,7 @@
     background-color: var(--ty-popup-light-bg);
     color: var(--ty-color-text-secondary);
     .#{$prefix}-popup {
-      &__arrow:before {
+      &__arrow::before {
         background: var(--ty-popup-light-bg);
       }
     }
@@ -36,7 +36,7 @@
     background-color: var(--ty-popup-dark-bg);
     color: #fff;
     .#{$prefix}-popup {
-      &__arrow:before {
+      &__arrow::before {
         background: var(--ty-popup-dark-bg);
       }
     }
@@ -46,7 +46,7 @@
     & > .#{$prefix}-popup__arrow {
       bottom: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
       }
     }
@@ -56,7 +56,7 @@
     > .#{$prefix}-popup__arrow {
       top: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
       }
     }
@@ -66,7 +66,7 @@
     > .#{$prefix}-popup__arrow {
       right: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
       }
     }
@@ -76,7 +76,7 @@
     > .#{$prefix}-popup__arrow {
       left: math.div(-$popover-arrow-size, 2);
 
-      &:before {
+      &::before {
         box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
       }
     }