@ecohouse/ui 0.1.21 → 0.1.22

package/package.json

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

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;