koori-ui 1.0.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 +222 -0
- package/dist/index.css +72 -0
- package/dist/index.css.map +1 -0
- package/dist/index.d.mts +88 -0
- package/dist/index.d.ts +88 -0
- package/dist/index.js +270 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +223 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +64 -0
package/README.md
ADDED
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<strong>✦ Koori UI</strong>
|
|
3
|
+
</p>
|
|
4
|
+
|
|
5
|
+
<p align="center">
|
|
6
|
+
Soft glass UI components built on <a href="https://www.radix-ui.com">Radix UI</a> for React 19
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<p align="center">
|
|
10
|
+
<img src="https://img.shields.io/npm/v/koori-ui?style=flat-square&color=6C8CFF" alt="npm version" />
|
|
11
|
+
<img src="https://img.shields.io/npm/l/koori-ui?style=flat-square" alt="license" />
|
|
12
|
+
<img src="https://img.shields.io/bundlephobia/minzip/koori-ui?style=flat-square&color=6C8CFF" alt="bundle size" />
|
|
13
|
+
</p>
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
17
|
+
## Features
|
|
18
|
+
|
|
19
|
+
- 🪟 **Glassmorphism design system** — translucent surfaces, blur, and layered depth
|
|
20
|
+
- ♿ **Accessible** — built on Radix UI primitives
|
|
21
|
+
- 🌲 **Tree-shakeable** — only import what you use
|
|
22
|
+
- ⚡ **React 19 ready** — RSC-safe, concurrent rendering compatible
|
|
23
|
+
- 🎨 **Themeable** — override CSS custom properties to match your brand
|
|
24
|
+
- 📦 **Tiny footprint** — ESM + CJS, ~7 KB gzipped
|
|
25
|
+
|
|
26
|
+
---
|
|
27
|
+
|
|
28
|
+
## Installation
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
npm install koori-ui
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
> **Peer dependencies:** `react >= 19` and `react-dom >= 19`
|
|
35
|
+
|
|
36
|
+
---
|
|
37
|
+
|
|
38
|
+
## Quick Start
|
|
39
|
+
|
|
40
|
+
Import the styles **once** in your app's entry point:
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
import "koori-ui/styles.css";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Then use the components:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
import { GlassPanel, GlassButton, GlassInput } from "koori-ui";
|
|
50
|
+
|
|
51
|
+
export default function App() {
|
|
52
|
+
return (
|
|
53
|
+
<div style={{ background: "#0B0F19", minHeight: "100vh", padding: 40 }}>
|
|
54
|
+
<GlassPanel className="max-w-md mx-auto space-y-4">
|
|
55
|
+
<h1 className="text-xl font-bold text-white">Welcome</h1>
|
|
56
|
+
<GlassInput placeholder="Enter your email" />
|
|
57
|
+
<GlassButton variant="primary">Get Started</GlassButton>
|
|
58
|
+
</GlassPanel>
|
|
59
|
+
</div>
|
|
60
|
+
);
|
|
61
|
+
}
|
|
62
|
+
```
|
|
63
|
+
|
|
64
|
+
---
|
|
65
|
+
|
|
66
|
+
## Components
|
|
67
|
+
|
|
68
|
+
### GlassPanel
|
|
69
|
+
|
|
70
|
+
A container wrapper with glassmorphism styling.
|
|
71
|
+
|
|
72
|
+
```tsx
|
|
73
|
+
<GlassPanel variant="elevated">
|
|
74
|
+
{/* content */}
|
|
75
|
+
</GlassPanel>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
| Prop | Type | Default | Description |
|
|
79
|
+
|------|------|---------|-------------|
|
|
80
|
+
| `variant` | `"default" \| "subtle" \| "elevated"` | `"default"` | Glass intensity |
|
|
81
|
+
| `className` | `string` | — | Additional classes |
|
|
82
|
+
|
|
83
|
+
---
|
|
84
|
+
|
|
85
|
+
### GlassCard
|
|
86
|
+
|
|
87
|
+
A card with optional `Header`, `Body`, and `Footer` sub-components.
|
|
88
|
+
|
|
89
|
+
```tsx
|
|
90
|
+
import {
|
|
91
|
+
GlassCard,
|
|
92
|
+
GlassCardHeader,
|
|
93
|
+
GlassCardBody,
|
|
94
|
+
GlassCardFooter,
|
|
95
|
+
} from "koori-ui";
|
|
96
|
+
|
|
97
|
+
<GlassCard>
|
|
98
|
+
<GlassCardHeader>Title</GlassCardHeader>
|
|
99
|
+
<GlassCardBody>Content goes here.</GlassCardBody>
|
|
100
|
+
<GlassCardFooter>
|
|
101
|
+
<GlassButton>Action</GlassButton>
|
|
102
|
+
</GlassCardFooter>
|
|
103
|
+
</GlassCard>
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
| Prop | Type | Default | Description |
|
|
107
|
+
|------|------|---------|-------------|
|
|
108
|
+
| `variant` | `"default" \| "subtle" \| "elevated"` | `"default"` | Glass intensity |
|
|
109
|
+
|
|
110
|
+
---
|
|
111
|
+
|
|
112
|
+
### GlassButton
|
|
113
|
+
|
|
114
|
+
A button with hover glow and variants.
|
|
115
|
+
|
|
116
|
+
```tsx
|
|
117
|
+
<GlassButton variant="primary" size="lg">Submit</GlassButton>
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
| Prop | Type | Default | Description |
|
|
121
|
+
|------|------|---------|-------------|
|
|
122
|
+
| `variant` | `"default" \| "primary"` | `"default"` | Visual style |
|
|
123
|
+
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | Size preset |
|
|
124
|
+
|
|
125
|
+
---
|
|
126
|
+
|
|
127
|
+
### GlassInput
|
|
128
|
+
|
|
129
|
+
A styled text input with subtle focus ring.
|
|
130
|
+
|
|
131
|
+
```tsx
|
|
132
|
+
<GlassInput placeholder="Search..." type="email" />
|
|
133
|
+
```
|
|
134
|
+
|
|
135
|
+
Supports all native `<input>` props. Works controlled and uncontrolled.
|
|
136
|
+
|
|
137
|
+
---
|
|
138
|
+
|
|
139
|
+
### GlassDialog
|
|
140
|
+
|
|
141
|
+
An accessible modal dialog powered by Radix UI.
|
|
142
|
+
|
|
143
|
+
```tsx
|
|
144
|
+
import {
|
|
145
|
+
GlassDialog,
|
|
146
|
+
GlassDialogTrigger,
|
|
147
|
+
GlassDialogContent,
|
|
148
|
+
GlassDialogTitle,
|
|
149
|
+
GlassDialogDescription,
|
|
150
|
+
GlassDialogClose,
|
|
151
|
+
} from "koori-ui";
|
|
152
|
+
|
|
153
|
+
<GlassDialog>
|
|
154
|
+
<GlassDialogTrigger asChild>
|
|
155
|
+
<GlassButton>Open</GlassButton>
|
|
156
|
+
</GlassDialogTrigger>
|
|
157
|
+
<GlassDialogContent>
|
|
158
|
+
<GlassDialogTitle>Confirm</GlassDialogTitle>
|
|
159
|
+
<GlassDialogDescription>Are you sure?</GlassDialogDescription>
|
|
160
|
+
<GlassDialogClose asChild>
|
|
161
|
+
<GlassButton>Close</GlassButton>
|
|
162
|
+
</GlassDialogClose>
|
|
163
|
+
</GlassDialogContent>
|
|
164
|
+
</GlassDialog>
|
|
165
|
+
```
|
|
166
|
+
|
|
167
|
+
---
|
|
168
|
+
|
|
169
|
+
## Theming
|
|
170
|
+
|
|
171
|
+
Override CSS custom properties to customize the palette:
|
|
172
|
+
|
|
173
|
+
```css
|
|
174
|
+
:root {
|
|
175
|
+
--koori-bg: #0b0f19;
|
|
176
|
+
--koori-text: #e6eaf2;
|
|
177
|
+
--koori-muted: #a1a7b3;
|
|
178
|
+
--koori-primary: #6c8cff;
|
|
179
|
+
}
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
For example, switch to a purple accent:
|
|
183
|
+
|
|
184
|
+
```css
|
|
185
|
+
:root {
|
|
186
|
+
--koori-primary: #a78bfa;
|
|
187
|
+
}
|
|
188
|
+
```
|
|
189
|
+
|
|
190
|
+
---
|
|
191
|
+
|
|
192
|
+
## Glass CSS Classes
|
|
193
|
+
|
|
194
|
+
You can also use the raw CSS classes directly:
|
|
195
|
+
|
|
196
|
+
| Class | Description |
|
|
197
|
+
|-------|-------------|
|
|
198
|
+
| `.glass` | Standard frosted glass |
|
|
199
|
+
| `.glass-subtle` | Lighter, more transparent |
|
|
200
|
+
| `.glass-elevated` | Stronger blur + drop shadow |
|
|
201
|
+
|
|
202
|
+
---
|
|
203
|
+
|
|
204
|
+
## Build
|
|
205
|
+
|
|
206
|
+
```bash
|
|
207
|
+
npm run build # CJS + ESM + DTS → dist/
|
|
208
|
+
npm run typecheck # tsc --noEmit
|
|
209
|
+
npm run dev # watch mode
|
|
210
|
+
```
|
|
211
|
+
|
|
212
|
+
---
|
|
213
|
+
|
|
214
|
+
## Publishing to npm
|
|
215
|
+
|
|
216
|
+
See [PUBLISHING.md](./PUBLISHING.md) for step-by-step instructions.
|
|
217
|
+
|
|
218
|
+
---
|
|
219
|
+
|
|
220
|
+
## License
|
|
221
|
+
|
|
222
|
+
MIT
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/* src/styles/glass.css */
|
|
2
|
+
:root {
|
|
3
|
+
--koori-bg: #0b0f19;
|
|
4
|
+
--koori-text: #e6eaf2;
|
|
5
|
+
--koori-muted: #94a3b8;
|
|
6
|
+
--koori-primary: #818cf8;
|
|
7
|
+
--koori-accent: #c084fc;
|
|
8
|
+
}
|
|
9
|
+
.glass {
|
|
10
|
+
background:
|
|
11
|
+
linear-gradient(
|
|
12
|
+
135deg,
|
|
13
|
+
rgba(255, 255, 255, 0.08) 0%,
|
|
14
|
+
rgba(255, 255, 255, 0.02) 100%);
|
|
15
|
+
backdrop-filter: blur(16px);
|
|
16
|
+
-webkit-backdrop-filter: blur(16px);
|
|
17
|
+
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
18
|
+
border-top-color: rgba(255, 255, 255, 0.2);
|
|
19
|
+
border-left-color: rgba(255, 255, 255, 0.15);
|
|
20
|
+
border-radius: 16px;
|
|
21
|
+
box-shadow: 0 4px 24px -1px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
|
|
22
|
+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
23
|
+
}
|
|
24
|
+
.glass-subtle {
|
|
25
|
+
background:
|
|
26
|
+
linear-gradient(
|
|
27
|
+
135deg,
|
|
28
|
+
rgba(255, 255, 255, 0.04) 0%,
|
|
29
|
+
rgba(255, 255, 255, 0.01) 100%);
|
|
30
|
+
backdrop-filter: blur(8px);
|
|
31
|
+
-webkit-backdrop-filter: blur(8px);
|
|
32
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
33
|
+
border-top-color: rgba(255, 255, 255, 0.1);
|
|
34
|
+
border-radius: 12px;
|
|
35
|
+
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);
|
|
36
|
+
transition: all 0.3s ease;
|
|
37
|
+
}
|
|
38
|
+
.glass-elevated {
|
|
39
|
+
background:
|
|
40
|
+
linear-gradient(
|
|
41
|
+
135deg,
|
|
42
|
+
rgba(255, 255, 255, 0.12) 0%,
|
|
43
|
+
rgba(255, 255, 255, 0.03) 100%);
|
|
44
|
+
backdrop-filter: blur(24px);
|
|
45
|
+
-webkit-backdrop-filter: blur(24px);
|
|
46
|
+
border: 1px solid rgba(255, 255, 255, 0.15);
|
|
47
|
+
border-top-color: rgba(255, 255, 255, 0.3);
|
|
48
|
+
border-left-color: rgba(255, 255, 255, 0.2);
|
|
49
|
+
border-radius: 20px;
|
|
50
|
+
box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
51
|
+
transform: translateY(-2px);
|
|
52
|
+
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
53
|
+
}
|
|
54
|
+
.glass:hover {
|
|
55
|
+
border-color: rgba(255, 255, 255, 0.15);
|
|
56
|
+
border-top-color: rgba(255, 255, 255, 0.25);
|
|
57
|
+
box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.12);
|
|
58
|
+
}
|
|
59
|
+
.glass-elevated:hover {
|
|
60
|
+
transform: translateY(-4px);
|
|
61
|
+
box-shadow: 0 30px 60px -12px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
|
62
|
+
}
|
|
63
|
+
button.glass,
|
|
64
|
+
button.glass-subtle,
|
|
65
|
+
button.glass-elevated {
|
|
66
|
+
cursor: pointer;
|
|
67
|
+
outline: none;
|
|
68
|
+
}
|
|
69
|
+
button.glass:active {
|
|
70
|
+
transform: scale(0.98);
|
|
71
|
+
}
|
|
72
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/styles/glass.css"],"sourcesContent":["/* ==========================================================================\n Koori UI — Premium Glass Design System\n ========================================================================== */\n\n/* ---------- Color Tokens ---------- */\n:root {\n --koori-bg: #0b0f19;\n --koori-text: #e6eaf2;\n --koori-muted: #94a3b8;\n --koori-primary: #818cf8;\n --koori-accent: #c084fc;\n}\n\n/* ---------- Premium Glass Base ---------- */\n.glass {\n background: linear-gradient(135deg,\n rgba(255, 255, 255, 0.08) 0%,\n rgba(255, 255, 255, 0.02) 100%);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border: 1px solid rgba(255, 255, 255, 0.1);\n border-top-color: rgba(255, 255, 255, 0.2);\n border-left-color: rgba(255, 255, 255, 0.15);\n border-radius: 16px;\n box-shadow:\n 0 4px 24px -1px rgba(0, 0, 0, 0.2),\n inset 0 1px 0 rgba(255, 255, 255, 0.1);\n transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\n}\n\n/* ---------- Glass Variants ---------- */\n.glass-subtle {\n background: linear-gradient(135deg,\n rgba(255, 255, 255, 0.04) 0%,\n rgba(255, 255, 255, 0.01) 100%);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n border: 1px solid rgba(255, 255, 255, 0.05);\n border-top-color: rgba(255, 255, 255, 0.1);\n border-radius: 12px;\n box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.03);\n transition: all 0.3s ease;\n}\n\n.glass-elevated {\n background: linear-gradient(135deg,\n rgba(255, 255, 255, 0.12) 0%,\n rgba(255, 255, 255, 0.03) 100%);\n backdrop-filter: blur(24px);\n -webkit-backdrop-filter: blur(24px);\n border: 1px solid rgba(255, 255, 255, 0.15);\n border-top-color: rgba(255, 255, 255, 0.3);\n border-left-color: rgba(255, 255, 255, 0.2);\n border-radius: 20px;\n box-shadow:\n 0 20px 40px -8px rgba(0, 0, 0, 0.5),\n inset 0 1px 0 rgba(255, 255, 255, 0.15);\n transform: translateY(-2px);\n transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n}\n\n.glass:hover {\n border-color: rgba(255, 255, 255, 0.15);\n border-top-color: rgba(255, 255, 255, 0.25);\n box-shadow:\n 0 8px 32px -4px rgba(0, 0, 0, 0.3),\n inset 0 1px 0 rgba(255, 255, 255, 0.12);\n}\n\n.glass-elevated:hover {\n transform: translateY(-4px);\n box-shadow:\n 0 30px 60px -12px rgba(0, 0, 0, 0.6),\n inset 0 1px 0 rgba(255, 255, 255, 0.2);\n}\n\n/* Base button styles since the original library uses glass classes for buttons too */\nbutton.glass,\nbutton.glass-subtle,\nbutton.glass-elevated {\n cursor: pointer;\n outline: none;\n}\n\nbutton.glass:active {\n transform: scale(0.98);\n}"],"mappings":";AAKA;AACE,cAAY;AACZ,gBAAc;AACd,iBAAe;AACf,mBAAiB;AACjB,kBAAgB;AAClB;AAGA,CAAC;AACC;AAAA,IAAY;AAAA,MAAgB,MAAhB;AAAA,MACR,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EADlB;AAAA,MAER,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM;AAC9B,mBAAiB,KAAK;AACtB,2BAAyB,KAAK;AAC9B,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,qBAAmB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,iBAAe;AACf,cACE,EAAE,IAAI,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAClC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACpC,cAAY,IAAI,KAAK,aAAa,GAAG,EAAE,CAAC,EAAE,GAAG,EAAE;AACjD;AAGA,CAAC;AACC;AAAA,IAAY;AAAA,MAAgB,MAAhB;AAAA,MACR,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EADlB;AAAA,MAER,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM;AAC9B,mBAAiB,KAAK;AACtB,2BAAyB,KAAK;AAC9B,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,iBAAe;AACf,cAAY,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAC9C,cAAY,IAAI,KAAK;AACvB;AAEA,CAAC;AACC;AAAA,IAAY;AAAA,MAAgB,MAAhB;AAAA,MACR,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM,EADlB;AAAA,MAER,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,MAAM;AAC9B,mBAAiB,KAAK;AACtB,2BAAyB,KAAK;AAC9B,UAAQ,IAAI,MAAM,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,qBAAmB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACvC,iBAAe;AACf,cACE,EAAE,KAAK,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EACnC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACpC,aAAW,WAAW;AACtB,cAAY,IAAI,KAAK,aAAa,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE;AACtD;AAEA,CA/CC,KA+CK;AACJ,gBAAc,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AAClC,oBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC,cACE,EAAE,IAAI,KAAK,KAAK,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EAClC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC;AAEA,CAzBC,cAyBc;AACb,aAAW,WAAW;AACtB,cACE,EAAE,KAAK,KAAK,MAAM,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,IAAI,EACpC,MAAM,EAAE,IAAI,EAAE,KAAK,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE;AACtC;AAGA,MAAM,CA/DL;AAgED,MAAM,CA/CL;AAgDD,MAAM,CAnCL;AAoCC,UAAQ;AACR,WAAS;AACX;AAEA,MAAM,CAtEL,KAsEW;AACV,aAAW,MAAM;AACnB;","names":[]}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
|
|
4
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Utility for merging Tailwind CSS classes with clsx.
|
|
8
|
+
* Handles conditional classes and resolves Tailwind conflicts.
|
|
9
|
+
*/
|
|
10
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
11
|
+
|
|
12
|
+
interface GlassPanelProps extends ComponentPropsWithRef<"div"> {
|
|
13
|
+
/** Additional glass variant class */
|
|
14
|
+
variant?: "default" | "subtle" | "elevated";
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* GlassPanel — A container wrapper with glassmorphism styling.
|
|
18
|
+
*
|
|
19
|
+
* Use as a layout primitive to wrap content in a frosted‑glass surface.
|
|
20
|
+
*/
|
|
21
|
+
declare const GlassPanel: react.ForwardRefExoticComponent<Omit<GlassPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
|
|
23
|
+
interface GlassCardProps extends ComponentPropsWithRef<"div"> {
|
|
24
|
+
/** Glass intensity variant */
|
|
25
|
+
variant?: "default" | "subtle" | "elevated";
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* GlassCard — A card component with glassmorphism styling.
|
|
29
|
+
*
|
|
30
|
+
* Features an inner padding preset and optional header/body/footer layout.
|
|
31
|
+
* Ideal for displaying discrete content blocks.
|
|
32
|
+
*/
|
|
33
|
+
declare const GlassCard: react.ForwardRefExoticComponent<Omit<GlassCardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
interface GlassCardHeaderProps extends ComponentPropsWithRef<"div"> {
|
|
35
|
+
}
|
|
36
|
+
declare const GlassCardHeader: react.ForwardRefExoticComponent<Omit<GlassCardHeaderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
interface GlassCardBodyProps extends ComponentPropsWithRef<"div"> {
|
|
38
|
+
}
|
|
39
|
+
declare const GlassCardBody: react.ForwardRefExoticComponent<Omit<GlassCardBodyProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
interface GlassCardFooterProps extends ComponentPropsWithRef<"div"> {
|
|
41
|
+
}
|
|
42
|
+
declare const GlassCardFooter: react.ForwardRefExoticComponent<Omit<GlassCardFooterProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
|
|
44
|
+
type GlassButtonVariant = "default" | "primary";
|
|
45
|
+
type GlassButtonSize = "sm" | "md" | "lg";
|
|
46
|
+
interface GlassButtonProps extends ComponentPropsWithRef<"button"> {
|
|
47
|
+
/** Visual variant */
|
|
48
|
+
variant?: GlassButtonVariant;
|
|
49
|
+
/** Size preset */
|
|
50
|
+
size?: GlassButtonSize;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* GlassButton — A button with glassmorphism styling and hover glow.
|
|
54
|
+
*
|
|
55
|
+
* Supports `default` and `primary` variants with three size presets.
|
|
56
|
+
*/
|
|
57
|
+
declare const GlassButton: react.ForwardRefExoticComponent<Omit<GlassButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
58
|
+
|
|
59
|
+
interface GlassInputProps extends ComponentPropsWithRef<"input"> {
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* GlassInput — A text input with glassmorphism styling.
|
|
63
|
+
*
|
|
64
|
+
* Works as both controlled and uncontrolled.
|
|
65
|
+
* Focus ring is a subtle white/20 glow.
|
|
66
|
+
*/
|
|
67
|
+
declare const GlassInput: react.ForwardRefExoticComponent<Omit<GlassInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
68
|
+
|
|
69
|
+
type GlassDialogProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
|
|
70
|
+
/**
|
|
71
|
+
* GlassDialog — Accessible dialog/modal powered by Radix UI with glass styling.
|
|
72
|
+
*/
|
|
73
|
+
declare const GlassDialog: react.FC<DialogPrimitive.DialogProps>;
|
|
74
|
+
type GlassDialogTriggerProps = ComponentPropsWithRef<typeof DialogPrimitive.Trigger>;
|
|
75
|
+
declare const GlassDialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
type GlassDialogCloseProps = ComponentPropsWithRef<typeof DialogPrimitive.Close>;
|
|
77
|
+
declare const GlassDialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
78
|
+
interface GlassDialogContentProps extends ComponentPropsWithRef<typeof DialogPrimitive.Content> {
|
|
79
|
+
/** Hide the default overlay */
|
|
80
|
+
hideOverlay?: boolean;
|
|
81
|
+
}
|
|
82
|
+
declare const GlassDialogContent: react.ForwardRefExoticComponent<Omit<GlassDialogContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
83
|
+
type GlassDialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;
|
|
84
|
+
declare const GlassDialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
|
|
85
|
+
type GlassDialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;
|
|
86
|
+
declare const GlassDialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
87
|
+
|
|
88
|
+
export { GlassButton, type GlassButtonProps, type GlassButtonSize, type GlassButtonVariant, GlassCard, GlassCardBody, type GlassCardBodyProps, GlassCardFooter, type GlassCardFooterProps, GlassCardHeader, type GlassCardHeaderProps, type GlassCardProps, GlassDialog, GlassDialogClose, type GlassDialogCloseProps, GlassDialogContent, type GlassDialogContentProps, GlassDialogDescription, type GlassDialogDescriptionProps, type GlassDialogProps, GlassDialogTitle, type GlassDialogTitleProps, GlassDialogTrigger, type GlassDialogTriggerProps, GlassInput, type GlassInputProps, GlassPanel, type GlassPanelProps, cn };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { ClassValue } from 'clsx';
|
|
2
|
+
import * as react from 'react';
|
|
3
|
+
import { ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
|
|
4
|
+
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Utility for merging Tailwind CSS classes with clsx.
|
|
8
|
+
* Handles conditional classes and resolves Tailwind conflicts.
|
|
9
|
+
*/
|
|
10
|
+
declare function cn(...inputs: ClassValue[]): string;
|
|
11
|
+
|
|
12
|
+
interface GlassPanelProps extends ComponentPropsWithRef<"div"> {
|
|
13
|
+
/** Additional glass variant class */
|
|
14
|
+
variant?: "default" | "subtle" | "elevated";
|
|
15
|
+
}
|
|
16
|
+
/**
|
|
17
|
+
* GlassPanel — A container wrapper with glassmorphism styling.
|
|
18
|
+
*
|
|
19
|
+
* Use as a layout primitive to wrap content in a frosted‑glass surface.
|
|
20
|
+
*/
|
|
21
|
+
declare const GlassPanel: react.ForwardRefExoticComponent<Omit<GlassPanelProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
22
|
+
|
|
23
|
+
interface GlassCardProps extends ComponentPropsWithRef<"div"> {
|
|
24
|
+
/** Glass intensity variant */
|
|
25
|
+
variant?: "default" | "subtle" | "elevated";
|
|
26
|
+
}
|
|
27
|
+
/**
|
|
28
|
+
* GlassCard — A card component with glassmorphism styling.
|
|
29
|
+
*
|
|
30
|
+
* Features an inner padding preset and optional header/body/footer layout.
|
|
31
|
+
* Ideal for displaying discrete content blocks.
|
|
32
|
+
*/
|
|
33
|
+
declare const GlassCard: react.ForwardRefExoticComponent<Omit<GlassCardProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
34
|
+
interface GlassCardHeaderProps extends ComponentPropsWithRef<"div"> {
|
|
35
|
+
}
|
|
36
|
+
declare const GlassCardHeader: react.ForwardRefExoticComponent<Omit<GlassCardHeaderProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
37
|
+
interface GlassCardBodyProps extends ComponentPropsWithRef<"div"> {
|
|
38
|
+
}
|
|
39
|
+
declare const GlassCardBody: react.ForwardRefExoticComponent<Omit<GlassCardBodyProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
40
|
+
interface GlassCardFooterProps extends ComponentPropsWithRef<"div"> {
|
|
41
|
+
}
|
|
42
|
+
declare const GlassCardFooter: react.ForwardRefExoticComponent<Omit<GlassCardFooterProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
43
|
+
|
|
44
|
+
type GlassButtonVariant = "default" | "primary";
|
|
45
|
+
type GlassButtonSize = "sm" | "md" | "lg";
|
|
46
|
+
interface GlassButtonProps extends ComponentPropsWithRef<"button"> {
|
|
47
|
+
/** Visual variant */
|
|
48
|
+
variant?: GlassButtonVariant;
|
|
49
|
+
/** Size preset */
|
|
50
|
+
size?: GlassButtonSize;
|
|
51
|
+
}
|
|
52
|
+
/**
|
|
53
|
+
* GlassButton — A button with glassmorphism styling and hover glow.
|
|
54
|
+
*
|
|
55
|
+
* Supports `default` and `primary` variants with three size presets.
|
|
56
|
+
*/
|
|
57
|
+
declare const GlassButton: react.ForwardRefExoticComponent<Omit<GlassButtonProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
|
|
58
|
+
|
|
59
|
+
interface GlassInputProps extends ComponentPropsWithRef<"input"> {
|
|
60
|
+
}
|
|
61
|
+
/**
|
|
62
|
+
* GlassInput — A text input with glassmorphism styling.
|
|
63
|
+
*
|
|
64
|
+
* Works as both controlled and uncontrolled.
|
|
65
|
+
* Focus ring is a subtle white/20 glow.
|
|
66
|
+
*/
|
|
67
|
+
declare const GlassInput: react.ForwardRefExoticComponent<Omit<GlassInputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
|
|
68
|
+
|
|
69
|
+
type GlassDialogProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
|
|
70
|
+
/**
|
|
71
|
+
* GlassDialog — Accessible dialog/modal powered by Radix UI with glass styling.
|
|
72
|
+
*/
|
|
73
|
+
declare const GlassDialog: react.FC<DialogPrimitive.DialogProps>;
|
|
74
|
+
type GlassDialogTriggerProps = ComponentPropsWithRef<typeof DialogPrimitive.Trigger>;
|
|
75
|
+
declare const GlassDialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
type GlassDialogCloseProps = ComponentPropsWithRef<typeof DialogPrimitive.Close>;
|
|
77
|
+
declare const GlassDialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
|
|
78
|
+
interface GlassDialogContentProps extends ComponentPropsWithRef<typeof DialogPrimitive.Content> {
|
|
79
|
+
/** Hide the default overlay */
|
|
80
|
+
hideOverlay?: boolean;
|
|
81
|
+
}
|
|
82
|
+
declare const GlassDialogContent: react.ForwardRefExoticComponent<Omit<GlassDialogContentProps, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
83
|
+
type GlassDialogTitleProps = ComponentPropsWithRef<typeof DialogPrimitive.Title>;
|
|
84
|
+
declare const GlassDialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
|
|
85
|
+
type GlassDialogDescriptionProps = ComponentPropsWithRef<typeof DialogPrimitive.Description>;
|
|
86
|
+
declare const GlassDialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
|
|
87
|
+
|
|
88
|
+
export { GlassButton, type GlassButtonProps, type GlassButtonSize, type GlassButtonVariant, GlassCard, GlassCardBody, type GlassCardBodyProps, GlassCardFooter, type GlassCardFooterProps, GlassCardHeader, type GlassCardHeaderProps, type GlassCardProps, GlassDialog, GlassDialogClose, type GlassDialogCloseProps, GlassDialogContent, type GlassDialogContentProps, GlassDialogDescription, type GlassDialogDescriptionProps, type GlassDialogProps, GlassDialogTitle, type GlassDialogTitleProps, GlassDialogTrigger, type GlassDialogTriggerProps, GlassInput, type GlassInputProps, GlassPanel, type GlassPanelProps, cn };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,270 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
"use strict";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
|
|
31
|
+
// src/index.ts
|
|
32
|
+
var index_exports = {};
|
|
33
|
+
__export(index_exports, {
|
|
34
|
+
GlassButton: () => GlassButton,
|
|
35
|
+
GlassCard: () => GlassCard,
|
|
36
|
+
GlassCardBody: () => GlassCardBody,
|
|
37
|
+
GlassCardFooter: () => GlassCardFooter,
|
|
38
|
+
GlassCardHeader: () => GlassCardHeader,
|
|
39
|
+
GlassDialog: () => GlassDialog,
|
|
40
|
+
GlassDialogClose: () => GlassDialogClose,
|
|
41
|
+
GlassDialogContent: () => GlassDialogContent,
|
|
42
|
+
GlassDialogDescription: () => GlassDialogDescription,
|
|
43
|
+
GlassDialogTitle: () => GlassDialogTitle,
|
|
44
|
+
GlassDialogTrigger: () => GlassDialogTrigger,
|
|
45
|
+
GlassInput: () => GlassInput,
|
|
46
|
+
GlassPanel: () => GlassPanel,
|
|
47
|
+
cn: () => cn
|
|
48
|
+
});
|
|
49
|
+
module.exports = __toCommonJS(index_exports);
|
|
50
|
+
|
|
51
|
+
// src/utils/cn.ts
|
|
52
|
+
var import_clsx = require("clsx");
|
|
53
|
+
var import_tailwind_merge = require("tailwind-merge");
|
|
54
|
+
function cn(...inputs) {
|
|
55
|
+
return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
// src/components/glass-panel/glass-panel.tsx
|
|
59
|
+
var import_react = require("react");
|
|
60
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
61
|
+
var GlassPanel = (0, import_react.forwardRef)(
|
|
62
|
+
({ className, variant = "default", children, ...props }, ref) => {
|
|
63
|
+
const variantClass = variant === "subtle" ? "glass-subtle" : variant === "elevated" ? "glass-elevated" : "glass";
|
|
64
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, className: cn(variantClass, "p-6", className), ...props, children });
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
GlassPanel.displayName = "GlassPanel";
|
|
68
|
+
|
|
69
|
+
// src/components/glass-card/glass-card.tsx
|
|
70
|
+
var import_react2 = require("react");
|
|
71
|
+
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
72
|
+
var GlassCard = (0, import_react2.forwardRef)(
|
|
73
|
+
({ className, variant = "default", children, ...props }, ref) => {
|
|
74
|
+
const variantClass = variant === "subtle" ? "glass-subtle" : variant === "elevated" ? "glass-elevated" : "glass";
|
|
75
|
+
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
76
|
+
"div",
|
|
77
|
+
{
|
|
78
|
+
ref,
|
|
79
|
+
className: cn(
|
|
80
|
+
variantClass,
|
|
81
|
+
"p-5 transition-all duration-200 ease-out hover:bg-white/[0.08] hover:shadow-lg hover:shadow-black/20",
|
|
82
|
+
className
|
|
83
|
+
),
|
|
84
|
+
...props,
|
|
85
|
+
children
|
|
86
|
+
}
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
);
|
|
90
|
+
GlassCard.displayName = "GlassCard";
|
|
91
|
+
var GlassCardHeader = (0, import_react2.forwardRef)(
|
|
92
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
93
|
+
"div",
|
|
94
|
+
{
|
|
95
|
+
ref,
|
|
96
|
+
className: cn(
|
|
97
|
+
"mb-4 border-b border-white/10 pb-4",
|
|
98
|
+
className
|
|
99
|
+
),
|
|
100
|
+
...props,
|
|
101
|
+
children
|
|
102
|
+
}
|
|
103
|
+
)
|
|
104
|
+
);
|
|
105
|
+
GlassCardHeader.displayName = "GlassCardHeader";
|
|
106
|
+
var GlassCardBody = (0, import_react2.forwardRef)(
|
|
107
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { ref, className: cn("flex-1", className), ...props, children })
|
|
108
|
+
);
|
|
109
|
+
GlassCardBody.displayName = "GlassCardBody";
|
|
110
|
+
var GlassCardFooter = (0, import_react2.forwardRef)(
|
|
111
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
|
|
112
|
+
"div",
|
|
113
|
+
{
|
|
114
|
+
ref,
|
|
115
|
+
className: cn(
|
|
116
|
+
"mt-4 border-t border-white/10 pt-4",
|
|
117
|
+
className
|
|
118
|
+
),
|
|
119
|
+
...props,
|
|
120
|
+
children
|
|
121
|
+
}
|
|
122
|
+
)
|
|
123
|
+
);
|
|
124
|
+
GlassCardFooter.displayName = "GlassCardFooter";
|
|
125
|
+
|
|
126
|
+
// src/components/glass-button/glass-button.tsx
|
|
127
|
+
var import_react3 = require("react");
|
|
128
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
129
|
+
var sizeClasses = {
|
|
130
|
+
sm: "px-3 py-1.5 text-sm",
|
|
131
|
+
md: "px-4 py-2 text-sm",
|
|
132
|
+
lg: "px-6 py-3 text-base"
|
|
133
|
+
};
|
|
134
|
+
var GlassButton = (0, import_react3.forwardRef)(
|
|
135
|
+
({
|
|
136
|
+
className,
|
|
137
|
+
variant = "default",
|
|
138
|
+
size = "md",
|
|
139
|
+
type = "button",
|
|
140
|
+
children,
|
|
141
|
+
...props
|
|
142
|
+
}, ref) => {
|
|
143
|
+
const base = cn(
|
|
144
|
+
"glass inline-flex items-center justify-center gap-2 font-medium",
|
|
145
|
+
"transition-all duration-150 ease-out",
|
|
146
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
|
|
147
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
148
|
+
sizeClasses[size]
|
|
149
|
+
);
|
|
150
|
+
const variantClasses = variant === "primary" ? "bg-[var(--koori-primary)]/20 text-[var(--koori-primary)] hover:bg-[var(--koori-primary)]/30 border-[var(--koori-primary)]/30" : "text-[var(--koori-text)] hover:bg-white/10";
|
|
151
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
152
|
+
"button",
|
|
153
|
+
{
|
|
154
|
+
ref,
|
|
155
|
+
type,
|
|
156
|
+
className: cn(base, variantClasses, className),
|
|
157
|
+
...props,
|
|
158
|
+
children
|
|
159
|
+
}
|
|
160
|
+
);
|
|
161
|
+
}
|
|
162
|
+
);
|
|
163
|
+
GlassButton.displayName = "GlassButton";
|
|
164
|
+
|
|
165
|
+
// src/components/glass-input/glass-input.tsx
|
|
166
|
+
var import_react4 = require("react");
|
|
167
|
+
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
168
|
+
var GlassInput = (0, import_react4.forwardRef)(
|
|
169
|
+
({ className, type = "text", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
170
|
+
"input",
|
|
171
|
+
{
|
|
172
|
+
ref,
|
|
173
|
+
type,
|
|
174
|
+
className: cn(
|
|
175
|
+
"glass w-full px-4 py-2.5 text-sm",
|
|
176
|
+
"text-[var(--koori-text)] placeholder:text-[var(--koori-muted)]",
|
|
177
|
+
"bg-white/[0.04]",
|
|
178
|
+
"outline-none transition-all duration-150 ease-out",
|
|
179
|
+
"focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-transparent",
|
|
180
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
181
|
+
className
|
|
182
|
+
),
|
|
183
|
+
...props
|
|
184
|
+
}
|
|
185
|
+
)
|
|
186
|
+
);
|
|
187
|
+
GlassInput.displayName = "GlassInput";
|
|
188
|
+
|
|
189
|
+
// src/components/glass-dialog/glass-dialog.tsx
|
|
190
|
+
var import_react5 = require("react");
|
|
191
|
+
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
|
|
192
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
193
|
+
var GlassDialog = DialogPrimitive.Root;
|
|
194
|
+
var GlassDialogTrigger = DialogPrimitive.Trigger;
|
|
195
|
+
var GlassDialogClose = DialogPrimitive.Close;
|
|
196
|
+
var GlassDialogOverlay = (0, import_react5.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
197
|
+
DialogPrimitive.Overlay,
|
|
198
|
+
{
|
|
199
|
+
ref,
|
|
200
|
+
className: cn(
|
|
201
|
+
"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
|
|
202
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
203
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
204
|
+
className
|
|
205
|
+
),
|
|
206
|
+
...props
|
|
207
|
+
}
|
|
208
|
+
));
|
|
209
|
+
GlassDialogOverlay.displayName = "GlassDialogOverlay";
|
|
210
|
+
var GlassDialogContent = (0, import_react5.forwardRef)(({ className, children, hideOverlay = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(DialogPrimitive.Portal, { children: [
|
|
211
|
+
!hideOverlay && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlassDialogOverlay, {}),
|
|
212
|
+
/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
213
|
+
DialogPrimitive.Content,
|
|
214
|
+
{
|
|
215
|
+
ref,
|
|
216
|
+
className: cn(
|
|
217
|
+
"glass-elevated fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 p-6",
|
|
218
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
219
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
220
|
+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
221
|
+
"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
|
|
222
|
+
"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
|
|
223
|
+
"focus:outline-none",
|
|
224
|
+
className
|
|
225
|
+
),
|
|
226
|
+
...props,
|
|
227
|
+
children
|
|
228
|
+
}
|
|
229
|
+
)
|
|
230
|
+
] }));
|
|
231
|
+
GlassDialogContent.displayName = "GlassDialogContent";
|
|
232
|
+
var GlassDialogTitle = (0, import_react5.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
233
|
+
DialogPrimitive.Title,
|
|
234
|
+
{
|
|
235
|
+
ref,
|
|
236
|
+
className: cn(
|
|
237
|
+
"text-lg font-semibold text-[var(--koori-text)]",
|
|
238
|
+
className
|
|
239
|
+
),
|
|
240
|
+
...props
|
|
241
|
+
}
|
|
242
|
+
));
|
|
243
|
+
GlassDialogTitle.displayName = "GlassDialogTitle";
|
|
244
|
+
var GlassDialogDescription = (0, import_react5.forwardRef)(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
245
|
+
DialogPrimitive.Description,
|
|
246
|
+
{
|
|
247
|
+
ref,
|
|
248
|
+
className: cn("mt-2 text-sm text-[var(--koori-muted)]", className),
|
|
249
|
+
...props
|
|
250
|
+
}
|
|
251
|
+
));
|
|
252
|
+
GlassDialogDescription.displayName = "GlassDialogDescription";
|
|
253
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
254
|
+
0 && (module.exports = {
|
|
255
|
+
GlassButton,
|
|
256
|
+
GlassCard,
|
|
257
|
+
GlassCardBody,
|
|
258
|
+
GlassCardFooter,
|
|
259
|
+
GlassCardHeader,
|
|
260
|
+
GlassDialog,
|
|
261
|
+
GlassDialogClose,
|
|
262
|
+
GlassDialogContent,
|
|
263
|
+
GlassDialogDescription,
|
|
264
|
+
GlassDialogTitle,
|
|
265
|
+
GlassDialogTrigger,
|
|
266
|
+
GlassInput,
|
|
267
|
+
GlassPanel,
|
|
268
|
+
cn
|
|
269
|
+
});
|
|
270
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/utils/cn.ts","../src/components/glass-panel/glass-panel.tsx","../src/components/glass-card/glass-card.tsx","../src/components/glass-button/glass-button.tsx","../src/components/glass-input/glass-input.tsx","../src/components/glass-dialog/glass-dialog.tsx"],"sourcesContent":["/* ---------- Styles (side-effect import) ---------- */\nimport \"./styles/glass.css\";\n\n/* ---------- Utilities ---------- */\nexport { cn } from \"./utils/cn\";\n\n/* ---------- GlassPanel ---------- */\nexport { GlassPanel } from \"./components/glass-panel\";\nexport type { GlassPanelProps } from \"./components/glass-panel\";\n\n/* ---------- GlassCard ---------- */\nexport {\n GlassCard,\n GlassCardHeader,\n GlassCardBody,\n GlassCardFooter,\n} from \"./components/glass-card\";\nexport type {\n GlassCardProps,\n GlassCardHeaderProps,\n GlassCardBodyProps,\n GlassCardFooterProps,\n} from \"./components/glass-card\";\n\n/* ---------- GlassButton ---------- */\nexport { GlassButton } from \"./components/glass-button\";\nexport type {\n GlassButtonProps,\n GlassButtonVariant,\n GlassButtonSize,\n} from \"./components/glass-button\";\n\n/* ---------- GlassInput ---------- */\nexport { GlassInput } from \"./components/glass-input\";\nexport type { GlassInputProps } from \"./components/glass-input\";\n\n/* ---------- GlassDialog ---------- */\nexport {\n GlassDialog,\n GlassDialogTrigger,\n GlassDialogContent,\n GlassDialogClose,\n GlassDialogTitle,\n GlassDialogDescription,\n} from \"./components/glass-dialog\";\nexport type {\n GlassDialogProps,\n GlassDialogTriggerProps,\n GlassDialogContentProps,\n GlassDialogCloseProps,\n GlassDialogTitleProps,\n GlassDialogDescriptionProps,\n} from \"./components/glass-dialog\";\n","import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Utility for merging Tailwind CSS classes with clsx.\n * Handles conditional classes and resolves Tailwind conflicts.\n */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface GlassPanelProps extends ComponentPropsWithRef<\"div\"> {\n /** Additional glass variant class */\n variant?: \"default\" | \"subtle\" | \"elevated\";\n}\n\n/**\n * GlassPanel — A container wrapper with glassmorphism styling.\n *\n * Use as a layout primitive to wrap content in a frosted‑glass surface.\n */\nexport const GlassPanel = forwardRef<HTMLDivElement, GlassPanelProps>(\n ({ className, variant = \"default\", children, ...props }, ref) => {\n const variantClass =\n variant === \"subtle\"\n ? \"glass-subtle\"\n : variant === \"elevated\"\n ? \"glass-elevated\"\n : \"glass\";\n\n return (\n <div ref={ref} className={cn(variantClass, \"p-6\", className)} {...props}>\n {children}\n </div>\n );\n },\n);\n\nGlassPanel.displayName = \"GlassPanel\";\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface GlassCardProps extends ComponentPropsWithRef<\"div\"> {\n /** Glass intensity variant */\n variant?: \"default\" | \"subtle\" | \"elevated\";\n}\n\n/**\n * GlassCard — A card component with glassmorphism styling.\n *\n * Features an inner padding preset and optional header/body/footer layout.\n * Ideal for displaying discrete content blocks.\n */\nexport const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(\n ({ className, variant = \"default\", children, ...props }, ref) => {\n const variantClass =\n variant === \"subtle\"\n ? \"glass-subtle\"\n : variant === \"elevated\"\n ? \"glass-elevated\"\n : \"glass\";\n\n return (\n <div\n ref={ref}\n className={cn(\n variantClass,\n \"p-5 transition-all duration-200 ease-out hover:bg-white/[0.08] hover:shadow-lg hover:shadow-black/20\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nGlassCard.displayName = \"GlassCard\";\n\n/* ---------- Sub‑components ---------- */\n\nexport interface GlassCardHeaderProps extends ComponentPropsWithRef<\"div\"> { }\n\nexport const GlassCardHeader = forwardRef<HTMLDivElement, GlassCardHeaderProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"mb-4 border-b border-white/10 pb-4\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nGlassCardHeader.displayName = \"GlassCardHeader\";\n\nexport interface GlassCardBodyProps extends ComponentPropsWithRef<\"div\"> { }\n\nexport const GlassCardBody = forwardRef<HTMLDivElement, GlassCardBodyProps>(\n ({ className, children, ...props }, ref) => (\n <div ref={ref} className={cn(\"flex-1\", className)} {...props}>\n {children}\n </div>\n ),\n);\n\nGlassCardBody.displayName = \"GlassCardBody\";\n\nexport interface GlassCardFooterProps extends ComponentPropsWithRef<\"div\"> { }\n\nexport const GlassCardFooter = forwardRef<HTMLDivElement, GlassCardFooterProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"mt-4 border-t border-white/10 pt-4\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nGlassCardFooter.displayName = \"GlassCardFooter\";\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type GlassButtonVariant = \"default\" | \"primary\";\nexport type GlassButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface GlassButtonProps extends ComponentPropsWithRef<\"button\"> {\n /** Visual variant */\n variant?: GlassButtonVariant;\n /** Size preset */\n size?: GlassButtonSize;\n}\n\nconst sizeClasses: Record<GlassButtonSize, string> = {\n sm: \"px-3 py-1.5 text-sm\",\n md: \"px-4 py-2 text-sm\",\n lg: \"px-6 py-3 text-base\",\n};\n\n/**\n * GlassButton — A button with glassmorphism styling and hover glow.\n *\n * Supports `default` and `primary` variants with three size presets.\n */\nexport const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(\n (\n {\n className,\n variant = \"default\",\n size = \"md\",\n type = \"button\",\n children,\n ...props\n },\n ref,\n ) => {\n const base = cn(\n \"glass inline-flex items-center justify-center gap-2 font-medium\",\n \"transition-all duration-150 ease-out\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n sizeClasses[size],\n );\n\n const variantClasses =\n variant === \"primary\"\n ? \"bg-[var(--koori-primary)]/20 text-[var(--koori-primary)] hover:bg-[var(--koori-primary)]/30 border-[var(--koori-primary)]/30\"\n : \"text-[var(--koori-text)] hover:bg-white/10\";\n\n return (\n <button\n ref={ref}\n type={type}\n className={cn(base, variantClasses, className)}\n {...props}\n >\n {children}\n </button>\n );\n },\n);\n\nGlassButton.displayName = \"GlassButton\";\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface GlassInputProps extends ComponentPropsWithRef<\"input\"> { }\n\n/**\n * GlassInput — A text input with glassmorphism styling.\n *\n * Works as both controlled and uncontrolled.\n * Focus ring is a subtle white/20 glow.\n */\nexport const GlassInput = forwardRef<HTMLInputElement, GlassInputProps>(\n ({ className, type = \"text\", ...props }, ref) => (\n <input\n ref={ref}\n type={type}\n className={cn(\n \"glass w-full px-4 py-2.5 text-sm\",\n \"text-[var(--koori-text)] placeholder:text-[var(--koori-muted)]\",\n \"bg-white/[0.04]\",\n \"outline-none transition-all duration-150 ease-out\",\n \"focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-transparent\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n ),\n);\n\nGlassInput.displayName = \"GlassInput\";\n","import {\n forwardRef,\n type ComponentPropsWithRef,\n type ComponentPropsWithoutRef,\n} from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cn } from \"../../utils/cn\";\n\n/* ---------- Root ---------- */\n\nexport type GlassDialogProps = ComponentPropsWithoutRef<\n typeof DialogPrimitive.Root\n>;\n\n/**\n * GlassDialog — Accessible dialog/modal powered by Radix UI with glass styling.\n */\nexport const GlassDialog = DialogPrimitive.Root;\n\n/* ---------- Trigger ---------- */\n\nexport type GlassDialogTriggerProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Trigger\n>;\n\nexport const GlassDialogTrigger = DialogPrimitive.Trigger;\n\n/* ---------- Close ---------- */\n\nexport type GlassDialogCloseProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Close\n>;\n\nexport const GlassDialogClose = DialogPrimitive.Close;\n\n/* ---------- Portal + Overlay + Content ---------- */\n\nexport interface GlassDialogContentProps\n extends ComponentPropsWithRef<typeof DialogPrimitive.Content> {\n /** Hide the default overlay */\n hideOverlay?: boolean;\n}\n\nconst GlassDialogOverlay = forwardRef<\n HTMLDivElement,\n ComponentPropsWithRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n \"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className,\n )}\n {...props}\n />\n));\n\nGlassDialogOverlay.displayName = \"GlassDialogOverlay\";\n\nexport const GlassDialogContent = forwardRef<\n HTMLDivElement,\n GlassDialogContentProps\n>(({ className, children, hideOverlay = false, ...props }, ref) => (\n <DialogPrimitive.Portal>\n {!hideOverlay && <GlassDialogOverlay />}\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n \"glass-elevated fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 p-6\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]\",\n \"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n \"focus:outline-none\",\n className,\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n));\n\nGlassDialogContent.displayName = \"GlassDialogContent\";\n\n/* ---------- Title & Description ---------- */\n\nexport type GlassDialogTitleProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Title\n>;\n\nexport const GlassDialogTitle = forwardRef<\n HTMLHeadingElement,\n GlassDialogTitleProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\n \"text-lg font-semibold text-[var(--koori-text)]\",\n className,\n )}\n {...props}\n />\n));\n\nGlassDialogTitle.displayName = \"GlassDialogTitle\";\n\nexport type GlassDialogDescriptionProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Description\n>;\n\nexport const GlassDialogDescription = forwardRef<\n HTMLParagraphElement,\n GlassDialogDescriptionProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn(\"mt-2 text-sm text-[var(--koori-muted)]\", className)}\n {...props}\n />\n));\n\nGlassDialogDescription.displayName = \"GlassDialogDescription\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,kBAAsC;AACtC,4BAAwB;AAMjB,SAAS,MAAM,QAA8B;AAChD,aAAO,mCAAQ,kBAAK,MAAM,CAAC;AAC/B;;;ACTA,mBAAuD;AAuB3C;AAVL,IAAM,iBAAa;AAAA,EACtB,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC7D,UAAM,eACF,YAAY,WACN,iBACA,YAAY,aACR,mBACA;AAEd,WACI,4CAAC,SAAI,KAAU,WAAW,GAAG,cAAc,OAAO,SAAS,GAAI,GAAG,OAC7D,UACL;AAAA,EAER;AACJ;AAEA,WAAW,cAAc;;;AC9BzB,IAAAA,gBAAuD;AAwB3C,IAAAC,sBAAA;AAVL,IAAM,gBAAY;AAAA,EACrB,CAAC,EAAE,WAAW,UAAU,WAAW,UAAU,GAAG,MAAM,GAAG,QAAQ;AAC7D,UAAM,eACF,YAAY,WACN,iBACA,YAAY,aACR,mBACA;AAEd,WACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,WAAW;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QACJ;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACL;AAAA,EAER;AACJ;AAEA,UAAU,cAAc;AAMjB,IAAM,sBAAkB;AAAA,EAC3B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAChC;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;AAEA,gBAAgB,cAAc;AAIvB,IAAM,oBAAgB;AAAA,EACzB,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAChC,6CAAC,SAAI,KAAU,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OAClD,UACL;AAER;AAEA,cAAc,cAAc;AAIrB,IAAM,sBAAkB;AAAA,EAC3B,CAAC,EAAE,WAAW,UAAU,GAAG,MAAM,GAAG,QAChC;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAER;AAEA,gBAAgB,cAAc;;;AC3F9B,IAAAC,gBAAuD;AAkD3C,IAAAC,sBAAA;AArCZ,IAAM,cAA+C;AAAA,EACjD,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,IAAI;AACR;AAOO,IAAM,kBAAc;AAAA,EACvB,CACI;AAAA,IACI;AAAA,IACA,UAAU;AAAA,IACV,OAAO;AAAA,IACP,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACP,GACA,QACC;AACD,UAAM,OAAO;AAAA,MACT;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,YAAY,IAAI;AAAA,IACpB;AAEA,UAAM,iBACF,YAAY,YACN,iIACA;AAEV,WACI;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA;AAAA,QACA,WAAW,GAAG,MAAM,gBAAgB,SAAS;AAAA,QAC5C,GAAG;AAAA,QAEH;AAAA;AAAA,IACL;AAAA,EAER;AACJ;AAEA,YAAY,cAAc;;;AC9D1B,IAAAC,gBAAuD;AAa/C,IAAAC,sBAAA;AAFD,IAAM,iBAAa;AAAA,EACtB,CAAC,EAAE,WAAW,OAAO,QAAQ,GAAG,MAAM,GAAG,QACrC;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA;AAAA,MACA,WAAW;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA;AAAA,EACR;AAER;AAEA,WAAW,cAAc;;;AC9BzB,IAAAC,gBAIO;AACP,sBAAiC;AA0C7B,IAAAC,sBAAA;AA9BG,IAAM,cAA8B;AAQpC,IAAM,qBAAqC;AAQ3C,IAAM,mBAAmC;AAUhD,IAAM,yBAAqB,0BAGzB,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,EAAiB;AAAA,EAAhB;AAAA,IACG;AAAA,IACA,WAAW;AAAA,MACP;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,IACC,GAAG;AAAA;AACR,CACH;AAED,mBAAmB,cAAc;AAE1B,IAAM,yBAAqB,0BAGhC,CAAC,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,MAAM,GAAG,QACvD,8CAAiB,wBAAhB,EACI;AAAA,GAAC,eAAe,6CAAC,sBAAmB;AAAA,EACrC;AAAA,IAAiB;AAAA,IAAhB;AAAA,MACG;AAAA,MACA,WAAW;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,MACC,GAAG;AAAA,MAEH;AAAA;AAAA,EACL;AAAA,GACJ,CACH;AAED,mBAAmB,cAAc;AAQ1B,IAAM,uBAAmB,0BAG9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,EAAiB;AAAA,EAAhB;AAAA,IACG;AAAA,IACA,WAAW;AAAA,MACP;AAAA,MACA;AAAA,IACJ;AAAA,IACC,GAAG;AAAA;AACR,CACH;AAED,iBAAiB,cAAc;AAMxB,IAAM,6BAAyB,0BAGpC,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB;AAAA,EAAiB;AAAA,EAAhB;AAAA,IACG;AAAA,IACA,WAAW,GAAG,0CAA0C,SAAS;AAAA,IAChE,GAAG;AAAA;AACR,CACH;AAED,uBAAuB,cAAc;","names":["import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime","import_react","import_jsx_runtime"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,223 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
|
|
3
|
+
// src/utils/cn.ts
|
|
4
|
+
import { clsx } from "clsx";
|
|
5
|
+
import { twMerge } from "tailwind-merge";
|
|
6
|
+
function cn(...inputs) {
|
|
7
|
+
return twMerge(clsx(inputs));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
// src/components/glass-panel/glass-panel.tsx
|
|
11
|
+
import { forwardRef } from "react";
|
|
12
|
+
import { jsx } from "react/jsx-runtime";
|
|
13
|
+
var GlassPanel = forwardRef(
|
|
14
|
+
({ className, variant = "default", children, ...props }, ref) => {
|
|
15
|
+
const variantClass = variant === "subtle" ? "glass-subtle" : variant === "elevated" ? "glass-elevated" : "glass";
|
|
16
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cn(variantClass, "p-6", className), ...props, children });
|
|
17
|
+
}
|
|
18
|
+
);
|
|
19
|
+
GlassPanel.displayName = "GlassPanel";
|
|
20
|
+
|
|
21
|
+
// src/components/glass-card/glass-card.tsx
|
|
22
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
23
|
+
import { jsx as jsx2 } from "react/jsx-runtime";
|
|
24
|
+
var GlassCard = forwardRef2(
|
|
25
|
+
({ className, variant = "default", children, ...props }, ref) => {
|
|
26
|
+
const variantClass = variant === "subtle" ? "glass-subtle" : variant === "elevated" ? "glass-elevated" : "glass";
|
|
27
|
+
return /* @__PURE__ */ jsx2(
|
|
28
|
+
"div",
|
|
29
|
+
{
|
|
30
|
+
ref,
|
|
31
|
+
className: cn(
|
|
32
|
+
variantClass,
|
|
33
|
+
"p-5 transition-all duration-200 ease-out hover:bg-white/[0.08] hover:shadow-lg hover:shadow-black/20",
|
|
34
|
+
className
|
|
35
|
+
),
|
|
36
|
+
...props,
|
|
37
|
+
children
|
|
38
|
+
}
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
GlassCard.displayName = "GlassCard";
|
|
43
|
+
var GlassCardHeader = forwardRef2(
|
|
44
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
ref,
|
|
48
|
+
className: cn(
|
|
49
|
+
"mb-4 border-b border-white/10 pb-4",
|
|
50
|
+
className
|
|
51
|
+
),
|
|
52
|
+
...props,
|
|
53
|
+
children
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
);
|
|
57
|
+
GlassCardHeader.displayName = "GlassCardHeader";
|
|
58
|
+
var GlassCardBody = forwardRef2(
|
|
59
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx2("div", { ref, className: cn("flex-1", className), ...props, children })
|
|
60
|
+
);
|
|
61
|
+
GlassCardBody.displayName = "GlassCardBody";
|
|
62
|
+
var GlassCardFooter = forwardRef2(
|
|
63
|
+
({ className, children, ...props }, ref) => /* @__PURE__ */ jsx2(
|
|
64
|
+
"div",
|
|
65
|
+
{
|
|
66
|
+
ref,
|
|
67
|
+
className: cn(
|
|
68
|
+
"mt-4 border-t border-white/10 pt-4",
|
|
69
|
+
className
|
|
70
|
+
),
|
|
71
|
+
...props,
|
|
72
|
+
children
|
|
73
|
+
}
|
|
74
|
+
)
|
|
75
|
+
);
|
|
76
|
+
GlassCardFooter.displayName = "GlassCardFooter";
|
|
77
|
+
|
|
78
|
+
// src/components/glass-button/glass-button.tsx
|
|
79
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
80
|
+
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
81
|
+
var sizeClasses = {
|
|
82
|
+
sm: "px-3 py-1.5 text-sm",
|
|
83
|
+
md: "px-4 py-2 text-sm",
|
|
84
|
+
lg: "px-6 py-3 text-base"
|
|
85
|
+
};
|
|
86
|
+
var GlassButton = forwardRef3(
|
|
87
|
+
({
|
|
88
|
+
className,
|
|
89
|
+
variant = "default",
|
|
90
|
+
size = "md",
|
|
91
|
+
type = "button",
|
|
92
|
+
children,
|
|
93
|
+
...props
|
|
94
|
+
}, ref) => {
|
|
95
|
+
const base = cn(
|
|
96
|
+
"glass inline-flex items-center justify-center gap-2 font-medium",
|
|
97
|
+
"transition-all duration-150 ease-out",
|
|
98
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent",
|
|
99
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
100
|
+
sizeClasses[size]
|
|
101
|
+
);
|
|
102
|
+
const variantClasses = variant === "primary" ? "bg-[var(--koori-primary)]/20 text-[var(--koori-primary)] hover:bg-[var(--koori-primary)]/30 border-[var(--koori-primary)]/30" : "text-[var(--koori-text)] hover:bg-white/10";
|
|
103
|
+
return /* @__PURE__ */ jsx3(
|
|
104
|
+
"button",
|
|
105
|
+
{
|
|
106
|
+
ref,
|
|
107
|
+
type,
|
|
108
|
+
className: cn(base, variantClasses, className),
|
|
109
|
+
...props,
|
|
110
|
+
children
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
}
|
|
114
|
+
);
|
|
115
|
+
GlassButton.displayName = "GlassButton";
|
|
116
|
+
|
|
117
|
+
// src/components/glass-input/glass-input.tsx
|
|
118
|
+
import { forwardRef as forwardRef4 } from "react";
|
|
119
|
+
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
120
|
+
var GlassInput = forwardRef4(
|
|
121
|
+
({ className, type = "text", ...props }, ref) => /* @__PURE__ */ jsx4(
|
|
122
|
+
"input",
|
|
123
|
+
{
|
|
124
|
+
ref,
|
|
125
|
+
type,
|
|
126
|
+
className: cn(
|
|
127
|
+
"glass w-full px-4 py-2.5 text-sm",
|
|
128
|
+
"text-[var(--koori-text)] placeholder:text-[var(--koori-muted)]",
|
|
129
|
+
"bg-white/[0.04]",
|
|
130
|
+
"outline-none transition-all duration-150 ease-out",
|
|
131
|
+
"focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-transparent",
|
|
132
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
133
|
+
className
|
|
134
|
+
),
|
|
135
|
+
...props
|
|
136
|
+
}
|
|
137
|
+
)
|
|
138
|
+
);
|
|
139
|
+
GlassInput.displayName = "GlassInput";
|
|
140
|
+
|
|
141
|
+
// src/components/glass-dialog/glass-dialog.tsx
|
|
142
|
+
import {
|
|
143
|
+
forwardRef as forwardRef5
|
|
144
|
+
} from "react";
|
|
145
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
146
|
+
import { jsx as jsx5, jsxs } from "react/jsx-runtime";
|
|
147
|
+
var GlassDialog = DialogPrimitive.Root;
|
|
148
|
+
var GlassDialogTrigger = DialogPrimitive.Trigger;
|
|
149
|
+
var GlassDialogClose = DialogPrimitive.Close;
|
|
150
|
+
var GlassDialogOverlay = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
151
|
+
DialogPrimitive.Overlay,
|
|
152
|
+
{
|
|
153
|
+
ref,
|
|
154
|
+
className: cn(
|
|
155
|
+
"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm",
|
|
156
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
157
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
158
|
+
className
|
|
159
|
+
),
|
|
160
|
+
...props
|
|
161
|
+
}
|
|
162
|
+
));
|
|
163
|
+
GlassDialogOverlay.displayName = "GlassDialogOverlay";
|
|
164
|
+
var GlassDialogContent = forwardRef5(({ className, children, hideOverlay = false, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
|
|
165
|
+
!hideOverlay && /* @__PURE__ */ jsx5(GlassDialogOverlay, {}),
|
|
166
|
+
/* @__PURE__ */ jsx5(
|
|
167
|
+
DialogPrimitive.Content,
|
|
168
|
+
{
|
|
169
|
+
ref,
|
|
170
|
+
className: cn(
|
|
171
|
+
"glass-elevated fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 p-6",
|
|
172
|
+
"data-[state=open]:animate-in data-[state=closed]:animate-out",
|
|
173
|
+
"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
|
|
174
|
+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
|
|
175
|
+
"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]",
|
|
176
|
+
"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]",
|
|
177
|
+
"focus:outline-none",
|
|
178
|
+
className
|
|
179
|
+
),
|
|
180
|
+
...props,
|
|
181
|
+
children
|
|
182
|
+
}
|
|
183
|
+
)
|
|
184
|
+
] }));
|
|
185
|
+
GlassDialogContent.displayName = "GlassDialogContent";
|
|
186
|
+
var GlassDialogTitle = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
187
|
+
DialogPrimitive.Title,
|
|
188
|
+
{
|
|
189
|
+
ref,
|
|
190
|
+
className: cn(
|
|
191
|
+
"text-lg font-semibold text-[var(--koori-text)]",
|
|
192
|
+
className
|
|
193
|
+
),
|
|
194
|
+
...props
|
|
195
|
+
}
|
|
196
|
+
));
|
|
197
|
+
GlassDialogTitle.displayName = "GlassDialogTitle";
|
|
198
|
+
var GlassDialogDescription = forwardRef5(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(
|
|
199
|
+
DialogPrimitive.Description,
|
|
200
|
+
{
|
|
201
|
+
ref,
|
|
202
|
+
className: cn("mt-2 text-sm text-[var(--koori-muted)]", className),
|
|
203
|
+
...props
|
|
204
|
+
}
|
|
205
|
+
));
|
|
206
|
+
GlassDialogDescription.displayName = "GlassDialogDescription";
|
|
207
|
+
export {
|
|
208
|
+
GlassButton,
|
|
209
|
+
GlassCard,
|
|
210
|
+
GlassCardBody,
|
|
211
|
+
GlassCardFooter,
|
|
212
|
+
GlassCardHeader,
|
|
213
|
+
GlassDialog,
|
|
214
|
+
GlassDialogClose,
|
|
215
|
+
GlassDialogContent,
|
|
216
|
+
GlassDialogDescription,
|
|
217
|
+
GlassDialogTitle,
|
|
218
|
+
GlassDialogTrigger,
|
|
219
|
+
GlassInput,
|
|
220
|
+
GlassPanel,
|
|
221
|
+
cn
|
|
222
|
+
};
|
|
223
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/utils/cn.ts","../src/components/glass-panel/glass-panel.tsx","../src/components/glass-card/glass-card.tsx","../src/components/glass-button/glass-button.tsx","../src/components/glass-input/glass-input.tsx","../src/components/glass-dialog/glass-dialog.tsx"],"sourcesContent":["import { type ClassValue, clsx } from \"clsx\";\nimport { twMerge } from \"tailwind-merge\";\n\n/**\n * Utility for merging Tailwind CSS classes with clsx.\n * Handles conditional classes and resolves Tailwind conflicts.\n */\nexport function cn(...inputs: ClassValue[]): string {\n return twMerge(clsx(inputs));\n}\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface GlassPanelProps extends ComponentPropsWithRef<\"div\"> {\n /** Additional glass variant class */\n variant?: \"default\" | \"subtle\" | \"elevated\";\n}\n\n/**\n * GlassPanel — A container wrapper with glassmorphism styling.\n *\n * Use as a layout primitive to wrap content in a frosted‑glass surface.\n */\nexport const GlassPanel = forwardRef<HTMLDivElement, GlassPanelProps>(\n ({ className, variant = \"default\", children, ...props }, ref) => {\n const variantClass =\n variant === \"subtle\"\n ? \"glass-subtle\"\n : variant === \"elevated\"\n ? \"glass-elevated\"\n : \"glass\";\n\n return (\n <div ref={ref} className={cn(variantClass, \"p-6\", className)} {...props}>\n {children}\n </div>\n );\n },\n);\n\nGlassPanel.displayName = \"GlassPanel\";\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface GlassCardProps extends ComponentPropsWithRef<\"div\"> {\n /** Glass intensity variant */\n variant?: \"default\" | \"subtle\" | \"elevated\";\n}\n\n/**\n * GlassCard — A card component with glassmorphism styling.\n *\n * Features an inner padding preset and optional header/body/footer layout.\n * Ideal for displaying discrete content blocks.\n */\nexport const GlassCard = forwardRef<HTMLDivElement, GlassCardProps>(\n ({ className, variant = \"default\", children, ...props }, ref) => {\n const variantClass =\n variant === \"subtle\"\n ? \"glass-subtle\"\n : variant === \"elevated\"\n ? \"glass-elevated\"\n : \"glass\";\n\n return (\n <div\n ref={ref}\n className={cn(\n variantClass,\n \"p-5 transition-all duration-200 ease-out hover:bg-white/[0.08] hover:shadow-lg hover:shadow-black/20\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n );\n },\n);\n\nGlassCard.displayName = \"GlassCard\";\n\n/* ---------- Sub‑components ---------- */\n\nexport interface GlassCardHeaderProps extends ComponentPropsWithRef<\"div\"> { }\n\nexport const GlassCardHeader = forwardRef<HTMLDivElement, GlassCardHeaderProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"mb-4 border-b border-white/10 pb-4\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nGlassCardHeader.displayName = \"GlassCardHeader\";\n\nexport interface GlassCardBodyProps extends ComponentPropsWithRef<\"div\"> { }\n\nexport const GlassCardBody = forwardRef<HTMLDivElement, GlassCardBodyProps>(\n ({ className, children, ...props }, ref) => (\n <div ref={ref} className={cn(\"flex-1\", className)} {...props}>\n {children}\n </div>\n ),\n);\n\nGlassCardBody.displayName = \"GlassCardBody\";\n\nexport interface GlassCardFooterProps extends ComponentPropsWithRef<\"div\"> { }\n\nexport const GlassCardFooter = forwardRef<HTMLDivElement, GlassCardFooterProps>(\n ({ className, children, ...props }, ref) => (\n <div\n ref={ref}\n className={cn(\n \"mt-4 border-t border-white/10 pt-4\",\n className,\n )}\n {...props}\n >\n {children}\n </div>\n ),\n);\n\nGlassCardFooter.displayName = \"GlassCardFooter\";\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport type GlassButtonVariant = \"default\" | \"primary\";\nexport type GlassButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface GlassButtonProps extends ComponentPropsWithRef<\"button\"> {\n /** Visual variant */\n variant?: GlassButtonVariant;\n /** Size preset */\n size?: GlassButtonSize;\n}\n\nconst sizeClasses: Record<GlassButtonSize, string> = {\n sm: \"px-3 py-1.5 text-sm\",\n md: \"px-4 py-2 text-sm\",\n lg: \"px-6 py-3 text-base\",\n};\n\n/**\n * GlassButton — A button with glassmorphism styling and hover glow.\n *\n * Supports `default` and `primary` variants with three size presets.\n */\nexport const GlassButton = forwardRef<HTMLButtonElement, GlassButtonProps>(\n (\n {\n className,\n variant = \"default\",\n size = \"md\",\n type = \"button\",\n children,\n ...props\n },\n ref,\n ) => {\n const base = cn(\n \"glass inline-flex items-center justify-center gap-2 font-medium\",\n \"transition-all duration-150 ease-out\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/20 focus-visible:ring-offset-2 focus-visible:ring-offset-transparent\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n sizeClasses[size],\n );\n\n const variantClasses =\n variant === \"primary\"\n ? \"bg-[var(--koori-primary)]/20 text-[var(--koori-primary)] hover:bg-[var(--koori-primary)]/30 border-[var(--koori-primary)]/30\"\n : \"text-[var(--koori-text)] hover:bg-white/10\";\n\n return (\n <button\n ref={ref}\n type={type}\n className={cn(base, variantClasses, className)}\n {...props}\n >\n {children}\n </button>\n );\n },\n);\n\nGlassButton.displayName = \"GlassButton\";\n","import { forwardRef, type ComponentPropsWithRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\n\nexport interface GlassInputProps extends ComponentPropsWithRef<\"input\"> { }\n\n/**\n * GlassInput — A text input with glassmorphism styling.\n *\n * Works as both controlled and uncontrolled.\n * Focus ring is a subtle white/20 glow.\n */\nexport const GlassInput = forwardRef<HTMLInputElement, GlassInputProps>(\n ({ className, type = \"text\", ...props }, ref) => (\n <input\n ref={ref}\n type={type}\n className={cn(\n \"glass w-full px-4 py-2.5 text-sm\",\n \"text-[var(--koori-text)] placeholder:text-[var(--koori-muted)]\",\n \"bg-white/[0.04]\",\n \"outline-none transition-all duration-150 ease-out\",\n \"focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-transparent\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n className,\n )}\n {...props}\n />\n ),\n);\n\nGlassInput.displayName = \"GlassInput\";\n","import {\n forwardRef,\n type ComponentPropsWithRef,\n type ComponentPropsWithoutRef,\n} from \"react\";\nimport * as DialogPrimitive from \"@radix-ui/react-dialog\";\nimport { cn } from \"../../utils/cn\";\n\n/* ---------- Root ---------- */\n\nexport type GlassDialogProps = ComponentPropsWithoutRef<\n typeof DialogPrimitive.Root\n>;\n\n/**\n * GlassDialog — Accessible dialog/modal powered by Radix UI with glass styling.\n */\nexport const GlassDialog = DialogPrimitive.Root;\n\n/* ---------- Trigger ---------- */\n\nexport type GlassDialogTriggerProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Trigger\n>;\n\nexport const GlassDialogTrigger = DialogPrimitive.Trigger;\n\n/* ---------- Close ---------- */\n\nexport type GlassDialogCloseProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Close\n>;\n\nexport const GlassDialogClose = DialogPrimitive.Close;\n\n/* ---------- Portal + Overlay + Content ---------- */\n\nexport interface GlassDialogContentProps\n extends ComponentPropsWithRef<typeof DialogPrimitive.Content> {\n /** Hide the default overlay */\n hideOverlay?: boolean;\n}\n\nconst GlassDialogOverlay = forwardRef<\n HTMLDivElement,\n ComponentPropsWithRef<typeof DialogPrimitive.Overlay>\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Overlay\n ref={ref}\n className={cn(\n \"fixed inset-0 z-50 bg-black/40 backdrop-blur-sm\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n className,\n )}\n {...props}\n />\n));\n\nGlassDialogOverlay.displayName = \"GlassDialogOverlay\";\n\nexport const GlassDialogContent = forwardRef<\n HTMLDivElement,\n GlassDialogContentProps\n>(({ className, children, hideOverlay = false, ...props }, ref) => (\n <DialogPrimitive.Portal>\n {!hideOverlay && <GlassDialogOverlay />}\n <DialogPrimitive.Content\n ref={ref}\n className={cn(\n \"glass-elevated fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2 p-6\",\n \"data-[state=open]:animate-in data-[state=closed]:animate-out\",\n \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n \"data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]\",\n \"data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]\",\n \"focus:outline-none\",\n className,\n )}\n {...props}\n >\n {children}\n </DialogPrimitive.Content>\n </DialogPrimitive.Portal>\n));\n\nGlassDialogContent.displayName = \"GlassDialogContent\";\n\n/* ---------- Title & Description ---------- */\n\nexport type GlassDialogTitleProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Title\n>;\n\nexport const GlassDialogTitle = forwardRef<\n HTMLHeadingElement,\n GlassDialogTitleProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Title\n ref={ref}\n className={cn(\n \"text-lg font-semibold text-[var(--koori-text)]\",\n className,\n )}\n {...props}\n />\n));\n\nGlassDialogTitle.displayName = \"GlassDialogTitle\";\n\nexport type GlassDialogDescriptionProps = ComponentPropsWithRef<\n typeof DialogPrimitive.Description\n>;\n\nexport const GlassDialogDescription = forwardRef<\n HTMLParagraphElement,\n GlassDialogDescriptionProps\n>(({ className, ...props }, ref) => (\n <DialogPrimitive.Description\n ref={ref}\n className={cn(\"mt-2 text-sm text-[var(--koori-muted)]\", className)}\n {...props}\n />\n));\n\nGlassDialogDescription.displayName = \"GlassDialogDescription\";\n"],"mappings":"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","names":["forwardRef","jsx","forwardRef","forwardRef","jsx","forwardRef","forwardRef","jsx","forwardRef","forwardRef","jsx","forwardRef"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,64 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "koori-ui",
|
|
3
|
+
"version": "1.0.0",
|
|
4
|
+
"description": "Soft glass UI components built on Radix UI for React 19",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"import": {
|
|
11
|
+
"types": "./dist/index.d.mts",
|
|
12
|
+
"default": "./dist/index.mjs"
|
|
13
|
+
},
|
|
14
|
+
"require": {
|
|
15
|
+
"types": "./dist/index.d.ts",
|
|
16
|
+
"default": "./dist/index.js"
|
|
17
|
+
}
|
|
18
|
+
},
|
|
19
|
+
"./styles.css": "./dist/index.css"
|
|
20
|
+
},
|
|
21
|
+
"files": [
|
|
22
|
+
"dist"
|
|
23
|
+
],
|
|
24
|
+
"sideEffects": [
|
|
25
|
+
"*.css"
|
|
26
|
+
],
|
|
27
|
+
"scripts": {
|
|
28
|
+
"build": "tsup",
|
|
29
|
+
"typecheck": "tsc --noEmit",
|
|
30
|
+
"dev": "tsup --watch",
|
|
31
|
+
"clean": "rm -rf dist",
|
|
32
|
+
"prepublishOnly": "npm run build"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"react": ">=19",
|
|
36
|
+
"react-dom": ">=19"
|
|
37
|
+
},
|
|
38
|
+
"dependencies": {
|
|
39
|
+
"@radix-ui/react-dialog": "^1.1.6",
|
|
40
|
+
"clsx": "^2.1.1",
|
|
41
|
+
"tailwind-merge": "^3.0.2"
|
|
42
|
+
},
|
|
43
|
+
"devDependencies": {
|
|
44
|
+
"@types/react": "^19.0.0",
|
|
45
|
+
"@types/react-dom": "^19.0.0",
|
|
46
|
+
"react": "^19.0.0",
|
|
47
|
+
"react-dom": "^19.0.0",
|
|
48
|
+
"tsup": "^8.4.0",
|
|
49
|
+
"typescript": "^5.7.0"
|
|
50
|
+
},
|
|
51
|
+
"keywords": [
|
|
52
|
+
"react",
|
|
53
|
+
"ui",
|
|
54
|
+
"glassmorphism",
|
|
55
|
+
"radix",
|
|
56
|
+
"components",
|
|
57
|
+
"design-system"
|
|
58
|
+
],
|
|
59
|
+
"license": "MIT",
|
|
60
|
+
"repository": {
|
|
61
|
+
"type": "git",
|
|
62
|
+
"url": "git+https://github.com/rizkyhaksono/koori-ui.git"
|
|
63
|
+
}
|
|
64
|
+
}
|