@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-chips/s-chips.js

@@ -1,2 +1,174 @@
-import { t as e } from "../s-chips-CAC_vVd0.js";
-export { e as SChips, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import * as t from "react";
+import { createElement as n, useCallback as r, useEffect as i, useLayoutEffect as a, useRef as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { Done as ee } from "@mui/icons-material";
+import { Box as u, Chip as d, Tooltip as f, styled as p, useThemeProps as m } from "@mui/material";
+import { mergeSlotProps as te, useControlled as h, useForkRef as g } from "@mui/material/utils";
+import _ from "@mui/utils/appendOwnerState";
+//#region lib/s-chips/s-chips.tsx
+var v = p(u, {
+	name: "SChips",
+	slot: "Root"
+})({});
+function y(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var b = t.forwardRef(function(t, p) {
+	let b = m({
+		props: t,
+		name: "SChips"
+	}), { chips: x, color: S = "primary", defaultValue: C = [], gap: w = 8, onChange: T, onItemClick: E, overflow: D = !0, overflowText: O = "keywords", size: k = "medium", slotProps: A, slots: j, sx: M, value: N, variant: P = "filled", ...ne } = b, F = o(null), I = o(null), [L, R] = s(x.length), [z, re] = h({
+		controlled: N,
+		default: C,
+		name: "SChips",
+		state: "value"
+	}), B = r(() => {
+		let e = F.current, t = I.current;
+		if (!e || !t) return;
+		let n = e.offsetWidth, r = Array.from(t.children), i = r[x.length]?.getBoundingClientRect().width ?? 0, a = 0, o = 0;
+		for (let e = 0; e < x.length; e++) {
+			let t = r[e]?.getBoundingClientRect().width ?? 0, i = o === 0 ? t : t + w;
+			if (a + i > n) break;
+			a += i, o++;
+		}
+		if (o < x.length) for (; o > 0 && a + w + i > n;) {
+			o--;
+			let e = r[o]?.getBoundingClientRect().width ?? 0;
+			a -= o === 0 ? e : e + w;
+		}
+		R(o);
+	}, [x, w]);
+	a(() => {
+		if (!D) {
+			R(x.length);
+			return;
+		}
+		B();
+	}, [
+		B,
+		x.length,
+		S,
+		D,
+		O,
+		z,
+		k,
+		P
+	]), i(() => {
+		if (!D) return;
+		let e = F.current;
+		if (!e) return;
+		let t = new ResizeObserver(B);
+		return t.observe(e), () => t.disconnect();
+	}, [B, D]);
+	let V = {
+		...b,
+		overflow: D,
+		selected: z,
+		visibleCount: L
+	}, H = j?.root ?? v, U = j?.chip ?? d, W = j?.overflowChip ?? d, G = j?.tooltip ?? f, K = y(A?.root, V), q = y(A?.overflowChip, V), J = y(A?.tooltip, V), { sx: Y, ...ie } = K ?? {}, { ref: ae, ...oe } = _(H, ie, V), se = g(F, ae, p), ce = _(j?.overflowChip, q ?? {}, V), { slotProps: X, ...le } = _(j?.tooltip, J ?? {}, V), ue = {
+		...X,
+		tooltip: te(X?.tooltip, { style: { padding: "0.5rem" } })
+	}, { sx: de, ...Z } = ce, fe = D ? x.slice(0, L) : x, Q = D ? x.slice(L) : [], $ = (t, r, i = !1) => {
+		let a = z.includes(t), o = {
+			...V,
+			index: r,
+			label: t,
+			selectedItem: a
+		}, s = y(A?.chip, o), { icon: l, onClick: u, sx: d, ...f } = _(j?.chip, s ?? {}, o), p = T != null || N != null || C.length > 0, m = u != null || E != null || p;
+		return /* @__PURE__ */ n(U, {
+			color: S,
+			size: k,
+			variant: P,
+			...f,
+			key: `${t}-${r}`,
+			"aria-pressed": !i && p ? a : void 0,
+			label: t.trim(),
+			icon: l ?? (a ? /* @__PURE__ */ c(ee, {}) : void 0),
+			onClick: i || !m ? void 0 : (e) => {
+				if (u?.(e), !e.defaultPrevented) {
+					if (T != null || N != null || C.length > 0) {
+						let n = a ? z.filter((e) => e !== t) : [...z, t];
+						re(n), T?.(e, n);
+					}
+					E?.(e, t);
+				}
+			},
+			sx: [{ userSelect: "none" }, ...e(d)]
+		});
+	};
+	return /* @__PURE__ */ l(H, {
+		...ne,
+		...oe,
+		ref: se,
+		sx: [
+			{
+				display: "flex",
+				maxWidth: "100%",
+				flexWrap: D ? "nowrap" : "wrap",
+				gap: `${w}px`,
+				...D ? {
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap"
+				} : {}
+			},
+			...e(M),
+			...e(Y)
+		],
+		children: [
+			fe.map((e, t) => $(e, t)),
+			D && Q.length > 0 && /* @__PURE__ */ c(G, {
+				arrow: !0,
+				placement: "top",
+				title: /* @__PURE__ */ c(u, {
+					sx: {
+						display: "flex",
+						gap: 1,
+						maxWidth: 240,
+						flexWrap: "wrap"
+					},
+					children: Q.map((e, t) => $(e, L + t, !0))
+				}),
+				...le,
+				slotProps: ue,
+				children: /* @__PURE__ */ c(W, {
+					"aria-label": `${Q.length} more ${O}`,
+					color: S,
+					size: k,
+					variant: "outlined",
+					tabIndex: 0,
+					...Z,
+					label: `+${Q.length} ${O}`,
+					sx: [{
+						cursor: "help",
+						userSelect: "none"
+					}, ...e(de)]
+				})
+			}),
+			D && /* @__PURE__ */ l(u, {
+				ref: I,
+				"aria-hidden": !0,
+				sx: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					display: "flex",
+					visibility: "hidden",
+					pointerEvents: "none",
+					whiteSpace: "nowrap"
+				},
+				children: [x.map((e, t) => $(e, t, !0)), /* @__PURE__ */ c(W, {
+					color: S,
+					size: k,
+					variant: "outlined",
+					...Z,
+					label: `+${x.length} ${O}`
+				})]
+			})
+		]
+	});
+});
+b.displayName = "SChips";
+//#endregion
+export { b as SChips, b as default };

package/dist/s-code-block/index.d.ts

@@ -1,2 +1,4 @@
 export { default, default as SCodeBlock } from './s-code-block';
-export type { SCodeBlockProps } from './s-code-block';
+export type { SCodeBlockOwnerState, SCodeBlockProps, SCodeBlockSlotProps, SCodeBlockSlots } from './s-code-block';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-code-block';

package/dist/s-code-block/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-code-block-DEojINTt.js";
+import { SCodeBlock as e } from "./s-code-block.js";
 export { e as SCodeBlock, e as default };

package/dist/s-code-block/s-code-block.d.ts

@@ -1,33 +1,35 @@
-/**
- * Props interface for SCodeBlock component
- */
-export interface SCodeBlockProps {
-    /** The code content to display and copy */
+import { BoxProps } from '@mui/material';
+import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
+import { SIconButtonProps } from '../s-icon-button';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCodeBlockOwnerState {
+    copied: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCodeBlockOwnerState>;
+export interface SCodeBlockSlots {
+    copyButton?: React.ElementType;
+    syntaxHighlighter?: React.ElementType;
+}
+export interface SCodeBlockSlotProps {
+    copyButton?: OwnerStateSlotProps<SIconButtonProps>;
+    syntaxHighlighter?: OwnerStateSlotProps<Omit<SyntaxHighlighterProps, 'children'>>;
+}
+export interface SCodeBlockProps extends Omit<BoxProps, 'children' | 'component' | 'onCopy'> {
+    /** The code content to display and copy. */
     code: string;
-    /**
-     * Programming language for syntax highlighting
-     * @default 'typescript'
-     */
+    /** Programming language for syntax highlighting. */
     language?: string;
-    /**
-     * Whether to show line numbers
-     * @default true
-     */
-    showLineNumbers?: boolean;
-    /**
-     * Whether to show copy button
-     * @default true
-     */
-    showCopyButton?: boolean;
-    /**
-     * Custom style for the code block
-     */
-    customStyle?: React.CSSProperties;
-    /** Callback function triggered after code is successfully copied */
+    /** Called after the code is copied successfully. */
     onCopied?: () => void;
+    /** Whether to show the copy button. */
+    showCopyButton?: boolean;
+    /** Whether to show line numbers. */
+    showLineNumbers?: boolean;
+    /** Components used for internal slots. */
+    slots?: SCodeBlockSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: SCodeBlockSlotProps;
 }
-export declare const SCodeBlock: {
-    ({ code, language, showLineNumbers, showCopyButton, customStyle, onCopied, }: SCodeBlockProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+export declare const SCodeBlock: React.ForwardRefExoticComponent<Omit<SCodeBlockProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SCodeBlock;

package/dist/s-code-block/s-code-block.js

@@ -1,2 +1,103 @@
-import { t as e } from "../s-code-block-DEojINTt.js";
-export { e as SCodeBlock, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { SIconButton as t } from "../s-icon-button/s-icon-button.js";
+import * as n from "react";
+import { useMemo as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { Check as s, ContentCopy as c } from "@mui/icons-material";
+import { Box as l, styled as u, useColorScheme as d, useThemeProps as f } from "@mui/material";
+import p from "@mui/utils/appendOwnerState";
+import { Prism as m } from "react-syntax-highlighter";
+import { oneDark as h, oneLight as g } from "react-syntax-highlighter/dist/esm/styles/prism";
+//#region lib/s-code-block/s-code-block.tsx
+var _ = u(l, {
+	name: "SCodeBlock",
+	slot: "Root"
+})({});
+function v(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var y = n.forwardRef(function(l, u) {
+	let y = f({
+		props: l,
+		name: "SCodeBlock"
+	}), { code: b, language: x = "typescript", onCopied: S, showCopyButton: C = !0, showLineNumbers: w = !0, slotProps: T, slots: E, sx: D, ...O } = y, [k, A] = i(!1), j = n.useRef(null), { mode: M } = d(), N = {
+		...y,
+		copied: k
+	}, P = E?.copyButton ?? t, F = E?.syntaxHighlighter ?? m, I = v(T?.copyButton, N), L = v(T?.syntaxHighlighter, N), R = p(E?.copyButton, I ?? {}, N), z = p(E?.syntaxHighlighter, L ?? {}, N), { onClick: B, sx: V, ...H } = R, { customStyle: U, ...W } = z, G = r(() => {
+		let e = M === "dark" ? h : g;
+		return {
+			...e,
+			"pre[class*=\"language-\"]": {
+				...e["pre[class*=\"language-\"]"],
+				background: "transparent"
+			},
+			"code[class*=\"language-\"]": {
+				...e["code[class*=\"language-\"]"],
+				background: "transparent"
+			},
+			linenumber: {
+				...e.linenumber,
+				fontStyle: "normal"
+			}
+		};
+	}, [M]);
+	n.useEffect(() => () => {
+		j.current != null && window.clearTimeout(j.current);
+	}, []);
+	let K = async () => {
+		if (b) try {
+			await navigator.clipboard.writeText(b), A(!0), j.current != null && window.clearTimeout(j.current), j.current = window.setTimeout(() => {
+				j.current = null, A(!1);
+			}, 2e3), S?.();
+		} catch (e) {
+			console.error("Failed to copy code:", e);
+		}
+	};
+	return b ? /* @__PURE__ */ o(_, {
+		...O,
+		ownerState: N,
+		ref: u,
+		sx: [{
+			position: "relative",
+			width: "100%"
+		}, ...e(D)],
+		children: [C && /* @__PURE__ */ a(P, {
+			"aria-label": k ? "Code copied" : "Copy code",
+			...H,
+			onClick: (e) => {
+				B?.(e), e.defaultPrevented || K();
+			},
+			sx: [{
+				position: "absolute",
+				top: "50%",
+				right: 16,
+				transform: "translateY(-50%)",
+				zIndex: 1,
+				color: k ? "success.main" : "text.primary",
+				backdropFilter: "blur(8px)",
+				"&:active": { backgroundColor: "action.selected" }
+			}, ...e(V)],
+			children: a(k ? s : c, {})
+		}), /* @__PURE__ */ a(F, {
+			...W,
+			language: x,
+			style: G,
+			showLineNumbers: w,
+			customStyle: {
+				margin: 0,
+				padding: 16,
+				borderRadius: "var(--s-shape-borderRadius)",
+				fontSize: "0.875rem",
+				backgroundColor: "var(--s-palette-background-paper)",
+				border: "1px solid var(--s-palette-divider)",
+				...U
+			},
+			wrapLines: !0,
+			wrapLongLines: !0,
+			children: b
+		})]
+	}) : null;
+});
+y.displayName = "SCodeBlock";
+//#endregion
+export { y as SCodeBlock, y as default };

package/dist/s-comment-message/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SCommentMessage } from './s-comment-message';
 export type { SCommentMessageProps } from './s-comment-message';
+export type {} from '../theme/component-augmentation';

package/dist/s-comment-message/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-comment-message-Dum0P6de.js";
+import { SCommentMessage as e } from "./s-comment-message.js";
 export { e as SCommentMessage, e as default };

package/dist/s-comment-message/s-comment-message.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
-import { SxProps } from '@mui/material';
+import { BoxProps } from '@mui/material';
 /**
  * Props interface for SCommentMessage component
  */
-export interface SCommentMessageProps {
-    /** Unique identifier for the comment */
-    id?: string | number;
+export interface SCommentMessageProps extends Omit<BoxProps, 'children' | 'component' | 'ref'> {
+    /** Stable identifier used by comment callbacks. */
+    commentId?: string | number;
     /** Name of the user who posted the comment */
     userName: string;
     /** URL of the user avatar image */
@@ -25,7 +25,7 @@ export interface SCommentMessageProps {
     /** Callback function triggered when the like button is clicked */
     onLike?: (commentId: string | number) => void;
     /** Callback function triggered when the reply button is clicked */
-    onReply?: (commentId: string | number, parentId?: string | number) => void;
+    onReply?: (commentId: string | number) => void;
     /** Callback function triggered when the expand/collapse replies button is clicked */
     onToggleReplies?: (commentId: string | number) => void;
     /** Whether to show replies and the expand/collapse functionality */
@@ -40,8 +40,6 @@ export interface SCommentMessageProps {
     loading?: boolean;
     /** Custom content to display below the comment actions */
     children?: React.ReactNode;
-    /** Material-UI sx prop for custom styling */
-    sx?: SxProps;
 }
-export declare const SCommentMessage: React.FC<SCommentMessageProps>;
+export declare const SCommentMessage: React.ForwardRefExoticComponent<SCommentMessageProps & React.RefAttributes<HTMLDivElement>>;
 export default SCommentMessage;

package/dist/s-comment-message/s-comment-message.js

@@ -1,2 +1,189 @@
-import { t as e } from "../s-comment-message-Dum0P6de.js";
-export { e as SCommentMessage, e as default };
+import { i as e } from "../utils-CMeAWSRO.js";
+import { toSxArray as t } from "../utils/sx.js";
+import { SSkeleton as n } from "../s-skeleton/s-skeleton.js";
+import { SAvatar as r } from "../s-avatar/s-avatar.js";
+import i, { useEffect as a, useId as o, useState as s } from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ExpandLess as ee, ExpandMore as te, Favorite as ne, FavoriteBorder as u, Reply as d } from "@mui/icons-material";
+import { Box as f, Button as p, Collapse as m, IconButton as h, Stack as g, Typography as _, styled as v, useThemeProps as y } from "@mui/material";
+//#region lib/s-comment-message/s-comment-message.tsx
+var b = v(f, {
+	name: "SCommentMessage",
+	slot: "Root"
+})({}), x = i.forwardRef(function(i, v) {
+	let S = y({
+		props: i,
+		name: "SCommentMessage"
+	}), { commentId: C, userName: w, userAvatar: T, commentContent: E, datetime: D, likes: O = 0, isLiked: k = !1, replies: A = [], totalReplies: j, onLike: M, onReply: N, onToggleReplies: P, showReplies: F = !0, avatarSize: I = 48, level: L = 0, maxLevel: R = 3, loading: re = !1, children: z, sx: B, ...V } = S, H = o(), U = o(), W = C ?? H, [G, K] = s(O), [q, J] = s(k), [Y, ie] = s(!1), ae = () => {
+		q ? (K((e) => Math.max(0, e - 1)), J(!1)) : (K((e) => e + 1), J(!0)), M && M(W);
+	}, oe = () => {
+		N && N(W);
+	}, se = () => {
+		ie((e) => !e), P && P(W);
+	}, ce = e(D), X = j ?? A.length, Z = X > 0, Q = Math.min(L, R) * 2, $ = {
+		...S,
+		commentId: W,
+		localIsLiked: q,
+		showRepliesList: Y
+	};
+	return a(() => {
+		K(O);
+	}, [O]), a(() => {
+		J(k);
+	}, [k]), re ? /* @__PURE__ */ c(b, {
+		...V,
+		ownerState: $,
+		ref: v,
+		sx: [{
+			pl: Q,
+			py: 1
+		}, ...t(B)],
+		children: /* @__PURE__ */ l(g, {
+			direction: "row",
+			spacing: 2,
+			sx: { alignItems: "flex-start" },
+			children: [/* @__PURE__ */ c(n, {
+				variant: "circular",
+				width: I,
+				height: I
+			}), /* @__PURE__ */ l(f, {
+				sx: { flex: 1 },
+				children: [
+					/* @__PURE__ */ l(g, {
+						direction: "row",
+						spacing: 2,
+						sx: {
+							alignItems: "center",
+							mb: 1
+						},
+						children: [/* @__PURE__ */ c(n, {
+							width: 120,
+							height: 20
+						}), /* @__PURE__ */ c(n, {
+							width: 80,
+							height: 16
+						})]
+					}),
+					/* @__PURE__ */ c(n, {
+						height: 16,
+						sx: { mb: .5 }
+					}),
+					/* @__PURE__ */ c(n, {
+						width: "85%",
+						height: 16,
+						sx: { mb: .5 }
+					}),
+					/* @__PURE__ */ c(n, {
+						width: "70%",
+						height: 16,
+						sx: { mb: 2 }
+					}),
+					/* @__PURE__ */ l(g, {
+						direction: "row",
+						spacing: 1,
+						sx: { alignItems: "center" },
+						children: [
+							/* @__PURE__ */ c(n, { preset: "icon-button" }),
+							/* @__PURE__ */ c(n, {
+								width: 20,
+								height: 16
+							}),
+							/* @__PURE__ */ c(n, { width: 60 }),
+							/* @__PURE__ */ c(n, { width: 80 })
+						]
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ l(b, {
+		...V,
+		ownerState: $,
+		ref: v,
+		sx: [{
+			pl: Q,
+			py: 1
+		}, ...t(B)],
+		children: [/* @__PURE__ */ l(g, {
+			direction: "row",
+			spacing: 2,
+			sx: { alignItems: "flex-start" },
+			children: [/* @__PURE__ */ c(r, {
+				src: T,
+				name: w,
+				size: I
+			}), /* @__PURE__ */ l(f, {
+				sx: { flex: 1 },
+				children: [
+					/* @__PURE__ */ c(_, {
+						variant: "subtitle1",
+						children: w
+					}),
+					/* @__PURE__ */ c(_, {
+						variant: "body1",
+						children: E
+					}),
+					/* @__PURE__ */ c(_, {
+						variant: "caption",
+						children: ce
+					}),
+					/* @__PURE__ */ l(g, {
+						direction: "row",
+						spacing: 1,
+						sx: { alignItems: "center" },
+						children: [
+							/* @__PURE__ */ c(h, {
+								"aria-label": q ? "Unlike comment" : "Like comment",
+								"aria-pressed": q,
+								onClick: ae,
+								sx: { color: q ? "error.main" : "text.secondary" },
+								children: c(q ? ne : u, {})
+							}),
+							G > 0 && /* @__PURE__ */ c(_, {
+								variant: "caption",
+								children: G
+							}),
+							/* @__PURE__ */ c(p, {
+								startIcon: /* @__PURE__ */ c(d, {}),
+								onClick: oe,
+								variant: "text",
+								children: "Reply"
+							}),
+							Z && F && /* @__PURE__ */ l(p, {
+								"aria-controls": U,
+								"aria-expanded": Y,
+								startIcon: c(Y ? ee : te, {}),
+								onClick: se,
+								variant: "text",
+								children: [
+									X,
+									" ",
+									X === 1 ? "reply" : "replies"
+								]
+							})
+						]
+					}),
+					z && /* @__PURE__ */ c(f, { children: z })
+				]
+			})]
+		}), Z && F && /* @__PURE__ */ c(m, {
+			id: U,
+			in: Y,
+			children: /* @__PURE__ */ c(f, {
+				sx: { mt: 2 },
+				children: A.map((e, t) => /* @__PURE__ */ c(x, {
+					...e,
+					level: L + 1,
+					maxLevel: R,
+					onLike: M ?? e.onLike,
+					onReply: N ?? e.onReply,
+					onToggleReplies: P ?? e.onToggleReplies,
+					showReplies: F,
+					avatarSize: Math.max(32, I - 8)
+				}, e.commentId ?? `reply-${t}`))
+			})
+		})]
+	});
+});
+x.displayName = "SCommentMessage";
+//#endregion
+export { x as SCommentMessage, x as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SCopyableText } from './s-copyable-text';
-export type { SCopyableTextProps } from './s-copyable-text';
+export type { SCopyableTextOwnerState, SCopyableTextProps, SCopyableTextSlotProps, SCopyableTextSlots, } from './s-copyable-text';
+export type {} from '../theme/component-augmentation';

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

@@ -1,19 +1,36 @@
-import { PaperProps, TypographyProps } from '@mui/material';
-/**
- * Props interface for SCopyableText component
- */
-export interface SCopyableTextProps {
-    /** The text content to display and copy */
-    text?: string;
-    /** Props to pass to the Typography component for styling */
-    typographyProps?: TypographyProps;
-    /** Callback function triggered after text is successfully copied */
-    onCopied?: () => void;
-    /** Props to pass to the Paper component container */
-    paperProps?: PaperProps;
+import { BoxProps, IconButtonProps, PaperProps, TypographyProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCopyableTextOwnerState {
+    copied: boolean;
 }
-export declare const SCopyableText: {
-    ({ text, typographyProps, onCopied, paperProps }: SCopyableTextProps): import("react/jsx-runtime").JSX.Element | null;
-    displayName: string;
-};
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCopyableTextOwnerState>;
+export interface SCopyableTextSlots {
+    button?: React.ElementType;
+    content?: React.ElementType;
+    text?: React.ElementType;
+}
+export interface SCopyableTextSlotProps {
+    button?: OwnerStateSlotProps<IconButtonProps>;
+    content?: OwnerStateSlotProps<BoxProps>;
+    text?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for copyable text rendered in a MUI Paper root. */
+export interface SCopyableTextProps extends Omit<PaperProps, 'children' | 'component' | 'onCopy'> {
+    /** Accessible label after a successful copy. */
+    copiedText?: string;
+    /** Accessible label before copying. */
+    copyText?: string;
+    /** Called when the Clipboard API rejects. */
+    onCopyError?: (error: unknown) => void;
+    /** Called after text is copied successfully. */
+    onCopySuccess?: (text: string) => void;
+    /** Components used for internal structural slots. */
+    slots?: SCopyableTextSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SCopyableTextSlotProps;
+    /** Text displayed and copied. */
+    children: string;
+}
+export declare const SCopyableText: React.ForwardRefExoticComponent<Omit<SCopyableTextProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SCopyableText;