@solostylist/ui-kit 1.0.224 → 1.0.226

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

@@ -1,299 +0,0 @@
-import { tint as e } from "./theme/utils.js";
-import { t } from "./createSvgIcon-BdNZIlKS.js";
-import { t as n } from "./ArrowUpward-BMKLosZj.js";
-import { t as r } from "./Close-Bj2HYB9Q.js";
-import { t as i } from "./s-text-field-Ck5QMhYI.js";
-import { SIconButton as a } from "./s-icon-button/s-icon-button.js";
-import { SFileIcon as o } from "./s-file-icon/s-file-icon.js";
-import { forwardRef as s, useEffect as c, useId as l, useState as u } from "react";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { Box as m, ClickAwayListener as h, Popper as g, Typography as _, outlinedInputClasses as v } from "@mui/material";
-import y from "emoji-picker-react";
-//#region ../../node_modules/@mui/icons-material/AttachFile.mjs
-var b = t(/* @__PURE__ */ f("path", { d: "M16.5 6v11.5c0 2.21-1.79 4-4 4s-4-1.79-4-4V5c0-1.38 1.12-2.5 2.5-2.5s2.5 1.12 2.5 2.5v10.5c0 .55-.45 1-1 1s-1-.45-1-1V6H10v9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5V5c0-2.21-1.79-4-4-4S7 2.79 7 5v12.5c0 3.04 2.46 5.5 5.5 5.5s5.5-2.46 5.5-5.5V6z" }), "AttachFile"), x = t(/* @__PURE__ */ f("path", { d: "M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2M8.5 8c.83 0 1.5.67 1.5 1.5S9.33 11 8.5 11 7 10.33 7 9.5 7.67 8 8.5 8M12 18c-2.28 0-4.22-1.66-5-4h10c-.78 2.34-2.72 4-5 4m3.5-7c-.83 0-1.5-.67-1.5-1.5S14.67 8 15.5 8s1.5.67 1.5 1.5-.67 1.5-1.5 1.5" }), "EmojiEmotions"), S = s(({ onSubmit: t, onFileSelect: s, disabled: S, acceptedFileTypes: C, maxFileSize: w, hideEmojiPicker: T, hideFileAttachment: E, ...D }, O) => {
-	let [k, A] = u(""), [j, M] = u([]), [N, P] = u(/* @__PURE__ */ new Map()), [F, I] = u(!1), [L, R] = u(null), z = l(), B = (e) => e.type.startsWith("image/"), V = (e) => {
-		let t = `${e.name}-${e.size}-${e.lastModified}`;
-		if (N.has(t)) return N.get(t);
-		if (B(e)) {
-			let n = URL.createObjectURL(e);
-			return P((e) => new Map(e).set(t, n)), n;
-		}
-		return "";
-	}, H = (e) => {
-		A(e.target.value);
-	}, U = (e) => {
-		A((t) => t + e.emoji), I(!1), R(null);
-	}, W = (e) => {
-		R(e.currentTarget), I(!F);
-	}, G = () => {
-		S || k.trim().length === 0 && j.length === 0 || (t?.(k, j), A(""), N.forEach((e) => URL.revokeObjectURL(e)), P(/* @__PURE__ */ new Map()), M([]));
-	}, K = (e) => {
-		let t = Array.from(e.target.files ?? []).filter((e) => !(w && e.size > w));
-		M((e) => [...e, ...t]), s?.(t), e.target.value = "";
-	}, q = (e) => {
-		let t = j[e];
-		if (t && B(t)) {
-			let e = `${t.name}-${t.size}-${t.lastModified}`, n = N.get(e);
-			n && (URL.revokeObjectURL(n), P((t) => {
-				let n = new Map(t);
-				return n.delete(e), n;
-			}));
-		}
-		M((t) => t.filter((t, n) => n !== e));
-	};
-	return c(() => () => {
-		N.forEach((e) => URL.revokeObjectURL(e));
-	}, [N]), /* @__PURE__ */ p(m, {
-		sx: (t) => ({
-			border: "1px solid",
-			borderColor: "divider",
-			borderRadius: 2,
-			padding: "8px 12px",
-			transition: "border 120ms ease-in",
-			"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
-			"&:focus-within": {
-				outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
-				borderColor: (t.vars ?? t).palette.primary[400]
-			},
-			...S && {
-				opacity: .5,
-				pointerEvents: "none"
-			}
-		}),
-		children: [
-			/* @__PURE__ */ f(i, {
-				placeholder: "Enter your message here...",
-				disabled: S,
-				value: k,
-				onChange: H,
-				onKeyDown: (e) => {
-					e.key === "Enter" && !e.shiftKey && (e.preventDefault(), G());
-				},
-				multiline: !0,
-				minRows: 1,
-				maxRows: 10,
-				variant: "outlined",
-				inputRef: O,
-				slotProps: { input: { sx: {
-					height: "100%",
-					backgroundColor: "transparent",
-					border: "none",
-					padding: 0,
-					[`&.${v.focused}`]: { outline: "none" },
-					"& fieldset": { border: "none" },
-					"&:hover fieldset": { border: "none" },
-					"&.Mui-focused fieldset": { border: "none" }
-				} } },
-				...D
-			}),
-			j.length > 0 && /* @__PURE__ */ f(m, {
-				sx: { mt: 1 },
-				children: j.map((e, t) => {
-					let n = B(e), i = e.name.split(".").pop();
-					return /* @__PURE__ */ p(m, {
-						sx: {
-							display: "flex",
-							alignItems: "center",
-							justifyContent: "space-between",
-							bgcolor: "background.paper",
-							border: "1px solid",
-							borderColor: "divider",
-							borderRadius: 1,
-							p: 1,
-							mb: .5
-						},
-						children: [/* @__PURE__ */ p(m, {
-							sx: {
-								display: "flex",
-								alignItems: "center",
-								gap: 1
-							},
-							children: [n ? /* @__PURE__ */ f(m, {
-								component: "img",
-								src: V(e),
-								alt: e.name,
-								sx: {
-									width: 40,
-									height: 40,
-									borderRadius: 1,
-									objectFit: "cover",
-									border: "1px solid",
-									borderColor: "divider"
-								}
-							}) : /* @__PURE__ */ f(o, { extension: i }), /* @__PURE__ */ p(m, {
-								sx: {
-									display: "flex",
-									flexDirection: "row",
-									alignItems: "center",
-									gap: 1
-								},
-								children: [/* @__PURE__ */ f(_, {
-									variant: "subtitle2",
-									sx: {
-										textOverflow: "ellipsis",
-										overflow: "hidden",
-										whiteSpace: "nowrap"
-									},
-									children: e.name
-								}), /* @__PURE__ */ f("div", { children: /* @__PURE__ */ p(_, {
-									variant: "caption",
-									children: [
-										"(",
-										Math.round(e.size / 1024),
-										" KB)"
-									]
-								}) })]
-							})]
-						}), /* @__PURE__ */ f(a, {
-							onClick: () => q(t),
-							sx: {
-								minWidth: "auto",
-								p: .5
-							},
-							children: /* @__PURE__ */ f(r, {})
-						})]
-					}, `${e.name}-${t}`);
-				})
-			}),
-			/* @__PURE__ */ p(m, {
-				sx: {
-					display: "flex",
-					justifyContent: "space-between",
-					alignItems: "center",
-					mt: 1
-				},
-				children: [/* @__PURE__ */ p(m, {
-					sx: {
-						display: "flex",
-						gap: 1
-					},
-					children: [!E && /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f("input", {
-						type: "file",
-						multiple: !0,
-						accept: C,
-						onChange: K,
-						style: { display: "none" },
-						id: `file-attachment-input-${z}`,
-						disabled: S
-					}), /* @__PURE__ */ f("label", {
-						htmlFor: `file-attachment-input-${z}`,
-						children: /* @__PURE__ */ f(a, {
-							component: "span",
-							disabled: S,
-							children: /* @__PURE__ */ f(b, {})
-						})
-					})] }), !T && /* @__PURE__ */ f(a, {
-						onClick: W,
-						disabled: S,
-						children: /* @__PURE__ */ f(x, {})
-					})]
-				}), /* @__PURE__ */ f(a, {
-					onClick: G,
-					disabled: S,
-					children: /* @__PURE__ */ f(n, {})
-				})]
-			}),
-			/* @__PURE__ */ f(g, {
-				open: F,
-				anchorEl: L,
-				placement: "top-start",
-				sx: { zIndex: 1300 },
-				children: /* @__PURE__ */ f(h, {
-					onClickAway: () => {
-						I(!1), R(null);
-					},
-					children: /* @__PURE__ */ f(m, {
-						sx: (t) => ({
-							border: "1px solid",
-							borderColor: "divider",
-							borderRadius: 1,
-							overflow: "hidden",
-							"& .epr-main": {
-								backgroundColor: "background.paper",
-								border: "none"
-							},
-							"& .epr-header": { backgroundColor: "background.paper" },
-							"& .epr-search-container": { backgroundColor: "background.paper" },
-							"& .epr-search-container > .epr-icn-search": { display: "none" },
-							"& .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: "1rem",
-								padding: "8px 12px",
-								transition: "border 120ms ease-in",
-								"&:hover": { borderColor: (t.vars ?? t).palette.grey[500] },
-								"&:focus": {
-									outline: `3px solid ${e((t.vars ?? t).palette.primary[500], 50)}`,
-									borderColor: (t.vars ?? t).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: "all 0.2s ease"
-							},
-							"& .epr-body": { backgroundColor: "background.paper" },
-							"& .epr-emoji-category-label": {
-								backgroundColor: "background.paper",
-								color: "text.primary",
-								fontSize: 12,
-								fontWeight: 600,
-								padding: "8px 16px 4px",
-								textTransform: "uppercase",
-								letterSpacing: "0.5px"
-							},
-							"& .epr-emoji-list": { backgroundColor: "background.paper" },
-							"& .epr-emoji": {
-								borderRadius: 1,
-								margin: "2px",
-								transition: "all 0.2s ease",
-								"&:hover": {
-									backgroundColor: "action.hover",
-									transform: "scale(1.1)"
-								},
-								"&:active": { transform: "scale(0.95)" }
-							},
-							"& .epr-skin-tones": {
-								backgroundColor: "background.paper",
-								border: "1px solid",
-								borderColor: "divider",
-								borderRadius: 1,
-								display: "none"
-							},
-							"& .epr-tone": {
-								border: "none",
-								borderRadius: 1,
-								transition: "all 0.2s ease",
-								"&:hover": { transform: "scale(1.1)" }
-							}
-						}),
-						children: /* @__PURE__ */ f(y, {
-							onEmojiClick: U,
-							width: 300,
-							height: 400,
-							searchDisabled: !1,
-							skinTonesDisabled: !1,
-							previewConfig: { showPreview: !1 }
-						})
-					})
-				})
-			})
-		]
-	});
-});
-S.displayName = "SChatInput";
-//#endregion
-export { S as t };