@ecohouse/ui 0.1.23 → 0.1.24

package/dist/index.js

@@ -2250,9 +2250,12 @@ var SegmentedToggle = forwardRef(
     const resolvedClassName = className?.trim() || void 0;
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
+    const [contentWidths, setContentWidths] = useState([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]
@@ -2303,7 +2306,7 @@ var SegmentedToggle = forwardRef(
               ]
             }
           ) : null,
-          options.map(({ value: optionValue, label, icon: Icon2 }) => {
+          options.map(({ value: optionValue, label, icon: Icon2 }, index) => {
             const selected = optionValue === selectedValue;
             const iconColor = selected ? colors.primary : colors.whiteAlpha20;
             const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -2318,12 +2321,27 @@ var SegmentedToggle = forwardRef(
                 accessibilityState: { selected, disabled },
                 style: [
                   styles7.option,
-                  fullWidth ? styles7.optionFullWidth : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH }
+                  fullWidth ? styles7.optionFullWidth : [styles7.optionContentWidth, optionWidth > 0 && { width: optionWidth }]
                 ],
-                children: /* @__PURE__ */ jsxs(View, { style: styles7.optionContent, children: [
-                  Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
-                  /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
-                ] })
+                children: /* @__PURE__ */ jsxs(
+                  View,
+                  {
+                    onLayout: (event) => {
+                      const nextWidth = event.nativeEvent.layout.width;
+                      setContentWidths((currentWidths) => {
+                        if (currentWidths[index] === nextWidth) return currentWidths;
+                        const nextWidths = [currentWidths[0], currentWidths[1]];
+                        nextWidths[index] = nextWidth;
+                        return nextWidths;
+                      });
+                    },
+                    style: styles7.optionContent,
+                    children: [
+                      Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
+                      /* @__PURE__ */ jsx(Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
+                    ]
+                  }
+                )
               },
               optionValue
             );
@@ -2371,6 +2389,9 @@ var styles7 = StyleSheet.create({
     flex: 1,
     minWidth: 0
   },
+  optionContentWidth: {
+    minWidth: OPTION_MIN_WIDTH
+  },
   activeIndicator: {
     position: "absolute",
     top: 4,