@lmy54321/design-system 1.0.0 → 1.1.1

package/dist/index.d.mts

@@ -322,6 +322,15 @@ interface NewsItemProps {
 }
 declare function NewsItem({ title, source, time, category, variant, className }: NewsItemProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * 卡片容器使用示例
+ *
+ * 本组件展示设计系统中两种卡片容器的正确用法：
+ * 1. 普通卡（灰色）- 用于常规模块，无使用限制
+ * 2. 强调卡（白色）- 用于重要模块，一屏仅使用一次
+ */
+declare function CardDemo(): react_jsx_runtime.JSX.Element;
+
 type BottomActionMode = 'single' | 'split' | 'weighted';
 type BottomLeftContentType = 'none' | 'search' | 'capsule' | 'capsule-more';
 interface BottomActionButtonsProps {
@@ -377,6 +386,31 @@ interface TencentMapProps {
 }
 declare function TencentMap({ className, center, zoom, pitch, rotation, showPois, showText, roamMode, demoMode, markers }: TencentMapProps): react_jsx_runtime.JSX.Element;
 
+/** 所有可用图标名列表（outline stem） */
+declare const ICON_NAMES: string[];
+/** 检查某个图标是否有 filled 变体 */
+declare function hasFilledVariant(name: string): boolean;
+declare const ICON_GROUPS: {
+    label: string;
+    icons: string[];
+}[];
+interface IconFontProps {
+    /** TDesign 图标 stem 名称，如 "location"、"search"、"close" */
+    name: string;
+    /** 变体：outline（线性，默认）或 filled（实心） */
+    variant?: "outline" | "filled";
+    /** 尺寸 */
+    size?: string | number;
+    /** 额外 className */
+    className?: string;
+    /** 内联 style */
+    style?: React__default.CSSProperties;
+}
+declare function IconFont({ name, variant, size, className, style, }: IconFontProps): react_jsx_runtime.JSX.Element;
+type IconName = string;
+
+declare function IconGallery(): react_jsx_runtime.JSX.Element;
+
 declare function ImageWithFallback(props: React__default.ImgHTMLAttributes<HTMLImageElement>): react_jsx_runtime.JSX.Element;
 
 declare function TypographyDocs(): react_jsx_runtime.JSX.Element;
@@ -385,4 +419,4 @@ declare function GridSystemDocs(): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionSheet, type ActionSheetVariant, BottomActionButtons, type BottomActionButtonsProps, type BottomActionMode, BottomNavigationBar, BottomSheet, BottomSheetOption, type BottomSheetOptionProps, type BottomSheetProps, BottomSheetShareItem, type BottomSheetShareItemProps, BottomToolbar, type BottomToolbarProps, Btn, type BtnProps, type BtnSize, type BtnVariant, type BubbleAlignment, type BubblePlacement, BubbleTip, DRAWER_STATES, Dialog, type DialogProps, type DialogVariant, DraggablePanel, EmptyState, type EmptyStateProps, type EmptyStateVariant, GridSystemDocs, IcExpand, IcPlan, ImageWithFallback, Loading, type LoadingProps, NewsItem, type NewsItemProps, type NotificationAction, NotificationBar, type NotificationVariant, POIListItem, PoiItem, type PoiItemProps, Push, type PushProps, SearchBox, type SearchBoxMode, type SearchBoxProps, type SearchBoxVariant, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type ShareItemType, StatGrid, type StatGridProps, type StatItem, Switch, type SwitchProps, type TabId, Tag, type TagProps, TencentMap, Toast, type ToastProps, type ToolbarMode, TopToolbar, type TopToolbarProps, TypographyDocs, cn };
+export { ActionSheet, type ActionSheetVariant, BottomActionButtons, type BottomActionButtonsProps, type BottomActionMode, BottomNavigationBar, BottomSheet, BottomSheetOption, type BottomSheetOptionProps, type BottomSheetProps, BottomSheetShareItem, type BottomSheetShareItemProps, BottomToolbar, type BottomToolbarProps, Btn, type BtnProps, type BtnSize, type BtnVariant, type BubbleAlignment, type BubblePlacement, BubbleTip, CardDemo, DRAWER_STATES, Dialog, type DialogProps, type DialogVariant, DraggablePanel, EmptyState, type EmptyStateProps, type EmptyStateVariant, GridSystemDocs, ICON_GROUPS, ICON_NAMES, IcExpand, IcPlan, IconFont, type IconFontProps, IconGallery, type IconName, ImageWithFallback, Loading, type LoadingProps, NewsItem, type NewsItemProps, type NotificationAction, NotificationBar, type NotificationVariant, POIListItem, PoiItem, type PoiItemProps, Push, type PushProps, SearchBox, type SearchBoxMode, type SearchBoxProps, type SearchBoxVariant, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type ShareItemType, StatGrid, type StatGridProps, type StatItem, Switch, type SwitchProps, type TabId, Tag, type TagProps, TencentMap, Toast, type ToastProps, type ToolbarMode, TopToolbar, type TopToolbarProps, TypographyDocs, cn, hasFilledVariant };

package/dist/index.d.ts

@@ -322,6 +322,15 @@ interface NewsItemProps {
 }
 declare function NewsItem({ title, source, time, category, variant, className }: NewsItemProps): react_jsx_runtime.JSX.Element;
 
+/**
+ * 卡片容器使用示例
+ *
+ * 本组件展示设计系统中两种卡片容器的正确用法：
+ * 1. 普通卡（灰色）- 用于常规模块，无使用限制
+ * 2. 强调卡（白色）- 用于重要模块，一屏仅使用一次
+ */
+declare function CardDemo(): react_jsx_runtime.JSX.Element;
+
 type BottomActionMode = 'single' | 'split' | 'weighted';
 type BottomLeftContentType = 'none' | 'search' | 'capsule' | 'capsule-more';
 interface BottomActionButtonsProps {
@@ -377,6 +386,31 @@ interface TencentMapProps {
 }
 declare function TencentMap({ className, center, zoom, pitch, rotation, showPois, showText, roamMode, demoMode, markers }: TencentMapProps): react_jsx_runtime.JSX.Element;
 
+/** 所有可用图标名列表（outline stem） */
+declare const ICON_NAMES: string[];
+/** 检查某个图标是否有 filled 变体 */
+declare function hasFilledVariant(name: string): boolean;
+declare const ICON_GROUPS: {
+    label: string;
+    icons: string[];
+}[];
+interface IconFontProps {
+    /** TDesign 图标 stem 名称，如 "location"、"search"、"close" */
+    name: string;
+    /** 变体：outline（线性，默认）或 filled（实心） */
+    variant?: "outline" | "filled";
+    /** 尺寸 */
+    size?: string | number;
+    /** 额外 className */
+    className?: string;
+    /** 内联 style */
+    style?: React__default.CSSProperties;
+}
+declare function IconFont({ name, variant, size, className, style, }: IconFontProps): react_jsx_runtime.JSX.Element;
+type IconName = string;
+
+declare function IconGallery(): react_jsx_runtime.JSX.Element;
+
 declare function ImageWithFallback(props: React__default.ImgHTMLAttributes<HTMLImageElement>): react_jsx_runtime.JSX.Element;
 
 declare function TypographyDocs(): react_jsx_runtime.JSX.Element;
@@ -385,4 +419,4 @@ declare function GridSystemDocs(): react_jsx_runtime.JSX.Element;
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ActionSheet, type ActionSheetVariant, BottomActionButtons, type BottomActionButtonsProps, type BottomActionMode, BottomNavigationBar, BottomSheet, BottomSheetOption, type BottomSheetOptionProps, type BottomSheetProps, BottomSheetShareItem, type BottomSheetShareItemProps, BottomToolbar, type BottomToolbarProps, Btn, type BtnProps, type BtnSize, type BtnVariant, type BubbleAlignment, type BubblePlacement, BubbleTip, DRAWER_STATES, Dialog, type DialogProps, type DialogVariant, DraggablePanel, EmptyState, type EmptyStateProps, type EmptyStateVariant, GridSystemDocs, IcExpand, IcPlan, ImageWithFallback, Loading, type LoadingProps, NewsItem, type NewsItemProps, type NotificationAction, NotificationBar, type NotificationVariant, POIListItem, PoiItem, type PoiItemProps, Push, type PushProps, SearchBox, type SearchBoxMode, type SearchBoxProps, type SearchBoxVariant, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type ShareItemType, StatGrid, type StatGridProps, type StatItem, Switch, type SwitchProps, type TabId, Tag, type TagProps, TencentMap, Toast, type ToastProps, type ToolbarMode, TopToolbar, type TopToolbarProps, TypographyDocs, cn };
+export { ActionSheet, type ActionSheetVariant, BottomActionButtons, type BottomActionButtonsProps, type BottomActionMode, BottomNavigationBar, BottomSheet, BottomSheetOption, type BottomSheetOptionProps, type BottomSheetProps, BottomSheetShareItem, type BottomSheetShareItemProps, BottomToolbar, type BottomToolbarProps, Btn, type BtnProps, type BtnSize, type BtnVariant, type BubbleAlignment, type BubblePlacement, BubbleTip, CardDemo, DRAWER_STATES, Dialog, type DialogProps, type DialogVariant, DraggablePanel, EmptyState, type EmptyStateProps, type EmptyStateVariant, GridSystemDocs, ICON_GROUPS, ICON_NAMES, IcExpand, IcPlan, IconFont, type IconFontProps, IconGallery, type IconName, ImageWithFallback, Loading, type LoadingProps, NewsItem, type NewsItemProps, type NotificationAction, NotificationBar, type NotificationVariant, POIListItem, PoiItem, type PoiItemProps, Push, type PushProps, SearchBox, type SearchBoxMode, type SearchBoxProps, type SearchBoxVariant, SegmentedControl, type SegmentedControlProps, type SegmentedControlSize, type ShareItemType, StatGrid, type StatGridProps, type StatItem, Switch, type SwitchProps, type TabId, Tag, type TagProps, TencentMap, Toast, type ToastProps, type ToolbarMode, TopToolbar, type TopToolbarProps, TypographyDocs, cn, hasFilledVariant };

package/dist/index.js

@@ -6,6 +6,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var react = require('motion/react');
 var classVarianceAuthority = require('class-variance-authority');
 var React = require('react');
+var tdesignIconsReact = require('tdesign-icons-react');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -2303,6 +2304,269 @@ function NewsItem({
     ), children: category })
   ] });
 }
+var _manifest = tdesignIconsReact.manifest;
+var outlineStems = _manifest.filter((m) => !m.stem.endsWith("-filled")).map((m) => m.stem).sort();
+var filledSet = new Set(
+  _manifest.filter((m) => m.stem.endsWith("-filled")).map((m) => m.stem)
+);
+var ICON_NAMES = outlineStems;
+function hasFilledVariant(name) {
+  return filledSet.has(`${name}-filled`);
+}
+var GROUP_CONFIG = [
+  {
+    label: "\u5B9A\u4F4D / \u5730\u56FE",
+    match: (s) => /^(location|map|gps|compass|pin|globe|earth|system-location|task-location)/.test(s)
+  },
+  {
+    label: "\u7BAD\u5934 / \u65B9\u5411",
+    match: (s) => /^(arrow|chevron|caret|backtop|backward|forward|swap)/.test(s)
+  },
+  {
+    label: "\u7528\u6237 / \u793E\u4EA4",
+    match: (s) => /^(user|usergroup|heart|chat|message|mail|call|phone)/.test(s)
+  },
+  {
+    label: "\u6587\u4EF6 / \u6587\u4EF6\u5939",
+    match: (s) => /^(file|folder|document|attachment)/.test(s)
+  },
+  {
+    label: "\u7F16\u8F91 / \u64CD\u4F5C",
+    match: (s) => /^(edit|delete|add|copy|paste|save|cut|undo|redo|close|check|minus|more|menu|refresh|search|filter|sort|download|upload)/.test(s)
+  },
+  {
+    label: "\u6570\u636E / \u56FE\u8868",
+    match: (s) => /^(chart|data|statistic|dashboard|table)/.test(s)
+  },
+  {
+    label: "\u901A\u77E5 / \u72B6\u6001",
+    match: (s) => /^(notification|bell|info|error|warning|alert|check-circle|check-rectangle|success|loading|time|history|calendar)/.test(s)
+  },
+  {
+    label: "\u5A92\u4F53 / \u5F71\u50CF",
+    match: (s) => /^(image|video|camera|play|pause|stop|volume|music|microphone|photo|film)/.test(s)
+  },
+  {
+    label: "\u5929\u6C14",
+    match: (s) => /^(sunny|cloudy|rain|snow|wind|fog|moon|sun|rainbow|thunderstorm|weather)/.test(s)
+  },
+  {
+    label: "\u5EFA\u7B51 / \u573A\u6240",
+    match: (s) => /^(shop|store|hospital|school|hotel|building|home|house|castle|bridge|dam|city|tower|double-storey|sailing)/.test(s)
+  },
+  {
+    label: "\u54C1\u724C / Logo",
+    match: (s) => /^(logo)/.test(s)
+  },
+  {
+    label: "AI / \u667A\u80FD",
+    match: (s) => /^(ai)/.test(s)
+  }
+];
+function categorize(stems) {
+  const groups = [];
+  const used = /* @__PURE__ */ new Set();
+  for (const cfg of GROUP_CONFIG) {
+    const icons = stems.filter((s) => cfg.match(s) && !used.has(s));
+    if (icons.length > 0) {
+      icons.forEach((i) => used.add(i));
+      groups.push({ label: cfg.label, icons });
+    }
+  }
+  const rest = stems.filter((s) => !used.has(s));
+  if (rest.length > 0) {
+    groups.push({ label: "\u5176\u4ED6", icons: rest });
+  }
+  return groups;
+}
+var ICON_GROUPS = categorize(outlineStems);
+function IconFont({
+  name,
+  variant = "outline",
+  size,
+  className,
+  style
+}) {
+  const iconName = variant === "filled" && hasFilledVariant(name) ? `${name}-filled` : name;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    tdesignIconsReact.Icon,
+    {
+      name: iconName,
+      size,
+      className: cn("inline-block", className),
+      style
+    }
+  );
+}
+function CardDemo() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-3 gap-6 max-w-7xl mx-auto", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-[390px] mx-auto space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "mb-6", children: "\u5361\u7247\u5BB9\u5668\u793A\u4F8B" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "bg-card border-[0.5px] border-card-border rounded-[16px] p-4 space-y-3",
+          style: { boxShadow: "var(--elevation-sm)" },
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "location", className: "size-5 text-primary" }),
+                /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "\u5F53\u524D\u4F4D\u7F6E" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-accent", children: "\u5F3A\u8C03\u5361" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground", children: "\u5317\u4EAC\u5E02\u4E1C\u57CE\u533A\u4E1C\u957F\u5B89\u8857" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-muted-foreground", children: "\u5929\u5B89\u95E8\u5E7F\u573A\u9644\u8FD1 \xB7 \u8DDD\u79BB\u60A8 80\u7C73" })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-3 pt-2 border-t border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex flex-col items-center gap-1 py-2 hover:bg-muted/50 rounded-lg transition-colors", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "map-navigation", className: "size-5 text-primary" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground", children: "\u5BFC\u822A" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex flex-col items-center gap-1 py-2 hover:bg-muted/50 rounded-lg transition-colors", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "share", className: "size-5 text-primary" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground", children: "\u5206\u4EAB" })
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsxs("button", { className: "flex flex-col items-center gap-1 py-2 hover:bg-muted/50 rounded-lg transition-colors", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "star", className: "size-5 text-primary" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-foreground", children: "\u6536\u85CF" })
+              ] })
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-[16px] p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "map-location", className: "size-5 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "\u9644\u8FD1\u5730\u70B9" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u666E\u901A\u5361" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [
+          { name: "\u6545\u5BAB\u535A\u7269\u9662", distance: "1.2km", type: "\u666F\u70B9" },
+          { name: "\u738B\u5E9C\u4E95\u5927\u8857", distance: "850m", type: "\u5546\u5708" },
+          { name: "\u56FD\u5BB6\u535A\u7269\u9986", distance: "450m", type: "\u535A\u7269\u9986" }
+        ].map((poi, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "location", className: "size-4 text-muted-foreground shrink-0" }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground truncate", children: poi.name }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: poi.type })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground shrink-0", children: poi.distance })
+        ] }, index)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-card-muted rounded-[16px] p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "history", className: "size-5 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "\u641C\u7D22\u5386\u53F2" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "\u666E\u901A\u5361" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-2", children: [
+          { keyword: "\u5317\u4EAC\u5357\u7AD9", time: "\u4ECA\u5929 14:30" },
+          { keyword: "\u4E09\u91CC\u5C6F", time: "\u6628\u5929" },
+          { keyword: "\u9996\u90FD\u673A\u573A", time: "2\u5929\u524D" }
+        ].map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconFont, { name: "search", className: "size-4 text-muted-foreground" }),
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-foreground", children: item.keyword })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground", children: item.time })
+        ] }, index)) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "lg:col-span-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/50 rounded-[16px] p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "\u{1F4DD} \u4F7F\u7528\u89C4\u5219" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 text-sm", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-5 shrink-0 flex items-center justify-center", children: "\u2705" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground", children: "\u5F3A\u8C03\u5361\uFF08\u767D\u8272\uFF09" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "\u4E00\u5C4F\u4EC5\u4F7F\u7528\u4E00\u6B21\uFF0C\u7528\u4E8E\u7A81\u51FA\u6700\u91CD\u8981\u7684\u6A21\u5757" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-5 shrink-0 flex items-center justify-center", children: "\u2705" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground", children: "\u666E\u901A\u5361\uFF08\u7070\u8272\uFF09" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "\u65E0\u4F7F\u7528\u9650\u5236\uFF0C\u9002\u7528\u4E8E\u5927\u591A\u6570\u6A21\u5757\u5185\u5BB9" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-5 shrink-0 flex items-center justify-center", children: "\u274C" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground", children: "\u7981\u6B62" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "\u5728\u540C\u4E00\u89C6\u53E3\u5185\u4F7F\u7528\u591A\u4E2A\u5F3A\u8C03\u5361" })
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-1", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-5 shrink-0 flex items-center justify-center", children: "\u{1F4A1}" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground", children: "\u63A8\u8350" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "1\u4E2A\u5F3A\u8C03\u5361 + \u591A\u4E2A\u666E\u901A\u5361\u7684\u6DF7\u5408\u4F7F\u7528" })
+            ] })
+          ] }) })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/50 rounded-[16px] p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "\u{1F4BB} \u4EE3\u7801\u793A\u4F8B" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-2", children: "\u5F3A\u8C03\u5361\uFF08\u767D\u8272\uFF09" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background rounded-lg p-3 text-xs space-y-1 border border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "<div className=" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: '  "bg-card' }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: "  border-[0.5px]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: "  border-card-border" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: "  rounded-[16px]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: '  p-4"' }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground pl-2", children: "  style={{{" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-4", children: "    boxShadow:" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-4", children: '    "var(--elevation-sm)"' }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground pl-2", children: "}}" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: ">" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-xs text-muted-foreground mb-2", children: "\u666E\u901A\u5361\uFF08\u7070\u8272\uFF09" }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-background rounded-lg p-3 text-xs space-y-1 border border-border", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: "<div className=" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: '  "bg-card-muted' }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: "  rounded-[16px]" }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-foreground pl-2", children: '  p-4"' }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-muted-foreground", children: ">" })
+            ] })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted/50 rounded-[16px] p-4 space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { children: "\u{1F3A8} CSS\u53D8\u91CF" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 text-xs", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "--card" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: "\u767D\u8272\u80CC\u666F" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "--card-muted" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: "\u7070\u8272\u80CC\u666F" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "--card-border" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: "\u8FB9\u6846\u989C\u8272" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between py-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "--elevation-sm" }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-foreground", children: "\u9634\u5F71\u6548\u679C" })
+          ] })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
 function Capsule({ more = false }) {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center h-[48px] bg-card rounded-[24px] px-4 shadow-sm border border-border shrink-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col justify-center mr-3", children: [
@@ -2915,6 +3179,161 @@ function TencentMap({
         }
       ` }) });
 }
+function IconGallery() {
+  const [search, setSearch] = React.useState("");
+  const [variant, setVariant] = React.useState("outline");
+  const [activeTab, setActiveTab] = React.useState(0);
+  const tabBarRef = React.useRef(null);
+  const activeTabRef = React.useRef(null);
+  const allNames = ICON_NAMES;
+  const filteredNames = React.useMemo(() => {
+    if (!search) return null;
+    const q = search.toLowerCase();
+    return allNames.filter((s) => s.includes(q));
+  }, [search, allNames]);
+  const currentGroup = ICON_GROUPS[activeTab];
+  React.useEffect(() => {
+    if (activeTabRef.current && tabBarRef.current) {
+      const container = tabBarRef.current;
+      const btn = activeTabRef.current;
+      const scrollLeft = btn.offsetLeft - container.offsetWidth / 2 + btn.offsetWidth / 2;
+      container.scrollTo({ left: scrollLeft, behavior: "smooth" });
+    }
+  }, [activeTab]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-0", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-center justify-between gap-4 pb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-foreground", children: "TDesign Icon Library" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          allNames.length,
+          " icons \xB7 powered by tdesign-icons-react"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-muted p-1 rounded-lg inline-flex shrink-0", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setVariant("outline"),
+              className: cn(
+                "px-4 py-1.5 rounded-md text-sm font-medium transition-all",
+                variant === "outline" ? "bg-card shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: "Outline"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              onClick: () => setVariant("filled"),
+              className: cn(
+                "px-4 py-1.5 rounded-md text-sm font-medium transition-all",
+                variant === "filled" ? "bg-card shadow-sm text-foreground" : "text-muted-foreground hover:text-foreground"
+              ),
+              children: "Filled"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "text",
+            placeholder: "\u641C\u7D22\u56FE\u6807...",
+            className: "px-3 py-2 border rounded-lg text-sm w-48 focus:outline-none focus:ring-2 focus:ring-primary/20 border-border bg-input-background",
+            value: search,
+            onChange: (e) => setSearch(e.target.value)
+          }
+        )
+      ] })
+    ] }),
+    filteredNames !== null ? filteredNames.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-12 text-center bg-card-muted rounded-xl border border-dashed border-border text-muted-foreground", children: "\u672A\u627E\u5230\u5339\u914D\u56FE\u6807" }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3 pt-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-xs text-muted-foreground", children: [
+        "\u627E\u5230 ",
+        filteredNames.length,
+        " \u4E2A\u56FE\u6807"
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-9 gap-3", children: filteredNames.slice(0, 200).map((name) => /* @__PURE__ */ jsxRuntime.jsx(IconCell, { name, variant }, name)) }),
+      filteredNames.length > 200 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground text-center", children: "\u4EC5\u663E\u793A\u524D 200 \u4E2A\u7ED3\u679C\uFF0C\u8BF7\u7F29\u5C0F\u641C\u7D22\u8303\u56F4" })
+    ] }) : (
+      /* Tab 分类模式 */
+      /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "sticky top-0 z-10 bg-background -mx-8 px-8 pb-3 pt-3 border-b border-border",
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "div",
+              {
+                ref: tabBarRef,
+                className: "flex items-center gap-1 overflow-x-auto",
+                style: { scrollbarWidth: "none" },
+                children: ICON_GROUPS.map((group, idx) => /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    ref: idx === activeTab ? activeTabRef : void 0,
+                    onClick: () => setActiveTab(idx),
+                    className: cn(
+                      "shrink-0 px-4 py-2 rounded-[var(--radius-button)] text-sm font-medium transition-all whitespace-nowrap",
+                      idx === activeTab ? "bg-primary text-white shadow-sm" : "bg-muted text-muted-foreground hover:text-foreground hover:bg-muted/80"
+                    ),
+                    children: [
+                      group.label,
+                      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-1.5 text-xs opacity-70", children: group.icons.length })
+                    ]
+                  },
+                  group.label
+                ))
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pt-5", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-3 sm:grid-cols-5 md:grid-cols-7 lg:grid-cols-9 gap-3", children: currentGroup?.icons.map((name) => /* @__PURE__ */ jsxRuntime.jsx(IconCell, { name, variant }, name)) }) })
+      ] })
+    )
+  ] });
+}
+function IconCell({
+  name,
+  variant
+}) {
+  const [copied, setCopied] = React.useState(false);
+  const hasFilled = hasFilledVariant(name);
+  const handleClick = () => {
+    navigator.clipboard?.writeText(name).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    });
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      onClick: handleClick,
+      className: cn(
+        "flex flex-col items-center gap-2 p-3 border rounded-xl transition-all group bg-card relative",
+        "hover:border-primary/40 hover:bg-primary/5 hover:shadow-sm",
+        "active:scale-95"
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[24px] text-foreground transition-colors group-hover:text-primary", children: /* @__PURE__ */ jsxRuntime.jsx(
+          IconFont,
+          {
+            name,
+            variant: variant === "filled" && hasFilled ? "filled" : "outline",
+            size: "1em"
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[10px] text-muted-foreground font-mono truncate w-full text-center select-all leading-[14px]", children: copied ? "Copied!" : name }),
+        variant === "filled" && !hasFilled && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "absolute top-1.5 right-1.5 w-1.5 h-1.5 rounded-full bg-orange-400/60",
+            title: "\u65E0 filled \u53D8\u4F53"
+          }
+        )
+      ]
+    }
+  );
+}
 function TypographyDocs() {
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-background", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
@@ -3340,13 +3759,18 @@ exports.BottomSheetShareItem = BottomSheetShareItem;
 exports.BottomToolbar = BottomToolbar;
 exports.Btn = Btn;
 exports.BubbleTip = BubbleTip;
+exports.CardDemo = CardDemo;
 exports.DRAWER_STATES = DRAWER_STATES;
 exports.Dialog = Dialog;
 exports.DraggablePanel = DraggablePanel;
 exports.EmptyState = EmptyState;
 exports.GridSystemDocs = GridSystemDocs;
+exports.ICON_GROUPS = ICON_GROUPS;
+exports.ICON_NAMES = ICON_NAMES;
 exports.IcExpand = IcExpand;
 exports.IcPlan = IcPlan;
+exports.IconFont = IconFont;
+exports.IconGallery = IconGallery;
 exports.ImageWithFallback = ImageWithFallback;
 exports.Loading = Loading;
 exports.NewsItem = NewsItem;
@@ -3364,5 +3788,6 @@ exports.Toast = Toast;
 exports.TopToolbar = TopToolbar;
 exports.TypographyDocs = TypographyDocs;
 exports.cn = cn;
+exports.hasFilledVariant = hasFilledVariant;
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map