zero-to-app 2.0.0 → 3.0.0

package/dist/components/ui/button.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 1. IMPORTS
+import { forwardRef, useEffect, useState } from 'react';
+import { ActivityIndicator, Platform, Pressable, StyleSheet, View, } from 'react-native';
+import { Typography } from './typography';
+import { useTheme } from '../../theme';
+import { renderIcon } from '../../icons';
+export const ButtonVariants = ['filled', 'elevated', 'tonal', 'outlined', 'text'];
+// 3. COMPONENT
+/**
+ * Material Design 3 Button component
+ * https://m3.material.io/components/buttons
+ *
+ * Supports five variants:
+ * - filled: High-emphasis actions (default)
+ * - elevated: Medium-emphasis actions with elevation
+ * - tonal: Medium-emphasis with container color
+ * - outlined: Medium-emphasis with border
+ * - text: Low-emphasis actions
+ */
+const Button = forwardRef(({ title, variant = 'filled', loading = false, disabled = false, icon, onPress, iconPosition = 'right', style, testID, accessibilityLabel, accessibilityHint, color, backgroundColor, size = 'medium', }, ref) => {
+    const theme = useTheme();
+    const tokens = theme.tokens;
+    // Track hover and focus states (web-only features)
+    const [hovered, setHovered] = useState(false);
+    const [focused, setFocused] = useState(false);
+    // Respect reduce-motion preference where available and map sizes
+    const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+    useEffect(() => {
+        let mounted = true;
+        try {
+            // dynamically require to avoid bundler differences across platforms
+            // eslint-disable-next-line @typescript-eslint/no-var-requires
+            const { AccessibilityInfo } = require('react-native');
+            AccessibilityInfo?.isReduceMotionEnabled?.().then((enabled) => {
+                if (mounted)
+                    setReduceMotionEnabled(!!enabled);
+            });
+        }
+        catch (e) {
+            // ignore if not available
+        }
+        return () => { mounted = false; };
+    }, []);
+    // Visual heights in dp per size token
+    const sizeMap = {
+        small: 32,
+        medium: 40,
+        large: 56,
+    };
+    // default to 'medium' if not provided via props
+    const visualHeight = sizeMap[size] ?? sizeMap.medium;
+    // Ensure a minimum touch target of 48dp
+    const touchHeight = Math.max(48, visualHeight);
+    // Dynamic styles based on state
+    const getButtonStyle = ({ pressed }) => {
+        const t = tokens.button;
+        let bg;
+        let borderColor;
+        let elevation;
+        if (disabled) {
+            bg = t.disabledBg;
+            borderColor = variant === 'outlined' ? theme.outlineVariant : undefined;
+        }
+        else {
+            switch (variant) {
+                case 'filled':
+                    bg = t.filledBg;
+                    if (Platform.OS !== 'web') {
+                        elevation = pressed ? tokens.elevation.level0 : tokens.elevation.level1;
+                    }
+                    break;
+                case 'elevated':
+                    bg = t.elevatedBg;
+                    elevation = pressed ? tokens.elevation.level1 : tokens.elevation.level3;
+                    break;
+                case 'tonal':
+                    bg = t.tonalBg;
+                    break;
+                case 'outlined':
+                    bg = 'transparent';
+                    borderColor = t.outlinedBorder;
+                    break;
+                case 'text':
+                    bg = 'transparent';
+                    break;
+            }
+        }
+        // Apply custom background color override
+        if (backgroundColor) {
+            bg = backgroundColor;
+        }
+        const baseStyle = [
+            styles.base,
+            styles[variant],
+            // reserve touch target height for accessibility
+            { minHeight: touchHeight },
+            { borderRadius: theme.shape.buttonBorderRadius },
+            bg ? { backgroundColor: bg } : null,
+            borderColor ? { borderColor } : null,
+            disabled ? styles.disabled : null,
+        ];
+        // Add elevation shadow for elevated buttons
+        if (elevation !== undefined && elevation > 0) {
+            baseStyle.push({
+                shadowColor: theme.shadow,
+                shadowOffset: { width: 0, height: Math.max(1, Math.floor(elevation / 2)) },
+                shadowOpacity: 0.08,
+                shadowRadius: Math.max(1, Math.floor(elevation / 2)),
+                elevation: elevation,
+            });
+        }
+        // Add focus ring for web/keyboard navigation
+        if (focused && Platform.OS === 'web') {
+            baseStyle.push({
+                borderWidth: tokens.focusRing.width,
+                borderColor: tokens.focusRing.color,
+                borderStyle: 'solid',
+            });
+        }
+        // M3 state layer: subtle overlay on hover (8% opacity) and press (12% opacity)
+        if (Platform.OS === 'web' && !disabled) {
+            if (pressed) {
+                baseStyle.push({ opacity: 0.88 });
+            }
+            else if (hovered) {
+                baseStyle.push({ opacity: 0.92 });
+            }
+        }
+        // subtle transform for hover/press unless user requests reduced motion
+        if (!reduceMotionEnabled) {
+            if (pressed) {
+                baseStyle.push({ transform: [{ scale: 0.997 }] });
+            }
+            else if (hovered && Platform.OS === 'web') {
+                baseStyle.push({ transform: [{ translateY: -1 }, { scale: 1.01 }] });
+            }
+        }
+        // Add custom style last
+        if (style) {
+            baseStyle.push(style);
+        }
+        return baseStyle;
+    };
+    // Get text color based on variant and state
+    const getTextColor = (isDisabled) => {
+        if (color)
+            return color;
+        if (isDisabled)
+            return tokens.button.disabledText;
+        const t = tokens.button;
+        switch (variant) {
+            case 'filled':
+                return t.filledText;
+            case 'elevated':
+                return t.elevatedText;
+            case 'tonal':
+                // tonal should use a high-contrast label (avoid looking disabled)
+                return theme.onSurface;
+            case 'outlined':
+                return t.outlinedText;
+            case 'text':
+                return t.textColor;
+            default:
+                return t.filledText;
+        }
+    };
+    const getIconColor = (isDisabled) => {
+        if (icon?.color)
+            return icon.color;
+        return getTextColor(isDisabled);
+    };
+    const textColor = getTextColor(disabled);
+    const iconColor = getIconColor(disabled);
+    if (loading) {
+        return (_jsx(View, { ref: ref, testID: testID, style: [
+                styles.base,
+                styles[variant],
+                { minHeight: touchHeight },
+                { borderRadius: theme.shape.buttonBorderRadius },
+                backgroundColor && { backgroundColor },
+            ], accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? title, accessibilityHint: accessibilityHint, accessibilityState: { disabled: true, busy: true }, children: _jsx(ActivityIndicator, { size: "small", color: textColor }) }));
+    }
+    const renderButtonIcon = (position) => {
+        if (!icon || iconPosition !== position)
+            return null;
+        const iconSize = icon.size || 18;
+        const iconLibrary = icon.library || 'Feather';
+        return (_jsx(View, { style: position === 'left' ? styles.iconLeft : styles.iconRight, children: renderIcon(icon, iconLibrary, iconSize, iconColor) }));
+    };
+    return (_jsx(Pressable, { ref: ref, testID: testID, onPress: disabled ? undefined : (e) => {
+            if (Platform.OS === 'web') {
+                e.currentTarget?.blur?.();
+            }
+            onPress?.(e);
+        }, disabled: disabled, style: getButtonStyle, onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false), onFocus: () => setFocused(true), onBlur: () => setFocused(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? title, accessibilityHint: accessibilityHint, accessibilityState: { disabled }, 
+        // Platform-specific ripple effect for Android
+        android_ripple: !disabled && Platform.OS === 'android'
+            ? {
+                color: theme.primary + '40', // 25% opacity
+                borderless: false,
+            }
+            : undefined, children: _jsxs(View, { style: [styles.contentContainer, { height: visualHeight }], children: [renderButtonIcon('left'), _jsx(Typography, { variant: "labelLarge", weight: "medium", color: textColor, numberOfLines: 1, align: "center", children: title }), renderButtonIcon('right')] }) }));
+});
+Button.displayName = 'Button';
+// 4. STYLES
+const styles = StyleSheet.create({
+    base: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    filled: {
+        paddingHorizontal: 24,
+        minWidth: 100,
+    },
+    elevated: {
+        paddingHorizontal: 24,
+        minWidth: 100,
+    },
+    tonal: {
+        paddingHorizontal: 24,
+        minWidth: 100,
+    },
+    outlined: {
+        backgroundColor: 'transparent',
+        borderWidth: 1,
+        paddingHorizontal: 24,
+        minWidth: 100,
+    },
+    text: {
+        backgroundColor: 'transparent',
+        paddingHorizontal: 12,
+        minWidth: 100,
+    },
+    disabled: {
+        opacity: 0.38, // M3 disabled opacity
+    },
+    contentContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    iconLeft: {
+        marginRight: 0, // gap handles spacing
+    },
+    iconRight: {
+        marginLeft: 0, // gap handles spacing
+    },
+});
+// 5. EXPORTS
+export { Button };
+//# sourceMappingURL=button.js.map

package/dist/components/ui/button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"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"}

package/dist/components/ui/collapsible.d.ts

@@ -0,0 +1,88 @@
+import React from 'react';
+import { View, type ViewProps } from 'react-native';
+import { type IconLibrary } from '../../icons';
+/**
+ * Props for the Collapsible component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Collapsible title="More details">
+ *   <Typography>Hidden content that can be expanded</Typography>
+ * </Collapsible>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Controlled state
+ * const [open, setOpen] = useState(false);
+ * <Collapsible title="Settings" open={open} onToggle={setOpen}>
+ *   <Typography>Settings content</Typography>
+ * </Collapsible>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom styling
+ * <Collapsible
+ *   title="FAQ Item"
+ *   headerVariant="surfaceContainer"
+ *   contentVariant="surface"
+ * >
+ *   <Typography>Answer to the question</Typography>
+ * </Collapsible>
+ * ```
+ */
+export interface CollapsibleProps extends Omit<ViewProps, 'children'> {
+    /** Title text displayed in the header */
+    title: string;
+    /** Content to show when expanded */
+    children: React.ReactNode;
+    /**
+     * Controlled open state. If provided, component becomes controlled.
+     */
+    open?: boolean;
+    /**
+     * Whether the collapsible starts expanded (uncontrolled mode).
+     * @default false
+     */
+    defaultOpen?: boolean;
+    /**
+     * Callback when the open state changes.
+     */
+    onToggle?: (isOpen: boolean) => void;
+    /**
+     * ThemedView variant for the icon button background.
+     * @default 'surfaceContainer'
+     */
+    headerVariant?: 'surface' | 'surfaceContainer' | 'card' | 'primary';
+    /**
+     * ThemedView variant for the content area.
+     * @default 'surfaceContainer'
+     */
+    contentVariant?: 'surface' | 'surfaceContainer' | 'card';
+    /**
+     * Icon library to use for the chevron.
+     * @default 'Feather'
+     */
+    iconLibrary?: IconLibrary;
+    /**
+     * Custom icon name for the chevron.
+     * @default 'chevron-right'
+     */
+    iconName?: string;
+    /** Test ID for testing */
+    testID?: string;
+}
+/**
+ * Collapsible component for expandable/collapsible content sections.
+ *
+ * Features:
+ * - Animated expand/collapse with rotation and fade
+ * - Controlled and uncontrolled modes
+ * - Customizable header and content styling
+ * - Accessible with proper press states
+ */
+declare const Collapsible: React.ForwardRefExoticComponent<CollapsibleProps & React.RefAttributes<View>>;
+export { Collapsible };
+//# sourceMappingURL=collapsible.d.ts.map

package/dist/components/ui/collapsible.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.d.ts","sourceRoot":"","sources":["../../../components/ui/collapsible.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAyB,IAAI,EAAE,KAAK,SAAS,EAAE,MAAM,cAAc,CAAC;AAW3E,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnE,yCAAyC;IACzC,KAAK,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrC;;;OAGG;IACH,aAAa,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,MAAM,GAAG,SAAS,CAAC;IACpE;;;OAGG;IACH,cAAc,CAAC,EAAE,SAAS,GAAG,kBAAkB,GAAG,MAAM,CAAC;IACzD;;;OAGG;IACH,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAOD;;;;;;;;GAQG;AACH,QAAA,MAAM,WAAW,+EAgFhB,CAAC;AAuBF,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/collapsible.js

@@ -0,0 +1,66 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 1. IMPORTS
+import { forwardRef, useEffect, useState } from 'react';
+import { Pressable, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn, FadeOut, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated';
+import { Typography } from './typography';
+import { ThemedView } from './themed-view';
+import { useTheme } from '../../theme';
+import { renderIcon } from '../../icons';
+// Icon button dimension — also used to indent the content panel beneath the text
+const ICON_BUTTON_SIZE = 32;
+// 3. COMPONENT
+/**
+ * Collapsible component for expandable/collapsible content sections.
+ *
+ * Features:
+ * - Animated expand/collapse with rotation and fade
+ * - Controlled and uncontrolled modes
+ * - Customizable header and content styling
+ * - Accessible with proper press states
+ */
+const Collapsible = forwardRef(({ title, children, open: controlledOpen, defaultOpen = false, onToggle, headerVariant = 'surfaceContainer', contentVariant = 'surfaceContainer', iconLibrary = 'Feather', iconName = 'chevron-right', testID, style, ...rest }, ref) => {
+    const theme = useTheme();
+    // Support both controlled and uncontrolled modes
+    const [internalOpen, setInternalOpen] = useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    // Animation value for chevron rotation
+    const rotation = useSharedValue(isOpen ? 90 : 0);
+    // Sync rotation whenever isOpen changes (handles both controlled and uncontrolled modes)
+    useEffect(() => {
+        rotation.value = withTiming(isOpen ? 90 : 0, { duration: 200 });
+    }, [isOpen]);
+    const handlePress = () => {
+        const newState = !isOpen;
+        if (!isControlled) {
+            setInternalOpen(newState);
+        }
+        onToggle?.(newState);
+    };
+    const animatedIconStyle = useAnimatedStyle(() => ({
+        transform: [{ rotate: `${rotation.value}deg` }],
+    }));
+    return (_jsxs(View, { ref: ref, style: style, testID: testID, ...rest, children: [_jsxs(Pressable, { style: ({ pressed }) => [styles.heading, { gap: theme.spacing.sm }, pressed && styles.pressedHeading], onPress: handlePress, accessibilityRole: "button", accessibilityState: { expanded: isOpen }, accessibilityLabel: `${title}, ${isOpen ? 'expanded' : 'collapsed'}`, children: [_jsx(ThemedView, { variant: headerVariant, style: [styles.iconButton, { borderRadius: theme.shape.surfaceBorderRadius }], children: _jsx(Animated.View, { style: animatedIconStyle, children: renderIcon({ name: iconName }, iconLibrary, 14, theme.onSurface) }) }), _jsx(Typography, { variant: "labelLarge", children: title })] }), isOpen && (_jsx(Animated.View, { entering: FadeIn.duration(200), exiting: FadeOut.duration(150), children: _jsx(ThemedView, { variant: contentVariant, style: [styles.content, { marginTop: theme.spacing.md, marginLeft: ICON_BUTTON_SIZE, padding: theme.spacing.lg, borderRadius: theme.shape.surfaceBorderRadius }], children: children }) }))] }));
+});
+Collapsible.displayName = 'Collapsible';
+// 4. STYLES
+const styles = StyleSheet.create({
+    heading: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    pressedHeading: {
+        opacity: 0.7,
+    },
+    iconButton: {
+        width: ICON_BUTTON_SIZE,
+        height: ICON_BUTTON_SIZE,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    content: {},
+});
+// 5. EXPORTS
+export { Collapsible };
+//# sourceMappingURL=collapsible.js.map

package/dist/components/ui/collapsible.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"collapsible.js","sourceRoot":"","sources":["../../../components/ui/collapsible.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,IAAI,EAAkB,MAAM,cAAc,CAAC;AAC3E,OAAO,QAAQ,EAAE,EACf,MAAM,EACN,OAAO,EACP,gBAAgB,EAChB,cAAc,EACd,UAAU,GACX,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,UAAU,EAAoB,MAAM,aAAa,CAAC;AA8E3D,iFAAiF;AACjF,MAAM,gBAAgB,GAAG,EAAE,CAAC;AAE5B,eAAe;AAEf;;;;;;;;GAQG;AACH,MAAM,WAAW,GAAG,UAAU,CAC5B,CACE,EACE,KAAK,EACL,QAAQ,EACR,IAAI,EAAE,cAAc,EACpB,WAAW,GAAG,KAAK,EACnB,QAAQ,EACR,aAAa,GAAG,kBAAkB,EAClC,cAAc,GAAG,kBAAkB,EACnC,WAAW,GAAG,SAAS,EACvB,QAAQ,GAAG,eAAe,EAC1B,MAAM,EACN,KAAK,EACL,GAAG,IAAI,EACR,EACD,GAAG,EACH,EAAE;IACF,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,iDAAiD;IACjD,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAG,QAAQ,CAAC,WAAW,CAAC,CAAC;IAC9D,MAAM,YAAY,GAAG,cAAc,KAAK,SAAS,CAAC;IAClD,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,YAAY,CAAC;IAE5D,uCAAuC;IACvC,MAAM,QAAQ,GAAG,cAAc,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;IAEjD,yFAAyF;IACzF,SAAS,CAAC,GAAG,EAAE;QACb,QAAQ,CAAC,KAAK,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC;IAClE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,MAAM,QAAQ,GAAG,CAAC,MAAM,CAAC;QAEzB,IAAI,CAAC,YAAY,EAAE,CAAC;YAClB,eAAe,CAAC,QAAQ,CAAC,CAAC;QAC5B,CAAC;QAED,QAAQ,EAAE,CAAC,QAAQ,CAAC,CAAC;IACvB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,GAAG,EAAE,CAAC,CAAC;QAChD,SAAS,EAAE,CAAC,EAAE,MAAM,EAAE,GAAG,QAAQ,CAAC,KAAK,KAAK,EAAE,CAAC;KAChD,CAAC,CAAC,CAAC;IAEJ,OAAO,CACL,MAAC,IAAI,IAAC,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,KAAM,IAAI,aACpD,MAAC,SAAS,IACR,KAAK,EAAE,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,OAAO,IAAI,MAAM,CAAC,cAAc,CAAC,EACrG,OAAO,EAAE,WAAW,EACpB,iBAAiB,EAAC,QAAQ,EAC1B,kBAAkB,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,EACxC,kBAAkB,EAAE,GAAG,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,EAAE,aAEpE,KAAC,UAAU,IAAC,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,UAAU,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC,YAC/G,KAAC,QAAQ,CAAC,IAAI,IAAC,KAAK,EAAE,iBAAiB,YACpC,UAAU,CACT,EAAE,IAAI,EAAE,QAAQ,EAAE,EAClB,WAAW,EACX,EAAE,EACF,KAAK,CAAC,SAAS,CAChB,GACa,GACL,EAEb,KAAC,UAAU,IAAC,OAAO,EAAC,YAAY,YAAE,KAAK,GAAc,IAC3C,EAEX,MAAM,IAAI,CACT,KAAC,QAAQ,CAAC,IAAI,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,GAAG,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,QAAQ,CAAC,GAAG,CAAC,YAC3E,KAAC,UAAU,IAAC,OAAO,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,UAAU,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE,EAAE,YAAY,EAAE,KAAK,CAAC,KAAK,CAAC,mBAAmB,EAAE,CAAC,YAClM,QAAQ,GACE,GACC,CACjB,IACI,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC;AAExC,YAAY;AACZ,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,OAAO,EAAE;QACP,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;KACrB;IACD,cAAc,EAAE;QACd,OAAO,EAAE,GAAG;KACb;IACD,UAAU,EAAE;QACV,KAAK,EAAE,gBAAgB;QACvB,MAAM,EAAE,gBAAgB;QACxB,cAAc,EAAE,QAAQ;QACxB,UAAU,EAAE,QAAQ;KACrB;IACD,OAAO,EAAE,EAAE;CACZ,CAAC,CAAC;AAEH,aAAa;AACb,OAAO,EAAE,WAAW,EAAE,CAAC"}

package/dist/components/ui/container.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import { type ThemedViewProps } from './themed-view';
+export interface ContainerProps extends ThemedViewProps {
+    /** Maximum width in pixels. @default 1000 */
+    maxWidth?: number;
+}
+/**
+ * Container component that constrains content width for better readability on large screens.
+ * Centers content horizontally and applies consistent padding.
+ *
+ * Common for web layouts, marketing pages, and content-heavy screens.
+ *
+ * @example
+ * ```tsx
+ * <Screen scrollable>
+ *   <Container>
+ *     <Typography>Constrained content</Typography>
+ *   </Container>
+ * </Screen>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom max-width
+ * <Container maxWidth={800}>
+ *   <Typography>Narrower content</Typography>
+ * </Container>
+ * ```
+ */
+export declare const Container: React.FC<ContainerProps>;
+//# sourceMappingURL=container.d.ts.map

package/dist/components/ui/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../components/ui/container.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,eAAe,EAAE,MAAM,eAAe,CAAC;AAGjE,MAAM,WAAW,cAAe,SAAQ,eAAe;IACrD,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAwB9C,CAAC"}

package/dist/components/ui/container.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StyleSheet } from 'react-native';
+import { ThemedView } from './themed-view';
+import { useTheme } from '../../theme';
+/**
+ * Container component that constrains content width for better readability on large screens.
+ * Centers content horizontally and applies consistent padding.
+ *
+ * Common for web layouts, marketing pages, and content-heavy screens.
+ *
+ * @example
+ * ```tsx
+ * <Screen scrollable>
+ *   <Container>
+ *     <Typography>Constrained content</Typography>
+ *   </Container>
+ * </Screen>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Custom max-width
+ * <Container maxWidth={800}>
+ *   <Typography>Narrower content</Typography>
+ * </Container>
+ * ```
+ */
+export const Container = ({ children, maxWidth = 1000, style, ...rest }) => {
+    const theme = useTheme();
+    return (_jsx(ThemedView, { style: [
+            styles.container,
+            {
+                maxWidth,
+                paddingHorizontal: theme.spacing.xl,
+            },
+            style,
+        ], rounded: false, ...rest, children: children }));
+};
+Container.displayName = 'Container';
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+        alignSelf: 'center',
+    },
+});
+//# sourceMappingURL=container.js.map

package/dist/components/ui/container.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.js","sourceRoot":"","sources":["../../../components/ui/container.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAwB,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAOvC;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,QAAQ,EACR,QAAQ,GAAG,IAAI,EACf,KAAK,EACL,GAAG,IAAI,EACR,EAAE,EAAE;IACH,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE;YACL,MAAM,CAAC,SAAS;YAChB;gBACE,QAAQ;gBACR,iBAAiB,EAAE,KAAK,CAAC,OAAO,CAAC,EAAE;aACpC;YACD,KAAK;SACN,EACD,OAAO,EAAE,KAAK,KACV,IAAI,YAEP,QAAQ,GACE,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC;AAEpC,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;QACb,SAAS,EAAE,QAAQ;KACpB;CACF,CAAC,CAAC"}

package/dist/components/ui/fab.d.ts

@@ -0,0 +1,51 @@
+import React from 'react';
+import { GestureResponderEvent, View } from 'react-native';
+import type { InteractiveComponentProps } from '../shared/types';
+import type { IconConfig } from './button';
+/** FAB variant controlling color scheme */
+export type FABVariant = 'primary' | 'secondary' | 'tertiary' | 'surface';
+/** FAB size controlling dimensions */
+export type FABSize = 'small' | 'medium' | 'large';
+/**
+ * Props for the FAB (Floating Action Button) component.
+ *
+ * @example
+ * ```tsx
+ * // Standard FAB
+ * <FAB icon={{ name: 'plus' }} onPress={() => {}} />
+ *
+ * // Extended FAB with label
+ * <FAB icon={{ name: 'edit-2' }} label="Compose" onPress={() => {}} />
+ *
+ * // Small surface FAB
+ * <FAB icon={{ name: 'arrow-up' }} variant="surface" size="small" onPress={() => {}} />
+ * ```
+ */
+export interface FABProps extends Omit<InteractiveComponentProps, 'onPress'> {
+    /** Required icon configuration */
+    icon: IconConfig;
+    /** Optional label for extended FAB */
+    label?: string;
+    /**
+     * Color variant following M3 FAB spec.
+     * @default 'primary'
+     */
+    variant?: FABVariant;
+    /**
+     * Size variant controlling dimensions and icon size.
+     * @default 'medium'
+     */
+    size?: FABSize;
+    /** Press handler */
+    onPress?: (event?: GestureResponderEvent) => void;
+}
+/**
+ * Material Design 3 Floating Action Button (FAB)
+ * https://m3.material.io/components/floating-action-button
+ *
+ * Supports four color variants and three sizes.
+ * When a `label` is provided, renders as an Extended FAB.
+ */
+declare const FAB: React.ForwardRefExoticComponent<FABProps & React.RefAttributes<View>>;
+export { FAB };
+//# sourceMappingURL=fab.d.ts.map

package/dist/components/ui/fab.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"fab.d.ts","sourceRoot":"","sources":["../../../components/ui/fab.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,qBAAqB,EAIrB,IAAI,EAIL,MAAM,cAAc,CAAC;AAItB,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,iBAAiB,CAAC;AACjE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAI3C,2CAA2C;AAC3C,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,SAAS,CAAC;AAE1E,sCAAsC;AACtC,MAAM,MAAM,OAAO,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC;IAC1E,kCAAkC;IAClC,IAAI,EAAE,UAAU,CAAC;IACjB,sCAAsC;IACtC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,OAAO,CAAC,EAAE,UAAU,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,oBAAoB;IACpB,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CACnD;AAWD;;;;;;GAMG;AACH,QAAA,MAAM,GAAG,uEAsJP,CAAC;AAqBH,OAAO,EAAE,GAAG,EAAE,CAAC"}