@retray-dev/ui-kit 1.8.0 → 2.5.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, ViewStyle, TextStyle, ActivityIndicatorProps } from 'react-native';
+import { TouchableOpacityProps, TextProps as TextProps$1, TextInputProps, TextStyle, ViewStyle, ActivityIndicatorProps } from 'react-native';
 export { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 
 type ThemeColors = {
@@ -36,11 +36,10 @@ type ThemeContextValue = {
 interface ThemeProviderProps {
     children: React.ReactNode;
     /**
-     * Override individual color tokens per scheme. Only provide the tokens you want
-     * to change — the rest fall back to the defaults.
-     * @example
-     * { light: { primary: '#6366f1', primaryForeground: '#fff' },
-     *   dark:  { primary: '#818cf8', primaryForeground: '#fff' } }
+    * Optional full-palette overrides per scheme. Supply a partial or full `ThemeColors` object
+    * for `light` and/or `dark` to override the defaults.
+    * @example
+    * { light: { primary: '#6366f1', card: '#fff' }, dark: { primary: '#818cf8' } }
      */
     theme?: Theme;
     /**
@@ -94,21 +93,42 @@ interface InputProps extends TextInputProps {
     error?: string;
     /** Helper text shown below the input when there is no error. */
     hint?: string;
-    /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+    /** Text or component rendered before the input text. */
+    prefix?: React.ReactNode;
+    /** Text or component rendered after the input text. */
+    suffix?: React.ReactNode;
+    /** Style applied to prefix text if prefix is a string. */
+    prefixStyle?: TextStyle;
+    /** Style applied to suffix text if suffix is a string. */
+    suffixStyle?: TextStyle;
+    /** Input type. When set to \`'password'\`, shows a toggle button to reveal/hide text. */
+    type?: 'text' | 'password';
+    /** Style for the outer container \`View\`. Use \`style\` (from \`TextInputProps\`) to style the \`TextInput\` itself. */
     containerStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, prefix, suffix, prefixStyle, suffixStyle, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
+type BadgeSize = 'sm' | 'md' | 'lg';
 interface BadgeProps {
-    label: string;
+    label?: string;
+    /** Alternative to \`label\` — allows JSX children. */
+    children?: React.ReactNode;
     variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Icon rendered before the label/children. */
+    icon?: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Badge({ label, variant, style }: BadgeProps): React.JSX.Element;
+declare function Badge({ label, children, variant, size, icon, style }: BadgeProps): React.JSX.Element;
 
+type CardVariant = 'elevated' | 'outlined' | 'filled';
 interface CardProps {
     children: React.ReactNode;
+    /** Visual style variant.  `'elevated'` (default) has shadow, `'outlined'` has border only, `'filled'` uses accent background. */
+    variant?: CardVariant;
+    /** Makes the card tappable. Adds press animation and haptic feedback. */
+    onPress?: () => void;
     style?: ViewStyle;
 }
 interface CardHeaderProps {
@@ -131,7 +151,7 @@ interface CardFooterProps {
     children: React.ReactNode;
     style?: ViewStyle;
 }
-declare function Card({ children, style }: CardProps): React.JSX.Element;
+declare function Card({ children, variant, onPress, style }: CardProps): React.JSX.Element;
 declare function CardHeader({ children, style }: CardHeaderProps): React.JSX.Element;
 declare function CardTitle({ children, style }: CardTitleProps): React.JSX.Element;
 declare function CardDescription({ children, style }: CardDescriptionProps): React.JSX.Element;
@@ -303,20 +323,20 @@ interface AccordionProps {
 declare function Accordion({ items, type, defaultValue, style }: AccordionProps): React.JSX.Element;
 
 interface SliderProps {
-    /** Current value. Controlled when provided; falls back to internal state otherwise. */
     value?: number;
     minimumValue?: number;
     maximumValue?: number;
-    /** Snap interval. `0` (default) means continuous (no snapping). */
     step?: number;
-    /** Called on every move while dragging. */
     onValueChange?: (value: number) => void;
-    /** Called once when the user releases the thumb. */
     onSlidingComplete?: (value: number) => void;
+    label?: string;
+    showValue?: boolean;
+    formatValue?: (value: number) => string;
+    accessibilityLabel?: string;
     disabled?: boolean;
     style?: ViewStyle;
 }
-declare function Slider({ value, minimumValue, maximumValue, step, onValueChange, onSlidingComplete, disabled, style, }: SliderProps): React.JSX.Element;
+declare function Slider({ value, minimumValue, maximumValue, step, onValueChange, onSlidingComplete, label, showValue, formatValue, accessibilityLabel, disabled, style, }: SliderProps): React.JSX.Element;
 
 interface SheetProps {
     open: boolean;
@@ -343,10 +363,8 @@ interface SelectProps {
     options: SelectOption[];
     value?: string;
     onValueChange?: (value: string) => void;
-    /** Text shown when no option is selected. Defaults to `'Select an option'`. */
     placeholder?: string;
     label?: string;
-    /** Red helper text; also changes trigger border to `destructive` color. */
     error?: string;
     disabled?: boolean;
     style?: ViewStyle;
@@ -387,6 +405,8 @@ interface CurrencyInputProps {
     prefix?: string;
     /** Character used to separate groups of three digits. Defaults to `'.'`. */
     thousandsSeparator?: '.' | ',';
+    /** Font size variant. `'large'` renders at 36pt, `'default'` at 17pt. */
+    size?: 'default' | 'large';
     label?: string;
     /** Red helper text; also changes input border to destructive color. */
     error?: string;
@@ -394,8 +414,9 @@ interface CurrencyInputProps {
     placeholder?: string;
     editable?: boolean;
     containerStyle?: ViewStyle;
+    style?: TextStyle;
 }
-declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, label, error, hint, placeholder, editable, containerStyle, }: CurrencyInputProps): React.JSX.Element;
+declare function CurrencyInput({ value, onChangeText, onChangeValue, prefix, thousandsSeparator, size, label, error, hint, placeholder, editable, containerStyle, style, }: CurrencyInputProps): React.JSX.Element;
 
 interface CurrencyDisplayProps {
     value: number | string;
@@ -409,35 +430,48 @@ interface CurrencyDisplayProps {
 }
 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;
-
+type ListItemVariant = 'plain' | 'card';
 interface ListItemProps {
+    /**
+     * Arbitrary content rendered on the left (avatar, icon, image, etc.).
+     * Rendered inside a 44×44 aligned container.
+     */
+    leftRender?: React.ReactNode;
+    /**
+     * Arbitrary content rendered on the right (badge, price, chevron, switch, etc.).
+     * Replaces the old `trailing` prop (still accepted as an alias).
+     */
+    rightRender?: React.ReactNode | string;
+    /** @deprecated Use `rightRender` instead. */
+    trailing?: React.ReactNode | string;
+    /** @deprecated Use `leftRender` instead. */
     icon?: React.ReactNode;
     title: string;
+    /** Secondary line below the title. */
     subtitle?: string;
-    trailing?: string | React.ReactNode;
+    /** Tertiary / caption line below the subtitle. */
+    caption?: string;
+    /**
+     * - `plain` (default): no background, no border — designed to sit inside a parent surface (Card, list wrapper, etc.)
+     * - `card`: standalone surface with background, border and shadow.
+     */
+    variant?: ListItemVariant;
+    /** Show a right-pointing chevron on the far right. Ignored when `rightRender` / `trailing` is set. */
+    showChevron?: boolean;
+    /** Visual separator line at the bottom of the item. Useful when rendering multiple plain items in a list. */
+    showSeparator?: boolean;
     onPress?: () => void;
     disabled?: boolean;
+    /** Style applied to the outer container. */
     style?: ViewStyle;
+    /** Style applied to the title Text. */
+    titleStyle?: TextStyle;
+    /** Style applied to the subtitle Text. */
+    subtitleStyle?: TextStyle;
+    /** Style applied to the caption Text. */
+    captionStyle?: TextStyle;
 }
-declare function ListItem({ icon, title, subtitle, trailing, onPress, disabled, style }: ListItemProps): React.JSX.Element;
+declare function ListItem({ leftRender, rightRender, trailing, icon, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, }: ListItemProps): React.JSX.Element;
 
 interface ChipProps {
     label: string;
@@ -451,12 +485,14 @@ interface ChipOption {
 }
 interface ChipGroupProps {
     options: ChipOption[];
-    value?: string | number;
-    onValueChange?: (value: string | number) => void;
+    value?: string | number | (string | number)[];
+    onValueChange?: (value: string | number | (string | number)[]) => void;
+    /** When true, allows selecting multiple chips. `value` and `onValueChange` will use arrays. */
+    multiSelect?: boolean;
     style?: ViewStyle;
 }
 declare function Chip({ label, selected, onPress, style }: ChipProps): React.JSX.Element;
-declare function ChipGroup({ options, value, onValueChange, style }: ChipGroupProps): React.JSX.Element;
+declare function ChipGroup({ options, value, onValueChange, multiSelect, style }: ChipGroupProps): React.JSX.Element;
 
 interface ConfirmDialogProps {
     visible: boolean;
@@ -489,4 +525,4 @@ interface MonthPickerProps {
 }
 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 };
+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, CurrencyInput as CurrencyInputLarge, 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 };