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

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","NavigationItemProps","useWindowSizeClass","iconColorOf","labelColorOf","NavigationContext","NavigationDestination","NavigationItem","useTheme","composeStyles","themedStyles","NavigationBarItemProps","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","NavigationTabBar","_insets","map","pressThen","prevented","defaultPrevented","TabDestination","onLongPress","onPress","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 { NavigationItemProps } from '../../navigation'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n  NavigationItem,\n} from '../../navigation'\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 = NavigationItemProps\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(props: NavigationBarItemProps) {\n  return <NavigationItem {...props} />\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":"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"}

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

@@ -0,0 +1,68 @@
+import { NavigationItemProps } from "../../navigation/index.js";
+import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/navigation-rail/index.d.ts
+type NavigationRailItemProps = NavigationItemProps;
+type NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {
+  /** The destinations: `NavigationRail.Item`s. */
+  readonly children?: ReactNode;
+  /**
+   * What the rail draws above its destinations: a menu button that expands
+   * it, or a floating action button.
+   */
+  readonly header?: ReactNode;
+  /**
+   * Whether the rail is in its expanded form, each destination a pill with
+   * its label beside the icon, rather than collapsed with the label under it.
+   * @default false
+   */
+  readonly isExpanded?: boolean;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * The route of the current destination, matched against each
+   * destination's `href`. The match is selected and draws the active
+   * indicator.
+   */
+  readonly selectedRoute?: string;
+  readonly style?: StyleProp<ViewStyle>;
+};
+/**
+ * The column of top-level destinations a medium or wider window keeps at its
+ * leading edge, collapsed or, with `isExpanded`, expanded. Each destination
+ * goes to its `href` through the app's router, see `RouterProvider`.
+ *
+ * ```tsx
+ * <NavigationRail selectedRoute="/first">
+ *   <NavigationRail.Item href="/first" icon={<FirstIcon />}>
+ *     First item
+ *   </NavigationRail.Item>
+ *   <NavigationRail.Item href="/second" icon={<SecondIcon />}>
+ *     Second item
+ *   </NavigationRail.Item>
+ * </NavigationRail>
+ * ```
+ *
+ * Draw it at the leading edge of a row holding the screen's content, which
+ * gives it its height: it paints its surface to the screen's edges and keeps
+ * its destinations clear of the status bar, the home indicator and a notch
+ * itself.
+ *
+ * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`
+ * land on the rail's own view, its surface.
+ */
+declare function NavigationRail({ 'aria-label': ariaLabel, children, header, isExpanded, selectedRoute, style, ...props }: NavigationRailProps): import("react").JSX.Element;
+declare namespace NavigationRail {
+  var Item: typeof NavigationRailItem;
+}
+/**
+ * One destination of a navigation rail: an icon, a label and, while it is
+ * the current one, the active indicator. Pressing it calls `onPress`, then
+ * goes to its `href`. Renders nothing of its own outside a `NavigationRail`,
+ * whose `selectedRoute` says whether it is selected.
+ *
+ * `style`, `ref` and `testID` land on the destination's `Pressable`.
+ */
+declare function NavigationRailItem(props: NavigationRailItemProps): import("react").JSX.Element;
+//#endregion
+export { NavigationRail, NavigationRailItem, type NavigationRailItemProps, type NavigationRailProps };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1,294 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { NavigationContext, NavigationItem } from "../../navigation/index.js";
+import { c } from "react/compiler-runtime";
+import { I18nManager, ScrollView, StyleSheet, View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+import { SafeAreaView } from "react-native-safe-area-context";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/navigation-rail/index.tsx
+const COLLAPSED_WIDTH = 96;
+const EXPANDED_MIN_WIDTH = 220;
+const EXPANDED_MAX_WIDTH = 360;
+const TOP_PADDING = 44;
+const EXPANDED_PADDING = 20;
+const RING_REACH = 4;
+const styles = StyleSheet.create({
+	content: { flexShrink: 0 },
+	destinations: {
+		alignSelf: "stretch",
+		flexBasis: "auto",
+		flexGrow: 1,
+		flexShrink: 1,
+		margin: -4
+	},
+	inset: {
+		flexGrow: 1,
+		flexShrink: 1
+	}
+});
+const stylesOf = themedStyles(({ colors, spacing }) => StyleSheet.create({
+	collapsed: {
+		alignItems: "center",
+		flexGrow: 1,
+		flexShrink: 1,
+		paddingBottom: spacing.xl,
+		paddingTop: TOP_PADDING,
+		width: COLLAPSED_WIDTH
+	},
+	collapsedList: {
+		alignItems: "center",
+		gap: spacing.xs,
+		padding: RING_REACH
+	},
+	expanded: {
+		flexGrow: 1,
+		flexShrink: 1,
+		maxWidth: EXPANDED_MAX_WIDTH,
+		minWidth: EXPANDED_MIN_WIDTH,
+		paddingBottom: spacing.xl,
+		paddingHorizontal: EXPANDED_PADDING,
+		paddingTop: TOP_PADDING
+	},
+	expandedList: {
+		alignItems: "flex-start",
+		padding: RING_REACH
+	},
+	header: {
+		alignItems: "center",
+		marginBottom: spacing.xxxl - spacing.xs
+	},
+	headerExpanded: {
+		alignItems: "flex-start",
+		alignSelf: "stretch",
+		marginBottom: spacing.xxxl,
+		paddingStart: spacing.sm
+	},
+	rail: {
+		backgroundColor: colors.surface,
+		flexDirection: "row",
+		flexShrink: 0,
+		overflow: "hidden"
+	}
+}));
+function edgesOf() {
+	return [
+		"bottom",
+		I18nManager.isRTL ? "right" : "left",
+		"top"
+	];
+}
+/**
+* The column of top-level destinations a medium or wider window keeps at its
+* leading edge, collapsed or, with `isExpanded`, expanded. Each destination
+* goes to its `href` through the app's router, see `RouterProvider`.
+*
+* ```tsx
+* <NavigationRail selectedRoute="/first">
+*   <NavigationRail.Item href="/first" icon={<FirstIcon />}>
+*     First item
+*   </NavigationRail.Item>
+*   <NavigationRail.Item href="/second" icon={<SecondIcon />}>
+*     Second item
+*   </NavigationRail.Item>
+* </NavigationRail>
+* ```
+*
+* Draw it at the leading edge of a row holding the screen's content, which
+* gives it its height: it paints its surface to the screen's edges and keeps
+* its destinations clear of the status bar, the home indicator and a notch
+* itself.
+*
+* `aria-label` names the destinations' tab list. `style`, `ref` and `testID`
+* land on the rail's own view, its surface.
+*/
+function NavigationRail(t0) {
+	const $ = c(43);
+	let ariaLabel;
+	let children;
+	let header;
+	let props;
+	let selectedRoute;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({"aria-label": ariaLabel, children, header, isExpanded: t1, selectedRoute, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = ariaLabel;
+		$[2] = children;
+		$[3] = header;
+		$[4] = props;
+		$[5] = selectedRoute;
+		$[6] = style;
+		$[7] = t1;
+	} else {
+		ariaLabel = $[1];
+		children = $[2];
+		header = $[3];
+		props = $[4];
+		selectedRoute = $[5];
+		style = $[6];
+		t1 = $[7];
+	}
+	const isExpanded = t1 === void 0 ? false : t1;
+	const theme = useTheme();
+	const own = stylesOf(theme);
+	const reduceMotion = useReducedMotion();
+	const width = useSharedValue(void 0);
+	const t2 = isExpanded ? "expanded" : "collapsed";
+	let t3;
+	if ($[8] !== selectedRoute || $[9] !== t2) {
+		t3 = {
+			form: t2,
+			measuring: false,
+			selectedRoute
+		};
+		$[8] = selectedRoute;
+		$[9] = t2;
+		$[10] = t3;
+	} else t3 = $[10];
+	const context = t3;
+	const widthStyle = useAnimatedStyle(() => {
+		"worklet";
+		const current = width.get();
+		return current === void 0 ? {} : { width: current };
+	});
+	const t4 = Animated;
+	const t5 = composeStyles(own.rail, widthStyle, style);
+	const T0 = View;
+	let t6;
+	if ($[11] !== reduceMotion || $[12] !== theme || $[13] !== width) {
+		t6 = widthThen(width, reduceMotion, timingOf(theme));
+		$[11] = reduceMotion;
+		$[12] = theme;
+		$[13] = width;
+		$[14] = t6;
+	} else t6 = $[14];
+	const t7 = styles;
+	const T1 = SafeAreaView;
+	let t8;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t8 = edgesOf();
+		$[15] = t8;
+	} else t8 = $[15];
+	const t9 = styles;
+	const T2 = View;
+	const t10 = isExpanded ? own.expanded : own.collapsed;
+	const t11 = header === void 0 ? null : /* @__PURE__ */ jsx(View, {
+		style: composeStyles(own.header, isExpanded ? own.headerExpanded : void 0),
+		children: header
+	});
+	const t12 = isExpanded ? own.expandedList : own.collapsedList;
+	let t13;
+	if ($[16] !== children || $[17] !== context) {
+		t13 = /* @__PURE__ */ jsx(NavigationContext, {
+			value: context,
+			children
+		});
+		$[16] = children;
+		$[17] = context;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== ariaLabel || $[20] !== t12 || $[21] !== t13) {
+		t14 = /* @__PURE__ */ jsx(ScrollView, {
+			"aria-label": ariaLabel,
+			contentContainerStyle: t12,
+			role: "tablist",
+			style: styles.destinations,
+			children: t13
+		});
+		$[19] = ariaLabel;
+		$[20] = t12;
+		$[21] = t13;
+		$[22] = t14;
+	} else t14 = $[22];
+	let t15;
+	if ($[23] !== T2 || $[24] !== t10 || $[25] !== t11 || $[26] !== t14) {
+		t15 = /* @__PURE__ */ jsxs(T2, {
+			style: t10,
+			children: [t11, t14]
+		});
+		$[23] = T2;
+		$[24] = t10;
+		$[25] = t11;
+		$[26] = t14;
+		$[27] = t15;
+	} else t15 = $[27];
+	let t16;
+	if ($[28] !== T1 || $[29] !== t15 || $[30] !== t8 || $[31] !== t9.inset) {
+		t16 = /* @__PURE__ */ jsx(T1, {
+			edges: t8,
+			style: t9.inset,
+			children: t15
+		});
+		$[28] = T1;
+		$[29] = t15;
+		$[30] = t8;
+		$[31] = t9.inset;
+		$[32] = t16;
+	} else t16 = $[32];
+	let t17;
+	if ($[33] !== T0 || $[34] !== t16 || $[35] !== t6 || $[36] !== t7.content) {
+		t17 = /* @__PURE__ */ jsx(T0, {
+			onLayout: t6,
+			style: t7.content,
+			children: t16
+		});
+		$[33] = T0;
+		$[34] = t16;
+		$[35] = t6;
+		$[36] = t7.content;
+		$[37] = t17;
+	} else t17 = $[37];
+	let t18;
+	if ($[38] !== props || $[39] !== t17 || $[40] !== t4.View || $[41] !== t5) {
+		t18 = /* @__PURE__ */ jsx(t4.View, {
+			...props,
+			style: t5,
+			children: t17
+		});
+		$[38] = props;
+		$[39] = t17;
+		$[40] = t4.View;
+		$[41] = t5;
+		$[42] = t18;
+	} else t18 = $[42];
+	return t18;
+}
+/**
+* One destination of a navigation rail: an icon, a label and, while it is
+* the current one, the active indicator. Pressing it calls `onPress`, then
+* goes to its `href`. Renders nothing of its own outside a `NavigationRail`,
+* whose `selectedRoute` says whether it is selected.
+*
+* `style`, `ref` and `testID` land on the destination's `Pressable`.
+*/
+function NavigationRailItem(props) {
+	const $ = c(2);
+	let t0;
+	if ($[0] !== props) {
+		t0 = /* @__PURE__ */ jsx(NavigationItem, { ...props });
+		$[0] = props;
+		$[1] = t0;
+	} else t0 = $[1];
+	return t0;
+}
+function timingOf({ motion }) {
+	return {
+		duration: motion.durationLong2,
+		easing: Easing.bezier(...motion.easingEmphasized)
+	};
+}
+function widthThen(width, reduceMotion, timing) {
+	return (event) => {
+		const next = event.nativeEvent.layout.width;
+		width.set(width.get() === void 0 || reduceMotion ? next : withTiming(next, timing));
+	};
+}
+NavigationRail.Item = NavigationRailItem;
+//#endregion
+export { NavigationRail, NavigationRailItem };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","LayoutChangeEvent","StyleProp","ViewProps","ViewStyle","AnimatedStyle","SharedValue","Edge","useMemo","I18nManager","ScrollView","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","SafeAreaView","NavigationItemProps","ResolvedTheme","NavigationContext","NavigationItem","useTheme","composeStyles","themedStyles","NavigationRailItemProps","NavigationRailProps","Omit","children","header","isExpanded","ref","selectedRoute","style","Timing","duration","easing","ReturnType","bezier","COLLAPSED_WIDTH","EXPANDED_MIN_WIDTH","EXPANDED_MAX_WIDTH","TOP_PADDING","EXPANDED_PADDING","RING_REACH","styles","create","content","flexShrink","destinations","alignSelf","flexBasis","flexGrow","margin","inset","stylesOf","colors","spacing","collapsed","alignItems","paddingBottom","xl","paddingTop","width","collapsedList","gap","xs","padding","expanded","maxWidth","minWidth","paddingHorizontal","expandedList","marginBottom","xxxl","headerExpanded","paddingStart","sm","rail","backgroundColor","surface","flexDirection","overflow","edgesOf","isRTL","NavigationRail","t0","$","_c","ariaLabel","props","t1","undefined","theme","own","reduceMotion","t2","const","t3","form","measuring","context","widthStyle","current","get","t4","t5","T0","t6","widthThen","timingOf","T1","t8","Symbol","for","T2","t10","t11","t12","t13","t14","t15","t16","t9","t17","t7","t18","NavigationRailItem","motion","durationLong2","easingEmphasized","timing","event","next","nativeEvent","layout","set","Item","_c"],"sources":["../../../src/components/navigation-rail/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 { AnimatedStyle, SharedValue } from 'react-native-reanimated'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { useMemo } from 'react'\nimport { I18nManager, ScrollView, StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { NavigationItemProps } from '../../navigation'\nimport type { ResolvedTheme } from '../../theme/scope'\n\nimport { NavigationContext, NavigationItem } from '../../navigation'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's NavigationRail, the navigation rail page's rail, in both its\n// forms: collapsed, a 96dp column of vertical destinations down the leading\n// edge, and expanded, between 220dp and 360dp with each destination the\n// page's 56dp horizontal pill. Both are on the surface role, with their\n// contents 44dp from the top: the first destination, or a header when the\n// rail has one, such as a menu button that expands it, with the first\n// destination 40dp under it. The destinations are src/navigation's, shared\n// with NavigationBar, which holds their values.\n//\n// **The rail widens and narrows** when `isExpanded` changes: its surface\n// moves from one form's width to the other's over `durationLong2` on the\n// emphasized curve, as the active indicator moves, while the destinations\n// take their new form at once and the surface reveals or covers them. Web\n// changes width at once. Under reduced motion it does here too. The width it\n// moves to is the one the new form lays out at, measured, so an expanded\n// rail is as wide as its longest label asks within the page's bounds.\n//\n// The rail paints its surface under the status bar, the home indicator and a\n// landscape notch on its leading side, and keeps its header and destinations\n// inside the safe area: a `SafeAreaView` pads it by the top, the bottom and\n// the leading inset, the left one or under right-to-left the right, wherever\n// the rail meets them. Its trailing side faces the screen's content, so it\n// takes no inset there.\n//\n// The destinations scroll in a block of their own under the header, so a\n// rail shorter than they are scrolls them rather than squashing each below\n// its height, and the header stays where it is. The block is a `tablist` and\n// each destination a `tab`, which is how both platforms announce a set of\n// top-level destinations; the header is outside it, since what it holds is\n// not one of them. Web's rail is a landmark of links, which native has no\n// counterpart for. A destination still goes to its `href` through the app's\n// router, see `RouterProvider`.\n\ntype NavigationRailItemProps = NavigationItemProps\n\ntype NavigationRailProps = Omit<ViewProps, 'children' | 'style'> & {\n  /** The destinations: `NavigationRail.Item`s. */\n  readonly children?: ReactNode\n  /**\n   * What the rail draws above its destinations: a menu button that expands\n   * it, or a floating action button.\n   */\n  readonly header?: ReactNode\n  /**\n   * Whether the rail is in its expanded form, each destination a pill with\n   * its label beside the icon, rather than collapsed with the label under it.\n   * @default false\n   */\n  readonly isExpanded?: boolean\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 selected and draws the active\n   * indicator.\n   */\n  readonly selectedRoute?: string\n  readonly style?: StyleProp<ViewStyle>\n}\n\ntype Timing = {\n  readonly duration: number\n  readonly easing: ReturnType<typeof Easing.bezier>\n}\n\n// The collapsed rail's width, and the expanded rail's bounds.\nconst COLLAPSED_WIDTH = 96\nconst EXPANDED_MIN_WIDTH = 220\nconst EXPANDED_MAX_WIDTH = 360\n\n// The page's 44dp above the contents, header or not, and the 20dp either\n// side of the expanded rail's pills, which fall between two steps of the\n// spacing scale and so are written out.\nconst TOP_PADDING = 44\nconst EXPANDED_PADDING = 20\n\n// How far a destination's focus ring reaches past it: the 2dp offset and the\n// 2dp ring. A scroll view clips what overflows it, so the block the\n// destinations scroll in is padded by this much and pulled back out by as\n// much, which leaves every destination where it was and every ring whole.\nconst RING_REACH = 4\n\nconst styles = StyleSheet.create({\n  // The form being drawn, as wide as it lays out, whatever the surface\n  // around it is moving through.\n  content: {\n    flexShrink: 0,\n  },\n  // The destinations' block, which takes the height the header leaves and\n  // scrolls what does not fit in it.\n  destinations: {\n    alignSelf: 'stretch',\n    flexBasis: 'auto',\n    flexGrow: 1,\n    flexShrink: 1,\n    margin: -RING_REACH,\n  },\n  // The safe area and the form inside it take the rail's height and no more,\n  // shrinking below what their destinations ask, since a view keeps its\n  // content's height by default and the block would then never scroll.\n  inset: {\n    flexGrow: 1,\n    flexShrink: 1,\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, spacing }) =>\n  StyleSheet.create({\n    // The collapsed rail, its destinations centred in it.\n    collapsed: {\n      alignItems: 'center',\n      flexGrow: 1,\n      flexShrink: 1,\n      paddingBottom: spacing.xl,\n      paddingTop: TOP_PADDING,\n      width: COLLAPSED_WIDTH,\n    },\n    // The collapsed rail's destinations, 4dp apart.\n    collapsedList: {\n      alignItems: 'center',\n      gap: spacing.xs,\n      padding: RING_REACH,\n    },\n    // The expanded rail: as wide as its pills ask, within the page's bounds,\n    // 20dp either side of them.\n    expanded: {\n      flexGrow: 1,\n      flexShrink: 1,\n      maxWidth: EXPANDED_MAX_WIDTH,\n      minWidth: EXPANDED_MIN_WIDTH,\n      paddingBottom: spacing.xl,\n      paddingHorizontal: EXPANDED_PADDING,\n      paddingTop: TOP_PADDING,\n    },\n    // The expanded rail's pills, at its leading edge with no gap between.\n    expandedList: {\n      alignItems: 'flex-start',\n      padding: RING_REACH,\n    },\n    // What the rail draws above its destinations, the page's 40dp clear of\n    // the first: the collapsed rail's 4dp gap, and the rest of its own here.\n    header: {\n      alignItems: 'center',\n      marginBottom: spacing.xxxl - spacing.xs,\n    },\n    // The expanded rail has no gap between destinations, so its header keeps\n    // the whole 40dp. It starts at the leading edge where the pills do, 8dp\n    // in from there: a 40dp icon button centres its 24dp icon, and 8dp puts\n    // that icon over the pills' icons, 16dp into each pill.\n    headerExpanded: {\n      alignItems: 'flex-start',\n      alignSelf: 'stretch',\n      marginBottom: spacing.xxxl,\n      paddingStart: spacing.sm,\n    },\n    // The rail's surface. It keeps its width whatever sits beside it, and\n    // holds the form being drawn at its leading edge, clipping it while the\n    // surface is narrower.\n    rail: {\n      backgroundColor: colors.surface,\n      flexDirection: 'row',\n      flexShrink: 0,\n      overflow: 'hidden',\n    },\n  }),\n)\n\n// The edges the rail meets: the top, the bottom and its leading side, which\n// is the right one under right-to-left.\nfunction edgesOf(): readonly Edge[] {\n  return ['bottom', I18nManager.isRTL ? 'right' : 'left', 'top']\n}\n\n/**\n * The column of top-level destinations a medium or wider window keeps at its\n * leading edge, collapsed or, with `isExpanded`, expanded. Each destination\n * goes to its `href` through the app's router, see `RouterProvider`.\n *\n * ```tsx\n * <NavigationRail selectedRoute=\"/first\">\n *   <NavigationRail.Item href=\"/first\" icon={<FirstIcon />}>\n *     First item\n *   </NavigationRail.Item>\n *   <NavigationRail.Item href=\"/second\" icon={<SecondIcon />}>\n *     Second item\n *   </NavigationRail.Item>\n * </NavigationRail>\n * ```\n *\n * Draw it at the leading edge of a row holding the screen's content, which\n * gives it its height: it paints its surface to the screen's edges and keeps\n * its destinations clear of the status bar, the home indicator and a notch\n * itself.\n *\n * `aria-label` names the destinations' tab list. `style`, `ref` and `testID`\n * land on the rail's own view, its surface.\n */\nfunction NavigationRail({\n  'aria-label': ariaLabel,\n  children,\n  header,\n  isExpanded = false,\n  selectedRoute,\n  style,\n  ...props\n}: NavigationRailProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const reduceMotion = useReducedMotion()\n  // The surface's width, unset until the form being drawn is first measured,\n  // which leaves the surface as wide as that form.\n  const width = useSharedValue<number | undefined>(undefined)\n  const context = useMemo(\n    () => ({\n      form: isExpanded ? ('expanded' as const) : ('collapsed' as const),\n      measuring: false,\n      selectedRoute,\n    }),\n    [isExpanded, selectedRoute],\n  )\n  const widthStyle = useAnimatedStyle(() => {\n    'worklet'\n    const current = width.get()\n\n    return current === undefined ? {} : { width: current }\n  })\n\n  return (\n    <Animated.View\n      {...props}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        own.rail,\n        widthStyle,\n        style,\n      )}\n    >\n      <View\n        onLayout={widthThen(width, reduceMotion, timingOf(theme))}\n        style={styles.content}\n      >\n        <SafeAreaView edges={edgesOf()} style={styles.inset}>\n          <View style={isExpanded ? own.expanded : own.collapsed}>\n            {header === undefined ? null : (\n              <View\n                style={composeStyles<ViewStyle>(\n                  own.header,\n                  isExpanded ? own.headerExpanded : undefined,\n                )}\n              >\n                {header}\n              </View>\n            )}\n            <ScrollView\n              aria-label={ariaLabel}\n              contentContainerStyle={\n                isExpanded ? own.expandedList : own.collapsedList\n              }\n              role=\"tablist\"\n              style={styles.destinations}\n            >\n              <NavigationContext value={context}>{children}</NavigationContext>\n            </ScrollView>\n          </View>\n        </SafeAreaView>\n      </View>\n    </Animated.View>\n  )\n}\n\n/**\n * One destination of a navigation rail: an icon, a label and, while it is\n * the current one, the active indicator. Pressing it calls `onPress`, then\n * goes to its `href`. Renders nothing of its own outside a `NavigationRail`,\n * whose `selectedRoute` says whether it is selected.\n *\n * `style`, `ref` and `testID` land on the destination's `Pressable`.\n */\nfunction NavigationRailItem(props: NavigationRailItemProps) {\n  return <NavigationItem {...props} />\n}\n\n// The rail's change of width, on the active indicator's duration and curve.\nfunction timingOf({ motion }: ResolvedTheme): Timing {\n  return {\n    duration: motion.durationLong2,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n}\n\n// Moves the surface to the width the form being drawn lays out at: at once\n// the first time, and under reduced motion, and over the rail's timing\n// after that. Built by a call rather than written inline at the prop, which\n// is what react-perf's jsx-no-new-function-as-prop is after.\nfunction widthThen(\n  width: SharedValue<number | undefined>,\n  reduceMotion: boolean,\n  timing: Timing,\n) {\n  return (event: LayoutChangeEvent) => {\n    const next = event.nativeEvent.layout.width\n\n    width.set(\n      width.get() === undefined || reduceMotion\n        ? next\n        : withTiming(next, timing),\n    )\n  }\n}\n\nNavigationRail.Item = NavigationRailItem\n\nexport type { NavigationRailItemProps, NavigationRailProps }\n\nexport { NavigationRail, NavigationRailItem }\n"],"mappings":"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"}

package/dist/components/number-field/index.d.ts

@@ -1,7 +1,7 @@
 import { ValidationResult } from "../../form/index.js";
 import { FieldVariant } from "../../field/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/number-field/index.d.ts
 type NumberFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'autoComplete' | 'autoCorrect' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'inputMode' | 'keyboardType' | 'maxLength' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholder' | 'placeholderTextColor' | 'readOnly' | 'selectionColor' | 'spellCheck' | 'style' | 'underlineColorAndroid' | 'value'> & {
   /**

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

@@ -1,18 +1,18 @@
-import { localeOf } from "../../number/locale.js";
 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 { withOpacity } from "../../theme/color.js";
 import { hitSlop, usePressFeedback } from "../../press/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { localeOf } from "../../number/locale.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";
 import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 import { useEffect, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AccessibilityInfo, Platform, Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 import { NumberFormatter } from "@internationalized/number";
 //#region src/components/number-field/index.tsx
 const STEPPER_WIDTH = 32;

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

@@ -1,7 +1,7 @@
 import { OverlayAlign, OverlaySide } from "../../overlay/placement.js";
 import "../../overlay/index.js";
-import { ReactNode, Ref, RefObject } from "react";
 import { HostInstance, StyleProp, TextProps, ViewProps, ViewStyle } from "react-native";
+import { ReactNode, Ref, RefObject } from "react";
 //#region src/components/popover/index.d.ts
 /** Where the panel sits along the side it opens on. */
 type PopoverAlign = OverlayAlign;

package/dist/components/popover/index.js

@@ -3,15 +3,15 @@ import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { refsOf } from "../../ref/index.js";
 import { ButtonSlotContext } from "../../button/slots.js";
+import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
 import { Overlay } from "../../overlay/host.js";
 import { useAnchoredPlacement } from "../../overlay/anchored.js";
 import { ModalWindow, panelRoleOf } from "../../modal/index.js";
-import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useEffect, useId, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { ScrollView, StyleSheet, Text } from "react-native";
 import Animated from "react-native-reanimated";
+import { createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
 //#region src/components/popover/index.tsx
 const DEFAULT_HOVER_DELAY = 600;

package/dist/components/product-icon/index.d.ts

@@ -1,6 +1,6 @@
 import { MarkImageProps } from "../../mark/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/product-icon/index.d.ts
 type ProductIconProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

package/dist/components/progress-indicator/index.d.ts

@@ -1,6 +1,6 @@
 import { IndicatorTone } from "../../indicator/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/progress-indicator/index.d.ts
 type ProgressIndicatorProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

package/dist/components/progress-indicator/index.js

@@ -1,16 +1,16 @@
-import { HIDDEN } from "../../glyphs/hidden.js";
 import { parseLength } from "../../theme/resolve.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { HIDDEN } from "../../glyphs/hidden.js";
 import { DETERMINATE_EASING, stylesOf as stylesOf$1 } from "../../indicator/styles.js";
 import { IndicatorLabels, IndicatorLine, activeLength, fillOf, readingOf, useEased, useIndicatorColors, useMeasuredWidth } from "../../indicator/index.js";
 import { keyframeAt, useLoop } from "../../indicator/motion.js";
 import { TURN, WAVE_HEIGHT, WAVE_ORIGIN, arcPath, wavePath, wavyArcPath } from "../../indicator/paths.js";
 import { c } from "react/compiler-runtime";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { I18nManager, StyleSheet, View } from "react-native";
-import Svg, { Path } from "react-native-svg";
 import Animated, { useAnimatedProps, useAnimatedStyle, useDerivedValue, useReducedMotion } from "react-native-reanimated";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Path } from "react-native-svg";
 //#region src/components/progress-indicator/index.tsx
 const CIRCULAR_SIZE = 40;
 const RADIUS = 18;

package/dist/components/radio-group/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactNode, Ref } from "react";
 import { StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/radio-group/index.d.ts
 /** Which way a `RadioGroup` lays out its buttons. */
 type RadioGroupOrientation = 'horizontal' | 'vertical';

package/dist/components/radio-group/index.js

@@ -1,15 +1,15 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
 import { withOpacity } from "../../theme/color.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useId } from "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, withTiming } from "react-native-reanimated";
+import { createContext, use, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useRadioGroupState } from "react-stately/useRadioGroupState";
 //#region src/components/radio-group/index.tsx
 const RING_SIZE = 20;

package/dist/components/search-field/index.d.ts

@@ -1,6 +1,6 @@
 import { ValidationResult } from "../../form/index.js";
-import { ComponentRef, Ref } from "react";
 import { StyleProp, TextInput, TextInputProps, View, ViewStyle } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/search-field/index.d.ts
 type SearchFieldProps = Omit<TextInputProps, 'accessibilityHint' | 'accessibilityLabel' | 'aria-disabled' | 'aria-label' | 'children' | 'cursorColor' | 'defaultValue' | 'editable' | 'multiline' | 'numberOfLines' | 'onChange' | 'onChangeText' | 'placeholderTextColor' | 'readOnly' | 'returnKeyType' | 'role' | 'selectionColor' | 'style' | 'underlineColorAndroid' | 'value'> & {
   /**

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

@@ -1,17 +1,17 @@
-import { AutocompleteContext } from "../../autocomplete/index.js";
 import { IconStyleContext } from "../../glyphs/icon-style.js";
-import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useFieldValidation } from "../../form/index.js";
-import { withOpacity } from "../../theme/color.js";
 import { usePressFeedback } from "../../press/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { AutocompleteContext } from "../../autocomplete/index.js";
+import { CloseGlyph, SearchGlyph } from "../../glyphs/index.js";
+import { useFieldValidation } from "../../form/index.js";
 import { IconButton } from "../icon-button/index.js";
 import { FieldInput, FieldMessage, FieldStates, FieldStroke, describedBy, useFieldFocus, useStrokeMotion } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
+import { Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 import { use, useId, useImperativeHandle, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Pressable, StyleSheet, View, useWindowDimensions } from "react-native";
 //#region src/components/search-field/index.tsx
 const ICON_SIZE = 24;
 const MAX_WIDTH = 720;