@ecohouse/ui 0.1.45 → 0.1.46

package/dist/index.cjs

@@ -28733,7 +28733,7 @@ var avatarTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "600",
-    lineHeight: 12,
+    lineHeight: 20,
     letterSpacing: 0
   }
 };
@@ -32861,7 +32861,6 @@ var ANIMATION_DURATION2 = 200;
 var OPTION_HORIZONTAL_PADDING = 16;
 var OPTION_CONTENT_GAP = 12;
 var OPTION_MIN_WIDTH = 97;
-var OPTION_MEASUREMENT_TOLERANCE = 0.5;
 var TRACK_PADDING = 4;
 var OPTION_GAP = 4;
 function buildIndicatorOutputRange(optionWidths) {
@@ -32900,18 +32899,15 @@ var SegmentedToggle = react.forwardRef(
     const setContainerRef = react.useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = react.useRef(new reactNative.Animated.Value(selectedIndex)).current;
     const hasMounted = react.useRef(false);
-    const [contentWidths, setContentWidths] = react.useState(
+    const [measuredOptionWidths, setMeasuredOptionWidths] = react.useState(
       () => Array.from({ length: optionCount }, () => 0)
     );
     const [containerWidth, setContainerWidth] = react.useState(0);
     const trackChrome = TRACK_PADDING * 2 + OPTION_GAP * (optionCount - 1);
     const availableOptionWidth = Math.max(0, (containerWidth - trackChrome) / optionCount);
-    const resolveContentOptionWidth = (contentWidth) => contentWidth > 0 ? Math.max(
-      OPTION_MIN_WIDTH,
-      contentWidth + OPTION_HORIZONTAL_PADDING * 2 + OPTION_MEASUREMENT_TOLERANCE
-    ) : 0;
-    const optionWidths = fullWidth ? Array.from({ length: optionCount }, () => availableOptionWidth) : contentWidths.map((width) => resolveContentOptionWidth(width));
-    const selectedOptionWidth = optionWidths[selectedIndex] ?? 0;
+    const optionWidths = fullWidth ? Array.from({ length: optionCount }, () => availableOptionWidth) : measuredOptionWidths;
+    const measurementsReady = optionWidths.every((width) => width > 0);
+    const selectedOptionWidth = measurementsReady ? optionWidths[selectedIndex] ?? 0 : 0;
     const indicatorInputRange = options.map((_, index) => index);
     const indicatorOutputRange = buildIndicatorOutputRange(optionWidths);
     const indicatorTranslateX = progress.interpolate({
@@ -32920,7 +32916,7 @@ var SegmentedToggle = react.forwardRef(
     });
     useApplyWebClassName(containerRef, resolvedClassName);
     react.useEffect(() => {
-      setContentWidths((current) => {
+      setMeasuredOptionWidths((current) => {
         if (current.length === optionCount) return current;
         return Array.from({ length: optionCount }, (_, index) => current[index] ?? 0);
       });
@@ -32965,30 +32961,6 @@ var SegmentedToggle = react.forwardRef(
         ],
         accessibilityRole: "radiogroup",
         children: [
-          !fullWidth ? options.map(({ value: optionValue, label, icon: Icon2, showLabel = true }, index) => /* @__PURE__ */ jsxRuntime.jsxs(
-            reactNative.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];
-                  nextWidths[index] = nextWidth;
-                  return nextWidths;
-                });
-              },
-              style: styles20.optionMeasurement,
-              children: [
-                Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE8 }) : null,
-                showLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles20.label, styles20.contentWidthLabel], children: label }) : null
-              ]
-            },
-            `${optionValue}-measurement`
-          )) : null,
           selectedOptionWidth > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
             reactNative.Animated.View,
             {
@@ -33003,37 +32975,61 @@ var SegmentedToggle = react.forwardRef(
             const selected = optionValue === selectedValue;
             const iconColor = selected ? colors.primary : colors.whiteAlpha20;
             const labelColor = selected ? colors.white : colors.grey150;
-            const optionWidth = optionWidths[index] ?? 0;
-            return /* @__PURE__ */ jsxRuntime.jsx(
+            return /* @__PURE__ */ jsxRuntime.jsxs(
               reactNative.Pressable,
               {
                 onPress: () => selectOption(optionValue),
                 disabled,
                 hitSlop,
+                onLayout: fullWidth ? void 0 : (event) => {
+                  const nextWidth = event.nativeEvent.layout.width;
+                  setMeasuredOptionWidths((currentWidths) => {
+                    if (currentWidths[index] === nextWidth) return currentWidths;
+                    const nextWidths = [...currentWidths];
+                    nextWidths[index] = nextWidth;
+                    return nextWidths;
+                  });
+                },
                 accessibilityRole: "radio",
                 accessibilityLabel: label,
                 accessibilityState: { selected, disabled },
                 style: [
                   styles20.option,
-                  fullWidth ? styles20.optionFullWidth : [styles20.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
-                  selected && selectedOptionWidth === 0 && styles20.initialSelectedOption
+                  fullWidth ? styles20.optionFullWidth : styles20.optionContentWidth,
+                  selected && !measurementsReady && styles20.initialSelectedOption
                 ],
-                children: /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: styles20.optionContent, children: [
-                  Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE8, color: iconColor }) : null,
-                  showLabel ? /* @__PURE__ */ jsxRuntime.jsx(
-                    reactNative.Text,
+                children: [
+                  !fullWidth ? /* @__PURE__ */ jsxRuntime.jsxs(
+                    reactNative.View,
                     {
-                      numberOfLines: fullWidth ? 1 : void 0,
-                      style: [
-                        styles20.label,
-                        selected ? styles20.selectedLabel : styles20.inactiveLabel,
-                        !fullWidth && styles20.contentWidthLabel,
-                        { color: labelColor }
-                      ],
-                      children: label
+                      "aria-hidden": true,
+                      accessibilityElementsHidden: true,
+                      importantForAccessibility: "no-hide-descendants",
+                      pointerEvents: "none",
+                      style: [styles20.optionContent, styles20.optionSizeProbe],
+                      children: [
+                        Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE8 }) : null,
+                        showLabel ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: [styles20.label, styles20.selectedLabel, styles20.contentWidthLabel], children: label }) : null
+                      ]
                     }
-                  ) : null
-                ] })
+                  ) : null,
+                  /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: [styles20.optionContent, !fullWidth && styles20.contentWidthVisibleContent], children: [
+                    Icon2 ? /* @__PURE__ */ jsxRuntime.jsx(Icon2, { size: ICON_SIZE8, color: iconColor }) : null,
+                    showLabel ? /* @__PURE__ */ jsxRuntime.jsx(
+                      reactNative.Text,
+                      {
+                        numberOfLines: fullWidth ? 1 : void 0,
+                        style: [
+                          styles20.label,
+                          selected ? styles20.selectedLabel : styles20.inactiveLabel,
+                          !fullWidth && styles20.contentWidthLabel,
+                          { color: labelColor }
+                        ],
+                        children: label
+                      }
+                    ) : null
+                  ] })
+                ]
               },
               optionValue
             );
@@ -33077,13 +33073,17 @@ var styles20 = reactNative.StyleSheet.create({
     alignItems: "center",
     gap: OPTION_CONTENT_GAP
   },
-  optionMeasurement: {
-    position: "absolute",
-    flexDirection: "row",
-    alignItems: "center",
-    gap: OPTION_CONTENT_GAP,
+  optionSizeProbe: {
     opacity: 0
   },
+  contentWidthVisibleContent: {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    width: "100%",
+    height: "100%",
+    justifyContent: "center"
+  },
   optionFullWidth: {
     flex: 1,
     minWidth: 0