zero-to-app 2.0.0

package/dist/components/media/MediaTile.d.ts

@@ -0,0 +1,30 @@
+import { ImageSourcePropType, ViewStyle, ImageStyle } from 'react-native';
+export interface MediaTileProps {
+    image: ImageSourcePropType | {
+        uri: string;
+    };
+    fallbackImage?: ImageSourcePropType | {
+        uri: string;
+    };
+    title: string;
+    subtitle?: string;
+    metadata?: string[];
+    onPress?: () => void;
+    loading?: boolean;
+    width?: number | {
+        mobile: number;
+        desktop: number;
+    };
+    height?: number | {
+        mobile: number;
+        desktop: number;
+    };
+    imageStyle?: ImageStyle;
+    contentStyle?: ViewStyle;
+}
+/**
+ * A general-purpose media tile component that displays an image with title, subtitle, and metadata.
+ * Responsive sizing and integrates with the design system theme/brand.
+ */
+export declare const MediaTile: ({ image, fallbackImage, title, subtitle, metadata, onPress, loading, width, height, imageStyle, contentStyle, }: MediaTileProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaTile.d.ts.map

package/dist/components/media/MediaTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaTile.d.ts","sourceRoot":"","sources":["../../../components/media/MediaTile.tsx"],"names":[],"mappings":"AACA,OAAO,EAAsC,mBAAmB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAK9G,MAAM,WAAW,cAAc;IAE7B,KAAK,EAAE,mBAAmB,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,aAAa,CAAC,EAAE,mBAAmB,GAAG;QAAE,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IAGtD,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,EAAE,CAAC;IAGpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;IAGlB,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IAGtD,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,GAAI,iHAYvB,cAAc,4CAgFhB,CAAC"}

package/dist/components/media/MediaTile.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { View, Image, Pressable, StyleSheet } from 'react-native';
+import { StyledText } from '../ui';
+import { useBrand } from '../../brand';
+import { useBreakpoints } from '../../hooks/useWindowWidth';
+/**
+ * A general-purpose media tile component that displays an image with title, subtitle, and metadata.
+ * Responsive sizing and integrates with the design system theme/brand.
+ */
+export const MediaTile = ({ image, fallbackImage, title, subtitle, metadata, onPress, loading, width, height, imageStyle, contentStyle, }) => {
+    const { isMediumOrLarger } = useBreakpoints();
+    const brand = useBrand();
+    const styles = useMemo(() => StyleSheet.create({
+        image: {
+            width: '100%',
+            borderRadius: brand.borderRadius,
+        },
+        infoContainer: {
+            marginTop: 10,
+            gap: 5,
+        },
+    }), [brand]);
+    // Handle responsive sizing
+    const getWidth = () => {
+        if (typeof width === 'object') {
+            return isMediumOrLarger ? width.desktop : width.mobile;
+        }
+        return width;
+    };
+    const getHeight = () => {
+        if (typeof height === 'object') {
+            return isMediumOrLarger ? height.desktop : height.mobile;
+        }
+        return height;
+    };
+    // Default responsive sizes if not provided
+    const tileWidth = getWidth() ?? (isMediumOrLarger ? 250 : 150);
+    const imageHeight = getHeight() ?? (isMediumOrLarger ? 150 : 200);
+    // Determine image source
+    const imageSource = image || fallbackImage;
+    const content = (_jsxs(_Fragment, { children: [_jsx(Image, { source: imageSource, style: [styles.image, { height: imageHeight }, imageStyle], resizeMode: 'cover' }), _jsxs(View, { style: [styles.infoContainer, contentStyle], children: [_jsx(StyledText, { fontSize: "md", numberOfLines: 1, align: "left", children: title }), subtitle && (_jsx(StyledText, { fontSize: 'sm', numberOfLines: 1, align: "left", muted: true, children: subtitle })), metadata && metadata.length > 0 && metadata.map((item, index) => (_jsx(StyledText, { fontSize: 'sm', numberOfLines: 1, align: "left", muted: true, children: item }, index)))] })] }));
+    if (onPress) {
+        return (_jsx(Pressable, { style: [
+                { marginRight: 10 },
+                { width: tileWidth },
+            ], onPress: onPress, children: content }));
+    }
+    return (_jsx(View, { style: [{ marginRight: 10, width: tileWidth }], children: content }));
+};
+//# sourceMappingURL=MediaTile.js.map

package/dist/components/media/MediaTile.js.map

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

package/dist/components/media/SkeletonMediaTile.d.ts

@@ -0,0 +1,17 @@
+export interface SkeletonMediaTileProps {
+    width?: number | {
+        mobile: number;
+        desktop: number;
+    };
+    height?: number | {
+        mobile: number;
+        desktop: number;
+    };
+    metadataCount?: number;
+}
+/**
+ * Skeleton loading state for MediaTile component.
+ * Provides consistent loading states with responsive sizing.
+ */
+export declare const SkeletonMediaTile: ({ width, height, metadataCount, }: SkeletonMediaTileProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=SkeletonMediaTile.d.ts.map

package/dist/components/media/SkeletonMediaTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonMediaTile.d.ts","sourceRoot":"","sources":["../../../components/media/SkeletonMediaTile.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,sBAAsB;IACrC,KAAK,CAAC,EAAE,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACrD,MAAM,CAAC,EAAE,MAAM,GAAG;QAAE,MAAM,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,CAAC;IACtD,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;GAGG;AACH,eAAO,MAAM,iBAAiB,GAAI,mCAI/B,sBAAsB,4CA+ExB,CAAC"}

package/dist/components/media/SkeletonMediaTile.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { ThemeContext } from '../../theme';
+import { useBrand } from '../../brand';
+import { useBreakpoints } from '../../hooks/useWindowWidth';
+/**
+ * Skeleton loading state for MediaTile component.
+ * Provides consistent loading states with responsive sizing.
+ */
+export const SkeletonMediaTile = ({ width, height, metadataCount = 2, }) => {
+    const theme = useContext(ThemeContext);
+    const { isMediumOrLarger } = useBreakpoints();
+    const brand = useBrand();
+    const styles = useMemo(() => StyleSheet.create({
+        skeletonImage: {
+            width: '100%',
+            borderRadius: brand.borderRadius,
+        },
+        infoContainer: {
+            marginTop: 10,
+            gap: 5,
+        },
+        skeletonText: {
+            height: 10,
+            borderRadius: 4,
+            marginTop: 5,
+        },
+    }), [brand]);
+    // Handle responsive sizing
+    const getWidth = () => {
+        if (typeof width === 'object') {
+            return isMediumOrLarger ? width.desktop : width.mobile;
+        }
+        return width;
+    };
+    const getHeight = () => {
+        if (typeof height === 'object') {
+            return isMediumOrLarger ? height.desktop : height.mobile;
+        }
+        return height;
+    };
+    // Default responsive sizes if not provided
+    const tileWidth = getWidth() ?? (isMediumOrLarger ? 250 : 150);
+    const imageHeight = getHeight() ?? (isMediumOrLarger ? 150 : 200);
+    const skeletonColor = theme.values.isDark ? '#333333' : '#e0e0e0';
+    const skeletonWidths = ['70%', '40%', '30%'];
+    return (_jsxs(View, { style: [
+            { width: tileWidth, marginRight: 10 },
+        ], children: [_jsx(View, { style: [
+                    styles.skeletonImage,
+                    { backgroundColor: skeletonColor, height: imageHeight },
+                ] }), _jsxs(View, { style: styles.infoContainer, children: [_jsx(View, { style: [
+                            styles.skeletonText,
+                            {
+                                width: (skeletonWidths[0] || '70%'),
+                                backgroundColor: skeletonColor,
+                            },
+                        ] }), Array.from({ length: metadataCount }).map((_, index) => (_jsx(View, { style: [
+                            styles.skeletonText,
+                            {
+                                width: (skeletonWidths[index + 1] || '40%'),
+                                backgroundColor: skeletonColor,
+                            },
+                        ] }, index)))] })] }));
+};
+//# sourceMappingURL=SkeletonMediaTile.js.map

package/dist/components/media/SkeletonMediaTile.js.map

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

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

@@ -0,0 +1,7 @@
+export { ImageCarousel } from './ImageCarousel';
+export { default as FeatureCard } from './FeatureCard';
+export { HorizontalCarousel } from './HorizontalCarousel';
+export { Carousel } from './Carousel';
+export { MediaTile } from './MediaTile';
+export { SkeletonMediaTile } from './SkeletonMediaTile';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/media/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/media/index.js

@@ -0,0 +1,8 @@
+// Media components
+export { ImageCarousel } from './ImageCarousel';
+export { default as FeatureCard } from './FeatureCard';
+export { HorizontalCarousel } from './HorizontalCarousel';
+export { Carousel } from './Carousel';
+export { MediaTile } from './MediaTile';
+export { SkeletonMediaTile } from './SkeletonMediaTile';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/media/index.ts"],"names":[],"mappings":"AAAA,mBAAmB;AACnB,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC"}

package/dist/components/navigation/AppbarWeb.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+type AppbarProps = {
+    title?: string;
+    logoUri?: string;
+    tabs?: React.ReactElement | React.ReactElement[];
+    currentRoute?: string;
+    onNavigate?: (route: string) => void;
+    hideTabs?: boolean;
+};
+/**
+ * A responsive appbar that displays at the top of the page.
+ * Dynamically adapts its styling when the viewport is less than medium
+ * On mobile web: Logo + Hamburger menu
+ * On desktop/tablet: Logo + Top tabs + Theme toggle
+ */
+declare const AppbarWeb: ({ title, logoUri, tabs, currentRoute, onNavigate, hideTabs }: AppbarProps) => import("react/jsx-runtime").JSX.Element;
+export default AppbarWeb;
+//# sourceMappingURL=AppbarWeb.d.ts.map

package/dist/components/navigation/AppbarWeb.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"AppbarWeb.d.ts","sourceRoot":"","sources":["../../../components/navigation/AppbarWeb.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAUnD,KAAK,WAAW,GAAG;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,IAAI,CAAC,EAAE,KAAK,CAAC,YAAY,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC;IACjD,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF;;;;;GAKG;AAEH,QAAA,MAAM,SAAS,GAAI,8DAAsE,WAAW,4CAwEnG,CAAC;AACF,eAAe,SAAS,CAAC"}

package/dist/components/navigation/AppbarWeb.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useContext, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useDimensions } from '../../hooks';
+import { useBrand } from '../../brand';
+import { ThemeContext } from '../../theme';
+import { Platform } from 'react-native';
+import IconButtonGroup from './IconButtonGroup';
+import AppbarBranding from './Logo';
+import MobileMenuDrawer from './MobileMenuDrawer';
+/**
+ * A responsive appbar that displays at the top of the page.
+ * Dynamically adapts its styling when the viewport is less than medium
+ * On mobile web: Logo + Hamburger menu
+ * On desktop/tablet: Logo + Top tabs + Theme toggle
+ */
+const AppbarWeb = ({ title, logoUri, tabs, currentRoute, onNavigate, hideTabs = false }) => {
+    //Initialize theme
+    const theme = useContext(ThemeContext);
+    //Use dimensions hook
+    const dimensions = useDimensions();
+    const brand = useBrand();
+    const styles = useMemo(() => StyleSheet.create({
+        appbar: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 80,
+            paddingHorizontal: '5%',
+        },
+        appbarWebSmall: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'space-between',
+            height: 80,
+            width: '100%',
+            paddingHorizontal: brand.spacing.xl,
+        },
+        iconContainer: {
+            flexDirection: 'row',
+            gap: brand.spacing.sm + 2,
+        },
+        logo: {
+            width: 40,
+            height: 40,
+        },
+        title: {
+            fontSize: brand.fontSizes.large,
+            fontWeight: 'bold',
+            marginLeft: brand.spacing.sm + 2,
+        },
+        webContainer: {}, // WebContainer property for additional styling
+    }), [brand]);
+    return (_jsx(View, { style: {
+            //Configure a background with a theme background
+            backgroundColor: theme.values.appbarBackgroundColor,
+            // Ensure appbar appears above content
+            zIndex: 10,
+            position: 'relative',
+        }, children: _jsx(View, { style: {
+                ...styles.webContainer, //Configure appbar with theme appbar background color
+                backgroundColor: theme.values.appbarBackgroundColor,
+                ...(!theme.values.isDark && { borderBottomWidth: 1, borderBottomColor: theme.values.borderColor }),
+            }, children: _jsxs(View, { style: {
+                    ...styles.appbar,
+                    height: Platform.OS === 'web' && dimensions.breakpoint === 'small' ? 60 : 80,
+                }, children: [_jsx(AppbarBranding, { logoUri: logoUri }), Platform.OS === 'web' && dimensions.breakpoint === 'small' ? (_jsx(MobileMenuDrawer, { currentRoute: currentRoute, onNavigate: onNavigate, logoUri: logoUri })) : (_jsxs(_Fragment, { children: [!hideTabs && tabs, _jsx(IconButtonGroup, {})] }))] }) }) }));
+};
+export default AppbarWeb;
+//# sourceMappingURL=AppbarWeb.js.map

package/dist/components/navigation/AppbarWeb.js.map

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

package/dist/components/navigation/IconButtonGroup.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Icons to be rendered inside appbar on both web and mobile
+ * @returns Rendered IconButtonGroup
+ */
+declare const IconButtonGroup: () => import("react/jsx-runtime").JSX.Element;
+export default IconButtonGroup;
+//# sourceMappingURL=IconButtonGroup.d.ts.map

package/dist/components/navigation/IconButtonGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonGroup.d.ts","sourceRoot":"","sources":["../../../components/navigation/IconButtonGroup.tsx"],"names":[],"mappings":"AAMA;;;GAGG;AACH,QAAA,MAAM,eAAe,+CAiBpB,CAAC;AACF,eAAe,eAAe,CAAC"}

package/dist/components/navigation/IconButtonGroup.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { ToggleIconButton } from '../ui';
+import { ThemeContext } from '../../theme';
+import { useDimensions } from '../../hooks';
+/**
+ * Icons to be rendered inside appbar on both web and mobile
+ * @returns Rendered IconButtonGroup
+ */
+const IconButtonGroup = () => {
+    //Initialize theme toggle
+    const { toggleTheme } = useContext(ThemeContext);
+    const dimensions = useDimensions();
+    return (_jsx(View, { style: {
+            ...styles.buttonGroup,
+            width: dimensions.breakpoint !== 'small' ? 150 : 'auto',
+            justifyContent: 'flex-end',
+        }, children: _jsx(View, { style: styles.iconContainer, children: _jsx(ToggleIconButton, { iconName: "sun", alternateIconName: "moon", onPress: toggleTheme }) }) }));
+};
+export default IconButtonGroup;
+const styles = StyleSheet.create({
+    buttonGroup: {
+        width: 150,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        flexDirection: 'row',
+        gap: 10,
+    },
+});
+//# sourceMappingURL=IconButtonGroup.js.map

package/dist/components/navigation/IconButtonGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"IconButtonGroup.js","sourceRoot":"","sources":["../../../components/navigation/IconButtonGroup.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5C;;;GAGG;AACH,MAAM,eAAe,GAAG,GAAG,EAAE;IAC3B,yBAAyB;IACzB,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IACjD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,CACL,KAAC,IAAI,IACH,KAAK,EAAE;YACL,GAAG,MAAM,CAAC,WAAW;YACrB,KAAK,EAAE,UAAU,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;YACvD,cAAc,EAAE,UAAU;SAC3B,YACD,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa,YAC/B,KAAC,gBAAgB,IAAC,QAAQ,EAAC,KAAK,EAAC,iBAAiB,EAAC,MAAM,EAAC,OAAO,EAAE,WAAW,GAAI,GAC7E,GACF,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,eAAe,CAAC;AAE/B,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,WAAW,EAAE;QACX,KAAK,EAAE,GAAG;QACV,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;KACrB;IACD,aAAa,EAAE;QACb,aAAa,EAAE,KAAK;QACpB,GAAG,EAAE,EAAE;KACR;CACF,CAAC,CAAC"}

package/dist/components/navigation/Logo.d.ts

@@ -0,0 +1,16 @@
+import { ImageSourcePropType } from 'react-native';
+type AppBarBrandingProps = {
+    /**
+     * Optional logo image source. Can be a string URI or ImageSourcePropType (require).
+     * If provided, this takes precedence over brand config logos.
+     */
+    logoUri?: string | ImageSourcePropType;
+};
+/**
+ * Appbar with optional Logo for the business
+ * Supports URI strings, ImageSourcePropType, or brand config logos
+ * Priority: logoUri > brand config > fallback
+ */
+declare const Logo: ({ logoUri }: AppBarBrandingProps) => import("react/jsx-runtime").JSX.Element | null;
+export default Logo;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/components/navigation/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../../components/navigation/Logo.tsx"],"names":[],"mappings":"AACA,OAAO,EAAe,mBAAmB,EAAc,MAAM,cAAc,CAAC;AAO5E,KAAK,mBAAmB,GAAG;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,mBAAmB,CAAC;CACxC,CAAC;AAEF;;;;GAIG;AAEH,QAAA,MAAM,IAAI,GAAI,aAAa,mBAAmB,mDA8C7C,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/navigation/Logo.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { View, Image, StyleSheet } from 'react-native';
+import { Link } from 'expo-router';
+import { useBrand } from '../../brand';
+import { useDimensions } from '../../hooks';
+import { ThemeContext } from '../../theme';
+import { Platform } from 'react-native';
+/**
+ * Appbar with optional Logo for the business
+ * Supports URI strings, ImageSourcePropType, or brand config logos
+ * Priority: logoUri > brand config > fallback
+ */
+const Logo = ({ logoUri }) => {
+    const dimensions = useDimensions();
+    const theme = React.useContext(ThemeContext);
+    const brand = useBrand();
+    // Determine image source with priority: logoUri > brand config > undefined
+    const getImageSource = () => {
+        if (logoUri) {
+            // If logoUri is provided, use it (supports both string URIs and ImageSourcePropType)
+            return typeof logoUri === 'string' ? { uri: logoUri } : logoUri;
+        }
+        // Fall back to brand config logos
+        const brandLogo = theme.values.isDark ? brand.logo.dark : brand.logo.light;
+        if (brandLogo) {
+            return typeof brandLogo === 'string' ? { uri: brandLogo } : brandLogo;
+        }
+        // No logo available
+        return undefined;
+    };
+    const imageSource = getImageSource();
+    // Don't render if no image source is available
+    if (!imageSource) {
+        return null;
+    }
+    return (_jsx(Link, { href: "/", children: _jsx(View, { style: {
+                ...styles.container,
+                width: dimensions.breakpoint !== 'small' ? 150 : 'auto',
+            }, children: _jsx(Image, { source: imageSource, style: [
+                    styles.logo,
+                    Platform.OS === 'web' && dimensions.breakpoint === 'small' && styles.logoMobile,
+                ] }) }) }));
+};
+export default Logo;
+const styles = StyleSheet.create({
+    container: {
+        width: 150,
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: 5,
+    },
+    logo: {
+        marginTop: 12,
+        width: 200,
+        height: 50,
+    },
+    logoMobile: {
+        width: 150,
+        height: 38,
+    },
+});
+//# sourceMappingURL=Logo.js.map

package/dist/components/navigation/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../../components/navigation/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,KAAK,EAAuB,UAAU,EAAE,MAAM,cAAc,CAAC;AAC5E,OAAO,EAAE,IAAI,EAAE,MAAM,aAAa,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC;;;;GAIG;AAEH,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAuB,EAAE,EAAE;IAChD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IACnC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAAC,YAAY,CAAC,CAAC;IAC7C,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,2EAA2E;IAC3E,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,OAAO,EAAE,CAAC;YACZ,qFAAqF;YACrF,OAAO,OAAO,OAAO,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,OAAO,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;QAClE,CAAC;QAED,kCAAkC;QAClC,MAAM,SAAS,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC;QAC3E,IAAI,SAAS,EAAE,CAAC;YACd,OAAO,OAAO,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;QACxE,CAAC;QAED,oBAAoB;QACpB,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IAErC,+CAA+C;IAC/C,IAAI,CAAC,WAAW,EAAE,CAAC;QACjB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAO,CACL,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,YACZ,KAAC,IAAI,IACH,KAAK,EAAE;gBACL,GAAG,MAAM,CAAC,SAAS;gBACnB,KAAK,EAAE,UAAU,CAAC,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,MAAM;aACxD,YACD,KAAC,KAAK,IACJ,MAAM,EAAE,WAAW,EACnB,KAAK,EAAE;oBACL,MAAM,CAAC,IAAI;oBACX,QAAQ,CAAC,EAAE,KAAK,KAAK,IAAI,UAAU,CAAC,UAAU,KAAK,OAAO,IAAI,MAAM,CAAC,UAAU;iBAChF,GACD,GACG,GACF,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC;AAEpB,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,GAAG;QACV,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,YAAY;QAC5B,GAAG,EAAE,CAAC;KACP;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,EAAE;QACb,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;KACX;IACD,UAAU,EAAE;QACV,KAAK,EAAE,GAAG;QACV,MAAM,EAAE,EAAE;KACX;CACF,CAAC,CAAC"}

package/dist/components/navigation/MobileMenuDrawer.d.ts

@@ -0,0 +1,13 @@
+type MobileMenuDrawerProps = {
+    currentRoute?: string;
+    onNavigate?: (route: string) => void;
+    logoUri?: string;
+};
+/**
+ * Hamburger menu drawer for mobile web that opens a side drawer
+ * Contains navigation links and theme toggle
+ * Enhanced with keyboard support, accessibility, and improved animations
+ */
+declare const MobileMenuDrawer: ({ currentRoute, onNavigate, logoUri }: MobileMenuDrawerProps) => import("react/jsx-runtime").JSX.Element | null;
+export default MobileMenuDrawer;
+//# sourceMappingURL=MobileMenuDrawer.d.ts.map

package/dist/components/navigation/MobileMenuDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MobileMenuDrawer.d.ts","sourceRoot":"","sources":["../../../components/navigation/MobileMenuDrawer.tsx"],"names":[],"mappings":"AAWA,KAAK,qBAAqB,GAAG;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF;;;;GAIG;AACH,QAAA,MAAM,gBAAgB,GAAI,uCAAuC,qBAAqB,mDAmRrF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}