@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-form/s-form.js

@@ -1,24 +1,53 @@
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { FormControl as n, FormHelperText as r, FormLabel as i } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { FormControl as i, FormHelperText as a, FormLabel as o, styled as s, useThemeProps as c } from "@mui/material";
+import { useForkRef as l } from "@mui/material/utils";
+import u from "@mui/utils/appendOwnerState";
 //#region lib/s-form/s-form.tsx
-var a = ({ label: a, hint: o, error: s, required: c, children: l, htmlFor: u }) => /* @__PURE__ */ t(n, {
-	error: !!s,
-	fullWidth: !0,
-	children: [
-		a ? /* @__PURE__ */ t(i, {
-			htmlFor: u,
-			required: c,
-			sx: {
-				display: "flex",
-				alignItems: "center"
-			},
-			children: [a, " "]
-		}) : null,
-		l,
-		o && !s ? /* @__PURE__ */ e(r, { children: o }) : null,
-		s ? /* @__PURE__ */ e(r, { children: s }) : null
-	]
+var d = s(i, {
+	name: "SForm",
+	slot: "Root"
+})({});
+function f(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var p = t.forwardRef(function(t, i) {
+	let s = c({
+		props: t,
+		name: "SForm"
+	}), { children: p, disabled: m = !1, error: h = !1, fullWidth: g = !0, helperText: _, label: v, required: y = !1, slots: b, slotProps: x, ...S } = s, C = {
+		...s,
+		disabled: m,
+		error: h,
+		required: y
+	}, w = b?.root ?? d, T = b?.label ?? o, E = b?.helperText ?? a, D = f(x?.root, C), O = f(x?.label, C), k = f(x?.helperText, C), { ref: A, ...j } = u(w, D ?? {}, C), M = l(A, i), N = u(b?.label, O ?? {}, C), P = u(b?.helperText, k ?? {}, C), { sx: F, ...I } = N;
+	return /* @__PURE__ */ r(w, {
+		...S,
+		...j,
+		ref: M,
+		disabled: m,
+		error: h,
+		fullWidth: g,
+		required: y,
+		children: [
+			v ? /* @__PURE__ */ n(T, {
+				...I,
+				required: y,
+				sx: [{
+					alignItems: "center",
+					display: "flex"
+				}, ...e(F)],
+				children: v
+			}) : null,
+			p,
+			_ ? /* @__PURE__ */ n(E, {
+				...P,
+				children: _
+			}) : null
+		]
+	});
 });
-a.displayName = "SForm";
+p.displayName = "SForm";
 //#endregion
-export { a as SForm, a as default };
+export { p as SForm, p as default };

package/dist/s-gallery/gallery-grid-item.d.ts

@@ -1,11 +1,13 @@
 import { default as React } from 'react';
-import { MediaItemType } from '../s-image-modal';
+import { MediaItemType } from '../s-image-viewer';
 /**
  * Single draggable grid cell: media + hover overlay with title/desc
  */
 export declare const GalleryGridItem: React.FC<{
     item: MediaItemType;
     index: number;
+    /** Accessible name for the button that opens this media item */
+    itemLabel: string;
     /** Unique gallery instance id used to scope framer-motion layout ids */
     instanceId: string;
     /** Whether a drag is in progress anywhere in the gallery (suppresses clicks) */

package/dist/s-gallery/gallery-grid-item.js

@@ -1,112 +1,141 @@
-import { MediaItem as e } from "./gallery-media-item.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Box as r, Paper as i, Typography as a } from "@mui/material";
-import { motion as o } from "framer-motion";
+import { getFocusVisibleStyle as e } from "../theme/components/action-styles.js";
+import { MediaItem as t } from "./gallery-media-item.js";
+import n from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, ButtonBase as o, Paper as s, Typography as c } from "@mui/material";
+import { motion as l, useReducedMotion as u } from "framer-motion";
 //#region lib/s-gallery/gallery-grid-item.tsx
-var s = ({ item: s, index: c, instanceId: l, isDragging: u, onSelect: d, onDragStart: f, onDragEnd: p }) => /* @__PURE__ */ t(o.div, {
-	layoutId: `media-${s.id}-${l}`,
-	onClick: () => !u && d(s),
-	variants: {
-		hidden: {
-			y: 50,
-			scale: .9,
-			opacity: 0
+var d = l.create(o), f = ({ item: o, index: l, itemLabel: f, instanceId: p, isDragging: m, onSelect: h, onDragStart: g, onDragEnd: _ }) => {
+	let v = u(), y = n.useId(), b = () => {
+		m || h(o);
+	};
+	return /* @__PURE__ */ r(d, {
+		"aria-describedby": o.desc ? y : void 0,
+		"aria-label": f,
+		layoutId: v ? void 0 : `media-${o.id}-${p}`,
+		onClick: b,
+		onKeyDown: (e) => {
+			e.key === "Enter" ? (e.preventDefault(), b()) : e.key === " " && e.preventDefault();
 		},
-		visible: {
-			y: 0,
-			scale: 1,
-			opacity: 1,
-			transition: {
-				type: "spring",
-				stiffness: 350,
-				damping: 25,
-				delay: c * .05
+		onKeyUp: (e) => {
+			e.key === " " && (e.preventDefault(), b());
+		},
+		variants: {
+			hidden: v ? { opacity: 1 } : {
+				y: 50,
+				scale: .9,
+				opacity: 0
+			},
+			visible: {
+				y: 0,
+				scale: 1,
+				opacity: 1,
+				transition: v ? { duration: 0 } : {
+					type: "spring",
+					stiffness: 350,
+					damping: 25,
+					delay: l * .05
+				}
 			}
-		}
-	},
-	whileHover: {
-		filter: "brightness(1.1)",
-		zIndex: 10
-	},
-	drag: !0,
-	dragConstraints: {
-		left: 0,
-		right: 0,
-		top: 0,
-		bottom: 0
-	},
-	dragElastic: 1,
-	onDragStart: f,
-	onDragEnd: (e, t) => p(c, t.offset.x + t.offset.y),
-	style: {
-		position: "relative",
-		gridRow: s.rowSpan ? `span ${s.rowSpan}` : "span 2",
-		gridColumn: s.colSpan ? `span ${s.colSpan}` : "span 1"
-	},
-	children: /* @__PURE__ */ n(i, {
-		sx: {
-			position: "relative",
-			overflow: "hidden",
+		},
+		whileHover: {
+			filter: "brightness(1.1)",
+			zIndex: 10,
+			transition: v ? { duration: 0 } : void 0
+		},
+		drag: !0,
+		dragConstraints: {
+			left: 0,
+			right: 0,
+			top: 0,
+			bottom: 0
+		},
+		dragElastic: 1,
+		dragMomentum: !v,
+		onDragStart: g,
+		onDragEnd: (e, t) => _(l, t.offset.x + t.offset.y),
+		sx: (t) => ({
 			borderRadius: 1,
-			width: "100%",
-			height: "100%",
-			cursor: "grab",
-			"&:active": { cursor: "grabbing" },
-			"&:hover .hover-overlay": { opacity: 1 }
+			display: "block",
+			minWidth: 0,
+			overflow: "hidden",
+			padding: 0,
+			textAlign: "inherit",
+			"&.Mui-focusVisible": {
+				...e(t),
+				zIndex: 10
+			},
+			"&.Mui-focusVisible .hover-overlay": { opacity: 1 }
+		}),
+		style: {
+			position: "relative",
+			gridRow: o.rowSpan ? `span ${o.rowSpan}` : "span 2",
+			gridColumn: o.colSpan ? `span ${o.colSpan}` : "span 1"
 		},
-		children: [/* @__PURE__ */ t(e, {
-			item: s,
+		children: /* @__PURE__ */ i(s, {
 			sx: {
-				position: "absolute",
-				inset: 0,
+				position: "relative",
+				overflow: "hidden",
+				borderRadius: 1,
 				width: "100%",
-				height: "100%"
-			},
-			onClick: () => !u && d(s)
-		}), (s.title || s.desc) && /* @__PURE__ */ n(r, {
-			className: "hover-overlay",
-			sx: {
-				position: "absolute",
-				inset: 0,
-				display: "flex",
-				flexDirection: "column",
-				justifyContent: "flex-end",
-				padding: 1.5,
-				pointerEvents: "none",
-				opacity: 0,
-				transition: "opacity 0.2s ease-in-out",
-				color: "common.white",
-				background: "linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.35) 45%, transparent)"
+				height: "100%",
+				cursor: "grab",
+				"&:active": { cursor: "grabbing" },
+				"&:hover .hover-overlay": { opacity: 1 }
 			},
-			children: [s.title && /* @__PURE__ */ t(a, {
-				variant: "h6",
+			children: [/* @__PURE__ */ r(t, {
+				item: o,
 				sx: {
-					position: "relative",
-					fontSize: {
-						xs: 14,
-						sm: 18,
-						md: 20
-					},
-					whiteSpace: "nowrap",
-					overflow: "hidden",
-					textOverflow: "ellipsis"
-				},
-				children: s.title
-			}), s.desc && /* @__PURE__ */ t(a, {
-				variant: "body2",
+					position: "absolute",
+					inset: 0,
+					width: "100%",
+					height: "100%"
+				}
+			}), (o.title || o.desc) && /* @__PURE__ */ i(a, {
+				className: "hover-overlay",
 				sx: {
-					position: "relative",
-					mt: .5,
-					display: "-webkit-box",
-					WebkitLineClamp: 2,
-					WebkitBoxOrient: "vertical",
-					overflow: "hidden"
+					position: "absolute",
+					inset: 0,
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "flex-end",
+					padding: 1.5,
+					pointerEvents: "none",
+					opacity: 0,
+					transition: v ? "none" : "opacity 0.2s ease-in-out",
+					color: "common.white",
+					gradient: "overlay.media"
 				},
-				children: s.desc
+				children: [o.title && /* @__PURE__ */ r(c, {
+					variant: "h6",
+					sx: {
+						position: "relative",
+						fontSize: {
+							xs: 14,
+							sm: 18,
+							md: 20
+						},
+						whiteSpace: "nowrap",
+						overflow: "hidden",
+						textOverflow: "ellipsis"
+					},
+					children: o.title
+				}), o.desc && /* @__PURE__ */ r(c, {
+					id: y,
+					variant: "body2",
+					sx: {
+						position: "relative",
+						mt: .5,
+						display: "-webkit-box",
+						WebkitLineClamp: 2,
+						WebkitBoxOrient: "vertical",
+						overflow: "hidden"
+					},
+					children: o.desc
+				})]
 			})]
-		})]
-	})
-}, `${s.id}-${l}`);
+		})
+	}, `${o.id}-${p}`);
+};
 //#endregion
-export { s as GalleryGridItem };
+export { f as GalleryGridItem };

package/dist/s-gallery/gallery-layout.d.ts

@@ -1,4 +1,4 @@
-import { MediaItemType } from '../s-image-modal';
+import { MediaItemType } from '../s-image-viewer';
 /**
  * Built-in layout variants for the gallery
  */

package/dist/s-gallery/gallery-media-item.d.ts

@@ -1,6 +1,6 @@
 import { default as React } from 'react';
 import { SxProps, Theme } from '@mui/material';
-import { MediaItemType } from '../s-image-modal';
+import { MediaItemType } from '../s-image-viewer';
 /**
  * Props for individual MediaItem components
  */
@@ -9,7 +9,7 @@ export type MediaItemProps = {
     item: MediaItemType;
     /** Custom styling */
     sx?: SxProps<Theme>;
-    /** Click handler */
-    onClick?: () => void;
+    /** Object-fit used by image and video content */
+    objectFit?: React.CSSProperties['objectFit'];
 };
 export declare const MediaItem: React.FC<MediaItemProps>;

package/dist/s-gallery/gallery-media-item.js

@@ -1,9 +1,11 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import { useEffect as t, useRef as n, useState as r } from "react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Box as o } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { reducedMotionMedia as t } from "../theme/components/action-styles.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import { useEffect as r, useRef as i, useState as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c } from "@mui/material";
 //#region lib/s-gallery/gallery-media-item.tsx
-function s(e) {
+function l(e) {
 	return new Promise((t) => {
 		let n = () => {
 			e.removeEventListener("canplay", n), t();
@@ -11,43 +13,41 @@ function s(e) {
 		e.addEventListener("canplay", n, { once: !0 });
 	});
 }
-var c = ({ item: c, sx: l, onClick: u }) => {
-	let d = n(null), [f, p] = r(!1), [m, h] = r(!0);
-	if (t(() => {
+var u = ({ item: u, sx: d, objectFit: f = "cover" }) => {
+	let p = i(null), [m, h] = a(!1), [g, _] = a(!0);
+	return r(() => {
 		let e = new IntersectionObserver((e) => {
-			e.forEach((e) => p(e.isIntersecting));
+			e.forEach((e) => h(e.isIntersecting));
 		}, {
 			root: null,
 			rootMargin: "50px",
 			threshold: .1
-		}), t = d.current;
+		}), t = p.current;
 		return t && e.observe(t), () => {
 			t && e.unobserve(t);
 		};
-	}, []), t(() => {
-		let e = !0, t = d.current;
-		return f ? (async () => {
-			if (!(!t || !f || !e)) try {
-				if (t.readyState < 3 && (h(!0), await s(t)), !e) return;
-				h(!1), await t.play();
+	}, []), r(() => {
+		let e = !0, t = p.current;
+		return m ? (async () => {
+			if (!(!t || !m || !e)) try {
+				if (t.readyState < 3 && (_(!0), await l(t)), !e) return;
+				_(!1), await t.play();
 			} catch (e) {
 				console.warn("Video playback failed:", e);
 			}
 		})() : t && t.pause(), () => {
 			e = !1, t && (t.pause(), t.removeAttribute("src"), t.load());
 		};
-	}, [f]), c.type === "video") return /* @__PURE__ */ a(o, {
-		sx: {
+	}, [m]), u.type === "video" ? /* @__PURE__ */ s(c, {
+		sx: [{
 			position: "relative",
 			overflow: "hidden",
 			width: "100%",
-			height: "100%",
-			...l
-		},
-		children: [/* @__PURE__ */ i(o, {
+			height: "100%"
+		}, ...e(d)],
+		children: [/* @__PURE__ */ o(c, {
 			component: "video",
-			ref: d,
-			onClick: u,
+			ref: p,
 			playsInline: !0,
 			muted: !0,
 			loop: !0,
@@ -55,18 +55,19 @@ var c = ({ item: c, sx: l, onClick: u }) => {
 			sx: {
 				width: "100%",
 				height: "100%",
-				objectFit: "cover",
-				opacity: m ? .8 : 1,
+				objectFit: f,
+				opacity: g ? .8 : 1,
 				transition: "opacity 0.2s",
 				transform: "translateZ(0)",
 				willChange: "transform",
-				display: "block"
+				display: "block",
+				[t]: { transition: "none" }
 			},
-			children: /* @__PURE__ */ i("source", {
-				src: c.url,
+			children: /* @__PURE__ */ o("source", {
+				src: u.url,
 				type: "video/mp4"
 			})
-		}), m && /* @__PURE__ */ i(o, {
+		}), g && /* @__PURE__ */ o(c, {
 			sx: {
 				position: "absolute",
 				inset: 0,
@@ -75,7 +76,7 @@ var c = ({ item: c, sx: l, onClick: u }) => {
 				justifyContent: "center",
 				bgcolor: "action.disabled"
 			},
-			children: /* @__PURE__ */ i(o, { sx: {
+			children: /* @__PURE__ */ o(c, { sx: {
 				width: 24,
 				height: 24,
 				borderRadius: "50%",
@@ -83,30 +84,24 @@ var c = ({ item: c, sx: l, onClick: u }) => {
 				borderColor: "divider",
 				borderTopColor: "primary.main",
 				animation: "spin 0.8s linear infinite",
-				"@keyframes spin": { to: { transform: "rotate(360deg)" } }
+				"@keyframes spin": { to: { transform: "rotate(360deg)" } },
+				"@media (prefers-reduced-motion: reduce)": { animation: "none" }
 			} })
 		})]
-	});
-	let g = l && typeof l == "object" && "objectFit" in l && typeof l.objectFit == "string" ? l.objectFit : "cover";
-	return /* @__PURE__ */ i(o, {
-		onClick: u,
-		sx: {
+	}) : /* @__PURE__ */ o(c, {
+		sx: [{
 			width: "100%",
-			height: "100%",
-			...l
-		},
-		children: /* @__PURE__ */ i(e, {
-			src: c.url,
-			alt: c.title ?? "",
-			style: {
-				objectFit: g,
-				cursor: u ? "pointer" : "default",
+			height: "100%"
+		}, ...e(d)],
+		children: /* @__PURE__ */ o(n, {
+			src: u.url,
+			alt: u.title ?? "",
+			slotProps: { image: { sx: {
 				display: "block",
-				width: "100%",
-				height: "100%"
-			}
+				objectFit: f
+			} } }
 		})
 	});
 };
 //#endregion
-export { c as MediaItem };
+export { u as MediaItem };

package/dist/s-gallery/index.d.ts

@@ -1,5 +1,6 @@
 export { default, default as SGallery } from './s-gallery';
-export type { SGalleryProps } from './s-gallery';
+export type { SGalleryOwnerState, SGalleryProps } from './s-gallery';
 export { MediaItem } from './gallery-media-item';
 export type { MediaItemProps } from './gallery-media-item';
 export type { GalleryLayoutVariant } from './gallery-layout';
+export type {} from '../theme/component-augmentation';

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

@@ -1,10 +1,11 @@
 import { default as React } from 'react';
-import { MediaItemType } from '../s-image-modal';
+import { BoxProps } from '@mui/material';
+import { MediaItemType } from '../s-image-viewer';
 import { GalleryLayoutVariant } from './gallery-layout';
 /**
  * Props for the SGallery component.
  */
-export interface SGalleryProps {
+export interface SGalleryProps extends Omit<BoxProps, 'children' | 'component'> {
     /** Array of media items to display in the gallery */
     mediaItems: MediaItemType[];
     /** Layout variant to use (default: 'masonry') */
@@ -13,6 +14,16 @@ export interface SGalleryProps {
     loading?: boolean;
     /** Number of skeleton items to show when loading (default: 6) */
     skeletonCount?: number;
+    /** Returns the accessible name for a media item button. */
+    getItemLabel?: (item: MediaItemType, index: number) => string;
+    /** Accessible name for the media viewer dialog. */
+    viewerLabel?: string;
 }
-export declare const SGallery: React.FC<SGalleryProps>;
+export interface SGalleryOwnerState {
+    isDragging: boolean;
+    loading: boolean;
+    skeletonCount: number;
+    variant: GalleryLayoutVariant;
+}
+export declare const SGallery: React.ForwardRefExoticComponent<Omit<SGalleryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SGallery;