@solostylist/ui-kit 1.0.163 → 1.0.164

package/dist/s-data-table/s-data-table.js

@@ -1,5 +1,5 @@
 import { j as r } from "../jsx-runtime-OVHDjVDe.js";
-import * as y from "react";
+import * as g from "react";
 import ve from "../s-empty/s-empty.js";
 import { c as j, P as e } from "../createTheme-3Wd3hHrj.js";
 import { a as N, u as $, c as I, m as _ } from "../DefaultPropsProvider-CaCsvQaq.js";
@@ -79,7 +79,7 @@ const Oe = (o) => {
   margin: 0,
   padding: 0,
   zIndex: 1
-}), ae = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}), ae = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const {
     autoFocus: a,
     checked: i,
@@ -87,7 +87,7 @@ const Oe = (o) => {
     defaultChecked: p,
     disabled: d,
     disableFocusRipple: u = !1,
-    edge: g = !1,
+    edge: y = !1,
     icon: l,
     id: x,
     inputProps: w,
@@ -121,19 +121,19 @@ const Oe = (o) => {
   };
   let E = d;
   O && typeof E > "u" && (E = O.disabled);
-  const ye = R === "checkbox" || R === "radio", W = {
+  const ge = R === "checkbox" || R === "radio", W = {
     ...t,
     checked: G,
     disabled: E,
     disableFocusRipple: u,
-    edge: g
+    edge: y
   }, K = Oe(W), Q = {
     slots: le,
     slotProps: {
       input: w,
       ...ce
     }
-  }, [ge, me] = L("root", {
+  }, [ye, me] = L("root", {
     ref: s,
     elementType: Pe,
     className: K.root,
@@ -180,7 +180,7 @@ const Oe = (o) => {
       checked: i,
       defaultChecked: p,
       disabled: E,
-      id: ye ? x : void 0,
+      id: ge ? x : void 0,
       name: T,
       readOnly: C,
       required: f,
@@ -191,7 +191,7 @@ const Oe = (o) => {
       }
     }
   });
-  return /* @__PURE__ */ r.jsxs(ge, {
+  return /* @__PURE__ */ r.jsxs(ye, {
     ...me,
     children: [/* @__PURE__ */ r.jsx(he, {
       ...xe
@@ -401,7 +401,7 @@ const D = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
       }
     }
   }]
-}))), Ie = /* @__PURE__ */ r.jsx(Ne, {}), Ee = /* @__PURE__ */ r.jsx(ze, {}), Fe = /* @__PURE__ */ r.jsx(Be, {}), A = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}))), Ie = /* @__PURE__ */ r.jsx(Ne, {}), Ee = /* @__PURE__ */ r.jsx(ze, {}), Fe = /* @__PURE__ */ r.jsx(Be, {}), A = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const a = $({
     props: t,
     name: "MuiCheckbox"
@@ -411,7 +411,7 @@ const D = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     icon: p = Ee,
     indeterminate: d = !1,
     indeterminateIcon: u = Fe,
-    inputProps: g,
+    inputProps: y,
     size: l = "medium",
     disableRipple: x = !1,
     className: w,
@@ -424,7 +424,7 @@ const D = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     color: n,
     indeterminate: d,
     size: l
-  }, f = He(C), z = T.input ?? g, [R, U] = L("root", {
+  }, f = He(C), z = T.input ?? y, [R, U] = L("root", {
     ref: s,
     elementType: $e,
     className: I(f.root, w),
@@ -437,10 +437,10 @@ const D = M("MuiCheckbox", ["root", "checked", "disabled", "indeterminate", "col
     ownerState: C,
     additionalProps: {
       type: "checkbox",
-      icon: /* @__PURE__ */ y.cloneElement(v, {
+      icon: /* @__PURE__ */ g.cloneElement(v, {
         fontSize: v.props.fontSize ?? l
       }),
-      checkedIcon: /* @__PURE__ */ y.cloneElement(h, {
+      checkedIcon: /* @__PURE__ */ g.cloneElement(h, {
         fontSize: h.props.fontSize ?? l
       }),
       disableRipple: x,
@@ -571,7 +571,7 @@ process.env.NODE_ENV !== "production" && (A.propTypes = {
    */
   value: e.any
 });
-const J = /* @__PURE__ */ y.createContext();
+const J = /* @__PURE__ */ g.createContext();
 process.env.NODE_ENV !== "production" && (J.displayName = "TableContext");
 function Ue(o) {
   return B("MuiTable", o);
@@ -616,7 +616,7 @@ const Ve = (o) => {
       borderCollapse: "separate"
     }
   }]
-}))), Y = "table", ne = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}))), Y = "table", ne = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const a = $({
     props: t,
     name: "MuiTable"
@@ -626,14 +626,14 @@ const Ve = (o) => {
     padding: p = "normal",
     size: d = "medium",
     stickyHeader: u = !1,
-    ...g
+    ...y
   } = a, l = {
     ...a,
     component: n,
     padding: p,
     size: d,
     stickyHeader: u
-  }, x = Ve(l), w = y.useMemo(() => ({
+  }, x = Ve(l), w = g.useMemo(() => ({
     padding: p,
     size: d,
     stickyHeader: u
@@ -646,7 +646,7 @@ const Ve = (o) => {
       ref: s,
       className: I(x.root, i),
       ownerState: l,
-      ...g
+      ...y
     })
   });
 });
@@ -692,7 +692,7 @@ process.env.NODE_ENV !== "production" && (ne.propTypes = {
    */
   sx: e.oneOfType([e.arrayOf(e.oneOfType([e.func, e.object, e.bool])), e.func, e.object])
 });
-const F = /* @__PURE__ */ y.createContext();
+const F = /* @__PURE__ */ g.createContext();
 process.env.NODE_ENV !== "production" && (F.displayName = "Tablelvl2Context");
 function We(o) {
   return B("MuiTableBody", o);
@@ -712,7 +712,7 @@ const De = (o) => {
   display: "table-row-group"
 }), Ae = {
   variant: "body"
-}, Z = "tbody", re = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}, Z = "tbody", re = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const a = $({
     props: t,
     name: "MuiTableBody"
@@ -895,7 +895,7 @@ const Je = M("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
       backgroundColor: (o.vars || o).palette.background.default
     }
   }]
-}))), H = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}))), H = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const a = $({
     props: t,
     name: "MuiTableCell"
@@ -905,11 +905,11 @@ const Je = M("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
     component: p,
     padding: d,
     scope: u,
-    size: g,
+    size: y,
     sortDirection: l,
     variant: x,
     ...w
-  } = a, m = y.useContext(J), T = y.useContext(F), c = T && T.variant === "head";
+  } = a, m = g.useContext(J), T = g.useContext(F), c = T && T.variant === "head";
   let v;
   p ? v = p : v = c ? "th" : "td";
   let h = u;
@@ -919,7 +919,7 @@ const Je = M("MuiTableCell", ["root", "head", "body", "footer", "sizeSmall", "si
     align: i,
     component: v,
     padding: d || (m && m.padding ? m.padding : "normal"),
-    size: g || (m && m.size ? m.size : "medium"),
+    size: y || (m && m.size ? m.size : "medium"),
     sortDirection: l,
     stickyHeader: C === "head" && m && m.stickyHeader,
     variant: C
@@ -1011,7 +1011,7 @@ const Xe = (o) => {
   display: "table-header-group"
 }), Ze = {
   variant: "head"
-}, ee = "thead", ie = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}, ee = "thead", ie = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const a = $({
     props: t,
     name: "MuiTableHead"
@@ -1102,7 +1102,7 @@ const oe = M("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), oo
       backgroundColor: o.alpha((o.vars || o).palette.primary.main, `${(o.vars || o).palette.action.selectedOpacity} + ${(o.vars || o).palette.action.hoverOpacity}`)
     }
   }
-}))), te = "tr", V = /* @__PURE__ */ y.forwardRef(function(t, s) {
+}))), te = "tr", V = /* @__PURE__ */ g.forwardRef(function(t, s) {
   const a = $({
     props: t,
     name: "MuiTableRow"
@@ -1112,13 +1112,13 @@ const oe = M("MuiTableRow", ["root", "selected", "hover", "head", "footer"]), oo
     hover: p = !1,
     selected: d = !1,
     ...u
-  } = a, g = y.useContext(F), l = {
+  } = a, y = g.useContext(F), l = {
     ...a,
     component: n,
     hover: p,
     selected: d,
-    head: g && g.variant === "head",
-    footer: g && g.variant === "footer"
+    head: y && y.variant === "head",
+    footer: y && y.variant === "footer"
   }, x = oo(l);
   return /* @__PURE__ */ r.jsx(to, {
     as: n,
@@ -1176,7 +1176,7 @@ function mo({
   onSelectOne: p,
   onSelectAll: d,
   rows: u,
-  selectable: g,
+  selectable: y,
   selected: l,
   uniqueRowId: x,
   ...w
@@ -1194,16 +1194,32 @@ function mo({
           }
         },
         children: /* @__PURE__ */ r.jsxs(V, { children: [
-          g ? /* @__PURE__ */ r.jsx(H, { padding: "checkbox", sx: { width: "40px", minWidth: "40px", maxWidth: "40px" }, children: /* @__PURE__ */ r.jsx(
-            A,
+          y ? /* @__PURE__ */ r.jsx(
+            H,
             {
-              checked: T,
-              indeterminate: m,
-              onChange: (c) => {
-                T ? i == null || i(c) : d == null || d(c);
-              }
+              padding: "checkbox",
+              sx: {
+                width: "40px",
+                minWidth: "40px",
+                maxWidth: "40px",
+                bgcolor: "action.hover",
+                backgroundClip: "padding-box",
+                // Ensure border renders consistently over background
+                borderTop: "1px solid",
+                borderColor: "divider"
+              },
+              children: /* @__PURE__ */ r.jsx(
+                A,
+                {
+                  checked: T,
+                  indeterminate: m,
+                  onChange: (c) => {
+                    T ? i == null || i(c) : d == null || d(c);
+                  }
+                }
+              )
             }
-          ) }) : null,
+          ) : null,
           o.map(
             (c) => /* @__PURE__ */ r.jsx(
               H,
@@ -1214,11 +1230,15 @@ function mo({
                   minWidth: c.width,
                   maxWidth: c.width,
                   // Apply text alignment if specified
-                  ...c.align && { textAlign: c.align }
+                  ...c.align && { textAlign: c.align },
+                  bgcolor: "action.hover",
+                  backgroundClip: "padding-box",
+                  borderTop: "1px solid",
+                  borderColor: "divider"
                 },
                 children: c.hideName ? null : c.name
               },
-              c.name ?? y.useId()
+              c.name ?? g.useId()
             )
           )
         ] })
@@ -1238,7 +1258,7 @@ function mo({
           },
           sx: { ...a && { cursor: "pointer" } },
           children: [
-            g ? /* @__PURE__ */ r.jsx(H, { padding: "checkbox", children: /* @__PURE__ */ r.jsx(
+            y ? /* @__PURE__ */ r.jsx(H, { padding: "checkbox", children: /* @__PURE__ */ r.jsx(
               A,
               {
                 checked: h ? C : !1,

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

@@ -1,41 +1,32 @@
-import { j as e } from "../jsx-runtime-OVHDjVDe.js";
-import * as r from "react";
+import { j as t } from "../jsx-runtime-OVHDjVDe.js";
+import * as s from "react";
 import { C as k } from "../ChevronLeft-CBuFk2Fh.js";
-import { C as F } from "../ChevronRight-CnDWPrOm.js";
-import { c as S } from "../createSvgIcon-DxwgGAVe.js";
-import { Box as n, IconButton as p } from "@mui/material";
-import I from "../s-lazy-image/s-lazy-image.js";
-const K = S(/* @__PURE__ */ e.jsx("path", {
-  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
-}), "KeyboardArrowDown"), N = S(/* @__PURE__ */ e.jsx("path", {
-  d: "M7.41 15.41 12 10.83l4.59 4.58L18 14l-6-6-6 6z"
-}), "KeyboardArrowUp"), B = r.forwardRef(
-  ({ sx: L, leftImage: d, rightImage: E, altLeft: u = "Left image", altRight: z = "Right image", initialPosition: C = 50, ...A }, a) => {
-    const s = Array.isArray(d) ? d : [d], f = Array.isArray(u) ? u : [u], [h, g] = r.useState(0), [l, M] = r.useState(C), [i, v] = r.useState(!1), m = r.useRef(null), P = s.length > 1, b = (t) => {
-      if (!m.current) return;
-      const o = m.current.getBoundingClientRect();
-      let x = (t - o.left) / o.width * 100;
-      x = Math.max(0, Math.min(100, x)), M(x);
-    }, w = (t) => {
-      i && b(t.clientX);
-    }, y = (t) => {
-      i && b(t.touches[0].clientX);
-    }, j = () => {
-      v(!0);
+import { C as z } from "../ChevronRight-CnDWPrOm.js";
+import { Box as r, IconButton as D } from "@mui/material";
+import E from "../s-lazy-image/s-lazy-image.js";
+const F = s.forwardRef(
+  ({ sx: I, leftImage: u, rightImage: L, altLeft: d = "Left image", altRight: S = "Right image", initialPosition: C = 50, ...M }, a) => {
+    const m = Array.isArray(u) ? u : [u], g = Array.isArray(d) ? d : [d], [l, P] = s.useState(0), [o, R] = s.useState(C), [i, f] = s.useState(!1), h = s.useRef(null), A = m.length > 1, x = (e) => {
+      if (!h.current) return;
+      const n = h.current.getBoundingClientRect();
+      let p = (e - n.left) / n.width * 100;
+      p = Math.max(0, Math.min(100, p)), R(p);
+    }, v = (e) => {
+      i && x(e.clientX);
+    }, b = (e) => {
+      i && x(e.touches[0].clientX);
+    }, y = () => {
+      f(!0);
     }, c = () => {
-      v(!1);
-    }, R = (t) => {
-      t.stopPropagation(), g((o) => o > 0 ? o - 1 : s.length - 1);
-    }, D = (t) => {
-      t.stopPropagation(), g((o) => o < s.length - 1 ? o + 1 : 0);
-    };
-    return r.useEffect(() => (i ? (document.addEventListener("mousemove", w), document.addEventListener("touchmove", y), document.addEventListener("mouseup", c), document.addEventListener("touchend", c), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-      document.removeEventListener("mousemove", w), document.removeEventListener("touchmove", y), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
-    }), [i]), /* @__PURE__ */ e.jsxs(
-      n,
+      f(!1);
+    }, w = o === 0 || o === 100;
+    return s.useEffect(() => (i ? (document.addEventListener("mousemove", v), document.addEventListener("touchmove", b), document.addEventListener("mouseup", c), document.addEventListener("touchend", c), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
+      document.removeEventListener("mousemove", v), document.removeEventListener("touchmove", b), document.removeEventListener("mouseup", c), document.removeEventListener("touchend", c), document.body.style.cursor = "";
+    }), [i]), /* @__PURE__ */ t.jsxs(
+      r,
       {
-        ref: (t) => {
-          m.current = t, typeof a == "function" ? a(t) : a && (a.current = t);
+        ref: (e) => {
+          h.current = e, typeof a == "function" ? a(e) : a && (a.current = e);
         },
         sx: {
           position: "relative",
@@ -43,20 +34,17 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
           height: "100%",
           overflow: "hidden",
           userSelect: "none",
-          "&:hover .slider-handle": {
-            transform: "translate(-50%, -50%) scale(1.05)"
-          },
-          ...L
+          ...I
         },
-        onMouseDown: j,
-        onTouchStart: j,
-        ...A,
+        onMouseDown: y,
+        onTouchStart: y,
+        ...M,
         children: [
-          /* @__PURE__ */ e.jsx(
-            I,
+          /* @__PURE__ */ t.jsx(
+            E,
             {
-              src: E,
-              alt: z,
+              src: L,
+              alt: S,
               style: {
                 position: "absolute",
                 inset: 0,
@@ -68,8 +56,8 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
               draggable: !1
             }
           ),
-          /* @__PURE__ */ e.jsx(
-            n,
+          /* @__PURE__ */ t.jsx(
+            r,
             {
               sx: {
                 position: "absolute",
@@ -78,13 +66,13 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
                 height: "100%",
                 overflow: "hidden",
                 pointerEvents: "none",
-                clipPath: `polygon(0 0, ${l}% 0, ${l}% 100%, 0 100%)`
+                clipPath: `polygon(0 0, ${o}% 0, ${o}% 100%, 0 100%)`
               },
-              children: /* @__PURE__ */ e.jsx(
-                I,
+              children: /* @__PURE__ */ t.jsx(
+                E,
                 {
-                  src: s[h],
-                  alt: f[h] || f[0],
+                  src: m[l],
+                  alt: g[l] || g[0],
                   style: {
                     width: "100%",
                     height: "100%",
@@ -95,47 +83,51 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
               )
             }
           ),
-          P && /* @__PURE__ */ e.jsxs(
-            n,
+          A && /* @__PURE__ */ t.jsx(
+            r,
             {
               sx: {
                 position: "absolute",
                 left: 16,
-                top: "50%",
-                transform: "translateY(-50%)",
+                bottom: 16,
                 display: "flex",
-                flexDirection: "column",
                 gap: 1,
-                zIndex: 1
+                zIndex: 1,
+                pointerEvents: i ? "none" : "auto",
+                // Disable bubble click when dragging
+                opacity: o > 10 ? 1 : 0,
+                // Fade out if left image is mostly hidden
+                transition: "opacity 0.2s"
               },
-              children: [
-                /* @__PURE__ */ e.jsx(p, { onClick: R, "aria-label": "Previous left image", children: /* @__PURE__ */ e.jsx(N, { sx: { fontSize: 20 } }) }),
-                /* @__PURE__ */ e.jsx(p, { onClick: D, "aria-label": "Next left image", children: /* @__PURE__ */ e.jsx(K, { sx: { fontSize: 20 } }) }),
-                /* @__PURE__ */ e.jsxs(
-                  n,
-                  {
-                    sx: {
-                      backdropFilter: "blur(10px)",
-                      boxShadow: 2,
-                      borderRadius: 1,
-                      p: 1,
-                      fontSize: "0.75rem",
-                      fontWeight: "bold",
-                      textAlign: "center",
-                      minWidth: 36
-                    },
-                    children: [
-                      h + 1,
-                      "/",
-                      s.length
-                    ]
+              onClick: (e) => e.stopPropagation(),
+              onMouseDown: (e) => e.stopPropagation(),
+              children: m.map((e, n) => /* @__PURE__ */ t.jsx(
+                r,
+                {
+                  onClick: (j) => {
+                    j.stopPropagation(), P(n);
+                  },
+                  sx: {
+                    width: 8,
+                    height: 8,
+                    borderRadius: "50%",
+                    bgcolor: l === n ? "primary.main" : "whiteAlpha.medium",
+                    cursor: "pointer",
+                    boxShadow: 1,
+                    backdropFilter: "blur(4px)",
+                    transition: "all 0.2s",
+                    "&:hover": {
+                      transform: "scale(1.2)",
+                      bgcolor: l === n ? "primary.main" : "whiteAlpha.dark"
+                    }
                   }
-                )
-              ]
+                },
+                n
+              ))
             }
           ),
-          /* @__PURE__ */ e.jsxs(
-            n,
+          /* @__PURE__ */ t.jsxs(
+            r,
             {
               sx: {
                 position: "absolute",
@@ -143,11 +135,11 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
                 height: "100%",
                 width: "4px",
                 cursor: "ew-resize",
-                left: `calc(${l}% - 2px)`
+                left: `calc(${o}% - 2px)`
               },
               children: [
-                /* @__PURE__ */ e.jsx(
-                  n,
+                /* @__PURE__ */ t.jsx(
+                  r,
                   {
                     sx: {
                       position: "absolute",
@@ -158,37 +150,37 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
                     }
                   }
                 ),
-                /* @__PURE__ */ e.jsx(
-                  p,
+                /* @__PURE__ */ t.jsx(
+                  D,
                   {
-                    className: "slider-handle",
                     sx: {
                       position: "absolute",
                       top: "50%",
                       left: "50%",
                       transform: "translate(-50%, -50%)",
-                      width: 48,
-                      height: 48,
-                      backdropFilter: "blur(10px)",
-                      boxShadow: 3,
+                      cursor: "ew-resize",
+                      ...w ? {
+                        width: 48,
+                        height: 48,
+                        backdropFilter: "blur(10px)"
+                      } : {},
                       transition: "all 0.3s ease-in-out",
-                      ...i && {
-                        transform: "translate(-50%, -50%) scale(1.05)",
-                        boxShadow: 6
+                      "&:hover": {
+                        bgcolor: "transparent"
                       }
                     },
                     role: "slider",
-                    "aria-valuenow": l,
+                    "aria-valuenow": o,
                     "aria-valuemin": 0,
                     "aria-valuemax": 100,
                     "aria-orientation": "horizontal",
                     "aria-label": "Image comparison slider",
-                    onClick: (t) => {
-                      t.preventDefault(), t.stopPropagation();
+                    onClick: (e) => {
+                      e.preventDefault(), e.stopPropagation();
                     },
-                    children: /* @__PURE__ */ e.jsxs(n, { sx: { display: "flex", alignItems: "center" }, children: [
-                      /* @__PURE__ */ e.jsx(k, { sx: { fontSize: 20 } }),
-                      /* @__PURE__ */ e.jsx(F, { sx: { fontSize: 20 } })
+                    children: w && /* @__PURE__ */ t.jsxs(r, { sx: { display: "flex", alignItems: "center" }, children: [
+                      /* @__PURE__ */ t.jsx(k, {}),
+                      /* @__PURE__ */ t.jsx(z, {})
                     ] })
                   }
                 )
@@ -200,7 +192,7 @@ const K = S(/* @__PURE__ */ e.jsx("path", {
     );
   }
 );
-B.displayName = "SImageComparison";
+F.displayName = "SImageComparison";
 export {
-  B as default
+  F as default
 };

package/dist/theme/customizations/data-display.js

@@ -4,6 +4,13 @@ import { s as i } from "../../svgIconClasses-CBCi8U9g.js";
 import { t as a } from "../../typographyClasses-C7fhAsUD.js";
 import { a as t } from "../../colorManipulator-ep5lERxB.js";
 const g = {
+  MuiTableCell: {
+    styleOverrides: {
+      root: ({ theme: o }) => ({
+        borderColor: (o.vars || o).palette.divider
+      })
+    }
+  },
   MuiList: {
     styleOverrides: {
       root: {

package/package.json

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