@scriptedpixels/liquid-glass-vue 0.0.3 → 0.0.5

package/README.md

@@ -8,8 +8,6 @@ Card Example              |  Button Example
 
 ## Demo
 
-<!-- [See it in action but touch it](https://liquid-glass.maxrovensky.com) -->
-
 ## Features
 
 - Proper edgy bending and refraction
@@ -28,41 +26,20 @@ Card Example              |  Button Example
 ### Installation
 
 ```bash
-npm install liquid-glass-vue
+npm install @scriptedpixels/liquid-glass-vue
 ```
 
 ### Basic Usage
 
 ```tsx
-import LiquidGlass from 'liquid-glass-vue'
-
-function App() {
-  return (
-    <LiquidGlass>
-      <div className="p-6">
-        <h2>Your content here</h2>
-        <p>This will have the liquid glass effect</p>
-      </div>
-    </LiquidGlass>
-  )
-}
+import LiquidGlass from '@scriptedpixels/liquid-glass-vue'
+
+
 ```
 
 ### Button Example
 
 ```tsx
-<LiquidGlass
-  displacementScale={64}
-  blurAmount={0.1}
-  saturation={130}
-  aberrationIntensity={2}
-  elasticity={0.35}
-  cornerRadius={100}
-  padding="8px 16px"
-  onClick={() => console.log('Button clicked!')}
->
-  <span className="text-white font-medium">Click Me</span>
-</LiquidGlass>
 ```
 
 ### Mouse Container Example
@@ -70,23 +47,7 @@ function App() {
 When you want the glass effect to respond to mouse movement over a larger area (like a parent container), use the `mouseContainer` prop:
 
 ```tsx
-function App() {
-  const containerRef = useRef<HTMLDivElement>(null)
-
-  return (
-    <div ref={containerRef} className="w-full h-screen bg-image">
-      <LiquidGlass
-        mouseContainer={containerRef}
-        elasticity={0.3}
-        style={{ position: 'fixed', top: '50%', left: '50%' }}
-      >
-        <div className="p-6">
-          <h2>Glass responds to mouse anywhere in the container</h2>
-        </div>
-      </LiquidGlass>
-    </div>
-  )
-}
+
 ```
 
 ## Props

package/dist/index.js

@@ -0,0 +1,491 @@
+import { defineComponent as K, computed as c, createElementBlock as I, openBlock as C, normalizeStyle as p, createElementVNode as i, createStaticVNode as H, unref as j, ref as v, normalizeClass as M, createVNode as V, renderSlot as w, onMounted as G, watch as _, onUnmounted as $, Fragment as D, createCommentVNode as X, withCtx as ee, createBlock as te, createApp as ae } from "vue";
+const ie = "data:image/jpeg;base64,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cUAUAkEkziomgGgkoxZGgxZFQFQlYnQHRdPfj/10KCSCKESCNiVkViPSLpD0h6I0Q0I0A2IoBWBIJIBKBIJoJIJ2R2J0JWBUJ0JUB0XTv479dFZDYiglYigkhEgjZFQjRFQjRFQjQigFYigHYigmgEgmglYlYnQlQlYlQHQlQnQ9P/kf1yVkNiNCNkNiVENiNiViNEViNkVCVgKCViViViSCViSCVgdCViVCViVCdgVCVCdD1D+U/XBWQ2I0I2Q2JUQ2I0JWQ0I2JUQ2JUI2JUI2J0JWJWJWA2R0BWJ0I2JUJ2BUJUJ0P//EABkQAQEBAQEBAAAAAAAAAAAAAAECABEDEP/aAAgBAQABAgB1atWrVq1atWrVq1atWrVq1atWrVq1atWrVq+OrVq1atWrVq1atWrVq1atWrVq1atWrVq1atXxVppppppdWrVq1atWrVq1NNNNNNNNNNNPVWmmmmms6tWrVq1atWpppppppppppppp6q0000uc51atWrVq1ammmmmmmmmmmmmt1Vpppc5znVq1atWrVqaaaaaaaaaaaaaeqtNLnOc51atWrVq1ammmmmmmmmmmmmnqrS5znOc6tWrVq16222mmmmmmlVppp6tKuc5znOrVq1a9TbbbbTTTTTSq000qtLnOc5zq1atWrW0222200000qqqtKqrnOc5zq1atTbbbbbbbbTTTSqqqqqq5znOc6tTTTbbbbbbbbTTTSqqqqrlVznOctNNNtttttttttNNNNKqqqrqznKqrTTTTbbbbbbbbbTTTSqqqqrqznOc5aaaabbbbbbbbbaaaaVVVVVdWc5znVq1NNttttttttttNNKqqqqudWc5znVq16tbbbbbbbbbbTTSqqqq5XVnOc6tWrVrb1tttttttttNNKqqqqrWrK5VWmmm2230bbbbbbaaaXOc5zlVa1KuVVppptttt9G22222mmlzlVznK6tWVVWmmmm2222222222mlznOc5znLWppVVWmmm22222229bTWrOc5znOcq1qaaVpWmm222222229erVqznOc5znKtatStK0rTbTTbbbberXr1as5znOc5aVpppppWlabaabbbb1ta9WrVnOc5znU0rTTTTTTTTTbTTbbbTWvVq1as5znOdTTStNNNNNNNNNtNNtttN6tWvVq1ZznOrU00rTTTTTTTTTTTTTbTWvVq1atWrOc6tTTTStNNNNNNNNNNtNNtNa9WrVq1Z1Z1NNNNNK1q1NNNNNNNNNNNtNatWrVq1atWrU00000rWrVq1atWrVq1alaaa1atWrVq1NNNammmmla1atWrVq1aterVq16tWrVnVqa1NK1qaaaVX/xAAWEAADAAAAAAAAAAAAAAAAAAAhgJD/2gAIAQEAAz8AaExf/8QAGhEBAQEBAQEBAAAAAAAAAAAAAQISEQADEP/aAAgBAgEBAgDx48ePHjx48ePHjx48ePHjx48ePHjx48ePHj86IiIiIiInjx48ePHjx48IiIiIj0oooooooooRERER73ve60UUUUUUVrWiiiiiihERERER73ve97ooooorRWiiiiihKERERER73ve973RRRRWtFFFFFFCIiIiIiPe973ve60UUVrRRRRRRQiIlCIiI973ve973pRRWiiiiiiiiiiiiiiihEe973ve973RRWtFFFFFFFFFFFFFFFFFFa13ve973WitaKKKKKKKKKKKKKKKKKK1rWtd1rutFa1oooooooooooosssooorWta1rWta1rRRRRRRRRRRZZZZZZZZZWta1rWta1rRRRRRRRRZZZZZZZZZZZZe9a1rWta1rWitaKLLLLLLLLLLLLLLLLL3rWta1rWtFbLLLLLLLLLLLLLLLLLLLL3vWta1rWita1ssssssss+hZZZZZZZZe961rWta0Vre97LLLLLLLLLLLPoWWWWWXrWta1oorWta3ssss+hZZZZ9Cyyyyyyyyiita1orWta1ve9llllllllllllllllFFa0VorWta1ve9llllllllllllllllllFFFaK1rWta1rWiyyyyyyyyyyyyiiiiiiitFFa1rWta1oosoosssssoooosoooorRRRWta1rWta0UUUUUWUUUUUUUUUUUVoooorWta1rWtaKKKKKKmiiiiiiiiiiiiiiitd73ve61oSiiipoqaKKKKKKKKKK0UUUVrve973vREREZoSihEooooorRRRRWtd73ve9EREREREoSiiiiitFllllla73ve9ERERERESiiiiiitH0PoWWWWVrXe96IiIiMoiJRRRRRRWjwlFFllllFFd6IiIiIlCUUUUUUUUUePHjx48ePCIiIiIiIiUUUUUUUUUUUePHjx48ePHjx48ePHjx48IiUUUUUUJRRRX//xAAWEQADAAAAAAAAAAAAAAAAAAABYJD/2gAIAQIBAz8AtEV7/8QAFxEBAQEBAAAAAAAAAAAAAAAAAAECEP/aAAgBAwEBAgCtNNNNNNNNNNNNNNNNNNNNNNNNNNNNNcrTTTTTTTTTTTTTTTTTTTTTTTTTTTTTXKrTTTTTTTU000000000000000000001FVpppppqampqaaaaaaaaaaaaaaaaaaaa5Vaaaaampqampqammmmmmmmmmmlaaaaaaiq0001NTU1NTU1NTTTTTTTTTTSqqtNNNcqtNNSyzU1LNTU1NTTTTTTTTTSqqq001ytNLLLLNTU1NTU1NTbbbTTTTTSqqq001ytNLLLLLNTU1NTU3NttttNNNNNKqq001KrSyyyyyzU1NTU3Nzc02220000qqqqrSqqyyyyyzU1NTU3Nzc3NttttNNNKqqqqqqssssss1NTU3Nzc3NzbbbbTTTSqqqqqqrLLLLLNTU1Nzc3Nzc22220000qqqqqqqqssss1NTU3Nzc3NzbbbbbTTSqqqqqqqqqqzU1NTc3Nzc3Nzbc22000qqqqqqqqqqqtTU3Nzc3Nzc3NtzbTTSqqqqrKqqqqqtNNzc23Nzc3Nzc3NTU1KqqqrKqqqqqtNNNNttzc3Nzc3NzU1NLLLLLKqqqqqqqq0022223Nzc3NzU1NSyyyyyyqqqqqqqrTTbbbbc3Nzc3NTU1LLLLLLKsqqqqqqrTTTTbbbc3Nzc1NTUsssssssqqqqqqrTTTTTbbbTc3NTU1NTUsssssqqqqqqqq0000222023NTU1NTUsssssqqqqqqqq000000003NTU1NTU1LLLLLNKrTSqqqqtNNNNNNtNNTU1NSzUssss00qq0qqqqrTTTTTTTTTU1NTUs1LLLNNNKrTTTSqqq00000000001NTU1LNTU0000qtNNNKqqqtNNNNNNNNTU1NTUs1NNNNNKss1NNNK00qtK0000001NNTU0s000000qq000001NKrStNNNNK1NNNNStNNNNNKqtNNNNNNNK0000000rU0000rTTTTTSq00000rTTTTTTTTTTTTTTTTStNNNNKr/xAAUEQEAAAAAAAAAAAAAAAAAAACg/9oACAEDAQM/AAAf/9k=", ne = ["id"], le = ["offset"], se = ["id"], oe = ["href"], re = {
+  in: "EDGE_INTENSITY",
+  result: "EDGE_MASK"
+}, ue = ["tableValues"], ce = ["scale"], Ae = ["scale"], de = ["scale"], Ne = ["stdDeviation"], P = /* @__PURE__ */ K({
+  __name: "GlassFilter",
+  props: {
+    id: {},
+    displacementScale: {},
+    aberrationIntensity: {},
+    width: {},
+    height: {}
+  },
+  setup(T) {
+    const e = T, r = c(() => Math.max(30, 80 - e.aberrationIntensity * 2)), s = c(() => e.displacementScale * -1), u = c(() => e.displacementScale * (-1 - e.aberrationIntensity * 0.05)), l = c(() => e.displacementScale * (-1 - e.aberrationIntensity * 0.1)), h = c(() => Math.max(0.1, 0.5 - e.aberrationIntensity * 0.1)), g = c(() => `0 ${e.aberrationIntensity * 0.05} 1`);
+    return (A, t) => (C(), I("svg", {
+      style: p({ position: "absolute", width: e.width + "px", height: e.height + "px" }),
+      "aria-hidden": "true"
+    }, [
+      i("defs", null, [
+        i("radialGradient", {
+          id: `${e.id}-edge-mask`,
+          cx: "50%",
+          cy: "50%",
+          r: "50%"
+        }, [
+          t[0] || (t[0] = i("stop", {
+            offset: "0%",
+            "stop-color": "black",
+            "stop-opacity": "0"
+          }, null, -1)),
+          i("stop", {
+            offset: `${r.value}%`,
+            "stop-color": "black",
+            "stop-opacity": "0"
+          }, null, 8, le),
+          t[1] || (t[1] = i("stop", {
+            offset: "100%",
+            "stop-color": "white",
+            "stop-opacity": "1"
+          }, null, -1))
+        ], 8, ne),
+        i("filter", {
+          id: e.id,
+          x: "-35%",
+          y: "-35%",
+          width: "170%",
+          height: "170%",
+          "color-interpolation-filters": "sRGB"
+        }, [
+          i("feImage", {
+            id: "feimage",
+            x: "0",
+            y: "0",
+            width: "100%",
+            height: "100%",
+            result: "DISPLACEMENT_MAP",
+            href: j(ie),
+            preserveAspectRatio: "xMidYMid slice"
+          }, null, 8, oe),
+          t[2] || (t[2] = i("feColorMatrix", {
+            in: "DISPLACEMENT_MAP",
+            type: "matrix",
+            values: `0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0.3 0.3 0.3 0 0
+                 0 0 0 1 0`,
+            result: "EDGE_INTENSITY"
+          }, null, -1)),
+          i("feComponentTransfer", re, [
+            i("feFuncA", {
+              type: "discrete",
+              tableValues: g.value
+            }, null, 8, ue)
+          ]),
+          t[3] || (t[3] = i("feOffset", {
+            in: "SourceGraphic",
+            dx: "0",
+            dy: "0",
+            result: "CENTER_ORIGINAL"
+          }, null, -1)),
+          i("feDisplacementMap", {
+            in: "SourceGraphic",
+            in2: "DISPLACEMENT_MAP",
+            scale: s.value,
+            xChannelSelector: "R",
+            yChannelSelector: "B",
+            result: "RED_DISPLACED"
+          }, null, 8, ce),
+          t[4] || (t[4] = i("feColorMatrix", {
+            in: "RED_DISPLACED",
+            type: "matrix",
+            values: `1 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0`,
+            result: "RED_CHANNEL"
+          }, null, -1)),
+          i("feDisplacementMap", {
+            in: "SourceGraphic",
+            in2: "DISPLACEMENT_MAP",
+            scale: u.value,
+            xChannelSelector: "R",
+            yChannelSelector: "B",
+            result: "GREEN_DISPLACED"
+          }, null, 8, Ae),
+          t[5] || (t[5] = i("feColorMatrix", {
+            in: "GREEN_DISPLACED",
+            type: "matrix",
+            values: `0 0 0 0 0
+                 0 1 0 0 0
+                 0 0 0 0 0
+                 0 0 0 1 0`,
+            result: "GREEN_CHANNEL"
+          }, null, -1)),
+          i("feDisplacementMap", {
+            in: "SourceGraphic",
+            in2: "DISPLACEMENT_MAP",
+            scale: l.value,
+            xChannelSelector: "R",
+            yChannelSelector: "B",
+            result: "BLUE_DISPLACED"
+          }, null, 8, de),
+          t[6] || (t[6] = i("feColorMatrix", {
+            in: "BLUE_DISPLACED",
+            type: "matrix",
+            values: `0 0 0 0 0
+                 0 0 0 0 0
+                 0 0 1 0 0
+                 0 0 0 1 0`,
+            result: "BLUE_CHANNEL"
+          }, null, -1)),
+          t[7] || (t[7] = i("feBlend", {
+            in: "GREEN_CHANNEL",
+            in2: "BLUE_CHANNEL",
+            mode: "screen",
+            result: "GB_COMBINED"
+          }, null, -1)),
+          t[8] || (t[8] = i("feBlend", {
+            in: "RED_CHANNEL",
+            in2: "GB_COMBINED",
+            mode: "screen",
+            result: "RGB_COMBINED"
+          }, null, -1)),
+          i("feGaussianBlur", {
+            in: "RGB_COMBINED",
+            stdDeviation: h.value,
+            result: "ABERRATED_BLURRED"
+          }, null, 8, Ne),
+          t[9] || (t[9] = H('<feComposite in="ABERRATED_BLURRED" in2="EDGE_MASK" operator="in" result="EDGE_ABERRATION"></feComposite><feComponentTransfer in="EDGE_MASK" result="INVERTED_MASK"><feFuncA type="table" tableValues="1 0"></feFuncA></feComponentTransfer><feComposite in="CENTER_ORIGINAL" in2="INVERTED_MASK" operator="in" result="CENTER_CLEAN"></feComposite><feComposite in="EDGE_ABERRATION" in2="CENTER_CLEAN" operator="over"></feComposite>', 4))
+        ], 8, se)
+      ])
+    ], 4));
+  }
+}), pe = /* @__PURE__ */ K({
+  __name: "GlassContainer",
+  props: {
+    className: { default: "" },
+    style: { default: () => ({}) },
+    displacementScale: { default: 25 },
+    blurAmount: { default: 12 },
+    saturation: { default: 180 },
+    aberrationIntensity: { default: 2 },
+    mouseOffset: { default: () => ({ x: 0, y: 0 }) },
+    active: { type: Boolean, default: !1 },
+    overLight: { type: Boolean, default: !1 },
+    cornerRadius: { default: 999 },
+    padding: { default: "24px 32px" },
+    glassSize: { default: () => ({ width: 270, height: 69 }) },
+    onClick: {}
+  },
+  emits: ["mouse-enter", "mouse-leave", "mouse-down", "mouse-up", "click"],
+  setup(T, { expose: e, emit: r }) {
+    const s = T, u = r, l = `glass-filter-${Math.random().toString(36).substr(2, 9)}`, h = c(() => ({
+      filter: `url(#${l})`,
+      backdropFilter: `blur(${(s.overLight ? 20 : 4) + s.blurAmount * 32}px) saturate(${s.saturation}%)`
+    })), g = v(null);
+    return e({ glassContainerRef: g }), (A, t) => (C(), I("div", {
+      ref_key: "glassContainerRef",
+      ref: g,
+      class: M(`relative ${s.className} ${s.active ? "active" : ""} ${s.onClick ? "cursor-pointer" : ""}`),
+      style: p(s.style),
+      onClick: t[4] || (t[4] = (y) => s.onClick && s.onClick())
+    }, [
+      V(P, {
+        id: l,
+        displacementScale: s.displacementScale,
+        aberrationIntensity: s.aberrationIntensity,
+        width: s.glassSize.width,
+        height: s.glassSize.height
+      }, null, 8, ["displacementScale", "aberrationIntensity", "width", "height"]),
+      i("div", {
+        class: "glass",
+        style: p({
+          borderRadius: `${s.cornerRadius}px`,
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "24px",
+          padding: s.padding,
+          overflow: "hidden",
+          transition: "all 0.2s ease-in-out",
+          boxShadow: s.overLight ? "0px 16px 70px rgba(0, 0, 0, 0.75)" : "0px 12px 40px rgba(0, 0, 0, 0.25)"
+        }),
+        onMouseenter: t[0] || (t[0] = (y) => u("mouse-enter")),
+        onMouseleave: t[1] || (t[1] = (y) => u("mouse-leave")),
+        onMousedown: t[2] || (t[2] = (y) => u("mouse-down")),
+        onMouseup: t[3] || (t[3] = (y) => u("mouse-up"))
+      }, [
+        i("span", {
+          class: "glass__warp",
+          style: p({
+            ...h.value,
+            position: "absolute",
+            inset: "0"
+          })
+        }, null, 4),
+        i("div", {
+          class: "transition-all duration-150 ease-in-out text-white",
+          style: p({
+            position: "relative",
+            zIndex: 1,
+            font: "500 20px/1 system-ui",
+            textShadow: s.overLight ? "0px 2px 12px rgba(0, 0, 0, 0)" : "0px 2px 12px rgba(0, 0, 0, 0.4)"
+          })
+        }, [
+          w(A.$slots, "default", {}, void 0, !0)
+        ], 4)
+      ], 36)
+    ], 6));
+  }
+}), me = (T, e) => {
+  const r = T.__vccOpts || T;
+  for (const [s, u] of e)
+    r[s] = u;
+  return r;
+}, Te = /* @__PURE__ */ me(pe, [["__scopeId", "data-v-689fee6a"]]), qe = /* @__PURE__ */ K({
+  __name: "LiquidGlass",
+  props: {
+    displacementScale: { default: 70 },
+    blurAmount: { default: 0.0625 },
+    saturation: { default: 140 },
+    aberrationIntensity: { default: 2 },
+    elasticity: { default: 0.15 },
+    cornerRadius: { default: 999 },
+    globalMousePos: { default: void 0 },
+    mouseOffset: { default: void 0 },
+    mouseContainer: { default: null },
+    className: { default: "" },
+    padding: { default: "24px 32px" },
+    style: {},
+    overLight: { type: Boolean, default: !1 },
+    onClick: { type: Function, default: () => ({}) }
+  },
+  setup(T) {
+    const e = T, r = v(null), s = v(!1), u = v(!1), l = v({ width: 400, height: 400 }), h = v({ x: 0, y: 0 }), g = v({ x: 0, y: 0 }), A = c(() => e.globalMousePos || h.value), t = c(() => e.mouseOffset || g.value), y = (n) => {
+      var m;
+      const a = e.mouseContainer || ((m = r.value) == null ? void 0 : m.glassContainerRef);
+      if (!a) return;
+      const o = a.getBoundingClientRect(), d = o.left + o.width / 2, N = o.top + o.height / 2;
+      g.value = {
+        x: (n.clientX - d) / o.width * 100,
+        y: (n.clientY - N) / o.height * 100
+      }, h.value = {
+        x: n.clientX,
+        y: n.clientY
+      };
+    };
+    G(() => {
+      const n = () => {
+        var a;
+        if ((a = r.value) != null && a.glassContainerRef) {
+          const o = r.value.glassContainerRef.getBoundingClientRect();
+          l.value = { width: o.width, height: o.height };
+        }
+      };
+      return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+    }), _([() => e.globalMousePos, () => e.mouseOffset, r], ([n, a]) => {
+      var d;
+      if (n && a)
+        return;
+      const o = e.mouseContainer || ((d = r.value) == null ? void 0 : d.glassContainerRef);
+      o && o.addEventListener("mousemove", y);
+    }, { immediate: !0 }), $(() => {
+    });
+    const Z = c(() => {
+      var x;
+      if (!A.value.x || !A.value.y || !((x = r.value) != null && x.glassContainerRef))
+        return 0;
+      const n = r.value.glassContainerRef.getBoundingClientRect(), a = n.left + n.width / 2, o = n.top + n.height / 2, d = l.value.width, N = l.value.height, m = Math.max(0, Math.abs(A.value.x - a) - d / 2), b = Math.max(0, Math.abs(A.value.y - o) - N / 2), R = Math.sqrt(m * m + b * b), f = 200;
+      return R > f ? 0 : 1 - R / f;
+    }), S = c(() => {
+      var N;
+      if (!((N = r.value) != null && N.glassContainerRef))
+        return { x: 0, y: 0 };
+      const n = Z.value, a = r.value.glassContainerRef.getBoundingClientRect(), o = a.left + a.width / 2, d = a.top + a.height / 2;
+      return {
+        x: (A.value.x - o) * e.elasticity * 0.1 * n,
+        y: (A.value.y - d) * e.elasticity * 0.1 * n
+      };
+    }), O = c(() => {
+      var F;
+      if (!A.value.x || !A.value.y || !((F = r.value) != null && F.glassContainerRef))
+        return "scale(1)";
+      const n = r.value.glassContainerRef.getBoundingClientRect(), a = n.left + n.width / 2, o = n.top + n.height / 2, d = l.value.width, N = l.value.height, m = A.value.x - a, b = A.value.y - o, R = Math.max(0, Math.abs(m) - d / 2), f = Math.max(0, Math.abs(b) - N / 2), x = Math.sqrt(R * R + f * f), Q = 200;
+      if (x > Q)
+        return "scale(1)";
+      const k = 1 - x / Q, L = Math.sqrt(m * m + b * b);
+      if (L === 0)
+        return "scale(1)";
+      const W = m / L, z = b / L, B = Math.min(L / 300, 1) * e.elasticity * k, J = 1 + Math.abs(W) * B * 0.3 - Math.abs(z) * B * 0.15, Y = 1 + Math.abs(z) * B * 0.3 - Math.abs(W) * B * 0.15;
+      return `scaleX(${Math.max(0.8, J)}) scaleY(${Math.max(0.8, Y)})`;
+    }), E = c(() => `translate(calc(-50% + ${S.value.x}px), calc(-50% + ${S.value.y}px)) ${u.value && e.onClick ? "scale(0.96)" : O.value}`), U = c(() => ({
+      ...e.style,
+      transform: E.value,
+      transition: "all ease-out 0.2s"
+    })), q = c(() => {
+      var n, a, o;
+      return {
+        position: ((n = e.style) == null ? void 0 : n.position) || "relative",
+        top: ((a = e.style) == null ? void 0 : a.top) || "50%",
+        left: ((o = e.style) == null ? void 0 : o.left) || "50%"
+      };
+    });
+    return (n, a) => {
+      var o, d;
+      return C(), I(D, null, [
+        V(P, {
+          id: `liquid-glass-filter-${((d = (o = r.value) == null ? void 0 : o.glassContainerRef) == null ? void 0 : d.id) || "default"}`,
+          displacementScale: e.overLight ? e.displacementScale * 0.5 : e.displacementScale,
+          aberrationIntensity: e.aberrationIntensity,
+          width: l.value.width,
+          height: l.value.height
+        }, null, 8, ["id", "displacementScale", "aberrationIntensity", "width", "height"]),
+        i("div", {
+          class: M(`bg-black transition-all duration-150 ease-in-out pointer-events-none ${e.overLight ? "opacity-20" : "opacity-0"}`),
+          style: p({
+            ...q.value,
+            height: l.value.height + "px",
+            width: l.value.width + "px",
+            borderRadius: `${e.cornerRadius}px`,
+            transform: E.value,
+            transition: U.value.transition
+          })
+        }, null, 6),
+        i("div", {
+          class: M(`bg-black transition-all duration-150 ease-in-out pointer-events-none mix-blend-overlay ${e.overLight ? "opacity-100" : "opacity-0"}`),
+          style: p({
+            ...q.value,
+            height: l.value.height + "px",
+            width: l.value.width + "px",
+            borderRadius: `${e.cornerRadius}px`,
+            transform: E.value,
+            transition: U.value.transition
+          })
+        }, null, 6),
+        V(Te, {
+          ref_key: "glassRef",
+          ref: r,
+          class: M(e.className),
+          style: p(U.value),
+          cornerRadius: e.cornerRadius,
+          displacementScale: e.overLight ? e.displacementScale * 0.5 : e.displacementScale,
+          blurAmount: e.blurAmount,
+          saturation: e.saturation,
+          aberrationIntensity: e.aberrationIntensity,
+          glassSize: l.value,
+          padding: e.padding,
+          mouseOffset: t.value,
+          onMouseEnter: a[0] || (a[0] = (N) => s.value = !0),
+          onMouseLeave: a[1] || (a[1] = (N) => s.value = !1),
+          onMouseDown: a[2] || (a[2] = (N) => u.value = !0),
+          onMouseUp: a[3] || (a[3] = (N) => u.value = !1),
+          active: u.value,
+          overLight: e.overLight,
+          onClick: a[4] || (a[4] = (N) => e.onClick && e.onClick())
+        }, {
+          default: ee(() => [
+            w(n.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["class", "style", "cornerRadius", "displacementScale", "blurAmount", "saturation", "aberrationIntensity", "glassSize", "padding", "mouseOffset", "active", "overLight"]),
+        i("span", {
+          style: p({
+            ...q.value,
+            height: l.value.height + "px",
+            width: l.value.width + "px",
+            borderRadius: `${e.cornerRadius}px`,
+            transform: E.value,
+            transition: U.value.transition,
+            pointerEvents: "none",
+            mixBlendMode: "screen",
+            opacity: 0.2,
+            padding: "1.5px",
+            WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+            WebkitMaskComposite: "xor",
+            maskComposite: "exclude",
+            boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)",
+            background: `linear-gradient(
+        ${135 + t.value.x * 1.2}deg,
+        rgba(255, 255, 255, 0.0) 0%,
+        rgba(255, 255, 255, ${0.12 + Math.abs(t.value.x) * 8e-3}) ${Math.max(10, 33 + t.value.y * 0.3)}%,
+        rgba(255, 255, 255, ${0.4 + Math.abs(t.value.x) * 0.012}) ${Math.min(90, 66 + t.value.y * 0.4)}%,
+        rgba(255, 255, 255, 0.0) 100%
+      )`
+          })
+        }, null, 4),
+        i("span", {
+          style: p({
+            ...q.value,
+            height: l.value.height + "px",
+            width: l.value.width + "px",
+            borderRadius: `${e.cornerRadius}px`,
+            transform: E.value,
+            transition: U.value.transition,
+            pointerEvents: "none",
+            mixBlendMode: "overlay",
+            padding: "1.5px",
+            WebkitMask: "linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0)",
+            WebkitMaskComposite: "xor",
+            maskComposite: "exclude",
+            boxShadow: "0 0 0 0.5px rgba(255, 255, 255, 0.5) inset, 0 1px 3px rgba(255, 255, 255, 0.25) inset, 0 1px 4px rgba(0, 0, 0, 0.35)",
+            background: `linear-gradient(
+        ${135 + t.value.x * 1.2}deg,
+        rgba(255, 255, 255, 0.0) 0%,
+        rgba(255, 255, 255, ${0.32 + Math.abs(t.value.x) * 8e-3}) ${Math.max(10, 33 + t.value.y * 0.3)}%,
+        rgba(255, 255, 255, ${0.6 + Math.abs(t.value.x) * 0.012}) ${Math.min(90, 66 + t.value.y * 0.4)}%,
+        rgba(255, 255, 255, 0.0) 100%
+      )`
+          })
+        }, null, 4),
+        e.onClick ? (C(), I(D, { key: 0 }, [
+          i("div", {
+            style: p({
+              ...q.value,
+              height: l.value.height + "px",
+              width: l.value.width + 1 + "px",
+              borderRadius: `${e.cornerRadius}px`,
+              transform: E.value,
+              pointerEvents: "none",
+              transition: "all 0.2s ease-out",
+              opacity: s.value || u.value ? 0.5 : 0,
+              backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 50%)",
+              mixBlendMode: "overlay"
+            })
+          }, null, 4),
+          i("div", {
+            style: p({
+              ...q.value,
+              height: l.value.height + "px",
+              width: l.value.width + 1 + "px",
+              borderRadius: `${e.cornerRadius}px`,
+              transform: E.value,
+              pointerEvents: "none",
+              transition: "all 0.2s ease-out",
+              opacity: u.value ? 0.5 : 0,
+              backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 80%)",
+              mixBlendMode: "overlay"
+            })
+          }, null, 4),
+          i("div", {
+            style: p({
+              ...U.value,
+              height: l.value.height + "px",
+              width: l.value.width + 1 + "px",
+              borderRadius: `${e.cornerRadius}px`,
+              position: q.value.position,
+              top: q.value.top,
+              left: q.value.left,
+              pointerEvents: "none",
+              transition: "all 0.2s ease-out",
+              opacity: s.value ? 0.4 : u.value ? 0.8 : 0,
+              backgroundImage: "radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%)",
+              mixBlendMode: "overlay"
+            })
+          }, null, 4)
+        ], 64)) : X("", !0)
+      ], 64);
+    };
+  }
+}), ge = /* @__PURE__ */ K({
+  __name: "App",
+  setup(T) {
+    return (e, r) => (C(), te(qe));
+  }
+});
+ae(ge).mount("#app");
+export {
+  ge as App
+};
+//# sourceMappingURL=index.js.map