fluentglass 0.2.6

package/src/components/FluentGlassCheckbox.tsx

@@ -0,0 +1,138 @@
+import React, { useEffect } from 'react';
+
+import { StyleSheet, Text, Pressable, StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    interpolateColor,
+} from 'react-native-reanimated';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassCheckboxProps {
+    checked?: boolean;
+    onToggle?: (value: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    size?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+const CHECK_SPRING = {
+    mass: 0.4,
+    damping: 10,
+    stiffness: 200,
+};
+
+export default function FluentGlassCheckbox({ checked = false,
+    onToggle,
+    label,
+    disabled = false,
+    size = 24,
+    style,
+    accessibilityLabel, }: FluentGlassCheckboxProps & { accessibilityLabel?: string }) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    const progress = useSharedValue(checked ? 1 : 0);
+
+    useEffect(() => {
+        progress.value = withSpring(checked ? 1 : 0, CHECK_SPRING);
+    }, [checked]);
+
+    // Circle background animates from transparent glass to accent
+    const circleStyle = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(
+            progress.value,
+            [0, 1],
+            [COLORS.border, COLORS.accent]
+        );
+        const borderColor = interpolateColor(
+            progress.value,
+            [0, 1],
+            [COLORS.textSecondary, COLORS.accent]
+        );
+        return {
+            backgroundColor,
+            borderColor,
+            transform: [{ scale: 0.9 + (progress.value * 0.1) }], // subtle pop
+        };
+    });
+
+    // Checkmark scales in/out
+    const checkStyle = useAnimatedStyle(() => ({
+        opacity: progress.value,
+        transform: [{ scale: progress.value }],
+    }));
+
+    const handlePress = () => {
+        if (!disabled && onToggle) {
+            onToggle(!checked);
+        }
+    };
+
+    const checkSize = size * 0.5; // Checkmark relative to circle
+
+    return (
+        <Pressable
+            onPress={handlePress}
+            style={[styles.wrapper, disabled && styles.wrapperDisabled, style]}
+            hitSlop={6}
+            accessibilityRole="checkbox"
+            accessibilityLabel={accessibilityLabel ?? label}
+            accessibilityState={{ checked: !!checked, disabled: !!disabled }}
+        >
+            {/* Circle */}
+            <Animated.View
+                style={[
+                    styles.circle,
+                    { width: size, height: size, borderRadius: size / 2 },
+                    circleStyle,
+                ]}
+            >
+                {/* Checkmark */}
+                <Animated.Text
+                    style={[
+                        styles.check,
+                        { fontSize: checkSize, color: COLORS.white, fontFamily: typography.bold },
+                        checkStyle,
+                    ]}
+                >
+                    ✓
+                </Animated.Text>
+            </Animated.View>
+
+            {/* Label */}
+            {label ? (
+                <Text style={[styles.label, { color: COLORS.textPrimary, fontFamily: typography.medium }, disabled && { color: COLORS.textSecondary }]}>
+                    {label}
+                </Text>
+            ) : null}
+        </Pressable>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    wrapperDisabled: {
+        opacity: 0.4,
+    },
+    circle: {
+        borderWidth: 1.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    check: {
+        fontWeight: '700',
+        marginTop: -1, // Optical alignment
+    },
+    label: {
+        fontSize: 15,
+        fontWeight: '500',
+        marginLeft: 12,
+    },
+});

package/src/components/FluentGlassClockWidget.tsx

@@ -0,0 +1,61 @@
+import React, { useState, useEffect } 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 FluentGlassClockWidgetProps {
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassClockWidget (Atom/Molecule)
+ * Dashboard widget displaying current time.
+ */
+export default function FluentGlassClockWidget({ style }: FluentGlassClockWidgetProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    const [time, setTime] = useState(new Date());
+
+    useEffect(() => {
+        const timer: ReturnType<typeof setInterval> = setInterval(() => setTime(new Date()), 60000);
+        return () => clearInterval(timer);
+    }, []);
+
+    const timeString = time.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+
+    return (
+        <FluentGlass accessible={true} accessibilityLabel={`Time: ${timeString}`} style={[styles.card, style]} intensity={25} borderRadius={20}>
+            <View style={styles.content}>
+                <Text style={[styles.label, { color: COLORS.textSecondary, fontFamily: typography.medium }]}>TIME</Text>
+                <Text style={[styles.bigValue, { color: COLORS.textPrimary, fontFamily: typography.regular }]}>{timeString}</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/FluentGlassCodeBlock.tsx

@@ -0,0 +1,241 @@
+import React, { useCallback, useState } from 'react';
+import { StyleSheet, Text, View, Pressable, ScrollView, StyleProp, ViewStyle } from 'react-native';
+import * as Clipboard from 'expo-clipboard';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassCodeBlockProps {
+    code?: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    onCopy?: (code: string) => void;
+    style?: StyleProp<ViewStyle>;
+}
+
+interface TokenColors {
+    tag: string;
+    attribute: string;
+    string: string;
+    keyword: string;
+    comment: string;
+    punctuation: string;
+    text: string;
+}
+
+interface Token {
+    text: string;
+    color: string;
+}
+
+// Simple regex-based tokenizer (good enough for display, not a full parser)
+function tokenize(line: string, TOKEN_COLORS: TokenColors): Token[] {
+    const tokens = [];
+    // Pattern priority: comments, strings, tags, keywords, rest
+    const regex =
+        /(\/\/.*$|\/\*.*?\*\/)|("(?:[^"\\]|\\.)*"|'(?:[^'\\]|\\.)*')|(<\/?[\w.-]+|>|\/>)|(className|import|export|from|const|let|var|function|return|default|if|else|true|false|null|undefined)/g;
+
+    let lastIndex = 0;
+    let match;
+
+    while ((match = regex.exec(line)) !== null) {
+        // Text before the match
+        if (match.index > lastIndex) {
+            tokens.push({ text: line.slice(lastIndex, match.index), color: TOKEN_COLORS.text });
+        }
+
+        if (match[1]) {
+            tokens.push({ text: match[0], color: TOKEN_COLORS.comment });
+        } else if (match[2]) {
+            tokens.push({ text: match[0], color: TOKEN_COLORS.string });
+        } else if (match[3]) {
+            tokens.push({ text: match[0], color: TOKEN_COLORS.tag });
+        } else if (match[4]) {
+            tokens.push({ text: match[0], color: TOKEN_COLORS.keyword });
+        }
+
+        lastIndex = match.index + match[0].length;
+    }
+
+    // Remaining text
+    if (lastIndex < line.length) {
+        tokens.push({ text: line.slice(lastIndex), color: TOKEN_COLORS.text });
+    }
+
+    if (tokens.length === 0) {
+        tokens.push({ text: line || ' ', color: TOKEN_COLORS.text });
+    }
+
+    return tokens;
+}
+
+export default function FluentGlassCodeBlock({ code = '',
+    language = 'CODE',
+    showLineNumbers = true,
+    onCopy,
+    style, }: FluentGlassCodeBlockProps) {
+    const theme = useTheme();
+    const colors = theme.colors;
+
+    // Basic token colors matching a dark IDE theme — uses theme colors
+    const TOKEN_COLORS = {
+        tag: '#06B6D4',        // Cyan — HTML tags, JSX
+        attribute: '#94A3B8',  // Slate — attribute names
+        string: '#FBBF24',     // Amber — string values
+        keyword: '#C084FC',    // Purple — keywords
+        comment: '#4B5563',    // Gray — comments
+        punctuation: '#94A3B8',
+        text: colors.textPrimary,
+    };
+
+    const lines = code.split('\n');
+    const lineNumWidth = String(lines.length).length * 10 + 12;
+    const [copied, setCopied] = useState(false);
+
+    const handleCopy = useCallback(async () => {
+        if (onCopy) {
+            onCopy(code);
+        } else {
+            await Clipboard.setStringAsync(code);
+        }
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2000);
+    }, [code, onCopy]);
+
+    return (
+        <FluentGlass
+            accessibilityLabel="Code block"
+            style={[styles.container, style]}
+            intensity={15}
+            tint="dark"
+            borderRadius={16}
+            borderOpacity={0.2}
+        >
+            <View style={styles.inner}>
+                {/* Header bar */}
+                <View style={styles.header}>
+                    {/* Language badge */}
+                    <View style={[styles.badge, { backgroundColor: colors.borderSubtle, borderColor: colors.border }]}>
+                        <Text style={[styles.badgeText, { color: colors.textPrimary, fontFamily: theme.typography.bold }]}>
+                            {language.toUpperCase()}
+                        </Text>
+                    </View>
+
+                    {/* Action buttons */}
+                    <View style={styles.actions}>
+                        <Pressable
+                            onPress={handleCopy}
+                            hitSlop={8}
+                            style={styles.actionBtn}
+                            accessibilityRole="button"
+                            accessibilityLabel="Copy code"
+                        >
+                            <Text style={styles.actionIcon}>{copied ? '✅' : '📋'}</Text>
+                        </Pressable>
+                    </View>
+                </View>
+
+                {/* Separator */}
+                <View style={[styles.separator, { backgroundColor: colors.borderSubtle }]} />
+
+                {/* Code area */}
+                <ScrollView
+                    horizontal
+                    showsHorizontalScrollIndicator={false}
+                    bounces={false}
+                >
+                    <View style={styles.codeArea}>
+                        {lines.map((line, i) => (
+                            <View key={i} style={styles.lineRow}>
+                                {/* Line number */}
+                                {showLineNumbers ? (
+                                    <Text
+                                        style={[
+                                            styles.lineNum,
+                                            { width: lineNumWidth, color: colors.textSecondary },
+                                        ]}
+                                    >
+                                        {i + 1}
+                                    </Text>
+                                ) : null}
+
+                                {/* Tokenized code */}
+                                <Text style={[styles.codeLine, { color: colors.textPrimary }]}>
+                                    {tokenize(line, TOKEN_COLORS).map((token, j) => (
+                                        <Text
+                                            key={j}
+                                            style={{ color: token.color }}
+                                        >
+                                            {token.text}
+                                        </Text>
+                                    ))}
+                                </Text>
+                            </View>
+                        ))}
+                    </View>
+                </ScrollView>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+    inner: {
+        flex: 1,
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 12,
+        paddingTop: 10,
+        paddingBottom: 8,
+    },
+    badge: {
+        borderRadius: 6,
+        paddingHorizontal: 10,
+        paddingVertical: 4,
+        borderWidth: 1,
+    },
+    badgeText: {
+        fontSize: 11,
+        fontWeight: '700',
+        letterSpacing: 0.5,
+    },
+    actions: {
+        flexDirection: 'row',
+        gap: 8,
+    },
+    actionBtn: {
+        padding: 4,
+    },
+    actionIcon: {
+        fontSize: 16,
+    },
+    separator: {
+        height: 1,
+        marginHorizontal: 0,
+    },
+    codeArea: {
+        paddingVertical: 12,
+        paddingRight: 16,
+    },
+    lineRow: {
+        flexDirection: 'row',
+        minHeight: 22,
+    },
+    lineNum: {
+        fontSize: 13,
+        fontFamily: 'monospace',
+        textAlign: 'right',
+        marginRight: 16,
+        paddingLeft: 12,
+    },
+    codeLine: {
+        fontSize: 13,
+        fontFamily: 'monospace',
+        flex: 1,
+    },
+});

package/src/components/FluentGlassContainer.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import useTheme from '../theme/useTheme';
+import { resolveColorScheme, resolveRadius, resolveBackwardCompat } from '../theme/resolvers';
+import { FluentGlassColorScheme, FluentGlassRadius } from '../types/components';
+
+export interface FluentGlassContainerProps {
+    children?: React.ReactNode;
+    colorScheme?: FluentGlassColorScheme | string;
+    radius?: FluentGlassRadius | string;
+    /** @deprecated Use colorScheme instead */
+    tint?: string;
+    padding?: number;
+    /** @deprecated Use radius instead */
+    borderRadius?: number;
+    borderOpacity?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassContainer (Atom)
+ * Section-level glass wrapper for layout depth.
+ * Uses plain View (no BlurView) to avoid nested-blur artifacts.
+ */
+export default function FluentGlassContainer({ children,
+    colorScheme,
+    radius,
+    tint = 'light',
+    padding = 16,
+    borderRadius,
+    borderOpacity = 0.15,
+    style, }: FluentGlassContainerProps) {
+    const theme = useTheme();
+
+    const compat = resolveBackwardCompat({ tint, colorScheme });
+    const resolvedScheme = compat.colorScheme || 'light';
+    const colorConfig = resolveColorScheme(theme, resolvedScheme);
+    const resolvedRadius = borderRadius ?? resolveRadius(theme, radius || 'lg');
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    padding,
+                    borderRadius: resolvedRadius,
+                    backgroundColor: colorConfig.bg,
+                    borderColor: colorConfig.border || theme.colors.border,
+                },
+                style,
+            ]}
+        >
+            {children}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        minHeight: 40,
+        borderWidth: 1,
+    },
+});

package/src/components/FluentGlassCrossfade.tsx

@@ -0,0 +1,122 @@
+import React, { useState, useCallback, useEffect, useRef } from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withSpring,
+    runOnJS,
+    Easing,
+} from 'react-native-reanimated';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassCrossfadeProps {
+    activeKey: string;
+    children: React.ReactNode;
+    fadeOutDuration?: number;
+    fadeInDuration?: number;
+    translateY?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassCrossfade
+ *
+ * Universal animated content switcher. Crossfades between children
+ * with a fade + translateY spring animation.
+ *
+ * Usage:
+ *   <FluentGlassCrossfade activeKey="home">
+ *     <HomeScreen key="home" />
+ *     <SettingsScreen key="settings" />
+ *   </FluentGlassCrossfade>
+ */
+export default function FluentGlassCrossfade({
+    activeKey,
+    children,
+    fadeOutDuration,
+    fadeInDuration,
+    translateY: translateYAmount,
+    style,
+}: FluentGlassCrossfadeProps) {
+    const theme = useTheme();
+    const crossfadeConfig = theme.animations?.crossfade || {};
+    const springConfig = theme.animations?.spring?.snappy || { mass: 0.4, damping: 14, stiffness: 160 };
+
+    // Merge props with theme defaults
+    const outDuration = fadeOutDuration ?? crossfadeConfig.fadeOutDuration ?? 120;
+    const inDuration = fadeInDuration ?? crossfadeConfig.fadeInDuration ?? 200;
+    const shiftY = translateYAmount ?? crossfadeConfig.translateY ?? 6;
+
+    const [currentKey, setCurrentKey] = useState(activeKey);
+    const [containerHeight, setContainerHeight] = useState(0);
+    const isTransitioning = useRef(false);
+
+    const opacity = useSharedValue(1);
+    const translateY = useSharedValue(0);
+
+    const commitSwitch = useCallback((newKey: string) => {
+        setCurrentKey(newKey);
+        isTransitioning.current = false;
+        // Delay fade-in to next frame so React commit doesn't block animation
+        requestAnimationFrame(() => {
+            opacity.value = withTiming(1, { duration: inDuration, easing: Easing.out(Easing.quad) });
+            translateY.value = withSpring(0, springConfig);
+        });
+    }, [inDuration, springConfig]);
+
+    useEffect(() => {
+        if (activeKey !== currentKey && !isTransitioning.current) {
+            isTransitioning.current = true;
+
+            // Fade out
+            opacity.value = withTiming(0, {
+                duration: outDuration,
+                easing: Easing.in(Easing.quad),
+            }, (finished) => {
+                if (finished) {
+                    runOnJS(commitSwitch)(activeKey);
+                }
+            });
+            translateY.value = withTiming(shiftY, { duration: outDuration });
+        }
+    }, [activeKey]);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ translateY: translateY.value }],
+    }));
+
+    // Find active child by key
+    // React.Children.toArray prefixes keys with ".$/", ".$", or "."
+    // We strip all prefixes to compare raw keys
+    const childArray = React.Children.toArray(children) as React.ReactElement[];
+    const stripKeyPrefix = (key: string | null) => key?.replace(/^\.\$/, '').replace(/^\./, '');
+    const activeChild = childArray.find(child => stripKeyPrefix(child.key) === String(currentKey))
+        || childArray[0];
+
+    return (
+        <View style={[styles.container, containerHeight > 0 && { minHeight: containerHeight }, style]}>
+            <Animated.View
+                style={[styles.content, animatedStyle]}
+                onLayout={(e) => {
+                    const h = e.nativeEvent.layout.height;
+                    if (h > containerHeight) setContainerHeight(h);
+                }}
+            >
+                {activeChild}
+            </Animated.View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        flex: 1,
+    },
+    content: {
+        width: '100%',
+        flex: 1,
+    },
+});