@solostylist/ui-kit 1.0.230 → 2.0.0

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 { t } from "../appendOwnerState-CELpvdMz.js";
+import { SIconButton as n } from "../s-icon-button/s-icon-button.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Box as o, Grid as s, styled as c, useThemeProps as l } from "@mui/material";
 //#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 = c(o, {
+	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 = r.forwardRef(function(c, h) {
+	let g = l({
+		props: c,
+		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] = r.useState(!1), V = L ?? z, H = {
+		...g,
+		position: j,
+		visible: V
+	}, U = P?.overlay ?? o, W = P?.actions ?? s, G = t(P?.overlay, p(N?.overlay, H) ?? {}, H), K = t(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__ */ a(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__ */ i(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__ */ i(W, {
+				container: !0,
+				spacing: 2,
+				...X,
+				sx: [{
+					justifyContent: Z.justifyContent,
+					maxWidth: T ?? Q
+				}, ...e(Y)],
+				children: v.map(({ icon: t, label: r, selected: a, sx: o, ...c }, l) => /* @__PURE__ */ i(s, {
 					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__ */ i(n, {
+						...c,
+						"aria-label": r,
+						"aria-pressed": a,
+						tooltip: r,
+						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(o)],
+						children: t
+					})
+				}, `${r}-${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 { t as e } from "../s-text-field-BM4qk0mf.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';

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

@@ -1,22 +1,40 @@
-import { PropsWithChildren } from 'react';
-import { AvatarProps } from '@mui/material';
-/**
- * Props interface for SAvatar component
- */
-export interface SAvatarProps {
-    /** URL of the avatar image to display */
-    avatar?: string;
-    /** Name of the user, used for initials fallback and optional display */
-    name?: string;
-    /** Whether to display the name alongside the avatar */
+import { AvatarProps, BoxProps, TypographyProps } from '@mui/material';
+import { SLazyImageProps } from '../s-lazy-image';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SAvatarOwnerState {
+    showName: boolean;
+    size: number;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SAvatarOwnerState>;
+export interface SAvatarSlots {
+    avatar?: React.ElementType;
+    image?: React.ElementType;
+    name?: React.ElementType;
+}
+export interface SAvatarSlotProps {
+    avatar?: OwnerStateSlotProps<AvatarProps>;
+    image?: OwnerStateSlotProps<Omit<SLazyImageProps, 'alt' | 'src'>>;
+    name?: OwnerStateSlotProps<TypographyProps>;
+}
+/** Props for an Avatar with optional adjacent name content. */
+export interface SAvatarProps extends Omit<BoxProps, 'children' | 'component'> {
+    /** Alternative text for the avatar image. Defaults to the name. */
+    alt?: string;
+    /** Custom fallback content. Defaults to the first character of name. */
+    children?: React.ReactNode;
+    /** User name used as fallback content and optional adjacent text. */
+    name?: React.ReactNode;
+    /** Shows the name next to the avatar. */
     showName?: boolean;
-    /** Size of the avatar in pixels (width and height) */
+    /** Avatar diameter in pixels. */
     size?: number;
-    /** Additional props to pass to the underlying Material-UI Avatar component */
-    avatarProps?: AvatarProps;
+    /** Components used for internal structural slots. */
+    slots?: SAvatarSlots;
+    /** Props or owner-state callbacks for internal structural slots. */
+    slotProps?: SAvatarSlotProps;
+    /** Avatar image URL, matching MUI Avatar naming. */
+    src?: string;
 }
-export declare const SAvatar: {
-    ({ avatar, name, showName, size, avatarProps, children, }: PropsWithChildren<SAvatarProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+export declare const SAvatar: React.ForwardRefExoticComponent<Omit<SAvatarProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SAvatar;

package/dist/s-avatar/s-avatar.js

@@ -1,30 +1,56 @@
-import e from "../s-lazy-image/s-lazy-image.js";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { Avatar as r, Box as i, Typography as a } from "@mui/material";
+import { toSxArray as e } from "../utils/sx.js";
+import { t } from "../appendOwnerState-CELpvdMz.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import * as r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { Avatar as o, Box as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
 //#region lib/s-avatar/s-avatar.tsx
-var o = ({ avatar: o, name: s, showName: c = !1, size: l = 40, avatarProps: u, children: d }) => /* @__PURE__ */ n(i, {
-	sx: {
-		display: "flex",
-		alignItems: "center",
-		gap: 2
-	},
-	children: [/* @__PURE__ */ t(r, {
-		sx: {
-			width: l,
-			height: l,
-			fontSize: 16
-		},
-		...u,
-		children: d ?? (o ? /* @__PURE__ */ t(e, {
-			src: o,
-			alt: s ?? "Avatar",
-			width: l,
-			height: l,
-			variant: "circular",
-			style: { borderRadius: "50%" }
-		}) : s?.[0] ?? "A")
-	}), c && /* @__PURE__ */ t(a, { children: s })]
+var d = l(s, {
+	name: "SAvatar",
+	slot: "Root"
+})({}), f = (e) => e <= 32 ? 12 : e <= 40 ? 16 : e <= 56 ? 18 : Math.round(e * .4);
+function p(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var m = r.forwardRef(function(r, s) {
+	let l = u({
+		props: r,
+		name: "SAvatar"
+	}), { alt: m, children: h, name: g, showName: _ = !1, size: v = 40, slotProps: y, slots: b, src: x, sx: S, ...C } = l, w = {
+		...l,
+		showName: _,
+		size: v
+	}, T = b?.avatar ?? o, E = b?.image ?? n, D = b?.name ?? c, O = t(b?.avatar, p(y?.avatar, w) ?? {}, w), k = t(b?.image, p(y?.image, w) ?? {}, w), A = t(b?.name, p(y?.name, w) ?? {}, w), { sx: j, ...M } = O;
+	return /* @__PURE__ */ a(d, {
+		...C,
+		ownerState: w,
+		ref: s,
+		sx: [{
+			alignItems: "center",
+			display: "flex",
+			gap: 2
+		}, ...e(S)],
+		children: [/* @__PURE__ */ i(T, {
+			...M,
+			sx: [{
+				fontSize: f(v),
+				height: v,
+				width: v
+			}, ...e(j)],
+			children: h ?? (x ? /* @__PURE__ */ i(E, {
+				...k,
+				alt: m ?? (typeof g == "string" ? g : "Avatar"),
+				height: v,
+				src: x,
+				variant: "circular",
+				width: v
+			}) : (typeof g == "string" ? g[0] : void 0) ?? "A")
+		}), _ && g != null ? /* @__PURE__ */ i(D, {
+			...A,
+			children: g
+		}) : null]
+	});
 });
-o.displayName = "SAvatar";
+m.displayName = "SAvatar";
 //#endregion
-export { o as SAvatar, o as default };
+export { m as SAvatar, m as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SBlurText } from './s-blur-text';
 export type { SBlurTextProps } from './s-blur-text';
+export type {} from '../theme/component-augmentation';

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

@@ -3,9 +3,9 @@ import { TypographyProps } from '@mui/material';
 /**
  * Props interface for SBlurText component
  */
-export interface SBlurTextProps extends Omit<TypographyProps, 'children'> {
+export interface SBlurTextProps extends Omit<TypographyProps, 'children' | 'component'> {
     /** The text content to animate */
-    text: string;
+    children: string;
     /** Delay between animating each segment in milliseconds */
     delay?: number;
     /** Animation granularity - animate by words or individual letters */
@@ -27,5 +27,5 @@ export interface SBlurTextProps extends Omit<TypographyProps, 'children'> {
     /** Duration of each animation step in seconds */
     stepDuration?: number;
 }
-export declare const SBlurText: React.FC<SBlurTextProps>;
+export declare const SBlurText: React.ForwardRefExoticComponent<Omit<SBlurTextProps, "ref"> & React.RefAttributes<HTMLElement>>;
 export default SBlurText;