@ecohouse/ui 0.1.23 → 0.1.24

package/package.json

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

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -67,9 +67,15 @@ 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 optionWidth = fullWidth ? availableOptionWidth : OPTION_MIN_WIDTH;
+    const widestContentWidth = Math.max(...contentWidths);
+    const contentBasedOptionWidth =
+      widestContentWidth > 0
+        ? Math.max(OPTION_MIN_WIDTH, widestContentWidth + OPTION_HORIZONTAL_PADDING * 2)
+        : 0;
+    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0, optionWidth + 4],
@@ -123,7 +129,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             ]}
           />
         ) : null}
-        {options.map(({ value: optionValue, label, icon: Icon }) => {
+        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -141,10 +147,21 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
                 styles.option,
                 fullWidth
                   ? styles.optionFullWidth
-                  : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH },
+                  : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
               ]}
             >
-              <View style={styles.optionContent}>
+              <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}
+              >
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
                 <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
                   {label}
@@ -196,6 +213,9 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
   },
+  optionContentWidth: {
+    minWidth: OPTION_MIN_WIDTH,
+  },
   activeIndicator: {
     position: "absolute",
     top: 4,