koori-ui 1.0.4 → 1.0.6
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 +163 -148
- package/dist/index.css +23 -13
- package/dist/index.d.mts +24 -2
- package/dist/index.d.ts +24 -2
- package/dist/index.js +325 -209
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +267 -147
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
</p>
|
|
4
4
|
|
|
5
5
|
<p align="center">
|
|
6
|
-
|
|
6
|
+
Comprehensive glassmorphism component library built on <a href="https://www.radix-ui.com">Radix UI</a> for React 19
|
|
7
7
|
</p>
|
|
8
8
|
|
|
9
9
|
<p align="center">
|
|
@@ -16,228 +16,243 @@
|
|
|
16
16
|
|
|
17
17
|
## Features
|
|
18
18
|
|
|
19
|
-
- 🪟 **
|
|
20
|
-
- ♿ **Accessible** — built on Radix UI primitives
|
|
21
|
-
-
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
19
|
+
- 🪟 **27+ components** — General, Layout, Form, Navigation, Data Display, Feedback
|
|
20
|
+
- ♿ **Accessible** — built on Radix UI primitives with keyboard nav and ARIA
|
|
21
|
+
- 🌗 **Dark / Light / System** — `KooriProvider` with localStorage persistence and no FOUC
|
|
22
|
+
- 🎨 **4 color presets** — Slate, Zinc, Neutral, Violet via `data-theme`
|
|
23
|
+
- 🤖 **MCP server** — search component docs from Claude Code
|
|
24
|
+
- ⚡ **React 19 ready** — RSC-safe (`"use client"` banner auto-injected)
|
|
25
|
+
- 📦 **Dual ESM + CJS** — tree-shakeable, TypeScript declarations included
|
|
25
26
|
|
|
26
27
|
---
|
|
27
28
|
|
|
28
|
-
##
|
|
29
|
+
## Quick Start
|
|
29
30
|
|
|
30
31
|
```bash
|
|
31
|
-
|
|
32
|
+
npx create-koori-app my-app
|
|
33
|
+
cd my-app && npm run dev
|
|
32
34
|
```
|
|
33
35
|
|
|
34
|
-
|
|
36
|
+
Or install manually:
|
|
37
|
+
|
|
38
|
+
```bash
|
|
39
|
+
npm install koori-ui
|
|
40
|
+
```
|
|
35
41
|
|
|
36
42
|
---
|
|
37
43
|
|
|
38
|
-
##
|
|
44
|
+
## Setup
|
|
39
45
|
|
|
40
|
-
Import
|
|
46
|
+
### 1. Import styles
|
|
41
47
|
|
|
42
48
|
```tsx
|
|
49
|
+
// app/layout.tsx (or your entry point)
|
|
43
50
|
import "koori-ui/styles.css";
|
|
44
51
|
```
|
|
45
52
|
|
|
46
|
-
|
|
53
|
+
### 2. Wrap with KooriProvider
|
|
54
|
+
|
|
55
|
+
`KooriProvider` handles dark/light mode, color scheme, localStorage persistence, and prevents flash-of-unstyled-content.
|
|
47
56
|
|
|
48
57
|
```tsx
|
|
49
|
-
import {
|
|
58
|
+
import { KooriProvider } from "koori-ui";
|
|
50
59
|
|
|
51
|
-
export default function
|
|
60
|
+
export default function RootLayout({ children }: { children: React.ReactNode }) {
|
|
52
61
|
return (
|
|
53
|
-
<
|
|
54
|
-
<
|
|
55
|
-
<
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
</
|
|
59
|
-
</
|
|
62
|
+
<html lang="en" suppressHydrationWarning>
|
|
63
|
+
<body>
|
|
64
|
+
<KooriProvider defaultTheme="dark">
|
|
65
|
+
{children}
|
|
66
|
+
</KooriProvider>
|
|
67
|
+
</body>
|
|
68
|
+
</html>
|
|
60
69
|
);
|
|
61
70
|
}
|
|
62
71
|
```
|
|
63
72
|
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
## Components
|
|
67
|
-
|
|
68
|
-
### GlassPanel
|
|
69
|
-
|
|
70
|
-
A container wrapper with glassmorphism styling.
|
|
73
|
+
### 3. Use the theme hook
|
|
71
74
|
|
|
72
75
|
```tsx
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
</GlassPanel>
|
|
76
|
-
```
|
|
76
|
+
"use client";
|
|
77
|
+
import { useKooriTheme, GlassButton } from "koori-ui";
|
|
77
78
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
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>
|
|
79
|
+
export function ThemeToggle() {
|
|
80
|
+
const { theme, setTheme } = useKooriTheme();
|
|
81
|
+
return (
|
|
82
|
+
<GlassButton onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
|
|
83
|
+
Toggle Theme
|
|
84
|
+
</GlassButton>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
104
87
|
```
|
|
105
88
|
|
|
106
|
-
|
|
|
107
|
-
|
|
108
|
-
| `
|
|
89
|
+
| `KooriProvider` prop | Type | Default | Description |
|
|
90
|
+
|---|---|---|---|
|
|
91
|
+
| `defaultTheme` | `"light" \| "dark" \| "system"` | `"system"` | Initial theme |
|
|
92
|
+
| `defaultColorScheme` | `"default" \| "slate" \| "zinc" \| "neutral" \| "violet"` | `"default"` | Initial color preset |
|
|
109
93
|
|
|
110
94
|
---
|
|
111
95
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
A button with hover glow and variants.
|
|
115
|
-
|
|
116
|
-
```tsx
|
|
117
|
-
<GlassButton variant="primary" size="lg">Submit</GlassButton>
|
|
118
|
-
```
|
|
96
|
+
## Components
|
|
119
97
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
|
123
|
-
|
|
98
|
+
### General
|
|
99
|
+
|
|
100
|
+
| Component | Description |
|
|
101
|
+
|---|---|
|
|
102
|
+
| `GlassButton` | Button with `variant` (default/primary) and `size` (sm/md/lg) |
|
|
103
|
+
| `GlassBadge` | Pill badge — variants: default, primary, success, warning, danger |
|
|
104
|
+
| `GlassH1` `GlassH2` `GlassH3` `GlassH4` | Heading elements |
|
|
105
|
+
| `GlassText` | Paragraph — `size` (sm/md/lg), `muted` prop |
|
|
106
|
+
| `GlassCode` | Inline code snippet with glass background |
|
|
107
|
+
| `GlassLink` | Anchor with primary color and hover underline |
|
|
108
|
+
| `GlassBlockquote` | Blockquote with primary left border |
|
|
109
|
+
|
|
110
|
+
### Layout
|
|
111
|
+
|
|
112
|
+
| Component | Description |
|
|
113
|
+
|---|---|
|
|
114
|
+
| `GlassPanel` | Foundational container — variants: default, subtle, elevated |
|
|
115
|
+
| `GlassCard` + `GlassCardHeader` / `GlassCardBody` / `GlassCardFooter` | Structured card |
|
|
116
|
+
| `GlassSeparator` | Horizontal or vertical divider (`orientation` prop) |
|
|
117
|
+
|
|
118
|
+
### Form
|
|
119
|
+
|
|
120
|
+
| Component | Description |
|
|
121
|
+
|---|---|
|
|
122
|
+
| `GlassInput` | Text input, all native types supported |
|
|
123
|
+
| `GlassTextarea` | Multi-line input (`rows` prop) |
|
|
124
|
+
| `GlassCheckbox` | Accessible checkbox with optional `label` |
|
|
125
|
+
| `GlassSwitch` | Toggle switch with optional `label` |
|
|
126
|
+
| `GlassRadioGroup` + `GlassRadioItem` | Radio group powered by Radix UI |
|
|
127
|
+
| `GlassSelect` + sub-components | Dropdown select powered by Radix UI |
|
|
128
|
+
| `GlassSlider` | Range slider powered by Radix UI |
|
|
129
|
+
|
|
130
|
+
### Navigation
|
|
131
|
+
|
|
132
|
+
| Component | Description |
|
|
133
|
+
|---|---|
|
|
134
|
+
| `GlassTabs` + `GlassTabsList` / `GlassTabsTrigger` / `GlassTabsContent` | Tabbed interface |
|
|
135
|
+
| `GlassBreadcrumb` + `GlassBreadcrumbItem` / `GlassBreadcrumbSeparator` | Navigation breadcrumb |
|
|
136
|
+
| `GlassDropdownMenu` + sub-components | Context menu powered by Radix UI |
|
|
137
|
+
|
|
138
|
+
### Data Display
|
|
139
|
+
|
|
140
|
+
| Component | Description |
|
|
141
|
+
|---|---|
|
|
142
|
+
| `GlassAvatar` + `GlassAvatarImage` / `GlassAvatarFallback` | Avatar with image fallback |
|
|
143
|
+
| `GlassTable` + `GlassThead` / `GlassTbody` / `GlassTr` / `GlassTh` / `GlassTd` | Data table |
|
|
144
|
+
| `GlassStatCard` | KPI card with `value`, `label`, `trend`, `icon` props |
|
|
145
|
+
| `GlassAreaChart` / `GlassBarChart` | Recharts wrappers with glass tooltips |
|
|
146
|
+
|
|
147
|
+
### Feedback
|
|
148
|
+
|
|
149
|
+
| Component | Description |
|
|
150
|
+
|---|---|
|
|
151
|
+
| `GlassAlert` | Alert with variants: info, success, warning, error |
|
|
152
|
+
| `GlassDialog` + sub-components | Modal dialog powered by Radix UI |
|
|
153
|
+
| `GlassPopover` + sub-components | Floating panel powered by Radix UI |
|
|
154
|
+
| `GlassTooltip` + sub-components | Tooltip powered by Radix UI |
|
|
155
|
+
| `GlassToast` + `GlassToaster` | Toast notifications powered by Radix UI |
|
|
156
|
+
| `GlassProgress` | Progress bar — variants: default, success, warning, error |
|
|
157
|
+
| `GlassSkeleton` | Animated loading placeholder |
|
|
124
158
|
|
|
125
159
|
---
|
|
126
160
|
|
|
127
|
-
|
|
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
|
-
---
|
|
161
|
+
## Theming
|
|
138
162
|
|
|
139
|
-
###
|
|
163
|
+
### Color presets
|
|
140
164
|
|
|
141
|
-
|
|
165
|
+
Apply a preset via `KooriProvider` or directly on `<html>`:
|
|
142
166
|
|
|
143
167
|
```tsx
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
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>
|
|
168
|
+
<KooriProvider defaultColorScheme="violet">...</KooriProvider>
|
|
169
|
+
// or
|
|
170
|
+
<html data-theme="slate">
|
|
165
171
|
```
|
|
166
172
|
|
|
167
|
-
|
|
173
|
+
Available presets: `slate`, `zinc`, `neutral`, `violet`
|
|
168
174
|
|
|
169
|
-
###
|
|
175
|
+
### CSS custom properties
|
|
170
176
|
|
|
171
|
-
|
|
177
|
+
Override any token to match your brand:
|
|
172
178
|
|
|
173
|
-
```
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
{ name: "Feb", revenue: 3000, users: 1398 },
|
|
179
|
-
];
|
|
180
|
-
|
|
181
|
-
<GlassAreaChart
|
|
182
|
-
data={chartData}
|
|
183
|
-
index="name"
|
|
184
|
-
categories={[{ key: "revenue", color: "var(--koori-primary)", name: "Revenue" }]}
|
|
185
|
-
/>
|
|
179
|
+
```css
|
|
180
|
+
:root {
|
|
181
|
+
--koori-primary: #8b5cf6;
|
|
182
|
+
--koori-accent: #a78bfa;
|
|
183
|
+
}
|
|
186
184
|
```
|
|
187
185
|
|
|
188
|
-
|
|
186
|
+
| Token | Description |
|
|
187
|
+
|---|---|
|
|
188
|
+
| `--koori-bg` | Page background |
|
|
189
|
+
| `--koori-text` | Primary text |
|
|
190
|
+
| `--koori-muted` | Secondary/muted text |
|
|
191
|
+
| `--koori-primary` | Brand primary |
|
|
192
|
+
| `--koori-accent` | Brand accent |
|
|
193
|
+
| `--koori-success` / `--koori-warning` / `--koori-error` / `--koori-info` | Status colors |
|
|
194
|
+
| `--koori-radius-sm/md/lg/xl/full` | Border radius scale |
|
|
189
195
|
|
|
190
|
-
|
|
196
|
+
### Glass CSS classes
|
|
191
197
|
|
|
192
|
-
|
|
198
|
+
Use directly when building custom components:
|
|
193
199
|
|
|
194
|
-
|
|
200
|
+
| Class | Description |
|
|
201
|
+
|---|---|
|
|
202
|
+
| `.glass` | Standard frosted glass |
|
|
203
|
+
| `.glass-subtle` | Lighter, more transparent |
|
|
204
|
+
| `.glass-elevated` | Strongest blur and drop shadow |
|
|
195
205
|
|
|
196
206
|
---
|
|
197
207
|
|
|
198
|
-
##
|
|
208
|
+
## MCP Server (Claude Code)
|
|
199
209
|
|
|
200
|
-
|
|
210
|
+
Search Koori UI component docs from within Claude Code:
|
|
201
211
|
|
|
202
|
-
```
|
|
203
|
-
|
|
204
|
-
--koori-bg: #0b0f19;
|
|
205
|
-
--koori-text: #e6eaf2;
|
|
206
|
-
--koori-muted: #a1a7b3;
|
|
207
|
-
--koori-primary: #6c8cff;
|
|
208
|
-
}
|
|
212
|
+
```bash
|
|
213
|
+
cd packages/mcp && npm run build
|
|
209
214
|
```
|
|
210
215
|
|
|
211
|
-
|
|
216
|
+
Add to `.claude/settings.json`:
|
|
212
217
|
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
|
|
218
|
+
```json
|
|
219
|
+
{
|
|
220
|
+
"mcpServers": {
|
|
221
|
+
"koori-ui": {
|
|
222
|
+
"command": "node",
|
|
223
|
+
"args": ["./packages/mcp/dist/index.js"]
|
|
224
|
+
}
|
|
225
|
+
}
|
|
216
226
|
}
|
|
217
227
|
```
|
|
218
228
|
|
|
229
|
+
Available tools: `list_components`, `get_component_docs`, `search_components`, `get_component_example`
|
|
230
|
+
|
|
219
231
|
---
|
|
220
232
|
|
|
221
|
-
##
|
|
233
|
+
## create-koori-app
|
|
222
234
|
|
|
223
|
-
|
|
235
|
+
Scaffold a new project interactively:
|
|
224
236
|
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
237
|
+
```bash
|
|
238
|
+
npx create-koori-app my-app
|
|
239
|
+
```
|
|
240
|
+
|
|
241
|
+
Prompts for project name, default theme, and package manager. Outputs a Next.js app with `KooriProvider` pre-configured.
|
|
230
242
|
|
|
231
243
|
---
|
|
232
244
|
|
|
233
245
|
## Build
|
|
234
246
|
|
|
235
247
|
```bash
|
|
236
|
-
npm run build # CJS + ESM + DTS → dist/
|
|
248
|
+
npm run build # CJS + ESM + DTS + CSS → dist/
|
|
237
249
|
npm run typecheck # tsc --noEmit
|
|
238
250
|
npm run dev # watch mode
|
|
251
|
+
npm run release:patch # bump version, build, pack tarball
|
|
239
252
|
```
|
|
240
253
|
|
|
254
|
+
---
|
|
255
|
+
|
|
241
256
|
## License
|
|
242
257
|
|
|
243
258
|
MIT
|
package/dist/index.css
CHANGED
|
@@ -870,6 +870,9 @@
|
|
|
870
870
|
.p-6 {
|
|
871
871
|
padding: calc(var(--spacing) * 6);
|
|
872
872
|
}
|
|
873
|
+
.p-8 {
|
|
874
|
+
padding: calc(var(--spacing) * 8);
|
|
875
|
+
}
|
|
873
876
|
.px-1\.5 {
|
|
874
877
|
padding-inline: calc(var(--spacing) * 1.5);
|
|
875
878
|
}
|
|
@@ -1071,6 +1074,9 @@
|
|
|
1071
1074
|
.italic {
|
|
1072
1075
|
font-style: italic;
|
|
1073
1076
|
}
|
|
1077
|
+
.underline {
|
|
1078
|
+
text-decoration-line: underline;
|
|
1079
|
+
}
|
|
1074
1080
|
.underline-offset-4 {
|
|
1075
1081
|
text-underline-offset: 4px;
|
|
1076
1082
|
}
|
|
@@ -1555,21 +1561,21 @@
|
|
|
1555
1561
|
}
|
|
1556
1562
|
}
|
|
1557
1563
|
:root {
|
|
1558
|
-
--koori-bg: #
|
|
1564
|
+
--koori-bg: #eef2fb;
|
|
1559
1565
|
--koori-text: #0f172a;
|
|
1560
1566
|
--koori-muted: #64748b;
|
|
1561
1567
|
--koori-primary: #3b82f6;
|
|
1562
1568
|
--koori-accent: #06b6d4;
|
|
1563
|
-
--koori-border: rgba(15, 23, 42, 0.
|
|
1564
|
-
--koori-card: rgba(255, 255, 255, 0.
|
|
1565
|
-
--koori-card-subtle: rgba(255, 255, 255, 0.
|
|
1566
|
-
--koori-card-elevated: rgba(255, 255, 255, 0.
|
|
1567
|
-
--koori-glass-border: rgba(15, 23, 42, 0.
|
|
1568
|
-
--koori-glass-border-top: rgba(255, 255, 255, 0.
|
|
1569
|
-
--koori-glass-border-left: rgba(255, 255, 255, 0.
|
|
1570
|
-
--koori-glass-shadow: rgba(
|
|
1571
|
-
--koori-glass-inset: rgba(255, 255, 255, 0.
|
|
1572
|
-
--koori-glass-hover-border: rgba(15, 23, 42, 0.
|
|
1569
|
+
--koori-border: rgba(15, 23, 42, 0.10);
|
|
1570
|
+
--koori-card: rgba(255, 255, 255, 0.68);
|
|
1571
|
+
--koori-card-subtle: rgba(255, 255, 255, 0.44);
|
|
1572
|
+
--koori-card-elevated: rgba(255, 255, 255, 0.82);
|
|
1573
|
+
--koori-glass-border: rgba(15, 23, 42, 0.09);
|
|
1574
|
+
--koori-glass-border-top: rgba(255, 255, 255, 0.9);
|
|
1575
|
+
--koori-glass-border-left: rgba(255, 255, 255, 0.6);
|
|
1576
|
+
--koori-glass-shadow: rgba(15, 23, 100, 0.12);
|
|
1577
|
+
--koori-glass-inset: rgba(255, 255, 255, 0.95);
|
|
1578
|
+
--koori-glass-hover-border: rgba(15, 23, 42, 0.16);
|
|
1573
1579
|
--koori-success: #10b981;
|
|
1574
1580
|
--koori-warning: #f59e0b;
|
|
1575
1581
|
--koori-error: #ef4444;
|
|
@@ -1728,8 +1734,9 @@ body {
|
|
|
1728
1734
|
position: relative;
|
|
1729
1735
|
transition: background 0.4s cubic-bezier(0.25, 1, 0.5, 1), color 0.4s cubic-bezier(0.25, 1, 0.5, 1);
|
|
1730
1736
|
}
|
|
1731
|
-
:root body {
|
|
1732
|
-
background-
|
|
1737
|
+
:root:not(.dark) body {
|
|
1738
|
+
background-color: #eef2fb;
|
|
1739
|
+
background-image: radial-gradient(circle at 14% 18%, rgba(59, 130, 246, 0.18), transparent 32%), radial-gradient(circle at 85% 74%, rgba(6, 182, 212, 0.14), transparent 34%), radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.08), transparent 50%);
|
|
1733
1740
|
}
|
|
1734
1741
|
.dark body {
|
|
1735
1742
|
background-image: radial-gradient(circle at 14% 18%, rgba(123, 181, 255, 0.16), transparent 30%), radial-gradient(circle at 85% 74%, rgba(143, 240, 232, 0.12), transparent 32%), linear-gradient(160deg, #0b0f19 0%, #071026 52%, #050a18 100%);
|
|
@@ -1745,6 +1752,9 @@ body {
|
|
|
1745
1752
|
animation: drift 18s ease-in-out infinite alternate;
|
|
1746
1753
|
transition: opacity 0.6s ease;
|
|
1747
1754
|
}
|
|
1755
|
+
:root:not(.dark) .ambient-orb {
|
|
1756
|
+
opacity: 0.22;
|
|
1757
|
+
}
|
|
1748
1758
|
.dark .ambient-orb {
|
|
1749
1759
|
opacity: 0.48;
|
|
1750
1760
|
}
|
package/dist/index.d.mts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ClassValue } from 'clsx';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import { ComponentPropsWithRef, ComponentPropsWithoutRef
|
|
4
|
+
import { ReactNode, ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
|
|
5
5
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
6
6
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
7
7
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
@@ -23,6 +23,28 @@ import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
|
23
23
|
*/
|
|
24
24
|
declare function cn(...inputs: ClassValue[]): string;
|
|
25
25
|
|
|
26
|
+
type KooriTheme = "light" | "dark" | "system";
|
|
27
|
+
type KooriColorScheme = "default" | "slate" | "zinc" | "neutral" | "violet";
|
|
28
|
+
interface KooriThemeContextValue {
|
|
29
|
+
/** Current theme setting (may be "system") */
|
|
30
|
+
theme: KooriTheme;
|
|
31
|
+
/** Resolved to "light" | "dark" after system preference lookup */
|
|
32
|
+
resolvedTheme: "light" | "dark";
|
|
33
|
+
/** Active color preset */
|
|
34
|
+
colorScheme: KooriColorScheme;
|
|
35
|
+
setTheme: (theme: KooriTheme) => void;
|
|
36
|
+
setColorScheme: (scheme: KooriColorScheme) => void;
|
|
37
|
+
}
|
|
38
|
+
declare function useKooriTheme(): KooriThemeContextValue;
|
|
39
|
+
interface KooriProviderProps {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
/** Initial theme. Reads from localStorage first, then falls back to this. Default: "system" */
|
|
42
|
+
defaultTheme?: KooriTheme;
|
|
43
|
+
/** Initial color scheme. Reads from localStorage first. Default: "default" */
|
|
44
|
+
defaultColorScheme?: KooriColorScheme;
|
|
45
|
+
}
|
|
46
|
+
declare function KooriProvider({ children, defaultTheme, defaultColorScheme, }: KooriProviderProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
|
|
26
48
|
declare function GlassChartTooltip({ active, payload, label, valuePrefix, valueSuffix, }: any): react_jsx_runtime.JSX.Element | null;
|
|
27
49
|
declare function GlassAreaChart({ data, className, height, categories, index, }: {
|
|
28
50
|
data: any[];
|
|
@@ -325,4 +347,4 @@ declare const GlassToastClose: react.ForwardRefExoticComponent<Omit<ToastPrimiti
|
|
|
325
347
|
type GlassToasterProps = ComponentPropsWithRef<typeof ToastPrimitive.Viewport>;
|
|
326
348
|
declare const GlassToaster: react.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastViewportProps & react.RefAttributes<HTMLOListElement>, "ref"> & react.RefAttributes<HTMLOListElement>>;
|
|
327
349
|
|
|
328
|
-
export { GlassAlert, type GlassAlertProps, type GlassAlertVariant, GlassAreaChart, GlassAvatar, GlassAvatarFallback, type GlassAvatarFallbackProps, GlassAvatarImage, type GlassAvatarImageProps, type GlassAvatarProps, GlassBadge, type GlassBadgeProps, type GlassBadgeVariant, GlassBarChart, GlassBlockquote, type GlassBlockquoteProps, GlassBreadcrumb, GlassBreadcrumbItem, type GlassBreadcrumbItemProps, type GlassBreadcrumbProps, GlassBreadcrumbSeparator, type GlassBreadcrumbSeparatorProps, GlassButton, type GlassButtonProps, type GlassButtonSize, type GlassButtonVariant, GlassCard, GlassCardBody, type GlassCardBodyProps, GlassCardFooter, type GlassCardFooterProps, GlassCardHeader, type GlassCardHeaderProps, type GlassCardProps, GlassChartTooltip, GlassCheckbox, type GlassCheckboxProps, GlassCode, type GlassCodeProps, GlassDialog, GlassDialogClose, type GlassDialogCloseProps, GlassDialogContent, type GlassDialogContentProps, GlassDialogDescription, type GlassDialogDescriptionProps, type GlassDialogProps, GlassDialogTitle, type GlassDialogTitleProps, GlassDialogTrigger, type GlassDialogTriggerProps, GlassDropdownMenu, GlassDropdownMenuContent, type GlassDropdownMenuContentProps, GlassDropdownMenuItem, type GlassDropdownMenuItemProps, GlassDropdownMenuLabel, type GlassDropdownMenuLabelProps, type GlassDropdownMenuProps, GlassDropdownMenuSeparator, type GlassDropdownMenuSeparatorProps, GlassDropdownMenuTrigger, type GlassDropdownMenuTriggerProps, GlassH1, type GlassH1Props, GlassH2, type GlassH2Props, GlassH3, type GlassH3Props, GlassH4, type GlassH4Props, GlassInput, type GlassInputProps, GlassLink, type GlassLinkProps, GlassPanel, type GlassPanelProps, GlassPopover, GlassPopoverClose, type GlassPopoverCloseProps, GlassPopoverContent, type GlassPopoverContentProps, type GlassPopoverProps, GlassPopoverTrigger, type GlassPopoverTriggerProps, GlassProgress, type GlassProgressProps, type GlassProgressVariant, GlassRadioGroup, type GlassRadioGroupProps, GlassRadioItem, type GlassRadioItemProps, GlassSelect, GlassSelectContent, type GlassSelectContentProps, GlassSelectGroup, type GlassSelectGroupProps, GlassSelectItem, type GlassSelectItemProps, GlassSelectLabel, type GlassSelectLabelProps, type GlassSelectProps, GlassSelectTrigger, type GlassSelectTriggerProps, GlassSelectValue, type GlassSelectValueProps, GlassSeparator, type GlassSeparatorProps, GlassSkeleton, type GlassSkeletonProps, GlassSlider, type GlassSliderProps, GlassStatCard, type GlassStatCardProps, type GlassStatCardVariant, GlassSwitch, type GlassSwitchProps, GlassTable, type GlassTableProps, GlassTabs, GlassTabsContent, type GlassTabsContentProps, GlassTabsList, type GlassTabsListProps, type GlassTabsProps, GlassTabsTrigger, type GlassTabsTriggerProps, GlassTbody, type GlassTbodyProps, GlassTd, type GlassTdProps, GlassText, type GlassTextProps, GlassTextarea, type GlassTextareaProps, GlassTh, type GlassThProps, GlassThead, type GlassTheadProps, GlassToast, GlassToastAction, type GlassToastActionProps, GlassToastClose, type GlassToastCloseProps, GlassToastDescription, type GlassToastDescriptionProps, type GlassToastProps, GlassToastProvider, type GlassToastProviderProps, GlassToastTitle, type GlassToastTitleProps, type GlassToastVariant, GlassToaster, type GlassToasterProps, GlassTooltip, GlassTooltipContent, type GlassTooltipContentProps, type GlassTooltipProps, GlassTooltipProvider, type GlassTooltipProviderProps, GlassTooltipTrigger, type GlassTooltipTriggerProps, GlassTr, type GlassTrProps, cn };
|
|
350
|
+
export { GlassAlert, type GlassAlertProps, type GlassAlertVariant, GlassAreaChart, GlassAvatar, GlassAvatarFallback, type GlassAvatarFallbackProps, GlassAvatarImage, type GlassAvatarImageProps, type GlassAvatarProps, GlassBadge, type GlassBadgeProps, type GlassBadgeVariant, GlassBarChart, GlassBlockquote, type GlassBlockquoteProps, GlassBreadcrumb, GlassBreadcrumbItem, type GlassBreadcrumbItemProps, type GlassBreadcrumbProps, GlassBreadcrumbSeparator, type GlassBreadcrumbSeparatorProps, GlassButton, type GlassButtonProps, type GlassButtonSize, type GlassButtonVariant, GlassCard, GlassCardBody, type GlassCardBodyProps, GlassCardFooter, type GlassCardFooterProps, GlassCardHeader, type GlassCardHeaderProps, type GlassCardProps, GlassChartTooltip, GlassCheckbox, type GlassCheckboxProps, GlassCode, type GlassCodeProps, GlassDialog, GlassDialogClose, type GlassDialogCloseProps, GlassDialogContent, type GlassDialogContentProps, GlassDialogDescription, type GlassDialogDescriptionProps, type GlassDialogProps, GlassDialogTitle, type GlassDialogTitleProps, GlassDialogTrigger, type GlassDialogTriggerProps, GlassDropdownMenu, GlassDropdownMenuContent, type GlassDropdownMenuContentProps, GlassDropdownMenuItem, type GlassDropdownMenuItemProps, GlassDropdownMenuLabel, type GlassDropdownMenuLabelProps, type GlassDropdownMenuProps, GlassDropdownMenuSeparator, type GlassDropdownMenuSeparatorProps, GlassDropdownMenuTrigger, type GlassDropdownMenuTriggerProps, GlassH1, type GlassH1Props, GlassH2, type GlassH2Props, GlassH3, type GlassH3Props, GlassH4, type GlassH4Props, GlassInput, type GlassInputProps, GlassLink, type GlassLinkProps, GlassPanel, type GlassPanelProps, GlassPopover, GlassPopoverClose, type GlassPopoverCloseProps, GlassPopoverContent, type GlassPopoverContentProps, type GlassPopoverProps, GlassPopoverTrigger, type GlassPopoverTriggerProps, GlassProgress, type GlassProgressProps, type GlassProgressVariant, GlassRadioGroup, type GlassRadioGroupProps, GlassRadioItem, type GlassRadioItemProps, GlassSelect, GlassSelectContent, type GlassSelectContentProps, GlassSelectGroup, type GlassSelectGroupProps, GlassSelectItem, type GlassSelectItemProps, GlassSelectLabel, type GlassSelectLabelProps, type GlassSelectProps, GlassSelectTrigger, type GlassSelectTriggerProps, GlassSelectValue, type GlassSelectValueProps, GlassSeparator, type GlassSeparatorProps, GlassSkeleton, type GlassSkeletonProps, GlassSlider, type GlassSliderProps, GlassStatCard, type GlassStatCardProps, type GlassStatCardVariant, GlassSwitch, type GlassSwitchProps, GlassTable, type GlassTableProps, GlassTabs, GlassTabsContent, type GlassTabsContentProps, GlassTabsList, type GlassTabsListProps, type GlassTabsProps, GlassTabsTrigger, type GlassTabsTriggerProps, GlassTbody, type GlassTbodyProps, GlassTd, type GlassTdProps, GlassText, type GlassTextProps, GlassTextarea, type GlassTextareaProps, GlassTh, type GlassThProps, GlassThead, type GlassTheadProps, GlassToast, GlassToastAction, type GlassToastActionProps, GlassToastClose, type GlassToastCloseProps, GlassToastDescription, type GlassToastDescriptionProps, type GlassToastProps, GlassToastProvider, type GlassToastProviderProps, GlassToastTitle, type GlassToastTitleProps, type GlassToastVariant, GlassToaster, type GlassToasterProps, GlassTooltip, GlassTooltipContent, type GlassTooltipContentProps, type GlassTooltipProps, GlassTooltipProvider, type GlassTooltipProviderProps, GlassTooltipTrigger, type GlassTooltipTriggerProps, GlassTr, type GlassTrProps, type KooriColorScheme, KooriProvider, type KooriProviderProps, type KooriTheme, type KooriThemeContextValue, cn, useKooriTheme };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ClassValue } from 'clsx';
|
|
2
2
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
3
3
|
import * as react from 'react';
|
|
4
|
-
import { ComponentPropsWithRef, ComponentPropsWithoutRef
|
|
4
|
+
import { ReactNode, ComponentPropsWithRef, ComponentPropsWithoutRef } from 'react';
|
|
5
5
|
import * as DialogPrimitive from '@radix-ui/react-dialog';
|
|
6
6
|
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
7
7
|
import * as AvatarPrimitive from '@radix-ui/react-avatar';
|
|
@@ -23,6 +23,28 @@ import * as ToastPrimitive from '@radix-ui/react-toast';
|
|
|
23
23
|
*/
|
|
24
24
|
declare function cn(...inputs: ClassValue[]): string;
|
|
25
25
|
|
|
26
|
+
type KooriTheme = "light" | "dark" | "system";
|
|
27
|
+
type KooriColorScheme = "default" | "slate" | "zinc" | "neutral" | "violet";
|
|
28
|
+
interface KooriThemeContextValue {
|
|
29
|
+
/** Current theme setting (may be "system") */
|
|
30
|
+
theme: KooriTheme;
|
|
31
|
+
/** Resolved to "light" | "dark" after system preference lookup */
|
|
32
|
+
resolvedTheme: "light" | "dark";
|
|
33
|
+
/** Active color preset */
|
|
34
|
+
colorScheme: KooriColorScheme;
|
|
35
|
+
setTheme: (theme: KooriTheme) => void;
|
|
36
|
+
setColorScheme: (scheme: KooriColorScheme) => void;
|
|
37
|
+
}
|
|
38
|
+
declare function useKooriTheme(): KooriThemeContextValue;
|
|
39
|
+
interface KooriProviderProps {
|
|
40
|
+
children: ReactNode;
|
|
41
|
+
/** Initial theme. Reads from localStorage first, then falls back to this. Default: "system" */
|
|
42
|
+
defaultTheme?: KooriTheme;
|
|
43
|
+
/** Initial color scheme. Reads from localStorage first. Default: "default" */
|
|
44
|
+
defaultColorScheme?: KooriColorScheme;
|
|
45
|
+
}
|
|
46
|
+
declare function KooriProvider({ children, defaultTheme, defaultColorScheme, }: KooriProviderProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
|
|
26
48
|
declare function GlassChartTooltip({ active, payload, label, valuePrefix, valueSuffix, }: any): react_jsx_runtime.JSX.Element | null;
|
|
27
49
|
declare function GlassAreaChart({ data, className, height, categories, index, }: {
|
|
28
50
|
data: any[];
|
|
@@ -325,4 +347,4 @@ declare const GlassToastClose: react.ForwardRefExoticComponent<Omit<ToastPrimiti
|
|
|
325
347
|
type GlassToasterProps = ComponentPropsWithRef<typeof ToastPrimitive.Viewport>;
|
|
326
348
|
declare const GlassToaster: react.ForwardRefExoticComponent<Omit<ToastPrimitive.ToastViewportProps & react.RefAttributes<HTMLOListElement>, "ref"> & react.RefAttributes<HTMLOListElement>>;
|
|
327
349
|
|
|
328
|
-
export { GlassAlert, type GlassAlertProps, type GlassAlertVariant, GlassAreaChart, GlassAvatar, GlassAvatarFallback, type GlassAvatarFallbackProps, GlassAvatarImage, type GlassAvatarImageProps, type GlassAvatarProps, GlassBadge, type GlassBadgeProps, type GlassBadgeVariant, GlassBarChart, GlassBlockquote, type GlassBlockquoteProps, GlassBreadcrumb, GlassBreadcrumbItem, type GlassBreadcrumbItemProps, type GlassBreadcrumbProps, GlassBreadcrumbSeparator, type GlassBreadcrumbSeparatorProps, GlassButton, type GlassButtonProps, type GlassButtonSize, type GlassButtonVariant, GlassCard, GlassCardBody, type GlassCardBodyProps, GlassCardFooter, type GlassCardFooterProps, GlassCardHeader, type GlassCardHeaderProps, type GlassCardProps, GlassChartTooltip, GlassCheckbox, type GlassCheckboxProps, GlassCode, type GlassCodeProps, GlassDialog, GlassDialogClose, type GlassDialogCloseProps, GlassDialogContent, type GlassDialogContentProps, GlassDialogDescription, type GlassDialogDescriptionProps, type GlassDialogProps, GlassDialogTitle, type GlassDialogTitleProps, GlassDialogTrigger, type GlassDialogTriggerProps, GlassDropdownMenu, GlassDropdownMenuContent, type GlassDropdownMenuContentProps, GlassDropdownMenuItem, type GlassDropdownMenuItemProps, GlassDropdownMenuLabel, type GlassDropdownMenuLabelProps, type GlassDropdownMenuProps, GlassDropdownMenuSeparator, type GlassDropdownMenuSeparatorProps, GlassDropdownMenuTrigger, type GlassDropdownMenuTriggerProps, GlassH1, type GlassH1Props, GlassH2, type GlassH2Props, GlassH3, type GlassH3Props, GlassH4, type GlassH4Props, GlassInput, type GlassInputProps, GlassLink, type GlassLinkProps, GlassPanel, type GlassPanelProps, GlassPopover, GlassPopoverClose, type GlassPopoverCloseProps, GlassPopoverContent, type GlassPopoverContentProps, type GlassPopoverProps, GlassPopoverTrigger, type GlassPopoverTriggerProps, GlassProgress, type GlassProgressProps, type GlassProgressVariant, GlassRadioGroup, type GlassRadioGroupProps, GlassRadioItem, type GlassRadioItemProps, GlassSelect, GlassSelectContent, type GlassSelectContentProps, GlassSelectGroup, type GlassSelectGroupProps, GlassSelectItem, type GlassSelectItemProps, GlassSelectLabel, type GlassSelectLabelProps, type GlassSelectProps, GlassSelectTrigger, type GlassSelectTriggerProps, GlassSelectValue, type GlassSelectValueProps, GlassSeparator, type GlassSeparatorProps, GlassSkeleton, type GlassSkeletonProps, GlassSlider, type GlassSliderProps, GlassStatCard, type GlassStatCardProps, type GlassStatCardVariant, GlassSwitch, type GlassSwitchProps, GlassTable, type GlassTableProps, GlassTabs, GlassTabsContent, type GlassTabsContentProps, GlassTabsList, type GlassTabsListProps, type GlassTabsProps, GlassTabsTrigger, type GlassTabsTriggerProps, GlassTbody, type GlassTbodyProps, GlassTd, type GlassTdProps, GlassText, type GlassTextProps, GlassTextarea, type GlassTextareaProps, GlassTh, type GlassThProps, GlassThead, type GlassTheadProps, GlassToast, GlassToastAction, type GlassToastActionProps, GlassToastClose, type GlassToastCloseProps, GlassToastDescription, type GlassToastDescriptionProps, type GlassToastProps, GlassToastProvider, type GlassToastProviderProps, GlassToastTitle, type GlassToastTitleProps, type GlassToastVariant, GlassToaster, type GlassToasterProps, GlassTooltip, GlassTooltipContent, type GlassTooltipContentProps, type GlassTooltipProps, GlassTooltipProvider, type GlassTooltipProviderProps, GlassTooltipTrigger, type GlassTooltipTriggerProps, GlassTr, type GlassTrProps, cn };
|
|
350
|
+
export { GlassAlert, type GlassAlertProps, type GlassAlertVariant, GlassAreaChart, GlassAvatar, GlassAvatarFallback, type GlassAvatarFallbackProps, GlassAvatarImage, type GlassAvatarImageProps, type GlassAvatarProps, GlassBadge, type GlassBadgeProps, type GlassBadgeVariant, GlassBarChart, GlassBlockquote, type GlassBlockquoteProps, GlassBreadcrumb, GlassBreadcrumbItem, type GlassBreadcrumbItemProps, type GlassBreadcrumbProps, GlassBreadcrumbSeparator, type GlassBreadcrumbSeparatorProps, GlassButton, type GlassButtonProps, type GlassButtonSize, type GlassButtonVariant, GlassCard, GlassCardBody, type GlassCardBodyProps, GlassCardFooter, type GlassCardFooterProps, GlassCardHeader, type GlassCardHeaderProps, type GlassCardProps, GlassChartTooltip, GlassCheckbox, type GlassCheckboxProps, GlassCode, type GlassCodeProps, GlassDialog, GlassDialogClose, type GlassDialogCloseProps, GlassDialogContent, type GlassDialogContentProps, GlassDialogDescription, type GlassDialogDescriptionProps, type GlassDialogProps, GlassDialogTitle, type GlassDialogTitleProps, GlassDialogTrigger, type GlassDialogTriggerProps, GlassDropdownMenu, GlassDropdownMenuContent, type GlassDropdownMenuContentProps, GlassDropdownMenuItem, type GlassDropdownMenuItemProps, GlassDropdownMenuLabel, type GlassDropdownMenuLabelProps, type GlassDropdownMenuProps, GlassDropdownMenuSeparator, type GlassDropdownMenuSeparatorProps, GlassDropdownMenuTrigger, type GlassDropdownMenuTriggerProps, GlassH1, type GlassH1Props, GlassH2, type GlassH2Props, GlassH3, type GlassH3Props, GlassH4, type GlassH4Props, GlassInput, type GlassInputProps, GlassLink, type GlassLinkProps, GlassPanel, type GlassPanelProps, GlassPopover, GlassPopoverClose, type GlassPopoverCloseProps, GlassPopoverContent, type GlassPopoverContentProps, type GlassPopoverProps, GlassPopoverTrigger, type GlassPopoverTriggerProps, GlassProgress, type GlassProgressProps, type GlassProgressVariant, GlassRadioGroup, type GlassRadioGroupProps, GlassRadioItem, type GlassRadioItemProps, GlassSelect, GlassSelectContent, type GlassSelectContentProps, GlassSelectGroup, type GlassSelectGroupProps, GlassSelectItem, type GlassSelectItemProps, GlassSelectLabel, type GlassSelectLabelProps, type GlassSelectProps, GlassSelectTrigger, type GlassSelectTriggerProps, GlassSelectValue, type GlassSelectValueProps, GlassSeparator, type GlassSeparatorProps, GlassSkeleton, type GlassSkeletonProps, GlassSlider, type GlassSliderProps, GlassStatCard, type GlassStatCardProps, type GlassStatCardVariant, GlassSwitch, type GlassSwitchProps, GlassTable, type GlassTableProps, GlassTabs, GlassTabsContent, type GlassTabsContentProps, GlassTabsList, type GlassTabsListProps, type GlassTabsProps, GlassTabsTrigger, type GlassTabsTriggerProps, GlassTbody, type GlassTbodyProps, GlassTd, type GlassTdProps, GlassText, type GlassTextProps, GlassTextarea, type GlassTextareaProps, GlassTh, type GlassThProps, GlassThead, type GlassTheadProps, GlassToast, GlassToastAction, type GlassToastActionProps, GlassToastClose, type GlassToastCloseProps, GlassToastDescription, type GlassToastDescriptionProps, type GlassToastProps, GlassToastProvider, type GlassToastProviderProps, GlassToastTitle, type GlassToastTitleProps, type GlassToastVariant, GlassToaster, type GlassToasterProps, GlassTooltip, GlassTooltipContent, type GlassTooltipContentProps, type GlassTooltipProps, GlassTooltipProvider, type GlassTooltipProviderProps, GlassTooltipTrigger, type GlassTooltipTriggerProps, GlassTr, type GlassTrProps, type KooriColorScheme, KooriProvider, type KooriProviderProps, type KooriTheme, type KooriThemeContextValue, cn, useKooriTheme };
|