@masumdev/rn-ui 0.1.6 → 0.2.0

package/lib/module/components/Stepper.js

@@ -1,22 +1,75 @@
 "use strict";
 
 import React from "react";
-import { View } from "react-native";
+import { Pressable, View } from "react-native";
 import { useTheme } from "../theme/index.js";
-import { Button } from "./Button.js";
+import { withAlpha } from "../utils/index.js";
+import { triggerHaptic } from "../utils/haptics.js";
 import { Text } from "./Text.js";
 import { renderIcon } from "./types.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const stepperHeights = {
+  sm: 36,
+  md: 44,
+  lg: 52
+};
 function clampStepper(value, min, max) {
   return Math.min(max, Math.max(min, value));
 }
+function MinusIcon({
+  color,
+  size
+}) {
+  return /*#__PURE__*/_jsx(View, {
+    style: {
+      width: size,
+      height: 2,
+      backgroundColor: color,
+      borderRadius: 1
+    }
+  });
+}
+function PlusIcon({
+  color,
+  size
+}) {
+  return /*#__PURE__*/_jsxs(View, {
+    style: {
+      width: size,
+      height: size,
+      alignItems: "center",
+      justifyContent: "center"
+    },
+    children: [/*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: size,
+        height: 2,
+        backgroundColor: color,
+        borderRadius: 1
+      }
+    }), /*#__PURE__*/_jsx(View, {
+      style: {
+        position: "absolute",
+        width: 2,
+        height: size,
+        backgroundColor: color,
+        borderRadius: 1
+      }
+    })]
+  });
+}
 export function Stepper({
   value,
   defaultValue = 0,
   min = 0,
   max = 999,
   step = 1,
+  variant = "input",
+  size = "md",
   disabled = false,
+  glass = false,
+  haptic = true,
   onValueChange,
   decrementIcon,
   incrementIcon,
@@ -27,15 +80,30 @@ export function Stepper({
     colors,
     components,
     radii,
-    spacing
+    spacing,
+    isDark
   } = useTheme();
   const [internalValue, setInternalValue] = React.useState(defaultValue);
   const currentValue = clampStepper(value ?? internalValue, min, max);
   const setNextValue = nextValue => {
+    if (disabled) return;
     const next = clampStepper(nextValue, min, max);
+    if (haptic) triggerHaptic("selection");
     if (value === undefined) setInternalValue(next);
     onValueChange?.(next);
   };
+  const containerHeight = stepperHeights[size];
+  const padding = 4;
+  const buttonSize = containerHeight - padding * 2;
+  const iconSize = size === "sm" ? 12 : size === "md" ? 14 : 16;
+  const glassBg = isDark ? "rgba(15, 27, 45, 0.70)" : "rgba(255, 255, 255, 0.85)";
+  const containerBg = disabled ? withAlpha(colors.input, 0.55) : glass ? glassBg : variant === "soft" ? withAlpha(colors.primary, 0.08) : colors.input;
+  const borderColor = glass ? isDark ? "rgba(248, 250, 252, 0.20)" : "rgba(15, 23, 42, 0.14)" : colors.border;
+
+  // Concentric inner radius (Outer 16px - 4px padding = 12px inner)
+  const innerRadius = radii.md;
+  const canDecrement = !disabled && currentValue > min;
+  const canIncrement = !disabled && currentValue < max;
   return /*#__PURE__*/_jsxs(View, {
     accessibilityRole: "adjustable",
     accessibilityValue: {
@@ -44,46 +112,73 @@ export function Stepper({
       now: currentValue
     },
     style: [{
-      minHeight: 44,
+      height: containerHeight,
+      minHeight: containerHeight,
       flexDirection: "row",
       alignItems: "center",
       borderWidth: components.borderWidth.strong,
-      borderColor: colors.border,
+      borderColor,
       borderRadius: radii.lg,
-      backgroundColor: colors.surface,
-      overflow: "hidden",
-      opacity: disabled ? 0.5 : 1
+      backgroundColor: containerBg,
+      padding,
+      opacity: disabled ? 0.56 : 1
     }, style],
     ...props,
-    children: [/*#__PURE__*/_jsx(Button, {
-      size: "sm",
-      variant: "ghost",
-      tone: "secondary",
-      shape: "square",
-      disabled: disabled || currentValue <= min,
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Decrement stepper",
+      disabled: !canDecrement,
       onPress: () => setNextValue(currentValue - step),
-      children: decrementIcon ? renderIcon(decrementIcon, colors.text, 16) : "-"
+      style: ({
+        pressed
+      }) => [{
+        width: buttonSize,
+        height: buttonSize,
+        borderRadius: innerRadius,
+        backgroundColor: pressed && canDecrement ? colors.backgroundMuted : canDecrement ? withAlpha(colors.secondary, 0.12) : colors.transparent,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: canDecrement ? pressed ? 0.8 : 1 : 0.4
+      }],
+      children: decrementIcon ? renderIcon(decrementIcon, canDecrement ? colors.text : colors.disabledText, iconSize) : /*#__PURE__*/_jsx(MinusIcon, {
+        color: canDecrement ? colors.text : colors.disabledText,
+        size: iconSize
+      })
     }), /*#__PURE__*/_jsx(View, {
       style: {
-        minWidth: 52,
+        flex: 1,
         alignItems: "center",
-        paddingHorizontal: spacing.sm
+        justifyContent: "center",
+        paddingHorizontal: spacing.xs
       },
       children: /*#__PURE__*/_jsx(Text, {
-        variant: "label",
+        variant: size === "sm" ? "bodySmall" : "label",
+        weight: "600",
         style: {
           fontVariant: ["tabular-nums"]
         },
         children: currentValue
       })
-    }), /*#__PURE__*/_jsx(Button, {
-      size: "sm",
-      variant: "ghost",
-      tone: "secondary",
-      shape: "square",
-      disabled: disabled || currentValue >= max,
+    }), /*#__PURE__*/_jsx(Pressable, {
+      accessibilityRole: "button",
+      accessibilityLabel: "Increment stepper",
+      disabled: !canIncrement,
       onPress: () => setNextValue(currentValue + step),
-      children: incrementIcon ? renderIcon(incrementIcon, colors.text, 16) : "+"
+      style: ({
+        pressed
+      }) => [{
+        width: buttonSize,
+        height: buttonSize,
+        borderRadius: innerRadius,
+        backgroundColor: pressed && canIncrement ? colors.backgroundMuted : canIncrement ? withAlpha(colors.secondary, 0.12) : colors.transparent,
+        alignItems: "center",
+        justifyContent: "center",
+        opacity: canIncrement ? pressed ? 0.8 : 1 : 0.4
+      }],
+      children: incrementIcon ? renderIcon(incrementIcon, canIncrement ? colors.text : colors.disabledText, iconSize) : /*#__PURE__*/_jsx(PlusIcon, {
+        color: canIncrement ? colors.text : colors.disabledText,
+        size: iconSize
+      })
     })]
   });
 }

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

@@ -1 +1 @@
-{"version":3,"names":["React","View","useTheme","Button","Text","renderIcon","jsx","_jsx","jsxs","_jsxs","clampStepper","value","min","max","Math","Stepper","defaultValue","step","disabled","onValueChange","decrementIcon","incrementIcon","style","props","colors","components","radii","spacing","internalValue","setInternalValue","useState","currentValue","setNextValue","nextValue","next","undefined","accessibilityRole","accessibilityValue","now","minHeight","flexDirection","alignItems","borderWidth","strong","borderColor","border","borderRadius","lg","backgroundColor","surface","overflow","opacity","children","size","variant","tone","shape","onPress","text","minWidth","paddingHorizontal","sm","fontVariant"],"sourceRoot":"../../../src","sources":["components/Stepper.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Pressable","View","useTheme","withAlpha","triggerHaptic","Text","renderIcon","jsx","_jsx","jsxs","_jsxs","stepperHeights","sm","md","lg","clampStepper","value","min","max","Math","MinusIcon","color","size","style","width","height","backgroundColor","borderRadius","PlusIcon","alignItems","justifyContent","children","position","Stepper","defaultValue","step","variant","disabled","glass","haptic","onValueChange","decrementIcon","incrementIcon","props","colors","components","radii","spacing","isDark","internalValue","setInternalValue","useState","currentValue","setNextValue","nextValue","next","undefined","containerHeight","padding","buttonSize","iconSize","glassBg","containerBg","input","primary","borderColor","border","innerRadius","canDecrement","canIncrement","accessibilityRole","accessibilityValue","now","minHeight","flexDirection","borderWidth","strong","opacity","accessibilityLabel","onPress","pressed","backgroundMuted","secondary","transparent","text","disabledText","flex","paddingHorizontal","xs","weight","fontVariant"],"sourceRoot":"../../../src","sources":["components/Stepper.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Switch.js

@@ -4,6 +4,7 @@ import React from "react";
 import { Pressable } from "react-native";
 import Animated, { interpolateColor, useAnimatedStyle, useSharedValue, withSpring, withTiming } from "react-native-reanimated";
 import { useTheme } from "../theme/index.js";
+import { triggerHaptic } from "../utils/haptics.js";
 import { renderIcon } from "./types.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export function Switch({
@@ -14,6 +15,8 @@ export function Switch({
   invalid = false,
   size = "md",
   tone = "primary",
+  glass = false,
+  haptic = true,
   style,
   trackStyle,
   thumbStyle,
@@ -32,7 +35,8 @@ export function Switch({
   const {
     colors,
     components,
-    radii
+    radii,
+    isDark
   } = useTheme();
   const isControlled = value !== undefined;
   const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
@@ -47,7 +51,6 @@ export function Switch({
     });
   }, [checked, progress]);
   const activeColor = invalid ? colors.danger : colors[tone];
-  const activeSoftColor = invalid ? colors.dangerSoft : tone === "primary" ? colors.primarySoft : tone === "secondary" ? colors.secondarySoft : tone === "accent" ? colors.accentSoft : tone === "success" ? colors.successSoft : tone === "warning" ? colors.warningSoft : tone === "danger" ? colors.dangerSoft : colors.infoSoft;
   const thumbIcon = checked ? activeIcon : inactiveIcon;
   const selectedThumbContent = (checked ? activeThumbContent : inactiveThumbContent) ?? thumbContent;
   const width = components.switch.width[size];
@@ -57,12 +60,19 @@ export function Switch({
   const borderWidth = components.borderWidth.focus;
   const inset = (height - thumbSize) / 2;
   const travel = width - thumbSize - (inset + borderWidth) * 2;
-  const thumbColor = disabled ? colors.disabledText : colors.surface;
-  const inactiveTrackColor = disabled ? colors.disabled : colors.backgroundMuted;
-  const inactiveBorderColor = invalid ? colors.danger : colors.border;
+  const glassBg = isDark ? "rgba(15, 27, 45, 0.60)" : "rgba(255, 255, 255, 0.70)";
+  const inactiveTrackColor = disabled ? colors.disabled : glass ? glassBg : isDark ? "rgba(30, 41, 59, 0.90)" : colors.backgroundMuted;
+  const activeTrackColor = disabled ? colors.disabled : activeColor;
+  const inactiveBorderColor = invalid ? colors.danger : glass ? isDark ? "rgba(248, 250, 252, 0.20)" : "rgba(15, 23, 42, 0.14)" : isDark ? "rgba(148, 163, 184, 0.30)" : colors.border;
+  const activeBorderColor = invalid ? colors.danger : activeColor;
+
+  // Crisp white/light-slate knob for OFF state in both dark & light mode
+  const inactiveThumbColor = disabled ? colors.disabledText : isDark ? "#e2e8f0" : "#ffffff";
+  const activeThumbColor = disabled ? colors.disabledText : "#ffffff";
   const handlePress = event => {
     onPress?.(event);
     if (disabled) return;
+    if (haptic) triggerHaptic("selection");
     const nextValue = !checked;
     if (!isControlled) {
       setUncontrolledValue(nextValue);
@@ -82,8 +92,8 @@ export function Switch({
     });
   };
   const trackAnimatedStyle = useAnimatedStyle(() => ({
-    backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveTrackColor, activeSoftColor]),
-    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorderColor, activeColor])
+    backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveTrackColor, activeTrackColor]),
+    borderColor: interpolateColor(progress.value, [0, 1], [inactiveBorderColor, activeBorderColor])
   }));
   const thumbAnimatedStyle = useAnimatedStyle(() => ({
     transform: [{
@@ -91,9 +101,9 @@ export function Switch({
     }, {
       scale: 1 + pressed.value * 0.06
     }],
-    backgroundColor: interpolateColor(progress.value, [0, 1], [thumbColor, activeColor])
+    backgroundColor: interpolateColor(progress.value, [0, 1], [inactiveThumbColor, activeThumbColor])
   }));
-  const iconColor = checked ? invalid ? colors.onDanger : tone === "primary" ? colors.onPrimary : tone === "secondary" ? colors.onSecondary : tone === "accent" ? colors.onAccent : tone === "success" ? colors.onSuccess : tone === "warning" ? colors.onWarning : tone === "danger" ? colors.onDanger : colors.onInfo : colors.textSubtle;
+  const iconColor = checked ? invalid ? colors.danger : activeColor : colors.textSubtle;
   const thumbContentParams = {
     checked,
     disabled,
@@ -116,7 +126,7 @@ export function Switch({
     style: ({
       pressed: isPressed
     }) => [{
-      opacity: disabled ? 0.56 : isPressed ? 0.9 : 1,
+      opacity: disabled ? 0.45 : isPressed ? 0.9 : 1,
       alignSelf: "flex-start"
     }, style],
     ...props,
@@ -137,7 +147,7 @@ export function Switch({
           alignItems: "center",
           justifyContent: "center",
           borderWidth: components.borderWidth.default,
-          borderColor: checked ? activeColor : colors.borderMuted
+          borderColor: checked ? activeColor : "transparent"
         }, thumbAnimatedStyle, thumbStyle],
         children: renderThumb ? renderThumb(thumbContentParams) : renderedThumbContent ? renderedThumbContent : thumbIcon ? renderIcon(thumbIcon, iconColor, iconSize) : null
       })

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

@@ -1 +1 @@
-{"version":3,"names":["React","Pressable","Animated","interpolateColor","useAnimatedStyle","useSharedValue","withSpring","withTiming","useTheme","renderIcon","jsx","_jsx","Switch","value","defaultValue","onValueChange","disabled","invalid","size","tone","style","trackStyle","thumbStyle","activeIcon","inactiveIcon","thumbContent","activeThumbContent","inactiveThumbContent","renderThumb","onPress","onPressIn","onPressOut","accessibilityLabel","props","colors","components","radii","isControlled","undefined","uncontrolledValue","setUncontrolledValue","useState","checked","progress","pressed","useEffect","damping","stiffness","mass","activeColor","danger","activeSoftColor","dangerSoft","primarySoft","secondarySoft","accentSoft","successSoft","warningSoft","infoSoft","thumbIcon","selectedThumbContent","width","switch","height","thumbSize","iconSize","borderWidth","focus","inset","travel","thumbColor","disabledText","surface","inactiveTrackColor","backgroundMuted","inactiveBorderColor","border","handlePress","event","nextValue","handlePressIn","duration","handlePressOut","trackAnimatedStyle","backgroundColor","borderColor","thumbAnimatedStyle","transform","translateX","scale","iconColor","onDanger","onPrimary","onSecondary","onAccent","onSuccess","onWarning","onInfo","textSubtle","thumbContentParams","color","renderedThumbContent","accessibilityRole","accessibilityState","isPressed","opacity","alignSelf","children","View","borderRadius","full","padding","justifyContent","alignItems","default","borderMuted"],"sourceRoot":"../../../src","sources":["components/Switch.tsx"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","Pressable","Animated","interpolateColor","useAnimatedStyle","useSharedValue","withSpring","withTiming","useTheme","triggerHaptic","renderIcon","jsx","_jsx","Switch","value","defaultValue","onValueChange","disabled","invalid","size","tone","glass","haptic","style","trackStyle","thumbStyle","activeIcon","inactiveIcon","thumbContent","activeThumbContent","inactiveThumbContent","renderThumb","onPress","onPressIn","onPressOut","accessibilityLabel","props","colors","components","radii","isDark","isControlled","undefined","uncontrolledValue","setUncontrolledValue","useState","checked","progress","pressed","useEffect","damping","stiffness","mass","activeColor","danger","thumbIcon","selectedThumbContent","width","switch","height","thumbSize","iconSize","borderWidth","focus","inset","travel","glassBg","inactiveTrackColor","backgroundMuted","activeTrackColor","inactiveBorderColor","border","activeBorderColor","inactiveThumbColor","disabledText","activeThumbColor","handlePress","event","nextValue","handlePressIn","duration","handlePressOut","trackAnimatedStyle","backgroundColor","borderColor","thumbAnimatedStyle","transform","translateX","scale","iconColor","textSubtle","thumbContentParams","color","renderedThumbContent","accessibilityRole","accessibilityState","isPressed","opacity","alignSelf","children","View","borderRadius","full","padding","justifyContent","alignItems","default"],"sourceRoot":"../../../src","sources":["components/Switch.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/Tabs.js

@@ -2,13 +2,28 @@
 
 import React from "react";
 import { Pressable, View } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
 import { useTheme } from "../theme/index.js";
+import { triggerHaptic } from "../utils/haptics.js";
 import { Text } from "./Text.js";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { renderIcon } from "./types.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const TabsContext = /*#__PURE__*/React.createContext(null);
+export function useTabsContext() {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs compound components must be rendered inside <Tabs />");
+  }
+  return context;
+}
 export function Tabs({
   value,
   defaultValue,
+  variant = "segmented",
+  size = "md",
+  glass = false,
+  haptic = true,
+  animated = true,
   onValueChange,
   style,
   ...props
@@ -17,15 +32,35 @@ export function Tabs({
     spacing
   } = useTheme();
   const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const [tabNodes, setTabNodes] = React.useState({});
   const currentValue = value ?? internalValue;
+  const registerTabNode = React.useCallback((tabValue, layout) => {
+    setTabNodes(prev => {
+      if (prev[tabValue]?.x === layout.x && prev[tabValue]?.width === layout.width) {
+        return prev;
+      }
+      return {
+        ...prev,
+        [tabValue]: layout
+      };
+    });
+  }, []);
   const handleValueChange = React.useCallback(next => {
+    if (haptic) triggerHaptic("selection");
     if (value === undefined) setInternalValue(next);
     onValueChange?.(next);
-  }, [onValueChange, value]);
+  }, [haptic, onValueChange, value]);
   const context = React.useMemo(() => ({
     value: currentValue,
-    onValueChange: handleValueChange
-  }), [currentValue, handleValueChange]);
+    onValueChange: handleValueChange,
+    variant,
+    size,
+    glass,
+    haptic,
+    animated,
+    registerTabNode,
+    tabNodes
+  }), [currentValue, handleValueChange, variant, size, glass, haptic, animated, registerTabNode, tabNodes]);
   return /*#__PURE__*/_jsx(TabsContext.Provider, {
     value: context,
     children: /*#__PURE__*/_jsx(View, {
@@ -37,73 +72,165 @@ export function Tabs({
     })
   });
 }
+const listHeights = {
+  sm: 36,
+  md: 44,
+  lg: 52
+};
 export function TabsList({
   style,
+  children,
   ...props
 }) {
   const {
     colors,
     components,
     radii,
-    spacing
+    spacing,
+    isDark
   } = useTheme();
-  return /*#__PURE__*/_jsx(View, {
+  const {
+    value,
+    variant,
+    size,
+    glass,
+    animated,
+    tabNodes
+  } = useTabsContext();
+  const activeNode = value ? tabNodes[value] : undefined;
+  const indicatorX = useSharedValue(0);
+  const indicatorWidth = useSharedValue(0);
+  const initialized = useSharedValue(false);
+  React.useEffect(() => {
+    if (activeNode && activeNode.width > 0) {
+      if (!animated || !initialized.value) {
+        indicatorX.value = activeNode.x;
+        indicatorWidth.value = activeNode.width;
+        initialized.value = true;
+      } else {
+        indicatorX.value = withTiming(activeNode.x, {
+          duration: 180
+        });
+        indicatorWidth.value = withTiming(activeNode.width, {
+          duration: 180
+        });
+      }
+    }
+  }, [activeNode, animated, indicatorX, indicatorWidth, initialized]);
+  const glassBg = isDark ? "rgba(15, 27, 45, 0.70)" : "rgba(255, 255, 255, 0.85)";
+  const isUnderline = variant === "underline";
+  const isPills = variant === "pills";
+  const height = listHeights[size];
+  const indicatorStyle = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: indicatorX.value
+    }],
+    width: indicatorWidth.value
+  }));
+  const activeBg = variant === "segmented" || variant === "pills" ? colors.primary : variant === "soft" ? colors.primarySoft : colors.transparent;
+  const padding = isUnderline ? 0 : 4;
+  // Concentric radius rule: InnerRadius = OuterRadius - Padding (16 - 4 = 12px)
+  const innerRadius = isPills ? radii.full : isUnderline ? 0 : radii.md;
+  return /*#__PURE__*/_jsxs(View, {
     style: [{
       width: "100%",
-      minHeight: 44,
-      padding: 3,
-      borderRadius: radii.lg,
-      borderWidth: components.borderWidth.strong,
-      borderColor: colors.border,
-      backgroundColor: colors.surface,
+      minHeight: height,
+      height: isUnderline ? undefined : height,
+      padding,
+      borderRadius: isUnderline ? 0 : radii.lg,
+      borderWidth: isUnderline ? 0 : components.borderWidth.strong,
+      borderColor: glass ? isDark ? "rgba(248, 250, 252, 0.20)" : "rgba(15, 23, 42, 0.14)" : colors.border,
+      borderBottomWidth: isUnderline ? components.borderWidth.strong : undefined,
+      borderBottomColor: isUnderline ? colors.border : undefined,
+      backgroundColor: isUnderline ? colors.transparent : isPills ? colors.transparent : glass ? glassBg : colors.input,
       flexDirection: "row",
-      gap: spacing.xs
+      alignItems: "stretch",
+      gap: isPills ? spacing.xs : isUnderline ? spacing.md : 4,
+      position: "relative"
     }, style],
-    ...props
+    ...props,
+    children: [activeNode && /*#__PURE__*/_jsx(Animated.View, {
+      style: [{
+        position: "absolute",
+        top: isUnderline ? undefined : padding,
+        bottom: isUnderline ? 0 : padding,
+        height: isUnderline ? 2.5 : undefined,
+        borderRadius: innerRadius,
+        backgroundColor: isUnderline ? colors.primary : activeBg,
+        zIndex: 0
+      }, indicatorStyle]
+    }), children]
   });
 }
 export function TabsTrigger({
   value,
+  icon,
   children,
   style,
   disabled,
   ...props
 }) {
-  const context = React.useContext(TabsContext);
+  const {
+    value: selectedValue,
+    onValueChange,
+    variant,
+    size,
+    registerTabNode
+  } = useTabsContext();
   const {
     colors,
     radii,
     spacing
   } = useTheme();
-  const active = context?.value === value;
-  return /*#__PURE__*/_jsx(Pressable, {
+  const active = selectedValue === value;
+  const handleLayout = event => {
+    const {
+      x,
+      width,
+      height
+    } = event.nativeEvent.layout;
+    registerTabNode(value, {
+      x,
+      width,
+      height
+    });
+  };
+  const activeTextColor = variant === "segmented" || variant === "pills" ? colors.onPrimary : colors.primary;
+  const isPills = variant === "pills";
+  const isUnderline = variant === "underline";
+  const triggerRadius = isPills ? radii.full : isUnderline ? 0 : radii.md;
+  return /*#__PURE__*/_jsxs(Pressable, {
     accessibilityRole: "tab",
     accessibilityState: {
       selected: active,
       disabled: Boolean(disabled)
     },
     disabled: disabled,
-    onPress: () => context?.onValueChange?.(value),
+    onLayout: handleLayout,
+    onPress: () => onValueChange?.(value),
     style: ({
       pressed
     }) => [{
       flex: 1,
-      minHeight: 36,
-      borderRadius: radii.md,
-      backgroundColor: active ? colors.primary : colors.transparent,
+      height: isUnderline ? listHeights[size] : "100%",
+      borderRadius: triggerRadius,
       alignItems: "center",
       justifyContent: "center",
-      paddingHorizontal: spacing.md,
-      opacity: disabled ? 0.5 : pressed ? 0.78 : 1
+      flexDirection: "row",
+      gap: spacing.xs,
+      paddingHorizontal: spacing.sm,
+      zIndex: 1,
+      opacity: disabled ? 0.5 : pressed ? 0.82 : 1
     }, style],
     ...props,
-    children: typeof children === "string" ? /*#__PURE__*/_jsx(Text, {
-      variant: "label",
+    children: [icon ? renderIcon(icon, active ? activeTextColor : colors.textMuted, size === "sm" ? 14 : 16) : null, typeof children === "string" ? /*#__PURE__*/_jsx(Text, {
+      variant: size === "sm" ? "bodySmall" : "label",
+      weight: active ? "600" : "400",
       style: {
-        color: active ? colors.onPrimary : colors.textMuted
+        color: active ? activeTextColor : colors.textMuted
       },
       children: children
-    }) : children
+    }) : children]
   });
 }
 export function TabsContent({
@@ -112,8 +239,10 @@ export function TabsContent({
   style,
   ...props
 }) {
-  const context = React.useContext(TabsContext);
-  const active = context?.value === value;
+  const {
+    value: selectedValue
+  } = useTabsContext();
+  const active = selectedValue === value;
   if (!active && !forceMount) return null;
   return /*#__PURE__*/_jsx(View, {
     style: [{