@dloizides/ui-motion 1.1.0 → 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/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dloizides/ui-motion",
-    "version": "1.1.0",
+    "version": "1.2.0",
     "description": "Themable, brand-agnostic React Native (RN-web) motion primitives — useEnterExit, FadeIn, Collapse, PressableScale, Skeleton — built on RN Animated, driven by @dloizides/design-tokens motion tokens, and gated on @dloizides/rn-web-hooks useReducedMotion (every animation collapses to instant under reduced-motion). Part of the dloizides.com shared UI kit.",
     "keywords": [
         "react",
@@ -48,6 +48,28 @@
                 "types": "./dist/index.d.ts",
                 "default": "./dist/index.js"
             }
+        },
+        "./hairline": {
+            "react-native": {
+                "types": "./dist/hairline/native.d.ts",
+                "default": "./dist/hairline/native.js"
+            },
+            "browser": {
+                "types": "./dist/hairline/web.d.ts",
+                "default": "./dist/hairline/web.js"
+            },
+            "require": {
+                "types": "./dist/hairline/web.d.ts",
+                "default": "./dist/hairline/web.js"
+            },
+            "import": {
+                "types": "./dist/hairline/web.d.mts",
+                "default": "./dist/hairline/web.mjs"
+            },
+            "default": {
+                "types": "./dist/hairline/web.d.ts",
+                "default": "./dist/hairline/web.js"
+            }
         }
     },
     "files": [
@@ -60,7 +82,7 @@
         "node": ">=18.0.0"
     },
     "scripts": {
-        "build": "rimraf dist && tsup",
+        "build": "rimraf dist && npm run generate:hairline && tsup",
         "build:watch": "tsup --watch",
         "test": "jest",
         "test:watch": "jest --watch",
@@ -71,19 +93,22 @@
         "clean": "rimraf dist",
         "security:audit": "npm audit --audit-level=high",
         "deps:outdated": "npm outdated || exit 0",
-        "deps:unused": "npx depcheck --ignores \"@types/jest,@types/node,@types/react,@types/react-dom,rimraf,react-native\"",
+        "deps:unused": "npx depcheck --ignores \"@types/jest,@types/node,@types/react,@types/react-dom,rimraf,react-native,react-native-webview\"",
         "deps:licenses": "npx license-checker --onlyAllow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause;0BSD;Unlicense;CC0-1.0\"",
         "deps:health": "npm run deps:outdated && npm run deps:unused",
         "prepublishOnly": "npm run clean && npm run build && npm run test",
-        "version": "npm run build"
+        "version": "npm run build",
+        "generate:hairline": "node scripts/generate-hairline-bundle.mjs"
     },
     "dependencies": {
         "@dloizides/design-tokens": "^1.7.0",
-        "@dloizides/rn-web-hooks": "^1.1.0"
+        "@dloizides/rn-web-hooks": "^1.1.0",
+        "@lucasmarkes/hairline": "0.3.0"
     },
     "peerDependencies": {
         "react": ">=18.0.0",
-        "react-native": ">=0.74.0"
+        "react-native": ">=0.74.0",
+        "react-native-webview": ">=13.0.0"
     },
     "devDependencies": {
         "@dloizides/design-tokens": "file:../design-tokens",
@@ -105,9 +130,15 @@
         "react-dom": "^19.2.4",
         "react-native": "0.81.5",
         "react-native-web": "^0.21.0",
+        "react-native-webview": "^13.15.0",
         "rimraf": "^5.0.0",
         "ts-jest": "^29.1.0",
         "tsup": "^8.0.0",
         "typescript": "^5.4.0"
+    },
+    "peerDependenciesMeta": {
+        "react-native-webview": {
+            "optional": true
+        }
     }
 }