@retray-dev/ui-kit 1.6.0 → 1.7.0

package/COMPONENTS.md

@@ -1,4 +1,4 @@
-# @retray-dev/ui-kit — Component Reference (v1.6.0)
+# @retray-dev/ui-kit — Component Reference (v1.7.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:
 
@@ -216,6 +216,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 +225,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}
@@ -386,6 +387,95 @@ const [amount, setAmount] = useState(0)
 
 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'`
+**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`) |
+| 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'`
+**When to use:** Grouped content with a surface background, border, and shadow.
+
+All sub-components accept a `style` prop for overrides.
+
 **Example:**
 ```tsx
 <Card>
@@ -487,7 +577,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 56×32pt, Thumb 24×24pt 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 +600,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} />}
+/>
 ```
 
 ---
@@ -748,6 +849,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.
 

package/README.md

@@ -2,7 +2,7 @@
 
 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
+- 26 components across 5 categories
 - Light/dark theme with 18 color tokens and full customization
 - Apple HIG–compliant touch targets and haptic feedback
 - Animated interactions: spring press, sliding tabs, accordion easing, animated progress
@@ -99,9 +99,9 @@ const { colors, colorScheme } = useTheme()
 
 | 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`                                                                                         |
 | Feedback    | `Toast` / `ToastProvider` / `useToast`                                                          |

package/dist/index.d.mts

@@ -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';
 }
@@ -232,9 +236,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 +260,7 @@ declare function RadioGroup({ options, value, onValueChange, orientation, style,
 interface TabItem {
     label: string;
     value: string;
+    icon?: React.ReactNode;
 }
 interface TabsProps {
     tabs: TabItem[];
@@ -349,6 +357,7 @@ interface ToastItem {
     title?: string;
     description?: string;
     variant?: ToastVariant;
+    icon?: React.ReactNode;
     /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
 }
@@ -386,4 +395,33 @@ 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;
+    style?: ViewStyle;
+}
+declare function CurrencyDisplay({ value, prefix, showDecimals, 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;
+
+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 };

package/dist/index.d.ts

@@ -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';
 }
@@ -232,9 +236,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 +260,7 @@ declare function RadioGroup({ options, value, onValueChange, orientation, style,
 interface TabItem {
     label: string;
     value: string;
+    icon?: React.ReactNode;
 }
 interface TabsProps {
     tabs: TabItem[];
@@ -349,6 +357,7 @@ interface ToastItem {
     title?: string;
     description?: string;
     variant?: ToastVariant;
+    icon?: React.ReactNode;
     /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
 }
@@ -386,4 +395,33 @@ 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;
+    style?: ViewStyle;
+}
+declare function CurrencyDisplay({ value, prefix, showDecimals, 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;
+
+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 };