@rainbow-oh/yee-c 0.3.0 → 0.4.1

package/dist/cjs/Anchor/anchor.js

@@ -67,7 +67,6 @@ var import_lucide_react = require("lucide-react");
 var import_react = __toESM(require("react"));
 var import_Config_Provider = require("../Config-Provider");
 var import_useMergedState = __toESM(require("../hooks/useMergedState"));
-var import_debounce = __toESM(require("../utils/debounce"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_anchor_item = __toESM(require("./anchor-item"));
 var import_style = require("./style/index.less");
@@ -158,31 +157,50 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
     const currentItems2 = auto ? anchorList : items;
     if (!currentItems2 || currentItems2.length === 0)
       return;
+    let nextActiveKey;
     for (let i = currentItems2.length - 1; i >= 0; i--) {
       const item = currentItems2[i];
       const target = document.getElementById(item.key);
       if (target) {
         const targetTop = getTargetOffsetTop(target);
         if (scrollTop + offsetTop >= targetTop) {
-          if (activeKeyRef.current !== item.key) {
-            setMergedActiveKey(item.key);
-            onChange == null ? void 0 : onChange(item.key);
-          }
+          nextActiveKey = item.key;
           break;
         }
       }
     }
+    if (nextActiveKey === void 0) {
+      const first = currentItems2.find(
+        (item) => document.getElementById(item.key)
+      );
+      nextActiveKey = first == null ? void 0 : first.key;
+    }
+    if (nextActiveKey && activeKeyRef.current !== nextActiveKey) {
+      setMergedActiveKey(nextActiveKey);
+      onChange == null ? void 0 : onChange(nextActiveKey);
+    }
   }, [auto, anchorList, items, offsetTop, onChange, getTargetOffsetTop]);
   (0, import_react.useEffect)(() => {
-    const container = containerRef.current;
+    const container = getContainer ? getContainer() : window;
+    containerRef.current = container;
     if (!container)
       return;
-    const debouncedScroll = (0, import_debounce.default)(handleScroll, 100);
-    container.addEventListener("scroll", debouncedScroll);
+    let rafId = null;
+    const onScroll = () => {
+      if (rafId !== null)
+        return;
+      rafId = requestAnimationFrame(() => {
+        rafId = null;
+        handleScroll();
+      });
+    };
+    container.addEventListener("scroll", onScroll);
     handleScroll();
     return () => {
-      container.removeEventListener("scroll", debouncedScroll);
-      debouncedScroll.cancel();
+      container.removeEventListener("scroll", onScroll);
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+      }
     };
   }, [getContainer, handleScroll]);
   const scrollToAnchor = (0, import_react.useCallback)(
@@ -205,10 +223,7 @@ var Anchor = (0, import_react.forwardRef)((baseprops, ref) => {
     },
     [offsetTop, getTargetOffsetTop]
   );
-  (0, import_react.useLayoutEffect)(() => {
-    containerRef.current = getContainer ? getContainer() : window;
-  }, [getContainer]);
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react.useEffect)(() => {
     if (defaultActiveKey) {
       scrollToAnchor(defaultActiveKey);
     }

package/dist/cjs/Form/demo/basic.js

@@ -39,87 +39,62 @@ var basic_default = () => {
   const onFinish = (values) => {
     console.log("Received values:", values);
   };
-  const [, setState] = import_react.default.useState({});
-  (0, import_react.useEffect)(() => {
-    setTimeout(() => {
-      form.setFieldsValue({
-        address: [
-          {
-            one: "123 Main St"
-          }
-        ]
-      });
-    }, 2e3);
-  }, []);
-  return /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form,
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, "data-testid": "basic-form" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
     {
-      form,
-      onFinish,
-      layout: "vertical",
-      "data-testid": "basic-form",
-      onValuesChange: (field) => {
-        setState(field);
-      }
-    },
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: "username",
-        label: "Username",
-        rules: [
-          {
-            required: true,
-            message: "Please input your username!",
-            validateTrigger: ["onChange", "onSubmit"]
+      name: "username",
+      label: "Username",
+      rules: [
+        {
+          required: true,
+          message: "Please input your username!",
+          validateTrigger: ["onChange", "onSubmit"]
+        },
+        {
+          validateTrigger: "onBlur",
+          validator: (value) => {
+            console.log("Validating username:", value);
+            if (typeof value === "string" && value.length < 5) {
+              return false;
+            }
+            return true;
           },
-          {
-            validateTrigger: "onBlur",
-            validator: (value) => {
-              console.log("Validating username:", value);
-              if (typeof value === "string" && value.length < 5) {
-                return false;
-              }
-              return true;
-            },
-            message: "Username must be at least 5 characters long"
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your username" })
-    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: "password",
-        label: "Password",
-        rules: [
-          { required: true, message: "Please input your password!" },
-          {
-            minLength: 10,
-            validateTrigger: "onBlur",
-            message: "Password length must be longer than 10"
-          }
-        ]
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input.Password, { placeholder: "Please input your password" })
-    )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "gender", label: "Gender", initialValue: "male" }, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Select,
-      {
-        options: [
-          { label: "male", value: "male" },
-          { label: "female", value: "female" },
-          { label: "other", value: "other" }
-        ]
-      }
-    ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "birthday", label: "Birthday" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.DatePicker, null))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
-      import_yee_c.Form.Field,
-      {
-        name: ["address", 0, "one"],
-        label: "Address",
-        initialValue: "zzz"
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, null)
-    ))),
-    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit", "data-testid": "submit-btn" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset", "data-testid": "reset-btn" }, "Reset"))
-  );
+          message: "Username must be at least 5 characters long"
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please input your username" })
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
+    {
+      name: "password",
+      label: "Password",
+      rules: [
+        { required: true, message: "Please input your password!" },
+        {
+          minLength: 10,
+          validateTrigger: "onBlur",
+          message: "Password length must be longer than 10"
+        }
+      ]
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input.Password, { placeholder: "Please input your password" })
+  )), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "gender", label: "Gender", initialValue: "male" }, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Select,
+    {
+      options: [
+        { label: "male", value: "male" },
+        { label: "female", value: "female" },
+        { label: "other", value: "other" }
+      ]
+    }
+  ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: "birthday", label: "Birthday" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.DatePicker, null))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Grid.Item, null, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Form.Field,
+    {
+      name: ["address", 0, "one"],
+      label: "Address",
+      initialValue: "zzz"
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, null)
+  ))), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: 16 } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit", "data-testid": "submit-btn" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { htmlType: "reset", "data-testid": "reset-btn" }, "Reset")));
 };

package/dist/cjs/Form/demo/form-table.js

@@ -39,73 +39,74 @@ var form_table_default = () => {
   const onFinish = (values) => {
     console.log("Form Values:", values);
   };
-  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Form + Table Dynamic Form Example"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
-    import_yee_c.Form.List,
-    {
-      name: "users"
-    },
-    (fields, operations) => {
-      const columns = [
-        {
-          title: "Name",
-          dataIndex: "name",
-          key: "name",
-          width: "30%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "name"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter name" }))
-        },
-        {
-          title: "Age",
-          dataIndex: "age",
-          key: "age",
-          width: "20%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "age"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter age", type: "number" }))
-        },
-        {
-          title: "Address",
-          dataIndex: "address",
-          key: "address",
-          width: "40%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "address"] }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter address" }))
-        },
-        {
-          title: "Action",
-          key: "action",
-          width: "10%",
-          render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(
-            import_yee_c.Button,
-            {
-              type: "link",
-              color: "danger",
-              onClick: () => operations.remove(index)
-            },
-            "Delete"
-          )
-        }
-      ];
-      return /* @__PURE__ */ import_react.default.createElement(
-        import_yee_c.Table,
-        {
-          columns,
-          dataSource: fields,
-          rowKey: "key",
-          pagination: false,
-          footer: () => /* @__PURE__ */ import_react.default.createElement(
-            import_yee_c.Button,
-            {
-              type: "dashed",
-              onClick: () => operations.add({
-                name: "",
-                age: "",
-                address: ""
-              }),
-              block: true
-            },
-            "+ Add Row"
-          )
-        }
-      );
-    }
-  ), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ import_react.default.createElement("div", { style: { padding: "24px" } }, /* @__PURE__ */ import_react.default.createElement("h2", null, "Form + Table Dynamic Form Example"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form, { form, onFinish, layout: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.List, { name: "users" }, (fields, operations) => {
+    const columns = [
+      {
+        title: "Name",
+        dataIndex: "name",
+        key: "name",
+        width: "30%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "name"], required: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Input, { placeholder: "Please enter name" }))
+      },
+      {
+        title: "Age",
+        dataIndex: "age",
+        key: "age",
+        width: "20%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "age"], required: true }, /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.InputNumber,
+          {
+            controls: false,
+            placeholder: "Please enter age",
+            type: "number"
+          }
+        ))
+      },
+      {
+        title: "Address",
+        dataIndex: "address",
+        key: "address",
+        width: "40%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Form.Field, { name: [index, "address"] }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.TextArea, { placeholder: "Please enter address" }))
+      },
+      {
+        title: "Action",
+        key: "action",
+        width: "10%",
+        render: (_record, index) => /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.Button,
+          {
+            type: "link",
+            color: "danger",
+            onClick: () => operations.remove(index)
+          },
+          "Delete"
+        )
+      }
+    ];
+    return /* @__PURE__ */ import_react.default.createElement(
+      import_yee_c.Table,
+      {
+        columns,
+        dataSource: fields,
+        rowKey: "key",
+        pagination: false,
+        footer: () => /* @__PURE__ */ import_react.default.createElement(
+          import_yee_c.Button,
+          {
+            type: "dashed",
+            onClick: () => operations.add({
+              name: "",
+              age: "",
+              address: ""
+            }),
+            block: true
+          },
+          "+ Add Row"
+        )
+      }
+    );
+  }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { style: { marginTop: "24px" } }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Button, { type: "primary", htmlType: "submit" }, "Submit"), /* @__PURE__ */ import_react.default.createElement(
     import_yee_c.Button,
     {
       style: { marginLeft: "8px" },

package/dist/cjs/Menu/style/index.less

@@ -30,6 +30,7 @@
   // -------- item --------
   &-item {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     box-sizing: border-box;
     width: 100%;
@@ -119,6 +120,7 @@
     &-title {
       display: flex;
       align-items: center;
+      flex-shrink: 0;
       justify-content: space-between;
       padding: var(--yee-menu-item-padding);
       border-radius: var(--yee-menu-item-border-radius);

package/dist/cjs/Segmented/demo/variant.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Segmented/demo/variant.js

@@ -0,0 +1,50 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Segmented/demo/variant.tsx
+var variant_exports = {};
+__export(variant_exports, {
+  default: () => variant_default
+});
+module.exports = __toCommonJS(variant_exports);
+var import_yee_c = require("../..");
+var import_lucide_react = require("lucide-react");
+var import_react = __toESM(require("react"));
+var variant_default = () => /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { options: ["Daily", "Weekly", "Monthly"] }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { variant: "pill", options: ["Daily", "Weekly", "Monthly"] })), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { variant: "pill", size: "small", options: ["Small", "Default", "Large"] }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Segmented, { variant: "pill", size: "large", options: ["Small", "Default", "Large"] })), /* @__PURE__ */ import_react.default.createElement("div", { style: { width: 480 } }, /* @__PURE__ */ import_react.default.createElement(
+  import_yee_c.Segmented,
+  {
+    variant: "pill",
+    block: true,
+    defaultValue: "list",
+    options: [
+      { label: "List", value: "list", icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.List, { size: 16 }) },
+      { label: "Grid", value: "grid", icon: /* @__PURE__ */ import_react.default.createElement(import_lucide_react.LayoutGrid, { size: 16 }) },
+      { label: "Detail", value: "detail" }
+    ]
+  }
+)));

package/dist/cjs/Segmented/interface.d.ts

@@ -71,6 +71,11 @@ export interface SegmentedProps extends DataAttributeProps {
      * Size
      */
     size?: 'small' | 'default' | 'large';
+    /**
+     * Visual style variant. `pill` renders the selected item as a colored capsule with no container background
+     * @default default
+     */
+    variant?: 'default' | 'pill';
     /**
      * Whether to fill the container width, options share the space equally
      */

package/dist/cjs/Segmented/segmented.js

@@ -91,6 +91,7 @@ var Segmented = import_react.default.forwardRef(
       defaultValue,
       disabled,
       size,
+      variant = "default",
       block,
       name = uid,
       onChange
@@ -105,6 +106,7 @@ var Segmented = import_react.default.forwardRef(
       "defaultValue",
       "disabled",
       "size",
+      "variant",
       "block",
       "name",
       "onChange"
@@ -122,6 +124,7 @@ var Segmented = import_react.default.forwardRef(
       prefixCls,
       {
         [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-${variant}`]: variant && variant !== "default",
         [`${prefixCls}-block`]: block,
         [`${prefixCls}-disabled`]: disabled
       },

package/dist/cjs/Segmented/style/index.less

@@ -88,6 +88,30 @@
     box-shadow: 0 0 0 2px var(--yee-primary-color);
   }
 
+  // 变体：胶囊风格，选中项以主色胶囊高亮，容器无底色
+  &-pill {
+    padding: 0;
+    background-color: transparent;
+    gap: var(--yee-segmented-item-gap);
+
+    @{pls}-item {
+      border-radius: 999px;
+    }
+
+    @{pls}-item-selected {
+      color: var(--yee-segmented-pill-color, #fff);
+    }
+
+    @{pls}-thumb {
+      border-radius: 999px;
+      background-color: var(
+        --yee-segmented-pill-bg-color,
+        var(--yee-primary-color)
+      );
+      box-shadow: none;
+    }
+  }
+
   &-small {
     @{pls}-item {
       padding: var(--yee-segmented-item-small-padding);

package/dist/cjs/Tag/demo/variant.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const _default: () => React.JSX.Element;
+export default _default;

package/dist/cjs/Tag/demo/variant.js

@@ -0,0 +1,39 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Tag/demo/variant.tsx
+var variant_exports = {};
+__export(variant_exports, {
+  default: () => variant_default
+});
+module.exports = __toCommonJS(variant_exports);
+var import_yee_c = require("../..");
+var import_react = __toESM(require("react"));
+var variant_default = () => {
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled" }, "Filled"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid" }, "Solid"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined" }, "Outlined")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled", status: "success" }, "Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid", status: "success" }, "Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined", status: "success" }, "Success")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled", status: "warning" }, "Warning"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid", status: "warning" }, "Warning"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined", status: "warning" }, "Warning")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "filled", status: "error" }, "Error"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "solid", status: "error" }, "Error"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { variant: "outlined", status: "error" }, "Error")));
+};

package/dist/cjs/Tag/interface.d.ts

@@ -51,6 +51,11 @@ export interface TagProps extends DataAttributeProps {
      * Whether checkable
      */
     checkable?: boolean;
+    /**
+     * tag variant
+     * @default filled
+     * */
+    variant?: 'filled' | 'solid' | 'outlined';
     /**
      * Set checked state
      */