@chayns-components/gallery 5.0.0-beta.132 → 5.0.0-beta.1320

package/lib/esm/components/gallery-item/media-item/MediaItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaItem.js","names":["Icon","React","StyledMediaItemImage","StyledMediaItemImageWrapper","StyledMediaItemPlayIcon","StyledMediaItemVideo","StyledMediaItemVideoWrapper","StyledMotionMediaItem","MediaItem","fileItem","isEditMode","openSelectedFile","ratio","createElement","animate","opacity","initial","exit","transition","duration","uploadedFile","onClick","$ratio","size","icons","poster","thumbnailUrl","src","url","type","draggable","displayName"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.tsx"],"sourcesContent":["import { Icon, type InternalFileItem } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMediaItemImage,\n    StyledMediaItemImageWrapper,\n    StyledMediaItemPlayIcon,\n    StyledMediaItemVideo,\n    StyledMediaItemVideoWrapper,\n    StyledMotionMediaItem,\n} from './MediaItem.styles';\n\nexport type MediaItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: InternalFileItem;\n    /**\n     *  Whether images and videos can be edited\n     */\n    isEditMode: boolean;\n    /**\n     *  Function to be executed when a file is selected\n     */\n    openSelectedFile: (file: InternalFileItem) => void;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst MediaItem: FC<MediaItemProps> = ({ fileItem, isEditMode, openSelectedFile, ratio }) => (\n    <StyledMotionMediaItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{ opacity: 0 }}\n        transition={{ duration: 3.2 }}\n    >\n        {fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? (\n            <StyledMediaItemVideoWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n                <StyledMediaItemPlayIcon>\n                    <Icon size={isEditMode ? 30 : 50} icons={['fa fa-play']} />\n                </StyledMediaItemPlayIcon>\n                <StyledMediaItemVideo poster={fileItem.uploadedFile.thumbnailUrl}>\n                    <source src={fileItem.uploadedFile.url} type=\"video/mp4\" />\n                </StyledMediaItemVideo>\n            </StyledMediaItemVideoWrapper>\n        ) : (\n            <StyledMediaItemImageWrapper onClick={() => openSelectedFile(fileItem)} $ratio={ratio}>\n                <StyledMediaItemImage draggable={false} src={fileItem.uploadedFile?.url} />\n            </StyledMediaItemImageWrapper>\n        )}\n    </StyledMotionMediaItem>\n);\n\nMediaItem.displayName = 'MediaItem';\n\nexport default MediaItem;\n"],"mappings":"AAAA,SAASA,IAAI,QAA+B,yBAAyB;AACrE,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,oBAAoB,EACpBC,2BAA2B,EAC3BC,uBAAuB,EACvBC,oBAAoB,EACpBC,2BAA2B,EAC3BC,qBAAqB,QAClB,oBAAoB;AAqB3B,MAAMC,SAA6B,GAAGA,CAAC;EAAEC,QAAQ;EAAEC,UAAU;EAAEC,gBAAgB;EAAEC;AAAM,CAAC,kBACpFX,KAAA,CAAAY,aAAA,CAACN,qBAAqB;EAClBO,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IAAEF,OAAO,EAAE;EAAE,CAAE;EACrBG,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI;AAAE,GAE7BV,QAAQ,CAACW,YAAY,IAAI,cAAc,IAAIX,QAAQ,CAACW,YAAY,gBAC7DnB,KAAA,CAAAY,aAAA,CAACP,2BAA2B;EAACe,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;EAACa,MAAM,EAAEV;AAAM,gBAClFX,KAAA,CAAAY,aAAA,CAACT,uBAAuB,qBACpBH,KAAA,CAAAY,aAAA,CAACb,IAAI;EAACuB,IAAI,EAAEb,UAAU,GAAG,EAAE,GAAG,EAAG;EAACc,KAAK,EAAE,CAAC,YAAY;AAAE,CAAE,CACrC,CAAC,eAC1BvB,KAAA,CAAAY,aAAA,CAACR,oBAAoB;EAACoB,MAAM,EAAEhB,QAAQ,CAACW,YAAY,CAACM;AAAa,gBAC7DzB,KAAA,CAAAY,aAAA;EAAQc,GAAG,EAAElB,QAAQ,CAACW,YAAY,CAACQ,GAAI;EAACC,IAAI,EAAC;AAAW,CAAE,CACxC,CACG,CAAC,gBAE9B5B,KAAA,CAAAY,aAAA,CAACV,2BAA2B;EAACkB,OAAO,EAAEA,CAAA,KAAMV,gBAAgB,CAACF,QAAQ,CAAE;EAACa,MAAM,EAAEV;AAAM,gBAClFX,KAAA,CAAAY,aAAA,CAACX,oBAAoB;EAAC4B,SAAS,EAAE,KAAM;EAACH,GAAG,EAAElB,QAAQ,CAACW,YAAY,EAAEQ;AAAI,CAAE,CACjD,CAEd,CAC1B;AAEDpB,SAAS,CAACuB,WAAW,GAAG,WAAW;AAEnC,eAAevB,SAAS","ignoreList":[]}

package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js

@@ -0,0 +1,55 @@
+import { motion } from 'motion/react';
+import styled from 'styled-components';
+export const StyledMotionMediaItem = styled(motion.div)`
+    display: flex;
+    width: 100%;
+    height: 100%;
+`;
+export const StyledMediaItemVideoWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+export const StyledMediaItemImageWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+export const StyledMediaItemImage = styled.img`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08)
+        inset;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;
+export const StyledMediaItemVideo = styled.video`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08)
+        inset;
+    width: 100%;
+    object-fit: cover;
+`;
+export const StyledMediaItemPlayIcon = styled.div`
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+//# sourceMappingURL=MediaItem.styles.js.map

package/lib/esm/components/gallery-item/media-item/MediaItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaItem.styles.js","names":["motion","styled","StyledMotionMediaItem","div","StyledMediaItemVideoWrapper","$ratio","StyledMediaItemImageWrapper","StyledMediaItemImage","img","theme","StyledMediaItemVideo","video","StyledMediaItemPlayIcon"],"sources":["../../../../../src/components/gallery-item/media-item/MediaItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionMediaItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledMediaItemVideoWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\nexport const StyledMediaItemImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledMediaItemVideoProps = WithTheme<unknown>;\n\ntype StyledMediaItemImageProps = WithTheme<unknown>;\n\nexport const StyledMediaItemImage = styled.img<StyledMediaItemImageProps>`\n    background-color: ${({ theme }: StyledMediaItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemImageProps) => theme['009-rgb']}, 0.08)\n        inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemVideo = styled.video<StyledMediaItemVideoProps>`\n    background-color: ${({ theme }: StyledMediaItemVideoProps) => theme['101']};\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledMediaItemVideoProps) => theme['009-rgb']}, 0.08)\n        inset;\n    width: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledMediaItemPlayIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,qBAAqB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACvD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGH,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAED,OAAO,MAAMC,2BAA2B,GAAGL,MAAM,CAACE,GAAuB;AACzE;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAMD,OAAO,MAAME,oBAAoB,GAAGN,MAAM,CAACO,GAA8B;AACzE,wBAAwB,CAAC;EAAEC;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,oBAAoB,GAAGT,MAAM,CAACU,KAAgC;AAC3E,wBAAwB,CAAC;EAAEF;AAAiC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAC9E,iCAAiC,CAAC;EAAEA;AAAiC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,uBAAuB,GAAGX,MAAM,CAACE,GAAG;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/gallery-item/preview-item/PreviewItem.js

@@ -0,0 +1,38 @@
+import { SmallWaitCursor } from '@chayns-components/core';
+import React from 'react';
+import { StyledMotionPreviewItem, StyledPreviewItemImage, StyledPreviewItemImageWrapper, StyledPreviewItemLoadingIcon } from './PreviewItem.styles';
+const PreviewItem = ({
+  fileItem,
+  ratio
+}) => /*#__PURE__*/React.createElement(StyledMotionPreviewItem, {
+  animate: {
+    opacity: 1
+  },
+  initial: {
+    opacity: 0
+  },
+  exit: {
+    opacity: 0,
+    transition: {
+      duration: 3.2,
+      delay: 3.2
+    }
+  },
+  transition: {
+    duration: 3.2
+  },
+  style: {
+    position: 'absolute'
+  }
+}, /*#__PURE__*/React.createElement(StyledPreviewItemImageWrapper, {
+  $ratio: ratio
+}, /*#__PURE__*/React.createElement(StyledPreviewItemLoadingIcon, null, /*#__PURE__*/React.createElement(SmallWaitCursor, {
+  shouldHideWaitCursor: false,
+  shouldHideBackground: true
+})), /*#__PURE__*/React.createElement(StyledPreviewItemImage, {
+  draggable: false,
+  src: fileItem.previewUrl
+})));
+PreviewItem.displayName = 'PreviewItem';
+export default PreviewItem;
+//# sourceMappingURL=PreviewItem.js.map

package/lib/esm/components/gallery-item/preview-item/PreviewItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewItem.js","names":["SmallWaitCursor","React","StyledMotionPreviewItem","StyledPreviewItemImage","StyledPreviewItemImageWrapper","StyledPreviewItemLoadingIcon","PreviewItem","fileItem","ratio","createElement","animate","opacity","initial","exit","transition","duration","delay","style","position","$ratio","shouldHideWaitCursor","shouldHideBackground","draggable","src","previewUrl","displayName"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.tsx"],"sourcesContent":["import { InternalFileItem, SmallWaitCursor } from '@chayns-components/core';\nimport React, { FC } from 'react';\nimport {\n    StyledMotionPreviewItem,\n    StyledPreviewItemImage,\n    StyledPreviewItemImageWrapper,\n    StyledPreviewItemLoadingIcon,\n} from './PreviewItem.styles';\n\nexport type PreviewItemProps = {\n    /**\n     *  Images and videos which should be displayed\n     */\n    fileItem: InternalFileItem;\n    /**\n     * The ratio of the image\n     */\n    ratio: number;\n};\n\nconst PreviewItem: FC<PreviewItemProps> = ({ fileItem, ratio }) => (\n    <StyledMotionPreviewItem\n        animate={{ opacity: 1 }}\n        initial={{ opacity: 0 }}\n        exit={{\n            opacity: 0,\n            transition: { duration: 3.2, delay: 3.2 },\n        }}\n        transition={{ duration: 3.2 }}\n        style={{ position: 'absolute' }}\n    >\n        <StyledPreviewItemImageWrapper $ratio={ratio}>\n            <StyledPreviewItemLoadingIcon>\n                <SmallWaitCursor shouldHideWaitCursor={false} shouldHideBackground />\n            </StyledPreviewItemLoadingIcon>\n            <StyledPreviewItemImage draggable={false} src={fileItem.previewUrl} />\n        </StyledPreviewItemImageWrapper>\n    </StyledMotionPreviewItem>\n);\n\nPreviewItem.displayName = 'PreviewItem';\n\nexport default PreviewItem;\n"],"mappings":"AAAA,SAA2BA,eAAe,QAAQ,yBAAyB;AAC3E,OAAOC,KAAK,MAAc,OAAO;AACjC,SACIC,uBAAuB,EACvBC,sBAAsB,EACtBC,6BAA6B,EAC7BC,4BAA4B,QACzB,sBAAsB;AAa7B,MAAMC,WAAiC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAM,CAAC,kBAC1DP,KAAA,CAAAQ,aAAA,CAACP,uBAAuB;EACpBQ,OAAO,EAAE;IAAEC,OAAO,EAAE;EAAE,CAAE;EACxBC,OAAO,EAAE;IAAED,OAAO,EAAE;EAAE,CAAE;EACxBE,IAAI,EAAE;IACFF,OAAO,EAAE,CAAC;IACVG,UAAU,EAAE;MAAEC,QAAQ,EAAE,GAAG;MAAEC,KAAK,EAAE;IAAI;EAC5C,CAAE;EACFF,UAAU,EAAE;IAAEC,QAAQ,EAAE;EAAI,CAAE;EAC9BE,KAAK,EAAE;IAAEC,QAAQ,EAAE;EAAW;AAAE,gBAEhCjB,KAAA,CAAAQ,aAAA,CAACL,6BAA6B;EAACe,MAAM,EAAEX;AAAM,gBACzCP,KAAA,CAAAQ,aAAA,CAACJ,4BAA4B,qBACzBJ,KAAA,CAAAQ,aAAA,CAACT,eAAe;EAACoB,oBAAoB,EAAE,KAAM;EAACC,oBAAoB;AAAA,CAAE,CAC1C,CAAC,eAC/BpB,KAAA,CAAAQ,aAAA,CAACN,sBAAsB;EAACmB,SAAS,EAAE,KAAM;EAACC,GAAG,EAAEhB,QAAQ,CAACiB;AAAW,CAAE,CAC1C,CACV,CAC5B;AAEDlB,WAAW,CAACmB,WAAW,GAAG,aAAa;AAEvC,eAAenB,WAAW","ignoreList":[]}

package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js

@@ -0,0 +1,36 @@
+import { motion } from 'motion/react';
+import styled from 'styled-components';
+export const StyledMotionPreviewItem = styled(motion.div)`
+    display: flex;
+    width: 100%;
+    height: 100%;
+`;
+export const StyledPreviewItemImageWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    height: 100%;
+    aspect-ratio: ${({
+  $ratio
+}) => $ratio};
+`;
+export const StyledPreviewItemImage = styled.img`
+    background-color: ${({
+  theme
+}) => theme['101']};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.08) inset;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+`;
+export const StyledPreviewItemLoadingIcon = styled.div`
+    position: absolute;
+    z-index: 2;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+`;
+//# sourceMappingURL=PreviewItem.styles.js.map

package/lib/esm/components/gallery-item/preview-item/PreviewItem.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PreviewItem.styles.js","names":["motion","styled","StyledMotionPreviewItem","div","StyledPreviewItemImageWrapper","$ratio","StyledPreviewItemImage","img","theme","StyledPreviewItemLoadingIcon"],"sources":["../../../../../src/components/gallery-item/preview-item/PreviewItem.styles.ts"],"sourcesContent":["import type { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\nexport const StyledMotionPreviewItem = styled(motion.div)`\n    display: flex;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const StyledPreviewItemImageWrapper = styled.div<{ $ratio: number }>`\n    display: flex;\n    width: 100%;\n    height: 100%;\n    aspect-ratio: ${({ $ratio }) => $ratio};\n`;\n\ntype StyledPreviewItemImageProps = WithTheme<unknown>;\n\nexport const StyledPreviewItemImage = styled.img<StyledPreviewItemImageProps>`\n    background-color: ${({ theme }: StyledPreviewItemImageProps) => theme['101']};\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledPreviewItemImageProps) => theme['009-rgb']}, 0.08) inset;\n    z-index: 1;\n    width: 100%;\n    height: 100%;\n    object-fit: cover;\n`;\n\nexport const StyledPreviewItemLoadingIcon = styled.div`\n    position: absolute;\n    z-index: 2;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,MAAM,mBAAmB;AAEtC,OAAO,MAAMC,uBAAuB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAC;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGH,MAAM,CAACE,GAAuB;AAC3E;AACA;AACA;AACA,oBAAoB,CAAC;EAAEE;AAAO,CAAC,KAAKA,MAAM;AAC1C,CAAC;AAID,OAAO,MAAMC,sBAAsB,GAAGL,MAAM,CAACM,GAAgC;AAC7E,wBAAwB,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAAC,KAAK,CAAC;AAChF;AACA,eAAe,CAAC;EAAEA;AAAmC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC3E;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMC,4BAA4B,GAAGR,MAAM,CAACE,GAAG;AACtD;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/esm/index.js

@@ -0,0 +1,5 @@
+// noinspection JSUnusedGlobalSymbols
+
+export { default as Gallery } from './components/Gallery';
+export { GalleryViewMode } from './types/gallery';
+//# sourceMappingURL=index.js.map

package/lib/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["default","Gallery","GalleryViewMode"],"sources":["../../src/index.ts"],"sourcesContent":["// noinspection JSUnusedGlobalSymbols\n\nexport { default as Gallery } from './components/Gallery';\nexport { GalleryViewMode } from './types/gallery';\n"],"mappings":"AAAA;;AAEA,SAASA,OAAO,IAAIC,OAAO,QAAQ,sBAAsB;AACzD,SAASC,eAAe,QAAQ,iBAAiB","ignoreList":[]}

package/lib/esm/types/gallery.js

@@ -0,0 +1,6 @@
+export let GalleryViewMode = /*#__PURE__*/function (GalleryViewMode) {
+  GalleryViewMode[GalleryViewMode["SQUARE"] = 0] = "SQUARE";
+  GalleryViewMode[GalleryViewMode["GRID"] = 1] = "GRID";
+  return GalleryViewMode;
+}({});
+//# sourceMappingURL=gallery.js.map

package/lib/esm/types/gallery.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gallery.js","names":["GalleryViewMode"],"sources":["../../../src/types/gallery.ts"],"sourcesContent":["export enum GalleryViewMode {\n    SQUARE,\n    GRID,\n}\n"],"mappings":"AAAA,WAAYA,eAAe,0BAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAfA,eAAe,CAAfA,eAAe;EAAA,OAAfA,eAAe;AAAA","ignoreList":[]}

package/lib/esm/utils/file.js

@@ -0,0 +1,41 @@
+export const filterDuplicateFile = ({
+  newFile,
+  files
+}) => {
+  const duplicates = files.filter(({
+    file
+  }) => file && file.name === newFile.name && file.size === newFile.size);
+  return duplicates.length > 0;
+};
+export const generatePreviewUrl = ({
+  callback,
+  file
+}) => {
+  const reader = new FileReader();
+  reader.onload = event => {
+    const previewUrl = event.target?.result;
+    callback(previewUrl);
+  };
+  reader.readAsDataURL(file);
+};
+export const generateVideoThumbnail = ({
+  file,
+  callback
+}) => {
+  const canvas = document.createElement('canvas');
+  const video = document.createElement('video');
+
+  // this is important
+  video.autoplay = true;
+  video.muted = true;
+  video.src = URL.createObjectURL(file);
+  video.onloadeddata = () => {
+    const ctx = canvas.getContext('2d');
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);
+    video.pause();
+    callback(canvas.toDataURL('image/png'));
+  };
+};
+//# sourceMappingURL=file.js.map

package/lib/esm/utils/file.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file.js","names":["filterDuplicateFile","newFile","files","duplicates","filter","file","name","size","length","generatePreviewUrl","callback","reader","FileReader","onload","event","previewUrl","target","result","readAsDataURL","generateVideoThumbnail","canvas","document","createElement","video","autoplay","muted","src","URL","createObjectURL","onloadeddata","ctx","getContext","width","videoWidth","height","videoHeight","drawImage","pause","toDataURL"],"sources":["../../../src/utils/file.ts"],"sourcesContent":["import type { InternalFileItem } from '@chayns-components/core';\n\ninterface FilerDuplicateFileOptions {\n    files: InternalFileItem[];\n    newFile: File;\n}\n\nexport const filterDuplicateFile = ({ newFile, files }: FilerDuplicateFileOptions) => {\n    const duplicates = files.filter(\n        ({ file }) => file && file.name === newFile.name && file.size === newFile.size,\n    );\n\n    return duplicates.length > 0;\n};\n\ninterface GeneratePreviewUrlOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generatePreviewUrl = ({ callback, file }: GeneratePreviewUrlOptions): void => {\n    const reader = new FileReader();\n\n    reader.onload = (event) => {\n        const previewUrl = event.target?.result as string;\n\n        callback(previewUrl);\n    };\n\n    reader.readAsDataURL(file);\n};\n\ninterface GenerateVideoThumbnailOptions {\n    file: File;\n    callback: (previewUrl: string) => void;\n}\n\nexport const generateVideoThumbnail = ({ file, callback }: GenerateVideoThumbnailOptions) => {\n    const canvas = document.createElement('canvas');\n    const video = document.createElement('video');\n\n    // this is important\n    video.autoplay = true;\n    video.muted = true;\n    video.src = URL.createObjectURL(file);\n\n    video.onloadeddata = () => {\n        const ctx = canvas.getContext('2d');\n\n        canvas.width = video.videoWidth;\n        canvas.height = video.videoHeight;\n\n        ctx?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n        video.pause();\n\n        callback(canvas.toDataURL('image/png'));\n    };\n};\n"],"mappings":"AAOA,OAAO,MAAMA,mBAAmB,GAAGA,CAAC;EAAEC,OAAO;EAAEC;AAAiC,CAAC,KAAK;EAClF,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,CAC3B,CAAC;IAAEC;EAAK,CAAC,KAAKA,IAAI,IAAIA,IAAI,CAACC,IAAI,KAAKL,OAAO,CAACK,IAAI,IAAID,IAAI,CAACE,IAAI,KAAKN,OAAO,CAACM,IAC9E,CAAC;EAED,OAAOJ,UAAU,CAACK,MAAM,GAAG,CAAC;AAChC,CAAC;AAOD,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC,QAAQ;EAAEL;AAAgC,CAAC,KAAW;EACvF,MAAMM,MAAM,GAAG,IAAIC,UAAU,CAAC,CAAC;EAE/BD,MAAM,CAACE,MAAM,GAAIC,KAAK,IAAK;IACvB,MAAMC,UAAU,GAAGD,KAAK,CAACE,MAAM,EAAEC,MAAgB;IAEjDP,QAAQ,CAACK,UAAU,CAAC;EACxB,CAAC;EAEDJ,MAAM,CAACO,aAAa,CAACb,IAAI,CAAC;AAC9B,CAAC;AAOD,OAAO,MAAMc,sBAAsB,GAAGA,CAAC;EAAEd,IAAI;EAAEK;AAAwC,CAAC,KAAK;EACzF,MAAMU,MAAM,GAAGC,QAAQ,CAACC,aAAa,CAAC,QAAQ,CAAC;EAC/C,MAAMC,KAAK,GAAGF,QAAQ,CAACC,aAAa,CAAC,OAAO,CAAC;;EAE7C;EACAC,KAAK,CAACC,QAAQ,GAAG,IAAI;EACrBD,KAAK,CAACE,KAAK,GAAG,IAAI;EAClBF,KAAK,CAACG,GAAG,GAAGC,GAAG,CAACC,eAAe,CAACvB,IAAI,CAAC;EAErCkB,KAAK,CAACM,YAAY,GAAG,MAAM;IACvB,MAAMC,GAAG,GAAGV,MAAM,CAACW,UAAU,CAAC,IAAI,CAAC;IAEnCX,MAAM,CAACY,KAAK,GAAGT,KAAK,CAACU,UAAU;IAC/Bb,MAAM,CAACc,MAAM,GAAGX,KAAK,CAACY,WAAW;IAEjCL,GAAG,EAAEM,SAAS,CAACb,KAAK,EAAE,CAAC,EAAE,CAAC,EAAEA,KAAK,CAACU,UAAU,EAAEV,KAAK,CAACY,WAAW,CAAC;IAChEZ,KAAK,CAACc,KAAK,CAAC,CAAC;IAEb3B,QAAQ,CAACU,MAAM,CAACkB,SAAS,CAAC,WAAW,CAAC,CAAC;EAC3C,CAAC;AACL,CAAC","ignoreList":[]}

package/lib/types/components/Gallery.d.ts

@@ -0,0 +1,47 @@
+import { type FileItem } from '@chayns-components/core';
+import { FC } from 'react';
+import { GalleryViewMode } from '../types/gallery';
+export type GalleryProps = {
+    /**
+     * Whether drag and drop is allowed or not
+     */
+    allowDragAndDrop?: boolean;
+    /**
+     * The message that should be displayed if a File is already given.
+     */
+    doubleFileDialogMessage?: string;
+    /**
+     * The minimum width of a file in the edit mode
+     */
+    fileMinWidth?: number;
+    /**
+     *  Images and videos which should be displayed
+     */
+    files?: FileItem[];
+    /**
+     *  Whether images and videos can be edited
+     */
+    isEditMode?: boolean;
+    /**
+     * The maximum amount of images and videos that can be uploaded.
+     */
+    maxFiles?: number;
+    /**
+     *  Function to be executed when files are added and uploaded
+     */
+    onAdd?: (file: FileItem) => void;
+    /**
+     * Function to be executed when the count of files are changed. Needed to check if all files are uploaded
+     */
+    onFileCountChange?: (fileCount: number) => void;
+    /**
+     *  Function to be executed when a file is removed
+     */
+    onRemove?: (file: FileItem) => void;
+    /**
+     * The mode how the images should be displayed.
+     */
+    viewMode?: GalleryViewMode;
+};
+declare const Gallery: FC<GalleryProps>;
+export default Gallery;

package/lib/types/components/Gallery.styles.d.ts

@@ -0,0 +1,10 @@
+import { GalleryViewMode } from '../types/gallery';
+export declare const StyledGallery: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGalleryItemWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $uploadedFileLength: number;
+    $ratio: number;
+    $viewMode: GalleryViewMode;
+}>> & string;
+export declare const StyledGalleryEditModeWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fileMinWidth: number;
+}>> & string;

package/lib/types/components/add-file/AddFile.d.ts

@@ -0,0 +1,9 @@
+import { FC } from 'react';
+export type AddFileProps = {
+    /**
+     *  Function to be executed when files are added
+     */
+    onAdd: (files: File[]) => void;
+};
+declare const AddFile: FC<AddFileProps>;
+export default AddFile;

package/lib/types/components/add-file/AddFile.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const StyledAddFile: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledAddFIleIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    theme: import("@chayns-components/core").Theme;
+}>> & string;

package/lib/{components → types/components}/gallery-item/GalleryItem.d.ts

@@ -1,26 +1,30 @@
+import { type InternalFileItem } from '@chayns-components/core';
 import { FC } from 'react';
-import type { UploadedFile } from '../../types/file';
 export type GalleryItemProps = {
     /**
      *  Images and videos which should be displayed
      */
-    uploadedFile: UploadedFile;
+    fileItem: InternalFileItem;
     /**
      *  Whether images and videos can be edited
      */
     isEditMode: boolean;
     /**
-     *  Ratio of the images and videos
+     *  Function to be executed when a file is deleted
      */
-    ratio: number;
+    handleDeleteFile: (id?: string) => void;
     /**
-     *  Function to be executed wehen a file is deleted
+     * The ratio of the image
      */
-    handleDeleteFile: (url: string) => void;
+    ratio?: number;
     /**
      *  Length of the uploaded files
      */
     remainingItemsLength?: number;
+    /**
+     * Function to be executed if a file should be opened
+     */
+    onClick: (file: InternalFileItem) => void;
 };
 declare const GalleryItem: FC<GalleryItemProps>;
 export default GalleryItem;

package/lib/types/components/gallery-item/GalleryItem.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledGalleryItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledGalleryItemDeleteButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    theme: import("@chayns-components/core").Theme;
+}>> & string;
+export declare const StyledGalleryItemMoreItemsIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/gallery-item/media-item/MediaItem.d.ts

@@ -0,0 +1,22 @@
+import { type InternalFileItem } from '@chayns-components/core';
+import { FC } from 'react';
+export type MediaItemProps = {
+    /**
+     *  Images and videos which should be displayed
+     */
+    fileItem: InternalFileItem;
+    /**
+     *  Whether images and videos can be edited
+     */
+    isEditMode: boolean;
+    /**
+     *  Function to be executed when a file is selected
+     */
+    openSelectedFile: (file: InternalFileItem) => void;
+    /**
+     * The ratio of the image
+     */
+    ratio: number;
+};
+declare const MediaItem: FC<MediaItemProps>;
+export default MediaItem;

package/lib/types/components/gallery-item/media-item/MediaItem.styles.d.ts

@@ -0,0 +1,16 @@
+export declare const StyledMotionMediaItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledMediaItemVideoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $ratio: number;
+}>> & string;
+export declare const StyledMediaItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $ratio: number;
+}>> & string;
+export declare const StyledMediaItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    theme: import("@chayns-components/core").Theme;
+}>> & string;
+export declare const StyledMediaItemVideo: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, {
+    theme: import("@chayns-components/core").Theme;
+}>> & string;
+export declare const StyledMediaItemPlayIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/components/gallery-item/preview-item/PreviewItem.d.ts

@@ -0,0 +1,14 @@
+import { InternalFileItem } from '@chayns-components/core';
+import { FC } from 'react';
+export type PreviewItemProps = {
+    /**
+     *  Images and videos which should be displayed
+     */
+    fileItem: InternalFileItem;
+    /**
+     * The ratio of the image
+     */
+    ratio: number;
+};
+declare const PreviewItem: FC<PreviewItemProps>;
+export default PreviewItem;

package/lib/types/components/gallery-item/preview-item/PreviewItem.styles.d.ts

@@ -0,0 +1,10 @@
+export declare const StyledMotionPreviewItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<Omit<import("motion/react").HTMLMotionProps<"div">, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string & Omit<import("motion/react").ForwardRefComponent<HTMLDivElement, import("motion/react").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPreviewItemImageWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $ratio: number;
+}>> & string;
+export declare const StyledPreviewItemImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {
+    theme: import("@chayns-components/core").Theme;
+}>> & string;
+export declare const StyledPreviewItemLoadingIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/lib/types/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Gallery } from './components/Gallery';
+export { GalleryViewMode } from './types/gallery';

package/lib/types/types/gallery.d.ts

@@ -0,0 +1,4 @@
+export declare enum GalleryViewMode {
+    SQUARE = 0,
+    GRID = 1
+}

package/lib/types/utils/file.d.ts

@@ -0,0 +1,17 @@
+import type { InternalFileItem } from '@chayns-components/core';
+interface FilerDuplicateFileOptions {
+    files: InternalFileItem[];
+    newFile: File;
+}
+export declare const filterDuplicateFile: ({ newFile, files }: FilerDuplicateFileOptions) => boolean;
+interface GeneratePreviewUrlOptions {
+    file: File;
+    callback: (previewUrl: string) => void;
+}
+export declare const generatePreviewUrl: ({ callback, file }: GeneratePreviewUrlOptions) => void;
+interface GenerateVideoThumbnailOptions {
+    file: File;
+    callback: (previewUrl: string) => void;
+}
+export declare const generateVideoThumbnail: ({ file, callback }: GenerateVideoThumbnailOptions) => void;
+export {};

package/package.json

@@ -1,7 +1,14 @@
 {
     "name": "@chayns-components/gallery",
-    "version": "5.0.0-beta.132",
+    "version": "5.0.0-beta.1320",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
+    "sideEffects": false,
+    "browserslist": [
+        ">0.5%",
+        "not dead",
+        "not op_mini all",
+        "not IE 11"
+    ],
     "keywords": [
         "chayns",
         "react",
@@ -10,8 +17,17 @@
     "author": "Tobit.Software",
     "homepage": "https://github.com/TobitSoftware/chayns-components/tree/main/packages/gallery#readme",
     "license": "MIT",
-    "main": "lib/index.js",
-    "types": "lib/index.d.ts",
+    "types": "lib/types/index.d.ts",
+    "main": "lib/cjs/index.js",
+    "module": "lib/esm/index.js",
+    "exports": {
+        ".": {
+            "types": "./lib/types/index.d.ts",
+            "node": "./lib/cjs/index.js",
+            "require": "./lib/cjs/index.js",
+            "default": "./lib/esm/index.js"
+        }
+    },
     "directories": {
         "lib": "lib",
         "test": "__tests__"
@@ -24,44 +40,48 @@
         "url": "git+https://github.com/TobitSoftware/chayns-components.git"
     },
     "scripts": {
-        "build": "npm run build:js && npm run build:types",
-        "build:js": "babel src --out-dir lib --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build": "npm run build:cjs && npm run build:esm && npm run build:types",
         "build:types": "tsc",
-        "prepublishOnly": "npm run build"
+        "build:cjs": "cross-env NODE_ENV=cjs babel src --out-dir lib/cjs --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "build:esm": "cross-env NODE_ENV=esm babel src --out-dir lib/esm --extensions=.ts,.tsx --source-maps --ignore=src/stories",
+        "prepublishOnly": "npm run build",
+        "watch:js": "npm run build:esm -- --watch",
+        "link": "npm link && npm run watch:js"
     },
     "bugs": {
         "url": "https://github.com/TobitSoftware/chayns-components/issues"
     },
     "devDependencies": {
-        "@babel/cli": "^7.21.0",
-        "@babel/core": "^7.21.4",
-        "@babel/preset-env": "^7.21.4",
-        "@babel/preset-react": "^7.18.6",
-        "@babel/preset-typescript": "^7.21.4",
-        "@types/react": "^17.0.58",
-        "@types/react-dom": "^17.0.20",
-        "@types/styled-components": "^5.1.26",
-        "@types/uuid": "^9.0.1",
-        "babel-loader": "^8.3.0",
-        "lerna": "^6.6.1",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
-        "typescript": "^4.9.5"
+        "@babel/cli": "^7.28.3",
+        "@babel/core": "^7.28.5",
+        "@babel/preset-env": "^7.28.5",
+        "@babel/preset-react": "^7.28.5",
+        "@babel/preset-typescript": "^7.28.5",
+        "@types/react": "^18.3.26",
+        "@types/react-dom": "^18.3.7",
+        "@types/styled-components": "^5.1.35",
+        "@types/uuid": "^10.0.0",
+        "babel-loader": "^9.2.1",
+        "cross-env": "^7.0.3",
+        "lerna": "^8.2.4",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "styled-components": "^6.1.19",
+        "typescript": "^5.9.3"
     },
     "dependencies": {
-        "@chayns-components/core": "^5.0.0-beta.132",
-        "@chayns/colors": "^2.0.0",
-        "clsx": "^1.2.1",
-        "framer-motion": "^6.5.1",
-        "styled-components": "^5.3.10",
-        "uuid": "^9.0.0"
+        "@chayns-components/core": "^5.0.0-beta.1320",
+        "uuid": "^10.0.0"
     },
     "peerDependencies": {
-        "react": ">=16.14.0",
-        "react-dom": ">=16.14.0"
+        "chayns-api": ">=2.2.0",
+        "motion": ">=12.4.1",
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0",
+        "styled-components": ">=5.3.11"
     },
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "68f6bb8f34a47a31e8a6d77f7089d1f4e3fab769"
+    "gitHead": "f22f157bf32a2f22860819d019ceab2da4c8a385"
 }

package/lib/api/image/post.d.ts

@@ -1,16 +0,0 @@
-import type { Meta } from '../../types/file';
-export interface PostImageResult {
-    key: string;
-    base: string;
-    meta?: Meta;
-}
-interface PostImageOptions {
-    accessToken: string;
-    file: File;
-    personId: string;
-}
-/**
- * Uploads an image to the tsimg cloud service
- */
-export declare const postImage: ({ accessToken, file, personId, }: PostImageOptions) => Promise<PostImageResult>;
-export {};

package/lib/api/image/post.js

@@ -1,34 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.postImage = void 0;
-var _file = require("../../utils/file");
-/**
- * Uploads an image to the tsimg cloud service
- */
-const postImage = async _ref => {
-  let {
-    accessToken,
-    file,
-    personId
-  } = _ref;
-  const body = await (0, _file.getFileAsArrayBuffer)(file);
-  const response = await fetch('https://api.tsimg.cloud/image', {
-    body,
-    headers: {
-      Accept: 'application/json',
-      Authorization: `bearer ${accessToken}`,
-      'Content-Type': 'image/*',
-      'X-Person-Id': personId
-    },
-    method: 'POST'
-  });
-  if (response.ok) {
-    return await response.json();
-  }
-  throw Error(`Failed to POST image (status code: ${response.status}).`);
-};
-exports.postImage = postImage;
-//# sourceMappingURL=post.js.map