fluentglass 0.2.6

package/src/components/FluentGlassTimeline.tsx

@@ -0,0 +1,335 @@
+import React from 'react';
+// Removed static COLORS import
+import { StyleSheet, View, Text } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withRepeat,
+    withTiming,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassTimeline (Component)
+ * Glassmorphism timeline with vertical and horizontal variants.
+ *
+ * Props:
+ *   items       - Array of { title, description, date, status, icon }
+ *                  status: 'completed' | 'active' | 'pending'
+ *   variant     - 'vertical' | 'horizontal' (default: 'vertical')
+ *   style       - Container style override
+ *   style       - Container style override
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { ThemeColors, ThemeTypography } from '../types/theme';
+
+export interface TimelineItem {
+    title: string;
+    description?: string;
+    date?: string;
+    status: 'completed' | 'active' | 'pending';
+    icon?: string | React.ReactNode;
+}
+
+export interface FluentGlassTimelineProps {
+    items?: TimelineItem[];
+    variant?: 'vertical' | 'horizontal';
+    style?: StyleProp<ViewStyle>;
+}
+
+// ─── Indicator Circle ───
+function TimelineIndicator({ status, size = 32, colors }: { status: string, size?: number, colors: ThemeColors }) {
+    const pulseScale = useSharedValue(1);
+
+    React.useEffect(() => {
+        if (status === 'active') {
+            pulseScale.value = withRepeat(
+                withTiming(1.15, { duration: 1200 }),
+                -1,
+                true
+            );
+        } else {
+            pulseScale.value = withSpring(1);
+        }
+    }, [status]);
+
+    const pulseStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: pulseScale.value }],
+    }));
+
+    const isCompleted = status === 'completed';
+    const isActive = status === 'active';
+    const isPending = status === 'pending';
+
+    return (
+        <Animated.View style={pulseStyle}>
+            <View
+                style={[
+                    styles.indicator,
+                    {
+                        width: size,
+                        height: size,
+                        borderRadius: size / 2,
+                        borderColor: isCompleted || isActive ? colors.accent : (isPending ? `${colors.textSecondary}4D` : colors.border),
+                        backgroundColor: isCompleted ? colors.accent : (isActive ? `${colors.secondary}26` : (isPending ? `${colors.textSecondary}1A` : 'transparent'))
+                    },
+                ]}
+            >
+                {isCompleted ? (
+                    <Text style={[styles.checkmark, { color: colors.background }]}>✓</Text>
+                ) : (
+                    <View
+                        style={[
+                            styles.innerDot,
+                            {
+                                width: size * 0.35,
+                                height: size * 0.35,
+                                borderRadius: (size * 0.35) / 2,
+                                backgroundColor: isActive ? colors.accent : (isPending ? `${colors.textSecondary}4D` : 'transparent')
+                            },
+                        ]}
+                    />
+                )}
+            </View>
+        </Animated.View>
+    );
+}
+
+// ─── Connecting Line ───
+function TimelineLine({ status, direction = 'vertical', colors }: { status: string, direction?: 'vertical' | 'horizontal', colors: ThemeColors }) {
+    const isCompleted = status === 'completed';
+    const isVertical = direction === 'vertical';
+
+    return (
+        <View
+            style={[
+                isVertical ? styles.lineVertical : styles.lineHorizontal,
+                { backgroundColor: isCompleted ? colors.accent : `${colors.textSecondary}26` }
+            ]}
+        />
+    );
+}
+
+// ─── Vertical Timeline ───
+function VerticalTimeline({ items, style, colors, typography }: { items: TimelineItem[], style?: StyleProp<ViewStyle>, colors: ThemeColors, typography: ThemeTypography }) {
+    return (
+        <View style={[styles.verticalContainer, style]}>
+            {items.map((item, index) => {
+                const isLast = index === items.length - 1;
+                const isActive = item.status === 'active';
+
+                return (
+                    <View key={index} style={styles.verticalItem}>
+                        {/* Left: Indicator + Line */}
+                        <View style={styles.verticalLeft}>
+                            <TimelineIndicator status={item.status} size={36} colors={colors} />
+                            {!isLast ? (
+                                <TimelineLine
+                                    status={item.status}
+                                    direction="vertical"
+                                    colors={colors}
+                                />
+                            ) : null}
+                        </View>
+
+                        {/* Right: Card */}
+                        <View style={styles.verticalRight}>
+                            <FluentGlass
+                                style={[
+                                    styles.verticalCard,
+                                    isActive && { borderColor: colors.accent }
+                                ]}
+                                intensity={isActive ? 25 : 15}
+                                tint={isActive ? 'default' : 'dark'}
+                                borderRadius={14}
+                                borderOpacity={isActive ? 0.35 : 0.15}
+                            >
+                                <View style={styles.cardContent}>
+                                    <View style={styles.cardHeader}>
+                                        <Text
+                                            style={[
+                                                styles.cardTitle,
+                                                { fontFamily: typography.bold, color: item.status === 'pending' ? colors.textSecondary : colors.textPrimary }
+                                            ]}
+                                        >
+                                            {item.title}
+                                        </Text>
+                                        {item.date ? (
+                                            <Text style={[styles.cardDate, { fontFamily: typography.medium, color: colors.textSecondary }]}>
+                                                {item.date}
+                                            </Text>
+                                        ) : null}
+                                    </View>
+                                    {item.description ? (
+                                        <Text style={[styles.cardDescription, { color: colors.textSecondary }]}>
+                                            {item.description}
+                                        </Text>
+                                    ) : null}
+                                </View>
+                            </FluentGlass>
+                        </View>
+                    </View>
+                );
+            })}
+        </View>
+    );
+}
+
+// ─── Horizontal Timeline ───
+function HorizontalTimeline({ items, style, colors, typography }: { items: TimelineItem[], style?: StyleProp<ViewStyle>, colors: ThemeColors, typography: ThemeTypography }) {
+    return (
+        <View style={[styles.horizontalContainer, style]}>
+            {items.map((item, index) => {
+                const isLast = index === items.length - 1;
+
+                return (
+                    <View key={index} style={styles.horizontalItem}>
+                        {/* Top: Indicator + Line */}
+                        <View style={styles.horizontalTop}>
+                            <TimelineIndicator status={item.status} size={40} colors={colors} />
+                            {!isLast ? (
+                                <TimelineLine
+                                    status={item.status}
+                                    direction="horizontal"
+                                    colors={colors}
+                                />
+                            ) : null}
+                        </View>
+
+                        {/* Bottom: Labels */}
+                        <View style={styles.horizontalLabels}>
+                            <Text
+                                style={[
+                                    styles.horizontalTitle,
+                                    { fontFamily: typography.semiBold, color: item.status === 'pending' ? colors.textSecondary : colors.textPrimary }
+                                ]}
+                                numberOfLines={1}
+                            >
+                                {item.title}
+                            </Text>
+                            {item.description ? (
+                                <Text
+                                    style={[styles.horizontalSubtitle, { color: colors.textSecondary }]}
+                                    numberOfLines={1}
+                                >
+                                    {item.description}
+                                </Text>
+                            ) : null}
+                        </View>
+                    </View>
+                );
+            })}
+        </View>
+    );
+}
+
+// ─── Main Export ───
+export default function FluentGlassTimeline({
+    items = [],
+    variant = 'vertical',
+    style,
+}: FluentGlassTimelineProps) {
+    const { colors, typography } = useTheme();
+
+    // Pass colors down through context or cloning isn't great. 
+    // We will wrap the children with the theme context implicitly since these are small components 
+    // inside the same file, let's pass `colors` as a prop to internal helpers.
+    if (variant === 'horizontal') {
+        return <View accessible={true} accessibilityLabel="Timeline"><HorizontalTimeline items={items} style={style} colors={colors} typography={typography} /></View>;
+    }
+    return <View accessible={true} accessibilityLabel="Timeline"><VerticalTimeline items={items} style={style} colors={colors} typography={typography} /></View>;
+}
+
+// ─── Styles ───
+const styles = StyleSheet.create({
+    // Indicator
+    indicator: {
+        alignItems: 'center',
+        justifyContent: 'center',
+        borderWidth: 2,
+    },
+    checkmark: {
+        fontSize: 16,
+    },
+    innerDot: {},
+    lineVertical: {
+        width: 2,
+        flex: 1,
+        marginVertical: 4,
+    },
+    lineHorizontal: {
+        height: 2,
+        flex: 1,
+        marginHorizontal: 4,
+    },
+
+    // ─── Vertical ───
+    verticalContainer: {},
+    verticalItem: {
+        flexDirection: 'row',
+    },
+    verticalLeft: {
+        alignItems: 'center',
+        width: 44,
+        marginRight: 12,
+    },
+    verticalRight: {
+        flex: 1,
+        paddingBottom: 20,
+    },
+    verticalCard: {
+        minHeight: 60,
+    },
+    // removed verticalCardActive
+    cardContent: {
+        padding: 14,
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    cardTitle: {
+        fontSize: 16,
+    },
+    cardDate: {
+        fontSize: 12,
+    },
+    cardDescription: {
+        fontSize: 14,
+        marginTop: 4,
+        lineHeight: 20,
+    },
+
+    // ─── Horizontal ───
+    horizontalContainer: {
+        flexDirection: 'row',
+        alignItems: 'flex-start',
+    },
+    horizontalItem: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    horizontalTop: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        width: '100%',
+        justifyContent: 'center',
+    },
+    horizontalLabels: {
+        alignItems: 'center',
+        marginTop: 10,
+        paddingHorizontal: 4,
+    },
+    horizontalTitle: {
+        fontSize: 14,
+        marginTop: 4,
+    },
+    horizontalSubtitle: {
+        fontSize: 12,
+        marginTop: 2,
+        textAlign: 'center',
+    },
+});

package/src/components/FluentGlassWeatherWidget.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { moderateScale } from '../utils/responsive';
+
+export interface FluentGlassWeatherWidgetProps {
+    temp?: string;
+    condition?: string;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassWeatherWidget (Atom/Molecule)
+ * Dashboard widget displaying temperature and condition.
+ */
+export default function FluentGlassWeatherWidget({ temp = '24°', condition = 'Cloudy', style }: FluentGlassWeatherWidgetProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    return (
+        <FluentGlass accessible={true} accessibilityLabel={`${temp} ${condition}`} style={[styles.card, style]} intensity={25} borderRadius={20}>
+            <View style={styles.content}>
+                <Text style={[styles.label, { color: COLORS.textSecondary, fontFamily: typography.medium }]}>{condition}</Text>
+                <Text style={[styles.bigValue, { color: COLORS.textPrimary, fontFamily: typography.regular }]}>{temp}</Text>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        flex: 1,
+        minWidth: 100,
+        maxWidth: 140,
+        aspectRatio: 1,
+    },
+    content: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    label: {
+        fontSize: 12,
+        textTransform: 'uppercase',
+        marginBottom: 4,
+    },
+    bigValue: {
+        fontSize: moderateScale(28),
+        fontWeight: '300',
+    },
+});

package/src/components/index.ts

@@ -0,0 +1,42 @@
+export { default as FluentGlass } from './FluentGlass';
+export { default as FluentGlassLayout } from './FluentGlassLayout';
+export { default as FluentGlassSimpleCard } from './FluentGlassSimpleCard';
+export { default as FluentGlassButton } from './FluentGlassButton';
+export { default as FluentGlassInput } from './FluentGlassInput';
+export { default as FluentGlassSeparator } from './FluentGlassSeparator';
+export { default as FluentGlassSkeleton } from './FluentGlassSkeleton';
+export { default as FluentGlassScrollArea } from './FluentGlassScrollArea';
+export { FluentGlassTable } from './FluentGlassTable';
+export { default as FluentGlassSheet } from './FluentGlassSheet';
+export { default as FluentGlassDialog } from './FluentGlassDialog';
+export { default as FluentGlassSelect } from './FluentGlassSelect';
+export { default as FluentGlassPopover } from './FluentGlassPopover';
+export { default as FluentGlassDock } from './FluentGlassDock';
+export { default as FluentGlassWeatherWidget } from './FluentGlassWeatherWidget';
+export { default as FluentGlassCalendarWidget } from './FluentGlassCalendarWidget';
+export { default as FluentGlassClockWidget } from './FluentGlassClockWidget';
+export { default as FluentGlassStatWidget } from './FluentGlassStatWidget';
+export { default as FluentGlassSegmentedControl } from './FluentGlassSegmentedControl';
+export { default as FluentGlassBadge } from './FluentGlassBadge';
+export { default as FluentGlassTag } from './FluentGlassTag';
+export { default as FluentGlassStatusIndicator } from './FluentGlassStatusIndicator';
+export { default as FluentGlassBreadcrumb } from './FluentGlassBreadcrumb';
+export { default as FluentGlassCard } from './FluentGlassCard';
+export { default as FluentGlassSlider } from './FluentGlassSlider';
+export { default as FluentGlassSwitch } from './FluentGlassSwitch';
+export { default as FluentGlassDropdown } from './FluentGlassDropdown';
+export { default as FluentGlassCodeBlock } from './FluentGlassCodeBlock';
+export { default as FluentGlassContainer } from './FluentGlassContainer';
+export { default as FluentGlassCheckbox } from './FluentGlassCheckbox';
+export { default as FluentGlassTimeline } from './FluentGlassTimeline';
+export { default as FluentGlassAlert } from './FluentGlassAlert';
+export { default as FluentGlassBarChart } from './FluentGlassBarChart';
+export { default as FluentGlassDatePicker } from './FluentGlassDatePicker';
+export { default as FluentGlassTextInput } from './FluentGlassTextInput';
+export { default as FluentGlassLabeledInput } from './FluentGlassLabeledInput';
+export { default as FluentGlassPasswordInput } from './FluentGlassPasswordInput';
+export { default as FluentGlassEmailInput } from './FluentGlassEmailInput';
+export { default as FluentGlassDateInput } from './FluentGlassDateInput';
+export { default as FluentGlassResponsiveRow } from './FluentGlassResponsiveRow';
+export { default as FluentGlassCrossfade } from './FluentGlassCrossfade';
+export { default as FluentGlassSidebar, SIDEBAR_DEFAULTS } from './FluentGlassSidebar';

package/src/fonts.ts

@@ -0,0 +1,24 @@
+/**
+ * FluentGlass Font Loader
+ *
+ * Utility to load Inter font files bundled with the library.
+ * Call loadFluentGlassFonts() before rendering, or use
+ * FluentGlassProvider which handles loading automatically.
+ */
+import * as Font from 'expo-font';
+
+export const FLUENTGLASS_FONTS = {
+    'Inter-Regular': require('./assets/fonts/Inter-Regular.ttf'),
+    'Inter-Medium': require('./assets/fonts/Inter-Medium.ttf'),
+    'Inter-SemiBold': require('./assets/fonts/Inter-SemiBold.ttf'),
+    'Inter-Bold': require('./assets/fonts/Inter-Bold.ttf'),
+    'Inter-ExtraBold': require('./assets/fonts/Inter-ExtraBold.ttf'),
+    'Inter-Black': require('./assets/fonts/Inter-Black.ttf'),
+};
+
+/**
+ * Load all FluentGlass fonts. Returns a promise that resolves when fonts are ready.
+ */
+export function loadFluentGlassFonts() {
+    return Font.loadAsync(FLUENTGLASS_FONTS);
+}

package/src/hooks/useBreakpoint.ts

@@ -0,0 +1,55 @@
+import { useState, useEffect } from 'react';
+import { Dimensions } from 'react-native';
+
+/**
+ * useBreakpoint — Hook para diseño responsive
+ *
+ * Breakpoints:
+ *   mobile:  < 600px
+ *   tablet:  600px – 1023px
+ *   desktop: ≥ 1024px
+ *
+ * Retorna:
+ *   breakpoint - 'mobile' | 'tablet' | 'desktop'
+ *   width      - ancho actual de la pantalla
+ *   columns    - número recomendado de columnas (1, 2, 3)
+ *   isMobile   - boolean
+ *   isTablet   - boolean
+ *   isDesktop  - boolean
+ */
+export interface BreakpointInfo {
+    breakpoint: 'mobile' | 'tablet' | 'desktop';
+    width: number;
+    columns: number;
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+}
+
+export default function useBreakpoint(): BreakpointInfo {
+    const [width, setWidth] = useState(Dimensions.get('window').width);
+
+    useEffect(() => {
+        const subscription = Dimensions.addEventListener('change', ({ window }: any) => {
+            setWidth(window.width);
+        });
+        return () => subscription?.remove();
+    }, []);
+
+    const isMobile = width < 600;
+    const isTablet = width >= 600 && width < 1024;
+    const isDesktop = width >= 1024;
+
+    let breakpoint: 'mobile' | 'tablet' | 'desktop' = 'mobile';
+    let columns = 1;
+
+    if (isDesktop) {
+        breakpoint = 'desktop';
+        columns = 3;
+    } else if (isTablet) {
+        breakpoint = 'tablet';
+        columns = 2;
+    }
+
+    return { breakpoint, width, columns, isMobile, isTablet, isDesktop };
+}

package/src/index.ts

@@ -0,0 +1,97 @@
+/**
+ * FluentGlass — Main Entry Point
+ *
+ * Usage:
+ *   import { FluentGlassButton, FluentGlassCard } from 'fluentglass';
+ */
+
+// ─── Components ─────────────────────────────────────────────
+export {
+    FluentGlass,
+    FluentGlassLayout,
+    FluentGlassSimpleCard,
+    FluentGlassButton,
+    FluentGlassInput,
+    FluentGlassTextInput,
+    FluentGlassLabeledInput,
+    FluentGlassPasswordInput,
+    FluentGlassEmailInput,
+    FluentGlassDateInput,
+    FluentGlassSeparator,
+    FluentGlassSkeleton,
+    FluentGlassScrollArea,
+    FluentGlassTable,
+    FluentGlassSheet,
+    FluentGlassDialog,
+    FluentGlassSelect,
+    FluentGlassDock,
+    FluentGlassWeatherWidget,
+    FluentGlassCalendarWidget,
+    FluentGlassClockWidget,
+    FluentGlassStatWidget,
+    FluentGlassSegmentedControl,
+    FluentGlassBadge,
+    FluentGlassTag,
+    FluentGlassStatusIndicator,
+    FluentGlassBreadcrumb,
+    FluentGlassCard,
+    FluentGlassSlider,
+    FluentGlassSwitch,
+    FluentGlassDropdown,
+    FluentGlassCodeBlock,
+    FluentGlassContainer,
+    FluentGlassCheckbox,
+    FluentGlassTimeline,
+    FluentGlassAlert,
+    FluentGlassBarChart,
+    FluentGlassDatePicker,
+    FluentGlassPopover,
+    FluentGlassResponsiveRow,
+    FluentGlassCrossfade,
+    FluentGlassSidebar,
+    SIDEBAR_DEFAULTS,
+} from './components';
+
+// ─── Hooks ──────────────────────────────────────────────────
+export { default as useBreakpoint } from './hooks/useBreakpoint';
+
+// ─── Utilities ──────────────────────────────────────────────
+export {
+    scale,
+    verticalScale,
+    moderateScale,
+    wp,
+    hp,
+    responsiveFontSize,
+    isSmallDevice,
+    isCompactDevice,
+    isTablet,
+    isLargeTablet,
+    SPACING,
+} from './utils/responsive';
+
+export { COLORS } from './utils/colors';
+
+// ─── Theme System ───────────────────────────────────────────
+export { default as FluentGlassProvider } from './theme/FluentGlassProvider';
+export { default as useTheme } from './theme/useTheme';
+export { default as defaultTheme } from './theme/defaultTheme';
+export {
+    SIZE_SCALE,
+    SIZE_PRESETS,
+    COLOR_SCHEMES,
+    BLUR_PRESETS,
+    RADIUS_PRESETS,
+    ANIMATION_PRESETS,
+} from './theme/tokens';
+export {
+    resolveSize,
+    resolveColorScheme,
+    resolveBlur,
+    resolveRadius,
+    resolveBackwardCompat,
+} from './theme/resolvers';
+
+// ─── Typography ─────────────────────────────────────────────
+export { FONT_FAMILIES, WEIGHT_TO_FAMILY, getFontFamily } from './theme/typography';
+export { loadFluentGlassFonts } from './fonts';

package/src/theme/FluentGlassProvider.tsx

@@ -0,0 +1,82 @@
+/**
+ * FluentGlassProvider
+ *
+ * Wraps the app (or a subtree) with a custom theme.
+ * All FluentGlass components read from this context.
+ *
+ * Usage:
+ *   <FluentGlassProvider theme={{ colors: { accent: '#FF6B6B' } }}>
+ *     <App />
+ *   </FluentGlassProvider>
+ *
+ * Without provider, components use defaultTheme automatically.
+ */
+
+import React, { createContext, useMemo, useState, useEffect } from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import defaultTheme from './defaultTheme';
+import { loadFluentGlassFonts } from '../fonts';
+
+export const ThemeContext = createContext(defaultTheme);
+
+/**
+ * Deep merge two objects. Arrays are replaced, not merged.
+ * Only merges plain objects, not class instances.
+ */
+function deepMerge(target: any, source: any) {
+    if (!source) return target;
+    const result = { ...target };
+
+    for (const key of Object.keys(source)) {
+        const targetVal = target[key];
+        const sourceVal = source[key];
+
+        if (
+            sourceVal &&
+            typeof sourceVal === 'object' &&
+            !Array.isArray(sourceVal) &&
+            targetVal &&
+            typeof targetVal === 'object' &&
+            !Array.isArray(targetVal)
+        ) {
+            result[key] = deepMerge(targetVal, sourceVal);
+        } else {
+            result[key] = sourceVal;
+        }
+    }
+
+    return result;
+}
+
+export default function FluentGlassProvider({ theme, children, loadFonts = true }: { theme?: any, children?: React.ReactNode, loadFonts?: boolean }) {
+    const [fontsLoaded, setFontsLoaded] = useState(!loadFonts);
+
+    useEffect(() => {
+        if (!loadFonts) return;
+        loadFluentGlassFonts()
+            .then(() => setFontsLoaded(true))
+            .catch((err) => {
+                console.warn('FluentGlass: Failed to load fonts, falling back to system fonts.', err);
+                setFontsLoaded(true); // render anyway with system fonts
+            });
+    }, [loadFonts]);
+
+    const mergedTheme = useMemo(
+        () => (theme ? deepMerge(defaultTheme, theme) : defaultTheme),
+        [theme]
+    );
+
+    if (!fontsLoaded) {
+        return (
+            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#020617' }}>
+                <ActivityIndicator color="#06B6D4" size="large" />
+            </View>
+        );
+    }
+
+    return (
+        <ThemeContext.Provider value={mergedTheme}>
+            {children}
+        </ThemeContext.Provider>
+    );
+}