orbital-ds 0.8.0 → 0.9.0

package/dist/lib/motion.d.ts

@@ -0,0 +1,74 @@
+declare const DS_DURATIONS: readonly ["fast", "base", "slow", "snap", "layout", "swipe", "slower"];
+declare const DS_EASES: readonly ["standard", "emphasized", "enter", "exit", "overshoot", "panel", "collapse"];
+type DsDuration = (typeof DS_DURATIONS)[number];
+type DsEase = (typeof DS_EASES)[number];
+type DsEaseValue = [number, number, number, number] | "linear" | "easeIn" | "easeOut" | "easeInOut";
+interface DsTransition {
+    /** segundos (0 con movimiento reducido) */
+    duration: number;
+    /** curva para Motion: 4 números o palabra clave */
+    ease: DsEaseValue;
+    /** la misma curva en CSS, para GSAP, AutoAnimate o la Web Animations API */
+    easeCss: string;
+}
+/** `200ms` / `0.2s` → segundos. */
+declare function parseDuration(raw: string): number;
+/** `cubic-bezier(a, b, c, d)` o una palabra clave CSS → curva de Motion. */
+declare function parseEase(raw: string): DsEaseValue;
+/** Lee la transición del tema en `el` (por defecto, el documento). */
+declare function readDsTransition(duration?: DsDuration, ease?: DsEase, el?: Element): DsTransition;
+interface DsMotion {
+    transition: DsTransition;
+    /** muelle de Motion: rebote del tema y duración visual del ritmo base */
+    spring: {
+        type: "spring";
+        bounce: number;
+        visualDuration: number;
+    };
+    distance: number;
+    scale: number;
+    blur: number;
+    stagger: number;
+    pressScale: number;
+    /** aparece subiendo un poco (y enfocando, si el tema usa desenfoque) */
+    fadeUp: DsPreset;
+    /** aparece creciendo desde la escala del tema (capas, tarjetas) */
+    scaleIn: DsPreset;
+    /** contenedor de una lista: sus hijos entran en cascada con `fadeUp` */
+    list: DsPreset;
+    /** al pulsar y al señalar */
+    press: {
+        whileTap: DsTarget;
+        transition: DsMotion["spring"];
+    };
+}
+/** Transición con la forma que entiende Motion (sin depender de su paquete). */
+interface DsTransitionLike {
+    duration?: number;
+    ease?: DsEaseValue;
+    type?: "spring";
+    bounce?: number;
+    visualDuration?: number;
+    staggerChildren?: number;
+}
+/** Estado animable con la forma de un «target» de Motion. */
+interface DsTarget {
+    opacity?: number;
+    x?: number;
+    y?: number;
+    scale?: number;
+    filter?: string;
+    transition?: DsTransitionLike;
+    /** también variables CSS, como admite Motion */
+    [cssVar: `--${string}`]: string | number;
+}
+interface DsPreset {
+    initial: DsTarget;
+    animate: DsTarget;
+    exit: DsTarget;
+    transition?: DsTransitionLike;
+}
+/** Lee el sistema de movimiento completo del tema activo y genera los presets. */
+declare function readDsMotion(el?: Element): DsMotion;
+
+export { DS_DURATIONS, DS_EASES, type DsDuration, type DsEase, type DsEaseValue, type DsMotion, type DsPreset, type DsTarget, type DsTransition, type DsTransitionLike, parseDuration, parseEase, readDsMotion, readDsTransition };

package/dist/lib/motion.js

@@ -0,0 +1,97 @@
+const DS_DURATIONS = ["fast", "base", "slow", "snap", "layout", "swipe", "slower"];
+const DS_EASES = ["standard", "emphasized", "enter", "exit", "overshoot", "panel", "collapse"];
+const KEYWORDS = {
+  linear: "linear",
+  ease: [0.25, 0.1, 0.25, 1],
+  "ease-in": "easeIn",
+  "ease-out": "easeOut",
+  "ease-in-out": "easeInOut"
+};
+function parseDuration(raw) {
+  const v = raw.trim();
+  const n = parseFloat(v);
+  if (Number.isNaN(n)) return 0;
+  return v.endsWith("ms") ? n / 1e3 : n;
+}
+function parseEase(raw) {
+  const v = raw.trim();
+  const m = v.match(/^cubic-bezier\(([^)]+)\)$/);
+  if (m) {
+    const p = m[1].split(",").map((x) => parseFloat(x));
+    if (p.length === 4 && p.every((x) => !Number.isNaN(x))) return p;
+  }
+  return KEYWORDS[v] ?? "easeOut";
+}
+function prefersReducedMotion() {
+  return typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+}
+function readDsTransition(duration = "base", ease = "standard", el) {
+  if (typeof window === "undefined") return { duration: 0.2, ease: "easeOut", easeCss: "ease-out" };
+  const style = getComputedStyle(el ?? document.documentElement);
+  const d = parseDuration(style.getPropertyValue(`--ds-motion-${duration}`));
+  const easeCss = style.getPropertyValue(`--ds-ease-${ease}`).trim() || "ease-out";
+  return {
+    duration: prefersReducedMotion() ? 0 : d,
+    ease: parseEase(easeCss),
+    easeCss
+  };
+}
+const px = (raw, fallback) => {
+  const n = parseFloat(raw);
+  return Number.isNaN(n) ? fallback : n;
+};
+function readDsMotion(el) {
+  const transition = readDsTransition("base", "enter", el);
+  const exit = readDsTransition("fast", "exit", el);
+  const style = typeof window === "undefined" ? null : getComputedStyle(el ?? document.documentElement);
+  const v = (name) => style?.getPropertyValue(name) ?? "";
+  const reduced = transition.duration === 0;
+  const distance = reduced ? 0 : px(v("--ds-motion-distance"), 8);
+  const scale = reduced ? 1 : px(v("--ds-motion-scale"), 0.96);
+  const blur = reduced ? 0 : px(v("--ds-motion-blur"), 0);
+  const stagger = reduced ? 0 : parseDuration(v("--ds-motion-stagger") || "40ms");
+  const pressScale = reduced ? 1 : px(v("--ds-motion-press-scale"), 0.97);
+  const spring = {
+    type: "spring",
+    bounce: px(v("--ds-spring-bounce"), 0.15),
+    visualDuration: transition.duration
+  };
+  const blurIn = blur ? { filter: `blur(${blur}px)` } : {};
+  const blurOut = blur ? { filter: "blur(0px)" } : {};
+  const fadeUp = {
+    initial: { opacity: 0, y: distance, ...blurIn },
+    animate: { opacity: 1, y: 0, ...blurOut },
+    exit: { opacity: 0, y: distance / 2, transition: { duration: exit.duration, ease: exit.ease } },
+    transition: { duration: transition.duration, ease: transition.ease }
+  };
+  return {
+    transition,
+    spring,
+    distance,
+    scale,
+    blur,
+    stagger,
+    pressScale,
+    fadeUp,
+    scaleIn: {
+      initial: { opacity: 0, scale, ...blurIn },
+      animate: { opacity: 1, scale: 1, ...blurOut },
+      exit: { opacity: 0, scale, transition: { duration: exit.duration, ease: exit.ease } },
+      transition: spring
+    },
+    list: {
+      initial: {},
+      animate: { transition: { staggerChildren: stagger } },
+      exit: {}
+    },
+    press: { whileTap: { scale: pressScale }, transition: spring }
+  };
+}
+export {
+  DS_DURATIONS,
+  DS_EASES,
+  parseDuration,
+  parseEase,
+  readDsMotion,
+  readDsTransition
+};