@retray-dev/ui-kit 1.0.0 → 1.5.0

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 {