@dloizides/ui-motion 1.0.2 → 1.2.0

package/dist/hairline/web.js

@@ -0,0 +1,131 @@
+'use strict';
+
+var react = require('react');
+var reactNative = require('react-native');
+var hairline = require('@lucasmarkes/hairline');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/hairline/components/HairlineFigure.web.tsx
+
+// src/hairline/constants.ts
+var HAIRLINE_TEST_ID = "motion-hairline-figure";
+var HAIRLINE_ASPECT_RATIO = 5 / 4;
+var DEFAULT_HAIRLINE_INTENSITY = 0.5;
+
+// src/hairline/HairlineFigureName.ts
+var HairlineFigureName = /* @__PURE__ */ ((HairlineFigureName2) => {
+  HairlineFigureName2["Basket"] = "basket";
+  HairlineFigureName2["Branches"] = "branches";
+  HairlineFigureName2["Cabinet"] = "cabinet";
+  HairlineFigureName2["Dish"] = "dish";
+  HairlineFigureName2["Drawer"] = "drawer";
+  HairlineFigureName2["Elevator"] = "elevator";
+  HairlineFigureName2["Exploded"] = "exploded";
+  HairlineFigureName2["Keyboard"] = "keyboard";
+  HairlineFigureName2["Laptop"] = "laptop";
+  HairlineFigureName2["Lockers"] = "lockers";
+  HairlineFigureName2["Loupe"] = "loupe";
+  HairlineFigureName2["Padlock"] = "padlock";
+  HairlineFigureName2["Patch"] = "patch";
+  HairlineFigureName2["Phone"] = "phone";
+  HairlineFigureName2["Phosphor"] = "phosphor";
+  HairlineFigureName2["Plot"] = "plot";
+  HairlineFigureName2["Plug"] = "plug";
+  HairlineFigureName2["Query"] = "query";
+  HairlineFigureName2["Rail"] = "rail";
+  HairlineFigureName2["Riffle"] = "riffle";
+  HairlineFigureName2["Router"] = "router";
+  HairlineFigureName2["Sieve"] = "sieve";
+  HairlineFigureName2["Slow"] = "slow";
+  HairlineFigureName2["Terminal"] = "terminal";
+  HairlineFigureName2["Terrain"] = "terrain";
+  HairlineFigureName2["Turntable"] = "turntable";
+  HairlineFigureName2["Vault"] = "vault";
+  return HairlineFigureName2;
+})(HairlineFigureName || {});
+
+// src/hairline/data/figureRegistry.ts
+var FIGURE_REGISTRY = {
+  ["basket" /* Basket */]: hairline.basket,
+  ["branches" /* Branches */]: hairline.branches,
+  ["cabinet" /* Cabinet */]: hairline.cabinet,
+  ["dish" /* Dish */]: hairline.dish,
+  ["drawer" /* Drawer */]: hairline.drawer,
+  ["elevator" /* Elevator */]: hairline.elevator,
+  ["exploded" /* Exploded */]: hairline.exploded,
+  ["keyboard" /* Keyboard */]: hairline.keyboard,
+  ["laptop" /* Laptop */]: hairline.laptop,
+  ["lockers" /* Lockers */]: hairline.lockers,
+  ["loupe" /* Loupe */]: hairline.loupe,
+  ["padlock" /* Padlock */]: hairline.padlock,
+  ["patch" /* Patch */]: hairline.patch,
+  ["phone" /* Phone */]: hairline.phone,
+  ["phosphor" /* Phosphor */]: hairline.phosphor,
+  ["plot" /* Plot */]: hairline.plot,
+  ["plug" /* Plug */]: hairline.plug,
+  ["query" /* Query */]: hairline.query,
+  ["rail" /* Rail */]: hairline.rail,
+  ["riffle" /* Riffle */]: hairline.riffle,
+  ["router" /* Router */]: hairline.router,
+  ["sieve" /* Sieve */]: hairline.sieve,
+  ["slow" /* Slow */]: hairline.slow,
+  ["terminal" /* Terminal */]: hairline.terminal,
+  ["terrain" /* Terrain */]: hairline.terrain,
+  ["turntable" /* Turntable */]: hairline.turntable,
+  ["vault" /* Vault */]: hairline.vault
+};
+
+// src/hairline/utils/hairlineVars.ts
+var hairlineVars = (colors) => ({
+  "--hairline-plate": colors.background,
+  "--hairline-hi": colors.text,
+  "--hairline-edge": colors.textSecondary,
+  "--hairline-mid": colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
+  "--hairline-lo": colors.divider
+});
+var styles = reactNative.StyleSheet.create({
+  host: { width: "100%", aspectRatio: HAIRLINE_ASPECT_RATIO }
+});
+var toElement = (view) => view;
+var HairlineFigure = ({
+  figure,
+  colors,
+  intensity = DEFAULT_HAIRLINE_INTENSITY,
+  label,
+  testID = HAIRLINE_TEST_ID
+}) => {
+  const hostRef = react.useRef(null);
+  const figureRef = react.useRef(null);
+  const optionsRef = react.useRef({ intensity, label });
+  optionsRef.current = { intensity, label };
+  react.useEffect(() => {
+    const el = toElement(hostRef.current);
+    if (el === null) return void 0;
+    const vars = Object.entries(hairlineVars(colors));
+    vars.forEach(([name, value]) => el.style.setProperty(name, value));
+    return () => vars.forEach(([name]) => el.style.removeProperty(name));
+  }, [colors]);
+  react.useEffect(() => {
+    const el = toElement(hostRef.current);
+    if (el === null) return void 0;
+    const mounted = FIGURE_REGISTRY[figure](el, optionsRef.current);
+    figureRef.current = mounted;
+    return () => {
+      mounted.destroy();
+      figureRef.current = null;
+    };
+  }, [figure]);
+  react.useEffect(() => {
+    figureRef.current?.update({ intensity, label });
+  }, [intensity, label]);
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { ref: hostRef, style: styles.host, testID });
+};
+
+exports.DEFAULT_HAIRLINE_INTENSITY = DEFAULT_HAIRLINE_INTENSITY;
+exports.HAIRLINE_ASPECT_RATIO = HAIRLINE_ASPECT_RATIO;
+exports.HAIRLINE_TEST_ID = HAIRLINE_TEST_ID;
+exports.HairlineFigure = HairlineFigure;
+exports.HairlineFigureName = HairlineFigureName;
+exports.hairlineVars = hairlineVars;
+//# sourceMappingURL=web.js.map
+//# sourceMappingURL=web.js.map

package/dist/hairline/web.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName","basket","branches","cabinet","dish","drawer","elevator","exploded","keyboard","laptop","lockers","loupe","padlock","patch","phone","phosphor","plot","plug","query","rail","riffle","router","sieve","slow","terminal","terrain","turntable","vault","StyleSheet","useRef","useEffect","View"],"mappings":"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","file":"web.js","sourcesContent":["export const HAIRLINE_TEST_ID = 'motion-hairline-figure';\nexport const HAIRLINE_ASPECT_RATIO = 5 / 4;\nexport const DEFAULT_HAIRLINE_INTENSITY = 0.5;\n","export const enum HairlineFigureName {\n  Basket = 'basket',\n  Branches = 'branches',\n  Cabinet = 'cabinet',\n  Dish = 'dish',\n  Drawer = 'drawer',\n  Elevator = 'elevator',\n  Exploded = 'exploded',\n  Keyboard = 'keyboard',\n  Laptop = 'laptop',\n  Lockers = 'lockers',\n  Loupe = 'loupe',\n  Padlock = 'padlock',\n  Patch = 'patch',\n  Phone = 'phone',\n  Phosphor = 'phosphor',\n  Plot = 'plot',\n  Plug = 'plug',\n  Query = 'query',\n  Rail = 'rail',\n  Riffle = 'riffle',\n  Router = 'router',\n  Sieve = 'sieve',\n  Slow = 'slow',\n  Terminal = 'terminal',\n  Terrain = 'terrain',\n  Turntable = 'turntable',\n  Vault = 'vault',\n}\n","import {\n  basket, branches, cabinet, dish, drawer, elevator, exploded, keyboard, laptop,\n  lockers, loupe, padlock, patch, phone, phosphor, plot, plug, query, rail,\n  riffle, router, sieve, slow, terminal, terrain, turntable, vault,\n  type Figure, type HairlineOptions,\n} from '@lucasmarkes/hairline';\n\nimport { HairlineFigureName } from '../HairlineFigureName';\n\nexport type MountFigure = (el: HTMLElement, options?: HairlineOptions) => Figure;\n\nexport const FIGURE_REGISTRY: Record<HairlineFigureName, MountFigure> = {\n  [HairlineFigureName.Basket]: basket,\n  [HairlineFigureName.Branches]: branches,\n  [HairlineFigureName.Cabinet]: cabinet,\n  [HairlineFigureName.Dish]: dish,\n  [HairlineFigureName.Drawer]: drawer,\n  [HairlineFigureName.Elevator]: elevator,\n  [HairlineFigureName.Exploded]: exploded,\n  [HairlineFigureName.Keyboard]: keyboard,\n  [HairlineFigureName.Laptop]: laptop,\n  [HairlineFigureName.Lockers]: lockers,\n  [HairlineFigureName.Loupe]: loupe,\n  [HairlineFigureName.Padlock]: padlock,\n  [HairlineFigureName.Patch]: patch,\n  [HairlineFigureName.Phone]: phone,\n  [HairlineFigureName.Phosphor]: phosphor,\n  [HairlineFigureName.Plot]: plot,\n  [HairlineFigureName.Plug]: plug,\n  [HairlineFigureName.Query]: query,\n  [HairlineFigureName.Rail]: rail,\n  [HairlineFigureName.Riffle]: riffle,\n  [HairlineFigureName.Router]: router,\n  [HairlineFigureName.Sieve]: sieve,\n  [HairlineFigureName.Slow]: slow,\n  [HairlineFigureName.Terminal]: terminal,\n  [HairlineFigureName.Terrain]: terrain,\n  [HairlineFigureName.Turntable]: turntable,\n  [HairlineFigureName.Vault]: vault,\n};\n","import type { ModeColors } from '@dloizides/design-tokens';\n\nimport type { HairlineVars } from '../types';\n\n/** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */\nexport const hairlineVars = (colors: ModeColors): HairlineVars => ({\n  '--hairline-plate': colors.background,\n  '--hairline-hi': colors.text,\n  '--hairline-edge': colors.textSecondary,\n  '--hairline-mid': colors.textTertiary !== undefined ? colors.textTertiary : colors.border,\n  '--hairline-lo': colors.divider,\n});\n","import React, { useEffect, useRef } from 'react';\n\nimport { StyleSheet, View } from 'react-native';\n\nimport type { Figure } from '@lucasmarkes/hairline';\n\nimport { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID } from '../constants';\nimport { FIGURE_REGISTRY } from '../data/figureRegistry';\nimport type { HairlineFigureProps } from '../types';\nimport { hairlineVars } from '../utils/hairlineVars';\n\nconst styles = StyleSheet.create({\n  host: { width: '100%', aspectRatio: HAIRLINE_ASPECT_RATIO },\n});\n\nconst toElement = (view: View | null): HTMLElement | null => view as unknown as HTMLElement | null;\n\n/** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */\nexport const HairlineFigure = ({\n  figure,\n  colors,\n  intensity = DEFAULT_HAIRLINE_INTENSITY,\n  label,\n  testID = HAIRLINE_TEST_ID,\n}: HairlineFigureProps): React.ReactElement => {\n  const hostRef = useRef<View>(null);\n  const figureRef = useRef<Figure | null>(null);\n  const optionsRef = useRef({ intensity, label });\n  optionsRef.current = { intensity, label };\n\n  useEffect(() => {\n    const el = toElement(hostRef.current);\n    if (el === null) return undefined;\n    const vars = Object.entries(hairlineVars(colors));\n    vars.forEach(([name, value]) => el.style.setProperty(name, value));\n    return () => vars.forEach(([name]) => el.style.removeProperty(name));\n  }, [colors]);\n\n  useEffect(() => {\n    const el = toElement(hostRef.current);\n    if (el === null) return undefined;\n    const mounted = FIGURE_REGISTRY[figure](el, optionsRef.current);\n    figureRef.current = mounted;\n    return () => {\n      mounted.destroy();\n      figureRef.current = null;\n    };\n  }, [figure]);\n\n  useEffect(() => {\n    figureRef.current?.update({ intensity, label });\n  }, [intensity, label]);\n\n  return <View ref={hostRef} style={styles.host} testID={testID} />;\n};\n"]}

package/dist/hairline/web.mjs

@@ -0,0 +1,124 @@
+import { useRef, useEffect } from 'react';
+import { StyleSheet, View } from 'react-native';
+import { vault, turntable, terrain, terminal, slow, sieve, router, riffle, rail, query, plug, plot, phosphor, phone, patch, padlock, loupe, lockers, laptop, keyboard, exploded, elevator, drawer, dish, cabinet, branches, basket } from '@lucasmarkes/hairline';
+import { jsx } from 'react/jsx-runtime';
+
+// src/hairline/components/HairlineFigure.web.tsx
+
+// src/hairline/constants.ts
+var HAIRLINE_TEST_ID = "motion-hairline-figure";
+var HAIRLINE_ASPECT_RATIO = 5 / 4;
+var DEFAULT_HAIRLINE_INTENSITY = 0.5;
+
+// src/hairline/HairlineFigureName.ts
+var HairlineFigureName = /* @__PURE__ */ ((HairlineFigureName2) => {
+  HairlineFigureName2["Basket"] = "basket";
+  HairlineFigureName2["Branches"] = "branches";
+  HairlineFigureName2["Cabinet"] = "cabinet";
+  HairlineFigureName2["Dish"] = "dish";
+  HairlineFigureName2["Drawer"] = "drawer";
+  HairlineFigureName2["Elevator"] = "elevator";
+  HairlineFigureName2["Exploded"] = "exploded";
+  HairlineFigureName2["Keyboard"] = "keyboard";
+  HairlineFigureName2["Laptop"] = "laptop";
+  HairlineFigureName2["Lockers"] = "lockers";
+  HairlineFigureName2["Loupe"] = "loupe";
+  HairlineFigureName2["Padlock"] = "padlock";
+  HairlineFigureName2["Patch"] = "patch";
+  HairlineFigureName2["Phone"] = "phone";
+  HairlineFigureName2["Phosphor"] = "phosphor";
+  HairlineFigureName2["Plot"] = "plot";
+  HairlineFigureName2["Plug"] = "plug";
+  HairlineFigureName2["Query"] = "query";
+  HairlineFigureName2["Rail"] = "rail";
+  HairlineFigureName2["Riffle"] = "riffle";
+  HairlineFigureName2["Router"] = "router";
+  HairlineFigureName2["Sieve"] = "sieve";
+  HairlineFigureName2["Slow"] = "slow";
+  HairlineFigureName2["Terminal"] = "terminal";
+  HairlineFigureName2["Terrain"] = "terrain";
+  HairlineFigureName2["Turntable"] = "turntable";
+  HairlineFigureName2["Vault"] = "vault";
+  return HairlineFigureName2;
+})(HairlineFigureName || {});
+
+// src/hairline/data/figureRegistry.ts
+var FIGURE_REGISTRY = {
+  ["basket" /* Basket */]: basket,
+  ["branches" /* Branches */]: branches,
+  ["cabinet" /* Cabinet */]: cabinet,
+  ["dish" /* Dish */]: dish,
+  ["drawer" /* Drawer */]: drawer,
+  ["elevator" /* Elevator */]: elevator,
+  ["exploded" /* Exploded */]: exploded,
+  ["keyboard" /* Keyboard */]: keyboard,
+  ["laptop" /* Laptop */]: laptop,
+  ["lockers" /* Lockers */]: lockers,
+  ["loupe" /* Loupe */]: loupe,
+  ["padlock" /* Padlock */]: padlock,
+  ["patch" /* Patch */]: patch,
+  ["phone" /* Phone */]: phone,
+  ["phosphor" /* Phosphor */]: phosphor,
+  ["plot" /* Plot */]: plot,
+  ["plug" /* Plug */]: plug,
+  ["query" /* Query */]: query,
+  ["rail" /* Rail */]: rail,
+  ["riffle" /* Riffle */]: riffle,
+  ["router" /* Router */]: router,
+  ["sieve" /* Sieve */]: sieve,
+  ["slow" /* Slow */]: slow,
+  ["terminal" /* Terminal */]: terminal,
+  ["terrain" /* Terrain */]: terrain,
+  ["turntable" /* Turntable */]: turntable,
+  ["vault" /* Vault */]: vault
+};
+
+// src/hairline/utils/hairlineVars.ts
+var hairlineVars = (colors) => ({
+  "--hairline-plate": colors.background,
+  "--hairline-hi": colors.text,
+  "--hairline-edge": colors.textSecondary,
+  "--hairline-mid": colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
+  "--hairline-lo": colors.divider
+});
+var styles = StyleSheet.create({
+  host: { width: "100%", aspectRatio: HAIRLINE_ASPECT_RATIO }
+});
+var toElement = (view) => view;
+var HairlineFigure = ({
+  figure,
+  colors,
+  intensity = DEFAULT_HAIRLINE_INTENSITY,
+  label,
+  testID = HAIRLINE_TEST_ID
+}) => {
+  const hostRef = useRef(null);
+  const figureRef = useRef(null);
+  const optionsRef = useRef({ intensity, label });
+  optionsRef.current = { intensity, label };
+  useEffect(() => {
+    const el = toElement(hostRef.current);
+    if (el === null) return void 0;
+    const vars = Object.entries(hairlineVars(colors));
+    vars.forEach(([name, value]) => el.style.setProperty(name, value));
+    return () => vars.forEach(([name]) => el.style.removeProperty(name));
+  }, [colors]);
+  useEffect(() => {
+    const el = toElement(hostRef.current);
+    if (el === null) return void 0;
+    const mounted = FIGURE_REGISTRY[figure](el, optionsRef.current);
+    figureRef.current = mounted;
+    return () => {
+      mounted.destroy();
+      figureRef.current = null;
+    };
+  }, [figure]);
+  useEffect(() => {
+    figureRef.current?.update({ intensity, label });
+  }, [intensity, label]);
+  return /* @__PURE__ */ jsx(View, { ref: hostRef, style: styles.host, testID });
+};
+
+export { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID, HairlineFigure, HairlineFigureName, hairlineVars };
+//# sourceMappingURL=web.mjs.map
+//# sourceMappingURL=web.mjs.map

package/dist/hairline/web.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName"],"mappings":"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","file":"web.mjs","sourcesContent":["export const HAIRLINE_TEST_ID = 'motion-hairline-figure';\nexport const HAIRLINE_ASPECT_RATIO = 5 / 4;\nexport const DEFAULT_HAIRLINE_INTENSITY = 0.5;\n","export const enum HairlineFigureName {\n  Basket = 'basket',\n  Branches = 'branches',\n  Cabinet = 'cabinet',\n  Dish = 'dish',\n  Drawer = 'drawer',\n  Elevator = 'elevator',\n  Exploded = 'exploded',\n  Keyboard = 'keyboard',\n  Laptop = 'laptop',\n  Lockers = 'lockers',\n  Loupe = 'loupe',\n  Padlock = 'padlock',\n  Patch = 'patch',\n  Phone = 'phone',\n  Phosphor = 'phosphor',\n  Plot = 'plot',\n  Plug = 'plug',\n  Query = 'query',\n  Rail = 'rail',\n  Riffle = 'riffle',\n  Router = 'router',\n  Sieve = 'sieve',\n  Slow = 'slow',\n  Terminal = 'terminal',\n  Terrain = 'terrain',\n  Turntable = 'turntable',\n  Vault = 'vault',\n}\n","import {\n  basket, branches, cabinet, dish, drawer, elevator, exploded, keyboard, laptop,\n  lockers, loupe, padlock, patch, phone, phosphor, plot, plug, query, rail,\n  riffle, router, sieve, slow, terminal, terrain, turntable, vault,\n  type Figure, type HairlineOptions,\n} from '@lucasmarkes/hairline';\n\nimport { HairlineFigureName } from '../HairlineFigureName';\n\nexport type MountFigure = (el: HTMLElement, options?: HairlineOptions) => Figure;\n\nexport const FIGURE_REGISTRY: Record<HairlineFigureName, MountFigure> = {\n  [HairlineFigureName.Basket]: basket,\n  [HairlineFigureName.Branches]: branches,\n  [HairlineFigureName.Cabinet]: cabinet,\n  [HairlineFigureName.Dish]: dish,\n  [HairlineFigureName.Drawer]: drawer,\n  [HairlineFigureName.Elevator]: elevator,\n  [HairlineFigureName.Exploded]: exploded,\n  [HairlineFigureName.Keyboard]: keyboard,\n  [HairlineFigureName.Laptop]: laptop,\n  [HairlineFigureName.Lockers]: lockers,\n  [HairlineFigureName.Loupe]: loupe,\n  [HairlineFigureName.Padlock]: padlock,\n  [HairlineFigureName.Patch]: patch,\n  [HairlineFigureName.Phone]: phone,\n  [HairlineFigureName.Phosphor]: phosphor,\n  [HairlineFigureName.Plot]: plot,\n  [HairlineFigureName.Plug]: plug,\n  [HairlineFigureName.Query]: query,\n  [HairlineFigureName.Rail]: rail,\n  [HairlineFigureName.Riffle]: riffle,\n  [HairlineFigureName.Router]: router,\n  [HairlineFigureName.Sieve]: sieve,\n  [HairlineFigureName.Slow]: slow,\n  [HairlineFigureName.Terminal]: terminal,\n  [HairlineFigureName.Terrain]: terrain,\n  [HairlineFigureName.Turntable]: turntable,\n  [HairlineFigureName.Vault]: vault,\n};\n","import type { ModeColors } from '@dloizides/design-tokens';\n\nimport type { HairlineVars } from '../types';\n\n/** Maps one theme mode's colour tokens onto the hairline palette vars (stroke width stays upstream). */\nexport const hairlineVars = (colors: ModeColors): HairlineVars => ({\n  '--hairline-plate': colors.background,\n  '--hairline-hi': colors.text,\n  '--hairline-edge': colors.textSecondary,\n  '--hairline-mid': colors.textTertiary !== undefined ? colors.textTertiary : colors.border,\n  '--hairline-lo': colors.divider,\n});\n","import React, { useEffect, useRef } from 'react';\n\nimport { StyleSheet, View } from 'react-native';\n\nimport type { Figure } from '@lucasmarkes/hairline';\n\nimport { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID } from '../constants';\nimport { FIGURE_REGISTRY } from '../data/figureRegistry';\nimport type { HairlineFigureProps } from '../types';\nimport { hairlineVars } from '../utils/hairlineVars';\n\nconst styles = StyleSheet.create({\n  host: { width: '100%', aspectRatio: HAIRLINE_ASPECT_RATIO },\n});\n\nconst toElement = (view: View | null): HTMLElement | null => view as unknown as HTMLElement | null;\n\n/** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */\nexport const HairlineFigure = ({\n  figure,\n  colors,\n  intensity = DEFAULT_HAIRLINE_INTENSITY,\n  label,\n  testID = HAIRLINE_TEST_ID,\n}: HairlineFigureProps): React.ReactElement => {\n  const hostRef = useRef<View>(null);\n  const figureRef = useRef<Figure | null>(null);\n  const optionsRef = useRef({ intensity, label });\n  optionsRef.current = { intensity, label };\n\n  useEffect(() => {\n    const el = toElement(hostRef.current);\n    if (el === null) return undefined;\n    const vars = Object.entries(hairlineVars(colors));\n    vars.forEach(([name, value]) => el.style.setProperty(name, value));\n    return () => vars.forEach(([name]) => el.style.removeProperty(name));\n  }, [colors]);\n\n  useEffect(() => {\n    const el = toElement(hostRef.current);\n    if (el === null) return undefined;\n    const mounted = FIGURE_REGISTRY[figure](el, optionsRef.current);\n    figureRef.current = mounted;\n    return () => {\n      mounted.destroy();\n      figureRef.current = null;\n    };\n  }, [figure]);\n\n  useEffect(() => {\n    figureRef.current?.update({ intensity, label });\n  }, [intensity, label]);\n\n  return <View ref={hostRef} style={styles.host} testID={testID} />;\n};\n"]}

package/dist/index.d.mts

@@ -1,5 +1,5 @@
 export { prefersReducedMotion, useReducedMotion } from '@dloizides/rn-web-hooks';
-import { EasingFunction, Animated, StyleProp, ViewStyle, PressableProps } from 'react-native';
+import { EasingFunction, Animated, ViewStyle, StyleProp, PressableProps } from 'react-native';
 import { MotionEasings, MotionDurations } from '@dloizides/design-tokens';
 export { DEFAULT_MOTION, Motion, MotionDurations, MotionEasings } from '@dloizides/design-tokens';
 import React from 'react';
@@ -69,6 +69,7 @@ declare const MOTION_TEST_IDS: {
     readonly collapse: "collapse";
     readonly pressableScale: "pressable-scale";
     readonly skeleton: "skeleton";
+    readonly reorder: "reorder";
 };
 /** Default press-in scale for {@link PressableScale}. */
 declare const DEFAULT_PRESSED_SCALE = 0.96;
@@ -76,6 +77,14 @@ declare const DEFAULT_PRESSED_SCALE = 0.96;
 declare const DEFAULT_FADE_TRANSLATE_Y = 8;
 /** Default shimmer sweep duration (ms) for {@link Skeleton}. */
 declare const DEFAULT_SKELETON_DURATION_MS = 1200;
+/** Default focused scale for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_SCALE = 1.06;
+/** Default focused lift (px, upward) for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_LIFT_PX = 8;
+/** Default per-item stagger (ms) for {@link Reorder}. */
+declare const DEFAULT_FLIP_STAGGER_MS = 18;
+/** Default maximum number of items {@link Reorder} animates; the rest snap. */
+declare const DEFAULT_FLIP_CAP = 8;
 
 interface UseEnterExitOptions {
     /** Whether the element should be visible (entered). */
@@ -108,6 +117,57 @@ interface UseEnterExitResult {
 }
 declare function useEnterExit(options: UseEnterExitOptions): UseEnterExitResult;
 
+interface FocusLiftSpring {
+    stiffness: number;
+    damping: number;
+}
+interface FocusLiftOptions {
+    /** Scale while focused. Default 1.06. */
+    scale?: number;
+    /** Upward lift (px) while focused. Default 8. */
+    lift?: number;
+}
+interface FocusLiftTarget {
+    scale: number;
+    translateY: number;
+}
+interface UseFocusLiftResult {
+    /** Animated style to spread onto an `Animated.View`. */
+    style: Animated.WithAnimatedObject<ViewStyle>;
+}
+/** The transform a tile should settle at. Pure — the hook only springs toward it. */
+declare function focusLiftTarget(focused: boolean, reduced: boolean, opts: FocusLiftOptions): FocusLiftTarget;
+declare function useFocusLift(focused: boolean, spring: FocusLiftSpring, opts?: FocusLiftOptions): UseFocusLiftResult;
+
+/**
+ * computeFlipDeltas — the FLIP "invert" step, kept pure so it can be unit-tested
+ * without driving RN `Animated` or a layout pass.
+ *
+ * Given every item's slot BEFORE and AFTER a reorder, it returns, for each item that
+ * moved, the offset it must start from so it visually sits in its old slot — the
+ * caller then springs that offset to 0 ("play"). Items are staggered in their NEW
+ * reading order (row-first: y, then x). New items (no previous slot) and items that
+ * did not move are omitted. Past `cap` animated items the rest are omitted too, so
+ * they snap straight to their new slot — a long list does not play a long wave.
+ */
+interface LayoutBox {
+    x: number;
+    y: number;
+}
+interface FlipDelta {
+    key: string;
+    dx: number;
+    dy: number;
+    delayMs: number;
+}
+interface FlipOptions {
+    /** Delay (ms) added per animated item, in new reading order. */
+    staggerMs: number;
+    /** Maximum number of items that animate; the rest snap. */
+    cap: number;
+}
+declare function computeFlipDeltas(prev: ReadonlyMap<string, LayoutBox>, next: ReadonlyMap<string, LayoutBox>, opts: FlipOptions): FlipDelta[];
+
 /**
  * FadeIn — fades its children in (with a small upward translate) once, on mount.
  * The lightweight, mount-only sibling of {@link useEnterExit} (which handles the
@@ -213,4 +273,32 @@ interface SkeletonProps {
 }
 declare const Skeleton: ({ width, height, borderRadius, duration, backgroundColor, highlightColor, style, testID, }: SkeletonProps) => React.ReactElement;
 
-export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, collapseTargetHeight, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit };
+/**
+ * Reorder — a keyed list whose moved items spring from their old slot to the new one
+ * when `itemKeys` changes order (FLIP; maths in computeFlipDeltas, play in playFlip).
+ * - web: RN-web `onLayout` (ResizeObserver) misses position-only moves, so OLD slots are
+ *   read from the DOM during the render that changes the order (DOM still holds the last
+ *   commit) and NEW slots in `useLayoutEffect` — after the DOM mutation, before paint.
+ * - native: `onLayout` reports moves; the flip plays one frame after they arrive.
+ * Reduced motion: nothing animates (the caller crossfades). Transform only.
+ */
+
+interface ReorderProps {
+    /** Stable item keys, in display order. */
+    itemKeys: readonly string[];
+    /** Renders the content for one key. */
+    children: (key: string) => React.ReactNode;
+    spring: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Per-item stagger (ms). Default 18. */
+    staggerMs?: number;
+    /** Maximum animated items; the rest snap. Default 8. */
+    cap?: number;
+    /** Container testID; each item gets `${testID}-item-${key}`. */
+    testID?: string;
+}
+declare function Reorder({ itemKeys, children, spring, staggerMs, cap, testID, }: ReorderProps): React.ReactElement;
+
+export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_FLIP_CAP, DEFAULT_FLIP_STAGGER_MS, DEFAULT_FOCUS_LIFT_PX, DEFAULT_FOCUS_SCALE, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, type FlipDelta, type FlipOptions, type FocusLiftOptions, type FocusLiftSpring, type FocusLiftTarget, type LayoutBox, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Reorder, type ReorderProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, type UseFocusLiftResult, collapseTargetHeight, computeFlipDeltas, focusLiftTarget, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit, useFocusLift };

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 export { prefersReducedMotion, useReducedMotion } from '@dloizides/rn-web-hooks';
-import { EasingFunction, Animated, StyleProp, ViewStyle, PressableProps } from 'react-native';
+import { EasingFunction, Animated, ViewStyle, StyleProp, PressableProps } from 'react-native';
 import { MotionEasings, MotionDurations } from '@dloizides/design-tokens';
 export { DEFAULT_MOTION, Motion, MotionDurations, MotionEasings } from '@dloizides/design-tokens';
 import React from 'react';
@@ -69,6 +69,7 @@ declare const MOTION_TEST_IDS: {
     readonly collapse: "collapse";
     readonly pressableScale: "pressable-scale";
     readonly skeleton: "skeleton";
+    readonly reorder: "reorder";
 };
 /** Default press-in scale for {@link PressableScale}. */
 declare const DEFAULT_PRESSED_SCALE = 0.96;
@@ -76,6 +77,14 @@ declare const DEFAULT_PRESSED_SCALE = 0.96;
 declare const DEFAULT_FADE_TRANSLATE_Y = 8;
 /** Default shimmer sweep duration (ms) for {@link Skeleton}. */
 declare const DEFAULT_SKELETON_DURATION_MS = 1200;
+/** Default focused scale for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_SCALE = 1.06;
+/** Default focused lift (px, upward) for {@link useFocusLift}. */
+declare const DEFAULT_FOCUS_LIFT_PX = 8;
+/** Default per-item stagger (ms) for {@link Reorder}. */
+declare const DEFAULT_FLIP_STAGGER_MS = 18;
+/** Default maximum number of items {@link Reorder} animates; the rest snap. */
+declare const DEFAULT_FLIP_CAP = 8;
 
 interface UseEnterExitOptions {
     /** Whether the element should be visible (entered). */
@@ -108,6 +117,57 @@ interface UseEnterExitResult {
 }
 declare function useEnterExit(options: UseEnterExitOptions): UseEnterExitResult;
 
+interface FocusLiftSpring {
+    stiffness: number;
+    damping: number;
+}
+interface FocusLiftOptions {
+    /** Scale while focused. Default 1.06. */
+    scale?: number;
+    /** Upward lift (px) while focused. Default 8. */
+    lift?: number;
+}
+interface FocusLiftTarget {
+    scale: number;
+    translateY: number;
+}
+interface UseFocusLiftResult {
+    /** Animated style to spread onto an `Animated.View`. */
+    style: Animated.WithAnimatedObject<ViewStyle>;
+}
+/** The transform a tile should settle at. Pure — the hook only springs toward it. */
+declare function focusLiftTarget(focused: boolean, reduced: boolean, opts: FocusLiftOptions): FocusLiftTarget;
+declare function useFocusLift(focused: boolean, spring: FocusLiftSpring, opts?: FocusLiftOptions): UseFocusLiftResult;
+
+/**
+ * computeFlipDeltas — the FLIP "invert" step, kept pure so it can be unit-tested
+ * without driving RN `Animated` or a layout pass.
+ *
+ * Given every item's slot BEFORE and AFTER a reorder, it returns, for each item that
+ * moved, the offset it must start from so it visually sits in its old slot — the
+ * caller then springs that offset to 0 ("play"). Items are staggered in their NEW
+ * reading order (row-first: y, then x). New items (no previous slot) and items that
+ * did not move are omitted. Past `cap` animated items the rest are omitted too, so
+ * they snap straight to their new slot — a long list does not play a long wave.
+ */
+interface LayoutBox {
+    x: number;
+    y: number;
+}
+interface FlipDelta {
+    key: string;
+    dx: number;
+    dy: number;
+    delayMs: number;
+}
+interface FlipOptions {
+    /** Delay (ms) added per animated item, in new reading order. */
+    staggerMs: number;
+    /** Maximum number of items that animate; the rest snap. */
+    cap: number;
+}
+declare function computeFlipDeltas(prev: ReadonlyMap<string, LayoutBox>, next: ReadonlyMap<string, LayoutBox>, opts: FlipOptions): FlipDelta[];
+
 /**
  * FadeIn — fades its children in (with a small upward translate) once, on mount.
  * The lightweight, mount-only sibling of {@link useEnterExit} (which handles the
@@ -213,4 +273,32 @@ interface SkeletonProps {
 }
 declare const Skeleton: ({ width, height, borderRadius, duration, backgroundColor, highlightColor, style, testID, }: SkeletonProps) => React.ReactElement;
 
-export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, collapseTargetHeight, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit };
+/**
+ * Reorder — a keyed list whose moved items spring from their old slot to the new one
+ * when `itemKeys` changes order (FLIP; maths in computeFlipDeltas, play in playFlip).
+ * - web: RN-web `onLayout` (ResizeObserver) misses position-only moves, so OLD slots are
+ *   read from the DOM during the render that changes the order (DOM still holds the last
+ *   commit) and NEW slots in `useLayoutEffect` — after the DOM mutation, before paint.
+ * - native: `onLayout` reports moves; the flip plays one frame after they arrive.
+ * Reduced motion: nothing animates (the caller crossfades). Transform only.
+ */
+
+interface ReorderProps {
+    /** Stable item keys, in display order. */
+    itemKeys: readonly string[];
+    /** Renders the content for one key. */
+    children: (key: string) => React.ReactNode;
+    spring: {
+        stiffness: number;
+        damping: number;
+    };
+    /** Per-item stagger (ms). Default 18. */
+    staggerMs?: number;
+    /** Maximum animated items; the rest snap. Default 8. */
+    cap?: number;
+    /** Container testID; each item gets `${testID}-item-${key}`. */
+    testID?: string;
+}
+declare function Reorder({ itemKeys, children, spring, staggerMs, cap, testID, }: ReorderProps): React.ReactElement;
+
+export { Collapse, type CollapseProps, DEFAULT_FADE_TRANSLATE_Y, DEFAULT_FLIP_CAP, DEFAULT_FLIP_STAGGER_MS, DEFAULT_FOCUS_LIFT_PX, DEFAULT_FOCUS_SCALE, DEFAULT_PRESSED_SCALE, DEFAULT_SKELETON_DURATION_MS, FadeIn, type FadeInProps, type FlipDelta, type FlipOptions, type FocusLiftOptions, type FocusLiftSpring, type FocusLiftTarget, type LayoutBox, MOTION_TEST_IDS, type MotionEasingName, PressableScale, type PressableScaleProps, Reorder, type ReorderProps, Skeleton, type SkeletonProps, type UseEnterExitOptions, type UseEnterExitResult, type UseFocusLiftResult, collapseTargetHeight, computeFlipDeltas, focusLiftTarget, motionDurations, motionEasingTokens, motionEasings, resolveDuration, resolveScale, shimmerRange, shouldUseNativeDriver, useEnterExit, useFocusLift };