rn-vs-lb 1.0.63 → 1.0.65

package/components/Poll/PollCardList.stories.tsx

@@ -29,6 +29,7 @@ Default.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=11',
   votesCount: 42,
   createdAt: '2 days ago',
+  votesLabel: 'votes',
 };
 
 export const WithLongQuestion = Template.bind({});
@@ -39,6 +40,7 @@ WithLongQuestion.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=5',
   votesCount: 128,
   createdAt: '5 hours ago',
+  votesLabel: 'votes',
 };
 
 export const WithoutDate = Template.bind({});
@@ -48,6 +50,7 @@ WithoutDate.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=24',
   votesCount: 8,
   createdAt: null,
+  votesLabel: 'votes',
 };
 
 export const MinimalInfo = Template.bind({});
@@ -57,4 +60,5 @@ MinimalInfo.args = {
   creatorAvatar: 'https://i.pravatar.cc/150?img=36',
   votesCount: 230,
   createdAt: 'just now',
+  votesLabel: 'votes',
 };

package/components/Poll/PollCardList.tsx

@@ -9,6 +9,7 @@ interface PollCardProps {
   votesCount: number;
   onPress?: () => void;
   createdAt: string | null;
+  votesLabel: string;
 }
 
 const PollCardList: React.FC<PollCardProps> = ({
@@ -17,7 +18,8 @@ const PollCardList: React.FC<PollCardProps> = ({
   creatorAvatar,
   votesCount,
   onPress,
-  createdAt
+  createdAt,
+  votesLabel,
 }) => {
   const { globalStyleSheet, commonStyles, typography } = useTheme();
   const styles = getStyles({ commonStyles });
@@ -33,7 +35,7 @@ const PollCardList: React.FC<PollCardProps> = ({
         </View>
         <Text style={typography.bodyXs}>{creatorName}</Text>
         <View style={globalStyleSheet.flexRowCenterBetween}>
-          <Text style={typography.bodyXs}>{votesCount} votes</Text>
+          <Text style={typography.bodyXs}>{votesCount} {votesLabel}</Text>
           <Text style={typography.bodyXs}>{createdAt}</Text>
         </View>
       </View>

package/components/Profile/ProfilePhotoBanner.stories.tsx

@@ -34,11 +34,18 @@ const closeHandler = () => {
 
 export const Default = Template.bind({});
 Default.args = {
+  message: 'Upload a photo — it will help others recognize and trust you.',
+  buttonText: 'Add Photo',
 };
 
 export const InsideScrollableList: StoryFn = () => (
   <ScrollView contentContainerStyle={{ gap: 12, padding: 16 }}>
-    <ProfilePhotoBanner onAddPhoto={addPhotoHandler} onClose={closeHandler} />
+    <ProfilePhotoBanner
+      onAddPhoto={addPhotoHandler}
+      onClose={closeHandler}
+      message="Upload a photo — it will help others recognize and trust you."
+      buttonText="Add Photo"
+    />
     <View style={{ height: 150, backgroundColor: '#f0f0f0', borderRadius: 12 }} />
     <View style={{ height: 150, backgroundColor: '#f5f5f5', borderRadius: 12 }} />
     <View style={{ height: 150, backgroundColor: '#fafafa', borderRadius: 12 }} />
@@ -61,6 +68,8 @@ export const DismissibleBehaviour: StoryFn = () => {
             closeHandler();
             setVisible(false);
           }}
+          message="Upload a photo — it will help others recognize and trust you."
+          buttonText="Add Photo"
         />
       )}
       <View style={{ height: 160, backgroundColor: '#d9ecff', borderRadius: 16 }} />

package/components/Profile/ProfilePhotoBanner.tsx

@@ -7,21 +7,23 @@ import Button from '../Button/Button';
 interface Props {
   onAddPhoto: () => void;
   onClose: () => void;
+  message: string;
+  buttonText: string;
 }
 
-const ProfilePhotoBanner: React.FC<Props> = ({ onAddPhoto, onClose }) => {
+const ProfilePhotoBanner: React.FC<Props> = ({ onAddPhoto, onClose, message, buttonText }) => {
   const { theme, typography } = useTheme();
   const styles = getStyles({ theme });
 
   return (
     <View style={styles.container}>
       <View style={styles.row}>
-        <Text style={[typography.body, styles.text]}>Upload a photo — it will help others recognize and trust you.</Text>
+        <Text style={[typography.body, styles.text]}>{message}</Text>
         <TouchableOpacity onPress={onClose} style={styles.closeButton}>
           <Ionicons name="close" size={20} color={theme.text} />
         </TouchableOpacity>
       </View>
-      <Button title="Add Photo" onPress={onAddPhoto} />
+      <Button title={buttonText} onPress={onAddPhoto} />
     </View>
   );
 };

package/components/Specialist/Hero.stories.tsx

@@ -27,6 +27,7 @@ const meta = {
     profession: 'Makeup Artist',
     addressLine: '12 Riverside Dr, NYC',
     showOnMap: true,
+    mapLabel: 'On the map',
   },
 } satisfies Meta<typeof Hero>;
 

package/components/Specialist/Hero.tsx

@@ -15,6 +15,7 @@ export type HeroProps = {
   onMessage?: () => void;
   onPressMap?: () => void;
   socials?: React.ReactNode; // сюда можно передать <SocialIconsRow .../>
+  mapLabel: string;
 };
 
 const Hero: React.FC<HeroProps> = ({
@@ -29,6 +30,7 @@ const Hero: React.FC<HeroProps> = ({
   onMessage,
   onPressMap,
   socials,
+  mapLabel,
 }) => {
   const { theme, globalStyleSheet, typography } = useTheme();
   const s = getStyles({ theme, globalStyleSheet });
@@ -67,7 +69,7 @@ const Hero: React.FC<HeroProps> = ({
 
         {showOnMap && (
           <TouchableOpacity style={[globalStyleSheet.flexRowCenterEnd, { marginTop: 6 }]} onPress={onPressMap} activeOpacity={0.8}>
-            <Text style={{ color: theme.primary, fontWeight: '600' }}>On the map</Text>
+            <Text style={{ color: theme.primary, fontWeight: '600' }}>{mapLabel}</Text>
             <Ionicons name="chevron-forward" size={16} color={theme.primary} />
           </TouchableOpacity>
         )}

package/components/Specialist/ServicesList.stories.tsx

@@ -41,6 +41,7 @@ const meta = {
     title: 'Services',
     total: 12,
     services: SERVICES,
+    moreLabel: 'MORE',
   },
 } satisfies Meta<typeof ServicesList>;
 

package/components/Specialist/ServicesList.tsx

@@ -14,15 +14,16 @@ export type ServiceItem = {
 };
 
 export type ServicesListProps = {
-  title?: string;
+  title: string;
   total?: number;            // для счетчика справа от заголовка
   services: ServiceItem[];
   onPressService?: (item: ServiceItem, index: number) => void;
   onPressMore?: () => void;
   style?: ViewStyle;
+  moreLabel: string;
 };
 
-const ServicesList: React.FC<ServicesListProps> = ({ title = 'Services', total, services, onPressService, onPressMore, style }) => {
+const ServicesList: React.FC<ServicesListProps> = ({ title, total, services, onPressService, onPressMore, style, moreLabel }) => {
   const { theme } = useTheme();
   const s = getStyles(theme);
 
@@ -36,7 +37,7 @@ const ServicesList: React.FC<ServicesListProps> = ({ title = 'Services', total,
         </Text>
         {!!onPressMore && (
           <TouchableOpacity onPress={onPressMore}>
-            <Text style={s.moreLink}>MORE</Text>
+            <Text style={s.moreLink}>{moreLabel}</Text>
           </TouchableOpacity>
         )}
       </View>

package/components/UI/DeletedState.stories.tsx

@@ -16,9 +16,14 @@ const Template: StoryFn<DeletedStateProps> = (args) => <DeletedState {...args} /
 const goBackHandler = () => {};
 
 export const WithoutAction = Template.bind({});
-WithoutAction.args = {};
+WithoutAction.args = {
+  title: 'Deleted',
+  buttonText: 'Go back',
+};
 
 export const WithGoBack = Template.bind({});
 WithGoBack.args = {
   goBack: goBackHandler,
+  title: 'Deleted',
+  buttonText: 'Go back',
 };

package/components/UI/DeletedState.tsx

@@ -7,9 +7,11 @@ import { Button } from '../Button';
 
 type Props = {
   goBack?: () => void;
+  title: string;
+  buttonText: string;
 }
 
-const DeletedState: FC<Props> = ({ goBack }) => {
+const DeletedState: FC<Props> = ({ goBack, title, buttonText }) => {
   const { theme, commonStyles, typography } = useTheme();
   const styles = getStyles(theme);
 
@@ -17,9 +19,16 @@ const DeletedState: FC<Props> = ({ goBack }) => {
     <View style={[commonStyles.container, styles.container]}>
       <Ionicons name="file-tray-outline" size={50} color={theme.placeholder} />
       <Spacer size='xxs' />
-      <Text style={[typography.titleH6Regular, { color: theme.placeholder }]}>Deleted</Text>
+      <Text style={[typography.titleH6Regular, { color: theme.placeholder }]}>{title}</Text>
       <Spacer size='lg' />
-      {goBack && <Button onPress={goBack} type='gray-outline' title='Go back' textStyle={[typography.body, { color: theme.greyText }]} />}
+      {goBack && (
+        <Button
+          onPress={goBack}
+          type='gray-outline'
+          title={buttonText}
+          textStyle={[typography.body, { color: theme.greyText }]}
+        />
+      )}
     </View>
   );
 };

package/components/UI/DescriptionMore.stories.tsx

@@ -15,6 +15,8 @@ const meta = {
       'Passionate about natural looks, skin preparation, and color theory. ' +
       'Open for travel and on-location work; kit is fully sanitized and cruelty-free.',
     expanded: false,
+    expandedLabel: 'Less',
+    collapsedLabel: 'More details',
   },
 } satisfies Meta<typeof DescriptionSection>;
 

package/components/UI/DescriptionMore.tsx

@@ -4,14 +4,24 @@ import { useTheme, ThemeType } from '../../theme';
 import CardContainer from './CardContainer';
 
 export type DescriptionSectionProps = {
-  title?: string;
+  title: string;
   text: string;
   expanded: boolean;
   onToggle: () => void;
   style?: ViewStyle;
+  expandedLabel: string;
+  collapsedLabel: string;
 };
 
-const DescriptionSection: React.FC<DescriptionSectionProps> = ({ title = 'Description', text, expanded, onToggle, style }) => {
+const DescriptionSection: React.FC<DescriptionSectionProps> = ({
+  title,
+  text,
+  expanded,
+  onToggle,
+  style,
+  expandedLabel,
+  collapsedLabel,
+}) => {
   const { theme, typography } = useTheme();
   const s = getStyles(theme);
 
@@ -23,7 +33,7 @@ const DescriptionSection: React.FC<DescriptionSectionProps> = ({ title = 'Descri
           {text}
         </Text>
         <TouchableOpacity onPress={onToggle}>
-          <Text style={s.moreLink}>{expanded ? 'Less' : 'More details'}</Text>
+          <Text style={s.moreLink}>{expanded ? expandedLabel : collapsedLabel}</Text>
         </TouchableOpacity>
       </CardContainer>
     </View>

package/components/UI/EmptyState.stories.tsx

@@ -9,6 +9,9 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn = () => <EmptyState />;
+const Template: StoryFn<React.ComponentProps<typeof EmptyState>> = (args) => <EmptyState {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  message: 'No Data',
+};

package/components/UI/EmptyState.tsx

@@ -6,9 +6,10 @@ import { ThemeType, useTheme } from '../../theme';
 
 type Props = {
   reverted?: boolean;
+  message: string;
 }
 
-const EmptyState = () => {
+const EmptyState: React.FC<Props> = ({ message }) => {
   const { theme, commonStyles, typography } = useTheme();
   const styles = getStyles(theme);
 
@@ -16,7 +17,7 @@ const EmptyState = () => {
     <View style={[commonStyles.container, styles.container]}>
       <Ionicons name="file-tray-outline" size={50} color={theme.placeholder} />
       <Spacer size='xxs' />
-      <Text style={[typography.titleH6Regular, { color: theme.placeholder }]}>No Data</Text>
+      <Text style={[typography.titleH6Regular, { color: theme.placeholder }]}>{message}</Text>
     </View>
   );
 };

package/components/UI/NoAuth.stories.tsx

@@ -18,4 +18,7 @@ const Template: StoryFn<NoAuthProps> = (args) => <NoAuth {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
+  title: 'Welcome!',
+  description: 'To continue, please log in to the system.',
+  buttonText: 'Log In',
 };

package/components/UI/NoAuth.tsx

@@ -7,21 +7,22 @@ import { useTheme } from '../../theme';
 
 type NoAuthProps = {
     onPress: () => void;
+    title: string;
+    description: string;
+    buttonText: string;
 }
 
-export const NoAuth: FC<NoAuthProps> = ({ onPress }) => {
+export const NoAuth: FC<NoAuthProps> = ({ onPress, title, description, buttonText }) => {
     const { commonStyles, typography, theme } = useTheme();
 
     return (
         <View style={[commonStyles.container, {backgroundColor: theme.background}]}>
-            <Text style={typography.titleH3}>Welcome!</Text>
+            <Text style={typography.titleH3}>{title}</Text>
             <Spacer size='xs' />
-            <Text style={typography.body}>
-                To continue, please log in to the system.
-            </Text>
+            <Text style={typography.body}>{description}</Text>
             <Spacer size='lg' />
             <View style={styles.button}>
-                <Button title='Log In' onPress={onPress} />
+                <Button title={buttonText} onPress={onPress} />
             </View>
         </View>
     );

package/components/UI/ParticipantItem.stories.tsx

@@ -32,12 +32,19 @@ PendingParticipant.args = {
   participant: {
     _id: 'participant-1',
     status: 'PENDING',
+    name: 'Jane',
+    lastname: 'Cooper',
+    avatarFile: '',
   },
   fullName: 'Jane Cooper',
   avatarUrl: 'https://i.pravatar.cc/100?img=5',
   isMe: true,
   myId: 'host-1',
   isModerated: true,
+  confirmLabel: 'Confirm',
+  rejectLabel: 'Reject',
+  deleteLabel: 'Delete',
+  youLabel: 'you',
 };
 
 export const ConfirmedGuest = Template.bind({});
@@ -45,12 +52,19 @@ ConfirmedGuest.args = {
   participant: {
     _id: 'participant-2',
     status: 'CONFIRMED',
+    name: 'Robert',
+    lastname: 'Fox',
+    avatarFile: '',
   },
   fullName: 'Robert Fox',
   avatarUrl: 'https://i.pravatar.cc/100?img=12',
   isMe: true,
   myId: 'participant-2',
   isModerated: false,
+  confirmLabel: 'Confirm',
+  rejectLabel: 'Reject',
+  deleteLabel: 'Delete',
+  youLabel: 'you',
 };
 
 export const ReadOnlyView = Template.bind({});
@@ -58,10 +72,17 @@ ReadOnlyView.args = {
   participant: {
     _id: 'participant-3',
     status: 'REJECTED',
+    name: 'Theresa',
+    lastname: 'Webb',
+    avatarFile: '',
   },
   fullName: 'Theresa Webb',
   avatarUrl: 'https://i.pravatar.cc/100?img=45',
   isMe: false,
   myId: 'host-1',
   isModerated: false,
+  confirmLabel: 'Confirm',
+  rejectLabel: 'Reject',
+  deleteLabel: 'Delete',
+  youLabel: 'you',
 };

package/components/UI/ParticipantItem.tsx

@@ -15,11 +15,35 @@ type ParticipantItemProps = {
     onReject?: (userId: string) => void;
     onProfilePress: (profileId: string) => void;
     isModerated: boolean;
+    confirmLabel: string;
+    rejectLabel: string;
+    deleteLabel: string;
+    youLabel: string;
+    statusLabels?: Partial<Record<NonNullable<EventParticipant['status']>, string>>;
 };
 
-export const ParticipantItem: FC<ParticipantItemProps> = ({ fullName, avatarUrl, isModerated, participant, isMe, myId, onActionPress, onProfilePress, onConfirm, onReject }) => {
+export const ParticipantItem: FC<ParticipantItemProps> = ({
+    fullName,
+    avatarUrl,
+    isModerated,
+    participant,
+    isMe,
+    myId,
+    onActionPress,
+    onProfilePress,
+    onConfirm,
+    onReject,
+    confirmLabel,
+    rejectLabel,
+    deleteLabel,
+    youLabel,
+    statusLabels,
+}) => {
     const { globalStyleSheet, theme, sizes, commonStyles, typography } = useTheme();
     const styles = getStyles({ theme, sizes, commonStyles });
+    const statusKey = participant.status as NonNullable<EventParticipant['status']> | undefined;
+    const statusText = statusKey ? statusLabels?.[statusKey] ?? participant.status?.toLowerCase() : undefined;
+    const statusStyle = statusKey ? (styles as Record<string, typeof styles.status_default>)[`status_${statusKey}`] : undefined;
 
     return (
         <View key={participant._id} style={globalStyleSheet.flexRowCenterBetween}>
@@ -28,19 +52,19 @@ export const ParticipantItem: FC<ParticipantItemProps> = ({ fullName, avatarUrl,
                 <Text style={typography.body}>{fullName}</Text>
             </TouchableOpacity>
             <View style={globalStyleSheet.flexRowCenter}>
-                {participant.status && (
-                    <Text style={[styles.statusText, styles[`status_${participant.status}`] || styles.status_default]}>{participant.status.toLowerCase()}</Text>
+                {statusText && (
+                    <Text style={[styles.statusText, statusStyle ?? styles.status_default]}>{statusText}</Text>
                 )}
                 {isMe && myId !== participant._id && (
                     <ThreeDotsMenu
                         items={[
                             {
-                                label: 'Confirm',
+                                label: confirmLabel,
                                 icon: 'checkmark-outline',
                                 onPress: () => onConfirm && onConfirm(participant._id),
                             },
                             {
-                                label: isModerated ? 'Reject' : 'Delete',
+                                label: isModerated ? rejectLabel : deleteLabel,
                                 icon: 'close-outline',
                                 colorIcon: theme.red,
                                 onPress: () => isModerated ? (onReject && onReject(participant._id)) : onActionPress(participant._id),
@@ -49,7 +73,7 @@ export const ParticipantItem: FC<ParticipantItemProps> = ({ fullName, avatarUrl,
                     />
 
                 )}
-                {isMe && myId === participant._id && <Text style={styles.youText}>you</Text>}
+                {isMe && myId === participant._id && <Text style={styles.youText}>{youLabel}</Text>}
             </View>
         </View>
     );

package/components/UI/StepProgress.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo } from "react";
 import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
-import { ThemeType, TypographytType, SizesType, useTheme } from "rn-vs-lb/theme";
+import { ThemeType, TypographytType, SizesType, useTheme } from "../../theme";
 
 interface StepProgressProps {
   steps: { title: string; description?: string }[];

package/components/UI/ThemeSwitcher.stories.tsx

@@ -17,6 +17,10 @@ const meta: Meta = {
 
 export default meta;
 
-const Template: StoryFn = () => <ThemeSwitcher />;
+const Template: StoryFn<React.ComponentProps<typeof ThemeSwitcher>> = (args) => <ThemeSwitcher {...args} />;
 
 export const Default = Template.bind({});
+Default.args = {
+  lightModeLabel: 'Light Mode',
+  darkModeLabel: 'Dark Mode',
+};

package/components/UI/ThemeSwitcher.tsx

@@ -3,7 +3,12 @@ import { View, Text, Switch, StyleSheet } from 'react-native';
 import { FontAwesome } from '@expo/vector-icons';
 import { useTheme } from '../../theme';
 
-const ThemeSwitcher: React.FC = () => {
+interface ThemeSwitcherProps {
+    lightModeLabel: string;
+    darkModeLabel: string;
+}
+
+const ThemeSwitcher: React.FC<ThemeSwitcherProps> = ({ lightModeLabel, darkModeLabel }) => {
     const { theme, toggleTheme, isDark, globalStyleSheet, typography } = useTheme();
     // th-list puzzle-piece
     return (
@@ -11,7 +16,7 @@ const ThemeSwitcher: React.FC = () => {
             <View style={globalStyleSheet.flexRowCenter}>
                 <FontAwesome style={styles.iconContainer} name={"th-list"} size={18} color={theme.text} />
                 <Text style={[typography.titleH6Regular, { color: theme.text }]}>
-                    {isDark ? 'Dark Mode' : 'Light Mode'}
+                    {isDark ? darkModeLabel : lightModeLabel}
                 </Text>
             </View>
             <Switch

package/components/UI/UpdateRequiredView.stories.tsx

@@ -58,6 +58,7 @@ export const Default: Story = {
     title: 'Необходимо обновление',
     description:
       'Для корректной работы приложения установите последнюю версию. Нажмите кнопку ниже, чтобы перейти в магазин.',
+    updateButtonText: 'Обновить',
   },
 };
 
@@ -67,5 +68,6 @@ export const Refreshing: Story = {
     refreshing: true,
     title: 'Проверка обновлений...',
     description: 'Подождите, идет проверка доступных обновлений.',
+    updateButtonText: 'Обновить',
   },
 };

package/components/UI/UpdateRequiredView.tsx

@@ -19,9 +19,10 @@ type Props = {
   onPressUpdate: () => void;
   title: string;
   description: string;
+  updateButtonText: string;
 };
 
-export const UpdateRequiredView = memo(({ anim, refreshing, onRefresh, onPressUpdate, title, description }: Props) => {
+export const UpdateRequiredView = memo(({ anim, refreshing, onRefresh, onPressUpdate, title, description, updateButtonText }: Props) => {
   const { theme, commonStyles, typography } = useTheme() as any;
 
   const ui = {
@@ -51,7 +52,7 @@ export const UpdateRequiredView = memo(({ anim, refreshing, onRefresh, onPressUp
 
       <Spacer size="xl" />
       <View style={styles.button}>
-        <Button title="Обновить" onPress={onPressUpdate} />
+        <Button title={updateButtonText} onPress={onPressUpdate} />
       </View>
     </ScrollView>
   );

package/components/UserCards/Organazer.tsx

@@ -7,9 +7,10 @@ interface OrganizerContainerProps {
   avatarUri: string;
   organizerName: string;
   onPress: () => void;
+  roleLabel: string;
 }
 
-const Organizer: React.FC<OrganizerContainerProps> = ({ avatarUri, organizerName, onPress }) => {
+const Organizer: React.FC<OrganizerContainerProps> = ({ avatarUri, organizerName, onPress, roleLabel }) => {
   const { globalStyleSheet, sizes, commonStyles, typography } = useTheme();
   const styles = getStyles({ sizes, commonStyles });
 
@@ -17,7 +18,7 @@ const Organizer: React.FC<OrganizerContainerProps> = ({ avatarUri, organizerName
     <TouchableOpacity onPress={onPress} style={globalStyleSheet.flexRowCenter}>
       <Image source={{ uri: avatarUri }} style={styles.avatar} />
       <View>
-        <Text style={typography.body}>Organizer</Text>
+        <Text style={typography.body}>{roleLabel}</Text>
         <Text
           style={typography.titleH6Regular}
           numberOfLines={1}

package/components/UserCards/Organizer.stories.tsx

@@ -33,22 +33,26 @@ export const Default = Template.bind({});
 Default.args = {
   avatarUri: 'https://i.pravatar.cc/150?img=5',
   organizerName: 'Maria Antonova',
+  roleLabel: 'Organizer',
 };
 
 export const LongName = Template.bind({});
 LongName.args = {
   avatarUri: 'https://i.pravatar.cc/150?img=47',
   organizerName: 'Ассоциация содействия развитию креативных индустрий Белграда',
+  roleLabel: 'Organizer',
 };
 
 export const CustomAvatar = Template.bind({});
 CustomAvatar.args = {
   avatarUri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?auto=format&fit=crop&w=200&q=80',
   organizerName: 'Volunteer Labs',
+  roleLabel: 'Organizer',
 };
 
 export const WithoutAvatar = Template.bind({});
 WithoutAvatar.args = {
   avatarUri: 'https://via.placeholder.com/80x80.png?text=Org',
   organizerName: 'Placeholder Collective',
+  roleLabel: 'Organizer',
 };

package/components/UserCards/SpecialistCard.stories.tsx

@@ -59,6 +59,7 @@ Default.args = {
   services,
   gallery,
   link: 'https://images.unsplash.com/',
+  actionLabel: 'More',
 };
 
 export const WithoutServices = Template.bind({});
@@ -83,6 +84,7 @@ MinimalInfo.args = {
   fullName: 'Unknown Specialist',
   avatarUri: 'https://i.pravatar.cc/150?img=60',
   link: 'https://images.unsplash.com/',
+  actionLabel: 'More',
 };
 
 export const ExtendedServices = Template.bind({});

package/components/UserCards/SpecialistCard.tsx

@@ -13,9 +13,10 @@ interface SpecialistCardProps {
   gallery?: string[];
   link: string;
   onPress: () => void;
+  actionLabel: string;
 }
 
-const SpecialistCard: React.FC<SpecialistCardProps> = ({avatarUri, services, gallery, onPress, link, fullName, profession, city, country }) => {
+const SpecialistCard: React.FC<SpecialistCardProps> = ({avatarUri, services, gallery, onPress, link, fullName, profession, city, country, actionLabel }) => {
   const { theme, typography } = useTheme() as any;
   const styles = getStyles(theme);
 
@@ -52,7 +53,7 @@ const SpecialistCard: React.FC<SpecialistCardProps> = ({avatarUri, services, gal
           style={styles.bookBtn}
           activeOpacity={0.85}
         >
-          <Text style={styles.bookText}>More</Text>
+          <Text style={styles.bookText}>{actionLabel}</Text>
         </TouchableOpacity>
       </View>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-vs-lb",
-  "version": "1.0.63",
+  "version": "1.0.65",
   "description": "Expo Router + Storybook template ready for npm distribution.",
   "keywords": [
     "expo",