@solostylist/ui-kit 2.0.1 → 2.0.2

package/dist/s-category-card/s-category-card.js

@@ -1,9 +1,9 @@
 import { toSxArray as e } from "../utils/sx.js";
-import { SLazyImage as t } from "../s-lazy-image/s-lazy-image.js";
-import * as n from "react";
-import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
-import { ButtonBase as o, Typography as s, styled as c, useThemeProps as l } from "@mui/material";
-import u from "@mui/utils/appendOwnerState";
+import { t } from "../appendOwnerState-CFQTq3pb.js";
+import { SLazyImage as n } from "../s-lazy-image/s-lazy-image.js";
+import * as r from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { ButtonBase as s, Typography as c, styled as l, useThemeProps as u } from "@mui/material";
 //#region lib/s-category-card/s-category-card.tsx
 var d = ({ ownerState: e, theme: t }) => ({
 	borderRadius: t.shape.borderRadius,
@@ -26,13 +26,13 @@ var d = ({ ownerState: e, theme: t }) => ({
 	},
 	...!e.disableHoverEffect && { "@media (hover: hover) and (pointer: fine)": { "&:hover img": { transform: `scale(${e.hoverScale})` } } },
 	"@media (prefers-reduced-motion: reduce)": { "& img": { transition: "none" } }
-}), f = c(o, {
+}), f = l(s, {
 	name: "SCategoryCard",
 	slot: "Root"
-})(d), p = c("div", {
+})(d), p = l("div", {
 	name: "SCategoryCard",
 	slot: "Root"
-})(d), m = c(s, {
+})(d), m = l(c, {
 	name: "SCategoryCard",
 	slot: "Title"
 })(({ ownerState: e, theme: t }) => ({
@@ -58,40 +58,40 @@ function g(e) {
 	let t = { ...e };
 	return delete t.action, delete t.centerRipple, delete t.classes, delete t.disabled, delete t.disableRipple, delete t.disableTouchRipple, delete t.focusRipple, delete t.focusVisibleClassName, delete t.LinkComponent, delete t.nativeButton, delete t.onFocusVisible, delete t.TouchRippleProps, delete t.touchRippleRef, delete t.type, t;
 }
-var _ = n.forwardRef(function(n, o) {
-	let s = l({
-		props: n,
+var _ = r.forwardRef(function(r, s) {
+	let c = u({
+		props: r,
 		name: "SCategoryCard"
-	}), { alt: c = "", disableHoverEffect: d = !1, hoverScale: _ = 1.1, image: v, slotProps: y, slots: b, sx: x, title: S, titleAlignment: C = "center", titlePosition: w = "bottom", ...T } = s, E = {
-		...s,
+	}), { alt: l = "", disableHoverEffect: d = !1, hoverScale: _ = 1.1, image: v, slotProps: y, slots: b, sx: x, title: S, titleAlignment: C = "center", titlePosition: w = "bottom", ...T } = c, E = {
+		...c,
 		disableHoverEffect: d,
 		hoverScale: _,
-		interactive: typeof s.onClick == "function",
+		interactive: typeof c.onClick == "function",
 		titleAlignment: C,
 		titlePosition: w
-	}, D = b?.image ?? t, O = b?.title ?? m, k = h(y?.image, E), A = h(y?.title, E), j = u(b?.image, k ?? {}, E), { sx: M, ...N } = A ?? {}, P = u(O, {
+	}, D = b?.image ?? n, O = b?.title ?? m, k = h(y?.image, E), A = h(y?.title, E), j = t(b?.image, k ?? {}, E), { sx: M, ...N } = A ?? {}, P = t(O, {
 		variant: "body1",
 		...N,
 		sx: e(M)
-	}, E), F = /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(D, {
+	}, E), F = /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(D, {
 		variant: "rectangular",
 		...j,
-		alt: c,
+		alt: l,
 		src: v
-	}), /* @__PURE__ */ i(O, {
+	}), /* @__PURE__ */ a(O, {
 		...P,
 		children: S
 	})] });
-	return E.interactive ? /* @__PURE__ */ i(f, {
+	return E.interactive ? /* @__PURE__ */ a(f, {
 		...T,
 		ownerState: E,
-		ref: o,
+		ref: s,
 		sx: e(x),
 		children: F
-	}) : /* @__PURE__ */ i(p, {
+	}) : /* @__PURE__ */ a(p, {
 		...g(T),
 		ownerState: E,
-		ref: o,
+		ref: s,
 		sx: e(x),
 		children: F
 	});

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

@@ -1,2 +1,2 @@
-import { SChatInput as e } from "./s-chat-input.js";
+import { t as e } from "../s-chat-input-T3gyan60.js";
 export { e as SChatInput, e as default };

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

@@ -1,398 +1,2 @@
-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 };
+import { t as e } from "../s-chat-input-T3gyan60.js";
+export { e as SChatInput, e as default };