fluentglass 0.2.6

package/src/components/FluentGlass.tsx

@@ -0,0 +1,103 @@
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { BlurView } from 'expo-blur';
+import useTheme from '../theme/useTheme';
+import { resolveColorScheme, resolveBlur, resolveRadius, resolveBackwardCompat } from '../theme/resolvers';
+
+/**
+ * FluentGlass (Atom)
+ * The fundamental building block for the FluentGlass Core.
+ * Provides the "glass" material with configurable intensity and border.
+ *
+ * @param {string} colorScheme - 'default' | 'dark' | 'deep' | 'light' | 'success' | 'error' | 'warning' | 'info'
+ * @param {string} blur - 'none' | 'subtle' | 'medium' | 'strong' | 'max'
+ * @param {string} radius - 'none' | 'sm' | 'md' | 'lg' | 'pill'
+ * @param {number} borderOpacity - Border opacity (0-1)
+ *
+ * Legacy props (backward compat): tint, intensity, borderRadius
+ */
+import { ViewProps, StyleProp, ViewStyle } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassProps extends FluentGlassBaseProps {
+    children?: React.ReactNode;
+    style?: StyleProp<ViewStyle>;
+    borderOpacity?: number;
+    intensity?: number;
+    tint?: string;
+    borderRadius?: number;
+}
+
+export default function FluentGlass({
+    children,
+    style,
+    // New standardized props
+    colorScheme,
+    blur,
+    radius,
+    // Legacy props (backward compat)
+    intensity,
+    tint,
+    borderOpacity = 0.2,
+    borderRadius,
+    // Accessibility props
+    accessible,
+    accessibilityRole,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityState,
+    accessibilityValue,
+    accessibilityViewIsModal,
+}: FluentGlassProps) {
+    const theme = useTheme();
+
+    // Resolve backward compatibility
+    const compat = resolveBackwardCompat({ tint, intensity, colorScheme, blur });
+    const resolvedColorScheme = compat.colorScheme || theme.defaults.colorScheme;
+    const resolvedBlur = compat.blur || theme.defaults.blur;
+
+    const colorConfig = resolveColorScheme(theme, resolvedColorScheme);
+    const blurConfig = resolveBlur(theme, resolvedBlur);
+    const resolvedRadius = borderRadius ?? resolveRadius(theme, radius || 'lg');
+
+    return (
+        <View
+            accessible={accessible}
+            accessibilityRole={accessibilityRole}
+            accessibilityLabel={accessibilityLabel}
+            accessibilityHint={accessibilityHint}
+            accessibilityState={accessibilityState}
+            accessibilityValue={accessibilityValue}
+            accessibilityViewIsModal={accessibilityViewIsModal}
+            style={[
+                styles.container,
+                {
+                    borderRadius: resolvedRadius,
+                    borderColor: colorConfig.border || theme.colors.border,
+                    backgroundColor: colorConfig.bg,
+                },
+                style,
+            ]}
+        >
+            <BlurView
+                intensity={blurConfig.intensity}
+                tint={colorConfig.tint}
+                style={styles.blur}
+            >
+                {children}
+            </BlurView>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+        borderWidth: 1,
+    },
+    blur: {
+        flex: 1,
+        width: '100%',
+        height: '100%',
+    },
+});

package/src/components/FluentGlassAlert.tsx

@@ -0,0 +1,126 @@
+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, resolveRadius, resolveBackwardCompat } from '../theme/resolvers';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassAlertProps extends FluentGlassBaseProps {
+    /** Legacy prop mapped to colorScheme */
+    type?: 'success' | 'error' | 'warning' | 'info';
+    title?: string;
+    message?: string;
+    style?: StyleProp<ViewStyle>;
+}
+
+const ALERT_ICONS: Record<string, string> = {
+    success: '✓',
+    error: '✕',
+    warning: '⚠',
+    info: 'ℹ',
+};
+
+export default function FluentGlassAlert({ // New standardized props
+    colorScheme,
+    size,
+    blur,
+    radius,
+    // Legacy props
+    type = 'info',
+    title,
+    message,
+    style,
+    accessibilityLabel, }: FluentGlassAlertProps) {
+    const theme = useTheme();
+
+    // Resolve backward compat: type → colorScheme
+    const compat = resolveBackwardCompat({ type, colorScheme, blur });
+    const resolvedScheme = compat.colorScheme || 'info';
+    const colorConfig = resolveColorScheme(theme, resolvedScheme);
+    const sizeConfig = resolveSize(theme, size || theme.defaults.size);
+    const resolvedRadius = resolveRadius(theme, radius || 'md');
+
+    const icon = ALERT_ICONS[resolvedScheme] || ALERT_ICONS.info;
+
+    return (
+        <FluentGlass
+            style={[
+                styles.container,
+                {
+                    backgroundColor: colorConfig.bg,
+                    borderColor: colorConfig.border,
+                },
+                style,
+            ]}
+            colorScheme="dark"
+            blur={compat.blur || 'subtle'}
+            borderRadius={resolvedRadius}
+            borderOpacity={0}
+            accessible={true}
+            accessibilityRole="alert"
+            accessibilityLabel={accessibilityLabel ?? [title, message].filter(Boolean).join('. ')}
+        >
+            <View style={[styles.content, { padding: sizeConfig.paddingHorizontal, gap: (sizeConfig.gap ?? 0) + 4 }]}>
+                {/* Icon Circle */}
+                <View
+                    style={[
+                        styles.iconCircle,
+                        {
+                            backgroundColor: `${colorConfig.solid}22`,
+                            borderColor: colorConfig.solid,
+                            width: sizeConfig.minHeight * 0.75,
+                            height: sizeConfig.minHeight * 0.75,
+                            borderRadius: sizeConfig.minHeight * 0.375,
+                        },
+                    ]}
+                >
+                    <Text style={[styles.icon, { color: colorConfig.solid, fontSize: sizeConfig.fontSize - 1, fontFamily: theme.typography.extraBold }]}>
+                        {icon}
+                    </Text>
+                </View>
+
+                {/* Text */}
+                <View style={styles.textArea}>
+                    {title ? (
+                        <Text style={[styles.title, { color: theme.colors.textPrimary, fontSize: sizeConfig.fontSize, fontFamily: theme.typography.bold }]}>
+                            {title}
+                        </Text>
+                    ) : null}
+                    {message ? (
+                        <Text style={[styles.message, { color: theme.colors.textSecondary, fontSize: sizeConfig.fontSize - 2 }]}>
+                            {message}
+                        </Text>
+                    ) : null}
+                </View>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderWidth: 1,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconCircle: {
+        borderWidth: 1.5,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    icon: {
+        fontWeight: '800',
+    },
+    textArea: {
+        flex: 1,
+    },
+    title: {
+        fontWeight: '700',
+    },
+    message: {
+        marginTop: 2,
+        lineHeight: 18,
+    },
+});

package/src/components/FluentGlassBadge.tsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { resolveSize, resolveColorScheme, resolveBackwardCompat } from '../theme/resolvers';
+
+/**
+ * FluentGlassBadge (Atom)
+ * Glassmorphism badge with variants: default, secondary, outline, destructive.
+ * Pill-shaped, compact label for status or categorization.
+ *
+ * @param {string} size - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * @param {string} colorScheme - 'default' | 'info' | 'success' | 'error' | 'warning'
+ * @param {string} radius - border radius
+ */
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassBadgeProps extends FluentGlassBaseProps {
+    label: string | number;
+    variant?: 'default' | 'secondary' | 'outline' | 'destructive' | string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    icon?: React.ReactNode;
+}
+
+export default function FluentGlassBadge({
+    label,
+    variant, // mapped via backward compat
+    style,
+    textStyle,
+    icon,
+    // New standardized props
+    size,
+    colorScheme,
+    radius = 'pill',
+}: FluentGlassBadgeProps) {
+    const theme = useTheme();
+    const sizeConfig = resolveSize(theme, size || 'xs');
+    const compat = resolveBackwardCompat({ variant, colorScheme });
+    const resolvedScheme = compat.colorScheme || 'default';
+    const colorConfig = resolveColorScheme(theme, resolvedScheme);
+
+    const isOutline = variant === 'outline';
+
+    if (isOutline) {
+        return (
+            <View
+                accessible={true}
+                accessibilityLabel={String(label)}
+                style={[
+                styles.outlineContainer,
+                { height: sizeConfig.minHeight, paddingHorizontal: sizeConfig.paddingHorizontal, borderColor: colorConfig.border || theme.colors.border },
+                style
+            ]}>
+                {icon ? <View style={[styles.iconContainer, { marginRight: sizeConfig.gap }]}>{icon}</View> : null}
+                <Text style={[styles.text, { color: theme.colors.textSecondary, fontSize: sizeConfig.fontSize, fontFamily: theme.typography.medium }, textStyle]}>
+                    {label}
+                </Text>
+            </View>
+        );
+    }
+
+    return (
+        <FluentGlass
+            accessible={true}
+            accessibilityLabel={String(label)}
+            style={[styles.container, { height: sizeConfig.minHeight }, style]}
+            colorScheme={resolvedScheme}
+            blur="none"
+            radius={radius}
+            borderOpacity={0.25}
+        >
+            <View style={[styles.content, { paddingHorizontal: sizeConfig.paddingHorizontal, gap: sizeConfig.gap }]}>
+                {icon ? <View style={styles.iconContainer}>{icon}</View> : null}
+                <Text style={[styles.text, { color: colorConfig.text || theme.colors.textPrimary, fontSize: sizeConfig.fontSize, fontFamily: theme.typography.medium }, textStyle]}>
+                    {label}
+                </Text>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        alignSelf: 'flex-start',
+        justifyContent: 'center',
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    outlineContainer: {
+        alignSelf: 'flex-start',
+        borderRadius: 20,
+        borderWidth: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        fontWeight: '500',
+    },
+    iconContainer: {
+        // margin normally handled by flex gap
+    },
+});

package/src/components/FluentGlassBarChart.tsx

@@ -0,0 +1,295 @@
+import React, { useEffect } from 'react';
+
+import { StyleSheet, View, Text } from 'react-native';
+import Animated, {
+    useSharedValue,
+    useAnimatedStyle,
+    withSpring,
+    withDelay,
+} from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { moderateScale } from '../utils/responsive';
+
+/**
+ * FluentGlassBarChart (Component)
+ * Glassmorphism bar chart with animated glass bars.
+ *
+ * Props:
+ *   data        - Array of { label, value, color? }
+ *   title       - Optional chart title
+ *   height      - Chart area height (default 180)
+ *   showGrid    - Show horizontal grid lines (default true)
+ *   showValues  - Show value labels on bars (default true)
+ *   style       - Container style override
+ *   style       - Container style override
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+
+export interface BarChartData {
+    label: string;
+    value: number;
+    color?: string;
+}
+
+export interface FluentGlassBarChartProps {
+    data?: BarChartData[];
+    title?: string;
+    height?: number;
+    showGrid?: boolean;
+    showValues?: boolean;
+    style?: StyleProp<ViewStyle>;
+}
+
+// ─── Animated Glass Bar ───
+function Bar({ value, maxValue, color, label, index, height, showValue }: { value: number, maxValue: number, color: string, label: string, index: number, height: number, showValue: boolean }) {
+    const barHeight = useSharedValue(0);
+    const targetHeight = maxValue > 0 ? (value / maxValue) * height : 0;
+
+    useEffect(() => {
+        barHeight.value = withDelay(
+            index * 80,
+            withSpring(targetHeight, {
+                mass: 0.6,
+                damping: 14,
+                stiffness: 100,
+            })
+        );
+    }, [value, maxValue]);
+
+    const animatedBarStyle = useAnimatedStyle(() => ({
+        height: barHeight.value,
+    }));
+
+    // Create glass-like rgba from the color
+    const glassBase = hexToRgba(color, 0.35);
+    const glassBorder = hexToRgba(color, 0.5);
+    const glassHighlight = hexToRgba(color, 0.6);
+
+    return (
+        <View style={styles.barColumn}>
+            {/* Bar container */}
+            <View style={[styles.barTrack, { height }]}>
+                <Animated.View
+                    style={[
+                        styles.bar,
+                        {
+                            backgroundColor: glassBase,
+                            borderColor: glassBorder,
+                        },
+                        animatedBarStyle,
+                    ]}
+                >
+                    {/* Top highlight stripe — brighter glass edge */}
+                    <View style={[styles.barHighlight, { backgroundColor: glassHighlight }]} />
+
+                    {/* Inner sheen — vertical reflection */}
+                    <View style={[styles.barSheen, { backgroundColor: hexToRgba(color, 0.12) }]} />
+                </Animated.View>
+            </View>
+        </View>
+    );
+}
+
+// ─── Hex → RGBA helper ───
+function hexToRgba(hex: string, alpha: number) {
+    const clean = hex.replace('#', '');
+    const r = parseInt(clean.substring(0, 2), 16);
+    const g = parseInt(clean.substring(2, 4), 16);
+    const b = parseInt(clean.substring(4, 6), 16);
+    return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+}
+
+// ─── Grid Lines (5 lines: 0%, 25%, 50%, 75%, 100%) ───
+function GridLines({ height, borderSubtle }: { height: number; borderSubtle?: string }) {
+    const percentages = [0, 0.25, 0.5, 0.75, 1];
+    return (
+        <View style={[StyleSheet.absoluteFill, { height }]}>
+            {percentages.map((pct, i) => (
+                <View
+                    key={i}
+                    style={[
+                        styles.gridLine,
+                        { bottom: pct * height, backgroundColor: borderSubtle },
+                    ]}
+                />
+            ))}
+        </View>
+    );
+}
+
+export default function FluentGlassBarChart({
+    data = [],
+    title,
+    height = 180,
+    showGrid = true,
+    showValues = true,
+    style,
+}: FluentGlassBarChartProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    const maxValue = Math.max(...data.map((d) => d.value), 1);
+
+    // Default colors cycle
+    const defaultColors = [
+        COLORS.accent,       // Cyan
+        COLORS.positive,     // Emerald
+        COLORS.purple,       // Purple
+        COLORS.warning,      // Amber
+        COLORS.negative,     // Red
+        COLORS.secondary,    // Blue
+        COLORS.pink,         // Pink
+    ];
+
+    return (
+        <FluentGlass
+            accessible={true}
+            accessibilityRole="summary"
+            accessibilityLabel={title ? `Bar chart: ${title}` : 'Bar chart'}
+            style={[styles.container, style]}
+            intensity={18}
+            borderRadius={16}
+            borderOpacity={0.2}
+        >
+            {/* ── Title section ── */}
+            {title && (
+                <View style={[styles.titleSection, { borderBottomColor: COLORS.borderSubtle }]}>
+                    <Text style={[styles.title, { color: COLORS.textPrimary, fontFamily: typography.bold }]}>{title}</Text>
+                </View>
+            )}
+
+            {/* ── Chart section ── */}
+            <View style={styles.chartSection}>
+                {/* Values row */}
+                {showValues && (
+                    <View style={styles.valuesRow}>
+                        {data.map((item, index) => (
+                            <Text key={index} style={[styles.barValue, { color: COLORS.textSecondary, fontFamily: typography.semiBold }]}>
+                                {item.value}
+                            </Text>
+                        ))}
+                    </View>
+                )}
+
+                {/* Bars area */}
+                <View style={styles.chartArea}>
+                    {showGrid && <GridLines height={height} borderSubtle={COLORS.borderSubtle} />}
+
+                    <View style={[styles.barsRow, { height }]}>
+                        {data.map((item, index) => (
+                            <Bar
+                                key={index}
+                                value={item.value}
+                                maxValue={maxValue}
+                                color={item.color || defaultColors[index % defaultColors.length]}
+                                label={item.label}
+                                index={index}
+                                height={height}
+                                showValue={false}
+                            />
+                        ))}
+                    </View>
+                </View>
+
+                {/* Labels row */}
+                <View style={styles.labelsRow}>
+                    {data.map((item, index) => (
+                        <Text key={index} style={[styles.barLabel, { color: COLORS.textSecondary, fontFamily: typography.medium }]} numberOfLines={1}>
+                            {item.label}
+                        </Text>
+                    ))}
+                </View>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {},
+    // Title — own section with separator
+    titleSection: {
+        paddingHorizontal: 18,
+        paddingTop: 16,
+        paddingBottom: 14,
+        borderBottomWidth: 1,
+    },
+    title: {
+        fontSize: moderateScale(16),
+        fontWeight: '700',
+    },
+    // Chart section
+    chartSection: {
+        padding: 18,
+    },
+    valuesRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        marginBottom: 6,
+        gap: 8,
+    },
+    chartArea: {
+        position: 'relative',
+    },
+    barsRow: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'space-around',
+        gap: 8,
+    },
+    labelsRow: {
+        flexDirection: 'row',
+        justifyContent: 'space-around',
+        marginTop: 8,
+        gap: 8,
+    },
+    barColumn: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    barTrack: {
+        width: '100%',
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+    },
+    // Glass bar
+    bar: {
+        width: '72%',
+        borderRadius: 8,
+        borderTopLeftRadius: 10,
+        borderTopRightRadius: 10,
+        minHeight: 4,
+        overflow: 'hidden',
+        borderWidth: 1,
+    },
+    barHighlight: {
+        height: 3,
+        width: '100%',
+    },
+    barSheen: {
+        position: 'absolute',
+        top: 0,
+        left: '50%',
+        width: '50%',
+        height: '100%',
+    },
+    barValue: {
+        flex: 1,
+        fontSize: moderateScale(11, 0.3),
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+    barLabel: {
+        flex: 1,
+        fontSize: moderateScale(11, 0.3),
+        fontWeight: '500',
+        textAlign: 'center',
+    },
+    gridLine: {
+        position: 'absolute',
+        left: 0,
+        right: 0,
+        height: 1,
+    },
+});