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

package/dist/modal/index.js

@@ -0,0 +1,284 @@
+import { useTheme } from "../theme/scope.js";
+import { composeStyles, themedStyles } from "../theme/styles.js";
+import { ButtonSlotContext } from "../button/slots.js";
+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 { useOverlayTriggerState } from "react-stately/useOverlayTriggerState";
+//#region src/modal/index.tsx
+const NO_INSETS = {
+	bottom: 0,
+	left: 0,
+	right: 0,
+	top: 0
+};
+const ORIENTATIONS = [
+	"portrait",
+	"portrait-upside-down",
+	"landscape",
+	"landscape-left",
+	"landscape-right"
+];
+const SCRIM_OPACITY = .32;
+const stylesOf = themedStyles(({ colors }) => StyleSheet.create({ scrim: {
+	backgroundColor: withOpacity(colors.scrim, SCRIM_OPACITY),
+	bottom: 0,
+	left: 0,
+	position: "absolute",
+	right: 0,
+	top: 0
+} }));
+function focusOf(title) {
+	return () => {
+		if (title !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(title, "focus");
+	};
+}
+function ignore() {}
+function insetsOf(insets) {
+	const rtl = I18nManager.isRTL;
+	return {
+		paddingBottom: insets.bottom,
+		paddingEnd: rtl ? insets.left : insets.right,
+		paddingStart: rtl ? insets.right : insets.left,
+		paddingTop: insets.top
+	};
+}
+/**
+* The window a modal surface is drawn in: the `Modal`, the overlays it hosts,
+* and the scrim, with the surface itself as its children.
+*/
+function ModalWindow(t0) {
+	const $ = c(20);
+	const { children, isKeyboardDismissDisabled, labelledBy, onClose, onScrimPress, scrim, title } = t0;
+	const styles = stylesOf(useTheme());
+	const T0 = Modal;
+	const t1 = "none";
+	const t2 = Platform.OS === "web" ? labelledBy : void 0;
+	const t3 = true;
+	const t4 = isKeyboardDismissDisabled ? ignore : onClose;
+	let t5;
+	if ($[0] !== title) {
+		t5 = focusOf(title);
+		$[0] = title;
+		$[1] = t5;
+	} else t5 = $[1];
+	const t6 = true;
+	const t7 = ORIENTATIONS;
+	const t8 = true;
+	const t9 = true;
+	const T1 = ButtonSlotContext;
+	const t10 = null;
+	const T2 = OverlayHost;
+	const T3 = AnimatedPressable;
+	const t11 = false;
+	const t12 = true;
+	const t13 = false;
+	const t14 = composeStyles(styles.scrim, scrim);
+	let t15;
+	if ($[2] !== T3 || $[3] !== onScrimPress || $[4] !== t14) {
+		t15 = /* @__PURE__ */ jsx(T3, {
+			accessible: t11,
+			"aria-hidden": t12,
+			focusable: t13,
+			onPress: onScrimPress,
+			style: t14,
+			tabIndex: -1
+		});
+		$[2] = T3;
+		$[3] = onScrimPress;
+		$[4] = t14;
+		$[5] = t15;
+	} else t15 = $[5];
+	let t16;
+	if ($[6] !== T2 || $[7] !== children || $[8] !== t15) {
+		t16 = /* @__PURE__ */ jsxs(T2, { children: [t15, children] });
+		$[6] = T2;
+		$[7] = children;
+		$[8] = t15;
+		$[9] = t16;
+	} else t16 = $[9];
+	let t17;
+	if ($[10] !== T1 || $[11] !== t16) {
+		t17 = /* @__PURE__ */ jsx(T1, {
+			value: t10,
+			children: t16
+		});
+		$[10] = T1;
+		$[11] = t16;
+		$[12] = t17;
+	} else t17 = $[12];
+	let t18;
+	if ($[13] !== T0 || $[14] !== t17 || $[15] !== t2 || $[16] !== t4 || $[17] !== t5 || $[18] !== t7) {
+		t18 = /* @__PURE__ */ jsx(T0, {
+			animationType: t1,
+			"aria-labelledby": t2,
+			navigationBarTranslucent: t3,
+			onRequestClose: t4,
+			onShow: t5,
+			statusBarTranslucent: t6,
+			supportedOrientations: t7,
+			transparent: t8,
+			visible: t9,
+			children: t17
+		});
+		$[13] = T0;
+		$[14] = t17;
+		$[15] = t2;
+		$[16] = t4;
+		$[17] = t5;
+		$[18] = t7;
+		$[19] = t18;
+	} else t18 = $[19];
+	return t18;
+}
+function panelRoleOf(role, labelledBy) {
+	if (Platform.OS === "web") return {};
+	return {
+		"aria-labelledby": labelledBy,
+		"aria-modal": true,
+		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) => ({
+			...parts,
+			[part]: parts[part] + 1
+		}));
+		return () => {
+			setParts((parts) => ({
+				...parts,
+				[part]: parts[part] - 1
+			}));
+		};
+	};
+}
+/**
+* The open state a surface's content part reads: its trigger's, inside one,
+* and its own otherwise. `present` stays true from the moment it opens until
+* the call site's exit has run and set it false, and the close slot and the
+* scrim close it through `close`.
+*/
+function useModalState(outer, props) {
+	const $ = c(9);
+	const own = useOverlayTriggerState(props);
+	const state = outer?.state ?? own;
+	const [present, setPresent] = useState(state.isOpen);
+	let t0;
+	if ($[0] !== state) {
+		t0 = () => {
+			state.close();
+		};
+		$[0] = state;
+		$[1] = t0;
+	} else t0 = $[1];
+	const close = t0;
+	let t1;
+	if ($[2] !== close) {
+		t1 = { close };
+		$[2] = close;
+		$[3] = t1;
+	} else t1 = $[3];
+	const slots = t1;
+	if (state.isOpen && !present) setPresent(true);
+	useReturnFocus(present, outer);
+	let t2;
+	if ($[4] !== close || $[5] !== present || $[6] !== slots || $[7] !== state) {
+		t2 = {
+			close,
+			present,
+			setPresent,
+			slots,
+			state
+		};
+		$[4] = close;
+		$[5] = present;
+		$[6] = slots;
+		$[7] = state;
+		$[8] = t2;
+	} else t2 = $[8];
+	return t2;
+}
+/**
+* The open state a surface's trigger part holds, and the default slot a
+* button inside it fills: it records itself as the button focus returns to,
+* and opens the surface. React Native types the target as a bare view tag
+* too, which focus cannot be sent to, so such a press records nothing.
+*/
+function useModalTrigger(props) {
+	const $ = c(8);
+	const state = useOverlayTriggerState(props);
+	const [trigger, setTrigger] = useState(null);
+	let t0;
+	if ($[0] !== state || $[1] !== trigger) {
+		t0 = {
+			state,
+			trigger
+		};
+		$[0] = state;
+		$[1] = trigger;
+		$[2] = t0;
+	} else t0 = $[2];
+	const context = t0;
+	let t1;
+	if ($[3] !== state) {
+		t1 = { default: (event) => {
+			const target = event.currentTarget;
+			setTrigger(typeof target === "number" ? null : target);
+			state.open();
+		} };
+		$[3] = state;
+		$[4] = t1;
+	} else t1 = $[4];
+	const slots = t1;
+	let t2;
+	if ($[5] !== context || $[6] !== slots) {
+		t2 = {
+			context,
+			slots
+		};
+		$[5] = context;
+		$[6] = slots;
+		$[7] = t2;
+	} else t2 = $[7];
+	return t2;
+}
+function useReturnFocus(present, outer) {
+	const $ = c(6);
+	const shown = useRef(present);
+	let t0;
+	if ($[0] !== outer?.trigger || $[1] !== present) {
+		t0 = () => {
+			const trigger = outer?.trigger ?? null;
+			const gone = shown.current && !present;
+			shown.current = present;
+			if (gone && trigger !== null && Platform.OS !== "web") AccessibilityInfo.sendAccessibilityEvent(trigger, "focus");
+		};
+		$[0] = outer?.trigger;
+		$[1] = present;
+		$[2] = t0;
+	} else t0 = $[2];
+	let t1;
+	if ($[3] !== outer || $[4] !== present) {
+		t1 = [outer, present];
+		$[3] = outer;
+		$[4] = present;
+		$[5] = t1;
+	} else t1 = $[5];
+	useEffect(t0, t1);
+}
+//#endregion
+export { ModalWindow, NO_INSETS, insetsOf, panelRoleOf, refsOf, registerOf, useModalState, useModalTrigger };
+
+//# sourceMappingURL=index.js.map

package/dist/modal/index.js.map

@@ -0,0 +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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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/react-native-kanso-ui",
-  "version": "0.3.0",
+  "version": "0.4.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",
@@ -61,8 +61,8 @@
     "@commitlint/config-conventional": "21.2.3",
     "@eslint/js": "10.0.1",
     "@jest/globals": "29.7.0",
-    "@kanso-labs/kanso-ui": "0.43.3",
-    "@kanso-labs/unplugin-style-dictionary": "0.10.30",
+    "@kanso-labs/kanso-ui": "0.43.4",
+    "@kanso-labs/unplugin-style-dictionary": "0.10.32",
     "@react-native/babel-preset": "0.88.0",
     "@react-native/jest-preset": "0.88.0",
     "@rolldown/plugin-babel": "0.2.4",
@@ -74,9 +74,9 @@
     "@testing-library/react-native": "14.1.0",
     "@types/node": "26.6.5",
     "@types/react": "19.3.0",
-    "@vitest/browser-playwright": "5.0.4",
+    "@vitest/browser-playwright": "5.0.5",
     "babel-plugin-react-compiler": "1.0.0",
-    "eslint": "10.12.0",
+    "eslint": "10.13.0",
     "eslint-plugin-oxlint": "1.88.0",
     "eslint-plugin-perfectionist": "5.12.1",
     "eslint-plugin-react-hooks": "7.1.1",
@@ -92,21 +92,21 @@
     "publint": "0.3.25",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "react-native": "0.87.1",
-    "react-native-gesture-handler": "2.33.0",
+    "react-native": "0.88.0",
+    "react-native-gesture-handler": "3.4.0",
     "react-native-reanimated": "4.7.1",
     "react-native-safe-area-context": "5.10.1",
-    "react-native-svg": "15.15.5",
+    "react-native-svg": "15.16.0",
     "react-native-web": "0.21.4",
     "react-native-worklets": "0.13.0",
     "storybook": "10.6.2",
-    "style-dictionary": "5.6.1",
+    "style-dictionary": "5.7.0",
     "test-renderer": "1.3.1",
     "tsdown": "0.23.1",
     "typescript": "6.0.3",
     "typescript-eslint": "8.71.2",
     "vite": "8.3.4",
-    "vitest": "5.0.4"
+    "vitest": "5.0.5"
   },
   "peerDependencies": {
     "expo-clipboard": ">=57.0.0",