@bubble-design-system/ui 1.1.0 → 1.2.0

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, TextareaHTMLAttributes, ChangeEvent } from 'react';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
@@ -438,4 +438,39 @@ declare function useCommandPalette(): {
 };
 declare function CommandPalette({ open, onOpenChange, groups, placeholder, onSelect, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardActionProps, type CardBodyProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardTitleProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, Container, type ContainerProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, Grid, type GridColProps, type GridRootProps, Input, type InputProps, Modal, type ModalContentProps, type ModalDescriptionProps, type ModalTitleProps, Popover, type PopoverBodyProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverFooterProps, type PopoverHeaderProps, type PopoverTitleProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Segmented, type SegmentedItemProps, type SegmentedProps, Select, type SelectContentProps, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, Skeleton, type SkeletonProps, StatusPill, type StatusPillIndicatorProps, type StatusPillLabelProps, type StatusPillProps, Switch, type SwitchProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, Textarea, type TextareaProps, Toast, Tooltip, type TooltipContentProps, cn, useCommandPalette, useToastManager as useToast };
+type ChatMessageSide = "sent" | "received";
+type ChatMessagePosition = "solo" | "first" | "middle" | "last";
+type ChatMessageStatus = "sending" | "sent" | "delivered" | "read";
+interface ChatReaction {
+    emoji: string;
+    count?: number;
+    mine?: boolean;
+}
+interface ChatThreadProps extends ComponentPropsWithoutRef<"div"> {
+}
+declare const ChatThread: react.ForwardRefExoticComponent<ChatThreadProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatDateDividerProps extends ComponentPropsWithoutRef<"div"> {
+}
+declare const ChatDateDivider: react.ForwardRefExoticComponent<ChatDateDividerProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatMessageProps extends ComponentPropsWithoutRef<"div"> {
+    side?: ChatMessageSide;
+    name?: string;
+    avatar?: ReactNode;
+    time?: string;
+    status?: ChatMessageStatus;
+    reactions?: ChatReaction[];
+    position?: ChatMessagePosition;
+}
+declare const ChatMessage: react.ForwardRefExoticComponent<ChatMessageProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatComposeProps {
+    value?: string;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onSend?: (value: string) => void;
+    placeholder?: string;
+    avatar?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+declare function ChatCompose({ value, onChange, onSend, placeholder, avatar, disabled, className, }: ChatComposeProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardActionProps, type CardBodyProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardTitleProps, ChatCompose, type ChatComposeProps, ChatDateDivider, type ChatDateDividerProps, ChatMessage, type ChatMessagePosition, type ChatMessageProps, type ChatMessageSide, type ChatMessageStatus, type ChatReaction, ChatThread, type ChatThreadProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, Container, type ContainerProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, Grid, type GridColProps, type GridRootProps, Input, type InputProps, Modal, type ModalContentProps, type ModalDescriptionProps, type ModalTitleProps, Popover, type PopoverBodyProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverFooterProps, type PopoverHeaderProps, type PopoverTitleProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Segmented, type SegmentedItemProps, type SegmentedProps, Select, type SelectContentProps, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, Skeleton, type SkeletonProps, StatusPill, type StatusPillIndicatorProps, type StatusPillLabelProps, type StatusPillProps, Switch, type SwitchProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, Textarea, type TextareaProps, Toast, Tooltip, type TooltipContentProps, cn, useCommandPalette, useToastManager as useToast };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { ClassValue } from 'clsx';
 import * as react from 'react';
-import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, TextareaHTMLAttributes } from 'react';
+import { ComponentPropsWithoutRef, ReactNode, HTMLAttributes, TextareaHTMLAttributes, ChangeEvent } from 'react';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { Input as Input$1 } from '@base-ui/react/input';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
@@ -438,4 +438,39 @@ declare function useCommandPalette(): {
 };
 declare function CommandPalette({ open, onOpenChange, groups, placeholder, onSelect, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardActionProps, type CardBodyProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardTitleProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, Container, type ContainerProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, Grid, type GridColProps, type GridRootProps, Input, type InputProps, Modal, type ModalContentProps, type ModalDescriptionProps, type ModalTitleProps, Popover, type PopoverBodyProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverFooterProps, type PopoverHeaderProps, type PopoverTitleProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Segmented, type SegmentedItemProps, type SegmentedProps, Select, type SelectContentProps, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, Skeleton, type SkeletonProps, StatusPill, type StatusPillIndicatorProps, type StatusPillLabelProps, type StatusPillProps, Switch, type SwitchProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, Textarea, type TextareaProps, Toast, Tooltip, type TooltipContentProps, cn, useCommandPalette, useToastManager as useToast };
+type ChatMessageSide = "sent" | "received";
+type ChatMessagePosition = "solo" | "first" | "middle" | "last";
+type ChatMessageStatus = "sending" | "sent" | "delivered" | "read";
+interface ChatReaction {
+    emoji: string;
+    count?: number;
+    mine?: boolean;
+}
+interface ChatThreadProps extends ComponentPropsWithoutRef<"div"> {
+}
+declare const ChatThread: react.ForwardRefExoticComponent<ChatThreadProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatDateDividerProps extends ComponentPropsWithoutRef<"div"> {
+}
+declare const ChatDateDivider: react.ForwardRefExoticComponent<ChatDateDividerProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatMessageProps extends ComponentPropsWithoutRef<"div"> {
+    side?: ChatMessageSide;
+    name?: string;
+    avatar?: ReactNode;
+    time?: string;
+    status?: ChatMessageStatus;
+    reactions?: ChatReaction[];
+    position?: ChatMessagePosition;
+}
+declare const ChatMessage: react.ForwardRefExoticComponent<ChatMessageProps & react.RefAttributes<HTMLDivElement>>;
+interface ChatComposeProps {
+    value?: string;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onSend?: (value: string) => void;
+    placeholder?: string;
+    avatar?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+}
+declare function ChatCompose({ value, onChange, onSend, placeholder, avatar, disabled, className, }: ChatComposeProps): react_jsx_runtime.JSX.Element;
+
+export { Alert, type AlertProps, Avatar, type AvatarFallbackProps, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, type CardActionProps, type CardBodyProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardProps, type CardTitleProps, ChatCompose, type ChatComposeProps, ChatDateDivider, type ChatDateDividerProps, ChatMessage, type ChatMessagePosition, type ChatMessageProps, type ChatMessageSide, type ChatMessageStatus, type ChatReaction, ChatThread, type ChatThreadProps, Checkbox, type CheckboxProps, CommandPalette, type CommandPaletteGroup, type CommandPaletteItem, type CommandPaletteProps, Container, type ContainerProps, DataTable, type DataTableColumn, type DataTableProps, Divider, type DividerProps, DropdownMenu, type DropdownMenuCheckboxItemProps, type DropdownMenuContentProps, type DropdownMenuItemProps, type DropdownMenuLabelProps, type DropdownMenuRadioItemProps, type DropdownMenuSeparatorProps, Grid, type GridColProps, type GridRootProps, Input, type InputProps, Modal, type ModalContentProps, type ModalDescriptionProps, type ModalTitleProps, Popover, type PopoverBodyProps, type PopoverContentProps, type PopoverDescriptionProps, type PopoverFooterProps, type PopoverHeaderProps, type PopoverTitleProps, Radio, RadioGroup, type RadioGroupProps, type RadioProps, Segmented, type SegmentedItemProps, type SegmentedProps, Select, type SelectContentProps, type SelectItemProps, type SelectTriggerProps, type SelectValueProps, Skeleton, type SkeletonProps, StatusPill, type StatusPillIndicatorProps, type StatusPillLabelProps, type StatusPillProps, Switch, type SwitchProps, Tabs, type TabsListProps, type TabsPanelProps, type TabsRootProps, type TabsTabProps, Textarea, type TextareaProps, Toast, Tooltip, type TooltipContentProps, cn, useCommandPalette, useToastManager as useToast };

package/dist/index.js

@@ -1491,7 +1491,7 @@ function CommandPalette({
   open,
   onOpenChange,
   groups = [],
-  placeholder = "Search commands\u2026",
+  placeholder = "Type to search",
   onSelect,
   className
 }) {
@@ -1667,7 +1667,345 @@ function CommandPalette({
     )
   ] }) });
 }
+function ChatSendIcon() {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ 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__ */ jsx(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ 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__ */ jsxs(
+    "svg",
+    {
+      width: 16,
+      height: 16,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6.2", stroke: "currentColor", strokeWidth: "1.4" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.5 9.8c.4.9 2.6 1.4 3 0",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeLinecap: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx("circle", { cx: "6", cy: "6.8", r: "0.8", fill: "currentColor" }),
+        /* @__PURE__ */ jsx("circle", { cx: "10", cy: "6.8", r: "0.8", fill: "currentColor" })
+      ]
+    }
+  );
+}
+function ChatDeliveryIcon({ status }) {
+  if (status === "sending") {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 14 14",
+        fill: "none",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "7",
+            cy: "7",
+            r: "5.2",
+            stroke: "currentColor",
+            strokeWidth: "1.4",
+            strokeDasharray: "2.5 2"
+          }
+        )
+      }
+    );
+  }
+  if (status === "sent") {
+    return /* @__PURE__ */ jsx(
+      "svg",
+      {
+        width: 14,
+        height: 14,
+        viewBox: "0 0 14 14",
+        fill: "none",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M3 7.2l2.4 2.4L11 4.6",
+            stroke: "currentColor",
+            strokeWidth: "1.6",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: 18,
+      height: 14,
+      viewBox: "0 0 18 14",
+      fill: "none",
+      "aria-label": status === "read" ? "Read" : "Delivered",
+      children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M1.5 7.2l2.4 2.4L9.5 4.6",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M5.5 7.2l2.4 2.4 5.6-5",
+            stroke: "currentColor",
+            strokeWidth: "1.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var ChatThread = forwardRef(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("pds-chat-thread", className), ...props });
+  }
+);
+ChatThread.displayName = "ChatThread";
+var ChatDateDivider = forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: cn("pds-chat-divider", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("span", { className: "pds-chat-divider__label", children })
+      }
+    );
+  }
+);
+ChatDateDivider.displayName = "ChatDateDivider";
+var ChatMessage = 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__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "pds-chat-msg",
+          `pds-chat-msg--${side}`,
+          `pds-chat-msg--${position}`,
+          className
+        ),
+        ...props,
+        children: [
+          showMeta && /* @__PURE__ */ jsxs("div", { className: "pds-chat-msg__meta-row", children: [
+            !isSent && name && /* @__PURE__ */ jsx("span", { className: "pds-chat-msg__name", children: name }),
+            time && /* @__PURE__ */ jsx("span", { className: "pds-chat-msg__time", children: time })
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "pds-chat-msg__row", children: [
+            !isSent && /* @__PURE__ */ jsx("div", { className: "pds-chat-msg__avatar-slot", children: showAvatar && avatar }),
+            /* @__PURE__ */ jsxs("div", { className: "pds-chat-msg__bubble-col", children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "pds-chat-bubble",
+                    `pds-chat-bubble--${side}`,
+                    `pds-chat-bubble--${position}`
+                  ),
+                  children
+                }
+              ),
+              reactions && reactions.length > 0 && /* @__PURE__ */ jsx("div", { className: "pds-chat-reactions", children: reactions.map((reaction, index) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: cn(
+                    "pds-chat-reaction",
+                    reaction.mine && "pds-chat-reaction--mine"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx("span", { children: reaction.emoji }),
+                    reaction.count !== void 0 && reaction.count > 1 && /* @__PURE__ */ jsx("span", { className: "pds-chat-reaction__count", children: reaction.count })
+                  ]
+                },
+                index
+              )) })
+            ] })
+          ] }),
+          showStatus && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: cn(
+                "pds-chat-msg__status",
+                status === "read" && "pds-chat-msg__status--read"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(ChatDeliveryIcon, { status }),
+                /* @__PURE__ */ 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] = useState("");
+  const textareaRef = useRef(null);
+  const isControlled = value !== void 0;
+  const text = isControlled ? value : internalValue;
+  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__ */ jsxs("div", { className: cn("pds-chat-compose", className), children: [
+    avatar && /* @__PURE__ */ jsx("div", { className: "pds-chat-compose__avatar", children: avatar }),
+    /* @__PURE__ */ jsxs("div", { className: "pds-chat-compose__field", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pds-chat-compose__icon-btn",
+          "aria-label": "Attach file",
+          children: /* @__PURE__ */ jsx(ChatPaperclipIcon, {})
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          ref: textareaRef,
+          className: "pds-chat-compose__textarea",
+          value: text,
+          onChange: handleChange,
+          onKeyDown: handleKeyDown,
+          placeholder,
+          disabled,
+          rows: 1,
+          "aria-label": "Message"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "pds-chat-compose__icon-btn",
+          "aria-label": "Add emoji",
+          children: /* @__PURE__ */ jsx(ChatSmileIcon, {})
+        }
+      )
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx(ChatSendIcon, {})
+      }
+    )
+  ] });
+}
 
-export { Alert, Avatar, Badge, Button, Card, Checkbox, CommandPalette, Container, DataTable, Divider, DropdownMenu, Grid, Input, Modal, Popover, Radio, RadioGroup, Segmented, Select, Skeleton, StatusPill, Switch, Tabs, Textarea, Toast, Tooltip, cn, useCommandPalette, useToastManager as useToast };
+export { Alert, Avatar, Badge, Button, Card, ChatCompose, ChatDateDivider, ChatMessage, ChatThread, Checkbox, CommandPalette, Container, DataTable, Divider, DropdownMenu, Grid, Input, Modal, Popover, Radio, RadioGroup, Segmented, Select, Skeleton, StatusPill, Switch, Tabs, Textarea, Toast, Tooltip, cn, useCommandPalette, useToastManager as useToast };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map