@retray-dev/ui-kit 1.0.0 → 1.6.0

package/dist/index.d.mts

@@ -20,6 +20,8 @@ type ThemeColors = {
     border: string;
     input: string;
     ring: string;
+    success: string;
+    successForeground: string;
 };
 type Theme = {
     light?: Partial<ThemeColors>;
@@ -68,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;
+    /** Side the icon appears on. Defaults to `'left'`. */
+    iconPosition?: 'left' | 'right';
 }
-declare function Button({ label, variant, size, loading, fullWidth, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ label, variant, size, loading, fullWidth, icon, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 interface TextProps extends TextProps$1 {
@@ -80,10 +86,14 @@ declare function Text({ variant, color, style, children, ...props }: TextProps):
 
 interface InputProps extends TextInputProps {
     label?: string;
+    /** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
     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. */
+    containerStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
 interface BadgeProps {
@@ -147,7 +157,9 @@ declare function Skeleton({ width, height, borderRadius, style }: SkeletonProps)
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
 interface AvatarProps {
+    /** Remote image URI. Falls back to `fallback` initials on error or when omitted. */
     src?: string;
+    /** Up to 2 characters shown when the image is unavailable. Auto-uppercased. Defaults to `'?'`. */
     fallback?: string;
     size?: AvatarSize;
     style?: ViewStyle;
@@ -165,7 +177,9 @@ interface AlertProps {
 declare function Alert({ title, description, variant, icon, style }: AlertProps): React.JSX.Element;
 
 interface ProgressProps {
+    /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
     value?: number;
+    /** Maximum value. Defaults to `100`. */
     max?: number;
     style?: ViewStyle;
 }
@@ -182,11 +196,16 @@ declare function EmptyState({ icon, title, description, action, style }: EmptySt
 
 interface TextareaProps extends TextInputProps {
     label?: string;
+    /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
     error?: string;
+    /** Helper text shown below the textarea when there is no error. */
     hint?: string;
+    /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
     rows?: number;
+    /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+    containerStyle?: ViewStyle;
 }
-declare function Textarea({ label, error, hint, rows, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, error, hint, rows, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
 
 interface CheckboxProps {
     checked?: boolean;
@@ -195,7 +214,7 @@ interface CheckboxProps {
     disabled?: boolean;
     style?: ViewStyle;
 }
-declare function Checkbox({ checked, onCheckedChange, label, disabled, style }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -237,6 +256,10 @@ interface TabItem {
 }
 interface TabsProps {
     tabs: TabItem[];
+    /**
+     * Controlled active tab value. When omitted the component manages state internally
+     * (uncontrolled), defaulting to the first tab.
+     */
     value?: string;
     onValueChange?: (value: string) => void;
     children?: React.ReactNode;
@@ -270,11 +293,15 @@ 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;
     disabled?: boolean;
     style?: ViewStyle;
@@ -287,7 +314,12 @@ interface SheetProps {
     title?: string;
     description?: string;
     children?: React.ReactNode;
+    /**
+     * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
+     * absolute point values (`300`). Defaults to `['50%']`.
+     */
     snapPoints?: (string | number)[];
+    /** Style for the inner `BottomSheetView` content container. */
     style?: ViewStyle;
 }
 declare function Sheet({ open, onClose, title, description, children, snapPoints, style, }: SheetProps): React.JSX.Element;
@@ -301,8 +333,10 @@ 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;
@@ -315,6 +349,7 @@ interface ToastItem {
     title?: string;
     description?: string;
     variant?: ToastVariant;
+    /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
 }
 interface ToastContextValue {
@@ -332,4 +367,23 @@ interface ToastProviderProps {
 }
 declare function ToastProvider({ children }: ToastProviderProps): 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, 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 CurrencyInputProps {
+    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 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 };

package/dist/index.d.ts

@@ -20,6 +20,8 @@ type ThemeColors = {
     border: string;
     input: string;
     ring: string;
+    success: string;
+    successForeground: string;
 };
 type Theme = {
     light?: Partial<ThemeColors>;
@@ -68,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;
+    /** Side the icon appears on. Defaults to `'left'`. */
+    iconPosition?: 'left' | 'right';
 }
-declare function Button({ label, variant, size, loading, fullWidth, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ label, variant, size, loading, fullWidth, icon, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 interface TextProps extends TextProps$1 {
@@ -80,10 +86,14 @@ declare function Text({ variant, color, style, children, ...props }: TextProps):
 
 interface InputProps extends TextInputProps {
     label?: string;
+    /** Red helper text below the input; also changes border to `destructive` color. Takes priority over `hint`. */
     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. */
+    containerStyle?: ViewStyle;
 }
-declare function Input({ label, error, hint, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
+declare function Input({ label, error, hint, containerStyle, style, onFocus, onBlur, ...props }: InputProps): React.JSX.Element;
 
 type BadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline';
 interface BadgeProps {
@@ -147,7 +157,9 @@ declare function Skeleton({ width, height, borderRadius, style }: SkeletonProps)
 
 type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
 interface AvatarProps {
+    /** Remote image URI. Falls back to `fallback` initials on error or when omitted. */
     src?: string;
+    /** Up to 2 characters shown when the image is unavailable. Auto-uppercased. Defaults to `'?'`. */
     fallback?: string;
     size?: AvatarSize;
     style?: ViewStyle;
@@ -165,7 +177,9 @@ interface AlertProps {
 declare function Alert({ title, description, variant, icon, style }: AlertProps): React.JSX.Element;
 
 interface ProgressProps {
+    /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
     value?: number;
+    /** Maximum value. Defaults to `100`. */
     max?: number;
     style?: ViewStyle;
 }
@@ -182,11 +196,16 @@ declare function EmptyState({ icon, title, description, action, style }: EmptySt
 
 interface TextareaProps extends TextInputProps {
     label?: string;
+    /** Red helper text below the textarea; also changes border to `destructive` color. Takes priority over `hint`. */
     error?: string;
+    /** Helper text shown below the textarea when there is no error. */
     hint?: string;
+    /** Number of visible text rows. Defaults to `4`. Controls `numberOfLines` and `minHeight`. */
     rows?: number;
+    /** Style for the outer container `View`. Use `style` (from `TextInputProps`) to style the `TextInput` itself. */
+    containerStyle?: ViewStyle;
 }
-declare function Textarea({ label, error, hint, rows, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
+declare function Textarea({ label, error, hint, rows, containerStyle, style, onFocus, onBlur, ...props }: TextareaProps): React.JSX.Element;
 
 interface CheckboxProps {
     checked?: boolean;
@@ -195,7 +214,7 @@ interface CheckboxProps {
     disabled?: boolean;
     style?: ViewStyle;
 }
-declare function Checkbox({ checked, onCheckedChange, label, disabled, style }: CheckboxProps): React.JSX.Element;
+declare function Checkbox({ checked, onCheckedChange, label, disabled, style, }: CheckboxProps): React.JSX.Element;
 
 interface SwitchProps {
     checked?: boolean;
@@ -237,6 +256,10 @@ interface TabItem {
 }
 interface TabsProps {
     tabs: TabItem[];
+    /**
+     * Controlled active tab value. When omitted the component manages state internally
+     * (uncontrolled), defaulting to the first tab.
+     */
     value?: string;
     onValueChange?: (value: string) => void;
     children?: React.ReactNode;
@@ -270,11 +293,15 @@ 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;
     disabled?: boolean;
     style?: ViewStyle;
@@ -287,7 +314,12 @@ interface SheetProps {
     title?: string;
     description?: string;
     children?: React.ReactNode;
+    /**
+     * Heights the sheet can snap to. Accepts percentage strings (`'50%'`) or
+     * absolute point values (`300`). Defaults to `['50%']`.
+     */
     snapPoints?: (string | number)[];
+    /** Style for the inner `BottomSheetView` content container. */
     style?: ViewStyle;
 }
 declare function Sheet({ open, onClose, title, description, children, snapPoints, style, }: SheetProps): React.JSX.Element;
@@ -301,8 +333,10 @@ 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;
@@ -315,6 +349,7 @@ interface ToastItem {
     title?: string;
     description?: string;
     variant?: ToastVariant;
+    /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
 }
 interface ToastContextValue {
@@ -332,4 +367,23 @@ interface ToastProviderProps {
 }
 declare function ToastProvider({ children }: ToastProviderProps): 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, 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 CurrencyInputProps {
+    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 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 };