@levo-so/studio 0.1.6 → 0.1.8

package/dist/{Beams-sX-ed8H5.js → Beams-B2rZmhLI.js}

@@ -1,16 +1,15 @@
 "use client";
-import { jsx as C, jsxs as e } from "react/jsx-runtime";
-import i from "react";
-import { cn as f } from "@levo-so/react";
-import { m as c } from "./index-DXb2tXBX.js";
-const h = i.memo(
+import { jsx as C, jsxs as a } from "react/jsx-runtime";
+import r from "react";
+import { m as c } from "./index-2NFcpkxw.js";
+const h = r.memo(
   ({
-    className: a,
+    className: o,
     primaryColor: t = "#00ff00",
     secondaryColor: n = "#ff0000",
     lineColor: l = "#121212"
   }) => {
-    const o = i.useMemo(
+    const e = r.useMemo(
       () => [
         "M-380 -189C-380 -189 -312 216 152 343C616 470 684 875 684 875",
         "M-373 -197C-373 -197 -305 208 159 335C623 462 691 867 691 867",
@@ -64,26 +63,40 @@ const h = i.memo(
         "M-37 -581C-37 -581 31 -176 495 -49C959 78 1027 483 1027 483"
       ],
       []
-    ), s = i.useMemo(
-      () => o.map((r, M) => ({
+    ), s = r.useMemo(
+      () => e.map((i, M) => ({
         duration: Math.random() * 10 + 10,
         delay: Math.random() * 10,
         endY: `${93 + Math.random() * 8}%`
       })),
-      [o]
+      [e]
     );
     return /* @__PURE__ */ C(
       "div",
       {
-        className: f(
-          "absolute inset-0 flex h-full w-full items-center justify-center [mask-repeat:no-repeat] [mask-size:40px]",
-          "z-[-1]",
-          a
-        ),
-        children: /* @__PURE__ */ e(
+        className: o,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          maskRepeat: "no-repeat",
+          maskSize: "40px",
+          zIndex: -1
+        },
+        children: /* @__PURE__ */ a(
           "svg",
           {
-            className: "pointer-events-none absolute z-0 h-full w-full",
+            style: {
+              pointerEvents: "none",
+              position: "absolute",
+              zIndex: 0,
+              height: "100%",
+              width: "100%"
+            },
             width: "100%",
             height: "100%",
             viewBox: "0 0 696 316",
@@ -99,20 +112,20 @@ const h = i.memo(
                   strokeWidth: "0.5"
                 }
               ),
-              o.map((r, M) => /* @__PURE__ */ C(
+              e.map((i, M) => /* @__PURE__ */ C(
                 c.path,
                 {
-                  d: r,
+                  d: i,
                   stroke: `url(#linearGradient-${M})`,
                   strokeOpacity: "0.4",
                   strokeWidth: "0.5"
                 },
                 "path-" + M
               )),
-              /* @__PURE__ */ e("defs", { children: [
-                o.map((r, M) => {
-                  var p, d, m;
-                  return /* @__PURE__ */ e(
+              /* @__PURE__ */ a("defs", { children: [
+                e.map((i, M) => {
+                  var d, p, m;
+                  return /* @__PURE__ */ a(
                     c.linearGradient,
                     {
                       id: `linearGradient-${M}`,
@@ -126,10 +139,10 @@ const h = i.memo(
                         x1: ["0%", "100%"],
                         x2: ["0%", "95%"],
                         y1: ["0%", "100%"],
-                        y2: ["0%", ((p = s[M]) == null ? void 0 : p.endY) || "100%"]
+                        y2: ["0%", ((d = s[M]) == null ? void 0 : d.endY) || "100%"]
                       },
                       transition: {
-                        duration: ((d = s[M]) == null ? void 0 : d.duration) || 15,
+                        duration: ((p = s[M]) == null ? void 0 : p.duration) || 15,
                         ease: "easeInOut",
                         repeat: 1 / 0,
                         delay: ((m = s[M]) == null ? void 0 : m.delay) || 0
@@ -151,7 +164,7 @@ const h = i.memo(
                     `gradient-${M}`
                   );
                 }),
-                /* @__PURE__ */ e(
+                /* @__PURE__ */ a(
                   "radialGradient",
                   {
                     id: "paint0_radial_242_278",
@@ -175,7 +188,7 @@ const h = i.memo(
     );
   },
   // Custom comparison function for better memoization
-  (a, t) => a.className === t.className && a.primaryColor === t.primaryColor && a.secondaryColor === t.secondaryColor && a.lineColor === t.lineColor
+  (o, t) => o.className === t.className && o.primaryColor === t.primaryColor && o.secondaryColor === t.secondaryColor && o.lineColor === t.lineColor
 );
 h.displayName = "BackgroundBeams";
 export {

package/dist/Dots-OyX1E9Ts.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx as l, jsxs as w } from "react/jsx-runtime";
+import h from "react";
+import { m as x } from "./index-2NFcpkxw.js";
+const g = h.memo(
+  ({
+    className: i,
+    dotColor: n = "#00ff00",
+    dotSize: o = 2,
+    spacing: e = 30,
+    isAnimated: d = !1,
+    speed: m = 1
+  }) => {
+    const a = h.useMemo(
+      () => ({
+        cx: e / 2,
+        cy: e / 2,
+        r: o,
+        width: e,
+        height: e
+      }),
+      [e, o]
+    ), c = h.useMemo(
+      () => `dots-pattern-${Math.random().toString(36).substring(2, 11)}`,
+      []
+    ), u = h.useMemo(() => {
+      if (!d) return [];
+      const t = [], y = Math.ceil(100 / (e / 10)), f = Math.ceil(100 / (e / 10));
+      for (let s = 0; s < y; s++)
+        for (let r = 0; r < f; r++)
+          t.push({
+            id: `${s}-${r}`,
+            x: r * e / 10 + Math.random() * 5,
+            y: s * e / 10 + Math.random() * 5,
+            delay: Math.random() * 3,
+            amplitude: 2 + Math.random() * 3
+          });
+      return t;
+    }, [d, e]);
+    return d ? /* @__PURE__ */ l(
+      "div",
+      {
+        className: i,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          zIndex: -1
+        },
+        children: /* @__PURE__ */ l(
+          "svg",
+          {
+            style: {
+              pointerEvents: "none",
+              position: "absolute",
+              zIndex: 0,
+              height: "100%",
+              width: "100%"
+            },
+            width: "100%",
+            height: "100%",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: u.map((t) => /* @__PURE__ */ l(
+              x.circle,
+              {
+                cx: `${t.x}%`,
+                cy: `${t.y}%`,
+                r: o,
+                fill: n,
+                initial: { opacity: 0.3 },
+                animate: {
+                  opacity: [0.3, 0.8, 0.3],
+                  cx: [
+                    `${t.x}%`,
+                    `${t.x + t.amplitude}%`,
+                    `${t.x - t.amplitude}%`,
+                    `${t.x}%`
+                  ],
+                  cy: [
+                    `${t.y}%`,
+                    `${t.y - t.amplitude}%`,
+                    `${t.y + t.amplitude}%`,
+                    `${t.y}%`
+                  ]
+                },
+                transition: {
+                  duration: 8 / m,
+                  repeat: 1 / 0,
+                  ease: "easeInOut",
+                  delay: t.delay
+                }
+              },
+              t.id
+            ))
+          }
+        )
+      }
+    ) : /* @__PURE__ */ l(
+      "div",
+      {
+        className: i,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: -1
+        },
+        children: /* @__PURE__ */ w(
+          "svg",
+          {
+            style: {
+              pointerEvents: "none",
+              position: "absolute",
+              zIndex: 0,
+              height: "100%",
+              width: "100%"
+            },
+            width: "100%",
+            height: "100%",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ l("defs", { children: /* @__PURE__ */ l(
+                "pattern",
+                {
+                  id: c,
+                  x: "0",
+                  y: "0",
+                  width: a.width,
+                  height: a.height,
+                  patternUnits: "userSpaceOnUse",
+                  children: /* @__PURE__ */ l(
+                    "circle",
+                    {
+                      cx: a.cx,
+                      cy: a.cy,
+                      r: a.r,
+                      fill: n
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ l("rect", { width: "100%", height: "100%", fill: `url(#${c})` })
+            ]
+          }
+        )
+      }
+    );
+  },
+  // Custom comparison function for better memoization
+  (i, n) => i.className === n.className && i.dotColor === n.dotColor && i.dotSize === n.dotSize && i.spacing === n.spacing && i.isAnimated === n.isAnimated && i.speed === n.speed
+);
+g.displayName = "BackgroundDots";
+export {
+  g as BackgroundDots
+};

package/dist/Gradient-DOFsccBS.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as t } from "react/jsx-runtime";
+import o from "react";
+import { m as r } from "./index-2NFcpkxw.js";
+const s = o.memo(
+  ({
+    className: e,
+    fromColor: i = "#ff0000",
+    toColor: n = "#00ff00",
+    direction: a = "45deg"
+  }) => /* @__PURE__ */ t(
+    "div",
+    {
+      className: e,
+      style: {
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        height: "100%",
+        width: "100%",
+        alignItems: "center",
+        justifyContent: "center",
+        zIndex: -1
+      },
+      children: /* @__PURE__ */ t(
+        r.div,
+        {
+          style: {
+            position: "absolute",
+            inset: 0,
+            height: "100%",
+            width: "100%",
+            background: `linear-gradient(${a}, ${i}, ${n})`
+          },
+          initial: { opacity: 0.8 },
+          animate: { opacity: [0.8, 0.9, 0.8] },
+          transition: {
+            duration: 4,
+            repeat: 1 / 0,
+            ease: "easeInOut"
+          }
+        }
+      )
+    }
+  )
+);
+s.displayName = "BackgroundGradient";
+export {
+  s as BackgroundGradient
+};

package/dist/Grid-DRZu52wi.js

@@ -0,0 +1,191 @@
+"use client";
+import { jsx as o, jsxs as g } from "react/jsx-runtime";
+import r from "react";
+import { m as d } from "./index-2NFcpkxw.js";
+const p = r.memo(
+  ({
+    className: e,
+    lineColor: t = "#333333",
+    lineWidth: n = 1,
+    spacing: i = 50,
+    // Interactive mode props
+    isInteractive: u = !1,
+    hoverColor: s = "#93c5fd",
+    rows: a = 150,
+    cols: h = 100
+  }) => {
+    const y = r.useMemo(() => new Array(a).fill(1), [a]), f = r.useMemo(() => new Array(h).fill(1), [h]), l = r.useMemo(
+      () => ({
+        rowStyle: {
+          height: `${i}px`,
+          width: `${i * 2}px`,
+          borderLeft: `${n}px solid ${t}`
+        },
+        colStyle: {
+          height: `${i}px`,
+          width: `${i * 2}px`,
+          borderTop: `${n}px solid ${t}`,
+          borderRight: `${n}px solid ${t}`
+        },
+        iconStyle: {
+          top: `${-i / 3.8}px`,
+          left: `${-i / 2.4}px`,
+          color: t
+        }
+      }),
+      [i, n, t]
+    ), c = r.useMemo(
+      () => ({
+        hover: {
+          backgroundColor: s,
+          transition: { duration: 0 }
+        },
+        animate: {
+          transition: { duration: 2 }
+        }
+      }),
+      [s]
+    );
+    return u ? /* @__PURE__ */ o(
+      "div",
+      {
+        className: e,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden",
+          zIndex: -1
+        },
+        children: /* @__PURE__ */ o(
+          "div",
+          {
+            style: {
+              transform: "translate(-40%,-60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)",
+              position: "absolute",
+              top: "-25%",
+              left: "25%",
+              zIndex: 0,
+              display: "flex",
+              height: "100%",
+              width: "100%",
+              padding: "1rem"
+            },
+            children: y.map((x, m) => /* @__PURE__ */ o(
+              d.div,
+              {
+                style: { ...l.rowStyle, position: "relative" },
+                children: f.map(($, w) => /* @__PURE__ */ o(
+                  d.div,
+                  {
+                    whileHover: c.hover,
+                    animate: c.animate,
+                    style: { ...l.colStyle, position: "relative" },
+                    children: w % 2 === 0 && m % 2 === 0 ? /* @__PURE__ */ o(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        fill: "none",
+                        viewBox: "0 0 24 24",
+                        strokeWidth: "1.5",
+                        stroke: "currentColor",
+                        style: {
+                          ...l.iconStyle,
+                          pointerEvents: "none",
+                          position: "absolute",
+                          height: "1.5rem",
+                          width: "2.5rem",
+                          strokeWidth: "1px"
+                        },
+                        children: /* @__PURE__ */ o(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            d: "M12 6v12m6-6H6"
+                          }
+                        )
+                      }
+                    ) : null
+                  },
+                  `col-${w}`
+                ))
+              },
+              `row-${m}`
+            ))
+          }
+        )
+      }
+    ) : /* @__PURE__ */ o(
+      "div",
+      {
+        className: e,
+        style: {
+          position: "absolute",
+          inset: 0,
+          display: "flex",
+          height: "100%",
+          width: "100%",
+          alignItems: "center",
+          justifyContent: "center",
+          zIndex: -1
+        },
+        children: /* @__PURE__ */ g(
+          "svg",
+          {
+            style: {
+              pointerEvents: "none",
+              position: "absolute",
+              zIndex: 0,
+              height: "100%",
+              width: "100%"
+            },
+            width: "100%",
+            height: "100%",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ o("defs", { children: /* @__PURE__ */ o(
+                "pattern",
+                {
+                  id: "grid-pattern",
+                  x: "0",
+                  y: "0",
+                  width: i,
+                  height: i,
+                  patternUnits: "userSpaceOnUse",
+                  children: /* @__PURE__ */ o(
+                    d.path,
+                    {
+                      d: `M ${i} 0 L 0 0 0 ${i}`,
+                      fill: "none",
+                      stroke: t,
+                      strokeWidth: n,
+                      initial: { opacity: 0.2 },
+                      animate: { opacity: [0.2, 0.5, 0.2] },
+                      transition: {
+                        duration: 3,
+                        repeat: 1 / 0,
+                        ease: "easeInOut"
+                      }
+                    }
+                  )
+                }
+              ) }),
+              /* @__PURE__ */ o("rect", { width: "100%", height: "100%", fill: "url(#grid-pattern)" })
+            ]
+          }
+        )
+      }
+    );
+  },
+  // Custom comparison function for better memoization
+  (e, t) => e.className === t.className && e.lineColor === t.lineColor && e.lineWidth === t.lineWidth && e.spacing === t.spacing && e.isInteractive === t.isInteractive && e.hoverColor === t.hoverColor && e.rows === t.rows && e.cols === t.cols
+);
+p.displayName = "BackgroundGrid";
+export {
+  p as BackgroundGrid
+};