@kanso-labs/react-native-kanso-ui 0.5.0 → 0.7.0

package/dist/components/navigation-bar/index.d.ts

@@ -0,0 +1,164 @@
+import { NavigationItemProps } from "../../navigation/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/navigation-bar/index.d.ts
+type NavigationBarItemProps = NavigationItemProps;
+type NavigationBarProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The destinations, each a `NavigationBar.Item`. */
+  readonly children?: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The route of the current destination, matched against each
+   * destination's `href`. The match is the selected tab, and draws the
+   * active indicator.
+   */
+  readonly selectedRoute?: string | undefined;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/** The routes a tab navigator hands its tab bar, as both navigators do. */
+type NavigationTabBarProps = Omit<NavigationBarProps, 'children' | 'selectedRoute'> & TabNavigatorProps & {
+  /** Each route's options, by the route's key. */
+  readonly descriptors: Readonly<Partial<Record<string, {
+    readonly options: TabOptions;
+  }>>>;
+  /**
+   * The insets the navigator measured, which the bar measures for itself
+   * instead.
+   */
+  readonly insets?: unknown;
+  /** The navigator's routes, and which of them is focused. */
+  readonly state: {
+    readonly index: number;
+    readonly routes: readonly TabRoute[];
+  };
+};
+/**
+ * What hears a tab bar's events: React Navigation's `navigation` and Expo
+ * Router's `emitter` alike.
+ */
+type TabEmitter = {
+  emit(event: TabEvent): unknown;
+};
+/** The events a tab bar reports, as both navigators name them. */
+type TabEvent = {
+  readonly canPreventDefault: true;
+  readonly target: string;
+  readonly type: 'tabPress';
+} | {
+  readonly target: string;
+  readonly type: 'tabLongPress';
+};
+/**
+ * How a tab bar moves to a tab: through React Navigation's `navigation`, or
+ * through Expo Router's `navigateToTab`.
+ */
+type TabNavigatorProps = {
+  readonly emitter: TabEmitter;
+  readonly navigateToTab: (routeKey: string) => void;
+  readonly navigation?: never;
+} | {
+  readonly emitter?: never;
+  readonly navigateToTab?: never;
+  readonly navigation: TabEmitter & {
+    navigate(name: string, params?: object): void;
+  };
+};
+/**
+ * A tab's options the bar reads, as React Navigation's bottom tabs and Expo
+ * Router's tabs both hand them to a tab bar. Options they take that are not
+ * listed here are left to them.
+ */
+type TabOptions = {
+  /** The tab's name for a screen reader, where it differs from its label. */
+  readonly tabBarAccessibilityLabel?: string | undefined;
+  /**
+   * The badge on the tab's icon. A number, or a string of digits, is the
+   * large badge's count; any other string is the small dot, since a badge
+   * draws a count and nothing else.
+   */
+  readonly tabBarBadge?: number | string | undefined;
+  readonly tabBarButtonTestID?: string | undefined;
+  /** The tab's icon, drawn at the size and in the colour it is handed. */
+  readonly tabBarIcon?: ((props: {
+    readonly color: string;
+    readonly focused: boolean;
+    readonly size: number;
+  }) => ReactNode) | undefined;
+  /** The tab's label, in place of its title. */
+  readonly tabBarLabel?: ((props: {
+    readonly children: string;
+    readonly color: string;
+    readonly focused: boolean;
+    readonly position: 'below-icon' | 'beside-icon';
+  }) => ReactNode) | string | undefined;
+  readonly title?: string | undefined;
+};
+type TabRoute = {
+  readonly key: string;
+  readonly name: string;
+  readonly params?: object | undefined;
+};
+/**
+ * The bar of three to five top-level destinations a compact window keeps at
+ * its bottom edge. Each destination goes to its `href` through the app's
+ * router, see `RouterProvider`.
+ *
+ * ```tsx
+ * <NavigationBar selectedRoute="/first">
+ *   <NavigationBar.Item href="/first" icon={<FirstIcon />}>
+ *     First item
+ *   </NavigationBar.Item>
+ *   <NavigationBar.Item href="/second" icon={<SecondIcon />}>
+ *     Second item
+ *   </NavigationBar.Item>
+ *   <NavigationBar.Item href="/third" icon={<ThirdIcon />}>
+ *     Third item
+ *   </NavigationBar.Item>
+ * </NavigationBar>
+ * ```
+ *
+ * Draw it below the screen's content, at the bottom of the window: it paints
+ * its surface to the bottom edge and keeps its destinations clear of the home
+ * indicator itself. From the medium window size class each destination puts
+ * its label beside its icon, where the bar is wide enough for every label.
+ *
+ * `style`, `ref` and `testID` land on the bar's own view, which is announced
+ * as a tab list.
+ */
+declare function NavigationBar({ children, selectedRoute, style, ...props }: NavigationBarProps): import("react").JSX.Element;
+declare namespace NavigationBar {
+  var Item: typeof NavigationBarItem;
+}
+/**
+ * One destination of a navigation bar: an icon, a label and, while it is the
+ * current one, the active indicator behind the icon. Pressing it calls
+ * `onPress`, then goes to its `href`. Renders nothing of its own outside a
+ * `NavigationBar`, whose `selectedRoute` says whether it is selected.
+ *
+ * `style`, `ref` and `testID` land on the destination's `Pressable`.
+ */
+declare function NavigationBarItem(props: NavigationBarItemProps): import("react").JSX.Element;
+/**
+ * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of
+ * React Navigation's bottom tabs and of Expo Router's `Tabs` alike.
+ *
+ * ```tsx
+ * <Tabs tabBar={(props) => <NavigationTabBar {...props} />}>
+ *   <Tabs.Screen name="index" options={{ tabBarIcon: () => <FirstIcon />, title: 'First item' }} />
+ * </Tabs>
+ * ```
+ *
+ * Each route is a destination, labelled by its `tabBarLabel` or its title,
+ * with the icon `tabBarIcon` draws and the badge `tabBarBadge` asks for, and
+ * the focused route is the selected one. Pressing a destination reports
+ * `tabPress` to the navigator and moves to its route unless a listener
+ * prevents it, and a long press reports `tabLongPress`, as the navigators'
+ * own tab bars do.
+ *
+ * `style`, `ref` and `testID` land on the bar's own view, as on a
+ * `NavigationBar`.
+ */
+declare function NavigationTabBar({ descriptors, emitter, insets: _insets, navigateToTab, navigation, state, ...props }: NavigationTabBarProps): import("react").JSX.Element;
+//#endregion
+export { NavigationBar, NavigationBarItem, type NavigationBarItemProps, type NavigationBarProps, NavigationTabBar, type NavigationTabBarProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/navigation-bar/index.js

@@ -0,0 +1,470 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { NavigationContext, NavigationDestination, NavigationItem, iconColorOf, labelColorOf } from "../../navigation/index.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { use, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation-bar/index.tsx
+const MEASURING_ROOM = 1e4;
+const ICON_SIZE = 24;
+const NO_OPTIONS = {};
+const DIGITS = /^\d+$/u;
+const EDGES = [
+	"bottom",
+	"left",
+	"right"
+];
+const styles = StyleSheet.create({
+	measurer: {
+		height: 0,
+		overflow: "hidden",
+		pointerEvents: "none",
+		position: "absolute",
+		start: 0,
+		top: 0,
+		width: 0
+	},
+	room: {
+		alignItems: "flex-start",
+		width: MEASURING_ROOM
+	},
+	vertical: { alignItems: "stretch" }
+});
+const stylesOf = themedStyles(({ colors, spacing }) => StyleSheet.create({
+	bar: { backgroundColor: colors.surfaceContainer },
+	horizontal: {
+		alignItems: "center",
+		gap: spacing.sm
+	},
+	measured: {
+		flexDirection: "row",
+		gap: spacing.sm
+	},
+	row: {
+		flexDirection: "row",
+		justifyContent: "center",
+		minHeight: 64
+	}
+}));
+/**
+* What the bar tells the navigator and how it moves, from whichever of the
+* two navigators drew it.
+*/
+function actionsOf(emitter, navigateToTab, navigation) {
+	if (navigation !== void 0) return {
+		emit: (event) => navigation.emit(event),
+		go: (route) => {
+			navigation.navigate(route.name, route.params);
+		}
+	};
+	return {
+		emit: (event) => emitter?.emit(event),
+		go: (route) => {
+			navigateToTab?.(route.key);
+		}
+	};
+}
+/**
+* The badge a tab's `tabBarBadge` draws: the count of a number or a string of
+* digits, and the small dot for any other string.
+*/
+function badgeOf(badge) {
+	if (typeof badge === "number") return badge;
+	if (badge === void 0 || badge === "") return;
+	return DIGITS.test(badge) ? Number(badge) : true;
+}
+/**
+* Reports a long press on a tab. Built by a call rather than written inline
+* at the prop, for the reason `widthThen` gives.
+*/
+function longPressThen(actions, route) {
+	return () => {
+		actions.emit({
+			target: route.key,
+			type: "tabLongPress"
+		});
+	};
+}
+/**
+* The bar of three to five top-level destinations a compact window keeps at
+* its bottom edge. Each destination goes to its `href` through the app's
+* router, see `RouterProvider`.
+*
+* ```tsx
+* <NavigationBar selectedRoute="/first">
+*   <NavigationBar.Item href="/first" icon={<FirstIcon />}>
+*     First item
+*   </NavigationBar.Item>
+*   <NavigationBar.Item href="/second" icon={<SecondIcon />}>
+*     Second item
+*   </NavigationBar.Item>
+*   <NavigationBar.Item href="/third" icon={<ThirdIcon />}>
+*     Third item
+*   </NavigationBar.Item>
+* </NavigationBar>
+* ```
+*
+* Draw it below the screen's content, at the bottom of the window: it paints
+* its surface to the bottom edge and keeps its destinations clear of the home
+* indicator itself. From the medium window size class each destination puts
+* its label beside its icon, where the bar is wide enough for every label.
+*
+* `style`, `ref` and `testID` land on the bar's own view, which is announced
+* as a tab list.
+*/
+function NavigationBar(t0) {
+	const $ = c(35);
+	let children;
+	let props;
+	let selectedRoute;
+	let style;
+	if ($[0] !== t0) {
+		({children, selectedRoute, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = props;
+		$[3] = selectedRoute;
+		$[4] = style;
+	} else {
+		children = $[1];
+		props = $[2];
+		selectedRoute = $[3];
+		style = $[4];
+	}
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const sizeClass = useWindowSizeClass();
+	const [room, setRoom] = useState(void 0);
+	const [needed, setNeeded] = useState(void 0);
+	const wide = sizeClass !== "compact";
+	const horizontal = wide && (room === void 0 || needed === void 0 || needed <= room);
+	const t1 = horizontal ? "horizontal" : "vertical";
+	let t2;
+	if ($[5] !== selectedRoute || $[6] !== t1) {
+		t2 = {
+			form: t1,
+			measuring: false,
+			selectedRoute
+		};
+		$[5] = selectedRoute;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	const context = t2;
+	let t3;
+	if ($[8] !== selectedRoute) {
+		t3 = {
+			form: "horizontal",
+			measuring: true,
+			selectedRoute
+		};
+		$[8] = selectedRoute;
+		$[9] = t3;
+	} else t3 = $[9];
+	const measuring = t3;
+	const T0 = View;
+	const t4 = "tablist";
+	const t5 = composeStyles(own.bar, style);
+	const T1 = SafeAreaView;
+	const t6 = EDGES;
+	const T2 = View;
+	let t7;
+	if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = widthThen(setRoom);
+		$[10] = t7;
+	} else t7 = $[10];
+	const t8 = composeStyles(own.row, horizontal ? own.horizontal : styles.vertical);
+	let t9;
+	if ($[11] !== children || $[12] !== context) {
+		t9 = /* @__PURE__ */ jsx(NavigationContext, {
+			value: context,
+			children
+		});
+		$[11] = children;
+		$[12] = context;
+		$[13] = t9;
+	} else t9 = $[13];
+	let t10;
+	if ($[14] !== T2 || $[15] !== t7 || $[16] !== t8 || $[17] !== t9) {
+		t10 = /* @__PURE__ */ jsx(T2, {
+			onLayout: t7,
+			style: t8,
+			children: t9
+		});
+		$[14] = T2;
+		$[15] = t7;
+		$[16] = t8;
+		$[17] = t9;
+		$[18] = t10;
+	} else t10 = $[18];
+	let t11;
+	if ($[19] !== T1 || $[20] !== t10 || $[21] !== t6) {
+		t11 = /* @__PURE__ */ jsx(T1, {
+			edges: t6,
+			children: t10
+		});
+		$[19] = T1;
+		$[20] = t10;
+		$[21] = t6;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== children || $[24] !== measuring || $[25] !== own || $[26] !== setNeeded || $[27] !== wide) {
+		t12 = wide ? /* @__PURE__ */ jsx(View, {
+			"aria-hidden": true,
+			style: styles.measurer,
+			children: /* @__PURE__ */ jsx(View, {
+				style: styles.room,
+				children: /* @__PURE__ */ jsx(View, {
+					onLayout: widthThen(setNeeded),
+					style: own.measured,
+					children: /* @__PURE__ */ jsx(NavigationContext, {
+						value: measuring,
+						children
+					})
+				})
+			})
+		}) : null;
+		$[23] = children;
+		$[24] = measuring;
+		$[25] = own;
+		$[26] = setNeeded;
+		$[27] = wide;
+		$[28] = t12;
+	} else t12 = $[28];
+	let t13;
+	if ($[29] !== T0 || $[30] !== props || $[31] !== t11 || $[32] !== t12 || $[33] !== t5) {
+		t13 = /* @__PURE__ */ jsxs(T0, {
+			role: t4,
+			...props,
+			style: t5,
+			children: [t11, t12]
+		});
+		$[29] = T0;
+		$[30] = props;
+		$[31] = t11;
+		$[32] = t12;
+		$[33] = t5;
+		$[34] = t13;
+	} else t13 = $[34];
+	return t13;
+}
+/**
+* One destination of a navigation bar: an icon, a label and, while it is the
+* current one, the active indicator behind the icon. Pressing it calls
+* `onPress`, then goes to its `href`. Renders nothing of its own outside a
+* `NavigationBar`, whose `selectedRoute` says whether it is selected.
+*
+* `style`, `ref` and `testID` land on the destination's `Pressable`.
+*/
+function NavigationBarItem(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(NavigationItem, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+/**
+* A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of
+* React Navigation's bottom tabs and of Expo Router's `Tabs` alike.
+*
+* ```tsx
+* <Tabs tabBar={(props) => <NavigationTabBar {...props} />}>
+*   <Tabs.Screen name="index" options={{ tabBarIcon: () => <FirstIcon />, title: 'First item' }} />
+* </Tabs>
+* ```
+*
+* Each route is a destination, labelled by its `tabBarLabel` or its title,
+* with the icon `tabBarIcon` draws and the badge `tabBarBadge` asks for, and
+* the focused route is the selected one. Pressing a destination reports
+* `tabPress` to the navigator and moves to its route unless a listener
+* prevents it, and a long press reports `tabLongPress`, as the navigators'
+* own tab bars do.
+*
+* `style`, `ref` and `testID` land on the bar's own view, as on a
+* `NavigationBar`.
+*/
+function NavigationTabBar(t0) {
+	const $ = c(21);
+	let descriptors;
+	let emitter;
+	let navigateToTab;
+	let navigation;
+	let props;
+	let state;
+	if ($[0] !== t0) {
+		const { descriptors: t1, emitter: t2, insets: _insets, navigateToTab: t3, navigation: t4, state: t5, ...t6 } = t0;
+		descriptors = t1;
+		emitter = t2;
+		navigateToTab = t3;
+		navigation = t4;
+		state = t5;
+		props = t6;
+		$[0] = t0;
+		$[1] = descriptors;
+		$[2] = emitter;
+		$[3] = navigateToTab;
+		$[4] = navigation;
+		$[5] = props;
+		$[6] = state;
+	} else {
+		descriptors = $[1];
+		emitter = $[2];
+		navigateToTab = $[3];
+		navigation = $[4];
+		props = $[5];
+		state = $[6];
+	}
+	let T0;
+	let t1;
+	let t2;
+	if ($[7] !== descriptors || $[8] !== emitter || $[9] !== navigateToTab || $[10] !== navigation || $[11] !== props || $[12] !== state.index || $[13] !== state.routes) {
+		const actions = actionsOf(emitter, navigateToTab, navigation);
+		const focused = state.routes[state.index]?.key;
+		T0 = NavigationBar;
+		t1 = props;
+		t2 = state.routes.map((route) => /* @__PURE__ */ jsx(TabDestination, {
+			focused: route.key === focused,
+			onLongPress: longPressThen(actions, route),
+			onPress: pressThen(actions, route, route.key === focused),
+			options: descriptors[route.key]?.options ?? NO_OPTIONS,
+			route
+		}, route.key));
+		$[7] = descriptors;
+		$[8] = emitter;
+		$[9] = navigateToTab;
+		$[10] = navigation;
+		$[11] = props;
+		$[12] = state.index;
+		$[13] = state.routes;
+		$[14] = T0;
+		$[15] = t1;
+		$[16] = t2;
+	} else {
+		T0 = $[14];
+		t1 = $[15];
+		t2 = $[16];
+	}
+	let t3;
+	if ($[17] !== T0 || $[18] !== t1 || $[19] !== t2) {
+		t3 = /* @__PURE__ */ jsx(T0, {
+			...t1,
+			children: t2
+		});
+		$[17] = T0;
+		$[18] = t1;
+		$[19] = t2;
+		$[20] = t3;
+	} else t3 = $[20];
+	return t3;
+}
+/**
+* Moves to a tab once the navigator has heard the press, unless a listener
+* prevented it or the tab is already focused. Built by a call rather than
+* written inline at the prop, for the reason `widthThen` gives.
+*/
+function pressThen(actions, route, focused) {
+	return () => {
+		const event = actions.emit({
+			canPreventDefault: true,
+			target: route.key,
+			type: "tabPress"
+		});
+		if (!focused && !prevented(event)) actions.go(route);
+	};
+}
+function prevented(event) {
+	return typeof event === "object" && event !== null && "defaultPrevented" in event && event.defaultPrevented === true;
+}
+/**
+* One route's destination. Its colours are the destination's own for the
+* form the bar draws, which is why it reads them inside the bar rather than
+* the bar computing them for it.
+*/
+function TabDestination(t0) {
+	const $ = c(21);
+	const { focused, onLongPress, onPress, options, route } = t0;
+	const theme = useTheme();
+	const { form } = use(NavigationContext);
+	const { tabBarLabel } = options;
+	const title = typeof tabBarLabel === "string" ? tabBarLabel : options.title ?? route.name;
+	const t1 = options.tabBarAccessibilityLabel ?? title;
+	let t2;
+	if ($[0] !== options.tabBarBadge) {
+		t2 = badgeOf(options.tabBarBadge);
+		$[0] = options.tabBarBadge;
+		$[1] = t2;
+	} else t2 = $[1];
+	let t3;
+	if ($[2] !== focused || $[3] !== options || $[4] !== theme) {
+		t3 = options.tabBarIcon?.({
+			color: iconColorOf(theme, false, focused),
+			focused,
+			size: ICON_SIZE
+		});
+		$[2] = focused;
+		$[3] = options;
+		$[4] = theme;
+		$[5] = t3;
+	} else t3 = $[5];
+	let t4;
+	if ($[6] !== focused || $[7] !== form || $[8] !== tabBarLabel || $[9] !== theme || $[10] !== title) {
+		t4 = typeof tabBarLabel === "function" ? tabBarLabel({
+			children: title,
+			color: labelColorOf(theme, form, false, focused),
+			focused,
+			position: form === "horizontal" ? "beside-icon" : "below-icon"
+		}) : title;
+		$[6] = focused;
+		$[7] = form;
+		$[8] = tabBarLabel;
+		$[9] = theme;
+		$[10] = title;
+		$[11] = t4;
+	} else t4 = $[11];
+	let t5;
+	if ($[12] !== focused || $[13] !== onLongPress || $[14] !== onPress || $[15] !== options.tabBarButtonTestID || $[16] !== t1 || $[17] !== t2 || $[18] !== t3 || $[19] !== t4) {
+		t5 = /* @__PURE__ */ jsx(NavigationDestination, {
+			"aria-label": t1,
+			badge: t2,
+			icon: t3,
+			onLongPress,
+			onPress,
+			selected: focused,
+			testID: options.tabBarButtonTestID,
+			children: t4
+		});
+		$[12] = focused;
+		$[13] = onLongPress;
+		$[14] = onPress;
+		$[15] = options.tabBarButtonTestID;
+		$[16] = t1;
+		$[17] = t2;
+		$[18] = t3;
+		$[19] = t4;
+		$[20] = t5;
+	} else t5 = $[20];
+	return t5;
+}
+/**
+* Records a view's width, as React Native lays it out. Built by a call
+* rather than written inline at the prop, which is what react-perf's
+* jsx-no-new-function-as-prop is after; the React Compiler memoises the
+* result on its inputs.
+*/
+function widthThen(setWidth) {
+	return (event) => {
+		setWidth(event.nativeEvent.layout.width);
+	};
+}
+NavigationBar.Item = NavigationBarItem;
+//#endregion
+export { NavigationBar, NavigationBarItem, NavigationTabBar };
+
+//# sourceMappingURL=index.js.map