@solostylist/ui-kit 1.0.203 → 1.0.205

package/dist/s-action-overlay/s-action-overlay.js

@@ -1,110 +1,109 @@
-import { j as e } from "../jsx-runtime-tc70JA_2.js";
-import { useState as M } from "react";
-import { Box as i, Grid as c } from "@mui/material";
-import { SIconButton as T } from "../s-icon-button/s-icon-button.js";
-const k = 40, _ = 16, O = ({
-  actions: f,
-  maxWidth: u,
-  columns: r = 3,
-  children: d,
-  showOnHover: s = !0,
-  visible: o,
-  position: n = "center",
-  backdropColor: p = "background.paper",
-  backdropOpacity: x = 0.9,
-  blurAmount: m = 10,
-  borderRadius: g = 0,
-  overlaySx: y,
-  onVisibilityChange: a
-}) => {
-  const [h, l] = M(!1), v = o ?? (s && h), b = () => {
-    s && o === void 0 && (l(!0), a?.(!0));
-  }, j = () => {
-    s && o === void 0 && (l(!1), a?.(!1));
-  }, C = () => {
-    switch (n) {
-      case "top-left":
-        return { justifyContent: "flex-start", alignItems: "flex-start" };
-      case "top-right":
-        return { justifyContent: "flex-end", alignItems: "flex-start" };
-      case "bottom-left":
-        return { justifyContent: "flex-start", alignItems: "flex-end" };
-      case "bottom-right":
-        return { justifyContent: "flex-end", alignItems: "flex-end" };
-      default:
-        return { justifyContent: "center", alignItems: "center" };
-    }
-  }, I = () => {
-    switch (n) {
-      case "top-left":
-        return "flex-start";
-      case "top-right":
-        return "flex-end";
-      case "bottom-left":
-        return "flex-start";
-      case "bottom-right":
-        return "flex-end";
-      default:
-        return "center";
-    }
-  }, A = () => {
-    let t = u;
-    return r && (t = r * k + (r - 1) * _ + r * 16), t;
-  };
-  return (
-    // Main container with flex to center the children
-    /* @__PURE__ */ e.jsx(i, { display: "flex", children: /* @__PURE__ */ e.jsxs(i, { position: "relative", onMouseEnter: b, onMouseLeave: j, children: [
-      d,
-      v && /* @__PURE__ */ e.jsx(
-        i,
-        {
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          bgcolor: p,
-          sx: {
-            opacity: x,
-            backdropFilter: `blur(${m}px)`,
-            transform: "translateZ(0)",
-            willChange: "transform",
-            transition: "opacity 0.2s ease-in-out",
-            ...C(),
-            ...y
-          },
-          borderRadius: g,
-          children: /* @__PURE__ */ e.jsx(c, { container: !0, spacing: 2, justifyContent: I(), maxWidth: A(), children: f.map((t, E) => /* @__PURE__ */ e.jsx(c, { display: "flex", justifyContent: "center", children: /* @__PURE__ */ e.jsx(
-            T,
-            {
-              tooltipOptions: { title: t.tooltip, placement: "top" },
-              onClick: t.onClick,
-              disabled: t.disabled,
-              color: t.color,
-              sx: {
-                margin: 1,
-                backgroundColor: t.isActive ? "primary.main" : void 0,
-                color: t.isActive ? "primary.contrastText" : void 0,
-                transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-                opacity: t.disabled ? 0.5 : 1,
-                "&:hover": {
-                  backgroundColor: t.isActive ? "primary.main" : void 0,
-                  color: t.isActive ? "primary.contrastText" : void 0
-                },
-                ...t.iconButtonProps?.sx
-              },
-              ...t.iconButtonProps,
-              children: t.icon
-            }
-          ) }, `${t.tooltip}-${E}`)) })
-        }
-      )
-    ] }) })
-  );
-};
-O.displayName = "SActionOverlay";
-export {
-  O as SActionOverlay,
-  O as default
+import { SIconButton as e } from "../s-icon-button/s-icon-button.js";
+import { useState as t } from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Box as i, Grid as a } from "@mui/material";
+//#region lib/s-action-overlay/s-action-overlay.tsx
+var o = 40, s = 16, c = ({ actions: c, maxWidth: l, columns: u = 3, children: d, showOnHover: f = !0, visible: p, position: m = "center", backdropColor: h = "background.paper", backdropOpacity: g = .9, blurAmount: _ = 10, borderRadius: v = 0, overlaySx: y, onVisibilityChange: b }) => {
+	let [x, S] = t(!1), C = p ?? (f && x), w = () => {
+		f && p === void 0 && (S(!0), b?.(!0));
+	}, T = () => {
+		f && p === void 0 && (S(!1), b?.(!1));
+	}, E = () => {
+		switch (m) {
+			case "top-left": return {
+				justifyContent: "flex-start",
+				alignItems: "flex-start"
+			};
+			case "top-right": return {
+				justifyContent: "flex-end",
+				alignItems: "flex-start"
+			};
+			case "bottom-left": return {
+				justifyContent: "flex-start",
+				alignItems: "flex-end"
+			};
+			case "bottom-right": return {
+				justifyContent: "flex-end",
+				alignItems: "flex-end"
+			};
+			default: return {
+				justifyContent: "center",
+				alignItems: "center"
+			};
+		}
+	}, D = () => {
+		switch (m) {
+			case "top-left": return "flex-start";
+			case "top-right": return "flex-end";
+			case "bottom-left": return "flex-start";
+			case "bottom-right": return "flex-end";
+			default: return "center";
+		}
+	}, O = () => {
+		let e = l;
+		return u && (e = u * o + (u - 1) * s + u * 16), e;
+	};
+	return /* @__PURE__ */ n(i, {
+		display: "flex",
+		children: /* @__PURE__ */ r(i, {
+			position: "relative",
+			onMouseEnter: w,
+			onMouseLeave: T,
+			children: [d, C && /* @__PURE__ */ n(i, {
+				position: "absolute",
+				top: 0,
+				left: 0,
+				width: "100%",
+				height: "100%",
+				display: "flex",
+				bgcolor: h,
+				sx: {
+					opacity: g,
+					backdropFilter: `blur(${_}px)`,
+					transform: "translateZ(0)",
+					willChange: "transform",
+					transition: "opacity 0.2s ease-in-out",
+					...E(),
+					...y
+				},
+				borderRadius: v,
+				children: /* @__PURE__ */ n(a, {
+					container: !0,
+					spacing: 2,
+					justifyContent: D(),
+					maxWidth: O(),
+					children: c.map((t, r) => /* @__PURE__ */ n(a, {
+						display: "flex",
+						justifyContent: "center",
+						children: /* @__PURE__ */ n(e, {
+							tooltipOptions: {
+								title: t.tooltip,
+								placement: "top"
+							},
+							onClick: t.onClick,
+							disabled: t.disabled,
+							color: t.color,
+							sx: {
+								margin: 1,
+								backgroundColor: t.isActive ? "primary.main" : void 0,
+								color: t.isActive ? "primary.contrastText" : void 0,
+								transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+								opacity: t.disabled ? .5 : 1,
+								"&:hover": {
+									backgroundColor: t.isActive ? "primary.main" : void 0,
+									color: t.isActive ? "primary.contrastText" : void 0
+								},
+								...t.iconButtonProps?.sx
+							},
+							...t.iconButtonProps,
+							children: t.icon
+						})
+					}, `${t.tooltip}-${r}`))
+				})
+			})]
+		})
+	});
 };
+c.displayName = "SActionOverlay";
+//#endregion
+export { c as SActionOverlay, c as default };

package/dist/s-autocomplete/index.js

@@ -1,4 +1,2 @@
-import { SAutocomplete as t } from "./s-autocomplete.js";
-export {
-  t as default
-};
+import { SAutocomplete as e } from "./s-autocomplete.js";
+export { e as default };

package/dist/s-autocomplete/s-autocomplete.js

@@ -1,31 +1,25 @@
-import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import { forwardRef as a, useId as i } from "react";
-import { Autocomplete as f, TextField as c } from "@mui/material";
-import { SForm as n } from "../s-form/s-form.js";
-const x = a(
-  ({
-    label: o = "",
-    required: r = !1,
-    error: m,
-    htmlFor: l,
-    ...s
-  }, d) => {
-    const u = i(), e = l ?? u;
-    return /* @__PURE__ */ t.jsx(n, { error: m, label: o, required: r, htmlFor: e, children: /* @__PURE__ */ t.jsx(
-      f,
-      {
-        disablePortal: !0,
-        fullWidth: !0,
-        renderInput: (p) => /* @__PURE__ */ t.jsx(c, { ...p }),
-        id: e,
-        ...s,
-        ref: d
-      }
-    ) });
-  }
-);
-x.displayName = "SAutocomplete";
-export {
-  x as SAutocomplete,
-  x as default
-};
+import { SForm as e } from "../s-form/s-form.js";
+import { forwardRef as t, useId as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Autocomplete as i, TextField as a } from "@mui/material";
+//#region lib/s-autocomplete/s-autocomplete.tsx
+var o = t(({ label: t = "", required: o = !1, error: s, htmlFor: c, ...l }, u) => {
+	let d = n(), f = c ?? d;
+	return /* @__PURE__ */ r(e, {
+		error: s,
+		label: t,
+		required: o,
+		htmlFor: f,
+		children: /* @__PURE__ */ r(i, {
+			disablePortal: !0,
+			fullWidth: !0,
+			renderInput: (e) => /* @__PURE__ */ r(a, { ...e }),
+			id: f,
+			...l,
+			ref: u
+		})
+	});
+});
+o.displayName = "SAutocomplete";
+//#endregion
+export { o as SAutocomplete, o as default };

package/dist/s-avatar/index.js

@@ -1,4 +1,2 @@
-import { SAvatar as t } from "./s-avatar.js";
-export {
-  t as default
-};
+import { SAvatar as e } from "./s-avatar.js";
+export { e as default };

package/dist/s-avatar/s-avatar.js

@@ -1,22 +1,32 @@
-import { j as t } from "../jsx-runtime-tc70JA_2.js";
-import { Box as s, Avatar as l, Typography as d } from "@mui/material";
-import h from "../s-lazy-image/s-lazy-image.js";
-const n = ({ avatar: i, name: a, showName: e = !1, size: r = 40, avatarProps: o }) => /* @__PURE__ */ t.jsxs(s, { display: "flex", alignItems: "center", gap: 2, children: [
-  /* @__PURE__ */ t.jsx(l, { sx: { width: r, height: r, fontSize: 16 }, ...o, children: i ? /* @__PURE__ */ t.jsx(
-    h,
-    {
-      src: i,
-      alt: a ?? "Avatar",
-      width: r,
-      height: r,
-      variant: "circular",
-      style: { borderRadius: "50%" }
-    }
-  ) : a?.[0] ?? "A" }),
-  e && /* @__PURE__ */ t.jsx(d, { variant: "body1", fontSize: 20, children: a })
-] });
-n.displayName = "SAvatar";
-export {
-  n as SAvatar,
-  n as default
-};
+import e from "../s-lazy-image/s-lazy-image.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Avatar as r, Box as i, Typography as a } from "@mui/material";
+//#region lib/s-avatar/s-avatar.tsx
+var o = ({ avatar: o, name: s, showName: c = !1, size: l = 40, avatarProps: u }) => /* @__PURE__ */ n(i, {
+	display: "flex",
+	alignItems: "center",
+	gap: 2,
+	children: [/* @__PURE__ */ t(r, {
+		sx: {
+			width: l,
+			height: l,
+			fontSize: 16
+		},
+		...u,
+		children: o ? /* @__PURE__ */ t(e, {
+			src: o,
+			alt: s ?? "Avatar",
+			width: l,
+			height: l,
+			variant: "circular",
+			style: { borderRadius: "50%" }
+		}) : s?.[0] ?? "A"
+	}), c && /* @__PURE__ */ t(a, {
+		variant: "body1",
+		fontSize: 20,
+		children: s
+	})]
+});
+o.displayName = "SAvatar";
+//#endregion
+export { o as SAvatar, o as default };

package/dist/s-blur-text/index.js

@@ -1,4 +1,2 @@
-import { SBlurText as t } from "./s-blur-text.js";
-export {
-  t as default
-};
+import { SBlurText as e } from "./s-blur-text.js";
+export { e as default };

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

@@ -1,82 +1,68 @@
-import { j as m } from "../jsx-runtime-tc70JA_2.js";
-import { useState as K, useRef as R, useEffect as V, useMemo as y } from "react";
-import { Typography as B } from "@mui/material";
-import { motion as D } from "framer-motion";
-const F = (s, a) => {
-  const i = /* @__PURE__ */ new Set([...Object.keys(s), ...a.flatMap((t) => Object.keys(t))]), o = {};
-  return i.forEach((t) => {
-    o[t] = [s[t], ...a.map((l) => l[t])];
-  }), o;
-}, M = ({
-  text: s,
-  delay: a = 100,
-  animateBy: i = "words",
-  direction: o = "top",
-  threshold: t = 0.1,
-  rootMargin: l = "0px",
-  animationFrom: b,
-  animationTo: d,
-  easing: h = (n) => n,
-  onAnimationComplete: w,
-  stepDuration: x = 0.35,
-  variant: j = "body1",
-  sx: S,
-  ...g
-}) => {
-  const n = i === "words" ? s.split(" ") : s.split(""), [v, T] = K(!1), c = R(null);
-  V(() => {
-    if (!c.current) return;
-    const r = new IntersectionObserver(
-      ([e]) => {
-        e.isIntersecting && (T(!0), r.unobserve(c.current));
-      },
-      { threshold: t, rootMargin: l }
-    );
-    return r.observe(c.current), () => r.disconnect();
-  }, [t, l]);
-  const k = y(
-    () => o === "top" ? { filter: "blur(10px)", opacity: 0, y: -50 } : { filter: "blur(10px)", opacity: 0, y: 50 },
-    [o]
-  ), C = y(
-    () => [
-      {
-        filter: "blur(5px)",
-        opacity: 0.5,
-        y: o === "top" ? 5 : -5
-      },
-      { filter: "blur(0px)", opacity: 1, y: 0 }
-    ],
-    [o]
-  ), u = b ?? k, f = d ?? C, p = f.length + 1, E = x * (p - 1), I = Array.from({ length: p }, (r, e) => p === 1 ? 0 : e / (p - 1));
-  return /* @__PURE__ */ m.jsx(B, { ref: c, variant: j, sx: S, ...g, children: n.map((r, e) => {
-    const O = F(u, f), A = {
-      duration: E,
-      times: I,
-      delay: e * a / 1e3,
-      ease: h
-    };
-    return /* @__PURE__ */ m.jsxs(
-      D.span,
-      {
-        initial: u,
-        animate: v ? O : u,
-        transition: A,
-        onAnimationComplete: e === n.length - 1 ? w : void 0,
-        style: {
-          display: "inline-block",
-          willChange: "transform, filter, opacity"
-        },
-        children: [
-          r === " " ? " " : r,
-          i === "words" && e < n.length - 1 && " "
-        ]
-      },
-      e
-    );
-  }) });
-};
-M.displayName = "SBlurText";
-export {
-  M as SBlurText,
-  M as default
+import { useEffect as e, useMemo as t, useRef as n, useState as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Typography as o } from "@mui/material";
+import { motion as s } from "framer-motion";
+//#region lib/s-blur-text/s-blur-text.tsx
+var c = (e, t) => {
+	let n = new Set([...Object.keys(e), ...t.flatMap((e) => Object.keys(e))]), r = {};
+	return n.forEach((n) => {
+		r[n] = [e[n], ...t.map((e) => e[n])];
+	}), r;
+}, l = ({ text: l, delay: u = 100, animateBy: d = "words", direction: f = "top", threshold: p = .1, rootMargin: m = "0px", animationFrom: h, animationTo: g, easing: _ = (e) => e, onAnimationComplete: v, stepDuration: y = .35, variant: b = "body1", sx: x, ...S }) => {
+	let C = d === "words" ? l.split(" ") : l.split(""), [w, T] = r(!1), E = n(null);
+	e(() => {
+		if (!E.current) return;
+		let e = new IntersectionObserver(([t]) => {
+			t.isIntersecting && (T(!0), e.unobserve(E.current));
+		}, {
+			threshold: p,
+			rootMargin: m
+		});
+		return e.observe(E.current), () => e.disconnect();
+	}, [p, m]);
+	let D = t(() => f === "top" ? {
+		filter: "blur(10px)",
+		opacity: 0,
+		y: -50
+	} : {
+		filter: "blur(10px)",
+		opacity: 0,
+		y: 50
+	}, [f]), O = t(() => [{
+		filter: "blur(5px)",
+		opacity: .5,
+		y: f === "top" ? 5 : -5
+	}, {
+		filter: "blur(0px)",
+		opacity: 1,
+		y: 0
+	}], [f]), k = h ?? D, A = g ?? O, j = A.length + 1, M = y * (j - 1), N = Array.from({ length: j }, (e, t) => j === 1 ? 0 : t / (j - 1));
+	return /* @__PURE__ */ i(o, {
+		ref: E,
+		variant: b,
+		sx: x,
+		...S,
+		children: C.map((e, t) => {
+			let n = c(k, A), r = {
+				duration: M,
+				times: N,
+				delay: t * u / 1e3,
+				ease: _
+			};
+			return /* @__PURE__ */ a(s.span, {
+				initial: k,
+				animate: w ? n : k,
+				transition: r,
+				onAnimationComplete: t === C.length - 1 ? v : void 0,
+				style: {
+					display: "inline-block",
+					willChange: "transform, filter, opacity"
+				},
+				children: [e === " " ? "\xA0" : e, d === "words" && t < C.length - 1 && "\xA0"]
+			}, t);
+		})
+	});
 };
+l.displayName = "SBlurText";
+//#endregion
+export { l as SBlurText, l as default };

package/dist/s-breadcrumbs/index.js

@@ -1,4 +1,3 @@
+import "../createTheme-DuS5_nJb.js";
 import { SBreadcrumbs as e } from "./s-breadcrumbs.js";
-export {
-  e as default
-};
+export { e as default };

package/dist/s-breadcrumbs/s-breadcrumbs.js

@@ -1,44 +1,49 @@
-import { j as o } from "../jsx-runtime-tc70JA_2.js";
-import { forwardRef as f } from "react";
-import { C as i } from "../ChevronRight-DbWSr8yz.js";
-import { Breadcrumbs as $, Typography as t, Link as e } from "@mui/material";
-const j = f(
-  ({
-    items: a,
-    separator: u = /* @__PURE__ */ o.jsx(i, { fontSize: "small" }),
-    LinkComponent: s,
-    currentColor: c = "text.primary",
-    linkColor: n = "primary.main",
-    sx: b,
-    ...h
-  }, p) => /* @__PURE__ */ o.jsx($, { ref: p, separator: u, sx: b, ...h, children: a.map((r, l) => {
-    const d = l === a.length - 1;
-    return r.isCurrent ?? d ? /* @__PURE__ */ o.jsx(t, { color: c, children: r.label }, `${r.label}-${l}`) : r.onClick ? /* @__PURE__ */ o.jsx(
-      e,
-      {
-        component: "button",
-        onClick: r.onClick,
-        color: n,
-        underline: "hover",
-        sx: { cursor: "pointer", background: "none", border: "none", padding: 0, font: "inherit" },
-        children: r.label
-      },
-      `${r.label}-${l}`
-    ) : r.to ? s ? /* @__PURE__ */ o.jsx(
-      e,
-      {
-        component: s,
-        to: r.to,
-        color: n,
-        underline: "hover",
-        children: r.label
-      },
-      `${r.label}-${l}`
-    ) : /* @__PURE__ */ o.jsx(e, { href: r.to, color: n, underline: "hover", children: r.label }, `${r.label}-${l}`) : /* @__PURE__ */ o.jsx(t, { color: c, children: r.label }, `${r.label}-${l}`);
-  }) })
-);
-j.displayName = "SBreadcrumbs";
-export {
-  j as SBreadcrumbs,
-  j as default
-};
+import "../createTheme-DuS5_nJb.js";
+import { t as e } from "../ChevronRight-VFk57Tte.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Breadcrumbs as r, Link as i, Typography as a } from "@mui/material";
+//#region lib/s-breadcrumbs/s-breadcrumbs.tsx
+var o = t(({ items: t, separator: o = /* @__PURE__ */ n(e, { fontSize: "small" }), LinkComponent: s, currentColor: c = "text.primary", linkColor: l = "primary.main", sx: u, ...d }, f) => /* @__PURE__ */ n(r, {
+	ref: f,
+	separator: o,
+	sx: u,
+	...d,
+	children: t.map((e, r) => {
+		let o = r === t.length - 1;
+		return e.isCurrent ?? o ? /* @__PURE__ */ n(a, {
+			color: c,
+			children: e.label
+		}, `${e.label}-${r}`) : e.onClick ? /* @__PURE__ */ n(i, {
+			component: "button",
+			onClick: e.onClick,
+			color: l,
+			underline: "hover",
+			sx: {
+				cursor: "pointer",
+				background: "none",
+				border: "none",
+				padding: 0,
+				font: "inherit"
+			},
+			children: e.label
+		}, `${e.label}-${r}`) : e.to ? s ? /* @__PURE__ */ n(i, {
+			component: s,
+			to: e.to,
+			color: l,
+			underline: "hover",
+			children: e.label
+		}, `${e.label}-${r}`) : /* @__PURE__ */ n(i, {
+			href: e.to,
+			color: l,
+			underline: "hover",
+			children: e.label
+		}, `${e.label}-${r}`) : /* @__PURE__ */ n(a, {
+			color: c,
+			children: e.label
+		}, `${e.label}-${r}`);
+	})
+}));
+o.displayName = "SBreadcrumbs";
+//#endregion
+export { o as SBreadcrumbs, o as default };

package/dist/s-button/index.js

@@ -1,4 +1,2 @@
-import { SButton as a } from "./s-button.js";
-export {
-  a as default
-};
+import { SButton as e } from "./s-button.js";
+export { e as default };