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

package/dist/index.js

@@ -1,3 +1,4 @@
+import { Autocomplete } from "./components/autocomplete/index.js";
 import { useIconStyle } from "./glyphs/icon-style.js";
 import { useTheme } from "./theme/scope.js";
 import { Avatar } from "./components/avatar/index.js";
@@ -16,17 +17,21 @@ import { Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTi
 import { Form } from "./components/form/index.js";
 import { IconButton } from "./components/icon-button/index.js";
 import { Link } from "./components/link/index.js";
+import { List, ListLoadMore, ListRow, ListSection } from "./components/list/index.js";
+import { ListItem } from "./components/list-item/index.js";
+import { Separator } from "./components/separator/index.js";
+import { Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu } from "./components/menu/index.js";
 import { Meter } from "./components/meter/index.js";
 import { NumberField } from "./components/number-field/index.js";
+import { Popover, PopoverContent, PopoverDescription, PopoverTitle } from "./components/popover/index.js";
 import { ProductIcon } from "./components/product-icon/index.js";
 import { Radio, RadioGroup } from "./components/radio-group/index.js";
 import { SearchField } from "./components/search-field/index.js";
 import { SegmentedButton, SegmentedButtonSegment } from "./components/segmented-button/index.js";
-import { Separator } from "./components/separator/index.js";
 import { Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle } from "./components/sheet/index.js";
 import { Snackbar } from "./components/snackbar/index.js";
 import { Stack } from "./components/stack/index.js";
 import { Switch } from "./components/switch/index.js";
 import { TextField } from "./components/text-field/index.js";
 import { ThemeScope } from "./theme-scope.js";
-export { Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Form, IconButton, Link, Meter, NumberField, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };
+export { Autocomplete, Avatar, Button, Card, Checkbox, Chip, ChipGroup, ChipGroupChip, CopyField, Currency, Dialog, DialogBody, DialogContent, DialogFooter, DialogHeader, DialogTitle, Form, IconButton, Link, List, ListItem, ListLoadMore, ListRow, ListSection, Menu, MenuContent, MenuItem, MenuLoadMore, MenuSection, MenuSeparator, MenuSubmenu, Meter, NumberField, Popover, PopoverContent, PopoverDescription, PopoverTitle, ProductIcon, ProgressIndicator, Radio, RadioGroup, RouterProvider, SearchField, SegmentedButton, SegmentedButtonSegment, Separator, Sheet, SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle, Snackbar, Stack, Switch, Text, TextField, ThemeScope, useIconStyle, useTheme, useWindowSizeClass };

package/dist/indicator/index.d.ts

@@ -1,5 +1,5 @@
-import "react-native";
 import { ReactNode } from "react";
+import "react-native";
 import "react-native-reanimated";
 //#region src/indicator/index.d.ts
 /**

package/dist/indicator/index.js

@@ -1,14 +1,14 @@
+import { localeOf } from "../number/locale.js";
 import { useIconStyle } from "../glyphs/icon-style.js";
 import { useTheme } from "../theme/scope.js";
 import { composeStyles } from "../theme/styles.js";
 import { withOpacity } from "../theme/color.js";
 import { Text as Text$1 } from "../components/text/index.js";
-import { localeOf } from "../number/locale.js";
 import { styles, stylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { View } from "react-native";
 import { useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { View } from "react-native";
 import Animated, { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
 import { NumberFormatter } from "@internationalized/number";
 //#region src/indicator/index.tsx

package/dist/mark/index.d.ts

@@ -1,6 +1,6 @@
 import "./styles.js";
-import { ImageProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
 import { ComponentRef, Ref } from "react";
+import { ImageProps, StyleProp, View, ViewProps, ViewStyle } from "react-native";
 //#region src/mark/index.d.ts
 /** The native props a picture's own `Image` takes, as Avatar and ProductIcon take them. */
 type MarkImageProps = Pick<ImageProps, 'crossOrigin' | 'fadeDuration' | 'progressiveRenderingEnabled' | 'referrerPolicy' | 'resizeMethod'>;

package/dist/mark/index.js

@@ -6,8 +6,8 @@ import { useImageLoadingStatus } from "./image.js";
 import { initialOfThing, initialsOfPerson } from "./initials.js";
 import { DIAMETERS, GLYPH_SHARE, initialsStylesOf, markStyles, markStylesOf } from "./styles.js";
 import { c } from "react/compiler-runtime";
-import { Image, Text, View } from "react-native";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { Image, Text, View } from "react-native";
 //#region src/mark/index.tsx
 const KINDS = {
 	person: {

package/dist/modal/index.d.ts

@@ -1,6 +1,6 @@
 import "../button/slots.js";
+import { ReactNode } from "react";
 import { HostInstance, ViewProps, ViewStyle } from "react-native";
-import { ReactNode, Ref } from "react";
 import "react-native-reanimated";
 import "react-native-safe-area-context";
 import "react-stately/useOverlayTriggerState";

package/dist/modal/index.js

@@ -5,9 +5,9 @@ import { AnimatedPressable } from "../button/index.js";
 import { withOpacity } from "../theme/color.js";
 import { OverlayHost } from "../overlay/host.js";
 import { c } from "react/compiler-runtime";
-import { AccessibilityInfo, I18nManager, Modal, Platform, StyleSheet } from "react-native";
 import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { AccessibilityInfo, I18nManager, Modal, Platform, StyleSheet } from "react-native";
 import { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
 //#region src/modal/index.tsx
 const NO_INSETS = {
@@ -143,13 +143,6 @@ function panelRoleOf(role, labelledBy) {
 		role
 	};
 }
-function refsOf(own, other) {
-	return (node) => {
-		own(node);
-		if (typeof other === "function") other(node);
-		else if (other !== null && other !== void 0) other.current = node;
-	};
-}
 function registerOf(setParts) {
 	return (part) => {
 		setParts((parts) => ({
@@ -279,6 +272,6 @@ function useReturnFocus(present, outer) {
 	useEffect(t0, t1);
 }
 //#endregion
-export { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, refsOf, registerOf, useModalState, useModalTrigger };
+export { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, registerOf, useModalState, useModalTrigger };
 
 //# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","Ref","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","refsOf","own","node","T","other","current","registerOf","setParts","update","parts","Readonly","Record","Part","part","useModalState","outer","props","present","setPresent","close","slots","useReturnFocus","useModalTrigger","setTrigger","context","default","event","target","currentTarget","open","shown","gone","_c"],"sources":["../../src/modal/index.tsx"],"sourcesContent":["import type { ReactNode, Ref } 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// Every ref a node is handed to, the part's own and the call site's.\nfunction refsOf<T>(own: (node: null | T) => void, other: Ref<T> | undefined) {\n  return (node: null | T) => {\n    own(node)\n    if (typeof other === 'function') {\n      other(node)\n    } else if (other !== null && other !== undefined) {\n      other.current = node\n    }\n  }\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  refsOf,\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","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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"}

package/dist/overlay/anchored.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+import { HostInstance, ViewStyle } from "react-native";

package/dist/overlay/anchored.js

@@ -0,0 +1,182 @@
+import { useTheme } from "../theme/scope.js";
+import { OverlayHostContext } from "./host.js";
+import { boundsOf, place } from "./placement.js";
+import { c } from "react/compiler-runtime";
+import { use, useEffect, useState } from "react";
+import { Dimensions, I18nManager, useWindowDimensions } from "react-native";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+//#region src/overlay/anchored.ts
+const HIDDEN = {
+	left: 0,
+	opacity: 0,
+	pointerEvents: "none",
+	position: "absolute",
+	top: 0
+};
+const NO_INSETS = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+/**
+* Places a surface drawn in an `Overlay` beside the view that opened it, as
+* web's anchored overlays are placed: on `side`, lined up by `align`, flipped
+* to the opposite side at the edge of the window, and kept inside the safe
+* area's insets with `spacing.md` to spare, the padding React Aria keeps from
+* the edge of the viewport. On `top` and `bottom`, `start` and `end` follow
+* `I18nManager.isRTL`.
+*
+* The anchor is measured with `measureInWindow` whenever the surface reports
+* a new size or the window changes size.
+*/
+function useAnchoredPlacement(t0) {
+	const $ = c(31);
+	const { align: t1, alignOffset: t2, anchor, side: t3, sideOffset } = t0;
+	const align = t1 === void 0 ? "center" : t1;
+	const alignOffset = t2 === void 0 ? 0 : t2;
+	const side = t3 === void 0 ? "bottom" : t3;
+	const store = use(OverlayHostContext);
+	const { spacing } = useTheme();
+	const window = useWindowDimensions();
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const [measured, setMeasured] = useState(null);
+	const [surface, setSurface] = useState(null);
+	let t4;
+	if ($[0] !== anchor.current || $[1] !== store || $[2] !== surface) {
+		t4 = () => {
+			const measure = () => {
+				const layer = store?.layer() ?? null;
+				const target = anchor.current;
+				if (surface === null || layer === null || target === null) return;
+				layer.measureInWindow((originX, originY) => {
+					target.measureInWindow((x, y, width, height) => {
+						setMeasured({
+							anchor: {
+								height,
+								width,
+								x,
+								y
+							},
+							origin: {
+								x: originX,
+								y: originY
+							}
+						});
+					});
+				});
+			};
+			measure();
+			const subscription = Dimensions.addEventListener("change", measure);
+			return () => {
+				subscription.remove();
+			};
+		};
+		$[0] = anchor.current;
+		$[1] = store;
+		$[2] = surface;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== anchor || $[5] !== store || $[6] !== surface) {
+		t5 = [
+			anchor,
+			store,
+			surface
+		];
+		$[4] = anchor;
+		$[5] = store;
+		$[6] = surface;
+		$[7] = t5;
+	} else t5 = $[7];
+	useEffect(t4, t5);
+	let t6;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = (event) => {
+			const { height: height_0, width: width_0 } = event.nativeEvent.layout;
+			setSurface((known) => known?.height === height_0 && known.width === width_0 ? known : {
+				height: height_0,
+				width: width_0
+			});
+		};
+		$[8] = t6;
+	} else t6 = $[8];
+	const onLayout = t6;
+	if (measured === null || surface === null) {
+		let t7;
+		if ($[9] !== side) {
+			t7 = {
+				onLayout,
+				placed: false,
+				side,
+				style: HIDDEN
+			};
+			$[9] = side;
+			$[10] = t7;
+		} else t7 = $[10];
+		return t7;
+	}
+	let t7;
+	if ($[11] !== align || $[12] !== alignOffset || $[13] !== insets || $[14] !== measured.anchor || $[15] !== side || $[16] !== sideOffset || $[17] !== spacing.md || $[18] !== spacing.sm || $[19] !== surface || $[20] !== window) {
+		t7 = place({
+			align,
+			alignOffset,
+			anchor: measured.anchor,
+			bounds: boundsOf(window, insets, spacing.md),
+			rtl: I18nManager.isRTL,
+			side,
+			sideOffset: sideOffset ?? spacing.sm,
+			surface
+		});
+		$[11] = align;
+		$[12] = alignOffset;
+		$[13] = insets;
+		$[14] = measured.anchor;
+		$[15] = side;
+		$[16] = sideOffset;
+		$[17] = spacing.md;
+		$[18] = spacing.sm;
+		$[19] = surface;
+		$[20] = window;
+		$[21] = t7;
+	} else t7 = $[21];
+	const placement = t7;
+	const x_0 = placement.x - measured.origin.x;
+	const t8 = placement.y - measured.origin.y;
+	let t9;
+	if ($[22] !== x_0) {
+		t9 = I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL ? { right: x_0 } : { left: x_0 };
+		$[22] = x_0;
+		$[23] = t9;
+	} else t9 = $[23];
+	let t10;
+	if ($[24] !== placement.maxHeight || $[25] !== t8 || $[26] !== t9) {
+		t10 = {
+			maxHeight: placement.maxHeight,
+			position: "absolute",
+			top: t8,
+			...t9
+		};
+		$[24] = placement.maxHeight;
+		$[25] = t8;
+		$[26] = t9;
+		$[27] = t10;
+	} else t10 = $[27];
+	let t11;
+	if ($[28] !== placement.side || $[29] !== t10) {
+		t11 = {
+			onLayout,
+			placed: true,
+			side: placement.side,
+			style: t10
+		};
+		$[28] = placement.side;
+		$[29] = t10;
+		$[30] = t11;
+	} else t11 = $[30];
+	return t11;
+}
+//#endregion
+export { useAnchoredPlacement };
+
+//# sourceMappingURL=anchored.js.map

package/dist/overlay/anchored.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchored.js","names":["RefObject","HostInstance","LayoutChangeEvent","ViewStyle","use","useEffect","useState","Dimensions","I18nManager","useWindowDimensions","SafeAreaInsetsContext","OverlayAlign","OverlaySide","Rect","Size","useTheme","OverlayHostContext","boundsOf","place","AnchoredPlacement","onLayout","event","placed","side","style","AnchoredPlacementOptions","align","alignOffset","anchor","Pick","sideOffset","Measured","origin","x","y","HIDDEN","left","opacity","pointerEvents","position","top","NO_INSETS","bottom","right","useAnchoredPlacement","t0","$","_c","t1","t2","t3","undefined","store","spacing","window","insets","measured","setMeasured","surface","setSurface","t4","current","measure","layer","target","measureInWindow","originX","originY","width","height","subscription","addEventListener","remove","t5","t6","Symbol","for","height_0","width_0","nativeEvent","layout","known","t7","md","sm","bounds","rtl","isRTL","placement","x_0","t8","t9","doLeftAndRightSwapInRTL","t10","maxHeight","t11","_c"],"sources":["../../src/overlay/anchored.ts"],"sourcesContent":["import type { RefObject } from 'react'\nimport type { HostInstance, LayoutChangeEvent, ViewStyle } from 'react-native'\n\nimport { use, useEffect, useState } from 'react'\nimport { Dimensions, I18nManager, useWindowDimensions } from 'react-native'\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context'\n\nimport type { OverlayAlign, OverlaySide, Rect, Size } from './placement'\n\nimport { useTheme } from '../theme/scope'\nimport { OverlayHostContext } from './host'\nimport { boundsOf, place } from './placement'\n\ntype AnchoredPlacement = {\n  /**\n   * Hand to the surface's own `onLayout`. The surface is placed once it has\n   * reported its size, and placed again whenever that size changes.\n   */\n  readonly onLayout: (event: LayoutChangeEvent) => void\n  /**\n   * Whether the surface has been placed. Until it has, it is laid out out of\n   * sight, and a screen reader cannot be sent to it.\n   */\n  readonly placed: boolean\n  /** The side the surface opened on, which is the opposite one after a flip. */\n  readonly side: OverlaySide\n  /**\n   * The surface's position in the overlay layer, and the height it may take.\n   * Until it has been placed it is laid out out of sight, to be measured.\n   */\n  readonly style: ViewStyle\n}\n\ntype AnchoredPlacementOptions = {\n  /**\n   * Where the surface sits along the side it opens on.\n   * @default 'center'\n   */\n  readonly align?: OverlayAlign | undefined\n  /** Moves the surface along that side, in dp: right or down when positive. */\n  readonly alignOffset?: number | undefined\n  /** The view the surface opens beside. */\n  readonly anchor: RefObject<null | Pick<HostInstance, 'measureInWindow'>>\n  /**\n   * Which side of the anchor the surface opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  readonly side?: OverlaySide | undefined\n  /**\n   * The gap between the anchor and the surface, in dp.\n   * @default spacing.sm\n   */\n  readonly sideOffset?: number | undefined\n}\n\ntype Measured = {\n  readonly anchor: Rect\n  /** Where the overlay layer starts in the window. */\n  readonly origin: { readonly x: number; readonly y: number }\n}\n\nconst HIDDEN: ViewStyle = {\n  left: 0,\n  opacity: 0,\n  pointerEvents: 'none',\n  position: 'absolute',\n  top: 0,\n}\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 = { bottom: 0, left: 0, right: 0, top: 0 }\n\n/**\n * Places a surface drawn in an `Overlay` beside the view that opened it, as\n * web's anchored overlays are placed: on `side`, lined up by `align`, flipped\n * to the opposite side at the edge of the window, and kept inside the safe\n * area's insets with `spacing.md` to spare, the padding React Aria keeps from\n * the edge of the viewport. On `top` and `bottom`, `start` and `end` follow\n * `I18nManager.isRTL`.\n *\n * The anchor is measured with `measureInWindow` whenever the surface reports\n * a new size or the window changes size.\n */\nfunction useAnchoredPlacement({\n  align = 'center',\n  alignOffset = 0,\n  anchor,\n  side = 'bottom',\n  sideOffset,\n}: AnchoredPlacementOptions): AnchoredPlacement {\n  const store = use(OverlayHostContext)\n  const { spacing } = useTheme()\n  const window = useWindowDimensions()\n  const insets = use(SafeAreaInsetsContext) ?? NO_INSETS\n  const [measured, setMeasured] = useState<Measured | null>(null)\n  const [surface, setSurface] = useState<null | Size>(null)\n\n  useEffect(() => {\n    // The layer is measured as well as the anchor, since the host need not\n    // start at the window's corner: the surface is placed in the layer, and\n    // the anchor is measured in the window.\n    const measure = () => {\n      const layer = store?.layer() ?? null\n      const target = anchor.current\n\n      if (surface === null || layer === null || target === null) {\n        return\n      }\n\n      layer.measureInWindow((originX, originY) => {\n        target.measureInWindow((x, y, width, height) => {\n          setMeasured({\n            anchor: { height, width, x, y },\n            origin: { x: originX, y: originY },\n          })\n        })\n      })\n    }\n\n    measure()\n\n    // A rotation or a resized window can move the anchor without the\n    // surface changing size.\n    const subscription = Dimensions.addEventListener('change', measure)\n\n    return () => {\n      subscription.remove()\n    }\n  }, [anchor, store, surface])\n\n  const onLayout = (event: LayoutChangeEvent) => {\n    const { height, width } = event.nativeEvent.layout\n\n    setSurface((known) =>\n      known?.height === height && known.width === width\n        ? known\n        : { height, width },\n    )\n  }\n\n  if (measured === null || surface === null) {\n    return { onLayout, placed: false, side, style: HIDDEN }\n  }\n\n  const placement = place({\n    align,\n    alignOffset,\n    anchor: measured.anchor,\n    bounds: boundsOf(window, insets, spacing.md),\n    rtl: I18nManager.isRTL,\n    side,\n    sideOffset: sideOffset ?? spacing.sm,\n    surface,\n  })\n  const x = placement.x - measured.origin.x\n\n  return {\n    onLayout,\n    placed: true,\n    side: placement.side,\n    style: {\n      maxHeight: placement.maxHeight,\n      position: 'absolute',\n      top: placement.y - measured.origin.y,\n      // The placement is in physical coordinates, as `measureInWindow`\n      // reports them. React Native swaps `left` and `right` in a right-to-left\n      // layout unless an app turns that off, so there `right` is what puts\n      // the surface's left edge where the placement says.\n      ...(I18nManager.isRTL && I18nManager.doLeftAndRightSwapInRTL\n        ? { right: x }\n        : { left: x }),\n    },\n  }\n}\n\nexport type { AnchoredPlacement, AnchoredPlacementOptions }\n\nexport { useAnchoredPlacement }\n"],"mappings":"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"}

package/dist/overlay/host.d.ts

@@ -0,0 +1,2 @@
+import { ComponentRef, ReactNode } from "react";
+import { View } from "react-native";

package/dist/overlay/host.js

@@ -1,8 +1,8 @@
 import { ScopeContext, useScope } from "../theme/scope.js";
 import { c } from "react/compiler-runtime";
-import { StyleSheet, View } from "react-native";
 import { createContext, use, useId, useLayoutEffect, useState, useSyncExternalStore } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { StyleSheet, View } from "react-native";
 //#region src/overlay/host.tsx
 const OverlayHostContext = createContext(null);
 const styles = StyleSheet.create({ fill: {

package/dist/overlay/index.d.ts

@@ -0,0 +1,4 @@
+import { OverlayAlign, OverlaySide } from "./placement.js";
+import "./anchored.js";
+import "./host.js";
+export type { OverlayAlign, OverlaySide };

package/dist/overlay/panel.js

@@ -0,0 +1,215 @@
+import { useTheme } from "../theme/scope.js";
+import { c } from "react/compiler-runtime";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { AccessibilityInfo, BackHandler, Platform, Pressable, StyleSheet } from "react-native";
+import { Easing, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from "react-native-reanimated";
+//#region src/overlay/panel.tsx
+const SCALE_FROM = .95;
+/** The edge a panel grows from, the one facing its anchor. */
+const PANEL_ORIGINS = {
+	bottom: "top",
+	left: "right",
+	right: "left",
+	top: "bottom"
+};
+const styles = StyleSheet.create({ layer: {
+	bottom: 0,
+	left: 0,
+	position: "absolute",
+	right: 0,
+	top: 0
+} });
+/**
+* The layer a press outside a non-modal panel lands on, drawn just before the
+* panel so it sits under it. The press goes no further, so a press on the
+* trigger closes the panel rather than opening it again, as on web. Nothing
+* but that press reaches it: React Native Web's Pressable is a tab stop
+* unless told otherwise, whatever `focusable` says.
+*/
+function DismissLayer(t0) {
+	const $ = c(2);
+	const { onPress } = t0;
+	let t1;
+	if ($[0] !== onPress) {
+		t1 = /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			"aria-hidden": true,
+			focusable: false,
+			onPress,
+			style: styles.layer,
+			tabIndex: -1
+		});
+		$[0] = onPress;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+}
+/**
+* Closes a non-modal panel from Android's back gesture, as a `Modal` closes a
+* modal one. React Native calls the latest listener first, so a panel opened
+* from another closes before the one it came from. React Native Web has no
+* back gesture, and its BackHandler reports an error when one is listened for,
+* so nothing listens there.
+*/
+function useBackToClose(close, active) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== active || $[1] !== close) {
+		t0 = () => {
+			if (!active || Platform.OS === "web") return;
+			const subscription = BackHandler.addEventListener("hardwareBackPress", () => {
+				close();
+				return true;
+			});
+			return () => {
+				subscription.remove();
+			};
+		};
+		t1 = [active, close];
+		$[0] = active;
+		$[1] = close;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+}
+/**
+* Sends the screen reader to `target` once `ready`, which a panel passes once
+* it has been placed, and so can be seen. React Native Web has no screen
+* reader of its own to send.
+*/
+function useFocusOnPlaced(ready, target) {
+	const $ = c(4);
+	let t0;
+	let t1;
+	if ($[0] !== ready || $[1] !== target) {
+		t0 = () => {
+			if (ready && target !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(target, "focus");
+		};
+		t1 = [ready, target];
+		$[0] = ready;
+		$[1] = target;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	useEffect(t0, t1);
+}
+/**
+* A panel's motion, and the timer that unmounts it once its exit has run: it
+* fades and scales up from 95% over the short3 duration on the emphasised
+* decelerating curve, and back over short2 on the accelerating one. The
+* entrance waits for the panel to be placed, so it is not spent while the
+* panel is still hidden being measured, and the panel stays transparent
+* until then. Under reduced motion it arrives and leaves at once.
+*/
+function usePanelMotion(isOpen, placed, setPresent) {
+	const $ = c(8);
+	const { motion } = useTheme();
+	const reduceMotion = useReducedMotion();
+	const shown = useSharedValue(0);
+	let t0;
+	let t1;
+	if ($[0] !== isOpen || $[1] !== motion || $[2] !== placed || $[3] !== reduceMotion || $[4] !== setPresent || $[5] !== shown) {
+		t0 = () => {
+			if (isOpen && !placed) return;
+			if (isOpen) {
+				shown.set(reduceMotion ? 1 : withTiming(1, {
+					duration: motion.durationShort3,
+					easing: Easing.bezier(...motion.easingEmphasizedDecelerate)
+				}));
+				return;
+			}
+			if (reduceMotion) {
+				shown.set(0);
+				setPresent(false);
+				return;
+			}
+			shown.set(withTiming(0, {
+				duration: motion.durationShort2,
+				easing: Easing.bezier(...motion.easingEmphasizedAccelerate)
+			}));
+			const timer = setTimeout(() => {
+				setPresent(false);
+			}, motion.durationShort2);
+			return () => {
+				clearTimeout(timer);
+			};
+		};
+		t1 = [
+			isOpen,
+			motion,
+			placed,
+			reduceMotion,
+			setPresent,
+			shown
+		];
+		$[0] = isOpen;
+		$[1] = motion;
+		$[2] = placed;
+		$[3] = reduceMotion;
+		$[4] = setPresent;
+		$[5] = shown;
+		$[6] = t0;
+		$[7] = t1;
+	} else {
+		t0 = $[6];
+		t1 = $[7];
+	}
+	useEffect(t0, t1);
+	return useAnimatedStyle(() => {
+		"worklet";
+		const progress = shown.get();
+		return {
+			opacity: progress,
+			transform: [{ scale: SCALE_FROM + .050000000000000044 * progress }]
+		};
+	});
+}
+/**
+* Sends the screen reader back to the trigger once a panel has gone, unless
+* `quiet` says nothing moved it there, as a pointer resting on a hover
+* trigger does not. React Native Web's `Modal` restores focus itself, and has
+* no screen reader to send otherwise.
+*/
+function useReturnFocus(present, quiet, trigger) {
+	const $ = c(8);
+	const shown = useRef(present);
+	let t0;
+	if ($[0] !== present || $[1] !== quiet || $[2] !== trigger.current) {
+		t0 = () => {
+			const gone = shown.current && !present;
+			const target = trigger.current;
+			shown.current = present;
+			if (gone && !quiet && target !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(target, "focus");
+		};
+		$[0] = present;
+		$[1] = quiet;
+		$[2] = trigger.current;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== present || $[5] !== quiet || $[6] !== trigger) {
+		t1 = [
+			quiet,
+			present,
+			trigger
+		];
+		$[4] = present;
+		$[5] = quiet;
+		$[6] = trigger;
+		$[7] = t1;
+	} else t1 = $[7];
+	useEffect(t0, t1);
+}
+//#endregion
+export { DismissLayer, PANEL_ORIGINS, useBackToClose, useFocusOnPlaced, usePanelMotion, useReturnFocus };
+
+//# sourceMappingURL=panel.js.map