@retray-dev/ui-kit 1.7.0 → 1.8.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v1.7.0)
+# @retray-dev/ui-kit — Component Reference (v1.8.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:
 
@@ -76,6 +76,11 @@ function MyComponent() {
 
 All 20 tokens are available via `useTheme().colors`.
 
+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 |
@@ -142,7 +147,7 @@ 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'`) |
@@ -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`.
 
@@ -380,29 +386,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 +396,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:**
@@ -493,30 +477,33 @@ All sub-components accept a `style` prop for overrides.
 ```
 
 **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
 
 ---
 
-### Alert
+### AlertBanner
+
+**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.
 
-**Import:** `import { Alert } from '@retray-dev/ui-kit'`
-**When to use:** Inline feedback messages (info, success, warning, error). Not for transient toasts.
+> **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 +519,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 +565,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).
 
@@ -795,6 +783,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 +852,157 @@ 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` | — | Currently selected value |
+| onValueChange | `(value: string \| number) => void` | — | — |
+| 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
+const [pct, setPct] = useState(50)
+
+<ChipGroup
+  options={[
+    { label: '40%', value: 40 },
+    { label: '50%', value: 50 },
+    { label: '100%', value: 100 },
+  ]}
+  value={pct}
+  onValueChange={setPct}
+/>
+```
+
+---
+
+### 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
 

package/dist/index.d.mts

@@ -55,7 +55,7 @@ declare function useTheme(): ThemeContextValue;
 declare const defaultLight: ThemeColors;
 declare const defaultDark: ThemeColors;
 
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
 type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps extends TouchableOpacityProps {
     label: string;
@@ -170,15 +170,15 @@ interface AvatarProps {
 }
 declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.Element;
 
-type AlertVariant = 'default' | 'destructive';
-interface AlertProps {
+type AlertBannerVariant = 'default' | 'destructive' | 'success';
+interface AlertBannerProps {
     title?: string;
     description?: string;
-    variant?: AlertVariant;
+    variant?: AlertBannerVariant;
     icon?: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Alert({ title, description, variant, icon, style }: AlertProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, style }: AlertBannerProps): React.JSX.Element;
 
 interface ProgressProps {
     /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
@@ -194,9 +194,11 @@ interface EmptyStateProps {
     title: string;
     description?: string;
     action?: React.ReactNode;
+    /** `compact` hides description/action and uses tighter spacing and a smaller icon. */
+    size?: 'default' | 'compact';
     style?: ViewStyle;
 }
-declare function EmptyState({ icon, title, description, action, style }: EmptyStateProps): React.JSX.Element;
+declare function EmptyState({ icon, title, description, action, size, style }: EmptyStateProps): React.JSX.Element;
 
 interface TextareaProps extends TextInputProps {
     label?: string;
@@ -401,9 +403,11 @@ interface CurrencyDisplayProps {
     prefix?: string;
     /** When true, shows two decimal places separated by a comma (e.g. `$25.000,00`). Defaults to `false`. */
     showDecimals?: boolean;
+    /** Override the color of the formatted text. Defaults to the `foreground` theme token. */
+    textColor?: string;
     style?: ViewStyle;
 }
-declare function CurrencyDisplay({ value, prefix, showDecimals, style }: CurrencyDisplayProps): React.JSX.Element;
+declare function CurrencyDisplay({ value, prefix, showDecimals, textColor, style }: CurrencyDisplayProps): React.JSX.Element;
 
 interface CurrencyInputLargeProps {
     value?: string;
@@ -424,4 +428,65 @@ interface CurrencyInputLargeProps {
 }
 declare function CurrencyInputLarge({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputLargeProps): React.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ColorScheme, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInputLarge, type CurrencyInputLargeProps, type CurrencyInputProps, EmptyState, type EmptyStateProps, Input, type InputProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };
+interface ListItemProps {
+    icon?: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    trailing?: string | React.ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+declare function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }: ListItemProps): React.JSX.Element;
+
+interface ChipProps {
+    label: string;
+    selected?: boolean;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+interface ChipOption {
+    label: string;
+    value: string | number;
+}
+interface ChipGroupProps {
+    options: ChipOption[];
+    value?: string | number;
+    onValueChange?: (value: string | number) => void;
+    style?: ViewStyle;
+}
+declare function Chip({ label, selected, onPress, style }: ChipProps): React.JSX.Element;
+declare function ChipGroup({ options, value, onValueChange, style }: ChipGroupProps): React.JSX.Element;
+
+interface ConfirmDialogProps {
+    visible: boolean;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmVariant?: 'primary' | 'destructive';
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+
+interface LabelValueProps {
+    label: string;
+    value: string | React.ReactNode;
+    style?: ViewStyle;
+}
+declare function LabelValue({ label, value, style }: LabelValueProps): React.JSX.Element;
+
+interface MonthPickerValue {
+    /** Month number 1–12 */
+    month: number;
+    year: number;
+}
+interface MonthPickerProps {
+    value: MonthPickerValue;
+    onChange: (value: MonthPickerValue) => void;
+    style?: ViewStyle;
+}
+declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInputLarge, type CurrencyInputLargeProps, type CurrencyInputProps, EmptyState, type EmptyStateProps, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };

package/dist/index.d.ts

@@ -55,7 +55,7 @@ declare function useTheme(): ThemeContextValue;
 declare const defaultLight: ThemeColors;
 declare const defaultDark: ThemeColors;
 
-type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost';
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
 type ButtonSize = 'sm' | 'md' | 'lg';
 interface ButtonProps extends TouchableOpacityProps {
     label: string;
@@ -170,15 +170,15 @@ interface AvatarProps {
 }
 declare function Avatar({ src, fallback, size, style }: AvatarProps): React.JSX.Element;
 
-type AlertVariant = 'default' | 'destructive';
-interface AlertProps {
+type AlertBannerVariant = 'default' | 'destructive' | 'success';
+interface AlertBannerProps {
     title?: string;
     description?: string;
-    variant?: AlertVariant;
+    variant?: AlertBannerVariant;
     icon?: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Alert({ title, description, variant, icon, style }: AlertProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, style }: AlertBannerProps): React.JSX.Element;
 
 interface ProgressProps {
     /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
@@ -194,9 +194,11 @@ interface EmptyStateProps {
     title: string;
     description?: string;
     action?: React.ReactNode;
+    /** `compact` hides description/action and uses tighter spacing and a smaller icon. */
+    size?: 'default' | 'compact';
     style?: ViewStyle;
 }
-declare function EmptyState({ icon, title, description, action, style }: EmptyStateProps): React.JSX.Element;
+declare function EmptyState({ icon, title, description, action, size, style }: EmptyStateProps): React.JSX.Element;
 
 interface TextareaProps extends TextInputProps {
     label?: string;
@@ -401,9 +403,11 @@ interface CurrencyDisplayProps {
     prefix?: string;
     /** When true, shows two decimal places separated by a comma (e.g. `$25.000,00`). Defaults to `false`. */
     showDecimals?: boolean;
+    /** Override the color of the formatted text. Defaults to the `foreground` theme token. */
+    textColor?: string;
     style?: ViewStyle;
 }
-declare function CurrencyDisplay({ value, prefix, showDecimals, style }: CurrencyDisplayProps): React.JSX.Element;
+declare function CurrencyDisplay({ value, prefix, showDecimals, textColor, style }: CurrencyDisplayProps): React.JSX.Element;
 
 interface CurrencyInputLargeProps {
     value?: string;
@@ -424,4 +428,65 @@ interface CurrencyInputLargeProps {
 }
 declare function CurrencyInputLarge({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputLargeProps): React.JSX.Element;
 
-export { Accordion, type AccordionItem, type AccordionProps, Alert, type AlertProps, type AlertVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, type ColorScheme, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInputLarge, type CurrencyInputLargeProps, type CurrencyInputProps, EmptyState, type EmptyStateProps, Input, type InputProps, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };
+interface ListItemProps {
+    icon?: React.ReactNode;
+    title: string;
+    subtitle?: string;
+    trailing?: string | React.ReactNode;
+    onPress?: () => void;
+    disabled?: boolean;
+    style?: ViewStyle;
+}
+declare function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }: ListItemProps): React.JSX.Element;
+
+interface ChipProps {
+    label: string;
+    selected?: boolean;
+    onPress?: () => void;
+    style?: ViewStyle;
+}
+interface ChipOption {
+    label: string;
+    value: string | number;
+}
+interface ChipGroupProps {
+    options: ChipOption[];
+    value?: string | number;
+    onValueChange?: (value: string | number) => void;
+    style?: ViewStyle;
+}
+declare function Chip({ label, selected, onPress, style }: ChipProps): React.JSX.Element;
+declare function ChipGroup({ options, value, onValueChange, style }: ChipGroupProps): React.JSX.Element;
+
+interface ConfirmDialogProps {
+    visible: boolean;
+    title: string;
+    description?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    confirmVariant?: 'primary' | 'destructive';
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+declare function ConfirmDialog({ visible, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;
+
+interface LabelValueProps {
+    label: string;
+    value: string | React.ReactNode;
+    style?: ViewStyle;
+}
+declare function LabelValue({ label, value, style }: LabelValueProps): React.JSX.Element;
+
+interface MonthPickerValue {
+    /** Month number 1–12 */
+    month: number;
+    year: number;
+}
+interface MonthPickerProps {
+    value: MonthPickerValue;
+    onChange: (value: MonthPickerValue) => void;
+    style?: ViewStyle;
+}
+declare function MonthPicker({ value, onChange, style }: MonthPickerProps): React.JSX.Element;
+
+export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, type CheckboxProps, Chip, ChipGroup, type ChipGroupProps, type ChipOption, type ChipProps, type ColorScheme, ConfirmDialog, type ConfirmDialogProps, CurrencyDisplay, type CurrencyDisplayProps, CurrencyInput, CurrencyInputLarge, type CurrencyInputLargeProps, type CurrencyInputProps, EmptyState, type EmptyStateProps, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, Spinner, type SpinnerProps, type SpinnerSize, Switch, type SwitchProps, type TabItem, Tabs, TabsContent, type TabsContentProps, type TabsProps, Text, type TextProps, type TextVariant, Textarea, type TextareaProps, type Theme, type ThemeColors, ThemeProvider, type ThemeProviderProps, type ToastItem, ToastProvider, type ToastProviderProps, type ToastVariant, Toggle, type ToggleProps, type ToggleSize, type ToggleVariant, defaultDark, defaultLight, useTheme, useToast };