zero-to-app 3.2.1 → 3.2.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/brand/brand-config.d.ts +65 -0
- package/dist/brand/brand-config.d.ts.map +1 -0
- package/dist/brand/brand-config.js +68 -0
- package/dist/brand/brand-config.js.map +1 -0
- package/dist/brand/brand-context.d.ts +55 -0
- package/dist/brand/brand-context.d.ts.map +1 -0
- package/dist/brand/brand-context.js +76 -0
- package/dist/brand/brand-context.js.map +1 -0
- package/dist/brand/brand-types.d.ts +92 -0
- package/dist/brand/brand-types.d.ts.map +1 -0
- package/dist/brand/brand-types.js +2 -0
- package/dist/brand/brand-types.js.map +1 -0
- package/dist/brand/default-brand.d.ts +11 -0
- package/dist/brand/default-brand.d.ts.map +1 -0
- package/dist/brand/default-brand.js +32 -0
- package/dist/brand/default-brand.js.map +1 -0
- package/dist/brand/index.d.ts +6 -0
- package/dist/brand/index.d.ts.map +1 -0
- package/dist/brand/index.js +8 -0
- package/dist/brand/index.js.map +1 -0
- package/dist/brand/palette-generator.d.ts +64 -0
- package/dist/brand/palette-generator.d.ts.map +1 -0
- package/dist/brand/palette-generator.js +291 -0
- package/dist/brand/palette-generator.js.map +1 -0
- package/dist/components/index.d.ts +3 -0
- package/dist/components/index.d.ts.map +1 -0
- package/dist/components/index.js +3 -0
- package/dist/components/index.js.map +1 -0
- package/dist/components/navigation/app-tabs/app-tabs.d.ts +63 -0
- package/dist/components/navigation/app-tabs/app-tabs.d.ts.map +1 -0
- package/dist/components/navigation/app-tabs/app-tabs.js +13 -0
- package/dist/components/navigation/app-tabs/app-tabs.js.map +1 -0
- package/dist/components/navigation/app-tabs/app-tabs.web.d.ts +47 -0
- package/dist/components/navigation/app-tabs/app-tabs.web.d.ts.map +1 -0
- package/dist/components/navigation/app-tabs/app-tabs.web.js +104 -0
- package/dist/components/navigation/app-tabs/app-tabs.web.js.map +1 -0
- package/dist/components/navigation/app-tabs/index.d.ts +3 -0
- package/dist/components/navigation/app-tabs/index.d.ts.map +1 -0
- package/dist/components/navigation/app-tabs/index.js +3 -0
- package/dist/components/navigation/app-tabs/index.js.map +1 -0
- package/dist/components/navigation/drawer/drawer.d.ts +24 -0
- package/dist/components/navigation/drawer/drawer.d.ts.map +1 -0
- package/dist/components/navigation/drawer/drawer.js +82 -0
- package/dist/components/navigation/drawer/drawer.js.map +1 -0
- package/dist/components/navigation/index.d.ts +10 -0
- package/dist/components/navigation/index.d.ts.map +1 -0
- package/dist/components/navigation/index.js +11 -0
- package/dist/components/navigation/index.js.map +1 -0
- package/dist/components/navigation/native-header.d.ts +25 -0
- package/dist/components/navigation/native-header.d.ts.map +1 -0
- package/dist/components/navigation/native-header.js +32 -0
- package/dist/components/navigation/native-header.js.map +1 -0
- package/dist/components/navigation/shared/sidebar-styles.d.ts +34 -0
- package/dist/components/navigation/shared/sidebar-styles.d.ts.map +1 -0
- package/dist/components/navigation/shared/sidebar-styles.js +34 -0
- package/dist/components/navigation/shared/sidebar-styles.js.map +1 -0
- package/dist/components/navigation/sidebar/index.d.ts +10 -0
- package/dist/components/navigation/sidebar/index.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/index.js +7 -0
- package/dist/components/navigation/sidebar/index.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-footer.d.ts +18 -0
- package/dist/components/navigation/sidebar/sidebar-footer.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-footer.js +27 -0
- package/dist/components/navigation/sidebar/sidebar-footer.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-header.d.ts +26 -0
- package/dist/components/navigation/sidebar/sidebar-header.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-header.js +38 -0
- package/dist/components/navigation/sidebar/sidebar-header.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-item.d.ts +36 -0
- package/dist/components/navigation/sidebar/sidebar-item.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-item.js +63 -0
- package/dist/components/navigation/sidebar/sidebar-item.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-section.d.ts +34 -0
- package/dist/components/navigation/sidebar/sidebar-section.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar-section.js +56 -0
- package/dist/components/navigation/sidebar/sidebar-section.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar.d.ts +2 -0
- package/dist/components/navigation/sidebar/sidebar.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar.js +4 -0
- package/dist/components/navigation/sidebar/sidebar.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar.native.d.ts +23 -0
- package/dist/components/navigation/sidebar/sidebar.native.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar.native.js +80 -0
- package/dist/components/navigation/sidebar/sidebar.native.js.map +1 -0
- package/dist/components/navigation/sidebar/sidebar.web.d.ts +26 -0
- package/dist/components/navigation/sidebar/sidebar.web.d.ts.map +1 -0
- package/dist/components/navigation/sidebar/sidebar.web.js +90 -0
- package/dist/components/navigation/sidebar/sidebar.web.js.map +1 -0
- package/dist/components/navigation/themed-stack.d.ts +25 -0
- package/dist/components/navigation/themed-stack.d.ts.map +1 -0
- package/dist/components/navigation/themed-stack.js +37 -0
- package/dist/components/navigation/themed-stack.js.map +1 -0
- package/dist/components/shared/index.d.ts +3 -0
- package/dist/components/shared/index.d.ts.map +1 -0
- package/dist/components/shared/index.js +2 -0
- package/dist/components/shared/index.js.map +1 -0
- package/dist/components/shared/types.d.ts +82 -0
- package/dist/components/shared/types.d.ts.map +1 -0
- package/dist/components/shared/types.js +2 -0
- package/dist/components/shared/types.js.map +1 -0
- package/dist/components/shared/utils.d.ts +19 -0
- package/dist/components/shared/utils.d.ts.map +1 -0
- package/dist/components/shared/utils.js +23 -0
- package/dist/components/shared/utils.js.map +1 -0
- package/dist/components/ui/button.d.ts +132 -0
- package/dist/components/ui/button.d.ts.map +1 -0
- package/dist/components/ui/button.js +252 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/chip.d.ts +88 -0
- package/dist/components/ui/chip.d.ts.map +1 -0
- package/dist/components/ui/chip.js +129 -0
- package/dist/components/ui/chip.js.map +1 -0
- package/dist/components/ui/collapsible.d.ts +88 -0
- package/dist/components/ui/collapsible.d.ts.map +1 -0
- package/dist/components/ui/collapsible.js +66 -0
- package/dist/components/ui/collapsible.js.map +1 -0
- package/dist/components/ui/container.d.ts +31 -0
- package/dist/components/ui/container.d.ts.map +1 -0
- package/dist/components/ui/container.js +46 -0
- package/dist/components/ui/container.js.map +1 -0
- package/dist/components/ui/fab.d.ts +51 -0
- package/dist/components/ui/fab.d.ts.map +1 -0
- package/dist/components/ui/fab.js +142 -0
- package/dist/components/ui/fab.js.map +1 -0
- package/dist/components/ui/index.d.ts +23 -0
- package/dist/components/ui/index.d.ts.map +1 -0
- package/dist/components/ui/index.js +22 -0
- package/dist/components/ui/index.js.map +1 -0
- package/dist/components/ui/screen.d.ts +40 -0
- package/dist/components/ui/screen.d.ts.map +1 -0
- package/dist/components/ui/screen.js +57 -0
- package/dist/components/ui/screen.js.map +1 -0
- package/dist/components/ui/slider.d.ts +47 -0
- package/dist/components/ui/slider.d.ts.map +1 -0
- package/dist/components/ui/slider.js +41 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/themed-image.d.ts +7 -0
- package/dist/components/ui/themed-image.d.ts.map +1 -0
- package/dist/components/ui/themed-image.js +9 -0
- package/dist/components/ui/themed-image.js.map +1 -0
- package/dist/components/ui/themed-view.d.ts +20 -0
- package/dist/components/ui/themed-view.d.ts.map +1 -0
- package/dist/components/ui/themed-view.js +75 -0
- package/dist/components/ui/themed-view.js.map +1 -0
- package/dist/components/ui/typography.d.ts +110 -0
- package/dist/components/ui/typography.d.ts.map +1 -0
- package/dist/components/ui/typography.js +69 -0
- package/dist/components/ui/typography.js.map +1 -0
- package/dist/context/layout-context.d.ts +66 -0
- package/dist/context/layout-context.d.ts.map +1 -0
- package/dist/context/layout-context.js +83 -0
- package/dist/context/layout-context.js.map +1 -0
- package/dist/context/scroll-context.d.ts +8 -0
- package/dist/context/scroll-context.d.ts.map +1 -0
- package/dist/context/scroll-context.js +16 -0
- package/dist/context/scroll-context.js.map +1 -0
- package/dist/context/sidebar-context.d.ts +74 -0
- package/dist/context/sidebar-context.d.ts.map +1 -0
- package/dist/context/sidebar-context.js +95 -0
- package/dist/context/sidebar-context.js.map +1 -0
- package/dist/hooks/index.d.ts +4 -0
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +5 -0
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/use-breakpoint.d.ts +8 -0
- package/dist/hooks/use-breakpoint.d.ts.map +1 -0
- package/dist/hooks/use-breakpoint.js +10 -0
- package/dist/hooks/use-breakpoint.js.map +1 -0
- package/dist/hooks/use-dimensions.d.ts +31 -0
- package/dist/hooks/use-dimensions.d.ts.map +1 -0
- package/dist/hooks/use-dimensions.js +44 -0
- package/dist/hooks/use-dimensions.js.map +1 -0
- package/dist/hooks/use-route-navigation.d.ts +19 -0
- package/dist/hooks/use-route-navigation.d.ts.map +1 -0
- package/dist/hooks/use-route-navigation.js +25 -0
- package/dist/hooks/use-route-navigation.js.map +1 -0
- package/dist/icons/icon-utils.d.ts +24 -0
- package/dist/icons/icon-utils.d.ts.map +1 -0
- package/dist/icons/icon-utils.js +57 -0
- package/dist/icons/icon-utils.js.map +1 -0
- package/dist/icons/index.d.ts +13 -0
- package/dist/icons/index.d.ts.map +1 -0
- package/dist/icons/index.js +12 -0
- package/dist/icons/index.js.map +1 -0
- package/dist/index.d.ts +9 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +12 -0
- package/dist/index.js.map +1 -0
- package/dist/theme/high-contrast-theme.d.ts +19 -0
- package/dist/theme/high-contrast-theme.d.ts.map +1 -0
- package/dist/theme/high-contrast-theme.js +257 -0
- package/dist/theme/high-contrast-theme.js.map +1 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/index.js +6 -0
- package/dist/theme/index.js.map +1 -0
- package/dist/theme/theme-config.d.ts +150 -0
- package/dist/theme/theme-config.d.ts.map +1 -0
- package/dist/theme/theme-config.js +318 -0
- package/dist/theme/theme-config.js.map +1 -0
- package/dist/theme/theme.d.ts +106 -0
- package/dist/theme/theme.d.ts.map +1 -0
- package/dist/theme/theme.js +135 -0
- package/dist/theme/theme.js.map +1 -0
- package/dist/utils/contrast-checker.d.ts +51 -0
- package/dist/utils/contrast-checker.d.ts.map +1 -0
- package/dist/utils/contrast-checker.js +97 -0
- package/dist/utils/contrast-checker.js.map +1 -0
- package/dist/utils/index.d.ts +2 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils/index.js.map +1 -0
- package/package.json +1 -1
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { StyleSheet, View } from 'react-native';
|
|
3
|
+
import { Typography } from '../../ui/typography';
|
|
4
|
+
import { useThemeContext } from '../../../theme';
|
|
5
|
+
import { renderIcon } from '../../../icons';
|
|
6
|
+
// 3. COMPONENT
|
|
7
|
+
/**
|
|
8
|
+
* Groups sidebar items with an optional section header
|
|
9
|
+
*/
|
|
10
|
+
export const SidebarSection = ({ title, icon, children, style, testID, }) => {
|
|
11
|
+
const { values: theme } = useThemeContext();
|
|
12
|
+
const tokens = theme.tokens.sidebar;
|
|
13
|
+
const spacing = theme.spacing;
|
|
14
|
+
const renderSectionIcon = () => {
|
|
15
|
+
if (!icon)
|
|
16
|
+
return null;
|
|
17
|
+
const iconSize = icon.size || 14;
|
|
18
|
+
const iconLibrary = icon.library || 'Feather';
|
|
19
|
+
return (_jsx(View, { style: styles.iconContainer, children: renderIcon(icon, iconLibrary, iconSize, theme.onSurfaceVariant) }));
|
|
20
|
+
};
|
|
21
|
+
return (_jsxs(View, { style: [
|
|
22
|
+
styles.container,
|
|
23
|
+
style,
|
|
24
|
+
], testID: testID, children: [title && (_jsxs(View, { style: [
|
|
25
|
+
styles.header,
|
|
26
|
+
{ paddingHorizontal: spacing.md, gap: spacing.xs },
|
|
27
|
+
], children: [renderSectionIcon(), _jsx(Typography, { variant: "labelSmall", weight: "medium", color: theme.onSurfaceVariant, uppercase: true, children: title })] })), _jsx(View, { style: styles.itemsContainer, children: children }), _jsx(View, { style: [
|
|
28
|
+
styles.divider,
|
|
29
|
+
{
|
|
30
|
+
backgroundColor: tokens.divider,
|
|
31
|
+
},
|
|
32
|
+
] })] }));
|
|
33
|
+
};
|
|
34
|
+
// 4. STYLES
|
|
35
|
+
const styles = StyleSheet.create({
|
|
36
|
+
container: {
|
|
37
|
+
width: '100%',
|
|
38
|
+
},
|
|
39
|
+
header: {
|
|
40
|
+
minHeight: 48,
|
|
41
|
+
flexDirection: 'row',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
},
|
|
44
|
+
iconContainer: {
|
|
45
|
+
alignItems: 'center',
|
|
46
|
+
justifyContent: 'center',
|
|
47
|
+
},
|
|
48
|
+
itemsContainer: {
|
|
49
|
+
width: '100%',
|
|
50
|
+
},
|
|
51
|
+
divider: {
|
|
52
|
+
width: '100%',
|
|
53
|
+
height: 1,
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
//# sourceMappingURL=sidebar-section.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar-section.js","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar-section.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAkC,MAAM,cAAc,CAAC;AAChF,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,UAAU,EAAoB,MAAM,gBAAgB,CAAC;AAgC9D,eAAe;AAEf;;GAEG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,MAAM,GACP,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAC5C,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IACpC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAE9B,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,IAAI,IAAI,EAAE,CAAC;QACjC,MAAM,WAAW,GAAG,IAAI,CAAC,OAAO,IAAI,SAAS,CAAC;QAC9C,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa,YAC9B,UAAU,CAAC,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,GAC3D,CACR,CAAC;IACJ,CAAC,CAAC;IAEF,OAAO,CACL,MAAC,IAAI,IACH,KAAK,EAAE;YACL,MAAM,CAAC,SAAS;YAChB,KAAK;SACN,EACD,MAAM,EAAE,MAAM,aAEb,KAAK,IAAI,CACR,MAAC,IAAI,IACH,KAAK,EAAE;oBACL,MAAM,CAAC,MAAM;oBACb,EAAE,iBAAiB,EAAE,OAAO,CAAC,EAAE,EAAE,GAAG,EAAE,OAAO,CAAC,EAAE,EAAE;iBACnD,aAEA,iBAAiB,EAAE,EACpB,KAAC,UAAU,IACT,OAAO,EAAC,YAAY,EACpB,MAAM,EAAC,QAAQ,EACf,KAAK,EAAE,KAAK,CAAC,gBAAgB,EAC7B,SAAS,kBAER,KAAK,GACK,IACR,CACR,EAED,KAAC,IAAI,IAAC,KAAK,EAAE,MAAM,CAAC,cAAc,YAC/B,QAAQ,GACJ,EAEP,KAAC,IAAI,IACH,KAAK,EAAE;oBACL,MAAM,CAAC,OAAO;oBACd;wBACE,eAAe,EAAE,MAAM,CAAC,OAAO;qBAChC;iBACF,GACD,IACG,CACR,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY;AACZ,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,SAAS,EAAE;QACT,KAAK,EAAE,MAAM;KACd;IACD,MAAM,EAAE;QACN,SAAS,EAAE,EAAE;QACb,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,QAAQ;KACrB;IACD,aAAa,EAAE;QACb,UAAU,EAAE,QAAQ;QACpB,cAAc,EAAE,QAAQ;KACzB;IACD,cAAc,EAAE;QACd,KAAK,EAAE,MAAM;KACd;IACD,OAAO,EAAE;QACP,KAAK,EAAE,MAAM;QACb,MAAM,EAAE,CAAC;KACV;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.js","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar.tsx"],"names":[],"mappings":"AAAA,4CAA4C;AAC5C,2DAA2D;AAC3D,OAAO,EAAE,OAAO,EAAqB,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the Sidebar component (Native)
|
|
5
|
+
*/
|
|
6
|
+
export interface SidebarProps {
|
|
7
|
+
/** Optional header component */
|
|
8
|
+
header?: React.ReactNode;
|
|
9
|
+
/** Sidebar content (usually SidebarSection and SidebarItem components) */
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
/** Optional footer component */
|
|
12
|
+
footer?: React.ReactNode;
|
|
13
|
+
/** Custom styles */
|
|
14
|
+
style?: StyleProp<ViewStyle>;
|
|
15
|
+
/** Test ID for testing */
|
|
16
|
+
testID?: string;
|
|
17
|
+
}
|
|
18
|
+
/**
|
|
19
|
+
* Sidebar component for iOS/Android platforms
|
|
20
|
+
* Modal-based drawer that slides in from the left
|
|
21
|
+
*/
|
|
22
|
+
export declare const Sidebar: React.FC<SidebarProps>;
|
|
23
|
+
//# sourceMappingURL=sidebar.native.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.native.d.ts","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar.native.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAML,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAQtB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAID;;;GAGG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAoF1C,CAAC"}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
// 1. IMPORTS
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StyleSheet, View, Modal, Pressable, ScrollView, } from 'react-native';
|
|
5
|
+
import Animated, { useAnimatedStyle, withTiming, useSharedValue } from 'react-native-reanimated';
|
|
6
|
+
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
|
7
|
+
import { useThemeContext } from '../../../theme';
|
|
8
|
+
import { useSidebar } from '../../../context/sidebar-context';
|
|
9
|
+
// 3. COMPONENT
|
|
10
|
+
/**
|
|
11
|
+
* Sidebar component for iOS/Android platforms
|
|
12
|
+
* Modal-based drawer that slides in from the left
|
|
13
|
+
*/
|
|
14
|
+
export const Sidebar = ({ header, children, footer, style, testID, }) => {
|
|
15
|
+
const { values: theme } = useThemeContext();
|
|
16
|
+
const { isOpen, close } = useSidebar();
|
|
17
|
+
const tokens = theme.tokens.sidebar;
|
|
18
|
+
const insets = useSafeAreaInsets();
|
|
19
|
+
const translateX = useSharedValue(isOpen ? 0 : -tokens.width);
|
|
20
|
+
const backdropOpacity = useSharedValue(isOpen ? 1 : 0);
|
|
21
|
+
React.useEffect(() => {
|
|
22
|
+
if (isOpen) {
|
|
23
|
+
translateX.value = withTiming(0, { duration: 300 });
|
|
24
|
+
backdropOpacity.value = withTiming(1, { duration: 300 });
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
translateX.value = withTiming(-tokens.width, { duration: 250 });
|
|
28
|
+
backdropOpacity.value = withTiming(0, { duration: 250 });
|
|
29
|
+
}
|
|
30
|
+
}, [isOpen, translateX, backdropOpacity, tokens.width]);
|
|
31
|
+
const animatedDrawerStyle = useAnimatedStyle(() => ({
|
|
32
|
+
transform: [{ translateX: translateX.value }],
|
|
33
|
+
}));
|
|
34
|
+
const animatedBackdropStyle = useAnimatedStyle(() => ({
|
|
35
|
+
opacity: backdropOpacity.value * 0.5,
|
|
36
|
+
}));
|
|
37
|
+
return (_jsx(Modal, { visible: isOpen, transparent: true, animationType: "none", onRequestClose: close, statusBarTranslucent: true, children: _jsxs(View, { style: styles.modalContainer, children: [_jsx(Animated.View, { style: [
|
|
38
|
+
styles.backdrop,
|
|
39
|
+
{ backgroundColor: theme.scrim },
|
|
40
|
+
animatedBackdropStyle,
|
|
41
|
+
], children: _jsx(Pressable, { style: StyleSheet.absoluteFill, onPress: close }) }), _jsxs(Animated.View, { style: [
|
|
42
|
+
styles.drawer,
|
|
43
|
+
{
|
|
44
|
+
width: tokens.width,
|
|
45
|
+
backgroundColor: tokens.background,
|
|
46
|
+
paddingTop: insets.top,
|
|
47
|
+
paddingBottom: insets.bottom,
|
|
48
|
+
shadowColor: theme.shadow,
|
|
49
|
+
shadowOffset: { width: 2, height: 0 },
|
|
50
|
+
shadowOpacity: 0.25,
|
|
51
|
+
shadowRadius: 12,
|
|
52
|
+
elevation: 16,
|
|
53
|
+
},
|
|
54
|
+
animatedDrawerStyle,
|
|
55
|
+
style,
|
|
56
|
+
], testID: testID, children: [header, _jsx(ScrollView, { style: styles.scrollContent, contentContainerStyle: styles.scrollContentContainer, showsVerticalScrollIndicator: false, children: children }), footer] })] }) }));
|
|
57
|
+
};
|
|
58
|
+
// 4. STYLES
|
|
59
|
+
const styles = StyleSheet.create({
|
|
60
|
+
modalContainer: {
|
|
61
|
+
flex: 1,
|
|
62
|
+
flexDirection: 'row',
|
|
63
|
+
},
|
|
64
|
+
backdrop: {
|
|
65
|
+
...StyleSheet.absoluteFillObject,
|
|
66
|
+
},
|
|
67
|
+
drawer: {
|
|
68
|
+
position: 'absolute',
|
|
69
|
+
left: 0,
|
|
70
|
+
top: 0,
|
|
71
|
+
bottom: 0,
|
|
72
|
+
},
|
|
73
|
+
scrollContent: {
|
|
74
|
+
flex: 1,
|
|
75
|
+
},
|
|
76
|
+
scrollContentContainer: {
|
|
77
|
+
flexGrow: 1,
|
|
78
|
+
},
|
|
79
|
+
});
|
|
80
|
+
//# sourceMappingURL=sidebar.native.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.native.js","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar.native.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type StyleProp, type ViewStyle } from 'react-native';
|
|
3
|
+
/**
|
|
4
|
+
* Props for the Sidebar component (Web)
|
|
5
|
+
*/
|
|
6
|
+
export interface SidebarProps {
|
|
7
|
+
/** Optional header component */
|
|
8
|
+
header?: React.ReactNode;
|
|
9
|
+
/** Sidebar content (usually SidebarSection and SidebarItem components) */
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
/** Optional footer component */
|
|
12
|
+
footer?: React.ReactNode;
|
|
13
|
+
/** Custom styles */
|
|
14
|
+
style?: StyleProp<ViewStyle>;
|
|
15
|
+
/** Test ID for testing */
|
|
16
|
+
testID?: string;
|
|
17
|
+
/** Anchor side for the sidebar: 'left' | 'right' (desktop and mobile drawer) */
|
|
18
|
+
anchor?: 'left' | 'right';
|
|
19
|
+
}
|
|
20
|
+
/**
|
|
21
|
+
* Sidebar component for web platform
|
|
22
|
+
* - Desktop (≥1024px): Persistent sidebar on left (always visible, below AppBar)
|
|
23
|
+
* - Mobile/Tablet (<1024px): Floating trigger icon + overlay Drawer
|
|
24
|
+
*/
|
|
25
|
+
export declare const Sidebar: React.FC<SidebarProps>;
|
|
26
|
+
//# sourceMappingURL=sidebar.web.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.web.d.ts","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar.web.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIL,KAAK,SAAS,EACd,KAAK,SAAS,EACf,MAAM,cAAc,CAAC;AAWtB;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,0EAA0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,gCAAgC;IAChC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oBAAoB;IACpB,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;IAC7B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,gFAAgF;IAChF,MAAM,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CAC3B;AAID;;;;GAIG;AACH,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAmG1C,CAAC"}
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
// 1. IMPORTS
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { StyleSheet, View, ScrollView, } from 'react-native';
|
|
5
|
+
import { useThemeContext } from '../../../theme';
|
|
6
|
+
import { useDimensions, breakpoints } from '../../../hooks';
|
|
7
|
+
import { useSidebar } from '../../../context/sidebar-context';
|
|
8
|
+
import { useLayout } from '../../../context/layout-context';
|
|
9
|
+
import { usePathname } from 'expo-router';
|
|
10
|
+
import { Drawer } from '../drawer/drawer';
|
|
11
|
+
import { FAB } from '../../ui/fab';
|
|
12
|
+
// 3. COMPONENT
|
|
13
|
+
/**
|
|
14
|
+
* Sidebar component for web platform
|
|
15
|
+
* - Desktop (≥1024px): Persistent sidebar on left (always visible, below AppBar)
|
|
16
|
+
* - Mobile/Tablet (<1024px): Floating trigger icon + overlay Drawer
|
|
17
|
+
*/
|
|
18
|
+
export const Sidebar = ({ header, children, footer, style, testID, anchor = 'left', }) => {
|
|
19
|
+
const { values: theme } = useThemeContext();
|
|
20
|
+
const { width } = useDimensions();
|
|
21
|
+
const { isOpen, open, close } = useSidebar();
|
|
22
|
+
const { appBarHeight } = useLayout();
|
|
23
|
+
const tokens = theme.tokens.sidebar;
|
|
24
|
+
const spacing = theme.spacing;
|
|
25
|
+
const pathname = usePathname();
|
|
26
|
+
// Capture the route scope on first mount so the sidebar only renders
|
|
27
|
+
// when the current pathname matches (prevents showing on other tabs
|
|
28
|
+
// when expo-router caches mounted layouts).
|
|
29
|
+
const routeScopeRef = React.useRef(null);
|
|
30
|
+
if (routeScopeRef.current === null) {
|
|
31
|
+
const firstSegment = pathname.split('/').filter(Boolean)[0];
|
|
32
|
+
routeScopeRef.current = firstSegment ? `/${firstSegment}` : '/';
|
|
33
|
+
}
|
|
34
|
+
const isOnSidebarRoute = routeScopeRef.current === '/' ||
|
|
35
|
+
pathname === routeScopeRef.current ||
|
|
36
|
+
pathname.startsWith(routeScopeRef.current + '/');
|
|
37
|
+
const isDesktop = width >= breakpoints.large;
|
|
38
|
+
const isRight = anchor === 'right';
|
|
39
|
+
// Don't render anything when on a different route (cached tab)
|
|
40
|
+
if (!isOnSidebarRoute) {
|
|
41
|
+
return null;
|
|
42
|
+
}
|
|
43
|
+
// Desktop: persistent sidebar below AppBar
|
|
44
|
+
if (isDesktop) {
|
|
45
|
+
return (_jsxs(View, { style: [
|
|
46
|
+
styles.sidebarDesktop,
|
|
47
|
+
{
|
|
48
|
+
width: tokens.width,
|
|
49
|
+
backgroundColor: tokens.background,
|
|
50
|
+
borderRightWidth: isRight ? 0 : 1,
|
|
51
|
+
borderRightColor: isRight ? 'transparent' : tokens.divider,
|
|
52
|
+
borderLeftWidth: isRight ? 1 : 0,
|
|
53
|
+
borderLeftColor: isRight ? tokens.divider : 'transparent',
|
|
54
|
+
top: appBarHeight,
|
|
55
|
+
height: `calc(100vh - ${appBarHeight}px)`,
|
|
56
|
+
left: isRight ? 'auto' : 0,
|
|
57
|
+
right: isRight ? 0 : 'auto',
|
|
58
|
+
},
|
|
59
|
+
style,
|
|
60
|
+
], testID: testID, children: [header, _jsx(ScrollView, { style: styles.scrollContent, contentContainerStyle: styles.scrollContentContainer, children: children }), footer] }));
|
|
61
|
+
}
|
|
62
|
+
// Mobile: self-contained trigger + Drawer
|
|
63
|
+
return (_jsxs(_Fragment, { children: [!isOpen && (_jsx(FAB, { icon: { library: 'Feather', name: 'sidebar' }, variant: "primary", size: "medium", onPress: open, style: [
|
|
64
|
+
styles.mobileTrigger,
|
|
65
|
+
{
|
|
66
|
+
bottom: spacing.lg,
|
|
67
|
+
right: isRight ? 'auto' : spacing.lg,
|
|
68
|
+
left: isRight ? spacing.lg : 'auto',
|
|
69
|
+
},
|
|
70
|
+
] })), _jsx(Drawer, { isOpen: isOpen, onClose: close, side: anchor, header: header, footer: footer, style: style, children: children })] }));
|
|
71
|
+
};
|
|
72
|
+
// 4. STYLES
|
|
73
|
+
const styles = StyleSheet.create({
|
|
74
|
+
sidebarDesktop: {
|
|
75
|
+
position: 'fixed',
|
|
76
|
+
left: 0,
|
|
77
|
+
zIndex: 100,
|
|
78
|
+
},
|
|
79
|
+
mobileTrigger: {
|
|
80
|
+
position: 'fixed',
|
|
81
|
+
zIndex: 99,
|
|
82
|
+
},
|
|
83
|
+
scrollContent: {
|
|
84
|
+
flex: 1,
|
|
85
|
+
},
|
|
86
|
+
scrollContentContainer: {
|
|
87
|
+
flexGrow: 1,
|
|
88
|
+
},
|
|
89
|
+
});
|
|
90
|
+
//# sourceMappingURL=sidebar.web.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"sidebar.web.js","sourceRoot":"","sources":["../../../../components/navigation/sidebar/sidebar.web.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EACL,UAAU,EACV,IAAI,EACJ,UAAU,GAGX,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAC;AAC9D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,EAAE,GAAG,EAAE,MAAM,cAAc,CAAC;AAsBnC,eAAe;AAEf;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAC9C,MAAM,EACN,QAAQ,EACR,MAAM,EACN,KAAK,EACL,MAAM,EACN,MAAM,GAAG,MAAM,GAChB,EAAE,EAAE;IACH,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAC;IAC5C,MAAM,EAAE,KAAK,EAAE,GAAG,aAAa,EAAE,CAAC;IAClC,MAAM,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,UAAU,EAAE,CAAC;IAC7C,MAAM,EAAE,YAAY,EAAE,GAAG,SAAS,EAAE,CAAC;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;IACpC,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC;IAC9B,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,qEAAqE;IACrE,oEAAoE;IACpE,4CAA4C;IAC5C,MAAM,aAAa,GAAG,KAAK,CAAC,MAAM,CAAgB,IAAI,CAAC,CAAC;IACxD,IAAI,aAAa,CAAC,OAAO,KAAK,IAAI,EAAE,CAAC;QACnC,MAAM,YAAY,GAAG,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,aAAa,CAAC,OAAO,GAAG,YAAY,CAAC,CAAC,CAAC,IAAI,YAAY,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC;IAClE,CAAC;IAED,MAAM,gBAAgB,GAAG,aAAa,CAAC,OAAO,KAAK,GAAG;QACpD,QAAQ,KAAK,aAAa,CAAC,OAAO;QAClC,QAAQ,CAAC,UAAU,CAAC,aAAa,CAAC,OAAO,GAAG,GAAG,CAAC,CAAC;IAEnD,MAAM,SAAS,GAAG,KAAK,IAAI,WAAW,CAAC,KAAK,CAAC;IAC7C,MAAM,OAAO,GAAG,MAAM,KAAK,OAAO,CAAC;IAEnC,+DAA+D;IAC/D,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,IAAI,CAAC;IACd,CAAC;IAED,2CAA2C;IAC3C,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,MAAC,IAAI,IACH,KAAK,EAAE;gBACL,MAAM,CAAC,cAAc;gBACrB;oBACE,KAAK,EAAE,MAAM,CAAC,KAAK;oBACnB,eAAe,EAAE,MAAM,CAAC,UAAU;oBAClC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBACjC,gBAAgB,EAAE,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO;oBAC1D,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;oBAChC,eAAe,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,aAAa;oBACzD,GAAG,EAAE,YAAY;oBACjB,MAAM,EAAE,gBAAgB,YAAY,KAAY;oBAChD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,MAAa,CAAC,CAAC,CAAC,CAAC;oBACjC,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAa;iBACnC;gBACD,KAAK;aACN,EACD,MAAM,EAAE,MAAM,aAEb,MAAM,EACP,KAAC,UAAU,IAAC,KAAK,EAAE,MAAM,CAAC,aAAa,EAAE,qBAAqB,EAAE,MAAM,CAAC,sBAAsB,YAC1F,QAAQ,GACE,EACZ,MAAM,IACF,CACR,CAAC;IACJ,CAAC;IAED,0CAA0C;IAC1C,OAAO,CACL,8BACG,CAAC,MAAM,IAAI,CACV,KAAC,GAAG,IACF,IAAI,EAAE,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE,EAC7C,OAAO,EAAC,SAAS,EACjB,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,IAAI,EACb,KAAK,EAAE;oBACL,MAAM,CAAC,aAAa;oBACpB;wBACE,MAAM,EAAE,OAAO,CAAC,EAAE;wBAClB,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,MAAa,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE;wBAC3C,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,MAAa;qBAC3C;iBACF,GACD,CACH,EACD,KAAC,MAAM,IACL,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,KAAK,EACd,IAAI,EAAE,MAAM,EACZ,MAAM,EAAE,MAAM,EACd,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,YAEX,QAAQ,GACF,IACR,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,YAAY;AACZ,MAAM,MAAM,GAAG,UAAU,CAAC,MAAM,CAAC;IAC/B,cAAc,EAAE;QACd,QAAQ,EAAE,OAAc;QACxB,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,GAAG;KACZ;IACD,aAAa,EAAE;QACb,QAAQ,EAAE,OAAc;QACxB,MAAM,EAAE,EAAE;KACX;IACD,aAAa,EAAE;QACb,IAAI,EAAE,CAAC;KACR;IACD,sBAAsB,EAAE;QACtB,QAAQ,EAAE,CAAC;KACZ;CACF,CAAC,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { type ComponentProps } from 'react';
|
|
2
|
+
import { Stack } from 'expo-router';
|
|
3
|
+
type StackProps = ComponentProps<typeof Stack>;
|
|
4
|
+
/**
|
|
5
|
+
* A themed wrapper around Expo Router's Stack that automatically applies
|
|
6
|
+
* the app's header styling from the design token system.
|
|
7
|
+
*
|
|
8
|
+
* Applies headerStyle, headerTintColor, and sensible back button defaults.
|
|
9
|
+
* Any screenOptions passed as props are merged and will override the defaults.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // _layout.native.tsx
|
|
14
|
+
* <ThemedStack>
|
|
15
|
+
* <Stack.Screen name="index" options={{ title: 'Home' }} />
|
|
16
|
+
* <Stack.Screen name="detail" options={{ title: 'Detail' }} />
|
|
17
|
+
* </ThemedStack>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export declare function ThemedStack({ screenOptions, ...props }: StackProps): import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
export declare namespace ThemedStack {
|
|
22
|
+
var displayName: string;
|
|
23
|
+
}
|
|
24
|
+
export {};
|
|
25
|
+
//# sourceMappingURL=themed-stack.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themed-stack.d.ts","sourceRoot":"","sources":["../../../components/navigation/themed-stack.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAGpC,KAAK,UAAU,GAAG,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC;AAE/C;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAE,EAAE,UAAU,2CAmBlE;yBAnBe,WAAW"}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Stack } from 'expo-router';
|
|
3
|
+
import { useTheme } from '../../theme';
|
|
4
|
+
/**
|
|
5
|
+
* A themed wrapper around Expo Router's Stack that automatically applies
|
|
6
|
+
* the app's header styling from the design token system.
|
|
7
|
+
*
|
|
8
|
+
* Applies headerStyle, headerTintColor, and sensible back button defaults.
|
|
9
|
+
* Any screenOptions passed as props are merged and will override the defaults.
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* ```tsx
|
|
13
|
+
* // _layout.native.tsx
|
|
14
|
+
* <ThemedStack>
|
|
15
|
+
* <Stack.Screen name="index" options={{ title: 'Home' }} />
|
|
16
|
+
* <Stack.Screen name="detail" options={{ title: 'Detail' }} />
|
|
17
|
+
* </ThemedStack>
|
|
18
|
+
* ```
|
|
19
|
+
*/
|
|
20
|
+
export function ThemedStack({ screenOptions, ...props }) {
|
|
21
|
+
const theme = useTheme();
|
|
22
|
+
const defaults = {
|
|
23
|
+
headerStyle: { backgroundColor: theme.tokens.appbar.background },
|
|
24
|
+
headerTintColor: theme.onSurface,
|
|
25
|
+
headerBackVisible: true,
|
|
26
|
+
headerBackButtonDisplayMode: 'minimal',
|
|
27
|
+
};
|
|
28
|
+
const mergedScreenOptions = typeof screenOptions === 'function'
|
|
29
|
+
? (args) => ({
|
|
30
|
+
...defaults,
|
|
31
|
+
...screenOptions(args),
|
|
32
|
+
})
|
|
33
|
+
: { ...defaults, ...screenOptions };
|
|
34
|
+
return _jsx(Stack, { screenOptions: mergedScreenOptions, ...props });
|
|
35
|
+
}
|
|
36
|
+
ThemedStack.displayName = 'ThemedStack';
|
|
37
|
+
//# sourceMappingURL=themed-stack.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"themed-stack.js","sourceRoot":"","sources":["../../../components/navigation/themed-stack.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAIvC;;;;;;;;;;;;;;;GAeG;AACH,MAAM,UAAU,WAAW,CAAC,EAAE,aAAa,EAAE,GAAG,KAAK,EAAc;IACjE,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,MAAM,QAAQ,GAAG;QACf,WAAW,EAAE,EAAE,eAAe,EAAE,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,EAAE;QAChE,eAAe,EAAE,KAAK,CAAC,SAAS;QAChC,iBAAiB,EAAE,IAAI;QACvB,2BAA2B,EAAE,SAAkB;KAChD,CAAC;IAEF,MAAM,mBAAmB,GACvB,OAAO,aAAa,KAAK,UAAU;QACjC,CAAC,CAAC,CAAC,IAAmE,EAAE,EAAE,CAAC,CAAC;YACxE,GAAG,QAAQ;YACX,GAAG,aAAa,CAAC,IAAI,CAAC;SACvB,CAAC;QACJ,CAAC,CAAC,EAAE,GAAG,QAAQ,EAAE,GAAG,aAAa,EAAE,CAAC;IAExC,OAAO,KAAC,KAAK,IAAC,aAAa,EAAE,mBAAmB,KAAM,KAAK,GAAI,CAAC;AAClE,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/shared/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,kBAAkB,EAClB,yBAAyB,EACzB,sBAAsB,EACtB,uBAAuB,GACxB,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/shared/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC"}
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import type { ViewStyle, StyleProp, AccessibilityRole } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* Base props shared by all components.
|
|
4
|
+
*
|
|
5
|
+
* @example
|
|
6
|
+
* ```tsx
|
|
7
|
+
* <MyComponent
|
|
8
|
+
* testID="my-component"
|
|
9
|
+
* style={{ marginTop: 16 }}
|
|
10
|
+
* />
|
|
11
|
+
* ```
|
|
12
|
+
*/
|
|
13
|
+
export interface BaseComponentProps {
|
|
14
|
+
/** Test identifier for e2e testing frameworks */
|
|
15
|
+
testID?: string;
|
|
16
|
+
/** Additional styles to apply to the component's root view */
|
|
17
|
+
style?: StyleProp<ViewStyle>;
|
|
18
|
+
}
|
|
19
|
+
/**
|
|
20
|
+
* Props for interactive components (buttons, links, pressable tiles).
|
|
21
|
+
* Extends BaseComponentProps with interaction and accessibility support.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* ```tsx
|
|
25
|
+
* <InteractiveComponent
|
|
26
|
+
* onPress={() => handlePress()}
|
|
27
|
+
* disabled={isLoading}
|
|
28
|
+
* accessibilityLabel="Submit form"
|
|
29
|
+
* accessibilityHint="Submits the registration form"
|
|
30
|
+
* />
|
|
31
|
+
* ```
|
|
32
|
+
*/
|
|
33
|
+
export interface InteractiveComponentProps extends BaseComponentProps {
|
|
34
|
+
/** Whether the component is disabled and non-interactive */
|
|
35
|
+
disabled?: boolean;
|
|
36
|
+
/** Callback fired when the component is pressed */
|
|
37
|
+
onPress?: () => void;
|
|
38
|
+
/**
|
|
39
|
+
* Accessibility label read by screen readers.
|
|
40
|
+
* Should describe what the element is.
|
|
41
|
+
*/
|
|
42
|
+
accessibilityLabel?: string;
|
|
43
|
+
/**
|
|
44
|
+
* Accessibility hint providing additional context.
|
|
45
|
+
* Should describe what happens when activated.
|
|
46
|
+
*/
|
|
47
|
+
accessibilityHint?: string;
|
|
48
|
+
/** Accessibility role for assistive technologies */
|
|
49
|
+
accessibilityRole?: AccessibilityRole;
|
|
50
|
+
}
|
|
51
|
+
/**
|
|
52
|
+
* Props for components that support loading states.
|
|
53
|
+
*
|
|
54
|
+
* @example
|
|
55
|
+
* ```tsx
|
|
56
|
+
* <Button title="Submit" loading={isSubmitting} />
|
|
57
|
+
* ```
|
|
58
|
+
*/
|
|
59
|
+
export interface LoadableComponentProps {
|
|
60
|
+
/** Whether to show a loading indicator instead of content */
|
|
61
|
+
loading?: boolean;
|
|
62
|
+
}
|
|
63
|
+
/**
|
|
64
|
+
* Props for container components that wrap children.
|
|
65
|
+
*
|
|
66
|
+
* @example
|
|
67
|
+
* ```tsx
|
|
68
|
+
* <Card
|
|
69
|
+
* style={{ margin: 16 }}
|
|
70
|
+
* contentStyle={{ padding: 24 }}
|
|
71
|
+
* >
|
|
72
|
+
* <Typography>Card content</Typography>
|
|
73
|
+
* </Card>
|
|
74
|
+
* ```
|
|
75
|
+
*/
|
|
76
|
+
export interface ContainerComponentProps extends BaseComponentProps {
|
|
77
|
+
/** Child elements to render inside the container */
|
|
78
|
+
children: React.ReactNode;
|
|
79
|
+
/** Styles applied to the inner content wrapper */
|
|
80
|
+
contentStyle?: StyleProp<ViewStyle>;
|
|
81
|
+
}
|
|
82
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../components/shared/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAyB,SAAS,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAEnG;;;;;;;;;;GAUG;AACH,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,8DAA8D;IAC9D,KAAK,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CAC9B;AAED;;;;;;;;;;;;;GAaG;AACH,MAAM,WAAW,yBAA0B,SAAQ,kBAAkB;IACnE,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mDAAmD;IACnD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B;;;OAGG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,oDAAoD;IACpD,iBAAiB,CAAC,EAAE,iBAAiB,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,MAAM,WAAW,sBAAsB;IACrC,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;GAYG;AACH,MAAM,WAAW,uBAAwB,SAAQ,kBAAkB;IACjE,oDAAoD;IACpD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,kDAAkD;IAClD,YAAY,CAAC,EAAE,SAAS,CAAC,SAAS,CAAC,CAAC;CACrC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../components/shared/types.ts"],"names":[],"mappings":""}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { type GestureResponderEvent } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* Blurs the pressed element on web after interaction.
|
|
4
|
+
*
|
|
5
|
+
* Prevents the focus ring from lingering after mouse/pointer clicks.
|
|
6
|
+
* Keyboard-triggered focus is unaffected — the ring only clears when
|
|
7
|
+
* `onPress` fires (i.e. after a click or Enter key), so tabbing to the
|
|
8
|
+
* element still shows the ring as expected.
|
|
9
|
+
*
|
|
10
|
+
* Apply inside every interactive component's `onPress` handler on web:
|
|
11
|
+
* ```tsx
|
|
12
|
+
* onPress={(e) => {
|
|
13
|
+
* blurOnWeb(e);
|
|
14
|
+
* onPress?.(e);
|
|
15
|
+
* }}
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export declare const blurOnWeb: (e: GestureResponderEvent) => void;
|
|
19
|
+
//# sourceMappingURL=utils.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../components/shared/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAEpE;;;;;;;;;;;;;;;GAeG;AACH,eAAO,MAAM,SAAS,GAAI,GAAG,qBAAqB,KAAG,IAIpD,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { Platform } from 'react-native';
|
|
2
|
+
/**
|
|
3
|
+
* Blurs the pressed element on web after interaction.
|
|
4
|
+
*
|
|
5
|
+
* Prevents the focus ring from lingering after mouse/pointer clicks.
|
|
6
|
+
* Keyboard-triggered focus is unaffected — the ring only clears when
|
|
7
|
+
* `onPress` fires (i.e. after a click or Enter key), so tabbing to the
|
|
8
|
+
* element still shows the ring as expected.
|
|
9
|
+
*
|
|
10
|
+
* Apply inside every interactive component's `onPress` handler on web:
|
|
11
|
+
* ```tsx
|
|
12
|
+
* onPress={(e) => {
|
|
13
|
+
* blurOnWeb(e);
|
|
14
|
+
* onPress?.(e);
|
|
15
|
+
* }}
|
|
16
|
+
* ```
|
|
17
|
+
*/
|
|
18
|
+
export const blurOnWeb = (e) => {
|
|
19
|
+
if (Platform.OS === 'web') {
|
|
20
|
+
e.currentTarget?.blur?.();
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
//# sourceMappingURL=utils.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../components/shared/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAA8B,MAAM,cAAc,CAAC;AAEpE;;;;;;;;;;;;;;;GAeG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,CAAwB,EAAQ,EAAE;IAC1D,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QACzB,CAAC,CAAC,aAAqB,EAAE,IAAI,EAAE,EAAE,CAAC;IACrC,CAAC;AACH,CAAC,CAAC"}
|