@dloizides/ui-motion 1.2.0 → 1.3.0

package/dist/hairline/web.d.mts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { H as HairlineFigureProps } from '../constants-BrJ7VJYu.mjs';
-export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-BrJ7VJYu.mjs';
+import { H as HairlineFigureProps } from '../constants-DXSyrmvQ.mjs';
+export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-DXSyrmvQ.mjs';
 import '@dloizides/design-tokens';
 
 /** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */

package/dist/hairline/web.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { H as HairlineFigureProps } from '../constants-BrJ7VJYu.js';
-export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-BrJ7VJYu.js';
+import { H as HairlineFigureProps } from '../constants-DXSyrmvQ.js';
+export { D as DEFAULT_HAIRLINE_INTENSITY, a as HAIRLINE_ASPECT_RATIO, b as HAIRLINE_TEST_ID, c as HairlineFigureName, d as HairlineVarName, e as HairlineVars, h as hairlineVars } from '../constants-DXSyrmvQ.js';
 import '@dloizides/design-tokens';
 
 /** Mounts a hairline figure on the host View's DOM node (RN-web); destroyed on unmount. */

package/dist/hairline/web.js

@@ -75,13 +75,23 @@ var FIGURE_REGISTRY = {
   ["vault" /* Vault */]: hairline.vault
 };
 
+// src/hairline/HairlineVarName.ts
+var HairlineVarName = /* @__PURE__ */ ((HairlineVarName2) => {
+  HairlineVarName2["Plate"] = "--hairline-plate";
+  HairlineVarName2["Hi"] = "--hairline-hi";
+  HairlineVarName2["Edge"] = "--hairline-edge";
+  HairlineVarName2["Mid"] = "--hairline-mid";
+  HairlineVarName2["Lo"] = "--hairline-lo";
+  return HairlineVarName2;
+})(HairlineVarName || {});
+
 // 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
+  ["--hairline-plate" /* Plate */]: colors.background,
+  ["--hairline-hi" /* Hi */]: colors.text,
+  ["--hairline-edge" /* Edge */]: colors.textSecondary,
+  ["--hairline-mid" /* Mid */]: colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
+  ["--hairline-lo" /* Lo */]: colors.divider
 });
 var styles = reactNative.StyleSheet.create({
   host: { width: "100%", aspectRatio: HAIRLINE_ASPECT_RATIO }
@@ -126,6 +136,7 @@ exports.HAIRLINE_ASPECT_RATIO = HAIRLINE_ASPECT_RATIO;
 exports.HAIRLINE_TEST_ID = HAIRLINE_TEST_ID;
 exports.HairlineFigure = HairlineFigure;
 exports.HairlineFigureName = HairlineFigureName;
+exports.HairlineVarName = HairlineVarName;
 exports.hairlineVars = hairlineVars;
 //# sourceMappingURL=web.js.map
 //# sourceMappingURL=web.js.map

package/dist/hairline/web.js.map

@@ -1 +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"]}
+{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/HairlineVarName.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","HairlineVarName","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;\nexport const HAIRLINE_HANDLE_GLOBAL = '__dloizidesHairline';\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","export const enum HairlineVarName {\n  Plate = '--hairline-plate',\n  Hi = '--hairline-hi',\n  Edge = '--hairline-edge',\n  Mid = '--hairline-mid',\n  Lo = '--hairline-lo',\n}\n","import type { ModeColors } from '@dloizides/design-tokens';\n\nimport { HairlineVarName } from '../HairlineVarName';\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  [HairlineVarName.Plate]: colors.background,\n  [HairlineVarName.Hi]: colors.text,\n  [HairlineVarName.Edge]: colors.textSecondary,\n  [HairlineVarName.Mid]: colors.textTertiary !== undefined ? colors.textTertiary : colors.border,\n  [HairlineVarName.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

@@ -73,13 +73,23 @@ var FIGURE_REGISTRY = {
   ["vault" /* Vault */]: vault
 };
 
+// src/hairline/HairlineVarName.ts
+var HairlineVarName = /* @__PURE__ */ ((HairlineVarName2) => {
+  HairlineVarName2["Plate"] = "--hairline-plate";
+  HairlineVarName2["Hi"] = "--hairline-hi";
+  HairlineVarName2["Edge"] = "--hairline-edge";
+  HairlineVarName2["Mid"] = "--hairline-mid";
+  HairlineVarName2["Lo"] = "--hairline-lo";
+  return HairlineVarName2;
+})(HairlineVarName || {});
+
 // 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
+  ["--hairline-plate" /* Plate */]: colors.background,
+  ["--hairline-hi" /* Hi */]: colors.text,
+  ["--hairline-edge" /* Edge */]: colors.textSecondary,
+  ["--hairline-mid" /* Mid */]: colors.textTertiary !== void 0 ? colors.textTertiary : colors.border,
+  ["--hairline-lo" /* Lo */]: colors.divider
 });
 var styles = StyleSheet.create({
   host: { width: "100%", aspectRatio: HAIRLINE_ASPECT_RATIO }
@@ -119,6 +129,6 @@ var HairlineFigure = ({
   return /* @__PURE__ */ jsx(View, { ref: hostRef, style: styles.host, testID });
 };
 
-export { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID, HairlineFigure, HairlineFigureName, hairlineVars };
+export { DEFAULT_HAIRLINE_INTENSITY, HAIRLINE_ASPECT_RATIO, HAIRLINE_TEST_ID, HairlineFigure, HairlineFigureName, HairlineVarName, hairlineVars };
 //# sourceMappingURL=web.mjs.map
 //# sourceMappingURL=web.mjs.map

package/dist/hairline/web.mjs.map

@@ -1 +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"]}
+{"version":3,"sources":["../../src/hairline/constants.ts","../../src/hairline/HairlineFigureName.ts","../../src/hairline/data/figureRegistry.ts","../../src/hairline/HairlineVarName.ts","../../src/hairline/utils/hairlineVars.ts","../../src/hairline/components/HairlineFigure.web.tsx"],"names":["HairlineFigureName","HairlineVarName"],"mappings":";;;;;;;;AAAO,IAAM,gBAAA,GAAmB;AACzB,IAAM,wBAAwB,CAAA,GAAI;AAClC,IAAM,0BAAA,GAA6B;;;ACFnC,IAAW,kBAAA,qBAAAA,mBAAAA,KAAX;AACL,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,QAAA,CAAA,GAAS,QAAA;AACT,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AACR,EAAAA,oBAAA,MAAA,CAAA,GAAO,MAAA;AACP,EAAAA,oBAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,oBAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,oBAAA,WAAA,CAAA,GAAY,WAAA;AACZ,EAAAA,oBAAA,OAAA,CAAA,GAAQ,OAAA;AA3BQ,EAAA,OAAAA,mBAAAA;AAAA,CAAA,EAAA,kBAAA,IAAA,EAAA;;;ACWX,IAAM,eAAA,GAA2D;AAAA,EACtE,yBAA6B,MAAA;AAAA,EAC7B,6BAA+B,QAAA;AAAA,EAC/B,2BAA8B,OAAA;AAAA,EAC9B,qBAA2B,IAAA;AAAA,EAC3B,yBAA6B,MAAA;AAAA,EAC7B,6BAA+B,QAAA;AAAA,EAC/B,6BAA+B,QAAA;AAAA,EAC/B,6BAA+B,QAAA;AAAA,EAC/B,yBAA6B,MAAA;AAAA,EAC7B,2BAA8B,OAAA;AAAA,EAC9B,uBAA4B,KAAA;AAAA,EAC5B,2BAA8B,OAAA;AAAA,EAC9B,uBAA4B,KAAA;AAAA,EAC5B,uBAA4B,KAAA;AAAA,EAC5B,6BAA+B,QAAA;AAAA,EAC/B,qBAA2B,IAAA;AAAA,EAC3B,qBAA2B,IAAA;AAAA,EAC3B,uBAA4B,KAAA;AAAA,EAC5B,qBAA2B,IAAA;AAAA,EAC3B,yBAA6B,MAAA;AAAA,EAC7B,yBAA6B,MAAA;AAAA,EAC7B,uBAA4B,KAAA;AAAA,EAC5B,qBAA2B,IAAA;AAAA,EAC3B,6BAA+B,QAAA;AAAA,EAC/B,2BAA8B,OAAA;AAAA,EAC9B,+BAAgC,SAAA;AAAA,EAChC,uBAA4B;AAC9B,CAAA;;;ACvCO,IAAW,eAAA,qBAAAC,gBAAAA,KAAX;AACL,EAAAA,iBAAA,OAAA,CAAA,GAAQ,kBAAA;AACR,EAAAA,iBAAA,IAAA,CAAA,GAAK,eAAA;AACL,EAAAA,iBAAA,MAAA,CAAA,GAAO,iBAAA;AACP,EAAAA,iBAAA,KAAA,CAAA,GAAM,gBAAA;AACN,EAAAA,iBAAA,IAAA,CAAA,GAAK,eAAA;AALW,EAAA,OAAAA,gBAAAA;AAAA,CAAA,EAAA,eAAA,IAAA,EAAA;;;ACMX,IAAM,YAAA,GAAe,CAAC,MAAA,MAAsC;AAAA,EACjE,CAAA,kBAAA,eAAyB,MAAA,CAAO,UAAA;AAAA,EAChC,CAAA,eAAA,YAAsB,MAAA,CAAO,IAAA;AAAA,EAC7B,CAAA,iBAAA,cAAwB,MAAA,CAAO,aAAA;AAAA,EAC/B,8BAAuB,MAAA,CAAO,iBAAiB,MAAA,GAAY,MAAA,CAAO,eAAe,MAAA,CAAO,MAAA;AAAA,EACxF,CAAA,eAAA,YAAsB,MAAA,CAAO;AAC/B,CAAA;ACDA,IAAM,MAAA,GAAS,WAAW,MAAA,CAAO;AAAA,EAC/B,IAAA,EAAM,EAAE,KAAA,EAAO,MAAA,EAAQ,aAAa,qBAAA;AACtC,CAAC,CAAA;AAED,IAAM,SAAA,GAAY,CAAC,IAAA,KAA0C,IAAA;AAGtD,IAAM,iBAAiB,CAAC;AAAA,EAC7B,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA,GAAY,0BAAA;AAAA,EACZ,KAAA;AAAA,EACA,MAAA,GAAS;AACX,CAAA,KAA+C;AAC7C,EAAA,MAAM,OAAA,GAAU,OAAa,IAAI,CAAA;AACjC,EAAA,MAAM,SAAA,GAAY,OAAsB,IAAI,CAAA;AAC5C,EAAA,MAAM,UAAA,GAAa,MAAA,CAAO,EAAE,SAAA,EAAW,OAAO,CAAA;AAC9C,EAAA,UAAA,CAAW,OAAA,GAAU,EAAE,SAAA,EAAW,KAAA,EAAM;AAExC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAA,GAAK,SAAA,CAAU,OAAA,CAAQ,OAAO,CAAA;AACpC,IAAA,IAAI,EAAA,KAAO,MAAM,OAAO,MAAA;AACxB,IAAA,MAAM,IAAA,GAAO,MAAA,CAAO,OAAA,CAAQ,YAAA,CAAa,MAAM,CAAC,CAAA;AAChD,IAAA,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAC,IAAA,EAAM,KAAK,CAAA,KAAM,EAAA,CAAG,KAAA,CAAM,WAAA,CAAY,IAAA,EAAM,KAAK,CAAC,CAAA;AACjE,IAAA,OAAO,MAAM,IAAA,CAAK,OAAA,CAAQ,CAAC,CAAC,IAAI,CAAA,KAAM,EAAA,CAAG,KAAA,CAAM,cAAA,CAAe,IAAI,CAAC,CAAA;AAAA,EACrE,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,EAAA,GAAK,SAAA,CAAU,OAAA,CAAQ,OAAO,CAAA;AACpC,IAAA,IAAI,EAAA,KAAO,MAAM,OAAO,MAAA;AACxB,IAAA,MAAM,UAAU,eAAA,CAAgB,MAAM,CAAA,CAAE,EAAA,EAAI,WAAW,OAAO,CAAA;AAC9D,IAAA,SAAA,CAAU,OAAA,GAAU,OAAA;AACpB,IAAA,OAAO,MAAM;AACX,MAAA,OAAA,CAAQ,OAAA,EAAQ;AAChB,MAAA,SAAA,CAAU,OAAA,GAAU,IAAA;AAAA,IACtB,CAAA;AAAA,EACF,CAAA,EAAG,CAAC,MAAM,CAAC,CAAA;AAEX,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,SAAA,CAAU,OAAA,EAAS,MAAA,CAAO,EAAE,SAAA,EAAW,OAAO,CAAA;AAAA,EAChD,CAAA,EAAG,CAAC,SAAA,EAAW,KAAK,CAAC,CAAA;AAErB,EAAA,2BAAQ,IAAA,EAAA,EAAK,GAAA,EAAK,SAAS,KAAA,EAAO,MAAA,CAAO,MAAM,MAAA,EAAgB,CAAA;AACjE","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;\nexport const HAIRLINE_HANDLE_GLOBAL = '__dloizidesHairline';\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","export const enum HairlineVarName {\n  Plate = '--hairline-plate',\n  Hi = '--hairline-hi',\n  Edge = '--hairline-edge',\n  Mid = '--hairline-mid',\n  Lo = '--hairline-lo',\n}\n","import type { ModeColors } from '@dloizides/design-tokens';\n\nimport { HairlineVarName } from '../HairlineVarName';\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  [HairlineVarName.Plate]: colors.background,\n  [HairlineVarName.Hi]: colors.text,\n  [HairlineVarName.Edge]: colors.textSecondary,\n  [HairlineVarName.Mid]: colors.textTertiary !== undefined ? colors.textTertiary : colors.border,\n  [HairlineVarName.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/logo/index.d.mts

@@ -0,0 +1,44 @@
+import { MotionDurations, MotionEasings } from '@dloizides/design-tokens';
+
+type LogoDurationToken = keyof MotionDurations;
+type LogoEasingToken = keyof MotionEasings;
+/** One beat: animate every `[data-motion-layer="<layer>"]` node through `keyframes`. */
+interface LogoBeat {
+    layer: string;
+    keyframes: Keyframe[];
+    duration: LogoDurationToken | number;
+    easing?: LogoEasingToken;
+    delay?: number;
+}
+type LogoTimeline = readonly LogoBeat[];
+interface PlayLogoOptions {
+    reducedMotion?: boolean;
+    iterations?: number;
+}
+interface LogoPlayback {
+    finished: Promise<void>;
+    cancel: () => void;
+}
+type BindMicroOptions = Pick<PlayLogoOptions, 'reducedMotion'>;
+
+/** Plays a logo timeline on the mark's `data-motion-layer` nodes via the Web Animations API. */
+declare function playLogo(svg: Element, timeline: LogoTimeline, options?: PlayLogoOptions): LogoPlayback;
+
+/** What starts a logo micro-animation bound with `bindMicro`. */
+declare const enum MicroTrigger {
+    Hover = "hover",
+    Focus = "focus",
+    Loading = "loading"
+}
+
+/** Binds a micro-animation to hover, focus or loading; returns the unbind function. */
+declare function bindMicro(svg: Element, timeline: LogoTimeline, trigger: MicroTrigger | `${MicroTrigger}`, options?: BindMicroOptions): () => void;
+
+/** A duration token (`fast`, `base`, `slow`, `instant`) to ms; a number passes through. */
+declare function resolveDuration(duration: LogoDurationToken | number): number;
+/** An easing token to its css timing function; no token means `standard`. */
+declare function resolveEasing(easing: LogoEasingToken | undefined): string;
+
+declare const MOTION_LAYER_ATTRIBUTE = "data-motion-layer";
+
+export { type BindMicroOptions, type LogoBeat, type LogoDurationToken, type LogoEasingToken, type LogoPlayback, type LogoTimeline, MOTION_LAYER_ATTRIBUTE, MicroTrigger, type PlayLogoOptions, bindMicro, playLogo, resolveDuration, resolveEasing };

package/dist/logo/index.d.ts

@@ -0,0 +1,44 @@
+import { MotionDurations, MotionEasings } from '@dloizides/design-tokens';
+
+type LogoDurationToken = keyof MotionDurations;
+type LogoEasingToken = keyof MotionEasings;
+/** One beat: animate every `[data-motion-layer="<layer>"]` node through `keyframes`. */
+interface LogoBeat {
+    layer: string;
+    keyframes: Keyframe[];
+    duration: LogoDurationToken | number;
+    easing?: LogoEasingToken;
+    delay?: number;
+}
+type LogoTimeline = readonly LogoBeat[];
+interface PlayLogoOptions {
+    reducedMotion?: boolean;
+    iterations?: number;
+}
+interface LogoPlayback {
+    finished: Promise<void>;
+    cancel: () => void;
+}
+type BindMicroOptions = Pick<PlayLogoOptions, 'reducedMotion'>;
+
+/** Plays a logo timeline on the mark's `data-motion-layer` nodes via the Web Animations API. */
+declare function playLogo(svg: Element, timeline: LogoTimeline, options?: PlayLogoOptions): LogoPlayback;
+
+/** What starts a logo micro-animation bound with `bindMicro`. */
+declare const enum MicroTrigger {
+    Hover = "hover",
+    Focus = "focus",
+    Loading = "loading"
+}
+
+/** Binds a micro-animation to hover, focus or loading; returns the unbind function. */
+declare function bindMicro(svg: Element, timeline: LogoTimeline, trigger: MicroTrigger | `${MicroTrigger}`, options?: BindMicroOptions): () => void;
+
+/** A duration token (`fast`, `base`, `slow`, `instant`) to ms; a number passes through. */
+declare function resolveDuration(duration: LogoDurationToken | number): number;
+/** An easing token to its css timing function; no token means `standard`. */
+declare function resolveEasing(easing: LogoEasingToken | undefined): string;
+
+declare const MOTION_LAYER_ATTRIBUTE = "data-motion-layer";
+
+export { type BindMicroOptions, type LogoBeat, type LogoDurationToken, type LogoEasingToken, type LogoPlayback, type LogoTimeline, MOTION_LAYER_ATTRIBUTE, MicroTrigger, type PlayLogoOptions, bindMicro, playLogo, resolveDuration, resolveEasing };

package/dist/logo/index.js

@@ -0,0 +1,123 @@
+'use strict';
+
+var designTokens = require('@dloizides/design-tokens');
+
+// src/logo/constants.ts
+var MOTION_LAYER_ATTRIBUTE = "data-motion-layer";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var DEFAULT_LOGO_EASING = "standard";
+
+// src/logo/utils/layers.ts
+var FRAME_META_KEYS = /* @__PURE__ */ new Set(["offset", "easing", "composite"]);
+function findLayers(root, layer) {
+  const selector = `[${MOTION_LAYER_ATTRIBUTE}=${JSON.stringify(layer)}]`;
+  const nodes = Array.from(root.querySelectorAll(selector));
+  if (root.matches(selector)) nodes.unshift(root);
+  return nodes.filter((node) => "style" in node);
+}
+function applyFinalFrame(element, keyframes) {
+  const last = keyframes[keyframes.length - 1];
+  if (last === void 0) return;
+  const style = element.style;
+  Object.entries(last).filter(([key, value]) => !FRAME_META_KEYS.has(key) && value !== null && value !== void 0).forEach(([key, value]) => {
+    style[key] = String(value);
+  });
+}
+function supportsWebAnimations(element) {
+  return typeof element.animate === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function resolveDuration(duration) {
+  if (typeof duration === "number") return duration;
+  const ms = designTokens.DEFAULT_MOTION.durations[duration];
+  if (ms === void 0) throw new Error(`Unknown motion duration token: ${String(duration)}`);
+  return ms;
+}
+function resolveEasing(easing) {
+  const name = easing ?? DEFAULT_LOGO_EASING;
+  const token = designTokens.DEFAULT_MOTION.easings[name];
+  if (token === void 0) throw new Error(`Unknown motion easing token: ${String(name)}`);
+  return token.css;
+}
+
+// src/logo/utils/playLogo.ts
+var ignoreCancel = () => void 0;
+function playLogo(svg, timeline, options = {}) {
+  const still = options.reducedMotion ?? prefersReducedMotion();
+  const animations = [];
+  timeline.forEach((beat) => {
+    findLayers(svg, beat.layer).forEach((element) => {
+      if (still || !supportsWebAnimations(element)) {
+        applyFinalFrame(element, beat.keyframes);
+        return;
+      }
+      animations.push(
+        element.animate(beat.keyframes, {
+          duration: resolveDuration(beat.duration),
+          easing: resolveEasing(beat.easing),
+          delay: beat.delay ?? 0,
+          fill: "both",
+          iterations: options.iterations ?? 1
+        })
+      );
+    });
+  });
+  const finished = Promise.all(animations.map((animation) => animation.finished.catch(ignoreCancel))).then(ignoreCancel);
+  return { finished, cancel: () => animations.forEach((animation) => animation.cancel()) };
+}
+
+// src/logo/MicroTrigger.ts
+var MicroTrigger = /* @__PURE__ */ ((MicroTrigger2) => {
+  MicroTrigger2["Hover"] = "hover";
+  MicroTrigger2["Focus"] = "focus";
+  MicroTrigger2["Loading"] = "loading";
+  return MicroTrigger2;
+})(MicroTrigger || {});
+
+// src/logo/utils/bindMicro.ts
+var START_EVENT = {
+  ["hover" /* Hover */]: "pointerenter",
+  ["focus" /* Focus */]: "focusin"
+};
+var STOP_EVENT = {
+  ["hover" /* Hover */]: "pointerleave",
+  ["focus" /* Focus */]: "focusout"
+};
+var noop = () => void 0;
+function bindMicro(svg, timeline, trigger, options = {}) {
+  if (options.reducedMotion ?? prefersReducedMotion()) return noop;
+  let playback;
+  const stop = () => {
+    playback?.cancel();
+    playback = void 0;
+  };
+  if (trigger === "loading" /* Loading */) {
+    playback = playLogo(svg, timeline, { reducedMotion: false, iterations: Infinity });
+    return stop;
+  }
+  const start = () => {
+    stop();
+    playback = playLogo(svg, timeline, { reducedMotion: false });
+  };
+  const startEvent = START_EVENT[trigger] ?? "";
+  const stopEvent = STOP_EVENT[trigger] ?? "";
+  svg.addEventListener(startEvent, start);
+  svg.addEventListener(stopEvent, stop);
+  return () => {
+    svg.removeEventListener(startEvent, start);
+    svg.removeEventListener(stopEvent, stop);
+    stop();
+  };
+}
+
+exports.MOTION_LAYER_ATTRIBUTE = MOTION_LAYER_ATTRIBUTE;
+exports.MicroTrigger = MicroTrigger;
+exports.bindMicro = bindMicro;
+exports.playLogo = playLogo;
+exports.resolveDuration = resolveDuration;
+exports.resolveEasing = resolveEasing;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/logo/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/logo/constants.ts","../../src/logo/utils/layers.ts","../../src/logo/utils/resolveTiming.ts","../../src/logo/utils/playLogo.ts","../../src/logo/MicroTrigger.ts","../../src/logo/utils/bindMicro.ts"],"names":["DEFAULT_MOTION","MicroTrigger"],"mappings":"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","file":"index.js","sourcesContent":["export const MOTION_LAYER_ATTRIBUTE = 'data-motion-layer';\n\nexport const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';\n\nexport const DEFAULT_LOGO_EASING = 'standard';\n","import { MOTION_LAYER_ATTRIBUTE, REDUCED_MOTION_QUERY } from '../constants';\n\nconst FRAME_META_KEYS = new Set(['offset', 'easing', 'composite']);\n\ntype StyledElement = Element & ElementCSSInlineStyle;\n\nexport function findLayers(root: Element, layer: string): StyledElement[] {\n  const selector = `[${MOTION_LAYER_ATTRIBUTE}=${JSON.stringify(layer)}]`;\n  const nodes = Array.from(root.querySelectorAll(selector));\n  if (root.matches(selector)) nodes.unshift(root);\n  return nodes.filter((node): node is StyledElement => 'style' in node);\n}\n\nexport function applyFinalFrame(element: StyledElement, keyframes: Keyframe[]): void {\n  const last = keyframes[keyframes.length - 1];\n  if (last === undefined) return;\n  const style = element.style as unknown as Record<string, string>;\n  Object.entries(last)\n    .filter(([key, value]) => !FRAME_META_KEYS.has(key) && value !== null && value !== undefined)\n    .forEach(([key, value]) => {\n      style[key] = String(value);\n    });\n}\n\nexport function supportsWebAnimations(element: Element): boolean {\n  return typeof element.animate === 'function';\n}\n\nexport function prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia(REDUCED_MOTION_QUERY).matches;\n}\n","import { DEFAULT_MOTION } from '@dloizides/design-tokens';\n\nimport { DEFAULT_LOGO_EASING } from '../constants';\nimport type { LogoDurationToken, LogoEasingToken } from '../types';\n\n/** A duration token (`fast`, `base`, `slow`, `instant`) to ms; a number passes through. */\nexport function resolveDuration(duration: LogoDurationToken | number): number {\n  if (typeof duration === 'number') return duration;\n  const ms = DEFAULT_MOTION.durations[duration] as number | undefined;\n  if (ms === undefined) throw new Error(`Unknown motion duration token: ${String(duration)}`);\n  return ms;\n}\n\n/** An easing token to its css timing function; no token means `standard`. */\nexport function resolveEasing(easing: LogoEasingToken | undefined): string {\n  const name = easing ?? DEFAULT_LOGO_EASING;\n  const token = DEFAULT_MOTION.easings[name] as { css: string } | undefined;\n  if (token === undefined) throw new Error(`Unknown motion easing token: ${String(name)}`);\n  return token.css;\n}\n","import type { LogoPlayback, LogoTimeline, PlayLogoOptions } from '../types';\nimport { applyFinalFrame, findLayers, prefersReducedMotion, supportsWebAnimations } from './layers';\nimport { resolveDuration, resolveEasing } from './resolveTiming';\n\nconst ignoreCancel = (): undefined => undefined;\n\n/** Plays a logo timeline on the mark's `data-motion-layer` nodes via the Web Animations API. */\nexport function playLogo(svg: Element, timeline: LogoTimeline, options: PlayLogoOptions = {}): LogoPlayback {\n  const still = options.reducedMotion ?? prefersReducedMotion();\n  const animations: Animation[] = [];\n  timeline.forEach((beat) => {\n    findLayers(svg, beat.layer).forEach((element) => {\n      if (still || !supportsWebAnimations(element)) {\n        applyFinalFrame(element, beat.keyframes);\n        return;\n      }\n      animations.push(\n        element.animate(beat.keyframes, {\n          duration: resolveDuration(beat.duration),\n          easing: resolveEasing(beat.easing),\n          delay: beat.delay ?? 0,\n          fill: 'both',\n          iterations: options.iterations ?? 1,\n        }),\n      );\n    });\n  });\n  const finished = Promise.all(animations.map((animation) => animation.finished.catch(ignoreCancel))).then(ignoreCancel);\n  return { finished, cancel: () => animations.forEach((animation) => animation.cancel()) };\n}\n","/** What starts a logo micro-animation bound with `bindMicro`. */\nexport const enum MicroTrigger {\n  Hover = 'hover',\n  Focus = 'focus',\n  Loading = 'loading',\n}\n","import { MicroTrigger } from '../MicroTrigger';\nimport type { BindMicroOptions, LogoPlayback, LogoTimeline } from '../types';\nimport { prefersReducedMotion } from './layers';\nimport { playLogo } from './playLogo';\n\nconst START_EVENT: Record<string, string | undefined> = {\n  [MicroTrigger.Hover]: 'pointerenter',\n  [MicroTrigger.Focus]: 'focusin',\n};\n\nconst STOP_EVENT: Record<string, string | undefined> = {\n  [MicroTrigger.Hover]: 'pointerleave',\n  [MicroTrigger.Focus]: 'focusout',\n};\n\nconst noop = (): void => undefined;\n\n/** Binds a micro-animation to hover, focus or loading; returns the unbind function. */\nexport function bindMicro(\n  svg: Element,\n  timeline: LogoTimeline,\n  trigger: MicroTrigger | `${MicroTrigger}`,\n  options: BindMicroOptions = {},\n): () => void {\n  if (options.reducedMotion ?? prefersReducedMotion()) return noop;\n  let playback: LogoPlayback | undefined;\n  const stop = (): void => {\n    playback?.cancel();\n    playback = undefined;\n  };\n  if (trigger === MicroTrigger.Loading) {\n    playback = playLogo(svg, timeline, { reducedMotion: false, iterations: Infinity });\n    return stop;\n  }\n  const start = (): void => {\n    stop();\n    playback = playLogo(svg, timeline, { reducedMotion: false });\n  };\n  const startEvent = START_EVENT[trigger] ?? '';\n  const stopEvent = STOP_EVENT[trigger] ?? '';\n  svg.addEventListener(startEvent, start);\n  svg.addEventListener(stopEvent, stop);\n  return () => {\n    svg.removeEventListener(startEvent, start);\n    svg.removeEventListener(stopEvent, stop);\n    stop();\n  };\n}\n"]}

package/dist/logo/index.mjs

@@ -0,0 +1,116 @@
+import { DEFAULT_MOTION } from '@dloizides/design-tokens';
+
+// src/logo/constants.ts
+var MOTION_LAYER_ATTRIBUTE = "data-motion-layer";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+var DEFAULT_LOGO_EASING = "standard";
+
+// src/logo/utils/layers.ts
+var FRAME_META_KEYS = /* @__PURE__ */ new Set(["offset", "easing", "composite"]);
+function findLayers(root, layer) {
+  const selector = `[${MOTION_LAYER_ATTRIBUTE}=${JSON.stringify(layer)}]`;
+  const nodes = Array.from(root.querySelectorAll(selector));
+  if (root.matches(selector)) nodes.unshift(root);
+  return nodes.filter((node) => "style" in node);
+}
+function applyFinalFrame(element, keyframes) {
+  const last = keyframes[keyframes.length - 1];
+  if (last === void 0) return;
+  const style = element.style;
+  Object.entries(last).filter(([key, value]) => !FRAME_META_KEYS.has(key) && value !== null && value !== void 0).forEach(([key, value]) => {
+    style[key] = String(value);
+  });
+}
+function supportsWebAnimations(element) {
+  return typeof element.animate === "function";
+}
+function prefersReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function resolveDuration(duration) {
+  if (typeof duration === "number") return duration;
+  const ms = DEFAULT_MOTION.durations[duration];
+  if (ms === void 0) throw new Error(`Unknown motion duration token: ${String(duration)}`);
+  return ms;
+}
+function resolveEasing(easing) {
+  const name = easing ?? DEFAULT_LOGO_EASING;
+  const token = DEFAULT_MOTION.easings[name];
+  if (token === void 0) throw new Error(`Unknown motion easing token: ${String(name)}`);
+  return token.css;
+}
+
+// src/logo/utils/playLogo.ts
+var ignoreCancel = () => void 0;
+function playLogo(svg, timeline, options = {}) {
+  const still = options.reducedMotion ?? prefersReducedMotion();
+  const animations = [];
+  timeline.forEach((beat) => {
+    findLayers(svg, beat.layer).forEach((element) => {
+      if (still || !supportsWebAnimations(element)) {
+        applyFinalFrame(element, beat.keyframes);
+        return;
+      }
+      animations.push(
+        element.animate(beat.keyframes, {
+          duration: resolveDuration(beat.duration),
+          easing: resolveEasing(beat.easing),
+          delay: beat.delay ?? 0,
+          fill: "both",
+          iterations: options.iterations ?? 1
+        })
+      );
+    });
+  });
+  const finished = Promise.all(animations.map((animation) => animation.finished.catch(ignoreCancel))).then(ignoreCancel);
+  return { finished, cancel: () => animations.forEach((animation) => animation.cancel()) };
+}
+
+// src/logo/MicroTrigger.ts
+var MicroTrigger = /* @__PURE__ */ ((MicroTrigger2) => {
+  MicroTrigger2["Hover"] = "hover";
+  MicroTrigger2["Focus"] = "focus";
+  MicroTrigger2["Loading"] = "loading";
+  return MicroTrigger2;
+})(MicroTrigger || {});
+
+// src/logo/utils/bindMicro.ts
+var START_EVENT = {
+  ["hover" /* Hover */]: "pointerenter",
+  ["focus" /* Focus */]: "focusin"
+};
+var STOP_EVENT = {
+  ["hover" /* Hover */]: "pointerleave",
+  ["focus" /* Focus */]: "focusout"
+};
+var noop = () => void 0;
+function bindMicro(svg, timeline, trigger, options = {}) {
+  if (options.reducedMotion ?? prefersReducedMotion()) return noop;
+  let playback;
+  const stop = () => {
+    playback?.cancel();
+    playback = void 0;
+  };
+  if (trigger === "loading" /* Loading */) {
+    playback = playLogo(svg, timeline, { reducedMotion: false, iterations: Infinity });
+    return stop;
+  }
+  const start = () => {
+    stop();
+    playback = playLogo(svg, timeline, { reducedMotion: false });
+  };
+  const startEvent = START_EVENT[trigger] ?? "";
+  const stopEvent = STOP_EVENT[trigger] ?? "";
+  svg.addEventListener(startEvent, start);
+  svg.addEventListener(stopEvent, stop);
+  return () => {
+    svg.removeEventListener(startEvent, start);
+    svg.removeEventListener(stopEvent, stop);
+    stop();
+  };
+}
+
+export { MOTION_LAYER_ATTRIBUTE, MicroTrigger, bindMicro, playLogo, resolveDuration, resolveEasing };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/logo/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/logo/constants.ts","../../src/logo/utils/layers.ts","../../src/logo/utils/resolveTiming.ts","../../src/logo/utils/playLogo.ts","../../src/logo/MicroTrigger.ts","../../src/logo/utils/bindMicro.ts"],"names":["MicroTrigger"],"mappings":"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","file":"index.mjs","sourcesContent":["export const MOTION_LAYER_ATTRIBUTE = 'data-motion-layer';\n\nexport const REDUCED_MOTION_QUERY = '(prefers-reduced-motion: reduce)';\n\nexport const DEFAULT_LOGO_EASING = 'standard';\n","import { MOTION_LAYER_ATTRIBUTE, REDUCED_MOTION_QUERY } from '../constants';\n\nconst FRAME_META_KEYS = new Set(['offset', 'easing', 'composite']);\n\ntype StyledElement = Element & ElementCSSInlineStyle;\n\nexport function findLayers(root: Element, layer: string): StyledElement[] {\n  const selector = `[${MOTION_LAYER_ATTRIBUTE}=${JSON.stringify(layer)}]`;\n  const nodes = Array.from(root.querySelectorAll(selector));\n  if (root.matches(selector)) nodes.unshift(root);\n  return nodes.filter((node): node is StyledElement => 'style' in node);\n}\n\nexport function applyFinalFrame(element: StyledElement, keyframes: Keyframe[]): void {\n  const last = keyframes[keyframes.length - 1];\n  if (last === undefined) return;\n  const style = element.style as unknown as Record<string, string>;\n  Object.entries(last)\n    .filter(([key, value]) => !FRAME_META_KEYS.has(key) && value !== null && value !== undefined)\n    .forEach(([key, value]) => {\n      style[key] = String(value);\n    });\n}\n\nexport function supportsWebAnimations(element: Element): boolean {\n  return typeof element.animate === 'function';\n}\n\nexport function prefersReducedMotion(): boolean {\n  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return false;\n  return window.matchMedia(REDUCED_MOTION_QUERY).matches;\n}\n","import { DEFAULT_MOTION } from '@dloizides/design-tokens';\n\nimport { DEFAULT_LOGO_EASING } from '../constants';\nimport type { LogoDurationToken, LogoEasingToken } from '../types';\n\n/** A duration token (`fast`, `base`, `slow`, `instant`) to ms; a number passes through. */\nexport function resolveDuration(duration: LogoDurationToken | number): number {\n  if (typeof duration === 'number') return duration;\n  const ms = DEFAULT_MOTION.durations[duration] as number | undefined;\n  if (ms === undefined) throw new Error(`Unknown motion duration token: ${String(duration)}`);\n  return ms;\n}\n\n/** An easing token to its css timing function; no token means `standard`. */\nexport function resolveEasing(easing: LogoEasingToken | undefined): string {\n  const name = easing ?? DEFAULT_LOGO_EASING;\n  const token = DEFAULT_MOTION.easings[name] as { css: string } | undefined;\n  if (token === undefined) throw new Error(`Unknown motion easing token: ${String(name)}`);\n  return token.css;\n}\n","import type { LogoPlayback, LogoTimeline, PlayLogoOptions } from '../types';\nimport { applyFinalFrame, findLayers, prefersReducedMotion, supportsWebAnimations } from './layers';\nimport { resolveDuration, resolveEasing } from './resolveTiming';\n\nconst ignoreCancel = (): undefined => undefined;\n\n/** Plays a logo timeline on the mark's `data-motion-layer` nodes via the Web Animations API. */\nexport function playLogo(svg: Element, timeline: LogoTimeline, options: PlayLogoOptions = {}): LogoPlayback {\n  const still = options.reducedMotion ?? prefersReducedMotion();\n  const animations: Animation[] = [];\n  timeline.forEach((beat) => {\n    findLayers(svg, beat.layer).forEach((element) => {\n      if (still || !supportsWebAnimations(element)) {\n        applyFinalFrame(element, beat.keyframes);\n        return;\n      }\n      animations.push(\n        element.animate(beat.keyframes, {\n          duration: resolveDuration(beat.duration),\n          easing: resolveEasing(beat.easing),\n          delay: beat.delay ?? 0,\n          fill: 'both',\n          iterations: options.iterations ?? 1,\n        }),\n      );\n    });\n  });\n  const finished = Promise.all(animations.map((animation) => animation.finished.catch(ignoreCancel))).then(ignoreCancel);\n  return { finished, cancel: () => animations.forEach((animation) => animation.cancel()) };\n}\n","/** What starts a logo micro-animation bound with `bindMicro`. */\nexport const enum MicroTrigger {\n  Hover = 'hover',\n  Focus = 'focus',\n  Loading = 'loading',\n}\n","import { MicroTrigger } from '../MicroTrigger';\nimport type { BindMicroOptions, LogoPlayback, LogoTimeline } from '../types';\nimport { prefersReducedMotion } from './layers';\nimport { playLogo } from './playLogo';\n\nconst START_EVENT: Record<string, string | undefined> = {\n  [MicroTrigger.Hover]: 'pointerenter',\n  [MicroTrigger.Focus]: 'focusin',\n};\n\nconst STOP_EVENT: Record<string, string | undefined> = {\n  [MicroTrigger.Hover]: 'pointerleave',\n  [MicroTrigger.Focus]: 'focusout',\n};\n\nconst noop = (): void => undefined;\n\n/** Binds a micro-animation to hover, focus or loading; returns the unbind function. */\nexport function bindMicro(\n  svg: Element,\n  timeline: LogoTimeline,\n  trigger: MicroTrigger | `${MicroTrigger}`,\n  options: BindMicroOptions = {},\n): () => void {\n  if (options.reducedMotion ?? prefersReducedMotion()) return noop;\n  let playback: LogoPlayback | undefined;\n  const stop = (): void => {\n    playback?.cancel();\n    playback = undefined;\n  };\n  if (trigger === MicroTrigger.Loading) {\n    playback = playLogo(svg, timeline, { reducedMotion: false, iterations: Infinity });\n    return stop;\n  }\n  const start = (): void => {\n    stop();\n    playback = playLogo(svg, timeline, { reducedMotion: false });\n  };\n  const startEvent = START_EVENT[trigger] ?? '';\n  const stopEvent = STOP_EVENT[trigger] ?? '';\n  svg.addEventListener(startEvent, start);\n  svg.addEventListener(stopEvent, stop);\n  return () => {\n    svg.removeEventListener(startEvent, start);\n    svg.removeEventListener(stopEvent, stop);\n    stop();\n  };\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dloizides/ui-motion",
-    "version": "1.2.0",
+    "version": "1.3.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",
@@ -70,6 +70,18 @@
                 "types": "./dist/hairline/web.d.ts",
                 "default": "./dist/hairline/web.js"
             }
+        },
+        "./logo": {
+            "types": "./dist/logo/index.d.ts",
+            "import": {
+                "types": "./dist/logo/index.d.mts",
+                "default": "./dist/logo/index.mjs"
+            },
+            "require": {
+                "types": "./dist/logo/index.d.ts",
+                "default": "./dist/logo/index.js"
+            },
+            "default": "./dist/logo/index.js"
         }
     },
     "files": [
@@ -94,7 +106,7 @@
         "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,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:licenses": "npx license-checker --production --onlyAllow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause;0BSD;Unlicense;CC0-1.0;CC-BY-3.0;CC-BY-4.0;Python-2.0;BlueOak-1.0.0\" && npx license-checker --development --onlyAllow \"MIT;Apache-2.0;ISC;BSD-2-Clause;BSD-3-Clause;0BSD;Unlicense;CC0-1.0;CC-BY-3.0;CC-BY-4.0;Python-2.0;BlueOak-1.0.0;LGPL-3.0;LGPL-3.0-only;LGPL-3.0-or-later\"",
         "deps:health": "npm run deps:outdated && npm run deps:unused",
         "prepublishOnly": "npm run clean && npm run build && npm run test",
         "version": "npm run build",
@@ -137,6 +149,12 @@
         "typescript": "^5.4.0"
     },
     "peerDependenciesMeta": {
+        "react": {
+            "optional": true
+        },
+        "react-native": {
+            "optional": true
+        },
         "react-native-webview": {
             "optional": true
         }