@ecohouse/ui 0.1.21 → 0.1.23

package/package.json

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

package/src/components/SegmentedToggle/SegmentedToggle.tsx

@@ -37,6 +37,7 @@ export interface SegmentedToggleProps extends Omit<ViewProps, "style" | "childre
 const ICON_SIZE = 20;
 const ANIMATION_DURATION = 200;
 const OPTION_HORIZONTAL_PADDING = 16;
+const OPTION_MIN_WIDTH = 97;
 
 export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedToggleProps>(
   function SegmentedToggle(
@@ -66,13 +67,9 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
     const resolvedClassName = className?.trim() || undefined;
     const setContainerRef = useMemo(() => mergeRefs(containerRef, forwardedRef), [forwardedRef]);
     const progress = useRef(new Animated.Value(selectedIndex)).current;
-    const [contentWidths, setContentWidths] = useState<[number, number]>([0, 0]);
     const [containerWidth, setContainerWidth] = useState(0);
     const availableOptionWidth = Math.max(0, (containerWidth - 12) / 2);
-    const widestContentWidth = Math.max(...contentWidths);
-    const contentBasedOptionWidth =
-      widestContentWidth > 0 ? widestContentWidth + OPTION_HORIZONTAL_PADDING * 2 : 0;
-    const optionWidth = fullWidth ? availableOptionWidth : contentBasedOptionWidth;
+    const optionWidth = fullWidth ? availableOptionWidth : OPTION_MIN_WIDTH;
     const indicatorTranslateX = progress.interpolate({
       inputRange: [0, 1],
       outputRange: [0, optionWidth + 4],
@@ -126,7 +123,7 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
             ]}
           />
         ) : null}
-        {options.map(({ value: optionValue, label, icon: Icon }, index) => {
+        {options.map(({ value: optionValue, label, icon: Icon }) => {
           const selected = optionValue === selectedValue;
           const iconColor = selected ? colors.primary : colors.whiteAlpha20;
           const labelColor = selected ? colors.whiteAlpha86 : colors.whiteAlpha40;
@@ -142,21 +139,12 @@ export const SegmentedToggle = forwardRef<ComponentRef<typeof View>, SegmentedTo
               accessibilityState={{ selected, disabled }}
               style={[
                 styles.option,
-                fullWidth ? styles.optionFullWidth : optionWidth > 0 && { minWidth: optionWidth },
+                fullWidth
+                  ? styles.optionFullWidth
+                  : { width: OPTION_MIN_WIDTH, minWidth: OPTION_MIN_WIDTH },
               ]}
             >
-              <View
-                onLayout={(event) => {
-                  const nextWidth = event.nativeEvent.layout.width;
-                  setContentWidths((currentWidths) => {
-                    if (currentWidths[index] === nextWidth) return currentWidths;
-                    const nextWidths: [number, number] = [currentWidths[0], currentWidths[1]];
-                    nextWidths[index] = nextWidth;
-                    return nextWidths;
-                  });
-                }}
-                style={styles.optionContent}
-              >
+              <View style={styles.optionContent}>
                 {Icon ? <Icon size={ICON_SIZE} color={iconColor} /> : null}
                 <Text numberOfLines={1} style={[styles.label, { color: labelColor }]}>
                   {label}

package/src/index.ts

@@ -54,6 +54,7 @@ export type {
 } from "./components";
 
 export {
+  Amenity,
   BrandLogo,
   BRAND_LOGO_COLORS,
   BRAND_LOGO_DEFAULT_HEIGHT,
@@ -62,6 +63,8 @@ export {
   MenuItem,
 } from "./primitives";
 export type {
+  AmenityProps,
+  AmenityVariant,
   BrandLogoProps,
   BrandLogoVariant,
   FavoritesButtonProps,

package/src/primitives/Amenity/Amenity.stories.tsx

@@ -0,0 +1,64 @@
+import { useState } from "react";
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { StyleSheet, View } from "react-native";
+import { Amenity } from "./Amenity";
+
+const meta = {
+  title: "Primitives/Amenity",
+  component: Amenity,
+  args: {
+    icon: "kitchen",
+    label: "Kitchen",
+    variant: "display",
+  },
+  argTypes: {
+    icon: {
+      control: "select",
+      options: ["kitchen", "wifi", "tv", "washer", "ac", "bbq", "forestView", "pets"],
+    },
+    variant: { control: "select", options: ["display", "selectable"] },
+  },
+  parameters: { backgrounds: { default: "black" } },
+} satisfies Meta<typeof Amenity>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Display: Story = {};
+
+export const Selected: Story = {
+  args: { selected: true, variant: "selectable" },
+};
+
+function ControlledAmenity() {
+  const [selected, setSelected] = useState(false);
+  return (
+    <Amenity
+      icon="wifi"
+      label="Wi-Fi"
+      onSelectedChange={setSelected}
+      selected={selected}
+      variant="selectable"
+    />
+  );
+}
+
+export const Controlled: Story = {
+  render: () => <ControlledAmenity />,
+};
+
+export const AllIcons: Story = {
+  render: () => (
+    <View style={styles.row}>
+      {(["kitchen", "wifi", "tv", "washer", "ac", "bbq", "forestView", "pets"] as const).map(
+        (icon) => (
+          <Amenity key={icon} icon={icon} label={icon} />
+        ),
+      )}
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  row: { flexDirection: "row", flexWrap: "wrap", gap: 16 },
+});

package/src/primitives/Amenity/Amenity.tsx

@@ -0,0 +1,178 @@
+import { forwardRef, useMemo, useRef, useState, type ComponentRef } from "react";
+import {
+  Platform,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+  type PressableProps,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from "react-native";
+import { AmenityIcon, type AmenityName } from "../../icons/Amenity";
+import { colors, fonts } from "../../theme";
+import { mergeRefs } from "../../utils/mergeRefs";
+import { useApplyWebClassName } from "../../utils/useApplyWebClassName";
+
+export type AmenityVariant = "display" | "selectable";
+
+export interface AmenityProps extends Omit<
+  PressableProps,
+  "children" | "disabled" | "onPress" | "style"
+> {
+  icon: AmenityName;
+  label: string;
+  variant?: AmenityVariant;
+  selected?: boolean;
+  defaultSelected?: boolean;
+  onSelectedChange?: (selected: boolean) => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  className?: string;
+}
+
+export const Amenity = forwardRef<ComponentRef<typeof View>, AmenityProps>(function Amenity(
+  {
+    icon,
+    label,
+    variant = "display",
+    selected,
+    defaultSelected = false,
+    onSelectedChange,
+    disabled = false,
+    style,
+    labelStyle,
+    className,
+    accessibilityLabel,
+    ...rest
+  },
+  forwardedRef,
+) {
+  const rootRef = useRef<ComponentRef<typeof View>>(null);
+  const setRootRef = useMemo(() => mergeRefs(rootRef, forwardedRef), [forwardedRef]);
+  const isControlled = typeof selected === "boolean";
+  const [uncontrolledSelected, setUncontrolledSelected] = useState(defaultSelected);
+  const isSelected = isControlled ? selected : uncontrolledSelected;
+  const isSelectable = variant === "selectable";
+  const iconColor = isSelectable && isSelected ? colors.primary : colors.white;
+
+  useApplyWebClassName(rootRef, className?.trim() || undefined);
+
+  const content = (
+    <>
+      <View style={styles.iconSlot}>
+        <AmenityIcon color={iconColor} name={icon} />
+      </View>
+      <Text
+        style={[
+          styles.label,
+          isSelectable ? styles.selectableLabel : styles.displayLabel,
+          Platform.OS === "android" ? styles.labelAndroid : null,
+          labelStyle,
+        ]}
+      >
+        {label}
+      </Text>
+    </>
+  );
+
+  if (!isSelectable) {
+    return (
+      <View
+        {...rest}
+        ref={setRootRef}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityRole="text"
+        style={[styles.base, styles.display, style]}
+      >
+        {content}
+      </View>
+    );
+  }
+
+  const handlePress = () => {
+    if (disabled) return;
+    const nextSelected = !isSelected;
+    if (!isControlled) setUncontrolledSelected(nextSelected);
+    onSelectedChange?.(nextSelected);
+  };
+
+  return (
+    <Pressable
+      {...rest}
+      ref={setRootRef}
+      accessibilityLabel={accessibilityLabel ?? label}
+      accessibilityRole="checkbox"
+      accessibilityState={{ checked: isSelected, disabled }}
+      disabled={disabled}
+      onPress={handlePress}
+      style={[
+        styles.base,
+        styles.selectable,
+        isSelected && styles.selected,
+        disabled && styles.disabled,
+        style,
+      ]}
+    >
+      {content}
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  base: {
+    height: 44,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    alignSelf: "flex-start",
+    backgroundColor: colors.grey700,
+  },
+  display: {
+    gap: 8,
+    borderRadius: 39,
+    backgroundColor: colors.grey750,
+  },
+  selectable: {
+    gap: 12,
+    borderWidth: 1,
+    borderColor: "transparent",
+    borderStyle: "solid",
+    borderRadius: 79,
+  },
+  selected: {
+    borderColor: colors.primary,
+  },
+  disabled: {
+    opacity: 0.6,
+  },
+  iconSlot: {
+    width: 20,
+    height: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0,
+  },
+  label: {
+    fontFamily: fonts.sans,
+    color: colors.white,
+  },
+  displayLabel: {
+    fontSize: 14,
+    fontWeight: "500",
+    lineHeight: 14,
+    letterSpacing: 0,
+  },
+  selectableLabel: {
+    fontSize: 12,
+    fontWeight: "700",
+    lineHeight: 13.44,
+    letterSpacing: 0,
+  },
+  labelAndroid: {
+    includeFontPadding: false,
+  },
+});

package/src/primitives/Amenity/index.ts

@@ -0,0 +1,2 @@
+export { Amenity } from "./Amenity";
+export type { AmenityProps, AmenityVariant } from "./Amenity";

package/src/primitives/index.ts

@@ -1,3 +1,6 @@
+export { Amenity } from "./Amenity";
+export type { AmenityProps, AmenityVariant } from "./Amenity";
+
 export { MenuItem } from "./MenuItem";
 export type { MenuItemProps } from "./MenuItem";
 export { FavoritesButton } from "./FavoritesButton";

package/src/theme/colors.test.ts

@@ -22,7 +22,7 @@ describe("design tokens", () => {
     expect(buttonTypography.lg.fontSize).toBe(14);
     expect(buttonTypography.lg.fontWeight).toBe("600");
     expect(segmentedToggleTypography.fontSize).toBe(12);
-    expect(segmentedToggleTypography.lineHeight).toBe(12);
+    expect(segmentedToggleTypography.lineHeight).toBe(14);
   });
 
   it("keeps Input, Select, and Textarea field text aligned", () => {

package/src/theme/typography.ts

@@ -38,12 +38,12 @@ export const statCardTypography = {
   letterSpacing: 0,
 } as const;
 
-/** Segmented toggle label — Medium 12, line-height 100%, letter-spacing 0. */
+/** Segmented toggle label — Medium 12, 14px line-height, letter-spacing 0. */
 export const segmentedToggleTypography = {
   fontFamily: fonts.sans,
   fontSize: 12,
   fontWeight: "500" as const,
-  lineHeight: 12,
+  lineHeight: 14,
   letterSpacing: 0,
 } as const;