fluentglass 0.2.6

package/src/components/FluentGlassBreadcrumb.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+
+import { StyleSheet, Text, View, Pressable, ViewStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+
+export interface BreadcrumbItem {
+    label: string;
+    icon?: string;
+    onPress?: () => void;
+}
+
+interface EnrichedBreadcrumbItem extends BreadcrumbItem {
+    isActive?: boolean;
+    isEllipsis?: boolean;
+}
+
+export interface FluentGlassBreadcrumbProps {
+    items?: BreadcrumbItem[];
+    variant?: 'standard' | 'collapsed';
+    separator?: string;
+    onExpandCollapsed?: () => void;
+    style?: ViewStyle;
+}
+
+/**
+ * FluentGlassBreadcrumb (Molecule)
+ * Glassmorphism breadcrumb navigation with two variants:
+ * - 'standard': All items visible, last one bold
+ * - 'collapsed': Middle items replaced with "..." ellipsis button
+ */
+export default function FluentGlassBreadcrumb({
+    items = [],
+    variant = 'standard',
+    separator = '›',
+    onExpandCollapsed,
+    style,
+}: FluentGlassBreadcrumbProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    const visibleItems = getVisibleItems(items, variant);
+
+    return (
+        <FluentGlass
+            style={[styles.container, style]}
+            intensity={15}
+            tint="dark"
+            borderRadius={16}
+            borderOpacity={0.2}
+        >
+            <View style={styles.content}>
+                {visibleItems.map((item: EnrichedBreadcrumbItem, index: number) => (
+                    <View key={index} style={styles.itemRow}>
+                        {/* Separator */}
+                        {index > 0 ? (
+                            <Text style={[styles.separator, { color: COLORS.textSecondary, fontFamily: typography.regular }]}>{separator}</Text>
+                        ) : null}
+
+                        {/* Ellipsis button */}
+                        {item.isEllipsis ? (
+                            <Pressable
+                                onPress={onExpandCollapsed}
+                                style={[styles.ellipsisBtn, { backgroundColor: COLORS.borderSubtle }]}
+                                hitSlop={6}
+                            >
+                                <Text style={[styles.ellipsisText, { color: COLORS.textSecondary, fontFamily: typography.bold }]}>···</Text>
+                            </Pressable>
+                        ) : (
+                            <Pressable
+                                onPress={item.onPress}
+                                disabled={!item.onPress}
+                                hitSlop={4}
+                            >
+                                <View style={styles.labelRow}>
+                                    {item.icon ? (
+                                        <Text style={styles.icon}>{item.icon}</Text>
+                                    ) : null}
+                                    <Text
+                                        style={[
+                                            styles.label,
+                                            { color: COLORS.textSecondary, fontFamily: typography.regular },
+                                            item.isActive && [styles.activeLabel, { color: COLORS.textPrimary, fontFamily: typography.bold }],
+                                            item.onPress && { color: COLORS.textSecondary },
+                                        ]}
+                                        numberOfLines={1}
+                                    >
+                                        {item.label}
+                                    </Text>
+                                </View>
+                            </Pressable>
+                        )}
+                    </View>
+                ))}
+            </View>
+        </FluentGlass>
+    );
+}
+
+/**
+ * Determines which items to show based on variant.
+ * 'collapsed' shows first, ellipsis, last two.
+ */
+function getVisibleItems(items: BreadcrumbItem[], variant: string): EnrichedBreadcrumbItem[] {
+    if (!items.length) return [];
+
+    // Mark the last item as "active" (current page)
+    const withActive: EnrichedBreadcrumbItem[] = items.map((item, i) => ({
+        ...item,
+        isActive: i === items.length - 1,
+    }));
+
+    if (variant === 'collapsed' && items.length > 3) {
+        return [
+            withActive[0],
+            { label: '', isEllipsis: true },
+            withActive[items.length - 2],
+            withActive[items.length - 1],
+        ];
+    }
+
+    return withActive;
+}
+
+const styles = StyleSheet.create({
+    container: {
+        height: 40,
+        alignSelf: 'flex-start',
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+    },
+    itemRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    separator: {
+        fontSize: 14,
+        marginHorizontal: 8,
+        fontWeight: '400',
+    },
+    labelRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    icon: {
+        fontSize: 14,
+        marginRight: 4,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: '400',
+    },
+    activeLabel: {
+        fontWeight: '700',
+    },
+    pressableLabel: {
+    },
+    ellipsisBtn: {
+        borderRadius: 6,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+    },
+    ellipsisText: {
+        fontSize: 14,
+        fontWeight: '700',
+        letterSpacing: 1,
+    },
+});

package/src/components/FluentGlassButton.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { StyleSheet, Text, Pressable, View } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withSpring } from 'react-native-reanimated';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { resolveSize, resolveColorScheme, resolveBackwardCompat } from '../theme/resolvers';
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+/**
+ * FluentGlassButton (Component)
+ * Interactive glass button with scale animation and variants.
+ *
+ * @param {string} size - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * @param {string} colorScheme - 'default' | 'dark' | 'info' | 'success' | 'error' | 'warning'
+ * @param {string} blur - 'none' | 'subtle' | 'medium' | 'strong' | 'max'
+ * @param {string} radius - 'none' | 'sm' | 'md' | 'lg' | 'pill'
+ *
+ * Legacy props: variant ('primary' | 'secondary' | 'ghost'), intensity, tint
+ */
+import { ViewStyle, TextStyle, StyleProp } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassButtonProps extends FluentGlassBaseProps {
+    title: string;
+    onPress?: () => void;
+    variant?: 'primary' | 'secondary' | 'ghost' | 'destructive' | 'outline' | string;
+    style?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    intensity?: number;
+    tint?: string;
+}
+
+export default function FluentGlassButton({
+    title,
+    onPress,
+    // New standardized props
+    size,
+    colorScheme,
+    blur,
+    radius,
+    // Legacy props
+    variant = 'primary',
+    style,
+    textStyle,
+    icon,
+    disabled = false,
+    intensity,
+    tint,
+    accessibilityLabel,
+    accessibilityHint,
+}: FluentGlassButtonProps) {
+    const theme = useTheme();
+
+    // Resolve props
+    const sizeConfig = resolveSize(theme, size || theme.defaults.size);
+    const compat = resolveBackwardCompat({ variant, intensity, tint, colorScheme, blur });
+    const resolvedScheme = compat.colorScheme || theme.defaults.colorScheme;
+    const resolvedBlur = compat.blur || theme.defaults.blur;
+
+    const scaleAnim = useSharedValue(1);
+
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ scale: scaleAnim.value }],
+    }));
+
+    const handlePressIn = () => {
+        if (disabled) return;
+        scaleAnim.value = withSpring(0.96);
+    };
+
+    const handlePressOut = () => {
+        if (disabled) return;
+        scaleAnim.value = withSpring(1);
+    };
+
+    // Resolve visual styles from colorScheme
+    const isGhost = variant === 'ghost' && !colorScheme;
+    const colorConfig = resolveColorScheme(theme, resolvedScheme);
+
+    const getButtonStyles = () => {
+        if (isGhost) {
+            return {
+                backgroundColor: 'transparent',
+                borderOpacity: 0,
+                textColor: theme.colors.textSecondary,
+            };
+        }
+
+        // For semantic colors (success, error, warning, info), use solid color
+        const isSemanticColor = ['success', 'error', 'warning', 'info'].includes(resolvedScheme);
+        return {
+            backgroundColor: isSemanticColor ? colorConfig.solid : colorConfig.bg,
+            borderOpacity: isSemanticColor ? 0.5 : 0.3,
+            textColor: isSemanticColor ? theme.colors.white : theme.colors.textPrimary,
+        };
+    };
+
+    const btnStyle = getButtonStyles();
+
+    return (
+        <AnimatedPressable
+            onPress={onPress}
+            onPressIn={handlePressIn}
+            onPressOut={handlePressOut}
+            disabled={disabled}
+            style={[styles.wrapper, animatedStyle, style]}
+            accessibilityRole="button"
+            accessibilityLabel={accessibilityLabel ?? title}
+            accessibilityHint={accessibilityHint}
+            accessibilityState={{ disabled: !!disabled }}
+        >
+            {isGhost ? (
+                <View style={[styles.content, { paddingHorizontal: sizeConfig.paddingHorizontal }]}>
+                    {icon && <View style={styles.iconContainer}>{icon}</View>}
+                    <Text style={[styles.text, { color: btnStyle.textColor, fontSize: sizeConfig.fontSize, fontFamily: theme.typography.semiBold }, textStyle]}>
+                        {title}
+                    </Text>
+                </View>
+            ) : (
+                <FluentGlass
+                    style={[
+                        styles.container,
+                        {
+                            backgroundColor: btnStyle.backgroundColor,
+                            minHeight: sizeConfig.minHeight,
+                            borderRadius: sizeConfig.borderRadius,
+                        },
+                    ]}
+                    colorScheme={resolvedScheme}
+                    blur={resolvedBlur}
+                    radius={radius}
+                    borderOpacity={btnStyle.borderOpacity}
+                    borderRadius={sizeConfig.borderRadius}
+                >
+                    <View style={[styles.content, { paddingHorizontal: sizeConfig.paddingHorizontal }]}>
+                        {icon && <View style={styles.iconContainer}>{icon}</View>}
+                        <Text style={[styles.text, { color: btnStyle.textColor, fontSize: sizeConfig.fontSize, fontFamily: theme.typography.semiBold }, textStyle]}>
+                            {title}
+                        </Text>
+                    </View>
+                </FluentGlass>
+            )}
+        </AnimatedPressable>
+    );
+}
+
+const styles = StyleSheet.create({
+    wrapper: {
+        marginVertical: 4,
+    },
+    container: {
+        borderRadius: 12,
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    text: {
+        fontWeight: '600',
+    },
+    iconContainer: {
+        marginRight: 8,
+    },
+});

package/src/components/FluentGlassCalendarWidget.tsx

@@ -0,0 +1,55 @@
+import React from 'react';
+
+import { StyleSheet, View, Text, StyleProp, ViewStyle } from 'react-native';
+import FluentGlass from './FluentGlass';
+import useTheme from '../theme/useTheme';
+import { moderateScale } from '../utils/responsive';
+
+export interface FluentGlassCalendarWidgetProps {
+    day?: string;
+    month?: string;
+    style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * FluentGlassCalendarWidget (Atom/Molecule)
+ * Dashboard widget displaying month and day.
+ */
+export default function FluentGlassCalendarWidget({ day = '18', month = 'FEB', style }: FluentGlassCalendarWidgetProps) {
+    const theme = useTheme();
+    const COLORS = theme.colors;
+    const typography = theme.typography;
+
+    return (
+        <FluentGlass accessible={true} accessibilityLabel={`${month} ${day}`} style={[styles.card, style]} intensity={25} borderRadius={20}>
+            <View style={styles.content}>
+                <Text style={[styles.redHeader, { color: COLORS.negative, fontFamily: typography.bold }]}>{month}</Text>
+                <Text style={[styles.bigValue, { color: COLORS.textPrimary, fontFamily: typography.regular }]}>{day}</Text>
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    card: {
+        flex: 1,
+        minWidth: 100,
+        maxWidth: 140,
+        aspectRatio: 1,
+    },
+    content: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    redHeader: {
+        fontSize: 12,
+        fontWeight: 'bold',
+        textTransform: 'uppercase',
+        marginBottom: 4,
+    },
+    bigValue: {
+        fontSize: moderateScale(28),
+        fontWeight: '300',
+    },
+});

package/src/components/FluentGlassCard.tsx

@@ -0,0 +1,186 @@
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import FluentGlass from './FluentGlass';
+import FluentGlassButton from './FluentGlassButton';
+import useTheme from '../theme/useTheme';
+import { resolveSize, resolveColorScheme, resolveRadius, resolveBackwardCompat } from '../theme/resolvers';
+
+/**
+ * FluentGlassCard (Organism)
+ * Structured glass card with two variants:
+ * - 'standard': Title + description + content + optional action
+ * - 'featured': Colored header area + icon + title + description + optional action
+ *
+ * @param {string} size - 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+ * @param {string} colorScheme - 'default' | 'dark' | 'info' | 'success' | 'error' | 'warning'
+ * @param {string} blur - blur intensity
+ * @param {string} radius - border radius
+ */
+import { ViewStyle, StyleProp } from 'react-native';
+import { FluentGlassBaseProps } from '../types/components';
+
+export interface FluentGlassCardProps extends FluentGlassBaseProps {
+    variant?: 'standard' | 'featured' | string;
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    actionLabel?: string;
+    onAction?: () => void;
+    icon?: string | React.ReactNode;
+    headerColor?: string;
+    style?: StyleProp<ViewStyle>;
+}
+
+export default function FluentGlassCard({
+    variant = 'standard', // 'standard' | 'featured'
+    title,
+    description,
+    children,
+    actionLabel,
+    onAction,
+    icon,         // String emoji or React node for featured header
+    headerColor,  // Override header bg color (featured variant)
+    style,
+    // New standardized props
+    size,
+    colorScheme,
+    blur,
+    radius,
+}: FluentGlassCardProps) {
+    const theme = useTheme();
+    const sizeConfig = resolveSize(theme, size || theme.defaults.size);
+    const compat = resolveBackwardCompat({ colorScheme, blur });
+    const resolvedScheme = compat.colorScheme || theme.defaults.colorScheme;
+    const colorConfig = resolveColorScheme(theme, resolvedScheme);
+    const resolvedRadius = resolveRadius(theme, radius || 'lg');
+
+    if (variant === 'featured') {
+        return (
+            <FluentGlass
+                style={[styles.container, style]}
+                colorScheme={resolvedScheme}
+                blur={compat.blur || 'subtle'}
+                radius={radius}
+                borderRadius={resolvedRadius}
+                borderOpacity={0.2}
+            >
+                <View style={styles.inner}>
+                    {/* Featured Header */}
+                    <View
+                        style={[
+                            styles.featuredHeader,
+                            headerColor ? { backgroundColor: headerColor } : { backgroundColor: `${colorConfig.solid}40` },
+                            { borderTopLeftRadius: resolvedRadius - 1, borderTopRightRadius: resolvedRadius - 1 }
+                        ]}
+                    />
+
+                    {/* Body */}
+                    <View style={[styles.body, { padding: sizeConfig.paddingHorizontal }]}>
+                        {(icon || title) ? (
+                            <View style={styles.titleRow}>
+                                {icon ? (
+                                    <Text style={[styles.icon, { fontSize: sizeConfig.fontSize + 2 }]}>{icon}</Text>
+                                ) : null}
+                                {title ? (
+                                    <Text style={[styles.title, { color: theme.colors.textPrimary, fontSize: sizeConfig.fontSize + 2, fontFamily: theme.typography.bold }]}>{title}</Text>
+                                ) : null}
+                            </View>
+                        ) : null}
+
+                        {description ? (
+                            <Text style={[styles.description, { color: theme.colors.textSecondary, fontSize: sizeConfig.fontSize - 1, fontFamily: theme.typography.regular }]}>{description}</Text>
+                        ) : null}
+
+                        {children ? (
+                            <View style={[styles.content, { marginTop: (sizeConfig.gap || 0) * 2 }]}>{children}</View>
+                        ) : null}
+
+                        {actionLabel ? (
+                            <FluentGlassButton
+                                title={actionLabel}
+                                onPress={onAction}
+                                style={styles.actionBtn}
+                                size={size}
+                                colorScheme={resolvedScheme === 'default' ? 'info' : resolvedScheme}
+                            />
+                        ) : null}
+                    </View>
+                </View>
+            </FluentGlass>
+        );
+    }
+
+    // Standard variant
+    return (
+        <FluentGlass
+            style={[styles.container, style]}
+            colorScheme={resolvedScheme}
+            blur={compat.blur || 'subtle'}
+            radius={radius}
+            borderRadius={resolvedRadius}
+            borderOpacity={0.2}
+        >
+            <View style={[styles.inner, styles.body, { padding: sizeConfig.paddingHorizontal }]}>
+                {title ? (
+                    <Text style={[styles.title, { color: theme.colors.textPrimary, fontSize: sizeConfig.fontSize + 2, fontFamily: theme.typography.bold }]}>{title}</Text>
+                ) : null}
+
+                {description ? (
+                    <Text style={[styles.description, { color: theme.colors.textSecondary, fontSize: sizeConfig.fontSize - 1, fontFamily: theme.typography.regular }]}>{description}</Text>
+                ) : null}
+
+                {children ? (
+                    <View style={[styles.content, { marginTop: (sizeConfig.gap || 0) * 2 }]}>{children}</View>
+                ) : null}
+
+                {actionLabel ? (
+                    <FluentGlassButton
+                        title={actionLabel}
+                        onPress={onAction}
+                        variant="secondary"
+                        style={styles.actionBtn}
+                        size={size}
+                    />
+                ) : null}
+            </View>
+        </FluentGlass>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        minHeight: 80,
+    },
+    inner: {
+        flex: 1,
+    },
+    featuredHeader: {
+        height: 100,
+    },
+    body: {
+        padding: 16,
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginBottom: 6,
+    },
+    icon: {
+        marginRight: 8,
+    },
+    title: {
+        fontWeight: '700',
+    },
+    description: {
+        fontWeight: '400',
+        marginTop: 4,
+        lineHeight: 20,
+    },
+    content: {
+        marginTop: 12,
+    },
+    actionBtn: {
+        marginTop: 16,
+        alignSelf: 'flex-start',
+    },
+});