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

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","GestureResponderEvent","HostInstance","ModalProps","ViewProps","ViewStyle","AnimatedStyle","EdgeInsets","OverlayTriggerState","useCallback","useEffect","useMemo","useRef","useState","AccessibilityInfo","I18nManager","Modal","Platform","StyleSheet","useOverlayTriggerState","ButtonSlots","ResolvedTheme","AnimatedPressable","ButtonSlotContext","OverlayHost","withOpacity","useTheme","composeStyles","themedStyles","NO_INSETS","bottom","left","right","top","ORIENTATIONS","SCRIM_OPACITY","stylesOf","colors","create","scrim","backgroundColor","position","ModalOpenProps","defaultOpen","isOpen","onOpenChange","ModalTrigger","state","trigger","ModalWindowProps","children","isKeyboardDismissDisabled","labelledBy","onClose","onScrimPress","title","focusOf","OS","sendAccessibilityEvent","ignore","insetsOf","insets","rtl","isRTL","paddingBottom","paddingEnd","paddingStart","paddingTop","ModalWindow","t0","$","_c","styles","T0","t1","t2","undefined","t3","t4","t5","t6","t8","t9","T1","t10","T2","T3","t11","t12","t13","t14","t15","t16","t17","t18","t7","panelRoleOf","role","Pick","registerOf","setParts","update","parts","Readonly","Record","Part","part","useModalState","outer","props","own","present","setPresent","close","slots","useReturnFocus","useModalTrigger","setTrigger","context","default","event","target","currentTarget","open","shown","gone","current","_c"],"sources":["../../src/modal/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  ModalProps,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { EdgeInsets } from 'react-native-safe-area-context'\nimport type { OverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  I18nManager,\n  Modal,\n  Platform,\n  StyleSheet,\n} from 'react-native'\nimport { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport type { ButtonSlots } from '../button/slots'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { AnimatedPressable } from '../button'\nimport { ButtonSlotContext } from '../button/slots'\nimport { OverlayHost } from '../overlay'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles, themedStyles } from '../theme/styles'\n\n// The window a modal surface is drawn in, and what a dialog and a sheet share\n// around it: the trigger that opens it, the open state, the scrim, and where\n// focus goes as it shows and once it has gone. Internal: nothing here is\n// exported from the package.\n//\n// **It is a React Native `Modal`**, which keeps React context, so the surface\n// keeps the `ThemeScope` around it, and which is a window of its own on iOS\n// and Android, above the screen and its overlays. The window therefore hosts\n// overlays of its own, so a snackbar or a popover raised from inside it draws\n// above it rather than under it.\n\n// Outside a SafeAreaProvider the insets are unknown, and the window's own edge\n// is the best bound there is.\nconst NO_INSETS: EdgeInsets = { bottom: 0, left: 0, right: 0, top: 0 }\n\n// iOS presents a `Modal` in portrait alone unless told otherwise, which would\n// turn an app held sideways round as the surface opened.\nconst ORIENTATIONS: ModalProps['supportedOrientations'] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\n// The scrim is the scrim role at 32%, the opacity Material Design gives a\n// modal's scrim and web mixes in.\nconst SCRIM_OPACITY = 0.32\n\nconst stylesOf = themedStyles(({ colors }: ResolvedTheme) =>\n  StyleSheet.create({\n    scrim: {\n      backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),\n      bottom: 0,\n      left: 0,\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n  }),\n)\n\n/** Whether a modal surface is open, and who holds that state. */\ntype ModalOpenProps = {\n  readonly defaultOpen?: boolean\n  readonly isOpen?: boolean\n  readonly onOpenChange?: (isOpen: boolean) => void\n}\n\n/**\n * What a surface's trigger part hands its content: the open state, and the\n * button that last opened it, for focus to return to.\n */\ntype ModalTrigger = {\n  readonly state: OverlayTriggerState\n  readonly trigger: HostInstance | null\n}\n\ntype ModalWindowProps = {\n  readonly children?: ReactNode\n  /** Whether Android's back gesture and Escape on web leave it open. */\n  readonly isKeyboardDismissDisabled: boolean\n  /** The headline's id, which names the window on web. */\n  readonly labelledBy: string | undefined\n  /** What the back gesture and Escape call. */\n  readonly onClose: () => void\n  /** What a press on the scrim calls, or nothing where it closes nothing. */\n  readonly onScrimPress: (() => void) | undefined\n  /** The scrim's motion. */\n  readonly scrim: AnimatedStyle<ViewStyle>\n  /** The headline, which a screen reader is sent to once the window shows. */\n  readonly title: HostInstance | null\n}\n\n// Sends the screen reader to the headline once the window has shown. React\n// Native Web's `Modal` moves focus into itself.\nfunction focusOf(title: HostInstance | null) {\n  return () => {\n    if (title !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(title, 'focus')\n    }\n  }\n}\n\n// What the back gesture does on a surface it may not close: nothing, rather\n// than leaving the handler out, which Android warns about.\nfunction ignore() {}\n\n// The safe area as padding. The insets are physical edges, and React Native\n// swaps a left and a right style under a right-to-left layout, so they are\n// handed over as the start and end they are in the direction the layout runs.\nfunction insetsOf(insets: EdgeInsets): ViewStyle {\n  const rtl = I18nManager.isRTL\n\n  return {\n    paddingBottom: insets.bottom,\n    paddingEnd: rtl ? insets.left : insets.right,\n    paddingStart: rtl ? insets.right : insets.left,\n    paddingTop: insets.top,\n  }\n}\n\n/**\n * The window a modal surface is drawn in: the `Modal`, the overlays it hosts,\n * and the scrim, with the surface itself as its children.\n */\nfunction ModalWindow({\n  children,\n  isKeyboardDismissDisabled,\n  labelledBy,\n  onClose,\n  onScrimPress,\n  scrim,\n  title,\n}: ModalWindowProps) {\n  const styles = stylesOf(useTheme())\n\n  return (\n    <Modal\n      animationType=\"none\"\n      aria-labelledby={Platform.OS === 'web' ? labelledBy : undefined}\n      navigationBarTranslucent\n      onRequestClose={isKeyboardDismissDisabled ? ignore : onClose}\n      onShow={focusOf(title)}\n      statusBarTranslucent\n      supportedOrientations={ORIENTATIONS}\n      transparent\n      visible\n    >\n      {/* Nothing in the window takes the trigger's slot, the overlays it\n          hosts included, so a button in a snackbar raised from the surface\n          opens nothing; only the surface's buttons take the close slot. */}\n      <ButtonSlotContext value={null}>\n        <OverlayHost>\n          {/* A screen reader and a keyboard skip the scrim: the first closes\n            the surface with the back or escape gesture, the second with\n            Escape. React Native Web's Pressable is a tab stop unless told\n            otherwise, whatever `focusable` says. */}\n          <AnimatedPressable\n            accessible={false}\n            aria-hidden\n            focusable={false}\n            onPress={onScrimPress}\n            style={composeStyles<AnimatedStyle<ViewStyle>>(styles.scrim, scrim)}\n            tabIndex={-1}\n          />\n          {children}\n        </OverlayHost>\n      </ButtonSlotContext>\n    </Modal>\n  )\n}\n\n// The surface's role and name on iOS and Android. On web React Native Web's\n// `Modal` is the dialog element, so the surface takes neither there.\nfunction panelRoleOf(\n  role: 'alertdialog' | 'dialog',\n  labelledBy: string | undefined,\n): Pick<ViewProps, 'aria-labelledby' | 'aria-modal' | 'role'> {\n  if (Platform.OS === 'web') {\n    return {}\n  }\n\n  return { 'aria-labelledby': labelledBy, 'aria-modal': true, role }\n}\n\n// Counts each part as it mounts and unmounts, so the parts around it know\n// which of them are there.\nfunction registerOf<Part extends string>(\n  setParts: (\n    update: (\n      parts: Readonly<Record<Part, number>>,\n    ) => Readonly<Record<Part, number>>,\n  ) => void,\n) {\n  return (part: Part) => {\n    setParts((parts) => ({ ...parts, [part]: parts[part] + 1 }))\n\n    return () => {\n      setParts((parts) => ({ ...parts, [part]: parts[part] - 1 }))\n    }\n  }\n}\n\n/**\n * The open state a surface's content part reads: its trigger's, inside one,\n * and its own otherwise. `present` stays true from the moment it opens until\n * the call site's exit has run and set it false, and the close slot and the\n * scrim close it through `close`.\n */\nfunction useModalState(outer: ModalTrigger | null, props: ModalOpenProps) {\n  const own = useOverlayTriggerState(props)\n  const state = outer?.state ?? own\n  const [present, setPresent] = useState(state.isOpen)\n  const close = useCallback(() => {\n    state.close()\n  }, [state])\n  const slots = useMemo<ButtonSlots>(() => ({ close }), [close])\n\n  // Mounted the moment it opens, and kept until its exit has run.\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, outer)\n\n  return { close, present, setPresent, slots, state }\n}\n\n/**\n * The open state a surface's trigger part holds, and the default slot a\n * button inside it fills: it records itself as the button focus returns to,\n * and opens the surface. React Native types the target as a bare view tag\n * too, which focus cannot be sent to, so such a press records nothing.\n */\nfunction useModalTrigger(props: ModalOpenProps) {\n  const state = useOverlayTriggerState(props)\n  const [trigger, setTrigger] = useState<HostInstance | null>(null)\n  const context = useMemo<ModalTrigger>(\n    () => ({ state, trigger }),\n    [state, trigger],\n  )\n  const slots = useMemo<ButtonSlots>(\n    () => ({\n      default: (event: GestureResponderEvent) => {\n        const target = event.currentTarget\n\n        setTrigger(typeof target === 'number' ? null : target)\n        state.open()\n      },\n    }),\n    [state],\n  )\n\n  return { context, slots }\n}\n\n// Sends the screen reader back to the button that opened the surface once it\n// has gone. React Native Web's `Modal` restores focus itself.\nfunction useReturnFocus(present: boolean, outer: ModalTrigger | null) {\n  const shown = useRef(present)\n\n  useEffect(() => {\n    const trigger = outer?.trigger ?? null\n    const gone = shown.current && !present\n\n    shown.current = present\n    if (gone && trigger !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(trigger, 'focus')\n    }\n  }, [outer, present])\n}\n\nexport {\n  insetsOf,\n  ModalWindow,\n  NO_INSETS,\n  panelRoleOf,\n  registerOf,\n  useModalState,\n  useModalTrigger,\n}\nexport type { ModalOpenProps, ModalTrigger }\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","GestureResponderEvent","HostInstance","ModalProps","ViewProps","ViewStyle","AnimatedStyle","EdgeInsets","OverlayTriggerState","useCallback","useEffect","useMemo","useRef","useState","AccessibilityInfo","I18nManager","Modal","Platform","StyleSheet","useOverlayTriggerState","ButtonSlots","ResolvedTheme","AnimatedPressable","ButtonSlotContext","OverlayHost","SeparatorOrientationContext","withOpacity","useTheme","composeStyles","themedStyles","NO_INSETS","bottom","left","right","top","ORIENTATIONS","SCRIM_OPACITY","stylesOf","colors","create","scrim","backgroundColor","position","ModalOpenProps","defaultOpen","isOpen","onOpenChange","ModalTrigger","state","trigger","ModalWindowProps","children","isKeyboardDismissDisabled","labelledBy","onClose","onScrimPress","title","focusOf","OS","sendAccessibilityEvent","ignore","insetsOf","insets","rtl","isRTL","paddingBottom","paddingEnd","paddingStart","paddingTop","ModalWindow","t0","$","_c","styles","T0","t1","t2","undefined","t3","t4","t5","t6","t8","t9","T1","t10","T2","t11","T3","T4","t12","t13","t14","t15","t16","t17","t18","t19","t20","t7","panelRoleOf","role","Pick","registerOf","setParts","update","parts","Readonly","Record","Part","part","useModalState","outer","props","own","present","setPresent","close","slots","useReturnFocus","useModalTrigger","setTrigger","context","default","event","target","currentTarget","open","shown","gone","current","_c"],"sources":["../../src/modal/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react'\nimport type {\n  GestureResponderEvent,\n  HostInstance,\n  ModalProps,\n  ViewProps,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { EdgeInsets } from 'react-native-safe-area-context'\nimport type { OverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  I18nManager,\n  Modal,\n  Platform,\n  StyleSheet,\n} from 'react-native'\nimport { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'\n\nimport type { ButtonSlots } from '../button/slots'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { AnimatedPressable } from '../button'\nimport { ButtonSlotContext } from '../button/slots'\nimport { OverlayHost } from '../overlay'\nimport { SeparatorOrientationContext } from '../separator'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles, themedStyles } from '../theme/styles'\n\n// The window a modal surface is drawn in, and what a dialog and a sheet share\n// around it: the trigger that opens it, the open state, the scrim, and where\n// focus goes as it shows and once it has gone. Internal: nothing here is\n// exported from the package.\n//\n// **It is a React Native `Modal`**, which keeps React context, so the surface\n// keeps the `ThemeScope` around it, and which is a window of its own on iOS\n// and Android, above the screen and its overlays. The window therefore hosts\n// overlays of its own, so a snackbar or a popover raised from inside it draws\n// above it rather than under it.\n\n// Outside a SafeAreaProvider the insets are unknown, and the window's own edge\n// is the best bound there is.\nconst NO_INSETS: EdgeInsets = { bottom: 0, left: 0, right: 0, top: 0 }\n\n// iOS presents a `Modal` in portrait alone unless told otherwise, which would\n// turn an app held sideways round as the surface opened.\nconst ORIENTATIONS: ModalProps['supportedOrientations'] = [\n  'portrait',\n  'portrait-upside-down',\n  'landscape',\n  'landscape-left',\n  'landscape-right',\n]\n\n// The scrim is the scrim role at 32%, the opacity Material Design gives a\n// modal's scrim and web mixes in.\nconst SCRIM_OPACITY = 0.32\n\nconst stylesOf = themedStyles(({ colors }: ResolvedTheme) =>\n  StyleSheet.create({\n    scrim: {\n      backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),\n      bottom: 0,\n      left: 0,\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n  }),\n)\n\n/** Whether a modal surface is open, and who holds that state. */\ntype ModalOpenProps = {\n  readonly defaultOpen?: boolean\n  readonly isOpen?: boolean\n  readonly onOpenChange?: (isOpen: boolean) => void\n}\n\n/**\n * What a surface's trigger part hands its content: the open state, and the\n * button that last opened it, for focus to return to.\n */\ntype ModalTrigger = {\n  readonly state: OverlayTriggerState\n  readonly trigger: HostInstance | null\n}\n\ntype ModalWindowProps = {\n  readonly children?: ReactNode\n  /** Whether Android's back gesture and Escape on web leave it open. */\n  readonly isKeyboardDismissDisabled: boolean\n  /** The headline's id, which names the window on web. */\n  readonly labelledBy: string | undefined\n  /** What the back gesture and Escape call. */\n  readonly onClose: () => void\n  /** What a press on the scrim calls, or nothing where it closes nothing. */\n  readonly onScrimPress: (() => void) | undefined\n  /** The scrim's motion. */\n  readonly scrim: AnimatedStyle<ViewStyle>\n  /** The headline, which a screen reader is sent to once the window shows. */\n  readonly title: HostInstance | null\n}\n\n// Sends the screen reader to the headline once the window has shown. React\n// Native Web's `Modal` moves focus into itself.\nfunction focusOf(title: HostInstance | null) {\n  return () => {\n    if (title !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(title, 'focus')\n    }\n  }\n}\n\n// What the back gesture does on a surface it may not close: nothing, rather\n// than leaving the handler out, which Android warns about.\nfunction ignore() {}\n\n// The safe area as padding. The insets are physical edges, and React Native\n// swaps a left and a right style under a right-to-left layout, so they are\n// handed over as the start and end they are in the direction the layout runs.\nfunction insetsOf(insets: EdgeInsets): ViewStyle {\n  const rtl = I18nManager.isRTL\n\n  return {\n    paddingBottom: insets.bottom,\n    paddingEnd: rtl ? insets.left : insets.right,\n    paddingStart: rtl ? insets.right : insets.left,\n    paddingTop: insets.top,\n  }\n}\n\n/**\n * The window a modal surface is drawn in: the `Modal`, the overlays it hosts,\n * and the scrim, with the surface itself as its children.\n */\nfunction ModalWindow({\n  children,\n  isKeyboardDismissDisabled,\n  labelledBy,\n  onClose,\n  onScrimPress,\n  scrim,\n  title,\n}: ModalWindowProps) {\n  const styles = stylesOf(useTheme())\n\n  return (\n    <Modal\n      animationType=\"none\"\n      aria-labelledby={Platform.OS === 'web' ? labelledBy : undefined}\n      navigationBarTranslucent\n      onRequestClose={isKeyboardDismissDisabled ? ignore : onClose}\n      onShow={focusOf(title)}\n      statusBarTranslucent\n      supportedOrientations={ORIENTATIONS}\n      transparent\n      visible\n    >\n      {/* Nothing in the window takes the trigger's slot, the overlays it\n          hosts included, so a button in a snackbar raised from the surface\n          opens nothing; only the surface's buttons take the close slot. Nor\n          does a rule in it run the way the toolbar that opened it set. */}\n      <ButtonSlotContext value={null}>\n        <SeparatorOrientationContext value={null}>\n          <OverlayHost>\n            {/* A screen reader and a keyboard skip the scrim: the first closes\n            the surface with the back or escape gesture, the second with\n            Escape. React Native Web's Pressable is a tab stop unless told\n            otherwise, whatever `focusable` says. */}\n            <AnimatedPressable\n              accessible={false}\n              aria-hidden\n              focusable={false}\n              onPress={onScrimPress}\n              style={composeStyles<AnimatedStyle<ViewStyle>>(\n                styles.scrim,\n                scrim,\n              )}\n              tabIndex={-1}\n            />\n            {children}\n          </OverlayHost>\n        </SeparatorOrientationContext>\n      </ButtonSlotContext>\n    </Modal>\n  )\n}\n\n// The surface's role and name on iOS and Android. On web React Native Web's\n// `Modal` is the dialog element, so the surface takes neither there.\nfunction panelRoleOf(\n  role: 'alertdialog' | 'dialog',\n  labelledBy: string | undefined,\n): Pick<ViewProps, 'aria-labelledby' | 'aria-modal' | 'role'> {\n  if (Platform.OS === 'web') {\n    return {}\n  }\n\n  return { 'aria-labelledby': labelledBy, 'aria-modal': true, role }\n}\n\n// Counts each part as it mounts and unmounts, so the parts around it know\n// which of them are there.\nfunction registerOf<Part extends string>(\n  setParts: (\n    update: (\n      parts: Readonly<Record<Part, number>>,\n    ) => Readonly<Record<Part, number>>,\n  ) => void,\n) {\n  return (part: Part) => {\n    setParts((parts) => ({ ...parts, [part]: parts[part] + 1 }))\n\n    return () => {\n      setParts((parts) => ({ ...parts, [part]: parts[part] - 1 }))\n    }\n  }\n}\n\n/**\n * The open state a surface's content part reads: its trigger's, inside one,\n * and its own otherwise. `present` stays true from the moment it opens until\n * the call site's exit has run and set it false, and the close slot and the\n * scrim close it through `close`.\n */\nfunction useModalState(outer: ModalTrigger | null, props: ModalOpenProps) {\n  const own = useOverlayTriggerState(props)\n  const state = outer?.state ?? own\n  const [present, setPresent] = useState(state.isOpen)\n  const close = useCallback(() => {\n    state.close()\n  }, [state])\n  const slots = useMemo<ButtonSlots>(() => ({ close }), [close])\n\n  // Mounted the moment it opens, and kept until its exit has run.\n  if (state.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, outer)\n\n  return { close, present, setPresent, slots, state }\n}\n\n/**\n * The open state a surface's trigger part holds, and the default slot a\n * button inside it fills: it records itself as the button focus returns to,\n * and opens the surface. React Native types the target as a bare view tag\n * too, which focus cannot be sent to, so such a press records nothing.\n */\nfunction useModalTrigger(props: ModalOpenProps) {\n  const state = useOverlayTriggerState(props)\n  const [trigger, setTrigger] = useState<HostInstance | null>(null)\n  const context = useMemo<ModalTrigger>(\n    () => ({ state, trigger }),\n    [state, trigger],\n  )\n  const slots = useMemo<ButtonSlots>(\n    () => ({\n      default: (event: GestureResponderEvent) => {\n        const target = event.currentTarget\n\n        setTrigger(typeof target === 'number' ? null : target)\n        state.open()\n      },\n    }),\n    [state],\n  )\n\n  return { context, slots }\n}\n\n// Sends the screen reader back to the button that opened the surface once it\n// has gone. React Native Web's `Modal` restores focus itself.\nfunction useReturnFocus(present: boolean, outer: ModalTrigger | null) {\n  const shown = useRef(present)\n\n  useEffect(() => {\n    const trigger = outer?.trigger ?? null\n    const gone = shown.current && !present\n\n    shown.current = present\n    if (gone && trigger !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(trigger, 'focus')\n    }\n  }, [outer, present])\n}\n\nexport {\n  insetsOf,\n  ModalWindow,\n  NO_INSETS,\n  panelRoleOf,\n  registerOf,\n  useModalState,\n  useModalTrigger,\n}\nexport type { ModalOpenProps, ModalTrigger }\n"],"mappings":"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"}

package/dist/navigation/index.js

@@ -4,8 +4,9 @@ import { composeStyles } from "../theme/styles.js";
 import { hitSlop, usePressFeedback } from "../press/index.js";
 import { useTypeRole } from "../typography/roles.js";
 import { withOpacity } from "../theme/color.js";
+import { BadgeInFlowContext } from "../badge/index.js";
+import { Badge } from "../components/badge/index.js";
 import { useLinkPress } from "../router/index.js";
-import { Badge } from "../badge/index.js";
 import { INDICATOR, styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
 import { Pressable, Text, View } from "react-native";
@@ -123,10 +124,12 @@ function DestinationContent(t0) {
 	} else t2 = $[9];
 	let t3;
 	if ($[10] !== badge || $[11] !== beside || $[12] !== icon) {
-		t3 = badge === void 0 || badge === false ? icon : /* @__PURE__ */ jsx(Badge, {
-			count: badge === true ? void 0 : badge,
-			inFlow: beside,
-			children: icon
+		t3 = badge === void 0 || badge === false ? icon : /* @__PURE__ */ jsx(BadgeInFlowContext, {
+			value: beside,
+			children: /* @__PURE__ */ jsx(Badge, {
+				count: badge === true ? void 0 : badge,
+				children: icon
+			})
 		});
 		$[10] = badge;
 		$[11] = beside;

package/dist/navigation/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","PressableProps","StyleProp","TextStyle","ViewStyle","AnimatedStyle","createContext","use","useEffect","Text","NativeText","Pressable","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","IconStyle","ResolvedTheme","Badge","IconStyleContext","hitSlop","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","useTypeRole","INDICATOR","PILL_HEIGHT","styles","stylesOf","NavigationContextValue","form","NavigationForm","measuring","selectedRoute","NavigationDestinationProps","Omit","badge","children","icon","isDisabled","ref","style","NavigationItemProps","href","GROWN_FROM","FADE_SHARE","ICON_SIZE","BESIDE","Readonly","Record","collapsed","expanded","horizontal","vertical","NavigationContext","ActiveIndicator","t0","$","_c","selected","theme","colors","motion","reduceMotion","progress","t1","t2","target","set","duration","durationLong2","easing","bezier","easingEmphasized","motionStyle","grown","get","opacity","Math","min","transform","scaleX","t3","secondaryContainer","fill","pill","backgroundColor","t4","DestinationContent","label","beside","iconStyleOf","iconColorOf","undefined","t5","stateLayerOpacity","onSurface","disabledContent","onSecondaryContainer","onSurfaceVariant","color","size","Label","role","labelColorOf","secondary","nameOf","NavigationDestination","ariaLabel","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","props","own","feedback","area","corners","disabled","content","handlers","ring","layer","T0","t6","t7","T1","t8","indicator","t9","t10","t11","NavigationItem","onPress","press","_c","NativeText"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  ColorValue,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { createContext, use, useEffect } from 'react'\nimport { Text as NativeText, Pressable, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { Badge } from '../badge'\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../press'\nimport { useLinkPress } from '../router'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { INDICATOR, PILL_HEIGHT, styles, stylesOf } from './styles'\n\n// The destination NavigationBar and NavigationRail both draw, in the four\n// forms their pages give it, as kanso-ui's src/navigation draws it. Apart\n// from either component, so the two cannot drift.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the bar in a\n// compact window, sharing its width with the others, and the collapsed rail,\n// as wide as the rail. A horizontal one is a pill holding the icon and the\n// label side by side, 16dp in at either end: the bar from the medium window\n// size class at 40dp with 4dp between the two in label medium, and the\n// expanded rail at 56dp with 8dp between them in label large. Which form a\n// destination draws is its bar's or its rail's to say, through the context\n// it hands them.\n//\n// The current destination's indicator is the secondary container, with its\n// icon in on secondary container and, under the indicator, its label in\n// secondary; every other is on surface variant. A label set inside the pill,\n// as a horizontal destination sets it, takes on secondary container instead,\n// as on web: secondary over secondary container is not a pair a scheme is\n// held to, and on secondary container is.\n//\n// **The indicator grows** when its destination becomes current, and shrinks\n// back when another does: from 40% of its width to the whole of it from its\n// centre over `durationLong2` on the emphasized curve, fading in over the\n// first fifth of that, as Material's Android components draw it. Web draws it\n// at once. Under reduced motion it does here too.\n//\n// The state layer, the ripple and the focus ring are src/press's, in on\n// secondary container, drawn on the pill: the indicator in a vertical\n// destination, which its ripple grows from the centre of wherever it is\n// pressed, and the whole destination in a horizontal one. The bar's 40dp\n// pill's press reaches 4dp above and below it, to the 48dp target; a\n// vertical destination is the bar's full height already, and the other two\n// forms are 56dp and 64dp tall. A disabled one draws its icon\n// and label on surface at the disabled content opacity, with no layer.\n//\n// A destination is a `tab`, reporting whether it is the selected one, and is\n// named by its label, or by `aria-label` where that is given: the badge on\n// its icon is hidden from a screen reader, so what it says belongs there.\n//\n// **The label comes first in the tree and is drawn after the icon**, through\n// a reversed column or row, so the text inside a destination starts with its\n// name. A badge's count is text, hidden from a screen reader but still\n// written inside the destination under React Native Web, and first in the\n// tree it put the count ahead of the name: a destination named \"Second item,\n// 3 new\" read \"3 Second item\", which is not what a speech-input user would\n// say, and is what axe's label-in-name check fails. src/badge sets the count\n// apart from the label with a space for the same reason.\n\n/** What a bar hands each of its destinations. */\ntype NavigationContextValue = {\n  readonly form: NavigationForm\n  /**\n   * Whether the destinations are being drawn off screen to measure the\n   * horizontal form, which draws each one's content and nothing else.\n   */\n  readonly measuring: boolean\n  /** The route of the current destination, matched against an `href`. */\n  readonly selectedRoute?: string | undefined\n}\n\ntype NavigationDestinationProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from a screen\n   * reader, so say what it says in the destination's `aria-label` too:\n   * \"First item, 3 new\".\n   */\n  readonly badge?: boolean | number | undefined\n  /** The destination's name, drawn as its label. */\n  readonly children?: ReactNode\n  /**\n   * The destination's icon, at the page's 24dp, which the destination hands\n   * its colour and size through `useIconStyle()`.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the destination disabled, and it takes no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/**\n * Which form a destination draws: the bar's `vertical` and `horizontal`,\n * and the rail's `collapsed` and `expanded`. The label is under the icon in\n * the first and the third, and beside it in the other two.\n */\ntype NavigationForm = 'collapsed' | 'expanded' | 'horizontal' | 'vertical'\n\ntype NavigationItemProps = NavigationDestinationProps & {\n  /**\n   * Where the destination goes, through the app's router, and what the\n   * `selectedRoute` around it is matched against.\n   */\n  readonly href: string\n}\n\n// The indicator's width when it starts to grow, as a share of its whole\n// width, and the share of the move it fades in over.\nconst GROWN_FROM = 0.4\nconst FADE_SHARE = 0.2\n\nconst ICON_SIZE = 24\n\n// Whether a form sets the label beside the icon rather than under it.\nconst BESIDE: Readonly<Record<NavigationForm, boolean>> = {\n  collapsed: false,\n  expanded: true,\n  horizontal: true,\n  vertical: false,\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'vertical',\n  measuring: false,\n})\n\n/**\n * The active indicator's fill, which grows from its centre while its\n * destination is current and shrinks back once it is not.\n */\nfunction ActiveIndicator({ selected }: { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { colors, motion } = theme\n  const reduceMotion = useReducedMotion()\n  const progress = useSharedValue(selected ? 1 : 0)\n\n  useEffect(() => {\n    const target = selected ? 1 : 0\n\n    progress.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration: motion.durationLong2,\n            easing: Easing.bezier(...motion.easingEmphasized),\n          }),\n    )\n  }, [motion, progress, reduceMotion, selected])\n\n  const motionStyle = useAnimatedStyle(() => {\n    'worklet'\n    const grown = progress.get()\n\n    return {\n      opacity: Math.min(1, grown / FADE_SHARE),\n      transform: [{ scaleX: GROWN_FROM + (1 - GROWN_FROM) * grown }],\n    }\n  })\n\n  return (\n    <Animated.View\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.fill,\n        stylesOf(theme).pill,\n        { backgroundColor: colors.secondaryContainer },\n        motionStyle,\n      )}\n    />\n  )\n}\n\n/**\n * What a destination draws over its indicator: the icon and its badge, and\n * where the label is beside the icon the label before them in the tree,\n * which the pill's reversed row draws after them.\n */\nfunction DestinationContent({\n  badge,\n  form,\n  icon,\n  isDisabled,\n  label,\n  selected,\n}: {\n  readonly badge: boolean | number | undefined\n  readonly form: NavigationForm\n  readonly icon: ReactNode\n  readonly isDisabled: boolean\n  readonly label: ReactNode\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const beside = BESIDE[form]\n\n  return (\n    <>\n      {beside ? (\n        <Label form={form} isDisabled={isDisabled} selected={selected}>\n          {label}\n        </Label>\n      ) : null}\n      <View style={styles.icon}>\n        <IconStyleContext\n          value={iconStyleOf(iconColorOf(theme, isDisabled, selected))}\n        >\n          {badge === undefined || badge === false ? (\n            icon\n          ) : (\n            <Badge count={badge === true ? undefined : badge} inFlow={beside}>\n              {icon}\n            </Badge>\n          )}\n        </IconStyleContext>\n      </View>\n    </>\n  )\n}\n\n/** The colour a destination draws its icon in. */\nfunction iconColorOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  return selected ? colors.onSecondaryContainer : colors.onSurfaceVariant\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/**\n * A destination's label, on one line: in label large in an expanded rail,\n * and in label medium everywhere else.\n */\nfunction Label({\n  children,\n  form,\n  isDisabled,\n  selected,\n}: {\n  readonly children: ReactNode\n  readonly form: NavigationForm\n  readonly isDisabled: boolean\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const role = useTypeRole(form === 'expanded' ? 'labelLarge' : 'labelMedium')\n\n  return (\n    <NativeText\n      numberOfLines={1}\n      style={composeStyles<TextStyle>(role, styles.label, {\n        color: labelColorOf(theme, form, isDisabled, selected),\n      })}\n    >\n      {children}\n    </NativeText>\n  )\n}\n\n/** The colour a destination draws its label in, which its form decides. */\nfunction labelColorOf(\n  theme: ResolvedTheme,\n  form: NavigationForm,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  return selected && !isDisabled && !BESIDE[form]\n    ? theme.colors.secondary\n    : iconColorOf(theme, isDisabled, selected)\n}\n\n// A label that is a string names its destination; anything else leaves the\n// name to `aria-label`.\nfunction nameOf(children: ReactNode): string | undefined {\n  return typeof children === 'string' ? children : undefined\n}\n\n/**\n * One destination, in the form the bar around it asks for: an icon and a\n * label, and the active indicator behind the icon while it is current. A\n * `tab` reporting whether it is selected.\n */\nfunction NavigationDestination({\n  'aria-label': ariaLabel,\n  badge,\n  children,\n  icon,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  selected,\n  style,\n  ...props\n}: NavigationDestinationProps & { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { form, measuring } = use(NavigationContext)\n  const own = stylesOf(theme)\n  const beside = BESIDE[form]\n  const feedback = usePressFeedback({\n    area: beside ? undefined : INDICATOR,\n    color: theme.colors.onSecondaryContainer,\n    corners: own.pill,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n  const content = (\n    <DestinationContent\n      badge={badge}\n      form={form}\n      icon={icon}\n      isDisabled={isDisabled}\n      label={children}\n      selected={selected}\n    />\n  )\n\n  if (measuring) {\n    return <View style={own.horizontal}>{content}</View>\n  }\n\n  if (beside) {\n    return (\n      <Pressable\n        aria-label={ariaLabel ?? nameOf(children)}\n        aria-selected={selected}\n        hitSlop={form === 'horizontal' ? hitSlop(PILL_HEIGHT) : undefined}\n        role=\"tab\"\n        {...props}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        style={composeStyles<ViewStyle>(own[form], feedback.ring, style)}\n      >\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </Pressable>\n    )\n  }\n\n  return (\n    <Pressable\n      aria-label={ariaLabel ?? nameOf(children)}\n      aria-selected={selected}\n      role=\"tab\"\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(own[form], style)}\n    >\n      <Label form={form} isDisabled={isDisabled} selected={selected}>\n        {children}\n      </Label>\n      <View style={composeStyles<ViewStyle>(own.indicator, feedback.ring)}>\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </View>\n    </Pressable>\n  )\n}\n\n/**\n * A destination that goes to its `href` through the app's router, selected\n * while the `selectedRoute` around it is that `href`: the item of a bar and\n * of a rail alike.\n */\nfunction NavigationItem({ href, onPress, ...props }: NavigationItemProps) {\n  const { selectedRoute } = use(NavigationContext)\n  const press = useLinkPress(href, onPress)\n\n  return (\n    <NavigationDestination\n      {...props}\n      onPress={press}\n      selected={selectedRoute !== undefined && href === selectedRoute}\n    />\n  )\n}\n\nexport type {\n  NavigationContextValue,\n  NavigationDestinationProps,\n  NavigationForm,\n  NavigationItemProps,\n}\n\nexport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n  NavigationItem,\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","ColorValue","PressableProps","StyleProp","TextStyle","ViewStyle","AnimatedStyle","createContext","use","useEffect","Text","NativeText","Pressable","View","Animated","Easing","useAnimatedStyle","useReducedMotion","useSharedValue","withTiming","IconStyle","ResolvedTheme","BadgeInFlowContext","Badge","IconStyleContext","hitSlop","usePressFeedback","useLinkPress","withOpacity","useTheme","composeStyles","useTypeRole","INDICATOR","PILL_HEIGHT","styles","stylesOf","NavigationContextValue","form","NavigationForm","measuring","selectedRoute","NavigationDestinationProps","Omit","badge","children","icon","isDisabled","ref","style","NavigationItemProps","href","GROWN_FROM","FADE_SHARE","ICON_SIZE","BESIDE","Readonly","Record","collapsed","expanded","horizontal","vertical","NavigationContext","ActiveIndicator","t0","$","_c","selected","theme","colors","motion","reduceMotion","progress","t1","t2","target","set","duration","durationLong2","easing","bezier","easingEmphasized","motionStyle","grown","get","opacity","Math","min","transform","scaleX","t3","secondaryContainer","fill","pill","backgroundColor","t4","DestinationContent","label","beside","iconStyleOf","iconColorOf","undefined","t5","stateLayerOpacity","onSurface","disabledContent","onSecondaryContainer","onSurfaceVariant","color","size","Label","role","labelColorOf","secondary","nameOf","NavigationDestination","ariaLabel","onBlur","onFocus","onHoverIn","onHoverOut","onPressIn","onPressOut","props","own","feedback","area","corners","disabled","content","handlers","ring","layer","T0","t6","t7","T1","t8","indicator","t9","t10","t11","NavigationItem","onPress","press","_c","NativeText"],"sources":["../../src/navigation/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref } from 'react'\nimport type {\n  ColorValue,\n  PressableProps,\n  StyleProp,\n  TextStyle,\n  ViewStyle,\n} from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\n\nimport { createContext, use, useEffect } from 'react'\nimport { Text as NativeText, Pressable, View } from 'react-native'\nimport Animated, {\n  Easing,\n  useAnimatedStyle,\n  useReducedMotion,\n  useSharedValue,\n  withTiming,\n} from 'react-native-reanimated'\n\nimport type { IconStyle } from '../glyphs/icon-style'\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { BadgeInFlowContext } from '../badge'\nimport { Badge } from '../components/badge'\nimport { IconStyleContext } from '../glyphs/icon-style'\nimport { hitSlop, usePressFeedback } from '../press'\nimport { useLinkPress } from '../router'\nimport { withOpacity } from '../theme/color'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles } from '../theme/styles'\nimport { useTypeRole } from '../typography/roles'\nimport { INDICATOR, PILL_HEIGHT, styles, stylesOf } from './styles'\n\n// The destination NavigationBar and NavigationRail both draw, in the four\n// forms their pages give it, as kanso-ui's src/navigation draws it. Apart\n// from either component, so the two cannot drift.\n//\n// A vertical destination puts its icon in the page's 56dp by 32dp active\n// indicator with the label 4dp under it, in label medium: the bar in a\n// compact window, sharing its width with the others, and the collapsed rail,\n// as wide as the rail. A horizontal one is a pill holding the icon and the\n// label side by side, 16dp in at either end: the bar from the medium window\n// size class at 40dp with 4dp between the two in label medium, and the\n// expanded rail at 56dp with 8dp between them in label large. Which form a\n// destination draws is its bar's or its rail's to say, through the context\n// it hands them.\n//\n// The current destination's indicator is the secondary container, with its\n// icon in on secondary container and, under the indicator, its label in\n// secondary; every other is on surface variant. A label set inside the pill,\n// as a horizontal destination sets it, takes on secondary container instead,\n// as on web: secondary over secondary container is not a pair a scheme is\n// held to, and on secondary container is.\n//\n// **The indicator grows** when its destination becomes current, and shrinks\n// back when another does: from 40% of its width to the whole of it from its\n// centre over `durationLong2` on the emphasized curve, fading in over the\n// first fifth of that, as Material's Android components draw it. Web draws it\n// at once. Under reduced motion it does here too.\n//\n// The state layer, the ripple and the focus ring are src/press's, in on\n// secondary container, drawn on the pill: the indicator in a vertical\n// destination, which its ripple grows from the centre of wherever it is\n// pressed, and the whole destination in a horizontal one. The bar's 40dp\n// pill's press reaches 4dp above and below it, to the 48dp target; a\n// vertical destination is the bar's full height already, and the other two\n// forms are 56dp and 64dp tall. A disabled one draws its icon\n// and label on surface at the disabled content opacity, with no layer.\n//\n// A destination is a `tab`, reporting whether it is the selected one, and is\n// named by its label, or by `aria-label` where that is given: the badge on\n// its icon is hidden from a screen reader, so what it says belongs there.\n//\n// **The label comes first in the tree and is drawn after the icon**, through\n// a reversed column or row, so the text inside a destination starts with its\n// name. A badge's count is text, hidden from a screen reader but still\n// written inside the destination under React Native Web, and first in the\n// tree it put the count ahead of the name: a destination named \"Second item,\n// 3 new\" read \"3 Second item\", which is not what a speech-input user would\n// say, and is what axe's label-in-name check fails. src/badge sets the count\n// apart from the label with a space for the same reason.\n\n/** What a bar hands each of its destinations. */\ntype NavigationContextValue = {\n  readonly form: NavigationForm\n  /**\n   * Whether the destinations are being drawn off screen to measure the\n   * horizontal form, which draws each one's content and nothing else.\n   */\n  readonly measuring: boolean\n  /** The route of the current destination, matched against an `href`. */\n  readonly selectedRoute?: string | undefined\n}\n\ntype NavigationDestinationProps = Omit<\n  PressableProps,\n  'children' | 'disabled' | 'style'\n> & {\n  /**\n   * A badge on the icon: `true` for the badges page's small dot, a number\n   * for the large badge holding it. The badge is hidden from a screen\n   * reader, so say what it says in the destination's `aria-label` too:\n   * \"First item, 3 new\".\n   */\n  readonly badge?: boolean | number | undefined\n  /** The destination's name, drawn as its label. */\n  readonly children?: ReactNode\n  /**\n   * The destination's icon, at the page's 24dp, which the destination hands\n   * its colour and size through `useIconStyle()`.\n   */\n  readonly icon?: ReactNode\n  /**\n   * Draws the destination disabled, and it takes no press.\n   * @default false\n   */\n  readonly isDisabled?: boolean\n  readonly ref?: Ref<ComponentRef<typeof View>>\n  readonly style?: StyleProp<ViewStyle>\n}\n\n/**\n * Which form a destination draws: the bar's `vertical` and `horizontal`,\n * and the rail's `collapsed` and `expanded`. The label is under the icon in\n * the first and the third, and beside it in the other two.\n */\ntype NavigationForm = 'collapsed' | 'expanded' | 'horizontal' | 'vertical'\n\ntype NavigationItemProps = NavigationDestinationProps & {\n  /**\n   * Where the destination goes, through the app's router, and what the\n   * `selectedRoute` around it is matched against.\n   */\n  readonly href: string\n}\n\n// The indicator's width when it starts to grow, as a share of its whole\n// width, and the share of the move it fades in over.\nconst GROWN_FROM = 0.4\nconst FADE_SHARE = 0.2\n\nconst ICON_SIZE = 24\n\n// Whether a form sets the label beside the icon rather than under it.\nconst BESIDE: Readonly<Record<NavigationForm, boolean>> = {\n  collapsed: false,\n  expanded: true,\n  horizontal: true,\n  vertical: false,\n}\n\nconst NavigationContext = createContext<NavigationContextValue>({\n  form: 'vertical',\n  measuring: false,\n})\n\n/**\n * The active indicator's fill, which grows from its centre while its\n * destination is current and shrinks back once it is not.\n */\nfunction ActiveIndicator({ selected }: { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { colors, motion } = theme\n  const reduceMotion = useReducedMotion()\n  const progress = useSharedValue(selected ? 1 : 0)\n\n  useEffect(() => {\n    const target = selected ? 1 : 0\n\n    progress.set(\n      reduceMotion\n        ? target\n        : withTiming(target, {\n            duration: motion.durationLong2,\n            easing: Easing.bezier(...motion.easingEmphasized),\n          }),\n    )\n  }, [motion, progress, reduceMotion, selected])\n\n  const motionStyle = useAnimatedStyle(() => {\n    'worklet'\n    const grown = progress.get()\n\n    return {\n      opacity: Math.min(1, grown / FADE_SHARE),\n      transform: [{ scaleX: GROWN_FROM + (1 - GROWN_FROM) * grown }],\n    }\n  })\n\n  return (\n    <Animated.View\n      style={composeStyles<AnimatedStyle<ViewStyle>>(\n        styles.fill,\n        stylesOf(theme).pill,\n        { backgroundColor: colors.secondaryContainer },\n        motionStyle,\n      )}\n    />\n  )\n}\n\n/**\n * What a destination draws over its indicator: the icon and its badge, and\n * where the label is beside the icon the label before them in the tree,\n * which the pill's reversed row draws after them.\n */\nfunction DestinationContent({\n  badge,\n  form,\n  icon,\n  isDisabled,\n  label,\n  selected,\n}: {\n  readonly badge: boolean | number | undefined\n  readonly form: NavigationForm\n  readonly icon: ReactNode\n  readonly isDisabled: boolean\n  readonly label: ReactNode\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const beside = BESIDE[form]\n\n  return (\n    <>\n      {beside ? (\n        <Label form={form} isDisabled={isDisabled} selected={selected}>\n          {label}\n        </Label>\n      ) : null}\n      <View style={styles.icon}>\n        <IconStyleContext\n          value={iconStyleOf(iconColorOf(theme, isDisabled, selected))}\n        >\n          {badge === undefined || badge === false ? (\n            icon\n          ) : (\n            <BadgeInFlowContext value={beside}>\n              <Badge count={badge === true ? undefined : badge}>{icon}</Badge>\n            </BadgeInFlowContext>\n          )}\n        </IconStyleContext>\n      </View>\n    </>\n  )\n}\n\n/** The colour a destination draws its icon in. */\nfunction iconColorOf(\n  { colors, stateLayerOpacity }: ResolvedTheme,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  if (isDisabled) {\n    return withOpacity(colors.onSurface, stateLayerOpacity.disabledContent)\n  }\n  return selected ? colors.onSecondaryContainer : colors.onSurfaceVariant\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/**\n * A destination's label, on one line: in label large in an expanded rail,\n * and in label medium everywhere else.\n */\nfunction Label({\n  children,\n  form,\n  isDisabled,\n  selected,\n}: {\n  readonly children: ReactNode\n  readonly form: NavigationForm\n  readonly isDisabled: boolean\n  readonly selected: boolean\n}) {\n  const theme = useTheme()\n  const role = useTypeRole(form === 'expanded' ? 'labelLarge' : 'labelMedium')\n\n  return (\n    <NativeText\n      numberOfLines={1}\n      style={composeStyles<TextStyle>(role, styles.label, {\n        color: labelColorOf(theme, form, isDisabled, selected),\n      })}\n    >\n      {children}\n    </NativeText>\n  )\n}\n\n/** The colour a destination draws its label in, which its form decides. */\nfunction labelColorOf(\n  theme: ResolvedTheme,\n  form: NavigationForm,\n  isDisabled: boolean,\n  selected: boolean,\n): string {\n  return selected && !isDisabled && !BESIDE[form]\n    ? theme.colors.secondary\n    : iconColorOf(theme, isDisabled, selected)\n}\n\n// A label that is a string names its destination; anything else leaves the\n// name to `aria-label`.\nfunction nameOf(children: ReactNode): string | undefined {\n  return typeof children === 'string' ? children : undefined\n}\n\n/**\n * One destination, in the form the bar around it asks for: an icon and a\n * label, and the active indicator behind the icon while it is current. A\n * `tab` reporting whether it is selected.\n */\nfunction NavigationDestination({\n  'aria-label': ariaLabel,\n  badge,\n  children,\n  icon,\n  isDisabled = false,\n  onBlur,\n  onFocus,\n  onHoverIn,\n  onHoverOut,\n  onPressIn,\n  onPressOut,\n  selected,\n  style,\n  ...props\n}: NavigationDestinationProps & { readonly selected: boolean }) {\n  const theme = useTheme()\n  const { form, measuring } = use(NavigationContext)\n  const own = stylesOf(theme)\n  const beside = BESIDE[form]\n  const feedback = usePressFeedback({\n    area: beside ? undefined : INDICATOR,\n    color: theme.colors.onSecondaryContainer,\n    corners: own.pill,\n    disabled: isDisabled,\n    onBlur,\n    onFocus,\n    onHoverIn,\n    onHoverOut,\n    onPressIn,\n    onPressOut,\n  })\n  const content = (\n    <DestinationContent\n      badge={badge}\n      form={form}\n      icon={icon}\n      isDisabled={isDisabled}\n      label={children}\n      selected={selected}\n    />\n  )\n\n  if (measuring) {\n    return <View style={own.horizontal}>{content}</View>\n  }\n\n  if (beside) {\n    return (\n      <Pressable\n        aria-label={ariaLabel ?? nameOf(children)}\n        aria-selected={selected}\n        hitSlop={form === 'horizontal' ? hitSlop(PILL_HEIGHT) : undefined}\n        role=\"tab\"\n        {...props}\n        {...feedback.handlers}\n        disabled={isDisabled}\n        style={composeStyles<ViewStyle>(own[form], feedback.ring, style)}\n      >\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </Pressable>\n    )\n  }\n\n  return (\n    <Pressable\n      aria-label={ariaLabel ?? nameOf(children)}\n      aria-selected={selected}\n      role=\"tab\"\n      {...props}\n      {...feedback.handlers}\n      disabled={isDisabled}\n      style={composeStyles<ViewStyle>(own[form], style)}\n    >\n      <Label form={form} isDisabled={isDisabled} selected={selected}>\n        {children}\n      </Label>\n      <View style={composeStyles<ViewStyle>(own.indicator, feedback.ring)}>\n        <ActiveIndicator selected={selected} />\n        {feedback.layer}\n        {content}\n      </View>\n    </Pressable>\n  )\n}\n\n/**\n * A destination that goes to its `href` through the app's router, selected\n * while the `selectedRoute` around it is that `href`: the item of a bar and\n * of a rail alike.\n */\nfunction NavigationItem({ href, onPress, ...props }: NavigationItemProps) {\n  const { selectedRoute } = use(NavigationContext)\n  const press = useLinkPress(href, onPress)\n\n  return (\n    <NavigationDestination\n      {...props}\n      onPress={press}\n      selected={selectedRoute !== undefined && href === selectedRoute}\n    />\n  )\n}\n\nexport type {\n  NavigationContextValue,\n  NavigationDestinationProps,\n  NavigationForm,\n  NavigationItemProps,\n}\n\nexport {\n  iconColorOf,\n  labelColorOf,\n  NavigationContext,\n  NavigationDestination,\n  NavigationItem,\n}\n"],"mappings":"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"}

package/dist/number/count.js

@@ -0,0 +1,15 @@
+//#region src/number/count.ts
+const formats = /* @__PURE__ */ new Map();
+/** A count in `locale`'s digits and grouping. */
+function formatCount(count, locale) {
+	let format = formats.get(locale);
+	if (format === void 0) {
+		format = new Intl.NumberFormat(locale);
+		formats.set(locale, format);
+	}
+	return format.format(count);
+}
+//#endregion
+export { formatCount };
+
+//# sourceMappingURL=count.js.map

package/dist/number/count.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"count.js","names":["formats","Map","Intl","NumberFormat","formatCount","count","locale","format","get","undefined","set"],"sources":["../../src/number/count.ts"],"sourcesContent":["// One plain formatter per locale, for the counts a badge and a field's counter\n// write, which change often enough that building a formatter on each would\n// show. The keys are the locales an app renders in, so the map settles at that\n// size.\nconst formats = new Map<string, Intl.NumberFormat>()\n\n/** A count in `locale`'s digits and grouping. */\nfunction formatCount(count: number, locale: string) {\n  let format = formats.get(locale)\n\n  if (format === undefined) {\n    format = new Intl.NumberFormat(locale)\n    formats.set(locale, format)\n  }\n\n  return format.format(count)\n}\n\nexport { formatCount }\n"],"mappings":";AAIA,MAAMA,0BAAU,IAAIC,IAA+B;;AAGnD,SAASG,YAAYC,OAAeC,QAAgB;CAClD,IAAIC,SAASP,QAAQQ,IAAIF,MAAM;CAE/B,IAAIC,WAAWE,KAAAA,GAAW;EACxBF,SAAS,IAAIL,KAAKC,aAAaG,MAAM;EACrCN,QAAQU,IAAIJ,QAAQC,MAAM;CAC5B;CAEA,OAAOA,OAAOA,OAAOF,KAAK;AAC5B"}

package/dist/number/locale.js.map

@@ -1 +1 @@
-{"version":3,"file":"locale.js","names":["deviceLocale","localeOf","locale","undefined","Intl","NumberFormat","supportedLocalesOf","resolvedOptions"],"sources":["../../src/number/locale.ts"],"sourcesContent":["// The locale a component writes its numbers in, and src/i18n its words: the\n// one given, where the runtime takes it as a locale at all, or the device's.\n// Web reads the page's from React Aria's `I18nProvider`; React Native has no\n// such context, so a component that formats a number takes the locale as a\n// prop and falls back to this.\n\nlet deviceLocale: string | undefined\n\nfunction localeOf(locale: string | undefined) {\n  if (locale !== undefined) {\n    try {\n      Intl.NumberFormat.supportedLocalesOf(locale)\n      return locale\n    } catch {\n      // A malformed tag, which falls back to the device's.\n    }\n  }\n\n  deviceLocale ??= new Intl.NumberFormat().resolvedOptions().locale\n  return deviceLocale\n}\n\nexport { localeOf }\n"],"mappings":";AAMA,IAAIA;AAEJ,SAASC,SAASC,QAA4B;CAC5C,IAAIA,WAAWC,KAAAA,GACb,IAAI;EACFC,KAAKC,aAAaC,mBAAmBJ,MAAM;EAC3C,OAAOA;CACT,QAAQ,CACN;CAIJF,iBAAiB,IAAII,KAAKC,aAAa,CAAC,CAACE,gBAAgB,CAAC,CAACL;CAC3D,OAAOF;AACT"}
+{"version":3,"file":"locale.js","names":["deviceLocale","localeOf","locale","undefined","Intl","NumberFormat","supportedLocalesOf","resolvedOptions"],"sources":["../../src/number/locale.ts"],"sourcesContent":["// The locale a component writes its numbers in, and src/i18n its words: the\n// one given, where the runtime takes it as a locale at all, or the device's.\n// Which one is given is `useLocaleOf`'s in src/i18n/provider.tsx, the\n// component's own prop or the `I18nProvider`'s, as web reads the page's from\n// React Aria's provider.\n\nlet deviceLocale: string | undefined\n\nfunction localeOf(locale: string | undefined) {\n  if (locale !== undefined) {\n    try {\n      Intl.NumberFormat.supportedLocalesOf(locale)\n      return locale\n    } catch {\n      // A malformed tag, which falls back to the device's.\n    }\n  }\n\n  deviceLocale ??= new Intl.NumberFormat().resolvedOptions().locale\n  return deviceLocale\n}\n\nexport { localeOf }\n"],"mappings":";AAMA,IAAIA;AAEJ,SAASC,SAASC,QAA4B;CAC5C,IAAIA,WAAWC,KAAAA,GACb,IAAI;EACFC,KAAKC,aAAaC,mBAAmBJ,MAAM;EAC3C,OAAOA;CACT,QAAQ,CACN;CAIJF,iBAAiB,IAAII,KAAKC,aAAa,CAAC,CAACE,gBAAgB,CAAC,CAACL;CAC3D,OAAOF;AACT"}

package/dist/overlay/host.js

@@ -1,4 +1,5 @@
 import { ScopeContext, useScope } from "../theme/scope.js";
+import { I18nProvider, useProvidedLocale } from "../i18n/provider.js";
 import { c } from "react/compiler-runtime";
 import { StyleSheet, View } from "react-native";
 import { createContext, use, useId, useLayoutEffect, useState, useSyncExternalStore } from "react";
@@ -18,59 +19,67 @@ const styles = StyleSheet.create({ fill: {
 * outermost `ThemeScope`, for as long as it is mounted. A later overlay draws
 * above an earlier one.
 *
-* The content reads the `ThemeScope` around the `Overlay`, as anything else
-* there would. Other context set between the host and the `Overlay` does not
-* reach it: an overlay is a surface of its own, as web's `OverlayScope` makes
-* one, so it starts from what is around the app rather than from what is
-* around the control that opened it.
+* The content reads the `ThemeScope` and the `I18nProvider` around the
+* `Overlay`, as anything else there would, so a dialog writes in the locale
+* of the screen that opened it, as web's portal does. Other context set
+* between the host and the `Overlay` does not reach it: an overlay is a
+* surface of its own, as web's `OverlayScope` makes one, so it starts from
+* what is around the app rather than from what is around the control that
+* opened it.
 */
 function Overlay(t0) {
-	const $ = c(10);
+	const $ = c(11);
 	const { children } = t0;
 	const store = use(OverlayHostContext);
 	const scope = useScope();
+	const locale = useProvidedLocale();
 	const key = useId();
 	if (store === null) throw new Error("An overlay draws in the host of the outermost ThemeScope, and there is no ThemeScope around this one. Wrap the app in a ThemeScope.");
 	let t1;
 	let t2;
-	if ($[0] !== children || $[1] !== key || $[2] !== scope || $[3] !== store) {
+	if ($[0] !== children || $[1] !== key || $[2] !== locale || $[3] !== scope || $[4] !== store) {
 		t1 = () => {
 			store.set(key, /* @__PURE__ */ jsx(ScopeContext, {
 				value: scope,
-				children
+				children: /* @__PURE__ */ jsx(I18nProvider, {
+					locale,
+					children
+				})
 			}));
 		};
 		t2 = [
 			children,
 			key,
+			locale,
 			scope,
 			store
 		];
 		$[0] = children;
 		$[1] = key;
-		$[2] = scope;
-		$[3] = store;
-		$[4] = t1;
-		$[5] = t2;
+		$[2] = locale;
+		$[3] = scope;
+		$[4] = store;
+		$[5] = t1;
+		$[6] = t2;
 	} else {
-		t1 = $[4];
-		t2 = $[5];
+		t1 = $[5];
+		t2 = $[6];
 	}
 	useLayoutEffect(t1, t2);
 	let t3;
 	let t4;
-	if ($[6] !== key || $[7] !== store) {
+	if ($[7] !== key || $[8] !== store) {
 		t3 = () => () => {
 			store.remove(key);
 		};
 		t4 = [key, store];
-		$[6] = key;
-		$[7] = store;
-		$[8] = t3;
-		$[9] = t4;
+		$[7] = key;
+		$[8] = store;
+		$[9] = t3;
+		$[10] = t4;
 	} else {
-		t3 = $[8];
-		t4 = $[9];
+		t3 = $[9];
+		t4 = $[10];
 	}
 	useLayoutEffect(t3, t4);
 	return null;

package/dist/overlay/host.js.map

@@ -1 +1 @@
-{"version":3,"file":"host.js","names":["ComponentRef","ReactNode","createContext","use","useId","useLayoutEffect","useState","useSyncExternalStore","StyleSheet","View","ScopeContext","useScope","Entry","key","content","OverlayStore","attach","layer","entries","remove","set","subscribe","listener","OverlayHostContext","styles","create","fill","bottom","left","pointerEvents","position","right","top","Overlay","t0","$","_c","children","store","scope","Error","t1","t2","t3","t4","OverlayHost","storeFor","OverlayLayer","map","_temp","Map","listeners","Set","changed","view","delete","node","add","_c"],"sources":["../../src/overlay/host.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode } from 'react'\n\nimport {\n  createContext,\n  use,\n  useId,\n  useLayoutEffect,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { ScopeContext, useScope } from '../theme/scope'\n\ntype Entry = readonly [key: string, content: ReactNode]\n\n/** What an overlay reaches its host through. */\ntype OverlayStore = {\n  /** Takes the layer the host draws its overlays in, as its ref. */\n  readonly attach: (layer: ComponentRef<typeof View> | null) => void\n  readonly entries: () => readonly Entry[]\n  /** The layer the host draws its overlays in, for placing one in it. */\n  readonly layer: () => ComponentRef<typeof View> | null\n  readonly remove: (key: string) => void\n  readonly set: (key: string, content: ReactNode) => void\n  readonly subscribe: (listener: () => void) => () => void\n}\n\nconst OverlayHostContext = createContext<null | OverlayStore>(null)\n\nconst styles = StyleSheet.create({\n  // Each overlay fills the layer on a box of its own, so one laid out in the\n  // flow, as a bar along an edge is, is laid out against the screen rather\n  // than after the overlay before it.\n  fill: {\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'box-none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n/**\n * Draws its content above the screen, in the overlay host of the app's\n * outermost `ThemeScope`, for as long as it is mounted. A later overlay draws\n * above an earlier one.\n *\n * The content reads the `ThemeScope` around the `Overlay`, as anything else\n * there would. Other context set between the host and the `Overlay` does not\n * reach it: an overlay is a surface of its own, as web's `OverlayScope` makes\n * one, so it starts from what is around the app rather than from what is\n * around the control that opened it.\n */\nfunction Overlay({ children }: { readonly children?: ReactNode }) {\n  const store = use(OverlayHostContext)\n  const scope = useScope()\n  const key = useId()\n\n  if (store === null) {\n    throw new Error(\n      'An overlay draws in the host of the outermost ThemeScope, and there is no ThemeScope around this one. Wrap the app in a ThemeScope.',\n    )\n  }\n\n  // Set before paint, so an overlay opening never draws a frame without it,\n  // and replaced in place on an update, so it keeps its place in the stack.\n  useLayoutEffect(() => {\n    store.set(key, <ScopeContext value={scope}>{children}</ScopeContext>)\n  }, [children, key, scope, store])\n\n  useLayoutEffect(\n    () => () => {\n      store.remove(key)\n    },\n    [key, store],\n  )\n\n  return null\n}\n\n/**\n * Hosts the overlays drawn inside it: its children, then a layer over them\n * that fills the view around the host. Mounting or unmounting an overlay\n * renders the layer alone, so the screen under it keeps its state.\n *\n * The outermost `ThemeScope` renders one, so an app has one at its root.\n */\nfunction OverlayHost({ children }: { readonly children?: ReactNode }) {\n  const [store] = useState(storeFor)\n\n  return (\n    <OverlayHostContext value={store}>\n      {children}\n      <OverlayLayer attach={store.attach} store={store} />\n    </OverlayHostContext>\n  )\n}\n\n// The layer passes a touch through to the screen wherever no overlay is\n// drawn, so an open overlay leaves the screen around it usable. It takes its\n// ref apart from the store, since the compiler reads an object a ref is taken\n// from as a ref itself, and the store is read during render.\nfunction OverlayLayer({\n  attach,\n  store,\n}: {\n  readonly attach: OverlayStore['attach']\n  readonly store: OverlayStore\n}) {\n  const entries = useSyncExternalStore(store.subscribe, store.entries)\n\n  return (\n    <View ref={attach} style={styles.fill}>\n      {entries.map(([key, content]) => (\n        <View key={key} style={styles.fill}>\n          {content}\n        </View>\n      ))}\n    </View>\n  )\n}\n\nfunction storeFor(): OverlayStore {\n  const content = new Map<string, ReactNode>()\n  const listeners = new Set<() => void>()\n  let entries: readonly Entry[] = []\n  let layer: ComponentRef<typeof View> | null = null\n\n  const changed = () => {\n    entries = [...content]\n    for (const listener of listeners) {\n      listener()\n    }\n  }\n\n  return {\n    attach: (view) => {\n      layer = view\n    },\n    entries: () => entries,\n    layer: () => layer,\n    remove: (key) => {\n      if (content.delete(key)) {\n        changed()\n      }\n    },\n    set: (key, node) => {\n      content.set(key, node)\n      changed()\n    },\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n  }\n}\n\nexport type { OverlayStore }\n\nexport { Overlay, OverlayHost, OverlayHostContext }\n"],"mappings":"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"}
+{"version":3,"file":"host.js","names":["ComponentRef","ReactNode","createContext","use","useId","useLayoutEffect","useState","useSyncExternalStore","StyleSheet","View","I18nProvider","useProvidedLocale","ScopeContext","useScope","Entry","key","content","OverlayStore","attach","layer","entries","remove","set","subscribe","listener","OverlayHostContext","styles","create","fill","bottom","left","pointerEvents","position","right","top","Overlay","t0","$","_c","children","store","scope","locale","Error","t1","t2","t3","t4","OverlayHost","storeFor","OverlayLayer","map","_temp","Map","listeners","Set","changed","view","delete","node","add","_c"],"sources":["../../src/overlay/host.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode } from 'react'\n\nimport {\n  createContext,\n  use,\n  useId,\n  useLayoutEffect,\n  useState,\n  useSyncExternalStore,\n} from 'react'\nimport { StyleSheet, View } from 'react-native'\n\nimport { I18nProvider, useProvidedLocale } from '../i18n/provider'\nimport { ScopeContext, useScope } from '../theme/scope'\n\ntype Entry = readonly [key: string, content: ReactNode]\n\n/** What an overlay reaches its host through. */\ntype OverlayStore = {\n  /** Takes the layer the host draws its overlays in, as its ref. */\n  readonly attach: (layer: ComponentRef<typeof View> | null) => void\n  readonly entries: () => readonly Entry[]\n  /** The layer the host draws its overlays in, for placing one in it. */\n  readonly layer: () => ComponentRef<typeof View> | null\n  readonly remove: (key: string) => void\n  readonly set: (key: string, content: ReactNode) => void\n  readonly subscribe: (listener: () => void) => () => void\n}\n\nconst OverlayHostContext = createContext<null | OverlayStore>(null)\n\nconst styles = StyleSheet.create({\n  // Each overlay fills the layer on a box of its own, so one laid out in the\n  // flow, as a bar along an edge is, is laid out against the screen rather\n  // than after the overlay before it.\n  fill: {\n    bottom: 0,\n    left: 0,\n    pointerEvents: 'box-none',\n    position: 'absolute',\n    right: 0,\n    top: 0,\n  },\n})\n\n/**\n * Draws its content above the screen, in the overlay host of the app's\n * outermost `ThemeScope`, for as long as it is mounted. A later overlay draws\n * above an earlier one.\n *\n * The content reads the `ThemeScope` and the `I18nProvider` around the\n * `Overlay`, as anything else there would, so a dialog writes in the locale\n * of the screen that opened it, as web's portal does. Other context set\n * between the host and the `Overlay` does not reach it: an overlay is a\n * surface of its own, as web's `OverlayScope` makes one, so it starts from\n * what is around the app rather than from what is around the control that\n * opened it.\n */\nfunction Overlay({ children }: { readonly children?: ReactNode }) {\n  const store = use(OverlayHostContext)\n  const scope = useScope()\n  const locale = useProvidedLocale()\n  const key = useId()\n\n  if (store === null) {\n    throw new Error(\n      'An overlay draws in the host of the outermost ThemeScope, and there is no ThemeScope around this one. Wrap the app in a ThemeScope.',\n    )\n  }\n\n  // Set before paint, so an overlay opening never draws a frame without it,\n  // and replaced in place on an update, so it keeps its place in the stack.\n  useLayoutEffect(() => {\n    store.set(\n      key,\n      <ScopeContext value={scope}>\n        <I18nProvider locale={locale}>{children}</I18nProvider>\n      </ScopeContext>,\n    )\n  }, [children, key, locale, scope, store])\n\n  useLayoutEffect(\n    () => () => {\n      store.remove(key)\n    },\n    [key, store],\n  )\n\n  return null\n}\n\n/**\n * Hosts the overlays drawn inside it: its children, then a layer over them\n * that fills the view around the host. Mounting or unmounting an overlay\n * renders the layer alone, so the screen under it keeps its state.\n *\n * The outermost `ThemeScope` renders one, so an app has one at its root.\n */\nfunction OverlayHost({ children }: { readonly children?: ReactNode }) {\n  const [store] = useState(storeFor)\n\n  return (\n    <OverlayHostContext value={store}>\n      {children}\n      <OverlayLayer attach={store.attach} store={store} />\n    </OverlayHostContext>\n  )\n}\n\n// The layer passes a touch through to the screen wherever no overlay is\n// drawn, so an open overlay leaves the screen around it usable. It takes its\n// ref apart from the store, since the compiler reads an object a ref is taken\n// from as a ref itself, and the store is read during render.\nfunction OverlayLayer({\n  attach,\n  store,\n}: {\n  readonly attach: OverlayStore['attach']\n  readonly store: OverlayStore\n}) {\n  const entries = useSyncExternalStore(store.subscribe, store.entries)\n\n  return (\n    <View ref={attach} style={styles.fill}>\n      {entries.map(([key, content]) => (\n        <View key={key} style={styles.fill}>\n          {content}\n        </View>\n      ))}\n    </View>\n  )\n}\n\nfunction storeFor(): OverlayStore {\n  const content = new Map<string, ReactNode>()\n  const listeners = new Set<() => void>()\n  let entries: readonly Entry[] = []\n  let layer: ComponentRef<typeof View> | null = null\n\n  const changed = () => {\n    entries = [...content]\n    for (const listener of listeners) {\n      listener()\n    }\n  }\n\n  return {\n    attach: (view) => {\n      layer = view\n    },\n    entries: () => entries,\n    layer: () => layer,\n    remove: (key) => {\n      if (content.delete(key)) {\n        changed()\n      }\n    },\n    set: (key, node) => {\n      content.set(key, node)\n      changed()\n    },\n    subscribe: (listener) => {\n      listeners.add(listener)\n      return () => {\n        listeners.delete(listener)\n      }\n    },\n  }\n}\n\nexport type { OverlayStore }\n\nexport { Overlay, OverlayHost, OverlayHostContext }\n"],"mappings":"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"}

package/dist/overlay/placement.js

@@ -28,7 +28,9 @@ function boundsOf(window, insets, padding) {
 }
 function edgeOf(align, inline, rtl) {
 	if (align === "center") return "center";
-	return align === "start" === (inline && rtl) ? "far" : "near";
+	const fromRight = inline && rtl;
+	if (align === "start") return fromRight ? "far" : "near";
+	return fromRight ? "near" : "far";
 }
 function isVertical(side) {
 	return side === "bottom" || side === "top";

package/dist/overlay/placement.js.map

@@ -1 +1 @@
-{"version":3,"file":"placement.js","names":["Edge","OverlayAlign","OverlaySide","Placement","maxHeight","side","x","y","PlacementInput","align","alignOffset","anchor","Rect","bounds","rtl","sideOffset","surface","Size","height","width","OPPOSITE","bottom","left","right","top","const","Record","along","start","length","size","edge","offset","lined","Math","min","max","boundsOf","window","insets","padding","edgeOf","inline","isVertical","place","preferred","room","on","spaceOn","opposite","within","position"],"sources":["../../src/overlay/placement.ts"],"sourcesContent":["// Which end of the anchor the surface lines up with, along the side.\ntype Edge = 'center' | 'far' | 'near'\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start'\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top'\n\n/** Where an anchored surface sits, in the coordinates its inputs were in. */\ntype Placement = {\n  /**\n   * The height the surface may take before it would pass the edge of the\n   * bounds on the side it opened on. A surface taller than this scrolls.\n   */\n  readonly maxHeight: number\n  /** The side it opened on, which is the opposite one after a flip. */\n  readonly side: OverlaySide\n  readonly x: number\n  readonly y: number\n}\n\ntype PlacementInput = {\n  readonly align: OverlayAlign\n  /** Moves the surface along the side, in dp: right or down when positive. */\n  readonly alignOffset: number\n  readonly anchor: Rect\n  /** The area the surface stays inside, padding already taken off. */\n  readonly bounds: Rect\n  /** Whether `start` and `end` read from the right, on `top` and `bottom`. */\n  readonly rtl: boolean\n  readonly side: OverlaySide\n  /** The gap between the anchor and the surface, in dp. */\n  readonly sideOffset: number\n  readonly surface: Size\n}\n\ntype Rect = Size & { readonly x: number; readonly y: number }\n\ntype Size = { readonly height: number; readonly width: number }\n\nconst OPPOSITE = {\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n  top: 'bottom',\n} as const satisfies Record<OverlaySide, OverlaySide>\n\n/**\n * Where a surface of a given length starts along the anchor, for an edge,\n * moved by the offset. However far the offset moves it, it keeps overlapping\n * the anchor, as React Aria's placement does on web.\n */\nfunction along(\n  start: number,\n  length: number,\n  size: number,\n  edge: Edge,\n  offset: number,\n) {\n  const lined =\n    edge === 'near'\n      ? start\n      : edge === 'far'\n        ? start + length - size\n        : start + (length - size) / 2\n\n  return Math.min(Math.max(lined + offset, start - size), start + length)\n}\n\n/**\n * Bounds a surface stays inside: the window, less the safe area's insets and\n * a padding on every side.\n */\nfunction boundsOf(\n  window: Size,\n  insets: { bottom: number; left: number; right: number; top: number },\n  padding: number,\n): Rect {\n  return {\n    height: window.height - insets.top - insets.bottom - padding * 2,\n    width: window.width - insets.left - insets.right - padding * 2,\n    x: insets.left + padding,\n    y: insets.top + padding,\n  }\n}\n\n// Which end of the anchor an alignment names. On `top` and `bottom` the\n// surface lines up along the inline axis, so `start` is the left edge, or the\n// right one in a right-to-left layout; on `left` and `right` it lines up along\n// the block axis, where `start` is the top edge in both.\nfunction edgeOf(align: OverlayAlign, inline: boolean, rtl: boolean): Edge {\n  if (align === 'center') {\n    return 'center'\n  }\n\n  return (align === 'start') === (inline && rtl) ? 'far' : 'near'\n}\n\nfunction isVertical(side: OverlaySide) {\n  return side === 'bottom' || side === 'top'\n}\n\n/**\n * Places a surface beside its anchor, as React Aria places a popover on web.\n *\n * It opens on `side`, lined up along it by `align`, and flips to the opposite\n * side when it does not fit and that side has more room. Along the side it is\n * shifted to stay inside the bounds; across it, on `top` and `bottom`, it\n * stays inside them through `maxHeight`, and on `left` and `right`, where a\n * surface wider than both sides has nowhere to go, it is shifted over the\n * anchor rather than past the edge.\n */\nfunction place({\n  align,\n  alignOffset,\n  anchor,\n  bounds,\n  rtl,\n  side: preferred,\n  sideOffset,\n  surface,\n}: PlacementInput): Placement {\n  const room = (on: OverlaySide) => spaceOn(on, anchor, bounds, sideOffset)\n  const opposite = OPPOSITE[preferred]\n  const length = isVertical(preferred) ? surface.height : surface.width\n  const side =\n    length > room(preferred) && room(opposite) > room(preferred)\n      ? opposite\n      : preferred\n\n  if (isVertical(side)) {\n    const maxHeight = Math.max(0, room(side))\n    const height = Math.min(surface.height, maxHeight)\n    const x = along(\n      anchor.x,\n      anchor.width,\n      surface.width,\n      edgeOf(align, true, rtl),\n      alignOffset,\n    )\n\n    return {\n      maxHeight,\n      side,\n      x: within(x, bounds.x, bounds.width, surface.width),\n      y:\n        side === 'bottom'\n          ? anchor.y + anchor.height + sideOffset\n          : anchor.y - sideOffset - height,\n    }\n  }\n\n  const maxHeight = Math.max(0, bounds.height)\n  const height = Math.min(surface.height, maxHeight)\n  const x =\n    side === 'right'\n      ? anchor.x + anchor.width + sideOffset\n      : anchor.x - sideOffset - surface.width\n  const y = along(\n    anchor.y,\n    anchor.height,\n    height,\n    edgeOf(align, false, rtl),\n    alignOffset,\n  )\n\n  return {\n    maxHeight,\n    side,\n    x: within(x, bounds.x, bounds.width, surface.width),\n    y: within(y, bounds.y, bounds.height, height),\n  }\n}\n\n// The room between the anchor and the edge of the bounds on a side, less the\n// gap the surface keeps from the anchor.\nfunction spaceOn(\n  side: OverlaySide,\n  anchor: Rect,\n  bounds: Rect,\n  sideOffset: number,\n) {\n  const room = {\n    bottom: bounds.y + bounds.height - anchor.y - anchor.height,\n    left: anchor.x - bounds.x,\n    right: bounds.x + bounds.width - anchor.x - anchor.width,\n    top: anchor.y - bounds.y,\n  }\n\n  return room[side] - sideOffset\n}\n\n// Shifts a surface along an axis until it is inside the bounds, or, when it is\n// longer than they are, until it starts where they start.\nfunction within(position: number, start: number, length: number, size: number) {\n  if (position < start) {\n    return start\n  }\n\n  if (position + size > start + length) {\n    return Math.max(start + length - size, start)\n  }\n\n  return position\n}\n\nexport type { OverlayAlign, OverlaySide, Placement, PlacementInput, Rect, Size }\n\nexport { boundsOf, place }\n"],"mappings":";AAyCA,MAAMoB,WAAW;CACfC,QAAQ;CACRC,MAAM;CACNC,OAAO;CACPC,KAAK;AACP;;;;;;AAOA,SAASG,MACPC,OACAC,QACAC,MACAC,MACAC,QACA;CACA,MAAMC,QACJF,SAAS,SACLH,QACAG,SAAS,QACPH,QAAQC,SAASC,OACjBF,SAASC,SAASC,QAAQ;CAElC,OAAOI,KAAKC,IAAID,KAAKE,IAAIH,QAAQD,QAAQJ,QAAQE,IAAI,GAAGF,QAAQC,MAAM;AACxE;;;;;AAMA,SAASQ,SACPC,QACAC,QACAC,SACM;CACN,OAAO;EACLtB,QAAQoB,OAAOpB,SAASqB,OAAOf,MAAMe,OAAOlB,SAASmB,UAAU;EAC/DrB,OAAOmB,OAAOnB,QAAQoB,OAAOjB,OAAOiB,OAAOhB,QAAQiB,UAAU;EAC7DlC,GAAGiC,OAAOjB,OAAOkB;EACjBjC,GAAGgC,OAAOf,MAAMgB;CAClB;AACF;AAMA,SAASC,OAAOhC,OAAqBiC,QAAiB5B,KAAoB;CACxE,IAAIL,UAAU,UACZ,OAAO;CAGT,OAAQA,UAAU,aAAciC,UAAU5B,OAAO,QAAQ;AAC3D;AAEA,SAAS6B,WAAWtC,MAAmB;CACrC,OAAOA,SAAS,YAAYA,SAAS;AACvC;;;;;;;;;;;AAYA,SAASuC,MAAM,EACbnC,OACAC,aACAC,QACAE,QACAC,KACAT,MAAMwC,WACN9B,YACAC,WAC4B;CAC5B,MAAM8B,QAAQC,OAAoBC,QAAQD,IAAIpC,QAAQE,QAAQE,UAAU;CACxE,MAAMkC,WAAW7B,SAASyB;CAE1B,MAAMxC,QADSsC,WAAWE,SAAS,IAAI7B,QAAQE,SAASF,QAAQG,SAErD2B,KAAKD,SAAS,KAAKC,KAAKG,QAAQ,IAAIH,KAAKD,SAAS,IACvDI,WACAJ;CAEN,IAAIF,WAAWtC,IAAI,GAAG;EACpB,MAAMD,YAAY8B,KAAKE,IAAI,GAAGU,KAAKzC,IAAI,CAAC;EACxC,MAAMa,SAASgB,KAAKC,IAAInB,QAAQE,QAAQd,SAAS;EASjD,OAAO;GACLA;GACAC;GACAC,GAAG4C,OAXKvB,MACRhB,OAAOL,GACPK,OAAOQ,OACPH,QAAQG,OACRsB,OAAOhC,OAAO,MAAMK,GAAG,GACvBJ,WAMUJ,GAAGO,OAAOP,GAAGO,OAAOM,OAAOH,QAAQG,KAAK;GAClDZ,GACEF,SAAS,WACLM,OAAOJ,IAAII,OAAOO,SAASH,aAC3BJ,OAAOJ,IAAIQ,aAAaG;EAChC;CACF;CAEA,MAAMd,YAAY8B,KAAKE,IAAI,GAAGvB,OAAOK,MAAM;CAC3C,MAAMA,SAASgB,KAAKC,IAAInB,QAAQE,QAAQd,SAAS;CACjD,MAAME,IACJD,SAAS,UACLM,OAAOL,IAAIK,OAAOQ,QAAQJ,aAC1BJ,OAAOL,IAAIS,aAAaC,QAAQG;CACtC,MAAMZ,IAAIoB,MACRhB,OAAOJ,GACPI,OAAOO,QACPA,QACAuB,OAAOhC,OAAO,OAAOK,GAAG,GACxBJ,WACF;CAEA,OAAO;EACLN;EACAC;EACAC,GAAG4C,OAAO5C,GAAGO,OAAOP,GAAGO,OAAOM,OAAOH,QAAQG,KAAK;EAClDZ,GAAG2C,OAAO3C,GAAGM,OAAON,GAAGM,OAAOK,QAAQA,MAAM;CAC9C;AACF;AAIA,SAAS8B,QACP3C,MACAM,QACAE,QACAE,YACA;CAQA,OAAO+B;EANLzB,QAAQR,OAAON,IAAIM,OAAOK,SAASP,OAAOJ,IAAII,OAAOO;EACrDI,MAAMX,OAAOL,IAAIO,OAAOP;EACxBiB,OAAOV,OAAOP,IAAIO,OAAOM,QAAQR,OAAOL,IAAIK,OAAOQ;EACnDK,KAAKb,OAAOJ,IAAIM,OAAON;CAGlBuC,EAAKzC,QAAQU;AACtB;AAIA,SAASmC,OAAOC,UAAkBvB,OAAeC,QAAgBC,MAAc;CAC7E,IAAIqB,WAAWvB,OACb,OAAOA;CAGT,IAAIuB,WAAWrB,OAAOF,QAAQC,QAC5B,OAAOK,KAAKE,IAAIR,QAAQC,SAASC,MAAMF,KAAK;CAG9C,OAAOuB;AACT"}
+{"version":3,"file":"placement.js","names":["Edge","OverlayAlign","OverlaySide","Placement","maxHeight","side","x","y","PlacementInput","align","alignOffset","anchor","Rect","bounds","rtl","sideOffset","surface","Size","height","width","OPPOSITE","bottom","left","right","top","const","Record","along","start","length","size","edge","offset","lined","Math","min","max","boundsOf","window","insets","padding","edgeOf","inline","fromRight","isVertical","place","preferred","room","on","spaceOn","opposite","within","position"],"sources":["../../src/overlay/placement.ts"],"sourcesContent":["// Which end of the anchor the surface lines up with, along the side.\ntype Edge = 'center' | 'far' | 'near'\n\n/** Where along that side it lines up with the anchor. */\ntype OverlayAlign = 'center' | 'end' | 'start'\n\n/** Which side of the anchor a surface opens on. */\ntype OverlaySide = 'bottom' | 'left' | 'right' | 'top'\n\n/** Where an anchored surface sits, in the coordinates its inputs were in. */\ntype Placement = {\n  /**\n   * The height the surface may take before it would pass the edge of the\n   * bounds on the side it opened on. A surface taller than this scrolls.\n   */\n  readonly maxHeight: number\n  /** The side it opened on, which is the opposite one after a flip. */\n  readonly side: OverlaySide\n  readonly x: number\n  readonly y: number\n}\n\ntype PlacementInput = {\n  readonly align: OverlayAlign\n  /** Moves the surface along the side, in dp: right or down when positive. */\n  readonly alignOffset: number\n  readonly anchor: Rect\n  /** The area the surface stays inside, padding already taken off. */\n  readonly bounds: Rect\n  /** Whether `start` and `end` read from the right, on `top` and `bottom`. */\n  readonly rtl: boolean\n  readonly side: OverlaySide\n  /** The gap between the anchor and the surface, in dp. */\n  readonly sideOffset: number\n  readonly surface: Size\n}\n\ntype Rect = Size & { readonly x: number; readonly y: number }\n\ntype Size = { readonly height: number; readonly width: number }\n\nconst OPPOSITE = {\n  bottom: 'top',\n  left: 'right',\n  right: 'left',\n  top: 'bottom',\n} as const satisfies Record<OverlaySide, OverlaySide>\n\n/**\n * Where a surface of a given length starts along the anchor, for an edge,\n * moved by the offset. However far the offset moves it, it keeps overlapping\n * the anchor, as React Aria's placement does on web.\n */\nfunction along(\n  start: number,\n  length: number,\n  size: number,\n  edge: Edge,\n  offset: number,\n) {\n  const lined =\n    edge === 'near'\n      ? start\n      : edge === 'far'\n        ? start + length - size\n        : start + (length - size) / 2\n\n  return Math.min(Math.max(lined + offset, start - size), start + length)\n}\n\n/**\n * Bounds a surface stays inside: the window, less the safe area's insets and\n * a padding on every side.\n */\nfunction boundsOf(\n  window: Size,\n  insets: { bottom: number; left: number; right: number; top: number },\n  padding: number,\n): Rect {\n  return {\n    height: window.height - insets.top - insets.bottom - padding * 2,\n    width: window.width - insets.left - insets.right - padding * 2,\n    x: insets.left + padding,\n    y: insets.top + padding,\n  }\n}\n\n// Which end of the anchor an alignment names. On `top` and `bottom` the\n// surface lines up along the inline axis, so `start` is the left edge, or the\n// right one in a right-to-left layout; on `left` and `right` it lines up along\n// the block axis, where `start` is the top edge in both.\n//\n// `rtl` is read for its truth rather than compared with a boolean: it comes\n// from `I18nManager.isRTL`, which React Native Web leaves undefined, and an\n// equality with undefined put every `end` at the start there.\nfunction edgeOf(align: OverlayAlign, inline: boolean, rtl: boolean): Edge {\n  if (align === 'center') {\n    return 'center'\n  }\n\n  const fromRight = inline && rtl\n\n  if (align === 'start') {\n    return fromRight ? 'far' : 'near'\n  }\n\n  return fromRight ? 'near' : 'far'\n}\n\nfunction isVertical(side: OverlaySide) {\n  return side === 'bottom' || side === 'top'\n}\n\n/**\n * Places a surface beside its anchor, as React Aria places a popover on web.\n *\n * It opens on `side`, lined up along it by `align`, and flips to the opposite\n * side when it does not fit and that side has more room. Along the side it is\n * shifted to stay inside the bounds; across it, on `top` and `bottom`, it\n * stays inside them through `maxHeight`, and on `left` and `right`, where a\n * surface wider than both sides has nowhere to go, it is shifted over the\n * anchor rather than past the edge.\n */\nfunction place({\n  align,\n  alignOffset,\n  anchor,\n  bounds,\n  rtl,\n  side: preferred,\n  sideOffset,\n  surface,\n}: PlacementInput): Placement {\n  const room = (on: OverlaySide) => spaceOn(on, anchor, bounds, sideOffset)\n  const opposite = OPPOSITE[preferred]\n  const length = isVertical(preferred) ? surface.height : surface.width\n  const side =\n    length > room(preferred) && room(opposite) > room(preferred)\n      ? opposite\n      : preferred\n\n  if (isVertical(side)) {\n    const maxHeight = Math.max(0, room(side))\n    const height = Math.min(surface.height, maxHeight)\n    const x = along(\n      anchor.x,\n      anchor.width,\n      surface.width,\n      edgeOf(align, true, rtl),\n      alignOffset,\n    )\n\n    return {\n      maxHeight,\n      side,\n      x: within(x, bounds.x, bounds.width, surface.width),\n      y:\n        side === 'bottom'\n          ? anchor.y + anchor.height + sideOffset\n          : anchor.y - sideOffset - height,\n    }\n  }\n\n  const maxHeight = Math.max(0, bounds.height)\n  const height = Math.min(surface.height, maxHeight)\n  const x =\n    side === 'right'\n      ? anchor.x + anchor.width + sideOffset\n      : anchor.x - sideOffset - surface.width\n  const y = along(\n    anchor.y,\n    anchor.height,\n    height,\n    edgeOf(align, false, rtl),\n    alignOffset,\n  )\n\n  return {\n    maxHeight,\n    side,\n    x: within(x, bounds.x, bounds.width, surface.width),\n    y: within(y, bounds.y, bounds.height, height),\n  }\n}\n\n// The room between the anchor and the edge of the bounds on a side, less the\n// gap the surface keeps from the anchor.\nfunction spaceOn(\n  side: OverlaySide,\n  anchor: Rect,\n  bounds: Rect,\n  sideOffset: number,\n) {\n  const room = {\n    bottom: bounds.y + bounds.height - anchor.y - anchor.height,\n    left: anchor.x - bounds.x,\n    right: bounds.x + bounds.width - anchor.x - anchor.width,\n    top: anchor.y - bounds.y,\n  }\n\n  return room[side] - sideOffset\n}\n\n// Shifts a surface along an axis until it is inside the bounds, or, when it is\n// longer than they are, until it starts where they start.\nfunction within(position: number, start: number, length: number, size: number) {\n  if (position < start) {\n    return start\n  }\n\n  if (position + size > start + length) {\n    return Math.max(start + length - size, start)\n  }\n\n  return position\n}\n\nexport type { OverlayAlign, OverlaySide, Placement, PlacementInput, Rect, Size }\n\nexport { boundsOf, place }\n"],"mappings":"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"}

package/dist/separator/index.js

@@ -0,0 +1,7 @@
+import { createContext } from "react";
+//#region src/separator/index.ts
+const SeparatorOrientationContext = createContext(null);
+//#endregion
+export { SeparatorOrientationContext };
+
+//# sourceMappingURL=index.js.map

package/dist/separator/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["createContext","SeparatorOrientationContext"],"sources":["../../src/separator/index.ts"],"sourcesContent":["import { createContext } from 'react'\n\n// Which way a Separator runs where its call site does not say, as React\n// Aria's separator context does on web. A Toolbar provides the direction\n// across its own, so a rule between two of its controls divides them rather\n// than running along the bar; a modal window clears it, so a rule in a\n// dialog, sheet or popover opened from the bar draws as it does anywhere\n// else. Null is no direction provided, and a Separator then runs\n// horizontally.\nconst SeparatorOrientationContext = createContext<\n  'horizontal' | 'vertical' | null\n>(null)\n\nexport { SeparatorOrientationContext }\n"],"mappings":";;AASA,MAAMC,8BAA8BD,cAElC,IAAI"}

package/dist/typography/size.js

@@ -0,0 +1,14 @@
+import { createContext, useContext } from "react";
+//#region src/typography/size.ts
+const TextSizeContext = createContext(void 0);
+/**
+* The font size of the library's Text around the caller, or `undefined` when
+* the caller is not inside one.
+*/
+function useTextSize() {
+	return useContext(TextSizeContext);
+}
+//#endregion
+export { TextSizeContext, useTextSize };
+
+//# sourceMappingURL=size.js.map

package/dist/typography/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","names":["createContext","useContext","TextSizeContext","undefined","useTextSize"],"sources":["../../src/typography/size.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\n// The font size the Text around a caller draws in, once its role and its call\n// site's style have both applied, and `undefined` outside one. A native Text\n// nested in another takes the outer one's size without being able to read it,\n// and Code and Keycap set a share of that size, which takes the number.\nconst TextSizeContext = createContext<number | undefined>(undefined)\n\n/**\n * The font size of the library's Text around the caller, or `undefined` when\n * the caller is not inside one.\n */\nfunction useTextSize(): number | undefined {\n  return useContext(TextSizeContext)\n}\n\nexport { TextSizeContext, useTextSize }\n"],"mappings":";;AAMA,MAAME,kBAAkBF,cAAkCG,KAAAA,CAAS;;;;;AAMnE,SAAAC,cAAA;CAAA,OACSH,WAAWC,eAAe;AAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.7.0",
+  "version": "0.9.0",
   "description": "Kanso UI's Material Design components for React Native, themed through the same --kui-* design tokens as the web library",
   "keywords": [
     "react-native",

package/dist/badge/styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"styles.js","names":["StyleSheet","themedStyles","ICON_SIZE","OVERLAP","RISE","SMALL_SIZE","LARGE_SIZE","styles","create","anchor","alignItems","flexDirection","inFlow","marginStart","position","top","over","start","small","end","height","width","space","stylesOf","colors","radii","spacing","count","color","onError","fontVariant","large","justifyContent","minHeight","minWidth","paddingHorizontal","xs","mark","backgroundColor","error","borderRadius","pill","pointerEvents"],"sources":["../../src/badge/styles.ts"],"sourcesContent":["import { StyleSheet } from 'react-native'\n\nimport { themedStyles } from '../theme/styles'\n\n// The icon a badge is drawn on, which the large badge's corner is measured\n// from: the 24dp every destination draws.\nconst ICON_SIZE = 24\n\n// How far back over the icon the large badge reaches, from the icon's\n// trailing edge, and how far above the icon it stands. The page's own\n// figures: its bottom leading corner 14dp down and 12dp in from the icon's\n// top trailing corner, on a 16dp badge.\nconst OVERLAP = 12\nconst RISE = 2\n\n// The small badge's side, and the large badge's least height and width.\nconst SMALL_SIZE = 6\nconst LARGE_SIZE = 16\n\nconst styles = StyleSheet.create({\n  // What the badge is drawn on. It shrinks to what it holds, so its box is\n  // the icon's and the mark lands where the page puts it, and lays a mark\n  // that joins the flow after the icon.\n  anchor: {\n    alignItems: 'flex-start',\n    flexDirection: 'row',\n  },\n  // The large badge in the flow after the icon, 12dp back over it and 2dp\n  // above it, which is where its own placement puts it, so what follows the\n  // icon starts after the badge rather than under it.\n  inFlow: {\n    marginStart: -OVERLAP,\n    position: 'relative',\n    top: -RISE,\n  },\n  // The large badge over the icon's top trailing corner.\n  over: {\n    position: 'absolute',\n    start: ICON_SIZE - OVERLAP,\n    top: -RISE,\n  },\n  // The small badge, filling the icon's top trailing 6dp square.\n  small: {\n    end: 0,\n    height: SMALL_SIZE,\n    position: 'absolute',\n    top: 0,\n    width: SMALL_SIZE,\n  },\n  // The space before the count, out of the flow, so it sets the count apart\n  // from the text before it without moving anything.\n  space: {\n    position: 'absolute',\n  },\n})\n\nconst stylesOf = themedStyles(({ colors, radii, spacing }) =>\n  StyleSheet.create({\n    // The count, in label small with tabular figures, so a count that\n    // changes does not change the badge's width digit by digit.\n    count: {\n      color: colors.onError,\n      fontVariant: ['tabular-nums'],\n    },\n    // The page's large badge: at least 16dp tall and as wide, 4dp either\n    // side of its count. A minimum rather than a size, so a larger text size\n    // the device asks for grows the badge rather than cutting the count.\n    large: {\n      alignItems: 'center',\n      justifyContent: 'center',\n      minHeight: LARGE_SIZE,\n      minWidth: LARGE_SIZE,\n      paddingHorizontal: spacing.xs,\n    },\n    // The fill and corner both badges share. It takes no touches, so a press\n    // on it lands on what it is drawn on.\n    mark: {\n      backgroundColor: colors.error,\n      borderRadius: radii.pill,\n      pointerEvents: 'none',\n    },\n  }),\n)\n\nexport { styles, stylesOf }\n"],"mappings":";;;AAgBA,MAAMK,aAAa;AACnB,MAAMC,aAAa;AAEnB,MAAMC,SAASP,WAAWQ,OAAO;CAI/BC,QAAQ;EACNC,YAAY;EACZC,eAAe;CACjB;CAIAC,QAAQ;EACNC,aAAa;EACbC,UAAU;EACVC,KAAK;CACP;CAEAC,MAAM;EACJF,UAAU;EACVG,OAAOf;EACPa,KAAK;CACP;CAEAG,OAAO;EACLC,KAAK;EACLC,QAAQf;EACRS,UAAU;EACVC,KAAK;EACLM,OAAOhB;CACT;CAGAiB,OAAO,EACLR,UAAU,WACZ;AACF,CAAC;AAED,MAAMS,WAAWtB,cAAc,EAAEuB,QAAQC,OAAOC,cAC9C1B,WAAWQ,OAAO;CAGhBmB,OAAO;EACLC,OAAOJ,OAAOK;EACdC,aAAa,CAAC,cAAc;CAC9B;CAIAC,OAAO;EACLrB,YAAY;EACZsB,gBAAgB;EAChBC,WAAW3B;EACX4B,UAAU5B;EACV6B,mBAAmBT,QAAQU;CAC7B;CAGAC,MAAM;EACJC,iBAAiBd,OAAOe;EACxBC,cAAcf,MAAMgB;EACpBC,eAAe;CACjB;AACF,CAAC,CACH"}