@solostylist/ui-kit 1.0.229 → 2.0.0

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

@@ -0,0 +1,315 @@
+import { n as e, r as t } from "./utils-DaSrTYUS.js";
+import { toSxArray as n } from "./utils/sx.js";
+import { t as r } from "./createSvgIcon-B0SZlJF1.js";
+import { t as i } from "./s-image-viewer-DNIEYdtL.js";
+import { t as a } from "./Download-DtvoRwpl.js";
+import { SLazyImage as o } from "./s-lazy-image/s-lazy-image.js";
+import { SIconButton as s } from "./s-icon-button/s-icon-button.js";
+import { SSkeleton as c } from "./s-skeleton/s-skeleton.js";
+import { SAvatar as l } from "./s-avatar/s-avatar.js";
+import u, { useState as d } from "react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { Box as m, ButtonBase as h, Paper as g, Typography as _, styled as v, useTheme as y, useThemeProps as b } from "@mui/material";
+//#region ../../node_modules/@mui/icons-material/InsertDriveFile.mjs
+var x = r(/* @__PURE__ */ f("path", { d: "M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm7 7V3.5L18.5 9z" }), "InsertDriveFile"), S = r(/* @__PURE__ */ f("path", { d: "M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4z" }), "Refresh"), C = v(m, {
+	name: "SChatMessage",
+	slot: "Root"
+})({}), w = u.forwardRef(function({ isSent: e, showAvatar: t, showTimestamp: r, senderName: i, maxWidth: a, ownerState: o, sx: s, ...l }, u) {
+	return /* @__PURE__ */ p(C, {
+		...l,
+		ownerState: o,
+		ref: u,
+		sx: [{
+			display: "flex",
+			flexDirection: e ? "row-reverse" : "row",
+			alignItems: "flex-start",
+			gap: 1,
+			mb: 1,
+			maxWidth: a,
+			alignSelf: e ? "flex-end" : "flex-start"
+		}, ...n(s)],
+		children: [
+			t && !e && /* @__PURE__ */ f(c, {
+				variant: "circular",
+				width: 36,
+				height: 36
+			}),
+			/* @__PURE__ */ p(m, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: e ? "flex-end" : "flex-start",
+					gap: .5,
+					minWidth: 0
+				},
+				children: [
+					i && !e && /* @__PURE__ */ f(c, {
+						width: 100,
+						height: 12,
+						sx: { ml: .5 }
+					}),
+					/* @__PURE__ */ p(m, {
+						sx: {
+							display: "inline-block",
+							width: "20rem",
+							maxWidth: "100%",
+							overflow: "hidden",
+							ml: .5
+						},
+						children: [
+							/* @__PURE__ */ f(c, {
+								height: 16,
+								sx: { mb: .5 }
+							}),
+							/* @__PURE__ */ f(c, {
+								width: "85%",
+								height: 16,
+								sx: { mb: .5 }
+							}),
+							/* @__PURE__ */ f(c, {
+								width: "70%",
+								height: 16
+							})
+						]
+					}),
+					r && /* @__PURE__ */ f(c, {
+						width: 60,
+						height: 10,
+						sx: {
+							ml: e ? 0 : .5,
+							mr: e ? .5 : 0
+						}
+					})
+				]
+			}),
+			t && e && /* @__PURE__ */ f(c, {
+				variant: "circular",
+				width: 36,
+				height: 36
+			})
+		]
+	});
+}), T = u.forwardRef(function(r, c) {
+	let u = b({
+		props: r,
+		name: "SChatMessage"
+	}), v = y(), { 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 } = u, [H, U] = d(null), [W, G] = d(!1), K = E === "sent", q = {
+		...u,
+		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__ */ f(w, {
+		isSent: K,
+		showAvatar: A,
+		showTimestamp: j,
+		senderName: k,
+		maxWidth: M,
+		ownerState: q,
+		ref: c,
+		sx: B,
+		...V
+	}) : /* @__PURE__ */ p(C, {
+		...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__ */ f(l, {
+				src: O,
+				name: k,
+				size: 36
+			}),
+			/* @__PURE__ */ p(m, {
+				sx: {
+					display: "flex",
+					flexDirection: "column",
+					alignItems: K ? "flex-end" : "flex-start",
+					gap: .5,
+					minWidth: 0
+				},
+				children: [
+					k && !K && /* @__PURE__ */ f(_, { children: k }),
+					/* @__PURE__ */ p(m, {
+						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__ */ f(m, {
+								sx: {
+									minWidth: 200,
+									display: "grid",
+									gridTemplateColumns: X.length === 1 ? "1fr" : "repeat(2, 1fr)",
+									gap: .5,
+									p: .5
+								},
+								children: X.map((e) => /* @__PURE__ */ f(h, {
+									"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: v.interaction.mediaHoverOpacity } },
+										"&.Mui-focusVisible": {
+											outline: "2px solid",
+											outlineColor: "primary.main",
+											outlineOffset: -2
+										}
+									},
+									onClick: () => J(e),
+									children: /* @__PURE__ */ f(o, {
+										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__ */ f(m, {
+								sx: { p: 1.5 },
+								children: Z.map((t, n) => /* @__PURE__ */ p(g, {
+									variant: "outlined",
+									sx: {
+										display: "flex",
+										alignItems: "center",
+										mt: +(n > 0),
+										overflow: "hidden"
+									},
+									children: [/* @__PURE__ */ p(h, {
+										"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__ */ f(x, { sx: { fontSize: 36 } }), /* @__PURE__ */ p(m, {
+											sx: {
+												flex: 1,
+												minWidth: 0
+											},
+											children: [/* @__PURE__ */ f(_, {
+												variant: "body2",
+												sx: {
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													whiteSpace: "nowrap"
+												},
+												children: t.name ?? "Unnamed File"
+											}), t.size && /* @__PURE__ */ f(_, {
+												variant: "caption",
+												children: e(t.size)
+											})]
+										})]
+									}), F && /* @__PURE__ */ f(s, {
+										"aria-label": `Download ${t.name ?? "attachment"}`,
+										onClick: () => F(t),
+										sx: { mr: 1 },
+										size: "small",
+										children: /* @__PURE__ */ f(a, {})
+									})]
+								}, t.id))
+							}),
+							T && /* @__PURE__ */ f(m, {
+								sx: {
+									px: 2,
+									py: 1.5,
+									pt: N.length > 0 ? 0 : 1.5
+								},
+								children: /* @__PURE__ */ f(_, {
+									variant: "body1",
+									sx: {
+										whiteSpace: "pre-wrap",
+										color: I ? "error.main" : "inherit"
+									},
+									children: T
+								})
+							})
+						]
+					}),
+					j && D && /* @__PURE__ */ f(_, {
+						variant: "caption",
+						children: t(D)
+					}),
+					I && /* @__PURE__ */ p(m, {
+						role: "alert",
+						sx: {
+							display: "flex",
+							alignItems: "center",
+							gap: .5,
+							color: "error.main"
+						},
+						children: [/* @__PURE__ */ f(_, {
+							sx: { color: "inherit" },
+							variant: "caption",
+							children: L
+						}), R && /* @__PURE__ */ f(s, {
+							"aria-label": "Retry sending message",
+							onClick: R,
+							size: "small",
+							children: /* @__PURE__ */ f(S, {})
+						})]
+					})
+				]
+			}),
+			A && K && /* @__PURE__ */ f(l, {
+				src: O,
+				name: k,
+				size: 36
+			}),
+			H && /* @__PURE__ */ f(i, {
+				"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
+			})
+		]
+	});
+});
+T.displayName = "SChatMessage";
+//#endregion
+export { T as t };

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,49 @@
-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 { t as e } from "../styled-Bog8QCl3.js";
+import { t } from "../useThemeProps-Cr28OQu3.js";
+import { t as n } from "../appendOwnerState-CELpvdMz.js";
+import { t as r } from "../useFormControl-iWLrn7Ek.js";
+import { t as i } from "../Checkbox-BoZu9z2l.js";
+import { n as a, t as o } from "../FormControlLabel-DzgppcC_.js";
+import * as s from "react";
+import { jsx as c } from "react/jsx-runtime";
 //#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(o, {
+	name: "SCheckbox",
+	slot: "Root",
+	shouldForwardProp: (e) => e !== "ownerState"
+})(({ theme: e }) => ({
+	margin: 0,
+	userSelect: "none",
+	[`&&.${a.disabled}`]: { cursor: "not-allowed" },
+	[`&& .${a.label}.${a.disabled}`]: { color: (e.vars ?? e).palette.text.disabled }
+}));
+function u(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var d = s.forwardRef(function(e, a) {
+	let o = t({
+		props: e,
+		name: "SCheckbox"
+	}), s = r(), { disabled: d, disableTypography: f, label: p, labelPlacement: m = "end", required: h, slotProps: g, slots: _, ...v } = o, y = d ?? s?.disabled ?? !1, b = h ?? s?.required ?? !1, x = f ?? (typeof p != "string" && typeof p != "number"), S = {
+		...o,
+		disabled: y,
+		labelPlacement: m,
+		required: b
+	}, C = _?.control ?? i, w = n(_?.control, u(g?.control, S) ?? {}, S);
+	return /* @__PURE__ */ c(l, {
+		...v,
+		control: /* @__PURE__ */ c(C, { ...w }),
+		disabled: d,
+		disableTypography: x,
+		label: p,
+		labelPlacement: m,
+		ownerState: S,
+		ref: a,
+		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 { t as e } from "../s-chips-WqGdqHW9.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;

package/dist/s-chips/s-chips.js

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