@umituz/react-native-settings 4.21.10 → 4.21.12

package/src/notifications/domains/reminders/infrastructure/storage/RemindersStore.ts

@@ -0,0 +1,148 @@
+/**
+ * Reminders Store - Zustand State Management
+ * Manages reminder state with AsyncStorage persistence
+ */
+
+import { createStore } from '@umituz/react-native-storage';
+import type { Reminder, QuietHoursConfig, NotificationPreferences } from '../../../../infrastructure/services/types';
+
+// ============================================================================
+// REMINDERS STORE
+// ============================================================================
+
+interface RemindersState {
+  reminders: Reminder[];
+}
+
+interface RemindersActions {
+  addReminder: (reminder: Reminder) => void;
+  updateReminder: (id: string, updates: Partial<Reminder>) => void;
+  deleteReminder: (id: string) => void;
+  toggleReminder: (id: string) => void;
+  resetReminders: () => void;
+}
+
+const DEFAULT_REMINDERS_STATE: RemindersState = {
+  reminders: [],
+};
+
+export const useRemindersStore = createStore<RemindersState, RemindersActions>({
+  name: 'reminders-store',
+  initialState: DEFAULT_REMINDERS_STATE,
+  persist: true,
+  actions: (set, get) => ({
+    addReminder: (reminder: Reminder) => {
+      const { reminders } = get();
+      set({ reminders: [...reminders, reminder] });
+    },
+
+    updateReminder: (id: string, updates: Partial<Reminder>) => {
+      const { reminders } = get();
+      set({
+        reminders: reminders.map(r =>
+          r.id === id ? { ...r, ...updates, updatedAt: new Date().toISOString() } : r
+        ),
+      });
+    },
+
+    deleteReminder: (id: string) => {
+      const { reminders } = get();
+      set({ reminders: reminders.filter(r => r.id !== id) });
+    },
+
+    toggleReminder: (id: string) => {
+      const { reminders } = get();
+      set({
+        reminders: reminders.map(r =>
+          r.id === id ? { ...r, enabled: !r.enabled, updatedAt: new Date().toISOString() } : r
+        ),
+      });
+    },
+
+    resetReminders: () => {
+      set({ reminders: [] });
+    },
+  }),
+});
+
+// ============================================================================
+// PREFERENCES STORE
+// ============================================================================
+
+interface PreferencesState {
+  preferences: NotificationPreferences;
+  isLoading: boolean;
+  isInitialized: boolean;
+}
+
+interface PreferencesActions {
+  initialize: () => Promise<void>;
+  updatePreferences: (updates: Partial<NotificationPreferences>) => void;
+  updateQuietHours: (quietHours: QuietHoursConfig) => void;
+  reset: () => void;
+}
+
+// ============================================================================
+// DEFAULT VALUES
+// ============================================================================
+
+const DEFAULT_PREFERENCES: NotificationPreferences = {
+  enabled: true,
+  sound: true,
+  vibration: true,
+  quietHours: {
+    enabled: false,
+    startHour: 22,
+    startMinute: 0,
+    endHour: 7,
+    endMinute: 0,
+  },
+};
+
+const initialPreferencesState: PreferencesState = {
+  preferences: DEFAULT_PREFERENCES,
+  isLoading: true,
+  isInitialized: false,
+};
+
+export const usePreferencesStore = createStore<PreferencesState, PreferencesActions>({
+  name: 'preferences-store',
+  initialState: initialPreferencesState,
+  persist: true,
+  actions: (set, get) => ({
+    initialize: async () => {
+      set({ isLoading: false, isInitialized: true });
+    },
+
+    updatePreferences: (updates: Partial<NotificationPreferences>) => {
+      const { preferences } = get();
+      set({ preferences: { ...preferences, ...updates } });
+    },
+
+    updateQuietHours: (quietHours: QuietHoursConfig) => {
+      const { preferences } = get();
+      set({ preferences: { ...preferences, quietHours } });
+    },
+
+    reset: () => {
+      set({ preferences: DEFAULT_PREFERENCES });
+    },
+  }),
+});
+
+// ============================================================================
+// SELECTOR HOOKS - REMINDERS
+// ============================================================================
+
+export const useReminders = () => useRemindersStore(state => state.reminders);
+export const useEnabledReminders = () => useRemindersStore(state => state.reminders.filter(r => r.enabled));
+export const useReminderById = (id: string) => useRemindersStore(state => state.reminders.find(r => r.id === id));
+
+// ============================================================================
+// SELECTOR HOOKS - PREFERENCES
+// ============================================================================
+
+export const useNotificationPreferences = () => usePreferencesStore(state => state.preferences);
+export const useQuietHours = () => usePreferencesStore(state => state.preferences.quietHours);
+export const useRemindersLoading = () => usePreferencesStore(state => state.isLoading);
+export const useRemindersInitialized = () => usePreferencesStore(state => state.isInitialized);

package/src/notifications/domains/reminders/presentation/components/FormButton.tsx

@@ -0,0 +1,66 @@
+/**
+ * FormButton Component
+ * Simple button for forms
+ */
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export interface FormButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+
+export const FormButton: React.FC<FormButtonProps> = ({
+  label,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const isPrimary = variant === 'primary';
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        isPrimary ? styles.primaryButton : styles.secondaryButton,
+        disabled ? styles.disabled : undefined,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, isPrimary ? styles.primaryLabel : styles.secondaryLabel]}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    button: {
+      flex: 1,
+      paddingVertical: 14,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    primaryButton: { backgroundColor: tokens.colors.primary },
+    secondaryButton: { backgroundColor: tokens.colors.surfaceSecondary },
+    disabled: { opacity: 0.5 },
+    label: { fontWeight: '600' },
+    primaryLabel: { color: tokens.colors.surface },
+    secondaryLabel: { color: tokens.colors.textPrimary },
+  });

package/src/notifications/domains/reminders/presentation/components/FrequencySelector.tsx

@@ -0,0 +1,72 @@
+/**
+ * FrequencySelector Component
+ * Allows selection of reminder frequency
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { ReminderFrequency } from '../../../../infrastructure/services/types';
+import type { FrequencyOption } from '../../infrastructure/config/reminderPresets';
+
+export interface FrequencySelectorProps {
+  options: FrequencyOption[];
+  selectedFrequency: ReminderFrequency;
+  onSelect: (frequency: ReminderFrequency) => void;
+  getLabel: (labelKey: string) => string;
+}
+
+export const FrequencySelector: React.FC<FrequencySelectorProps> = ({
+  options,
+  selectedFrequency,
+  onSelect,
+  getLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {options.map(option => {
+        const isSelected = selectedFrequency === option.id;
+        return (
+          <TouchableOpacity
+            key={option.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelect(option.id)}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon
+              name={option.iconName}
+              size="sm"
+              color={isSelected ? 'onSurface' : 'secondary'}
+            />
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getLabel(option.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', gap: 8 },
+    button: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      paddingHorizontal: 8,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      gap: 6,
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary },
+    selectedText: { color: tokens.colors.surface },
+  });

package/src/notifications/domains/reminders/presentation/components/ReminderForm.tsx

@@ -0,0 +1,169 @@
+/**
+ * ReminderForm Component
+ * Form for creating and editing reminders
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import { View, TextInput, StyleSheet, ScrollView } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { TimePresetSelector } from './TimePresetSelector';
+import { FrequencySelector } from './FrequencySelector';
+import { WeekdaySelector } from './WeekdaySelector';
+import { FormButton } from './FormButton';
+import { DEFAULT_TIME_PRESETS, FREQUENCY_OPTIONS } from '../../infrastructure/config/reminderPresets';
+import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../../infrastructure/services/types';
+
+export interface ReminderFormTranslations {
+  titleLabel: string;
+  titlePlaceholder: string;
+  bodyLabel: string;
+  bodyPlaceholder: string;
+  timeLabel: string;
+  frequencyLabel: string;
+  weekdayLabel: string;
+  saveButton: string;
+  cancelButton: string;
+  customTimeLabel: string;
+  getPresetLabel: (key: string) => string;
+  getFrequencyLabel: (key: string) => string;
+  getWeekdayLabel: (key: string) => string;
+}
+
+export interface ReminderFormProps {
+  initialData?: Reminder;
+  translations: ReminderFormTranslations;
+  onSave: (data: CreateReminderInput) => void;
+  onCancel: () => void;
+  timePresets?: TimePreset[];
+}
+
+export const ReminderForm: React.FC<ReminderFormProps> = ({
+  initialData,
+  translations,
+  onSave,
+  onCancel,
+  timePresets = DEFAULT_TIME_PRESETS,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const [title, setTitle] = useState(initialData?.title || '');
+  const [body, setBody] = useState(initialData?.body || '');
+  const [frequency, setFrequency] = useState<ReminderFrequency>(initialData?.frequency || 'daily');
+  const [selectedPresetId, setSelectedPresetId] = useState<string | undefined>(initialData?.timePresetId);
+  const [hour, setHour] = useState(initialData?.hour ?? 9);
+  const [minute, setMinute] = useState(initialData?.minute ?? 0);
+  const [weekday, setWeekday] = useState(initialData?.weekday ?? 2);
+  const [isCustomTime, setIsCustomTime] = useState(!initialData?.timePresetId);
+
+  const handlePresetSelect = useCallback((preset: TimePreset) => {
+    setSelectedPresetId(preset.id);
+    setHour(preset.hour);
+    setMinute(preset.minute);
+    setIsCustomTime(false);
+  }, []);
+
+  const handleCustomSelect = useCallback(() => {
+    setSelectedPresetId(undefined);
+    setIsCustomTime(true);
+  }, []);
+
+  const handleSave = useCallback(() => {
+    if (!title.trim()) return;
+    onSave({
+      title: title.trim(),
+      body: body.trim(),
+      frequency,
+      timePresetId: isCustomTime ? undefined : selectedPresetId,
+      hour,
+      minute,
+      weekday: frequency === 'weekly' ? weekday : undefined,
+      dayOfMonth: frequency === 'monthly' ? 1 : undefined,
+    });
+  }, [title, body, frequency, selectedPresetId, hour, minute, weekday, isCustomTime, onSave]);
+
+  return (
+    <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.titleLabel}</AtomicText>
+        <TextInput
+          style={styles.input}
+          value={title}
+          onChangeText={setTitle}
+          placeholder={translations.titlePlaceholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.bodyLabel}</AtomicText>
+        <TextInput
+          style={[styles.input, styles.multilineInput]}
+          value={body}
+          onChangeText={setBody}
+          placeholder={translations.bodyPlaceholder}
+          placeholderTextColor={tokens.colors.textSecondary}
+          multiline
+          numberOfLines={3}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.frequencyLabel}</AtomicText>
+        <FrequencySelector
+          options={FREQUENCY_OPTIONS}
+          selectedFrequency={frequency}
+          onSelect={setFrequency}
+          getLabel={translations.getFrequencyLabel}
+        />
+      </View>
+
+      <View style={styles.section}>
+        <AtomicText type="bodyMedium" style={styles.label}>{translations.timeLabel}</AtomicText>
+        <TimePresetSelector
+          presets={timePresets}
+          selectedPresetId={selectedPresetId}
+          customTime={isCustomTime ? { hour, minute } : undefined}
+          onSelectPreset={handlePresetSelect}
+          onSelectCustom={handleCustomSelect}
+          getPresetLabel={translations.getPresetLabel}
+          customLabel={translations.customTimeLabel}
+          isCustomSelected={isCustomTime}
+        />
+      </View>
+
+      {frequency === 'weekly' && (
+        <View style={styles.section}>
+          <AtomicText type="bodyMedium" style={styles.label}>{translations.weekdayLabel}</AtomicText>
+          <WeekdaySelector selectedWeekday={weekday} onSelect={setWeekday} getLabel={translations.getWeekdayLabel} />
+        </View>
+      )}
+
+      <View style={styles.buttonRow}>
+        <FormButton label={translations.cancelButton} onPress={onCancel} variant="secondary" />
+        <FormButton label={translations.saveButton} onPress={handleSave} disabled={!title.trim()} />
+      </View>
+    </ScrollView>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+    },
+    section: { marginBottom: 20 },
+    label: { color: tokens.colors.textPrimary, marginBottom: 8 },
+    input: {
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 16,
+      color: tokens.colors.textPrimary,
+    },
+    multilineInput: { minHeight: 80, textAlignVertical: 'top' },
+    buttonRow: { flexDirection: 'row', gap: 12, marginTop: 24 },
+  });

package/src/notifications/domains/reminders/presentation/components/ReminderItem.tsx

@@ -0,0 +1,130 @@
+/**
+ * ReminderItem Component
+ * Displays a single reminder with toggle and actions
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { Reminder, ReminderFrequency } from '../../../../infrastructure/services/types';
+
+export interface ReminderItemTranslations {
+  frequencyOnce: string;
+  frequencyDaily: string;
+  frequencyWeekly: string;
+  frequencyMonthly: string;
+}
+
+export interface ReminderItemProps {
+  reminder: Reminder;
+  translations: ReminderItemTranslations;
+  onToggle: (id: string) => void;
+  onEdit: (reminder: Reminder) => void;
+  onDelete: (id: string) => void;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+const getFrequencyIcon = (frequency: ReminderFrequency): string => {
+  const icons: Record<ReminderFrequency, string> = {
+    once: 'calendar',
+    daily: 'repeat',
+    weekly: 'calendar',
+    monthly: 'calendar',
+  };
+  return icons[frequency] || 'notifications';
+};
+
+export const ReminderItem: React.FC<ReminderItemProps> = ({
+  reminder,
+  translations,
+  onToggle,
+  onEdit,
+  onDelete,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const getFrequencyLabel = (frequency: ReminderFrequency): string => {
+    const labels: Record<ReminderFrequency, string> = {
+      once: translations.frequencyOnce,
+      daily: translations.frequencyDaily,
+      weekly: translations.frequencyWeekly,
+      monthly: translations.frequencyMonthly,
+    };
+    return labels[frequency] || '';
+  };
+
+  return (
+    <View style={[styles.container, !reminder.enabled ? styles.disabled : undefined]}>
+      <TouchableOpacity style={styles.content} onPress={() => onEdit(reminder)} activeOpacity={0.7}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon
+            name={getFrequencyIcon(reminder.frequency)}
+            size="md"
+            color={reminder.enabled ? 'primary' : 'secondary'}
+          />
+        </View>
+        <View style={styles.textContainer}>
+          <AtomicText type="bodyLarge" style={!reminder.enabled ? styles.disabledText : undefined}>
+            {reminder.title}
+          </AtomicText>
+          <View style={styles.metaRow}>
+            <AtomicText type="bodySmall" style={styles.time}>
+              {formatTime(reminder.hour, reminder.minute)}
+            </AtomicText>
+            <AtomicText type="bodySmall" style={styles.frequency}>
+              {getFrequencyLabel(reminder.frequency)}
+            </AtomicText>
+          </View>
+        </View>
+      </TouchableOpacity>
+
+      <View style={styles.actions}>
+        <TouchableOpacity style={styles.deleteButton} onPress={() => onDelete(reminder.id)}>
+          <AtomicIcon name="trash" size="sm" color="error" />
+        </TouchableOpacity>
+        <Switch
+          value={reminder.enabled}
+          onValueChange={() => onToggle(reminder.id)}
+          trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+          thumbColor={tokens.colors.surface}
+        />
+      </View>
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: 12,
+      marginBottom: 8,
+    },
+    disabled: { opacity: 0.6 },
+    content: { flex: 1, flexDirection: 'row', alignItems: 'center' },
+    iconContainer: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    textContainer: { flex: 1 },
+    disabledText: { color: tokens.colors.textSecondary },
+    metaRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 4 },
+    time: { color: tokens.colors.primary, fontWeight: '600' },
+    frequency: { color: tokens.colors.textSecondary },
+    actions: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    deleteButton: { padding: 4 },
+  });

package/src/notifications/domains/reminders/presentation/components/TimePresetSelector.tsx

@@ -0,0 +1,100 @@
+/**
+ * TimePresetSelector Component
+ * Allows selection of preset times or custom time
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import type { TimePreset } from '../../../../infrastructure/services/types';
+
+export interface TimePresetSelectorProps {
+  presets: TimePreset[];
+  selectedPresetId?: string;
+  customTime?: { hour: number; minute: number };
+  onSelectPreset: (preset: TimePreset) => void;
+  onSelectCustom: () => void;
+  getPresetLabel: (labelKey: string) => string;
+  customLabel: string;
+  isCustomSelected: boolean;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+export const TimePresetSelector: React.FC<TimePresetSelectorProps> = ({
+  presets,
+  selectedPresetId,
+  customTime,
+  onSelectPreset,
+  onSelectCustom,
+  getPresetLabel,
+  customLabel,
+  isCustomSelected,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {presets.map(preset => {
+        const isSelected = selectedPresetId === preset.id && !isCustomSelected;
+        return (
+          <TouchableOpacity
+            key={preset.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelectPreset(preset)}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon
+              name={preset.iconName}
+              size="md"
+              color={isSelected ? 'onSurface' : 'secondary'}
+            />
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getPresetLabel(preset.labelKey)}
+            </AtomicText>
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.subText}>
+              {formatTime(preset.hour, preset.minute)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+
+      <TouchableOpacity
+        style={[styles.button, isCustomSelected ? styles.selectedButton : undefined]}
+        onPress={onSelectCustom}
+        activeOpacity={0.7}
+      >
+        <AtomicIcon name="time" size="md" color={isCustomSelected ? 'onSurface' : 'secondary'} />
+        <AtomicText type="bodySmall" style={isCustomSelected ? styles.selectedText : styles.text}>
+          {customLabel}
+        </AtomicText>
+        {customTime ? (
+          <AtomicText type="bodySmall" style={isCustomSelected ? styles.selectedText : styles.subText}>
+            {formatTime(customTime.hour, customTime.minute)}
+          </AtomicText>
+        ) : null}
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', flexWrap: 'wrap', gap: 8 },
+    button: {
+      paddingVertical: 8,
+      paddingHorizontal: 12,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      alignItems: 'center',
+      minWidth: 72,
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary, marginTop: 4 },
+    subText: { color: tokens.colors.textSecondary, marginTop: 2, opacity: 0.7 },
+    selectedText: { color: tokens.colors.surface, marginTop: 4 },
+  });