@dloizides/ui-motion 1.2.1 → 1.4.0

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.1",
+    "version": "1.4.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
         }