@solostylist/ui-kit 2.0.2 → 2.0.4

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

@@ -1,2 +1,266 @@
-import { t as e } from "../s-image-viewer-CjK67-rs.js";
-export { e as SImageViewer, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { DefaultMediaItem as t } from "./default-media-item.js";
+import { ImageViewerThumbnailDock as n } from "./image-viewer-thumbnail-dock.js";
+import { useImageViewerNavigation as r } from "./use-image-viewer-navigation.js";
+import { styled as i, useThemeProps as a } from "@mui/material/styles";
+import o from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronLeft as u, ChevronRight as d, Close as f } from "@mui/icons-material";
+import { Box as p, IconButton as m, Modal as h, Paper as g, Typography as _ } from "@mui/material";
+import { mergeSlotProps as v } from "@mui/material/utils";
+import { AnimatePresence as y, motion as b, useReducedMotion as x } from "framer-motion";
+//#region lib/s-image-viewer/s-image-viewer.tsx
+var S = i(h, {
+	name: "SImageViewer",
+	slot: "Root"
+})({}), C = o.forwardRef(function(i, o) {
+	let h = a({
+		props: i,
+		name: "SImageViewer"
+	}), { "aria-label": C, "aria-labelledby": w, selectedItem: T, defaultSelectedItem: E, open: D, onClose: O, onCloseButtonClick: k, onItemChange: A, mediaItems: j = [], renderMediaItem: M, showNavigation: N = !0, showThumbnailDock: P = !0, showCounter: F = !0, closeText: I = "Close", previousText: L = "Previous image", nextText: R = "Next image", getThumbnailLabel: z, slotProps: B, sx: V, ...H } = h, { currentSelectedItem: U, navigationEnabled: W, currentIndex: G, totalItems: K, selectItem: q, goToPrevious: J, goToNext: Y, handleKeyDown: X } = r({
+		selectedItem: T,
+		defaultSelectedItem: E,
+		onItemChange: A,
+		mediaItems: j,
+		showNavigation: N
+	}), Z = {
+		...h,
+		currentIndex: G,
+		navigationEnabled: W
+	}, Q = x();
+	return U ? /* @__PURE__ */ c(S, {
+		...H,
+		ownerState: Z,
+		open: D,
+		onClose: O,
+		ref: o,
+		sx: [(e) => ({ zIndex: e.zIndex.modal + 100 }), ...e(V)],
+		slotProps: {
+			...B,
+			backdrop: v(B?.backdrop, { sx: {
+				backdropFilter: "blur(8px)",
+				zIndex: (e) => e.zIndex.modal + 99
+			} })
+		},
+		children: /* @__PURE__ */ l(p, {
+			onKeyDown: X,
+			children: [/* @__PURE__ */ c(b.div, {
+				initial: Q ? !1 : { scale: .98 },
+				animate: { scale: 1 },
+				exit: Q ? void 0 : { scale: .98 },
+				transition: Q ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 400,
+					damping: 30
+				},
+				children: /* @__PURE__ */ l(g, {
+					"aria-label": C,
+					"aria-labelledby": w,
+					"aria-modal": !0,
+					role: "dialog",
+					sx: {
+						position: "fixed",
+						inset: 0,
+						width: "100%",
+						minHeight: "100vh",
+						borderRadius: 0,
+						overflow: "hidden",
+						zIndex: (e) => e.zIndex.modal + 101
+					},
+					children: [
+						/* @__PURE__ */ c(p, {
+							sx: {
+								height: "100%",
+								display: "flex",
+								flexDirection: "column"
+							},
+							children: /* @__PURE__ */ c(p, {
+								sx: {
+									flex: 1,
+									p: {
+										xs: 1,
+										sm: 2,
+										md: 3
+									},
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									bgcolor: "background.default"
+								},
+								children: /* @__PURE__ */ c(y, {
+									initial: !Q,
+									mode: "wait",
+									children: /* @__PURE__ */ c(b.div, {
+										style: { position: "relative" },
+										initial: Q ? !1 : {
+											y: 20,
+											scale: .97
+										},
+										animate: {
+											y: 0,
+											scale: 1,
+											transition: Q ? { duration: 0 } : {
+												type: "spring",
+												stiffness: 500,
+												damping: 30,
+												mass: .5
+											}
+										},
+										exit: Q ? void 0 : {
+											y: 20,
+											scale: .97,
+											transition: { duration: .15 }
+										},
+										children: /* @__PURE__ */ l(g, {
+											onClick: (e) => e.stopPropagation(),
+											sx: {
+												position: "relative",
+												width: "100%",
+												aspectRatio: "16 / 9",
+												maxWidth: {
+													xs: "95%",
+													sm: "85%",
+													md: 960
+												},
+												height: "70vh",
+												borderRadius: 1,
+												border: "1px solid",
+												borderColor: "divider",
+												overflow: "hidden",
+												bgcolor: "grey.900"
+											},
+											children: [M ? M(U) : /* @__PURE__ */ c(t, { item: U }), (U.title || U.desc) && /* @__PURE__ */ l(p, {
+												sx: {
+													position: "absolute",
+													left: 0,
+													right: 0,
+													bottom: 0,
+													p: {
+														xs: 1.5,
+														sm: 2,
+														md: 3
+													},
+													color: "common.white",
+													gradient: "overlay.media"
+												},
+												onClick: (e) => e.stopPropagation(),
+												children: [U.title && /* @__PURE__ */ c(_, {
+													variant: "h6",
+													sx: { fontSize: {
+														xs: 14,
+														sm: 18,
+														md: 20
+													} },
+													children: U.title
+												}), U.desc && /* @__PURE__ */ c(_, {
+													variant: "body2",
+													sx: { mt: .5 },
+													children: U.desc
+												})]
+											})]
+										})
+									}, U.id)
+								})
+							})
+						}),
+						/* @__PURE__ */ c(m, {
+							"aria-label": I,
+							onClick: k,
+							sx: {
+								position: "absolute",
+								top: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								right: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								zIndex: (e) => e.zIndex.modal + 102
+							},
+							children: /* @__PURE__ */ c(f, {})
+						}),
+						F && W && /* @__PURE__ */ l(p, {
+							sx: {
+								position: "absolute",
+								top: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								left: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								zIndex: (e) => e.zIndex.modal + 102,
+								padding: 1,
+								px: 2,
+								fontSize: {
+									xs: 14,
+									sm: 16
+								},
+								color: "text.primary"
+							},
+							children: [
+								G + 1,
+								" / ",
+								K
+							]
+						}),
+						W && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(m, {
+							"aria-label": L,
+							onClick: (e) => {
+								e.stopPropagation(), J(e);
+							},
+							disabled: G === 0,
+							sx: {
+								position: "absolute",
+								left: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								top: "50%",
+								transform: "translateY(-50%)",
+								zIndex: (e) => e.zIndex.modal + 102,
+								"&:disabled": { opacity: .5 }
+							},
+							children: /* @__PURE__ */ c(u, {})
+						}), /* @__PURE__ */ c(m, {
+							"aria-label": R,
+							onClick: (e) => {
+								e.stopPropagation(), Y(e);
+							},
+							disabled: G === K - 1,
+							sx: {
+								position: "absolute",
+								right: {
+									xs: 8,
+									sm: 10,
+									md: 12
+								},
+								top: "50%",
+								transform: "translateY(-50%)",
+								zIndex: (e) => e.zIndex.modal + 102,
+								"&:disabled": { opacity: .5 }
+							},
+							children: /* @__PURE__ */ c(d, {})
+						})] })
+					]
+				})
+			}), P && W && j.length > 1 && /* @__PURE__ */ c(n, {
+				mediaItems: j,
+				selectedItem: U,
+				onSelect: q,
+				renderMediaItem: M,
+				getThumbnailLabel: z
+			})]
+		})
+	}) : null;
+});
+C.displayName = "SImageViewer";
+//#endregion
+export { C as SImageViewer, C as default };

package/dist/s-image-viewer/use-image-viewer-navigation.js

@@ -1,5 +1,5 @@
-import { t as e } from "../useControlled-DqNPBJNp.js";
-import { useCallback as t } from "react";
+import { useCallback as e } from "react";
+import { useControlled as t } from "@mui/material/utils";
 //#region lib/s-image-viewer/use-image-viewer-navigation.ts
 var n = [
 	"a[href]",
@@ -28,21 +28,21 @@ var n = [
 	"[role=\"textbox\"]"
 ].join(", ");
 function r({ selectedItem: r, defaultSelectedItem: i, onItemChange: a, mediaItems: o, showNavigation: s }) {
-	let [c, l] = e({
+	let [c, l] = t({
 		controlled: r,
 		default: i ?? null,
 		name: "SImageViewer",
 		state: "selectedItem"
-	}), u = c ? o.findIndex((e) => e.id === c.id) : -1, d = !!(s && o.length > 1 && u >= 0), f = o.length, p = t((e, t, n) => {
+	}), u = c ? o.findIndex((e) => e.id === c.id) : -1, d = !!(s && o.length > 1 && u >= 0), f = o.length, p = e((e, t, n) => {
 		l(t), a?.(e, t, n);
-	}, [a, l]), m = t((e) => {
+	}, [a, l]), m = e((e) => {
 		d && u > 0 && p(e, o[u - 1], "previous");
 	}, [
 		d,
 		u,
 		o,
 		p
-	]), h = t((e) => {
+	]), h = e((e) => {
 		d && u < f - 1 && p(e, o[u + 1], "next");
 	}, [
 		d,
@@ -59,7 +59,7 @@ function r({ selectedItem: r, defaultSelectedItem: i, onItemChange: a, mediaItem
 		selectItem: p,
 		goToPrevious: m,
 		goToNext: h,
-		handleKeyDown: t((e) => {
+		handleKeyDown: e((e) => {
 			let t = e.target;
 			t instanceof Element && t.closest(n) || (e.key === "ArrowLeft" && d && u > 0 ? (e.preventDefault(), m(e)) : e.key === "ArrowRight" && d && u < f - 1 && (e.preventDefault(), h(e)));
 		}, [

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

@@ -1,25 +1,23 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
-import { t as n } from "../useForkRef-BuNFTXxE.js";
-import { t as r } from "../useEventCallback-DGCsaRIu.js";
-import { t as i } from "../appendOwnerState-CFQTq3pb.js";
-import { actionHoverMedia as a, getFocusVisibleStyle as o, reducedMotionMedia as s } from "../theme/components/action-styles.js";
-import { t as c } from "../mergeSlotProps-DC8r4QzS.js";
-import * as l from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Box as f, Card as p, CardActionArea as m, keyframes as h, styled as g, useThemeProps as _ } from "@mui/material";
+import { actionHoverMedia as n, getFocusVisibleStyle as r, reducedMotionMedia as i } from "../theme/components/action-styles.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, Card as l, CardActionArea as u, keyframes as d, styled as f, useThemeProps as p } from "@mui/material";
+import { mergeSlotProps as m, useEventCallback as h, useForkRef as g } from "@mui/material/utils";
+import _ from "@mui/utils/appendOwnerState";
 //#region lib/s-interactive-card/s-interactive-card.tsx
-var v = "55%", y = "-18deg", b = "-140%", x = h`
+var v = "55%", y = "-18deg", b = "-140%", x = d`
   from {
     transform: translateX(${b}) skewX(${y});
   }
   to {
     transform: translateX(${"260%"}) skewX(${y});
   }
-`, S = (e) => ({ [a]: { "&:hover": e } }), C = (e) => ({
+`, S = (e) => ({ [n]: { "&:hover": e } }), C = (e) => ({
 	...S(e),
 	"&:has(.Mui-focusVisible)": e
-}), w = g(p, {
+}), w = f(l, {
 	name: "SInteractiveCard",
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -32,7 +30,7 @@ var v = "55%", y = "-18deg", b = "-140%", x = h`
 		easing: e.transitions.easing.easeOut
 	}),
 	zIndex: 0,
-	[s]: { transition: "none" },
+	[i]: { transition: "none" },
 	variants: [
 		{
 			props: ({ ownerState: e }) => e.interactive && !e.disabled,
@@ -42,7 +40,7 @@ var v = "55%", y = "-18deg", b = "-140%", x = h`
 			props: ({ ownerState: e }) => e.interactive && !e.disabled && !e.disableLift,
 			style: {
 				...S({ transform: `translateY(calc(${e.spacing(1.5)} * -1)) scale(1.02)` }),
-				[s]: S({ transform: "none" })
+				[i]: S({ transform: "none" })
 			}
 		},
 		{
@@ -62,7 +60,7 @@ var v = "55%", y = "-18deg", b = "-140%", x = h`
 					zIndex: 2
 				},
 				...S({ "&::after": { animation: `${x} ${e.transitions.duration.complex}ms ${e.transitions.easing.easeOut} forwards` } }),
-				[s]: { "&::after": { content: "none" } }
+				[i]: { "&::after": { content: "none" } }
 			}
 		},
 		{
@@ -73,7 +71,7 @@ var v = "55%", y = "-18deg", b = "-140%", x = h`
 			}
 		}
 	]
-})), T = g(m, {
+})), T = f(u, {
 	name: "SInteractiveCard",
 	slot: "ActionArea",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -84,10 +82,10 @@ var v = "55%", y = "-18deg", b = "-140%", x = h`
 	textAlign: "inherit",
 	width: "100%",
 	"&.Mui-focusVisible": {
-		...o(e),
+		...r(e),
 		outlineOffset: -2
 	}
-})), E = g(f, {
+})), E = f(c, {
 	name: "SInteractiveCard",
 	slot: "Overlay",
 	shouldForwardProp: (e) => e !== "ownerState"
@@ -98,49 +96,49 @@ var v = "55%", y = "-18deg", b = "-140%", x = h`
 	pointerEvents: "none",
 	position: "absolute",
 	zIndex: 1
-}), D = l.forwardRef(function(a, o) {
-	let s = _({
-		props: a,
+}), D = a.forwardRef(function(n, r) {
+	let i = p({
+		props: n,
 		name: "SInteractiveCard"
-	}), { "aria-describedby": l, "aria-label": f, "aria-labelledby": p, children: m, disableLift: h = !1, disabled: g = !1, href: v, interactive: y = !0, onClick: b, overlay: x, sheen: S = !1, slotProps: C, slots: D, sx: O, ...k } = s, A = v !== void 0 || b !== void 0, j = {
-		...s,
+	}), { "aria-describedby": a, "aria-label": c, "aria-labelledby": l, children: u, disableLift: d = !1, disabled: f = !1, href: v, interactive: y = !0, onClick: b, overlay: x, sheen: S = !1, slotProps: C, slots: D, sx: O, ...k } = i, A = v !== void 0 || b !== void 0, j = {
+		...i,
 		clickable: A,
-		disableLift: h,
-		disabled: g,
+		disableLift: d,
+		disabled: f,
 		interactive: y,
 		sheen: S
-	}, M = D?.root ?? w, N = D?.actionArea ?? T, P = D?.overlay ?? E, F = r((e) => {
-		if (g) {
+	}, M = D?.root ?? w, N = D?.actionArea ?? T, P = D?.overlay ?? E, F = h((e) => {
+		if (f) {
 			e.preventDefault();
 			return;
 		}
 		b?.(e);
-	}), { ref: I, sx: L, ...R } = i(M, c(t(C?.root, j), {
+	}), { ref: I, sx: L, ...R } = _(M, m(t(C?.root, j), {
 		...k,
-		"aria-describedby": A ? void 0 : l,
-		"aria-label": A ? void 0 : f,
-		"aria-labelledby": A ? void 0 : p
-	}), j), z = n(I, o), B = c(t(C?.actionArea, j), {
-		"aria-describedby": l,
-		"aria-label": f,
-		"aria-labelledby": p,
+		"aria-describedby": A ? void 0 : a,
+		"aria-label": A ? void 0 : c,
+		"aria-labelledby": A ? void 0 : l
+	}), j), z = g(I, r), B = m(t(C?.actionArea, j), {
+		"aria-describedby": a,
+		"aria-label": c,
+		"aria-labelledby": l,
 		onClick: F
-	}), V = i(N, {
+	}), V = _(N, {
 		...B,
 		component: v === void 0 ? "button" : "a",
-		disabled: g || B.disabled,
+		disabled: f || B.disabled,
 		href: v,
 		nativeButton: v === void 0,
 		type: v === void 0 ? "button" : void 0
-	}, j), H = i(P, t(C?.overlay, j) ?? {}, j);
-	return /* @__PURE__ */ d(M, {
+	}, j), H = _(P, t(C?.overlay, j) ?? {}, j);
+	return /* @__PURE__ */ s(M, {
 		...R,
 		ref: z,
 		sx: [...e(L), ...e(O)],
-		children: [A ? /* @__PURE__ */ u(N, {
+		children: [A ? /* @__PURE__ */ o(N, {
 			...V,
-			children: m
-		}) : m, x == null ? null : /* @__PURE__ */ u(P, {
+			children: u
+		}) : u, x == null ? null : /* @__PURE__ */ o(P, {
 			...H,
 			"aria-hidden": !0,
 			children: x

package/dist/s-label/s-label.js

@@ -1,62 +1,61 @@
-import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../Stack-C0LGzM4c.js";
-import { t as n } from "../useThemeProps-Dw9dmKyT.js";
-import { t as r } from "../IconButton-CE-4GamO.js";
-import { toSxArray as i } from "../utils/sx.js";
-import { t as a } from "../appendOwnerState-CFQTq3pb.js";
-import { t as o } from "../Typography-_P0svrkO.js";
-import { t as s } from "../InfoOutlined-lpvhO6P8.js";
-import { t as c } from "../Tooltip-B1sn94L0.js";
-import * as l from "react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { toSxArray as e } from "../utils/sx.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import r from "@mui/material/IconButton";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import s from "@mui/material/Typography";
+import c from "@mui/utils/appendOwnerState";
+import l from "@mui/material/Tooltip";
+import u from "@mui/icons-material/InfoOutlined";
+import d from "@mui/material/Stack";
 //#region lib/s-label/s-label.tsx
-var f = e(t, {
+var f = t(d, {
 	name: "SLabel",
 	slot: "Root"
 })({});
 function p(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var m = (e, t) => !t && !(l.isValidElement(e) && e.type === o), h = l.forwardRef(function(e, l) {
+var m = (e, t) => !t && !(i.isValidElement(e) && e.type === s), h = i.forwardRef(function(t, i) {
 	let h = n({
-		props: e,
+		props: t,
 		name: "SLabel"
 	}), { children: g, disableLabelTypography: _ = !1, disableValueTypography: v = !1, hint: y, label: b, slotProps: x, slots: S, sx: C, ...w } = h, T = typeof y == "string" ? y.trim().length > 0 : !!y, E = {
 		...h,
 		disableLabelTypography: _,
 		disableValueTypography: v,
 		hasHint: T
-	}, D = S?.labelRow ?? t, O = S?.label ?? o, k = S?.value ?? o, A = S?.tooltip ?? c, j = S?.hintButton ?? r, M = a(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = a(S?.label, p(x?.label, E) ?? {}, E), P = a(S?.value, p(x?.value, E) ?? {}, E), F = a(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = a(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
-	return /* @__PURE__ */ d(f, {
+	}, D = S?.labelRow ?? d, O = S?.label ?? s, k = S?.value ?? s, A = S?.tooltip ?? l, j = S?.hintButton ?? r, M = c(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = c(S?.label, p(x?.label, E) ?? {}, E), P = c(S?.value, p(x?.value, E) ?? {}, E), F = c(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = c(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
+	return /* @__PURE__ */ o(f, {
 		...w,
-		ref: l,
+		ref: i,
 		ownerState: E,
-		sx: [{ width: "100%" }, ...i(C)],
-		children: [/* @__PURE__ */ d(D, {
+		sx: [{ width: "100%" }, ...e(C)],
+		children: [/* @__PURE__ */ o(D, {
 			direction: "row",
 			...M,
-			sx: [{ alignItems: "center" }, ...i(M?.sx)],
-			children: [L ? /* @__PURE__ */ u(O, {
+			sx: [{ alignItems: "center" }, ...e(M?.sx)],
+			children: [L ? /* @__PURE__ */ a(O, {
 				component: "span",
 				color: "text.secondary",
 				...N,
 				children: b
-			}) : b, E.hasHint ? /* @__PURE__ */ u(A, {
+			}) : b, E.hasHint ? /* @__PURE__ */ a(A, {
 				title: y,
 				placement: "top",
 				...F,
-				children: /* @__PURE__ */ u(j, {
+				children: /* @__PURE__ */ a(j, {
 					"aria-label": typeof y == "string" ? y : "More information",
 					size: "small",
 					...I,
 					sx: [{
 						ml: 1,
 						p: 0
-					}, ...i(I?.sx)],
-					children: /* @__PURE__ */ u(s, { fontSize: "inherit" })
+					}, ...e(I?.sx)],
+					children: /* @__PURE__ */ a(u, { fontSize: "inherit" })
 				})
 			}) : null]
-		}), R ? /* @__PURE__ */ u(k, {
+		}), R ? /* @__PURE__ */ a(k, {
 			component: "div",
 			...P,
 			children: g

package/dist/s-language-switcher/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-PaMgHWc2.js";
-export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };
+import { SLanguagePopover as e, SLanguageSwitcher as t, defaultLanguageOptions as n } from "./s-language-switcher.js";
+export { e as SLanguagePopover, t as SLanguageSwitcher, t as default, n as defaultLanguageOptions };