@ecohouse/ui 0.1.24 → 0.1.25

package/dist/index.js

@@ -2224,7 +2224,9 @@ var styles6 = StyleSheet.create({
 var ICON_SIZE4 = 20;
 var ANIMATION_DURATION = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
+var OPTION_CONTENT_GAP = 12;
 var OPTION_MIN_WIDTH = 97;
+var OPTION_MEASUREMENT_TOLERANCE = 0.5;
 var SegmentedToggle = forwardRef(
   function SegmentedToggle2({
     options,
@@ -2253,12 +2255,15 @@ var SegmentedToggle = forwardRef(
     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 ? Math.max(OPTION_MIN_WIDTH, widestContentWidth + OPTION_HORIZONTAL_PADDING * 2) : 0;
-    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const resolveContentOptionWidth = (contentWidth) => contentWidth > 0 ? Math.max(
+      OPTION_MIN_WIDTH,
+      contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE
+    ) : 0;
+    const optionWidths = fullWidth ? [availableOptionWidth, availableOptionWidth] : [resolveContentOptionWidth(contentWidths[0]), resolveContentOptionWidth(contentWidths[1])];
+    const selectedOptionWidth = optionWidths[selectedIndex];
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
-      outputRange: [0, optionWidth + 4]
+      outputRange: [0, optionWidths[0] + 4]
     });
     useApplyWebClassName(containerRef, resolvedClassName);
     useEffect(() => {
@@ -2296,13 +2301,37 @@ var SegmentedToggle = forwardRef(
         ],
         accessibilityRole: "radiogroup",
         children: [
-          optionWidth > 0 ? /* @__PURE__ */ jsx(
+          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2 }, index) => /* @__PURE__ */ jsxs(
+            View,
+            {
+              pointerEvents: "none",
+              "aria-hidden": true,
+              accessibilityElementsHidden: true,
+              importantForAccessibility: "no-hide-descendants",
+              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.optionMeasurement,
+              children: [
+                Icon2 ? /* @__PURE__ */ jsx(Icon2, { size: ICON_SIZE4 }) : null,
+                /* @__PURE__ */ jsx(Text, { style: [styles7.label, styles7.contentWidthLabel], children: label })
+              ]
+            },
+            `${optionValue}-measurement`
+          )) : null,
+          selectedOptionWidth > 0 ? /* @__PURE__ */ jsx(
             Animated.View,
             {
               pointerEvents: "none",
               style: [
                 styles7.activeIndicator,
-                { width: optionWidth, transform: [{ translateX: indicatorTranslateX }] }
+                { width: selectedOptionWidth, transform: [{ translateX: indicatorTranslateX }] }
               ]
             }
           ) : null,
@@ -2321,27 +2350,26 @@ var SegmentedToggle = forwardRef(
                 accessibilityState: { selected, disabled },
                 style: [
                   styles7.option,
-                  fullWidth ? styles7.optionFullWidth : [styles7.optionContentWidth, optionWidth > 0 && { width: optionWidth }]
+                  fullWidth ? styles7.optionFullWidth : [
+                    styles7.optionContentWidth,
+                    optionWidths[index] > 0 && { width: optionWidths[index] }
+                  ]
                 ],
-                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: fullWidth ? 1 : void 0,
+                      style: [
+                        styles7.label,
+                        !fullWidth && styles7.contentWidthLabel,
+                        { color: labelColor }
+                      ],
+                      children: label
+                    }
+                  )
+                ] })
               },
               optionValue
             );
@@ -2383,7 +2411,14 @@ var styles7 = StyleSheet.create({
     maxWidth: "100%",
     flexDirection: "row",
     alignItems: "center",
-    gap: 12
+    gap: OPTION_CONTENT_GAP
+  },
+  optionMeasurement: {
+    position: "absolute",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: OPTION_CONTENT_GAP,
+    opacity: 0
   },
   optionFullWidth: {
     flex: 1,
@@ -2403,6 +2438,9 @@ var styles7 = StyleSheet.create({
   label: {
     ...segmentedToggleTypography,
     flexShrink: 1
+  },
+  contentWidthLabel: {
+    flexShrink: 0
   }
 });
 var defaultLanguageOptions = [