@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,51 +1,69 @@
-import { t as e } from "../s-image-modal-D-Jh-5b3.js";
-import { GalleryGridItem as t } from "./gallery-grid-item.js";
-import { applyLayoutVariant as n, getLayoutDimensions as r } from "./gallery-layout.js";
-import { useCallback as i, useEffect as a, useId as o, useState as s } from "react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Box as u, Paper as d, Skeleton as f } from "@mui/material";
-import { AnimatePresence as p, motion as m } from "framer-motion";
+import { toSxArray as e } from "../utils/sx.js";
+import { SImageViewer as t } from "../s-image-viewer/s-image-viewer.js";
+import { GalleryGridItem as n } from "./gallery-grid-item.js";
+import { applyLayoutVariant as r, getLayoutDimensions as i } from "./gallery-layout.js";
+import a, { useCallback as o, useEffect as s, useId as c, useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Box as f, Paper as p, Skeleton as m, styled as h, useThemeProps as g } from "@mui/material";
+import { AnimatePresence as _, motion as v, useReducedMotion as y } from "framer-motion";
 //#region lib/s-gallery/s-gallery.tsx
-var h = ({ mediaItems: h, variant: g = "masonry", loading: _ = !1, skeletonCount: v = 6 }) => {
-	let [y, b] = s(null), [x, S] = s(() => n(h, g)), [C, w] = s(!1), T = o();
-	a(() => {
-		S(n(h, g));
-	}, [h, g]);
-	let E = Array.from({ length: v }, (e, t) => ({
-		id: `${g}-skeleton-${t + 1}`,
-		...r(t, g)
-	})), D = i(() => w(!0), []), O = i((e, t) => {
-		if (w(!1), Math.abs(t) > 50) {
-			let n = [...x], r = n[e], i = t > 0 ? Math.min(e + 1, x.length - 1) : Math.max(e - 1, 0);
-			n.splice(e, 1), n.splice(i, 0, r), S(n);
+var b = h(f, {
+	name: "SGallery",
+	slot: "Root"
+})({}), x = a.forwardRef(function(a, h) {
+	let { "aria-busy": x, getItemLabel: S = (e, t) => e.title ? `View ${e.title}` : `View gallery item ${t + 1}`, loading: C = !1, mediaItems: w, skeletonCount: T = 6, sx: E, variant: D = "masonry", viewerLabel: O = "Gallery media viewer", ...k } = g({
+		props: a,
+		name: "SGallery"
+	}), [A, j] = l(null), [M, N] = l(() => r(w, D)), [P, F] = l(!1), I = c(), L = y();
+	s(() => {
+		N(r(w, D));
+	}, [w, D]);
+	let R = Array.from({ length: T }, (e, t) => ({
+		id: `${D}-skeleton-${t + 1}`,
+		...i(t, D)
+	})), z = o(() => F(!0), []), B = o((e, t) => {
+		if (F(!1), Math.abs(t) > 50) {
+			let n = [...M], r = n[e], i = t > 0 ? Math.min(e + 1, M.length - 1) : Math.max(e - 1, 0);
+			n.splice(e, 1), n.splice(i, 0, r), N(n);
 		}
-	}, [x]);
-	return /* @__PURE__ */ l(u, {
-		sx: {
-			width: "100%",
+	}, [M]), V = {
+		isDragging: P,
+		loading: C,
+		skeletonCount: T,
+		variant: D
+	};
+	return /* @__PURE__ */ d(b, {
+		...k,
+		"aria-busy": x ?? (C || void 0),
+		ownerState: V,
+		ref: h,
+		sx: [{
 			position: "relative",
+			width: "100%",
 			zIndex: 1
-		},
-		children: [/* @__PURE__ */ c(e, {
-			selectedItem: y,
-			isOpen: !!y,
-			onClose: () => b(null),
-			onItemChange: b,
-			mediaItems: x
-		}), /* @__PURE__ */ c(p, {
+		}, ...e(E)],
+		children: [/* @__PURE__ */ u(t, {
+			"aria-label": O,
+			selectedItem: A,
+			open: !!A,
+			onClose: () => j(null),
+			onCloseButtonClick: () => j(null),
+			onItemChange: (e, t) => j(t),
+			mediaItems: M
+		}), /* @__PURE__ */ u(_, {
 			mode: "wait",
-			children: !y && /* @__PURE__ */ c(m.div, {
-				initial: "hidden",
+			children: !A && /* @__PURE__ */ u(v.div, {
+				initial: L ? !1 : "hidden",
 				animate: "visible",
-				exit: "hidden",
+				exit: L ? void 0 : "hidden",
 				variants: {
-					hidden: { opacity: 0 },
+					hidden: { opacity: +!!L },
 					visible: {
 						opacity: 1,
-						transition: { staggerChildren: .1 }
+						transition: L ? { duration: 0 } : { staggerChildren: .1 }
 					}
 				},
-				children: /* @__PURE__ */ c(u, {
+				children: /* @__PURE__ */ u(f, {
 					sx: {
 						display: "grid",
 						gridTemplateColumns: {
@@ -57,7 +75,7 @@ var h = ({ mediaItems: h, variant: g = "masonry", loading: _ = !1, skeletonCount
 						gridAutoRows: "60px",
 						position: "relative"
 					},
-					children: _ ? E.map(({ id: e, colSpan: t, rowSpan: n }) => /* @__PURE__ */ c(d, {
+					children: C ? R.map(({ id: e, colSpan: t, rowSpan: n }) => /* @__PURE__ */ u(p, {
 						sx: {
 							position: "relative",
 							overflow: "hidden",
@@ -65,29 +83,30 @@ var h = ({ mediaItems: h, variant: g = "masonry", loading: _ = !1, skeletonCount
 							gridRow: `span ${n}`,
 							gridColumn: `span ${t}`
 						},
-						children: /* @__PURE__ */ c(f, {
+						children: /* @__PURE__ */ u(m, {
 							variant: "rectangular",
-							animation: "wave",
+							animation: L ? !1 : "wave",
 							sx: {
 								width: "100%",
 								height: "100%",
 								transform: "none"
 							}
 						})
-					}, e)) : x.map((e, n) => /* @__PURE__ */ c(t, {
+					}, e)) : M.map((e, t) => /* @__PURE__ */ u(n, {
 						item: e,
-						index: n,
-						instanceId: T,
-						isDragging: C,
-						onSelect: b,
-						onDragStart: D,
-						onDragEnd: O
-					}, `${e.id}-${T}`))
+						index: t,
+						itemLabel: S(e, t),
+						instanceId: I,
+						isDragging: P,
+						onSelect: j,
+						onDragStart: z,
+						onDragEnd: B
+					}, `${e.id}-${I}`))
 				})
 			})
 		})]
 	});
-};
-h.displayName = "SGallery";
+});
+x.displayName = "SGallery";
 //#endregion
-export { h as SGallery, h as default };
+export { x as SGallery, x as default };

package/dist/s-glow-button/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SGlowButton } from './s-glow-button';
-export type { SGlowButtonProps } from './s-glow-button';
+export type { SGlowButtonOwnerState, SGlowButtonProps } from './s-glow-button';
+export type {} from '../theme/component-augmentation';

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

@@ -1,2 +1,2 @@
-import e from "./s-glow-button.js";
+import { SGlowButton as e } from "./s-glow-button.js";
 export { e as SGlowButton, e as default };

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

@@ -1,19 +1,27 @@
 import { default as React } from 'react';
 import { ButtonProps } from '@mui/material';
+export interface SGlowButtonOwnerState {
+    borderRadius: React.CSSProperties['borderRadius'];
+    duration: number;
+    glowColor: string;
+    glowSize: number;
+    height: React.CSSProperties['height'];
+    width: React.CSSProperties['width'];
+}
 /**
  * Props interface for SGlowButton component
  */
-export interface SGlowButtonProps extends ButtonProps {
+export interface SGlowButtonProps extends Omit<ButtonProps, 'component'> {
     /** Border radius for the button (defaults to 12px) */
-    borderRadius?: string | number;
+    borderRadius?: React.CSSProperties['borderRadius'];
     /** Button content */
     children: React.ReactNode;
-    /** Duration of the moving border animation in milliseconds (defaults to 6000ms) */
+    /** Duration of the moving border animation in milliseconds (defaults to 3000ms) */
     duration?: number;
     /** Button width (defaults to 'fit-content') */
-    width?: string;
+    width?: React.CSSProperties['width'];
     /** Button height (defaults to '60px') */
-    height?: string;
+    height?: React.CSSProperties['height'];
     /** Size of the glow effect in pixels (defaults to 60) */
     glowSize?: number;
     /** Color of the glow effect (defaults to the theme info color) */
@@ -22,8 +30,5 @@ export interface SGlowButtonProps extends ButtonProps {
 /**
  * A visually striking button with animated glowing border effects and gradient text.
  */
-declare const SGlowButton: {
-    ({ borderRadius, children, duration, width, height, glowSize, glowColor, ...props }: SGlowButtonProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SGlowButton: React.ForwardRefExoticComponent<Omit<SGlowButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SGlowButton;

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

@@ -1,28 +1,49 @@
-import { SMovingBorder as e } from "../s-moving-border/s-moving-border.js";
-import "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Button as n } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { SMovingBorder as t } from "../s-moving-border/s-moving-border.js";
+import { styled as n, useThemeProps as r } from "@mui/material/styles";
+import i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import { Button as o } from "@mui/material";
 //#region lib/s-glow-button/s-glow-button.tsx
-var r = ({ borderRadius: r = 12, children: i, duration: a = 3e3, width: o = "fit-content", height: s = "60px", glowSize: c = 60, glowColor: l = "var(--s-palette-info-main)", ...u }) => /* @__PURE__ */ t(e, {
-	width: o,
-	height: s,
-	duration: a,
-	borderRadius: r,
-	glowSize: c,
-	glowColor: l,
-	padding: .3,
-	children: /* @__PURE__ */ t(n, {
-		sx: {
-			borderRadius: r,
-			width: o,
-			height: s
-		},
-		disableRipple: !0,
-		...u,
-		fullWidth: !0,
-		children: i
-	})
+var s = n(o, {
+	name: "SGlowButton",
+	slot: "Root"
+})({}), c = i.forwardRef(function(n, i) {
+	let o = r({
+		props: n,
+		name: "SGlowButton"
+	}), { borderRadius: c = 12, children: l, disableRipple: u, duration: d = 3e3, fullWidth: f = !1, glowColor: p = "var(--s-palette-info-main)", glowSize: m = 60, height: h = "60px", sx: g, width: _ = "fit-content", ...v } = o, y = f ? "100%" : _, b = {
+		...o,
+		borderRadius: c,
+		duration: d,
+		glowColor: p,
+		glowSize: m,
+		height: h,
+		width: y
+	};
+	return /* @__PURE__ */ a(t, {
+		width: y,
+		height: h,
+		duration: d,
+		borderRadius: c,
+		glowSize: m,
+		glowColor: p,
+		padding: .3,
+		children: /* @__PURE__ */ a(s, {
+			...v,
+			ref: i,
+			disableRipple: u,
+			fullWidth: f,
+			ownerState: b,
+			sx: [{
+				borderRadius: c,
+				height: h,
+				width: y
+			}, ...e(g)],
+			children: l
+		})
+	});
 });
-r.displayName = "SGlowButton";
+c.displayName = "SGlowButton";
 //#endregion
-export { r as default };
+export { c as SGlowButton, c as default };

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

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

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

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { SvgIconProps, SvgIconTypeMap, SxProps } from '@mui/material';
 import { OverridableComponent } from '@mui/material/OverridableComponent';
 /** Type definition for Material-UI icon components with muiName property */
@@ -6,8 +7,8 @@ type IconComponent = OverridableComponent<SvgIconTypeMap<object, 'svg'>> & {
 };
 /** Gradient direction options */
 export type GradientDirection = 'horizontal' | 'vertical' | 'diagonal' | 'radial';
-/** Predefined gradient themes */
-export type GradientTheme = 'blue-cyan' | 'purple-pink' | 'orange-red' | 'green-teal' | 'indigo-purple' | 'custom';
+/** Semantic gradient roles */
+export type GradientRole = 'brand-primary' | 'brand-subtle' | 'custom';
 /** Animation easing options */
 export type AnimationEasing = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
 /** Custom gradient configuration */
@@ -22,7 +23,7 @@ export interface CustomGradient {
     middlePosition?: number;
 }
 /** Props interface for SGradientIcon component */
-export interface SGradientIconProps extends SvgIconProps {
+export interface SGradientIconProps extends Omit<SvgIconProps, 'component'> {
     /** Whether the icon should show the gradient fill (hover state) */
     hovered?: boolean;
     /** The Material-UI icon component to render with gradient effect */
@@ -31,9 +32,9 @@ export interface SGradientIconProps extends SvgIconProps {
     sx?: SxProps;
     /** Stroke width for the icon (default: 0) */
     strokeWidth?: number;
-    /** Predefined gradient theme (default: 'blue-cyan') */
-    gradientTheme?: GradientTheme;
-    /** Custom gradient colors when theme is 'custom' */
+    /** Semantic gradient role (default: 'brand-primary') */
+    gradientRole?: GradientRole;
+    /** Custom gradient colors when role is 'custom' */
     customGradient?: CustomGradient;
     /** Direction of the gradient (default: 'diagonal') */
     gradientDirection?: GradientDirection;
@@ -50,8 +51,15 @@ export interface SGradientIconProps extends SvgIconProps {
     /** Fallback color when gradient is not shown */
     fallbackColor?: string;
 }
-export declare const SGradientIcon: {
-    ({ hovered, IconComponent, sx, strokeWidth, gradientTheme, customGradient, gradientDirection, animationDuration, animationEasing, autoHover, gradientId, alwaysGradient, fallbackColor, ...props }: SGradientIconProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
+export type SGradientIconOwnerState = SGradientIconProps & {
+    alwaysGradient: boolean;
+    animationDuration: number;
+    animationEasing: AnimationEasing;
+    autoHover: boolean;
+    gradientDirection: GradientDirection;
+    gradientRole: GradientRole;
+    hovered: boolean;
+    strokeWidth: number;
 };
+export declare const SGradientIcon: React.ForwardRefExoticComponent<Omit<SGradientIconProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
 export default SGradientIcon;

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

@@ -1,38 +1,38 @@
-import { useId as e } from "react";
-import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { toSxArray as e } from "../utils/sx.js";
+import { forwardRef as t, useId as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { styled as o, useTheme as s, useThemeProps as c } from "@mui/material";
 //#region lib/s-gradient-icon/s-gradient-icon.tsx
-var i = ({ hovered: i = !1, IconComponent: a, sx: o, strokeWidth: s = 0, gradientTheme: c = "blue-cyan", customGradient: l, gradientDirection: u = "diagonal", animationDuration: d = 300, animationEasing: f = "ease", autoHover: p = !1, gradientId: m, alwaysGradient: h = !1, fallbackColor: g, ..._ }) => {
-	let v = e(), y = m ?? `gradient-${v}`, b = {
-		"blue-cyan": {
-			start: "#1469be",
-			end: "#43ecff"
+var l = o(t(({ IconComponent: e, ...t }, n) => /* @__PURE__ */ i(e, {
+	...t,
+	ref: n
+})), {
+	name: "SGradientIcon",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), u = t((t, o) => {
+	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 = {
+		"brand-primary": {
+			start: E.primary[400],
+			end: E.primary[700]
 		},
-		"purple-pink": {
-			start: "#8b5cf6",
-			end: "#ec4899"
+		"brand-subtle": {
+			start: E.primary[200],
+			end: E.primary[500]
 		},
-		"orange-red": {
-			start: "#f97316",
-			end: "#ef4444"
-		},
-		"green-teal": {
-			start: "#10b981",
-			end: "#06b6d4"
-		},
-		"indigo-purple": {
-			start: "#6366f1",
-			end: "#a855f7"
-		},
-		custom: l ? {
-			start: l.startColor,
-			end: l.endColor,
-			middle: l.middleColor,
-			middlePos: l.middlePosition ?? .5
+		custom: g ? {
+			start: g.startColor,
+			end: g.endColor,
+			middle: g.middleColor,
+			middlePos: g.middlePosition ?? .5
 		} : {
-			start: "#1469be",
-			end: "#43ecff"
+			start: E.primary[400],
+			end: E.primary[700]
 		}
-	}[c], x = {
+	}[h], A = {
 		horizontal: {
 			x1: "0",
 			y1: "0",
@@ -57,69 +57,81 @@ var i = ({ hovered: i = !1, IconComponent: a, sx: o, strokeWidth: s = 0, gradien
 			x2: "0.5",
 			y2: "0.5"
 		}
-	}[u], S = h || i ? `url(#${y})` : g ?? "var(--s-palette-text-primary)";
-	return a ? /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ n("svg", {
+	}[_], j = S || d ? `url(#${O})` : C ?? "var(--s-palette-text-primary)", M = {
+		...u,
+		alwaysGradient: S,
+		animationDuration: v,
+		animationEasing: y,
+		autoHover: b,
+		gradientDirection: _,
+		gradientRole: h,
+		hovered: d,
+		strokeWidth: m
+	};
+	return f ? /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i("svg", {
 		width: 0,
 		height: 0,
-		children: u === "radial" ? /* @__PURE__ */ r("radialGradient", {
-			id: y,
+		children: _ === "radial" ? /* @__PURE__ */ a("radialGradient", {
+			id: O,
 			cx: "50%",
 			cy: "50%",
 			r: "50%",
 			children: [
-				/* @__PURE__ */ n("stop", {
+				/* @__PURE__ */ i("stop", {
 					offset: "0%",
-					stopColor: b.start
+					stopColor: k.start
 				}),
-				b.middle && /* @__PURE__ */ n("stop", {
-					offset: `${(b.middlePos ?? .5) * 100}%`,
-					stopColor: b.middle
+				k.middle && /* @__PURE__ */ i("stop", {
+					offset: `${(k.middlePos ?? .5) * 100}%`,
+					stopColor: k.middle
 				}),
-				/* @__PURE__ */ n("stop", {
+				/* @__PURE__ */ i("stop", {
 					offset: "100%",
-					stopColor: b.end
+					stopColor: k.end
 				})
 			]
-		}) : /* @__PURE__ */ r("linearGradient", {
-			id: y,
-			x1: x.x1,
-			y1: x.y1,
-			x2: x.x2,
-			y2: x.y2,
+		}) : /* @__PURE__ */ a("linearGradient", {
+			id: O,
+			x1: A.x1,
+			y1: A.y1,
+			x2: A.x2,
+			y2: A.y2,
 			children: [
-				/* @__PURE__ */ n("stop", {
+				/* @__PURE__ */ i("stop", {
 					offset: "0%",
-					stopColor: b.start
+					stopColor: k.start
 				}),
-				b.middle && /* @__PURE__ */ n("stop", {
-					offset: `${(b.middlePos ?? .5) * 100}%`,
-					stopColor: b.middle
+				k.middle && /* @__PURE__ */ i("stop", {
+					offset: `${(k.middlePos ?? .5) * 100}%`,
+					stopColor: k.middle
 				}),
-				/* @__PURE__ */ n("stop", {
+				/* @__PURE__ */ i("stop", {
 					offset: "100%",
-					stopColor: b.end
+					stopColor: k.end
 				})
 			]
 		})
-	}), /* @__PURE__ */ n(a, {
-		..._,
-		sx: {
-			fill: S,
-			strokeWidth: s,
-			transition: `fill ${d}ms ${f}`,
-			...p && { "&:hover": { fill: `url(#${y})` } },
-			...o
-		},
-		...p && !h && {
+	}), /* @__PURE__ */ i(l, {
+		...w,
+		ref: o,
+		IconComponent: f,
+		ownerState: M,
+		sx: [{
+			fill: j,
+			strokeWidth: m,
+			transition: `fill ${v}ms ${y}`,
+			...b && { "&:hover": { fill: `url(#${O})` } }
+		}, ...e(p)],
+		...b && !S && {
 			onMouseEnter: (e) => {
-				_.onMouseEnter?.(e);
+				w.onMouseEnter?.(e);
 			},
 			onMouseLeave: (e) => {
-				_.onMouseLeave?.(e);
+				w.onMouseLeave?.(e);
 			}
 		}
 	})] }) : null;
-};
-i.displayName = "SGradientIcon";
+});
+u.displayName = "SGradientIcon";
 //#endregion
-export { i as SGradientIcon, i as default };
+export { u as SGradientIcon, u as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SIconButton } from './s-icon-button';
-export type { SIconButtonProps } from './s-icon-button';
+export type { SIconButtonOwnerState, SIconButtonProps, SIconButtonSlotProps, SIconButtonSlots, SIconButtonVariant, } from './s-icon-button';
+export type {} from '../theme/component-augmentation';

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

@@ -1,14 +1,32 @@
-import { default as React } from 'react';
-import { IconButtonProps, TooltipProps } from '@mui/material';
-/**
- * Props interface for SIconButton component
- */
-export interface SIconButtonProps extends IconButtonProps {
-    /** Optional tooltip configuration (excludes 'children' which is handled internally) */
-    tooltipOptions?: Omit<TooltipProps, 'children'>;
-}
-export declare const SIconButton: {
-    ({ tooltipOptions, ...props }: SIconButtonProps): React.JSX.Element;
-    displayName: string;
-};
+import { IconButtonProps } from '@mui/material/IconButton';
+import { TooltipProps } from '@mui/material/Tooltip';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export type SIconButtonVariant = 'overlay';
+export interface SIconButtonOwnerState {
+    disabled: boolean;
+    hasTooltip: boolean;
+    variant?: SIconButtonVariant;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SIconButtonOwnerState>;
+export interface SIconButtonSlots {
+    /** Component used to render the optional tooltip. */
+    tooltip?: React.ElementType;
+}
+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'> {
+    /** Components used for internal slots. */
+    slots?: SIconButtonSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: SIconButtonSlotProps;
+    /** Optional tooltip title. */
+    tooltip?: React.ReactNode;
+    /** Visual treatment for icon buttons displayed over another surface. */
+    variant?: SIconButtonVariant;
+}
+export declare const SIconButton: React.ForwardRefExoticComponent<Omit<SIconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default SIconButton;