@solostylist/ui-kit 2.0.0 → 2.0.2

package/dist/{s-pagination-Dt8Pk5Tp.js → s-pagination-s46hBifh.js}

@@ -5,18 +5,18 @@ import { t as i } from "./generateUtilityClass-PAIOm1jC.js";
 import { t as a } from "./clsx-DGZSe4Nt.js";
 import { t as o } from "./generateUtilityClasses-DvX505Gy.js";
 import { t as s } from "./styled-Bog8QCl3.js";
-import { t as c } from "./Stack-UMc4dV4G.js";
-import { t as l } from "./RtlProvider-B7uVJXUY.js";
-import { t as u } from "./memoTheme-qFyKAk7y.js";
-import { t as d } from "./Skeleton-iZFynl7z.js";
-import { t as f } from "./useThemeProps-Cr28OQu3.js";
-import { t as p } from "./ButtonBase-DxKtpFYs.js";
-import { t as m } from "./useControlled-C4QJnpiR.js";
-import { t as h } from "./useSlot-iIu8ek6E.js";
-import { t as g } from "./capitalize-CccCFNpQ.js";
-import { t as _ } from "./createSimplePaletteValueFilter-C1gWywW_.js";
-import { t as v } from "./createSvgIcon-B0SZlJF1.js";
-import { t as y } from "./integerPropType-Disnft4a.js";
+import { t as c } from "./Stack-C0LGzM4c.js";
+import { t as l } from "./useThemeProps-Dw9dmKyT.js";
+import { t as u } from "./RtlProvider-B7uVJXUY.js";
+import { t as d } from "./memoTheme-qFyKAk7y.js";
+import { t as f } from "./Skeleton-iZFynl7z.js";
+import { t as p } from "./ButtonBase-DovDC6-1.js";
+import { t as m } from "./useControlled-uxVKygk1.js";
+import { t as h } from "./useSlot-BG8ReOxN.js";
+import { t as g } from "./capitalize-C0baBJCm.js";
+import { t as _ } from "./createSimplePaletteValueFilter-DFvyXHoZ.js";
+import { t as v } from "./createSvgIcon-3y-gS0r1.js";
+import { t as y } from "./integerPropType-CCkQD1JY.js";
 import { getPaginationDimensions as b } from "./s-pagination/types.js";
 import * as x from "react";
 import { jsx as S, jsxs as C } from "react/jsx-runtime";
@@ -146,7 +146,7 @@ var O = o("MuiPaginationItem", [
 	name: "MuiPaginationItem",
 	slot: "Root",
 	overridesResolver: N
-})(u(({ theme: e }) => ({
+})(d(({ theme: e }) => ({
 	...e.typography.body2,
 	borderRadius: 32 / 2,
 	textAlign: "center",
@@ -178,7 +178,7 @@ var O = o("MuiPaginationItem", [
 	name: "MuiPaginationItem",
 	slot: "Root",
 	overridesResolver: N
-})(u(({ theme: e }) => ({
+})(d(({ theme: e }) => ({
 	...e.typography.body2,
 	borderRadius: 32 / 2,
 	textAlign: "center",
@@ -283,7 +283,7 @@ var O = o("MuiPaginationItem", [
 }))), L = s("div", {
 	name: "MuiPaginationItem",
 	slot: "Icon"
-})(u(({ theme: e }) => ({
+})(d(({ theme: e }) => ({
 	fontSize: e.typography.pxToRem(20),
 	margin: "0 -8px",
 	variants: [{
@@ -297,7 +297,7 @@ var O = o("MuiPaginationItem", [
 	let n = r({
 		props: e,
 		name: "MuiPaginationItem"
-	}), { className: i, color: o = "standard", component: s, disabled: c = !1, page: u, selected: d = !1, shape: f = "circular", size: p = "medium", slots: m = {}, slotProps: g = {}, type: _ = "page", variant: v = "text", ...y } = n, b = {
+	}), { className: i, color: o = "standard", component: s, disabled: c = !1, page: l, selected: d = !1, shape: f = "circular", size: p = "medium", slots: m = {}, slotProps: g = {}, type: _ = "page", variant: v = "text", ...y } = n, b = {
 		...n,
 		color: o,
 		disabled: c,
@@ -306,7 +306,7 @@ var O = o("MuiPaginationItem", [
 		size: p,
 		type: _,
 		variant: v
-	}, x = l(), w = P(b), T = {
+	}, x = u(), w = P(b), T = {
 		slots: m,
 		slotProps: g
 	}, [E, D] = h("previous", {
@@ -354,7 +354,7 @@ var O = o("MuiPaginationItem", [
 		disabled: c,
 		className: a(w.root, i),
 		...y,
-		children: [_ === "page" && u, U ? /* @__PURE__ */ S(L, {
+		children: [_ === "page" && l, U ? /* @__PURE__ */ S(L, {
 			...W,
 			className: w.icon,
 			as: U
@@ -532,18 +532,18 @@ var W = 5, G = s(U, {
 	slot: "Root",
 	shouldForwardProp: (e) => e !== "ownerState"
 })(({ ownerState: e }) => ({ ...e.loading && { display: "inline-flex" } })), K = x.forwardRef(function(e, t) {
-	let n = f({
+	let n = l({
 		props: e,
 		name: "SPagination"
-	}), { "aria-label": r = "pagination navigation", "aria-busy": i, className: a, color: o = "primary", count: s = 0, loading: l = !1, loadingIndicator: u, shape: p = "rounded", size: m = "medium", style: h, sx: g, variant: _ = "text", ...v } = n;
+	}), { "aria-label": r = "pagination navigation", "aria-busy": i, className: a, color: o = "primary", count: s = 0, loading: u = !1, loadingIndicator: d, shape: p = "rounded", size: m = "medium", style: h, sx: g, variant: _ = "text", ...v } = n;
 	if (s <= 0) return null;
-	let y = b(m), w = l || v.disabled, T = {
+	let y = b(m), w = u || v.disabled, T = {
 		...n,
 		"aria-label": r,
 		color: o,
 		count: s,
 		disabled: w,
-		loading: l,
+		loading: u,
 		shape: p,
 		size: m,
 		variant: _
@@ -556,22 +556,22 @@ var W = 5, G = s(U, {
 			display: "inline-flex",
 			gap: `${y.gap}px`
 		},
-		children: u ?? (p === "circular" ? Array.from({ length: W }, (e, t) => /* @__PURE__ */ S(d, {
+		children: d ?? (p === "circular" ? Array.from({ length: W }, (e, t) => /* @__PURE__ */ S(f, {
 			variant: "circular",
 			width: y.item,
 			height: y.item
 		}, t)) : /* @__PURE__ */ C(x.Fragment, { children: [
-			/* @__PURE__ */ S(d, {
+			/* @__PURE__ */ S(f, {
 				variant: "rounded",
 				width: y.item,
 				height: y.item
 			}),
-			/* @__PURE__ */ S(d, {
+			/* @__PURE__ */ S(f, {
 				variant: "rounded",
 				width: y.bar,
 				height: y.item
 			}),
-			/* @__PURE__ */ S(d, {
+			/* @__PURE__ */ S(f, {
 				variant: "rounded",
 				width: y.item,
 				height: y.item
@@ -581,20 +581,20 @@ var W = 5, G = s(U, {
 	return /* @__PURE__ */ S(G, {
 		...v,
 		"aria-label": r,
-		"aria-busy": i ?? (l || void 0),
+		"aria-busy": i ?? (u || void 0),
 		className: a,
 		color: o,
-		count: l ? 1 : s,
+		count: u ? 1 : s,
 		disabled: w,
-		hideNextButton: l || v.hideNextButton,
-		hidePrevButton: l || v.hidePrevButton,
+		hideNextButton: u || v.hideNextButton,
+		hidePrevButton: u || v.hidePrevButton,
 		ownerState: T,
 		page: v.page,
 		ref: t,
-		renderItem: l ? () => E : v.renderItem,
+		renderItem: u ? () => E : v.renderItem,
 		shape: p,
-		showFirstButton: l ? !1 : v.showFirstButton,
-		showLastButton: l ? !1 : v.showLastButton,
+		showFirstButton: u ? !1 : v.showFirstButton,
+		showLastButton: u ? !1 : v.showLastButton,
 		size: m,
 		style: h,
 		sx: g,

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

@@ -1,6 +1,6 @@
 import { toSxArray as e } from "../utils/sx.js";
 import { resolveCanvasColor as t } from "../utils/canvas-color.js";
-import { t as n } from "../useForkRef-CKneCEtr.js";
+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";

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;