@cntyclub/ui-react 0.2.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "React component library for the Country Club UI Kit — Base UI primitives styled with the Country Club design system (Tailwind CSS v4)",
   "type": "module",
   "sideEffects": [

package/src/components/ui/chat.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { cva, type VariantProps } from "class-variance-authority";
-import { ArrowUpIcon } from "lucide-react";
+import { ArrowRightIcon, ArrowUpIcon, SparklesIcon } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "../../lib/utils/css";
@@ -9,9 +9,10 @@ import { Button } from "./button";
 
 /**
  * Chat primitives for AI-assistant experiences: a column layout, an
- * auto-scrolling message viewport, role-styled message bubbles, a tool
- * activity/approval card frame, a typing indicator, and a submit-on-Enter
- * input. Purely presentational — bring your own state.
+ * auto-scrolling message viewport, role-styled message bubbles, header chrome,
+ * an empty-state hero with suggestion prompts, tool activity chips/cards,
+ * a typing indicator, and a submit-on-Enter composer. Purely presentational —
+ * bring your own state.
  */
 
 function Chat({ className, ...props }: React.ComponentProps<"div">) {
@@ -24,6 +25,63 @@ function Chat({ className, ...props }: React.ComponentProps<"div">) {
   );
 }
 
+/**
+ * Header chrome for a chat panel: avatar + title on the left, icon actions on
+ * the right. Compose `ChatHeaderAvatar`, `ChatHeaderTitle` and
+ * `ChatHeaderActions` inside.
+ */
+function ChatHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex shrink-0 items-center gap-1 border-border/72 border-b bg-background/95 px-3 py-2.5 backdrop-blur supports-backdrop-filter:bg-background/80",
+        className,
+      )}
+      data-slot="chat-header"
+      {...props}
+    />
+  );
+}
+
+function ChatHeaderAvatar({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "relative flex size-8 shrink-0 items-center justify-center rounded-full bg-linear-to-br from-primary to-primary/78 text-primary-foreground shadow-primary/24 shadow-xs after:absolute after:right-0 after:bottom-0 after:size-2 after:rounded-full after:bg-success after:ring-2 after:ring-background [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      data-slot="chat-header-avatar"
+      {...props}
+    >
+      {children ?? <SparklesIcon />}
+    </span>
+  );
+}
+
+function ChatHeaderTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("min-w-0 flex-1 leading-tight", className)}
+      data-slot="chat-header-title"
+      {...props}
+    />
+  );
+}
+
+function ChatHeaderActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex shrink-0 items-center gap-0.5", className)}
+      data-slot="chat-header-actions"
+      {...props}
+    />
+  );
+}
+
 function ChatMessages({
   autoScroll = true,
   className,
@@ -67,17 +125,133 @@ function ChatMessages({
   );
 }
 
-const chatMessageVariants = cva("flex w-full flex-col gap-1", {
-  defaultVariants: {
-    from: "assistant",
-  },
-  variants: {
-    from: {
-      assistant: "items-start",
-      user: "items-end",
+/**
+ * Centered hero shown when the conversation is empty. Compose
+ * `ChatEmptyStateIcon`, `ChatEmptyStateTitle`, `ChatEmptyStateDescription`
+ * and `ChatSuggestions` inside.
+ */
+function ChatEmptyState({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex flex-1 flex-col items-center justify-center gap-3 p-6 text-center",
+        className,
+      )}
+      data-slot="chat-empty-state"
+      {...props}
+    />
+  );
+}
+
+function ChatEmptyStateIcon({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "fade-in-0 zoom-in-90 relative flex size-13 shrink-0 animate-in items-center justify-center rounded-2xl bg-linear-to-br from-primary to-primary/78 text-primary-foreground shadow-lg shadow-primary/24 duration-500 before:absolute before:-inset-2.5 before:-z-10 before:rounded-3xl before:bg-primary/8 before:blur-lg [&_svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      data-slot="chat-empty-state-icon"
+      {...props}
+    >
+      {children ?? <SparklesIcon />}
+    </span>
+  );
+}
+
+function ChatEmptyStateTitle({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={cn("mt-1 font-semibold text-base text-foreground", className)}
+      data-slot="chat-empty-state-title"
+      {...props}
+    />
+  );
+}
+
+function ChatEmptyStateDescription({
+  className,
+  ...props
+}: React.ComponentProps<"p">) {
+  return (
+    <p
+      className={cn(
+        "max-w-72 text-muted-foreground text-sm leading-relaxed",
+        className,
+      )}
+      data-slot="chat-empty-state-description"
+      {...props}
+    />
+  );
+}
+
+/** Vertical stack of `ChatSuggestion` prompts. */
+function ChatSuggestions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("mt-2 flex w-full max-w-sm flex-col gap-2", className)}
+      data-slot="chat-suggestions"
+      {...props}
+    />
+  );
+}
+
+export interface ChatSuggestionProps extends React.ComponentProps<"button"> {
+  /** Leading icon; defaults to a sparkle. */
+  icon?: React.ReactNode;
+  /** Position in the list — staggers the entrance animation. */
+  index?: number;
+}
+
+/**
+ * One tappable suggested prompt: icon chip + label, with an arrow that slides
+ * in on hover and a staggered fade-in entrance (via `index`).
+ */
+function ChatSuggestion({
+  className,
+  children,
+  icon,
+  index = 0,
+  style,
+  ...props
+}: ChatSuggestionProps) {
+  return (
+    <button
+      className={cn(
+        "group fade-in-0 slide-in-from-bottom-2 flex w-full animate-in cursor-pointer items-center gap-2.5 fill-mode-both rounded-xl border border-border/72 bg-card px-3 py-2.5 text-left font-medium text-card-foreground text-sm shadow-xs outline-none transition-[border-color,background-color,box-shadow,transform] duration-200 hover:border-primary/24 hover:bg-accent/56 hover:shadow-sm focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background active:scale-[0.985] disabled:pointer-events-none disabled:opacity-64",
+        className,
+      )}
+      data-slot="chat-suggestion"
+      style={{ animationDelay: `${index * 80}ms`, ...style }}
+      type="button"
+      {...props}
+    >
+      <span className="flex size-6.5 shrink-0 items-center justify-center rounded-lg bg-primary/8 text-primary transition-colors duration-200 group-hover:bg-primary group-hover:text-primary-foreground [&_svg:not([class*='size-'])]:size-3.5">
+        {icon ?? <SparklesIcon />}
+      </span>
+      <span className="min-w-0 flex-1">{children}</span>
+      <ArrowRightIcon className="-translate-x-1 size-3.5 shrink-0 text-muted-foreground opacity-0 transition-[opacity,translate] duration-200 group-hover:translate-x-0 group-hover:opacity-100" />
+    </button>
+  );
+}
+
+const chatMessageVariants = cva(
+  "fade-in-0 slide-in-from-bottom-1 flex w-full animate-in flex-col gap-1 duration-200",
+  {
+    defaultVariants: {
+      from: "assistant",
+    },
+    variants: {
+      from: {
+        assistant: "items-start",
+        user: "items-end",
+      },
     },
   },
-});
+);
 
 export interface ChatMessageProps
   extends React.ComponentProps<"div">,
@@ -103,7 +277,7 @@ const chatMessageBubbleVariants = cva(
     variants: {
       from: {
         assistant: "rounded-bl-md bg-muted text-foreground",
-        user: "rounded-br-md bg-primary text-primary-foreground",
+        user: "rounded-br-md bg-primary text-primary-foreground shadow-primary/16 shadow-xs",
       },
     },
   },
@@ -124,6 +298,35 @@ function ChatMessageBubble({ className, from, ...props }: ChatMessageBubbleProps
   );
 }
 
+/**
+ * Small inline pill for tool activity ("Using X…", "X finished"). Pass the
+ * status icon (wrench, spinner, check) as `icon`.
+ */
+function ChatToolChip({
+  className,
+  children,
+  icon,
+  ...props
+}: React.ComponentProps<"div"> & { icon?: React.ReactNode }) {
+  return (
+    <div
+      className={cn(
+        "fade-in-0 flex w-fit max-w-full animate-in items-center gap-1.5 rounded-full border border-border/72 bg-muted/48 py-1 pr-3 pl-1.5 text-muted-foreground text-xs duration-200",
+        className,
+      )}
+      data-slot="chat-tool-chip"
+      {...props}
+    >
+      {icon ? (
+        <span className="flex size-4.5 shrink-0 items-center justify-center rounded-full bg-background text-foreground/72 shadow-xs [&_svg:not([class*='size-'])]:size-2.5">
+          {icon}
+        </span>
+      ) : null}
+      <span className="min-w-0 truncate">{children}</span>
+    </div>
+  );
+}
+
 /**
  * Framed card for tool activity inside a conversation: running/finished tool
  * calls, results, and write-action approval prompts. Compose with `Button`s
@@ -133,7 +336,7 @@ function ChatToolCard({ className, ...props }: React.ComponentProps<"div">) {
   return (
     <div
       className={cn(
-        "w-full max-w-[95%] rounded-xl border border-border bg-card p-3 text-card-foreground text-sm shadow-xs",
+        "fade-in-0 slide-in-from-bottom-1 w-full max-w-[95%] animate-in rounded-xl border border-border bg-card p-3 text-card-foreground text-sm shadow-xs duration-200",
         className,
       )}
       data-slot="chat-tool-card"
@@ -167,7 +370,7 @@ function ChatTypingIndicator({ className, ...props }: React.ComponentProps<"div"
     <div
       aria-label="Assistant is typing"
       className={cn(
-        "flex w-fit items-center gap-1 rounded-2xl rounded-bl-md bg-muted px-3.5 py-2.5",
+        "fade-in-0 flex w-fit animate-in items-center gap-1 rounded-2xl rounded-bl-md bg-muted px-3.5 py-2.5 duration-200",
         className,
       )}
       data-slot="chat-typing-indicator"
@@ -191,6 +394,10 @@ export interface ChatInputProps
   disabled?: boolean;
 }
 
+/**
+ * Composer: a rounded card wrapping an auto-growing textarea and a round send
+ * button. Enter submits, Shift+Enter inserts a newline.
+ */
 function ChatInput({
   className,
   disabled,
@@ -218,54 +425,70 @@ function ChatInput({
 
   return (
     <form
-      className={cn(
-        "flex items-end gap-2 border-border border-t bg-background p-3",
-        className,
-      )}
+      className={cn("shrink-0 bg-background p-3 pt-1.5", className)}
       data-slot="chat-input"
       onSubmit={(event) => {
         event.preventDefault();
         submit();
       }}
     >
-      <textarea
-        className="max-h-36 min-h-9 flex-1 resize-none rounded-lg border border-input bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:opacity-64"
-        disabled={disabled}
-        onChange={(event) => onValueChange(event.target.value)}
-        onKeyDown={(event) => {
-          if (event.key === "Enter" && !event.shiftKey) {
-            event.preventDefault();
-            submit();
-          }
-        }}
-        placeholder={placeholder}
-        ref={textareaRef}
-        rows={1}
-        value={value}
-        {...props}
-      />
-      <Button
-        aria-label="Send message"
-        disabled={disabled || !value.trim()}
-        size="icon"
-        type="submit"
+      <div
+        className={cn(
+          "flex items-end gap-1.5 rounded-2xl border border-input bg-popover p-1.5 pl-3.5 shadow-xs transition-[border-color,box-shadow] duration-150 focus-within:border-ring/64 focus-within:ring-2 focus-within:ring-ring/24 dark:bg-input/32",
+          disabled && "opacity-64",
+        )}
       >
-        <ArrowUpIcon />
-      </Button>
+        <textarea
+          className="max-h-36 min-h-8 flex-1 resize-none self-center bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-foreground"
+          disabled={disabled}
+          onChange={(event) => onValueChange(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              submit();
+            }
+          }}
+          placeholder={placeholder}
+          ref={textareaRef}
+          rows={1}
+          value={value}
+          {...props}
+        />
+        <Button
+          aria-label="Send message"
+          className="rounded-full before:rounded-full"
+          disabled={disabled || !value.trim()}
+          size="icon-sm"
+          type="submit"
+        >
+          <ArrowUpIcon />
+        </Button>
+      </div>
     </form>
   );
 }
 
 export {
   Chat,
+  ChatEmptyState,
+  ChatEmptyStateDescription,
+  ChatEmptyStateIcon,
+  ChatEmptyStateTitle,
+  ChatHeader,
+  ChatHeaderActions,
+  ChatHeaderAvatar,
+  ChatHeaderTitle,
   ChatInput,
   ChatMessage,
   ChatMessageBubble,
   chatMessageBubbleVariants,
   chatMessageVariants,
   ChatMessages,
+  ChatSuggestion,
+  ChatSuggestions,
   ChatToolCard,
   ChatToolCardActions,
   ChatToolCardHeader,
+  ChatToolChip,
   ChatTypingIndicator,
 };