@solostylist/ui-kit 1.0.225 → 1.0.226

package/dist/s-dialog/s-dialog.js

@@ -1,4 +1,4 @@
-import { t as e } from "../Close-Bj2HYB9Q.js";
+import { t as e } from "../Close-DRS0T6Yu.js";
 import * as t from "react";
 import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
 import { Dialog as a, DialogActions as o, DialogContent as s, DialogTitle as c, IconButton as l, Stack as u, Typography as d } from "@mui/material";
@@ -7,8 +7,7 @@ var f = t.forwardRef(({ title: t, content: f, actions: p, onClose: m = () => {},
 	let S = /* @__PURE__ */ i(n, { children: [f && /* @__PURE__ */ r(s, {
 		ref: x,
 		children: typeof f == "string" ? /* @__PURE__ */ r(d, {
-			variant: "body2",
-			sx: { color: "text.secondary" },
+			variant: "body1",
 			children: f
 		}) : f
 	}), p && /* @__PURE__ */ r(o, { children: p })] });

package/dist/s-dialog-confirm/s-dialog-confirm.js

@@ -1,5 +1,5 @@
-import { t as e } from "../Typography-EsraKPZO.js";
-import { t } from "../Close-Bj2HYB9Q.js";
+import { t as e } from "../Typography-DqtTB0ZJ.js";
+import { t } from "../Close-DRS0T6Yu.js";
 import { useDialog as n } from "../hooks/use-dialog.js";
 import * as r from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -28,8 +28,7 @@ var m = ({ title: n, content: r, onConfirm: m = () => {}, onClose: h = () => {},
 			})]
 		}) }),
 		r && /* @__PURE__ */ a(u, { children: typeof r == "string" ? /* @__PURE__ */ a(e, {
-			variant: "body2",
-			sx: { color: "text.secondary" },
+			variant: "body1",
 			children: r
 		}) : r }),
 		/* @__PURE__ */ a(l, { children: /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(s, {

package/dist/s-dialog-message/s-dialog-message.js

@@ -1,5 +1,5 @@
-import { t as e } from "../Typography-EsraKPZO.js";
-import { t } from "../Close-Bj2HYB9Q.js";
+import { t as e } from "../Typography-DqtTB0ZJ.js";
+import { t } from "../Close-DRS0T6Yu.js";
 import { useDialog as n } from "../hooks/use-dialog.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -28,8 +28,7 @@ var p = ({ title: n, content: r, onClose: p = () => {}, onOk: m = () => {}, open
 			})]
 		}) }),
 		r && /* @__PURE__ */ i(l, { children: typeof r == "string" ? /* @__PURE__ */ i(e, {
-			variant: "body2",
-			sx: { color: "text.secondary" },
+			variant: "body1",
 			children: r
 		}) : r }),
 		/* @__PURE__ */ i(c, { children: /* @__PURE__ */ i(o, {

package/dist/s-empty/s-empty.js

@@ -3,11 +3,8 @@ import { jsx as e } from "react/jsx-runtime";
 import { Typography as t } from "@mui/material";
 //#region lib/s-empty/s-empty.tsx
 var n = ({ title: n }) => /* @__PURE__ */ e(t, {
-	variant: "body2",
-	sx: {
-		color: "text.secondary",
-		my: 3
-	},
+	variant: "body1",
+	sx: { my: 3 },
 	children: n ?? "No data available."
 });
 n.displayName = "SEmpty";

package/dist/s-error/s-error.js

@@ -23,7 +23,7 @@ var a = () => /* @__PURE__ */ t(r, {
 			children: "500: Internal server error"
 		}),
 		/* @__PURE__ */ e(i, {
-			variant: "body2",
+			variant: "body1",
 			children: "We're sorry, but we encountered an error while trying to load the content. Please try again later."
 		})
 	]

package/dist/s-error-layout/s-error-layout.d.ts

@@ -18,7 +18,7 @@ export interface SErrorLayoutProps {
     imageHeight?: string | number;
     /** Container max width. Default: 'lg' */
     maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-    /** Main container height. Default: '100vh' */
+    /** Main container minimum height. Default: '100dvh' */
     height?: string | number;
     /** Vertical padding. Default: 8 (64px) */
     py?: number | string;

package/dist/s-error-layout/s-error-layout.js

@@ -3,7 +3,7 @@ import "react";
 import { jsx as t, jsxs as n } from "react/jsx-runtime";
 import { Box as r, Button as i, Container as a, Stack as o, Typography as s } from "@mui/material";
 //#region lib/s-error-layout/s-error-layout.tsx
-var c = ({ imageSrc: c, imageAlt: l, title: u, description: d, buttonText: f, imageWidth: p = "200px", imageHeight: m = "auto", maxWidth: h = "lg", height: g = "100vh", py: _ = 8, spacing: v = 6, titleVariant: y = "h4", descriptionVariant: b = "body1", buttonVariant: x = "contained", buttonColor: S = "primary", containerSx: C, imageContainerSx: w, contentSx: T, titleSx: E, descriptionSx: D, buttonContainerSx: O, buttonProps: k, hideImage: A = !1, customActions: j }) => {
+var c = ({ imageSrc: c, imageAlt: l, title: u, description: d, buttonText: f, imageWidth: p = "200px", imageHeight: m = "auto", maxWidth: h = "lg", height: g = "100dvh", py: _ = 8, spacing: v = 6, titleVariant: y = "h4", descriptionVariant: b = "body1", buttonVariant: x = "contained", buttonColor: S = "primary", containerSx: C, imageContainerSx: w, contentSx: T, titleSx: E, descriptionSx: D, buttonContainerSx: O, buttonProps: k, hideImage: A = !1, customActions: j }) => {
 	let M = j ? /* @__PURE__ */ t(r, {
 		sx: {
 			display: "flex",
@@ -31,8 +31,9 @@ var c = ({ imageSrc: c, imageAlt: l, title: u, description: d, buttonText: f, im
 			display: "flex",
 			flexDirection: "column",
 			justifyContent: "center",
+			boxSizing: "border-box",
+			minHeight: g,
 			py: _,
-			height: g,
 			...C
 		},
 		children: /* @__PURE__ */ t(a, {

package/dist/s-file-dropzone/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-file-dropzone-oaQoRV92.js";
+import { t as e } from "../s-file-dropzone-CbaOf3_3.js";
 export { e as SFileDropzone, e as default };

package/dist/s-file-dropzone/s-file-dropzone.d.ts

@@ -30,8 +30,5 @@ export interface SFileDropzoneProps extends DropzoneOptions {
     /** Whether to show the 'Remove all' button */
     isShowBtnRemoveAll?: boolean;
 }
-export declare const SFileDropzone: {
-    ({ hint, label, error, onRemoveAll, onRemove, required, isShowBtnRemoveAll, ...props }: SFileDropzoneProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SFileDropzone: React.ForwardRefExoticComponent<SFileDropzoneProps & React.RefAttributes<HTMLInputElement>>;
 export default SFileDropzone;

package/dist/s-file-dropzone/s-file-dropzone.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-file-dropzone-oaQoRV92.js";
+import { t as e } from "../s-file-dropzone-CbaOf3_3.js";
 export { e as SFileDropzone, e as default };

package/dist/{s-file-dropzone-oaQoRV92.js → s-file-dropzone-CbaOf3_3.js}

@@ -1,23 +1,25 @@
 import { t as e } from "./Box-BlmynALm.js";
 import { t } from "./Stack-BQkLmLFp.js";
 import { t as n } from "./utils-B5Rl6Zwv.js";
-import { t as r } from "./createSvgIcon-BdNZIlKS.js";
-import { t as i } from "./Typography-EsraKPZO.js";
-import { SForm as a } from "./s-form/s-form.js";
-import { SFileIcon as o } from "./s-file-icon/s-file-icon.js";
-import * as s from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Avatar as u, Button as d, IconButton as f, Tooltip as p } from "@mui/material";
-import { useDropzone as m } from "react-dropzone";
+import { t as r } from "./useForkRef-yOYCJHzF.js";
+import { t as i } from "./createSvgIcon-HW-tbFcL.js";
+import { t as a } from "./Typography-DqtTB0ZJ.js";
+import { SForm as o } from "./s-form/s-form.js";
+import { SFileIcon as s } from "./s-file-icon/s-file-icon.js";
+import * as c from "react";
+import { forwardRef as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Avatar as f, Button as p, IconButton as m, Tooltip as h } from "@mui/material";
+import { useDropzone as g } from "react-dropzone";
 //#region ../../node_modules/@mui/icons-material/CloseOutlined.mjs
-var h = r(/* @__PURE__ */ c("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }), "CloseOutlined"), g = r(/* @__PURE__ */ c("path", { d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3M8 13h2.55v3h2.9v-3H16l-4-4z" }), "CloudUploadOutlined"), _ = ({ hint: r, label: _ = "", error: v, onRemoveAll: y, onRemove: b, required: x = !1, isShowBtnRemoveAll: S = !1, ...C }) => {
-	let { getRootProps: w, getInputProps: T, isDragActive: E } = m(C);
-	return /* @__PURE__ */ l(s.Fragment, { children: [/* @__PURE__ */ c(a, {
-		error: v,
-		label: _,
-		required: x,
-		hint: r,
-		children: /* @__PURE__ */ l(e, {
+var _ = i(/* @__PURE__ */ u("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" }), "CloseOutlined"), v = i(/* @__PURE__ */ u("path", { d: "M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96M19 18H6c-2.21 0-4-1.79-4-4 0-2.05 1.53-3.76 3.56-3.97l1.07-.11.5-.95C8.08 7.14 9.94 6 12 6c2.62 0 4.88 1.86 5.39 4.43l.3 1.5 1.53.11c1.56.1 2.78 1.41 2.78 2.96 0 1.65-1.35 3-3 3M8 13h2.55v3h2.9v-3H16l-4-4z" }), "CloudUploadOutlined"), y = l(({ hint: i, label: l = "", error: y, onRemoveAll: b, onRemove: x, required: S = !1, isShowBtnRemoveAll: C = !1, ...w }, T) => {
+	let { getRootProps: E, getInputProps: D, isDragActive: O, inputRef: k } = g(w), A = r(T, k);
+	return /* @__PURE__ */ d(c.Fragment, { children: [/* @__PURE__ */ u(o, {
+		error: y,
+		label: l,
+		required: S,
+		hint: i,
+		children: /* @__PURE__ */ d(e, {
 			sx: {
 				alignItems: "center",
 				border: "1px dashed",
@@ -29,32 +31,35 @@ var h = r(/* @__PURE__ */ c("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.4
 				justifyContent: "center",
 				outline: "none",
 				p: 4,
-				...E && {
+				...O && {
 					bgcolor: "action.selected",
 					opacity: .5
 				},
-				"&:hover": { ...!E && { bgcolor: "action.hover" } }
+				"&:hover": { ...!O && { bgcolor: "action.hover" } }
 			},
-			...w(),
-			children: [/* @__PURE__ */ c("input", { ...T() }), /* @__PURE__ */ l(t, {
+			...E(),
+			children: [/* @__PURE__ */ u("input", {
+				...D(),
+				ref: A
+			}), /* @__PURE__ */ d(t, {
 				direction: "row",
 				spacing: 1,
 				sx: { alignItems: "center" },
-				children: [/* @__PURE__ */ c(u, {
+				children: [/* @__PURE__ */ u(f, {
 					sx: {
 						border: "1px dashed",
 						borderColor: "divider",
 						color: "text.secondary",
 						backgroundColor: "transparent"
 					},
-					children: /* @__PURE__ */ c(g, { fontSize: "small" })
-				}), /* @__PURE__ */ c(t, {
+					children: /* @__PURE__ */ u(v, { fontSize: "small" })
+				}), /* @__PURE__ */ u(t, {
 					spacing: 1,
-					children: /* @__PURE__ */ l(i, {
+					children: /* @__PURE__ */ d(a, {
 						variant: "body2",
 						sx: { color: "text.secondary" },
 						children: [
-							/* @__PURE__ */ c(i, {
+							/* @__PURE__ */ u(a, {
 								component: "span",
 								sx: { textDecoration: "underline" },
 								variant: "inherit",
@@ -67,10 +72,10 @@ var h = r(/* @__PURE__ */ c("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.4
 				})]
 			})]
 		})
-	}), C.files?.length ? /* @__PURE__ */ l(t, {
+	}), w.files?.length ? /* @__PURE__ */ d(t, {
 		spacing: 1,
 		sx: { mt: 1 },
-		children: [/* @__PURE__ */ c(t, {
+		children: [/* @__PURE__ */ u(t, {
 			component: "ul",
 			spacing: 1,
 			sx: {
@@ -78,7 +83,7 @@ var h = r(/* @__PURE__ */ c("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.4
 				m: 0,
 				p: 0
 			},
-			children: C.files?.map((r) => /* @__PURE__ */ l(t, {
+			children: w.files?.map((r) => /* @__PURE__ */ d(t, {
 				component: "li",
 				direction: "row",
 				spacing: 2,
@@ -91,44 +96,44 @@ var h = r(/* @__PURE__ */ c("path", { d: "M19 6.41 17.59 5 12 10.59 6.41 5 5 6.4
 					p: 1
 				},
 				children: [
-					/* @__PURE__ */ c(o, { extension: r.name.split(".").pop() }),
-					/* @__PURE__ */ l(e, {
+					/* @__PURE__ */ u(s, { extension: r.name.split(".").pop() }),
+					/* @__PURE__ */ d(e, {
 						sx: { flex: "1 1 auto" },
-						children: [/* @__PURE__ */ c(i, {
+						children: [/* @__PURE__ */ u(a, {
 							variant: "subtitle2",
 							children: r.name
-						}), /* @__PURE__ */ c(i, {
+						}), /* @__PURE__ */ u(a, {
 							variant: "body2",
 							sx: { color: "text.secondary" },
 							children: n(r.size)
 						})]
 					}),
-					/* @__PURE__ */ c(p, {
+					/* @__PURE__ */ u(h, {
 						title: "Remove",
-						children: /* @__PURE__ */ c(f, {
+						children: /* @__PURE__ */ u(m, {
 							onClick: () => {
-								b?.(r);
+								x?.(r);
 							},
-							children: /* @__PURE__ */ c(h, {})
+							children: /* @__PURE__ */ u(_, {})
 						})
 					})
 				]
 			}, r.size))
-		}), /* @__PURE__ */ c(t, {
+		}), /* @__PURE__ */ u(t, {
 			direction: "row",
 			sx: {
 				alignItems: "center",
 				justifyContent: "flex-end"
 			},
-			children: S && /* @__PURE__ */ c(d, {
-				onClick: y,
+			children: C && /* @__PURE__ */ u(p, {
+				onClick: b,
 				type: "button",
 				variant: "text",
 				children: "Remove all"
 			})
 		})]
 	}) : null] });
-};
-_.displayName = "SFileDropzone";
+});
+y.displayName = "SFileDropzone";
 //#endregion
-export { _ as t };
+export { y as t };

package/dist/s-gallery/gallery-grid-item.d.ts

@@ -0,0 +1,17 @@
+import { default as React } from 'react';
+import { MediaItemType } from '../s-image-modal';
+/**
+ * Single draggable grid cell: media + hover overlay with title/desc
+ */
+export declare const GalleryGridItem: React.FC<{
+    item: MediaItemType;
+    index: number;
+    /** Unique gallery instance id used to scope framer-motion layout ids */
+    instanceId: string;
+    /** Whether a drag is in progress anywhere in the gallery (suppresses clicks) */
+    isDragging: boolean;
+    onSelect: (item: MediaItemType) => void;
+    onDragStart: () => void;
+    /** Called on drag end with the combined x+y drag offset */
+    onDragEnd: (index: number, moveDistance: number) => void;
+}>;

package/dist/s-gallery/gallery-grid-item.js

@@ -0,0 +1,112 @@
+import { MediaItem as e } from "./gallery-media-item.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Box as r, Paper as i, Typography as a } from "@mui/material";
+import { motion as o } from "framer-motion";
+//#region lib/s-gallery/gallery-grid-item.tsx
+var s = ({ item: s, index: c, instanceId: l, isDragging: u, onSelect: d, onDragStart: f, onDragEnd: p }) => /* @__PURE__ */ t(o.div, {
+	layoutId: `media-${s.id}-${l}`,
+	onClick: () => !u && d(s),
+	variants: {
+		hidden: {
+			y: 50,
+			scale: .9,
+			opacity: 0
+		},
+		visible: {
+			y: 0,
+			scale: 1,
+			opacity: 1,
+			transition: {
+				type: "spring",
+				stiffness: 350,
+				damping: 25,
+				delay: c * .05
+			}
+		}
+	},
+	whileHover: {
+		filter: "brightness(1.1)",
+		zIndex: 10
+	},
+	drag: !0,
+	dragConstraints: {
+		left: 0,
+		right: 0,
+		top: 0,
+		bottom: 0
+	},
+	dragElastic: 1,
+	onDragStart: f,
+	onDragEnd: (e, t) => p(c, t.offset.x + t.offset.y),
+	style: {
+		position: "relative",
+		gridRow: s.rowSpan ? `span ${s.rowSpan}` : "span 2",
+		gridColumn: s.colSpan ? `span ${s.colSpan}` : "span 1"
+	},
+	children: /* @__PURE__ */ n(i, {
+		sx: {
+			position: "relative",
+			overflow: "hidden",
+			borderRadius: 1,
+			width: "100%",
+			height: "100%",
+			cursor: "grab",
+			"&:active": { cursor: "grabbing" },
+			"&:hover .hover-overlay": { opacity: 1 }
+		},
+		children: [/* @__PURE__ */ t(e, {
+			item: s,
+			sx: {
+				position: "absolute",
+				inset: 0,
+				width: "100%",
+				height: "100%"
+			},
+			onClick: () => !u && d(s)
+		}), (s.title || s.desc) && /* @__PURE__ */ n(r, {
+			className: "hover-overlay",
+			sx: {
+				position: "absolute",
+				inset: 0,
+				display: "flex",
+				flexDirection: "column",
+				justifyContent: "flex-end",
+				padding: 1.5,
+				pointerEvents: "none",
+				opacity: 0,
+				transition: "opacity 0.2s ease-in-out",
+				color: "common.white",
+				background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent)"
+			},
+			children: [s.title && /* @__PURE__ */ t(a, {
+				variant: "h6",
+				sx: {
+					position: "relative",
+					fontSize: {
+						xs: 14,
+						sm: 18,
+						md: 20
+					},
+					whiteSpace: "nowrap",
+					overflow: "hidden",
+					textOverflow: "ellipsis"
+				},
+				children: s.title
+			}), s.desc && /* @__PURE__ */ t(a, {
+				variant: "body2",
+				sx: {
+					position: "relative",
+					mt: .5,
+					display: "-webkit-box",
+					WebkitLineClamp: 2,
+					WebkitBoxOrient: "vertical",
+					overflow: "hidden"
+				},
+				children: s.desc
+			})]
+		})]
+	})
+}, `${s.id}-${l}`);
+//#endregion
+export { s as GalleryGridItem };

package/dist/s-gallery/gallery-layout.d.ts

@@ -0,0 +1,16 @@
+import { MediaItemType } from '../s-image-modal';
+/**
+ * Built-in layout variants for the gallery
+ */
+export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'highlight' | 'custom';
+/**
+ * Get layout dimensions for a specific index and variant
+ */
+export declare const getLayoutDimensions: (index: number, variant: GalleryLayoutVariant) => {
+    colSpan: number;
+    rowSpan: number;
+};
+/**
+ * Apply layout variant to media items by setting colSpan and rowSpan
+ */
+export declare const applyLayoutVariant: (items: MediaItemType[], variant: GalleryLayoutVariant) => MediaItemType[];

package/dist/s-gallery/gallery-layout.js

@@ -0,0 +1,50 @@
+//#region lib/s-gallery/gallery-layout.ts
+function e(e) {
+	return e % 3 == 0 ? 3 : e % 2 == 0 ? 2 : 4;
+}
+var t = (t, n) => {
+	switch (n) {
+		case "grid": return {
+			colSpan: 1,
+			rowSpan: 2
+		};
+		case "masonry": return {
+			colSpan: 1,
+			rowSpan: e(t)
+		};
+		case "spotlight": return t === 0 ? {
+			colSpan: 2,
+			rowSpan: 4
+		} : {
+			colSpan: 1,
+			rowSpan: 2
+		};
+		case "featured": return t === 0 ? {
+			colSpan: 2,
+			rowSpan: 6
+		} : {
+			colSpan: 1,
+			rowSpan: 2
+		};
+		case "highlight": return t === 0 ? {
+			colSpan: 3,
+			rowSpan: 6
+		} : {
+			colSpan: 1,
+			rowSpan: 2
+		};
+		case "custom": return {
+			colSpan: 1,
+			rowSpan: 2
+		};
+	}
+}, n = (e, n) => n === "custom" ? e : e.map((e, r) => {
+	let { colSpan: i, rowSpan: a } = t(r, n);
+	return {
+		...e,
+		colSpan: i,
+		rowSpan: a
+	};
+});
+//#endregion
+export { n as applyLayoutVariant, t as getLayoutDimensions };

package/dist/s-gallery/gallery-media-item.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+import { MediaItemType } from '../s-image-modal';
+/**
+ * Props for individual MediaItem components
+ */
+export type MediaItemProps = {
+    /** Media item data */
+    item: MediaItemType;
+    /** Custom styling */
+    sx?: SxProps<Theme>;
+    /** Click handler */
+    onClick?: () => void;
+};
+export declare const MediaItem: React.FC<MediaItemProps>;

package/dist/s-gallery/gallery-media-item.js

@@ -0,0 +1,112 @@
+import e from "../s-lazy-image/s-lazy-image.js";
+import { useEffect as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o } from "@mui/material";
+//#region lib/s-gallery/gallery-media-item.tsx
+function s(e) {
+	return new Promise((t) => {
+		let n = () => {
+			e.removeEventListener("canplay", n), t();
+		};
+		e.addEventListener("canplay", n, { once: !0 });
+	});
+}
+var c = ({ item: c, sx: l, onClick: u }) => {
+	let d = n(null), [f, p] = r(!1), [m, h] = r(!0);
+	if (t(() => {
+		let e = new IntersectionObserver((e) => {
+			e.forEach((e) => p(e.isIntersecting));
+		}, {
+			root: null,
+			rootMargin: "50px",
+			threshold: .1
+		}), t = d.current;
+		return t && e.observe(t), () => {
+			t && e.unobserve(t);
+		};
+	}, []), t(() => {
+		let e = !0, t = d.current;
+		return f ? (async () => {
+			if (!(!t || !f || !e)) try {
+				if (t.readyState < 3 && (h(!0), await s(t)), !e) return;
+				h(!1), await t.play();
+			} catch (e) {
+				console.warn("Video playback failed:", e);
+			}
+		})() : t && t.pause(), () => {
+			e = !1, t && (t.pause(), t.removeAttribute("src"), t.load());
+		};
+	}, [f]), c.type === "video") return /* @__PURE__ */ a(o, {
+		sx: {
+			position: "relative",
+			overflow: "hidden",
+			width: "100%",
+			height: "100%",
+			...l
+		},
+		children: [/* @__PURE__ */ i(o, {
+			component: "video",
+			ref: d,
+			onClick: u,
+			playsInline: !0,
+			muted: !0,
+			loop: !0,
+			preload: "auto",
+			sx: {
+				width: "100%",
+				height: "100%",
+				objectFit: "cover",
+				opacity: m ? .8 : 1,
+				transition: "opacity 0.2s",
+				transform: "translateZ(0)",
+				willChange: "transform",
+				display: "block"
+			},
+			children: /* @__PURE__ */ i("source", {
+				src: c.url,
+				type: "video/mp4"
+			})
+		}), m && /* @__PURE__ */ i(o, {
+			sx: {
+				position: "absolute",
+				inset: 0,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				bgcolor: "action.disabled"
+			},
+			children: /* @__PURE__ */ i(o, { sx: {
+				width: 24,
+				height: 24,
+				borderRadius: "50%",
+				border: "2px solid",
+				borderColor: "divider",
+				borderTopColor: "primary.main",
+				animation: "spin 0.8s linear infinite",
+				"@keyframes spin": { to: { transform: "rotate(360deg)" } }
+			} })
+		})]
+	});
+	let g = l && typeof l == "object" && "objectFit" in l && typeof l.objectFit == "string" ? l.objectFit : "cover";
+	return /* @__PURE__ */ i(o, {
+		onClick: u,
+		sx: {
+			width: "100%",
+			height: "100%",
+			...l
+		},
+		children: /* @__PURE__ */ i(e, {
+			src: c.url,
+			alt: c.title ?? "",
+			style: {
+				objectFit: g,
+				cursor: u ? "pointer" : "default",
+				display: "block",
+				width: "100%",
+				height: "100%"
+			}
+		})
+	});
+};
+//#endregion
+export { c as MediaItem };

package/dist/s-gallery/index.d.ts

@@ -1,2 +1,5 @@
-export { default, default as SGallery, MediaItem } from './s-gallery';
-export type { SGalleryProps, MediaItemProps, GalleryLayoutVariant } from './s-gallery';
+export { default, default as SGallery } from './s-gallery';
+export type { SGalleryProps } from './s-gallery';
+export { MediaItem } from './gallery-media-item';
+export type { MediaItemProps } from './gallery-media-item';
+export type { GalleryLayoutVariant } from './gallery-layout';

package/dist/s-gallery/index.js

@@ -1,2 +1,3 @@
-import { MediaItem as e, SGallery as t } from "./s-gallery.js";
+import { MediaItem as e } from "./gallery-media-item.js";
+import { SGallery as t } from "./s-gallery.js";
 export { e as MediaItem, t as SGallery, t as default };

package/dist/s-gallery/s-gallery.d.ts

@@ -1,22 +1,6 @@
 import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
 import { MediaItemType } from '../s-image-modal';
-/**
- * Props for individual MediaItem components
- */
-export type MediaItemProps = {
-    /** Media item data */
-    item: MediaItemType;
-    /** Custom styling */
-    sx?: SxProps<Theme>;
-    /** Click handler */
-    onClick?: () => void;
-};
-export declare const MediaItem: React.FC<MediaItemProps>;
-/**
- * Built-in layout variants for the gallery
- */
-export type GalleryLayoutVariant = 'masonry' | 'grid' | 'spotlight' | 'featured' | 'highlight' | 'custom';
+import { GalleryLayoutVariant } from './gallery-layout';
 /**
  * Props for the SGallery component.
  */