@kanso-labs/react-native-kanso-ui 0.4.0 → 0.6.0

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

@@ -0,0 +1,494 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useLinkPress } from "../../router/index.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { NavigationContext, NavigationDestination, 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(t0) {
+	const $ = c(8);
+	let href;
+	let onPress;
+	let props;
+	if ($[0] !== t0) {
+		({href, onPress, ...props} = t0);
+		$[0] = t0;
+		$[1] = href;
+		$[2] = onPress;
+		$[3] = props;
+	} else {
+		href = $[1];
+		onPress = $[2];
+		props = $[3];
+	}
+	const { selectedRoute } = use(NavigationContext);
+	const press = useLinkPress(href, onPress);
+	const t1 = selectedRoute !== void 0 && href === selectedRoute;
+	let t2;
+	if ($[4] !== press || $[5] !== props || $[6] !== t1) {
+		t2 = /* @__PURE__ */ jsx(NavigationDestination, {
+			...props,
+			onPress: press,
+			selected: t1
+		});
+		$[4] = press;
+		$[5] = props;
+		$[6] = t1;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/**
+* 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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","Edge","use","useMemo","useState","StyleSheet","View","SafeAreaView","NavigationDestinationProps","useWindowSizeClass","iconColorOf","labelColorOf","NavigationContext","NavigationDestination","useLinkPress","useTheme","composeStyles","themedStyles","NavigationBarItemProps","href","NavigationBarProps","Omit","children","ref","selectedRoute","style","NavigationTabBarProps","TabNavigatorProps","descriptors","Readonly","Partial","Record","options","TabOptions","insets","state","index","routes","TabRoute","TabActions","emit","event","TabEvent","go","route","TabEmitter","canPreventDefault","target","type","emitter","navigateToTab","routeKey","navigation","navigate","name","params","tabBarAccessibilityLabel","tabBarBadge","tabBarButtonTestID","tabBarIcon","props","color","focused","size","tabBarLabel","position","title","key","MEASURING_ROOM","ICON_SIZE","NO_OPTIONS","DIGITS","EDGES","styles","create","measurer","height","overflow","pointerEvents","start","top","width","room","alignItems","vertical","stylesOf","colors","spacing","bar","backgroundColor","surfaceContainer","horizontal","gap","sm","measured","flexDirection","row","justifyContent","minHeight","actionsOf","undefined","badgeOf","badge","test","Number","longPressThen","actions","NavigationBar","t0","$","_c","theme","own","sizeClass","setRoom","needed","setNeeded","wide","t1","const","t2","form","measuring","context","t3","T0","t4","t5","T1","T2","t7","Symbol","for","widthThen","t8","t9","t10","t11","t6","t12","t13","NavigationBarItem","onPress","press","NavigationTabBar","_insets","map","pressThen","prevented","defaultPrevented","TabDestination","onLongPress","setWidth","nativeEvent","layout","Item","_c"],"sources":["../../../src/components/navigation-bar/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  LayoutChangeEvent,\n  StyleProp,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { use, useMemo, useState } from 'react'\nimport { StyleSheet, View } from 'react-native'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationDestinationProps } from '../../navigation'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n} from '../../navigation'\nimport { useLinkPress } from '../../router'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationBar, the navigation bar page's flexible bar: three to\n// five destinations across the bottom of a compact window, on the surface\n// container, 64dp tall. In a compact window each destination is vertical and\n// the destinations share the bar's width equally; from the medium window\n// size class each is the page's horizontal pill, as wide as what it holds,\n// and the group sits centred with the spare width at the bar's ends, 8dp\n// between two pills. The destinations are src/navigation's, which holds the\n// two forms' values.\n//\n// The 8dp between two horizontal pills is the library's own, as on web. The\n// page puts each pill in an item of a fixed width it does not give, and with\n// no space at all the pills met edge to edge.\n//\n// **A bar too narrow for its horizontal form keeps the vertical one.** A\n// horizontal destination is as wide as its icon, its label and 16dp either\n// side, so five of them need far more than the 600dp the medium class starts\n// at, and drawn anyway every label would be cut short the moment the window\n// crossed into it. So from that class the bar draws its destinations a\n// second time, off screen in the horizontal form at their own widths, and\n// draws that form only while the bar is at least as wide as they are. Web\n// measures the labels it cuts short instead, which native has no way to ask.\n// The horizontal form is drawn until the first measurement arrives, so a bar\n// that fits never draws the other form for a frame.\n//\n// The bar paints its surface to the screen's bottom edge, under the home\n// indicator, and keeps its destinations inside the safe area: a\n// `SafeAreaView` pads it by the home indicator and a landscape notch\n// wherever the bar meets them, and by nothing where it does not.\n//\n// The bar is a `tablist` and each destination a `tab`, which is how both\n// platforms' own tab bars are announced. Web's is a landmark of links with\n// the current one marked as the page, which native has no counterpart for.\n// A destination still goes to its `href` through the app's router, see\n// `RouterProvider`. `NavigationTabBar` draws the bar for React Navigation's\n// bottom tabs and Expo Router's tabs instead.\n\ntype NavigationBarItemProps = NavigationDestinationProps & {\n  /**\n   * Where the destination goes, through the app's router, and what the\n   * bar's `selectedRoute` is matched against.\n   */\n  readonly href: string\n}\n\ntype NavigationBarProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations, each a `NavigationBar.Item`. */\n  readonly children?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * The route of the current destination, matched against each\n   * destination's `href`. The match is the selected tab, and draws the\n   * active indicator.\n   */\n  readonly selectedRoute?: string | undefined\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/** The routes a tab navigator hands its tab bar, as both navigators do. */\ntype NavigationTabBarProps = Omit<\n  NavigationBarProps,\n  'children' | 'selectedRoute'\n> &\n  TabNavigatorProps & {\n    /** Each route's options, by the route's key. */\n    readonly descriptors: Readonly<\n      Partial<Record<string, { readonly options: TabOptions }>>\n    >\n    /**\n     * The insets the navigator measured, which the bar measures for itself\n     * instead.\n     */\n    readonly insets?: unknown\n    /** The navigator's routes, and which of them is focused. */\n    readonly state: {\n      readonly index: number\n      readonly routes: readonly TabRoute[]\n    }\n  }\n\n/** What a tab bar's press tells the navigator, and how it moves to a tab. */\ntype TabActions = {\n  readonly emit: (event: TabEvent) => unknown\n  readonly go: (route: TabRoute) => void\n}\n\n/**\n * What hears a tab bar's events: React Navigation's `navigation` and Expo\n * Router's `emitter` alike.\n */\ntype TabEmitter = {\n  emit(event: TabEvent): unknown\n}\n\n/** The events a tab bar reports, as both navigators name them. */\ntype TabEvent =\n  | {\n      readonly canPreventDefault: true\n      readonly target: string\n      readonly type: 'tabPress'\n    }\n  | { readonly target: string; readonly type: 'tabLongPress' }\n\n/**\n * How a tab bar moves to a tab: through React Navigation's `navigation`, or\n * through Expo Router's `navigateToTab`.\n */\ntype TabNavigatorProps =\n  | {\n      readonly emitter: TabEmitter\n      readonly navigateToTab: (routeKey: string) => void\n      readonly navigation?: never\n    }\n  | {\n      readonly emitter?: never\n      readonly navigateToTab?: never\n      readonly navigation: TabEmitter & {\n        navigate(name: string, params?: object): void\n      }\n    }\n\n/**\n * A tab's options the bar reads, as React Navigation's bottom tabs and Expo\n * Router's tabs both hand them to a tab bar. Options they take that are not\n * listed here are left to them.\n */\ntype TabOptions = {\n  /** The tab's name for a screen reader, where it differs from its label. */\n  readonly tabBarAccessibilityLabel?: string | undefined\n  /**\n   * The badge on the tab's icon. A number, or a string of digits, is the\n   * large badge's count; any other string is the small dot, since a badge\n   * draws a count and nothing else.\n   */\n  readonly tabBarBadge?: number | string | undefined\n  readonly tabBarButtonTestID?: string | undefined\n  /** The tab's icon, drawn at the size and in the colour it is handed. */\n  readonly tabBarIcon?:\n    | ((props: {\n        readonly color: string\n        readonly focused: boolean\n        readonly size: number\n      }) => ReactNode)\n    | undefined\n  /** The tab's label, in place of its title. */\n  readonly tabBarLabel?:\n    | ((props: {\n        readonly children: string\n        readonly color: string\n        readonly focused: boolean\n        readonly position: 'below-icon' | 'beside-icon'\n      }) => ReactNode)\n    | string\n    | undefined\n  readonly title?: string | undefined\n}\n\ntype TabRoute = {\n  readonly key: string\n  readonly name: string\n  readonly params?: object | undefined\n}\n\n// Where the destinations are drawn off screen to be measured. Wider than any\n// bar, so each one is measured at its own width rather than squeezed.\nconst MEASURING_ROOM = 10_000\n\n// The size a tab's icon is drawn at, the page's.\nconst ICON_SIZE = 24\n\n// A route its navigator handed no options for.\nconst NO_OPTIONS: TabOptions = {}\n\n// A string of digits, which a badge draws as a count.\nconst DIGITS = /^\\d+$/u\n\n// The bar's sides as well as its bottom, so a landscape notch is cleared too.\n// The top is the screen's.\nconst EDGES: readonly Edge[] = ['bottom', 'left', 'right']\n\nconst styles = StyleSheet.create({\n  // Holds the destinations measured off screen. It has no size and clips what\n  // it holds, so they are laid out and never drawn, and take no touches.\n  measurer: {\n    height: 0,\n    overflow: 'hidden',\n    pointerEvents: 'none',\n    position: 'absolute',\n    start: 0,\n    top: 0,\n    width: 0,\n  },\n  // The room the destinations are measured in, with the row of them at its\n  // start, at the row's own width.\n  room: {\n    alignItems: 'flex-start',\n    width: MEASURING_ROOM,\n  },\n  // The vertical form: each destination its share of the bar's height.\n  vertical: {\n    alignItems: 'stretch',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    bar: {\n      backgroundColor: colors.surfaceContainer,\n    },\n    // The horizontal form: the pills centred, 8dp apart.\n    horizontal: {\n      alignItems: 'center',\n      gap: spacing.sm,\n    },\n    // The destinations, measured in the horizontal form.\n    measured: {\n      flexDirection: 'row',\n      gap: spacing.sm,\n    },\n    // The page's 64dp, a minimum rather than a height, so a larger text size\n    // the device asks for grows the bar rather than cutting the labels off.\n    row: {\n      flexDirection: 'row',\n      justifyContent: 'center',\n      minHeight: 64,\n    },\n  }),\n)\n\n/**\n * What the bar tells the navigator and how it moves, from whichever of the\n * two navigators drew it.\n */\nfunction actionsOf(\n  emitter: TabEmitter | undefined,\n  navigateToTab: ((routeKey: string) => void) | undefined,\n  navigation: TabNavigatorProps['navigation'],\n): TabActions {\n  if (navigation !== undefined) {\n    return {\n      emit: (event) => navigation.emit(event),\n      go: (route) => {\n        navigation.navigate(route.name, route.params)\n      },\n    }\n  }\n  return {\n    emit: (event) => emitter?.emit(event),\n    go: (route) => {\n      navigateToTab?.(route.key)\n    },\n  }\n}\n\n/**\n * The badge a tab's `tabBarBadge` draws: the count of a number or a string of\n * digits, and the small dot for any other string.\n */\nfunction badgeOf(\n  badge: number | string | undefined,\n): boolean | number | undefined {\n  if (typeof badge === 'number') {\n    return badge\n  }\n  if (badge === undefined || badge === '') {\n    return undefined\n  }\n  return DIGITS.test(badge) ? Number(badge) : true\n}\n\n/**\n * Reports a long press on a tab. Built by a call rather than written inline\n * at the prop, for the reason `widthThen` gives.\n */\nfunction longPressThen(actions: TabActions, route: TabRoute) {\n  return () => {\n    actions.emit({ target: route.key, type: 'tabLongPress' })\n  }\n}\n\n/**\n * The bar of three to five top-level destinations a compact window keeps at\n * its bottom edge. Each destination goes to its `href` through the app's\n * router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationBar selectedRoute=\"/first\">\n *   <NavigationBar.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationBar.Item>\n *   <NavigationBar.Item href=\"/third\" icon={<ThirdIcon />}>\n *     Third item\n *   </NavigationBar.Item>\n * </NavigationBar>\n * ```\n *\n * Draw it below the screen's content, at the bottom of the window: it paints\n * its surface to the bottom edge and keeps its destinations clear of the home\n * indicator itself. From the medium window size class each destination puts\n * its label beside its icon, where the bar is wide enough for every label.\n *\n * `style`, `ref` and `testID` land on the bar's own view, which is announced\n * as a tab list.\n */\nfunction NavigationBar({\n  children,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationBarProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const sizeClass = useWindowSizeClass()\n  // The width the destinations have, and the width the horizontal form\n  // takes, while each is known.\n  const [room, setRoom] = useState<number | undefined>(undefined)\n  const [needed, setNeeded] = useState<number | undefined>(undefined)\n\n  const wide = sizeClass !== 'compact'\n  const horizontal =\n    wide && (room === undefined || needed === undefined || needed <= room)\n  const context = useMemo(\n    () => ({\n      form: horizontal ? ('horizontal' as const) : ('vertical' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [horizontal, selectedRoute],\n  )\n  const measuring = useMemo(\n    () => ({ form: 'horizontal' as const, measuring: true, selectedRoute }),\n    [selectedRoute],\n  )\n\n  return (\n    <View\n      role=\"tablist\"\n      {...props}\n      style={composeStyles<ViewStyle>(own.bar, style)}\n    >\n      <SafeAreaView edges={EDGES}>\n        <View\n          onLayout={widthThen(setRoom)}\n          style={composeStyles<ViewStyle>(\n            own.row,\n            horizontal ? own.horizontal : styles.vertical,\n          )}\n        >\n          <NavigationContext value={context}>{children}</NavigationContext>\n        </View>\n      </SafeAreaView>\n      {wide ? (\n        <View aria-hidden style={styles.measurer}>\n          <View style={styles.room}>\n            <View onLayout={widthThen(setNeeded)} style={own.measured}>\n              <NavigationContext value={measuring}>\n                {children}\n              </NavigationContext>\n            </View>\n          </View>\n        </View>\n      ) : null}\n    </View>\n  )\n}\n\n/**\n * One destination of a navigation bar: an icon, a label and, while it is the\n * current one, the active indicator behind the icon. Pressing it calls\n * `onPress`, then goes to its `href`. Renders nothing of its own outside a\n * `NavigationBar`, whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationBarItem({\n  href,\n  onPress,\n  ...props\n}: NavigationBarItemProps) {\n  const { selectedRoute } = use(NavigationContext)\n  const press = useLinkPress(href, onPress)\n\n  return (\n    <NavigationDestination\n      {...props}\n      onPress={press}\n      selected={selectedRoute !== undefined && href === selectedRoute}\n    />\n  )\n}\n\n/**\n * A navigation bar drawing a tab navigator's routes, for the `tabBar` prop of\n * React Navigation's bottom tabs and of Expo Router's `Tabs` alike.\n *\n * ```tsx\n * <Tabs tabBar={(props) => <NavigationTabBar {...props} />}>\n *   <Tabs.Screen name=\"index\" options={{ tabBarIcon: () => <FirstIcon />, title: 'First item' }} />\n * </Tabs>\n * ```\n *\n * Each route is a destination, labelled by its `tabBarLabel` or its title,\n * with the icon `tabBarIcon` draws and the badge `tabBarBadge` asks for, and\n * the focused route is the selected one. Pressing a destination reports\n * `tabPress` to the navigator and moves to its route unless a listener\n * prevents it, and a long press reports `tabLongPress`, as the navigators'\n * own tab bars do.\n *\n * `style`, `ref` and `testID` land on the bar's own view, as on a\n * `NavigationBar`.\n */\nfunction NavigationTabBar({\n  descriptors,\n  emitter,\n  insets: _insets,\n  navigateToTab,\n  navigation,\n  state,\n  ...props\n}: NavigationTabBarProps) {\n  const actions = actionsOf(emitter, navigateToTab, navigation)\n  const focused = state.routes[state.index]?.key\n\n  return (\n    <NavigationBar {...props}>\n      {state.routes.map((route) => (\n        <TabDestination\n          focused={route.key === focused}\n          key={route.key}\n          onLongPress={longPressThen(actions, route)}\n          onPress={pressThen(actions, route, route.key === focused)}\n          options={descriptors[route.key]?.options ?? NO_OPTIONS}\n          route={route}\n        />\n      ))}\n    </NavigationBar>\n  )\n}\n\n/**\n * Moves to a tab once the navigator has heard the press, unless a listener\n * prevented it or the tab is already focused. Built by a call rather than\n * written inline at the prop, for the reason `widthThen` gives.\n */\nfunction pressThen(actions: TabActions, route: TabRoute, focused: boolean) {\n  return () => {\n    const event = actions.emit({\n      canPreventDefault: true,\n      target: route.key,\n      type: 'tabPress',\n    })\n\n    if (!focused && !prevented(event)) {\n      actions.go(route)\n    }\n  }\n}\n\n// Whether a listener prevented an event, as the navigator reports it.\nfunction prevented(event: unknown) {\n  return (\n    typeof event === 'object' &&\n    event !== null &&\n    'defaultPrevented' in event &&\n    event.defaultPrevented === true\n  )\n}\n\n/**\n * One route's destination. Its colours are the destination's own for the\n * form the bar draws, which is why it reads them inside the bar rather than\n * the bar computing them for it.\n */\nfunction TabDestination({\n  focused,\n  onLongPress,\n  onPress,\n  options,\n  route,\n}: {\n  readonly focused: boolean\n  readonly onLongPress: () => void\n  readonly onPress: () => void\n  readonly options: TabOptions\n  readonly route: TabRoute\n}) {\n  const theme = useTheme()\n  const { form } = use(NavigationContext)\n  const { tabBarLabel } = options\n  const title =\n    typeof tabBarLabel === 'string'\n      ? tabBarLabel\n      : (options.title ?? route.name)\n\n  return (\n    <NavigationDestination\n      aria-label={options.tabBarAccessibilityLabel ?? title}\n      badge={badgeOf(options.tabBarBadge)}\n      icon={options.tabBarIcon?.({\n        color: iconColorOf(theme, false, focused),\n        focused,\n        size: ICON_SIZE,\n      })}\n      onLongPress={onLongPress}\n      onPress={onPress}\n      selected={focused}\n      testID={options.tabBarButtonTestID}\n    >\n      {typeof tabBarLabel === 'function'\n        ? tabBarLabel({\n            children: title,\n            color: labelColorOf(theme, form, false, focused),\n            focused,\n            position: form === 'horizontal' ? 'beside-icon' : 'below-icon',\n          })\n        : title}\n    </NavigationDestination>\n  )\n}\n\n/**\n * Records a view's width, as React Native lays it out. Built by a call\n * rather than written inline at the prop, which is what react-perf's\n * jsx-no-new-function-as-prop is after; the React Compiler memoises the\n * result on its inputs.\n */\nfunction widthThen(setWidth: (width: number) => void) {\n  return (event: LayoutChangeEvent) => {\n    setWidth(event.nativeEvent.layout.width)\n  }\n}\n\nNavigationBar.Item = NavigationBarItem\n\nexport type {\n  NavigationBarItemProps,\n  NavigationBarProps,\n  NavigationTabBarProps,\n}\n\nexport { NavigationBar, NavigationBarItem, NavigationTabBar }\n"],"mappings":";;;;;;;;;;;AA8LA,MAAM0E,iBAAiB;AAGvB,MAAMC,YAAY;AAGlB,MAAMC,aAAyB,CAAC;AAGhC,MAAMC,SAAS;AAIf,MAAMC,QAAyB;CAAC;CAAU;CAAQ;AAAO;AAEzD,MAAMC,SAASpE,WAAWqE,OAAO;CAG/BC,UAAU;EACRC,QAAQ;EACRC,UAAU;EACVC,eAAe;EACfb,UAAU;EACVc,OAAO;EACPC,KAAK;EACLC,OAAO;CACT;CAGAC,MAAM;EACJC,YAAY;EACZF,OAAOb;CACT;CAEAgB,UAAU,EACRD,YAAY,UACd;AACF,CAAC;AAED,MAAME,WAAWpE,cAAc,EAAEqE,QAAQC,cACvClF,WAAWqE,OAAO;CAChBc,KAAK,EACHC,iBAAiBH,OAAOI,iBAC1B;CAEAC,YAAY;EACVR,YAAY;EACZS,KAAKL,QAAQM;CACf;CAEAC,UAAU;EACRC,eAAe;EACfH,KAAKL,QAAQM;CACf;CAGAG,KAAK;EACHD,eAAe;EACfE,gBAAgB;EAChBC,WAAW;CACb;AACF,CAAC,CACH;;;;;AAMA,SAASC,UACPlD,SACAC,eACAE,YACY;CACZ,IAAIA,eAAegD,KAAAA,GACjB,OAAO;EACL5D,OAAOC,UAAUW,WAAWZ,KAAKC,KAAK;EACtCE,KAAKC,UAAU;GACbQ,WAAWC,SAAST,MAAMU,MAAMV,MAAMW,MAAM;EAC9C;CACF;CAEF,OAAO;EACLf,OAAOC,UAAUQ,SAAST,KAAKC,KAAK;EACpCE,KAAKC,UAAU;GACbM,gBAAgBN,MAAMuB,GAAG;EAC3B;CACF;AACF;;;;;AAMA,SAASkC,QACPC,OAC8B;CAC9B,IAAI,OAAOA,UAAU,UACnB,OAAOA;CAET,IAAIA,UAAUF,KAAAA,KAAaE,UAAU,IACnC;CAEF,OAAO/B,OAAOgC,KAAKD,KAAK,IAAIE,OAAOF,KAAK,IAAI;AAC9C;;;;;AAMA,SAASG,cAAcC,SAAqB9D,OAAiB;CAC3D,aAAa;EACX8D,QAAQlE,KAAK;GAAEO,QAAQH,MAAMuB;GAAKnB,MAAM;EAAe,CAAC;CAC1D;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAA2D,cAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAxF;CAAA,IAAAsC;CAAA,IAAApC;CAAA,IAAAC;CAAA,IAAAoF,EAAA,OAAAD,IAAA;EAAuB,CAAA,CAAAtF,UAAAE,eAAAC,OAAA,GAAAmC,SAAAgD;EAKFC,EAAA,KAAAD;EAAAC,EAAA,KAAAvF;EAAAuF,EAAA,KAAAjD;EAAAiD,EAAA,KAAArF;EAAAqF,EAAA,KAAApF;CAAA,OAAA;EAAAH,WAAAuF,EAAA;EAAAjD,QAAAiD,EAAA;EAAArF,gBAAAqF,EAAA;EAAApF,QAAAoF,EAAA;CAAA;CACnB,MAAAE,QAAchG,SAAS;CACvB,MAAAiG,MAAY3B,SAAS0B,KAAK;CAC1B,MAAAE,YAAkBxG,mBAAmB;CAGrC,MAAA,CAAAyE,MAAAgC,WAAwB9G,SAA6BgG,KAAAA,CAAS;CAC9D,MAAA,CAAAe,QAAAC,aAA4BhH,SAA6BgG,KAAAA,CAAS;CAElE,MAAAiB,OAAaJ,cAAc;CAC3B,MAAAtB,aACE0B,SAASnC,SAASkB,KAAAA,KAAae,WAAWf,KAAAA,KAAae,UAAUjC;CAGzD,MAAAoC,KAAA3B,aAAc,eAA0B;CAAoB,IAAA6B;CAAA,IAAAX,EAAA,OAAArF,iBAAAqF,EAAA,OAAAS,IAAA;EAD7DE,KAAA;GAAAC,MACCH;GAA4DI,WACvD;GAAKlG;EAElB;EAACqF,EAAA,KAAArF;EAAAqF,EAAA,KAAAS;EAAAT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CALH,MAAAc,UACSH;CAMR,IAAAI;CAAA,IAAAf,EAAA,OAAArF,eAAA;EAEQoG,KAAA;GAAAH,MAAQ;GAAqBC,WAAa;GAAIlG;EAAgB;EAACqF,EAAA,KAAArF;EAAAqF,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CADxE,MAAAa,YACSE;CAKN,MAAAC,KAAAvH;CACM,MAAAwH,KAAA;CAEE,MAAAC,KAAA/G,cAAyBgG,IAAGxB,KAAM/D,KAAK;CAE7C,MAAAuG,KAAAzH;CAAoBiE,MAAAA,KAAAA;CAClB,MAAAyD,KAAA3H;CAAI,IAAA4H;CAAA,IAAArB,EAAA,QAAAsB,OAAAC,IAAA,2BAAA,GAAA;EACOF,KAAAG,UAAUnB,OAAO;EAACL,EAAA,MAAAqB;CAAA,OAAAA,KAAArB,EAAA;CACrB,MAAAyB,KAAAtH,cACLgG,IAAGhB,KACHL,aAAaqB,IAAGrB,aAAclB,OAAMW,QACtC;CAAC,IAAAmD;CAAA,IAAA1B,EAAA,QAAAvF,YAAAuF,EAAA,QAAAc,SAAA;EAEDY,KAAA,oBAAC,mBAAD;GAA0BZ,OAAAA;GAAUrG;EAAlB,CAAA;EAA+CuF,EAAA,MAAAvF;EAAAuF,EAAA,MAAAc;EAAAd,EAAA,MAAA0B;CAAA,OAAAA,KAAA1B,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAoB,MAAApB,EAAA,QAAAqB,MAAArB,EAAA,QAAAyB,MAAAzB,EAAA,QAAA0B,IAAA;EAPnEC,MAAA,oBAAC,IAAD;GACY,UAAAN;GACH,OAAAI;GAKPC,UAAAA;EAPG,CAAA;EAQE1B,EAAA,MAAAoB;EAAApB,EAAA,MAAAqB;EAAArB,EAAA,MAAAyB;EAAAzB,EAAA,MAAA0B;EAAA1B,EAAA,MAAA2B;CAAA,OAAAA,MAAA3B,EAAA;CAAA,IAAA4B;CAAA,IAAA5B,EAAA,QAAAmB,MAAAnB,EAAA,QAAA2B,OAAA3B,EAAA,QAAA6B,IAAA;EATTD,MAAA,oBAAC,IAAD;GAAqBjE,OAAAA;GACnBgE,UAAAA;EADW,CAAA;EAUE3B,EAAA,MAAAmB;EAAAnB,EAAA,MAAA2B;EAAA3B,EAAA,MAAA6B;EAAA7B,EAAA,MAAA4B;CAAA,OAAAA,MAAA5B,EAAA;CAAA,IAAA8B;CAAA,IAAA9B,EAAA,QAAAvF,YAAAuF,EAAA,QAAAa,aAAAb,EAAA,QAAAG,OAAAH,EAAA,QAAAO,aAAAP,EAAA,QAAAQ,MAAA;EACdsB,MAAAtB,OACC,oBAAC,MAAD;GAAM,eAAA;GAAmB,OAAA5C,OAAME;GAC7B,UAAA,oBAAC,MAAD;IAAa,OAAAF,OAAMS;IACjB,UAAA,oBAAC,MAAD;KAAgB,UAAAmD,UAAUjB,SAAS;KAAU,OAAAJ,IAAGlB;KAC9C,UAAA,oBAAC,mBAAD;MAA0B4B,OAAAA;MACvBpG;KADe,CAAA;IADf,CAAA;GADF,CAAA;EADF,CAAA,IADN;EAUOuF,EAAA,MAAAvF;EAAAuF,EAAA,MAAAa;EAAAb,EAAA,MAAAG;EAAAH,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;EAAAR,EAAA,MAAA8B;CAAA,OAAAA,MAAA9B,EAAA;CAAA,IAAA+B;CAAA,IAAA/B,EAAA,QAAAgB,MAAAhB,EAAA,QAAAjD,SAAAiD,EAAA,QAAA4B,OAAA5B,EAAA,QAAA8B,OAAA9B,EAAA,QAAAkB,IAAA;EA1BVa,MAAA,qBAAC,IAAD;GACO,MAAAd;GAAS,GACVlE;GACG,OAAAmE;GAHT,UAAA,CAKEU,KAWCE,GAhBE;;EA2BE9B,EAAA,MAAAgB;EAAAhB,EAAA,MAAAjD;EAAAiD,EAAA,MAAA4B;EAAA5B,EAAA,MAAA8B;EAAA9B,EAAA,MAAAkB;EAAAlB,EAAA,MAAA+B;CAAA,OAAAA,MAAA/B,EAAA;CAAA,OA3BP+B;AA2BO;;;;;;;;;AAYX,SAAAC,kBAAAjC,IAAA;CAAA,MAAAC,IAAAC,EAAA,CAAA;CAAA,IAAA3F;CAAA,IAAA2H;CAAA,IAAAlF;CAAA,IAAAiD,EAAA,OAAAD,IAAA;EAA2B,CAAA,CAAAzF,MAAA2H,SAAA,GAAAlF,SAAAgD;EAIFC,EAAA,KAAAD;EAAAC,EAAA,KAAA1F;EAAA0F,EAAA,KAAAiC;EAAAjC,EAAA,KAAAjD;CAAA,OAAA;EAAAzC,OAAA0F,EAAA;EAAAiC,UAAAjC,EAAA;EAAAjD,QAAAiD,EAAA;CAAA;CACvB,MAAA,EAAArF,kBAA0BtB,IAAIU,iBAAiB;CAC/C,MAAAmI,QAAcjI,aAAaK,MAAM2H,OAAO;CAM1B,MAAAxB,KAAA9F,kBAAkB4E,KAAAA,KAAajF,SAASK;CAAa,IAAAgG;CAAA,IAAAX,EAAA,OAAAkC,SAAAlC,EAAA,OAAAjD,SAAAiD,EAAA,OAAAS,IAAA;EAHjEE,KAAA,oBAAC,uBAAD;GAAsB,GAChB5D;GACKmF,SAAAA;GACC,UAAAzB;EAAqD,CAAA;EAC/DT,EAAA,KAAAkC;EAAAlC,EAAA,KAAAjD;EAAAiD,EAAA,KAAAS;EAAAT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,OAJFW;AAIE;;;;;;;;;;;;;;;;;;;;;AAwBN,SAAAwB,iBAAApC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAlF;CAAA,IAAAqB;CAAA,IAAAC;CAAA,IAAAE;CAAA,IAAAQ;CAAA,IAAAzB;CAAA,IAAA0E,EAAA,OAAAD,IAAA;EAA0B,MAAA,EAAAhF,aAAA0F,IAAArE,SAAAuE,IAAAtF,QAAA+G,SAAA/F,eAAA0E,IAAAxE,YAAA0E,IAAA3F,OAAA4F,IAAA,GAAAW,OAAA9B;EAAAhF,cAAA0F;EAAArE,UAAAuE;EAAAtE,gBAAA0E;EAAAxE,aAAA0E;EAAA3F,QAAA4F;EAAAnE,QAAA8E;EAQF7B,EAAA,KAAAD;EAAAC,EAAA,KAAAjF;EAAAiF,EAAA,KAAA5D;EAAA4D,EAAA,KAAA3D;EAAA2D,EAAA,KAAAzD;EAAAyD,EAAA,KAAAjD;EAAAiD,EAAA,KAAA1E;CAAA,OAAA;EAAAP,cAAAiF,EAAA;EAAA5D,UAAA4D,EAAA;EAAA3D,gBAAA2D,EAAA;EAAAzD,aAAAyD,EAAA;EAAAjD,QAAAiD,EAAA;EAAA1E,QAAA0E,EAAA;CAAA;CAAA,IAAAgB;CAAA,IAAAP;CAAA,IAAAE;CAAA,IAAAX,EAAA,OAAAjF,eAAAiF,EAAA,OAAA5D,WAAA4D,EAAA,OAAA3D,iBAAA2D,EAAA,QAAAzD,cAAAyD,EAAA,QAAAjD,SAAAiD,EAAA,QAAA1E,MAAAC,SAAAyE,EAAA,QAAA1E,MAAAE,QAAA;EACtB,MAAAqE,UAAgBP,UAAUlD,SAASC,eAAeE,UAAU;EAC5D,MAAAU,UAAgB3B,MAAKE,OAAQF,MAAKC,MAAY,EAAA+B;EAG3C0D,KAAAlB;EAAkB/C,KAAAA;EAChB4D,KAAArF,MAAKE,OAAO6G,KAAKtG,UAChB,oBAAC,gBAAD;GACW,SAAAA,MAAKuB,QAASL;GAEV,aAAA2C,cAAcC,SAAS9D,KAAK;GAChC,SAAAuG,UAAUzC,SAAS9D,OAAOA,MAAKuB,QAASL,OAAO;GAC/C,SAAAlC,YAAYgB,MAAKuB,IAAc,EAAAnC,WAA/BsC;GACF1B;EAAK,GAJPA,MAAKuB,GAIE,CAEf;EAAC0C,EAAA,KAAAjF;EAAAiF,EAAA,KAAA5D;EAAA4D,EAAA,KAAA3D;EAAA2D,EAAA,MAAAzD;EAAAyD,EAAA,MAAAjD;EAAAiD,EAAA,MAAA1E,MAAAC;EAAAyE,EAAA,MAAA1E,MAAAE;EAAAwE,EAAA,MAAAgB;EAAAhB,EAAA,MAAAS;EAAAT,EAAA,MAAAW;CAAA,OAAA;EAAAK,KAAAhB,EAAA;EAAAS,KAAAT,EAAA;EAAAW,KAAAX,EAAA;CAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAAgB,MAAAhB,EAAA,QAAAS,MAAAT,EAAA,QAAAW,IAAA;EAVJI,KAAA,oBAAC,IAAD;GAAc,GAAKhE;GAChB4D,UAAAA;EADW,CAAA;EAWEX,EAAA,MAAAgB;EAAAhB,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,OAXhBe;AAWgB;;;;;;AASpB,SAASuB,UAAUzC,SAAqB9D,OAAiBkB,SAAkB;CACzE,aAAa;EACX,MAAMrB,QAAQiE,QAAQlE,KAAK;GACzBM,mBAAmB;GACnBC,QAAQH,MAAMuB;GACdnB,MAAM;EACR,CAAC;EAED,IAAI,CAACc,WAAW,CAACsF,UAAU3G,KAAK,GAC9BiE,QAAQ/D,GAAGC,KAAK;CAEpB;AACF;AAGA,SAASwG,UAAU3G,OAAgB;CACjC,OACE,OAAOA,UAAU,YACjBA,UAAU,QACV,sBAAsBA,SACtBA,MAAM4G,qBAAqB;AAE/B;;;;;;AAOA,SAAAC,eAAA1C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAwB,MAAA,EAAAhD,SAAAyF,aAAAT,SAAA9G,SAAAY,UAAAgE;CAatB,MAAAG,QAAchG,SAAS;CACvB,MAAA,EAAA0G,SAAiBvH,IAAIU,iBAAiB;CACtC,MAAA,EAAAoD,gBAAwBhC;CACxB,MAAAkC,QACE,OAAOF,gBAAgB,WAAvBA,cAEKhC,QAAOkC,SAAUtB,MAAKU;CAIb,MAAAgE,KAAAtF,QAAOwB,4BAAPU;CAAyC,IAAAsD;CAAA,IAAAX,EAAA,OAAA7E,QAAAyB,aAAA;EAC9C+D,KAAAnB,QAAQrE,QAAOyB,WAAY;EAACoD,EAAA,KAAA7E,QAAAyB;EAAAoD,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,OAAA/C,WAAA+C,EAAA,OAAA7E,WAAA6E,EAAA,OAAAE,OAAA;EAC7Ba,KAAA5F,QAAO2B,aAAc;GAAAE,OAClBnD,YAAYqG,OAAO,OAAOjD,OAAO;GAACA;GAAAC,MAEnCM;EACR,CAAC;EAACwC,EAAA,KAAA/C;EAAA+C,EAAA,KAAA7E;EAAA6E,EAAA,KAAAE;EAAAF,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,OAAA/C,WAAA+C,EAAA,OAAAY,QAAAZ,EAAA,OAAA7C,eAAA6C,EAAA,OAAAE,SAAAF,EAAA,QAAA3C,OAAA;EAMD4D,KAAA,OAAO9D,gBAAgB,aACpBA,YAAY;GAAA1C,UACA4C;GAAKL,OACRlD,aAAaoG,OAAOU,MAAM,OAAO3D,OAAO;GAACA;GAAAG,UAEtCwD,SAAS,eAAT,gBAAA;EACZ,CACI,IAPPvD;EAOQ2C,EAAA,KAAA/C;EAAA+C,EAAA,KAAAY;EAAAZ,EAAA,KAAA7C;EAAA6C,EAAA,KAAAE;EAAAF,EAAA,MAAA3C;EAAA2C,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,IAAAkB;CAAA,IAAAlB,EAAA,QAAA/C,WAAA+C,EAAA,QAAA0C,eAAA1C,EAAA,QAAAiC,WAAAjC,EAAA,QAAA7E,QAAA0B,sBAAAmD,EAAA,QAAAS,MAAAT,EAAA,QAAAW,MAAAX,EAAA,QAAAe,MAAAf,EAAA,QAAAiB,IAAA;EApBXC,KAAA,oBAAC,uBAAD;GACc,cAAAT;GACL,OAAAE;GACD,MAAAI;GAKO2B;GACJT;GACChF,UAAAA;GACF,QAAA9B,QAAO0B;GAEdoE,UAAAA;EAbmB,CAAA;EAqBEjB,EAAA,MAAA/C;EAAA+C,EAAA,MAAA0C;EAAA1C,EAAA,MAAAiC;EAAAjC,EAAA,MAAA7E,QAAA0B;EAAAmD,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAe;EAAAf,EAAA,MAAAiB;EAAAjB,EAAA,MAAAkB;CAAA,OAAAA,KAAAlB,EAAA;CAAA,OArBxBkB;AAqBwB;;;;;;;AAU5B,SAASM,UAAUmB,UAAmC;CACpD,QAAQ/G,UAA6B;EACnC+G,SAAS/G,MAAMgH,YAAYC,OAAOzE,KAAK;CACzC;AACF;AAEA0B,cAAcgD,OAAOd"}

package/dist/components/number-field/index.js

@@ -1,11 +1,11 @@
 import { IconStyleContext } from "../../glyphs/icon-style.js";
-import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useFieldValidation } from "../../form/index.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { withOpacity } from "../../theme/color.js";
 import { localeOf } from "../../number/locale.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { MinusGlyph, PlusGlyph } from "../../glyphs/index.js";
+import { useFieldValidation } from "../../form/index.js";
 import { IconButton } from "../icon-button/index.js";
 import { FieldBox, FieldInput, FieldMessage, describedBy, useFieldFocus } from "../../field/index.js";
 import { useNumberFieldState } from "../../number/state.js";