@galyan/ui 0.0.1 → 0.0.2

package/src/stepper/stepper.css

@@ -1,141 +0,0 @@
-/* ── 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

@@ -1,71 +0,0 @@
-'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

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

package/src/tab/tab.css

@@ -1,92 +0,0 @@
-/* ── 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

@@ -1,205 +0,0 @@
-'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

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

package/src/table/table.css

@@ -1,119 +0,0 @@
-/* ── 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;
-}