@vinaup/media-ui 1.0.1

package/dist/index.css

@@ -0,0 +1,101 @@
+/* src/components/styles/media-upload.module.scss */
+.sectionTitleRoot {
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+.copyButtonRoot {
+  opacity: 0.9;
+  transition: opacity 0.2s;
+  cursor: pointer;
+}
+.imageContainer {
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+}
+.itemImageRoot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.uploadingOverlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 4px;
+}
+.statusBadge {
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  border-radius: 50%;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.statusBadgeSuccess {
+  background-color: green;
+}
+.statusBadgeError {
+  background-color: red;
+}
+
+/* src/components/styles/media-grid.module.scss */
+.itemPaperRoot {
+  cursor: pointer;
+  transition: border-color 0.2s, background-color 0.2s;
+}
+.selectedPaper {
+  border-color: var(--mantine-color-blue-6);
+  border-width: 2px;
+  background-color: var(--mantine-color-blue-0);
+}
+.imageContainer {
+  position: relative;
+  width: 100%;
+  padding-bottom: 100%;
+}
+.itemImageRoot {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  border-radius: 4px;
+}
+.itemTextRoot {
+  word-break: break-word;
+}
+
+/* src/components/styles/media-detail.module.scss */
+.paperRoot {
+  position: relative;
+}
+.imageWrapper {
+  width: 100%;
+}
+.urlText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+}
+.deleteButtonRoot {
+  position: absolute;
+  bottom: 8px;
+  right: 8px;
+}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/media-upload.module.scss","../src/components/media-grid.module.scss","../src/components/media-detail.module.scss"],"sourcesContent":["// Text component (section title)\n.sectionTitleRoot {\n  font-size: 0.875rem;\n  font-weight: 500;\n}\n\n// UnstyledButton component (copy button)\n.copyButtonRoot {\n  opacity: 0.9;\n  transition: opacity 0.2s;\n  cursor: pointer;\n}\n\n// Native divs (image container and overlays)\n.imageContainer {\n  position: relative;\n  width: 100%;\n  padding-bottom: 100%;\n}\n\n.itemImageRoot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 4px;\n}\n\n.uploadingOverlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: rgba(0, 0, 0, 0.5);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 4px;\n}\n\n.statusBadge {\n  position: absolute;\n  top: 8px;\n  right: 8px;\n  border-radius: 50%;\n  width: 24px;\n  height: 24px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.statusBadgeSuccess {\n  background-color: green;\n}\n\n.statusBadgeError {\n  background-color: red;\n}","// Paper component (item)\n.itemPaperRoot {\n  cursor: pointer;\n  transition: border-color 0.2s, background-color 0.2s;\n}\n\n.selectedPaper {\n  border-color: var(--mantine-color-blue-6);\n  border-width: 2px;\n  background-color: var(--mantine-color-blue-0);\n}\n\n// Native div (image container)\n.imageContainer {\n  position: relative;\n  width: 100%;\n  padding-bottom: 100%;\n}\n\n// Image component\n.itemImageRoot {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n  border-radius: 4px;\n}\n\n// Text component (filename)\n.itemTextRoot {\n  word-break: break-word;\n}","// Paper component\n.paperRoot {\n  position: relative;\n}\n\n.imageWrapper {\n  width: 100%;\n}\n\n.urlText {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  flex: 1;\n}\n\n// Delete button\n.deleteButtonRoot {\n  position: absolute;\n  bottom: 8px;\n  right: 8px;\n}"],"mappings":";AACA,CAAA;AACE,aAAA;AACA,eAAA;;AAIF,CAAA;AACE,WAAA;AACA,cAAA,QAAA;AACA,UAAA;;AAIF,CAAA;AACE,YAAA;AACA,SAAA;AACA,kBAAA;;AAGF,CAAA;AACE,YAAA;AACA,OAAA;AACA,QAAA;AACA,SAAA;AACA,UAAA;AACA,cAAA;AACA,iBAAA;;AAGF,CAAA;AACE,YAAA;AACA,OAAA;AACA,QAAA;AACA,SAAA;AACA,UAAA;AACA,oBAAA,KAAA,CAAA,EAAA,CAAA,EAAA,CAAA,EAAA;AACA,WAAA;AACA,eAAA;AACA,mBAAA;AACA,iBAAA;;AAGF,CAAA;AACE,YAAA;AACA,OAAA;AACA,SAAA;AACA,iBAAA;AACA,SAAA;AACA,UAAA;AACA,WAAA;AACA,eAAA;AACA,mBAAA;;AAGF,CAAA;AACE,oBAAA;;AAGF,CAAA;AACE,oBAAA;;;;AC3DF,CAAA;AACE,UAAA;AACA,cAAA,aAAA,IAAA,EAAA,iBAAA;;AAGF,CAAA;AACE,gBAAA,IAAA;AACA,gBAAA;AACA,oBAAA,IAAA;;AAIF,CAAA;AACE,YAAA;AACA,SAAA;AACA,kBAAA;;AAIF,CAAA;AACE,YAAA;AACA,OAAA;AACA,QAAA;AACA,SAAA;AACA,UAAA;AACA,cAAA;AACA,iBAAA;;AAIF,CAAA;AACE,cAAA;;;;AC/BF,CAAA;AACE,YAAA;;AAGF,CAAA;AACE,SAAA;;AAGF,CAAA;AACE,YAAA;AACA,iBAAA;AACA,eAAA;AACA,QAAA;;AAIF,CAAA;AACE,YAAA;AACA,UAAA;AACA,SAAA;;","names":[]}

package/dist/index.d.mts

@@ -0,0 +1,244 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface IMedia {
+    id: string;
+    name: string;
+    title: string | null;
+    description: string | null;
+    url: string;
+    type: string;
+    folder: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+interface ICreateMedia {
+    name: string;
+    title?: string | null;
+    description?: string | null;
+    url: string;
+    type: string;
+    folder: string;
+}
+interface IUpdateMedia {
+    name?: string;
+    title?: string | null;
+    description?: string | null;
+}
+interface UploadResult {
+    url: string;
+    name: string;
+}
+interface MediaUploadHandlers {
+    onUpload: (files: File[]) => Promise<UploadResult[]>;
+    onSave?: (data: ICreateMedia[]) => Promise<IMedia[]>;
+    onUploadSuccess?: (media: IMedia[]) => void;
+    onUploadError?: (error: Error) => void;
+}
+interface MediaGridHandlers {
+    onImageSelect: (imageId: string) => void;
+    onLoadImages: () => Promise<IMedia[]>;
+}
+interface MediaDetailHandlers {
+    onUpdate: (id: string, data: IUpdateMedia) => Promise<void>;
+    onDelete: (id: string) => Promise<void>;
+    onNavigateBack: () => void;
+}
+interface MediaTabsConfig {
+    tabs: {
+        value: string;
+        label: string;
+    }[];
+    activeTab: string;
+    onTabChange: (value: string) => void;
+}
+
+interface UploadFileItem {
+    id: string;
+    file: File;
+    preview: string;
+    status: 'uploading' | 'success' | 'error';
+    url?: string;
+    error?: string;
+}
+interface MediaUploadClassNames {
+    rootStack?: {
+        root?: string;
+    };
+    dropzone?: {
+        root?: string;
+        inner?: string;
+    };
+    dropzoneGroup?: {
+        root?: string;
+    };
+    dropzoneText?: {
+        root?: string;
+    };
+    dropzoneSubtext?: {
+        root?: string;
+    };
+    recentStack?: {
+        root?: string;
+    };
+    sectionTitle?: {
+        root?: string;
+    };
+    grid?: {
+        root?: string;
+        inner?: string;
+        col?: string;
+    };
+    itemPaper?: {
+        root?: string;
+    };
+    itemStack?: {
+        root?: string;
+    };
+    itemImage?: {
+        root?: string;
+    };
+    itemFilename?: {
+        root?: string;
+    };
+    itemFilesize?: {
+        root?: string;
+    };
+    itemError?: {
+        root?: string;
+    };
+    itemGroup?: {
+        root?: string;
+    };
+    copyButton?: {
+        root?: string;
+    };
+    copyButtonText?: {
+        root?: string;
+    };
+    imageContainer?: string;
+    uploadingOverlay?: string;
+    statusBadge?: string;
+    statusBadgeSuccess?: string;
+    statusBadgeError?: string;
+}
+interface MediaUploadProps extends MediaUploadHandlers {
+    maxSize?: number;
+    acceptedTypes?: string[];
+    multiple?: boolean;
+    folder?: string;
+    classNames?: MediaUploadClassNames;
+}
+
+declare function MediaUpload({ onUpload, onSave, onUploadSuccess, onUploadError, maxSize, acceptedTypes, multiple, folder, classNames, }: MediaUploadProps): react_jsx_runtime.JSX.Element;
+
+interface MediaGridClassNames {
+    rootStack?: {
+        root?: string;
+    };
+    filterGroup?: {
+        root?: string;
+    };
+    sortSelect?: {
+        root?: string;
+        wrapper?: string;
+        input?: string;
+        section?: string;
+        dropdown?: string;
+    };
+    searchInput?: {
+        root?: string;
+        wrapper?: string;
+        input?: string;
+        section?: string;
+    };
+    grid?: {
+        root?: string;
+        inner?: string;
+        col?: string;
+    };
+    itemPaper?: {
+        root?: string;
+    };
+    itemStack?: {
+        root?: string;
+    };
+    itemImage?: {
+        root?: string;
+    };
+    itemText?: {
+        root?: string;
+    };
+    imageContainer?: string;
+    selectedPaper?: string;
+}
+interface MediaGridProps {
+    images: IMedia[];
+    selectedImageId?: string | null;
+    onImageClick: (imageId: string) => void;
+    sortOptions?: {
+        value: string;
+        label: string;
+    }[];
+    classNames?: MediaGridClassNames;
+}
+
+declare function MediaGrid({ images, selectedImageId, onImageClick, sortOptions, classNames, }: MediaGridProps): react_jsx_runtime.JSX.Element;
+
+interface MediaDetailClassNames {
+    paper?: {
+        root?: string;
+    };
+    image?: {
+        root?: string;
+    };
+    title?: {
+        root?: string;
+    };
+    fieldsStack?: {
+        root?: string;
+    };
+    fieldLabel?: {
+        root?: string;
+    };
+    fieldValue?: {
+        root?: string;
+    };
+    textarea?: {
+        root?: string;
+        input?: string;
+        wrapper?: string;
+    };
+    saveButton?: {
+        root?: string;
+    };
+    copyButton?: {
+        root?: string;
+    };
+    deleteButton?: {
+        root?: string;
+    };
+    imageWrapper?: string;
+    fieldGroup?: string;
+    urlText?: string;
+}
+interface MediaDetailProps {
+    image: IMedia;
+    onUpdate: (id: string, data: IUpdateMedia) => Promise<void>;
+    onDelete?: (id: string) => void;
+    onCopyLink?: (url: string) => void;
+    onNotify?: (type: 'success' | 'error', message: string) => void;
+    classNames?: MediaDetailClassNames;
+}
+
+declare function MediaDetail({ image, onUpdate, onDelete, onCopyLink, onNotify, classNames, }: MediaDetailProps): react_jsx_runtime.JSX.Element;
+
+declare const validateImageFile: (file: File) => boolean;
+declare const formatFileSize: (bytes: number) => string;
+/**
+ * Merge multiple className strings into one, filtering out falsy values
+ * @param classNames - Array of className strings (can include undefined)
+ * @returns Single merged className string
+ */
+declare const cx: (...classNames: (string | undefined)[]) => string;
+
+export { type ICreateMedia, type IMedia, type IUpdateMedia, MediaDetail, type MediaDetailClassNames, type MediaDetailHandlers, type MediaDetailProps, MediaGrid, type MediaGridClassNames, type MediaGridHandlers, type MediaGridProps, type MediaTabsConfig, MediaUpload, type MediaUploadClassNames, type MediaUploadHandlers, type MediaUploadProps, type UploadFileItem, type UploadResult, cx, formatFileSize, validateImageFile };

package/dist/index.d.ts

@@ -0,0 +1,244 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface IMedia {
+    id: string;
+    name: string;
+    title: string | null;
+    description: string | null;
+    url: string;
+    type: string;
+    folder: string;
+    createdAt: Date;
+    updatedAt: Date;
+}
+interface ICreateMedia {
+    name: string;
+    title?: string | null;
+    description?: string | null;
+    url: string;
+    type: string;
+    folder: string;
+}
+interface IUpdateMedia {
+    name?: string;
+    title?: string | null;
+    description?: string | null;
+}
+interface UploadResult {
+    url: string;
+    name: string;
+}
+interface MediaUploadHandlers {
+    onUpload: (files: File[]) => Promise<UploadResult[]>;
+    onSave?: (data: ICreateMedia[]) => Promise<IMedia[]>;
+    onUploadSuccess?: (media: IMedia[]) => void;
+    onUploadError?: (error: Error) => void;
+}
+interface MediaGridHandlers {
+    onImageSelect: (imageId: string) => void;
+    onLoadImages: () => Promise<IMedia[]>;
+}
+interface MediaDetailHandlers {
+    onUpdate: (id: string, data: IUpdateMedia) => Promise<void>;
+    onDelete: (id: string) => Promise<void>;
+    onNavigateBack: () => void;
+}
+interface MediaTabsConfig {
+    tabs: {
+        value: string;
+        label: string;
+    }[];
+    activeTab: string;
+    onTabChange: (value: string) => void;
+}
+
+interface UploadFileItem {
+    id: string;
+    file: File;
+    preview: string;
+    status: 'uploading' | 'success' | 'error';
+    url?: string;
+    error?: string;
+}
+interface MediaUploadClassNames {
+    rootStack?: {
+        root?: string;
+    };
+    dropzone?: {
+        root?: string;
+        inner?: string;
+    };
+    dropzoneGroup?: {
+        root?: string;
+    };
+    dropzoneText?: {
+        root?: string;
+    };
+    dropzoneSubtext?: {
+        root?: string;
+    };
+    recentStack?: {
+        root?: string;
+    };
+    sectionTitle?: {
+        root?: string;
+    };
+    grid?: {
+        root?: string;
+        inner?: string;
+        col?: string;
+    };
+    itemPaper?: {
+        root?: string;
+    };
+    itemStack?: {
+        root?: string;
+    };
+    itemImage?: {
+        root?: string;
+    };
+    itemFilename?: {
+        root?: string;
+    };
+    itemFilesize?: {
+        root?: string;
+    };
+    itemError?: {
+        root?: string;
+    };
+    itemGroup?: {
+        root?: string;
+    };
+    copyButton?: {
+        root?: string;
+    };
+    copyButtonText?: {
+        root?: string;
+    };
+    imageContainer?: string;
+    uploadingOverlay?: string;
+    statusBadge?: string;
+    statusBadgeSuccess?: string;
+    statusBadgeError?: string;
+}
+interface MediaUploadProps extends MediaUploadHandlers {
+    maxSize?: number;
+    acceptedTypes?: string[];
+    multiple?: boolean;
+    folder?: string;
+    classNames?: MediaUploadClassNames;
+}
+
+declare function MediaUpload({ onUpload, onSave, onUploadSuccess, onUploadError, maxSize, acceptedTypes, multiple, folder, classNames, }: MediaUploadProps): react_jsx_runtime.JSX.Element;
+
+interface MediaGridClassNames {
+    rootStack?: {
+        root?: string;
+    };
+    filterGroup?: {
+        root?: string;
+    };
+    sortSelect?: {
+        root?: string;
+        wrapper?: string;
+        input?: string;
+        section?: string;
+        dropdown?: string;
+    };
+    searchInput?: {
+        root?: string;
+        wrapper?: string;
+        input?: string;
+        section?: string;
+    };
+    grid?: {
+        root?: string;
+        inner?: string;
+        col?: string;
+    };
+    itemPaper?: {
+        root?: string;
+    };
+    itemStack?: {
+        root?: string;
+    };
+    itemImage?: {
+        root?: string;
+    };
+    itemText?: {
+        root?: string;
+    };
+    imageContainer?: string;
+    selectedPaper?: string;
+}
+interface MediaGridProps {
+    images: IMedia[];
+    selectedImageId?: string | null;
+    onImageClick: (imageId: string) => void;
+    sortOptions?: {
+        value: string;
+        label: string;
+    }[];
+    classNames?: MediaGridClassNames;
+}
+
+declare function MediaGrid({ images, selectedImageId, onImageClick, sortOptions, classNames, }: MediaGridProps): react_jsx_runtime.JSX.Element;
+
+interface MediaDetailClassNames {
+    paper?: {
+        root?: string;
+    };
+    image?: {
+        root?: string;
+    };
+    title?: {
+        root?: string;
+    };
+    fieldsStack?: {
+        root?: string;
+    };
+    fieldLabel?: {
+        root?: string;
+    };
+    fieldValue?: {
+        root?: string;
+    };
+    textarea?: {
+        root?: string;
+        input?: string;
+        wrapper?: string;
+    };
+    saveButton?: {
+        root?: string;
+    };
+    copyButton?: {
+        root?: string;
+    };
+    deleteButton?: {
+        root?: string;
+    };
+    imageWrapper?: string;
+    fieldGroup?: string;
+    urlText?: string;
+}
+interface MediaDetailProps {
+    image: IMedia;
+    onUpdate: (id: string, data: IUpdateMedia) => Promise<void>;
+    onDelete?: (id: string) => void;
+    onCopyLink?: (url: string) => void;
+    onNotify?: (type: 'success' | 'error', message: string) => void;
+    classNames?: MediaDetailClassNames;
+}
+
+declare function MediaDetail({ image, onUpdate, onDelete, onCopyLink, onNotify, classNames, }: MediaDetailProps): react_jsx_runtime.JSX.Element;
+
+declare const validateImageFile: (file: File) => boolean;
+declare const formatFileSize: (bytes: number) => string;
+/**
+ * Merge multiple className strings into one, filtering out falsy values
+ * @param classNames - Array of className strings (can include undefined)
+ * @returns Single merged className string
+ */
+declare const cx: (...classNames: (string | undefined)[]) => string;
+
+export { type ICreateMedia, type IMedia, type IUpdateMedia, MediaDetail, type MediaDetailClassNames, type MediaDetailHandlers, type MediaDetailProps, MediaGrid, type MediaGridClassNames, type MediaGridHandlers, type MediaGridProps, type MediaTabsConfig, MediaUpload, type MediaUploadClassNames, type MediaUploadHandlers, type MediaUploadProps, type UploadFileItem, type UploadResult, cx, formatFileSize, validateImageFile };