@solostylist/ui-kit 1.0.230 → 2.0.1

package/dist/s-button/s-button.js

@@ -1,11 +1,5 @@
-import { forwardRef as e } from "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Button as n } from "@mui/material";
+import { Button as e } from "@mui/material";
 //#region lib/s-button/s-button.tsx
-var r = e((e, r) => /* @__PURE__ */ t(n, {
-	ref: r,
-	...e
-}));
-r.displayName = "SButton";
+var t = e;
 //#endregion
-export { r as SButton, r as default };
+export { t as SButton, t as default };

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

@@ -1,2 +1,4 @@
 export { default, default as SCarousel } from './s-carousel';
-export type { SCarouselProps } from './s-carousel';
+export type { EmblaCarouselType, ResponsiveBreakpoint, SCarouselProps, SCarouselSlotProps } from './s-carousel';
+export type {} from '../theme/component-augmentation';
+export type {} from '../theme/optional-component-augmentations/s-carousel';

package/dist/s-carousel/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-carousel-CvmWl6Sc.js";
+import { SCarousel as e } from "./s-carousel.js";
 export { e as SCarousel, e as default };

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

@@ -1,5 +1,8 @@
-import { PropsWithChildren } from 'react';
-import { SxProps, Theme } from '@mui/material';
+import { BoxProps } from '@mui/material';
+import { UseEmblaCarouselType } from 'embla-carousel-react';
+import { SIconButtonProps } from '../s-icon-button';
+import * as React from 'react';
+export type EmblaCarouselType = NonNullable<UseEmblaCarouselType[1]>;
 export interface ResponsiveBreakpoint {
     /** Max-width breakpoint in px (mirrors react-slick convention) */
     readonly breakpoint: number;
@@ -10,15 +13,20 @@ export interface ResponsiveBreakpoint {
 /**
  * Props interface for SCarousel component
  */
-export interface SCarouselProps extends PropsWithChildren {
+export interface SCarouselSlotProps {
+    dots?: Omit<BoxProps<'ul'>, 'ref'>;
+    nextButton?: SIconButtonProps;
+    previousButton?: SIconButtonProps;
+}
+export interface SCarouselProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Carousel slides. */
+    readonly children?: React.ReactNode;
+    /** Ref receiving the Embla API while the carousel is mounted. */
+    readonly apiRef?: React.Ref<EmblaCarouselType | null>;
     /** Custom color for the navigation dots */
     readonly dotColor?: string;
     /** Space between slides in pixels */
     readonly spaceBetween?: number;
-    /** Custom styles for the dots container */
-    readonly dotStyles?: SxProps<Theme>;
-    /** Custom styles for the arrow buttons */
-    readonly arrowStyles?: SxProps<Theme>;
     /** Number of slides visible at once */
     readonly slidesToShow?: number;
     /** Show dot navigation */
@@ -39,6 +47,8 @@ export interface SCarouselProps extends PropsWithChildren {
     readonly centerPadding?: string;
     /** Responsive breakpoints */
     readonly responsive?: ResponsiveBreakpoint[];
+    /** Props for navigation and dots slots. */
+    readonly slotProps?: SCarouselSlotProps;
 }
-export declare const SCarousel: import('react').ForwardRefExoticComponent<SCarouselProps & import('react').RefAttributes<import('embla-carousel').EmblaCarouselType | null>>;
+export declare const SCarousel: React.ForwardRefExoticComponent<Omit<SCarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SCarousel;

package/dist/s-carousel/s-carousel.js

@@ -1,2 +1,184 @@
-import { t as e } from "../s-carousel-CvmWl6Sc.js";
-export { e as SCarousel, 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 { Children as r, forwardRef as i, useCallback as a, useEffect as o, useMemo as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { ArrowBackIosNew as f, ArrowForwardIos as p } from "@mui/icons-material";
+import { Box as m, styled as h, useTheme as g, useThemeProps as ee } from "@mui/material";
+import _ from "embla-carousel-autoplay";
+import v from "embla-carousel-react";
+//#region lib/s-carousel/s-carousel.tsx
+var y = h(m, {
+	name: "SCarousel",
+	slot: "Root"
+})({
+	position: "relative",
+	".carousel-arrow": {
+		position: "absolute",
+		top: "50%",
+		transform: "translate(0, -50%)",
+		zIndex: 1,
+		opacity: 0,
+		transition: "opacity 0.3s ease-in-out",
+		pointerEvents: "none",
+		"&.next": { right: 6 },
+		"&.prev": { left: 6 }
+	},
+	":hover": { ".carousel-arrow": {
+		opacity: 1,
+		pointerEvents: "auto"
+	} },
+	".carousel-arrow.Mui-focusVisible": {
+		opacity: 1,
+		pointerEvents: "auto"
+	}
+}), b = h("div", { shouldForwardProp: (e) => e !== "centerPadding" })(({ centerPadding: e }) => ({
+	overflow: "hidden",
+	...e && { padding: `0 ${e}` }
+})), te = h("div")({
+	display: "flex",
+	touchAction: "pan-y pinch-zoom"
+}), ne = h("div", { shouldForwardProp: (e) => e !== "slidesToShow" && e !== "spaceBetween" })(({ slidesToShow: e, spaceBetween: t }) => ({
+	flex: `0 0 calc(100% / ${e})`,
+	minWidth: 0,
+	paddingInline: `${t / 2}px`,
+	boxSizing: "border-box"
+})), re = h("ul")(({ theme: e }) => ({
+	gap: 6,
+	zIndex: 1,
+	margin: 0,
+	padding: 0,
+	listStyle: "none",
+	display: "flex",
+	alignItems: "center",
+	justifyContent: "center",
+	color: (e.vars ?? e).palette.primary.main,
+	"& li": {
+		width: 13,
+		height: 7,
+		display: "flex",
+		cursor: "pointer",
+		alignItems: "center",
+		justifyContent: "center",
+		transition: "all 0.4s",
+		"&.active span": { opacity: 1 },
+		"&.active": { width: 18 }
+	}
+})), ie = h("span", { shouldForwardProp: (e) => e !== "dotColor" })(({ dotColor: e, theme: t }) => ({
+	width: "100%",
+	height: "100%",
+	borderRadius: t.radius.full,
+	cursor: "pointer",
+	position: "relative",
+	backgroundColor: e ?? (t.vars ?? t).palette.primary.main,
+	opacity: .35
+}));
+function ae(e, t) {
+	return typeof e == "string" || typeof e == "number" ? e : e && typeof e == "object" && "key" in e && e.key != null ? e.key : `slide-${t + 1}`;
+}
+function x(e, t) {
+	let [n, r] = c(e);
+	return o(() => {
+		function n() {
+			if (!t?.length) {
+				r(e);
+				return;
+			}
+			let n = window.innerWidth, i = [...t].sort((e, t) => e.breakpoint - t.breakpoint), a = e;
+			for (let t of i) if (n <= t.breakpoint) {
+				a = t.settings.slidesToShow ?? e;
+				break;
+			}
+			r(a);
+		}
+		return n(), window.addEventListener("resize", n), () => window.removeEventListener("resize", n);
+	}, [e, t]), n;
+}
+var S = i(function(i, h) {
+	let S = ee({
+		props: i,
+		name: "SCarousel"
+	}), { apiRef: C, children: w, dotColor: T, dots: E = !1, arrows: D = !0, slidesToShow: O = 4, spaceBetween: k = 4, autoplay: A = !1, autoplaySpeed: j = 3e3, infinite: M = !0, speed: N = 500, centerMode: P = !1, centerPadding: F = "60px", responsive: I, slotProps: L, sx: R, ...z } = S, B = g(), V = x(O, I), H = s(() => A ? [_({
+		delay: j,
+		stopOnInteraction: !1
+	})] : [], [A, j]), [U, W] = v({
+		loop: M,
+		duration: Math.round(N / 20),
+		align: P ? "center" : "start",
+		direction: B.direction === "rtl" ? "rtl" : "ltr",
+		slidesToScroll: 1
+	}, H), [G, K] = c([]), [q, J] = c(0), [oe, se] = c(!1), [ce, le] = c(!1), Y = a(() => {
+		W && (K(W.scrollSnapList()), J(W.selectedScrollSnap()), se(W.canScrollPrev()), le(W.canScrollNext()));
+	}, [W]);
+	o(() => {
+		if (W) return Y(), W.on("select", Y), W.on("reInit", Y), () => {
+			W.off("select", Y), W.off("reInit", Y);
+		};
+	}, [W, Y]), n.useImperativeHandle(C, () => W ?? null, [W]);
+	let X = r.toArray(w), Z = L?.previousButton, Q = L?.nextButton, $ = L?.dots, ue = {
+		...S,
+		activeSlidesToShow: V,
+		selectedIndex: q
+	};
+	return /* @__PURE__ */ d(y, {
+		...z,
+		ownerState: ue,
+		ref: h,
+		sx: R,
+		children: [
+			/* @__PURE__ */ u(b, {
+				ref: U,
+				centerPadding: P ? F : void 0,
+				children: /* @__PURE__ */ u(te, { children: X.map((e, t) => /* @__PURE__ */ u(ne, {
+					slidesToShow: V,
+					spaceBetween: k,
+					children: e
+				}, ae(e, t))) })
+			}),
+			D && /* @__PURE__ */ d(l, { children: [/* @__PURE__ */ u(t, {
+				"aria-label": "Previous slide",
+				...Z,
+				className: ["carousel-arrow prev", Z?.className].filter(Boolean).join(" "),
+				onClick: (e) => {
+					Z?.onClick?.(e), e.defaultPrevented || W?.scrollPrev();
+				},
+				disabled: Z?.disabled || !M && !oe,
+				sx: e(Z?.sx),
+				children: /* @__PURE__ */ u(f, {})
+			}), /* @__PURE__ */ u(t, {
+				"aria-label": "Next slide",
+				...Q,
+				className: ["carousel-arrow next", Q?.className].filter(Boolean).join(" "),
+				onClick: (e) => {
+					Q?.onClick?.(e), e.defaultPrevented || W?.scrollNext();
+				},
+				disabled: Q?.disabled || !M && !ce,
+				sx: e(Q?.sx),
+				children: /* @__PURE__ */ u(p, {})
+			})] }),
+			E && G.length > 0 && /* @__PURE__ */ u(re, {
+				...$,
+				sx: [{ mt: 4 }, ...e($?.sx)],
+				children: G.map((e, n) => /* @__PURE__ */ u(m, {
+					component: "li",
+					className: n === q ? "active" : "",
+					sx: { display: "flex" },
+					children: /* @__PURE__ */ u(t, {
+						"aria-label": `Go to slide ${n + 1}`,
+						onClick: () => W?.scrollTo(n),
+						sx: {
+							width: "100%",
+							height: "100%",
+							minWidth: 0,
+							p: 0
+						},
+						children: /* @__PURE__ */ u(ie, { dotColor: T })
+					})
+				}, e))
+			})
+		]
+	});
+});
+S.displayName = "SCarousel";
+//#endregion
+export { S as SCarousel, S as default };

package/dist/s-category-card/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SCategoryCard } from './s-category-card';
-export type { SCategoryCardProps } from './s-category-card';
+export type { SCategoryCardOwnerState, SCategoryCardProps, SCategoryCardSlotProps, SCategoryCardSlots, } from './s-category-card';
+export type {} from '../theme/component-augmentation';

package/dist/s-category-card/s-category-card.d.ts

@@ -1,56 +1,43 @@
-import { default as React } from 'react';
-import { SxProps, Theme } from '@mui/material';
-export declare const Wrapper: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme> & {
-    disableHoverEffect?: boolean;
-    hoverScale?: number;
-}, {}, {}>;
-export declare const CategoryTitle: import('@emotion/styled').StyledComponent<import('@mui/system').BoxOwnProps<Theme> & Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof import('@mui/system').BoxOwnProps<Theme>> & import('@mui/system').MUIStyledCommonProps<Theme> & {
-    titlePosition?: "bottom" | "top" | "center";
-    titleAlignment?: "left" | "center" | "right";
-}, {}, {}>;
-/**
- * Props interface for SCategoryCard component
- */
-export interface SCategoryCardProps {
-    /** URL or path to the category image source */
-    image: string;
-    /** Display title for the category shown as overlay text */
-    title: string;
-    /** Width of the category card */
-    width?: number | string;
-    /** Height of the category card */
-    height?: number | string;
-    /** Alternative text for the image */
+import { ButtonBaseProps, TypographyProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCategoryCardOwnerState {
+    disableHoverEffect: boolean;
+    hoverScale: number;
+    interactive: boolean;
+    titleAlignment: 'center' | 'left' | 'right';
+    titlePosition: 'bottom' | 'center' | 'top';
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCategoryCardOwnerState>;
+export interface SCategoryCardSlots {
+    image?: React.ElementType;
+    title?: React.ElementType;
+}
+export interface SCategoryCardSlotProps {
+    image?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>>;
+    title?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for a category card that becomes an MUI ButtonBase when an action is provided. */
+export interface SCategoryCardProps extends Omit<ButtonBaseProps, 'children' | 'component' | 'title'> {
+    /** Alternative text for the image. */
     alt?: string;
-    /** Position of the title overlay on the image */
-    titlePosition?: 'bottom' | 'top' | 'center';
-    /** Text alignment of the title */
-    titleAlignment?: 'left' | 'center' | 'right';
-    /** Typography variant for the title text */
-    titleVariant?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'subtitle1' | 'subtitle2' | 'body1' | 'body2' | 'caption' | 'button' | 'overline';
-    /** Color of the title text */
-    titleColor?: string;
-    /** Background color of the title overlay */
-    titleBackgroundColor?: string;
-    /** Opacity of the title overlay (0-1) */
-    titleOpacity?: number;
-    /** Border radius of the card and title overlay */
-    borderRadius?: number | string;
-    /** Disable the hover zoom effect on the image */
+    /** Disables image zoom on hover. */
     disableHoverEffect?: boolean;
-    /** Scale factor for hover zoom effect */
+    /** Scale factor used by the image hover effect. */
     hoverScale?: number;
-    /** Handler called when the card is clicked */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /** System prop for custom styling of the wrapper */
-    sx?: SxProps<Theme>;
-    /** System prop for custom styling of the title overlay */
-    titleSx?: SxProps<Theme>;
-    /** System prop for custom styling of the image */
-    imageSx?: SxProps<Theme>;
+    /** URL or path to the category image. */
+    image: string;
+    /** Components used for the image and title slots. */
+    slots?: SCategoryCardSlots;
+    /** Props or owner-state callbacks for the image and title slots. */
+    slotProps?: SCategoryCardSlotProps;
+    /** Visible card title and accessible name when the card is interactive. */
+    title: React.ReactNode;
+    /** Alignment of the title overlay. */
+    titleAlignment?: SCategoryCardOwnerState['titleAlignment'];
+    /** Position of the title overlay. */
+    titlePosition?: SCategoryCardOwnerState['titlePosition'];
 }
-export declare const SCategoryCard: {
-    ({ image, title, width, height, alt, titlePosition, titleAlignment, titleVariant, titleColor, titleBackgroundColor, titleOpacity, borderRadius, disableHoverEffect, hoverScale, onClick, sx, titleSx, imageSx, }: SCategoryCardProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SCategoryCard: React.ForwardRefExoticComponent<Omit<SCategoryCardProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SCategoryCard;

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

@@ -1,69 +1,101 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Box as r, Typography as i, styled as a } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
+import * as n from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { ButtonBase as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
+import u from "@mui/utils/appendOwnerState";
 //#region lib/s-category-card/s-category-card.tsx
-var o = a(r, { shouldForwardProp: (e) => e !== "disableHoverEffect" && e !== "hoverScale" })(({ disableHoverEffect: e = !1, hoverScale: t = 1.1 }) => ({
-	height: "100%",
-	cursor: "pointer",
+var d = ({ ownerState: e, theme: t }) => ({
+	borderRadius: t.shape.borderRadius,
+	cursor: e.interactive ? "pointer" : "default",
+	display: "block",
+	height: 250,
 	overflow: "hidden",
 	position: "relative",
-	img: {
+	transition: "none",
+	width: 250,
+	"& img": {
 		height: "100%",
 		objectFit: "cover",
-		transition: "all 0.3s",
-		objectPosition: "center center"
+		objectPosition: "center center",
+		transition: "transform 300ms"
 	},
-	...!e && { ":hover": { img: { transform: `scale(${t})` } } }
-})), s = a(r, { shouldForwardProp: (e) => e !== "titlePosition" && e !== "titleAlignment" })(({ titlePosition: e = "bottom", titleAlignment: t = "center" }) => ({
+	"&.Mui-focusVisible": {
+		outline: `2px solid ${(t.vars ?? t).palette.primary.main}`,
+		outlineOffset: 2
+	},
+	...!e.disableHoverEffect && { "@media (hover: hover) and (pointer: fine)": { "&:hover img": { transform: `scale(${e.hoverScale})` } } },
+	"@media (prefers-reduced-motion: reduce)": { "& img": { transition: "none" } }
+}), f = c(o, {
+	name: "SCategoryCard",
+	slot: "Root"
+})(d), p = c("div", {
+	name: "SCategoryCard",
+	slot: "Root"
+})(d), m = c(s, {
+	name: "SCategoryCard",
+	slot: "Title"
+})(({ ownerState: e, theme: t }) => ({
+	backgroundColor: (t.vars ?? t).palette.background.paper,
+	borderRadius: "inherit",
 	left: 10,
-	right: 10,
-	padding: 4,
-	textAlign: t,
+	padding: t.spacing(.5, 1.5),
 	position: "absolute",
-	transition: "all 0.3s",
-	...e === "bottom" && { bottom: 10 },
-	...e === "top" && { top: 10 },
-	...e === "center" && {
+	right: 10,
+	textAlign: e.titleAlignment,
+	transition: "transform 300ms",
+	...e.titlePosition === "bottom" && { bottom: 10 },
+	...e.titlePosition === "top" && { top: 10 },
+	...e.titlePosition === "center" && {
 		top: "50%",
 		transform: "translateY(-50%)"
 	}
-})), c = ({ image: r, title: a, width: c = 250, height: l = 250, alt: u = "category", titlePosition: d = "bottom", titleAlignment: f = "center", titleVariant: p = "body1", titleColor: m, titleBackgroundColor: h = "background.paper", titleOpacity: g = 1, borderRadius: _ = 1, disableHoverEffect: v = !1, hoverScale: y = 1.1, onClick: b, sx: x, titleSx: S, imageSx: C }) => /* @__PURE__ */ n(o, {
-	disableHoverEffect: v,
-	hoverScale: y,
-	onClick: b,
-	sx: {
-		borderRadius: _,
-		cursor: b ? "pointer" : "default",
-		width: c,
-		height: l,
-		...x
-	},
-	children: [/* @__PURE__ */ t(e, {
-		src: r,
-		width: "100%",
-		height: "100%",
-		alt: u,
-		style: {
-			objectFit: "cover",
-			...C
-		}
-	}), /* @__PURE__ */ t(s, {
-		titlePosition: d,
-		titleAlignment: f,
-		sx: {
-			borderRadius: _,
-			bgcolor: h,
-			opacity: g,
-			...S
-		},
-		children: /* @__PURE__ */ t(i, {
-			variant: p,
-			color: m,
-			children: a
-		})
-	})]
+}));
+function h(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+function g(e) {
+	let t = { ...e };
+	return delete t.action, delete t.centerRipple, delete t.classes, delete t.disabled, delete t.disableRipple, delete t.disableTouchRipple, delete t.focusRipple, delete t.focusVisibleClassName, delete t.LinkComponent, delete t.nativeButton, delete t.onFocusVisible, delete t.TouchRippleProps, delete t.touchRippleRef, delete t.type, t;
+}
+var _ = n.forwardRef(function(n, o) {
+	let s = l({
+		props: n,
+		name: "SCategoryCard"
+	}), { alt: c = "", disableHoverEffect: d = !1, hoverScale: _ = 1.1, image: v, slotProps: y, slots: b, sx: x, title: S, titleAlignment: C = "center", titlePosition: w = "bottom", ...T } = s, E = {
+		...s,
+		disableHoverEffect: d,
+		hoverScale: _,
+		interactive: typeof s.onClick == "function",
+		titleAlignment: C,
+		titlePosition: w
+	}, D = b?.image ?? t, O = b?.title ?? m, k = h(y?.image, E), A = h(y?.title, E), j = u(b?.image, k ?? {}, E), { sx: M, ...N } = A ?? {}, P = u(O, {
+		variant: "body1",
+		...N,
+		sx: e(M)
+	}, E), F = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(D, {
+		variant: "rectangular",
+		...j,
+		alt: c,
+		src: v
+	}), /* @__PURE__ */ i(O, {
+		...P,
+		children: S
+	})] });
+	return E.interactive ? /* @__PURE__ */ i(f, {
+		...T,
+		ownerState: E,
+		ref: o,
+		sx: e(x),
+		children: F
+	}) : /* @__PURE__ */ i(p, {
+		...g(T),
+		ownerState: E,
+		ref: o,
+		sx: e(x),
+		children: F
+	});
 });
-c.displayName = "SCategoryCard";
+_.displayName = "SCategoryCard";
 //#endregion
-export { s as CategoryTitle, c as SCategoryCard, c as default, o as Wrapper };
+export { _ as SCategoryCard, _ as default };

package/dist/s-chat-input/index.d.ts

@@ -1,2 +1,3 @@
 export { default, default as SChatInput } from './s-chat-input';
-export type { SChatInputProps } from './s-chat-input';
+export type { SChatInputChangeEvent, SChatInputChangeReason, SChatInputOwnerState, SChatInputProps, SChatInputSlotProps, SChatInputSlots, } from './s-chat-input';
+export type {} from '../theme/component-augmentation';

package/dist/s-chat-input/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-chat-input-BHMymKij.js";
+import { SChatInput as e } from "./s-chat-input.js";
 export { e as SChatInput, e as default };

package/dist/s-chat-input/s-chat-input.d.ts

@@ -1,11 +1,24 @@
 import { default as React } from 'react';
+import { BoxProps } from '@mui/material';
 import { STextFieldProps } from '../s-text-field';
-/**
- * Props interface for SChatInput component
- */
-export interface SChatInputProps extends Omit<STextFieldProps, 'onSubmit'> {
-    /** Callback function called when message is submitted with Enter key or submit button */
-    onSubmit?: (value: string, files?: File[]) => void;
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+export interface SChatInputOwnerState {
+    disabled: boolean;
+    emojiPickerOpen: boolean;
+    hasFiles: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SChatInputOwnerState>;
+export interface SChatInputSlots {
+    input?: React.ElementType;
+}
+export interface SChatInputSlotProps {
+    input?: OwnerStateSlotProps<STextFieldProps>;
+}
+export type SChatInputChangeReason = 'clear' | 'emoji' | 'input';
+export type SChatInputChangeEvent = Event | React.SyntheticEvent;
+export interface SChatInputProps extends Omit<BoxProps, 'children' | 'component' | 'defaultValue' | 'onChange' | 'onKeyDown' | 'onSubmit' | 'value'> {
+    /** Callback called before the input clears. Prevent the event to keep the current draft and files. */
+    onSubmit?: (event: React.SyntheticEvent, value: string, files: File[]) => void;
     /** Optional callback function called when files are selected */
     onFileSelect?: (files: File[]) => void;
     /** Disable the input and submission */
@@ -18,6 +31,28 @@ export interface SChatInputProps extends Omit<STextFieldProps, 'onSubmit'> {
     hideEmojiPicker?: boolean;
     /** Hide the file attachment button */
     hideFileAttachment?: boolean;
+    /** Current text for controlled usage */
+    value?: string;
+    /** Initial text for uncontrolled usage */
+    defaultValue?: string;
+    /** Called whenever the text changes, including emoji insertion and submit clearing. */
+    onChange?: (event: SChatInputChangeEvent, value: string, reason: SChatInputChangeReason) => void;
+    /** Called when the message input receives a key event. */
+    onKeyDown?: STextFieldProps['onKeyDown'];
+    /** Ref forwarded to the native text input. */
+    inputRef?: React.Ref<HTMLInputElement>;
+    /** Placeholder shown in the message input. */
+    placeholder?: string;
+    /** Components used for internal slots. */
+    slots?: SChatInputSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: SChatInputSlotProps;
+    /** Accessible label for the file picker button */
+    attachFileLabel?: string;
+    /** Accessible label for the emoji picker button */
+    emojiPickerLabel?: string;
+    /** Accessible label for the submit button */
+    submitLabel?: string;
 }
 export declare const SChatInput: React.ForwardRefExoticComponent<Omit<SChatInputProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SChatInput;