@retray-dev/ui-kit 1.6.0 → 1.8.0

package/dist/index.d.ts

@@ -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 };