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

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

@@ -1,16 +1,16 @@
-import { CloseGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
+import { CloseGlyph } from "../../glyphs/index.js";
 import { AnimatedPressable, toggleState } from "../../button/index.js";
-import { usePressFeedback } from "../../press/index.js";
 import { stylesOf } from "../../chip/styles.js";
 import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
-import { useId, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { useId, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useListState } from "react-stately/useListState";
 //#region src/components/chip-group/index.tsx
 const REMOVE_REACH = {

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

@@ -1,5 +1,5 @@
-import { ComponentRef, Ref } from "react";
 import { View, ViewProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/copy-field/index.d.ts
 type CopyFieldProps = Omit<ViewProps, 'children'> & {
   /**

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

@@ -5,9 +5,9 @@ import { useTypeRole } from "../../typography/roles.js";
 import { Button } from "../button/index.js";
 import { useClipboardAvailable, writeClipboard } from "../../clipboard/index.js";
 import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, StyleSheet, Text, View } from "react-native";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { AccessibilityInfo, Platform, StyleSheet, Text, View } from "react-native";
 //#region src/components/copy-field/index.tsx
 const COPIED_RESET_MS = 2e3;
 const RESERVE = {

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

@@ -1,5 +1,5 @@
-import { ComponentRef, Ref } from "react";
 import { Text, TextProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/currency/index.d.ts
 type CurrencyProps = Omit<TextProps, 'children'> & {
   /**

package/dist/components/currency/index.js

@@ -3,8 +3,8 @@ import { composeStyles, themedStyles } from "../../theme/styles.js";
 import { useFontFamily } from "../../typography/fonts.js";
 import { familyStyle, nativeWeight } from "../../typography/roles.js";
 import { c } from "react/compiler-runtime";
-import { jsx } from "react/jsx-runtime";
 import { StyleSheet, Text } from "react-native";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/currency/index.tsx
 const stylesOf = themedStyles(({ colors, typography }) => StyleSheet.create({
 	base: {

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

@@ -1,6 +1,6 @@
 import { ModalOpenProps } from "../../modal/index.js";
-import { ComponentRef, ReactNode, Ref } from "react";
 import { HostInstance, ScrollView, ScrollViewProps, StyleProp, TextProps, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/dialog/index.d.ts
 type DialogBodyProps = ScrollViewProps & {
   readonly ref?: Ref<ComponentRef<typeof ScrollView>>;

package/dist/components/dialog/index.js

@@ -6,11 +6,11 @@ import { ButtonSlotContext } from "../../button/slots.js";
 import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
 import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, registerOf, useModalState, useModalTrigger } from "../../modal/index.js";
 import { c } from "react/compiler-runtime";
-import { createContext, use, useEffect, useId, useLayoutEffect, useState } from "react";
-import { jsx } from "react/jsx-runtime";
 import { ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
 import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { createContext, use, useEffect, useId, useLayoutEffect, useState } from "react";
+import { jsx } from "react/jsx-runtime";
 //#region src/components/dialog/index.tsx
 const MIN_WIDTH = 280;
 const MAX_WIDTH = 560;

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

@@ -1,6 +1,6 @@
 import { ButtonLinkForm, ButtonPressForm, ButtonToggleForm } from "../../button/index.js";
-import { ComponentRef, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/icon-button/index.d.ts
 type IconButtonProps = (ButtonLinkForm | ButtonPressForm | ButtonToggleForm) & Omit<PressableProps, 'aria-label' | 'children' | 'disabled' | 'style'> & {
   /**

package/dist/components/icon-button/index.js

@@ -1,14 +1,14 @@
 import { IconStyleContext } from "../../glyphs/icon-style.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { AnimatedPressable, HEIGHTS, OUTLINE_WIDTHS, PRESSED_CORNERS, buttonStyles, toggleState, useButtonAction, useCorner, useSlotTrigger } from "../../button/index.js";
 import { palettesOf } from "../../button/palettes.js";
 import { BUSY, PendingContent, PendingRing, usePending } from "../../button/pending.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet } from "react-native";
 import Animated from "react-native-reanimated";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/icon-button/index.tsx
 const DISABLED = {
 	filled: "filledDisabled",

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

@@ -1,5 +1,5 @@
-import { ComponentRef, Ref } from "react";
 import { Text, TextProps } from "react-native";
+import { ComponentRef, Ref } from "react";
 //#region src/components/link/index.d.ts
 type LinkProps = Omit<TextProps, 'disabled'> & {
   /**

package/dist/components/link/index.js

@@ -1,12 +1,12 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
-import { useLinkPress } from "../../router/index.js";
-import { withOpacity } from "../../theme/color.js";
 import { stylesOf as stylesOf$1 } from "../../press/styles.js";
+import { withOpacity } from "../../theme/color.js";
+import { useLinkPress } from "../../router/index.js";
 import { c } from "react/compiler-runtime";
+import { Platform, StyleSheet, Text } from "react-native";
 import { useState } from "react";
 import { jsx } from "react/jsx-runtime";
-import { Platform, StyleSheet, Text } from "react-native";
 //#region src/components/link/index.tsx
 const underlines = StyleSheet.create({
 	always: { textDecorationLine: "underline" },

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

@@ -1,5 +1,5 @@
-import { ReactElement, ReactNode, Ref } from "react";
 import { FlatList, HostInstance, PressableProps, ScrollViewProps, StyleProp, ViewStyle } from "react-native";
+import { ReactElement, ReactNode, Ref } from "react";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/list/index.d.ts
 type ListLoadMoreProps = {

package/dist/components/list/index.js

@@ -1,18 +1,18 @@
-import { AutocompleteContext } from "../../autocomplete/index.js";
 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 { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, hasContent, rowStyleOf } from "../../row/index.js";
+import { AutocompleteContext } from "../../autocomplete/index.js";
 import { toggleState } from "../../button/index.js";
 import { ProgressIndicator } from "../progress-indicator/index.js";
 import { messagesFor, resultsFor } from "../../i18n/index.js";
-import { hitSlop, usePressFeedback } from "../../press/index.js";
 import { CheckboxBox } from "../../control/checkbox-box.js";
-import { rowContentColor, rowStyles } from "../../row/styles.js";
-import { RowContent, hasContent, rowStyleOf } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, FlatList, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { Children, createContext, use, useEffect, useRef } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
-import { AccessibilityInfo, FlatList, Platform, Pressable, StyleSheet, Text, View } from "react-native";
 import { useListState } from "react-stately/useListState";
 //#region src/components/list/index.tsx
 const BOX_SLOT = 24;

package/dist/components/list-detail/index.d.ts

@@ -0,0 +1,56 @@
+import { View, ViewProps } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
+//#region src/components/list-detail/index.d.ts
+type ListDetailProps = Omit<ViewProps, 'children'> & {
+  /**
+   * The selected item's content. It stands on its own, and takes the
+   * flexible pane.
+   */
+  readonly detail?: ReactNode;
+  /**
+   * The items to choose between. It takes the fixed pane, 360dp wide, and
+   * 412dp from the extra-large window size up.
+   */
+  readonly list?: ReactNode;
+  readonly ref?: Ref<ComponentRef<typeof View>>;
+  /**
+   * Which pane shows while only one fits, below the expanded window size.
+   * Both show from expanded up, where this is not read.
+   *
+   * Controlled, with no fallback of its own: the layout cannot know that an
+   * item was chosen or that the reader went back, which is the router's to
+   * say. **Moving a screen reader into the pane this reveals comes with
+   * setting it**, since the pane being left is hidden from it and only the
+   * call site knows what inside the new one to send it to.
+   * @default 'list'
+   */
+  readonly showing?: 'detail' | 'list';
+};
+/**
+ * Material Design's list-detail layout: a fixed list pane beside a flexible
+ * detail pane from the expanded window size up, and the one pane `showing`
+ * names below it.
+ *
+ * ```tsx
+ * <ListDetail
+ *   detail={<Detail id={id} />}
+ *   list={<List aria-label="Label" onAction={open}>{rows}</List>}
+ *   showing={id === undefined ? 'list' : 'detail'}
+ * />
+ * ```
+ *
+ * Layout only: neither pane paints a surface of its own, so what goes in
+ * them is the call site's. It grows to fill the screen it is in, and each
+ * pane pads itself by the safe area where it meets the screen's edge.
+ *
+ * On a phone the panes are two steps of the app's navigation. Choosing an
+ * item puts its id in the route, which sets `showing` to `detail`, and the
+ * back gesture or swipe takes it out again, so the router owns the step back
+ * and the layout has no back button or history of its own. Both panes stay
+ * mounted, so a rotation or a foldable unfolding keeps what either holds.
+ * The stories show the wiring with Expo Router and React Navigation.
+ */
+declare function ListDetail({ detail, list, showing, style, ...props }: ListDetailProps): import("react").JSX.Element;
+//#endregion
+export { ListDetail, type ListDetailProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/list-detail/index.js

@@ -0,0 +1,169 @@
+import { useTheme } from "../../theme/scope.js";
+import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { useWindowSizeClass } from "../../hooks/useWindowSizeClass.js";
+import { c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/list-detail/index.tsx
+const LIST_PANE = 360;
+const LIST_PANE_EXTRA_LARGE = 412;
+const BOTH = /* @__PURE__ */ new Set([
+	"expanded",
+	"extraLarge",
+	"large"
+]);
+const styles = StyleSheet.create({
+	flexible: {
+		flex: 1,
+		minWidth: 0
+	},
+	hidden: { display: "none" },
+	list: { width: LIST_PANE },
+	listExtraLarge: { width: LIST_PANE_EXTRA_LARGE },
+	safeArea: { flexGrow: 1 }
+});
+const stylesOf = themedStyles(({ spacing }) => StyleSheet.create({ root: {
+	flexDirection: "row",
+	flexGrow: 1,
+	gap: spacing.xl
+} }));
+/**
+* Material Design's list-detail layout: a fixed list pane beside a flexible
+* detail pane from the expanded window size up, and the one pane `showing`
+* names below it.
+*
+* ```tsx
+* <ListDetail
+*   detail={<Detail id={id} />}
+*   list={<List aria-label="Label" onAction={open}>{rows}</List>}
+*   showing={id === undefined ? 'list' : 'detail'}
+* />
+* ```
+*
+* Layout only: neither pane paints a surface of its own, so what goes in
+* them is the call site's. It grows to fill the screen it is in, and each
+* pane pads itself by the safe area where it meets the screen's edge.
+*
+* On a phone the panes are two steps of the app's navigation. Choosing an
+* item puts its id in the route, which sets `showing` to `detail`, and the
+* back gesture or swipe takes it out again, so the router owns the step back
+* and the layout has no back button or history of its own. Both panes stay
+* mounted, so a rotation or a foldable unfolding keeps what either holds.
+* The stories show the wiring with Expo Router and React Navigation.
+*/
+function ListDetail(t0) {
+	const $ = c(21);
+	let detail;
+	let list;
+	let props;
+	let style;
+	let t1;
+	if ($[0] !== t0) {
+		({detail, list, showing: t1, style, ...props} = t0);
+		$[0] = t0;
+		$[1] = detail;
+		$[2] = list;
+		$[3] = props;
+		$[4] = style;
+		$[5] = t1;
+	} else {
+		detail = $[1];
+		list = $[2];
+		props = $[3];
+		style = $[4];
+		t1 = $[5];
+	}
+	const showing = t1 === void 0 ? "list" : t1;
+	const own = stylesOf(useTheme());
+	const sizeClass = useWindowSizeClass();
+	let t2;
+	if ($[6] !== sizeClass) {
+		t2 = BOTH.has(sizeClass);
+		$[6] = sizeClass;
+		$[7] = t2;
+	} else t2 = $[7];
+	const both = t2;
+	const fixed = sizeClass === "extraLarge" ? styles.listExtraLarge : styles.list;
+	const T0 = View;
+	const t3 = composeStyles(own.root, style);
+	const t4 = !both && showing === "detail";
+	const t5 = both ? fixed : styles.flexible;
+	let t6;
+	if ($[8] !== list || $[9] !== t4 || $[10] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Pane, {
+			hidden: t4,
+			style: t5,
+			children: list
+		});
+		$[8] = list;
+		$[9] = t4;
+		$[10] = t5;
+		$[11] = t6;
+	} else t6 = $[11];
+	const t7 = !both && showing === "list";
+	let t8;
+	if ($[12] !== detail || $[13] !== t7) {
+		t8 = /* @__PURE__ */ jsx(Pane, {
+			hidden: t7,
+			style: styles.flexible,
+			children: detail
+		});
+		$[12] = detail;
+		$[13] = t7;
+		$[14] = t8;
+	} else t8 = $[14];
+	let t9;
+	if ($[15] !== T0 || $[16] !== props || $[17] !== t3 || $[18] !== t6 || $[19] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
+			...props,
+			style: t3,
+			children: [t6, t8]
+		});
+		$[15] = T0;
+		$[16] = props;
+		$[17] = t3;
+		$[18] = t6;
+		$[19] = t8;
+		$[20] = t9;
+	} else t9 = $[20];
+	return t9;
+}
+function Pane(t0) {
+	const $ = c(9);
+	const { children, hidden, style } = t0;
+	const t1 = hidden ? styles.hidden : null;
+	let t2;
+	if ($[0] !== style || $[1] !== t1) {
+		t2 = composeStyles(style, t1);
+		$[0] = style;
+		$[1] = t1;
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== children) {
+		t3 = /* @__PURE__ */ jsx(SafeAreaView, {
+			style: styles.safeArea,
+			children
+		});
+		$[3] = children;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== hidden || $[6] !== t2 || $[7] !== t3) {
+		t4 = /* @__PURE__ */ jsx(View, {
+			"aria-hidden": hidden,
+			style: t2,
+			children: t3
+		});
+		$[5] = hidden;
+		$[6] = t2;
+		$[7] = t3;
+		$[8] = t4;
+	} else t4 = $[8];
+	return t4;
+}
+//#endregion
+export { ListDetail };
+
+//# sourceMappingURL=index.js.map

package/dist/components/list-detail/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ViewProps","ViewStyle","StyleSheet","View","SafeAreaView","WindowSizeClass","useWindowSizeClass","useTheme","composeStyles","themedStyles","LIST_PANE","LIST_PANE_EXTRA_LARGE","BOTH","ReadonlySet","Set","styles","create","flexible","flex","minWidth","hidden","display","list","width","listExtraLarge","safeArea","flexGrow","stylesOf","spacing","root","flexDirection","gap","xl","ListDetailProps","Omit","detail","ref","showing","PaneProps","children","style","ListDetail","t0","$","_c","props","t1","undefined","own","sizeClass","t2","has","both","fixed","T0","t3","t4","t5","t6","t7","t8","t9","Pane","_c"],"sources":["../../../src/components/list-detail/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { ViewProps, ViewStyle } from 'react-native'\n\nimport { StyleSheet, View } from 'react-native'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { WindowSizeClass } from '../../hooks/useWindowSizeClass'\n\nimport { useWindowSizeClass } from '../../hooks/useWindowSizeClass'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\n\n// kanso-ui's ListDetail, Material Design's list-detail canonical layout. The\n// list is the fixed pane, which Material Design points at lists with light\n// information density, and the detail the flexible one that takes whatever\n// is left, so the layout carries the one flexible pane the page asks every\n// layout for. Web's shape differs in two ways, on purpose.\n//\n// **The window decides.** Native has no container queries, so the form\n// follows `useWindowSizeClass()`: both panes from the expanded window size,\n// 840dp, which a tablet held either way and an unfolded foldable reach, and\n// below it the one pane `showing` names. Both panes stay mounted in both\n// forms, in the same places in the tree, so a rotation or an unfolding moves\n// between the two without losing anything inside either, the selected item\n// and a scroll position among them.\n//\n// **The layout is a screen's.** On a phone the two panes are two steps of\n// the app's navigation, so the router owns the step back, and Android's back\n// gesture and iOS's swipe go through it rather than through anything here.\n// The layout grows to fill the screen it is given, and each pane is a\n// `SafeAreaView`, which pads by the system bars, the notch and the rounded\n// corners only where that pane meets them. That is measured where the pane\n// is rather than read from the window: under an app bar a pane takes no top\n// inset, and beside its neighbour none at that edge.\n//\n// A row runs from the start edge, so under a right-to-left layout the list is\n// on the right and the detail on the left, with nothing here turning it over.\n\n// Material Design's widths for a fixed pane, the wider from the extra-large\n// window size up.\nconst LIST_PANE = 360\nconst LIST_PANE_EXTRA_LARGE = 412\n\n// The window sizes with room for both panes.\nconst BOTH: ReadonlySet<WindowSizeClass> = new Set([\n  'expanded',\n  'extraLarge',\n  'large',\n])\n\nconst styles = StyleSheet.create({\n  // The flexible pane, which a long unbroken line inside cannot widen past\n  // its share.\n  flexible: {\n    flex: 1,\n    minWidth: 0,\n  },\n  // Out of the layout and, with `aria-hidden` beside it, out of what a\n  // screen reader reaches, while staying mounted.\n  hidden: {\n    display: 'none',\n  },\n  list: {\n    width: LIST_PANE,\n  },\n  listExtraLarge: {\n    width: LIST_PANE_EXTRA_LARGE,\n  },\n  safeArea: {\n    flexGrow: 1,\n  },\n})\n\n// The 24dp Material Design puts between the panes. The layout grows rather\n// than taking `flex: 1`, so it fills a screen and is as tall as its panes\n// anywhere with no height to fill.\nconst stylesOf = themedStyles(({ spacing }) =>\n  StyleSheet.create({\n    root: {\n      flexDirection: 'row',\n      flexGrow: 1,\n      gap: spacing.xl,\n    },\n  }),\n)\n\ntype ListDetailProps = Omit<ViewProps, 'children'> & {\n  /**\n   * The selected item's content. It stands on its own, and takes the\n   * flexible pane.\n   */\n  readonly detail?: ReactNode\n  /**\n   * The items to choose between. It takes the fixed pane, 360dp wide, and\n   * 412dp from the extra-large window size up.\n   */\n  readonly list?: ReactNode\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Which pane shows while only one fits, below the expanded window size.\n   * Both show from expanded up, where this is not read.\n   *\n   * Controlled, with no fallback of its own: the layout cannot know that an\n   * item was chosen or that the reader went back, which is the router's to\n   * say. **Moving a screen reader into the pane this reveals comes with\n   * setting it**, since the pane being left is hidden from it and only the\n   * call site knows what inside the new one to send it to.\n   * @default 'list'\n   */\n  readonly showing?: 'detail' | 'list'\n}\n\ntype PaneProps = {\n  readonly children: ReactNode\n  readonly hidden: boolean\n  readonly style: ViewStyle\n}\n\n/**\n * Material Design's list-detail layout: a fixed list pane beside a flexible\n * detail pane from the expanded window size up, and the one pane `showing`\n * names below it.\n *\n * ```tsx\n * <ListDetail\n *   detail={<Detail id={id} />}\n *   list={<List aria-label=\"Label\" onAction={open}>{rows}</List>}\n *   showing={id === undefined ? 'list' : 'detail'}\n * />\n * ```\n *\n * Layout only: neither pane paints a surface of its own, so what goes in\n * them is the call site's. It grows to fill the screen it is in, and each\n * pane pads itself by the safe area where it meets the screen's edge.\n *\n * On a phone the panes are two steps of the app's navigation. Choosing an\n * item puts its id in the route, which sets `showing` to `detail`, and the\n * back gesture or swipe takes it out again, so the router owns the step back\n * and the layout has no back button or history of its own. Both panes stay\n * mounted, so a rotation or a foldable unfolding keeps what either holds.\n * The stories show the wiring with Expo Router and React Navigation.\n */\nfunction ListDetail({\n  detail,\n  list,\n  showing = 'list',\n  style,\n  ...props\n}: ListDetailProps) {\n  const own = stylesOf(useTheme())\n  const sizeClass = useWindowSizeClass()\n  const both = BOTH.has(sizeClass)\n  const fixed = sizeClass === 'extraLarge' ? styles.listExtraLarge : styles.list\n\n  return (\n    <View {...props} style={composeStyles<ViewStyle>(own.root, style)}>\n      <Pane\n        hidden={!both && showing === 'detail'}\n        style={both ? fixed : styles.flexible}\n      >\n        {list}\n      </Pane>\n      <Pane hidden={!both && showing === 'list'} style={styles.flexible}>\n        {detail}\n      </Pane>\n    </View>\n  )\n}\n\n// A pane is hidden on the outside and padded on the inside. React Native's\n// own `View` is what turns `aria-hidden` into iOS's hidden elements and\n// Android's hidden descendants, and the safe area's view is a native one of\n// its own that goes round it.\nfunction Pane({ children, hidden, style }: PaneProps) {\n  return (\n    <View\n      aria-hidden={hidden}\n      style={composeStyles<ViewStyle>(style, hidden ? styles.hidden : null)}\n    >\n      <SafeAreaView style={styles.safeArea}>{children}</SafeAreaView>\n    </View>\n  )\n}\n\nexport { ListDetail }\nexport type { ListDetailProps }\n"],"mappings":"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"}

package/dist/components/list-item/index.d.ts

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/list-item/index.d.ts
 type InteractiveListItemForm = Omit<PressableProps, 'children' | 'disabled' | 'style'> & {
   /**

package/dist/components/list-item/index.js

@@ -4,8 +4,8 @@ import { usePressFeedback } from "../../press/index.js";
 import { rowContentColor, rowStyles } from "../../row/styles.js";
 import { RowContent, rowStyleOf } from "../../row/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/list-item/index.tsx
 function InteractiveListItem(t0) {
 	const $ = c(47);

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

@@ -1,7 +1,7 @@
 import { OverlayAlign, OverlaySide } from "../../overlay/placement.js";
 import "../../overlay/index.js";
-import { ReactElement, ReactNode, Ref } from "react";
 import { HostInstance, PressableProps, StyleProp, ViewProps, ViewStyle } from "react-native";
+import { ReactElement, ReactNode, Ref } from "react";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/menu/index.d.ts
 type ItemNodeProps = MenuItemProps & {

package/dist/components/menu/index.js

@@ -1,24 +1,24 @@
-import { CheckGlyph, ChevronEndGlyph } from "../../glyphs/index.js";
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles, themedStyles } from "../../theme/styles.js";
+import { usePressFeedback } from "../../press/index.js";
 import { useTypeRole } from "../../typography/roles.js";
+import { rowContentColor, rowStyles } from "../../row/styles.js";
+import { RowContent, rowStyleOf } from "../../row/index.js";
+import { CheckGlyph, ChevronEndGlyph } from "../../glyphs/index.js";
 import { refsOf } from "../../ref/index.js";
 import { useOpenLink } from "../../router/index.js";
 import { ButtonSlotContext } from "../../button/slots.js";
 import { ProgressIndicator } from "../progress-indicator/index.js";
 import { messagesFor } from "../../i18n/index.js";
-import { usePressFeedback } from "../../press/index.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 { rowContentColor, rowStyles } from "../../row/styles.js";
-import { RowContent, rowStyleOf } from "../../row/index.js";
-import { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus } from "../../overlay/panel.js";
 import { Separator } from "../separator/index.js";
 import { c } from "react/compiler-runtime";
-import { Children, createContext, use, useEffect, useId, useRef, useState } from "react";
-import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { I18nManager, Platform, Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
 import Animated from "react-native-reanimated";
+import { Children, createContext, use, useEffect, useId, useRef, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useMenuTriggerState, useSubmenuTriggerState } from "react-stately/useMenuTriggerState";
 import { useTreeState } from "react-stately/useTreeState";
 //#region src/components/menu/index.tsx

package/dist/components/meter/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/meter/index.d.ts
 type MeterProps = Omit<ViewProps, 'children' | 'style'> & {
   /**

package/dist/components/meter/index.js

@@ -3,8 +3,8 @@ import { composeStyles } from "../../theme/styles.js";
 import { DETERMINATE_EASING, stylesOf } from "../../indicator/styles.js";
 import { IndicatorLabels, IndicatorLine, readingOf, useEased, useIndicatorColors, useMeasuredWidth } from "../../indicator/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/meter/index.tsx
 const styles = StyleSheet.create({ line: { alignSelf: "stretch" } });
 /**