fluentglass 0.2.6

package/src/components/FluentGlassSidebar.tsx

@@ -0,0 +1,349 @@
+import React from 'react';
+import { StyleSheet, View, Text, TouchableOpacity, ScrollView, Platform, Pressable } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    interpolate,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import useBreakpoint from '../hooks/useBreakpoint';
+
+const NAV_ITEM_HEIGHT = 48;
+const NAV_ITEM_GAP = 4;
+
+/** Defaults exported for consumers to calculate marginLeft etc. */
+export const SIDEBAR_DEFAULTS = {
+    width: 260,
+    margin: 16,
+    navItemHeight: NAV_ITEM_HEIGHT,
+    navItemGap: NAV_ITEM_GAP,
+};
+
+/**
+ * FluentGlassSidebar
+ *
+ * Floating glass sidebar with animated slide, vertical nav indicator,
+ * and hamburger toggle. Responsive: floating on desktop, overlay on mobile.
+ *
+ * Usage:
+ *   <FluentGlassSidebar
+ *     routes={[{ id: 'home', label: 'Home', icon: '🏠' }]}
+ *     activeRoute="home"
+ *     onNavigate={setRoute}
+ *     open={open}
+ *     onToggle={toggle}
+ *   />
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface SidebarRoute {
+    id: string;
+    label: string;
+    icon?: string | React.ReactNode;
+}
+
+export interface FluentGlassSidebarProps extends FluentGlassBaseProps {
+    routes?: SidebarRoute[];
+    activeRoute?: string;
+    onNavigate?: (id: string) => void;
+    open?: boolean;
+    onToggle?: () => void;
+    header?: React.ReactNode;
+    navHeader?: string;
+    width?: number;
+    margin?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+export default function FluentGlassSidebar({
+    routes = [],
+    activeRoute,
+    onNavigate,
+    open = true,
+    onToggle,
+    header,
+    navHeader,
+    width = SIDEBAR_DEFAULTS.width,
+    margin = SIDEBAR_DEFAULTS.margin,
+    colorScheme = 'default',
+    blur = 'medium',
+    radius = 'lg',
+    style,
+}: FluentGlassSidebarProps) {
+    // Optional background and borders mapping
+    // We want the modal surface to feel like 'deep' glass by default, 
+    // but users can specify 'light' or other schemas via the `colorScheme`
+    const theme = useTheme();
+    const { colors, typography } = theme;
+    const { isMobile } = useBreakpoint();
+
+    // Spring configs from theme
+    const sidebarSpring = theme.animations?.springs?.default || { mass: 0.6, damping: 16, stiffness: 140 };
+    const navSpring = theme.animations?.springs?.bouncy || { mass: 0.5, damping: 15, stiffness: 160 };
+
+    // Slide animation
+    const progress = useSharedValue(open ? 1 : 0);
+    React.useEffect(() => {
+        progress.value = withSpring(open ? 1 : 0, sidebarSpring);
+    }, [open]);
+
+    // Nav indicator
+    const activeIndex = routes.findIndex(r => r.id === activeRoute);
+    const navIndicatorY = useSharedValue(Math.max(0, activeIndex) * (NAV_ITEM_HEIGHT + NAV_ITEM_GAP));
+    React.useEffect(() => {
+        if (activeIndex >= 0) {
+            navIndicatorY.value = withSpring(activeIndex * (NAV_ITEM_HEIGHT + NAV_ITEM_GAP), navSpring);
+        }
+    }, [activeIndex]);
+
+    // Animated styles
+    const sidebarAnimStyle = useAnimatedStyle(() => ({
+        transform: [
+            { translateX: interpolate(progress.value, [0, 1], [-(width + margin * 2), 0]) },
+        ],
+        opacity: interpolate(progress.value, [0, 0.3, 1], [0, 1, 1]),
+    }));
+
+    const navIndicatorStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: navIndicatorY.value }],
+    }));
+
+    const backdropAnimStyle = useAnimatedStyle(() => ({
+        opacity: progress.value,
+    }));
+
+    return (
+        <>
+            {/* Floating hamburger when sidebar is closed (desktop only) */}
+            {!isMobile && !open && (
+                <Pressable onPress={onToggle} style={[styles.floatingHamburger, { top: margin, left: margin, backgroundColor: `${colors.background}99`, borderColor: colors.border, shadowColor: colors.shadow }]} accessibilityRole="button" accessibilityLabel="Open navigation menu">
+                    <Text style={[styles.floatingHamburgerText, { color: colors.textPrimary }]}>☰</Text>
+                </Pressable>
+            )}
+
+            {/* Mobile Backdrop */}
+            {isMobile && (
+                <Animated.View
+                    style={[
+                        {
+                            position: 'absolute',
+                            top: -margin,
+                            bottom: -margin,
+                            left: -margin,
+                            right: -margin,
+                            backgroundColor: colors.overlay,
+                            zIndex: 5
+                        },
+                        backdropAnimStyle,
+                    ]}
+                    pointerEvents={open ? 'auto' : 'none'}
+                >
+                    <Pressable style={StyleSheet.absoluteFill} onPress={onToggle} accessibilityRole="button" accessibilityLabel="Close navigation menu" />
+                </Animated.View>
+            )}
+
+            {/* Sidebar */}
+            <Animated.View
+                style={[
+                    styles.sidebarOuter,
+                    { top: margin, left: margin, bottom: margin, width },
+                    isMobile && styles.sidebarOuterMobile,
+                    sidebarAnimStyle,
+                    style,
+                ]}
+            >
+                <View style={[
+                    styles.sidebarGlass,
+                    { backgroundColor: `${colors.background}8C`, borderColor: colors.border, shadowColor: colors.shadow }
+                ]}>
+                    {/* Header */}
+                    <View style={[styles.sidebarHeader, { borderBottomColor: `${colors.textPrimary}1A` }]}>
+                        <View style={{ flex: 1 }}>
+                            {header}
+                        </View>
+                        {!isMobile && (
+                            <Pressable onPress={onToggle} style={[styles.hamburgerBtn, { backgroundColor: `${colors.textPrimary}1A`, borderColor: colors.border }]} accessibilityRole="button" accessibilityLabel="Close navigation menu">
+                                <Text style={[styles.hamburgerBtnText, { color: colors.textSecondary }]}>✕</Text>
+                            </Pressable>
+                        )}
+                    </View>
+
+                    {/* Navigation */}
+                    <ScrollView style={styles.navContainer} showsVerticalScrollIndicator={false}>
+                        {navHeader && (
+                            <Text style={[styles.navHeaderText, { color: colors.textSecondary, fontFamily: typography.bold }]}>{navHeader}</Text>
+                        )}
+                        <View style={styles.navList}>
+                            {/* Sliding indicator */}
+                            <Animated.View
+                                style={[
+                                    styles.navIndicator,
+                                    navIndicatorStyle,
+                                    {
+                                        backgroundColor: colors.accent + '12',
+                                        borderColor: colors.accent + '30',
+                                    },
+                                ]}
+                            />
+
+                            {routes.map((route) => {
+                                const isActive = activeRoute === route.id;
+                                return (
+                                    <TouchableOpacity
+                                        key={route.id}
+                                        style={styles.navItem}
+                                        onPress={() => onNavigate?.(route.id)}
+                                        activeOpacity={0.7}
+                                        accessibilityRole="menuitem"
+                                        accessibilityLabel={route.label}
+                                        accessibilityState={{ selected: isActive }}
+                                    >
+                                        {route.icon && (
+                                            <Text style={[styles.navIcon, isActive && { color: colors.textPrimary, opacity: 1 }]}>
+                                                {route.icon}
+                                            </Text>
+                                        )}
+                                        <Text
+                                            style={[
+                                                styles.navText,
+                                                { color: colors.textSecondary, fontFamily: typography.medium },
+                                                isActive && { color: colors.textPrimary, fontFamily: typography.semiBold },
+                                            ]}
+                                        >
+                                            {route.label}
+                                        </Text>
+                                    </TouchableOpacity>
+                                );
+                            })}
+                        </View>
+                    </ScrollView>
+                </View>
+            </Animated.View>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    // Floating outer (positioning)
+    sidebarOuter: {
+        position: 'absolute',
+        zIndex: 50,
+    },
+    sidebarOuterMobile: {
+        zIndex: 10,
+    },
+
+    // Glass container
+    sidebarGlass: {
+        flex: 1,
+        borderRadius: 20,
+        borderWidth: 1,
+        overflow: 'hidden',
+        ...Platform.select({
+            web: {
+                backdropFilter: 'blur(24px)',
+                boxShadow: '0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05)',
+            },
+            default: {
+                shadowOffset: { width: 0, height: 8 },
+                shadowOpacity: 0.4,
+                shadowRadius: 32,
+                elevation: 24,
+            },
+        }),
+    },
+    // Header
+    sidebarHeader: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        paddingTop: Platform.OS === 'web' ? 24 : 44,
+        paddingBottom: 20,
+        borderBottomWidth: 1,
+    },
+
+    // Hamburger inside sidebar
+    hamburgerBtn: {
+        width: 36,
+        height: 36,
+        justifyContent: 'center',
+        alignItems: 'center',
+        borderRadius: 10,
+        borderWidth: 1,
+    },
+    hamburgerBtnText: {
+        fontSize: 16,
+        lineHeight: 18,
+    },
+
+    // Floating hamburger (when closed)
+    floatingHamburger: {
+        position: 'absolute',
+        zIndex: 60,
+        width: 44,
+        height: 44,
+        borderRadius: 14,
+        borderWidth: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        ...Platform.select({
+            web: {
+                backdropFilter: 'blur(16px)',
+                boxShadow: '0 4px 16px rgba(0, 0, 0, 0.3)',
+            },
+            default: {
+                shadowOffset: { width: 0, height: 4 },
+                shadowOpacity: 0.3,
+                shadowRadius: 16,
+                elevation: 16,
+            },
+        }),
+    },
+    floatingHamburgerText: {
+        fontSize: 20,
+    },
+
+    // Nav
+    navContainer: {
+        flex: 1,
+        paddingTop: 16,
+    },
+    navHeaderText: {
+        fontSize: 11,
+        letterSpacing: 1.5,
+        paddingHorizontal: 20,
+        marginBottom: 12,
+    },
+    navList: {
+        position: 'relative',
+    },
+    navIndicator: {
+        position: 'absolute',
+        top: 0,
+        left: 10,
+        right: 10,
+        height: NAV_ITEM_HEIGHT,
+        borderRadius: 12,
+        borderWidth: 1,
+    },
+    navItem: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        height: NAV_ITEM_HEIGHT,
+        paddingHorizontal: 20,
+        marginHorizontal: 10,
+        marginBottom: NAV_ITEM_GAP,
+        borderRadius: 12,
+    },
+    navIcon: {
+        fontSize: 16,
+        marginRight: 12,
+        opacity: 0.7,
+    },
+    navText: {
+        fontSize: 15,
+    },
+});

package/src/components/FluentGlassSimpleCard.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import FluentGlass from './FluentGlass';
+
+/**
+ * FluentGlassSimpleCard (Component)
+ * Standard container for content.
+ * Wraps FluentGlass with standard padding and structure.
+ */
+import { ViewStyle, StyleProp, ViewProps } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassSimpleCardProps extends FluentGlassBaseProps, ViewProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    contentStyle?: StyleProp<ViewStyle>;
+    intensity?: number;
+    tint?: string;
+}
+
+export default function FluentGlassSimpleCard({
+    children,
+    style,
+    contentStyle,
+    size,
+    colorScheme,
+    blur,
+    radius,
+    intensity, // legacy
+    tint,      // legacy
+    ...props
+}: FluentGlassSimpleCardProps) {
+    return (
+        <FluentGlass
+            style={[styles.container, style]}
+            size={size}
+            colorScheme={colorScheme}
+            blur={blur}
+            radius={radius}
+            intensity={intensity}
+            tint={tint}
+            {...props}
+        >
+            <View style={[styles.content, contentStyle]}>
+                {children}
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        marginVertical: 8,
+    },
+    content: {
+        padding: 16,
+    },
+});

package/src/components/FluentGlassSkeleton.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect } from 'react';
+import { DimensionValue, StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withRepeat,
+    withTiming,
+    withSequence,
+} from 'react-native-reanimated';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassSkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    borderRadius?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassSkeleton (Component)
+ * Loading placeholder with a pulsing opacity animation.
+ */
+export default function FluentGlassSkeleton({ width,
+    height,
+    borderRadius = 8,
+    style, }: FluentGlassSkeletonProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    const opacity = useSharedValue(0.3);
+
+    useEffect(() => {
+        opacity.value = withRepeat(
+            withSequence(
+                withTiming(0.6, { duration: 1000 }),
+                withTiming(0.3, { duration: 1000 })
+            ),
+            -1,
+            true
+        );
+    }, []);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+    }));
+
+    return (
+        <Animated.View
+            accessible={false}
+            style={[
+                styles.container,
+                {
+                    width: width as DimensionValue,
+                    height: height as DimensionValue,
+                    borderRadius,
+                    backgroundColor: COLORS.border,
+                },
+                animatedStyle,
+                style,
+            ]}
+        />
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        // backgroundColor applied inline from useTheme()
+    },
+});

package/src/components/FluentGlassSlider.tsx

@@ -0,0 +1,202 @@
+import React, { useCallback, useEffect } from 'react';
+import { LayoutChangeEvent, StyleSheet, Text, View, ViewStyle } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    runOnJS,
+    withTiming,
+} from 'react-native-reanimated';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassSlider (Molecule)
+ * Glassmorphism slider — fully driven by SharedValues for buttery drag.
+ *
+ * Variants:
+ * - basic: Just the track + thumb
+ * - labeled: Label on left, value display on right, track below
+ */
+export interface FluentGlassSliderProps extends FluentGlassBaseProps {
+    /** Current value of the slider. */
+    value?: number;
+    /** Callback fired when the user changes the value. */
+    onValueChange?: (value: number) => void;
+    /** Minimum value. */
+    min?: number;
+    /** Maximum value. */
+    max?: number;
+    /** Label text displayed above the track. */
+    label?: string;
+    /** Whether to show the formatted value next to the label. */
+    showValue?: boolean;
+    /** Custom value formatter. */
+    formatValue?: (value: number) => string;
+    /** Additional styles for the wrapper. */
+    style?: ViewStyle;
+}
+
+const TRACK_HEIGHT = 6;
+const THUMB_SIZE = 22;
+
+export default function FluentGlassSlider({ value = 50,
+    onValueChange,
+    min = 0,
+    max = 100,
+    label,
+    showValue,
+    formatValue,
+    style,
+    accessibilityLabel, }: FluentGlassSliderProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    const hasLabel = Boolean(label);
+    const shouldShowValue = showValue !== undefined ? showValue : hasLabel;
+
+    // SharedValues drive the UI on the native thread — no JS round-trips
+    const progress = useSharedValue((value - min) / (max - min));
+    const trackW = useSharedValue(0);
+    const startProgress = useSharedValue(0);
+
+    // Sync external value changes (e.g. programmatic updates)
+    useEffect(() => {
+        progress.value = Math.max(0, Math.min(1, (value - min) / (max - min)));
+    }, [value, min, max, progress]);
+
+    const emitValue = useCallback((ratio: number) => {
+        if (onValueChange) {
+            const clamped = Math.max(0, Math.min(1, ratio));
+            onValueChange(Math.round(min + clamped * (max - min)));
+        }
+    }, [onValueChange, min, max]);
+
+    const panGesture = Gesture.Pan()
+        .onBegin(() => {
+            startProgress.value = progress.value;
+        })
+        .onUpdate((e) => {
+            'worklet';
+            if (trackW.value > 0) {
+                const delta = e.translationX / trackW.value;
+                const next = Math.max(0, Math.min(1, startProgress.value + delta));
+                progress.value = next;
+            }
+        })
+        .onEnd(() => {
+            'worklet';
+            runOnJS(emitValue)(progress.value);
+        });
+
+    // Tap on track to jump
+    const tapGesture = Gesture.Tap()
+        .onEnd((e) => {
+            'worklet';
+            if (trackW.value > 0) {
+                const next = Math.max(0, Math.min(1, e.x / trackW.value));
+                progress.value = withTiming(next, { duration: 150 });
+                runOnJS(emitValue)(next);
+            }
+        });
+
+    const composed = Gesture.Race(panGesture, tapGesture);
+
+    // Animated styles — run entirely on the UI thread
+    const thumbAnimStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: progress.value * trackW.value - THUMB_SIZE / 2 }],
+    }));
+
+    const filledAnimStyle = useAnimatedStyle(() => ({
+        width: progress.value * trackW.value,
+    }));
+
+    const handleLayout = useCallback((e: LayoutChangeEvent) => {
+        trackW.value = e.nativeEvent.layout.width;
+    }, [trackW]);
+
+    const displayValue = formatValue
+        ? formatValue(value)
+        : `${Math.round(value)}%`;
+
+    return (
+        <View
+            style={[styles.wrapper, style]}
+            accessibilityRole="adjustable"
+            accessibilityLabel={accessibilityLabel ?? label ?? 'Slider'}
+            accessibilityValue={{ min, max, now: Math.round(value) }}
+        >
+            {/* Label Row */}
+            {hasLabel ? (
+                <View style={styles.labelRow}>
+                    <Text style={[styles.label, { color: COLORS.textPrimary, fontFamily: theme.typography.semiBold }]}>{label}</Text>
+                    {shouldShowValue ? (
+                        <Text style={[styles.valueText, { color: COLORS.textSecondary, fontFamily: theme.typography.semiBold }]}>{displayValue}</Text>
+                    ) : null}
+                </View>
+            ) : null}
+
+            {/* Track */}
+            <GestureDetector gesture={composed}>
+                <Animated.View style={styles.trackContainer} onLayout={handleLayout}>
+                    {/* Unfilled track (glass) */}
+                    <View style={[styles.trackUnfilled, { backgroundColor: COLORS.border }]} />
+
+                    {/* Filled track */}
+                    <Animated.View style={[styles.trackFilled, filledAnimStyle, { backgroundColor: COLORS.accent }]} />
+
+                    {/* Thumb */}
+                    <Animated.View style={[styles.thumb, { backgroundColor: COLORS.white, shadowColor: COLORS.shadow }, thumbAnimStyle]} />
+                </Animated.View>
+            </GestureDetector>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: '100%',
+    },
+    labelRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 10,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    valueText: {
+        fontSize: 14,
+        fontWeight: '600',
+    },
+    trackContainer: {
+        height: THUMB_SIZE + 8,
+        justifyContent: 'center',
+        position: 'relative',
+    },
+    trackUnfilled: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        height: TRACK_HEIGHT,
+        borderRadius: TRACK_HEIGHT / 2,
+    },
+    trackFilled: {
+        position: 'absolute',
+        left: 0,
+        height: TRACK_HEIGHT,
+        borderRadius: TRACK_HEIGHT / 2,
+    },
+    thumb: {
+        position: 'absolute',
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: THUMB_SIZE / 2,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.3,
+        shadowRadius: 4,
+        elevation: 5,
+    },
+});