@retray-dev/ui-kit 2.7.0 → 3.0.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v2.7.0)
+# @retray-dev/ui-kit — Component Reference (v3.0.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:
 
@@ -42,6 +42,54 @@ export default function App() {
 - `BottomSheetModalProvider` must be inside `GestureHandlerRootView`
 - `ToastProvider` must be inside `SafeAreaProvider`
 
+## Typography — Poppins (Required)
+
+All components use **Poppins** as the font family. You **must** load it before rendering any UI kit component, otherwise text will fall back to the system font.
+
+```tsx
+import { useFonts } from 'expo-font'
+import { PoppinsFonts } from '@retray-dev/ui-kit/fonts'
+
+export default function App() {
+  const [fontsLoaded] = useFonts(PoppinsFonts)
+  if (!fontsLoaded) return null   // or show a splash screen
+
+  return (
+    // ... your providers and app
+  )
+}
+```
+
+**How it works:**
+1. Import `PoppinsFonts` from `@retray-dev/ui-kit/fonts` (separate export path)
+2. Pass it to `expo-font`'s `useFonts()` hook at your app root
+3. Metro resolves font files from `node_modules/@retray-dev/ui-kit/src/assets/fonts/` at bundle time
+4. All library components reference fonts by family name (e.g., `fontFamily: 'Poppins-SemiBold'`)
+
+**Why this pattern:**
+- Fonts are NOT bundled into `dist/` — they ship as raw `.ttf` files inside `src/assets/fonts/`
+- Metro resolves `require()` calls to these files when it bundles your app
+- This prevents font corruption that can occur when `.ttf` files pass through bundlers like esbuild/tsup
+
+**Setup:**
+- Add `expo-font` to your app: `pnpm add expo-font`
+- The `if (!fontsLoaded) return null` guard prevents text from rendering before fonts are ready
+- Pair with `expo-splash-screen` in production to avoid a flash:
+  ```tsx
+  import * as SplashScreen from 'expo-splash-screen'
+  SplashScreen.preventAutoHideAsync()
+  
+  useEffect(() => {
+    if (fontsLoaded) SplashScreen.hideAsync()
+  }, [fontsLoaded])
+  ```
+
+**Included weights:**
+- Regular: `Poppins-Thin`, `Poppins-ExtraLight`, `Poppins-Light`, `Poppins-Regular`, `Poppins-Medium`, `Poppins-SemiBold`, `Poppins-Bold`, `Poppins-ExtraBold`, `Poppins-Black`
+- Italic: `Poppins-Italic`, `Poppins-MediumItalic`, `Poppins-SemiBoldItalic`, `Poppins-BoldItalic`
+
+**Total: 13 font files** exported from the package. Additional italic variants exist in `src/assets/fonts/` but are not exported — if you need them, open an issue.
+
 ### ThemeProvider Props
 
 | Prop | Type | Default | Notes |
@@ -74,7 +122,7 @@ function MyComponent() {
 
 ## Theme Tokens
 
-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.
+All 23 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
@@ -83,25 +131,29 @@ import type { ThemeColors } from '@retray-dev/ui-kit'
 
 | Token | Light | Dark | Semantic Role |
 |-------|-------|------|---------------|
-| `background` | `#ffffff` | `#171717` | Screen / page background |
+| `background` | `#ffffff` | `#0f0f0f` | Screen / page background |
 | `foreground` | `#171717` | `#fafafa` | Primary text color |
-| `card` | `#ffffff` | `#222222` | Card / surface background |
+| `card` | `#ffffff` | `#1c1c1c` | Card / surface background |
 | `cardForeground` | `#171717` | `#fafafa` | Text on cards |
 | `primary` | `#1a1a1a` | `#fafafa` | Primary action (buttons, selected states) |
-| `primaryForeground` | `#ffffff` | `#1a1a1a` | Text/icon on primary background |
-| `secondary` | `#f1f1f1` | `#323232` | Secondary surfaces |
+| `primaryForeground` | `#ffffff` | `#0f0f0f` | Text/icon on primary background |
+| `secondary` | `#f1f1f1` | `#272727` | 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 |
+| `muted` | `#f1f1f1` | `#272727` | Muted backgrounds, skeleton fills, track fills |
+| `mutedForeground` | `#a2a2a2` | `#9a9a9a` | Placeholder text, helper text, captions |
+| `accent` | `#e4e4e4` | `#2e2e2e` | Hover / pressed state fills |
 | `accentForeground` | `#171717` | `#fafafa` | Text on accent |
-| `destructive` | `#ef4444` | `#dc2626` | Error / danger / delete actions |
-| `destructiveForeground` | `#1a1a1a` | `#1a1a1a` | Text on destructive |
-| `border` | `#e5e5e5` | `#2a2a2a` | Borders and dividers |
+| `destructive` | `#ef4444` | `#dc2626` | Error / danger / delete actions — base color |
+| `destructiveForeground` | `#ffffff` | `#ffffff` | Text on destructive |
+| `destructiveTint` | `#fff5f5` | `#3b0a0a` | Very light/dark background tint for destructive states |
+| `destructiveBorder` | `#fecaca` | `#7f1d1d` | Border color for destructive outlined elements |
+| `success` | `#1a7a45` | `#166534` | Success / confirmation / done actions — base color |
+| `successForeground` | `#ffffff` | `#ffffff` | Text on success |
+| `successTint` | `#f0fdf4` | `#052e16` | Very light/dark background tint for success states |
+| `successBorder` | `#bbf7d0` | `#166534` | Border color for success outlined elements |
+| `border` | `#e5e5e5` | `#303030` | Borders and dividers |
 | `input` | `#e5e5e5` | `#2a2a2a` | Input field border color |
 | `ring` | `#1a1a1a` | `#fafafa` | Optional focus ring token (components may use `primary` by default) |
-| `success` | `#16a34a` | `#22c55e` | Success state (Toast success variant) |
-| `successForeground` | `#1a1a1a` | `#1a1a1a` | Text on success background |
 
 ---
 
@@ -271,6 +323,36 @@ const isWide = width >= BREAKPOINTS.wide
 
 ---
 
+### IconButton
+
+**Import:** `import { IconButton } from '@retray-dev/ui-kit'`
+**When to use:** Compact icon-only pressable action — toolbars, FABs, inline icon actions. Use `Button` when a label is needed.
+**Extends:** `TouchableOpacityProps` — all RN TouchableOpacity props pass through.
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| iconName | `string` | — | Icon name from `@expo/vector-icons` (e.g. `"plus"`, `"x"`, `"home"`). Takes precedence over `icon` |
+| icon | `React.ReactNode` | — | Custom icon node — used when `iconName` is not provided |
+| iconColor | `string` | — | Override icon color. Defaults to variant foreground color |
+| variant | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'destructive'` | `'primary'` | Visual style — same tokens as `Button` |
+| size | `'sm' \| 'md' \| 'lg'` | `'md'` | sm=40pt / md=44pt / lg=52pt (all ≥44pt on md/lg per HIG) |
+| loading | `boolean` | `false` | Replaces icon with a spinner and forces disabled state |
+| disabled | `boolean` | — | Reduces opacity to 0.5 |
+
+**Variants:** Same color logic as `Button` — `primary`, `secondary`, `outline`, `ghost`, `destructive`.
+
+**Animations:** Scale springs to 0.95 on `onPressIn`, back to 1.0 on `onPressOut`. `impactAsync(Light)` haptic on press.
+
+**Example:**
+```tsx
+<IconButton iconName="plus" onPress={handleAdd} />
+<IconButton iconName="x" variant="ghost" size="sm" onPress={handleClose} />
+<IconButton iconName="trash-2" variant="destructive" onPress={handleDelete} />
+<IconButton iconName="check" variant="outline" size="lg" loading={saving} />
+```
+
+---
+
 ### Input
 
 **Import:** `import { Input } from '@retray-dev/ui-kit'`
@@ -455,11 +537,13 @@ const [amount, setAmount] = useState(0)
 |------|------|---------|-------|
 | size | `'sm' \| 'md' \| 'lg'` | `'md'` | `sm`/`md` map to RN `'small'`, `lg` maps to `'large'` |
 | color | `string` | `primary` token | Override spinner color |
+| label | `string` | — | Text displayed below the spinner |
 
 **Example:**
 ```tsx
 <Spinner />
 <Spinner size="lg" color="#6366f1" />
+<Spinner size="lg" label="Loading..." />
 ```
 
 ---
@@ -858,7 +942,7 @@ const [accepted, setAccepted] = useState(false)
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| tabs | `TabItem[]` | required | Each item: `{ label: string, value: string }` |
+| tabs | `TabItem[]` | required | Each item: `{ label: string, value: string, icon?: ReactNode \| ((active: boolean) => ReactNode) }` |
 | value | `string` | — | Controlled active tab |
 | onValueChange | `(value: string) => void` | — | — |
 | children | `ReactNode` | — | `TabsContent` components |
@@ -1123,6 +1207,8 @@ function MyComponent() {
 | label | `string` | required | — |
 | selected | `boolean` | `false` | Controls fill color |
 | onPress | `() => void` | — | — |
+| icon | `ReactNode` | — | Custom icon rendered before the label |
+| iconName | `string` | — | Icon name from `@expo/vector-icons`. Takes precedence over `icon` |
 | style | `ViewStyle` | — | — |
 
 **`ChipGroup` Props:**
@@ -1307,6 +1393,7 @@ Each component that accepts icon slots now has a corresponding `iconName` prop.
 | Component | Prop(s) | Slot | Default size | Default color |
 |---|---|---|---|---|
 | `Button` | `iconName`, `iconColor` | Left or right of label | sm=16 / md=18 / lg=20 | Variant label color |
+| `IconButton` | `iconName`, `iconColor` | Center (icon-only) | sm=18 / md=20 / lg=24 | Variant foreground color |
 | `Input` | `prefixIcon`, `prefixIconColor` | Before input text | 20 | `mutedForeground` |
 | `Input` | `suffixIcon`, `suffixIconColor` | After input text | 20 | `mutedForeground` |
 | `ListItem` | `leftIcon`, `leftIconColor` | Left 44×44 slot | 24 | `foreground` |

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.
 
-- 32 components across 6 categories
-- Light/dark theme with 20 color tokens and full customization
+- 33 components across 6 categories
+- Light/dark theme with 23 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
@@ -23,7 +23,7 @@ pnpm add @retray-dev/ui-kit
 Install these in your app if not already present:
 
 ```bash
-pnpm add expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons
+pnpm add expo-font expo-haptics expo-linear-gradient react-native-safe-area-context @gorhom/bottom-sheet react-native-reanimated react-native-gesture-handler react-native-worklets @react-native-picker/picker @react-native-community/slider @expo/vector-icons
 ```
 
 For Expo projects, run `npx expo install` instead to get SDK-compatible versions.
@@ -40,6 +40,26 @@ module.exports = function (api) {
 }
 ```
 
+## Typography
+
+All components use **Poppins** font family. You must load the fonts at app root before rendering any component:
+
+```tsx
+import { useFonts } from 'expo-font'
+import { PoppinsFonts } from '@retray-dev/ui-kit/fonts'
+
+export default function App() {
+  const [fontsLoaded] = useFonts(PoppinsFonts)
+  if (!fontsLoaded) return null
+
+  return (
+    // ... providers and app
+  )
+}
+```
+
+The library ships 13 font files (9 regular weights + 4 italic variants) as raw `.ttf` files. Metro resolves them at bundle time.
+
 ## Setup
 
 Wrap your app root with all required providers. Order matters.
@@ -93,7 +113,7 @@ 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`, `success`, `successForeground`
+**Available tokens:** `background`, `foreground`, `card`, `cardForeground`, `primary`, `primaryForeground`, `secondary`, `secondaryForeground`, `muted`, `mutedForeground`, `accent`, `accentForeground`, `destructive`, `destructiveForeground`, `destructiveTint`, `destructiveBorder`, `border`, `input`, `ring`, `success`, `successForeground`, `successTint`, `successBorder`
 
 ## Design Tokens
 
@@ -119,7 +139,7 @@ import { SPACING, ICON_SIZES, RADIUS, SHADOWS, BREAKPOINTS } from '@retray-dev/u
 | ----------- | ----------------------------------------------------------------------------------------------- |
 | Display     | `Text`, `Badge`, `Avatar`, `Separator`, `Spinner`, `Skeleton`, `Progress`, `CurrencyDisplay`   |
 | Surfaces    | `Card`, `AlertBanner`, `EmptyState`                                                             |
-| Form        | `Button`, `Input`, `CurrencyInput`, `CurrencyInputLarge`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
+| Form        | `Button`, `IconButton`, `Input`, `CurrencyInput`, `CurrencyInputLarge`, `Textarea`, `Checkbox`, `Switch`, `Toggle`, `RadioGroup`, `Select`, `Slider` |
 | Composition | `Tabs`, `Accordion`                                                                             |
 | Overlays    | `Sheet`, `ConfirmDialog`                                                                        |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |

package/dist/index.d.mts

@@ -22,6 +22,10 @@ type ThemeColors = {
     ring: string;
     success: string;
     successForeground: string;
+    destructiveTint: string;
+    destructiveBorder: string;
+    successTint: string;
+    successBorder: string;
 };
 type Theme = {
     light?: Partial<ThemeColors>;
@@ -88,6 +92,25 @@ interface ButtonProps extends TouchableOpacityProps {
 }
 declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
 
+type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+interface IconButtonProps extends TouchableOpacityProps {
+    /**
+     * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
+     * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
+     */
+    iconName?: string;
+    /** ReactNode icon — used when `iconName` is not provided. */
+    icon?: React.ReactNode;
+    /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
+    iconColor?: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    /** Replaces icon with a spinner and forces `disabled`. */
+    loading?: boolean;
+}
+declare function IconButton({ iconName, icon, iconColor, variant, size, loading, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
+
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 interface TextProps extends TextProps$1 {
     variant?: TextVariant;
@@ -130,7 +153,7 @@ interface InputProps extends TextInputProps {
 }
 declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
-type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
 interface BadgeProps {
     label?: string;
@@ -197,8 +220,9 @@ type SpinnerSize = 'sm' | 'md' | 'lg';
 interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
     size?: SpinnerSize;
     color?: string;
+    label?: string;
 }
-declare function Spinner({ size, color, ...props }: SpinnerProps): React.JSX.Element;
+declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
 
 interface SkeletonProps {
     width?: number | string;
@@ -339,7 +363,7 @@ declare function RadioGroup({ options, value, onValueChange, orientation, style,
 interface TabItem {
     label: string;
     value: string;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
 }
 interface TabsProps {
     tabs: TabItem[];
@@ -477,10 +501,12 @@ interface CurrencyInputProps {
     hint?: string;
     placeholder?: string;
     editable?: boolean;
+    /** Icon or element rendered at the left edge inside the input field. */
+    prefixIcon?: React.ReactNode;
     containerStyle?: ViewStyle;
     style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, prefixIcon, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;
@@ -555,6 +581,10 @@ interface ChipProps {
     label: string;
     selected?: boolean;
     onPress?: () => void;
+    /** JSX icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Icon name from @expo/vector-icons resolved automatically. */
+    iconName?: string;
     style?: ViewStyle;
 }
 interface ChipOption {
@@ -569,7 +599,7 @@ interface ChipGroupProps {
     multiSelect?: boolean;
     style?: ViewStyle;
 }
-declare function Chip({ label, selected, onPress, style }: ChipProps): React.JSX.Element;
+declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
 declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
 
 interface ConfirmDialogProps {
@@ -690,4 +720,4 @@ type IconSizeKey = keyof IconSize;
 type Radius = typeof RADIUS;
 type RadiusKey = keyof Radius;
 
-export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, 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, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, 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, renderIcon, useTheme, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, 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, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, 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, renderIcon, useTheme, useToast };

package/dist/index.d.ts

@@ -22,6 +22,10 @@ type ThemeColors = {
     ring: string;
     success: string;
     successForeground: string;
+    destructiveTint: string;
+    destructiveBorder: string;
+    successTint: string;
+    successBorder: string;
 };
 type Theme = {
     light?: Partial<ThemeColors>;
@@ -88,6 +92,25 @@ interface ButtonProps extends TouchableOpacityProps {
 }
 declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
 
+type IconButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+type IconButtonSize = 'sm' | 'md' | 'lg';
+interface IconButtonProps extends TouchableOpacityProps {
+    /**
+     * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"plus"`).
+     * See https://icons.expo.fyi. Takes precedence over `icon` when both supplied.
+     */
+    iconName?: string;
+    /** ReactNode icon — used when `iconName` is not provided. */
+    icon?: React.ReactNode;
+    /** Override the resolved icon color. Defaults to the foreground color for the active variant. */
+    iconColor?: string;
+    variant?: IconButtonVariant;
+    size?: IconButtonSize;
+    /** Replaces icon with a spinner and forces `disabled`. */
+    loading?: boolean;
+}
+declare function IconButton({ iconName, icon, iconColor, variant, size, loading, disabled, style, onPress, ...props }: IconButtonProps): React.JSX.Element;
+
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 interface TextProps extends TextProps$1 {
     variant?: TextVariant;
@@ -130,7 +153,7 @@ interface InputProps extends TextInputProps {
 }
 declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, prefixIcon, suffixIcon, prefixIconColor, suffixIconColor, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
-type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning' | 'successOutline' | 'destructiveOutline';
 type BadgeSize = 'sm' | 'md' | 'lg';
 interface BadgeProps {
     label?: string;
@@ -197,8 +220,9 @@ type SpinnerSize = 'sm' | 'md' | 'lg';
 interface SpinnerProps extends Omit<ActivityIndicatorProps, 'size'> {
     size?: SpinnerSize;
     color?: string;
+    label?: string;
 }
-declare function Spinner({ size, color, ...props }: SpinnerProps): React.JSX.Element;
+declare function Spinner({ size, color, label, ...props }: SpinnerProps): React.JSX.Element;
 
 interface SkeletonProps {
     width?: number | string;
@@ -339,7 +363,7 @@ declare function RadioGroup({ options, value, onValueChange, orientation, style,
 interface TabItem {
     label: string;
     value: string;
-    icon?: React.ReactNode;
+    icon?: React.ReactNode | ((active: boolean) => React.ReactNode);
 }
 interface TabsProps {
     tabs: TabItem[];
@@ -477,10 +501,12 @@ interface CurrencyInputProps {
     hint?: string;
     placeholder?: string;
     editable?: boolean;
+    /** Icon or element rendered at the left edge inside the input field. */
+    prefixIcon?: React.ReactNode;
     containerStyle?: ViewStyle;
     style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, prefixIcon, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;
@@ -555,6 +581,10 @@ interface ChipProps {
     label: string;
     selected?: boolean;
     onPress?: () => void;
+    /** JSX icon rendered before the label. */
+    icon?: React.ReactNode;
+    /** Icon name from @expo/vector-icons resolved automatically. */
+    iconName?: string;
     style?: ViewStyle;
 }
 interface ChipOption {
@@ -569,7 +599,7 @@ interface ChipGroupProps {
     multiSelect?: boolean;
     style?: ViewStyle;
 }
-declare function Chip({ label, selected, onPress, style }: ChipProps): React.JSX.Element;
+declare function Chip({ label, selected, onPress, icon, iconName, style }: ChipProps): React.JSX.Element;
 declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
 
 interface ConfirmDialogProps {
@@ -690,4 +720,4 @@ type IconSizeKey = keyof IconSize;
 type Radius = typeof RADIUS;
 type RadiusKey = keyof Radius;
 
-export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, 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, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, 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, renderIcon, useTheme, useToast };
+export { Accordion, type AccordionItem, type AccordionProps, AlertBanner, type AlertBannerProps, type AlertBannerVariant, Avatar, type AvatarProps, type AvatarSize, BREAKPOINTS, 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, CurrencyInput as CurrencyInputLarge, type CurrencyInputProps, EmptyState, type EmptyStateProps, ICON_SIZES, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconFamily, type IconProps, type IconSize, type IconSizeKey, Input, type InputProps, LabelValue, type LabelValueProps, ListItem, type ListItemProps, MonthPicker, type MonthPickerProps, type MonthPickerValue, Progress, type ProgressProps, RADIUS, RadioGroup, type RadioGroupProps, type RadioOption, type Radius, type RadiusKey, SHADOWS, SPACING, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Sheet, type SheetProps, Skeleton, type SkeletonProps, Slider, type SliderProps, type Spacing, type SpacingKey, 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, renderIcon, useTheme, useToast };