@tiny-design/react 1.4.0 → 1.5.1

package/es/upload/style/index.css

@@ -30,7 +30,7 @@
   margin: 0;
   padding: 0;
   color: var(--ty-color-text);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   outline: 0;
 }
 .ty-upload__upload-list {
@@ -39,11 +39,11 @@
   padding: 0;
   box-sizing: border-box;
   color: var(--ty-color-text);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-upload__upload-list-item {
   margin-top: 5px;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   transition: background-color 300ms;
 }
 .ty-upload__upload-list-item:hover {
@@ -92,7 +92,7 @@
   text-align: center;
   background: var(--ty-upload-dragger-bg);
   border: 1px dashed var(--ty-upload-dragger-border);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   cursor: pointer;
   transition: border-color 300ms, background-color 300ms;
 }

package/es/waterfall/waterfall.js

@@ -57,13 +57,18 @@ const Waterfall = React.forwardRef((props, ref) => {
 		for (const [, el] of itemRefsMap.current) if (el) observer.observe(el);
 		return () => observer.disconnect();
 	}, [items, collectItemSizes]);
+	const prevLayoutRef = useRef("");
 	useEffect(() => {
 		if (!onLayoutChange || !items || items.length === 0) return;
 		if (!items.every((item) => itemPositions.has(item.key))) return;
-		onLayoutChange(items.map((item) => ({
+		const sortInfo = items.map((item) => ({
 			key: item.key,
 			column: itemPositions.get(item.key).column
-		})));
+		}));
+		const layoutKey = sortInfo.map((s) => `${s.key}:${s.column}`).join(",");
+		if (layoutKey === prevLayoutRef.current) return;
+		prevLayoutRef.current = layoutKey;
+		onLayoutChange(sortInfo);
 	}, [
 		itemPositions,
 		items,

package/es/waterfall/waterfall.js.map

@@ -1 +1 @@
-{"version":3,"file":"waterfall.js","names":["Transition"],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ============== Exiting items (replaces TransitionGroup) ==============\n  const prevItemsRef = useRef<WaterfallItem[]>(items || []);\n  const [exitingItems, setExitingItems] = useState<Map<React.Key, WaterfallItem>>(new Map());\n\n  useEffect(() => {\n    const currentKeys = new Set((items || []).map((item, i) => item.key ?? i));\n    const removed = new Map<React.Key, WaterfallItem>();\n\n    prevItemsRef.current.forEach((item, index) => {\n      const key = item.key ?? index;\n      if (!currentKeys.has(key)) {\n        removed.set(key, item);\n      }\n    });\n\n    if (removed.size > 0) {\n      setExitingItems((prev) => {\n        const next = new Map(prev);\n        removed.forEach((item, key) => next.set(key, item));\n        return next;\n      });\n    }\n\n    prevItemsRef.current = items || [];\n  }, [items]);\n\n  const handleExited = useCallback((key: React.Key) => {\n    itemRefsMap.current.delete(key);\n    setExitingItems((prev) => {\n      const next = new Map(prev);\n      next.delete(key);\n      return next;\n    });\n    collectItemSizes();\n  }, [collectItemSizes]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  const renderItem = (item: WaterfallItem, index: number, isExiting: boolean) => {\n    const key = item.key ?? index;\n    const position = itemPositions.get(key);\n    const hasPosition = !!position;\n    const columnIndex = position?.column ?? 0;\n\n    const itemStyle: React.CSSProperties = {\n      position: 'absolute',\n      width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n      left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n      top: position?.top ?? 0,\n      // Only transition position changes after initial placement\n      transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n      // Hide until position is computed so items don't flash at (0,0)\n      opacity: hasPosition ? 1 : 0,\n    };\n\n    const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n    return (\n      <Transition\n        key={key}\n        in={!isExiting}\n        timeout={300}\n        appear={false}\n        unmountOnExit={true}\n        classNames={`${prefixCls}__item-fade`}\n        onExited={() => handleExited(key)}\n      >\n        <div\n          ref={(el) => setItemRef(key, el)}\n          className={`${prefixCls}__item`}\n          style={itemStyle}\n        >\n          {content}\n        </div>\n      </Transition>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      {mergedItems.map((item, index) => renderItem(item, index, false))}\n      {Array.from(exitingItems.entries()).map(([key, item]) =>\n        renderItem(item, Number(key), true)\n      )}\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":"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"}
+{"version":3,"file":"waterfall.js","names":["Transition"],"sources":["../../src/waterfall/waterfall.tsx"],"sourcesContent":["import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport Transition from '../transition';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { Breakpoint, WaterfallItem, WaterfallProps } from './types';\nimport useBreakpoint, { responsiveArray } from './hooks/use-breakpoint';\nimport usePositions, { ItemHeightData } from './hooks/use-positions';\n\nconst Waterfall = React.forwardRef<HTMLDivElement, WaterfallProps>((props, ref) => {\n  const {\n    prefixCls: customisedCls,\n    className,\n    style,\n    columns = 3,\n    gutter = 0,\n    items,\n    itemRender,\n    onLayoutChange,\n    ...otherProps\n  } = props;\n\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('waterfall', configContext.prefixCls, customisedCls);\n\n  // ===================== Breakpoint =====================\n  const screens = useBreakpoint();\n\n  const columnCount = React.useMemo<number>(() => {\n    if (typeof columns === 'number') {\n      return columns;\n    }\n\n    const matchingBreakpoint = responsiveArray.find(\n      (bp: Breakpoint) => screens[bp] && columns[bp] !== undefined,\n    );\n\n    if (matchingBreakpoint) {\n      return columns[matchingBreakpoint] as number;\n    }\n\n    return columns.xs ?? 1;\n  }, [columns, screens]);\n\n  // ====================== Gutter ======================\n  const [horizontalGutter, verticalGutter] = Array.isArray(gutter)\n    ? gutter\n    : [gutter, gutter];\n\n  // =================== Item Refs ===================\n  const itemRefsMap = useRef<Map<React.Key, HTMLDivElement | null>>(new Map());\n\n  const setItemRef = useCallback((key: React.Key, el: HTMLDivElement | null) => {\n    itemRefsMap.current.set(key, el);\n  }, []);\n\n  // ================= Item Heights ==================\n  const [itemHeights, setItemHeights] = useState<ItemHeightData[]>([]);\n\n  const collectItemSizes = useCallback(() => {\n    if (!items || items.length === 0) {\n      setItemHeights([]);\n      return;\n    }\n\n    const nextHeights = items.map<ItemHeightData>((item, index) => {\n      const key = item.key ?? index;\n      const el = itemRefsMap.current.get(key);\n      const height = el ? el.getBoundingClientRect().height : 0;\n      return [key, height, item.column];\n    });\n\n    setItemHeights((prev) => {\n      const isSame =\n        prev.length === nextHeights.length &&\n        prev.every((p, i) => p[0] === nextHeights[i][0] && p[1] === nextHeights[i][1]);\n      return isSame ? prev : nextHeights;\n    });\n  }, [items]);\n\n  // ================= Positions ==================\n  const [itemPositions, totalHeight] = usePositions(itemHeights, columnCount, verticalGutter);\n\n  // Collect sizes on items/columns change\n  useEffect(() => {\n    collectItemSizes();\n  }, [items, columnCount, collectItemSizes]);\n\n  // ResizeObserver for dynamic content\n  useEffect(() => {\n    if (typeof ResizeObserver === 'undefined') return;\n\n    const observer = new ResizeObserver(() => {\n      collectItemSizes();\n    });\n\n    for (const [, el] of itemRefsMap.current) {\n      if (el) observer.observe(el);\n    }\n\n    return () => observer.disconnect();\n  }, [items, collectItemSizes]);\n\n  // ================ onLayoutChange ================\n  const prevLayoutRef = useRef<string>('');\n\n  useEffect(() => {\n    if (!onLayoutChange || !items || items.length === 0) return;\n\n    const allPositioned = items.every((item) => itemPositions.has(item.key));\n    if (!allPositioned) return;\n\n    const sortInfo = items.map((item) => ({\n      key: item.key,\n      column: itemPositions.get(item.key)!.column,\n    }));\n\n    const layoutKey = sortInfo.map((s) => `${s.key}:${s.column}`).join(',');\n    if (layoutKey === prevLayoutRef.current) return;\n    prevLayoutRef.current = layoutKey;\n\n    onLayoutChange(sortInfo);\n  }, [itemPositions, items, onLayoutChange]);\n\n  // ============== Exiting items (replaces TransitionGroup) ==============\n  const prevItemsRef = useRef<WaterfallItem[]>(items || []);\n  const [exitingItems, setExitingItems] = useState<Map<React.Key, WaterfallItem>>(new Map());\n\n  useEffect(() => {\n    const currentKeys = new Set((items || []).map((item, i) => item.key ?? i));\n    const removed = new Map<React.Key, WaterfallItem>();\n\n    prevItemsRef.current.forEach((item, index) => {\n      const key = item.key ?? index;\n      if (!currentKeys.has(key)) {\n        removed.set(key, item);\n      }\n    });\n\n    if (removed.size > 0) {\n      setExitingItems((prev) => {\n        const next = new Map(prev);\n        removed.forEach((item, key) => next.set(key, item));\n        return next;\n      });\n    }\n\n    prevItemsRef.current = items || [];\n  }, [items]);\n\n  const handleExited = useCallback((key: React.Key) => {\n    itemRefsMap.current.delete(key);\n    setExitingItems((prev) => {\n      const next = new Map(prev);\n      next.delete(key);\n      return next;\n    });\n    collectItemSizes();\n  }, [collectItemSizes]);\n\n  // ==================== Render ====================\n  const cls = classNames(prefixCls, className);\n\n  const containerStyle: React.CSSProperties = {\n    ...style,\n    position: 'relative',\n    height: totalHeight || undefined,\n  };\n\n  const mergedItems = items || [];\n\n  const renderItem = (item: WaterfallItem, index: number, isExiting: boolean) => {\n    const key = item.key ?? index;\n    const position = itemPositions.get(key);\n    const hasPosition = !!position;\n    const columnIndex = position?.column ?? 0;\n\n    const itemStyle: React.CSSProperties = {\n      position: 'absolute',\n      width: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount})`,\n      left: `calc((100% - ${horizontalGutter * (columnCount - 1)}px) / ${columnCount} * ${columnIndex} + ${horizontalGutter * columnIndex}px)`,\n      top: position?.top ?? 0,\n      // Only transition position changes after initial placement\n      transition: hasPosition ? 'top 0.3s ease, left 0.3s ease, opacity 0.3s ease' : 'none',\n      // Hide until position is computed so items don't flash at (0,0)\n      opacity: hasPosition ? 1 : 0,\n    };\n\n    const content = item.children ?? itemRender?.({ ...item, index, column: columnIndex });\n\n    return (\n      <Transition\n        key={key}\n        in={!isExiting}\n        timeout={300}\n        appear={false}\n        unmountOnExit={true}\n        classNames={`${prefixCls}__item-fade`}\n        onExited={() => handleExited(key)}\n      >\n        <div\n          ref={(el) => setItemRef(key, el)}\n          className={`${prefixCls}__item`}\n          style={itemStyle}\n        >\n          {content}\n        </div>\n      </Transition>\n    );\n  };\n\n  return (\n    <div\n      ref={ref}\n      {...otherProps}\n      className={cls}\n      style={containerStyle}\n      onLoad={collectItemSizes}\n      onError={collectItemSizes}\n    >\n      {mergedItems.map((item, index) => renderItem(item, index, false))}\n      {Array.from(exitingItems.entries()).map(([key, item]) =>\n        renderItem(item, Number(key), true)\n      )}\n    </div>\n  );\n});\n\nWaterfall.displayName = 'Waterfall';\n\nexport default Waterfall;\n"],"mappings":";;;;;;;;;AASA,MAAM,YAAY,MAAM,YAA4C,OAAO,QAAQ;CACjF,MAAM,EACJ,WAAW,eACX,WACA,OACA,UAAU,GACV,SAAS,GACT,OACA,YACA,gBACA,GAAG,eACD;CAGJ,MAAM,YAAY,aAAa,aADT,WAAW,cAAc,CACW,WAAW,cAAc;CAGnF,MAAM,UAAU,eAAe;CAE/B,MAAM,cAAc,MAAM,cAAsB;AAC9C,MAAI,OAAO,YAAY,SACrB,QAAO;EAGT,MAAM,qBAAqB,gBAAgB,MACxC,OAAmB,QAAQ,OAAO,QAAQ,QAAQ,KAAA,EACpD;AAED,MAAI,mBACF,QAAO,QAAQ;AAGjB,SAAO,QAAQ,MAAM;IACpB,CAAC,SAAS,QAAQ,CAAC;CAGtB,MAAM,CAAC,kBAAkB,kBAAkB,MAAM,QAAQ,OAAO,GAC5D,SACA,CAAC,QAAQ,OAAO;CAGpB,MAAM,cAAc,uBAA8C,IAAI,KAAK,CAAC;CAE5E,MAAM,aAAa,aAAa,KAAgB,OAA8B;AAC5E,cAAY,QAAQ,IAAI,KAAK,GAAG;IAC/B,EAAE,CAAC;CAGN,MAAM,CAAC,aAAa,kBAAkB,SAA2B,EAAE,CAAC;CAEpE,MAAM,mBAAmB,kBAAkB;AACzC,MAAI,CAAC,SAAS,MAAM,WAAW,GAAG;AAChC,kBAAe,EAAE,CAAC;AAClB;;EAGF,MAAM,cAAc,MAAM,KAAqB,MAAM,UAAU;GAC7D,MAAM,MAAM,KAAK,OAAO;GACxB,MAAM,KAAK,YAAY,QAAQ,IAAI,IAAI;AAEvC,UAAO;IAAC;IADO,KAAK,GAAG,uBAAuB,CAAC,SAAS;IACnC,KAAK;IAAO;IACjC;AAEF,kBAAgB,SAAS;AAIvB,UAFE,KAAK,WAAW,YAAY,UAC5B,KAAK,OAAO,GAAG,MAAM,EAAE,OAAO,YAAY,GAAG,MAAM,EAAE,OAAO,YAAY,GAAG,GAAG,GAChE,OAAO;IACvB;IACD,CAAC,MAAM,CAAC;CAGX,MAAM,CAAC,eAAe,eAAe,aAAa,aAAa,aAAa,eAAe;AAG3F,iBAAgB;AACd,oBAAkB;IACjB;EAAC;EAAO;EAAa;EAAiB,CAAC;AAG1C,iBAAgB;AACd,MAAI,OAAO,mBAAmB,YAAa;EAE3C,MAAM,WAAW,IAAI,qBAAqB;AACxC,qBAAkB;IAClB;AAEF,OAAK,MAAM,GAAG,OAAO,YAAY,QAC/B,KAAI,GAAI,UAAS,QAAQ,GAAG;AAG9B,eAAa,SAAS,YAAY;IACjC,CAAC,OAAO,iBAAiB,CAAC;CAG7B,MAAM,gBAAgB,OAAe,GAAG;AAExC,iBAAgB;AACd,MAAI,CAAC,kBAAkB,CAAC,SAAS,MAAM,WAAW,EAAG;AAGrD,MAAI,CADkB,MAAM,OAAO,SAAS,cAAc,IAAI,KAAK,IAAI,CAAC,CACpD;EAEpB,MAAM,WAAW,MAAM,KAAK,UAAU;GACpC,KAAK,KAAK;GACV,QAAQ,cAAc,IAAI,KAAK,IAAI,CAAE;GACtC,EAAE;EAEH,MAAM,YAAY,SAAS,KAAK,MAAM,GAAG,EAAE,IAAI,GAAG,EAAE,SAAS,CAAC,KAAK,IAAI;AACvE,MAAI,cAAc,cAAc,QAAS;AACzC,gBAAc,UAAU;AAExB,iBAAe,SAAS;IACvB;EAAC;EAAe;EAAO;EAAe,CAAC;CAG1C,MAAM,eAAe,OAAwB,SAAS,EAAE,CAAC;CACzD,MAAM,CAAC,cAAc,mBAAmB,yBAAwC,IAAI,KAAK,CAAC;AAE1F,iBAAgB;EACd,MAAM,cAAc,IAAI,KAAK,SAAS,EAAE,EAAE,KAAK,MAAM,MAAM,KAAK,OAAO,EAAE,CAAC;EAC1E,MAAM,0BAAU,IAAI,KAA+B;AAEnD,eAAa,QAAQ,SAAS,MAAM,UAAU;GAC5C,MAAM,MAAM,KAAK,OAAO;AACxB,OAAI,CAAC,YAAY,IAAI,IAAI,CACvB,SAAQ,IAAI,KAAK,KAAK;IAExB;AAEF,MAAI,QAAQ,OAAO,EACjB,kBAAiB,SAAS;GACxB,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,WAAQ,SAAS,MAAM,QAAQ,KAAK,IAAI,KAAK,KAAK,CAAC;AACnD,UAAO;IACP;AAGJ,eAAa,UAAU,SAAS,EAAE;IACjC,CAAC,MAAM,CAAC;CAEX,MAAM,eAAe,aAAa,QAAmB;AACnD,cAAY,QAAQ,OAAO,IAAI;AAC/B,mBAAiB,SAAS;GACxB,MAAM,OAAO,IAAI,IAAI,KAAK;AAC1B,QAAK,OAAO,IAAI;AAChB,UAAO;IACP;AACF,oBAAkB;IACjB,CAAC,iBAAiB,CAAC;CAGtB,MAAM,MAAM,WAAW,WAAW,UAAU;CAE5C,MAAM,iBAAsC;EAC1C,GAAG;EACH,UAAU;EACV,QAAQ,eAAe,KAAA;EACxB;CAED,MAAM,cAAc,SAAS,EAAE;CAE/B,MAAM,cAAc,MAAqB,OAAe,cAAuB;EAC7E,MAAM,MAAM,KAAK,OAAO;EACxB,MAAM,WAAW,cAAc,IAAI,IAAI;EACvC,MAAM,cAAc,CAAC,CAAC;EACtB,MAAM,cAAc,UAAU,UAAU;EAExC,MAAM,YAAiC;GACrC,UAAU;GACV,OAAO,gBAAgB,oBAAoB,cAAc,GAAG,QAAQ,YAAY;GAChF,MAAM,gBAAgB,oBAAoB,cAAc,GAAG,QAAQ,YAAY,KAAK,YAAY,KAAK,mBAAmB,YAAY;GACpI,KAAK,UAAU,OAAO;GAEtB,YAAY,cAAc,qDAAqD;GAE/E,SAAS,cAAc,IAAI;GAC5B;EAED,MAAM,UAAU,KAAK,YAAY,aAAa;GAAE,GAAG;GAAM;GAAO,QAAQ;GAAa,CAAC;AAEtF,SACE,oBAACA,oBAAD;GAEE,IAAI,CAAC;GACL,SAAS;GACT,QAAQ;GACR,eAAe;GACf,YAAY,GAAG,UAAU;GACzB,gBAAgB,aAAa,IAAI;aAEjC,oBAAC,OAAD;IACE,MAAM,OAAO,WAAW,KAAK,GAAG;IAChC,WAAW,GAAG,UAAU;IACxB,OAAO;cAEN;IACG,CAAA;GACK,EAfN,IAeM;;AAIjB,QACE,qBAAC,OAAD;EACO;EACL,GAAI;EACJ,WAAW;EACX,OAAO;EACP,QAAQ;EACR,SAAS;YANX,CAQG,YAAY,KAAK,MAAM,UAAU,WAAW,MAAM,OAAO,MAAM,CAAC,EAChE,MAAM,KAAK,aAAa,SAAS,CAAC,CAAC,KAAK,CAAC,KAAK,UAC7C,WAAW,MAAM,OAAO,IAAI,EAAE,KAAK,CACpC,CACG;;EAER;AAEF,UAAU,cAAc"}

package/lib/alert/alert.js

@@ -27,7 +27,7 @@ const Alert = react.default.forwardRef((props, forwardedRef) => {
 	const closeBtnOnClick = (e) => {
 		ref.current && setClosedStyle(ref.current);
 		setShow(false);
-		onClose && onClose(e);
+		onClose?.(e);
 	};
 	const closeIcon = (closable || closeText) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 		type: "button",
@@ -75,7 +75,7 @@ const Alert = react.default.forwardRef((props, forwardedRef) => {
 			children: [
 				icon && renderIcon(),
 				/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", { children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: `${prefixCls}__title`,
+					className: (0, classnames.default)(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children }),
 					children: title
 				}), children] }),
 				closeIcon

package/lib/alert/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":["React","getPrefixCls","ConfigContext","CheckCircle","InfoCircle","WarningCircle","CloseCircle","Transition"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import React, { useState, useRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { AlertProps } from './types';\nimport Transition from '../transition';\n\nconst setClosedStyle = (node: HTMLElement): void => {\n  node.style.borderTopWidth = '0';\n  node.style.paddingTop = '0';\n  node.style.marginTop = '0';\n  node.style.height = '0';\n  node.style.paddingBottom = '0';\n  node.style.borderBottomWidth = '0';\n  node.style.marginBottom = '0';\n};\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef) => {\n  const {\n    type = 'info',\n    iconSize = 14,\n    prefixCls: customisedCls,\n    title,\n    icon,\n    closeText,\n    closable,\n    afterClose,\n    onClose,\n    children,\n    className,\n    style,\n    ...otherProps\n  } = props;\n  const [isShow, setShow] = useState(true);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('alert', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, [`${prefixCls}_${type}`]);\n\n  const closeBtnOnClick = (e: React.MouseEvent<HTMLSpanElement>): void => {\n    ref.current && setClosedStyle(ref.current as HTMLDivElement);\n    setShow(false);\n    onClose && onClose(e);\n  };\n\n  // Setting close text attribute also allows to be closable\n  const closeIcon = (closable || closeText) && (\n    <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Close\">\n      {closeText || '✕'}\n    </button>\n  );\n\n  const renderIcon = (): React.ReactNode => {\n    if (typeof icon === 'boolean') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return icon;\n  };\n\n  return (\n    <Transition timeout={300} in={isShow} nodeRef={ref} onExited={afterClose}>\n      <div {...otherProps} role=\"alert\" className={cls} style={style} ref={(node) => {\n        ref.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      }}>\n        {icon && renderIcon()}\n        <div>\n          {title && <p className={`${prefixCls}__title`}>{title}</p>}\n          {children}\n        </div>\n        {closeIcon}\n      </div>\n    </Transition>\n  );\n});\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,kBAAkB,SAA4B;AAClD,MAAK,MAAM,iBAAiB;AAC5B,MAAK,MAAM,aAAa;AACxB,MAAK,MAAM,YAAY;AACvB,MAAK,MAAM,SAAS;AACpB,MAAK,MAAM,gBAAgB;AAC3B,MAAK,MAAM,oBAAoB;AAC/B,MAAK,MAAM,eAAe;;AAG5B,MAAM,QAAQA,MAAAA,QAAM,YAAwC,OAAO,iBAAiB;CAClF,MAAM,EACJ,OAAO,QACP,WAAW,IACX,WAAW,eACX,OACA,MACA,WACA,UACA,YACA,SACA,UACA,WACA,OACA,GAAG,eACD;CACJ,MAAM,CAAC,QAAQ,YAAA,GAAA,MAAA,UAAoB,KAAK;CACxC,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,YAAYC,gBAAAA,aAAa,UAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC;CAEtE,MAAM,mBAAmB,MAA+C;AACtE,MAAI,WAAW,eAAe,IAAI,QAA0B;AAC5D,UAAQ,MAAM;AACd,aAAW,QAAQ,EAAE;;CAIvB,MAAM,aAAa,YAAY,cAC7B,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAQ,MAAK;EAAS,WAAW,GAAG,UAAU;EAAc,SAAS;EAAiB,cAAW;YAC9F,aAAa;EACP,CAAA;CAGX,MAAM,mBAAoC;AACxC,MAAI,OAAO,SAAS,UAClB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACzE,KAAK,OACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACxE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;IAAe,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GAC3E,KAAK,QACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;;AAI7E,SAAO;;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;EAAY,SAAS;EAAK,IAAI;EAAQ,SAAS;EAAK,UAAU;YAC5D,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI;GAAY,MAAK;GAAQ,WAAW;GAAY;GAAO,MAAM,SAAS;AAC7E,QAAI,UAAU;AACd,QAAI,OAAO,iBAAiB,WAAY,cAAa,KAAK;aACjD,aAAc,cAAa,UAAU;;aAHhD;IAKG,QAAQ,YAAY;IACrB,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,WAAW,GAAG,UAAU;eAAW;KAAU,CAAA,EACzD,SACG,EAAA,CAAA;IACL;IACG;;EACK,CAAA;EAEf;AAEF,MAAM,cAAc"}
+{"version":3,"file":"alert.js","names":["React","getPrefixCls","ConfigContext","CheckCircle","InfoCircle","WarningCircle","CloseCircle","Transition"],"sources":["../../src/alert/alert.tsx"],"sourcesContent":["import React, { useState, useRef, useContext } from 'react';\nimport classNames from 'classnames';\nimport { ConfigContext } from '../config-provider/config-context';\nimport { getPrefixCls } from '../_utils/general';\nimport { CheckCircle, CloseCircle, InfoCircle, WarningCircle } from '../_utils/components';\nimport { AlertProps } from './types';\nimport Transition from '../transition';\n\nconst setClosedStyle = (node: HTMLElement): void => {\n  node.style.borderTopWidth = '0';\n  node.style.paddingTop = '0';\n  node.style.marginTop = '0';\n  node.style.height = '0';\n  node.style.paddingBottom = '0';\n  node.style.borderBottomWidth = '0';\n  node.style.marginBottom = '0';\n};\n\nconst Alert = React.forwardRef<HTMLDivElement, AlertProps>((props, forwardedRef) => {\n  const {\n    type = 'info',\n    iconSize = 14,\n    prefixCls: customisedCls,\n    title,\n    icon,\n    closeText,\n    closable,\n    afterClose,\n    onClose,\n    children,\n    className,\n    style,\n    ...otherProps\n  } = props;\n  const [isShow, setShow] = useState(true);\n  const ref = useRef<HTMLDivElement | null>(null);\n  const configContext = useContext(ConfigContext);\n  const prefixCls = getPrefixCls('alert', configContext.prefixCls, customisedCls);\n  const cls = classNames(prefixCls, className, [`${prefixCls}_${type}`]);\n\n  const closeBtnOnClick = (e: React.MouseEvent<HTMLSpanElement>): void => {\n    ref.current && setClosedStyle(ref.current as HTMLDivElement);\n    setShow(false);\n    onClose?.(e);\n  };\n\n  // Setting close text attribute also allows to be closable\n  const closeIcon = (closable || closeText) && (\n    <button type=\"button\" className={`${prefixCls}__close-btn`} onClick={closeBtnOnClick} aria-label=\"Close\">\n      {closeText || '✕'}\n    </button>\n  );\n\n  const renderIcon = (): React.ReactNode => {\n    if (typeof icon === 'boolean') {\n      switch (type) {\n        case 'success':\n          return <CheckCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'info':\n          return <InfoCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'warning':\n          return <WarningCircle size={iconSize} className={`${prefixCls}__icon`} />;\n        case 'error':\n          return <CloseCircle size={iconSize} className={`${prefixCls}__icon`} />;\n      }\n    }\n\n    return icon;\n  };\n\n  return (\n    <Transition timeout={300} in={isShow} nodeRef={ref} onExited={afterClose}>\n      <div {...otherProps} role=\"alert\" className={cls} style={style} ref={(node) => {\n        ref.current = node;\n        if (typeof forwardedRef === 'function') forwardedRef(node);\n        else if (forwardedRef) forwardedRef.current = node;\n      }}>\n        {icon && renderIcon()}\n        <div>\n          {title && <p className={classNames(`${prefixCls}__title`, { [`${prefixCls}__title_has-content`]: children })}>{title}</p>}\n          {children}\n        </div>\n        {closeIcon}\n      </div>\n    </Transition>\n  );\n});\n\nAlert.displayName = 'Alert';\n\nexport default Alert;\n"],"mappings":";;;;;;;;;;;AAQA,MAAM,kBAAkB,SAA4B;AAClD,MAAK,MAAM,iBAAiB;AAC5B,MAAK,MAAM,aAAa;AACxB,MAAK,MAAM,YAAY;AACvB,MAAK,MAAM,SAAS;AACpB,MAAK,MAAM,gBAAgB;AAC3B,MAAK,MAAM,oBAAoB;AAC/B,MAAK,MAAM,eAAe;;AAG5B,MAAM,QAAQA,MAAAA,QAAM,YAAwC,OAAO,iBAAiB;CAClF,MAAM,EACJ,OAAO,QACP,WAAW,IACX,WAAW,eACX,OACA,MACA,WACA,UACA,YACA,SACA,UACA,WACA,OACA,GAAG,eACD;CACJ,MAAM,CAAC,QAAQ,YAAA,GAAA,MAAA,UAAoB,KAAK;CACxC,MAAM,OAAA,GAAA,MAAA,QAAoC,KAAK;CAE/C,MAAM,YAAYC,gBAAAA,aAAa,UAAA,GAAA,MAAA,YADEC,uBAAAA,cAAc,CACO,WAAW,cAAc;CAC/E,MAAM,OAAA,GAAA,WAAA,SAAiB,WAAW,WAAW,CAAC,GAAG,UAAU,GAAG,OAAO,CAAC;CAEtE,MAAM,mBAAmB,MAA+C;AACtE,MAAI,WAAW,eAAe,IAAI,QAA0B;AAC5D,UAAQ,MAAM;AACd,YAAU,EAAE;;CAId,MAAM,aAAa,YAAY,cAC7B,iBAAA,GAAA,kBAAA,KAAC,UAAD;EAAQ,MAAK;EAAS,WAAW,GAAG,UAAU;EAAc,SAAS;EAAiB,cAAW;YAC9F,aAAa;EACP,CAAA;CAGX,MAAM,mBAAoC;AACxC,MAAI,OAAO,SAAS,UAClB,SAAQ,MAAR;GACE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACzE,KAAK,OACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,YAAD;IAAY,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GACxE,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,eAAD;IAAe,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;GAC3E,KAAK,QACH,QAAO,iBAAA,GAAA,kBAAA,KAACC,mBAAAA,aAAD;IAAa,MAAM;IAAU,WAAW,GAAG,UAAU;IAAW,CAAA;;AAI7E,SAAO;;AAGT,QACE,iBAAA,GAAA,kBAAA,KAACC,cAAAA,SAAD;EAAY,SAAS;EAAK,IAAI;EAAQ,SAAS;EAAK,UAAU;YAC5D,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,GAAI;GAAY,MAAK;GAAQ,WAAW;GAAY;GAAO,MAAM,SAAS;AAC7E,QAAI,UAAU;AACd,QAAI,OAAO,iBAAiB,WAAY,cAAa,KAAK;aACjD,aAAc,cAAa,UAAU;;aAHhD;IAKG,QAAQ,YAAY;IACrB,iBAAA,GAAA,kBAAA,MAAC,OAAD,EAAA,UAAA,CACG,SAAS,iBAAA,GAAA,kBAAA,KAAC,KAAD;KAAG,YAAA,GAAA,WAAA,SAAsB,GAAG,UAAU,UAAU,GAAG,GAAG,UAAU,uBAAuB,UAAU,CAAC;eAAG;KAAU,CAAA,EACxH,SACG,EAAA,CAAA;IACL;IACG;;EACK,CAAA;EAEf;AAEF,MAAM,cAAc"}

package/lib/alert/style/_index.scss

@@ -7,9 +7,9 @@
   box-sizing: border-box;
   padding: 10px 30px 10px 13px;
   position: relative;
-  font-weight: $font-weight;
+  font-weight: var(--ty-font-weight);
   opacity: 1;
-  font-size: $font-size-base;
+  font-size: var(--ty-font-size-base);
   transition: all 300ms;
   transform-origin: center top;
   overflow: hidden;
@@ -22,9 +22,13 @@
 
   &__title {
     box-sizing: border-box;
-    margin: 0 0 5px;
-    font-size: 18px;
+    margin: 0;
+    font-size: 17px;
     font-weight: 500;
+
+    &_has-content {
+      margin-bottom: 5px;
+    }
   }
 
   &__desc {

package/lib/alert/style/index.css

@@ -4,9 +4,9 @@
   box-sizing: border-box;
   padding: 10px 30px 10px 13px;
   position: relative;
-  font-weight: 400;
+  font-weight: var(--ty-font-weight);
   opacity: 1;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
   transition: all 300ms;
   transform-origin: center top;
   overflow: hidden;
@@ -18,10 +18,13 @@
 }
 .ty-alert__title {
   box-sizing: border-box;
-  margin: 0 0 5px;
-  font-size: 18px;
+  margin: 0;
+  font-size: 17px;
   font-weight: 500;
 }
+.ty-alert__title_has-content {
+  margin-bottom: 5px;
+}
 .ty-alert__desc {
   box-sizing: border-box;
   line-height: 16px;

package/lib/auto-complete/style/_index.scss

@@ -18,12 +18,11 @@
     list-style-type: none;
     background-color: var(--ty-select-dropdown-bg);
     box-sizing: border-box;
-    overflow-x: hidden;
-    overflow-y: auto;
+    overflow: hidden auto;
     z-index: 10;
     box-shadow: var(--ty-shadow-popup);
-    border-radius: $border-radius;
-    font-size: $font-size-base;
+    border-radius: var(--ty-border-radius);
+    font-size: var(--ty-font-size-base);
     max-height: $select-dropdown-max-height;
   }
 
@@ -32,7 +31,7 @@
     padding: 16px;
     text-align: center;
     color: var(--ty-color-text-quaternary);
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 }
 

package/lib/auto-complete/style/index.css

@@ -14,19 +14,18 @@
   list-style-type: none;
   background-color: var(--ty-select-dropdown-bg);
   box-sizing: border-box;
-  overflow-x: hidden;
-  overflow-y: auto;
+  overflow: hidden auto;
   z-index: 10;
   box-shadow: var(--ty-shadow-popup);
-  border-radius: 2px;
-  font-size: 1rem;
+  border-radius: var(--ty-border-radius);
+  font-size: var(--ty-font-size-base);
   max-height: 300px;
 }
 .ty-auto-complete__empty {
   padding: 16px;
   text-align: center;
   color: var(--ty-color-text-quaternary);
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 
 .ty-auto-complete-option {

package/lib/breadcrumb/style/index.css

@@ -5,7 +5,7 @@
   display: flex;
   align-items: center;
   color: var(--ty-color-text-tertiary);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-breadcrumb-item__separator {
   margin: 0 8px;

package/lib/breadcrumb/types.d.ts

@@ -4,7 +4,7 @@ import React, { ReactElement } from "react";
 //#region src/breadcrumb/types.d.ts
 interface BreadcrumbProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['nav']> {
   separator?: React.ReactNode;
-  children: ReactElement<BreadcrumbItemProps>;
+  children: ReactElement<BreadcrumbItemProps> | ReactElement<BreadcrumbItemProps>[];
 }
 interface BreadcrumbItemProps extends BaseProps, React.PropsWithoutRef<JSX.IntrinsicElements['li']> {
   separator?: React.ReactNode;

package/lib/button/style/index.css

@@ -41,9 +41,9 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-  line-height: 1.5;
+  line-height: var(--ty-line-height-base);
 }
 .ty-btn__loader {
   display: inline-block;
@@ -59,7 +59,7 @@
 .ty-btn__icon-container, .ty-btn__loader {
   display: inline-block;
   pointer-events: none;
-  line-height: 1.5;
+  line-height: var(--ty-line-height-base);
   vertical-align: middle;
 }
 .ty-btn__icon-container + span, .ty-btn__loader + span {
@@ -311,18 +311,18 @@
 }
 .ty-btn_sm {
   padding: 0 10px;
-  font-size: 0.875rem;
-  height: 24px;
+  font-size: var(--ty-font-size-sm);
+  height: var(--ty-height-sm);
 }
 .ty-btn_md {
   padding: 0 15px;
-  font-size: 1rem;
-  height: 32px;
+  font-size: var(--ty-font-size-base);
+  height: var(--ty-height-md);
 }
 .ty-btn_lg {
   padding: 0 28px;
-  font-size: 1.25rem;
-  height: 42px;
+  font-size: var(--ty-font-size-lg);
+  height: var(--ty-height-lg);
 }
 .ty-btn_block {
   width: 100%;
@@ -331,7 +331,7 @@
   margin: 0;
 }
 .ty-btn_round {
-  border-radius: 42px;
+  border-radius: var(--ty-height-lg);
 }
 .ty-btn_loading {
   position: relative;
@@ -370,12 +370,12 @@
   z-index: 1;
 }
 .ty-btn-group .ty-btn:first-child {
-  border-top-left-radius: 2px;
-  border-bottom-left-radius: 2px;
+  border-top-left-radius: var(--ty-border-radius);
+  border-bottom-left-radius: var(--ty-border-radius);
 }
 .ty-btn-group .ty-btn:last-child {
-  border-top-right-radius: 2px;
-  border-bottom-right-radius: 2px;
+  border-top-right-radius: var(--ty-border-radius);
+  border-bottom-right-radius: var(--ty-border-radius);
 }
 .ty-btn-group_round .ty-btn:first-child {
   border-top-left-radius: 30px;

package/lib/calendar/style/_index.scss

@@ -3,7 +3,7 @@
 .#{$prefix}-calendar {
   background: var(--ty-calendar-bg, #fff);
   border: 1px solid var(--ty-calendar-border, #{$gray-200});
-  border-radius: $border-radius;
+  border-radius: var(--ty-border-radius);
 
   &_fullscreen {
     width: 100%;
@@ -30,7 +30,7 @@
     border: none;
     background: transparent;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     font-size: 18px;
     color: var(--ty-color-text, #{$gray-700});
 
@@ -41,7 +41,7 @@
 
   &__title {
     font-weight: 500;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
   }
 
   &__title-btn {
@@ -51,7 +51,7 @@
     font-weight: inherit;
     font-size: inherit;
     padding: 4px 8px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     color: var(--ty-color-text, #{$gray-800});
 
     &:hover {
@@ -73,7 +73,7 @@
     padding: 8px 0;
     text-align: center;
     font-weight: 500;
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
     color: var(--ty-color-text-secondary, #{$gray-600});
   }
 
@@ -111,7 +111,7 @@
     &_selected .#{$prefix}-calendar__cell-inner {
       background: var(--ty-color-primary, #{$primary-color});
       color: #fff;
-      border-radius: $border-radius;
+      border-radius: var(--ty-border-radius);
     }
 
     &_selected .#{$prefix}-calendar__cell-date {
@@ -121,7 +121,7 @@
 
   &__cell-inner {
     padding: 4px;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     min-height: 24px;
     display: flex;
     flex-direction: column;
@@ -139,7 +139,7 @@
     line-height: 24px;
     min-width: 24px;
     text-align: center;
-    font-size: $font-size-sm;
+    font-size: var(--ty-font-size-sm);
   }
 
   &__cell-content {
@@ -159,7 +159,7 @@
     text-align: center;
     padding: 16px 8px;
     cursor: pointer;
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     transition: all 0.2s;
 
     &:hover {

package/lib/calendar/style/index.css

@@ -1,7 +1,7 @@
 .ty-calendar {
   background: var(--ty-calendar-bg, #fff);
   border: 1px solid var(--ty-calendar-border, #e9ecef);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-calendar_fullscreen {
   width: 100%;
@@ -25,7 +25,7 @@
   border: none;
   background: transparent;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   font-size: 18px;
   color: var(--ty-color-text, #525f7f);
 }
@@ -34,7 +34,7 @@
 }
 .ty-calendar__title {
   font-weight: 500;
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-calendar__title-btn {
   border: none;
@@ -43,7 +43,7 @@
   font-weight: inherit;
   font-size: inherit;
   padding: 4px 8px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   color: var(--ty-color-text, #32325d);
 }
 .ty-calendar__title-btn:hover {
@@ -61,7 +61,7 @@
   padding: 8px 0;
   text-align: center;
   font-weight: 500;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
   color: var(--ty-color-text-secondary, #8898aa);
 }
 .ty-calendar__cell {
@@ -92,14 +92,14 @@
 .ty-calendar__cell_selected .ty-calendar__cell-inner {
   background: var(--ty-color-primary, #6e41bf);
   color: #fff;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
 }
 .ty-calendar__cell_selected .ty-calendar__cell-date {
   color: inherit;
 }
 .ty-calendar__cell-inner {
   padding: 4px;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   min-height: 24px;
   display: flex;
   flex-direction: column;
@@ -115,7 +115,7 @@
   line-height: 24px;
   min-width: 24px;
   text-align: center;
-  font-size: 0.875rem;
+  font-size: var(--ty-font-size-sm);
 }
 .ty-calendar__cell-content {
   font-size: 12px;
@@ -131,7 +131,7 @@
   text-align: center;
   padding: 16px 8px;
   cursor: pointer;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: all 0.2s;
 }
 .ty-calendar__month-cell:hover {

package/lib/card/style/index.css

@@ -2,7 +2,7 @@
   box-sizing: border-box;
   padding: 0;
   margin: 0;
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   transition: all 0.3s;
   background-color: var(--ty-card-bg);
 }
@@ -10,7 +10,7 @@
   margin-top: 15px;
 }
 .ty-card > img:first-child {
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--ty-border-radius) var(--ty-border-radius) 0 0;
 }
 .ty-card_bordered {
   border: 1px solid var(--ty-card-border);
@@ -36,7 +36,7 @@
   font-size: 16px;
   background: transparent;
   border-bottom: 1px solid var(--ty-card-border);
-  border-radius: 2px 2px 0 0;
+  border-radius: var(--ty-border-radius) var(--ty-border-radius) 0 0;
 }
 .ty-card__body {
   box-sizing: border-box;

package/lib/cascader/style/_index.scss

@@ -11,20 +11,20 @@
   }
 
   &_sm &__selector {
-    height: $height-sm;
-    font-size: $font-size-sm;
+    height: var(--ty-height-sm);
+    font-size: var(--ty-font-size-sm);
     padding: 0 28px 0 8px;
   }
 
   &_md &__selector {
-    height: $height-md;
-    font-size: $font-size-base;
+    height: var(--ty-height-md);
+    font-size: var(--ty-font-size-base);
     padding: 0 32px 0 10px;
   }
 
   &_lg &__selector {
-    height: $height-lg;
-    font-size: $font-size-lg;
+    height: var(--ty-height-lg);
+    font-size: var(--ty-font-size-lg);
     padding: 0 36px 0 12px;
   }
 
@@ -33,7 +33,7 @@
     align-items: center;
     width: 100%;
     border: 1px solid var(--ty-cascader-border, #{$gray-300});
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     background: var(--ty-cascader-bg, #fff);
     cursor: pointer;
     transition: all 0.2s;
@@ -95,9 +95,9 @@
 
   &__dropdown {
     background: var(--ty-cascader-dropdown-bg, #fff);
-    border-radius: $border-radius;
+    border-radius: var(--ty-border-radius);
     box-shadow: $select-dropdown-shadow;
-    font-size: $font-size-base;
+    font-size: var(--ty-font-size-base);
   }
 
   &__menus {

package/lib/cascader/style/index.css

@@ -8,18 +8,18 @@
   pointer-events: none;
 }
 .ty-cascader_sm .ty-cascader__selector {
-  height: 24px;
-  font-size: 0.875rem;
+  height: var(--ty-height-sm);
+  font-size: var(--ty-font-size-sm);
   padding: 0 28px 0 8px;
 }
 .ty-cascader_md .ty-cascader__selector {
-  height: 32px;
-  font-size: 1rem;
+  height: var(--ty-height-md);
+  font-size: var(--ty-font-size-base);
   padding: 0 32px 0 10px;
 }
 .ty-cascader_lg .ty-cascader__selector {
-  height: 42px;
-  font-size: 1.25rem;
+  height: var(--ty-height-lg);
+  font-size: var(--ty-font-size-lg);
   padding: 0 36px 0 12px;
 }
 .ty-cascader__selector {
@@ -27,7 +27,7 @@
   align-items: center;
   width: 100%;
   border: 1px solid var(--ty-cascader-border, #dee2e6);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   background: var(--ty-cascader-bg, #fff);
   cursor: pointer;
   transition: all 0.2s;
@@ -79,9 +79,9 @@
 }
 .ty-cascader__dropdown {
   background: var(--ty-cascader-dropdown-bg, #fff);
-  border-radius: 2px;
+  border-radius: var(--ty-border-radius);
   box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
-  font-size: 1rem;
+  font-size: var(--ty-font-size-base);
 }
 .ty-cascader__menus {
   display: flex;