wz-h5-design 1.0.6 → 1.0.8

package/dist/types/components/Button/Button.d.ts

@@ -8,9 +8,11 @@ export interface ButtonProps {
     color?: string;
     textColor?: string;
     borderColor?: string;
+    borderOpacity?: number;
     width?: string | number;
     height?: string | number;
     fontSize?: string | number;
+    borderRadius?: string | number;
     className?: string;
     style?: React.CSSProperties;
     children?: React.ReactNode;

package/dist/types/components/DemoLayout/index.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+export interface DemoContainerProps {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const DemoContainer: React.FC<DemoContainerProps>;
+export interface DemoSectionProps {
+    title: string;
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const DemoSection: React.FC<DemoSectionProps>;
+export interface DemoRowProps {
+    children: React.ReactNode;
+    gap?: number | string;
+    noMargin?: boolean;
+    style?: React.CSSProperties;
+}
+export declare const DemoRow: React.FC<DemoRowProps>;
+export interface DemoSubTitleProps {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}
+export declare const DemoSubTitle: React.FC<DemoSubTitleProps>;
+export interface DemoIconItemProps {
+    icon: React.ReactNode;
+    label?: string;
+    style?: React.CSSProperties;
+}
+export declare const DemoIconItem: React.FC<DemoIconItemProps>;

package/dist/types/components/Icon/icon-data.d.ts

@@ -1,22 +1,16 @@
 /**
- * 自动生成的图标数据和类型定义
+ * 自动生成的图标数据
  * 请勿手动修改此文件
  * 运行 npm run extract-icons 重新生成
  */
 export declare const ICON_MAP: {
-    readonly qitu: readonly ["check", "close", "close-outline", "danxuankuang_sel", "date", "dingdan", "dropdown", "edit", "eyes-close", "eyes-open", "info", "jia", "jian", "jinjianchuyong", "map", "minus-sign", "next2beifen", "no-data", "plus-sign", "radio-nor", "remove", "shebei_nor", "shebei_sel", "shenhezhong1", "shouye_nor", "shouye_sel", "sousuo", "tel", "wode_nor", "wode_sel", "zhandiantubiao"];
-    readonly qituyonghu: readonly ["check-round", "dangqianweizhi", "dropdown", "huan", "huanche1", "jia", "jinjianchuyong", "radio-nor", "song", "tuijian", "xiangji", "xuanzhong"];
+    readonly qitu: readonly ["bianzu", "check", "chekuanguanli", "close", "close-outline", "danxuankuang_sel", "date", "dingdan", "dropdown", "edit", "eyes-close", "eyes-open", "info", "jia", "jian", "jinjianchuyong", "map", "minus-sign", "next2beifen", "no-data", "plus-sign", "radio-nor", "remove", "shebei_nor", "shebei_sel", "shenhezhong1", "shouye_nor", "shouye_sel", "sousuo", "tel", "wode_nor", "wode_sel", "zhandiantubiao"];
+    readonly qituyonghu: readonly ["check-round", "chongzhidingdan", "dangqianweizhi", "dingdan", "dropdown", "huan", "huanche1", "info", "jia", "jian", "jinjianchuyong", "no-data", "radio-nor", "song", "tuijian", "xiangji", "xuanzhong", "yichaoshi", "yiguoqi", "yilixian", "yizuchu"];
     readonly wzdaili: readonly ["bukekan", "chongdiandingdan", "chongzhidingdan", "kaquanguanli", "kekan", "shebeiguanli", "shenhezhong", "shujuzonglan", "xiazaizhongxin", "xufeidingdan", "yunyingshangguanli", "zengzhishouyifenzhang", "zhanghaoguanli", "zhifuquanxianguanli"];
-    readonly wzyonghu: readonly ["bangdingshoujihao", "chongdianbangzhu", "chongdianjilu", "chongdianwuyou", "daohang", "guanyuwanzhuang", "guzhangshangbao", "ic_notify_close", "jiantou", "jiaoyijilu", "lianxikefu", "shoucangshebei", "shouqi", "sousuo", "wanzhuangshangcheng", "wodechongdianquan", "wodedianka", "woyaodaili", "xialashaixuan", "xialashaixuan1"];
-    readonly yunying: readonly ["batch-operation", "bianzu", "bofanganniu", "bulletin", "chart", "check", "check-circle", "check-round", "checkbox", "checkbox-checked", "checkbox-indet", "clear", "close", "close-outline", "code", "daochu1", "date", "del", "delete", "device-group", "device_nor", "device_sel", "dianliangmoshi", "dingdan", "download", "drag", "dropdown", "edit", "eyes-close", "eyes-open", "filter", "fujianwenjian", "fujianwenjian-shibai", "fuxuan_disable", "fuxuan_nor", "fuxuan_sel", "gongshuaimoshi", "home_nor", "home_sel", "info", "info-outline", "jia", "jian", "list-down", "list-up", "map", "minus-sign", "next", "no-data", "notice", "order_nor", "order_sel", "piliangcaozuo", "plus", "plus-sign", "question", "question-round", "radio-nor", "radio-sel", "refresh", "remove", "right-arrow", "scan", "share", "sousuo", "tel", "time", "user_nor", "user_sel", "warning", "weixuanzemoshi", "xiangji"];
+    readonly wzyonghu: readonly ["bangdingshoujihao", "chongdianbangzhu", "chongdianjilu", "chongdianwuyou", "daohang", "guanyuwanzhuang", "guzhangshangbao", "ic_notify_close", "info-outline", "jiantou", "jiantou-copy", "jiaoyijilu", "lianxikefu", "shoucangshebei", "shouqi", "sousuo", "wanzhuangshangcheng", "wodechongdianquan", "wodedianka", "woyaodaili", "xialashaixuan", "xialashaixuan1"];
+    readonly yunying: readonly ["batch-operation", "bianzu", "bofanganniu", "bulletin", "chart", "check", "check-circle", "check-round", "checkbox", "checkbox-checked", "checkbox-indet", "clear", "close", "close-outline", "code", "daochu1", "date", "del", "delete", "device-group", "device_nor", "device_sel", "dianliangmoshi", "dingdan", "download", "drag", "dropdown", "edit", "eyes-close", "eyes-open", "filter", "fujianwenjian", "fujianwenjian-shibai", "fuxuan_disable", "fuxuan_nor", "fuxuan_sel", "gongshuaimoshi", "home_nor", "home_sel", "info", "info-outline", "jia", "jian", "list-down", "list-up", "map", "minus-sign", "next", "no-data", "notice", "order_nor", "order_sel", "piliangcaozuo", "plus", "plus-sign", "question", "question-circle", "question-round", "radio-nor", "radio-sel", "refresh", "remove", "right-arrow", "scan", "share", "sousuo", "tel", "time", "user_nor", "user_sel", "warning", "weixuanzemoshi", "xiangji"];
 };
 export type IconType = 'qitu' | 'qituyonghu' | 'wzdaili' | 'wzyonghu' | 'yunying';
-export type QituIconName = 'check' | 'close' | 'close-outline' | 'danxuankuang_sel' | 'date' | 'dingdan' | 'dropdown' | 'edit' | 'eyes-close' | 'eyes-open' | 'info' | 'jia' | 'jian' | 'jinjianchuyong' | 'map' | 'minus-sign' | 'next2beifen' | 'no-data' | 'plus-sign' | 'radio-nor' | 'remove' | 'shebei_nor' | 'shebei_sel' | 'shenhezhong1' | 'shouye_nor' | 'shouye_sel' | 'sousuo' | 'tel' | 'wode_nor' | 'wode_sel' | 'zhandiantubiao';
-export type QituyonghuIconName = 'check-round' | 'dangqianweizhi' | 'dropdown' | 'huan' | 'huanche1' | 'jia' | 'jinjianchuyong' | 'radio-nor' | 'song' | 'tuijian' | 'xiangji' | 'xuanzhong';
-export type WzdailiIconName = 'bukekan' | 'chongdiandingdan' | 'chongzhidingdan' | 'kaquanguanli' | 'kekan' | 'shebeiguanli' | 'shenhezhong' | 'shujuzonglan' | 'xiazaizhongxin' | 'xufeidingdan' | 'yunyingshangguanli' | 'zengzhishouyifenzhang' | 'zhanghaoguanli' | 'zhifuquanxianguanli';
-export type WzyonghuIconName = 'bangdingshoujihao' | 'chongdianbangzhu' | 'chongdianjilu' | 'chongdianwuyou' | 'daohang' | 'guanyuwanzhuang' | 'guzhangshangbao' | 'ic_notify_close' | 'jiantou' | 'jiaoyijilu' | 'lianxikefu' | 'shoucangshebei' | 'shouqi' | 'sousuo' | 'wanzhuangshangcheng' | 'wodechongdianquan' | 'wodedianka' | 'woyaodaili' | 'xialashaixuan' | 'xialashaixuan1';
-export type YunyingIconName = 'batch-operation' | 'bianzu' | 'bofanganniu' | 'bulletin' | 'chart' | 'check' | 'check-circle' | 'check-round' | 'checkbox' | 'checkbox-checked' | 'checkbox-indet' | 'clear' | 'close' | 'close-outline' | 'code' | 'daochu1' | 'date' | 'del' | 'delete' | 'device-group' | 'device_nor' | 'device_sel' | 'dianliangmoshi' | 'dingdan' | 'download' | 'drag' | 'dropdown' | 'edit' | 'eyes-close' | 'eyes-open' | 'filter' | 'fujianwenjian' | 'fujianwenjian-shibai' | 'fuxuan_disable' | 'fuxuan_nor' | 'fuxuan_sel' | 'gongshuaimoshi' | 'home_nor' | 'home_sel' | 'info' | 'info-outline' | 'jia' | 'jian' | 'list-down' | 'list-up' | 'map' | 'minus-sign' | 'next' | 'no-data' | 'notice' | 'order_nor' | 'order_sel' | 'piliangcaozuo' | 'plus' | 'plus-sign' | 'question' | 'question-round' | 'radio-nor' | 'radio-sel' | 'refresh' | 'remove' | 'right-arrow' | 'scan' | 'share' | 'sousuo' | 'tel' | 'time' | 'user_nor' | 'user_sel' | 'warning' | 'weixuanzemoshi' | 'xiangji';
-export type IconName = QituIconName | QituyonghuIconName | WzdailiIconName | WzyonghuIconName | YunyingIconName;
 /**
  * 获取指定类型的所有图标名称
  */

package/dist/types/components/Icon/icon-types.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 自动生成的图标类型定义
+ * 请勿手动修改此文件
+ * 运行 npm run extract-icons 重新生成
+ */
+export type IconType = 'qitu' | 'qituyonghu' | 'wzdaili' | 'wzyonghu' | 'yunying';
+export type QituIconName = 'bianzu' | 'check' | 'chekuanguanli' | 'close' | 'close-outline' | 'danxuankuang_sel' | 'date' | 'dingdan' | 'dropdown' | 'edit' | 'eyes-close' | 'eyes-open' | 'info' | 'jia' | 'jian' | 'jinjianchuyong' | 'map' | 'minus-sign' | 'next2beifen' | 'no-data' | 'plus-sign' | 'radio-nor' | 'remove' | 'shebei_nor' | 'shebei_sel' | 'shenhezhong1' | 'shouye_nor' | 'shouye_sel' | 'sousuo' | 'tel' | 'wode_nor' | 'wode_sel' | 'zhandiantubiao';
+export type QituyonghuIconName = 'check-round' | 'chongzhidingdan' | 'dangqianweizhi' | 'dingdan' | 'dropdown' | 'huan' | 'huanche1' | 'info' | 'jia' | 'jian' | 'jinjianchuyong' | 'no-data' | 'radio-nor' | 'song' | 'tuijian' | 'xiangji' | 'xuanzhong' | 'yichaoshi' | 'yiguoqi' | 'yilixian' | 'yizuchu';
+export type WzdailiIconName = 'bukekan' | 'chongdiandingdan' | 'chongzhidingdan' | 'kaquanguanli' | 'kekan' | 'shebeiguanli' | 'shenhezhong' | 'shujuzonglan' | 'xiazaizhongxin' | 'xufeidingdan' | 'yunyingshangguanli' | 'zengzhishouyifenzhang' | 'zhanghaoguanli' | 'zhifuquanxianguanli';
+export type WzyonghuIconName = 'bangdingshoujihao' | 'chongdianbangzhu' | 'chongdianjilu' | 'chongdianwuyou' | 'daohang' | 'guanyuwanzhuang' | 'guzhangshangbao' | 'ic_notify_close' | 'info-outline' | 'jiantou' | 'jiantou-copy' | 'jiaoyijilu' | 'lianxikefu' | 'shoucangshebei' | 'shouqi' | 'sousuo' | 'wanzhuangshangcheng' | 'wodechongdianquan' | 'wodedianka' | 'woyaodaili' | 'xialashaixuan' | 'xialashaixuan1';
+export type YunyingIconName = 'batch-operation' | 'bianzu' | 'bofanganniu' | 'bulletin' | 'chart' | 'check' | 'check-circle' | 'check-round' | 'checkbox' | 'checkbox-checked' | 'checkbox-indet' | 'clear' | 'close' | 'close-outline' | 'code' | 'daochu1' | 'date' | 'del' | 'delete' | 'device-group' | 'device_nor' | 'device_sel' | 'dianliangmoshi' | 'dingdan' | 'download' | 'drag' | 'dropdown' | 'edit' | 'eyes-close' | 'eyes-open' | 'filter' | 'fujianwenjian' | 'fujianwenjian-shibai' | 'fuxuan_disable' | 'fuxuan_nor' | 'fuxuan_sel' | 'gongshuaimoshi' | 'home_nor' | 'home_sel' | 'info' | 'info-outline' | 'jia' | 'jian' | 'list-down' | 'list-up' | 'map' | 'minus-sign' | 'next' | 'no-data' | 'notice' | 'order_nor' | 'order_sel' | 'piliangcaozuo' | 'plus' | 'plus-sign' | 'question' | 'question-circle' | 'question-round' | 'radio-nor' | 'radio-sel' | 'refresh' | 'remove' | 'right-arrow' | 'scan' | 'share' | 'sousuo' | 'tel' | 'time' | 'user_nor' | 'user_sel' | 'warning' | 'weixuanzemoshi' | 'xiangji';
+export type IconName = QituIconName | QituyonghuIconName | WzdailiIconName | WzyonghuIconName | YunyingIconName;

package/dist/types/components/Tag/Tag.d.ts

@@ -19,6 +19,14 @@ export interface TagProps {
      * @description 背景颜色，type='solid' 时生效
      */
     bgColor?: string;
+    /**
+     * @description 边框颜色，type='line' 时生效
+     */
+    borderColor?: string;
+    /**
+     * @description 圆角大小
+     */
+    borderRadius?: number | string;
     /**
      * @description 字体粗细
      */

package/dist/types/components/index.d.ts

@@ -31,5 +31,6 @@ import { Tooltip } from "./Tooltip/Tooltip";
 import { Dialog } from "./Dialog";
 import { ConfigProvider, useConfig } from "./ConfigProvider";
 import type { ConfigProviderProps, ThemeType, ThemeVars } from "./ConfigProvider";
-export { Button, ButtonGroup, Radio, Checkbox, Switch, Tabbar, Icon, Card, Cell, Tabs, Collapse, Stepper, Popup, Cascader, Input, Divider, CheckList, Search, TimePicker, DatePicker, DateRangePicker, Flex, Grid, GridView, Tag, Tip, NavBar, DropdownMenu, Toast, Tooltip, Dialog, ConfigProvider, useConfig, };
+import { DemoContainer, DemoSection, DemoRow, DemoSubTitle, DemoIconItem } from "./DemoLayout";
+export { Button, ButtonGroup, Radio, Checkbox, Switch, Tabbar, Icon, Card, Cell, Tabs, Collapse, Stepper, Popup, Cascader, Input, Divider, CheckList, Search, TimePicker, DatePicker, DateRangePicker, Flex, Grid, GridView, Tag, Tip, NavBar, DropdownMenu, Toast, Tooltip, Dialog, ConfigProvider, useConfig, DemoContainer, DemoSection, DemoRow, DemoSubTitle, DemoIconItem, };
 export type { ConfigProviderProps, ThemeType, ThemeVars };

package/dist/wz-h5-design.es.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx, Fragment } from "react/jsx-runtime";
-import React, { forwardRef, useState, useRef, useMemo, useContext, createContext, createElement, useCallback, Children, useEffect, useImperativeHandle, useLayoutEffect } from "react";
+import React, { forwardRef, useState, useRef, useMemo, useEffect, useContext, createContext, createElement, useCallback, Children, useImperativeHandle, useLayoutEffect } from "react";
 import { createRoot } from "react-dom/client";
 const Button = forwardRef(({
   type = "primary",
@@ -9,9 +9,11 @@ const Button = forwardRef(({
   color = "",
   textColor = "",
   borderColor = "",
+  borderOpacity = 0.7,
   width,
   height,
   fontSize,
+  borderRadius,
   className = "",
   style = {},
   children,
@@ -26,6 +28,9 @@ const Button = forwardRef(({
     return typeof value === "number" ? `${value}px` : value;
   };
   const calcBorderRadius = () => {
+    if (borderRadius !== void 0) {
+      return formatSize(borderRadius);
+    }
     if (height !== void 0) {
       const h = typeof height === "number" ? height : parseFloat(height);
       if (!isNaN(h)) return `${h / 2}px`;
@@ -48,9 +53,13 @@ const Button = forwardRef(({
       };
     }
     if (type === "outline") {
+      const getOutlineBorderColor = () => {
+        if (borderColor) return borderColor;
+        return `rgba(var(--wz-primary-color-rgb, 34, 201, 77), ${borderOpacity})`;
+      };
       return {
         color: textColor || "var(--wz-primary-color)",
-        borderColor: borderColor || "var(--wz-primary-color)",
+        borderColor: getOutlineBorderColor(),
         background: "transparent",
         ...style,
         ...customStyle
@@ -84,7 +93,7 @@ const Button = forwardRef(({
       return { ...s, ...customStyle };
     }
     return { ...style, ...customStyle };
-  }, [type, color, textColor, borderColor, width, height, fontSize, style]);
+  }, [type, color, textColor, borderColor, width, height, fontSize, borderRadius, style]);
   const handleClick = (e) => {
     if (disabled) return;
     setIsActive(true);
@@ -138,7 +147,7 @@ const ButtonGroup = ({
     if (value === void 0) return void 0;
     return typeof value === "number" ? `${value}px` : value;
   };
-  const containerStyle = {
+  const containerStyle2 = {
     backgroundColor: bgColor,
     height: formatSize(height),
     padding: formatSize(padding),
@@ -150,33 +159,63 @@ const ButtonGroup = ({
     fixed ? "wz-button-group--fixed" : "",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("div", { className: classNames2, style: containerStyle, children });
+  return /* @__PURE__ */ jsx("div", { className: classNames2, style: containerStyle2, children });
 };
 ButtonGroup.displayName = "ButtonGroup";
+const loadedSymbols = /* @__PURE__ */ new Set();
+const loadIconSymbol = (type) => {
+  if (loadedSymbols.has(type)) return;
+  try {
+    switch (type) {
+      case "yunying":
+        import("./iconfont-B9h4iRmM.js");
+        break;
+      case "qitu":
+        import("./iconfont-CXxMq4G2.js");
+        break;
+      case "wzyonghu":
+        import("./iconfont-CRbFpV7z.js");
+        break;
+      case "wzdaili":
+        import("./iconfont-B_mx7ld3.js");
+        break;
+      case "qituyonghu":
+        import("./iconfont-De-ylfev.js");
+        break;
+    }
+    loadedSymbols.add(type);
+  } catch (e) {
+    console.error(`Failed to load icon symbol for type: ${type}`, e);
+  }
+};
 const Icon = ({
   name,
   size = 24,
-  color = "currentColor",
+  color,
   className = "",
   style,
   onClick,
   type = "yunying"
-  // 默认使用yunying图标库
 }) => {
-  const iconStyle = {
-    fontSize: typeof size === "number" ? `${size}px` : size,
-    color,
+  useEffect(() => {
+    loadIconSymbol(type);
+  }, [type]);
+  const iconSize = typeof size === "number" ? `${size}px` : size;
+  const svgStyle = {
+    width: iconSize,
+    height: iconSize,
+    fill: color || "currentColor",
     ...style
   };
-  const iconFontClass = `iconfont-${type}`;
-  const iconPrefix = "icon-";
-  const iconClass = `${iconPrefix}${name}`;
+  const symbolId = `#icon-${name}`;
   return /* @__PURE__ */ jsx(
-    "i",
+    "svg",
     {
-      className: `wz-icon ${iconFontClass} ${iconClass} ${className}`,
-      style: iconStyle,
-      onClick
+      className: `wz-icon ${className}`,
+      style: svgStyle,
+      onClick,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("use", { xlinkHref: symbolId })
     }
   );
 };
@@ -1288,8 +1327,8 @@ const Divider = ({
       className: `wz-divider wz-divider--${direction} ${className}`,
       style: {
         background: color || defaultColor,
-        width: isVertical ? 2 : length || "100%",
-        height: isVertical ? length || 24 : 2,
+        width: isVertical ? 1 : length || "100%",
+        height: isVertical ? length || 16 : 2,
         margin,
         ...style
       }
@@ -1336,8 +1375,8 @@ const Search = forwardRef(
     disabled = false,
     prefix,
     suffix,
-    leftIcon = /* @__PURE__ */ jsx(Icon, { name: "search", size: 16 }),
-    actionText = "搜索",
+    leftIcon,
+    actionText,
     actionColor,
     showCancel = false,
     cancelText = "返回",
@@ -1419,7 +1458,10 @@ const Search = forwardRef(
                   {
                     className: `wz-search-input-wrapper ${showClear ? "wz-search-input-wrapper--with-clear" : ""}`,
                     children: [
-                      leftIcon && /* @__PURE__ */ jsx("div", { className: "wz-search-left-icon", children: leftIcon }),
+                      leftIcon && /* @__PURE__ */ jsxs("div", { className: "wz-search-left-icon", children: [
+                        leftIcon,
+                        /* @__PURE__ */ jsx("div", { className: "wz-search-left-icon-divider" })
+                      ] }),
                       /* @__PURE__ */ jsx(
                         "input",
                         {
@@ -2156,28 +2198,41 @@ const Tag = (props) => {
     size = "large",
     color,
     bgColor,
+    borderColor,
+    borderRadius,
     fontWeight,
     className,
     style,
     children
   } = props;
-  const classes = classNames("wz-tag", `wz-tag-${type}`, `wz-tag-${size}`, className);
+  const classes = classNames(
+    "wz-tag",
+    `wz-tag-${type}`,
+    `wz-tag-${size}`,
+    className
+  );
   const tagStyle = useMemo(() => {
     const newStyle = { ...style };
     if (color) {
       newStyle.color = color;
-      if (type === "line") {
+      if (type === "line" && !borderColor) {
         newStyle.borderColor = hexToRgba(color, 0.5);
       }
     }
-    if (bgColor && type === "solid") {
+    if (borderColor && type === "line") {
+      newStyle.borderColor = borderColor;
+    }
+    if (bgColor) {
       newStyle.backgroundColor = bgColor;
     }
+    if (borderRadius !== void 0) {
+      newStyle.borderRadius = typeof borderRadius === "number" ? `${borderRadius}px` : borderRadius;
+    }
     if (fontWeight) {
       newStyle.fontWeight = fontWeight;
     }
     return newStyle;
-  }, [type, color, bgColor, fontWeight, style]);
+  }, [type, color, bgColor, borderColor, borderRadius, fontWeight, style]);
   return /* @__PURE__ */ jsx("div", { className: classes, style: tagStyle, children });
 };
 const Tip = ({
@@ -2762,6 +2817,90 @@ const ConfigProvider = ({
   );
   return /* @__PURE__ */ jsx(ConfigContext.Provider, { value: contextValue, children });
 };
+const containerStyle = {
+  display: "flex",
+  flexDirection: "column",
+  gap: "20px",
+  padding: "10px",
+  backgroundColor: "#f5f5f5"
+};
+const sectionTitleStyle = {
+  fontSize: "16px",
+  color: "#999",
+  marginBottom: "12px"
+};
+const cardStyle = {
+  backgroundColor: "#fff",
+  borderRadius: "12px",
+  padding: "20px"
+};
+const rowStyle = {
+  display: "flex",
+  gap: "5px",
+  flexWrap: "wrap",
+  alignItems: "center",
+  marginBottom: "12px"
+};
+const subTitleStyle = {
+  fontSize: "14px",
+  color: "#333",
+  marginBottom: "12px",
+  fontWeight: 500
+};
+const DemoContainer = ({
+  children,
+  style
+}) => /* @__PURE__ */ jsx("div", { style: { ...containerStyle, ...style }, children });
+const DemoSection = ({
+  title,
+  children,
+  style
+}) => /* @__PURE__ */ jsxs("div", { style, children: [
+  /* @__PURE__ */ jsx("div", { style: sectionTitleStyle, children: title }),
+  /* @__PURE__ */ jsx("div", { style: cardStyle, children })
+] });
+const DemoRow = ({
+  children,
+  gap = 5,
+  noMargin = false,
+  style
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    style: {
+      ...rowStyle,
+      gap,
+      marginBottom: noMargin ? 0 : 12,
+      ...style
+    },
+    children
+  }
+);
+const DemoSubTitle = ({
+  children,
+  style
+}) => /* @__PURE__ */ jsx("div", { style: { ...subTitleStyle, ...style }, children });
+const DemoIconItem = ({
+  icon,
+  label,
+  style
+}) => /* @__PURE__ */ jsxs(
+  "div",
+  {
+    style: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "8px",
+      minWidth: "60px",
+      ...style
+    },
+    children: [
+      icon,
+      label && /* @__PURE__ */ jsx("span", { style: { fontSize: "12px", color: "#666" }, children: label })
+    ]
+  }
+);
 export {
   Button,
   ButtonGroup,
@@ -2774,6 +2913,11 @@ export {
   ConfigProvider,
   DatePicker,
   DateRangePicker,
+  DemoContainer,
+  DemoIconItem,
+  DemoRow,
+  DemoSection,
+  DemoSubTitle,
   Dialog,
   Divider,
   DropdownMenu,