@ecohouse/ui 0.1.23 → 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,
@@ -2250,12 +2252,18 @@ 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 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(() => {
@@ -2293,17 +2301,41 @@ 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,
-          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,11 +2350,25 @@ 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,
+                    optionWidths[index] > 0 && { width: optionWidths[index] }
+                  ]
                 ],
                 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 })
+                  /* @__PURE__ */ jsx(
+                    Text,
+                    {
+                      numberOfLines: fullWidth ? 1 : void 0,
+                      style: [
+                        styles7.label,
+                        !fullWidth && styles7.contentWidthLabel,
+                        { color: labelColor }
+                      ],
+                      children: label
+                    }
+                  )
                 ] })
               },
               optionValue
@@ -2365,12 +2411,22 @@ 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,
     minWidth: 0
   },
+  optionContentWidth: {
+    minWidth: OPTION_MIN_WIDTH
+  },
   activeIndicator: {
     position: "absolute",
     top: 4,
@@ -2382,6 +2438,9 @@ var styles7 = StyleSheet.create({
   label: {
     ...segmentedToggleTypography,
     flexShrink: 1
+  },
+  contentWidthLabel: {
+    flexShrink: 0
   }
 });
 var defaultLanguageOptions = [