@datum-cloud/datum-ui 0.2.0-alpha.3 → 0.2.0-alpha.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +66 -32
- package/dist/alert/index.mjs +3 -0
- package/dist/alert-BC2Mccfo.mjs +95 -0
- package/dist/autocomplete/index.mjs +7 -0
- package/dist/autocomplete-DZtI97HP.mjs +295 -0
- package/dist/avatar-stack/index.mjs +5 -0
- package/dist/avatar-stack-JCfBlPB9.mjs +80 -0
- package/dist/badge/index.mjs +3 -0
- package/dist/badge-bFgeYceE.mjs +185 -0
- package/dist/breadcrumb/index.mjs +4 -0
- package/dist/breadcrumb-BGYJgom_.mjs +71 -0
- package/dist/button/index.mjs +4 -0
- package/dist/button-AzpnV-WB.mjs +49 -0
- package/dist/button-C1wRfGtT.mjs +230 -0
- package/dist/button-group/index.mjs +5 -0
- package/dist/button-group-C1IB2K5s.mjs +40 -0
- package/dist/calendar/index.mjs +5 -0
- package/dist/calendar-DlIHeWb0.mjs +113 -0
- package/dist/card/index.mjs +4 -0
- package/dist/card-3Kd0VdNf.mjs +63 -0
- package/dist/chart/index.mjs +4 -0
- package/dist/chart-BZqUKpkh.mjs +143 -0
- package/dist/checkbox/index.mjs +4 -0
- package/dist/checkbox-LG1OKTpG.mjs +34 -0
- package/dist/col-lrLMZaTJ.mjs +184 -0
- package/dist/collapsible/index.mjs +3 -0
- package/dist/collapsible-Bt9UYfv3.mjs +9 -0
- package/dist/command/index.mjs +5 -0
- package/dist/command-s0Yv3abE.mjs +86 -0
- package/dist/components/features/date-picker/index.d.ts +3 -0
- package/dist/components/features/date-picker/index.d.ts.map +1 -0
- package/dist/components/features/dropzone/index.d.ts +1 -0
- package/dist/components/features/dropzone/index.d.ts.map +1 -1
- package/dist/components/themes/index.d.ts +1 -1
- package/dist/components/themes/index.d.ts.map +1 -1
- package/dist/components/themes/types.d.ts +0 -2
- package/dist/components/themes/types.d.ts.map +1 -1
- package/dist/date-picker/index.mjs +9 -0
- package/dist/dialog/index.mjs +5 -0
- package/dist/dialog-DXBaT9gA.mjs +86 -0
- package/dist/dialog-bnMMf9GD.mjs +73 -0
- package/dist/dropdown/index.mjs +3 -0
- package/dist/dropdown-DtSa_lqc.mjs +112 -0
- package/dist/dropzone/index.mjs +5 -0
- package/dist/dropzone-BkOnwrS4.mjs +221 -0
- package/dist/empty-content/index.mjs +3 -0
- package/dist/empty-content-BM9rzI13.mjs +196 -0
- package/dist/exports/map.d.ts +3 -0
- package/dist/exports/map.d.ts.map +1 -0
- package/dist/fonts/AllianceNo1-Medium.ttf +0 -0
- package/dist/fonts/AllianceNo1-Regular.ttf +0 -0
- package/dist/fonts/AllianceNo1-SemiBold.ttf +0 -0
- package/dist/form/index.mjs +146 -0
- package/dist/grid/index.mjs +3 -0
- package/dist/hooks/index.mjs +2 -3
- package/dist/hover-card/index.mjs +4 -0
- package/dist/hover-card-CUPfFUqE.mjs +33 -0
- package/dist/icon-wrapper-9ticVbRL.mjs +14 -0
- package/dist/icons/index.mjs +3 -3
- package/dist/index.d.ts +0 -1
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +65 -9
- package/dist/input/index.mjs +5 -0
- package/dist/input-DuyjEKEW.mjs +17 -0
- package/dist/input-fzXBheCN.mjs +17 -0
- package/dist/input-group/index.mjs +7 -0
- package/dist/input-group-CPaFSTEV.mjs +80 -0
- package/dist/input-number/index.mjs +6 -0
- package/dist/input-number-9o62JHRl.mjs +106 -0
- package/dist/input-with-addons/index.mjs +3 -0
- package/dist/input-with-addons-BQn7KCTU.mjs +30 -0
- package/dist/label/index.mjs +4 -0
- package/dist/label-_ste_Re3.mjs +44 -0
- package/dist/link-button-TIF2Zdrk.mjs +36 -0
- package/dist/loader-overlay/index.mjs +3 -0
- package/dist/loader-overlay-DUaQSZQP.mjs +17 -0
- package/dist/map/index.mjs +13 -0
- package/dist/map-WL6jhkSM.mjs +1094 -0
- package/dist/more-actions/index.mjs +5 -0
- package/dist/more-actions-Ch1f6Mh3.mjs +54 -0
- package/dist/nprogress/index.mjs +32 -0
- package/dist/page-title/index.mjs +3 -0
- package/dist/page-title-BJuo81rT.mjs +26 -0
- package/dist/popover/index.mjs +4 -0
- package/dist/popover-SQlKSz6L.mjs +36 -0
- package/dist/radio-group/index.mjs +4 -0
- package/dist/radio-group-Oshv0b-U.mjs +49 -0
- package/dist/select/index.mjs +4 -0
- package/dist/select-DVlEzD2W.mjs +166 -0
- package/dist/separator/index.mjs +4 -0
- package/dist/separator-T2ppyD-8.mjs +18 -0
- package/dist/sheet/index.mjs +5 -0
- package/dist/sheet-BKiCwtNO.mjs +45 -0
- package/dist/sheet-CtnP6gTD.mjs +77 -0
- package/dist/sidebar/index.mjs +11 -0
- package/dist/sidebar-DfqezV8t.mjs +945 -0
- package/dist/skeleton/index.mjs +4 -0
- package/dist/skeleton-vzbxA-DQ.mjs +13 -0
- package/dist/spinner/index.mjs +4 -0
- package/dist/spinner-BE7k2bAD.mjs +16 -0
- package/dist/{icon-wrapper-BgPkifId.mjs → spinner.icon-Bg8zgGh0.mjs} +1 -12
- package/dist/stepper/index.mjs +5 -0
- package/dist/stepper-SWB-u_nM.mjs +323 -0
- package/dist/{style.css → styles.css} +317 -575
- package/dist/styles.mjs +1 -0
- package/dist/switch/index.mjs +4 -0
- package/dist/switch-Calk7Gyw.mjs +32 -0
- package/dist/table/index.mjs +4 -0
- package/dist/table-CsXBcQLI.mjs +68 -0
- package/dist/tabs/index.mjs +3 -0
- package/dist/tabs-D8n-dqnw.mjs +52 -0
- package/dist/tag-input/index.mjs +5 -0
- package/dist/tag-input-Di7SDNbK.mjs +284 -0
- package/dist/task-queue/index.mjs +7 -0
- package/dist/task-queue-dropdown-DW72ikDH.mjs +1356 -0
- package/dist/textarea/index.mjs +5 -0
- package/dist/textarea-CxE3YbC7.mjs +17 -0
- package/dist/textarea-QYRcDEpK.mjs +15 -0
- package/dist/theme/index.mjs +3 -0
- package/dist/{theme.provider-DpFLwtHe.mjs → theme.provider-CzCxEFFh.mjs} +63 -1
- package/dist/to-api-format-C2xjQUcI.mjs +1506 -0
- package/dist/toast/index.mjs +3 -0
- package/dist/tooltip/index.mjs +4 -0
- package/dist/tooltip-Dd3ActSS.mjs +74 -0
- package/dist/typography/index.mjs +3 -0
- package/dist/typography-UA7ZZvgJ.mjs +200 -0
- package/dist/use-copy-to-clipboard-ki-WoTml.mjs +31 -0
- package/dist/use-stepper-BaToCYMs.mjs +2017 -0
- package/dist/{use-copy-to-clipboard-BfrpD6G8.mjs → use-toast-mdn_CqRY.mjs} +34 -27
- package/dist/utils/index.mjs +0 -1
- package/dist/utils-Bfgoe-Gm.mjs +20 -0
- package/dist/visually-hidden/index.mjs +3 -0
- package/dist/visuallyhidden-aaTUk4Yo.mjs +7 -0
- package/package.json +223 -24
- package/dist/components/index.mjs +0 -8
- package/dist/datum.provider-D6VMjSV0.mjs +0 -37
- package/dist/providers/datum.provider.d.ts +0 -20
- package/dist/providers/datum.provider.d.ts.map +0 -1
- package/dist/providers/index.d.ts +0 -3
- package/dist/providers/index.d.ts.map +0 -1
- package/dist/providers/index.mjs +0 -4
- package/dist/theme-script-DHyLk25i.mjs +0 -11128
- /package/dist/{close.icon-chkXPAUC.mjs → close.icon-CMNMoXM_.mjs} +0 -0
- /package/dist/{map-leaflet-imports-OKaoesjZ.mjs → map-leaflet-imports-C4JYls8q.mjs} +0 -0
- /package/dist/{use-debounce-BYB-jPeX.mjs → use-debounce-B6wPrZV8.mjs} +0 -0
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/date-picker/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAA;AACvC,cAAc,sBAAsB,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/dropzone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/features/dropzone/index.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAA;AACpC,OAAO,EAAE,QAAQ,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAA;AAE1E,YAAY,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ClientOnly } from './client-only';
|
|
2
2
|
export { ThemeScript } from './theme-script';
|
|
3
3
|
export { ThemeProvider, useTheme } from './theme.provider';
|
|
4
|
-
export type { Theme, ThemeProviderProps,
|
|
4
|
+
export type { Theme, ThemeProviderProps, UseThemeProps, } from './types';
|
|
5
5
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EACV,KAAK,EACL,kBAAkB,EAClB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/themes/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAC1D,YAAY,EACV,KAAK,EACL,kBAAkB,EAClB,aAAa,GACd,MAAM,SAAS,CAAA"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
export type Theme = 'light' | 'dark' | 'system';
|
|
3
|
-
export type ThemeStyle = 'alpha' | 'default' | 'experimental';
|
|
4
3
|
export type Attribute = 'class' | `data-${string}`;
|
|
5
4
|
export interface ThemeProviderProps {
|
|
6
5
|
children: ReactNode;
|
|
@@ -25,6 +24,5 @@ export interface UseThemeProps {
|
|
|
25
24
|
resolvedTheme?: Theme;
|
|
26
25
|
themes: string[];
|
|
27
26
|
systemTheme?: 'light' | 'dark';
|
|
28
|
-
themeStyle?: ThemeStyle;
|
|
29
27
|
}
|
|
30
28
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE/C,MAAM,MAAM,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/themes/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE/C,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,MAAM,EAAE,CAAA;AAElD,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,SAAS,CAAA;IACnB,YAAY,CAAC,EAAE,KAAK,CAAA;IACpB,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAA;IACjB,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,yBAAyB,CAAC,EAAE,OAAO,CAAA;IACnC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,EAAE,CAAA;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE;QACZ,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KACnB,CAAA;CACF;AAED,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,KAAK,CAAA;IACb,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,KAAK,KAAK,CAAC,KAAK,IAAI,CAAA;IAC5D,WAAW,CAAC,EAAE,KAAK,CAAA;IACnB,aAAa,CAAC,EAAE,KAAK,CAAA;IACrB,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;CAC/B"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import "../utils-Bfgoe-Gm.mjs";
|
|
2
|
+
import "../separator-T2ppyD-8.mjs";
|
|
3
|
+
import "../button-AzpnV-WB.mjs";
|
|
4
|
+
import "../input-DuyjEKEW.mjs";
|
|
5
|
+
import "../popover-SQlKSz6L.mjs";
|
|
6
|
+
import "../select-DVlEzD2W.mjs";
|
|
7
|
+
import { C as utcToLocalInputString, S as utcStringToZonedDate, T as CalendarDatePicker, _ as getBrowserTimezone, a as formatTimeRangeDisplay, b as getTimezoneOffset, c as getPresetByKey, d as TimezoneSelector, f as QuickRangesPanel, g as formatUtcForDisplay, h as formatTimezoneLabel, i as formatSingleTimeDisplay, l as getPresetByShortcut, m as createTimezoneOption, n as TimeRangePicker, o as DEFAULT_PRESETS, p as CustomRangePanel, r as formatDateForInput, s as getDefaultPreset, t as toApiTimeRange, u as getPresetRange, v as getDefaultTimezoneOptions, w as zonedDateToUtcString, x as localInputStringToUtc, y as getShortTimezoneDisplay } from "../to-api-format-C2xjQUcI.mjs";
|
|
8
|
+
|
|
9
|
+
export { CustomRangePanel as AbsoluteRangePanel, CustomRangePanel, CalendarDatePicker, DEFAULT_PRESETS, QuickRangesPanel, TimeRangePicker, TimezoneSelector, createTimezoneOption, formatDateForInput, formatSingleTimeDisplay, formatTimeRangeDisplay, formatTimezoneLabel, formatUtcForDisplay, getBrowserTimezone, getDefaultPreset, getDefaultTimezoneOptions, getPresetByKey, getPresetByShortcut, getPresetRange, getShortTimezoneDisplay, getTimezoneOffset, localInputStringToUtc, toApiTimeRange, utcStringToZonedDate, utcToLocalInputString, zonedDateToUtcString };
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { t as cn } from "./utils-Bfgoe-Gm.mjs";
|
|
2
|
+
import { XIcon } from "lucide-react";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
6
|
+
|
|
7
|
+
//#region ../shadcn/ui/dialog.tsx
|
|
8
|
+
const Dialog = ({ ...props }) => {
|
|
9
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
|
|
10
|
+
"data-slot": "dialog",
|
|
11
|
+
...props
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
const DialogTrigger = ({ ...props }) => {
|
|
15
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, {
|
|
16
|
+
"data-slot": "dialog-trigger",
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
};
|
|
20
|
+
const DialogPortal = ({ ...props }) => {
|
|
21
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
|
|
22
|
+
"data-slot": "dialog-portal",
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
};
|
|
26
|
+
const DialogClose = ({ ...props }) => {
|
|
27
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Close, {
|
|
28
|
+
"data-slot": "dialog-close",
|
|
29
|
+
...props
|
|
30
|
+
});
|
|
31
|
+
};
|
|
32
|
+
const DialogOverlay = ({ className, ...props }) => {
|
|
33
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Overlay, {
|
|
34
|
+
"data-slot": "dialog-overlay",
|
|
35
|
+
className: cn("data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80", className),
|
|
36
|
+
...props
|
|
37
|
+
});
|
|
38
|
+
};
|
|
39
|
+
const DialogContent = ({ className, children, ...props }) => {
|
|
40
|
+
return /* @__PURE__ */ jsxs(DialogPortal, {
|
|
41
|
+
"data-slot": "dialog-portal",
|
|
42
|
+
children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(DialogPrimitive.Content, {
|
|
43
|
+
"data-slot": "dialog-content",
|
|
44
|
+
className: cn("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
|
|
45
|
+
...props,
|
|
46
|
+
children: [children, /* @__PURE__ */ jsxs(DialogPrimitive.Close, {
|
|
47
|
+
className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
48
|
+
children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
|
|
49
|
+
className: "sr-only",
|
|
50
|
+
children: "Close"
|
|
51
|
+
})]
|
|
52
|
+
})]
|
|
53
|
+
})]
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
const DialogHeader = ({ className, ...props }) => {
|
|
57
|
+
return /* @__PURE__ */ jsx("div", {
|
|
58
|
+
"data-slot": "dialog-header",
|
|
59
|
+
className: cn("flex flex-col gap-2 text-center sm:text-left", className),
|
|
60
|
+
...props
|
|
61
|
+
});
|
|
62
|
+
};
|
|
63
|
+
const DialogFooter = ({ className, ...props }) => {
|
|
64
|
+
return /* @__PURE__ */ jsx("div", {
|
|
65
|
+
"data-slot": "dialog-footer",
|
|
66
|
+
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
67
|
+
...props
|
|
68
|
+
});
|
|
69
|
+
};
|
|
70
|
+
const DialogTitle = ({ className, ...props }) => {
|
|
71
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Title, {
|
|
72
|
+
"data-slot": "dialog-title",
|
|
73
|
+
className: cn("text-lg leading-none font-semibold", className),
|
|
74
|
+
...props
|
|
75
|
+
});
|
|
76
|
+
};
|
|
77
|
+
const DialogDescription = ({ className, ...props }) => {
|
|
78
|
+
return /* @__PURE__ */ jsx(DialogPrimitive.Description, {
|
|
79
|
+
"data-slot": "dialog-description",
|
|
80
|
+
className: cn("text-muted-foreground text-sm", className),
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
};
|
|
84
|
+
|
|
85
|
+
//#endregion
|
|
86
|
+
export { DialogFooter as a, DialogPortal as c, DialogDescription as i, DialogTitle as l, DialogClose as n, DialogHeader as o, DialogContent as r, DialogOverlay as s, Dialog as t, DialogTrigger as u };
|
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
import { t as cn } from "./cn-DWCc1QRE.mjs";
|
|
2
|
+
import { a as DialogFooter, c as DialogPortal, i as DialogDescription, l as DialogTitle, n as DialogClose, s as DialogOverlay$1, t as Dialog$1, u as DialogTrigger } from "./dialog-DXBaT9gA.mjs";
|
|
3
|
+
import { t as CloseIcon } from "./close.icon-CMNMoXM_.mjs";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import * as DialogPrimitive from "@radix-ui/react-dialog";
|
|
7
|
+
|
|
8
|
+
//#region src/components/base/dialog/dialog.tsx
|
|
9
|
+
function Dialog({ children, ...props }) {
|
|
10
|
+
return /* @__PURE__ */ jsx(Dialog$1, {
|
|
11
|
+
...props,
|
|
12
|
+
children
|
|
13
|
+
});
|
|
14
|
+
}
|
|
15
|
+
function DialogOverlay({ className, ...props }) {
|
|
16
|
+
return /* @__PURE__ */ jsx(DialogOverlay$1, {
|
|
17
|
+
className: cn("bg-dialog-overlay/50 backdrop-blur-[2px]", className),
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function Trigger({ children, asChild = true }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(DialogTrigger, {
|
|
23
|
+
asChild,
|
|
24
|
+
children
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function Content({ children, className }) {
|
|
28
|
+
return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
|
|
29
|
+
className: cn("dark:bg-muted dark:border-dialog-border data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 flex max-h-[80vh] w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] flex-col gap-0 overflow-y-auto rounded-lg bg-white p-0 shadow-xl duration-200 sm:max-w-lg dark:border [&>button:last-child]:hidden", className),
|
|
30
|
+
children
|
|
31
|
+
})] });
|
|
32
|
+
}
|
|
33
|
+
function Header({ title, description, onClose, className, descriptionClassName }) {
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
35
|
+
className: cn("dark:bg-muted dark:border-dialog-border sticky top-0 z-50 flex shrink-0 flex-col gap-2 bg-white p-5", className),
|
|
36
|
+
children: [
|
|
37
|
+
/* @__PURE__ */ jsx(DialogTitle, {
|
|
38
|
+
className: "text-base font-semibold",
|
|
39
|
+
children: title
|
|
40
|
+
}),
|
|
41
|
+
description && /* @__PURE__ */ jsx(DialogDescription, {
|
|
42
|
+
className: cn("text-sm font-normal", descriptionClassName),
|
|
43
|
+
children: description
|
|
44
|
+
}),
|
|
45
|
+
onClose && /* @__PURE__ */ jsx(DialogClose, {
|
|
46
|
+
className: "absolute top-4 right-4 cursor-pointer",
|
|
47
|
+
onClick: onClose,
|
|
48
|
+
children: /* @__PURE__ */ jsx(CloseIcon, {})
|
|
49
|
+
})
|
|
50
|
+
]
|
|
51
|
+
});
|
|
52
|
+
}
|
|
53
|
+
function Body({ children, className }) {
|
|
54
|
+
return /* @__PURE__ */ jsx("div", {
|
|
55
|
+
className: cn("py-5", className),
|
|
56
|
+
children
|
|
57
|
+
});
|
|
58
|
+
}
|
|
59
|
+
function Footer({ children, className }) {
|
|
60
|
+
return /* @__PURE__ */ jsx(DialogFooter, {
|
|
61
|
+
className: cn("dark:bg-muted dark:border-dialog-border sticky bottom-0 z-50 shrink-0 gap-3 bg-white p-5", className),
|
|
62
|
+
children
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
Dialog.Trigger = Trigger;
|
|
66
|
+
Dialog.Content = Content;
|
|
67
|
+
Dialog.Header = Header;
|
|
68
|
+
Dialog.Body = Body;
|
|
69
|
+
Dialog.Footer = Footer;
|
|
70
|
+
Dialog.Overlay = DialogOverlay;
|
|
71
|
+
|
|
72
|
+
//#endregion
|
|
73
|
+
export { Dialog as t };
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
import { a as DropdownMenuItem, c as DropdownMenuRadioGroup, d as DropdownMenuShortcut, f as DropdownMenuSub, h as DropdownMenuTrigger, i as DropdownMenuGroup, l as DropdownMenuRadioItem, m as DropdownMenuSubTrigger, n as DropdownMenuCheckboxItem, o as DropdownMenuLabel, p as DropdownMenuSubContent, r as DropdownMenuContent, s as DropdownMenuPortal, t as DropdownMenu, u as DropdownMenuSeparator } from "../dropdown-DtSa_lqc.mjs";
|
|
2
|
+
|
|
3
|
+
export { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger };
|
|
@@ -0,0 +1,112 @@
|
|
|
1
|
+
import { t as cn } from "./cn-DWCc1QRE.mjs";
|
|
2
|
+
import { t as Icon } from "./icon-wrapper-9ticVbRL.mjs";
|
|
3
|
+
import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
|
|
7
|
+
|
|
8
|
+
//#region src/components/features/dropdown/dropdown.tsx
|
|
9
|
+
/**
|
|
10
|
+
* Datum Dropdown Menu Component
|
|
11
|
+
* Extends shadcn DropdownMenu with:
|
|
12
|
+
* - Destructive variant for DropdownMenuItem
|
|
13
|
+
*/
|
|
14
|
+
function DropdownMenu({ ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { ...props });
|
|
16
|
+
}
|
|
17
|
+
function DropdownMenuPortal({ ...props }) {
|
|
18
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { ...props });
|
|
19
|
+
}
|
|
20
|
+
function DropdownMenuTrigger({ ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Trigger, { ...props });
|
|
22
|
+
}
|
|
23
|
+
function DropdownMenuContent({ className, sideOffset = 4, ...props }) {
|
|
24
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.Content, {
|
|
25
|
+
sideOffset,
|
|
26
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md", className),
|
|
27
|
+
...props
|
|
28
|
+
}) });
|
|
29
|
+
}
|
|
30
|
+
function DropdownMenuGroup({ ...props }) {
|
|
31
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Group, { ...props });
|
|
32
|
+
}
|
|
33
|
+
function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
|
|
34
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Item, {
|
|
35
|
+
"data-inset": inset,
|
|
36
|
+
"data-variant": variant,
|
|
37
|
+
className: cn("focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
function DropdownMenuCheckboxItem({ className, children, checked, ...props }) {
|
|
42
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.CheckboxItem, {
|
|
43
|
+
className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
44
|
+
checked,
|
|
45
|
+
...props,
|
|
46
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
47
|
+
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
48
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
|
|
49
|
+
icon: CheckIcon,
|
|
50
|
+
className: "size-4"
|
|
51
|
+
}) })
|
|
52
|
+
}), children]
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function DropdownMenuRadioGroup({ ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.RadioGroup, { ...props });
|
|
57
|
+
}
|
|
58
|
+
function DropdownMenuRadioItem({ className, children, ...props }) {
|
|
59
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.RadioItem, {
|
|
60
|
+
className: cn("focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
|
|
61
|
+
...props,
|
|
62
|
+
children: [/* @__PURE__ */ jsx("span", {
|
|
63
|
+
className: "pointer-events-none absolute left-2 flex size-3.5 items-center justify-center",
|
|
64
|
+
children: /* @__PURE__ */ jsx(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
|
|
65
|
+
icon: CircleIcon,
|
|
66
|
+
className: "size-2 fill-current"
|
|
67
|
+
}) })
|
|
68
|
+
}), children]
|
|
69
|
+
});
|
|
70
|
+
}
|
|
71
|
+
function DropdownMenuLabel({ className, inset, ...props }) {
|
|
72
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Label, {
|
|
73
|
+
"data-inset": inset,
|
|
74
|
+
className: cn("px-2 py-1.5 text-sm font-medium data-[inset]:pl-8", className),
|
|
75
|
+
...props
|
|
76
|
+
});
|
|
77
|
+
}
|
|
78
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
79
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Separator, {
|
|
80
|
+
className: cn("bg-border -mx-1 my-1 h-px", className),
|
|
81
|
+
...props
|
|
82
|
+
});
|
|
83
|
+
}
|
|
84
|
+
function DropdownMenuShortcut({ className, ...props }) {
|
|
85
|
+
return /* @__PURE__ */ jsx("span", {
|
|
86
|
+
className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className),
|
|
87
|
+
...props
|
|
88
|
+
});
|
|
89
|
+
}
|
|
90
|
+
function DropdownMenuSub({ ...props }) {
|
|
91
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Sub, { ...props });
|
|
92
|
+
}
|
|
93
|
+
function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
94
|
+
return /* @__PURE__ */ jsxs(DropdownMenuPrimitive.SubTrigger, {
|
|
95
|
+
"data-inset": inset,
|
|
96
|
+
className: cn("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className),
|
|
97
|
+
...props,
|
|
98
|
+
children: [children, /* @__PURE__ */ jsx(Icon, {
|
|
99
|
+
icon: ChevronRightIcon,
|
|
100
|
+
className: "ml-auto size-4"
|
|
101
|
+
})]
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
function DropdownMenuSubContent({ className, ...props }) {
|
|
105
|
+
return /* @__PURE__ */ jsx(DropdownMenuPrimitive.SubContent, {
|
|
106
|
+
className: cn("bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg", className),
|
|
107
|
+
...props
|
|
108
|
+
});
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
//#endregion
|
|
112
|
+
export { DropdownMenuItem as a, DropdownMenuRadioGroup as c, DropdownMenuShortcut as d, DropdownMenuSub as f, DropdownMenuTrigger as h, DropdownMenuGroup as i, DropdownMenuRadioItem as l, DropdownMenuSubTrigger as m, DropdownMenuCheckboxItem as n, DropdownMenuLabel as o, DropdownMenuSubContent as p, DropdownMenuContent as r, DropdownMenuPortal as s, DropdownMenu as t, DropdownMenuSeparator as u };
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import "../utils-Bfgoe-Gm.mjs";
|
|
2
|
+
import "../button-AzpnV-WB.mjs";
|
|
3
|
+
import { i as FileInputButton, n as DropzoneContent, r as DropzoneEmptyState, t as Dropzone } from "../dropzone-BkOnwrS4.mjs";
|
|
4
|
+
|
|
5
|
+
export { Dropzone, DropzoneContent, DropzoneEmptyState, FileInputButton };
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
import { t as cn } from "./cn-DWCc1QRE.mjs";
|
|
2
|
+
import { t as Button } from "./button-C1wRfGtT.mjs";
|
|
3
|
+
import { t as Button$1 } from "./button-AzpnV-WB.mjs";
|
|
4
|
+
import { t as Icon } from "./icon-wrapper-9ticVbRL.mjs";
|
|
5
|
+
import { UploadIcon } from "lucide-react";
|
|
6
|
+
import { createContext, use, useRef } from "react";
|
|
7
|
+
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
+
import { useDropzone } from "react-dropzone";
|
|
9
|
+
|
|
10
|
+
//#region src/components/features/file-input-button/file-input-button.tsx
|
|
11
|
+
/**
|
|
12
|
+
* A simple button that triggers a file input dialog.
|
|
13
|
+
* Alternative to Dropzone for cases where drag-and-drop is not needed.
|
|
14
|
+
*
|
|
15
|
+
* @example
|
|
16
|
+
* ```tsx
|
|
17
|
+
* <FileInputButton
|
|
18
|
+
* accept={{ 'text/plain': ['.txt', '.zone'] }}
|
|
19
|
+
* maxSize={5 * 1024 * 1024} // 5MB
|
|
20
|
+
* onFileSelect={(files) => console.log('Selected:', files)}
|
|
21
|
+
* onFileError={(error) => console.error(error.message)}
|
|
22
|
+
* >
|
|
23
|
+
* Upload File
|
|
24
|
+
* </FileInputButton>
|
|
25
|
+
* ```
|
|
26
|
+
*/
|
|
27
|
+
function FileInputButton({ accept, maxSize, minSize, multiple = false, onFileSelect, onFileError, children, icon, disabled, ...buttonProps }) {
|
|
28
|
+
const inputRef = useRef(null);
|
|
29
|
+
const handleClick = () => {
|
|
30
|
+
inputRef.current?.click();
|
|
31
|
+
};
|
|
32
|
+
const handleChange = (event) => {
|
|
33
|
+
const fileList = event.target.files;
|
|
34
|
+
if (!fileList || fileList.length === 0) return;
|
|
35
|
+
const files = Array.from(fileList);
|
|
36
|
+
for (const file of files) {
|
|
37
|
+
if (accept) {
|
|
38
|
+
const acceptedTypes = Object.keys(accept);
|
|
39
|
+
const acceptedExtensions = Object.values(accept).flat();
|
|
40
|
+
const isValidType = acceptedTypes.some((type) => {
|
|
41
|
+
if (type.endsWith("/*")) {
|
|
42
|
+
const baseType = type.replace("/*", "");
|
|
43
|
+
return file.type.startsWith(baseType);
|
|
44
|
+
}
|
|
45
|
+
return file.type === type;
|
|
46
|
+
});
|
|
47
|
+
const isValidExtension = acceptedExtensions.some((ext) => file.name.toLowerCase().endsWith(ext.toLowerCase()));
|
|
48
|
+
if (!isValidType && !isValidExtension) {
|
|
49
|
+
onFileError?.(/* @__PURE__ */ new Error(`File type not accepted: ${file.name}`));
|
|
50
|
+
event.target.value = "";
|
|
51
|
+
return;
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
if (maxSize && file.size > maxSize) {
|
|
55
|
+
onFileError?.(/* @__PURE__ */ new Error(`File is too large: ${file.name}`));
|
|
56
|
+
event.target.value = "";
|
|
57
|
+
return;
|
|
58
|
+
}
|
|
59
|
+
if (minSize && file.size < minSize) {
|
|
60
|
+
onFileError?.(/* @__PURE__ */ new Error(`File is too small: ${file.name}`));
|
|
61
|
+
event.target.value = "";
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
onFileSelect?.(files);
|
|
66
|
+
event.target.value = "";
|
|
67
|
+
};
|
|
68
|
+
return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("input", {
|
|
69
|
+
ref: inputRef,
|
|
70
|
+
type: "file",
|
|
71
|
+
accept: accept ? [...Object.keys(accept), ...Object.values(accept).flat()].join(",") : void 0,
|
|
72
|
+
multiple,
|
|
73
|
+
onChange: handleChange,
|
|
74
|
+
disabled,
|
|
75
|
+
className: "hidden",
|
|
76
|
+
"aria-hidden": "true"
|
|
77
|
+
}), /* @__PURE__ */ jsx(Button, {
|
|
78
|
+
onClick: handleClick,
|
|
79
|
+
disabled,
|
|
80
|
+
icon: icon ?? /* @__PURE__ */ jsx(Icon, {
|
|
81
|
+
icon: UploadIcon,
|
|
82
|
+
className: "size-4"
|
|
83
|
+
}),
|
|
84
|
+
...buttonProps,
|
|
85
|
+
children
|
|
86
|
+
})] });
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
//#endregion
|
|
90
|
+
//#region src/components/features/dropzone/dropzone.tsx
|
|
91
|
+
function renderBytes(bytes) {
|
|
92
|
+
const units = [
|
|
93
|
+
"B",
|
|
94
|
+
"KB",
|
|
95
|
+
"MB",
|
|
96
|
+
"GB",
|
|
97
|
+
"TB",
|
|
98
|
+
"PB"
|
|
99
|
+
];
|
|
100
|
+
let size = bytes;
|
|
101
|
+
let unitIndex = 0;
|
|
102
|
+
while (size >= 1024 && unitIndex < units.length - 1) {
|
|
103
|
+
size /= 1024;
|
|
104
|
+
unitIndex++;
|
|
105
|
+
}
|
|
106
|
+
return `${size.toFixed(2)}${units[unitIndex]}`;
|
|
107
|
+
}
|
|
108
|
+
const DropzoneContext = createContext(void 0);
|
|
109
|
+
function Dropzone({ accept, maxFiles = 1, maxSize, minSize, onDrop, onError, disabled, src, className, children, ...props }) {
|
|
110
|
+
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
|
111
|
+
accept,
|
|
112
|
+
maxFiles,
|
|
113
|
+
maxSize,
|
|
114
|
+
minSize,
|
|
115
|
+
onError,
|
|
116
|
+
disabled,
|
|
117
|
+
onDrop: (acceptedFiles, fileRejections, event) => {
|
|
118
|
+
if (fileRejections.length > 0) {
|
|
119
|
+
const message = fileRejections.at(0)?.errors.at(0)?.message;
|
|
120
|
+
onError?.(new Error(message));
|
|
121
|
+
return;
|
|
122
|
+
}
|
|
123
|
+
onDrop?.(acceptedFiles, fileRejections, event);
|
|
124
|
+
},
|
|
125
|
+
...props
|
|
126
|
+
});
|
|
127
|
+
return /* @__PURE__ */ jsx(DropzoneContext, {
|
|
128
|
+
value: {
|
|
129
|
+
src,
|
|
130
|
+
accept,
|
|
131
|
+
maxSize,
|
|
132
|
+
minSize,
|
|
133
|
+
maxFiles
|
|
134
|
+
},
|
|
135
|
+
children: /* @__PURE__ */ jsxs(Button$1, {
|
|
136
|
+
className: cn("relative h-auto w-full flex-col overflow-hidden rounded-lg border border-dashed border-[#90969C99] bg-transparent p-9 text-base", isDragActive && "ring-ring ring-1 outline-none", className),
|
|
137
|
+
disabled,
|
|
138
|
+
type: "button",
|
|
139
|
+
variant: "outline",
|
|
140
|
+
...getRootProps(),
|
|
141
|
+
children: [/* @__PURE__ */ jsx("input", {
|
|
142
|
+
...getInputProps(),
|
|
143
|
+
disabled
|
|
144
|
+
}), children]
|
|
145
|
+
})
|
|
146
|
+
}, JSON.stringify(src));
|
|
147
|
+
}
|
|
148
|
+
function useDropzoneContext() {
|
|
149
|
+
const context = use(DropzoneContext);
|
|
150
|
+
if (!context) throw new Error("useDropzoneContext must be used within a Dropzone");
|
|
151
|
+
return context;
|
|
152
|
+
}
|
|
153
|
+
const maxLabelItems = 3;
|
|
154
|
+
function defaultContentLabel(files) {
|
|
155
|
+
if (files.length > maxLabelItems) return `${new Intl.ListFormat("en").format(files.slice(0, maxLabelItems).map((file) => file.name))} and ${files.length - maxLabelItems} more`;
|
|
156
|
+
return new Intl.ListFormat("en").format(files.map((file) => file.name));
|
|
157
|
+
}
|
|
158
|
+
function DropzoneContent({ children, className, icon, label, description }) {
|
|
159
|
+
const { src } = useDropzoneContext();
|
|
160
|
+
if (!src) return null;
|
|
161
|
+
if (children) return children;
|
|
162
|
+
const renderedLabel = typeof label === "function" ? label(src) : label;
|
|
163
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
164
|
+
className: cn("flex flex-col items-center justify-center", className),
|
|
165
|
+
children: [
|
|
166
|
+
icon ?? /* @__PURE__ */ jsx(Icon, {
|
|
167
|
+
icon: UploadIcon,
|
|
168
|
+
size: 36,
|
|
169
|
+
className: "text-primary"
|
|
170
|
+
}),
|
|
171
|
+
/* @__PURE__ */ jsx("div", {
|
|
172
|
+
className: "my-2 w-full truncate text-sm font-medium text-wrap",
|
|
173
|
+
children: renderedLabel ?? defaultContentLabel(src)
|
|
174
|
+
}),
|
|
175
|
+
/* @__PURE__ */ jsx("div", {
|
|
176
|
+
className: "text-muted-foreground w-full text-xs text-wrap",
|
|
177
|
+
children: description ?? "Drag and drop or click to replace"
|
|
178
|
+
})
|
|
179
|
+
]
|
|
180
|
+
});
|
|
181
|
+
}
|
|
182
|
+
function DropzoneEmptyState({ children, className, icon, label, description, showCaption = false }) {
|
|
183
|
+
const { src, accept, maxSize, minSize } = useDropzoneContext();
|
|
184
|
+
if (src) return null;
|
|
185
|
+
if (children) return children;
|
|
186
|
+
let caption = "";
|
|
187
|
+
if (showCaption) {
|
|
188
|
+
if (accept) {
|
|
189
|
+
caption += "Accepts ";
|
|
190
|
+
caption += new Intl.ListFormat("en").format(Object.keys(accept));
|
|
191
|
+
}
|
|
192
|
+
if (minSize && maxSize) caption += ` between ${renderBytes(minSize)} and ${renderBytes(maxSize)}`;
|
|
193
|
+
else if (minSize) caption += ` at least ${renderBytes(minSize)}`;
|
|
194
|
+
else if (maxSize) caption += ` less than ${renderBytes(maxSize)}`;
|
|
195
|
+
}
|
|
196
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
197
|
+
className: cn("flex flex-col items-center justify-center", className),
|
|
198
|
+
children: [
|
|
199
|
+
icon ?? /* @__PURE__ */ jsx(Icon, {
|
|
200
|
+
icon: UploadIcon,
|
|
201
|
+
size: 36,
|
|
202
|
+
className: "text-primary size-9 text-4xl"
|
|
203
|
+
}),
|
|
204
|
+
label && /* @__PURE__ */ jsx("p", {
|
|
205
|
+
className: "my-2 w-full truncate text-sm font-medium text-wrap",
|
|
206
|
+
children: label
|
|
207
|
+
}),
|
|
208
|
+
description && /* @__PURE__ */ jsx("div", {
|
|
209
|
+
className: "text-muted-foreground w-full truncate text-xs text-wrap",
|
|
210
|
+
children: description
|
|
211
|
+
}),
|
|
212
|
+
caption && /* @__PURE__ */ jsxs("p", {
|
|
213
|
+
className: "text-muted-foreground text-xs text-wrap",
|
|
214
|
+
children: [caption, "."]
|
|
215
|
+
})
|
|
216
|
+
]
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
//#endregion
|
|
221
|
+
export { FileInputButton as i, DropzoneContent as n, DropzoneEmptyState as r, Dropzone as t };
|