ai-design-system 0.1.0

package/components/composites/TablePagination/TablePagination.tsx

@@ -0,0 +1,119 @@
+import * as React from "react"
+import { Button } from "@/components/primitives/Button"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/primitives/Select"
+import { Label } from "@/components/primitives/Label"
+import type { Table } from "@tanstack/react-table"
+
+/**
+ * TablePagination Composite
+ *
+ * Reusable pagination controls for tables with TanStack Table integration.
+ * Composes Button, Select, and Label primitives.
+ *
+ * @example
+ * ```tsx
+ * <TablePagination table={table} />
+ * ```
+ */
+
+export interface TablePaginationProps {
+  /**
+   * TanStack Table instance
+   */
+  table: Table<any>
+  /**
+   * Available page size options
+   */
+  pageSizeOptions?: number[]
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+}
+
+/**
+ * TablePagination component
+ *
+ * Provides pagination controls including page size selection and navigation buttons.
+ */
+export const TablePagination = React.memo<TablePaginationProps>(
+  ({ table, pageSizeOptions = [10, 20, 30, 40, 50], className }) => {
+    return (
+      <div className={`flex items-center justify-between px-4 py-2 ${className || ""}`}>
+        <div className="text-sm text-muted-foreground">
+          {table.getFilteredSelectedRowModel().rows.length} of{" "}
+          {table.getFilteredRowModel().rows.length} row(s) selected
+        </div>
+        <div className="flex items-center gap-8">
+          <div className="flex items-center gap-2">
+            <Label htmlFor="rows-per-page" className="text-sm">
+              Rows per page
+            </Label>
+            <Select
+              value={`${table.getState().pagination.pageSize}`}
+              onValueChange={(value) => table.setPageSize(Number(value))}
+            >
+              <SelectTrigger id="rows-per-page" className="h-8 w-[70px]">
+                <SelectValue placeholder={table.getState().pagination.pageSize} />
+              </SelectTrigger>
+              <SelectContent side="top">
+                {pageSizeOptions.map((pageSize) => (
+                  <SelectItem key={pageSize} value={`${pageSize}`}>
+                    {pageSize}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </div>
+          <div className="flex items-center gap-2">
+            <div className="text-sm font-medium">
+              Page {table.getState().pagination.pageIndex + 1} of {table.getPageCount()}
+            </div>
+            <div className="flex items-center gap-1">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => table.setPageIndex(0)}
+                disabled={!table.getCanPreviousPage()}
+              >
+                First
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => table.previousPage()}
+                disabled={!table.getCanPreviousPage()}
+              >
+                Previous
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => table.nextPage()}
+                disabled={!table.getCanNextPage()}
+              >
+                Next
+              </Button>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+                disabled={!table.getCanNextPage()}
+              >
+                Last
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+TablePagination.displayName = "TablePagination"

package/components/composites/TablePagination/index.ts

@@ -0,0 +1,2 @@
+export { TablePagination } from './TablePagination'
+export type { TablePaginationProps } from './TablePagination'

package/components/composites/TableToolbar/TableToolbar.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { TableToolbar } from './TableToolbar'
+import { useReactTable, getCoreRowModel, getFilteredRowModel, createColumnHelper } from '@tanstack/react-table'
+import { Button } from '@/components/primitives/Button'
+
+const meta = {
+  title: 'Composites/TableToolbar',
+  component: TableToolbar,
+  tags: ['autodocs'],
+  parameters: { layout: 'padded' },
+} satisfies Meta<typeof TableToolbar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+type Person = { id: number; name: string; email: string }
+const data: Person[] = [{ id: 1, name: 'John', email: 'john@example.com' }]
+const columnHelper = createColumnHelper<Person>()
+
+export const Default: Story = {
+  render: () => {
+    const columns = [
+      columnHelper.accessor('name', { header: 'Name' }),
+      columnHelper.accessor('email', { header: 'Email' }),
+    ]
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    })
+    return <TableToolbar table={table} searchColumn="name" />
+  },
+}
+
+export const WithActions: Story = {
+  render: () => {
+    const columns = [
+      columnHelper.accessor('name', { header: 'Name' }),
+      columnHelper.accessor('email', { header: 'Email' }),
+    ]
+    const table = useReactTable({
+      data,
+      columns,
+      getCoreRowModel: getCoreRowModel(),
+      getFilteredRowModel: getFilteredRowModel(),
+    })
+    return (
+      <TableToolbar
+        table={table}
+        searchColumn="name"
+        actions={
+          <Button size="sm" variant="default">
+            Add New
+          </Button>
+        }
+      />
+    )
+  },
+}

package/components/composites/TableToolbar/TableToolbar.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { Input } from "@/components/primitives/Input"
+import { Button } from "@/components/primitives/Button"
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/primitives/DropdownMenu"
+import { Icon } from "@/components/primitives/Icon"
+import type { Table } from "@tanstack/react-table"
+
+export interface TableToolbarProps {
+  table: Table<any>
+  searchPlaceholder?: string
+  searchColumn?: string
+  actions?: React.ReactNode
+  className?: string
+}
+
+export const TableToolbar = React.memo<TableToolbarProps>(
+  ({ table, searchPlaceholder = "Search...", searchColumn, actions, className }) => {
+    return (
+      <div className={`flex items-center justify-between px-4 py-2 ${className || ""}`}>
+        <div className="flex flex-1 items-center gap-2">
+          <Input
+            placeholder={searchPlaceholder}
+            value={(searchColumn && (table.getColumn(searchColumn)?.getFilterValue() as string)) ?? ""}
+            onChange={(e) => searchColumn && table.getColumn(searchColumn)?.setFilterValue(e.target.value)}
+            className="h-8 w-[150px] lg:w-[250px]"
+          />
+        </div>
+        <div className="flex items-center gap-2">
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button variant="outline" size="sm" className="ml-auto">
+                <Icon name="settings-2" className="mr-2 h-4 w-4" />
+                Columns
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end">
+              {table
+                .getAllColumns()
+                .filter((column) => column.getCanHide())
+                .map((column) => {
+                  return (
+                    <DropdownMenuCheckboxItem
+                      key={column.id}
+                      className="capitalize"
+                      checked={column.getIsVisible()}
+                      onCheckedChange={(value) => column.toggleVisibility(!!value)}
+                    >
+                      {column.id}
+                    </DropdownMenuCheckboxItem>
+                  )
+                })}
+            </DropdownMenuContent>
+          </DropdownMenu>
+          {actions}
+        </div>
+      </div>
+    )
+  }
+)
+
+TableToolbar.displayName = "TableToolbar"

package/components/composites/TableToolbar/index.ts

@@ -0,0 +1,2 @@
+export { TableToolbar } from './TableToolbar'
+export type { TableToolbarProps } from './TableToolbar'

package/components/composites/ThemeSelector/ThemeSelector.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ThemeSelector } from './ThemeSelector'
+import { useState } from 'react'
+
+const meta = {
+  title: 'Composites/ThemeSelector',
+  component: ThemeSelector,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ThemeSelector>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const themes = [
+  { label: 'Default', value: 'default' },
+  { label: 'Ocean', value: 'ocean' },
+  { label: 'Forest', value: 'forest' },
+  { label: 'Sunset', value: 'sunset' },
+]
+
+export const Default: Story = {
+  args: {
+    themes,
+    placeholder: 'Select theme',
+  },
+}
+
+export const WithValue: Story = {
+  args: {
+    themes,
+    value: 'ocean',
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [value, setValue] = useState('default')
+    return (
+      <div style={{ minWidth: '200px' }}>
+        <ThemeSelector themes={themes} value={value} onValueChange={setValue} />
+        <p style={{ marginTop: '16px', fontSize: '14px' }}>Selected: {value}</p>
+      </div>
+    )
+  },
+}

package/components/composites/ThemeSelector/ThemeSelector.tsx

@@ -0,0 +1,79 @@
+import * as React from "react"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/primitives/Select"
+
+/**
+ * ThemeSelector Composite
+ *
+ * A theme variant selector component that allows users to choose from multiple theme options.
+ * Composes Select primitive.
+ *
+ * @example
+ * ```tsx
+ * const themes = [
+ *   { label: "Default", value: "default" },
+ *   { label: "Ocean", value: "ocean" },
+ *   { label: "Forest", value: "forest" },
+ * ]
+ * <ThemeSelector themes={themes} value="default" onValueChange={setTheme} />
+ * ```
+ */
+
+export interface Theme {
+  label: string
+  value: string
+}
+
+export interface ThemeSelectorProps {
+  /**
+   * Available theme options
+   */
+  themes: Theme[]
+  /**
+   * Currently selected theme value
+   */
+  value?: string
+  /**
+   * Callback when theme selection changes
+   */
+  onValueChange?: (value: string) => void
+  /**
+   * Placeholder text when no theme is selected
+   */
+  placeholder?: string
+  /**
+   * Additional CSS classes
+   */
+  className?: string
+}
+
+/**
+ * ThemeSelector component
+ *
+ * Provides a select dropdown to choose from multiple theme variants.
+ */
+export const ThemeSelector = React.memo<ThemeSelectorProps>(
+  ({ themes, value, onValueChange, placeholder = "Select theme", className }) => {
+    return (
+      <Select value={value} onValueChange={onValueChange}>
+        <SelectTrigger className={className}>
+          <SelectValue placeholder={placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {themes.map((theme) => (
+            <SelectItem key={theme.value} value={theme.value}>
+              {theme.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+    )
+  }
+)
+
+ThemeSelector.displayName = "ThemeSelector"

package/components/composites/ThemeSelector/index.ts

@@ -0,0 +1,2 @@
+export { ThemeSelector } from './ThemeSelector'
+export type { ThemeSelectorProps, Theme } from './ThemeSelector'

package/components/composites/ToolCallDisplay/ToolCallDisplay.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ToolCallDisplay } from './ToolCallDisplay'
+
+const meta: Meta<typeof ToolCallDisplay> = {
+  title: 'Composites/ToolCallDisplay',
+  component: ToolCallDisplay,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof ToolCallDisplay>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    toolCall: {
+      id: 'tool_1',
+      name: 'write_file',
+      args: { filename: 'research.md', content: 'Research content here...' },
+      result: 'File created successfully',
+      status: 'completed',
+    },
+  },
+}
+
+export const Pending: Story = {
+  args: {
+    toolCall: {
+      id: 'tool_2',
+      name: 'analyze_data',
+      args: { dataset: 'user_metrics', filters: ['active_users', 'retention'] },
+      result: null,
+      status: 'pending',
+    },
+  },
+}
+
+export const Error: Story = {
+  args: {
+    toolCall: {
+      id: 'tool_3',
+      name: 'fetch_data',
+      args: { url: 'https://api.example.com/data' },
+      result: 'Connection timeout after 30 seconds',
+      status: 'error',
+    },
+  },
+}

package/components/composites/ToolCallDisplay/ToolCallDisplay.tsx

@@ -0,0 +1,108 @@
+import * as React from "react"
+import {
+  Tool,
+  ToolHeader,
+  ToolContent,
+  ToolInput,
+  ToolOutput,
+} from "@/components/ai-elements/tool"
+
+/**
+ * ToolCallDisplay Block
+ *
+ * A block component that extends the Tool AI element to display tool execution details
+ * with expandable input parameters and output results. Copied logic from reference implementation.
+ */
+
+export interface ToolCall {
+  id: string
+  name: string
+  args: Record<string, unknown>
+  result?: string
+  status: "pending" | "completed" | "error"
+}
+
+export interface ToolCallDisplayProps {
+  /**
+   * Tool call data to display
+   */
+  toolCall: ToolCall
+  /**
+   * Whether the tool call is initially expanded
+   */
+  defaultExpanded?: boolean
+}
+
+/**
+ * ToolCallDisplay component - displays tool execution with expandable details
+ */
+export const ToolCallDisplay = React.memo<ToolCallDisplayProps>(
+  ({ toolCall, defaultExpanded = false }) => {
+    const [isExpanded, setIsExpanded] = React.useState(defaultExpanded)
+
+    const { name, args, result, status } = React.useMemo(() => {
+      const toolName = toolCall.name || "Unknown Tool"
+      const toolArgs = toolCall.args || {}
+      let parsedArgs: Record<string, unknown> = {}
+      try {
+        parsedArgs = typeof toolArgs === "string" ? JSON.parse(toolArgs) : toolArgs
+      } catch {
+        parsedArgs = { raw: toolArgs }
+      }
+      const toolResult = toolCall.result || null
+      const toolStatus = toolCall.status || "completed"
+
+      return {
+        name: toolName,
+        args: parsedArgs,
+        result: toolResult,
+        status: toolStatus,
+      }
+    }, [toolCall])
+
+    const toggleExpanded = React.useCallback(() => {
+      setIsExpanded((prev) => !prev)
+    }, [])
+
+    const hasContent = React.useMemo(() => {
+      return result !== null || Object.keys(args).length > 0
+    }, [result, args])
+
+    // Map our status to Tool AI element status
+    const toolState = React.useMemo(() => {
+      switch (status) {
+        case "pending":
+          return "input-available" as const
+        case "completed":
+          return "output-available" as const
+        case "error":
+          return "output-error" as const
+        default:
+          return "output-available" as const
+      }
+    }, [status])
+
+    return (
+      <Tool defaultOpen={isExpanded}>
+        <ToolHeader
+          title={name}
+          type={`tool-${name}` as const}
+          state={toolState}
+        />
+        <ToolContent>
+          {Object.keys(args).length > 0 && (
+            <ToolInput input={args} />
+          )}
+          {result && (
+            <ToolOutput
+              output={result}
+              errorText={status === "error" ? result : undefined}
+            />
+          )}
+        </ToolContent>
+      </Tool>
+    )
+  }
+)
+
+ToolCallDisplay.displayName = "ToolCallDisplay"

package/components/composites/ToolCallDisplay/index.ts

@@ -0,0 +1,8 @@
+/**
+ * ToolCallDisplay Block
+ *
+ * Central export point for the ToolCallDisplay block component and its related types.
+ */
+export { ToolCallDisplay } from './ToolCallDisplay'
+
+export type { ToolCallDisplayProps, ToolCall } from './ToolCallDisplay'

package/components/composites/UserMessage/UserMessage.stories.tsx

@@ -0,0 +1,59 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { UserMessage } from './UserMessage'
+
+const meta: Meta<typeof UserMessage> = {
+  title: 'Composites/UserMessage',
+  component: UserMessage,
+  parameters: {
+    layout: 'padded',
+  },
+} satisfies Meta<typeof UserMessage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    message: {
+      id: '1',
+      content: 'Hello, I need help with something',
+      avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'User',
+    },
+    showAvatar: true,
+  },
+}
+
+export const WithoutAvatar: Story = {
+  args: {
+    message: {
+      id: '2',
+      content: 'This is a user message without an avatar',
+    },
+    showAvatar: false,
+  },
+}
+
+export const LongMessage: Story = {
+  args: {
+    message: {
+      id: '3',
+      content: 'This is a much longer user message that contains multiple sentences. It demonstrates how the component handles longer text content and how it wraps appropriately within the message bubble. The text should remain readable and properly formatted even when it spans multiple lines.',
+      avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'User',
+    },
+    showAvatar: true,
+  },
+}
+
+export const ShortQuestion: Story = {
+  args: {
+    message: {
+      id: '4',
+      content: 'Why?',
+      avatarSrc: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?w=32&h=32&fit=crop&crop=face',
+      avatarName: 'User',
+    },
+    showAvatar: true,
+  },
+}

package/components/composites/UserMessage/UserMessage.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+import {
+  Message,
+  MessageContent,
+  MessageAvatar,
+} from "@/components/ai-elements/message"
+
+/**
+ * UserMessage Block
+ *
+ * A simple block component for displaying user messages.
+ * Uses Message AI element with right-alignment.
+ */
+
+export interface UserMessageData {
+  id: string
+  content: string
+  avatarSrc?: string
+  avatarName?: string
+}
+
+export interface UserMessageProps {
+  /**
+   * User message data to display
+   */
+  message: UserMessageData
+  /**
+   * Whether to show avatar
+   */
+  showAvatar?: boolean
+}
+
+/**
+ * UserMessage component - displays user messages with right alignment
+ */
+export const UserMessage = React.memo<UserMessageProps>(
+  ({ message, showAvatar = true }) => {
+    return (
+      <Message from="user">
+        {showAvatar && (
+          <MessageAvatar
+            src={message.avatarSrc || "/user-avatar.png"}
+            name={message.avatarName || "User"}
+          />
+        )}
+        <MessageContent variant="contained">{message.content}</MessageContent>
+      </Message>
+    )
+  }
+)
+
+UserMessage.displayName = "UserMessage"

package/components/composites/UserMessage/index.ts

@@ -0,0 +1,8 @@
+/**
+ * UserMessage Block
+ *
+ * Central export point for the UserMessage block component and its related types.
+ */
+export { UserMessage } from './UserMessage'
+
+export type { UserMessageProps, UserMessageData } from './UserMessage'