@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-pixel-reveal/s-pixel-reveal.js

@@ -1,9 +1,9 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveCanvasColor as t } from "../utils/canvas-color.js";
-import { forwardRef as n, useCallback as r, useEffect as i, useRef as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
-import { Box as c, styled as l, useMediaQuery as u, useTheme as d, useThemeProps as f } from "@mui/material";
-import { useForkRef as p } from "@mui/material/utils";
+import { t as n } from "../useForkRef-BuNFTXxE.js";
+import { forwardRef as r, useCallback as i, useEffect as a, useRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Box as l, styled as u, useMediaQuery as d, useTheme as f, useThemeProps as p } from "@mui/material";
 //#region lib/s-pixel-reveal/s-pixel-reveal.tsx
 var m = class {
 	x;
@@ -44,7 +44,7 @@ var m = class {
 		let n = (t - this.size) * .5;
 		e.fillRect(this.x + n, this.y + n, this.size, this.size);
 	}
-}, h = l(c, {
+}, h = u(l, {
 	name: "SPixelReveal",
 	slot: "Root"
 })({});
@@ -56,12 +56,12 @@ function g({ x: e, y: t, gap: n, logicalWidth: r, logicalHeight: i, instant: a,
 function _(e, t, n) {
 	e.has(t) || e.set(t, []), e.get(t)?.push(n);
 }
-var v = n(function(n, c) {
-	let l = f({
-		props: n,
+var v = r(function(r, l) {
+	let u = p({
+		props: r,
 		name: "SPixelReveal"
-	}), { alt: v = "", children: y, colors: b, gap: x = 5, instant: S = !0, loading: C = !0, speed: w = 100, src: T, style: E, sx: D, ...O } = l, k = Number.isFinite(x) && x > 0 ? x : 5, A = d(), j = a(null), M = a(null), N = a(null), P = a(/* @__PURE__ */ new Map()), F = a(null), I = a(null), L = a(1e3 / 60), R = a(0), z = a(C), B = u("(prefers-reduced-motion: reduce)", { noSsr: !0 }), V = p(M, c), H = {
-		...l,
+	}), { alt: v = "", children: y, colors: b, gap: x = 5, instant: S = !0, loading: C = !0, speed: w = 100, src: T, style: E, sx: D, ...O } = u, k = Number.isFinite(x) && x > 0 ? x : 5, A = f(), j = o(null), M = o(null), N = o(null), P = o(/* @__PURE__ */ new Map()), F = o(null), I = o(null), L = o(1e3 / 60), R = o(0), z = o(C), B = d("(prefers-reduced-motion: reduce)", { noSsr: !0 }), V = n(M, l), H = {
+		...u,
 		alt: v,
 		gap: k,
 		hasImage: !!T,
@@ -71,10 +71,10 @@ var v = n(function(n, c) {
 		src: T
 	};
 	z.current = C;
-	let U = r((e, t, n, r) => {
+	let U = i((e, t, n, r) => {
 		let i = e - n, a = t - r;
 		return i * i + a * a;
-	}, []), W = r((e, t, n) => {
+	}, []), W = i((e, t, n) => {
 		F.current !== null && cancelAnimationFrame(F.current), R.current = performance.now();
 		let r = () => {
 			F.current = requestAnimationFrame(r);
@@ -94,12 +94,12 @@ var v = n(function(n, c) {
 			}), !z.current && !o && F.current !== null && (cancelAnimationFrame(F.current), F.current = null);
 		};
 		r();
-	}, [k]), G = r((e, t, n) => {
+	}, [k]), G = i((e, t, n) => {
 		e.clearRect(0, 0, t, n), z.current && P.current.forEach((t, n) => {
 			e.fillStyle = n;
 			for (let n of t) n.size = n.maxSize, n.draw(e, k);
 		});
-	}, [k]), K = r(() => {
+	}, [k]), K = i(() => {
 		let e = j.current, n = e?.getContext("2d");
 		if (!e || !n) return;
 		P.current = /* @__PURE__ */ new Map();
@@ -136,7 +136,7 @@ var v = n(function(n, c) {
 		U,
 		G,
 		W
-	]), q = r(() => {
+	]), q = i(() => {
 		let e = j.current, t = M.current, n = e?.getContext("2d");
 		if (!e || !t || !n) return;
 		let r = t.getBoundingClientRect();
@@ -144,7 +144,7 @@ var v = n(function(n, c) {
 		let i = Math.floor(r.width), a = Math.floor(r.height), o = window.devicePixelRatio ?? 1;
 		e.width = i * o, e.height = a * o, e.style.width = `${i}px`, e.style.height = `${a}px`, n.setTransform(1, 0, 0, 1, 0, 0), n.scale(o, o), K();
 	}, [K]);
-	return i(() => {
+	return a(() => {
 		q();
 		let e = new ResizeObserver(() => {
 			I.current === null && (I.current = requestAnimationFrame(() => {
@@ -154,7 +154,7 @@ var v = n(function(n, c) {
 		return M.current && e.observe(M.current), () => {
 			e.disconnect(), I.current !== null && (cancelAnimationFrame(I.current), I.current = null), F.current !== null && (cancelAnimationFrame(F.current), F.current = null);
 		};
-	}, [q]), i(() => {
+	}, [q]), a(() => {
 		let e = j.current, t = e?.getContext("2d");
 		if (!e || !t || P.current.size === 0) return;
 		let n = window.devicePixelRatio ?? 1, r = e.width / n, i = e.height / n;
@@ -168,7 +168,7 @@ var v = n(function(n, c) {
 		B,
 		G,
 		W
-	]), /* @__PURE__ */ s(h, {
+	]), /* @__PURE__ */ c(h, {
 		...O,
 		ref: V,
 		ownerState: H,
@@ -180,7 +180,7 @@ var v = n(function(n, c) {
 			width: "100%"
 		}, ...e(D)],
 		children: [
-			T && /* @__PURE__ */ o("img", {
+			T && /* @__PURE__ */ s("img", {
 				ref: N,
 				src: T,
 				alt: v,
@@ -194,7 +194,7 @@ var v = n(function(n, c) {
 				}
 			}),
 			y,
-			/* @__PURE__ */ o("canvas", {
+			/* @__PURE__ */ s("canvas", {
 				ref: j,
 				style: {
 					position: "absolute",

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

@@ -0,0 +1,5 @@
+export { default, default as SPopover } from './s-popover';
+export type { SPopoverOwnerState, SPopoverPlacement, SPopoverProps, SPopoverSlotProps, SPopoverSlots, } from './s-popover';
+export { default as SPopoverContent } from './s-popover-content';
+export type { SPopoverContentProps, SPopoverContentTypeMap } from './s-popover-content';
+export type {} from '../theme/component-augmentation';

package/dist/s-popover/index.js

@@ -0,0 +1,3 @@
+import { SPopover as e } from "./s-popover.js";
+import { SPopoverContent as t } from "./s-popover-content.js";
+export { e as SPopover, e as default, t as SPopoverContent };

package/dist/s-popover/placement.d.ts

@@ -0,0 +1,14 @@
+import { PopoverOrigin } from '@mui/material/Popover';
+/** Anchor edge/corner the popover surface is attached to. */
+export type SPopoverPlacement = 'bottom' | 'bottom-end' | 'bottom-start' | 'top' | 'top-end' | 'top-start';
+/**
+ * Shared placement vocabulary for every anchored surface in the kit.
+ *
+ * Lives outside `s-popover.tsx` so components that anchor a MUI `Menu` (which
+ * cannot be swapped for `SPopover`) can reuse the same origin pairs without
+ * pulling the `SPopover` component into their bundle.
+ */
+export declare const placementOrigins: Record<SPopoverPlacement, {
+    anchorOrigin: PopoverOrigin;
+    transformOrigin: PopoverOrigin;
+}>;

package/dist/s-popover/placement.js

@@ -0,0 +1,65 @@
+//#region lib/s-popover/placement.ts
+var e = {
+	bottom: {
+		anchorOrigin: {
+			horizontal: "center",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			horizontal: "center",
+			vertical: "top"
+		}
+	},
+	"bottom-end": {
+		anchorOrigin: {
+			horizontal: "right",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			horizontal: "right",
+			vertical: "top"
+		}
+	},
+	"bottom-start": {
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		},
+		transformOrigin: {
+			horizontal: "left",
+			vertical: "top"
+		}
+	},
+	top: {
+		anchorOrigin: {
+			horizontal: "center",
+			vertical: "top"
+		},
+		transformOrigin: {
+			horizontal: "center",
+			vertical: "bottom"
+		}
+	},
+	"top-end": {
+		anchorOrigin: {
+			horizontal: "right",
+			vertical: "top"
+		},
+		transformOrigin: {
+			horizontal: "right",
+			vertical: "bottom"
+		}
+	},
+	"top-start": {
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "top"
+		},
+		transformOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		}
+	}
+};
+//#endregion
+export { e as placementOrigins };

package/dist/s-popover/s-popover-content.d.ts

@@ -0,0 +1,22 @@
+import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { Theme } from '@mui/material/styles';
+import { BoxTypeMap } from '@mui/system';
+import * as React from 'react';
+export interface SPopoverContentTypeMap<AdditionalProps = object, RootComponent extends React.ElementType = 'div'> {
+    props: AdditionalProps & BoxTypeMap<object, RootComponent, Theme>['props'];
+    defaultComponent: RootComponent;
+}
+export type SPopoverContentProps<RootComponent extends React.ElementType = SPopoverContentTypeMap['defaultComponent'], AdditionalProps = object> = OverrideProps<SPopoverContentTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+    component?: React.ElementType;
+};
+/**
+ * Padded content region for SPopover.
+ *
+ * Use one or more content regions when a popover mixes padded sections with
+ * edge-to-edge elements such as lists and dividers. The default 16px padding
+ * can be customized through `sx` or the `SPopoverContent` theme entry.
+ */
+export declare const SPopoverContent: OverridableComponent<SPopoverContentTypeMap<object, "div">> & {
+    displayName: string;
+};
+export default SPopoverContent;

package/dist/s-popover/s-popover-content.js

@@ -0,0 +1,22 @@
+import { t as e } from "../Box-9oeZgA1U.js";
+import { t } from "../styled-Bog8QCl3.js";
+import { t as n } from "../useThemeProps-Dw9dmKyT.js";
+import * as r from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region lib/s-popover/s-popover-content.tsx
+var a = t(e, {
+	name: "SPopoverContent",
+	slot: "Root"
+})(({ theme: e }) => ({ padding: e.spacing(2) })), o = Object.assign(r.forwardRef(function(e, t) {
+	let r = n({
+		props: e,
+		name: "SPopoverContent"
+	});
+	return /* @__PURE__ */ i(a, {
+		...r,
+		ownerState: r,
+		ref: t
+	});
+}), { displayName: "SPopoverContent" });
+//#endregion
+export { o as SPopoverContent, o as default };

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

@@ -0,0 +1,59 @@
+import { PaperProps } from '@mui/material/Paper';
+import { PopoverProps, PopoverSlots } from '@mui/material/Popover';
+import { OwnerStateSlotProps } from '../utils/slots';
+import { SPopoverPlacement } from './placement';
+import * as React from 'react';
+export type { SPopoverPlacement } from './placement';
+type PopoverSlotProps = NonNullable<PopoverProps['slotProps']>;
+export interface SPopoverSlots extends Partial<Pick<PopoverSlots, 'backdrop' | 'transition'>> {
+    /** Surface rendered inside the popover, defaults to a themed MUI Paper. */
+    paper?: React.ElementType;
+    /** Popover element itself, defaults to MUI Popover. */
+    root?: React.ElementType;
+}
+type SPopoverRootSlotProps = Omit<PopoverProps, 'anchorOrigin' | 'children' | 'open' | 'slotProps' | 'slots' | 'transformOrigin'>;
+export interface SPopoverSlotProps extends Pick<PopoverSlotProps, 'backdrop' | 'transition'> {
+    /** Props or owner-state callback for the popover surface. */
+    paper?: OwnerStateSlotProps<PaperProps, SPopoverOwnerState>;
+    /** Props or owner-state callback for the popover root. */
+    root?: OwnerStateSlotProps<SPopoverRootSlotProps, SPopoverOwnerState>;
+}
+/** Props for a themed MUI Popover with placement-based origin mapping. */
+export interface SPopoverProps extends Omit<PopoverProps, 'anchorOrigin' | 'slotProps' | 'slots' | 'transformOrigin'> {
+    /** Element, virtual element, or getter the surface is positioned against. */
+    anchorEl?: PopoverProps['anchorEl'];
+    /** Popover content. Use SPopoverContent for a standard padded content region. */
+    children?: React.ReactNode;
+    /** Called when the popover requests to close (backdrop click or Escape). */
+    onClose?: PopoverProps['onClose'];
+    /** If `true`, the popover is shown. */
+    open: boolean;
+    /**
+     * Anchor edge/corner the surface attaches to. Resolves the matching
+     * `anchorOrigin`/`transformOrigin` pair on MUI Popover.
+     */
+    placement?: SPopoverPlacement;
+    /** Components used for internal structural slots. */
+    slots?: SPopoverSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SPopoverSlotProps;
+    /** Stacking order of the popover. Defaults to `theme.zIndex.modal`. */
+    zIndex?: number;
+}
+export interface SPopoverOwnerState extends SPopoverProps {
+    placement: SPopoverPlacement;
+}
+/**
+ * Themed MUI Popover with a `placement` API.
+ *
+ * Replaces the `anchorOrigin`/`transformOrigin` pair with a single `placement`
+ * token resolved from the kit's shared origin map, and applies the flat surface
+ * treatment used by every anchored panel in the system: `background.paper`,
+ * a 1px `divider` border and `radius.md`, with no elevation shadow.
+ * Compose with SPopoverContent when the content needs the standard 16px inset.
+ *
+ * The MUI `backdrop` and `transition` slots stay reachable through `slots` /
+ * `slotProps`; `root` targets the Popover itself rather than the inner Modal.
+ */
+export declare const SPopover: React.ForwardRefExoticComponent<Omit<SPopoverProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SPopover;

package/dist/s-popover/s-popover.js

@@ -0,0 +1,68 @@
+import { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
+import { toSxArray as n } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as r } from "../utils/slots.js";
+import { t as i } from "../useForkRef-BuNFTXxE.js";
+import { t as a } from "../appendOwnerState-CFQTq3pb.js";
+import { t as o } from "../mergeSlotProps-DC8r4QzS.js";
+import { n as s, t as c } from "../Popover-BFdKSYI5.js";
+import { placementOrigins as l } from "./placement.js";
+import * as u from "react";
+import { jsx as d } from "react/jsx-runtime";
+//#region lib/s-popover/s-popover.tsx
+var f = .5, p = e(c, {
+	name: "SPopover",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({ zIndex: e.zIndex.modal })), m = e(s, {
+	name: "SPopover",
+	slot: "Paper",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	border: "1px solid",
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.radius.md,
+	marginTop: 0,
+	variants: [{
+		props: ({ ownerState: e }) => e?.placement?.startsWith("bottom") ?? !1,
+		style: { marginTop: e.spacing(f) }
+	}, {
+		props: ({ ownerState: e }) => e?.placement?.startsWith("top") ?? !1,
+		style: { marginTop: e.spacing(-f) }
+	}]
+})), h = u.forwardRef(function(e, s) {
+	let c = t({
+		props: e,
+		name: "SPopover"
+	}), { placement: u = "bottom-end", slotProps: f, slots: h, sx: g, zIndex: _, ...v } = c, y = {
+		...c,
+		placement: u
+	}, { anchorOrigin: b, transformOrigin: x } = l[u], S = h?.root ?? p, C = h?.paper ?? m, { ref: w, sx: T, ...E } = a(S, o(r(f?.root, y), v), y), D = i(w, s), { sx: O, ...k } = a(C, r(f?.paper, y) ?? {}, y);
+	return /* @__PURE__ */ d(S, {
+		...E,
+		ref: D,
+		anchorOrigin: b,
+		slots: {
+			backdrop: h?.backdrop,
+			paper: C,
+			transition: h?.transition
+		},
+		slotProps: {
+			backdrop: f?.backdrop,
+			paper: {
+				...k,
+				sx: n(O)
+			},
+			transition: f?.transition
+		},
+		sx: [
+			..._ === void 0 ? [] : [{ zIndex: _ }],
+			...n(T),
+			...n(g)
+		],
+		transformOrigin: x
+	});
+});
+h.displayName = "SPopover";
+//#endregion
+export { h as SPopover, h as default };

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

@@ -0,0 +1,3 @@
+export { default, default as SProductCard } from './s-product-card';
+export type { SProductCardBadgePlacement, SProductCardLinkProps, SProductCardOwnerState, SProductCardProps, SProductCardRootProps, SProductCardSlotProps, SProductCardSlots, SProductCardSwatch, SProductCardVariant, } from './s-product-card';
+export type {} from '../theme/component-augmentation';

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

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

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

@@ -0,0 +1,216 @@
+import { BoxProps, CardProps, TypographyProps } from '@mui/material';
+import { SIconButtonProps } from '../s-icon-button/s-icon-button';
+import { SLazyImageProps } from '../s-lazy-image/s-lazy-image';
+import { SSwatchVisualProps } from '../s-swatch/s-swatch';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Density preset. All four share one anatomy and differ only in layout and spacing. */
+export type SProductCardVariant = 'grid' | 'list' | 'mini' | 'overlay';
+/** Logical corner of the media the badge is pinned to. Safe in LTR and RTL layouts. */
+export type SProductCardBadgePlacement = 'bottom-end' | 'bottom-start' | 'top-end' | 'top-start';
+/** One valid color or image option summarised in the swatch row. */
+export type SProductCardSwatch = SSwatchVisualProps & {
+    /** Optional display and accessible label. */
+    label?: string;
+    /** Stable key and human-readable option value. */
+    value: string;
+};
+/** Stretched primary-action props. Navigation and activation stay owned by the top-level API. */
+export type SProductCardLinkProps = Omit<BoxProps, 'children' | 'component' | 'onClick'> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'download' | 'rel' | 'target'> & {
+    /** Disable the MUI touch ripple for the primary action. */
+    disableRipple?: boolean;
+    /** Enable the keyboard focus ripple. */
+    focusRipple?: boolean;
+    /** Class applied while the primary action is keyboard-focus-visible. */
+    focusVisibleClassName?: string;
+};
+/** Root surface props that do not duplicate SProductCard's interaction API. */
+export type SProductCardRootProps = Omit<CardProps, 'children' | 'component' | 'onClick'>;
+export interface SProductCardSlots {
+    /** Trailing cluster of the footer row, holding the favorite toggle and `actions`. */
+    actions?: React.ElementType;
+    /** Promotional label pinned over the media. */
+    badge?: React.ElementType;
+    /** Text column below the media. */
+    content?: React.ElementType;
+    /** Built-in favorite toggle. */
+    favoriteButton?: React.ElementType;
+    /** Bottom row of the content column. */
+    footer?: React.ElementType;
+    /** Layer revealed over the media on hover, focus, and on touch devices. */
+    hoverActions?: React.ElementType;
+    /** Second image cross-faded in on hover. */
+    hoverImage?: React.ElementType;
+    /** Primary media image. */
+    image?: React.ElementType;
+    /** Stretched link covering the whole card. */
+    link?: React.ElementType;
+    /** Media frame that clips the image and positions the badge and hover actions. */
+    media?: React.ElementType;
+    /** Secondary information row under the title. */
+    meta?: React.ElementType;
+    /** Price group of the footer row. */
+    price?: React.ElementType;
+    /** Struck-through original price. */
+    originalPrice?: React.ElementType;
+    /** Rating row under the title. */
+    rating?: React.ElementType;
+    /** Card surface. */
+    root?: React.ElementType;
+    /** Swatch summary row. */
+    swatches?: React.ElementType;
+    /** Product name. */
+    title?: React.ElementType;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SProductCardOwnerState>;
+export interface SProductCardSlotProps {
+    /** Props or owner-state callback for the actions slot. */
+    actions?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the badge slot. */
+    badge?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the content slot. */
+    content?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the favorite button slot. */
+    favoriteButton?: OwnerStateSlotProps<Omit<SIconButtonProps, 'children'>>;
+    /** Props or owner-state callback for the footer slot. */
+    footer?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the hover actions slot. */
+    hoverActions?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the hover image slot. */
+    hoverImage?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>>;
+    /** Props or owner-state callback for the image slot. */
+    image?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>>;
+    /** Props or owner-state callback for the stretched link slot. */
+    link?: OwnerStateSlotProps<SProductCardLinkProps>;
+    /** Props or owner-state callback for the media slot. */
+    media?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the meta slot. */
+    meta?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the price slot. */
+    price?: OwnerStateSlotProps<Omit<TypographyProps, 'children'>>;
+    /** Props or owner-state callback for the original-price slot. */
+    originalPrice?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the rating slot. */
+    rating?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the root slot. */
+    root?: OwnerStateSlotProps<SProductCardRootProps>;
+    /** Props or owner-state callback for the swatches slot. */
+    swatches?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    /** Props or owner-state callback for the title slot. */
+    title?: OwnerStateSlotProps<Omit<TypographyProps, 'children'>>;
+}
+/**
+ * Props for a presentation-only product card. Every region is a `ReactNode` prop
+ * with a matching slot, so no commerce model, formatter, or router is involved.
+ */
+export interface SProductCardProps extends Omit<CardProps, 'children' | 'component' | 'onClick' | 'title' | 'variant'> {
+    /** Action cluster rendered at the trailing end of the footer row. */
+    actions?: React.ReactNode;
+    /**
+     * Alternative text for the built-in image. Empty by default because the
+     * primary card action is already labelled by the visible product title.
+     */
+    alt?: string;
+    /** Media aspect ratio, used when `mediaHeight` is not set. */
+    aspectRatio?: number | string;
+    /** Promotional label rendered over the media — a discount chip, "new", and so on. */
+    badge?: React.ReactNode;
+    /** Corner of the media the badge is pinned to. */
+    badgePlacement?: SProductCardBadgePlacement;
+    /** Initial favorite state for uncontrolled usage. */
+    defaultFavorite?: boolean;
+    /** Disables the primary action and removes all built-in action regions from the tab order. */
+    disabled?: boolean;
+    /** Keeps the hover border feedback but removes the card translate and scale. */
+    disableLift?: boolean;
+    /** Favorite state for controlled usage. */
+    favorite?: boolean;
+    /** Icon of the favorite toggle while favorited. */
+    favoriteActiveIcon?: React.ReactNode;
+    /** Accessible name of the favorite toggle while favorited. */
+    favoriteActiveLabel?: string;
+    /** Icon of the favorite toggle while not favorited. */
+    favoriteIcon?: React.ReactNode;
+    /** Accessible name of the favorite toggle while not favorited. */
+    favoriteLabel?: string;
+    /** Supplemental content rendered between the price and the trailing actions. */
+    footerContent?: React.ReactNode;
+    /** Actions revealed over the media on hover and focus. Always visible on touch devices. */
+    hoverActions?: React.ReactNode;
+    /** Second image URL cross-faded in over the primary image on hover and focus. */
+    hoverImage?: string;
+    /** Link destination. Renders a stretched anchor that covers the whole card. */
+    href?: string;
+    /** Primary media image URL, rendered with `SLazyImage`. Ignored when `media` is set. */
+    image?: string;
+    /** Enables card and media hover/focus effects without changing primary-action semantics. */
+    interactive?: boolean;
+    /** Accessible name of the stretched link. Defaults to the rendered `title`. */
+    linkLabel?: string;
+    /** Maximum swatches rendered before the overflow counter. */
+    maxSwatches?: number;
+    /** Custom media content. Replaces the built-in image and hover image. */
+    media?: React.ReactNode;
+    /** Fixed media height. Takes precedence over `aspectRatio`. */
+    mediaHeight?: number | string;
+    /** Media width. Only meaningful for the `list` variant. */
+    mediaWidth?: number | string;
+    /** Zooms the media image while the card is hovered or focused. */
+    mediaZoom?: boolean;
+    /** Scale factor of the media zoom. */
+    mediaZoomScale?: number;
+    /** Secondary information under the title — tags, category, or an option summary. */
+    meta?: React.ReactNode;
+    /** Called when the card is activated. Used instead of `href` for non-navigating cards. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Called with the next favorite state when the favorite toggle is pressed. */
+    onFavoriteChange?: (event: React.MouseEvent<HTMLButtonElement>, favorite: boolean) => void;
+    /** Pre-formatted current price. Formatting and currency stay with the consumer. */
+    price?: React.ReactNode;
+    /** Pre-formatted original price, rendered struck through next to `price`. */
+    originalPrice?: React.ReactNode;
+    /**
+     * Read-only rating. A number renders a read-only `SRating`; any other node is
+     * rendered as-is, so a custom rating summary can be injected.
+     */
+    rating?: React.ReactNode;
+    /** Sweeps a light sheen across the card on hover and focus. */
+    sheen?: boolean;
+    /** Renders the built-in favorite toggle at the start of the footer actions. */
+    showFavorite?: boolean;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SProductCardSlotProps;
+    /** Components used for internal structural slots. */
+    slots?: SProductCardSlots;
+    /** Color or image options summarised under the title. Presentational, never focusable. */
+    swatches?: SProductCardSwatch[];
+    /** Accessible name of the swatch summary row. */
+    swatchesLabel?: string;
+    /** Product name. Also labels the primary card action when `linkLabel` is omitted. */
+    title: React.ReactNode;
+    /** Density preset. Replaces the MUI `Card` variant, which is available via `slotProps.root`. */
+    variant?: SProductCardVariant;
+}
+export interface SProductCardOwnerState extends Omit<SProductCardProps, 'slotProps' | 'slots'> {
+    alt: string;
+    aspectRatio: number | string;
+    badgePlacement: SProductCardBadgePlacement;
+    clickable: boolean;
+    disableLift: boolean;
+    disabled: boolean;
+    favorite: boolean;
+    interactive: boolean;
+    maxSwatches: number;
+    mediaZoom: boolean;
+    mediaZoomScale: number;
+    sheen: boolean;
+    showFavorite: boolean;
+    variant: SProductCardVariant;
+}
+/**
+ * Presentation shell for a product card. Media, badge, title, rating, meta,
+ * swatches, price, footer and actions are all `ReactNode` props backed by slots,
+ * and every hover effect is CSS driven so no animation library is pulled in.
+ */
+export declare const SProductCard: React.ForwardRefExoticComponent<Omit<SProductCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SProductCard;