@solostylist/ui-kit 1.0.202 → 1.0.204

package/dist/s-action-overlay/s-action-overlay.d.ts

@@ -51,10 +51,6 @@ export interface SActionOverlayProps {
     /** Callback when overlay visibility changes */
     onVisibilityChange?: (visible: boolean) => void;
 }
-/**
- * A flexible overlay component that displays action buttons on top of content.
- * Supports hover-based or controlled visibility, multiple positioning options, and customizable backdrop effects.
- */
 export declare const SActionOverlay: {
     ({ actions, maxWidth, columns, children, showOnHover, visible: controlledVisible, position, backdropColor, backdropOpacity, blurAmount, borderRadius, overlaySx, onVisibilityChange, }: SActionOverlayProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

package/dist/s-autocomplete/index.js

@@ -1,4 +1,3 @@
-import { SAutocomplete as t } from "./s-autocomplete.js";
-export {
-  t as default
-};
+import "../jsx-runtime-V-UOMaX1.js";
+import { SAutocomplete as e } from "./s-autocomplete.js";
+export { e as default };

package/dist/s-autocomplete/s-autocomplete.d.ts

@@ -31,10 +31,5 @@ export interface SAutocompleteComponent {
     }): React.JSX.Element;
     displayName?: string;
 }
-/**
- * A standardized autocomplete/combobox component that wraps Material-UI Autocomplete
- * with consistent form labeling, validation, and help text patterns. Maintains full
- * Material-UI API compatibility while providing enhanced form integration.
- */
 export declare const SAutocomplete: SAutocompleteComponent;
 export default SAutocomplete;

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

package/dist/s-avatar/index.js

@@ -1,4 +1,3 @@
-import { SAvatar as t } from "./s-avatar.js";
-export {
-  t as default
-};
+import "../jsx-runtime-V-UOMaX1.js";
+import { SAvatar as e } from "./s-avatar.js";
+export { e as default };

package/dist/s-avatar/s-avatar.d.ts

@@ -14,10 +14,6 @@ export interface SAvatarProps {
     /** Additional props to pass to the underlying Material-UI Avatar component */
     avatarProps?: AvatarProps;
 }
-/**
- * A flexible avatar component that displays user profile images with fallback to initials.
- * Built on Material-UI Avatar with optional name display and customizable sizing.
- */
 export declare const SAvatar: {
     ({ avatar, name, showName, size, avatarProps }: SAvatarProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

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

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

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

package/dist/s-blur-text/s-blur-text.d.ts

@@ -27,8 +27,5 @@ export interface SBlurTextProps extends Omit<TypographyProps, 'children'> {
     /** Duration of each animation step in seconds */
     stepDuration?: number;
 }
-/**
- * A Typography component that animates text with a blur effect when it comes into view.
- */
 export declare const SBlurText: React.FC<SBlurTextProps>;
 export default SBlurText;

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

package/dist/s-breadcrumbs/index.js

@@ -1,4 +1,4 @@
+import "../createTheme-CMuiGmV-.js";
+import "../jsx-runtime-V-UOMaX1.js";
 import { SBreadcrumbs as e } from "./s-breadcrumbs.js";
-export {
-  e as default
-};
+export { e as default };

package/dist/s-breadcrumbs/s-breadcrumbs.d.ts

@@ -30,8 +30,5 @@ export interface SBreadcrumbsProps extends Omit<BreadcrumbsProps, 'children'> {
     /** System prop for custom styling */
     sx?: SxProps<Theme>;
 }
-/**
- * A breadcrumb navigation component for displaying hierarchical navigation paths.
- */
 export declare const SBreadcrumbs: React.ForwardRefExoticComponent<Omit<SBreadcrumbsProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SBreadcrumbs;