@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,2 +1,314 @@
-import { t as e } from "../s-chat-message-C-d9amiC.js";
-export { e as SChatMessage, e as default };
+import { n as e, r as t } from "../utils-CMeAWSRO.js";
+import { toSxArray as n } from "../utils/sx.js";
+import { SLazyImage as r } from "../s-lazy-image/s-lazy-image.js";
+import { SIconButton as i } from "../s-icon-button/s-icon-button.js";
+import { SSkeleton as a } from "../s-skeleton/s-skeleton.js";
+import { SAvatar as o } from "../s-avatar/s-avatar.js";
+import { SImageViewer as s } from "../s-image-viewer/s-image-viewer.js";
+import c, { useState as l } from "react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Download as f, InsertDriveFile as p, Refresh as m } from "@mui/icons-material";
+import { Box as h, ButtonBase as g, Paper as _, Typography as v, styled as y, useTheme as b, useThemeProps as x } from "@mui/material";
+//#region lib/s-chat-message/s-chat-message.tsx
+var S = y(h, {
+	name: "SChatMessage",
+	slot: "Root"
+})({}), C = c.forwardRef(function({ isSent: e, showAvatar: t, showTimestamp: r, senderName: i, maxWidth: o, ownerState: s, sx: c, ...l }, f) {
+	return /* @__PURE__ */ d(S, {
+		...l,
+		ownerState: s,
+		ref: f,
+		sx: [{
+			display: "flex",
+			flexDirection: e ? "row-reverse" : "row",
+			alignItems: "flex-start",
+			gap: 1,
+			mb: 1,
+			maxWidth: o,
+			alignSelf: e ? "flex-end" : "flex-start"
+		}, ...n(c)],
+		children: [
+			t && !e && /* @__PURE__ */ u(a, {
+				variant: "circular",
+				width: 36,
+				height: 36
+			}),
+			/* @__PURE__ */ d(h, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: e ? "flex-end" : "flex-start",
+					gap: .5,
+					minWidth: 0
+				},
+				children: [
+					i && !e && /* @__PURE__ */ u(a, {
+						width: 100,
+						height: 12,
+						sx: { ml: .5 }
+					}),
+					/* @__PURE__ */ d(h, {
+						sx: {
+							display: "inline-block",
+							width: "20rem",
+							maxWidth: "100%",
+							overflow: "hidden",
+							ml: .5
+						},
+						children: [
+							/* @__PURE__ */ u(a, {
+								height: 16,
+								sx: { mb: .5 }
+							}),
+							/* @__PURE__ */ u(a, {
+								width: "85%",
+								height: 16,
+								sx: { mb: .5 }
+							}),
+							/* @__PURE__ */ u(a, {
+								width: "70%",
+								height: 16
+							})
+						]
+					}),
+					r && /* @__PURE__ */ u(a, {
+						width: 60,
+						height: 10,
+						sx: {
+							ml: e ? 0 : .5,
+							mr: e ? .5 : 0
+						}
+					})
+				]
+			}),
+			t && e && /* @__PURE__ */ u(a, {
+				variant: "circular",
+				width: 36,
+				height: 36
+			})
+		]
+	});
+}), w = c.forwardRef(function(a, c) {
+	let y = x({
+		props: a,
+		name: "SChatMessage"
+	}), w = b(), { children: T, variant: E = "received", timestamp: D, avatar: O, senderName: k, showAvatar: A = !0, showTimestamp: j = !1, maxWidth: M = "70%", attachments: N = [], onAttachmentClick: P, onDownload: F, hasError: I = !1, errorMessage: L = "Failed to send message", onRetry: R, loading: z = !1, sx: B, ...V } = y, [H, U] = l(null), [W, G] = l(!1), K = E === "sent", q = {
+		...y,
+		isSent: K,
+		loading: z,
+		variant: E
+	}, J = (e) => {
+		P ? P(e) : (U(e), G(!0));
+	}, Y = (e) => {
+		P ? P(e) : F && F(e);
+	}, X = N.filter((e) => e.type === "image"), Z = N.filter((e) => e.type === "file");
+	return z ? /* @__PURE__ */ u(C, {
+		isSent: K,
+		showAvatar: A,
+		showTimestamp: j,
+		senderName: k,
+		maxWidth: M,
+		ownerState: q,
+		ref: c,
+		sx: B,
+		...V
+	}) : /* @__PURE__ */ d(S, {
+		...V,
+		ownerState: q,
+		ref: c,
+		sx: [{
+			display: "flex",
+			flexDirection: K ? "row-reverse" : "row",
+			alignItems: "flex-start",
+			gap: 1,
+			mb: 1,
+			maxWidth: M,
+			alignSelf: K ? "flex-end" : "flex-start"
+		}, ...n(B)],
+		children: [
+			A && !K && /* @__PURE__ */ u(o, {
+				src: O,
+				name: k,
+				size: 36
+			}),
+			/* @__PURE__ */ d(h, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: K ? "flex-end" : "flex-start",
+					gap: .5,
+					minWidth: 0
+				},
+				children: [
+					k && !K && /* @__PURE__ */ u(v, { children: k }),
+					/* @__PURE__ */ d(h, {
+						sx: {
+							display: "inline-block",
+							borderRadius: 1,
+							wordBreak: "break-word",
+							maxWidth: "100%",
+							border: "1px solid",
+							borderColor: I ? "error.main" : "divider",
+							overflow: "hidden"
+						},
+						children: [
+							X.length > 0 && /* @__PURE__ */ u(h, {
+								sx: {
+									minWidth: 200,
+									display: "grid",
+									gridTemplateColumns: X.length === 1 ? "1fr" : "repeat(2, 1fr)",
+									gap: .5,
+									p: .5
+								},
+								children: X.map((e) => /* @__PURE__ */ u(g, {
+									"aria-label": `View ${e.name ?? "image attachment"}`,
+									sx: {
+										display: "block",
+										position: "relative",
+										paddingTop: X.length === 1 ? "66.67%" : "100%",
+										overflow: "hidden",
+										width: "100%",
+										"@media (hover: hover) and (pointer: fine)": { "&:hover": { opacity: w.interaction.mediaHoverOpacity } },
+										"&.Mui-focusVisible": {
+											outline: "2px solid",
+											outlineColor: "primary.main",
+											outlineOffset: -2
+										}
+									},
+									onClick: () => J(e),
+									children: /* @__PURE__ */ u(r, {
+										src: e.thumbnailUrl ?? e.url,
+										alt: e.name ?? "Image",
+										sx: {
+											position: "absolute",
+											inset: 0
+										},
+										slotProps: { image: { sx: { objectFit: "cover" } } }
+									})
+								}, e.id))
+							}),
+							Z.length > 0 && /* @__PURE__ */ u(h, {
+								sx: { p: 1.5 },
+								children: Z.map((t, n) => /* @__PURE__ */ d(_, {
+									variant: "outlined",
+									sx: {
+										display: "flex",
+										alignItems: "center",
+										mt: +(n > 0),
+										overflow: "hidden"
+									},
+									children: [/* @__PURE__ */ d(g, {
+										"aria-label": `Open ${t.name ?? "file attachment"}`,
+										onClick: () => Y(t),
+										sx: {
+											display: "flex",
+											flex: 1,
+											minWidth: 0,
+											gap: 1,
+											p: 1,
+											justifyContent: "flex-start",
+											textAlign: "left",
+											"&.Mui-focusVisible": {
+												outline: "2px solid",
+												outlineColor: "primary.main",
+												outlineOffset: -2
+											}
+										},
+										children: [/* @__PURE__ */ u(p, { sx: { fontSize: 36 } }), /* @__PURE__ */ d(h, {
+											sx: {
+												flex: 1,
+												minWidth: 0
+											},
+											children: [/* @__PURE__ */ u(v, {
+												variant: "body2",
+												sx: {
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													whiteSpace: "nowrap"
+												},
+												children: t.name ?? "Unnamed File"
+											}), t.size && /* @__PURE__ */ u(v, {
+												variant: "caption",
+												children: e(t.size)
+											})]
+										})]
+									}), F && /* @__PURE__ */ u(i, {
+										"aria-label": `Download ${t.name ?? "attachment"}`,
+										onClick: () => F(t),
+										sx: { mr: 1 },
+										size: "small",
+										children: /* @__PURE__ */ u(f, {})
+									})]
+								}, t.id))
+							}),
+							T && /* @__PURE__ */ u(h, {
+								sx: {
+									px: 2,
+									py: 1.5,
+									pt: N.length > 0 ? 0 : 1.5
+								},
+								children: /* @__PURE__ */ u(v, {
+									variant: "body1",
+									sx: {
+										whiteSpace: "pre-wrap",
+										color: I ? "error.main" : "inherit"
+									},
+									children: T
+								})
+							})
+						]
+					}),
+					j && D && /* @__PURE__ */ u(v, {
+						variant: "caption",
+						children: t(D)
+					}),
+					I && /* @__PURE__ */ d(h, {
+						role: "alert",
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							gap: .5,
+							color: "error.main"
+						},
+						children: [/* @__PURE__ */ u(v, {
+							sx: { color: "inherit" },
+							variant: "caption",
+							children: L
+						}), R && /* @__PURE__ */ u(i, {
+							"aria-label": "Retry sending message",
+							onClick: R,
+							size: "small",
+							children: /* @__PURE__ */ u(m, {})
+						})]
+					})
+				]
+			}),
+			A && K && /* @__PURE__ */ u(o, {
+				src: O,
+				name: k,
+				size: 36
+			}),
+			H && /* @__PURE__ */ u(s, {
+				"aria-label": "Message attachment viewer",
+				open: W,
+				onClose: () => {
+					G(!1), U(null);
+				},
+				onCloseButtonClick: () => {
+					G(!1), U(null);
+				},
+				selectedItem: {
+					id: H.id,
+					type: "image",
+					url: H.url,
+					title: H.name
+				},
+				showNavigation: !1,
+				showThumbnailDock: !1
+			})
+		]
+	});
+});
+w.displayName = "SChatMessage";
+//#endregion
+export { w as SChatMessage, w as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SCheckbox } from './s-checkbox';
-export type { SCheckboxProps } from './s-checkbox';
+export type { SCheckboxOwnerState, SCheckboxProps, SCheckboxSlotProps, SCheckboxSlots } from './s-checkbox';
+export type {} from '../theme/component-augmentation';

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

@@ -1,12 +1,34 @@
-import { default as React } from 'react';
-import { CheckboxProps } from '@mui/material';
-/**
- * Props interface for SCheckbox component - extends Material-UI CheckboxProps
- * but removes 'content' to avoid conflicts with our custom content prop
- */
-export interface SCheckboxProps extends Omit<CheckboxProps, 'content'> {
-    /** Content displayed as a clickable label next to the checkbox */
-    content?: string | React.ReactNode;
-}
-export declare const SCheckbox: React.ForwardRefExoticComponent<Omit<SCheckboxProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+import { CheckboxProps } from '@mui/material/Checkbox';
+import { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
+import * as React from 'react';
+export interface SCheckboxOwnerState {
+    disabled: boolean;
+    labelPlacement: NonNullable<FormControlLabelProps['labelPlacement']>;
+    required: boolean;
+}
+type OwnerStateSlotProps<Props> = MuiOwnerStateSlotProps<Props, SCheckboxOwnerState>;
+type ManagedControlProps = 'checked' | 'disabled' | 'inputRef' | 'name' | 'onChange' | 'required' | 'value';
+export interface SCheckboxSlots {
+    /** Component used for the checkbox control. */
+    control?: React.ElementType;
+    /** Component used for the label text. */
+    typography?: React.ElementType;
+}
+export interface SCheckboxSlotProps {
+    /** Props for the checkbox control. State managed by FormControlLabel stays on the root. */
+    control?: OwnerStateSlotProps<Omit<CheckboxProps, ManagedControlProps>>;
+    /** Props forwarded to FormControlLabel's typography slot. */
+    typography?: NonNullable<FormControlLabelProps['slotProps']>['typography'];
+}
+/** A labelled MUI Checkbox composition with FormControlLabel-compatible root props. */
+export interface SCheckboxProps extends Omit<FormControlLabelProps, 'control' | 'label' | 'slots' | 'slotProps'> {
+    /** Visible, clickable label for the checkbox. */
+    label: React.ReactNode;
+    /** Components used for the control and typography slots. */
+    slots?: SCheckboxSlots;
+    /** Props or owner-state callbacks for the component slots. */
+    slotProps?: SCheckboxSlotProps;
+}
+export declare const SCheckbox: React.ForwardRefExoticComponent<Omit<SCheckboxProps, "ref"> & React.RefAttributes<HTMLLabelElement>>;
 export default SCheckbox;

package/dist/s-checkbox/s-checkbox.js

@@ -1,38 +1,48 @@
-import { forwardRef as e, useId as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-import { Box as i, Checkbox as a, Stack as o, Typography as s } from "@mui/material";
+import { styled as e, useThemeProps as t } from "@mui/material/styles";
+import * as n from "react";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/material/Checkbox";
+import a from "@mui/utils/appendOwnerState";
+import { useFormControl as o } from "@mui/material/FormControl";
+import s, { formControlLabelClasses as c } from "@mui/material/FormControlLabel";
 //#region lib/s-checkbox/s-checkbox.tsx
-var c = e(({ content: e, disabled: c, ...l }, u) => {
-	let d = t(), f = l.id ?? d, p = {
-		color: c ? "text.disabled" : "inherit",
-		cursor: c ? "not-allowed" : "pointer",
-		userSelect: "none"
-	};
-	return /* @__PURE__ */ r(o, {
-		direction: "row",
-		sx: {
-			alignItems: "center",
-			display: "flex",
-			justifyContent: "start"
-		},
-		children: [/* @__PURE__ */ n(a, {
-			ref: u,
-			...l,
-			disabled: c,
-			id: f
-		}), e && /* @__PURE__ */ n("label", {
-			htmlFor: f,
-			children: typeof e == "string" || typeof e == "number" ? /* @__PURE__ */ n(s, {
-				sx: p,
-				children: e
-			}) : /* @__PURE__ */ n(i, {
-				component: "span",
-				sx: p,
-				children: e
-			})
-		})]
+var l = e(s, {
+	name: "SCheckbox",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	margin: 0,
+	userSelect: "none",
+	[`&&.${c.disabled}`]: { cursor: "not-allowed" },
+	[`&& .${c.label}.${c.disabled}`]: { color: (e.vars ?? e).palette.text.disabled }
+}));
+function u(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var d = n.forwardRef(function(e, n) {
+	let s = t({
+		props: e,
+		name: "SCheckbox"
+	}), c = o(), { disabled: d, disableTypography: f, label: p, labelPlacement: m = "end", required: h, slotProps: g, slots: _, ...v } = s, y = d ?? c?.disabled ?? !1, b = h ?? c?.required ?? !1, x = f ?? (typeof p != "string" && typeof p != "number"), S = {
+		...s,
+		disabled: y,
+		labelPlacement: m,
+		required: b
+	}, C = _?.control ?? i, w = a(_?.control, u(g?.control, S) ?? {}, S);
+	return /* @__PURE__ */ r(l, {
+		...v,
+		control: /* @__PURE__ */ r(C, { ...w }),
+		disabled: d,
+		disableTypography: x,
+		label: p,
+		labelPlacement: m,
+		ownerState: S,
+		ref: n,
+		required: b,
+		slots: _?.typography ? { typography: _.typography } : void 0,
+		slotProps: g?.typography ? { typography: g.typography } : void 0
 	});
 });
-c.displayName = "SCheckbox";
+d.displayName = "SCheckbox";
 //#endregion
-export { c as SCheckbox, c as default };
+export { d as SCheckbox, d as default };

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

@@ -1,8 +1,6 @@
-import { default as React } from 'react';
 import { ChipProps } from '@mui/material';
-/**
- * Props interface for SChip component
- */
+/** Exact MUI Chip props, including avatar and polymorphic root support. */
 export type SChipProps = ChipProps;
-export declare const SChip: React.ForwardRefExoticComponent<Omit<SChipProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/** SoloStylist export of the unmodified MUI Chip contract. */
+export declare const SChip: import('@mui/material/OverridableComponent').OverridableComponent<import('@mui/material').ChipTypeMap<{}, "div">>;
 export default SChip;

package/dist/s-chip/s-chip.js

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

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

@@ -1,2 +1,3 @@
 export { default, default as SChips } from './s-chips';
-export type { SChipsProps } from './s-chips';
+export type { SChipOwnerState, SChipsOwnerState, SChipsProps, SChipsSlotProps, SChipsSlots } from './s-chips';
+export type {} from '../theme/component-augmentation';

package/dist/s-chips/index.js

@@ -1,2 +1,2 @@
-import { t as e } from "../s-chips-CAC_vVd0.js";
+import { SChips as e } from "./s-chips.js";
 export { e as SChips, e as default };

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

@@ -1,34 +1,56 @@
+import { BoxProps, ChipProps, TooltipProps } from '@mui/material';
+import { OwnerStateSlotProps as MuiOwnerStateSlotProps } from '../utils/slots';
 import * as React from 'react';
-export type SChipColor = 'default' | 'primary' | 'secondary' | 'success' | 'error' | 'info' | 'warning';
-export type SChipVariant = 'filled' | 'outlined';
-export type SChipSize = 'small' | 'medium';
-/**
- * Props interface for SChips component
- */
-export interface SChipsProps {
-    /** Array of strings to display as chips */
+export interface SChipsOwnerState {
+    overflow: boolean;
+    selected: string[];
+    visibleCount: number;
+}
+export interface SChipOwnerState extends SChipsOwnerState {
+    index: number;
+    label: string;
+    selectedItem: boolean;
+}
+type OwnerStateSlotProps<Props, OwnerState> = MuiOwnerStateSlotProps<Props, OwnerState>;
+export interface SChipsSlots {
+    chip?: React.ElementType;
+    overflowChip?: React.ElementType;
+    root?: React.ElementType;
+    tooltip?: React.ElementType;
+}
+export interface SChipsSlotProps {
+    chip?: OwnerStateSlotProps<ChipProps, SChipOwnerState>;
+    overflowChip?: OwnerStateSlotProps<ChipProps, SChipsOwnerState>;
+    root?: OwnerStateSlotProps<BoxProps, SChipsOwnerState>;
+    tooltip?: OwnerStateSlotProps<Omit<TooltipProps, 'children'>, SChipsOwnerState>;
+}
+export interface SChipsProps extends Omit<BoxProps, 'children' | 'color' | 'component' | 'defaultValue' | 'onChange' | 'value'> {
+    /** Labels rendered as chips. */
     chips: string[];
-    /** Whether to handle overflow with '+N more' chip (default: true) */
+    /** Color applied to all chips. */
+    color?: ChipProps['color'];
+    /** Initially selected labels for uncontrolled usage. */
+    defaultValue?: string[];
+    /** Spacing between chips in pixels. */
+    gap?: number;
+    /** Called with the standard event-first signature when selection changes. */
+    onChange?: (event: React.MouseEvent<HTMLDivElement>, value: string[]) => void;
+    /** Called when an interactive chip is clicked, independently of selection. */
+    onItemClick?: (event: React.MouseEvent<HTMLDivElement>, label: string) => void;
+    /** Whether to collapse chips into an overflow indicator. */
     overflow?: boolean;
-    /** Callback fired when a chip is clicked */
-    onClick?: (tag: string) => void;
-    /** Text used in overflow chip (default: 'keywords') */
+    /** Text used in the overflow indicator. */
     overflowText?: string;
-    /** Color applied to all chips */
-    color?: SChipColor;
-    /** Visual variant applied to all chips */
-    variant?: SChipVariant;
-    /** Size applied to all chips */
-    size?: SChipSize;
-    /** Spacing between chips in pixels. Default: 8 */
-    gap?: number;
-    /** Array of selected chip labels. Controls which chips appear selected (for filter chips). */
-    selectedChips?: string[];
-    /** Callback fired when chip selection is toggled. Use with selectedChips for controlled filter chip behavior. */
-    onSelectionChange?: (selected: string[]) => void;
+    /** Size applied to all chips. */
+    size?: ChipProps['size'];
+    /** Components used for internal slots. */
+    slots?: SChipsSlots;
+    /** Props or owner-state callbacks for internal slots. */
+    slotProps?: SChipsSlotProps;
+    /** Selected labels for controlled usage. */
+    value?: string[];
+    /** Visual variant applied to all chips. */
+    variant?: ChipProps['variant'];
 }
-export declare const SChips: {
-    ({ chips, overflow, onClick, overflowText, color, variant, size, gap, selectedChips, onSelectionChange, }: SChipsProps): React.JSX.Element;
-    displayName: string;
-};
+export declare const SChips: React.ForwardRefExoticComponent<Omit<SChipsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SChips;