@umituz/react-native-notifications 1.1.6 → 1.3.0

package/src/presentation/components/NotificationsSection.tsx

@@ -1,182 +1,119 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { View, Text, Pressable, StyleSheet, Switch, ViewStyle } from 'react-native';
-import { Feather } from '@expo/vector-icons';
-import { useNavigation } from '@react-navigation/native';
+/**
+ * NotificationsSection Component
+ * Settings section for notifications with toggle
+ */
+
+import React, { useState, useEffect, useCallback, useMemo } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { View, TouchableOpacity, StyleSheet, Switch } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 import { notificationService } from '../../infrastructure/services/NotificationService';
 
 export interface NotificationsSectionConfig {
-    initialValue?: boolean;
-    onToggleChange?: (value: boolean) => void;
-    route?: string;
-    defaultRoute?: string;
-    title?: string;
-    description?: string;
-    showToggle?: boolean;
+  initialValue?: boolean;
+  onToggleChange?: (value: boolean) => void;
+  route?: string;
+  title?: string;
+  description?: string;
+  showToggle?: boolean;
 }
 
 export interface NotificationsSectionProps {
-    config?: NotificationsSectionConfig;
-    containerStyle?: ViewStyle;
+  config?: NotificationsSectionConfig;
+  containerStyle?: StyleProp<ViewStyle>;
+  onNavigate?: (route: string) => void;
 }
 
 export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
-    config,
-    containerStyle,
+  config,
+  containerStyle,
+  onNavigate,
 }) => {
-    const navigation = useNavigation();
-    const tokens = useAppDesignTokens();
-    const colors = tokens.colors;
-
-    const [notificationsEnabled, setNotificationsEnabled] = useState(
-        config?.initialValue ?? true,
-    );
-
-    useEffect(() => {
-        if (config?.initialValue !== undefined) {
-            setNotificationsEnabled(config.initialValue);
-        }
-    }, [config?.initialValue]);
-
-    const handleToggle = useCallback(async (value: boolean) => {
-        if (!value) {
-            // When turning ON (value is false -> true? Wait. onChange value is the NEW value)
-            // If value is true (turning on)
-        }
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
 
-        // Logic from settings:
-        /*
-        if (notificationService && !value) { // Wait, logic in settings was: if (!value) ...?
-           // Actually typically we request permissions when enabling.
-           // Settings code:
-           // if (notificationService && !value) { ... } -> This implies when value is FALSE?
-           // Ah, maybe the switch value logic was inverted or I misread.
-           // Let's re-read settings code.
-        }
-        */
+  const [enabled, setEnabled] = useState(config?.initialValue ?? false);
 
-        if (value) { // Enabling
-            const hasPermissions = await notificationService.hasPermissions();
-            if (!hasPermissions) {
-                const granted = await notificationService.requestPermissions();
-                if (!granted) {
-                    // Permission denied, maybe don't enable switch?
-                    // For now just allow toggle and let app handle it or sync with state
-                }
-            }
-        }
+  useEffect(() => {
+    if (config?.initialValue !== undefined) {
+      setEnabled(config.initialValue);
+    }
+  }, [config?.initialValue]);
 
-        setNotificationsEnabled(value);
-        config?.onToggleChange?.(value);
-    }, [config]);
+  const handleToggle = useCallback(async (value: boolean) => {
+    if (value) {
+      const hasPermissions = await notificationService.hasPermissions();
+      if (!hasPermissions) {
+        const granted = await notificationService.requestPermissions();
+        if (!granted) return;
+      }
+    }
+    setEnabled(value);
+    config?.onToggleChange?.(value);
+  }, [config]);
 
-    const handlePress = useCallback(async () => {
-        const hasPermissions = await notificationService.hasPermissions();
-        if (!hasPermissions) {
-            await notificationService.requestPermissions();
-        }
-        navigation.navigate((config?.route || config?.defaultRoute || 'Notifications') as never);
-    }, [navigation, config?.route, config?.defaultRoute]);
+  const handlePress = useCallback(async () => {
+    const hasPermissions = await notificationService.hasPermissions();
+    if (!hasPermissions) {
+      await notificationService.requestPermissions();
+    }
+    if (config?.route && onNavigate) {
+      onNavigate(config.route);
+    }
+  }, [config?.route, onNavigate]);
 
-    const title = config?.title || 'Notifications';
-    const description = config?.description || 'Manage notification preferences';
-    const showToggle = config?.showToggle ?? true;
+  const title = config?.title || 'Notifications';
+  const description = config?.description || 'Manage notification preferences';
+  const showToggle = config?.showToggle ?? true;
 
-    return (
-        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
-            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>General</Text>
+  return (
+    <View style={[styles.container, containerStyle]}>
+      <AtomicText type="bodyLarge" style={styles.sectionTitle}>General</AtomicText>
 
-            <Pressable
-                style={({ pressed }) => [
-                    styles.itemContainer,
-                    {
-                        backgroundColor: pressed && !showToggle ? `${colors.primary}08` : 'transparent',
-                    },
-                ]}
-                onPress={showToggle ? undefined : handlePress}
-                disabled={showToggle}
-            >
-                <View style={styles.content}>
-                    <View
-                        style={[
-                            styles.iconContainer,
-                            { backgroundColor: `${colors.primary}15` },
-                        ]}
-                    >
-                        <Feather name="bell" size={24} color={colors.primary} />
-                    </View>
-                    <View style={styles.textContainer}>
-                        <Text style={[styles.title, { color: colors.textPrimary }]}>{title}</Text>
-                        {!showToggle && (
-                            <Text style={[styles.description, { color: colors.textSecondary }]}>
-                                {description}
-                            </Text>
-                        )}
-                    </View>
-
-                    {showToggle ? (
-                        <Switch
-                            value={notificationsEnabled}
-                            onValueChange={handleToggle}
-                            trackColor={{
-                                false: `${colors.textSecondary}30`,
-                                true: colors.primary,
-                            }}
-                            thumbColor={"#FFFFFF"}
-                            ios_backgroundColor={`${colors.textSecondary}30`}
-                        />
-                    ) : (
-                        <Feather name="chevron-right" size={20} color={colors.textSecondary} />
-                    )}
-                </View>
-            </Pressable>
+      <TouchableOpacity
+        style={styles.itemContainer}
+        onPress={showToggle ? undefined : handlePress}
+        disabled={showToggle}
+        activeOpacity={0.7}
+      >
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="bell" size="md" color="primary" />
+        </View>
+        <View style={styles.textContainer}>
+          <AtomicText type="bodyLarge">{title}</AtomicText>
+          {!showToggle && <AtomicText type="bodySmall" style={styles.description}>{description}</AtomicText>}
         </View>
-    );
+
+        {showToggle ? (
+          <Switch
+            value={enabled}
+            onValueChange={handleToggle}
+            trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+            thumbColor={tokens.colors.surface}
+          />
+        ) : (
+          <AtomicIcon name="chevron-right" size="md" color="textSecondary" />
+        )}
+      </TouchableOpacity>
+    </View>
+  );
 };
 
-const styles = StyleSheet.create({
-    sectionContainer: {
-        marginBottom: 16,
-        borderRadius: 12,
-        overflow: 'hidden',
-    },
-    sectionTitle: {
-        fontSize: 18,
-        fontWeight: '600',
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 8,
-    },
-    itemContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-        minHeight: 72,
-    },
-    content: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { marginBottom: 16, borderRadius: 12, overflow: 'hidden', backgroundColor: tokens.colors.surface },
+    sectionTitle: { fontWeight: '600', paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8 },
+    itemContainer: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 16, minHeight: 72 },
     iconContainer: {
-        width: 48,
-        height: 48,
-        borderRadius: 12,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 16,
-    },
-    textContainer: {
-        flex: 1,
-        marginRight: 8,
-    },
-    title: {
-        fontSize: 16,
-        fontWeight: '500',
-        marginBottom: 4,
-    },
-    description: {
-        fontSize: 14,
+      width: 48,
+      height: 48,
+      borderRadius: 12,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 16,
+      backgroundColor: tokens.colors.surfaceSecondary,
     },
-});
+    textContainer: { flex: 1, marginRight: 8 },
+    description: { color: tokens.colors.textSecondary, marginTop: 4 },
+  });

package/src/presentation/components/QuietHoursCard.tsx

@@ -0,0 +1,105 @@
+/**
+ * QuietHoursCard Component
+ * Displays and manages quiet hours settings
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon, AtomicSwitch, AtomicCard } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import type { QuietHoursConfig, QuietHoursTranslations } from '../../infrastructure/services/types';
+
+export interface QuietHoursCardProps {
+  config: QuietHoursConfig;
+  translations: QuietHoursTranslations;
+  onToggle: (enabled: boolean) => void;
+  onStartTimePress: () => void;
+  onEndTimePress: () => void;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
+  config,
+  translations,
+  onToggle,
+  onStartTimePress,
+  onEndTimePress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <AtomicCard style={styles.card}>
+      <View style={styles.header}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="moon" size="md" color="primary" />
+        </View>
+        <View style={styles.headerText}>
+          <AtomicText type="bodyLarge">{translations.title}</AtomicText>
+          <AtomicText type="bodySmall" style={styles.description}>{translations.description}</AtomicText>
+        </View>
+        <AtomicSwitch value={config.enabled} onValueChange={onToggle} />
+      </View>
+
+      {config.enabled && (
+        <View style={styles.timeContainer}>
+          <TouchableOpacity style={styles.timeButton} onPress={onStartTimePress} activeOpacity={0.7}>
+            <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.startTimeLabel}</AtomicText>
+            <AtomicText type="bodyLarge" style={styles.timeValue}>
+              {formatTime(config.startHour, config.startMinute)}
+            </AtomicText>
+          </TouchableOpacity>
+
+          <View style={styles.timeSeparator}>
+            <AtomicIcon name="arrow-right" size="sm" color="textSecondary" />
+          </View>
+
+          <TouchableOpacity style={styles.timeButton} onPress={onEndTimePress} activeOpacity={0.7}>
+            <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.endTimeLabel}</AtomicText>
+            <AtomicText type="bodyLarge" style={styles.timeValue}>
+              {formatTime(config.endHour, config.endMinute)}
+            </AtomicText>
+          </TouchableOpacity>
+        </View>
+      )}
+    </AtomicCard>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    card: { padding: 16, backgroundColor: tokens.colors.surface },
+    header: { flexDirection: 'row', alignItems: 'center' },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    headerText: { flex: 1, marginRight: 12 },
+    description: { color: tokens.colors.textSecondary, marginTop: 2 },
+    timeContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 16,
+      paddingTop: 16,
+      borderTopWidth: 1,
+      borderTopColor: tokens.colors.surfaceSecondary,
+    },
+    timeButton: {
+      flex: 1,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: 8,
+      padding: 12,
+      alignItems: 'center',
+    },
+    timeLabel: { color: tokens.colors.textSecondary, marginBottom: 4 },
+    timeValue: { color: tokens.colors.textPrimary, fontWeight: '600' },
+    timeSeparator: { paddingHorizontal: 12 },
+  });

package/src/presentation/components/ReminderForm.tsx

@@ -0,0 +1,165 @@
+/**
+ * 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-theme';
+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 },
+    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/presentation/components/ReminderItem.tsx

@@ -0,0 +1,124 @@
+/**
+ * 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, AtomicSwitch } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+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-days',
+    monthly: 'calendar-range',
+  };
+  return icons[frequency] || 'bell';
+};
+
+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' : 'textSecondary'}
+          />
+        </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-2" size="sm" color="error" />
+        </TouchableOpacity>
+        <AtomicSwitch value={reminder.enabled} onValueChange={() => onToggle(reminder.id)} />
+      </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 },
+  });