@jameskabz/nextcraft-ui 0.6.3 → 0.6.4

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.
Files changed (44) hide show
  1. package/dist/craft/components.cjs +64 -1779
  2. package/dist/craft/components.cjs.map +1 -1
  3. package/dist/craft/components.js +31 -42
  4. package/dist/craft/components.js.map +1 -1
  5. package/dist/craft/forms.cjs +6 -1347
  6. package/dist/craft/forms.cjs.map +1 -1
  7. package/dist/craft/forms.js +3 -8
  8. package/dist/craft/forms.js.map +1 -1
  9. package/dist/craft/layout.cjs +20 -374
  10. package/dist/craft/layout.cjs.map +1 -1
  11. package/dist/craft/layout.js +10 -14
  12. package/dist/craft/layout.js.map +1 -1
  13. package/dist/craft/table.cjs +8 -632
  14. package/dist/craft/table.cjs.map +1 -1
  15. package/dist/craft/table.js +4 -8
  16. package/dist/craft/table.js.map +1 -1
  17. package/dist/craft/theme.cjs +5 -137
  18. package/dist/craft/theme.cjs.map +1 -1
  19. package/dist/craft/theme.js +2 -6
  20. package/dist/craft/theme.js.map +1 -1
  21. package/dist/index.cjs +103 -3426
  22. package/dist/index.cjs.map +1 -1
  23. package/dist/index.js +50 -70
  24. package/dist/index.js.map +1 -1
  25. package/dist/styles.css +0 -31
  26. package/package.json +6 -1
  27. package/dist/chunk-6F7FN2ZF.js +0 -671
  28. package/dist/chunk-6F7FN2ZF.js.map +0 -1
  29. package/dist/chunk-7Q4Z47HT.js +0 -657
  30. package/dist/chunk-7Q4Z47HT.js.map +0 -1
  31. package/dist/chunk-7SKDTIEK.js +0 -49
  32. package/dist/chunk-7SKDTIEK.js.map +0 -1
  33. package/dist/chunk-FEFH5O5K.js +0 -49
  34. package/dist/chunk-FEFH5O5K.js.map +0 -1
  35. package/dist/chunk-M2EKVXB6.js +0 -127
  36. package/dist/chunk-M2EKVXB6.js.map +0 -1
  37. package/dist/chunk-SBLIF6UU.js +0 -1029
  38. package/dist/chunk-SBLIF6UU.js.map +0 -1
  39. package/dist/chunk-VQ6T3HIX.js +0 -9
  40. package/dist/chunk-VQ6T3HIX.js.map +0 -1
  41. package/dist/chunk-YVZL4GET.js +0 -328
  42. package/dist/chunk-YVZL4GET.js.map +0 -1
  43. package/dist/chunk-ZRV4Y374.js +0 -582
  44. package/dist/chunk-ZRV4Y374.js.map +0 -1
@@ -1,1029 +0,0 @@
1
- import {
2
- CraftButton,
3
- CraftModal,
4
- CraftSubmitButton
5
- } from "./chunk-6F7FN2ZF.js";
6
- import {
7
- CraftInput
8
- } from "./chunk-7SKDTIEK.js";
9
- import {
10
- cn
11
- } from "./chunk-VQ6T3HIX.js";
12
-
13
- // src/components/glass-card.tsx
14
- import { jsx } from "react/jsx-runtime";
15
- var intensityClasses = {
16
- subtle: "backdrop-blur-md bg-opacity-50",
17
- medium: "backdrop-blur-xl bg-opacity-70",
18
- strong: "backdrop-blur-2xl bg-opacity-90"
19
- };
20
- function GlassCard({
21
- className,
22
- tone,
23
- intensity = "medium",
24
- bordered = true,
25
- children,
26
- ...props
27
- }) {
28
- return /* @__PURE__ */ jsx(
29
- "div",
30
- {
31
- className: cn(
32
- "relative overflow-hidden rounded-3xl p-6 text-[rgb(var(--nc-fg))]",
33
- "shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
34
- "transition-all duration-300",
35
- "hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]",
36
- intensityClasses[intensity],
37
- "bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.15)] via-[rgb(var(--nc-accent-2)/0.10)] to-[rgb(var(--nc-accent-3)/0.15)]",
38
- "border-[rgb(var(--nc-accent-1)/0.3)]",
39
- bordered ? "border-2" : "border-0",
40
- "before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
41
- className
42
- ),
43
- "data-nc-theme": tone,
44
- ...props,
45
- children: /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
46
- }
47
- );
48
- }
49
-
50
- // src/components/craft-badge.tsx
51
- import { jsx as jsx2 } from "react/jsx-runtime";
52
- var variantClasses = {
53
- solid: "bg-[color:rgb(var(--nc-accent-1))] text-white shadow-[0_10px_20px_rgb(var(--nc-accent-1)/0.35)]",
54
- soft: "bg-[color:rgb(var(--nc-accent-1)/0.2)] text-[rgb(var(--nc-fg))]",
55
- outline: "border border-[color:rgb(var(--nc-accent-1)/0.6)] text-[rgb(var(--nc-fg))]"
56
- };
57
- function CraftBadge({
58
- className,
59
- variant = "soft",
60
- tone,
61
- ...props
62
- }) {
63
- return /* @__PURE__ */ jsx2(
64
- "span",
65
- {
66
- className: cn(
67
- "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
68
- variantClasses[variant],
69
- className
70
- ),
71
- "data-nc-theme": tone,
72
- ...props
73
- }
74
- );
75
- }
76
-
77
- // src/components/craft-alert.tsx
78
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
79
- var variantClasses2 = {
80
- info: "border-[rgb(var(--nc-accent-1)/0.45)] bg-[rgb(var(--nc-accent-1)/0.12)]",
81
- success: "border-[rgb(var(--nc-accent-2)/0.45)] bg-[rgb(var(--nc-accent-2)/0.12)]",
82
- warning: "border-[rgb(var(--nc-accent-3)/0.45)] bg-[rgb(var(--nc-accent-3)/0.12)]",
83
- error: "border-[rgb(var(--nc-accent-3)/0.65)] bg-[rgb(var(--nc-accent-3)/0.18)]"
84
- };
85
- function CraftAlert({
86
- title,
87
- description,
88
- variant = "info",
89
- icon,
90
- actions,
91
- tone,
92
- className,
93
- ...props
94
- }) {
95
- return /* @__PURE__ */ jsxs(
96
- "div",
97
- {
98
- className: cn(
99
- "rounded-2xl border p-4 text-[rgb(var(--nc-fg))] backdrop-blur-xl",
100
- variantClasses2[variant],
101
- className
102
- ),
103
- "data-nc-theme": tone,
104
- ...props,
105
- children: [
106
- /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
107
- icon && /* @__PURE__ */ jsx3("div", { className: "mt-1 text-[rgb(var(--nc-fg))]", children: icon }),
108
- /* @__PURE__ */ jsxs("div", { className: "space-y-1", children: [
109
- title && /* @__PURE__ */ jsx3("p", { className: "text-sm font-semibold", children: title }),
110
- description && /* @__PURE__ */ jsx3("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description })
111
- ] })
112
- ] }),
113
- actions && /* @__PURE__ */ jsx3("div", { className: "mt-3 flex flex-wrap gap-2", children: actions })
114
- ]
115
- }
116
- );
117
- }
118
-
119
- // src/components/craft-error-state.tsx
120
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
121
- function CraftErrorState({
122
- title = "Something went wrong",
123
- description = "Try again or check your connection.",
124
- actionLabel = "Retry",
125
- onAction,
126
- action,
127
- tone,
128
- className,
129
- ...props
130
- }) {
131
- return /* @__PURE__ */ jsxs2(
132
- "div",
133
- {
134
- className: cn(
135
- "rounded-3xl border border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)] p-6 text-[rgb(var(--nc-fg))] shadow-[0_12px_30px_rgba(0,0,0,0.25)] backdrop-blur-xl",
136
- className
137
- ),
138
- "data-nc-theme": tone,
139
- ...props,
140
- children: [
141
- /* @__PURE__ */ jsxs2("div", { className: "space-y-2", children: [
142
- /* @__PURE__ */ jsx4("h3", { className: "text-lg font-semibold", children: title }),
143
- /* @__PURE__ */ jsx4("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description })
144
- ] }),
145
- /* @__PURE__ */ jsx4("div", { className: "mt-4", children: action != null ? action : onAction && /* @__PURE__ */ jsx4(CraftButton, { size: "sm", onClick: onAction, children: actionLabel }) })
146
- ]
147
- }
148
- );
149
- }
150
-
151
- // src/components/craft-loading-state.tsx
152
- import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
153
- var sizeClasses = {
154
- sm: "h-4 w-4 border-2",
155
- md: "h-6 w-6 border-2",
156
- lg: "h-8 w-8 border-[3px]"
157
- };
158
- function CraftLoadingState({
159
- label = "Loading...",
160
- size = "md",
161
- tone,
162
- className,
163
- ...props
164
- }) {
165
- return /* @__PURE__ */ jsxs3(
166
- "div",
167
- {
168
- className: cn("flex items-center gap-3 text-[rgb(var(--nc-fg))]", className),
169
- "data-nc-theme": tone,
170
- ...props,
171
- children: [
172
- /* @__PURE__ */ jsx5(
173
- "span",
174
- {
175
- className: cn(
176
- "inline-block animate-spin rounded-full border-[rgb(var(--nc-accent-1)/0.25)] border-t-[rgb(var(--nc-accent-1))]",
177
- sizeClasses[size]
178
- ),
179
- "aria-hidden": "true"
180
- }
181
- ),
182
- label && /* @__PURE__ */ jsx5("span", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: label })
183
- ]
184
- }
185
- );
186
- }
187
-
188
- // src/components/craft-card.tsx
189
- import { jsx as jsx6 } from "react/jsx-runtime";
190
- var intensityClasses2 = {
191
- subtle: "backdrop-blur-md bg-opacity-50",
192
- medium: "backdrop-blur-xl bg-opacity-70",
193
- strong: "backdrop-blur-2xl bg-opacity-90"
194
- };
195
- function CraftCard({
196
- className,
197
- tone,
198
- elevated = true,
199
- intensity = "medium",
200
- bordered = true,
201
- children,
202
- ...props
203
- }) {
204
- return /* @__PURE__ */ jsx6(
205
- "div",
206
- {
207
- className: cn(
208
- "relative overflow-hidden rounded-3xl p-6 text-[rgb(var(--nc-fg))]",
209
- intensityClasses2[intensity],
210
- "bg-linear-to-br from-[rgb(var(--nc-accent-1)/0.15)] via-[rgb(var(--nc-accent-2)/0.10)] to-[rgb(var(--nc-accent-3)/0.15)]",
211
- bordered ? "border-2 border-[rgb(var(--nc-accent-1)/0.3)]" : "border-0",
212
- elevated ? "shadow-[0_8px_32px_rgba(0,0,0,0.3)] hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]" : "shadow-none",
213
- "before:absolute before:inset-0 before:bg-linear-to-br before:from-white/10 before:to-transparent before:opacity-0 hover:before:opacity-100 before:transition-opacity before:duration-300",
214
- "transition-all duration-300",
215
- className
216
- ),
217
- "data-nc-theme": tone,
218
- ...props,
219
- children: /* @__PURE__ */ jsx6("div", { className: "relative z-10", children })
220
- }
221
- );
222
- }
223
-
224
- // src/components/craft-drawer.tsx
225
- import * as React from "react";
226
- import { createPortal } from "react-dom";
227
- import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
228
- function CraftDrawer({
229
- open,
230
- defaultOpen = false,
231
- onOpenChange,
232
- tone,
233
- side = "left",
234
- title,
235
- children,
236
- trigger,
237
- footer,
238
- className
239
- }) {
240
- const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
241
- const isControlled = typeof open === "boolean";
242
- const isOpen = isControlled ? open : uncontrolledOpen;
243
- const setOpen = React.useCallback(
244
- (next) => {
245
- if (!isControlled) setUncontrolledOpen(next);
246
- onOpenChange == null ? void 0 : onOpenChange(next);
247
- },
248
- [isControlled, onOpenChange]
249
- );
250
- React.useEffect(() => {
251
- if (!isOpen) return;
252
- const handleKey = (event) => {
253
- if (event.key === "Escape") setOpen(false);
254
- };
255
- document.addEventListener("keydown", handleKey);
256
- return () => document.removeEventListener("keydown", handleKey);
257
- }, [isOpen, setOpen]);
258
- const content = isOpen ? /* @__PURE__ */ jsxs4("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
259
- /* @__PURE__ */ jsx7(
260
- "div",
261
- {
262
- className: "absolute inset-0 backdrop-blur-sm",
263
- onClick: () => setOpen(false)
264
- }
265
- ),
266
- /* @__PURE__ */ jsxs4(
267
- "div",
268
- {
269
- className: cn(
270
- "absolute top-0 h-full w-full max-w-md border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
271
- side === "right" ? "right-0" : "left-0",
272
- className
273
- ),
274
- "data-nc-theme": tone,
275
- children: [
276
- /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6", children: [
277
- title && /* @__PURE__ */ jsx7("h3", { className: "text-xl font-semibold", children: title }),
278
- /* @__PURE__ */ jsx7(
279
- "button",
280
- {
281
- className: "rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] p-2 text-[rgb(var(--nc-fg-soft))] transition hover:text-[rgb(var(--nc-fg))]",
282
- onClick: () => setOpen(false),
283
- "aria-label": "Close",
284
- children: /* @__PURE__ */ jsx7("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ jsx7("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" }) })
285
- }
286
- )
287
- ] }),
288
- /* @__PURE__ */ jsx7("div", { className: "p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]", children }),
289
- footer && /* @__PURE__ */ jsx7("div", { className: "border-t border-[rgb(var(--nc-border)/0.3)] p-6", children: footer })
290
- ]
291
- }
292
- )
293
- ] }) : null;
294
- return /* @__PURE__ */ jsxs4(Fragment, { children: [
295
- trigger && /* @__PURE__ */ jsx7(
296
- "span",
297
- {
298
- onClick: () => setOpen(true),
299
- onKeyDown: (event) => {
300
- if (event.key === "Enter" || event.key === " ") setOpen(true);
301
- },
302
- role: "button",
303
- tabIndex: 0,
304
- className: "inline-flex",
305
- children: trigger
306
- }
307
- ),
308
- typeof document !== "undefined" && content ? createPortal(content, document.body) : content
309
- ] });
310
- }
311
-
312
- // src/components/craft-tabs.tsx
313
- import * as React2 from "react";
314
- import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
315
- function CraftTabs({
316
- value,
317
- defaultValue,
318
- onValueChange,
319
- tone,
320
- tabs,
321
- panels,
322
- className
323
- }) {
324
- var _a, _b;
325
- const fallback = (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "";
326
- const [uncontrolledValue, setUncontrolledValue] = React2.useState(
327
- defaultValue != null ? defaultValue : fallback
328
- );
329
- const isControlled = value !== void 0;
330
- const activeValue = isControlled ? value : uncontrolledValue;
331
- const setValue = React2.useCallback(
332
- (next) => {
333
- if (!isControlled) setUncontrolledValue(next);
334
- onValueChange == null ? void 0 : onValueChange(next);
335
- },
336
- [isControlled, onValueChange]
337
- );
338
- const onKeyDown = (event) => {
339
- if (!tabs.length) return;
340
- const currentIndex = tabs.findIndex((tab) => tab.value === activeValue);
341
- if (event.key === "ArrowRight") {
342
- event.preventDefault();
343
- const next = tabs[(currentIndex + 1) % tabs.length];
344
- setValue(next.value);
345
- }
346
- if (event.key === "ArrowLeft") {
347
- event.preventDefault();
348
- const next = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
349
- setValue(next.value);
350
- }
351
- };
352
- return /* @__PURE__ */ jsxs5("div", { className: cn("space-y-4", className), "data-nc-theme": tone, children: [
353
- /* @__PURE__ */ jsx8(
354
- "div",
355
- {
356
- className: "inline-flex flex-wrap items-center gap-2 rounded-full border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-2",
357
- role: "tablist",
358
- onKeyDown,
359
- children: tabs.map((tab) => /* @__PURE__ */ jsx8(
360
- "button",
361
- {
362
- role: "tab",
363
- "aria-selected": activeValue === tab.value,
364
- onClick: () => setValue(tab.value),
365
- className: cn(
366
- "rounded-full px-4 py-2 text-sm font-semibold transition-all",
367
- activeValue === tab.value ? "bg-[rgb(var(--nc-accent-1)/0.65)] text-white shadow-[0_7px_5px_rgb(var(--nc-accent-1)/0.35)]" : "text-[rgb(var(--nc-fg-muted))] hover:text-[rgb(var(--nc-fg))]"
368
- ),
369
- children: tab.label
370
- },
371
- tab.value
372
- ))
373
- }
374
- ),
375
- /* @__PURE__ */ jsx8("div", { className: "rounded-2xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-4 text-[rgb(var(--nc-fg))]", children: panels[activeValue] })
376
- ] });
377
- }
378
-
379
- // src/components/craft-tooltip.tsx
380
- import * as React3 from "react";
381
- import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
382
- function CraftTooltip({ content, tone, children, side = "top" }) {
383
- const [open, setOpen] = React3.useState(false);
384
- return /* @__PURE__ */ jsxs6(
385
- "span",
386
- {
387
- className: "relative inline-flex",
388
- onMouseEnter: () => setOpen(true),
389
- onMouseLeave: () => setOpen(false),
390
- onFocus: () => setOpen(true),
391
- onBlur: () => setOpen(false),
392
- children: [
393
- children,
394
- /* @__PURE__ */ jsx9(
395
- "span",
396
- {
397
- className: cn(
398
- "pointer-events-none absolute z-20 whitespace-nowrap rounded-lg border border-white/10 bg-black/80 px-3 py-2 text-xs text-white shadow-lg transition-all",
399
- "backdrop-blur-xl",
400
- open ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1",
401
- side === "top" && "bottom-full left-1/2 -translate-x-1/2 -translate-y-2",
402
- side === "bottom" && "top-full left-1/2 -translate-x-1/2 translate-y-2",
403
- side === "left" && "right-full top-1/2 -translate-y-1/2 -translate-x-2",
404
- side === "right" && "left-full top-1/2 -translate-y-1/2 translate-x-2"
405
- ),
406
- "data-nc-theme": tone,
407
- role: "tooltip",
408
- children: content
409
- }
410
- )
411
- ]
412
- }
413
- );
414
- }
415
-
416
- // src/components/craft-toast.tsx
417
- import * as React4 from "react";
418
- import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
419
- var variantClasses3 = {
420
- info: "border-[color:rgb(var(--nc-accent-1)/0.4)]",
421
- success: "border-emerald-400/40",
422
- warning: "border-amber-400/40",
423
- error: "border-rose-400/40"
424
- };
425
- function useCraftToast() {
426
- const [toasts, setToasts] = React4.useState([]);
427
- const push = React4.useCallback((toast) => {
428
- const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
429
- setToasts((prev) => [...prev, { ...toast, id }]);
430
- return id;
431
- }, []);
432
- const remove = React4.useCallback((id) => {
433
- setToasts((prev) => prev.filter((toast) => toast.id !== id));
434
- }, []);
435
- return { toasts, push, remove };
436
- }
437
- function CraftToastHost({ toasts, onDismiss, tone }) {
438
- return /* @__PURE__ */ jsx10(
439
- "div",
440
- {
441
- className: "fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3",
442
- "data-nc-theme": tone,
443
- children: toasts.map((toast) => {
444
- var _a;
445
- return /* @__PURE__ */ jsx10(
446
- "div",
447
- {
448
- className: cn(
449
- "rounded-2xl border bg-[rgb(var(--nc-surface)/0.12)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_15px_35px_rgba(0,0,0,0.35)] backdrop-blur-xl",
450
- variantClasses3[(_a = toast.variant) != null ? _a : "info"]
451
- ),
452
- children: /* @__PURE__ */ jsxs7("div", { className: "flex items-start justify-between gap-4", children: [
453
- /* @__PURE__ */ jsxs7("div", { children: [
454
- /* @__PURE__ */ jsx10("p", { className: "text-sm font-semibold", children: toast.title }),
455
- toast.description && /* @__PURE__ */ jsx10("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: toast.description })
456
- ] }),
457
- /* @__PURE__ */ jsx10(
458
- "button",
459
- {
460
- className: "text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]",
461
- onClick: () => onDismiss(toast.id),
462
- children: "\u2715"
463
- }
464
- )
465
- ] })
466
- },
467
- toast.id
468
- );
469
- })
470
- }
471
- );
472
- }
473
-
474
- // src/components/craft-skeleton.tsx
475
- import { jsx as jsx11 } from "react/jsx-runtime";
476
- function CraftSkeleton({ className, tone, ...props }) {
477
- return /* @__PURE__ */ jsx11(
478
- "div",
479
- {
480
- className: cn(
481
- "relative overflow-hidden rounded-2xl bg-[rgb(var(--nc-surface)/0.12)]",
482
- "after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-white/20 after:to-transparent",
483
- "after:animate-[shimmer_1.6s_infinite]",
484
- className
485
- ),
486
- "data-nc-theme": tone,
487
- ...props
488
- }
489
- );
490
- }
491
-
492
- // src/components/craft-empty-state.tsx
493
- import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
494
- function CraftEmptyState({
495
- className,
496
- tone,
497
- title,
498
- description,
499
- icon,
500
- action,
501
- ...props
502
- }) {
503
- return /* @__PURE__ */ jsxs8(
504
- "div",
505
- {
506
- className: cn(
507
- "rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.08)] p-8 text-center text-[rgb(var(--nc-fg))] backdrop-blur-xl",
508
- "shadow-[0_18px_40px_rgba(0,0,0,0.25)]",
509
- className
510
- ),
511
- "data-nc-theme": tone,
512
- ...props,
513
- children: [
514
- icon && /* @__PURE__ */ jsx12("div", { className: "mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-2xl bg-[rgb(var(--nc-accent-1)/0.2)] text-[rgb(var(--nc-accent-1))]", children: icon }),
515
- /* @__PURE__ */ jsx12("h3", { className: "text-xl font-semibold", children: title }),
516
- description && /* @__PURE__ */ jsx12("p", { className: "mt-2 text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
517
- action && /* @__PURE__ */ jsx12("div", { className: "mt-6 flex justify-center", children: action })
518
- ]
519
- }
520
- );
521
- }
522
-
523
- // src/components/craft-popover.tsx
524
- import * as React5 from "react";
525
- import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
526
- var alignClasses = {
527
- start: "left-0",
528
- center: "left-1/2 -translate-x-1/2",
529
- end: "right-0"
530
- };
531
- function CraftPopover({
532
- open,
533
- defaultOpen = false,
534
- onOpenChange,
535
- trigger,
536
- content,
537
- align = "start",
538
- sideOffset = 10,
539
- tone,
540
- className,
541
- contentClassName
542
- }) {
543
- const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(defaultOpen);
544
- const isControlled = typeof open === "boolean";
545
- const isOpen = isControlled ? open : uncontrolledOpen;
546
- const rootRef = React5.useRef(null);
547
- const setOpen = React5.useCallback(
548
- (next) => {
549
- if (!isControlled) setUncontrolledOpen(next);
550
- onOpenChange == null ? void 0 : onOpenChange(next);
551
- },
552
- [isControlled, onOpenChange]
553
- );
554
- React5.useEffect(() => {
555
- if (!isOpen) return;
556
- const handleClick = (event) => {
557
- if (!rootRef.current) return;
558
- if (!rootRef.current.contains(event.target)) setOpen(false);
559
- };
560
- const handleKey = (event) => {
561
- if (event.key === "Escape") setOpen(false);
562
- };
563
- document.addEventListener("mousedown", handleClick);
564
- document.addEventListener("keydown", handleKey);
565
- return () => {
566
- document.removeEventListener("mousedown", handleClick);
567
- document.removeEventListener("keydown", handleKey);
568
- };
569
- }, [isOpen, setOpen]);
570
- const triggerNode = React5.isValidElement(trigger) ? React5.cloneElement(trigger, {
571
- onClick: (event) => {
572
- const handler = trigger.props.onClick;
573
- handler == null ? void 0 : handler(event);
574
- if (!event.defaultPrevented) setOpen(!isOpen);
575
- },
576
- "aria-expanded": isOpen,
577
- "aria-haspopup": "dialog"
578
- }) : /* @__PURE__ */ jsx13(
579
- "button",
580
- {
581
- type: "button",
582
- onClick: () => setOpen(!isOpen),
583
- className: "inline-flex",
584
- "aria-expanded": isOpen,
585
- "aria-haspopup": "dialog",
586
- children: trigger
587
- }
588
- );
589
- return /* @__PURE__ */ jsxs9("div", { className: cn("relative inline-flex", className), ref: rootRef, children: [
590
- triggerNode,
591
- isOpen && /* @__PURE__ */ jsx13(
592
- "div",
593
- {
594
- className: cn(
595
- "absolute z-40 w-max min-w-48 rounded-2xl border border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)] p-3 text-[rgb(var(--nc-fg))] shadow-[0_18px_40px_rgba(0,0,0,0.35)] backdrop-blur-2xl",
596
- alignClasses[align],
597
- contentClassName
598
- ),
599
- style: { marginTop: sideOffset },
600
- role: "dialog",
601
- "data-nc-theme": tone,
602
- children: content
603
- }
604
- )
605
- ] });
606
- }
607
-
608
- // src/components/craft-dropdown-menu.tsx
609
- import * as React6 from "react";
610
- import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
611
- function CraftDropdownMenu({
612
- trigger,
613
- items = [],
614
- content,
615
- open,
616
- defaultOpen = false,
617
- onOpenChange,
618
- align = "end",
619
- tone,
620
- className,
621
- menuClassName
622
- }) {
623
- const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
624
- const isControlled = typeof open === "boolean";
625
- const isOpen = isControlled ? open : uncontrolledOpen;
626
- const setOpen = React6.useCallback(
627
- (next) => {
628
- if (!isControlled) setUncontrolledOpen(next);
629
- onOpenChange == null ? void 0 : onOpenChange(next);
630
- },
631
- [isControlled, onOpenChange]
632
- );
633
- const menuContent = content != null ? content : items.length ? /* @__PURE__ */ jsx14("div", { className: cn("space-y-1", menuClassName), role: "menu", children: items.map((item, index) => {
634
- var _a;
635
- const key = (_a = item.id) != null ? _a : `${index}-${String(item.label)}`;
636
- const itemClasses = cn(
637
- "flex w-full items-start gap-3 rounded-xl px-3 py-2 text-left text-sm transition",
638
- item.disabled ? "cursor-not-allowed text-[rgb(var(--nc-fg-soft))] opacity-60" : "text-[rgb(var(--nc-fg))] hover:bg-[rgb(var(--nc-surface)/0.12)]"
639
- );
640
- const contentNode = /* @__PURE__ */ jsxs10(Fragment2, { children: [
641
- item.icon && /* @__PURE__ */ jsx14("span", { className: "mt-0.5", children: item.icon }),
642
- /* @__PURE__ */ jsxs10("span", { className: "flex-1", children: [
643
- /* @__PURE__ */ jsx14("span", { className: "block font-medium", children: item.label }),
644
- item.description && /* @__PURE__ */ jsx14("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: item.description })
645
- ] })
646
- ] });
647
- if (item.href) {
648
- return /* @__PURE__ */ jsx14(
649
- "a",
650
- {
651
- href: item.href,
652
- className: itemClasses,
653
- role: "menuitem",
654
- onClick: () => {
655
- var _a2;
656
- if (item.disabled) return;
657
- (_a2 = item.onSelect) == null ? void 0 : _a2.call(item);
658
- setOpen(false);
659
- },
660
- children: contentNode
661
- },
662
- key
663
- );
664
- }
665
- return /* @__PURE__ */ jsx14(
666
- "button",
667
- {
668
- type: "button",
669
- className: itemClasses,
670
- role: "menuitem",
671
- onClick: () => {
672
- var _a2;
673
- if (item.disabled) return;
674
- (_a2 = item.onSelect) == null ? void 0 : _a2.call(item);
675
- setOpen(false);
676
- },
677
- children: contentNode
678
- },
679
- key
680
- );
681
- }) }) : null;
682
- return /* @__PURE__ */ jsx14(
683
- CraftPopover,
684
- {
685
- trigger,
686
- content: menuContent,
687
- open: isOpen,
688
- onOpenChange: setOpen,
689
- align,
690
- tone,
691
- className
692
- }
693
- );
694
- }
695
-
696
- // src/components/craft-command-palette.tsx
697
- import * as React7 from "react";
698
- import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
699
- function CraftCommandPalette({
700
- items,
701
- open,
702
- defaultOpen = false,
703
- onOpenChange,
704
- trigger,
705
- title = "Command Palette",
706
- placeholder = "Search commands...",
707
- emptyText = "No results found.",
708
- tone,
709
- className
710
- }) {
711
- const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(defaultOpen);
712
- const isControlled = typeof open === "boolean";
713
- const isOpen = isControlled ? open : uncontrolledOpen;
714
- const [query, setQuery] = React7.useState("");
715
- const setOpen = React7.useCallback(
716
- (next) => {
717
- if (!isControlled) setUncontrolledOpen(next);
718
- onOpenChange == null ? void 0 : onOpenChange(next);
719
- },
720
- [isControlled, onOpenChange]
721
- );
722
- const filtered = React7.useMemo(() => {
723
- const q = query.trim().toLowerCase();
724
- if (!q) return items;
725
- return items.filter((item) => {
726
- var _a, _b;
727
- const haystack = [
728
- item.label,
729
- (_a = item.description) != null ? _a : "",
730
- ...(_b = item.keywords) != null ? _b : []
731
- ].join(" ").toLowerCase();
732
- return haystack.includes(q);
733
- });
734
- }, [items, query]);
735
- React7.useEffect(() => {
736
- if (!isOpen) setQuery("");
737
- }, [isOpen]);
738
- return /* @__PURE__ */ jsx15(
739
- CraftModal,
740
- {
741
- open: isOpen,
742
- onOpenChange: setOpen,
743
- trigger,
744
- title,
745
- tone,
746
- className: cn("max-w-xl", className),
747
- children: /* @__PURE__ */ jsxs11("div", { className: "space-y-4", children: [
748
- /* @__PURE__ */ jsx15(
749
- CraftInput,
750
- {
751
- type: "search",
752
- placeholder,
753
- value: query,
754
- onChange: (event) => setQuery(event.target.value)
755
- }
756
- ),
757
- /* @__PURE__ */ jsxs11("div", { className: "space-y-2", children: [
758
- filtered.length === 0 && /* @__PURE__ */ jsx15("div", { className: "rounded-2xl border border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)] p-4 text-sm text-[rgb(var(--nc-fg-muted))]", children: emptyText }),
759
- filtered.map((item) => /* @__PURE__ */ jsxs11(
760
- "button",
761
- {
762
- type: "button",
763
- disabled: item.disabled,
764
- onClick: () => {
765
- var _a;
766
- if (item.disabled) return;
767
- (_a = item.onSelect) == null ? void 0 : _a.call(item);
768
- setOpen(false);
769
- },
770
- className: cn(
771
- "flex w-full items-start gap-3 rounded-2xl border border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)] px-4 py-3 text-left transition",
772
- item.disabled ? "cursor-not-allowed opacity-60" : "hover:bg-[rgb(var(--nc-surface)/0.16)]"
773
- ),
774
- children: [
775
- item.icon && /* @__PURE__ */ jsx15("span", { className: "mt-1", children: item.icon }),
776
- /* @__PURE__ */ jsxs11("span", { children: [
777
- /* @__PURE__ */ jsx15("span", { className: "block text-sm font-semibold", children: item.label }),
778
- item.description && /* @__PURE__ */ jsx15("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: item.description })
779
- ] })
780
- ]
781
- },
782
- item.id
783
- ))
784
- ] })
785
- ] })
786
- }
787
- );
788
- }
789
-
790
- // src/components/craft-link.tsx
791
- import Link from "next/link";
792
- import { jsx as jsx16 } from "react/jsx-runtime";
793
- var variantClasses4 = {
794
- default: "text-[rgb(var(--nc-accent-1))] hover:text-[rgb(var(--nc-accent-1))]",
795
- muted: "text-[rgb(var(--nc-fg-muted))] hover:text-[rgb(var(--nc-fg))]",
796
- button: "inline-flex items-center rounded-xl border border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.12)] px-4 py-2 text-sm font-semibold text-[rgb(var(--nc-fg))] transition hover:bg-[rgb(var(--nc-surface)/0.2)]",
797
- ghost: "inline-flex items-center rounded-xl px-4 py-2 text-sm font-semibold text-[rgb(var(--nc-fg))] transition hover:bg-[rgb(var(--nc-surface)/0.18)]"
798
- };
799
- function CraftLink({
800
- variant = "default",
801
- underline = false,
802
- tone,
803
- className,
804
- children,
805
- ...props
806
- }) {
807
- return /* @__PURE__ */ jsx16(
808
- Link,
809
- {
810
- className: cn(
811
- "transition-colors",
812
- variantClasses4[variant],
813
- underline && "underline underline-offset-4",
814
- className
815
- ),
816
- "data-nc-theme": tone,
817
- ...props,
818
- children
819
- }
820
- );
821
- }
822
-
823
- // src/components/craft-stat-card.tsx
824
- import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
825
- var trendClasses = {
826
- up: "text-emerald-300",
827
- down: "text-rose-300",
828
- neutral: "text-[rgb(var(--nc-fg-muted))]"
829
- };
830
- function CraftStatCard({
831
- label,
832
- value,
833
- delta,
834
- trend = "neutral",
835
- icon,
836
- footer,
837
- tone,
838
- className,
839
- ...props
840
- }) {
841
- return /* @__PURE__ */ jsxs12(
842
- CraftCard,
843
- {
844
- className: cn("space-y-3", className),
845
- tone,
846
- ...props,
847
- children: [
848
- /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between", children: [
849
- /* @__PURE__ */ jsx17("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: label }),
850
- icon && /* @__PURE__ */ jsx17("div", { className: "text-[rgb(var(--nc-fg-soft))]", children: icon })
851
- ] }),
852
- /* @__PURE__ */ jsx17("p", { className: "text-3xl font-semibold", children: value }),
853
- /* @__PURE__ */ jsxs12("div", { className: "flex items-center justify-between text-xs", children: [
854
- delta && /* @__PURE__ */ jsx17("span", { className: trendClasses[trend], children: delta }),
855
- footer && /* @__PURE__ */ jsx17("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: footer })
856
- ] })
857
- ]
858
- }
859
- );
860
- }
861
-
862
- // src/components/craft-confirm-dialog.tsx
863
- import * as React8 from "react";
864
- import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
865
- function CraftConfirmDialog({
866
- open,
867
- defaultOpen = false,
868
- onOpenChange,
869
- tone,
870
- title = "Confirm action",
871
- description,
872
- confirmLabel = "Confirm",
873
- cancelLabel = "Cancel",
874
- onConfirm,
875
- trigger,
876
- className,
877
- confirmVariant = "solid"
878
- }) {
879
- const [uncontrolledOpen, setUncontrolledOpen] = React8.useState(defaultOpen);
880
- const isControlled = typeof open === "boolean";
881
- const isOpen = isControlled ? open : uncontrolledOpen;
882
- const setOpen = React8.useCallback(
883
- (next) => {
884
- if (!isControlled) setUncontrolledOpen(next);
885
- onOpenChange == null ? void 0 : onOpenChange(next);
886
- },
887
- [isControlled, onOpenChange]
888
- );
889
- const [isLoading, setIsLoading] = React8.useState(false);
890
- const handleConfirm = async () => {
891
- if (!onConfirm) {
892
- setOpen(false);
893
- return;
894
- }
895
- setIsLoading(true);
896
- await onConfirm();
897
- setIsLoading(false);
898
- setOpen(false);
899
- };
900
- return /* @__PURE__ */ jsx18(
901
- CraftModal,
902
- {
903
- open: isOpen,
904
- onOpenChange: setOpen,
905
- trigger,
906
- title,
907
- description,
908
- tone,
909
- className: cn("max-w-md", className),
910
- footer: /* @__PURE__ */ jsxs13("div", { className: "flex flex-wrap items-center justify-end gap-3", children: [
911
- /* @__PURE__ */ jsx18(
912
- CraftButton,
913
- {
914
- type: "button",
915
- variant: "ghost",
916
- onClick: () => setOpen(false),
917
- children: cancelLabel
918
- }
919
- ),
920
- /* @__PURE__ */ jsx18(
921
- CraftButton,
922
- {
923
- type: "button",
924
- variant: confirmVariant,
925
- disabled: isLoading,
926
- onClick: handleConfirm,
927
- children: isLoading ? "Working..." : confirmLabel
928
- }
929
- )
930
- ] }),
931
- children: /* @__PURE__ */ jsx18("div", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description })
932
- }
933
- );
934
- }
935
-
936
- // src/components/craft-create-edit-drawer.tsx
937
- import * as React9 from "react";
938
- import { FormProvider } from "react-hook-form";
939
- import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
940
- function CraftCreateEditDrawer({
941
- mode = "create",
942
- form,
943
- onSubmit,
944
- open,
945
- defaultOpen = false,
946
- onOpenChange,
947
- trigger,
948
- title,
949
- description,
950
- submitLabel,
951
- cancelLabel = "Cancel",
952
- tone,
953
- className,
954
- children,
955
- footer,
956
- disableSubmitWhenInvalid = true,
957
- closeOnSubmit = true,
958
- side = "right"
959
- }) {
960
- const [uncontrolledOpen, setUncontrolledOpen] = React9.useState(defaultOpen);
961
- const isControlled = typeof open === "boolean";
962
- const isOpen = isControlled ? open : uncontrolledOpen;
963
- const setOpen = React9.useCallback(
964
- (next) => {
965
- if (!isControlled) setUncontrolledOpen(next);
966
- onOpenChange == null ? void 0 : onOpenChange(next);
967
- },
968
- [isControlled, onOpenChange]
969
- );
970
- const formId = React9.useId();
971
- const handleSubmit = form.handleSubmit(async (values) => {
972
- await onSubmit(values);
973
- if (closeOnSubmit) setOpen(false);
974
- });
975
- const resolvedTitle = title != null ? title : mode === "create" ? "Create item" : "Edit item";
976
- const resolvedSubmitLabel = submitLabel != null ? submitLabel : mode === "create" ? "Create" : "Save changes";
977
- const footerContent = footer != null ? footer : /* @__PURE__ */ jsxs14("div", { className: "flex flex-wrap items-center justify-end gap-3", children: [
978
- /* @__PURE__ */ jsx19(CraftButton, { type: "button", variant: "ghost", onClick: () => setOpen(false), children: cancelLabel }),
979
- /* @__PURE__ */ jsx19(
980
- CraftSubmitButton,
981
- {
982
- form: formId,
983
- disableWhenInvalid: disableSubmitWhenInvalid,
984
- children: resolvedSubmitLabel
985
- }
986
- )
987
- ] });
988
- return /* @__PURE__ */ jsx19(FormProvider, { ...form, children: /* @__PURE__ */ jsx19(
989
- CraftDrawer,
990
- {
991
- open: isOpen,
992
- onOpenChange: setOpen,
993
- trigger,
994
- title: resolvedTitle,
995
- tone,
996
- side,
997
- className: cn("flex flex-col", className),
998
- footer: footerContent,
999
- children: /* @__PURE__ */ jsxs14("form", { id: formId, onSubmit: handleSubmit, className: "space-y-5", children: [
1000
- description && /* @__PURE__ */ jsx19("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
1001
- children
1002
- ] })
1003
- }
1004
- ) });
1005
- }
1006
-
1007
- export {
1008
- GlassCard,
1009
- CraftBadge,
1010
- CraftAlert,
1011
- CraftErrorState,
1012
- CraftLoadingState,
1013
- CraftCard,
1014
- CraftDrawer,
1015
- CraftTabs,
1016
- CraftTooltip,
1017
- useCraftToast,
1018
- CraftToastHost,
1019
- CraftSkeleton,
1020
- CraftEmptyState,
1021
- CraftPopover,
1022
- CraftDropdownMenu,
1023
- CraftCommandPalette,
1024
- CraftLink,
1025
- CraftStatCard,
1026
- CraftConfirmDialog,
1027
- CraftCreateEditDrawer
1028
- };
1029
- //# sourceMappingURL=chunk-SBLIF6UU.js.map