@solostylist/ui-kit 2.0.1 → 2.0.3

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

@@ -0,0 +1,499 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { actionHoverMedia as n, getFocusVisibleStyle as r, reducedMotionMedia as i } from "../theme/components/action-styles.js";
+import { SLazyImage as a } from "../s-lazy-image/s-lazy-image.js";
+import { SIconButton as o } from "../s-icon-button/s-icon-button.js";
+import { SSwatch as ee } from "../s-swatch/s-swatch.js";
+import { SRating as te } from "../s-rating/s-rating.js";
+import { SInteractiveCard as s } from "../s-interactive-card/s-interactive-card.js";
+import * as c from "react";
+import { createElement as ne } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Box as d, CardActionArea as re, CardContent as f, CardMedia as p, Typography as m, styled as h, useThemeProps as ie } from "@mui/material";
+import { mergeSlotProps as g, useControlled as ae, useEventCallback as oe, useForkRef as se } from "@mui/material/utils";
+import _ from "@mui/utils/appendOwnerState";
+import ce from "@mui/icons-material/Favorite";
+import le from "@mui/icons-material/FavoriteBorder";
+//#region lib/s-product-card/s-product-card.tsx
+var v = "clamp(180px, 38%, 240px)", ue = 220, de = 18, fe = 2, y = (e) => ({ [n]: { "&:hover": e } }), b = (...e) => ({ ownerState: t }) => e.includes(t.variant), pe = h(s, {
+	name: "SProductCard",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => ({
+	"--SProductCard-hoverActionsOpacity": "1",
+	"--SProductCard-hoverActionsShift": "0px",
+	"--SProductCard-hoverImageOpacity": "0",
+	"--SProductCard-imageScale": "1",
+	display: "flex",
+	flexDirection: "column",
+	gap: 0,
+	height: "100%",
+	position: "relative",
+	...e.interactive && !e.disabled && { "@media (hover: hover) and (pointer: fine)": {
+		"--SProductCard-hoverActionsOpacity": "0",
+		"--SProductCard-hoverActionsShift": `calc(${t.spacing(1.5)} * -1)`,
+		"&:hover, &:has(.Mui-focusVisible)": {
+			"--SProductCard-hoverActionsOpacity": "1",
+			"--SProductCard-hoverActionsShift": "0px"
+		}
+	} },
+	variants: [
+		{
+			props: b("list"),
+			style: {
+				flexDirection: "row",
+				[t.breakpoints.down("sm")]: { flexDirection: "column" }
+			}
+		},
+		{
+			props: b("overlay"),
+			style: {
+				backgroundColor: "transparent",
+				backgroundImage: "none",
+				border: 0,
+				boxShadow: "none"
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && e.mediaZoom,
+			style: y({ "--SProductCard-imageScale": String(e.mediaZoomScale) })
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && !!e.hoverImage,
+			style: y({ "--SProductCard-hoverImageOpacity": "1" })
+		},
+		{
+			props: ({ ownerState: e }) => e.disabled,
+			style: {
+				"--SProductCard-hoverActionsOpacity": "0",
+				"--SProductCard-hoverImageOpacity": "0",
+				"--SProductCard-imageScale": "1",
+				borderColor: (t.vars ?? t).palette.divider,
+				boxShadow: "none"
+			}
+		}
+	]
+})), me = h(re, {
+	name: "SProductCard",
+	slot: "Link",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: "inherit",
+	inset: 0,
+	position: "absolute",
+	zIndex: 1,
+	"&.Mui-focusVisible": {
+		...r(e),
+		outlineOffset: -2
+	}
+})), he = h(p, {
+	name: "SProductCard",
+	slot: "Media",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => ({
+	aspectRatio: e.mediaHeight == null ? String(e.aspectRatio) : void 0,
+	backgroundColor: (t.vars ?? t).palette.background.paper,
+	display: "grid",
+	flexShrink: 0,
+	gridTemplateAreas: "\"media\"",
+	height: e.mediaHeight,
+	overflow: "hidden",
+	position: "relative",
+	width: "100%",
+	"& > *": {
+		gridArea: "media",
+		minWidth: 0
+	},
+	variants: [{
+		props: b("list"),
+		style: {
+			aspectRatio: "auto",
+			height: e.mediaHeight ?? "auto",
+			width: e.mediaWidth ?? v,
+			[t.breakpoints.down("sm")]: {
+				height: e.mediaHeight ?? ue,
+				width: "100%"
+			}
+		}
+	}, {
+		props: b("overlay"),
+		style: {
+			borderEndEndRadius: 0,
+			borderEndStartRadius: 0,
+			borderStartEndRadius: t.radius.md,
+			borderStartStartRadius: t.radius.md
+		}
+	}]
+})), x = h(a, {
+	name: "SProductCard",
+	slot: "Image",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	height: "100%",
+	width: "100%",
+	"& img": {
+		objectFit: "cover",
+		objectPosition: "center",
+		transform: "scale(var(--SProductCard-imageScale))",
+		transition: e.transitions.create("transform", {
+			duration: e.transitions.duration.complex,
+			easing: e.transitions.easing.easeOut
+		}),
+		[i]: {
+			transform: "none",
+			transition: "none"
+		}
+	}
+})), ge = h(x, {
+	name: "SProductCard",
+	slot: "HoverImage",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	opacity: "var(--SProductCard-hoverImageOpacity)",
+	transition: e.transitions.create("opacity", { duration: e.transitions.duration.shorter }),
+	[i]: { transition: "none" }
+})), _e = h(d, {
+	name: "SProductCard",
+	slot: "Badge",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	gridArea: "auto",
+	position: "absolute",
+	pointerEvents: "none",
+	zIndex: 2,
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.badgePlacement.startsWith("top"),
+			style: { insetBlockStart: e.spacing(2) }
+		},
+		{
+			props: ({ ownerState: e }) => e.badgePlacement.startsWith("bottom"),
+			style: { insetBlockEnd: e.spacing(2) }
+		},
+		{
+			props: ({ ownerState: e }) => e.badgePlacement.endsWith("start"),
+			style: { insetInlineStart: e.spacing(2) }
+		},
+		{
+			props: ({ ownerState: e }) => e.badgePlacement.endsWith("end"),
+			style: { insetInlineEnd: e.spacing(2) }
+		}
+	]
+})), ve = h(d, {
+	name: "SProductCard",
+	slot: "HoverActions",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexDirection: "column",
+	gap: e.spacing(1),
+	gridArea: "auto",
+	opacity: "var(--SProductCard-hoverActionsOpacity)",
+	position: "absolute",
+	insetBlockStart: e.spacing(2),
+	insetInlineEnd: e.spacing(2),
+	transform: "translateY(var(--SProductCard-hoverActionsShift))",
+	transition: e.transitions.create(["opacity", "transform"], { duration: e.transitions.duration.shorter }),
+	zIndex: 2,
+	[i]: {
+		transform: "none",
+		transition: "none"
+	}
+})), ye = h(f, {
+	name: "SProductCard",
+	slot: "Content",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	display: "flex",
+	flex: 1,
+	flexDirection: "column",
+	gap: e.spacing(1),
+	minWidth: 0,
+	padding: e.spacing(2),
+	position: "relative",
+	"&:last-child": { paddingBottom: e.spacing(2) },
+	variants: [
+		{
+			props: b("grid"),
+			style: { borderTop: `1px solid ${(e.vars ?? e).palette.divider}` }
+		},
+		{
+			props: b("mini"),
+			style: {
+				backgroundColor: (e.vars ?? e).palette.background.paper,
+				borderTopLeftRadius: e.radius.xl,
+				borderTopRightRadius: e.radius.xl,
+				marginTop: e.spacing(-3.5),
+				zIndex: 1
+			}
+		},
+		{
+			props: b("overlay"),
+			style: { textAlign: "center" }
+		}
+	]
+})), be = h(m, {
+	name: "SProductCard",
+	slot: "Title",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "-webkit-box",
+	overflow: "hidden",
+	WebkitBoxOrient: "vertical",
+	WebkitLineClamp: fe
+}), xe = h(d, {
+	name: "SProductCard",
+	slot: "Rating",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	gap: e.spacing(.5),
+	variants: [{
+		props: b("overlay"),
+		style: { justifyContent: "center" }
+	}]
+})), Se = h(d, {
+	name: "SProductCard",
+	slot: "Meta",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	color: (e.vars ?? e).palette.text.secondary,
+	minWidth: 0,
+	...e.typography.body2
+})), Ce = h(d, {
+	name: "SProductCard",
+	slot: "Swatches",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexWrap: "wrap",
+	gap: e.spacing(.5),
+	pointerEvents: "none",
+	position: "relative",
+	zIndex: 2,
+	variants: [{
+		props: b("overlay"),
+		style: { justifyContent: "center" }
+	}]
+})), we = h(d, {
+	name: "SProductCard",
+	slot: "Footer",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	gap: e.spacing(1),
+	justifyContent: "space-between",
+	marginTop: "auto",
+	variants: [{
+		props: b("overlay"),
+		style: { justifyContent: "center" }
+	}]
+})), Te = h(m, {
+	name: "SProductCard",
+	slot: "Price",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	color: (e.vars ?? e).palette.primary.main,
+	display: "flex",
+	gap: e.spacing(1),
+	minWidth: 0
+})), Ee = h(d, {
+	name: "SProductCard",
+	slot: "OriginalPrice",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	color: (e.vars ?? e).palette.text.secondary,
+	textDecoration: "line-through",
+	...e.typography.body2
+})), De = h(d, {
+	name: "SProductCard",
+	slot: "Actions",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexShrink: 0,
+	gap: e.spacing(.5),
+	position: "relative",
+	zIndex: 2
+})), Oe = h(o, {
+	name: "SProductCard",
+	slot: "FavoriteButton",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({ variants: [{
+	props: ({ ownerState: e }) => e.favorite,
+	style: { color: (e.vars ?? e).palette.error.main }
+}] })), S = c.forwardRef(function(n, r) {
+	let i = ie({
+		props: n,
+		name: "SProductCard"
+	}), { actions: a, alt: o = "", aspectRatio: s = 1, badge: d, badgePlacement: re = "top-start", defaultFavorite: f = !1, disableLift: p = !1, disabled: h = !1, favorite: v, favoriteActiveIcon: ue = /* @__PURE__ */ l(ce, { fontSize: "inherit" }), favoriteActiveLabel: fe = "Remove from wishlist", favoriteIcon: y = /* @__PURE__ */ l(le, { fontSize: "inherit" }), favoriteLabel: b = "Add to wishlist", footerContent: S, hoverActions: C, hoverImage: w, href: T, image: E, interactive: D = !0, linkLabel: O, maxSwatches: k = 5, media: A, mediaHeight: ke, mediaWidth: Ae, mediaZoom: je = !0, mediaZoomScale: Me = 1.08, meta: j, onClick: M, onFavoriteChange: Ne, originalPrice: N, price: P, rating: F, sheen: I = !1, showFavorite: L = !1, slotProps: R, slots: z, swatches: B, swatchesLabel: V, sx: Pe, title: H, variant: U = "grid", ...Fe } = i, [W, Ie] = ae({
+		controlled: v,
+		default: f,
+		name: "SProductCard",
+		state: "favorite"
+	}), G = Number.isFinite(k) ? Math.max(1, Math.floor(k)) : 5, K = !h && (T !== void 0 || M !== void 0), q = {
+		...i,
+		alt: o,
+		aspectRatio: s,
+		badgePlacement: re,
+		clickable: K,
+		disableLift: p,
+		disabled: h,
+		favorite: W,
+		interactive: D,
+		maxSwatches: G,
+		mediaHeight: ke,
+		mediaWidth: Ae,
+		mediaZoom: je,
+		mediaZoomScale: Me,
+		sheen: I,
+		showFavorite: L,
+		variant: U
+	}, J = z?.root ?? pe, Le = z?.link ?? me, Re = z?.media ?? he, ze = z?.image ?? x, Be = z?.hoverImage ?? ge, Ve = z?.badge ?? _e, He = z?.hoverActions ?? ve, Ue = z?.content ?? ye, We = z?.title ?? be, Ge = z?.rating ?? xe, Ke = z?.meta ?? Se, qe = z?.swatches ?? Ce, Je = z?.footer ?? we, Ye = z?.price ?? Te, Xe = z?.originalPrice ?? Ee, Ze = z?.actions ?? De, Qe = z?.favoriteButton ?? Oe, $e = `${c.useId()}-title`, et = oe((e) => {
+		if (h) return;
+		let t = !W;
+		Ie(t), Ne?.(e, t);
+	}), { ref: tt, sx: nt, ...rt } = _(J, {
+		...g(t(R?.root, q), Fe),
+		"aria-disabled": h || void 0,
+		disableLift: p,
+		disabled: h,
+		interactive: D,
+		sheen: I
+	}, q), it = se(tt, r), Y = (e, n) => _(n, t(e, q) ?? {}, q), at = Y(R?.media, Re), ot = _(ze, {
+		...g(t(R?.image, q), { variant: "rectangular" }),
+		alt: o,
+		src: E
+	}, q), st = _(Be, {
+		...g(t(R?.hoverImage, q), { variant: "rectangular" }),
+		alt: "",
+		src: w
+	}, q), ct = t(R?.badge, q) ?? {}, lt = _(Ve, {
+		...ct,
+		inert: h || ct.inert
+	}, q), ut = g(t(R?.hoverActions, q), { inert: h || void 0 }), dt = _(He, {
+		...ut,
+		inert: h || ut.inert
+	}, q), ft = Y(R?.content, Ue), pt = Y(R?.rating, Ge), mt = Y(R?.meta, Ke), ht = _(qe, g(t(R?.swatches, q), {
+		"aria-label": V,
+		role: V ? "group" : void 0
+	}), q), gt = Y(R?.footer, Je), _t = Y(R?.originalPrice, Xe), vt = g(t(R?.actions, q), { inert: h || void 0 }), yt = _(Ze, {
+		...vt,
+		inert: h || vt.inert
+	}, q), bt = _(We, g(t(R?.title, q), {
+		component: "h3",
+		id: $e,
+		variant: U === "list" ? "subtitle1" : "body1"
+	}), q), xt = bt.id ?? $e, X = t(R?.link, q), St = _(Le, {
+		...g(X, {
+			"aria-label": O,
+			"aria-labelledby": !(X?.["aria-label"] != null || X?.["aria-labelledby"] != null) && O == null && H != null ? xt : void 0
+		}),
+		component: T === void 0 ? "button" : "a",
+		href: T,
+		nativeButton: T === void 0,
+		onClick: M,
+		type: T === void 0 ? "button" : void 0
+	}, q), Ct = _(Ye, g(t(R?.price, q), {
+		component: "p",
+		variant: "subtitle1"
+	}), q), Z = g(t(R?.favoriteButton, q), {
+		"aria-label": W ? fe : b,
+		"aria-pressed": W,
+		onClick: et
+	}), wt = _(Qe, {
+		...Z,
+		disabled: h || Z.disabled,
+		size: Z.size ?? "medium"
+	}, q), Q = B?.slice(0, G) ?? [], Tt = (B?.length ?? 0) - Q.length, Et = P != null || N != null, $ = L || a != null, Dt = Et || $ || S != null;
+	return /* @__PURE__ */ u(J, {
+		...rt,
+		ref: it,
+		sx: [...e(Pe), ...e(nt)],
+		children: [
+			K ? /* @__PURE__ */ l(Le, { ...St }) : null,
+			A != null || E != null ? /* @__PURE__ */ u(Re, {
+				...at,
+				children: [
+					A,
+					A == null && E != null ? /* @__PURE__ */ l(ze, { ...ot }) : null,
+					A == null && w != null ? /* @__PURE__ */ l(Be, { ...st }) : null,
+					d == null ? null : /* @__PURE__ */ l(Ve, {
+						...lt,
+						children: d
+					}),
+					C == null ? null : /* @__PURE__ */ l(He, {
+						...dt,
+						children: C
+					})
+				]
+			}) : null,
+			/* @__PURE__ */ u(Ue, {
+				...ft,
+				children: [
+					H == null ? null : /* @__PURE__ */ l(We, {
+						...bt,
+						children: H
+					}),
+					F == null ? null : /* @__PURE__ */ l(Ge, {
+						...pt,
+						children: typeof F == "number" ? /* @__PURE__ */ l(te, {
+							precision: .5,
+							readOnly: !0,
+							size: "small",
+							value: F
+						}) : F
+					}),
+					j == null ? null : /* @__PURE__ */ l(Ke, {
+						...mt,
+						children: j
+					}),
+					Q.length > 0 ? /* @__PURE__ */ u(qe, {
+						...ht,
+						children: [Q.map((e) => /* @__PURE__ */ ne(ee, {
+							...e,
+							interactive: !1,
+							key: e.value,
+							shape: "square",
+							size: de
+						})), Tt > 0 ? /* @__PURE__ */ u(m, {
+							component: "span",
+							variant: "caption",
+							children: ["+", Tt]
+						}) : null]
+					}) : null,
+					Dt ? /* @__PURE__ */ u(Je, {
+						...gt,
+						children: [
+							Et ? /* @__PURE__ */ u(Ye, {
+								...Ct,
+								children: [P, N == null ? null : /* @__PURE__ */ l(Xe, {
+									component: "del",
+									..._t,
+									children: N
+								})]
+							}) : null,
+							S,
+							$ ? /* @__PURE__ */ u(Ze, {
+								...yt,
+								children: [L ? /* @__PURE__ */ l(Qe, {
+									...wt,
+									children: W ? ue : y
+								}) : null, a]
+							}) : null
+						]
+					}) : null
+				]
+			})
+		]
+	});
+});
+S.displayName = "SProductCard";
+//#endregion
+export { S as SProductCard, S as default };

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

@@ -0,0 +1,3 @@
+export { default, default as SProductGallery } from './s-product-gallery';
+export type { SProductGalleryCarouselSlotProps, SProductGalleryImageItem, SProductGalleryItem, SProductGalleryOwnerState, SProductGalleryProps, SProductGallerySlotProps, SProductGallerySlots, SProductGalleryThumbnailOwnerState, SProductGalleryVideoItem, } from './s-product-gallery';
+export type {} from '../theme/component-augmentation';

package/dist/s-product-gallery/index.js

@@ -0,0 +1,2 @@
+import { SProductGallery as e } from "./s-product-gallery.js";
+export { e as SProductGallery, e as default };

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

@@ -0,0 +1,116 @@
+import { BoxProps, ButtonBaseProps } from '@mui/material';
+import { SCarouselProps } from '../s-carousel';
+import { SLazyImageProps } from '../s-lazy-image';
+import { OwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+interface SProductGalleryItemBase {
+    /** Stable identity and the value reported by `onChange`. */
+    id: string;
+    /** Media URL. */
+    src: string;
+}
+/** An image item shown in the product gallery. */
+export interface SProductGalleryImageItem extends SProductGalleryItemBase {
+    /** Accessible alternative text. Use an empty string only for a decorative image. */
+    alt: string;
+    /** Image shown in the thumbnail rail. Defaults to `src`. */
+    thumbnailSrc?: string;
+    type?: 'image';
+}
+interface SProductGalleryVideoItemBase extends SProductGalleryItemBase {
+    /** Accessible name applied to the native video element. */
+    ariaLabel: string;
+    type: 'video';
+}
+/**
+ * A video item. A poster or dedicated thumbnail is required so the thumbnail
+ * rail never attempts to render the video URL through an image element.
+ */
+export type SProductGalleryVideoItem = SProductGalleryVideoItemBase & ({
+    poster: string;
+    thumbnailSrc?: string;
+} | {
+    poster?: string;
+    thumbnailSrc: string;
+});
+/** A single image or video in the product gallery. */
+export type SProductGalleryItem = SProductGalleryImageItem | SProductGalleryVideoItem;
+/** Props for <SProductGallery>. */
+export interface SProductGalleryProps extends Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange'> {
+    /**
+     * Stage aspect ratio (width / height). Keeping this fixed prevents layout shift
+     * when the selected media changes.
+     */
+    aspectRatio?: number | string;
+    /** Initially selected item id, for uncontrolled usage. Defaults to the first item. */
+    defaultValue?: string;
+    /** Returns the accessible name for a thumbnail button. */
+    getThumbnailAriaLabel?: (item: SProductGalleryItem, index: number, total: number) => string;
+    /** Media shown in the stage and the thumbnail rail. */
+    items: readonly SProductGalleryItem[];
+    /** Called with the newly selected item id. */
+    onChange?: (event: React.SyntheticEvent, value: string) => void;
+    /** Components used for internal structural slots. */
+    slots?: SProductGallerySlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SProductGallerySlotProps;
+    /** Accessible name for the thumbnail rail. */
+    thumbnailsLabel?: string;
+    /** Thumbnails visible at once on wide viewports. Halves below the `sm` breakpoint. */
+    thumbnailsToShow?: number;
+    /** Selected item id, for controlled usage. */
+    value?: string;
+}
+export interface SProductGalleryOwnerState extends SProductGalleryProps {
+    /** Resolved fixed stage aspect ratio. */
+    aspectRatio: number | string;
+    /** The resolved active item, or `null` when there is nothing to show. */
+    activeItem: SProductGalleryItem | null;
+    /** Index of the active item, or `-1` when there is nothing to show. */
+    activeIndex: number;
+    thumbnailsLabel: string;
+    thumbnailsToShow: number;
+    value: string;
+}
+/** Owner state handed to the `thumbnail` slot. */
+export interface SProductGalleryThumbnailOwnerState extends SProductGalleryOwnerState {
+    index: number;
+    item: SProductGalleryItem;
+    selected: boolean;
+}
+export interface SProductGallerySlots {
+    /** The embla-backed thumbnail carousel. */
+    carousel?: React.ElementType;
+    /** Shared media wrapper inside the stage. */
+    media?: React.ElementType;
+    /** Stage image renderer. */
+    image?: React.ElementType;
+    root?: React.ElementType;
+    /** Aspect-ratio box holding the active media. */
+    stage?: React.ElementType;
+    /** One thumbnail button. */
+    thumbnail?: React.ElementType;
+    /** Wrapper around the thumbnail rail. */
+    thumbnails?: React.ElementType;
+    /** Stage video renderer. */
+    video?: React.ElementType;
+}
+export type SProductGalleryCarouselSlotProps = Omit<SCarouselProps, 'apiRef' | 'autoplay' | 'autoplaySpeed' | 'centerMode' | 'centerPadding' | 'children' | 'infinite' | 'responsive' | 'slidesToShow' | 'spaceBetween'>;
+export interface SProductGallerySlotProps {
+    carousel?: OwnerStateSlotProps<SProductGalleryCarouselSlotProps, SProductGalleryOwnerState>;
+    image?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>, SProductGalleryOwnerState>;
+    media?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
+    root?: OwnerStateSlotProps<Omit<BoxProps, 'children' | 'component'>, SProductGalleryOwnerState>;
+    stage?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
+    thumbnail?: OwnerStateSlotProps<Omit<ButtonBaseProps, 'children'>, SProductGalleryThumbnailOwnerState>;
+    thumbnails?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SProductGalleryOwnerState>;
+    /** Native video props. `children` can provide caption or subtitle `<track>` elements. */
+    video?: OwnerStateSlotProps<Omit<React.ComponentPropsWithRef<'video'>, 'poster' | 'src'>, SProductGalleryOwnerState>;
+}
+/**
+ * Product media viewer: one stage plus a scrollable thumbnail rail, with both
+ * controlled and uncontrolled selection. A sibling of `SGallery` rather than a
+ * replacement — `SGallery` stays the masonry/reorder surface.
+ */
+export declare const SProductGallery: React.ForwardRefExoticComponent<Omit<SProductGalleryProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SProductGallery;