@ecohouse/ui 0.1.22 → 0.1.23

package/dist/index.js

@@ -2224,6 +2224,7 @@ var styles6 = StyleSheet.create({
 var ICON_SIZE4 = 20;
 var ANIMATION_DURATION = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
+var OPTION_MIN_WIDTH = 97;
 var SegmentedToggle = forwardRef(
   function SegmentedToggle2({
     options,
@@ -2249,12 +2250,9 @@ 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 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]
@@ -2305,7 +2303,7 @@ var SegmentedToggle = forwardRef(
               ]
             }
           ) : null,
-          options.map(({ value: optionValue, label, icon: Icon2 }, index) => {
+          options.map(({ value: optionValue, label, icon: Icon2 }) => {
             const selected = optionValue === selectedValue;
             const iconColor = selected ? colors.primary : colors.whiteAlpha20;
             const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -2320,27 +2318,12 @@ var SegmentedToggle = forwardRef(
                 accessibilityState: { selected, disabled },
                 style: [
                   styles7.option,
-                  fullWidth ? styles7.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth }
+                  fullWidth ? styles7.optionFullWidth : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH }
                 ],
-                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 })
-                    ]
-                  }
-                )
+                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 })
+                ] })
               },
               optionValue
             );