@kanso-labs/react-native-kanso-ui 0.8.0 → 0.10.0

package/dist/picker/index.js

@@ -0,0 +1,322 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles, themedStyles } from "../theme/styles.js";
+import { CalendarGlyph } from "../glyphs/index.js";
+import { IconButton } from "../components/icon-button/index.js";
+import { useWindowSizeClass } from "../hooks/useWindowSizeClass.js";
+import { DismissLayer, PANEL_ORIGINS, useBackToClose, usePanelShown, usePanelStyle, useReturnFocus } from "../overlay/panel.js";
+import { CalendarFocusContext } from "../calendar/index.js";
+import { Overlay } from "../overlay/host.js";
+import { useAnchoredPlacement } from "../overlay/anchored.js";
+import { ModalWindow, NO_INSETS, insetsOf, panelRoleOf } from "../modal/index.js";
+import { c } from "react/compiler-runtime";
+import { AccessibilityInfo, Platform, StyleSheet, View } from "react-native";
+import Animated, { useAnimatedStyle } from "react-native-reanimated";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import { use, useEffect, useEffectEvent, useState } from "react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+//#region src/picker/index.tsx
+const stylesOf = themedStyles(({ colors, radii, shadows }) => StyleSheet.create({
+	layout: {
+		alignItems: "center",
+		bottom: 0,
+		justifyContent: "center",
+		left: 0,
+		pointerEvents: "box-none",
+		position: "absolute",
+		right: 0,
+		top: 0
+	},
+	modal: {
+		maxHeight: "100%",
+		maxWidth: "100%",
+		transformOrigin: "center"
+	},
+	surface: {
+		backgroundColor: colors.surfaceContainerHigh,
+		borderRadius: radii.lg,
+		boxShadow: shadows.elevation3,
+		overflow: "hidden"
+	}
+}));
+function PickerDocked(t0) {
+	const $ = c(19);
+	const { anchor, children, close, isOpen, label, setPresent } = t0;
+	const styles = stylesOf(useTheme());
+	let t1;
+	if ($[0] !== anchor) {
+		t1 = {
+			align: "start",
+			anchor
+		};
+		$[0] = anchor;
+		$[1] = t1;
+	} else t1 = $[1];
+	const placement = useAnchoredPlacement(t1);
+	const shown = usePanelShown(isOpen, placement.placed, setPresent);
+	const motion = usePanelStyle(shown);
+	const [panel, setPanel] = useState(null);
+	const [cell, setCell] = useState(null);
+	useBackToClose(close, isOpen);
+	useFocusOnceReady(isOpen && placement.placed, cell ?? panel);
+	let t2;
+	if ($[2] !== close || $[3] !== isOpen) {
+		t2 = isOpen ? /* @__PURE__ */ jsx(DismissLayer, { onPress: close }) : null;
+		$[2] = close;
+		$[3] = isOpen;
+		$[4] = t2;
+	} else t2 = $[4];
+	const t3 = Animated;
+	const t4 = placement.onLayout;
+	const t5 = "dialog";
+	const t6 = composeStyles(styles.surface, placement.style, { transformOrigin: PANEL_ORIGINS[placement.side] }, motion);
+	let t7;
+	if ($[5] !== children || $[6] !== setCell) {
+		t7 = /* @__PURE__ */ jsx(CalendarFocusContext, {
+			value: setCell,
+			children
+		});
+		$[5] = children;
+		$[6] = setCell;
+		$[7] = t7;
+	} else t7 = $[7];
+	let t8;
+	if ($[8] !== close || $[9] !== label || $[10] !== placement.onLayout || $[11] !== setPanel || $[12] !== t3.View || $[13] !== t6 || $[14] !== t7) {
+		t8 = /* @__PURE__ */ jsx(t3.View, {
+			"aria-label": label,
+			onAccessibilityEscape: close,
+			onLayout: t4,
+			ref: setPanel,
+			role: t5,
+			style: t6,
+			children: t7
+		});
+		$[8] = close;
+		$[9] = label;
+		$[10] = placement.onLayout;
+		$[11] = setPanel;
+		$[12] = t3.View;
+		$[13] = t6;
+		$[14] = t7;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
+	if ($[16] !== t2 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Fragment$1, { children: [t2, t8] });
+		$[16] = t2;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
+}
+function PickerModal(t0) {
+	const $ = c(25);
+	const { children, close, isOpen, label, setPresent } = t0;
+	const theme = useTheme();
+	const { spacing } = theme;
+	const styles = stylesOf(theme);
+	const insets = use(SafeAreaInsetsContext) ?? NO_INSETS;
+	const shown = usePanelShown(isOpen, true, setPresent);
+	const motion = usePanelStyle(shown);
+	const scrim = useAnimatedStyle(() => {
+		"worklet";
+		return { opacity: shown.get() };
+	});
+	const [panel, setPanel] = useState(null);
+	const [cell, setCell] = useState(null);
+	const T0 = ModalWindow;
+	const t1 = false;
+	const t2 = void 0;
+	const t3 = isOpen ? close : void 0;
+	const t4 = cell ?? panel;
+	const T1 = View;
+	const t5 = composeStyles(styles.layout, insetsOf(roomOf(insets, spacing.lg)));
+	const t6 = Animated;
+	let t7;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t7 = panelRoleOf("dialog", void 0);
+		$[0] = t7;
+	} else t7 = $[0];
+	const t8 = Platform.OS === "web" ? void 0 : label;
+	const t9 = composeStyles(styles.surface, styles.modal, motion);
+	let t10;
+	if ($[1] !== children || $[2] !== setCell) {
+		t10 = /* @__PURE__ */ jsx(CalendarFocusContext, {
+			value: setCell,
+			children
+		});
+		$[1] = children;
+		$[2] = setCell;
+		$[3] = t10;
+	} else t10 = $[3];
+	let t11;
+	if ($[4] !== close || $[5] !== setPanel || $[6] !== t10 || $[7] !== t6.View || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
+		t11 = /* @__PURE__ */ jsx(t6.View, {
+			...t7,
+			"aria-label": t8,
+			onAccessibilityEscape: close,
+			ref: setPanel,
+			style: t9,
+			children: t10
+		});
+		$[4] = close;
+		$[5] = setPanel;
+		$[6] = t10;
+		$[7] = t6.View;
+		$[8] = t7;
+		$[9] = t8;
+		$[10] = t9;
+		$[11] = t11;
+	} else t11 = $[11];
+	let t12;
+	if ($[12] !== T1 || $[13] !== t11 || $[14] !== t5) {
+		t12 = /* @__PURE__ */ jsx(T1, {
+			style: t5,
+			children: t11
+		});
+		$[12] = T1;
+		$[13] = t11;
+		$[14] = t5;
+		$[15] = t12;
+	} else t12 = $[15];
+	let t13;
+	if ($[16] !== T0 || $[17] !== close || $[18] !== label || $[19] !== scrim || $[20] !== t12 || $[21] !== t2 || $[22] !== t3 || $[23] !== t4) {
+		t13 = /* @__PURE__ */ jsx(T0, {
+			isKeyboardDismissDisabled: t1,
+			label,
+			labelledBy: t2,
+			onClose: close,
+			onScrimPress: t3,
+			scrim,
+			title: t4,
+			children: t12
+		});
+		$[16] = T0;
+		$[17] = close;
+		$[18] = label;
+		$[19] = scrim;
+		$[20] = t12;
+		$[21] = t2;
+		$[22] = t3;
+		$[23] = t4;
+		$[24] = t13;
+	} else t13 = $[24];
+	return t13;
+}
+/**
+* The calendar's surface while it is open and while its exit runs: mounted
+* the moment the picker opens, and kept until it has faded out, docked under
+* the field or modal in the middle of the window by the window's size. A
+* screen reader goes back to the trigger once it has gone.
+*/
+function PickerPopup(t0) {
+	const $ = c(8);
+	let props;
+	let trigger;
+	if ($[0] !== t0) {
+		({trigger, ...props} = t0);
+		$[0] = t0;
+		$[1] = props;
+		$[2] = trigger;
+	} else {
+		props = $[1];
+		trigger = $[2];
+	}
+	const [present, setPresent] = useState(props.isOpen);
+	const modal = useWindowSizeClass() === "compact";
+	if (props.isOpen && !present) setPresent(true);
+	let t1;
+	if ($[3] !== trigger) {
+		t1 = { current: trigger };
+		$[3] = trigger;
+		$[4] = t1;
+	} else t1 = $[4];
+	useReturnFocus(present, false, t1);
+	if (!present) return null;
+	let t2;
+	if ($[5] !== modal || $[6] !== props) {
+		t2 = modal ? /* @__PURE__ */ jsx(PickerModal, {
+			...props,
+			setPresent
+		}) : /* @__PURE__ */ jsx(Overlay, { children: /* @__PURE__ */ jsx(PickerDocked, {
+			...props,
+			setPresent
+		}) });
+		$[5] = modal;
+		$[6] = props;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+/**
+* The button in the field's trailing slot that opens the calendar: the icon
+* buttons page's 40dp standard button holding the calendar icon, reporting
+* whether the calendar is open. A disabled or read-only field disables it,
+* since neither takes a date from the calendar either.
+*/
+function PickerTrigger(t0) {
+	const $ = c(7);
+	const { isDisabled, isOpen, label, onPress, ref } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = /* @__PURE__ */ jsx(CalendarGlyph, {});
+		$[0] = t1;
+	} else t1 = $[0];
+	let t2;
+	if ($[1] !== isDisabled || $[2] !== isOpen || $[3] !== label || $[4] !== onPress || $[5] !== ref) {
+		t2 = /* @__PURE__ */ jsx(IconButton, {
+			"aria-expanded": isOpen,
+			"aria-label": label,
+			isDisabled,
+			onPress,
+			ref,
+			children: t1
+		});
+		$[1] = isDisabled;
+		$[2] = isOpen;
+		$[3] = label;
+		$[4] = onPress;
+		$[5] = ref;
+		$[6] = t2;
+	} else t2 = $[6];
+	return t2;
+}
+function roomOf(insets, room) {
+	return {
+		bottom: insets.bottom + room,
+		left: insets.left + room,
+		right: insets.right + room,
+		top: insets.top + room
+	};
+}
+function useFocusOnceReady(ready, target) {
+	const $ = c(7);
+	let t0;
+	if ($[0] !== target) {
+		t0 = () => {
+			if (target !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(target, "focus");
+		};
+		$[0] = target;
+		$[1] = t0;
+	} else t0 = $[1];
+	const sendFocus = useEffectEvent(t0);
+	let t1;
+	if ($[2] !== ready || $[3] !== sendFocus) {
+		t1 = () => {
+			if (ready) sendFocus();
+		};
+		$[2] = ready;
+		$[3] = sendFocus;
+		$[4] = t1;
+	} else t1 = $[4];
+	let t2;
+	if ($[5] !== ready) {
+		t2 = [ready];
+		$[5] = ready;
+		$[6] = t2;
+	} else t2 = $[6];
+	useEffect(t1, t2);
+}
+//#endregion
+export { PickerPopup, PickerTrigger, roomOf };
+
+//# sourceMappingURL=index.js.map

package/dist/picker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["ComponentRef","ReactNode","Ref","RefObject","HostInstance","View","ViewStyle","AnimatedStyle","EdgeInsets","use","useEffect","useEffectEvent","useState","AccessibilityInfo","NativeView","Platform","StyleSheet","Animated","useAnimatedStyle","SafeAreaInsetsContext","ResolvedTheme","CalendarFocusContext","IconButton","CalendarGlyph","useWindowSizeClass","insetsOf","ModalWindow","NO_INSETS","panelRoleOf","Overlay","useAnchoredPlacement","DismissLayer","PANEL_ORIGINS","useBackToClose","usePanelShown","usePanelStyle","useReturnFocus","useTheme","composeStyles","themedStyles","PickerPopupProps","anchor","children","close","isOpen","label","trigger","PickerSurfaceProps","Omit","setPresent","present","PickerTriggerProps","isDisabled","onPress","ref","stylesOf","colors","radii","shadows","create","layout","alignItems","bottom","justifyContent","left","pointerEvents","position","right","top","modal","maxHeight","maxWidth","transformOrigin","surface","backgroundColor","surfaceContainerHigh","borderRadius","lg","boxShadow","elevation3","overflow","PickerDocked","t0","$","_c","styles","t1","align","placement","shown","placed","motion","panel","setPanel","cell","setCell","useFocusOnceReady","t2","t3","t4","onLayout","t5","t6","style","side","t7","t8","t9","PickerModal","theme","spacing","insets","scrim","opacity","get","T0","undefined","T1","roomOf","Symbol","for","OS","t10","t11","t12","t13","PickerPopup","props","current","PickerTrigger","room","ready","target","sendAccessibilityEvent","sendFocus","_c","NativeView"],"sources":["../../src/picker/index.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode, Ref, RefObject } from 'react'\nimport type { HostInstance, View, ViewStyle } from 'react-native'\nimport type { AnimatedStyle } from 'react-native-reanimated'\nimport type { EdgeInsets } from 'react-native-safe-area-context'\n\nimport { use, useEffect, useEffectEvent, useState } from 'react'\nimport {\n  AccessibilityInfo,\n  View as NativeView,\n  Platform,\n  StyleSheet,\n} from 'react-native'\nimport Animated, { useAnimatedStyle } from 'react-native-reanimated'\nimport { SafeAreaInsetsContext } from 'react-native-safe-area-context'\n\nimport type { ResolvedTheme } from '../theme/scope'\n\nimport { CalendarFocusContext } from '../calendar'\nimport { IconButton } from '../components/icon-button'\nimport { CalendarGlyph } from '../glyphs'\nimport { useWindowSizeClass } from '../hooks/useWindowSizeClass'\nimport { insetsOf, ModalWindow, NO_INSETS, panelRoleOf } from '../modal'\nimport { Overlay, useAnchoredPlacement } from '../overlay'\nimport {\n  DismissLayer,\n  PANEL_ORIGINS,\n  useBackToClose,\n  usePanelShown,\n  usePanelStyle,\n  useReturnFocus,\n} from '../overlay/panel'\nimport { useTheme } from '../theme/scope'\nimport { composeStyles, themedStyles } from '../theme/styles'\n\n// What a date picker and a date range picker draw in common: the button in\n// the field's trailing slot that opens the calendar, and the surface the\n// calendar opens on, as kanso-ui's src/styles/picker.ts holds the two for\n// web's pickers. Both pickers put the same two on screen, and a docked\n// picker and a range picker that disagreed about where the modal sits would\n// be two bugs rather than one. Internal: nothing here is exported from the\n// package.\n//\n// **The surface is docked from the medium window size up and modal below\n// it**, the pairing the date pickers page draws: in a compact window the\n// picker is a dialog, centred over the scrim with 16dp of room around it,\n// and from 600dp up it hangs under the field, placed by src/overlay as every\n// anchored panel here is, and flipped above it where the window has no room\n// below. Docked, a 360dp calendar anchored to a field is out of reach on a\n// phone; modal, a centred calendar on a tablet covers a form for no reason.\n//\n// **The surface is the calendar's own fill and corner**, surface container\n// high at the large corner, at the third elevation, the docked and the modal\n// picker's level alike, so the calendar inside it draws no second edge.\n//\n// **It fades and scales in and out** as every anchored panel here does, from\n// the edge facing the field docked and from its own centre modal, and the\n// scrim fades with it, both ways. Under reduced motion both arrive and leave\n// at once.\n//\n// **A screen reader goes to the date the calendar is on as it opens**, the\n// date held or else the one the calendar opens on, as web's focus does,\n// through the calendar's CalendarFocusContext. A surface holding no calendar\n// sends it to the surface itself.\n\ntype PickerPopupProps = {\n  /** The field's box, which a docked surface is placed under. */\n  readonly anchor: RefObject<HostInstance | null>\n  /** The calendar. */\n  readonly children?: ReactNode\n  readonly close: () => void\n  readonly isOpen: boolean\n  /** The surface's name, which is the trigger's. */\n  readonly label: string\n  /** The trigger, which a screen reader goes back to once the surface has gone. */\n  readonly trigger: HostInstance | null\n}\n\ntype PickerSurfaceProps = Omit<PickerPopupProps, 'trigger'> & {\n  readonly setPresent: (present: boolean) => void\n}\n\ntype PickerTriggerProps = {\n  readonly isDisabled: boolean\n  /** Whether the calendar is open, which the button reports. */\n  readonly isOpen: boolean\n  /** The button's name: what opens the calendar, then the field's label. */\n  readonly label: string\n  readonly onPress: () => void\n  readonly ref?: Ref<ComponentRef<typeof View>>\n}\n\nconst stylesOf = themedStyles(({ colors, radii, shadows }: ResolvedTheme) =>\n  StyleSheet.create({\n    // The modal surface's room: centred in the window, its padding 16dp\n    // clear of every edge inside the safe area. It takes no touches itself,\n    // so a press around the surface reaches the scrim under it.\n    layout: {\n      alignItems: 'center',\n      bottom: 0,\n      justifyContent: 'center',\n      left: 0,\n      pointerEvents: 'box-none',\n      position: 'absolute',\n      right: 0,\n      top: 0,\n    },\n    // As wide as the calendar, and no wider than the room the layout leaves,\n    // which a calendar narrows to.\n    modal: {\n      maxHeight: '100%',\n      maxWidth: '100%',\n      transformOrigin: 'center',\n    },\n    // The page's docked container: the calendar's own fill and corner, at\n    // the third elevation, clipping the calendar to the corner.\n    surface: {\n      backgroundColor: colors.surfaceContainerHigh,\n      borderRadius: radii.lg,\n      boxShadow: shadows.elevation3,\n      overflow: 'hidden',\n    },\n  }),\n)\n\n// The surface docked under the field, in the overlay host above the screen:\n// placed at the field's start edge, flipped above it at the window's edge,\n// over a layer a press outside it lands on.\nfunction PickerDocked({\n  anchor,\n  children,\n  close,\n  isOpen,\n  label,\n  setPresent,\n}: PickerSurfaceProps) {\n  const styles = stylesOf(useTheme())\n  const placement = useAnchoredPlacement({ align: 'start', anchor })\n  const shown = usePanelShown(isOpen, placement.placed, setPresent)\n  const motion = usePanelStyle(shown)\n  const [panel, setPanel] = useState<HostInstance | null>(null)\n  const [cell, setCell] = useState<HostInstance | null>(null)\n\n  useBackToClose(close, isOpen)\n  useFocusOnceReady(isOpen && placement.placed, cell ?? panel)\n\n  return (\n    <>\n      {isOpen ? <DismissLayer onPress={close} /> : null}\n      <Animated.View\n        aria-label={label}\n        onAccessibilityEscape={close}\n        onLayout={placement.onLayout}\n        ref={setPanel}\n        role=\"dialog\"\n        style={composeStyles<AnimatedStyle<ViewStyle>>(\n          styles.surface,\n          placement.style,\n          { transformOrigin: PANEL_ORIGINS[placement.side] },\n          motion,\n        )}\n      >\n        <CalendarFocusContext value={setCell}>{children}</CalendarFocusContext>\n      </Animated.View>\n    </>\n  )\n}\n\n// The surface as the page's modal picker: in a `Modal`, through src/modal,\n// centred over the scrim, which fades with it. A press on the scrim, the back\n// gesture and VoiceOver's escape gesture close it.\nfunction PickerModal({\n  children,\n  close,\n  isOpen,\n  label,\n  setPresent,\n}: PickerSurfaceProps) {\n  const theme = useTheme()\n  const { spacing } = theme\n  const styles = stylesOf(theme)\n  const insets = use(SafeAreaInsetsContext) ?? NO_INSETS\n  const shown = usePanelShown(isOpen, true, setPresent)\n  const motion = usePanelStyle(shown)\n  const scrim = useAnimatedStyle(() => {\n    'worklet'\n    return { opacity: shown.get() }\n  })\n  const [panel, setPanel] = useState<HostInstance | null>(null)\n  const [cell, setCell] = useState<HostInstance | null>(null)\n\n  return (\n    <ModalWindow\n      isKeyboardDismissDisabled={false}\n      label={label}\n      labelledBy={undefined}\n      onClose={close}\n      onScrimPress={isOpen ? close : undefined}\n      scrim={scrim}\n      title={cell ?? panel}\n    >\n      <NativeView\n        style={composeStyles<ViewStyle>(\n          styles.layout,\n          insetsOf(roomOf(insets, spacing.lg)),\n        )}\n      >\n        <Animated.View\n          {...panelRoleOf('dialog', undefined)}\n          aria-label={Platform.OS === 'web' ? undefined : label}\n          onAccessibilityEscape={close}\n          ref={setPanel}\n          style={composeStyles<AnimatedStyle<ViewStyle>>(\n            styles.surface,\n            styles.modal,\n            motion,\n          )}\n        >\n          <CalendarFocusContext value={setCell}>\n            {children}\n          </CalendarFocusContext>\n        </Animated.View>\n      </NativeView>\n    </ModalWindow>\n  )\n}\n\n/**\n * The calendar's surface while it is open and while its exit runs: mounted\n * the moment the picker opens, and kept until it has faded out, docked under\n * the field or modal in the middle of the window by the window's size. A\n * screen reader goes back to the trigger once it has gone.\n */\nfunction PickerPopup({ trigger, ...props }: PickerPopupProps) {\n  const [present, setPresent] = useState(props.isOpen)\n  const modal = useWindowSizeClass() === 'compact'\n\n  // Mounted the moment it opens, and kept until its exit has run.\n  if (props.isOpen && !present) {\n    setPresent(true)\n  }\n\n  useReturnFocus(present, false, { current: trigger })\n\n  if (!present) {\n    return null\n  }\n\n  return modal ? (\n    <PickerModal {...props} setPresent={setPresent} />\n  ) : (\n    <Overlay>\n      <PickerDocked {...props} setPresent={setPresent} />\n    </Overlay>\n  )\n}\n\n/**\n * The button in the field's trailing slot that opens the calendar: the icon\n * buttons page's 40dp standard button holding the calendar icon, reporting\n * whether the calendar is open. A disabled or read-only field disables it,\n * since neither takes a date from the calendar either.\n */\nfunction PickerTrigger({\n  isDisabled,\n  isOpen,\n  label,\n  onPress,\n  ref,\n}: PickerTriggerProps) {\n  return (\n    <IconButton\n      aria-expanded={isOpen}\n      aria-label={label}\n      isDisabled={isDisabled}\n      onPress={onPress}\n      ref={ref}\n    >\n      <CalendarGlyph />\n    </IconButton>\n  )\n}\n\n// The safe area with `room` more on every side, which the modal surface\n// keeps clear of the window's edges.\nfunction roomOf(insets: EdgeInsets, room: number): EdgeInsets {\n  return {\n    bottom: insets.bottom + room,\n    left: insets.left + room,\n    right: insets.right + room,\n    top: insets.top + room,\n  }\n}\n\n// Sends a screen reader to `target` as the docked surface is placed, once\n// each time it opens. The date the calendar is on moves with the month shown\n// and with a date pressed while the surface stays open, and a reader on the\n// next month's button stays there rather than being sent after it.\nfunction useFocusOnceReady(ready: boolean, target: HostInstance | null) {\n  const sendFocus = useEffectEvent(() => {\n    if (target !== null && Platform.OS !== 'web') {\n      AccessibilityInfo.sendAccessibilityEvent(target, 'focus')\n    }\n  })\n\n  useEffect(() => {\n    if (ready) {\n      sendFocus()\n    }\n  }, [ready])\n}\n\nexport { PickerPopup, PickerTrigger, roomOf }\nexport type { PickerPopupProps, PickerTriggerProps }\n"],"mappings":"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"}

package/dist/press/index.d.ts

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

package/dist/press/index.js

@@ -77,9 +77,10 @@ function hitSlop(height, width = 48) {
 */
 function usePressFeedback(t0) {
 	const $ = c(59);
-	const { area, color, corners, disabled, disableRipple: t1, disc, onBlur, onFocus, onHoverIn, onHoverOut, onPressIn, onPressOut, pending, pressedColor: t2 } = t0;
+	const { area, color, corners, disabled, disableRipple: t1, disc, held: t2, onBlur, onFocus, onHoverIn, onHoverOut, onPressIn, onPressOut, pending, pressedColor: t3 } = t0;
 	const disableRipple = t1 === void 0 ? false : t1;
-	const pressedColor = t2 === void 0 ? color : t2;
+	const held = t2 === void 0 ? false : t2;
+	const pressedColor = t3 === void 0 ? color : t3;
 	const theme = useTheme();
 	const reduceMotion = useReducedMotion();
 	const [hovered, setHovered] = useState(false);
@@ -116,9 +117,9 @@ function usePressFeedback(t0) {
 			width: size
 		};
 	});
-	let t3;
+	let t4;
 	if ($[0] !== fade || $[1] !== geometry || $[2] !== grow || $[3] !== motion || $[4] !== spacing || $[5] !== stateLayerOpacity) {
-		t3 = function ripple(width, height, origin) {
+		t4 = function ripple(width, height, origin) {
 			const size_0 = Math.max(1, Math.floor(Math.max(width, height) * INITIAL_ORIGIN_SCALE));
 			geometry.set({
 				end: {
@@ -149,12 +150,12 @@ function usePressFeedback(t0) {
 		$[3] = motion;
 		$[4] = spacing;
 		$[5] = stateLayerOpacity;
-		$[6] = t3;
-	} else t3 = $[6];
-	const ripple = t3;
-	let t4;
+		$[6] = t4;
+	} else t4 = $[6];
+	const ripple = t4;
+	let t5;
 	if ($[7] !== fade || $[8] !== motion) {
-		t4 = function release() {
+		t5 = function release() {
 			const shown = Date.now() - pressStarted.current;
 			fade.set(withDelay(Math.max(0, motion.durationMedium1 - shown), withTiming(0, {
 				duration: FADE_OUT,
@@ -163,51 +164,51 @@ function usePressFeedback(t0) {
 		};
 		$[7] = fade;
 		$[8] = motion;
-		$[9] = t4;
-	} else t4 = $[9];
-	const release = t4;
-	let t5;
+		$[9] = t5;
+	} else t5 = $[9];
+	const release = t5;
+	let t6;
 	if ($[10] !== onBlur) {
-		t5 = (event) => {
+		t6 = (event) => {
 			focused.current = false;
 			setRingShown(false);
 			onBlur?.(event);
 		};
 		$[10] = onBlur;
-		$[11] = t5;
-	} else t5 = $[11];
-	let t6;
+		$[11] = t6;
+	} else t6 = $[11];
+	let t7;
 	if ($[12] !== onFocus) {
-		t6 = (event_0) => {
+		t7 = (event_0) => {
 			focused.current = true;
 			setRingShown(!pressedUnfocused.current);
 			pressedUnfocused.current = false;
 			onFocus?.(event_0);
 		};
 		$[12] = onFocus;
-		$[13] = t6;
-	} else t6 = $[13];
-	let t7;
+		$[13] = t7;
+	} else t7 = $[13];
+	let t8;
 	if ($[14] !== onHoverIn) {
-		t7 = (event_1) => {
+		t8 = (event_1) => {
 			setHovered(true);
 			onHoverIn?.(event_1);
 		};
 		$[14] = onHoverIn;
-		$[15] = t7;
-	} else t7 = $[15];
-	let t8;
+		$[15] = t8;
+	} else t8 = $[15];
+	let t9;
 	if ($[16] !== onHoverOut) {
-		t8 = (event_2) => {
+		t9 = (event_2) => {
 			setHovered(false);
 			onHoverOut?.(event_2);
 		};
 		$[16] = onHoverOut;
-		$[17] = t8;
-	} else t8 = $[17];
-	let t9;
+		$[17] = t9;
+	} else t9 = $[17];
+	let t10;
 	if ($[18] !== area || $[19] !== disc || $[20] !== onPressIn || $[21] !== release || $[22] !== ripple || $[23] !== rippled) {
-		t9 = (event_3) => {
+		t10 = (event_3) => {
 			pressedUnfocused.current = !focused.current;
 			setPressed(true);
 			const fixed = disc === void 0 ? area : {
@@ -242,11 +243,11 @@ function usePressFeedback(t0) {
 		$[21] = release;
 		$[22] = ripple;
 		$[23] = rippled;
-		$[24] = t9;
-	} else t9 = $[24];
-	let t10;
+		$[24] = t10;
+	} else t10 = $[24];
+	let t11;
 	if ($[25] !== onPressOut || $[26] !== release) {
-		t10 = (event_4) => {
+		t11 = (event_4) => {
 			pressedUnfocused.current = false;
 			setPressed(false);
 			if (phase.current === "shown") release();
@@ -255,100 +256,101 @@ function usePressFeedback(t0) {
 		};
 		$[25] = onPressOut;
 		$[26] = release;
-		$[27] = t10;
-	} else t10 = $[27];
-	let t11;
-	if ($[28] !== t10 || $[29] !== t5 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
-		t11 = {
-			onBlur: t5,
-			onFocus: t6,
-			onHoverIn: t7,
-			onHoverOut: t8,
-			onPressIn: t9,
-			onPressOut: t10
+		$[27] = t11;
+	} else t11 = $[27];
+	let t12;
+	if ($[28] !== t10 || $[29] !== t11 || $[30] !== t6 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9) {
+		t12 = {
+			onBlur: t6,
+			onFocus: t7,
+			onHoverIn: t8,
+			onHoverOut: t9,
+			onPressIn: t10,
+			onPressOut: t11
 		};
 		$[28] = t10;
-		$[29] = t5;
+		$[29] = t11;
 		$[30] = t6;
 		$[31] = t7;
 		$[32] = t8;
 		$[33] = t9;
-		$[34] = t11;
-	} else t11 = $[34];
-	const handlers = t11;
-	const layerOpacity = !active ? 0 : interactive && pressed ? stateLayerOpacity.pressed : ringShown ? stateLayerOpacity.focus : interactive && hovered ? stateLayerOpacity.hover : 0;
-	let t12;
+		$[34] = t12;
+	} else t12 = $[34];
+	const handlers = t12;
+	const pressedLayer = interactive && (pressed || held);
+	const layerOpacity = !active ? 0 : pressedLayer ? stateLayerOpacity.pressed : ringShown ? stateLayerOpacity.focus : interactive && hovered ? stateLayerOpacity.hover : 0;
+	let t13;
 	if ($[35] !== corners) {
-		t12 = composeStyles(styles.surface, corners);
+		t13 = composeStyles(styles.surface, corners);
 		$[35] = corners;
-		$[36] = t12;
-	} else t12 = $[36];
-	const surface = t12;
-	const t13 = interactive && pressed ? pressedColor : color;
-	let t14;
-	if ($[37] !== layerOpacity || $[38] !== t13) {
-		t14 = composeStyles(styles.layer, {
-			backgroundColor: t13,
+		$[36] = t13;
+	} else t13 = $[36];
+	const surface = t13;
+	const t14 = pressedLayer ? pressedColor : color;
+	let t15;
+	if ($[37] !== layerOpacity || $[38] !== t14) {
+		t15 = composeStyles(styles.layer, {
+			backgroundColor: t14,
 			opacity: layerOpacity
 		});
 		$[37] = layerOpacity;
-		$[38] = t13;
-		$[39] = t14;
-	} else t14 = $[39];
-	const state = t14;
-	const t15 = interactive && hovered;
-	let t16;
+		$[38] = t14;
+		$[39] = t15;
+	} else t15 = $[39];
+	const state = t15;
+	const t16 = interactive && hovered;
+	let t17;
 	if ($[40] !== state) {
-		t16 = /* @__PURE__ */ jsx(View, { style: state });
+		t17 = /* @__PURE__ */ jsx(View, { style: state });
 		$[40] = state;
-		$[41] = t16;
-	} else t16 = $[41];
-	let t17;
+		$[41] = t17;
+	} else t17 = $[41];
+	let t18;
 	if ($[42] !== rippleMotion || $[43] !== rippled) {
-		t17 = rippled ? /* @__PURE__ */ jsx(Animated.View, { style: rippleMotion }) : null;
+		t18 = rippled ? /* @__PURE__ */ jsx(Animated.View, { style: rippleMotion }) : null;
 		$[42] = rippleMotion;
 		$[43] = rippled;
-		$[44] = t17;
-	} else t17 = $[44];
-	let t18;
-	if ($[45] !== surface || $[46] !== t16 || $[47] !== t17) {
-		t18 = /* @__PURE__ */ jsxs(View, {
+		$[44] = t18;
+	} else t18 = $[44];
+	let t19;
+	if ($[45] !== surface || $[46] !== t17 || $[47] !== t18) {
+		t19 = /* @__PURE__ */ jsxs(View, {
 			accessibilityElementsHidden: true,
 			importantForAccessibility: "no-hide-descendants",
 			style: surface,
-			children: [t16, t17]
+			children: [t17, t18]
 		});
 		$[45] = surface;
-		$[46] = t16;
-		$[47] = t17;
-		$[48] = t18;
-	} else t18 = $[48];
-	const t19 = interactive && pressed;
-	let t20;
+		$[46] = t17;
+		$[47] = t18;
+		$[48] = t19;
+	} else t19 = $[48];
+	const t20 = interactive && pressed;
+	let t21;
 	if ($[49] !== active || $[50] !== ringShown || $[51] !== theme) {
-		t20 = active && ringShown ? stylesOf(theme).ring : void 0;
+		t21 = active && ringShown ? stylesOf(theme).ring : void 0;
 		$[49] = active;
 		$[50] = ringShown;
 		$[51] = theme;
-		$[52] = t20;
-	} else t20 = $[52];
-	let t21;
-	if ($[53] !== handlers || $[54] !== t15 || $[55] !== t18 || $[56] !== t19 || $[57] !== t20) {
-		t21 = {
+		$[52] = t21;
+	} else t21 = $[52];
+	let t22;
+	if ($[53] !== handlers || $[54] !== t16 || $[55] !== t19 || $[56] !== t20 || $[57] !== t21) {
+		t22 = {
 			handlers,
-			hovered: t15,
-			layer: t18,
-			pressed: t19,
-			ring: t20
+			hovered: t16,
+			layer: t19,
+			pressed: t20,
+			ring: t21
 		};
 		$[53] = handlers;
-		$[54] = t15;
-		$[55] = t18;
-		$[56] = t19;
-		$[57] = t20;
-		$[58] = t21;
-	} else t21 = $[58];
-	return t21;
+		$[54] = t16;
+		$[55] = t19;
+		$[56] = t20;
+		$[57] = t21;
+		$[58] = t22;
+	} else t22 = $[58];
+	return t22;
 }
 //#endregion
 export { hitSlop, usePressFeedback };