@neasg/design-system 0.4.8 → 0.4.9

package/dist/rich-text-editor.js

@@ -0,0 +1,394 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as React from "react";
+import { createPortal } from "react-dom";
+import DOMPurify from "dompurify";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Placeholder from "@tiptap/extension-placeholder";
+import Link from "@tiptap/extension-link";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Color } from "@tiptap/extension-color";
+import Highlight from "@tiptap/extension-highlight";
+import Underline from "@tiptap/extension-underline";
+import { BoldIcon, ChevronDownIcon, HighlighterIcon, ItalicIcon, LinkIcon, ListIcon, ListOrderedIcon, MaximizeIcon, PaletteIcon, PaperclipIcon, PlusIcon, SendIcon, StrikethroughIcon, UnderlineIcon, XIcon, } from "./animated-icons";
+import { Button } from "./button";
+import { DropdownButton } from "./dropdown-button";
+import { Input } from "./input";
+import { inputControlPaddingClassName } from "./input-control";
+import { Popover } from "./popover";
+import { PopoverMenuItem, PopoverMenuSection } from "./popover-menu";
+import { Tooltip } from "./tooltip";
+import { cn } from "./lib/utils";
+const DEFAULT_MAX_FILE_SIZE = 10 * 1024 * 1024;
+const DEFAULT_MAX_FILE_SIZE_LABEL = "10MB";
+const DEFAULT_ACCEPTED_FILE_TYPES = "*";
+const DEFAULT_ACCEPTED_FILE_TYPES_LABEL = "Any file type";
+const DEFAULT_TEMPLATE_CATEGORY = "GENERAL";
+const DEFAULT_COLOR_PALETTE = [
+    { name: "Default", value: "" },
+    { name: "Red", value: "#dc2626" },
+    { name: "Orange", value: "#ea580c" },
+    { name: "Yellow", value: "#ca8a04" },
+    { name: "Green", value: "#16a34a" },
+    { name: "Blue", value: "#2563eb" },
+    { name: "Purple", value: "#9333ea" },
+    { name: "Pink", value: "#db2777" },
+    { name: "Gray", value: "#6b7280" },
+];
+const DOMPURIFY_ALLOWED_TAGS = [
+    "p",
+    "br",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "blockquote",
+    "pre",
+    "code",
+    "hr",
+    "ul",
+    "ol",
+    "li",
+    "strong",
+    "b",
+    "em",
+    "i",
+    "u",
+    "s",
+    "strike",
+    "del",
+    "sub",
+    "sup",
+    "mark",
+    "span",
+    "a",
+];
+const DOMPURIFY_ALLOWED_ATTR = [
+    "href",
+    "target",
+    "rel",
+    "style",
+    "class",
+    "data-color",
+];
+export function formatFileSize(bytes) {
+    if (bytes === 0)
+        return "0 B";
+    const k = 1024;
+    const sizes = ["B", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+export function sanitizeRichTextHtml(html) {
+    return DOMPurify.sanitize(html, {
+        ALLOWED_TAGS: DOMPURIFY_ALLOWED_TAGS,
+        ALLOWED_ATTR: DOMPURIFY_ALLOWED_ATTR,
+        ALLOW_DATA_ATTR: true,
+    });
+}
+function normalizeHtml(html) {
+    return html.replace(/>\s+</g, "><").trim();
+}
+function escapeHtml(text) {
+    const htmlEscapes = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;",
+    };
+    return text.replace(/[&<>"']/g, (char) => htmlEscapes[char]);
+}
+export function replaceTemplateVariables(content, context) {
+    const sanitizedContent = normalizeHtml(sanitizeRichTextHtml(content));
+    const variableMap = Object.fromEntries(Object.entries(context).map(([key, value]) => [
+        key.toLowerCase(),
+        value ? escapeHtml(value) : undefined,
+    ]));
+    const highlightStart = '<mark data-color="#fef08a" style="background-color: #fef08a;">';
+    const highlightEnd = "</mark>";
+    let result = sanitizedContent.replace(/\{\{(\w+)\}\}/gi, (match, varName) => {
+        const value = variableMap[varName.toLowerCase()];
+        return value ? value : `${highlightStart}${match}${highlightEnd}`;
+    });
+    result = result.replace(/\[([^\]]+)\]/g, (match) => {
+        return `${highlightStart}${match}${highlightEnd}`;
+    });
+    return result;
+}
+function ToolbarIconButton({ active, label, onClick, children, }) {
+    return (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn("h-8 w-8", active && "bg-muted"), onClick: onClick, "aria-label": label, title: label, children: children }));
+}
+function getTemplateCategory(template) {
+    return template.category || DEFAULT_TEMPLATE_CATEGORY;
+}
+export function RichTextEditor({ placeholder = "Type message here...", editorAriaLabel = "Message body", header, isExpanded = false, onExpandToggle, onSend, className, maxFileSize = DEFAULT_MAX_FILE_SIZE, maxFileSizeLabel = DEFAULT_MAX_FILE_SIZE_LABEL, acceptedFileTypes = DEFAULT_ACCEPTED_FILE_TYPES, acceptedFileTypesLabel = DEFAULT_ACCEPTED_FILE_TYPES_LABEL, isSending = false, showTemplates = true, templates = [], templateContext = {}, templateCategoryLabels = {}, templateCategoryOrder, templateCreateHref, templateCreateLabel = "Create new template", onFileRejected, colorPalette = DEFAULT_COLOR_PALETTE, sendLabel = "Send", sendingLabel = "Sending...", sendActions, }) {
+    const [isEmpty, setIsEmpty] = React.useState(true);
+    const [attachments, setAttachments] = React.useState([]);
+    const [isDragging, setIsDragging] = React.useState(false);
+    const [linkPopoverOpen, setLinkPopoverOpen] = React.useState(false);
+    const [linkUrl, setLinkUrl] = React.useState("");
+    const [linkMenuPosition, setLinkMenuPosition] = React.useState(null);
+    const [templatePopoverOpen, setTemplatePopoverOpen] = React.useState(false);
+    const fileInputRef = React.useRef(null);
+    const dropZoneRef = React.useRef(null);
+    const linkInputRef = React.useRef(null);
+    const linkMenuRef = React.useRef(null);
+    const templatesByCategory = React.useMemo(() => {
+        const grouped = new Map();
+        templates.forEach((template) => {
+            var _a;
+            const category = getTemplateCategory(template);
+            grouped.set(category, [...((_a = grouped.get(category)) !== null && _a !== void 0 ? _a : []), template]);
+        });
+        const categories = (templateCategoryOrder === null || templateCategoryOrder === void 0 ? void 0 : templateCategoryOrder.length)
+            ? [
+                ...templateCategoryOrder,
+                ...Array.from(grouped.keys()).filter((category) => !templateCategoryOrder.includes(category)),
+            ]
+            : Array.from(grouped.keys());
+        return categories
+            .map((category) => {
+            var _a;
+            return ({
+                category,
+                templates: (_a = grouped.get(category)) !== null && _a !== void 0 ? _a : [],
+            });
+        })
+            .filter((group) => group.templates.length > 0);
+    }, [templateCategoryOrder, templates]);
+    const extensions = React.useMemo(() => [
+        StarterKit.configure({
+            heading: false,
+            codeBlock: false,
+            code: false,
+            blockquote: false,
+            horizontalRule: false,
+            link: false,
+            underline: false,
+        }),
+        Placeholder.configure({
+            placeholder,
+        }),
+        Link.configure({
+            openOnClick: false,
+        }),
+        TextStyle,
+        Color,
+        Highlight.configure({
+            multicolor: true,
+        }),
+        Underline,
+    ], [placeholder]);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions,
+        content: "",
+        editorProps: {
+            attributes: {
+                role: "textbox",
+                "aria-multiline": "true",
+                "aria-label": editorAriaLabel,
+                class: cn("prose prose-sm max-w-none focus:outline-none", "min-h-[120px]", inputControlPaddingClassName),
+            },
+        },
+        onUpdate: ({ editor }) => {
+            setIsEmpty(!editor.state.doc.textContent.trim());
+        },
+    });
+    const rejectFile = React.useCallback((message) => {
+        if (onFileRejected) {
+            onFileRejected(message);
+            return;
+        }
+        if (typeof window !== "undefined") {
+            window.alert(message);
+        }
+    }, [onFileRejected]);
+    const handleLinkSubmit = React.useCallback(() => {
+        if (linkUrl && editor) {
+            let url = linkUrl.trim();
+            if (url && !url.match(/^https?:\/\//i)) {
+                url = `https://${url}`;
+            }
+            editor.chain().focus().setLink({ href: url }).run();
+            setLinkUrl("");
+            setLinkPopoverOpen(false);
+            setLinkMenuPosition(null);
+        }
+    }, [editor, linkUrl]);
+    const handleLinkKeyDown = React.useCallback((event) => {
+        if (event.key === "Enter") {
+            event.preventDefault();
+            handleLinkSubmit();
+        }
+        else if (event.key === "Escape") {
+            setLinkUrl("");
+            setLinkPopoverOpen(false);
+            setLinkMenuPosition(null);
+            editor === null || editor === void 0 ? void 0 : editor.chain().focus().run();
+        }
+    }, [editor, handleLinkSubmit]);
+    const isFileTypeAccepted = React.useCallback((file) => {
+        if (acceptedFileTypes === "*")
+            return true;
+        const extensions = acceptedFileTypes
+            .split(",")
+            .map((extension) => extension.trim().toLowerCase());
+        const fileName = file.name.toLowerCase();
+        return extensions.some((extension) => fileName.endsWith(extension));
+    }, [acceptedFileTypes]);
+    const processFiles = React.useCallback((files) => {
+        const newAttachments = [];
+        for (const file of Array.from(files)) {
+            if (file.size > maxFileSize) {
+                rejectFile(`File "${file.name}" exceeds ${formatFileSize(maxFileSize)} limit`);
+                continue;
+            }
+            if (!isFileTypeAccepted(file)) {
+                rejectFile(`File "${file.name}" is not a supported type.\nAccepted: ${acceptedFileTypesLabel}`);
+                continue;
+            }
+            if (attachments.some((item) => item.name === file.name && item.size === file.size)) {
+                continue;
+            }
+            newAttachments.push({
+                name: file.name,
+                size: file.size,
+                type: file.type,
+                file,
+            });
+        }
+        if (newAttachments.length > 0) {
+            setAttachments((previous) => [...previous, ...newAttachments]);
+        }
+    }, [
+        acceptedFileTypesLabel,
+        attachments,
+        isFileTypeAccepted,
+        maxFileSize,
+        rejectFile,
+    ]);
+    const handleFileSelect = React.useCallback((event) => {
+        const files = event.target.files;
+        if (!files)
+            return;
+        processFiles(files);
+        event.target.value = "";
+    }, [processFiles]);
+    const handleDragEnter = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(true);
+    }, []);
+    const handleDragLeave = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (dropZoneRef.current &&
+            !dropZoneRef.current.contains(event.relatedTarget)) {
+            setIsDragging(false);
+        }
+    }, []);
+    const handleDragOver = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+    }, []);
+    const handleDrop = React.useCallback((event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        setIsDragging(false);
+        const files = event.dataTransfer.files;
+        if (files && files.length > 0) {
+            processFiles(files);
+        }
+    }, [processFiles]);
+    const removeAttachment = React.useCallback((index) => {
+        setAttachments((previous) => previous.filter((_, itemIndex) => itemIndex !== index));
+    }, []);
+    const hasContent = !isEmpty || attachments.length > 0;
+    const sendDisabled = !hasContent || isSending || !onSend;
+    const handleSend = async (metadata) => {
+        if (!editor || !onSend || sendDisabled)
+            return;
+        const result = await onSend(editor.getHTML(), attachments.length > 0 ? attachments : undefined, metadata);
+        if (result !== false) {
+            editor.commands.clearContent();
+            setAttachments([]);
+        }
+    };
+    const openLinkMenu = () => {
+        if (!editor || editor.state.selection.empty)
+            return;
+        const { to } = editor.state.selection;
+        const endCoords = editor.view.coordsAtPos(to);
+        const menuWidth = 320;
+        const viewportWidth = window.innerWidth;
+        let left = endCoords.left;
+        if (left + menuWidth > viewportWidth - 16) {
+            left = viewportWidth - menuWidth - 16;
+        }
+        setLinkMenuPosition({
+            top: endCoords.top - 8,
+            left,
+        });
+        setLinkPopoverOpen(true);
+    };
+    const applyTemplate = (template) => {
+        if (!editor)
+            return;
+        const processedContent = replaceTemplateVariables(template.content, templateContext);
+        editor.commands.setContent(processedContent);
+        setIsEmpty(false);
+        setTemplatePopoverOpen(false);
+    };
+    const hasSendActions = Boolean(sendActions === null || sendActions === void 0 ? void 0 : sendActions.length);
+    const sendAction = hasSendActions ? (_jsx(DropdownButton, { className: "w-full", align: "end", disabled: sendDisabled, label: isSending ? sendingLabel : sendLabel, leadingIcon: _jsx(SendIcon, { size: 16 }), split: true, onClick: () => {
+            void handleSend();
+        }, children: _jsx(PopoverMenuSection, { children: sendActions === null || sendActions === void 0 ? void 0 : sendActions.map((action) => (_jsx(PopoverMenuItem, { disabled: sendDisabled || action.disabled, onClick: () => {
+                    void handleSend(action.metadata);
+                }, children: action.label }, action.id))) }) })) : (_jsxs(Button, { type: "button", className: "w-full", disabled: sendDisabled, onClick: () => {
+            void handleSend();
+        }, children: [_jsx(SendIcon, { size: 16 }), isSending ? sendingLabel : sendLabel] }));
+    return (_jsxs("div", { ref: dropZoneRef, onDragEnter: handleDragEnter, onDragLeave: handleDragLeave, onDragOver: handleDragOver, onDrop: handleDrop, className: cn("overflow-hidden rounded-control border bg-background transition-all focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/50", isExpanded && "shadow-md", isDragging && "border-2 border-primary bg-primary/5", className), children: [header && (_jsxs("div", { className: cn("flex items-center justify-between border-b bg-muted dark:bg-muted/30", inputControlPaddingClassName), children: [_jsx("div", { className: "flex-1", children: header }), _jsx("div", { className: "flex items-center gap-2", children: onExpandToggle && (_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-6 w-6", onClick: onExpandToggle, "aria-label": "Expand editor", children: _jsx(MaximizeIcon, { size: 14 }) })) })] })), _jsxs("div", { className: cn("bg-background transition-all", isExpanded ? "min-h-[200px]" : "min-h-[120px]"), children: [_jsx(EditorContent, { editor: editor, className: cn("text-sm", "[&_.ProseMirror]:min-h-[120px] [&_.ProseMirror]:outline-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:text-muted-foreground", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:content-[attr(data-placeholder)]", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:float-left", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:pointer-events-none", "[&_.ProseMirror_p.is-editor-empty:first-child::before]:h-0", "[&_.ProseMirror_ul]:my-2 [&_.ProseMirror_ul]:list-disc [&_.ProseMirror_ul]:pl-6", "[&_.ProseMirror_ol]:my-2 [&_.ProseMirror_ol]:list-decimal [&_.ProseMirror_ol]:pl-6", "[&_.ProseMirror_li]:my-1", "[&_.ProseMirror_ul_ul]:list-[circle] [&_.ProseMirror_ul_ul_ul]:list-[square]") }), linkPopoverOpen &&
+                        linkMenuPosition &&
+                        typeof document !== "undefined" &&
+                        createPortal(_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 z-[99]", onClick: () => {
+                                        setLinkPopoverOpen(false);
+                                        setLinkUrl("");
+                                        setLinkMenuPosition(null);
+                                        editor === null || editor === void 0 ? void 0 : editor.chain().focus().run();
+                                    } }), _jsx("div", { ref: linkMenuRef, className: "fixed z-[100] w-80 animate-in fade-in-0 zoom-in-95 rounded-md border bg-popover p-3 shadow-md", style: {
+                                        top: linkMenuPosition.top,
+                                        left: linkMenuPosition.left,
+                                    }, children: _jsxs("div", { className: "flex items-end gap-2", children: [_jsx(Input, { ref: linkInputRef, label: "URL", id: "link-url", type: "url", placeholder: "https://example.com", value: linkUrl, onChange: (event) => setLinkUrl(event.target.value), onKeyDown: handleLinkKeyDown, inputClassName: "h-8 text-sm", autoFocus: true }), _jsx(Button, { type: "button", className: "h-8 px-3", onClick: handleLinkSubmit, disabled: !linkUrl.trim(), children: "Add" })] }) })] }), document.body)] }), attachments.length > 0 && (_jsx("div", { className: cn("space-y-2 border-t", inputControlPaddingClassName), children: attachments.map((attachment, index) => (_jsxs("div", { className: "flex w-full items-center gap-2 rounded-md border bg-muted px-3 py-2 text-sm dark:bg-muted/50", children: [_jsx(PaperclipIcon, { size: 14, className: "shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: attachment.name }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: formatFileSize(attachment.size) }), _jsx("button", { type: "button", onClick: () => removeAttachment(index), className: "shrink-0 text-muted-foreground hover:text-foreground", "aria-label": `Remove ${attachment.name}`, children: _jsx(XIcon, { size: 14 }) })] }, `${attachment.name}-${attachment.size}-${index}`))) })), _jsx("input", { ref: fileInputRef, type: "file", accept: acceptedFileTypes, multiple: true, onChange: handleFileSelect, className: "hidden" }), _jsx("div", { className: cn("space-y-2 border-t bg-muted dark:bg-muted/30", inputControlPaddingClassName), children: _jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [_jsx(ToolbarIconButton, { label: "Bold", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bold"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBold().run(), children: _jsx(BoldIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Italic", active: editor === null || editor === void 0 ? void 0 : editor.isActive("italic"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleItalic().run(), children: _jsx(ItalicIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Underline", active: editor === null || editor === void 0 ? void 0 : editor.isActive("underline"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleUnderline().run(), children: _jsx(UnderlineIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Strikethrough", active: editor === null || editor === void 0 ? void 0 : editor.isActive("strike"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleStrike().run(), children: _jsx(StrikethroughIcon, { size: 14 }) }), _jsx(Popover, { align: "start", contentClassName: "w-auto p-2", trigger: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn("h-8 w-8", (editor === null || editor === void 0 ? void 0 : editor.isActive("textStyle")) && "bg-muted"), "aria-label": "Text color", title: "Text color", children: _jsx(PaletteIcon, { size: 14, style: {
+                                        color: (editor === null || editor === void 0 ? void 0 : editor.getAttributes("textStyle").color) || undefined,
+                                    } }) }), children: _jsx("div", { className: "grid grid-cols-5 gap-1", children: colorPalette.map((color) => (_jsx("button", { type: "button", title: color.name, className: cn("h-6 w-6 rounded-md border border-border transition-transform hover:scale-110", color.value === "" && "bg-background", (editor === null || editor === void 0 ? void 0 : editor.getAttributes("textStyle").color) === color.value &&
+                                        "ring-2 ring-primary ring-offset-1"), style: {
+                                        backgroundColor: color.value || undefined,
+                                    }, onClick: () => {
+                                        if (color.value === "") {
+                                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetColor().run();
+                                        }
+                                        else {
+                                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setColor(color.value).run();
+                                        }
+                                    }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, color.name))) }) }), _jsx(Popover, { align: "start", contentClassName: "w-auto p-2", trigger: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: cn("h-8 w-8", (editor === null || editor === void 0 ? void 0 : editor.isActive("highlight")) && "bg-muted"), "aria-label": "Highlight color", title: "Highlight color", children: _jsx(HighlighterIcon, { size: 14, style: {
+                                        color: (editor === null || editor === void 0 ? void 0 : editor.getAttributes("highlight").color) || undefined,
+                                    } }) }), children: _jsx("div", { className: "grid grid-cols-5 gap-1", children: colorPalette.map((color) => (_jsx("button", { type: "button", title: color.name, className: cn("h-6 w-6 rounded-md border border-border transition-transform hover:scale-110", color.value === "" && "bg-background", (editor === null || editor === void 0 ? void 0 : editor.getAttributes("highlight").color) === color.value &&
+                                        "ring-2 ring-primary ring-offset-1"), style: {
+                                        backgroundColor: color.value || undefined,
+                                    }, onClick: () => {
+                                        if (color.value === "") {
+                                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().unsetHighlight().run();
+                                        }
+                                        else {
+                                            editor === null || editor === void 0 ? void 0 : editor.chain().focus().setHighlight({ color: color.value }).run();
+                                        }
+                                    }, children: color.value === "" && (_jsx("span", { className: "text-xs text-muted-foreground", children: "A" })) }, `bg-${color.name}`))) }) }), _jsx(ToolbarIconButton, { label: "Bullet list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("bulletList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleBulletList().run(), children: _jsx(ListIcon, { size: 14 }) }), _jsx(ToolbarIconButton, { label: "Ordered list", active: editor === null || editor === void 0 ? void 0 : editor.isActive("orderedList"), onClick: () => editor === null || editor === void 0 ? void 0 : editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrderedIcon, { size: 14 }) }), _jsx(Tooltip, { content: `Attach files (max ${maxFileSizeLabel}) - ${acceptedFileTypesLabel}`, side: "top", contentClassName: "max-w-[240px] text-center", children: _jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "h-8 w-8", onClick: () => { var _a; return (_a = fileInputRef.current) === null || _a === void 0 ? void 0 : _a.click(); }, "aria-label": "Attach files", children: _jsx(PaperclipIcon, { size: 14 }) }) }), _jsx(ToolbarIconButton, { label: "Add link", active: editor === null || editor === void 0 ? void 0 : editor.isActive("link"), onClick: openLinkMenu, children: _jsx(LinkIcon, { size: 14 }) }), showTemplates && templates.length > 0 && (_jsx(_Fragment, { children: _jsxs(Popover, { open: templatePopoverOpen, onOpenChange: setTemplatePopoverOpen, align: "end", contentClassName: "w-96 p-0", trigger: _jsxs(Button, { type: "button", variant: "ghost", className: "h-8 gap-1 text-muted-foreground", children: ["Template", _jsx(ChevronDownIcon, { size: 14 })] }), children: [_jsx("div", { className: "max-h-80 overflow-y-auto", children: templatesByCategory.map(({ category, templates }) => {
+                                            var _a;
+                                            return (_jsxs("div", { children: [_jsx("div", { className: "sticky top-0 bg-muted px-3 py-2 text-sm font-semibold text-foreground", children: (_a = templateCategoryLabels[category]) !== null && _a !== void 0 ? _a : category }), templates.map((template) => (_jsxs("button", { type: "button", className: "w-full border-b border-border/50 px-3 py-2 text-left text-sm transition-colors last:border-0 hover:bg-muted", onClick: () => applyTemplate(template), children: [_jsx("div", { className: "truncate font-medium", children: template.name }), template.description && (_jsx("div", { className: "mt-0.5 truncate text-xs text-muted-foreground", children: template.description }))] }, template.id)))] }, category));
+                                        }) }), templateCreateHref && (_jsx("div", { className: "border-t p-2", children: _jsxs("a", { href: templateCreateHref, target: "_blank", rel: "noopener noreferrer", className: "flex w-full items-center justify-center gap-1.5 rounded-md px-3 py-2 text-sm text-primary transition-colors hover:bg-muted", children: [_jsx(PlusIcon, { size: 16 }), templateCreateLabel] }) }))] }) }))] }) }), _jsx("div", { className: "bg-muted px-3 pb-2 pt-1 dark:bg-background", children: sendAction })] }));
+}

package/dist/routing-timeline.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+export type RoutingTimelineItemKind = "assigned" | "reassigned" | "returned" | "routed" | "system";
+export interface RoutingTimelineItem {
+    id: string;
+    kind?: RoutingTimelineItemKind;
+    title?: React.ReactNode;
+    timestamp?: React.ReactNode;
+    actor?: React.ReactNode;
+    remark?: React.ReactNode;
+    description?: React.ReactNode;
+    from?: React.ReactNode;
+    to?: React.ReactNode;
+    fromLabel?: React.ReactNode;
+    toLabel?: React.ReactNode;
+    badgeLabel?: React.ReactNode;
+}
+export interface RoutingTimelineProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
+    items: RoutingTimelineItem[];
+    emptyMessage?: React.ReactNode;
+}
+declare function RoutingTimeline({ items, emptyMessage, className, ...props }: RoutingTimelineProps): import("react/jsx-runtime").JSX.Element;
+export { RoutingTimeline };

package/dist/routing-timeline.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ArrowDown } from "lucide-react";
+import { Badge } from "./badge";
+import { EmptyState } from "./empty-state";
+import { cn } from "./lib/utils";
+import { Typography } from "./typography";
+const routingKindConfig = {
+    assigned: {
+        title: "Assigned Case",
+        label: "Assigned",
+        badgeVariant: "info",
+        markerClassName: "border-[hsl(var(--status-info-foreground)/0.35)] bg-[hsl(var(--status-info))]",
+    },
+    reassigned: {
+        title: "Reassigned Case",
+        label: "Reassigned",
+        badgeVariant: "accent",
+        markerClassName: "border-[hsl(var(--status-accent-foreground)/0.35)] bg-[hsl(var(--status-accent))]",
+    },
+    returned: {
+        title: "Returned Case",
+        label: "Returned",
+        badgeVariant: "warning",
+        markerClassName: "border-[hsl(var(--status-warning-foreground)/0.35)] bg-[hsl(var(--status-warning))]",
+    },
+    routed: {
+        title: "Case Transferred",
+        label: "Routed",
+        badgeVariant: "secondary",
+        markerClassName: "border-primary/30 bg-primary/15",
+    },
+    system: {
+        title: "System Update",
+        label: "System",
+        badgeVariant: "muted",
+        markerClassName: "border-muted-foreground/30 bg-muted",
+    },
+};
+function RoutingTimelineHandoffEndpoint({ value, }) {
+    const isTextValue = typeof value === "string" || typeof value === "number";
+    return isTextValue ? (_jsx("span", { className: "min-w-0 truncate font-medium text-card-foreground", children: value })) : (_jsx("div", { className: "min-w-0", children: value }));
+}
+function RoutingTimeline({ items, emptyMessage = "No routing activity yet.", className, ...props }) {
+    if (items.length === 0) {
+        return (_jsx(EmptyState, { "data-slot": "routing-timeline", message: emptyMessage, className: cn("border-0 bg-transparent px-0 py-[var(--space-6)]", className), ...props }));
+    }
+    return (_jsx("div", { "data-slot": "routing-timeline", className: cn("min-w-0", className), ...props, children: _jsx("ol", { "data-slot": "routing-timeline-list", className: "relative space-y-0", children: items.map((item) => {
+                var _a, _b, _c, _d;
+                const kind = (_a = item.kind) !== null && _a !== void 0 ? _a : "routed";
+                const config = routingKindConfig[kind];
+                const hasRouteEndpoints = Boolean(item.from || item.to);
+                const hasCompleteRoute = Boolean(item.from && item.to);
+                const title = (_b = item.title) !== null && _b !== void 0 ? _b : config.title;
+                const remark = (_c = item.remark) !== null && _c !== void 0 ? _c : item.description;
+                return (_jsxs("li", { className: "relative grid grid-cols-[var(--space-3)_minmax(0,1fr)] gap-[var(--space-3)] pb-[var(--space-5)] last:pb-0", children: [_jsx("div", { className: "relative flex justify-center", children: _jsx("span", { "aria-hidden": "true", "data-slot": "routing-timeline-marker", className: cn("relative z-10 mt-[var(--space-1)] size-[var(--space-2)] rounded-full border", config.markerClassName) }) }), _jsxs("div", { "data-slot": "routing-timeline-event-card", className: "min-w-0 rounded-surface border border-border/70 bg-card p-[var(--space-3)] text-card-foreground", children: [_jsxs("div", { className: "min-w-0 space-y-[var(--space-1)]", children: [_jsxs("div", { className: "flex min-w-0 items-start justify-between gap-[var(--space-2)]", children: [_jsx(Typography, { as: "p", variant: "label", className: "min-w-0 flex-1 font-semibold", children: title }), _jsx(Badge, { variant: config.badgeVariant, bordered: true, className: "max-w-full shrink-0 self-start", children: (_d = item.badgeLabel) !== null && _d !== void 0 ? _d : config.label })] }), item.timestamp || item.actor ? (_jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-x-[var(--space-1)] gap-y-[var(--space-1)]", children: [item.timestamp ? (_jsx(Typography, { as: "time", variant: "caption", className: "shrink-0", children: item.timestamp })) : null, item.actor ? (_jsxs(Typography, { as: "p", variant: "caption", className: "inline-flex min-w-0 items-center gap-x-[var(--space-1)]", children: [item.timestamp ? (_jsx("span", { "aria-hidden": "true", children: "\u00B7" })) : null, "By ", item.actor] })) : null] })) : null] }), remark ? (_jsx(Typography, { as: "div", variant: "bodySm", "data-slot": "routing-timeline-remark", className: "mt-[var(--space-4)] font-normal", children: remark })) : null, hasRouteEndpoints ? (_jsxs("footer", { "data-slot": "routing-timeline-handoff", "data-complete-route": hasCompleteRoute ? "true" : undefined, className: "mt-[var(--space-4)] flex flex-col space-y-[var(--space-2)] text-xs text-muted-foreground", children: [item.from ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.from })) : null, item.from && item.to ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "sr-only", children: "to" }), _jsx(ArrowDown, { "aria-hidden": "true", "data-slot": "routing-timeline-handoff-arrow", className: "ml-1 size-4 shrink-0 text-muted-foreground" })] })) : null, item.to ? (_jsx(RoutingTimelineHandoffEndpoint, { value: item.to })) : null] })) : null] })] }, item.id));
+            }) }) }));
+}
+export { RoutingTimeline };

package/dist/scroll-hint.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+export interface ScrollHintProps extends React.HTMLAttributes<HTMLDivElement> {
+    visible?: boolean;
+    indicatorClassName?: string;
+    iconClassName?: string;
+}
+declare function ScrollHint({ visible, className, indicatorClassName, iconClassName, ...props }: ScrollHintProps): import("react/jsx-runtime").JSX.Element;
+export { ScrollHint };

package/dist/scroll-hint.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ChevronDown } from "lucide-react";
+import { cn } from "./lib/utils";
+function ScrollHint({ visible = true, className, indicatorClassName, iconClassName, ...props }) {
+    return (_jsx("div", { "aria-hidden": "true", "data-slot": "scroll-hint", className: cn("pointer-events-none absolute inset-x-0 bottom-2 z-10 flex justify-center transition-opacity duration-150 motion-reduce:transition-none", visible ? "opacity-100" : "opacity-0", className), ...props, children: _jsx("div", { "data-slot": "scroll-hint-indicator", className: cn("shadow-overlay-strong flex h-8 w-8 items-center justify-center rounded-full border border-border/80 bg-popover/95 text-muted-foreground ring-1 ring-border/40 backdrop-blur-sm", indicatorClassName), children: _jsx(ChevronDown, { "aria-hidden": "true", className: cn("h-4 w-4 stroke-[2.25]", iconClassName) }) }) }));
+}
+export { ScrollHint };

package/dist/search-input-shell.js

@@ -4,6 +4,6 @@ function SearchInputIcon({ className, size = 16, }) {
     return (_jsxs("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: className, style: { width: size, height: size }, "aria-hidden": "true", children: [_jsx("circle", { cx: "11", cy: "11", r: "8" }), _jsx("path", { d: "m21 21-4.3-4.3" })] }));
 }
 function SearchInputShell({ children, className, iconClassName, iconSize = 14, ...props }) {
-    return (_jsxs("div", { className: cn("relative w-full", className), ...props, children: [_jsx(SearchInputIcon, { className: cn("pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", iconClassName), size: iconSize }), children] }));
+    return (_jsxs("div", { className: cn("relative w-full", className), ...props, children: [_jsx(SearchInputIcon, { className: cn("pointer-events-none absolute left-2.5 top-1/2 -translate-y-1/2 text-muted-foreground", iconClassName), size: iconSize }), children] }));
 }
 export { SearchInputShell };

package/dist/search-input.js

@@ -64,10 +64,10 @@ const SearchInput = React.forwardRef(({ value, onValueChange, label = "Search",
         }
         onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(event);
     }, [onKeyDown, runSearch, searchOnEnter]);
-    return (_jsxs(Field, { className: containerClassName, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn("sr-only", labelClassName), children: label }), _jsxs(SearchInputShell, { children: [_jsx(InputControl, { ref: ref, id: inputId, type: "text", placeholder: placeholder, value: value, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: cn("bg-background pl-9 pr-8", className), ...props }), value ? (_jsx("button", { type: "button", onClick: () => {
+    return (_jsxs(Field, { className: containerClassName, "data-disabled": disabled ? "true" : undefined, "data-invalid": isInvalid ? "true" : undefined, children: [_jsx(FieldLabel, { htmlFor: inputId, className: cn("sr-only", labelClassName), children: label }), _jsxs(SearchInputShell, { children: [_jsx(InputControl, { ref: ref, id: inputId, type: "text", placeholder: placeholder, value: value, onChange: handleChange, onKeyDown: handleKeyDown, disabled: disabled, "aria-invalid": isInvalid ? "true" : undefined, "aria-describedby": describedBy, className: cn("bg-background pl-8 pr-7", className), ...props }), value ? (_jsx("button", { type: "button", onClick: () => {
                             onValueChange("");
                             runSearch("");
-                        }, disabled: disabled, className: "absolute right-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none", "aria-label": "Clear search", children: _jsx(XIcon, { size: 14 }) })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                        }, disabled: disabled, className: "absolute right-1.5 top-1/2 -translate-y-1/2 cursor-pointer rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:pointer-events-none", "aria-label": "Clear search", children: _jsx(XIcon, { size: 14 }) })) : null] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 });
 SearchInput.displayName = "SearchInput";
 export { SearchInput };

package/dist/section-nav.js

@@ -27,13 +27,13 @@ function renderSectionNavItemContent({ item, active, surface, hasChildren, }) {
 const SectionNavRow = React.forwardRef(({ item, active, surface, hasChildren = false, onSelect, ariaExpanded, className: triggerClassName, onClick: externalOnClick, ...buttonProps }, ref) => {
     const isLink = Boolean(item.href) && !item.disabled && !hasChildren;
     const className = cn(surface === "list"
-        ? "w-full justify-start gap-3 rounded-lg px-3 text-sm font-medium shadow-none"
-        : "h-auto min-h-control w-full justify-start gap-3 rounded-sm px-2 py-2 text-left text-sm font-normal shadow-none whitespace-normal", active && !item.disabled
+        ? "w-full justify-start gap-2 rounded-control px-2.5 text-sm font-medium shadow-none"
+        : "h-auto min-h-8 w-full justify-start gap-2 rounded-sm px-2 py-1.5 text-left text-sm font-normal shadow-none whitespace-normal", active && !item.disabled
         ? surface === "list"
-            ? "bg-white hover:bg-white"
+            ? "bg-background hover:bg-background"
             : "bg-accent text-accent-foreground hover:bg-accent hover:text-accent-foreground"
         : surface === "list"
-            ? "hover:bg-white"
+            ? "hover:bg-background"
             : "hover:bg-accent hover:text-accent-foreground");
     const content = renderSectionNavItemContent({
         item,

package/dist/select-primitive.js

@@ -14,20 +14,20 @@ function SelectGroup(props) {
 function SelectValue(props) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", className: cn("flex h-control w-full cursor-pointer items-center justify-between gap-2 whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", className: cn("flex h-control w-full cursor-pointer items-center justify-between gap-1.5 whitespace-nowrap rounded-control border border-input bg-background px-2.5 py-1.5 text-sm transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/20 data-[placeholder]:text-muted-foreground [&>span]:line-clamp-1 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, "data-slot": "select-scroll-up-button", className: cn("flex cursor-pointer items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, "data-slot": "select-scroll-down-button", className: cn("flex cursor-pointer items-center justify-center py-1", className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
 SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, header, position = "popper", viewportClassName, ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-slot": "select-content", className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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", position === "popper" &&
+const SelectContent = React.forwardRef(({ className, children, header, position = "popper", viewportClassName, ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-slot": "select-content", className: cn("relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-overlay border bg-popover text-popover-foreground shadow-md 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", position === "popper" &&
             "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [header ? _jsx("div", { className: "border-b p-1", children: header }) : null, _jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
                     "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]", viewportClassName), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex min-h-control w-full cursor-pointer select-none items-center gap-2 rounded-sm py-2 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
+const SelectItem = React.forwardRef(({ className, children, description, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, "data-slot": "select-item", className: cn("relative flex min-h-8 w-full cursor-pointer select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-4 w-4" }) }) }), _jsxs("div", { className: "flex flex-col gap-0.5", children: [_jsx(SelectPrimitive.ItemText, { className: "break-words font-normal", children: children }), description ? (_jsx(Typography, { as: "span", variant: "caption", children: description })) : null] })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, "data-slot": "select-separator", className: cn("-mx-1 my-1 h-px bg-border", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/dist/select.js

@@ -115,6 +115,6 @@ function Select({ label, options, placeholder = "Select an option", description,
                             } })) : undefined, viewportClassName: searchable ? "max-h-64" : undefined, children: hasVisibleOptions ? (optionGroups.map((group, groupIndex) => {
                             var _a;
                             return (_jsxs(React.Fragment, { children: [_jsxs(SelectGroup, { children: [group.group ? (_jsx(SelectLabel, { children: _jsx(SearchHighlight, { text: group.group, query: searchQuery }) })) : null, group.options.map((option) => (_jsx(SelectItem, { value: option.value, disabled: option.disabled, textValue: getOptionTextValue(option), description: option.description, children: renderHighlightedLabel(option.label, searchQuery) }, option.value)))] }), groupIndex < optionGroups.length - 1 ? _jsx(SelectSeparator, {}) : null] }, (_a = group.group) !== null && _a !== void 0 ? _a : `group-${groupIndex}`));
-                        })) : (_jsx("div", { className: "px-3 py-2 text-sm text-muted-foreground", children: searchEmptyMessage })) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
+                        })) : (_jsx("div", { className: "px-2.5 py-1.5 text-sm text-muted-foreground", children: searchEmptyMessage })) })] }), showDescription ? (_jsx(FieldDescription, { id: descriptionId, className: descriptionClassName, children: description })) : null, _jsx(FieldError, { id: errorId, className: errorClassName, children: error })] }));
 }
 export { Select };

package/dist/skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "./lib/utils";
 function Skeleton({ className, ...props }) {
-    return (_jsx("div", { "aria-hidden": "true", className: cn("animate-pulse rounded-md bg-muted/80", className), ...props }));
+    return (_jsx("div", { "aria-hidden": "true", className: cn("animate-pulse rounded-control bg-muted/80", className), ...props }));
 }
 export { Skeleton };