@adamosuiteservices/ui 2.17.1 → 2.18.1
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 +2 -2
- package/dist/components/ui/file-upload/file-upload.d.ts +5 -1
- package/dist/components/ui/file-upload-v2/file-upload-v2.d.ts +35 -0
- package/dist/components/ui/file-upload-v2/index.d.ts +1 -0
- package/dist/file-upload-v2.cjs +8 -0
- package/dist/file-upload-v2.js +339 -0
- package/dist/file-upload.cjs +4 -4
- package/dist/file-upload.js +160 -153
- package/dist/styles.css +1 -1
- package/docs/ai-guide.md +7 -7
- package/docs/components/ui/file-upload-v2.md +1116 -0
- package/docs/components/ui/file-upload.md +210 -0
- package/llm.txt +8 -5
- package/package.json +5 -1
package/README.md
CHANGED
|
@@ -29,7 +29,7 @@ npm install @adamosuiteservices/ui react-day-picker@^9.11.1 cmdk@^1.1.1 date-fns
|
|
|
29
29
|
|
|
30
30
|
### Component documentation
|
|
31
31
|
|
|
32
|
-
- **[UI components](docs/components/ui/)** - Documentation for
|
|
32
|
+
- **[UI components](docs/components/ui/)** - Documentation for 41+ UI components
|
|
33
33
|
- Forms: Button, Input, Select, Checkbox, Radio, Switch, Textarea, Combobox
|
|
34
34
|
- Overlays: Dialog, Sheet, Popover, Tooltip, Dropdown Menu, Context Menu
|
|
35
35
|
- Feedback: Alert, Progress, Spinner
|
|
@@ -70,7 +70,7 @@ function App() {
|
|
|
70
70
|
|
|
71
71
|
## Key features
|
|
72
72
|
|
|
73
|
-
- ✅ **
|
|
73
|
+
- ✅ **46+ production-ready components** (UI + Layout)
|
|
74
74
|
- ✅ **Built-in accessibility** (ARIA attributes, keyboard navigation)
|
|
75
75
|
- ✅ **Dark mode support** across all components
|
|
76
76
|
- ✅ **Type-safe** with full TypeScript definitions
|
|
@@ -10,6 +10,10 @@ export type FileUploadProps = ComponentProps<"div"> & Readonly<{
|
|
|
10
10
|
selectedFiles?: File[];
|
|
11
11
|
onFileSelect?: (file: File | null) => void;
|
|
12
12
|
onFilesSelect?: (files: File[]) => void;
|
|
13
|
+
onFileAdd?: (file: File) => void;
|
|
14
|
+
onFileRemove?: (file: File) => void;
|
|
15
|
+
onFilesAdd?: (files: File[]) => void;
|
|
16
|
+
onFilesRemove?: (files: File[]) => void;
|
|
13
17
|
onInvalidFile?: (file: File, reason: "extension" | "size") => void;
|
|
14
18
|
acceptedExtensions?: string[];
|
|
15
19
|
maxSizeInMB?: number;
|
|
@@ -22,4 +26,4 @@ export type FileUploadProps = ComponentProps<"div"> & Readonly<{
|
|
|
22
26
|
labels?: FileUploadLabels;
|
|
23
27
|
input?: ComponentProps<"input">;
|
|
24
28
|
}>;
|
|
25
|
-
export declare function FileUpload({ className, selectedFile, selectedFiles, onFileSelect, onFilesSelect, onInvalidFile, acceptedExtensions, maxSizeInMB, maxFiles, multiple, filesPosition, invalid, disabled, "aria-invalid": ariaInvalid, labels, input, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
export declare function FileUpload({ className, selectedFile, selectedFiles, onFileSelect, onFilesSelect, onFileAdd, onFileRemove, onFilesAdd, onFilesRemove, onInvalidFile, acceptedExtensions, maxSizeInMB, maxFiles, multiple, filesPosition, invalid, disabled, "aria-invalid": ariaInvalid, labels, input, ...props }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import { ComponentProps } from 'react';
|
|
2
|
+
export type FileUploadV2Labels = {
|
|
3
|
+
dragDrop?: string;
|
|
4
|
+
selectFile?: string;
|
|
5
|
+
fileRequirements?: string;
|
|
6
|
+
filesSelected?: (count: number) => string;
|
|
7
|
+
};
|
|
8
|
+
export type FileWithMetadata = {
|
|
9
|
+
id: string;
|
|
10
|
+
file: File;
|
|
11
|
+
metadata?: Record<string, unknown>;
|
|
12
|
+
};
|
|
13
|
+
export type FileUploadV2Props = ComponentProps<"div"> & Readonly<{
|
|
14
|
+
selectedFile?: FileWithMetadata | null;
|
|
15
|
+
selectedFiles?: FileWithMetadata[];
|
|
16
|
+
onFileSelect?: (file: FileWithMetadata | null) => void;
|
|
17
|
+
onFilesSelect?: (files: FileWithMetadata[]) => void;
|
|
18
|
+
onFileAdd?: (file: FileWithMetadata) => void;
|
|
19
|
+
onFileRemove?: (file: FileWithMetadata) => void;
|
|
20
|
+
onFilesAdd?: (files: FileWithMetadata[]) => void;
|
|
21
|
+
onFilesRemove?: (files: FileWithMetadata[]) => void;
|
|
22
|
+
onInvalidFile?: (file: FileWithMetadata, reason: "extension" | "size") => void;
|
|
23
|
+
generateId?: (file: File) => string;
|
|
24
|
+
acceptedExtensions?: string[];
|
|
25
|
+
maxSizeInMB?: number;
|
|
26
|
+
maxFiles?: number;
|
|
27
|
+
multiple?: boolean;
|
|
28
|
+
filesPosition?: "above" | "below";
|
|
29
|
+
invalid?: boolean;
|
|
30
|
+
disabled?: boolean;
|
|
31
|
+
"aria-invalid"?: boolean;
|
|
32
|
+
labels?: FileUploadV2Labels;
|
|
33
|
+
input?: ComponentProps<"input">;
|
|
34
|
+
}>;
|
|
35
|
+
export declare function FileUploadV2({ className, selectedFile, selectedFiles, onFileSelect, onFilesSelect, onFileAdd, onFileRemove, onFilesAdd, onFilesRemove, onInvalidFile, acceptedExtensions, maxSizeInMB, maxFiles, multiple, filesPosition, invalid, disabled, "aria-invalid": ariaInvalid, generateId, labels, input, ...props }: FileUploadV2Props): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './file-upload-v2';
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-BB_1_6y_.cjs"),A=require("./button-CFJs0esR.cjs"),L=require("./icon-B7joBr0A.cjs"),N=require("./typography-Bj8oEDuE.cjs"),y=require("./index-DoxiiusW.cjs"),I=require("react");function te({isDragging:m,isMultiple:o,invalid:a,disabled:r,accept:i,acceptedExtensions:l,maxSizeInMB:p,maxFiles:c,labels:u,input:g,onDragOver:h,onDragLeave:w,onDrop:R,onFileChange:q}){const b=g?.id||`file-upload-v2-${Math.random().toString(36).substring(2,11)}`;return t.jsxRuntimeExports.jsxs("div",{onDragOver:r?void 0:h,onDragLeave:r?void 0:w,onDrop:r?void 0:R,className:y.cn(`
|
|
2
|
+
adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
|
|
3
|
+
adm:border-2
|
|
4
|
+
`,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":m&&!a&&!r,"adm:border-destructive":a&&!r,"adm:border-input":!m&&!a,"adm:cursor-not-allowed adm:opacity-50":r}),children:[t.jsxRuntimeExports.jsx("div",{className:y.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",a&&!r?"adm:bg-destructive/10":"adm:bg-primary-50"),children:t.jsxRuntimeExports.jsx(L.Icon,{symbol:"text_snippet",className:a&&!r?"adm:text-destructive":"adm:text-primary"})}),t.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[t.jsxRuntimeExports.jsx(N.Typography,{color:a&&!r?"destructive":void 0,children:u?.dragDrop||(o?"Drag and drop your files here or":"Drag and drop your file here or")}),t.jsxRuntimeExports.jsxs("label",{htmlFor:b,children:[t.jsxRuntimeExports.jsx("input",{...g,id:b,type:"file",accept:i,multiple:o,onChange:q,disabled:r,className:"adm:hidden"}),t.jsxRuntimeExports.jsx(A.Button,{asChild:!0,type:"button",variant:"link",className:y.cn("adm:cursor-pointer",r&&`
|
|
5
|
+
adm:pointer-events-none
|
|
6
|
+
`),disabled:r,children:t.jsxRuntimeExports.jsx("span",{children:u?.selectFile||(o?"Select files":"Select the file")})})]})]}),t.jsxRuntimeExports.jsx(N.Typography,{className:"adm:text-center",color:a&&!r?"destructive":"muted",children:u?.fileRequirements||(l&&l.length>0?`Allowed files: ${l.join(", ")}. Maximum size ${p} MB${o?`. Up to ${c} files`:""}.`:`Maximum size ${p} MB${o?`. Up to ${c} files`:""}.`)})]})}function re({fileWithMetadata:m,invalid:o,disabled:a,onRemove:r}){const{file:i}=m;return t.jsxRuntimeExports.jsxs("div",{className:y.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",o&&!a?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted",a&&"adm:cursor-not-allowed adm:opacity-50"),children:[t.jsxRuntimeExports.jsx("div",{className:y.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",o&&!a?"adm:bg-destructive/10":"adm:bg-primary-50"),children:t.jsxRuntimeExports.jsx(L.Icon,{symbol:"text_snippet",className:o&&!a?"adm:text-destructive":"adm:text-primary"})}),t.jsxRuntimeExports.jsxs("div",{className:`
|
|
7
|
+
adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
|
|
8
|
+
`,children:[t.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:t.jsxRuntimeExports.jsx(N.Typography,{className:"adm:truncate adm:font-semibold",children:i.name})}),t.jsxRuntimeExports.jsxs(N.Typography,{className:"adm:shrink-0",color:"muted",children:[(i.size/1024/1024).toFixed(1)," MB"]})]}),t.jsxRuntimeExports.jsx(A.Button,{variant:"destructive-medium",onClick:r,type:"button",disabled:a,children:t.jsxRuntimeExports.jsx(L.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function B({files:m,isMultiple:o,invalid:a,disabled:r,labels:i,onRemoveFile:l,onClearAll:p}){return m.length===0?null:t.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[o&&m.length>1&&t.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[t.jsxRuntimeExports.jsx(N.Typography,{className:"adm:text-sm adm:font-medium",color:a&&!r?"destructive":void 0,children:i?.filesSelected?.(m.length)||`${m.length} file${m.length!==1?"s":""} selected`}),t.jsxRuntimeExports.jsx(A.Button,{variant:"ghost",size:"sm",onClick:p,type:"button",disabled:r,children:"Clear all"})]}),m.map((c,u)=>t.jsxRuntimeExports.jsx(re,{fileWithMetadata:c,invalid:a,disabled:r,onRemove:()=>l(u)},c.id))]})}function se({className:m,selectedFile:o,selectedFiles:a,onFileSelect:r,onFilesSelect:i,onFileAdd:l,onFileRemove:p,onFilesAdd:c,onFilesRemove:u,onInvalidFile:g,acceptedExtensions:h,maxSizeInMB:w=50,maxFiles:R=10,multiple:q=!1,filesPosition:b="below",invalid:U=!1,disabled:G=!1,"aria-invalid":M,generateId:_,labels:$,input:F,...H}){const[J,V]=I.useState(!1),[K,Q]=I.useState(!1),E=I.useRef(null);I.useEffect(()=>{const e=()=>{if(E.current){const s=E.current.closest("fieldset");Q(s?.disabled??!1)}};e();const n=new MutationObserver(e);if(E.current){const s=E.current.closest("fieldset");s&&n.observe(s,{attributes:!0,attributeFilter:["disabled"]})}return()=>n.disconnect()},[]);const X=h?.join(",")||"",Y=w*1024*1024,d=q||a!==void 0||i!==void 0,j=d?a||[]:o?[o]:[],C=U||M,x=G||K,Z=_||(e=>`${Date.now()}-${Math.random().toString(36).substring(2,11)}-${e.name}`),D=e=>({id:Z(e),file:e}),P=e=>{x||(e.preventDefault(),V(!0))},W=e=>{x||(e.preventDefault(),V(!1))},S=e=>{if(!x)if(e.preventDefault(),V(!1),d){const s=Array.from(e.dataTransfer.files).filter(T);if(s.length>0){const f=s.map(D),O=[...a||[],...f].slice(0,R);i&&i(O),c&&c(f)}}else{const n=e.dataTransfer.files[0];if(n&&T(n)){const s=D(n);r&&r(s),l&&l(s)}}},ee=e=>{if(!x){if(d){const s=(e.target.files?Array.from(e.target.files):[]).filter(T);if(s.length>0){const f=s.map(D),O=[...a||[],...f].slice(0,R);i&&i(O),c&&c(f)}}else{const n=e.target.files?.[0];if(n&&T(n)){const s=D(n);r&&r(s),l&&l(s)}}e.target.value=""}},k=e=>{if(x)return;const n=j[e];if(d){const s=j.filter((f,v)=>v!==e);i&&i(s),u&&n&&u([n])}else r&&r(null),p&&n&&p(n)},T=e=>{const n=e.name.substring(e.name.lastIndexOf(".")),s=!h||h.length===0||h.includes(n.toLowerCase()),f=e.size<=Y;if(!s||!f){const v=D(e);!s&&g?g(v,"extension"):!f&&g&&g(v,"size")}return s&&f},z=()=>{if(x)return;const e=[...j];d?(i&&i([]),u&&e.length>0&&u(e)):(r&&r(null),p&&e.length>0&&p(e[0]))};return t.jsxRuntimeExports.jsxs("div",{ref:E,className:y.cn("adm:flex adm:flex-col adm:gap-4",m),...H,children:[d&&b==="above"&&t.jsxRuntimeExports.jsx(B,{files:j,isMultiple:d,invalid:C,disabled:x,labels:$,onRemoveFile:k,onClearAll:z}),(d||j.length===0)&&t.jsxRuntimeExports.jsx(te,{isDragging:J,isMultiple:d,invalid:C,disabled:x,accept:X,acceptedExtensions:h,maxSizeInMB:w,maxFiles:R,labels:$,input:F,onDragOver:P,onDragLeave:W,onDrop:S,onFileChange:ee}),!d&&j.length>0&&t.jsxRuntimeExports.jsx(B,{files:j,isMultiple:d,invalid:C,disabled:x,labels:$,onRemoveFile:k,onClearAll:z}),d&&b==="below"&&t.jsxRuntimeExports.jsx(B,{files:j,isMultiple:d,invalid:C,disabled:x,labels:$,onRemoveFile:k,onClearAll:z})]})}exports.FileUploadV2=se;
|
|
@@ -0,0 +1,339 @@
|
|
|
1
|
+
import { j as t } from "./jsx-runtime-BzflLqGi.js";
|
|
2
|
+
import { B as G } from "./button-BnUlAtuD.js";
|
|
3
|
+
import { I as B } from "./icon-BFQz1tQC.js";
|
|
4
|
+
import { T as $ } from "./typography-MnY0LQoZ.js";
|
|
5
|
+
import { c as y } from "./index-CRiPKpXj.js";
|
|
6
|
+
import { useState as U, useRef as te, useEffect as re } from "react";
|
|
7
|
+
function ae({
|
|
8
|
+
isDragging: o,
|
|
9
|
+
isMultiple: d,
|
|
10
|
+
invalid: s,
|
|
11
|
+
disabled: r,
|
|
12
|
+
accept: i,
|
|
13
|
+
acceptedExtensions: l,
|
|
14
|
+
maxSizeInMB: x,
|
|
15
|
+
maxFiles: c,
|
|
16
|
+
labels: f,
|
|
17
|
+
input: g,
|
|
18
|
+
onDragOver: v,
|
|
19
|
+
onDragLeave: C,
|
|
20
|
+
onDrop: b,
|
|
21
|
+
onFileChange: T
|
|
22
|
+
}) {
|
|
23
|
+
const D = g?.id || `file-upload-v2-${Math.random().toString(36).substring(2, 11)}`;
|
|
24
|
+
return /* @__PURE__ */ t.jsxs(
|
|
25
|
+
"div",
|
|
26
|
+
{
|
|
27
|
+
onDragOver: r ? void 0 : v,
|
|
28
|
+
onDragLeave: r ? void 0 : C,
|
|
29
|
+
onDrop: r ? void 0 : b,
|
|
30
|
+
className: y(
|
|
31
|
+
`
|
|
32
|
+
adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
|
|
33
|
+
adm:border-2
|
|
34
|
+
`,
|
|
35
|
+
"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",
|
|
36
|
+
{
|
|
37
|
+
"adm:border-primary": o && !s && !r,
|
|
38
|
+
"adm:border-destructive": s && !r,
|
|
39
|
+
"adm:border-input": !o && !s,
|
|
40
|
+
"adm:cursor-not-allowed adm:opacity-50": r
|
|
41
|
+
}
|
|
42
|
+
),
|
|
43
|
+
children: [
|
|
44
|
+
/* @__PURE__ */ t.jsx(
|
|
45
|
+
"div",
|
|
46
|
+
{
|
|
47
|
+
className: y(
|
|
48
|
+
"adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",
|
|
49
|
+
s && !r ? "adm:bg-destructive/10" : "adm:bg-primary-50"
|
|
50
|
+
),
|
|
51
|
+
children: /* @__PURE__ */ t.jsx(
|
|
52
|
+
B,
|
|
53
|
+
{
|
|
54
|
+
symbol: "text_snippet",
|
|
55
|
+
className: s && !r ? "adm:text-destructive" : "adm:text-primary"
|
|
56
|
+
}
|
|
57
|
+
)
|
|
58
|
+
}
|
|
59
|
+
),
|
|
60
|
+
/* @__PURE__ */ t.jsxs("div", { className: "adm:flex adm:flex-col adm:items-center adm:gap-2", children: [
|
|
61
|
+
/* @__PURE__ */ t.jsx($, { color: s && !r ? "destructive" : void 0, children: f?.dragDrop || (d ? "Drag and drop your files here or" : "Drag and drop your file here or") }),
|
|
62
|
+
/* @__PURE__ */ t.jsxs("label", { htmlFor: D, children: [
|
|
63
|
+
/* @__PURE__ */ t.jsx(
|
|
64
|
+
"input",
|
|
65
|
+
{
|
|
66
|
+
...g,
|
|
67
|
+
id: D,
|
|
68
|
+
type: "file",
|
|
69
|
+
accept: i,
|
|
70
|
+
multiple: d,
|
|
71
|
+
onChange: T,
|
|
72
|
+
disabled: r,
|
|
73
|
+
className: "adm:hidden"
|
|
74
|
+
}
|
|
75
|
+
),
|
|
76
|
+
/* @__PURE__ */ t.jsx(
|
|
77
|
+
G,
|
|
78
|
+
{
|
|
79
|
+
asChild: !0,
|
|
80
|
+
type: "button",
|
|
81
|
+
variant: "link",
|
|
82
|
+
className: y("adm:cursor-pointer", r && `
|
|
83
|
+
adm:pointer-events-none
|
|
84
|
+
`),
|
|
85
|
+
disabled: r,
|
|
86
|
+
children: /* @__PURE__ */ t.jsx("span", { children: f?.selectFile || (d ? "Select files" : "Select the file") })
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
] })
|
|
90
|
+
] }),
|
|
91
|
+
/* @__PURE__ */ t.jsx($, { className: "adm:text-center", color: s && !r ? "destructive" : "muted", children: f?.fileRequirements || (l && l.length > 0 ? `Allowed files: ${l.join(", ")}. Maximum size ${x} MB${d ? `. Up to ${c} files` : ""}.` : `Maximum size ${x} MB${d ? `. Up to ${c} files` : ""}.`) })
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
);
|
|
95
|
+
}
|
|
96
|
+
function se({ fileWithMetadata: o, invalid: d, disabled: s, onRemove: r }) {
|
|
97
|
+
const { file: i } = o;
|
|
98
|
+
return /* @__PURE__ */ t.jsxs(
|
|
99
|
+
"div",
|
|
100
|
+
{
|
|
101
|
+
className: y(
|
|
102
|
+
"adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",
|
|
103
|
+
d && !s ? "adm:border-destructive adm:bg-destructive/5" : "adm:border-input adm:bg-muted",
|
|
104
|
+
s && "adm:cursor-not-allowed adm:opacity-50"
|
|
105
|
+
),
|
|
106
|
+
children: [
|
|
107
|
+
/* @__PURE__ */ t.jsx(
|
|
108
|
+
"div",
|
|
109
|
+
{
|
|
110
|
+
className: y(
|
|
111
|
+
"adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",
|
|
112
|
+
d && !s ? "adm:bg-destructive/10" : "adm:bg-primary-50"
|
|
113
|
+
),
|
|
114
|
+
children: /* @__PURE__ */ t.jsx(
|
|
115
|
+
B,
|
|
116
|
+
{
|
|
117
|
+
symbol: "text_snippet",
|
|
118
|
+
className: d && !s ? "adm:text-destructive" : "adm:text-primary"
|
|
119
|
+
}
|
|
120
|
+
)
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
/* @__PURE__ */ t.jsxs(
|
|
124
|
+
"div",
|
|
125
|
+
{
|
|
126
|
+
className: `
|
|
127
|
+
adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
|
|
128
|
+
`,
|
|
129
|
+
children: [
|
|
130
|
+
/* @__PURE__ */ t.jsx("div", { className: "adm:min-w-0 adm:flex-1", children: /* @__PURE__ */ t.jsx($, { className: "adm:truncate adm:font-semibold", children: i.name }) }),
|
|
131
|
+
/* @__PURE__ */ t.jsxs($, { className: "adm:shrink-0", color: "muted", children: [
|
|
132
|
+
(i.size / 1024 / 1024).toFixed(1),
|
|
133
|
+
" MB"
|
|
134
|
+
] })
|
|
135
|
+
]
|
|
136
|
+
}
|
|
137
|
+
),
|
|
138
|
+
/* @__PURE__ */ t.jsx(
|
|
139
|
+
G,
|
|
140
|
+
{
|
|
141
|
+
variant: "destructive-medium",
|
|
142
|
+
onClick: r,
|
|
143
|
+
type: "button",
|
|
144
|
+
disabled: s,
|
|
145
|
+
children: /* @__PURE__ */ t.jsx(B, { symbol: "delete", className: "adm:text-destructive" })
|
|
146
|
+
}
|
|
147
|
+
)
|
|
148
|
+
]
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
function A({ files: o, isMultiple: d, invalid: s, disabled: r, labels: i, onRemoveFile: l, onClearAll: x }) {
|
|
153
|
+
return o.length === 0 ? null : /* @__PURE__ */ t.jsxs("div", { className: "adm:flex adm:flex-col adm:gap-3", children: [
|
|
154
|
+
d && o.length > 1 && /* @__PURE__ */ t.jsxs("div", { className: "adm:flex adm:items-center adm:justify-between", children: [
|
|
155
|
+
/* @__PURE__ */ t.jsx($, { className: "adm:text-sm adm:font-medium", color: s && !r ? "destructive" : void 0, children: i?.filesSelected?.(o.length) || `${o.length} file${o.length !== 1 ? "s" : ""} selected` }),
|
|
156
|
+
/* @__PURE__ */ t.jsx(
|
|
157
|
+
G,
|
|
158
|
+
{
|
|
159
|
+
variant: "ghost",
|
|
160
|
+
size: "sm",
|
|
161
|
+
onClick: x,
|
|
162
|
+
type: "button",
|
|
163
|
+
disabled: r,
|
|
164
|
+
children: "Clear all"
|
|
165
|
+
}
|
|
166
|
+
)
|
|
167
|
+
] }),
|
|
168
|
+
o.map((c, f) => /* @__PURE__ */ t.jsx(
|
|
169
|
+
se,
|
|
170
|
+
{
|
|
171
|
+
fileWithMetadata: c,
|
|
172
|
+
invalid: s,
|
|
173
|
+
disabled: r,
|
|
174
|
+
onRemove: () => l(f)
|
|
175
|
+
},
|
|
176
|
+
c.id
|
|
177
|
+
))
|
|
178
|
+
] });
|
|
179
|
+
}
|
|
180
|
+
function fe({
|
|
181
|
+
className: o,
|
|
182
|
+
selectedFile: d,
|
|
183
|
+
selectedFiles: s,
|
|
184
|
+
onFileSelect: r,
|
|
185
|
+
onFilesSelect: i,
|
|
186
|
+
onFileAdd: l,
|
|
187
|
+
onFileRemove: x,
|
|
188
|
+
onFilesAdd: c,
|
|
189
|
+
onFilesRemove: f,
|
|
190
|
+
onInvalidFile: g,
|
|
191
|
+
acceptedExtensions: v,
|
|
192
|
+
maxSizeInMB: C = 50,
|
|
193
|
+
maxFiles: b = 10,
|
|
194
|
+
multiple: T = !1,
|
|
195
|
+
filesPosition: D = "below",
|
|
196
|
+
invalid: _ = !1,
|
|
197
|
+
disabled: M = !1,
|
|
198
|
+
"aria-invalid": q,
|
|
199
|
+
generateId: F,
|
|
200
|
+
labels: I,
|
|
201
|
+
input: H,
|
|
202
|
+
...J
|
|
203
|
+
}) {
|
|
204
|
+
const [K, V] = U(!1), [Q, X] = U(!1), N = te(null);
|
|
205
|
+
re(() => {
|
|
206
|
+
const e = () => {
|
|
207
|
+
if (N.current) {
|
|
208
|
+
const a = N.current.closest("fieldset");
|
|
209
|
+
X(a?.disabled ?? !1);
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
e();
|
|
213
|
+
const n = new MutationObserver(e);
|
|
214
|
+
if (N.current) {
|
|
215
|
+
const a = N.current.closest("fieldset");
|
|
216
|
+
a && n.observe(a, { attributes: !0, attributeFilter: ["disabled"] });
|
|
217
|
+
}
|
|
218
|
+
return () => n.disconnect();
|
|
219
|
+
}, []);
|
|
220
|
+
const Y = v?.join(",") || "", Z = C * 1024 * 1024, m = T || s !== void 0 || i !== void 0, h = m ? s || [] : d ? [d] : [], k = _ || q, u = M || Q, W = F || ((e) => `${Date.now()}-${Math.random().toString(36).substring(2, 11)}-${e.name}`), w = (e) => ({
|
|
221
|
+
id: W(e),
|
|
222
|
+
file: e
|
|
223
|
+
}), E = (e) => {
|
|
224
|
+
u || (e.preventDefault(), V(!0));
|
|
225
|
+
}, P = (e) => {
|
|
226
|
+
u || (e.preventDefault(), V(!1));
|
|
227
|
+
}, S = (e) => {
|
|
228
|
+
if (!u)
|
|
229
|
+
if (e.preventDefault(), V(!1), m) {
|
|
230
|
+
const a = Array.from(e.dataTransfer.files).filter(z);
|
|
231
|
+
if (a.length > 0) {
|
|
232
|
+
const p = a.map(w), R = [...s || [], ...p].slice(0, b);
|
|
233
|
+
i && i(R), c && c(p);
|
|
234
|
+
}
|
|
235
|
+
} else {
|
|
236
|
+
const n = e.dataTransfer.files[0];
|
|
237
|
+
if (n && z(n)) {
|
|
238
|
+
const a = w(n);
|
|
239
|
+
r && r(a), l && l(a);
|
|
240
|
+
}
|
|
241
|
+
}
|
|
242
|
+
}, ee = (e) => {
|
|
243
|
+
if (!u) {
|
|
244
|
+
if (m) {
|
|
245
|
+
const a = (e.target.files ? Array.from(e.target.files) : []).filter(z);
|
|
246
|
+
if (a.length > 0) {
|
|
247
|
+
const p = a.map(w), R = [...s || [], ...p].slice(0, b);
|
|
248
|
+
i && i(R), c && c(p);
|
|
249
|
+
}
|
|
250
|
+
} else {
|
|
251
|
+
const n = e.target.files?.[0];
|
|
252
|
+
if (n && z(n)) {
|
|
253
|
+
const a = w(n);
|
|
254
|
+
r && r(a), l && l(a);
|
|
255
|
+
}
|
|
256
|
+
}
|
|
257
|
+
e.target.value = "";
|
|
258
|
+
}
|
|
259
|
+
}, L = (e) => {
|
|
260
|
+
if (u) return;
|
|
261
|
+
const n = h[e];
|
|
262
|
+
if (m) {
|
|
263
|
+
const a = h.filter((p, j) => j !== e);
|
|
264
|
+
i && i(a), f && n && f([n]);
|
|
265
|
+
} else
|
|
266
|
+
r && r(null), x && n && x(n);
|
|
267
|
+
}, z = (e) => {
|
|
268
|
+
const n = e.name.substring(e.name.lastIndexOf(".")), a = !v || v.length === 0 || v.includes(n.toLowerCase()), p = e.size <= Z;
|
|
269
|
+
if (!a || !p) {
|
|
270
|
+
const j = w(e);
|
|
271
|
+
!a && g ? g(j, "extension") : !p && g && g(j, "size");
|
|
272
|
+
}
|
|
273
|
+
return a && p;
|
|
274
|
+
}, O = () => {
|
|
275
|
+
if (u) return;
|
|
276
|
+
const e = [...h];
|
|
277
|
+
m ? (i && i([]), f && e.length > 0 && f(e)) : (r && r(null), x && e.length > 0 && x(e[0]));
|
|
278
|
+
};
|
|
279
|
+
return /* @__PURE__ */ t.jsxs("div", { ref: N, className: y("adm:flex adm:flex-col adm:gap-4", o), ...J, children: [
|
|
280
|
+
m && D === "above" && /* @__PURE__ */ t.jsx(
|
|
281
|
+
A,
|
|
282
|
+
{
|
|
283
|
+
files: h,
|
|
284
|
+
isMultiple: m,
|
|
285
|
+
invalid: k,
|
|
286
|
+
disabled: u,
|
|
287
|
+
labels: I,
|
|
288
|
+
onRemoveFile: L,
|
|
289
|
+
onClearAll: O
|
|
290
|
+
}
|
|
291
|
+
),
|
|
292
|
+
(m || h.length === 0) && /* @__PURE__ */ t.jsx(
|
|
293
|
+
ae,
|
|
294
|
+
{
|
|
295
|
+
isDragging: K,
|
|
296
|
+
isMultiple: m,
|
|
297
|
+
invalid: k,
|
|
298
|
+
disabled: u,
|
|
299
|
+
accept: Y,
|
|
300
|
+
acceptedExtensions: v,
|
|
301
|
+
maxSizeInMB: C,
|
|
302
|
+
maxFiles: b,
|
|
303
|
+
labels: I,
|
|
304
|
+
input: H,
|
|
305
|
+
onDragOver: E,
|
|
306
|
+
onDragLeave: P,
|
|
307
|
+
onDrop: S,
|
|
308
|
+
onFileChange: ee
|
|
309
|
+
}
|
|
310
|
+
),
|
|
311
|
+
!m && h.length > 0 && /* @__PURE__ */ t.jsx(
|
|
312
|
+
A,
|
|
313
|
+
{
|
|
314
|
+
files: h,
|
|
315
|
+
isMultiple: m,
|
|
316
|
+
invalid: k,
|
|
317
|
+
disabled: u,
|
|
318
|
+
labels: I,
|
|
319
|
+
onRemoveFile: L,
|
|
320
|
+
onClearAll: O
|
|
321
|
+
}
|
|
322
|
+
),
|
|
323
|
+
m && D === "below" && /* @__PURE__ */ t.jsx(
|
|
324
|
+
A,
|
|
325
|
+
{
|
|
326
|
+
files: h,
|
|
327
|
+
isMultiple: m,
|
|
328
|
+
invalid: k,
|
|
329
|
+
disabled: u,
|
|
330
|
+
labels: I,
|
|
331
|
+
onRemoveFile: L,
|
|
332
|
+
onClearAll: O
|
|
333
|
+
}
|
|
334
|
+
)
|
|
335
|
+
] });
|
|
336
|
+
}
|
|
337
|
+
export {
|
|
338
|
+
fe as FileUploadV2
|
|
339
|
+
};
|
package/dist/file-upload.cjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("./jsx-runtime-BB_1_6y_.cjs"),L=require("./button-CFJs0esR.cjs"),B=require("./icon-B7joBr0A.cjs"),D=require("./typography-Bj8oEDuE.cjs"),g=require("./index-DoxiiusW.cjs"),T=require("react");function P({isDragging:i,isMultiple:o,invalid:s,disabled:r,accept:m,acceptedExtensions:c,maxSizeInMB:f,maxFiles:u,labels:l,input:j,onDragOver:h,onDragLeave:N,onDrop:v,onFileChange:q}){const y=j?.id||`file-upload-${Math.random().toString(36).substring(2,11)}`;return t.jsxRuntimeExports.jsxs("div",{onDragOver:r?void 0:h,onDragLeave:r?void 0:N,onDrop:r?void 0:v,className:g.cn(`
|
|
2
2
|
adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
|
|
3
3
|
adm:border-2
|
|
4
|
-
`,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":
|
|
4
|
+
`,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":i&&!s&&!r,"adm:border-destructive":s&&!r,"adm:border-input":!i&&!s,"adm:cursor-not-allowed adm:opacity-50":r}),children:[t.jsxRuntimeExports.jsx("div",{className:g.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",s&&!r?"adm:bg-destructive/10":"adm:bg-primary-50"),children:t.jsxRuntimeExports.jsx(B.Icon,{symbol:"text_snippet",className:s&&!r?"adm:text-destructive":"adm:text-primary"})}),t.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[t.jsxRuntimeExports.jsx(D.Typography,{color:s&&!r?"destructive":void 0,children:l?.dragDrop||(o?"Drag and drop your files here or":"Drag and drop your file here or")}),t.jsxRuntimeExports.jsxs("label",{htmlFor:y,children:[t.jsxRuntimeExports.jsx("input",{...j,id:y,type:"file",accept:m,multiple:o,onChange:q,disabled:r,className:"adm:hidden"}),t.jsxRuntimeExports.jsx(L.Button,{asChild:!0,type:"button",variant:"link",className:g.cn("adm:cursor-pointer",r&&`
|
|
5
5
|
adm:pointer-events-none
|
|
6
|
-
`),disabled:
|
|
6
|
+
`),disabled:r,children:t.jsxRuntimeExports.jsx("span",{children:l?.selectFile||(o?"Select files":"Select the file")})})]})]}),t.jsxRuntimeExports.jsx(D.Typography,{className:"adm:text-center",color:s&&!r?"destructive":"muted",children:l?.fileRequirements||(c&&c.length>0?`Allowed files: ${c.join(", ")}. Maximum size ${f} MB${o?`. Up to ${u} files`:""}.`:`Maximum size ${f} MB${o?`. Up to ${u} files`:""}.`)})]})}function F({file:i,invalid:o,disabled:s,onRemove:r}){return t.jsxRuntimeExports.jsxs("div",{className:g.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",o&&!s?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted",s&&"adm:cursor-not-allowed adm:opacity-50"),children:[t.jsxRuntimeExports.jsx("div",{className:g.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",o&&!s?"adm:bg-destructive/10":"adm:bg-primary-50"),children:t.jsxRuntimeExports.jsx(B.Icon,{symbol:"text_snippet",className:o&&!s?"adm:text-destructive":"adm:text-primary"})}),t.jsxRuntimeExports.jsxs("div",{className:`
|
|
7
7
|
adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
|
|
8
|
-
`,children:[
|
|
8
|
+
`,children:[t.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:t.jsxRuntimeExports.jsx(D.Typography,{className:"adm:truncate adm:font-semibold",children:i.name})}),t.jsxRuntimeExports.jsxs(D.Typography,{className:"adm:shrink-0",color:"muted",children:[(i.size/1024/1024).toFixed(1)," MB"]})]}),t.jsxRuntimeExports.jsx(L.Button,{variant:"destructive-medium",onClick:r,type:"button",disabled:s,children:t.jsxRuntimeExports.jsx(B.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function O({files:i,isMultiple:o,invalid:s,disabled:r,labels:m,onRemoveFile:c,onClearAll:f}){return i.length===0?null:t.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[o&&i.length>1&&t.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[t.jsxRuntimeExports.jsx(D.Typography,{className:"adm:text-sm adm:font-medium",color:s&&!r?"destructive":void 0,children:m?.filesSelected?.(i.length)||`${i.length} file${i.length!==1?"s":""} selected`}),t.jsxRuntimeExports.jsx(L.Button,{variant:"ghost",size:"sm",onClick:f,type:"button",disabled:r,children:"Clear all"})]}),i.map((u,l)=>t.jsxRuntimeExports.jsx(F,{file:u,invalid:s,disabled:r,onRemove:()=>c(l)},`${u.name}-${l}`))]})}function S({className:i,selectedFile:o,selectedFiles:s,onFileSelect:r,onFilesSelect:m,onFileAdd:c,onFileRemove:f,onFilesAdd:u,onFilesRemove:l,onInvalidFile:j,acceptedExtensions:h,maxSizeInMB:N=50,maxFiles:v=10,multiple:q=!1,filesPosition:y="below",invalid:A=!1,disabled:U=!1,"aria-invalid":M,labels:$,input:V,..._}){const[G,k]=T.useState(!1),[H,J]=T.useState(!1),R=T.useRef(null);T.useEffect(()=>{const e=()=>{if(R.current){const n=R.current.closest("fieldset");J(n?.disabled??!1)}};e();const a=new MutationObserver(e);if(R.current){const n=R.current.closest("fieldset");n&&a.observe(n,{attributes:!0,attributeFilter:["disabled"]})}return()=>a.disconnect()},[]);const K=h?.join(",")||"",Q=N*1024*1024,d=q||s!==void 0||m!==void 0,p=d?s||[]:o?[o]:[],w=A||M,x=U||H,W=e=>{x||(e.preventDefault(),k(!0))},X=e=>{x||(e.preventDefault(),k(!1))},Y=e=>{if(!x)if(e.preventDefault(),k(!1),d){const n=Array.from(e.dataTransfer.files).filter(C);if(n.length>0){const E=[...s||[],...n].slice(0,v);m&&m(E),u&&u(n)}}else{const a=e.dataTransfer.files[0];a&&C(a)&&(r&&r(a),c&&c(a))}},Z=e=>{if(!x){if(d){const n=(e.target.files?Array.from(e.target.files):[]).filter(C);if(n.length>0){const E=[...s||[],...n].slice(0,v);m&&m(E),u&&u(n)}}else{const a=e.target.files?.[0];a&&C(a)&&(r&&r(a),c&&c(a))}e.target.value=""}},z=e=>{if(x)return;const a=p[e];if(d){const n=p.filter((b,E)=>E!==e);m&&m(n),l&&a&&l([a])}else r&&r(null),f&&a&&f(a)},C=e=>{const a=e.name.substring(e.name.lastIndexOf(".")),n=!h||h.length===0||h.includes(a.toLowerCase()),b=e.size<=Q;return!n&&j?j(e,"extension"):!b&&j&&j(e,"size"),n&&b},I=()=>{if(x)return;const e=[...p];d?(m&&m([]),l&&e.length>0&&l(e)):(r&&r(null),f&&e.length>0&&f(e[0]))};return t.jsxRuntimeExports.jsxs("div",{ref:R,className:g.cn("adm:flex adm:flex-col adm:gap-4",i),..._,children:[d&&y==="above"&&t.jsxRuntimeExports.jsx(O,{files:p,isMultiple:d,invalid:w,disabled:x,labels:$,onRemoveFile:z,onClearAll:I}),(d||p.length===0)&&t.jsxRuntimeExports.jsx(P,{isDragging:G,isMultiple:d,invalid:w,disabled:x,accept:K,acceptedExtensions:h,maxSizeInMB:N,maxFiles:v,labels:$,input:V,onDragOver:W,onDragLeave:X,onDrop:Y,onFileChange:Z}),!d&&p.length>0&&t.jsxRuntimeExports.jsx(O,{files:p,isMultiple:d,invalid:w,disabled:x,labels:$,onRemoveFile:z,onClearAll:I}),d&&y==="below"&&t.jsxRuntimeExports.jsx(O,{files:p,isMultiple:d,invalid:w,disabled:x,labels:$,onRemoveFile:z,onClearAll:I})]})}exports.FileUpload=S;
|