@retray-dev/ui-kit 2.5.2 → 2.6.0

package/dist/index.d.ts

@@ -75,10 +75,18 @@ interface ButtonProps extends TouchableOpacityProps {
         size: ButtonSize;
         variant: ButtonVariant;
     }) => React.ReactNode);
+    /**
+     * Icon name from `@expo/vector-icons` (e.g. `"home"`, `"star"`, `"arrow-right"`).
+     * See https://icons.expo.fyi to browse available icons.
+     * Takes precedence over `icon` when both are supplied.
+     */
+    iconName?: string;
+    /** Override the resolved icon color. Defaults to the label foreground color for the active variant. */
+    iconColor?: string;
     /** Side the icon appears on. Defaults to `'left'`. */
     iconPosition?: 'left' | 'right';
 }
-declare function Button({ label, variant, size, loading, fullWidth, icon, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ label, variant, size, loading, fullWidth, icon, iconName, iconColor, iconPosition, disabled, style, onPress, ...props }: ButtonProps): React.JSX.Element;
 
 type TextVariant = 'h1' | 'h2' | 'h3' | 'body' | 'caption' | 'label';
 interface TextProps extends TextProps$1 {
@@ -101,12 +109,26 @@ interface InputProps extends TextInputProps {
     prefixStyle?: TextStyle;
     /** Style applied to suffix text if suffix is a string. */
     suffixStyle?: TextStyle;
+    /**
+     * Icon name from `@expo/vector-icons` rendered before the input text.
+     * See https://icons.expo.fyi. Takes precedence over `prefix`.
+     */
+    prefixIcon?: string;
+    /**
+     * Icon name from `@expo/vector-icons` rendered after the input text.
+     * See https://icons.expo.fyi. Takes precedence over `suffix` (unless `type="password"`).
+     */
+    suffixIcon?: string;
+    /** Override the resolved prefix icon color. Defaults to `mutedForeground`. */
+    prefixIconColor?: string;
+    /** Override the resolved suffix icon color. Defaults to `mutedForeground`. */
+    suffixIconColor?: string;
     /** 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, prefix, suffix, prefixStyle, suffixStyle, type, containerStyle, style, onFocus, onBlur, secureTextEntry, ...props }: InputProps): React.JSX.Element;
+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 BadgeSize = 'sm' | 'md' | 'lg';
@@ -118,9 +140,16 @@ interface BadgeProps {
     size?: BadgeSize;
     /** Icon rendered before the label/children. */
     icon?: React.ReactNode;
+    /**
+     * Icon name from `@expo/vector-icons` rendered before the label.
+     * See https://icons.expo.fyi. Takes precedence over `icon`.
+     */
+    iconName?: string;
+    /** Override the resolved icon color. Defaults to the variant foreground color. */
+    iconColor?: string;
     style?: ViewStyle;
 }
-declare function Badge({ label, children, variant, size, icon, style }: BadgeProps): React.JSX.Element;
+declare function Badge({ label, children, variant, size, icon, iconName, iconColor, style }: BadgeProps): React.JSX.Element;
 
 type CardVariant = 'elevated' | 'outlined' | 'filled';
 interface CardProps {
@@ -196,9 +225,16 @@ interface AlertBannerProps {
     description?: string;
     variant?: AlertBannerVariant;
     icon?: React.ReactNode;
+    /**
+     * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+     * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
+     */
+    iconName?: string;
+    /** Override the resolved icon color. Defaults to the variant title color. */
+    iconColor?: string;
     style?: ViewStyle;
 }
-declare function AlertBanner({ title, description, variant, icon, style }: AlertBannerProps): React.JSX.Element;
+declare function AlertBanner({ title, description, variant, icon, iconName, iconColor, style }: AlertBannerProps): React.JSX.Element;
 
 interface ProgressProps {
     /** Current progress value. Clamped to `[0, max]`. Defaults to `0`. */
@@ -211,6 +247,13 @@ declare function Progress({ value, max, style }: ProgressProps): React.JSX.Eleme
 
 interface EmptyStateProps {
     icon?: React.ReactNode;
+    /**
+     * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+     * Takes precedence over `icon`. Sized automatically to fit the slot (48 default, 32 compact).
+     */
+    iconName?: string;
+    /** Override the resolved icon color. Defaults to `mutedForeground`. */
+    iconColor?: string;
     title: string;
     description?: string;
     action?: React.ReactNode;
@@ -218,7 +261,7 @@ interface EmptyStateProps {
     size?: 'default' | 'compact';
     style?: ViewStyle;
 }
-declare function EmptyState({ icon, title, description, action, size, style }: EmptyStateProps): React.JSX.Element;
+declare function EmptyState({ icon, iconName, iconColor, title, description, action, size, style }: EmptyStateProps): React.JSX.Element;
 
 interface TextareaProps extends TextInputProps {
     label?: string;
@@ -262,8 +305,22 @@ interface ToggleProps extends TouchableOpacityProps {
     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);
+    /**
+     * Icon name from `@expo/vector-icons` shown when not pressed.
+     * See https://icons.expo.fyi. Takes precedence over `icon`.
+     */
+    iconName?: string;
+    /**
+     * Icon name from `@expo/vector-icons` shown when pressed/active.
+     * See https://icons.expo.fyi. Takes precedence over `activeIcon`.
+     */
+    activeIconName?: string;
+    /** Override the resolved inactive icon color. Defaults to `mutedForeground`. */
+    iconColor?: string;
+    /** Override the resolved active icon color. Defaults to `primary`. */
+    activeIconColor?: string;
 }
-declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, disabled, style, ...props }: ToggleProps): React.JSX.Element;
+declare function Toggle({ pressed, onPressedChange, variant, size, label, icon, activeIcon, iconName, activeIconName, iconColor, activeIconColor, disabled, style, ...props }: ToggleProps): React.JSX.Element;
 
 interface RadioOption {
     label: string;
@@ -378,6 +435,13 @@ interface ToastItem {
     description?: string;
     variant?: ToastVariant;
     icon?: React.ReactNode;
+    /**
+     * Icon name from `@expo/vector-icons`. See https://icons.expo.fyi.
+     * Takes precedence over `icon`. When neither is set, a default variant icon is shown.
+     */
+    iconName?: string;
+    /** Override the resolved icon color. Defaults to the variant text color. */
+    iconColor?: string;
     /** Auto-dismiss delay in milliseconds. Defaults to `3000`. */
     duration?: number;
 }
@@ -446,6 +510,20 @@ interface ListItemProps {
     trailing?: React.ReactNode | string;
     /** @deprecated Use `leftRender` instead. */
     icon?: React.ReactNode;
+    /**
+     * Icon name from `@expo/vector-icons` rendered in the left slot.
+     * See https://icons.expo.fyi. Takes precedence over `leftRender`.
+     */
+    leftIcon?: string;
+    /**
+     * Icon name from `@expo/vector-icons` rendered in the right slot.
+     * See https://icons.expo.fyi. Takes precedence over `rightRender`.
+     */
+    rightIcon?: string;
+    /** Override the resolved left icon color. Defaults to `foreground`. */
+    leftIconColor?: string;
+    /** Override the resolved right icon color. Defaults to `mutedForeground`. */
+    rightIconColor?: string;
     title: string;
     /** Secondary line below the title. */
     subtitle?: string;
@@ -471,7 +549,7 @@ interface ListItemProps {
     /** Style applied to the caption Text. */
     captionStyle?: TextStyle;
 }
-declare function ListItem({ leftRender, rightRender, trailing, icon, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, }: ListItemProps): React.JSX.Element;
+declare function ListItem({ leftRender, rightRender, trailing, icon, leftIcon, rightIcon, leftIconColor, rightIconColor, title, subtitle, caption, variant, showChevron, showSeparator, onPress, disabled, style, titleStyle, subtitleStyle, captionStyle, }: ListItemProps): React.JSX.Element;
 
 interface ChipProps {
     label: string;
@@ -525,4 +603,16 @@ 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, 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 };
+type IconFamily = 'Feather' | 'AntDesign' | 'Entypo' | 'FontAwesome5' | 'MaterialIcons' | 'Ionicons';
+interface IconProps {
+    /** Icon name from any supported @expo/vector-icons family. See https://icons.expo.fyi */
+    name: string;
+    size: number;
+    color: string;
+    /** Override the resolved family when the same name exists in multiple families. */
+    family?: IconFamily;
+}
+declare function Icon({ name, size, color, family }: IconProps): React.ReactElement | null;
+declare function renderIcon(name: string, size: number, color: string): React.ReactElement | null;
+
+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, Icon, type IconFamily, type IconProps, 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, renderIcon, useTheme, useToast };