@yogiswara/honcho-editor-ui 2.1.9 → 2.1.10

package/dist/components/editor/GalleryAlbum/SimplifiedAlbumGallery.d.ts

@@ -0,0 +1,17 @@
+import type { Gallery } from "../../../hooks/editor/type";
+export interface PhotoData {
+    key: string;
+    src: string;
+    width: number;
+    height: number;
+    alt: string;
+    isSelected: boolean;
+    originalData: Gallery;
+}
+interface SimplifiedAlbumGalleryProps {
+    imageCollection: PhotoData[];
+    onToggleSelect: (photo: PhotoData) => void;
+    onPreview: (photo: PhotoData) => void;
+}
+export default function SimplifiedAlbumGallery({ imageCollection, onToggleSelect, onPreview }: SimplifiedAlbumGalleryProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/GalleryAlbum/SimplifiedAlbumGallery.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from '@mui/material';
+import SimplifiedImageItem from './SimplifiedImageItem'; // Import the child component
+export default function SimplifiedAlbumGallery({ imageCollection, onToggleSelect, onPreview }) {
+    return (_jsx(Box, { sx: {
+            display: 'grid',
+            gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+            gap: '16px',
+            width: '100%',
+            height: '100%',
+            overflowY: 'auto',
+            p: 1
+        }, children: imageCollection.map(photo => (_jsx(SimplifiedImageItem, { photo: photo, onToggleSelect: onToggleSelect, onPreview: onPreview }, photo.key))) }));
+}

package/dist/components/editor/GalleryAlbum/SimplifiedImageItem.d.ts

@@ -0,0 +1,8 @@
+import type { PhotoData } from './SimplifiedAlbumGallery';
+interface SimplifiedImageItemProps {
+    photo: PhotoData;
+    onToggleSelect: (photo: PhotoData) => void;
+    onPreview: (photo: PhotoData) => void;
+}
+export default function SimplifiedImageItem({ photo, onToggleSelect, onPreview }: SimplifiedImageItemProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/editor/GalleryAlbum/SimplifiedImageItem.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import CheckCircleIcon from '@mui/icons-material/CheckCircle';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+export default function SimplifiedImageItem({ photo, onToggleSelect, onPreview }) {
+    const [isHovered, setIsHovered] = useState(false);
+    return (_jsxs(Box, { onClick: () => onPreview(photo), onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), sx: {
+            position: 'relative',
+            cursor: 'pointer',
+            overflow: 'hidden',
+            borderRadius: '8px',
+            '& img': {
+                display: 'block',
+                width: '100%',
+                transition: 'transform 0.2s ease-in-out',
+                transform: isHovered ? 'scale(1.05)' : 'scale(1)',
+            },
+        }, children: [_jsx("img", { src: photo.src, alt: photo.alt, style: { aspectRatio: `${photo.width} / ${photo.height}` } }), _jsx(Box, { onClick: (e) => {
+                    e.stopPropagation(); // Prevent onPreview from firing when clicking checkbox
+                    onToggleSelect(photo);
+                }, sx: {
+                    position: 'absolute',
+                    top: '8px',
+                    left: '8px',
+                    color: 'white',
+                    opacity: photo.isSelected || isHovered ? 1 : 0,
+                    transition: 'opacity 0.2s ease-in-out',
+                }, children: photo.isSelected ? (_jsx(CheckCircleIcon, { sx: { fontSize: '28px', background: 'rgba(0,0,0,0.3)', borderRadius: '50%' } })) : (_jsx(RadioButtonUncheckedIcon, { sx: { fontSize: '28px', background: 'rgba(0,0,0,0.3)', borderRadius: '50%' } })) })] }));
+}

package/dist/index.d.ts

@@ -23,6 +23,8 @@ export { default as HPresetOptionsMenu } from './components/editor/HPresetOption
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
 export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
+export { default as SimplifiedAlbumGallery } from './components/editor/GalleryAlbum/SimplifiedAlbumGallery';
+export { default as SimplifiedImageItem } from './components/editor/GalleryAlbum/SimplifiedImageItem';
 export { useAdjustmentHistory, type UseAdjustmentHistoryReturn, type HistoryInfo, type HistoryActions, type HistoryConfig } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch, type UseAdjustmentHistoryBatchReturn, type BatchAdjustmentState, type ImageAdjustmentConfig, type BatchHistoryInfo, type BatchHistoryActions, type BatchHistoryConfig } from './hooks/useAdjustmentHistoryBatch';
 export { default as useColors } from './themes/colors';

package/dist/index.js

@@ -20,6 +20,8 @@ export { default as HPresetOptionsMenu } from './components/editor/HPresetOption
 export { HAlertInternetBox, HAlertCopyBox, HAlertInternetConnectionBox, HAlertPresetSave } from './components/editor/HAlertBox';
 export { default as AlbumImageGallery } from './components/editor/GalleryAlbum/AlbumImageGallery';
 export { default as GalleryImageItem } from './components/editor/GalleryAlbum/ImageItem';
+export { default as SimplifiedAlbumGallery } from './components/editor/GalleryAlbum/SimplifiedAlbumGallery';
+export { default as SimplifiedImageItem } from './components/editor/GalleryAlbum/SimplifiedImageItem';
 // --- History Hooks ---
 export { useAdjustmentHistory } from './hooks/useAdjustmentHistory';
 export { useAdjustmentHistoryBatch } from './hooks/useAdjustmentHistoryBatch';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yogiswara/honcho-editor-ui",
-  "version": "2.1.9",
+  "version": "2.1.10",
   "description": "A complete UI component library for the Honcho photo editor.",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",