@opencosmos/ui 1.3.1

package/src/components/data-display/DataTable.tsx

@@ -0,0 +1,119 @@
+"use client"
+
+import * as React from "react"
+import {
+  ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  SortingState,
+  useReactTable,
+} from "@tanstack/react-table"
+
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "./Table"
+import { Button } from "../actions/Button"
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDef<TData, TValue>[]
+  data: TData[]
+}
+
+export function DataTable<TData, TValue>({
+  columns,
+  data,
+}: DataTableProps<TData, TValue>) {
+  const [sorting, setSorting] = React.useState<SortingState>([])
+
+  const table = useReactTable({
+    data,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    state: {
+      sorting,
+    },
+  })
+
+  return (
+    <div className="space-y-4">
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  return (
+                    <TableHead key={header.id}>
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext()
+                          )}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows?.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext()
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      <div className="flex items-center justify-end space-x-2">
+        <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>
+      </div>
+    </div>
+  )
+}

package/src/components/data-display/DescriptionList.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export interface DescriptionListItem {
+    label: string | React.ReactNode;
+    value: string | React.ReactNode;
+}
+
+export interface DescriptionListProps {
+    items: DescriptionListItem[];
+    /**
+     * Layout direction
+     * @default 'row' (side-by-side labels/values in a grid)
+     */
+    direction?: 'row' | 'column';
+    className?: string;
+}
+
+export const DescriptionList: React.FC<DescriptionListProps> = ({
+    items,
+    direction = 'row',
+    className = ''
+}) => {
+    return (
+        <dl className={`
+            grid gap-x-4 gap-y-4
+            ${direction === 'row' ? 'grid-cols-2 sm:grid-cols-[auto_1fr]' : 'grid-cols-1'}
+            ${className}
+        `}>
+            {items.map((item, index) => (
+                <div key={index} className="contents">
+                    <dt className="text-sm font-medium text-[var(--color-text-secondary)]">
+                        {item.label}
+                    </dt>
+                    <dd className="text-sm text-[var(--color-text-primary)] font-medium">
+                        {item.value}
+                    </dd>
+                </div>
+            ))}
+        </dl>
+    );
+};

package/src/components/data-display/GitHubIcon.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+
+export interface GitHubIconProps {
+    /**
+     * Size of the icon in pixels
+     * @default 20
+     */
+    size?: number;
+    /**
+     * Additional className for customization
+     */
+    className?: string;
+}
+
+/**
+ * GitHub Icon Component
+ *
+ * Uses currentColor so it inherits the text color from its parent.
+ * Works automatically with light/dark modes through color inheritance.
+ */
+export const GitHubIcon = (
+    {
+        ref,
+        size = 20,
+        className = ''
+    }: GitHubIconProps & {
+        ref?: React.Ref<SVGSVGElement>;
+    }
+) => {
+    return (
+        <svg
+            ref={ref}
+            xmlns="http://www.w3.org/2000/svg"
+            width={size}
+            height={size}
+            fill="currentColor"
+            viewBox="0 0 16 16"
+            className={className}
+            aria-hidden="true"
+        >
+            <path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27s1.36.09 2 .27c1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8"/>
+        </svg>
+    );
+};

package/src/components/data-display/Heading.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Heading } from './Heading'
+
+describe('Heading', () => {
+  it('renders h1', () => {
+    render(<Heading level={1}>Page Title</Heading>)
+    expect(screen.getByRole('heading', { level: 1 })).toHaveTextContent('Page Title')
+  })
+
+  it('renders h2', () => {
+    render(<Heading level={2}>Section</Heading>)
+    expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent('Section')
+  })
+
+  it('renders h3', () => {
+    render(<Heading level={3}>Subsection</Heading>)
+    expect(screen.getByRole('heading', { level: 3 })).toHaveTextContent('Subsection')
+  })
+
+  it('renders all levels (4, 5, 6)', () => {
+    const { rerender } = render(<Heading level={4}>H4</Heading>)
+    expect(screen.getByRole('heading', { level: 4 })).toBeInTheDocument()
+
+    rerender(<Heading level={5}>H5</Heading>)
+    expect(screen.getByRole('heading', { level: 5 })).toBeInTheDocument()
+
+    rerender(<Heading level={6}>H6</Heading>)
+    expect(screen.getByRole('heading', { level: 6 })).toBeInTheDocument()
+  })
+
+  it('applies custom className', () => {
+    render(<Heading level={1} className="custom-heading">Title</Heading>)
+    expect(screen.getByRole('heading')).toHaveClass('custom-heading')
+  })
+})

package/src/components/data-display/Heading.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+export interface HeadingProps {
+  /**
+   * Heading content
+   */
+  children: React.ReactNode;
+
+  /**
+   * Heading level (affects both semantics and styling)
+   */
+  level: 1 | 2 | 3 | 4 | 5 | 6;
+
+  /**
+   * Additional className for customization
+   */
+  className?: string;
+}
+
+/**
+ * Heading Component
+ *
+ * Semantic heading with automatic token-based styling.
+ * No need to manually apply text colors, sizes, or weights.
+ *
+ * **What it handles automatically:**
+ * - Theme-aware text color (`--color-text-primary`)
+ * - Appropriate font size for each level
+ * - Font weight (bold for all levels)
+ * - Line height for readability
+ * - Dark mode support
+ *
+ * **Swiss Grid Typography:**
+ * - H1: 48px (3xl) on mobile, 60px (5xl) on desktop
+ * - H2: 36px (3xl) on mobile, 48px (4xl) on desktop
+ * - H3: 30px (3xl)
+ * - H4: 24px (2xl)
+ * - H5: 20px (xl)
+ * - H6: 18px (lg)
+ *
+ * Usage:
+ * ```tsx
+ * <Heading level={1}>Page Title</Heading>
+ * <Heading level={2}>Section Heading</Heading>
+ * <Heading level={3}>Subsection</Heading>
+ * ```
+ */
+export const Heading = (
+  {
+    ref,
+    children,
+    level,
+    className = ''
+  }: HeadingProps & {
+    ref?: React.Ref<HTMLHeadingElement>;
+  }
+) => {
+  const levelStyles = {
+    1: 'text-4xl lg:text-5xl',  // 36px → 48px
+    2: 'text-3xl lg:text-4xl',  // 30px → 36px
+    3: 'text-2xl lg:text-3xl',  // 24px → 30px
+    4: 'text-xl lg:text-2xl',   // 20px → 24px
+    5: 'text-lg lg:text-xl',    // 18px → 20px
+    6: 'text-base lg:text-lg',  // 16px → 18px
+  };
+
+  const baseStyles = `
+    font-bold
+    text-[var(--color-text-primary)]
+    ${levelStyles[level]}
+  `;
+
+  const Component = `h${level}` as 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+  return React.createElement(
+    Component,
+    {
+      ref,
+      className: `${baseStyles} ${className}`,
+    },
+    children
+  );
+};

package/src/components/data-display/StatCard.tsx

@@ -0,0 +1,195 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { cn } from "../../lib/utils"
+
+const statCardVariants = cva(
+  "rounded-2xl border bg-surface text-foreground shadow-xs p-6",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface border-border",
+        glass: "bg-glass border-glass-border backdrop-blur-md",
+        outline: "bg-transparent border-border",
+      },
+      size: {
+        sm: "p-4 rounded-xl",
+        default: "p-6 rounded-2xl",
+        lg: "p-8 rounded-2xl",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+const statCardValueVariants = cva("font-bold font-heading tracking-tight", {
+  variants: {
+    size: {
+      sm: "text-2xl",
+      default: "text-3xl",
+      lg: "text-4xl",
+    },
+  },
+  defaultVariants: {
+    size: "default",
+  },
+})
+
+const statCardChangeVariants = cva(
+  "inline-flex items-center gap-1 text-sm font-medium rounded-full px-2 py-0.5",
+  {
+    variants: {
+      trend: {
+        up: "text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/50",
+        down: "text-red-600 dark:text-red-400 bg-red-50 dark:bg-red-950/50",
+        flat: "text-foreground-secondary bg-muted",
+      },
+    },
+    defaultVariants: {
+      trend: "flat",
+    },
+  }
+)
+
+export interface StatCardProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof statCardVariants> {
+  /** The metric label (e.g. "Revenue", "Active Users") */
+  label: string
+  /** The metric value (e.g. "$1.2M", "12,345") */
+  value: string | number
+  /** Percentage change (e.g. 5.2 for +5.2%, -3.1 for -3.1%) */
+  change?: number
+  /** Direction of the trend */
+  trend?: "up" | "down" | "flat"
+  /** Optional icon displayed in the top-right */
+  icon?: React.ReactNode
+  /** Additional description text below the value */
+  description?: string
+}
+
+const TrendUpIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="22 7 13.5 15.5 8.5 10.5 2 17" />
+    <polyline points="16 7 22 7 22 13" />
+  </svg>
+)
+
+const TrendDownIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <polyline points="22 17 13.5 8.5 8.5 13.5 2 7" />
+    <polyline points="16 17 22 17 22 11" />
+  </svg>
+)
+
+const MinusIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="14"
+    height="14"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <line x1="5" y1="12" x2="19" y2="12" />
+  </svg>
+)
+
+function StatCard({
+  className,
+  variant,
+  size,
+  label,
+  value,
+  change,
+  trend,
+  icon,
+  description,
+  ...props
+}: StatCardProps) {
+  const resolvedTrend = trend ?? (change !== undefined ? (change > 0 ? "up" : change < 0 ? "down" : "flat") : undefined)
+
+  return (
+    <div
+      data-slot="stat-card"
+      role="article"
+      className={cn(statCardVariants({ variant, size }), className)}
+      {...props}
+    >
+      <dl className="space-y-1">
+        <div className="flex items-center justify-between">
+          <dt className="text-sm font-medium text-foreground-secondary">{label}</dt>
+          {icon && (
+            <div className="text-foreground-secondary" aria-hidden="true">
+              {icon}
+            </div>
+          )}
+        </div>
+        <dd className={cn(statCardValueVariants({ size }))}>
+          {value}
+        </dd>
+        {(change !== undefined || description) && (
+          <dd className="flex items-center gap-2 pt-1">
+            {change !== undefined && resolvedTrend && (
+              <span className={cn(statCardChangeVariants({ trend: resolvedTrend }))}>
+                {resolvedTrend === "up" && <TrendUpIcon />}
+                {resolvedTrend === "down" && <TrendDownIcon />}
+                {resolvedTrend === "flat" && <MinusIcon />}
+                <span>
+                  {change > 0 ? "+" : ""}
+                  {change}%
+                </span>
+              </span>
+            )}
+            {description && (
+              <span className="text-sm text-foreground-secondary">{description}</span>
+            )}
+          </dd>
+        )}
+      </dl>
+    </div>
+  )
+}
+
+function StatCardGroup({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="stat-card-group"
+      className={cn("grid gap-4 sm:grid-cols-2 lg:grid-cols-4", className)}
+      {...props}
+    />
+  )
+}
+
+export { StatCard, statCardVariants, StatCardGroup }

package/src/components/data-display/Table.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+
+import { cn } from "../../lib/utils"
+
+const Table = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableElement> & {
+    ref?: React.Ref<HTMLTableElement>;
+  }
+) => (<div className="relative w-full overflow-auto">
+  <table
+    ref={ref}
+    className={cn("w-full caption-bottom text-sm", className)}
+    {...props}
+  />
+</div>)
+
+const TableHeader = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref?: React.Ref<HTMLTableSectionElement>;
+  }
+) => (<thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />)
+
+const TableBody = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref?: React.Ref<HTMLTableSectionElement>;
+  }
+) => (<tbody
+  ref={ref}
+  className={cn("[&_tr:last-child]:border-0", className)}
+  {...props}
+/>)
+
+const TableFooter = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableSectionElement> & {
+    ref?: React.Ref<HTMLTableSectionElement>;
+  }
+) => (<tfoot
+  ref={ref}
+  className={cn(
+    "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+    className
+  )}
+  {...props}
+/>)
+
+const TableRow = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableRowElement> & {
+    ref?: React.Ref<HTMLTableRowElement>;
+  }
+) => (<tr
+  ref={ref}
+  className={cn(
+    "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+    className
+  )}
+  {...props}
+/>)
+
+const TableHead = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.ThHTMLAttributes<HTMLTableCellElement> & {
+    ref?: React.Ref<HTMLTableCellElement>;
+  }
+) => (<th
+  ref={ref}
+  className={cn(
+    "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+    className
+  )}
+  {...props}
+/>)
+
+const TableCell = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.TdHTMLAttributes<HTMLTableCellElement> & {
+    ref?: React.Ref<HTMLTableCellElement>;
+  }
+) => (<td
+  ref={ref}
+  className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+  {...props}
+/>)
+
+const TableCaption = (
+  {
+    ref,
+    className,
+    ...props
+  }: React.HTMLAttributes<HTMLTableCaptionElement> & {
+    ref?: React.Ref<HTMLTableCaptionElement>;
+  }
+) => (<caption
+  ref={ref}
+  className={cn("mt-4 text-sm text-muted-foreground", className)}
+  {...props}
+/>)
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

package/src/components/data-display/Text.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Text } from './Text'
+
+describe('Text', () => {
+  it('renders as paragraph by default', () => {
+    render(<Text>Hello world</Text>)
+    const el = screen.getByText('Hello world')
+    expect(el).toBeInTheDocument()
+    expect(el.tagName).toBe('P')
+  })
+
+  it('renders as span', () => {
+    render(<Text as="span">Inline</Text>)
+    expect(screen.getByText('Inline').tagName).toBe('SPAN')
+  })
+
+  it('renders as div', () => {
+    render(<Text as="div">Block</Text>)
+    expect(screen.getByText('Block').tagName).toBe('DIV')
+  })
+
+  it('applies variant styles', () => {
+    const { rerender } = render(<Text variant="primary">Primary</Text>)
+    expect(screen.getByText('Primary')).toHaveClass('text-[var(--color-text-primary)]')
+
+    rerender(<Text variant="secondary">Secondary</Text>)
+    expect(screen.getByText('Secondary')).toHaveClass('text-[var(--color-text-secondary)]')
+
+    rerender(<Text variant="muted">Muted</Text>)
+    expect(screen.getByText('Muted')).toHaveClass('text-[var(--color-text-muted)]')
+  })
+
+  it('applies size styles', () => {
+    render(<Text size="lg">Large</Text>)
+    expect(screen.getByText('Large')).toHaveClass('text-lg')
+  })
+
+  it('applies weight styles', () => {
+    render(<Text weight="bold">Bold</Text>)
+    expect(screen.getByText('Bold')).toHaveClass('font-bold')
+  })
+
+  it('applies custom className', () => {
+    render(<Text className="custom-text">Styled</Text>)
+    expect(screen.getByText('Styled')).toHaveClass('custom-text')
+  })
+})