myshell-react-lib 0.1.19 → 0.1.21

package/dist/index.cjs

@@ -5738,8 +5738,9 @@ var iconVariants2 = (0, import_class_variance_authority5.cva)("relative shrink-0
 });
 // src/components/button/button.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-var Button = React6.forwardRef(function(_param, ref) {
-    var _param_className = _param.className, className = _param_className === void 0 ? "" : _param_className, iconClassName = _param.iconClassName, _param_variant = _param.variant, variant = _param_variant === void 0 ? "primary" : _param_variant, _param_color = _param.color, color = _param_color === void 0 ? "default" : _param_color, icon = _param.icon, _param_iconDirection = _param.iconDirection, iconDirection = _param_iconDirection === void 0 ? "left" : _param_iconDirection, size = _param.size, _param_asChild = _param.asChild, asChild = _param_asChild === void 0 ? false : _param_asChild, _param_loading = _param.loading, loading = _param_loading === void 0 ? false : _param_loading, _param_noStyle = _param.noStyle, noStyle = _param_noStyle === void 0 ? false : _param_noStyle, _param_iconOutBox = _param.iconOutBox, iconOutBox = _param_iconOutBox === void 0 ? false : _param_iconOutBox, _param_isBlock = _param.isBlock, isBlock = _param_isBlock === void 0 ? false : _param_isBlock, disabled = _param.disabled, children = _param.children, autoFocus = _param.autoFocus, asset = _param.asset, _param_assetNumber = _param.assetNumber, assetNumber = _param_assetNumber === void 0 ? 0 : _param_assetNumber, props = _object_without_properties(_param, [
+function createButtonWithVariant(props, ref) {
+    var _props_className = props.className, className = _props_className === void 0 ? "" : _props_className, iconClassName = props.iconClassName, _props_variant = props.variant, variant = _props_variant === void 0 ? "primary" : _props_variant, // 设置默认值为primary
+    userProvidedColor = props.color, icon = props.icon, _props_iconDirection = props.iconDirection, iconDirection = _props_iconDirection === void 0 ? "left" : _props_iconDirection, _props_size = props.size, size = _props_size === void 0 ? "lg" : _props_size, _props_asChild = props.asChild, asChild = _props_asChild === void 0 ? false : _props_asChild, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, _props_noStyle = props.noStyle, noStyle = _props_noStyle === void 0 ? false : _props_noStyle, _props_iconOutBox = props.iconOutBox, iconOutBox = _props_iconOutBox === void 0 ? false : _props_iconOutBox, _props_isBlock = props.isBlock, isBlock = _props_isBlock === void 0 ? false : _props_isBlock, disabled = props.disabled, children = props.children, autoFocus = props.autoFocus, asset = props.asset, _props_assetNumber = props.assetNumber, assetNumber = _props_assetNumber === void 0 ? 0 : _props_assetNumber, passProps = _object_without_properties(props, [
         "className",
         "iconClassName",
         "variant",
@@ -5758,6 +5759,7 @@ var Button = React6.forwardRef(function(_param, ref) {
         "asset",
         "assetNumber"
     ]);
+    var color = userProvidedColor || "default";
     var Comp = asChild ? import_react_slot.Slot : "button";
     var disable = disabled || loading;
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(Comp, _object_spread_props(_object_spread({
@@ -5770,7 +5772,7 @@ var Button = React6.forwardRef(function(_param, ref) {
         ref: ref,
         disabled: disable,
         autoFocus: autoFocus
-    }, props), {
+    }, passProps), {
         children: [
             loading && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", {
                 className: "absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 items-center justify-center",
@@ -5841,9 +5843,12 @@ var Button = React6.forwardRef(function(_param, ref) {
             })
         ]
     }));
+}
+var Button = React6.forwardRef(function(props, ref) {
+    return createButtonWithVariant(props, ref);
 });
-var renderIcon = function(icon, direction, param) {
-    var loading = param.loading, noStyle = param.noStyle, iconClassName = param.iconClassName, _param_variant = param.variant, variant = _param_variant === void 0 ? "primary" : _param_variant, _param_color = param.color, color = _param_color === void 0 ? "brand" : _param_color, _param_size = param.size, size = _param_size === void 0 ? "lg" : _param_size;
+var renderIcon = function(icon, direction, props) {
+    var loading = props.loading, noStyle = props.noStyle, iconClassName = props.iconClassName, variant = props.variant, size = props.size;
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, {
         component: icon,
         className: noStyle ? iconClassName : cn(iconVariants2({
@@ -6386,87 +6391,83 @@ var TooltipContent = React9.forwardRef(function(_param, ref) {
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 // src/components/button/icon-button.styles.ts
 var import_class_variance_authority6 = require("class-variance-authority");
-var iconButtonVariants = (0, import_class_variance_authority6.cva)("shrink-0 inline-flex items-center justify-center whitespace-nowrap rounded-sm font-medium transition-colors focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-30 disabled:shadow-none", {
-    variants: {
-        variant: {
-            primary: "",
-            secondary: "border shadow-none",
-            tertiary: "border shadow-none",
-            plain: "",
-            opacity: "backdrop-blur-2xl text-Colors-Text-Static-White bg-Colors-Beta-White-30 border border-Colors-Beta-White-12 shadow-none hover:bg-Colors-Beta-White-40 focus:shadow-cc-Focus-Rings-Brand-default active:bg-Colors-Beta-White-50 disabled:bg-Colors-Beta-White-60 disabled:text-Colors-Beta-White-80",
-            solid: "shadow-none text-Colors-Text-Subtle bg-cc-Button-Solid-bg-default border border-cc-Button-Solid-border-default hover:bg-cc-Button-Solid-bg-hover hover:border-cc-Button-Solid-border-alt active:bg-cc-Button-Solid-bg-active disabled:text-cc-Button-Solid-fg-alt",
-            static: "text-cc-Button-Static-fg-default border-cc-Button-Static-border-default bg-cc-Button-Static-bg-default hover:bg-cc-Button-Static-bg-hover active:bg-cc-Button-Static-bg-active disabled:bg-cc-Button-Static-bg-disabled disabled:text-cc-Button-Static-fg-alt"
-        },
-        color: {
-            default: "",
-            brand: "",
-            error: "",
-            gray: ""
-        },
-        size: {
-            xs: "h-5 w-5 text-xs",
-            sm: "h-7 w-7 text-sm",
-            md: "h-9 w-9 text-sm",
-            lg: "h-11 w-11"
-        }
-    },
-    compoundVariants: [
-        {
-            variant: "primary",
-            color: "default",
-            className: "bg-cc-Button-Primary-bg-default text-cc-Button-Primary-fg-default hover:bg-cc-Button-Primary-bg-hover active:bg-cc-Button-Primary-bg-active disabled:bg-cc-Button-Primary-bg-disabled"
-        },
-        {
-            variant: "primary",
-            color: "brand",
-            className: "text-cc-Icon-Button-Brand-fg-default bg-cc-Icon-Button-Brand-bg-default hover:bg-cc-Icon-Button-Brand-bg-hover active:bg-cc-Icon-Button-Brand-bg-active disabled:bg-cc-Icon-Button-Brand-bg-disabled disabled:text-cc-Icon-Button-Brand-fg-alt"
-        },
-        {
-            variant: "primary",
-            color: "error",
-            className: "text-cc-Button-Error-Primary-fg-default bg-cc-Button-Error-Primary-bg-default hover:bg-cc-Button-Error-Primary-bg-hover active:bg-cc-Button-Error-Primary-bg-active disabled:bg-cc-Button-Error-Primary-bg-disabled"
-        },
-        {
-            variant: "secondary",
-            color: "default",
-            className: "border-cc-Button-Secondary-border-default text-cc-Button-Secondary-fg-default bg-cc-Button-Secondary-bg-default hover:bg-cc-Button-Secondary-bg-hover active:bg-cc-Button-Secondary-bg-active disabled:text-cc-Button-Secondary-fg-alt  disabled:border-cc-Button-Secondary-border-disabled"
-        },
-        {
-            variant: "tertiary",
-            color: "default",
-            className: "border-cc-Button-Tertiary-border-default text-cc-Button-Tertiary-fg-default  bg-cc-Button-Tertiary-bg-default hover:bg-cc-Button-Tertiary-bg-hover hover:border-cc-Button-Tertiary-border-alt focus:shadow-button-tertiary-shadow active:bg-cc-Button-Tertiary-bg-active disabled:text-cc-Button-Tertiary-fg-alt"
-        },
-        {
-            variant: "secondary",
-            color: "error",
-            className: "border-cc-Button-Error-Secondary-border-default text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Error-Secondary-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Error-Secondary-fg-alt disabled:border-cc-Button-Error-Secondary-border-disabled"
-        },
-        {
-            variant: "secondary",
-            color: "gray",
-            className: "text-Colors-Foreground-Subtle hover:bg-Colors-Background-Normal-Primary-Hover"
-        },
-        {
-            variant: "plain",
-            color: "default",
-            className: "text-cc-Button-Plain-fg-default hover:bg-cc-Button-Plain-bg-hover focus:shadow-rings-brand active:bg-cc-Button-Plain-bg-active disabled:text-cc-Button-Plain-fg-alt"
-        },
-        {
-            variant: "plain",
-            color: "gray",
-            className: "text-cc-Icon-Button-Plain-Gray-fg-default bg-cc-Button-Plain-Brand-bg-default hover:bg-cc-Button-Plain-Brand-bg-hover active:bg-cc-Button-Plain-Brand-bg-active disabled:text-cc-Button-Plain-Gray-fg-alt"
-        },
-        {
-            variant: "plain",
-            color: "error",
-            className: "text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Plain-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Plain-fg-default"
-        }
-    ],
-    defaultVariants: {
+var BASE_STYLES = "shrink-0 inline-flex items-center justify-center whitespace-nowrap rounded-sm font-medium transition-colors focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-2 focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-1 disabled:pointer-events-none disabled:opacity-30 disabled:shadow-none";
+var VARIANT_STYLES = {
+    primary: "",
+    secondary: "border shadow-none",
+    tertiary: "border shadow-none",
+    plain: "",
+    opacity: "backdrop-blur-2xl text-Colors-Text-Static-White bg-Colors-Beta-White-30 border border-Colors-Beta-White-12 shadow-none hover:bg-Colors-Beta-White-40 focus:shadow-cc-Focus-Rings-Brand-default active:bg-Colors-Beta-White-50 disabled:bg-Colors-Beta-White-60 disabled:text-Colors-Beta-White-80",
+    solid: "shadow-none text-Colors-Text-Subtle bg-cc-Button-Solid-bg-default border border-cc-Button-Solid-border-default hover:bg-cc-Button-Solid-bg-hover hover:border-cc-Button-Solid-border-alt active:bg-cc-Button-Solid-bg-active disabled:text-cc-Button-Solid-fg-alt",
+    static: "text-cc-Button-Static-fg-default border-cc-Button-Static-border-default bg-cc-Button-Static-bg-default hover:bg-cc-Button-Static-bg-hover active:bg-cc-Button-Static-bg-active disabled:bg-cc-Button-Static-bg-disabled disabled:text-cc-Button-Static-fg-alt"
+};
+var COLOR_STYLES = {
+    default: "",
+    brand: "",
+    error: "",
+    gray: ""
+};
+var SIZE_STYLES = {
+    xs: "h-5 w-5 text-xs",
+    sm: "h-7 w-7 text-sm",
+    md: "h-9 w-9 text-sm",
+    lg: "h-11 w-11"
+};
+var COMPOUND_VARIANTS = [
+    {
         variant: "primary",
         color: "brand",
-        size: "lg"
+        className: "text-cc-Icon-Button-Brand-fg-default bg-cc-Icon-Button-Brand-bg-default hover:bg-cc-Icon-Button-Brand-bg-hover active:bg-cc-Icon-Button-Brand-bg-active disabled:bg-cc-Icon-Button-Brand-bg-disabled disabled:text-cc-Icon-Button-Brand-fg-alt"
+    },
+    {
+        variant: "primary",
+        color: "error",
+        className: "text-cc-Button-Error-Primary-fg-default bg-cc-Button-Error-Primary-bg-default hover:bg-cc-Button-Error-Primary-bg-hover active:bg-cc-Button-Error-Primary-bg-active disabled:bg-cc-Button-Error-Primary-bg-disabled"
+    },
+    {
+        variant: "secondary",
+        color: "default",
+        className: "border-cc-Button-Secondary-border-default text-cc-Button-Secondary-fg-default bg-cc-Button-Secondary-bg-default hover:bg-cc-Button-Secondary-bg-hover active:bg-cc-Button-Secondary-bg-active disabled:text-cc-Button-Secondary-fg-alt  disabled:border-cc-Button-Secondary-border-disabled"
+    },
+    {
+        variant: "secondary",
+        color: "error",
+        className: "border-cc-Button-Error-Secondary-border-default text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Error-Secondary-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Error-Secondary-fg-alt disabled:border-cc-Button-Error-Secondary-border-disabled"
+    },
+    {
+        variant: "tertiary",
+        color: "default",
+        className: "border-cc-Button-Tertiary-border-default text-cc-Button-Tertiary-fg-default  bg-cc-Button-Tertiary-bg-default hover:bg-cc-Button-Tertiary-bg-hover hover:border-cc-Button-Tertiary-border-alt focus:shadow-button-tertiary-shadow active:bg-cc-Button-Tertiary-bg-active disabled:text-cc-Button-Tertiary-fg-alt"
+    },
+    {
+        variant: "plain",
+        color: "default",
+        className: "text-cc-Button-Plain-fg-default hover:bg-cc-Button-Plain-bg-hover focus:shadow-rings-brand active:bg-cc-Button-Plain-bg-active disabled:text-cc-Button-Plain-fg-alt"
+    },
+    {
+        variant: "plain",
+        color: "gray",
+        className: "text-cc-Icon-Button-Plain-Gray-fg-default bg-cc-Button-Plain-Brand-bg-default hover:bg-cc-Button-Plain-Brand-bg-hover active:bg-cc-Button-Plain-Brand-bg-active disabled:text-cc-Button-Plain-Gray-fg-alt"
+    },
+    {
+        variant: "plain",
+        color: "error",
+        className: "text-cc-Button-Error-Secondary-fg-default bg-cc-Button-Plain-bg-default hover:bg-cc-Button-Error-Secondary-bg-hover active:bg-cc-Button-Error-Secondary-bg-active disabled:text-cc-Button-Plain-fg-default"
     }
+];
+var DEFAULT_VARIANTS = {
+    variant: "primary",
+    color: "default",
+    size: "lg"
+};
+var iconButtonVariants = (0, import_class_variance_authority6.cva)(BASE_STYLES, {
+    variants: {
+        variant: VARIANT_STYLES,
+        color: COLOR_STYLES,
+        size: SIZE_STYLES
+    },
+    compoundVariants: COMPOUND_VARIANTS,
+    defaultVariants: DEFAULT_VARIANTS
 });
 var iconSizeVariants = {
     xs: "w-3 h-3",
@@ -6476,8 +6477,16 @@ var iconSizeVariants = {
 };
 // src/components/button/icon-button.tsx
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var IconButton = React10.forwardRef(function(_param, ref) {
-    var iconClassName = _param.iconClassName, className = _param.className, variant = _param.variant, _param_size = _param.size, size = _param_size === void 0 ? "lg" : _param_size, color = _param.color, _param_asChild = _param.asChild, asChild = _param_asChild === void 0 ? false : _param_asChild, _param_loading = _param.loading, loading = _param_loading === void 0 ? false : _param_loading, children = _param.children, IconEle = _param.icon, disabled = _param.disabled, hoverText = _param.hoverText, hoverSide = _param.hoverSide, passProps = _object_without_properties(_param, [
+function getDefaultColorForVariant(variant) {
+    switch(variant){
+        case "primary":
+            return "brand";
+        default:
+            return "default";
+    }
+}
+function createIconButtonWithVariant(props, ref) {
+    var iconClassName = props.iconClassName, className = props.className, _props_variant = props.variant, variant = _props_variant === void 0 ? "primary" : _props_variant, _props_size = props.size, size = _props_size === void 0 ? "lg" : _props_size, userProvidedColor = props.color, _props_asChild = props.asChild, asChild = _props_asChild === void 0 ? false : _props_asChild, _props_loading = props.loading, loading = _props_loading === void 0 ? false : _props_loading, children = props.children, IconEle = props.icon, disabled = props.disabled, hoverText = props.hoverText, hoverSide = props.hoverSide, passProps = _object_without_properties(props, [
         "iconClassName",
         "className",
         "variant",
@@ -6491,6 +6500,7 @@ var IconButton = React10.forwardRef(function(_param, ref) {
         "hoverText",
         "hoverSide"
     ]);
+    var color = userProvidedColor || getDefaultColorForVariant(variant);
     var isMobile2 = (0, import_react_use2.useMedia)("(max-width: 768px)");
     var Comp = asChild ? import_react_slot2.Slot : "button";
     var iconCls = cn(iconSizeVariants[size], iconClassName);
@@ -6519,6 +6529,9 @@ var IconButton = React10.forwardRef(function(_param, ref) {
             }) : null
         }))
     });
+}
+var IconButton = React10.forwardRef(function(props, ref) {
+    return createIconButtonWithVariant(props, ref);
 });
 // src/components/audio-playing.tsx
 var import_lottie_web = __toESM(require("lottie-web"), 1);
@@ -11692,7 +11705,7 @@ function SecondaryNavigationBar(param) {
                                 icons && icons.map(function(icon, index) {
                                     return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(IconButton, {
                                         variant: !hasBackground ? "tertiary" : "plain",
-                                        color: !hasBackground ? "default" : "brand",
+                                        color: "default",
                                         size: "md",
                                         icon: icon.icon,
                                         onClick: icon.onClick
@@ -11745,7 +11758,6 @@ function SecondaryNavigationBar(param) {
                                     "aria-label": clearText || "Clear Filters",
                                     size: "md",
                                     variant: "primary",
-                                    color: "default",
                                     onClick: onClear,
                                     children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", {
                                         className: "relative",