@ecohouse/ui 0.1.22 → 0.1.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.22",
+  "version": "0.1.23",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -37,6 +37,7 @@ export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "childre
 const ICON_SIZE = 20;
 const ANIMATION_DURATION = 200;
 const OPTION_HORIZONTAL_PADDING = 16;
+const OPTION_MIN_WIDTH = 97;
 
 export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
   function SegmentedToggle(
@@ -66,13 +67,9 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const resolvedClassName = className?.trim() || undefined;
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
-    const [contentWidths, setContentWidths] = useState<[number, number]>([0, 0]);
     const [containerWidth, setContainerWidth] = useState(0);
     const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
-    const widestContentWidth = Math.max(...contentWidths);
-    const contentBasedOptionWidth =
-      widestContentWidth > 0 ? widestContentWidth + OPTION_HORIZONTAL_PADDING * 2 : 0;
-    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const optionWidth = fullWidth ? availableOptionWidth : OPTION_MIN_WIDTH;
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0, optionWidth + 4],
@@ -126,7 +123,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             ]}
           />
         ) : null}
-        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
+        {options.map(({ value: optionValue, label, icon: Icon }) => {
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -142,21 +139,12 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
               accessibilityState={{ selected, disabled }}
               style={[
                 styles.option,
-                fullWidth ? styles.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth },
+                fullWidth
+                  ? styles.optionFullWidth
+                  : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH },
               ]}
             >
-              <View
-                onLayout={(event) => {
-                  const nextWidth = event.nativeEvent.layout.width;
-                  setContentWidths((currentWidths) => {
-                    if (currentWidths[index] === nextWidth) return currentWidths;
-                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
-                    nextWidths[index] = nextWidth;
-                    return nextWidths;
-                  });
-                }}
-                style={styles.optionContent}
-              >
+              <View style={styles.optionContent}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
                 <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
                   {label}