fluentglass 0.2.6

package/src/components/FluentGlassLabeledInput.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StyleSheet, View, Text, StyleProp, ViewStyle, KeyboardTypeOptions } from 'react-native';
+import FluentGlassTextInput from './FluentGlassTextInput';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassLabeledInputProps {
+    label?: string;
+    accessibilityLabel?: string;
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    keyboardType?: KeyboardTypeOptions;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    secureTextEntry?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassLabeledInput (Molécula)
+ * Input con una etiqueta (label) en la parte superior.
+ */
+export default function FluentGlassLabeledInput({ label,
+    value,
+    onChangeText,
+    placeholder,
+    keyboardType,
+    autoCapitalize,
+    secureTextEntry,
+    style,
+    accessibilityLabel, }: FluentGlassLabeledInputProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    return (
+        <View style={[styles.wrapper, style]}>
+            <Text style={[styles.label, { color: COLORS.textPrimary, fontFamily: theme.typography.semiBold }]}>{label}</Text>
+            <FluentGlassTextInput
+                value={value}
+                onChangeText={onChangeText}
+                placeholder={placeholder}
+                keyboardType={keyboardType}
+                autoCapitalize={autoCapitalize}
+                secureTextEntry={secureTextEntry}
+                accessibilityLabel={accessibilityLabel ?? label}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        width: '100%',
+        marginBottom: 16,
+    },
+    label: {
+        color: undefined, // Applied inline from useTheme()
+        marginBottom: 8,
+        fontSize: 13,
+        marginLeft: 4,
+        fontWeight: '600',
+        letterSpacing: 0.3,
+    },
+});

package/src/components/FluentGlassLayout.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { LinearGradient } from 'expo-linear-gradient';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassLayoutProps {
+    children: React.ReactNode;
+}
+
+/**
+ * FluentGlassLayout (Wrapper)
+ * The "Deep Liquid" environment.
+ * Replaces LiquidBackground with the specific "Orbs" mesh requested.
+ */
+export default function FluentGlassLayout({ children }: FluentGlassLayoutProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    return (
+        <View style={[styles.container, { backgroundColor: COLORS.background }]}>
+            {/* 1. Deepest Navy Base */}
+            <View style={[styles.baseLayer, { backgroundColor: COLORS.background }]} />
+
+            {/* 2. Cyan Orb (Top-Left) */}
+            <View style={[styles.orbCyan, { backgroundColor: COLORS.accent }]} />
+            <LinearGradient
+                colors={[COLORS.accent, 'transparent']}
+                start={{ x: 0.2, y: 0.2 }}
+                end={{ x: 0.8, y: 0.8 }}
+                style={styles.orbCyan}
+            />
+
+            {/* 3. Blue Depth Orb (Bottom-Right) */}
+            <View style={[styles.orbBlue, { backgroundColor: COLORS.secondary }]} />
+            <LinearGradient
+                colors={[COLORS.secondary, 'transparent']}
+                start={{ x: 0.8, y: 0.8 }}
+                end={{ x: 0.2, y: 0.2 }}
+                style={styles.orbBlue}
+            />
+
+            {/* 4. Mesh Texture / Noise (Simulated) */}
+            <View style={styles.noiseOverlay} />
+
+            {/* Content */}
+            <View style={styles.content}>
+                {children}
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        overflow: 'hidden', // Contain decorative orbs
+    },
+    baseLayer: {
+        ...StyleSheet.absoluteFillObject,
+    },
+    orbCyan: {
+        position: 'absolute',
+        top: -100,
+        left: -100,
+        width: 400,
+        height: 400,
+        borderRadius: 200,
+        opacity: 0.15,
+        // blurRadius removed: not valid on View, only on Image
+    },
+    orbBlue: {
+        position: 'absolute',
+        bottom: -100,
+        right: -100,
+        width: 500,
+        height: 500,
+        borderRadius: 250,
+        opacity: 0.1,
+    },
+    content: {
+        flex: 1,
+        zIndex: 1,
+    },
+    noiseOverlay: {
+        ...StyleSheet.absoluteFillObject,
+        opacity: 0.02,
+        backgroundColor: '#fff', // Simple noise sim
+    }
+});

package/src/components/FluentGlassPasswordInput.tsx

@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import { StyleSheet, TouchableOpacity, StyleProp, ViewStyle } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import FluentGlassTextInput from './FluentGlassTextInput';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassPasswordInputProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    style?: StyleProp<ViewStyle>;
+    accessibilityLabel?: string;
+}
+
+/**
+ * FluentGlassPasswordInput (Molécula)
+ * Input específico para contraseñas con botón para revelar/ocultar.
+ */
+export default function FluentGlassPasswordInput({ value,
+    onChangeText,
+    placeholder = 'Password',
+    style,
+    accessibilityLabel, }: FluentGlassPasswordInputProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    const [isPasswordVisible, setIsPasswordVisible] = useState(false);
+
+    const toggleVisibility = () => {
+        setIsPasswordVisible(!isPasswordVisible);
+    };
+
+    return (
+        <FluentGlassTextInput
+            value={value}
+            onChangeText={onChangeText}
+            placeholder={placeholder}
+            secureTextEntry={!isPasswordVisible}
+            autoCapitalize="none"
+            style={style}
+            accessibilityLabel={accessibilityLabel ?? 'Password'}
+        >
+            <TouchableOpacity onPress={toggleVisibility} style={styles.iconButton} hitSlop={10} accessibilityRole="button" accessibilityLabel="Toggle password visibility">
+                <Ionicons
+                    name={isPasswordVisible ? "eye-off-outline" : "eye-outline"}
+                    size={20}
+                    color={COLORS.textSecondary}
+                />
+            </TouchableOpacity>
+        </FluentGlassTextInput>
+    );
+}
+
+const styles = StyleSheet.create({
+    iconButton: {
+        padding: 10,
+        marginRight: 6,
+    },
+});

package/src/components/FluentGlassPopover.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassPopoverProps extends FluentGlassBaseProps {
+    children?: React.ReactNode;
+    content?: React.ReactNode;
+    visible?: boolean;
+    onClose?: () => void;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassPopover (Component)
+ * Simple tooltip/popover container.
+ * Note: Full positioning logic is complex; this is a display atom.
+ */
+export default function FluentGlassPopover({ children,
+    content,
+    visible,
+    size,
+    colorScheme,
+    blur,
+    radius = 'md',
+    style }: FluentGlassPopoverProps) {
+    const { typography, colors } = useTheme();
+
+    if (!visible) return children;
+
+    return (
+        <View style={styles.container}>
+            {children}
+            <View style={styles.popover} accessibilityLabel="Popover">
+                <FluentGlass
+                    style={[styles.glass, style]}
+                    size={size}
+                    colorScheme={colorScheme}
+                    blur={blur}
+                    radius={radius}
+                >
+                    <Text style={[
+                        styles.text,
+                        { fontFamily: typography.medium, color: colors.textPrimary }
+                    ]}>
+                        {content}
+                    </Text>
+                </FluentGlass>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'relative',
+        zIndex: 10,
+    },
+    popover: {
+        position: 'absolute',
+        top: -40,
+        alignSelf: 'center',
+    },
+    glass: {
+        paddingVertical: 6,
+        paddingHorizontal: 12,
+        minWidth: 100,
+        alignItems: 'center',
+    },
+    text: {
+        fontSize: 12,
+    },
+});

package/src/components/FluentGlassResponsiveRow.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { StyleSheet, View, StyleProp, ViewStyle } from 'react-native';
+import useBreakpoint from '../hooks/useBreakpoint';
+
+/**
+ * FluentGlassResponsiveRow (Layout Helper)
+ *
+ * Renders children in a responsive flex row:
+ *   - Mobile (<600px): single column (children stack vertically)
+ *   - Tablet (600–1023px): 2 columns
+ *   - Desktop (≥1024px): configurable columns (default 2, max 3)
+ *
+ * Props:
+ *   columns       - Number of columns on desktop (default: 2, max: 3)
+ *   gap           - Gap between items (default: 16)
+ *   style         - Container style override (optional)
+ *   mobileStack   - If true, stack vertically on mobile (default: true)
+ *   children      - Elements to distribute across columns
+ */
+export default function FluentGlassResponsiveRow({
+    columns: desktopCols = 2,
+    gap = 16,
+    style,
+    mobileStack = true,
+    children,
+}: {
+    columns?: number;
+    gap?: number;
+    style?: StyleProp<ViewStyle>;
+    mobileStack?: boolean;
+    children: React.ReactNode;
+}) {
+    const { isMobile, isTablet } = useBreakpoint();
+
+    // Determine actual column count
+    let cols = desktopCols;
+    if (isMobile && mobileStack) cols = 1;
+    else if (isTablet) cols = Math.min(desktopCols, 2);
+
+    const childrenArray = React.Children.toArray(children).filter(Boolean);
+
+    if (cols <= 1) {
+        // Stack vertically
+        return (
+            <View style={[{ gap }, style]}>
+                {childrenArray}
+            </View>
+        );
+    }
+
+    // Flex row with wrapping
+    return (
+        <View style={[styles.row, { gap }, style]}>
+            {childrenArray.map((child, index) => (
+                <View
+                    key={index}
+                    style={{
+                        flexBasis: `${(100 / cols) - 1}%`,
+                        flexGrow: 1,
+                        flexShrink: 1,
+                        minWidth: 280,
+                    }}
+                >
+                    {child}
+                </View>
+            ))}
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    row: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+});

package/src/components/FluentGlassScrollArea.tsx

@@ -0,0 +1,110 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, ScrollView, Platform } from 'react-native';
+import useTheme from '../theme/useTheme';
+import { ThemeColors } from '../types/theme';
+
+// Inject global scrollbar CSS on web (once)
+let scrollbarStyleInjected = false;
+
+function injectScrollbarCSS(colors: ThemeColors) {
+    if (scrollbarStyleInjected || Platform.OS !== 'web') return;
+    scrollbarStyleInjected = true;
+
+    const css = `
+        /* FluentGlass Custom Scrollbar — Deep Liquid Theme */
+        /* !important is required to override React Native Web's inline scrollbar hiding */
+
+        /* Webkit (Chrome, Edge, Safari) */
+        ::-webkit-scrollbar {
+            width: 8px !important;
+            height: 8px !important;
+            display: block !important;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: ${colors.background}4D !important;
+            border-radius: 8px !important;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: ${colors.border} !important;
+            border-radius: 8px !important;
+            border: 1px solid ${colors.borderSubtle} !important;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: ${colors.accent}73 !important;
+            border-color: ${colors.accent}4D !important;
+        }
+
+        ::-webkit-scrollbar-thumb:active {
+            background: ${colors.accent}99 !important;
+        }
+
+        ::-webkit-scrollbar-corner {
+            background: transparent !important;
+        }
+
+        /* Firefox */
+        * {
+            scrollbar-width: thin !important;
+            scrollbar-color: ${colors.border} ${colors.background}4D !important;
+        }
+    `;
+
+    const style = document.createElement('style');
+    style.textContent = css;
+    style.id = 'fluentglass-scrollbar';
+    document.head.appendChild(style);
+}
+
+/**
+ * FluentGlassScrollArea (Component)
+ * Standard scroll view wrapper with custom glassmorphism scrollbar on web.
+ * On native platforms, uses the default system scrollbar.
+ */
+import { ViewStyle, StyleProp, ScrollViewProps } from 'react-native';
+
+export interface FluentGlassScrollAreaProps extends ScrollViewProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    horizontal?: boolean;
+    showsIndicators?: boolean;
+}
+
+export default function FluentGlassScrollArea({
+    children,
+    style,
+    contentContainerStyle,
+    horizontal = false,
+    showsIndicators = true,
+}: FluentGlassScrollAreaProps) {
+    const theme = useTheme();
+
+    // Inject custom scrollbar CSS on mount (web only, once globally)
+    useEffect(() => {
+        injectScrollbarCSS(theme.colors);
+    }, []);
+
+    return (
+        <ScrollView
+            style={[styles.container, style]}
+            contentContainerStyle={[styles.content, contentContainerStyle]}
+            horizontal={horizontal}
+            showsHorizontalScrollIndicator={showsIndicators && horizontal}
+            showsVerticalScrollIndicator={showsIndicators && !horizontal}
+        >
+            {children}
+        </ScrollView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        padding: 0,
+    },
+});

package/src/components/FluentGlassSegmentedControl.tsx

@@ -0,0 +1,140 @@
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, Text, View, Pressable, useWindowDimensions } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    runOnJS,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassSegmentedControl
+ * A glass-style segmented control with a sliding indicator.
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface FluentGlassSegmentedControlProps {
+    options?: string[];
+    selectedIndex?: number;
+    onChange?: (index: number) => void;
+    style?: StyleProp<ViewStyle>;
+}
+
+export default function FluentGlassSegmentedControl({
+    options = ['Option 1', 'Option 2'],
+    selectedIndex = 0,
+    onChange, // (index: number) => void
+    style,
+}: FluentGlassSegmentedControlProps) {
+    const theme = useTheme();
+    const [containerWidth, setContainerWidth] = useState(0);
+    const translateX = useSharedValue(0);
+
+    // Calculate width of the indicator based on container width and item count
+    const itemWidth = containerWidth / options.length;
+
+    useEffect(() => {
+        if (itemWidth > 0) {
+            translateX.value = withSpring(selectedIndex * itemWidth, {
+                damping: 25,
+                stiffness: 120,
+            });
+        }
+    }, [selectedIndex, itemWidth]);
+
+    const handlePress = (index: number) => {
+        if (onChange) {
+            onChange(index);
+        }
+    };
+
+    const animatedStyle = useAnimatedStyle(() => {
+        return {
+            transform: [{ translateX: translateX.value }],
+            width: itemWidth - 8, // padding adjustment
+        };
+    });
+
+    return (
+        <FluentGlass
+            style={[styles.container, style]}
+            intensity={30}
+            tint="deep"
+            borderRadius={16}
+            accessibilityRole="tablist"
+        >
+            <View
+                style={styles.track}
+                onLayout={(e) => setContainerWidth(e.nativeEvent.layout.width)}
+            >
+                {/* Sliding Indicator */}
+                {containerWidth > 0 && (
+                    <Animated.View style={[styles.indicatorContainer, animatedStyle]}>
+                        <FluentGlass
+                            style={styles.indicator}
+                            intensity={40}
+                            tint="dark"
+                            borderRadius={12}
+                            borderOpacity={0.4}
+                        />
+                    </Animated.View>
+                )}
+
+                {/* Options */}
+                {options.map((option, index) => (
+                    <Pressable
+                        key={index}
+                        onPress={() => handlePress(index)}
+                        style={styles.option}
+                        accessibilityRole="tab"
+                        accessibilityLabel={option}
+                        accessibilityState={{ selected: selectedIndex === index }}
+                    >
+                        <Text
+                            style={[
+                                { fontSize: 14 },
+                                { color: theme.colors.textSecondary, fontFamily: theme.typography.medium },
+                                selectedIndex === index && { color: theme.colors.textPrimary, fontFamily: theme.typography.bold },
+                            ]}
+                        >
+                            {option}
+                        </Text>
+                    </Pressable>
+                ))}
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: 48,
+        justifyContent: 'center',
+    },
+    track: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 4,
+    },
+    indicatorContainer: {
+        position: 'absolute',
+        height: '100%',
+        left: 4,
+        top: 4,
+        paddingBottom: 8, // compensate parent padding
+    },
+    indicator: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+    option: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 1
+    }
+});