@cntyclub/ui-react 0.1.0 → 0.2.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.0",
+  "version": "0.2.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,271 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { ArrowUpIcon } 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, a tool
+ * activity/approval card frame, a typing indicator, and a submit-on-Enter
+ * input. 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}
+    />
+  );
+}
+
+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>
+  );
+}
+
+const chatMessageVariants = cva("flex w-full flex-col gap-1", {
+  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",
+      },
+    },
+  },
+);
+
+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}
+    />
+  );
+}
+
+/**
+ * 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(
+        "w-full max-w-[95%] rounded-xl border border-border bg-card p-3 text-card-foreground text-sm shadow-xs",
+        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(
+        "flex w-fit items-center gap-1 rounded-2xl rounded-bl-md bg-muted px-3.5 py-2.5",
+        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;
+}
+
+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(
+        "flex items-end gap-2 border-border border-t bg-background p-3",
+        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"
+      >
+        <ArrowUpIcon />
+      </Button>
+    </form>
+  );
+}
+
+export {
+  Chat,
+  ChatInput,
+  ChatMessage,
+  ChatMessageBubble,
+  chatMessageBubbleVariants,
+  chatMessageVariants,
+  ChatMessages,
+  ChatToolCard,
+  ChatToolCardActions,
+  ChatToolCardHeader,
+  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 };

package/src/components/ui/fab.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import type * as React from "react";
+
+import { cn } from "../../lib/utils/css";
+import { Button, type ButtonProps } from "./button";
+
+const fabVariants = cva(
+  "fixed z-50 rounded-full shadow-lg transition-transform duration-150 hover:scale-105 active:scale-95 before:rounded-full",
+  {
+    defaultVariants: {
+      position: "bottom-right",
+    },
+    variants: {
+      position: {
+        "bottom-right": "right-4 bottom-4 sm:right-6 sm:bottom-6",
+        "bottom-left": "bottom-4 left-4 sm:bottom-6 sm:left-6",
+        "top-right": "top-4 right-4 sm:top-6 sm:right-6",
+        "top-left": "top-4 left-4 sm:top-6 sm:left-6",
+      },
+    },
+  },
+);
+
+export interface FabProps extends ButtonProps {
+  position?: VariantProps<typeof fabVariants>["position"];
+}
+
+/**
+ * Floating action button — a fixed, round icon button used to summon overlays
+ * such as chat widgets. Composes `Button`, so all button variants/sizes apply.
+ */
+function Fab({ className, position, size = "icon-xl", ...props }: FabProps) {
+  return (
+    <Button
+      className={cn(fabVariants({ className, position }))}
+      data-slot="fab"
+      size={size}
+      {...props}
+    />
+  );
+}
+
+export { Fab, fabVariants };

package/src/components/ui/markdown.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import type * as React from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+import { cn } from "../../lib/utils/css";
+
+export interface MarkdownProps {
+  /** The markdown source to render. */
+  children: string;
+  className?: string;
+}
+
+/**
+ * Markdown renderer for assistant/chat content (GitHub-flavored markdown).
+ * Raw HTML in the source is NOT rendered — output is limited to markdown
+ * elements, which keeps untrusted model output safe to display.
+ */
+function Markdown({ children, className }: MarkdownProps) {
+  return (
+    <div
+      className={cn(
+        "space-y-2 break-words text-foreground text-sm leading-relaxed",
+        className,
+      )}
+      data-slot="markdown"
+    >
+      <ReactMarkdown
+        components={{
+          a: ({ node: _node, ...props }) => (
+            <a
+              className="font-medium text-primary underline underline-offset-2 hover:opacity-80"
+              rel="noreferrer noopener"
+              target="_blank"
+              {...props}
+            />
+          ),
+          blockquote: ({ node: _node, ...props }) => (
+            <blockquote
+              className="border-border border-l-2 pl-3 text-muted-foreground italic"
+              {...props}
+            />
+          ),
+          code: ({ node: _node, className: codeClassName, ...props }) => {
+            const isBlock = /language-/.test(codeClassName ?? "");
+            return (
+              <code
+                className={cn(
+                  "rounded bg-muted font-mono text-[0.85em]",
+                  isBlock ? "block overflow-x-auto p-3" : "px-1 py-0.5",
+                  codeClassName,
+                )}
+                {...props}
+              />
+            );
+          },
+          h1: ({ node: _node, ...props }) => (
+            <h1 className="font-semibold text-base" {...props} />
+          ),
+          h2: ({ node: _node, ...props }) => (
+            <h2 className="font-semibold text-base" {...props} />
+          ),
+          h3: ({ node: _node, ...props }) => (
+            <h3 className="font-semibold text-sm" {...props} />
+          ),
+          hr: ({ node: _node, ...props }) => (
+            <hr className="border-border" {...props} />
+          ),
+          li: ({ node: _node, ...props }) => <li className="my-0.5" {...props} />,
+          ol: ({ node: _node, ...props }) => (
+            <ol className="list-decimal space-y-1 pl-5" {...props} />
+          ),
+          pre: ({ node: _node, ...props }) => (
+            <pre
+              className="overflow-x-auto rounded-lg bg-muted p-0 text-[0.85em]"
+              {...props}
+            />
+          ),
+          table: ({ node: _node, ...props }) => (
+            <div className="overflow-x-auto rounded-lg border border-border">
+              <table className="w-full text-left text-sm" {...props} />
+            </div>
+          ),
+          td: ({ node: _node, ...props }) => (
+            <td className="border-border border-t px-3 py-1.5 align-top" {...props} />
+          ),
+          th: ({ node: _node, ...props }) => (
+            <th
+              className="bg-muted px-3 py-1.5 font-medium text-muted-foreground"
+              {...props}
+            />
+          ),
+          ul: ({ node: _node, ...props }) => (
+            <ul className="list-disc space-y-1 pl-5" {...props} />
+          ),
+        }}
+        remarkPlugins={[remarkGfm]}
+        skipHtml
+      >
+        {children}
+      </ReactMarkdown>
+    </div>
+  );
+}
+
+export { Markdown };

package/src/index.ts

@@ -19,16 +19,19 @@ export * from "./components/ui/calendar";
 export * from "./components/ui/card";
 export * from "./components/ui/carousel";
 export * from "./components/ui/chart";
+export * from "./components/ui/chat";
 export * from "./components/ui/checkbox";
 export * from "./components/ui/checkbox-group";
 export * from "./components/ui/collapsible";
 export * from "./components/ui/combobox";
 export * from "./components/ui/command";
 export * from "./components/ui/credit-card";
+export * from "./components/ui/data-table-paged";
 export * from "./components/ui/drawer";
 export * from "./components/ui/context-menu";
 export * from "./components/ui/dialog";
 export * from "./components/ui/empty";
+export * from "./components/ui/fab";
 export * from "./components/ui/featured-icon";
 export * from "./components/ui/field";
 export * from "./components/ui/fieldset";
@@ -43,6 +46,7 @@ export * from "./components/ui/input-otp";
 export * from "./components/ui/item";
 export * from "./components/ui/kbd";
 export * from "./components/ui/label";
+export * from "./components/ui/markdown";
 export * from "./components/ui/menu";
 export * from "./components/ui/menubar";
 export * from "./components/ui/meter";