fluentglass 0.2.6

package/src/components/FluentGlassSelect.tsx

@@ -0,0 +1,139 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, Text, View } from 'react-native';
+import FluentGlass from './FluentGlass';
+import FluentGlassSheet from './FluentGlassSheet';
+import useTheme from '../theme/useTheme';
+import { resolveSize, resolveColorScheme, resolveRadius, resolveBackwardCompat } from '../theme/resolvers';
+
+/**
+ * FluentGlassSelect (Component)
+ * Dropdown that triggers a Bottom Sheet for selection.
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface SelectOption {
+    label: string;
+    value: string | number;
+}
+
+export interface FluentGlassSelectProps extends FluentGlassBaseProps {
+    value?: string | number;
+    onValueChange: (value: string | number) => void;
+    options?: SelectOption[];
+    placeholder?: string;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+
+export default function FluentGlassSelect({
+    value,
+    onValueChange,
+    options = [], // { label, value }[]
+    placeholder = 'Select option',
+    label,
+    // New props
+    size,
+    colorScheme,
+    blur,
+    radius,
+    accessibilityLabel,
+}: FluentGlassSelectProps) {
+    const theme = useTheme();
+
+    const sizeConfig = resolveSize(theme, size || theme.defaults.size);
+    const compat = resolveBackwardCompat({ colorScheme, blur });
+    const resolvedScheme = compat.colorScheme || theme.defaults.colorScheme;
+    const resolvedRadius = resolveRadius(theme, radius || 'md');
+
+    const [isOpen, setIsOpen] = useState(false);
+
+    const selectedOption = options.find((opt) => opt.value === value);
+
+    return (
+        <>
+            <View style={styles.wrapper}>
+                {label && <Text style={[styles.label, { color: theme.colors.textSecondary, fontSize: sizeConfig.fontSize - 1, marginLeft: (sizeConfig.gap || 0) / 2, marginBottom: sizeConfig.gap || 0, fontFamily: theme.typography.medium }]}>{label}</Text>}
+
+                <TouchableOpacity onPress={() => setIsOpen(true)} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label ?? placeholder ?? 'Select'} accessibilityState={{ expanded: isOpen }}>
+                    <FluentGlass
+                        style={[styles.trigger, { minHeight: sizeConfig.minHeight }]}
+                        colorScheme={resolvedScheme}
+                        blur={compat.blur || 'subtle'}
+                        radius={radius}
+                        borderRadius={resolvedRadius}
+                        borderOpacity={0.15}
+                    >
+                        <View style={[styles.contentContainer, { paddingHorizontal: sizeConfig.paddingHorizontal }]}>
+                            <Text style={[
+                                styles.text,
+                                { fontSize: sizeConfig.fontSize, fontFamily: theme.typography.regular },
+                                !selectedOption ? { color: theme.colors.textSecondary } : { color: theme.colors.textPrimary }
+                            ]}>
+                                {selectedOption ? selectedOption.label : placeholder}
+                            </Text>
+                        </View>
+                        {/* Chevron Icon could go here */}
+                    </FluentGlass>
+                </TouchableOpacity>
+            </View>
+
+            <FluentGlassSheet
+                visible={isOpen}
+                onClose={() => setIsOpen(false)}
+                title={label || placeholder}
+                height="50%"
+                size={size}
+            >
+                {options.map((opt) => (
+                    <TouchableOpacity
+                        key={opt.value}
+                        style={[styles.option, { paddingVertical: sizeConfig.paddingHorizontal, borderBottomColor: `${theme.colors.textSecondary}1A` }]}
+                        accessibilityLabel={opt.label}
+                        accessibilityState={{ selected: value === opt.value }}
+                        onPress={() => {
+                            onValueChange(opt.value);
+                            setIsOpen(false);
+                        }}
+                    >
+                        <Text style={[
+                            styles.optionText,
+                            { fontSize: sizeConfig.fontSize, fontFamily: theme.typography.medium },
+                            value === opt.value ? { color: theme.colors.accent, fontFamily: theme.typography.semiBold } : { color: theme.colors.textSecondary }
+                        ]}>
+                            {opt.label}
+                        </Text>
+                        {value === opt.value && <View style={[styles.checkDot, { backgroundColor: theme.colors.accent }]} />}
+                    </TouchableOpacity>
+                ))}
+            </FluentGlassSheet>
+        </>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        marginBottom: 16,
+        width: '100%',
+    },
+    label: {},
+    trigger: {},
+    contentContainer: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    text: {},
+    option: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        borderBottomWidth: 1,
+    },
+    optionText: {},
+    checkDot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+});

package/src/components/FluentGlassSeparator.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassSeparatorProps {
+    orientation?: 'horizontal' | 'vertical';
+    opacity?: number;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassSeparator (Component)
+ * A subtle gradient line to divide content.
+ */
+export default function FluentGlassSeparator({ orientation = 'horizontal',
+    style,
+    opacity = 0.2, }: FluentGlassSeparatorProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    const isHorizontal = orientation === 'horizontal';
+
+    return (
+        <LinearGradient
+            accessible={false}
+            colors={['transparent', COLORS.textSecondary, 'transparent']}
+            start={isHorizontal ? { x: 0, y: 0 } : { x: 0, y: 0 }}
+            end={isHorizontal ? { x: 1, y: 0 } : { x: 0, y: 1 }}
+            style={[
+                styles.container,
+                isHorizontal ? styles.horizontal : styles.vertical,
+                { opacity },
+                style,
+            ]}
+        />
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        // Shared
+    },
+    horizontal: {
+        width: '100%',
+        height: 1,
+        marginVertical: 16,
+    },
+    vertical: {
+        width: 1,
+        height: '100%',
+        marginHorizontal: 16,
+    },
+});

package/src/components/FluentGlassSheet.tsx

@@ -0,0 +1,183 @@
+import React, { useEffect, useState, useCallback } from 'react';
+import { StyleSheet, Modal, View, TouchableWithoutFeedback, Text, Dimensions } from 'react-native';
+import { GestureDetector, Gesture } from 'react-native-gesture-handler';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withTiming,
+    runOnJS,
+    interpolate,
+    Extrapolation,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+
+const SPRING_CONFIG = { damping: 30, stiffness: 120 };
+
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface FluentGlassSheetProps {
+    visible: boolean;
+    onClose: () => void;
+    children?: React.ReactNode;
+    title?: string;
+    height?: string | number;
+    size?: string; // specific size config passing
+}
+
+export default function FluentGlassSheet({
+    visible,
+    onClose,
+    children,
+    title,
+    height = '50%',
+    size, // pass size prop specifically inherited from selects
+}: FluentGlassSheetProps) {
+    const { colors, typography } = useTheme();
+
+    // Internal state to keep Modal visible during exit animation
+    const [isVisibleInternal, setIsVisibleInternal] = useState(false);
+
+    // Shared value for vertical translation
+    // 0 = fully open, SCREEN_HEIGHT = fully closed
+    const translateY = useSharedValue(SCREEN_HEIGHT);
+    const context = useSharedValue({ y: 0 });
+
+    const closeModal = useCallback(() => {
+        'worklet';
+        translateY.value = withTiming(SCREEN_HEIGHT, { duration: 300 }, (finished) => {
+            if (finished) {
+                runOnJS(setIsVisibleInternal)(false);
+                runOnJS(onClose)();
+            }
+        });
+    }, [onClose, translateY]);
+
+    useEffect(() => {
+        if (visible) {
+            setIsVisibleInternal(true);
+            // Wait a tick for Modal to mount content, then animate in
+            // Using a slight delay ensures layout is ready
+            setTimeout(() => {
+                translateY.value = withSpring(0, SPRING_CONFIG);
+            }, 10);
+        } else if (!visible && isVisibleInternal) {
+            // Trigger exit animation if visible prop becomes false
+            translateY.value = withTiming(SCREEN_HEIGHT, { duration: 300 }, () => {
+                runOnJS(setIsVisibleInternal)(false);
+            });
+        }
+    }, [visible]);
+
+    const gesture = Gesture.Pan()
+        .onStart(() => {
+            context.value = { y: translateY.value };
+        })
+        .onUpdate((event) => {
+            // Only allow dragging downwards
+            translateY.value = Math.max(0, context.value.y + event.translationY);
+        })
+        .onEnd((event) => {
+            if (event.translationY > 100 || event.velocityY > 500) {
+                // Dragged far enough clearly or flicked down -> Close
+                runOnJS(onClose)(); // This triggers the useEffect logic above
+            } else {
+                // Spring back to open
+                translateY.value = withSpring(0, SPRING_CONFIG);
+            }
+        });
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: translateY.value }],
+    }));
+
+    const backdropStyle = useAnimatedStyle(() => ({
+        opacity: interpolate(
+            translateY.value,
+            [0, SCREEN_HEIGHT],
+            [1, 0],
+            Extrapolation.CLAMP
+        ),
+    }));
+
+    if (!isVisibleInternal) return null;
+
+    return (
+        <Modal transparent visible={isVisibleInternal} animationType="none">
+            <View style={styles.overlay}>
+                <TouchableWithoutFeedback onPress={onClose} accessibilityRole="button" accessibilityLabel="Close sheet">
+                    <Animated.View style={[StyleSheet.absoluteFill, styles.backdrop, { backgroundColor: colors.overlay }, backdropStyle]} />
+                </TouchableWithoutFeedback>
+
+                <GestureDetector gesture={gesture as any}>
+                    {/* @ts-ignore */}
+                    <Animated.View style={[styles.sheetContainer, { height }, animatedStyle]} accessibilityViewIsModal={true}>
+                        <FluentGlass
+                            style={styles.content}
+                            intensity={30}
+                            borderOpacity={0.2}
+                            borderRadius={24}
+                        >
+                            {/* Handle Bar Area - larger hit slop for gesture */}
+                            <View style={styles.handleContainer}>
+                                <View style={[styles.handle, { backgroundColor: `${colors.textPrimary}33` }]} />
+                            </View>
+
+                            {title && (
+                                <View style={[styles.header, { borderBottomColor: `${colors.textPrimary}1A` }]}>
+                                    <Text style={[styles.title, { color: colors.textPrimary, fontFamily: typography.semiBold }]}>{title}</Text>
+                                </View>
+                            )}
+
+                            <View style={styles.body}>
+                                {children}
+                            </View>
+                        </FluentGlass>
+                    </Animated.View>
+                </GestureDetector>
+            </View>
+        </Modal>
+    );
+}
+
+const styles = StyleSheet.create({
+    overlay: {
+        flex: 1,
+        justifyContent: 'flex-end',
+    },
+    backdrop: {
+    },
+    sheetContainer: {
+        width: '100%',
+    },
+    content: {
+        flex: 1,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+    },
+    handleContainer: {
+        alignItems: 'center',
+        paddingVertical: 12,
+        width: '100%',
+    },
+    handle: {
+        width: 40,
+        height: 4,
+        borderRadius: 2,
+    },
+    header: {
+        paddingHorizontal: 20,
+        paddingBottom: 10,
+        borderBottomWidth: 1,
+    },
+    title: {
+        fontSize: 18,
+    },
+    body: {
+        flex: 1,
+        padding: 20,
+    },
+});