@caratlogic/design-system 0.1.9 → 0.1.10

package/dist/index.esm.js

@@ -5742,21 +5742,33 @@ const TextHyperlink = ({ to, href, children, showIcon = true, className, 'aria-l
     return (jsx("a", { href: href, target: "_blank", rel: "noopener noreferrer", "aria-label": ariaLabel, className: cn(LINK_CLASS, className), children: content }));
 };
 
+/**
+ * Track, thumb and travel, sized so the thumb keeps an even 2px inset on all
+ * four sides. Travel is stated in px rather than `calc(100% - Npx)`: that form
+ * resolves against the thumb's own width, so the gap silently changed whenever a
+ * thumb size did — `md` ended up with a 0.2px vertical inset and no gap at
+ * either end, which read as a thumb bulging out of its track.
+ *
+ *   inner = track - 2px border | thumb = innerHeight - 4 | on = innerWidth - thumb - 2
+ */
 const switchSizes = {
+    // track 28x16 → inner 26x14, thumb 10, on 14
     sm: {
         switch: 'h-4 w-7',
-        thumb: 'size-3',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-1px)]',
+        thumb: 'size-2.5',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[14px]',
     },
+    // track 32x20 → inner 30x18, thumb 14, on 14
     md: {
-        switch: 'h-[1.15rem] w-8',
-        thumb: 'size-4',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-2px)]',
+        switch: 'h-5 w-8',
+        thumb: 'size-3.5',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[14px]',
     },
+    // track 44x24 → inner 42x22, thumb 18, on 22
     lg: {
         switch: 'h-6 w-11',
-        thumb: 'size-5',
-        translate: 'data-[state=checked]:translate-x-[calc(100%-3px)]',
+        thumb: 'size-[1.125rem]',
+        translate: 'data-[state=unchecked]:translate-x-[2px] data-[state=checked]:translate-x-[22px]',
     },
 };
 
@@ -5767,7 +5779,7 @@ function ToggleSwitch({ checked = false, onCheckedChange, disabled = false, id,
         }
     };
     const currentSize = switchSizes[size];
-    const switchButton = (jsx("button", { type: "button", role: "switch", "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', value: checked ? 'on' : 'off', "data-slot": "switch", disabled: disabled, onClick: handleClick, id: id, name: name, className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none', 'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=unchecked]:bg-muted', 'data-[state=checked]:bg-primary', currentSize.switch, className), ...props, children: jsx("span", { "data-state": checked ? 'checked' : 'unchecked', "data-slot": "switch-thumb", className: cn('pointer-events-none block rounded-full ring-0 transition-transform', 'bg-card data-[state=checked]:bg-primary-foreground', 'data-[state=unchecked]:translate-x-0', currentSize.thumb, currentSize.translate) }) }));
+    const switchButton = (jsx("button", { type: "button", role: "switch", "aria-checked": checked, "data-state": checked ? 'checked' : 'unchecked', value: checked ? 'on' : 'off', "data-slot": "switch", disabled: disabled, onClick: handleClick, id: id, name: name, className: cn('peer inline-flex shrink-0 cursor-pointer items-center rounded-full border border-transparent transition-all outline-none', 'focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:ring-[3px]', 'disabled:cursor-not-allowed disabled:opacity-50', 'data-[state=unchecked]:bg-muted', 'data-[state=checked]:bg-primary', currentSize.switch, className), ...props, children: jsx("span", { "data-state": checked ? 'checked' : 'unchecked', "data-slot": "switch-thumb", className: cn('pointer-events-none block rounded-full ring-0 transition-transform', 'bg-card data-[state=checked]:bg-primary-foreground', currentSize.thumb, currentSize.translate) }) }));
     if (!label) {
         return switchButton;
     }
@@ -58436,33 +58448,39 @@ function ZoomSplitViewer({ src, alt = 'Preview', zoom = 2, lensSize = 160, paneO
                 }) })), isTouchDevice && (jsx("p", { className: `text-xs text-muted-foreground text-center mt-2 ${isMobile ? 'text-2xs' : ''}`, children: isMobile ? 'Touch & hold to zoom' : 'Touch and hold to zoom' }))] }));
 }
 
-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 = React.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,
@@ -66086,7 +66104,13 @@ function CreateFormPageHeader({ title, onBack, backLabel = 'Go back', }) {
 function CreateFormPageShell({ title, onBack, children, backLabel, scrollable = false, containerClassName, }) {
     const content = (jsxs("div", { className: cn('mx-auto w-full max-w-4xl px-4 py-4', containerClassName), children: [jsx(CreateFormPageHeader, { title: title, onBack: onBack, backLabel: backLabel }), children] }));
     if (scrollable) {
-        return (jsx("div", { className: "h-full min-h-0 overflow-y-auto bg-card", children: content }));
+        // `shrink-0` is the load-bearing part. As a flex item in the shell's
+        // `flex-col overflow-y-auto` parent this div was shrunk to the parent's
+        // height while its content overflowed, so the background stopped one
+        // screenful down and taller forms showed the page background below it.
+        // `min-h-full` alone cannot fix that — it resolves to the same shrunken
+        // height. The parent already scrolls, so no inner scroller is needed.
+        return (jsx("div", { className: "min-h-full shrink-0 bg-card", children: content }));
     }
     return content;
 }