@solostylist/ui-kit 1.0.85 → 1.0.86

package/dist/main.d.ts

@@ -74,8 +74,11 @@ 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 SInteractiveGallery, MediaItem } from './s-interactive-gallery/index';
+export type { SInteractiveGalleryProps, MediaItemProps, } from './s-interactive-gallery/index';
+export { default as SImageModal } from './s-image-modal/index';
+export type { MediaItemType } from './s-image-modal/index';
+export type { SImageModalProps } from './s-image-modal/index';
 export { default as SLazyImage } from './s-lazy-image/index';
 export type { SLazyImageProps } from './s-lazy-image/index';
 export * from './hooks';

package/dist/main.js

@@ -1,11 +1,11 @@
 import { default as t } from "./s-autocomplete/s-autocomplete.js";
 import { default as f } from "./s-button/s-button.js";
-import { default as p } from "./s-button-link/s-button-link.js";
+import { default as m } from "./s-button-link/s-button-link.js";
 import { default as s } from "./s-text-editor/s-text-editor.js";
 import "./s-text-editor/s-text-editor-toolbar.js";
 import { default as S } from "./s-checkbox/s-checkbox.js";
 import { default as u } from "./s-chip/s-chip.js";
-import { default as n } from "./s-chips/s-chips.js";
+import { default as g } from "./s-chips/s-chips.js";
 import { default as c } from "./s-data-table/s-data-table.js";
 import { DialogConfirmProvider as P, default as T, useDialogConfirm as v } from "./s-dialog-confirm/s-dialog-confirm.js";
 import { DialogMessageProvider as M, default as b, useDialogMessage as k } from "./s-dialog-message/s-dialog-message.js";
@@ -25,40 +25,40 @@ import { default as Z } from "./s-select/s-select.js";
 import { default as $ } from "./s-skeleton/s-skeleton.js";
 import { default as oe } from "./s-tip/s-tip.js";
 import { default as te } from "./s-text-truncation/s-text-truncation.js";
-import { default as fe, SnackbarMessageProvider as le, useSnackbarMessage as pe } from "./s-snackbar-message/s-snackbar-message.js";
+import { default as fe, SnackbarMessageProvider as le, useSnackbarMessage as me } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as se } from "./s-form/s-form.js";
 import { SSmartTextField as Se } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as ue } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as ne, SStripeExpiry as ge, SStripeNumber as ce, StripeTextField as De } from "./s-stripe/s-stripe.js";
+import { SStripeCVC as ge, SStripeExpiry as ne, SStripeNumber as ce, StripeTextField as De } from "./s-stripe/s-stripe.js";
 import { default as Te } from "./s-theme-provider/s-theme-provider.js";
 import { default as Ce } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as be } from "./s-date-picker/s-date-picker.js";
-import { default as ye } from "./s-localization-provider/s-localization-provider.js";
-import { default as Ie } from "./s-gradient-icon/s-gradient-icon.js";
+import { default as Ie } from "./s-localization-provider/s-localization-provider.js";
+import { default as ye } from "./s-gradient-icon/s-gradient-icon.js";
 import { default as Be } from "./s-glow-button/s-glow-button.js";
 import { default as ze } from "./s-moving-border/s-moving-border.js";
 import { default as Ge } from "./s-copyable-text/s-copyable-text.js";
-import { GalleryModal as je, MediaItem as we, default as Ae } from "./s-interactive-gallery/s-interactive-gallery.js";
-import { default as Ve } from "./s-lazy-image/s-lazy-image.js";
-import { useDialog as He } from "./hooks/use-dialog.js";
-import { usePopover as Oe } from "./hooks/use-popover.js";
-import { formatDatePosted as Re } from "./utils/dayjs.js";
-import { bytesToSize as We } from "./utils/bytes-to-size.js";
-import { LogLevel as Ye, Logger as Ze, createLogger as _e, logger as $e } from "./utils/logger.js";
-import { default as oo } from "dayjs";
+import { MediaItem as je, default as we } from "./s-interactive-gallery/s-interactive-gallery.js";
+import { default as Ke } from "./s-image-modal/s-image-modal.js";
+import { default as qe } from "./s-lazy-image/s-lazy-image.js";
+import { useDialog as Je } from "./hooks/use-dialog.js";
+import { usePopover as Qe } from "./hooks/use-popover.js";
+import { formatDatePosted as Ue } from "./utils/dayjs.js";
+import { bytesToSize as Xe } from "./utils/bytes-to-size.js";
+import { LogLevel as Ze, Logger as _e, createLogger as $e, logger as eo } from "./utils/logger.js";
+import { default as ro } from "dayjs";
 export {
   P as DialogConfirmProvider,
   M as DialogMessageProvider,
-  je as GalleryModal,
-  Ye as LogLevel,
-  Ze as Logger,
-  we as MediaItem,
+  Ze as LogLevel,
+  _e as Logger,
+  je as MediaItem,
   t as SAutocomplete,
   f as SButton,
-  p as SButtonLink,
+  m as SButtonLink,
   S as SCheckbox,
   u as SChip,
-  n as SChips,
+  g as SChips,
   ue as SCopilotKitProvider,
   Ge as SCopyableText,
   c as SDataTable,
@@ -73,13 +73,14 @@ export {
   N as SFileIcon,
   se as SForm,
   Be as SGlowButton,
-  Ie as SGradientIcon,
+  ye as SGradientIcon,
   w as SI18nProvider,
   K as SIconButton,
-  Ae as SInteractiveGallery,
+  Ke as SImageModal,
+  we as SInteractiveGallery,
   q as SLabel,
-  Ve as SLazyImage,
-  ye as SLocalizationProvider,
+  qe as SLazyImage,
+  Ie as SLocalizationProvider,
   ze as SMovingBorder,
   J as SMultiSelect,
   Q as SNoSsr,
@@ -88,8 +89,8 @@ export {
   $ as SSkeleton,
   Se as SSmartTextField,
   fe as SSnackbarMessage,
-  ne as SStripeCVC,
-  ge as SStripeExpiry,
+  ge as SStripeCVC,
+  ne as SStripeExpiry,
   ce as SStripeNumber,
   s as STextEditor,
   U as STextField,
@@ -98,14 +99,14 @@ export {
   oe as STip,
   le as SnackbarMessageProvider,
   De as StripeTextField,
-  We as bytesToSize,
-  _e as createLogger,
-  oo as dayjs,
-  Re as formatDatePosted,
-  $e as logger,
-  He as useDialog,
+  Xe as bytesToSize,
+  $e as createLogger,
+  ro as dayjs,
+  Ue as formatDatePosted,
+  eo as logger,
+  Je as useDialog,
   v as useDialogConfirm,
   k as useDialogMessage,
-  Oe as usePopover,
-  pe as useSnackbarMessage
+  Qe as usePopover,
+  me as useSnackbarMessage
 };

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

@@ -0,0 +1,3 @@
+export { default } from './s-image-modal';
+export type { SImageModalProps, MediaItemType } from './s-image-modal';
+export { DefaultMediaItem } from './s-image-modal';

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

@@ -0,0 +1,5 @@
+import { DefaultMediaItem as a, default as f } from "./s-image-modal.js";
+export {
+  a as DefaultMediaItem,
+  f as default
+};

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

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

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

@@ -0,0 +1,75 @@
+import { default as React } from 'react';
+/**
+ * Interface for individual media items (images/videos) in the modal
+ */
+export interface MediaItemType {
+    /** Unique identifier for the media item */
+    id: string;
+    /** Type of media ('image' or 'video') */
+    type: string;
+    /** Optional title displayed in overlays */
+    title?: string;
+    /** Optional description displayed in overlays */
+    desc?: string;
+    /** URL source for the media */
+    url: string;
+    /** Grid column span for layout (defaults to 1) */
+    colSpan?: number;
+    /** Grid row span for layout (defaults to 2) */
+    rowSpan?: number;
+}
+/**
+ * Props for SImageModal component
+ */
+export interface SImageModalProps {
+    /** Currently selected media item to display */
+    selectedItem?: MediaItemType | null;
+    /** Whether the modal is open */
+    isOpen: boolean;
+    /** Function to close the modal */
+    onClose: () => void;
+    /** Function to change the selected item (for navigation) */
+    onItemChange?: (item: MediaItemType) => void;
+    /** Array of all media items for navigation (optional - if provided, enables prev/next navigation) */
+    mediaItems?: MediaItemType[];
+    /** Custom component to render media items */
+    renderMediaItem?: (item: MediaItemType, onClick?: () => void) => React.ReactNode;
+    /** Whether to show navigation arrows */
+    showNavigation?: boolean;
+    /** Whether to show the thumbnail dock */
+    showThumbnailDock?: boolean;
+    /** Whether to show the item counter */
+    showCounter?: boolean;
+    /** Custom modal styling */
+    modalSx?: any;
+}
+/**
+ * Default MediaItem renderer for images and videos
+ */
+export declare const DefaultMediaItem: React.FC<{
+    item: MediaItemType;
+    onClick?: () => void;
+    style?: React.CSSProperties;
+    objectFit?: string;
+    disableVideoControls?: boolean;
+}>;
+/**
+ * SImageModal - A reusable full-screen modal for displaying media items with navigation features.
+ *
+ * Key features:
+ * - Full-screen modal with backdrop blur
+ * - Keyboard navigation (arrow keys, escape)
+ * - Previous/next navigation buttons (when mediaItems provided)
+ * - Draggable thumbnail dock with stacked layout (optional)
+ * - Animated transitions with Framer Motion
+ * - Item counter display (optional)
+ * - Responsive design for all screen sizes
+ * - Caption overlays with gradient backgrounds
+ * - Custom media item rendering support
+ * - Advanced z-index management for proper layering
+ *
+ * @param props - SImageModalProps with modal state and navigation handlers
+ * @returns JSX.Element - Full-screen image modal
+ */
+declare const SImageModal: React.FC<SImageModalProps>;
+export default SImageModal;

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

@@ -0,0 +1,404 @@
+import { j as i } from "../jsx-runtime-DywqP_6a.js";
+import { useState as k, useEffect as z } from "react";
+import { Modal as A, Box as l, Paper as b, Typography as w, IconButton as m, Stack as T } from "@mui/material";
+import { motion as u, AnimatePresence as F } from "framer-motion";
+import { C as M } from "../Close-C1lLcTQu.js";
+import { c as P } from "../createSvgIcon-9XY7lJan.js";
+const $ = P(/* @__PURE__ */ i.jsx("path", {
+  d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+}), "ChevronLeft"), B = P(/* @__PURE__ */ i.jsx("path", {
+  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+}), "ChevronRight"), I = ({ item: s, onClick: c, style: r = {}, objectFit: e = "contain", disableVideoControls: n = !1 }) => s.type === "video" ? /* @__PURE__ */ i.jsx(
+  l,
+  {
+    component: "video",
+    onClick: c,
+    controls: !n,
+    sx: {
+      width: "100%",
+      height: "100%",
+      objectFit: e,
+      bgcolor: "background.paper",
+      ...r
+    },
+    children: /* @__PURE__ */ i.jsx("source", { src: s.url, type: "video/mp4" })
+  }
+) : /* @__PURE__ */ i.jsx(
+  l,
+  {
+    component: "img",
+    src: s.url,
+    alt: s.title || "",
+    onClick: c,
+    sx: {
+      width: "100%",
+      height: "100%",
+      objectFit: e,
+      bgcolor: "background.paper",
+      ...r
+    }
+  }
+), V = ({
+  selectedItem: s,
+  isOpen: c,
+  onClose: r,
+  onItemChange: e,
+  mediaItems: n = [],
+  renderMediaItem: f,
+  showNavigation: E = !0,
+  showThumbnailDock: S = !0,
+  showCounter: R = !0,
+  modalSx: C = {}
+}) => {
+  const [v, L] = k({ x: 0, y: 0 }), [D, h] = k(s || null), o = s || D;
+  z(() => {
+    s && h(s);
+  }, [s]);
+  const p = E && n.length > 1 && o, a = o ? n.findIndex((t) => t.id === o.id) : -1, g = n.length, y = () => {
+    if (p && a > 0) {
+      const t = n[a - 1];
+      e ? e(t) : h(t);
+    }
+  }, j = () => {
+    if (p && a < g - 1) {
+      const t = n[a + 1];
+      e ? e(t) : h(t);
+    }
+  };
+  return z(() => {
+    const t = (d) => {
+      if (c)
+        switch (d.key) {
+          case "ArrowLeft":
+            y();
+            break;
+          case "ArrowRight":
+            j();
+            break;
+          case "Escape":
+            r();
+            break;
+        }
+    };
+    return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
+  }, [c, a, g, p]), !c || !o ? null : /* @__PURE__ */ i.jsx(
+    A,
+    {
+      open: c,
+      onClose: r,
+      sx: {
+        zIndex: (t) => t.zIndex.modal + 100,
+        ...C
+      },
+      slotProps: {
+        backdrop: {
+          sx: {
+            backdropFilter: "blur(8px)",
+            zIndex: (t) => t.zIndex.modal + 99
+          }
+        }
+      },
+      children: /* @__PURE__ */ i.jsxs(l, { children: [
+        /* @__PURE__ */ i.jsx(
+          u.div,
+          {
+            initial: { scale: 0.98 },
+            animate: { scale: 1 },
+            exit: { scale: 0.98 },
+            transition: { type: "spring", stiffness: 400, damping: 30 },
+            children: /* @__PURE__ */ i.jsxs(
+              b,
+              {
+                elevation: 3,
+                sx: {
+                  position: "fixed",
+                  inset: 0,
+                  width: "100%",
+                  minHeight: "100vh",
+                  borderRadius: 0,
+                  overflow: "hidden",
+                  zIndex: (t) => t.zIndex.modal + 101
+                },
+                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(F, { mode: "wait", children: /* @__PURE__ */ i.jsx(
+                            u.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: r,
+                              children: /* @__PURE__ */ i.jsxs(
+                                b,
+                                {
+                                  elevation: 6,
+                                  sx: {
+                                    position: "relative",
+                                    width: "100%",
+                                    aspectRatio: "16 / 9",
+                                    maxWidth: { xs: "95%", sm: "85%", md: 960 },
+                                    height: "70vh",
+                                    borderRadius: 2,
+                                    overflow: "hidden"
+                                  },
+                                  children: [
+                                    f ? f(o, r) : /* @__PURE__ */ i.jsx(I, { item: o, onClick: r }),
+                                    (o.title || o.desc) && /* @__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: [
+                                          o.title && /* @__PURE__ */ i.jsx(w, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: o.title }),
+                                          o.desc && /* @__PURE__ */ i.jsx(w, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: o.desc })
+                                        ]
+                                      }
+                                    )
+                                  ]
+                                }
+                              )
+                            },
+                            o.id
+                          ) })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ i.jsx(
+                    m,
+                    {
+                      "aria-label": "Close",
+                      onClick: r,
+                      sx: {
+                        position: "absolute",
+                        top: { xs: 8, sm: 10, md: 12 },
+                        right: { xs: 8, sm: 10, md: 12 },
+                        zIndex: (t) => t.zIndex.modal + 102
+                      },
+                      children: /* @__PURE__ */ i.jsx(M, {})
+                    }
+                  ),
+                  R && p && /* @__PURE__ */ i.jsxs(
+                    l,
+                    {
+                      sx: {
+                        position: "absolute",
+                        top: { xs: 8, sm: 10, md: 12 },
+                        left: { xs: 8, sm: 10, md: 12 },
+                        zIndex: (t) => t.zIndex.modal + 102,
+                        padding: 1,
+                        px: 2,
+                        fontSize: { xs: 14, sm: 16 },
+                        color: "text.primary"
+                      },
+                      children: [
+                        a + 1,
+                        " / ",
+                        g
+                      ]
+                    }
+                  ),
+                  p && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+                    /* @__PURE__ */ i.jsx(
+                      m,
+                      {
+                        "aria-label": "Previous image",
+                        onClick: (t) => {
+                          t.stopPropagation(), y();
+                        },
+                        disabled: a === 0,
+                        sx: {
+                          position: "absolute",
+                          left: { xs: 8, sm: 10, md: 12 },
+                          top: "50%",
+                          transform: "translateY(-50%)",
+                          zIndex: (t) => t.zIndex.modal + 102,
+                          "&:disabled": {
+                            opacity: 0.5
+                          }
+                        },
+                        children: /* @__PURE__ */ i.jsx($, {})
+                      }
+                    ),
+                    /* @__PURE__ */ i.jsx(
+                      m,
+                      {
+                        "aria-label": "Next image",
+                        onClick: (t) => {
+                          t.stopPropagation(), j();
+                        },
+                        disabled: a === g - 1,
+                        sx: {
+                          position: "absolute",
+                          right: { xs: 8, sm: 10, md: 12 },
+                          top: "50%",
+                          transform: "translateY(-50%)",
+                          zIndex: (t) => t.zIndex.modal + 102,
+                          "&:disabled": {
+                            opacity: 0.5
+                          }
+                        },
+                        children: /* @__PURE__ */ i.jsx(B, {})
+                      }
+                    )
+                  ] })
+                ]
+              }
+            )
+          }
+        ),
+        S && p && n.length > 1 && /* @__PURE__ */ i.jsx(
+          u.div,
+          {
+            drag: !0,
+            dragMomentum: !1,
+            dragElastic: 0.1,
+            initial: !1,
+            animate: { x: v.x, y: v.y },
+            onDragEnd: (t, d) => {
+              L((x) => ({ x: x.x + d.offset.x, y: x.y + d.offset.y }));
+            },
+            style: {
+              position: "fixed",
+              zIndex: 1502,
+              left: "50%",
+              bottom: 16,
+              transform: "translateX(-50%)",
+              touchAction: "none"
+            },
+            children: /* @__PURE__ */ i.jsx(
+              b,
+              {
+                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(T, { direction: "row", alignItems: "center", spacing: -1.5, children: n.map((t, d) => /* @__PURE__ */ i.jsxs(
+                  u.div,
+                  {
+                    onClick: (x) => {
+                      x.stopPropagation(), e ? e(t) : h(t);
+                    },
+                    style: {
+                      position: "relative",
+                      width: 40,
+                      height: 40,
+                      borderRadius: 10,
+                      overflow: "hidden",
+                      flexShrink: 0,
+                      zIndex: o.id === t.id ? 30 : n.length - d,
+                      border: o.id === t.id ? "2px solid" : void 0,
+                      borderColor: o.id === t.id ? "divider" : void 0,
+                      cursor: "pointer"
+                    },
+                    initial: { rotate: d % 2 === 0 ? -15 : 15 },
+                    animate: {
+                      scale: o.id === t.id ? 1.2 : 1,
+                      rotate: o.id === t.id ? 0 : d % 2 === 0 ? -15 : 15,
+                      y: o.id === t.id ? -8 : 0
+                    },
+                    whileHover: {
+                      scale: 1.3,
+                      rotate: 0,
+                      y: -10,
+                      transition: { type: "spring", stiffness: 400, damping: 25 }
+                    },
+                    children: [
+                      f ? f(t, () => {
+                        e ? e(t) : h(t);
+                      }) : /* @__PURE__ */ i.jsx(
+                        I,
+                        {
+                          item: t,
+                          objectFit: "cover",
+                          style: {
+                            width: "100%",
+                            height: "100%",
+                            // Disable pointer events for videos in thumbnails to ensure parent click handler works
+                            pointerEvents: t.type === "video" ? "none" : "auto"
+                          },
+                          disableVideoControls: !0
+                        }
+                      ),
+                      /* @__PURE__ */ i.jsx(
+                        l,
+                        {
+                          sx: {
+                            position: "absolute",
+                            inset: 0,
+                            background: (x) => `linear-gradient(to bottom, transparent, ${x.palette.action.hover}, ${x.palette.action.selected})`,
+                            pointerEvents: "none"
+                          }
+                        }
+                      ),
+                      o.id === t.id && /* @__PURE__ */ i.jsx(
+                        u.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
+                )) })
+              }
+            )
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  I as DefaultMediaItem,
+  V as default
+};

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

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

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

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