@vadimcomanescu/nadicode-design-system 2.0.7 → 2.0.8

package/dist/components/ui/ChatChainOfThought.js

@@ -0,0 +1,99 @@
+'use client';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../chunk-VJIL7W55.js';
+import { LoaderIcon } from '../../chunk-R3AO6AZM.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 ChatChainOfThought({
+  children,
+  className,
+  defaultOpen,
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsx(
+    Collapsible,
+    {
+      defaultOpen,
+      open,
+      onOpenChange,
+      className: cn("space-y-1", className),
+      children
+    }
+  );
+}
+function ChatChainOfThoughtTrigger({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    CollapsibleTrigger,
+    {
+      className: cn(
+        "inline-flex min-h-10 min-w-10 items-center gap-1.5 rounded-lg px-2 py-1",
+        "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: "transition-transform [[data-state=open]>&]:rotate-180"
+          }
+        )
+      ]
+    }
+  );
+}
+function ChatChainOfThoughtContent({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "list",
+      "aria-label": "Reasoning steps",
+      className: cn("space-y-1 pl-1", className),
+      children
+    }
+  ) });
+}
+var STEP_ICONS = {
+  complete: /* @__PURE__ */ jsx(CheckIcon, { size: 14, "aria-hidden": "true", className: "text-success" }),
+  active: /* @__PURE__ */ jsx(LoaderIcon, { size: 14, "aria-hidden": "true", className: "animate-spin text-accent" }),
+  pending: /* @__PURE__ */ jsx(CircleIcon, { size: 14, "aria-hidden": "true", className: "text-text-tertiary" })
+};
+function ChatChainOfThoughtStep({
+  status,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "listitem",
+      "data-slot": "step",
+      className: cn(
+        "flex items-center gap-2 rounded-md px-2 py-1 text-sm text-text-secondary",
+        status === "pending" && "opacity-50",
+        className
+      ),
+      children: [
+        STEP_ICONS[status],
+        /* @__PURE__ */ jsx("span", { children })
+      ]
+    }
+  );
+}
+
+export { ChatChainOfThought, ChatChainOfThoughtContent, ChatChainOfThoughtStep, ChatChainOfThoughtTrigger };

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

@@ -0,0 +1,37 @@
+import { type ReactNode } from 'react';
+type ChatConfirmationStatus = 'pending' | 'approved' | 'rejected';
+export interface ChatConfirmationProps {
+    status: ChatConfirmationStatus;
+    children: ReactNode;
+    className?: string;
+}
+export declare function ChatConfirmation({ status, children, className, }: ChatConfirmationProps): import("react/jsx-runtime").JSX.Element;
+export declare function ChatConfirmationTitle({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function ChatConfirmationDescription({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface ChatConfirmationActionsProps {
+    onApprove: () => void;
+    onReject: () => void;
+    approveLabel?: string;
+    rejectLabel?: string;
+    className?: string;
+}
+export declare function ChatConfirmationActions({ onApprove, onReject, approveLabel, rejectLabel, className, }: ChatConfirmationActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatConfirmationPending({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatConfirmationApproved({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export declare function ChatConfirmationRejected({ children, className, }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/components/ui/ChatConfirmation.js

@@ -0,0 +1,115 @@
+'use client';
+import { CheckIcon } from '../../chunk-CXACRCZ4.js';
+import { XIcon } from '../../chunk-UIUMTURU.js';
+import '../../chunk-ASKFAYYR.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { createContext, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChatConfirmationContext = createContext({
+  status: "pending"
+});
+function ChatConfirmation({
+  status,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx(ChatConfirmationContext.Provider, { value: { status }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Confirmation",
+      className: cn(
+        "rounded-xl border border-border p-4 space-y-3",
+        className
+      ),
+      children
+    }
+  ) });
+}
+function ChatConfirmationTitle({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("h3", { className: cn("text-sm font-medium text-text-primary", className), children });
+}
+function ChatConfirmationDescription({
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsx("p", { className: cn("text-sm text-text-secondary", className), children });
+}
+function ChatConfirmationActions({
+  onApprove,
+  onReject,
+  approveLabel = "Approve",
+  rejectLabel = "Reject",
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "pending") return null;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onApprove,
+        "aria-label": approveLabel,
+        className: cn(
+          "inline-flex min-h-10 min-w-10 items-center justify-center gap-1.5 rounded-lg",
+          "bg-accent px-3 py-1.5 text-xs font-medium text-accent-foreground",
+          "hover:bg-accent/90 transition-colors",
+          "focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-accent"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(CheckIcon, { size: 14, "aria-hidden": "true" }),
+          approveLabel
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: onReject,
+        "aria-label": rejectLabel,
+        className: cn(
+          "inline-flex min-h-10 min-w-10 items-center justify-center gap-1.5 rounded-lg",
+          "border border-border px-3 py-1.5 text-xs font-medium 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"
+        ),
+        children: [
+          /* @__PURE__ */ jsx(XIcon, { size: 14, "aria-hidden": "true" }),
+          rejectLabel
+        ]
+      }
+    )
+  ] });
+}
+function ChatConfirmationPending({
+  children,
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "pending") return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+function ChatConfirmationApproved({
+  children,
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "approved") return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+function ChatConfirmationRejected({
+  children,
+  className
+}) {
+  const { status } = useContext(ChatConfirmationContext);
+  if (status !== "rejected") return null;
+  return /* @__PURE__ */ jsx("div", { className, children });
+}
+
+export { ChatConfirmation, ChatConfirmationActions, ChatConfirmationApproved, ChatConfirmationDescription, ChatConfirmationPending, ChatConfirmationRejected, ChatConfirmationTitle };

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

@@ -0,0 +1,18 @@
+import { type ReactNode, type Ref } from 'react';
+export interface ChatGreetingProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Greeting headline. */
+    title?: string;
+    /** Greeting subtext. */
+    subtitle?: string;
+    /** Custom content instead of title/subtitle. */
+    children?: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * ChatGreeting - animated empty state shown when a conversation has zero messages.
+ *
+ * Renders configurable title and subtitle with a 300ms Framer Motion fade-in
+ * and staggered entrance. Accepts children for fully custom content.
+ * Consumers wrap this in AnimatePresence for fade-out when messages appear.
+ */
+export declare function ChatGreeting({ title, subtitle, children, className, ref, ...props }: ChatGreetingProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/ui/ChatGreeting.js

@@ -0,0 +1,80 @@
+'use client';
+import { m } from '../../chunk-PD2YEH3H.js';
+import '../../chunk-CRY67BIF.js';
+import '../../chunk-HJC6U46F.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { useReducedMotion } from 'motion/react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var FADE_DURATION_S = 0.3;
+var TITLE_DELAY_S = 0;
+var SUBTITLE_DELAY_S = 0.1;
+function ChatGreeting({
+  title = "Hello!",
+  subtitle = "How can I help you today?",
+  children,
+  className,
+  ref,
+  ...props
+}) {
+  const prefersReduced = useReducedMotion();
+  if (children) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center justify-center gap-2", className),
+        ...props,
+        children
+      }
+    );
+  }
+  if (prefersReduced) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("flex flex-col items-center justify-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("p", { className: "text-xl font-semibold text-text-primary", children: title }),
+          subtitle ? /* @__PURE__ */ jsx("p", { className: "text-lg text-text-secondary", children: subtitle }) : null
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col items-center justify-center gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          m.p,
+          {
+            className: "text-xl font-semibold text-text-primary",
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 10 },
+            transition: { duration: FADE_DURATION_S, delay: TITLE_DELAY_S },
+            children: title
+          }
+        ),
+        subtitle ? /* @__PURE__ */ jsx(
+          m.p,
+          {
+            className: "text-lg text-text-secondary",
+            initial: { opacity: 0, y: 10 },
+            animate: { opacity: 1, y: 0 },
+            exit: { opacity: 0, y: 10 },
+            transition: { duration: FADE_DURATION_S, delay: SUBTITLE_DELAY_S },
+            children: subtitle
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+export { ChatGreeting };

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

@@ -0,0 +1,40 @@
+import { type ReactNode, type Ref } from 'react';
+type ChatMessageRole = 'user' | 'assistant' | 'agent' | 'system';
+declare const chatMessageVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const chatMessageContentVariants: (props?: ({
+    role?: "user" | "assistant" | "system" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ChatMessageProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Message role.
+     * @deprecated Use `"assistant"` instead of `"agent"`.
+     * The `"agent"` alias will be removed in the next major version.
+     */
+    role: ChatMessageRole;
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+/**
+ * ChatMessage - role-based message layout compound.
+ *
+ * User right-aligned, assistant left-aligned, system centered.
+ * Compound: ChatMessage, ChatMessageContent, ChatMessageAvatar.
+ */
+export declare function ChatMessage({ role, children, className, ref, ...props }: ChatMessageProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatMessageContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children: ReactNode;
+    ref?: Ref<HTMLDivElement>;
+}
+export declare function ChatMessageContent({ children, className, ref, ...props }: ChatMessageContentProps): import("react/jsx-runtime").JSX.Element;
+export interface ChatMessageAvatarProps {
+    /** Avatar image source URL. */
+    src: string;
+    /** Display name (first 2 chars used as fallback). */
+    name?: string;
+    className?: string;
+    ref?: Ref<HTMLSpanElement>;
+}
+export declare function ChatMessageAvatar({ src, name, className, ref, }: ChatMessageAvatarProps): import("react/jsx-runtime").JSX.Element;
+export { chatMessageVariants, chatMessageContentVariants };

package/dist/components/ui/ChatMessage.js

@@ -0,0 +1,96 @@
+'use client';
+import { Avatar, AvatarImage, AvatarFallback } from '../../chunk-NAAU5IWU.js';
+import { cn } from '../../chunk-QYZT24TS.js';
+import { createContext, useContext } from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var ChatMessageContext = createContext("user");
+function useMessageRole() {
+  return useContext(ChatMessageContext);
+}
+function normalizeRole(role) {
+  return role === "agent" ? "assistant" : role;
+}
+var chatMessageVariants = cva("flex gap-4 max-w-full", {
+  variants: {
+    role: {
+      user: "flex-row-reverse",
+      assistant: "flex-row",
+      system: "justify-center"
+    }
+  },
+  defaultVariants: { role: "assistant" }
+});
+var chatMessageContentVariants = cva(
+  "rounded-2xl px-4 py-2.5 text-sm leading-relaxed",
+  {
+    variants: {
+      role: {
+        user: "bg-primary text-primary-foreground max-w-[80%] rounded-br-sm",
+        assistant: "bg-surface border border-border text-text-primary max-w-[80%] rounded-bl-sm",
+        system: "bg-muted/50 text-text-tertiary text-xs italic px-4 py-1.5 rounded-lg"
+      }
+    },
+    defaultVariants: { role: "assistant" }
+  }
+);
+function ChatMessage({
+  role,
+  children,
+  className,
+  ref,
+  ...props
+}) {
+  const normalized = normalizeRole(role);
+  return /* @__PURE__ */ jsx(ChatMessageContext.Provider, { value: role, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(chatMessageVariants({ role: normalized }), className),
+      ...props,
+      children
+    }
+  ) });
+}
+function ChatMessageContent({
+  children,
+  className,
+  ref,
+  ...props
+}) {
+  const role = normalizeRole(useMessageRole());
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(chatMessageContentVariants({ role }), className),
+      ...props,
+      children
+    }
+  );
+}
+function ChatMessageAvatar({
+  src,
+  name,
+  className,
+  ref
+}) {
+  const role = normalizeRole(useMessageRole());
+  const fallback = name ? name.slice(0, 2).toUpperCase() : role === "user" ? "U" : "AI";
+  const label = role === "user" ? "User avatar" : "Assistant avatar";
+  return /* @__PURE__ */ jsxs(
+    Avatar,
+    {
+      ref,
+      className: cn("h-8 w-8 shrink-0 ring-1 ring-border", className),
+      "aria-label": label,
+      children: [
+        src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: "" }) : null,
+        /* @__PURE__ */ jsx(AvatarFallback, { className: "text-xs", children: fallback })
+      ]
+    }
+  );
+}
+
+export { ChatMessage, ChatMessageAvatar, ChatMessageContent, chatMessageContentVariants, chatMessageVariants };

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;