@shulya/liquid-glass 1.0.1 → 1.0.2

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.
@@ -1,158 +0,0 @@
1
- *,
2
- *::before,
3
- *::after {
4
- box-sizing: border-box;
5
- margin: 0;
6
- padding: 0;
7
- }
8
-
9
- html,
10
- body,
11
- #root {
12
- position: fixed;
13
- inset: 0;
14
- width: 100%;
15
- height: 100%;
16
- overflow: hidden;
17
- background: #ebedf2;
18
- font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", sans-serif;
19
- user-select: none;
20
- -webkit-user-select: none;
21
- touch-action: none;
22
- }
23
-
24
- .stage-canvas {
25
- position: fixed;
26
- top: 0;
27
- left: 0;
28
- width: 100%;
29
- height: 100%;
30
- display: block;
31
- z-index: 1;
32
- pointer-events: none;
33
- }
34
-
35
- /* Interactive Draggable LiquidGlass Elements */
36
- .glass-body {
37
- position: fixed;
38
- top: 0;
39
- left: 0;
40
- z-index: 20;
41
- cursor: grab;
42
- touch-action: none;
43
- will-change: left, top;
44
- box-shadow: 2px 10px 18px rgba(0, 0, 0, 0.12);
45
- }
46
-
47
- .glass-body:active {
48
- cursor: grabbing;
49
- }
50
-
51
- /* Bottom Control Shelf */
52
- .shelf-bar {
53
- position: fixed;
54
- bottom: 20px;
55
- left: 50%;
56
- transform: translateX(-50%);
57
- z-index: 60;
58
- display: flex;
59
- align-items: center;
60
- gap: 18px;
61
- padding: 10px 20px;
62
- border-radius: 999px;
63
- background: rgba(255, 255, 255, 0.8);
64
- backdrop-filter: blur(20px) saturate(180%);
65
- -webkit-backdrop-filter: blur(20px) saturate(180%);
66
- border: 1px solid rgba(255, 255, 255, 0.9);
67
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07), 0 2px 6px rgba(0, 0, 0, 0.03);
68
- color: #1c1c1e;
69
- flex-wrap: wrap;
70
- justify-content: center;
71
- max-width: 95vw;
72
- }
73
-
74
- .ctrl {
75
- display: flex;
76
- flex-direction: column;
77
- gap: 4px;
78
- min-width: 110px;
79
- }
80
-
81
- .ctrl-head {
82
- display: flex;
83
- justify-content: space-between;
84
- font-size: 10.5px;
85
- font-weight: 600;
86
- color: #636366;
87
- }
88
-
89
- .ctrl-val {
90
- color: #007aff;
91
- font-variant-numeric: tabular-nums;
92
- font-weight: 700;
93
- }
94
-
95
- input[type="range"] {
96
- -webkit-appearance: none;
97
- appearance: none;
98
- width: 100%;
99
- height: 4px;
100
- border-radius: 999px;
101
- background: rgba(0, 0, 0, 0.1);
102
- outline: none;
103
- cursor: pointer;
104
- }
105
-
106
- input[type="range"]::-webkit-slider-thumb {
107
- -webkit-appearance: none;
108
- appearance: none;
109
- width: 14px;
110
- height: 14px;
111
- border-radius: 50%;
112
- background: #ffffff;
113
- border: 1.5px solid rgba(0, 122, 255, 0.6);
114
- box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
115
- }
116
-
117
- .ctrl-toggle {
118
- display: flex;
119
- align-items: center;
120
- gap: 6px;
121
- font-size: 11px;
122
- font-weight: 600;
123
- color: #3a3a3c;
124
- cursor: pointer;
125
- padding: 4px 10px;
126
- border-radius: 999px;
127
- background: rgba(0, 0, 0, 0.04);
128
- }
129
-
130
- .ctrl-toggle input {
131
- accent-color: #007aff;
132
- width: 13px;
133
- height: 13px;
134
- cursor: pointer;
135
- }
136
-
137
- .fps-tag {
138
- font-size: 10.5px;
139
- font-weight: 700;
140
- color: #30d158;
141
- background: rgba(48, 209, 88, 0.12);
142
- padding: 4px 10px;
143
- border-radius: 999px;
144
- font-variant-numeric: tabular-nums;
145
- }
146
-
147
- @media (max-width: 720px) {
148
- .shelf-bar {
149
- gap: 10px;
150
- padding: 10px 14px;
151
- border-radius: 20px;
152
- bottom: 12px;
153
- }
154
-
155
- .ctrl {
156
- min-width: 96px;
157
- }
158
- }
@@ -1,22 +0,0 @@
1
- import { defineConfig } from 'vite';
2
- import react from '@vitejs/plugin-react';
3
- import path from 'node:path';
4
- import { fileURLToPath } from 'node:url';
5
-
6
- const __dirname = path.dirname(fileURLToPath(import.meta.url));
7
-
8
- export default defineConfig({
9
- plugins: [react()],
10
- resolve: {
11
- alias: {
12
- '@shulya/liquid-glass/react': path.resolve(__dirname, '../dist/react.mjs'),
13
- '@shulya/liquid-glass': path.resolve(__dirname, '../dist/index.mjs'),
14
- 'liquid-glass-ui/react': path.resolve(__dirname, '../dist/react.mjs'),
15
- 'liquid-glass-ui': path.resolve(__dirname, '../dist/index.mjs')
16
- }
17
- },
18
- server: {
19
- port: 5173,
20
- open: false
21
- }
22
- });
package/screen.png DELETED
Binary file
package/src/angular.js DELETED
@@ -1,76 +0,0 @@
1
- /**
2
- * Angular Adapter for Liquid Glass UI
3
- */
4
- import { LiquidGlassController, OPTICAL_DEFAULTS, OPTICAL_LIMITS } from './core.js';
5
-
6
- /**
7
- * Framework-agnostic Angular Directive Controller Class
8
- * Can be used directly with Angular's @Directive({ selector: '[liquidGlass]', standalone: true })
9
- * or instantiated via ElementRef in any Angular component.
10
- */
11
- export class LiquidGlassDirective {
12
- /**
13
- * @param {{ nativeElement: HTMLElement } | HTMLElement} elementRef
14
- */
15
- constructor(elementRef) {
16
- this.el = elementRef && elementRef.nativeElement ? elementRef.nativeElement : elementRef;
17
- this.rim = OPTICAL_DEFAULTS.rim;
18
- this.ior = OPTICAL_DEFAULTS.ior;
19
- this.height = OPTICAL_DEFAULTS.height;
20
- this.frosted = OPTICAL_DEFAULTS.frosted;
21
- this.fusion = OPTICAL_DEFAULTS.fusion;
22
- this.borderRadius = null;
23
- this.liquidGlass = null;
24
- this._controller = null;
25
- }
26
-
27
- ngOnInit() {
28
- const opts =
29
- typeof this.liquidGlass === 'object' && this.liquidGlass !== null
30
- ? this.liquidGlass
31
- : {
32
- rim: this.rim,
33
- ior: this.ior,
34
- height: this.height,
35
- frosted: this.frosted,
36
- fusion: this.fusion,
37
- borderRadius: this.borderRadius
38
- };
39
- this._controller = new LiquidGlassController(this.el, opts);
40
- }
41
-
42
- ngOnChanges() {
43
- if (this._controller) {
44
- const opts =
45
- typeof this.liquidGlass === 'object' && this.liquidGlass !== null
46
- ? this.liquidGlass
47
- : {
48
- rim: this.rim,
49
- ior: this.ior,
50
- height: this.height,
51
- frosted: this.frosted,
52
- fusion: this.fusion,
53
- borderRadius: this.borderRadius
54
- };
55
- this._controller.update(opts);
56
- }
57
- }
58
-
59
- ngOnDestroy() {
60
- if (this._controller) {
61
- this._controller.destroy();
62
- this._controller = null;
63
- }
64
- }
65
- }
66
-
67
- /**
68
- * Helper to attach LiquidGlass directly inside Angular ngAfterViewInit
69
- */
70
- export function attachAngularLiquidGlass(elementRef, options = {}) {
71
- const el = elementRef && elementRef.nativeElement ? elementRef.nativeElement : elementRef;
72
- return new LiquidGlassController(el, options);
73
- }
74
-
75
- export { LiquidGlassController, OPTICAL_DEFAULTS, OPTICAL_LIMITS };
76
- export default LiquidGlassDirective;