@orioncactuscorp/ui 1.2.0 → 1.3.0

package/dist/utils/motion.js

@@ -1,28 +1,31 @@
-import { ocSpring as M } from "./spring.js";
-const p = [
+import { ocSpring as A } from "./spring.js";
+const y = [
   "feedback",
   "reject",
-  "reveal",
+  "disclosure",
+  "surface",
+  "sheet",
+  "expand",
   "move",
   "gesture",
   "ambient"
-], k = [
+], w = [
   "change",
   "enter",
   "exit",
-  "settle",
+  "release",
   "loop"
-], E = ["quick", "normal", "slow"], x = [
+], R = ["quick", "normal", "slow"], S = [
   "auto",
   "preserve",
   "fade",
   "static",
   "feedback"
 ], o = {
-  durationScale: 1,
-  durationScaleReduced: 0.75,
-  durationScalePreserve: 1,
-  paceScale: {
+  durationFactor: 1,
+  durationFactorReduced: 0.75,
+  durationFactorPreserve: 1,
+  paceFactor: {
     quick: 0.75,
     normal: 1,
     slow: 1.35
@@ -30,43 +33,72 @@ const p = [
   durationByIntent: {
     feedback: 0.2,
     reject: 0.32,
-    reveal: 0.3,
+    disclosure: 0.2,
+    surface: 0.26,
+    sheet: 0.26,
+    expand: 0.3,
     move: 0.3,
     gesture: 0.2,
     ambient: 1.2
   },
   durationByPhase: {
-    reveal: {
-      exit: 0.125
+    disclosure: {
+      exit: 0.14
+    },
+    surface: {
+      exit: 0.24
+    },
+    sheet: {
+      exit: 0.33,
+      release: 0.33
+    },
+    expand: {
+      exit: 0.24
     },
     gesture: {
-      settle: 0.52
+      release: 0.52
     }
   },
   timingByIntent: {
     feedback: "ease",
     reject: "ease",
-    reveal: "ease",
+    disclosure: "ease",
+    surface: "ease",
+    sheet: "ease",
+    expand: "ease",
     move: "cubic-bezier(0.32, 0.72, 0, 1)",
     gesture: "ease",
     ambient: "linear"
   },
   timingByPhase: {
-    reveal: {
+    disclosure: {
+      exit: "cubic-bezier(0.8, 0, 1, 1)"
+    },
+    surface: {
+      exit: "ease-in"
+    },
+    sheet: {
+      exit: "ease-in",
+      release: "ease"
+    },
+    expand: {
       exit: "ease-in"
     },
     gesture: {
-      settle: "cubic-bezier(0.32, 0.72, 0, 1)"
+      release: "cubic-bezier(0.32, 0.72, 0, 1)"
     }
   }
-}, q = o, A = {
+}, C = o, L = {
   feedback: "feedback",
   reject: "feedback",
-  reveal: "fade",
+  disclosure: "fade",
+  surface: "fade",
+  sheet: "static",
+  expand: "static",
   move: "static",
   gesture: "feedback",
   ambient: "static"
-}, C = /* @__PURE__ */ new Set([
+}, V = /* @__PURE__ */ new Set([
   "opacity",
   "color",
   "background-color",
@@ -75,74 +107,81 @@ const p = [
   "outline-color",
   "fill",
   "stroke"
-]), L = {
-  reveal: { preset: "smooth" },
+]), Y = {
+  disclosure: { preset: "smooth" },
+  surface: { preset: "smooth" },
+  sheet: { preset: "smooth" },
+  expand: { preset: "smooth" },
   move: { preset: "smooth" }
-}, V = {
+}, z = {
   reject: {
     change: { preset: "smooth" },
     enter: { preset: "smooth" }
   },
-  feedback: {
-    settle: { preset: "snappy" }
-  },
   gesture: {
-    settle: { preset: "snappy" }
+    release: { preset: "snappy" }
   },
-  reveal: {
+  disclosure: {
     change: {
       preset: "snappy",
       propertyPreset: { opacity: "smooth", transform: "snappy" },
-      propertyExtraBounce: { transform: 0.1 }
+      propertyExtraBounce: { transform: 0.04 }
     },
     enter: {
       preset: "snappy",
       propertyPreset: { opacity: "smooth", transform: "snappy" },
-      propertyExtraBounce: { transform: 0.1 }
-    }
+      propertyExtraBounce: { transform: 0.04 }
+    },
+    exit: null
   },
   ambient: {
     loop: { preset: "smooth" }
   }
-}, Y = V, U = (t, e) => e.includes(t), m = (t, e, n) => {
-  if (!U(e, n))
+}, U = z, $ = (t, e) => e.includes(t), l = (t, e, r) => {
+  if (!$(e, r))
     throw new Error(`Unknown oc-motion ${t}: ${e}.`);
   return e;
-}, $ = (t) => {
+}, G = (t) => {
   if (!Number.isFinite(t) || t < 0)
-    throw new Error("oc-motion durationScale must be a non-negative number.");
+    throw new Error("oc-motion durationFactor must be a non-negative number.");
   return t;
-}, l = (t, e) => {
-  const n = Number.parseFloat(t.trim());
-  return Number.isFinite(n) ? n : e;
-}, c = (t, e) => {
-  const i = t.trim().match(/^(-?\d*\.?\d+)(ms|s)?$/);
-  if (!i) return e;
-  const a = Number.parseFloat(i[1]);
-  return !Number.isFinite(a) || a < 0 ? e : i[2] === "ms" ? a / 1e3 : a;
-}, r = (t, e) => typeof t?.getPropertyValue == "function" ? t.getPropertyValue(e).trim() : "", h = (t, e) => {
-  const n = { ...t };
-  for (const i of p) {
-    const a = e?.[i];
-    a && (n[i] = {
-      ...t[i],
-      ...a
+}, H = (t) => {
+  if (t !== void 0) {
+    if (!Number.isFinite(t))
+      throw new Error("oc-motion extraBounce must be a finite number.");
+    return t;
+  }
+}, d = (t, e) => {
+  const r = Number.parseFloat(t.trim());
+  return Number.isFinite(r) ? r : e;
+}, i = (t, e) => {
+  const a = t.trim().match(/^(-?\d*\.?\d+)(ms|s)?$/);
+  if (!a) return e;
+  const s = Number.parseFloat(a[1]);
+  return !Number.isFinite(s) || s < 0 ? e : a[2] === "ms" ? s / 1e3 : s;
+}, n = (t, e) => typeof t?.getPropertyValue == "function" ? t.getPropertyValue(e).trim() : "", E = (t, e) => {
+  const r = { ...t };
+  for (const a of y) {
+    const s = e?.[a];
+    s && (r[a] = {
+      ...t[a],
+      ...s
     });
   }
-  return n;
-}, z = (t) => ({
-  durationScale: t?.durationScale ?? o.durationScale,
-  durationScaleReduced: t?.durationScaleReduced ?? o.durationScaleReduced,
-  durationScalePreserve: t?.durationScalePreserve ?? o.durationScalePreserve,
-  paceScale: {
-    ...o.paceScale,
-    ...t?.paceScale
+  return r;
+}, K = (t) => ({
+  durationFactor: t?.durationFactor ?? o.durationFactor,
+  durationFactorReduced: t?.durationFactorReduced ?? o.durationFactorReduced,
+  durationFactorPreserve: t?.durationFactorPreserve ?? o.durationFactorPreserve,
+  paceFactor: {
+    ...o.paceFactor,
+    ...t?.paceFactor
   },
   durationByIntent: {
     ...o.durationByIntent,
     ...t?.durationByIntent
   },
-  durationByPhase: h(
+  durationByPhase: E(
     o.durationByPhase,
     t?.durationByPhase
   ),
@@ -150,194 +189,254 @@ const p = [
     ...o.timingByIntent,
     ...t?.timingByIntent
   },
-  timingByPhase: h(
+  timingByPhase: E(
     o.timingByPhase,
     t?.timingByPhase
   )
 });
-function O(t) {
+function N(t) {
   const e = t && typeof getComputedStyle == "function" ? getComputedStyle(t) : null;
   return {
-    durationScale: l(
-      r(e, "--oc-motion-duration-scale"),
-      o.durationScale
+    durationFactor: d(
+      n(e, "--oc-motion-duration-factor"),
+      o.durationFactor
     ),
-    durationScaleReduced: l(
-      r(e, "--oc-motion-duration-scale-reduced"),
-      o.durationScaleReduced
+    durationFactorReduced: d(
+      n(e, "--oc-motion-duration-factor-reduced"),
+      o.durationFactorReduced
     ),
-    durationScalePreserve: l(
-      r(e, "--oc-motion-duration-scale-preserve"),
-      o.durationScalePreserve
+    durationFactorPreserve: d(
+      n(e, "--oc-motion-duration-factor-preserve"),
+      o.durationFactorPreserve
     ),
-    paceScale: {
-      quick: l(
-        r(e, "--oc-motion-pace-quick"),
-        o.paceScale.quick
+    paceFactor: {
+      quick: d(
+        n(e, "--oc-motion-pace-quick"),
+        o.paceFactor.quick
       ),
-      normal: l(
-        r(e, "--oc-motion-pace-normal"),
-        o.paceScale.normal
+      normal: d(
+        n(e, "--oc-motion-pace-normal"),
+        o.paceFactor.normal
       ),
-      slow: l(
-        r(e, "--oc-motion-pace-slow"),
-        o.paceScale.slow
+      slow: d(
+        n(e, "--oc-motion-pace-slow"),
+        o.paceFactor.slow
       )
     },
     durationByIntent: {
-      feedback: c(
-        r(e, "--oc-motion-duration-feedback"),
+      feedback: i(
+        n(e, "--oc-motion-duration-feedback"),
         o.durationByIntent.feedback
       ),
-      reject: c(
-        r(e, "--oc-motion-duration-reject"),
+      reject: i(
+        n(e, "--oc-motion-duration-reject"),
         o.durationByIntent.reject
       ),
-      reveal: c(
-        r(e, "--oc-motion-duration-reveal"),
-        o.durationByIntent.reveal
+      disclosure: i(
+        n(e, "--oc-motion-duration-disclosure"),
+        o.durationByIntent.disclosure
+      ),
+      surface: i(
+        n(e, "--oc-motion-duration-surface"),
+        o.durationByIntent.surface
+      ),
+      sheet: i(
+        n(e, "--oc-motion-duration-sheet"),
+        o.durationByIntent.sheet
       ),
-      move: c(
-        r(e, "--oc-motion-duration-move"),
+      expand: i(
+        n(e, "--oc-motion-duration-expand"),
+        o.durationByIntent.expand
+      ),
+      move: i(
+        n(e, "--oc-motion-duration-move"),
         o.durationByIntent.move
       ),
-      gesture: c(
-        r(e, "--oc-motion-duration-gesture"),
+      gesture: i(
+        n(e, "--oc-motion-duration-gesture"),
         o.durationByIntent.gesture
       ),
-      ambient: c(
-        r(e, "--oc-motion-duration-ambient"),
+      ambient: i(
+        n(e, "--oc-motion-duration-ambient"),
         o.durationByIntent.ambient
       )
     },
     durationByPhase: {
-      reveal: {
-        exit: c(
-          r(e, "--oc-motion-duration-reveal-exit"),
-          o.durationByPhase.reveal?.exit ?? o.durationByIntent.reveal
+      disclosure: {
+        exit: i(
+          n(e, "--oc-motion-duration-disclosure-exit"),
+          o.durationByPhase.disclosure?.exit ?? o.durationByIntent.disclosure
+        )
+      },
+      surface: {
+        exit: i(
+          n(e, "--oc-motion-duration-surface-exit"),
+          o.durationByPhase.surface?.exit ?? o.durationByIntent.surface
+        )
+      },
+      sheet: {
+        exit: i(
+          n(e, "--oc-motion-duration-sheet-exit"),
+          o.durationByPhase.sheet?.exit ?? o.durationByIntent.sheet
+        ),
+        release: i(
+          n(e, "--oc-motion-duration-sheet-release"),
+          o.durationByPhase.sheet?.release ?? o.durationByIntent.sheet
+        )
+      },
+      expand: {
+        exit: i(
+          n(e, "--oc-motion-duration-expand-exit"),
+          o.durationByPhase.expand?.exit ?? o.durationByIntent.expand
         )
       },
       gesture: {
-        settle: c(
-          r(e, "--oc-motion-duration-gesture-settle"),
-          o.durationByPhase.gesture?.settle ?? o.durationByIntent.gesture
+        release: i(
+          n(e, "--oc-motion-duration-gesture-release"),
+          o.durationByPhase.gesture?.release ?? o.durationByIntent.gesture
         )
       }
     },
     timingByIntent: {
-      feedback: r(e, "--oc-motion-timing-feedback") || o.timingByIntent.feedback,
-      reject: r(e, "--oc-motion-timing-reject") || o.timingByIntent.reject,
-      reveal: r(e, "--oc-motion-timing-reveal") || o.timingByIntent.reveal,
-      move: r(e, "--oc-motion-timing-move") || o.timingByIntent.move,
-      gesture: r(e, "--oc-motion-timing-gesture") || o.timingByIntent.gesture,
-      ambient: r(e, "--oc-motion-timing-ambient") || o.timingByIntent.ambient
+      feedback: n(e, "--oc-motion-timing-feedback") || o.timingByIntent.feedback,
+      reject: n(e, "--oc-motion-timing-reject") || o.timingByIntent.reject,
+      disclosure: n(e, "--oc-motion-timing-disclosure") || o.timingByIntent.disclosure,
+      surface: n(e, "--oc-motion-timing-surface") || o.timingByIntent.surface,
+      sheet: n(e, "--oc-motion-timing-sheet") || o.timingByIntent.sheet,
+      expand: n(e, "--oc-motion-timing-expand") || o.timingByIntent.expand,
+      move: n(e, "--oc-motion-timing-move") || o.timingByIntent.move,
+      gesture: n(e, "--oc-motion-timing-gesture") || o.timingByIntent.gesture,
+      ambient: n(e, "--oc-motion-timing-ambient") || o.timingByIntent.ambient
     },
     timingByPhase: {
-      reveal: {
-        exit: r(e, "--oc-motion-timing-reveal-exit") || o.timingByPhase.reveal?.exit
+      disclosure: {
+        exit: n(e, "--oc-motion-timing-disclosure-exit") || o.timingByPhase.disclosure?.exit
+      },
+      surface: {
+        exit: n(e, "--oc-motion-timing-surface-exit") || o.timingByPhase.surface?.exit
+      },
+      sheet: {
+        exit: n(e, "--oc-motion-timing-sheet-exit") || o.timingByPhase.sheet?.exit,
+        release: n(e, "--oc-motion-timing-sheet-release") || o.timingByPhase.sheet?.release
+      },
+      expand: {
+        exit: n(e, "--oc-motion-timing-expand-exit") || o.timingByPhase.expand?.exit
       },
       gesture: {
-        settle: r(e, "--oc-motion-timing-gesture-settle") || o.timingByPhase.gesture?.settle
+        release: n(e, "--oc-motion-timing-gesture-release") || o.timingByPhase.gesture?.release
       }
     }
   };
 }
-function R(t, e = "auto") {
-  return m("intent", t, p), m("reduced policy", e, x), e === "auto" ? A[t] : e;
+function T(t, e = "auto") {
+  return l("intent", t, y), l("reduced policy", e, S), e === "auto" ? L[t] : e;
 }
-function T(t) {
-  return C.has(t);
+function _(t) {
+  return V.has(t);
 }
-function N({
+function j({
   property: t,
   reducedMotion: e,
-  reducedPolicy: n
+  reducedPolicy: r
 }) {
-  return !e || n === "preserve" ? !0 : n === "static" || t === void 0 ? !1 : T(t);
+  return !e || r === "preserve" ? !0 : r === "static" || t === void 0 ? !1 : _(t);
 }
-const I = (t, e, n, i) => t[e]?.[n] ?? i, G = (t, e, n) => {
-  const a = Y[t]?.[e] ?? L[t];
-  if (a === void 0) return null;
-  const u = n === void 0 ? void 0 : a.propertyExtraBounce?.[n];
+const O = (t, e, r, a) => t[e]?.[r] ?? a, J = (t, e, r, a) => {
+  const s = U[t], m = s !== void 0 && Object.prototype.hasOwnProperty.call(s, e) ? s[e] : void 0;
+  if (m === null) return null;
+  const c = m ?? Y[t];
+  if (c === void 0) return null;
+  const p = r === void 0 ? void 0 : c.propertyExtraBounce?.[r];
   return {
-    preset: (n === void 0 ? void 0 : a.propertyPreset?.[n]) ?? a.preset,
-    extraBounce: u ?? a.extraBounce
+    preset: (r === void 0 ? void 0 : c.propertyPreset?.[r]) ?? c.preset,
+    extraBounce: a ?? p ?? c.extraBounce
   };
 };
-function H({
+function Q({
   intent: t,
   phase: e = "change",
-  pace: n = "normal",
-  durationScale: i = 1,
-  reduced: a = "auto",
-  reducedMotion: u = !1,
-  property: d,
-  element: F,
-  tokens: _
+  pace: r = "normal",
+  durationFactor: a = 1,
+  extraBounce: s,
+  reduced: m = "auto",
+  reducedMotion: c = !1,
+  property: p,
+  element: B,
+  tokens: D
 }) {
-  m("intent", t, p), m("phase", e, k), m("pace", n, E);
-  const v = $(i), s = z(
-    _ ?? O(F)
-  ), g = R(t, a), P = N({
-    property: d,
-    reducedMotion: u,
-    reducedPolicy: g
-  }), B = u && g === "preserve" ? s.durationScalePreserve : u ? s.durationScaleReduced : s.durationScale, S = I(
-    s.durationByPhase,
+  l("intent", t, y), l("phase", e, w), l("pace", r, R);
+  const x = G(a), P = H(s), u = K(
+    D ?? N(B)
+  ), f = T(t, m), b = j({
+    property: p,
+    reducedMotion: c,
+    reducedPolicy: f
+  }), F = c && f === "preserve" ? u.durationFactorPreserve : c ? u.durationFactorReduced : u.durationFactor, I = O(
+    u.durationByPhase,
+    t,
+    e,
+    u.durationByIntent[t]
+  ), v = u.paceFactor[r], g = b ? I * F * v * x : 0, M = O(
+    u.timingByPhase,
     t,
     e,
-    s.durationByIntent[t]
-  ), b = s.paceScale[n], y = P ? S * B * b * v : 0, w = I(
-    s.timingByPhase,
+    u.timingByIntent[t]
+  ), h = J(
     t,
     e,
-    s.timingByIntent[t]
-  ), f = G(t, e, d), j = f !== null, D = y > 0 ? y : S;
+    p,
+    P
+  ), k = h !== null;
+  if (!k && P !== void 0)
+    throw new Error(
+      "oc-motion extraBounce is only supported for spring-backed motion."
+    );
+  const q = g > 0 ? g : I;
   return {
     intent: t,
     phase: e,
-    pace: n,
-    reduced: a,
-    reducedPolicy: g,
-    reducedMotion: u,
-    property: d,
-    durationScale: v,
-    durationScaleToken: B,
-    paceScale: b,
-    durationSeconds: y,
-    timingFunction: w,
-    animate: P,
-    springBacked: j,
-    spring: M[f?.preset ?? "smooth"]({
-      duration: D,
-      extraBounce: f?.extraBounce
+    pace: r,
+    reduced: m,
+    reducedPolicy: f,
+    reducedMotion: c,
+    property: p,
+    durationFactor: x,
+    durationFactorToken: F,
+    paceFactor: v,
+    durationSeconds: g,
+    timingFunction: M,
+    animate: b,
+    springBacked: k,
+    spring: A[h?.preset ?? "smooth"]({
+      duration: q,
+      extraBounce: h?.extraBounce
     })
   };
 }
-const J = {
-  intents: p,
-  phases: k,
-  paces: E,
-  reducedPolicies: x,
-  defaultTokens: q,
-  parseDuration: c,
-  readTokens: O,
-  resolve: H,
-  resolveReducedPolicy: R,
-  isFeedbackSafeProperty: T,
-  shouldAnimateProperty: N
+const X = {
+  intents: y,
+  phases: w,
+  paces: R,
+  reducedPolicies: S,
+  defaultTokens: C,
+  parseDuration: i,
+  readTokens: N,
+  resolve: Q,
+  resolveReducedPolicy: T,
+  isFeedbackSafeProperty: _,
+  shouldAnimateProperty: j
 };
 export {
-  T as isOcMotionFeedbackSafeProperty,
-  J as ocMotion,
-  q as ocMotionDefaultTokens,
-  p as ocMotionIntents,
-  E as ocMotionPaces,
-  k as ocMotionPhases,
-  x as ocMotionReducedPolicies,
-  c as parseOcMotionDuration,
-  O as readOcMotionTokens,
-  H as resolveOcMotion,
-  R as resolveOcMotionReducedPolicy,
-  N as shouldAnimateOcMotionProperty
+  _ as isOcMotionFeedbackSafeProperty,
+  X as ocMotion,
+  C as ocMotionDefaultTokens,
+  y as ocMotionIntents,
+  R as ocMotionPaces,
+  w as ocMotionPhases,
+  S as ocMotionReducedPolicies,
+  i as parseOcMotionDuration,
+  N as readOcMotionTokens,
+  Q as resolveOcMotion,
+  T as resolveOcMotionReducedPolicy,
+  j as shouldAnimateOcMotionProperty
 };