@solostylist/ui-kit 1.0.87 → 1.0.88

package/dist/ChevronRight-D5BryGH5.js

@@ -0,0 +1,11 @@
+import { j as o } from "./jsx-runtime-DywqP_6a.js";
+import { c as t } from "./createSvgIcon-vJH0FaMW.js";
+const n = t(/* @__PURE__ */ o.jsx("path", {
+  d: "M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z"
+}), "ChevronLeft"), s = t(/* @__PURE__ */ o.jsx("path", {
+  d: "M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"
+}), "ChevronRight");
+export {
+  n as C,
+  s as a
+};

package/dist/main.d.ts

@@ -83,5 +83,7 @@ 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 { default as SImageComparison } from './s-image-comparison/index';
+export type { SImageComparisonProps } from './s-image-comparison/index';
 export * from './hooks';
 export * from './utils';

package/dist/main.js

@@ -1,15 +1,15 @@
 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-chat-input/s-chat-input.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 u } from "./s-checkbox/s-checkbox.js";
 import { default as n } from "./s-chip/s-chip.js";
 import { default as c } from "./s-chips/s-chips.js";
-import { default as P } from "./s-data-table/s-data-table.js";
-import { DialogConfirmProvider as v, default as C, useDialogConfirm as M } from "./s-dialog-confirm/s-dialog-confirm.js";
-import { DialogMessageProvider as I, default as k, useDialogMessage as L } from "./s-dialog-message/s-dialog-message.js";
+import { default as C } from "./s-data-table/s-data-table.js";
+import { DialogConfirmProvider as T, default as v, useDialogConfirm as I } from "./s-dialog-confirm/s-dialog-confirm.js";
+import { DialogMessageProvider as b, default as k, useDialogMessage as L } from "./s-dialog-message/s-dialog-message.js";
 import { default as F } from "./s-error/s-error.js";
 import { default as B } from "./s-empty/s-empty.js";
 import { default as E } from "./s-dialog/s-dialog.js";
@@ -26,13 +26,13 @@ import { default as $ } from "./s-select/s-select.js";
 import { default as oe } from "./s-skeleton/s-skeleton.js";
 import { default as te } from "./s-tip/s-tip.js";
 import { default as fe } from "./s-text-truncation/s-text-truncation.js";
-import { default as pe, SnackbarMessageProvider as me, useSnackbarMessage as se } from "./s-snackbar-message/s-snackbar-message.js";
+import { default as me, SnackbarMessageProvider as pe, useSnackbarMessage as se } from "./s-snackbar-message/s-snackbar-message.js";
 import { default as Se } from "./s-form/s-form.js";
 import { SSmartTextField as ue } from "./s-smart-text-field/s-smart-text-field.js";
 import { SCopilotKitProvider as ne } from "./s-copilot-kit-provider/s-copilot-kit-provider.js";
-import { SStripeCVC as ce, SStripeExpiry as De, SStripeNumber as Pe, StripeTextField as Te } from "./s-stripe/s-stripe.js";
-import { default as Ce } from "./s-theme-provider/s-theme-provider.js";
-import { default as be } from "./s-datetime-picker/s-datetime-picker.js";
+import { SStripeCVC as ce, SStripeExpiry as De, SStripeNumber as Ce, StripeTextField as Pe } from "./s-stripe/s-stripe.js";
+import { default as ve } from "./s-theme-provider/s-theme-provider.js";
+import { default as Me } from "./s-datetime-picker/s-datetime-picker.js";
 import { default as ke } from "./s-date-picker/s-date-picker.js";
 import { default as ye } from "./s-localization-provider/s-localization-provider.js";
 import { default as he } from "./s-gradient-icon/s-gradient-icon.js";
@@ -42,32 +42,33 @@ import { default as je } from "./s-copyable-text/s-copyable-text.js";
 import { MediaItem as Ae, default as Ke } from "./s-interactive-gallery/s-interactive-gallery.js";
 import { default as qe } from "./s-image-modal/s-image-modal.js";
 import { default as Je } from "./s-lazy-image/s-lazy-image.js";
-import { useDialog as Qe } from "./hooks/use-dialog.js";
-import { usePopover as Ue } from "./hooks/use-popover.js";
-import { formatDatePosted as Xe } from "./utils/dayjs.js";
-import { bytesToSize as Ze } from "./utils/bytes-to-size.js";
-import { LogLevel as $e, Logger as eo, createLogger as oo, logger as ro } from "./utils/logger.js";
-import { default as ao } from "dayjs";
+import { default as Qe } from "./s-image-comparison/s-image-comparison.js";
+import { useDialog as Ue } from "./hooks/use-dialog.js";
+import { usePopover as Xe } from "./hooks/use-popover.js";
+import { formatDatePosted as Ze } from "./utils/dayjs.js";
+import { bytesToSize as $e } from "./utils/bytes-to-size.js";
+import { LogLevel as oo, Logger as ro, createLogger as to, logger as ao } from "./utils/logger.js";
+import { default as lo } from "dayjs";
 export {
-  v as DialogConfirmProvider,
-  I as DialogMessageProvider,
-  $e as LogLevel,
-  eo as Logger,
+  T as DialogConfirmProvider,
+  b as DialogMessageProvider,
+  oo as LogLevel,
+  ro as Logger,
   Ae as MediaItem,
   t as SAutocomplete,
   f as SButton,
-  p as SButtonLink,
+  m as SButtonLink,
   s as SChatInput,
   u as SCheckbox,
   n as SChip,
   c as SChips,
   ne as SCopilotKitProvider,
   je as SCopyableText,
-  P as SDataTable,
+  C as SDataTable,
   ke as SDatePicker,
-  be as SDateTimePicker,
+  Me as SDateTimePicker,
   E as SDialog,
-  C as SDialogConfirm,
+  v as SDialogConfirm,
   k as SDialogMessage,
   B as SEmpty,
   F as SError,
@@ -78,6 +79,7 @@ export {
   he as SGradientIcon,
   K as SI18nProvider,
   q as SIconButton,
+  Qe as SImageComparison,
   qe as SImageModal,
   Ke as SInteractiveGallery,
   J as SLabel,
@@ -90,25 +92,25 @@ export {
   $ as SSelect,
   oe as SSkeleton,
   ue as SSmartTextField,
-  pe as SSnackbarMessage,
+  me as SSnackbarMessage,
   ce as SStripeCVC,
   De as SStripeExpiry,
-  Pe as SStripeNumber,
+  Ce as SStripeNumber,
   S as STextEditor,
   X as STextField,
   fe as STextTruncation,
-  Ce as SThemeProvider,
+  ve as SThemeProvider,
   te as STip,
-  me as SnackbarMessageProvider,
-  Te as StripeTextField,
-  Ze as bytesToSize,
-  oo as createLogger,
-  ao as dayjs,
-  Xe as formatDatePosted,
-  ro as logger,
-  Qe as useDialog,
-  M as useDialogConfirm,
+  pe as SnackbarMessageProvider,
+  Pe as StripeTextField,
+  $e as bytesToSize,
+  to as createLogger,
+  lo as dayjs,
+  Ze as formatDatePosted,
+  ao as logger,
+  Ue as useDialog,
+  I as useDialogConfirm,
   L as useDialogMessage,
-  Ue as usePopover,
+  Xe as usePopover,
   se as useSnackbarMessage
 };

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

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

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

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

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

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

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

@@ -0,0 +1,11 @@
+import { BoxProps } from '@mui/material';
+import * as React from 'react';
+export interface SImageComparisonProps extends BoxProps {
+    leftImage: string;
+    rightImage: string;
+    altLeft?: string;
+    altRight?: string;
+    initialPosition?: number;
+}
+declare const SImageComparison: React.ForwardRefExoticComponent<Omit<SImageComparisonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SImageComparison;

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

@@ -0,0 +1,155 @@
+import { j as e } from "../jsx-runtime-DywqP_6a.js";
+import * as s from "react";
+import { C as y, a as I } from "../ChevronRight-D5BryGH5.js";
+import { Box as o, IconButton as L } from "@mui/material";
+const R = s.forwardRef(
+  ({ sx: f, leftImage: v, rightImage: g, altLeft: b = "Left image", altRight: w = "Right image", initialPosition: j = 50, ...E }, i) => {
+    const [r, S] = s.useState(j), [n, d] = s.useState(!1), l = s.useRef(null), u = (t) => {
+      if (!l.current) return;
+      const p = l.current.getBoundingClientRect();
+      let c = (t - p.left) / p.width * 100;
+      c = Math.max(0, Math.min(100, c)), S(c);
+    }, m = (t) => {
+      n && u(t.clientX);
+    }, h = (t) => {
+      n && u(t.touches[0].clientX);
+    }, x = () => {
+      d(!0);
+    }, a = () => {
+      d(!1);
+    };
+    return s.useEffect(() => (n ? (document.addEventListener("mousemove", m), document.addEventListener("touchmove", h), document.addEventListener("mouseup", a), document.addEventListener("touchend", a), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+      document.removeEventListener("mousemove", m), document.removeEventListener("touchmove", h), document.removeEventListener("mouseup", a), document.removeEventListener("touchend", a), document.body.style.cursor = "";
+    }), [n]), /* @__PURE__ */ e.jsxs(
+      o,
+      {
+        ref: (t) => {
+          l.current = t, typeof i == "function" ? i(t) : i && (i.current = t);
+        },
+        sx: {
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          overflow: "hidden",
+          userSelect: "none",
+          "&:hover .slider-handle": {
+            transform: "translate(-50%, -50%) scale(1.05)"
+          },
+          ...f
+        },
+        onMouseDown: x,
+        onTouchStart: x,
+        ...E,
+        children: [
+          /* @__PURE__ */ e.jsx(
+            o,
+            {
+              component: "img",
+              src: g,
+              alt: w,
+              sx: {
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                objectFit: "cover",
+                pointerEvents: "none"
+              },
+              draggable: !1
+            }
+          ),
+          /* @__PURE__ */ e.jsx(
+            o,
+            {
+              sx: {
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                overflow: "hidden",
+                pointerEvents: "none",
+                clipPath: `polygon(0 0, ${r}% 0, ${r}% 100%, 0 100%)`
+              },
+              children: /* @__PURE__ */ e.jsx(
+                o,
+                {
+                  component: "img",
+                  src: v,
+                  alt: b,
+                  sx: {
+                    width: "100%",
+                    height: "100%",
+                    objectFit: "cover"
+                  },
+                  draggable: !1
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ e.jsxs(
+            o,
+            {
+              sx: {
+                position: "absolute",
+                top: 0,
+                height: "100%",
+                width: "4px",
+                cursor: "ew-resize",
+                left: `calc(${r}% - 2px)`
+              },
+              children: [
+                /* @__PURE__ */ e.jsx(
+                  o,
+                  {
+                    sx: {
+                      position: "absolute",
+                      inset: "0 0 0 0",
+                      width: "4px",
+                      bgcolor: "divider",
+                      backdropFilter: "blur(4px)"
+                    }
+                  }
+                ),
+                /* @__PURE__ */ e.jsx(
+                  L,
+                  {
+                    className: "slider-handle",
+                    sx: {
+                      position: "absolute",
+                      top: "50%",
+                      left: "50%",
+                      transform: "translate(-50%, -50%)",
+                      width: 48,
+                      height: 48,
+                      backdropFilter: "blur(10px)",
+                      boxShadow: 3,
+                      transition: "all 0.3s ease-in-out",
+                      ...n && {
+                        transform: "translate(-50%, -50%) scale(1.05)",
+                        boxShadow: 6
+                      }
+                    },
+                    role: "slider",
+                    "aria-valuenow": r,
+                    "aria-valuemin": 0,
+                    "aria-valuemax": 100,
+                    "aria-orientation": "horizontal",
+                    "aria-label": "Image comparison slider",
+                    children: /* @__PURE__ */ e.jsxs(o, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ e.jsx(y, { sx: { fontSize: 20 } }),
+                      /* @__PURE__ */ e.jsx(I, { sx: { fontSize: 20 } })
+                    ] })
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+R.displayName = "SImageComparison";
+export {
+  R as default
+};

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

@@ -1,74 +1,70 @@
-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-CKpTrk7X.js";
-import { c as P } from "../createSvgIcon-vJH0FaMW.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,
+import { j as o } from "../jsx-runtime-DywqP_6a.js";
+import { useState as k, useEffect as w } from "react";
+import { Modal as A, Box as d, Paper as b, Typography as z, IconButton as m, Stack as L } from "@mui/material";
+import { motion as h, AnimatePresence as T } from "framer-motion";
+import { C as F } from "../Close-CKpTrk7X.js";
+import { C as $, a as B } from "../ChevronRight-D5BryGH5.js";
+const I = ({ item: s, onClick: l, style: x = {}, objectFit: e = "contain", disableVideoControls: n = !1 }) => s.type === "video" ? /* @__PURE__ */ o.jsx(
+  d,
   {
     component: "video",
-    onClick: c,
+    onClick: l,
     controls: !n,
     sx: {
       width: "100%",
       height: "100%",
       objectFit: e,
       bgcolor: "background.paper",
-      ...r
+      ...x
     },
-    children: /* @__PURE__ */ i.jsx("source", { src: s.url, type: "video/mp4" })
+    children: /* @__PURE__ */ o.jsx("source", { src: s.url, type: "video/mp4" })
   }
-) : /* @__PURE__ */ i.jsx(
-  l,
+) : /* @__PURE__ */ o.jsx(
+  d,
   {
     component: "img",
     src: s.url,
     alt: s.title || "",
-    onClick: c,
+    onClick: l,
     sx: {
       width: "100%",
       height: "100%",
       objectFit: e,
       bgcolor: "background.paper",
-      ...r
+      ...x
     }
   }
-), V = ({
+), M = ({
   selectedItem: s,
-  isOpen: c,
-  onClose: r,
+  isOpen: l,
+  onClose: x,
   onItemChange: e,
   mediaItems: n = [],
   renderMediaItem: f,
-  showNavigation: E = !0,
-  showThumbnailDock: S = !0,
-  showCounter: R = !0,
+  showNavigation: P = !0,
+  showThumbnailDock: E = !0,
+  showCounter: S = !0,
   modalSx: C = {}
 }) => {
-  const [v, L] = k({ x: 0, y: 0 }), [D, h] = k(s || null), o = s || D;
-  z(() => {
-    s && h(s);
+  const [v, R] = k({ x: 0, y: 0 }), [D, u] = k(s || null), i = s || D;
+  w(() => {
+    s && u(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);
+  const p = P && n.length > 1 && i, r = i ? n.findIndex((t) => t.id === i.id) : -1, g = n.length, y = () => {
+    if (p && r > 0) {
+      const t = n[r - 1];
+      e ? e(t) : u(t);
     }
   }, j = () => {
-    if (p && a < g - 1) {
-      const t = n[a + 1];
-      e ? e(t) : h(t);
+    if (p && r < g - 1) {
+      const t = n[r + 1];
+      e ? e(t) : u(t);
     }
   };
-  return z(() => {
-    const t = (d) => {
-      if (c)
-        switch (d.key) {
+  return w(() => {
+    const t = (a) => {
+      if (l)
+        switch (a.key) {
           case "ArrowLeft":
             y();
             break;
@@ -76,16 +72,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
             j();
             break;
           case "Escape":
-            r();
+            x();
             break;
         }
     };
     return document.addEventListener("keydown", t), () => document.removeEventListener("keydown", t);
-  }, [c, a, g, p]), !c || !o ? null : /* @__PURE__ */ i.jsx(
+  }, [l, r, g, p]), !l || !i ? null : /* @__PURE__ */ o.jsx(
     A,
     {
-      open: c,
-      onClose: r,
+      open: l,
+      onClose: x,
       sx: {
         zIndex: (t) => t.zIndex.modal + 100,
         ...C
@@ -98,15 +94,15 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
           }
         }
       },
-      children: /* @__PURE__ */ i.jsxs(l, { children: [
-        /* @__PURE__ */ i.jsx(
-          u.div,
+      children: /* @__PURE__ */ o.jsxs(d, { children: [
+        /* @__PURE__ */ o.jsx(
+          h.div,
           {
             initial: { scale: 0.98 },
             animate: { scale: 1 },
             exit: { scale: 0.98 },
             transition: { type: "spring", stiffness: 400, damping: 30 },
-            children: /* @__PURE__ */ i.jsxs(
+            children: /* @__PURE__ */ o.jsxs(
               b,
               {
                 elevation: 3,
@@ -120,16 +116,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                   zIndex: (t) => t.zIndex.modal + 101
                 },
                 children: [
-                  /* @__PURE__ */ i.jsx(
-                    l,
+                  /* @__PURE__ */ o.jsx(
+                    d,
                     {
                       sx: {
                         height: "100%",
                         display: "flex",
                         flexDirection: "column"
                       },
-                      children: /* @__PURE__ */ i.jsx(
-                        l,
+                      children: /* @__PURE__ */ o.jsx(
+                        d,
                         {
                           sx: {
                             flex: 1,
@@ -139,8 +135,8 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                             justifyContent: "center",
                             bgcolor: "background.default"
                           },
-                          children: /* @__PURE__ */ i.jsx(F, { mode: "wait", children: /* @__PURE__ */ i.jsx(
-                            u.div,
+                          children: /* @__PURE__ */ o.jsx(T, { mode: "wait", children: /* @__PURE__ */ o.jsx(
+                            h.div,
                             {
                               style: { position: "relative" },
                               initial: { y: 20, scale: 0.97 },
@@ -150,11 +146,11 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                 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(
+                              children: /* @__PURE__ */ o.jsxs(
                                 b,
                                 {
                                   elevation: 6,
+                                  onClick: (t) => t.stopPropagation(),
                                   sx: {
                                     position: "relative",
                                     width: "100%",
@@ -165,9 +161,9 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                     overflow: "hidden"
                                   },
                                   children: [
-                                    f ? f(o, r) : /* @__PURE__ */ i.jsx(I, { item: o, onClick: r }),
-                                    (o.title || o.desc) && /* @__PURE__ */ i.jsxs(
-                                      l,
+                                    f ? f(i) : /* @__PURE__ */ o.jsx(I, { item: i }),
+                                    (i.title || i.desc) && /* @__PURE__ */ o.jsxs(
+                                      d,
                                       {
                                         sx: {
                                           position: "absolute",
@@ -180,8 +176,8 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                         },
                                         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 })
+                                          i.title && /* @__PURE__ */ o.jsx(z, { variant: "h6", sx: { fontWeight: 600, fontSize: { xs: 14, sm: 18, md: 20 } }, children: i.title }),
+                                          i.desc && /* @__PURE__ */ o.jsx(z, { variant: "body2", sx: { opacity: 0.8, mt: 0.5 }, children: i.desc })
                                         ]
                                       }
                                     )
@@ -189,28 +185,28 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                                 }
                               )
                             },
-                            o.id
+                            i.id
                           ) })
                         }
                       )
                     }
                   ),
-                  /* @__PURE__ */ i.jsx(
+                  /* @__PURE__ */ o.jsx(
                     m,
                     {
                       "aria-label": "Close",
-                      onClick: r,
+                      onClick: x,
                       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, {})
+                      children: /* @__PURE__ */ o.jsx(F, {})
                     }
                   ),
-                  R && p && /* @__PURE__ */ i.jsxs(
-                    l,
+                  S && p && /* @__PURE__ */ o.jsxs(
+                    d,
                     {
                       sx: {
                         position: "absolute",
@@ -223,21 +219,21 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                         color: "text.primary"
                       },
                       children: [
-                        a + 1,
+                        r + 1,
                         " / ",
                         g
                       ]
                     }
                   ),
-                  p && /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
-                    /* @__PURE__ */ i.jsx(
+                  p && /* @__PURE__ */ o.jsxs(o.Fragment, { children: [
+                    /* @__PURE__ */ o.jsx(
                       m,
                       {
                         "aria-label": "Previous image",
                         onClick: (t) => {
                           t.stopPropagation(), y();
                         },
-                        disabled: a === 0,
+                        disabled: r === 0,
                         sx: {
                           position: "absolute",
                           left: { xs: 8, sm: 10, md: 12 },
@@ -248,17 +244,17 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                             opacity: 0.5
                           }
                         },
-                        children: /* @__PURE__ */ i.jsx($, {})
+                        children: /* @__PURE__ */ o.jsx($, {})
                       }
                     ),
-                    /* @__PURE__ */ i.jsx(
+                    /* @__PURE__ */ o.jsx(
                       m,
                       {
                         "aria-label": "Next image",
                         onClick: (t) => {
                           t.stopPropagation(), j();
                         },
-                        disabled: a === g - 1,
+                        disabled: r === g - 1,
                         sx: {
                           position: "absolute",
                           right: { xs: 8, sm: 10, md: 12 },
@@ -269,7 +265,7 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                             opacity: 0.5
                           }
                         },
-                        children: /* @__PURE__ */ i.jsx(B, {})
+                        children: /* @__PURE__ */ o.jsx(B, {})
                       }
                     )
                   ] })
@@ -278,16 +274,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
             )
           }
         ),
-        S && p && n.length > 1 && /* @__PURE__ */ i.jsx(
-          u.div,
+        E && p && n.length > 1 && /* @__PURE__ */ o.jsx(
+          h.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 }));
+            onDragEnd: (t, a) => {
+              R((c) => ({ x: c.x + a.offset.x, y: c.y + a.offset.y }));
             },
             style: {
               position: "fixed",
@@ -297,7 +293,7 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
               transform: "translateX(-50%)",
               touchAction: "none"
             },
-            children: /* @__PURE__ */ i.jsx(
+            children: /* @__PURE__ */ o.jsx(
               b,
               {
                 elevation: 8,
@@ -313,11 +309,11 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                   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,
+                children: /* @__PURE__ */ o.jsx(L, { direction: "row", alignItems: "center", spacing: -1.5, children: n.map((t, a) => /* @__PURE__ */ o.jsxs(
+                  h.div,
                   {
-                    onClick: (x) => {
-                      x.stopPropagation(), e ? e(t) : h(t);
+                    onClick: (c) => {
+                      c.stopPropagation(), e ? e(t) : u(t);
                     },
                     style: {
                       position: "relative",
@@ -326,16 +322,16 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                       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,
+                      zIndex: i.id === t.id ? 30 : n.length - a,
+                      border: i.id === t.id ? "2px solid" : void 0,
+                      borderColor: i.id === t.id ? "divider" : void 0,
                       cursor: "pointer"
                     },
-                    initial: { rotate: d % 2 === 0 ? -15 : 15 },
+                    initial: { rotate: a % 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
+                      scale: i.id === t.id ? 1.2 : 1,
+                      rotate: i.id === t.id ? 0 : a % 2 === 0 ? -15 : 15,
+                      y: i.id === t.id ? -8 : 0
                     },
                     whileHover: {
                       scale: 1.3,
@@ -345,8 +341,8 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                     },
                     children: [
                       f ? f(t, () => {
-                        e ? e(t) : h(t);
-                      }) : /* @__PURE__ */ i.jsx(
+                        e ? e(t) : u(t);
+                      }) : /* @__PURE__ */ o.jsx(
                         I,
                         {
                           item: t,
@@ -360,19 +356,19 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
                           disableVideoControls: !0
                         }
                       ),
-                      /* @__PURE__ */ i.jsx(
-                        l,
+                      /* @__PURE__ */ o.jsx(
+                        d,
                         {
                           sx: {
                             position: "absolute",
                             inset: 0,
-                            background: (x) => `linear-gradient(to bottom, transparent, ${x.palette.action.hover}, ${x.palette.action.selected})`,
+                            background: (c) => `linear-gradient(to bottom, transparent, ${c.palette.action.hover}, ${c.palette.action.selected})`,
                             pointerEvents: "none"
                           }
                         }
                       ),
-                      o.id === t.id && /* @__PURE__ */ i.jsx(
-                        u.div,
+                      i.id === t.id && /* @__PURE__ */ o.jsx(
+                        h.div,
                         {
                           layoutId: "activeGlow",
                           style: {
@@ -400,5 +396,5 @@ const $ = P(/* @__PURE__ */ i.jsx("path", {
 };
 export {
   I as DefaultMediaItem,
-  V as default
+  M as default
 };

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

@@ -1,55 +1,55 @@
 import { j as r } from "../jsx-runtime-DywqP_6a.js";
-import { useState as u, useEffect as y, useRef as w } from "react";
-import { Box as n, Paper as j, Typography as v } from "@mui/material";
-import { AnimatePresence as I, motion as x } from "framer-motion";
-import C from "../s-image-modal/s-image-modal.js";
-import S from "../s-lazy-image/s-lazy-image.js";
-const k = ({ item: s, sx: o, onClick: a }) => {
-  const e = w(null), [d, h] = u(!1), [p, t] = u(!0);
+import { useState as u, useId as j, useEffect as y, useRef as I } from "react";
+import { Box as s, Paper as C, Typography as x } from "@mui/material";
+import { AnimatePresence as S, motion as b } from "framer-motion";
+import k from "../s-image-modal/s-image-modal.js";
+import $ from "../s-lazy-image/s-lazy-image.js";
+const R = ({ item: a, sx: i, onClick: l }) => {
+  const e = I(null), [c, h] = u(!1), [p, d] = u(!0);
   return y(() => {
-    const i = {
+    const t = {
       root: null,
       rootMargin: "50px",
       // Start loading 50px before entering viewport
       threshold: 0.1
       // Trigger when 10% of video is visible
-    }, c = new IntersectionObserver((l) => {
-      l.forEach((f) => h(f.isIntersecting));
-    }, i);
-    return e.current && c.observe(e.current), () => {
-      e.current && c.unobserve(e.current);
+    }, o = new IntersectionObserver((n) => {
+      n.forEach((f) => h(f.isIntersecting));
+    }, t);
+    return e.current && o.observe(e.current), () => {
+      e.current && o.unobserve(e.current);
     };
   }, []), y(() => {
-    let i = !0;
-    return d ? (async () => {
-      if (!(!e.current || !d || !i))
+    let t = !0;
+    return c ? (async () => {
+      if (!(!e.current || !c || !t))
         try {
-          e.current.readyState >= 3 ? (t(!1), await e.current.play()) : (t(!0), await new Promise((l) => {
-            e.current && (e.current.oncanplay = () => l());
-          }), i && (t(!1), await e.current.play()));
-        } catch (l) {
-          console.warn("Video playback failed:", l);
+          e.current.readyState >= 3 ? (d(!1), await e.current.play()) : (d(!0), await new Promise((n) => {
+            e.current && (e.current.oncanplay = () => n());
+          }), t && (d(!1), await e.current.play()));
+        } catch (n) {
+          console.warn("Video playback failed:", n);
         }
     })() : e.current && e.current.pause(), () => {
-      i = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
+      t = !1, e.current && (e.current.pause(), e.current.removeAttribute("src"), e.current.load());
     };
-  }, [d]), s.type === "video" ? /* @__PURE__ */ r.jsxs(
-    n,
+  }, [c]), a.type === "video" ? /* @__PURE__ */ r.jsxs(
+    s,
     {
       sx: {
         position: "relative",
         overflow: "hidden",
         width: "100%",
         height: "100%",
-        ...o
+        ...i
       },
       children: [
         /* @__PURE__ */ r.jsx(
-          n,
+          s,
           {
             component: "video",
             ref: e,
-            onClick: a,
+            onClick: l,
             playsInline: !0,
             muted: !0,
             loop: !0,
@@ -64,11 +64,11 @@ const k = ({ item: s, sx: o, onClick: a }) => {
               willChange: "transform",
               display: "block"
             },
-            children: /* @__PURE__ */ r.jsx("source", { src: s.url, type: "video/mp4" })
+            children: /* @__PURE__ */ r.jsx("source", { src: a.url, type: "video/mp4" })
           }
         ),
         p && /* @__PURE__ */ r.jsx(
-          n,
+          s,
           {
             sx: {
               position: "absolute",
@@ -79,7 +79,7 @@ const k = ({ item: s, sx: o, onClick: a }) => {
               bgcolor: "action.disabled"
             },
             children: /* @__PURE__ */ r.jsx(
-              n,
+              s,
               {
                 sx: {
                   width: 24,
@@ -99,39 +99,39 @@ const k = ({ item: s, sx: o, onClick: a }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ r.jsx(n, { onClick: a, sx: { width: "100%", height: "100%", ...o }, children: /* @__PURE__ */ r.jsx(
-    S,
+  ) : /* @__PURE__ */ r.jsx(s, { onClick: l, sx: { width: "100%", height: "100%", ...i }, children: /* @__PURE__ */ r.jsx(
+    $,
     {
-      src: s.url,
-      alt: s.title || "",
+      src: a.url,
+      alt: a.title || "",
       width: "100%",
       height: "100%",
       style: {
-        objectFit: o != null && o.objectFit ? o.objectFit : "cover",
-        cursor: a ? "pointer" : "default",
+        objectFit: i != null && i.objectFit ? i.objectFit : "cover",
+        cursor: l ? "pointer" : "default",
         display: "block",
         width: "100%",
         height: "100%"
       }
     }
   ) });
-}, $ = ({ mediaItems: s }) => {
-  const [o, a] = u(null), [e, d] = u(s), [h, p] = u(!1);
+}, F = ({ mediaItems: a }) => {
+  const [i, l] = u(null), [e, c] = u(a), [h, p] = u(!1), d = j();
   return y(() => {
-    d(s);
-  }, [s]), /* @__PURE__ */ r.jsxs(n, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
+    c(a);
+  }, [a]), /* @__PURE__ */ r.jsxs(s, { sx: { width: "100%", position: "relative", zIndex: 1 }, children: [
     /* @__PURE__ */ r.jsx(
-      C,
+      k,
       {
-        selectedItem: o,
-        isOpen: !!o,
-        onClose: () => a(null),
-        onItemChange: a,
+        selectedItem: i,
+        isOpen: !!i,
+        onClose: () => l(null),
+        onItemChange: l,
         mediaItems: e
       }
     ),
-    /* @__PURE__ */ r.jsx(I, { mode: "wait", children: !o && /* @__PURE__ */ r.jsx(
-      x.div,
+    /* @__PURE__ */ r.jsx(S, { mode: "wait", children: !i && /* @__PURE__ */ r.jsx(
+      b.div,
       {
         initial: "hidden",
         animate: "visible",
@@ -145,7 +145,7 @@ const k = ({ item: s, sx: o, onClick: a }) => {
           }
         },
         children: /* @__PURE__ */ r.jsx(
-          n,
+          s,
           {
             sx: {
               display: "grid",
@@ -159,11 +159,11 @@ const k = ({ item: s, sx: o, onClick: a }) => {
               position: "relative"
               // Ensure proper stacking context
             },
-            children: e.map((t, i) => /* @__PURE__ */ r.jsx(
-              x.div,
+            children: e.map((t, o) => /* @__PURE__ */ r.jsx(
+              b.div,
               {
-                layoutId: `media-${t.id}`,
-                onClick: () => !h && a(t),
+                layoutId: `media-${t.id}-${d}`,
+                onClick: () => !h && l(t),
                 variants: {
                   hidden: { y: 50, scale: 0.9, opacity: 0 },
                   visible: {
@@ -174,7 +174,7 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                       type: "spring",
                       stiffness: 350,
                       damping: 25,
-                      delay: i * 0.05
+                      delay: o * 0.05
                     }
                   }
                 },
@@ -183,12 +183,12 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                 dragConstraints: { left: 0, right: 0, top: 0, bottom: 0 },
                 dragElastic: 1,
                 onDragStart: () => p(!0),
-                onDragEnd: (c, l) => {
+                onDragEnd: (n, f) => {
                   p(!1);
-                  const f = l.offset.x + l.offset.y;
-                  if (Math.abs(f) > 50) {
-                    const g = [...e], b = g[i], m = f > 0 ? Math.min(i + 1, e.length - 1) : Math.max(i - 1, 0);
-                    g.splice(i, 1), g.splice(m, 0, b), d(g);
+                  const v = f.offset.x + f.offset.y;
+                  if (Math.abs(v) > 50) {
+                    const g = [...e], m = g[o], w = v > 0 ? Math.min(o + 1, e.length - 1) : Math.max(o - 1, 0);
+                    g.splice(o, 1), g.splice(w, 0, m), c(g);
                   }
                 },
                 style: {
@@ -197,7 +197,7 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                   gridColumn: t.colSpan ? `span ${t.colSpan}` : "span 1"
                 },
                 children: /* @__PURE__ */ r.jsxs(
-                  j,
+                  C,
                   {
                     elevation: 4,
                     sx: {
@@ -214,15 +214,15 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                     },
                     children: [
                       /* @__PURE__ */ r.jsx(
-                        k,
+                        R,
                         {
                           item: t,
                           sx: { position: "absolute", inset: 0, width: "100%", height: "100%" },
-                          onClick: () => !h && a(t)
+                          onClick: () => !h && l(t)
                         }
                       ),
                       (t.title || t.desc) && /* @__PURE__ */ r.jsxs(
-                        n,
+                        s,
                         {
                           className: "hover-overlay",
                           sx: {
@@ -239,17 +239,17 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                           },
                           children: [
                             /* @__PURE__ */ r.jsx(
-                              n,
+                              s,
                               {
                                 sx: {
                                   position: "absolute",
                                   inset: 0,
-                                  background: (c) => `linear-gradient(to top, ${c.palette.grey[900]}CC, ${c.palette.grey[900]}66, transparent)`
+                                  background: (n) => `linear-gradient(to top, ${n.palette.grey[900]}CC, ${n.palette.grey[900]}66, transparent)`
                                 }
                               }
                             ),
                             t.title && /* @__PURE__ */ r.jsx(
-                              v,
+                              x,
                               {
                                 variant: "subtitle2",
                                 sx: {
@@ -264,7 +264,7 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                               }
                             ),
                             t.desc && /* @__PURE__ */ r.jsx(
-                              v,
+                              x,
                               {
                                 variant: "caption",
                                 sx: {
@@ -286,7 +286,7 @@ const k = ({ item: s, sx: o, onClick: a }) => {
                   }
                 )
               },
-              t.id
+              `${t.id}-${d}`
             ))
           }
         )
@@ -295,6 +295,6 @@ const k = ({ item: s, sx: o, onClick: a }) => {
   ] });
 };
 export {
-  k as MediaItem,
-  $ as default
+  R as MediaItem,
+  F as default
 };

package/dist/s-text-field/s-text-field.js

@@ -19,7 +19,16 @@ const g = c(/* @__PURE__ */ s.jsx("path", {
   var r;
   const [t, m] = j(!1), n = o === "password", x = () => {
     m(!t);
-  }, f = n && t ? "text" : o, u = n ? /* @__PURE__ */ s.jsx(w, { position: "end", children: /* @__PURE__ */ s.jsx(b, { "aria-label": "toggle password visibility", onClick: x, edge: "end", children: t ? /* @__PURE__ */ s.jsx(P, {}) : /* @__PURE__ */ s.jsx(g, {}) }) }) : void 0;
+  }, f = n && t ? "text" : o, u = n ? /* @__PURE__ */ s.jsx(w, { position: "end", children: /* @__PURE__ */ s.jsx(
+    b,
+    {
+      "aria-label": "toggle password visibility",
+      onClick: x,
+      edge: "end",
+      size: "small",
+      children: t ? /* @__PURE__ */ s.jsx(P, {}) : /* @__PURE__ */ s.jsx(g, {})
+    }
+  ) }) : void 0;
   return /* @__PURE__ */ s.jsx(y, { label: d, hint: p, error: i, required: a, htmlFor: e, children: /* @__PURE__ */ s.jsx(
     h,
     {

package/package.json

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