@neasg/design-system 0.4.7 → 0.4.9

package/dist/notification.js

@@ -0,0 +1,121 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Bell, ClipboardCheck, FileText, MessageSquare, UserCheck, } from "lucide-react";
+import { Button } from "./button";
+import { CountBadge } from "./count-badge";
+import { EmptyState } from "./empty-state";
+import { cn } from "./lib/utils";
+import { Popover } from "./popover";
+import { PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuScrollArea, } from "./popover-menu";
+import { Tabs } from "./tabs";
+import { Typography } from "./typography";
+const notificationKindIcons = {
+    assignment: ClipboardCheck,
+    message: MessageSquare,
+    request: UserCheck,
+    review: FileText,
+    system: Bell,
+};
+const notificationKindTones = {
+    assignment: "info",
+    message: "accent",
+    request: "warning",
+    review: "success",
+    system: "muted",
+};
+const notificationToneClasses = {
+    accent: "border-status-accent-foreground/20 bg-status-accent text-status-accent-foreground",
+    destructive: "border-status-destructive-foreground/20 bg-status-destructive text-status-destructive-foreground",
+    info: "border-status-info-foreground/20 bg-status-info text-status-info-foreground",
+    muted: "border-border bg-muted text-muted-foreground",
+    success: "border-status-success-foreground/20 bg-status-success text-status-success-foreground",
+    warning: "border-status-warning-foreground/20 bg-status-warning text-status-warning-foreground",
+};
+const NotificationTrigger = React.forwardRef(({ count = 0, countMax = 9, countSize = "md", hideCountWhenZero = true, isCollapsed = false, label = "Notifications", triggerVariant = "default", className, size, variant = "ghost", "aria-label": ariaLabel, ...props }, ref) => {
+    const resolvedAriaLabel = ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : (isCollapsed && typeof label === "string" ? label : undefined);
+    return (_jsxs(Button, { ref: ref, type: "button", variant: variant, size: size !== null && size !== void 0 ? size : (isCollapsed ? "icon" : "default"), "aria-label": resolvedAriaLabel, className: cn("relative", triggerVariant === "sidebar" &&
+            (isCollapsed
+                ? "border-none bg-transparent text-muted-foreground shadow-none hover:bg-card hover:text-foreground"
+                : "h-control w-full justify-start gap-2.5 px-3 text-sm font-medium text-muted-foreground shadow-none hover:bg-card hover:text-foreground"), className), ...props, children: [_jsx(Bell, { "aria-hidden": "true", className: "h-4 w-4 shrink-0" }), isCollapsed ? (_jsx(CountBadge, { count: count, max: countMax, size: "sm", hideWhenZero: hideCountWhenZero, className: "pointer-events-none absolute -right-1 -top-1" })) : (_jsxs(_Fragment, { children: [_jsx("span", { className: "flex-1 truncate text-left", children: label }), _jsx(CountBadge, { count: count, size: countSize, hideWhenZero: hideCountWhenZero })] }))] }));
+});
+NotificationTrigger.displayName = "NotificationTrigger";
+const labelLineClasses = {
+    1: "truncate",
+    2: "line-clamp-2",
+};
+const descriptionLineClasses = {
+    1: "truncate",
+    2: "line-clamp-2",
+    3: "line-clamp-3",
+};
+function getNotificationIcon(notification) {
+    var _a, _b;
+    return ((_a = notification.icon) !== null && _a !== void 0 ? _a : notificationKindIcons[(_b = notification.kind) !== null && _b !== void 0 ? _b : "system"]);
+}
+function getNotificationTone(notification) {
+    var _a, _b;
+    return ((_a = notification.tone) !== null && _a !== void 0 ? _a : notificationKindTones[(_b = notification.kind) !== null && _b !== void 0 ? _b : "system"]);
+}
+function NotificationItem({ notification, density = "default", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", className, onClick, onSelect, ...props }) {
+    var _a;
+    const Icon = getNotificationIcon(notification);
+    const tone = getNotificationTone(notification);
+    const isUnread = Boolean(notification.unread);
+    const actions = (_a = notification.actions) !== null && _a !== void 0 ? _a : [];
+    const hasActions = actions.length > 0;
+    const isInteractive = Boolean(!hasActions && (notification.href || onClick || onSelect));
+    const hasHoverSurface = isInteractive || hasActions;
+    const meta = notification.meta ? (notification.dateTime ? (_jsx("time", { dateTime: notification.dateTime, children: notification.meta })) : (_jsx("span", { children: notification.meta }))) : null;
+    const handleClick = (event) => {
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented) {
+            onSelect === null || onSelect === void 0 ? void 0 : onSelect(notification);
+        }
+    };
+    const content = (_jsxs(_Fragment, { children: [_jsx("span", { "aria-hidden": "true", className: cn("mt-0.5 flex shrink-0 items-center justify-center rounded-control border", density === "compact" ? "h-7 w-7" : "h-8 w-8", notificationToneClasses[tone]), children: _jsx(Icon, { className: density === "compact" ? "h-3.5 w-3.5" : "h-4 w-4" }) }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsxs("span", { className: "grid min-w-0 grid-cols-[minmax(0,1fr)_auto] items-start gap-3", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: cn("min-w-0 text-left text-foreground", isUnread ? "font-semibold" : "font-medium", labelLineClasses[labelLines]), children: notification.title }), meta || (isUnread && unreadLabel !== null) ? (_jsxs("span", { className: "flex min-w-0 shrink-0 items-center justify-end gap-1.5 text-right", children: [meta ? (_jsx(Typography, { as: "span", variant: "caption", className: "min-w-0 max-w-24 truncate whitespace-nowrap text-muted-foreground", children: meta })) : null, isUnread && unreadLabel !== null ? (_jsx("span", { "data-slot": "notification-unread-indicator", className: "mt-1 h-2.5 w-2.5 shrink-0 rounded-full bg-primary ring-2 ring-background", children: _jsx("span", { className: "sr-only", children: unreadLabel }) })) : null] })) : null] }), notification.description !== undefined ? (_jsx(Typography, { as: "span", variant: "caption", className: cn("mt-1.5 block text-left", isUnread ? "text-foreground/75" : "text-muted-foreground", descriptionLineClasses[descriptionLines]), children: notification.description })) : null, hasActions ? (_jsx("span", { className: "mt-4 flex flex-wrap gap-2", children: actions.map((action, index) => {
+                            var _a, _b;
+                            return (_jsx(Button, { type: "button", variant: (_a = action.variant) !== null && _a !== void 0 ? _a : (index === 0 ? "outline" : "default"), size: "sm", disabled: action.disabled, className: cn("min-w-24", action.className), onClick: (event) => {
+                                    var _a;
+                                    event.stopPropagation();
+                                    (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action, notification, event);
+                                }, children: action.label }, (_b = action.id) !== null && _b !== void 0 ? _b : index));
+                        }) })) : null] })] }));
+    const itemClassName = cn("group relative flex w-full min-w-0 items-start gap-3 overflow-hidden border-b border-border/70 bg-card text-left text-card-foreground outline-none transition-colors last:border-b-0", density === "compact" ? "px-3 py-3" : "px-4 py-4", isUnread && "bg-primary/[0.045]", hasHoverSurface && "hover:bg-accent/70", isInteractive &&
+        "cursor-pointer focus-visible:z-10 focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset", className);
+    if (notification.href && !hasActions) {
+        return (_jsx("a", { href: notification.href, "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, className: itemClassName, onClick: handleClick, ...props, children: content }));
+    }
+    if (isInteractive) {
+        return (_jsx("button", { type: "button", "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, className: itemClassName, onClick: handleClick, ...props, children: content }));
+    }
+    return (_jsx("div", { "data-slot": "notification-item", "data-unread": isUnread ? "" : undefined, className: itemClassName, ...props, children: content }));
+}
+function NotificationList({ notifications, density = "default", variant = "bordered", labelLines = 2, descriptionLines = 2, unreadLabel = "Unread", emptyState, itemClassName, className, onNotificationClick, ...props }) {
+    const hasNotifications = notifications.length > 0;
+    const resolvedEmptyState = emptyState !== null && emptyState !== void 0 ? emptyState : (_jsx(EmptyState, { message: "No notifications", description: "New updates will appear here.", icon: Bell }));
+    return (_jsx("div", { "data-slot": "notification-list", className: cn("min-w-0 overflow-hidden bg-card text-card-foreground", !hasNotifications && "flex min-h-full flex-col", variant === "bordered" && "rounded-surface border border-border/70", className), ...props, children: hasNotifications
+            ? notifications.map((notification) => (_jsx(NotificationItem, { notification: notification, density: density, labelLines: labelLines, descriptionLines: descriptionLines, unreadLabel: unreadLabel, className: itemClassName, onSelect: onNotificationClick }, notification.id)))
+            : (_jsx("div", { className: "flex min-h-0 flex-1 flex-col justify-center", children: resolvedEmptyState })) }));
+}
+function NotificationPopover({ trigger, notifications, title = "Notifications", filter, defaultFilter = "all", onFilterChange, showFilterTabs = true, height = "h-[36rem]", minHeight = "min-h-[36rem]", maxHeight = "max-h-[36rem]", emptyState, listClassName, itemClassName, unreadLabel = "Unread", markAllAsReadLabel = "Mark all as read", onNotificationClick, onMarkAllAsRead, contentClassName, align = "end", ...popoverProps }) {
+    const [uncontrolledFilter, setUncontrolledFilter] = React.useState(defaultFilter);
+    const activeFilter = filter !== null && filter !== void 0 ? filter : uncontrolledFilter;
+    const setActiveFilter = (nextFilter) => {
+        const resolvedFilter = nextFilter;
+        if (filter === undefined) {
+            setUncontrolledFilter(resolvedFilter);
+        }
+        onFilterChange === null || onFilterChange === void 0 ? void 0 : onFilterChange(resolvedFilter);
+    };
+    const resolvedUnreadCount = notifications.filter((notification) => notification.unread).length;
+    const visibleNotifications = activeFilter === "unread"
+        ? notifications.filter((notification) => notification.unread)
+        : notifications;
+    const resolvedEmptyState = activeFilter === "unread" && emptyState === undefined ? (_jsx(EmptyState, { message: "No unread notifications", description: "You're all caught up.", icon: Bell })) : (emptyState);
+    return (_jsxs(Popover, { surface: "menu", trigger: trigger, align: align, contentClassName: cn("flex w-[32rem] max-w-[calc(100vw-2rem)] flex-col overflow-hidden border-border/80 p-0 ring-1 ring-border/40", height, minHeight, maxHeight, contentClassName), ...popoverProps, children: [_jsxs("div", { className: "flex items-center justify-between gap-4 px-4 py-3", children: [_jsx(Typography, { as: "h3", variant: "label", children: title }), showFilterTabs ? (_jsx(Tabs, { value: activeFilter, onValueChange: setActiveFilter, size: "compact", renderPanels: false, className: "shrink-0 space-y-0", items: [
+                            { value: "all", label: "All", content: null },
+                            { value: "unread", label: "Unread", content: null },
+                        ] })) : null] }), _jsx(PopoverMenuDivider, { className: "mx-0 my-0 shrink-0 bg-border/90" }), _jsx(PopoverMenuScrollArea, { maxHeight: "max-h-none", className: "scrollbar-none min-h-0 flex-1 space-y-0", children: _jsx(NotificationList, { notifications: visibleNotifications, variant: "plain", emptyState: resolvedEmptyState, itemClassName: cn("py-3", itemClassName), unreadLabel: unreadLabel, onNotificationClick: onNotificationClick, className: cn("gap-0", listClassName) }) }), onMarkAllAsRead ? (_jsx(PopoverMenuFooter, { inset: "flush", className: "border-border/80", children: _jsx(PopoverMenuFooterAction, { onClick: onMarkAllAsRead, disabled: resolvedUnreadCount === 0, children: markAllAsReadLabel }) })) : null] }));
+}
+export { NotificationItem, NotificationList, NotificationPopover, NotificationTrigger, };

package/dist/otp-input.js

@@ -7,7 +7,7 @@ import { validateOtp } from "./input-validation";
 import { cn } from "./lib/utils";
 function OtpSlot({ slot, invalid, className, }) {
     var _a, _b;
-    return (_jsxs("div", { "data-slot": "otp-slot", className: cn("relative flex size-10 items-center justify-center rounded-md border bg-transparent text-sm font-medium transition-[border-color,box-shadow,color] outline-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:bg-muted/30 group-data-[disabled=true]/field:text-muted-foreground group-data-[disabled=true]/field:opacity-50", invalid ? "border-destructive" : "border-input", slot.isActive &&
+    return (_jsxs("div", { "data-slot": "otp-slot", className: cn("relative flex size-10 items-center justify-center rounded-control border bg-transparent text-sm font-medium transition-[border-color,box-shadow,color] outline-none group-data-[disabled=true]/field:cursor-not-allowed group-data-[disabled=true]/field:bg-muted/30 group-data-[disabled=true]/field:text-muted-foreground group-data-[disabled=true]/field:opacity-50", invalid ? "border-destructive" : "border-input", slot.isActive &&
             (invalid
                 ? "border-destructive ring-[3px] ring-destructive/20"
                 : "border-ring ring-[3px] ring-ring/50"), className), children: [_jsx("span", { className: cn("pointer-events-none", !slot.char && slot.placeholderChar ? "text-muted-foreground" : ""), children: (_b = (_a = slot.char) !== null && _a !== void 0 ? _a : slot.placeholderChar) !== null && _b !== void 0 ? _b : "" }), slot.hasFakeCaret ? (_jsx("span", { "aria-hidden": "true", className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: _jsx("span", { className: "h-4 w-px animate-pulse bg-foreground" }) })) : null] }));

package/dist/page-header.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Typography } from "./typography";
 function PageHeader({ title, subtitle, breadcrumbs, children, className, ...props }) {
-    return (_jsx("div", { className: className, ...props, children: _jsxs("div", { className: "flex items-center justify-between gap-4", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [breadcrumbs ? _jsx("div", { className: "mb-1", children: breadcrumbs }) : null, _jsx("div", { className: "flex items-center gap-3", children: _jsx(Typography, { as: "h2", variant: "title", children: title }) }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", children: subtitle })) : null] }), children] }) }));
+    return (_jsx("div", { className: className, ...props, children: _jsxs("div", { className: "flex items-center justify-between gap-3", children: [_jsxs("div", { className: "flex min-w-0 flex-col gap-1", children: [breadcrumbs ? _jsx("div", { children: breadcrumbs }) : null, _jsx("div", { className: "flex items-center gap-2", children: _jsx(Typography, { as: "h2", variant: "title", children: title }) }), subtitle ? (_jsx(Typography, { as: "p", variant: "caption", children: subtitle })) : null] }), children] }) }));
 }
 export { PageHeader };

package/dist/page-section.d.ts

@@ -1,7 +1,8 @@
 import * as React from "react";
 export interface PageSectionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: "divided" | "cards";
 }
-declare function PageSectionGroup({ className, ...props }: PageSectionGroupProps): import("react/jsx-runtime").JSX.Element;
+declare function PageSectionGroup({ variant, className, ...props }: PageSectionGroupProps): import("react/jsx-runtime").JSX.Element;
 export interface PageSectionProps extends Omit<React.HTMLAttributes<HTMLElement>, "title"> {
     title: React.ReactNode;
     description?: React.ReactNode;

package/dist/page-section.js

@@ -2,12 +2,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./lib/utils";
 import { Typography } from "./typography";
-function PageSectionGroup({ className, ...props }) {
-    return _jsx("div", { className: cn("divide-y divide-border", className), ...props });
+function PageSectionGroup({ variant = "divided", className, ...props }) {
+    return (_jsx("div", { className: cn(variant === "divided" && "divide-y divide-border", variant === "cards" &&
+            "space-y-4 [&>[data-slot=page-section]]:rounded-surface [&>[data-slot=page-section]]:border [&>[data-slot=page-section]]:border-border/70 [&>[data-slot=page-section]]:bg-card [&>[data-slot=page-section]]:p-5", className), ...props }));
 }
 function PageSection({ title, description, headerAction, titleAdornment, className, headerClassName, contentClassName, children, ...props }) {
     const renderedTitle = React.isValidElement(title) ? (title) : (_jsx(Typography, { as: "h3", variant: "subheading", children: title }));
     const renderedDescription = description == null ? null : React.isValidElement(description) ? (description) : (_jsx(Typography, { as: "p", variant: "caption", children: description }));
-    return (_jsxs("section", { className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex items-center gap-2 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-5", contentClassName), children: children })) : null] }));
+    return (_jsxs("section", { "data-slot": "page-section", className: cn("py-6", className), ...props, children: [_jsxs("div", { className: cn("flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", headerClassName), children: [_jsxs("div", { className: "min-w-0 space-y-1", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [renderedTitle, titleAdornment] }), renderedDescription] }), headerAction ? (_jsx("div", { className: "flex flex-wrap items-center justify-end gap-1.5 sm:shrink-0", children: headerAction })) : null] }), children ? (_jsx("div", { className: cn("pt-4", contentClassName), children: children })) : null] }));
 }
 export { PageSection, PageSectionGroup };

package/dist/pagination.js

@@ -17,9 +17,9 @@ function Pagination({ currentPage, totalPages, totalItems, itemsPerPage = 5, onP
     const normalizedTotalPages = totalPages || 1;
     const startItem = totalItems === 0 ? 0 : (currentPage - 1) * itemsPerPage + 1;
     const endItem = Math.min(currentPage * itemsPerPage, totalItems);
-    return (_jsxs("div", { className: cn("flex items-center justify-between gap-6", className), ...props, children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Showing ", startItem, "-", endItem, " out of ", totalItems] }), _jsxs("div", { className: "flex items-center gap-6", children: [onItemsPerPageChange ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Typography, { as: "span", variant: "caption", children: "Rows per page" }), _jsxs(SelectRoot, { value: itemsPerPage.toString(), onValueChange: (value) => {
+    return (_jsxs("div", { className: cn("flex items-center justify-between gap-4", className), ...props, children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Showing ", startItem, "-", endItem, " out of ", totalItems] }), _jsxs("div", { className: "flex items-center gap-4", children: [onItemsPerPageChange ? (_jsxs("div", { className: "flex items-center gap-1.5", children: [_jsx(Typography, { as: "span", variant: "caption", children: "Rows per page" }), _jsxs(SelectRoot, { value: itemsPerPage.toString(), onValueChange: (value) => {
                                     onItemsPerPageChange(Number(value));
                                     onPageChange(1);
-                                }, children: [_jsx(SelectTrigger, { className: "w-[70px] text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemsPerPageOptions.map((option) => (_jsx(SelectItem, { value: option.toString(), children: option }, option))) })] })] })) : null, _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Page ", currentPage, " of ", normalizedTotalPages] }), _jsx(PaginationNav, { className: "mx-0 w-auto justify-start", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "Go to first page", children: _jsx(ChevronsLeft, { className: "h-4 w-4" }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.max(1, currentPage - 1)), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeftIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.min(normalizedTotalPages, currentPage + 1)), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to next page", children: _jsx(ChevronRightIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(normalizedTotalPages), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to last page", children: _jsx(ChevronsRight, { className: "h-4 w-4" }) }) })] }) })] })] }));
+                                }, children: [_jsx(SelectTrigger, { className: "w-[64px] text-sm", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: itemsPerPageOptions.map((option) => (_jsx(SelectItem, { value: option.toString(), children: option }, option))) })] })] })) : null, _jsxs("div", { className: "text-sm text-muted-foreground", children: ["Page ", currentPage, " of ", normalizedTotalPages] }), _jsx(PaginationNav, { className: "mx-0 w-auto justify-start", children: _jsxs(PaginationContent, { children: [_jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(1), disabled: currentPage === 1, "aria-label": "Go to first page", children: _jsx(ChevronsLeft, { className: "h-4 w-4" }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.max(1, currentPage - 1)), disabled: currentPage === 1, "aria-label": "Go to previous page", children: _jsx(ChevronLeftIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(Math.min(normalizedTotalPages, currentPage + 1)), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to next page", children: _jsx(ChevronRightIcon, { size: 16 }) }) }), _jsx(PaginationItem, { children: _jsx(Button, { type: "button", variant: "outline", size: "icon", onClick: () => onPageChange(normalizedTotalPages), disabled: currentPage === normalizedTotalPages || totalPages === 0, "aria-label": "Go to last page", children: _jsx(ChevronsRight, { className: "h-4 w-4" }) }) })] }) })] })] }));
 }
 export { Pagination };

package/dist/popover-menu.d.ts

@@ -1,4 +1,6 @@
 import * as React from "react";
+import { type ButtonProps } from "./button";
+import { type CheckboxProps } from "./checkbox";
 import { InputControl } from "./input-control";
 import { PopoverContent } from "./popover-primitive";
 import { Typography } from "./typography";
@@ -15,9 +17,24 @@ export interface PopoverMenuItemProps extends React.ButtonHTMLAttributes<HTMLBut
     active?: boolean;
 }
 declare function PopoverMenuItem({ className, children, active, type, ...props }: PopoverMenuItemProps): import("react/jsx-runtime").JSX.Element;
+export interface PopoverMenuCheckboxItemProps extends Omit<CheckboxProps, "className" | "label"> {
+    description?: React.ReactNode;
+    className?: string;
+}
+declare function PopoverMenuCheckboxItem({ className, children, checked, description, disabled, onChange, readOnly, ...props }: PopoverMenuCheckboxItemProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverMenuDividerProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function PopoverMenuDivider({ className, ...props }: PopoverMenuDividerProps): import("react/jsx-runtime").JSX.Element;
+export interface PopoverMenuFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    inset?: "menu" | "flush";
+}
+declare function PopoverMenuFooter({ className, children, inset, ...props }: PopoverMenuFooterProps): import("react/jsx-runtime").JSX.Element;
+export interface PopoverMenuFooterActionProps extends Omit<ButtonProps, "variant" | "size"> {
+}
+declare function PopoverMenuFooterAction({ className, type, ...props }: PopoverMenuFooterActionProps): import("react/jsx-runtime").JSX.Element;
+export interface PopoverMenuFooterMetaProps extends Omit<React.ComponentPropsWithoutRef<typeof Typography>, "as" | "asChild" | "variant" | "color"> {
+}
+declare function PopoverMenuFooterMeta({ className, children, ...props }: PopoverMenuFooterMetaProps): import("react/jsx-runtime").JSX.Element;
 export interface PopoverMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function PopoverMenuGroup({ className, children, ...props }: PopoverMenuGroupProps): import("react/jsx-runtime").JSX.Element;
@@ -32,4 +49,9 @@ export interface PopoverMenuScrollAreaProps extends React.HTMLAttributes<HTMLDiv
     maxHeight?: string;
 }
 declare function PopoverMenuScrollArea({ className, children, maxHeight, ...props }: PopoverMenuScrollAreaProps): import("react/jsx-runtime").JSX.Element;
-export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, };
+export interface PopoverMenuViewProps extends React.HTMLAttributes<HTMLDivElement> {
+    direction?: "forward" | "backward" | "none";
+    viewKey?: React.Key;
+}
+declare function PopoverMenuView({ children, className, direction, viewKey, ...props }: PopoverMenuViewProps): import("react/jsx-runtime").JSX.Element;
+export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuCheckboxItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, };

package/dist/popover-menu.js

@@ -3,10 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check } from "lucide-react";
 import { Button } from "./button";
+import { Checkbox } from "./checkbox";
 import { cn } from "./lib/utils";
 import { InputControl } from "./input-control";
 import { PopoverContent } from "./popover-primitive";
 import { Typography } from "./typography";
+const POPOVER_MENU_VIEW_TRANSITION_MS = 300;
+const useIsomorphicLayoutEffect = typeof window === "undefined" ? React.useEffect : React.useLayoutEffect;
 const PopoverMenuContent = React.forwardRef(({ className, ...props }, ref) => (_jsx(PopoverContent, { ref: ref, className: cn("overflow-hidden p-1", className), ...props })));
 PopoverMenuContent.displayName = "PopoverMenuContent";
 function PopoverMenuHeader({ className, children, ...props }) {
@@ -16,21 +19,88 @@ function PopoverMenuSection({ className, children, ...props }) {
     return (_jsx("div", { className: cn("space-y-0", className), ...props, children: children }));
 }
 function PopoverMenuItem({ className, children, active, type = "button", ...props }) {
-    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("w-full justify-start rounded-sm text-left font-normal whitespace-normal", active &&
+    return (_jsxs(Button, { type: type, variant: "ghost", className: cn("h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-2 text-left font-normal whitespace-normal", active &&
             "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground", className), ...props, children: [children, active ? _jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0" }) : null] }));
 }
+function PopoverMenuCheckboxItem({ className, children, checked = false, description, disabled, onChange, readOnly, ...props }) {
+    return (_jsxs("label", { className: cn("flex h-auto min-h-8 w-full cursor-pointer items-start gap-1.5 rounded-sm px-2 py-2 text-left text-popover-foreground outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus-within:bg-accent focus-within:text-accent-foreground", checked && "bg-accent text-accent-foreground", disabled &&
+            "cursor-not-allowed opacity-50 hover:bg-transparent hover:text-inherit", className), children: [_jsx(Checkbox, { ...props, checked: checked, disabled: disabled, readOnly: readOnly !== null && readOnly !== void 0 ? readOnly : !onChange, onChange: onChange, className: "mt-0.5" }), _jsxs("span", { className: "min-w-0 flex-1", children: [_jsx(Typography, { as: "span", variant: "bodySm", className: "block", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", className: "mt-0.5 block", children: description })) : null] })] }));
+}
 function PopoverMenuDivider({ className, ...props }) {
     return _jsx("div", { className: cn("-mx-1 my-1 h-px bg-border", className), ...props });
 }
+function PopoverMenuFooter({ className, children, inset = "menu", ...props }) {
+    return (_jsx("div", { className: cn("flex items-center gap-2 border-t p-1.5", inset === "menu" && "-mx-1 -mb-1", inset === "flush" && "m-0", className), ...props, children: children }));
+}
+function PopoverMenuFooterAction({ className, type = "button", ...props }) {
+    return (_jsx(Button, { type: type, variant: "ghost", size: "sm", className: cn("h-auto min-h-8 w-full justify-start px-2 py-1.5 text-left whitespace-normal", className), ...props }));
+}
+function PopoverMenuFooterMeta({ className, children, ...props }) {
+    return (_jsx(Typography, { as: "span", variant: "bodySm", color: "muted", className: cn("shrink-0 px-2 font-medium", className), ...props, children: children }));
+}
 function PopoverMenuGroup({ className, children, ...props }) {
     return (_jsx("div", { className: cn("space-y-1", className), ...props, children: children }));
 }
 function PopoverMenuGroupLabel({ className, children, ...props }) {
-    return (_jsx(Typography, { as: "p", variant: "eyebrow", color: "muted", className: cn("px-2 py-1.5 font-normal normal-case tracking-normal", className), ...props, children: children }));
+    return (_jsx(Typography, { as: "p", variant: "caption", color: "muted", className: cn("px-2 py-1.5", className), ...props, children: children }));
 }
-const PopoverMenuSearch = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx("div", { className: cn("-mx-1 -mt-1 mb-1 border-b px-2 py-1", containerClassName), children: _jsx(InputControl, { ref: ref, className: cn("h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", className), ...props }) })));
+const PopoverMenuSearch = React.forwardRef(({ className, containerClassName, ...props }, ref) => (_jsx("div", { className: cn("relative -mx-1 -mt-1 mb-1 px-2 py-1 after:absolute after:inset-x-0 after:bottom-0 after:h-px after:bg-border after:content-['']", containerClassName), children: _jsx(InputControl, { ref: ref, className: cn("h-8 border-0 bg-transparent px-2 py-0 text-sm shadow-none focus-visible:ring-0", className), ...props }) })));
 PopoverMenuSearch.displayName = "PopoverMenuSearch";
 function PopoverMenuScrollArea({ className, children, maxHeight = "max-h-64", ...props }) {
-    return (_jsx("div", { className: cn(maxHeight, "space-y-1 overflow-y-auto", className), ...props, children: children }));
+    return (_jsx("div", { className: cn(maxHeight, "space-y-1 overflow-y-auto overflow-x-hidden", className), ...props, children: children }));
+}
+function PopoverMenuView({ children, className, direction = "forward", viewKey = "default", ...props }) {
+    const [activeViewKey, setActiveViewKey] = React.useState(viewKey);
+    const [exitingView, setExitingView] = React.useState(null);
+    const activeViewRef = React.useRef({
+        key: viewKey,
+        children,
+    });
+    const exitTimeoutRef = React.useRef(null);
+    if (Object.is(viewKey, activeViewKey)) {
+        activeViewRef.current = { key: viewKey, children };
+    }
+    useIsomorphicLayoutEffect(() => {
+        const previousView = activeViewRef.current;
+        if (Object.is(viewKey, previousView.key)) {
+            return;
+        }
+        if (exitTimeoutRef.current) {
+            window.clearTimeout(exitTimeoutRef.current);
+            exitTimeoutRef.current = null;
+        }
+        if (direction === "none") {
+            setExitingView(null);
+            activeViewRef.current = { key: viewKey, children };
+            setActiveViewKey(viewKey);
+            return;
+        }
+        setExitingView({
+            key: previousView.key,
+            children: previousView.children,
+            direction,
+        });
+        activeViewRef.current = { key: viewKey, children };
+        setActiveViewKey(viewKey);
+        exitTimeoutRef.current = window.setTimeout(() => {
+            setExitingView((current) => (current === null || current === void 0 ? void 0 : current.key) === previousView.key ? null : current);
+            exitTimeoutRef.current = null;
+        }, POPOVER_MENU_VIEW_TRANSITION_MS);
+        return () => {
+            if (exitTimeoutRef.current) {
+                window.clearTimeout(exitTimeoutRef.current);
+                exitTimeoutRef.current = null;
+            }
+        };
+    }, [direction, viewKey]);
+    const activeDirection = exitingView === null || exitingView === void 0 ? void 0 : exitingView.direction;
+    const shouldAnimateActive = Boolean(activeDirection);
+    return (_jsxs("div", { className: cn("grid min-w-0 overflow-hidden", className), ...props, children: [exitingView ? (_jsx("div", { "aria-hidden": "true", className: cn("pointer-events-none col-start-1 row-start-1 min-w-0", exitingView.direction !== "none" &&
+                    "motion-safe:animate-out motion-safe:fade-out-0 motion-safe:duration-300 motion-reduce:animate-none", exitingView.direction === "forward" &&
+                    "motion-safe:slide-out-to-left-full", exitingView.direction === "backward" &&
+                    "motion-safe:slide-out-to-right-full"), children: exitingView.children }, `leaving-${exitingView.key}`)) : null, _jsx("div", { className: cn("col-start-1 row-start-1 min-w-0", shouldAnimateActive &&
+                    "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:duration-300 motion-reduce:animate-none", activeDirection === "forward" &&
+                    "motion-safe:slide-in-from-right-full", activeDirection === "backward" &&
+                    "motion-safe:slide-in-from-left-full"), children: children }, viewKey)] }));
 }
-export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuDivider, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, };
+export { PopoverMenuContent, PopoverMenuHeader, PopoverMenuSection, PopoverMenuItem, PopoverMenuCheckboxItem, PopoverMenuDivider, PopoverMenuFooter, PopoverMenuFooterAction, PopoverMenuFooterMeta, PopoverMenuGroup, PopoverMenuGroupLabel, PopoverMenuSearch, PopoverMenuScrollArea, PopoverMenuView, };

package/dist/popover-primitive.js

@@ -6,6 +6,6 @@ import { cn } from "./lib/utils";
 const PopoverRoot = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverAnchor = PopoverPrimitive.Anchor;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("shadow-overlay-strong z-50 w-72 rounded-overlay border bg-popover p-4 text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { PopoverAnchor, PopoverContent, PopoverRoot, PopoverTrigger };

package/dist/progress.d.ts

@@ -3,8 +3,11 @@ export interface ProgressProps extends React.HTMLAttributes<HTMLDivElement> {
     value?: number;
     max?: number;
     showValue?: boolean;
-    size?: "sm" | "md" | "lg";
+    size?: "xs" | "sm" | "md" | "lg";
     variant?: "default" | "success" | "error";
     label?: string;
+    shape?: "rounded" | "square";
+    trackClassName?: string;
+    indicatorClassName?: string;
 }
-export declare function Progress({ value, max, showValue, size, variant, label, className, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;
+export declare function Progress({ value, max, showValue, size, variant, label, shape, className, trackClassName, indicatorClassName, ...props }: ProgressProps): import("react/jsx-runtime").JSX.Element;

package/dist/progress.js

@@ -2,6 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 const sizeClasses = {
+    xs: "h-[3px]",
     sm: "h-1",
     md: "h-2",
     lg: "h-3",
@@ -11,7 +12,9 @@ const variantClasses = {
     success: "bg-green-500",
     error: "bg-destructive",
 };
-export function Progress({ value = 0, max = 100, showValue = false, size = "md", variant = "default", label = "Progress", className, ...props }) {
-    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
-    return (_jsxs("div", { className: cn("w-full", className), ...props, children: [_jsx("div", { className: cn("w-full overflow-hidden rounded-full bg-secondary", sizeClasses[size]), role: "progressbar", "aria-valuenow": value, "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label, children: _jsx("div", { className: cn("h-full rounded-full transition-all duration-300 ease-out", variantClasses[variant]), style: { width: `${percentage}%` } }) }), showValue && (_jsxs("p", { className: "mt-1 text-right text-xs text-muted-foreground", children: [Math.round(percentage), "%"] }))] }));
+export function Progress({ value = 0, max = 100, showValue = false, size = "md", variant = "default", label = "Progress", shape = "rounded", className, trackClassName, indicatorClassName, ...props }) {
+    const safeMax = max > 0 ? max : 100;
+    const clampedValue = Math.min(Math.max(value, 0), safeMax);
+    const percentage = Math.min(Math.max((clampedValue / safeMax) * 100, 0), 100);
+    return (_jsxs("div", { className: cn("w-full", className), ...props, children: [_jsx("div", { className: cn("w-full overflow-hidden bg-secondary", shape === "rounded" ? "rounded-full" : "rounded-none", sizeClasses[size], trackClassName), role: "progressbar", "aria-valuenow": clampedValue, "aria-valuemin": 0, "aria-valuemax": safeMax, "aria-label": label, children: _jsx("div", { className: cn("h-full transition-all duration-300 ease-out", shape === "rounded" ? "rounded-full" : "rounded-none", variantClasses[variant], indicatorClassName), style: { width: `${percentage}%` } }) }), showValue && (_jsxs("p", { className: "mt-1 text-right text-xs text-muted-foreground", children: [Math.round(percentage), "%"] }))] }));
 }

package/dist/radio-group.d.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+export interface RadioGroupOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+}
+export interface RadioGroupProps extends Omit<React.FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange"> {
+    options: RadioGroupOption[];
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    name?: string;
+    label?: React.ReactNode;
+    hideLabel?: boolean;
+    description?: React.ReactNode;
+    orientation?: "horizontal" | "vertical";
+    groupClassName?: string;
+    optionClassName?: string;
+}
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/radio-group.js

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+function useControllableValue({ value, defaultValue, onValueChange, }) {
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(defaultValue);
+    const isControlled = value !== undefined;
+    const currentValue = isControlled ? value : uncontrolledValue;
+    const setValue = React.useCallback((nextValue) => {
+        if (!isControlled) {
+            setUncontrolledValue(nextValue);
+        }
+        onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(nextValue);
+    }, [isControlled, onValueChange]);
+    return [currentValue, setValue];
+}
+export const RadioGroup = React.forwardRef(({ className, optionClassName, options, value, defaultValue, onValueChange, name, label, hideLabel = false, description, orientation = "horizontal", groupClassName, disabled, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, ...props }, ref) => {
+    const generatedId = React.useId();
+    const groupName = name !== null && name !== void 0 ? name : `radio-group-${generatedId.replace(/:/g, "")}`;
+    const labelId = label ? `${groupName}-label` : undefined;
+    const descriptionId = description ? `${groupName}-description` : undefined;
+    const [currentValue, setCurrentValue] = useControllableValue({
+        value,
+        defaultValue,
+        onValueChange,
+    });
+    return (_jsxs("fieldset", { ref: ref, disabled: disabled, className: cn("min-w-0 border-0 p-0", className), ...props, children: [label ? (_jsx("legend", { id: labelId, className: cn("mb-2 text-sm font-medium text-foreground", hideLabel && "sr-only"), children: label })) : null, description ? (_jsx(Typography, { as: "p", id: descriptionId, variant: "caption", color: "muted", className: cn("mb-2", hideLabel && "sr-only"), children: description })) : null, _jsx("div", { role: "radiogroup", "aria-orientation": orientation, "aria-labelledby": labelId !== null && labelId !== void 0 ? labelId : ariaLabelledBy, "aria-describedby": descriptionId !== null && descriptionId !== void 0 ? descriptionId : ariaDescribedBy, className: cn(orientation === "horizontal"
+                    ? "flex flex-wrap items-center gap-4"
+                    : "grid gap-2", groupClassName), children: options.map((option, optionIndex) => {
+                    const optionId = `${groupName}-option-${optionIndex}`;
+                    const checked = currentValue === option.value;
+                    const optionDisabled = disabled || option.disabled;
+                    return (_jsxs("label", { htmlFor: optionId, className: cn("inline-flex min-w-0 cursor-pointer items-start gap-2 text-sm text-foreground", optionDisabled && "cursor-not-allowed opacity-50", optionClassName), children: [_jsxs("span", { className: cn("relative mt-0.5 inline-flex size-3.5 shrink-0 items-center justify-center rounded-full border bg-background transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", checked ? "border-primary" : "border-input"), children: [_jsx("span", { className: cn("size-2 rounded-full bg-primary transition-transform", checked ? "scale-100" : "scale-0") }), _jsx("input", { id: optionId, type: "radio", name: groupName, value: option.value, checked: checked, disabled: optionDisabled, onChange: (event) => {
+                                            if (event.target.checked) {
+                                                setCurrentValue(option.value);
+                                            }
+                                        }, className: "absolute inset-0 cursor-pointer opacity-0 disabled:cursor-not-allowed" })] }), _jsxs("span", { className: "min-w-0", children: [_jsx(Typography, { as: "span", variant: "bodySm", children: option.label }), option.description ? (_jsx(Typography, { as: "p", variant: "caption", color: "muted", children: option.description })) : null] })] }, option.value));
+                }) })] }));
+});
+RadioGroup.displayName = "RadioGroup";

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

@@ -0,0 +1,56 @@
+import * as React from "react";
+export interface AttachmentFile {
+    name: string;
+    size: number;
+    type: string;
+    file: File;
+}
+export type TemplateContext = Record<string, string | null | undefined>;
+export interface RichTextEditorTemplate {
+    id: string;
+    name: string;
+    content: string;
+    category?: string | null;
+    description?: string | null;
+}
+export interface RichTextEditorColor {
+    name: string;
+    value: string;
+}
+export type RichTextEditorSendMetadata = Record<string, unknown>;
+export interface RichTextEditorSendAction {
+    id: string;
+    label: React.ReactNode;
+    metadata?: RichTextEditorSendMetadata;
+    disabled?: boolean;
+}
+export interface RichTextEditorProps {
+    placeholder?: string;
+    editorAriaLabel?: string;
+    header?: React.ReactNode;
+    isExpanded?: boolean;
+    onExpandToggle?: () => void;
+    onSend?: (content: string, attachments?: AttachmentFile[], metadata?: RichTextEditorSendMetadata) => Promise<boolean> | boolean | void;
+    className?: string;
+    maxFileSize?: number;
+    maxFileSizeLabel?: string;
+    acceptedFileTypes?: string;
+    acceptedFileTypesLabel?: string;
+    isSending?: boolean;
+    showTemplates?: boolean;
+    templates?: RichTextEditorTemplate[];
+    templateContext?: TemplateContext;
+    templateCategoryLabels?: Record<string, string>;
+    templateCategoryOrder?: string[];
+    templateCreateHref?: string;
+    templateCreateLabel?: string;
+    onFileRejected?: (message: string) => void;
+    colorPalette?: RichTextEditorColor[];
+    sendLabel?: string;
+    sendingLabel?: string;
+    sendActions?: RichTextEditorSendAction[];
+}
+export declare function formatFileSize(bytes: number): string;
+export declare function sanitizeRichTextHtml(html: string): string;
+export declare function replaceTemplateVariables(content: string, context: TemplateContext): string;
+export declare function RichTextEditor({ placeholder, editorAriaLabel, header, isExpanded, onExpandToggle, onSend, className, maxFileSize, maxFileSizeLabel, acceptedFileTypes, acceptedFileTypesLabel, isSending, showTemplates, templates, templateContext, templateCategoryLabels, templateCategoryOrder, templateCreateHref, templateCreateLabel, onFileRejected, colorPalette, sendLabel, sendingLabel, sendActions, }: RichTextEditorProps): import("react/jsx-runtime").JSX.Element;