@orioncactuscorp/ui 1.0.0

package/dist/utils/motion.js

@@ -0,0 +1,343 @@
+import { ocSpring as M } from "./spring.js";
+const p = [
+  "feedback",
+  "reject",
+  "reveal",
+  "move",
+  "gesture",
+  "ambient"
+], k = [
+  "change",
+  "enter",
+  "exit",
+  "settle",
+  "loop"
+], E = ["quick", "normal", "slow"], x = [
+  "auto",
+  "preserve",
+  "fade",
+  "static",
+  "feedback"
+], o = {
+  durationScale: 1,
+  durationScaleReduced: 0.75,
+  durationScalePreserve: 1,
+  paceScale: {
+    quick: 0.75,
+    normal: 1,
+    slow: 1.35
+  },
+  durationByIntent: {
+    feedback: 0.2,
+    reject: 0.32,
+    reveal: 0.3,
+    move: 0.3,
+    gesture: 0.2,
+    ambient: 1.2
+  },
+  durationByPhase: {
+    reveal: {
+      exit: 0.125
+    },
+    gesture: {
+      settle: 0.52
+    }
+  },
+  timingByIntent: {
+    feedback: "ease",
+    reject: "ease",
+    reveal: "ease",
+    move: "cubic-bezier(0.32, 0.72, 0, 1)",
+    gesture: "ease",
+    ambient: "linear"
+  },
+  timingByPhase: {
+    reveal: {
+      exit: "ease-in"
+    },
+    gesture: {
+      settle: "cubic-bezier(0.32, 0.72, 0, 1)"
+    }
+  }
+}, q = o, A = {
+  feedback: "feedback",
+  reject: "feedback",
+  reveal: "fade",
+  move: "static",
+  gesture: "feedback",
+  ambient: "static"
+}, C = /* @__PURE__ */ new Set([
+  "opacity",
+  "color",
+  "background-color",
+  "border-color",
+  "box-shadow",
+  "outline-color",
+  "fill",
+  "stroke"
+]), L = {
+  reveal: { preset: "smooth" },
+  move: { preset: "smooth" }
+}, V = {
+  reject: {
+    change: { preset: "smooth" },
+    enter: { preset: "smooth" }
+  },
+  feedback: {
+    settle: { preset: "snappy" }
+  },
+  gesture: {
+    settle: { preset: "snappy" }
+  },
+  reveal: {
+    change: {
+      preset: "snappy",
+      propertyPreset: { opacity: "smooth", transform: "snappy" },
+      propertyExtraBounce: { transform: 0.1 }
+    },
+    enter: {
+      preset: "snappy",
+      propertyPreset: { opacity: "smooth", transform: "snappy" },
+      propertyExtraBounce: { transform: 0.1 }
+    }
+  },
+  ambient: {
+    loop: { preset: "smooth" }
+  }
+}, Y = V, U = (t, e) => e.includes(t), m = (t, e, n) => {
+  if (!U(e, n))
+    throw new Error(`Unknown oc-motion ${t}: ${e}.`);
+  return e;
+}, $ = (t) => {
+  if (!Number.isFinite(t) || t < 0)
+    throw new Error("oc-motion durationScale 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
+    });
+  }
+  return n;
+}, z = (t) => ({
+  durationScale: t?.durationScale ?? o.durationScale,
+  durationScaleReduced: t?.durationScaleReduced ?? o.durationScaleReduced,
+  durationScalePreserve: t?.durationScalePreserve ?? o.durationScalePreserve,
+  paceScale: {
+    ...o.paceScale,
+    ...t?.paceScale
+  },
+  durationByIntent: {
+    ...o.durationByIntent,
+    ...t?.durationByIntent
+  },
+  durationByPhase: h(
+    o.durationByPhase,
+    t?.durationByPhase
+  ),
+  timingByIntent: {
+    ...o.timingByIntent,
+    ...t?.timingByIntent
+  },
+  timingByPhase: h(
+    o.timingByPhase,
+    t?.timingByPhase
+  )
+});
+function O(t) {
+  const e = t && typeof getComputedStyle == "function" ? getComputedStyle(t) : null;
+  return {
+    durationScale: l(
+      r(e, "--oc-motion-duration-scale"),
+      o.durationScale
+    ),
+    durationScaleReduced: l(
+      r(e, "--oc-motion-duration-scale-reduced"),
+      o.durationScaleReduced
+    ),
+    durationScalePreserve: l(
+      r(e, "--oc-motion-duration-scale-preserve"),
+      o.durationScalePreserve
+    ),
+    paceScale: {
+      quick: l(
+        r(e, "--oc-motion-pace-quick"),
+        o.paceScale.quick
+      ),
+      normal: l(
+        r(e, "--oc-motion-pace-normal"),
+        o.paceScale.normal
+      ),
+      slow: l(
+        r(e, "--oc-motion-pace-slow"),
+        o.paceScale.slow
+      )
+    },
+    durationByIntent: {
+      feedback: c(
+        r(e, "--oc-motion-duration-feedback"),
+        o.durationByIntent.feedback
+      ),
+      reject: c(
+        r(e, "--oc-motion-duration-reject"),
+        o.durationByIntent.reject
+      ),
+      reveal: c(
+        r(e, "--oc-motion-duration-reveal"),
+        o.durationByIntent.reveal
+      ),
+      move: c(
+        r(e, "--oc-motion-duration-move"),
+        o.durationByIntent.move
+      ),
+      gesture: c(
+        r(e, "--oc-motion-duration-gesture"),
+        o.durationByIntent.gesture
+      ),
+      ambient: c(
+        r(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
+        )
+      },
+      gesture: {
+        settle: c(
+          r(e, "--oc-motion-duration-gesture-settle"),
+          o.durationByPhase.gesture?.settle ?? 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
+    },
+    timingByPhase: {
+      reveal: {
+        exit: r(e, "--oc-motion-timing-reveal-exit") || o.timingByPhase.reveal?.exit
+      },
+      gesture: {
+        settle: r(e, "--oc-motion-timing-gesture-settle") || o.timingByPhase.gesture?.settle
+      }
+    }
+  };
+}
+function R(t, e = "auto") {
+  return m("intent", t, p), m("reduced policy", e, x), e === "auto" ? A[t] : e;
+}
+function T(t) {
+  return C.has(t);
+}
+function N({
+  property: t,
+  reducedMotion: e,
+  reducedPolicy: n
+}) {
+  return !e || n === "preserve" ? !0 : n === "static" || t === void 0 ? !1 : T(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];
+  return {
+    preset: (n === void 0 ? void 0 : a.propertyPreset?.[n]) ?? a.preset,
+    extraBounce: u ?? a.extraBounce
+  };
+};
+function H({
+  intent: t,
+  phase: e = "change",
+  pace: n = "normal",
+  durationScale: i = 1,
+  reduced: a = "auto",
+  reducedMotion: u = !1,
+  property: d,
+  element: F,
+  tokens: _
+}) {
+  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,
+    t,
+    e,
+    s.durationByIntent[t]
+  ), b = s.paceScale[n], y = P ? S * B * b * v : 0, w = I(
+    s.timingByPhase,
+    t,
+    e,
+    s.timingByIntent[t]
+  ), f = G(t, e, d), j = f !== null, D = y > 0 ? y : S;
+  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
+    })
+  };
+}
+const J = {
+  intents: p,
+  phases: k,
+  paces: E,
+  reducedPolicies: x,
+  defaultTokens: q,
+  parseDuration: c,
+  readTokens: O,
+  resolve: H,
+  resolveReducedPolicy: R,
+  isFeedbackSafeProperty: T,
+  shouldAnimateProperty: N
+};
+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
+};

package/dist/utils/spring/animator.js

@@ -0,0 +1,179 @@
+import { DEFAULT_EPSILON as d, DEFAULT_SETTLING_STEP as y, DEFAULT_STABILITY_WINDOW as V, DEFAULT_RUNTIME_BLEND_STEP as S } from "./constants.js";
+import { resolveRuntimeSpring as p, blendRuntimeSprings as A } from "./model.js";
+import { resolveSpringState as B } from "./solver.js";
+import { createValueAdapter as E, createZeroVector as h, cloneVector as T } from "./value.js";
+import { assertPositive as g, assertNonNegative as u, assertFinite as w } from "./validation.js";
+const D = () => {
+  const s = () => typeof performance < "u" && typeof performance.now == "function" ? performance.now() / 1e3 : Date.now() / 1e3;
+  return {
+    now: s,
+    request: (t) => typeof requestAnimationFrame == "function" ? requestAnimationFrame((e) => t(e / 1e3)) : setTimeout(() => t(s()), 1e3 / 60),
+    cancel: (t) => {
+      typeof cancelAnimationFrame == "function" ? cancelAnimationFrame(t) : clearTimeout(t);
+    }
+  };
+};
+class b {
+  adapter;
+  scheduler;
+  onUpdate;
+  onComplete;
+  epsilon;
+  velocityEpsilon;
+  stabilityWindow;
+  defaultBlendDuration;
+  currentValue;
+  currentVelocity;
+  targetValue;
+  spring;
+  springBlend = null;
+  frameHandle = null;
+  running = !1;
+  lastTime;
+  restStartedAt = null;
+  constructor(t) {
+    this.adapter = E(t.value), this.scheduler = t.scheduler ?? D(), this.onUpdate = t.onUpdate, this.onComplete = t.onComplete, this.currentValue = this.adapter.toVector(t.value, "value"), this.targetValue = this.adapter.toVector(
+      t.target ?? t.value,
+      "target"
+    ), this.currentVelocity = t.velocity === void 0 ? h(this.adapter.dimension) : this.adapter.toVector(t.velocity, "velocity"), this.spring = p(t.spring), this.epsilon = t.epsilon ?? d, this.velocityEpsilon = t.velocityEpsilon ?? d / y, this.stabilityWindow = t.stabilityWindow ?? V, this.defaultBlendDuration = t.blendDuration ?? 0, this.lastTime = this.scheduler.now(), g("epsilon", this.epsilon), g("velocityEpsilon", this.velocityEpsilon), u("stabilityWindow", this.stabilityWindow), u("blendDuration", this.defaultBlendDuration), t.autoplay !== !1 && !this.isAtRest() && this.start();
+  }
+  get value() {
+    return this.adapter.fromVector(this.currentValue);
+  }
+  get target() {
+    return this.adapter.fromVector(this.targetValue);
+  }
+  get velocity() {
+    return this.adapter.fromVector(this.currentVelocity);
+  }
+  get isRunning() {
+    return this.running;
+  }
+  start = () => {
+    this.running || this.isAtRest() || (this.running = !0, this.lastTime = this.scheduler.now(), this.requestNextFrame());
+  };
+  stop = () => {
+    this.running = !1, this.frameHandle !== null && (this.scheduler.cancel(this.frameHandle), this.frameHandle = null);
+  };
+  destroy = () => {
+    this.stop();
+  };
+  sample = (t = this.scheduler.now()) => {
+    w("time", t), t > this.lastTime && (this.advance(t), this.lastTime = t);
+    const e = this.resolveRest(t);
+    return this.createFrame(t, e);
+  };
+  setTarget = (t, e = {}) => {
+    const r = this.scheduler.now();
+    this.sample(r), this.targetValue = this.adapter.toVector(t, "target"), e.velocity !== void 0 && (this.currentVelocity = this.adapter.toVector(
+      e.velocity,
+      "velocity"
+    )), e.spring !== void 0 && this.setRuntimeSpring(e.spring, r, e.blendDuration), this.restStartedAt = null, e.start !== !1 && this.start();
+  };
+  setSpring = (t, e = {}) => {
+    const r = this.scheduler.now();
+    this.sample(r), this.setRuntimeSpring(t, r, e.blendDuration), this.restStartedAt = null, e.start !== !1 && this.start();
+  };
+  jumpTo = (t, e = {}) => {
+    this.stop(), this.currentValue = this.adapter.toVector(t, "value"), this.targetValue = this.adapter.toVector(e.target ?? t, "target"), this.currentVelocity = e.velocity === void 0 ? h(this.adapter.dimension) : this.adapter.toVector(e.velocity, "velocity"), this.lastTime = this.scheduler.now(), this.restStartedAt = null, e.start !== !1 && this.start();
+  };
+  requestNextFrame() {
+    this.frameHandle = this.scheduler.request((t) => {
+      if (this.frameHandle = null, !this.running)
+        return;
+      const e = this.sample(t);
+      if (e.settled && (this.running = !1), this.onUpdate(e.value, e), e.settled) {
+        this.onComplete?.(e.value, e);
+        return;
+      }
+      this.running && this.requestNextFrame();
+    });
+  }
+  advance(t) {
+    let e = this.lastTime;
+    for (; e < t; ) {
+      const r = this.resolveAdvanceSegmentEnd(
+        e,
+        t
+      ), i = this.resolveStepCount(e, r);
+      this.advanceSegment(e, r, i), e = r;
+    }
+  }
+  advanceSegment(t, e, r) {
+    const i = e - t;
+    let o = t;
+    for (let n = 1; n <= r; n += 1) {
+      const a = t + i * n / r, f = a - o, m = this.resolveEffectiveSpring(a);
+      this.currentValue = this.currentValue.map((v, l) => {
+        const c = B(
+          f,
+          m.parameters,
+          v,
+          this.targetValue[l],
+          this.currentVelocity[l]
+        );
+        return this.currentVelocity[l] = c.velocity, c.value;
+      }), o = a;
+    }
+  }
+  resolveAdvanceSegmentEnd(t, e) {
+    if (this.springBlend === null)
+      return e;
+    const r = this.springBlend.startedAt + this.springBlend.duration;
+    return t < r && e > r ? r : e;
+  }
+  resolveStepCount(t, e) {
+    if (this.springBlend === null)
+      return 1;
+    const r = this.springBlend.startedAt + this.springBlend.duration;
+    if (t >= r || e <= this.springBlend.startedAt)
+      return 1;
+    const i = Math.min(e, r) - Math.max(t, this.springBlend.startedAt);
+    return Math.max(1, Math.ceil(i / S));
+  }
+  resolveEffectiveSpring(t) {
+    if (this.springBlend === null)
+      return this.spring;
+    const e = this.springBlend.startedAt + this.springBlend.duration;
+    return t >= e ? (this.spring = this.springBlend.to, this.springBlend = null, this.spring) : A(
+      this.springBlend.from,
+      this.springBlend.to,
+      (t - this.springBlend.startedAt) / this.springBlend.duration
+    );
+  }
+  setRuntimeSpring(t, e, r = this.defaultBlendDuration) {
+    u("blendDuration", r);
+    const i = p(t);
+    if (r === 0) {
+      this.spring = i, this.springBlend = null;
+      return;
+    }
+    this.springBlend = {
+      from: this.resolveEffectiveSpring(e),
+      to: i,
+      startedAt: e,
+      duration: r
+    };
+  }
+  isAtRest() {
+    return this.currentValue.every(
+      (t, e) => Math.abs(t - this.targetValue[e]) < this.epsilon && Math.abs(this.currentVelocity[e]) < this.velocityEpsilon
+    );
+  }
+  resolveRest(t) {
+    return this.isAtRest() ? (this.restStartedAt ??= t, t - this.restStartedAt < this.stabilityWindow ? !1 : (this.currentValue = T(this.targetValue), this.currentVelocity = h(this.adapter.dimension), !0)) : (this.restStartedAt = null, !1);
+  }
+  createFrame(t, e) {
+    return {
+      value: this.value,
+      velocity: this.velocity,
+      target: this.target,
+      time: t,
+      settled: e
+    };
+  }
+}
+const W = (s) => new b(s);
+export {
+  W as createSpringAnimator
+};

package/dist/utils/spring/constants.js

@@ -0,0 +1,15 @@
+const E = {
+  smooth: 0,
+  snappy: 0.15,
+  bouncy: 0.3
+}, T = 1e-4, _ = 0.1, A = 1e-3, L = 20, o = 64, S = 240, n = 1 / 60;
+export {
+  T as DEFAULT_EPSILON,
+  L as DEFAULT_MAX_DURATION,
+  S as DEFAULT_MAX_SAMPLES,
+  n as DEFAULT_RUNTIME_BLEND_STEP,
+  o as DEFAULT_SAMPLES_PER_RESPONSE,
+  A as DEFAULT_SETTLING_STEP,
+  _ as DEFAULT_STABILITY_WINDOW,
+  E as PRESET_BOUNCE
+};

package/dist/utils/spring/format.js

@@ -0,0 +1,10 @@
+const n = (o, t) => {
+  const r = Number(o.toFixed(t));
+  return Object.is(r, -0) ? 0 : r;
+}, e = (o, t) => String(n(o, t)), s = (o) => `${e(o, 4)}s`, c = (o) => typeof o == "number" ? s(o) : o;
+export {
+  c as formatDelay,
+  e as formatNumber,
+  s as formatSeconds,
+  n as round
+};

package/dist/utils/spring/model.js

@@ -0,0 +1,120 @@
+import { PRESET_BOUNCE as m } from "./constants.js";
+import { assertPositive as c, assertFinite as p, validateBounce as D } from "./validation.js";
+const f = (e) => e > 0 ? 1 - e : 1 / (e + 1), l = (e, t) => {
+  c("duration", e), D(t);
+  const a = 1, n = 4 * Math.PI * Math.PI * a / (e * e), i = f(t) * 2 * Math.sqrt(a * n);
+  return { mass: a, stiffness: n, damping: i };
+}, v = ({
+  mass: e,
+  stiffness: t,
+  damping: a
+}) => a / (2 * Math.sqrt(t * e)), M = ({
+  mass: e,
+  stiffness: t
+}) => 2 * Math.PI / Math.sqrt(t / e), u = ({
+  parameters: e,
+  initialVelocity: t,
+  bounce: a,
+  perceptualDuration: n
+}) => (c("mass", e.mass), c("stiffness", e.stiffness), c("damping", e.damping), p("initialVelocity", t), {
+  parameters: e,
+  initialVelocity: t,
+  bounce: a,
+  perceptualDuration: n,
+  response: M(e),
+  dampingRatio: v(e)
+}), d = (e, t, a) => u({
+  parameters: l(e, t),
+  initialVelocity: a,
+  bounce: t,
+  perceptualDuration: e
+}), g = (e, t) => {
+  const a = t.extraBounce ?? 0;
+  return p("extraBounce", a), d(
+    t.duration,
+    m[e] + a,
+    t.initialVelocity ?? 0
+  );
+}, b = (e) => d(
+  e.duration,
+  e.bounce,
+  e.initialVelocity ?? 0
+), R = (e) => u({
+  parameters: {
+    mass: e.mass,
+    stiffness: e.stiffness,
+    damping: e.damping
+  },
+  initialVelocity: e.initialVelocity ?? 0
+}), h = (e) => "settlingDurationSeconds" in e && typeof e.transition == "function", r = ({
+  parameters: e,
+  bounce: t,
+  perceptualDuration: a
+}) => ({
+  parameters: e,
+  bounce: t,
+  perceptualDuration: a
+}), x = (e) => h(e) ? r(
+  u({
+    parameters: {
+      mass: e.mass,
+      stiffness: e.stiffness,
+      damping: e.damping
+    },
+    initialVelocity: 0,
+    bounce: e.bounce,
+    perceptualDuration: e.perceptualDurationSeconds
+  })
+) : "preset" in e ? r(g(e.preset, e)) : "mass" in e ? r(R(e)) : r(b(e)), s = (e, t, a) => e + (t - e) * a, P = (e, t, a) => Math.min(a, Math.max(t, e)), B = (e, t, a) => {
+  const n = P(a, 0, 1);
+  if (e.perceptualDuration !== void 0 && e.bounce !== void 0 && t.perceptualDuration !== void 0 && t.bounce !== void 0) {
+    const o = s(
+      e.perceptualDuration,
+      t.perceptualDuration,
+      n
+    ), i = s(e.bounce, t.bounce, n);
+    return {
+      parameters: l(o, i),
+      perceptualDuration: o,
+      bounce: i
+    };
+  }
+  return {
+    parameters: {
+      mass: s(
+        e.parameters.mass,
+        t.parameters.mass,
+        n
+      ),
+      stiffness: s(
+        e.parameters.stiffness,
+        t.parameters.stiffness,
+        n
+      ),
+      damping: s(
+        e.parameters.damping,
+        t.parameters.damping,
+        n
+      )
+    },
+    perceptualDuration: e.perceptualDuration !== void 0 && t.perceptualDuration !== void 0 ? s(
+      e.perceptualDuration,
+      t.perceptualDuration,
+      n
+    ) : void 0,
+    bounce: e.bounce !== void 0 && t.bounce !== void 0 ? s(e.bounce, t.bounce, n) : void 0
+  };
+};
+export {
+  B as blendRuntimeSprings,
+  d as createDurationModel,
+  u as createModel,
+  R as createPhysicalModel,
+  g as createPresetModel,
+  b as createSpringModel,
+  v as getDampingRatio,
+  M as getNaturalResponseDuration,
+  x as resolveRuntimeSpring,
+  f as toDampingRatio,
+  l as toDurationParameters
+};