fluentglass 0.2.6

package/src/components/FluentGlassDateInput.tsx

@@ -0,0 +1,182 @@
+import React, { useState, useCallback } from 'react';
+
+import { StyleSheet, TextInput, TouchableOpacity, View, Modal, Pressable, ViewStyle } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import FluentGlass from './FluentGlass';
+import FluentGlassDatePicker from './FluentGlassDatePicker';
+import useTheme from '../theme/useTheme';
+
+type DateFormat = 'mm/dd/yyyy' | 'dd/mm/yyyy';
+
+export interface FluentGlassDateInputProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    placeholder?: string;
+    format?: DateFormat;
+    style?: ViewStyle;
+    accessibilityLabel?: string;
+}
+
+/**
+ * FluentGlassDateInput (Molécula)
+ * Hybrid date input: type manually OR tap the calendar icon to open FluentGlassDatePicker.
+ */
+export default function FluentGlassDateInput({
+    value,
+    onChange,
+    placeholder = 'dd/mm/yyyy',
+    format = 'dd/mm/yyyy',
+    style,
+    accessibilityLabel,
+}: FluentGlassDateInputProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    const [pickerVisible, setPickerVisible] = useState(false);
+    const [textValue, setTextValue] = useState(value ? formatDate(value, format) : '');
+
+    // Format a Date into string
+    function formatDate(date: Date, fmt: DateFormat): string {
+        if (!date || !(date instanceof Date) || isNaN(date.getTime())) return '';
+        const dd = String(date.getDate()).padStart(2, '0');
+        const mm = String(date.getMonth() + 1).padStart(2, '0');
+        const yyyy = date.getFullYear();
+        return fmt === 'dd/mm/yyyy' ? `${dd}/${mm}/${yyyy}` : `${mm}/${dd}/${yyyy}`;
+    }
+
+    // Parse text into a Date (returns null if invalid)
+    function parseDate(text: string, fmt: DateFormat): Date | null {
+        const parts = text.split('/');
+        if (parts.length !== 3) return null;
+        let day: string, month: string, year: string;
+        if (fmt === 'dd/mm/yyyy') {
+            [day, month, year] = parts;
+        } else {
+            [month, day, year] = parts;
+        }
+        const d = parseInt(day, 10);
+        const m = parseInt(month, 10);
+        const y = parseInt(year, 10);
+        if (isNaN(d) || isNaN(m) || isNaN(y)) return null;
+        if (m < 1 || m > 12 || d < 1 || d > 31 || y < 1900) return null;
+        const date = new Date(y, m - 1, d);
+        if (date.getMonth() !== m - 1) return null; // overflow check
+        return date;
+    }
+
+    // When user finishes typing (blur), try to parse the manual entry
+    const handleBlur = useCallback(() => {
+        const parsed = parseDate(textValue, format);
+        if (parsed && onChange) {
+            onChange(parsed);
+        }
+    }, [textValue, format, onChange]);
+
+    // When text changes, auto-insert slashes
+    const handleChangeText = useCallback((raw: string) => {
+        // Strip non-digit characters
+        const digits = raw.replace(/\D/g, '');
+        // Auto-format with slashes
+        let formatted = '';
+        for (let i = 0; i < digits.length && i < 8; i++) {
+            if (i === 2 || i === 4) formatted += '/';
+            formatted += digits[i];
+        }
+        setTextValue(formatted);
+    }, []);
+
+    // When user picks from the calendar popup
+    const handlePickerSelect = useCallback((date: Date) => {
+        setTextValue(formatDate(date, format));
+        setPickerVisible(false);
+        if (onChange) onChange(date);
+    }, [format, onChange]);
+
+    return (
+        <View style={style}>
+            <FluentGlass
+                style={styles.container}
+                intensity={15}
+                borderRadius={12}
+                borderOpacity={0.15}
+            >
+                <View style={styles.innerContainer}>
+                    <TextInput
+                        style={[styles.input, { outlineStyle: 'none' as any, color: COLORS.textPrimary, fontFamily: typography.regular }]}
+                        value={textValue}
+                        onChangeText={handleChangeText}
+                        onBlur={handleBlur}
+                        placeholder={placeholder}
+                        placeholderTextColor={COLORS.textSecondary}
+                        keyboardType="numeric"
+                        maxLength={10}
+                        accessibilityLabel={accessibilityLabel ?? placeholder ?? 'Date'}
+                    />
+
+                    <TouchableOpacity
+                        onPress={() => setPickerVisible(true)}
+                        style={styles.iconButton}
+                        hitSlop={10}
+                        accessibilityRole="button"
+                        accessibilityLabel="Open date picker"
+                    >
+                        <Ionicons name="calendar-outline" size={20} color={COLORS.textSecondary} />
+                    </TouchableOpacity>
+                </View>
+            </FluentGlass>
+
+            {/* Calendar Popup */}
+            <Modal
+                visible={pickerVisible}
+                transparent
+                animationType="fade"
+                onRequestClose={() => setPickerVisible(false)}
+            >
+                <Pressable
+                    style={[styles.overlay, { backgroundColor: COLORS.overlay }]}
+                    onPress={() => setPickerVisible(false)}
+                >
+                    <Pressable
+                        style={styles.pickerPopup}
+                        onPress={(e) => e.stopPropagation()}
+                    >
+                        <FluentGlassDatePicker
+                            value={value || new Date()}
+                            onChange={handlePickerSelect}
+                        />
+                    </Pressable>
+                </Pressable>
+            </Modal>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        minHeight: 50,
+    },
+    innerContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    input: {
+        flex: 1,
+        height: '100%',
+        paddingHorizontal: 16,
+        fontSize: 16,
+    },
+    iconButton: {
+        padding: 12,
+        marginRight: 4,
+    },
+    overlay: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    pickerPopup: {
+        // Let the DatePicker define its own width (300)
+    },
+});

package/src/components/FluentGlassDatePicker.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useMemo } from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, Pressable, StyleProp, ViewStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { moderateScale } from '../utils/responsive';
+
+export interface FluentGlassDatePickerProps {
+    value?: Date;
+    onChange?: (date: Date) => void;
+    style?: StyleProp<ViewStyle>;
+}
+
+export default function FluentGlassDatePicker({ value = new Date(),
+    onChange,
+    style, }: FluentGlassDatePickerProps) {
+    const { colors, typography } = useTheme();
+
+    // Current visible month/year
+    const [currentMonth, setCurrentMonth] = useState(new Date(value.getFullYear(), value.getMonth(), 1));
+
+    // Helpers to navigate months
+    const handlePrevMonth = () => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() - 1, 1));
+    };
+
+    const handleNextMonth = () => {
+        setCurrentMonth(new Date(currentMonth.getFullYear(), currentMonth.getMonth() + 1, 1));
+    };
+
+    // Calendar generation logic
+    const { days, blanks } = useMemo(() => {
+        const year = currentMonth.getFullYear();
+        const month = currentMonth.getMonth();
+
+        // 0 = Sunday, 1 = Monday, etc.
+        const firstDayOfMonth = new Date(year, month, 1).getDay();
+        const daysInMonth = new Date(year, month + 1, 0).getDate();
+
+        // Array of empty slots before the 1st
+        const blanksArray = Array.from({ length: firstDayOfMonth }, (_, i) => i);
+        // Array of actual days
+        const daysArray = Array.from({ length: daysInMonth }, (_, i) => i + 1);
+
+        return { days: daysArray, blanks: blanksArray };
+    }, [currentMonth]);
+
+    const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+    const headerText = `${monthNames[currentMonth.getMonth()]} ${currentMonth.getFullYear()}`;
+
+    // Helper to check if a day is the currently selected date
+    const isSelected = (day: number) => {
+        return (
+            value.getDate() === day &&
+            value.getMonth() === currentMonth.getMonth() &&
+            value.getFullYear() === currentMonth.getFullYear()
+        );
+    };
+
+    const handleSelectDay = (day: number) => {
+        if (onChange) {
+            onChange(new Date(currentMonth.getFullYear(), currentMonth.getMonth(), day));
+        }
+    };
+
+    const handleToday = () => {
+        const today = new Date();
+        setCurrentMonth(new Date(today.getFullYear(), today.getMonth(), 1));
+        if (onChange) {
+            onChange(today);
+        }
+    };
+
+    return (
+        <FluentGlass
+            style={[styles.container, style]}
+            intensity={25}
+            borderRadius={24}
+            borderOpacity={0.2}
+            tint="dark"
+        >
+            <View style={styles.calendarProps}>
+
+                {/* ── Header ── */}
+                <View style={styles.header}>
+                    <TouchableOpacity onPress={handlePrevMonth} style={styles.navButton} hitSlop={10} accessibilityRole="button" accessibilityLabel="Previous month">
+                        <Text style={[styles.navIcon, { color: colors.textSecondary, fontFamily: typography.regular }]}>‹</Text>
+                    </TouchableOpacity>
+
+                    <Text style={[styles.headerTitle, { color: colors.textPrimary, fontFamily: typography.bold }]}>{headerText}</Text>
+
+                    <TouchableOpacity onPress={handleNextMonth} style={styles.navButton} hitSlop={10} accessibilityRole="button" accessibilityLabel="Next month">
+                        <Text style={[styles.navIcon, { color: colors.textSecondary, fontFamily: typography.regular }]}>›</Text>
+                    </TouchableOpacity>
+                </View>
+
+                {/* ── Days of Week ── */}
+                <View style={styles.weekRow}>
+                    {['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, ix) => (
+                        <View key={ix} style={styles.dayCell}>
+                            <Text style={[styles.weekText, { color: colors.textSecondary, fontFamily: typography.bold }]}>{day}</Text>
+                        </View>
+                    ))}
+                </View>
+
+                {/* ── Days Grid ── */}
+                <View style={styles.daysGrid}>
+                    {/* Blanks */}
+                    {blanks.map(blank => (
+                        <View key={`blank-${blank}`} style={styles.dayCell} />
+                    ))}
+
+                    {/* Actual Days */}
+                    {days.map(day => {
+                        const selected = isSelected(day);
+                        return (
+                            <Pressable
+                                key={day}
+                                style={styles.dayCell}
+                                onPress={() => handleSelectDay(day)}
+                                accessibilityRole="button"
+                                accessibilityState={{ selected: isSelected(day) }}
+                            >
+                                {selected ? (
+                                    <View style={styles.selectedCircle}>
+                                        <FluentGlass intensity={40} borderRadius={16} tint="light" style={StyleSheet.absoluteFillObject} />
+                                        <Text style={[styles.dayText, styles.selectedDayText, { color: colors.textPrimary, fontFamily: typography.extraBold }]}>{day}</Text>
+                                    </View>
+                                ) : (
+                                    <Text style={[styles.dayText, { color: colors.textSecondary, fontFamily: typography.semiBold }]}>{day}</Text>
+                                )}
+                            </Pressable>
+                        );
+                    })}
+                </View>
+
+                {/* ── Today Button ── */}
+                <TouchableOpacity style={[styles.todayButton, { borderColor: colors.border, backgroundColor: colors.borderSubtle }]} onPress={handleToday} activeOpacity={0.7} accessibilityRole="button" accessibilityLabel="Go to today">
+                    <Text style={[styles.todayText, { color: colors.accent, fontFamily: typography.bold }]}>Hoy</Text>
+                </TouchableOpacity>
+
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        maxWidth: 360,
+        alignSelf: 'center',
+    },
+    calendarProps: {
+        padding: 20,
+    },
+    header: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 20,
+    },
+    headerTitle: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        letterSpacing: 0.5,
+    },
+    navButton: {
+        width: moderateScale(36),
+        height: moderateScale(36),
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    navIcon: {
+        fontSize: 24,
+        fontWeight: '300',
+        lineHeight: 28,
+    },
+    weekRow: {
+        flexDirection: 'row',
+        marginBottom: 10,
+    },
+    weekText: {
+        fontSize: 13,
+        fontWeight: '700',
+        textAlign: 'center',
+    },
+    daysGrid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    dayCell: {
+        width: '14.28%', // 100% / 7
+        height: 38,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    dayText: {
+        fontSize: 15,
+        fontWeight: '600',
+    },
+    selectedCircle: {
+        width: moderateScale(32),
+        height: moderateScale(32),
+        borderRadius: moderateScale(16),
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+    },
+    selectedDayText: {
+        fontWeight: '800',
+    },
+    todayButton: {
+        marginTop: 14,
+        alignSelf: 'center',
+        paddingVertical: 8,
+        paddingHorizontal: 28,
+        borderRadius: 12,
+        borderWidth: 1,
+    },
+    todayText: {
+        fontSize: 14,
+        fontWeight: '700',
+        letterSpacing: 0.5,
+    },
+});

package/src/components/FluentGlassDialog.tsx

@@ -0,0 +1,153 @@
+import React, { useEffect } from 'react';
+
+import { StyleSheet, View, Text, Pressable } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withTiming,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import FluentGlassButton from './FluentGlassButton';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassDialogProps {
+    visible: boolean;
+    title?: string;
+    description?: string;
+    onConfirm?: () => void;
+    onClose?: () => void;
+    confirmText?: string;
+    cancelText?: string;
+}
+
+/**
+ * FluentGlassDialog (Component)
+ * Central alert/confirmation modal.
+ * Uses absolute positioning instead of Modal to avoid
+ * BlurView initialisation flicker.
+ */
+export default function FluentGlassDialog({
+    visible,
+    onClose,
+    title,
+    description,
+    onConfirm,
+    confirmText = 'Confirm',
+    cancelText = 'Cancel',
+}: FluentGlassDialogProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    const scale = useSharedValue(0.8);
+    const opacity = useSharedValue(0);
+    const [mounted, setMounted] = React.useState(false);
+
+    useEffect(() => {
+        if (visible) {
+            setMounted(true);
+            // Small delay so React commits the mount frame (opacity 0) first
+            requestAnimationFrame(() => {
+                scale.value = withSpring(1);
+                opacity.value = withTiming(1, { duration: 200 });
+            });
+        } else if (mounted) {
+            scale.value = withTiming(0.85, { duration: 180 });
+            opacity.value = withTiming(0, { duration: 180 });
+            const timer: ReturnType<typeof setTimeout> = setTimeout(() => {
+                setMounted(false);
+                scale.value = 0.8;
+                opacity.value = 0;
+            }, 220);
+            return () => clearTimeout(timer);
+        }
+    }, [visible]);
+
+    const backdropStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+    }));
+
+    const cardStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ scale: scale.value }],
+    }));
+
+    if (!mounted) return null;
+
+    return (
+        <View style={styles.root} pointerEvents={visible ? 'auto' : 'none'} accessibilityViewIsModal={true}>
+            {/* Backdrop */}
+            <Animated.View style={[styles.backdrop, { backgroundColor: COLORS.overlay }, backdropStyle]}>
+                <Pressable style={StyleSheet.absoluteFill} onPress={onClose} accessibilityRole="button" accessibilityLabel="Close dialog" />
+            </Animated.View>
+
+            {/* Dialog */}
+            <Animated.View style={[styles.dialogContainer, cardStyle]}>
+                <FluentGlass
+                    style={styles.modalGlass}
+                    intensity={25}
+                    borderRadius={20}
+                >
+                    <View style={styles.innerContent}>
+                        <Text style={[styles.title, { color: COLORS.textPrimary, fontFamily: typography.bold }]} accessibilityRole="header">{title}</Text>
+                        {description && <Text style={[styles.description, { color: COLORS.textSecondary, fontFamily: typography.regular }]}>{description}</Text>}
+
+                        <View style={styles.footer}>
+                            <FluentGlassButton
+                                title={cancelText}
+                                variant="secondary"
+                                onPress={onClose}
+                                style={{ flex: 1, marginRight: 8 }}
+                            />
+                            <FluentGlassButton
+                                title={confirmText}
+                                variant="primary"
+                                onPress={onConfirm}
+                                style={{ flex: 1, marginLeft: 8 }}
+                            />
+                        </View>
+                    </View>
+                </FluentGlass>
+            </Animated.View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        ...StyleSheet.absoluteFillObject,
+        zIndex: 9999,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+    },
+    backdrop: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    dialogContainer: {
+        width: '100%',
+        maxWidth: 400,
+    },
+    modalGlass: {
+        width: '100%',
+        overflow: 'hidden',
+    },
+    innerContent: {
+        padding: 24,
+    },
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 8,
+    },
+    description: {
+        fontSize: 16,
+        marginBottom: 24,
+        lineHeight: 22,
+    },
+    footer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+});