@solostylist/ui-kit 2.0.0 → 2.0.2

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

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

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

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