myshell-react-lib 0.1.12 → 0.1.13

package/dist/index.cjs

@@ -12237,12 +12237,38 @@ var switchSize = {
     md: "w-[34px] h-5",
     lg: "w-10 h-6"
 };
+var switchVerticalSize = {
+    sm: "h-7 w-4",
+    md: "h-[34px] w-5",
+    lg: "h-10 w-6"
+};
 var switchRootVariants = (0, import_class_variance_authority17.cva)('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 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: {
-        size: switchSize
+        size: switchSize,
+        vertical: {
+            true: "justify-start"
+        }
     },
+    compoundVariants: [
+        {
+            vertical: true,
+            size: "sm",
+            className: switchVerticalSize.sm
+        },
+        {
+            vertical: true,
+            size: "md",
+            className: switchVerticalSize.md
+        },
+        {
+            vertical: true,
+            size: "lg",
+            className: switchVerticalSize.lg
+        }
+    ],
     defaultVariants: {
-        size: "lg"
+        size: "lg",
+        vertical: false
     }
 });
 var switchThumbVariants = (0, import_class_variance_authority17.cva)("pointer-events-none block rounded-full bg-cc-Switch-fg-on ring-0 transition-transform data-[state=unchecked]:translate-x-0", {
@@ -12251,33 +12277,73 @@ var switchThumbVariants = (0, import_class_variance_authority17.cva)("pointer-ev
             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"
+        },
+        vertical: {
+            true: "data-[state=checked]:translate-x-0 data-[state=unchecked]:translate-x-0"
         }
     },
+    compoundVariants: [
+        {
+            vertical: true,
+            size: "sm",
+            className: "data-[state=unchecked]:translate-y-3 data-[state=checked]:translate-y-0"
+        },
+        {
+            vertical: true,
+            size: "md",
+            className: "data-[state=unchecked]:translate-y-[14px] data-[state=checked]:translate-y-0"
+        },
+        {
+            vertical: true,
+            size: "lg",
+            className: "data-[state=unchecked]:translate-y-4 data-[state=checked]:translate-y-0"
+        }
+    ],
     defaultVariants: {
-        size: "lg"
+        size: "lg",
+        vertical: false
+    }
+});
+var switchThumbIconVariants = (0, import_class_variance_authority17.cva)("flex items-center justify-center", {
+    variants: {
+        size: {
+            sm: "w-2 h-2",
+            md: "w-3 h-3",
+            lg: "w-4 h-4"
+        }
     }
 });
 var Switch = React36.forwardRef(function(_param, ref) {
-    var className = _param.className, size = _param.size, label = _param.label, labelClassName = _param.labelClassName, props = _object_without_properties(_param, [
+    var className = _param.className, size = _param.size, label = _param.label, labelClassName = _param.labelClassName, vertical = _param.vertical, icon = _param.icon, props = _object_without_properties(_param, [
         "className",
         "size",
         "label",
-        "labelClassName"
+        "labelClassName",
+        "vertical",
+        "icon"
     ]);
     var Component = label ? "div" : React36.Fragment;
     return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Component, {
-        className: "flex items-center justify-center space-x-1.5 text-Colors-Text-Default",
+        className: cn("flex items-center justify-center space-x-1.5 text-Colors-Text-Default", vertical && "flex-col space-x-0 space-y-1.5"),
         children: [
             /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SwitchPrimitives.Root, _object_spread_props(_object_spread({
                 className: cn(switchRootVariants({
-                    size: size
-                }), className, "")
+                    size: size,
+                    vertical: vertical
+                }), className, vertical && "flex-col")
             }, props), {
                 ref: ref,
                 children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SwitchPrimitives.Thumb, {
                     className: cn(switchThumbVariants({
-                        size: size
-                    }))
+                        size: size,
+                        vertical: vertical
+                    }), "flex items-center justify-center"),
+                    children: icon && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, {
+                        component: icon,
+                        className: switchThumbIconVariants({
+                            size: size
+                        })
+                    })
                 })
             })),
             label && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", {