@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-select/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-select-HMWY7frm.js";
+import { SSelect as e } from "./s-select.js";
 export { e as SSelect, e as default };

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

@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
 import { SelectProps } from '@mui/material';
+import * as React from 'react';
 /** Base type constraint for select options - can be primitives or objects */
 type BaseOption = string | number | Record<string, unknown>;
 /**
  * Props interface for SSelect component
  */
-export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'error' | 'variant'> & {
+export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'children' | 'error' | 'label' | 'required'> & {
     /** Array of options to display in the select dropdown */
     options?: T[];
     /** Stable key to use for each rendered option */
@@ -16,18 +16,16 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
     optionValue?: T extends object ? keyof T : never;
     /** Placeholder text shown when no option is selected */
     placeholder?: string;
-    /** Visual variant of the select input */
-    variant?: 'outlined' | 'filled' | 'standard';
-    /** Field label displayed above the select */
+    /** Field label associated with the select */
     label?: string | React.ReactNode;
-    /** Error message to display below the field */
-    error?: string;
+    /** Whether the field has an error */
+    error?: boolean;
+    /** Supporting or validation content shown below the field */
+    helperText?: React.ReactNode;
     /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
     /** Whether to use simple value rendering (for primitive values) */
     simple?: boolean;
-    /** HTML id attribute for the select element */
-    htmlFor?: string;
     /** Enable search/filter functionality in the dropdown */
     searchable?: boolean;
     /** Placeholder text for the search input */
@@ -35,7 +33,23 @@ export type SSelectProps<T extends BaseOption = string> = Omit<SelectProps, 'err
     /** Message shown when a search yields no matching options */
     noResultsText?: string;
     /** Custom render function for options */
-    renderOption?: (option: T) => ReactNode;
+    renderOption?: (option: T) => React.ReactNode;
 };
-export declare const SSelect: import('react').ForwardRefExoticComponent<Omit<Readonly<SSelectProps<BaseOption>>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export type SSelectOwnerState = SSelectProps & {
+    color: NonNullable<SelectProps['color']>;
+    disabled: boolean;
+    displayEmpty: boolean;
+    error: boolean;
+    fullWidth: boolean;
+    margin: NonNullable<SelectProps['margin']>;
+    required: boolean;
+    searchable: boolean;
+    size: NonNullable<SelectProps['size']>;
+    variant: NonNullable<SelectProps['variant']>;
+};
+export interface SSelectComponent {
+    <T extends BaseOption = string>(props: SSelectProps<T> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName?: string;
+}
+export declare const SSelect: SSelectComponent;
 export default SSelect;

package/dist/s-select/s-select.js

@@ -1,2 +1,201 @@
-import { t as e } from "../s-select-HMWY7frm.js";
-export { e as SSelect, e as default };
+import { staticFieldLabelStyles as e } from "../theme/components/field-label-styles.js";
+import * as t from "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { Box as i, FormControl as a, FormHelperText as o, InputAdornment as s, InputLabel as c, ListSubheader as l, MenuItem as u, Select as ee, TextField as d, styled as f, useThemeProps as te } from "@mui/material";
+import { mergeSlotProps as p } from "@mui/material/utils";
+import ne from "@mui/icons-material/Search";
+//#region lib/s-select/s-select.tsx
+function m(e) {
+	return typeof e == "string" || typeof e == "number";
+}
+function h(e, t) {
+	return m(e) ? String(e) : String(e[t]);
+}
+function re(e, t) {
+	return m(e) ? e : e[t];
+}
+function g(e) {
+	return /* @__PURE__ */ n(i, {
+		component: "span",
+		sx: { color: "text.secondary" },
+		children: e
+	});
+}
+function _(e, t, n) {
+	return e.find((e) => n(e) === t);
+}
+function ie(e, t, n, r, i, a) {
+	if (e == null || e === "") return g(r);
+	if (t) return String(e);
+	let o = _(n, e, a);
+	return o ? i(o) : "";
+}
+function ae(e, t, n, r, i, a) {
+	return e.length === 0 ? g(r) : t ? e.map(String).join(", ") : e.map((e) => {
+		let t = _(n, e, a);
+		return t ? i(t) : "";
+	}).filter(Boolean).join(", ");
+}
+function oe(e, t, n, r) {
+	if (!t || !n) return e;
+	let i = n.toLowerCase();
+	return e.filter((e) => r(e).toLowerCase().includes(i));
+}
+function v(e, t) {
+	return e.reduce((e, n) => {
+		let r = String(t(n));
+		return e.set(r, (e.get(r) ?? 0) + 1), e;
+	}, /* @__PURE__ */ new Map());
+}
+function y(e, t, n, r, i) {
+	let a = i?.(e, t);
+	if (a !== void 0) return a;
+	let o = String(r(e));
+	return (n.get(o) ?? 0) > 1 ? `${o}-${t}` : o;
+}
+function b(e, t, r, i, a) {
+	let o = v(e, t);
+	return e.map((e, s) => {
+		let c = t(e), l = y(e, s, o, t, a);
+		return /* @__PURE__ */ n(u, {
+			disabled: e?.disabled ?? !1,
+			value: c,
+			children: i ? i(e) : r(e)
+		}, l);
+	});
+}
+function x(e) {
+	if (e) return {
+		autoFocus: !1,
+		slotProps: { paper: { onKeyDown: (e) => {
+			e.key !== "Escape" && e.stopPropagation();
+		} } }
+	};
+}
+function se(e, t) {
+	let n = x(e);
+	if (!n) return t;
+	if (!t) return n;
+	let { slotProps: r, slots: i, ...a } = n, { slotProps: o, slots: s, ...c } = t;
+	return {
+		...a,
+		...c,
+		slots: {
+			...i,
+			...s
+		},
+		slotProps: {
+			...r,
+			...o,
+			paper: p(o?.paper, r?.paper ?? {})
+		}
+	};
+}
+var S = f(a, {
+	name: "SSelect",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ ...e });
+function C(e, a) {
+	let f = te({
+		props: e,
+		name: "SSelect"
+	}), { options: p = [], getOptionKey: m, optionLabel: g = "name", optionValue: _ = "id", placeholder: v, label: y = "", error: x = !1, helperText: C, required: w = !1, simple: T = !1, searchable: E = !1, searchPlaceholder: ce = "", noResultsText: le = "No results found", renderOption: D, className: O, color: k = "primary", defaultValue: A, disabled: j = !1, displayEmpty: M = !0, fullWidth: N = !0, id: ue, inputProps: P, labelId: F, margin: I = "none", MenuProps: L, onChange: R, onClose: z, onOpen: B, open: V, renderValue: H, size: U = "medium", sx: de, variant: W = "outlined", ...G } = f, [K, q] = t.useState(""), fe = t.useId(), J = ue ?? fe, Y = F ?? `${J}-label`, X = C ? `${J}-helper-text` : void 0, pe = [P?.["aria-describedby"], X].filter(Boolean).join(" ") || void 0, me = G.value === void 0 ? A ?? (G.multiple ? [] : "") : void 0, he = {
+		...f,
+		color: k,
+		disabled: j,
+		displayEmpty: M,
+		error: x,
+		fullWidth: N,
+		margin: I,
+		required: w,
+		searchable: E,
+		size: U,
+		variant: W
+	}, Z = (e) => h(e, g), Q = (e) => re(e, _), $ = oe(p, E, K, Z), ge = (e) => {
+		z?.(e), E && q("");
+	}, _e = (e) => G.multiple ? ae(Array.isArray(e) ? e : [], T, p, v, Z, Q) : ie(e, T, p, v, Z, Q), ve = () => E ? $.length > 0 ? b($, Q, Z, D, m) : K ? /* @__PURE__ */ n(u, {
+		disabled: !0,
+		children: /* @__PURE__ */ n(i, {
+			sx: {
+				color: "text.secondary",
+				textAlign: "center",
+				width: "100%"
+			},
+			children: le
+		})
+	}) : b(p, Q, Z, D, m) : b(p, Q, Z, D, m), ye = se(E, L);
+	return /* @__PURE__ */ r(S, {
+		className: O,
+		color: k,
+		disabled: j,
+		error: x,
+		fullWidth: N,
+		margin: I,
+		ownerState: he,
+		ref: a,
+		required: w,
+		size: U,
+		sx: de,
+		variant: W,
+		children: [
+			y ? /* @__PURE__ */ n(c, {
+				id: Y,
+				shrink: !!v || M && !!H || void 0,
+				children: y
+			}) : null,
+			/* @__PURE__ */ r(ee, {
+				...G,
+				defaultValue: me,
+				id: J,
+				label: y,
+				labelId: y ? Y : F,
+				displayEmpty: M,
+				inputProps: {
+					...P,
+					"aria-describedby": pe
+				},
+				open: V,
+				onOpen: B,
+				onClose: ge,
+				MenuProps: ye,
+				onChange: R,
+				renderValue: H ?? _e,
+				variant: W,
+				children: [E && /* @__PURE__ */ n(l, {
+					sx: {
+						px: 2,
+						py: 1,
+						position: "sticky",
+						top: 0,
+						bgcolor: "background.paper",
+						zIndex: 1
+					},
+					children: /* @__PURE__ */ n(d, {
+						fullWidth: !0,
+						autoFocus: !0,
+						placeholder: ce,
+						value: K,
+						onChange: (e) => q(e.target.value),
+						onKeyDown: (e) => {
+							e.key !== "Escape" && e.stopPropagation();
+						},
+						onClick: (e) => e.stopPropagation(),
+						slotProps: { input: { startAdornment: /* @__PURE__ */ n(s, {
+							position: "start",
+							children: /* @__PURE__ */ n(ne, {})
+						}) } }
+					})
+				}), ve()]
+			}),
+			C ? /* @__PURE__ */ n(o, {
+				id: X,
+				children: C
+			}) : null
+		]
+	});
+}
+var w = t.forwardRef(C);
+w.displayName = "SSelect";
+//#endregion
+export { w as SSelect, w as default };

package/dist/s-select-list/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SSelectList } from './s-select-list';
-export type { SSelectListProps, SSelectListItem } from './s-select-list';
+export type { SSelectListItem, SSelectListItemState, SSelectListOwnerState, SSelectListProps, SSelectListSlotProps, SSelectListSlots, } from './s-select-list';
+export type {} from '../theme/component-augmentation';

package/dist/s-select-list/s-select-list.d.ts

@@ -1,27 +1,66 @@
-import { default as React } from 'react';
+import { BoxProps, CollapseProps, FormControlLabelProps, RadioGroupProps, RadioProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
 export interface SSelectListItem<T = unknown> {
     id: string;
     data: T;
 }
-/**
- * Props interface for SSelectList component
- */
-export interface SSelectListProps<T = unknown> {
-    /** Array of items to render */
+/** Props for a single-selection list built on MUI RadioGroup semantics. */
+export interface SSelectListProps<T = unknown> extends Omit<RadioGroupProps, 'children' | 'defaultValue' | 'onChange' | 'value'> {
+    /** Initial selected item for uncontrolled usage. */
+    defaultValue?: string;
+    /** Items rendered as radio options. */
     items: SSelectListItem<T>[];
-    /** ID of the currently selected item */
-    selectedId: string;
-    /** Callback when an item is selected */
-    onSelect: (id: string) => void;
-    /** Function to render the content of each item */
-    renderItem: (item: SSelectListItem<T>, selected: boolean) => React.ReactNode;
-    /** Optional function to render content below the selected item */
+    /** Called with the standard MUI RadioGroup change signature. */
+    onChange?: RadioGroupProps['onChange'];
+    /** Optional content rendered below the selected item. */
     renderBelow?: (item: SSelectListItem<T>) => React.ReactNode;
-    /** Whether to show a radio button (default: true) */
+    /** Renders the visible option label. */
+    renderItem: (item: SSelectListItem<T>, selected: boolean) => React.ReactNode;
+    /** Visually shows the radio indicator while retaining radio semantics when false. */
     showRadio?: boolean;
+    /** Components used for structural slots. */
+    slots?: SSelectListSlots;
+    /** Props or item-state callbacks for structural slots. */
+    slotProps?: SSelectListSlotProps<T>;
+    /** Selected item for controlled usage. */
+    value?: string;
+}
+export interface SSelectListOwnerState<T = unknown> extends SSelectListProps<T> {
+    showRadio: boolean;
+    value: string;
+}
+export interface SSelectListItemState<T = unknown> extends SSelectListOwnerState<T> {
+    item: SSelectListItem<T>;
+    selected: boolean;
+}
+type RootSlotProps<Props, T> = MuiOwnerStateSlotProps<Props, SSelectListOwnerState<T>>;
+type ItemSlotProps<Props, T> = MuiOwnerStateSlotProps<Props, SSelectListItemState<T>>;
+declare const managedItemProps: readonly ["checked", "inputRef", "name", "onChange", "value"];
+declare const managedRadioProps: readonly ["checked", "disabled", "inputRef", "name", "onChange", "value"];
+type ManagedItemProps = (typeof managedItemProps)[number];
+type ManagedRadioProps = (typeof managedRadioProps)[number];
+export interface SSelectListSlots {
+    details?: React.ElementType;
+    item?: React.ElementType;
+    label?: React.ElementType;
+    option?: React.ElementType;
+    radio?: React.ElementType;
+    root?: React.ElementType;
+    transition?: React.ElementType;
+}
+export interface SSelectListSlotProps<T = unknown> {
+    details?: ItemSlotProps<Omit<BoxProps, 'children'>, T>;
+    item?: ItemSlotProps<Omit<FormControlLabelProps, 'control' | 'label' | ManagedItemProps>, T>;
+    label?: ItemSlotProps<Omit<BoxProps, 'children'>, T>;
+    option?: ItemSlotProps<Omit<BoxProps, 'children'>, T>;
+    radio?: ItemSlotProps<Omit<RadioProps, ManagedRadioProps>, T>;
+    root?: RootSlotProps<Omit<RadioGroupProps, 'children' | 'defaultValue' | 'onChange' | 'value'>, T>;
+    transition?: ItemSlotProps<Omit<CollapseProps, 'children' | 'in'>, T>;
+}
+interface SSelectListComponent {
+    <T = unknown>(props: SSelectListProps<T> & React.RefAttributes<HTMLDivElement>): React.JSX.Element;
+    displayName?: string;
 }
-export declare const SSelectList: {
-    <T>({ items, selectedId, onSelect, renderItem, renderBelow, showRadio, }: SSelectListProps<T>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SSelectList: SSelectListComponent;
 export default SSelectList;

package/dist/s-select-list/s-select-list.js

@@ -1,35 +1,159 @@
-import "react";
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-import { Box as n, Collapse as r, Radio as i, Stack as a, styled as o } from "@mui/material";
+import { resolveOwnerStateSlotProps as e } from "../utils/slots.js";
+import * as t from "react";
+import { createElement as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Box as i, Collapse as a, FormControlLabel as o, Radio as s, RadioGroup as c, formControlLabelClasses as l, styled as u, useThemeProps as d } from "@mui/material";
+import { mergeSlotProps as f, useControlled as p, useEventCallback as m, useForkRef as h } from "@mui/material/utils";
+import g from "@mui/utils/appendOwnerState";
+import { visuallyHidden as _ } from "@mui/utils";
 //#region lib/s-select-list/s-select-list.tsx
-var s = o(n, { shouldForwardProp: (e) => e !== "selected" })(({ theme: e, selected: t }) => ({
-	display: "flex",
-	alignItems: "center",
-	justifyContent: "space-between",
-	borderRadius: e.radius.md,
-	padding: e.spacing(1),
-	paddingLeft: e.spacing(2),
-	paddingRight: e.spacing(2),
+var v = [
+	"checked",
+	"inputRef",
+	"name",
+	"onChange",
+	"value"
+], y = [
+	"checked",
+	"disabled",
+	"inputRef",
+	"name",
+	"onChange",
+	"value"
+], b = { ..._ };
+function x(e, t) {
+	let n = { ...e ?? {} };
+	return t.forEach((e) => {
+		delete n[e];
+	}), n;
+}
+var S = u(c, {
+	name: "SSelectList",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({ gap: e.spacing(1) })), C = u(i, {
+	name: "SSelectList",
+	slot: "Option",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	minWidth: 0,
+	width: "100%",
+	variants: [{
+		props: ({ ownerState: e }) => !!e.row,
+		style: {
+			flex: "1 1 0",
+			width: 0
+		}
+	}]
+}), w = u(o, {
+	name: "SSelectList",
+	slot: "Item",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
 	border: "1px solid",
-	cursor: "pointer",
-	borderColor: t ? (e.vars ?? e).palette.primary.dark : (e.vars ?? e).palette.divider
-})), c = ({ items: o, selectedId: c, onSelect: l, renderItem: u, renderBelow: d, showRadio: f = !0 }) => /* @__PURE__ */ e(a, {
-	spacing: 1,
-	children: o.map((a) => {
-		let o = a.id === c, p = d && o;
-		return /* @__PURE__ */ t(n, { children: [/* @__PURE__ */ t(s, {
-			selected: o,
-			onClick: () => l(a.id),
-			children: [u(a, o), f && /* @__PURE__ */ e(i, { checked: o })]
-		}), p && /* @__PURE__ */ e(r, {
-			in: o,
-			children: /* @__PURE__ */ e(n, {
-				sx: { mt: 1 },
-				children: d(a)
-			})
-		})] }, a.id);
-	})
-});
-c.displayName = "SSelectList";
+	borderColor: (e.vars ?? e).palette.divider,
+	borderRadius: e.radius.md,
+	justifyContent: "space-between",
+	margin: 0,
+	padding: e.spacing(1, 2),
+	width: "100%",
+	[`&.${l.disabled}`]: { color: (e.vars ?? e).palette.text.disabled },
+	variants: [{
+		props: ({ ownerState: e }) => e.selected,
+		style: { borderColor: (e.vars ?? e).palette.primary.dark }
+	}, {
+		props: ({ ownerState: e }) => !e.showRadio,
+		style: { "&:has(input:focus-visible)": {
+			outline: `2px solid ${(e.vars ?? e).palette.primary.main}`,
+			outlineOffset: 2
+		} }
+	}]
+})), T = u("span", {
+	name: "SSelectList",
+	slot: "Label",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({
+	display: "block",
+	flex: 1,
+	minWidth: 0
+}), E = u(s, {
+	name: "SSelectList",
+	slot: "Radio",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({ variants: [{
+	props: ({ ownerState: e }) => !e.showRadio,
+	style: b
+}] }), D = u(a, {
+	name: "SSelectList",
+	slot: "Transition",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), O = u(i, {
+	name: "SSelectList",
+	slot: "Details",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	minWidth: 0,
+	marginTop: e.spacing(1),
+	width: "100%"
+}));
+function k(t, i) {
+	let a = d({
+		props: t,
+		name: "SSelectList"
+	}), { defaultValue: o, items: s, onChange: c, renderBelow: l, renderItem: u, showRadio: _ = !0, slotProps: b, slots: k, value: A, ...j } = a, [M, N] = p({
+		controlled: A,
+		default: o ?? "",
+		name: "SSelectList",
+		state: "value"
+	}), P = {
+		...a,
+		showRadio: _,
+		value: M
+	}, F = k?.root ?? S, I = k?.option ?? C, L = k?.item ?? w, R = k?.label ?? T, z = k?.radio ?? E, B = k?.transition ?? D, V = k?.details ?? O, H = m((e, t) => {
+		N(t), c?.(e, t);
+	}), { ref: U, ...W } = g(F, f(e(b?.root, P), {
+		...j,
+		onChange: H,
+		value: M
+	}), P), G = h(U, i);
+	return /* @__PURE__ */ r(F, {
+		...W,
+		ref: G,
+		children: s.map((t) => {
+			let i = t.id === M, a = {
+				...P,
+				item: t,
+				selected: i
+			}, o = e(b?.option, a), s = e(b?.item, a), c = e(b?.label, a), d = e(b?.radio, a), p = e(b?.transition, a) ?? {}, m = g(I, o ?? {}, a), h = g(L, x(f(s, {
+				disableTypography: !0,
+				labelPlacement: "start"
+			}), v), a), _ = g(R, c ?? {}, a), S = g(z, x(d, y), a);
+			return /* @__PURE__ */ n(I, {
+				...m,
+				key: t.id
+			}, /* @__PURE__ */ r(L, {
+				...h,
+				control: /* @__PURE__ */ r(z, { ...S }),
+				label: /* @__PURE__ */ r(R, {
+					..._,
+					children: u(t, i)
+				}),
+				value: t.id
+			}), l ? /* @__PURE__ */ r(B, {
+				...g(B, {
+					...p,
+					unmountOnExit: p.unmountOnExit ?? !0
+				}, a),
+				in: i,
+				children: /* @__PURE__ */ r(V, {
+					...g(V, e(b?.details, a) ?? {}, a),
+					children: l(t)
+				})
+			}) : null);
+		})
+	});
+}
+var A = t.forwardRef(k);
+A.displayName = "SSelectList";
 //#endregion
-export { c as SSelectList, c as default };
+export { A as SSelectList, A as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SSkeleton } from './s-skeleton';
-export type { SSkeletonAnimation, SSkeletonCustomProps, SSkeletonPreset, SSkeletonPresetProps, SSkeletonProps, SSkeletonVariant, } from './s-skeleton';
+export type { SSkeletonAnimation, SSkeletonCustomProps, SSkeletonOwnerState, SSkeletonPreset, SSkeletonPresetProps, SSkeletonProps, SSkeletonVariant, } from './s-skeleton';
+export type {} from '../theme/component-augmentation';

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

@@ -1,38 +1,37 @@
-import { default as React } from 'react';
-import { SkeletonProps } from '@mui/material';
-export type SSkeletonVariant = 'circular' | 'rectangular' | 'rounded' | 'text';
+import { SkeletonProps } from '@mui/material/Skeleton';
+import * as React from 'react';
+export type SSkeletonVariant = NonNullable<SkeletonProps['variant']>;
 export type SSkeletonPreset = 'avatar' | 'button' | 'checkbox' | 'icon-button';
-export type SSkeletonAnimation = 'pulse' | 'wave' | false;
+export type SSkeletonAnimation = NonNullable<SkeletonProps['animation']>;
+export interface SSkeletonOwnerState {
+    animation: SkeletonProps['animation'];
+    fontSize?: number | string;
+    preset?: SSkeletonPreset;
+    variant: SSkeletonVariant;
+}
 type SSkeletonBaseProps = Omit<SkeletonProps, 'animation' | 'component' | 'height' | 'variant' | 'width'> & {
-    /** Loading animation. Set to false to disable animation. */
+    /** Loading animation. @default 'pulse' */
     animation?: SSkeletonAnimation;
 };
 export type SSkeletonCustomProps = SSkeletonBaseProps & {
-    /** Pre-defined skeleton preset. Cannot be combined with custom shape/size props. */
+    /** Font size used to size a text skeleton. */
+    fontSize?: number | string;
+    /** Skeleton height. */
+    height?: number | string;
     preset?: never;
-    /** Visual variant of the skeleton */
+    /** Skeleton shape. @default 'text' */
     variant?: SSkeletonVariant;
-    /** Height of the skeleton (number for px, string for CSS units) */
-    height?: number | string;
-    /** Width of the skeleton (number for px, string for CSS units) */
+    /** Skeleton width. */
     width?: number | string;
-    /** Font size for text variant skeletons */
-    fontSize?: number | string;
 };
 export type SSkeletonPresetProps = SSkeletonBaseProps & {
-    /** Pre-defined skeleton preset for common UI elements */
+    fontSize?: never;
+    height?: never;
+    /** Predefined dimensions and shape for a common UI element. */
     preset: SSkeletonPreset;
     variant?: never;
-    height?: never;
     width?: never;
-    fontSize?: never;
 };
-/**
- * Props interface for SSkeleton component
- */
 export type SSkeletonProps = SSkeletonCustomProps | SSkeletonPresetProps;
-export declare const SSkeleton: {
-    (props: SSkeletonProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SSkeleton: React.ForwardRefExoticComponent<(Omit<SSkeletonCustomProps, "ref"> | Omit<SSkeletonPresetProps, "ref">) & React.RefAttributes<HTMLSpanElement>>;
 export default SSkeleton;