zero-to-app 2.0.0 → 3.0.0

package/dist/components/ui/fab.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// 1. IMPORTS
+import { forwardRef, useEffect, useState } from 'react';
+import { Platform, Pressable, StyleSheet, View, } from 'react-native';
+import { Typography } from './typography';
+import { useTheme } from '../../theme';
+import { renderIcon } from '../../icons';
+// Size configuration (borderRadius resolved from theme at render time)
+const SIZE_CONFIG = {
+    small: { dimension: 40, iconSize: 20, radiusKey: 'md' },
+    medium: { dimension: 56, iconSize: 24, radiusKey: 'lg' },
+    large: { dimension: 96, iconSize: 36, radiusKey: 'xl' },
+};
+// 3. COMPONENT
+/**
+ * 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.
+ */
+const FAB = forwardRef(({ icon, label, variant = 'primary', size = 'medium', disabled = false, onPress, style, testID, accessibilityLabel, accessibilityHint, }, ref) => {
+    const theme = useTheme();
+    const tokens = theme.tokens;
+    const [hovered, setHovered] = useState(false);
+    const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
+    useEffect(() => {
+        let mounted = true;
+        try {
+            // 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; };
+    }, []);
+    const sizeConfig = SIZE_CONFIG[size];
+    const isExtended = !!label;
+    // Color mapping per variant
+    const getColors = () => {
+        if (disabled) {
+            return {
+                bg: theme.onSurface + '1F', // 12% opacity
+                fg: theme.onSurface + '61', // 38% opacity
+            };
+        }
+        switch (variant) {
+            case 'primary':
+                return { bg: theme.primaryContainer, fg: theme.onPrimaryContainer };
+            case 'secondary':
+                return { bg: theme.secondaryContainer, fg: theme.onSecondaryContainer };
+            case 'tertiary':
+                return { bg: theme.tertiaryContainer, fg: theme.onTertiaryContainer };
+            case 'surface':
+                return { bg: theme.surface, fg: theme.primary };
+        }
+    };
+    const colors = getColors();
+    const getContainerStyle = ({ pressed }) => {
+        const elevation = pressed ? tokens.elevation.level1 : tokens.elevation.level3;
+        const baseStyle = [
+            styles.container,
+            {
+                backgroundColor: colors.bg,
+                borderRadius: theme.borderRadius[sizeConfig.radiusKey],
+            },
+        ];
+        if (isExtended) {
+            baseStyle.push({
+                height: sizeConfig.dimension,
+                paddingHorizontal: theme.spacing.lg,
+                minWidth: sizeConfig.dimension,
+            });
+        }
+        else {
+            baseStyle.push({
+                width: sizeConfig.dimension,
+                height: sizeConfig.dimension,
+            });
+        }
+        if (disabled) {
+            baseStyle.push(styles.disabled);
+        }
+        // Elevation shadow
+        if (!disabled && 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,
+            });
+        }
+        // Hover/press transforms
+        if (!reduceMotionEnabled) {
+            if (pressed) {
+                baseStyle.push({ transform: [{ scale: 0.997 }] });
+            }
+            else if (hovered && Platform.OS === 'web') {
+                baseStyle.push({ transform: [{ translateY: -1 }, { scale: 1.02 }] });
+            }
+        }
+        if (style) {
+            baseStyle.push(style);
+        }
+        return baseStyle;
+    };
+    const iconSize = icon.size || sizeConfig.iconSize;
+    const iconLibrary = icon.library || 'Feather';
+    const iconColor = icon.color || colors.fg;
+    return (_jsx(Pressable, { ref: ref, testID: testID, onPress: disabled ? undefined : onPress, disabled: disabled, style: getContainerStyle, onHoverIn: () => setHovered(true), onHoverOut: () => setHovered(false), accessibilityRole: "button", accessibilityLabel: accessibilityLabel ?? label ?? icon.name, accessibilityHint: accessibilityHint, accessibilityState: { disabled }, android_ripple: !disabled && Platform.OS === 'android'
+            ? { color: colors.fg + '40', borderless: false }
+            : undefined, children: _jsxs(View, { style: [styles.content, { gap: theme.spacing.sm }], children: [renderIcon(icon, iconLibrary, iconSize, iconColor), isExtended && (_jsx(Typography, { variant: "labelLarge", weight: "medium", color: colors.fg, numberOfLines: 1, children: label }))] }) }));
+});
+FAB.displayName = 'FAB';
+// 4. STYLES
+const styles = StyleSheet.create({
+    container: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    disabled: {
+        opacity: 0.38,
+    },
+});
+// 5. EXPORTS
+export { FAB };
+//# sourceMappingURL=fab.js.map

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

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

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

@@ -1,13 +1,18 @@
-export { Button } from './Button';
-export { IconButton } from './IconButton';
-export { ToggleIconButton } from './ToggleIconButton';
-export { BlurButton } from './BlurButton';
-export { ArrowButton } from './ArrowButton';
-export { StyledText } from './StyledText';
-export { TextLink } from './TextLink';
-export { StyledTextInput } from './StyledTextInput';
-export { LoadingIndicator } from './LoadingIndicator';
-export { NotificationBadge } from './NotificationBadge';
-export { ErrorBoundary } from './ErrorBoundary';
-export { SkeletonCard } from './SkeletonCard';
+export { Button } from './button';
+export type { ButtonProps, ButtonVariant, IconConfig } from './button';
+export { ButtonVariants } from './button';
+export { FAB } from './fab';
+export type { FABProps, FABVariant, FABSize } from './fab';
+export { Collapsible } from './collapsible';
+export type { CollapsibleProps } from './collapsible';
+export { Typography } from './typography';
+export type { TypographyProps, TypographyVariant, TypographyWeight, TypographyAlign } from './typography';
+export { ThemedView } from './themed-view';
+export type { ThemedViewProps, ThemedViewVariant } from './themed-view';
+export { Screen } from './screen';
+export type { ScreenProps } from './screen';
+export { Container } from './container';
+export type { ContainerProps } from './container';
+export { ThemedImage } from './themed-image';
+export type { ThemedImageProps } from './themed-image';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/ui/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACvE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAG1C,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AAGtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1G,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGxE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG5C,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAGlD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,YAAY,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/components/ui/index.js

@@ -1,14 +1,17 @@
 // UI components
-export { Button } from './Button';
-export { IconButton } from './IconButton';
-export { ToggleIconButton } from './ToggleIconButton';
-export { BlurButton } from './BlurButton';
-export { ArrowButton } from './ArrowButton';
-export { StyledText } from './StyledText';
-export { TextLink } from './TextLink';
-export { StyledTextInput } from './StyledTextInput';
-export { LoadingIndicator } from './LoadingIndicator';
-export { NotificationBadge } from './NotificationBadge';
-export { ErrorBoundary } from './ErrorBoundary';
-export { SkeletonCard } from './SkeletonCard';
+export { Button } from './button';
+export { ButtonVariants } from './button';
+// FAB
+export { FAB } from './fab';
+// Collapsible
+export { Collapsible } from './collapsible';
+// Typography
+export { Typography } from './typography';
+export { ThemedView } from './themed-view';
+// Screen
+export { Screen } from './screen';
+// Container
+export { Container } from './container';
+// ThemedImage
+export { ThemedImage } from './themed-image';
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/ui/index.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/ui/index.ts"],"names":[],"mappings":"AAAA,gBAAgB;AAChB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM;AACN,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,cAAc;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,aAAa;AACb,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,SAAS;AACT,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,YAAY;AACZ,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,cAAc;AACd,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC"}

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+import { type Edge } from 'react-native-safe-area-context';
+import { type ThemedViewVariant } from './themed-view';
+export interface ScreenProps {
+    /** Screen content */
+    children: React.ReactNode;
+    /** Whether to wrap content in ScrollView. @default false */
+    scrollable?: boolean;
+    /** Themed background variant. @default 'background' */
+    variant?: ThemedViewVariant;
+    /** Which safe area edges to respect. @default ['bottom'] */
+    edges?: Edge[];
+    /** Styles for the ScrollView content container (only applies if scrollable=true) */
+    contentContainerStyle?: StyleProp<ViewStyle>;
+    /** Styles for the outer container */
+    style?: StyleProp<ViewStyle>;
+    /** Test ID for testing */
+    testID?: string;
+    /** Whether to show vertical scroll indicator. @default true */
+    showsVerticalScrollIndicator?: boolean;
+    /**
+     * Whether to apply default top padding. @default true
+     * Set to false for full-bleed layouts (e.g. hero images at the top).
+     * Bottom padding is always applied when edges includes 'bottom'.
+     */
+    padded?: boolean;
+}
+/**
+ * Screen component providing consistent layout with safe areas and optional scrolling.
+ *
+ * @example
+ * ```tsx
+ * <Screen scrollable>
+ *   <Typography>Content</Typography>
+ * </Screen>
+ * ```
+ */
+export declare const Screen: React.FC<ScreenProps>;
+//# sourceMappingURL=screen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"screen.d.ts","sourceRoot":"","sources":["../../../components/ui/screen.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAA0B,KAAK,SAAS,EAAE,KAAK,SAAS,EAAY,MAAM,cAAc,CAAC;AAChG,OAAO,EAAgB,KAAK,IAAI,EAAqB,MAAM,gCAAgC,CAAC;AAC5F,OAAO,EAAc,KAAK,iBAAiB,EAAE,MAAM,eAAe,CAAC;AAGnE,MAAM,WAAW,WAAW;IAC1B,qBAAqB;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,4DAA4D;IAC5D,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,uDAAuD;IACvD,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,4DAA4D;IAC5D,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,oFAAoF;IACpF,qBAAqB,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7C,qCAAqC;IACrC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+DAA+D;IAC/D,4BAA4B,CAAC,EAAE,OAAO,CAAC;IACvC;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAwDxC,CAAC"}

package/dist/components/ui/screen.js

@@ -0,0 +1,57 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ScrollView, StyleSheet, Platform } from 'react-native';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+import { ThemedView } from './themed-view';
+import { useTheme } from '../../theme';
+/**
+ * Screen component providing consistent layout with safe areas and optional scrolling.
+ *
+ * @example
+ * ```tsx
+ * <Screen scrollable>
+ *   <Typography>Content</Typography>
+ * </Screen>
+ * ```
+ */
+export const Screen = ({ children, scrollable = false, variant = 'background', edges = ['bottom'], contentContainerStyle, style, testID, showsVerticalScrollIndicator = true, padded = true, }) => {
+    const insets = useSafeAreaInsets();
+    const theme = useTheme();
+    // Strip 'bottom' from SafeAreaView edges — we manage bottom padding directly.
+    // With NativeTabs on Android, insets.bottom inside a tab screen is 0 (the native tab bar
+    // already constrains the content frame), so SafeAreaView's 'bottom' edge would double-apply
+    // the nav bar inset. Stripping it and using 0 on Android fixes that bug.
+    // On iOS, insets.bottom does not reflect the tab bar height, so we use a fixed 80dp to clear
+    // the standard tab bar (~46dp) + home indicator (~34dp).
+    const safeAreaEdges = edges.filter((e) => e !== 'bottom');
+    const bottomPadding = edges.includes('bottom') ? (Platform.OS === 'ios' ? 100 : 24) : 0;
+    return (_jsx(ThemedView, { variant: variant, rounded: false, style: styles.container, children: _jsx(SafeAreaView, { style: styles.safeArea, edges: safeAreaEdges, testID: testID, children: scrollable ? (_jsx(ScrollView, { style: styles.scrollView, contentContainerStyle: [
+                    styles.scrollContent,
+                    padded && { paddingTop: theme.spacing.xxl },
+                    { paddingBottom: bottomPadding },
+                    contentContainerStyle,
+                ], showsVerticalScrollIndicator: showsVerticalScrollIndicator, children: children })) : (_jsx(ThemedView, { variant: variant, rounded: false, style: [
+                    styles.content,
+                    padded && { paddingTop: theme.spacing.xxl },
+                    { paddingBottom: bottomPadding },
+                    style,
+                ], children: children })) }) }));
+};
+Screen.displayName = 'Screen';
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    safeArea: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+    },
+    content: {
+        flex: 1,
+    },
+});
+//# sourceMappingURL=screen.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"screen.js","sourceRoot":"","sources":["../../../components/ui/screen.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,UAAU,EAAkC,QAAQ,EAAE,MAAM,cAAc,CAAC;AAChG,OAAO,EAAE,YAAY,EAAa,iBAAiB,EAAE,MAAM,gCAAgC,CAAC;AAC5F,OAAO,EAAE,UAAU,EAA0B,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AA2BvC;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAC5C,QAAQ,EACR,UAAU,GAAG,KAAK,EAClB,OAAO,GAAG,YAAY,EACtB,KAAK,GAAG,CAAC,QAAQ,CAAC,EAClB,qBAAqB,EACrB,KAAK,EACL,MAAM,EACN,4BAA4B,GAAG,IAAI,EACnC,MAAM,GAAG,IAAI,GACd,EAAE,EAAE;IACH,MAAM,MAAM,GAAG,iBAAiB,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,8EAA8E;IAC9E,yFAAyF;IACzF,4FAA4F;IAC5F,yEAAyE;IACzE,6FAA6F;IAC7F,yDAAyD;IACzD,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,EAAa,EAAE,CAAC,CAAC,KAAK,QAAQ,CAAC,CAAC;IACrE,MAAM,aAAa,GAAG,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,KAAK,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAE,CAAC,CAAC,CAAC,CAAC;IAEzF,OAAO,CACL,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,CAAC,SAAS,YACnE,KAAC,YAAY,IAAC,KAAK,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,EAAE,MAAM,YACvE,UAAU,CAAC,CAAC,CAAC,CACZ,KAAC,UAAU,IACT,KAAK,EAAE,MAAM,CAAC,UAAU,EACxB,qBAAqB,EAAE;oBACrB,MAAM,CAAC,aAAa;oBACpB,MAAM,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;oBAC3C,EAAE,aAAa,EAAE,aAAa,EAAE;oBAChC,qBAAqB;iBACtB,EACD,4BAA4B,EAAE,4BAA4B,YAEzD,QAAQ,GACE,CACd,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,OAAO,EAAE,OAAO,EAChB,OAAO,EAAE,KAAK,EACd,KAAK,EAAE;oBACL,MAAM,CAAC,OAAO;oBACd,MAAM,IAAI,EAAE,UAAU,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;oBAC3C,EAAE,aAAa,EAAE,aAAa,EAAE;oBAChC,KAAK;iBACN,YAEA,QAAQ,GACE,CACd,GACY,GACJ,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAE9B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,IAAI,EAAE,CAAC;KACR;IACD,QAAQ,EAAE;QACR,IAAI,EAAE,CAAC;KACR;IACD,UAAU,EAAE;QACV,IAAI,EAAE,CAAC;KACR;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,CAAC;KACZ;IACD,OAAO,EAAE;QACP,IAAI,EAAE,CAAC;KACR;CACF,CAAC,CAAC"}

package/dist/components/ui/themed-image.d.ts

@@ -0,0 +1,7 @@
+import { ImageProps, ImageSource } from 'expo-image';
+export interface ThemedImageProps extends Omit<ImageProps, 'source'> {
+    lightSource: ImageSource;
+    darkSource: ImageSource;
+}
+export declare function ThemedImage({ lightSource, darkSource, ...props }: ThemedImageProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=themed-image.d.ts.map

package/dist/components/ui/themed-image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themed-image.d.ts","sourceRoot":"","sources":["../../../components/ui/themed-image.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,UAAU,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAG5D,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,UAAU,EAAE,QAAQ,CAAC;IAClE,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,WAAW,CAAC;CACzB;AAED,wBAAgB,WAAW,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,2CAKlF"}

package/dist/components/ui/themed-image.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Image } from 'expo-image';
+import { useThemeMode } from '../../theme';
+export function ThemedImage({ lightSource, darkSource, ...props }) {
+    const { mode } = useThemeMode();
+    const source = mode === 'dark' ? darkSource : lightSource;
+    return _jsx(Image, { source: source, ...props });
+}
+//# sourceMappingURL=themed-image.js.map

package/dist/components/ui/themed-image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"themed-image.js","sourceRoot":"","sources":["../../../components/ui/themed-image.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAA2B,MAAM,YAAY,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAO3C,MAAM,UAAU,WAAW,CAAC,EAAE,WAAW,EAAE,UAAU,EAAE,GAAG,KAAK,EAAoB;IACjF,MAAM,EAAE,IAAI,EAAE,GAAG,YAAY,EAAE,CAAC;IAChC,MAAM,MAAM,GAAG,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC;IAE1D,OAAO,KAAC,KAAK,IAAC,MAAM,EAAE,MAAM,KAAM,KAAK,GAAI,CAAC;AAC9C,CAAC"}

package/dist/components/ui/themed-view.d.ts

@@ -0,0 +1,20 @@
+import { type ViewProps } from 'react-native';
+export type ThemedViewVariant = 'surface' | 'surfaceContainer' | 'card' | 'appbar' | 'primary' | 'background';
+export interface ThemedViewProps extends ViewProps {
+    /** Variant selects a semantic background from the theme */
+    variant?: ThemedViewVariant;
+    /** Override with a specific color */
+    color?: string;
+    /** Apply border radius from theme. @default true */
+    rounded?: boolean;
+    /** Number of columns on medium+ screens (1 column on small). Enables responsive grid layout. */
+    columns?: number;
+    /** Gap between items when columns is set */
+    gap?: number;
+}
+export declare const ThemedView: {
+    ({ variant, color, rounded, columns, gap, style, children, onLayout, ...rest }: ThemedViewProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default ThemedView;
+//# sourceMappingURL=themed-view.d.ts.map

package/dist/components/ui/themed-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themed-view.d.ts","sourceRoot":"","sources":["../../../components/ui/themed-view.tsx"],"names":[],"mappings":"AACA,OAAO,EAA8B,KAAK,SAAS,EAA0C,MAAM,cAAc,CAAC;AAIlH,MAAM,MAAM,iBAAiB,GAAG,SAAS,GAAG,kBAAkB,GAAG,MAAM,GAAG,QAAQ,GAAG,SAAS,GAAG,YAAY,CAAC;AAE9G,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD,2DAA2D;IAC3D,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B,qCAAqC;IACrC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oDAAoD;IACpD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,gGAAgG;IAChG,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,4CAA4C;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAC;CACd;AAED,eAAO,MAAM,UAAU;oFAAsG,eAAe;;CAkF3I,CAAC;AAIF,eAAe,UAAU,CAAC"}

package/dist/components/ui/themed-view.js

@@ -0,0 +1,75 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { View, Platform, StyleSheet } from 'react-native';
+import { useTheme } from '../../theme';
+import { useDimensions, breakpoints } from '../../hooks';
+export const ThemedView = ({ variant = 'surface', color, rounded = true, columns, gap, style, children, onLayout, ...rest }) => {
+    const theme = useTheme();
+    const { width } = useDimensions();
+    const isMid = width >= breakpoints.medium;
+    const [containerWidth, setContainerWidth] = useState(0);
+    const variantMap = {
+        surface: theme.surface,
+        surfaceContainer: theme.surfaceContainer ?? theme.surface,
+        card: theme.tokens.card.background,
+        appbar: theme.tokens.appbar.background,
+        primary: theme.primary,
+        background: theme.surface,
+    };
+    const backgroundColor = color ?? variantMap[variant] ?? theme.surface;
+    const viewStyle = [
+        { backgroundColor },
+        ...(rounded ? [{ borderRadius: theme.shape.surfaceBorderRadius }] : []),
+    ];
+    // Handle responsive grid layout
+    if (columns && columns > 1) {
+        // Resolve gap from prop, falling back to gap in style
+        const flatStyle = style ? StyleSheet.flatten(style) : undefined;
+        const effectiveGap = gap ?? flatStyle?.gap ?? 0;
+        const gapOffset = effectiveGap * (columns - 1) / columns;
+        const containerStyle = {
+            flexDirection: 'row',
+            flexWrap: 'wrap',
+            gap: effectiveGap,
+        };
+        const handleLayout = (e) => {
+            setContainerWidth(e.nativeEvent.layout.width);
+            onLayout?.(e);
+        };
+        const responsiveChildren = React.Children.map(children, (child) => {
+            if (!React.isValidElement(child))
+                return child;
+            let itemStyle;
+            if (!isMid) {
+                // Small screens: single column
+                itemStyle = { width: '100%' };
+            }
+            else if (Platform.OS === 'web') {
+                // Web: use calc() for precise sizing
+                itemStyle = {
+                    flexBasis: `calc(${100 / columns}% - ${gapOffset}px)`,
+                    flexGrow: 0,
+                    flexShrink: 0,
+                    maxWidth: `calc(${100 / columns}% - ${gapOffset}px)`,
+                };
+            }
+            else if (containerWidth > 0) {
+                // Native: use measured width for pixel-perfect sizing
+                const itemWidth = (containerWidth - effectiveGap * (columns - 1)) / columns;
+                itemStyle = { width: itemWidth, flexGrow: 0, flexShrink: 0 };
+            }
+            else {
+                // Native fallback before layout measurement
+                itemStyle = { flexBasis: `${Math.floor(100 / columns)}%`, flexShrink: 1 };
+            }
+            return React.cloneElement(child, {
+                style: [child.props.style, itemStyle],
+            });
+        });
+        return (_jsx(View, { style: [viewStyle, containerStyle, style], onLayout: handleLayout, ...rest, children: responsiveChildren }));
+    }
+    return (_jsx(View, { style: [viewStyle, style], onLayout: onLayout, ...rest, children: children }));
+};
+ThemedView.displayName = 'ThemedView';
+export default ThemedView;
+//# sourceMappingURL=themed-view.js.map

package/dist/components/ui/themed-view.js.map

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

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

@@ -0,0 +1,110 @@
+import React from 'react';
+import { Text, type TextStyle, type StyleProp, type TextProps as RNTextProps } from 'react-native';
+/**
+ * Material Design 3 typography variants.
+ *
+ * **Display** (57-36px): Hero text, large promotional content
+ * **Headline** (32-24px): Page titles, section headers
+ * **Title** (22-14px): Card titles, list headers
+ * **Body** (16-12px): Main content text
+ * **Label** (14-11px): Buttons, captions, metadata
+ */
+export type TypographyVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall' | 'labelLarge' | 'labelMedium' | 'labelSmall';
+/**
+ * Font weight options.
+ * Can use semantic names or numeric values (100-900).
+ */
+export type TypographyWeight = 'light' | 'regular' | 'medium' | 'bold' | number;
+/** Text alignment options */
+export type TypographyAlign = 'left' | 'center' | 'right' | 'justify';
+/**
+ * Props for the Typography component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with default body text
+ * <Typography>Hello, world!</Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Page title
+ * <Typography variant="headlineLarge" weight="bold">
+ *   Welcome Back
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Card title with custom color
+ * <Typography variant="titleMedium" color="#6750A4">
+ *   Featured Article
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Muted secondary text
+ * <Typography variant="bodySmall" muted>
+ *   Last updated 2 hours ago
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Button label (uppercase)
+ * <Typography variant="labelLarge" weight="medium" uppercase>
+ *   Submit
+ * </Typography>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Centered hero text
+ * <Typography variant="displayMedium" align="center">
+ *   Build Something Amazing
+ * </Typography>
+ * ```
+ */
+export interface TypographyProps extends Omit<RNTextProps, 'style'> {
+    /** Text content to render */
+    children: React.ReactNode;
+    /**
+     * Typography scale variant following M3 type system.
+     * @default 'bodyMedium'
+     */
+    variant?: TypographyVariant;
+    /**
+     * Font weight. Use semantic names or numeric values.
+     * @default 'regular'
+     */
+    weight?: TypographyWeight;
+    /**
+     * Text alignment.
+     * @default 'left'
+     */
+    align?: TypographyAlign;
+    /**
+     * Custom text color. Defaults to theme's `onSurface` color.
+     */
+    color?: string;
+    /**
+     * Transform text to uppercase.
+     * @default false
+     */
+    uppercase?: boolean;
+    /**
+     * Apply muted styling using theme's `onSurfaceVariant` color.
+     * Useful for secondary or supporting text.
+     * @default false
+     */
+    muted?: boolean;
+    /** Additional text styles to merge */
+    style?: StyleProp<TextStyle>;
+}
+/**
+ * Typography component following Material Design 3 type system
+ * https://m3.material.io/styles/typography/type-scale-tokens
+ */
+export declare const Typography: React.ForwardRefExoticComponent<TypographyProps & React.RefAttributes<Text>>;
+//# sourceMappingURL=typography.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../../../components/ui/typography.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAc,IAAI,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,EAAE,KAAK,SAAS,IAAI,WAAW,EAAE,MAAM,cAAc,CAAC;AAG/G;;;;;;;;GAQG;AACH,MAAM,MAAM,iBAAiB,GACzB,cAAc,GACd,eAAe,GACf,cAAc,GACd,eAAe,GACf,gBAAgB,GAChB,eAAe,GACf,YAAY,GACZ,aAAa,GACb,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,WAAW,GACX,YAAY,GACZ,aAAa,GACb,YAAY,CAAC;AAEjB;;;GAGG;AACH,MAAM,MAAM,gBAAgB,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC;AAEhF,6BAA6B;AAC7B,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,CAAC;AAEtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgDG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,WAAW,EAAE,OAAO,CAAC;IACjE,6BAA6B;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAC5B;;;OAGG;IACH,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,8EAqFtB,CAAC"}