@ecohouse/ui 0.1.44 → 0.1.46

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ecohouse/ui",
-  "version": "0.1.44",
+  "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/icons/NoReview/NoReviewIcon.tsx

@@ -0,0 +1,20 @@
+import Svg, { Path } from "react-native-svg";
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_REVIEW_PATH } from "./noReviewPath";
+
+export { NO_REVIEW_PATH } from "./noReviewPath";
+
+export function NoReviewIcon({ size = 20, color = colors.grey150, strokeWidth = 2 }: IconProps) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 20 20" fill="none">
+      <Path
+        d={NO_REVIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </Svg>
+  );
+}

package/src/icons/NoReview/NoReviewIcon.web.tsx

@@ -0,0 +1,19 @@
+import { colors } from "../../theme";
+import type { IconProps } from "../types";
+import { NO_REVIEW_PATH } from "./noReviewPath";
+
+export function NoReviewIcon({ size = 20, color = colors.grey150, strokeWidth = 2 }: IconProps) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" aria-hidden>
+      <path
+        d={NO_REVIEW_PATH}
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+export { NO_REVIEW_PATH } from "./noReviewPath";

package/src/icons/NoReview/index.ts

@@ -0,0 +1 @@
+export { NoReviewIcon, NO_REVIEW_PATH } from "./NoReviewIcon";

package/src/icons/NoReview/noReviewPath.ts

@@ -0,0 +1,3 @@
+/** No-review / empty comment path — 20×20 viewBox. */
+export const NO_REVIEW_PATH =
+  "M8.33333 10.833L9.99999 9.16633M9.99999 9.16633L11.6666 7.49967M9.99999 9.16633L8.33333 7.49967M9.99999 9.16633L11.6666 10.833M5.93631 15.584L4.66634 16.6C3.97287 17.1547 3.62596 17.4322 3.33415 17.4326C3.08036 17.4328 2.84037 17.3174 2.68205 17.1191C2.5 16.891 2.5 16.4471 2.5 15.559V5.99984C2.5 5.06642 2.5 4.59936 2.68166 4.24284C2.84144 3.92924 3.09623 3.67445 3.40983 3.51466C3.76635 3.33301 4.23341 3.33301 5.16683 3.33301H14.8335C15.7669 3.33301 16.233 3.33301 16.5895 3.51466C16.9031 3.67445 17.1587 3.92924 17.3185 4.24284C17.5 4.59901 17.5 5.0655 17.5 5.9971V12.336C17.5 13.2676 17.5 13.7334 17.3185 14.0896C17.1587 14.4032 16.9036 14.6584 16.59 14.8182C16.2338 14.9997 15.7675 14.9997 14.8359 14.9997H7.60173C7.25503 14.9997 7.08231 14.9997 6.9165 15.0337C6.7694 15.0639 6.6268 15.1136 6.49307 15.182C6.34401 15.2581 6.21041 15.365 5.94565 15.5768L5.93631 15.584Z";

package/src/icons/index.ts

@@ -27,6 +27,7 @@ export { ChevronLeftIcon } from "./ChevronLeft";
 export { ClockIcon } from "./Clock";
 export { CloseIcon } from "./Close";
 export { CloudUploadIcon } from "./CloudUpload";
+export { NoReviewIcon } from "./NoReview";
 export { CurrentLocationIcon } from "./CurrentLocation";
 export { EditIcon } from "./Edit";
 export { EyeIcon } from "./Eye";

package/src/icons/registry.ts

@@ -17,6 +17,7 @@ import { ChevronLeftIcon } from "./ChevronLeft";
 import { ClockIcon } from "./Clock";
 import { CloseIcon } from "./Close";
 import { CloudUploadIcon } from "./CloudUpload";
+import { NoReviewIcon } from "./NoReview";
 import { EditIcon } from "./Edit";
 import { EyeIcon } from "./Eye";
 import {
@@ -117,6 +118,7 @@ export const icons = {
   clock: ClockIcon,
   close: CloseIcon,
   cloudUpload: CloudUploadIcon,
+  noReview: NoReviewIcon,
   edit: EditIcon,
   clockFilled: ClockFilledIcon,
   copy: CopyIcon,
@@ -235,6 +237,7 @@ export const iconGroups = {
     "calendarOutline",
     "close",
     "cloudUpload",
+    "noReview",
     "edit",
     "ratingStar",
     "saveHeart",

package/src/index.ts

@@ -149,6 +149,7 @@ export {
   ClockIcon,
   CloseIcon,
   CloudUploadIcon,
+  NoReviewIcon,
   CurrentLocationIcon,
   EditIcon,
   BathroomsIcon,

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;