sibujs 1.2.0 → 1.4.0

package/dist/chunk-KQPDEVVS.js

@@ -0,0 +1,398 @@
+import {
+  signal
+} from "./chunk-WZSPOOER.js";
+
+// src/ui/transition.ts
+function transition(element, options = {}) {
+  const {
+    property = "all",
+    duration = 300,
+    easing = "ease",
+    delay = 0,
+    enterClass,
+    leaveClass,
+    activeClass,
+    onEnterDone,
+    onLeaveDone
+  } = options;
+  const transitionValue = `${property} ${duration}ms ${easing} ${delay}ms`;
+  function enter() {
+    return new Promise((resolve) => {
+      element.style.transition = transitionValue;
+      if (enterClass) element.classList.add(enterClass);
+      if (leaveClass) element.classList.remove(leaveClass);
+      void element.offsetHeight;
+      if (activeClass) element.classList.add(activeClass);
+      const done = () => {
+        if (enterClass) element.classList.remove(enterClass);
+        onEnterDone?.();
+        resolve();
+      };
+      if (duration > 0) {
+        setTimeout(done, duration + delay);
+      } else {
+        done();
+      }
+    });
+  }
+  function leave() {
+    return new Promise((resolve) => {
+      element.style.transition = transitionValue;
+      if (activeClass) element.classList.remove(activeClass);
+      if (leaveClass) element.classList.add(leaveClass);
+      if (enterClass) element.classList.remove(enterClass);
+      const done = () => {
+        if (leaveClass) element.classList.remove(leaveClass);
+        onLeaveDone?.();
+        resolve();
+      };
+      if (duration > 0) {
+        setTimeout(done, duration + delay);
+      } else {
+        done();
+      }
+    });
+  }
+  return { enter, leave };
+}
+function spring(element, keyframes, options = {}) {
+  const defaults = {
+    duration: 300,
+    easing: "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    fill: "forwards"
+  };
+  return new Promise((resolve) => {
+    const animation = element.animate(keyframes, { ...defaults, ...options });
+    animation.onfinish = () => resolve();
+    animation.oncancel = () => resolve();
+  });
+}
+
+// src/ui/animationPresets.ts
+var prefersReducedMotion = () => typeof window !== "undefined" && window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function createPreset(keyframes, defaults, overrides) {
+  const opts = {
+    ...defaults,
+    ...overrides,
+    fill: overrides?.fill ?? defaults.fill ?? "forwards"
+  };
+  if (prefersReducedMotion()) {
+    return {
+      keyframes: [keyframes[keyframes.length - 1]],
+      options: { ...opts, duration: 0, delay: 0 }
+    };
+  }
+  return { keyframes, options: opts };
+}
+function applyPreset(el, preset) {
+  return new Promise((resolve) => {
+    const anim = el.animate(preset.keyframes, preset.options);
+    anim.onfinish = () => resolve();
+    anim.oncancel = () => resolve();
+  });
+}
+function fadeIn(opts) {
+  return createPreset([{ opacity: 0 }, { opacity: 1 }], { duration: 300, easing: "ease-out" }, opts);
+}
+function fadeOut(opts) {
+  return createPreset([{ opacity: 1 }, { opacity: 0 }], { duration: 300, easing: "ease-in" }, opts);
+}
+var slideOffsets = {
+  up: "translateY(20px)",
+  down: "translateY(-20px)",
+  left: "translateX(20px)",
+  right: "translateX(-20px)"
+};
+function slideIn(direction = "up", opts) {
+  return createPreset(
+    [
+      { transform: slideOffsets[direction], opacity: 0 },
+      { transform: "translate(0, 0)", opacity: 1 }
+    ],
+    { duration: 400, easing: "cubic-bezier(0.16, 1, 0.3, 1)" },
+    opts
+  );
+}
+function slideOut(direction = "down", opts) {
+  return createPreset(
+    [
+      { transform: "translate(0, 0)", opacity: 1 },
+      { transform: slideOffsets[direction], opacity: 0 }
+    ],
+    { duration: 300, easing: "cubic-bezier(0.4, 0, 1, 1)" },
+    opts
+  );
+}
+function scaleUp(opts) {
+  return createPreset(
+    [
+      { transform: "scale(0.85)", opacity: 0 },
+      { transform: "scale(1)", opacity: 1 }
+    ],
+    { duration: 350, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    opts
+  );
+}
+function scaleDown(opts) {
+  return createPreset(
+    [
+      { transform: "scale(1)", opacity: 1 },
+      { transform: "scale(0.85)", opacity: 0 }
+    ],
+    { duration: 250, easing: "ease-in" },
+    opts
+  );
+}
+function bounceIn(opts) {
+  return createPreset(
+    [
+      { transform: "scale(0.3)", opacity: 0 },
+      { transform: "scale(1.05)", opacity: 0.8, offset: 0.5 },
+      { transform: "scale(0.95)", opacity: 0.9, offset: 0.7 },
+      { transform: "scale(1)", opacity: 1 }
+    ],
+    { duration: 500, easing: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
+    opts
+  );
+}
+function bounceOut(opts) {
+  return createPreset(
+    [
+      { transform: "scale(1)", opacity: 1 },
+      { transform: "scale(1.05)", opacity: 0.9, offset: 0.3 },
+      { transform: "scale(0.3)", opacity: 0 }
+    ],
+    { duration: 400, easing: "ease-in" },
+    opts
+  );
+}
+function flipIn(axis = "x", opts) {
+  const prop = axis === "x" ? "rotateX" : "rotateY";
+  return createPreset(
+    [
+      { transform: `perspective(400px) ${prop}(90deg)`, opacity: 0 },
+      { transform: `perspective(400px) ${prop}(-10deg)`, opacity: 1, offset: 0.6 },
+      { transform: `perspective(400px) ${prop}(0deg)`, opacity: 1 }
+    ],
+    { duration: 500, easing: "ease-out" },
+    opts
+  );
+}
+function shake(opts) {
+  return createPreset(
+    [
+      { transform: "translateX(0)" },
+      { transform: "translateX(-8px)", offset: 0.1 },
+      { transform: "translateX(8px)", offset: 0.2 },
+      { transform: "translateX(-6px)", offset: 0.3 },
+      { transform: "translateX(6px)", offset: 0.4 },
+      { transform: "translateX(-4px)", offset: 0.5 },
+      { transform: "translateX(4px)", offset: 0.6 },
+      { transform: "translateX(-2px)", offset: 0.7 },
+      { transform: "translateX(0)" }
+    ],
+    { duration: 500, easing: "ease-out", fill: "none" },
+    opts
+  );
+}
+function pulse(opts) {
+  return createPreset(
+    [{ transform: "scale(1)" }, { transform: "scale(1.08)", offset: 0.5 }, { transform: "scale(1)" }],
+    { duration: 400, easing: "ease-in-out", fill: "none" },
+    opts
+  );
+}
+function animate(el, preset) {
+  return applyPreset(el, preset);
+}
+function stagger(elements, preset, delayBetween = 50) {
+  const promises = elements.map(
+    (el, i) => applyPreset(el, {
+      keyframes: preset.keyframes,
+      options: {
+        ...preset.options,
+        delay: (preset.options.delay || 0) + i * delayBetween
+      }
+    })
+  );
+  return Promise.all(promises).then(() => {
+  });
+}
+async function sequence(steps) {
+  for (const step of steps) {
+    await applyPreset(step.el, step.preset);
+  }
+}
+
+// src/ui/TransitionGroup.ts
+function TransitionGroup(options) {
+  const [elements, setElements] = signal([]);
+  const positions = /* @__PURE__ */ new Map();
+  function add(el) {
+    setElements((prev) => [...prev, el]);
+    if (options.enter) {
+      options.enter(el);
+    }
+  }
+  async function remove(el) {
+    if (options.leave) {
+      await options.leave(el);
+    }
+    setElements((prev) => prev.filter((e) => e !== el));
+  }
+  function track(newElements) {
+    const oldPositions = /* @__PURE__ */ new Map();
+    for (const el of elements()) {
+      if (typeof el.getBoundingClientRect === "function") {
+        oldPositions.set(el, el.getBoundingClientRect());
+      }
+    }
+    const currentSet = new Set(elements());
+    for (const el of newElements) {
+      if (!currentSet.has(el)) {
+        if (options.enter) {
+          options.enter(el);
+        }
+      }
+    }
+    const newSet = new Set(newElements);
+    for (const el of elements()) {
+      if (!newSet.has(el)) {
+        if (options.leave) {
+          options.leave(el);
+        }
+      }
+    }
+    setElements(newElements);
+    if (options.move) {
+      for (const el of newElements) {
+        const oldRect = oldPositions.get(el);
+        if (oldRect && typeof el.getBoundingClientRect === "function") {
+          const newRect = el.getBoundingClientRect();
+          if (oldRect.left !== newRect.left || oldRect.top !== newRect.top) {
+            options.move(el);
+          }
+        }
+      }
+    }
+    positions.clear();
+    for (const el of newElements) {
+      if (typeof el.getBoundingClientRect === "function") {
+        positions.set(el, el.getBoundingClientRect());
+      }
+    }
+  }
+  return { add, remove, track };
+}
+
+// src/ui/viewTransition.ts
+function viewTransition(callback) {
+  const [isTransitioning, setIsTransitioning] = signal(false);
+  async function start() {
+    setIsTransitioning(true);
+    try {
+      if (typeof document !== "undefined" && "startViewTransition" in document && typeof document.startViewTransition === "function") {
+        const transition2 = document.startViewTransition(callback);
+        await transition2.finished;
+      } else {
+        await callback();
+      }
+    } finally {
+      setIsTransitioning(false);
+    }
+  }
+  return { start, isTransitioning };
+}
+
+// src/ui/reducedMotion.ts
+function reducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    const [reduced2] = signal(false);
+    return { reduced: reduced2, dispose: () => {
+    } };
+  }
+  const mql = window.matchMedia("(prefers-reduced-motion: reduce)");
+  const [reduced, setReduced] = signal(mql.matches);
+  const handler = (event) => {
+    setReduced(event.matches);
+  };
+  mql.addEventListener("change", handler);
+  function dispose() {
+    mql.removeEventListener("change", handler);
+  }
+  return { reduced, dispose };
+}
+
+// src/ui/springSignal.ts
+var prefersReducedMotion2 = () => typeof window !== "undefined" && !!window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+function springSignal(initial, options) {
+  const stiffness = options?.stiffness ?? 0.15;
+  const damping = options?.damping ?? 0.8;
+  const precision = options?.precision ?? 0.01;
+  const [value, setValue] = signal(initial);
+  let current = initial;
+  let velocity = 0;
+  let target = initial;
+  let rafId = null;
+  function tick() {
+    const force = -stiffness * (current - target);
+    const dampingForce = -damping * velocity;
+    velocity += force + dampingForce;
+    current += velocity;
+    if (Math.abs(current - target) < precision && Math.abs(velocity) < precision) {
+      current = target;
+      velocity = 0;
+      rafId = null;
+      setValue(current);
+      return;
+    }
+    setValue(current);
+    rafId = requestAnimationFrame(tick);
+  }
+  function set(newTarget) {
+    target = newTarget;
+    if (prefersReducedMotion2()) {
+      current = newTarget;
+      velocity = 0;
+      if (rafId !== null) {
+        cancelAnimationFrame(rafId);
+        rafId = null;
+      }
+      setValue(current);
+      return;
+    }
+    if (rafId === null) {
+      rafId = requestAnimationFrame(tick);
+    }
+  }
+  function dispose() {
+    if (rafId !== null) {
+      cancelAnimationFrame(rafId);
+      rafId = null;
+    }
+  }
+  return [value, set, dispose];
+}
+
+export {
+  transition,
+  spring,
+  fadeIn,
+  fadeOut,
+  slideIn,
+  slideOut,
+  scaleUp,
+  scaleDown,
+  bounceIn,
+  bounceOut,
+  flipIn,
+  shake,
+  pulse,
+  animate,
+  stagger,
+  sequence,
+  TransitionGroup,
+  viewTransition,
+  reducedMotion,
+  springSignal
+};