pixelize-native-library 1.2.0 → 1.2.1

package/lib/module/core/MODULE.md

@@ -8,7 +8,8 @@ Cross-cutting mechanism every module imports. No feature logic, no components.
 | `icon/` | shared lucide icon registry (`IconName`, `Icon`; 56 glyphs) — hoisted out of `modules/button/` so every one of the 39 shipped modules reuses one registry instead of re-declaring its own | `icon/MODULE.md` |
 | `a11y/` | shared accessibility hooks (`useReducedMotion`) — hoisted out of `modules/button/` for the same reason | `a11y/MODULE.md` |
 | `device/` | the `low \| mid \| high` device tier every motion and list-window decision reads | `device/MODULE.md` |
-| `motion/` | the single global animation gate (`useMotion`, `config.ts`, the preset hooks) | `motion/MODULE.md` |
+| `motion/` | the single global animation gate (`useMotion`, `config.ts`, `usePressState`, presets) | `motion/MODULE.md` |
+| `haptics/` | optional `expo-haptics` seam (`setHapticsModule`, `useHaptics`) | `haptics/MODULE.md` |
 | `list/` | `VirtualList` / `VirtualSectionList` — the one windowed list every list-bearing module renders through (FlashList when the peer is installed, FlatList otherwise) | this file |
 | `heading/` | `HeadingText`/`HeadingView` (typed `aria-level`) + `HEADING_LEVEL` — the fixed level every `accessibilityRole="header"` site needs so `react-native-web` doesn't render it as `<h1>` | `heading/MODULE.md` |
 

package/lib/module/core/gradient/AccentGradientFill.js

@@ -0,0 +1,80 @@
+"use strict";
+
+import { memo, useId } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { accentGradientStops, shouldRenderGradient } from "./gradientStops.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let svgModule;
+function loadSvg() {
+  if (svgModule !== undefined) return svgModule;
+  try {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports -- optional peer fallback
+    svgModule = require('react-native-svg');
+  } catch {
+    svgModule = null;
+  }
+  return svgModule;
+}
+export const AccentGradientFill = /*#__PURE__*/memo(function AccentGradientFill({
+  color,
+  style
+}) {
+  const stops = accentGradientStops(color);
+  const gradId = `accentGrad-${useId().replace(/:/g, '')}`;
+  if (!shouldRenderGradient(stops)) {
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: color
+      }, style]
+    });
+  }
+  const svg = loadSvg();
+  if (!svg) {
+    return /*#__PURE__*/_jsx(View, {
+      pointerEvents: "none",
+      style: [StyleSheet.absoluteFill, {
+        backgroundColor: color
+      }, style]
+    });
+  }
+  const {
+    Svg,
+    Defs,
+    LinearGradient,
+    Stop,
+    Rect
+  } = svg;
+  return /*#__PURE__*/_jsx(View, {
+    pointerEvents: "none",
+    style: [StyleSheet.absoluteFill, style],
+    children: /*#__PURE__*/_jsxs(Svg, {
+      width: "100%",
+      height: "100%",
+      style: StyleSheet.absoluteFill,
+      children: [/*#__PURE__*/_jsx(Defs, {
+        children: /*#__PURE__*/_jsxs(LinearGradient, {
+          id: gradId,
+          x1: "0",
+          y1: "0",
+          x2: "0",
+          y2: "1",
+          children: [/*#__PURE__*/_jsx(Stop, {
+            offset: "0",
+            stopColor: stops.top
+          }), /*#__PURE__*/_jsx(Stop, {
+            offset: "1",
+            stopColor: stops.bottom
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Rect, {
+        x: "0",
+        y: "0",
+        width: "100%",
+        height: "100%",
+        fill: `url(#${gradId})`
+      })]
+    })
+  });
+});
+//# sourceMappingURL=AccentGradientFill.js.map

package/lib/module/core/gradient/darkenHex.js

@@ -0,0 +1,13 @@
+"use strict";
+
+export function darkenHex(hex, amount) {
+  const normalized = hex.replace('#', '');
+  const full = normalized.length === 3 ? normalized.split('').map(c => c + c).join('') : normalized;
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  const factor = 1 - amount;
+  const toHex = n => Math.round(Math.max(0, Math.min(255, n * factor))).toString(16).padStart(2, '0');
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+//# sourceMappingURL=darkenHex.js.map

package/lib/module/core/gradient/gradientStops.js

@@ -0,0 +1,27 @@
+"use strict";
+
+import { hexToHsl, withLightness } from "../../theme/tokens/builders/color.js";
+import { darkenHex } from "./darkenHex.js";
+export function accentGradientStops(color) {
+  const {
+    l: lightness
+  } = hexToHsl(color);
+  if (lightness > 30) {
+    return {
+      top: color,
+      bottom: withLightness(color, lightness - 10)
+    };
+  }
+  return {
+    top: withLightness(color, lightness + 7),
+    bottom: color
+  };
+}
+export function gradientStopDelta(stops) {
+  return Math.abs(hexToHsl(stops.top).l - hexToHsl(stops.bottom).l);
+}
+export function shouldRenderGradient(stops) {
+  return gradientStopDelta(stops) >= 3;
+}
+export { darkenHex };
+//# sourceMappingURL=gradientStops.js.map

package/lib/module/core/gradient/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+export { AccentGradientFill } from "./AccentGradientFill.js";
+export { accentGradientStops, gradientStopDelta, shouldRenderGradient } from "./gradientStops.js";
+export { darkenHex } from "./darkenHex.js";
+export { withAlpha } from "./withAlpha.js";
+//# sourceMappingURL=index.js.map

package/lib/module/core/gradient/withAlpha.js

@@ -0,0 +1,19 @@
+"use strict";
+
+function expandHex(hex) {
+  const normalized = hex.replace('#', '');
+  if (normalized.length === 3) {
+    return normalized.split('').map(c => c + c).join('');
+  }
+  if (normalized.length === 8) return normalized.slice(0, 6);
+  return normalized;
+}
+export function withAlpha(hex, alpha) {
+  const full = expandHex(hex);
+  const r = parseInt(full.slice(0, 2), 16);
+  const g = parseInt(full.slice(2, 4), 16);
+  const b = parseInt(full.slice(4, 6), 16);
+  const a = Math.max(0, Math.min(1, alpha));
+  return `rgba(${r}, ${g}, ${b}, ${a})`;
+}
+//# sourceMappingURL=withAlpha.js.map

package/lib/module/core/haptics/MODULE.md

@@ -0,0 +1,4 @@
+# haptics
+
+Optional `expo-haptics` seam. Call `setHapticsModule(Haptics)` at app startup; `useHaptics()` no-ops
+when unset, on web, or when `haptics={false}` on `PixelizeProvider`.

package/lib/module/core/haptics/context.js

@@ -0,0 +1,7 @@
+"use strict";
+
+import { createContext } from 'react';
+
+/** Whether the provider allows haptics — see `PixelizeProvider`'s `haptics` prop. */
+export const HapticsContext = /*#__PURE__*/createContext(false);
+//# sourceMappingURL=context.js.map

package/lib/module/core/haptics/haptics.js

@@ -0,0 +1,17 @@
+"use strict";
+
+/** Optional peer — injected at app startup, never imported at module scope. */
+
+let hapticsModule = null;
+
+/** Injects expo-haptics at runtime — never imports the package at module scope. */
+export function setHapticsModule(module) {
+  hapticsModule = module;
+}
+export function hasHapticsModule() {
+  return hapticsModule !== null;
+}
+export function getHapticsModule() {
+  return hapticsModule;
+}
+//# sourceMappingURL=haptics.js.map

package/lib/module/core/haptics/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { setHapticsModule, hasHapticsModule, getHapticsModule } from "./haptics.js";
+export { HapticsContext } from "./context.js";
+export { useHaptics } from "./useHaptics.js";
+//# sourceMappingURL=index.js.map

package/lib/module/core/haptics/useHaptics.js

@@ -0,0 +1,73 @@
+"use strict";
+
+import { useCallback, useContext, useMemo } from 'react';
+import { Platform } from 'react-native';
+import { HapticsContext } from "./context.js";
+import { getHapticsModule } from "./haptics.js";
+const IMPACT_STYLE = {
+  light: 'Light',
+  medium: 'Medium',
+  heavy: 'Heavy',
+  soft: 'Soft',
+  rigid: 'Rigid'
+};
+const NOTIFICATION_TYPE = {
+  success: 'Success',
+  warning: 'Warning',
+  error: 'Error'
+};
+function runSafe(task) {
+  try {
+    void task().catch(() => {});
+  } catch {
+    // Unconfigured or unsupported — silent no-op.
+  }
+}
+const NOOP_HAPTICS = {
+  selection: () => undefined,
+  impact: () => undefined,
+  notification: () => undefined
+};
+
+/**
+ * Fires haptic feedback when a module is registered and the provider has not disabled it.
+ * No-ops on web, when unset, or when `haptics={false}`.
+ */
+export function useHaptics() {
+  const enabled = useContext(HapticsContext);
+  const module = getHapticsModule();
+  const selection = useCallback(() => {
+    if (!enabled || Platform.OS === 'web' || module === null) return;
+    if (Platform.OS === 'android') {
+      runSafe(() => module.performAndroidHapticsAsync(module.AndroidHaptics.Context_Click));
+      return;
+    }
+    runSafe(() => module.selectionAsync());
+  }, [enabled, module]);
+  const impact = useCallback((style = 'light') => {
+    if (!enabled || Platform.OS === 'web' || module === null) return;
+    if (Platform.OS === 'android') {
+      // Bluesky downgrade — Android simulated impacts feel too strong; use the lightest constant.
+      runSafe(() => module.performAndroidHapticsAsync(module.AndroidHaptics.Virtual_Key));
+      return;
+    }
+    const key = IMPACT_STYLE[style];
+    runSafe(() => module.impactAsync(module.ImpactFeedbackStyle[key]));
+  }, [enabled, module]);
+  const notification = useCallback(type => {
+    if (!enabled || Platform.OS === 'web' || module === null) return;
+    if (Platform.OS === 'android') {
+      const androidType = type === 'success' ? module.AndroidHaptics.Confirm : type === 'error' ? module.AndroidHaptics.Reject : module.AndroidHaptics.Context_Click;
+      runSafe(() => module.performAndroidHapticsAsync(androidType));
+      return;
+    }
+    const key = NOTIFICATION_TYPE[type];
+    runSafe(() => module.notificationAsync(module.NotificationFeedbackType[key]));
+  }, [enabled, module]);
+  return useMemo(() => enabled && module !== null && Platform.OS !== 'web' ? {
+    selection,
+    impact,
+    notification
+  } : NOOP_HAPTICS, [enabled, module, selection, impact, notification]);
+}
+//# sourceMappingURL=useHaptics.js.map

package/lib/module/core/icon/MODULE.md

@@ -8,7 +8,11 @@ every one of the 39 shipped modules imports one registry instead of each re-copy
 
 | File | Role |
 |------|------|
-| `index.tsx` | `Icon` component + `ICON_COMPONENTS` map + the `IconName` union. |
+| `index.tsx` | Barrel re-exporting `Icon`, `IconName`, `resolveIcon`. |
+| `Icon.tsx` | The `Icon` component (resolves `name` via `resolveIcon`, applies the a11y contract below). |
+| `names.ts` | The `IconName` union — one string literal per glyph. |
+| `resolve.ts` | `resolveIcon(name)` — a `switch` over `IconName`, one `case` per glyph, each `require`-ing its own file under `icons/`. |
+| `icons/<kebab-name>.tsx` | One file per glyph, each deep-importing its own `lucide-react-native/icons/<kebab-name>`. |
 
 ## Accessibility contract (WCAG 1.3.1 / 1.1.1)
 
@@ -39,9 +43,10 @@ Pass `label` (optional) for the rare icon that carries information no neighbouri
 - Icons are DEEP-IMPORTED from `lucide-react-native/icons/<kebab-name>`, never the barrel
   `lucide-react-native` — the barrel is ~233 KB and defeats per-icon tree-shaking; a deep import is
   ~656 B.
-- `ICON_COMPONENTS` is a STATIC object literal so every deep import stays statically analysable.
-- Adding a glyph: add one deep import + one `ICON_COMPONENTS` entry here. Never add a per-module
-  icon map.
+- Each glyph's deep import lives in its own `icons/<kebab-name>.tsx` file, kept statically
+  analysable per-glyph rather than one shared object literal.
+- Adding a glyph: add `icons/<kebab-name>.tsx` (deep import, mirrors any existing file), one
+  `IconName` union member in `names.ts`, one `case` in `resolve.ts`. Never add a per-module icon map.
 
 ## Dependencies
 
@@ -52,11 +57,13 @@ devDependencies here for local build/typecheck/test only.
 ## Known gaps
 
 - Catalogue started as a starter set (the icons Button needed) and has grown one batch at a time —
-  69 glyphs as of the 2026-07 addition of `rich-text-editor`'s toolbar set (`bold`, `italic`,
-  `underline`, `strikethrough`, `code`, `square-code`, `heading-1/2/3`, `quote`, `list-ordered`,
-  `list-checks`, `at-sign`), on top of the earlier navigation + ticket-detail names for the
-  tickets-native consumer (`layout-dashboard`, `kanban`, `calendar`, `tag`, `flag`, … — see the
-  inline comment above `ICON_COMPONENTS` for the full list). Add names as later components need them.
+  74 glyphs as of the 2026-08 addition of `trending-up` (the example app's dashboard demo referenced
+  it before it existed — `resolveIcon` throws on an unresolved `IconName` case, which is how this
+  surfaced), on top of the 2026-07 `rich-text-editor` toolbar set (`bold`, `italic`, `underline`,
+  `strikethrough`, `code`, `square-code`, `heading-1/2/3`, `quote`, `list-ordered`, `list-checks`,
+  `at-sign`) and the earlier navigation + ticket-detail names for the tickets-native consumer
+  (`layout-dashboard`, `kanban`, `calendar`, `tag`, `flag`, …). Add names as later components need
+  them — see `names.ts` for the full current list.
 - `filter` deep-imports from lucide's `funnel` module: lucide renamed the `filter` icon to `funnel`
   and only left a `.d.ts` type alias at the old path (no runtime file there) — confirmed by
   resolving `lucide-react-native/icons/funnel` before adding this entry, the same trap

package/lib/module/core/icon/icons/trending-up.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import TrendingUp from "lucide-react-native/icons/trending-up";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function IconTrendingUp(props) {
+  return /*#__PURE__*/_jsx(TrendingUp, {
+    ...props
+  });
+}
+//# sourceMappingURL=trending-up.js.map

package/lib/module/core/icon/resolve.js

@@ -136,6 +136,8 @@ export function resolveIcon(name) {
       return require("./icons/tag").IconTag;
     case "trash":
       return require("./icons/trash").IconTrash;
+    case "trending-up":
+      return require("./icons/trending-up").IconTrendingUp;
     case "triangle-alert":
       return require("./icons/triangle-alert").IconTriangleAlert;
     case "underline":

package/lib/module/core/media/expoImage.js

@@ -1,5 +1,11 @@
 "use strict";
 
+/**
+ * expo-image's real `Image` component does NOT extend RN's `ImageProps` (its `source`, `style` and
+ * `tintColor` shapes all diverge) — this is a minimal structural subset covering only what
+ * `MediaImage.tsx` actually passes, not a copy of RN's own image props.
+ */
+
 let imageComponent = null;
 
 /** Injects expo-image at runtime — never imports the package at module scope. */

package/lib/module/core/motion/MODULE.md

@@ -41,15 +41,13 @@ Allocate the value itself with **`useAnimatedValue(initial)`**, never
 hands `useRef` one it immediately discards. `initial` is read on the first render only, exactly like
 `useRef`, so the two are interchangeable.
 
-Three ready-made patterns cover most needs:
-
-- **`usePressMotion(disabled?)`** — scale + opacity dip on press. Spread `onPressIn`/`onPressOut`
-  onto the `Pressable` and `style` onto an `Animated.View`. The returned object is `useMemo`'d on the
-  stable `Animated.Value`s, so `press.style` keeps its identity and a consumer `useMemo` keyed on it
-  can hit. **`disabled` allocates nothing** — it returns one shared `{ opacity: 1, transform: [{
-  scale: 1 }] }`, so `list-item` / `stat-tile` rows that are display-only cost no `Animated.Value`
-  at all (5000 rows used to build 10,000 that never moved). `style.opacity` and `style.transform[0]
-  .scale` are therefore `Animated.Value | number`.
+- Three ready-made patterns cover most needs:
+
+- **`usePressState(disabled?)`** — asymmetric press choreography (tween-in scale, spring-out scale
+  + state-layer overlay), width-aware via `onLayout` + `pressScaleFor`. Preferred for pressable
+  modules.
+- **`usePressMotion(disabled?)`** — legacy scale + opacity dip on press (Animated API). Spread
+  `onPressIn`/`onPressOut` onto the `Pressable` and `style` onto an `Animated.View`.
 - **`useEnterExit(visible, offsetY?)`** — fade + slide a subtree in, and unmount it once the exit
   settles. Returns `{ mounted, style }`.
 - **`useReveal(visible, offsetY?)`** — the same fade + slide for a subtree whose mounting the caller
@@ -63,9 +61,11 @@ null`, or an RN `<Modal>`); use `useEnterExit` only when you actually render its
 
 ## The rules any new motion must follow
 
-1. **Animate only `opacity` and `transform`.** Never height, width, margin, padding or
-   `borderColor` — those cannot run on the native driver and force a layout pass every frame. This
-   constraint is the reason the library can animate freely without costing frames on low-end Android.
+1. **Animate paint-only properties — never layout.** `opacity`, `transform`, and (via Reanimated
+   effects springs) `backgroundColor`, `borderColor`, `color`, `shadowColor` are allowed. Never
+   `width`, `height`, `margin`, `padding`, `top`/`left`, or `flex` — those force a layout pass
+   every frame. Spatial motion uses spatial springs; colour/opacity uses effects springs (critically
+   damped, no bounce).
 2. **Always `useNativeDriver: true`.** One documented exception exists library-wide: `Drawer`'s
    keyboard-avoidance `paddingBottom` (see `Drawer.tsx:115,122`, and its eslint override).
 3. **Never gate an unmount on the animation reporting `finished`.** An interrupted animation then

package/lib/module/core/motion/config.js

@@ -35,7 +35,9 @@ export const MOTION_EASING_CURVE = {
   decelerate: [0, 0, 0, 1],
   /** Leaving the screen — soft start, quick exit. */
   accelerate: [0.3, 0, 1, 1],
-  emphasized: [0.2, 0, 0, 1.2]
+  emphasized: [0.05, 0.7, 0.1, 1],
+  emphasizedDecelerate: [0.05, 0.7, 0.1, 1],
+  emphasizedAccelerate: [0.3, 0, 0.8, 0.15]
 };
 let easingCache = {};
 
@@ -72,6 +74,7 @@ export const MOTION_SPRING = {
 };
 
 /** Shared magnitudes so every component's motion reads as one system. */
+export const pressScaleFor = width => 1 - 4 / Math.max(width, 24);
 export const MOTION_TRANSFORM = {
   /** Press scale for buttons, cards, list rows. */
   pressScale: 0.97,

package/lib/module/core/motion/index.js

@@ -1,7 +1,8 @@
 "use strict";
 
-export { MOTION_DURATION, MOTION_EASING_CURVE, MOTION_ENABLED, MOTION_SCALE, MOTION_SPRING, MOTION_TIER, MOTION_TRANSFORM, motionEasing, resetMotionEasingCache, resolveDuration } from "./config.js";
+export { MOTION_DURATION, MOTION_EASING_CURVE, MOTION_ENABLED, MOTION_SCALE, MOTION_SPRING, MOTION_TIER, MOTION_TRANSFORM, motionEasing, pressScaleFor, resetMotionEasingCache, resolveDuration } from "./config.js";
 export { useAnimatedValue } from "./useAnimatedValue.js";
 export { useMotion } from "./useMotion.js";
+export { usePressState, useFocusRing } from "./usePressState.js";
 export { useEnterExit, usePressMotion, useReveal } from "./presets.js";
 //# sourceMappingURL=index.js.map

package/lib/module/core/motion/usePressState.js

@@ -0,0 +1,145 @@
+"use strict";
+
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Easing } from 'react-native';
+import { ReduceMotion, useAnimatedStyle, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
+import { springs } from "../../theme/platform/motion.native.js";
+import { STATE_LAYER_OPACITY } from "../../theme/platform/stateLayer.native.js";
+import { pressScaleFor, MOTION_TRANSFORM } from "./config.js";
+import { useMotion } from "./useMotion.js";
+const DEFAULT_WIDTH = 100;
+const PRESS_IN_MS = 100;
+export function usePressState(disabled = false) {
+  const motion = useMotion();
+  const [pressed, setPressed] = useState(false);
+  const [layoutWidth, setLayoutWidth] = useState(DEFAULT_WIDTH);
+  const measuredWidth = useSharedValue(DEFAULT_WIDTH);
+  const scale = useSharedValue(1);
+  const opacity = useSharedValue(1);
+  const overlayOpacity = useSharedValue(0);
+  const focusOpacity = useSharedValue(0);
+  const onLayout = useCallback(event => {
+    const width = event.nativeEvent.layout.width;
+    if (width > 0) {
+      measuredWidth.value = width;
+      setLayoutWidth(width);
+    }
+  }, [measuredWidth]);
+  const snapPressIn = useCallback(() => {
+    const targetScale = pressScaleFor(measuredWidth.value);
+    scale.value = targetScale;
+    opacity.value = MOTION_TRANSFORM.pressOpacity;
+    overlayOpacity.value = STATE_LAYER_OPACITY.pressed;
+  }, [measuredWidth, opacity, overlayOpacity, scale]);
+  const snapPressOut = useCallback(() => {
+    scale.value = 1;
+    opacity.value = 1;
+    overlayOpacity.value = 0;
+  }, [opacity, overlayOpacity, scale]);
+  const onPressIn = useCallback(() => {
+    if (disabled) return;
+    setPressed(true);
+    if (!motion.enabled) {
+      snapPressIn();
+      return;
+    }
+    const targetScale = pressScaleFor(measuredWidth.value);
+    scale.value = withTiming(targetScale, {
+      duration: PRESS_IN_MS,
+      easing: Easing.out(Easing.quad),
+      reduceMotion: ReduceMotion.System
+    });
+    opacity.value = withTiming(MOTION_TRANSFORM.pressOpacity, {
+      duration: PRESS_IN_MS,
+      easing: Easing.out(Easing.quad),
+      reduceMotion: ReduceMotion.System
+    });
+    overlayOpacity.value = withSpring(STATE_LAYER_OPACITY.pressed, {
+      ...springs.effectsFast,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [disabled, motion.enabled, measuredWidth, opacity, overlayOpacity, scale, snapPressIn]);
+  const onPressOut = useCallback(() => {
+    if (disabled) return;
+    setPressed(false);
+    if (!motion.enabled) {
+      snapPressOut();
+      return;
+    }
+    scale.value = withSpring(1, {
+      ...springs.spatialFast,
+      reduceMotion: ReduceMotion.System
+    });
+    opacity.value = withSpring(1, {
+      ...springs.spatialFast,
+      reduceMotion: ReduceMotion.System
+    });
+    overlayOpacity.value = withSpring(0, {
+      ...springs.effectsFast,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [disabled, motion.enabled, opacity, overlayOpacity, scale, snapPressOut]);
+  const reanimatedPressStyle = useAnimatedStyle(() => ({
+    transform: [{
+      scale: scale.value
+    }],
+    opacity: opacity.value
+  }));
+  const reanimatedOverlayStyle = useAnimatedStyle(() => ({
+    opacity: overlayOpacity.value
+  }));
+  const staticPressStyle = useMemo(() => ({
+    transform: [{
+      scale: pressed ? pressScaleFor(layoutWidth) : 1
+    }],
+    opacity: pressed ? MOTION_TRANSFORM.pressOpacity : 1
+  }), [layoutWidth, pressed]);
+  const staticOverlayStyle = useMemo(() => ({
+    opacity: pressed ? STATE_LAYER_OPACITY.pressed : 0
+  }), [pressed]);
+  const animatedStyle = motion.enabled ? reanimatedPressStyle : staticPressStyle;
+  const overlayStyle = motion.enabled ? reanimatedOverlayStyle : staticOverlayStyle;
+  const focusRingStyle = useAnimatedStyle(() => ({
+    opacity: focusOpacity.value
+  }));
+  const handlers = useMemo(() => ({
+    onPressIn,
+    onPressOut,
+    onLayout
+  }), [onPressIn, onPressOut, onLayout]);
+  return {
+    pressed,
+    animatedStyle,
+    overlayStyle,
+    focusRingStyle,
+    handlers,
+    onLayout
+  };
+}
+export function useFocusRing(focused, disabled = false) {
+  const motion = useMotion();
+  const focusOpacity = useSharedValue(0);
+  const animateFocus = useCallback(isFocused => {
+    if (disabled) return;
+    const target = isFocused ? STATE_LAYER_OPACITY.focus : 0;
+    if (!motion.enabled || target === 0) {
+      focusOpacity.value = target;
+      return;
+    }
+    focusOpacity.value = withSpring(target, {
+      ...springs.effectsFast,
+      reduceMotion: ReduceMotion.System
+    });
+  }, [disabled, focusOpacity, motion.enabled]);
+  useEffect(() => {
+    animateFocus(focused);
+  }, [focused, animateFocus]);
+  const focusRingStyle = useAnimatedStyle(() => ({
+    opacity: focusOpacity.value
+  }));
+  return {
+    focusRingStyle,
+    animateFocus
+  };
+}
+//# sourceMappingURL=usePressState.js.map

package/lib/module/core/style/index.js

@@ -1,5 +1,6 @@
 "use strict";
 
+export { concentric } from "./radius.js";
 export { sx } from "./sx.js";
 export { useThemedStyles } from "./useThemedStyles.js";
 export { createVariants, createTextVariants, createThemedVariants, createThemedTextVariants, variantFactory, themedVariantFactory } from "./variants.js";

package/lib/module/core/style/radius.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export const concentric = (outer, padding, floor = 4) => Math.max(floor, outer - padding);
+//# sourceMappingURL=radius.js.map

package/lib/module/index.js

@@ -68,6 +68,7 @@ export { StageProgress } from "./modules/stage-progress/index.js";
 export { StatTile } from "./modules/stat-tile/index.js";
 export { LoadingState, ErrorState } from "./modules/state-block/index.js";
 export { Stepper } from "./modules/stepper/index.js";
+export { Box, Surface } from "./modules/surface/index.js";
 export { SwipeableRow } from "./modules/swipeable-row/index.js";
 export { Switch } from "./modules/switch/index.js";
 export { Tabs } from "./modules/tabs/index.js";