fluentglass 0.2.6

package/src/components/FluentGlassStatWidget.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { resolveSize, resolveColorScheme, resolveBackwardCompat, resolveRadius } from '../theme/resolvers';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassStatWidgetProps extends FluentGlassBaseProps {
+    label?: string;
+    value?: string;
+    change?: string;
+    trend?: 'up' | 'down';
+    icon?: string;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassStatWidget (Molecule)
+ * KPI card with value, label, and formatted change indicator.
+ */
+export default function FluentGlassStatWidget({ label = 'Metric',
+    value = '0',
+    change = '0%',
+    trend = 'up',
+    icon = '📊',
+    style,
+    // New standardized props
+    size,
+    colorScheme,
+    blur,
+    radius, }: FluentGlassStatWidgetProps) {
+    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 || 'lg');
+
+    const isUp = trend === 'up';
+    const trendColor = isUp ? theme.colors.positive : theme.colors.negative;
+
+    return (
+        <FluentGlass
+            accessible={true}
+            accessibilityLabel={[label, value].filter(Boolean).join(': ')}
+            style={[styles.statCard, style]}
+            colorScheme={resolvedScheme}
+            blur={compat.blur || 'medium'}
+            radius={radius}
+            borderRadius={resolvedRadius}
+            borderOpacity={0.2}
+        >
+            <View style={[styles.statContent, { padding: sizeConfig.paddingHorizontal }]}>
+                {/* Header: Label + Icon */}
+                <View style={[styles.statHeader, { marginBottom: sizeConfig.gap }]}>
+                    <Text style={[styles.statLabel, { color: theme.colors.textSecondary, fontSize: sizeConfig.fontSize - 1, fontFamily: theme.typography.semiBold }]}>{label}</Text>
+                    <Text style={[styles.statIcon, { fontSize: sizeConfig.iconSize, color: theme.colors.textSecondary }]}>{icon}</Text>
+                </View>
+
+                {/* Value */}
+                <Text style={[styles.statValue, { color: theme.colors.textPrimary, fontSize: sizeConfig.fontSize * 1.8, marginBottom: (sizeConfig.gap ?? 0) / 2, fontFamily: theme.typography.bold }]}>{value}</Text>
+
+                {/* Change Indicator */}
+                <View style={[styles.statChange, { gap: (sizeConfig.gap ?? 0) / 2 }]}>
+                    <Text style={[styles.statArrow, { color: trendColor, fontFamily: theme.typography.bold }]}>
+                        {isUp ? '↑' : '↓'}
+                    </Text>
+                    <Text style={[styles.statChangeText, { color: trendColor, fontSize: sizeConfig.fontSize - 2, fontFamily: theme.typography.medium }]}>
+                        {change} vs last period
+                    </Text>
+                </View>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    statCard: {
+        flex: 1,
+        minWidth: 140,
+    },
+    statContent: {
+        padding: 16,
+    },
+    statHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    statLabel: {
+        fontWeight: '600',
+    },
+    statIcon: {
+    },
+    statValue: {
+        fontWeight: '700',
+    },
+    statChange: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    statArrow: {
+        fontWeight: '700',
+    },
+    statChangeText: {
+        fontWeight: '500',
+    },
+});

package/src/components/FluentGlassStatusIndicator.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { StyleSheet, Text, View, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+export interface FluentGlassStatusIndicatorProps {
+    label?: string;
+    status?: 'online' | 'away' | 'offline';
+    color?: string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * FluentGlassStatusIndicator (Atom)
+ * Status pill with a colored dot and label.
+ * Presets: 'online' (green), 'away' (amber), 'offline' (red), or custom via `color` prop.
+ */
+export default function FluentGlassStatusIndicator({ label,
+    status,
+    color,
+    style,
+    textStyle, }: FluentGlassStatusIndicatorProps) {
+    const { colors, typography } = useTheme();
+
+    const STATUS_COLORS: Record<string, string> = {
+        online: colors.positive,   // Emerald
+        away: colors.warning,      // Amber
+        offline: colors.negative,  // Red
+    };
+
+    const dotColor = color || (status && STATUS_COLORS[status]) || STATUS_COLORS.offline;
+
+    return (
+        <FluentGlass
+            accessible={true}
+            accessibilityLabel={label || (status && STATUS_LABELS[status]) || 'Status'}
+            style={[styles.container, style]}
+            intensity={15}
+            tint="dark"
+            borderRadius={20}
+            borderOpacity={0.2}
+        >
+            <View style={styles.content}>
+                <View style={[styles.dot, { backgroundColor: dotColor }]} />
+                <Text style={[styles.text, { color: colors.textPrimary, fontFamily: typography.medium }, textStyle]}>
+                    {label || (status && STATUS_LABELS[status]) || 'Unknown'}
+                </Text>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const STATUS_LABELS: Record<string, string> = {
+    online: 'Online',
+    away: 'Away',
+    offline: 'Offline',
+};
+
+const styles = StyleSheet.create({
+    container: {
+        height: 36,
+        alignSelf: 'flex-start',
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 16,
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+        marginRight: 8,
+    },
+    text: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+});

package/src/components/FluentGlassSwitch.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, View, Pressable } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withTiming,
+    interpolateColor,
+} from 'react-native-reanimated';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassSwitch (Atom)
+ * Glassmorphism toggle switch with animated thumb.
+ *
+ * @level Atom
+ * @composition None — self-contained primitive
+ *
+ * Props:
+ *   value       - Boolean on/off
+ *   onToggle    - Callback with new boolean value
+ *   label       - Optional text label shown to the right
+ *   disabled    - Grays out and disables interaction
+ */
+const TRACK_W = 50;
+const TRACK_H = 28;
+const THUMB_SIZE = 22;
+const THUMB_PADDING = 3;
+const TRAVEL = TRACK_W - THUMB_SIZE - THUMB_PADDING * 2;
+
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface FluentGlassSwitchProps {
+    value?: boolean;
+    onToggle?: (value: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+
+export default function FluentGlassSwitch({
+    value = false,
+    onToggle,
+    label,
+    disabled = false,
+    style,
+    accessibilityLabel,
+}: FluentGlassSwitchProps & { accessibilityLabel?: string }) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+
+    const progress = useSharedValue(value ? 1 : 0);
+
+    useEffect(() => {
+        progress.value = withTiming(value ? 1 : 0, { duration: 200 });
+    }, [value, progress]);
+
+    const trackAnimStyle = useAnimatedStyle(() => {
+        const backgroundColor = interpolateColor(
+            progress.value,
+            [0, 1],
+            [`${theme.colors.textSecondary}40`, theme.colors.accent] // Off: translucent text secondary → On: Accent Color
+        );
+        return { backgroundColor };
+    });
+
+    const thumbAnimStyle = useAnimatedStyle(() => ({
+        transform: [{ translateX: progress.value * TRAVEL }],
+    }));
+
+    const handlePress = () => {
+        if (!disabled && onToggle) {
+            onToggle(!value);
+        }
+    };
+
+    return (
+        <Pressable
+            onPress={handlePress}
+            style={[styles.wrapper, disabled && styles.wrapperDisabled, style]}
+            hitSlop={4}
+            accessibilityRole="switch"
+            accessibilityLabel={accessibilityLabel ?? label}
+            accessibilityState={{ checked: !!value, disabled: !!disabled }}
+        >
+            {/* Track */}
+            <Animated.View style={[styles.track, trackAnimStyle]}>
+                {/* Thumb */}
+                <Animated.View style={[styles.thumb, { backgroundColor: theme.colors.white, shadowColor: theme.colors.shadow }, thumbAnimStyle]} />
+            </Animated.View>
+
+            {/* Label */}
+            {label ? (
+                <Text style={[styles.label, { color: theme.colors.textPrimary, fontFamily: theme.typography.medium }, disabled ? { color: theme.colors.textSecondary } : undefined]}>
+                    {label}
+                </Text>
+            ) : null}
+        </Pressable>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    wrapperDisabled: {
+        opacity: 0.4,
+    },
+    track: {
+        width: TRACK_W,
+        height: TRACK_H,
+        borderRadius: TRACK_H / 2,
+        justifyContent: 'center',
+        paddingHorizontal: THUMB_PADDING,
+    },
+    thumb: {
+        width: THUMB_SIZE,
+        height: THUMB_SIZE,
+        borderRadius: THUMB_SIZE / 2,
+        // Shadow
+        shadowOffset: { width: 0, height: 1 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3,
+        elevation: 4,
+    },
+    label: {
+        fontSize: 14,
+        marginLeft: 8,
+    },
+});

package/src/components/FluentGlassTable.tsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { StyleSheet, View, Text, TextInput, FlexAlignType, ViewStyle, TextStyle, TextInputProps } from 'react-native';
+import useTheme from '../theme/useTheme';
+
+/**
+ * FluentGlassTable (Namespace)
+ * Simple flex-based table layout.
+ */
+
+type CellAlign = 'left' | 'center' | 'right';
+
+export interface FluentGlassTableRootProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+}
+
+export interface FluentGlassTableRowProps {
+    children: React.ReactNode;
+    style?: ViewStyle;
+    isHeader?: boolean;
+}
+
+export interface FluentGlassTableCellProps {
+    children?: React.ReactNode;
+    style?: ViewStyle;
+    flex?: number;
+    align?: CellAlign;
+}
+
+export interface FluentGlassTableHeaderCellProps {
+    children?: React.ReactNode;
+    style?: ViewStyle;
+    flex?: number;
+    align?: CellAlign;
+}
+
+export interface FluentGlassTableEditableCellProps extends Omit<TextInputProps, 'value' | 'onChangeText' | 'style'> {
+    value: string;
+    onChangeText?: (text: string) => void;
+    style?: ViewStyle;
+    flex?: number;
+    align?: CellAlign;
+    textStyle?: TextStyle;
+}
+
+function Root({ children, style }: FluentGlassTableRootProps) {
+    return <View accessible={true} accessibilityLabel="Data table" style={[styles.root, style]}>{children}</View>;
+}
+
+function Row({ children, style, isHeader = false }: FluentGlassTableRowProps) {
+    const { colors } = useTheme();
+    return (
+        <View
+            style={[
+                styles.row,
+                { borderBottomColor: `${colors.textSecondary}1A` },
+                isHeader && { borderBottomColor: `${colors.textSecondary}4D`, marginBottom: 4 },
+                style,
+            ]}
+        >
+            {children}
+        </View>
+    );
+}
+
+const alignMap: Record<string, FlexAlignType> = {
+    left: 'flex-start',
+    center: 'center',
+    right: 'flex-end',
+};
+
+function Cell({ children, style, flex = 1, align = 'left' }: FluentGlassTableCellProps) {
+    const { colors } = useTheme();
+    const isText = typeof children === 'string' || typeof children === 'number';
+
+    return (
+        <View style={[styles.cell, { flex, alignItems: alignMap[align] }, style]}>
+            {isText ? (
+                <Text style={[styles.cellText, { color: colors.textPrimary }]}>{children}</Text>
+            ) : (
+                children
+            )}
+        </View>
+    );
+}
+
+function HeaderCell({ children, style, flex = 1, align = 'left' }: FluentGlassTableHeaderCellProps) {
+    const { colors, typography } = useTheme();
+    return (
+        <View style={[styles.cell, { flex, alignItems: alignMap[align] }, style]}>
+            <Text style={[styles.headerText, { color: colors.textSecondary, fontFamily: typography.semiBold }]}>{children}</Text>
+        </View>
+    );
+}
+
+function EditableCell({ value, onChangeText, style, flex = 1, align = 'left', textStyle, ...props }: FluentGlassTableEditableCellProps) {
+    const { colors } = useTheme();
+    return (
+        <View style={[styles.cell, { flex, alignItems: alignMap[align] }, style]}>
+            <TextInput
+                value={value}
+                onChangeText={onChangeText}
+                style={[styles.cellText, styles.input, { color: colors.textPrimary }, textStyle, { textAlign: align }]}
+                placeholderTextColor={colors.textSecondary}
+                {...props}
+            />
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    root: {
+        width: '100%',
+    },
+    row: {
+        flexDirection: 'row',
+        paddingVertical: 12,
+        borderBottomWidth: 1,
+        alignItems: 'center',
+    },
+    cell: {
+        paddingHorizontal: 4,
+    },
+    cellText: {
+        fontSize: 14,
+    },
+    headerText: {
+        fontSize: 12,
+        fontWeight: '600',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    input: {
+        padding: 0, // Remove default Android padding
+        width: '100%',
+    },
+});
+
+export const FluentGlassTable = {
+    Root,
+    Row,
+    Cell,
+    EditableCell,
+    Header: HeaderCell,
+};

package/src/components/FluentGlassTag.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+// removed static colors import
+import { StyleSheet, Text, View, Pressable } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { resolveColorScheme } from '../theme/resolvers';
+
+/**
+ * FluentGlassTag (Atom)
+ * Glassmorphism tag pill — dynamic glass for labels (tech stack, categories).
+ * Optionally removable via onRemove callback.
+ */
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
+import { FluentGlassBaseProps, FluentGlassColorScheme } from '../types/components';
+
+export interface FluentGlassTagProps extends FluentGlassBaseProps {
+    label: string | number;
+    onRemove?: () => void;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    color?: string;
+}
+
+export default function FluentGlassTag({
+    label,
+    onRemove,
+    style,
+    textStyle,
+    color, // Custom dot color override (optional)
+    colorScheme = 'info', // Default to bluish tint
+}: FluentGlassTagProps) {
+    const theme = useTheme();
+    const { colors, typography } = theme;
+
+    const colorConfig = resolveColorScheme(theme, colorScheme);
+    const dotColor = color || colorConfig.solid;
+    const textColor = colorConfig.text || colors.textPrimary;
+
+    return (
+        <FluentGlass
+            accessible={true}
+            accessibilityLabel={String(label)}
+            style={[styles.container, style]}
+            colorScheme={colorScheme}
+            intensity={20}
+            tint="dark"
+            borderRadius={20}
+            borderOpacity={0.3}
+        >
+            <View style={styles.content}>
+                <View style={[styles.dot, { backgroundColor: dotColor }]} />
+                <Text style={[styles.text, { fontFamily: typography.medium, color: textColor }, textStyle]}>
+                    {label}
+                </Text>
+                {onRemove ? (
+                    <Pressable onPress={onRemove} hitSlop={8} style={styles.removeBtn}>
+                        <Text style={[styles.removeText, { fontFamily: typography.bold, color: `${textColor}99` }]}>✕</Text>
+                    </Pressable>
+                ) : null}
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: 32,
+        alignSelf: 'flex-start',
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        paddingHorizontal: 14,
+    },
+    dot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        marginRight: 8,
+    },
+    text: {
+        fontSize: 13,
+        fontWeight: '500',
+    },
+    removeBtn: {
+        marginLeft: 8,
+        width: 16,
+        height: 16,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    removeText: {
+        fontSize: 11,
+        fontWeight: '700',
+    },
+});

package/src/components/FluentGlassTextInput.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { StyleSheet, TextInput, TextInputProps, View, StyleProp, ViewStyle, TextStyle, KeyboardTypeOptions } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { resolveSize, resolveBackwardCompat } from '../theme/resolvers';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassTextInputProps extends FluentGlassBaseProps {
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    keyboardType?: KeyboardTypeOptions;
+    autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
+    autoComplete?: TextInputProps['autoComplete'];
+    secureTextEntry?: boolean;
+    style?: StyleProp<ViewStyle>;
+    inputStyle?: StyleProp<TextStyle>;
+    children?: React.ReactNode;
+}
+
+/**
+ * FluentGlassTextInput (Átomo)
+ * Componente básico de input de texto con estilo glassmorphism.
+ */
+export default function FluentGlassTextInput({ value,
+    onChangeText,
+    placeholder,
+    keyboardType = 'default',
+    autoCapitalize = 'sentences',
+    autoComplete,
+    secureTextEntry = false,
+    style,
+    inputStyle,
+    children,
+    size,
+    colorScheme,
+    blur,
+    radius,
+    accessibilityLabel,
+    accessibilityHint, }: FluentGlassTextInputProps) {
+    const theme = useTheme();
+    const sizeConfig = resolveSize(theme, size || theme.defaults.size);
+    const compat = resolveBackwardCompat({ colorScheme, blur });
+    const resolvedScheme = compat.colorScheme || theme.defaults.colorScheme;
+
+    return (
+        <FluentGlass
+            style={[styles.container, { minHeight: sizeConfig.minHeight }, style]}
+            colorScheme={resolvedScheme}
+            blur={compat.blur || 'subtle'}
+            radius={radius}
+            borderOpacity={0.15}
+        >
+            <View style={styles.innerContainer}>
+                <TextInput
+                    style={[styles.input, { paddingHorizontal: sizeConfig.paddingHorizontal, color: theme.colors.textPrimary, fontSize: sizeConfig.fontSize, fontFamily: theme.typography.regular }, inputStyle, { outlineStyle: 'none' } as any]}
+                    value={value}
+                    onChangeText={onChangeText}
+                    placeholder={placeholder}
+                    placeholderTextColor={theme.colors.textSecondary}
+                    keyboardType={keyboardType}
+                    autoCapitalize={autoCapitalize}
+                    autoComplete={autoComplete}
+                    secureTextEntry={secureTextEntry}
+                    accessibilityLabel={accessibilityLabel ?? placeholder}
+                    accessibilityHint={accessibilityHint}
+                />
+                {children}
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        // minHeight set inline by sizeConfig
+    },
+    innerContainer: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    input: {
+        flex: 1,
+        height: '100%',
+    },
+});