@solostylist/ui-kit 2.0.1 → 2.0.3

package/dist/s-carousel/s-carousel.js

@@ -4,11 +4,11 @@ import * as n from "react";
 import { Children as r, forwardRef as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
 import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 import { ArrowBackIosNew as f, ArrowForwardIos as p } from "@mui/icons-material";
-import { Box as m, styled as h, useTheme as g, useThemeProps as ee } from "@mui/material";
-import _ from "embla-carousel-autoplay";
-import v from "embla-carousel-react";
+import { Box as m, styled as h, useTheme as g, useThemeProps as _ } from "@mui/material";
+import v from "embla-carousel-autoplay";
+import y from "embla-carousel-react";
 //#region lib/s-carousel/s-carousel.tsx
-var y = h(m, {
+var b = h(m, {
 	name: "SCarousel",
 	slot: "Root"
 })({
@@ -32,18 +32,18 @@ var y = h(m, {
 		opacity: 1,
 		pointerEvents: "auto"
 	}
-}), b = h("div", { shouldForwardProp: (e) => e !== "centerPadding" })(({ centerPadding: e }) => ({
+}), x = h("div", { shouldForwardProp: (e) => e !== "centerPadding" && e !== "sx" })(({ centerPadding: e }) => ({
 	overflow: "hidden",
 	...e && { padding: `0 ${e}` }
-})), te = h("div")({
+})), ee = h("div")({
 	display: "flex",
 	touchAction: "pan-y pinch-zoom"
-}), ne = h("div", { shouldForwardProp: (e) => e !== "slidesToShow" && e !== "spaceBetween" })(({ slidesToShow: e, spaceBetween: t }) => ({
+}), te = h("div", { shouldForwardProp: (e) => e !== "slidesToShow" && e !== "spaceBetween" })(({ slidesToShow: e, spaceBetween: t }) => ({
 	flex: `0 0 calc(100% / ${e})`,
 	minWidth: 0,
 	paddingInline: `${t / 2}px`,
 	boxSizing: "border-box"
-})), re = h("ul")(({ theme: e }) => ({
+})), ne = h("ul")(({ theme: e }) => ({
 	gap: 6,
 	zIndex: 1,
 	margin: 0,
@@ -64,7 +64,7 @@ var y = h(m, {
 		"&.active span": { opacity: 1 },
 		"&.active": { width: 18 }
 	}
-})), ie = h("span", { shouldForwardProp: (e) => e !== "dotColor" })(({ dotColor: e, theme: t }) => ({
+})), re = h("span", { shouldForwardProp: (e) => e !== "dotColor" })(({ dotColor: e, theme: t }) => ({
 	width: "100%",
 	height: "100%",
 	borderRadius: t.radius.full,
@@ -73,10 +73,10 @@ var y = h(m, {
 	backgroundColor: e ?? (t.vars ?? t).palette.primary.main,
 	opacity: .35
 }));
-function ae(e, t) {
+function ie(e, t) {
 	return typeof e == "string" || typeof e == "number" ? e : e && typeof e == "object" && "key" in e && e.key != null ? e.key : `slide-${t + 1}`;
 }
-function x(e, t) {
+function ae(e, t) {
 	let [n, r] = c(e);
 	return o(() => {
 		function n() {
@@ -95,84 +95,86 @@ function x(e, t) {
 	}, [e, t]), n;
 }
 var S = i(function(i, h) {
-	let S = ee({
+	let S = _({
 		props: i,
 		name: "SCarousel"
-	}), { apiRef: C, children: w, dotColor: T, dots: E = !1, arrows: D = !0, slidesToShow: O = 4, spaceBetween: k = 4, autoplay: A = !1, autoplaySpeed: j = 3e3, infinite: M = !0, speed: N = 500, centerMode: P = !1, centerPadding: F = "60px", responsive: I, slotProps: L, sx: R, ...z } = S, B = g(), V = x(O, I), H = s(() => A ? [_({
+	}), { apiRef: C, children: w, dotColor: T, dots: E = !1, arrows: D = !0, slidesToShow: O = 4, spaceBetween: k = 4, autoplay: A = !1, autoplaySpeed: j = 3e3, infinite: M = !0, speed: N = 500, centerMode: P = !1, centerPadding: F = "60px", responsive: I, slotProps: L, sx: oe, ...R } = S, z = g(), B = ae(O, I), V = s(() => A ? [v({
 		delay: j,
 		stopOnInteraction: !1
-	})] : [], [A, j]), [U, W] = v({
+	})] : [], [A, j]), [H, U] = y({
 		loop: M,
 		duration: Math.round(N / 20),
 		align: P ? "center" : "start",
-		direction: B.direction === "rtl" ? "rtl" : "ltr",
+		direction: z.direction === "rtl" ? "rtl" : "ltr",
 		slidesToScroll: 1
-	}, H), [G, K] = c([]), [q, J] = c(0), [oe, se] = c(!1), [ce, le] = c(!1), Y = a(() => {
-		W && (K(W.scrollSnapList()), J(W.selectedScrollSnap()), se(W.canScrollPrev()), le(W.canScrollNext()));
-	}, [W]);
+	}, V), [W, G] = c([]), [K, q] = c(0), [se, ce] = c(!1), [le, ue] = c(!1), J = a(() => {
+		U && (G(U.scrollSnapList()), q(U.selectedScrollSnap()), ce(U.canScrollPrev()), ue(U.canScrollNext()));
+	}, [U]);
 	o(() => {
-		if (W) return Y(), W.on("select", Y), W.on("reInit", Y), () => {
-			W.off("select", Y), W.off("reInit", Y);
+		if (U) return J(), U.on("select", J), U.on("reInit", J), () => {
+			U.off("select", J), U.off("reInit", J);
 		};
-	}, [W, Y]), n.useImperativeHandle(C, () => W ?? null, [W]);
-	let X = r.toArray(w), Z = L?.previousButton, Q = L?.nextButton, $ = L?.dots, ue = {
+	}, [U, J]), n.useImperativeHandle(C, () => U ?? null, [U]);
+	let Y = r.toArray(w), X = L?.previousButton, Z = L?.nextButton, Q = L?.dots, $ = L?.viewport, de = {
 		...S,
-		activeSlidesToShow: V,
-		selectedIndex: q
+		activeSlidesToShow: B,
+		selectedIndex: K
 	};
-	return /* @__PURE__ */ d(y, {
-		...z,
-		ownerState: ue,
+	return /* @__PURE__ */ d(b, {
+		...R,
+		ownerState: de,
 		ref: h,
-		sx: R,
+		sx: oe,
 		children: [
-			/* @__PURE__ */ u(b, {
-				ref: U,
+			/* @__PURE__ */ u(x, {
+				...$,
 				centerPadding: P ? F : void 0,
-				children: /* @__PURE__ */ u(te, { children: X.map((e, t) => /* @__PURE__ */ u(ne, {
-					slidesToShow: V,
+				ref: H,
+				sx: e($?.sx),
+				children: /* @__PURE__ */ u(ee, { children: Y.map((e, t) => /* @__PURE__ */ u(te, {
+					slidesToShow: B,
 					spaceBetween: k,
 					children: e
-				}, ae(e, t))) })
+				}, ie(e, t))) })
 			}),
 			D && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
 				"aria-label": "Previous slide",
-				...Z,
-				className: ["carousel-arrow prev", Z?.className].filter(Boolean).join(" "),
+				...X,
+				className: ["carousel-arrow prev", X?.className].filter(Boolean).join(" "),
 				onClick: (e) => {
-					Z?.onClick?.(e), e.defaultPrevented || W?.scrollPrev();
+					X?.onClick?.(e), e.defaultPrevented || U?.scrollPrev();
 				},
-				disabled: Z?.disabled || !M && !oe,
-				sx: e(Z?.sx),
+				disabled: X?.disabled || !M && !se,
+				sx: e(X?.sx),
 				children: /* @__PURE__ */ u(f, {})
 			}), /* @__PURE__ */ u(t, {
 				"aria-label": "Next slide",
-				...Q,
-				className: ["carousel-arrow next", Q?.className].filter(Boolean).join(" "),
+				...Z,
+				className: ["carousel-arrow next", Z?.className].filter(Boolean).join(" "),
 				onClick: (e) => {
-					Q?.onClick?.(e), e.defaultPrevented || W?.scrollNext();
+					Z?.onClick?.(e), e.defaultPrevented || U?.scrollNext();
 				},
-				disabled: Q?.disabled || !M && !ce,
-				sx: e(Q?.sx),
+				disabled: Z?.disabled || !M && !le,
+				sx: e(Z?.sx),
 				children: /* @__PURE__ */ u(p, {})
 			})] }),
-			E && G.length > 0 && /* @__PURE__ */ u(re, {
-				...$,
-				sx: [{ mt: 4 }, ...e($?.sx)],
-				children: G.map((e, n) => /* @__PURE__ */ u(m, {
+			E && W.length > 0 && /* @__PURE__ */ u(ne, {
+				...Q,
+				sx: [{ mt: 4 }, ...e(Q?.sx)],
+				children: W.map((e, n) => /* @__PURE__ */ u(m, {
 					component: "li",
-					className: n === q ? "active" : "",
+					className: n === K ? "active" : "",
 					sx: { display: "flex" },
 					children: /* @__PURE__ */ u(t, {
 						"aria-label": `Go to slide ${n + 1}`,
-						onClick: () => W?.scrollTo(n),
+						onClick: () => U?.scrollTo(n),
 						sx: {
 							width: "100%",
 							height: "100%",
 							minWidth: 0,
 							p: 0
 						},
-						children: /* @__PURE__ */ u(ie, { dotColor: T })
+						children: /* @__PURE__ */ u(re, { dotColor: T })
 					})
 				}, e))
 			})

package/dist/s-date-picker/s-date-picker.js

@@ -92,7 +92,7 @@ var d = [
 						p: "0 !important"
 					},
 					"& .MuiPickersOutlinedInput-notchedOutline": { border: "none !important" },
-					"& .MuiPickersInputBase-input::placeholder": {
+					"& .MuiPickersInputBase-sectionsContainer:not(:has(.MuiPickersInputBase-sectionContent[aria-valuenow]))": {
 						opacity: 1,
 						color: (S.vars ?? S).palette.text.secondary
 					}

package/dist/s-datetime-picker/s-datetime-picker.js

@@ -94,7 +94,7 @@ var d = [
 						p: "0 !important"
 					},
 					"& .MuiPickersOutlinedInput-notchedOutline": { border: "none !important" },
-					"& .MuiPickersInputBase-input::placeholder": {
+					"& .MuiPickersInputBase-sectionsContainer:not(:has(.MuiPickersInputBase-sectionContent[aria-valuenow]))": {
 						opacity: 1,
 						color: (S.vars ?? S).palette.text.secondary
 					}

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

@@ -0,0 +1,3 @@
+export { default, default as SDrawer } from './s-drawer';
+export type { SDrawerCloseReason, SDrawerOwnerState, SDrawerProps, SDrawerSlotProps, SDrawerSlots, SDrawerWidth, } from './s-drawer';
+export type {} from '../theme/component-augmentation';

package/dist/s-drawer/index.js

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

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

@@ -0,0 +1,70 @@
+import { BoxProps } from '@mui/material/Box';
+import { DrawerProps, DrawerSlots } from '@mui/material/Drawer';
+import { ModalProps } from '@mui/material/Modal';
+import { PaperProps } from '@mui/material/Paper';
+import { TypographyProps } from '@mui/material/Typography';
+import { ResponsiveStyleValue } from '@mui/system';
+import { SIconButtonProps } from '../s-icon-button/s-icon-button';
+import { SOverlayScrollbarProps } from '../s-overlay-scrollbar/s-overlay-scrollbar';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Responsive width value, mirroring what `sx` accepts. */
+export type SDrawerWidth = ResponsiveStyleValue<number | string>;
+type ModalCloseEvent = Parameters<NonNullable<ModalProps['onClose']>>[0];
+/** Why the drawer asked to close. Extends MUI's Modal reasons with the header close button. */
+export type SDrawerCloseReason = 'backdropClick' | 'closeButtonClick' | 'escapeKeyDown';
+/** Props for a MUI Drawer with a fixed header and an independently scrolling body. */
+export interface SDrawerProps extends Omit<DrawerProps, 'children' | 'onClose' | 'slotProps' | 'slots' | 'title'> {
+    /** Body content; scrolls independently from the header. */
+    children?: React.ReactNode;
+    /** Accessible label for the close button — the injection point for translated copy. */
+    closeLabel?: string;
+    /** Content rendered beside the title, before the close button. */
+    headerActions?: React.ReactNode;
+    /** Called when the drawer requests to be closed, including from the header close button. */
+    onClose?: {
+        bivarianceHack(event: ModalCloseEvent, reason: SDrawerCloseReason): void;
+    }['bivarianceHack'];
+    /** Shows the header close button. Defaults to whether `onClose` is provided. */
+    showCloseButton?: boolean;
+    /** Components used for internal structural slots and for the MUI Drawer slots. */
+    slots?: SDrawerSlots;
+    /** Props or owner-state callbacks for internal structural slots and for the MUI Drawer slots. */
+    slotProps?: SDrawerSlotProps;
+    /** Header title content. */
+    title?: React.ReactNode;
+    /** Paper width; accepts responsive values. Defaults to `{ xs: '100vw', sm: 360 }` for side anchors and `'100%'` for top/bottom. */
+    width?: SDrawerWidth;
+}
+export interface SDrawerOwnerState extends Omit<SDrawerProps, 'slotProps' | 'slots'> {
+    anchor: NonNullable<DrawerProps['anchor']>;
+    closeLabel: string;
+    hasHeader: boolean;
+    hasHeaderActions: boolean;
+    hasTitle: boolean;
+    open: boolean;
+    showCloseButton: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SDrawerOwnerState>;
+type SDrawerRootSlotProps = Omit<DrawerProps, 'anchor' | 'children' | 'onClose' | 'open' | 'slotProps' | 'slots' | 'title' | 'variant'>;
+export interface SDrawerSlots extends Partial<Pick<DrawerSlots, 'backdrop' | 'docked' | 'paper' | 'transition'>> {
+    /** Scrolling body wrapper. Custom component slots must consume or filter `ownerState`. */
+    body?: React.ElementType;
+    closeButton?: React.ElementType;
+    header?: React.ElementType;
+    headerActions?: React.ElementType;
+    /** Drawer wrapper, defaults to the themed MUI Drawer. */
+    root?: React.ElementType;
+    title?: React.ElementType;
+}
+export type SDrawerSlotProps = Omit<NonNullable<DrawerProps['slotProps']>, 'paper' | 'root'> & {
+    body?: OwnerStateSlotProps<Omit<SOverlayScrollbarProps, 'children'>>;
+    closeButton?: OwnerStateSlotProps<Omit<SIconButtonProps, 'children'>>;
+    header?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    headerActions?: OwnerStateSlotProps<Omit<BoxProps, 'children'>>;
+    paper?: OwnerStateSlotProps<Omit<PaperProps, 'children'>>;
+    root?: OwnerStateSlotProps<SDrawerRootSlotProps>;
+    title?: OwnerStateSlotProps<Omit<TypographyProps, 'children'>>;
+};
+export declare const SDrawer: React.ForwardRefExoticComponent<Omit<SDrawerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export default SDrawer;

package/dist/s-drawer/s-drawer.js

@@ -0,0 +1,139 @@
+import { toSxArray as e } from "../utils/sx.js";
+import { resolveOwnerStateSlotProps as t } from "../utils/slots.js";
+import { SOverlayScrollbar as n } from "../s-overlay-scrollbar/s-overlay-scrollbar.js";
+import { SIconButton as r } from "../s-icon-button/s-icon-button.js";
+import { styled as i, useThemeProps as a } from "@mui/material/styles";
+import * as o from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/material/Typography";
+import { mergeSlotProps as u, useEventCallback as d, useForkRef as f } from "@mui/material/utils";
+import p from "@mui/utils/appendOwnerState";
+import m from "@mui/icons-material/Close";
+import h from "@mui/material/Box";
+import g from "@mui/material/Drawer";
+//#region lib/s-drawer/s-drawer.tsx
+var _ = {
+	xs: "100vw",
+	sm: 360
+};
+function v(e) {
+	return e == null || typeof e == "boolean" || typeof e == "string" && e.trim() === "" ? !1 : o.isValidElement(e) && e.type === o.Fragment ? v(e.props.children) : Array.isArray(e) ? e.some(v) : !0;
+}
+var ee = i(g, {
+	name: "SDrawer",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), te = i(h, {
+	name: "SDrawer",
+	slot: "Header",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	boxShadow: `inset 0 -1px 0 ${(e.vars ?? e).palette.divider}`,
+	display: "flex",
+	flexShrink: 0,
+	gap: e.spacing(2),
+	justifyContent: "space-between",
+	minHeight: e.spacing(7),
+	padding: e.spacing(1.5, 2),
+	variants: [{
+		props: ({ ownerState: e }) => !e.hasTitle,
+		style: { justifyContent: "flex-end" }
+	}]
+})), y = i(l, {
+	name: "SDrawer",
+	slot: "Title",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	flex: "1 1 auto",
+	minWidth: 0
+}), b = i(h, {
+	name: "SDrawer",
+	slot: "HeaderActions",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	alignItems: "center",
+	display: "flex",
+	flexShrink: 0,
+	gap: e.spacing(1)
+})), x = i(r, {
+	name: "SDrawer",
+	slot: "CloseButton",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ flexShrink: 0 }), S = i(n, {
+	name: "SDrawer",
+	slot: "Body",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	flex: "1 1 auto",
+	minHeight: 0,
+	padding: e.spacing(2)
+})), C = o.forwardRef(function(n, r) {
+	let i = a({
+		props: n,
+		name: "SDrawer"
+	}), { anchor: l = "right", "aria-describedby": h, "aria-label": g, "aria-labelledby": C, children: w, closeLabel: T = "Close drawer", headerActions: E, onClose: D, open: O = !1, showCloseButton: k, slotProps: A, slots: j, sx: M, title: N, variant: P = "temporary", width: ne, ...re } = i, F = o.useId(), I = l === "top" || l === "bottom", L = ne ?? (I ? "100%" : _), R = v(N), z = v(E), B = k ?? D != null, V = R || z || B, H = {
+		...i,
+		anchor: l,
+		closeLabel: T,
+		hasHeader: V,
+		hasHeaderActions: z,
+		hasTitle: R,
+		open: O,
+		showCloseButton: B,
+		variant: P,
+		width: L
+	}, { body: U = S, closeButton: W = x, header: G = te, headerActions: K = b, root: q = ee, title: J = y, ...Y } = j ?? {}, { body: ie, closeButton: ae, header: oe, headerActions: se, paper: ce, root: le, title: ue, ...de } = A ?? {}, fe = d((e) => {
+		D?.(e, "closeButtonClick");
+	}), pe = p(G, t(oe, H) ?? {}, H), X = p(J, t(ue, H) ?? {}, H), me = p(K, t(se, H) ?? {}, H), he = p(W, u(t(ae, H), {
+		"aria-label": T,
+		onClick: fe
+	}), H), ge = p(U, t(ie, H) ?? {}, H), { ref: _e, sx: Z, ...ve } = p(q, u(t(le, H), re), H), ye = f(_e, r), Q = X.id ?? (R ? F : void 0), $ = t(ce, H), be = g != null || C != null || $?.["aria-label"] != null || $?.["aria-labelledby"] != null, xe = u($, {
+		"aria-describedby": h,
+		"aria-label": g,
+		"aria-labelledby": C ?? (be ? void 0 : Q),
+		sx: [{
+			boxSizing: "border-box",
+			display: "flex",
+			flexDirection: "column",
+			width: L,
+			...I ? { maxHeight: "100%" } : { height: "100%" }
+		}]
+	});
+	return /* @__PURE__ */ c(q, {
+		...ve,
+		ref: ye,
+		anchor: l,
+		onClose: D,
+		open: O,
+		slotProps: {
+			...de,
+			paper: xe
+		},
+		slots: Y,
+		sx: [...e(M), ...e(Z)],
+		variant: P,
+		children: [V ? /* @__PURE__ */ c(G, {
+			...pe,
+			children: [R ? /* @__PURE__ */ s(J, {
+				noWrap: !0,
+				variant: "h6",
+				...X,
+				id: Q,
+				children: N
+			}) : null, z || B ? /* @__PURE__ */ c(K, {
+				...me,
+				children: [E, B ? /* @__PURE__ */ s(W, {
+					...he,
+					children: /* @__PURE__ */ s(m, {})
+				}) : null]
+			}) : null]
+		}) : null, /* @__PURE__ */ s(U, {
+			...ge,
+			children: w
+		})]
+	});
+});
+C.displayName = "SDrawer";
+//#endregion
+export { C as SDrawer, C as default };

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;