react-liquid-glass-svg 1.0.0 → 1.0.3

package/README.md

@@ -33,14 +33,14 @@ Most glass-effect packages rely on WebGL or canvas — heavy, SSR-hostile, and a
   backdrop-filter: blur() ← softens the result
 ```
 
-That's the entire trick. **No shaders. No canvas. No WebGL.** ~5 KB gzip.
+That's the entire trick. **No shaders. No canvas. No WebGL.** ~2 KB gzip.
 
 ## ✨ Features
 
 |                            |                                                                                         |
 | -------------------------- | --------------------------------------------------------------------------------------- |
 | 🪟 **Apple liquid glass**  | Real displacement-mapped refraction on Chromium/Firefox; noise+blur fallback on Safari. |
-| ⚡ **5 KB gzipped**        | One file, zero runtime deps. Tree-shakable, `sideEffects: false`.                       |
+| ⚡ **~2 KB gzipped**       | One file, zero runtime deps. Tree-shakable, `sideEffects: false`.                       |
 | 🧩 **Polymorphic API**     | `<LiquidGlass as="button" />`, `as="nav"`, `as="article"` — semantics stay yours.       |
 | 🎨 **Tailwind-friendly**   | Pass `className`. No clashes, no wrappers, no `!important` wars.                        |
 | 🔠 **TypeScript-first**    | Strict types, autocompleted props. Zero `@types/*` packages to install.                 |
@@ -223,7 +223,7 @@ All other props (`onClick`, `role`, `aria-*`, `data-*`, etc.) are forwarded to t
 
 The package is built specifically with React Server Components in mind.
 
-The `'use client'` directive is **baked into the published ESM and UMD bundles** — you don't need to add it.
+The `'use client'` directive is **baked into the published ESM and CJS bundles** — you don't need to add it.
 
 ```tsx
 // app/page.tsx — Next.js App Router (Server Component)
@@ -252,7 +252,7 @@ The fallback path is automatic. The package detects Safari/iOS at runtime and sw
 
 ## ⚡ Performance
 
-- **~5 KB gzipped** (ESM build, no peer deps counted)
+- **~2 KB gzipped** (ESM build, no peer deps counted)
 - **Zero runtime deps**, only React/ReactDOM peer
 - **Tree-shakable** (`sideEffects: false`)
 - One `<svg>` per instance, no global pollution

package/dist/index.cjs

@@ -0,0 +1,4 @@
+"use client";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});let e=require("react"),t=require("react/jsx-runtime");var n=/iPad|iPhone|iPod/,r=/^((?!chrome|android).)*safari/i,i=()=>{if(typeof window>`u`)return!0;let e=window.navigator.userAgent;return!(n.test(e)||r.test(e))},a=()=>{let[t,n]=(0,e.useState)(!0);return(0,e.useEffect)(()=>{n(i())},[]),{hasFullFilterSupport:t}},o=({id:e,turbulenceBaseFrequency:n,turbulenceSeed:r,displacementScale:i})=>(0,t.jsxs)(`filter`,{id:e,x:`0%`,y:`0%`,width:`100%`,height:`100%`,filterUnits:`objectBoundingBox`,children:[(0,t.jsx)(`feTurbulence`,{type:`fractalNoise`,baseFrequency:n,numOctaves:1,seed:r,result:`turbulence`}),(0,t.jsxs)(`feComponentTransfer`,{in:`turbulence`,result:`mapped`,children:[(0,t.jsx)(`feFuncR`,{type:`gamma`,amplitude:1,exponent:10,offset:.5}),(0,t.jsx)(`feFuncG`,{type:`gamma`,amplitude:0,exponent:1,offset:0}),(0,t.jsx)(`feFuncB`,{type:`gamma`,amplitude:0,exponent:1,offset:.5})]}),(0,t.jsx)(`feGaussianBlur`,{in:`turbulence`,stdDeviation:3,result:`softMap`}),(0,t.jsx)(`feSpecularLighting`,{in:`softMap`,surfaceScale:5,specularConstant:1,specularExponent:100,lightingColor:`white`,result:`specLight`,children:(0,t.jsx)(`fePointLight`,{x:-200,y:-200,z:300})}),(0,t.jsx)(`feComposite`,{in:`specLight`,operator:`arithmetic`,k1:0,k2:1,k3:1,k4:0,result:`litImage`}),(0,t.jsx)(`feDisplacementMap`,{in:`SourceGraphic`,in2:`softMap`,scale:i,xChannelSelector:`R`,yChannelSelector:`G`})]}),s=({id:e,turbulenceBaseFrequency:n,turbulenceSeed:r})=>(0,t.jsxs)(`filter`,{id:e,x:`-20%`,y:`-20%`,width:`140%`,height:`140%`,filterUnits:`objectBoundingBox`,children:[(0,t.jsx)(`feTurbulence`,{type:`fractalNoise`,baseFrequency:n,numOctaves:2,seed:r,result:`turbulence`}),(0,t.jsx)(`feGaussianBlur`,{in:`turbulence`,stdDeviation:`2`,result:`blur`}),(0,t.jsx)(`feColorMatrix`,{in:`blur`,type:`matrix`,values:`1 0 0 0 0
+              0 1 0 0 0
+              0 0 1 0 0
+              0 0 0 0.15 0`,result:`transparency`}),(0,t.jsx)(`feBlend`,{in:`SourceGraphic`,in2:`transparency`,mode:`normal`})]}),c=`0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)`,l=`0 8px 32px rgba(0,0,0,0.28)`,u=`inset 0 1px 0 0 rgba(255,255,255,0.55), inset 0 -1px 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.08)`,d=e=>Array.isArray(e)?`${e[0]} ${e[1]}`:`${e}`,f=({children:n,className:r=``,backdropBlur:i=2,tintColor:f=`rgba(255, 255, 255, .2)`,displacementScale:p=150,turbulenceBaseFrequency:m=.008,turbulenceSeed:h=1.5,as:g=`div`,style:_,glassBorder:v=!1,...y})=>{let b=(0,e.useId)(),{hasFullFilterSupport:x}=a(),S=d(m);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(`svg`,{style:{display:`none`},children:x?(0,t.jsx)(o,{id:b,turbulenceBaseFrequency:S,turbulenceSeed:h,displacementScale:p}):(0,t.jsx)(s,{id:b,turbulenceBaseFrequency:S,turbulenceSeed:h})}),(0,t.jsxs)(g,{className:r,style:{position:`relative`,overflow:`hidden`,boxShadow:v?l:c,..._},...y,children:[(0,t.jsx)(`div`,{style:{position:`absolute`,inset:0,zIndex:0,overflow:`hidden`,borderRadius:`inherit`,backdropFilter:`blur(${i}px)`,WebkitBackdropFilter:`blur(${i}px)`,filter:`url(#${b})`,isolation:`isolate`,...!x&&{transform:`translateZ(0)`,willChange:`transform`}}}),(0,t.jsx)(`div`,{style:{position:`absolute`,inset:0,zIndex:1,borderRadius:`inherit`,background:f}}),v&&(0,t.jsx)(`span`,{"aria-hidden":`true`,style:{position:`absolute`,inset:0,zIndex:2,borderRadius:`inherit`,pointerEvents:`none`,background:`linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.06) 100%)`,boxShadow:u}}),(0,t.jsx)(`div`,{style:{position:`relative`,zIndex:3,borderRadius:`inherit`},children:n})]})]})};exports.LiquidGlass=f,exports.default=f;

package/dist/index.esm.js

@@ -1,194 +1,17 @@
 "use client";
 import { useEffect as e, useId as t, useState as n } from "react";
-//#region \0rolldown/runtime.js
-var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), i = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), a = /iPad|iPhone|iPod/, o = /^((?!chrome|android).)*safari/i, s = () => {
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/hooks/useBrowserDetection.ts
+var o = /iPad|iPhone|iPod/, s = /^((?!chrome|android).)*safari/i, c = () => {
 	if (typeof window > "u") return !0;
 	let e = window.navigator.userAgent;
-	return !(a.test(e) || o.test(e));
-}, c = () => {
+	return !(o.test(e) || s.test(e));
+}, l = () => {
 	let [t, r] = n(!0);
 	return e(() => {
-		r(s());
+		r(c());
 	}, []), { hasFullFilterSupport: t };
-}, l = /* @__PURE__ */ r(((e) => {
-	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-	function r(e, n, r) {
-		var i = null;
-		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
-		else r = n;
-		return n = r.ref, {
-			$$typeof: t,
-			type: e,
-			key: i,
-			ref: n === void 0 ? null : n,
-			props: r
-		};
-	}
-	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), u = /* @__PURE__ */ r(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e) {
-			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
-			if (typeof e == "string") return e;
-			switch (e) {
-				case v: return "Fragment";
-				case b: return "Profiler";
-				case y: return "StrictMode";
-				case w: return "Suspense";
-				case T: return "SuspenseList";
-				case O: return "Activity";
-			}
-			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
-				case _: return "Portal";
-				case S: return e.displayName || "Context";
-				case x: return (e._context.displayName || "Context") + ".Consumer";
-				case C:
-					var n = e.render;
-					return e = e.displayName, e || (e = n.displayName || n.name || "", e = e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
-				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
-				case D:
-					n = e._payload, e = e._init;
-					try {
-						return t(e(n));
-					} catch {}
-			}
-			return null;
-		}
-		function n(e) {
-			return "" + e;
-		}
-		function r(e) {
-			try {
-				n(e);
-				var t = !1;
-			} catch {
-				t = !0;
-			}
-			if (t) {
-				t = console;
-				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
-			}
-		}
-		function a(e) {
-			if (e === v) return "<>";
-			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
-			try {
-				var n = t(e);
-				return n ? "<" + n + ">" : "<...>";
-			} catch {
-				return "<...>";
-			}
-		}
-		function o() {
-			var e = A.A;
-			return e === null ? null : e.getOwner();
-		}
-		function s() {
-			return Error("react-stack-top-frame");
-		}
-		function c(e) {
-			if (j.call(e, "key")) {
-				var t = Object.getOwnPropertyDescriptor(e, "key").get;
-				if (t && t.isReactWarning) return !1;
-			}
-			return e.key !== void 0;
-		}
-		function l(e, t) {
-			function n() {
-				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
-			}
-			n.isReactWarning = !0, Object.defineProperty(e, "key", {
-				get: n,
-				configurable: !0
-			});
-		}
-		function u() {
-			var e = t(this.type);
-			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
-		}
-		function d(e, t, n, r, i, a) {
-			var o = n.ref;
-			return e = {
-				$$typeof: g,
-				type: e,
-				key: t,
-				props: n,
-				_owner: r
-			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				value: null
-			}) : Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				get: u
-			}), e._store = {}, Object.defineProperty(e._store, "validated", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: 0
-			}), Object.defineProperty(e, "_debugInfo", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: null
-			}), Object.defineProperty(e, "_debugStack", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: i
-			}), Object.defineProperty(e, "_debugTask", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: a
-			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-		}
-		function f(e, n, i, a, s, u) {
-			var f = n.children;
-			if (f !== void 0) if (a) if (M(f)) {
-				for (a = 0; a < f.length; a++) p(f[a]);
-				Object.freeze && Object.freeze(f);
-			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-			else p(f);
-			if (j.call(n, "key")) {
-				f = t(e);
-				var m = Object.keys(n).filter(function(e) {
-					return e !== "key";
-				});
-				a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
-			}
-			if (f = null, i !== void 0 && (r(i), f = "" + i), c(n) && (r(n.key), f = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
-			else i = n;
-			return f && l(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, i, o(), s, u);
-		}
-		function p(e) {
-			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-		}
-		function m(e) {
-			return typeof e == "object" && !!e && e.$$typeof === g;
-		}
-		var h = i("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
-			return null;
-		};
-		h = { react_stack_bottom_frame: function(e) {
-			return e();
-		} };
-		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(a(s)), R = {};
-		e.Fragment = v, e.jsx = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
-		}, e.jsxs = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
-		};
-	})();
-})), d = (/* @__PURE__ */ r(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = l() : t.exports = u();
-})))(), f = ({ id: e, turbulenceBaseFrequency: t, turbulenceSeed: n, displacementScale: r }) => /* @__PURE__ */ (0, d.jsxs)("filter", {
+}, u = ({ id: e, turbulenceBaseFrequency: t, turbulenceSeed: n, displacementScale: r }) => /* @__PURE__ */ a("filter", {
 	id: e,
 	x: "0%",
 	y: "0%",
@@ -196,30 +19,30 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 	height: "100%",
 	filterUnits: "objectBoundingBox",
 	children: [
-		/* @__PURE__ */ (0, d.jsx)("feTurbulence", {
+		/* @__PURE__ */ i("feTurbulence", {
 			type: "fractalNoise",
 			baseFrequency: t,
 			numOctaves: 1,
 			seed: n,
 			result: "turbulence"
 		}),
-		/* @__PURE__ */ (0, d.jsxs)("feComponentTransfer", {
+		/* @__PURE__ */ a("feComponentTransfer", {
 			in: "turbulence",
 			result: "mapped",
 			children: [
-				/* @__PURE__ */ (0, d.jsx)("feFuncR", {
+				/* @__PURE__ */ i("feFuncR", {
 					type: "gamma",
 					amplitude: 1,
 					exponent: 10,
 					offset: .5
 				}),
-				/* @__PURE__ */ (0, d.jsx)("feFuncG", {
+				/* @__PURE__ */ i("feFuncG", {
 					type: "gamma",
 					amplitude: 0,
 					exponent: 1,
 					offset: 0
 				}),
-				/* @__PURE__ */ (0, d.jsx)("feFuncB", {
+				/* @__PURE__ */ i("feFuncB", {
 					type: "gamma",
 					amplitude: 0,
 					exponent: 1,
@@ -227,25 +50,25 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 				})
 			]
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feGaussianBlur", {
+		/* @__PURE__ */ i("feGaussianBlur", {
 			in: "turbulence",
 			stdDeviation: 3,
 			result: "softMap"
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feSpecularLighting", {
+		/* @__PURE__ */ i("feSpecularLighting", {
 			in: "softMap",
 			surfaceScale: 5,
 			specularConstant: 1,
 			specularExponent: 100,
 			lightingColor: "white",
 			result: "specLight",
-			children: /* @__PURE__ */ (0, d.jsx)("fePointLight", {
+			children: /* @__PURE__ */ i("fePointLight", {
 				x: -200,
 				y: -200,
 				z: 300
 			})
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feComposite", {
+		/* @__PURE__ */ i("feComposite", {
 			in: "specLight",
 			operator: "arithmetic",
 			k1: 0,
@@ -254,7 +77,7 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			k4: 0,
 			result: "litImage"
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feDisplacementMap", {
+		/* @__PURE__ */ i("feDisplacementMap", {
 			in: "SourceGraphic",
 			in2: "softMap",
 			scale: r,
@@ -262,7 +85,7 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 			yChannelSelector: "G"
 		})
 	]
-}), p = ({ id: e, turbulenceBaseFrequency: t, turbulenceSeed: n }) => /* @__PURE__ */ (0, d.jsxs)("filter", {
+}), d = ({ id: e, turbulenceBaseFrequency: t, turbulenceSeed: n }) => /* @__PURE__ */ a("filter", {
 	id: e,
 	x: "-20%",
 	y: "-20%",
@@ -270,77 +93,77 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 	height: "140%",
 	filterUnits: "objectBoundingBox",
 	children: [
-		/* @__PURE__ */ (0, d.jsx)("feTurbulence", {
+		/* @__PURE__ */ i("feTurbulence", {
 			type: "fractalNoise",
 			baseFrequency: t,
 			numOctaves: 2,
 			seed: n,
 			result: "turbulence"
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feGaussianBlur", {
+		/* @__PURE__ */ i("feGaussianBlur", {
 			in: "turbulence",
 			stdDeviation: "2",
 			result: "blur"
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feColorMatrix", {
+		/* @__PURE__ */ i("feColorMatrix", {
 			in: "blur",
 			type: "matrix",
 			values: "1 0 0 0 0\n              0 1 0 0 0\n              0 0 1 0 0\n              0 0 0 0.15 0",
 			result: "transparency"
 		}),
-		/* @__PURE__ */ (0, d.jsx)("feBlend", {
+		/* @__PURE__ */ i("feBlend", {
 			in: "SourceGraphic",
 			in2: "transparency",
 			mode: "normal"
 		})
 	]
-}), m = "0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)", h = "0 8px 32px rgba(0,0,0,0.28)", g = "inset 0 1px 0 0 rgba(255,255,255,0.55), inset 0 -1px 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.08)", _ = (e) => Array.isArray(e) ? `${e[0]} ${e[1]}` : `${e}`, v = ({ children: e, className: n = "", backdropBlur: r = 2, tintColor: i = "rgba(255, 255, 255, .2)", displacementScale: a = 150, turbulenceBaseFrequency: o = .008, turbulenceSeed: s = 1.5, as: l = "div", style: u, glassBorder: v = !1, ...y }) => {
-	let b = t(), { hasFullFilterSupport: x } = c(), S = _(o);
-	return /* @__PURE__ */ (0, d.jsxs)(d.Fragment, { children: [/* @__PURE__ */ (0, d.jsx)("svg", {
+}), f = "0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)", p = "0 8px 32px rgba(0,0,0,0.28)", m = "inset 0 1px 0 0 rgba(255,255,255,0.55), inset 0 -1px 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.08)", h = (e) => Array.isArray(e) ? `${e[0]} ${e[1]}` : `${e}`, g = ({ children: e, className: n = "", backdropBlur: o = 2, tintColor: s = "rgba(255, 255, 255, .2)", displacementScale: c = 150, turbulenceBaseFrequency: g = .008, turbulenceSeed: _ = 1.5, as: v = "div", style: y, glassBorder: b = !1, ...x }) => {
+	let S = t(), { hasFullFilterSupport: C } = l(), w = h(g);
+	return /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("svg", {
 		style: { display: "none" },
-		children: x ? /* @__PURE__ */ (0, d.jsx)(f, {
-			id: b,
-			turbulenceBaseFrequency: S,
-			turbulenceSeed: s,
-			displacementScale: a
-		}) : /* @__PURE__ */ (0, d.jsx)(p, {
-			id: b,
-			turbulenceBaseFrequency: S,
-			turbulenceSeed: s
+		children: C ? /* @__PURE__ */ i(u, {
+			id: S,
+			turbulenceBaseFrequency: w,
+			turbulenceSeed: _,
+			displacementScale: c
+		}) : /* @__PURE__ */ i(d, {
+			id: S,
+			turbulenceBaseFrequency: w,
+			turbulenceSeed: _
 		})
-	}), /* @__PURE__ */ (0, d.jsxs)(l, {
+	}), /* @__PURE__ */ a(v, {
 		className: n,
 		style: {
 			position: "relative",
 			overflow: "hidden",
-			boxShadow: v ? h : m,
-			...u
+			boxShadow: b ? p : f,
+			...y
 		},
-		...y,
+		...x,
 		children: [
-			/* @__PURE__ */ (0, d.jsx)("div", { style: {
+			/* @__PURE__ */ i("div", { style: {
 				position: "absolute",
 				inset: 0,
 				zIndex: 0,
 				overflow: "hidden",
 				borderRadius: "inherit",
-				backdropFilter: `blur(${r}px)`,
-				WebkitBackdropFilter: `blur(${r}px)`,
-				filter: `url(#${b})`,
+				backdropFilter: `blur(${o}px)`,
+				WebkitBackdropFilter: `blur(${o}px)`,
+				filter: `url(#${S})`,
 				isolation: "isolate",
-				...!x && {
+				...!C && {
 					transform: "translateZ(0)",
 					willChange: "transform"
 				}
 			} }),
-			/* @__PURE__ */ (0, d.jsx)("div", { style: {
+			/* @__PURE__ */ i("div", { style: {
 				position: "absolute",
 				inset: 0,
 				zIndex: 1,
 				borderRadius: "inherit",
-				background: i
+				background: s
 			} }),
-			v && /* @__PURE__ */ (0, d.jsx)("span", {
+			b && /* @__PURE__ */ i("span", {
 				"aria-hidden": "true",
 				style: {
 					position: "absolute",
@@ -349,10 +172,10 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 					borderRadius: "inherit",
 					pointerEvents: "none",
 					background: "linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.06) 100%)",
-					boxShadow: g
+					boxShadow: m
 				}
 			}),
-			/* @__PURE__ */ (0, d.jsx)("div", {
+			/* @__PURE__ */ i("div", {
 				style: {
 					position: "relative",
 					zIndex: 3,
@@ -364,4 +187,4 @@ var r = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t
 	})] });
 };
 //#endregion
-export { v as LiquidGlass, v as default };
+export { g as LiquidGlass, g as default };

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "react-liquid-glass-svg",
-  "version": "1.0.0",
+  "version": "1.0.3",
   "type": "module",
   "description": "Apple liquid glass for React — pure SVG filters and backdrop-blur. No WebGL, no canvas, no shaders.",
-  "main": "./dist/index.js",
+  "main": "./dist/index.cjs",
   "module": "./dist/index.esm.js",
   "types": "./dist/index.d.ts",
   "homepage": "https://github.com/yurkagon/react-liquid-glass-svg#readme",
@@ -18,7 +18,7 @@
     ".": {
       "types": "./dist/index.d.ts",
       "import": "./dist/index.esm.js",
-      "require": "./dist/index.js"
+      "require": "./dist/index.cjs"
     },
     "./package.json": "./package.json"
   },

package/dist/index.umd.js

@@ -1,9 +0,0 @@
-"use client";(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react")):typeof define==`function`&&define.amd?define([`exports`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.LiquidGlass={},e.React))})(this,function(e,t){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var n=(e,t)=>()=>(t||(e((t={exports:{}}).exports,t),e=null),t.exports),r=/iPad|iPhone|iPod/,i=/^((?!chrome|android).)*safari/i,a=()=>{if(typeof window>`u`)return!0;let e=window.navigator.userAgent;return!(r.test(e)||i.test(e))},o=()=>{let[e,n]=(0,t.useState)(!0);return(0,t.useEffect)(()=>{n(a())},[]),{hasFullFilterSupport:e}},s=n((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),c=n((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||(e=n.displayName||n.name||``,e=e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,"ref",{enumerable:!1,value:null}):Object.defineProperty(e,"ref",{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
-  let props = %s;
-  <%s {...props} />
-React keys must be passed directly to JSX without using spread:
-  let props = %s;
-  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require("react"),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),l=n(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=s():t.exports=c()}))(),u=({id:e,turbulenceBaseFrequency:t,turbulenceSeed:n,displacementScale:r})=>(0,l.jsxs)(`filter`,{id:e,x:`0%`,y:`0%`,width:`100%`,height:`100%`,filterUnits:`objectBoundingBox`,children:[(0,l.jsx)(`feTurbulence`,{type:`fractalNoise`,baseFrequency:t,numOctaves:1,seed:n,result:`turbulence`}),(0,l.jsxs)(`feComponentTransfer`,{in:`turbulence`,result:`mapped`,children:[(0,l.jsx)(`feFuncR`,{type:`gamma`,amplitude:1,exponent:10,offset:.5}),(0,l.jsx)(`feFuncG`,{type:`gamma`,amplitude:0,exponent:1,offset:0}),(0,l.jsx)(`feFuncB`,{type:`gamma`,amplitude:0,exponent:1,offset:.5})]}),(0,l.jsx)(`feGaussianBlur`,{in:`turbulence`,stdDeviation:3,result:`softMap`}),(0,l.jsx)(`feSpecularLighting`,{in:`softMap`,surfaceScale:5,specularConstant:1,specularExponent:100,lightingColor:`white`,result:`specLight`,children:(0,l.jsx)(`fePointLight`,{x:-200,y:-200,z:300})}),(0,l.jsx)(`feComposite`,{in:`specLight`,operator:`arithmetic`,k1:0,k2:1,k3:1,k4:0,result:`litImage`}),(0,l.jsx)(`feDisplacementMap`,{in:`SourceGraphic`,in2:`softMap`,scale:r,xChannelSelector:`R`,yChannelSelector:`G`})]}),d=({id:e,turbulenceBaseFrequency:t,turbulenceSeed:n})=>(0,l.jsxs)(`filter`,{id:e,x:`-20%`,y:`-20%`,width:`140%`,height:`140%`,filterUnits:`objectBoundingBox`,children:[(0,l.jsx)(`feTurbulence`,{type:`fractalNoise`,baseFrequency:t,numOctaves:2,seed:n,result:`turbulence`}),(0,l.jsx)(`feGaussianBlur`,{in:`turbulence`,stdDeviation:`2`,result:`blur`}),(0,l.jsx)(`feColorMatrix`,{in:`blur`,type:`matrix`,values:`1 0 0 0 0
-              0 1 0 0 0
-              0 0 1 0 0
-              0 0 0 0.15 0`,result:`transparency`}),(0,l.jsx)(`feBlend`,{in:`SourceGraphic`,in2:`transparency`,mode:`normal`})]}),f=`0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)`,p=`0 8px 32px rgba(0,0,0,0.28)`,m=`inset 0 1px 0 0 rgba(255,255,255,0.55), inset 0 -1px 1px 0 rgba(255,255,255,0.12), inset 0 0 0 1px rgba(255,255,255,0.08)`,h=e=>Array.isArray(e)?`${e[0]} ${e[1]}`:`${e}`,g=({children:e,className:n=``,backdropBlur:r=2,tintColor:i=`rgba(255, 255, 255, .2)`,displacementScale:a=150,turbulenceBaseFrequency:s=.008,turbulenceSeed:c=1.5,as:g=`div`,style:_,glassBorder:v=!1,...y})=>{let b=(0,t.useId)(),{hasFullFilterSupport:x}=o(),S=h(s);return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`svg`,{style:{display:`none`},children:x?(0,l.jsx)(u,{id:b,turbulenceBaseFrequency:S,turbulenceSeed:c,displacementScale:a}):(0,l.jsx)(d,{id:b,turbulenceBaseFrequency:S,turbulenceSeed:c})}),(0,l.jsxs)(g,{className:n,style:{position:`relative`,overflow:`hidden`,boxShadow:v?p:f,..._},...y,children:[(0,l.jsx)(`div`,{style:{position:`absolute`,inset:0,zIndex:0,overflow:`hidden`,borderRadius:`inherit`,backdropFilter:`blur(${r}px)`,WebkitBackdropFilter:`blur(${r}px)`,filter:`url(#${b})`,isolation:`isolate`,...!x&&{transform:`translateZ(0)`,willChange:`transform`}}}),(0,l.jsx)(`div`,{style:{position:`absolute`,inset:0,zIndex:1,borderRadius:`inherit`,background:i}}),v&&(0,l.jsx)(`span`,{"aria-hidden":`true`,style:{position:`absolute`,inset:0,zIndex:2,borderRadius:`inherit`,pointerEvents:`none`,background:`linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(255,255,255,0.06) 100%)`,boxShadow:m}}),(0,l.jsx)(`div`,{style:{position:`relative`,zIndex:3,borderRadius:`inherit`},children:e})]})]})};e.LiquidGlass=g,e.default=g});