react-component-kit-ui 0.0.0-stage → 0.1.0

package/dist/chunks/TiltGlowButton-BRHwq9Af.js

@@ -0,0 +1,650 @@
+"use client";
+import { jsx as n, jsxs as y } from "react/jsx-runtime";
+import { useId as f, useRef as $, useState as h } from "react";
+const w = () => /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ n("polyline", { points: "15 18 9 12 15 6" }) }), j = () => /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" }) });
+function R({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  iconPos: a = "right",
+  icon: i,
+  disabled: s = !1,
+  className: l,
+  children: d,
+  ...c
+}) {
+  const b = t ? "a" : "button", N = /* @__PURE__ */ n("span", { className: "icon-anim-btn__icon", children: i ?? (a === "left" ? /* @__PURE__ */ n(w, {}) : /* @__PURE__ */ n(j, {})) });
+  return /* @__PURE__ */ n(
+    b,
+    {
+      ...c,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : s,
+      "aria-disabled": t && s ? !0 : void 0,
+      className: ["icon-anim-btn", `icon-anim-btn--${e}`, `icon-anim-btn--${r}`, `icon-anim-btn--${a}`, l].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ y("span", { className: "icon-anim-btn__inner", children: [
+        a === "left" && N,
+        /* @__PURE__ */ n("span", { className: "icon-anim-btn__text", children: d }),
+        a === "right" && N
+      ] })
+    }
+  );
+}
+function q({
+  href: t,
+  type: o = "button",
+  color: e = "#6366f1",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  style: s,
+  children: l,
+  ...d
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...d,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["draw-btn", `draw-btn--${r}`, i].filter(Boolean).join(" "),
+      style: { "--btn-color": e, ...s },
+      children: /* @__PURE__ */ n("span", { className: "draw-btn__text", children: l })
+    }
+  );
+}
+function C({
+  href: t,
+  type: o = "button",
+  primaryColor: e = "#ff003c",
+  secondaryColor: r = "#00e0ff",
+  size: a = "md",
+  label: i = "READY",
+  disabled: s = !1,
+  className: l,
+  style: d,
+  children: c,
+  ...b
+}) {
+  return /* @__PURE__ */ y(
+    t ? "a" : "button",
+    {
+      ...b,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : s,
+      "aria-disabled": t && s ? !0 : void 0,
+      className: ["cyber-btn", `cyber-btn--${a}`, l].filter(Boolean).join(" "),
+      style: { "--primary-color": e, "--secondary-color": r, ...d },
+      "data-text": i,
+      children: [
+        /* @__PURE__ */ n("span", { className: "cyber-btn__inner", children: c ?? i }),
+        /* @__PURE__ */ n("span", { className: "cyber-btn__glitch", "aria-hidden": "true" }),
+        /* @__PURE__ */ n("span", { className: "cyber-btn__tag", "aria-hidden": "true", children: "R25" })
+      ]
+    }
+  );
+}
+function G({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["double-border-btn", `double-border-btn--${e}`, `double-border-btn--${r}`, i].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ n("span", { className: "double-border-btn__content", children: s })
+    }
+  );
+}
+function S({
+  href: t,
+  type: o = "button",
+  primaryColor: e = "#6366f1",
+  secondaryColor: r = "#c084fc",
+  size: a = "md",
+  disabled: i = !1,
+  className: s,
+  style: l,
+  children: d,
+  ...c
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...c,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : i,
+      "aria-disabled": t && i ? !0 : void 0,
+      className: ["ghost-grad-btn", `ghost-grad-btn--${a}`, s].filter(Boolean).join(" "),
+      style: { "--primary-color": e, "--secondary-color": r, ...l },
+      children: /* @__PURE__ */ n("span", { className: "ghost-grad-btn__text", children: d })
+    }
+  );
+}
+function Y({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ y(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["glass-btn", `glass-btn--${e}`, `glass-btn--${r}`, i].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ n("span", { className: "glass-btn__shimmer" }),
+        /* @__PURE__ */ n("span", { className: "glass-btn__content", children: s })
+      ]
+    }
+  );
+}
+function A({
+  href: t,
+  type: o = "button",
+  color: e = "#6366f1",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  style: s,
+  children: l,
+  ...d
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...d,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["glow-btn", `glow-btn--${r}`, i].filter(Boolean).join(" "),
+      style: { "--btn-color": e, ...s },
+      children: /* @__PURE__ */ n("span", { className: "glow-btn__content", children: l })
+    }
+  );
+}
+function I({
+  href: t,
+  type: o = "button",
+  color: e = "#6366f1",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  style: s,
+  children: l,
+  ...d
+}) {
+  const c = t ? "a" : "button", b = `gooey-${f().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+  return /* @__PURE__ */ y(
+    c,
+    {
+      ...d,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["liquid-btn", `liquid-btn--${r}`, i].filter(Boolean).join(" "),
+      style: { "--liquid-color": e, "--filterId": `url(#${b})`, ...s },
+      children: [
+        /* @__PURE__ */ n("span", { className: "liquid-btn__text", children: l }),
+        /* @__PURE__ */ y("span", { className: "liquid-wrapper", "aria-hidden": "true", children: [
+          /* @__PURE__ */ n("span", { className: "liquid-main" }),
+          /* @__PURE__ */ y("span", { className: "liquid-container", children: [
+            /* @__PURE__ */ n("span", { className: "liquid-blob" }),
+            /* @__PURE__ */ n("span", { className: "liquid-blob" }),
+            /* @__PURE__ */ n("span", { className: "liquid-blob" }),
+            /* @__PURE__ */ n("span", { className: "liquid-blob" })
+          ] })
+        ] }),
+        /* @__PURE__ */ n("svg", { style: { position: "absolute", width: 0, height: 0, pointerEvents: "none" }, "aria-hidden": "true", children: /* @__PURE__ */ n("defs", { children: /* @__PURE__ */ y("filter", { id: b, children: [
+          /* @__PURE__ */ n("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "10", result: "blur" }),
+          /* @__PURE__ */ n("feColorMatrix", { in: "blur", mode: "matrix", values: "1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 20 -9", result: "goo" }),
+          /* @__PURE__ */ n("feComposite", { in: "SourceGraphic", in2: "goo", operator: "atop" })
+        ] }) }) })
+      ]
+    }
+  );
+}
+function X({
+  isLoading: t = !1,
+  href: o,
+  type: e = "button",
+  variant: r = "primary",
+  size: a = "md",
+  disabled: i = !1,
+  className: s,
+  children: l,
+  ...d
+}) {
+  const c = o ? "a" : "button", b = i || t;
+  return /* @__PURE__ */ y(
+    c,
+    {
+      ...d,
+      href: o,
+      type: o ? void 0 : e,
+      disabled: o ? void 0 : b,
+      "aria-disabled": o && b ? !0 : void 0,
+      "aria-busy": t || void 0,
+      className: ["load-btn", `load-btn--${r}`, `load-btn--${a}`, t && "is-loading", s].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ n("span", { className: "load-btn__content", children: l }),
+        /* @__PURE__ */ n("span", { className: "load-btn__spinner", "aria-hidden": "true", children: /* @__PURE__ */ n("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "3", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ n("path", { d: "M12 2v4M12 18v4M4.93 4.93l2.83 2.83M16.24 16.24l2.83 2.83M2 12h4M18 12h4M4.93 19.07l2.83-2.83M16.24 7.76l2.83-2.83" }) }) })
+      ]
+    }
+  );
+}
+function z({
+  href: t,
+  type: o = "button",
+  variant: e = "secondary",
+  size: r = "md",
+  strength: a = 0.5,
+  disabled: i = !1,
+  className: s,
+  children: l,
+  onMouseMove: d,
+  onMouseLeave: c,
+  ...b
+}) {
+  const N = t ? "a" : "button", _ = $(null), B = (u, p, v) => {
+    u.style.transform = `translate(${p}px, ${v}px)`, _.current && (_.current.style.transform = `translate(${p * 0.4}px, ${v * 0.4}px)`);
+  }, m = (u) => {
+    if (d == null || d(u), i) return;
+    const p = u.currentTarget, v = p.getBoundingClientRect();
+    B(p, (u.clientX - v.left - v.width / 2) * a, (u.clientY - v.top - v.height / 2) * a);
+  }, g = (u) => {
+    c == null || c(u), B(u.currentTarget, 0, 0);
+  };
+  return /* @__PURE__ */ n(
+    N,
+    {
+      ...b,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : i,
+      "aria-disabled": t && i ? !0 : void 0,
+      className: ["magnetic-btn", `magnetic-btn--${e}`, `magnetic-btn--${r}`, s].filter(Boolean).join(" "),
+      onMouseMove: m,
+      onMouseLeave: g,
+      children: /* @__PURE__ */ n("span", { ref: _, className: "magnetic-btn__inner", children: l })
+    }
+  );
+}
+function D({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["pill-btn", `pill-btn--${e}`, `pill-btn--${r}`, i].filter(Boolean).join(" "),
+      children: s
+    }
+  );
+}
+function L({
+  color: t = "#d4a017",
+  size: o = "md",
+  href: e,
+  type: r = "button",
+  disabled: a = !1,
+  className: i,
+  style: s,
+  children: l,
+  ...d
+}) {
+  return /* @__PURE__ */ y(
+    e ? "a" : "button",
+    {
+      ...d,
+      href: e,
+      type: e ? void 0 : r,
+      disabled: !e && a ? !0 : void 0,
+      "aria-disabled": a ? !0 : void 0,
+      className: ["neon-border-btn", `neon-border-btn--${o}`, i].filter(Boolean).join(" "),
+      style: { "--neon-accent": t, ...s },
+      children: [
+        /* @__PURE__ */ n("span", { className: "neon-border-btn__glow", "aria-hidden": "true" }),
+        /* @__PURE__ */ n("span", { className: "neon-border-btn__border", "aria-hidden": "true" }),
+        /* @__PURE__ */ n("span", { className: "neon-border-btn__content", children: l })
+      ]
+    }
+  );
+}
+function P({
+  href: t,
+  type: o = "button",
+  baseColor: e = "var(--c-bg-2, #111827)",
+  variant: r = "convex",
+  size: a = "md",
+  disabled: i = !1,
+  className: s,
+  style: l,
+  children: d,
+  ...c
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...c,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : i,
+      "aria-disabled": t && i ? !0 : void 0,
+      className: ["neu-btn", `neu-btn--${a}`, `neu-btn--${r}`, s].filter(Boolean).join(" "),
+      style: { "--base-color": e, ...l },
+      children: /* @__PURE__ */ n("span", { className: "neu-btn__surface", children: d })
+    }
+  );
+}
+function W({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  color: a = "#8b5cf6",
+  disabled: i = !1,
+  className: s,
+  style: l,
+  children: d,
+  ...c
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...c,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : i,
+      "aria-disabled": t && i ? !0 : void 0,
+      className: ["pulse-btn", `pulse-btn--${e}`, `pulse-btn--${r}`, s].filter(Boolean).join(" "),
+      style: { "--pulse-color": a, ...l },
+      children: d
+    }
+  );
+}
+function E({
+  href: t,
+  type: o = "button",
+  variant: e = "yellow",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["retro-arcade-btn", `retro-arcade-btn--${e}`, `retro-arcade-btn--${r}`, i].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ n("span", { className: "retro-arcade-btn__inner", children: s })
+    }
+  );
+}
+function O({
+  href: t,
+  type: o = "button",
+  variant: e = "pink",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["retro-shadow-btn", `retro-shadow-btn--${e}`, `retro-shadow-btn--${r}`, i].filter(Boolean).join(" "),
+      children: s
+    }
+  );
+}
+function Z({
+  variant: t = "primary",
+  size: o = "md",
+  href: e,
+  type: r = "button",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  onPointerDown: l,
+  ...d
+}) {
+  const c = e ? "a" : "button", [b, N] = h([]), _ = $(0), B = (m) => {
+    if (l == null || l(m), a) return;
+    const g = m.currentTarget.getBoundingClientRect(), u = Math.max(g.width, g.height), p = { id: _.current++, size: u, x: m.clientX - g.left - u / 2, y: m.clientY - g.top - u / 2 };
+    N((v) => [...v, p]), window.setTimeout(() => N((v) => v.filter((T) => T.id !== p.id)), 650);
+  };
+  return /* @__PURE__ */ y(
+    c,
+    {
+      ...d,
+      href: e,
+      type: e ? void 0 : r,
+      disabled: !e && a ? !0 : void 0,
+      "aria-disabled": a ? !0 : void 0,
+      className: ["ripple-btn", `ripple-btn--${t}`, `ripple-btn--${o}`, i].filter(Boolean).join(" "),
+      onPointerDown: B,
+      children: [
+        /* @__PURE__ */ n("span", { className: "ripple-btn__label", children: s }),
+        /* @__PURE__ */ n("span", { className: "ripple-btn__container", "aria-hidden": "true", children: b.map((m) => /* @__PURE__ */ n("span", { className: "ripple-effect", style: { width: m.size, height: m.size, left: m.x, top: m.y } }, m.id)) })
+      ]
+    }
+  );
+}
+function F({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["shimmer-btn", `shimmer-btn--${e}`, `shimmer-btn--${r}`, i].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ n("span", { className: "shimmer-btn__content", children: s })
+    }
+  );
+}
+function H({
+  href: t,
+  type: o = "button",
+  variant: e = "primary",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  children: s,
+  ...l
+}) {
+  return /* @__PURE__ */ n(
+    t ? "a" : "button",
+    {
+      ...l,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["shiny-btn", `shiny-btn--${e}`, `shiny-btn--${r}`, i].filter(Boolean).join(" "),
+      children: /* @__PURE__ */ n("span", { className: "shiny-btn__content", children: s })
+    }
+  );
+}
+function J({
+  variant: t = "primary",
+  size: o = "md",
+  href: e,
+  type: r = "button",
+  icon: a = "→",
+  disabled: i = !1,
+  className: s,
+  children: l,
+  ...d
+}) {
+  return /* @__PURE__ */ y(
+    e ? "a" : "button",
+    {
+      ...d,
+      href: e,
+      type: e ? void 0 : r,
+      disabled: !e && i ? !0 : void 0,
+      "aria-disabled": i ? !0 : void 0,
+      className: ["slide-reveal-btn", `slide-reveal-btn--${t}`, `slide-reveal-btn--${o}`, s].filter(Boolean).join(" "),
+      children: [
+        /* @__PURE__ */ n("span", { className: "slide-reveal-btn__text", children: l }),
+        /* @__PURE__ */ n("span", { className: "slide-reveal-btn__icon", "aria-hidden": "true", children: a })
+      ]
+    }
+  );
+}
+function K({
+  href: t,
+  type: o = "button",
+  color: e = "#6366f1",
+  size: r = "md",
+  disabled: a = !1,
+  className: i,
+  style: s,
+  children: l,
+  ...d
+}) {
+  return /* @__PURE__ */ y(
+    t ? "a" : "button",
+    {
+      ...d,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : a,
+      "aria-disabled": t && a ? !0 : void 0,
+      className: ["push-btn", `push-btn--${r}`, i].filter(Boolean).join(" "),
+      style: { "--btn-color": e, ...s },
+      children: [
+        /* @__PURE__ */ n("span", { className: "push-btn__shadow", "aria-hidden": "true" }),
+        /* @__PURE__ */ n("span", { className: "push-btn__edge", "aria-hidden": "true" }),
+        /* @__PURE__ */ n("span", { className: "push-btn__front", children: l })
+      ]
+    }
+  );
+}
+function Q({
+  href: t,
+  type: o = "button",
+  primaryColor: e = "#6366f1",
+  secondaryColor: r = "#c084fc",
+  size: a = "md",
+  disabled: i = !1,
+  className: s,
+  style: l,
+  children: d,
+  onMouseMove: c,
+  onMouseLeave: b,
+  ...N
+}) {
+  const _ = t ? "a" : "button", B = (g) => {
+    if (c == null || c(g), i) return;
+    const u = g.currentTarget, p = u.getBoundingClientRect(), v = g.clientX - p.left, T = g.clientY - p.top;
+    u.style.setProperty("--mouse-x", `${v / p.width * 100}%`), u.style.setProperty("--mouse-y", `${T / p.height * 100}%`), u.style.transform = `rotateY(${(v / p.width - 0.5) * 25}deg) rotateX(${(T / p.height - 0.5) * -25}deg)`;
+  }, m = (g) => {
+    b == null || b(g);
+    const u = g.currentTarget;
+    u.style.transform = "rotateY(0deg) rotateX(0deg)", u.style.setProperty("--mouse-x", "50%"), u.style.setProperty("--mouse-y", "50%");
+  };
+  return /* @__PURE__ */ n("div", { className: ["tilt-wrapper", `tilt-wrapper--${a}`, s].filter(Boolean).join(" "), children: /* @__PURE__ */ y(
+    _,
+    {
+      ...N,
+      href: t,
+      type: t ? void 0 : o,
+      disabled: t ? void 0 : i,
+      "aria-disabled": t && i ? !0 : void 0,
+      className: "tilt-card",
+      style: { "--primary-color": e, "--secondary-color": r, ...l },
+      onMouseMove: B,
+      onMouseLeave: m,
+      children: [
+        /* @__PURE__ */ n("span", { className: "tilt-card__glow", "aria-hidden": "true" }),
+        /* @__PURE__ */ n("span", { className: "tilt-card__content", children: d })
+      ]
+    }
+  ) });
+}
+export {
+  R as A,
+  q as B,
+  C,
+  G as D,
+  S as G,
+  I as L,
+  z as M,
+  L as N,
+  W as P,
+  E as R,
+  F as S,
+  K as T,
+  Y as a,
+  A as b,
+  X as c,
+  D as d,
+  P as e,
+  O as f,
+  Z as g,
+  H as h,
+  J as i,
+  Q as j
+};