@ecohouse/ui 0.1.3 → 0.1.5

package/README.md

@@ -4,11 +4,27 @@ Cross-platform UI component library for EcoHouse. Built with React Native primit
 
 ## Components
 
-| Component | Description                                                                 |
-| --------- | --------------------------------------------------------------------------- |
-| `Button`  | Pill CTA — `primary` / `secondary`, sizes `lg` / `sm`, optional arrow badge |
-| `Input`   | Text field with label, hint, left/right icons, error & disabled states      |
-| `Icon`    | Dynamic icon by name from the registry (`<Icon name="user" />`)             |
+| Component    | Description                                                                   |
+| ------------ | ----------------------------------------------------------------------------- |
+| `Button`     | Pill CTA — `primary` / `secondary`, sizes `lg` / `sm`, optional arrow badge   |
+| `Input`      | Text field with label, hint, left/right icons, error & disabled states        |
+| `Checkbox`   | Square checkbox with optional label, controlled or uncontrolled               |
+| `Toggle`     | Animated on/off switch with optional label                                    |
+| `Select`     | Single/multi-select dropdown with search and keyboard navigation              |
+| `DatePicker` | Single/range calendar dropdown with month navigation and min/max bounds       |
+| `Textarea`   | Multi-line text field, same label/hint/state chrome as `Input`                |
+| `Avatar`     | Logged-in user chip (image/name/email) with an optional account dropdown menu |
+| `Icon`       | Dynamic icon by name from the registry (`<Icon name="user" />`)               |
+
+## Primitives
+
+Small reusable building blocks (Storybook: **Primitives /***):
+
+| Component  | Description                                                             |
+| ---------- | ----------------------------------------------------------------------- |
+| `MenuItem` | Option row (icon + label + action) — used in Avatar menus or standalone |
+
+Full props: [`docs/components.md`](./docs/components.md).
 
 Named icon exports (`UserIcon`, `HomeIcon`, …) are also available. Full icon list: [`docs/icons.md`](./docs/icons.md).
 
@@ -135,6 +151,8 @@ Same API on web and mobile.
 
 ## API
 
+Quick reference for `Button`, `Input`, and `Icon` below. Full API for `Checkbox`, `Toggle`, `Select`, `DatePicker`, `Textarea`, `Avatar`, and `MenuItem` lives in [`docs/components.md`](./docs/components.md).
+
 ### `Button`
 
 Pill CTA — sizes `lg` (44px) / `sm` (32px). Secondary fill uses `colors.grey500`.
@@ -201,14 +219,16 @@ More: [`docs/icons.md`](./docs/icons.md), [`docs/components.md`](./docs/componen
 import { colors, grey, fonts, buttonTypography, inputTypography } from "@ecohouse/ui";
 ```
 
-| Token               | Value           | Use                        |
-| ------------------- | --------------- | -------------------------- |
-| `primary`           | `#B46436`       | Brand / active left icon   |
-| `primaryMuted`      | `#B464360F`     | Input active border        |
-| `red`               | `#A63E3E`       | Error text / icons         |
-| `redMuted`          | `#A63E3E0F`     | Input error border         |
-| `black` / `white`   | `#000` / `#fff` | Surfaces / labels          |
-| `grey0` … `grey950` | Grey scale      | e.g. `grey700` = `#171717` |
+| Token               | Value           | Use                                       |
+| ------------------- | --------------- | ----------------------------------------- |
+| `primary`           | `#B46436`       | Brand / active left icon / open chevron   |
+| `primaryMuted`      | `#B464360F`     | Input active border                       |
+| `primaryHover`      | `#B4643633`     | DatePicker in-range day background        |
+| `red`               | `#A63E3E`       | Error text / icons / `LogOutIcon` default |
+| `redMuted`          | `#A63E3E0F`     | Input error border / subtle danger row    |
+| `redHover`          | `#A63E3E33`     | Danger row hover background               |
+| `black` / `white`   | `#000` / `#fff` | Surfaces / labels                         |
+| `grey0` … `grey950` | Grey scale      | e.g. `grey700` = `#171717`                |
 
 ```tsx
 colors.primary;