@mage-ui/components 1.0.122 → 1.0.124

package/dist/components/controls/dropzone/Dropzone.d.mts

@@ -40,6 +40,7 @@ type DropzoneProps = {
   hint?: ReactNode;
   inputId?: string;
   onFileUploaded?: (file: FileData) => void;
+  hideWhenFull?: boolean;
   classNames?: {
     dropzone?: string;
     root?: string;
@@ -74,7 +75,8 @@ declare const Dropzone: ({
   inputId,
   onFileUploaded,
   classNames,
-  direction
+  direction,
+  hideWhenFull
 }: DropzoneProps) => react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Dropzone, DropzoneProps, FileData };

package/dist/components/controls/dropzone/Dropzone.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA2BY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA,WAdQ;EAgBR,GAAA,WAbuB;EAevB,QAAA,YAbE;EAeF,OAAA,WAbE;EAeF,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EACV,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA;EACxB,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA;AAAA,cAGW,QAAA;EAAY,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,GAAA;EAAA,QAAA;EAAA,OAAA;EAAA,QAAA;EAAA,MAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,cAAA;EAAA,UAAA;EAAA;AAAA,GAkBtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"Dropzone.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"mappings":";;;;;;KA2BY,QAAA;EACV,IAAA;EACA,IAAA;EACA,IAAA;EACA,IAAA;EACA,QAAA;EACA,OAAA;EACA,GAAA;EACA,KAAA;EACA,QAAA;AAAA;AAAA,KAGU,aAAA;EACV,QAAA;IACE,KAAA;IACA,WAAA;IACA;EAAA;IAEA,KAAA,EAAO,MAAA,SAAe,QAAA;IACtB,WAAA;IACA,UAAA,GAAa,QAAA;EAAA,MACT,SAAA;EACN,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA,WAdQ;EAgBR,GAAA,WAbuB;EAevB,QAAA,YAbE;EAeF,OAAA,WAbE;EAeF,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,IAAA,GAAO,MAAA;EACP,OAAA,GAAU,MAAA;EACV,MAAA;EACA,qBAAA;EACA,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,OAAA;EACA,cAAA,IAAkB,IAAA,EAAM,QAAA;EACxB,YAAA;EACA,UAAA;IACE,QAAA;IACA,IAAA;IACA,gBAAA;MACE,IAAA;MACA,KAAA;IAAA;IAEF,QAAA;IACA,YAAA,GAAe,SAAA;IACf,MAAA,GAAS,eAAA;IACT,QAAA;IACA,KAAA;IACA,QAAA;IACA,IAAA;EAAA;EAEF,SAAA;AAAA;AAAA,cAGW,QAAA;EAAY,IAAA;EAAA,OAAA;EAAA,QAAA;EAAA,YAAA;EAAA,QAAA;EAAA,GAAA;EAAA,QAAA;EAAA,OAAA;EAAA,QAAA;EAAA,MAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,OAAA;EAAA,cAAA;EAAA,UAAA;EAAA,SAAA;EAAA;AAAA,GAmBtB,aAAA,KAAa,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropzone/Dropzone.mjs

@@ -1,2 +1,2 @@
-import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzone as i,dropzoneDropzoneInner as a,dropzoneDropzoneRoot as o,dropzoneHint as s,dropzoneIcon as c,dropzoneIconSlot as l,dropzoneLoader as u,dropzoneLoaderRoot as d,dropzoneRoot as f,dropzoneSubtitle as p,dropzoneTextSlot as m,dropzoneTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,autoSend:O=!0,maxSize:k,onChange:A,accept:j,title:M,subtitle:N,hint:P,inputId:F,onFileUploaded:I,classNames:L,direction:R=`default`})=>{let z=b(null),B=b(new Map),{files:V,isUploading:H,uploadMultipleFiles:U,addFile:W,removeFile:G}=n(D,T,I,C),K=y(e=>{G(e),B.current.delete(e),!O&&A&&A(Array.from(B.current.values()))},[G,O,A]),q=y(async e=>{let t=Object.keys(V).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(O)await U(r,S);else{for(let e of r)W(e),B.current.set(e.name,e);A?.(Array.from(B.current.values()))}},[O,U,W,S,V,E,A]);return v(`div`,{className:r(L?.dropzone??i(),L?.root??f()),"data-direction":R,children:[v(x,{ref:z,onDrop:q,disabled:Object.keys(V).length>=(E??1/0),loading:H,accept:j,maxSize:k,preventDropOnDocument:!0,inputProps:{id:F},classNames:{root:L?.dropzoneDropzone?.root??r(o(),`group`),inner:L?.dropzoneDropzone?.inner??a()},children:[_(`div`,{className:L?.iconSlot??l(),children:H?_(t,{classNames:{loader:L?.loader?.loader??u(),root:L?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:L?.dropzoneIcon?.icon??c()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:L?.dropzoneIcon?.icon??c()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:L?.dropzoneIcon?.icon??c()}})})]})}),v(`div`,{className:L?.textSlot??m(),children:[_(`span`,{className:L?.title??h(),children:M||`Upload files`}),_(`span`,{className:L?.subtitle??p(),children:N||`Drag images here or click to select files`}),_(`span`,{className:L?.hint??s(),children:P||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:V,isUploading:H,removeFile:K})]})};export{S as Dropzone};
+import{Icon as e}from"../../data-display/icons/icon/Icon.mjs";import{LoaderOval as t}from"../../data-display/loader-oval/LoaderOval.mjs";import{useDropzoneState as n}from"./use-dropzone-state.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzone as i,dropzoneDropzoneInner as a,dropzoneDropzoneRoot as o,dropzoneHint as s,dropzoneIcon as c,dropzoneIconSlot as l,dropzoneLoader as u,dropzoneLoaderRoot as d,dropzoneRoot as f,dropzoneSubtitle as p,dropzoneTextSlot as m,dropzoneTitle as h}from"@mage-ui/styled-system/recipes";import{Fragment as g,jsx as _,jsxs as v}from"react/jsx-runtime";import{useCallback as y,useRef as b}from"react";import{Dropzone as x}from"@mantine/dropzone";const S=({data:S,headers:C,children:w,initialFiles:T={},maxFiles:E,url:D,autoSend:O=!0,maxSize:k,onChange:A,accept:j,title:M,subtitle:N,hint:P,inputId:F,onFileUploaded:I,classNames:L,direction:R=`default`,hideWhenFull:z=!1})=>{let B=b(null),V=b(new Map),{files:H,isUploading:U,uploadMultipleFiles:W,addFile:G,removeFile:K}=n(D,T,I,C),q=y(e=>{K(e),V.current.delete(e),!O&&A&&A(Array.from(V.current.values()))},[K,O,A]),J=y(async e=>{let t=Object.keys(H).length,n=(E??1/0)-t;if(n<=0)return;let r=e.slice(0,n);if(O)await W(r,S);else{for(let e of r)G(e),V.current.set(e.name,e);A?.(Array.from(V.current.values()))}},[O,W,G,S,H,E,A]),Y=E!==void 0&&Object.keys(H).length>=E;return v(`div`,{className:r(L?.dropzone??i(),L?.root??f()),"data-direction":R,children:[(!z||!Y)&&v(x,{ref:B,onDrop:J,disabled:Y,loading:U,accept:j,maxSize:k,preventDropOnDocument:!0,inputProps:{id:F},classNames:{root:L?.dropzoneDropzone?.root??r(o(),`group`),inner:L?.dropzoneDropzone?.inner??a()},children:[_(`div`,{className:L?.iconSlot??l(),children:U?_(t,{classNames:{loader:L?.loader?.loader??u(),root:L?.loader?.root??d()}}):v(g,{children:[_(x.Idle,{children:_(e,{name:`mage-dropzone-upload-01`,path:`/icons/sprite-mage.svg`,classNames:{icon:L?.dropzoneIcon?.icon??c()}})}),_(x.Accept,{children:_(e,{name:`mage-dropzone-thumbs-up`,path:`/icons/sprite-mage.svg`,classNames:{icon:L?.dropzoneIcon?.icon??c()}})}),_(x.Reject,{children:_(e,{name:`mage-dropzone-thumbs-down`,path:`/icons/sprite-mage.svg`,classNames:{icon:L?.dropzoneIcon?.icon??c()}})})]})}),v(`div`,{className:L?.textSlot??m(),children:[_(`span`,{className:L?.title??h(),children:M||`Upload files`}),_(`span`,{className:L?.subtitle??p(),children:N||`Drag images here or click to select files`}),_(`span`,{className:L?.hint??s(),children:P||`Attach as many files as you like, each file should not exceed 5mb`})]})]}),w({files:H,isUploading:U,removeFile:q})]})};export{S as Dropzone};
 //# sourceMappingURL=Dropzone.mjs.map

package/dist/components/controls/dropzone/Dropzone.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Dropzone.mjs","names":["Dropzone","MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzone,\n  dropzoneDropzoneInner,\n  dropzoneDropzoneRoot,\n  dropzoneHint,\n  dropzoneIcon,\n  dropzoneIconSlot,\n  dropzoneLoader,\n  dropzoneLoaderRoot,\n  dropzoneRoot,\n  dropzoneSubtitle,\n  dropzoneTextSlot,\n  dropzoneTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  /** Required when autoSend=true (default). Optional when autoSend=false. */\n  url?: string;\n  /** When false, files are added to state but not uploaded automatically. Default: true. */\n  autoSend?: boolean;\n  /** Maximum file size in bytes. Files exceeding this will be rejected. */\n  maxSize?: number;\n  /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n  onChange?: (files: File[]) => void;\n  data?: Record<string, unknown>;\n  headers?: Record<string, string>;\n  accept?: string[];\n  preventDropOnDocument?: boolean;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  onFileUploaded?: (file: FileData) => void;\n  classNames?: {\n    dropzone?: string;\n    root?: string;\n    dropzoneDropzone?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n  direction?: 'default' | 'reverse';\n};\n\nexport const Dropzone = ({\n  data,\n  headers,\n  children,\n  initialFiles = {},\n  maxFiles,\n  url,\n  autoSend = true,\n  maxSize,\n  onChange,\n  accept,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  onFileUploaded,\n  classNames,\n  direction = 'default',\n}: DropzoneProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const rawFilesRef = useRef<Map<string, File>>(new Map());\n  const {\n    files,\n    isUploading,\n    uploadMultipleFiles,\n    addFile,\n    removeFile: hookRemoveFile,\n  } = useDropzoneState(url, initialFiles, onFileUploaded, headers);\n\n  const removeFile = useCallback(\n    (fileName: string) => {\n      hookRemoveFile(fileName);\n      rawFilesRef.current.delete(fileName);\n      if (!autoSend && onChange) {\n        onChange(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [hookRemoveFile, autoSend, onChange],\n  );\n\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n      if (autoSend) {\n        await uploadMultipleFiles(filesToProcess, data);\n      } else {\n        for (const file of filesToProcess) {\n          addFile(file);\n          rawFilesRef.current.set(file.name, file);\n        }\n        onChange?.(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n  );\n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzone ?? dropzone(),\n        classNames?.root ?? dropzoneRoot(),\n      )}\n      data-direction={direction}\n    >\n      <MantineDropzone\n        ref={dropzoneRef}\n        onDrop={handleDrop}\n        disabled={\n          Object.keys(files).length >= (maxFiles ?? Number.POSITIVE_INFINITY)\n        }\n        loading={isUploading}\n        accept={accept}\n        maxSize={maxSize}\n        preventDropOnDocument\n        inputProps={{ id: inputId }}\n        classNames={{\n          root:\n            classNames?.dropzoneDropzone?.root ??\n            cx(dropzoneDropzoneRoot(), 'group'),\n          inner: classNames?.dropzoneDropzone?.inner ?? dropzoneDropzoneInner(),\n        }}\n      >\n        <div className={classNames?.iconSlot ?? dropzoneIconSlot()}>\n          {isUploading ? (\n            <LoaderOval\n              classNames={{\n                loader: classNames?.loader?.loader ?? dropzoneLoader(),\n                root: classNames?.loader?.root ?? dropzoneLoaderRoot(),\n              }}\n            />\n          ) : (\n            <>\n              <MantineDropzone.Idle>\n                <Icon\n                  name='mage-dropzone-upload-01'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Idle>\n              <MantineDropzone.Accept>\n                <Icon\n                  name='mage-dropzone-thumbs-up'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Accept>\n              <MantineDropzone.Reject>\n                <Icon\n                  name='mage-dropzone-thumbs-down'\n                  path='/icons/sprite-mage.svg'\n                  classNames={{\n                    icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                  }}\n                />\n              </MantineDropzone.Reject>\n            </>\n          )}\n        </div>\n        <div className={classNames?.textSlot ?? dropzoneTextSlot()}>\n          <span className={classNames?.title ?? dropzoneTitle()}>\n            {title || 'Upload files'}\n          </span>\n          <span className={classNames?.subtitle ?? dropzoneSubtitle()}>\n            {subtitle || 'Drag images here or click to select files'}\n          </span>\n          <span className={classNames?.hint ?? dropzoneHint()}>\n            {hint ||\n              'Attach as many files as you like, each file should not exceed 5mb'}\n          </span>\n        </div>\n      </MantineDropzone>\n      {children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"wrBAsFA,MAAaA,GAAY,CACvB,OACA,UACA,WACA,eAAe,EAAE,CACjB,WACA,MACA,WAAW,GACX,UACA,WACA,SACA,QACA,WACA,OACA,UACA,iBACA,aACA,YAAY,aACO,CACnB,IAAM,EAAc,EAAuB,KAAK,CAC1C,EAAc,EAA0B,IAAI,IAAM,CAClD,CACJ,QACA,cACA,sBACA,UACA,WAAY,GACV,EAAiB,EAAK,EAAc,EAAgB,EAAQ,CAE1D,EAAa,EAChB,GAAqB,CACpB,EAAe,EAAS,CACxB,EAAY,QAAQ,OAAO,EAAS,CAChC,CAAC,GAAY,GACf,EAAS,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,EAGtD,CAAC,EAAgB,EAAU,EAAS,CACrC,CAEK,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EAC7B,GAAI,GAAkB,EACpB,OAEF,IAAM,EAAiB,EAAc,MAAM,EAAG,EAAe,CAC7D,GAAI,EACF,MAAM,EAAoB,EAAgB,EAAK,KAC1C,CACL,IAAK,IAAM,KAAQ,EACjB,EAAQ,EAAK,CACb,EAAY,QAAQ,IAAI,EAAK,KAAM,EAAK,CAE1C,IAAW,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,GAGxD,CAAC,EAAU,EAAqB,EAAS,EAAM,EAAO,EAAU,EAAS,CAC1E,CAED,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,iBAAgB,WALlB,CAOE,EAACC,EAAD,CACE,IAAK,EACL,OAAQ,EACR,SACE,OAAO,KAAK,EAAM,CAAC,SAAW,GAAY,KAE5C,QAAS,EACD,SACC,UACT,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KACE,GAAY,kBAAkB,MAC9B,EAAG,GAAsB,CAAE,QAAQ,CACrC,MAAO,GAAY,kBAAkB,OAAS,GAAuB,CACtE,UAhBH,CAkBE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAkB,UACvD,EACC,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAgB,CACtD,KAAM,GAAY,QAAQ,MAAQ,GAAoB,CACvD,CACD,CAAA,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACmB,CAAA,CACvB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACqB,CAAA,CACzB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACqB,CAAA,CACxB,CAAA,CAAA,CAED,CAAA,CACN,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAkB,UAA1D,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,OAAS,GAAe,UAClD,GAAS,eACL,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAAkB,UACxD,GAAY,4CACR,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAc,UAChD,GACC,oEACG,CAAA,CACH,GACU,GACjB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CACzC"}
+{"version":3,"file":"Dropzone.mjs","names":["Dropzone","MantineDropzone"],"sources":["../../../../src/components/controls/dropzone/Dropzone.tsx"],"sourcesContent":["import { type ReactNode, useCallback, useRef } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzone,\n  dropzoneDropzoneInner,\n  dropzoneDropzoneRoot,\n  dropzoneHint,\n  dropzoneIcon,\n  dropzoneIconSlot,\n  dropzoneLoader,\n  dropzoneLoaderRoot,\n  dropzoneRoot,\n  dropzoneSubtitle,\n  dropzoneTextSlot,\n  dropzoneTitle,\n} from '@mage-ui/styled-system/recipes';\nimport { Dropzone as MantineDropzone } from '@mantine/dropzone';\nimport {\n  Icon,\n  type IconProps,\n  LoaderOval,\n  type LoaderOvalProps,\n} from '@/components/data-display';\n\nimport { useDropzoneState } from './use-dropzone-state';\n\nexport type FileData = {\n  name: string;\n  size: number;\n  type: string;\n  date: string;\n  uploaded: boolean;\n  loading: boolean;\n  url: string;\n  error?: string;\n  progress?: number; // (0-100)\n};\n\nexport type DropzoneProps = {\n  children: ({\n    files,\n    isUploading,\n    removeFile,\n  }: {\n    files: Record<string, FileData>;\n    isUploading: boolean;\n    removeFile: (fileName: string) => void;\n  }) => ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  /** Required when autoSend=true (default). Optional when autoSend=false. */\n  url?: string;\n  /** When false, files are added to state but not uploaded automatically. Default: true. */\n  autoSend?: boolean;\n  /** Maximum file size in bytes. Files exceeding this will be rejected. */\n  maxSize?: number;\n  /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n  onChange?: (files: File[]) => void;\n  data?: Record<string, unknown>;\n  headers?: Record<string, string>;\n  accept?: string[];\n  preventDropOnDocument?: boolean;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  inputId?: string;\n  onFileUploaded?: (file: FileData) => void;\n  hideWhenFull?: boolean;\n  classNames?: {\n    dropzone?: string;\n    root?: string;\n    dropzoneDropzone?: {\n      root?: string;\n      inner?: string;\n    };\n    iconSlot?: string;\n    dropzoneIcon?: IconProps['classNames'];\n    loader?: LoaderOvalProps['classNames'];\n    textSlot?: string;\n    title?: string;\n    subtitle?: string;\n    hint?: string;\n  };\n  direction?: 'default' | 'reverse';\n};\n\nexport const Dropzone = ({\n  data,\n  headers,\n  children,\n  initialFiles = {},\n  maxFiles,\n  url,\n  autoSend = true,\n  maxSize,\n  onChange,\n  accept,\n  title,\n  subtitle,\n  hint,\n  inputId,\n  onFileUploaded,\n  classNames,\n  direction = 'default',\n  hideWhenFull = false,\n}: DropzoneProps) => {\n  const dropzoneRef = useRef<HTMLDivElement>(null);\n  const rawFilesRef = useRef<Map<string, File>>(new Map());\n  const {\n    files,\n    isUploading,\n    uploadMultipleFiles,\n    addFile,\n    removeFile: hookRemoveFile,\n  } = useDropzoneState(url, initialFiles, onFileUploaded, headers);\n\n  const removeFile = useCallback(\n    (fileName: string) => {\n      hookRemoveFile(fileName);\n      rawFilesRef.current.delete(fileName);\n      if (!autoSend && onChange) {\n        onChange(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [hookRemoveFile, autoSend, onChange],\n  );\n\n  const handleDrop = useCallback(\n    async (acceptedFiles: File[]) => {\n      const currentCount = Object.keys(files).length;\n      const max = maxFiles ?? Number.POSITIVE_INFINITY;\n      const remainingSlots = max - currentCount;\n      if (remainingSlots <= 0) {\n        return;\n      }\n      const filesToProcess = acceptedFiles.slice(0, remainingSlots);\n      if (autoSend) {\n        await uploadMultipleFiles(filesToProcess, data);\n      } else {\n        for (const file of filesToProcess) {\n          addFile(file);\n          rawFilesRef.current.set(file.name, file);\n        }\n        onChange?.(Array.from(rawFilesRef.current.values()));\n      }\n    },\n    [autoSend, uploadMultipleFiles, addFile, data, files, maxFiles, onChange],\n  );\n\n  const isFull =\n    maxFiles !== undefined && Object.keys(files).length >= maxFiles;\n\n  return (\n    <div\n      className={cx(\n        classNames?.dropzone ?? dropzone(),\n        classNames?.root ?? dropzoneRoot(),\n      )}\n      data-direction={direction}\n    >\n      {(!hideWhenFull || !isFull) && (\n        <MantineDropzone\n          ref={dropzoneRef}\n          onDrop={handleDrop}\n          disabled={isFull}\n          loading={isUploading}\n          accept={accept}\n          maxSize={maxSize}\n          preventDropOnDocument\n          inputProps={{ id: inputId }}\n          classNames={{\n            root:\n              classNames?.dropzoneDropzone?.root ??\n              cx(dropzoneDropzoneRoot(), 'group'),\n            inner:\n              classNames?.dropzoneDropzone?.inner ?? dropzoneDropzoneInner(),\n          }}\n        >\n          <div className={classNames?.iconSlot ?? dropzoneIconSlot()}>\n            {isUploading ? (\n              <LoaderOval\n                classNames={{\n                  loader: classNames?.loader?.loader ?? dropzoneLoader(),\n                  root: classNames?.loader?.root ?? dropzoneLoaderRoot(),\n                }}\n              />\n            ) : (\n              <>\n                <MantineDropzone.Idle>\n                  <Icon\n                    name='mage-dropzone-upload-01'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                    }}\n                  />\n                </MantineDropzone.Idle>\n                <MantineDropzone.Accept>\n                  <Icon\n                    name='mage-dropzone-thumbs-up'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                    }}\n                  />\n                </MantineDropzone.Accept>\n                <MantineDropzone.Reject>\n                  <Icon\n                    name='mage-dropzone-thumbs-down'\n                    path='/icons/sprite-mage.svg'\n                    classNames={{\n                      icon: classNames?.dropzoneIcon?.icon ?? dropzoneIcon(),\n                    }}\n                  />\n                </MantineDropzone.Reject>\n              </>\n            )}\n          </div>\n          <div className={classNames?.textSlot ?? dropzoneTextSlot()}>\n            <span className={classNames?.title ?? dropzoneTitle()}>\n              {title || 'Upload files'}\n            </span>\n            <span className={classNames?.subtitle ?? dropzoneSubtitle()}>\n              {subtitle || 'Drag images here or click to select files'}\n            </span>\n            <span className={classNames?.hint ?? dropzoneHint()}>\n              {hint ||\n                'Attach as many files as you like, each file should not exceed 5mb'}\n            </span>\n          </div>\n        </MantineDropzone>\n      )}\n      {children({ files, isUploading, removeFile })}\n    </div>\n  );\n};\n"],"mappings":"wrBAuFA,MAAaA,GAAY,CACvB,OACA,UACA,WACA,eAAe,EAAE,CACjB,WACA,MACA,WAAW,GACX,UACA,WACA,SACA,QACA,WACA,OACA,UACA,iBACA,aACA,YAAY,UACZ,eAAe,MACI,CACnB,IAAM,EAAc,EAAuB,KAAK,CAC1C,EAAc,EAA0B,IAAI,IAAM,CAClD,CACJ,QACA,cACA,sBACA,UACA,WAAY,GACV,EAAiB,EAAK,EAAc,EAAgB,EAAQ,CAE1D,EAAa,EAChB,GAAqB,CACpB,EAAe,EAAS,CACxB,EAAY,QAAQ,OAAO,EAAS,CAChC,CAAC,GAAY,GACf,EAAS,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,EAGtD,CAAC,EAAgB,EAAU,EAAS,CACrC,CAEK,EAAa,EACjB,KAAO,IAA0B,CAC/B,IAAM,EAAe,OAAO,KAAK,EAAM,CAAC,OAElC,GADM,GAAY,KACK,EAC7B,GAAI,GAAkB,EACpB,OAEF,IAAM,EAAiB,EAAc,MAAM,EAAG,EAAe,CAC7D,GAAI,EACF,MAAM,EAAoB,EAAgB,EAAK,KAC1C,CACL,IAAK,IAAM,KAAQ,EACjB,EAAQ,EAAK,CACb,EAAY,QAAQ,IAAI,EAAK,KAAM,EAAK,CAE1C,IAAW,MAAM,KAAK,EAAY,QAAQ,QAAQ,CAAC,CAAC,GAGxD,CAAC,EAAU,EAAqB,EAAS,EAAM,EAAO,EAAU,EAAS,CAC1E,CAEK,EACJ,IAAa,IAAA,IAAa,OAAO,KAAK,EAAM,CAAC,QAAU,EAEzD,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,UAAY,GAAU,CAClC,GAAY,MAAQ,GAAc,CACnC,CACD,iBAAgB,WALlB,EAOI,CAAC,GAAgB,CAAC,IAClB,EAACC,EAAD,CACE,IAAK,EACL,OAAQ,EACR,SAAU,EACV,QAAS,EACD,SACC,UACT,sBAAA,GACA,WAAY,CAAE,GAAI,EAAS,CAC3B,WAAY,CACV,KACE,GAAY,kBAAkB,MAC9B,EAAG,GAAsB,CAAE,QAAQ,CACrC,MACE,GAAY,kBAAkB,OAAS,GAAuB,CACjE,UAfH,CAiBE,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAkB,UACvD,EACC,EAAC,EAAD,CACE,WAAY,CACV,OAAQ,GAAY,QAAQ,QAAU,GAAgB,CACtD,KAAM,GAAY,QAAQ,MAAQ,GAAoB,CACvD,CACD,CAAA,CAEF,EAAA,EAAA,CAAA,SAAA,CACE,EAACA,EAAgB,KAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACmB,CAAA,CACvB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,0BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACqB,CAAA,CACzB,EAACA,EAAgB,OAAjB,CAAA,SACE,EAAC,EAAD,CACE,KAAK,4BACL,KAAK,yBACL,WAAY,CACV,KAAM,GAAY,cAAc,MAAQ,GAAc,CACvD,CACD,CAAA,CACqB,CAAA,CACxB,CAAA,CAAA,CAED,CAAA,CACN,EAAC,MAAD,CAAK,UAAW,GAAY,UAAY,GAAkB,UAA1D,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,OAAS,GAAe,UAClD,GAAS,eACL,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAAkB,UACxD,GAAY,4CACR,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAc,UAChD,GACC,oEACG,CAAA,CACH,GACU,GAEnB,EAAS,CAAE,QAAO,cAAa,aAAY,CAAC,CACzC"}

package/dist/components/controls/dropzone-files/DropzoneFiles.d.mts

@@ -19,6 +19,7 @@ type DropzoneFilesProps = {
   autoSend?: boolean; /** Called when the file list changes (added or removed). Useful when autoSend=false. */
   onChange?: (files: File[]) => void;
   inputId?: string;
+  hideWhenFull?: boolean;
   fileListHeight?: number | string;
   classNames?: {
     dropzoneFiles?: string;
@@ -52,6 +53,7 @@ declare const DropzoneFiles: ({
   autoSend,
   onChange,
   inputId,
+  hideWhenFull,
   classNames,
   direction
 }: DropzoneFilesProps) => react_jsx_runtime0.JSX.Element;

package/dist/components/controls/dropzone-files/DropzoneFiles.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"DropzoneFiles.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"mappings":";;;;;;KAoCY,kBAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA,WANc;EAQd,OAAA;EACA,MAAA,aANW;EAQX,GAAA,WAN8B;EAQ9B,QAAA,YAEmB;EAAnB,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,OAAA;EACA,cAAA;EACA,UAAA;IACE,aAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,QAAA;IACA,QAAA;IACA,YAAA,GAAe,iBAAA;IACf,gBAAA,GAAmB,aAAA;IACnB,UAAA;MAAe,UAAA;IAAA;EAAA;EAIjB,SAAA;AAAA;AAAA,cAGW,aAAA;EAAiB,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,YAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;EAAA,QAAA;EAAA,QAAA;EAAA,OAAA;EAAA,UAAA;EAAA;AAAA,GAiB3B,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}
+{"version":3,"file":"DropzoneFiles.d.mts","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"mappings":";;;;;;KAoCY,kBAAA;EACV,KAAA,GAAQ,SAAA;EACR,WAAA,GAAc,SAAA;EACd,KAAA,GAAQ,SAAA;EACR,KAAA,GAAQ,SAAA;EACR,QAAA,GAAW,SAAA;EACX,IAAA,GAAO,SAAA;EACP,YAAA,GAAe,MAAA,SAAe,QAAA;EAC9B,QAAA,WANc;EAQd,OAAA;EACA,MAAA,aANW;EAQX,GAAA,WAN8B;EAQ9B,QAAA,YAEmB;EAAnB,QAAA,IAAY,KAAA,EAAO,IAAA;EACnB,OAAA;EACA,YAAA;EACA,cAAA;EACA,UAAA;IACE,aAAA;IACA,IAAA;IACA,YAAA;IACA,KAAA;IACA,WAAA;IACA,KAAA;IACA,QAAA;IACA,QAAA;IACA,YAAA,GAAe,iBAAA;IACf,gBAAA,GAAmB,aAAA;IACnB,UAAA;MAAe,UAAA;IAAA;EAAA;EAIjB,SAAA;AAAA;AAAA,cAGW,aAAA;EAAiB,KAAA;EAAA,WAAA;EAAA,KAAA;EAAA,KAAA;EAAA,QAAA;EAAA,IAAA;EAAA,YAAA;EAAA,QAAA;EAAA,OAAA;EAAA,MAAA;EAAA,GAAA;EAAA,QAAA;EAAA,QAAA;EAAA,OAAA;EAAA,YAAA;EAAA,UAAA;EAAA;AAAA,GAkB3B,kBAAA,KAAkB,kBAAA,CAAA,GAAA,CAAA,OAAA"}

package/dist/components/controls/dropzone-files/DropzoneFiles.mjs

@@ -1,2 +1,2 @@
-import{UploadedFile as e}from"../../data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as t}from"../../data-display/uploaded-file/UploadedFileDetails.mjs";import{Dropzone as n}from"../dropzone/Dropzone.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneFiles as i,dropzoneFilesDescription as a,dropzoneFilesDropzone as o,dropzoneFilesError as s,dropzoneFilesFileItem as c,dropzoneFilesFileList as l,dropzoneFilesLabel as u,dropzoneFilesLabelWrapper as d,dropzoneFilesRoot as f,dropzoneFilesUploadedFile as p}from"@mage-ui/styled-system/recipes";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useId as g}from"react";const _=({label:_,description:v,error:y,title:b,subtitle:x,hint:S,initialFiles:C,maxFiles:w,maxSize:T,accept:E,url:D,autoSend:O,onChange:k,inputId:A,classNames:j,direction:M=`default`})=>{let N=g(),P=A??N;return h(`div`,{className:r(j?.dropzoneFiles??i(),j?.root??f()),children:[h(`div`,{className:j?.labelWrapper??d(),children:[_&&m(`label`,{htmlFor:P,className:j?.label??u(),children:_}),v&&m(`p`,{className:j?.description??a(),children:v})]}),m(n,{maxFiles:w,maxSize:T,accept:E,url:D,autoSend:O,onChange:k,initialFiles:C,inputId:P,title:b,subtitle:x,hint:S,direction:M,classNames:{dropzone:j?.dropzoneDropzone?.dropzone??o()},children:({files:n,removeFile:r})=>Object.keys(n).length>0?m(`ul`,{className:j?.fileList??l(),children:Object.values(n).map(n=>m(`li`,{className:j?.fileItem??c(),children:m(e,{fileName:n.name,fileType:n.type,url:n.url,onRemove:()=>r(n.name),classNames:{uploadedFile:j?.uploadedFile?.uploadedFile??p()},children:m(t,{fileSize:`${(n.size/1024).toFixed(1)} KB`,fileDate:n.date,fileType:n.type})},n.name)},n.name))}):null}),y&&m(`p`,{className:j?.error??s(),children:y})]})};export{_ as DropzoneFiles};
+import{UploadedFile as e}from"../../data-display/uploaded-file/UploadedFile.mjs";import{UploadedFileDetails as t}from"../../data-display/uploaded-file/UploadedFileDetails.mjs";import{Dropzone as n}from"../dropzone/Dropzone.mjs";import{cx as r}from"@mage-ui/styled-system/css";import{dropzoneFiles as i,dropzoneFilesDescription as a,dropzoneFilesDropzone as o,dropzoneFilesError as s,dropzoneFilesFileItem as c,dropzoneFilesFileList as l,dropzoneFilesLabel as u,dropzoneFilesLabelWrapper as d,dropzoneFilesRoot as f,dropzoneFilesUploadedFile as p}from"@mage-ui/styled-system/recipes";import{jsx as m,jsxs as h}from"react/jsx-runtime";import{useId as g}from"react";const _=({label:_,description:v,error:y,title:b,subtitle:x,hint:S,initialFiles:C,maxFiles:w,maxSize:T,accept:E,url:D,autoSend:O,onChange:k,inputId:A,hideWhenFull:j,classNames:M,direction:N=`default`})=>{let P=g(),F=A??P;return h(`div`,{className:r(M?.dropzoneFiles??i(),M?.root??f()),children:[h(`div`,{className:M?.labelWrapper??d(),children:[_&&m(`label`,{htmlFor:F,className:M?.label??u(),children:_}),v&&m(`p`,{className:M?.description??a(),children:v})]}),m(n,{maxFiles:w,maxSize:T,accept:E,url:D,autoSend:O,onChange:k,initialFiles:C,inputId:F,title:b,subtitle:x,hint:S,direction:N,hideWhenFull:j,classNames:{dropzone:M?.dropzoneDropzone?.dropzone??o()},children:({files:n,removeFile:r})=>Object.keys(n).length>0?m(`ul`,{className:M?.fileList??l(),children:Object.values(n).map(n=>m(`li`,{className:M?.fileItem??c(),children:m(e,{fileName:n.name,fileType:n.type,url:n.url,onRemove:()=>r(n.name),classNames:{uploadedFile:M?.uploadedFile?.uploadedFile??p()},children:m(t,{fileSize:`${(n.size/1024).toFixed(1)} KB`,fileDate:n.date,fileType:n.type})},n.name)},n.name))}):null}),y&&m(`p`,{className:M?.error??s(),children:y})]})};export{_ as DropzoneFiles};
 //# sourceMappingURL=DropzoneFiles.mjs.map

package/dist/components/controls/dropzone-files/DropzoneFiles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"DropzoneFiles.mjs","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzoneFiles,\n  dropzoneFilesDescription,\n  dropzoneFilesDropzone,\n  dropzoneFilesError,\n  dropzoneFilesFileItem,\n  dropzoneFilesFileList,\n  dropzoneFilesLabel,\n  dropzoneFilesLabelWrapper,\n  dropzoneFilesRoot,\n  dropzoneFilesUploadedFile,\n  // dropzoneFilesUploadedFileStartIconWrapped,\n  // dropzoneFilesUploadedFileStartIconWrappedRoot,\n  // dropzoneFilesUploadedFileStartIcon,\n  // dropzoneFilesUploadedFileStartIconRoot,\n  // dropzoneFilesUploadedFileStartIconIconRaw,\n  // dropzoneFilesUploadedFileStartIconIconRawRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  Dropzone,\n  type DropzoneProps,\n  type FileData,\n} from '@/components/controls';\nimport {\n  // Icon,\n  // type IconProps,\n  // IconWrapped,\n  // type IconWrappedProps,\n  UploadedFile,\n  UploadedFileDetails,\n  type UploadedFileProps,\n} from '@/components/data-display';\n\nexport type DropzoneFilesProps = {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  /** Maximum file size in bytes. Files exceeding this will be rejected. */\n  maxSize?: number;\n  accept?: string[];\n  /** Required when autoSend=true (default). Optional when autoSend=false. */\n  url?: string;\n  /** When false, files are added to state but not uploaded automatically. Default: true. */\n  autoSend?: boolean;\n  /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n  onChange?: (files: File[]) => void;\n  inputId?: string;\n  fileListHeight?: number | string;\n  classNames?: {\n    dropzoneFiles?: string;\n    root?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    fileList?: string;\n    fileItem?: string;\n    uploadedFile?: UploadedFileProps['classNames'];\n    dropzoneDropzone?: DropzoneProps['classNames'];\n    scrollArea?: { scrollArea?: string };\n    // startIconWrapped?: IconWrappedProps['classNames'];\n    // startIcon?: IconProps['classNames'];\n  };\n  direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneFiles = ({\n  label,\n  description,\n  error,\n  title,\n  subtitle,\n  hint,\n  initialFiles,\n  maxFiles,\n  maxSize,\n  accept,\n  url,\n  autoSend,\n  onChange,\n  inputId,\n  classNames,\n  direction = 'default',\n}: DropzoneFilesProps) => {\n  const generatedId = useId();\n  const groupId = inputId ?? generatedId;\n\n  // TODO: gestionar error\n  // TOOD: gestionar required\n  return (\n    <div\n      className={cx(\n        classNames?.dropzoneFiles ?? dropzoneFiles(),\n        classNames?.root ?? dropzoneFilesRoot(),\n      )}\n    >\n      <div className={classNames?.labelWrapper ?? dropzoneFilesLabelWrapper()}>\n        {/* TODO: label obligatori / hidden */}\n        {label && (\n          <label\n            htmlFor={groupId}\n            className={classNames?.label ?? dropzoneFilesLabel()}\n          >\n            {label}\n          </label>\n        )}\n        {description && (\n          <p className={classNames?.description ?? dropzoneFilesDescription()}>\n            {description}\n          </p>\n        )}\n      </div>\n      <Dropzone\n        maxFiles={maxFiles}\n        maxSize={maxSize}\n        accept={accept}\n        url={url}\n        autoSend={autoSend}\n        onChange={onChange}\n        initialFiles={initialFiles}\n        inputId={groupId}\n        title={title}\n        subtitle={subtitle}\n        hint={hint}\n        direction={direction}\n        classNames={{\n          dropzone:\n            classNames?.dropzoneDropzone?.dropzone ?? dropzoneFilesDropzone(),\n        }}\n      >\n        {({ files, removeFile }) =>\n          Object.keys(files).length > 0 ? (\n            <ul className={classNames?.fileList ?? dropzoneFilesFileList()}>\n              {Object.values(files).map((file) => (\n                <li\n                  key={file.name}\n                  className={classNames?.fileItem ?? dropzoneFilesFileItem()}\n                >\n                  <UploadedFile\n                    key={file.name}\n                    fileName={file.name}\n                    fileType={file.type}\n                    url={file.url}\n                    onRemove={() => removeFile(file.name)}\n                    classNames={{\n                      uploadedFile:\n                        classNames?.uploadedFile?.uploadedFile ??\n                        dropzoneFilesUploadedFile(),\n                    }}\n                  >\n                    {/* TODO: comentar */}\n                    <UploadedFileDetails\n                      fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n                      fileDate={file.date}\n                      fileType={file.type}\n                    />\n                  </UploadedFile>\n                </li>\n              ))}\n            </ul>\n          ) : null\n        }\n      </Dropzone>\n      {error && (\n        <p className={classNames?.error ?? dropzoneFilesError()}>{error}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"upBA0EA,MAAa,GAAiB,CAC5B,QACA,cACA,QACA,QACA,WACA,OACA,eACA,WACA,UACA,SACA,MACA,WACA,WACA,UACA,aACA,YAAY,aACY,CACxB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAI3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,UAJH,CAME,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAA2B,UAAvE,CAEG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAoB,UAEnD,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAA0B,UAChE,EACC,CAAA,CAEF,GACN,EAAC,EAAD,CACY,WACD,UACD,SACH,MACK,WACA,WACI,eACd,QAAS,EACF,QACG,WACJ,OACK,YACX,WAAY,CACV,SACE,GAAY,kBAAkB,UAAY,GAAuB,CACpE,WAEC,CAAE,QAAO,gBACT,OAAO,KAAK,EAAM,CAAC,OAAS,EAC1B,EAAC,KAAD,CAAI,UAAW,GAAY,UAAY,GAAuB,UAC3D,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,KAAD,CAEE,UAAW,GAAY,UAAY,GAAuB,UAE1D,EAAC,EAAD,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,KAAK,CACrC,WAAY,CACV,aACE,GAAY,cAAc,cAC1B,GAA2B,CAC9B,UAGD,EAAC,EAAD,CACE,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,SAAU,EAAK,KACf,CAAA,CACW,CAjBR,EAAK,KAiBG,CACZ,CAtBE,EAAK,KAsBP,CACL,CACC,CAAA,CACH,KAEG,CAAA,CACV,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAoB,UAAG,EAAU,CAAA,CAElE"}
+{"version":3,"file":"DropzoneFiles.mjs","names":[],"sources":["../../../../src/components/controls/dropzone-files/DropzoneFiles.tsx"],"sourcesContent":["import { type ReactNode, useId } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  dropzoneFiles,\n  dropzoneFilesDescription,\n  dropzoneFilesDropzone,\n  dropzoneFilesError,\n  dropzoneFilesFileItem,\n  dropzoneFilesFileList,\n  dropzoneFilesLabel,\n  dropzoneFilesLabelWrapper,\n  dropzoneFilesRoot,\n  dropzoneFilesUploadedFile,\n  // dropzoneFilesUploadedFileStartIconWrapped,\n  // dropzoneFilesUploadedFileStartIconWrappedRoot,\n  // dropzoneFilesUploadedFileStartIcon,\n  // dropzoneFilesUploadedFileStartIconRoot,\n  // dropzoneFilesUploadedFileStartIconIconRaw,\n  // dropzoneFilesUploadedFileStartIconIconRawRoot,\n} from '@mage-ui/styled-system/recipes';\nimport {\n  Dropzone,\n  type DropzoneProps,\n  type FileData,\n} from '@/components/controls';\nimport {\n  // Icon,\n  // type IconProps,\n  // IconWrapped,\n  // type IconWrappedProps,\n  UploadedFile,\n  UploadedFileDetails,\n  type UploadedFileProps,\n} from '@/components/data-display';\n\nexport type DropzoneFilesProps = {\n  label?: ReactNode;\n  description?: ReactNode;\n  error?: ReactNode;\n  title?: ReactNode;\n  subtitle?: ReactNode;\n  hint?: ReactNode;\n  initialFiles?: Record<string, FileData>;\n  maxFiles?: number;\n  /** Maximum file size in bytes. Files exceeding this will be rejected. */\n  maxSize?: number;\n  accept?: string[];\n  /** Required when autoSend=true (default). Optional when autoSend=false. */\n  url?: string;\n  /** When false, files are added to state but not uploaded automatically. Default: true. */\n  autoSend?: boolean;\n  /** Called when the file list changes (added or removed). Useful when autoSend=false. */\n  onChange?: (files: File[]) => void;\n  inputId?: string;\n  hideWhenFull?: boolean;\n  fileListHeight?: number | string;\n  classNames?: {\n    dropzoneFiles?: string;\n    root?: string;\n    labelWrapper?: string;\n    label?: string;\n    description?: string;\n    error?: string;\n    fileList?: string;\n    fileItem?: string;\n    uploadedFile?: UploadedFileProps['classNames'];\n    dropzoneDropzone?: DropzoneProps['classNames'];\n    scrollArea?: { scrollArea?: string };\n    // startIconWrapped?: IconWrappedProps['classNames'];\n    // startIcon?: IconProps['classNames'];\n  };\n  direction?: 'default' | 'reverse';\n};\n\nexport const DropzoneFiles = ({\n  label,\n  description,\n  error,\n  title,\n  subtitle,\n  hint,\n  initialFiles,\n  maxFiles,\n  maxSize,\n  accept,\n  url,\n  autoSend,\n  onChange,\n  inputId,\n  hideWhenFull,\n  classNames,\n  direction = 'default',\n}: DropzoneFilesProps) => {\n  const generatedId = useId();\n  const groupId = inputId ?? generatedId;\n\n  // TODO: gestionar error\n  // TOOD: gestionar required\n  return (\n    <div\n      className={cx(\n        classNames?.dropzoneFiles ?? dropzoneFiles(),\n        classNames?.root ?? dropzoneFilesRoot(),\n      )}\n    >\n      <div className={classNames?.labelWrapper ?? dropzoneFilesLabelWrapper()}>\n        {/* TODO: label obligatori / hidden */}\n        {label && (\n          <label\n            htmlFor={groupId}\n            className={classNames?.label ?? dropzoneFilesLabel()}\n          >\n            {label}\n          </label>\n        )}\n        {description && (\n          <p className={classNames?.description ?? dropzoneFilesDescription()}>\n            {description}\n          </p>\n        )}\n      </div>\n      <Dropzone\n        maxFiles={maxFiles}\n        maxSize={maxSize}\n        accept={accept}\n        url={url}\n        autoSend={autoSend}\n        onChange={onChange}\n        initialFiles={initialFiles}\n        inputId={groupId}\n        title={title}\n        subtitle={subtitle}\n        hint={hint}\n        direction={direction}\n        hideWhenFull={hideWhenFull}\n        classNames={{\n          dropzone:\n            classNames?.dropzoneDropzone?.dropzone ?? dropzoneFilesDropzone(),\n        }}\n      >\n        {({ files, removeFile }) =>\n          Object.keys(files).length > 0 ? (\n            <ul className={classNames?.fileList ?? dropzoneFilesFileList()}>\n              {Object.values(files).map((file) => (\n                <li\n                  key={file.name}\n                  className={classNames?.fileItem ?? dropzoneFilesFileItem()}\n                >\n                  <UploadedFile\n                    key={file.name}\n                    fileName={file.name}\n                    fileType={file.type}\n                    url={file.url}\n                    onRemove={() => removeFile(file.name)}\n                    classNames={{\n                      uploadedFile:\n                        classNames?.uploadedFile?.uploadedFile ??\n                        dropzoneFilesUploadedFile(),\n                    }}\n                  >\n                    {/* TODO: comentar */}\n                    <UploadedFileDetails\n                      fileSize={`${(file.size / 1024).toFixed(1)} KB`}\n                      fileDate={file.date}\n                      fileType={file.type}\n                    />\n                  </UploadedFile>\n                </li>\n              ))}\n            </ul>\n          ) : null\n        }\n      </Dropzone>\n      {error && (\n        <p className={classNames?.error ?? dropzoneFilesError()}>{error}</p>\n      )}\n    </div>\n  );\n};\n"],"mappings":"upBA2EA,MAAa,GAAiB,CAC5B,QACA,cACA,QACA,QACA,WACA,OACA,eACA,WACA,UACA,SACA,MACA,WACA,WACA,UACA,eACA,aACA,YAAY,aACY,CACxB,IAAM,EAAc,GAAO,CACrB,EAAU,GAAW,EAI3B,OACE,EAAC,MAAD,CACE,UAAW,EACT,GAAY,eAAiB,GAAe,CAC5C,GAAY,MAAQ,GAAmB,CACxC,UAJH,CAME,EAAC,MAAD,CAAK,UAAW,GAAY,cAAgB,GAA2B,UAAvE,CAEG,GACC,EAAC,QAAD,CACE,QAAS,EACT,UAAW,GAAY,OAAS,GAAoB,UAEnD,EACK,CAAA,CAET,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,aAAe,GAA0B,UAChE,EACC,CAAA,CAEF,GACN,EAAC,EAAD,CACY,WACD,UACD,SACH,MACK,WACA,WACI,eACd,QAAS,EACF,QACG,WACJ,OACK,YACG,eACd,WAAY,CACV,SACE,GAAY,kBAAkB,UAAY,GAAuB,CACpE,WAEC,CAAE,QAAO,gBACT,OAAO,KAAK,EAAM,CAAC,OAAS,EAC1B,EAAC,KAAD,CAAI,UAAW,GAAY,UAAY,GAAuB,UAC3D,OAAO,OAAO,EAAM,CAAC,IAAK,GACzB,EAAC,KAAD,CAEE,UAAW,GAAY,UAAY,GAAuB,UAE1D,EAAC,EAAD,CAEE,SAAU,EAAK,KACf,SAAU,EAAK,KACf,IAAK,EAAK,IACV,aAAgB,EAAW,EAAK,KAAK,CACrC,WAAY,CACV,aACE,GAAY,cAAc,cAC1B,GAA2B,CAC9B,UAGD,EAAC,EAAD,CACE,SAAU,IAAI,EAAK,KAAO,MAAM,QAAQ,EAAE,CAAC,KAC3C,SAAU,EAAK,KACf,SAAU,EAAK,KACf,CAAA,CACW,CAjBR,EAAK,KAiBG,CACZ,CAtBE,EAAK,KAsBP,CACL,CACC,CAAA,CACH,KAEG,CAAA,CACV,GACC,EAAC,IAAD,CAAG,UAAW,GAAY,OAAS,GAAoB,UAAG,EAAU,CAAA,CAElE"}

package/dist/components/data-display/uploading-files/UploadingFiles.d.mts

@@ -1,3 +1,4 @@
+import { ButtonIconProps } from "../../buttons/button-icon/ButtonIcon.mjs";
 import { ReactNode } from "react";
 
 //#region src/components/data-display/uploading-files/UploadingFiles.d.ts
@@ -23,10 +24,13 @@ type UploadingFilesItemErrorClassNames = {
   root?: string;
   name?: string;
   message?: string;
+  buttonIcon?: ButtonIconProps['classNames'];
 };
 type UploadingFilesItemErrorProps = {
   name: string;
   message: string;
+  removeButtonLabel?: string;
+  onRemove: () => void;
   classNames?: UploadingFilesItemErrorClassNames;
 };
 declare const UploadingFiles: (({
@@ -41,6 +45,8 @@ declare const UploadingFiles: (({
   ItemError: ({
     name,
     message,
+    removeButtonLabel,
+    onRemove,
     classNames
   }: UploadingFilesItemErrorProps) => ReactNode;
 };

package/dist/components/data-display/uploading-files/UploadingFiles.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"UploadingFiles.d.mts","names":[],"sources":["../../../../src/components/data-display/uploading-files/UploadingFiles.tsx"],"mappings":";;;KAkBY,wBAAA;EACV,cAAA;EACA,IAAA;AAAA;AAAA,KAGU,mBAAA;EACV,QAAA,EAAU,SAAA;EACV,UAAA,GAAa,wBAAA;AAAA;AAAA,KAGH,4BAAA;EACV,IAAA;EACA,IAAA;EACA,QAAA;AAAA;AAAA,KAGU,uBAAA;EACV,IAAA;EACA,QAAA;EACA,UAAA,GAAa,4BAAA;AAAA;AAAA,KAGH,iCAAA;EACV,IAAA;EACA,IAAA;EACA,OAAA;AAAA;AAAA,KAGU,4BAAA;EACV,IAAA;EACA,OAAA;EACA,UAAA,GAAa,iCAAA;AAAA;AAAA,cAqEF,cAAA;EAAc,QAAA;EAAA;AAAA,GA/DxB,mBAAA,KAAsB,SAAA;;;;;KAetB,uBAAA,KAA0B,SAAA;;;;;KAuC1B,4BAAA,KAA+B,SAAA;AAAA"}
+{"version":3,"file":"UploadingFiles.d.mts","names":[],"sources":["../../../../src/components/data-display/uploading-files/UploadingFiles.tsx"],"mappings":";;;;KAwBY,wBAAA;EACV,cAAA;EACA,IAAA;AAAA;AAAA,KAGU,mBAAA;EACV,QAAA,EAAU,SAAA;EACV,UAAA,GAAa,wBAAA;AAAA;AAAA,KAGH,4BAAA;EACV,IAAA;EACA,IAAA;EACA,QAAA;AAAA;AAAA,KAGU,uBAAA;EACV,IAAA;EACA,QAAA;EACA,UAAA,GAAa,4BAAA;AAAA;AAAA,KAGH,iCAAA;EACV,IAAA;EACA,IAAA;EACA,OAAA;EACA,UAAA,GAAa,eAAA;AAAA;AAAA,KAGH,4BAAA;EACV,IAAA;EACA,OAAA;EACA,iBAAA;EACA,QAAA;EACA,UAAA,GAAa,iCAAA;AAAA;AAAA,cAgGF,cAAA;EAAc,QAAA;EAAA;AAAA,GA1FxB,mBAAA,KAAsB,SAAA;;;;;KAetB,uBAAA,KAA0B,SAAA;;;;;;;KAyC1B,4BAAA,KAA+B,SAAA;AAAA"}

package/dist/components/data-display/uploading-files/UploadingFiles.mjs

@@ -1,2 +1,2 @@
-import{cx as e}from"@mage-ui/styled-system/css";import{uploadingFiles as t,uploadingFilesItem as n,uploadingFilesItemErrorMessage as r,uploadingFilesItemName as i,uploadingFilesItemProgress as a,uploadingFilesItemProgressFill as o,uploadingFilesItemProgressRing as s,uploadingFilesItemProgressTrack as c,uploadingFilesRoot as l}from"@mage-ui/styled-system/recipes";import{jsx as u,jsxs as d}from"react/jsx-runtime";const f=2*Math.PI*8,p=Object.assign(({children:n,classNames:r})=>u(`ul`,{className:e(r?.uploadingFiles??t(),r?.root??l()),children:n}),{Item:({name:e,progress:t,classNames:r})=>{let l=f*(1-t/100);return d(`li`,{className:r?.root??n(),children:[u(`span`,{className:r?.name??i(),children:e}),d(`span`,{className:r?.progress??a(),children:[d(`svg`,{className:s(),viewBox:`0 0 20 20`,"aria-hidden":`true`,children:[u(`circle`,{className:c(),cx:`10`,cy:`10`,r:8}),u(`circle`,{className:o(),cx:`10`,cy:`10`,r:8,strokeDasharray:f,strokeDashoffset:l})]}),t,`%`]})]})},ItemError:({name:e,message:t,classNames:a})=>d(`li`,{className:a?.root??n(),"data-error":`true`,children:[u(`span`,{className:a?.name??i(),children:e}),u(`span`,{className:a?.message??r(),children:t})]})});export{p as UploadingFiles};
+import{ButtonIcon as e}from"../../buttons/button-icon/ButtonIcon.mjs";import{cx as t}from"@mage-ui/styled-system/css";import{uploadingFiles as n,uploadingFilesItem as r,uploadingFilesItemErrorButtonIcon as i,uploadingFilesItemErrorButtonIconIcon as a,uploadingFilesItemErrorButtonIconIconRaw as o,uploadingFilesItemErrorButtonIconIconRawRoot as s,uploadingFilesItemErrorButtonIconRoot as c,uploadingFilesItemErrorMessage as l,uploadingFilesItemName as u,uploadingFilesItemProgress as d,uploadingFilesItemProgressFill as f,uploadingFilesItemProgressRing as p,uploadingFilesItemProgressTrack as m,uploadingFilesRoot as h}from"@mage-ui/styled-system/recipes";import{jsx as g,jsxs as _}from"react/jsx-runtime";const v=2*Math.PI*8,y=Object.assign(({children:e,classNames:r})=>g(`ul`,{className:t(r?.uploadingFiles??n(),r?.root??h()),children:e}),{Item:({name:e,progress:t,classNames:n})=>{let i=v*(1-t/100);return _(`li`,{className:n?.root??r(),children:[g(`span`,{className:n?.name??u(),children:e}),_(`span`,{className:n?.progress??d(),children:[_(`svg`,{className:p(),viewBox:`0 0 20 20`,"aria-hidden":`true`,children:[g(`circle`,{className:m(),cx:`10`,cy:`10`,r:8}),g(`circle`,{className:f(),cx:`10`,cy:`10`,r:8,strokeDasharray:v,strokeDashoffset:i})]}),t,`%`]})]})},ItemError:({name:t,message:n,removeButtonLabel:d=`Remove`,onRemove:f,classNames:p})=>_(`li`,{className:p?.root??r(),"data-error":`true`,children:[g(`span`,{className:p?.name??u(),children:t}),g(`span`,{className:p?.message??l(),children:n}),g(e,{label:d,onClick:f,path:`/icons/sprite-mage.svg`,name:`mage-removable-item-button-x`,classNames:{buttonIcon:p?.buttonIcon?.buttonIcon??i(),root:p?.buttonIcon?.root??c(),icon:p?.buttonIcon?.icon??a(),iconRaw:{iconRaw:p?.buttonIcon?.iconRaw?.iconRaw??o(),root:p?.buttonIcon?.iconRaw?.root??s()}}})]})});export{y as UploadingFiles};
 //# sourceMappingURL=UploadingFiles.mjs.map

package/dist/components/data-display/uploading-files/UploadingFiles.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"UploadingFiles.mjs","names":[],"sources":["../../../../src/components/data-display/uploading-files/UploadingFiles.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  uploadingFiles,\n  uploadingFilesItem,\n  uploadingFilesItemErrorMessage,\n  uploadingFilesItemName,\n  uploadingFilesItemProgress,\n  uploadingFilesItemProgressFill,\n  uploadingFilesItemProgressRing,\n  uploadingFilesItemProgressTrack,\n  uploadingFilesRoot,\n} from '@mage-ui/styled-system/recipes';\n\nconst RADIUS = 8;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport type UploadingFilesClassNames = {\n  uploadingFiles?: string;\n  root?: string;\n};\n\nexport type UploadingFilesProps = {\n  children: ReactNode;\n  classNames?: UploadingFilesClassNames;\n};\n\nexport type UploadingFilesItemClassNames = {\n  root?: string;\n  name?: string;\n  progress?: string;\n};\n\nexport type UploadingFilesItemProps = {\n  name: string;\n  progress: number;\n  classNames?: UploadingFilesItemClassNames;\n};\n\nexport type UploadingFilesItemErrorClassNames = {\n  root?: string;\n  name?: string;\n  message?: string;\n};\n\nexport type UploadingFilesItemErrorProps = {\n  name: string;\n  message: string;\n  classNames?: UploadingFilesItemErrorClassNames;\n};\n\nconst UploadingFilesRoot = ({\n  children,\n  classNames,\n}: UploadingFilesProps): ReactNode => (\n  <ul\n    className={cx(\n      classNames?.uploadingFiles ?? uploadingFiles(),\n      classNames?.root ?? uploadingFilesRoot(),\n    )}\n  >\n    {children}\n  </ul>\n);\n\nconst Item = ({\n  name,\n  progress,\n  classNames,\n}: UploadingFilesItemProps): ReactNode => {\n  const offset = CIRCUMFERENCE * (1 - progress / 100);\n\n  return (\n    <li className={classNames?.root ?? uploadingFilesItem()}>\n      <span className={classNames?.name ?? uploadingFilesItemName()}>\n        {name}\n      </span>\n      <span className={classNames?.progress ?? uploadingFilesItemProgress()}>\n        <svg\n          className={uploadingFilesItemProgressRing()}\n          viewBox='0 0 20 20'\n          aria-hidden='true'\n        >\n          <circle\n            className={uploadingFilesItemProgressTrack()}\n            cx='10'\n            cy='10'\n            r={RADIUS}\n          />\n          <circle\n            className={uploadingFilesItemProgressFill()}\n            cx='10'\n            cy='10'\n            r={RADIUS}\n            strokeDasharray={CIRCUMFERENCE}\n            strokeDashoffset={offset}\n          />\n        </svg>\n        {progress}%\n      </span>\n    </li>\n  );\n};\n\nconst ItemError = ({\n  name,\n  message,\n  classNames,\n}: UploadingFilesItemErrorProps): ReactNode => (\n  <li className={classNames?.root ?? uploadingFilesItem()} data-error='true'>\n    <span className={classNames?.name ?? uploadingFilesItemName()}>{name}</span>\n    <span className={classNames?.message ?? uploadingFilesItemErrorMessage()}>\n      {message}\n    </span>\n  </li>\n);\n\nexport const UploadingFiles = Object.assign(UploadingFilesRoot, {\n  Item,\n  ItemError,\n});\n"],"mappings":"+ZAeA,MACM,EAAgB,EAAI,KAAK,GAAK,EAsGvB,EAAiB,OAAO,QAlET,CAC1B,WACA,gBAEA,EAAC,KAAD,CACE,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,CAEA,WACE,CAAA,CAuDyD,CAC9D,MArDY,CACZ,OACA,WACA,gBACwC,CACxC,IAAM,EAAS,GAAiB,EAAI,EAAW,KAE/C,OACE,EAAC,KAAD,CAAI,UAAW,GAAY,MAAQ,GAAoB,UAAvD,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAwB,UAC1D,EACI,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAA4B,UAArE,CACE,EAAC,MAAD,CACE,UAAW,GAAgC,CAC3C,QAAQ,YACR,cAAY,gBAHd,CAKE,EAAC,SAAD,CACE,UAAW,GAAiC,CAC5C,GAAG,KACH,GAAG,KACH,EAAG,EACH,CAAA,CACF,EAAC,SAAD,CACE,UAAW,GAAgC,CAC3C,GAAG,KACH,GAAG,KACH,EAAG,EACH,gBAAiB,EACjB,iBAAkB,EAClB,CAAA,CACE,GACL,EAAS,IACL,GACJ,IAmBP,WAfiB,CACjB,OACA,UACA,gBAEA,EAAC,KAAD,CAAI,UAAW,GAAY,MAAQ,GAAoB,CAAE,aAAW,gBAApE,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAwB,UAAG,EAAY,CAAA,CAC5E,EAAC,OAAD,CAAM,UAAW,GAAY,SAAW,GAAgC,UACrE,EACI,CAAA,CACJ,GAMN,CAAC"}
+{"version":3,"file":"UploadingFiles.mjs","names":[],"sources":["../../../../src/components/data-display/uploading-files/UploadingFiles.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\n\nimport { cx } from '@mage-ui/styled-system/css';\nimport {\n  uploadingFiles,\n  uploadingFilesItem,\n  uploadingFilesItemErrorButtonIcon,\n  uploadingFilesItemErrorButtonIconIcon,\n  uploadingFilesItemErrorButtonIconIconRaw,\n  uploadingFilesItemErrorButtonIconIconRawRoot,\n  uploadingFilesItemErrorButtonIconRoot,\n  uploadingFilesItemErrorMessage,\n  uploadingFilesItemName,\n  uploadingFilesItemProgress,\n  uploadingFilesItemProgressFill,\n  uploadingFilesItemProgressRing,\n  uploadingFilesItemProgressTrack,\n  uploadingFilesRoot,\n} from '@mage-ui/styled-system/recipes';\nimport { ButtonIcon, type ButtonIconProps } from '@/components/buttons';\n\nconst RADIUS = 8;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\n\nexport type UploadingFilesClassNames = {\n  uploadingFiles?: string;\n  root?: string;\n};\n\nexport type UploadingFilesProps = {\n  children: ReactNode;\n  classNames?: UploadingFilesClassNames;\n};\n\nexport type UploadingFilesItemClassNames = {\n  root?: string;\n  name?: string;\n  progress?: string;\n};\n\nexport type UploadingFilesItemProps = {\n  name: string;\n  progress: number;\n  classNames?: UploadingFilesItemClassNames;\n};\n\nexport type UploadingFilesItemErrorClassNames = {\n  root?: string;\n  name?: string;\n  message?: string;\n  buttonIcon?: ButtonIconProps['classNames'];\n};\n\nexport type UploadingFilesItemErrorProps = {\n  name: string;\n  message: string;\n  removeButtonLabel?: string;\n  onRemove: () => void;\n  classNames?: UploadingFilesItemErrorClassNames;\n};\n\nconst UploadingFilesRoot = ({\n  children,\n  classNames,\n}: UploadingFilesProps): ReactNode => (\n  <ul\n    className={cx(\n      classNames?.uploadingFiles ?? uploadingFiles(),\n      classNames?.root ?? uploadingFilesRoot(),\n    )}\n  >\n    {children}\n  </ul>\n);\n\nconst Item = ({\n  name,\n  progress,\n  classNames,\n}: UploadingFilesItemProps): ReactNode => {\n  const offset = CIRCUMFERENCE * (1 - progress / 100);\n\n  return (\n    <li className={classNames?.root ?? uploadingFilesItem()}>\n      <span className={classNames?.name ?? uploadingFilesItemName()}>\n        {name}\n      </span>\n      <span className={classNames?.progress ?? uploadingFilesItemProgress()}>\n        <svg\n          className={uploadingFilesItemProgressRing()}\n          viewBox='0 0 20 20'\n          aria-hidden='true'\n        >\n          <circle\n            className={uploadingFilesItemProgressTrack()}\n            cx='10'\n            cy='10'\n            r={RADIUS}\n          />\n          <circle\n            className={uploadingFilesItemProgressFill()}\n            cx='10'\n            cy='10'\n            r={RADIUS}\n            strokeDasharray={CIRCUMFERENCE}\n            strokeDashoffset={offset}\n          />\n        </svg>\n        {progress}%\n      </span>\n    </li>\n  );\n};\n\nconst ItemError = ({\n  name,\n  message,\n  removeButtonLabel = 'Remove',\n  onRemove,\n  classNames,\n}: UploadingFilesItemErrorProps): ReactNode => (\n  <li className={classNames?.root ?? uploadingFilesItem()} data-error='true'>\n    <span className={classNames?.name ?? uploadingFilesItemName()}>{name}</span>\n    <span className={classNames?.message ?? uploadingFilesItemErrorMessage()}>\n      {message}\n    </span>\n    <ButtonIcon\n      label={removeButtonLabel}\n      onClick={onRemove}\n      path='/icons/sprite-mage.svg'\n      name='mage-removable-item-button-x'\n      classNames={{\n        buttonIcon:\n          classNames?.buttonIcon?.buttonIcon ??\n          uploadingFilesItemErrorButtonIcon(),\n        root:\n          classNames?.buttonIcon?.root ??\n          uploadingFilesItemErrorButtonIconRoot(),\n        icon:\n          classNames?.buttonIcon?.icon ??\n          uploadingFilesItemErrorButtonIconIcon(),\n        iconRaw: {\n          iconRaw:\n            classNames?.buttonIcon?.iconRaw?.iconRaw ??\n            uploadingFilesItemErrorButtonIconIconRaw(),\n          root:\n            classNames?.buttonIcon?.iconRaw?.root ??\n            uploadingFilesItemErrorButtonIconIconRawRoot(),\n        },\n      }}\n    />\n  </li>\n);\n\nexport const UploadingFiles = Object.assign(UploadingFilesRoot, {\n  Item,\n  ItemError,\n});\n"],"mappings":"ksBAqBA,MACM,EAAgB,EAAI,KAAK,GAAK,EAoIvB,EAAiB,OAAO,QA7FT,CAC1B,WACA,gBAEA,EAAC,KAAD,CACE,UAAW,EACT,GAAY,gBAAkB,GAAgB,CAC9C,GAAY,MAAQ,GAAoB,CACzC,CAEA,WACE,CAAA,CAkFyD,CAC9D,MAhFY,CACZ,OACA,WACA,gBACwC,CACxC,IAAM,EAAS,GAAiB,EAAI,EAAW,KAE/C,OACE,EAAC,KAAD,CAAI,UAAW,GAAY,MAAQ,GAAoB,UAAvD,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAwB,UAC1D,EACI,CAAA,CACP,EAAC,OAAD,CAAM,UAAW,GAAY,UAAY,GAA4B,UAArE,CACE,EAAC,MAAD,CACE,UAAW,GAAgC,CAC3C,QAAQ,YACR,cAAY,gBAHd,CAKE,EAAC,SAAD,CACE,UAAW,GAAiC,CAC5C,GAAG,KACH,GAAG,KACH,EAAG,EACH,CAAA,CACF,EAAC,SAAD,CACE,UAAW,GAAgC,CAC3C,GAAG,KACH,GAAG,KACH,EAAG,EACH,gBAAiB,EACjB,iBAAkB,EAClB,CAAA,CACE,GACL,EAAS,IACL,GACJ,IA8CP,WA1CiB,CACjB,OACA,UACA,oBAAoB,SACpB,WACA,gBAEA,EAAC,KAAD,CAAI,UAAW,GAAY,MAAQ,GAAoB,CAAE,aAAW,gBAApE,CACE,EAAC,OAAD,CAAM,UAAW,GAAY,MAAQ,GAAwB,UAAG,EAAY,CAAA,CAC5E,EAAC,OAAD,CAAM,UAAW,GAAY,SAAW,GAAgC,UACrE,EACI,CAAA,CACP,EAAC,EAAD,CACE,MAAO,EACP,QAAS,EACT,KAAK,yBACL,KAAK,+BACL,WAAY,CACV,WACE,GAAY,YAAY,YACxB,GAAmC,CACrC,KACE,GAAY,YAAY,MACxB,GAAuC,CACzC,KACE,GAAY,YAAY,MACxB,GAAuC,CACzC,QAAS,CACP,QACE,GAAY,YAAY,SAAS,SACjC,GAA0C,CAC5C,KACE,GAAY,YAAY,SAAS,MACjC,GAA8C,CACjD,CACF,CACD,CAAA,CACC,GAMN,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mage-ui/components",
-  "version": "1.0.122",
+  "version": "1.0.124",
   "private": false,
   "description": "",
   "keywords": [],
@@ -25,8 +25,8 @@
     "rimraf": "^6.1.3",
     "tsdown": "^0.21.4",
     "typescript": "^5.9.3",
-    "@mage-ui/preset": "1.0.122",
-    "@mage-ui/styled-system": "1.0.8"
+    "@mage-ui/styled-system": "1.0.8",
+    "@mage-ui/preset": "1.0.124"
   },
   "peerDependencies": {
     "@dnd-kit/core": "^6.3.1",