@solostylist/ui-kit 2.0.2 → 2.0.4

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

@@ -1,12 +1,12 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { actionHoverMedia as t, getFocusVisibleStyle as n } from "../theme/components/action-styles.js";
 import { paginationDimensions as r } from "../s-pagination/types.js";
-import { t as i } from "../ChevronRight-DsPfsFKB.js";
-import { forwardRef as a } from "react";
-import { jsx as o } from "react/jsx-runtime";
-import { Breadcrumbs as s, Link as c, Typography as l, styled as u, useThemeProps as d } from "@mui/material";
+import { forwardRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { Breadcrumbs as o, Link as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
+import d from "@mui/icons-material/ChevronRight";
 //#region lib/s-breadcrumbs/s-breadcrumbs.tsx
-var f = u(s, {
+var f = l(o, {
 	name: "SBreadcrumbs",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -27,11 +27,11 @@ var f = u(s, {
 		"&:active": { backgroundColor: i.action.selected },
 		[t]: { "&:hover": { backgroundColor: i.action.hover } }
 	} };
-}), p = a((t, n) => {
-	let r = d({
+}), p = i((t, n) => {
+	let r = u({
 		props: t,
 		name: "SBreadcrumbs"
-	}), { items: a, separator: s = /* @__PURE__ */ o(i, { fontSize: "small" }), LinkComponent: u, currentColor: p = "text.primary", linkColor: m = "primary.main", sx: h, ...g } = r, _ = {
+	}), { items: i, separator: o = /* @__PURE__ */ a(d, { fontSize: "small" }), LinkComponent: l, currentColor: p = "text.primary", linkColor: m = "primary.main", sx: h, ...g } = r, _ = {
 		...r,
 		currentColor: p,
 		linkColor: m
@@ -44,18 +44,18 @@ var f = u(s, {
 		"&::before": { display: "none" },
 		"&:hover": { textDecoration: "underline" }
 	};
-	return /* @__PURE__ */ o(f, {
+	return /* @__PURE__ */ a(f, {
 		ref: n,
 		ownerState: _,
-		separator: s,
+		separator: o,
 		sx: h,
 		...g,
-		children: a.map((t, n) => {
-			let r = n === a.length - 1, i = t.isCurrent ?? r, s = `${t.label}-${n}`;
-			return i ? /* @__PURE__ */ o(l, {
+		children: i.map((t, n) => {
+			let r = n === i.length - 1, o = t.isCurrent ?? r, u = `${t.label}-${n}`;
+			return o ? /* @__PURE__ */ a(c, {
 				sx: { color: p },
 				children: t.label
-			}, s) : t.onClick ? /* @__PURE__ */ o(c, {
+			}, u) : t.onClick ? /* @__PURE__ */ a(s, {
 				component: "button",
 				type: "button",
 				onClick: t.onClick,
@@ -68,18 +68,18 @@ var f = u(s, {
 					font: "inherit"
 				}],
 				children: t.label
-			}, s) : t.to ? /* @__PURE__ */ o(c, {
+			}, u) : t.to ? /* @__PURE__ */ a(s, {
 				color: m,
 				sx: v,
-				...u ? {
-					component: u,
+				...l ? {
+					component: l,
 					to: t.to
 				} : { href: t.to },
 				children: t.label
-			}, s) : /* @__PURE__ */ o(l, {
+			}, u) : /* @__PURE__ */ a(c, {
 				sx: { color: p },
 				children: t.label
-			}, s);
+			}, u);
 		})
 	});
 });

package/dist/s-carousel/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-carousel-CAyAl3ka.js";
+import { SCarousel as e } from "./s-carousel.js";
 export { e as SCarousel, e as default };

package/dist/s-carousel/s-carousel.js

@@ -1,2 +1,186 @@
-import { t as e } from "../s-carousel-CAyAl3ka.js";
-export { e as SCarousel, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import * as n from "react";
+import { Children as r, forwardRef as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ArrowBackIosNew as f, ArrowForwardIos as p } from "@mui/icons-material";
+import { Box as m, styled as h, useTheme as g, useThemeProps as _ } from "@mui/material";
+import v from "embla-carousel-autoplay";
+import y from "embla-carousel-react";
+//#region lib/s-carousel/s-carousel.tsx
+var b = h(m, {
+	name: "SCarousel",
+	slot: "Root"
+})({
+	position: "relative",
+	".carousel-arrow": {
+		position: "absolute",
+		top: "50%",
+		transform: "translate(0, -50%)",
+		zIndex: 1,
+		opacity: 0,
+		transition: "opacity 0.3s ease-in-out",
+		pointerEvents: "none",
+		"&.next": { right: 6 },
+		"&.prev": { left: 6 }
+	},
+	":hover": { ".carousel-arrow": {
+		opacity: 1,
+		pointerEvents: "auto"
+	} },
+	".carousel-arrow.Mui-focusVisible": {
+		opacity: 1,
+		pointerEvents: "auto"
+	}
+}), x = h("div", { shouldForwardProp: (e) => e !== "centerPadding" && e !== "sx" })(({ centerPadding: e }) => ({
+	overflow: "hidden",
+	...e && { padding: `0 ${e}` }
+})), ee = h("div")({
+	display: "flex",
+	touchAction: "pan-y pinch-zoom"
+}), te = h("div", { shouldForwardProp: (e) => e !== "slidesToShow" && e !== "spaceBetween" })(({ slidesToShow: e, spaceBetween: t }) => ({
+	flex: `0 0 calc(100% / ${e})`,
+	minWidth: 0,
+	paddingInline: `${t / 2}px`,
+	boxSizing: "border-box"
+})), ne = h("ul")(({ theme: e }) => ({
+	gap: 6,
+	zIndex: 1,
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: (e.vars ?? e).palette.primary.main,
+	"& li": {
+		width: 13,
+		height: 7,
+		display: "flex",
+		cursor: "pointer",
+		alignItems: "center",
+		justifyContent: "center",
+		transition: "all 0.4s",
+		"&.active span": { opacity: 1 },
+		"&.active": { width: 18 }
+	}
+})), re = h("span", { shouldForwardProp: (e) => e !== "dotColor" })(({ dotColor: e, theme: t }) => ({
+	width: "100%",
+	height: "100%",
+	borderRadius: t.radius.full,
+	cursor: "pointer",
+	position: "relative",
+	backgroundColor: e ?? (t.vars ?? t).palette.primary.main,
+	opacity: .35
+}));
+function ie(e, t) {
+	return typeof e == "string" || typeof e == "number" ? e : e && typeof e == "object" && "key" in e && e.key != null ? e.key : `slide-${t + 1}`;
+}
+function ae(e, t) {
+	let [n, r] = c(e);
+	return o(() => {
+		function n() {
+			if (!t?.length) {
+				r(e);
+				return;
+			}
+			let n = window.innerWidth, i = [...t].sort((e, t) => e.breakpoint - t.breakpoint), a = e;
+			for (let t of i) if (n <= t.breakpoint) {
+				a = t.settings.slidesToShow ?? e;
+				break;
+			}
+			r(a);
+		}
+		return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+	}, [e, t]), n;
+}
+var S = i(function(i, h) {
+	let S = _({
+		props: i,
+		name: "SCarousel"
+	}), { apiRef: C, children: w, dotColor: T, dots: E = !1, arrows: D = !0, slidesToShow: O = 4, spaceBetween: k = 4, autoplay: A = !1, autoplaySpeed: j = 3e3, infinite: M = !0, speed: N = 500, centerMode: P = !1, centerPadding: F = "60px", responsive: I, slotProps: L, sx: oe, ...R } = S, z = g(), B = ae(O, I), V = s(() => A ? [v({
+		delay: j,
+		stopOnInteraction: !1
+	})] : [], [A, j]), [H, U] = y({
+		loop: M,
+		duration: Math.round(N / 20),
+		align: P ? "center" : "start",
+		direction: z.direction === "rtl" ? "rtl" : "ltr",
+		slidesToScroll: 1
+	}, V), [W, G] = c([]), [K, q] = c(0), [se, ce] = c(!1), [le, ue] = c(!1), J = a(() => {
+		U && (G(U.scrollSnapList()), q(U.selectedScrollSnap()), ce(U.canScrollPrev()), ue(U.canScrollNext()));
+	}, [U]);
+	o(() => {
+		if (U) return J(), U.on("select", J), U.on("reInit", J), () => {
+			U.off("select", J), U.off("reInit", J);
+		};
+	}, [U, J]), n.useImperativeHandle(C, () => U ?? null, [U]);
+	let Y = r.toArray(w), X = L?.previousButton, Z = L?.nextButton, Q = L?.dots, $ = L?.viewport, de = {
+		...S,
+		activeSlidesToShow: B,
+		selectedIndex: K
+	};
+	return /* @__PURE__ */ d(b, {
+		...R,
+		ownerState: de,
+		ref: h,
+		sx: oe,
+		children: [
+			/* @__PURE__ */ u(x, {
+				...$,
+				centerPadding: P ? F : void 0,
+				ref: H,
+				sx: e($?.sx),
+				children: /* @__PURE__ */ u(ee, { children: Y.map((e, t) => /* @__PURE__ */ u(te, {
+					slidesToShow: B,
+					spaceBetween: k,
+					children: e
+				}, ie(e, t))) })
+			}),
+			D && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+				"aria-label": "Previous slide",
+				...X,
+				className: ["carousel-arrow prev", X?.className].filter(Boolean).join(" "),
+				onClick: (e) => {
+					X?.onClick?.(e), e.defaultPrevented || U?.scrollPrev();
+				},
+				disabled: X?.disabled || !M && !se,
+				sx: e(X?.sx),
+				children: /* @__PURE__ */ u(f, {})
+			}), /* @__PURE__ */ u(t, {
+				"aria-label": "Next slide",
+				...Z,
+				className: ["carousel-arrow next", Z?.className].filter(Boolean).join(" "),
+				onClick: (e) => {
+					Z?.onClick?.(e), e.defaultPrevented || U?.scrollNext();
+				},
+				disabled: Z?.disabled || !M && !le,
+				sx: e(Z?.sx),
+				children: /* @__PURE__ */ u(p, {})
+			})] }),
+			E && W.length > 0 && /* @__PURE__ */ u(ne, {
+				...Q,
+				sx: [{ mt: 4 }, ...e(Q?.sx)],
+				children: W.map((e, n) => /* @__PURE__ */ u(m, {
+					component: "li",
+					className: n === K ? "active" : "",
+					sx: { display: "flex" },
+					children: /* @__PURE__ */ u(t, {
+						"aria-label": `Go to slide ${n + 1}`,
+						onClick: () => U?.scrollTo(n),
+						sx: {
+							width: "100%",
+							height: "100%",
+							minWidth: 0,
+							p: 0
+						},
+						children: /* @__PURE__ */ u(re, { dotColor: T })
+					})
+				}, e))
+			})
+		]
+	});
+});
+S.displayName = "SCarousel";
+//#endregion
+export { S as SCarousel, S as default };

package/dist/s-category-card/s-category-card.js

@@ -1,9 +1,9 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../appendOwnerState-CFQTq3pb.js";
-import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
-import * as r from "react";
-import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
-import { ButtonBase as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
+import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ButtonBase as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import u from "@mui/utils/appendOwnerState";
 //#region lib/s-category-card/s-category-card.tsx
 var d = ({ ownerState: e, theme: t }) => ({
 	borderRadius: t.shape.borderRadius,
@@ -26,13 +26,13 @@ var d = ({ ownerState: e, theme: t }) => ({
 	},
 	...!e.disableHoverEffect && { "@media (hover: hover) and (pointer: fine)": { "&:hover img": { transform: `scale(${e.hoverScale})` } } },
 	"@media (prefers-reduced-motion: reduce)": { "& img": { transition: "none" } }
-}), f = l(s, {
+}), f = c(o, {
 	name: "SCategoryCard",
 	slot: "Root"
-})(d), p = l("div", {
+})(d), p = c("div", {
 	name: "SCategoryCard",
 	slot: "Root"
-})(d), m = l(c, {
+})(d), m = c(s, {
 	name: "SCategoryCard",
 	slot: "Title"
 })(({ ownerState: e, theme: t }) => ({
@@ -58,40 +58,40 @@ function g(e) {
 	let t = { ...e };
 	return delete t.action, delete t.centerRipple, delete t.classes, delete t.disabled, delete t.disableRipple, delete t.disableTouchRipple, delete t.focusRipple, delete t.focusVisibleClassName, delete t.LinkComponent, delete t.nativeButton, delete t.onFocusVisible, delete t.TouchRippleProps, delete t.touchRippleRef, delete t.type, t;
 }
-var _ = r.forwardRef(function(r, s) {
-	let c = u({
-		props: r,
+var _ = n.forwardRef(function(n, o) {
+	let s = l({
+		props: n,
 		name: "SCategoryCard"
-	}), { alt: l = "", disableHoverEffect: d = !1, hoverScale: _ = 1.1, image: v, slotProps: y, slots: b, sx: x, title: S, titleAlignment: C = "center", titlePosition: w = "bottom", ...T } = c, E = {
-		...c,
+	}), { alt: c = "", disableHoverEffect: d = !1, hoverScale: _ = 1.1, image: v, slotProps: y, slots: b, sx: x, title: S, titleAlignment: C = "center", titlePosition: w = "bottom", ...T } = s, E = {
+		...s,
 		disableHoverEffect: d,
 		hoverScale: _,
-		interactive: typeof c.onClick == "function",
+		interactive: typeof s.onClick == "function",
 		titleAlignment: C,
 		titlePosition: w
-	}, D = b?.image ?? n, O = b?.title ?? m, k = h(y?.image, E), A = h(y?.title, E), j = t(b?.image, k ?? {}, E), { sx: M, ...N } = A ?? {}, P = t(O, {
+	}, D = b?.image ?? t, O = b?.title ?? m, k = h(y?.image, E), A = h(y?.title, E), j = u(b?.image, k ?? {}, E), { sx: M, ...N } = A ?? {}, P = u(O, {
 		variant: "body1",
 		...N,
 		sx: e(M)
-	}, E), F = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(D, {
+	}, E), F = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(D, {
 		variant: "rectangular",
 		...j,
-		alt: l,
+		alt: c,
 		src: v
-	}), /* @__PURE__ */ a(O, {
+	}), /* @__PURE__ */ i(O, {
 		...P,
 		children: S
 	})] });
-	return E.interactive ? /* @__PURE__ */ a(f, {
+	return E.interactive ? /* @__PURE__ */ i(f, {
 		...T,
 		ownerState: E,
-		ref: s,
+		ref: o,
 		sx: e(x),
 		children: F
-	}) : /* @__PURE__ */ a(p, {
+	}) : /* @__PURE__ */ i(p, {
 		...g(T),
 		ownerState: E,
-		ref: s,
+		ref: o,
 		sx: e(x),
 		children: F
 	});

package/dist/s-chat-input/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-chat-input-T3gyan60.js";
+import { SChatInput as e } from "./s-chat-input.js";
 export { e as SChatInput, e as default };