@onlynative/inertia 0.0.1-alpha.0 → 0.0.1-alpha.2

package/README.md

@@ -42,7 +42,7 @@ export function FadeIn() {
 - **Primitives** — `Motion.View`, `Motion.Text`, `Motion.Image`, `Motion.Pressable`, `Motion.ScrollView`. Per-primitive style inference (no shared `ViewStyle & TextStyle & ImageStyle` fallback).
 - **Sequences and keyframes** — `animate={{ x: [0, 100, 0] }}` with per-step transitions; unified `repeat: number | 'infinite' | { count, alternate }`.
 - **Variants** — `variants={{ open, closed }}` with `animate="open"`. Programmatic control via `useVariants` + `controller={...}`.
-- **Gestures** — single `gesture` prop on every primitive: `gesture={{ pressed, focused, hovered }}`. Zero overhead when omitted.
+- **Gestures** — single `gesture` prop on every primitive: `gesture={{ pressed, focused, focusVisible, hovered }}`. `focusVisible` engages only on keyboard focus (W3C `:focus-visible`) so click-focus on web doesn't flash a ring; on native it tracks `focused`. Zero overhead when omitted.
 - **`<Presence>`** — mount/unmount transitions; exiting children automatically receive `pointerEvents: 'none'`.
 - **`<MotionConfig reducedMotion>`** — OS reduce-motion honored end-to-end (`'user' | 'never' | 'always'`).
 - **Per-primitive subpath imports** — `@onlynative/inertia/view`, `/text`, `/image`, `/pressable`, `/scroll-view`.
@@ -62,18 +62,18 @@ A `Motion.View`-only import currently bundles to ~3.2 kB brotlied (excluding pee
 
 ## Transitions
 
-| `type`               | Public config keys                                                                           | Maps to                            |
-| -------------------- | -------------------------------------------------------------------------------------------- | ---------------------------------- |
-| `'spring'` (default) | `tension`, `friction`, `mass`, `velocity`, `restSpeedThreshold`, `restDisplacementThreshold` | `withSpring`                       |
-| `'timing'`           | `duration`, `easing`, `delay`                                                                | `withTiming`                       |
-| `'decay'`            | `velocity`, `deceleration`, `clamp`                                                          | `withDecay`                        |
+| `type`               | Public config keys                                                                           | Maps to                             |
+| -------------------- | -------------------------------------------------------------------------------------------- | ----------------------------------- |
+| `'spring'` (default) | `tension`, `friction`, `mass`, `velocity`, `restSpeedThreshold`, `restDisplacementThreshold` | `withSpring`                        |
+| `'timing'`           | `duration`, `easing`, `delay`                                                                | `withTiming`                        |
+| `'decay'`            | `velocity`, `deceleration`, `clamp`                                                          | `withDecay`                         |
 | `'no-animation'`     | —                                                                                            | direct assignment, no interpolation |
 
 Plus, on any transition: `delay`, `repeat`. Per-property transitions take precedence over the top-level transition. Spring config uses **react-spring vocabulary** (`tension`/`friction`); Reanimated's raw `stiffness`/`damping` is never on the public surface.
 
 ## Animatable properties
 
-`opacity`, `translateX`, `translateY`, `scale`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`, `backgroundColor`, `borderRadius`, `width`, `height`. Layout transforms via `transform: [...]`. Color interpolation uses Reanimated's color utilities.
+Numeric: `opacity`, `translateX`, `translateY`, `scale`, `scaleX`, `scaleY`, `rotate`, `rotateX`, `rotateY`, `width`, `height`, `borderRadius`. Color: `backgroundColor`, `borderColor`, `color`, `tintColor` (Image only — `Motion.View` rejects it at compile time). Layout transforms via `transform: [...]`. Color targets are forwarded straight through `withSpring` / `withTiming`; Reanimated's value setter packs the string to RGBA and interpolates on the UI thread.
 
 Out of scope for `0.x`: SVG path morphing, gradient interpolation, shared-element transitions across screens.
 

package/dist/index.d.mts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import * as react_native from 'react-native';
-import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, V as VariantController } from './types-CmbXx-G3.mjs';
-export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, S as SequenceStep, d as SpringTransition, e as TimingTransition, f as Transition, g as VariantsMap } from './types-CmbXx-G3.mjs';
+import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, V as VariantController } from './types-DeZZzE_e.mjs';
+export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, S as SequenceStep, d as SpringTransition, e as TimingTransition, f as Transition, g as VariantsMap } from './types-DeZZzE_e.mjs';
 export { MotionImage } from './motion/Image.mjs';
 export { MotionPressable } from './motion/Pressable.mjs';
 export { MotionScrollView } from './motion/ScrollView.mjs';
@@ -16,10 +16,9 @@ export { MotionView } from './motion/View.mjs';
  * `exit` / `transition` all infer from `C`'s `style` prop. There is no
  * shared `ViewStyle & TextStyle & ImageStyle` fallback.
  *
- * Alpha scope: numeric properties listed in `ALL_KEYS`, applied via
- * Reanimated shared values + `useAnimatedStyle`. Sequences, variants,
- * gestures, color animation, and the cross-render memoization optimization
- * land in later phases.
+ * Alpha scope: numeric properties (transforms, opacity, width, height,
+ * borderRadius) and color properties (backgroundColor, borderColor, color,
+ * tintColor) applied via Reanimated shared values + `useAnimatedStyle`.
  */
 declare function createMotionComponent<C extends ComponentType<any>>(Component: C): MotionComponent<C>;
 

package/dist/index.d.ts

@@ -1,8 +1,8 @@
 import * as react from 'react';
 import { ComponentType, ReactNode } from 'react';
 import * as react_native from 'react-native';
-import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, V as VariantController } from './types-CmbXx-G3.js';
-export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, S as SequenceStep, d as SpringTransition, e as TimingTransition, f as Transition, g as VariantsMap } from './types-CmbXx-G3.js';
+import { M as MotionComponent, A as AnimatableValue, T as TransitionConfig, V as VariantController } from './types-DeZZzE_e.js';
+export { a as AnimateStyle, b as AnimationCallbackInfo, D as DecayTransition, G as GestureSubStates, c as MotionProps, N as NoAnimationTransition, P as PerPropertyTransition, R as RepeatConfig, S as SequenceStep, d as SpringTransition, e as TimingTransition, f as Transition, g as VariantsMap } from './types-DeZZzE_e.js';
 export { MotionImage } from './motion/Image.js';
 export { MotionPressable } from './motion/Pressable.js';
 export { MotionScrollView } from './motion/ScrollView.js';
@@ -16,10 +16,9 @@ export { MotionView } from './motion/View.js';
  * `exit` / `transition` all infer from `C`'s `style` prop. There is no
  * shared `ViewStyle & TextStyle & ImageStyle` fallback.
  *
- * Alpha scope: numeric properties listed in `ALL_KEYS`, applied via
- * Reanimated shared values + `useAnimatedStyle`. Sequences, variants,
- * gestures, color animation, and the cross-render memoization optimization
- * land in later phases.
+ * Alpha scope: numeric properties (transforms, opacity, width, height,
+ * borderRadius) and color properties (backgroundColor, borderColor, color,
+ * tintColor) applied via Reanimated shared values + `useAnimatedStyle`.
  */
 declare function createMotionComponent<C extends ComponentType<any>>(Component: C): MotionComponent<C>;
 

package/dist/index.js

@@ -36,6 +36,29 @@ function MotionConfig({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(MotionConfigContext.Provider, { value, children });
 }
+var modality = "keyboard";
+var installed = false;
+function setKeyboard() {
+  modality = "keyboard";
+}
+function setPointer() {
+  modality = "pointer";
+}
+function ensureInstalled() {
+  if (installed) return;
+  if (reactNative.Platform.OS !== "web") return;
+  if (typeof document === "undefined") return;
+  document.addEventListener("keydown", setKeyboard, true);
+  document.addEventListener("mousedown", setPointer, true);
+  document.addEventListener("pointerdown", setPointer, true);
+  document.addEventListener("touchstart", setPointer, true);
+  installed = true;
+}
+function isFocusVisible() {
+  if (reactNative.Platform.OS !== "web") return true;
+  ensureInstalled();
+  return modality === "keyboard";
+}
 var PresenceContext = react.createContext(null);
 function usePresence() {
   return react.useContext(PresenceContext);
@@ -270,8 +293,23 @@ var TRANSFORM_KEYS = [
   "scaleY",
   "rotate"
 ];
-var TOP_LEVEL_KEYS = ["opacity", "width", "height", "borderRadius"];
-var ALL_KEYS = [...TRANSFORM_KEYS, ...TOP_LEVEL_KEYS];
+var NUMERIC_TOP_LEVEL_KEYS = [
+  "opacity",
+  "width",
+  "height",
+  "borderRadius"
+];
+var COLOR_KEYS = [
+  "backgroundColor",
+  "borderColor",
+  "color",
+  "tintColor"
+];
+var ALL_KEYS = [
+  ...TRANSFORM_KEYS,
+  ...NUMERIC_TOP_LEVEL_KEYS,
+  ...COLOR_KEYS
+];
 var TRANSFORM_KEY_SET = new Set(TRANSFORM_KEYS);
 var EXITING_POINTER_EVENTS_STYLE = { pointerEvents: "none" };
 var DEFAULT_RESTING = {
@@ -284,7 +322,15 @@ var DEFAULT_RESTING = {
   opacity: 1,
   width: 0,
   height: 0,
-  borderRadius: 0
+  borderRadius: 0,
+  // 'transparent' is the only safe universal default for colors: it works as
+  // an initial seed for any color animation (no jarring opaque flash on mount
+  // when `initial` is omitted) and rgba(0,0,0,0) interpolates cleanly into
+  // any opaque target via Reanimated's color util.
+  backgroundColor: "transparent",
+  borderColor: "transparent",
+  color: "transparent",
+  tintColor: "transparent"
 };
 var TRANSITION_KEYS = /* @__PURE__ */ new Set([
   "type",
@@ -345,6 +391,7 @@ function createMotionComponent(Component) {
     const exitRecord = exit ? exit : void 0;
     const [pressed, setPressed] = react.useState(false);
     const [focused, setFocused] = react.useState(false);
+    const [focusVisible, setFocusVisible] = react.useState(false);
     const [hovered, setHovered] = react.useState(false);
     const activeKeysRef = react.useRef(null);
     if (activeKeysRef.current === null) {
@@ -365,6 +412,7 @@ function createMotionComponent(Component) {
         for (const subState of [
           gesture.pressed,
           gesture.focused,
+          gesture.focusVisible,
           gesture.hovered
         ]) {
           if (!subState) continue;
@@ -393,6 +441,7 @@ function createMotionComponent(Component) {
     const mergedRecord = isExiting && exitRecord ? { ...animateRecord, ...exitRecord } : mergeGestureTargets(animateRecord, gesture, {
       pressed,
       focused,
+      focusVisible,
       hovered
     });
     const mergedSig = stableSig(mergedRecord) + (isExiting ? "|exit" : "") + (shouldReduceMotion ? "|rm" : "");
@@ -475,6 +524,7 @@ function createMotionComponent(Component) {
       rest,
       setPressed,
       setFocused,
+      setFocusVisible,
       setHovered
     );
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -501,6 +551,12 @@ function useAnimatableSharedValues(init) {
   const width = Animated.useSharedValue(init("width"));
   const height = Animated.useSharedValue(init("height"));
   const borderRadius = Animated.useSharedValue(init("borderRadius"));
+  const backgroundColor = Animated.useSharedValue(
+    init("backgroundColor")
+  );
+  const borderColor = Animated.useSharedValue(init("borderColor"));
+  const color = Animated.useSharedValue(init("color"));
+  const tintColor = Animated.useSharedValue(init("tintColor"));
   const ref = react.useRef(null);
   if (ref.current === null) {
     ref.current = {
@@ -513,7 +569,11 @@ function useAnimatableSharedValues(init) {
       opacity,
       width,
       height,
-      borderRadius
+      borderRadius,
+      backgroundColor,
+      borderColor,
+      color,
+      tintColor
     };
   }
   return ref.current;
@@ -632,13 +692,13 @@ function resolveAnimateInput(animate, variants, controllerKey) {
 }
 function restValue(v) {
   if (v === void 0) return void 0;
-  if (typeof v === "number") return v;
+  if (typeof v === "number" || typeof v === "string") return v;
   if (Array.isArray(v)) {
     return v.length > 0 ? restValue(v[0]) : void 0;
   }
   if (typeof v === "object" && v !== null && "to" in v) {
     const to = v.to;
-    return typeof to === "number" ? to : void 0;
+    return typeof to === "number" || typeof to === "string" ? to : void 0;
   }
   return void 0;
 }
@@ -670,6 +730,7 @@ function mergeGestureTargets(base, gesture, active) {
   const subStates = [
     gesture.hovered,
     gesture.focused,
+    gesture.focusVisible,
     gesture.pressed
   ];
   for (const sub of subStates) {
@@ -692,6 +753,12 @@ function mergeGestureTargets(base, gesture, active) {
       gesture.focused
     );
   }
+  if (active.focusVisible && gesture.focusVisible) {
+    Object.assign(
+      merged,
+      gesture.focusVisible
+    );
+  }
   if (active.pressed && gesture.pressed) {
     Object.assign(
       merged,
@@ -700,7 +767,7 @@ function mergeGestureTargets(base, gesture, active) {
   }
   return merged;
 }
-function useGestureHandlers(gesture, rest, setPressed, setFocused, setHovered) {
+function useGestureHandlers(gesture, rest, setPressed, setFocused, setFocusVisible, setHovered) {
   return react.useMemo(() => {
     if (!gesture) return {};
     const handlers = {};
@@ -714,9 +781,15 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setHovered) {
       handlers.onPressIn = compose(rest.onPressIn, () => setPressed(true));
       handlers.onPressOut = compose(rest.onPressOut, () => setPressed(false));
     }
-    if (gesture.focused) {
-      handlers.onFocus = compose(rest.onFocus, () => setFocused(true));
-      handlers.onBlur = compose(rest.onBlur, () => setFocused(false));
+    if (gesture.focused || gesture.focusVisible) {
+      handlers.onFocus = compose(rest.onFocus, () => {
+        if (gesture.focused) setFocused(true);
+        if (gesture.focusVisible && isFocusVisible()) setFocusVisible(true);
+      });
+      handlers.onBlur = compose(rest.onBlur, () => {
+        if (gesture.focused) setFocused(false);
+        if (gesture.focusVisible) setFocusVisible(false);
+      });
     }
     if (gesture.hovered) {
       handlers.onMouseEnter = compose(rest.onMouseEnter, () => setHovered(true));
@@ -729,6 +802,7 @@ function useGestureHandlers(gesture, rest, setPressed, setFocused, setHovered) {
   }, [
     gesture?.pressed ? 1 : 0,
     gesture?.focused ? 1 : 0,
+    gesture?.focusVisible ? 1 : 0,
     gesture?.hovered ? 1 : 0,
     rest.onTouchStart,
     rest.onTouchEnd,