@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-icon-button/s-icon-button.js

@@ -1,11 +1,49 @@
-import "react";
-import { jsx as e } from "react/jsx-runtime";
-import { IconButton as t, Tooltip as n } from "@mui/material";
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import n from "@mui/material/IconButton";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+import a from "@mui/utils/appendOwnerState";
+import o from "@mui/material/Tooltip";
 //#region lib/s-icon-button/s-icon-button.tsx
-var r = ({ tooltipOptions: r, ...i }) => r ? /* @__PURE__ */ e(n, {
-	...r,
-	children: /* @__PURE__ */ e(t, { ...i })
-}) : /* @__PURE__ */ e(t, { ...i });
-r.displayName = "SIconButton";
+var s = e(n, {
+	name: "SIconButton",
+	slot: "Root"
+})(({ theme: e, ownerState: t }) => {
+	if (t.variant !== "overlay") return {};
+	let n = (e.vars ?? e).palette;
+	return {
+		backdropFilter: "blur(4px)",
+		backgroundColor: n.blackAlpha.medium,
+		boxShadow: e.shadows[1],
+		color: n.common.white,
+		"@media (hover: hover) and (pointer: fine)": { "&:hover": { backgroundColor: n.blackAlpha.dark } }
+	};
+});
+function c(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var l = r.forwardRef(function(e, n) {
+	let r = t({
+		props: e,
+		name: "SIconButton"
+	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = r, h = {
+		...r,
+		disabled: l,
+		hasTooltip: f != null,
+		variant: p
+	}, g = d?.tooltip ?? o, _ = a(d?.tooltip, c(u?.tooltip, h) ?? {}, h), v = m["aria-label"] ?? (typeof f == "string" ? f : void 0), y = /* @__PURE__ */ i(s, {
+		...m,
+		"aria-label": v,
+		disabled: l,
+		ownerState: h,
+		ref: n
+	});
+	return f == null ? y : /* @__PURE__ */ i(g, {
+		..._,
+		title: f,
+		children: l ? /* @__PURE__ */ i("span", { children: y }) : y
+	});
+});
+l.displayName = "SIconButton";
 //#endregion
-export { r as SIconButton, r as default };
+export { l as SIconButton, l as default };

package/dist/s-image-comparison/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SImageComparison } from './s-image-comparison';
-export type { SImageComparisonProps } from './s-image-comparison';
+export type { SImageComparisonOwnerState, SImageComparisonProps } from './s-image-comparison';
+export type {} from '../theme/component-augmentation';

package/dist/s-image-comparison/index.js

@@ -1,2 +1,2 @@
-import e from "./s-image-comparison.js";
+import { SImageComparison as e } from "./s-image-comparison.js";
 export { e as SImageComparison, e as default };

package/dist/s-image-comparison/s-image-comparison.d.ts

@@ -1,11 +1,21 @@
 import { BoxProps } from '@mui/material';
 import * as React from 'react';
-export interface SImageComparisonProps extends BoxProps {
+export interface SImageComparisonProps extends Omit<BoxProps, 'component' | 'defaultValue' | 'onChange' | 'value'> {
     leftImage: string | string[];
     rightImage: string;
     altLeft?: string | string[];
     altRight?: string;
-    initialPosition?: number;
+    /** Controlled divider position in percent. */
+    value?: number;
+    /** Initial divider position in percent for uncontrolled usage. */
+    defaultValue?: number;
+    /** Callback fired when the divider position changes. */
+    onChange?: (event: Event, value: number) => void;
 }
-declare const SImageComparison: React.ForwardRefExoticComponent<Omit<SImageComparisonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SImageComparisonOwnerState extends SImageComparisonProps {
+    currentLeftIndex: number;
+    isDragging: boolean;
+    sliderPosition: number;
+}
+export declare const SImageComparison: React.ForwardRefExoticComponent<Omit<SImageComparisonProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SImageComparison;

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

@@ -1,64 +1,122 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import * as t from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import "../theme/components/action-styles.js";
+import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import * as i from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Box as s, IconButton as c } from "@mui/material";
+import { useControlled as l, useForkRef as u } from "@mui/material/utils";
 //#region lib/s-image-comparison/s-image-comparison.tsx
-var a = (e) => Math.max(0, Math.min(100, e)), o = t.forwardRef(({ sx: o, leftImage: s, rightImage: c, altLeft: l = "Left image", altRight: u = "Right image", initialPosition: d = 50, ...f }, p) => {
-	let m = Array.isArray(s) ? s : [s], h = Array.isArray(l) ? l : [l], [g, _] = t.useState(0), [v, y] = t.useState(() => a(d)), [b, x] = t.useState(!1), S = t.useRef(null), C = m.length > 1;
-	t.useEffect(() => {
-		y(a(d));
-	}, [d]);
-	let w = (e) => {
-		if (!S.current) return;
-		let t = S.current.getBoundingClientRect(), n = (e - t.left) / t.width * 100;
-		n = a(n), y(n);
-	}, T = t.useCallback((e) => {
-		b && w(e.clientX);
-	}, [b]), E = t.useCallback((e) => {
-		b && w(e.touches[0].clientX);
-	}, [b]), D = () => {
-		x(!0);
-	}, O = () => {
-		x(!1);
-	}, k = (e) => {
-		y(a(Number(e.target.value)));
+var d = "@media (pointer: coarse)", f = (e) => Number.isNaN(e) ? 50 : Math.max(0, Math.min(100, e)), p = n(s, {
+	name: "SImageComparison",
+	slot: "Root"
+})({}), m = i.forwardRef((n, m) => {
+	let h = r({
+		props: n,
+		name: "SImageComparison"
+	}), { sx: g, leftImage: _, rightImage: v, altLeft: y = "Left image", altRight: b = "Right image", value: x, defaultValue: S = 50, onChange: C, onMouseDown: w, onTouchStart: T, ...E } = h, D = Array.isArray(_) ? _ : [_], O = Array.isArray(y) ? y : [y], [k, A] = i.useState(0), j = Math.min(k, Math.max(0, D.length - 1)), [M, N] = l({
+		controlled: x,
+		default: f(S),
+		name: "SImageComparison",
+		state: "value"
+	}), P = f(M), [F, I] = i.useState(!1), L = i.useRef(null), R = u(L, m), z = D.length > 1, B = P > 10, V = i.useCallback((e, t) => {
+		let n = f(t);
+		N(n), C?.(e, n);
+	}, [C, N]), H = i.useCallback((e, t) => {
+		if (!L.current) return;
+		let n = L.current.getBoundingClientRect();
+		V(t, (e - n.left) / n.width * 100);
+	}, [V]), U = i.useCallback((e) => {
+		F && (e.preventDefault(), H(e.clientX, e));
+	}, [H, F]), W = i.useCallback((e) => {
+		F && e.touches[0] && H(e.touches[0].clientX, e);
+	}, [H, F]), G = (e) => {
+		"button" in e && e.button !== 0 || (I(!0), "clientX" in e ? H(e.clientX, e.nativeEvent) : e.touches[0] && H(e.touches[0].clientX, e.nativeEvent));
+	}, K = i.useCallback(() => {
+		I(!1);
+	}, []), q = (e) => {
+		V(e.nativeEvent, Number(e.target.value));
+	}, J = (e) => {
+		let t;
+		switch (e.key) {
+			case "ArrowDown":
+			case "ArrowLeft":
+				t = P - 1;
+				break;
+			case "ArrowRight":
+			case "ArrowUp":
+				t = P + 1;
+				break;
+			case "End":
+				t = 100;
+				break;
+			case "Home":
+				t = 0;
+				break;
+			case "PageDown":
+				t = P - 10;
+				break;
+			case "PageUp":
+				t = P + 10;
+				break;
+			default: return;
+		}
+		e.preventDefault(), V(e.nativeEvent, t);
+	}, Y = (e) => {
+		w?.(e), e.defaultPrevented || G(e);
+	}, X = (e) => {
+		T?.(e), e.defaultPrevented || G(e);
+	}, Z = {
+		...h,
+		currentLeftIndex: j,
+		isDragging: F,
+		sliderPosition: P
 	};
-	return t.useEffect(() => (b ? (document.addEventListener("mousemove", T), document.addEventListener("touchmove", E), document.addEventListener("mouseup", O), document.addEventListener("touchend", O), document.body.style.cursor = "ew-resize") : document.body.style.cursor = "", () => {
-		document.removeEventListener("mousemove", T), document.removeEventListener("touchmove", E), document.removeEventListener("mouseup", O), document.removeEventListener("touchend", O), document.body.style.cursor = "";
-	}), [
-		b,
-		T,
-		E
-	]), /* @__PURE__ */ r(i, {
-		ref: (e) => {
-			S.current = e, typeof p == "function" ? p(e) : p && (p.current = e);
-		},
-		sx: {
+	return i.useEffect(() => {
+		let e = Math.max(0, D.length - 1);
+		A((t) => Math.min(t, e));
+	}, [D.length]), i.useEffect(() => {
+		if (!F) return;
+		let e = document.body.style.cursor;
+		return document.addEventListener("mousemove", U), document.addEventListener("touchmove", W), document.addEventListener("mouseup", K), document.addEventListener("touchend", K), document.addEventListener("touchcancel", K), document.body.style.cursor = "ew-resize", () => {
+			document.removeEventListener("mousemove", U), document.removeEventListener("touchmove", W), document.removeEventListener("mouseup", K), document.removeEventListener("touchend", K), document.removeEventListener("touchcancel", K), document.body.style.cursor = e;
+		};
+	}, [
+		K,
+		U,
+		W,
+		F
+	]), /* @__PURE__ */ o(p, {
+		ownerState: Z,
+		ref: R,
+		sx: [{
 			position: "relative",
 			width: "100%",
 			height: "100%",
 			overflow: "hidden",
-			userSelect: "none",
-			...o
-		},
-		onMouseDown: D,
-		onTouchStart: D,
-		...f,
+			touchAction: "pan-y",
+			userSelect: "none"
+		}, ...e(g)],
+		onMouseDown: Y,
+		onTouchStart: X,
+		...E,
 		children: [
-			/* @__PURE__ */ n(e, {
-				src: c,
-				alt: u,
-				style: {
+			/* @__PURE__ */ a(t, {
+				src: v,
+				alt: b,
+				sx: {
 					position: "absolute",
-					inset: 0,
-					width: "100%",
-					height: "100%",
-					objectFit: "cover",
-					pointerEvents: "none"
+					inset: 0
 				},
-				draggable: !1
+				slotProps: { image: {
+					draggable: !1,
+					sx: {
+						objectFit: "cover",
+						pointerEvents: "none"
+					}
+				} }
 			}),
-			/* @__PURE__ */ n(i, {
+			/* @__PURE__ */ a(s, {
 				sx: {
 					position: "absolute",
 					inset: 0,
@@ -66,69 +124,100 @@ var a = (e) => Math.max(0, Math.min(100, e)), o = t.forwardRef(({ sx: o, leftIma
 					height: "100%",
 					overflow: "hidden",
 					pointerEvents: "none",
-					clipPath: `polygon(0 0, ${v}% 0, ${v}% 100%, 0 100%)`
+					clipPath: `polygon(0 0, ${P}% 0, ${P}% 100%, 0 100%)`
 				},
-				children: /* @__PURE__ */ n(e, {
-					src: m[g],
-					alt: h[g] ?? h[0],
-					style: {
-						width: "100%",
-						height: "100%",
-						objectFit: "cover"
-					},
-					draggable: !1
-				})
+				children: D.length > 0 ? /* @__PURE__ */ a(t, {
+					src: D[j],
+					alt: O[j] ?? O[0],
+					slotProps: { image: {
+						draggable: !1,
+						sx: { objectFit: "cover" }
+					} }
+				}) : null
 			}),
-			C && /* @__PURE__ */ n(i, {
+			z && /* @__PURE__ */ a(s, {
 				sx: {
 					position: "absolute",
-					left: 16,
-					bottom: 16,
+					left: 1,
+					bottom: 1,
 					display: "flex",
-					gap: 1,
+					gap: 0,
 					zIndex: 1,
-					pointerEvents: b ? "none" : "auto",
-					opacity: +(v > 10),
-					transition: "opacity 0.2s"
+					pointerEvents: F || !B ? "none" : "auto",
+					opacity: +!!B,
+					transition: (e) => e.transitions.create("opacity", { duration: e.transitions.duration.shorter }),
+					[d]: {
+						left: 0,
+						bottom: 0
+					},
+					"@media (prefers-reduced-motion: reduce)": { transition: "none" }
 				},
+				"aria-hidden": !B,
 				onClick: (e) => e.stopPropagation(),
 				onMouseDown: (e) => e.stopPropagation(),
-				children: m.map((e, t) => /* @__PURE__ */ n(i, {
+				onTouchStart: (e) => e.stopPropagation(),
+				children: D.map((e, t) => /* @__PURE__ */ a(c, {
+					"aria-label": `Show comparison image ${t + 1}`,
+					"aria-pressed": j === t,
+					tabIndex: B ? 0 : -1,
 					onClick: (e) => {
-						e.stopPropagation(), _(t);
+						e.stopPropagation(), A(t);
 					},
 					sx: {
-						width: 8,
-						height: 8,
+						width: 24,
+						height: 24,
+						minWidth: 24,
+						minHeight: 24,
+						p: 0,
+						color: "transparent",
 						borderRadius: "50%",
-						bgcolor: g === t ? "primary.main" : "whiteAlpha.medium",
 						cursor: "pointer",
-						boxShadow: 1,
-						backdropFilter: "blur(4px)",
-						transition: "all 0.2s",
-						"&:hover": {
+						"&::after": {
+							content: "\"\"",
+							width: 8,
+							height: 8,
+							borderRadius: "50%",
+							bgcolor: j === t ? "primary.main" : "whiteAlpha.medium",
+							boxShadow: 1,
+							backdropFilter: "blur(4px)",
+							transition: (e) => e.transitions.create(["background-color", "transform"], { duration: e.transitions.duration.shorter })
+						},
+						"@media (hover: hover) and (pointer: fine)": { "&:hover::after": {
 							transform: "scale(1.2)",
-							bgcolor: g === t ? "primary.main" : "whiteAlpha.dark"
-						}
+							bgcolor: j === t ? "primary.main" : "whiteAlpha.dark"
+						} },
+						[d]: {
+							width: 44,
+							height: 44,
+							minWidth: 44,
+							minHeight: 44,
+							"&::after": {
+								width: 12,
+								height: 12
+							}
+						},
+						"@media (prefers-reduced-motion: reduce)": { "&::after": { transition: "none" } }
 					}
-				}, e))
+				}, `${e}-${t}`))
 			}),
-			/* @__PURE__ */ r(i, {
+			/* @__PURE__ */ o(s, {
 				sx: {
 					position: "absolute",
 					top: 0,
 					height: "100%",
 					width: 6,
 					cursor: "ew-resize",
-					left: `calc(${v}% - 3px)`
+					left: `calc(${P}% - 3px)`
 				},
-				children: [/* @__PURE__ */ n(i, {
+				children: [/* @__PURE__ */ a(s, {
+					className: "SImageComparison-range",
 					component: "input",
 					type: "range",
 					min: 0,
 					max: 100,
-					value: v,
-					onChange: k,
+					value: P,
+					onChange: q,
+					onKeyDown: J,
 					"aria-label": "Image comparison slider",
 					sx: {
 						position: "absolute",
@@ -138,21 +227,29 @@ var a = (e) => Math.max(0, Math.min(100, e)), o = t.forwardRef(({ sx: o, leftIma
 						height: "100%",
 						cursor: "ew-resize",
 						zIndex: 2,
-						pointerEvents: "none"
+						pointerEvents: "none",
+						"&:focus-visible + .SImageComparison-divider": {
+							outline: "2px solid",
+							outlineColor: "primary.main",
+							outlineOffset: 2
+						}
 					}
-				}), /* @__PURE__ */ n(i, { sx: {
-					position: "absolute",
-					top: 0,
-					bottom: 0,
-					left: 0,
-					width: 6,
-					bgcolor: "divider",
-					backdropFilter: "blur(4px)"
-				} })]
+				}), /* @__PURE__ */ a(s, {
+					className: "SImageComparison-divider",
+					sx: {
+						position: "absolute",
+						top: 0,
+						bottom: 0,
+						left: 0,
+						width: 6,
+						bgcolor: "divider",
+						backdropFilter: "blur(4px)"
+					}
+				})]
 			})
 		]
 	});
 });
-o.displayName = "SImageComparison";
+m.displayName = "SImageComparison";
 //#endregion
-export { o as default };
+export { m as SImageComparison, m as default };

package/dist/{s-image-modal → s-image-viewer}/default-media-item.d.ts

@@ -2,7 +2,6 @@ import { default as React } from 'react';
 import { MediaItemType } from './types';
 export declare const DefaultMediaItem: React.FC<{
     item: MediaItemType;
-    onClick?: () => void;
     style?: React.CSSProperties;
     objectFit?: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down';
     disableVideoControls?: boolean;

package/dist/s-image-viewer/default-media-item.js

@@ -0,0 +1,30 @@
+import { SLazyImage as e } from "../s-lazy-image/s-lazy-image.js";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+import { Box as n } from "@mui/material";
+//#region lib/s-image-viewer/default-media-item.tsx
+var r = ({ item: r, style: i = {}, objectFit: a = "contain", disableVideoControls: o = !1 }) => r.type === "video" ? /* @__PURE__ */ t(n, {
+	component: "video",
+	controls: !o,
+	sx: {
+		width: "100%",
+		height: "100%",
+		objectFit: a,
+		bgcolor: "transparent",
+		...i
+	},
+	children: /* @__PURE__ */ t("source", {
+		src: r.url,
+		type: "video/mp4"
+	})
+}) : /* @__PURE__ */ t(e, {
+	src: r.url,
+	alt: r.title ?? "",
+	slotProps: { image: { sx: {
+		backgroundColor: "transparent",
+		objectFit: a,
+		...i
+	} } }
+});
+//#endregion
+export { r as DefaultMediaItem };

package/dist/s-image-viewer/image-viewer-thumbnail-dock.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { MediaItemType, SImageViewerProps } from './types';
+/**
+ * Stacked-card thumbnail dock pinned to the bottom of the viewer
+ */
+export declare const ImageViewerThumbnailDock: React.FC<{
+    mediaItems: MediaItemType[];
+    selectedItem: MediaItemType;
+    onSelect: NonNullable<SImageViewerProps['onItemChange']>;
+    renderMediaItem?: SImageViewerProps['renderMediaItem'];
+    getThumbnailLabel?: SImageViewerProps['getThumbnailLabel'];
+}>;

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

@@ -0,0 +1,102 @@
+import { r as e } from "../theme-primitives-CRfnMsNy.js";
+import { DefaultMediaItem as t } from "./default-media-item.js";
+import "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Box as r, ButtonBase as i, Paper as a, Stack as o } from "@mui/material";
+import { motion as s, useReducedMotion as c } from "framer-motion";
+//#region lib/s-image-viewer/image-viewer-thumbnail-dock.tsx
+var l = s.create(i), u = ({ mediaItems: i, selectedItem: s, onSelect: u, renderMediaItem: d, getThumbnailLabel: f }) => {
+	let p = c();
+	return /* @__PURE__ */ n(r, {
+		sx: {
+			position: "fixed",
+			zIndex: 1502,
+			left: "50%",
+			bottom: 16,
+			transform: "translateX(-50%)"
+		},
+		children: /* @__PURE__ */ n(a, {
+			sx: {
+				position: "relative",
+				borderRadius: 1,
+				bgcolor: "background.paper",
+				border: "1px solid",
+				borderColor: "divider",
+				backdropFilter: "blur(12px)",
+				px: 1.5,
+				py: 1
+			},
+			children: /* @__PURE__ */ n(o, {
+				direction: "row",
+				spacing: -1.5,
+				sx: { alignItems: "center" },
+				children: i.map((a, o) => {
+					let c = s.id === a.id, m = o % 2 == 0 ? -15 : 15;
+					return /* @__PURE__ */ n(l, {
+						"aria-label": f?.(a, o) ?? (a.title ? `View ${a.title}` : `View media item ${o + 1}`),
+						"aria-pressed": c,
+						onClick: (e) => {
+							e.stopPropagation(), u(e, a, "thumbnail");
+						},
+						sx: {
+							position: "relative",
+							width: 40,
+							height: 40,
+							overflow: "visible",
+							flexShrink: 0,
+							zIndex: c ? 30 : i.length - o,
+							border: "1px solid",
+							borderColor: c ? "primary.main" : "transparent",
+							borderRadius: 1,
+							"&.Mui-focusVisible": {
+								outline: "3px solid",
+								outlineColor: "primary.main",
+								outlineOffset: 2,
+								zIndex: 31
+							}
+						},
+						initial: p ? !1 : { rotate: m },
+						animate: {
+							scale: p ? 1 : c ? 1.2 : 1,
+							rotate: p || c ? 0 : m,
+							y: p ? 0 : c ? -8 : 0,
+							transition: p ? { duration: 0 } : void 0
+						},
+						whileHover: p ? void 0 : {
+							scale: 1.3,
+							rotate: 0,
+							y: -10,
+							transition: {
+								type: "spring",
+								stiffness: 400,
+								damping: 25
+							}
+						},
+						children: /* @__PURE__ */ n(r, {
+							sx: {
+								position: "relative",
+								width: "100%",
+								height: "100%",
+								overflow: "hidden",
+								borderRadius: "inherit"
+							},
+							children: d ? d(a) : /* @__PURE__ */ n(t, {
+								item: a,
+								objectFit: "cover",
+								style: {
+									width: "100%",
+									height: "100%",
+									borderRadius: e.none,
+									pointerEvents: a.type === "video" ? "none" : "auto"
+								},
+								disableVideoControls: !0
+							})
+						})
+					}, a.id);
+				})
+			})
+		})
+	});
+};
+//#endregion
+export { u as ImageViewerThumbnailDock };

package/dist/s-image-viewer/index.d.ts

@@ -0,0 +1,4 @@
+export { default, default as SImageViewer } from './s-image-viewer';
+export type { MediaItemType, SImageViewerChangeReason, SImageViewerProps } from './types';
+export { DefaultMediaItem } from './default-media-item';
+export type {} from '../theme/component-augmentation';

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

@@ -0,0 +1,3 @@
+import { DefaultMediaItem as e } from "./default-media-item.js";
+import { SImageViewer as t } from "./s-image-viewer.js";
+export { e as DefaultMediaItem, t as SImageViewer, t as default };

package/dist/s-image-viewer/s-image-viewer.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { SImageViewerProps } from './types';
+export declare const SImageViewer: React.ForwardRefExoticComponent<SImageViewerProps & React.RefAttributes<HTMLDivElement>>;
+export default SImageViewer;