@tiny-design/react 1.4.0 → 1.5.1

package/lib/list/list.js

@@ -54,7 +54,7 @@ const List = react.default.forwardRef((props, ref) => {
 			});
 			if (renderItem) {
 				const [start, end] = visibleRange;
-				const visibleItems = dataSource.slice(start, end + 1).map((item, i) => renderItem(item, start + i));
+				const visibleItems = dataSource.slice(start, end + 1).map((item, i) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderItem(item, start + i) }, start + i));
 				return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					style: {
 						height: totalHeight,
@@ -80,7 +80,7 @@ const List = react.default.forwardRef((props, ref) => {
 			children: locale?.emptyText ?? "No Data"
 		});
 		if (renderItem) {
-			const rendered = items.map((item, index) => renderItem(item, index));
+			const rendered = items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.default.Fragment, { children: renderItem(item, index) }, index));
 			if (grid) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 				className: `${prefixCls}__grid`,
 				style: {

package/lib/list/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["React","ConfigContext","getPrefixCls","useVirtualScroll","Pagination"],"sources":["../../src/list/list.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useVirtualScroll } from '../_utils/use-virtual-scroll';\nimport Pagination from '../pagination';\nimport { ListProps } from './types';\n\nconst ITEM_HEIGHT_MAP = { sm: 41, md: 49, lg: 57 } as const;\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {\n  const {\n    dataSource = [],\n    renderItem,\n    header,\n    footer,\n    loading = false,\n    bordered = false,\n    split = true,\n    size,\n    grid,\n    locale,\n    virtual = false,\n    height,\n    itemHeight: itemHeightProp,\n    pagination,\n    prefixCls: customisedCls,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('list', configContext.prefixCls, customisedCls);\n  const listSize = size || configContext.componentSize || 'md';\n\n  if (virtual && height == null) {\n    console.warn('[tiny-design: List] `height` is required when `virtual` is enabled.');\n  }\n  if (virtual && grid) {\n    console.warn('[tiny-design: List] `virtual` is not supported with `grid` mode. Falling back to normal rendering.');\n  }\n\n  const isVirtual = virtual && height != null && !grid;\n\n  const [currentPage, setCurrentPage] = useState(1);\n  const pageSize = pagination && pagination.pageSize ? pagination.pageSize : 10;\n\n  const itemHeight = itemHeightProp ?? ITEM_HEIGHT_MAP[listSize] ?? ITEM_HEIGHT_MAP.md;\n  const { visibleRange, totalHeight, offsetY, onScroll } = useVirtualScroll({\n    itemCount: dataSource.length,\n    itemHeight,\n    containerHeight: height ?? 0,\n  });\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${listSize}`]: listSize,\n    [`${prefixCls}_bordered`]: bordered,\n    [`${prefixCls}_split`]: split,\n    [`${prefixCls}_loading`]: loading,\n    [`${prefixCls}_grid`]: grid,\n  });\n\n  const paginatedData = () => {\n    if (!pagination) return dataSource;\n    const page = pagination.current ?? currentPage;\n    const start = (page - 1) * pageSize;\n    return dataSource.slice(start, start + pageSize);\n  };\n\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n    pagination && pagination.onChange?.(page, pageSize);\n  };\n\n  const renderItems = () => {\n    if (isVirtual) {\n      if (dataSource.length === 0) {\n        return (\n          <div className={`${prefixCls}__empty`}>\n            {locale?.emptyText ?? 'No Data'}\n          </div>\n        );\n      }\n      if (renderItem) {\n        const [start, end] = visibleRange;\n        const visibleItems = dataSource.slice(start, end + 1).map((item, i) => renderItem(item, start + i));\n        return (\n          <div style={{ height: totalHeight, position: 'relative' }}>\n            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)` }}>\n              {visibleItems}\n            </div>\n          </div>\n        );\n      }\n      return children;\n    }\n\n    const items = paginatedData();\n    if (items.length === 0 && !children) {\n      return (\n        <div className={`${prefixCls}__empty`}>\n          {locale?.emptyText ?? 'No Data'}\n        </div>\n      );\n    }\n    if (renderItem) {\n      const rendered = items.map((item, index) => renderItem(item, index));\n      if (grid) {\n        return (\n          <div\n            className={`${prefixCls}__grid`}\n            style={{\n              display: 'grid',\n              gridTemplateColumns: `repeat(${grid.column || 3}, 1fr)`,\n              gap: grid.gutter ? `${grid.gutter}px` : undefined,\n            }}\n          >\n            {rendered}\n          </div>\n        );\n      }\n      return rendered;\n    }\n    return children;\n  };\n\n  const showPagination = pagination && !isVirtual;\n  const paginationConfig = pagination && typeof pagination === 'object' ? pagination : undefined;\n  const totalItems = paginationConfig?.total ?? dataSource.length;\n  const activePage = paginationConfig?.current ?? currentPage;\n\n  const bodyCls = classNames(`${prefixCls}__body`, {\n    [`${prefixCls}__body_virtual`]: isVirtual,\n  });\n\n  const bodyStyle: React.CSSProperties | undefined = isVirtual\n    ? { height, overflowY: 'auto' }\n    : undefined;\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={style}>\n      {header && <div className={`${prefixCls}__header`}>{header}</div>}\n      <div className={bodyCls} style={bodyStyle} onScroll={isVirtual ? onScroll : undefined}>\n        {loading ? (\n          <div className={`${prefixCls}__loading`}>Loading...</div>\n        ) : (\n          renderItems()\n        )}\n      </div>\n      {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n      {showPagination && (\n        <Pagination\n          current={activePage}\n          total={totalItems}\n          pageSize={pageSize}\n          align={paginationConfig?.align ?? 'right'}\n          size={paginationConfig?.size}\n          disabled={paginationConfig?.disabled}\n          onChange={(page) => handlePageChange(page)}\n          style={{ padding: 16 }}\n        />\n      )}\n    </div>\n  );\n});\n\nList.displayName = 'List';\nexport default List;\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":["React","ConfigContext","getPrefixCls","useVirtualScroll","Pagination"],"sources":["../../src/list/list.tsx"],"sourcesContent":["import React, { useContext, useState } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { useVirtualScroll } from '../_utils/use-virtual-scroll';\nimport Pagination from '../pagination';\nimport { ListProps } from './types';\n\nconst ITEM_HEIGHT_MAP = { sm: 41, md: 49, lg: 57 } as const;\n\nconst List = React.forwardRef<HTMLDivElement, ListProps>((props, ref) => {\n  const {\n    dataSource = [],\n    renderItem,\n    header,\n    footer,\n    loading = false,\n    bordered = false,\n    split = true,\n    size,\n    grid,\n    locale,\n    virtual = false,\n    height,\n    itemHeight: itemHeightProp,\n    pagination,\n    prefixCls: customisedCls,\n    className,\n    style,\n    children,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('list', configContext.prefixCls, customisedCls);\n  const listSize = size || configContext.componentSize || 'md';\n\n  if (virtual && height == null) {\n    console.warn('[tiny-design: List] `height` is required when `virtual` is enabled.');\n  }\n  if (virtual && grid) {\n    console.warn('[tiny-design: List] `virtual` is not supported with `grid` mode. Falling back to normal rendering.');\n  }\n\n  const isVirtual = virtual && height != null && !grid;\n\n  const [currentPage, setCurrentPage] = useState(1);\n  const pageSize = pagination && pagination.pageSize ? pagination.pageSize : 10;\n\n  const itemHeight = itemHeightProp ?? ITEM_HEIGHT_MAP[listSize] ?? ITEM_HEIGHT_MAP.md;\n  const { visibleRange, totalHeight, offsetY, onScroll } = useVirtualScroll({\n    itemCount: dataSource.length,\n    itemHeight,\n    containerHeight: height ?? 0,\n  });\n\n  const cls = classNames(prefixCls, className, {\n    [`${prefixCls}_${listSize}`]: listSize,\n    [`${prefixCls}_bordered`]: bordered,\n    [`${prefixCls}_split`]: split,\n    [`${prefixCls}_loading`]: loading,\n    [`${prefixCls}_grid`]: grid,\n  });\n\n  const paginatedData = () => {\n    if (!pagination) return dataSource;\n    const page = pagination.current ?? currentPage;\n    const start = (page - 1) * pageSize;\n    return dataSource.slice(start, start + pageSize);\n  };\n\n  const handlePageChange = (page: number) => {\n    setCurrentPage(page);\n    pagination && pagination.onChange?.(page, pageSize);\n  };\n\n  const renderItems = () => {\n    if (isVirtual) {\n      if (dataSource.length === 0) {\n        return (\n          <div className={`${prefixCls}__empty`}>\n            {locale?.emptyText ?? 'No Data'}\n          </div>\n        );\n      }\n      if (renderItem) {\n        const [start, end] = visibleRange;\n        const visibleItems = dataSource.slice(start, end + 1).map((item, i) => (\n          <React.Fragment key={start + i}>{renderItem(item, start + i)}</React.Fragment>\n        ));\n        return (\n          <div style={{ height: totalHeight, position: 'relative' }}>\n            <div style={{ position: 'absolute', top: 0, left: 0, right: 0, transform: `translateY(${offsetY}px)` }}>\n              {visibleItems}\n            </div>\n          </div>\n        );\n      }\n      return children;\n    }\n\n    const items = paginatedData();\n    if (items.length === 0 && !children) {\n      return (\n        <div className={`${prefixCls}__empty`}>\n          {locale?.emptyText ?? 'No Data'}\n        </div>\n      );\n    }\n    if (renderItem) {\n      const rendered = items.map((item, index) => (\n        <React.Fragment key={index}>{renderItem(item, index)}</React.Fragment>\n      ));\n      if (grid) {\n        return (\n          <div\n            className={`${prefixCls}__grid`}\n            style={{\n              display: 'grid',\n              gridTemplateColumns: `repeat(${grid.column || 3}, 1fr)`,\n              gap: grid.gutter ? `${grid.gutter}px` : undefined,\n            }}\n          >\n            {rendered}\n          </div>\n        );\n      }\n      return rendered;\n    }\n    return children;\n  };\n\n  const showPagination = pagination && !isVirtual;\n  const paginationConfig = pagination && typeof pagination === 'object' ? pagination : undefined;\n  const totalItems = paginationConfig?.total ?? dataSource.length;\n  const activePage = paginationConfig?.current ?? currentPage;\n\n  const bodyCls = classNames(`${prefixCls}__body`, {\n    [`${prefixCls}__body_virtual`]: isVirtual,\n  });\n\n  const bodyStyle: React.CSSProperties | undefined = isVirtual\n    ? { height, overflowY: 'auto' }\n    : undefined;\n\n  return (\n    <div {...otherProps} ref={ref} className={cls} style={style}>\n      {header && <div className={`${prefixCls}__header`}>{header}</div>}\n      <div className={bodyCls} style={bodyStyle} onScroll={isVirtual ? onScroll : undefined}>\n        {loading ? (\n          <div className={`${prefixCls}__loading`}>Loading...</div>\n        ) : (\n          renderItems()\n        )}\n      </div>\n      {footer && <div className={`${prefixCls}__footer`}>{footer}</div>}\n      {showPagination && (\n        <Pagination\n          current={activePage}\n          total={totalItems}\n          pageSize={pageSize}\n          align={paginationConfig?.align ?? 'right'}\n          size={paginationConfig?.size}\n          disabled={paginationConfig?.disabled}\n          onChange={(page) => handlePageChange(page)}\n          style={{ padding: 16 }}\n        />\n      )}\n    </div>\n  );\n});\n\nList.displayName = 'List';\nexport default List;\n"],"mappings":"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"}

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

package/lib/popup/style/index.css

@@ -1,19 +1,19 @@
 .ty-popup {
   box-sizing: border-box;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   white-space: nowrap;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   text-align: left;
   box-shadow: var(--ty-shadow-popup);
   z-index: 999;
 }
-.ty-popup__arrow, .ty-popup__arrow:before {
+.ty-popup__arrow, .ty-popup__arrow::before {
   width: 8px;
   height: 8px;
   box-sizing: border-box;
   position: absolute;
 }
-.ty-popup__arrow:before {
+.ty-popup__arrow::before {
   content: "";
   transform: rotate(45deg);
 }
@@ -21,37 +21,37 @@
   background-color: var(--ty-popup-light-bg);
   color: var(--ty-color-text-secondary);
 }
-.ty-popup_light .ty-popup__arrow:before {
+.ty-popup_light .ty-popup__arrow::before {
   background: var(--ty-popup-light-bg);
 }
 .ty-popup_dark {
   background-color: var(--ty-popup-dark-bg);
   color: #fff;
 }
-.ty-popup_dark .ty-popup__arrow:before {
+.ty-popup_dark .ty-popup__arrow::before {
   background: var(--ty-popup-dark-bg);
 }
 .ty-popup[data-popper-placement^=top] > .ty-popup__arrow {
   bottom: -4px;
 }
-.ty-popup[data-popper-placement^=top] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=top] > .ty-popup__arrow::before {
   box-shadow: 3px 3px 7px var(--ty-popup-arrow-shadow);
 }
 .ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow {
   top: -4px;
 }
-.ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=bottom] > .ty-popup__arrow::before {
   box-shadow: -2px -2px 5px var(--ty-popup-arrow-shadow);
 }
 .ty-popup[data-popper-placement^=left] > .ty-popup__arrow {
   right: -4px;
 }
-.ty-popup[data-popper-placement^=left] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=left] > .ty-popup__arrow::before {
   box-shadow: 3px -3px 7px var(--ty-popup-arrow-shadow);
 }
 .ty-popup[data-popper-placement^=right] > .ty-popup__arrow {
   left: -4px;
 }
-.ty-popup[data-popper-placement^=right] > .ty-popup__arrow:before {
+.ty-popup[data-popper-placement^=right] > .ty-popup__arrow::before {
   box-shadow: -3px 3px 7px var(--ty-popup-arrow-shadow);
 }

package/lib/radio/style/_index.scss

@@ -4,16 +4,13 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
 
   &__native {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
+    inset: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
@@ -34,7 +31,7 @@
     align-items: center;
     justify-content: center;
 
-    &:after {
+    &::after {
       box-sizing: border-box;
       display: inline-block;
       content: '';
@@ -54,7 +51,7 @@
 
   &_checked {
     .#{$prefix}-radio {
-      &__inner:after {
+      &__inner::after {
         transform: scale(1);
       }
     }
@@ -69,7 +66,7 @@
       &__inner {
         border-color: var(--ty-radio-disabled-border);
 
-        &:after {
+        &::after {
           background-color: var(--ty-radio-disabled-dot);
         }
 

package/lib/radio/style/index.css

@@ -2,16 +2,13 @@
   position: relative;
   display: inline-flex;
   align-items: center;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   margin-right: 8px;
   color: var(--ty-color-text);
 }
 .ty-radio__native {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
@@ -31,7 +28,7 @@
   align-items: center;
   justify-content: center;
 }
-.ty-radio__inner:after {
+.ty-radio__inner::after {
   box-sizing: border-box;
   display: inline-block;
   content: "";
@@ -46,7 +43,7 @@
   padding: 0 5px;
   line-height: 16px;
 }
-.ty-radio_checked .ty-radio__inner:after {
+.ty-radio_checked .ty-radio__inner::after {
   transform: scale(1);
 }
 .ty-radio_disabled .ty-radio__native {
@@ -55,7 +52,7 @@
 .ty-radio_disabled .ty-radio__inner {
   border-color: var(--ty-radio-disabled-border);
 }
-.ty-radio_disabled .ty-radio__inner:after {
+.ty-radio_disabled .ty-radio__inner::after {
   background-color: var(--ty-radio-disabled-dot);
 }
 .ty-radio_disabled .ty-radio__inner + span {