fluentglass 0.2.6

package/src/components/FluentGlassDock.tsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import { StyleSheet, View, Pressable, ViewStyle } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+const ITEM_SIZE = 56;
+const ITEM_GAP = 16;
+const PAD_H = 24;
+
+const SPRING_CONFIG = {
+    mass: 0.8,
+    damping: 14,
+    stiffness: 100,
+    overshootClamping: false,
+};
+
+export interface DockItemConfig {
+    icon: React.ReactNode;
+    label?: string;
+}
+
+interface DockItemProps {
+    icon: React.ReactNode;
+    label?: string;
+    onPress: () => void;
+    isActive: boolean;
+    accentColor: string;
+}
+
+// Internal Dock Item Component
+function DockItem({ icon, label, onPress, isActive, accentColor }: DockItemProps) {
+    const progress = useSharedValue(isActive ? 1 : 0);
+
+    React.useEffect(() => {
+        progress.value = withSpring(isActive ? 1 : 0, SPRING_CONFIG);
+    }, [isActive]);
+
+    // Icon Scale
+    const iconStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: 1 + (progress.value * 0.15) }],
+    }));
+
+    // Dot Appearance
+    const dotStyle = useAnimatedStyle(() => ({
+        opacity: progress.value,
+        transform: [{ scale: progress.value }],
+    }));
+
+    return (
+        <Pressable onPress={onPress} accessibilityRole="tab" accessibilityLabel={label ?? 'Dock item'} accessibilityState={{ selected: isActive }}>
+            <Animated.View style={styles.itemWrapper}>
+                <FluentGlass
+                    style={styles.itemContainer}
+                    intensity={25}
+                    borderRadius={16}
+                    borderOpacity={0.2}
+                    tint="dark"
+                >
+                    {/* Icon Content */}
+                    <Animated.View style={[styles.centeredContent, iconStyle]}>
+                        {icon}
+                    </Animated.View>
+                </FluentGlass>
+
+                {/* Indicator Dot */}
+                <Animated.View style={[styles.dot, dotStyle, { backgroundColor: accentColor }]} />
+            </Animated.View>
+        </Pressable>
+    );
+}
+
+export interface FluentGlassDockProps {
+    items: DockItemConfig[];
+    activeIndex: number;
+    onSelect: (index: number) => void;
+    floating?: boolean;
+    style?: ViewStyle;
+}
+
+/**
+ * FluentGlassDock (Component)
+ * Floating bottom navigation bar with sliding glow indicator.
+ */
+export default function FluentGlassDock({ items, activeIndex, onSelect, floating = true, style }: FluentGlassDockProps) {
+    const theme = useTheme();
+    const themeColors = theme.colors;
+
+    // Sliding indicator position
+    const translateX = useSharedValue(activeIndex * (ITEM_SIZE + ITEM_GAP));
+
+    React.useEffect(() => {
+        translateX.value = withSpring(activeIndex * (ITEM_SIZE + ITEM_GAP), {
+            mass: 0.4,
+            damping: 18,
+            stiffness: 200,
+            overshootClamping: false,
+        });
+    }, [activeIndex]);
+
+    const slidingStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: translateX.value }],
+    }));
+
+    return (
+        <View style={[
+            floating ? styles.dockWrapperFloating : styles.dockWrapperRelative,
+            style
+        ]} accessibilityRole="toolbar">
+            {/* Dock Background Pill */}
+            <FluentGlass
+                style={styles.dockPill}
+                intensity={20}
+                borderRadius={32}
+                borderOpacity={0.1}
+                tint="dark"
+            >
+                <View style={styles.itemsRow}>
+                    {/* Sliding Glow Indicator */}
+                    <Animated.View style={[styles.slidingIndicator, slidingStyle, { backgroundColor: themeColors.accent + '20', borderColor: themeColors.accent + '60' }]} />
+
+                    {items.map((item: DockItemConfig, index: number) => (
+                        <DockItem
+                            key={index}
+                            icon={item.icon}
+                            label={item.label}
+                            isActive={activeIndex === index}
+                            onPress={() => onSelect(index)}
+                            accentColor={themeColors.accent}
+                        />
+                    ))}
+                </View>
+            </FluentGlass>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    dockWrapperFloating: {
+        position: 'absolute',
+        bottom: 34,
+        width: '100%',
+        alignItems: 'center',
+        paddingHorizontal: 20,
+        zIndex: 100,
+    },
+    dockWrapperRelative: {
+        width: '100%',
+        alignItems: 'center',
+        paddingVertical: 20,
+    },
+    dockPill: {
+        // Auto width based on content
+    },
+    itemsRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        gap: ITEM_GAP,
+        paddingVertical: 12,
+        paddingHorizontal: PAD_H,
+    },
+    slidingIndicator: {
+        position: 'absolute',
+        top: 12,
+        left: PAD_H,
+        width: ITEM_SIZE,
+        height: ITEM_SIZE,
+        borderRadius: 16,
+        borderWidth: 1,
+    },
+    itemWrapper: {
+        alignItems: 'center',
+        marginBottom: 4,
+    },
+    itemContainer: {
+        width: ITEM_SIZE,
+        height: ITEM_SIZE,
+    },
+    centeredContent: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    dot: {
+        width: 4,
+        height: 4,
+        borderRadius: 2,
+        marginTop: 6,
+    },
+});

package/src/components/FluentGlassDropdown.tsx

@@ -0,0 +1,382 @@
+import React, { useState, useRef, useCallback, useEffect } from 'react';
+import {
+    StyleSheet,
+    Text,
+    View,
+    Pressable,
+    Dimensions,
+    ScrollView,
+    Modal,
+    StyleProp,
+    ViewStyle,
+} from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    withSpring,
+    Easing,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { ThemeColors, ThemeTypography } from '../types/theme';
+
+/**
+ * FluentGlassDropdown (Molecule)
+ * Inline glass dropdown with auto-direction (opens up or down based on space).
+ * Animations fully driven by SharedValues on the UI thread.
+ *
+ * @level Molecule
+ * @composition FluentGlass (Atom), Text, Pressable
+ *
+ * Two data formats:
+ *   Flat:    options={[{ label, value }]}
+ *   Grouped: sections={[{ title, data: [{ label, value }] }]}
+ */
+const SCREEN_HEIGHT = Dimensions.get('window').height;
+const MAX_DROPDOWN_HEIGHT = 260;
+
+const SPRING_CONFIG = { damping: 18, stiffness: 300, mass: 0.8 };
+const TIMING_CONFIG = { duration: 180, easing: Easing.out(Easing.cubic) };
+
+interface DropdownOption {
+    label: string;
+    value: any;
+}
+
+interface DropdownSection {
+    title: string;
+    data: DropdownOption[];
+}
+
+interface TriggerLayout {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+}
+
+export interface FluentGlassDropdownProps {
+    value?: any;
+    onValueChange?: (val: any) => void;
+    options?: DropdownOption[];
+    sections?: DropdownSection[];
+    placeholder?: string;
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+
+export default function FluentGlassDropdown({
+    value,
+    onValueChange,
+    options,
+    sections,
+    placeholder = 'Select option',
+    label,
+    style,
+    accessibilityLabel,
+}: FluentGlassDropdownProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    const [isOpen, setIsOpen] = useState(false);
+    const [triggerLayout, setTriggerLayout] = useState<TriggerLayout | null>(null);
+    const [openDirection, setOpenDirection] = useState<'up' | 'down'>('down');
+    const triggerRef = useRef<View>(null);
+
+    // Animation shared values — runs on UI thread
+    const opacity = useSharedValue(0);
+    const scale = useSharedValue(0.92);
+
+    const isGrouped = Boolean(sections);
+
+    // Animate in when opened
+    useEffect(() => {
+        if (isOpen) {
+            opacity.value = withTiming(1, TIMING_CONFIG);
+            scale.value = withSpring(1, SPRING_CONFIG);
+        }
+    }, [isOpen, opacity, scale]);
+
+    const panelAnimStyle = useAnimatedStyle(() => ({
+        opacity: opacity.value,
+        transform: [{ scale: scale.value }],
+    }));
+
+    // Find selected label
+    const findSelectedLabel = (): string | null => {
+        if (isGrouped && sections) {
+            for (const section of sections) {
+                const found = section.data.find((item) => item.value === value);
+                if (found) return found.label;
+            }
+            return null;
+        }
+        if (options) {
+            const found = options.find((item) => item.value === value);
+            return found ? found.label : null;
+        }
+        return null;
+    };
+
+    const selectedLabel = findSelectedLabel();
+
+    const handleOpen = useCallback(() => {
+        if (triggerRef.current) {
+            (triggerRef.current as any).measureInWindow((x: number, y: number, width: number, height: number) => {
+                const spaceBelow = SCREEN_HEIGHT - (y + height);
+                const spaceAbove = y;
+                const direction: 'up' | 'down' = spaceBelow >= MAX_DROPDOWN_HEIGHT || spaceBelow >= spaceAbove
+                    ? 'down'
+                    : 'up';
+
+                // Reset animation values before opening
+                opacity.value = 0;
+                scale.value = 0.92;
+
+                setTriggerLayout({ x, y, width, height });
+                setOpenDirection(direction);
+                setIsOpen(true);
+            });
+        }
+    }, [opacity, scale]);
+
+    const handleSelect = useCallback((itemValue: any) => {
+        onValueChange?.(itemValue);
+        // Animate out then close
+        opacity.value = withTiming(0, { duration: 120 });
+        scale.value = withTiming(0.95, { duration: 120 });
+        setTimeout(() => setIsOpen(false), 130);
+    }, [onValueChange, opacity, scale]);
+
+    const handleClose = useCallback(() => {
+        opacity.value = withTiming(0, { duration: 120 });
+        scale.value = withTiming(0.95, { duration: 120 });
+        setTimeout(() => setIsOpen(false), 130);
+    }, [opacity, scale]);
+
+    // Compute dropdown position
+    const dropdownPositionStyle: ViewStyle = triggerLayout ? {
+        position: 'absolute' as const,
+        left: triggerLayout.x,
+        width: triggerLayout.width,
+        maxHeight: MAX_DROPDOWN_HEIGHT,
+        ...(openDirection === 'down'
+            ? { top: triggerLayout.y + triggerLayout.height + 4 }
+            : { top: triggerLayout.y - MAX_DROPDOWN_HEIGHT - 4 }
+        ),
+    } : {};
+
+    return (
+        <View style={[styles.wrapper, style]}>
+            {/* Label */}
+            {label ? <Text style={[styles.label, { color: COLORS.textSecondary, fontFamily: theme.typography.medium }]}>{label}</Text> : null}
+
+            {/* Trigger */}
+            <Pressable ref={triggerRef as any} onPress={handleOpen} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? label ?? placeholder ?? 'Dropdown'} accessibilityState={{ expanded: isOpen }}>
+                <FluentGlass
+                    style={[styles.trigger, { backgroundColor: COLORS.inputBg }]}
+                    intensity={10}
+                    tint="dark"
+                    borderRadius={12}
+                    borderOpacity={0.25}
+                >
+                    <View style={styles.triggerContent}>
+                        <Text style={[
+                            styles.triggerText,
+                            { color: COLORS.textPrimary, fontFamily: theme.typography.medium },
+                            !selectedLabel && { color: COLORS.textSecondary },
+                        ]}>
+                            {selectedLabel || placeholder}
+                        </Text>
+                        <Text style={[styles.chevron, { color: COLORS.textSecondary }]}>
+                            {isOpen
+                                ? (openDirection === 'down' ? '▴' : '▾')
+                                : '▾'}
+                        </Text>
+                    </View>
+                </FluentGlass>
+            </Pressable>
+
+            {/* Dropdown overlay */}
+            {isOpen ? (
+                <Modal
+                    visible
+                    transparent
+                    animationType="none"
+                    onRequestClose={handleClose}
+                >
+                    {/* Backdrop */}
+                    <Pressable style={styles.backdrop} onPress={handleClose}>
+                        {/* Animated dropdown panel */}
+                        <Animated.View style={[dropdownPositionStyle, panelAnimStyle]}>
+                            <Pressable onPress={(e) => e.stopPropagation()}>
+                                <FluentGlass
+                                    style={styles.dropdownGlass}
+                                    intensity={25}
+                                    tint="dark"
+                                    borderRadius={16}
+                                    borderOpacity={0.25}
+                                >
+                                    <ScrollView
+                                        style={styles.scrollInner}
+                                        bounces={false}
+                                        showsVerticalScrollIndicator={false}
+                                    >
+                                        {isGrouped
+                                            ? renderGrouped(sections!, value, handleSelect, COLORS, theme.typography)
+                                            : renderFlat(options, value, handleSelect, COLORS, theme.typography)
+                                        }
+                                    </ScrollView>
+                                </FluentGlass>
+                            </Pressable>
+                        </Animated.View>
+                    </Pressable>
+                </Modal>
+            ) : null}
+        </View>
+    );
+}
+
+/* ─── Render helpers ─── */
+
+function renderFlat(
+    options: DropdownOption[] | undefined,
+    selectedValue: any,
+    onSelect: (val: any) => void,
+    COLORS: ThemeColors,
+    typography: ThemeTypography,
+): React.ReactNode {
+    if (!options) return null;
+    return options.map((item, i) => (
+        <Pressable
+            key={String(item.value)}
+            style={[
+                styles.option,
+                i < options.length - 1 && [styles.optionBorder, { borderBottomColor: COLORS.borderSubtle }],
+            ]}
+            onPress={() => onSelect(item.value)}
+            accessibilityLabel={item.label}
+            accessibilityState={{ selected: item.value === selectedValue }}
+        >
+            <Text style={[
+                styles.optionText,
+                { color: COLORS.textPrimary, fontFamily: typography.medium },
+                item.value === selectedValue && { color: COLORS.accent, fontWeight: '600' as const, fontFamily: typography.semiBold },
+            ]}>
+                {item.label}
+            </Text>
+        </Pressable>
+    ));
+}
+
+function renderGrouped(
+    sections: DropdownSection[],
+    selectedValue: any,
+    onSelect: (val: any) => void,
+    COLORS: ThemeColors,
+    typography: ThemeTypography,
+): React.ReactNode {
+    return sections.map((section, sectionIdx) => (
+        <View key={section.title}>
+            {/* Section separator (between groups) */}
+            {sectionIdx > 0 ? <View style={[styles.sectionSeparator, { backgroundColor: COLORS.border }]} /> : null}
+
+            {/* Section header */}
+            <View style={styles.sectionHeader}>
+                <Text style={[styles.sectionTitle, { color: COLORS.textPrimary, fontFamily: typography.bold }]}>{section.title}</Text>
+            </View>
+
+            {/* Section items */}
+            {section.data.map((item) => (
+                <Pressable
+                    key={String(item.value)}
+                    style={styles.option}
+                    onPress={() => onSelect(item.value)}
+                    accessibilityLabel={item.label}
+                    accessibilityState={{ selected: item.value === selectedValue }}
+                >
+                    <Text style={[
+                        styles.optionText,
+                        styles.optionTextIndented,
+                        { color: COLORS.textPrimary, fontFamily: typography.medium },
+                        item.value === selectedValue && { color: COLORS.accent, fontWeight: '600' as const, fontFamily: typography.semiBold },
+                    ]}>
+                        {item.label}
+                    </Text>
+                </Pressable>
+            ))}
+        </View>
+    ));
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: '100%',
+        zIndex: 10,
+    },
+    label: {
+        marginBottom: 8,
+        fontSize: 14,
+        marginLeft: 4,
+        fontWeight: '500',
+    },
+    trigger: {
+        height: 48,
+    },
+    triggerContent: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 16,
+    },
+    triggerText: {
+        fontSize: 15,
+        fontWeight: '500',
+        flex: 1,
+    },
+    chevron: {
+        fontSize: 12,
+        marginLeft: 8,
+    },
+    backdrop: {
+        flex: 1,
+    },
+    dropdownGlass: {
+        overflow: 'hidden',
+    },
+    scrollInner: {
+        maxHeight: MAX_DROPDOWN_HEIGHT - 2,
+    },
+    option: {
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+    optionBorder: {
+        borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+    optionText: {
+        fontSize: 15,
+        fontWeight: '500',
+    },
+    optionTextIndented: {
+        paddingLeft: 12,
+    },
+    sectionSeparator: {
+        height: 1,
+        marginHorizontal: 12,
+    },
+    sectionHeader: {
+        paddingHorizontal: 16,
+        paddingTop: 12,
+        paddingBottom: 6,
+    },
+    sectionTitle: {
+        fontSize: 14,
+        fontWeight: '700',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+});

package/src/components/FluentGlassEmailInput.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import FluentGlassTextInput from './FluentGlassTextInput';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassEmailInputProps extends FluentGlassBaseProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+    [key: string]: unknown;
+}
+
+/**
+ * FluentGlassEmailInput (Molécula)
+ * Input configurado específicamente para correos electrónicos.
+ */
+export default function FluentGlassEmailInput({ value,
+    onChangeText,
+    placeholder = 'Enter your email',
+    style,
+    size,
+    colorScheme,
+    blur,
+    radius,
+    accessibilityLabel,
+    ...props }: FluentGlassEmailInputProps) {
+    return (
+        <FluentGlassTextInput
+            value={value}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            keyboardType="email-address"
+            autoCapitalize="none"
+            autoComplete="email"
+            size={size}
+            colorScheme={colorScheme}
+            blur={blur}
+            radius={radius}
+            style={style}
+            accessibilityLabel={accessibilityLabel ?? 'Email address'}
+            {...props}
+        />
+    );
+}

package/src/components/FluentGlassInput.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { StyleSheet, TextInput, View, Text } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassInput (Component)
+ * Text input with "carved" glass effect.
+ */
+import { ViewStyle, StyleProp, TextInputProps } from 'react-native';
+
+export interface FluentGlassInputProps extends TextInputProps {
+    label?: string;
+    style?: StyleProp<ViewStyle>;
+}
+
+export default function FluentGlassInput({
+    value,
+    onChangeText,
+    placeholder,
+    label,
+    style,
+    keyboardType,
+    secureTextEntry,
+    accessibilityLabel,
+    accessibilityHint,
+}: FluentGlassInputProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    return (
+        <View style={[styles.wrapper, style]}>
+            {label && <Text style={[styles.label, { color: COLORS.textSecondary, fontFamily: theme.typography.medium }]}>{label}</Text>}
+
+            <FluentGlass
+                style={[styles.container, { backgroundColor: COLORS.inputBg }]}
+                intensity={10}
+                borderRadius={12}
+                borderOpacity={0.1}
+            >
+                <TextInput
+                    style={[styles.input, { color: COLORS.textPrimary }]}
+                    value={value}
+                    onChangeText={onChangeText}
+                    placeholder={placeholder}
+                    placeholderTextColor={COLORS.textSecondary}
+                    keyboardType={keyboardType}
+                    secureTextEntry={secureTextEntry}
+                    accessibilityLabel={accessibilityLabel ?? label ?? placeholder}
+                    accessibilityHint={accessibilityHint}
+                />
+            </FluentGlass>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        marginBottom: 16,
+        width: '100%',
+    },
+    label: {
+        marginBottom: 8,
+        fontSize: 14,
+        marginLeft: 4,
+        fontWeight: '500',
+    },
+    container: {
+        height: undefined,
+        minHeight: 50,
+    },
+    input: {
+        flex: 1,
+        paddingHorizontal: 16,
+        fontSize: 16,
+    },
+});