@solostylist/ui-kit 1.0.230 → 2.0.1

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

@@ -1,2 +1,398 @@
-import { t as e } from "../s-chat-input-BHMymKij.js";
-export { e as SChatInput, e as default };
+import { toSxArray as e } from "../utils/sx.js";
+import { tint as t } from "../theme/utils.js";
+import { SIconButton as n } from "../s-icon-button/s-icon-button.js";
+import { STextField as r } from "../s-text-field/s-text-field.js";
+import { SFileIcon as i } from "../s-file-icon/s-file-icon.js";
+import { forwardRef as a, useEffect as ee, useRef as o, useState as s } from "react";
+import { Fragment as te, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { AccessTime as u, ArrowUpward as ne, AttachFile as re, Close as d, EmojiEmotions as f, EmojiEvents as p, EmojiFlags as m, EmojiFoodBeverage as h, EmojiNature as g, EmojiObjects as _, EmojiSymbols as v, EmojiTransportation as y } from "@mui/icons-material";
+import { Box as b, ClickAwayListener as ie, Popper as x, Typography as S, outlinedInputClasses as C, styled as w, useThemeProps as ae } from "@mui/material";
+import { mergeSlotProps as oe, useControlled as se, useForkRef as ce } from "@mui/material/utils";
+import le from "@mui/utils/appendOwnerState";
+import ue, { Categories as T } from "emoji-picker-react";
+//#region lib/s-chat-input/s-chat-input.tsx
+var de = {
+	[T.SUGGESTED]: /* @__PURE__ */ c(u, {}),
+	[T.SMILEYS_PEOPLE]: /* @__PURE__ */ c(f, {}),
+	[T.ANIMALS_NATURE]: /* @__PURE__ */ c(g, {}),
+	[T.FOOD_DRINK]: /* @__PURE__ */ c(h, {}),
+	[T.TRAVEL_PLACES]: /* @__PURE__ */ c(y, {}),
+	[T.ACTIVITIES]: /* @__PURE__ */ c(p, {}),
+	[T.OBJECTS]: /* @__PURE__ */ c(_, {}),
+	[T.SYMBOLS]: /* @__PURE__ */ c(v, {}),
+	[T.FLAGS]: /* @__PURE__ */ c(m, {})
+}, E = "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path d=\"M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z\"/></svg>')", fe = w(b, {
+	name: "SChatInput",
+	slot: "Root"
+})({});
+function pe(e, t) {
+	return typeof e == "function" ? e(t) : e;
+}
+var D = a((a, u) => {
+	let p = ae({
+		props: a,
+		name: "SChatInput"
+	}), { onSubmit: m, onFileSelect: h, disabled: g = !1, acceptedFileTypes: _, maxFileSize: v, hideEmojiPicker: y, hideFileAttachment: w, value: T, defaultValue: D = "", onChange: O, onKeyDown: me, inputRef: k, placeholder: A = "Enter your message here...", slotProps: j, slots: M, sx: N, attachFileLabel: P = "Attach files", emojiPickerLabel: F = "Choose emoji", submitLabel: I = "Send message", ...L } = p, [R, z] = se({
+		controlled: T,
+		default: D,
+		name: "SChatInput",
+		state: "value"
+	}), [B, V] = s([]), [he, H] = s(/* @__PURE__ */ new Map()), U = o(/* @__PURE__ */ new Map()), W = o(null), [G, K] = s(!1), [ge, q] = s(null), J = {
+		...p,
+		disabled: g,
+		emojiPickerOpen: G,
+		hasFiles: B.length > 0
+	}, _e = M?.input ?? r, ve = pe(j?.input, J), { inputRef: ye, onChange: be, onKeyDown: xe, slotProps: Y, ...Se } = le(M?.input, ve ?? {}, J), Ce = ce(k, ye), X = (e) => e.type.startsWith("image/"), we = (e) => he.get(e) ?? "", Te = (e) => {
+		if (be?.(e), e.defaultPrevented) return;
+		let t = e.target.value;
+		z(t), O?.(e, t, "input");
+	}, Z = (e, t) => {
+		let n = `${R}${e.emoji}`;
+		z(n), O?.(t, n, "emoji"), K(!1), q(null);
+	}, Ee = (e) => {
+		q(e.currentTarget), K(!G);
+	}, Q = (e) => {
+		g || R.trim().length === 0 && B.length === 0 || (m?.(e, R, B), !e.defaultPrevented && (e.preventDefault(), z(""), O?.(e, "", "clear"), U.current.forEach((e) => URL.revokeObjectURL(e)), U.current = /* @__PURE__ */ new Map(), H(/* @__PURE__ */ new Map()), V([])));
+	}, De = (e) => {
+		let t = Array.from(e.target.files ?? []).filter((e) => !(v && e.size > v)), n = new Map(U.current);
+		t.forEach((e) => {
+			X(e) && n.set(e, URL.createObjectURL(e));
+		}), U.current = n, H(n), V((e) => [...e, ...t]), h?.(t), e.target.value = "";
+	}, $ = (e) => {
+		let t = B[e];
+		if (t && X(t)) {
+			let e = U.current.get(t);
+			if (e) {
+				URL.revokeObjectURL(e);
+				let n = new Map(U.current);
+				n.delete(t), U.current = n, H(n);
+			}
+		}
+		V((t) => t.filter((t, n) => n !== e));
+	}, Oe = (e) => {
+		xe?.(e), me?.(e), !e.defaultPrevented && e.key === "Enter" && !e.shiftKey && (Q(e), e.preventDefault());
+	};
+	return ee(() => () => {
+		U.current.forEach((e) => URL.revokeObjectURL(e)), U.current.clear();
+	}, []), /* @__PURE__ */ l(fe, {
+		...L,
+		ownerState: J,
+		ref: u,
+		sx: [(e) => ({
+			border: "1px solid",
+			borderColor: "divider",
+			borderRadius: 1,
+			padding: "8px 12px",
+			transition: "border 120ms ease-in",
+			"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
+			"&:focus-within": {
+				outline: `3px solid ${t((e.vars ?? e).palette.primary[500], 50)}`,
+				borderColor: (e.vars ?? e).palette.primary[400]
+			},
+			...g && {
+				opacity: .5,
+				pointerEvents: "none"
+			}
+		}), ...e(N)],
+		children: [
+			/* @__PURE__ */ c(_e, {
+				...Se,
+				placeholder: A,
+				disabled: g,
+				value: R,
+				onChange: Te,
+				onKeyDown: Oe,
+				fullWidth: !0,
+				multiline: !0,
+				minRows: 1,
+				maxRows: 10,
+				variant: "outlined",
+				inputRef: Ce,
+				slotProps: {
+					...Y,
+					input: oe(Y?.input, { sx: {
+						height: "100%",
+						backgroundColor: "transparent",
+						border: "none",
+						padding: 0,
+						[`&.${C.focused}`]: { outline: "none" },
+						"& fieldset": { border: "none" },
+						"&:hover fieldset": { border: "none" },
+						"&.Mui-focused fieldset": { border: "none" }
+					} })
+				}
+			}),
+			B.length > 0 && /* @__PURE__ */ c(b, {
+				sx: {
+					display: "flex",
+					flexWrap: "wrap",
+					gap: 1,
+					mt: 1
+				},
+				children: B.map((e, t) => {
+					let r = X(e), a = e.name.split(".").pop();
+					return r ? /* @__PURE__ */ l(b, {
+						sx: {
+							flex: "0 0 auto",
+							height: 72,
+							position: "relative",
+							width: 72
+						},
+						children: [/* @__PURE__ */ c(b, {
+							component: "img",
+							src: we(e),
+							alt: e.name,
+							sx: {
+								borderRadius: 1,
+								display: "block",
+								height: "100%",
+								objectFit: "cover",
+								width: "100%"
+							}
+						}), /* @__PURE__ */ c(n, {
+							"aria-label": `Remove ${e.name}`,
+							onClick: () => $(t),
+							size: "small",
+							variant: "overlay",
+							sx: {
+								position: "absolute",
+								right: 4,
+								top: 4
+							},
+							children: /* @__PURE__ */ c(d, { fontSize: "small" })
+						})]
+					}, `${e.name}-${t}`) : /* @__PURE__ */ l(b, {
+						sx: {
+							alignItems: "center",
+							bgcolor: "background.paper",
+							border: "1px solid",
+							borderColor: "divider",
+							borderRadius: 1,
+							display: "flex",
+							justifyContent: "space-between",
+							p: 1,
+							width: "100%"
+						},
+						children: [/* @__PURE__ */ l(b, {
+							sx: {
+								display: "flex",
+								alignItems: "center",
+								gap: 1
+							},
+							children: [/* @__PURE__ */ c(i, { extension: a }), /* @__PURE__ */ l(b, {
+								sx: {
+									display: "flex",
+									flexDirection: "row",
+									alignItems: "center",
+									gap: 1
+								},
+								children: [/* @__PURE__ */ c(S, {
+									variant: "subtitle2",
+									sx: {
+										textOverflow: "ellipsis",
+										overflow: "hidden",
+										whiteSpace: "nowrap"
+									},
+									children: e.name
+								}), /* @__PURE__ */ c("div", { children: /* @__PURE__ */ l(S, {
+									variant: "caption",
+									children: [
+										"(",
+										Math.round(e.size / 1024),
+										" KB)"
+									]
+								}) })]
+							})]
+						}), /* @__PURE__ */ c(n, {
+							"aria-label": `Remove ${e.name}`,
+							onClick: () => $(t),
+							sx: {
+								minWidth: "auto",
+								p: .5
+							},
+							children: /* @__PURE__ */ c(d, {})
+						})]
+					}, `${e.name}-${t}`);
+				})
+			}),
+			/* @__PURE__ */ l(b, {
+				sx: {
+					display: "flex",
+					justifyContent: "space-between",
+					alignItems: "center",
+					mt: 1
+				},
+				children: [/* @__PURE__ */ l(b, {
+					sx: {
+						display: "flex",
+						gap: 1
+					},
+					children: [!w && /* @__PURE__ */ l(te, { children: [/* @__PURE__ */ c("input", {
+						ref: W,
+						type: "file",
+						multiple: !0,
+						accept: _,
+						onChange: De,
+						style: { display: "none" },
+						disabled: g
+					}), /* @__PURE__ */ c(n, {
+						"aria-label": P,
+						disabled: g,
+						onClick: () => W.current?.click(),
+						children: /* @__PURE__ */ c(re, {})
+					})] }), !y && /* @__PURE__ */ c(n, {
+						"aria-label": F,
+						onClick: Ee,
+						disabled: g,
+						children: /* @__PURE__ */ c(f, {})
+					})]
+				}), /* @__PURE__ */ c(n, {
+					"aria-label": I,
+					onClick: Q,
+					disabled: g,
+					children: /* @__PURE__ */ c(ne, {})
+				})]
+			}),
+			/* @__PURE__ */ c(x, {
+				open: G,
+				anchorEl: ge,
+				placement: "top-start",
+				sx: { zIndex: 1300 },
+				children: /* @__PURE__ */ c(ie, {
+					onClickAway: () => {
+						K(!1), q(null);
+					},
+					children: /* @__PURE__ */ c(b, {
+						sx: (e) => ({
+							border: "1px solid",
+							borderColor: "divider",
+							borderRadius: 1,
+							overflow: "hidden",
+							"& .epr-main": {
+								backgroundColor: "background.paper",
+								border: "none"
+							},
+							"& .epr-main, & .epr-main *": { fontFamily: e.typography.fontFamily },
+							"& .epr-header": { backgroundColor: "background.paper" },
+							"& .epr-search-container": { backgroundColor: "background.paper" },
+							"& .epr-search-container > .epr-icn-search": { display: "none" },
+							"& .epr-icn-clear-search": {
+								backgroundImage: "none",
+								backgroundColor: "action.active",
+								WebkitMaskImage: E,
+								maskImage: E,
+								WebkitMaskRepeat: "no-repeat",
+								maskRepeat: "no-repeat",
+								WebkitMaskPosition: "center",
+								maskPosition: "center",
+								WebkitMaskSize: "0.875rem",
+								maskSize: "0.875rem"
+							},
+							"& .epr-btn-clear-search": {
+								height: 24,
+								width: 24,
+								"&:hover, &:focus": { backgroundColor: "action.hover" }
+							},
+							"& .epr-search-container > input": {
+								boxSizing: "border-box",
+								minHeight: 40,
+								backgroundColor: "background.default",
+								border: "1px solid",
+								borderColor: "divider",
+								borderRadius: 1,
+								color: "text.primary",
+								fontFamily: "inherit",
+								fontSize: e.typography.body1.fontSize,
+								padding: "8px 12px",
+								transition: "border 120ms ease-in",
+								"&:hover": { borderColor: (e.vars ?? e).palette.grey[500] },
+								"&:focus": {
+									outline: `3px solid ${t((e.vars ?? e).palette.primary[500], 50)}`,
+									borderColor: (e.vars ?? e).palette.primary[400]
+								},
+								"&::placeholder": { color: "text.secondary" }
+							},
+							"& .epr-category-nav": {
+								backgroundColor: "background.paper",
+								borderBottom: "1px solid",
+								borderColor: "divider",
+								padding: "0px 8px 8px 8px"
+							},
+							"& .epr-cat-btn": {
+								backgroundColor: "transparent !important",
+								border: "none",
+								transition: e.transitions.create("background-color", { duration: e.transitions.duration.shorter })
+							},
+							"& .epr-cat-btn:focus::before": { display: "none" },
+							"& .epr-cat-btn:focus-visible": {
+								borderRadius: 1,
+								outline: "2px solid",
+								outlineColor: "primary.main",
+								outlineOffset: 2
+							},
+							"& .epr-cat-btn-custom-icon svg": {
+								color: "text.secondary",
+								transition: e.transitions.create("color", { duration: e.transitions.duration.shorter })
+							},
+							"& .epr-cat-btn-custom-icon.epr-active svg": { color: (e.vars ?? e).palette.primary[500] },
+							"& .epr-body": { backgroundColor: "background.paper" },
+							"& .epr-emoji-category-label": {
+								backgroundColor: "background.paper",
+								color: "text.primary",
+								fontSize: e.typography.caption.fontSize,
+								fontWeight: 600,
+								padding: "8px 16px 4px",
+								textTransform: "uppercase",
+								letterSpacing: "0.5px"
+							},
+							"& .epr-emoji-list": { backgroundColor: "background.paper" },
+							"& .epr-emoji": {
+								borderRadius: 1,
+								margin: "2px",
+								transition: e.transitions.create("background-color", { duration: e.transitions.duration.shorter }),
+								"&:focus-visible": {
+									outline: "2px solid",
+									outlineColor: "primary.main",
+									outlineOffset: 1
+								}
+							},
+							"& .epr-skin-tones": {
+								backgroundColor: "background.paper",
+								border: "1px solid",
+								borderColor: "divider",
+								borderRadius: 1,
+								display: "none"
+							},
+							"& .epr-tone": {
+								border: "none",
+								borderRadius: 1,
+								transition: e.transitions.create("background-color", { duration: e.transitions.duration.shorter }),
+								"&:focus-visible": {
+									outline: "2px solid",
+									outlineColor: "primary.main",
+									outlineOffset: 1
+								}
+							},
+							"@media (hover: hover) and (pointer: fine)": {
+								"& .epr-cat-btn-custom-icon:hover svg": { color: "text.primary" },
+								"& .epr-emoji:hover, & .epr-tone:hover": { backgroundColor: "action.hover" }
+							}
+						}),
+						children: /* @__PURE__ */ c(ue, {
+							onEmojiClick: Z,
+							width: 300,
+							height: 400,
+							searchDisabled: !1,
+							skinTonesDisabled: !1,
+							previewConfig: { showPreview: !1 },
+							categoryIcons: de
+						})
+					})
+				})
+			})
+		]
+	});
+});
+D.displayName = "SChatInput";
+//#endregion
+export { D as SChatInput, D as default };

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

@@ -1,2 +1,3 @@
 export { default, default as SChatMessage } from './s-chat-message';
-export type { SChatMessageProps, ChatAttachment } from './s-chat-message';
+export type { ChatAttachment, SChatMessageOwnerState, SChatMessageProps } from './s-chat-message';
+export type {} from '../theme/component-augmentation';

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

@@ -1,2 +1,2 @@
-import { t as e } from "../s-chat-message-C-d9amiC.js";
+import { SChatMessage as e } from "./s-chat-message.js";
 export { e as SChatMessage, e as default };

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

@@ -12,9 +12,9 @@ export interface ChatAttachment {
 /**
  * Props interface for SChatMessage component
  */
-export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
+export interface SChatMessageProps extends Omit<BoxProps, 'children' | 'component'> {
     /** The message content to display in the chat bubble */
-    message?: string;
+    children?: React.ReactNode;
     /** The message variant controlling alignment and styling */
     variant?: 'sent' | 'received';
     /** The timestamp for the message, displayed when showTimestamp is true */
@@ -44,5 +44,8 @@ export interface SChatMessageProps extends Omit<BoxProps, 'children'> {
     /** Whether to show skeleton loading state instead of content */
     loading?: boolean;
 }
-export declare const SChatMessage: React.FC<SChatMessageProps>;
+export type SChatMessageOwnerState = SChatMessageProps & {
+    isSent: boolean;
+};
+export declare const SChatMessage: React.ForwardRefExoticComponent<Omit<SChatMessageProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export default SChatMessage;