@layers-app/shared 0.4.3 → 0.4.5

package/dist/components/Chat/CallMessage/index.js

@@ -0,0 +1,49 @@
+import { jsxs as v, jsx as r } from "react/jsx-runtime";
+import w from "react";
+import { ArrowUpRight01Icon as y, ArrowDownLeft01Icon as O, Video01Icon as b, CallOutgoing04Icon as x, CallIncoming04Icon as A, Calling02Icon as D, CallRinging03Icon as R } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as u } from "@hugeicons/react";
+import n from "./CallMessage.module.css.js";
+const z = w.memo(function({
+  variant: m,
+  outgoing: i,
+  callType: M = "audio",
+  mode: $ = "dm",
+  duration: s,
+  time: a,
+  participantCount: f = 0,
+  className: h,
+  style: V
+}) {
+  const I = m === "active", o = m === "missed", d = m === "declined", c = M === "video", t = $ === "dm", C = i;
+  let g;
+  t ? g = c ? b : i ? x : A : g = I ? D : R;
+  let e;
+  t ? o ? e = c ? "Missed Video Call" : "Missed Call" : d ? e = c ? "Canceled Video Call" : "Canceled Call" : i ? e = c ? "Outgoing Video Call" : "Outgoing Call" : e = c ? "Incoming Video Call" : "Incoming Call" : I ? e = i ? "You started the call" : "Started a call" : o ? e = "Missed call" : e = "Call ended";
+  const l = [], p = t ? i ? y : O : null;
+  t ? a && s ? l.push(`${a}, ${s}`) : a ? l.push(a) : s && l.push(s) : (s && l.push(s), f > 0 && l.push(`${f} person${f > 1 ? "s" : ""} joined`));
+  const N = C ? "var(--mantine-color-white)" : void 0, j = o || d ? "var(--mantine-color-red-6)" : "var(--mantine-color-green-6)";
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      className: `${n.root}${h ? ` ${h}` : ""}`,
+      style: V,
+      "data-outgoing": C || void 0,
+      "data-missed": o || d || void 0,
+      "data-testid": "call-message",
+      children: [
+        /* @__PURE__ */ r("div", { className: n.icon, children: /* @__PURE__ */ r(u, { icon: g, size: 24, color: N || (o || d ? "var(--mantine-color-red-6)" : void 0) }) }),
+        /* @__PURE__ */ v("div", { className: n.body, children: [
+          /* @__PURE__ */ r("div", { className: n.title, children: e }),
+          l.length > 0 && /* @__PURE__ */ v("div", { className: n.meta, style: { color: C ? void 0 : j }, children: [
+            p && /* @__PURE__ */ r(u, { icon: p, size: 14 }),
+            l.join(" • ")
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+z.displayName = "CallMessage";
+export {
+  z as CallMessage
+};

package/dist/components/Chat/ChatBubble/ChatBubble.module.css.js

@@ -0,0 +1,9 @@
+const b = "_root_1escb_1", o = "_bubble_1escb_27", t = {
+  root: b,
+  bubble: o
+};
+export {
+  o as bubble,
+  t as default,
+  b as root
+};

package/dist/components/Chat/ChatBubble/index.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export type ChatBubbleGroupPosition = 'single' | 'first' | 'middle' | 'last';
+export interface ChatBubbleProps {
+    outgoing?: boolean;
+    fullWidth?: boolean;
+    groupPosition?: ChatBubbleGroupPosition;
+    selected?: boolean;
+    highlighted?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare const ChatBubble: React.NamedExoticComponent<ChatBubbleProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/ChatBubble/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatBubble/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,uBAAuB,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;AAE7E,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,uBAAuB,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU,6CA0BrB,CAAC"}

package/dist/components/Chat/ChatBubble/index.js

@@ -0,0 +1,32 @@
+import { jsx as t } from "react/jsx-runtime";
+import u from "react";
+import a from "./ChatBubble.module.css.js";
+const m = u.memo(function({
+  outgoing: e,
+  fullWidth: o,
+  groupPosition: d = "single",
+  children: i,
+  selected: l,
+  highlighted: b,
+  className: s,
+  style: r
+}) {
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      className: `${a.root} ${s || ""}`,
+      "data-outgoing": e || void 0,
+      "data-full-width": o || void 0,
+      "data-group-position": d,
+      "data-selected": l || void 0,
+      "data-highlighted": b || void 0,
+      "data-testid": "chat-bubble",
+      style: r,
+      children: /* @__PURE__ */ t("div", { className: a.bubble, "data-testid": "chat-bubble-content", children: i })
+    }
+  );
+});
+m.displayName = "ChatBubble";
+export {
+  m as ChatBubble
+};

package/dist/components/Chat/ChatHeader/ChatHeader.module.css.js

@@ -0,0 +1,17 @@
+const t = "_root_13wo5_1", o = "_info_13wo5_23", e = "_title_13wo5_43", n = "_subtitle_13wo5_61", s = "_selectionBar_13wo5_87", _ = "_selectionCount_13wo5_97", i = {
+  root: t,
+  info: o,
+  title: e,
+  subtitle: n,
+  selectionBar: s,
+  selectionCount: _
+};
+export {
+  i as default,
+  o as info,
+  t as root,
+  s as selectionBar,
+  _ as selectionCount,
+  n as subtitle,
+  e as title
+};

package/dist/components/Chat/ChatHeader/index.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+export interface ChatHeaderProps {
+    /** Chat title */
+    title: string;
+    /** Subtitle: "online", "2 members", etc. */
+    subtitle?: string;
+    /** Avatar image source */
+    avatarSrc?: string;
+    /** Avatar color index 1-7 */
+    avatarColor?: 1 | 2 | 3 | 4 | 5 | 6 | 7;
+    /** Online status (colors subtitle) */
+    online?: boolean;
+    /** Back button handler (mobile) */
+    onBack?: () => void;
+    /** Menu button handler (opens sidebar drawer on mobile) */
+    onMenu?: () => void;
+    /** Search button handler */
+    onSearch?: () => void;
+    /** More button handler */
+    onMore?: () => void;
+    /** Selection mode -- shows action bar instead of normal header */
+    selectionMode?: boolean;
+    /** Number of selected messages */
+    selectedCount?: number;
+    /** Forward selected messages */
+    onForward?: () => void;
+    /** Delete selected messages */
+    onDelete?: () => void;
+    /** Cancel selection mode */
+    onCancelSelection?: () => void;
+    /** Extra action elements */
+    children?: React.ReactNode;
+    /** Custom className */
+    className?: string;
+    /** Custom style */
+    style?: React.CSSProperties;
+}
+export declare function ChatHeader({ title, subtitle, avatarSrc, avatarColor, online, onBack, onMenu, onSearch, onMore, selectionMode, selectedCount, onForward, onDelete, onCancelSelection, children, className, style, }: ChatHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatHeader {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/ChatHeader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatHeader/index.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,eAAe;IAC9B,iBAAiB;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0BAA0B;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,6BAA6B;IAC7B,WAAW,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxC,sCAAsC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,2DAA2D;IAC3D,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,kEAAkE;IAClE,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,kCAAkC;IAClC,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,4BAA4B;IAC5B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,4BAA4B;IAC5B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,uBAAuB;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,SAAS,EACT,WAAe,EACf,MAAM,EACN,MAAM,EACN,MAAM,EACN,QAAQ,EACR,MAAM,EACN,aAAa,EACb,aAAiB,EACjB,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,KAAK,GACN,EAAE,eAAe,2CA8FjB;yBAhHe,UAAU"}

package/dist/components/Chat/ChatHeader/index.js

@@ -0,0 +1,78 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { ActionIcon as r, Group as C, Indicator as x, Avatar as A } from "@mantine/core";
+import { Cancel01Icon as N, Forward01Icon as w, Delete02Icon as H, Menu01Icon as j, ArrowLeft01Icon as F, Search01Icon as G, MoreVerticalIcon as B } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as i } from "@hugeicons/react";
+import { getAvatarColor as D } from "../colors.js";
+import a from "./ChatHeader.module.css.js";
+function E({
+  title: c,
+  subtitle: n,
+  avatarSrc: f,
+  avatarColor: I = 1,
+  online: t,
+  onBack: s,
+  onMenu: d,
+  onSearch: h,
+  onMore: g,
+  selectionMode: k,
+  selectedCount: m = 0,
+  onForward: b,
+  onDelete: u,
+  onCancelSelection: y,
+  children: $,
+  className: l,
+  style: p
+}) {
+  if (k)
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        className: `${a.root} ${a.selectionBar}${l ? ` ${l}` : ""}`,
+        style: p,
+        "data-testid": "chat-header",
+        children: [
+          /* @__PURE__ */ e(r, { variant: "subtle", color: "gray", size: "lg", onClick: y, "aria-label": "Cancel selection", children: /* @__PURE__ */ e(i, { icon: N, size: 24 }) }),
+          /* @__PURE__ */ o("span", { className: a.selectionCount, children: [
+            m,
+            " ",
+            m === 1 ? "message" : "messages"
+          ] }),
+          /* @__PURE__ */ o(C, { gap: 6, children: [
+            b && /* @__PURE__ */ e(r, { variant: "subtle", color: "blue", size: "lg", onClick: b, "aria-label": "Forward", children: /* @__PURE__ */ e(i, { icon: w, size: 20 }) }),
+            u && /* @__PURE__ */ e(r, { variant: "subtle", color: "red", size: "lg", onClick: u, "aria-label": "Delete", children: /* @__PURE__ */ e(i, { icon: H, size: 20 }) })
+          ] })
+        ]
+      }
+    );
+  const v = D(I), z = /* @__PURE__ */ e(
+    A,
+    {
+      src: f,
+      name: c,
+      size: 44,
+      radius: "xl",
+      styles: {
+        root: { "--avatar-bg": v },
+        placeholder: { backgroundColor: v }
+      }
+    }
+  );
+  return /* @__PURE__ */ o("div", { className: `${a.root}${l ? ` ${l}` : ""}`, style: p, "data-testid": "chat-header", children: [
+    d && /* @__PURE__ */ e(r, { variant: "subtle", color: "gray", size: "lg", onClick: d, "aria-label": "Open menu", hiddenFrom: "md", children: /* @__PURE__ */ e(i, { icon: j, size: 24 }) }),
+    s && /* @__PURE__ */ e(r, { variant: "subtle", color: "gray", size: "lg", onClick: s, "aria-label": "Go back", children: /* @__PURE__ */ e(i, { icon: F, size: 24 }) }),
+    t ? /* @__PURE__ */ e(x, { inline: !0, size: 12, offset: 2, position: "bottom-end", color: "green", withBorder: !0, processing: !1, children: z }) : z,
+    /* @__PURE__ */ o("div", { className: a.info, children: [
+      /* @__PURE__ */ e("div", { className: a.title, children: c }),
+      n && /* @__PURE__ */ e("div", { className: a.subtitle, "data-online": t || void 0, children: n })
+    ] }),
+    /* @__PURE__ */ o(C, { gap: 6, children: [
+      $,
+      h && /* @__PURE__ */ e(r, { variant: "subtle", color: "gray", size: "lg", onClick: h, "aria-label": "Search", children: /* @__PURE__ */ e(i, { icon: G, size: 20 }) }),
+      g && /* @__PURE__ */ e(r, { variant: "subtle", color: "gray", size: "lg", onClick: g, "aria-label": "More options", children: /* @__PURE__ */ e(i, { icon: B, size: 20 }) })
+    ] })
+  ] });
+}
+E.displayName = "ChatHeader";
+export {
+  E as ChatHeader
+};

package/dist/components/Chat/ChatInput/ChatInput.module.css.js

@@ -0,0 +1,37 @@
+const t = "_root_6rx8s_1", e = "_inputRow_6rx8s_17", n = "_inputBox_6rx8s_31", r = "_header_6rx8s_49", _ = "_headerIcon_6rx8s_63", a = "_headerBar_6rx8s_83", o = "_headerTitle_6rx8s_111", s = "_headerText_6rx8s_131", c = "_headerAttachment_6rx8s_149", x = "_hiddenFileInput_6rx8s_177", d = "_attachments_6rx8s_195", h = "_inputArea_6rx8s_203", u = "_iconButton_6rx8s_221", i = "_textarea_6rx8s_229", p = "_textareaInput_6rx8s_239", B = "_sendButton_6rx8s_267", I = {
+  root: t,
+  inputRow: e,
+  inputBox: n,
+  header: r,
+  headerIcon: _,
+  headerBar: a,
+  headerTitle: o,
+  headerText: s,
+  headerAttachment: c,
+  hiddenFileInput: x,
+  attachments: d,
+  inputArea: h,
+  iconButton: u,
+  textarea: i,
+  textareaInput: p,
+  sendButton: B
+};
+export {
+  d as attachments,
+  I as default,
+  r as header,
+  c as headerAttachment,
+  a as headerBar,
+  _ as headerIcon,
+  s as headerText,
+  o as headerTitle,
+  x as hiddenFileInput,
+  u as iconButton,
+  h as inputArea,
+  n as inputBox,
+  e as inputRow,
+  t as root,
+  B as sendButton,
+  i as textarea,
+  p as textareaInput
+};

package/dist/components/Chat/ChatInput/index.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+import { CommentComposerTypes } from '../../CommentComposer/types';
+export interface ChatInputReplyTo {
+    senderName: string;
+    text: string;
+    /**
+     * When the replied message has attachments, the host passes the first
+     * attachment's display name + kind. We fall back to it when `text` is
+     * empty (image/video/file-only messages) and prepend a kind-specific icon
+     * — Telegram-style preview.
+     */
+    attachmentName?: string;
+    attachmentKind?: 'image' | 'video' | 'file';
+    onCancel: () => void;
+}
+export interface ChatInputEditing {
+    text: string;
+    onCancel: () => void;
+}
+export interface ChatInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    onSend?: (value: string) => void;
+    onAttach?: (files: File[]) => void;
+    onEmojiSelect?: (emoji: string) => void;
+    placeholder?: string;
+    replyTo?: ChatInputReplyTo;
+    editing?: ChatInputEditing;
+    attachments?: CommentComposerTypes.AnyCommentFile[];
+    onRemoveAttachment?: (index: number) => void;
+    maxLength?: number;
+    disabled?: boolean;
+    /**
+     * Hide the paperclip / file-input affordance. Used by surfaces where uploads
+     * are nonsensical — Instant Meet's in-call chat is ephemeral (data channel,
+     * no persistence), so attaching files there has nowhere to go.
+     */
+    disableAttachments?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ChatInput({ value: controlledValue, onChange, onSend, onAttach, onEmojiSelect, placeholder, replyTo, editing, attachments, onRemoveAttachment, maxLength, disabled, disableAttachments, className, style, }: ChatInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatInput {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/ChatInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatInput/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAgBxE,OAAO,EAAE,oBAAoB,EAAE,MAAM,6BAA6B,CAAC;AAMnE,MAAM,WAAW,gBAAgB;IAC/B,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;IACb;;;;;OAKG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,gBAAgB;IAC/B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,cAAc;IAC7B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACnC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,OAAO,CAAC,EAAE,gBAAgB,CAAC;IAC3B,WAAW,CAAC,EAAE,oBAAoB,CAAC,cAAc,EAAE,CAAC;IACpD,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,SAAS,CAAC,EACxB,KAAK,EAAE,eAAe,EACtB,QAAQ,EACR,MAAM,EACN,QAAQ,EACR,aAAa,EACb,WAAgC,EAChC,OAAO,EACP,OAAO,EACP,WAAW,EACX,kBAAkB,EAClB,SAAS,EACT,QAAQ,EACR,kBAAkB,EAClB,SAAS,EACT,KAAK,GACN,EAAE,cAAc,2CAoQhB;yBApRe,SAAS"}

package/dist/components/Chat/ChatInput/index.js

@@ -0,0 +1,228 @@
+import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { useState as J, useRef as N, useEffect as y, useCallback as m } from "react";
+import { Edit04Icon as M, LinkBackwardIcon as Q, Image01Icon as T, PlayIcon as W, File01Icon as X, SmileIcon as Y, Attachment02Icon as Z, Sent02Icon as _ } from "@hugeicons/core-free-icons";
+import { HugeiconsIcon as l } from "@hugeicons/react";
+import { Box as ee, CloseButton as j, ActionIcon as I, Textarea as ae } from "@mantine/core";
+import { AttachmentsPreview as te } from "../../AttachmentsPreview/AttachmentsPreview.js";
+import { EmojiPicker as ne } from "../../EmojiPicker/EmojiPicker.js";
+import { IconEntity as ie } from "../../ProjectIcon/ProjectIcon.js";
+import t from "./ChatInput.module.css.js";
+function se({
+  value: g,
+  onChange: C,
+  onSend: z,
+  onAttach: k,
+  onEmojiSelect: u,
+  placeholder: K = "Add a message...",
+  replyTo: n,
+  editing: o,
+  attachments: i,
+  onRemoveAttachment: S,
+  maxLength: $,
+  disabled: w,
+  disableAttachments: B,
+  className: D,
+  style: F
+}) {
+  const f = g !== void 0, [H, P] = J(""), c = f ? g : H, h = N(null), v = N(null), b = N(i?.length ?? 0);
+  y(() => {
+    const e = i?.length ?? 0;
+    e > b.current && v.current?.focus(), b.current = e;
+  }, [i?.length]);
+  const R = !!n, A = !!o;
+  y(() => {
+    (R || A) && v.current?.focus();
+  }, [R, A]);
+  const d = m(
+    (e) => {
+      f || P(e), C?.(e);
+    },
+    [f, C]
+  ), p = m(() => {
+    const e = c.trim();
+    (e || i && i.length > 0) && (z?.(e), d(""));
+  }, [c, i, z, d]), V = m(
+    (e) => {
+      e.key === "Enter" && !e.shiftKey && (e.preventDefault(), p());
+    },
+    [p]
+  ), L = m(
+    (e) => {
+      const r = ie.parse(e)?.emoji ?? e;
+      u ? u(r) : d(c + r);
+    },
+    [u, d, c]
+  ), O = m(
+    (e) => {
+      const r = e.target.files;
+      r && r.length > 0 && k?.(Array.from(r)), h.current && (h.current.value = "");
+    },
+    [k]
+  ), U = c.trim().length > 0, x = i && i.length > 0, E = x && i.some((e) => "isTemp" in e && e.isTemp), q = U || x && !E, G = !!(o || n);
+  return /* @__PURE__ */ s(
+    ee,
+    {
+      className: `${t.root} ${D || ""}`,
+      style: F,
+      "data-testid": "chat-input",
+      px: "md",
+      pb: "md",
+      children: [
+        !B && /* @__PURE__ */ a(
+          "input",
+          {
+            ref: h,
+            type: "file",
+            multiple: !0,
+            accept: "*/*",
+            className: t.hiddenFileInput,
+            onChange: O,
+            tabIndex: -1
+          }
+        ),
+        /* @__PURE__ */ s("div", { className: t.inputRow, children: [
+          /* @__PURE__ */ s(
+            "div",
+            {
+              className: `${t.inputBox} ${G ? t.withHeader : ""}`,
+              children: [
+                o ? /* @__PURE__ */ s("div", { className: t.header, children: [
+                  /* @__PURE__ */ a("div", { className: t.headerIcon, children: /* @__PURE__ */ a(l, { icon: M, size: 20 }) }),
+                  /* @__PURE__ */ s("div", { className: t.headerBar, "data-variant": "edit", children: [
+                    /* @__PURE__ */ a("div", { className: t.headerTitle, "data-variant": "edit", children: "Edit" }),
+                    /* @__PURE__ */ a("div", { className: t.headerText, children: o.text })
+                  ] }),
+                  /* @__PURE__ */ a(
+                    j,
+                    {
+                      size: "sm",
+                      onClick: o.onCancel,
+                      "aria-label": "Close"
+                    }
+                  )
+                ] }) : n ? /* @__PURE__ */ s("div", { className: t.header, children: [
+                  /* @__PURE__ */ a("div", { className: t.headerIcon, children: /* @__PURE__ */ a(l, { icon: Q, size: 20 }) }),
+                  /* @__PURE__ */ s("div", { className: t.headerBar, "data-variant": "reply", children: [
+                    /* @__PURE__ */ a("div", { className: t.headerTitle, "data-variant": "reply", children: n.senderName }),
+                    /* @__PURE__ */ a("div", { className: t.headerText, children: (() => {
+                      if (n.text && n.text.trim().length > 0) return n.text;
+                      if (n.attachmentName) {
+                        const r = n.attachmentKind === "image" ? T : n.attachmentKind === "video" ? W : X;
+                        return /* @__PURE__ */ s("span", { className: t.headerAttachment, children: [
+                          /* @__PURE__ */ a(l, { icon: r, size: 14 }),
+                          /* @__PURE__ */ a("span", { children: n.attachmentName })
+                        ] });
+                      }
+                      return "";
+                    })() })
+                  ] }),
+                  /* @__PURE__ */ a(
+                    j,
+                    {
+                      size: "sm",
+                      onClick: n.onCancel,
+                      "aria-label": "Close"
+                    }
+                  )
+                ] }) : null,
+                x && /* @__PURE__ */ a("div", { className: t.attachments, children: /* @__PURE__ */ a(
+                  te,
+                  {
+                    files: i,
+                    mode: "draft",
+                    onRemove: S
+                  }
+                ) }),
+                /* @__PURE__ */ s("div", { className: t.inputArea, children: [
+                  /* @__PURE__ */ a(
+                    ne,
+                    {
+                      onChange: L,
+                      showIcons: !1,
+                      showRemoveButton: !1,
+                      position: "top-start",
+                      closeOnSelect: !1,
+                      children: /* @__PURE__ */ a(
+                        I,
+                        {
+                          variant: "subtle",
+                          radius: "xl",
+                          size: 34,
+                          color: "gray",
+                          className: t.iconButton,
+                          "aria-label": "Emoji",
+                          children: /* @__PURE__ */ a(l, { icon: Y, size: 24 })
+                        }
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ a(
+                    ae,
+                    {
+                      ref: v,
+                      classNames: {
+                        root: t.textarea,
+                        input: t.textareaInput
+                      },
+                      w: "100%",
+                      flex: 1,
+                      value: c,
+                      onChange: (e) => d(e.currentTarget.value),
+                      onKeyDown: V,
+                      placeholder: K,
+                      autosize: !0,
+                      minRows: 1,
+                      maxRows: 6,
+                      disabled: w,
+                      variant: "unstyled",
+                      maxLength: $
+                    }
+                  ),
+                  !B && /* @__PURE__ */ a(
+                    I,
+                    {
+                      variant: "subtle",
+                      radius: "xl",
+                      size: 34,
+                      color: "gray",
+                      className: t.iconButton,
+                      "aria-label": "Attach file",
+                      onClick: () => h.current?.click(),
+                      children: /* @__PURE__ */ a(
+                        l,
+                        {
+                          icon: Z,
+                          size: 24,
+                          style: { transform: "rotate(30deg)" }
+                        }
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ a(
+            I,
+            {
+              className: t.sendButton,
+              variant: "filled",
+              color: "indigo",
+              radius: 12,
+              size: 50,
+              onClick: p,
+              disabled: w || !q,
+              loading: E,
+              "aria-label": "Send message",
+              children: /* @__PURE__ */ a(l, { icon: _, size: 24 })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+se.displayName = "ChatInput";
+export {
+  se as ChatInput
+};

package/dist/components/Chat/ChatLayout/ChatLayout.module.css.js

@@ -0,0 +1,15 @@
+const o = "_root_uj82d_1", d = "_sidebar_uj82d_23", t = "_chat_uj82d_45", _ = "_info_uj82d_67", r = "_drawerBody_uj82d_87", s = {
+  root: o,
+  sidebar: d,
+  chat: t,
+  info: _,
+  drawerBody: r
+};
+export {
+  t as chat,
+  s as default,
+  r as drawerBody,
+  _ as info,
+  o as root,
+  d as sidebar
+};

package/dist/components/Chat/ChatLayout/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export interface ChatLayoutProps {
+    sidebar: React.ReactNode;
+    chat: React.ReactNode;
+    info?: React.ReactNode;
+    showInfo?: boolean;
+    sidebarOpened?: boolean;
+    onSidebarClose?: () => void;
+    maxWidth?: number;
+    className?: string;
+    style?: React.CSSProperties;
+}
+export declare function ChatLayout({ sidebar, chat, info, showInfo, sidebarOpened, onSidebarClose, maxWidth, className, style, }: ChatLayoutProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChatLayout {
+    var displayName: string;
+}
+//# sourceMappingURL=index.d.ts.map

package/dist/components/Chat/ChatLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Chat/ChatLayout/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAED,wBAAgB,UAAU,CAAC,EACzB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,aAAa,EACb,cAAc,EACd,QAAe,EACf,SAAS,EACT,KAAK,GACN,EAAE,eAAe,2CAuBjB;yBAjCe,UAAU"}

package/dist/components/Chat/ChatLayout/index.js

@@ -0,0 +1,43 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { Drawer as h } from "@mantine/core";
+import a from "./ChatLayout.module.css.js";
+function p({
+  sidebar: o,
+  chat: r,
+  info: s,
+  showInfo: i,
+  sidebarOpened: d,
+  onSidebarClose: l,
+  maxWidth: c = 1680,
+  className: t,
+  style: m
+}) {
+  return /* @__PURE__ */ n(
+    "div",
+    {
+      className: `${a.root}${t ? ` ${t}` : ""}`,
+      style: { ...m, "--chat-layout-max-width": `${c}px` },
+      children: [
+        /* @__PURE__ */ e("div", { className: a.sidebar, children: o }),
+        /* @__PURE__ */ e(
+          h,
+          {
+            opened: !!d,
+            onClose: () => l?.(),
+            size: 320,
+            withCloseButton: !1,
+            padding: 0,
+            classNames: { body: a.drawerBody },
+            children: o
+          }
+        ),
+        /* @__PURE__ */ e("div", { className: a.chat, children: r }),
+        i && s && /* @__PURE__ */ e("div", { className: a.info, children: s })
+      ]
+    }
+  );
+}
+p.displayName = "ChatLayout";
+export {
+  p as ChatLayout
+};