@galyan/ui 0.0.1

package/src/stepper/stepper.css

@@ -0,0 +1,141 @@
+/* ── Stepper ──────────────────────────────────────────────────────────────── */
+.gy-stepper {
+  display: flex;
+  align-items: flex-start;
+  width: 100%;
+}
+
+.gy-stepper--vertical {
+  flex-direction: column;
+}
+
+.gy-stepper-step {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  position: relative;
+}
+
+.gy-stepper--vertical .gy-stepper-step {
+  flex-direction: column;
+  align-items: flex-start;
+  flex: none;
+  width: 100%;
+}
+
+/* Connector line */
+.gy-stepper-connector {
+  flex: 1;
+  height: 2px;
+  background: var(--gy-border);
+  margin: 0 var(--gy-spacing-2);
+  transition: background-color var(--gy-duration-slow);
+}
+
+.gy-stepper-connector--completed { background: var(--gy-primary); }
+
+.gy-stepper--vertical .gy-stepper-connector {
+  width: 2px;
+  height: 2.5rem;
+  flex: none;
+  margin: var(--gy-spacing-1) 0;
+  margin-left: 19px;
+}
+
+/* Step indicator */
+.gy-stepper-indicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 50%;
+  border: 2px solid var(--gy-border-strong);
+  background: var(--gy-surface);
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text-muted);
+  flex-shrink: 0;
+  transition:
+    background-color var(--gy-duration-normal),
+    border-color var(--gy-duration-normal),
+    color var(--gy-duration-normal);
+  cursor: default;
+  position: relative;
+  z-index: 1;
+}
+
+.gy-stepper-indicator--active {
+  border-color: var(--gy-primary);
+  color: var(--gy-primary);
+  background: var(--gy-primary-subtle);
+  box-shadow: 0 0 0 4px var(--gy-focus-ring);
+}
+
+.gy-stepper-indicator--completed {
+  border-color: var(--gy-primary);
+  background: var(--gy-primary);
+  color: var(--gy-primary-fg);
+}
+
+.gy-stepper-indicator--error {
+  border-color: var(--gy-danger);
+  background: var(--gy-danger);
+  color: white;
+}
+
+.gy-stepper-indicator--clickable {
+  cursor: pointer;
+}
+
+.gy-stepper-indicator--clickable:hover {
+  border-color: var(--gy-primary);
+  color: var(--gy-primary);
+}
+
+/* Step content */
+.gy-stepper-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.gy-stepper--vertical .gy-stepper-item {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--gy-spacing-3);
+  text-align: left;
+}
+
+.gy-stepper-label {
+  font-size: var(--gy-font-size-xs);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text-muted);
+  margin-top: var(--gy-spacing-2);
+  white-space: nowrap;
+}
+
+.gy-stepper--vertical .gy-stepper-label { margin-top: 0; }
+
+.gy-stepper-label--active { color: var(--gy-primary); }
+.gy-stepper-label--completed { color: var(--gy-text); }
+
+.gy-stepper-description {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+  margin-top: 2px;
+}
+
+/* Panel */
+.gy-stepper-panel {
+  margin-top: var(--gy-spacing-6);
+  animation: gy-fade-in var(--gy-duration-normal) var(--gy-ease-out);
+}
+
+.gy-stepper-actions {
+  display: flex;
+  gap: var(--gy-spacing-3);
+  margin-top: var(--gy-spacing-4);
+  flex-wrap: wrap;
+}

package/src/tab/Tabs.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import React, { useState } from 'react';
+import './tab.css';
+
+export interface TabItem {
+  id: string;
+  label: React.ReactNode;
+  content: React.ReactNode;
+  disabled?: boolean;
+  badge?: string | number;
+  icon?: React.ReactNode;
+}
+
+export interface TabsProps {
+  items: TabItem[];
+  defaultTab?: string;
+  activeTab?: string;
+  onChange?: (id: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  className?: string;
+}
+
+export function Tabs({ items, defaultTab, activeTab, onChange, orientation = 'horizontal', className = '' }: TabsProps) {
+  const [internalActive, setInternalActive] = useState<string>(defaultTab ?? items[0]?.id ?? '');
+  const current = activeTab ?? internalActive;
+
+  const handleSelect = (id: string) => {
+    setInternalActive(id);
+    onChange?.(id);
+  };
+
+  const activeItem = items.find((i) => i.id === current);
+
+  return (
+    <div className={`gy-tabs ${orientation === 'vertical' ? 'gy-tabs--vertical' : ''} ${className}`}>
+      <div className="gy-tabs-list" role="tablist" aria-orientation={orientation}>
+        {items.map((item) => (
+          <button
+            key={item.id}
+            role="tab"
+            id={`gy-tab-${item.id}`}
+            aria-controls={`gy-panel-${item.id}`}
+            aria-selected={current === item.id}
+            disabled={item.disabled}
+            className={`gy-tabs-trigger ${current === item.id ? 'gy-tabs-trigger--active' : ''}`}
+            onClick={() => !item.disabled && handleSelect(item.id)}
+          >
+            {item.icon && <span aria-hidden="true">{item.icon}</span>}
+            {item.label}
+            {item.badge !== undefined && (
+              <span className="gy-tabs-trigger-badge">{item.badge}</span>
+            )}
+          </button>
+        ))}
+      </div>
+
+      {activeItem && (
+        <div
+          key={current}
+          id={`gy-panel-${current}`}
+          role="tabpanel"
+          aria-labelledby={`gy-tab-${current}`}
+          className="gy-tabs-panel"
+        >
+          {activeItem.content}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/tab/index.ts

@@ -0,0 +1,2 @@
+export { Tabs } from './Tabs';
+export type { TabsProps, TabItem } from './Tabs';

package/src/tab/tab.css

@@ -0,0 +1,92 @@
+/* ── Tabs ─────────────────────────────────────────────────────────────────── */
+.gy-tabs {
+  display: flex;
+  flex-direction: column;
+}
+
+.gy-tabs--vertical {
+  flex-direction: row;
+  gap: var(--gy-spacing-4);
+}
+
+.gy-tabs-list {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-bottom: 2px solid var(--gy-border);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.gy-tabs-list::-webkit-scrollbar { display: none; }
+
+.gy-tabs--vertical .gy-tabs-list {
+  flex-direction: column;
+  border-bottom: none;
+  border-right: 2px solid var(--gy-border);
+  min-width: 160px;
+  align-items: stretch;
+}
+
+.gy-tabs-trigger {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gy-spacing-2);
+  padding: var(--gy-spacing-2-5) var(--gy-spacing-4);
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text-muted);
+  white-space: nowrap;
+  cursor: pointer;
+  background: none;
+  border: none;
+  position: relative;
+  transition: color var(--gy-duration-fast);
+  border-bottom: 2px solid transparent;
+  margin-bottom: -2px;
+}
+
+.gy-tabs--vertical .gy-tabs-trigger {
+  border-bottom: none;
+  border-right: 2px solid transparent;
+  margin-bottom: 0;
+  margin-right: -2px;
+  border-radius: var(--gy-radius-md) 0 0 var(--gy-radius-md);
+}
+
+.gy-tabs-trigger:hover { color: var(--gy-text); }
+.gy-tabs-trigger:focus-visible { outline: none; color: var(--gy-primary); }
+
+.gy-tabs-trigger--active {
+  color: var(--gy-primary) !important;
+  border-color: var(--gy-primary);
+}
+
+.gy-tabs-trigger:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.gy-tabs-trigger-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 18px;
+  height: 18px;
+  padding: 0 5px;
+  font-size: 0.65rem;
+  font-weight: var(--gy-font-weight-semibold);
+  background: var(--gy-primary-muted);
+  color: var(--gy-primary-hover);
+  border-radius: var(--gy-radius-full);
+}
+
+.gy-tabs-panel {
+  padding: var(--gy-spacing-4) 0;
+  animation: gy-fade-in var(--gy-duration-normal) var(--gy-ease-out);
+}
+
+.gy-tabs--vertical .gy-tabs-panel {
+  flex: 1;
+  padding: 0 var(--gy-spacing-4);
+}

package/src/table/Table.tsx

@@ -0,0 +1,205 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { Checkbox } from '../checkbox/Checkbox';
+import './table.css';
+
+export type SortDirection = 'asc' | 'desc';
+
+export interface Column<T> {
+  key: string;
+  header: React.ReactNode;
+  accessor: (row: T) => React.ReactNode;
+  sortable?: boolean;
+  width?: string;
+  align?: 'left' | 'center' | 'right';
+}
+
+export interface TableProps<T> {
+  columns: Column<T>[];
+  data: T[];
+  rowKey: (row: T) => string;
+  selectable?: boolean;
+  selectedRows?: string[];
+  onSelectionChange?: (keys: string[]) => void;
+  pageSize?: number;
+  emptyMessage?: React.ReactNode;
+  className?: string;
+  stickyHeader?: boolean;
+}
+
+function SortIcon({ dir }: { dir?: SortDirection }) {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" className={`gy-table-sort-icon ${dir ? 'gy-table-sort-icon--active' : ''}`}>
+      {dir === 'asc' ? (
+        <path d="M6 2L10 8H2L6 2z" />
+      ) : dir === 'desc' ? (
+        <path d="M6 10L2 4H10L6 10z" />
+      ) : (
+        <>
+          <path d="M6 1L9 5H3L6 1z" opacity=".5" />
+          <path d="M6 11L3 7H9L6 11z" opacity=".5" />
+        </>
+      )}
+    </svg>
+  );
+}
+
+export function Table<T>({
+  columns,
+  data,
+  rowKey,
+  selectable = false,
+  selectedRows = [],
+  onSelectionChange,
+  pageSize = 10,
+  emptyMessage = 'No data available',
+  className = '',
+  stickyHeader = false,
+}: TableProps<T>) {
+  const [sortKey, setSortKey] = useState<string | null>(null);
+  const [sortDir, setSortDir] = useState<SortDirection>('asc');
+  const [page, setPage] = useState(1);
+
+  const sortedData = useMemo(() => {
+    if (!sortKey) return data;
+    const col = columns.find((c) => c.key === sortKey);
+    if (!col) return data;
+    return [...data].sort((a, b) => {
+      const av = String(col.accessor(a) ?? '');
+      const bv = String(col.accessor(b) ?? '');
+      const cmp = av.localeCompare(bv, undefined, { numeric: true });
+      return sortDir === 'asc' ? cmp : -cmp;
+    });
+  }, [data, sortKey, sortDir, columns]);
+
+  const totalPages = Math.max(1, Math.ceil(sortedData.length / pageSize));
+  const paged = sortedData.slice((page - 1) * pageSize, page * pageSize);
+
+  const allSelected = paged.length > 0 && paged.every((r) => selectedRows.includes(rowKey(r)));
+  const someSelected = paged.some((r) => selectedRows.includes(rowKey(r)));
+
+  const toggleSort = (key: string) => {
+    if (sortKey === key) {
+      setSortDir((d) => (d === 'asc' ? 'desc' : 'asc'));
+    } else {
+      setSortKey(key);
+      setSortDir('asc');
+    }
+    setPage(1);
+  };
+
+  const toggleRow = (key: string) => {
+    const next = selectedRows.includes(key)
+      ? selectedRows.filter((k) => k !== key)
+      : [...selectedRows, key];
+    onSelectionChange?.(next);
+  };
+
+  const toggleAll = () => {
+    const pageKeys = paged.map(rowKey);
+    if (allSelected) {
+      onSelectionChange?.(selectedRows.filter((k) => !pageKeys.includes(k)));
+    } else {
+      const combined = [...new Set([...selectedRows, ...pageKeys])];
+      onSelectionChange?.(combined);
+    }
+  };
+
+  const pageNums = Array.from({ length: totalPages }, (_, i) => i + 1);
+  const visiblePages = pageNums.filter(
+    (p) => p === 1 || p === totalPages || Math.abs(p - page) <= 1
+  );
+
+  return (
+    <div className={`gy-table-wrapper ${className}`}>
+      <table className="gy-table" aria-label="Data table">
+        <thead className="gy-table-header">
+          <tr>
+            {selectable && (
+              <th className="gy-table-th gy-table-th--checkbox">
+                <Checkbox
+                  checked={allSelected}
+                  indeterminate={!allSelected && someSelected}
+                  onChange={toggleAll}
+                  size="sm"
+                />
+              </th>
+            )}
+            {columns.map((col) => (
+              <th
+                key={col.key}
+                className={`gy-table-th ${col.sortable ? 'gy-table-th--sortable' : ''}`}
+                style={{ width: col.width, textAlign: col.align }}
+                onClick={col.sortable ? () => toggleSort(col.key) : undefined}
+                aria-sort={sortKey === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined}
+              >
+                <span className="gy-table-th-inner">
+                  {col.header}
+                  {col.sortable && <SortIcon dir={sortKey === col.key ? sortDir : undefined} />}
+                </span>
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {paged.length === 0 ? (
+            <tr>
+              <td colSpan={columns.length + (selectable ? 1 : 0)} className="gy-table-empty">
+                {emptyMessage}
+              </td>
+            </tr>
+          ) : (
+            paged.map((row) => {
+              const key = rowKey(row);
+              const isSelected = selectedRows.includes(key);
+              return (
+                <tr
+                  key={key}
+                  className={`gy-table-tr ${isSelected ? 'gy-table-tr--selected' : ''}`}
+                  aria-selected={selectable ? isSelected : undefined}
+                >
+                  {selectable && (
+                    <td className="gy-table-td gy-table-td--checkbox">
+                      <Checkbox checked={isSelected} onChange={() => toggleRow(key)} size="sm" />
+                    </td>
+                  )}
+                  {columns.map((col) => (
+                    <td key={col.key} className="gy-table-td" style={{ textAlign: col.align }}>
+                      {col.accessor(row)}
+                    </td>
+                  ))}
+                </tr>
+              );
+            })
+          )}
+        </tbody>
+      </table>
+
+      {totalPages > 1 && (
+        <div className="gy-table-pagination">
+          <span className="gy-table-pagination-info">
+            Showing {(page - 1) * pageSize + 1}–{Math.min(page * pageSize, sortedData.length)} of {sortedData.length}
+          </span>
+          <div className="gy-table-pagination-controls">
+            <button className="gy-table-pagination-btn" onClick={() => setPage((p) => p - 1)} disabled={page === 1} aria-label="Previous page">‹</button>
+            {visiblePages.map((p, i, arr) => (
+              <React.Fragment key={p}>
+                {i > 0 && arr[i - 1] !== p - 1 && <span style={{ padding: '0 4px', color: 'var(--gy-text-subtle)' }}>…</span>}
+                <button
+                  className={`gy-table-pagination-btn ${page === p ? 'gy-table-pagination-btn--active' : ''}`}
+                  onClick={() => setPage(p)}
+                  aria-label={`Page ${p}`}
+                  aria-current={page === p ? 'page' : undefined}
+                >
+                  {p}
+                </button>
+              </React.Fragment>
+            ))}
+            <button className="gy-table-pagination-btn" onClick={() => setPage((p) => p + 1)} disabled={page === totalPages} aria-label="Next page">›</button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/table/index.ts

@@ -0,0 +1,2 @@
+export { Table } from './Table';
+export type { TableProps, Column, SortDirection } from './Table';

package/src/table/table.css

@@ -0,0 +1,119 @@
+/* ── Table ───────────────────────────────────────────────────────────────── */
+.gy-table-wrapper {
+  width: 100%;
+  overflow-x: auto;
+  border-radius: var(--gy-radius-xl);
+  border: 1px solid var(--gy-border);
+}
+
+.gy-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--gy-font-size-sm);
+}
+
+.gy-table-header { background: var(--gy-background-subtle); }
+
+.gy-table-th {
+  padding: var(--gy-spacing-3) var(--gy-spacing-4);
+  text-align: left;
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text-muted);
+  white-space: nowrap;
+  letter-spacing: var(--gy-letter-spacing-wide);
+  font-size: var(--gy-font-size-xs);
+  text-transform: uppercase;
+  border-bottom: 1px solid var(--gy-border);
+  user-select: none;
+  position: relative;
+}
+
+.gy-table-th--sortable { cursor: pointer; }
+.gy-table-th--sortable:hover { color: var(--gy-text); background: var(--gy-background-muted); }
+
+.gy-table-th-inner {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gy-spacing-1-5);
+}
+
+.gy-table-sort-icon { color: var(--gy-text-subtle); }
+.gy-table-sort-icon--active { color: var(--gy-primary); }
+
+.gy-table-td {
+  padding: var(--gy-spacing-3) var(--gy-spacing-4);
+  color: var(--gy-text);
+  border-bottom: 1px solid var(--gy-border);
+  vertical-align: middle;
+}
+
+.gy-table-tr:last-child .gy-table-td { border-bottom: none; }
+
+.gy-table-tr { transition: background-color var(--gy-duration-fast); }
+.gy-table-tr:hover { background: var(--gy-background-subtle); }
+.gy-table-tr--selected { background: var(--gy-primary-subtle); }
+
+/* Selection checkbox column */
+.gy-table-th--checkbox,
+.gy-table-td--checkbox {
+  width: 40px;
+  padding-right: var(--gy-spacing-2);
+}
+
+/* Empty state */
+.gy-table-empty {
+  text-align: center;
+  padding: var(--gy-spacing-12) var(--gy-spacing-4);
+  color: var(--gy-text-subtle);
+}
+
+/* Pagination */
+.gy-table-pagination {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gy-spacing-3) var(--gy-spacing-4);
+  border-top: 1px solid var(--gy-border);
+  background: var(--gy-background-subtle);
+  font-size: var(--gy-font-size-sm);
+}
+
+.gy-table-pagination-info { color: var(--gy-text-muted); }
+
+.gy-table-pagination-controls {
+  display: flex;
+  align-items: center;
+  gap: var(--gy-spacing-1);
+}
+
+.gy-table-pagination-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--gy-radius-md);
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text-muted);
+  border: 1px solid transparent;
+  cursor: pointer;
+  background: none;
+  transition: background var(--gy-duration-fast), color var(--gy-duration-fast);
+}
+
+.gy-table-pagination-btn:hover:not(:disabled) {
+  background: var(--gy-background-muted);
+  color: var(--gy-text);
+}
+
+.gy-table-pagination-btn--active {
+  background: var(--gy-primary);
+  color: var(--gy-primary-fg);
+  border-color: var(--gy-primary);
+}
+
+.gy-table-pagination-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}