@cntyclub/ui-react 0.1.1 → 0.3.0

package/dist/{input-CZvh825j.d.ts → input-JCZs61MO.d.ts}

@@ -21,4 +21,4 @@ type InputProps = Omit<Input$1.Props & React.RefAttributes<HTMLInputElement>, "s
 };
 declare function Input({ className, size, unstyled, nativeInput, ...props }: InputProps): React.JSX.Element;
 
-export { Button as B, Input as I, type InputProps as a, type ButtonProps as b, buttonVariants as c };
+export { Button as B, Input as I, type ButtonProps as a, type InputProps as b, buttonVariants as c };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntyclub/ui-react",
-  "version": "0.1.1",
+  "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": [
@@ -48,8 +48,10 @@
     "qr-code-styling": "^1.9.2",
     "react-day-picker": "^9.14.0",
     "react-dropzone": "^14.4.0",
+    "react-markdown": "^9.1.0",
     "react-resizable-panels": "^3.0.6",
     "recharts": "^3.7.0",
+    "remark-gfm": "^4.0.1",
     "spin-delay": "^2.0.1",
     "tailwind-merge": "^3.4.0",
     "tw-animate-css": "^1.4.0",

package/src/components/ui/chat.tsx

@@ -0,0 +1,494 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowRightIcon, ArrowUpIcon, SparklesIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Button } from "./button";
+
+/**
+ * Chat primitives for AI-assistant experiences: a column layout, an
+ * 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">) {
+  return (
+    <div
+      className={cn("flex min-h-0 flex-1 flex-col", className)}
+      data-slot="chat"
+      {...props}
+    />
+  );
+}
+
+/**
+ * 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,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  /** Keep the viewport pinned to the bottom while new messages stream in. */
+  autoScroll?: boolean;
+}) {
+  const viewportRef = React.useRef<HTMLDivElement>(null);
+  const pinnedRef = React.useRef(true);
+
+  const handleScroll = React.useCallback(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) return;
+    const distanceFromBottom =
+      viewport.scrollHeight - viewport.scrollTop - viewport.clientHeight;
+    pinnedRef.current = distanceFromBottom < 48;
+  }, []);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: children is the scroll trigger
+  React.useEffect(() => {
+    const viewport = viewportRef.current;
+    if (!viewport || !autoScroll || !pinnedRef.current) return;
+    viewport.scrollTop = viewport.scrollHeight;
+  }, [children, autoScroll]);
+
+  return (
+    <div
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-3 overflow-y-auto scroll-smooth p-4",
+        className,
+      )}
+      data-slot="chat-messages"
+      onScroll={handleScroll}
+      ref={viewportRef}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * 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">,
+    VariantProps<typeof chatMessageVariants> {}
+
+function ChatMessage({ className, from, ...props }: ChatMessageProps) {
+  return (
+    <div
+      className={cn(chatMessageVariants({ className, from }))}
+      data-from={from ?? "assistant"}
+      data-slot="chat-message"
+      {...props}
+    />
+  );
+}
+
+const chatMessageBubbleVariants = cva(
+  "max-w-[85%] rounded-2xl px-3.5 py-2 text-sm leading-relaxed break-words",
+  {
+    defaultVariants: {
+      from: "assistant",
+    },
+    variants: {
+      from: {
+        assistant: "rounded-bl-md bg-muted text-foreground",
+        user: "rounded-br-md bg-primary text-primary-foreground shadow-primary/16 shadow-xs",
+      },
+    },
+  },
+);
+
+export interface ChatMessageBubbleProps
+  extends React.ComponentProps<"div">,
+    VariantProps<typeof chatMessageBubbleVariants> {}
+
+function ChatMessageBubble({ className, from, ...props }: ChatMessageBubbleProps) {
+  return (
+    <div
+      className={cn(chatMessageBubbleVariants({ className, from }))}
+      data-from={from ?? "assistant"}
+      data-slot="chat-message-bubble"
+      {...props}
+    />
+  );
+}
+
+/**
+ * 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
+ * in the `actions` area for approve/decline flows.
+ */
+function ChatToolCard({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "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"
+      {...props}
+    />
+  );
+}
+
+function ChatToolCardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex items-center gap-2 font-medium", className)}
+      data-slot="chat-tool-card-header"
+      {...props}
+    />
+  );
+}
+
+function ChatToolCardActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("mt-3 flex items-center justify-end gap-2", className)}
+      data-slot="chat-tool-card-actions"
+      {...props}
+    />
+  );
+}
+
+function ChatTypingIndicator({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      aria-label="Assistant is typing"
+      className={cn(
+        "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"
+      role="status"
+      {...props}
+    >
+      <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:0ms]" />
+      <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:150ms]" />
+      <span className="size-1.5 animate-bounce rounded-full bg-muted-foreground/60 [animation-delay:300ms]" />
+    </div>
+  );
+}
+
+export interface ChatInputProps
+  extends Omit<React.ComponentProps<"textarea">, "onSubmit" | "value" | "onChange"> {
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Called with the trimmed message when the user submits (Enter or button). */
+  onSubmit: (value: string) => void;
+  /** Disables both the textarea and the send button (e.g. while sending). */
+  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,
+  onSubmit,
+  onValueChange,
+  placeholder = "Ask anything…",
+  value,
+  ...props
+}: ChatInputProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  const submit = React.useCallback(() => {
+    const trimmed = value.trim();
+    if (!trimmed || disabled) return;
+    onSubmit(trimmed);
+  }, [disabled, onSubmit, value]);
+
+  // Auto-grow up to ~6 lines.
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    textarea.style.height = "auto";
+    textarea.style.height = `${Math.min(textarea.scrollHeight, 144)}px`;
+  }, [value]);
+
+  return (
+    <form
+      className={cn("shrink-0 bg-background p-3 pt-1.5", className)}
+      data-slot="chat-input"
+      onSubmit={(event) => {
+        event.preventDefault();
+        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",
+        )}
+      >
+        <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,
+};

package/src/components/ui/data-table-paged.tsx

@@ -0,0 +1,163 @@
+"use client";
+
+import { SearchIcon } from "lucide-react";
+import * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Input } from "./input";
+import { PaginationControls } from "./pagination-controls";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./table";
+
+export interface DataTablePagedColumn {
+  key: string;
+  label?: string;
+}
+
+export interface DataTablePagedProps {
+  /** Columns to render. Pass `label` to override the header text. */
+  columns: DataTablePagedColumn[];
+  /** Row objects; values are rendered with `String(...)` unless a ReactNode. */
+  rows: Record<string, unknown>[];
+  pageSize?: number;
+  /** Show the client-side search box (filters across all columns). */
+  searchable?: boolean;
+  searchPlaceholder?: string;
+  emptyLabel?: string;
+  /**
+   * Total row count when `rows` is only one page of a larger server-side set —
+   * shown as "n of total" in the footer.
+   */
+  totalCount?: number;
+  className?: string;
+}
+
+function formatCell(value: unknown): React.ReactNode {
+  if (value === null || value === undefined || value === "") return "—";
+  if (typeof value === "boolean") return value ? "Yes" : "No";
+  if (React.isValidElement(value)) return value;
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+
+/**
+ * Client-side paginated (and optionally searchable) data table. Designed for
+ * result sets a chat agent or API returns: pass plain row objects and column
+ * keys, get a themed table with pagination that never renders huge lists.
+ */
+function DataTablePaged({
+  className,
+  columns,
+  emptyLabel = "No results",
+  pageSize = 10,
+  rows,
+  searchable = true,
+  searchPlaceholder = "Filter results…",
+  totalCount,
+}: DataTablePagedProps) {
+  const [page, setPage] = React.useState(1);
+  const [query, setQuery] = React.useState("");
+
+  const filteredRows = React.useMemo(() => {
+    const trimmed = query.trim().toLowerCase();
+    if (!trimmed) return rows;
+    return rows.filter((row) =>
+      columns.some((column) =>
+        String(row[column.key] ?? "")
+          .toLowerCase()
+          .includes(trimmed),
+      ),
+    );
+  }, [columns, query, rows]);
+
+  const pageCount = Math.max(1, Math.ceil(filteredRows.length / pageSize));
+  const safePage = Math.min(page, pageCount);
+  const pageRows = filteredRows.slice((safePage - 1) * pageSize, safePage * pageSize);
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)} data-slot="data-table-paged">
+      {searchable && rows.length > pageSize && (
+        <div className="relative">
+          <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-2.5 size-4 text-muted-foreground" />
+          <Input
+            className="h-8 pl-8 text-sm"
+            onChange={(event) => {
+              setQuery(event.target.value);
+              setPage(1);
+            }}
+            placeholder={searchPlaceholder}
+            value={query}
+          />
+        </div>
+      )}
+
+      <div className="overflow-x-auto rounded-lg border border-border">
+        <Table>
+          <TableHeader>
+            <TableRow>
+              {columns.map((column) => (
+                <TableHead className="whitespace-nowrap" key={column.key}>
+                  {column.label ?? column.key.replaceAll("_", " ")}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {pageRows.length === 0 ? (
+              <TableRow>
+                <TableCell
+                  className="py-6 text-center text-muted-foreground"
+                  colSpan={columns.length}
+                >
+                  {emptyLabel}
+                </TableCell>
+              </TableRow>
+            ) : (
+              pageRows.map((row, rowIndex) => (
+                <TableRow key={`${safePage}-${rowIndex}`}>
+                  {columns.map((column) => (
+                    <TableCell className="max-w-56 truncate" key={column.key}>
+                      {formatCell(row[column.key])}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      <div className="flex flex-wrap items-center justify-between gap-2">
+        <span className="text-muted-foreground text-xs">
+          {filteredRows.length}
+          {typeof totalCount === "number" && totalCount > rows.length
+            ? ` of ${totalCount}`
+            : ""}{" "}
+          rows
+        </span>
+        <PaginationControls
+          page={safePage}
+          pageCount={pageCount}
+          renderPageLink={(nextPage) => (
+            // biome-ignore lint/a11y/useValidAnchor: client-side pagination
+            <a
+              href="#"
+              onClick={(event) => {
+                event.preventDefault();
+                setPage(nextPage);
+              }}
+            />
+          )}
+        />
+      </div>
+    </div>
+  );
+}
+
+export { DataTablePaged };