@mci-ui/mci-ui 0.0.94 → 0.0.96

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 (45) hide show
  1. package/dist/assets/png/empty.png.js +4 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.js +54 -50
  4. package/dist/shared/lib/uploadLanguage.js +6 -3
  5. package/dist/shared/ui/MciModal/MciModal.js +1 -1
  6. package/dist/shared/ui/mciAccordion/MciAccordion.js +4 -4
  7. package/dist/shared/ui/mciButton/MciButton.js +12 -10
  8. package/dist/shared/ui/mciCheck/MciCheck.js +3 -3
  9. package/dist/shared/ui/mciCollapse/MciCollapse.js +1 -1
  10. package/dist/shared/ui/mciDrawer/MciDrawer.js +1 -1
  11. package/dist/shared/ui/mciEmpty/MciEmpty.js +41 -0
  12. package/dist/shared/ui/mciInput/MciInput.js +32 -32
  13. package/dist/shared/ui/mciPagination/MciPagination.js +32 -32
  14. package/dist/shared/ui/mciPhone/MciPhone.js +23 -23
  15. package/dist/shared/ui/mciPicker/MciPicker.js +2 -2
  16. package/dist/shared/ui/mciTable/MciTable.js +317 -165
  17. package/dist/shared/ui/mciTable/MciTableClamp2.js +5 -5
  18. package/dist/shared/ui/mciTabs/FilledTabs.js +103 -90
  19. package/dist/shared/ui/mciTabs/OutlinedTabs.js +28 -24
  20. package/dist/shared/ui/mciTabs/TabCountBadge.js +19 -0
  21. package/dist/shared/ui/mciTag/MciTag.js +17 -17
  22. package/dist/shared/ui/mciTextarea/MciTextarea.js +5 -5
  23. package/dist/shared/ui/mciTimePicker/MciTimePicker.js +205 -194
  24. package/dist/shared/ui/mciUpload/MciUpload.js +102 -352
  25. package/dist/shared/ui/mciUpload/MciUploadButton.js +143 -0
  26. package/dist/shared/ui/mciUpload/MciUploadFileList.js +167 -0
  27. package/dist/shared/ui/mciUpload/mci-upload.theme.js +103 -0
  28. package/dist/shared/ui/mciUpload/mci-upload.utils.js +90 -41
  29. package/dist/shared/ui/mciUpload/useMciUpload.js +183 -0
  30. package/dist/types/index.d.ts +4 -0
  31. package/dist/types/shared/lib/uploadLanguage.d.ts +2 -0
  32. package/dist/types/shared/types/ui/empty.types.d.ts +11 -0
  33. package/dist/types/shared/types/ui/index.d.ts +2 -1
  34. package/dist/types/shared/types/ui/tabs.types.d.ts +2 -0
  35. package/dist/types/shared/types/ui/time-picker.types.d.ts +2 -0
  36. package/dist/types/shared/types/ui/upload.types.d.ts +25 -1
  37. package/dist/types/shared/ui/mciEmpty/MciEmpty.d.ts +2 -0
  38. package/dist/types/shared/ui/mciTabs/FilledTabs.d.ts +1 -1
  39. package/dist/types/shared/ui/mciTabs/TabCountBadge.d.ts +5 -0
  40. package/dist/types/shared/ui/mciUpload/MciUploadButton.d.ts +4 -0
  41. package/dist/types/shared/ui/mciUpload/MciUploadFileList.d.ts +18 -0
  42. package/dist/types/shared/ui/mciUpload/mci-upload.theme.d.ts +101 -0
  43. package/dist/types/shared/ui/mciUpload/mci-upload.utils.d.ts +7 -0
  44. package/dist/types/shared/ui/mciUpload/useMciUpload.d.ts +131 -0
  45. package/package.json +1 -1
@@ -0,0 +1,167 @@
1
+ import { jsxs as s, jsx as t, Fragment as u } from "react/jsx-runtime";
2
+ import { File as w, Star2 as y, Eye as F } from "@solar-icons/react";
3
+ import j from "../../../assets/icons/close.svg.js";
4
+ import { cn as r } from "../../lib/utils.js";
5
+ import { getFileIcon as C, getFileIconByName as z, formatFileSize as S } from "./mci-upload.utils.js";
6
+ function W({
7
+ files: c,
8
+ theme: i,
9
+ t: l,
10
+ darkMode: a = !1,
11
+ showPreview: p = !0,
12
+ showFileTypeIcon: h = !0,
13
+ disabled: n = !1,
14
+ isUploading: d = !1,
15
+ onPreview: x,
16
+ onRemove: b,
17
+ onClearAll: g,
18
+ className: N
19
+ }) {
20
+ return c.length === 0 ? null : /* @__PURE__ */ s("div", { className: r("mt-4 space-y-3", N), children: [
21
+ /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
22
+ /* @__PURE__ */ s("span", { className: r("text-sm font-medium", a ? "text-slate-300" : "text-slate-700"), children: [
23
+ l.selectedFiles,
24
+ " (",
25
+ c.length,
26
+ ")"
27
+ ] }),
28
+ c.length > 1 && /* @__PURE__ */ t(
29
+ "button",
30
+ {
31
+ type: "button",
32
+ onClick: g,
33
+ disabled: n || d,
34
+ className: "cursor-pointer text-sm font-medium text-red-600 disabled:cursor-not-allowed disabled:opacity-50",
35
+ children: l.clearAll
36
+ }
37
+ )
38
+ ] }),
39
+ /* @__PURE__ */ t("div", { className: "space-y-3", children: c.map((e) => {
40
+ const v = !!e.preview ? i.fileIconImg : i.fileIconDoc, o = n || d || e.status === "uploading";
41
+ return /* @__PURE__ */ s(
42
+ "div",
43
+ {
44
+ className: r(
45
+ "flex items-center justify-between rounded-2xl border p-4",
46
+ a ? "border-neutral-700" : "border-slate-200",
47
+ e.status === "error" && (a ? "border-red-500" : "border-red-600")
48
+ ),
49
+ children: [
50
+ /* @__PURE__ */ s("div", { className: "flex min-w-0 items-center gap-4", children: [
51
+ /* @__PURE__ */ t(
52
+ "div",
53
+ {
54
+ className: r(
55
+ "flex h-14 w-14 items-center justify-center rounded-2xl",
56
+ v
57
+ ),
58
+ children: p && e.preview ? /* @__PURE__ */ t(
59
+ "img",
60
+ {
61
+ src: e.preview,
62
+ alt: e.name,
63
+ className: "h-10 w-10 rounded-xl object-cover"
64
+ }
65
+ ) : h ? e.file ? C(e.file) : z(e.name) : /* @__PURE__ */ t(w, { className: "h-6 w-6 text-slate-500" })
66
+ }
67
+ ),
68
+ /* @__PURE__ */ s("div", { className: "min-w-0", children: [
69
+ /* @__PURE__ */ t(
70
+ "p",
71
+ {
72
+ className: r(
73
+ "truncate text-lg font-semibold",
74
+ a ? "text-slate-100" : "text-primary"
75
+ ),
76
+ children: e.name
77
+ }
78
+ ),
79
+ /* @__PURE__ */ s(
80
+ "div",
81
+ {
82
+ className: r(
83
+ "mt-1 flex flex-wrap items-center gap-2 text-sm",
84
+ a ? "text-slate-400" : "text-slate-500"
85
+ ),
86
+ children: [
87
+ /* @__PURE__ */ t("span", { children: S(e.size) }),
88
+ e.status === "uploading" && /* @__PURE__ */ s(u, { children: [
89
+ /* @__PURE__ */ t("span", { children: "•" }),
90
+ /* @__PURE__ */ s("span", { className: "inline-flex items-center", children: [
91
+ /* @__PURE__ */ t(y, { className: "mr-1 h-5 w-5 animate-spin" }),
92
+ l.uploading
93
+ ] })
94
+ ] }),
95
+ e.status === "success" && /* @__PURE__ */ s(u, { children: [
96
+ /* @__PURE__ */ t("span", { children: "•" }),
97
+ /* @__PURE__ */ t("span", { className: "font-normal text-green-600", children: l.success })
98
+ ] })
99
+ ]
100
+ }
101
+ ),
102
+ e.status === "uploading" && /* @__PURE__ */ t(
103
+ "div",
104
+ {
105
+ className: r(
106
+ "mt-2 h-1.5 w-full rounded-full",
107
+ a ? "bg-neutral-700" : "bg-slate-200"
108
+ ),
109
+ children: /* @__PURE__ */ t(
110
+ "div",
111
+ {
112
+ className: r(
113
+ "h-1.5 rounded-full transition-all duration-300",
114
+ i.progressFill
115
+ ),
116
+ style: { width: `${e.progress}%` }
117
+ }
118
+ )
119
+ }
120
+ ),
121
+ e.status === "error" && e.error && /* @__PURE__ */ t("p", { className: "mt-2 text-sm font-normal text-red-600", children: e.error })
122
+ ] })
123
+ ] }),
124
+ /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
125
+ /* @__PURE__ */ t(
126
+ "button",
127
+ {
128
+ type: "button",
129
+ onClick: (m) => {
130
+ m.stopPropagation(), o || x(e);
131
+ },
132
+ disabled: o,
133
+ className: r(
134
+ "cursor-pointer rounded-xl p-2 disabled:cursor-not-allowed disabled:opacity-50",
135
+ a ? "hover:bg-neutral-800" : "hover:bg-slate-100"
136
+ ),
137
+ title: l.preview,
138
+ children: /* @__PURE__ */ t(F, { size: 20, className: "text-slate-400" })
139
+ }
140
+ ),
141
+ /* @__PURE__ */ t(
142
+ "button",
143
+ {
144
+ type: "button",
145
+ onClick: (m) => {
146
+ m.stopPropagation(), b(e.id);
147
+ },
148
+ disabled: n || d,
149
+ className: r(
150
+ "cursor-pointer rounded-xl p-2 disabled:cursor-not-allowed disabled:opacity-50",
151
+ a ? "text-slate-400 hover:bg-neutral-800" : "text-slate-base hover:bg-slate-100"
152
+ ),
153
+ title: l.remove,
154
+ children: /* @__PURE__ */ t(j, { className: "h-6 w-6" })
155
+ }
156
+ )
157
+ ] })
158
+ ]
159
+ },
160
+ e.id
161
+ );
162
+ }) })
163
+ ] });
164
+ }
165
+ export {
166
+ W as MciUploadFileList
167
+ };
@@ -0,0 +1,103 @@
1
+ const e = {
2
+ blue: {
3
+ dropBorder: "border-blue-200 hover:border-blue-300",
4
+ dropBg: "bg-blue-50/40 hover:bg-blue-50/60",
5
+ dropActive: "border-blue-600 bg-blue-50",
6
+ iconWrap: "text-blue-600",
7
+ title: "text-blue-600",
8
+ hint: "text-slate-500",
9
+ progressFill: "bg-blue-600",
10
+ fileIconImg: "bg-blue-50 text-blue-600",
11
+ fileIconDoc: "bg-green-50 text-green-600",
12
+ buttonIconBg: "bg-blue-50",
13
+ buttonIcon: "text-slate-600",
14
+ buttonText: "text-slate-600",
15
+ buttonBorder: "border-slate-200 hover:border-slate-300",
16
+ buttonBg: "bg-white"
17
+ },
18
+ yellow: {
19
+ dropBorder: "border-yellow-300 hover:border-yellow-400",
20
+ dropBg: "bg-yellow-50/60 hover:bg-yellow-100/60",
21
+ dropActive: "border-yellow-500 bg-yellow-100/80",
22
+ iconWrap: "text-yellow-600",
23
+ title: "text-yellow-700",
24
+ hint: "text-slate-500",
25
+ progressFill: "bg-yellow-500",
26
+ fileIconImg: "bg-blue-50 text-blue-600",
27
+ fileIconDoc: "bg-green-50 text-green-600",
28
+ buttonIconBg: "bg-yellow-50",
29
+ buttonIcon: "text-slate-600",
30
+ buttonText: "text-slate-600",
31
+ buttonBorder: "border-slate-200 hover:border-slate-300",
32
+ buttonBg: "bg-white"
33
+ },
34
+ orange: {
35
+ dropBorder: "border-orange-200 hover:border-orange-300",
36
+ dropBg: "bg-orange-50/40 hover:bg-orange-50/60",
37
+ dropActive: "border-orange-600 bg-orange-50",
38
+ iconWrap: "text-orange-600",
39
+ title: "text-orange-600",
40
+ hint: "text-slate-500",
41
+ progressFill: "bg-orange-600",
42
+ fileIconImg: "bg-orange-50 text-orange-600",
43
+ fileIconDoc: "bg-green-50 text-green-600",
44
+ buttonIconBg: "bg-slate-100",
45
+ buttonIcon: "text-slate-600",
46
+ buttonText: "text-slate-600",
47
+ buttonBorder: "border-slate-200 hover:border-slate-300",
48
+ buttonBg: "bg-white"
49
+ }
50
+ }, t = {
51
+ blue: {
52
+ dropBorder: "border-blue-800 hover:border-blue-700",
53
+ dropBg: "bg-blue-950/40 hover:bg-blue-950/60",
54
+ dropActive: "border-blue-500 bg-blue-950/60",
55
+ iconWrap: "text-blue-400",
56
+ title: "text-blue-400",
57
+ hint: "text-slate-400",
58
+ progressFill: "bg-blue-500",
59
+ fileIconImg: "bg-blue-950 text-blue-400",
60
+ fileIconDoc: "bg-green-950 text-green-400",
61
+ buttonIconBg: "bg-slate-800",
62
+ buttonIcon: "text-slate-300",
63
+ buttonText: "text-slate-300",
64
+ buttonBorder: "border-neutral-700 hover:border-neutral-600",
65
+ buttonBg: "bg-neutral-900"
66
+ },
67
+ yellow: {
68
+ dropBorder: "border-yellow-700 hover:border-yellow-600",
69
+ dropBg: "bg-yellow-950/45 hover:bg-yellow-950/65",
70
+ dropActive: "border-yellow-500 bg-yellow-950/70",
71
+ iconWrap: "text-yellow-300",
72
+ title: "text-yellow-300",
73
+ hint: "text-slate-400",
74
+ progressFill: "bg-yellow-400",
75
+ fileIconImg: "bg-blue-950 text-blue-400",
76
+ fileIconDoc: "bg-green-950 text-green-400",
77
+ buttonIconBg: "bg-slate-800",
78
+ buttonIcon: "text-slate-300",
79
+ buttonText: "text-slate-300",
80
+ buttonBorder: "border-neutral-700 hover:border-neutral-600",
81
+ buttonBg: "bg-neutral-900"
82
+ },
83
+ orange: {
84
+ dropBorder: "border-orange-800 hover:border-orange-700",
85
+ dropBg: "bg-orange-950/40 hover:bg-orange-950/60",
86
+ dropActive: "border-orange-600 bg-orange-950/60",
87
+ iconWrap: "text-orange-400",
88
+ title: "text-orange-400",
89
+ hint: "text-slate-400",
90
+ progressFill: "bg-orange-600",
91
+ fileIconImg: "bg-orange-950 text-orange-400",
92
+ fileIconDoc: "bg-green-950 text-green-400",
93
+ buttonIconBg: "bg-slate-800",
94
+ buttonIcon: "text-slate-300",
95
+ buttonText: "text-slate-300",
96
+ buttonBorder: "border-neutral-700 hover:border-neutral-600",
97
+ buttonBg: "bg-neutral-900"
98
+ }
99
+ };
100
+ export {
101
+ e as UPLOAD_THEME,
102
+ t as UPLOAD_THEME_DARK
103
+ };
@@ -1,5 +1,5 @@
1
- import { jsx as a } from "react/jsx-runtime";
2
- import { FileText as c, File as m, MusicNote as f, VideoFramePlayHorizontal as u, Gallery as x } from "@solar-icons/react";
1
+ import { jsx as s } from "react/jsx-runtime";
2
+ import { FileText as r, File as u, MusicNote as h, VideoFramePlayHorizontal as g, Gallery as f } from "@solar-icons/react";
3
3
  const l = [
4
4
  "pdf",
5
5
  "doc",
@@ -14,7 +14,7 @@ const l = [
14
14
  "png",
15
15
  "bmp",
16
16
  "tiff"
17
- ], h = [
17
+ ], w = [
18
18
  "zip",
19
19
  "rar",
20
20
  "7z",
@@ -54,10 +54,10 @@ const l = [
54
54
  "ksh",
55
55
  "csh",
56
56
  "fish"
57
- ], r = new Set(l), p = new Set(h), g = l.map((e) => `.${e}`).join(","), w = {
57
+ ], c = new Set(l), p = new Set(w), E = l.map((e) => `.${e}`).join(","), z = {
58
58
  "image/*": ["jpg", "jpeg", "png", "bmp", "tiff"],
59
59
  "text/*": ["txt"]
60
- }, E = {
60
+ }, N = {
61
61
  "application/pdf": ["pdf"],
62
62
  "application/msword": ["doc"],
63
63
  "application/vnd.openxmlformats-officedocument.wordprocessingml.document": ["docx"],
@@ -90,7 +90,7 @@ const l = [
90
90
  "text/x-shellscript",
91
91
  "application/x-powershell"
92
92
  ]);
93
- function z(e) {
93
+ function m(e) {
94
94
  const t = e.trim().toLowerCase(), n = t.lastIndexOf(".");
95
95
  return n <= 0 || n === t.length - 1 ? "" : t.slice(n + 1);
96
96
  }
@@ -103,68 +103,68 @@ function d(e) {
103
103
  for (const i of t)
104
104
  if (i !== "*/*") {
105
105
  if (i.endsWith("/*")) {
106
- const s = w[i];
107
- if (!s) continue;
108
- for (const o of s)
109
- r.has(o) && !p.has(o) && n.add(o);
106
+ const a = z[i];
107
+ if (!a) continue;
108
+ for (const o of a)
109
+ c.has(o) && !p.has(o) && n.add(o);
110
110
  continue;
111
111
  }
112
112
  if (i.startsWith(".")) {
113
- const s = i.slice(1);
114
- r.has(s) && !p.has(s) && n.add(s);
113
+ const a = i.slice(1);
114
+ c.has(a) && !p.has(a) && n.add(a);
115
115
  continue;
116
116
  }
117
117
  if (i.includes("/")) {
118
- const s = E[i];
119
- if (!s) continue;
120
- for (const o of s)
121
- r.has(o) && !p.has(o) && n.add(o);
118
+ const a = N[i];
119
+ if (!a) continue;
120
+ for (const o of a)
121
+ c.has(o) && !p.has(o) && n.add(o);
122
122
  continue;
123
123
  }
124
- r.has(i) && !p.has(i) && n.add(i);
124
+ c.has(i) && !p.has(i) && n.add(i);
125
125
  }
126
126
  return n.size > 0 ? n : null;
127
127
  }
128
- function T(e) {
128
+ function b(e) {
129
129
  const t = d(e);
130
- return t ? Array.from(t).map((n) => `.${n}`).join(",") : g;
130
+ return t ? Array.from(t).map((n) => `.${n}`).join(",") : E;
131
131
  }
132
- function b(e) {
132
+ function _(e) {
133
133
  const t = d(e);
134
134
  return t ? Array.from(t).join(", ") : l.join(", ");
135
135
  }
136
- function v(e) {
136
+ function A(e) {
137
137
  switch (e.type.split("/")[0]) {
138
138
  case "image":
139
- return /* @__PURE__ */ a(x, { className: "h-5 w-5 text-blue-500" });
139
+ return /* @__PURE__ */ s(f, { className: "h-5 w-5 text-blue-500" });
140
140
  case "video":
141
- return /* @__PURE__ */ a(u, { className: "h-5 w-5 text-purple-500" });
141
+ return /* @__PURE__ */ s(g, { className: "h-5 w-5 text-purple-500" });
142
142
  case "audio":
143
- return /* @__PURE__ */ a(f, { className: "h-5 w-5 text-green-500" });
143
+ return /* @__PURE__ */ s(h, { className: "h-5 w-5 text-green-500" });
144
144
  default:
145
- return e.type.includes("pdf") ? /* @__PURE__ */ a(c, { className: "h-5 w-5 text-red-500" }) : e.type.includes("word") || e.type.includes("document") ? /* @__PURE__ */ a(c, { className: "h-5 w-5 text-blue-600" }) : e.type.includes("excel") || e.type.includes("spreadsheet") ? /* @__PURE__ */ a(c, { className: "h-5 w-5 text-green-600" }) : /* @__PURE__ */ a(m, { className: "h-5 w-5 text-gray-500" });
145
+ return e.type.includes("pdf") ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-red-500" }) : e.type.includes("word") || e.type.includes("document") ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-blue-600" }) : e.type.includes("excel") || e.type.includes("spreadsheet") ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-green-600" }) : /* @__PURE__ */ s(u, { className: "h-5 w-5 text-gray-500" });
146
146
  }
147
147
  }
148
- function _(e) {
148
+ function I(e) {
149
149
  if (e === 0) return "0 Bytes";
150
150
  const t = 1024, n = ["Bytes", "KB", "MB", "GB"], i = Math.floor(Math.log(e) / Math.log(t));
151
151
  return parseFloat((e / Math.pow(t, i)).toFixed(2)) + " " + n[i];
152
152
  }
153
- function F(e, t) {
153
+ function O(e, t) {
154
154
  const n = t * 1024 * 1024;
155
155
  return e.size <= n;
156
156
  }
157
- function O(e, t) {
158
- const n = z(e.name), i = e.type.trim().toLowerCase();
157
+ function C(e, t) {
158
+ const n = m(e.name), i = e.type.trim().toLowerCase();
159
159
  if (i && S.has(i))
160
160
  return { isValid: !1, reason: "blocked" };
161
161
  if (!n) return { isValid: !1, reason: "not-allowed" };
162
162
  if (p.has(n)) return { isValid: !1, reason: "blocked" };
163
- if (!r.has(n)) return { isValid: !1, reason: "not-allowed" };
164
- const s = d(t);
165
- return s && !s.has(n) ? { isValid: !1, reason: "not-allowed" } : { isValid: !0 };
163
+ if (!c.has(n)) return { isValid: !1, reason: "not-allowed" };
164
+ const a = d(t);
165
+ return a && !a.has(n) ? { isValid: !1, reason: "not-allowed" } : { isValid: !0 };
166
166
  }
167
- function A(e) {
167
+ function L(e) {
168
168
  return new Promise((t) => {
169
169
  if (e.type.startsWith("image/")) {
170
170
  const n = new FileReader();
@@ -173,14 +173,63 @@ function A(e) {
173
173
  t("");
174
174
  });
175
175
  }
176
+ const x = /* @__PURE__ */ new Set(["jpg", "jpeg", "png", "bmp", "tiff"]);
177
+ function y(e) {
178
+ return x.has(m(e));
179
+ }
180
+ function M(e) {
181
+ const t = m(e);
182
+ return x.has(t) ? /* @__PURE__ */ s(f, { className: "h-5 w-5 text-blue-500" }) : t === "pdf" ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-red-500" }) : t === "doc" || t === "docx" ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-blue-600" }) : t === "xls" || t === "xlsx" ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-green-600" }) : t === "ppt" || t === "pptx" ? /* @__PURE__ */ s(r, { className: "h-5 w-5 text-orange-600" }) : /* @__PURE__ */ s(u, { className: "h-5 w-5 text-gray-500" });
183
+ }
184
+ function B(e) {
185
+ return e ? Array.isArray(e) ? e : [e] : [];
186
+ }
187
+ function v(e) {
188
+ const t = e.id ?? Math.random().toString(36).slice(2, 11), n = y(e.name) ? e.url : void 0;
189
+ return {
190
+ id: t,
191
+ name: e.name,
192
+ size: e.size ?? 0,
193
+ url: e.url,
194
+ preview: n,
195
+ progress: 100,
196
+ status: "success",
197
+ isRemote: !0
198
+ };
199
+ }
200
+ function D(e) {
201
+ return {
202
+ id: e.id,
203
+ name: e.name,
204
+ url: e.url ?? "",
205
+ size: e.size
206
+ };
207
+ }
208
+ function V(e, t, n, i) {
209
+ return {
210
+ id: Math.random().toString(36).slice(2, 11),
211
+ file: e,
212
+ name: e.name,
213
+ size: e.size,
214
+ preview: t,
215
+ progress: i,
216
+ status: n
217
+ };
218
+ }
176
219
  export {
177
- h as BLOCKED_EXTENSIONS,
220
+ w as BLOCKED_EXTENSIONS,
178
221
  l as SECURE_ALLOWED_EXTENSIONS,
179
- T as buildSecureAccept,
180
- A as createPreview,
181
- _ as formatFileSize,
182
- b as getAllowedFormatsHint,
183
- v as getFileIcon,
184
- F as validateFileSize,
185
- O as validateFileType
222
+ b as buildSecureAccept,
223
+ V as createFileInfoFromFile,
224
+ v as createFileInfoFromValue,
225
+ L as createPreview,
226
+ D as fileInfoToUploadValue,
227
+ I as formatFileSize,
228
+ _ as getAllowedFormatsHint,
229
+ A as getFileIcon,
230
+ M as getFileIconByName,
231
+ y as isImageFileName,
232
+ B as normalizeUploadFileValues,
233
+ O as validateFileSize,
234
+ C as validateFileType
186
235
  };
@@ -0,0 +1,183 @@
1
+ import { useState as O, useRef as I, useMemo as b, useCallback as n, useEffect as V } from "react";
2
+ import { uploadLanguages as re } from "../../lib/uploadLanguage.js";
3
+ import { UPLOAD_THEME_DARK as te, UPLOAD_THEME as ne } from "./mci-upload.theme.js";
4
+ import { normalizeUploadFileValues as B, createFileInfoFromValue as S, buildSecureAccept as se, getAllowedFormatsHint as oe, fileInfoToUploadValue as le, validateFileSize as ie, validateFileType as ce, createPreview as ae, createFileInfoFromFile as fe } from "./mci-upload.utils.js";
5
+ function me({
6
+ multiple: y = !1,
7
+ accept: u = "*/*",
8
+ maxSize: m = 10,
9
+ maxFiles: h = 5,
10
+ disabled: l = !1,
11
+ defaultValue: z,
12
+ value: A,
13
+ onFilesChange: j,
14
+ onValueChange: P,
15
+ onUpload: g,
16
+ locale: K = "uz",
17
+ variant: D = "orange",
18
+ darkMode: M = !1,
19
+ customValidator: E
20
+ }) {
21
+ const _ = A !== void 0, [F, i] = O(
22
+ () => B(z).map(S)
23
+ ), [W, R] = O(!1), [L, H] = O(!1), v = I(null), c = re[K], q = b(
24
+ () => M ? te[D] : ne[D],
25
+ [D, M]
26
+ ), G = b(() => se(u), [u]), J = b(() => oe(u), [u]), p = I(/* @__PURE__ */ new Map()), U = n((e) => {
27
+ const r = p.current.get(e);
28
+ r && (URL.revokeObjectURL(r), p.current.delete(e));
29
+ }, []), w = n(() => {
30
+ for (const e of p.current.values())
31
+ URL.revokeObjectURL(e);
32
+ p.current.clear();
33
+ }, []);
34
+ V(() => () => {
35
+ w();
36
+ }, [w]), V(() => {
37
+ _ && i(B(A).map(S));
38
+ }, [_, A]);
39
+ const a = n(
40
+ (e) => {
41
+ P?.(e.map(le)), j?.(e.map((r) => r.file).filter((r) => !!r));
42
+ },
43
+ [j, P]
44
+ ), N = n(
45
+ (e) => {
46
+ if (e.url) {
47
+ window.open(e.url, "_blank", "noopener,noreferrer");
48
+ return;
49
+ }
50
+ if (!e.file) return;
51
+ let r = p.current.get(e.id);
52
+ r || (r = URL.createObjectURL(e.file), p.current.set(e.id, r), setTimeout(() => U(e.id), 5 * 6e4)), window.open(r, "_blank", "noopener,noreferrer");
53
+ },
54
+ [U]
55
+ ), k = n(
56
+ async (e) => {
57
+ const r = Array.from(e), s = [];
58
+ for (const t of r) {
59
+ if (F.length + s.length >= h) {
60
+ alert(c.maxFilesError(h));
61
+ break;
62
+ }
63
+ if (!ie(t, m)) {
64
+ alert(c.fileSizeError(t.name, m));
65
+ continue;
66
+ }
67
+ const o = ce(t, u);
68
+ if (!o.isValid) {
69
+ o.reason === "blocked" ? alert(c.blockedFileTypeError(t.name)) : alert(c.fileTypeError(t.name));
70
+ continue;
71
+ }
72
+ if (E) {
73
+ const C = E(t);
74
+ if (C) {
75
+ alert(C);
76
+ continue;
77
+ }
78
+ }
79
+ const d = await ae(t), f = g ? "uploading" : "success", T = g ? 0 : 100;
80
+ s.push(
81
+ fe(t, d, f, T)
82
+ );
83
+ }
84
+ if (s.length > 0) {
85
+ const t = y ? [...F, ...s] : s;
86
+ if (i(t), a(t), g) {
87
+ H(!0);
88
+ try {
89
+ const o = t.map((f, T) => ({
90
+ ...f,
91
+ progress: Math.min(100, (T + 1) / t.length * 100)
92
+ }));
93
+ i(o), await g(o);
94
+ const d = t.map((f) => ({
95
+ ...f,
96
+ status: "success",
97
+ progress: 100
98
+ }));
99
+ i(d), a(d);
100
+ } catch (o) {
101
+ i(
102
+ (d) => d.map((f) => ({
103
+ ...f,
104
+ status: "error",
105
+ error: o instanceof Error ? o.message : c.uploadFailed
106
+ }))
107
+ );
108
+ } finally {
109
+ H(!1);
110
+ }
111
+ }
112
+ }
113
+ },
114
+ [
115
+ F,
116
+ h,
117
+ E,
118
+ c,
119
+ u,
120
+ m,
121
+ y,
122
+ a,
123
+ g
124
+ ]
125
+ ), Q = n(
126
+ (e) => {
127
+ e.preventDefault(), l || R(!0);
128
+ },
129
+ [l]
130
+ ), X = n((e) => {
131
+ e.preventDefault(), R(!1);
132
+ }, []), Y = n(
133
+ (e) => {
134
+ if (e.preventDefault(), R(!1), l) return;
135
+ const r = e.dataTransfer.files;
136
+ r.length > 0 && k(r);
137
+ },
138
+ [l, k]
139
+ ), Z = n(
140
+ (e) => {
141
+ const r = e.target.files;
142
+ r && r.length > 0 && (k(r), v.current && (v.current.value = ""));
143
+ },
144
+ [k]
145
+ ), $ = n(
146
+ (e) => {
147
+ U(e), i((r) => {
148
+ const s = r.filter((t) => t.id !== e);
149
+ return a(s), s;
150
+ });
151
+ },
152
+ [a, U]
153
+ ), x = n(() => {
154
+ w(), i([]), a([]);
155
+ }, [a, w]), ee = n(() => {
156
+ !l && !L && v.current?.click();
157
+ }, [l, L]);
158
+ return {
159
+ files: F,
160
+ isDragging: W,
161
+ isUploading: L,
162
+ fileInputRef: v,
163
+ t: c,
164
+ theme: q,
165
+ secureAccept: G,
166
+ allowedFormatsHint: J,
167
+ multiple: y,
168
+ maxFiles: h,
169
+ maxSize: m,
170
+ disabled: l,
171
+ handleDragOver: Q,
172
+ handleDragLeave: X,
173
+ handleDrop: Y,
174
+ handleFileInput: Z,
175
+ handleRemoveFile: $,
176
+ handleClearAll: x,
177
+ handleUploadClick: ee,
178
+ openPreview: N
179
+ };
180
+ }
181
+ export {
182
+ me as useMciUpload
183
+ };
@@ -4,12 +4,14 @@ export { default as MciCheck } from './shared/ui/mciCheck/MciCheck.tsx';
4
4
  export { default as MciCollapse } from './shared/ui/mciCollapse/MciCollapse.tsx';
5
5
  export { default as MciAccordion } from './shared/ui/mciAccordion/MciAccordion.tsx';
6
6
  export { default as MciDrawer } from './shared/ui/mciDrawer/MciDrawer.tsx';
7
+ export { default as MciEmpty } from './shared/ui/mciEmpty/MciEmpty.tsx';
7
8
  export { default as MciInput } from './shared/ui/mciInput/MciInput.tsx';
8
9
  export { default as MciPicker } from './shared/ui/mciPicker/MciPicker.tsx';
9
10
  export { default as MciTimePicker } from './shared/ui/mciTimePicker/MciTimePicker.tsx';
10
11
  export { default as MciSelect } from './shared/ui/mciSelect/MciSelect.tsx';
11
12
  export { default as MciTable } from './shared/ui/mciTable/MciTable.tsx';
12
13
  export { default as MciUpload } from './shared/ui/mciUpload/MciUpload.tsx';
14
+ export { default as MciUploadButton } from './shared/ui/mciUpload/MciUploadButton.tsx';
13
15
  export { default as MciModal } from './shared/ui/MciModal/MciModal.tsx';
14
16
  export { default as MciPagination } from './shared/ui/mciPagination/MciPagination.tsx';
15
17
  export { default as MciSkeleton } from './shared/ui/mciSkeleton/MciSkeleton.tsx';
@@ -29,4 +31,6 @@ export { default as useTableColumnSettings } from './shared/lib/hooks/useTableCo
29
31
  export type { MciTableColumn, MciTableProps, ColumnKey } from './shared/types/mci-table.types.ts';
30
32
  export type { Step as MciStep } from './shared/types/ui/stepper.types.ts';
31
33
  export type { NoteItem } from './shared/types/ui/note.types.ts';
34
+ export type { MciEmptyLocale, MciEmptyProps } from './shared/types/ui/empty.types.ts';
35
+ export type { FileInfo, MciUploadButtonProps, MciUploadFileValue, MciUploadProps } from './shared/types/ui/upload.types.ts';
32
36
  export type * from './shared/types/mci-ui.types.ts';