@ecohouse/ui 0.1.45 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.45",
+  "version": "0.1.46",
   "type": "module",
   "private": false,
   "description": "Cross-platform presentation-only UI components for EcoHouse (React Native + React Native Web)",

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -47,7 +47,6 @@ const ANIMATION_DURATION = 200;
 const OPTION_HORIZONTAL_PADDING = 16;
 const OPTION_CONTENT_GAP = 12;
 const OPTION_MIN_WIDTH = 97;
-const OPTION_MEASUREMENT_TOLERANCE = 0.5;
 const TRACK_PADDING = 4;
 const OPTION_GAP = 4;
 
@@ -91,7 +90,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
     const hasMounted = useRef(false);
-    const [contentWidths, setContentWidths] = useState<number[]>(() =>
+    const [measuredOptionWidths, setMeasuredOptionWidths] = useState<number[]>(() =>
       Array.from({ length: optionCount }, () => 0),
     );
     const [containerWidth, setContainerWidth] = useState(0);
@@ -99,19 +98,12 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     // Track chrome: left+right padding + gaps between options.
     const trackChrome = TRACK_PADDING * 2 + OPTION_GAP * (optionCount - 1);
     const availableOptionWidth = Math.max(0, (containerWidth - trackChrome) / optionCount);
-    const resolveContentOptionWidth = (contentWidth: number) =>
-      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));
+      : measuredOptionWidths;
 
-    const selectedOptionWidth = optionWidths[selectedIndex] ?? 0;
+    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({
@@ -122,7 +114,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     useApplyWebClassName(containerRef, resolvedClassName);
 
     useEffect(() => {
-      setContentWidths((current) => {
+      setMeasuredOptionWidths((current) => {
         if (current.length === optionCount) return current;
         return Array.from({ length: optionCount }, (_, index) => current[index] ?? 0);
       });
@@ -171,32 +163,6 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
         ]}
         accessibilityRole="radiogroup"
       >
-        {!fullWidth
-          ? options.map(({ value: optionValue, label, icon: Icon, showLabel = true }, index) => (
-              <View
-                key={`${optionValue}-measurement`}
-                pointerEvents="none"
-                aria-hidden
-                accessibilityElementsHidden
-                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={styles.optionMeasurement}
-              >
-                {Icon ? <Icon size={ICON_SIZE} /> : null}
-                {showLabel ? (
-                  <Text style={[styles.label, styles.contentWidthLabel]}>{label}</Text>
-                ) : null}
-              </View>
-            ))
-          : null}
         {selectedOptionWidth > 0 ? (
           <Animated.View
             pointerEvents="none"
@@ -210,7 +176,6 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.white : colors.grey150;
-          const optionWidth = optionWidths[index] ?? 0;
 
           return (
             <Pressable
@@ -218,18 +183,45 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
               onPress={() => selectOption(optionValue)}
               disabled={disabled}
               hitSlop={hitSlop}
+              onLayout={
+                fullWidth
+                  ? undefined
+                  : (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={[
                 styles.option,
-                fullWidth
-                  ? styles.optionFullWidth
-                  : [styles.optionContentWidth, optionWidth > 0 && { width: optionWidth }],
-                selected && selectedOptionWidth === 0 && styles.initialSelectedOption,
+                fullWidth ? styles.optionFullWidth : styles.optionContentWidth,
+                selected && !measurementsReady && styles.initialSelectedOption,
               ]}
             >
-              <View style={styles.optionContent}>
+              {!fullWidth ? (
+                <View
+                  aria-hidden
+                  accessibilityElementsHidden
+                  importantForAccessibility="no-hide-descendants"
+                  pointerEvents="none"
+                  style={[styles.optionContent, styles.optionSizeProbe]}
+                >
+                  {Icon ? <Icon size={ICON_SIZE} /> : null}
+                  {showLabel ? (
+                    <Text style={[styles.label, styles.selectedLabel, styles.contentWidthLabel]}>
+                      {label}
+                    </Text>
+                  ) : null}
+                </View>
+              ) : null}
+              <View style={[styles.optionContent, !fullWidth && styles.contentWidthVisibleContent]}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
                 {showLabel ? (
                   <Text
@@ -287,13 +279,17 @@ const styles = 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,

package/src/theme/typography.ts

@@ -156,7 +156,7 @@ export const selectTypography = {
   },
 } as const;
 
-/** Avatar name / email / menu-item typography — 100% line-height, 0 letter-spacing. */
+/** Avatar name / email / menu-item typography — compact line heights, 0 letter-spacing. */
 export const avatarTypography = {
   name: {
     fontFamily: fonts.sans,
@@ -176,7 +176,7 @@ export const avatarTypography = {
     fontFamily: fonts.sans,
     fontSize: 12,
     fontWeight: "600" as const,
-    lineHeight: 12,
+    lineHeight: 20,
     letterSpacing: 0,
   },
 } as const;