@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-text-editor/s-text-editor-toolbar.js

@@ -1,2 +1,216 @@
-import { t as e } from "../s-text-editor-toolbar-ChtNCg2A.js";
-export { e as STextEditorToolbar };
+import { toSxArray as e } from "../utils/sx.js";
+import { STextField as t } from "../s-text-field/s-text-field.js";
+import n from "@mui/material/IconButton";
+import * as r from "react";
+import i from "@mui/material/Select";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { MenuItem as s, styled as c, useThemeProps as l } from "@mui/material";
+import u from "@mui/material/Stack";
+import d from "@mui/icons-material/Code";
+import f from "@mui/icons-material/FormatBold";
+import p from "@mui/icons-material/FormatItalic";
+import m from "@mui/icons-material/FormatListBulleted";
+import h from "@mui/icons-material/FormatListNumbered";
+import g from "@mui/icons-material/Link";
+import _ from "@mui/icons-material/StrikethroughS";
+import v from "@mui/material/FormControl";
+import y from "@mui/material/Popover";
+//#region lib/s-text-editor/s-text-editor-toolbar.tsx
+var b = c(u, {
+	name: "STextEditorToolbar",
+	slot: "Root"
+})({}), x = r.forwardRef(function(n, c) {
+	let x = l({
+		props: n,
+		name: "STextEditorToolbar"
+	}), { className: w, disabled: T = !1, editor: E, spacing: D = 1, sx: O, ...k } = x, A = {
+		...x,
+		disabled: T,
+		editorReady: E != null
+	}, [j, M] = r.useState(!1), [N, P] = r.useState(null), [F, I] = r.useState("");
+	return r.useEffect(() => {
+		T && (M(!1), P(null), I(""));
+	}, [T]), /* @__PURE__ */ o(r.Fragment, { children: [/* @__PURE__ */ a(b, {
+		...k,
+		className: ["tiptap-toolbar", w].filter(Boolean).join(" "),
+		ownerState: A,
+		ref: c,
+		spacing: D,
+		"aria-disabled": T || void 0,
+		sx: [{
+			borderBottom: "1px solid",
+			borderColor: "divider",
+			p: "8px",
+			minHeight: "57px"
+		}, ...e(O)],
+		children: E ? /* @__PURE__ */ o(u, {
+			direction: "row",
+			spacing: .5,
+			sx: {
+				alignItems: "center",
+				flexWrap: "wrap"
+			},
+			children: [
+				/* @__PURE__ */ o(i, {
+					disabled: T,
+					inputProps: { "aria-label": "Text format" },
+					onChange: (e) => {
+						let t = e.target.value;
+						if (t) {
+							if (t === "p") {
+								E.chain().focus().setParagraph().run();
+								return;
+							}
+							if (t.startsWith("h")) {
+								let e = parseInt(t.replace("h", ""));
+								!isNaN(e) && e >= 1 && e <= 6 && E.chain().focus().setHeading({ level: e }).run();
+							}
+						}
+					},
+					value: S(E),
+					children: [/* @__PURE__ */ a(s, {
+						disabled: T || !E.can().chain().focus().setParagraph().run(),
+						value: "p",
+						children: "Paragraph"
+					}), [
+						1,
+						2,
+						3,
+						4,
+						5,
+						6
+					].map((e) => /* @__PURE__ */ o(s, {
+						disabled: T || !E.can().chain().focus().setHeading({ level: e }).run(),
+						value: `h${e}`,
+						children: ["Heading ", e]
+					}, e))]
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("bold"),
+					disabled: T || !E.can().chain().focus().toggleBold().run(),
+					label: "Bold",
+					onClick: () => {
+						E.chain().focus().toggleBold().run();
+					},
+					children: /* @__PURE__ */ a(f, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("italic"),
+					disabled: T || !E.can().chain().focus().toggleItalic().run(),
+					label: "Italic",
+					onClick: () => {
+						E.chain().focus().toggleItalic().run();
+					},
+					children: /* @__PURE__ */ a(p, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("strike"),
+					disabled: T || !E.can().chain().focus().toggleStrike().run(),
+					label: "Strikethrough",
+					onClick: () => {
+						E.chain().focus().toggleStrike().run();
+					},
+					children: /* @__PURE__ */ a(_, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("codeBlock"),
+					disabled: T || !E.can().chain().focus().toggleCodeBlock().run(),
+					label: "Code block",
+					onClick: () => {
+						E.chain().focus().toggleCodeBlock().run();
+					},
+					children: /* @__PURE__ */ a(d, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("bulletList"),
+					disabled: T || !E.can().chain().focus().toggleBulletList().run(),
+					label: "Bulleted list",
+					onClick: () => {
+						E.chain().focus().toggleBulletList().run();
+					},
+					children: /* @__PURE__ */ a(m, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("orderedList"),
+					disabled: T || !E.can().chain().focus().toggleOrderedList().run(),
+					label: "Numbered list",
+					onClick: () => {
+						E.chain().focus().toggleOrderedList().run();
+					},
+					children: /* @__PURE__ */ a(h, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					disabled: T,
+					label: "Set link",
+					onClick: (e) => {
+						I(E.getAttributes("link").href ?? ""), P(e.currentTarget), M(!0);
+					},
+					children: /* @__PURE__ */ a(g, {})
+				}),
+				/* @__PURE__ */ a(C, {
+					active: E.isActive("link"),
+					disabled: T || !E.can().chain().focus().unsetLink().run(),
+					label: "Remove link",
+					onClick: () => {
+						E.chain().focus().unsetLink().run();
+					},
+					children: /* @__PURE__ */ a(g, {})
+				})
+			]
+		}) : null
+	}), /* @__PURE__ */ a(y, {
+		anchorEl: N,
+		anchorOrigin: {
+			horizontal: "left",
+			vertical: "bottom"
+		},
+		onClose: () => {
+			M(!1), P(null), I("");
+		},
+		open: !T && j,
+		slotProps: { paper: { sx: { p: 2 } } },
+		children: /* @__PURE__ */ a(v, { children: /* @__PURE__ */ a(t, {
+			name: "url",
+			label: "URL",
+			onChange: (e) => {
+				I(e.target.value);
+			},
+			onKeyUp: (e) => {
+				if (e.key === "Enter") {
+					if (F === "") {
+						E?.chain().focus().extendMarkRange("link").unsetLink().run();
+						return;
+					}
+					E?.chain().focus().setLink({ href: F }).run(), M(!1), P(null), I("");
+				}
+			},
+			value: F
+		}) })
+	})] });
+});
+x.displayName = "STextEditorToolbar";
+function S(e) {
+	if (e.isActive("paragraph")) return "p";
+	for (let t of [
+		1,
+		2,
+		3,
+		4,
+		5,
+		6
+	]) if (e.isActive("heading", { level: t })) return `h${t}`;
+	return "p";
+}
+var C = r.forwardRef(function({ active: e, children: t, disabled: r, label: i, onClick: o }, s) {
+	return /* @__PURE__ */ a(n, {
+		"aria-label": i,
+		"aria-pressed": e,
+		color: e ? "primary" : "inherit",
+		disabled: r,
+		onClick: o,
+		ref: s,
+		children: t
+	});
+});
+//#endregion
+export { x as STextEditorToolbar };

package/dist/s-text-editor/s-text-editor.d.ts

@@ -1,9 +1,10 @@
+import { BoxProps } from '@mui/material/Box';
 import { EditorOptions } from '@tiptap/react';
 import * as React from 'react';
 /**
  * Props interface for STextEditor component
  */
-export interface STextEditorProps {
+export interface STextEditorProps extends Omit<BoxProps, 'children' | 'component' | 'content' | 'onUpdate'> {
     /** Initial content for the editor (HTML string or Tiptap JSON) */
     content: EditorOptions['content'];
     /** Whether the editor content can be modified */
@@ -15,5 +16,9 @@ export interface STextEditorProps {
     /** Placeholder text shown when editor is empty */
     placeholder?: string;
 }
-export declare const STextEditor: React.ForwardRefExoticComponent<STextEditorProps & React.RefAttributes<HTMLDivElement>>;
+export interface STextEditorOwnerState {
+    editable: boolean;
+    hideToolbar: boolean;
+}
+export declare const STextEditor: React.ForwardRefExoticComponent<Omit<STextEditorProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STextEditor;

package/dist/s-text-editor/s-text-editor.js

@@ -1,46 +1,66 @@
-import { tint as e } from "../theme/utils.js";
-import { t } from "../Box-BlmynALm.js";
-import { t as n } from "../s-text-editor-toolbar-ChtNCg2A.js";
-import * as r from "react";
-import { forwardRef as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-import { Placeholder as s } from "@tiptap/extension-placeholder";
-import { EditorContent as c, useEditor as l } from "@tiptap/react";
-import { StarterKit as u } from "@tiptap/starter-kit";
+import { toSxArray as e } from "../utils/sx.js";
+import { tint as t } from "../theme/utils.js";
+import { STextEditorToolbar as n } from "./s-text-editor-toolbar.js";
+import { styled as r, useThemeProps as i } from "@mui/material/styles";
+import * as a from "react";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import l from "@mui/material/Box";
+import { Placeholder as u } from "@tiptap/extension-placeholder";
+import { EditorContent as d, useEditor as f } from "@tiptap/react";
+import { StarterKit as p } from "@tiptap/starter-kit";
 //#region lib/s-text-editor/s-text-editor.tsx
-var d = i(({ content: i, editable: d = !0, hideToolbar: f, onUpdate: p = () => {}, placeholder: m }, h) => {
-	let g = l({
-		extensions: [u.configure({ link: {
+var m = r(l, {
+	name: "STextEditor",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), h = o((r, o) => {
+	let l = i({
+		props: r,
+		name: "STextEditor"
+	}), { content: h, editable: g = !0, hideToolbar: _ = !1, onUpdate: v = () => {}, placeholder: y, sx: b, ...x } = l, S = {
+		...l,
+		editable: g,
+		hideToolbar: _
+	}, C = a.useRef(y);
+	C.current = y;
+	let w = f({
+		extensions: a.useMemo(() => [p.configure({ link: {
 			openOnClick: !1,
 			autolink: !0
-		} }), s.configure({
+		} }), u.configure({
 			emptyEditorClass: "is-editor-empty",
-			placeholder: m
-		})],
-		content: i,
-		editable: d,
-		onUpdate: p,
+			placeholder: () => C.current ?? ""
+		})], []),
+		content: h,
+		editable: g,
+		onUpdate: v,
 		parseOptions: { preserveWhitespace: "full" }
 	});
-	return r.useEffect(() => {
-		!g || g.isDestroyed || g.getHTML() !== i && g.commands.setContent(i);
-	}, [i, g]), /* @__PURE__ */ o(t, {
-		ref: h,
-		className: "tiptap-root",
-		sx: (t) => ({
+	return a.useEffect(() => {
+		!w || w.isDestroyed || w.setEditable(g);
+	}, [g, w]), a.useEffect(() => {
+		!w || w.isDestroyed || w.view.dispatch(w.state.tr);
+	}, [w, y]), a.useEffect(() => {
+		!w || w.isDestroyed || w.getHTML() !== h && w.commands.setContent(h);
+	}, [h, w]), /* @__PURE__ */ c(m, {
+		...x,
+		ref: o,
+		ownerState: S,
+		sx: [(e) => ({
 			display: "flex",
 			flexDirection: "column",
-			...d && {
-				border: "1px solid",
-				borderColor: "divider",
-				borderRadius: 1,
-				transition: "border 120ms ease-in",
-				"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
+			border: "1px solid",
+			borderColor: "divider",
+			borderRadius: 1,
+			transition: "border 120ms ease-in",
+			...g ? {
+				"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
 				"&:focus-within": {
-					outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
-					borderColor: (t.vars ?? t).palette.primary[400]
+					outline: `3px solid ${t((e.vars ?? e).palette.primary[500], 50)}`,
+					borderColor: (e.vars ?? e).palette.primary[400]
 				}
-			},
+			} : {},
 			"& .tiptap-container": {
 				display: "flex",
 				flex: "1 1 auto",
@@ -52,7 +72,7 @@ var d = i(({ content: i, editable: d = !0, hideToolbar: f, onUpdate: p = () => {
 				color: "text.primary",
 				flex: "1 1 auto",
 				overflow: "auto",
-				fontSize: t.typography.body1.fontSize,
+				fontSize: e.typography.body1.fontSize,
 				p: "8px 16px",
 				"&:focus-visible": { outline: "none" },
 				"&.resize-cursor": {
@@ -67,13 +87,16 @@ var d = i(({ content: i, editable: d = !0, hideToolbar: f, onUpdate: p = () => {
 					pointerEvents: "none"
 				}
 			}
-		}),
-		children: [f ? /* @__PURE__ */ a("div", {}) : /* @__PURE__ */ a(n, { editor: g }), /* @__PURE__ */ a(c, {
+		}), ...e(b)],
+		children: [_ ? null : /* @__PURE__ */ s(n, {
+			disabled: !g,
+			editor: w
+		}), /* @__PURE__ */ s(d, {
 			className: "tiptap-container",
-			editor: g
+			editor: w
 		})]
 	});
 });
-d.displayName = "STextEditor";
+h.displayName = "STextEditor";
 //#endregion
-export { d as STextEditor, d as default };
+export { h as STextEditor, h as default };

package/dist/s-text-field/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STextField } from './s-text-field';
-export type { STextFieldProps } from './s-text-field';
+export type { STextFieldOwnerState, STextFieldProps } from './s-text-field';
+export type {} from '../theme/component-augmentation';

package/dist/s-text-field/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-text-field-DD6nnwwU.js";
+import { STextField as e } from "./s-text-field.js";
 export { e as STextField, e as default };

package/dist/s-text-field/s-text-field.d.ts

@@ -3,19 +3,14 @@ import { TextField } from '@mui/material';
 /**
  * Props interface for STextField component
  */
-export type STextFieldProps = Omit<React.ComponentProps<typeof TextField>, 'error'> & {
-    /** Field label displayed above the input */
-    label?: string | React.ReactNode;
-    /** Whether the field is required (shows asterisk in label) */
-    required?: boolean;
-    /** Error message to display (string instead of boolean for better UX) */
-    error?: string;
-    /** HTML id attribute for the input element */
-    htmlFor?: string;
-    /** Help text shown in tooltip next to the label */
-    hint?: string;
+export type STextFieldProps = React.ComponentProps<typeof TextField> & {
     /** Accessible text for the password visibility toggle button */
     togglePasswordText?: string;
 };
+export interface STextFieldOwnerState {
+    fullWidth: boolean;
+    password: boolean;
+    passwordVisible: boolean;
+}
 export declare const STextField: React.ForwardRefExoticComponent<Omit<STextFieldProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STextField;

package/dist/s-text-field/s-text-field.js

@@ -1,2 +1,52 @@
-import { t as e } from "../s-text-field-DD6nnwwU.js";
-export { e as STextField, e as default };
+import { staticFieldLabelStyles as e } from "../theme/components/field-label-styles.js";
+import { forwardRef as t, useState as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { inputLabelClasses as i } from "@mui/material/InputLabel";
+import { Visibility as a, VisibilityOff as o } from "@mui/icons-material";
+import { IconButton as s, InputAdornment as c, TextField as l, styled as u, useThemeProps as d } from "@mui/material";
+import { mergeSlotProps as f } from "@mui/material/utils";
+import { inputBaseClasses as p } from "@mui/material/InputBase";
+//#region lib/s-text-field/s-text-field.tsx
+var m = u(l, {
+	name: "STextField",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	...e,
+	[`& .${i.root}[data-shrink='false'] + .${p.formControl} .${p.input}`]: { "&::placeholder": { opacity: "1 !important" } }
+}), h = t((e, t) => {
+	let i = d({
+		props: e,
+		name: "STextField"
+	}), { fullWidth: l = !0, type: u = "text", slotProps: p, togglePasswordText: h = "toggle password visibility", ...g } = i, [_, v] = n(!1), y = u === "password", b = {
+		...i,
+		fullWidth: l,
+		password: y,
+		passwordVisible: _
+	}, x = () => {
+		v((e) => !e);
+	}, S = y && _ ? "text" : u, C = y ? /* @__PURE__ */ r(c, {
+		position: "end",
+		children: /* @__PURE__ */ r(s, {
+			"aria-label": h,
+			onClick: x,
+			edge: "end",
+			size: "small",
+			children: r(_ ? o : a, {})
+		})
+	}) : void 0;
+	return /* @__PURE__ */ r(m, {
+		...g,
+		fullWidth: l,
+		ownerState: b,
+		ref: t,
+		type: S,
+		slotProps: {
+			...p,
+			input: y ? f(p?.input, { endAdornment: C }) : p?.input
+		}
+	});
+});
+h.displayName = "STextField";
+//#endregion
+export { h as STextField, h as default };

package/dist/s-text-shimmer/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STextShimmer } from './s-text-shimmer';
-export type { STextShimmerProps } from './s-text-shimmer';
+export type { STextShimmerComponent, STextShimmerOwnerState, STextShimmerProps } from './s-text-shimmer';
+export type {} from '../theme/component-augmentation';

package/dist/s-text-shimmer/s-text-shimmer.d.ts

@@ -1,14 +1,28 @@
 import { TypographyProps } from '@mui/material';
+import * as React from 'react';
 /**
  * Props interface for STextShimmer component
  */
-export interface STextShimmerProps extends Omit<TypographyProps, 'children'> {
+export type STextShimmerProps<RootComponent extends React.ElementType = 'span'> = Omit<TypographyProps<RootComponent>, 'children'> & {
     /** The text content to display with the shimmer effect */
     children: string;
     /** Duration of the shimmer animation in seconds */
     duration?: number;
     /** Multiplier for the shimmer spread width */
     spread?: number;
+    /** Root element or component rendered by MUI Typography. */
+    component?: RootComponent;
+};
+export interface STextShimmerOwnerState {
+    duration: number;
+    dynamicSpread: number;
+    spread: number;
 }
-export declare const STextShimmer: import('react').ForwardRefExoticComponent<Omit<STextShimmerProps, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface STextShimmerComponent {
+    <RootComponent extends React.ElementType = 'span'>(props: STextShimmerProps<RootComponent> & {
+        ref?: React.ComponentPropsWithRef<RootComponent>['ref'];
+    }): React.JSX.Element;
+    displayName?: string;
+}
+export declare const STextShimmer: STextShimmerComponent;
 export default STextShimmer;

package/dist/s-text-shimmer/s-text-shimmer.js

@@ -1,6 +1,5 @@
-import { a as e } from "../styled-engine-DOxAQ3qw.js";
-import { t } from "../styled-BTDmdi4c.js";
-import { forwardRef as n, useMemo as r } from "react";
+import { keyframes as e, styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
 import { jsx as i } from "react/jsx-runtime";
 import { Typography as a } from "@mui/material";
 //#region lib/s-text-shimmer/s-text-shimmer.tsx
@@ -11,26 +10,50 @@ var o = e`
   100% {
     background-position: 0% center;
   }
-`, s = t(a, { shouldForwardProp: (e) => e !== "duration" && e !== "dynamicSpread" })(({ theme: e, duration: t, dynamicSpread: n }) => ({
-	display: "inline-block",
-	position: "relative",
-	backgroundClip: "text",
-	WebkitBackgroundClip: "text",
-	color: "transparent",
-	backgroundSize: "250% 100%, auto",
-	backgroundRepeat: "no-repeat, padding-box",
-	animation: `${o} ${t}s linear infinite`,
-	"--spread": `${n}px`,
-	"--base-color": (e.vars ?? e).palette.text.disabled,
-	"--base-gradient-color": (e.vars ?? e).palette.text.primary,
-	backgroundImage: "linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--base-gradient-color), transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color))"
-})), c = n(({ children: e, duration: t = 2, spread: n = 2, ...a }, o) => /* @__PURE__ */ i(s, {
-	ref: o,
-	duration: t,
-	dynamicSpread: r(() => e.length * n, [e, n]),
-	...a,
-	children: e
-}));
-c.displayName = "STextShimmer";
+`, s = t(a, {
+	name: "STextShimmer",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e, ownerState: t }) => {
+	let n = (e.vars ?? e).palette;
+	return {
+		animation: `${o} ${t.duration}s linear infinite`,
+		backgroundClip: "text",
+		WebkitBackgroundClip: "text",
+		backgroundImage: "linear-gradient(90deg, transparent calc(50% - var(--spread)), var(--base-gradient-color), transparent calc(50% + var(--spread))), linear-gradient(var(--base-color), var(--base-color))",
+		backgroundRepeat: "no-repeat, padding-box",
+		backgroundSize: "250% 100%, auto",
+		color: "transparent",
+		display: "inline-block",
+		position: "relative",
+		"--spread": `${t.dynamicSpread}px`,
+		"--base-color": n.text.secondary,
+		"--base-gradient-color": n.primary.main,
+		"@media (prefers-reduced-motion: reduce)": {
+			animation: "none",
+			backgroundImage: "none",
+			color: n.text.secondary
+		}
+	};
+});
+function c(e, t) {
+	let a = n({
+		props: e,
+		name: "STextShimmer"
+	}), { children: o, duration: c = 2, spread: l = 2, ...u } = a, d = r.useMemo(() => o.length * l, [o, l]), f = {
+		...a,
+		duration: c,
+		dynamicSpread: d,
+		spread: l
+	};
+	return /* @__PURE__ */ i(s, {
+		...u,
+		ownerState: f,
+		ref: t,
+		children: o
+	});
+}
+var l = r.forwardRef(c);
+l.displayName = "STextShimmer";
 //#endregion
-export { c as STextShimmer, c as default };
+export { l as STextShimmer, l as default };

package/dist/s-text-truncation/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as STextTruncation } from './s-text-truncation';
-export type { STextTruncationProps } from './s-text-truncation';
+export type { STextTruncationOwnerState, STextTruncationProps, STextTruncationSlotProps, STextTruncationSlots, STextTruncationToggleProps, STextTruncationVariant, } from './s-text-truncation';
+export type {} from '../theme/component-augmentation';

package/dist/s-text-truncation/s-text-truncation.d.ts

@@ -1,17 +1,41 @@
-import { default as React } from 'react';
-/**
- * Props interface for STextTruncation component
- */
-export interface STextTruncationProps {
-    /** The text content to display and potentially truncate */
-    text?: string;
-    /** Display variant: 'expandable' shows See more/less link, 'tooltip' shows ellipsis with hover */
-    variant?: 'expandable' | 'tooltip';
-    /** Number of lines to display before truncation */
-    lines?: number;
+import { BoxProps, LinkProps, TooltipProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export type STextTruncationVariant = 'expandable' | 'tooltip';
+export type STextTruncationOwnerState = STextTruncationProps & {
+    expanded: boolean;
+    truncated: boolean;
+    variant: STextTruncationVariant;
+};
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, STextTruncationOwnerState>;
+export interface STextTruncationSlots {
+    text?: React.ElementType;
+    toggle?: React.ElementType;
+    tooltip?: React.ElementType;
 }
-export declare const STextTruncation: {
-    ({ text, variant, lines, }: STextTruncationProps): React.JSX.Element;
-    displayName: string;
+export type STextTruncationToggleProps = Omit<LinkProps, 'onClick'> & {
+    onClick?: React.MouseEventHandler<HTMLElement>;
 };
+export interface STextTruncationSlotProps {
+    text?: OwnerStateSlotProps<TypographyProps>;
+    toggle?: OwnerStateSlotProps<STextTruncationToggleProps>;
+    tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children'>>;
+}
+export interface STextTruncationProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Text content to display. */
+    children: string;
+    /** Label used to collapse expanded text. */
+    collapseText?: string | number;
+    /** Label used to expand truncated text. */
+    expandText?: string | number;
+    /** Maximum number of visible lines before truncation. */
+    lines?: number;
+    /** Components used for internal slots. */
+    slots?: STextTruncationSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: STextTruncationSlotProps;
+    /** Interaction used to reveal truncated content. */
+    variant?: STextTruncationVariant;
+}
+export declare const STextTruncation: React.ForwardRefExoticComponent<Omit<STextTruncationProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default STextTruncation;