@caratlogic/design-system 0.1.9 → 0.1.11

package/dist/ui.esm.js

@@ -3334,33 +3334,39 @@ const Toaster = ({ theme = 'system', ...props }) => (jsx(Toaster$1, { theme: the
         },
     }, ...props }));
 
-const SIZE_MAP = {
-    sm: {
-        track: { width: 28, height: 16 },
-        thumb: 12,
-        on: 14,
-        off: 2,
-    },
-    md: {
-        track: { width: 44, height: 24 },
-        thumb: 20,
-        on: 22,
-        off: 2,
-    },
-    lg: {
-        track: { width: 52, height: 28 },
-        thumb: 24,
-        on: 26,
-        off: 2,
-    },
+/** 1px border on the track, and the gap between thumb and track. */
+const TRACK_BORDER = 1;
+const THUMB_INSET = 2;
+const TRACK_SIZE = {
+    sm: { width: 28, height: 16 },
+    md: { width: 44, height: 24 },
+    lg: { width: 52, height: 28 },
 };
+/**
+ * Thumb size and travel are derived from the track rather than listed per size:
+ * hardcoding them left the thumb 1px from the top and bottom but flush against
+ * the inner right edge when on, so it bulged past the track's rounded end.
+ * Deriving keeps the inset equal on all four sides at every size.
+ */
+function switchGeometry(size) {
+    const track = TRACK_SIZE[size];
+    const innerWidth = track.width - TRACK_BORDER * 2;
+    const innerHeight = track.height - TRACK_BORDER * 2;
+    const thumb = innerHeight - THUMB_INSET * 2;
+    return {
+        track,
+        thumb,
+        off: THUMB_INSET,
+        on: innerWidth - thumb - THUMB_INSET,
+    };
+}
 const Switch = t.forwardRef(({ checked = false, onCheckedChange, disabled = false, id, name, className, size = 'md', 'aria-label': ariaLabel, }, ref) => {
     const handleClick = () => {
         if (!disabled && onCheckedChange) {
             onCheckedChange(!checked);
         }
     };
-    const dims = SIZE_MAP[size];
+    const dims = switchGeometry(size);
     return (jsx("button", { type: "button", role: "switch", "aria-checked": checked, "aria-label": ariaLabel, "data-state": checked ? 'checked' : 'unchecked', disabled: disabled, onClick: handleClick, ref: ref, id: id, name: name, style: {
             width: dims.track.width,
             height: dims.track.height,