zero-to-app 2.0.2 → 3.0.0
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/components/navigation/index.d.ts +3 -0
- package/dist/components/navigation/index.d.ts.map +1 -1
- package/dist/components/navigation/index.js +5 -1
- package/dist/components/navigation/index.js.map +1 -1
- package/dist/components/navigation/native-header.d.ts +10 -5
- package/dist/components/navigation/native-header.d.ts.map +1 -1
- package/dist/components/navigation/native-header.js +22 -4
- package/dist/components/navigation/native-header.js.map +1 -1
- 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/ui/button.d.ts +5 -7
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/button.js +6 -8
- package/dist/components/ui/button.js.map +1 -1
- package/dist/components/ui/screen.d.ts.map +1 -1
- package/dist/components/ui/screen.js +9 -6
- package/dist/components/ui/screen.js.map +1 -1
- package/dist/hooks/index.d.ts +1 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/index.js +1 -0
- package/dist/hooks/index.js.map +1 -1
- 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/package.json +6 -6
|
@@ -2,6 +2,9 @@ export { AppTabs } from './app-tabs';
|
|
|
2
2
|
export type { AppTabsProps, AppTabConfig, AppTabsExternalLink } from './app-tabs';
|
|
3
3
|
export { NativeHeader } from './native-header';
|
|
4
4
|
export type { NativeHeaderProps } from './native-header';
|
|
5
|
+
export { ThemedStack } from './themed-stack';
|
|
6
|
+
export { Drawer } from './drawer/drawer';
|
|
7
|
+
export type { DrawerProps } from './drawer/drawer';
|
|
5
8
|
export { Sidebar, SidebarItem, SidebarSection, SidebarHeader, SidebarFooter, } from './sidebar';
|
|
6
9
|
export type { SidebarProps, SidebarItemProps, SidebarItemIconConfig, SidebarSectionProps, SidebarSectionIconConfig, SidebarHeaderProps, SidebarFooterProps, } from './sidebar';
|
|
7
10
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/navigation/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,aAAa,EACb,aAAa,GACd,MAAM,WAAW,CAAC;AACnB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,WAAW,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../components/navigation/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAGlF,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAC/C,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAGzD,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,YAAY,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAGnD,OAAO,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,aAAa,EACb,aAAa,GACd,MAAM,WAAW,CAAC;AACnB,YAAY,EACV,YAAY,EACZ,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,EACnB,wBAAwB,EACxB,kBAAkB,EAClB,kBAAkB,GACnB,MAAM,WAAW,CAAC"}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
// Navigation components
|
|
2
2
|
export { AppTabs } from './app-tabs';
|
|
3
|
-
// NativeHeader
|
|
3
|
+
// NativeHeader — screen-level header buttons for iOS (Stack.Toolbar) and Android (headerLeft/headerRight)
|
|
4
4
|
export { NativeHeader } from './native-header';
|
|
5
|
+
// ThemedStack — Stack wrapper with automatic theme token header styling
|
|
6
|
+
export { ThemedStack } from './themed-stack';
|
|
7
|
+
// Drawer — low-level animated side drawer (used by Sidebar and AppTabs)
|
|
8
|
+
export { Drawer } from './drawer/drawer';
|
|
5
9
|
// Sidebar components
|
|
6
10
|
export { Sidebar, SidebarItem, SidebarSection, SidebarHeader, SidebarFooter, } from './sidebar';
|
|
7
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/navigation/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../components/navigation/index.ts"],"names":[],"mappings":"AAAA,wBAAwB;AACxB,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAGrC,0GAA0G;AAC1G,OAAO,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC;AAG/C,wEAAwE;AACxE,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,wEAAwE;AACxE,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AAGzC,qBAAqB;AACrB,OAAO,EACL,OAAO,EACP,WAAW,EACX,cAAc,EACd,aAAa,EACb,aAAa,GACd,MAAM,WAAW,CAAC"}
|
|
@@ -1,20 +1,25 @@
|
|
|
1
1
|
export interface NativeHeaderProps {
|
|
2
|
-
/** SF Symbol name for the right toolbar button */
|
|
2
|
+
/** SF Symbol name for the right toolbar button (iOS only) */
|
|
3
3
|
rightIcon?: string;
|
|
4
4
|
/** Press handler for the right toolbar button */
|
|
5
5
|
onRightPress?: () => void;
|
|
6
|
-
/** SF Symbol name for the left toolbar button */
|
|
6
|
+
/** SF Symbol name for the left toolbar button (iOS only) */
|
|
7
7
|
leftIcon?: string;
|
|
8
8
|
/** Press handler for the left toolbar button */
|
|
9
9
|
onLeftPress?: () => void;
|
|
10
|
+
/** Feather icon name for the right header button (Android only) */
|
|
11
|
+
androidRightIcon?: string;
|
|
12
|
+
/** Feather icon name for the left header button (Android only) */
|
|
13
|
+
androidLeftIcon?: string;
|
|
10
14
|
}
|
|
11
15
|
/**
|
|
12
|
-
* Screen-level native header toolbar for iOS.
|
|
13
|
-
*
|
|
16
|
+
* Screen-level native header toolbar for iOS and Android.
|
|
17
|
+
* iOS: renders SF Symbol buttons via Stack.Toolbar.
|
|
18
|
+
* Android: renders Feather icon buttons via Stack.Screen headerLeft/headerRight.
|
|
14
19
|
* Use inside screen components, not layouts.
|
|
15
20
|
*/
|
|
16
21
|
export declare const NativeHeader: {
|
|
17
|
-
({ rightIcon, onRightPress, leftIcon, onLeftPress, }: NativeHeaderProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
({ rightIcon, onRightPress, leftIcon, onLeftPress, androidRightIcon, androidLeftIcon, }: NativeHeaderProps): import("react/jsx-runtime").JSX.Element | null;
|
|
18
23
|
displayName: string;
|
|
19
24
|
};
|
|
20
25
|
//# sourceMappingURL=native-header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-header.d.ts","sourceRoot":"","sources":["../../../components/navigation/native-header.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"native-header.d.ts","sourceRoot":"","sources":["../../../components/navigation/native-header.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,6DAA6D;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iDAAiD;IACjD,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,mEAAmE;IACnE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kEAAkE;IAClE,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;;;;GAKG;AACH,eAAO,MAAM,YAAY;6FAOtB,iBAAiB;;CAoDnB,CAAC"}
|
|
@@ -1,14 +1,32 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { Platform, Pressable } from 'react-native';
|
|
2
3
|
import { Stack } from 'expo-router';
|
|
3
4
|
import { useTheme } from '../../theme';
|
|
5
|
+
import { renderIcon } from '../../icons';
|
|
4
6
|
/**
|
|
5
|
-
* Screen-level native header toolbar for iOS.
|
|
6
|
-
*
|
|
7
|
+
* Screen-level native header toolbar for iOS and Android.
|
|
8
|
+
* iOS: renders SF Symbol buttons via Stack.Toolbar.
|
|
9
|
+
* Android: renders Feather icon buttons via Stack.Screen headerLeft/headerRight.
|
|
7
10
|
* Use inside screen components, not layouts.
|
|
8
11
|
*/
|
|
9
|
-
export const NativeHeader = ({ rightIcon, onRightPress, leftIcon, onLeftPress, }) => {
|
|
12
|
+
export const NativeHeader = ({ rightIcon, onRightPress, leftIcon, onLeftPress, androidRightIcon, androidLeftIcon, }) => {
|
|
10
13
|
const theme = useTheme();
|
|
11
|
-
|
|
14
|
+
if (Platform.OS === 'ios') {
|
|
15
|
+
return (_jsxs(_Fragment, { children: [rightIcon && (_jsx(Stack.Toolbar, { placement: "right", children: _jsx(Stack.Toolbar.Button, { icon: rightIcon, onPress: onRightPress }) })), leftIcon && (_jsx(Stack.Toolbar, { placement: "left", children: _jsx(Stack.Toolbar.Button, { icon: leftIcon, onPress: onLeftPress, tintColor: theme.onSurface }) }))] }));
|
|
16
|
+
}
|
|
17
|
+
if (Platform.OS === 'android') {
|
|
18
|
+
if (!androidRightIcon && !androidLeftIcon)
|
|
19
|
+
return null;
|
|
20
|
+
return (_jsx(Stack.Screen, { options: {
|
|
21
|
+
...(androidRightIcon && {
|
|
22
|
+
headerRight: () => (_jsx(Pressable, { onPress: onRightPress, style: { padding: 8 }, children: renderIcon(androidRightIcon, 'Feather', 24, theme.onSurface) })),
|
|
23
|
+
}),
|
|
24
|
+
...(androidLeftIcon && {
|
|
25
|
+
headerLeft: () => (_jsx(Pressable, { onPress: onLeftPress, style: { padding: 8 }, children: renderIcon(androidLeftIcon, 'Feather', 24, theme.onSurface) })),
|
|
26
|
+
}),
|
|
27
|
+
} }));
|
|
28
|
+
}
|
|
29
|
+
return null;
|
|
12
30
|
};
|
|
13
31
|
NativeHeader.displayName = 'NativeHeader';
|
|
14
32
|
//# sourceMappingURL=native-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"native-header.js","sourceRoot":"","sources":["../../../components/navigation/native-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;
|
|
1
|
+
{"version":3,"file":"native-header.js","sourceRoot":"","sources":["../../../components/navigation/native-header.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAiBzC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,CAAC,EAC3B,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,eAAe,GACG,EAAE,EAAE;IACtB,MAAM,KAAK,GAAG,QAAQ,EAAE,CAAC;IAEzB,IAAI,QAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;QAC1B,OAAO,CACL,8BACG,SAAS,IAAI,CACZ,KAAC,KAAK,CAAC,OAAO,IAAC,SAAS,EAAC,OAAO,YAC9B,KAAC,KAAK,CAAC,OAAO,CAAC,MAAM,IACnB,IAAI,EAAE,SAAgB,EACtB,OAAO,EAAE,YAAY,GACrB,GACY,CACjB,EACA,QAAQ,IAAI,CACX,KAAC,KAAK,CAAC,OAAO,IAAC,SAAS,EAAC,MAAM,YAC7B,KAAC,KAAK,CAAC,OAAO,CAAC,MAAM,IACnB,IAAI,EAAE,QAAe,EACrB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,KAAK,CAAC,SAAS,GAC1B,GACY,CACjB,IACA,CACJ,CAAC;IACJ,CAAC;IAED,IAAI,QAAQ,CAAC,EAAE,KAAK,SAAS,EAAE,CAAC;QAC9B,IAAI,CAAC,gBAAgB,IAAI,CAAC,eAAe;YAAE,OAAO,IAAI,CAAC;QACvD,OAAO,CACL,KAAC,KAAK,CAAC,MAAM,IACX,OAAO,EAAE;gBACP,GAAG,CAAC,gBAAgB,IAAI;oBACtB,WAAW,EAAE,GAAG,EAAE,CAAC,CACjB,KAAC,SAAS,IAAC,OAAO,EAAE,YAAY,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YACpD,UAAU,CAAC,gBAAgB,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,GACnD,CACb;iBACF,CAAC;gBACF,GAAG,CAAC,eAAe,IAAI;oBACrB,UAAU,EAAE,GAAG,EAAE,CAAC,CAChB,KAAC,SAAS,IAAC,OAAO,EAAE,WAAW,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,CAAC,EAAE,YACnD,UAAU,CAAC,eAAe,EAAE,SAAS,EAAE,EAAE,EAAE,KAAK,CAAC,SAAS,CAAC,GAClD,CACb;iBACF,CAAC;aACH,GACD,CACH,CAAC;IACJ,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,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"}
|
|
@@ -109,14 +109,12 @@ export interface ButtonProps extends Omit<InteractiveComponentProps, 'onPress'>,
|
|
|
109
109
|
backgroundColor?: string;
|
|
110
110
|
/**
|
|
111
111
|
* Button size affecting height.
|
|
112
|
-
* - `
|
|
113
|
-
* - `
|
|
114
|
-
* - `
|
|
115
|
-
*
|
|
116
|
-
* - `xl`: 136dp
|
|
117
|
-
* @default 's'
|
|
112
|
+
* - `small`: 32dp
|
|
113
|
+
* - `medium`: 40dp (default)
|
|
114
|
+
* - `large`: 56dp
|
|
115
|
+
* @default 'medium'
|
|
118
116
|
*/
|
|
119
|
-
size?: '
|
|
117
|
+
size?: 'small' | 'medium' | 'large';
|
|
120
118
|
}
|
|
121
119
|
/**
|
|
122
120
|
* Material Design 3 Button component
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAEL,qBAAqB,EAIrB,IAAI,EAIL,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAIzF;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAClF,eAAO,MAAM,cAAc,8DAA+D,CAAC;AAE3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAAE,sBAAsB;IACrG,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kCAAkC;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB
|
|
1
|
+
{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAEL,qBAAqB,EAIrB,IAAI,EAIL,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAC3D,OAAO,KAAK,EAAE,yBAAyB,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAIzF;;;;;;;;;;;;;;GAcG;AACH,MAAM,WAAW,UAAU;IACzB,8CAA8C;IAC9C,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,uCAAuC;IACvC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,uDAAuD;IACvD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAClF,eAAO,MAAM,cAAc,8DAA+D,CAAC;AAE3F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,WAAY,SAAQ,IAAI,CAAC,yBAAyB,EAAE,SAAS,CAAC,EAAE,sBAAsB;IACrG,wBAAwB;IACxB,KAAK,EAAE,MAAM,CAAC;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IAClD;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,kCAAkC;IAClC,IAAI,CAAC,EAAE,UAAU,CAAC;IAClB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACrC;AAGD;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,0EAkQV,CAAC;AAmDH,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -18,7 +18,7 @@ export const ButtonVariants = ['filled', 'elevated', 'tonal', 'outlined', 'text'
|
|
|
18
18
|
* - outlined: Medium-emphasis with border
|
|
19
19
|
* - text: Low-emphasis actions
|
|
20
20
|
*/
|
|
21
|
-
const Button = forwardRef(({ title, variant = 'filled', loading = false, disabled = false, icon, onPress, iconPosition = 'right', style, testID, accessibilityLabel, accessibilityHint, color, backgroundColor, size = '
|
|
21
|
+
const Button = forwardRef(({ title, variant = 'filled', loading = false, disabled = false, icon, onPress, iconPosition = 'right', style, testID, accessibilityLabel, accessibilityHint, color, backgroundColor, size = 'medium', }, ref) => {
|
|
22
22
|
const theme = useTheme();
|
|
23
23
|
const tokens = theme.tokens;
|
|
24
24
|
// Track hover and focus states (web-only features)
|
|
@@ -44,14 +44,12 @@ const Button = forwardRef(({ title, variant = 'filled', loading = false, disable
|
|
|
44
44
|
}, []);
|
|
45
45
|
// Visual heights in dp per size token
|
|
46
46
|
const sizeMap = {
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
l: 96,
|
|
51
|
-
xl: 136,
|
|
47
|
+
small: 32,
|
|
48
|
+
medium: 40,
|
|
49
|
+
large: 56,
|
|
52
50
|
};
|
|
53
|
-
// default to '
|
|
54
|
-
const visualHeight = sizeMap[size] ?? sizeMap.
|
|
51
|
+
// default to 'medium' if not provided via props
|
|
52
|
+
const visualHeight = sizeMap[size] ?? sizeMap.medium;
|
|
55
53
|
// Ensure a minimum touch target of 48dp
|
|
56
54
|
const touchHeight = Math.max(48, visualHeight);
|
|
57
55
|
// Dynamic styles based on state
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":";AAAA,aAAa;AACb,OAAc,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC/D,OAAO,EACL,iBAAiB,EAEjB,QAAQ,EACR,SAAS,EACT,UAAU,EACV,IAAI,GAIL,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAE,UAAU,EAAoB,MAAM,aAAa,CAAC;AAwC3D,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,CAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../components/ui/button.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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"}
|
|
@@ -16,12 +16,15 @@ import { useTheme } from '../../theme';
|
|
|
16
16
|
export const Screen = ({ children, scrollable = false, variant = 'background', edges = ['bottom'], contentContainerStyle, style, testID, showsVerticalScrollIndicator = true, padded = true, }) => {
|
|
17
17
|
const insets = useSafeAreaInsets();
|
|
18
18
|
const theme = useTheme();
|
|
19
|
-
//
|
|
20
|
-
//
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
19
|
+
// Strip 'bottom' from SafeAreaView edges — we manage bottom padding directly.
|
|
20
|
+
// With NativeTabs on Android, insets.bottom inside a tab screen is 0 (the native tab bar
|
|
21
|
+
// already constrains the content frame), so SafeAreaView's 'bottom' edge would double-apply
|
|
22
|
+
// the nav bar inset. Stripping it and using 0 on Android fixes that bug.
|
|
23
|
+
// On iOS, insets.bottom does not reflect the tab bar height, so we use a fixed 80dp to clear
|
|
24
|
+
// the standard tab bar (~46dp) + home indicator (~34dp).
|
|
25
|
+
const safeAreaEdges = edges.filter((e) => e !== 'bottom');
|
|
26
|
+
const bottomPadding = edges.includes('bottom') ? (Platform.OS === 'ios' ? 100 : 24) : 0;
|
|
27
|
+
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: [
|
|
25
28
|
styles.scrollContent,
|
|
26
29
|
padded && { paddingTop: theme.spacing.xxl },
|
|
27
30
|
{ paddingBottom: bottomPadding },
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
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/hooks/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../hooks/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../hooks/index.ts"],"names":[],"mappings":"AACA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
|
package/dist/hooks/index.js
CHANGED
package/dist/hooks/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../hooks/index.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../hooks/index.ts"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
export interface IsActiveOptions {
|
|
2
|
+
/** Require exact path match instead of startsWith. @default false */
|
|
3
|
+
exact?: boolean;
|
|
4
|
+
}
|
|
5
|
+
export interface RouteNavigation {
|
|
6
|
+
pathname: string;
|
|
7
|
+
isActive: (route: string, options?: IsActiveOptions) => boolean;
|
|
8
|
+
navigateTo: (route: string) => void;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* Provides route-aware navigation helpers for sidebar and nav components.
|
|
12
|
+
* Wraps expo-router's usePathname + useRouter into reusable utilities.
|
|
13
|
+
*
|
|
14
|
+
* @example
|
|
15
|
+
* const { isActive, navigateTo } = useRouteNavigation();
|
|
16
|
+
* <SidebarItem active={isActive('/explore', { exact: true })} onPress={() => navigateTo('/explore')} />
|
|
17
|
+
*/
|
|
18
|
+
export declare function useRouteNavigation(): RouteNavigation;
|
|
19
|
+
//# sourceMappingURL=use-route-navigation.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-route-navigation.d.ts","sourceRoot":"","sources":["../../hooks/use-route-navigation.ts"],"names":[],"mappings":"AAEA,MAAM,WAAW,eAAe;IAC9B,qEAAqE;IACrE,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,eAAe,KAAK,OAAO,CAAC;IAChE,UAAU,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACrC;AAED;;;;;;;GAOG;AACH,wBAAgB,kBAAkB,IAAI,eAAe,CAiBpD"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { usePathname, useRouter } from 'expo-router';
|
|
2
|
+
/**
|
|
3
|
+
* Provides route-aware navigation helpers for sidebar and nav components.
|
|
4
|
+
* Wraps expo-router's usePathname + useRouter into reusable utilities.
|
|
5
|
+
*
|
|
6
|
+
* @example
|
|
7
|
+
* const { isActive, navigateTo } = useRouteNavigation();
|
|
8
|
+
* <SidebarItem active={isActive('/explore', { exact: true })} onPress={() => navigateTo('/explore')} />
|
|
9
|
+
*/
|
|
10
|
+
export function useRouteNavigation() {
|
|
11
|
+
const pathname = usePathname();
|
|
12
|
+
const router = useRouter();
|
|
13
|
+
const isActive = (route, options) => {
|
|
14
|
+
const currentPath = typeof pathname === 'string' ? pathname : '';
|
|
15
|
+
if (options?.exact) {
|
|
16
|
+
return currentPath === route;
|
|
17
|
+
}
|
|
18
|
+
return currentPath === route || currentPath.startsWith(route + '/');
|
|
19
|
+
};
|
|
20
|
+
const navigateTo = (route) => {
|
|
21
|
+
router.push(route);
|
|
22
|
+
};
|
|
23
|
+
return { pathname, isActive, navigateTo };
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=use-route-navigation.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"use-route-navigation.js","sourceRoot":"","sources":["../../hooks/use-route-navigation.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAarD;;;;;;;GAOG;AACH,MAAM,UAAU,kBAAkB;IAChC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAE3B,MAAM,QAAQ,GAAG,CAAC,KAAa,EAAE,OAAyB,EAAW,EAAE;QACrE,MAAM,WAAW,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;QACjE,IAAI,OAAO,EAAE,KAAK,EAAE,CAAC;YACnB,OAAO,WAAW,KAAK,KAAK,CAAC;QAC/B,CAAC;QACD,OAAO,WAAW,KAAK,KAAK,IAAI,WAAW,CAAC,UAAU,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CAAC,KAAa,EAAQ,EAAE;QACzC,MAAM,CAAC,IAAI,CAAC,KAAY,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;AAC5C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "zero-to-app",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"description": "React Native components for building cross-platform apps with Material Design.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "Alex Amayo",
|
|
@@ -75,6 +75,9 @@
|
|
|
75
75
|
"package.json",
|
|
76
76
|
"README.md"
|
|
77
77
|
],
|
|
78
|
+
"scripts": {
|
|
79
|
+
"build": "pnpm exec tsc -p tsconfig.build.json"
|
|
80
|
+
},
|
|
78
81
|
"dependencies": {
|
|
79
82
|
"@material/material-color-utilities": "^0.4.0"
|
|
80
83
|
},
|
|
@@ -108,12 +111,9 @@
|
|
|
108
111
|
"@testing-library/react-native": "^13.3.3",
|
|
109
112
|
"@types/jest": "^30.0.0",
|
|
110
113
|
"@types/react": "~19.2.14",
|
|
111
|
-
"expo-router": "55.0.
|
|
114
|
+
"expo-router": "~55.0.3",
|
|
112
115
|
"jest": "^30.2.0",
|
|
113
116
|
"react-test-renderer": "^19.2.4",
|
|
114
117
|
"typescript": "~5.9.2"
|
|
115
|
-
},
|
|
116
|
-
"scripts": {
|
|
117
|
-
"build": "pnpm exec tsc -p tsconfig.build.json"
|
|
118
118
|
}
|
|
119
|
-
}
|
|
119
|
+
}
|