@ecohouse/ui 0.1.4 → 0.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -4,11 +4,27 @@ Cross-platform UI component library for EcoHouse. Built with React Native primit
4
4
 
5
5
  ## Components
6
6
 
7
- | Component | Description |
8
- | --------- | --------------------------------------------------------------------------- |
9
- | `Button` | Pill CTA — `primary` / `secondary`, sizes `lg` / `sm`, optional arrow badge |
10
- | `Input` | Text field with label, hint, left/right icons, error & disabled states |
11
- | `Icon` | Dynamic icon by name from the registry (`<Icon name="user" />`) |
7
+ | Component | Description |
8
+ | ------------ | ----------------------------------------------------------------------------- |
9
+ | `Button` | Pill CTA — `primary` / `secondary`, sizes `lg` / `sm`, optional arrow badge |
10
+ | `Input` | Text field with label, hint, left/right icons, error & disabled states |
11
+ | `Checkbox` | Square checkbox with optional label, controlled or uncontrolled |
12
+ | `Toggle` | Animated on/off switch with optional label |
13
+ | `Select` | Single/multi-select dropdown with search and keyboard navigation |
14
+ | `DatePicker` | Single/range calendar dropdown with month navigation and min/max bounds |
15
+ | `Textarea` | Multi-line text field, same label/hint/state chrome as `Input` |
16
+ | `Avatar` | Logged-in user chip (image/name/email) with an optional account dropdown menu |
17
+ | `Icon` | Dynamic icon by name from the registry (`<Icon name="user" />`) |
18
+
19
+ ## Primitives
20
+
21
+ Small reusable building blocks (Storybook: **Primitives /***):
22
+
23
+ | Component | Description |
24
+ | ---------- | ----------------------------------------------------------------------- |
25
+ | `MenuItem` | Option row (icon + label + action) — used in Avatar menus or standalone |
26
+
27
+ Full props: [`docs/components.md`](./docs/components.md).
12
28
 
13
29
  Named icon exports (`UserIcon`, `HomeIcon`, …) are also available. Full icon list: [`docs/icons.md`](./docs/icons.md).
14
30
 
@@ -135,6 +151,8 @@ Same API on web and mobile.
135
151
 
136
152
  ## API
137
153
 
154
+ 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).
155
+
138
156
  ### `Button`
139
157
 
140
158
  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
201
219
  import { colors, grey, fonts, buttonTypography, inputTypography } from "@ecohouse/ui";
202
220
  ```
203
221
 
204
- | Token | Value | Use |
205
- | ------------------- | --------------- | -------------------------- |
206
- | `primary` | `#B46436` | Brand / active left icon |
207
- | `primaryMuted` | `#B464360F` | Input active border |
208
- | `red` | `#A63E3E` | Error text / icons |
209
- | `redMuted` | `#A63E3E0F` | Input error border |
210
- | `black` / `white` | `#000` / `#fff` | Surfaces / labels |
211
- | `grey0` `grey950` | Grey scale | e.g. `grey700` = `#171717` |
222
+ | Token | Value | Use |
223
+ | ------------------- | --------------- | ----------------------------------------- |
224
+ | `primary` | `#B46436` | Brand / active left icon / open chevron |
225
+ | `primaryMuted` | `#B464360F` | Input active border |
226
+ | `primaryHover` | `#B4643633` | DatePicker in-range day background |
227
+ | `red` | `#A63E3E` | Error text / icons / `LogOutIcon` default |
228
+ | `redMuted` | `#A63E3E0F` | Input error border / subtle danger row |
229
+ | `redHover` | `#A63E3E33` | Danger row hover background |
230
+ | `black` / `white` | `#000` / `#fff` | Surfaces / labels |
231
+ | `grey0` … `grey950` | Grey scale | e.g. `grey700` = `#171717` |
212
232
 
213
233
  ```tsx
214
234
  colors.primary;