@luxfi/ui 7.4.10 → 7.4.12

package/dist/separator.js

@@ -1,49 +1,24 @@
 "use client";
 import { Separator as Separator$1 } from '@hanzo/gui';
 import React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsx } from 'react/jsx-runtime';
 
 // src/separator.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
-var VARIANT_CLASSES = {
-  solid: "border-solid",
-  dashed: "border-dashed",
-  dotted: "border-dotted"
-};
-var HORIZONTAL_SIZE_CLASSES = {
-  xs: "border-t-[0.5px]",
-  sm: "border-t",
-  md: "border-t-2",
-  lg: "border-t-[3px]"
-};
-var VERTICAL_SIZE_CLASSES = {
-  xs: "border-l-[0.5px]",
-  sm: "border-l",
-  md: "border-l-2",
-  lg: "border-l-[3px]"
-};
+var WEIGHT = { xs: 0.5, sm: 1, md: 2, lg: 3 };
 var Separator = React.forwardRef(
-  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", className, ...rest }, ref) {
-    const isVertical = orientation === "vertical";
+  function Separator2({ orientation = "horizontal", variant = "solid", size = "sm", ...rest }, ref) {
+    const vertical = orientation === "vertical";
     return /* @__PURE__ */ jsx(
       Separator$1,
       {
         ref,
-        vertical: isVertical,
+        vertical,
         role: "separator",
         "aria-orientation": orientation,
-        className: cn(
-          "border-[var(--color-border-divider)]",
-          "border-0",
-          VARIANT_CLASSES[variant],
-          isVertical ? VERTICAL_SIZE_CLASSES[size] : HORIZONTAL_SIZE_CLASSES[size],
-          isVertical ? "self-stretch h-auto w-0" : "w-full",
-          className
-        ),
+        borderWidth: 0,
+        borderStyle: variant,
+        borderColor: "var(--color-border-divider)",
+        ...vertical ? { borderLeftWidth: WEIGHT[size], alignSelf: "stretch", height: "auto", width: 0 } : { borderTopWidth: WEIGHT[size], width: "100%" },
         ...rest
       }
     );

package/dist/slider.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,9 +26,11 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/slider.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
+var MUTED = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React__namespace.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -63,21 +63,23 @@ var Slider = React__namespace.forwardRef(
     const handleSlideEnd = React__namespace.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+      label && showValue && /* @__PURE__ */ jsxRuntime.jsxs(gui.XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+        /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { fontSize: 14, color: MUTED, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs(
         gui.Slider,
         {
           ref,
           unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -89,33 +91,23 @@ var Slider = React__namespace.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              gui.Slider.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  gui.Slider.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsxRuntime.jsx(gui.Slider.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
               gui.Slider.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -130,20 +122,12 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(gui.View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxRuntime.jsxs(gui.View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(gui.View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { marginTop: 2, fontSize: 12, color: MUTED, children: mark.label })
+    ] }, index);
   }) });
 }
 

package/dist/slider.js

@@ -1,14 +1,14 @@
 "use client";
-import { Slider as Slider$1 } from '@hanzo/gui';
+import { YStack, Text, XStack, Slider as Slider$1, View } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/slider.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
+var MUTED = "var(--color-text-secondary)";
+var TRACK = "var(--color-border-divider)";
+var ACTIVE = "var(--color-link-primary)";
+var ACTIVE_HOVER = "var(--color-link-primary-hover)";
+var WHITE = "var(--color-white)";
 var Slider = React.forwardRef(
   function Slider2(props, ref) {
     const {
@@ -41,21 +41,23 @@ var Slider = React.forwardRef(
     const handleSlideEnd = React.useCallback(() => {
       onValueCommit?.(latest.current);
     }, [onValueCommit]);
-    return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1", className), children: [
-      label && !showValue && /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-      label && showValue && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("label", { className: "text-sm font-medium text-text-secondary", children: label }),
-        /* @__PURE__ */ jsx("span", { className: "text-sm text-text-secondary", children: (value ?? defaultValue ?? [])?.join(", ") })
+    return /* @__PURE__ */ jsxs(YStack, { className, gap: 4, children: [
+      label && !showValue && /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+      label && showValue && /* @__PURE__ */ jsxs(XStack, { alignItems: "center", justifyContent: "space-between", children: [
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, fontWeight: "500", color: MUTED, children: label }),
+        /* @__PURE__ */ jsx(Text, { fontSize: 14, color: MUTED, children: (value ?? defaultValue ?? [])?.join(", ") })
       ] }),
       /* @__PURE__ */ jsxs(
         Slider$1,
         {
           ref,
           unstyled: true,
-          className: cn(
-            "relative flex w-full touch-none select-none items-center",
-            hasMarkLabel && "mb-6"
-          ),
+          position: "relative",
+          flexDirection: "row",
+          width: "100%",
+          userSelect: "none",
+          alignItems: "center",
+          marginBottom: hasMarkLabel ? 24 : 0,
           value,
           defaultValue,
           min,
@@ -67,33 +69,23 @@ var Slider = React.forwardRef(
           onValueChange: handleValueChange,
           onSlideEnd: handleSlideEnd,
           children: [
-            /* @__PURE__ */ jsx(
-              Slider$1.Track,
-              {
-                unstyled: true,
-                className: "relative grow h-1.5 rounded-full bg-border-divider",
-                children: /* @__PURE__ */ jsx(
-                  Slider$1.TrackActive,
-                  {
-                    unstyled: true,
-                    className: "absolute h-full rounded-full bg-link-primary"
-                  }
-                )
-              }
-            ),
+            /* @__PURE__ */ jsx(Slider$1.Track, { unstyled: true, position: "relative", flexGrow: 1, height: 6, borderRadius: 9999, backgroundColor: TRACK, children: /* @__PURE__ */ jsx(Slider$1.TrackActive, { unstyled: true, position: "absolute", height: "100%", borderRadius: 9999, backgroundColor: ACTIVE }) }),
             resolvedValue?.map((_, index) => /* @__PURE__ */ jsx(
               Slider$1.Thumb,
               {
                 index,
                 unstyled: true,
-                className: cn(
-                  "block h-5 w-5",
-                  "rounded-full border-2 border-link-primary bg-white",
-                  "shadow-sm transition-colors",
-                  "hover:border-link-primary-hover",
-                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-link-primary focus-visible:ring-offset-2",
-                  "disabled:pointer-events-none disabled:opacity-50"
-                )
+                width: 20,
+                height: 20,
+                borderRadius: 9999,
+                borderWidth: 2,
+                borderColor: ACTIVE,
+                backgroundColor: WHITE,
+                boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                transition: "quick",
+                hoverStyle: { borderColor: ACTIVE_HOVER },
+                focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: ACTIVE, outlineOffset: 2 },
+                disabledStyle: { pointerEvents: "none", opacity: 0.5 }
               },
               index
             ))
@@ -108,20 +100,12 @@ function SliderMarks(props) {
   const { marks, min, max } = props;
   if (!marks?.length) return null;
   const range = max - min;
-  return /* @__PURE__ */ jsx("div", { className: "relative w-full h-4", children: marks.map((mark, index) => {
+  return /* @__PURE__ */ jsx(View, { position: "relative", width: "100%", height: 16, children: marks.map((mark, index) => {
     const percent = (mark.value - min) / range * 100;
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "absolute flex flex-col items-center -translate-x-1/2",
-        style: { left: `${percent}%` },
-        children: [
-          /* @__PURE__ */ jsx("div", { className: "h-1.5 w-0.5 bg-border-divider" }),
-          mark.label != null && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-text-secondary whitespace-nowrap", children: mark.label })
-        ]
-      },
-      index
-    );
+    return /* @__PURE__ */ jsxs(View, { position: "absolute", left: `${percent}%`, alignItems: "center", children: [
+      /* @__PURE__ */ jsx(View, { width: 2, height: 6, backgroundColor: TRACK }),
+      mark.label != null && /* @__PURE__ */ jsx(Text, { marginTop: 2, fontSize: 12, color: MUTED, children: mark.label })
+    ] }, index);
   }) });
 }
 

package/dist/switch.cjs

@@ -3,8 +3,6 @@
 
 var gui = require('@hanzo/gui');
 var React = require('react');
-var clsx = require('clsx');
-var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopNamespace(e) {
@@ -28,28 +26,17 @@ function _interopNamespace(e) {
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
 
 // src/switch.tsx
-function cn(...inputs) {
-  return tailwindMerge.twMerge(clsx.clsx(inputs));
-}
 var NOOP = () => {
 };
-var SIZE_CLASSES = {
-  sm: {
-    root: "h-4 w-7",
-    thumb: "h-3 w-3",
-    label: "text-xs"
-  },
-  md: {
-    root: "h-5 w-9",
-    thumb: "h-4 w-4",
-    label: "text-sm"
-  },
-  lg: {
-    root: "h-6 w-11",
-    thumb: "h-5 w-5",
-    label: "text-base"
-  }
+var SIZE = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 }
 };
+var TRACK_ON = "var(--color-text-primary)";
+var TRACK_OFF = "var(--color-switch-bg)";
+var OUTLINE = "var(--color-gray-500)";
+var WHITE = "var(--color-white)";
 var SwitchBase = React__namespace.forwardRef(
   function Switch(props, ref) {
     const {
@@ -66,7 +53,6 @@ var SwitchBase = React__namespace.forwardRef(
       disabled = false,
       size = "md",
       direction,
-      className,
       ...rest
     } = props;
     const [internalChecked, setInternalChecked] = React__namespace.useState(defaultChecked ?? false);
@@ -81,18 +67,19 @@ var SwitchBase = React__namespace.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxRuntime.jsxs(
-      "label",
+      gui.Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none gap-2",
-          isRtl && "flex-row-reverse",
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         ...rest,
@@ -104,38 +91,51 @@ var SwitchBase = React__namespace.forwardRef(
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
-              className: cn(
-                "relative inline-flex shrink-0 items-center rounded-full",
-                "bg-gray-300 dark:bg-gray-600",
-                "data-[state=checked]:bg-gray-800 dark:bg-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-200",
-                sizeClasses.root
-              ),
+              position: "relative",
+              flexShrink: 0,
+              alignItems: "center",
+              width: s.width,
+              height: s.height,
+              borderRadius: 9999,
+              backgroundColor: checkedState ? TRACK_ON : TRACK_OFF,
+              transition: "quick",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
               children: [
-                trackLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                trackLabel && /* @__PURE__ */ jsxRuntime.jsx(
+                  gui.Text,
+                  {
+                    position: "absolute",
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 8,
+                    fontWeight: "700",
+                    color: WHITE,
+                    pointerEvents: "none",
+                    children: checkedState ? trackLabel.on : trackLabel.off
+                  }
+                ),
                 /* @__PURE__ */ jsxRuntime.jsx(
                   gui.Switch.Thumb,
                   {
                     unstyled: true,
                     "data-thumb": true,
                     transition: "quicker",
-                    className: cn(
-                      "block rounded-full bg-white shadow-sm",
-                      sizeClasses.thumb
-                    ),
-                    children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                    width: s.thumb,
+                    height: s.thumb,
+                    borderRadius: 9999,
+                    backgroundColor: WHITE,
+                    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                    children: thumbLabel && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { width: "100%", height: "100%", textAlign: "center", fontSize: 8, children: checkedState ? thumbLabel.on : thumbLabel.off })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsx(gui.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
             "input",
             {
               ref,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState,
               disabled,
               tabIndex: -1,
@@ -143,15 +143,8 @@ var SwitchBase = React__namespace.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsxRuntime.jsx(
-            "span",
-            {
-              ...labelProps,
-              className: cn(sizeClasses.label, labelProps?.className),
-              children
-            }
-          )
+          ) }),
+          children != null && /* @__PURE__ */ jsxRuntime.jsx(gui.Text, { ...labelProps, fontSize: s.label, children })
         ]
       }
     );

package/dist/switch.js

@@ -1,33 +1,20 @@
 "use client";
-import { Switch } from '@hanzo/gui';
+import { Label, Switch, Text, VisuallyHidden } from '@hanzo/gui';
 import * as React from 'react';
-import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 // src/switch.tsx
-function cn(...inputs) {
-  return twMerge(clsx(inputs));
-}
 var NOOP = () => {
 };
-var SIZE_CLASSES = {
-  sm: {
-    root: "h-4 w-7",
-    thumb: "h-3 w-3",
-    label: "text-xs"
-  },
-  md: {
-    root: "h-5 w-9",
-    thumb: "h-4 w-4",
-    label: "text-sm"
-  },
-  lg: {
-    root: "h-6 w-11",
-    thumb: "h-5 w-5",
-    label: "text-base"
-  }
+var SIZE = {
+  sm: { width: 28, height: 16, thumb: 12, label: 12 },
+  md: { width: 36, height: 20, thumb: 16, label: 14 },
+  lg: { width: 44, height: 24, thumb: 20, label: 16 }
 };
+var TRACK_ON = "var(--color-text-primary)";
+var TRACK_OFF = "var(--color-switch-bg)";
+var OUTLINE = "var(--color-gray-500)";
+var WHITE = "var(--color-white)";
 var SwitchBase = React.forwardRef(
   function Switch$1(props, ref) {
     const {
@@ -44,7 +31,6 @@ var SwitchBase = React.forwardRef(
       disabled = false,
       size = "md",
       direction,
-      className,
       ...rest
     } = props;
     const [internalChecked, setInternalChecked] = React.useState(defaultChecked ?? false);
@@ -59,18 +45,19 @@ var SwitchBase = React.forwardRef(
       },
       [isControlled, onCheckedChange]
     );
-    const sizeClasses = SIZE_CLASSES[size];
+    const s = SIZE[size];
     const isRtl = direction === "rtl";
     return /* @__PURE__ */ jsxs(
-      "label",
+      Label,
       {
         ref: rootRef,
-        className: cn(
-          "inline-flex items-center cursor-pointer select-none gap-2",
-          isRtl && "flex-row-reverse",
-          disabled && "opacity-50 cursor-not-allowed",
-          className
-        ),
+        unstyled: true,
+        flexDirection: isRtl ? "row-reverse" : "row",
+        alignItems: "center",
+        gap: 8,
+        cursor: disabled ? "not-allowed" : "pointer",
+        userSelect: "none",
+        opacity: disabled ? 0.5 : 1,
         onChange,
         "data-disabled": disabled || void 0,
         ...rest,
@@ -82,38 +69,51 @@ var SwitchBase = React.forwardRef(
               checked: checkedState,
               onCheckedChange: handleCheckedChange,
               disabled,
-              className: cn(
-                "relative inline-flex shrink-0 items-center rounded-full",
-                "bg-gray-300 dark:bg-gray-600",
-                "data-[state=checked]:bg-gray-800 dark:bg-white",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500",
-                "transition-colors duration-200",
-                sizeClasses.root
-              ),
+              position: "relative",
+              flexShrink: 0,
+              alignItems: "center",
+              width: s.width,
+              height: s.height,
+              borderRadius: 9999,
+              backgroundColor: checkedState ? TRACK_ON : TRACK_OFF,
+              transition: "quick",
+              focusStyle: { outlineWidth: 2, outlineStyle: "solid", outlineColor: OUTLINE, outlineOffset: 2 },
               children: [
-                trackLabel && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 flex items-center justify-center text-[8px] font-bold text-white pointer-events-none", children: checkedState ? trackLabel.on : trackLabel.off }),
+                trackLabel && /* @__PURE__ */ jsx(
+                  Text,
+                  {
+                    position: "absolute",
+                    width: "100%",
+                    textAlign: "center",
+                    fontSize: 8,
+                    fontWeight: "700",
+                    color: WHITE,
+                    pointerEvents: "none",
+                    children: checkedState ? trackLabel.on : trackLabel.off
+                  }
+                ),
                 /* @__PURE__ */ jsx(
                   Switch.Thumb,
                   {
                     unstyled: true,
                     "data-thumb": true,
                     transition: "quicker",
-                    className: cn(
-                      "block rounded-full bg-white shadow-sm",
-                      sizeClasses.thumb
-                    ),
-                    children: thumbLabel && /* @__PURE__ */ jsx("span", { className: "flex items-center justify-center h-full w-full text-[8px]", children: checkedState ? thumbLabel.on : thumbLabel.off })
+                    width: s.thumb,
+                    height: s.thumb,
+                    borderRadius: 9999,
+                    backgroundColor: WHITE,
+                    boxShadow: "0 1px 2px 0 rgba(0,0,0,0.05)",
+                    children: thumbLabel && /* @__PURE__ */ jsx(Text, { width: "100%", height: "100%", textAlign: "center", fontSize: 8, children: checkedState ? thumbLabel.on : thumbLabel.off })
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx(
             "input",
             {
               ref,
               type: "checkbox",
-              className: "sr-only",
               checked: checkedState,
               disabled,
               tabIndex: -1,
@@ -121,15 +121,8 @@ var SwitchBase = React.forwardRef(
               onChange: NOOP,
               ...inputProps
             }
-          ),
-          children != null && /* @__PURE__ */ jsx(
-            "span",
-            {
-              ...labelProps,
-              className: cn(sizeClasses.label, labelProps?.className),
-              children
-            }
-          )
+          ) }),
+          children != null && /* @__PURE__ */ jsx(Text, { ...labelProps, fontSize: s.label, children })
         ]
       }
     );