@solostylist/ui-kit 2.0.1 → 2.0.2

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 { 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";
+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";
 //#region lib/s-breadcrumbs/s-breadcrumbs.tsx
-var f = l(o, {
+var f = u(s, {
 	name: "SBreadcrumbs",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -27,11 +27,11 @@ var f = l(o, {
 		"&:active": { backgroundColor: i.action.selected },
 		[t]: { "&:hover": { backgroundColor: i.action.hover } }
 	} };
-}), p = i((t, n) => {
-	let r = u({
+}), p = a((t, n) => {
+	let r = d({
 		props: t,
 		name: "SBreadcrumbs"
-	}), { items: i, separator: o = /* @__PURE__ */ a(d, { fontSize: "small" }), LinkComponent: l, currentColor: p = "text.primary", linkColor: m = "primary.main", sx: h, ...g } = r, _ = {
+	}), { items: a, separator: s = /* @__PURE__ */ o(i, { fontSize: "small" }), LinkComponent: u, currentColor: p = "text.primary", linkColor: m = "primary.main", sx: h, ...g } = r, _ = {
 		...r,
 		currentColor: p,
 		linkColor: m
@@ -44,18 +44,18 @@ var f = l(o, {
 		"&::before": { display: "none" },
 		"&:hover": { textDecoration: "underline" }
 	};
-	return /* @__PURE__ */ a(f, {
+	return /* @__PURE__ */ o(f, {
 		ref: n,
 		ownerState: _,
-		separator: o,
+		separator: s,
 		sx: h,
 		...g,
-		children: i.map((t, n) => {
-			let r = n === i.length - 1, o = t.isCurrent ?? r, u = `${t.label}-${n}`;
-			return o ? /* @__PURE__ */ a(c, {
+		children: a.map((t, n) => {
+			let r = n === a.length - 1, i = t.isCurrent ?? r, s = `${t.label}-${n}`;
+			return i ? /* @__PURE__ */ o(l, {
 				sx: { color: p },
 				children: t.label
-			}, u) : t.onClick ? /* @__PURE__ */ a(s, {
+			}, s) : t.onClick ? /* @__PURE__ */ o(c, {
 				component: "button",
 				type: "button",
 				onClick: t.onClick,
@@ -68,18 +68,18 @@ var f = l(o, {
 					font: "inherit"
 				}],
 				children: t.label
-			}, u) : t.to ? /* @__PURE__ */ a(s, {
+			}, s) : t.to ? /* @__PURE__ */ o(c, {
 				color: m,
 				sx: v,
-				...l ? {
-					component: l,
+				...u ? {
+					component: u,
 					to: t.to
 				} : { href: t.to },
 				children: t.label
-			}, u) : /* @__PURE__ */ a(c, {
+			}, s) : /* @__PURE__ */ o(l, {
 				sx: { color: p },
 				children: t.label
-			}, u);
+			}, s);
 		})
 	});
 });

package/dist/s-carousel/index.js

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

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

@@ -17,6 +17,8 @@ export interface SCarouselSlotProps {
     dots?: Omit<BoxProps<'ul'>, 'ref'>;
     nextButton?: SIconButtonProps;
     previousButton?: SIconButtonProps;
+    /** Props for the Embla overflow viewport. */
+    viewport?: Omit<BoxProps<'div'>, 'children' | 'ref'>;
 }
 export interface SCarouselProps extends Omit<BoxProps, 'children' | 'component'> {
     /** Carousel slides. */

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

@@ -1,184 +1,2 @@
-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 ee } from "@mui/material";
-import _ from "embla-carousel-autoplay";
-import v from "embla-carousel-react";
-//#region lib/s-carousel/s-carousel.tsx
-var y = 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"
-	}
-}), b = h("div", { shouldForwardProp: (e) => e !== "centerPadding" })(({ centerPadding: e }) => ({
-	overflow: "hidden",
-	...e && { padding: `0 ${e}` }
-})), te = h("div")({
-	display: "flex",
-	touchAction: "pan-y pinch-zoom"
-}), ne = 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"
-})), re = 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 }
-	}
-})), ie = 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 ae(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 x(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 = ee({
-		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: R, ...z } = S, B = g(), V = x(O, I), H = s(() => A ? [_({
-		delay: j,
-		stopOnInteraction: !1
-	})] : [], [A, j]), [U, W] = v({
-		loop: M,
-		duration: Math.round(N / 20),
-		align: P ? "center" : "start",
-		direction: B.direction === "rtl" ? "rtl" : "ltr",
-		slidesToScroll: 1
-	}, H), [G, K] = c([]), [q, J] = c(0), [oe, se] = c(!1), [ce, le] = c(!1), Y = a(() => {
-		W && (K(W.scrollSnapList()), J(W.selectedScrollSnap()), se(W.canScrollPrev()), le(W.canScrollNext()));
-	}, [W]);
-	o(() => {
-		if (W) return Y(), W.on("select", Y), W.on("reInit", Y), () => {
-			W.off("select", Y), W.off("reInit", Y);
-		};
-	}, [W, Y]), n.useImperativeHandle(C, () => W ?? null, [W]);
-	let X = r.toArray(w), Z = L?.previousButton, Q = L?.nextButton, $ = L?.dots, ue = {
-		...S,
-		activeSlidesToShow: V,
-		selectedIndex: q
-	};
-	return /* @__PURE__ */ d(y, {
-		...z,
-		ownerState: ue,
-		ref: h,
-		sx: R,
-		children: [
-			/* @__PURE__ */ u(b, {
-				ref: U,
-				centerPadding: P ? F : void 0,
-				children: /* @__PURE__ */ u(te, { children: X.map((e, t) => /* @__PURE__ */ u(ne, {
-					slidesToShow: V,
-					spaceBetween: k,
-					children: e
-				}, ae(e, t))) })
-			}),
-			D && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
-				"aria-label": "Previous slide",
-				...Z,
-				className: ["carousel-arrow prev", Z?.className].filter(Boolean).join(" "),
-				onClick: (e) => {
-					Z?.onClick?.(e), e.defaultPrevented || W?.scrollPrev();
-				},
-				disabled: Z?.disabled || !M && !oe,
-				sx: e(Z?.sx),
-				children: /* @__PURE__ */ u(f, {})
-			}), /* @__PURE__ */ u(t, {
-				"aria-label": "Next slide",
-				...Q,
-				className: ["carousel-arrow next", Q?.className].filter(Boolean).join(" "),
-				onClick: (e) => {
-					Q?.onClick?.(e), e.defaultPrevented || W?.scrollNext();
-				},
-				disabled: Q?.disabled || !M && !ce,
-				sx: e(Q?.sx),
-				children: /* @__PURE__ */ u(p, {})
-			})] }),
-			E && G.length > 0 && /* @__PURE__ */ u(re, {
-				...$,
-				sx: [{ mt: 4 }, ...e($?.sx)],
-				children: G.map((e, n) => /* @__PURE__ */ u(m, {
-					component: "li",
-					className: n === q ? "active" : "",
-					sx: { display: "flex" },
-					children: /* @__PURE__ */ u(t, {
-						"aria-label": `Go to slide ${n + 1}`,
-						onClick: () => W?.scrollTo(n),
-						sx: {
-							width: "100%",
-							height: "100%",
-							minWidth: 0,
-							p: 0
-						},
-						children: /* @__PURE__ */ u(ie, { dotColor: T })
-					})
-				}, e))
-			})
-		]
-	});
-});
-S.displayName = "SCarousel";
-//#endregion
-export { S as SCarousel, S as default };
+import { t as e } from "../s-carousel-CAyAl3ka.js";
+export { e as SCarousel, e as default };