@rainbow-oh/yee-c 0.2.0 → 0.4.0

package/dist/cjs/Segmented/segmented.js

@@ -0,0 +1,180 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+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/segmented.tsx
+var segmented_exports = {};
+__export(segmented_exports, {
+  default: () => segmented_default
+});
+module.exports = __toCommonJS(segmented_exports);
+var import_clsx = __toESM(require("clsx"));
+var import_react = __toESM(require("react"));
+var import_react2 = require("motion/react");
+var import_Config_Provider = require("../Config-Provider");
+var import_useMergedState = __toESM(require("../hooks/useMergedState"));
+var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
+var import_style = require("./style/index.less");
+var normalizeOption = (option) => {
+  if (typeof option === "string" || typeof option === "number") {
+    return { label: String(option), value: option };
+  }
+  return option;
+};
+var Segmented = import_react.default.forwardRef(
+  (baseprops, ref) => {
+    var _b;
+    const { segmented } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);
+    const props = (0, import_mergeContextToProps.default)(baseprops, segmented);
+    const uid = (0, import_react.useId)();
+    const _a = props, {
+      prefixCls = "yee-segmented",
+      className,
+      style,
+      classNames,
+      styles,
+      options = [],
+      value,
+      defaultValue,
+      disabled,
+      size,
+      variant = "default",
+      block,
+      name = uid,
+      onChange
+    } = _a, rest = __objRest(_a, [
+      "prefixCls",
+      "className",
+      "style",
+      "classNames",
+      "styles",
+      "options",
+      "value",
+      "defaultValue",
+      "disabled",
+      "size",
+      "variant",
+      "block",
+      "name",
+      "onChange"
+    ]);
+    const items = (0, import_react.useMemo)(
+      () => options.map(normalizeOption),
+      [options]
+    );
+    const firstValue = (_b = items[0]) == null ? void 0 : _b.value;
+    const [mergedValue, setMergedValue] = (0, import_useMergedState.default)(firstValue, {
+      value,
+      defaultValue
+    });
+    const cls = (0, import_clsx.default)(
+      prefixCls,
+      {
+        [`${prefixCls}-${size}`]: size,
+        [`${prefixCls}-${variant}`]: variant && variant !== "default",
+        [`${prefixCls}-block`]: block,
+        [`${prefixCls}-disabled`]: disabled
+      },
+      className
+    );
+    const handleChange = (itemValue) => {
+      setMergedValue(itemValue);
+      onChange == null ? void 0 : onChange(itemValue);
+    };
+    return /* @__PURE__ */ import_react.default.createElement("div", __spreadProps(__spreadValues({}, rest), { ref, className: cls, style, role: "radiogroup" }), items.map((item) => {
+      const selected = item.value === mergedValue;
+      const itemDisabled = disabled || item.disabled;
+      return /* @__PURE__ */ import_react.default.createElement(
+        "label",
+        {
+          key: item.value,
+          className: (0, import_clsx.default)(`${prefixCls}-item`, item.className, {
+            [`${prefixCls}-item-selected`]: selected,
+            [`${prefixCls}-item-disabled`]: itemDisabled
+          })
+        },
+        selected ? /* @__PURE__ */ import_react.default.createElement(
+          import_react2.motion.span,
+          {
+            layoutId: `${prefixCls}-thumb-${uid}`,
+            className: (0, import_clsx.default)(`${prefixCls}-thumb`, classNames == null ? void 0 : classNames.thumb),
+            style: styles == null ? void 0 : styles.thumb,
+            transition: {
+              type: "spring",
+              visualDuration: 0.3,
+              bounce: 0.2
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-inner` }, item.icon ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-icon` }, item.icon) : null, item.label !== void 0 && item.label !== null ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-label` }, item.label) : null),
+        /* @__PURE__ */ import_react.default.createElement(
+          "input",
+          {
+            type: "radio",
+            className: `${prefixCls}-input`,
+            name,
+            value: item.value,
+            checked: selected,
+            disabled: itemDisabled,
+            onChange: () => handleChange(item.value)
+          }
+        )
+      );
+    }));
+  }
+);
+Segmented.displayName = "Segmented";
+var segmented_default = Segmented;

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

@@ -0,0 +1,128 @@
+@pls: .yee-segmented;
+
+@{pls} {
+  display: inline-flex;
+  box-sizing: border-box;
+  padding: var(--yee-segmented-padding);
+  border-radius: var(--yee-segmented-border-radius);
+  background-color: var(--yee-segmented-bg-color);
+
+  &-block {
+    display: flex;
+    width: 100%;
+
+    @{pls}-item {
+      flex: 1;
+      justify-content: center;
+    }
+  }
+
+  &-disabled {
+    cursor: not-allowed;
+  }
+
+  &-item {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    box-sizing: border-box;
+    padding: var(--yee-segmented-item-padding);
+    border-radius: var(--yee-segmented-item-border-radius);
+    font-size: var(--yee-segmented-font-size);
+    color: var(--yee-segmented-item-color);
+    white-space: nowrap;
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--yee-segmented-transition-duration) linear;
+
+    &:hover:not(&-disabled):not(&-selected) {
+      color: var(--yee-segmented-item-hover-color);
+    }
+  }
+
+  &-item-inner {
+    position: relative;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: var(--yee-segmented-item-gap);
+  }
+
+  &-item-icon {
+    display: inline-flex;
+    align-items: center;
+  }
+
+  &-item-selected {
+    color: var(--yee-segmented-item-selected-color);
+    cursor: default;
+  }
+
+  &-item-disabled {
+    color: var(--yee-segmented-item-disabled-color);
+    cursor: not-allowed;
+  }
+
+  &-thumb {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    border-radius: var(--yee-segmented-thumb-border-radius);
+    background-color: var(--yee-segmented-thumb-bg-color);
+    box-shadow: var(--yee-segmented-thumb-box-shadow);
+  }
+
+  &-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+
+  &-item:has(&-input:focus-visible) {
+    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);
+      font-size: var(--yee-segmented-font-small-size);
+    }
+  }
+
+  &-large {
+    @{pls}-item {
+      padding: var(--yee-segmented-item-large-padding);
+      font-size: var(--yee-segmented-font-large-size);
+    }
+  }
+}

package/dist/cjs/Spin/spin.js

@@ -125,7 +125,8 @@ var Spin = (baseprops) => {
         classNames,
         styles,
         size,
-        variant
+        variant,
+        color
       }
     ),
     tip && /* @__PURE__ */ import_react.default.createElement(

package/dist/cjs/Steps/step.js

@@ -86,7 +86,7 @@ var Step = (props) => {
     if (type === "navigation") {
       return /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial` }, index + 1);
     }
-    return index < current ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial ${prefixCls}-item-icon-check` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, null)) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial` }, index + 1);
+    return index < current ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial ${prefixCls}-item-icon-check` }, /* @__PURE__ */ import_react.default.createElement(import_lucide_react.Check, { size: 18, strokeWidth: 3 })) : /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-item-serial` }, index + 1);
   }, [icon, current, index, mergedStatus, dot, type, prefixCls]);
   const cls = (0, import_clsx.default)(
     `${prefixCls}-item`,

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

@@ -142,7 +142,7 @@
         background-color: var(--yee-steps-serial-done-bg-color, #fff);
         background-clip: padding-box;
         border-color: var(--yee-steps-serial-done-border-color, #1890ff);
-        color: var(--yee-steps-serial-done-color, #1890ff);
+        color: var(--yee-steps-step-done-color);
       }
 
       @{pls}-item-title {
@@ -283,9 +283,15 @@
       margin-bottom: 8px;
       padding-left: 0;
 
+      &-title {
+        &::after {
+          display: none;
+        }
+      }
+
       &-content {
         align-items: flex-start;
-        margin-left: 8px;
+        margin-left: 12px;
       }
 
       &-icon {

package/dist/cjs/Switch/demo/content.js

@@ -35,5 +35,26 @@ module.exports = __toCommonJS(content_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var content_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Switch, { checkedChildren: "ON", unCheckedChildren: "OFF" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Switch, { checkedChildren: "On", unCheckedChildren: "Off" }), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Switch, { checkedChildren: "✅", unCheckedChildren: "❌" }));
+  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Switch,
+    {
+      checkedChildren: "ON",
+      unCheckedChildren: "OFF",
+      style: { width: 60 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Switch,
+    {
+      checkedChildren: "On",
+      unCheckedChildren: "OFF",
+      style: { width: 60 }
+    }
+  ), /* @__PURE__ */ import_react.default.createElement(
+    import_yee_c.Switch,
+    {
+      checkedChildren: "✅",
+      unCheckedChildren: "❌",
+      style: { width: 48 }
+    }
+  ));
 };

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

@@ -15,6 +15,10 @@
   cursor: pointer;
   transition: background 0.2s linear;
 
+  &-spin {
+    position: absolute;
+  }
+
   &-handle {
     position: absolute;
     top: var(--yee-switch-handle-top);
@@ -67,6 +71,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      inset-inline-end: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-handle-offset)
+      );
+    }
   }
 
   &-unchecked {
@@ -77,6 +87,12 @@
         var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
       );
     }
+
+    @{pls}-spin {
+      padding-inline-start: calc(
+        var(--m-switch-handle-size) + var(--yee-switch-inner-padding-offset)
+      );
+    }
   }
 
   --m-switch-handle-size: var(--yee-switch-handle-size);

package/dist/cjs/Switch/switch.js

@@ -127,7 +127,7 @@ var Switch = (baseprops) => {
       role: "switch",
       "aria-checked": mergedChecked,
       className: cls,
-      disabled,
+      disabled: disabled || loading,
       onClick,
       style
     }),
@@ -142,7 +142,14 @@ var Switch = (baseprops) => {
           bounce: 0.2
         }
       },
-      loading ? /* @__PURE__ */ import_react2.default.createElement(import_Spin.default, { size: "small" }) : /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-handle-inner`) })
+      /* @__PURE__ */ import_react2.default.createElement("span", { className: (0, import_clsx.default)(`${prefixCls}-handle-inner`) }, loading ? /* @__PURE__ */ import_react2.default.createElement(
+        import_Spin.default,
+        {
+          size: "small",
+          className: `${prefixCls}-spin`,
+          color: checked ? "#fff" : void 0
+        }
+      ) : null)
     ),
     /* @__PURE__ */ import_react2.default.createElement(
       "span",

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

@@ -240,7 +240,7 @@ export interface ColumnProps {
     /**
      * Custom render cell content
      */
-    render?: (record: HeadCellProps | Record<string, unknown>, rowIndex: number) => React.ReactNode;
+    render?: (record: Record<string, unknown>, rowIndex: number) => React.ReactNode;
 }
 export interface WrapedColumnProps extends ColumnProps, ExpandableType, Omit<RowSelectionType, 'onCell'> {
     /**
@@ -420,6 +420,10 @@ export interface TableProps extends FooterProps, Omit<HeaderProps, 'pageData'>,
      * Locale text, including sort and empty data hints
      */
     locale?: Record<string, string>;
+    /**
+     * Content displayed when no data is available
+     * */
+    noData?: React.ReactNode;
     /**
      * Data
      */

package/dist/cjs/Table/theader/cell.js

@@ -88,8 +88,7 @@ var HeadCell = (props) => {
     width,
     onHeaderCell,
     onSort,
-    onInternalFilter,
-    render
+    onInternalFilter
   } = _a, rest = __objRest(_a, [
     "fixed",
     "isFixedLeftLast",
@@ -110,8 +109,7 @@ var HeadCell = (props) => {
     "width",
     "onHeaderCell",
     "onSort",
-    "onInternalFilter",
-    "render"
+    "onInternalFilter"
   ]);
   const { prefixCls } = (0, import_react.useContext)(import_table.TableCtx);
   const showFilter = !!filter;
@@ -185,7 +183,8 @@ var HeadCell = (props) => {
         className: `${prefixCls}-thead-cell`,
         style: { justifyContent: align }
       },
-      render ? render(props, 0) : /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, renderTitle(), renderFilter())
+      renderTitle(),
+      renderFilter()
     );
   };
   const cls = (0, import_clsx.default)(

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

@@ -35,5 +35,5 @@ module.exports = __toCommonJS(size_exports);
 var import_yee_c = require("../..");
 var import_react = __toESM(require("react"));
 var size_default = () => {
-  return /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { direction: "vertical" }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "small" }, "Small"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "default" }, "Default"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "large" }, "Large")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, null, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "small", status: "success" }, "Small Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "default", status: "success" }, "Default Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "large", status: "success" }, "Large Success")));
+  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, { size: "small" }, "Small"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "default" }, "Default"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "large" }, "Large")), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Space, { block: true }, /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "small", status: "success" }, "Small Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "default", status: "success" }, "Default Success"), /* @__PURE__ */ import_react.default.createElement(import_yee_c.Tag, { size: "large", status: "success" }, "Large Success")));
 };

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
      */