@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,2 +1,3 @@
 export { default, default as SAccordion } from './s-accordion';
-export type { SAccordionProps } from './s-accordion';
+export type { SAccordionOwnerState, SAccordionProps, SAccordionSlotProps, SAccordionSlots } from './s-accordion';
+export type {} from '../theme/component-augmentation';

package/dist/s-accordion/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-accordion-xPDelTvP.js";
+import { SAccordion as e } from "./s-accordion.js";
 export { e as SAccordion, e as default };

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

@@ -1,25 +1,45 @@
-import { default as React } from 'react';
-import { AccordionProps } from '@mui/material/Accordion';
+import { AccordionProps, AccordionSlots } from '@mui/material/Accordion';
 import { AccordionDetailsProps } from '@mui/material/AccordionDetails';
 import { AccordionSummaryProps } from '@mui/material/AccordionSummary';
+import { StackProps } from '@mui/material/Stack';
 import { TypographyProps } from '@mui/material/Typography';
-/**
- * Props interface for SAccordion component
- */
-export interface SAccordionProps extends Omit<AccordionProps, 'title'> {
-    /** The title/header content of the accordion */
-    title: React.ReactNode;
-    /** Optional icon to display at the start of the accordion header */
-    startIcon?: React.ReactNode;
-    /** Props to pass to the Typography component for the title */
-    titleTypographyProps?: TypographyProps;
-    /** Props to pass to the AccordionSummary component for customization */
-    accordionSummaryProps?: AccordionSummaryProps;
-    /** Props to pass to the AccordionDetails component for customization */
-    accordionDetailsProps?: AccordionDetailsProps;
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SAccordionOwnerState {
+    disabled: boolean;
+    expanded: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SAccordionOwnerState>;
+export interface SAccordionSlots extends Partial<AccordionSlots> {
+    details?: React.ElementType;
+    summary?: React.ElementType;
+    summaryContent?: React.ElementType;
+    title?: React.ElementType;
 }
-export declare const SAccordion: {
-    ({ title, children, startIcon, titleTypographyProps, accordionSummaryProps, accordionDetailsProps, ...rest }: SAccordionProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
+export type SAccordionSlotProps = NonNullable<AccordionProps['slotProps']> & {
+    details?: OwnerStateSlotProps<AccordionDetailsProps>;
+    summary?: OwnerStateSlotProps<AccordionSummaryProps>;
+    summaryContent?: OwnerStateSlotProps<StackProps>;
+    title?: OwnerStateSlotProps<TypographyProps>;
 };
+/** Props for a convenience Accordion composition with MUI-style slots. */
+export interface SAccordionProps extends Omit<AccordionProps, 'component' | 'defaultExpanded' | 'expanded' | 'onChange' | 'slots' | 'slotProps' | 'title'> {
+    /** Initially expanded state for uncontrolled usage. */
+    defaultExpanded?: boolean;
+    /** Icon rendered by the summary expand control. */
+    expandIcon?: React.ReactNode;
+    /** Controlled expanded state. */
+    expanded?: boolean;
+    /** Called with the standard MUI Accordion change signature. */
+    onChange?: (event: React.SyntheticEvent, expanded: boolean) => void;
+    /** Optional leading icon in the summary. */
+    startIcon?: React.ReactNode;
+    /** Components used for internal structural slots. */
+    slots?: SAccordionSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SAccordionSlotProps;
+    /** Summary title content. */
+    title: React.ReactNode;
+}
+export declare const SAccordion: React.ForwardRefExoticComponent<Omit<SAccordionProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SAccordion;

package/dist/s-accordion/s-accordion.js

@@ -1,2 +1,70 @@
-import { t as e } from "../s-accordion-xPDelTvP.js";
-export { e as SAccordion, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { styled as t, useThemeProps as n } from "@mui/material/styles";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import o from "@mui/icons-material/ExpandMore";
+import s from "@mui/material/Typography";
+import { useControlled as c } from "@mui/material/utils";
+import l from "@mui/utils/appendOwnerState";
+import u from "@mui/material/Stack";
+import d from "@mui/material/Accordion";
+import f from "@mui/material/AccordionDetails";
+import p from "@mui/material/AccordionSummary";
+//#region lib/s-accordion/s-accordion.tsx
+var m = t(d, {
+	name: "SAccordion",
+	slot: "Root"
+})({});
+function h(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var g = r.forwardRef(function(t, r) {
+	let d = n({
+		props: t,
+		name: "SAccordion"
+	}), { children: g, defaultExpanded: _ = !1, disabled: v = !1, expandIcon: y = /* @__PURE__ */ i(o, {}), expanded: b, onChange: x, slotProps: S, slots: C, startIcon: w, title: T, ...E } = d, [D, O] = c({
+		controlled: b,
+		default: _,
+		name: "SAccordion",
+		state: "expanded"
+	}), k = {
+		...d,
+		disabled: v,
+		expanded: D
+	}, { details: A = f, summary: j = p, summaryContent: M = u, title: N = s, ...P } = C ?? {}, { details: F, summary: I, summaryContent: L, title: R, ...z } = S ?? {}, B = l(C?.summary, h(I, k) ?? {}, k), V = l(C?.summaryContent, h(L, k) ?? {}, k), H = l(C?.title, h(R, k) ?? {}, k), U = l(C?.details, h(F, k) ?? {}, k), { sx: W, ...G } = V, { sx: K, ...q } = H;
+	return /* @__PURE__ */ a(m, {
+		elevation: 0,
+		...E,
+		disabled: v,
+		expanded: D,
+		onChange: (e, t) => {
+			O(t), x?.(e, t);
+		},
+		ownerState: k,
+		ref: r,
+		slots: P,
+		slotProps: z,
+		children: [T != null || w ? /* @__PURE__ */ i(j, {
+			expandIcon: y,
+			...B,
+			children: /* @__PURE__ */ a(M, {
+				direction: "row",
+				spacing: 1,
+				...G,
+				sx: [{ alignItems: "center" }, ...e(W)],
+				children: [w, /* @__PURE__ */ i(N, {
+					variant: "subtitle1",
+					...q,
+					sx: [{ fontWeight: 600 }, ...e(K)],
+					children: T
+				})]
+			})
+		}) : null, /* @__PURE__ */ i(A, {
+			...U,
+			children: g
+		})]
+	});
+});
+g.displayName = "SAccordion";
+//#endregion
+export { g as SAccordion, g as default };

package/dist/s-action-overlay/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SActionOverlay } from './s-action-overlay';
-export type { SActionOverlayProps, IActionOverlay } from './s-action-overlay';
+export type { SActionOverlayAction, SActionOverlayOwnerState, SActionOverlayProps, SActionOverlaySlotProps, SActionOverlaySlots, } from './s-action-overlay';
+export type {} from '../theme/component-augmentation';

package/dist/s-action-overlay/s-action-overlay.d.ts

@@ -1,58 +1,59 @@
-import { ReactNode } from 'react';
-import { SxProps, Theme } from '@mui/material';
+import { BoxProps, GridProps } from '@mui/material';
 import { SIconButtonProps } from '../s-icon-button';
-/**
- * Configuration for individual action overlay buttons
- */
-export interface IActionOverlay {
-    /** Icon to display in the button */
-    icon: ReactNode;
-    /** Tooltip text to show on hover */
-    tooltip: string;
-    /** Click handler for the action */
-    onClick?: () => void;
-    /** Whether the action is in an active state */
-    isActive?: boolean;
-    /** Whether the action is disabled */
-    disabled?: boolean;
-    /** Color variant for the icon button */
-    color?: 'inherit' | 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-    /** Additional props to pass to the underlying SIconButton */
-    iconButtonProps?: SIconButtonProps;
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+/** One icon action rendered by SActionOverlay. Standard SIconButton props are accepted directly. */
+export interface SActionOverlayAction extends Omit<SIconButtonProps, 'aria-label' | 'children' | 'slotProps' | 'slots' | 'tooltip'> {
+    /** Icon rendered inside the action button. */
+    icon: React.ReactNode;
+    /** Accessible name and tooltip text. */
+    label: string;
+    /** Whether the action is currently pressed. */
+    selected?: boolean;
 }
-/**
- * Props interface for SActionOverlay component
- */
-export interface SActionOverlayProps {
-    /** Array of action configurations for the overlay buttons */
-    actions: IActionOverlay[];
-    /** Maximum width of the actions container (overrides columns calculation) */
-    maxWidth?: number | string;
-    /** Number of columns for the action grid layout */
-    columns?: number;
-    /** The content to overlay the actions on */
-    children: ReactNode;
-    /** Whether to show overlay on hover */
-    showOnHover?: boolean;
-    /** Controlled visibility state (overrides showOnHover) */
-    visible?: boolean;
-    /** Position of the action buttons within the overlay */
-    position?: 'center' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /** Background color of the overlay backdrop */
+export interface SActionOverlayOwnerState {
+    position: 'bottom-left' | 'bottom-right' | 'center' | 'top-left' | 'top-right';
+    visible: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SActionOverlayOwnerState>;
+export interface SActionOverlaySlots {
+    actions?: React.ElementType;
+    overlay?: React.ElementType;
+}
+export interface SActionOverlaySlotProps {
+    actions?: OwnerStateSlotProps<GridProps>;
+    overlay?: OwnerStateSlotProps<BoxProps>;
+}
+/** Props for an accessible action layer revealed by hover or keyboard focus. */
+export interface SActionOverlayProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Actions rendered in the overlay. */
+    actions: SActionOverlayAction[];
+    /** Overlay background color. */
     backdropColor?: string;
-    /** Opacity of the backdrop (0-1) */
+    /** Overlay background opacity. */
     backdropOpacity?: number;
-    /** Blur amount in pixels for the backdrop filter */
-    blurAmount?: number;
-    /** Border radius of the overlay */
+    /** Overlay border radius. */
     borderRadius?: number | string;
-    /** Custom styles for the overlay element */
-    overlaySx?: SxProps<Theme>;
-    /** Callback when overlay visibility changes */
-    onVisibilityChange?: (visible: boolean) => void;
+    /** Backdrop-filter blur in pixels. */
+    blurAmount?: number;
+    /** Content covered by the action layer. */
+    children: React.ReactNode;
+    /** Maximum number of action columns. */
+    columns?: number;
+    /** Maximum width of the action grid. */
+    maxWidth?: number | string;
+    /** Called when hover/focus requests a visibility change. */
+    onVisibilityChange?: (event: React.SyntheticEvent, visible: boolean) => void;
+    /** Alignment of the action grid. */
+    position?: SActionOverlayOwnerState['position'];
+    /** Enables hover and focus-within disclosure. */
+    showOnHover?: boolean;
+    /** Components used for the overlay and action-grid slots. */
+    slots?: SActionOverlaySlots;
+    /** Props or owner-state callbacks for structural slots. */
+    slotProps?: SActionOverlaySlotProps;
+    /** Controlled visibility. */
+    visible?: boolean;
 }
-export declare const SActionOverlay: {
-    ({ actions, maxWidth, columns, children, showOnHover, visible: controlledVisible, position, backdropColor, backdropOpacity, blurAmount, borderRadius, overlaySx, onVisibilityChange, }: SActionOverlayProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SActionOverlay: React.ForwardRefExoticComponent<Omit<SActionOverlayProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SActionOverlay;

package/dist/s-action-overlay/s-action-overlay.js

@@ -1,113 +1,112 @@
-import { SIconButton as e } from "../s-icon-button/s-icon-button.js";
-import { useState as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Grid as a } from "@mui/material";
+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 { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Box as a, Grid as o, styled as s, useThemeProps as c } from "@mui/material";
+import l from "@mui/utils/appendOwnerState";
 //#region lib/s-action-overlay/s-action-overlay.tsx
-var o = 40, s = 16, c = ({ actions: c, maxWidth: l, columns: u = 3, children: d, showOnHover: f = !0, visible: p, position: m = "center", backdropColor: h = "background.paper", backdropOpacity: g = .9, blurAmount: _ = 10, borderRadius: v = 0, overlaySx: y, onVisibilityChange: b }) => {
-	let [x, S] = t(!1), C = p ?? (f && x), w = () => {
-		f && p === void 0 && (S(!0), b?.(!0));
-	}, T = () => {
-		f && p === void 0 && (S(!1), b?.(!1));
-	}, E = () => {
-		switch (m) {
-			case "top-left": return {
-				justifyContent: "flex-start",
-				alignItems: "flex-start"
-			};
-			case "top-right": return {
-				justifyContent: "flex-end",
-				alignItems: "flex-start"
-			};
-			case "bottom-left": return {
-				justifyContent: "flex-start",
-				alignItems: "flex-end"
-			};
-			case "bottom-right": return {
-				justifyContent: "flex-end",
-				alignItems: "flex-end"
-			};
-			default: return {
-				justifyContent: "center",
-				alignItems: "center"
-			};
-		}
-	}, D = () => {
-		switch (m) {
-			case "top-left": return "flex-start";
-			case "top-right": return "flex-end";
-			case "bottom-left": return "flex-start";
-			case "bottom-right": return "flex-end";
-			default: return "center";
-		}
-	}, O = () => {
-		let e = l;
-		return u && (e = u * o + (u - 1) * s + u * 16), e;
+var u = 40, d = 16, f = s(a, {
+	name: "SActionOverlay",
+	slot: "Root"
+})({});
+function p(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function m(e) {
+	let t = e.endsWith("left") ? "flex-start" : e.endsWith("right") ? "flex-end" : "center";
+	return {
+		alignItems: e.startsWith("top") ? "flex-start" : e.startsWith("bottom") ? "flex-end" : "center",
+		justifyContent: t
 	};
-	return /* @__PURE__ */ n(i, {
-		sx: { display: "flex" },
-		children: /* @__PURE__ */ r(i, {
-			onMouseEnter: w,
-			onMouseLeave: T,
-			sx: { position: "relative" },
-			children: [d, C && /* @__PURE__ */ n(i, {
-				sx: {
-					position: "absolute",
-					top: 0,
-					left: 0,
-					width: "100%",
-					height: "100%",
-					display: "flex",
-					bgcolor: h,
-					borderRadius: v,
-					opacity: g,
-					backdropFilter: `blur(${_}px)`,
-					transform: "translateZ(0)",
-					willChange: "transform",
-					transition: "opacity 0.2s ease-in-out",
-					...E(),
-					...y
-				},
-				children: /* @__PURE__ */ n(a, {
-					container: !0,
-					spacing: 2,
+}
+var h = n.forwardRef(function(s, h) {
+	let g = c({
+		props: s,
+		name: "SActionOverlay"
+	}), { "aria-label": _, actions: v, backdropColor: y = "background.paper", backdropOpacity: b = .9, borderRadius: x = 0, blurAmount: S = 10, children: C, columns: w = 3, maxWidth: T, onBlur: E, onFocus: D, onMouseEnter: O, onMouseLeave: k, onVisibilityChange: A, position: j = "center", showOnHover: M = !0, slotProps: N, slots: P, sx: F, tabIndex: I, visible: L, ...R } = g, [z, B] = n.useState(!1), V = L ?? z, H = {
+		...g,
+		position: j,
+		visible: V
+	}, U = P?.overlay ?? a, W = P?.actions ?? o, G = l(P?.overlay, p(N?.overlay, H) ?? {}, H), K = l(P?.actions, p(N?.actions, H) ?? {}, H), { sx: q, ...J } = G, { sx: Y, ...X } = K, Z = m(j), Q = w > 0 ? w * u + (w - 1) * d + w * 16 : void 0, $ = (e, t) => {
+		M && (L === void 0 && B(t), A?.(e, t));
+	};
+	return /* @__PURE__ */ i(f, {
+		...R,
+		"aria-label": _ ?? (M ? "Show actions" : void 0),
+		onBlur: (e) => {
+			E?.(e), e.currentTarget.contains(e.relatedTarget) || $(e, !1);
+		},
+		onFocus: (e) => {
+			D?.(e), $(e, !0);
+		},
+		onMouseEnter: (e) => {
+			O?.(e), $(e, !0);
+		},
+		onMouseLeave: (e) => {
+			k?.(e), $(e, !1);
+		},
+		ownerState: H,
+		ref: h,
+		tabIndex: I ?? (M ? 0 : void 0),
+		sx: [{
+			display: "inline-flex",
+			position: "relative"
+		}, ...e(F)],
+		children: [C, V ? /* @__PURE__ */ r(U, {
+			...J,
+			sx: [{
+				...Z,
+				backdropFilter: `blur(${S}px)`,
+				bgcolor: y,
+				borderRadius: x,
+				display: "flex",
+				inset: 0,
+				opacity: b,
+				position: "absolute",
+				transform: "translateZ(0)",
+				transition: "opacity 200ms ease-in-out"
+			}, ...e(q)],
+			children: /* @__PURE__ */ r(W, {
+				container: !0,
+				spacing: 2,
+				...X,
+				sx: [{
+					justifyContent: Z.justifyContent,
+					maxWidth: T ?? Q
+				}, ...e(Y)],
+				children: v.map(({ icon: n, label: i, selected: a, sx: s, ...c }, l) => /* @__PURE__ */ r(o, {
 					sx: {
-						justifyContent: D(),
-						maxWidth: O()
+						display: "flex",
+						justifyContent: "center"
 					},
-					children: c.map((t, r) => /* @__PURE__ */ n(a, {
-						sx: {
-							display: "flex",
-							justifyContent: "center"
-						},
-						children: /* @__PURE__ */ n(e, {
-							tooltipOptions: {
-								title: t.tooltip,
-								placement: "top"
-							},
-							onClick: t.onClick,
-							disabled: t.disabled,
-							color: t.color,
-							sx: {
-								margin: 1,
-								backgroundColor: t.isActive ? "primary.main" : void 0,
-								color: t.isActive ? "primary.contrastText" : void 0,
-								transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
-								opacity: t.disabled ? .5 : 1,
-								"&:hover": {
-									backgroundColor: t.isActive ? "primary.main" : void 0,
-									color: t.isActive ? "primary.contrastText" : void 0
-								},
-								...t.iconButtonProps?.sx
-							},
-							...t.iconButtonProps,
-							children: t.icon
-						})
-					}, `${t.tooltip}-${r}`))
-				})
-			})]
-		})
+					children: /* @__PURE__ */ r(t, {
+						...c,
+						"aria-label": i,
+						"aria-pressed": a,
+						tooltip: i,
+						slotProps: { tooltip: { placement: "top" } },
+						sx: [{
+							bgcolor: a ? "primary.main" : void 0,
+							color: a ? "primary.contrastText" : void 0,
+							m: 1,
+							transition: (e) => e.transitions.create([
+								"background-color",
+								"color",
+								"opacity"
+							], { duration: e.transitions.duration.shorter }),
+							"&.Mui-disabled": { opacity: .5 },
+							"&:hover": {
+								bgcolor: a ? "primary.main" : void 0,
+								color: a ? "primary.contrastText" : void 0
+							}
+						}, ...e(s)],
+						children: n
+					})
+				}, `${i}-${l}`))
+			})
+		}) : null]
 	});
-};
-c.displayName = "SActionOverlay";
+});
+h.displayName = "SActionOverlay";
 //#endregion
-export { c as SActionOverlay, c as default };
+export { h as SActionOverlay, h as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SAutocomplete } from './s-autocomplete';
-export type { SAutocompleteProps } from './s-autocomplete';
+export type { SAutocompleteComponent, SAutocompleteOwnerState, SAutocompleteProps } from './s-autocomplete';
+export type {} from '../theme/component-augmentation';

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

@@ -10,20 +10,31 @@ import { AutocompleteProps } from '@mui/material';
  * @template DisableClearable - Whether the clear button is disabled
  * @template FreeSolo - Whether free text input is allowed
  */
-export interface SAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> extends Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'renderInput'> {
-    /** Optional custom renderInput function for advanced input customization */
-    renderInput?: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
-    /** Field label displayed above the autocomplete */
+type SAutocompleteBaseProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> = Omit<AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>, 'renderInput'>;
+interface SAutocompleteDefaultInputProps {
+    /** Uses SAutocomplete's default MUI TextField renderer. */
+    renderInput?: undefined;
+    /** Field label rendered by the default MUI TextField input */
     label?: string | React.ReactNode;
     /** Placeholder text shown when no option is selected */
     placeholder?: string;
     /** Whether the field is required (shows asterisk in label) */
     required?: boolean;
-    /** Error message to display below the field */
-    error?: string;
-    /** HTML id attribute for the input element */
-    htmlFor?: string;
+    /** Whether the field has an error */
+    error?: boolean;
+    /** Supporting or validation content shown below the input */
+    helperText?: React.ReactNode;
 }
+interface SAutocompleteCustomInputProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> {
+    /** Custom input renderer. It owns label, placeholder, required, error, and helper text. */
+    renderInput: AutocompleteProps<T, Multiple, DisableClearable, FreeSolo>['renderInput'];
+    error?: never;
+    helperText?: never;
+    label?: never;
+    placeholder?: never;
+    required?: never;
+}
+export type SAutocompleteProps<T, Multiple extends boolean | undefined, DisableClearable extends boolean | undefined, FreeSolo extends boolean | undefined = undefined> = SAutocompleteBaseProps<T, Multiple, DisableClearable, FreeSolo> & (SAutocompleteDefaultInputProps | SAutocompleteCustomInputProps<T, Multiple, DisableClearable, FreeSolo>);
 /**
  * Type definition for SAutocomplete component with generic support
  */
@@ -33,5 +44,11 @@ export interface SAutocompleteComponent {
     }): React.JSX.Element;
     displayName?: string;
 }
+export interface SAutocompleteOwnerState {
+    disablePortal: boolean;
+    error: boolean;
+    fullWidth: boolean;
+    required: boolean;
+}
 export declare const SAutocomplete: SAutocompleteComponent;
 export default SAutocomplete;

package/dist/s-autocomplete/s-autocomplete.js

@@ -1,28 +1,39 @@
-import { SForm as e } from "../s-form/s-form.js";
+import { STextField as e } from "../s-text-field/s-text-field.js";
 import { forwardRef as t, useId as n } from "react";
 import { jsx as r } from "react/jsx-runtime";
-import { Autocomplete as i, TextField as a } from "@mui/material";
+import { Autocomplete as i, styled as a, useThemeProps as o } from "@mui/material";
 //#region lib/s-autocomplete/s-autocomplete.tsx
-var o = t(({ label: t = "", placeholder: o, required: s = !1, error: c, htmlFor: l, ...u }, d) => {
-	let f = n(), p = l ?? f;
-	return /* @__PURE__ */ r(e, {
-		error: c,
-		label: t,
-		required: s,
-		htmlFor: p,
-		children: /* @__PURE__ */ r(i, {
-			disablePortal: !0,
-			fullWidth: !0,
-			renderInput: u.renderInput ?? ((e) => /* @__PURE__ */ r(a, {
-				...e,
-				placeholder: o
-			})),
-			id: p,
-			...u,
-			ref: d
-		})
+var s = a(i, {
+	name: "SAutocomplete",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})({}), c = t((t, i) => {
+	let { label: a = "", placeholder: c, required: l = !1, error: u = !1, fullWidth: d = !0, helperText: f, id: p, renderInput: m, disablePortal: h = !0, ...g } = o({
+		props: t,
+		name: "SAutocomplete"
+	}), _ = n(), v = p ?? _, y = {
+		disablePortal: h,
+		error: u,
+		fullWidth: d,
+		required: l
+	};
+	return /* @__PURE__ */ r(s, {
+		...g,
+		ref: i,
+		id: v,
+		disablePortal: h,
+		fullWidth: d,
+		ownerState: y,
+		renderInput: m ?? ((t) => /* @__PURE__ */ r(e, {
+			...t,
+			error: u,
+			helperText: f,
+			label: a,
+			placeholder: c,
+			required: l
+		}))
 	});
 });
-o.displayName = "SAutocomplete";
+c.displayName = "SAutocomplete";
 //#endregion
-export { o as SAutocomplete, o as default };
+export { c as SAutocomplete, c as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SAvatar } from './s-avatar';
-export type { SAvatarProps } from './s-avatar';
+export type { SAvatarOwnerState, SAvatarProps, SAvatarSlotProps, SAvatarSlots } from './s-avatar';
+export type {} from '../theme/component-augmentation';