@ecohouse/ui 0.1.23 → 0.1.24

package/dist/index.cjs

@@ -2256,9 +2256,12 @@ var SegmentedToggle = react.forwardRef(
     const resolvedClassName = className?.trim() || void 0;
     const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = react.useRef(new reactNative.Animated.Value(selectedIndex)).current;
+    const [contentWidths, setContentWidths] = react.useState([0, 0]);
     const [containerWidth, setContainerWidth] = react.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]
@@ -2309,7 +2312,7 @@ var SegmentedToggle = react.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;
@@ -2324,12 +2327,27 @@ var SegmentedToggle = react.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__ */ jsxRuntime.jsxs(reactNative.View, { style: styles7.optionContent, children: [
-                  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
-                  /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
-                ] })
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  reactNative.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__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE4, color: iconColor }) : null,
+                      /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { numberOfLines: 1, style: [styles7.label, { color: labelColor }], children: label })
+                    ]
+                  }
+                )
               },
               optionValue
             );
@@ -2377,6 +2395,9 @@ var styles7 = reactNative.StyleSheet.create({
     flex: 1,
     minWidth: 0
   },
+  optionContentWidth: {
+    minWidth: OPTION_MIN_WIDTH
+  },
   activeIndicator: {
     position: "absolute",
     top: 4,