@ramses-superapp/ramses-ui/src/types/props.ts

Skinless UI primitives for Ramses Built Apps

import type {
  ImageSourcePropType,
  TextStyle,
  ViewStyle,
} from 'react-native';

/* ── RsText ─────────────────────────────────────────────── */
export interface RsSkinlessTextProps {
  text?: string;
  children?: React.ReactNode;
  style?: TextStyle;
  numberOfLines?: number;
  selectable?: boolean;
}

/* ── RsButton ───────────────────────────────────────────── */
export interface RsSkinlessButtonProps {
  label?: string;
  children?: React.ReactNode;
  onPress?: () => void;
  onLongPress?: () => void;
  disabled?: boolean;
  style?: ViewStyle;
  labelStyle?: TextStyle;
  accessibilityLabel?: string;
}

/* ── RsTextInput ────────────────────────────────────────── */
export interface RsSkinlessTextInputProps {
  value?: string;
  onChangeText?: (text: string) => void;
  placeholder?: string;
  secureTextEntry?: boolean;
  multiline?: boolean;
  maxLength?: number;
  keyboardType?:
    | 'default'
    | 'numeric'
    | 'email-address'
    | 'phone-pad'
    | 'number-pad'
    | 'decimal-pad';
  autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
  style?: ViewStyle;
  textStyle?: TextStyle;
  editable?: boolean;
  onFocus?: () => void;
  onBlur?: () => void;
}

/* ── RsDivider ──────────────────────────────────────────── */
export interface RsSkinlessDividerProps {
  orientation?: 'horizontal' | 'vertical';
  style?: ViewStyle;
}

/* ── RsRowView ──────────────────────────────────────────── */
export interface RsSkinlessRowViewProps {
  children?: React.ReactNode;
  style?: ViewStyle;
  gap?: number;
  align?: 'start' | 'center' | 'end' | 'stretch';
  justify?: 'start' | 'center' | 'end' | 'between' | 'around';
}

/* ── RsToggleButton ─────────────────────────────────────── */
export interface RsSkinlessToggleButtonProps {
  value: boolean;
  onToggle: (next: boolean) => void;
  disabled?: boolean;
  style?: ViewStyle;
  accessibilityLabel?: string;
}

/* ── RsImage ────────────────────────────────────────────── */
export interface RsSkinlessImageProps {
  source: ImageSourcePropType | { uri: string };
  resizeMode?: 'cover' | 'contain' | 'stretch' | 'center';
  style?: ViewStyle;
  alt?: string;
  onLoad?: () => void;
  onError?: () => void;
}

/* ── RsIcon ─────────────────────────────────────────────── */
export interface RsSkinlessIconProps {
  name: string;
  source?: 'feather' | 'material' | 'ionicons';
  size?: number;
  style?: ViewStyle;
}

/* ── RsModal ────────────────────────────────────────────── */
export interface RsSkinlessModalProps {
  visible: boolean;
  onClose: () => void;
  animationType?: 'fade' | 'slide' | 'none';
  children: React.ReactNode;
  style?: ViewStyle;
}

/* ── RsBottomSheet ──────────────────────────────────────── */
export interface RsSkinlessBottomSheetProps {
  visible: boolean;
  onClose: () => void;
  snapPoints?: number[];
  children: React.ReactNode;
  style?: ViewStyle;
}

/* ── RsTabBar ───────────────────────────────────────────── */
export interface RsSkinlessTabBarProps {
  tabs: Array<{ key: string; label: string; icon?: string }>;
  activeTab: string;
  onTabChange: (key: string) => void;
  style?: ViewStyle;
}

/* ── RsToast ────────────────────────────────────────────── */
export interface RsSkinlessToastProps {
  visible: boolean;
  message: string;
  duration?: number;
  position?: 'top' | 'bottom';
  onDismiss?: () => void;
  style?: ViewStyle;
}

/* ── RsProgressBar ──────────────────────────────────────── */
export interface RsSkinlessProgressBarProps {
  /** 0–1 */
  progress: number;
  style?: ViewStyle;
}

/* ── RsSkeleton ─────────────────────────────────────────── */
export interface RsSkinlessSkeletonProps {
  width?: number;
  height?: number;
  borderRadius?: number;
  style?: ViewStyle;
}

/* ── RsBadge ────────────────────────────────────────────── */
export interface RsSkinlessBadgeProps {
  count?: number;
  visible?: boolean;
  children: React.ReactNode;
  style?: ViewStyle;
}

/* ── RsChip ─────────────────────────────────────────────── */
export interface RsSkinlessChipProps {
  label: string;
  selected?: boolean;
  onPress?: () => void;
  disabled?: boolean;
  style?: ViewStyle;
}

/* ── RsSlider ───────────────────────────────────────────── */
export interface RsSkinlessSliderProps {
  value: number;
  minimumValue?: number;
  maximumValue?: number;
  step?: number;
  onValueChange?: (value: number) => void;
  disabled?: boolean;
  style?: ViewStyle;
}