@mage-ui/components 1.0.132 → 1.0.133
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/dist/components/controls/dropzone/Dropzone.d.mts +1 -1
- package/dist/components/controls/dropzone/Dropzone.d.mts.map +1 -1
- package/dist/components/controls/dropzone/Dropzone.mjs +1 -1
- package/dist/components/controls/dropzone/Dropzone.mjs.map +1 -1
- package/dist/components/controls/dropzone/avatar/AvatarDropzone.d.mts +4 -8
- package/dist/components/controls/dropzone/avatar/AvatarDropzone.d.mts.map +1 -1
- package/dist/components/controls/dropzone/avatar/AvatarDropzone.mjs +1 -1
- package/dist/components/controls/dropzone/avatar/AvatarDropzone.mjs.map +1 -1
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneBase.d.mts +17 -0
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneBase.d.mts.map +1 -0
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneBase.mjs +2 -0
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneBase.mjs.map +1 -0
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneS3.d.mts +4 -8
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneS3.d.mts.map +1 -1
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneS3.mjs +1 -1
- package/dist/components/controls/dropzone/avatar/AvatarDropzoneS3.mjs.map +1 -1
- package/package.json +2 -2
|
@@ -5,7 +5,7 @@ import { ReactNode } from "react";
|
|
|
5
5
|
|
|
6
6
|
//#region src/components/controls/dropzone/Dropzone.d.ts
|
|
7
7
|
type DropzoneProps = Omit<DropzoneBaseProps, 'children' | 'classNames'> & {
|
|
8
|
-
children?: ReactNode;
|
|
8
|
+
children?: ReactNode | DropzoneBaseProps['children'];
|
|
9
9
|
label?: ReactNode;
|
|
10
10
|
description?: ReactNode;
|
|
11
11
|
error?: ReactNode;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA0BY,aAAA,GAAgB,IAAA,CAC1B,iBAAA;EAGA,QAAA,GAAW,SAAA;
|
|
1
|
+
{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA0BY,aAAA,GAAgB,IAAA,CAC1B,iBAAA;EAGA,QAAA,GAAW,SAAA,GAAY,iBAAA;EACvB,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,cAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,aAAA;IACA,iBAAA;IACA,qBAAA;IACA,YAAA,GAAe,iBAAA;IACf,gBAAA,GAAmB,iBAAA;EAAA;AAAA;AAAA,cAMV,QAAA;EAAY,QAAA;EAAA,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,cAAA,EAAA,eAAA;EAAA,UAAA;EAAA,OAAA;EAAA,SAAA;EAAA,GAAA;AAAA,GAUtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{UploadedFiles as e}from"../../data-display/uploaded-files/UploadedFiles.mjs";import{DropzoneBase as t}from"./DropzoneBase.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dropzone as r,dropzoneDescription as i,dropzoneDropzone as a,dropzoneError as o,dropzoneLabel as s,dropzoneLabelWrapper as c,dropzoneRoot as l,dropzoneUploadedFile as u,dropzoneUploadedFiles as d,dropzoneUploadedFilesListItem as f}from"@mage-ui/styled-system/recipes";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useId as h}from"react";const g=({children:g,label:_,description:v,error:y,fileListHeight:b,classNames:x,inputId:S,direction:C=`default`,...w})=>{let T=h(),E=S??T;return m(`div`,{className:n(x?.dropzone??r(),x?.root??l()),children:[(_||v)&&m(`div`,{className:x?.labelWrapper??c(),children:[_&&p(`label`,{htmlFor:E,className:x?.label??s(),children:_}),v&&p(`p`,{className:x?.description??i(),children:v})]}),p(t,{...w,inputId:E,direction:C,classNames:{...x?.dropzoneDropzone??{},dropzoneBase:x?.dropzoneDropzone?.dropzoneBase??a()},children:({files:t,removeFile:
|
|
1
|
+
import{UploadedFiles as e}from"../../data-display/uploaded-files/UploadedFiles.mjs";import{DropzoneBase as t}from"./DropzoneBase.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{dropzone as r,dropzoneDescription as i,dropzoneDropzone as a,dropzoneError as o,dropzoneLabel as s,dropzoneLabelWrapper as c,dropzoneRoot as l,dropzoneUploadedFile as u,dropzoneUploadedFiles as d,dropzoneUploadedFilesListItem as f}from"@mage-ui/styled-system/recipes";import{jsx as p,jsxs as m}from"react/jsx-runtime";import{useId as h}from"react";const g=({children:g,label:_,description:v,error:y,fileListHeight:b,classNames:x,inputId:S,direction:C=`default`,...w})=>{let T=h(),E=S??T;return m(`div`,{className:n(x?.dropzone??r(),x?.root??l()),children:[(_||v)&&m(`div`,{className:x?.labelWrapper??c(),children:[_&&p(`label`,{htmlFor:E,className:x?.label??s(),children:_}),v&&p(`p`,{className:x?.description??i(),children:v})]}),p(t,{...w,inputId:E,direction:C,classNames:{...x?.dropzoneDropzone??{},dropzoneBase:x?.dropzoneDropzone?.dropzoneBase??a()},children:({files:t,isUploading:n,removeFile:r})=>g===void 0?Object.keys(t).length>0?p(e,{classNames:{uploadedFiles:x?.uploadedFiles??d(),root:x?.uploadedFilesRoot},children:Object.values(t).map(t=>p(e.Item,{fileName:t.name,fileType:t.type,fileSize:`${(t.size/1024).toFixed(1)} KB`,fileDate:t.date,url:t.url,onRemove:()=>r(t.name),classNames:{listItem:x?.uploadedFilesListItem??f(),uploadedFile:{...x?.uploadedFile,uploadedFile:x?.uploadedFile?.uploadedFile??u()}}},t.name))}):null:typeof g==`function`?g({files:t,isUploading:n,removeFile:r}):g}),y&&p(`p`,{className:x?.error??o(),children:y})]})};export{g as Dropzone};
|
|
2
2
|
//# sourceMappingURL=Dropzone.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzone,\n dropzoneDescription,\n dropzoneDropzone,\n dropzoneError,\n dropzoneLabel,\n dropzoneLabelWrapper,\n dropzoneRoot,\n dropzoneUploadedFile,\n dropzoneUploadedFiles,\n dropzoneUploadedFilesListItem,\n} from '@mage-ui/styled-system/recipes';\nimport {\n type UploadedFileProps,\n UploadedFiles,\n} from '@/components/data-display';\n\nimport {\n DropzoneBase,\n type DropzoneBaseProps,\n type FileData,\n} from './DropzoneBase';\n\nexport type DropzoneProps = Omit<\n DropzoneBaseProps,\n 'children' | 'classNames'\n> & {\n children?: ReactNode;\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n fileListHeight?: number | string;\n classNames?: {\n dropzone?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n uploadedFiles?: string;\n uploadedFilesRoot?: string;\n uploadedFilesListItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzoneDropzone?: DropzoneBaseProps['classNames'];\n };\n};\n\nexport type { FileData };\n\nexport const Dropzone = ({\n children,\n label,\n description,\n error,\n fileListHeight: _fileListHeight,\n classNames,\n inputId,\n direction = 'default',\n ...baseProps\n}: DropzoneProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n >\n {(label || description) && (\n <div className={classNames?.labelWrapper ?? dropzoneLabelWrapper()}>\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneLabel()}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneDescription()}>\n {description}\n </p>\n )}\n </div>\n )}\n <DropzoneBase\n {...baseProps}\n inputId={groupId}\n direction={direction}\n classNames={{\n ...(classNames?.dropzoneDropzone ?? {}),\n dropzoneBase:\n classNames?.dropzoneDropzone?.dropzoneBase ?? dropzoneDropzone(),\n }}\n >\n {({ files, removeFile }) => {\n if (children !== undefined) {\n return children;\n }\n return Object.keys(files).length > 0 ? (\n <UploadedFiles\n classNames={{\n uploadedFiles:\n classNames?.uploadedFiles ?? dropzoneUploadedFiles(),\n root: classNames?.uploadedFilesRoot,\n }}\n >\n {Object.values(files).map((file) => (\n <UploadedFiles.Item\n key={file.name}\n fileName={file.name}\n fileType={file.type}\n fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n fileDate={file.date}\n url={file.url}\n onRemove={() => removeFile(file.name)}\n classNames={{\n listItem:\n classNames?.uploadedFilesListItem ??\n dropzoneUploadedFilesListItem(),\n uploadedFile: {\n ...classNames?.uploadedFile,\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ??\n dropzoneUploadedFile(),\n },\n }}\n />\n ))}\n </UploadedFiles>\n ) : null;\n }}\n </DropzoneBase>\n {error && <p className={classNames?.error ?? dropzoneError()}>{error}</p>}\n </div>\n );\n};\n"],"mappings":"yhBAoDA,MAAa,GAAY,CACvB,WACA,QACA,cACA,QACA,eAAgB,EAChB,aACA,UACA,YAAY,UACZ,GAAG,KACgB,CACnB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAE3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,UAJH,EAMI,GAAS,IACT,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAAsB,UAAlE,CACG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAe,UAE9C,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAAqB,UAC3D,EACC,CAAA,CAEF,GAER,EAAC,EAAD,CACE,GAAI,EACJ,QAAS,EACE,YACX,WAAY,CACV,GAAI,GAAY,kBAAoB,EAAE,CACtC,aACE,GAAY,kBAAkB,cAAgB,GAAkB,CACnE,WAEC,CAAE,QAAO,
|
|
1
|
+
{"version":3,"file":"Dropzone.mjs","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n dropzone,\n dropzoneDescription,\n dropzoneDropzone,\n dropzoneError,\n dropzoneLabel,\n dropzoneLabelWrapper,\n dropzoneRoot,\n dropzoneUploadedFile,\n dropzoneUploadedFiles,\n dropzoneUploadedFilesListItem,\n} from '@mage-ui/styled-system/recipes';\nimport {\n type UploadedFileProps,\n UploadedFiles,\n} from '@/components/data-display';\n\nimport {\n DropzoneBase,\n type DropzoneBaseProps,\n type FileData,\n} from './DropzoneBase';\n\nexport type DropzoneProps = Omit<\n DropzoneBaseProps,\n 'children' | 'classNames'\n> & {\n children?: ReactNode | DropzoneBaseProps['children'];\n label?: ReactNode;\n description?: ReactNode;\n error?: ReactNode;\n fileListHeight?: number | string;\n classNames?: {\n dropzone?: string;\n root?: string;\n labelWrapper?: string;\n label?: string;\n description?: string;\n error?: string;\n uploadedFiles?: string;\n uploadedFilesRoot?: string;\n uploadedFilesListItem?: string;\n uploadedFile?: UploadedFileProps['classNames'];\n dropzoneDropzone?: DropzoneBaseProps['classNames'];\n };\n};\n\nexport type { FileData };\n\nexport const Dropzone = ({\n children,\n label,\n description,\n error,\n fileListHeight: _fileListHeight,\n classNames,\n inputId,\n direction = 'default',\n ...baseProps\n}: DropzoneProps) => {\n const generatedId = useId();\n const groupId = inputId ?? generatedId;\n\n return (\n <div\n className={cx(\n classNames?.dropzone ?? dropzone(),\n classNames?.root ?? dropzoneRoot(),\n )}\n >\n {(label || description) && (\n <div className={classNames?.labelWrapper ?? dropzoneLabelWrapper()}>\n {label && (\n <label\n htmlFor={groupId}\n className={classNames?.label ?? dropzoneLabel()}\n >\n {label}\n </label>\n )}\n {description && (\n <p className={classNames?.description ?? dropzoneDescription()}>\n {description}\n </p>\n )}\n </div>\n )}\n <DropzoneBase\n {...baseProps}\n inputId={groupId}\n direction={direction}\n classNames={{\n ...(classNames?.dropzoneDropzone ?? {}),\n dropzoneBase:\n classNames?.dropzoneDropzone?.dropzoneBase ?? dropzoneDropzone(),\n }}\n >\n {({ files, isUploading, removeFile }) => {\n if (children !== undefined) {\n return typeof children === 'function'\n ? children({ files, isUploading, removeFile })\n : children;\n }\n return Object.keys(files).length > 0 ? (\n <UploadedFiles\n classNames={{\n uploadedFiles:\n classNames?.uploadedFiles ?? dropzoneUploadedFiles(),\n root: classNames?.uploadedFilesRoot,\n }}\n >\n {Object.values(files).map((file) => (\n <UploadedFiles.Item\n key={file.name}\n fileName={file.name}\n fileType={file.type}\n fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n fileDate={file.date}\n url={file.url}\n onRemove={() => removeFile(file.name)}\n classNames={{\n listItem:\n classNames?.uploadedFilesListItem ??\n dropzoneUploadedFilesListItem(),\n uploadedFile: {\n ...classNames?.uploadedFile,\n uploadedFile:\n classNames?.uploadedFile?.uploadedFile ??\n dropzoneUploadedFile(),\n },\n }}\n />\n ))}\n </UploadedFiles>\n ) : null;\n }}\n </DropzoneBase>\n {error && <p className={classNames?.error ?? dropzoneError()}>{error}</p>}\n </div>\n );\n};\n"],"mappings":"yhBAoDA,MAAa,GAAY,CACvB,WACA,QACA,cACA,QACA,eAAgB,EAChB,aACA,UACA,YAAY,UACZ,GAAG,KACgB,CACnB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAE3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,UAJH,EAMI,GAAS,IACT,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAAsB,UAAlE,CACG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAe,UAE9C,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAAqB,UAC3D,EACC,CAAA,CAEF,GAER,EAAC,EAAD,CACE,GAAI,EACJ,QAAS,EACE,YACX,WAAY,CACV,GAAI,GAAY,kBAAoB,EAAE,CACtC,aACE,GAAY,kBAAkB,cAAgB,GAAkB,CACnE,WAEC,CAAE,QAAO,cAAa,gBAClB,IAAa,IAAA,GAKV,OAAO,KAAK,EAAM,CAAC,OAAS,EACjC,EAAC,EAAD,CACE,WAAY,CACV,cACE,GAAY,eAAiB,GAAuB,CACtD,KAAM,GAAY,kBACnB,UAEA,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,EAAc,KAAf,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,KAAK,CACrC,WAAY,CACV,SACE,GAAY,uBACZ,GAA+B,CACjC,aAAc,CACZ,GAAG,GAAY,aACf,aACE,GAAY,cAAc,cAC1B,GAAsB,CACzB,CACF,CACD,CAlBK,EAAK,KAkBV,CACF,CACY,CAAA,CACd,KAnCK,OAAO,GAAa,WACvB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CAC5C,EAmCK,CAAA,CACd,GAAS,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAe,UAAG,EAAU,CAAA,CACrE"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { IconProps } from "../../../data-display/icons/icon/Icon.mjs";
|
|
2
|
+
import { AvatarDropzoneClassNames } from "./AvatarDropzoneBase.mjs";
|
|
2
3
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
3
4
|
|
|
4
5
|
//#region src/components/controls/dropzone/avatar/AvatarDropzone.d.ts
|
|
@@ -6,14 +7,8 @@ type AvatarDropzoneProps = {
|
|
|
6
7
|
value?: string;
|
|
7
8
|
onChange?: (file: File) => void;
|
|
8
9
|
maxSize?: number;
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
root?: string;
|
|
12
|
-
inner?: string;
|
|
13
|
-
image?: string;
|
|
14
|
-
overlay?: string;
|
|
15
|
-
overlayIconSlot?: string;
|
|
16
|
-
iconSlot?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
classNames?: Omit<AvatarDropzoneClassNames, 'loader'> & {
|
|
17
12
|
icon?: IconProps['classNames'];
|
|
18
13
|
};
|
|
19
14
|
};
|
|
@@ -21,6 +16,7 @@ declare const AvatarDropzone: ({
|
|
|
21
16
|
value,
|
|
22
17
|
onChange,
|
|
23
18
|
maxSize,
|
|
19
|
+
disabled,
|
|
24
20
|
classNames
|
|
25
21
|
}: AvatarDropzoneProps) => react_jsx_runtime0.JSX.Element;
|
|
26
22
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarDropzone.d.mts","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzone.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarDropzone.d.mts","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzone.tsx"],"mappings":";;;;;KASY,mBAAA;EACV,KAAA;EACA,QAAA,IAAY,IAAA,EAAM,IAAA;EAClB,OAAA;EACA,QAAA;EACA,UAAA,GAAa,IAAA,CAAK,wBAAA;IAChB,IAAA,GAAO,SAAA;EAAA;AAAA;AAAA,cAIE,cAAA;EAAkB,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,QAAA;EAAA;AAAA,GAM5B,mBAAA,KAAmB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{AvatarDropzoneBase as e}from"./AvatarDropzoneBase.mjs";import{jsx as t}from"react/jsx-runtime";import{useCallback as n,useState as r}from"react";const i=({value:i,onChange:a,maxSize:o,disabled:s=!1,classNames:c})=>{let[l,u]=r(i??null);return t(e,{onDrop:n(e=>{let t=e[0];t&&(u(URL.createObjectURL(t)),a?.(t))},[a]),value:l,maxSize:o,disabled:s,classNames:c})};export{i as AvatarDropzone};
|
|
2
2
|
//# sourceMappingURL=AvatarDropzone.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarDropzone.mjs","names":[
|
|
1
|
+
{"version":3,"file":"AvatarDropzone.mjs","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzone.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { IconProps } from '@/components/data-display';\n\nimport {\n AvatarDropzoneBase,\n type AvatarDropzoneClassNames,\n} from './AvatarDropzoneBase';\n\nexport type AvatarDropzoneProps = {\n value?: string;\n onChange?: (file: File) => void;\n maxSize?: number;\n disabled?: boolean;\n classNames?: Omit<AvatarDropzoneClassNames, 'loader'> & {\n icon?: IconProps['classNames'];\n };\n};\n\nexport const AvatarDropzone = ({\n value,\n onChange,\n maxSize,\n disabled = false,\n classNames,\n}: AvatarDropzoneProps) => {\n const [preview, setPreview] = useState<string | null>(value ?? null);\n\n const handleDrop = useCallback(\n (files: File[]) => {\n const file = files[0];\n if (!file) return;\n const url = URL.createObjectURL(file);\n setPreview(url);\n onChange?.(file);\n },\n [onChange],\n );\n\n return (\n <AvatarDropzoneBase\n onDrop={handleDrop}\n value={preview}\n maxSize={maxSize}\n disabled={disabled}\n classNames={classNames}\n />\n );\n};\n"],"mappings":"wJAmBA,MAAa,GAAkB,CAC7B,QACA,WACA,UACA,WAAW,GACX,gBACyB,CACzB,GAAM,CAAC,EAAS,GAAc,EAAwB,GAAS,KAAK,CAapE,OACE,EAAC,EAAD,CACE,OAbe,EAChB,GAAkB,CACjB,IAAM,EAAO,EAAM,GACd,IAEL,EADY,IAAI,gBAAgB,EAAK,CACtB,CACf,IAAW,EAAK,GAElB,CAAC,EAAS,CACX,CAKG,MAAO,EACE,UACC,WACE,aACZ,CAAA"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { IconProps } from "../../../data-display/icons/icon/Icon.mjs";
|
|
2
|
+
import { LoaderOvalProps } from "../../../data-display/loader-oval/LoaderOval.mjs";
|
|
3
|
+
//#region src/components/controls/dropzone/avatar/AvatarDropzoneBase.d.ts
|
|
4
|
+
type AvatarDropzoneClassNames = {
|
|
5
|
+
dropzone?: string;
|
|
6
|
+
root?: string;
|
|
7
|
+
inner?: string;
|
|
8
|
+
image?: string;
|
|
9
|
+
overlay?: string;
|
|
10
|
+
overlayIconSlot?: string;
|
|
11
|
+
iconSlot?: string;
|
|
12
|
+
icon?: IconProps['classNames'];
|
|
13
|
+
loader?: LoaderOvalProps['classNames'];
|
|
14
|
+
};
|
|
15
|
+
//#endregion
|
|
16
|
+
export { AvatarDropzoneClassNames };
|
|
17
|
+
//# sourceMappingURL=AvatarDropzoneBase.d.mts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarDropzoneBase.d.mts","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzoneBase.tsx"],"mappings":";;;KAsBY,wBAAA;EACV,QAAA;EACA,IAAA;EACA,KAAA;EACA,KAAA;EACA,OAAA;EACA,eAAA;EACA,QAAA;EACA,IAAA,GAAO,SAAA;EACP,MAAA,GAAS,eAAA;AAAA"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{Icon as e}from"../../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../../data-display/loader-oval/LoaderOval.mjs";import{cx as n}from"@mage-ui/styled-system/css";import{avatarDropzone as r,avatarDropzoneIcon as i,avatarDropzoneIconSlot as a,avatarDropzoneImage as o,avatarDropzoneInner as s,avatarDropzoneOverlay as c,avatarDropzoneOverlayIconSlot as l,avatarDropzoneRoot as u}from"@mage-ui/styled-system/recipes";import{Fragment as d,jsx as f,jsxs as p}from"react/jsx-runtime";import{Dropzone as m,IMAGE_MIME_TYPE as h}from"@mantine/dropzone";const g=({value:g,maxSize:_,disabled:v=!1,isUploading:y=!1,onDrop:b,classNames:x})=>p(m,{onDrop:b,accept:h,maxFiles:1,maxSize:_,disabled:v||y,classNames:{root:n(x?.dropzone??r(),x?.root??u(),`group`),inner:x?.inner??s()},children:[f(m.Idle,{children:y?f(`div`,{className:x?.iconSlot??a(),children:f(t,{classNames:x?.loader})}):g?p(d,{children:[f(`img`,{src:g,alt:`Avatar`,className:x?.image??o()}),f(`div`,{className:x?.overlay??c()}),f(`div`,{className:x?.overlayIconSlot??l(),children:f(e,{name:`mage-avatar-dropzone-camera-plus`,path:`/icons/sprite-mage.svg`,classNames:{icon:x?.icon?.icon??i()}})})]}):f(`div`,{className:x?.iconSlot??a(),children:f(e,{name:`mage-avatar-dropzone-camera-plus`,path:`/icons/sprite-mage.svg`,classNames:{icon:x?.icon?.icon??i()}})})}),f(m.Accept,{children:f(`div`,{className:x?.iconSlot??a(),children:f(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:x?.icon?.icon??i()}})})}),f(m.Reject,{children:f(`div`,{className:x?.iconSlot??a(),children:f(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:x?.icon?.icon??i()}})})})]});export{g as AvatarDropzoneBase};
|
|
2
|
+
//# sourceMappingURL=AvatarDropzoneBase.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"AvatarDropzoneBase.mjs","names":["MantineDropzone"],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzoneBase.tsx"],"sourcesContent":["import { cx } from '@mage-ui/styled-system/css';\nimport {\n avatarDropzone,\n avatarDropzoneIcon,\n avatarDropzoneIconSlot,\n avatarDropzoneImage,\n avatarDropzoneInner,\n avatarDropzoneOverlay,\n avatarDropzoneOverlayIconSlot,\n avatarDropzoneRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n IMAGE_MIME_TYPE,\n Dropzone as MantineDropzone,\n} from '@mantine/dropzone';\nimport {\n Icon,\n type IconProps,\n LoaderOval,\n type LoaderOvalProps,\n} from '@/components/data-display';\n\nexport type AvatarDropzoneClassNames = {\n dropzone?: string;\n root?: string;\n inner?: string;\n image?: string;\n overlay?: string;\n overlayIconSlot?: string;\n iconSlot?: string;\n icon?: IconProps['classNames'];\n loader?: LoaderOvalProps['classNames'];\n};\n\ntype AvatarDropzoneBaseProps = {\n value?: string | null;\n maxSize?: number;\n disabled?: boolean;\n isUploading?: boolean;\n onDrop: (files: File[]) => void | Promise<void>;\n classNames?: AvatarDropzoneClassNames;\n};\n\nexport const AvatarDropzoneBase = ({\n value,\n maxSize,\n disabled = false,\n isUploading = false,\n onDrop,\n classNames,\n}: AvatarDropzoneBaseProps) => {\n return (\n <MantineDropzone\n onDrop={onDrop}\n accept={IMAGE_MIME_TYPE}\n maxFiles={1}\n maxSize={maxSize}\n disabled={disabled || isUploading}\n classNames={{\n root: cx(\n classNames?.dropzone ?? avatarDropzone(),\n classNames?.root ?? avatarDropzoneRoot(),\n 'group',\n ),\n inner: classNames?.inner ?? avatarDropzoneInner(),\n }}\n >\n <MantineDropzone.Idle>\n {isUploading ? (\n <div className={classNames?.iconSlot ?? avatarDropzoneIconSlot()}>\n <LoaderOval classNames={classNames?.loader} />\n </div>\n ) : value ? (\n <>\n <img\n src={value}\n alt='Avatar'\n className={classNames?.image ?? avatarDropzoneImage()}\n />\n <div className={classNames?.overlay ?? avatarDropzoneOverlay()} />\n <div\n className={\n classNames?.overlayIconSlot ?? avatarDropzoneOverlayIconSlot()\n }\n >\n <Icon\n name='mage-avatar-dropzone-camera-plus'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.icon?.icon ?? avatarDropzoneIcon(),\n }}\n />\n </div>\n </>\n ) : (\n <div className={classNames?.iconSlot ?? avatarDropzoneIconSlot()}>\n <Icon\n name='mage-avatar-dropzone-camera-plus'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.icon?.icon ?? avatarDropzoneIcon(),\n }}\n />\n </div>\n )}\n </MantineDropzone.Idle>\n <MantineDropzone.Accept>\n <div className={classNames?.iconSlot ?? avatarDropzoneIconSlot()}>\n <Icon\n name='mage-dropzone-thumbs-up'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.icon?.icon ?? avatarDropzoneIcon(),\n }}\n />\n </div>\n </MantineDropzone.Accept>\n <MantineDropzone.Reject>\n <div className={classNames?.iconSlot ?? avatarDropzoneIconSlot()}>\n <Icon\n name='mage-dropzone-thumbs-down'\n path='/icons/sprite-mage.svg'\n classNames={{\n icon: classNames?.icon?.icon ?? avatarDropzoneIcon(),\n }}\n />\n </div>\n </MantineDropzone.Reject>\n </MantineDropzone>\n );\n};\n"],"mappings":"6jBA2CA,MAAa,GAAsB,CACjC,QACA,UACA,WAAW,GACX,cAAc,GACd,SACA,gBAGE,EAACA,EAAD,CACU,SACR,OAAQ,EACR,SAAU,EACD,UACT,SAAU,GAAY,EACtB,WAAY,CACV,KAAM,EACJ,GAAY,UAAY,GAAgB,CACxC,GAAY,MAAQ,GAAoB,CACxC,QACD,CACD,MAAO,GAAY,OAAS,GAAqB,CAClD,UAbH,CAeE,EAACA,EAAgB,KAAjB,CAAA,SACG,EACC,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAwB,UAC9D,EAAC,EAAD,CAAY,WAAY,GAAY,OAAU,CAAA,CAC1C,CAAA,CACJ,EACF,EAAA,EAAA,CAAA,SAAA,CACE,EAAC,MAAD,CACE,IAAK,EACL,IAAI,SACJ,UAAW,GAAY,OAAS,GAAqB,CACrD,CAAA,CACF,EAAC,MAAD,CAAK,UAAW,GAAY,SAAW,GAAuB,CAAI,CAAA,CAClE,EAAC,MAAD,CACE,UACE,GAAY,iBAAmB,GAA+B,UAGhE,EAAC,EAAD,CACE,KAAK,mCACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,MAAM,MAAQ,GAAoB,CACrD,CACD,CAAA,CACE,CAAA,CACL,CAAA,CAAA,CAEH,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAwB,UAC9D,EAAC,EAAD,CACE,KAAK,mCACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,MAAM,MAAQ,GAAoB,CACrD,CACD,CAAA,CACE,CAAA,CAEa,CAAA,CACvB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAwB,UAC9D,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,MAAM,MAAQ,GAAoB,CACrD,CACD,CAAA,CACE,CAAA,CACiB,CAAA,CACzB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAwB,UAC9D,EAAC,EAAD,CACE,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,MAAM,MAAQ,GAAoB,CACrD,CACD,CAAA,CACE,CAAA,CACiB,CAAA,CACT"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { IconProps } from "../../../data-display/icons/icon/Icon.mjs";
|
|
2
2
|
import { LoaderOvalProps } from "../../../data-display/loader-oval/LoaderOval.mjs";
|
|
3
|
+
import { AvatarDropzoneClassNames } from "./AvatarDropzoneBase.mjs";
|
|
3
4
|
import { S3InitBody, S3UploadConfig } from "../use-s3-upload.mjs";
|
|
4
5
|
import * as react_jsx_runtime0 from "react/jsx-runtime";
|
|
5
6
|
|
|
@@ -9,14 +10,8 @@ type AvatarDropzoneS3Props<TInitBody extends S3InitBody = S3InitBody> = S3Upload
|
|
|
9
10
|
onChange?: (url: string) => void;
|
|
10
11
|
onError?: (message: string) => void;
|
|
11
12
|
maxSize?: number;
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
root?: string;
|
|
15
|
-
inner?: string;
|
|
16
|
-
image?: string;
|
|
17
|
-
overlay?: string;
|
|
18
|
-
overlayIconSlot?: string;
|
|
19
|
-
iconSlot?: string;
|
|
13
|
+
disabled?: boolean;
|
|
14
|
+
classNames?: AvatarDropzoneClassNames & {
|
|
20
15
|
icon?: IconProps['classNames'];
|
|
21
16
|
loader?: LoaderOvalProps['classNames'];
|
|
22
17
|
};
|
|
@@ -26,6 +21,7 @@ declare const AvatarDropzoneS3: <TInitBody extends S3InitBody = S3InitBody>({
|
|
|
26
21
|
onChange,
|
|
27
22
|
onError,
|
|
28
23
|
maxSize,
|
|
24
|
+
disabled,
|
|
29
25
|
classNames,
|
|
30
26
|
initUrl,
|
|
31
27
|
buildInitBody,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarDropzoneS3.d.mts","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzoneS3.tsx"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarDropzoneS3.d.mts","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzoneS3.tsx"],"mappings":";;;;;;;KAcY,qBAAA,mBAAwC,UAAA,GAAa,UAAA,IAC/D,cAAA,CAAe,SAAA;EACb,KAAA;EACA,QAAA,IAAY,GAAA;EACZ,OAAA,IAAW,OAAA;EACX,OAAA;EACA,QAAA;EACA,UAAA,GAAa,wBAAA;IACX,IAAA,GAAO,SAAA;IACP,MAAA,GAAS,eAAA;EAAA;AAAA;AAAA,cAIF,gBAAA,qBAAsC,UAAA,GAAa,UAAA;EAAY,KAAA;EAAA,QAAA;EAAA,OAAA;EAAA,OAAA;EAAA,QAAA;EAAA,UAAA;EAAA,OAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,eAAA;EAAA,kBAAA;EAAA,aAAA;EAAA;AAAA,GAezE,qBAAA,CAAsB,SAAA,MAAU,kBAAA,CAAA,GAAA,CAAA,OAAA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import{AvatarDropzoneBase as e}from"./AvatarDropzoneBase.mjs";import{useS3Upload as t}from"../use-s3-upload.mjs";import{jsx as n}from"react/jsx-runtime";import{useCallback as r,useState as i}from"react";const a=({value:a,onChange:o,onError:s,maxSize:c,disabled:l=!1,classNames:u,initUrl:d,buildInitBody:f,register:p,getHeaders:m,getErrorMessage:h,resolveUploadedUrl:g,acceptedTypes:_,texts:v})=>{let[y,b]=i(a??null),{upload:x,isUploading:S}=t({initUrl:d,buildInitBody:f,register:p,getHeaders:m,getErrorMessage:h,resolveUploadedUrl:g,acceptedTypes:_,texts:v});return n(e,{onDrop:r(async e=>{let t=e[0];if(t){b(URL.createObjectURL(t));try{let e=await x(t);o?.(e)}catch(e){b(a??null),s?.(e.message)}}},[x,o,s,a]),value:y,maxSize:c,disabled:l,isUploading:S,classNames:u})};export{a as AvatarDropzoneS3};
|
|
2
2
|
//# sourceMappingURL=AvatarDropzoneS3.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarDropzoneS3.mjs","names":[
|
|
1
|
+
{"version":3,"file":"AvatarDropzoneS3.mjs","names":[],"sources":["../../../../../src/components/controls/dropzone/avatar/AvatarDropzoneS3.tsx"],"sourcesContent":["import { useCallback, useState } from 'react';\n\nimport type { IconProps, LoaderOvalProps } from '@/components/data-display';\n\nimport {\n type S3InitBody,\n type S3UploadConfig,\n useS3Upload,\n} from '../use-s3-upload';\nimport {\n AvatarDropzoneBase,\n type AvatarDropzoneClassNames,\n} from './AvatarDropzoneBase';\n\nexport type AvatarDropzoneS3Props<TInitBody extends S3InitBody = S3InitBody> =\n S3UploadConfig<TInitBody> & {\n value?: string;\n onChange?: (url: string) => void;\n onError?: (message: string) => void;\n maxSize?: number;\n disabled?: boolean;\n classNames?: AvatarDropzoneClassNames & {\n icon?: IconProps['classNames'];\n loader?: LoaderOvalProps['classNames'];\n };\n };\n\nexport const AvatarDropzoneS3 = <TInitBody extends S3InitBody = S3InitBody>({\n value,\n onChange,\n onError,\n maxSize,\n disabled = false,\n classNames,\n initUrl,\n buildInitBody,\n register,\n getHeaders,\n getErrorMessage,\n resolveUploadedUrl,\n acceptedTypes,\n texts,\n}: AvatarDropzoneS3Props<TInitBody>) => {\n const [preview, setPreview] = useState<string | null>(value ?? null);\n const { upload, isUploading } = useS3Upload<TInitBody>({\n initUrl,\n buildInitBody,\n register,\n getHeaders,\n getErrorMessage,\n resolveUploadedUrl,\n acceptedTypes,\n texts,\n });\n\n const handleDrop = useCallback(\n async (files: File[]) => {\n const file = files[0];\n if (!file) return;\n setPreview(URL.createObjectURL(file));\n try {\n const url = await upload(file);\n onChange?.(url);\n } catch (err) {\n setPreview(value ?? null);\n onError?.((err as Error).message);\n }\n },\n [upload, onChange, onError, value],\n );\n\n return (\n <AvatarDropzoneBase\n onDrop={handleDrop}\n value={preview}\n maxSize={maxSize}\n disabled={disabled}\n isUploading={isUploading}\n classNames={classNames}\n />\n );\n};\n"],"mappings":"2MA2BA,MAAa,GAA+D,CAC1E,QACA,WACA,UACA,UACA,WAAW,GACX,aACA,UACA,gBACA,WACA,aACA,kBACA,qBACA,gBACA,WACsC,CACtC,GAAM,CAAC,EAAS,GAAc,EAAwB,GAAS,KAAK,CAC9D,CAAE,SAAQ,eAAgB,EAAuB,CACrD,UACA,gBACA,WACA,aACA,kBACA,qBACA,gBACA,QACD,CAAC,CAkBF,OACE,EAAC,EAAD,CACE,OAlBe,EACjB,KAAO,IAAkB,CACvB,IAAM,EAAO,EAAM,GACd,KACL,GAAW,IAAI,gBAAgB,EAAK,CAAC,CACrC,GAAI,CACF,IAAM,EAAM,MAAM,EAAO,EAAK,CAC9B,IAAW,EAAI,OACR,EAAK,CACZ,EAAW,GAAS,KAAK,CACzB,IAAW,EAAc,QAAQ,IAGrC,CAAC,EAAQ,EAAU,EAAS,EAAM,CACnC,CAKG,MAAO,EACE,UACC,WACG,cACD,aACZ,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mage-ui/components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.133",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "",
|
|
6
6
|
"keywords": [],
|
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
"rimraf": "^6.1.3",
|
|
26
26
|
"tsdown": "^0.21.4",
|
|
27
27
|
"typescript": "^5.9.3",
|
|
28
|
-
"@mage-ui/preset": "1.0.
|
|
28
|
+
"@mage-ui/preset": "1.0.133",
|
|
29
29
|
"@mage-ui/styled-system": "1.0.8"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|