@corbits/react-ui 0.1.0 → 0.2.0

package/dist/ui/chat-input.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { ArrowUp, Paperclip, Square, X } from "lucide-react";
 import { useEffect, useRef } from "react";
@@ -18,121 +19,40 @@ const MAX_ROWS_PX = 200;
  * The textarea grows with its content up to a cap, then scrolls. It is measured
  * rather than counted in rows, because a wrapped long line takes more height
  * than its newline count implies.
- */ export function ChatInput({ value, onValueChange, onSend, onStop, working = false, placeholder = "Send a message…", disabled = false, attachments = [], onAttach, onRemoveAttachment, textareaRef: externalTextareaRef, className }) {
+ */
+export function ChatInput({ value, onValueChange, onSend, onStop, working = false, placeholder = "Send a message…", disabled = false, attachments = [], onAttach, onRemoveAttachment, textareaRef: externalTextareaRef, className, }) {
     const internalTextareaRef = useRef(null);
     const textareaRef = externalTextareaRef ?? internalTextareaRef;
     const fileRef = useRef(null);
-    useEffect(()=>{
+    useEffect(() => {
         const node = textareaRef.current;
-        if (node === null) return;
+        if (node === null)
+            return;
         node.style.height = "auto";
         node.style.height = `${Math.min(node.scrollHeight, MAX_ROWS_PX)}px`;
-    }, [
-        value
-    ]);
+    }, [value]);
     const canSend = value.trim().length > 0 && !disabled;
     const showStop = working && onStop !== undefined;
-    const submit = ()=>{
-        if (!canSend) return;
+    const submit = () => {
+        if (!canSend)
+            return;
         onSend();
     };
-    return /*#__PURE__*/ _jsxs("form", {
-        className: cn("flex flex-col gap-2 rounded-lg border border-input bg-background p-2", className),
-        onSubmit: (event)=>{
+    return (_jsxs("form", { className: cn("flex flex-col gap-2 rounded-lg border border-input bg-background p-2", className), onSubmit: (event) => {
             event.preventDefault();
             submit();
-        },
-        children: [
-            attachments.length === 0 ? null : /*#__PURE__*/ _jsx("ul", {
-                "aria-label": "Attachments",
-                className: "flex flex-wrap gap-1.5",
-                children: attachments.map((attachment)=>/*#__PURE__*/ _jsxs("li", {
-                        className: "flex items-center gap-1.5 rounded-md bg-muted py-1 pr-1 pl-2 text-xs",
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                className: "max-w-40 truncate",
-                                children: attachment.name
-                            }),
-                            onRemoveAttachment === undefined ? null : /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>onRemoveAttachment(attachment),
-                                "aria-label": `Remove ${attachment.name}`,
-                                className: "grid size-5 place-items-center rounded-sm text-muted-foreground hover:text-foreground",
-                                children: /*#__PURE__*/ _jsx(X, {
-                                    className: "size-3",
-                                    "aria-hidden": true
-                                })
-                            })
-                        ]
-                    }, attachment.id))
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex items-end gap-2",
-                children: [
-                    onAttach === undefined ? null : /*#__PURE__*/ _jsxs(_Fragment, {
-                        children: [
-                            /*#__PURE__*/ _jsx("input", {
-                                ref: fileRef,
-                                type: "file",
-                                multiple: true,
-                                className: "sr-only",
-                                onChange: (event)=>{
-                                    if (event.target.files !== null) onAttach(event.target.files);
+        }, children: [attachments.length === 0 ? null : (_jsx("ul", { "aria-label": "Attachments", className: "flex flex-wrap gap-1.5", children: attachments.map((attachment) => (_jsxs("li", { className: "flex items-center gap-1.5 rounded-md bg-muted py-1 pr-1 pl-2 text-xs", children: [_jsx("span", { className: "max-w-40 truncate", children: attachment.name }), onRemoveAttachment === undefined ? null : (_jsx("button", { type: "button", onClick: () => onRemoveAttachment(attachment), "aria-label": `Remove ${attachment.name}`, className: "grid size-5 place-items-center rounded-sm text-muted-foreground hover:text-foreground", children: _jsx(X, { className: "size-3", "aria-hidden": true }) }))] }, attachment.id))) })), _jsxs("div", { className: "flex items-end gap-2", children: [onAttach === undefined ? null : (_jsxs(_Fragment, { children: [_jsx("input", { ref: fileRef, type: "file", multiple: true, className: "sr-only", onChange: (event) => {
+                                    if (event.target.files !== null)
+                                        onAttach(event.target.files);
                                     event.target.value = "";
-                                }
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                type: "button",
-                                onClick: ()=>fileRef.current?.click(),
-                                disabled: disabled,
-                                "aria-label": "Attach files",
-                                className: "grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50",
-                                children: /*#__PURE__*/ _jsx(Paperclip, {
-                                    className: "size-4",
-                                    "aria-hidden": true
-                                })
-                            })
-                        ]
-                    }),
-                    /*#__PURE__*/ _jsx("textarea", {
-                        ref: textareaRef,
-                        value: value,
-                        rows: 1,
-                        disabled: disabled,
-                        placeholder: placeholder,
-                        "aria-label": "Message",
-                        onChange: (event)=>onValueChange(event.target.value),
-                        onKeyDown: (event)=>{
-                            if (event.key !== "Enter" || event.shiftKey) return;
+                                } }), _jsx("button", { type: "button", onClick: () => fileRef.current?.click(), disabled: disabled, "aria-label": "Attach files", className: "grid size-9 shrink-0 place-items-center rounded-md text-muted-foreground transition-colors hover:bg-muted hover:text-foreground disabled:opacity-50", children: _jsx(Paperclip, { className: "size-4", "aria-hidden": true }) })] })), _jsx("textarea", { ref: textareaRef, value: value, rows: 1, disabled: disabled, placeholder: placeholder, "aria-label": "Message", onChange: (event) => onValueChange(event.target.value), onKeyDown: (event) => {
+                            if (event.key !== "Enter" || event.shiftKey)
+                                return;
                             // `isComposing` is the IME guard — without it, committing a
                             // Japanese or Chinese candidate sends the message instead.
-                            if (event.nativeEvent.isComposing) return;
+                            if (event.nativeEvent.isComposing)
+                                return;
                             event.preventDefault();
                             submit();
-                        },
-                        className: "max-h-50 min-h-9 flex-1 resize-none bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50"
-                    }),
-                    showStop ? /*#__PURE__*/ _jsx("button", {
-                        type: "button",
-                        onClick: onStop,
-                        "aria-label": "Stop generating",
-                        className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-foreground transition-colors hover:bg-secondary",
-                        children: /*#__PURE__*/ _jsx(Square, {
-                            className: "size-3.5 fill-current",
-                            "aria-hidden": true
-                        })
-                    }) : /*#__PURE__*/ _jsx("button", {
-                        type: "submit",
-                        disabled: !canSend,
-                        "aria-label": "Send message",
-                        className: "grid size-9 shrink-0 place-items-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary-active disabled:opacity-40",
-                        children: /*#__PURE__*/ _jsx(ArrowUp, {
-                            className: "size-4",
-                            "aria-hidden": true
-                        })
-                    })
-                ]
-            })
-        ]
-    });
+                        }, className: "max-h-50 min-h-9 flex-1 resize-none bg-transparent py-2 text-sm outline-none placeholder:text-muted-foreground disabled:opacity-50" }), showStop ? (_jsx("button", { type: "button", onClick: onStop, "aria-label": "Stop generating", className: "grid size-9 shrink-0 place-items-center rounded-md bg-muted text-foreground transition-colors hover:bg-secondary", children: _jsx(Square, { className: "size-3.5 fill-current", "aria-hidden": true }) })) : (_jsx("button", { type: "submit", disabled: !canSend, "aria-label": "Send message", className: "grid size-9 shrink-0 place-items-center rounded-md bg-primary text-primary-foreground transition-colors hover:bg-primary-active disabled:opacity-40", children: _jsx(ArrowUp, { className: "size-4", "aria-hidden": true }) }))] })] }));
 }

package/dist/ui/chat-panel.d.ts

@@ -14,7 +14,7 @@ export declare function ChatPanelHeader({ identity, children, className, ...prop
     identity: AgentIdentity;
 }): import("react").JSX.Element;
 /** The composer area: quick replies, the input, anything else pinned to the bottom. */
-export declare function ChatPanelFooter({ className, children }: {
+export declare function ChatPanelFooter({ className, children, }: {
     className?: string;
     children: ReactNode;
 }): import("react").JSX.Element;

package/dist/ui/chat-panel.js

@@ -9,48 +9,14 @@ import { cn } from "../lib/utils.js";
  * frame carries a full-page conversation, a docked bar and a floating panel,
  * and each wants something different in the header — a thread switcher here, a
  * close button there. Composition is what makes one frame serve three shells.
- */ export function ChatPanel({ className, ...props }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "chat-panel",
-        className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className),
-        ...props
-    });
+ */
+export function ChatPanel({ className, ...props }) {
+    return (_jsx("div", { "data-slot": "chat-panel", className: cn("flex min-h-0 flex-1 flex-col bg-background text-foreground", className), ...props }));
 }
 export function ChatPanelHeader({ identity, children, className, ...props }) {
-    return /*#__PURE__*/ _jsxs("header", {
-        "data-slot": "chat-panel-header",
-        className: cn("flex shrink-0 items-center gap-2.5 border-b border-border px-4 py-3", className),
-        ...props,
-        children: [
-            /*#__PURE__*/ _jsx("span", {
-                "aria-hidden": true,
-                className: "grid size-8 shrink-0 place-items-center rounded-full bg-secondary text-[11px] font-bold text-secondary-foreground",
-                children: agentInitials(identity)
-            }),
-            /*#__PURE__*/ _jsxs("div", {
-                className: "flex min-w-0 flex-col",
-                children: [
-                    /*#__PURE__*/ _jsx("p", {
-                        className: "truncate text-sm font-semibold",
-                        children: identity.name
-                    }),
-                    identity.tagline === undefined ? null : /*#__PURE__*/ _jsx("p", {
-                        className: "truncate text-xs text-muted-foreground",
-                        children: identity.tagline
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx("div", {
-                className: "ml-auto flex shrink-0 items-center gap-1",
-                children: children
-            })
-        ]
-    });
+    return (_jsxs("header", { "data-slot": "chat-panel-header", className: cn("flex shrink-0 items-center gap-2.5 border-b border-border px-4 py-3", className), ...props, children: [_jsx("span", { "aria-hidden": true, className: "grid size-8 shrink-0 place-items-center rounded-full bg-secondary text-[11px] font-bold text-secondary-foreground", children: agentInitials(identity) }), _jsxs("div", { className: "flex min-w-0 flex-col", children: [_jsx("p", { className: "truncate text-sm font-semibold", children: identity.name }), identity.tagline === undefined ? null : (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: identity.tagline }))] }), _jsx("div", { className: "ml-auto flex shrink-0 items-center gap-1", children: children })] }));
 }
-/** The composer area: quick replies, the input, anything else pinned to the bottom. */ export function ChatPanelFooter({ className, children }) {
-    return /*#__PURE__*/ _jsx("div", {
-        "data-slot": "chat-panel-footer",
-        className: cn("flex shrink-0 flex-col gap-2 border-t border-border p-3", className),
-        children: children
-    });
+/** The composer area: quick replies, the input, anything else pinned to the bottom. */
+export function ChatPanelFooter({ className, children, }) {
+    return (_jsx("div", { "data-slot": "chat-panel-footer", className: cn("flex shrink-0 flex-col gap-2 border-t border-border p-3", className), children: children }));
 }

package/dist/ui/chat-thread.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { cn } from "../lib/utils.js";
@@ -16,46 +17,27 @@ import { MessageBubble } from "./message-bubble.js";
  * It pins to the bottom only when the user is already there. Yanking someone
  * back down while they are reading earlier context is the single most common
  * way chat scrolling goes wrong.
- */ export function ChatThread({ messages, identity, renderBody, onRetry, empty, now, className }) {
+ */
+export function ChatThread({ messages, identity, renderBody, onRetry, empty, now, className, }) {
     const scrollRef = useRef(null);
     const pinnedRef = useRef(true);
-    useEffect(()=>{
+    useEffect(() => {
         const node = scrollRef.current;
-        if (node === null || !pinnedRef.current) return;
+        if (node === null || !pinnedRef.current)
+            return;
         node.scrollTop = node.scrollHeight;
-    }, [
-        messages
-    ]);
+    }, [messages]);
     if (messages.length === 0 && empty !== undefined) {
-        return /*#__PURE__*/ _jsx("div", {
-            className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className),
-            children: empty
-        });
+        return (_jsx("div", { className: cn("flex min-h-0 flex-1 items-center justify-center p-6", className), children: empty }));
     }
-    return /*#__PURE__*/ _jsx("div", {
-        ref: scrollRef,
-        onScroll: (event)=>{
+    return (_jsx("div", { ref: scrollRef, onScroll: (event) => {
             const node = event.currentTarget;
             // A few pixels of slack: sub-pixel layout means an exact comparison is
             // false on plenty of screens that are, visually, at the bottom.
-            pinnedRef.current = node.scrollHeight - node.scrollTop - node.clientHeight < 32;
-        },
+            pinnedRef.current =
+                node.scrollHeight - node.scrollTop - node.clientHeight < 32;
+        }, 
         // `log` + polite: new turns are announced without interrupting, which is
         // what an arriving reply is.
-        role: "log",
-        "aria-live": "polite",
-        "aria-label": "Conversation",
-        className: cn("flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", className),
-        children: messages.map((message)=>message.role === "agent" ? /*#__PURE__*/ _jsx(AgentTurn, {
-                message: message,
-                identity: identity,
-                now: now,
-                children: renderBody?.(message)
-            }, message.id) : /*#__PURE__*/ _jsx(MessageBubble, {
-                message: message,
-                now: now,
-                onRetry: onRetry === undefined ? undefined : ()=>onRetry(message),
-                children: renderBody?.(message)
-            }, message.id))
-    });
+        role: "log", "aria-live": "polite", "aria-label": "Conversation", className: cn("flex min-h-0 flex-1 flex-col gap-5 overflow-y-auto p-4", className), children: messages.map((message) => message.role === "agent" ? (_jsx(AgentTurn, { message: message, identity: identity, now: now, children: renderBody?.(message) }, message.id)) : (_jsx(MessageBubble, { message: message, now: now, onRetry: onRetry === undefined ? undefined : () => onRetry(message), children: renderBody?.(message) }, message.id))) }));
 }

package/dist/ui/checkbox.js

@@ -1,63 +1,21 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check, Minus } from "lucide-react";
 import { useEffect, useId, useRef } from "react";
 import { cn } from "../lib/utils.js";
 const CONTROL_CLASS = "relative mt-0.5 flex size-4 shrink-0 items-center justify-center";
-export function Checkbox({ checked, onCheckedChange, label, description, indeterminate = false, id, disabled = false, invalid = false, describedBy, className }) {
+export function Checkbox({ checked, onCheckedChange, label, description, indeterminate = false, id, disabled = false, invalid = false, describedBy, className, }) {
     const generatedId = useId();
     const checkboxId = id ?? generatedId;
     const descriptionId = description === undefined ? undefined : `${checkboxId}-description`;
     const ref = useRef(null);
     const isBare = label === undefined;
-    useEffect(()=>{
-        if (ref.current) ref.current.indeterminate = indeterminate;
-    }, [
-        indeterminate
-    ]);
-    const control = /*#__PURE__*/ _jsxs("div", {
-        className: cn(CONTROL_CLASS, isBare && className),
-        children: [
-            /*#__PURE__*/ _jsx("input", {
-                ref: ref,
-                type: "checkbox",
-                id: checkboxId,
-                checked: checked,
-                disabled: disabled,
-                "aria-describedby": isBare ? describedBy : descriptionId,
-                "aria-invalid": invalid,
-                onChange: (event)=>onCheckedChange(event.target.checked),
-                className: cn("peer size-4 shrink-0 appearance-none rounded-sm border border-input bg-card shadow-xs transition-colors", "checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50")
-            }),
-            /*#__PURE__*/ _jsx(Check, {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-checked:scale-100"
-            }),
-            /*#__PURE__*/ _jsx(Minus, {
-                "aria-hidden": true,
-                className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-indeterminate:scale-100 peer-checked:scale-0"
-            })
-        ]
-    });
-    if (isBare) return control;
-    return /*#__PURE__*/ _jsxs("label", {
-        htmlFor: checkboxId,
-        className: cn("flex items-start gap-2", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className),
-        children: [
-            control,
-            /*#__PURE__*/ _jsxs("span", {
-                className: "flex flex-col gap-0.5",
-                children: [
-                    /*#__PURE__*/ _jsx("span", {
-                        className: "text-sm font-medium",
-                        children: label
-                    }),
-                    description === undefined ? null : /*#__PURE__*/ _jsx("span", {
-                        id: descriptionId,
-                        className: "text-xs leading-relaxed text-muted-foreground",
-                        children: description
-                    })
-                ]
-            })
-        ]
-    });
+    useEffect(() => {
+        if (ref.current)
+            ref.current.indeterminate = indeterminate;
+    }, [indeterminate]);
+    const control = (_jsxs("div", { className: cn(CONTROL_CLASS, isBare && className), children: [_jsx("input", { ref: ref, type: "checkbox", id: checkboxId, checked: checked, disabled: disabled, "aria-describedby": isBare ? describedBy : descriptionId, "aria-invalid": invalid, onChange: (event) => onCheckedChange(event.target.checked), className: cn("peer size-4 shrink-0 appearance-none rounded-sm border border-input bg-card shadow-xs transition-colors", "checked:border-primary checked:bg-primary indeterminate:border-primary indeterminate:bg-primary", "aria-invalid:border-destructive disabled:cursor-not-allowed disabled:opacity-50") }), _jsx(Check, { "aria-hidden": true, className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-checked:scale-100" }), _jsx(Minus, { "aria-hidden": true, className: "pointer-events-none absolute size-3 scale-0 text-primary-foreground transition-transform peer-indeterminate:scale-100 peer-checked:scale-0" })] }));
+    if (isBare)
+        return control;
+    return (_jsxs("label", { htmlFor: checkboxId, className: cn("flex items-start gap-2", disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer", className), children: [control, _jsxs("span", { className: "flex flex-col gap-0.5", children: [_jsx("span", { className: "text-sm font-medium", children: label }), description === undefined ? null : (_jsx("span", { id: descriptionId, className: "text-xs leading-relaxed text-muted-foreground", children: description }))] })] }));
 }