@jameskabz/nextcraft-ui 0.6.2 → 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 +8 -4
  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,671 +0,0 @@
1
- import {
2
- cn
3
- } from "./chunk-VQ6T3HIX.js";
4
-
5
- // src/components/craft-button.tsx
6
- import { jsx } from "react/jsx-runtime";
7
- var sizeClasses = {
8
- sm: "h-9 px-4 text-xs",
9
- md: "h-11 px-6 text-sm",
10
- lg: "h-13 px-8 text-base"
11
- };
12
- var variantClasses = {
13
- 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]",
14
- 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)]",
15
- 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)]",
16
- 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]"
17
- };
18
- function CraftButton({
19
- className,
20
- variant = "solid",
21
- size = "md",
22
- glow = true,
23
- tone,
24
- disabled,
25
- ...props
26
- }) {
27
- return /* @__PURE__ */ jsx(
28
- "button",
29
- {
30
- className: cn(
31
- "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",
32
- sizeClasses[size],
33
- variantClasses[variant],
34
- 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" : "",
35
- className
36
- ),
37
- "data-nc-theme": tone,
38
- disabled,
39
- ...props
40
- }
41
- );
42
- }
43
-
44
- // src/components/craft-textarea.tsx
45
- import * as React from "react";
46
- import { jsx as jsx2 } from "react/jsx-runtime";
47
- var CraftTextarea = React.forwardRef(
48
- ({ className, tone, rows = 4, ...props }, ref) => {
49
- return /* @__PURE__ */ jsx2("div", { className: "relative w-full", "data-nc-theme": tone, children: /* @__PURE__ */ jsx2(
50
- "textarea",
51
- {
52
- ref,
53
- rows,
54
- className: cn(
55
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
56
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
57
- "focus:outline-none focus:ring-4",
58
- "transition-all duration-300",
59
- "disabled:opacity-50 disabled:cursor-not-allowed",
60
- "border-[rgb(var(--nc-border)/0.35)]",
61
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
62
- "placeholder:text-[rgb(var(--nc-fg-soft))]",
63
- "px-5 py-3 text-base",
64
- className
65
- ),
66
- style: {
67
- "--glow-color": "rgb(var(--nc-accent-1) / 0.5)"
68
- },
69
- ...props
70
- }
71
- ) });
72
- }
73
- );
74
- CraftTextarea.displayName = "CraftTextarea";
75
-
76
- // src/components/craft-select.tsx
77
- import * as React2 from "react";
78
- import { jsx as jsx3, jsxs } from "react/jsx-runtime";
79
- var CraftSelect = React2.forwardRef(
80
- ({ className, tone, children, ...props }, ref) => {
81
- return /* @__PURE__ */ jsxs("div", { className: "relative w-full", "data-nc-theme": tone, children: [
82
- /* @__PURE__ */ jsx3(
83
- "select",
84
- {
85
- ref,
86
- className: cn(
87
- "w-full appearance-none rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
88
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
89
- "focus:outline-none focus:ring-4",
90
- "transition-all duration-300",
91
- "disabled:opacity-50 disabled:cursor-not-allowed",
92
- "border-[rgb(var(--nc-border)/0.35)]",
93
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
94
- "px-5 py-3 pr-10 text-base",
95
- className
96
- ),
97
- ...props,
98
- children
99
- }
100
- ),
101
- /* @__PURE__ */ jsx3(
102
- "svg",
103
- {
104
- className: "pointer-events-none absolute right-4 top-1/2 h-4 w-4 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]",
105
- viewBox: "0 0 20 20",
106
- fill: "currentColor",
107
- "aria-hidden": "true",
108
- children: /* @__PURE__ */ jsx3(
109
- "path",
110
- {
111
- fillRule: "evenodd",
112
- 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",
113
- clipRule: "evenodd"
114
- }
115
- )
116
- }
117
- )
118
- ] });
119
- }
120
- );
121
- CraftSelect.displayName = "CraftSelect";
122
-
123
- // src/components/craft-checkbox.tsx
124
- import * as React3 from "react";
125
- import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
126
- var CraftCheckbox = React3.forwardRef(
127
- ({ className, tone, label, description, ...props }, ref) => {
128
- return /* @__PURE__ */ jsxs2(
129
- "label",
130
- {
131
- className: cn(
132
- "flex items-start gap-3 text-sm text-[rgb(var(--nc-fg))]",
133
- props.disabled ? "opacity-60" : "cursor-pointer",
134
- className
135
- ),
136
- "data-nc-theme": tone,
137
- children: [
138
- /* @__PURE__ */ jsxs2("span", { className: "relative mt-0.5", children: [
139
- /* @__PURE__ */ jsx4(
140
- "input",
141
- {
142
- ref,
143
- type: "checkbox",
144
- className: "peer sr-only",
145
- ...props
146
- }
147
- ),
148
- /* @__PURE__ */ jsx4(
149
- "span",
150
- {
151
- className: cn(
152
- "flex h-5 w-5 items-center justify-center rounded-md border-2",
153
- "border-[rgb(var(--nc-border)/0.45)] bg-[rgb(var(--nc-surface)/0.08)]",
154
- "transition-all duration-200",
155
- "peer-checked:border-[rgb(var(--nc-accent-1))] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]",
156
- "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]"
157
- ),
158
- children: /* @__PURE__ */ jsx4(
159
- "svg",
160
- {
161
- className: "h-3 w-3 text-[rgb(var(--nc-fg))] opacity-0 transition-opacity peer-checked:opacity-100",
162
- viewBox: "0 0 20 20",
163
- fill: "currentColor",
164
- "aria-hidden": "true",
165
- children: /* @__PURE__ */ jsx4(
166
- "path",
167
- {
168
- fillRule: "evenodd",
169
- 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",
170
- clipRule: "evenodd"
171
- }
172
- )
173
- }
174
- )
175
- }
176
- )
177
- ] }),
178
- /* @__PURE__ */ jsxs2("span", { className: "space-y-1", children: [
179
- label && /* @__PURE__ */ jsx4("span", { className: "block font-medium text-[rgb(var(--nc-fg))]", children: label }),
180
- description && /* @__PURE__ */ jsx4("span", { className: "block text-xs text-[rgb(var(--nc-fg-muted))]", children: description })
181
- ] })
182
- ]
183
- }
184
- );
185
- }
186
- );
187
- CraftCheckbox.displayName = "CraftCheckbox";
188
-
189
- // src/components/craft-switch.tsx
190
- import * as React4 from "react";
191
- import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
192
- var CraftSwitch = React4.forwardRef(
193
- ({ className, tone, label, ...props }, ref) => {
194
- return /* @__PURE__ */ jsxs3(
195
- "label",
196
- {
197
- className: cn(
198
- "inline-flex items-center gap-3 text-sm text-[rgb(var(--nc-fg))]",
199
- props.disabled ? "opacity-60" : "cursor-pointer",
200
- className
201
- ),
202
- "data-nc-theme": tone,
203
- children: [
204
- /* @__PURE__ */ jsx5("input", { ref, type: "checkbox", className: "peer sr-only", ...props }),
205
- /* @__PURE__ */ jsx5(
206
- "span",
207
- {
208
- className: cn(
209
- "relative h-6 w-11 rounded-full border-2 border-[rgb(var(--nc-border)/0.35)] bg-[rgb(var(--nc-surface)/0.08)]",
210
- "transition-all duration-200",
211
- "peer-focus-visible:ring-2 peer-focus-visible:ring-[rgb(var(--nc-accent-1)/0.5)]",
212
- "peer-checked:border-[rgb(var(--nc-accent-1)/0.6)] peer-checked:bg-[rgb(var(--nc-accent-1)/0.25)]"
213
- ),
214
- children: /* @__PURE__ */ jsx5(
215
- "span",
216
- {
217
- className: cn(
218
- "absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-[rgb(var(--nc-surface-muted)/0.9)]",
219
- "transition-all duration-200",
220
- "peer-checked:translate-x-5 peer-checked:bg-[rgb(var(--nc-surface-muted))]"
221
- )
222
- }
223
- )
224
- }
225
- ),
226
- label && /* @__PURE__ */ jsx5("span", { children: label })
227
- ]
228
- }
229
- );
230
- }
231
- );
232
- CraftSwitch.displayName = "CraftSwitch";
233
-
234
- // src/components/craft-modal.tsx
235
- import * as React5 from "react";
236
- import { createPortal } from "react-dom";
237
- import { Fragment, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
238
- var FOCUSABLE_SELECTORS = [
239
- "a[href]",
240
- "button:not([disabled])",
241
- "textarea:not([disabled])",
242
- "input:not([disabled])",
243
- "select:not([disabled])",
244
- "[tabindex]:not([tabindex='-1'])"
245
- ].join(",");
246
- function useFocusTrap(active) {
247
- const ref = React5.useRef(null);
248
- React5.useEffect(() => {
249
- if (!active || !ref.current) return;
250
- const root = ref.current;
251
- const getFocusable = () => Array.from(root.querySelectorAll(FOCUSABLE_SELECTORS));
252
- const focusables = getFocusable();
253
- if (focusables.length) {
254
- focusables[0].focus();
255
- } else {
256
- root.focus();
257
- }
258
- const handleKeyDown = (event) => {
259
- if (event.key !== "Tab") return;
260
- const items = getFocusable();
261
- if (!items.length) return;
262
- const first = items[0];
263
- const last = items[items.length - 1];
264
- const activeEl = document.activeElement;
265
- if (event.shiftKey && activeEl === first) {
266
- event.preventDefault();
267
- last.focus();
268
- } else if (!event.shiftKey && activeEl === last) {
269
- event.preventDefault();
270
- first.focus();
271
- }
272
- };
273
- root.addEventListener("keydown", handleKeyDown);
274
- return () => root.removeEventListener("keydown", handleKeyDown);
275
- }, [active]);
276
- return ref;
277
- }
278
- function CraftModal({
279
- open,
280
- defaultOpen = false,
281
- onOpenChange,
282
- tone,
283
- title,
284
- description,
285
- children,
286
- trigger,
287
- footer,
288
- className
289
- }) {
290
- const [uncontrolledOpen, setUncontrolledOpen] = React5.useState(defaultOpen);
291
- const isControlled = typeof open === "boolean";
292
- const isOpen = isControlled ? open : uncontrolledOpen;
293
- const setOpen = React5.useCallback(
294
- (next) => {
295
- if (!isControlled) {
296
- setUncontrolledOpen(next);
297
- }
298
- onOpenChange == null ? void 0 : onOpenChange(next);
299
- },
300
- [isControlled, onOpenChange]
301
- );
302
- React5.useEffect(() => {
303
- if (!isOpen) return;
304
- const handleKey = (event) => {
305
- if (event.key === "Escape") setOpen(false);
306
- };
307
- document.addEventListener("keydown", handleKey);
308
- return () => document.removeEventListener("keydown", handleKey);
309
- }, [isOpen, setOpen]);
310
- const ref = useFocusTrap(isOpen);
311
- const content = isOpen ? /* @__PURE__ */ jsxs4("div", { className: "fixed inset-0 z-50 flex items-center justify-center px-4 py-8", children: [
312
- /* @__PURE__ */ jsx6(
313
- "div",
314
- {
315
- className: "absolute inset-0 backdrop-blur-sm",
316
- onClick: () => setOpen(false)
317
- }
318
- ),
319
- /* @__PURE__ */ jsxs4(
320
- "div",
321
- {
322
- ref,
323
- tabIndex: -1,
324
- className: cn(
325
- "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",
326
- "max-h-[calc(100vh-1rem)] overflow-y-auto",
327
- className
328
- ),
329
- "data-nc-theme": tone,
330
- children: [
331
- /* @__PURE__ */ jsxs4("div", { className: "flex items-start justify-between gap-4", children: [
332
- /* @__PURE__ */ jsxs4("div", { className: "space-y-1", children: [
333
- title && /* @__PURE__ */ jsx6("h3", { className: "text-2xl font-semibold", children: title }),
334
- description && /* @__PURE__ */ jsx6("p", { className: "text-[rgb(var(--nc-fg-muted))]", children: description })
335
- ] }),
336
- /* @__PURE__ */ jsx6(
337
- "button",
338
- {
339
- 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))]",
340
- onClick: () => setOpen(false),
341
- "aria-label": "Close",
342
- children: /* @__PURE__ */ jsx6("svg", { viewBox: "0 0 20 20", className: "h-4 w-4", fill: "currentColor", children: /* @__PURE__ */ jsx6("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" }) })
343
- }
344
- )
345
- ] }),
346
- /* @__PURE__ */ jsx6("div", { className: "mt-5 space-y-4", children }),
347
- footer && /* @__PURE__ */ jsx6("div", { className: "mt-6", children: footer })
348
- ]
349
- }
350
- )
351
- ] }) : null;
352
- return /* @__PURE__ */ jsxs4(Fragment, { children: [
353
- trigger && /* @__PURE__ */ jsx6(
354
- "span",
355
- {
356
- onClick: () => setOpen(true),
357
- onKeyDown: (event) => {
358
- if (event.key === "Enter" || event.key === " ") setOpen(true);
359
- },
360
- role: "button",
361
- tabIndex: 0,
362
- className: "inline-flex",
363
- children: trigger
364
- }
365
- ),
366
- typeof document !== "undefined" && content ? createPortal(content, document.body) : content
367
- ] });
368
- }
369
-
370
- // src/components/craft-date-picker.tsx
371
- import * as React6 from "react";
372
- import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
373
- var WEEK_DAYS = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];
374
- function formatDate(date) {
375
- const year = date.getFullYear();
376
- const month = `${date.getMonth() + 1}`.padStart(2, "0");
377
- const day = `${date.getDate()}`.padStart(2, "0");
378
- return `${year}-${month}-${day}`;
379
- }
380
- function parseDate(value) {
381
- if (!value) return null;
382
- const [year, month, day] = value.split("-").map(Number);
383
- if (!year || !month || !day) return null;
384
- return new Date(year, month - 1, day);
385
- }
386
- function isSameDay(a, b) {
387
- return a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
388
- }
389
- function isOutsideRange(date, min, max) {
390
- const minDate = parseDate(min);
391
- const maxDate = parseDate(max);
392
- if (minDate && date < minDate) return true;
393
- if (maxDate && date > maxDate) return true;
394
- return false;
395
- }
396
- function CraftDatePicker({
397
- value,
398
- defaultValue,
399
- onChange,
400
- tone,
401
- min,
402
- max,
403
- placeholder = "Select date",
404
- className
405
- }) {
406
- const [open, setOpen] = React6.useState(false);
407
- const [uncontrolledValue, setUncontrolledValue] = React6.useState(defaultValue != null ? defaultValue : "");
408
- const isControlled = value !== void 0;
409
- const selectedValue = isControlled ? value != null ? value : "" : uncontrolledValue;
410
- const selectedDate = parseDate(selectedValue);
411
- const initialMonth = selectedDate != null ? selectedDate : /* @__PURE__ */ new Date();
412
- const [viewDate, setViewDate] = React6.useState(initialMonth);
413
- React6.useEffect(() => {
414
- if (selectedDate) setViewDate(selectedDate);
415
- }, [selectedDate]);
416
- const wrapperRef = React6.useRef(null);
417
- React6.useEffect(() => {
418
- if (!open) return;
419
- const handleClick = (event) => {
420
- var _a;
421
- if (!((_a = wrapperRef.current) == null ? void 0 : _a.contains(event.target))) {
422
- setOpen(false);
423
- }
424
- };
425
- const handleKey = (event) => {
426
- if (event.key === "Escape") setOpen(false);
427
- };
428
- document.addEventListener("mousedown", handleClick);
429
- document.addEventListener("keydown", handleKey);
430
- return () => {
431
- document.removeEventListener("mousedown", handleClick);
432
- document.removeEventListener("keydown", handleKey);
433
- };
434
- }, [open]);
435
- const setValue = React6.useCallback(
436
- (next) => {
437
- if (!isControlled) setUncontrolledValue(next);
438
- onChange == null ? void 0 : onChange(next);
439
- },
440
- [isControlled, onChange]
441
- );
442
- const monthStart = new Date(viewDate.getFullYear(), viewDate.getMonth(), 1);
443
- const monthEnd = new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 0);
444
- const startDay = monthStart.getDay();
445
- const daysInMonth = monthEnd.getDate();
446
- const cells = Array.from({ length: startDay + daysInMonth }, (_, i) => {
447
- const dayNumber = i - startDay + 1;
448
- if (dayNumber < 1) return null;
449
- return new Date(viewDate.getFullYear(), viewDate.getMonth(), dayNumber);
450
- });
451
- const handleDaySelect = (date) => {
452
- if (isOutsideRange(date, min, max)) return;
453
- const next = formatDate(date);
454
- setValue(next);
455
- setOpen(false);
456
- };
457
- const handleKeyDown = (event) => {
458
- if (!open) return;
459
- if (!selectedDate) return;
460
- const next = new Date(selectedDate);
461
- if (event.key === "ArrowRight") next.setDate(next.getDate() + 1);
462
- if (event.key === "ArrowLeft") next.setDate(next.getDate() - 1);
463
- if (event.key === "ArrowDown") next.setDate(next.getDate() + 7);
464
- if (event.key === "ArrowUp") next.setDate(next.getDate() - 7);
465
- if (event.key === "Enter") {
466
- event.preventDefault();
467
- handleDaySelect(selectedDate);
468
- return;
469
- }
470
- if (next.getTime() !== selectedDate.getTime()) {
471
- event.preventDefault();
472
- if (!isOutsideRange(next, min, max)) {
473
- setValue(formatDate(next));
474
- setViewDate(next);
475
- }
476
- }
477
- };
478
- return /* @__PURE__ */ jsxs5("div", { className: "relative w-full", "data-nc-theme": tone, ref: wrapperRef, children: [
479
- /* @__PURE__ */ jsxs5(
480
- "button",
481
- {
482
- type: "button",
483
- onClick: () => setOpen((prev) => !prev),
484
- className: cn(
485
- "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",
486
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
487
- "transition-all duration-300",
488
- "border-[rgb(var(--nc-border)/0.35)]",
489
- "focus:outline-none focus:ring-4 focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
490
- className
491
- ),
492
- children: [
493
- /* @__PURE__ */ jsx7("span", { className: selectedValue ? "text-[rgb(var(--nc-fg))]" : "text-[rgb(var(--nc-fg-soft))]", children: selectedValue || placeholder }),
494
- /* @__PURE__ */ jsx7("svg", { className: "h-4 w-4 text-[rgb(var(--nc-fg-soft))]", viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx7("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" }) })
495
- ]
496
- }
497
- ),
498
- open && /* @__PURE__ */ jsxs5(
499
- "div",
500
- {
501
- className: cn(
502
- "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"
503
- ),
504
- onKeyDown: handleKeyDown,
505
- tabIndex: -1,
506
- children: [
507
- /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between", children: [
508
- /* @__PURE__ */ jsx7(
509
- "button",
510
- {
511
- type: "button",
512
- 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))]",
513
- onClick: () => setViewDate(
514
- new Date(viewDate.getFullYear(), viewDate.getMonth() - 1, 1)
515
- ),
516
- children: "Prev"
517
- }
518
- ),
519
- /* @__PURE__ */ jsx7("div", { className: "text-sm font-semibold", children: viewDate.toLocaleString(void 0, { month: "long", year: "numeric" }) }),
520
- /* @__PURE__ */ jsx7(
521
- "button",
522
- {
523
- type: "button",
524
- 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))]",
525
- onClick: () => setViewDate(
526
- new Date(viewDate.getFullYear(), viewDate.getMonth() + 1, 1)
527
- ),
528
- children: "Next"
529
- }
530
- )
531
- ] }),
532
- /* @__PURE__ */ jsx7("div", { className: "mt-4 grid grid-cols-7 gap-2 text-xs text-[rgb(var(--nc-fg-muted))]", children: WEEK_DAYS.map((day) => /* @__PURE__ */ jsx7("div", { className: "text-center", children: day }, day)) }),
533
- /* @__PURE__ */ jsx7("div", { className: "mt-2 grid grid-cols-7 gap-2", children: cells.map((date, index) => {
534
- if (!date) return /* @__PURE__ */ jsx7("div", {}, `empty-${index}`);
535
- const disabled = isOutsideRange(date, min, max);
536
- const selected = selectedDate && isSameDay(date, selectedDate);
537
- return /* @__PURE__ */ jsx7(
538
- "button",
539
- {
540
- type: "button",
541
- onClick: () => handleDaySelect(date),
542
- disabled,
543
- className: cn(
544
- "rounded-lg py-2 text-sm transition-all",
545
- 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)]",
546
- disabled && "opacity-40 hover:bg-transparent"
547
- ),
548
- children: date.getDate()
549
- },
550
- date.toISOString()
551
- );
552
- }) })
553
- ]
554
- }
555
- )
556
- ] });
557
- }
558
-
559
- // src/components/craft-number-input.tsx
560
- import * as React7 from "react";
561
- import { jsx as jsx8 } from "react/jsx-runtime";
562
- var CraftNumberInput = React7.forwardRef(({ className, tone, ...props }, ref) => {
563
- return /* @__PURE__ */ jsx8("div", { className: "relative w-full", "data-nc-theme": tone, children: /* @__PURE__ */ jsx8(
564
- "input",
565
- {
566
- ref,
567
- type: "number",
568
- className: cn(
569
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
570
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
571
- "focus:outline-none focus:ring-4",
572
- "transition-all duration-300",
573
- "disabled:opacity-50 disabled:cursor-not-allowed",
574
- "border-[rgb(var(--nc-border)/0.35)]",
575
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
576
- "px-5 py-3 text-base",
577
- className
578
- ),
579
- ...props
580
- }
581
- ) });
582
- });
583
- CraftNumberInput.displayName = "CraftNumberInput";
584
-
585
- // src/components/craft-currency-input.tsx
586
- import * as React8 from "react";
587
- import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
588
- var CraftCurrencyInput = React8.forwardRef(({ className, tone, currencySymbol = "$", ...props }, ref) => {
589
- return /* @__PURE__ */ jsxs6("div", { className: "relative w-full", "data-nc-theme": tone, children: [
590
- /* @__PURE__ */ jsx9("span", { className: "pointer-events-none absolute left-4 top-1/2 -translate-y-1/2 text-[rgb(var(--nc-fg-soft))]", children: currencySymbol }),
591
- /* @__PURE__ */ jsx9(
592
- "input",
593
- {
594
- ref,
595
- type: "text",
596
- inputMode: "decimal",
597
- className: cn(
598
- "w-full rounded-2xl border-2 bg-[rgb(var(--nc-surface)/0.08)] text-[rgb(var(--nc-fg))] backdrop-blur-xl",
599
- "shadow-[inset_0_2px_8px_rgba(0,0,0,0.3)]",
600
- "focus:outline-none focus:ring-4",
601
- "transition-all duration-300",
602
- "disabled:opacity-50 disabled:cursor-not-allowed",
603
- "border-[rgb(var(--nc-border)/0.35)]",
604
- "focus:border-[rgb(var(--nc-accent-1)/0.8)] focus:ring-[rgb(var(--nc-accent-1)/0.3)]",
605
- "placeholder:text-[rgb(var(--nc-fg-soft))]",
606
- "px-5 py-3 pl-9 text-base",
607
- className
608
- ),
609
- ...props
610
- }
611
- )
612
- ] });
613
- });
614
- CraftCurrencyInput.displayName = "CraftCurrencyInput";
615
-
616
- // src/components/craft-submit-button.tsx
617
- import { useFormContext } from "react-hook-form";
618
- import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
619
- function CraftSubmitButton({
620
- className,
621
- tone,
622
- loading,
623
- loadingLabel = "Submitting...",
624
- disableWhenInvalid = true,
625
- disabled,
626
- children,
627
- ...props
628
- }) {
629
- var _a, _b, _c, _d;
630
- const form = useFormContext();
631
- const isSubmitting = (_b = loading != null ? loading : (_a = form == null ? void 0 : form.formState) == null ? void 0 : _a.isSubmitting) != null ? _b : false;
632
- const isValid = (_d = (_c = form == null ? void 0 : form.formState) == null ? void 0 : _c.isValid) != null ? _d : true;
633
- const isDisabled = disabled || isSubmitting || disableWhenInvalid && !isValid;
634
- return /* @__PURE__ */ jsxs7(
635
- "button",
636
- {
637
- type: "submit",
638
- className: cn(
639
- "relative inline-flex items-center justify-center gap-2 rounded-xl px-6 py-2 text-sm font-semibold",
640
- "bg-linear-to-br from-[rgb(var(--nc-accent-1))] via-[rgb(var(--nc-accent-2))] to-[rgb(var(--nc-accent-3))]",
641
- "text-white shadow-[0_12px_30px_rgb(var(--nc-accent-1)/0.35)]",
642
- "transition-all duration-200",
643
- "hover:shadow-[0_16px_36px_rgb(var(--nc-accent-1)/0.5)] hover:scale-[1.02] active:scale-[0.98]",
644
- "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[rgb(var(--nc-accent-1)/0.6)]",
645
- "disabled:opacity-60 disabled:cursor-not-allowed disabled:hover:scale-100",
646
- className
647
- ),
648
- "data-nc-theme": tone,
649
- disabled: isDisabled,
650
- ...props,
651
- children: [
652
- isSubmitting && /* @__PURE__ */ jsx10("span", { className: "inline-flex h-4 w-4 animate-spin rounded-full border-2 border-white/60 border-t-white" }),
653
- /* @__PURE__ */ jsx10("span", { children: isSubmitting ? loadingLabel : children })
654
- ]
655
- }
656
- );
657
- }
658
-
659
- export {
660
- CraftButton,
661
- CraftTextarea,
662
- CraftSelect,
663
- CraftCheckbox,
664
- CraftSwitch,
665
- CraftModal,
666
- CraftDatePicker,
667
- CraftNumberInput,
668
- CraftCurrencyInput,
669
- CraftSubmitButton
670
- };
671
- //# sourceMappingURL=chunk-6F7FN2ZF.js.map