tembro 4.0.1 → 4.1.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 All notable changes to this project will be documented in this file.
 
+## 4.1.0 - 2026-07-17
+
+### Added
+
+- Added reusable chat workspace primitives for conversation lists, messages, replies, attachments, reactions, typing states, delivery status, and message composition.
+- Added named theme support with `data-theme`, color-scheme mapping, system mode, theme cycling, and built-in light, dark, and dim presets.
+- Added Kanban WIP limits, controlled selection, rich task metadata, add-card/add-column actions, density, column sizing, and move policies.
+
+### Changed
+
+- Expanded Sidebar with inset/floating/offcanvas variants, search, persistence, keyboard collapse, item actions, accessible collapsed labels, and corrected mobile drawer geometry.
+- Expanded RichTextEditor with grouped responsive controls, headings, block tools, link actions, format clearing, sticky/compact toolbar modes, and word/character counts.
+- Improved Badge dot, pulse, avatar, icon, remove, focus, and interactive states; centered tag and clear icons and removed duplicate native search cancel controls.
+- Corrected ActivityFeed and Timeline connector alignment and strengthened viewport-only sidebar/main scrolling behavior.
+
 ## 4.0.1 - 2026-07-17
 
 ### Changed

package/dist/components/display/chat.cjs

@@ -0,0 +1 @@
+module.exports = require("../../src/components/display/chat.cjs")

package/dist/components/display/chat.d.ts

@@ -0,0 +1,94 @@
+import * as React from "react";
+export type ChatMessageStatus = "sending" | "sent" | "delivered" | "read" | "failed";
+export type ChatAttachmentData = {
+    key: string;
+    name: string;
+    size?: React.ReactNode;
+    type?: React.ReactNode;
+    href?: string;
+    preview?: string;
+};
+export type ChatParticipant = {
+    name: string;
+    avatar?: string;
+    fallback?: React.ReactNode;
+    status?: "online" | "offline" | "busy" | "away";
+};
+export type ChatShellProps = React.ComponentProps<"section"> & {
+    sidebar?: React.ReactNode;
+    details?: React.ReactNode;
+};
+declare function ChatShell({ sidebar, details, children, className, ...props }: ChatShellProps): React.JSX.Element;
+export type ChatHeaderProps = React.ComponentProps<"header"> & {
+    participant: ChatParticipant;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+};
+declare function ChatHeader({ participant, description, actions, className, ...props }: ChatHeaderProps): React.JSX.Element;
+export type ConversationItem = {
+    key: string;
+    participant: ChatParticipant;
+    preview?: React.ReactNode;
+    time?: React.ReactNode;
+    unread?: number;
+    muted?: boolean;
+    pinned?: boolean;
+};
+export type ConversationListProps = Omit<React.ComponentProps<"div">, "onSelect"> & {
+    items: ConversationItem[];
+    selectedKey?: string;
+    defaultSelectedKey?: string;
+    onSelect?: (item: ConversationItem) => void;
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    empty?: React.ReactNode;
+};
+declare function ConversationList({ items, selectedKey, defaultSelectedKey, onSelect, searchable, searchPlaceholder, empty, className, ...props }: ConversationListProps): React.JSX.Element;
+export type ChatMessageListProps = React.ComponentProps<"div"> & {
+    autoScroll?: boolean;
+    empty?: React.ReactNode;
+};
+declare function ChatMessageList({ autoScroll, empty, children, className, ...props }: ChatMessageListProps): React.JSX.Element;
+export type ChatAttachmentProps = React.ComponentProps<"div"> & Omit<ChatAttachmentData, "key"> & {
+    attachmentKey?: string;
+    onRemove?: () => void;
+};
+declare function ChatAttachment({ name, size, type, href, preview, onRemove, attachmentKey: _attachmentKey, className, ...props }: ChatAttachmentProps): React.JSX.Element;
+export type ChatMessageProps = React.ComponentProps<"article"> & {
+    participant?: ChatParticipant;
+    outgoing?: boolean;
+    time?: React.ReactNode;
+    status?: ChatMessageStatus;
+    replyTo?: React.ReactNode;
+    attachments?: ChatAttachmentData[];
+    reactions?: Array<{
+        key: string;
+        label: React.ReactNode;
+        count?: number;
+        active?: boolean;
+    }>;
+    onReaction?: (key: string) => void;
+    actions?: React.ReactNode;
+};
+declare function ChatMessage({ participant, outgoing, time, status, replyTo, attachments, reactions, onReaction, actions, children, className, ...props }: ChatMessageProps): React.JSX.Element;
+declare function ChatTypingIndicator({ participant, className, ...props }: React.ComponentProps<"div"> & {
+    participant?: ChatParticipant;
+}): React.JSX.Element;
+export type ChatComposerProps = Omit<React.ComponentProps<"form">, "onSubmit"> & {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    onSend: (value: string) => void | Promise<void>;
+    placeholder?: string;
+    disabled?: boolean;
+    sending?: boolean;
+    attachments?: ChatAttachmentData[];
+    onRemoveAttachment?: (key: string) => void;
+    onAttachmentClick?: () => void;
+    onEmojiClick?: () => void;
+    maxLength?: number;
+    submitLabel?: string;
+};
+declare function ChatComposer({ value, defaultValue, onValueChange, onSend, placeholder, disabled, sending, attachments, onRemoveAttachment, onAttachmentClick, onEmojiClick, maxLength, submitLabel, className, ...props }: ChatComposerProps): React.JSX.Element;
+declare function ChatHeaderActions(): React.JSX.Element;
+export { ChatAttachment, ChatComposer, ChatHeader, ChatHeaderActions, ChatMessage, ChatMessageList, ChatShell, ChatTypingIndicator, ConversationList, };

package/dist/components/display/chat.js

@@ -0,0 +1 @@
+export * from "../../src/components/display/chat.js"

package/dist/components/display/index.d.ts

@@ -15,5 +15,6 @@ export * from "./info-card";
 export * from "./virtual-list";
 export * from "./qr-code";
 export * from "./carousel";
+export * from "./chat";
 export * from "./tag";
 export * from "./typography";

package/dist/components/display/kanban.d.ts

@@ -6,6 +6,19 @@ export type KanbanCard = {
     meta?: React.ReactNode;
     extra?: React.ReactNode;
     actions?: React.ReactNode;
+    labels?: Array<React.ReactNode | {
+        key: string;
+        label: React.ReactNode;
+        tone?: "neutral" | "info" | "success" | "warning" | "danger" | "muted";
+    }>;
+    priority?: "low" | "medium" | "high" | "urgent";
+    assignee?: {
+        name: string;
+        src?: string;
+        fallback?: React.ReactNode;
+    };
+    dueDate?: React.ReactNode;
+    selected?: boolean;
     disabled?: boolean;
 };
 export type KanbanColumn = {
@@ -14,12 +27,18 @@ export type KanbanColumn = {
     description?: React.ReactNode;
     cards: KanbanCard[];
     count?: React.ReactNode;
+    limit?: number;
+    color?: string;
+    actions?: React.ReactNode;
+    footer?: React.ReactNode;
     disabled?: boolean;
 };
 export type KanbanCardRenderContext = {
     index: number;
     isDragging: boolean;
     isDropTarget: boolean;
+    selected: boolean;
+    selectControl: React.ReactNode;
     handle: React.ReactNode;
 };
 export type KanbanCardMove = {
@@ -34,8 +53,21 @@ export type KanbanBoardProps = Omit<React.ComponentProps<"div">, "defaultValue">
     defaultColumns?: KanbanColumn[];
     onColumnsChange?: (columns: KanbanColumn[], change: KanbanCardMove) => void;
     onCardMove?: (change: KanbanCardMove) => void;
+    canMoveCard?: (change: KanbanCardMove) => boolean;
     renderCard?: (card: KanbanCard, column: KanbanColumn, context: KanbanCardRenderContext) => React.ReactNode;
     onCardClick?: (card: KanbanCard, column: KanbanColumn) => void;
+    onAddCard?: (column: KanbanColumn) => void;
+    onAddColumn?: () => void;
+    renderColumnHeader?: (column: KanbanColumn) => React.ReactNode;
+    renderColumnFooter?: (column: KanbanColumn) => React.ReactNode;
+    selectionMode?: "none" | "single" | "multiple";
+    selectedCardKeys?: string[];
+    defaultSelectedCardKeys?: string[];
+    onSelectionChange?: (keys: string[], cards: KanbanCard[]) => void;
+    allowCrossColumn?: boolean;
+    allowReorder?: boolean;
+    density?: "compact" | "comfortable";
+    columnWidth?: number | string;
     disabled?: boolean;
     emptyColumn?: React.ReactNode;
     dragHandleLabel?: (card: KanbanCard, column: KanbanColumn) => string;
@@ -43,5 +75,5 @@ export type KanbanBoardProps = Omit<React.ComponentProps<"div">, "defaultValue">
     cardClassName?: string;
     overlayClassName?: string;
 };
-declare function KanbanBoard({ columns: columnsProp, defaultColumns, onColumnsChange, onCardMove, renderCard, onCardClick, disabled, emptyColumn, dragHandleLabel, columnClassName, cardClassName, overlayClassName, className, "aria-label": ariaLabel, ...props }: KanbanBoardProps): React.JSX.Element;
+declare function KanbanBoard({ columns: columnsProp, defaultColumns, onColumnsChange, onCardMove, canMoveCard, renderCard, onCardClick, onAddCard, onAddColumn, renderColumnHeader, renderColumnFooter, selectionMode, selectedCardKeys, defaultSelectedCardKeys, onSelectionChange, allowCrossColumn, allowReorder, density, columnWidth, disabled, emptyColumn, dragHandleLabel, columnClassName, cardClassName, overlayClassName, className, "aria-label": ariaLabel, ...props }: KanbanBoardProps): React.JSX.Element;
 export { KanbanBoard };

package/dist/components/layout/sidebar.d.ts

@@ -16,6 +16,18 @@ export type SidebarItem = {
     current?: React.AriaAttributes["aria-current"];
     tooltip?: React.ReactNode;
     onSelect?: () => void;
+    keywords?: string[];
+    action?: React.ReactNode;
+    actionLabel?: string;
+    onAction?: () => void;
+};
+export type SidebarSearch = {
+    value?: string;
+    defaultValue?: string;
+    placeholder?: string;
+    label?: string;
+    onValueChange?: (value: string) => void;
+    empty?: React.ReactNode;
 };
 export type SidebarFooterAccount = {
     label: React.ReactNode;
@@ -30,6 +42,11 @@ export type SidebarProps = React.ComponentProps<"aside"> & {
     footer?: React.ReactNode;
     items?: SidebarItem[];
     collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    variant?: "sidebar" | "floating" | "inset";
+    side?: "left" | "right";
+    collapsible?: "icon" | "offcanvas" | "none";
     width?: React.CSSProperties["width"];
     collapsedWidth?: React.CSSProperties["width"];
     mobileWidth?: React.CSSProperties["width"];
@@ -43,6 +60,10 @@ export type SidebarProps = React.ComponentProps<"aside"> & {
     itemSize?: "sm" | "md" | "lg";
     activeIndicator?: "none" | "bar" | "pill";
     navigationLabel?: string;
+    search?: SidebarSearch | React.ReactNode;
+    hideScrollbar?: boolean;
+    keyboardShortcut?: string | false;
+    persistKey?: string;
     responsive?: boolean;
     mobileBreakpoint?: number;
     mobileOpen?: boolean;
@@ -72,5 +93,6 @@ export type SidebarProps = React.ComponentProps<"aside"> & {
         [key: `data-${string}`]: string | boolean | undefined;
     }) => React.ReactNode;
 };
-declare function Sidebar({ className, header, footer, items, collapsed: collapsedProp, width, collapsedWidth, mobileWidth, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, showSectionLabels, itemSize, activeIndicator, navigationLabel, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileCloseLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: SidebarProps): React.JSX.Element;
-export { Sidebar };
+declare function Sidebar({ className, header, footer, items, collapsed: collapsedProp, defaultCollapsed, onCollapsedChange, variant, side, collapsible, width, collapsedWidth, mobileWidth, collapsedRail, railItems, footerAccount, secondaryActions, footerSecondary, tooltipOnCollapsed, showSectionLabels, itemSize, activeIndicator, navigationLabel, search, hideScrollbar, keyboardShortcut, persistKey, responsive, mobileBreakpoint, mobileOpen: mobileOpenProp, defaultMobileOpen, onMobileOpenChange, mobileTitle, mobileDescription, mobileToggleLabel, mobileCloseLabel, mobileToggleIcon, showMobileToggle, closeOnSelect, mobileToggleClassName, mobilePanelClassName, mobileOverlayClassName, renderMobileToggle, onItemSelect, renderItem, renderLink, children, ...props }: SidebarProps): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
+export { Sidebar, SidebarInset };

package/dist/components/modern/rich-text-editor.d.ts

@@ -9,16 +9,28 @@ export type RichTextEditorProps = Omit<React.ComponentProps<"div">, "defaultValu
     editable?: boolean;
     autoFocus?: boolean;
     minHeight?: number;
+    maxHeight?: number;
+    maxLength?: number;
+    toolbar?: boolean;
+    stickyToolbar?: boolean;
+    toolbarSize?: "compact" | "default";
+    features?: RichTextFeature[];
+    showCharacterCount?: boolean;
+    showWordCount?: boolean;
     onLinkRequest?: (currentHref?: string) => string | null | undefined;
     labels?: {
         editor?: string;
         toolbar?: string;
     };
 };
-declare function EditorToolbar({ editor, onLinkRequest, label }: {
+export type RichTextFeature = "history" | "bold" | "italic" | "strike" | "code" | "heading1" | "heading2" | "heading3" | "paragraph" | "bulletList" | "orderedList" | "blockquote" | "codeBlock" | "horizontalRule" | "link" | "clearFormatting";
+declare function EditorToolbar({ editor, onLinkRequest, label, features, sticky, size }: {
     editor: Editor;
     onLinkRequest?: RichTextEditorProps["onLinkRequest"];
     label: string;
+    features?: RichTextFeature[];
+    sticky?: boolean;
+    size?: "compact" | "default";
 }): React.JSX.Element;
 declare function RichTextEditor(props: RichTextEditorProps): React.JSX.Element;
 export { EditorToolbar, RichTextEditor };

package/dist/components/theme-provider.d.ts

@@ -1,15 +1,28 @@
 import * as React from "react";
-type ThemeMode = "light" | "dark" | "system";
-type ResolvedThemeMode = "light" | "dark";
+export type ThemeName = string;
+export type ThemeMode = ThemeName | "system";
+export type ThemeColorScheme = "light" | "dark";
+export type ThemeProviderProps = {
+    children: React.ReactNode;
+    themes?: ThemeName[];
+    defaultTheme?: ThemeMode;
+    forcedTheme?: ThemeName;
+    storageKey?: string;
+    enableSystem?: boolean;
+    attribute?: "class" | "data-theme" | "both";
+    colorSchemes?: Record<ThemeName, ThemeColorScheme>;
+    disableTransitionOnChange?: boolean;
+    onThemeChange?: (theme: ThemeMode, resolvedTheme: ThemeName) => void;
+};
 type ThemeContextValue = {
     theme: ThemeMode;
-    resolvedTheme: ResolvedThemeMode;
+    resolvedTheme: ThemeName;
+    systemTheme: ThemeColorScheme;
+    themes: ThemeName[];
     mounted: boolean;
     setTheme: (theme: ThemeMode) => void;
     toggleTheme: () => void;
 };
-export declare function ThemeProvider({ children }: {
-    children: React.ReactNode;
-}): React.JSX.Element;
+export declare function ThemeProvider({ children, themes, defaultTheme, forcedTheme, storageKey, enableSystem, attribute, colorSchemes, disableTransitionOnChange, onThemeChange, }: ThemeProviderProps): React.JSX.Element;
 export declare function useTheme(): ThemeContextValue;
 export {};

package/dist/components/ui/badge/index.d.ts

@@ -7,7 +7,7 @@ declare const badgeVariants: (props?: ({
     size?: "default" | "sm" | "lg" | null | undefined;
     dot?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+type BadgeProps = useRender.ComponentProps<"span"> & Omit<VariantProps<typeof badgeVariants>, "dot"> & {
     label?: React.ReactNode;
     count?: React.ReactNode;
     status?: "neutral" | "info" | "success" | "warning" | "danger" | "muted";
@@ -17,6 +17,12 @@ type BadgeProps = useRender.ComponentProps<"span"> & VariantProps<typeof badgeVa
     removeLabel?: string;
     leftIcon?: React.ReactNode;
     rightIcon?: React.ReactNode;
+    avatar?: React.ReactNode;
+    dot?: boolean | React.ReactNode;
+    showDot?: boolean;
+    dotPosition?: "start" | "end";
+    pulse?: boolean;
+    interactive?: boolean;
 };
-declare function Badge({ className, variant, tone, size, dot, label, count, status, removable, selected, onRemove, removeLabel, leftIcon, rightIcon, children, render, onKeyDown, ...props }: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function Badge({ className, variant, tone, size, dot, label, count, status, removable, selected, onRemove, removeLabel, leftIcon, rightIcon, avatar, showDot, dotPosition, pulse, interactive, children, render, onKeyDown, ...props }: BadgeProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 export { Badge, badgeVariants, type BadgeProps };

package/dist/src/components/display/activity-feed.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={default:`bg-primary`,success:`bg-emerald-500`,warning:`bg-amber-500`,danger:`bg-destructive`,info:`bg-blue-500`,muted:`bg-muted-foreground`};function o({className:e,title:r,description:o,actions:s,items:c,empty:l=`No activity yet.`,compact:u=!1,density:d,showConnector:f=!0,connectorClassName:p,contentClassName:m,itemClassName:h,...g}){let _=c.filter(e=>!e.hidden),v=!!(r||o||s),y=d?d===`compact`:u;return(0,i.jsxs)(n.Card,{"data-slot":`activity-feed`,className:t.cn(`min-w-0`,e),...g,children:[v&&(0,i.jsx)(n.CardHeader,{children:(0,i.jsxs)(`div`,{className:`flex min-w-0 items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[r&&(0,i.jsx)(n.CardTitle,{children:r}),o&&(0,i.jsx)(n.CardDescription,{children:o})]}),s&&(0,i.jsx)(`div`,{className:`shrink-0`,children:s})]})}),(0,i.jsx)(n.CardContent,{className:t.cn(`grid gap-0`,m),children:_.length===0?(0,i.jsx)(`div`,{className:`rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground`,children:l}):_.map((e,n)=>{let r=e.interactive??!!(e.href||e.onSelect),o=(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:t.cn(`relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background`,e.unread&&`border-primary/45 bg-primary/8 shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_88%)]`),children:e.icon??(0,i.jsx)(`span`,{className:t.cn(`size-2 rounded-full`,a[e.tone??`default`])})}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 items-start justify-between gap-2`,children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[(0,i.jsx)(`div`,{className:`min-w-0 text-sm font-medium leading-5 text-foreground`,children:e.title}),e.meta&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.meta})]}),(0,i.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2`,children:[e.badge,e.time&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.time})]})]}),e.description&&(0,i.jsx)(`div`,{className:`text-sm leading-5 text-muted-foreground`,children:e.description}),e.actions&&(0,i.jsx)(`div`,{className:`pt-1`,children:e.actions})]})]});return(0,i.jsxs)(`div`,{"data-slot":`activity-feed-item`,className:t.cn(`relative flex gap-3 pb-4 last:pb-0`,y&&`gap-2 pb-3`,h,e.className),children:[f&&n<_.length-1&&(0,i.jsx)(`div`,{className:t.cn(`absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border`,p)}),e.href?(0,i.jsx)(`a`,{href:e.href,target:e.target,rel:e.rel,className:t.cn(`flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 transition-[background-color,border-color,box-shadow]`,r&&`hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),children:o}):r?(0,i.jsx)(`button`,{type:`button`,className:`flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 text-left transition-[background-color,border-color,box-shadow] hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,onClick:e.onSelect,children:o}):(0,i.jsx)(`div`,{className:`flex min-w-0 flex-1 gap-3 px-2 py-1.5`,children:o})]},e.id)})})]})}exports.ActivityFeed=o;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/card/index.cjs");let r=require("react");r=e.__toESM(r,1);let i=require("react/jsx-runtime");var a={default:`bg-primary`,success:`bg-emerald-500`,warning:`bg-amber-500`,danger:`bg-destructive`,info:`bg-blue-500`,muted:`bg-muted-foreground`};function o({className:e,title:r,description:o,actions:s,items:c,empty:l=`No activity yet.`,compact:u=!1,density:d,showConnector:f=!0,connectorClassName:p,contentClassName:m,itemClassName:h,...g}){let _=c.filter(e=>!e.hidden),v=!!(r||o||s),y=d?d===`compact`:u;return(0,i.jsxs)(n.Card,{"data-slot":`activity-feed`,className:t.cn(`min-w-0`,e),...g,children:[v&&(0,i.jsx)(n.CardHeader,{children:(0,i.jsxs)(`div`,{className:`flex min-w-0 items-start justify-between gap-3`,children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[r&&(0,i.jsx)(n.CardTitle,{children:r}),o&&(0,i.jsx)(n.CardDescription,{children:o})]}),s&&(0,i.jsx)(`div`,{className:`shrink-0`,children:s})]})}),(0,i.jsx)(n.CardContent,{className:t.cn(`grid gap-0`,m),children:_.length===0?(0,i.jsx)(`div`,{className:`rounded-lg border border-dashed p-4 text-center text-sm text-muted-foreground`,children:l}):_.map((e,n)=>{let r=e.interactive??!!(e.href||e.onSelect),o=(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(`div`,{className:t.cn(`relative z-10 mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-full border bg-background`,e.unread&&`border-primary/45 bg-primary/8 shadow-[0_0_0_3px_color-mix(in_oklch,var(--primary),transparent_88%)]`),children:e.icon??(0,i.jsx)(`span`,{className:t.cn(`size-2 rounded-full`,a[e.tone??`default`])})}),(0,i.jsxs)(`div`,{className:`min-w-0 flex-1 space-y-1`,children:[(0,i.jsxs)(`div`,{className:`flex min-w-0 items-start justify-between gap-2`,children:[(0,i.jsxs)(`div`,{className:`min-w-0 space-y-1`,children:[(0,i.jsx)(`div`,{className:`min-w-0 text-sm font-medium leading-5 text-foreground`,children:e.title}),e.meta&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.meta})]}),(0,i.jsxs)(`div`,{className:`flex shrink-0 items-center gap-2`,children:[e.badge,e.time&&(0,i.jsx)(`div`,{className:`text-xs text-muted-foreground`,children:e.time})]})]}),e.description&&(0,i.jsx)(`div`,{className:`text-sm leading-5 text-muted-foreground`,children:e.description}),e.actions&&(0,i.jsx)(`div`,{className:`pt-1`,children:e.actions})]})]});return(0,i.jsxs)(`div`,{"data-slot":`activity-feed-item`,className:t.cn(`relative flex gap-3 pb-4 last:pb-0`,y&&`gap-2 pb-3`,h,e.className),children:[f&&n<_.length-1&&(0,i.jsx)(`div`,{"data-slot":`activity-feed-connector`,className:t.cn(`absolute left-5 top-8 h-[calc(100%-2rem)] w-px bg-border`,p)}),e.href?(0,i.jsx)(`a`,{href:e.href,target:e.target,rel:e.rel,className:t.cn(`flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 transition-[background-color,border-color,box-shadow]`,r&&`hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`),children:o}):r?(0,i.jsx)(`button`,{type:`button`,className:`flex min-w-0 flex-1 gap-3 rounded-[var(--radius-lg)] px-2 py-1.5 text-left transition-[background-color,border-color,box-shadow] hover:bg-muted/35 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40`,onClick:e.onSelect,children:o}):(0,i.jsx)(`div`,{className:`flex min-w-0 flex-1 gap-3 px-2 py-1.5`,children:o})]},e.id)})})]})}exports.ActivityFeed=o;

package/dist/src/components/display/activity-feed.js

@@ -70,7 +70,10 @@ function u({ className: u, title: d, description: f, actions: p, items: m, empty
 				return /* @__PURE__ */ c("div", {
 					"data-slot": "activity-feed-item",
 					className: e("relative flex gap-3 pb-4 last:pb-0", T && "gap-2 pb-3", x, t.className),
-					children: [v && n < C.length - 1 && /* @__PURE__ */ s("div", { className: e("absolute left-3 top-7 h-[calc(100%-1.75rem)] w-px bg-border", y) }), t.href ? /* @__PURE__ */ s("a", {
+					children: [v && n < C.length - 1 && /* @__PURE__ */ s("div", {
+						"data-slot": "activity-feed-connector",
+						className: e("absolute left-5 top-8 h-[calc(100%-2rem)] w-px bg-border", y)
+					}), t.href ? /* @__PURE__ */ s("a", {
 						href: t.href,
 						target: t.target,
 						rel: t.rel,

package/dist/src/components/display/chat.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../../../_virtual/_rolldown/runtime.cjs"),t=require("../../lib/utils.cjs"),n=require("../ui/button/index.cjs"),r=require("../ui/badge/index.cjs"),i=require("../ui/textarea/index.cjs"),a=require("../ui/input/index.cjs"),o=require("./avatar.cjs");let s=require("react");s=e.__toESM(s,1);let c=require("lucide-react"),l=require("react/jsx-runtime");function u({sidebar:e,details:n,children:r,className:i,...a}){return(0,l.jsxs)(`section`,{"data-slot":`chat-shell`,className:t.cn(`grid min-h-[34rem] overflow-hidden rounded-lg border bg-background shadow-sm lg:grid-cols-[18rem_minmax(0,1fr)]`,n&&`xl:grid-cols-[18rem_minmax(0,1fr)_17rem]`,i),...a,children:[e?(0,l.jsx)(`aside`,{"data-slot":`chat-sidebar`,className:`min-h-0 border-b lg:border-b-0 lg:border-r`,children:e}):null,(0,l.jsx)(`div`,{"data-slot":`chat-main`,className:`grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)_auto]`,children:r}),n?(0,l.jsx)(`aside`,{"data-slot":`chat-details`,className:`hidden min-h-0 border-l xl:block`,children:n}):null]})}function d({participant:e,description:n,actions:r,className:i,...a}){return(0,l.jsxs)(`header`,{"data-slot":`chat-header`,className:t.cn(`flex min-h-16 items-center gap-3 border-b px-4 py-2.5`,i),...a,children:[(0,l.jsx)(o.Avatar,{size:`sm`,name:e.name,src:e.avatar,fallback:e.fallback,status:e.status}),(0,l.jsxs)(`div`,{className:`min-w-0 flex-1`,children:[(0,l.jsx)(`div`,{className:`truncate text-sm font-semibold`,children:e.name}),(0,l.jsx)(`div`,{className:`truncate text-xs text-muted-foreground`,children:n??(e.status===`online`?`Online`:e.status)})]}),(0,l.jsx)(`div`,{className:`flex shrink-0 items-center gap-1`,children:r})]})}function f({items:e,selectedKey:n,defaultSelectedKey:i,onSelect:u,searchable:d=!0,searchPlaceholder:f=`Search conversations...`,empty:p=`No conversations found.`,className:m,...h}){let[g,_]=s.useState(i),[v,y]=s.useState(``),b=n??g,x=e.filter(e=>`${e.participant.name} ${String(e.preview??``)}`.toLowerCase().includes(v.trim().toLowerCase()));return(0,l.jsxs)(`div`,{"data-slot":`conversation-list`,className:t.cn(`grid h-full min-h-0 grid-rows-[auto_minmax(0,1fr)]`,m),...h,children:[d?(0,l.jsx)(`div`,{className:`border-b p-3`,children:(0,l.jsx)(a.Input,{type:`search`,value:v,onValueChange:y,placeholder:f,leading:(0,l.jsx)(c.SearchIcon,{}),clearable:!0,"aria-label":f})}):(0,l.jsx)(`span`,{}),(0,l.jsx)(`div`,{role:`listbox`,"aria-label":`Conversations`,className:`min-h-0 overflow-y-auto p-2`,children:x.length?x.map(e=>{let t=e.key===b;return(0,l.jsxs)(`button`,{type:`button`,role:`option`,"aria-selected":t,"data-selected":t||void 0,className:`flex w-full items-start gap-3 rounded-md px-2.5 py-2.5 text-left outline-none transition-colors hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring data-[selected=true]:bg-accent`,onClick:()=>{n===void 0&&_(e.key),u?.(e)},children:[(0,l.jsx)(o.Avatar,{size:`sm`,name:e.participant.name,src:e.participant.avatar,fallback:e.participant.fallback,status:e.participant.status}),(0,l.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,l.jsxs)(`span`,{className:`flex items-center gap-2`,children:[(0,l.jsx)(`strong`,{className:`min-w-0 flex-1 truncate text-sm font-medium`,children:e.participant.name}),(0,l.jsx)(`span`,{className:`shrink-0 text-[11px] text-muted-foreground`,children:e.time})]}),(0,l.jsxs)(`span`,{className:`mt-0.5 flex items-center gap-2`,children:[(0,l.jsx)(`span`,{className:`min-w-0 flex-1 truncate text-xs text-muted-foreground`,children:e.preview}),e.unread?(0,l.jsx)(r.Badge,{size:`sm`,label:e.unread}):null]})]})]},e.key)}):(0,l.jsx)(`div`,{className:`grid min-h-32 place-items-center px-4 text-center text-sm text-muted-foreground`,children:p})})]})}function p({autoScroll:e=!0,empty:n=`No messages yet.`,children:r,className:i,...a}){let o=s.useRef(null);return s.useEffect(()=>{let t=o.current;!e||!t||(typeof t.scrollTo==`function`?t.scrollTo({top:t.scrollHeight,behavior:`smooth`}):t.scrollTop=t.scrollHeight)},[e,r]),(0,l.jsx)(`div`,{ref:o,"data-slot":`chat-message-list`,role:`log`,"aria-live":`polite`,className:t.cn(`min-h-0 overflow-y-auto bg-muted/15 px-4 py-5`,i),...a,children:s.Children.count(r)?(0,l.jsx)(`div`,{className:`mx-auto grid w-full max-w-3xl gap-4`,children:r}):(0,l.jsx)(`div`,{className:`grid h-full place-items-center text-sm text-muted-foreground`,children:n})})}function m({name:e,size:r,type:i,href:a,preview:o,onRemove:s,attachmentKey:u,className:d,...f}){let p=(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(`span`,{className:`grid size-9 shrink-0 place-items-center overflow-hidden rounded-md bg-muted`,children:o?(0,l.jsx)(`img`,{src:o,alt:``,className:`size-full object-cover`}):(0,l.jsx)(c.FileIcon,{className:`size-4`})}),(0,l.jsxs)(`span`,{className:`min-w-0 flex-1`,children:[(0,l.jsx)(`span`,{className:`block truncate text-xs font-medium text-foreground`,children:e}),(0,l.jsx)(`span`,{className:`block truncate text-[11px] text-muted-foreground`,children:[i,r].filter(Boolean).join(` · `)})]})]});return(0,l.jsxs)(`div`,{"data-slot":`chat-attachment`,className:t.cn(`flex min-w-0 items-center gap-2 rounded-md border bg-background p-2`,d),...f,children:[a?(0,l.jsx)(`a`,{href:a,className:`flex min-w-0 flex-1 items-center gap-2 outline-none focus-visible:ring-2 focus-visible:ring-ring`,children:p}):p,s?(0,l.jsx)(n.Button,{type:`button`,size:`icon-xs`,variant:`ghost`,iconOnly:!0,"aria-label":`Remove ${e}`,onClick:s,children:(0,l.jsx)(c.XIcon,{})}):null]})}function h({participant:e,outgoing:n=!1,time:r,status:i,replyTo:a,attachments:s,reactions:u,onReaction:d,actions:f,children:p,className:h,...g}){let _=i===`delivered`||i===`read`?c.CheckCheckIcon:c.CheckIcon;return(0,l.jsxs)(`article`,{"data-slot":`chat-message`,"data-outgoing":n||void 0,className:t.cn(`group flex max-w-[88%] items-end gap-2 justify-self-start data-[outgoing=true]:justify-self-end data-[outgoing=true]:flex-row-reverse sm:max-w-[75%]`,h),...g,children:[e?(0,l.jsx)(o.Avatar,{size:`xs`,name:e.name,src:e.avatar,fallback:e.fallback}):null,(0,l.jsxs)(`div`,{className:`min-w-0`,children:[e&&!n?(0,l.jsx)(`div`,{className:`mb-1 px-1 text-[11px] font-medium text-muted-foreground`,children:e.name}):null,(0,l.jsxs)(`div`,{className:t.cn(`rounded-lg rounded-bl-sm border bg-background px-3 py-2 text-sm leading-5 shadow-sm`,n&&`rounded-bl-lg rounded-br-sm border-primary bg-primary text-primary-foreground`),children:[a?(0,l.jsx)(`div`,{className:t.cn(`mb-2 border-l-2 pl-2 text-xs opacity-75`,n?`border-primary-foreground/60`:`border-primary`),children:a}):null,(0,l.jsx)(`div`,{className:`whitespace-pre-wrap break-words`,children:p}),s?.length?(0,l.jsx)(`div`,{className:`mt-2 grid gap-1.5`,children:s.map(({key:e,...t})=>(0,l.jsx)(m,{attachmentKey:e,...t,className:n?`border-primary-foreground/20 bg-primary-foreground/10 text-primary-foreground`:void 0},e))}):null,(0,l.jsxs)(`div`,{className:t.cn(`mt-1 flex items-center justify-end gap-1 text-[10px] text-muted-foreground`,n&&`text-primary-foreground/75`),children:[(0,l.jsx)(`span`,{children:r}),i&&i!==`failed`&&i!==`sending`?(0,l.jsx)(_,{className:t.cn(`size-3`,i===`read`&&`text-sky-300`)}):null,i===`sending`?(0,l.jsx)(`span`,{children:`Sending...`}):null,i===`failed`?(0,l.jsx)(`span`,{className:`font-medium text-destructive`,children:`Failed`}):null]})]}),u?.length?(0,l.jsx)(`div`,{className:t.cn(`mt-1 flex flex-wrap gap-1`,n&&`justify-end`),children:u.map(e=>(0,l.jsxs)(`button`,{type:`button`,"aria-pressed":e.active,className:`rounded-full border bg-background px-2 py-0.5 text-[11px] shadow-sm outline-none hover:bg-muted focus-visible:ring-2 focus-visible:ring-ring aria-pressed:border-primary aria-pressed:bg-primary/10`,onClick:()=>d?.(e.key),children:[e.label,e.count?` ${e.count}`:``]},e.key))}):null]}),f?(0,l.jsx)(`div`,{className:`self-center opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100`,children:f}):null]})}function g({participant:e,className:n,...r}){return(0,l.jsxs)(`div`,{"data-slot":`chat-typing`,className:t.cn(`flex items-center gap-2 text-xs text-muted-foreground`,n),...r,children:[e?(0,l.jsx)(o.Avatar,{size:`xs`,name:e.name,src:e.avatar,fallback:e.fallback}):null,(0,l.jsxs)(`span`,{className:`flex items-center gap-1 rounded-full border bg-background px-3 py-2`,children:[(0,l.jsx)(`span`,{className:`size-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.2s]`}),(0,l.jsx)(`span`,{className:`size-1.5 animate-bounce rounded-full bg-current [animation-delay:-0.1s]`}),(0,l.jsx)(`span`,{className:`size-1.5 animate-bounce rounded-full bg-current`})]})]})}function _({value:e,defaultValue:r=``,onValueChange:a,onSend:o,placeholder:u=`Write a message...`,disabled:d=!1,sending:f=!1,attachments:p,onRemoveAttachment:h,onAttachmentClick:g,onEmojiClick:_,maxLength:v,submitLabel:y=`Send message`,className:b,...x}){let[S,C]=s.useState(r),w=e??S,T=t=>{e===void 0&&C(t),a?.(t)},E=async()=>{let e=w.trim();!e||d||f||(await o(e),T(``))};return(0,l.jsxs)(`form`,{"data-slot":`chat-composer`,className:t.cn(`border-t bg-background p-3`,b),onSubmit:e=>{e.preventDefault(),E()},...x,children:[p?.length?(0,l.jsx)(`div`,{className:`mb-2 grid gap-2 sm:grid-cols-2`,children:p.map(({key:e,...t})=>(0,l.jsx)(m,{attachmentKey:e,...t,onRemove:h?()=>h(e):void 0},e))}):null,(0,l.jsxs)(`div`,{className:`flex items-end gap-2 rounded-lg border bg-background p-1.5 shadow-sm transition-[border-color,box-shadow] focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/20`,children:[g?(0,l.jsx)(n.Button,{type:`button`,size:`icon-sm`,variant:`ghost`,iconOnly:!0,"aria-label":`Attach file`,onClick:g,children:(0,l.jsx)(c.PaperclipIcon,{})}):null,(0,l.jsx)(i.Textarea,{value:w,onValueChange:T,rows:1,maxLength:v,disabled:d,placeholder:u,"aria-label":u,className:`max-h-36 min-h-9 resize-none border-0 bg-transparent px-2 py-2 font-normal shadow-none focus-visible:shadow-none`,onKeyDown:e=>{e.key===`Enter`&&!e.shiftKey&&(e.preventDefault(),E())}}),_?(0,l.jsx)(n.Button,{type:`button`,size:`icon-sm`,variant:`ghost`,iconOnly:!0,"aria-label":`Choose emoji`,onClick:_,children:(0,l.jsx)(c.SmileIcon,{})}):null,(0,l.jsx)(n.Button,{type:`submit`,size:`icon-sm`,iconOnly:!0,"aria-label":y,loading:f,disabled:d||!w.trim(),children:(0,l.jsx)(c.SendIcon,{})})]})]})}function v(){return(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(n.Button,{size:`icon-sm`,variant:`ghost`,iconOnly:!0,"aria-label":`Search conversation`,children:(0,l.jsx)(c.SearchIcon,{})}),(0,l.jsx)(n.Button,{size:`icon-sm`,variant:`ghost`,iconOnly:!0,"aria-label":`More conversation actions`,children:(0,l.jsx)(c.MoreHorizontalIcon,{})})]})}exports.ChatAttachment=m,exports.ChatComposer=_,exports.ChatHeader=d,exports.ChatHeaderActions=v,exports.ChatMessage=h,exports.ChatMessageList=p,exports.ChatShell=u,exports.ChatTypingIndicator=g,exports.ConversationList=f;