@situaction/traquiste-mobile 1.1.0 → 1.2.0

package/build/components/FilterChip/FilterChip.js

@@ -2,8 +2,8 @@
  * FilterChip component — pill-shaped selection chip for filters.
  * Supports icon-only and icon+text layouts with controlled selection state.
  */
-import React, { useState } from 'react';
-import { Pressable, Text, View } from 'react-native';
+import React, { useRef, useState } from 'react';
+import { Animated, Pressable, Text, View } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
 const BORDER_WIDTH = {
     default: 1,
@@ -16,7 +16,19 @@ const ICON_RIGHT_SIZE = 16;
 // --- Component ---
 export function FilterChip({ type = 'icon-text', selected = false, disabled = false, label, iconLeft, iconRight, onPress, style, accessibilityLabel, testID, }) {
     const [internalPressed, setInternalPressed] = useState(false);
+    const pressAnim = useRef(new Animated.Value(0)).current;
     const { colors, fontFamily } = useTheme();
+    const handlePressIn = () => {
+        setInternalPressed(true);
+        Animated.timing(pressAnim, { toValue: 0.5, duration: 80, useNativeDriver: true }).start();
+    };
+    const handlePressOut = () => {
+        setInternalPressed(false);
+        Animated.timing(pressAnim, { toValue: 0, duration: 180, useNativeDriver: true }).start();
+    };
+    // Background driven by selected/disabled only — press overlay handles the press visual
+    const bgState = disabled ? 'disabled' : selected ? 'selected' : 'default';
+    const bgTokens = colors.filterChip[bgState];
     const resolvedState = disabled
         ? 'disabled'
         : internalPressed
@@ -27,19 +39,34 @@ export function FilterChip({ type = 'icon-text', selected = false, disabled = fa
     const tokens = colors.filterChip[resolvedState];
     const borderWidth = BORDER_WIDTH[resolvedState];
     const isIconOnly = type === 'icon';
-    const chipStyle = {
-        height: 32,
-        borderRadius: 100,
-        paddingVertical: 6,
-        paddingHorizontal: isIconOnly ? 6 : 12,
-        flexDirection: 'row',
-        alignItems: 'center',
-        gap: isIconOnly ? 0 : 4,
-        backgroundColor: tokens.background,
-        borderWidth,
-        borderColor: tokens.borderColor,
-        alignSelf: 'flex-start',
-    };
+    // height: 32 is always fixed so vertical size never changes regardless of borderWidth.
+    // For icon-only: width: 32 too (perfect circle).
+    // For text: paddingHorizontal compensated by (borderWidth - 1) so horizontal size stays constant.
+    const chipStyle = isIconOnly
+        ? {
+            width: 32,
+            height: 32,
+            borderRadius: 100,
+            alignItems: 'center',
+            justifyContent: 'center',
+            backgroundColor: bgTokens.background,
+            borderWidth,
+            borderColor: tokens.borderColor,
+            overflow: 'hidden',
+        }
+        : {
+            height: 32,
+            borderRadius: 100,
+            paddingHorizontal: 12 - (borderWidth - 1),
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 4,
+            backgroundColor: bgTokens.background,
+            borderWidth,
+            borderColor: tokens.borderColor,
+            alignSelf: 'flex-start',
+            overflow: 'hidden',
+        };
     const textStyle = {
         color: tokens.text,
         fontSize: 14,
@@ -56,8 +83,10 @@ export function FilterChip({ type = 'icon-text', selected = false, disabled = fa
             ...icon.props,
         });
     };
-    return (<Pressable pointerEvents={disabled ? 'none' : 'auto'} onPressIn={() => setInternalPressed(true)} onPressOut={() => setInternalPressed(false)} onPress={disabled ? undefined : onPress} style={[{ paddingVertical: 6 }, style]} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={{ selected, disabled }} testID={testID}>
+    return (<Pressable pointerEvents={disabled ? 'none' : 'auto'} onPressIn={handlePressIn} onPressOut={handlePressOut} onPress={disabled ? undefined : onPress} style={[{ paddingVertical: 6 }, style]} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label} accessibilityState={{ selected, disabled }} testID={testID}>
       <View style={chipStyle}>
+        {/* Press background overlay — fades in/out via opacity animation */}
+        <Animated.View style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, { backgroundColor: colors.filterChip.pressed.background, opacity: pressAnim }]}/>
         {cloneIcon(iconLeft, ICON_LEFT_SIZE)}
         {!isIconOnly && label != null && <Text style={textStyle}>{label}</Text>}
         {cloneIcon(iconRight, ICON_RIGHT_SIZE)}

package/build/components/FilterChip/FilterChip.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterChip.js","sourceRoot":"","sources":["../../../src/components/FilterChip/FilterChip.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * FilterChip component — pill-shaped selection chip for filters.\n * Supports icon-only and icon+text layouts with controlled selection state.\n */\nimport React, { useState } from 'react';\nimport { Pressable, Text, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\n\nexport type FilterChipState = 'default' | 'pressed' | 'selected' | 'disabled';\nexport type FilterChipType = 'icon' | 'icon-text';\n\nexport interface FilterChipProps {\n  /** Content layout */\n  type?: FilterChipType;\n  /** Controlled selection state */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Label text — required when type is icon-text */\n  label?: string;\n  /** Left icon (Phosphor Duotone) */\n  iconLeft?: React.ReactElement;\n  /** Right icon — typically a caret or close icon */\n  iconRight?: React.ReactElement;\n  /** Press handler */\n  onPress?: () => void;\n  /** Additional container styles */\n  style?: StyleProp<ViewStyle>;\n  /** Accessibility label for screen readers — defaults to label when omitted */\n  accessibilityLabel?: string;\n  /** Test identifier */\n  testID?: string;\n}\n\nconst BORDER_WIDTH: Record<FilterChipState, number> = {\n  default: 1,\n  pressed: 1,\n  selected: 2,\n  disabled: 1,\n};\n\nconst ICON_LEFT_SIZE  = 20;\nconst ICON_RIGHT_SIZE = 16;\n\n// --- Component ---\n\nexport function FilterChip({\n  type = 'icon-text',\n  selected = false,\n  disabled = false,\n  label,\n  iconLeft,\n  iconRight,\n  onPress,\n  style,\n  accessibilityLabel,\n  testID,\n}: FilterChipProps) {\n  const [internalPressed, setInternalPressed] = useState(false);\n  const { colors, fontFamily } = useTheme();\n\n  const resolvedState: FilterChipState = disabled\n    ? 'disabled'\n    : internalPressed\n      ? 'pressed'\n      : selected\n        ? 'selected'\n        : 'default';\n\n  const tokens = colors.filterChip[resolvedState];\n  const borderWidth = BORDER_WIDTH[resolvedState];\n  const isIconOnly = type === 'icon';\n\n  const chipStyle: ViewStyle = {\n    height: 32,\n    borderRadius: 100,\n    paddingVertical: 6,\n    paddingHorizontal: isIconOnly ? 6 : 12,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: isIconOnly ? 0 : 4,\n    backgroundColor: tokens.background,\n    borderWidth,\n    borderColor: tokens.borderColor,\n    alignSelf: 'flex-start',\n  };\n\n  const textStyle = {\n    color: tokens.text,\n    fontSize: 14,\n    lineHeight: 20,\n    fontFamily,\n    fontWeight: '500' as const,\n  };\n\n  const cloneIcon = (icon: React.ReactElement | undefined, size: number) => {\n    if (!icon) return null;\n    return React.cloneElement(icon, {\n      size,\n      color: tokens.icon,\n      ...(icon.props as Record<string, unknown>),\n    } as object);\n  };\n\n  return (\n    <Pressable\n      pointerEvents={disabled ? 'none' : 'auto'}\n      onPressIn={() => setInternalPressed(true)}\n      onPressOut={() => setInternalPressed(false)}\n      onPress={disabled ? undefined : onPress}\n      style={[{ paddingVertical: 6 }, style]}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityState={{ selected, disabled }}\n      testID={testID}\n    >\n      <View style={chipStyle}>\n        {cloneIcon(iconLeft, ICON_LEFT_SIZE)}\n        {!isIconOnly && label != null && <Text style={textStyle}>{label}</Text>}\n        {cloneIcon(iconRight, ICON_RIGHT_SIZE)}\n      </View>\n    </Pressable>\n  );\n}"]}
+{"version":3,"file":"FilterChip.js","sourceRoot":"","sources":["../../../src/components/FilterChip/FilterChip.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * FilterChip component — pill-shaped selection chip for filters.\n * Supports icon-only and icon+text layouts with controlled selection state.\n */\nimport React, { useRef, useState } from 'react';\nimport { Animated, Pressable, Text, View } from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\n\nexport type FilterChipState = 'default' | 'pressed' | 'selected' | 'disabled';\nexport type FilterChipType = 'icon' | 'icon-text';\n\nexport interface FilterChipProps {\n  /** Content layout */\n  type?: FilterChipType;\n  /** Controlled selection state */\n  selected?: boolean;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Label text — required when type is icon-text */\n  label?: string;\n  /** Left icon (Phosphor Duotone) */\n  iconLeft?: React.ReactElement;\n  /** Right icon — typically a caret or close icon */\n  iconRight?: React.ReactElement;\n  /** Press handler */\n  onPress?: () => void;\n  /** Additional container styles */\n  style?: StyleProp<ViewStyle>;\n  /** Accessibility label for screen readers — defaults to label when omitted */\n  accessibilityLabel?: string;\n  /** Test identifier */\n  testID?: string;\n}\n\nconst BORDER_WIDTH: Record<FilterChipState, number> = {\n  default: 1,\n  pressed: 1,\n  selected: 2,\n  disabled: 1,\n};\n\nconst ICON_LEFT_SIZE  = 20;\nconst ICON_RIGHT_SIZE = 16;\n\n// --- Component ---\n\nexport function FilterChip({\n  type = 'icon-text',\n  selected = false,\n  disabled = false,\n  label,\n  iconLeft,\n  iconRight,\n  onPress,\n  style,\n  accessibilityLabel,\n  testID,\n}: FilterChipProps) {\n  const [internalPressed, setInternalPressed] = useState(false);\n  const pressAnim = useRef(new Animated.Value(0)).current;\n  const { colors, fontFamily } = useTheme();\n\n  const handlePressIn = () => {\n    setInternalPressed(true);\n    Animated.timing(pressAnim, { toValue: 0.5, duration: 80, useNativeDriver: true }).start();\n  };\n\n  const handlePressOut = () => {\n    setInternalPressed(false);\n    Animated.timing(pressAnim, { toValue: 0, duration: 180, useNativeDriver: true }).start();\n  };\n\n  // Background driven by selected/disabled only — press overlay handles the press visual\n  const bgState: FilterChipState = disabled ? 'disabled' : selected ? 'selected' : 'default';\n  const bgTokens = colors.filterChip[bgState];\n\n  const resolvedState: FilterChipState = disabled\n    ? 'disabled'\n    : internalPressed\n      ? 'pressed'\n      : selected\n        ? 'selected'\n        : 'default';\n\n  const tokens = colors.filterChip[resolvedState];\n  const borderWidth = BORDER_WIDTH[resolvedState];\n  const isIconOnly = type === 'icon';\n\n  // height: 32 is always fixed so vertical size never changes regardless of borderWidth.\n  // For icon-only: width: 32 too (perfect circle).\n  // For text: paddingHorizontal compensated by (borderWidth - 1) so horizontal size stays constant.\n  const chipStyle: ViewStyle = isIconOnly\n    ? {\n        width: 32,\n        height: 32,\n        borderRadius: 100,\n        alignItems: 'center',\n        justifyContent: 'center',\n        backgroundColor: bgTokens.background,\n        borderWidth,\n        borderColor: tokens.borderColor,\n        overflow: 'hidden',\n      }\n    : {\n        height: 32,\n        borderRadius: 100,\n        paddingHorizontal: 12 - (borderWidth - 1),\n        flexDirection: 'row',\n        alignItems: 'center',\n        gap: 4,\n        backgroundColor: bgTokens.background,\n        borderWidth,\n        borderColor: tokens.borderColor,\n        alignSelf: 'flex-start',\n        overflow: 'hidden',\n      };\n\n  const textStyle = {\n    color: tokens.text,\n    fontSize: 14,\n    lineHeight: 20,\n    fontFamily,\n    fontWeight: '500' as const,\n  };\n\n  const cloneIcon = (icon: React.ReactElement | undefined, size: number) => {\n    if (!icon) return null;\n    return React.cloneElement(icon, {\n      size,\n      color: tokens.icon,\n      ...(icon.props as Record<string, unknown>),\n    } as object);\n  };\n\n  return (\n    <Pressable\n      pointerEvents={disabled ? 'none' : 'auto'}\n      onPressIn={handlePressIn}\n      onPressOut={handlePressOut}\n      onPress={disabled ? undefined : onPress}\n      style={[{ paddingVertical: 6 }, style]}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityState={{ selected, disabled }}\n      testID={testID}\n    >\n      <View style={chipStyle}>\n        {/* Press background overlay — fades in/out via opacity animation */}\n        <Animated.View style={[{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }, { backgroundColor: colors.filterChip.pressed.background, opacity: pressAnim }]} />\n        {cloneIcon(iconLeft, ICON_LEFT_SIZE)}\n        {!isIconOnly && label != null && <Text style={textStyle}>{label}</Text>}\n        {cloneIcon(iconRight, ICON_RIGHT_SIZE)}\n      </View>\n    </Pressable>\n  );\n}"]}

package/build/components/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC;AAClC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,UAAU;IACzB,sBAAsB;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,sBAAsB,CAAC,CAAC;IACzI,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,wDAAwD;IACxD,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAWD,wBAAgB,KAAK,CAAC,EACpB,OAAgB,EAChB,IAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,OAAO,EACP,OAAO,EACP,MAAM,EACN,eAAe,EACf,gBAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,UAAU,EACV,KAAK,EACL,MAAM,EACN,0BAA0B,EAC1B,2BAA2B,GAC5B,EAAE,UAAU,qBA6HZ"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,KAAmB,MAAM,OAAO,CAAC;AAOxC,OAAO,KAAK,EAAE,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAIzE,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,WAAW,CAAC;AACzD,MAAM,MAAM,SAAS,GAAG,GAAG,GAAG,GAAG,CAAC;AAClC,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,UAAU,CAAC;AAEtE,MAAM,WAAW,UAAU;IACzB,sBAAsB;IACtB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,sCAAsC;IACtC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B,4BAA4B;IAC5B,SAAS,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC/B,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,uCAAuC;IACvC,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,wDAAwD;IACxD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sEAAsE;IACtE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,6CAA6C;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,8CAA8C;IAC9C,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kDAAkD;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,qBAAqB;IACrB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oBAAoB;IACpB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,qDAAqD;IACrD,UAAU,CAAC,EAAE,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,cAAc,GAAG,SAAS,GAAG,QAAQ,GAAG,UAAU,GAAG,aAAa,GAAG,sBAAsB,CAAC,CAAC;IACzI,gCAAgC;IAChC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uDAAuD;IACvD,0BAA0B,CAAC,EAAE,MAAM,CAAC;IACpC,wDAAwD;IACxD,2BAA2B,CAAC,EAAE,MAAM,CAAC;CACtC;AAWD,wBAAgB,KAAK,CAAC,EACpB,OAAgB,EAChB,IAAU,EACV,KAAK,EACL,WAAW,EACX,QAAQ,EACR,SAAS,EACT,UAAU,EACV,QAAQ,EACR,KAAK,EACL,YAAY,EACZ,OAAO,EACP,OAAO,EACP,MAAM,EACN,eAAe,EACf,gBAAgB,EAChB,QAAgB,EAChB,KAAa,EACb,UAAU,EACV,KAAK,EACL,MAAM,EACN,0BAA0B,EAC1B,2BAA2B,GAC5B,EAAE,UAAU,qBA4HZ"}

package/build/components/Input/Input.js

@@ -8,8 +8,8 @@ import { useTheme } from '../../context/ThemeContext';
 import { styles } from './Input.styles';
 // --- Size tokens (static) ---
 const SIZE_TOKENS = {
-    M: { height: 40, paddingHorizontal: 12, iconSize: 16, fontSize: 14, lineHeight: 20, borderRadius: 8, gap: 8 },
-    L: { height: 48, paddingHorizontal: 16, iconSize: 20, fontSize: 16, lineHeight: 24, borderRadius: 8, gap: 8 },
+    M: { height: 40, paddingHorizontal: 10, iconSize: 16, fontSize: 14, lineHeight: 20, borderRadius: 8, gap: 8 },
+    L: { height: 48, paddingHorizontal: 12, iconSize: 20, fontSize: 16, lineHeight: 24, borderRadius: 8, gap: 8 },
 };
 // --- Component ---
 export function Input({ variant = 'text', size = 'M', label, placeholder, iconLeft, iconRight, helperText, children, value, onChangeText, onPress, onFocus, onBlur, onPressIconLeft, onPressIconRight, disabled = false, error = false, inputProps, style, testID, accessibilityLabelIconLeft, accessibilityLabelIconRight, }) {
@@ -31,11 +31,10 @@ export function Input({ variant = 'text', size = 'M', label, placeholder, iconLe
         borderRadius: sizes.borderRadius,
         backgroundColor: tokens.background,
         borderWidth: 1,
-        borderColor: tokens.border,
+        borderColor: isFocused ? 'transparent' : tokens.border,
         flexDirection: 'row',
         alignItems: 'center',
         gap: sizes.gap,
-        overflow: 'hidden',
         ...(disabled && { cursor: 'default' }),
     };
     // Outer focus ring — sits outside the container without affecting its border
@@ -82,7 +81,7 @@ export function Input({ variant = 'text', size = 'M', label, placeholder, iconLe
             {cloneIcon(iconLeft, onPressIconLeft, accessibilityLabelIconLeft)}
             <View style={styles.tagsRow}>
               {variant === 'tags' && children}
-              <TextInput style={[styles.textInput, { color: tokens.text, fontSize: sizes.fontSize, lineHeight: sizes.lineHeight, fontFamily }]} value={value} onChangeText={onChangeText} onFocus={handleFocus} onBlur={handleBlur} editable={!disabled} placeholder={placeholder} placeholderTextColor={tokens.placeholder} {...inputProps}/>
+              <TextInput style={[styles.textInput, { color: tokens.text, fontSize: sizes.fontSize, fontFamily }]} value={value} onChangeText={onChangeText} onFocus={handleFocus} onBlur={handleBlur} editable={!disabled} placeholder={placeholder} placeholderTextColor={tokens.placeholder} {...inputProps}/>
             </View>
             {cloneIcon(iconRight, onPressIconRight, accessibilityLabelIconRight)}
           </View>) : (
@@ -91,7 +90,7 @@ export function Input({ variant = 'text', size = 'M', label, placeholder, iconLe
             {cloneIcon(iconLeft, onPressIconLeft, accessibilityLabelIconLeft)}
             {variant === 'tags' ? (<View style={styles.tagsRow}>
                 {children}
-              </View>) : (<Text style={[styles.placeholderText, { color: tokens.placeholder, fontSize: sizes.fontSize, lineHeight: sizes.lineHeight, fontFamily }]} numberOfLines={1}>
+              </View>) : (<Text style={[styles.placeholderText, { color: tokens.placeholder, fontSize: sizes.fontSize, fontFamily }]} numberOfLines={1}>
                 {placeholder}
               </Text>)}
             {cloneIcon(iconRight, onPressIconRight, accessibilityLabelIconRight)}

package/build/components/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Input component — text field with label, icons, helper text and tag display.\n * Supports text, tags, and tag-empty variants in sizes M (40px) and L (48px).\n */\nimport React, { useState } from 'react';\nimport {\n  Pressable,\n  Text,\n  TextInput,\n  View,\n} from 'react-native';\nimport type { StyleProp, TextInputProps, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './Input.styles';\n\nexport type InputVariant = 'text' | 'tags' | 'tag-empty';\nexport type InputSize = 'M' | 'L';\nexport type InputState = 'default' | 'focused' | 'error' | 'disabled';\n\nexport interface InputProps {\n  /** Content variant */\n  variant?: InputVariant;\n  /** Input height — M: 40px, L: 48px */\n  size?: InputSize;\n  /** Label displayed above the field */\n  label?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Left icon (Phosphor) */\n  iconLeft?: React.ReactElement;\n  /** Right icon (Phosphor) */\n  iconRight?: React.ReactElement;\n  /** Press handler for the left icon */\n  onPressIconLeft?: () => void;\n  /** Press handler for the right icon */\n  onPressIconRight?: () => void;\n  /** Helper or error message displayed below the field */\n  helperText?: string;\n  /** Content rendered inside the tags row — used with 'tags' variant */\n  children?: React.ReactNode;\n  /** Current text value — text variant only */\n  value?: string;\n  /** Text change handler — text variant only */\n  onChangeText?: (text: string) => void;\n  /** Press handler — tags and tag-empty variants */\n  onPress?: () => void;\n  /** Focus callback */\n  onFocus?: () => void;\n  /** Blur callback */\n  onBlur?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error state */\n  error?: boolean;\n  /** Additional TextInput props — text variant only */\n  inputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'onFocus' | 'onBlur' | 'editable' | 'placeholder' | 'placeholderTextColor'>;\n  /** Additional wrapper styles */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n  /** Accessibility label for the left icon press area */\n  accessibilityLabelIconLeft?: string;\n  /** Accessibility label for the right icon press area */\n  accessibilityLabelIconRight?: string;\n}\n\n// --- Size tokens (static) ---\n\nconst SIZE_TOKENS = {\n  M: { height: 40, paddingHorizontal: 12, iconSize: 16, fontSize: 14, lineHeight: 20, borderRadius: 8, gap: 8 },\n  L: { height: 48, paddingHorizontal: 16, iconSize: 20, fontSize: 16, lineHeight: 24, borderRadius: 8, gap: 8 },\n} as const;\n\n// --- Component ---\n\nexport function Input({\n  variant = 'text',\n  size = 'M',\n  label,\n  placeholder,\n  iconLeft,\n  iconRight,\n  helperText,\n  children,\n  value,\n  onChangeText,\n  onPress,\n  onFocus,\n  onBlur,\n  onPressIconLeft,\n  onPressIconRight,\n  disabled = false,\n  error = false,\n  inputProps,\n  style,\n  testID,\n  accessibilityLabelIconLeft,\n  accessibilityLabelIconRight,\n}: InputProps) {\n  const { colors, fontFamily } = useTheme();\n  const [isFocused, setIsFocused] = useState(false);\n\n  // focused takes priority over error — error is restored on blur if still invalid\n  const resolvedState: InputState = disabled\n    ? 'disabled'\n    : isFocused\n      ? 'focused'\n      : error\n        ? 'error'\n        : 'default';\n\n  const sizes = SIZE_TOKENS[size];\n  const tokens = colors.input[resolvedState];\n\n  const containerStyle: ViewStyle = {\n    height: sizes.height,\n    paddingHorizontal: sizes.paddingHorizontal,\n    borderRadius: sizes.borderRadius,\n    backgroundColor: tokens.background,\n    borderWidth: 1,\n    borderColor: tokens.border,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: sizes.gap,\n    overflow: 'hidden',\n    ...(disabled && { cursor: 'default' } as object),\n  };\n\n  // Outer focus ring — sits outside the container without affecting its border\n  const focusRingStyle: ViewStyle | undefined = isFocused\n    ? {\n        borderWidth: 2,\n        borderColor: colors.text.primary,\n        borderRadius: sizes.borderRadius + 2,\n        margin: -2,\n      }\n    : undefined;\n\n  const cloneIcon = (icon: React.ReactElement | undefined, onPress?: () => void, a11yLabel?: string) => {\n    if (!icon) return null;\n    const cloned = React.cloneElement(icon, {\n      size: sizes.iconSize,\n      color: tokens.icon,\n      ...(icon.props as Record<string, unknown>),\n    } as object);\n    if (onPress) {\n      return (\n        <Pressable onPress={onPress} hitSlop={8} accessibilityRole=\"button\" accessibilityLabel={a11yLabel}>\n          {cloned}\n        </Pressable>\n      );\n    }\n    return cloned;\n  };\n\n  const handleFocus = () => {\n    if (disabled) return;\n    setIsFocused(true);\n    onFocus?.();\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur?.();\n  };\n\n  return (\n    <View style={[styles.wrapper, style]} testID={testID}>\n      {label != null && (\n        <Text style={[styles.label, { color: tokens.label, fontFamily }]}>{label}</Text>\n      )}\n\n      <View style={focusRingStyle}>\n        {variant === 'text' || (variant === 'tags' && onChangeText != null) ? (\n          // text variant OR tags with inline search: View + optional children + TextInput\n          <View style={containerStyle}>\n            {cloneIcon(iconLeft, onPressIconLeft, accessibilityLabelIconLeft)}\n            <View style={styles.tagsRow}>\n              {variant === 'tags' && children}\n              <TextInput\n                style={[styles.textInput, { color: tokens.text, fontSize: sizes.fontSize, lineHeight: sizes.lineHeight, fontFamily }]}\n                value={value}\n                onChangeText={onChangeText}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                editable={!disabled}\n                placeholder={placeholder}\n                placeholderTextColor={tokens.placeholder}\n                {...inputProps}\n              />\n            </View>\n            {cloneIcon(iconRight, onPressIconRight, accessibilityLabelIconRight)}\n          </View>\n        ) : (\n          // tags (pressable) or tag-empty\n          <Pressable\n            style={containerStyle}\n            onPress={disabled ? undefined : onPress}\n            pointerEvents={disabled ? 'none' : 'auto'}\n          >\n            {cloneIcon(iconLeft, onPressIconLeft, accessibilityLabelIconLeft)}\n            {variant === 'tags' ? (\n              <View style={styles.tagsRow}>\n                {children}\n              </View>\n            ) : (\n              <Text\n                style={[styles.placeholderText, { color: tokens.placeholder, fontSize: sizes.fontSize, lineHeight: sizes.lineHeight, fontFamily }]}\n                numberOfLines={1}\n              >\n                {placeholder}\n              </Text>\n            )}\n            {cloneIcon(iconRight, onPressIconRight, accessibilityLabelIconRight)}\n          </Pressable>\n        )}\n      </View>\n\n      {helperText != null && (\n        <Text style={[styles.helperText, { color: tokens.helper, fontFamily }]}>{helperText}</Text>\n      )}\n    </View>\n  );\n}\n\n"]}
+{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input/Input.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * Input component — text field with label, icons, helper text and tag display.\n * Supports text, tags, and tag-empty variants in sizes M (40px) and L (48px).\n */\nimport React, { useState } from 'react';\nimport {\n  Pressable,\n  Text,\n  TextInput,\n  View,\n} from 'react-native';\nimport type { StyleProp, TextInputProps, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './Input.styles';\n\nexport type InputVariant = 'text' | 'tags' | 'tag-empty';\nexport type InputSize = 'M' | 'L';\nexport type InputState = 'default' | 'focused' | 'error' | 'disabled';\n\nexport interface InputProps {\n  /** Content variant */\n  variant?: InputVariant;\n  /** Input height — M: 40px, L: 48px */\n  size?: InputSize;\n  /** Label displayed above the field */\n  label?: string;\n  /** Placeholder text */\n  placeholder?: string;\n  /** Left icon (Phosphor) */\n  iconLeft?: React.ReactElement;\n  /** Right icon (Phosphor) */\n  iconRight?: React.ReactElement;\n  /** Press handler for the left icon */\n  onPressIconLeft?: () => void;\n  /** Press handler for the right icon */\n  onPressIconRight?: () => void;\n  /** Helper or error message displayed below the field */\n  helperText?: string;\n  /** Content rendered inside the tags row — used with 'tags' variant */\n  children?: React.ReactNode;\n  /** Current text value — text variant only */\n  value?: string;\n  /** Text change handler — text variant only */\n  onChangeText?: (text: string) => void;\n  /** Press handler — tags and tag-empty variants */\n  onPress?: () => void;\n  /** Focus callback */\n  onFocus?: () => void;\n  /** Blur callback */\n  onBlur?: () => void;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error state */\n  error?: boolean;\n  /** Additional TextInput props — text variant only */\n  inputProps?: Omit<TextInputProps, 'value' | 'onChangeText' | 'onFocus' | 'onBlur' | 'editable' | 'placeholder' | 'placeholderTextColor'>;\n  /** Additional wrapper styles */\n  style?: StyleProp<ViewStyle>;\n  /** Test ID for automated testing */\n  testID?: string;\n  /** Accessibility label for the left icon press area */\n  accessibilityLabelIconLeft?: string;\n  /** Accessibility label for the right icon press area */\n  accessibilityLabelIconRight?: string;\n}\n\n// --- Size tokens (static) ---\n\nconst SIZE_TOKENS = {\n  M: { height: 40, paddingHorizontal: 10, iconSize: 16, fontSize: 14, lineHeight: 20, borderRadius: 8, gap: 8 },\n  L: { height: 48, paddingHorizontal: 12, iconSize: 20, fontSize: 16, lineHeight: 24, borderRadius: 8, gap: 8 },\n} as const;\n\n// --- Component ---\n\nexport function Input({\n  variant = 'text',\n  size = 'M',\n  label,\n  placeholder,\n  iconLeft,\n  iconRight,\n  helperText,\n  children,\n  value,\n  onChangeText,\n  onPress,\n  onFocus,\n  onBlur,\n  onPressIconLeft,\n  onPressIconRight,\n  disabled = false,\n  error = false,\n  inputProps,\n  style,\n  testID,\n  accessibilityLabelIconLeft,\n  accessibilityLabelIconRight,\n}: InputProps) {\n  const { colors, fontFamily } = useTheme();\n  const [isFocused, setIsFocused] = useState(false);\n\n  // focused takes priority over error — error is restored on blur if still invalid\n  const resolvedState: InputState = disabled\n    ? 'disabled'\n    : isFocused\n      ? 'focused'\n      : error\n        ? 'error'\n        : 'default';\n\n  const sizes = SIZE_TOKENS[size];\n  const tokens = colors.input[resolvedState];\n\n  const containerStyle: ViewStyle = {\n    height: sizes.height,\n    paddingHorizontal: sizes.paddingHorizontal,\n    borderRadius: sizes.borderRadius,\n    backgroundColor: tokens.background,\n    borderWidth: 1,\n    borderColor: isFocused ? 'transparent' : tokens.border,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: sizes.gap,\n    ...(disabled && { cursor: 'default' } as object),\n  };\n\n  // Outer focus ring — sits outside the container without affecting its border\n  const focusRingStyle: ViewStyle | undefined = isFocused\n    ? {\n        borderWidth: 2,\n        borderColor: colors.text.primary,\n        borderRadius: sizes.borderRadius + 2,\n        margin: -2,\n      }\n    : undefined;\n\n  const cloneIcon = (icon: React.ReactElement | undefined, onPress?: () => void, a11yLabel?: string) => {\n    if (!icon) return null;\n    const cloned = React.cloneElement(icon, {\n      size: sizes.iconSize,\n      color: tokens.icon,\n      ...(icon.props as Record<string, unknown>),\n    } as object);\n    if (onPress) {\n      return (\n        <Pressable onPress={onPress} hitSlop={8} accessibilityRole=\"button\" accessibilityLabel={a11yLabel}>\n          {cloned}\n        </Pressable>\n      );\n    }\n    return cloned;\n  };\n\n  const handleFocus = () => {\n    if (disabled) return;\n    setIsFocused(true);\n    onFocus?.();\n  };\n\n  const handleBlur = () => {\n    setIsFocused(false);\n    onBlur?.();\n  };\n\n  return (\n    <View style={[styles.wrapper, style]} testID={testID}>\n      {label != null && (\n        <Text style={[styles.label, { color: tokens.label, fontFamily }]}>{label}</Text>\n      )}\n\n      <View style={focusRingStyle}>\n        {variant === 'text' || (variant === 'tags' && onChangeText != null) ? (\n          // text variant OR tags with inline search: View + optional children + TextInput\n          <View style={containerStyle}>\n            {cloneIcon(iconLeft, onPressIconLeft, accessibilityLabelIconLeft)}\n            <View style={styles.tagsRow}>\n              {variant === 'tags' && children}\n              <TextInput\n                style={[styles.textInput, { color: tokens.text, fontSize: sizes.fontSize, fontFamily }]}\n                value={value}\n                onChangeText={onChangeText}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                editable={!disabled}\n                placeholder={placeholder}\n                placeholderTextColor={tokens.placeholder}\n                {...inputProps}\n              />\n            </View>\n            {cloneIcon(iconRight, onPressIconRight, accessibilityLabelIconRight)}\n          </View>\n        ) : (\n          // tags (pressable) or tag-empty\n          <Pressable\n            style={containerStyle}\n            onPress={disabled ? undefined : onPress}\n            pointerEvents={disabled ? 'none' : 'auto'}\n          >\n            {cloneIcon(iconLeft, onPressIconLeft, accessibilityLabelIconLeft)}\n            {variant === 'tags' ? (\n              <View style={styles.tagsRow}>\n                {children}\n              </View>\n            ) : (\n              <Text\n                style={[styles.placeholderText, { color: tokens.placeholder, fontSize: sizes.fontSize, fontFamily }]}\n                numberOfLines={1}\n              >\n                {placeholder}\n              </Text>\n            )}\n            {cloneIcon(iconRight, onPressIconRight, accessibilityLabelIconRight)}\n          </Pressable>\n        )}\n      </View>\n\n      {helperText != null && (\n        <Text style={[styles.helperText, { color: tokens.helper, fontFamily }]}>{helperText}</Text>\n      )}\n    </View>\n  );\n}\n\n"]}

package/build/components/Input/Input.styles.d.ts

@@ -5,13 +5,16 @@ export declare const styles: {
     label: {
         fontSize: number;
         lineHeight: number;
-        fontWeight: "500";
+        fontWeight: "600";
+        letterSpacing: number;
         marginBottom: number;
     };
     textInput: {
         flex: number;
         padding: number;
         fontWeight: "400";
+        includeFontPadding: false;
+        textAlignVertical: "center";
     };
     tagsRow: {
         flex: number;
@@ -23,6 +26,8 @@ export declare const styles: {
     placeholderText: {
         flex: number;
         fontWeight: "400";
+        includeFontPadding: false;
+        textAlignVertical: "center";
     };
     helperText: {
         fontSize: number;

package/build/components/Input/Input.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgCjB,CAAC"}
+{"version":3,"file":"Input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqCjB,CAAC"}

package/build/components/Input/Input.styles.js

@@ -6,13 +6,16 @@ export const styles = StyleSheet.create({
     label: {
         fontSize: 12,
         lineHeight: 16,
-        fontWeight: '500',
+        fontWeight: '600',
+        letterSpacing: 0.72,
         marginBottom: 4,
     },
     textInput: {
         flex: 1,
         padding: 0,
         fontWeight: '400',
+        includeFontPadding: false,
+        textAlignVertical: 'center',
     },
     tagsRow: {
         flex: 1,
@@ -24,6 +27,8 @@ export const styles = StyleSheet.create({
     placeholderText: {
         flex: 1,
         fontWeight: '400',
+        includeFontPadding: false,
+        textAlignVertical: 'center',
     },
     helperText: {
         fontSize: 12,

package/build/components/Input/Input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,OAAO,EAAE;QACP,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,YAAY,EAAE,CAAC;KAChB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,KAAK;KAClB;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,QAAQ;KACnB;IACD,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;KAClB;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  wrapper: {\n    alignSelf: 'stretch',\n  },\n  label: {\n    fontSize: 12,\n    lineHeight: 16,\n    fontWeight: '500',\n    marginBottom: 4,\n  },\n  textInput: {\n    flex: 1,\n    padding: 0,\n    fontWeight: '400',\n  },\n  tagsRow: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n    overflow: 'hidden',\n  },\n  placeholderText: {\n    flex: 1,\n    fontWeight: '400',\n  },\n  helperText: {\n    fontSize: 12,\n    lineHeight: 16,\n    fontWeight: '400',\n    marginTop: 4,\n  },\n});\n"]}
+{"version":3,"file":"Input.styles.js","sourceRoot":"","sources":["../../../src/components/Input/Input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,MAAM,CAAC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IACtC,OAAO,EAAE;QACP,SAAS,EAAE,SAAS;KACrB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,aAAa,EAAE,IAAI;QACnB,YAAY,EAAE,CAAC;KAChB;IACD,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;QACP,OAAO,EAAE,CAAC;QACV,UAAU,EAAE,KAAK;QACjB,kBAAkB,EAAE,KAAK;QACzB,iBAAiB,EAAE,QAAQ;KAC5B;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,GAAG,EAAE,CAAC;QACN,QAAQ,EAAE,QAAQ;KACnB;IACD,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;QACP,UAAU,EAAE,KAAK;QACjB,kBAAkB,EAAE,KAAK;QACzB,iBAAiB,EAAE,QAAQ;KAC5B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,EAAE;QACd,UAAU,EAAE,KAAK;QACjB,SAAS,EAAE,CAAC;KACb;CACF,CAAC,CAAC","sourcesContent":["import { StyleSheet } from 'react-native';\n\nexport const styles = StyleSheet.create({\n  wrapper: {\n    alignSelf: 'stretch',\n  },\n  label: {\n    fontSize: 12,\n    lineHeight: 16,\n    fontWeight: '600',\n    letterSpacing: 0.72,\n    marginBottom: 4,\n  },\n  textInput: {\n    flex: 1,\n    padding: 0,\n    fontWeight: '400',\n    includeFontPadding: false,\n    textAlignVertical: 'center',\n  },\n  tagsRow: {\n    flex: 1,\n    flexDirection: 'row',\n    alignItems: 'center',\n    gap: 4,\n    overflow: 'hidden',\n  },\n  placeholderText: {\n    flex: 1,\n    fontWeight: '400',\n    includeFontPadding: false,\n    textAlignVertical: 'center',\n  },\n  helperText: {\n    fontSize: 12,\n    lineHeight: 16,\n    fontWeight: '400',\n    marginTop: 4,\n  },\n});\n"]}

package/build/components/ListGroup/ListGroup.d.ts

@@ -0,0 +1,24 @@
+/** ListGroup — section header + list of selectable items built on top of ListItem */
+import React from 'react';
+export interface ListGroupItem {
+    /** Unique identifier */
+    id: string;
+    /** Primary label — large bold text */
+    primaryLabel: string;
+    /** Tag displayed after the primary label */
+    tag?: React.ReactNode;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+}
+export interface ListGroupProps {
+    /** Section title displayed above the group */
+    title: string;
+    /** Items to display in the group */
+    items: ListGroupItem[];
+    /** Controlled selected item id */
+    selectedId?: string | null;
+    /** Called when an item is pressed — receives the item id (or null if deselected) */
+    onSelect?: (id: string | null) => void;
+}
+export declare function ListGroup({ title, items, selectedId, onSelect }: ListGroupProps): React.JSX.Element;
+//# sourceMappingURL=ListGroup.d.ts.map

package/build/components/ListGroup/ListGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListGroup.d.ts","sourceRoot":"","sources":["../../../src/components/ListGroup/ListGroup.tsx"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,OAAO,KAAmB,MAAM,OAAO,CAAC;AAMxC,MAAM,WAAW,aAAa;IAC5B,wBAAwB;IACxB,EAAE,EAAE,MAAM,CAAC;IACX,sCAAsC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,mCAAmC;IACnC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,cAAc;IAC7B,8CAA8C;IAC9C,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,KAAK,EAAE,aAAa,EAAE,CAAC;IACvB,kCAAkC;IAClC,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,oFAAoF;IACpF,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;CACxC;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,cAAc,qBAqC/E"}

package/build/components/ListGroup/ListGroup.js

@@ -0,0 +1,44 @@
+/** ListGroup — section header + list of selectable items built on top of ListItem */
+import React, { useState } from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+import { Check } from 'phosphor-react-native';
+import { useTheme } from '../../context/ThemeContext';
+import { ListItem } from '../ListItem';
+export function ListGroup({ title, items, selectedId, onSelect }) {
+    const [internalSelected, setInternalSelected] = useState(null);
+    const { colors, fontFamily } = useTheme();
+    const isControlled = selectedId !== undefined;
+    const activeId = isControlled ? selectedId : internalSelected;
+    const handlePress = (id) => {
+        const next = activeId === id ? null : id;
+        if (!isControlled)
+            setInternalSelected(next);
+        onSelect?.(next);
+    };
+    return (<View>
+      <View style={styles.titleContainer}>
+        <Text style={[styles.title, { color: colors.listItem.section.label, fontFamily }]}>
+          {title.toUpperCase()}
+        </Text>
+      </View>
+      {items.map(({ id, primaryLabel, tag, disabled }) => (<ListItem key={id} primaryLabel={primaryLabel} tag={tag} disabled={disabled} selected={activeId === id} trailing={activeId === id
+                ? <Check size={24} weight="regular" color={colors.listItem.default.label}/>
+                : undefined} onPress={disabled ? undefined : () => handlePress(id)}/>))}
+    </View>);
+}
+const styles = StyleSheet.create({
+    titleContainer: {
+        minHeight: 40,
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+        justifyContent: 'center',
+    },
+    title: {
+        fontSize: 12,
+        fontWeight: '600',
+        lineHeight: 16,
+        letterSpacing: 0.8,
+    },
+});
+//# sourceMappingURL=ListGroup.js.map

package/build/components/ListGroup/ListGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListGroup.js","sourceRoot":"","sources":["../../../src/components/ListGroup/ListGroup.tsx"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,4BAA4B,CAAC;AACtD,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAwBvC,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAkB;IAC9E,MAAM,CAAC,gBAAgB,EAAE,mBAAmB,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC,CAAC;IAC9E,MAAM,EAAE,MAAM,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE1C,MAAM,YAAY,GAAG,UAAU,KAAK,SAAS,CAAC;IAC9C,MAAM,QAAQ,GAAG,YAAY,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,gBAAgB,CAAC;IAE9D,MAAM,WAAW,GAAG,CAAC,EAAU,EAAE,EAAE;QACjC,MAAM,IAAI,GAAG,QAAQ,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC;QACzC,IAAI,CAAC,YAAY;YAAE,mBAAmB,CAAC,IAAI,CAAC,CAAC;QAC7C,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;IACnB,CAAC,CAAC;IAEF,OAAO,CACL,CAAC,IAAI,CACH;MAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,cAAc,CAAC,CACjC;QAAA,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,UAAU,EAAE,CAAC,CAAC,CAChF;UAAA,CAAC,KAAK,CAAC,WAAW,EAAE,CACtB;QAAA,EAAE,IAAI,CACR;MAAA,EAAE,IAAI,CACN;MAAA,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,EAAE,EAAE,YAAY,EAAE,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAClD,CAAC,QAAQ,CACP,GAAG,CAAC,CAAC,EAAE,CAAC,CACR,YAAY,CAAC,CAAC,YAAY,CAAC,CAC3B,GAAG,CAAC,CAAC,GAAG,CAAC,CACT,QAAQ,CAAC,CAAC,QAAQ,CAAC,CACnB,QAAQ,CAAC,CAAC,QAAQ,KAAK,EAAE,CAAC,CAC1B,QAAQ,CAAC,CACP,QAAQ,KAAK,EAAE;gBACb,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,OAAO,CAAC,KAAK,CAAC,EAAG;gBAC5E,CAAC,CAAC,SACN,CAAC,CACD,OAAO,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC,EACtD,CACH,CAAC,CACJ;IAAA,EAAE,IAAI,CAAC,CACR,CAAC;AACJ,CAAC;AAED,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,cAAc,EAAE;QACd,SAAS,EAAE,EAAE;QACb,iBAAiB,EAAE,EAAE;QACrB,UAAU,EAAE,EAAE;QACd,aAAa,EAAE,CAAC;QAChB,cAAc,EAAE,QAAQ;KACzB;IACD,KAAK,EAAE;QACL,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,KAAK;QACjB,UAAU,EAAE,EAAE;QACd,aAAa,EAAE,GAAG;KACnB;CACF,CAAC,CAAC","sourcesContent":["/** ListGroup — section header + list of selectable items built on top of ListItem */\nimport React, { useState } from 'react';\nimport { Text, View, StyleSheet } from 'react-native';\nimport { Check } from 'phosphor-react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { ListItem } from '../ListItem';\n\nexport interface ListGroupItem {\n  /** Unique identifier */\n  id: string;\n  /** Primary label — large bold text */\n  primaryLabel: string;\n  /** Tag displayed after the primary label */\n  tag?: React.ReactNode;\n  /** Whether the item is disabled */\n  disabled?: boolean;\n}\n\nexport interface ListGroupProps {\n  /** Section title displayed above the group */\n  title: string;\n  /** Items to display in the group */\n  items: ListGroupItem[];\n  /** Controlled selected item id */\n  selectedId?: string | null;\n  /** Called when an item is pressed — receives the item id (or null if deselected) */\n  onSelect?: (id: string | null) => void;\n}\n\nexport function ListGroup({ title, items, selectedId, onSelect }: ListGroupProps) {\n  const [internalSelected, setInternalSelected] = useState<string | null>(null);\n  const { colors, fontFamily } = useTheme();\n\n  const isControlled = selectedId !== undefined;\n  const activeId = isControlled ? selectedId : internalSelected;\n\n  const handlePress = (id: string) => {\n    const next = activeId === id ? null : id;\n    if (!isControlled) setInternalSelected(next);\n    onSelect?.(next);\n  };\n\n  return (\n    <View>\n      <View style={styles.titleContainer}>\n        <Text style={[styles.title, { color: colors.listItem.section.label, fontFamily }]}>\n          {title.toUpperCase()}\n        </Text>\n      </View>\n      {items.map(({ id, primaryLabel, tag, disabled }) => (\n        <ListItem\n          key={id}\n          primaryLabel={primaryLabel}\n          tag={tag}\n          disabled={disabled}\n          selected={activeId === id}\n          trailing={\n            activeId === id\n              ? <Check size={24} weight=\"regular\" color={colors.listItem.default.label} />\n              : undefined\n          }\n          onPress={disabled ? undefined : () => handlePress(id)}\n        />\n      ))}\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  titleContainer: {\n    minHeight: 40,\n    paddingHorizontal: 16,\n    paddingTop: 16,\n    paddingBottom: 8,\n    justifyContent: 'center',\n  },\n  title: {\n    fontSize: 12,\n    fontWeight: '600',\n    lineHeight: 16,\n    letterSpacing: 0.8,\n  },\n});"]}

package/build/components/ListGroup/index.d.ts

@@ -0,0 +1,3 @@
+export { ListGroup } from './ListGroup';
+export type { ListGroupProps, ListGroupItem } from './ListGroup';
+//# sourceMappingURL=index.d.ts.map

package/build/components/ListGroup/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ListGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC"}

package/build/components/ListGroup/index.js

@@ -0,0 +1,2 @@
+export { ListGroup } from './ListGroup';
+//# sourceMappingURL=index.js.map

package/build/components/ListGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ListGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC","sourcesContent":["export { ListGroup } from './ListGroup';\nexport type { ListGroupProps, ListGroupItem } from './ListGroup';"]}

package/build/components/ListItem/ListItem.d.ts

@@ -11,6 +11,8 @@
 import React from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 export interface ListItemProps {
+    /** Primary label — largest text (18 px, 600), rendered above label and sublabel */
+    primaryLabel?: string;
     /** Main label text — optional when tag is used alone */
     label?: string;
     /** Secondary text below label — shrinks label to 14 px when present */
@@ -38,5 +40,5 @@ export interface ListItemProps {
     /** Accessibility label for screen readers — defaults to label when omitted */
     accessibilityLabel?: string;
 }
-export declare const ListItem: ({ label, sublabel, leading, tag, trailing, selected, disabled, divider, variant, onPress, style, testID, accessibilityLabel, }: ListItemProps) => React.JSX.Element;
+export declare const ListItem: ({ primaryLabel, label, sublabel, leading, tag, trailing, selected, disabled, divider, variant, onPress, style, testID, accessibilityLabel, }: ListItemProps) => React.JSX.Element;
 //# sourceMappingURL=ListItem.d.ts.map

package/build/components/ListItem/ListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,WAAW,aAAa;IAC5B,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sGAAsG;IACtG,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAMD,eAAO,MAAM,QAAQ,GAAI,gIActB,aAAa,sBAmFf,CAAC"}
+{"version":3,"file":"ListItem.d.ts","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,WAAW,aAAa;IAC5B,mFAAmF;IACnF,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wDAAwD;IACxD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uEAAuE;IACvE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0DAA0D;IAC1D,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,sGAAsG;IACtG,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,sDAAsD;IACtD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,0EAA0E;IAC1E,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kDAAkD;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,6DAA6D;IAC7D,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC,4EAA4E;IAC5E,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,oDAAoD;IACpD,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,4CAA4C;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8EAA8E;IAC9E,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAMD,eAAO,MAAM,QAAQ,GAAI,8IAetB,aAAa,sBAwFf,CAAC"}

package/build/components/ListItem/ListItem.js

@@ -15,7 +15,7 @@ import { styles } from './ListItem.styles';
 // ---------------------------------------------------------------------------
 // Component
 // ---------------------------------------------------------------------------
-export const ListItem = ({ label, sublabel, leading, tag, trailing, selected = false, disabled = false, divider = false, variant = 'default', onPress, style, testID, accessibilityLabel, }) => {
+export const ListItem = ({ primaryLabel, label, sublabel, leading, tag, trailing, selected = false, disabled = false, divider = false, variant = 'default', onPress, style, testID, accessibilityLabel, }) => {
     const { colors, fontFamily } = useTheme();
     const li = colors.listItem;
     // -- Section header variant
@@ -32,15 +32,18 @@ export const ListItem = ({ label, sublabel, leading, tag, trailing, selected = f
     // -- Row content (shared between Pressable and plain View)
     const rowContent = (<View style={styles.row}>
       {leading != null && (<View style={[styles.slot, disabled && styles.disabledSlot]}>{leading}</View>)}
+      {primaryLabel != null && (<Text style={[styles.labelLarge, { color: labelColor, fontFamily, flex: (label == null && sublabel == null) ? 1 : 0 }]} numberOfLines={1}>
+          {primaryLabel}
+        </Text>)}
       {(label != null || sublabel != null) && (<View style={styles.textStack}>
-          {label != null && (<Text style={[sublabel != null ? styles.labelSmall : styles.labelLarge, { color: labelColor, fontFamily }]} numberOfLines={1}>
+          {label != null && (<Text style={[styles.labelSmall, { color: labelColor, fontFamily }]} numberOfLines={1}>
               {label}
             </Text>)}
           {sublabel != null && (<Text style={[styles.sublabel, { color: sublabelColor, fontFamily }]} numberOfLines={1}>
               {sublabel}
             </Text>)}
         </View>)}
-      {tag != null && (<View style={[styles.tagWrapper, (label == null && sublabel == null) && styles.tagWrapperFlex]}>
+      {tag != null && (<View style={[styles.tagWrapper, (label == null && sublabel == null && primaryLabel == null) && styles.tagWrapperFlex]}>
           {tag}
         </View>)}
       {trailing != null && (<View style={[styles.slot, disabled && styles.disabledSlot]}>{trailing}</View>)}

package/build/components/ListItem/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ListItem — flexible list row with optional leading/trailing slots.\n *\n * Variants:\n *  - 'default' → interactive row (48px min-height)\n *  - 'section' → group header label (40px min-height, uppercase)\n *\n * States: default, selected (warm background + radius 12), disabled (muted).\n * Controlled: pass `selected` to mark a row, `onPress` to make it tappable.\n */\nimport React from 'react';\nimport {\n  Pressable,\n  Text,\n  View,\n} from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './ListItem.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ListItemProps {\n  /** Main label text — optional when tag is used alone */\n  label?: string;\n  /** Secondary text below label — shrinks label to 14 px when present */\n  sublabel?: string;\n  /** Left slot — Phosphor icon, avatar, or any ReactNode */\n  leading?: React.ReactNode;\n  /** Tag displayed after the label/sublabel — appears at the far left when no leading/label/sublabel */\n  tag?: React.ReactNode;\n  /** Right slot — icon, value text, or any ReactNode */\n  trailing?: React.ReactNode;\n  /** Highlights the row with a warm pressed background and border-radius */\n  selected?: boolean;\n  /** Disables interaction and mutes text + slots */\n  disabled?: boolean;\n  /** Renders a hairline divider below the row */\n  divider?: boolean;\n  /** 'default' = interactive row | 'section' = group header */\n  variant?: 'default' | 'section';\n  /** Called when the row is pressed — omit to render a non-interactive row */\n  onPress?: () => void;\n  /** Additional style applied to the row container */\n  style?: StyleProp<ViewStyle>;\n  /** Test identifier for automated testing */\n  testID?: string;\n  /** Accessibility label for screen readers — defaults to label when omitted */\n  accessibilityLabel?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const ListItem = ({\n  label,\n  sublabel,\n  leading,\n  tag,\n  trailing,\n  selected = false,\n  disabled = false,\n  divider = false,\n  variant = 'default',\n  onPress,\n  style,\n  testID,\n  accessibilityLabel,\n}: ListItemProps) => {\n  const { colors, fontFamily } = useTheme();\n  const li = colors.listItem;\n\n  // -- Section header variant\n  if (variant === 'section') {\n    return (\n      <View style={[styles.itemGap, styles.sectionContainer, style]} testID={testID}>\n        <Text style={[styles.sectionLabel, { color: li.section.label, fontFamily }]}>\n          {label?.toUpperCase() ?? ''}\n        </Text>\n      </View>\n    );\n  }\n\n  // -- Text colors\n  const labelColor    = disabled ? li.disabled.label    : li.default.label;\n  const sublabelColor = disabled ? li.disabled.sublabel : li.default.sublabel;\n\n  // -- Row content (shared between Pressable and plain View)\n  const rowContent = (\n    <View style={styles.row}>\n      {leading != null && (\n        <View style={[styles.slot, disabled && styles.disabledSlot]}>{leading}</View>\n      )}\n      {(label != null || sublabel != null) && (\n        <View style={styles.textStack}>\n          {label != null && (\n            <Text\n              style={[sublabel != null ? styles.labelSmall : styles.labelLarge, { color: labelColor, fontFamily }]}\n              numberOfLines={1}\n            >\n              {label}\n            </Text>\n          )}\n          {sublabel != null && (\n            <Text style={[styles.sublabel, { color: sublabelColor, fontFamily }]} numberOfLines={1}>\n              {sublabel}\n            </Text>\n          )}\n        </View>\n      )}\n      {tag != null && (\n        <View style={[styles.tagWrapper, (label == null && sublabel == null) && styles.tagWrapperFlex]}>\n          {tag}\n        </View>\n      )}\n      {trailing != null && (\n        <View style={[styles.slot, disabled && styles.disabledSlot]}>{trailing}</View>\n      )}\n    </View>\n  );\n\n  const selectedBg = { backgroundColor: li.pressedBackground, borderRadius: 12 };\n\n  // -- Non-interactive (no onPress or disabled)\n  if (!onPress || disabled) {\n    return (\n      <View style={[styles.itemGap, selected && selectedBg, style]} testID={testID}>\n        {rowContent}\n        {divider && <View style={[styles.divider, { backgroundColor: li.divider }]} />}\n      </View>\n    );\n  }\n\n  // -- Interactive\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityState={{ selected, disabled: false }}\n      style={({ pressed }) => [\n        styles.itemGap,\n        (selected || pressed) && selectedBg,\n        style,\n      ]}\n      testID={testID}\n    >\n      {rowContent}\n      {divider && <View style={[styles.divider, { backgroundColor: li.divider }]} />}\n    </Pressable>\n  );\n};\n\n"]}
+{"version":3,"file":"ListItem.js","sourceRoot":"","sources":["../../../src/components/ListItem/ListItem.tsx"],"names":[],"mappings":"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","sourcesContent":["/**\n * ListItem — flexible list row with optional leading/trailing slots.\n *\n * Variants:\n *  - 'default' → interactive row (48px min-height)\n *  - 'section' → group header label (40px min-height, uppercase)\n *\n * States: default, selected (warm background + radius 12), disabled (muted).\n * Controlled: pass `selected` to mark a row, `onPress` to make it tappable.\n */\nimport React from 'react';\nimport {\n  Pressable,\n  Text,\n  View,\n} from 'react-native';\nimport type { StyleProp, ViewStyle } from 'react-native';\nimport { useTheme } from '../../context/ThemeContext';\nimport { styles } from './ListItem.styles';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\nexport interface ListItemProps {\n  /** Primary label — largest text (18 px, 600), rendered above label and sublabel */\n  primaryLabel?: string;\n  /** Main label text — optional when tag is used alone */\n  label?: string;\n  /** Secondary text below label — shrinks label to 14 px when present */\n  sublabel?: string;\n  /** Left slot — Phosphor icon, avatar, or any ReactNode */\n  leading?: React.ReactNode;\n  /** Tag displayed after the label/sublabel — appears at the far left when no leading/label/sublabel */\n  tag?: React.ReactNode;\n  /** Right slot — icon, value text, or any ReactNode */\n  trailing?: React.ReactNode;\n  /** Highlights the row with a warm pressed background and border-radius */\n  selected?: boolean;\n  /** Disables interaction and mutes text + slots */\n  disabled?: boolean;\n  /** Renders a hairline divider below the row */\n  divider?: boolean;\n  /** 'default' = interactive row | 'section' = group header */\n  variant?: 'default' | 'section';\n  /** Called when the row is pressed — omit to render a non-interactive row */\n  onPress?: () => void;\n  /** Additional style applied to the row container */\n  style?: StyleProp<ViewStyle>;\n  /** Test identifier for automated testing */\n  testID?: string;\n  /** Accessibility label for screen readers — defaults to label when omitted */\n  accessibilityLabel?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\nexport const ListItem = ({\n  primaryLabel,\n  label,\n  sublabel,\n  leading,\n  tag,\n  trailing,\n  selected = false,\n  disabled = false,\n  divider = false,\n  variant = 'default',\n  onPress,\n  style,\n  testID,\n  accessibilityLabel,\n}: ListItemProps) => {\n  const { colors, fontFamily } = useTheme();\n  const li = colors.listItem;\n\n  // -- Section header variant\n  if (variant === 'section') {\n    return (\n      <View style={[styles.itemGap, styles.sectionContainer, style]} testID={testID}>\n        <Text style={[styles.sectionLabel, { color: li.section.label, fontFamily }]}>\n          {label?.toUpperCase() ?? ''}\n        </Text>\n      </View>\n    );\n  }\n\n  // -- Text colors\n  const labelColor    = disabled ? li.disabled.label    : li.default.label;\n  const sublabelColor = disabled ? li.disabled.sublabel : li.default.sublabel;\n\n  // -- Row content (shared between Pressable and plain View)\n  const rowContent = (\n    <View style={styles.row}>\n      {leading != null && (\n        <View style={[styles.slot, disabled && styles.disabledSlot]}>{leading}</View>\n      )}\n      {primaryLabel != null && (\n        <Text\n          style={[styles.labelLarge, { color: labelColor, fontFamily, flex: (label == null && sublabel == null) ? 1 : 0 }]}\n          numberOfLines={1}\n        >\n          {primaryLabel}\n        </Text>\n      )}\n      {(label != null || sublabel != null) && (\n        <View style={styles.textStack}>\n          {label != null && (\n            <Text style={[styles.labelSmall, { color: labelColor, fontFamily }]} numberOfLines={1}>\n              {label}\n            </Text>\n          )}\n          {sublabel != null && (\n            <Text style={[styles.sublabel, { color: sublabelColor, fontFamily }]} numberOfLines={1}>\n              {sublabel}\n            </Text>\n          )}\n        </View>\n      )}\n      {tag != null && (\n        <View style={[styles.tagWrapper, (label == null && sublabel == null && primaryLabel == null) && styles.tagWrapperFlex]}>\n          {tag}\n        </View>\n      )}\n      {trailing != null && (\n        <View style={[styles.slot, disabled && styles.disabledSlot]}>{trailing}</View>\n      )}\n    </View>\n  );\n\n  const selectedBg = { backgroundColor: li.pressedBackground, borderRadius: 12 };\n\n  // -- Non-interactive (no onPress or disabled)\n  if (!onPress || disabled) {\n    return (\n      <View style={[styles.itemGap, selected && selectedBg, style]} testID={testID}>\n        {rowContent}\n        {divider && <View style={[styles.divider, { backgroundColor: li.divider }]} />}\n      </View>\n    );\n  }\n\n  // -- Interactive\n  return (\n    <Pressable\n      onPress={onPress}\n      accessibilityRole=\"button\"\n      accessibilityLabel={accessibilityLabel ?? label}\n      accessibilityState={{ selected, disabled: false }}\n      style={({ pressed }) => [\n        styles.itemGap,\n        (selected || pressed) && selectedBg,\n        style,\n      ]}\n      testID={testID}\n    >\n      {rowContent}\n      {divider && <View style={[styles.divider, { backgroundColor: li.divider }]} />}\n    </Pressable>\n  );\n};\n\n"]}

package/build/components/Switch/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,wCAAwC;IACxC,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mDAAmD;IACnD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,MAAM,GAAI,uFASpB,WAAW,sBA4Eb,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,OAAO,KAA4B,MAAM,OAAO,CAAC;AAEjD,OAAO,KAAK,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAQzD,MAAM,MAAM,UAAU,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,CAAC;AAEhD,MAAM,WAAW,WAAW;IAC1B,wCAAwC;IACxC,KAAK,EAAE,OAAO,CAAC;IACf,qBAAqB;IACrB,aAAa,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACxC,kDAAkD;IAClD,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,mDAAmD;IACnD,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAChC,4DAA4D;IAC5D,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB,8CAA8C;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,oCAAoC;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAyBD,eAAO,MAAM,MAAM,GAAI,uFASpB,WAAW,sBAqFb,CAAC"}

package/build/components/Switch/Switch.js

@@ -5,7 +5,7 @@
  * Track color changes instantly; thumb slides with ease-out cubic.
  */
 import React, { useEffect, useRef } from 'react';
-import { Animated, Easing, Pressable, View } from 'react-native';
+import { Animated, Easing, Pressable, Text, View } from 'react-native';
 import { useTheme } from '../../context/ThemeContext';
 import { styles } from './Switch.styles';
 // ---------------------------------------------------------------------------
@@ -44,6 +44,12 @@ export const Switch = ({ value, onValueChange, childrenLeft, childrenRight, size
         outputRange: [0, travelX],
     });
     const t = colors.toggle;
+    const { fontFamily } = useTheme();
+    const labelColor = disabled ? t.labelDisabled : t.label;
+    // Render string children as styled Text; ReactNode children pass through as-is
+    const renderChild = (child) => typeof child === 'string'
+        ? <Text style={{ color: labelColor, fontFamily }}>{child}</Text>
+        : child;
     const trackColor = disabled
         ? (value ? t.trackOnDisabled : t.trackOffDisabled)
         : (value ? t.trackOn : t.trackOff);
@@ -75,9 +81,9 @@ export const Switch = ({ value, onValueChange, childrenLeft, childrenRight, size
         ]}/>
     </View>);
     return (<Pressable onPress={disabled ? undefined : () => onValueChange(!value)} accessibilityRole="switch" accessibilityState={{ checked: value, disabled }} style={[styles.wrapper, style]} testID={testID}>
-      {childrenLeft}
+      {renderChild(childrenLeft)}
       {track}
-      {childrenRight}
+      {renderChild(childrenRight)}
     </Pressable>);
 };
 //# sourceMappingURL=Switch.js.map