@adamosuiteservices/ui 2.17.0 → 2.18.0
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/colors.css +1 -1
- package/dist/components/ui/file-upload/file-upload-v2.d.ts +35 -0
- package/dist/components/ui/file-upload/file-upload.d.ts +5 -1
- package/dist/components/ui/file-upload/index.d.ts +1 -0
- package/dist/file-upload.cjs +11 -4
- package/dist/file-upload.js +521 -183
- package/dist/styles.css +1 -1
- package/docs/ai-guide.md +7 -7
- package/docs/components/ui/file-upload-v2.md +1113 -0
- package/docs/components/ui/file-upload.md +208 -0
- package/llm.txt +8 -5
- package/package.json +1 -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
|
package/dist/colors.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--default-25: oklch(.985 0 0);--default-50: oklch(.969 0 0);--default-100: oklch(.942 0 0);--default-200: oklch(.894 0 0);--default-300: oklch(.81 0 0);--default-400: oklch(.705 0 0);--default-500: oklch(.205 0 0);--default-600: oklch(.173 0 0);--default-700: oklch(.145 0 0);--default-800: oklch(.115 0 0);--default-900: oklch(.085 0 0);--default: var(--default-
|
|
1
|
+
:root{--default-25: oklch(.985 0 0);--default-50: oklch(.969 0 0);--default-100: oklch(.942 0 0);--default-200: oklch(.894 0 0);--default-300: oklch(.81 0 0);--default-400: oklch(.705 0 0);--default-500: oklch(.205 0 0);--default-600: oklch(.173 0 0);--default-700: oklch(.145 0 0);--default-800: oklch(.115 0 0);--default-900: oklch(.085 0 0);--default: var(--default-500);--sign-25: oklch(.9913 .0013 286.38);--sign-50: oklch(.9822 .0041 271.37);--sign-100: oklch(.9442 .0123 276.09);--sign-200: oklch(.8877 .025 275.88);--sign-300: oklch(.7804 .0516 277.7);--sign-400: oklch(.602 .0996 276.31);--sign-500: oklch(.4976 .1199 273.84);--sign-600: oklch(.4215 .1013 274.88);--sign-700: oklch(.386 .0871 274.07);--sign-800: oklch(.3227 .0681 274.09);--sign-900: oklch(.1925 .0327 274.82);--sign: var(--sign-500);--id-25: oklch(.9847 .0083 236.56);--id-50: oklch(.9771 .0125 236.62);--id-100: oklch(.9514 .025 236.82);--id-200: oklch(.9011 .0571 231.47);--id-300: oklch(.8297 .1025 229.8);--id-400: oklch(.7586 .1404 232.13);--id-500: oklch(.6861 .1512 238.37);--id-600: oklch(.5934 .139578 241.5185);--id-700: oklch(.5029 .1197 242.45);--id-800: oklch(.4438 .1014 241.26);--id-900: oklch(.3917 .086 241.41);--id: var(--id-500);--pay-25: oklch(.9796 .0075 186.9);--pay-50: oklch(.9572 .0138 191.39);--pay-100: oklch(.9142 .0277 188.27);--pay-200: oklch(.8315 .0554 187.51);--pay-300: oklch(.7477 .0802 186.37);--pay-400: oklch(.6706 .0984 184.77);--pay-500: oklch(.5963 .1044 182.21);--pay-600: oklch(.5091 .0885 182.45);--pay-700: oklch(.4146 .0713 182.72);--pay-800: oklch(.3181 .0532 183.32);--pay-900: oklch(.2094 .0331 184.68);--pay: var(--pay-500);--risk-25: oklch(.9873 .006673 295.4541);--risk-50: oklch(.9691 .0161 293.76);--risk-100: oklch(.9426 .0283 292.41);--risk-200: oklch(.8943 .0549 293.28);--risk-300: oklch(.8103 .1012 292.92);--risk-400: oklch(.7052 .1618 292.33);--risk-500: oklch(.6012 .2213 291.26);--risk-600: oklch(.5371 .2485 291.51);--risk-700: oklch(.4866 .2429 290.94);--risk-800: oklch(.4278 .2124 290.82);--risk-900: oklch(.3762 .1802 291.97);--risk: var(--risk-500);--check-25: oklch(.985 .02 265);--check-50: oklch(.96 .04 265);--check-100: oklch(.93 .07 265);--check-200: oklch(.87 .11 265);--check-300: oklch(.8 .15 265);--check-400: oklch(.73 .19 265);--check-500: oklch(.67 .215 265);--check-600: oklch(.62 .23 265);--check-700: oklch(.54 .2 265);--check-800: oklch(.46 .165 265);--check-900: oklch(.38 .13 265);--check: var(--primary-500);--neutrals-0: oklch(1 0 0);--neutrals-25: oklch(.9794 .0013 286.38);--neutrals-50: oklch(.9577 .0017 247.84);--neutrals-100: oklch(.9156 .0029 264.54);--neutrals-200: oklch(.8288 .0077 260.73);--neutrals-300: oklch(.7402 .011 261.78);--neutrals-400: oklch(.6483 .0164 260.72);--neutrals-500: oklch(.5537 .0205 261.3);--neutrals-600: oklch(.4731 .0178 260.7);--neutrals-700: oklch(.3893 .013 261.74);--neutrals-800: oklch(.3893 .013 261.74);--neutrals-900: oklch(.2044 .0043 264.47);--neutrals: var(--neutrals-500);--error-25: oklch(.9889 .0053 17.25);--error-50: oklch(.9705 .0129 17.38);--error-100: oklch(.9356 .0309 17.72);--error-200: oklch(.8845 .0593 18.33);--error-300: oklch(.8077 .1035 19.57);--error-400: oklch(.7106 .1661 22.22);--error-500: oklch(.6368 .2078 25.33);--error-600: oklch(.5771 .2152 27.33);--error-700: oklch(.5054 .1905 27.52);--error-800: oklch(.4437 .1613 26.9);--error-900: oklch(.3958 .1331 25.72);--error: var(--error-500);--destructive-25: var(--error-25);--destructive-50: var(--error-50);--destructive-100: var(--error-100);--destructive-200: var(--error-200);--destructive-300: var(--error-300);--destructive-400: var(--error-400);--destructive-500: var(--error-500);--destructive-600: var(--error-500);--destructive-700: var(--error-700);--destructive-800: var(--error-800);--destructive-900: var(--error-900);--destructive: var(--error-500);--warning-25: oklch(.9934 .0107 95.16);--warning-50: oklch(.9869 .0214 95.28);--warning-100: oklch(.9619 .058 95.62);--warning-200: oklch(.9243 .1151 95.75);--warning-300: oklch(.9243 .1151 95.75);--warning-400: oklch(.8369 .1644 84.43);--warning-500: oklch(.7686 .1647 70.08);--warning-600: oklch(.6658 .1574 58.32);--warning-700: oklch(.6658 .1574 58.32);--warning-800: oklch(.6658 .1574 58.32);--warning-900: oklch(.4137 .1054 45.9);--warning: var(--warning-500);--success-25: oklch(.9942 .0041 157.18);--success-50: oklch(.9819 .0181 155.83);--success-100: oklch(.9624 .0434 156.74);--success-200: oklch(.925 .0806 155.99);--success-300: oklch(.8712 .1363 154.45);--success-400: oklch(.8003 .1821 151.71);--success-500: oklch(.7227 .192 149.58);--success-600: oklch(.6271 .1699 149.21);--success-700: oklch(.5273 .1371 150.07);--success-800: oklch(.4479 .1083 151.33);--success-900: oklch(.3925 .0896 152.54);--success: var(--success-500);--waiting-25: oklch(.9885 .0063 236.62);--waiting-50: oklch(.9771 .0125 236.62);--waiting-100: oklch(.9514 .025 236.62);--waiting-200: oklch(.9011 .05 236.62);--waiting-300: oklch(.8297 .0875 236.62);--waiting-400: oklch(.7586 .125 236.62);--waiting-500: oklch(.6861 .1625 236.62);--waiting-600: oklch(.5934 .1438 236.62);--waiting-700: oklch(.5029 .125 236.62);--waiting-800: oklch(.4438 .1063 236.62);--waiting-900: oklch(.3917 .0875 236.62);--waiting: var(--waiting-500)}
|
|
@@ -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;
|
|
@@ -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;
|
package/dist/file-upload.cjs
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BB_1_6y_.cjs"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./jsx-runtime-BB_1_6y_.cjs"),_=require("./button-CFJs0esR.cjs"),U=require("./icon-B7joBr0A.cjs"),$=require("./typography-Bj8oEDuE.cjs"),b=require("./index-DoxiiusW.cjs"),I=require("react");function se({isDragging:o,isMultiple:i,invalid:r,disabled:t,accept:n,acceptedExtensions:x,maxSizeInMB:p,maxFiles:f,labels:d,input:h,onDragOver:g,onDragLeave:C,onDrop:D,onFileChange:k}){const N=h?.id||`file-upload-${Math.random().toString(36).substring(2,11)}`;return e.jsxRuntimeExports.jsxs("div",{onDragOver:t?void 0:g,onDragLeave:t?void 0:C,onDrop:t?void 0:D,className:b.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":o&&!r&&!t,"adm:border-destructive":r&&!t,"adm:border-input":!o&&!r,"adm:cursor-not-allowed adm:opacity-50":t}),children:[e.jsxRuntimeExports.jsx("div",{className:b.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",r&&!t?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(U.Icon,{symbol:"text_snippet",className:r&&!t?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[e.jsxRuntimeExports.jsx($.Typography,{color:r&&!t?"destructive":void 0,children:d?.dragDrop||(i?"Drag and drop your files here or":"Drag and drop your file here or")}),e.jsxRuntimeExports.jsxs("label",{htmlFor:N,children:[e.jsxRuntimeExports.jsx("input",{...h,id:N,type:"file",accept:n,multiple:i,onChange:k,disabled:t,className:"adm:hidden"}),e.jsxRuntimeExports.jsx(_.Button,{asChild:!0,type:"button",variant:"link",className:b.cn("adm:cursor-pointer",t&&`
|
|
5
5
|
adm:pointer-events-none
|
|
6
|
-
`),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:
|
|
6
|
+
`),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:d?.selectFile||(i?"Select files":"Select the file")})})]})]}),e.jsxRuntimeExports.jsx($.Typography,{className:"adm:text-center",color:r&&!t?"destructive":"muted",children:d?.fileRequirements||(x&&x.length>0?`Allowed files: ${x.join(", ")}. Maximum size ${p} MB${i?`. Up to ${f} files`:""}.`:`Maximum size ${p} MB${i?`. Up to ${f} files`:""}.`)})]})}function ae({file:o,invalid:i,disabled:r,onRemove:t}){return e.jsxRuntimeExports.jsxs("div",{className:b.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",i&&!r?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted",r&&"adm:cursor-not-allowed adm:opacity-50"),children:[e.jsxRuntimeExports.jsx("div",{className:b.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",i&&!r?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(U.Icon,{symbol:"text_snippet",className:i&&!r?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:`
|
|
7
7
|
adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
|
|
8
|
-
`,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx(
|
|
8
|
+
`,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx($.Typography,{className:"adm:truncate adm:font-semibold",children:o.name})}),e.jsxRuntimeExports.jsxs($.Typography,{className:"adm:shrink-0",color:"muted",children:[(o.size/1024/1024).toFixed(1)," MB"]})]}),e.jsxRuntimeExports.jsx(_.Button,{variant:"destructive-medium",onClick:t,type:"button",disabled:r,children:e.jsxRuntimeExports.jsx(U.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function ee({files:o,isMultiple:i,invalid:r,disabled:t,labels:n,onRemoveFile:x,onClearAll:p}){return o.length===0?null:e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[i&&o.length>1&&e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[e.jsxRuntimeExports.jsx($.Typography,{className:"adm:text-sm adm:font-medium",color:r&&!t?"destructive":void 0,children:n?.filesSelected?.(o.length)||`${o.length} file${o.length!==1?"s":""} selected`}),e.jsxRuntimeExports.jsx(_.Button,{variant:"ghost",size:"sm",onClick:p,type:"button",disabled:t,children:"Clear all"})]}),o.map((f,d)=>e.jsxRuntimeExports.jsx(ae,{file:f,invalid:r,disabled:t,onRemove:()=>x(d)},`${f.name}-${d}`))]})}function ne({className:o,selectedFile:i,selectedFiles:r,onFileSelect:t,onFilesSelect:n,onFileAdd:x,onFileRemove:p,onFilesAdd:f,onFilesRemove:d,onInvalidFile:h,acceptedExtensions:g,maxSizeInMB:C=50,maxFiles:D=10,multiple:k=!1,filesPosition:N="below",invalid:K=!1,disabled:Q=!1,"aria-invalid":X,labels:L,input:V,...Y}){const[Z,M]=I.useState(!1),[G,W]=I.useState(!1),z=I.useRef(null);I.useEffect(()=>{const a=()=>{if(z.current){const c=z.current.closest("fieldset");W(c?.disabled??!1)}};a();const m=new MutationObserver(a);if(z.current){const c=z.current.closest("fieldset");c&&m.observe(c,{attributes:!0,attributeFilter:["disabled"]})}return()=>m.disconnect()},[]);const O=g?.join(",")||"",P=C*1024*1024,v=k||r!==void 0||n!==void 0,l=v?r||[]:i?[i]:[],R=K||X,y=Q||G,E=a=>{y||(a.preventDefault(),M(!0))},re=a=>{y||(a.preventDefault(),M(!1))},F=a=>{if(!y)if(a.preventDefault(),M(!1),v){const c=Array.from(a.dataTransfer.files).filter(q);if(c.length>0){const s=[...r||[],...c].slice(0,D);n&&n(s),f&&f(c)}}else{const m=a.dataTransfer.files[0];m&&q(m)&&(t&&t(m),x&&x(m))}},B=a=>{if(!y){if(v){const c=(a.target.files?Array.from(a.target.files):[]).filter(q);if(c.length>0){const s=[...r||[],...c].slice(0,D);n&&n(s),f&&f(c)}}else{const m=a.target.files?.[0];m&&q(m)&&(t&&t(m),x&&x(m))}a.target.value=""}},H=a=>{if(y)return;const m=l[a];if(v){const c=l.filter((T,s)=>s!==a);n&&n(c),d&&m&&d([m])}else t&&t(null),p&&m&&p(m)},q=a=>{const m=a.name.substring(a.name.lastIndexOf(".")),c=!g||g.length===0||g.includes(m.toLowerCase()),T=a.size<=P;return!c&&h?h(a,"extension"):!T&&h&&h(a,"size"),c&&T},J=()=>{if(y)return;const a=[...l];v?(n&&n([]),d&&a.length>0&&d(a)):(t&&t(null),p&&a.length>0&&p(a[0]))};return e.jsxRuntimeExports.jsxs("div",{ref:z,className:b.cn("adm:flex adm:flex-col adm:gap-4",o),...Y,children:[v&&N==="above"&&e.jsxRuntimeExports.jsx(ee,{files:l,isMultiple:v,invalid:R,disabled:y,labels:L,onRemoveFile:H,onClearAll:J}),(v||l.length===0)&&e.jsxRuntimeExports.jsx(se,{isDragging:Z,isMultiple:v,invalid:R,disabled:y,accept:O,acceptedExtensions:g,maxSizeInMB:C,maxFiles:D,labels:L,input:V,onDragOver:E,onDragLeave:re,onDrop:F,onFileChange:B}),!v&&l.length>0&&e.jsxRuntimeExports.jsx(ee,{files:l,isMultiple:v,invalid:R,disabled:y,labels:L,onRemoveFile:H,onClearAll:J}),v&&N==="below"&&e.jsxRuntimeExports.jsx(ee,{files:l,isMultiple:v,invalid:R,disabled:y,labels:L,onRemoveFile:H,onClearAll:J})]})}function ie({isDragging:o,isMultiple:i,invalid:r,disabled:t,accept:n,acceptedExtensions:x,maxSizeInMB:p,maxFiles:f,labels:d,input:h,onDragOver:g,onDragLeave:C,onDrop:D,onFileChange:k}){const N=h?.id||`file-upload-v2-${Math.random().toString(36).substring(2,11)}`;return e.jsxRuntimeExports.jsxs("div",{onDragOver:t?void 0:g,onDragLeave:t?void 0:C,onDrop:t?void 0:D,className:b.cn(`
|
|
9
|
+
adm:flex adm:flex-col adm:items-center adm:gap-6 adm:rounded-2xl
|
|
10
|
+
adm:border-2
|
|
11
|
+
`,"adm:border-dashed adm:bg-background adm:p-6 adm:transition-colors",{"adm:border-primary":o&&!r&&!t,"adm:border-destructive":r&&!t,"adm:border-input":!o&&!r,"adm:cursor-not-allowed adm:opacity-50":t}),children:[e.jsxRuntimeExports.jsx("div",{className:b.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",r&&!t?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(U.Icon,{symbol:"text_snippet",className:r&&!t?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:items-center adm:gap-2",children:[e.jsxRuntimeExports.jsx($.Typography,{color:r&&!t?"destructive":void 0,children:d?.dragDrop||(i?"Drag and drop your files here or":"Drag and drop your file here or")}),e.jsxRuntimeExports.jsxs("label",{htmlFor:N,children:[e.jsxRuntimeExports.jsx("input",{...h,id:N,type:"file",accept:n,multiple:i,onChange:k,disabled:t,className:"adm:hidden"}),e.jsxRuntimeExports.jsx(_.Button,{asChild:!0,type:"button",variant:"link",className:b.cn("adm:cursor-pointer",t&&`
|
|
12
|
+
adm:pointer-events-none
|
|
13
|
+
`),disabled:t,children:e.jsxRuntimeExports.jsx("span",{children:d?.selectFile||(i?"Select files":"Select the file")})})]})]}),e.jsxRuntimeExports.jsx($.Typography,{className:"adm:text-center",color:r&&!t?"destructive":"muted",children:d?.fileRequirements||(x&&x.length>0?`Allowed files: ${x.join(", ")}. Maximum size ${p} MB${i?`. Up to ${f} files`:""}.`:`Maximum size ${p} MB${i?`. Up to ${f} files`:""}.`)})]})}function oe({fileWithMetadata:o,invalid:i,disabled:r,onRemove:t}){const{file:n}=o;return e.jsxRuntimeExports.jsxs("div",{className:b.cn("adm:flex adm:items-center adm:gap-4 adm:rounded-2xl adm:border adm:p-6",i&&!r?"adm:border-destructive adm:bg-destructive/5":"adm:border-input adm:bg-muted",r&&"adm:cursor-not-allowed adm:opacity-50"),children:[e.jsxRuntimeExports.jsx("div",{className:b.cn("adm:flex adm:items-center adm:justify-center adm:rounded-xl adm:p-2.5",i&&!r?"adm:bg-destructive/10":"adm:bg-primary-50"),children:e.jsxRuntimeExports.jsx(U.Icon,{symbol:"text_snippet",className:i&&!r?"adm:text-destructive":"adm:text-primary"})}),e.jsxRuntimeExports.jsxs("div",{className:`
|
|
14
|
+
adm:flex adm:min-w-0 adm:flex-1 adm:items-start adm:gap-3
|
|
15
|
+
`,children:[e.jsxRuntimeExports.jsx("div",{className:"adm:min-w-0 adm:flex-1",children:e.jsxRuntimeExports.jsx($.Typography,{className:"adm:truncate adm:font-semibold",children:n.name})}),e.jsxRuntimeExports.jsxs($.Typography,{className:"adm:shrink-0",color:"muted",children:[(n.size/1024/1024).toFixed(1)," MB"]})]}),e.jsxRuntimeExports.jsx(_.Button,{variant:"destructive-medium",onClick:t,type:"button",disabled:r,children:e.jsxRuntimeExports.jsx(U.Icon,{symbol:"delete",className:"adm:text-destructive"})})]})}function te({files:o,isMultiple:i,invalid:r,disabled:t,labels:n,onRemoveFile:x,onClearAll:p}){return o.length===0?null:e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:flex-col adm:gap-3",children:[i&&o.length>1&&e.jsxRuntimeExports.jsxs("div",{className:"adm:flex adm:items-center adm:justify-between",children:[e.jsxRuntimeExports.jsx($.Typography,{className:"adm:text-sm adm:font-medium",color:r&&!t?"destructive":void 0,children:n?.filesSelected?.(o.length)||`${o.length} file${o.length!==1?"s":""} selected`}),e.jsxRuntimeExports.jsx(_.Button,{variant:"ghost",size:"sm",onClick:p,type:"button",disabled:t,children:"Clear all"})]}),o.map((f,d)=>e.jsxRuntimeExports.jsx(oe,{fileWithMetadata:f,invalid:r,disabled:t,onRemove:()=>x(d)},f.id))]})}function me({className:o,selectedFile:i,selectedFiles:r,onFileSelect:t,onFilesSelect:n,onFileAdd:x,onFileRemove:p,onFilesAdd:f,onFilesRemove:d,onInvalidFile:h,acceptedExtensions:g,maxSizeInMB:C=50,maxFiles:D=10,multiple:k=!1,filesPosition:N="below",invalid:K=!1,disabled:Q=!1,"aria-invalid":X,generateId:L,labels:V,input:Y,...Z}){const[M,G]=I.useState(!1),[W,z]=I.useState(!1),O=I.useRef(null);I.useEffect(()=>{const s=()=>{if(O.current){const u=O.current.closest("fieldset");z(u?.disabled??!1)}};s();const j=new MutationObserver(s);if(O.current){const u=O.current.closest("fieldset");u&&j.observe(u,{attributes:!0,attributeFilter:["disabled"]})}return()=>j.disconnect()},[]);const P=g?.join(",")||"",v=C*1024*1024,l=k||r!==void 0||n!==void 0,R=l?r||[]:i?[i]:[],y=K||X,E=Q||W,F=L||(s=>`${Date.now()}-${Math.random().toString(36).substring(2,11)}-${s.name}`),B=s=>({id:F(s),file:s}),H=s=>{E||(s.preventDefault(),G(!0))},q=s=>{E||(s.preventDefault(),G(!1))},J=s=>{if(!E)if(s.preventDefault(),G(!1),l){const u=Array.from(s.dataTransfer.files).filter(c);if(u.length>0){const w=u.map(B),S=[...r||[],...w].slice(0,D);n&&n(S),f&&f(w)}}else{const j=s.dataTransfer.files[0];if(j&&c(j)){const u=B(j);t&&t(u),x&&x(u)}}},a=s=>{if(!E){if(l){const u=(s.target.files?Array.from(s.target.files):[]).filter(c);if(u.length>0){const w=u.map(B),S=[...r||[],...w].slice(0,D);n&&n(S),f&&f(w)}}else{const j=s.target.files?.[0];if(j&&c(j)){const u=B(j);t&&t(u),x&&x(u)}}s.target.value=""}},m=s=>{if(E)return;const j=R[s];if(l){const u=R.filter((w,A)=>A!==s);n&&n(u),d&&j&&d([j])}else t&&t(null),p&&j&&p(j)},c=s=>{const j=s.name.substring(s.name.lastIndexOf(".")),u=!g||g.length===0||g.includes(j.toLowerCase()),w=s.size<=v;if(!u||!w){const A=B(s);!u&&h?h(A,"extension"):!w&&h&&h(A,"size")}return u&&w},T=()=>{if(E)return;const s=[...R];l?(n&&n([]),d&&s.length>0&&d(s)):(t&&t(null),p&&s.length>0&&p(s[0]))};return e.jsxRuntimeExports.jsxs("div",{ref:O,className:b.cn("adm:flex adm:flex-col adm:gap-4",o),...Z,children:[l&&N==="above"&&e.jsxRuntimeExports.jsx(te,{files:R,isMultiple:l,invalid:y,disabled:E,labels:V,onRemoveFile:m,onClearAll:T}),(l||R.length===0)&&e.jsxRuntimeExports.jsx(ie,{isDragging:M,isMultiple:l,invalid:y,disabled:E,accept:P,acceptedExtensions:g,maxSizeInMB:C,maxFiles:D,labels:V,input:Y,onDragOver:H,onDragLeave:q,onDrop:J,onFileChange:a}),!l&&R.length>0&&e.jsxRuntimeExports.jsx(te,{files:R,isMultiple:l,invalid:y,disabled:E,labels:V,onRemoveFile:m,onClearAll:T}),l&&N==="below"&&e.jsxRuntimeExports.jsx(te,{files:R,isMultiple:l,invalid:y,disabled:E,labels:V,onRemoveFile:m,onClearAll:T})]})}exports.FileUpload=ne;exports.FileUploadV2=me;
|