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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","ViewProps","ViewStyle","AnimatedStyle","Edge","StyleSheet","View","Animated","Easing","useAnimatedStyle","useReducedMotion","withTiming","SafeAreaView","IconStyle","TypeRole","IconStyleContext","COLLAPSED_BLOCK_SIZE","TARGET_SIZE","hasContent","useTheme","composeStyles","themedStyles","Text","ICON_SIZE","GLYPH_INSET","HEIGHTS","lg","plain","withSubtitle","md","sm","const","HEADLINE_ROLES","Readonly","Record","AppBarSize","EDGES","styles","create","center","textAlign","pinned","zIndex","row","alignItems","flexDirection","width","safeArea","stylesOf","sizing","spacing","gap","xs","slot","flexShrink","controlSm","paddingHorizontal","text","flexGrow","justifyContent","minWidth","paddingVertical","AppBarProps","Omit","align","collapsed","contentInset","contentMaxInlineSize","headline","leading","ref","scrolled","size","subtitle","trailing","SlotProps","children","color","AppBar","t0","$","_c","props","style","t1","t2","t3","t4","t5","undefined","theme","own","inset","collapse","hasLeading","hasTrailing","t6","showsSubtitle","heights","fill","useFill","t7","t8","t9","T0","T1","t12","maxWidth","minHeight","paddingEnd","edgePadding","paddingStart","t13","colors","onSurface","t14","t15","t16","t17","onSurfaceVariant","t18","t19","t10","t11","t20","hasSlot","Math","max","iconStyleOf","Slot","motion","reduceMotion","surfaceContainer","surface","timing","duration","durationMedium1","easing","bezier","easingEmphasized","backgroundColor","_c","Text"],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type { ColorValue, ViewProps, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { Edge } from 'react-native-safe-area-context'\n\nimport { StyleSheet, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  withTiming,\n} from 'react-native-reanimated'\nimport { SafeAreaView } from 'react-native-safe-area-context'\n\nimport type { IconStyle } from '../../glyphs/icon-style'\nimport type { TypeRole } from '../../typography/roles'\n\nimport { IconStyleContext } from '../../glyphs/icon-style'\nimport { COLLAPSED_BLOCK_SIZE } from '../../hooks/useAppBarScroll'\nimport { TARGET_SIZE } from '../../press'\nimport { hasContent } from '../../row'\nimport { useTheme } from '../../theme/scope'\nimport { composeStyles, themedStyles } from '../../theme/styles'\nimport { Text } from '../text'\n\n// kanso-ui's AppBar, Material Design's top app bar in the three sizes the spec\n// recommends. `md` and `lg` are its medium and large *flexible* bars, the\n// newer of the two sets the spec gives and the one it recommends. The old\n// center-aligned variant is a configuration of every size, which is why\n// alignment is a prop.\n//\n// Heights are minimums rather than fixed. The flexible bars hug their text,\n// so a headline that wraps, or a larger text size the device asks for, makes\n// the bar taller rather than being cut off.\n//\n// The bar paints its surface from the screen's top edge, under the status\n// bar, and keeps its contents inside the safe area: a `SafeAreaView` pads it\n// by the status bar, the notch and a rounded corner wherever the bar meets\n// them, and by nothing where it does not, so a bar drawn below another view\n// takes no inset of its own.\n//\n// Three things differ from web's, each because of the platform.\n//\n// - **No heading level.** Native screen readers have no levels to move\n//   between, so the headline is a header and `headingLevel` is gone.\n// - **`pinned` means outside the scroll view.** Native has no sticky\n//   position, so a pinned bar is one the screen draws above its scroll view\n//   rather than inside it, and the content scrolls beneath its lower edge.\n// - **The fill eases and the height does not.** Collapsing moves the height\n//   and the headline's type role at once. React Native has no transition for\n//   a type role, and easing the height alone would leave the text jumping\n//   inside a moving bar. The fill a scrolled bar takes eases over medium 1\n//   on the emphasized curve, as web's does, and arrives at once under\n//   reduced motion.\n\n// The geometry Material Design lays a bar's icon buttons out on: a 48dp\n// target per button, edge to edge, with a 24dp icon centred in each, and the\n// outermost target 4dp in from the bar's edge, so a glyph lands at the\n// page's margin. IconButton draws a 40dp box with its 48dp target spilling\n// out through `hitSlop`, so a slot pads half the difference either side and\n// puts the whole of it between two buttons, which lays the targets edge to\n// edge as the spec does.\nconst ICON_SIZE = 24\n\n// How far an icon sits inside its target, which is how much less than the\n// content inset the row is padded on an edge that holds a slot. That puts a\n// leading glyph, rather than the edge of its target, at the inset.\nconst GLYPH_INSET = (TARGET_SIZE - ICON_SIZE) / 2\n\nconst HEIGHTS = {\n  lg: { plain: 120, withSubtitle: 152 },\n  md: { plain: 112, withSubtitle: 136 },\n  sm: { plain: COLLAPSED_BLOCK_SIZE, withSubtitle: COLLAPSED_BLOCK_SIZE },\n} as const\n\n// One type role per size, as Material Design's own title tokens alias the\n// type scale rather than giving sizes of their own. A collapsed bar takes the\n// small one's.\nconst HEADLINE_ROLES: Readonly<Record<AppBarSize, TypeRole>> = {\n  lg: 'headlineMedium',\n  md: 'headlineSmall',\n  sm: 'titleLarge',\n}\n\n// The bar's sides as well as its top, so a landscape notch is cleared too.\n// The bottom is the content's.\nconst EDGES: readonly Edge[] = ['left', 'right', 'top']\n\nconst styles = StyleSheet.create({\n  center: {\n    textAlign: 'center',\n  },\n  // Drawn over what follows it, so whatever strays past the scroll view's\n  // top edge, an overscroll or a shadow, passes beneath the bar.\n  pinned: {\n    zIndex: 1,\n  },\n  row: {\n    alignItems: 'center',\n    flexDirection: 'row',\n    width: '100%',\n  },\n  // The row, centred once it reaches `contentMaxInlineSize`.\n  safeArea: {\n    alignItems: 'center',\n  },\n})\n\nconst stylesOf = themedStyles(({ sizing, spacing }) =>\n  StyleSheet.create({\n    row: {\n      gap: spacing.xs,\n    },\n    // Slots hold their own size rather than being squeezed by a long\n    // headline, and space their icon buttons by the spec's targets.\n    slot: {\n      alignItems: 'center',\n      flexDirection: 'row',\n      flexShrink: 0,\n      gap: TARGET_SIZE - sizing.controlSm,\n      paddingHorizontal: (TARGET_SIZE - sizing.controlSm) / 2,\n    },\n    // The text takes the room the slots leave, and wraps inside it.\n    text: {\n      flexGrow: 1,\n      flexShrink: 1,\n      justifyContent: 'center',\n      minWidth: 0,\n      paddingVertical: spacing.sm,\n    },\n  }),\n)\n\ntype AppBarProps = Omit<ViewProps, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  readonly align?: 'center' | 'start'\n  /**\n   * Collapses a flexible bar to the height and headline of the small one,\n   * for a `pinned` bar over content that has been scrolled. Without it a\n   * pinned `lg` keeps 152dp of the screen for as long as the screen is open.\n   *\n   * Controlled, as `scrolled` is: only the app knows which view scrolls and\n   * how far into it the bar should have collapsed. `useAppBarScroll` derives\n   * both from that view's scroll, and is the way to set them unless the app\n   * needs a rule of its own. Ignored on `sm`, which is already the height\n   * this collapses to, and the subtitle goes with the height.\n   * @default false\n   */\n  readonly collapsed?: boolean\n  /**\n   * Where the bar's content starts on each edge, in dp: the headline where\n   * nothing comes before it, and the leading icon's glyph where something\n   * does. The trailing edge is the same mirrored. `0` draws a bar flush.\n   *\n   * The default is Material Design's margin for a top app bar, the spacing\n   * scale's `lg` step, which is also the margin it gives body content, so a\n   * bar and the screen beneath line up without either being told about the\n   * other.\n   * @default spacing.lg\n   */\n  readonly contentInset?: number\n  /**\n   * How wide the bar's contents may run, in dp, before they stop growing,\n   * with the row centred in what is left. The bar's surface still paints\n   * edge to edge. Unset, the row is as wide as the bar.\n   */\n  readonly contentMaxInlineSize?: number\n  /**\n   * The screen's title, a header for a screen reader. Wraps rather than\n   * truncating, and grows the bar with it.\n   */\n  readonly headline?: ReactNode\n  /**\n   * Usually a back or menu icon button. Sits before the text, and hands an\n   * icon the on-surface colour and a 24dp size through `useIconStyle()`.\n   */\n  readonly leading?: ReactNode\n  /**\n   * Marks a bar drawn above the screen's scroll view rather than inside it,\n   * so it stays put while the content scrolls beneath its lower edge, and is\n   * drawn over that content. A pinned bar is the one `collapsed` and\n   * `scrolled` are for.\n   * @default false\n   */\n  readonly pinned?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, the\n   * surface container role, and this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which view\n   * scrolls. `useAppBarScroll` derives it.\n   * @default false\n   */\n  readonly scrolled?: boolean\n  /**\n   * `sm` is Material Design's small bar, 64dp; `md` and `lg` are its medium\n   * and large flexible bars, 112dp and 120dp, or 136dp and 152dp with a\n   * subtitle, which hug their text. The headline is title large, headline\n   * small and headline medium in turn.\n   * @default 'sm'\n   */\n  readonly size?: AppBarSize\n  /** A second line under the headline. Makes `md` and `lg` taller. */\n  readonly subtitle?: ReactNode\n  /**\n   * Actions, at the far end, usually icon buttons. An icon here takes the\n   * on-surface-variant colour and a 24dp size through `useIconStyle()`.\n   */\n  readonly trailing?: ReactNode\n}\n\ntype AppBarSize = 'lg' | 'md' | 'sm'\n\ntype SlotProps = {\n  readonly children: ReactNode\n  readonly color: ColorValue\n}\n\n/**\n * Material Design's top app bar: the bar at the top of a screen carrying its\n * title, one or two actions, and the way back out.\n *\n * ```tsx\n * <AppBar\n *   headline=\"Headline\"\n *   leading={<IconButton aria-label=\"Back\"><ArrowBackGlyph /></IconButton>}\n * />\n * ```\n *\n * Three sizes. `sm` is a 64dp bar for a screen whose title is a label; `md`\n * and `lg` are the flexible bars, which give the headline a larger type role\n * and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, from the screen's top edge, and keeps its\n * contents clear of the status bar and the notch. Separating itself from the\n * content beneath is its job, which is why `scrolled` and `collapsed` exist;\n * `useAppBarScroll` sets both from the screen's scroll view.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset,\n  contentMaxInlineSize,\n  headline,\n  leading,\n  pinned = false,\n  scrolled = false,\n  size = 'sm',\n  style,\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  const theme = useTheme()\n  const own = stylesOf(theme)\n  const inset = contentInset ?? theme.spacing.lg\n  // `sm` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error, for a size chosen by the window.\n  const collapse = collapsed && size !== 'sm'\n  const hasLeading = hasContent(leading)\n  const hasTrailing = hasContent(trailing)\n  const showsSubtitle = hasContent(subtitle) && !collapse\n  const heights = HEIGHTS[collapse ? 'sm' : size]\n  const fill = useFill(scrolled)\n\n  return (\n    <Animated.View\n      {...props}\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        fill,\n        pinned ? styles.pinned : null,\n        style,\n      )}\n    >\n      <SafeAreaView edges={EDGES} style={styles.safeArea}>\n        <View\n          style={composeStyles<ViewStyle>(styles.row, own.row, {\n            maxWidth: contentMaxInlineSize,\n            minHeight: showsSubtitle ? heights.withSubtitle : heights.plain,\n            paddingEnd: edgePadding(inset, hasTrailing),\n            paddingStart: edgePadding(inset, hasLeading),\n          })}\n        >\n          {hasLeading ? (\n            <Slot color={theme.colors.onSurface}>{leading}</Slot>\n          ) : null}\n          <View style={own.text}>\n            {hasContent(headline) ? (\n              <Text\n                role=\"heading\"\n                style={align === 'center' ? styles.center : undefined}\n                variant={HEADLINE_ROLES[collapse ? 'sm' : size]}\n              >\n                {headline}\n              </Text>\n            ) : null}\n            {showsSubtitle ? (\n              <Text\n                style={align === 'center' ? styles.center : undefined}\n                tone=\"muted\"\n                variant=\"bodyMedium\"\n              >\n                {subtitle}\n              </Text>\n            ) : null}\n          </View>\n          {hasTrailing ? (\n            <Slot color={theme.colors.onSurfaceVariant}>{trailing}</Slot>\n          ) : null}\n        </View>\n      </SafeAreaView>\n    </Animated.View>\n  )\n}\n\n// The row's padding on one edge, for the inset the call site gave. Where the\n// edge holds a slot the row stops short of the inset by GLYPH_INSET, clamped\n// at zero for an inset smaller than a glyph's own room.\nfunction edgePadding(inset: number, hasSlot: boolean): number {\n  return hasSlot ? Math.max(0, inset - GLYPH_INSET) : inset\n}\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's jsx-no-new-object-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction iconStyleOf(color: ColorValue): IconStyle {\n  return { color, size: ICON_SIZE }\n}\n\n// A slot's icons draw at 24dp in the slot's colour. An icon button inside it\n// hands its own icon the button's colour instead.\nfunction Slot({ children, color }: SlotProps) {\n  const own = stylesOf(useTheme())\n\n  return (\n    <IconStyleContext value={iconStyleOf(color)}>\n      <View style={own.slot}>{children}</View>\n    </IconStyleContext>\n  )\n}\n\n// The bar's surface, which takes the surface container role once the\n// content beneath has scrolled. It eases over medium 1 on the emphasized\n// curve, and arrives at once under reduced motion.\nfunction useFill(scrolled: boolean) {\n  const { colors, motion } = useTheme()\n  const reduceMotion = useReducedMotion()\n  const fill = scrolled ? colors.surfaceContainer : colors.surface\n  const timing = {\n    duration: motion.durationMedium1,\n    easing: Easing.bezier(...motion.easingEmphasized),\n  }\n\n  return useAnimatedStyle(() => {\n    'worklet'\n    return {\n      backgroundColor: reduceMotion ? fill : withTiming(fill, timing),\n    }\n  })\n}\n\nexport { AppBar }\nexport type { AppBarProps }\n"],"mappings":"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"}

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

package/dist/components/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/button/index.d.ts
 type ButtonForm = ButtonLinkForm | ButtonPressForm | (ButtonToggleForm & {
   /**

package/dist/components/button/index.js

@@ -1,15 +1,15 @@
 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 { useTypeRole } from "../../typography/roles.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, CONCEALED, PendingContent, PendingRing, pendingStyles, 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, Text, useWindowDimensions } from "react-native";
 import Animated from "react-native-reanimated";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/button/index.tsx
 const DISABLED = {
 	elevated: "filledDisabled",

package/dist/components/card/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/card/index.d.ts
 type CardBaseProps = {
   readonly children?: ReactNode;

package/dist/components/card/index.js

@@ -1,11 +1,11 @@
 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 { usePressFeedback } from "../../press/index.js";
+import { withOpacity } from "../../theme/color.js";
+import { useLinkPress } from "../../router/index.js";
 import { c } from "react/compiler-runtime";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Pressable, StyleSheet, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/card/index.tsx
 const paddings = themedStyles(({ spacing }) => StyleSheet.create({
 	default: { padding: spacing.lg },

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

package/dist/components/checkbox/index.js

@@ -5,9 +5,9 @@ import { controlStylesOf } from "../../control/styles.js";
 import { ControlLabel, ControlMessage, describedBy, messageOf } from "../../control/index.js";
 import { CheckboxBox } from "../../control/checkbox-box.js";
 import { c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Pressable, View } from "react-native";
 import { useToggleState } from "react-stately/useToggleState";
 //#region src/components/checkbox/index.tsx
 const LAYERS = {

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

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewStyle } from "react-native";
+import { ComponentRef, ReactNode, Ref } from "react";
 //#region src/components/chip/index.d.ts
 /** An assist or suggestion chip: an action, drawn as a plain button. */
 type ChipActionProps = ChipBaseProps & {

package/dist/components/chip/index.js

@@ -1,7 +1,7 @@
 import { useTheme } from "../../theme/scope.js";
 import { composeStyles } from "../../theme/styles.js";
-import { AnimatedPressable, toggleState, useButtonAction } from "../../button/index.js";
 import { usePressFeedback } from "../../press/index.js";
+import { AnimatedPressable, toggleState, useButtonAction } from "../../button/index.js";
 import { shadowsOf, stylesOf } from "../../chip/styles.js";
 import { ChipGlyph, ChipLabel, measureThen, paintOf, targetOf, useEasedColors } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";

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

@@ -1,5 +1,5 @@
-import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
 import { PressableProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
+import { ComponentRef, ReactElement, ReactNode, Ref } from "react";
 import { Key, Selection, SelectionMode } from "react-stately";
 //#region src/components/chip-group/index.d.ts
 type ChipGroupChipProps = Omit<PressableProps, 'children' | 'disabled' | 'id' | 'style'> & {

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 & {