@retray-dev/ui-kit 1.7.0 → 2.3.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v1.7.0)
+# @retray-dev/ui-kit — Component Reference (v2.1.0)
 
 This file is the AI reference for this package. It is shipped inside the npm package so consuming projects can import it into their `CLAUDE.md` with:
 
@@ -74,29 +74,34 @@ function MyComponent() {
 
 ## Theme Tokens
 
-All 20 tokens are available via `useTheme().colors`.
+All 20 tokens are available via `useTheme().colors` and are applied exactly as provided — there is no automatic color derivation or forced contrast applied by the library. Consumers may pass partial overrides for `light` and/or `dark` and the values are used as-is.
+
+The `ThemeColors` type (and `Theme`, `ColorScheme`) are exported directly from the package:
+```ts
+import type { ThemeColors } from '@retray-dev/ui-kit'
+```
 
 | Token | Light | Dark | Semantic Role |
 |-------|-------|------|---------------|
 | `background` | `#ffffff` | `#171717` | Screen / page background |
 | `foreground` | `#171717` | `#fafafa` | Primary text color |
-| `card` | `#ffffff` | `#1f1f1f` | Card / surface background |
+| `card` | `#ffffff` | `#222222` | Card / surface background |
 | `cardForeground` | `#171717` | `#fafafa` | Text on cards |
 | `primary` | `#1a1a1a` | `#fafafa` | Primary action (buttons, selected states) |
-| `primaryForeground` | `#fafafa` | `#1a1a1a` | Text/icon on primary background |
-| `secondary` | `#f5f5f5` | `#2a2a2a` | Secondary surfaces |
-| `secondaryForeground` | `#1a1a1a` | `#fafafa` | Text on secondary |
-| `muted` | `#f5f5f5` | `#2a2a2a` | Muted backgrounds, skeleton fills, track fills |
-| `mutedForeground` | `#646464` | `#a3a3a3` | Placeholder text, helper text, captions (WCAG AA ≥4.5:1) |
-| `accent` | `#f5f5f5` | `#2a2a2a` | Hover / pressed state fills |
-| `accentForeground` | `#1a1a1a` | `#fafafa` | Text on accent |
+| `primaryForeground` | `#ffffff` | `#1a1a1a` | Text/icon on primary background |
+| `secondary` | `#f1f1f1` | `#323232` | Secondary surfaces |
+| `secondaryForeground` | `#171717` | `#fafafa` | Text on secondary |
+| `muted` | `#f1f1f1` | `#323232` | Muted backgrounds, skeleton fills, track fills |
+| `mutedForeground` | `#a2a2a2` | `#888888` | Placeholder text, helper text, captions |
+| `accent` | `#e4e4e4` | `#323232` | Hover / pressed state fills |
+| `accentForeground` | `#171717` | `#fafafa` | Text on accent |
 | `destructive` | `#ef4444` | `#dc2626` | Error / danger / delete actions |
-| `destructiveForeground` | `#fafafa` | `#fafafa` | Text on destructive |
+| `destructiveForeground` | `#1a1a1a` | `#1a1a1a` | Text on destructive |
 | `border` | `#e5e5e5` | `#2a2a2a` | Borders and dividers |
 | `input` | `#e5e5e5` | `#2a2a2a` | Input field border color |
-| `ring` | `#a3a3a3` | `#d4d4d4` | Focus ring color |
+| `ring` | `#1a1a1a` | `#fafafa` | Optional focus ring token (components may use `primary` by default) |
 | `success` | `#16a34a` | `#22c55e` | Success state (Toast success variant) |
-| `successForeground` | `#ffffff` | `#ffffff` | Text on success background |
+| `successForeground` | `#1a1a1a` | `#1a1a1a` | Text on success background |
 
 ---
 
@@ -142,11 +147,11 @@ All 20 tokens are available via `useTheme().colors`.
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | label | `string` | required | Button text |
-| variant | `'primary' \| 'secondary' \| 'outline' \| 'ghost'` | `'primary'` | Visual style |
+| variant | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'` | `'primary'` | Visual style |
 | size | `'sm' \| 'md' \| 'lg'` | `'md'` | — |
 | loading | `boolean` | `false` | Replaces label with a spinner and forces disabled state |
 | fullWidth | `boolean` | `false` | Stretches to container width (`alignSelf: 'stretch'`) |
-| disabled | `boolean` | — | Reduces opacity to 0.45 |
+| disabled | `boolean` | — | Reduces opacity to 0.5 |
 | icon | `React.ReactNode` | — | Icon rendered alongside the label |
 | iconPosition | `'left' \| 'right'` | `'left'` | Side the icon appears on |
 
@@ -155,6 +160,7 @@ All 20 tokens are available via `useTheme().colors`.
 - `secondary`: filled with `secondary` token — less prominent actions
 - `outline`: transparent with `border` — alternative without fill
 - `ghost`: fully transparent — in-context or low-emphasis actions
+- `destructive`: filled with `destructive` token — irreversible or dangerous actions
 
 **Animations:** Scale springs to 0.97 on `onPressIn`, back to 1.0 on `onPressOut`.
 
@@ -180,14 +186,19 @@ All 20 tokens are available via `useTheme().colors`.
 | label | `string` | — | Label above the input |
 | error | `string` | — | Shows error text below; turns border red (`destructive` token) |
 | hint | `string` | — | Helper text below (hidden when `error` is set) |
+| prefix | `string \| ReactNode` | — | Content rendered before the input field (e.g., `"$"` or an icon) |
+| suffix | `string \| ReactNode` | — | Content rendered after the input field (e.g., `"kg"` or a button) |
+| type | `'text' \| 'password'` | `'text'` | When `'password'`, shows a visibility toggle button in the suffix slot |
 
 **Border colors:** `destructive` when `error` is set, `ring` when focused, `border` otherwise.
 
 **Example:**
 ```tsx
 <Input label="Email" placeholder="you@example.com" keyboardType="email-address" />
-<Input label="Password" secureTextEntry error="Incorrect password" />
+<Input label="Password" type="password" error="Incorrect password" />
 <Input label="Username" hint="Must be at least 4 characters" />
+<Input label="Amount" prefix="$" placeholder="0.00" keyboardType="numeric" />
+<Input label="Weight" suffix="kg" placeholder="0" />
 ```
 
 ---
@@ -204,6 +215,7 @@ All 20 tokens are available via `useTheme().colors`.
 | onChangeValue | `(raw: number) => void` | — | Called with the parsed number (no separators, no prefix) |
 | prefix | `string` | `'$'` | Symbol prepended to the formatted value |
 | thousandsSeparator | `'.' \| ','` | `'.'` | Character used to separate groups of three digits |
+| size | `'default' \| 'large'` | `'default'` | `'large'` uses 36px font size (previously `CurrencyInputLarge`) |
 | label | `string` | — | Label above the input |
 | error | `string` | — | Error text below; turns border red |
 | hint | `string` | — | Helper text below (hidden when `error` is set) |
@@ -264,16 +276,20 @@ const [amount, setAmount] = useState(0)
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| label | `string` | required | — |
+| label | `string` | — | Badge text — can be omitted if using `children` |
+| children | `ReactNode` | — | Alternative to `label` for custom content |
 | variant | `'default' \| 'secondary' \| 'destructive' \| 'outline'` | `'default'` | — |
+| size | `'sm' \| 'md' \| 'lg'` | `'md'` | Controls padding and font size |
+| icon | `ReactNode` | — | Icon rendered before the label/children |
 | style | `ViewStyle` | — | — |
 
 **Example:**
 ```tsx
 <Badge label="New" />
 <Badge label="Error" variant="destructive" />
-<Badge label="Draft" variant="secondary" />
+<Badge label="Draft" variant="secondary" size="sm" />
 <Badge label="Beta" variant="outline" />
+<Badge icon={<CheckIcon size={12} />} size="sm">Verified</Badge>
 ```
 
 ---
@@ -380,29 +396,6 @@ const [amount, setAmount] = useState(0)
 
 ---
 
-### Card
-
-**Import:** `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@retray-dev/ui-kit'`
-**When to use:** Grouped content with a surface background, border, and shadow.
-
-All sub-components accept a `style` prop for overrides.
-
-**Example:**
-```tsx
-<Card>
-  <CardHeader>
-    <CardTitle>Account</CardTitle>
-    <CardDescription>Manage your profile settings</CardDescription>
-  </CardHeader>
-  <CardContent>
-    <Input label="Name" />
-  </CardContent>
-  <CardFooter>
-    <Button label="Save" fullWidth />
-  </CardFooter>
-
----
-
 ### CurrencyDisplay
 
 **Import:** `import { CurrencyDisplay } from '@retray-dev/ui-kit'`
@@ -413,6 +406,7 @@ All sub-components accept a `style` prop for overrides.
 | value | `number \| string` | required | Numeric value to display |
 | prefix | `string` | `'$'` | Symbol prepended to the formatted value |
 | showDecimals | `boolean` | `false` | When `true`, shows two decimal places separated by a comma (e.g. `$25.000,00`) |
+| textColor | `string` | — | Override the color of the formatted text. Defaults to the `foreground` token |
 | style | `ViewStyle` | — | Style override for outer container |
 
 **Example:**
@@ -474,11 +468,20 @@ const [amount, setAmount] = useState(0)
 **Import:** `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@retray-dev/ui-kit'`
 **When to use:** Grouped content with a surface background, border, and shadow.
 
-All sub-components accept a `style` prop for overrides.
+**`Card` Props:**
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| variant | `'elevated' \| 'outlined' \| 'filled'` | `'elevated'` | `elevated`: shadow + border; `outlined`: border only; `filled`: background fill, no border |
+| onPress | `() => void` | — | Makes the card pressable with scale animation + haptics |
+| children | `ReactNode` | — | — |
+| style | `ViewStyle` | — | — |
+
+All sub-components (`CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `CardFooter`) accept a `style` prop for overrides.
 
 **Example:**
 ```tsx
-<Card>
+<Card variant="elevated">
   <CardHeader>
     <CardTitle>Account</CardTitle>
     <CardDescription>Manage your profile settings</CardDescription>
@@ -490,33 +493,44 @@ All sub-components accept a `style` prop for overrides.
     <Button label="Save" fullWidth />
   </CardFooter>
 </Card>
+
+// Pressable card
+<Card variant="outlined" onPress={() => navigate('detail')}>
+  <CardContent>
+    <Text>Tap me</Text>
+  </CardContent>
+</Card>
 ```
 
 **Notes:**
-- `CardHeader` and `CardContent` have `padding: 24`
+- `CardHeader` and `CardContent` have `padding: 24`. Override via the `style` prop: `<CardContent style={{ padding: 16 }}>`
 - `CardFooter` has `paddingTop: 0` so it connects naturally to `CardContent`
 - `CardTitle`: 18px / 600 weight, `cardForeground` color
 - `CardDescription`: 14px, `mutedForeground` color
+- Press animation scales to 0.98 via `Animated.spring` when `onPress` is provided
 
 ---
 
-### Alert
+### AlertBanner
 
-**Import:** `import { Alert } from '@retray-dev/ui-kit'`
-**When to use:** Inline feedback messages (info, success, warning, error). Not for transient toasts.
+**Import:** `import { AlertBanner } from '@retray-dev/ui-kit'`
+**When to use:** Inline feedback messages (info, success, error). Not for transient toasts — use `Toast` for ephemeral feedback.
+
+> **Note:** Named `AlertBanner` (not `Alert`) to avoid collision with React Native's built-in `Alert` module.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | title | `string` | — | Bold heading |
 | description | `string` | — | Detail text |
-| variant | `'default' \| 'destructive'` | `'default'` | `destructive` turns border and text to `destructive` token |
-| icon | `ReactNode` | — | Icon placed to the left of the text content |
+| variant | `'default' \| 'destructive' \| 'success'` | `'default'` | Controls border/text color |
+| icon | `ReactNode` | — | Icon placed to the left of the text content. Defaults to a variant-appropriate symbol (`ℹ`, `⚠`, `✓`) |
 | style | `ViewStyle` | — | — |
 
 **Example:**
 ```tsx
-<Alert title="Success" description="Your profile has been updated." />
-<Alert variant="destructive" title="Error" description="Failed to save. Try again." />
+<AlertBanner title="Info" description="Your session will expire in 5 minutes." />
+<AlertBanner variant="destructive" title="Error" description="Failed to save. Try again." />
+<AlertBanner variant="success" title="Done" description="Your changes have been saved." />
 ```
 
 ---
@@ -532,6 +546,7 @@ All sub-components accept a `style` prop for overrides.
 | description | `string` | — | — |
 | icon | `ReactNode` | — | Shown in a 48×48 muted square above the text |
 | action | `ReactNode` | — | Usually a `Button`, placed below the text |
+| size | `'default' \| 'compact'` | `'default'` | `compact` hides description/action, uses a 36×36 icon, smaller title (15px), and tighter spacing |
 | style | `ViewStyle` | — | — |
 
 **Example:**
@@ -577,7 +592,7 @@ const [accepted, setAccepted] = useState(false)
 | disabled | `boolean` | — | Reduces opacity to 0.45 |
 | style | `ViewStyle` | — | — |
 
-**Dimensions:** Track 56×32pt, Thumb 24×24pt with 4pt offset from edges (`top: 4, left: 4`). Thumb uses `position: 'absolute'` inside the track.
+**Dimensions:** Track 60×36pt, Thumb 28×28pt with 4pt offset from edges (`top: 4, left: 4`). Thumb uses `position: 'absolute'` inside the track.
 
 **Animation:** Thumb translates via spring (bounciness: 4); track color transitions via opacity timing (150ms).
 
@@ -650,7 +665,7 @@ const [accepted, setAccepted] = useState(false)
 ### Select
 
 **Import:** `import { Select } from '@retray-dev/ui-kit'`
-**When to use:** Dropdown picker. Tapping the trigger opens a modal with a scrollable list.
+**When to use:** Dropdown picker. Uses the native system picker UI on each platform — wheel modal on iOS (confirm with "Done"), spinner dialog on Android, native `<select>` on web (full keyboard support). Requires `@react-native-picker/picker` installed in the consuming app.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
@@ -690,13 +705,27 @@ const [accepted, setAccepted] = useState(false)
 | onValueChange | `(value: number) => void` | — | Fires while dragging |
 | onSlidingComplete | `(value: number) => void` | — | Fires on finger release |
 | disabled | `boolean` | — | — |
+| label | `string` | — | Label text displayed above the slider |
+| showValue | `boolean` | `false` | When `true`, displays the current value at the top right |
+| formatValue | `(value: number) => string` | — | Custom formatter for the displayed value |
+| accessibilityLabel | `string` | — | Accessibility label for screen readers |
 | style | `ViewStyle` | — | — |
 
-**Dimensions:** Container height=32pt, track height=6pt, thumb 28×28pt. Uses `PanResponder` internally.
+**Notes:** Uses `@react-native-community/slider` natively — theming applied via `minimumTrackTintColor` (primary), `maximumTrackTintColor` (muted), `thumbTintColor` (primary). Requires `@react-native-community/slider` installed in the consuming app.
 
 **Example:**
 ```tsx
 <Slider value={volume} minimumValue={0} maximumValue={100} step={1} onValueChange={setVolume} />
+<Slider 
+  label="Volume" 
+  showValue 
+  value={volume} 
+  minimumValue={0} 
+  maximumValue={100} 
+  step={5}
+  formatValue={(v) => `${v}%`}
+  onValueChange={setVolume} 
+/>
 ```
 
 ---
@@ -795,6 +824,11 @@ pnpm add @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handl
 ```
 Add `react-native-worklets/plugin` (not `react-native-reanimated/plugin`) to your `babel.config.js` plugins.
 
+> **Important — Expo managed workflow:** Expo's install tool may downgrade `@gorhom/bottom-sheet` to an incompatible version (v4). Pin it in `app.json` to prevent this:
+> ```json
+> { "expo": { "install": { "exclude": ["@gorhom/bottom-sheet"] } } }
+> ```
+
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
 | open | `boolean` | required | `true` presents the sheet, `false` dismisses it |
@@ -859,3 +893,173 @@ function MyComponent() {
 - Entrance: `withTiming(120ms, Easing.out(Easing.exp))` slide-down + opacity fade — fast, sharp feel
 - Exit: `withTiming(200ms)` slide-up + opacity fade
 - Swipe left or right to dismiss early (threshold: 80px or 800 pt/s velocity)
+
+---
+
+### ListItem
+
+**Import:** `import { ListItem } from '@retray-dev/ui-kit'`
+**When to use:** Rows in a list or menu. Composes icon, title, subtitle, and trailing content in a standard horizontal layout.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| title | `string` | required | Primary label |
+| subtitle | `string` | — | Secondary label below the title |
+| icon | `ReactNode` | — | Node rendered to the left of the text content |
+| trailing | `string \| ReactNode` | — | Content on the right edge. Strings are styled as muted caption |
+| onPress | `() => void` | — | Makes the row pressable. Scale animation + haptics are only active when provided |
+| disabled | `boolean` | — | Reduces opacity to 0.45 |
+| style | `ViewStyle` | — | — |
+
+**Example:**
+```tsx
+<ListItem
+  icon={<Ionicons name="receipt-outline" size={18} />}
+  title="Mercado"
+  subtitle="12 mar 2025"
+  trailing="$45.000"
+  onPress={() => navigate('detail')}
+/>
+
+// Non-interactive row
+<ListItem title="Account number" trailing="**** 4321" />
+```
+
+---
+
+### Chip / ChipGroup
+
+**Import:** `import { Chip, ChipGroup } from '@retray-dev/ui-kit'`
+**When to use:** Filter pills, single-select options displayed inline. Use `ChipGroup` for managed single-selection; use `Chip` standalone for custom logic.
+
+**`Chip` Props:**
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| label | `string` | required | — |
+| selected | `boolean` | `false` | Controls fill color |
+| onPress | `() => void` | — | — |
+| style | `ViewStyle` | — | — |
+
+**`ChipGroup` Props:**
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| options | `ChipOption[]` | required | Each: `{ label: string, value: string \| number }` |
+| value | `string \| number \| (string \| number)[]` | — | Currently selected value (single mode) or array of selected values (multi mode) |
+| onValueChange | `(value: string \| number \| (string \| number)[]) => void` | — | — |
+| multiSelect | `boolean` | `false` | When `true`, allows multiple chips to be selected simultaneously |
+| style | `ViewStyle` | — | Applied to the wrapping row |
+
+**Animation:** Background, text, and border colors animate via `Animated.timing` (150ms) between unselected (`secondary`/`border`/`foreground`) and selected (`primary`/`primary`/`primaryForeground`) states.
+
+**Example:**
+```tsx
+// Single select
+const [pct, setPct] = useState(50)
+
+<ChipGroup
+  options={[
+    { label: '40%', value: 40 },
+    { label: '50%', value: 50 },
+    { label: '100%', value: 100 },
+  ]}
+  value={pct}
+  onValueChange={setPct}
+/>
+
+// Multi select
+const [categories, setCategories] = useState<number[]>([1, 3])
+
+<ChipGroup
+  multiSelect
+  options={[
+    { label: 'Food', value: 1 },
+    { label: 'Transport', value: 2 },
+    { label: 'Entertainment', value: 3 },
+  ]}
+  value={categories}
+  onValueChange={setCategories}
+/>
+```
+
+---
+
+### ConfirmDialog
+
+**Import:** `import { ConfirmDialog } from '@retray-dev/ui-kit'`
+**When to use:** Confirmation prompts before irreversible or destructive actions (delete, send, discard).
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| visible | `boolean` | required | Controls modal visibility |
+| title | `string` | required | Dialog heading |
+| description | `string` | — | Supporting text below the title |
+| confirmLabel | `string` | `'Confirm'` | Label for the confirm button |
+| cancelLabel | `string` | `'Cancel'` | Label for the cancel button |
+| confirmVariant | `'primary' \| 'destructive'` | `'primary'` | Button variant for the confirm action |
+| onConfirm | `() => void` | required | Called when confirm is tapped |
+| onCancel | `() => void` | required | Called when cancel is tapped or backdrop is pressed |
+
+**Notes:**
+- Uses React Native `Modal` with `animationType="fade"` — no bottom-sheet dependency.
+- Tapping outside the dialog card calls `onCancel`.
+- The cancel and confirm buttons are full-width stacked vertically.
+
+**Example:**
+```tsx
+<ConfirmDialog
+  visible={showDelete}
+  title="¿Eliminar gasto?"
+  description="$45.000 · Mercado · 12 mar"
+  confirmLabel="Eliminar"
+  confirmVariant="destructive"
+  onConfirm={handleDelete}
+  onCancel={() => setShowDelete(false)}
+/>
+```
+
+---
+
+### LabelValue
+
+**Import:** `import { LabelValue } from '@retray-dev/ui-kit'`
+**When to use:** Key-value display rows in receipts, summaries, and detail screens. Label on the left (muted caption), value on the right (medium weight).
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| label | `string` | required | Caption text on the left |
+| value | `string \| ReactNode` | required | Value on the right. Strings are auto-styled; pass `ReactNode` for custom rendering |
+| style | `ViewStyle` | — | — |
+
+**Example:**
+```tsx
+<LabelValue label="Fecha" value="12 mar 2025" />
+<LabelValue label="Categoría" value="Mercado" />
+<LabelValue label="Estado" value={<Badge label="Pendiente" variant="secondary" />} />
+```
+
+---
+
+### MonthPicker
+
+**Import:** `import { MonthPicker } from '@retray-dev/ui-kit'`
+**When to use:** Compact month/year selector with previous/next navigation. Common in finance apps for filtering by period.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| value | `MonthPickerValue` | required | `{ month: number, year: number }` — `month` is 1–12 |
+| onChange | `(value: MonthPickerValue) => void` | required | Called on each navigation step |
+| style | `ViewStyle` | — | — |
+
+**`MonthPickerValue`:** `{ month: number, year: number }` — month is 1-indexed (January = 1).
+
+**Navigation:** Arrows wrap correctly at year boundaries (December → January increments the year; January → December decrements it). The component is fully controlled — no internal state.
+
+**Example:**
+```tsx
+const [period, setPeriod] = useState({ month: new Date().getMonth() + 1, year: new Date().getFullYear() })
+
+<MonthPicker value={period} onChange={setPeriod} />
+// Displays: "April 2026"
+```

package/README.md

@@ -2,8 +2,8 @@
 
 A personal React Native / Expo UI component library with a built-in design system, dark mode support, haptic feedback, and smooth animations.
 
-- 26 components across 5 categories
-- Light/dark theme with 18 color tokens and full customization
+- 32 components across 6 categories
+- Light/dark theme with 20 color tokens and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
 - Built with TypeScript — full type declarations included
@@ -93,18 +93,19 @@ import { useTheme } from '@retray-dev/ui-kit'
 const { colors, colorScheme } = useTheme()
 ```
 
-**Available tokens:** `background`, `foreground`, `card`, `cardForeground`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `muted`, `mutedForeground`, `accent`, `accentForeground`, `destructive`, `destructiveForeground`, `border`, `input`, `ring`
+**Available tokens:** `background`, `foreground`, `card`, `cardForeground`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `muted`, `mutedForeground`, `accent`, `accentForeground`, `destructive`, `destructiveForeground`, `border`, `input`, `ring`, `success`, `successForeground`
 
 ## Components
 
 | Category    | Components                                                                                      |
 | ----------- | ----------------------------------------------------------------------------------------------- |
-| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`                       |
+| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
 | Surfaces    | `Card`, `Alert`, `EmptyState`                                                                   |
 | Form        | `Button`, `Input`, `CurrencyInput`, `CurrencyInputLarge`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
 | Composition | `Tabs`, `Accordion`                                                                             |
-| Overlays    | `Sheet`                                                                                         |
+| Overlays    | `Sheet`, `ConfirmDialog`                                                                        |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |
+| Data        | `ListItem`, `Chip` / `ChipGroup`, `LabelValue`, `MonthPicker`                                  |
 
 ### Quick examples