@ecohouse/ui 0.1.4 → 0.1.6

package/README.md

@@ -4,11 +4,28 @@ 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   |
+| `Badge`      | Pill label chip — `default` / `transparent`, optional leading icon            |
+| `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).
 
@@ -107,13 +124,15 @@ import "@ecohouse/ui/web/typography.css";
 ## Usage
 
 ```tsx
-import { Button, Input, Icon, UserIcon, ShowIcon, colors } from "@ecohouse/ui";
+import { Button, Badge, Input, Icon, HomeIcon, UserIcon, ShowIcon, colors } from "@ecohouse/ui";
 
 export function Example() {
   return (
     <>
       <Button title="Continue" variant="primary" size="lg" showIcon onPress={() => {}} />
 
+      <Badge label="Home" icon={HomeIcon} variant="transparent" />
+
       <Input
         label="Password"
         placeholder="••••••••"
@@ -135,6 +154,8 @@ Same API on web and mobile.
 
 ## API
 
+Quick reference for `Button`, `Badge`, `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`.
@@ -154,6 +175,26 @@ Pill CTA — sizes `lg` (44px) / `sm` (32px). Secondary fill uses `colors.grey50
 <Button title="Cancel" variant="secondary" size="sm" onPress={() => {}} />
 ```
 
+### `Badge`
+
+Pill label chip — `default` / `transparent`. Optional leading `HomeIcon` (color follows the variant).
+
+| Prop      | Type                         | Default     | Description                |
+| --------- | ---------------------------- | ----------- | -------------------------- |
+| `label`   | `string`                     | required    | Chip text                  |
+| `variant` | `"default" \| "transparent"` | `"default"` | Fill / border / icon color |
+| `icon`    | `IconComponent`              | —           | Optional leading icon      |
+
+| Variant       | Fill      | Border          | Icon color |
+| ------------- | --------- | --------------- | ---------- |
+| `default`     | `grey750` | none            | white      |
+| `transparent` | white 5%  | 1px `#FFFFFF0D` | primary    |
+
+```tsx
+<Badge label="Label" />
+<Badge label="Label" icon={HomeIcon} variant="transparent" />
+```
+
 ### `Input`
 
 Extends React Native `TextInput` props. Default size `lg` (44px pill, radius 60).
@@ -198,17 +239,27 @@ More: [`docs/icons.md`](./docs/icons.md), [`docs/components.md`](./docs/componen
 ## Design tokens
 
 ```tsx
-import { colors, grey, fonts, buttonTypography, inputTypography } from "@ecohouse/ui";
+import {
+  colors,
+  grey,
+  fonts,
+  badgeTypography,
+  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               |
+| `green`             | `#34A853`       | Success / positive                        |
+| `black` / `white`   | `#000` / `#fff` | Surfaces / labels                         |
+| `grey0` … `grey950` | Grey scale      | e.g. `grey700` = `#171717`                |
 
 ```tsx
 colors.primary;