glass-studio-ui-pro 0.1.0

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/README.md ADDED
@@ -0,0 +1,118 @@
1
+ # 💎 Glass Studio UI
2
+
3
+ **Liquid Glass UI Library for Vue 3**
4
+
5
+ <a href="https://ibb.co/Kp9rcTMf"><img src="https://i.ibb.co/yc8QmHwZ/Screenshot-2026-03-27-154613.png" alt="Screenshot-2026-03-27-154613" border="0"></a>
6
+
7
+ `glass-studio-ui` is a high-fidelity glassmorphism UI library designed for modern Vue 3 applications. It features advanced backdrop blur, realistic liquid distortion filters, and a sophisticated shadow engine to create stunning, premium-grade interfaces.
8
+
9
+ ---
10
+
11
+ ## ✨ Features
12
+
13
+ - **Liquid Glass Distortion**: Real-time high-fidelity glass distortion effects (Mist, Grain, Frosted).
14
+ - **Pro Presets**: 10+ professionally tuned glass styles (Glass-frost, Light-frost, Heavy-frost, etc.).
15
+ - **Advanced Shadow Engine**: Multi-layered reflection and mist shadows for physical depth.
16
+ - **Vue 3 First**: Built using `<script setup>` and TypeScript for a modern DX.
17
+ - **Lightweight**: Optimized CSS and ES modules for minimal performance impact.
18
+
19
+ ---
20
+
21
+ ## 🚀 Getting Started
22
+
23
+ ### Installation
24
+
25
+ Install the library using npm or yarn:
26
+
27
+ ```bash
28
+ npm install glass-studio-ui
29
+ # OR
30
+ yarn add glass-studio-ui
31
+ ```
32
+
33
+ ### Global Setup
34
+
35
+ Import the styles and filters component in your main application file (e.g., `main.js` or `App.vue`):
36
+
37
+ ```javascript
38
+ import { createApp } from "vue";
39
+ import App from "./App.vue";
40
+ import "glass-studio-ui/styles"; // Import Global Styles
41
+
42
+ const app = createApp(App);
43
+ app.mount("#app");
44
+ ```
45
+
46
+ ### SVG Filters Setup
47
+
48
+ To enable liquid glass textures, you **must** include the `CmFilters` component once in your root `App.vue`:
49
+
50
+ ```vue
51
+ <script setup>
52
+ import { CmFilters } from "glass-studio-ui";
53
+ </script>
54
+
55
+ <template>
56
+ <div id="app">
57
+ <router-view />
58
+ <CmFilters />
59
+ <!-- Central Filter Engine -->
60
+ </div>
61
+ </template>
62
+ ```
63
+
64
+ ---
65
+
66
+ ## 🎨 Usage
67
+
68
+ ### Basic Glass Card
69
+
70
+ ```vue
71
+ <script setup>
72
+ import { CmCard } from "glass-studio-ui";
73
+ </script>
74
+
75
+ <template>
76
+ <CmCard type="heavy-frost" shadow="mist">
77
+ <h3>Liquid Glass Title</h3>
78
+ <p>This card features deep blur and high-fidelity frost texture.</p>
79
+ </CmCard>
80
+ </template>
81
+ ```
82
+
83
+ ### Advanced Presets
84
+
85
+ | Preset | Description |
86
+ | :------------ | :----------------------------------------------- |
87
+ | `glass-frost` | Crystal clear glass with subtle distortion. |
88
+ | `light-frost` | Clean, subtle frozen texture. |
89
+ | `heavy-frost` | Deep 24px blur with intense frosted deformation. |
90
+ | `grain-frost` | High-frequency sand-blasted grain texture. |
91
+ | `fine-frost` | Elegant light refraction and mist. |
92
+ | `soft-mist` | Luminous glowing fog with deep mist shadows. |
93
+
94
+ ---
95
+
96
+ ## 📖 API Reference
97
+
98
+ ### CmCard Props
99
+
100
+ | Prop | Type | Default | Description |
101
+ | :----------- | :----------------------------------- | :------- | :-------------------------------------- |
102
+ | `type` | `string` | `'none'` | Preset glass style (see table above). |
103
+ | `blur` | `number` | `12` | Backdrop blur radius in pixels. |
104
+ | `opacity` | `number` | `0.12` | Background transparency (0-1). |
105
+ | `distortion` | `'none'\|'mist'\|'grain'\|'frosted'` | `'none'` | Custom surface distortion texture. |
106
+ | `shadow` | `'mist'\|'reflex'\|boolean` | `false` | Apply specialized glass shadow effects. |
107
+
108
+ ---
109
+
110
+ ## 🌍 Localization (Việt Nam)
111
+
112
+ Sản phẩm được tối ưu giao diện kính lỏng (Liquid Glass) mang lại trải nghiệm thị giác cao cấp. Hệ thống hỗ trợ đầy đủ các hiệu ứng bề mặt kính mờ, kính nhám và phản xạ ánh sáng đa tầng.
113
+
114
+ ---
115
+
116
+ ## 📄 License
117
+
118
+ MIT © 2026 Glass Studio & CM Team
@@ -0,0 +1 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg" width="48" height="46" fill="none" viewBox="0 0 48 46"><path fill="#863bff" d="M25.946 44.938c-.664.845-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.287c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.497 0-3.578-1.842-3.578H1.237c-.92 0-1.456-1.04-.92-1.788L10.013.474c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.579 1.842 3.579h11.377c.943 0 1.473 1.088.89 1.83L25.947 44.94z" style="fill:#863bff;fill:color(display-p3 .5252 .23 1);fill-opacity:1"/><mask id="a" width="48" height="46" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#000" d="M25.842 44.938c-.664.844-2.021.375-2.021-.698V33.937a2.26 2.26 0 0 0-2.262-2.262H10.183c-.92 0-1.456-1.04-.92-1.788l7.48-10.471c1.07-1.498 0-3.579-1.842-3.579H1.133c-.92 0-1.456-1.04-.92-1.787L9.91.473c.214-.297.556-.474.92-.474h28.894c.92 0 1.456 1.04.92 1.788l-7.48 10.471c-1.07 1.498 0 3.578 1.842 3.578h11.377c.943 0 1.473 1.088.89 1.832L25.843 44.94z" style="fill:#000;fill-opacity:1"/></mask><g mask="url(#a)"><g filter="url(#b)"><ellipse cx="5.508" cy="14.704" fill="#ede6ff" rx="5.508" ry="14.704" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -4.47 31.516)"/></g><g filter="url(#c)"><ellipse cx="10.399" cy="29.851" fill="#ede6ff" rx="10.399" ry="29.851" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -39.328 7.883)"/></g><g filter="url(#d)"><ellipse cx="5.508" cy="30.487" fill="#7e14ff" rx="5.508" ry="30.487" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -25.913 -14.639)scale(1 -1)"/></g><g filter="url(#e)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.814 -32.644 -3.334)scale(1 -1)"/></g><g filter="url(#f)"><ellipse cx="5.508" cy="30.599" fill="#7e14ff" rx="5.508" ry="30.599" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="matrix(.00324 1 1 -.00324 -34.34 30.47)"/></g><g filter="url(#g)"><ellipse cx="14.072" cy="22.078" fill="#ede6ff" rx="14.072" ry="22.078" style="fill:#ede6ff;fill:color(display-p3 .9275 .9033 1);fill-opacity:1" transform="rotate(93.35 24.506 48.493)scale(-1 1)"/></g><g filter="url(#h)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#i)"><ellipse cx="3.47" cy="21.501" fill="#7e14ff" rx="3.47" ry="21.501" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(89.009 28.708 47.59)scale(-1 1)"/></g><g filter="url(#j)"><ellipse cx=".387" cy="8.972" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(39.51 .387 8.972)"/></g><g filter="url(#k)"><ellipse cx="47.523" cy="-6.092" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 47.523 -6.092)"/></g><g filter="url(#l)"><ellipse cx="41.412" cy="6.333" fill="#47bfff" rx="5.971" ry="9.665" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 41.412 6.333)"/></g><g filter="url(#m)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#n)"><ellipse cx="-1.879" cy="38.332" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 -1.88 38.332)"/></g><g filter="url(#o)"><ellipse cx="35.651" cy="29.907" fill="#7e14ff" rx="4.407" ry="29.108" style="fill:#7e14ff;fill:color(display-p3 .4922 .0767 1);fill-opacity:1" transform="rotate(37.892 35.651 29.907)"/></g><g filter="url(#p)"><ellipse cx="38.418" cy="32.4" fill="#47bfff" rx="5.971" ry="15.297" style="fill:#47bfff;fill:color(display-p3 .2799 .748 1);fill-opacity:1" transform="rotate(37.892 38.418 32.4)"/></g></g><defs><filter id="b" width="60.045" height="41.654" x="-19.77" y="16.149" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="c" width="90.34" height="51.437" x="-54.613" y="-7.533" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="d" width="79.355" height="29.4" x="-49.64" y="2.03" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="e" width="79.579" height="29.4" x="-45.045" y="20.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="f" width="79.579" height="29.4" x="-43.513" y="21.178" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="g" width="74.749" height="58.852" x="15.756" y="-17.901" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="7.659"/></filter><filter id="h" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="i" width="61.377" height="25.362" x="23.548" y="2.284" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="j" width="56.045" height="63.649" x="-27.636" y="-22.853" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="k" width="54.814" height="64.646" x="20.116" y="-38.415" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="l" width="33.541" height="35.313" x="24.641" y="-11.323" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="m" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="n" width="54.814" height="64.646" x="-29.286" y="6.009" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="o" width="54.814" height="64.646" x="8.244" y="-2.416" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter><filter id="p" width="39.409" height="43.623" x="18.713" y="10.588" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_2002_17158" stdDeviation="4.596"/></filter></defs></svg>
package/dist/icons.svg ADDED
@@ -0,0 +1,24 @@
1
+ <svg xmlns="http://www.w3.org/2000/svg">
2
+ <symbol id="bluesky-icon" viewBox="0 0 16 17">
3
+ <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
4
+ <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
5
+ </symbol>
6
+ <symbol id="discord-icon" viewBox="0 0 20 19">
7
+ <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
8
+ </symbol>
9
+ <symbol id="documentation-icon" viewBox="0 0 21 20">
10
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
11
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
12
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
13
+ </symbol>
14
+ <symbol id="github-icon" viewBox="0 0 19 19">
15
+ <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
16
+ </symbol>
17
+ <symbol id="social-icon" viewBox="0 0 20 20">
18
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
19
+ <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
20
+ </symbol>
21
+ <symbol id="x-icon" viewBox="0 0 19 19">
22
+ <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
23
+ </symbol>
24
+ </svg>
@@ -0,0 +1,254 @@
1
+ import { defineComponent as k, computed as p, openBlock as l, createBlock as x, resolveDynamicComponent as S, normalizeStyle as $, normalizeClass as C, withCtx as _, createElementBlock as d, renderSlot as b, createCommentVNode as v, createElementVNode as f, h as y, unref as D, createStaticVNode as G } from "vue";
2
+ const F = {
3
+ key: 0,
4
+ class: "cm-card-header"
5
+ }, M = { class: "cm-card-body" }, T = {
6
+ key: 1,
7
+ class: "cm-card-footer"
8
+ }, V = /* @__PURE__ */ k({
9
+ __name: "CmCard",
10
+ props: {
11
+ type: { default: "none" },
12
+ blur: { default: void 0 },
13
+ opacity: { default: void 0 },
14
+ brightness: { default: void 0 },
15
+ grain: { type: Boolean, default: !1 },
16
+ distortion: { default: void 0 },
17
+ customClass: { default: "" },
18
+ radius: { default: "16px" },
19
+ tag: { default: "div" },
20
+ shadow: { type: [Boolean, String], default: void 0 }
21
+ },
22
+ setup(e) {
23
+ const a = e, s = {
24
+ "glass-frost": { blur: 0, opacity: 0, distortion: "mist", shadow: "reflex" },
25
+ "light-frost": { blur: 5, opacity: 0.08, distortion: "frosted" },
26
+ "heavy-frost": { blur: 24, opacity: 0, distortion: "frosted" },
27
+ "grain-frost": { blur: 4, opacity: 0, distortion: "grain" },
28
+ "fine-frost": { blur: 7, opacity: 0, distortion: "mist", shadow: "reflex" },
29
+ "soft-mist": {
30
+ blur: 20,
31
+ opacity: 0,
32
+ distortion: "none",
33
+ brightness: 2,
34
+ shadow: "mist"
35
+ },
36
+ crystal: { blur: 10, opacity: 0.08, distortion: "none" },
37
+ "deep-velvet": { blur: 60, opacity: 0.2, distortion: "none" },
38
+ frosted: { blur: 20, opacity: 0.12, distortion: "frosted" },
39
+ glass: { blur: 0, opacity: 1, distortion: "none" },
40
+ none: { blur: 15, opacity: 0.1, distortion: "none" }
41
+ }, o = p(() => {
42
+ const t = s[a.type] || s.none;
43
+ return {
44
+ blur: a.blur ?? t.blur,
45
+ opacity: a.opacity ?? t.opacity,
46
+ brightness: a.brightness ?? t.brightness,
47
+ distortion: a.distortion ?? t.distortion,
48
+ shadow: a.shadow ?? t.shadow
49
+ };
50
+ }), r = (t) => !t || t === "none" ? "" : `url(#cm-glass-distortion-${t})`, n = p(() => {
51
+ const t = o.value.shadow;
52
+ return t === "mist" || t === "deep" ? "cm-shadow-mist" : t === "reflex" || t === !0 ? "cm-shadow-reflex" : "";
53
+ }), i = p(() => {
54
+ const t = [], c = typeof o.value.blur == "string" ? parseFloat(o.value.blur) : o.value.blur;
55
+ c && c > 0 && t.push(`blur(${c}px)`), o.value.brightness && t.push(`brightness(${o.value.brightness})`);
56
+ const h = r(o.value.distortion);
57
+ h && t.push(h);
58
+ const w = t.join(" ");
59
+ let g;
60
+ const u = o.value.shadow;
61
+ return typeof u == "string" && u !== "mist" && u !== "reflex" && u !== "deep" && (g = u), {
62
+ backdropFilter: w,
63
+ "-webkit-backdrop-filter": w,
64
+ background: `rgba(var(--glass-bg-rgb), ${o.value.opacity})`,
65
+ borderRadius: a.radius,
66
+ boxShadow: g,
67
+ "-webkit-box-shadow": g
68
+ };
69
+ });
70
+ return (t, c) => (l(), x(S(e.tag), {
71
+ class: C(["cm-card", [
72
+ { "cm-card-grain": e.grain },
73
+ `cm-distortion-${o.value.distortion}`,
74
+ `cm-type-${e.type}`,
75
+ n.value,
76
+ e.customClass
77
+ ]]),
78
+ style: $(i.value)
79
+ }, {
80
+ default: _(() => [
81
+ t.$slots.header ? (l(), d("div", F, [
82
+ b(t.$slots, "header")
83
+ ])) : v("", !0),
84
+ f("div", M, [
85
+ b(t.$slots, "default")
86
+ ]),
87
+ t.$slots.footer ? (l(), d("div", T, [
88
+ b(t.$slots, "footer")
89
+ ])) : v("", !0)
90
+ ]),
91
+ _: 3
92
+ }, 8, ["class", "style"]));
93
+ }
94
+ }), U = { class: "cm-btn-content" }, j = /* @__PURE__ */ k({
95
+ __name: "CmButton",
96
+ props: {
97
+ variant: { default: "default" },
98
+ active: { type: Boolean, default: !1 },
99
+ glow: { type: Boolean, default: !1 },
100
+ blur: { default: 12 },
101
+ opacity: { default: 0.12 },
102
+ distortion: { default: "none" }
103
+ },
104
+ emits: ["click"],
105
+ setup(e, { emit: a }) {
106
+ const s = e, o = (n) => n === "none" ? "" : `url(#cm-glass-distortion-${n})`, r = p(() => {
107
+ const n = [`blur(${s.blur}px)`], i = o(s.distortion);
108
+ i && n.push(i);
109
+ const t = n.join(" ");
110
+ return {
111
+ backdropFilter: t,
112
+ "-webkit-backdrop-filter": t,
113
+ background: `rgba(var(--glass-bg-rgb), ${s.opacity})`
114
+ };
115
+ });
116
+ return (n, i) => (l(), d("button", {
117
+ class: C(["cm-btn", [
118
+ `cm-btn-${e.variant}`,
119
+ { "cm-btn-active": e.active },
120
+ { "cm-btn-glow": e.glow }
121
+ ]]),
122
+ style: $(r.value),
123
+ onClick: i[0] || (i[0] = (t) => n.$emit("click", t))
124
+ }, [
125
+ f("div", U, [
126
+ b(n.$slots, "default")
127
+ ])
128
+ ], 6));
129
+ }
130
+ });
131
+ /**
132
+ * @license lucide-vue-next v0.477.0 - ISC
133
+ *
134
+ * This source code is licensed under the ISC license.
135
+ * See the LICENSE file in the root directory of this source tree.
136
+ */
137
+ const N = (e) => e.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
138
+ /**
139
+ * @license lucide-vue-next v0.477.0 - ISC
140
+ *
141
+ * This source code is licensed under the ISC license.
142
+ * See the LICENSE file in the root directory of this source tree.
143
+ */
144
+ var m = {
145
+ xmlns: "http://www.w3.org/2000/svg",
146
+ width: 24,
147
+ height: 24,
148
+ viewBox: "0 0 24 24",
149
+ fill: "none",
150
+ stroke: "currentColor",
151
+ "stroke-width": 2,
152
+ "stroke-linecap": "round",
153
+ "stroke-linejoin": "round"
154
+ };
155
+ /**
156
+ * @license lucide-vue-next v0.477.0 - ISC
157
+ *
158
+ * This source code is licensed under the ISC license.
159
+ * See the LICENSE file in the root directory of this source tree.
160
+ */
161
+ const R = ({ size: e, strokeWidth: a = 2, absoluteStrokeWidth: s, color: o, iconNode: r, name: n, class: i, ...t }, { slots: c }) => y(
162
+ "svg",
163
+ {
164
+ ...m,
165
+ width: e || m.width,
166
+ height: e || m.height,
167
+ stroke: o || m.stroke,
168
+ "stroke-width": s ? Number(a) * 24 / Number(e) : a,
169
+ class: ["lucide", `lucide-${N(n ?? "icon")}`],
170
+ ...t
171
+ },
172
+ [...r.map((h) => y(...h)), ...c.default ? [c.default()] : []]
173
+ );
174
+ /**
175
+ * @license lucide-vue-next v0.477.0 - ISC
176
+ *
177
+ * This source code is licensed under the ISC license.
178
+ * See the LICENSE file in the root directory of this source tree.
179
+ */
180
+ const O = (e, a) => (s, { slots: o }) => y(
181
+ R,
182
+ {
183
+ ...s,
184
+ iconNode: a,
185
+ name: e
186
+ },
187
+ o
188
+ );
189
+ /**
190
+ * @license lucide-vue-next v0.477.0 - ISC
191
+ *
192
+ * This source code is licensed under the ISC license.
193
+ * See the LICENSE file in the root directory of this source tree.
194
+ */
195
+ const q = O("CheckIcon", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]), I = { class: "cm-checkbox-wrapper" }, E = ["checked", "disabled"], A = { class: "cm-checkbox-box" }, L = {
196
+ key: 0,
197
+ class: "cm-checkbox-label"
198
+ }, P = /* @__PURE__ */ k({
199
+ __name: "CmCheckbox",
200
+ props: {
201
+ modelValue: { type: Boolean, default: !1 },
202
+ disabled: { type: Boolean, default: !1 }
203
+ },
204
+ emits: ["update:modelValue", "change"],
205
+ setup(e, { emit: a }) {
206
+ const s = a, o = (r) => {
207
+ const n = r.target;
208
+ s("update:modelValue", n.checked), s("change", n.checked);
209
+ };
210
+ return (r, n) => (l(), d("label", {
211
+ class: C(["cm-checkbox-container", { disabled: e.disabled }])
212
+ }, [
213
+ f("div", I, [
214
+ f("input", {
215
+ type: "checkbox",
216
+ checked: e.modelValue,
217
+ onChange: o,
218
+ disabled: e.disabled
219
+ }, null, 40, E),
220
+ f("div", A, [
221
+ e.modelValue ? (l(), x(D(q), {
222
+ key: 0,
223
+ class: "cm-checkbox-icon"
224
+ })) : v("", !0)
225
+ ])
226
+ ]),
227
+ r.$slots.default ? (l(), d("span", L, [
228
+ b(r.$slots, "default", {}, void 0, !0)
229
+ ])) : v("", !0)
230
+ ], 2));
231
+ }
232
+ }), B = (e, a) => {
233
+ const s = e.__vccOpts || e;
234
+ for (const [o, r] of a)
235
+ s[o] = r;
236
+ return s;
237
+ }, z = /* @__PURE__ */ B(P, [["__scopeId", "data-v-d47cd0ab"]]), K = {}, Z = { style: { display: "none" } };
238
+ function H(e, a) {
239
+ return l(), d("svg", Z, [...a[0] || (a[0] = [
240
+ G('<filter id="cm-glass-distortion-wavy" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="fractalNoise" baseFrequency="0.003 0.007" numOctaves="1" result="turbulence" data-v-30a566b8></feTurbulence><feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-frosted" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="fractalNoise" baseFrequency="0.009 0.009" numOctaves="2" seed="92" result="noise" data-v-30a566b8></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.02" result="blur" data-v-30a566b8></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blur" scale="80" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-grain" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="fractalNoise" baseFrequency="1.2 1.2" numOctaves="1" seed="9000" result="noise" data-v-30a566b8></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.1" result="blurred" data-v-30a566b8></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blurred" scale="100" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-ripple" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="3" result="turbulence" data-v-30a566b8></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="155" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-mist" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="turbulence" data-v-30a566b8></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter>', 5)
241
+ ])]);
242
+ }
243
+ const J = /* @__PURE__ */ B(K, [["render", H], ["__scopeId", "data-v-30a566b8"]]), X = {
244
+ install(e) {
245
+ e.component("CmCard", V), e.component("CmButton", j), e.component("CmCheckbox", z), e.component("CmFilters", J);
246
+ }
247
+ };
248
+ export {
249
+ j as CmButton,
250
+ V as CmCard,
251
+ z as CmCheckbox,
252
+ J as CmFilters,
253
+ X as default
254
+ };
@@ -0,0 +1,26 @@
1
+ (function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.LiquidGlassUI={},i.Vue))})(this,(function(i,e){"use strict";const w={key:0,class:"cm-card-header"},B={class:"cm-card-body"},x={key:1,class:"cm-card-footer"},h=e.defineComponent({__name:"CmCard",props:{type:{default:"none"},blur:{default:void 0},opacity:{default:void 0},brightness:{default:void 0},grain:{type:Boolean,default:!1},distortion:{default:void 0},customClass:{default:""},radius:{default:"16px"},tag:{default:"div"},shadow:{type:[Boolean,String],default:void 0}},setup(t){const n=t,s={"glass-frost":{blur:0,opacity:0,distortion:"mist",shadow:"reflex"},"light-frost":{blur:5,opacity:.08,distortion:"frosted"},"heavy-frost":{blur:24,opacity:0,distortion:"frosted"},"grain-frost":{blur:4,opacity:0,distortion:"grain"},"fine-frost":{blur:7,opacity:0,distortion:"mist",shadow:"reflex"},"soft-mist":{blur:20,opacity:0,distortion:"none",brightness:2,shadow:"mist"},crystal:{blur:10,opacity:.08,distortion:"none"},"deep-velvet":{blur:60,opacity:.2,distortion:"none"},frosted:{blur:20,opacity:.12,distortion:"frosted"},glass:{blur:0,opacity:1,distortion:"none"},none:{blur:15,opacity:.1,distortion:"none"}},a=e.computed(()=>{const o=s[n.type]||s.none;return{blur:n.blur??o.blur,opacity:n.opacity??o.opacity,brightness:n.brightness??o.brightness,distortion:n.distortion??o.distortion,shadow:n.shadow??o.shadow}}),l=o=>!o||o==="none"?"":`url(#cm-glass-distortion-${o})`,r=e.computed(()=>{const o=a.value.shadow;return o==="mist"||o==="deep"?"cm-shadow-mist":o==="reflex"||o===!0?"cm-shadow-reflex":""}),c=e.computed(()=>{const o=[],d=typeof a.value.blur=="string"?parseFloat(a.value.blur):a.value.blur;d&&d>0&&o.push(`blur(${d}px)`),a.value.brightness&&o.push(`brightness(${a.value.brightness})`);const b=l(a.value.distortion);b&&o.push(b);const C=o.join(" ");let m;const u=a.value.shadow;return typeof u=="string"&&u!=="mist"&&u!=="reflex"&&u!=="deep"&&(m=u),{backdropFilter:C,"-webkit-backdrop-filter":C,background:`rgba(var(--glass-bg-rgb), ${a.value.opacity})`,borderRadius:n.radius,boxShadow:m,"-webkit-box-shadow":m}});return(o,d)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(t.tag),{class:e.normalizeClass(["cm-card",[{"cm-card-grain":t.grain},`cm-distortion-${a.value.distortion}`,`cm-type-${t.type}`,r.value,t.customClass]]),style:e.normalizeStyle(c.value)},{default:e.withCtx(()=>[o.$slots.header?(e.openBlock(),e.createElementBlock("div",w,[e.renderSlot(o.$slots,"header")])):e.createCommentVNode("",!0),e.createElementVNode("div",B,[e.renderSlot(o.$slots,"default")]),o.$slots.footer?(e.openBlock(),e.createElementBlock("div",x,[e.renderSlot(o.$slots,"footer")])):e.createCommentVNode("",!0)]),_:3},8,["class","style"]))}}),S={class:"cm-btn-content"},p=e.defineComponent({__name:"CmButton",props:{variant:{default:"default"},active:{type:Boolean,default:!1},glow:{type:Boolean,default:!1},blur:{default:12},opacity:{default:.12},distortion:{default:"none"}},emits:["click"],setup(t,{emit:n}){const s=t,a=r=>r==="none"?"":`url(#cm-glass-distortion-${r})`,l=e.computed(()=>{const r=[`blur(${s.blur}px)`],c=a(s.distortion);c&&r.push(c);const o=r.join(" ");return{backdropFilter:o,"-webkit-backdrop-filter":o,background:`rgba(var(--glass-bg-rgb), ${s.opacity})`}});return(r,c)=>(e.openBlock(),e.createElementBlock("button",{class:e.normalizeClass(["cm-btn",[`cm-btn-${t.variant}`,{"cm-btn-active":t.active},{"cm-btn-glow":t.glow}]]),style:e.normalizeStyle(l.value),onClick:c[0]||(c[0]=o=>r.$emit("click",o))},[e.createElementVNode("div",S,[e.renderSlot(r.$slots,"default")])],6))}});/**
2
+ * @license lucide-vue-next v0.477.0 - ISC
3
+ *
4
+ * This source code is licensed under the ISC license.
5
+ * See the LICENSE file in the root directory of this source tree.
6
+ */const v=t=>t.replace(/([a-z0-9])([A-Z])/g,"$1-$2").toLowerCase();/**
7
+ * @license lucide-vue-next v0.477.0 - ISC
8
+ *
9
+ * This source code is licensed under the ISC license.
10
+ * See the LICENSE file in the root directory of this source tree.
11
+ */var f={xmlns:"http://www.w3.org/2000/svg",width:24,height:24,viewBox:"0 0 24 24",fill:"none",stroke:"currentColor","stroke-width":2,"stroke-linecap":"round","stroke-linejoin":"round"};/**
12
+ * @license lucide-vue-next v0.477.0 - ISC
13
+ *
14
+ * This source code is licensed under the ISC license.
15
+ * See the LICENSE file in the root directory of this source tree.
16
+ */const $=({size:t,strokeWidth:n=2,absoluteStrokeWidth:s,color:a,iconNode:l,name:r,class:c,...o},{slots:d})=>e.h("svg",{...f,width:t||f.width,height:t||f.height,stroke:a||f.stroke,"stroke-width":s?Number(n)*24/Number(t):n,class:["lucide",`lucide-${v(r??"icon")}`],...o},[...l.map(b=>e.h(...b)),...d.default?[d.default()]:[]]);/**
17
+ * @license lucide-vue-next v0.477.0 - ISC
18
+ *
19
+ * This source code is licensed under the ISC license.
20
+ * See the LICENSE file in the root directory of this source tree.
21
+ */const _=(t,n)=>(s,{slots:a})=>e.h($,{...s,iconNode:n,name:t},a);/**
22
+ * @license lucide-vue-next v0.477.0 - ISC
23
+ *
24
+ * This source code is licensed under the ISC license.
25
+ * See the LICENSE file in the root directory of this source tree.
26
+ */const V=_("CheckIcon",[["path",{d:"M20 6 9 17l-5-5",key:"1gmf2c"}]]),D={class:"cm-checkbox-wrapper"},G=["checked","disabled"],N={class:"cm-checkbox-box"},T={key:0,class:"cm-checkbox-label"},E=e.defineComponent({__name:"CmCheckbox",props:{modelValue:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1}},emits:["update:modelValue","change"],setup(t,{emit:n}){const s=n,a=l=>{const r=l.target;s("update:modelValue",r.checked),s("change",r.checked)};return(l,r)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(["cm-checkbox-container",{disabled:t.disabled}])},[e.createElementVNode("div",D,[e.createElementVNode("input",{type:"checkbox",checked:t.modelValue,onChange:a,disabled:t.disabled},null,40,G),e.createElementVNode("div",N,[t.modelValue?(e.openBlock(),e.createBlock(e.unref(V),{key:0,class:"cm-checkbox-icon"})):e.createCommentVNode("",!0)])]),l.$slots.default?(e.openBlock(),e.createElementBlock("span",T,[e.renderSlot(l.$slots,"default",{},void 0,!0)])):e.createCommentVNode("",!0)],2))}}),g=(t,n)=>{const s=t.__vccOpts||t;for(const[a,l]of n)s[a]=l;return s},y=g(E,[["__scopeId","data-v-d47cd0ab"]]),F={},M={style:{display:"none"}};function j(t,n){return e.openBlock(),e.createElementBlock("svg",M,[...n[0]||(n[0]=[e.createStaticVNode('<filter id="cm-glass-distortion-wavy" x="-10%" y="-10%" width="120%" height="120%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="fractalNoise" baseFrequency="0.003 0.007" numOctaves="1" result="turbulence" data-v-30a566b8></feTurbulence><feDisplacementMap in="SourceGraphic" in2="turbulence" scale="200" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-frosted" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="fractalNoise" baseFrequency="0.009 0.009" numOctaves="2" seed="92" result="noise" data-v-30a566b8></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.02" result="blur" data-v-30a566b8></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blur" scale="80" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-grain" x="0%" y="0%" width="100%" height="100%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="fractalNoise" baseFrequency="1.2 1.2" numOctaves="1" seed="9000" result="noise" data-v-30a566b8></feTurbulence><feGaussianBlur in="noise" stdDeviation="0.1" result="blurred" data-v-30a566b8></feGaussianBlur><feDisplacementMap in="SourceGraphic" in2="blurred" scale="100" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-ripple" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="turbulence" baseFrequency="0.008" numOctaves="3" result="turbulence" data-v-30a566b8></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="155" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter><filter id="cm-glass-distortion-mist" x="-5%" y="-5%" width="110%" height="110%" filterUnits="objectBoundingBox" data-v-30a566b8><feTurbulence type="turbulence" baseFrequency="0.02" numOctaves="3" result="turbulence" data-v-30a566b8></feTurbulence><feDisplacementMap in2="turbulence" in="SourceGraphic" scale="30" xChannelSelector="R" yChannelSelector="G" data-v-30a566b8></feDisplacementMap></filter>',5)])])}const k=g(F,[["render",j],["__scopeId","data-v-30a566b8"]]),U={install(t){t.component("CmCard",h),t.component("CmButton",p),t.component("CmCheckbox",y),t.component("CmFilters",k)}};i.CmButton=p,i.CmCard=h,i.CmCheckbox=y,i.CmFilters=k,i.default=U,Object.defineProperties(i,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})}));
package/dist/style.css ADDED
@@ -0,0 +1 @@
1
+ .cm-checkbox-container[data-v-d47cd0ab]{display:inline-flex;align-items:center;gap:.75rem;cursor:pointer;-webkit-user-select:none;user-select:none;transition:opacity .2s}.cm-checkbox-container.disabled[data-v-d47cd0ab]{cursor:not-allowed;opacity:.5}.cm-checkbox-wrapper[data-v-d47cd0ab]{position:relative;width:20px;height:20px}.cm-checkbox-wrapper input[data-v-d47cd0ab]{position:absolute;opacity:0;cursor:pointer;height:0;width:0}.cm-checkbox-box[data-v-d47cd0ab]{position:absolute;top:0;left:0;height:20px;width:20px;background:rgba(var(--glass-bg-rgb),.1);border:1px solid rgba(var(--glass-border-rgb),.2);border-radius:6px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:all .2s cubic-bezier(.4,0,.2,1);display:flex;align-items:center;justify-content:center}.cm-checkbox-box .cm-checkbox-icon[data-v-d47cd0ab]{width:14px;height:14px;color:#fff;stroke-width:3px;transition:transform .2s}.cm-checkbox-wrapper input:checked~.cm-checkbox-box[data-v-d47cd0ab]{background:var(--primary-color);border-color:var(--primary-color);box-shadow:0 0 10px rgba(var(--primary-color-rgb),.3)}.cm-checkbox-container:hover .cm-checkbox-box[data-v-d47cd0ab]{border-color:rgba(var(--glass-border-rgb),.4);background:rgba(var(--glass-bg-rgb),.2)}.cm-checkbox-label[data-v-d47cd0ab]{font-size:.9rem;color:var(--text-color);opacity:.8}svg[data-v-30a566b8]{position:absolute;width:0;height:0;pointer-events:none}
Binary file
package/package.json ADDED
@@ -0,0 +1,44 @@
1
+ {
2
+ "name": "glass-studio-ui-pro",
3
+ "version": "0.1.0",
4
+ "type": "module",
5
+ "files": ["dist", "media"],
6
+
7
+ "main": "./dist/liquid-glass-ui.umd.js",
8
+ "module": "./dist/liquid-glass-ui.es.js",
9
+ "types": "./dist/index.d.ts",
10
+
11
+ "exports": {
12
+ ".": {
13
+ "import": "./dist/liquid-glass-ui.es.js",
14
+ "require": "./dist/liquid-glass-ui.umd.js"
15
+ },
16
+ "./styles": "./dist/style.css"
17
+ },
18
+
19
+ "scripts": {
20
+ "dev": "vite",
21
+ "build": "vue-tsc && vite build",
22
+ "preview": "vite preview"
23
+ },
24
+
25
+ "peerDependencies": {
26
+ "vue": "^3.3.0"
27
+ },
28
+
29
+ "dependencies": {
30
+ "lucide-vue-next": "^0.477.0"
31
+ },
32
+
33
+ "devDependencies": {
34
+ "vue": "^3.5.13",
35
+ "sass": "^1.85.1",
36
+ "vue-router": "^4.5.0",
37
+ "@types/node": "^22.0.0",
38
+ "@vitejs/plugin-vue": "^5.2.1",
39
+ "@vue/tsconfig": "^0.7.0",
40
+ "typescript": "^5.7.0",
41
+ "vite": "^6.2.0",
42
+ "vue-tsc": "^2.2.0"
43
+ }
44
+ }