pixelize-native-library 1.0.6

package/lib/module/modules/toast/Toast.js

@@ -0,0 +1,178 @@
+"use strict";
+
+/**
+ * Toast — a `ToastProvider` + `useToast()` hook, not a component a consumer places directly (it has
+ * no visual home of its own to lay out: it always floats above whatever the provider wraps). Every
+ * screen mounts `ToastProvider` once, near the root; any descendant calls `useToast().show(...)`.
+ *
+ * Deliberately NOT React Native's `<Modal>`: a confirmed iOS bug drops or breaks a second `<Modal>`
+ * presented while a sibling Modal — this library's own, or an OS share sheet — is still mounted or
+ * mid-dismiss-animation, so a toast shown over one would silently fail. The overlay is instead a
+ * plain absolutely-positioned `View` mounted at the provider's own root, entirely outside RN's Modal
+ * system, so it floats over anything without competing for the same presentation stack.
+ *
+ * Single-slot by design: `show()` while a toast is already visible replaces its message/tone and
+ * restarts the auto-dismiss timer (and, since a fresh message reads as a new event, restarts the
+ * entrance animation) rather than queueing a second one. `dismiss()` always dismisses that one slot,
+ * and is a safe no-op when nothing is showing.
+ */
+
+import { createContext, memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { AccessibilityInfo, Animated, Pressable, StyleSheet, Text, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { Icon } from "../../core/icon/index.js";
+import { useTheme } from "../../theme/index.js";
+import { CLOSE_BUTTON_SIZE, CLOSE_HIT_SLOP, CLOSE_ICON_SIZE, DEFAULT_TOAST_DURATION, resolveToastTone, toastAccentBarStructure, toastCardStructure, toastOverlayStructure } from "./Toast.variants.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The entrance/exit fade+slide duration, and how far the card travels while animating in. Component
+// design constants — not on the theme's numeric scale, same status `PRESS_FADE_MS` etc. have in
+// `Button.tsx`.
+const ANIMATION_MS = 200;
+const TRANSLATE_DISTANCE = 24;
+const ToastContext = /*#__PURE__*/createContext(undefined);
+export const ToastProvider = /*#__PURE__*/memo(function ToastProvider({
+  children,
+  position = "top"
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [toast, setToast] = useState(null);
+  const progress = useRef(new Animated.Value(0)).current;
+  const dismissTimer = useRef(null);
+  const unmountTimer = useRef(null);
+  const clearTimers = useCallback(() => {
+    if (dismissTimer.current !== null) clearTimeout(dismissTimer.current);
+    if (unmountTimer.current !== null) clearTimeout(unmountTimer.current);
+    dismissTimer.current = null;
+    unmountTimer.current = null;
+  }, []);
+
+  // The unmount is scheduled on its own plain timer rather than the `Animated.timing` completion
+  // callback: that callback rides `requestAnimationFrame` (even under `useNativeDriver`), which does
+  // not resolve on a predictable JS-timer tick in tests (or match a plain `setTimeout` on-device) —
+  // a second timer of the same duration keeps the removal deterministic everywhere.
+  const hide = useCallback(() => {
+    clearTimers();
+    Animated.timing(progress, {
+      toValue: 0,
+      duration: reducedMotion ? 0 : ANIMATION_MS,
+      useNativeDriver: true
+    }).start();
+    unmountTimer.current = setTimeout(() => setToast(null), reducedMotion ? 0 : ANIMATION_MS);
+  }, [clearTimers, progress, reducedMotion]);
+  const show = useCallback(options => {
+    clearTimers();
+    progress.setValue(0);
+    setToast({
+      message: options.message,
+      tone: options.tone ?? "neutral"
+    });
+    // The real cross-platform screen-reader announcement: `accessibilityLiveRegion` (see
+    // `ToastCard`'s Text) is Android-only, so it alone leaves iOS VoiceOver silent. This
+    // imperative call reaches both VoiceOver and TalkBack.
+    AccessibilityInfo.announceForAccessibility(options.message);
+    Animated.timing(progress, {
+      toValue: 1,
+      duration: reducedMotion ? 0 : ANIMATION_MS,
+      useNativeDriver: true
+    }).start();
+    dismissTimer.current = setTimeout(hide, options.duration ?? DEFAULT_TOAST_DURATION);
+  }, [clearTimers, hide, progress, reducedMotion]);
+
+  // Unmount-only cleanup: `clearTimers` is referentially stable (empty deps), so this never re-fires.
+  useEffect(() => clearTimers, [clearTimers]);
+  const contextValue = useMemo(() => ({
+    show,
+    dismiss: hide
+  }), [show, hide]);
+  return /*#__PURE__*/_jsxs(ToastContext.Provider, {
+    value: contextValue,
+    children: [children, /*#__PURE__*/_jsx(View, {
+      pointerEvents: "box-none",
+      style: toastOverlayStructure(theme, {
+        position
+      }),
+      children: toast !== null && /*#__PURE__*/_jsx(ToastCard, {
+        toast: toast,
+        theme: theme,
+        position: position,
+        progress: progress,
+        onDismiss: hide
+      })
+    })]
+  });
+});
+// Memoized like any other of this library's own child components: `ToastProvider` hands it
+// already-stable props (state, refs, and `hide`'s own `useCallback`), so this avoids re-rendering
+// the card on a `ToastProvider` re-render that didn't actually change any of them.
+const ToastCard = /*#__PURE__*/memo(function ToastCard({
+  toast,
+  theme,
+  position,
+  progress,
+  onDismiss
+}) {
+  const toneColors = resolveToastTone(theme.colors, toast.tone);
+  const translateY = progress.interpolate({
+    inputRange: [0, 1],
+    outputRange: position === "top" ? [-TRANSLATE_DISTANCE, 0] : [TRANSLATE_DISTANCE, 0]
+  });
+  return /*#__PURE__*/_jsxs(Animated.View, {
+    testID: "pixelize-toast",
+    accessibilityRole: "alert",
+    style: [toastCardStructure(theme), {
+      backgroundColor: toneColors.background
+    }, theme.elevation.lg, {
+      opacity: progress,
+      transform: [{
+        translateY
+      }]
+    }],
+    children: [/*#__PURE__*/_jsx(View, {
+      style: [toastAccentBarStructure(theme), {
+        backgroundColor: toneColors.accent
+      }]
+    }), /*#__PURE__*/_jsx(Text, {
+      numberOfLines: 3,
+      style: [theme.fontStyleForWeight(theme.fontWeights.medium), styles.message, {
+        fontSize: theme.fontSizes.sm,
+        color: toneColors.text
+      }],
+      children: toast.message
+    }), /*#__PURE__*/_jsx(Pressable, {
+      testID: "pixelize-toast-close",
+      accessibilityRole: "button",
+      accessibilityLabel: "Dismiss notification",
+      hitSlop: CLOSE_HIT_SLOP,
+      onPress: onDismiss,
+      style: styles.closeButton,
+      children: /*#__PURE__*/_jsx(Icon, {
+        name: "x",
+        size: CLOSE_ICON_SIZE,
+        color: theme.colors.fg.muted,
+        strokeWidth: 2
+      })
+    })]
+  });
+});
+
+/** Throws outside a `ToastProvider` — same contract as `useTheme()`. */
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used inside <ToastProvider>. Wrap your app in " + "<ToastProvider> from 'pixelize-native-library/toast'.");
+  }
+  return ctx;
+}
+const styles = StyleSheet.create({
+  message: {
+    flex: 1
+  },
+  closeButton: {
+    width: CLOSE_BUTTON_SIZE,
+    height: CLOSE_BUTTON_SIZE,
+    alignItems: "center",
+    justifyContent: "center"
+  }
+});
+//# sourceMappingURL=Toast.js.map

package/lib/module/modules/toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","memo","useCallback","useContext","useEffect","useMemo","useRef","useState","AccessibilityInfo","Animated","Pressable","StyleSheet","Text","View","useReducedMotion","Icon","useTheme","CLOSE_BUTTON_SIZE","CLOSE_HIT_SLOP","CLOSE_ICON_SIZE","DEFAULT_TOAST_DURATION","resolveToastTone","toastAccentBarStructure","toastCardStructure","toastOverlayStructure","jsx","_jsx","jsxs","_jsxs","ANIMATION_MS","TRANSLATE_DISTANCE","ToastContext","undefined","ToastProvider","children","position","theme","reducedMotion","toast","setToast","progress","Value","current","dismissTimer","unmountTimer","clearTimers","clearTimeout","hide","timing","toValue","duration","useNativeDriver","start","setTimeout","show","options","setValue","message","tone","announceForAccessibility","contextValue","dismiss","Provider","value","pointerEvents","style","ToastCard","onDismiss","toneColors","colors","translateY","interpolate","inputRange","outputRange","testID","accessibilityRole","backgroundColor","background","elevation","lg","opacity","transform","accent","numberOfLines","fontStyleForWeight","fontWeights","medium","styles","fontSize","fontSizes","sm","color","text","accessibilityLabel","hitSlop","onPress","closeButton","name","size","fg","muted","strokeWidth","useToast","ctx","Error","create","flex","width","height","alignItems","justifyContent"],"sourceRoot":"../../../../src","sources":["modules/toast/Toast.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/toast/Toast.variants.js

@@ -0,0 +1,120 @@
+"use strict";
+
+/**
+ * Toast's style + behaviour resolution — same split as Button.variants:
+ *  - STRUCTURE (padding, radius, gap, the accent bar's width, the overlay's edge inset, the overlay's
+ *    z-index) lives in the themed resolvers below, static per (brand, mode), registered once via
+ *    `StyleSheet.create`.
+ *  - COLOUR is `tone`-driven and resolved from the theme's ROLE colours by `resolveToastTone`, never
+ *    a raw ramp and never a hardcoded hex.
+ *  - ACCESSIBILITY: the screen-reader announcement (WCAG 4.1.3) is one cross-platform imperative
+ *    `AccessibilityInfo.announceForAccessibility` call in `Toast.tsx`'s `show()`, not a tone-driven
+ *    resolver here — every tone announces the same way.
+ *
+ * Free of React and of `lucide`, so the WCAG + behaviour tests import it directly (mocking only
+ * `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { createThemedVariants } from "../../core/style/index.js";
+/** Same floor as Button/Input/Checkbox — 44dp (WCAG 2.5.5 / HIG). Duplicated, not imported: modules
+ * stay isolated. */
+export const MIN_TOUCH_TARGET = 44;
+const slopFor = size => Math.max(0, Math.ceil((MIN_TOUCH_TARGET - size) / 2));
+
+/** The close button's own visual box + glyph. Toast takes no `size` prop, so this is a fixed pair,
+ * not a scale — mirrors `BUTTON_SIZES`' shape for exactly one size. */
+export const CLOSE_BUTTON_SIZE = 24;
+export const CLOSE_ICON_SIZE = 16;
+export const CLOSE_HIT_SLOP = slopFor(CLOSE_BUTTON_SIZE);
+
+/** `duration?: number` on `ToastOptions` defaults to this when omitted. */
+export const DEFAULT_TOAST_DURATION = 3000;
+/**
+ * Maps `tone` onto the theme's role colours. The whole reason the prop is a closed union and not
+ * `color?: string`: every colour a Toast can show is one of these role lookups, so it can never be
+ * an off-palette value an app invented, and it inverts light↔dark for free.
+ *
+ * The card always sits on `bg.raised` — the same "elevated surface" role `Card`'s own `elevated`
+ * variant uses (`Card.variants.ts`). The accent bar and the message BOTH read `status.<role>.text`,
+ * deliberately NOT `status.<role>.solid`: `solid` is only measured against its own pale `subtle` fill
+ * (`roleColors.test.ts`'s `status.solid` vs `status.onSolid`/`subtle` promises), and on
+ * `success`/`warning`/`info` in light mode it falls as low as ~1.9:1 against `bg.raised` — nowhere
+ * near the 3:1 floor a rendered accent bar needs. `text` is the rung `readableOn` already proved
+ * ≥ 4.5:1 nearby, which comfortably clears the bar's lighter 3:1 floor too — one role, measured here
+ * for both jobs, rather than a second unverified pairing (`Toast.test.ts`).
+ */
+export function resolveToastTone(colors, tone) {
+  if (tone === "neutral") {
+    return {
+      background: colors.bg.raised,
+      accent: colors.border.interactive,
+      text: colors.fg.default
+    };
+  }
+  const status = colors.status[tone];
+  return {
+    background: colors.bg.raised,
+    accent: status.text,
+    text: status.text
+  };
+}
+
+/**
+ * Structural styles only — the card's padding, radius, and gap. No colour (tone-driven, applied
+ * inline over this) and no shadow (elevation is applied directly from `theme.elevation.lg`, same
+ * idiom as `Card`), so this compiles once per theme identity via the `WeakMap`-cached themed
+ * resolver and never rebuilds per render. `overflow: "hidden"` lets the accent bar's square corners
+ * get clipped by the card's own rounding instead of resolving a second radius for the bar.
+ */
+export const toastCardStructure = createThemedVariants(theme => ({
+  base: {
+    flexDirection: "row",
+    alignItems: "center",
+    columnGap: theme.space[3],
+    borderRadius: theme.radii.md,
+    paddingVertical: theme.space[3],
+    paddingRight: theme.space[3],
+    overflow: "hidden"
+  }
+}));
+
+/** The accent bar's width — a structural constant on the theme's `space` scale, not a hardcoded dp. */
+export const toastAccentBarStructure = createThemedVariants(theme => ({
+  base: {
+    width: theme.space[1],
+    alignSelf: "stretch"
+  }
+}));
+
+/**
+ * The overlay's inset from the screen edge it hugs, plus its stacking order. `position` is
+ * provider-level (one overlay for the whole app), not per-toast, so it lives here as a themed
+ * structural variant rather than something `resolveToastTone` touches. `zIndex` is themed (not a
+ * per-render inline value) for the same reason as the rest of this file: it's a structural,
+ * theme-scoped constant, so it belongs in the cached resolver, not recomputed as a fresh object
+ * every render in `Toast.tsx`.
+ */
+export const toastOverlayStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    left: 0,
+    right: 0,
+    alignItems: "center",
+    paddingHorizontal: theme.space[4],
+    zIndex: theme.zIndices.toast
+  },
+  variants: {
+    position: {
+      top: {
+        top: theme.space[4]
+      },
+      bottom: {
+        bottom: theme.space[4]
+      }
+    }
+  },
+  defaultVariants: {
+    position: "top"
+  }
+}));
+//# sourceMappingURL=Toast.variants.js.map

package/lib/module/modules/toast/Toast.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createThemedVariants","MIN_TOUCH_TARGET","slopFor","size","Math","max","ceil","CLOSE_BUTTON_SIZE","CLOSE_ICON_SIZE","CLOSE_HIT_SLOP","DEFAULT_TOAST_DURATION","resolveToastTone","colors","tone","background","bg","raised","accent","border","interactive","text","fg","default","status","toastCardStructure","theme","base","flexDirection","alignItems","columnGap","space","borderRadius","radii","md","paddingVertical","paddingRight","overflow","toastAccentBarStructure","width","alignSelf","toastOverlayStructure","position","left","right","paddingHorizontal","zIndex","zIndices","toast","variants","top","bottom","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/toast/Toast.variants.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/toast/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/toast`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The pure resolvers (`resolveToastTone`, …) stay internal — a consumer
+ * configures a toast through `show(options)`, never by importing them.
+ *
+ * No `IconName` re-export here: unlike `Button`, Toast takes no public `icon` prop — its dismiss
+ * glyph is a fixed internal choice, not something a consumer selects.
+ */
+
+export { ToastProvider, useToast } from "./Toast.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/toast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ToastProvider","useToast"],"sourceRoot":"../../../../src","sources":["modules/toast/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA,SAASA,aAAa,EAAEC,QAAQ,QAAQ,YAAS","ignoreList":[]}

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

@@ -0,0 +1,86 @@
+# tooltip/ — a long-press tip that also reaches screen readers without the gesture
+
+`Tooltip` wraps a single trigger element (via `React.cloneElement`, never `{...rest}`) and reveals
+a short themed bubble on long-press. It has no visual node of its own for an app to place — the
+trigger keeps its own layout — so, unlike the other modules, it exposes no `style` prop.
+
+## Files
+
+| File | Role |
+|------|------|
+| `Tooltip.tsx` | The component. `cloneElement` composition, show/hide timing, fade-in, a11y hint wiring. |
+| `Tooltip.variants.ts` | Pure resolvers (`mergeAccessibilityHint`, `TOOLTIP_TIMING`) + the themed structural resolver `tooltipBubbleStructure`. No React, no lucide. |
+| `index.ts` | Public surface: `Tooltip`, `TooltipProps`, `TooltipTriggerProps`, `TooltipPlacement`. |
+| `__tests__/Tooltip.test.ts` | Pure: WCAG contrast (all brands × modes) + the hint-merge contract + timing sanity. |
+| `__tests__/Tooltip.render.test.tsx` | Render: reveal/hide, auto-hide fallback, hint merge, placement. |
+
+## Props
+
+| Prop | Type | Default | Notes |
+|------|------|---------|-------|
+| `label` | `string` | — | The tip's text. Also what gets merged into the trigger's `accessibilityHint`. |
+| `children` | `ReactElement<TooltipTriggerProps>` | — | A single element accepting `onLongPress`/`onPressOut`/`accessibilityHint` (e.g. a `Pressable`). |
+| `placement` | `top \| bottom` | `bottom` | Which side of the trigger the bubble opens toward. |
+| `testID` | `string` | — | On the host `View`; also seeds `${testID}-bubble` on the visible bubble. |
+
+No `style` prop (see the file-header note) and no `tone`/`variant`/`size` — the bubble always
+reads `bg.raised` / `fg.default`, so there is nothing appearance-wise for a caller to choose.
+
+## Accessibility contract (WCAG)
+
+- **1.3.1 / no gesture-only content** — the whole point of this module: `accessibilityHint` on
+  the trigger is set to `mergeAccessibilityHint(existingHint, label)`, so a screen-reader user gets
+  the tip's content read out with the trigger itself, with no long-press required. The existing
+  hint (if the trigger already had one) is preserved, never overwritten.
+- **1.4.3** — the bubble text (`fg.default` on `bg.raised`) is measured ≥ 4.5:1 for every brand ×
+  mode. No non-text/interactive boundary to measure — the bubble has no border.
+- **The bubble is hidden from the accessibility tree** (`accessibilityElementsHidden` +
+  `importantForAccessibility="no-hide-descendants"`) once visible — its content already reached
+  assistive tech via the merged hint above, so exposing it too would double-announce the same
+  text (the same pattern as Button hiding its spinner from AT).
+- **2.3.3** — the fade-in is skipped (`duration: 0`) when `useReducedMotion()` is true; the bubble
+  still appears immediately, so reduced motion never means "no tip."
+- **Touch target** — Tooltip renders no interactive control of its own; the trigger child owns its
+  own touch target (e.g. an icon `Button` already enforces ≥ 44dp via `hitSlop`).
+
+## Patterns copied from Button (the reference module)
+
+1. **Structure vs colour split** — the bubble's padding/radius/placement offset live in
+   `tooltipBubbleStructure` (`createThemedVariants`); colour is resolved from `RoleColors` inline.
+2. **Pure, testable resolvers** in `Tooltip.variants.ts` — no React/lucide, so the WCAG measurement
+   and the hint-merge contract are unit-tested against real palettes, never eyeballed.
+3. **No `{...rest}`** — composition is `React.cloneElement` on the single child (explicitly
+   sanctioned as composition, not a rest spread), injecting three named props only.
+4. **Reduced motion respected**, same `useReducedMotion()` seam as Button's press fade.
+
+## Design decisions specific to this module
+
+- **`onLongPress`/`onPressOut` chain, `accessibilityHint` merges.** The two gesture callbacks call
+  the child's own handler first (if any) before doing their job, so Tooltip never silently breaks
+  a trigger that already used them. `accessibilityHint` is different: it is a single string, not a
+  callback, so "never clobber" means composing the two strings via `mergeAccessibilityHint`, not
+  chaining.
+- **No measurement library (v1).** The bubble anchors to the trigger's **left edge** with a fixed
+  `theme.space[1]` gap above/below (`left: 0`, `top`/`bottom: 100%`), rather than centering under
+  the trigger's actual measured width. This is the sanctioned v1 simplification; it can read
+  slightly off-center under a wide trigger. A `Popover`-style measured-anchor module would be the
+  place to fix that, not a prop added here.
+- **`sizes["3xs"]`** (the smallest step of the shared `sizes` primitive, 224dp) caps the bubble's
+  width instead of a newly-invented magic number.
+- **Auto-hide fallback** (`TOOLTIP_TIMING.autoHideMs`, 2.5s) — guards against the tip staying open
+  forever if `onPressOut` never fires (a cancelled gesture, or assistive tech invoking
+  `onLongPress` directly without a matching press-out).
+
+## Known gaps
+
+- **Requires a trigger that forwards `onLongPress`/`onPressOut`/`accessibilityHint`.** A library
+  component with a closed prop contract that doesn't expose those props (e.g. this library's own
+  `Button` today) won't actually receive the gesture or the hint merge — `cloneElement` sets the
+  props on the element, but a component that destructures its own explicit prop list and ignores
+  unknown ones will simply drop them. Works today with a raw RN `Pressable`/`TouchableOpacity`, or
+  any future library component that adds these to its explicit prop list.
+- No collision/viewport-edge detection — a bubble near a screen edge is not repositioned inward.
+
+## Performance
+
+Wrapped in `React.memo` (repo-wide re-render audit, 2026-07-17 — see root `CLAUDE.md`). `clearHideTimer`/`hide`/`show` are `useCallback`'d, and the `onLongPress`/`onPressOut` handlers `cloneElement` injects into the consumer-supplied `children` trigger are extracted to `handleLongPress`/`handlePressOut` (`useCallback`) instead of inline lambdas — same idiom `Menu.tsx` uses for its own trigger, since a fresh closure there would defeat a memoized trigger (e.g. this library's own `Button`).

package/lib/module/modules/tooltip/Tooltip.js

@@ -0,0 +1,115 @@
+"use strict";
+
+/**
+ * Tooltip — wraps a single trigger element and reveals a short themed tip on long-press, without
+ * requiring the trigger to know anything about it. No `style` prop: unlike the other modules,
+ * Tooltip renders no sized node of its own for an app to place — the trigger child keeps whatever
+ * layout it already has, and the wrapping host below exists only to anchor the bubble.
+ *
+ * Composition is `React.cloneElement` on the single child, never `{...rest}`: `onLongPress` and
+ * `onPressOut` are injected (chaining any handler the child already defined, so Tooltip never
+ * silently breaks a trigger that already used them), and `accessibilityHint` is MERGED via
+ * `mergeAccessibilityHint` — the one prop that must never be clobbered, since it is how a
+ * screen-reader user gets the tip's content without performing the gesture at all.
+ */
+
+import { cloneElement, memo, useCallback, useEffect, useRef, useState } from "react";
+import { Animated, StyleSheet, Text, View } from "react-native";
+import { useReducedMotion } from "../../core/a11y/index.js";
+import { useTheme } from "../../theme/index.js";
+import { mergeAccessibilityHint, TOOLTIP_TIMING, tooltipBubbleStructure } from "./Tooltip.variants.js";
+
+/** The subset of props Tooltip reads from / injects into its trigger child. */
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const Tooltip = /*#__PURE__*/memo(function Tooltip({
+  label,
+  children,
+  placement = "bottom",
+  testID
+}) {
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion();
+  const [visible, setVisible] = useState(false);
+  const opacity = useRef(new Animated.Value(0)).current;
+  const hideTimer = useRef(null);
+  const clearHideTimer = useCallback(() => {
+    if (hideTimer.current !== null) {
+      clearTimeout(hideTimer.current);
+      hideTimer.current = null;
+    }
+  }, []);
+  const hide = useCallback(() => {
+    clearHideTimer();
+    setVisible(false);
+  }, [clearHideTimer]);
+  const show = useCallback(() => {
+    clearHideTimer();
+    setVisible(true);
+    opacity.setValue(reducedMotion ? 1 : 0);
+    Animated.timing(opacity, {
+      toValue: 1,
+      duration: reducedMotion ? 0 : TOOLTIP_TIMING.fadeInMs,
+      useNativeDriver: true
+    }).start();
+    // Fallback dismiss: guarantees the tip can't get stuck open if `onPressOut` never fires (e.g.
+    // the gesture is cancelled by a scroll, or assistive tech triggers `onLongPress` directly).
+    hideTimer.current = setTimeout(hide, TOOLTIP_TIMING.autoHideMs);
+  }, [clearHideTimer, hide, opacity, reducedMotion]);
+  useEffect(() => clearHideTimer, [clearHideTimer]);
+
+  // Passed to `children` — a consumer-supplied CHILD component (typically this library's own
+  // Pressable/Button) — via cloneElement, so it is memoized like any other child-bound callback
+  // (same idiom `Menu.tsx` uses for its own trigger).
+  const handleLongPress = useCallback(event => {
+    children.props.onLongPress?.(event);
+    show();
+  }, [children, show]);
+  const handlePressOut = useCallback(event => {
+    children.props.onPressOut?.(event);
+    hide();
+  }, [children, hide]);
+  const trigger = /*#__PURE__*/cloneElement(children, {
+    onLongPress: handleLongPress,
+    onPressOut: handlePressOut,
+    accessibilityHint: mergeAccessibilityHint(children.props.accessibilityHint, label)
+  });
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.host,
+    testID: testID,
+    children: [trigger, visible &&
+    /*#__PURE__*/
+    // Hidden from the accessibility tree on purpose: the tip's content already reached
+    // screen-reader users via the merged `accessibilityHint` above, so surfacing this bubble
+    // too would announce the same text twice (the same "hide the sighted-only echo" pattern
+    // as Button's spinner).
+    _jsx(Animated.View, {
+      testID: testID ? `${testID}-bubble` : undefined,
+      pointerEvents: "none",
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: [tooltipBubbleStructure(theme, {
+        placement
+      }), {
+        backgroundColor: theme.colors.bg.raised,
+        opacity,
+        zIndex: theme.zIndices.tooltip
+      }],
+      children: /*#__PURE__*/_jsx(Text, {
+        style: [theme.fontStyleForWeight(theme.fontWeights.regular), {
+          fontSize: theme.fontSizes.sm,
+          color: theme.colors.fg.default
+        }],
+        children: label
+      })
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  // `flex-start`: hugs the trigger's own size instead of stretching cross-axis in a flex parent,
+  // so wrapping a child in Tooltip changes its layout as little as possible.
+  host: {
+    position: "relative",
+    alignSelf: "flex-start"
+  }
+});
+//# sourceMappingURL=Tooltip.js.map

package/lib/module/modules/tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["cloneElement","memo","useCallback","useEffect","useRef","useState","Animated","StyleSheet","Text","View","useReducedMotion","useTheme","mergeAccessibilityHint","TOOLTIP_TIMING","tooltipBubbleStructure","jsx","_jsx","jsxs","_jsxs","Tooltip","label","children","placement","testID","theme","reducedMotion","visible","setVisible","opacity","Value","current","hideTimer","clearHideTimer","clearTimeout","hide","show","setValue","timing","toValue","duration","fadeInMs","useNativeDriver","start","setTimeout","autoHideMs","handleLongPress","event","props","onLongPress","handlePressOut","onPressOut","trigger","accessibilityHint","style","styles","host","undefined","pointerEvents","accessibilityElementsHidden","importantForAccessibility","backgroundColor","colors","bg","raised","zIndex","zIndices","tooltip","fontStyleForWeight","fontWeights","regular","fontSize","fontSizes","sm","color","fg","default","create","position","alignSelf"],"sourceRoot":"../../../../src","sources":["modules/tooltip/Tooltip.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/modules/tooltip/Tooltip.variants.js

@@ -0,0 +1,75 @@
+"use strict";
+
+/**
+ * Tooltip's pure resolvers + the themed structural variant resolver — same split as Button:
+ *
+ *  - STRUCTURE (padding, radius, the placement offset) lives in `tooltipBubbleStructure`, a
+ *    `createThemedVariants` resolver, static per (brand, mode), registered once.
+ *  - COLOUR is not tone-driven here — the bubble always reads `bg.raised` / `fg.default`, so it is
+ *    resolved inline in the component from `theme.colors`, never a hardcoded hex.
+ *  - The accessibility-hint MERGE is `mergeAccessibilityHint`, kept pure so "never clobber the
+ *    child's existing hint" is unit-testable without mounting React.
+ *
+ * Free of `lucide` and of any React tree, so the WCAG + behaviour tests import it directly
+ * (mocking only `react-native`'s `StyleSheet`, as `core/style` does).
+ */
+
+import { sizes } from "../../theme/tokens/index.js";
+import { createThemedVariants } from "../../core/style/index.js";
+/**
+ * Design constants, not theme tokens — this module's own timing, not a scale other components
+ * share.
+ */
+export const TOOLTIP_TIMING = {
+  /** Fade-in duration; skipped (duration 0) when the OS reduce-motion setting is on (WCAG 2.3.3). */
+  fadeInMs: 150,
+  /** Fallback auto-dismiss so a tip can't stay stuck open if `onPressOut` never fires. */
+  autoHideMs: 2500
+};
+
+/**
+ * Appends `label` to any `accessibilityHint` the trigger already carries, so screen-reader users
+ * get the tip's content without needing the long-press gesture — the child's own hint is
+ * preserved, never overwritten. Reuses the existing sentence's terminal punctuation if there is
+ * one, so the merged hint reads as two sentences rather than a run-on.
+ */
+export function mergeAccessibilityHint(existing, label) {
+  const trimmed = existing?.trim();
+  if (!trimmed) return label;
+  const separator = /[.!?]$/.test(trimmed) ? " " : ". ";
+  return `${trimmed}${separator}${label}`;
+}
+
+/**
+ * Structural styles only — no colour (the bubble's fill/label are resolved from `RoleColors` in
+ * the component). `left: 0` anchors the bubble to the trigger's left edge rather than stretching
+ * it to the trigger's full width: a v1 simplification (no measurement library) that reads better
+ * for small icon-sized triggers than forcing the tip's width to match them. `maxWidth` reuses the
+ * shared `sizes` primitive's smallest step rather than a new hardcoded number.
+ */
+export const tooltipBubbleStructure = createThemedVariants(theme => ({
+  base: {
+    position: "absolute",
+    left: 0,
+    maxWidth: sizes["3xs"],
+    paddingHorizontal: theme.space[3],
+    paddingVertical: theme.space[2],
+    borderRadius: theme.radii.sm
+  },
+  variants: {
+    placement: {
+      bottom: {
+        top: "100%",
+        marginTop: theme.space[1]
+      },
+      top: {
+        bottom: "100%",
+        marginBottom: theme.space[1]
+      }
+    }
+  },
+  defaultVariants: {
+    placement: "bottom"
+  }
+}));
+//# sourceMappingURL=Tooltip.variants.js.map

package/lib/module/modules/tooltip/Tooltip.variants.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["sizes","createThemedVariants","TOOLTIP_TIMING","fadeInMs","autoHideMs","mergeAccessibilityHint","existing","label","trimmed","trim","separator","test","tooltipBubbleStructure","theme","base","position","left","maxWidth","paddingHorizontal","space","paddingVertical","borderRadius","radii","sm","variants","placement","bottom","top","marginTop","marginBottom","defaultVariants"],"sourceRoot":"../../../../src","sources":["modules/tooltip/Tooltip.variants.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAGA,SAASA,KAAK,QAAQ,6BAAoB;AAC1C,SAASC,oBAAoB,QAAQ,2BAAkB;AAIvD;AACA;AACA;AACA;AACA,OAAO,MAAMC,cAAc,GAAG;EAC5B;EACAC,QAAQ,EAAE,GAAG;EACb;EACAC,UAAU,EAAE;AACd,CAAU;;AAEV;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,sBAAsBA,CAACC,QAA4B,EAAEC,KAAa,EAAU;EAC1F,MAAMC,OAAO,GAAGF,QAAQ,EAAEG,IAAI,CAAC,CAAC;EAChC,IAAI,CAACD,OAAO,EAAE,OAAOD,KAAK;EAC1B,MAAMG,SAAS,GAAG,QAAQ,CAACC,IAAI,CAACH,OAAO,CAAC,GAAG,GAAG,GAAG,IAAI;EACrD,OAAO,GAAGA,OAAO,GAAGE,SAAS,GAAGH,KAAK,EAAE;AACzC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMK,sBAAsB,GAAGX,oBAAoB,CAAEY,KAAY,KAAM;EAC5EC,IAAI,EAAE;IACJC,QAAQ,EAAE,UAAU;IACpBC,IAAI,EAAE,CAAC;IACPC,QAAQ,EAAEjB,KAAK,CAAC,KAAK,CAAC;IACtBkB,iBAAiB,EAAEL,KAAK,CAACM,KAAK,CAAC,CAAC,CAAC;IACjCC,eAAe,EAAEP,KAAK,CAACM,KAAK,CAAC,CAAC,CAAC;IAC/BE,YAAY,EAAER,KAAK,CAACS,KAAK,CAACC;EAC5B,CAAC;EACDC,QAAQ,EAAE;IACRC,SAAS,EAAE;MACTC,MAAM,EAAE;QAAEC,GAAG,EAAE,MAAM;QAAEC,SAAS,EAAEf,KAAK,CAACM,KAAK,CAAC,CAAC;MAAE,CAAC;MAClDQ,GAAG,EAAE;QAAED,MAAM,EAAE,MAAM;QAAEG,YAAY,EAAEhB,KAAK,CAACM,KAAK,CAAC,CAAC;MAAE;IACtD;EACF,CAAC;EACDW,eAAe,EAAE;IAAEL,SAAS,EAAE;EAAS;AACzC,CAAC,CAAC,CAAC","ignoreList":[]}

package/lib/module/modules/tooltip/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+/**
+ * Public surface of `pixelize-native-library/tooltip`. Value exports and type exports are split for
+ * `verbatimModuleSyntax`. The pure resolvers (`mergeAccessibilityHint`, `tooltipBubbleStructure`,
+ * `TOOLTIP_TIMING`) stay internal — a consumer configures a Tooltip through its props only.
+ */
+
+export { Tooltip } from "./Tooltip.js";
+//# sourceMappingURL=index.js.map

package/lib/module/modules/tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tooltip"],"sourceRoot":"../../../../src","sources":["modules/tooltip/index.ts"],"mappings":";;AAAA;AACA;AACA;AACA;AACA;;AAEA,SAASA,OAAO,QAAQ,cAAW","ignoreList":[]}

package/lib/module/package.json

@@ -0,0 +1 @@
+{"type":"module"}