@solostylist/ui-kit 1.0.75 → 1.0.77

package/dist/main.d.ts

@@ -70,5 +70,9 @@ export { default as SMovingBorder } from './s-moving-border/index';
 export type { SMovingBorderProps } from './s-moving-border/index';
 export { default as SCopyableText } from './s-copyable-text/index';
 export type { SCopyableTextProps } from './s-copyable-text/index';
+export { default as SInteractiveGallery, MediaItem, GalleryModal } from './s-interactive-gallery/index';
+export type { MediaItemType, SInteractiveGalleryProps, MediaItemProps, GalleryModalProps, } from './s-interactive-gallery/index';
+export { default as SLazyImage } from './s-lazy-image/index';
+export type { SLazyImageProps } from './s-lazy-image/index';
 export * from './hooks';
 export * from './utils';

package/dist/main.js

@@ -1,18 +1,18 @@
 import { default as r } from "./s-autocomplete/s-autocomplete.js";
 import { default as a } from "./s-button-link/s-button-link.js";
 import { default as l } from "./s-text-editor/s-text-editor.js";
-import { default as p } from "./s-checkbox/s-checkbox.js";
-import { default as S } from "./s-chips/s-chips.js";
-import { default as d } from "./s-data-table/s-data-table.js";
+import { default as m } from "./s-checkbox/s-checkbox.js";
+import { default as d } from "./s-chips/s-chips.js";
+import { default as x } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as i, default as g, useDialogConfirm as n } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as D, default as P, useDialogMessage as T } from "./s-dialog-message/s-dialog-message.js";
-import { default as b } from "./s-error/s-error.js";
-import { default as k } from "./s-empty/s-empty.js";
-import { default as L } from "./s-dialog/s-dialog.js";
-import { default as y } from "./s-file-dropzone/s-file-dropzone.js";
-import { default as E } from "./s-file-icon/s-file-icon.js";
-import { default as h } from "./s-i18n-provider/s-i18n-provider.js";
-import { default as G } from "./s-icon-button/s-icon-button.js";
+import { default as M } from "./s-error/s-error.js";
+import { default as C } from "./s-empty/s-empty.js";
+import { default as y } from "./s-dialog/s-dialog.js";
+import { default as I } from "./s-file-dropzone/s-file-dropzone.js";
+import { default as z } from "./s-file-icon/s-file-icon.js";
+import { default as E } from "./s-i18n-provider/s-i18n-provider.js";
+import { default as h } from "./s-icon-button/s-icon-button.js";
 import { default as j } from "./s-label/s-label.js";
 import { default as A } from "./s-multi-select/s-multi-select.js";
 import { default as V } from "./s-no-ssr/s-no-ssr.js";
@@ -25,51 +25,57 @@ import { default as _ } from "./s-text-truncation/s-text-truncation.js";
 import { default as ee, SnackbarMessageProvider as oe, useSnackbarMessage as re } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as ae } from "./s-form/s-form.js";
 import { SSmartTextField as le } from "./s-smart-text-field/s-smart-text-field.js";
-import { SCopilotKitProvider as pe } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as Se, SStripeExpiry as xe, SStripeNumber as de, StripeTextField as ue } from "./s-stripe/s-stripe.js";
+import { SCopilotKitProvider as me } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
+import { SStripeCVC as de, SStripeExpiry as Se, SStripeNumber as xe, StripeTextField as ue } from "./s-stripe/s-stripe.js";
 import { default as ge } from "./s-theme-provider/s-theme-provider.js";
 import { default as ce } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as Pe } from "./s-date-picker/s-date-picker.js";
 import { default as ve } from "./s-localization-provider/s-localization-provider.js";
-import { default as Ce } from "./s-gradient-icon/s-gradient-icon.js";
-import { default as Me } from "./s-glow-button/s-glow-button.js";
-import { default as Fe } from "./s-moving-border/s-moving-border.js";
-import { default as Be } from "./s-copyable-text/s-copyable-text.js";
-import { useDialog as Ie } from "./hooks/use-dialog.js";
-import { usePopover as ze } from "./hooks/use-popover.js";
-import { formatDatePosted as Ne } from "./utils/dayjs.js";
-import { bytesToSize as we } from "./utils/bytes-to-size.js";
-import { LogLevel as Ke, Logger as Ve, createLogger as qe, logger as He } from "./utils/logger.js";
-import { default as Oe } from "dayjs";
+import { default as be } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as ke } from "./s-glow-button/s-glow-button.js";
+import { default as Le } from "./s-moving-border/s-moving-border.js";
+import { default as Fe } from "./s-copyable-text/s-copyable-text.js";
+import { GalleryModal as Be, MediaItem as Ee, default as Ge } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as Ne } from "./s-lazy-image/s-lazy-image.js";
+import { useDialog as we } from "./hooks/use-dialog.js";
+import { usePopover as Ke } from "./hooks/use-popover.js";
+import { formatDatePosted as qe } from "./utils/dayjs.js";
+import { bytesToSize as Je } from "./utils/bytes-to-size.js";
+import { LogLevel as Qe, Logger as Re, createLogger as Ue, logger as We } from "./utils/logger.js";
+import { default as Ye } from "dayjs";
 export {
   i as DialogConfirmProvider,
   D as DialogMessageProvider,
-  Ke as LogLevel,
-  Ve as Logger,
+  Be as GalleryModal,
+  Qe as LogLevel,
+  Re as Logger,
+  Ee as MediaItem,
   r as SAutocomplete,
   a as SButtonLink,
-  p as SCheckbox,
-  S as SChips,
-  pe as SCopilotKitProvider,
-  Be as SCopyableText,
-  d as SDataTable,
+  m as SCheckbox,
+  d as SChips,
+  me as SCopilotKitProvider,
+  Fe as SCopyableText,
+  x as SDataTable,
   Pe as SDatePicker,
   ce as SDateTimePicker,
-  L as SDialog,
+  y as SDialog,
   g as SDialogConfirm,
   P as SDialogMessage,
-  k as SEmpty,
-  b as SError,
-  y as SFileDropzone,
-  E as SFileIcon,
+  C as SEmpty,
+  M as SError,
+  I as SFileDropzone,
+  z as SFileIcon,
   ae as SForm,
-  Me as SGlowButton,
-  Ce as SGradientIcon,
-  h as SI18nProvider,
-  G as SIconButton,
+  ke as SGlowButton,
+  be as SGradientIcon,
+  E as SI18nProvider,
+  h as SIconButton,
+  Ge as SInteractiveGallery,
   j as SLabel,
+  Ne as SLazyImage,
   ve as SLocalizationProvider,
-  Fe as SMovingBorder,
+  Le as SMovingBorder,
   A as SMultiSelect,
   V as SNoSsr,
   O as SPagination,
@@ -77,9 +83,9 @@ export {
   W as SSkeleton,
   le as SSmartTextField,
   ee as SSnackbarMessage,
-  Se as SStripeCVC,
-  xe as SStripeExpiry,
-  de as SStripeNumber,
+  de as SStripeCVC,
+  Se as SStripeExpiry,
+  xe as SStripeNumber,
   l as STextEditor,
   H as STextField,
   _ as STextTruncation,
@@ -87,14 +93,14 @@ export {
   Y as STip,
   oe as SnackbarMessageProvider,
   ue as StripeTextField,
-  we as bytesToSize,
-  qe as createLogger,
-  Oe as dayjs,
-  Ne as formatDatePosted,
-  He as logger,
-  Ie as useDialog,
+  Je as bytesToSize,
+  Ue as createLogger,
+  Ye as dayjs,
+  qe as formatDatePosted,
+  We as logger,
+  we as useDialog,
   n as useDialogConfirm,
   T as useDialogMessage,
-  ze as usePopover,
+  Ke as usePopover,
   re as useSnackbarMessage
 };

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

@@ -0,0 +1,2 @@
+export { default, MediaItem, GalleryModal } from './s-interactive-gallery';
+export type { MediaItemType, SInteractiveGalleryProps, MediaItemProps, GalleryModalProps, } from './s-interactive-gallery';

package/dist/s-interactive-gallery/index.js

@@ -0,0 +1,6 @@
+import { GalleryModal as l, MediaItem as d, default as o } from "./s-interactive-gallery.js";
+export {
+  l as GalleryModal,
+  d as MediaItem,
+  o as default
+};

package/dist/s-interactive-gallery/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material';
+export interface MediaItemType {
+    id: string;
+    type: string;
+    title?: string;
+    desc?: string;
+    url: string;
+    span: string;
+}
+export type MediaItemProps = {
+    item: MediaItemType;
+    sx?: SxProps<Theme>;
+    onClick?: () => void;
+};
+export declare const MediaItem: React.FC<MediaItemProps>;
+export interface GalleryModalProps {
+    selectedItem: MediaItemType;
+    isOpen: boolean;
+    onClose: () => void;
+    setSelectedItem: (item: MediaItemType | null) => void;
+    mediaItems: MediaItemType[];
+}
+export declare const GalleryModal: React.FC<GalleryModalProps>;
+export interface SInteractiveGalleryProps {
+    mediaItems: MediaItemType[];
+}
+declare const SInteractiveGallery: React.FC<SInteractiveGalleryProps>;
+export default SInteractiveGallery;

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

@@ -0,0 +1,549 @@
+import { j as i } from "../jsx-runtime-DywqP_6a.js";
+import { useState as u, useEffect as v, useRef as C } from "react";
+import { Box as l, Paper as y, Typography as b, Modal as I, IconButton as z, Stack as R } from "@mui/material";
+import { AnimatePresence as j, motion as p } from "framer-motion";
+import P from "../s-lazy-image/s-lazy-image.js";
+import { C as S } from "../Close-CVFQMMUW.js";
+const m = ({ item: r, sx: s, onClick: a }) => {
+  const e = C(null), [d, x] = u(!1), [h, t] = u(!0);
+  return v(() => {
+    const o = { root: null, rootMargin: "50px", threshold: 0.1 }, n = new IntersectionObserver((c) => {
+      c.forEach((f) => x(f.isIntersecting));
+    }, o);
+    return e.current && n.observe(e.current), () => {
+      e.current && n.unobserve(e.current);
+    };
+  }, []), v(() => {
+    let o = !0;
+    return d ? (async () => {
+      if (!(!e.current || !d || !o))
+        try {
+          e.current.readyState >= 3 ? (t(!1), await e.current.play()) : (t(!0), await new Promise((c) => {
+            e.current && (e.current.oncanplay = () => c());
+          }), o && (t(!1), await e.current.play()));
+        } catch (c) {
+          console.warn("Video playback failed:", c);
+        }
+    })() : e.current && e.current.pause(), () => {
+      o = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+    };
+  }, [d]), r.type === "video" ? /* @__PURE__ */ i.jsxs(
+    l,
+    {
+      sx: {
+        position: "relative",
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        ...s
+      },
+      children: [
+        /* @__PURE__ */ i.jsx(
+          l,
+          {
+            component: "video",
+            ref: e,
+            onClick: a,
+            playsInline: !0,
+            muted: !0,
+            loop: !0,
+            preload: "auto",
+            sx: {
+              width: "100%",
+              height: "100%",
+              objectFit: "cover",
+              opacity: h ? 0.8 : 1,
+              transition: "opacity 0.2s",
+              transform: "translateZ(0)",
+              willChange: "transform",
+              display: "block"
+            },
+            children: /* @__PURE__ */ i.jsx("source", { src: r.url, type: "video/mp4" })
+          }
+        ),
+        h && /* @__PURE__ */ i.jsx(
+          l,
+          {
+            sx: {
+              position: "absolute",
+              inset: 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              bgcolor: "action.disabled"
+            },
+            children: /* @__PURE__ */ i.jsx(
+              l,
+              {
+                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)" }
+                  }
+                }
+              }
+            )
+          }
+        )
+      ]
+    }
+  ) : /* @__PURE__ */ i.jsx(l, { onClick: a, sx: { width: "100%", height: "100%", ...s }, children: /* @__PURE__ */ i.jsx(
+    P,
+    {
+      src: r.url,
+      alt: r.title || "",
+      width: "100%",
+      height: "100%",
+      style: {
+        objectFit: s != null && s.objectFit ? s.objectFit : "cover",
+        cursor: a ? "pointer" : "default",
+        display: "block",
+        width: "100%",
+        height: "100%"
+      }
+    }
+  ) });
+}, D = ({
+  selectedItem: r,
+  isOpen: s,
+  onClose: a,
+  setSelectedItem: e,
+  mediaItems: d
+}) => {
+  const [x, h] = u({ x: 0, y: 0 });
+  return s ? /* @__PURE__ */ i.jsx(
+    I,
+    {
+      open: s,
+      onClose: a,
+      sx: {
+        zIndex: (t) => t.zIndex.modal + 100
+        // Increased z-index
+      },
+      slotProps: {
+        backdrop: {
+          sx: {
+            backdropFilter: "blur(8px)",
+            zIndex: (t) => t.zIndex.modal + 99
+            // Ensure backdrop is below modal
+          }
+        }
+      },
+      children: /* @__PURE__ */ i.jsxs(l, { children: [
+        /* @__PURE__ */ i.jsx(
+          p.div,
+          {
+            initial: { scale: 0.98 },
+            animate: { scale: 1 },
+            exit: { scale: 0.98 },
+            transition: { type: "spring", stiffness: 400, damping: 30 },
+            children: /* @__PURE__ */ i.jsxs(
+              y,
+              {
+                elevation: 3,
+                sx: {
+                  position: "fixed",
+                  inset: 0,
+                  width: "100%",
+                  minHeight: "100vh",
+                  borderRadius: 0,
+                  overflow: "hidden",
+                  zIndex: (t) => t.zIndex.modal + 101
+                  // Higher than backdrop
+                },
+                children: [
+                  /* @__PURE__ */ i.jsx(
+                    l,
+                    {
+                      sx: {
+                        height: "100%",
+                        display: "flex",
+                        flexDirection: "column"
+                      },
+                      children: /* @__PURE__ */ i.jsx(
+                        l,
+                        {
+                          sx: {
+                            flex: 1,
+                            p: { xs: 1, sm: 2, md: 3 },
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            bgcolor: "background.default"
+                          },
+                          children: /* @__PURE__ */ i.jsx(j, { mode: "wait", children: /* @__PURE__ */ i.jsx(
+                            p.div,
+                            {
+                              style: { position: "relative" },
+                              initial: { y: 20, scale: 0.97 },
+                              animate: {
+                                y: 0,
+                                scale: 1,
+                                transition: { type: "spring", stiffness: 500, damping: 30, mass: 0.5 }
+                              },
+                              exit: { y: 20, scale: 0.97, transition: { duration: 0.15 } },
+                              onClick: a,
+                              children: /* @__PURE__ */ i.jsxs(
+                                y,
+                                {
+                                  elevation: 6,
+                                  sx: {
+                                    position: "relative",
+                                    width: "100%",
+                                    aspectRatio: "16 / 9",
+                                    maxWidth: { xs: "95%", sm: "85%", md: 960 },
+                                    maxHeight: "70vh",
+                                    borderRadius: 2,
+                                    overflow: "hidden"
+                                  },
+                                  children: [
+                                    /* @__PURE__ */ i.jsx(
+                                      m,
+                                      {
+                                        item: r,
+                                        sx: { width: "100%", height: "100%", objectFit: "contain", bgcolor: "background.paper" },
+                                        onClick: a
+                                      }
+                                    ),
+                                    /* @__PURE__ */ i.jsxs(
+                                      l,
+                                      {
+                                        sx: {
+                                          position: "absolute",
+                                          left: 0,
+                                          right: 0,
+                                          bottom: 0,
+                                          p: { xs: 1.5, sm: 2, md: 3 },
+                                          background: (t) => `linear-gradient(to top, ${t.palette.grey[900]}CC, transparent)`,
+                                          color: "primary.contrastText"
+                                        },
+                                        onClick: (t) => t.stopPropagation(),
+                                        children: [
+                                          r.title && /* @__PURE__ */ i.jsx(b, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: r.title }),
+                                          r.desc && /* @__PURE__ */ i.jsx(b, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: r.desc })
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            },
+                            r.id
+                          ) })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    z,
+                    {
+                      "aria-label": "Close",
+                      onClick: a,
+                      sx: {
+                        position: "absolute",
+                        top: { xs: 8, sm: 10, md: 12 },
+                        right: { xs: 8, sm: 10, md: 12 },
+                        zIndex: (t) => t.zIndex.modal + 102
+                        // Ensure it's above everything
+                      },
+                      children: /* @__PURE__ */ i.jsx(S, { fontSize: "small" })
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ i.jsx(
+          p.div,
+          {
+            drag: !0,
+            dragMomentum: !1,
+            dragElastic: 0.1,
+            initial: !1,
+            animate: { x: x.x, y: x.y },
+            onDragEnd: (t, o) => {
+              h((n) => ({ x: n.x + o.offset.x, y: n.y + o.offset.y }));
+            },
+            style: {
+              position: "fixed",
+              zIndex: 1502,
+              // Higher than modal content
+              left: "50%",
+              bottom: 16,
+              transform: "translateX(-50%)",
+              touchAction: "none"
+            },
+            children: /* @__PURE__ */ i.jsx(
+              y,
+              {
+                elevation: 8,
+                sx: {
+                  position: "relative",
+                  borderRadius: 3,
+                  bgcolor: "background.paper",
+                  border: "1px solid",
+                  borderColor: "divider",
+                  backdropFilter: "blur(12px)",
+                  cursor: "grab",
+                  "&:active": { cursor: "grabbing" },
+                  px: 1.5,
+                  py: 1
+                },
+                children: /* @__PURE__ */ i.jsx(R, { direction: "row", alignItems: "center", spacing: -1.5, children: d.map((t, o) => /* @__PURE__ */ i.jsxs(
+                  p.div,
+                  {
+                    onClick: (n) => {
+                      n.stopPropagation(), e(t);
+                    },
+                    style: {
+                      position: "relative",
+                      width: 40,
+                      height: 40,
+                      borderRadius: 10,
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      zIndex: r.id === t.id ? 30 : d.length - o,
+                      border: r.id === t.id ? "2px solid" : void 0,
+                      borderColor: r.id === t.id ? "divider" : void 0,
+                      cursor: "pointer"
+                    },
+                    initial: { rotate: o % 2 === 0 ? -15 : 15 },
+                    animate: {
+                      scale: r.id === t.id ? 1.2 : 1,
+                      rotate: r.id === t.id ? 0 : o % 2 === 0 ? -15 : 15,
+                      y: r.id === t.id ? -8 : 0
+                    },
+                    whileHover: {
+                      scale: 1.3,
+                      rotate: 0,
+                      y: -10,
+                      transition: { type: "spring", stiffness: 400, damping: 25 }
+                    },
+                    children: [
+                      /* @__PURE__ */ i.jsx(m, { item: t, sx: { width: "100%", height: "100%" }, onClick: () => e(t) }),
+                      /* @__PURE__ */ i.jsx(
+                        l,
+                        {
+                          sx: {
+                            position: "absolute",
+                            inset: 0,
+                            background: (n) => `linear-gradient(to bottom, transparent, ${n.palette.action.hover}, ${n.palette.action.selected})`,
+                            pointerEvents: "none"
+                          }
+                        }
+                      ),
+                      r.id === t.id && /* @__PURE__ */ i.jsx(
+                        p.div,
+                        {
+                          layoutId: "activeGlow",
+                          style: {
+                            position: "absolute",
+                            inset: -8,
+                            background: "primary.main",
+                            filter: "blur(16px)"
+                          },
+                          initial: { opacity: 0 },
+                          animate: { opacity: 1 },
+                          transition: { duration: 0.2 }
+                        }
+                      )
+                    ]
+                  },
+                  t.id
+                )) })
+              }
+            )
+          }
+        )
+      ] })
+    }
+  ) : null;
+}, T = ({ mediaItems: r }) => {
+  const [s, a] = u(null), [e, d] = u(r), [x, h] = u(!1);
+  return v(() => {
+    d(r);
+  }, [r]), /* @__PURE__ */ i.jsxs(l, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+    " ",
+    s && /* @__PURE__ */ i.jsx(
+      D,
+      {
+        selectedItem: s,
+        isOpen: !0,
+        onClose: () => a(null),
+        setSelectedItem: a,
+        mediaItems: e
+      }
+    ),
+    /* @__PURE__ */ i.jsx(j, { mode: "wait", children: !s && /* @__PURE__ */ i.jsx(
+      p.div,
+      {
+        initial: "hidden",
+        animate: "visible",
+        exit: "hidden",
+        variants: {
+          hidden: { opacity: 0 },
+          visible: {
+            opacity: 1,
+            transition: { staggerChildren: 0.1 }
+          }
+        },
+        children: /* @__PURE__ */ i.jsx(
+          l,
+          {
+            sx: {
+              display: "grid",
+              gridTemplateColumns: {
+                xs: "1fr",
+                sm: "repeat(3, 1fr)",
+                md: "repeat(4, 1fr)"
+              },
+              gap: 1.5,
+              gridAutoRows: "60px",
+              position: "relative"
+              // Ensure proper stacking context
+            },
+            children: e.map((t, o) => /* @__PURE__ */ i.jsx(
+              p.div,
+              {
+                layoutId: `media-${t.id}`,
+                onClick: () => !x && a(t),
+                variants: {
+                  hidden: { y: 50, scale: 0.9, opacity: 0 },
+                  visible: {
+                    y: 0,
+                    scale: 1,
+                    opacity: 1,
+                    transition: {
+                      type: "spring",
+                      stiffness: 350,
+                      damping: 25,
+                      delay: o * 0.05
+                    }
+                  }
+                },
+                whileHover: { filter: "brightness(1.1)", zIndex: 10 },
+                drag: !0,
+                dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
+                dragElastic: 1,
+                onDragStart: () => h(!0),
+                onDragEnd: (n, c) => {
+                  h(!1);
+                  const f = c.offset.x + c.offset.y;
+                  if (Math.abs(f) > 50) {
+                    const g = [...e], w = g[o], k = f > 0 ? Math.min(o + 1, e.length - 1) : Math.max(o - 1, 0);
+                    g.splice(o, 1), g.splice(k, 0, w), d(g);
+                  }
+                },
+                style: {
+                  position: "relative",
+                  gridRow: `span ${parseInt(t.span) || 2}`
+                  // Use span properly for grid
+                },
+                children: /* @__PURE__ */ i.jsxs(
+                  y,
+                  {
+                    elevation: 4,
+                    sx: {
+                      position: "relative",
+                      overflow: "hidden",
+                      borderRadius: 2,
+                      width: "100%",
+                      height: "100%",
+                      minHeight: 120,
+                      cursor: "grab",
+                      "&:active": { cursor: "grabbing" }
+                    },
+                    children: [
+                      /* @__PURE__ */ i.jsx(
+                        m,
+                        {
+                          item: t,
+                          sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
+                          onClick: () => !x && a(t)
+                        }
+                      ),
+                      /* @__PURE__ */ i.jsxs(
+                        p.div,
+                        {
+                          style: {
+                            position: "absolute",
+                            inset: 0,
+                            display: "flex",
+                            flexDirection: "column",
+                            justifyContent: "flex-end",
+                            padding: 12,
+                            pointerEvents: "none"
+                            // Prevent blocking clicks
+                          },
+                          initial: { opacity: 0 },
+                          whileHover: { opacity: 1 },
+                          transition: { duration: 0.2 },
+                          children: [
+                            /* @__PURE__ */ i.jsx(
+                              l,
+                              {
+                                sx: {
+                                  position: "absolute",
+                                  inset: 0,
+                                  background: (n) => `linear-gradient(to top, ${n.palette.grey[900]}CC, ${n.palette.grey[900]}66, transparent)`
+                                }
+                              }
+                            ),
+                            /* @__PURE__ */ i.jsx(
+                              b,
+                              {
+                                variant: "subtitle2",
+                                sx: {
+                                  position: "relative",
+                                  color: "primary.contrastText",
+                                  fontWeight: 600,
+                                  whiteSpace: "nowrap",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis"
+                                },
+                                children: t.title
+                              }
+                            ),
+                            /* @__PURE__ */ i.jsx(
+                              b,
+                              {
+                                variant: "caption",
+                                sx: {
+                                  position: "relative",
+                                  color: "text.secondary",
+                                  mt: 0.5,
+                                  display: "-webkit-box",
+                                  WebkitLineClamp: 2,
+                                  WebkitBoxOrient: "vertical",
+                                  overflow: "hidden"
+                                },
+                                children: t.desc
+                              }
+                            )
+                          ]
+                        }
+                      )
+                    ]
+                  }
+                )
+              },
+              t.id
+            ))
+          }
+        )
+      }
+    ) })
+  ] });
+};
+export {
+  D as GalleryModal,
+  m as MediaItem,
+  T as default
+};

package/dist/s-lazy-image/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './s-lazy-image';
+export type { SLazyImageProps } from './s-lazy-image';

package/dist/s-lazy-image/index.js

@@ -0,0 +1,4 @@
+import { default as o } from "./s-lazy-image.js";
+export {
+  o as default
+};

package/dist/s-lazy-image/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "sideEffects": false
+}

package/dist/s-lazy-image/s-lazy-image.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SkeletonProps } from '@mui/material';
+export interface SLazyImageProps {
+    src: string;
+    alt: string;
+    className?: string;
+    variant?: SkeletonProps['variant'];
+    style?: React.CSSProperties;
+    height?: number | string;
+    width?: number | string;
+    minWidth?: number | string;
+    minHeight?: number | string;
+}
+declare const SLazyImage: ({ src, variant, alt, height, width, className, style, minWidth, minHeight, }: SLazyImageProps) => import("react/jsx-runtime").JSX.Element;
+export default SLazyImage;

package/dist/s-lazy-image/s-lazy-image.js

@@ -0,0 +1,53 @@
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import { useId as c, useState as d } from "react";
+import { Box as f, Skeleton as p } from "@mui/material";
+const y = ({
+  src: a,
+  variant: n = "rounded",
+  alt: m,
+  height: i,
+  width: o,
+  className: g,
+  style: h,
+  minWidth: r = "auto",
+  minHeight: u = "auto"
+}) => {
+  const w = c(), [t, l] = d({
+    width: o || "100%",
+    height: i || "auto"
+  }), [s, x] = d(!1);
+  return /* @__PURE__ */ e.jsxs(f, { height: t.height, width: t.width, children: [
+    !s && /* @__PURE__ */ e.jsx(
+      p,
+      {
+        variant: n,
+        id: `image-skeleton-${w}`,
+        animation: "wave",
+        style: { height: t.height, width: t.width, minWidth: r, minHeight: u, ...h }
+      }
+    ),
+    /* @__PURE__ */ e.jsx(
+      "img",
+      {
+        src: a,
+        alt: m,
+        style: {
+          height: t.height,
+          width: t.width,
+          display: s ? "block" : "none",
+          ...h
+        },
+        className: g,
+        onLoad: () => {
+          (!i || !o) && l({
+            width: t.width,
+            height: t.height
+          }), x(!0);
+        }
+      }
+    )
+  ] });
+};
+export {
+  y as default
+};

package/dist/theme/customizations/inputs.js

@@ -10,7 +10,7 @@ const c = i(/* @__PURE__ */ a.jsx("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded"), b = i(/* @__PURE__ */ a.jsx("path", {
   d: "M18 13H6c-.55 0-1-.45-1-1s.45-1 1-1h12c.55 0 1 .45 1 1s-.45 1-1 1"
-}), "RemoveRounded"), g = n("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), d = n("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), m = {
+}), "RemoveRounded"), g = n("MuiToggleButton", ["root", "disabled", "selected", "standard", "primary", "secondary", "sizeSmall", "sizeMedium", "sizeLarge", "fullWidth"]), d = n("MuiToggleButtonGroup", ["root", "selected", "horizontal", "vertical", "disabled", "grouped", "groupedHorizontal", "groupedVertical", "fullWidth", "firstButton", "lastButton", "middleButton"]), f = {
   MuiButtonBase: {
     defaultProps: {
       disableTouchRipple: !0,
@@ -246,7 +246,7 @@ const c = i(/* @__PURE__ */ a.jsx("path", {
           borderColor: e[300]
         },
         "&:active": {
-          backgroundColor: e[200]
+          backgroundColor: (o.vars || o).palette.action.selected
         },
         ...o.applyStyles("dark", {
           // backgroundColor: gray[800],
@@ -256,7 +256,7 @@ const c = i(/* @__PURE__ */ a.jsx("path", {
             borderColor: e[600]
           },
           "&:active": {
-            backgroundColor: e[900]
+            backgroundColor: (o.vars || o).palette.action.selected
           }
         }),
         variants: [
@@ -491,5 +491,5 @@ const c = i(/* @__PURE__ */ a.jsx("path", {
   }
 };
 export {
-  m as inputsCustomizations
+  f as inputsCustomizations
 };

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
   },
-  "version": "1.0.75",
+  "version": "1.0.77",
   "description": "advanced ui kit for solostylist",
   "private": false,
   "type": "module",