@solostylist/ui-kit 2.0.0 → 2.0.2

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

@@ -0,0 +1,152 @@
+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 "../useEventCallback-DGCsaRIu.js";
+import { t as i } from "../appendOwnerState-CFQTq3pb.js";
+import { actionHoverMedia as a, getFocusVisibleStyle as o, reducedMotionMedia as s } from "../theme/components/action-styles.js";
+import { t as c } from "../mergeSlotProps-DC8r4QzS.js";
+import * as l from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Box as f, Card as p, CardActionArea as m, keyframes as h, styled as g, useThemeProps as _ } from "@mui/material";
+//#region lib/s-interactive-card/s-interactive-card.tsx
+var v = "55%", y = "-18deg", b = "-140%", x = h`
+  from {
+    transform: translateX(${b}) skewX(${y});
+  }
+  to {
+    transform: translateX(${"260%"}) skewX(${y});
+  }
+`, S = (e) => ({ [a]: { "&:hover": e } }), C = (e) => ({
+	...S(e),
+	"&:has(.Mui-focusVisible)": e
+}), w = g(p, {
+	name: "SInteractiveCard",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: e.radius.md,
+	overflow: "hidden",
+	position: "relative",
+	transition: e.transitions.create(["border-color", "transform"], {
+		duration: e.transitions.duration.complex,
+		easing: e.transitions.easing.easeOut
+	}),
+	zIndex: 0,
+	[s]: { transition: "none" },
+	variants: [
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled,
+			style: C({ borderColor: (e.vars ?? e).palette.primary.main })
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && !e.disableLift,
+			style: {
+				...S({ transform: `translateY(calc(${e.spacing(1.5)} * -1)) scale(1.02)` }),
+				[s]: S({ transform: "none" })
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.interactive && !e.disabled && e.sheen,
+			style: {
+				"&::after": {
+					backgroundImage: `linear-gradient(90deg, transparent, ${(e.vars ?? e).palette.whiteAlpha.light}, transparent)`,
+					content: "\"\"",
+					height: "100%",
+					insetBlockStart: 0,
+					insetInlineStart: 0,
+					pointerEvents: "none",
+					position: "absolute",
+					transform: `translateX(${b}) skewX(${y})`,
+					width: v,
+					willChange: "transform",
+					zIndex: 2
+				},
+				...S({ "&::after": { animation: `${x} ${e.transitions.duration.complex}ms ${e.transitions.easing.easeOut} forwards` } }),
+				[s]: { "&::after": { content: "none" } }
+			}
+		},
+		{
+			props: ({ ownerState: e }) => e.disabled,
+			style: {
+				borderColor: (e.vars ?? e).palette.divider,
+				boxShadow: "none"
+			}
+		}
+	]
+})), T = g(m, {
+	name: "SInteractiveCard",
+	slot: "ActionArea",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	borderRadius: "inherit",
+	display: "block",
+	height: "100%",
+	textAlign: "inherit",
+	width: "100%",
+	"&.Mui-focusVisible": {
+		...o(e),
+		outlineOffset: -2
+	}
+})), E = g(f, {
+	name: "SInteractiveCard",
+	slot: "Overlay",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	borderRadius: "inherit",
+	inset: 0,
+	overflow: "hidden",
+	pointerEvents: "none",
+	position: "absolute",
+	zIndex: 1
+}), D = l.forwardRef(function(a, o) {
+	let s = _({
+		props: a,
+		name: "SInteractiveCard"
+	}), { "aria-describedby": l, "aria-label": f, "aria-labelledby": p, children: m, disableLift: h = !1, disabled: g = !1, href: v, interactive: y = !0, onClick: b, overlay: x, sheen: S = !1, slotProps: C, slots: D, sx: O, ...k } = s, A = v !== void 0 || b !== void 0, j = {
+		...s,
+		clickable: A,
+		disableLift: h,
+		disabled: g,
+		interactive: y,
+		sheen: S
+	}, M = D?.root ?? w, N = D?.actionArea ?? T, P = D?.overlay ?? E, F = r((e) => {
+		if (g) {
+			e.preventDefault();
+			return;
+		}
+		b?.(e);
+	}), { ref: I, sx: L, ...R } = i(M, c(t(C?.root, j), {
+		...k,
+		"aria-describedby": A ? void 0 : l,
+		"aria-label": A ? void 0 : f,
+		"aria-labelledby": A ? void 0 : p
+	}), j), z = n(I, o), B = c(t(C?.actionArea, j), {
+		"aria-describedby": l,
+		"aria-label": f,
+		"aria-labelledby": p,
+		onClick: F
+	}), V = i(N, {
+		...B,
+		component: v === void 0 ? "button" : "a",
+		disabled: g || B.disabled,
+		href: v,
+		nativeButton: v === void 0,
+		type: v === void 0 ? "button" : void 0
+	}, j), H = i(P, t(C?.overlay, j) ?? {}, j);
+	return /* @__PURE__ */ d(M, {
+		...R,
+		ref: z,
+		sx: [...e(L), ...e(O)],
+		children: [A ? /* @__PURE__ */ u(N, {
+			...V,
+			children: m
+		}) : m, x == null ? null : /* @__PURE__ */ u(P, {
+			...H,
+			"aria-hidden": !0,
+			children: x
+		})]
+	});
+});
+D.displayName = "SInteractiveCard";
+//#endregion
+export { D as SInteractiveCard, D as default };

package/dist/s-label/s-label.js

@@ -1,12 +1,12 @@
 import { t as e } from "../styled-Bog8QCl3.js";
-import { t } from "../Stack-UMc4dV4G.js";
-import { r as n } from "../elementAcceptingRef-DhkNAkFH.js";
-import { t as r } from "../useThemeProps-Cr28OQu3.js";
+import { t } from "../Stack-C0LGzM4c.js";
+import { t as n } from "../useThemeProps-Dw9dmKyT.js";
+import { t as r } from "../IconButton-CE-4GamO.js";
 import { toSxArray as i } from "../utils/sx.js";
-import { t as a } from "../appendOwnerState-CELpvdMz.js";
-import { t as o } from "../Typography-yXjc7kVP.js";
-import { t as s } from "../InfoOutlined-VC7X46pc.js";
-import { t as c } from "../Tooltip-DbCd6rgF.js";
+import { t as a } from "../appendOwnerState-CFQTq3pb.js";
+import { t as o } from "../Typography-_P0svrkO.js";
+import { t as s } from "../InfoOutlined-lpvhO6P8.js";
+import { t as c } from "../Tooltip-B1sn94L0.js";
 import * as l from "react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region lib/s-label/s-label.tsx
@@ -18,7 +18,7 @@ function p(e, t) {
 	return typeof e == "function" ? e(t) : e;
 }
 var m = (e, t) => !t && !(l.isValidElement(e) && e.type === o), h = l.forwardRef(function(e, l) {
-	let h = r({
+	let h = n({
 		props: e,
 		name: "SLabel"
 	}), { children: g, disableLabelTypography: _ = !1, disableValueTypography: v = !1, hint: y, label: b, slotProps: x, slots: S, sx: C, ...w } = h, T = typeof y == "string" ? y.trim().length > 0 : !!y, E = {
@@ -26,7 +26,7 @@ var m = (e, t) => !t && !(l.isValidElement(e) && e.type === o), h = l.forwardRef
 		disableLabelTypography: _,
 		disableValueTypography: v,
 		hasHint: T
-	}, D = S?.labelRow ?? t, O = S?.label ?? o, k = S?.value ?? o, A = S?.tooltip ?? c, j = S?.hintButton ?? n, M = a(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = a(S?.label, p(x?.label, E) ?? {}, E), P = a(S?.value, p(x?.value, E) ?? {}, E), F = a(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = a(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
+	}, D = S?.labelRow ?? t, O = S?.label ?? o, k = S?.value ?? o, A = S?.tooltip ?? c, j = S?.hintButton ?? r, M = a(S?.labelRow, p(x?.labelRow, E) ?? {}, E), N = a(S?.label, p(x?.label, E) ?? {}, E), P = a(S?.value, p(x?.value, E) ?? {}, E), F = a(S?.tooltip, p(x?.tooltip, E) ?? {}, E), I = a(S?.hintButton, p(x?.hintButton, E) ?? {}, E), L = m(b, _), R = m(g, v);
 	return /* @__PURE__ */ d(f, {
 		...w,
 		ref: l,

package/dist/s-language-switcher/index.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-D-1nywT3.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-PaMgHWc2.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher/s-language-switcher.js

@@ -1,2 +1,2 @@
-import { n as e, r as t, t as n } from "../s-language-switcher-D-1nywT3.js";
+import { n as e, r as t, t as n } from "../s-language-switcher-PaMgHWc2.js";
 export { n as SLanguagePopover, e as SLanguageSwitcher, e as default, t as defaultLanguageOptions };

package/dist/s-language-switcher-PaMgHWc2.js

@@ -0,0 +1,246 @@
+import { n as e } from "./chunk-C_CI6nMA.js";
+import { t } from "./prop-types-BzYPyWN7.js";
+import { r as n, t as r } from "./DefaultPropsProvider-ebWx4_5E.js";
+import { t as i } from "./clsx-DGZSe4Nt.js";
+import { t as a } from "./styled-Bog8QCl3.js";
+import { t as o } from "./useThemeProps-Dw9dmKyT.js";
+import { t as s } from "./memoTheme-qFyKAk7y.js";
+import { t as c } from "./mergeSlotProps-DC8r4QzS.js";
+import { n as l } from "./List-RNcZhRdr.js";
+import { t as u } from "./Menu-CnyB4SDS.js";
+import { t as d } from "./Typography-_P0svrkO.js";
+import { SIconButton as f } from "./s-icon-button/s-icon-button.js";
+import { placementOrigins as p } from "./s-popover/placement.js";
+import { r as m, t as h } from "./MenuItem-Ck30dBOR.js";
+import * as g from "react";
+import _, { createElement as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+import { useTranslation as x } from "react-i18next";
+//#region ../../node_modules/@mui/material/ListItemIcon/ListItemIcon.mjs
+var S = /* @__PURE__ */ e(t(), 1), C = (e) => {
+	let { alignItems: t, classes: r } = e;
+	return n({ root: ["root", t === "flex-start" && "alignItemsFlexStart"] }, m, r);
+}, w = a("div", {
+	name: "MuiListItemIcon",
+	slot: "Root",
+	overridesResolver: (e, t) => {
+		let { ownerState: n } = e;
+		return [t.root, n.alignItems === "flex-start" && t.alignItemsFlexStart];
+	}
+})(s(({ theme: e }) => ({
+	minWidth: e.spacing(4.5),
+	color: (e.vars || e).palette.action.active,
+	flexShrink: 0,
+	display: "inline-flex",
+	variants: [{
+		props: { alignItems: "flex-start" },
+		style: { marginTop: 8 }
+	}]
+}))), T = /* @__PURE__ */ g.forwardRef(function(e, t) {
+	let n = r({
+		props: e,
+		name: "MuiListItemIcon"
+	}), { className: a, ...o } = n, s = g.useContext(l), c = {
+		...n,
+		alignItems: s.alignItems
+	};
+	return /* @__PURE__ */ y(w, {
+		className: i(C(c).root, a),
+		ownerState: c,
+		ref: t,
+		...o
+	});
+});
+process.env.NODE_ENV !== "production" && (T.propTypes = {
+	children: S.default.node,
+	classes: S.default.object,
+	className: S.default.string,
+	sx: S.default.oneOfType([
+		S.default.arrayOf(S.default.oneOfType([
+			S.default.func,
+			S.default.object,
+			S.default.bool
+		])),
+		S.default.func,
+		S.default.object
+	])
+});
+//#endregion
+//#region ../../node_modules/react-country-flag/dist/react-country-flag.esm.js
+function E() {
+	return E = Object.assign ? Object.assign.bind() : function(e) {
+		for (var t = 1; t < arguments.length; t++) {
+			var n = arguments[t];
+			for (var r in n) Object.prototype.hasOwnProperty.call(n, r) && (e[r] = n[r]);
+		}
+		return e;
+	}, E.apply(this, arguments);
+}
+function D(e, t) {
+	if (e == null) return {};
+	var n = {}, r = Object.keys(e), i, a;
+	for (a = 0; a < r.length; a++) i = r[a], !(t.indexOf(i) >= 0) && (n[i] = e[i]);
+	return n;
+}
+var O = [
+	"cdnSuffix",
+	"cdnUrl",
+	"countryCode",
+	"style",
+	"svg"
+], k = "https://cdn.jsdelivr.net/gh/lipis/flag-icons/flags/4x3/", A = "svg", j = 127397, M = function(e) {
+	var t = e.cdnSuffix, n = t === void 0 ? A : t, r = e.cdnUrl, i = r === void 0 ? k : r, a = e.countryCode, o = e.style, s = e.svg, c = s === void 0 ? !1 : s, l = D(e, O);
+	if (typeof a != "string") return null;
+	if (c) {
+		var u = "" + i + a.toLowerCase() + "." + n;
+		return v("img", Object.assign({}, l, {
+			src: u,
+			style: E({
+				display: "inline-block",
+				width: "1em",
+				height: "1em",
+				verticalAlign: "middle"
+			}, o)
+		}));
+	}
+	var d = a.toUpperCase().replace(/./g, function(e) {
+		return String.fromCodePoint(e.charCodeAt(0) + j);
+	});
+	return v("span", Object.assign({ role: "img" }, l, { style: E({
+		display: "inline-block",
+		fontSize: "1em",
+		lineHeight: "1em",
+		verticalAlign: "middle"
+	}, o) }), d);
+}, N = 16, P = 20, F = [{
+	code: "en",
+	label: "English",
+	countryCode: "GB"
+}, {
+	code: "vi",
+	label: "Vietnamese",
+	countryCode: "VN"
+}], I = a(u, {
+	name: "SLanguagePopover",
+	slot: "Root"
+})({}), L = _.forwardRef(function(e, t) {
+	let n = o({
+		props: e,
+		name: "SLanguagePopover"
+	}), { anchorOrigin: r = p["bottom-end"].anchorOrigin, currentLanguage: i, languages: a = F, menuId: s, menuLabelledBy: l, menuWidth: u = "220px", onLanguageChange: f, slotProps: m, transformOrigin: g = p["bottom-end"].transformOrigin, variant: _ = "selectedMenu", ...v } = n, x = {
+		...n,
+		anchorOrigin: r,
+		currentLanguage: i,
+		languages: a,
+		menuId: s,
+		menuLabelledBy: l,
+		menuWidth: u,
+		onLanguageChange: f,
+		open: v.open,
+		slotProps: m,
+		transformOrigin: g,
+		variant: _
+	};
+	return /* @__PURE__ */ y(I, {
+		...v,
+		ref: t,
+		anchorOrigin: r,
+		ownerState: x,
+		slotProps: {
+			...m,
+			paper: c(m?.paper, { sx: { minWidth: u } }),
+			list: c(m?.list, {
+				id: s,
+				"aria-labelledby": l
+			})
+		},
+		transformOrigin: g,
+		variant: _,
+		children: a.map((e) => /* @__PURE__ */ b(h, {
+			onClick: (t) => {
+				f?.(t, e.code);
+			},
+			selected: i === e.code,
+			children: [/* @__PURE__ */ y(T, { children: /* @__PURE__ */ y(M, {
+				alt: "",
+				"aria-hidden": "true",
+				countryCode: e.countryCode,
+				svg: !0,
+				style: {
+					width: P,
+					height: P
+				}
+			}) }), /* @__PURE__ */ y(d, {
+				variant: "subtitle2",
+				children: e.label
+			})]
+		}, e.code))
+	});
+});
+L.displayName = "SLanguagePopover";
+var R = a(f, {
+	name: "SLanguageSwitcher",
+	slot: "Root"
+})({}), z = _.forwardRef(function(e, t) {
+	let n = o({
+		props: e,
+		name: "SLanguageSwitcher"
+	}), { "aria-label": r, languages: i = F, onLanguageChange: a, currentLanguage: s, tooltip: c, buttonFlagSize: l = N, menuWidth: u = "220px", onClick: d, useI18n: f = !0, ...p } = n, m = x(), h = f ? m.t : null, g = f ? m.i18n : null, [v, S] = _.useState(null), C = _.useId(), w = _.useId(), T = p.id ?? C, E = !!v, D = s ?? g?.language ?? i[0]?.code ?? "en", O = i.find((e) => e.code === D) || i[0], k = _.useCallback((e) => {
+		d?.(e), e.defaultPrevented || S(e.currentTarget);
+	}, [d]), A = _.useCallback(() => {
+		S(null);
+	}, []), j = _.useCallback((e, t) => {
+		a ? a(e, t) : g && g.changeLanguage(t), e.defaultPrevented || A();
+	}, [
+		A,
+		g,
+		a
+	]), P = c ?? (h ? h("header:language.tooltip") : "Change language"), I = {
+		...n,
+		"aria-label": r ?? (typeof P == "string" ? P : "Change language"),
+		buttonFlagSize: l,
+		currentLanguage: D,
+		languages: i,
+		menuWidth: u,
+		onClick: d,
+		onLanguageChange: a,
+		open: E,
+		tooltip: P,
+		useI18n: f
+	};
+	return /* @__PURE__ */ b(_.Fragment, { children: [/* @__PURE__ */ y(R, {
+		...p,
+		ref: t,
+		id: T,
+		"aria-controls": E ? w : void 0,
+		"aria-expanded": E || void 0,
+		"aria-haspopup": "menu",
+		"aria-label": r ?? (typeof P == "string" ? P : "Change language"),
+		onClick: k,
+		ownerState: I,
+		tooltip: P,
+		children: /* @__PURE__ */ y(M, {
+			alt: "",
+			"aria-hidden": "true",
+			countryCode: O?.countryCode || "US",
+			svg: !0,
+			style: {
+				width: l,
+				height: l
+			}
+		})
+	}), /* @__PURE__ */ y(L, {
+		anchorEl: v,
+		menuId: w,
+		menuLabelledBy: T,
+		onClose: A,
+		open: E,
+		onLanguageChange: j,
+		languages: i,
+		currentLanguage: D,
+		menuWidth: u
+	})] });
+});
+z.displayName = "SLanguageSwitcher";
+//#endregion
+export { z as n, F as r, L as t };

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

@@ -1,6 +1,6 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { t } from "../useForkRef-CKneCEtr.js";
-import { t as n } from "../mergeSlotProps-xl1-PgWL.js";
+import { t } from "../useForkRef-BuNFTXxE.js";
+import { t as n } from "../mergeSlotProps-DC8r4QzS.js";
 import * as r from "react";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import { Box as o, Skeleton as s, styled as c, useTheme as l, useThemeProps as u } from "@mui/material";

package/dist/s-link/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-link-CAMTGfd9.js";
+import { t as e } from "../s-link-Db1aabHh.js";
 export { e as SLink, e as default };

package/dist/s-link/s-link.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-link-CAMTGfd9.js";
+import { t as e } from "../s-link-Db1aabHh.js";
 export { e as SLink, e as default };

package/dist/{s-link-CAMTGfd9.js → s-link-Db1aabHh.js}

@@ -9,10 +9,11 @@ import { t as c } from "./generateUtilityClasses-DvX505Gy.js";
 import { t as l } from "./styled-Bog8QCl3.js";
 import { t as u } from "./memoTheme-qFyKAk7y.js";
 import { t as d } from "./useTheme-BIWMbX3i.js";
-import { n as f, t as p } from "./isFocusVisible-Y7157FQS.js";
-import { t as m } from "./capitalize-CccCFNpQ.js";
-import { t as h } from "./createSimplePaletteValueFilter-C1gWywW_.js";
-import { t as g } from "./Typography-yXjc7kVP.js";
+import { t as f } from "./elementTypeAcceptingRef-xl_04Y5-.js";
+import { t as p } from "./isFocusVisible-4OIE8TST.js";
+import { t as m } from "./capitalize-C0baBJCm.js";
+import { t as h } from "./createSimplePaletteValueFilter-DFvyXHoZ.js";
+import { t as g } from "./Typography-_P0svrkO.js";
 import * as _ from "react";
 import { jsx as v } from "react/jsx-runtime";
 //#region ../../node_modules/@mui/material/Link/linkClasses.mjs

package/dist/s-list-action-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default, default as SListActionItem } from './s-list-action-item';
+export type { SListActionItemOwnerState, SListActionItemProps, SListActionItemRootSlotProps, SListActionItemSlotProps, SListActionItemSlots, SListActionItemVariant, } from './s-list-action-item';

package/dist/s-list-action-item/index.js

@@ -0,0 +1,2 @@
+import { SListActionItem as e } from "./s-list-action-item.js";
+export { e as SListActionItem, e as default };

package/dist/s-list-action-item/s-list-action-item.d.ts

@@ -0,0 +1,89 @@
+import { BoxProps, ListItemButtonProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** Row shape: `plain` spans the full width, `inset` is inset and rounded for popover menus. */
+export type SListActionItemVariant = 'inset' | 'plain';
+export interface SListActionItemSlots {
+    /** Secondary text element. */
+    description?: React.ElementType;
+    /** Leading icon container. */
+    icon?: React.ElementType;
+    /** Primary label element. */
+    label?: React.ElementType;
+    /** Interactive row element. */
+    root?: React.ElementType;
+    /** Column wrapping label and description. */
+    text?: React.ElementType;
+    /** Trailing content container. */
+    trailing?: React.ElementType;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SListActionItemOwnerState>;
+/**
+ * Root slot props, widened with the anchor attributes the row forwards when
+ * `href` is set — `ListItemButtonProps` on its own describes a `div`.
+ */
+export type SListActionItemRootSlotProps = Omit<ListItemButtonProps, 'children' | 'component'> & Pick<React.AnchorHTMLAttributes<HTMLAnchorElement>, 'href' | 'rel' | 'target'>;
+export interface SListActionItemSlotProps {
+    /** Props or owner-state callback for the description slot. */
+    description?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the icon slot. */
+    icon?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the label slot. */
+    label?: OwnerStateSlotProps<TypographyProps>;
+    /** Props or owner-state callback for the root slot. */
+    root?: OwnerStateSlotProps<SListActionItemRootSlotProps>;
+    /** Props or owner-state callback for the text column slot. */
+    text?: OwnerStateSlotProps<BoxProps>;
+    /** Props or owner-state callback for the trailing slot. */
+    trailing?: OwnerStateSlotProps<BoxProps>;
+}
+/** Props for a list action row with button or link semantics. */
+export interface SListActionItemProps extends Omit<ListItemButtonProps, 'children' | 'component' | 'dense' | 'disabled' | 'onClick' | 'selected' | 'title'> {
+    /** Root element override. Defaults to `a` when `href` is set, otherwise `button`. */
+    component?: React.ElementType;
+    /** Uses compact vertical padding. */
+    dense?: boolean;
+    /** Secondary text rendered under the label. */
+    description?: React.ReactNode;
+    /** Disables activation and exposes the disabled state to assistive technology. */
+    disabled?: boolean;
+    /** Link destination. When set, the row renders with anchor semantics. */
+    href?: string;
+    /** Leading content, usually an icon. */
+    icon?: React.ReactNode;
+    /** Primary label. */
+    label: React.ReactNode;
+    /** Called when the row is activated. Receives the original mouse event. */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** Anchor relationship, forwarded when the row renders as a link. */
+    rel?: string;
+    /** Marks the row as the current selection, and sets `aria-current="page"`. */
+    selected?: boolean;
+    /** Components used for internal structural slots. */
+    slots?: SListActionItemSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SListActionItemSlotProps;
+    /** Anchor target, forwarded when the row renders as a link. */
+    target?: React.HTMLAttributeAnchorTarget;
+    /** Trailing content, e.g. a check mark or shortcut hint. */
+    trailing?: React.ReactNode;
+    /** Row shape. `inset` adds side margins and a rounded corner for popover menus. */
+    variant?: SListActionItemVariant;
+}
+export interface SListActionItemOwnerState extends SListActionItemProps {
+    dense: boolean;
+    disabled: boolean;
+    hasDescription: boolean;
+    selected: boolean;
+    variant: SListActionItemVariant;
+}
+/**
+ * A single interactive row for menus, settings lists and popovers.
+ *
+ * Semantics follow the props rather than a flag: the row is a native `button`
+ * until `href` is set, at which point it becomes an anchor. Leading `icon`,
+ * `description` and `trailing` content are optional, and every structural
+ * element is swappable through `slots` / `slotProps`.
+ */
+export declare const SListActionItem: React.ForwardRefExoticComponent<Omit<SListActionItemProps, "ref"> & React.RefAttributes<HTMLElement>>;
+export default SListActionItem;