pixelize-native-library 1.2.0 → 1.3.0

package/lib/module/modules/accordion/Accordion.js

@@ -9,31 +9,23 @@
  */
 
 import { memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Animated, Pressable, StyleSheet, Text, View } from "react-native";
-import { useAnimatedValue, useMotion } from "../../core/motion/index.js";
+import { Pressable, StyleSheet, Text, View } from "react-native";
+import Reanimated, { FadeInDown, FadeOut, LinearTransition, ReduceMotion, interpolate, useAnimatedStyle } from "react-native-reanimated";
+import { motionParallel, useMotion, useAnimatedValue } from "../../core/motion/index.js";
+import { usePressState } from "../../core/motion/usePressState.js";
 import { Icon } from "../../core/icon/index.js";
-import { useThemedStyles } from "../../core/style/index.js";
+import { FOCUS_RING_GAP, FOCUS_RING_WIDTH } from "../../core/style/focusRing.js";
+import { stateLayerScrim } from "../../theme/platform/stateLayer.native.js";
 import { VirtualList } from "../../core/list/index.js";
+import { renderNodeSlot } from "../../core/slot/index.js";
 import { useTheme } from "../../theme/hooks.js";
 import { Badge } from "../badge/index.js";
 import { ACCORDION_SIZES, accordionContentStructure, accordionHeaderStructure, accordionItemStructure, resolveAccordionColors, resolveAccordionHeaderAccessibility } from "./Accordion.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const VIRTUALIZE_THRESHOLD = 20;
 const ICON_STROKE = 2;
-const FOCUS_RING_WIDTH = 2;
-const FOCUS_RING_GAP = 2;
+const AnimatedPressable = Reanimated.createAnimatedComponent(Pressable);
 const toArray = v => v === undefined ? [] : Array.isArray(v) ? v : [v];
-let reanimatedModule;
-function getReanimated() {
-  if (reanimatedModule !== undefined) return reanimatedModule;
-  try {
-    // eslint-disable-next-line @typescript-eslint/no-require-imports
-    reanimatedModule = require("react-native-reanimated");
-  } catch {
-    reanimatedModule = null;
-  }
-  return reanimatedModule;
-}
 export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
   const {
     items,
@@ -78,6 +70,7 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
     theme: theme,
     colors: colors,
     onToggle: toggle,
+    mountAnimation: false,
     testID: testID ? `${testID}-${item.value}` : undefined
   }), [openValues, disabled, size, theme, colors, toggle, testID]);
   const keyExtractor = useCallback(item => item.value, []);
@@ -93,9 +86,10 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
       })
     });
   }
-  return /*#__PURE__*/_jsx(View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
     style: style,
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     children: items.map(item => /*#__PURE__*/_jsx(AccordionRow, {
       item: item,
       expanded: openValues.includes(item.value),
@@ -104,6 +98,7 @@ export const Accordion = /*#__PURE__*/memo(function Accordion(props) {
       theme: theme,
       colors: colors,
       onToggle: toggle,
+      mountAnimation: true,
       testID: testID ? `${testID}-${item.value}` : undefined
     }, item.value))
   });
@@ -116,9 +111,11 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
   theme,
   colors,
   onToggle,
+  mountAnimation,
   testID
 }) {
   const spec = ACCORDION_SIZES[size];
+  const press = usePressState(rowDisabled);
   const [focused, setFocused] = useState(false);
   const a11y = useMemo(() => resolveAccordionHeaderAccessibility({
     expanded,
@@ -127,66 +124,32 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
   const handlePress = useCallback(() => onToggle(item.value), [onToggle, item.value]);
   const handleFocus = useCallback(() => setFocused(true), []);
   const handleBlur = useCallback(() => setFocused(false), []);
-  const headerPressedStyle = useThemedStyles(t => accordionHeaderStructure(t, {
+  const headerPressedStyle = useMemo(() => accordionHeaderStructure(theme, {
     size
-  }), theme, [size]);
-  const contentStyle = useThemedStyles(t => accordionContentStructure(t, {
+  }), [theme, size]);
+  const contentStyle = useMemo(() => accordionContentStructure(theme, {
     size
-  }), theme, [size]);
-  const itemBody = item.renderContent?.() ?? item.content;
-  return /*#__PURE__*/_jsxs(View, {
+  }), [theme, size]);
+  const rawBody = item.renderContent?.() ?? item.content;
+  const bodyTextStyle = useMemo(() => [theme.fontStyleForWeight(theme.fontWeights.regular), {
+    fontSize: theme.fontSizes.sm,
+    color: colors.title
+  }], [theme, colors.title]);
+  const itemBody = renderNodeSlot(rawBody, bodyTextStyle);
+  const overlayStaticStyle = useMemo(() => ({
+    backgroundColor: stateLayerScrim(theme.mode),
+    borderRadius: theme.radii.sm
+  }), [theme.mode, theme.radii.sm]);
+  return /*#__PURE__*/_jsxs(Reanimated.View, {
+    entering: mountAnimation ? FadeInDown.springify().reduceMotion(ReduceMotion.System) : undefined,
+    exiting: FadeOut.reduceMotion(ReduceMotion.System),
+    layout: LinearTransition.reduceMotion(ReduceMotion.System),
     style: [accordionItemStructure(theme), {
       borderBottomColor: colors.divider
     }],
-    children: [/*#__PURE__*/_jsxs(Pressable, {
-      testID: testID,
-      accessibilityRole: a11y.accessibilityRole,
-      "aria-expanded": a11y["aria-expanded"],
-      "aria-disabled": a11y["aria-disabled"],
-      accessibilityLabel: item.subtitle ? `${item.title}, ${item.subtitle}` : item.title,
-      disabled: a11y.disabled,
-      onPress: a11y.disabled ? undefined : handlePress,
-      onFocus: handleFocus,
-      onBlur: handleBlur,
-      hitSlop: spec.hitSlop,
-      style: ({
-        pressed
-      }) => [headerPressedStyle, pressed && !rowDisabled && {
-        backgroundColor: colors.pressedHeaderBg
-      }, rowDisabled && styles.dimmed],
-      children: [item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
-        name: item.icon,
-        size: spec.iconSize,
-        color: colors.icon,
-        strokeWidth: ICON_STROKE
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.headerText,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
-            fontSize: spec.fontSize,
-            color: colors.title
-          }],
-          children: item.title
-        }), item.subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
-          numberOfLines: 1,
-          style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-            fontSize: theme.fontSizes.sm,
-            color: colors.icon,
-            marginTop: theme.space[1]
-          }],
-          children: item.subtitle
-        })]
-      }), item.badge !== undefined && /*#__PURE__*/_jsx(Badge, {
-        label: item.badge,
-        size: "sm",
-        tone: "neutral"
-      }), /*#__PURE__*/_jsx(AccordionChevron, {
-        expanded: expanded,
-        disabled: rowDisabled,
-        size: size,
-        colors: colors
-      }), focused && /*#__PURE__*/_jsx(View, {
-        pointerEvents: "none",
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.headerHost,
+      children: [focused && /*#__PURE__*/_jsx(View, {
         testID: testID ? `${testID}-focus-ring` : undefined,
         style: {
           position: "absolute",
@@ -196,8 +159,62 @@ const AccordionRow = /*#__PURE__*/memo(function AccordionRow({
           bottom: -(FOCUS_RING_GAP + FOCUS_RING_WIDTH),
           borderWidth: FOCUS_RING_WIDTH,
           borderColor: colors.focusRing,
-          borderRadius: theme.radii.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH
+          borderRadius: theme.radii.sm + FOCUS_RING_GAP + FOCUS_RING_WIDTH,
+          pointerEvents: "none"
         }
+      }), /*#__PURE__*/_jsxs(AnimatedPressable, {
+        testID: testID,
+        accessibilityRole: a11y.accessibilityRole,
+        "aria-expanded": a11y["aria-expanded"],
+        "aria-disabled": a11y["aria-disabled"],
+        accessibilityLabel: item.subtitle ? `${item.title}, ${item.subtitle}` : item.title,
+        disabled: a11y.disabled,
+        onPress: a11y.disabled ? undefined : handlePress,
+        onPressIn: press.handlers.onPressIn,
+        onPressOut: press.handlers.onPressOut,
+        onLayout: press.onLayout,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        hitSlop: spec.hitSlop,
+        style: [headerPressedStyle, {
+          overflow: "hidden"
+        }, press.animatedStyle, rowDisabled && styles.dimmed],
+        children: [/*#__PURE__*/_jsx(Reanimated.View, {
+          style: [StyleSheet.absoluteFill, overlayStaticStyle, press.overlayStyle, {
+            pointerEvents: 'none'
+          }]
+        }), item.icon !== undefined && /*#__PURE__*/_jsx(Icon, {
+          name: item.icon,
+          size: spec.iconSize,
+          color: colors.icon,
+          strokeWidth: ICON_STROKE
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.headerText,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [theme.fontStyleForWeight(theme.fontWeights.medium), {
+              fontSize: spec.fontSize,
+              color: colors.title
+            }],
+            children: item.title
+          }), item.subtitle !== undefined && /*#__PURE__*/_jsx(Text, {
+            numberOfLines: 1,
+            style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+              fontSize: theme.fontSizes.sm,
+              color: colors.icon,
+              marginTop: theme.space[1]
+            }],
+            children: item.subtitle
+          })]
+        }), item.badge !== undefined && /*#__PURE__*/_jsx(Badge, {
+          label: item.badge,
+          size: "sm",
+          tone: "neutral"
+        }), /*#__PURE__*/_jsx(AccordionChevron, {
+          expanded: expanded,
+          disabled: rowDisabled,
+          size: size,
+          colors: colors
+        })]
       })]
     }), itemBody !== null && itemBody !== undefined && /*#__PURE__*/_jsx(AccordionAnimatedContent, {
       expanded: expanded,
@@ -220,99 +237,44 @@ const AccordionAnimatedContent = /*#__PURE__*/memo(function AccordionAnimatedCon
   const skipEnterAnimation = useRef(expanded);
   const running = useRef(null);
   const offsetY = motion.transform.offsetY;
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+    transform: [{
+      translateY: translateY.value
+    }]
+  }));
   useEffect(() => {
     running.current?.stop();
     if (!expanded) {
-      // Reset while unmounted so the next expand can't paint its first frame opaque.
-      opacity.setValue(0);
-      translateY.setValue(-offsetY);
+      opacity.value = 0;
+      translateY.value = -offsetY;
       return undefined;
     }
     if (!motion.enabled || skipEnterAnimation.current) {
       skipEnterAnimation.current = false;
-      opacity.setValue(1);
-      translateY.setValue(0);
+      opacity.value = 1;
+      translateY.value = 0;
       return undefined;
     }
-    opacity.setValue(0);
-    translateY.setValue(-offsetY);
-    running.current = Animated.parallel([motion.timing(opacity, 1, {
+    opacity.value = 0;
+    translateY.value = -offsetY;
+    running.current = motionParallel(motion.timing(opacity, 1, {
       easing: "decelerate"
     }), motion.timing(translateY, 0, {
       easing: "decelerate"
-    })]);
+    }));
     running.current.start();
     return () => running.current?.stop();
   }, [expanded, motion, opacity, translateY, offsetY]);
   useEffect(() => () => running.current?.stop(), []);
-
-  // Synchronous unmount, deliberately with no exit fade: `filter-sheet`'s test asserts the closed
-  // section is gone on the very next render. Never gate this on an animation.
   if (!expanded) return null;
-  return /*#__PURE__*/_jsx(Animated.View, {
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     testID: testID,
-    style: [style, {
-      opacity,
-      transform: [{
-        translateY
-      }]
-    }],
+    style: [style, animatedStyle],
     children: children
   });
 });
 const AccordionChevron = /*#__PURE__*/memo(function AccordionChevron({
-  expanded,
-  disabled,
-  size,
-  colors
-}) {
-  const Reanimated = getReanimated();
-  if (Reanimated) {
-    return /*#__PURE__*/_jsx(AccordionChevronReanimated, {
-      expanded: expanded,
-      disabled: disabled,
-      size: size,
-      colors: colors,
-      reanimated: Reanimated
-    });
-  }
-  return /*#__PURE__*/_jsx(AccordionChevronAnimated, {
-    expanded: expanded,
-    disabled: disabled,
-    size: size,
-    colors: colors
-  });
-});
-function AccordionChevronReanimated({
-  expanded,
-  size,
-  colors,
-  reanimated
-}) {
-  const motion = useMotion();
-  const spec = ACCORDION_SIZES[size];
-  const rotation = reanimated.useSharedValue(expanded ? 1 : 0);
-  useEffect(() => {
-    rotation.value = motion.enabled ? reanimated.withTiming(expanded ? 1 : 0, {
-      duration: motion.duration("normal")
-    }) : expanded ? 1 : 0;
-  }, [expanded, motion, rotation, reanimated]);
-  const animatedStyle = reanimated.useAnimatedStyle(() => ({
-    transform: [{
-      rotate: `${rotation.value * 180}deg`
-    }]
-  }));
-  return /*#__PURE__*/_jsx(reanimated.default.View, {
-    style: animatedStyle,
-    children: /*#__PURE__*/_jsx(Icon, {
-      name: "chevron-down",
-      size: spec.iconSize,
-      color: colors.icon,
-      strokeWidth: ICON_STROKE
-    })
-  });
-}
-function AccordionChevronAnimated({
   expanded,
   size,
   colors
@@ -324,7 +286,7 @@ function AccordionChevronAnimated({
   useEffect(() => {
     running.current?.stop();
     if (!motion.enabled) {
-      rotation.setValue(expanded ? 1 : 0);
+      rotation.value = expanded ? 1 : 0;
       return undefined;
     }
     running.current = motion.timing(rotation, expanded ? 1 : 0, {
@@ -334,15 +296,12 @@ function AccordionChevronAnimated({
     return () => running.current?.stop();
   }, [expanded, motion, rotation]);
   useEffect(() => () => running.current?.stop(), []);
-  const chevronStyle = useMemo(() => ({
+  const chevronStyle = useAnimatedStyle(() => ({
     transform: [{
-      rotate: rotation.interpolate({
-        inputRange: [0, 1],
-        outputRange: ["0deg", "180deg"]
-      })
+      rotate: `${interpolate(rotation.value, [0, 1], [0, 180])}deg`
     }]
-  }), [rotation]);
-  return /*#__PURE__*/_jsx(Animated.View, {
+  }));
+  return /*#__PURE__*/_jsx(Reanimated.View, {
     style: chevronStyle,
     children: /*#__PURE__*/_jsx(Icon, {
       name: "chevron-down",
@@ -351,13 +310,16 @@ function AccordionChevronAnimated({
       strokeWidth: ICON_STROKE
     })
   });
-}
+});
 const styles = StyleSheet.create({
   dimmed: {
     opacity: 0.5
   },
   headerText: {
     flex: 1
+  },
+  headerHost: {
+    position: "relative"
   }
 });
 //# sourceMappingURL=Accordion.js.map

package/lib/module/modules/accordion/Accordion.variants.js

@@ -14,11 +14,10 @@
  *    rendering React Native.
  */
 
+import { MIN_TOUCH_TARGET, slopFor } from "../../core/a11y/touchTarget.js";
+import { StyleSheet } from "react-native";
 import { createThemedVariants } from "../../core/style/index.js";
-/** Same floor as Button/Tabs/Select — 44dp (WCAG 2.5.5 AAA / HIG). Duplicated, not imported: modules
- * stay isolated. */
-export const MIN_TOUCH_TARGET = 44;
-const slopFor = height => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - height) / 2));
+export { MIN_TOUCH_TARGET };
 /**
  * Accordion-specific dimensions. Kept a plain constant — no theme dependency — so the hit-target
  * test can assert `headerMinHeight + 2·hitSlop ≥ 44` without a provider, same as `BUTTON_SIZES`.
@@ -77,12 +76,12 @@ export function resolveAccordionHeaderAccessibility(input) {
 }
 
 /**
- * One item's separator — a hairline on the bottom edge, theme-scaled border WIDTH. Colour
+ * One item's separator — a StyleSheet.hairlineWidth on the bottom edge, theme-scaled border WIDTH. Colour
  * (`divider`) is resolved separately and applied inline over this.
  */
-export const accordionItemStructure = createThemedVariants(theme => ({
+export const accordionItemStructure = createThemedVariants(_theme => ({
   base: {
-    borderBottomWidth: theme.borderWidths.thin
+    borderBottomWidth: StyleSheet.hairlineWidth
   }
 }));
 

package/lib/module/modules/accordion/AccordionProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=AccordionProps.js.map

package/lib/module/modules/accordion/MODULE.md

@@ -20,12 +20,12 @@ too. `type="multiple"` lets every section toggle independently.
 
 | Prop | Type | Default | Notes |
 |------|------|---------|-------|
-| `items` | `{ value: string; title: string; content: ReactNode }[]` | — | Rendered in order. `content` is ordinary composition rendered directly under a `View` when expanded — same contract as `Card.children`: wrap your own raw text in `Text` yourself. |
+| `items` | `AccordionItem[]` | — | Rendered in order. Each item: `value`, `title`, optional `subtitle`, `icon` (`IconName`), `badge`, `disabled`, and its body as either `content` (eager) or `renderContent: () => ReactNode` (lazy — use it when a section is heavy). The body is ordinary composition rendered directly under a `View` when expanded — same contract as `Card.children`: wrap your own raw text in `Text` yourself. |
 | `type` | `single \| multiple` | `single` | Discriminates the shape of `value`/`defaultValue`/`onValueChange` below. |
 | `value` | `string` (single) / `string[]` (multiple) | — | Controlled open value(s). Omit for uncontrolled. |
 | `defaultValue` | `string` (single) / `string[]` (multiple) | — | Initial open value(s) when uncontrolled. |
 | `onValueChange` | `(value: string) => void` (single) / `(value: string[]) => void` (multiple) | — | Fires on every toggle, in both controlled and uncontrolled use. |
-| `disabled` | `boolean` | `false` | Blocks every header's toggle at once — there is no per-item `disabled`. |
+| `disabled` | `boolean` | `false` | Blocks every header that is not already individually disabled via `items[].disabled`. |
 | `size` | `sm \| md \| lg` | `md` | 40 / 48 / 56 dp header floor; `sm` reaches 44 via `hitSlop`. |
 | `style` | `LayoutStyle` | — | Layout-only, outermost (the container `View`), applied exactly once, last. |
 | `testID` | `string` | — | Container's testID; each header gets `` `${testID}-${item.value}` ``, its content `` `${testID}-${item.value}-content` ``, and its focus ring `` `${testID}-${item.value}-focus-ring` ``, when set. |
@@ -62,20 +62,19 @@ way so far, because a disclosure list's open state is commonly local UI state, n
 
 ## Motion
 
-Everything routes through **`useMotion()`** — no module-local timing constant, no raw `Easing.`
-(`ACCORDION_TIMING` and `CONTENT_EASE_IN` are gone). Both consequences are the point: the content
-reveal and the chevron now pick up the device tier's `durationScale` and the global `MOTION_SCALE` /
-`MOTION_ENABLED` switches, which a module-scope read of `MOTION_DURATION.normal` never could. The
-slide distance is `MOTION_TRANSFORM.offsetY`; reduce-motion is `motion.enabled`, never a second
-`useReducedMotion()` call (`core/motion/MODULE.md` rule 6).
+Everything routes through **`useMotion()`** (Reanimated shared values) — no module-local timing
+constant, no raw `Easing.`, so the content reveal and the chevron pick up the device tier's
+`durationScale` and the global `MOTION_SCALE` / `MOTION_ENABLED` switches. The slide distance is
+`MOTION_TRANSFORM.offsetY`; reduce-motion is `motion.enabled`, never a second `useReducedMotion()`
+call (`core/motion/MODULE.md` rule 6). Header presses use `usePressState`. Rows themselves carry
+Reanimated `entering`/`exiting`/`layout` (`FadeInDown` / `FadeOut` / `LinearTransition`), all
+`reduceMotion(ReduceMotion.System)`.
 
 ## Why content is not height-animated
 
-React Native has no native height transition without a measure-then-animate hack: mount the content
-off-screen, measure it via `onLayout`, then tween an `Animated.Value` from 0 to the measured height.
-That hack is fragile (a resize invalidates the cached measurement, a wrong first frame is visible)
-and is not meaningfully testable under this repo's test renderer, which never runs real layout (see
-`Tabs`' own documented gap for its indicator's `onLayout` dependency). Instead, expanded content uses
+React Native has no native height transition without a measure-then-animate hack, which is fragile
+(a resize invalidates the cached measurement) and not meaningfully testable under this repo's test
+renderer, which never runs real layout. Instead, expanded content uses
 a native-driver **opacity + translateY** reveal, and unmounts on collapse without an exit
 tween — no layout measurement, no scroll jank. Mounting is derived from `expanded` rather than
 gated on an animation callback: a tween that is interrupted, or never runs, must never be able to
@@ -84,13 +83,6 @@ strand collapsed content in the tree. **The missing exit fade is deliberate and
 an exit animation here breaks that — `Accordion.motion.test.tsx` pins the synchronous unmount. Sections that start open (`defaultValue`) snap in with no
 enter animation. Under reduced motion, content snaps instantly the same way the chevron does.
 
-## Why `disabled` is whole-accordion, not per-item
-
-The spec's prop list has one `disabled`, not a per-item flag on `AccordionItem` — mirroring how
-`RadioGroup`'s `disabled` blocks every row at once. A consumer needing a single non-collapsible
-section can omit that item from `items` reactively, or simply not wire its header (this library
-does not attempt to special-case that; flagged here rather than silently guessed at).
-
 ## Patterns (copied from Button / Tabs / Select)
 
 1. **Structure vs colour split.** Header height floor/padding and the separator's border WIDTH are
@@ -106,9 +98,9 @@ does not attempt to special-case that; flagged here rather than silently guessed
 
 ## Known gaps
 
-- No per-item `disabled` (see above — a deliberate scope decision, not an oversight).
-- No horizontal scrolling / virtualization concern — v1 assumes `items` is a normal-length list
-  (same scope decision `RadioGroup`/`Tabs` made for their own lists).
+- No height tween on the reveal (see above) — opacity + translateY only.
+- At 20 or more `items` the stack swaps to `VirtualList`, which drops the per-row enter/exit and
+  `layout` animations the short-list path gets.
 
 ## Performance
 

package/lib/module/modules/alert-dialog/AlertDialog.js

@@ -8,11 +8,13 @@
  * actions appear, in what order, and which tone the confirm action carries.
  */
 
-import { memo } from "react";
-import { Text, View } from "react-native";
+import { memo, useEffect, useMemo, useState } from "react";
+import { View } from "react-native";
 import { useTheme } from "../../theme/hooks.js";
 import { Button } from "../button/index.js";
+import { Input } from "../input/index.js";
 import { Modal } from "../modal/index.js";
+import { Text } from "../text/index.js";
 import { alertDialogActionsStructure, resolveAlertDialogConfirmTone } from "./AlertDialog.variants.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
@@ -25,24 +27,39 @@ export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
   onConfirm,
   onCancel,
   tone = "default",
+  confirmationText,
   testID
 }) {
   const theme = useTheme();
   const confirmTone = resolveAlertDialogConfirmTone(tone);
   const cancelPress = onCancel ?? onRequestClose;
+  const [typed, setTyped] = useState("");
+  const confirmArmed = useMemo(() => confirmationText === undefined || typed === confirmationText, [confirmationText, typed]);
+  useEffect(() => {
+    if (!visible) setTyped("");
+  }, [visible]);
   return /*#__PURE__*/_jsxs(Modal, {
     visible: visible,
     onRequestClose: onRequestClose,
     title: title,
     testID: testID,
     children: [description !== undefined && /*#__PURE__*/_jsx(Text, {
-      style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
-        fontSize: theme.fontSizes.md,
-        color: theme.colors.fg.muted,
+      variant: "body",
+      color: "muted",
+      style: {
         marginBottom: theme.space[5]
-      }],
+      },
       children: description
-    }), /*#__PURE__*/_jsxs(View, {
+    }), confirmationText !== undefined ? /*#__PURE__*/_jsx(Input, {
+      value: typed,
+      onChangeText: setTyped,
+      label: `Type ${confirmationText} to confirm`,
+      accessibilityLabel: `Type ${confirmationText} to confirm`,
+      containerStyle: {
+        marginBottom: theme.space[4]
+      },
+      testID: testID ? `${testID}-confirmation` : undefined
+    }) : null, /*#__PURE__*/_jsxs(View, {
       style: alertDialogActionsStructure(theme),
       children: [/*#__PURE__*/_jsx(Button, {
         variant: "outline",
@@ -54,6 +71,7 @@ export const AlertDialog = /*#__PURE__*/memo(function AlertDialog({
         tone: confirmTone,
         label: confirmLabel,
         onPress: onConfirm,
+        disabled: !confirmArmed,
         testID: testID ? `${testID}-confirm` : undefined
       })]
     })]

package/lib/module/modules/alert-dialog/AlertDialog.variants.js

@@ -15,6 +15,7 @@
  */
 
 import { createThemedVariants } from "../../core/style/index.js";
+import { floatingSurfaceStyle } from "../../theme/platform/floatingSurface.native.js";
 /**
  * Maps AlertDialog's own closed `tone` union onto the confirm action's `ButtonTone`. `"default"`
  * resolves to Button's own default tone (`"accent"`) rather than inventing a fourth tone value;
@@ -41,4 +42,7 @@ export const alertDialogActionsStructure = createThemedVariants(theme => ({
     columnGap: theme.space[3]
   }
 }));
+export function alertDialogPanelDepth(theme) {
+  return floatingSurfaceStyle(theme, "lg");
+}
 //# sourceMappingURL=AlertDialog.variants.js.map

package/lib/module/modules/alert-dialog/AlertDialogProps.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export {};
+//# sourceMappingURL=AlertDialogProps.js.map

package/lib/module/modules/alert-dialog/MODULE.md

@@ -28,7 +28,8 @@ exactly one thing of its own: which two actions appear and which tone the confir
 | `onConfirm` | `() => void` | — | Required. Wired to the confirm Button's `onPress`. |
 | `onCancel` | `() => void` | `onRequestClose` | Wired to the cancel Button's `onPress`. Cancelling and dismissing mean the same thing unless overridden. |
 | `tone` | `"default" \| "danger"` | `"default"` | Closed union. `"danger"` passes `tone="danger"` to the confirm `Button`, mirroring Button's own destructive-action tone; `"default"` maps to Button's own default (`"accent"`). |
-| `testID` | `string` | — | Forwarded to `Modal` (seeds `${testID}-backdrop`/`${testID}-panel`) and also seeds `${testID}-cancel` / `${testID}-confirm` on the two actions. |
+| `confirmationText` | `string` | — | When set, renders a confirmation `Input` and keeps confirm disabled until the typed value matches exactly. Clears when `visible` becomes false. |
+| `testID` | `string` | — | Forwarded to `Modal` (seeds `${testID}-backdrop`/`${testID}-panel`) and also seeds `${testID}-cancel` / `${testID}-confirm` on the two actions. Seeds `${testID}-confirmation` on the guard field when `confirmationText` is set. |
 
 No `style` — same reasoning as `Modal` (see its "Why no `style`" section): there is no parent
 layout flow to place a full-screen dialog within.