@solostylist/ui-kit 1.0.166 → 1.0.167

package/dist/s-pixel-reveal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-pixel-reveal';
+export type { SPixelRevealProps } from './s-pixel-reveal';

package/dist/s-pixel-reveal/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-pixel-reveal.js";
+export {
+  o as default
+};

package/dist/s-pixel-reveal/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-pixel-reveal/s-pixel-reveal.d.ts

@@ -0,0 +1,13 @@
+import { default as React } from 'react';
+export interface SPixelRevealProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    gap?: number;
+    speed?: number;
+    colors?: string[];
+    loading?: boolean;
+    src?: string;
+    alt?: string;
+    children?: React.ReactNode;
+    instant?: boolean;
+}
+declare const SPixelReveal: React.ForwardRefExoticComponent<SPixelRevealProps & React.RefAttributes<HTMLDivElement>>;
+export default SPixelReveal;

package/dist/s-pixel-reveal/s-pixel-reveal.js

@@ -0,0 +1,151 @@
+var Q = Object.defineProperty;
+var U = (i, t, n) => t in i ? Q(i, t, { enumerable: !0, configurable: !0, writable: !0, value: n }) : i[t] = n;
+var s = (i, t, n) => U(i, typeof t != "symbol" ? t + "" : t, n);
+import { j as F } from "../jsx-runtime-OVHDjVDe.js";
+import { forwardRef as Z, useRef as u, useCallback as A, useEffect as _ } from "react";
+import { brand as q } from "../theme/theme-primitives.js";
+class ee {
+  constructor(t, n, a, S, M, b, g) {
+    s(this, "x");
+    s(this, "y");
+    s(this, "color");
+    s(this, "speed");
+    s(this, "size");
+    s(this, "sizeStep");
+    s(this, "minSize");
+    s(this, "maxSize");
+    s(this, "delay");
+    s(this, "counter");
+    s(this, "counterStep");
+    s(this, "isReverse");
+    s(this, "isShimmer");
+    this.x = t, this.y = n, this.color = a, this.speed = (Math.random() * 0.8 + 0.1) * S, this.size = 0, this.sizeStep = Math.random() * 0.4, this.minSize = 0.5, this.maxSize = g, this.delay = M, this.counter = 0, this.counterStep = b, this.isReverse = !1, this.isShimmer = !1;
+  }
+  update(t) {
+    return t ? this.counter < this.delay ? (this.counter += this.counterStep, !0) : (this.isShimmer ? this.isReverse ? (this.size -= this.speed, this.size <= this.minSize && (this.size = this.minSize, this.isReverse = !1)) : (this.size += this.speed, this.size >= this.maxSize && (this.size = this.maxSize, this.isReverse = !0)) : this.size < this.maxSize ? this.size += this.sizeStep : this.isShimmer = !0, !0) : (this.isShimmer = !1, this.counter = 0, this.size > 0 ? (this.size -= 0.1, !0) : !1);
+  }
+  draw(t, n) {
+    const a = (n - this.size) * 0.5;
+    t.fillRect(this.x + a, this.y + a, this.size, this.size);
+  }
+}
+const te = Z(
+  ({
+    gap: i = 5,
+    speed: t = 100,
+    colors: n = [q[400], q[500], q[600]],
+    loading: a = !0,
+    src: S,
+    alt: M = "",
+    style: b,
+    children: g,
+    instant: E = !0,
+    ...$
+  }, w) => {
+    const C = u(null), R = u(null), D = u(null), z = u(/* @__PURE__ */ new Map()), l = u(null), k = u(1e3 / 60), I = u(performance.now()), O = u(
+      typeof window < "u" ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : !1
+    ), V = A((e, c, f, h) => {
+      const r = e - f, o = c - h;
+      return r * r + o * o;
+    }, []), X = A(() => {
+      const e = C.current, c = e == null ? void 0 : e.getContext("2d");
+      if (!e || !c) return;
+      z.current = /* @__PURE__ */ new Map();
+      const f = O.current ? 0 : Math.max(0, Math.min(100, t)) * 1e-3, h = window.devicePixelRatio || 1, r = e.width / h, o = e.height / h, p = 2, Y = 0.5, H = (r + o) * 0.01, T = r % i / 2, W = o % i / 2;
+      for (let m = T; m < r; m += i)
+        for (let d = W; d < o; d += i) {
+          const x = n[Math.floor(Math.random() * n.length)];
+          let v = 0;
+          if (!E && !O.current) {
+            const G = m + i / 2, J = d + i / 2, K = r / 2, L = o / 2;
+            v = Math.sqrt(V(G, J, K, L));
+          }
+          const j = Math.random() * 4 + H, y = Math.random() * (p - Y) + Y, N = new ee(m, d, x, f, v, j, y);
+          z.current.has(x) || z.current.set(x, []), z.current.get(x).push(N);
+        }
+      l.current && cancelAnimationFrame(l.current);
+      const B = () => {
+        l.current = requestAnimationFrame(B);
+        const m = performance.now(), d = m - I.current;
+        if (d < k.current) return;
+        I.current = m - d % k.current, c.clearRect(0, 0, r, o);
+        let x = !1;
+        z.current.forEach((v, j) => {
+          c.fillStyle = j;
+          for (const y of v)
+            y.update(a) && (y.draw(c, i), x = !0);
+        }), !a && !x && l.current && (cancelAnimationFrame(l.current), l.current = null);
+      };
+      B();
+    }, [i, t, n, E, a, V]), P = A(() => {
+      const e = C.current, c = R.current, f = e == null ? void 0 : e.getContext("2d");
+      if (!e || !c || !f) return;
+      const h = c.getBoundingClientRect();
+      if (h.width === 0 || h.height === 0) return;
+      const r = Math.floor(h.width), o = Math.floor(h.height), p = window.devicePixelRatio || 1;
+      e.width = r * p, e.height = o * p, e.style.width = `${r}px`, e.style.height = `${o}px`, f.setTransform(1, 0, 0, 1, 0, 0), f.scale(p, p), X();
+    }, [X]);
+    return _(() => {
+      P();
+      const e = new ResizeObserver(() => {
+        requestAnimationFrame(() => P());
+      });
+      return R.current && e.observe(R.current), () => {
+        e.disconnect(), l.current && cancelAnimationFrame(l.current);
+      };
+    }, [P]), /* @__PURE__ */ F.jsxs(
+      "div",
+      {
+        ref: (e) => {
+          R.current = e, typeof w == "function" ? w(e) : w && (w.current = e);
+        },
+        style: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          ...b
+        },
+        ...$,
+        children: [
+          S && /* @__PURE__ */ F.jsx(
+            "img",
+            {
+              ref: D,
+              src: S,
+              alt: M,
+              style: {
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                display: "block"
+              }
+            }
+          ),
+          g,
+          /* @__PURE__ */ F.jsx(
+            "canvas",
+            {
+              ref: C,
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "block",
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none",
+                zIndex: 1
+              }
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+te.displayName = "SPixelReveal";
+export {
+  te as default
+};