myshell-react-lib 0.1.54 → 0.1.56

package/dist/index.d.cts

@@ -1090,7 +1090,7 @@ interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
 declare function Spinner(props: SpinnerProps): react_jsx_runtime.JSX.Element;
 
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     vertical?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
     label?: string;

package/dist/index.d.ts

@@ -1090,7 +1090,7 @@ interface SpinnerProps extends VariantProps<typeof spinnerVariants> {
 declare function Spinner(props: SpinnerProps): react_jsx_runtime.JSX.Element;
 
 declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
-    size?: "sm" | "md" | "lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
     vertical?: boolean | null | undefined;
 } & class_variance_authority_dist_types.ClassProp) | undefined) => string> & {
     label?: string;

package/dist/index.js

@@ -5044,7 +5044,7 @@ function createButtonWithVariant(props, ref) {
                 size: size
             }),
             /* @__PURE__ */ jsxs2("span", {
-                className: cn("inline-flex w-full items-center justify-center", loading ? "opacity-0" : "opacity-100", variant === "plain" && "font-medium"),
+                className: cn("inline-flex w-full items-center justify-center space-x-1.5", loading ? "opacity-0" : "opacity-100", variant === "plain" && "font-medium"),
                 children: [
                     !asset && icon && !iconOutBox && iconDirection === "left" && renderIcon(icon, "left", {
                         loading: loading,
@@ -5449,7 +5449,7 @@ var PopoverContent = React8.forwardRef(function(_param, ref) {
             arrowPadding: arrowPadding,
             side: side,
             forceMount: true,
-            className: cn("relative z-[49] mx-4 w-fit max-w-72 rounded-md border border-Colors-Border-Opaque p-3 text-left text-xs shadow-modal-default outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&[data-state=open]>span]:animate-none", variant === "default" ? mode === "popover" ? "bg-Colors-Background-Normal-Secondary-Alt border-Colors-Border-Opaque text-Colors-Text-Default" : "bg-cc-Tooltip-bg-default text-cc-Tooltip-fg-default border border-cc-Tooltip-border-default" : "bg-Colors-Utility-Lake-Blue-50 text-Colors-Text-Static-White", className)
+            className: cn("relative z-[49] mx-4 w-fit max-w-72 rounded-md border border-Colors-Border-Opaque p-3 text-left text-xs shadow-modal-default outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 [&[data-state=open]>span]:animate-none", variant === "default" ? mode === "popover" ? "bg-Colors-Background-Utilities-Modal border-Colors-Border-Opaque text-Colors-Text-Default" : "bg-cc-Tooltip-bg-default text-cc-Tooltip-fg-default border border-cc-Tooltip-border-default" : "bg-Colors-Utility-Lake-Blue-50 text-Colors-Text-Static-White", className)
         }, props), {
             children: [
                 children,
@@ -6072,7 +6072,7 @@ var DropdownMenuSubTrigger = React13.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ jsxs7(DropdownMenuPrimitive.SubTrigger, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("flex cursor-default select-none items-center rounded-md px-3 py-2 outline-none focus:bg-Colors-Background-Neutral-Primary-Default data-[state=open]:bg-Colors-Background-Neutral-Primary-Default", inset && "pl-8", className)
+        className: cn("flex cursor-default select-none items-center rounded-sm px-3 py-2 outline-none focus:bg-Colors-Background-Neutral-Primary-Default data-[state=open]:bg-Colors-Background-Neutral-Primary-Default", inset && "pl-8", className)
     }, props), {
         children: [
             children,
@@ -6089,7 +6089,7 @@ var DropdownMenuSubContent = React13.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.SubContent, _object_spread({
         ref: ref,
-        className: cn("z-50 min-w-[8rem] overflow-hidden rounded-xl border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active p-2 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
+        className: cn("z-50 min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Default bg-Colors-Background-Utilities-Modal p-2 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
     }, props));
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
@@ -6101,7 +6101,7 @@ var DropdownMenuContent = React13.forwardRef(function(_param, ref) {
     return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.Content, _object_spread({
         ref: ref,
         sideOffset: sideOffset,
-        className: cn("z-[100] min-w-[8rem] overflow-hidden rounded-xl border border-Colors-Border-Opaque bg-Colors-Background-Normal-Primary-Default p-1 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
+        className: cn("z-[100] min-w-[8rem] overflow-hidden rounded-sm border border-Colors-Border-Opaque bg-Colors-Background-Normal-Primary-Default p-1 text-Colors-Text-Default shadow-modal-default data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className)
     }, props));
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
@@ -6112,7 +6112,7 @@ var DropdownMenuItem = React13.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ jsx18(DropdownMenuPrimitive.Item, _object_spread({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-md px-2 py-1 outline-none transition-colors focus:bg-Colors-Background-Neutral-Primary-Default data-[disabled]:pointer-events-none data-[disabled]:opacity-30", inset && "pl-8", className)
+        className: cn("relative flex cursor-default select-none items-center rounded-sm px-2 py-1 outline-none transition-colors focus:bg-Colors-Background-Neutral-Primary-Default data-[disabled]:pointer-events-none data-[disabled]:opacity-30", inset && "pl-8", className)
     }, props));
 });
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
@@ -6124,7 +6124,7 @@ var DropdownMenuCheckboxItem = React13.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ jsxs7(DropdownMenuPrimitive.CheckboxItem, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-xxs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-30", className),
+        className: cn("relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-30", className),
         checked: checked
     }, props), {
         children: [
@@ -6148,7 +6148,7 @@ var DropdownMenuRadioItem = React13.forwardRef(function(_param, ref) {
     ]);
     return /* @__PURE__ */ jsxs7(DropdownMenuPrimitive.RadioItem, _object_spread_props(_object_spread({
         ref: ref,
-        className: cn("relative flex cursor-default select-none items-center rounded-xxs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50", className)
+        className: cn("relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-slate-100 focus:text-slate-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-slate-800 dark:focus:text-slate-50", className)
     }, props), {
         children: [
             /* @__PURE__ */ jsx18("span", {
@@ -7822,7 +7822,7 @@ var ModalContent = React27.forwardRef(function(_param, ref) {
         "children"
     ]);
     return /* @__PURE__ */ jsx34(DialogPrimitive2.Content, _object_spread_props(_object_spread({
-        className: cn("absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 !touch-auto !select-text", "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] focus:outline-none", className)
+        className: cn("absolute left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 !touch-auto !select-text", "duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] outline-none focus-visible:!outline-none ", className)
     }, props), {
         children: children
     }));
@@ -7858,7 +7858,7 @@ var ModalTitle = React27.forwardRef(function(_param, ref) {
     }));
 });
 ModalTitle.displayName = DialogPrimitive2.Title.displayName;
-var modalVariants = cva12("", {
+var modalVariants = cva12("focus-visible:outline-none", {
     variants: {
         size: {
             lg: "w-[720px] max-h-[600px]",
@@ -7908,7 +7908,7 @@ var Modal = function(_param) {
     var isMobile2 = useMedia4("(max-width: 768px)");
     if (isMobile2 && !modalOnly && !isNotification) {
         var drawerContent = /* @__PURE__ */ jsxs17(DrawerPrimitive2.Content, {
-            className: cn("fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-Normal-Secondary-Alt shadow-modal-default focus:outline-none", fullScreen ? "rounded-t-none max-h-full" : "rounded-t-md max-h-[85vh]", contentClassName),
+            className: cn("fixed inset-x-0 bottom-0 z-50 h-auto overflow-hidden no-scrollbar border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default focus:outline-none", fullScreen ? "rounded-t-none max-h-full" : "rounded-t-md max-h-[85vh]", contentClassName),
             onOpenAutoFocus: function(e) {
                 !autoFocus && e.preventDefault();
             },
@@ -8003,7 +8003,7 @@ var Modal = function(_param) {
         }
     };
     var dialogContent = /* @__PURE__ */ jsxs17(ModalContent, {
-        className: cn("rounded-md border-Colors-Border-Opaque bg-Colors-Background-Normal-Primary-Default shadow-modal-default overflow-hidden", !isMobile2 ? modalVariants({
+        className: cn("rounded-md border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal shadow-modal-default overflow-hidden", !isMobile2 ? modalVariants({
             size: size,
             zIndex: zIndex
         }) : isLogin ? "w-[90%]" : "w-[80%]", isNotification && "w-[312px] md:w-[380px]", contentClassName),
@@ -10806,14 +10806,14 @@ function TopNavigationBar(param) {
                                         href: backUrl,
                                         className: "flex justify-center items-center",
                                         children: /* @__PURE__ */ jsx44(IconButton, {
-                                            variant: !hasBackground ? "primary" : "plain",
-                                            color: !hasBackground ? "gray" : "brand",
+                                            variant: "plain",
+                                            color: "default",
                                             size: "md",
                                             icon: ArrowLeftIcon
                                         })
                                     }) : /* @__PURE__ */ jsx44(IconButton, {
-                                        variant: !hasBackground ? "primary" : "plain",
-                                        color: !hasBackground ? "gray" : "brand",
+                                        variant: "plain",
+                                        color: "default",
                                         size: "md",
                                         icon: ArrowLeftIcon,
                                         onClick: onBack
@@ -11338,12 +11338,14 @@ import { jsx as jsx50, jsxs as jsxs28 } from "react/jsx-runtime";
 var switchSize = {
     sm: "w-7 h-4",
     md: "w-[34px] h-5",
-    lg: "w-10 h-6"
+    lg: "w-10 h-6",
+    xl: "w-12 h-7"
 };
 var switchVerticalSize = {
     sm: "h-7 w-4",
     md: "h-[34px] w-5",
-    lg: "h-10 w-6"
+    lg: "h-10 w-6",
+    xl: "h-12 w-7"
 };
 var switchRootVariants = cva16('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-cc-Focus-Rings-Brand-default focus-visible:ring-offset-2 data-[state=unchecked]:focus-visible:bg-cc-Switch-bg-default disabled:cursor-not-allowed disabled:opacity-30 data-[state="checked"]:bg-cc-Switch-bg-on data-[state="unchecked"]:bg-cc-Switch-bg-default', {
     variants: {
@@ -11367,6 +11369,11 @@ var switchRootVariants = cva16('peer inline-flex shrink-0 cursor-pointer items-c
             vertical: true,
             size: "lg",
             className: switchVerticalSize.lg
+        },
+        {
+            vertical: true,
+            size: "xl",
+            className: switchVerticalSize.xl
         }
     ],
     defaultVariants: {
@@ -11379,7 +11386,8 @@ var switchThumbVariants = cva16("pointer-events-none block rounded-full bg-cc-Sw
         size: {
             sm: "w-3 h-3 data-[state=checked]:translate-x-3",
             md: "w-4 h-4 data-[state=checked]:translate-x-[14px]",
-            lg: "w-5 h-5 data-[state=checked]:translate-x-4"
+            lg: "w-5 h-5 data-[state=checked]:translate-x-4",
+            xl: "w-6 h-6 data-[state=checked]:translate-x-5"
         },
         vertical: {
             true: "data-[state=checked]:translate-x-0 data-[state=unchecked]:translate-x-0"
@@ -11400,6 +11408,11 @@ var switchThumbVariants = cva16("pointer-events-none block rounded-full bg-cc-Sw
             vertical: true,
             size: "lg",
             className: "data-[state=unchecked]:translate-y-4 data-[state=checked]:translate-y-0"
+        },
+        {
+            vertical: true,
+            size: "xl",
+            className: "data-[state=unchecked]:translate-y-5 data-[state=checked]:translate-y-0"
         }
     ],
     defaultVariants: {
@@ -11412,7 +11425,8 @@ var switchThumbIconVariants = cva16("flex items-center justify-center", {
         size: {
             sm: "w-2 h-2",
             md: "w-3 h-3",
-            lg: "w-4 h-4"
+            lg: "w-4 h-4",
+            xl: "w-4 h-4"
         }
     }
 });
@@ -11681,7 +11695,7 @@ var Tab = React37.forwardRef(function(_param, ref) {
     }, tooltip), {
         children: /* @__PURE__ */ jsx51(TabsPrimitive.Trigger, _object_spread_props(_object_spread({
             ref: ref,
-            className: cn("tabtrigger min-w-fit", tabVariants({
+            className: cn("tabtrigger min-w-fit outline-none focus:!outline-none focus-visible:!outline-none", tabVariants({
                 variant: variant,
                 size: size,
                 rounded: rounded
@@ -11760,7 +11774,7 @@ var Textarea = React38.forwardRef(function(_param, ref) {
                 className: "relative",
                 children: [
                     /* @__PURE__ */ jsx52("textarea", _object_spread({
-                        className: cn("w-full min-h-[123px] p-3 pb-10 rounded-sm border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active ", "text-sm text-Colors-Text-Default placeholder:text-Colors-Text-Subtlest", "hover:border-Colors-Border-Hover bg-cc-Input-bg-default hover:bg-cc-Input-bg-hover disabled:bg-cc-Input-bg-disabled aria-[invalid=true]:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-Colors-Background-Critical-Subtle", "aria-[invalid=true]:focus-visible:ring-error file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-Colors-Text-Subtler", "disabled:cursor-not-allowed disabled:opacity-30", maxLength && ((value1 === null || value1 === void 0 ? void 0 : (_value_toString = value1.toString()) === null || _value_toString === void 0 ? void 0 : _value_toString.length) || 0) > maxLength || error ? "border-Colors-Border-Critical hover:bg-Colors-Background-Critical-Subtle focus-visible:ring-error" : "", className),
+                        className: cn("w-full min-h-[123px] p-3 rounded-sm border border-Colors-Border-Default bg-Colors-Background-Normal-Primary-Active ", "text-sm text-Colors-Text-Default placeholder:text-Colors-Text-Subtlest", "hover:border-Colors-Border-Hover bg-cc-Input-bg-default hover:bg-cc-Input-bg-hover disabled:bg-cc-Input-bg-disabled aria-[invalid=true]:border-Colors-Border-Critical aria-[invalid=true]:hover:bg-Colors-Background-Critical-Subtle", "aria-[invalid=true]:focus-visible:ring-error file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-Colors-Text-Subtler", "disabled:cursor-not-allowed disabled:opacity-30", maxLength && ((value1 === null || value1 === void 0 ? void 0 : (_value_toString = value1.toString()) === null || _value_toString === void 0 ? void 0 : _value_toString.length) || 0) > maxLength || error ? "border-Colors-Border-Critical hover:bg-Colors-Background-Critical-Subtle focus-visible:ring-error" : "", className),
                         ref: ref,
                         maxLength: maxLength,
                         value: value1,
@@ -12156,10 +12170,10 @@ ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
 var toastVariants = cva20("group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-sm border border-Colors-Border-Opaque p-6 pr-8 shadow-modal-default transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 max-w-md", {
     variants: {
         variant: {
-            info: "bg-Colors-Background-Normal-Primary-Default p-4",
-            warning: "bg-Colors-Background-Normal-Primary-Default p-4",
-            error: "bg-Colors-Background-Normal-Primary-Default p-4",
-            success: "bg-Colors-Background-Normal-Primary-Default p-4"
+            info: "bg-Colors-Background-Utilities-Modal p-4",
+            warning: "bg-Colors-Background-Utilities-Modal p-4",
+            error: "bg-Colors-Background-Utilities-Modal p-4",
+            success: "bg-Colors-Background-Utilities-Modal p-4"
         },
         position: {
             "top-left": "data-[state=open]:slide-in-from-left-full data-[state=closed]:slide-out-to-left-full",
@@ -12724,7 +12738,7 @@ function CustomNotification(param) {
     return /* @__PURE__ */ jsx62("div", {
         children: /* @__PURE__ */ jsx62("div", {
             id: id,
-            className: "z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-Colors-Border-Opaque bg-Colors-Background-Normal-Primary-Default px-3 py-2 shadow-modal-default md:max-w-[560px]",
+            className: "z-[10000000] min-h-10 w-fit max-w-[90vw] rounded-full border border-Colors-Border-Opaque bg-Colors-Background-Utilities-Modal px-3 py-2 shadow-modal-default md:max-w-[560px]",
             children: /* @__PURE__ */ jsxs36("div", {
                 className: "flex w-full items-center justify-center gap-2",
                 children: [