@ecohouse/ui 0.1.5 → 0.1.6

package/README.md

@@ -7,6 +7,7 @@ Cross-platform UI component library for EcoHouse. Built with React Native primit
 | 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                                    |
@@ -123,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="••••••••"
@@ -151,7 +154,7 @@ 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).
+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`
 
@@ -172,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).
@@ -216,7 +239,14 @@ 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                                       |
@@ -227,6 +257,7 @@ import { colors, grey, fonts, buttonTypography, inputTypography } from "@ecohous
 | `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`                |