@creativoma/liquid-glass 1.0.3 → 1.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +40 -0
- package/README.md +29 -15
- package/dist/components/LiquidGlass.d.ts.map +1 -1
- package/dist/hooks/useBrowserDetection.d.ts +8 -0
- package/dist/hooks/useBrowserDetection.d.ts.map +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.esm.js +76 -74
- package/dist/index.umd.js +3 -3
- package/package.json +33 -32
- package/dist/liquid-glass.css +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,46 @@ All notable changes to this project will be documented in this file.
|
|
|
5
5
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
|
6
6
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
|
7
7
|
|
|
8
|
+
## [Unreleased]
|
|
9
|
+
|
|
10
|
+
## [1.1.1] - 2026-02-14
|
|
11
|
+
|
|
12
|
+
### Performance
|
|
13
|
+
|
|
14
|
+
- Removed demo CSS from library bundle, reducing package size by 13.5% (69.4 kB → 60 kB unpacked)
|
|
15
|
+
- Library now ships without CSS as component uses only inline styles
|
|
16
|
+
- Demo styles remain available in development mode
|
|
17
|
+
|
|
18
|
+
## [1.1.0] - 2026-02-14
|
|
19
|
+
|
|
20
|
+
### Added
|
|
21
|
+
|
|
22
|
+
- Exported `useBrowserDetection` hook for public use, allowing consumers to detect Safari/iOS browsers
|
|
23
|
+
- Performance optimizations: RegExp patterns hoisted to module level in browser detection
|
|
24
|
+
- Claude Code development files to `.gitignore` (`.claude/`, `.agents/`)
|
|
25
|
+
|
|
26
|
+
### Changed
|
|
27
|
+
|
|
28
|
+
- Updated package.json exports field: moved `types` condition first for better TypeScript compatibility
|
|
29
|
+
- Updated package.json paths to use relative `./` prefix for improved module resolution
|
|
30
|
+
- Updated major dependencies:
|
|
31
|
+
- `eslint-plugin-react-hooks` `^5.2.0` → `^7.0.1`
|
|
32
|
+
- `@vitejs/plugin-react` `^4.7.0` → `^5.1.4`
|
|
33
|
+
- Updated minor dependencies:
|
|
34
|
+
- `@types/node` `^20.19.25` → `^25.2.3`
|
|
35
|
+
- `@types/react` `^19.2.7` → `^19.2.14`
|
|
36
|
+
- `typescript-eslint` `^8.48.1` → `^8.55.0`
|
|
37
|
+
- React `^19.2.1` → `^19.2.4`
|
|
38
|
+
- Vite `^7.2.6` → `^7.3.1`
|
|
39
|
+
- And other dev dependencies to latest versions
|
|
40
|
+
|
|
41
|
+
### Documentation
|
|
42
|
+
|
|
43
|
+
- Improved README.md with professional formatting
|
|
44
|
+
- Removed emoji decorators from section headers
|
|
45
|
+
- Added comprehensive feature list and additional badges
|
|
46
|
+
- Enhanced API reference structure
|
|
47
|
+
|
|
8
48
|
## [1.0.3] - 2025-12-06
|
|
9
49
|
|
|
10
50
|
### Fixed
|
package/README.md
CHANGED
|
@@ -1,12 +1,24 @@
|
|
|
1
1
|
# @creativoma/liquid-glass
|
|
2
2
|
|
|
3
|
-
](https://www.npmjs.com/package/@creativoma/liquid-glass)
|
|
4
|
+
[](https://opensource.org/licenses/MIT)
|
|
5
|
+
[](https://www.typescriptlang.org/)
|
|
6
|
+
[](https://reactjs.org/)
|
|
4
7
|
|
|
5
|
-
A modern React component
|
|
8
|
+
A modern React component library featuring liquid frosted glass effect using TailwindCSS and SVG filters. Create elegant glassmorphism interfaces with advanced visual effects.
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
## Features
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
- Liquid frosted glass effect with customizable displacement mapping
|
|
13
|
+
- Full TypeScript support with comprehensive type definitions
|
|
14
|
+
- TailwindCSS integration for seamless styling
|
|
15
|
+
- Polymorphic component API (render as any HTML element)
|
|
16
|
+
- Cross-browser compatible with Safari/iOS fallback support
|
|
17
|
+
- Customizable blur, tint, and turbulence parameters
|
|
18
|
+
- Zero dependencies (peer dependencies only)
|
|
19
|
+
- ESM and UMD formats for maximum compatibility
|
|
20
|
+
|
|
21
|
+
## Installation
|
|
10
22
|
|
|
11
23
|
```bash
|
|
12
24
|
npm install @creativoma/liquid-glass
|
|
@@ -20,7 +32,7 @@ yarn add @creativoma/liquid-glass
|
|
|
20
32
|
pnpm add @creativoma/liquid-glass
|
|
21
33
|
```
|
|
22
34
|
|
|
23
|
-
##
|
|
35
|
+
## Quick Start
|
|
24
36
|
|
|
25
37
|
```jsx
|
|
26
38
|
import { LiquidGlass } from '@creativoma/liquid-glass'
|
|
@@ -37,7 +49,9 @@ function App() {
|
|
|
37
49
|
}
|
|
38
50
|
```
|
|
39
51
|
|
|
40
|
-
##
|
|
52
|
+
## API Reference
|
|
53
|
+
|
|
54
|
+
### Props
|
|
41
55
|
|
|
42
56
|
| Prop | Type | Default | Description |
|
|
43
57
|
| ------------------------- | ----------------- | --------------------------- | ----------------------------------------------------- |
|
|
@@ -51,7 +65,7 @@ function App() {
|
|
|
51
65
|
| `as` | `ElementType` | `'div'` | HTML component to render (div, button, section, etc.) |
|
|
52
66
|
| `style` | `CSSProperties` | - | Additional inline styles |
|
|
53
67
|
|
|
54
|
-
##
|
|
68
|
+
## Usage Examples
|
|
55
69
|
|
|
56
70
|
### Card with glass effect
|
|
57
71
|
|
|
@@ -137,7 +151,7 @@ function App() {
|
|
|
137
151
|
</LiquidGlass>
|
|
138
152
|
```
|
|
139
153
|
|
|
140
|
-
##
|
|
154
|
+
## Development
|
|
141
155
|
|
|
142
156
|
```bash
|
|
143
157
|
# Clone the repository
|
|
@@ -167,7 +181,7 @@ pnpm run preview
|
|
|
167
181
|
npm publish
|
|
168
182
|
```
|
|
169
183
|
|
|
170
|
-
##
|
|
184
|
+
## Project Structure
|
|
171
185
|
|
|
172
186
|
```
|
|
173
187
|
liquid-glass/
|
|
@@ -189,13 +203,13 @@ liquid-glass/
|
|
|
189
203
|
└── tailwind.config.js
|
|
190
204
|
```
|
|
191
205
|
|
|
192
|
-
##
|
|
206
|
+
## Requirements
|
|
193
207
|
|
|
194
208
|
- React >= 18.0.0
|
|
195
209
|
- React DOM >= 18.0.0
|
|
196
210
|
- TailwindCSS (component uses Tailwind classes)
|
|
197
211
|
|
|
198
|
-
##
|
|
212
|
+
## Technologies
|
|
199
213
|
|
|
200
214
|
- **React** - Component library
|
|
201
215
|
- **TypeScript** - Static typing
|
|
@@ -203,7 +217,7 @@ liquid-glass/
|
|
|
203
217
|
- **Tailwind CSS** - CSS framework for glassmorphism effect
|
|
204
218
|
- **SVG Filters** - Advanced visual effects with feTurbulence and feDisplacementMap
|
|
205
219
|
|
|
206
|
-
##
|
|
220
|
+
## Package Formats
|
|
207
221
|
|
|
208
222
|
This package includes multiple formats for maximum compatibility:
|
|
209
223
|
|
|
@@ -211,7 +225,7 @@ This package includes multiple formats for maximum compatibility:
|
|
|
211
225
|
- **UMD** (`dist/index.umd.js`) - For universal compatibility
|
|
212
226
|
- **TypeScript** (`dist/index.d.ts`) - Type definitions
|
|
213
227
|
|
|
214
|
-
##
|
|
228
|
+
## Contributing
|
|
215
229
|
|
|
216
230
|
Contributions are welcome! Please:
|
|
217
231
|
|
|
@@ -221,10 +235,10 @@ Contributions are welcome! Please:
|
|
|
221
235
|
4. Push to the branch (`git push origin feature/amazing-feature`)
|
|
222
236
|
5. Open a Pull Request
|
|
223
237
|
|
|
224
|
-
##
|
|
238
|
+
## License
|
|
225
239
|
|
|
226
240
|
MIT © [creativoma](https://github.com/creativoma)
|
|
227
241
|
|
|
228
|
-
##
|
|
242
|
+
## Changelog
|
|
229
243
|
|
|
230
244
|
See [CHANGELOG.md](./CHANGELOG.md) for a detailed list of changes.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LiquidGlass.d.ts","sourceRoot":"","sources":["../../src/components/LiquidGlass.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"LiquidGlass.d.ts","sourceRoot":"","sources":["../../src/components/LiquidGlass.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAS,MAAM,OAAO,CAAA;AACjC,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAG/C,QAAA,MAAM,WAAW,EAAE,EAAE,CAAC,gBAAgB,CA6IrC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Custom hook for detecting browser capabilities
|
|
3
|
+
* Returns whether a simplified filter should be used for Safari/iOS
|
|
4
|
+
*/
|
|
5
|
+
export declare const useBrowserDetection: () => {
|
|
6
|
+
useSimplifiedFilter: boolean;
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=useBrowserDetection.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBrowserDetection.d.ts","sourceRoot":"","sources":["../../src/hooks/useBrowserDetection.ts"],"names":[],"mappings":"AAsBA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;CAM/B,CAAA"}
|
package/dist/index.d.ts
CHANGED
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,0BAA0B,CAAA;AACjE,YAAY,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAA"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
import ee, {
|
|
2
|
-
var h = { exports: {} },
|
|
3
|
-
var
|
|
4
|
-
function
|
|
5
|
-
if (
|
|
6
|
-
|
|
7
|
-
var
|
|
8
|
-
function u(d,
|
|
1
|
+
import ee, { useState as re, useId as te } from "react";
|
|
2
|
+
var h = { exports: {} }, v = {};
|
|
3
|
+
var D;
|
|
4
|
+
function ne() {
|
|
5
|
+
if (D) return v;
|
|
6
|
+
D = 1;
|
|
7
|
+
var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), c = /* @__PURE__ */ Symbol.for("react.fragment");
|
|
8
|
+
function u(d, l, i) {
|
|
9
9
|
var f = null;
|
|
10
|
-
if (
|
|
11
|
-
|
|
12
|
-
for (var m in
|
|
13
|
-
m !== "key" && (
|
|
14
|
-
} else
|
|
15
|
-
return
|
|
16
|
-
$$typeof:
|
|
10
|
+
if (i !== void 0 && (f = "" + i), l.key !== void 0 && (f = "" + l.key), "key" in l) {
|
|
11
|
+
i = {};
|
|
12
|
+
for (var m in l)
|
|
13
|
+
m !== "key" && (i[m] = l[m]);
|
|
14
|
+
} else i = l;
|
|
15
|
+
return l = i.ref, {
|
|
16
|
+
$$typeof: s,
|
|
17
17
|
type: d,
|
|
18
18
|
key: f,
|
|
19
|
-
ref:
|
|
20
|
-
props:
|
|
19
|
+
ref: l !== void 0 ? l : null,
|
|
20
|
+
props: i
|
|
21
21
|
};
|
|
22
22
|
}
|
|
23
|
-
return
|
|
23
|
+
return v.Fragment = c, v.jsx = u, v.jsxs = u, v;
|
|
24
24
|
}
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
function
|
|
28
|
-
return
|
|
29
|
-
function
|
|
25
|
+
var _ = {};
|
|
26
|
+
var L;
|
|
27
|
+
function ae() {
|
|
28
|
+
return L || (L = 1, process.env.NODE_ENV !== "production" && (function() {
|
|
29
|
+
function s(e) {
|
|
30
30
|
if (e == null) return null;
|
|
31
31
|
if (typeof e == "function")
|
|
32
|
-
return e.$$typeof ===
|
|
32
|
+
return e.$$typeof === Z ? null : e.displayName || e.name || null;
|
|
33
33
|
if (typeof e == "string") return e;
|
|
34
34
|
switch (e) {
|
|
35
35
|
case y:
|
|
36
36
|
return "Fragment";
|
|
37
|
-
case W:
|
|
38
|
-
return "Profiler";
|
|
39
37
|
case U:
|
|
38
|
+
return "Profiler";
|
|
39
|
+
case W:
|
|
40
40
|
return "StrictMode";
|
|
41
41
|
case J:
|
|
42
42
|
return "Suspense";
|
|
43
43
|
case V:
|
|
44
44
|
return "SuspenseList";
|
|
45
|
-
case
|
|
45
|
+
case H:
|
|
46
46
|
return "Activity";
|
|
47
47
|
}
|
|
48
48
|
if (typeof e == "object")
|
|
@@ -59,11 +59,11 @@ function oe() {
|
|
|
59
59
|
var r = e.render;
|
|
60
60
|
return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
|
|
61
61
|
case X:
|
|
62
|
-
return r = e.displayName || null, r !== null ? r :
|
|
62
|
+
return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
|
|
63
63
|
case k:
|
|
64
64
|
r = e._payload, e = e._init;
|
|
65
65
|
try {
|
|
66
|
-
return
|
|
66
|
+
return s(e(r));
|
|
67
67
|
} catch {
|
|
68
68
|
}
|
|
69
69
|
}
|
|
@@ -94,17 +94,17 @@ function oe() {
|
|
|
94
94
|
if (typeof e == "object" && e !== null && e.$$typeof === k)
|
|
95
95
|
return "<...>";
|
|
96
96
|
try {
|
|
97
|
-
var r =
|
|
97
|
+
var r = s(e);
|
|
98
98
|
return r ? "<" + r + ">" : "<...>";
|
|
99
99
|
} catch {
|
|
100
100
|
return "<...>";
|
|
101
101
|
}
|
|
102
102
|
}
|
|
103
|
-
function
|
|
103
|
+
function l() {
|
|
104
104
|
var e = S.A;
|
|
105
105
|
return e === null ? null : e.getOwner();
|
|
106
106
|
}
|
|
107
|
-
function
|
|
107
|
+
function i() {
|
|
108
108
|
return Error("react-stack-top-frame");
|
|
109
109
|
}
|
|
110
110
|
function f(e) {
|
|
@@ -127,7 +127,7 @@ function oe() {
|
|
|
127
127
|
});
|
|
128
128
|
}
|
|
129
129
|
function T() {
|
|
130
|
-
var e =
|
|
130
|
+
var e = s(this.type);
|
|
131
131
|
return F[e] || (F[e] = !0, console.error(
|
|
132
132
|
"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."
|
|
133
133
|
)), e = this.props.ref, e !== void 0 ? e : null;
|
|
@@ -135,7 +135,7 @@ function oe() {
|
|
|
135
135
|
function g(e, r, n, a, R, O) {
|
|
136
136
|
var o = n.ref;
|
|
137
137
|
return e = {
|
|
138
|
-
$$typeof:
|
|
138
|
+
$$typeof: P,
|
|
139
139
|
type: e,
|
|
140
140
|
key: r,
|
|
141
141
|
props: n,
|
|
@@ -179,11 +179,11 @@ function oe() {
|
|
|
179
179
|
);
|
|
180
180
|
else p(o);
|
|
181
181
|
if (N.call(r, "key")) {
|
|
182
|
-
o =
|
|
183
|
-
var
|
|
182
|
+
o = s(e);
|
|
183
|
+
var b = Object.keys(r).filter(function(K) {
|
|
184
184
|
return K !== "key";
|
|
185
185
|
});
|
|
186
|
-
a = 0 <
|
|
186
|
+
a = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", Y[o + a] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
|
|
187
187
|
`A props object containing a "key" prop is being spread into JSX:
|
|
188
188
|
let props = %s;
|
|
189
189
|
<%s {...props} />
|
|
@@ -192,14 +192,14 @@ React keys must be passed directly to JSX without using spread:
|
|
|
192
192
|
<%s key={someKey} {...props} />`,
|
|
193
193
|
a,
|
|
194
194
|
o,
|
|
195
|
-
|
|
195
|
+
b,
|
|
196
196
|
o
|
|
197
197
|
), Y[o + a] = !0);
|
|
198
198
|
}
|
|
199
199
|
if (o = null, n !== void 0 && (u(n), o = "" + n), f(r) && (u(r.key), o = "" + r.key), "key" in r) {
|
|
200
200
|
n = {};
|
|
201
|
-
for (var
|
|
202
|
-
|
|
201
|
+
for (var A in r)
|
|
202
|
+
A !== "key" && (n[A] = r[A]);
|
|
203
203
|
} else n = r;
|
|
204
204
|
return o && m(
|
|
205
205
|
n,
|
|
@@ -208,7 +208,7 @@ React keys must be passed directly to JSX without using spread:
|
|
|
208
208
|
e,
|
|
209
209
|
o,
|
|
210
210
|
n,
|
|
211
|
-
|
|
211
|
+
l(),
|
|
212
212
|
R,
|
|
213
213
|
O
|
|
214
214
|
);
|
|
@@ -217,69 +217,70 @@ React keys must be passed directly to JSX without using spread:
|
|
|
217
217
|
E(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? E(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
|
|
218
218
|
}
|
|
219
219
|
function E(e) {
|
|
220
|
-
return typeof e == "object" && e !== null && e.$$typeof ===
|
|
220
|
+
return typeof e == "object" && e !== null && e.$$typeof === P;
|
|
221
221
|
}
|
|
222
|
-
var
|
|
222
|
+
var x = ee, P = /* @__PURE__ */ Symbol.for("react.transitional.element"), G = /* @__PURE__ */ Symbol.for("react.portal"), y = /* @__PURE__ */ Symbol.for("react.fragment"), W = /* @__PURE__ */ Symbol.for("react.strict_mode"), U = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), z = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), J = /* @__PURE__ */ Symbol.for("react.suspense"), V = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), H = /* @__PURE__ */ Symbol.for("react.activity"), Z = /* @__PURE__ */ Symbol.for("react.client.reference"), S = x.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, Q = Array.isArray, w = console.createTask ? console.createTask : function() {
|
|
223
223
|
return null;
|
|
224
224
|
};
|
|
225
|
-
|
|
225
|
+
x = {
|
|
226
226
|
react_stack_bottom_frame: function(e) {
|
|
227
227
|
return e();
|
|
228
228
|
}
|
|
229
229
|
};
|
|
230
|
-
var C, F = {},
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
)(),
|
|
234
|
-
|
|
230
|
+
var C, F = {}, I = x.react_stack_bottom_frame.bind(
|
|
231
|
+
x,
|
|
232
|
+
i
|
|
233
|
+
)(), $ = w(d(i)), Y = {};
|
|
234
|
+
_.Fragment = y, _.jsx = function(e, r, n) {
|
|
235
235
|
var a = 1e4 > S.recentlyCreatedOwnerStacks++;
|
|
236
236
|
return j(
|
|
237
237
|
e,
|
|
238
238
|
r,
|
|
239
239
|
n,
|
|
240
240
|
!1,
|
|
241
|
-
a ? Error("react-stack-top-frame") :
|
|
242
|
-
a ? w(d(e)) :
|
|
241
|
+
a ? Error("react-stack-top-frame") : I,
|
|
242
|
+
a ? w(d(e)) : $
|
|
243
243
|
);
|
|
244
|
-
},
|
|
244
|
+
}, _.jsxs = function(e, r, n) {
|
|
245
245
|
var a = 1e4 > S.recentlyCreatedOwnerStacks++;
|
|
246
246
|
return j(
|
|
247
247
|
e,
|
|
248
248
|
r,
|
|
249
249
|
n,
|
|
250
250
|
!0,
|
|
251
|
-
a ? Error("react-stack-top-frame") :
|
|
252
|
-
a ? w(d(e)) :
|
|
251
|
+
a ? Error("react-stack-top-frame") : I,
|
|
252
|
+
a ? w(d(e)) : $
|
|
253
253
|
);
|
|
254
254
|
};
|
|
255
|
-
})()),
|
|
255
|
+
})()), _;
|
|
256
256
|
}
|
|
257
257
|
var M;
|
|
258
|
-
function
|
|
259
|
-
return M || (M = 1, process.env.NODE_ENV === "production" ? h.exports =
|
|
258
|
+
function oe() {
|
|
259
|
+
return M || (M = 1, process.env.NODE_ENV === "production" ? h.exports = ne() : h.exports = ae()), h.exports;
|
|
260
260
|
}
|
|
261
|
-
var t =
|
|
262
|
-
const le = () => {
|
|
261
|
+
var t = oe();
|
|
262
|
+
const se = /iPad|iPhone|iPod/, le = /^((?!chrome|android).)*safari/i, ie = () => {
|
|
263
263
|
if (typeof window > "u") return !1;
|
|
264
|
-
const
|
|
264
|
+
const s = window.navigator.userAgent, c = se.test(s), u = le.test(s);
|
|
265
265
|
return c || u;
|
|
266
|
-
}, ue = ({
|
|
267
|
-
|
|
266
|
+
}, ue = () => {
|
|
267
|
+
const [s] = re(() => ie());
|
|
268
|
+
return { useSimplifiedFilter: s };
|
|
269
|
+
}, fe = ({
|
|
270
|
+
children: s,
|
|
268
271
|
className: c = "",
|
|
269
272
|
backdropBlur: u = 2,
|
|
270
273
|
tintColor: d = "rgba(255, 255, 255, .2)",
|
|
271
|
-
displacementScale:
|
|
272
|
-
turbulenceBaseFrequency:
|
|
274
|
+
displacementScale: l = 150,
|
|
275
|
+
turbulenceBaseFrequency: i = "0.008 0.008",
|
|
273
276
|
turbulenceSeed: f = 1.5,
|
|
274
277
|
as: m = "div",
|
|
275
278
|
style: T,
|
|
276
279
|
...g
|
|
277
280
|
}) => {
|
|
278
|
-
const p = `liquid-glass-${
|
|
279
|
-
return
|
|
280
|
-
|
|
281
|
-
}, []), /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
282
|
-
/* @__PURE__ */ t.jsx("svg", { style: { display: "none" }, children: E ? (
|
|
281
|
+
const p = `liquid-glass-${te().replace(/:/g, "-")}`, { useSimplifiedFilter: E } = ue();
|
|
282
|
+
return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
|
|
283
|
+
/* @__PURE__ */ t.jsx("svg", { style: { display: "none" }, suppressHydrationWarning: !0, children: E ? (
|
|
283
284
|
// Simplified filter for Safari/iOS - uses only well-supported primitives
|
|
284
285
|
/* @__PURE__ */ t.jsxs(
|
|
285
286
|
"filter",
|
|
@@ -295,7 +296,7 @@ const le = () => {
|
|
|
295
296
|
"feTurbulence",
|
|
296
297
|
{
|
|
297
298
|
type: "fractalNoise",
|
|
298
|
-
baseFrequency:
|
|
299
|
+
baseFrequency: i,
|
|
299
300
|
numOctaves: 2,
|
|
300
301
|
seed: f,
|
|
301
302
|
result: "turbulence"
|
|
@@ -334,7 +335,7 @@ const le = () => {
|
|
|
334
335
|
"feTurbulence",
|
|
335
336
|
{
|
|
336
337
|
type: "fractalNoise",
|
|
337
|
-
baseFrequency:
|
|
338
|
+
baseFrequency: i,
|
|
338
339
|
numOctaves: 1,
|
|
339
340
|
seed: f,
|
|
340
341
|
result: "turbulence"
|
|
@@ -375,7 +376,7 @@ const le = () => {
|
|
|
375
376
|
{
|
|
376
377
|
in: "SourceGraphic",
|
|
377
378
|
in2: "softMap",
|
|
378
|
-
scale:
|
|
379
|
+
scale: l,
|
|
379
380
|
xChannelSelector: "R",
|
|
380
381
|
yChannelSelector: "G"
|
|
381
382
|
}
|
|
@@ -420,12 +421,13 @@ const le = () => {
|
|
|
420
421
|
}
|
|
421
422
|
}
|
|
422
423
|
),
|
|
423
|
-
/* @__PURE__ */ t.jsx("div", { className: "relative z-[2]", children:
|
|
424
|
+
/* @__PURE__ */ t.jsx("div", { className: "relative z-[2]", children: s })
|
|
424
425
|
]
|
|
425
426
|
}
|
|
426
427
|
)
|
|
427
428
|
] });
|
|
428
429
|
};
|
|
429
430
|
export {
|
|
430
|
-
|
|
431
|
+
fe as LiquidGlass,
|
|
432
|
+
ue as useBrowserDetection
|
|
431
433
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
(function(m
|
|
1
|
+
(function(c,m){typeof exports=="object"&&typeof module<"u"?m(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],m):(c=typeof globalThis<"u"?globalThis:c||self,m(c.LiquidGlass={},c.React))})(this,(function(c,m){"use strict";var h={exports:{}},_={};var C;function q(){if(C)return _;C=1;var o=Symbol.for("react.transitional.element"),f=Symbol.for("react.fragment");function u(p,i,l){var d=null;if(l!==void 0&&(d=""+l),i.key!==void 0&&(d=""+i.key),"key"in i){l={};for(var b in i)b!=="key"&&(l[b]=i[b])}else l=i;return i=l.ref,{$$typeof:o,type:p,key:d,ref:i!==void 0?i:null,props:l}}return _.Fragment=f,_.jsx=u,_.jsxs=u,_}var x={};var F;function z(){return F||(F=1,process.env.NODE_ENV!=="production"&&(function(){function o(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ie?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case k:return"Fragment";case K:return"Profiler";case Q:return"StrictMode";case ne:return"Suspense";case ae:return"SuspenseList";case oe: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 Z:return"Portal";case re:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return r=e.displayName||null,r!==null?r:o(e.type)||"Memo";case w:r=e._payload,e=e._init;try{return o(e(r))}catch{}}return null}function f(e){return""+e}function u(e){try{f(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),f(e)}}function p(e){if(e===k)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===w)return"<...>";try{var r=o(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=O.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function d(e){if(D.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function b(e,r){function n(){G||(G=!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)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function j(){var e=o(this.type);return M[e]||(M[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?e:null}function y(e,r,n,a,g,P){var s=n.ref;return e={$$typeof:L,type:e,key:r,props:n,_owner:a},(s!==void 0?s:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:j}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),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:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function S(e,r,n,a,g,P){var s=r.children;if(s!==void 0)if(a)if(le(s)){for(a=0;a<s.length;a++)E(s[a]);Object.freeze&&Object.freeze(s)}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 E(s);if(D.call(r,"key")){s=o(e);var v=Object.keys(r).filter(function(ue){return ue!=="key"});a=0<v.length?"{key: someKey, "+v.join(": ..., ")+": ...}":"{key: someKey}",U[s+a]||(v=0<v.length?"{"+v.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
2
2
|
let props = %s;
|
|
3
3
|
<%s {...props} />
|
|
4
4
|
React keys must be passed directly to JSX without using spread:
|
|
5
5
|
let props = %s;
|
|
6
|
-
<%s key={someKey} {...props} />`,a,s,
|
|
6
|
+
<%s key={someKey} {...props} />`,a,s,v,s),U[s+a]=!0)}if(s=null,n!==void 0&&(u(n),s=""+n),d(r)&&(u(r.key),s=""+r.key),"key"in r){n={};for(var N in r)N!=="key"&&(n[N]=r[N])}else n=r;return s&&b(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),y(e,s,n,i(),g,P)}function E(e){R(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===w&&(e._payload.status==="fulfilled"?R(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function R(e){return typeof e=="object"&&e!==null&&e.$$typeof===L}var T=m,L=Symbol.for("react.transitional.element"),Z=Symbol.for("react.portal"),k=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),re=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),ae=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),w=Symbol.for("react.lazy"),oe=Symbol.for("react.activity"),ie=Symbol.for("react.client.reference"),O=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,le=Array.isArray,A=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var G,M={},$=T.react_stack_bottom_frame.bind(T,l)(),W=A(p(l)),U={};x.Fragment=k,x.jsx=function(e,r,n){var a=1e4>O.recentlyCreatedOwnerStacks++;return S(e,r,n,!1,a?Error("react-stack-top-frame"):$,a?A(p(e)):W)},x.jsxs=function(e,r,n){var a=1e4>O.recentlyCreatedOwnerStacks++;return S(e,r,n,!0,a?Error("react-stack-top-frame"):$,a?A(p(e)):W)}})()),x}var I;function B(){return I||(I=1,process.env.NODE_ENV==="production"?h.exports=q():h.exports=z()),h.exports}var t=B();const J=/iPad|iPhone|iPod/,V=/^((?!chrome|android).)*safari/i,X=()=>{if(typeof window>"u")return!1;const o=window.navigator.userAgent,f=J.test(o),u=V.test(o);return f||u},Y=()=>{const[o]=m.useState(()=>X());return{useSimplifiedFilter:o}},H=({children:o,className:f="",backdropBlur:u=2,tintColor:p="rgba(255, 255, 255, .2)",displacementScale:i=150,turbulenceBaseFrequency:l="0.008 0.008",turbulenceSeed:d=1.5,as:b="div",style:j,...y})=>{const E=`liquid-glass-${m.useId().replace(/:/g,"-")}`,{useSimplifiedFilter:R}=Y();return t.jsxs(t.Fragment,{children:[t.jsx("svg",{style:{display:"none"},suppressHydrationWarning:!0,children:R?t.jsxs("filter",{id:E,x:"-20%",y:"-20%",width:"140%",height:"140%",filterUnits:"objectBoundingBox",children:[t.jsx("feTurbulence",{type:"fractalNoise",baseFrequency:l,numOctaves:2,seed:d,result:"turbulence"}),t.jsx("feGaussianBlur",{in:"turbulence",stdDeviation:"2",result:"blur"}),t.jsx("feColorMatrix",{in:"blur",type:"matrix",values:`1 0 0 0 0
|
|
7
7
|
0 1 0 0 0
|
|
8
8
|
0 0 1 0 0
|
|
9
|
-
0 0 0 0.15 0`,result:"transparency"}),t.jsx("feBlend",{in:"SourceGraphic",in2:"transparency",mode:"normal"})]}):t.jsxs("filter",{id:
|
|
9
|
+
0 0 0 0.15 0`,result:"transparency"}),t.jsx("feBlend",{in:"SourceGraphic",in2:"transparency",mode:"normal"})]}):t.jsxs("filter",{id:E,x:"0%",y:"0%",width:"100%",height:"100%",filterUnits:"objectBoundingBox",children:[t.jsx("feTurbulence",{type:"fractalNoise",baseFrequency:l,numOctaves:1,seed:d,result:"turbulence"}),t.jsxs("feComponentTransfer",{in:"turbulence",result:"mapped",children:[t.jsx("feFuncR",{type:"gamma",amplitude:1,exponent:10,offset:.5}),t.jsx("feFuncG",{type:"gamma",amplitude:0,exponent:1,offset:0}),t.jsx("feFuncB",{type:"gamma",amplitude:0,exponent:1,offset:.5})]}),t.jsx("feGaussianBlur",{in:"turbulence",stdDeviation:3,result:"softMap"}),t.jsx("feSpecularLighting",{in:"softMap",surfaceScale:5,specularConstant:1,specularExponent:100,lightingColor:"white",result:"specLight",children:t.jsx("fePointLight",{x:-200,y:-200,z:300})}),t.jsx("feComposite",{in:"specLight",operator:"arithmetic",k1:0,k2:1,k3:1,k4:0,result:"litImage"}),t.jsx("feDisplacementMap",{in:"SourceGraphic",in2:"softMap",scale:i,xChannelSelector:"R",yChannelSelector:"G"})]})}),t.jsxs(b,{className:`relative overflow-hidden ${f}`,style:{boxShadow:"0 6px 6px rgba(0, 0, 0, 0.2), 0 0 20px rgba(0, 0, 0, 0.1)",...j},...y,children:[t.jsx("div",{className:"absolute inset-0 z-0 overflow-hidden",style:{backdropFilter:`blur(${u}px)`,WebkitBackdropFilter:`blur(${u}px)`,filter:`url(#${E})`,isolation:"isolate",...R&&{transform:"translateZ(0)",willChange:"transform"}}}),t.jsx("div",{className:"absolute inset-0 z-[1]",style:{background:p}}),t.jsx("div",{className:"relative z-[2]",children:o})]})]})};c.LiquidGlass=H,c.useBrowserDetection=Y,Object.defineProperty(c,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@creativoma/liquid-glass",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A React wrapper component with liquid frosted glass effect using TailwindCSS",
|
|
6
|
-
"main": "dist/index.js",
|
|
7
|
-
"module": "dist/index.esm.js",
|
|
8
|
-
"types": "dist/index.d.ts",
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.esm.js",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
9
|
"homepage": "https://github.com/creativoma/liquid-glass#readme",
|
|
10
10
|
"repository": {
|
|
11
11
|
"type": "git",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
},
|
|
14
14
|
"exports": {
|
|
15
15
|
".": {
|
|
16
|
+
"types": "./dist/index.d.ts",
|
|
16
17
|
"import": "./dist/index.esm.js",
|
|
17
|
-
"require": "./dist/index.js"
|
|
18
|
-
"types": "./dist/index.d.ts"
|
|
18
|
+
"require": "./dist/index.js"
|
|
19
19
|
}
|
|
20
20
|
},
|
|
21
21
|
"files": [
|
|
@@ -25,6 +25,15 @@
|
|
|
25
25
|
"LICENSE"
|
|
26
26
|
],
|
|
27
27
|
"sideEffects": false,
|
|
28
|
+
"scripts": {
|
|
29
|
+
"dev": "vite",
|
|
30
|
+
"preview": "vite preview",
|
|
31
|
+
"build:demo": "vite build --config vite.config.ts",
|
|
32
|
+
"build:lib": "tsc && vite build --config vite.config.lib.ts",
|
|
33
|
+
"lint": "eslint . --ext .ts,.tsx",
|
|
34
|
+
"format": "prettier --write .",
|
|
35
|
+
"prepublishOnly": "npm run build:lib"
|
|
36
|
+
},
|
|
28
37
|
"keywords": [
|
|
29
38
|
"react",
|
|
30
39
|
"glass",
|
|
@@ -48,38 +57,30 @@
|
|
|
48
57
|
"react-dom": ">=18.0.0"
|
|
49
58
|
},
|
|
50
59
|
"devDependencies": {
|
|
51
|
-
"@eslint/js": "^9.39.
|
|
52
|
-
"@tailwindcss/postcss": "^4.1.
|
|
53
|
-
"@types/node": "^
|
|
54
|
-
"@types/react": "^19.2.
|
|
60
|
+
"@eslint/js": "^9.39.2",
|
|
61
|
+
"@tailwindcss/postcss": "^4.1.18",
|
|
62
|
+
"@types/node": "^25.2.3",
|
|
63
|
+
"@types/react": "^19.2.14",
|
|
55
64
|
"@types/react-dom": "^19.2.3",
|
|
56
|
-
"@vitejs/plugin-react": "^
|
|
57
|
-
"autoprefixer": "^10.4.
|
|
58
|
-
"eslint": "^9.39.
|
|
59
|
-
"eslint-plugin-react-hooks": "^
|
|
60
|
-
"eslint-plugin-react-refresh": "^0.
|
|
61
|
-
"globals": "^
|
|
65
|
+
"@vitejs/plugin-react": "^5.1.4",
|
|
66
|
+
"autoprefixer": "^10.4.24",
|
|
67
|
+
"eslint": "^9.39.2",
|
|
68
|
+
"eslint-plugin-react-hooks": "^7.0.1",
|
|
69
|
+
"eslint-plugin-react-refresh": "^0.5.0",
|
|
70
|
+
"globals": "^17.3.0",
|
|
62
71
|
"postcss": "^8.5.6",
|
|
63
|
-
"prettier": "^3.
|
|
64
|
-
"prettier-plugin-tailwindcss": "^0.
|
|
65
|
-
"react": "^19.2.
|
|
66
|
-
"react-dom": "^19.2.
|
|
67
|
-
"tailwindcss": "^4.1.
|
|
72
|
+
"prettier": "^3.8.1",
|
|
73
|
+
"prettier-plugin-tailwindcss": "^0.7.2",
|
|
74
|
+
"react": "^19.2.4",
|
|
75
|
+
"react-dom": "^19.2.4",
|
|
76
|
+
"tailwindcss": "^4.1.18",
|
|
68
77
|
"typescript": "^5.9.3",
|
|
69
|
-
"typescript-eslint": "^8.
|
|
70
|
-
"vite": "^7.
|
|
78
|
+
"typescript-eslint": "^8.55.0",
|
|
79
|
+
"vite": "^7.3.1",
|
|
71
80
|
"vite-plugin-dts": "^4.5.4"
|
|
72
81
|
},
|
|
73
82
|
"publishConfig": {
|
|
74
83
|
"registry": "https://registry.npmjs.org/",
|
|
75
84
|
"access": "public"
|
|
76
|
-
},
|
|
77
|
-
"scripts": {
|
|
78
|
-
"dev": "vite",
|
|
79
|
-
"preview": "vite preview",
|
|
80
|
-
"build:demo": "vite build --config vite.config.ts",
|
|
81
|
-
"build:lib": "tsc && vite build --config vite.config.lib.ts",
|
|
82
|
-
"lint": "eslint . --ext .ts,.tsx",
|
|
83
|
-
"format": "prettier --write ."
|
|
84
85
|
}
|
|
85
|
-
}
|
|
86
|
+
}
|
package/dist/liquid-glass.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-tracking:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-backdrop-blur:initial;--tw-backdrop-brightness:initial;--tw-backdrop-contrast:initial;--tw-backdrop-grayscale:initial;--tw-backdrop-hue-rotate:initial;--tw-backdrop-invert:initial;--tw-backdrop-opacity:initial;--tw-backdrop-saturate:initial;--tw-backdrop-sepia:initial;--tw-scale-x:1;--tw-scale-y:1;--tw-scale-z:1}}}@layer theme{:root,:host{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-500:oklch(62.3% .214 259.815);--color-black:#000;--color-white:#fff;--spacing:.25rem;--container-md:28rem;--container-lg:32rem;--container-5xl:64rem;--text-xs:.75rem;--text-xs--line-height:calc(1/.75);--text-sm:.875rem;--text-sm--line-height:calc(1.25/.875);--text-base:1rem;--text-base--line-height: 1.5 ;--text-xl:1.25rem;--text-xl--line-height:calc(1.75/1.25);--text-2xl:1.5rem;--text-2xl--line-height:calc(2/1.5);--text-4xl:2.25rem;--text-4xl--line-height:calc(2.5/2.25);--text-5xl:3rem;--text-5xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--tracking-wider:.05em;--leading-relaxed:1.625;--radius-lg:.5rem;--radius-xl:.75rem;--radius-2xl:1rem;--radius-3xl:1.5rem;--drop-shadow-lg:0 4px 4px #00000026;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4,0,.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentColor}::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::-moz-placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::file-selector-button{-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.inset-0{inset:calc(var(--spacing)*0)}.top-0{top:calc(var(--spacing)*0)}.right-0{right:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.isolate{isolation:isolate}.-z-10{z-index:-10}.z-0{z-index:0}.z-50{z-index:50}.z-\[1\]{z-index:1}.z-\[2\]{z-index:2}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.mx-auto{margin-inline:auto}.mb-1\.5{margin-bottom:calc(var(--spacing)*1.5)}.mb-2{margin-bottom:calc(var(--spacing)*2)}.mb-4{margin-bottom:calc(var(--spacing)*4)}.mb-6{margin-bottom:calc(var(--spacing)*6)}.mb-12{margin-bottom:calc(var(--spacing)*12)}.flex{display:flex}.grid{display:grid}.inline{display:inline}.inline-block{display:inline-block}.aspect-square{aspect-ratio:1}.h-screen{height:100vh}.min-h-screen{min-height:100vh}.w-full{width:100%}.max-w-5xl{max-width:var(--container-5xl)}.max-w-lg{max-width:var(--container-lg)}.max-w-md{max-width:var(--container-md)}.transform{transform:var(--tw-rotate-x,)var(--tw-rotate-y,)var(--tw-rotate-z,)var(--tw-skew-x,)var(--tw-skew-y,)}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-3{gap:calc(var(--spacing)*3)}.gap-4{gap:calc(var(--spacing)*4)}.gap-6{gap:calc(var(--spacing)*6)}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*6)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*6)*calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-8>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing)*8)*var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing)*8)*calc(1 - var(--tw-space-y-reverse)))}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-3xl{border-radius:var(--radius-3xl)}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-xl{border-radius:var(--radius-xl)}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-white\/20{border-color:#fff3}@supports (color:color-mix(in lab,red,red)){.border-white\/20{border-color:color-mix(in oklab,var(--color-white)20%,transparent)}}.bg-black\/50{background-color:#00000080}@supports (color:color-mix(in lab,red,red)){.bg-black\/50{background-color:color-mix(in oklab,var(--color-black)50%,transparent)}}.bg-blue-500{background-color:var(--color-blue-500)}.object-cover{-o-object-fit:cover;object-fit:cover}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-12{padding:calc(var(--spacing)*12)}.px-4{padding-inline:calc(var(--spacing)*4)}.px-6{padding-inline:calc(var(--spacing)*6)}.px-8{padding-inline:calc(var(--spacing)*8)}.py-2{padding-block:calc(var(--spacing)*2)}.py-2\.5{padding-block:calc(var(--spacing)*2.5)}.py-4{padding-block:calc(var(--spacing)*4)}.pt-8{padding-top:calc(var(--spacing)*8)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-relaxed{--tw-leading:var(--leading-relaxed);line-height:var(--leading-relaxed)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.tracking-wider{--tw-tracking:var(--tracking-wider);letter-spacing:var(--tracking-wider)}.text-white{color:var(--color-white)}.text-white\/60{color:#fff9}@supports (color:color-mix(in lab,red,red)){.text-white\/60{color:color-mix(in oklab,var(--color-white)60%,transparent)}}.text-white\/70{color:#ffffffb3}@supports (color:color-mix(in lab,red,red)){.text-white\/70{color:color-mix(in oklab,var(--color-white)70%,transparent)}}.text-white\/80{color:#fffc}@supports (color:color-mix(in lab,red,red)){.text-white\/80{color:color-mix(in oklab,var(--color-white)80%,transparent)}}.text-white\/90{color:#ffffffe6}@supports (color:color-mix(in lab,red,red)){.text-white\/90{color:color-mix(in oklab,var(--color-white)90%,transparent)}}.uppercase{text-transform:uppercase}.shadow-2xl{--tw-shadow:0 25px 50px -12px var(--tw-shadow-color,#00000040);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.drop-shadow-lg{--tw-drop-shadow-size:drop-shadow(0 4px 4px var(--tw-drop-shadow-color,#00000026));--tw-drop-shadow:drop-shadow(var(--drop-shadow-lg));filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,)var(--tw-brightness,)var(--tw-contrast,)var(--tw-grayscale,)var(--tw-hue-rotate,)var(--tw-invert,)var(--tw-saturate,)var(--tw-sepia,)var(--tw-drop-shadow,)}.backdrop-filter{backdrop-filter:var(--tw-backdrop-blur,)var(--tw-backdrop-brightness,)var(--tw-backdrop-contrast,)var(--tw-backdrop-grayscale,)var(--tw-backdrop-hue-rotate,)var(--tw-backdrop-invert,)var(--tw-backdrop-opacity,)var(--tw-backdrop-saturate,)var(--tw-backdrop-sepia,)}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-transform{transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:scale-105:hover{--tw-scale-x:105%;--tw-scale-y:105%;--tw-scale-z:105%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:scale-110:hover{--tw-scale-x:110%;--tw-scale-y:110%;--tw-scale-z:110%;scale:var(--tw-scale-x)var(--tw-scale-y)}.hover\:scale-\[1\.02\]:hover{scale:1.02}}@media(min-width:40rem){.sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:p-8{padding:calc(var(--spacing)*8)}.sm\:text-5xl{font-size:var(--text-5xl);line-height:var(--tw-leading,var(--text-5xl--line-height))}.sm\:text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}}@media(min-width:64rem){.lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-backdrop-blur{syntax:"*";inherits:false}@property --tw-backdrop-brightness{syntax:"*";inherits:false}@property --tw-backdrop-contrast{syntax:"*";inherits:false}@property --tw-backdrop-grayscale{syntax:"*";inherits:false}@property --tw-backdrop-hue-rotate{syntax:"*";inherits:false}@property --tw-backdrop-invert{syntax:"*";inherits:false}@property --tw-backdrop-opacity{syntax:"*";inherits:false}@property --tw-backdrop-saturate{syntax:"*";inherits:false}@property --tw-backdrop-sepia{syntax:"*";inherits:false}@property --tw-scale-x{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-y{syntax:"*";inherits:false;initial-value:1}@property --tw-scale-z{syntax:"*";inherits:false;initial-value:1}
|