@retray-dev/ui-kit 1.6.0 → 1.8.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v1.6.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`.
 
@@ -216,6 +222,7 @@ All 20 tokens are available via `useTheme().colors`.
 const [display, setDisplay] = useState('')
 const [amount, setAmount] = useState(0)
 
+// Default: dot as thousands separator → "$1.234.567"
 <CurrencyInput
   label="Amount"
   value={display}
@@ -224,10 +231,10 @@ const [amount, setAmount] = useState(0)
   hint={`Parsed: ${amount}`}
 />
 
-// European format (dot as thousands separator)
+// Comma as thousands separator → "$1,234,567"
 <CurrencyInput
-  prefix="€"
-  thousandsSeparator="."
+  prefix="$"
+  thousandsSeparator=","
   value={display}
   onChangeText={setDisplay}
   onChangeValue={setAmount}
@@ -379,6 +386,73 @@ const [amount, setAmount] = useState(0)
 
 ---
 
+### CurrencyDisplay
+
+**Import:** `import { CurrencyDisplay } from '@retray-dev/ui-kit'`
+**When to use:** Prominent display of monetary values (account balances, totals). Large, attention-grabbing typographic treatment with dot-separated thousands and optional comma-decimal.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| 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:**
+```tsx
+<CurrencyDisplay value={25000} />
+// → $25.000
+
+<CurrencyDisplay value={25000000.5} showDecimals />
+// → $25.000.000,50
+
+<CurrencyDisplay value={1500} prefix="€" />
+// → €1.500
+```
+
+**Notes:**
+- Uses dot (`.`) as thousands separator and comma (`,`) as decimal separator — Latin American / European format.
+- Intended as a display-only component (not editable).
+- `allowFontScaling={true}` is set on the inner `Text`.
+
+---
+
+### CurrencyInputLarge
+
+**Import:** `import { CurrencyInputLarge } from '@retray-dev/ui-kit'`
+**When to use:** Large, form-style monetary input for prominent entry screens (payments, transfers). Same formatting behavior as `CurrencyInput` but with 36px font size.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| value | `string` | — | Controlled display value (includes prefix, e.g. `'$1.234'`) |
+| onChangeText | `(formatted: string) => void` | — | Called with the formatted display string |
+| onChangeValue | `(raw: number) => void` | — | Called with the parsed number (no separators, no prefix) |
+| label | `string` | — | Label above the input |
+| prefix | `string` | `'$'` | Currency prefix |
+| thousandsSeparator | `'.' \| ','` | `'.'` | Separator used to format groups of three digits |
+| error | `string` | — | Error text below; turns border red |
+| hint | `string` | — | Helper text below (hidden when `error` is set) |
+| placeholder | `string` | `'$0'` | Defaults to `prefix + '0'` |
+| editable | `boolean` | — | Pass `false` to disable editing |
+| containerStyle | `ViewStyle` | — | Style for the outer container |
+
+**Example:**
+```tsx
+const [display, setDisplay] = useState('')
+const [amount, setAmount] = useState(0)
+
+<CurrencyInputLarge
+  label="Amount"
+  value={display}
+  onChangeText={setDisplay}
+  onChangeValue={setAmount}
+/>
+// Typing "25000" produces "$25.000"
+```
+
+---
+
 ### Card
 
 **Import:** `import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@retray-dev/ui-kit'`
@@ -403,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 { 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." />
 ```
 
 ---
@@ -442,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:**
@@ -487,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.
+**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).
 
@@ -510,11 +588,22 @@ const [accepted, setAccepted] = useState(false)
 | variant | `'default' \| 'outline'` | `'default'` | `outline` adds a border when unpressed |
 | size | `'sm' \| 'md' \| 'lg'` | `'md'` | sm=minH 40pt, md=minH 44pt, lg=minH 48pt |
 | label | `string` | — | Text label |
-| icon | `ReactNode` | — | Icon — can be combined with `label` |
+| icon | `ReactNode \| ((pressed: boolean) => ReactNode)` | — | Icon shown when not pressed — can be combined with `label` |
+| activeIcon | `ReactNode \| ((pressed: boolean) => ReactNode)` | — | Icon shown when pressed. If omitted, a default `✓` check mark is shown |
+
+**Animation:** `borderColor` and `backgroundColor` animate via `Animated.timing` (150ms, `Easing.out`) on press state change. `borderWidth` stays fixed at 2pt to prevent layout jumps.
 
 **Example:**
 ```tsx
 <Toggle pressed={bold} onPressedChange={setBold} label="Bold" variant="outline" />
+
+// With custom active icon
+<Toggle
+  pressed={favorited}
+  onPressedChange={setFavorited}
+  icon={<HeartIcon size={18} />}
+  activeIcon={<HeartIcon size={18} color={colors.primary} />}
+/>
 ```
 
 ---
@@ -694,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 |
@@ -748,6 +842,7 @@ function MyComponent() {
 | description | `string` | — | Detail text |
 | variant | `'default' \| 'destructive' \| 'success'` | `'default'` | `default`: dark background. `destructive`: red. `success`: green |
 | duration | `number` (ms) | `3000` | Auto-dismiss after this delay |
+| icon | `ReactNode` | — | Custom icon node. Defaults to a variant-appropriate symbol (`✓`, `✖`, `ℹ`) at 22px |
 
 **`dismiss(id)`:** Dismiss a toast programmatically. The `id` is returned by the `toast()` call — store it if you need programmatic dismissal.
 
@@ -757,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.
 
-- 24 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`                       |
+| Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
 | Surfaces    | `Card`, `Alert`, `EmptyState`                                                                   |
-| Form        | `Button`, `Input`, `CurrencyInput`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
+| 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;
@@ -70,8 +70,12 @@ interface ButtonProps extends TouchableOpacityProps {
     /** Replaces the label with a spinner and forces `disabled`. */
     loading?: boolean;
     fullWidth?: boolean;
-    /** Icon rendered alongside the label. */
-    icon?: React.ReactNode;
+    /** Icon rendered alongside the label. Can be a ReactNode or a render function `(props) => ReactNode`. */
+    icon?: React.ReactNode | ((props: {
+        label: string;
+        size: ButtonSize;
+        variant: ButtonVariant;
+    }) => React.ReactNode);
     /** Side the icon appears on. Defaults to `'left'`. */
     iconPosition?: 'left' | 'right';
 }
@@ -166,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`. */
@@ -190,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;
@@ -232,9 +238,12 @@ interface ToggleProps extends TouchableOpacityProps {
     variant?: ToggleVariant;
     size?: ToggleSize;
     label?: string;
-    icon?: React.ReactNode;
+    /** Icon to show when not pressed */
+    icon?: React.ReactNode | ((pressed: boolean) => React.ReactNode);
+    /** Icon to show when pressed/active. If omitted, a default check mark is used. */
+    activeIcon?: React.ReactNode | ((pressed: boolean) => React.ReactNode);
 }
-declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, disabled, style, ...props }: ToggleProps): React.JSX.Element;
+declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, disabled, style, ...props }: ToggleProps): React.JSX.Element;
 
 interface RadioOption {
     label: string;
@@ -253,6 +262,7 @@ declare function RadioGroup({ options, value, onValueChange, orientation, style,
 interface TabItem {
     label: string;
     value: string;
+    icon?: React.ReactNode;
 }
 interface TabsProps {
     tabs: TabItem[];
@@ -349,6 +359,7 @@ interface ToastItem {
     title?: string;
     description?: string;
     variant?: ToastVariant;
+    icon?: React.ReactNode;
     /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
 }
@@ -386,4 +397,96 @@ interface CurrencyInputProps {
 }
 declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputProps): 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, CurrencyInput, 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 CurrencyDisplayProps {
+    value: number | string;
+    /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+    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, textColor, style }: CurrencyDisplayProps): React.JSX.Element;
+
+interface CurrencyInputLargeProps {
+    value?: string;
+    onChangeText?: (formatted: string) => void;
+    /** Called with the parsed numeric value (no separators, no prefix). */
+    onChangeValue?: (raw: number) => void;
+    /** Symbol prepended to the formatted value. Defaults to `'$'`. */
+    prefix?: string;
+    /** Character used to separate groups of three digits. Defaults to `'.'`. */
+    thousandsSeparator?: '.' | ',';
+    label?: string;
+    /** Red helper text; also changes input border to destructive color. */
+    error?: string;
+    hint?: string;
+    placeholder?: string;
+    editable?: boolean;
+    containerStyle?: ViewStyle;
+}
+declare function CurrencyInputLarge({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputLargeProps): React.JSX.Element;
+
+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 };