@solostylist/ui-kit 2.0.0 → 2.0.2

package/dist/s-glow-button/s-glow-button.js

@@ -1,5 +1,5 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Cr28OQu3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
 import { toSxArray as n } from "../utils/sx.js";
 import { SMovingBorder as r } from "../s-moving-border/s-moving-border.js";
 import i from "react";

package/dist/s-gradient-blob-pulse/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as SGradientBlobPulse } from './s-gradient-blob-pulse';
+export type { SGradientBlobPulseBlobOwnerState, SGradientBlobPulseOwnerState, SGradientBlobPulseProps, SGradientBlobPulseSize, SGradientBlobPulseSlotProps, SGradientBlobPulseSlots, SGradientBlobPulseVariant, } from './s-gradient-blob-pulse';

package/dist/s-gradient-blob-pulse/index.js

@@ -0,0 +1,2 @@
+import { SGradientBlobPulse as e } from "./s-gradient-blob-pulse.js";
+export { e as SGradientBlobPulse, e as default };

package/dist/s-gradient-blob-pulse/s-gradient-blob-pulse.d.ts

@@ -0,0 +1,62 @@
+import { BoxProps } from '@mui/material';
+import { OwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Overall footprint of the blob field: blob diameters, blur and minimum size. */
+export type SGradientBlobPulseSize = 'large' | 'medium' | 'small';
+/** Intensity of the blob fill, from a faint wash to a saturated glow. */
+export type SGradientBlobPulseVariant = 'balanced' | 'soft' | 'vivid';
+/** Props for <SGradientBlobPulse>. */
+export interface SGradientBlobPulseProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Duration of one blob pulse, in milliseconds. The color cycle scales with it. */
+    animationDuration?: number;
+    /** Content rendered above the animated backdrop. */
+    children?: React.ReactNode;
+    /**
+     * Up to four colors the blobs cycle through. Shorter arrays are padded by
+     * repeating the first color. Defaults to the theme brand and secondary ramps,
+     * so palette switches follow along.
+     */
+    colors?: string[];
+    /** Freezes the pulse and the color cycle. */
+    paused?: boolean;
+    /** Overall footprint of the blob field: blob diameters, blur and minimum size. */
+    size?: SGradientBlobPulseSize;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SGradientBlobPulseSlotProps;
+    /** Components used for internal structural slots. */
+    slots?: SGradientBlobPulseSlots;
+    /** Intensity of the blob fill, from a faint wash to a saturated glow. */
+    variant?: SGradientBlobPulseVariant;
+}
+export interface SGradientBlobPulseOwnerState extends SGradientBlobPulseProps {
+    animationDuration: number;
+    paused: boolean;
+    size: SGradientBlobPulseSize;
+    variant: SGradientBlobPulseVariant;
+}
+/** Owner state handed to the `blob` slot, identifying which of the three blobs it is. */
+export interface SGradientBlobPulseBlobOwnerState extends SGradientBlobPulseOwnerState {
+    index: 0 | 1 | 2;
+}
+export interface SGradientBlobPulseSlots {
+    /** One of the three animated blobs. */
+    blob?: React.ElementType;
+    /** Wraps `children` above the blob field. */
+    content?: React.ElementType;
+    root?: React.ElementType;
+}
+export interface SGradientBlobPulseSlotProps {
+    blob?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SGradientBlobPulseBlobOwnerState>;
+    content?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SGradientBlobPulseOwnerState>;
+    root?: OwnerStateSlotProps<Omit<BoxProps, 'children'>, SGradientBlobPulseOwnerState>;
+}
+/**
+ * Three drifting, color-cycling gradient blobs behind arbitrary content —
+ * an ambient backdrop for hero panels, cards and empty states.
+ *
+ * The field keeps a minimum footprint from `size` so the blobs stay inside it,
+ * while their blur halo bleeds past the edge; contain it with `overflow` from
+ * `sx`, and retune the radius with the `--SGradientBlobPulse-blur` variable.
+ */
+export declare const SGradientBlobPulse: React.ForwardRefExoticComponent<Omit<SGradientBlobPulseProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SGradientBlobPulse;

package/dist/s-gradient-blob-pulse/s-gradient-blob-pulse.js

@@ -0,0 +1,237 @@
+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 r } from "../appendOwnerState-CFQTq3pb.js";
+import { t as i } from "../mergeSlotProps-DC8r4QzS.js";
+import * as a from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { Box as c, keyframes as l, styled as u, useThemeProps as d } from "@mui/material";
+//#region lib/s-gradient-blob-pulse/s-gradient-blob-pulse.tsx
+var f = "--SGradientBlobPulse-blur", p = {
+	large: {
+		blobSizes: [
+			260,
+			200,
+			140
+		],
+		blur: 40
+	},
+	medium: {
+		blobSizes: [
+			180,
+			140,
+			100
+		],
+		blur: 28
+	},
+	small: {
+		blobSizes: [
+			80,
+			60,
+			40
+		],
+		blur: 14
+	}
+}, m = 1.3, h = {
+	balanced: {
+		colorCore: "50%",
+		colorMid: "18%",
+		fadeEnd: "64%",
+		fadeMid: "34%",
+		opacities: [
+			.48,
+			.38,
+			.32
+		],
+		sizeScale: 1
+	},
+	soft: {
+		colorCore: "34%",
+		colorMid: "10%",
+		fadeEnd: "52%",
+		fadeMid: "26%",
+		opacities: [
+			.28,
+			.22,
+			.18
+		],
+		sizeScale: 1
+	},
+	vivid: {
+		colorCore: "68%",
+		colorMid: "30%",
+		fadeEnd: "74%",
+		fadeMid: "40%",
+		opacities: [
+			.62,
+			.52,
+			.44
+		],
+		sizeScale: 1.08
+	}
+}, g = [
+	{
+		colorDelay: 0,
+		pulseDelay: 0,
+		pulseDuration: 1
+	},
+	{
+		colorDelay: .625,
+		pulseDelay: -.1875,
+		pulseDuration: .875
+	},
+	{
+		colorDelay: 1.25,
+		pulseDelay: -.34375,
+		pulseDuration: 1.125
+	}
+], _ = 2.5, v = [
+	l`
+  0%, 100% { transform: translate(-54%, -50%) scale(1); }
+  50% { transform: translate(-47%, -55%) scale(1.22); }
+`,
+	l`
+  0%, 100% { transform: translate(-46%, -48%) scale(1); }
+  50% { transform: translate(-53%, -43%) scale(1.16); }
+`,
+	l`
+  0%, 100% { transform: translate(-50%, -56%) scale(1); }
+  50% { transform: translate(-43%, -49%) scale(1.25); }
+`
+], y = l`
+  0%, 100% { background-image: var(--SGradientBlobPulse-gradient-1); }
+  25% { background-image: var(--SGradientBlobPulse-gradient-2); }
+  50% { background-image: var(--SGradientBlobPulse-gradient-3); }
+  75% { background-image: var(--SGradientBlobPulse-gradient-4); }
+`, b = (e, t) => {
+	let n = (e.vars ?? e).palette, r = t.colors?.length ? t.colors : [
+		n.primary[300],
+		n.primary[600],
+		n.secondary[400],
+		n.secondary[600]
+	];
+	return [
+		r[0],
+		r[1] ?? r[0],
+		r[2] ?? r[0],
+		r[3] ?? r[0]
+	];
+}, x = u(c, {
+	name: "SGradientBlobPulse",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ ownerState: e, theme: t }) => {
+	let n = p[e.size], r = h[e.variant], i = b(t, e), a = `${Math.round(n.blobSizes[0] * m)}px`, o = i.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-gradient-${n + 1}`]: [
+			"radial-gradient(circle,",
+			`color-mix(in srgb, ${t} ${r.colorCore}, transparent) 0%,`,
+			`color-mix(in srgb, ${t} ${r.colorMid}, transparent) ${r.fadeMid},`,
+			`transparent ${r.fadeEnd})`
+		].join(" ")
+	}), {}), s = i.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-gradient-${n + 1}`]: `radial-gradient(circle, ${t} 0%, transparent ${r.fadeEnd})`
+	}), {}), c = n.blobSizes.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-blobSize-${n + 1}`]: `${Math.round(t * r.sizeScale)}px`
+	}), {}), l = r.opacities.reduce((e, t, n) => ({
+		...e,
+		[`--SGradientBlobPulse-opacity-${n + 1}`]: String(t)
+	}), {}), u = g.reduce((t, n, r) => ({
+		...t,
+		[`--SGradientBlobPulse-colorDelay-${r + 1}`]: `${Math.round(e.animationDuration * n.colorDelay)}ms`,
+		[`--SGradientBlobPulse-pulseDelay-${r + 1}`]: `${Math.round(e.animationDuration * n.pulseDelay)}ms`,
+		[`--SGradientBlobPulse-pulseDuration-${r + 1}`]: `${Math.round(e.animationDuration * n.pulseDuration)}ms`
+	}), {});
+	return {
+		[f]: `${n.blur}px`,
+		"--SGradientBlobPulse-colorDuration": `${Math.round(e.animationDuration * _)}ms`,
+		...o,
+		...c,
+		...l,
+		...u,
+		alignItems: "center",
+		display: "inline-flex",
+		isolation: "isolate",
+		justifyContent: "center",
+		minHeight: a,
+		minWidth: a,
+		position: "relative",
+		"@supports not (color: color-mix(in srgb, red, blue))": s
+	};
+}), S = u(c, {
+	name: "SGradientBlobPulse",
+	slot: "Blob",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.full,
+	filter: `blur(var(${f}))`,
+	left: "50%",
+	mixBlendMode: "normal",
+	pointerEvents: "none",
+	position: "absolute",
+	top: "50%",
+	willChange: "transform",
+	zIndex: 0,
+	"@media (prefers-reduced-motion: reduce)": { animation: "none !important" },
+	...e.applyStyles("dark", { mixBlendMode: "screen" }),
+	variants: [...v.map((t, n) => ({
+		props: ({ ownerState: e }) => e.index === n,
+		style: {
+			animation: [`${t} var(--SGradientBlobPulse-pulseDuration-${n + 1}) ${e.transitions.easing.easeInOut} infinite`, `${y} var(--SGradientBlobPulse-colorDuration) linear infinite`].join(", "),
+			animationDelay: `var(--SGradientBlobPulse-pulseDelay-${n + 1}), var(--SGradientBlobPulse-colorDelay-${n + 1})`,
+			backgroundImage: `var(--SGradientBlobPulse-gradient-${n + 1})`,
+			height: `var(--SGradientBlobPulse-blobSize-${n + 1})`,
+			opacity: `var(--SGradientBlobPulse-opacity-${n + 1})`,
+			width: `var(--SGradientBlobPulse-blobSize-${n + 1})`
+		}
+	})), {
+		props: ({ ownerState: e }) => e.paused,
+		style: { animationPlayState: "paused" }
+	}]
+})), C = u(c, {
+	name: "SGradientBlobPulse",
+	slot: "Content",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	position: "relative",
+	zIndex: 1
+}), w = [
+	0,
+	1,
+	2
+], T = a.forwardRef(function(a, c) {
+	let l = d({
+		props: a,
+		name: "SGradientBlobPulse"
+	}), { animationDuration: u = 3200, children: f, colors: p, paused: m = !1, size: h = "medium", slotProps: g, slots: _, sx: v, variant: y = "balanced", ...b } = l, T = {
+		...l,
+		animationDuration: u,
+		colors: p,
+		paused: m,
+		size: h,
+		variant: y
+	}, E = _?.root ?? x, D = _?.blob ?? S, O = _?.content ?? C, { ref: k, sx: A, ...j } = r(E, i(t(g?.root, T), b), T), M = n(k, c), N = r(O, t(g?.content, T) ?? {}, T);
+	return /* @__PURE__ */ s(E, {
+		...j,
+		ref: M,
+		sx: [...e(A), ...e(v)],
+		children: [w.map((e) => {
+			let n = {
+				...T,
+				index: e
+			};
+			return /* @__PURE__ */ o(D, {
+				...r(D, t(g?.blob, n) ?? {}, n),
+				"aria-hidden": !0
+			}, e);
+		}), /* @__PURE__ */ o(O, {
+			...N,
+			children: f
+		})]
+	});
+});
+T.displayName = "SGradientBlobPulse";
+//#endregion
+export { T as SGradientBlobPulse, T as default };

package/dist/s-gradient-icon/index.d.ts

@@ -1,3 +1,3 @@
 export { default, default as SGradientIcon } from './s-gradient-icon';
-export type { AnimationEasing, CustomGradient, GradientDirection, GradientRole, SGradientIconOwnerState, SGradientIconProps, } from './s-gradient-icon';
+export type { AnimationEasing, CustomGradient, GradientRole, SGradientIconDirection, SGradientIconOwnerState, SGradientIconProps, } from './s-gradient-icon';
 export type {} from '../theme/component-augmentation';

package/dist/s-gradient-icon/s-gradient-icon.d.ts

@@ -6,7 +6,7 @@ type IconComponent = OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
     muiName: string;
 };
 /** Gradient direction options */
-export type GradientDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
+export type SGradientIconDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
 /** Semantic gradient roles */
 export type GradientRole = 'brand-primary' | 'brand-subtle' | 'custom';
 /** Animation easing options */
@@ -23,7 +23,7 @@ export interface CustomGradient {
     middlePosition?: number;
 }
 /** Props interface for SGradientIcon component */
-export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
+export interface SGradientIconProps extends Omit<SvgIconProps, 'component' | 'direction'> {
     /** Whether the icon should show the gradient fill (hover state) */
     hovered?: boolean;
     /** The Material-UI icon component to render with gradient effect */
@@ -37,7 +37,7 @@ export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
     /** Custom gradient colors when role is 'custom' */
     customGradient?: CustomGradient;
     /** Direction of the gradient (default: 'diagonal') */
-    gradientDirection?: GradientDirection;
+    direction?: SGradientIconDirection;
     /** Animation duration in milliseconds (default: 300) */
     animationDuration?: number;
     /** Animation easing function (default: 'ease') */
@@ -56,7 +56,7 @@ export type SGradientIconOwnerState = SGradientIconProps & {
     animationDuration: number;
     animationEasing: AnimationEasing;
     autoHover: boolean;
-    gradientDirection: GradientDirection;
+    direction: SGradientIconDirection;
     gradientRole: GradientRole;
     hovered: boolean;
     strokeWidth: number;

package/dist/s-gradient-icon/s-gradient-icon.js

@@ -14,7 +14,7 @@ var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
 	let u = c({
 		props: t,
 		name: "SGradientIcon"
-	}), { hovered: d = !1, IconComponent: f, sx: p, strokeWidth: m = 0, gradientRole: h = "brand-primary", customGradient: g, gradientDirection: _ = "diagonal", animationDuration: v = 300, animationEasing: y = "ease", autoHover: b = !1, gradientId: x, alwaysGradient: S = !1, fallbackColor: C, ...w } = u, T = s(), E = (T.vars ?? T).palette, D = n(), O = x ?? `gradient-${D}`, k = {
+	}), { hovered: d = !1, IconComponent: f, sx: p, strokeWidth: m = 0, gradientRole: h = "brand-primary", customGradient: g, direction: _ = "diagonal", animationDuration: v = 300, animationEasing: y = "ease", autoHover: b = !1, gradientId: x, alwaysGradient: S = !1, fallbackColor: C, ...w } = u, T = s(), E = (T.vars ?? T).palette, D = n(), O = x ?? `gradient-${D}`, k = {
 		"brand-primary": {
 			start: E.primary[400],
 			end: E.primary[700]
@@ -63,7 +63,7 @@ var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
 		animationDuration: v,
 		animationEasing: y,
 		autoHover: b,
-		gradientDirection: _,
+		direction: _,
 		gradientRole: h,
 		hovered: d,
 		strokeWidth: m

package/dist/s-icon-button/s-icon-button.d.ts

@@ -17,8 +17,12 @@ export interface SIconButtonSlotProps {
     /** Props or an owner-state callback for the tooltip slot. */
     tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children' | 'title'>>;
 }
-/** MUI IconButton with an optional tooltip slot. */
-export interface SIconButtonProps extends Omit<IconButtonProps, 'component'> {
+/**
+ * MUI IconButton with an optional tooltip slot. Setting `href` makes the
+ * underlying ButtonBase render an anchor, so icon-only links keep the button
+ * hit target and hover state.
+ */
+export interface SIconButtonProps extends Omit<IconButtonProps, 'component'>, Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'> {
     /** Components used for internal slots. */
     slots?: SIconButtonSlots;
     /** Props or owner-state callbacks for internal slots. */

package/dist/s-icon-button/s-icon-button.js

@@ -1,12 +1,12 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { r as t } from "../elementAcceptingRef-DhkNAkFH.js";
-import { t as n } from "../useThemeProps-Cr28OQu3.js";
-import { t as r } from "../appendOwnerState-CELpvdMz.js";
-import { t as i } from "../Tooltip-DbCd6rgF.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
+import { t as n } from "../IconButton-CE-4GamO.js";
+import { t as r } from "../appendOwnerState-CFQTq3pb.js";
+import { t as i } from "../Tooltip-B1sn94L0.js";
 import * as a from "react";
 import { jsx as o } from "react/jsx-runtime";
 //#region lib/s-icon-button/s-icon-button.tsx
-var s = e(t, {
+var s = e(n, {
 	name: "SIconButton",
 	slot: "Root"
 })(({ theme: e, ownerState: t }) => {
@@ -23,8 +23,8 @@ var s = e(t, {
 function c(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
-var l = a.forwardRef(function(e, t) {
-	let a = n({
+var l = a.forwardRef(function(e, n) {
+	let a = t({
 		props: e,
 		name: "SIconButton"
 	}), { disabled: l = !1, slotProps: u, slots: d, tooltip: f, variant: p, ...m } = a, h = {
@@ -37,7 +37,7 @@ var l = a.forwardRef(function(e, t) {
 		"aria-label": v,
 		disabled: l,
 		ownerState: h,
-		ref: t
+		ref: n
 	});
 	return f == null ? y : /* @__PURE__ */ o(g, {
 		..._,

package/dist/s-image-comparison/s-image-comparison.js

@@ -1,9 +1,9 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../useThemeProps-Cr28OQu3.js";
+import { t } from "../useThemeProps-Dw9dmKyT.js";
 import { toSxArray as n } from "../utils/sx.js";
-import { t as r } from "../useForkRef-CKneCEtr.js";
+import { t as r } from "../useForkRef-BuNFTXxE.js";
 import "../theme/components/action-styles.js";
-import { t as i } from "../useControlled-BeB0W_Ui.js";
+import { t as i } from "../useControlled-DqNPBJNp.js";
 import { SLazyImage as a } from "../s-lazy-image/s-lazy-image.js";
 import * as o from "react";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";

package/dist/s-image-viewer/image-viewer-thumbnail-dock.js

@@ -1,4 +1,4 @@
-import { r as e } from "../theme-primitives-Dt_DT9b5.js";
+import { r as e } from "../theme-primitives-CXtaMdVj.js";
 import { DefaultMediaItem as t } from "./default-media-item.js";
 import "react";
 import { jsx as n } from "react/jsx-runtime";

package/dist/s-image-viewer/index.js

@@ -1,3 +1,3 @@
-import { t as e } from "../s-image-viewer-DNIEYdtL.js";
+import { t as e } from "../s-image-viewer-CjK67-rs.js";
 import { DefaultMediaItem as t } from "./default-media-item.js";
 export { t as DefaultMediaItem, e as SImageViewer, e as default };

package/dist/s-image-viewer/s-image-viewer.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-image-viewer-DNIEYdtL.js";
+import { t as e } from "../s-image-viewer-CjK67-rs.js";
 export { e as SImageViewer, e as default };

package/dist/s-image-viewer/use-image-viewer-navigation.js

@@ -1,4 +1,4 @@
-import { t as e } from "../useControlled-BeB0W_Ui.js";
+import { t as e } from "../useControlled-DqNPBJNp.js";
 import { useCallback as t } from "react";
 //#region lib/s-image-viewer/use-image-viewer-navigation.ts
 var n = [

package/dist/{s-image-viewer-DNIEYdtL.js → s-image-viewer-CjK67-rs.js}

@@ -1,10 +1,10 @@
 import { t as e } from "./styled-Bog8QCl3.js";
-import { t } from "./useThemeProps-Cr28OQu3.js";
+import { t } from "./useThemeProps-Dw9dmKyT.js";
 import { toSxArray as n } from "./utils/sx.js";
-import { t as r } from "./createSvgIcon-B0SZlJF1.js";
-import { t as i } from "./mergeSlotProps-xl1-PgWL.js";
-import { t as a } from "./ChevronRight-BxsM4W78.js";
-import { t as o } from "./Close-o4HFfK0I.js";
+import { t as r } from "./createSvgIcon-3y-gS0r1.js";
+import { t as i } from "./mergeSlotProps-DC8r4QzS.js";
+import { t as a } from "./ChevronRight-DsPfsFKB.js";
+import { t as o } from "./Close-CIYOM-Sc.js";
 import { DefaultMediaItem as s } from "./s-image-viewer/default-media-item.js";
 import { ImageViewerThumbnailDock as c } from "./s-image-viewer/image-viewer-thumbnail-dock.js";
 import { useImageViewerNavigation as l } from "./s-image-viewer/use-image-viewer-navigation.js";

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

@@ -0,0 +1,3 @@
+export { default, default as SInteractiveCard } from './s-interactive-card';
+export type { SInteractiveCardActionAreaProps, SInteractiveCardOwnerState, SInteractiveCardProps, SInteractiveCardSlotProps, SInteractiveCardSlots, } from './s-interactive-card';
+export type {} from '../theme/component-augmentation';

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

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

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

@@ -0,0 +1,57 @@
+import { BoxProps, CardActionAreaProps, CardProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SInteractiveCardSlots {
+    /** Element wrapping the children when the card is clickable. */
+    actionArea?: React.ElementType;
+    /** Decorative layer rendered above the content. */
+    overlay?: React.ElementType;
+    /** Card surface element. */
+    root?: React.ElementType;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SInteractiveCardOwnerState>;
+/** Action area props, widened with the anchor attributes used when `href` is set. */
+export type SInteractiveCardActionAreaProps = CardActionAreaProps & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
+export interface SInteractiveCardSlotProps {
+    /** Props or owner-state callback for the action area slot. */
+    actionArea?: OwnerStateSlotProps<SInteractiveCardActionAreaProps>;
+    /** Props or owner-state callback for the overlay slot. */
+    overlay?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the root slot. */
+    root?: OwnerStateSlotProps<Omit<CardProps, 'children'>>;
+}
+/** Props for a card surface with a hover-lift and focus interaction language. */
+export interface SInteractiveCardProps extends Omit<CardProps, 'children' | 'component' | 'onClick'> {
+    /**
+     * Card content. When `href` or `onClick` is provided, the content is wrapped
+     * in one `CardActionArea` and must not contain nested interactive controls.
+     */
+    children?: React.ReactNode;
+    /** Keeps the hover border feedback but removes the translate and scale. */
+    disableLift?: boolean;
+    /** Disables the primary action and all built-in interaction effects. */
+    disabled?: boolean;
+    /** Link destination. When set, the card action area renders with anchor semantics. */
+    href?: string;
+    /** Enables the surface lift, border and sheen effects without changing action semantics. */
+    interactive?: boolean;
+    /** Called when the card action area is activated. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Decorative content rendered in the overlay layer. Always `aria-hidden`. */
+    overlay?: React.ReactNode;
+    /** Sweeps a light sheen across the card on hover/focus. Disabled by default. */
+    sheen?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SInteractiveCardSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SInteractiveCardSlotProps;
+}
+export interface SInteractiveCardOwnerState extends Omit<SInteractiveCardProps, 'slotProps' | 'slots'> {
+    clickable: boolean;
+    disableLift: boolean;
+    disabled: boolean;
+    interactive: boolean;
+    sheen: boolean;
+}
+export declare const SInteractiveCard: React.ForwardRefExoticComponent<Omit<SInteractiveCardProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SInteractiveCard;