@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,9 +1,7 @@
1
1
  "use strict";
2
- var __create = Object.create;
3
2
  var __defProp = Object.defineProperty;
4
3
  var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
4
  var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __getProtoOf = Object.getPrototypeOf;
7
5
  var __hasOwnProp = Object.prototype.hasOwnProperty;
8
6
  var __export = (target, all) => {
9
7
  for (var name in all)
@@ -17,1788 +15,75 @@ var __copyProps = (to, from, except, desc) => {
17
15
  }
18
16
  return to;
19
17
  };
20
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
21
- // If the importer is in node compatibility mode or this is not an ESM
22
- // file that has been converted to a CommonJS file using a Babel-
23
- // compatible transform (i.e. "__esModule" has not been set), then set
24
- // "default" to the CommonJS "module.exports" for node compatibility.
25
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
26
- mod
27
- ));
28
18
  var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
-
30
- // src/craft/components.ts
31
19
  var components_exports = {};
32
20
  __export(components_exports, {
33
- CraftAlert: () => CraftAlert,
34
- CraftBadge: () => CraftBadge,
35
- CraftButton: () => CraftButton,
36
- CraftCard: () => CraftCard,
37
- CraftCheckbox: () => CraftCheckbox,
38
- CraftCommandPalette: () => CraftCommandPalette,
39
- CraftConfirmDialog: () => CraftConfirmDialog,
40
- CraftCreateEditDrawer: () => CraftCreateEditDrawer,
41
- CraftCurrencyInput: () => CraftCurrencyInput,
42
- CraftDatePicker: () => CraftDatePicker,
43
- CraftDrawer: () => CraftDrawer,
44
- CraftDropdownMenu: () => CraftDropdownMenu,
45
- CraftEmptyState: () => CraftEmptyState,
46
- CraftErrorState: () => CraftErrorState,
47
- CraftIcon: () => CraftIcon,
48
- CraftIconProvider: () => CraftIconProvider,
49
- CraftInput: () => CraftInput,
50
- CraftLink: () => CraftLink,
51
- CraftLoadingState: () => CraftLoadingState,
52
- CraftModal: () => CraftModal,
53
- CraftNumberInput: () => CraftNumberInput,
54
- CraftPopover: () => CraftPopover,
55
- CraftSelect: () => CraftSelect,
56
- CraftSkeleton: () => CraftSkeleton,
57
- CraftStatCard: () => CraftStatCard,
58
- CraftSubmitButton: () => CraftSubmitButton,
59
- CraftSwitch: () => CraftSwitch,
60
- CraftTabs: () => CraftTabs,
61
- CraftTextarea: () => CraftTextarea,
62
- CraftToastHost: () => CraftToastHost,
63
- CraftTooltip: () => CraftTooltip,
64
- GlassCard: () => GlassCard,
65
- useCraftToast: () => useCraftToast
21
+ CraftAlert: () => import_craft_alert.CraftAlert,
22
+ CraftBadge: () => import_craft_badge.CraftBadge,
23
+ CraftButton: () => import_craft_button.CraftButton,
24
+ CraftCard: () => import_craft_card.CraftCard,
25
+ CraftCheckbox: () => import_craft_checkbox.CraftCheckbox,
26
+ CraftCommandPalette: () => import_craft_command_palette.CraftCommandPalette,
27
+ CraftConfirmDialog: () => import_craft_confirm_dialog.CraftConfirmDialog,
28
+ CraftCreateEditDrawer: () => import_craft_create_edit_drawer.CraftCreateEditDrawer,
29
+ CraftCurrencyInput: () => import_craft_currency_input.CraftCurrencyInput,
30
+ CraftDatePicker: () => import_craft_date_picker.CraftDatePicker,
31
+ CraftDrawer: () => import_craft_drawer.CraftDrawer,
32
+ CraftDropdownMenu: () => import_craft_dropdown_menu.CraftDropdownMenu,
33
+ CraftEmptyState: () => import_craft_empty_state.CraftEmptyState,
34
+ CraftErrorState: () => import_craft_error_state.CraftErrorState,
35
+ CraftIcon: () => import_craft_icon.CraftIcon,
36
+ CraftIconProvider: () => import_craft_icon.CraftIconProvider,
37
+ CraftInput: () => import_craft_input.CraftInput,
38
+ CraftLink: () => import_craft_link.CraftLink,
39
+ CraftLoadingState: () => import_craft_loading_state.CraftLoadingState,
40
+ CraftModal: () => import_craft_modal.CraftModal,
41
+ CraftNumberInput: () => import_craft_number_input.CraftNumberInput,
42
+ CraftPopover: () => import_craft_popover.CraftPopover,
43
+ CraftSelect: () => import_craft_select.CraftSelect,
44
+ CraftSkeleton: () => import_craft_skeleton.CraftSkeleton,
45
+ CraftStatCard: () => import_craft_stat_card.CraftStatCard,
46
+ CraftSubmitButton: () => import_craft_submit_button.CraftSubmitButton,
47
+ CraftSwitch: () => import_craft_switch.CraftSwitch,
48
+ CraftTabs: () => import_craft_tabs.CraftTabs,
49
+ CraftTextarea: () => import_craft_textarea.CraftTextarea,
50
+ CraftToastHost: () => import_craft_toast.CraftToastHost,
51
+ CraftTooltip: () => import_craft_tooltip.CraftTooltip,
52
+ GlassCard: () => import_glass_card.GlassCard,
53
+ useCraftToast: () => import_craft_toast.useCraftToast
66
54
  });
67
55
  module.exports = __toCommonJS(components_exports);
68
-
69
- // src/utils/cn.ts
70
- function cn(...values) {
71
- return values.filter(Boolean).join(" ");
72
- }
73
-
74
- // src/components/craft-button.tsx
75
- var import_jsx_runtime = require("react/jsx-runtime");
76
- var sizeClasses = {
77
- sm: "h-9 px-4 text-xs",
78
- md: "h-11 px-6 text-sm",
79
- lg: "h-13 px-8 text-base"
80
- };
81
- var variantClasses = {
82
- solid: "bg-gradient-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.6)] hover:scale-[1.02] active:scale-[0.98]",
83
- ghost: "bg-[color:rgb(var(--nc-surface)/0.12)] text-[rgb(var(--nc-fg))] hover:bg-[color:rgb(var(--nc-surface)/0.18)] backdrop-blur-sm border border-[rgb(var(--nc-border)/0.35)] hover:border-[color:rgb(var(--nc-border)/0.5)]",
84
- outline: "bg-transparent text-[color:rgb(var(--nc-accent-1))] border-2 border-[color:rgb(var(--nc-accent-1)/0.5)] hover:border-[color:rgb(var(--nc-accent-1))] hover:bg-[color:rgb(var(--nc-accent-1)/0.1)]",
85
- gradient: "bg-gradient-to-r from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))] text-white shadow-[0_12px_30px_rgb(var(--nc-accent-2)/0.45)] hover:shadow-[0_16px_36px_rgb(var(--nc-accent-2)/0.6)] hover:scale-[1.02] active:scale-[0.98]"
86
- };
87
- function CraftButton({
88
- className,
89
- variant = "solid",
90
- size = "md",
91
- glow = true,
92
- tone,
93
- disabled,
94
- ...props
95
- }) {
96
- return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
97
- "button",
98
- {
99
- className: cn(
100
- "relative inline-flex items-center justify-center gap-2 rounded-xl font-semibold tracking-wide transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)] focus-visible:ring-offset-2 focus-visible:ring-offset-slate-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100",
101
- sizeClasses[size],
102
- variantClasses[variant],
103
- glow && (variant === "solid" || variant === "gradient") ? "before:absolute before:-inset-1 before:rounded-xl before:bg-linear-to-r before:from-[rgb(var(--nc-accent-1)/0.2)] before:via-[rgb(var(--nc-accent-2)/0.2)] before:to-[rgb(var(--nc-accent-3)/0.2)] before:blur-xl before:-z-10 before:opacity-0 hover:before:opacity-100 before:transition-opacity" : "",
104
- className
105
- ),
106
- "data-nc-theme": tone,
107
- disabled,
108
- ...props
109
- }
110
- );
111
- }
112
-
113
- // src/components/glass-card.tsx
114
- var import_jsx_runtime2 = require("react/jsx-runtime");
115
- var intensityClasses = {
116
- subtle: "backdrop-blur-md bg-opacity-50",
117
- medium: "backdrop-blur-xl bg-opacity-70",
118
- strong: "backdrop-blur-2xl bg-opacity-90"
119
- };
120
- function GlassCard({
121
- className,
122
- tone,
123
- intensity = "medium",
124
- bordered = true,
125
- children,
126
- ...props
127
- }) {
128
- return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
129
- "div",
130
- {
131
- className: cn(
132
- "relative overflow-hidden rounded-3xl p-6 text-[rgb(var(--nc-fg))]",
133
- "shadow-[0_8px_32px_rgba(0,0,0,0.3)]",
134
- "transition-all duration-300",
135
- "hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]",
136
- intensityClasses[intensity],
137
- "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)]",
138
- "border-[rgb(var(--nc-accent-1)/0.3)]",
139
- bordered ? "border-2" : "border-0",
140
- "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",
141
- className
142
- ),
143
- "data-nc-theme": tone,
144
- ...props,
145
- children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "relative z-10", children })
146
- }
147
- );
148
- }
149
-
150
- // src/components/craft-card.tsx
151
- var import_jsx_runtime3 = require("react/jsx-runtime");
152
- var intensityClasses2 = {
153
- subtle: "backdrop-blur-md bg-opacity-50",
154
- medium: "backdrop-blur-xl bg-opacity-70",
155
- strong: "backdrop-blur-2xl bg-opacity-90"
156
- };
157
- function CraftCard({
158
- className,
159
- tone,
160
- elevated = true,
161
- intensity = "medium",
162
- bordered = true,
163
- children,
164
- ...props
165
- }) {
166
- return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
167
- "div",
168
- {
169
- className: cn(
170
- "relative overflow-hidden rounded-3xl p-6 text-[rgb(var(--nc-fg))]",
171
- intensityClasses2[intensity],
172
- "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)]",
173
- bordered ? "border-2 border-[rgb(var(--nc-accent-1)/0.3)]" : "border-0",
174
- elevated ? "shadow-[0_8px_32px_rgba(0,0,0,0.3)] hover:shadow-[0_8px_40px_rgba(0,0,0,0.4)]" : "shadow-none",
175
- "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",
176
- "transition-all duration-300",
177
- className
178
- ),
179
- "data-nc-theme": tone,
180
- ...props,
181
- children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "relative z-10", children })
182
- }
183
- );
184
- }
185
-
186
- // src/components/craft-input.tsx
187
- var React = __toESM(require("react"), 1);
188
- var import_jsx_runtime4 = require("react/jsx-runtime");
189
- var inputSizeClasses = {
190
- sm: "h-10 px-4 text-sm",
191
- md: "h-12 px-5 text-base",
192
- lg: "h-14 px-6 text-lg"
193
- };
194
- var CraftInput = React.forwardRef(
195
- ({ className, tone, inputSize = "md", glow = true, icon, ...props }, ref) => {
196
- return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
197
- icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]", children: icon }),
198
- /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
199
- "input",
200
- {
201
- ref,
202
- className: cn(
203
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
204
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
205
- "focus:outline-none focus:ring-4",
206
- "transition-all duration-300",
207
- "disabled:opacity-50 disabled:cursor-not-allowed",
208
- inputSizeClasses[inputSize],
209
- "border-[rgb(var(--nc-border)/0.35)]",
210
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
211
- "placeholder:text-[rgb(var(--nc-fg-soft))]",
212
- glow ? "focus:shadow-[0_0_30px_-5px_var(--glow-color)]" : "",
213
- icon ? "pl-12" : "",
214
- className
215
- ),
216
- style: {
217
- "--glow-color": "rgb(var(--nc-accent-1) / 0.5)"
218
- },
219
- ...props
220
- }
221
- )
222
- ] });
223
- }
224
- );
225
- CraftInput.displayName = "CraftInput";
226
-
227
- // src/components/craft-textarea.tsx
228
- var React2 = __toESM(require("react"), 1);
229
- var import_jsx_runtime5 = require("react/jsx-runtime");
230
- var CraftTextarea = React2.forwardRef(
231
- ({ className, tone, rows = 4, ...props }, ref) => {
232
- return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "relative w-full", "data-nc-theme": tone, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
233
- "textarea",
234
- {
235
- ref,
236
- rows,
237
- className: cn(
238
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
239
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
240
- "focus:outline-none focus:ring-4",
241
- "transition-all duration-300",
242
- "disabled:opacity-50 disabled:cursor-not-allowed",
243
- "border-[rgb(var(--nc-border)/0.35)]",
244
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
245
- "placeholder:text-[rgb(var(--nc-fg-soft))]",
246
- "px-5 py-3 text-base",
247
- className
248
- ),
249
- style: {
250
- "--glow-color": "rgb(var(--nc-accent-1) / 0.5)"
251
- },
252
- ...props
253
- }
254
- ) });
255
- }
256
- );
257
- CraftTextarea.displayName = "CraftTextarea";
258
-
259
- // src/components/craft-select.tsx
260
- var React3 = __toESM(require("react"), 1);
261
- var import_jsx_runtime6 = require("react/jsx-runtime");
262
- var CraftSelect = React3.forwardRef(
263
- ({ className, tone, children, ...props }, ref) => {
264
- return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
265
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
266
- "select",
267
- {
268
- ref,
269
- className: cn(
270
- "w-full appearance-none rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
271
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
272
- "focus:outline-none focus:ring-4",
273
- "transition-all duration-300",
274
- "disabled:opacity-50 disabled:cursor-not-allowed",
275
- "border-[rgb(var(--nc-border)/0.35)]",
276
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
277
- "px-5 py-3 pr-10 text-base",
278
- className
279
- ),
280
- ...props,
281
- children
282
- }
283
- ),
284
- /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
285
- "svg",
286
- {
287
- className: "pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]",
288
- viewBox: "0 0 20 20",
289
- fill: "currentColor",
290
- "aria-hidden": "true",
291
- children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
292
- "path",
293
- {
294
- fillRule: "evenodd",
295
- d: "M5.23 7.21a.75.75 0 011.06.02L10 10.94l3.71-3.7a.75.75 0 111.06 1.06l-4.24 4.24a.75.75 0 01-1.06 0L5.21 8.29a.75.75 0 01.02-1.08z",
296
- clipRule: "evenodd"
297
- }
298
- )
299
- }
300
- )
301
- ] });
302
- }
303
- );
304
- CraftSelect.displayName = "CraftSelect";
305
-
306
- // src/components/craft-checkbox.tsx
307
- var React4 = __toESM(require("react"), 1);
308
- var import_jsx_runtime7 = require("react/jsx-runtime");
309
- var CraftCheckbox = React4.forwardRef(
310
- ({ className, tone, label, description, ...props }, ref) => {
311
- return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
312
- "label",
313
- {
314
- className: cn(
315
- "flex items-start gap-3 text-sm text-[rgb(var(--nc-fg))]",
316
- props.disabled ? "opacity-60" : "cursor-pointer",
317
- className
318
- ),
319
- "data-nc-theme": tone,
320
- children: [
321
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "relative mt-0.5", children: [
322
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
323
- "input",
324
- {
325
- ref,
326
- type: "checkbox",
327
- className: "peer sr-only",
328
- ...props
329
- }
330
- ),
331
- /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
332
- "span",
333
- {
334
- className: cn(
335
- "flex h-5 w-5 items-center justify-center rounded-md border-2",
336
- "border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]",
337
- "transition-all duration-200",
338
- "peer-checked:border-[rgb(var(--nc-accent-1))] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]",
339
- "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]"
340
- ),
341
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
342
- "svg",
343
- {
344
- className: "h-3 w-3 text-[rgb(var(--nc-fg))] opacity-0 transition-opacity peer-checked:opacity-100",
345
- viewBox: "0 0 20 20",
346
- fill: "currentColor",
347
- "aria-hidden": "true",
348
- children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
349
- "path",
350
- {
351
- fillRule: "evenodd",
352
- d: "M16.704 5.29a1 1 0 010 1.415l-7.2 7.2a1 1 0 01-1.415 0l-3.2-3.2a1 1 0 111.415-1.415l2.492 2.493 6.493-6.493a1 1 0 011.415 0z",
353
- clipRule: "evenodd"
354
- }
355
- )
356
- }
357
- )
358
- }
359
- )
360
- ] }),
361
- /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "space-y-1", children: [
362
- label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block font-medium text-[rgb(var(--nc-fg))]", children: label }),
363
- description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: description })
364
- ] })
365
- ]
366
- }
367
- );
368
- }
369
- );
370
- CraftCheckbox.displayName = "CraftCheckbox";
371
-
372
- // src/components/craft-switch.tsx
373
- var React5 = __toESM(require("react"), 1);
374
- var import_jsx_runtime8 = require("react/jsx-runtime");
375
- var CraftSwitch = React5.forwardRef(
376
- ({ className, tone, label, ...props }, ref) => {
377
- return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
378
- "label",
379
- {
380
- className: cn(
381
- "inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]",
382
- props.disabled ? "opacity-60" : "cursor-pointer",
383
- className
384
- ),
385
- "data-nc-theme": tone,
386
- children: [
387
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("input", { ref, type: "checkbox", className: "peer sr-only", ...props }),
388
- /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
389
- "span",
390
- {
391
- className: cn(
392
- "relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
393
- "transition-all duration-200",
394
- "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]",
395
- "peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]"
396
- ),
397
- children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
398
- "span",
399
- {
400
- className: cn(
401
- "absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-[rgb(var(--nc-surface-muted)/0.9)]",
402
- "transition-all duration-200",
403
- "peer-checked:translate-x-5 peer-checked:bg-[rgb(var(--nc-surface-muted))]"
404
- )
405
- }
406
- )
407
- }
408
- ),
409
- label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: label })
410
- ]
411
- }
412
- );
413
- }
414
- );
415
- CraftSwitch.displayName = "CraftSwitch";
416
-
417
- // src/components/craft-badge.tsx
418
- var import_jsx_runtime9 = require("react/jsx-runtime");
419
- var variantClasses2 = {
420
- solid: "bg-[color:rgb(var(--nc-accent-1))] text-white shadow-[0_10px_20px_rgb(var(--nc-accent-1)/0.35)]",
421
- soft: "bg-[color:rgb(var(--nc-accent-1)/0.2)] text-[rgb(var(--nc-fg))]",
422
- outline: "border border-[color:rgb(var(--nc-accent-1)/0.6)] text-[rgb(var(--nc-fg))]"
423
- };
424
- function CraftBadge({
425
- className,
426
- variant = "soft",
427
- tone,
428
- ...props
429
- }) {
430
- return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
431
- "span",
432
- {
433
- className: cn(
434
- "inline-flex items-center rounded-full px-3 py-1 text-xs font-semibold uppercase tracking-wide",
435
- variantClasses2[variant],
436
- className
437
- ),
438
- "data-nc-theme": tone,
439
- ...props
440
- }
441
- );
442
- }
443
-
444
- // src/components/craft-modal.tsx
445
- var React6 = __toESM(require("react"), 1);
446
- var import_react_dom = require("react-dom");
447
- var import_jsx_runtime10 = require("react/jsx-runtime");
448
- var FOCUSABLE_SELECTORS = [
449
- "a[href]",
450
- "button:not([disabled])",
451
- "textarea:not([disabled])",
452
- "input:not([disabled])",
453
- "select:not([disabled])",
454
- "[tabindex]:not([tabindex='-1'])"
455
- ].join(",");
456
- function useFocusTrap(active) {
457
- const ref = React6.useRef(null);
458
- React6.useEffect(() => {
459
- if (!active || !ref.current) return;
460
- const root = ref.current;
461
- const getFocusable = () => Array.from(root.querySelectorAll(FOCUSABLE_SELECTORS));
462
- const focusables = getFocusable();
463
- if (focusables.length) {
464
- focusables[0].focus();
465
- } else {
466
- root.focus();
467
- }
468
- const handleKeyDown = (event) => {
469
- if (event.key !== "Tab") return;
470
- const items = getFocusable();
471
- if (!items.length) return;
472
- const first = items[0];
473
- const last = items[items.length - 1];
474
- const activeEl = document.activeElement;
475
- if (event.shiftKey && activeEl === first) {
476
- event.preventDefault();
477
- last.focus();
478
- } else if (!event.shiftKey && activeEl === last) {
479
- event.preventDefault();
480
- first.focus();
481
- }
482
- };
483
- root.addEventListener("keydown", handleKeyDown);
484
- return () => root.removeEventListener("keydown", handleKeyDown);
485
- }, [active]);
486
- return ref;
487
- }
488
- function CraftModal({
489
- open,
490
- defaultOpen = false,
491
- onOpenChange,
492
- tone,
493
- title,
494
- description,
495
- children,
496
- trigger,
497
- footer,
498
- className
499
- }) {
500
- const [uncontrolledOpen, setUncontrolledOpen] = React6.useState(defaultOpen);
501
- const isControlled = typeof open === "boolean";
502
- const isOpen = isControlled ? open : uncontrolledOpen;
503
- const setOpen = React6.useCallback(
504
- (next) => {
505
- if (!isControlled) {
506
- setUncontrolledOpen(next);
507
- }
508
- onOpenChange == null ? void 0 : onOpenChange(next);
509
- },
510
- [isControlled, onOpenChange]
511
- );
512
- React6.useEffect(() => {
513
- if (!isOpen) return;
514
- const handleKey = (event) => {
515
- if (event.key === "Escape") setOpen(false);
516
- };
517
- document.addEventListener("keydown", handleKey);
518
- return () => document.removeEventListener("keydown", handleKey);
519
- }, [isOpen, setOpen]);
520
- const ref = useFocusTrap(isOpen);
521
- const content = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "fixed inset-0 z-50 flex items-center justify-center px-4 py-8", children: [
522
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
523
- "div",
524
- {
525
- className: "absolute inset-0 backdrop-blur-sm",
526
- onClick: () => setOpen(false)
527
- }
528
- ),
529
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
530
- "div",
531
- {
532
- ref,
533
- tabIndex: -1,
534
- className: cn(
535
- "relative z-10 w-full max-w-7xl rounded-3xl border border-[rgb(var(--nc-border)/0.45)] p-6 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.45)] backdrop-blur-2xl",
536
- "max-h-[calc(100vh-1rem)] overflow-y-auto",
537
- className
538
- ),
539
- "data-nc-theme": tone,
540
- children: [
541
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
542
- /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "space-y-1", children: [
543
- title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h3", { className: "text-2xl font-semibold", children: title }),
544
- description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-[rgb(var(--nc-fg-muted))]", children: description })
545
- ] }),
546
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
547
- "button",
548
- {
549
- 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))]",
550
- onClick: () => setOpen(false),
551
- "aria-label": "Close",
552
- children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("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" }) })
553
- }
554
- )
555
- ] }),
556
- /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-5 space-y-4", children }),
557
- footer && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "mt-6", children: footer })
558
- ]
559
- }
560
- )
561
- ] }) : null;
562
- return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
563
- trigger && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
564
- "span",
565
- {
566
- onClick: () => setOpen(true),
567
- onKeyDown: (event) => {
568
- if (event.key === "Enter" || event.key === " ") setOpen(true);
569
- },
570
- role: "button",
571
- tabIndex: 0,
572
- className: "inline-flex",
573
- children: trigger
574
- }
575
- ),
576
- typeof document !== "undefined" && content ? (0, import_react_dom.createPortal)(content, document.body) : content
577
- ] });
578
- }
579
-
580
- // src/components/craft-drawer.tsx
581
- var React7 = __toESM(require("react"), 1);
582
- var import_react_dom2 = require("react-dom");
583
- var import_jsx_runtime11 = require("react/jsx-runtime");
584
- function CraftDrawer({
585
- open,
586
- defaultOpen = false,
587
- onOpenChange,
588
- tone,
589
- side = "left",
590
- title,
591
- children,
592
- trigger,
593
- footer,
594
- className
595
- }) {
596
- const [uncontrolledOpen, setUncontrolledOpen] = React7.useState(defaultOpen);
597
- const isControlled = typeof open === "boolean";
598
- const isOpen = isControlled ? open : uncontrolledOpen;
599
- const setOpen = React7.useCallback(
600
- (next) => {
601
- if (!isControlled) setUncontrolledOpen(next);
602
- onOpenChange == null ? void 0 : onOpenChange(next);
603
- },
604
- [isControlled, onOpenChange]
605
- );
606
- React7.useEffect(() => {
607
- if (!isOpen) return;
608
- const handleKey = (event) => {
609
- if (event.key === "Escape") setOpen(false);
610
- };
611
- document.addEventListener("keydown", handleKey);
612
- return () => document.removeEventListener("keydown", handleKey);
613
- }, [isOpen, setOpen]);
614
- const content = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "fixed inset-0 z-50 overflow-hidden", children: [
615
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
616
- "div",
617
- {
618
- className: "absolute inset-0 backdrop-blur-sm",
619
- onClick: () => setOpen(false)
620
- }
621
- ),
622
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
623
- "div",
624
- {
625
- className: cn(
626
- "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",
627
- side === "right" ? "right-0" : "left-0",
628
- className
629
- ),
630
- "data-nc-theme": tone,
631
- children: [
632
- /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between border-b border-[rgb(var(--nc-border)/0.3)] p-6", children: [
633
- title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h3", { className: "text-xl font-semibold", children: title }),
634
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
635
- "button",
636
- {
637
- 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))]",
638
- onClick: () => setOpen(false),
639
- "aria-label": "Close",
640
- children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("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" }) })
641
- }
642
- )
643
- ] }),
644
- /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-6 space-y-4 overflow-y-auto h-[calc(100%-5.5rem)]", children }),
645
- footer && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "border-t border-[rgb(var(--nc-border)/0.3)] p-6", children: footer })
646
- ]
647
- }
648
- )
649
- ] }) : null;
650
- return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
651
- trigger && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
652
- "span",
653
- {
654
- onClick: () => setOpen(true),
655
- onKeyDown: (event) => {
656
- if (event.key === "Enter" || event.key === " ") setOpen(true);
657
- },
658
- role: "button",
659
- tabIndex: 0,
660
- className: "inline-flex",
661
- children: trigger
662
- }
663
- ),
664
- typeof document !== "undefined" && content ? (0, import_react_dom2.createPortal)(content, document.body) : content
665
- ] });
666
- }
667
-
668
- // src/components/craft-tabs.tsx
669
- var React8 = __toESM(require("react"), 1);
670
- var import_jsx_runtime12 = require("react/jsx-runtime");
671
- function CraftTabs({
672
- value,
673
- defaultValue,
674
- onValueChange,
675
- tone,
676
- tabs,
677
- panels,
678
- className
679
- }) {
680
- var _a, _b;
681
- const fallback = (_b = (_a = tabs[0]) == null ? void 0 : _a.value) != null ? _b : "";
682
- const [uncontrolledValue, setUncontrolledValue] = React8.useState(
683
- defaultValue != null ? defaultValue : fallback
684
- );
685
- const isControlled = value !== void 0;
686
- const activeValue = isControlled ? value : uncontrolledValue;
687
- const setValue = React8.useCallback(
688
- (next) => {
689
- if (!isControlled) setUncontrolledValue(next);
690
- onValueChange == null ? void 0 : onValueChange(next);
691
- },
692
- [isControlled, onValueChange]
693
- );
694
- const onKeyDown = (event) => {
695
- if (!tabs.length) return;
696
- const currentIndex = tabs.findIndex((tab) => tab.value === activeValue);
697
- if (event.key === "ArrowRight") {
698
- event.preventDefault();
699
- const next = tabs[(currentIndex + 1) % tabs.length];
700
- setValue(next.value);
701
- }
702
- if (event.key === "ArrowLeft") {
703
- event.preventDefault();
704
- const next = tabs[(currentIndex - 1 + tabs.length) % tabs.length];
705
- setValue(next.value);
706
- }
707
- };
708
- return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("space-y-4", className), "data-nc-theme": tone, children: [
709
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
710
- "div",
711
- {
712
- 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",
713
- role: "tablist",
714
- onKeyDown,
715
- children: tabs.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
716
- "button",
717
- {
718
- role: "tab",
719
- "aria-selected": activeValue === tab.value,
720
- onClick: () => setValue(tab.value),
721
- className: cn(
722
- "rounded-full px-4 py-2 text-sm font-semibold transition-all",
723
- 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))]"
724
- ),
725
- children: tab.label
726
- },
727
- tab.value
728
- ))
729
- }
730
- ),
731
- /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("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] })
732
- ] });
733
- }
734
-
735
- // src/components/craft-tooltip.tsx
736
- var React9 = __toESM(require("react"), 1);
737
- var import_jsx_runtime13 = require("react/jsx-runtime");
738
- function CraftTooltip({ content, tone, children, side = "top" }) {
739
- const [open, setOpen] = React9.useState(false);
740
- return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
741
- "span",
742
- {
743
- className: "relative inline-flex",
744
- onMouseEnter: () => setOpen(true),
745
- onMouseLeave: () => setOpen(false),
746
- onFocus: () => setOpen(true),
747
- onBlur: () => setOpen(false),
748
- children: [
749
- children,
750
- /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
751
- "span",
752
- {
753
- className: cn(
754
- "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",
755
- "backdrop-blur-xl",
756
- open ? "opacity-100 translate-y-0" : "opacity-0 translate-y-1",
757
- side === "top" && "bottom-full left-1/2 -translate-x-1/2 -translate-y-2",
758
- side === "bottom" && "top-full left-1/2 -translate-x-1/2 translate-y-2",
759
- side === "left" && "right-full top-1/2 -translate-y-1/2 -translate-x-2",
760
- side === "right" && "left-full top-1/2 -translate-y-1/2 translate-x-2"
761
- ),
762
- "data-nc-theme": tone,
763
- role: "tooltip",
764
- children: content
765
- }
766
- )
767
- ]
768
- }
769
- );
770
- }
771
-
772
- // src/components/craft-toast.tsx
773
- var React10 = __toESM(require("react"), 1);
774
- var import_jsx_runtime14 = require("react/jsx-runtime");
775
- var variantClasses3 = {
776
- info: "border-[color:rgb(var(--nc-accent-1)/0.4)]",
777
- success: "border-emerald-400/40",
778
- warning: "border-amber-400/40",
779
- error: "border-rose-400/40"
780
- };
781
- function useCraftToast() {
782
- const [toasts, setToasts] = React10.useState([]);
783
- const push = React10.useCallback((toast) => {
784
- const id = `${Date.now()}-${Math.random().toString(16).slice(2)}`;
785
- setToasts((prev) => [...prev, { ...toast, id }]);
786
- return id;
787
- }, []);
788
- const remove = React10.useCallback((id) => {
789
- setToasts((prev) => prev.filter((toast) => toast.id !== id));
790
- }, []);
791
- return { toasts, push, remove };
792
- }
793
- function CraftToastHost({ toasts, onDismiss, tone }) {
794
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
795
- "div",
796
- {
797
- className: "fixed right-6 top-6 z-50 flex w-full max-w-sm flex-col gap-3",
798
- "data-nc-theme": tone,
799
- children: toasts.map((toast) => {
800
- var _a;
801
- return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
802
- "div",
803
- {
804
- className: cn(
805
- "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",
806
- variantClasses3[(_a = toast.variant) != null ? _a : "info"]
807
- ),
808
- children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-start justify-between gap-4", children: [
809
- /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { children: [
810
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm font-semibold", children: toast.title }),
811
- toast.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-[rgb(var(--nc-fg-muted))]", children: toast.description })
812
- ] }),
813
- /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
814
- "button",
815
- {
816
- className: "text-[rgb(var(--nc-fg-soft))] hover:text-[rgb(var(--nc-fg))]",
817
- onClick: () => onDismiss(toast.id),
818
- children: "\u2715"
819
- }
820
- )
821
- ] })
822
- },
823
- toast.id
824
- );
825
- })
826
- }
827
- );
828
- }
829
-
830
- // src/components/craft-skeleton.tsx
831
- var import_jsx_runtime15 = require("react/jsx-runtime");
832
- function CraftSkeleton({ className, tone, ...props }) {
833
- return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
834
- "div",
835
- {
836
- className: cn(
837
- "relative overflow-hidden rounded-2xl bg-[rgb(var(--nc-surface)/0.12)]",
838
- "after:absolute after:inset-0 after:-translate-x-full after:bg-linear-to-r after:from-transparent after:via-white/20 after:to-transparent",
839
- "after:animate-[shimmer_1.6s_infinite]",
840
- className
841
- ),
842
- "data-nc-theme": tone,
843
- ...props
844
- }
845
- );
846
- }
847
-
848
- // src/components/craft-empty-state.tsx
849
- var import_jsx_runtime16 = require("react/jsx-runtime");
850
- function CraftEmptyState({
851
- className,
852
- tone,
853
- title,
854
- description,
855
- icon,
856
- action,
857
- ...props
858
- }) {
859
- return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
860
- "div",
861
- {
862
- className: cn(
863
- "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",
864
- "shadow-[0_18px_40px_rgba(0,0,0,0.25)]",
865
- className
866
- ),
867
- "data-nc-theme": tone,
868
- ...props,
869
- children: [
870
- icon && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("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 }),
871
- /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-xl font-semibold", children: title }),
872
- description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "mt-2 text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
873
- action && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "mt-6 flex justify-center", children: action })
874
- ]
875
- }
876
- );
877
- }
878
-
879
- // src/components/craft-date-picker.tsx
880
- var React11 = __toESM(require("react"), 1);
881
- var import_jsx_runtime17 = require("react/jsx-runtime");
882
- var WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
883
- function formatDate(date) {
884
- const year = date.getFullYear();
885
- const month = `${date.getMonth() + 1}`.padStart(2, "0");
886
- const day = `${date.getDate()}`.padStart(2, "0");
887
- return `${year}-${month}-${day}`;
888
- }
889
- function parseDate(value) {
890
- if (!value) return null;
891
- const [year, month, day] = value.split("-").map(Number);
892
- if (!year || !month || !day) return null;
893
- return new Date(year, month - 1, day);
894
- }
895
- function isSameDay(a, b) {
896
- return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
897
- }
898
- function isOutsideRange(date, min, max) {
899
- const minDate = parseDate(min);
900
- const maxDate = parseDate(max);
901
- if (minDate && date < minDate) return true;
902
- if (maxDate && date > maxDate) return true;
903
- return false;
904
- }
905
- function CraftDatePicker({
906
- value,
907
- defaultValue,
908
- onChange,
909
- tone,
910
- min,
911
- max,
912
- placeholder = "Select date",
913
- className
914
- }) {
915
- const [open, setOpen] = React11.useState(false);
916
- const [uncontrolledValue, setUncontrolledValue] = React11.useState(defaultValue != null ? defaultValue : "");
917
- const isControlled = value !== void 0;
918
- const selectedValue = isControlled ? value != null ? value : "" : uncontrolledValue;
919
- const selectedDate = parseDate(selectedValue);
920
- const initialMonth = selectedDate != null ? selectedDate : /* @__PURE__ */ new Date();
921
- const [viewDate, setViewDate] = React11.useState(initialMonth);
922
- React11.useEffect(() => {
923
- if (selectedDate) setViewDate(selectedDate);
924
- }, [selectedDate]);
925
- const wrapperRef = React11.useRef(null);
926
- React11.useEffect(() => {
927
- if (!open) return;
928
- const handleClick = (event) => {
929
- var _a;
930
- if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(event.target))) {
931
- setOpen(false);
932
- }
933
- };
934
- const handleKey = (event) => {
935
- if (event.key === "Escape") setOpen(false);
936
- };
937
- document.addEventListener("mousedown", handleClick);
938
- document.addEventListener("keydown", handleKey);
939
- return () => {
940
- document.removeEventListener("mousedown", handleClick);
941
- document.removeEventListener("keydown", handleKey);
942
- };
943
- }, [open]);
944
- const setValue = React11.useCallback(
945
- (next) => {
946
- if (!isControlled) setUncontrolledValue(next);
947
- onChange == null ? void 0 : onChange(next);
948
- },
949
- [isControlled, onChange]
950
- );
951
- const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
952
- const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
953
- const startDay = monthStart.getDay();
954
- const daysInMonth = monthEnd.getDate();
955
- const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {
956
- const dayNumber = i - startDay + 1;
957
- if (dayNumber < 1) return null;
958
- return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);
959
- });
960
- const handleDaySelect = (date) => {
961
- if (isOutsideRange(date, min, max)) return;
962
- const next = formatDate(date);
963
- setValue(next);
964
- setOpen(false);
965
- };
966
- const handleKeyDown = (event) => {
967
- if (!open) return;
968
- if (!selectedDate) return;
969
- const next = new Date(selectedDate);
970
- if (event.key === "ArrowRight") next.setDate(next.getDate() + 1);
971
- if (event.key === "ArrowLeft") next.setDate(next.getDate() - 1);
972
- if (event.key === "ArrowDown") next.setDate(next.getDate() + 7);
973
- if (event.key === "ArrowUp") next.setDate(next.getDate() - 7);
974
- if (event.key === "Enter") {
975
- event.preventDefault();
976
- handleDaySelect(selectedDate);
977
- return;
978
- }
979
- if (next.getTime() !== selectedDate.getTime()) {
980
- event.preventDefault();
981
- if (!isOutsideRange(next, min, max)) {
982
- setValue(formatDate(next));
983
- setViewDate(next);
984
- }
985
- }
986
- };
987
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, ref: wrapperRef, children: [
988
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
989
- "button",
990
- {
991
- type: "button",
992
- onClick: () => setOpen((prev) => !prev),
993
- className: cn(
994
- "flex w-full items-center justify-between rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] px-5 py-3 text-left text-base text-[rgb(var(--nc-fg))] backdrop-blur-xl",
995
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
996
- "transition-all duration-300",
997
- "border-[rgb(var(--nc-border)/0.35)]",
998
- "focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
999
- className
1000
- ),
1001
- children: [
1002
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: selectedValue ? "text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-soft))]", children: selectedValue || placeholder }),
1003
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("svg", { className: "h-4 w-4 text-[rgb(var(--nc-fg-soft))]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("path", { d: "M6 2a1 1 0 011 1v1h6V3a1 1 0 112 0v1h1a2 2 0 012 2v10a2 2 0 01-2 2H4a2 2 0 01-2-2V6a2 2 0 012-2h1V3a1 1 0 011-1zm10 6H4v8h12V8z" }) })
1004
- ]
1005
- }
1006
- ),
1007
- open && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
1008
- "div",
1009
- {
1010
- className: cn(
1011
- "absolute left-0 top-full z-20 mt-3 w-full rounded-3xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/1.52)] p-4 text-[rgb(var(--nc-fg))] shadow-[0_20px_60px_rgba(0,0,0,0.55)] backdrop-blur-10xl"
1012
- ),
1013
- onKeyDown: handleKeyDown,
1014
- tabIndex: -1,
1015
- children: [
1016
- /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between", children: [
1017
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1018
- "button",
1019
- {
1020
- type: "button",
1021
- className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
1022
- onClick: () => setViewDate(
1023
- new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)
1024
- ),
1025
- children: "Prev"
1026
- }
1027
- ),
1028
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-sm font-semibold", children: viewDate.toLocaleString(void 0, { month: "long", year: "numeric" }) }),
1029
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1030
- "button",
1031
- {
1032
- type: "button",
1033
- className: "rounded-xl border border-[rgb(var(--nc-border)/0.3)] bg-[rgb(var(--nc-surface)/0.12)] px-3 py-1 text-sm text-[rgb(var(--nc-fg))]",
1034
- onClick: () => setViewDate(
1035
- new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)
1036
- ),
1037
- children: "Next"
1038
- }
1039
- )
1040
- ] }),
1041
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]", children: WEEK_DAYS.map((day) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "text-center", children: day }, day)) }),
1042
- /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-2 grid grid-cols-7 gap-2", children: cells.map((date, index) => {
1043
- if (!date) return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", {}, `empty-${index}`);
1044
- const disabled = isOutsideRange(date, min, max);
1045
- const selected = selectedDate && isSameDay(date, selectedDate);
1046
- return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
1047
- "button",
1048
- {
1049
- type: "button",
1050
- onClick: () => handleDaySelect(date),
1051
- disabled,
1052
- className: cn(
1053
- "rounded-lg py-2 text-sm transition-all",
1054
- selected ? "bg-[rgb(var(--nc-accent-1)/0.3)] text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-muted))] hover:bg-[rgb(var(--nc-surface)/0.12)]",
1055
- disabled && "opacity-40 hover:bg-transparent"
1056
- ),
1057
- children: date.getDate()
1058
- },
1059
- date.toISOString()
1060
- );
1061
- }) })
1062
- ]
1063
- }
1064
- )
1065
- ] });
1066
- }
1067
-
1068
- // src/components/craft-number-input.tsx
1069
- var React12 = __toESM(require("react"), 1);
1070
- var import_jsx_runtime18 = require("react/jsx-runtime");
1071
- var CraftNumberInput = React12.forwardRef(({ className, tone, ...props }, ref) => {
1072
- return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "relative w-full", "data-nc-theme": tone, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
1073
- "input",
1074
- {
1075
- ref,
1076
- type: "number",
1077
- className: cn(
1078
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
1079
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
1080
- "focus:outline-none focus:ring-4",
1081
- "transition-all duration-300",
1082
- "disabled:opacity-50 disabled:cursor-not-allowed",
1083
- "border-[rgb(var(--nc-border)/0.35)]",
1084
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
1085
- "px-5 py-3 text-base",
1086
- className
1087
- ),
1088
- ...props
1089
- }
1090
- ) });
1091
- });
1092
- CraftNumberInput.displayName = "CraftNumberInput";
1093
-
1094
- // src/components/craft-currency-input.tsx
1095
- var React13 = __toESM(require("react"), 1);
1096
- var import_jsx_runtime19 = require("react/jsx-runtime");
1097
- var CraftCurrencyInput = React13.forwardRef(({ className, tone, currencySymbol = "$", ...props }, ref) => {
1098
- return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative w-full", "data-nc-theme": tone, children: [
1099
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]", children: currencySymbol }),
1100
- /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
1101
- "input",
1102
- {
1103
- ref,
1104
- type: "text",
1105
- inputMode: "decimal",
1106
- className: cn(
1107
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
1108
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
1109
- "focus:outline-none focus:ring-4",
1110
- "transition-all duration-300",
1111
- "disabled:opacity-50 disabled:cursor-not-allowed",
1112
- "border-[rgb(var(--nc-border)/0.35)]",
1113
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
1114
- "placeholder:text-[rgb(var(--nc-fg-soft))]",
1115
- "px-5 py-3 pl-9 text-base",
1116
- className
1117
- ),
1118
- ...props
1119
- }
1120
- )
1121
- ] });
1122
- });
1123
- CraftCurrencyInput.displayName = "CraftCurrencyInput";
1124
-
1125
- // src/components/craft-submit-button.tsx
1126
- var import_react_hook_form = require("react-hook-form");
1127
- var import_jsx_runtime20 = require("react/jsx-runtime");
1128
- function CraftSubmitButton({
1129
- className,
1130
- tone,
1131
- loading,
1132
- loadingLabel = "Submitting...",
1133
- disableWhenInvalid = true,
1134
- disabled,
1135
- children,
1136
- ...props
1137
- }) {
1138
- var _a, _b, _c, _d;
1139
- const form = (0, import_react_hook_form.useFormContext)();
1140
- const isSubmitting = (_b = loading != null ? loading : (_a = form == null ? void 0 : form.formState) == null ? void 0 : _a.isSubmitting) != null ? _b : false;
1141
- const isValid = (_d = (_c = form == null ? void 0 : form.formState) == null ? void 0 : _c.isValid) != null ? _d : true;
1142
- const isDisabled = disabled || isSubmitting || disableWhenInvalid && !isValid;
1143
- return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
1144
- "button",
1145
- {
1146
- type: "submit",
1147
- className: cn(
1148
- "relative inline-flex items-center justify-center gap-2 rounded-xl px-6 py-2 text-sm font-semibold",
1149
- "bg-linear-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))]",
1150
- "text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.35)]",
1151
- "transition-all duration-200",
1152
- "hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.5)] hover:scale-[1.02] active:scale-[0.98]",
1153
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)]",
1154
- "disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100",
1155
- className
1156
- ),
1157
- "data-nc-theme": tone,
1158
- disabled: isDisabled,
1159
- ...props,
1160
- children: [
1161
- isSubmitting && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "inline-flex h-4 w-4 animate-spin rounded-full border-2 border-white/60 border-t-white" }),
1162
- /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: isSubmitting ? loadingLabel : children })
1163
- ]
1164
- }
1165
- );
1166
- }
1167
-
1168
- // src/components/craft-confirm-dialog.tsx
1169
- var React14 = __toESM(require("react"), 1);
1170
- var import_jsx_runtime21 = require("react/jsx-runtime");
1171
- function CraftConfirmDialog({
1172
- open,
1173
- defaultOpen = false,
1174
- onOpenChange,
1175
- tone,
1176
- title = "Confirm action",
1177
- description,
1178
- confirmLabel = "Confirm",
1179
- cancelLabel = "Cancel",
1180
- onConfirm,
1181
- trigger,
1182
- className,
1183
- confirmVariant = "solid"
1184
- }) {
1185
- const [uncontrolledOpen, setUncontrolledOpen] = React14.useState(defaultOpen);
1186
- const isControlled = typeof open === "boolean";
1187
- const isOpen = isControlled ? open : uncontrolledOpen;
1188
- const setOpen = React14.useCallback(
1189
- (next) => {
1190
- if (!isControlled) setUncontrolledOpen(next);
1191
- onOpenChange == null ? void 0 : onOpenChange(next);
1192
- },
1193
- [isControlled, onOpenChange]
1194
- );
1195
- const [isLoading, setIsLoading] = React14.useState(false);
1196
- const handleConfirm = async () => {
1197
- if (!onConfirm) {
1198
- setOpen(false);
1199
- return;
1200
- }
1201
- setIsLoading(true);
1202
- await onConfirm();
1203
- setIsLoading(false);
1204
- setOpen(false);
1205
- };
1206
- return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1207
- CraftModal,
1208
- {
1209
- open: isOpen,
1210
- onOpenChange: setOpen,
1211
- trigger,
1212
- title,
1213
- description,
1214
- tone,
1215
- className: cn("max-w-md", className),
1216
- footer: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-3", children: [
1217
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1218
- CraftButton,
1219
- {
1220
- type: "button",
1221
- variant: "ghost",
1222
- onClick: () => setOpen(false),
1223
- children: cancelLabel
1224
- }
1225
- ),
1226
- /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
1227
- CraftButton,
1228
- {
1229
- type: "button",
1230
- variant: confirmVariant,
1231
- disabled: isLoading,
1232
- onClick: handleConfirm,
1233
- children: isLoading ? "Working..." : confirmLabel
1234
- }
1235
- )
1236
- ] }),
1237
- children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description })
1238
- }
1239
- );
1240
- }
1241
-
1242
- // src/components/craft-create-edit-drawer.tsx
1243
- var React15 = __toESM(require("react"), 1);
1244
- var import_react_hook_form2 = require("react-hook-form");
1245
- var import_jsx_runtime22 = require("react/jsx-runtime");
1246
- function CraftCreateEditDrawer({
1247
- mode = "create",
1248
- form,
1249
- onSubmit,
1250
- open,
1251
- defaultOpen = false,
1252
- onOpenChange,
1253
- trigger,
1254
- title,
1255
- description,
1256
- submitLabel,
1257
- cancelLabel = "Cancel",
1258
- tone,
1259
- className,
1260
- children,
1261
- footer,
1262
- disableSubmitWhenInvalid = true,
1263
- closeOnSubmit = true,
1264
- side = "right"
1265
- }) {
1266
- const [uncontrolledOpen, setUncontrolledOpen] = React15.useState(defaultOpen);
1267
- const isControlled = typeof open === "boolean";
1268
- const isOpen = isControlled ? open : uncontrolledOpen;
1269
- const setOpen = React15.useCallback(
1270
- (next) => {
1271
- if (!isControlled) setUncontrolledOpen(next);
1272
- onOpenChange == null ? void 0 : onOpenChange(next);
1273
- },
1274
- [isControlled, onOpenChange]
1275
- );
1276
- const formId = React15.useId();
1277
- const handleSubmit = form.handleSubmit(async (values) => {
1278
- await onSubmit(values);
1279
- if (closeOnSubmit) setOpen(false);
1280
- });
1281
- const resolvedTitle = title != null ? title : mode === "create" ? "Create item" : "Edit item";
1282
- const resolvedSubmitLabel = submitLabel != null ? submitLabel : mode === "create" ? "Create" : "Save changes";
1283
- const footerContent = footer != null ? footer : /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "flex flex-wrap items-center justify-end gap-3", children: [
1284
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CraftButton, { type: "button", variant: "ghost", onClick: () => setOpen(false), children: cancelLabel }),
1285
- /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1286
- CraftSubmitButton,
1287
- {
1288
- form: formId,
1289
- disableWhenInvalid: disableSubmitWhenInvalid,
1290
- children: resolvedSubmitLabel
1291
- }
1292
- )
1293
- ] });
1294
- return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_hook_form2.FormProvider, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
1295
- CraftDrawer,
1296
- {
1297
- open: isOpen,
1298
- onOpenChange: setOpen,
1299
- trigger,
1300
- title: resolvedTitle,
1301
- tone,
1302
- side,
1303
- className: cn("flex flex-col", className),
1304
- footer: footerContent,
1305
- children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("form", { id: formId, onSubmit: handleSubmit, className: "space-y-5", children: [
1306
- description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description }),
1307
- children
1308
- ] })
1309
- }
1310
- ) });
1311
- }
1312
-
1313
- // src/components/craft-alert.tsx
1314
- var import_jsx_runtime23 = require("react/jsx-runtime");
1315
- var variantClasses4 = {
1316
- info: "border-[rgb(var(--nc-accent-1)/0.45)] bg-[rgb(var(--nc-accent-1)/0.12)]",
1317
- success: "border-[rgb(var(--nc-accent-2)/0.45)] bg-[rgb(var(--nc-accent-2)/0.12)]",
1318
- warning: "border-[rgb(var(--nc-accent-3)/0.45)] bg-[rgb(var(--nc-accent-3)/0.12)]",
1319
- error: "border-[rgb(var(--nc-accent-3)/0.65)] bg-[rgb(var(--nc-accent-3)/0.18)]"
1320
- };
1321
- function CraftAlert({
1322
- title,
1323
- description,
1324
- variant = "info",
1325
- icon,
1326
- actions,
1327
- tone,
1328
- className,
1329
- ...props
1330
- }) {
1331
- return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
1332
- "div",
1333
- {
1334
- className: cn(
1335
- "rounded-2xl border p-4 text-[rgb(var(--nc-fg))] backdrop-blur-xl",
1336
- variantClasses4[variant],
1337
- className
1338
- ),
1339
- "data-nc-theme": tone,
1340
- ...props,
1341
- children: [
1342
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex items-start gap-3", children: [
1343
- icon && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-1 text-[rgb(var(--nc-fg))]", children: icon }),
1344
- /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-1", children: [
1345
- title && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm font-semibold", children: title }),
1346
- description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description })
1347
- ] })
1348
- ] }),
1349
- actions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "mt-3 flex flex-wrap gap-2", children: actions })
1350
- ]
1351
- }
1352
- );
1353
- }
1354
-
1355
- // src/components/craft-error-state.tsx
1356
- var import_jsx_runtime24 = require("react/jsx-runtime");
1357
- function CraftErrorState({
1358
- title = "Something went wrong",
1359
- description = "Try again or check your connection.",
1360
- actionLabel = "Retry",
1361
- onAction,
1362
- action,
1363
- tone,
1364
- className,
1365
- ...props
1366
- }) {
1367
- return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
1368
- "div",
1369
- {
1370
- className: cn(
1371
- "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",
1372
- className
1373
- ),
1374
- "data-nc-theme": tone,
1375
- ...props,
1376
- children: [
1377
- /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "space-y-2", children: [
1378
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h3", { className: "text-lg font-semibold", children: title }),
1379
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: description })
1380
- ] }),
1381
- /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-4", children: action != null ? action : onAction && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CraftButton, { size: "sm", onClick: onAction, children: actionLabel }) })
1382
- ]
1383
- }
1384
- );
1385
- }
1386
-
1387
- // src/components/craft-loading-state.tsx
1388
- var import_jsx_runtime25 = require("react/jsx-runtime");
1389
- var sizeClasses2 = {
1390
- sm: "h-4 w-4 border-2",
1391
- md: "h-6 w-6 border-2",
1392
- lg: "h-8 w-8 border-[3px]"
1393
- };
1394
- function CraftLoadingState({
1395
- label = "Loading...",
1396
- size = "md",
1397
- tone,
1398
- className,
1399
- ...props
1400
- }) {
1401
- return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
1402
- "div",
1403
- {
1404
- className: cn("flex items-center gap-3 text-[rgb(var(--nc-fg))]", className),
1405
- "data-nc-theme": tone,
1406
- ...props,
1407
- children: [
1408
- /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
1409
- "span",
1410
- {
1411
- className: cn(
1412
- "inline-block animate-spin rounded-full border-[rgb(var(--nc-accent-1)/0.25)] border-t-[rgb(var(--nc-accent-1))]",
1413
- sizeClasses2[size]
1414
- ),
1415
- "aria-hidden": "true"
1416
- }
1417
- ),
1418
- label && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: label })
1419
- ]
1420
- }
1421
- );
1422
- }
1423
-
1424
- // src/components/craft-popover.tsx
1425
- var React16 = __toESM(require("react"), 1);
1426
- var import_jsx_runtime26 = require("react/jsx-runtime");
1427
- var alignClasses = {
1428
- start: "left-0",
1429
- center: "left-1/2 -translate-x-1/2",
1430
- end: "right-0"
1431
- };
1432
- function CraftPopover({
1433
- open,
1434
- defaultOpen = false,
1435
- onOpenChange,
1436
- trigger,
1437
- content,
1438
- align = "start",
1439
- sideOffset = 10,
1440
- tone,
1441
- className,
1442
- contentClassName
1443
- }) {
1444
- const [uncontrolledOpen, setUncontrolledOpen] = React16.useState(defaultOpen);
1445
- const isControlled = typeof open === "boolean";
1446
- const isOpen = isControlled ? open : uncontrolledOpen;
1447
- const rootRef = React16.useRef(null);
1448
- const setOpen = React16.useCallback(
1449
- (next) => {
1450
- if (!isControlled) setUncontrolledOpen(next);
1451
- onOpenChange == null ? void 0 : onOpenChange(next);
1452
- },
1453
- [isControlled, onOpenChange]
1454
- );
1455
- React16.useEffect(() => {
1456
- if (!isOpen) return;
1457
- const handleClick = (event) => {
1458
- if (!rootRef.current) return;
1459
- if (!rootRef.current.contains(event.target)) setOpen(false);
1460
- };
1461
- const handleKey = (event) => {
1462
- if (event.key === "Escape") setOpen(false);
1463
- };
1464
- document.addEventListener("mousedown", handleClick);
1465
- document.addEventListener("keydown", handleKey);
1466
- return () => {
1467
- document.removeEventListener("mousedown", handleClick);
1468
- document.removeEventListener("keydown", handleKey);
1469
- };
1470
- }, [isOpen, setOpen]);
1471
- const triggerNode = React16.isValidElement(trigger) ? React16.cloneElement(trigger, {
1472
- onClick: (event) => {
1473
- const handler = trigger.props.onClick;
1474
- handler == null ? void 0 : handler(event);
1475
- if (!event.defaultPrevented) setOpen(!isOpen);
1476
- },
1477
- "aria-expanded": isOpen,
1478
- "aria-haspopup": "dialog"
1479
- }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1480
- "button",
1481
- {
1482
- type: "button",
1483
- onClick: () => setOpen(!isOpen),
1484
- className: "inline-flex",
1485
- "aria-expanded": isOpen,
1486
- "aria-haspopup": "dialog",
1487
- children: trigger
1488
- }
1489
- );
1490
- return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("relative inline-flex", className), ref: rootRef, children: [
1491
- triggerNode,
1492
- isOpen && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
1493
- "div",
1494
- {
1495
- className: cn(
1496
- "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",
1497
- alignClasses[align],
1498
- contentClassName
1499
- ),
1500
- style: { marginTop: sideOffset },
1501
- role: "dialog",
1502
- "data-nc-theme": tone,
1503
- children: content
1504
- }
1505
- )
1506
- ] });
1507
- }
1508
-
1509
- // src/components/craft-dropdown-menu.tsx
1510
- var React17 = __toESM(require("react"), 1);
1511
- var import_jsx_runtime27 = require("react/jsx-runtime");
1512
- function CraftDropdownMenu({
1513
- trigger,
1514
- items = [],
1515
- content,
1516
- open,
1517
- defaultOpen = false,
1518
- onOpenChange,
1519
- align = "end",
1520
- tone,
1521
- className,
1522
- menuClassName
1523
- }) {
1524
- const [uncontrolledOpen, setUncontrolledOpen] = React17.useState(defaultOpen);
1525
- const isControlled = typeof open === "boolean";
1526
- const isOpen = isControlled ? open : uncontrolledOpen;
1527
- const setOpen = React17.useCallback(
1528
- (next) => {
1529
- if (!isControlled) setUncontrolledOpen(next);
1530
- onOpenChange == null ? void 0 : onOpenChange(next);
1531
- },
1532
- [isControlled, onOpenChange]
1533
- );
1534
- const menuContent = content != null ? content : items.length ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("space-y-1", menuClassName), role: "menu", children: items.map((item, index) => {
1535
- var _a;
1536
- const key = (_a = item.id) != null ? _a : `${index}-${String(item.label)}`;
1537
- const itemClasses = cn(
1538
- "flex w-full items-start gap-3 rounded-xl px-3 py-2 text-left text-sm transition",
1539
- 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)]"
1540
- );
1541
- const contentNode = /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_jsx_runtime27.Fragment, { children: [
1542
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "mt-0.5", children: item.icon }),
1543
- /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "flex-1", children: [
1544
- /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block font-medium", children: item.label }),
1545
- item.description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: item.description })
1546
- ] })
1547
- ] });
1548
- if (item.href) {
1549
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1550
- "a",
1551
- {
1552
- href: item.href,
1553
- className: itemClasses,
1554
- role: "menuitem",
1555
- onClick: () => {
1556
- var _a2;
1557
- if (item.disabled) return;
1558
- (_a2 = item.onSelect) == null ? void 0 : _a2.call(item);
1559
- setOpen(false);
1560
- },
1561
- children: contentNode
1562
- },
1563
- key
1564
- );
1565
- }
1566
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1567
- "button",
1568
- {
1569
- type: "button",
1570
- className: itemClasses,
1571
- role: "menuitem",
1572
- onClick: () => {
1573
- var _a2;
1574
- if (item.disabled) return;
1575
- (_a2 = item.onSelect) == null ? void 0 : _a2.call(item);
1576
- setOpen(false);
1577
- },
1578
- children: contentNode
1579
- },
1580
- key
1581
- );
1582
- }) }) : null;
1583
- return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
1584
- CraftPopover,
1585
- {
1586
- trigger,
1587
- content: menuContent,
1588
- open: isOpen,
1589
- onOpenChange: setOpen,
1590
- align,
1591
- tone,
1592
- className
1593
- }
1594
- );
1595
- }
1596
-
1597
- // src/components/craft-command-palette.tsx
1598
- var React18 = __toESM(require("react"), 1);
1599
- var import_jsx_runtime28 = require("react/jsx-runtime");
1600
- function CraftCommandPalette({
1601
- items,
1602
- open,
1603
- defaultOpen = false,
1604
- onOpenChange,
1605
- trigger,
1606
- title = "Command Palette",
1607
- placeholder = "Search commands...",
1608
- emptyText = "No results found.",
1609
- tone,
1610
- className
1611
- }) {
1612
- const [uncontrolledOpen, setUncontrolledOpen] = React18.useState(defaultOpen);
1613
- const isControlled = typeof open === "boolean";
1614
- const isOpen = isControlled ? open : uncontrolledOpen;
1615
- const [query, setQuery] = React18.useState("");
1616
- const setOpen = React18.useCallback(
1617
- (next) => {
1618
- if (!isControlled) setUncontrolledOpen(next);
1619
- onOpenChange == null ? void 0 : onOpenChange(next);
1620
- },
1621
- [isControlled, onOpenChange]
1622
- );
1623
- const filtered = React18.useMemo(() => {
1624
- const q = query.trim().toLowerCase();
1625
- if (!q) return items;
1626
- return items.filter((item) => {
1627
- var _a, _b;
1628
- const haystack = [
1629
- item.label,
1630
- (_a = item.description) != null ? _a : "",
1631
- ...(_b = item.keywords) != null ? _b : []
1632
- ].join(" ").toLowerCase();
1633
- return haystack.includes(q);
1634
- });
1635
- }, [items, query]);
1636
- React18.useEffect(() => {
1637
- if (!isOpen) setQuery("");
1638
- }, [isOpen]);
1639
- return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1640
- CraftModal,
1641
- {
1642
- open: isOpen,
1643
- onOpenChange: setOpen,
1644
- trigger,
1645
- title,
1646
- tone,
1647
- className: cn("max-w-xl", className),
1648
- children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "space-y-4", children: [
1649
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
1650
- CraftInput,
1651
- {
1652
- type: "search",
1653
- placeholder,
1654
- value: query,
1655
- onChange: (event) => setQuery(event.target.value)
1656
- }
1657
- ),
1658
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "space-y-2", children: [
1659
- filtered.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("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 }),
1660
- filtered.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
1661
- "button",
1662
- {
1663
- type: "button",
1664
- disabled: item.disabled,
1665
- onClick: () => {
1666
- var _a;
1667
- if (item.disabled) return;
1668
- (_a = item.onSelect) == null ? void 0 : _a.call(item);
1669
- setOpen(false);
1670
- },
1671
- className: cn(
1672
- "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",
1673
- item.disabled ? "cursor-not-allowed opacity-60" : "hover:bg-[rgb(var(--nc-surface)/0.16)]"
1674
- ),
1675
- children: [
1676
- item.icon && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "mt-1", children: item.icon }),
1677
- /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("span", { children: [
1678
- /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "block text-sm font-semibold", children: item.label }),
1679
- item.description && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: item.description })
1680
- ] })
1681
- ]
1682
- },
1683
- item.id
1684
- ))
1685
- ] })
1686
- ] })
1687
- }
1688
- );
1689
- }
1690
-
1691
- // src/components/craft-link.tsx
1692
- var import_link = __toESM(require("next/link"), 1);
1693
- var import_jsx_runtime29 = require("react/jsx-runtime");
1694
- var variantClasses5 = {
1695
- default: "text-[rgb(var(--nc-accent-1))] hover:text-[rgb(var(--nc-accent-1))]",
1696
- muted: "text-[rgb(var(--nc-fg-muted))] hover:text-[rgb(var(--nc-fg))]",
1697
- 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)]",
1698
- 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)]"
1699
- };
1700
- function CraftLink({
1701
- variant = "default",
1702
- underline = false,
1703
- tone,
1704
- className,
1705
- children,
1706
- ...props
1707
- }) {
1708
- return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
1709
- import_link.default,
1710
- {
1711
- className: cn(
1712
- "transition-colors",
1713
- variantClasses5[variant],
1714
- underline && "underline underline-offset-4",
1715
- className
1716
- ),
1717
- "data-nc-theme": tone,
1718
- ...props,
1719
- children
1720
- }
1721
- );
1722
- }
1723
-
1724
- // src/components/craft-stat-card.tsx
1725
- var import_jsx_runtime30 = require("react/jsx-runtime");
1726
- var trendClasses = {
1727
- up: "text-emerald-300",
1728
- down: "text-rose-300",
1729
- neutral: "text-[rgb(var(--nc-fg-muted))]"
1730
- };
1731
- function CraftStatCard({
1732
- label,
1733
- value,
1734
- delta,
1735
- trend = "neutral",
1736
- icon,
1737
- footer,
1738
- tone,
1739
- className,
1740
- ...props
1741
- }) {
1742
- return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
1743
- CraftCard,
1744
- {
1745
- className: cn("space-y-3", className),
1746
- tone,
1747
- ...props,
1748
- children: [
1749
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between", children: [
1750
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-sm text-[rgb(var(--nc-fg-muted))]", children: label }),
1751
- icon && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "text-[rgb(var(--nc-fg-soft))]", children: icon })
1752
- ] }),
1753
- /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("p", { className: "text-3xl font-semibold", children: value }),
1754
- /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { className: "flex items-center justify-between text-xs", children: [
1755
- delta && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: trendClasses[trend], children: delta }),
1756
- footer && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "text-[rgb(var(--nc-fg-muted))]", children: footer })
1757
- ] })
1758
- ]
1759
- }
1760
- );
1761
- }
1762
-
1763
- // src/components/craft-icon.tsx
1764
- var React19 = __toESM(require("react"), 1);
1765
- var import_dynamic = require("lucide-react/dynamic");
1766
- var import_jsx_runtime31 = require("react/jsx-runtime");
1767
- var CraftIconContext = React19.createContext(null);
1768
- function CraftIconProvider({ icons, children }) {
1769
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CraftIconContext.Provider, { value: icons, children });
1770
- }
1771
- function CraftIcon({
1772
- name,
1773
- className,
1774
- "aria-label": ariaLabel,
1775
- icons,
1776
- useLucide = true
1777
- }) {
1778
- const contextRegistry = React19.useContext(CraftIconContext);
1779
- const registry = icons != null ? icons : contextRegistry;
1780
- const icon = registry == null ? void 0 : registry[name];
1781
- if (!icon) {
1782
- if (!useLucide) return null;
1783
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
1784
- import_dynamic.DynamicIcon,
1785
- {
1786
- name,
1787
- className,
1788
- "aria-hidden": ariaLabel ? void 0 : true,
1789
- "aria-label": ariaLabel
1790
- }
1791
- );
1792
- }
1793
- if (React19.isValidElement(icon)) {
1794
- return React19.cloneElement(icon, {
1795
- className: cn(icon.props.className, className),
1796
- "aria-hidden": ariaLabel ? void 0 : true,
1797
- "aria-label": ariaLabel
1798
- });
1799
- }
1800
- return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className, "aria-label": ariaLabel, children: icon });
1801
- }
56
+ var import_craft_button = require("@/components/craft-button");
57
+ var import_glass_card = require("@/components/glass-card");
58
+ var import_craft_card = require("@/components/craft-card");
59
+ var import_craft_input = require("@/components/craft-input");
60
+ var import_craft_textarea = require("@/components/craft-textarea");
61
+ var import_craft_select = require("@/components/craft-select");
62
+ var import_craft_checkbox = require("@/components/craft-checkbox");
63
+ var import_craft_switch = require("@/components/craft-switch");
64
+ var import_craft_badge = require("@/components/craft-badge");
65
+ var import_craft_modal = require("@/components/craft-modal");
66
+ var import_craft_drawer = require("@/components/craft-drawer");
67
+ var import_craft_tabs = require("@/components/craft-tabs");
68
+ var import_craft_tooltip = require("@/components/craft-tooltip");
69
+ var import_craft_toast = require("@/components/craft-toast");
70
+ var import_craft_skeleton = require("@/components/craft-skeleton");
71
+ var import_craft_empty_state = require("@/components/craft-empty-state");
72
+ var import_craft_date_picker = require("@/components/craft-date-picker");
73
+ var import_craft_number_input = require("@/components/craft-number-input");
74
+ var import_craft_currency_input = require("@/components/craft-currency-input");
75
+ var import_craft_submit_button = require("@/components/craft-submit-button");
76
+ var import_craft_confirm_dialog = require("@/components/craft-confirm-dialog");
77
+ var import_craft_create_edit_drawer = require("@/components/craft-create-edit-drawer");
78
+ var import_craft_alert = require("@/components/craft-alert");
79
+ var import_craft_error_state = require("@/components/craft-error-state");
80
+ var import_craft_loading_state = require("@/components/craft-loading-state");
81
+ var import_craft_popover = require("@/components/craft-popover");
82
+ var import_craft_dropdown_menu = require("@/components/craft-dropdown-menu");
83
+ var import_craft_command_palette = require("@/components/craft-command-palette");
84
+ var import_craft_link = require("@/components/craft-link");
85
+ var import_craft_stat_card = require("@/components/craft-stat-card");
86
+ var import_craft_icon = require("@/components/craft-icon");
1802
87
  // Annotate the CommonJS export names for ESM import in node:
1803
88
  0 && (module.exports = {
1804
89
  CraftAlert,