@medway-ui/native 1.7.2 → 1.8.1

package/lib/module/components/Choice.js

@@ -4,23 +4,33 @@ import { Pressable, View } from "react-native";
 import * as MedwayIcons from "@medway-ui/icons/native";
 import { Text } from "@/components/Text";
 import { ThemedIcon } from "@/components/ThemedIcon";
-import { useThemeColor } from "@/hooks/useThemeColor";
+import { RaisedSurface } from "@/lib/raised-surface";
 import { cn } from "@/lib/utils";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The design's padding minus the 2px ring (`p-0.5`) around the inner card. The vertical hit slop
+// takes the 32, 40 and 48pt chips to the package's 44pt touch target (`MIN_TOUCH_TARGET`).
 const SIZE_MAP = {
   sm: {
-    container: "gap-2 px-3 py-2",
-    text: "text-xs",
-    icon: 16
+    container: "gap-2 px-2.5 py-1.5",
+    text: "text-xs leading-xs",
+    icon: 16,
+    hitSlop: {
+      top: 6,
+      bottom: 6
+    }
   },
   md: {
-    container: "gap-2.5 px-3.5 py-2.5",
-    text: "text-sm",
-    icon: 20
+    container: "gap-2.5 px-3 py-2",
+    text: "text-sm leading-sm",
+    icon: 20,
+    hitSlop: {
+      top: 2,
+      bottom: 2
+    }
   },
   lg: {
-    container: "gap-3 px-4 py-3",
-    text: "text-base",
+    container: "gap-3 px-3.5 py-2.5",
+    text: "text-md leading-md",
     icon: 24
   }
 };
@@ -50,15 +60,6 @@ const THEME_CHECK_COLOR_TOKEN = {
   ped: "ped-foreground",
   prev: "prev-foreground"
 };
-const SHADOW_STYLE = {
-  shadowOffset: {
-    width: 0,
-    height: 2
-  },
-  shadowOpacity: 0.08,
-  shadowRadius: 4,
-  elevation: 2
-};
 function Choice({
   label,
   selected = false,
@@ -70,39 +71,36 @@ function Choice({
   className
 }) {
   const sz = SIZE_MAP[size] ?? SIZE_MAP.md;
-  const shadowColor = useThemeColor("gray-700");
-  const outerBg = disabled ? "bg-gray-background-soft-muted" : selected ? THEME_SELECTED_OUTER_BG[theme] : "bg-gray-background-soft";
-  const textClass = disabled ? "font-medium text-gray-foreground-muted" : selected ? "font-semibold text-primary-foreground" : "font-medium text-gray-foreground";
+  const isRaised = selected && !disabled;
+  const outerBg = disabled ? "bg-gray-background-soft-muted" : selected ? THEME_SELECTED_OUTER_BG[theme] : "bg-gray-background-soft active:bg-gray-background-soft-emphasis";
   return /*#__PURE__*/_jsx(Pressable, {
     onPress: disabled ? undefined : onPress,
     disabled: disabled,
-    accessibilityRole: "button",
+    hitSlop: sz.hitSlop,
+    accessibilityRole: "togglebutton",
+    accessibilityLabel: label,
     accessibilityState: {
-      selected,
+      checked: selected,
       disabled
     },
-    className: cn("rounded-md", outerBg, className),
-    style: {
-      padding: 2
-    },
-    children: /*#__PURE__*/_jsxs(View, {
-      className: cn("flex-row items-center justify-center rounded-md", sz.container, selected ? "bg-surface-card" : "bg-transparent"),
-      style: selected ? {
-        ...SHADOW_STYLE,
-        shadowColor
-      } : undefined,
-      children: [icon ? /*#__PURE__*/_jsx(View, {
+    className: cn("rounded-md p-0.5", outerBg, className),
+    children: ({
+      pressed
+    }) => /*#__PURE__*/_jsxs(View, {
+      className: cn("flex-row items-center justify-center", sz.container),
+      children: [isRaised ? /*#__PURE__*/_jsx(RaisedSurface, {}) : null, icon ? /*#__PURE__*/_jsx(View, {
         className: "shrink-0",
         children: icon
       }) : null, /*#__PURE__*/_jsx(Text, {
-        className: cn("text-center", sz.text, textClass),
+        numberOfLines: 1,
+        className: cn("shrink text-center", sz.text, disabled ? "font-medium text-gray-foreground-muted" : selected ? "font-semibold text-primary-foreground" : pressed ? "font-medium text-gray-foreground-emphasis" : "font-medium text-gray-foreground"),
         children: label
       }), selected ? /*#__PURE__*/_jsx(View, {
         className: "shrink-0",
         children: /*#__PURE__*/_jsx(ThemedIcon, {
-          icon: MedwayIcons.Check,
+          icon: MedwayIcons.CheckMedium,
           size: sz.icon,
-          colorToken: THEME_CHECK_COLOR_TOKEN[theme]
+          colorToken: disabled ? "gray-foreground-muted" : THEME_CHECK_COLOR_TOKEN[theme]
         })
       }) : null]
     })

package/lib/module/components/Choice.js.map

@@ -1 +1 @@
-{"version":3,"names":["Pressable","View","MedwayIcons","Text","ThemedIcon","useThemeColor","cn","jsx","_jsx","jsxs","_jsxs","SIZE_MAP","sm","container","text","icon","md","lg","THEME_SELECTED_OUTER_BG","gray","primary","secondary","green","red","yellow","cm","go","cir","ped","prev","THEME_CHECK_COLOR_TOKEN","SHADOW_STYLE","shadowOffset","width","height","shadowOpacity","shadowRadius","elevation","Choice","label","selected","disabled","size","theme","onPress","className","sz","shadowColor","outerBg","textClass","undefined","accessibilityRole","accessibilityState","style","padding","children","Check","colorToken"],"sourceRoot":"../../../src","sources":["components/Choice.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["Pressable","View","MedwayIcons","Text","ThemedIcon","RaisedSurface","cn","jsx","_jsx","jsxs","_jsxs","SIZE_MAP","sm","container","text","icon","hitSlop","top","bottom","md","lg","THEME_SELECTED_OUTER_BG","gray","primary","secondary","green","red","yellow","cm","go","cir","ped","prev","THEME_CHECK_COLOR_TOKEN","Choice","label","selected","disabled","size","theme","onPress","className","sz","isRaised","outerBg","undefined","accessibilityRole","accessibilityLabel","accessibilityState","checked","children","pressed","numberOfLines","CheckMedium","colorToken"],"sourceRoot":"../../../src","sources":["components/Choice.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/SegmentControl.js

@@ -0,0 +1,189 @@
+"use strict";
+
+import { Children, createContext, useContext, useMemo, useState } from "react";
+import { Pressable, View } from "react-native";
+import * as TabsPrimitive from "@rn-primitives/tabs";
+import { cva } from "class-variance-authority";
+import { Badge } from "@/components/Badge";
+import { Text } from "@/components/Text";
+import { RaisedSurface } from "@/lib/raised-surface";
+import { cn } from "@/lib/utils";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const SegmentControlContext = /*#__PURE__*/createContext({
+  size: "md"
+});
+
+// `min-h` instead of the web's `max-h`: a larger system font grows the segment instead of clipping it.
+const segmentControlTriggerVariants = cva("shrink flex-row items-center justify-center", {
+  variants: {
+    size: {
+      sm: "min-h-7 gap-2 px-3 py-1.5",
+      md: "min-h-9 gap-2.5 px-3.5 py-2",
+      lg: "min-h-11 gap-3 px-4 py-2.5"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+
+// Up to the package's 44pt touch target (`MIN_TOUCH_TARGET`), vertically only: segments sit 2px apart.
+const TRIGGER_HIT_SLOP = {
+  sm: {
+    top: 8,
+    bottom: 8
+  },
+  md: {
+    top: 4,
+    bottom: 4
+  },
+  lg: undefined
+};
+const segmentControlTextVariants = cva("text-center", {
+  variants: {
+    size: {
+      sm: "text-xs leading-xs",
+      md: "text-sm leading-sm",
+      lg: "text-md leading-md"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+function SegmentControl({
+  value: valueProp,
+  defaultValue = "",
+  onValueChange,
+  size = "md",
+  className,
+  children,
+  ...props
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const value = valueProp ?? uncontrolledValue;
+  const context = useMemo(() => ({
+    size
+  }), [size]);
+  const handleValueChange = next => {
+    if (next === value) return;
+    if (valueProp === undefined) setUncontrolledValue(next);
+    onValueChange?.(next);
+  };
+  return /*#__PURE__*/_jsx(SegmentControlContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(TabsPrimitive.Root, {
+      asChild: true,
+      value: value,
+      onValueChange: handleValueChange,
+      ...props,
+      children: /*#__PURE__*/_jsx(View, {
+        className: cn("gap-2", className),
+        children: children
+      })
+    })
+  });
+}
+function SegmentControlList({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TabsPrimitive.List, {
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/_jsx(View, {
+      className: cn("flex-row items-center gap-0.5 self-start rounded-md bg-gray-background-soft p-0.5", className),
+      children: children
+    })
+  });
+}
+function shouldShowBadge(badge, disabled) {
+  return badge != null && badge !== 0 && badge !== "" && badge !== "0" && !disabled;
+}
+
+// Strings and numbers, as in `Aulas {count}`, join into one label; anything else renders as is.
+function toLabel(children) {
+  const parts = Children.toArray(children);
+  return parts.length > 0 && parts.every(part => typeof part === "string" || typeof part === "number") ? parts.join("") : null;
+}
+function SegmentControlTrigger({
+  className,
+  children,
+  icon,
+  badge,
+  badgeVariant,
+  value,
+  disabled,
+  accessibilityLabel,
+  ...props
+}) {
+  const {
+    size
+  } = useContext(SegmentControlContext);
+  const {
+    value: activeValue
+  } = TabsPrimitive.useRootContext();
+  const isActive = activeValue === value;
+  const isDisabled = !!disabled;
+  const showBadge = shouldShowBadge(badge, isDisabled);
+  const label = toLabel(children);
+  return /*#__PURE__*/_jsx(TabsPrimitive.Trigger, {
+    asChild: true,
+    value: value,
+    disabled: disabled,
+    ...props,
+    children: /*#__PURE__*/_jsx(Pressable, {
+      accessibilityLabel: accessibilityLabel ?? (label != null ? showBadge ? `${label}, ${badge}` : label : undefined),
+      hitSlop: TRIGGER_HIT_SLOP[size],
+      className: cn(segmentControlTriggerVariants({
+        size
+      }), className),
+      children: ({
+        pressed
+      }) => /*#__PURE__*/_jsxs(_Fragment, {
+        children: [isActive ? /*#__PURE__*/_jsx(RaisedSurface, {}) : null, icon ? /*#__PURE__*/_jsx(View, {
+          className: "shrink-0",
+          children: icon
+        }) : null, label != null ? /*#__PURE__*/_jsxs(View, {
+          className: "min-w-0 shrink",
+          children: [/*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            className: cn(segmentControlTextVariants({
+              size
+            }), "font-semibold opacity-0"),
+            children: label
+          }), /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            className: cn(segmentControlTextVariants({
+              size
+            }), "absolute inset-0", isActive ? "font-semibold" : "font-medium", isDisabled ? "text-gray-foreground-muted" : isActive ? pressed ? "text-primary-foreground-emphasis" : "text-primary-foreground" : pressed ? "text-gray-foreground-emphasis" : "text-gray-foreground"),
+            children: label
+          })]
+        }) : children, showBadge ? /*#__PURE__*/_jsx(Badge, {
+          size: size,
+          variant: badgeVariant,
+          children: String(badge)
+        }) : null]
+      })
+    })
+  });
+}
+function SegmentControlContent({
+  className,
+  children,
+  ...props
+}) {
+  return /*#__PURE__*/_jsx(TabsPrimitive.Content, {
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/_jsx(View, {
+      className: cn("flex-1", className),
+      children: children
+    })
+  });
+}
+export { SegmentControl, SegmentControlContent, SegmentControlList, SegmentControlTrigger, segmentControlTriggerVariants };
+//# sourceMappingURL=SegmentControl.js.map

package/lib/module/components/SegmentControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Children","createContext","useContext","useMemo","useState","Pressable","View","TabsPrimitive","cva","Badge","Text","RaisedSurface","cn","jsx","_jsx","jsxs","_jsxs","Fragment","_Fragment","SegmentControlContext","size","segmentControlTriggerVariants","variants","sm","md","lg","defaultVariants","TRIGGER_HIT_SLOP","top","bottom","undefined","segmentControlTextVariants","SegmentControl","value","valueProp","defaultValue","onValueChange","className","children","props","uncontrolledValue","setUncontrolledValue","context","handleValueChange","next","Provider","Root","asChild","SegmentControlList","List","shouldShowBadge","badge","disabled","toLabel","parts","toArray","length","every","part","join","SegmentControlTrigger","icon","badgeVariant","accessibilityLabel","activeValue","useRootContext","isActive","isDisabled","showBadge","label","Trigger","hitSlop","pressed","numberOfLines","accessibilityElementsHidden","importantForAccessibility","variant","String","SegmentControlContent","Content"],"sourceRoot":"../../../src","sources":["components/SegmentControl.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Switch.js

@@ -1,24 +1,39 @@
 "use strict";
 
-import { useState, useEffect } from "react";
-import { View } from "react-native";
+import { cloneElement, isValidElement, memo, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { StyleSheet } from "react-native";
+import { cssInterop } from "nativewind";
 import * as SwitchPrimitive from "@rn-primitives/switch";
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from "react-native-reanimated";
+import Animated, { Easing, interpolateColor, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 import { getMinTouchHitSlop } from "@/lib/touch-target";
-import { useThemeColor } from "@/hooks/useThemeColor";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useThemeColor, withAlpha } from "@/hooks/useThemeColor";
+
+// `@rn-primitives/switch` renders a plain Pressable — cssInterop makes `className` work.
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const StyledSwitchRoot = cssInterop(SwitchPrimitive.Root, {
+  className: "style"
+});
+const BORDER_WIDTH = 2;
+/** Gap between thumb and inner edge of the track border (web `translate-x-0.5`). */
+const THUMB_INSET = 2;
+const CENTER = {
+  alignItems: "center",
+  justifyContent: "center"
+};
 const THUMB_SIZES = {
   sm: 8,
   md: 12,
   lg: 16
 };
-const THUMB_TRANSLATE = {
-  sm: 11,
-  md: 15,
-  lg: 19
+const ICON_SIZES = {
+  sm: 8,
+  md: 12,
+  lg: 14
 };
+
+/** Same scale as web `h-4 w-6` / `h-5 w-8` / `h-6 w-10` at 16px rem. */
 const SWITCH_DIMENSIONS = {
   sm: {
     width: 24,
@@ -33,15 +48,43 @@ const SWITCH_DIMENSIONS = {
     height: 24
   }
 };
-const switchVariants = cva("rounded-full border-2 items-center shrink-0", {
+
+/**
+ * Thumb is a sibling of the bordered track (not a child of it), so offsets are
+ * from the root's outer box. That avoids Yoga content-box quirks where absolute
+ * children of a bordered view shift the knob down / past the right edge.
+ *
+ * off  = border + inset
+ * on   = width - border - inset - thumb
+ * on+disabled keeps a 1px tighter right inset, matching web.
+ */
+function getThumbTranslateX(trackWidth, thumbSize, checked, disabled) {
+  const off = BORDER_WIDTH + THUMB_INSET;
+  if (!checked) return off;
+  const on = trackWidth - BORDER_WIDTH - THUMB_INSET - thumbSize;
+  return disabled ? on - 1 : on;
+}
+
+/**
+ * Even curve. A strong ease-out spends the last frames crawling, which reads
+ * as the thumb catching. Track and thumb colors ride the same curve.
+ */
+const THUMB_MOTION = {
+  duration: 250,
+  easing: Easing.inOut(Easing.cubic)
+};
+
+// Px, not `h-6 w-10`: NativeWind resolves rem as 14px on native, which shrinks
+// the track below SWITCH_DIMENSIONS and pushes the thumb down and out the right.
+const switchVariants = cva("shrink-0", {
   variants: {
     variant: {
       regular: ""
     },
     size: {
-      sm: "h-4 w-6",
-      md: "h-5 w-8",
-      lg: "h-6 w-10"
+      sm: "h-[16px] w-[24px]",
+      md: "h-[20px] w-[32px]",
+      lg: "h-[24px] w-[40px]"
     }
   },
   defaultVariants: {
@@ -49,91 +92,160 @@ const switchVariants = cva("rounded-full border-2 items-center shrink-0", {
     size: "md"
   }
 });
-function Switch({
+function renderThumbIcon(icon, color, size) {
+  if (! /*#__PURE__*/isValidElement(icon)) return icon;
+  return /*#__PURE__*/cloneElement(icon, {
+    color: icon.props.color ?? color,
+    width: icon.props.width ?? size,
+    height: icon.props.height ?? size
+  });
+}
+function SwitchThumbIcons({
+  progress,
+  checkedIcon,
+  uncheckedIcon,
+  checkedIconColor,
+  uncheckedIconColor,
+  iconSize
+}) {
+  const checkedIconStyle = useAnimatedStyle(() => ({
+    opacity: progress.value
+  }));
+  const uncheckedIconStyle = useAnimatedStyle(() => ({
+    opacity: 1 - progress.value
+  }));
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, CENTER, uncheckedIconStyle],
+      children: renderThumbIcon(uncheckedIcon, uncheckedIconColor, iconSize)
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      style: [StyleSheet.absoluteFill, CENTER, checkedIconStyle],
+      children: renderThumbIcon(checkedIcon, checkedIconColor, iconSize)
+    })]
+  });
+}
+const Switch = /*#__PURE__*/memo(function Switch({
   className,
   size = "md",
-  variant,
+  variant = "regular",
   checkedIcon,
   uncheckedIcon,
   checked,
   defaultChecked,
   onCheckedChange,
-  disabled,
+  disabled = false,
   style,
   ...props
 }) {
   const resolvedSize = size ?? "md";
   const dimensions = SWITCH_DIMENSIONS[resolvedSize];
+  const thumbSize = THUMB_SIZES[resolvedSize];
+  const iconSize = ICON_SIZES[resolvedSize];
   const [internalChecked, setInternalChecked] = useState(defaultChecked ?? false);
   const isControlled = checked !== undefined;
-  const isChecked = isControlled ? checked ?? false : internalChecked;
-  const trackOn = useThemeColor("primary-background-fill");
-  const trackOff = useThemeColor("surface-card");
-  const trackDisabled = useThemeColor("gray-background-soft-muted");
-  const trackBorder = useThemeColor("gray-stroke-muted");
-  const thumbOn = useThemeColor("primary-foreground-onfill");
-  const thumbOff = useThemeColor("gray-foreground-muted");
-  const thumbDisabled = useThemeColor("gray-background-fill-muted");
-  const translateX = useSharedValue(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2);
-  useEffect(() => {
-    translateX.value = withTiming(isChecked ? THUMB_TRANSLATE[resolvedSize] : 2, {
-      duration: 180,
-      easing: Easing.out(Easing.ease)
-    });
-  }, [isChecked, resolvedSize, translateX]);
-  const thumbStyle = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: translateX.value
-    }]
-  }));
+  const isChecked = isControlled ? checked : internalChecked;
   const hasIcons = Boolean(checkedIcon || uncheckedIcon);
-  const thumbSize = THUMB_SIZES[resolvedSize];
+  const checkedIconColor = useThemeColor(disabled ? "gray-300" : "primary-foreground-onfill");
+  const uncheckedIconColor = useThemeColor(disabled ? "gray-300" : "gray-foreground");
+  const trackOffColor = useThemeColor(disabled ? "gray-background-soft-muted" : "surface-card");
+  const trackOnColor = useThemeColor(disabled ? "gray-background-soft-muted" : "primary-background-fill");
+  const borderOffColor = useThemeColor("gray-stroke-muted");
+  const borderOnColor = disabled ? borderOffColor : withAlpha(borderOffColor, 0);
+  const thumbDisabledColor = useThemeColor("gray-background-fill-muted");
+  const thumbOnToken = useThemeColor("primary-foreground-onfill");
+  const thumbOffToken = useThemeColor("gray-foreground-muted");
+  const thumbOffColor = hasIcons ? "rgba(0, 0, 0, 0)" : disabled ? thumbDisabledColor : thumbOffToken;
+  const thumbOnColor = hasIcons ? "rgba(0, 0, 0, 0)" : disabled ? thumbDisabledColor : thumbOnToken;
+  const offX = getThumbTranslateX(dimensions.width, thumbSize, false, disabled);
+  const onX = getThumbTranslateX(dimensions.width, thumbSize, true, disabled);
+  // Root has no border — center against the outer height.
+  const thumbTop = (dimensions.height - thumbSize) / 2;
+
+  // Single UI-thread driver for position, colors and icons. In controlled mode
+  // the visual only moves when `checked` changes (same as the web Radix switch).
+  const progress = useSharedValue(isChecked ? 1 : 0);
+  const targetRef = useRef(isChecked);
+  const animateTo = next => {
+    if (targetRef.current === next) return;
+    targetRef.current = next;
+    progress.value = withTiming(next ? 1 : 0, THUMB_MOTION);
+  };
+  useLayoutEffect(() => {
+    animateTo(isChecked);
+  }, [isChecked]);
   const handleCheckedChange = nextChecked => {
-    if (!isControlled) setInternalChecked(nextChecked);
+    if (!isControlled) {
+      animateTo(nextChecked);
+      setInternalChecked(nextChecked);
+    }
     onCheckedChange?.(nextChecked);
   };
-  const trackBackgroundColor = disabled ? trackDisabled : isChecked ? trackOn : trackOff;
-  const trackBorderColor = disabled || !isChecked ? trackBorder : "transparent";
-  const thumbBackgroundColor = disabled ? thumbDisabled : hasIcons ? "transparent" : isChecked ? thumbOn : thumbOff;
-  const rootStyle = {
+  const trackMotionStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [trackOffColor, trackOnColor]),
+    borderColor: interpolateColor(progress.value, [0, 1], [borderOffColor, borderOnColor])
+  }));
+  const thumbMotionStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: offX + (onX - offX) * progress.value
+    }]
+  }), [offX, onX]);
+  const thumbColorStyle = useAnimatedStyle(() => ({
+    backgroundColor: interpolateColor(progress.value, [0, 1], [thumbOffColor, thumbOnColor])
+  }));
+  const baseRootStyle = useMemo(() => ({
     width: dimensions.width,
     height: dimensions.height,
     minWidth: dimensions.width,
     minHeight: dimensions.height,
     borderRadius: dimensions.height / 2,
-    borderWidth: 2,
-    alignItems: "flex-start",
-    justifyContent: "center",
-    backgroundColor: trackBackgroundColor,
-    borderColor: trackBorderColor
-  };
-  return /*#__PURE__*/_jsx(SwitchPrimitive.Root, {
+    borderWidth: 0,
+    padding: 0,
+    overflow: "visible"
+  }), [dimensions.height, dimensions.width]);
+  const trackStyle = useMemo(() => ({
+    ...StyleSheet.absoluteFill,
+    borderRadius: dimensions.height / 2,
+    borderWidth: BORDER_WIDTH
+  }), [dimensions.height]);
+  const thumbStyle = useMemo(() => ({
+    position: "absolute",
+    top: thumbTop,
+    left: 0,
+    width: thumbSize,
+    height: thumbSize,
+    borderRadius: thumbSize / 2,
+    alignItems: "center",
+    justifyContent: "center"
+  }), [thumbSize, thumbTop]);
+  const hitSlop = useMemo(() => getMinTouchHitSlop(dimensions.width, dimensions.height), [dimensions.height, dimensions.width]);
+  return /*#__PURE__*/_jsxs(StyledSwitchRoot, {
+    hitSlop: hitSlop,
+    ...props,
     checked: isChecked,
     onCheckedChange: handleCheckedChange,
     disabled: disabled,
-    hitSlop: getMinTouchHitSlop(dimensions.width, dimensions.height),
-    style: state => [rootStyle, typeof style === "function" ? style(state) : style],
     className: cn(switchVariants({
-      size,
+      size: resolvedSize,
       variant
     }), className),
-    ...props,
-    children: /*#__PURE__*/_jsx(SwitchPrimitive.Thumb, {
-      asChild: true,
-      children: /*#__PURE__*/_jsx(Animated.View, {
-        style: [thumbStyle, {
-          width: thumbSize,
-          height: thumbSize,
-          borderRadius: thumbSize / 2,
-          backgroundColor: thumbBackgroundColor
-        }],
-        children: hasIcons ? /*#__PURE__*/_jsxs(View, {
-          className: "flex-1 items-center justify-center",
-          children: [isChecked && checkedIcon, !isChecked && uncheckedIcon]
-        }) : null
-      })
-    })
+    style: state => [baseRootStyle, typeof style === "function" ? style(state) : style],
+    children: [/*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      style: [trackStyle, trackMotionStyle]
+    }), /*#__PURE__*/_jsx(Animated.View, {
+      pointerEvents: "none",
+      collapsable: false,
+      style: [thumbStyle, thumbMotionStyle, thumbColorStyle],
+      children: hasIcons ? /*#__PURE__*/_jsx(SwitchThumbIcons, {
+        progress: progress,
+        checkedIcon: checkedIcon,
+        uncheckedIcon: uncheckedIcon,
+        checkedIconColor: checkedIconColor,
+        uncheckedIconColor: uncheckedIconColor,
+        iconSize: iconSize
+      }) : null
+    })]
   });
-}
+});
 export { Switch, switchVariants };
 //# sourceMappingURL=Switch.js.map