Skip to main content

@54vie/kit Components

Buttons​

Button​

interface ButtonProps {
  children: React.ReactNode;
  variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
  size?: 'small' | 'medium' | 'large';
  icon?: string;
  iconPosition?: 'left' | 'right';
  loading?: boolean;
  disabled?: boolean;
  fullWidth?: boolean;
  onPress?: () => void;
}

IconButton​

interface IconButtonProps {
  icon: string;
  size?: 'small' | 'medium' | 'large';
  variant?: 'filled' | 'outlined' | 'ghost';
  disabled?: boolean;
  onPress?: () => void;
}

FAB​

interface FABProps {
  icon: string;
  size?: 'small' | 'medium' | 'large';
  variant?: 'primary' | 'secondary' | 'surface';
  label?: string;
  disabled?: boolean;
  onPress?: () => void;
}

Inputs​

Input​

interface InputProps {
  value?: string;
  onChangeText?: (text: string) => void;
  label?: string;
  placeholder?: string;
  error?: string;
  helper?: string;
  secureTextEntry?: boolean;
  keyboardType?: KeyboardTypeOptions;
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  autoCorrect?: boolean;
  disabled?: boolean;
  multiline?: boolean;
  numberOfLines?: number;
  leftIcon?: string;
  rightIcon?: string;
  onRightIconPress?: () => void;
}

SearchInput​

interface SearchInputProps {
  value?: string;
  onChangeText?: (text: string) => void;
  placeholder?: string;
  onSubmit?: () => void;
  onClear?: () => void;
  loading?: boolean;
}

OTPInput​

interface OTPInputProps {
  length: number;
  value: string;
  onChange: (value: string) => void;
  autoFocus?: boolean;
  secureTextEntry?: boolean;
  error?: boolean;
}

Cards​

Card​

interface CardProps {
  children: React.ReactNode;
  variant?: 'elevated' | 'filled' | 'outlined';
  onPress?: () => void;
  disabled?: boolean;
}

CardHeader​

interface CardHeaderProps {
  title: string;
  subtitle?: string;
  avatar?: ImageSourcePropType;
  action?: React.ReactNode;
}

Lists​

ListItem​

interface ListItemProps {
  title: string;
  description?: string;
  leftIcon?: string;
  leftAvatar?: ImageSourcePropType;
  rightIcon?: string;
  rightText?: string;
  onPress?: () => void;
  disabled?: boolean;
}

Modals​

interface ModalProps {
  visible: boolean;
  onDismiss: () => void;
  children: React.ReactNode;
  dismissable?: boolean;
}

BottomSheet​

interface BottomSheetProps {
  visible: boolean;
  onDismiss: () => void;
  children: React.ReactNode;
  snapPoints?: number[];
  enablePanDownToClose?: boolean;
}

Feedback​

Toast​

interface ToastOptions {
  message: string;
  type?: 'success' | 'error' | 'info' | 'warning';
  duration?: number;
  action?: {
    label: string;
    onPress: () => void;
  };
}

// Static methods
Toast.show(options: ToastOptions): void;
Toast.success(message: string): void;
Toast.error(message: string): void;
Toast.info(message: string): void;
Toast.warning(message: string): void;

Loading​

interface LoadingProps {
  size?: 'small' | 'large';
  color?: string;
}

Skeleton​

interface SkeletonProps {
  width?: number | string;
  height?: number | string;
  borderRadius?: number;
}

// Variants
Skeleton.Circle: (props: { size: number }) => JSX.Element;
Skeleton.Text: (props: { lines?: number }) => JSX.Element;
Skeleton.Card: () => JSX.Element;