@vadimcomanescu/nadicode-design-system 2.0.6 → 2.0.8

package/dist/components/ui/ChatPlan.d.ts

@@ -0,0 +1,29 @@
+import { type ReactNode } from 'react';
+export interface ChatPlanProps {
+    children: ReactNode;
+    className?: string;
+    defaultOpen?: boolean;
+}
+export declare function ChatPlan({ children, className, defaultOpen }: ChatPlanProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPlanHeader({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ChatPlanTitleProps {
+    children: ReactNode;
+    isStreaming?: boolean;
+    className?: string;
+}
+export declare function ChatPlanTitle({ children, isStreaming, className, }: ChatPlanTitleProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPlanDescription({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPlanTrigger({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatPlanContent({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatPlan.js

@@ -0,0 +1,86 @@
+'use client';
+import { ChatShimmer } from '../../chunk-JDJY4ABS.js';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../chunk-VJIL7W55.js';
+import '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import { ChevronDownIcon } from '../../chunk-HJBXUXTD.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ChatPlan({ children, className, defaultOpen }) {
+  return /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      defaultOpen,
+      className: cn("rounded-xl border border-border", className),
+      children
+    }
+  );
+}
+function ChatPlanHeader({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-1 p-4", className), children });
+}
+function ChatPlanTitle({
+  children,
+  isStreaming = false,
+  className
+}) {
+  if (isStreaming) {
+    return /* @__PURE__ */ jsx(
+      ChatShimmer,
+      {
+        as: "h3",
+        className: cn("text-sm font-medium text-text-primary", className),
+        children: typeof children === "string" ? children : ""
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-medium text-text-primary", className), children });
+}
+function ChatPlanDescription({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-text-secondary", className), children });
+}
+function ChatPlanTrigger({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "flex w-full min-h-10 items-center gap-1.5 border-t border-border px-4 py-2",
+        "text-xs text-text-secondary",
+        "hover:bg-surface/80 hover:text-text-primary transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            size: 14,
+            "aria-hidden": "true",
+            className: "ml-auto transition-transform [[data-state=open]>&]:rotate-180"
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatPlanContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: cn("border-t border-border px-4 py-3", className), children }) });
+}
+
+export { ChatPlan, ChatPlanContent, ChatPlanDescription, ChatPlanHeader, ChatPlanTitle, ChatPlanTrigger };

package/dist/components/ui/ChatPromptInput.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode, type Ref } from 'react';
+export type ChatPromptStatus = 'idle' | 'streaming' | 'submitted';
+export interface ChatPromptInputProps {
+    status: ChatPromptStatus;
+    onSubmit: (value: string) => void;
+    onStop?: () => void;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLFormElement>;
+}
+export declare function ChatPromptInput({ status, onSubmit, onStop, children, className, ref, }: ChatPromptInputProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatPromptInputTextareaProps {
+    placeholder?: string;
+    className?: string;
+    'aria-label'?: string;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+export declare function ChatPromptInputTextarea({ placeholder, className, 'aria-label': ariaLabel, ref, }: ChatPromptInputTextareaProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatPromptInputToolbarProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatPromptInputToolbar({ children, className, }: ChatPromptInputToolbarProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatPromptInputActionsProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatPromptInputActions({ children, className, }: ChatPromptInputActionsProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatPromptInputSubmitProps {
+    className?: string;
+}
+export declare function ChatPromptInputSubmit({ className }: ChatPromptInputSubmitProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatPromptInput.js

@@ -0,0 +1,193 @@
+'use client';
+import { StopIcon } from '../../chunk-ZU2GYVAP.js';
+import { SendIcon } from '../../chunk-CRZ2JE24.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { createContext, useState, useRef, useCallback, useContext } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var ChatPromptContext = createContext(null);
+function useChatPrompt() {
+  const ctx = useContext(ChatPromptContext);
+  if (!ctx) throw new Error("ChatPromptInput compound components must be used within <ChatPromptInput>");
+  return ctx;
+}
+function ChatPromptInput({
+  status,
+  onSubmit,
+  onStop,
+  children,
+  className,
+  ref
+}) {
+  const [, setIsComposing] = useState(false);
+  const composingRef = useRef(false);
+  const textareaNodeRef = useRef(null);
+  const registerTextarea = useCallback(
+    (node) => {
+      textareaNodeRef.current = node;
+    },
+    []
+  );
+  const submit = useCallback(() => {
+    const value = textareaNodeRef.current?.value.trim();
+    if (!value) return;
+    onSubmit(value);
+    if (textareaNodeRef.current) {
+      textareaNodeRef.current.value = "";
+    }
+  }, [onSubmit]);
+  const stop = useCallback(() => {
+    onStop?.();
+  }, [onStop]);
+  const handleFormSubmit = useCallback(
+    (e) => {
+      e.preventDefault();
+      if (status === "streaming" || status === "submitted") {
+        stop();
+      } else {
+        submit();
+      }
+    },
+    [status, submit, stop]
+  );
+  const handleSetIsComposing = useCallback((v) => {
+    setIsComposing(v);
+  }, []);
+  return /* @__PURE__ */ jsx(
+    ChatPromptContext.Provider,
+    {
+      value: {
+        status,
+        composingRef,
+        setIsComposing: handleSetIsComposing,
+        registerTextarea,
+        submit,
+        stop
+      },
+      children: /* @__PURE__ */ jsx(
+        "form",
+        {
+          ref,
+          onSubmit: handleFormSubmit,
+          className: cn(
+            "flex flex-col gap-2 rounded-2xl border border-border bg-surface p-3 glass-panel",
+            className
+          ),
+          children
+        }
+      )
+    }
+  );
+}
+function ChatPromptInputTextarea({
+  placeholder,
+  className,
+  "aria-label": ariaLabel,
+  ref
+}) {
+  const { status, composingRef, setIsComposing, registerTextarea, submit, stop } = useChatPrompt();
+  const handleKeyDown = useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        stop();
+        return;
+      }
+      if (e.key === "Enter" && !e.shiftKey && !composingRef.current && !e.nativeEvent.isComposing) {
+        e.preventDefault();
+        if (status === "streaming" || status === "submitted") {
+          stop();
+        } else {
+          submit();
+        }
+      }
+    },
+    [composingRef, status, submit, stop]
+  );
+  const mergedRef = useCallback(
+    (node) => {
+      registerTextarea(node);
+      if (typeof ref === "function") ref(node);
+      else if (ref && typeof ref === "object")
+        ref.current = node;
+    },
+    [registerTextarea, ref]
+  );
+  const handleCompositionStart = useCallback(() => {
+    composingRef.current = true;
+    setIsComposing(true);
+  }, [composingRef, setIsComposing]);
+  const handleCompositionEnd = useCallback(() => {
+    requestAnimationFrame(() => {
+      composingRef.current = false;
+      setIsComposing(false);
+    });
+  }, [composingRef, setIsComposing]);
+  return /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      ref: mergedRef,
+      rows: 1,
+      placeholder,
+      "aria-label": ariaLabel ?? placeholder,
+      onKeyDown: handleKeyDown,
+      onCompositionStart: handleCompositionStart,
+      onCompositionEnd: handleCompositionEnd,
+      className: cn(
+        "w-full resize-none bg-transparent text-sm text-text-primary placeholder:text-text-tertiary",
+        "focus:outline-none focus-visible:ring-1 focus-visible:ring-accent focus-visible:ring-offset-0 rounded-lg",
+        "field-sizing-content",
+        className
+      )
+    }
+  );
+}
+function ChatPromptInputToolbar({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2", className), children });
+}
+function ChatPromptInputActions({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("div", { className: cn("ml-auto flex items-center gap-1", className), children });
+}
+function ChatPromptInputSubmit({ className }) {
+  const { status, stop } = useChatPrompt();
+  const isActive = status === "streaming" || status === "submitted";
+  if (isActive) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: stop,
+        "aria-label": "Stop generation",
+        className: cn(
+          "inline-flex h-8 w-8 min-h-10 min-w-10 items-center justify-center rounded-full",
+          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+          "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+          className
+        ),
+        children: /* @__PURE__ */ jsx(StopIcon, { size: 16 })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "submit",
+      "aria-label": "Send message",
+      className: cn(
+        "inline-flex h-8 w-8 min-h-10 min-w-10 items-center justify-center rounded-full",
+        "bg-primary text-primary-foreground hover:bg-primary/90",
+        "transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(SendIcon, { size: 16 })
+    }
+  );
+}
+
+export { ChatPromptInput, ChatPromptInputActions, ChatPromptInputSubmit, ChatPromptInputTextarea, ChatPromptInputToolbar };

package/dist/components/ui/ChatPromptInputAttachments.d.ts

@@ -0,0 +1,9 @@
+import { type ReactNode } from 'react';
+export interface ChatPromptInputAttachmentsProps {
+    onFilesChange: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    children?: ReactNode;
+    className?: string;
+}
+export declare function ChatPromptInputAttachments({ onFilesChange, accept, multiple, children, className, }: ChatPromptInputAttachmentsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatPromptInputAttachments.js

@@ -0,0 +1,145 @@
+'use client';
+import { XCircleIcon } from '../../chunk-PSVQ7ZNX.js';
+import { PaperclipIcon } from '../../chunk-WKRIKCJC.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { useState, useRef, useCallback } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function ChatPromptInputAttachments({
+  onFilesChange,
+  accept,
+  multiple = true,
+  children,
+  className
+}) {
+  const [files, setFiles] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+  const fileInputRef = useRef(null);
+  const addFiles = useCallback(
+    (newFiles) => {
+      const updated = [...files, ...newFiles];
+      setFiles(updated);
+      onFilesChange(updated);
+    },
+    [files, onFilesChange]
+  );
+  const removeFile = useCallback(
+    (index) => {
+      const updated = files.filter((_, i) => i !== index);
+      setFiles(updated);
+      onFilesChange(updated);
+    },
+    [files, onFilesChange]
+  );
+  const handleFileInput = useCallback(
+    (e) => {
+      if (e.target.files) {
+        addFiles(Array.from(e.target.files));
+      }
+      e.target.value = "";
+    },
+    [addFiles]
+  );
+  const handleDragOver = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(true);
+  }, []);
+  const handleDragLeave = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragging(false);
+  }, []);
+  const handleDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragging(false);
+      if (e.dataTransfer.files) {
+        addFiles(Array.from(e.dataTransfer.files));
+      }
+    },
+    [addFiles]
+  );
+  const openFilePicker = useCallback(() => {
+    fileInputRef.current?.click();
+  }, []);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-drop-zone": true,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: cn(
+          "relative",
+          isDragging && "ring-2 ring-accent ring-offset-2 rounded-lg"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: fileInputRef,
+              type: "file",
+              accept,
+              multiple,
+              onChange: handleFileInput,
+              "aria-label": "Attach files",
+              className: "sr-only"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: openFilePicker,
+              "aria-label": "Attach files",
+              className: "inline-flex min-h-10 min-w-10 items-center justify-center rounded-full text-text-tertiary hover:text-text-secondary transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+              children: /* @__PURE__ */ jsx(PaperclipIcon, { size: 18 })
+            }
+          ),
+          children
+        ]
+      }
+    ),
+    files.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: files.map((file, index) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "group relative flex items-center gap-1.5 rounded-lg border border-border bg-surface/60 px-2 py-1 text-xs text-text-secondary",
+        children: [
+          file.type.startsWith("image/") ? /* @__PURE__ */ jsx("div", { className: "h-6 w-6 rounded bg-muted overflow-hidden shrink-0", children: /* @__PURE__ */ jsx(FilePreview, { file }) }) : /* @__PURE__ */ jsx(PaperclipIcon, { size: 14, className: "shrink-0 text-text-tertiary" }),
+          /* @__PURE__ */ jsx("span", { className: "truncate max-w-[120px]", children: file.name }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: () => removeFile(index),
+              "aria-label": `Remove ${file.name}`,
+              className: "ml-1 inline-flex min-h-10 min-w-10 items-center justify-center rounded-full text-text-tertiary hover:text-destructive transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent",
+              children: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 })
+            }
+          )
+        ]
+      },
+      `${file.name}-${index}`
+    )) })
+  ] });
+}
+function FilePreview({ file }) {
+  const src = typeof URL !== "undefined" ? URL.createObjectURL(file) : "";
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      src,
+      alt: file.name,
+      className: "h-full w-full object-cover",
+      onLoad: () => {
+        if (src) URL.revokeObjectURL(src);
+      }
+    }
+  );
+}
+
+export { ChatPromptInputAttachments };

package/dist/components/ui/ChatQueue.d.ts

@@ -0,0 +1,32 @@
+import { type ReactNode } from 'react';
+export interface ChatQueueProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatQueue({ children, className }: ChatQueueProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatQueueSectionProps {
+    children: ReactNode;
+    className?: string;
+    defaultOpen?: boolean;
+}
+export declare function ChatQueueSection({ children, className, defaultOpen, }: ChatQueueSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatQueueSectionTrigger({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatQueueSectionContent({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ChatQueueItemProps {
+    children: ReactNode;
+    completed?: boolean;
+    badge?: string;
+    className?: string;
+}
+export declare function ChatQueueItem({ children, completed, badge, className, }: ChatQueueItemProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatQueueItemIndicatorProps {
+    completed?: boolean;
+    className?: string;
+}
+export declare function ChatQueueItemIndicator({ completed, className, }: ChatQueueItemIndicatorProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatQueue.js

@@ -0,0 +1,93 @@
+'use client';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../chunk-VJIL7W55.js';
+import { CircleIcon } from '../../chunk-GCUTJI7M.js';
+import { CheckIcon } from '../../chunk-CXACRCZ4.js';
+import { ChevronDownIcon } from '../../chunk-HJBXUXTD.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function ChatQueue({ children, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("space-y-2", className), children });
+}
+function ChatQueueSection({
+  children,
+  className,
+  defaultOpen = false
+}) {
+  return /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      defaultOpen,
+      className: cn("rounded-lg border border-border", className),
+      children
+    }
+  );
+}
+function ChatQueueSectionTrigger({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "flex w-full min-h-10 items-center gap-1.5 px-3 py-2",
+        "text-sm font-medium text-text-primary",
+        "hover:bg-surface/80 transition-colors",
+        "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent rounded-lg",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("span", { children }),
+        /* @__PURE__ */ jsx(
+          ChevronDownIcon,
+          {
+            size: 14,
+            "aria-hidden": "true",
+            className: "ml-auto transition-transform [[data-state=open]>&]:rotate-180"
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatQueueSectionContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("div", { className: cn("space-y-0.5 border-t border-border px-3 py-2", className), children }) });
+}
+function ChatQueueItem({
+  children,
+  completed = false,
+  badge,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "queue-item",
+      className: cn(
+        "flex items-center gap-2 rounded-md px-2 py-1 text-sm",
+        completed ? "line-through text-text-tertiary opacity-60" : "text-text-secondary",
+        className
+      ),
+      children: [
+        children,
+        !!badge && /* @__PURE__ */ jsx("span", { className: "ml-auto shrink-0 rounded bg-surface px-1.5 py-0.5 text-[10px] font-mono text-text-tertiary", children: badge })
+      ]
+    }
+  );
+}
+function ChatQueueItemIndicator({
+  completed = false,
+  className
+}) {
+  if (completed) {
+    return /* @__PURE__ */ jsx(CheckIcon, { size: 14, "aria-hidden": "true", className: cn("text-success shrink-0", className) });
+  }
+  return /* @__PURE__ */ jsx(CircleIcon, { size: 14, "aria-hidden": "true", className: cn("text-text-tertiary shrink-0", className) });
+}
+
+export { ChatQueue, ChatQueueItem, ChatQueueItemIndicator, ChatQueueSection, ChatQueueSectionContent, ChatQueueSectionTrigger };

package/dist/components/ui/ChatReasoning.d.ts

@@ -0,0 +1,20 @@
+import { type ReactNode, type Ref } from 'react';
+export interface ChatReasoningProps {
+    isStreaming: boolean;
+    autoCloseDelay?: number;
+    duration?: number;
+    defaultOpen?: boolean;
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ChatReasoning({ isStreaming, autoCloseDelay, duration, defaultOpen, children, className, ref, }: ChatReasoningProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatReasoningTriggerProps {
+    className?: string;
+}
+export declare function ChatReasoningTrigger({ className }: ChatReasoningTriggerProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatReasoningContentProps {
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatReasoningContent({ children, className, }: ChatReasoningContentProps): import("react/jsx-runtime").JSX.Element;