@bubble-design-system/ui 1.1.0 → 1.2.0

package/dist/index.cjs

@@ -1493,7 +1493,7 @@ function CommandPalette({
   open,
   onOpenChange,
   groups = [],
-  placeholder = "Search commands\u2026",
+  placeholder = "Type to search",
   onSelect,
   className
 }) {
@@ -1669,12 +1669,354 @@ function CommandPalette({
     )
   ] }) });
 }
+function ChatSendIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M2.5 8h11M9 3.5L13.5 8 9 12.5",
+          stroke: "currentColor",
+          strokeWidth: "1.7",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ChatPaperclipIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M13.2 7.2L7.5 12.9a3.5 3.5 0 0 1-4.95-4.95l6.36-6.36a2.2 2.2 0 0 1 3.11 3.11L5.66 10.9a.88.88 0 0 1-1.24-1.24l5.3-5.3",
+          stroke: "currentColor",
+          strokeWidth: "1.4",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    }
+  );
+}
+function ChatSmileIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6.2", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5.5 9.8c.4.9 2.6 1.4 3 0",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "6", cy: "6.8", r: "0.8", fill: "currentColor" }),
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "10", cy: "6.8", r: "0.8", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function ChatDeliveryIcon({ status }) {
+  if (status === "sending") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 14 14",
+        fill: "none",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "circle",
+          {
+            cx: "7",
+            cy: "7",
+            r: "5.2",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeDasharray: "2.5 2"
+          }
+        )
+      }
+    );
+  }
+  if (status === "sent") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 14 14",
+        fill: "none",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M3 7.2l2.4 2.4L11 4.6",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 18,
+      height: 14,
+      viewBox: "0 0 18 14",
+      fill: "none",
+      "aria-label": status === "read" ? "Read" : "Delivered",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M1.5 7.2l2.4 2.4L9.5 4.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5.5 7.2l2.4 2.4 5.6-5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var ChatThread = react.forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("pds-chat-thread", className), ...props });
+  }
+);
+ChatThread.displayName = "ChatThread";
+var ChatDateDivider = react.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: cn("pds-chat-divider", className),
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-chat-divider__label", children })
+      }
+    );
+  }
+);
+ChatDateDivider.displayName = "ChatDateDivider";
+var ChatMessage = react.forwardRef(
+  ({
+    side = "received",
+    name,
+    avatar,
+    time,
+    status,
+    reactions,
+    position = "solo",
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const isSent = side === "sent";
+    const showMeta = position === "solo" || position === "first";
+    const showAvatar = !isSent && avatar && (position === "solo" || position === "last");
+    const showStatus = isSent && status && (position === "solo" || position === "last");
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "pds-chat-msg",
+          `pds-chat-msg--${side}`,
+          `pds-chat-msg--${position}`,
+          className
+        ),
+        ...props,
+        children: [
+          showMeta && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pds-chat-msg__meta-row", children: [
+            !isSent && name && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-chat-msg__name", children: name }),
+            time && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-chat-msg__time", children: time })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pds-chat-msg__row", children: [
+            !isSent && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pds-chat-msg__avatar-slot", children: showAvatar && avatar }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pds-chat-msg__bubble-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "pds-chat-bubble",
+                    `pds-chat-bubble--${side}`,
+                    `pds-chat-bubble--${position}`
+                  ),
+                  children
+                }
+              ),
+              reactions && reactions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pds-chat-reactions", children: reactions.map((reaction, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "pds-chat-reaction",
+                    reaction.mine && "pds-chat-reaction--mine"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx("span", { children: reaction.emoji }),
+                    reaction.count !== void 0 && reaction.count > 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-chat-reaction__count", children: reaction.count })
+                  ]
+                },
+                index
+              )) })
+            ] })
+          ] }),
+          showStatus && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: cn(
+                "pds-chat-msg__status",
+                status === "read" && "pds-chat-msg__status--read"
+              ),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(ChatDeliveryIcon, { status }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "pds-chat-msg__status-label", children: status })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ChatMessage.displayName = "ChatMessage";
+function ChatCompose({
+  value,
+  onChange,
+  onSend,
+  placeholder = "Write a message\u2026",
+  avatar,
+  disabled,
+  className
+}) {
+  const [internalValue, setInternalValue] = react.useState("");
+  const textareaRef = react.useRef(null);
+  const isControlled = value !== void 0;
+  const text = isControlled ? value : internalValue;
+  react.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 120)}px`;
+  }, [text]);
+  function handleChange(event) {
+    if (!isControlled) setInternalValue(event.target.value);
+    onChange?.(event);
+  }
+  function send() {
+    const trimmed = text.trim();
+    if (!trimmed) return;
+    onSend?.(trimmed);
+    if (!isControlled) setInternalValue("");
+  }
+  function handleKeyDown(event) {
+    if (event.key === "Enter" && !event.shiftKey) {
+      event.preventDefault();
+      send();
+    }
+  }
+  const canSend = text.trim().length > 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("pds-chat-compose", className), children: [
+    avatar && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "pds-chat-compose__avatar", children: avatar }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "pds-chat-compose__field", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "pds-chat-compose__icon-btn",
+          "aria-label": "Attach file",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChatPaperclipIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          className: "pds-chat-compose__textarea",
+          value: text,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled,
+          rows: 1,
+          "aria-label": "Message"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          className: "pds-chat-compose__icon-btn",
+          "aria-label": "Add emoji",
+          children: /* @__PURE__ */ jsxRuntime.jsx(ChatSmileIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        className: cn("pds-chat-send", canSend && "pds-chat-send--active"),
+        onClick: send,
+        disabled: disabled || !canSend,
+        "aria-label": "Send message",
+        children: /* @__PURE__ */ jsxRuntime.jsx(ChatSendIcon, {})
+      }
+    )
+  ] });
+}
 
 exports.Alert = Alert;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Button = Button;
 exports.Card = Card;
+exports.ChatCompose = ChatCompose;
+exports.ChatDateDivider = ChatDateDivider;
+exports.ChatMessage = ChatMessage;
+exports.ChatThread = ChatThread;
 exports.Checkbox = Checkbox;
 exports.CommandPalette = CommandPalette;
 exports.Container = Container;