@galyan/ui 0.0.1 → 0.0.2

package/src/chips/Chips.tsx

@@ -1,146 +0,0 @@
-'use client';
-
-import React, { useRef, useState } from 'react';
-import './chips.css';
-
-export type ChipVariant = 'solid' | 'soft' | 'outline' | 'success' | 'warning' | 'danger' | 'neutral';
-export type ChipSize = 'sm' | 'md' | 'lg';
-
-export interface ChipProps {
-  children: React.ReactNode;
-  variant?: ChipVariant;
-  size?: ChipSize;
-  removable?: boolean;
-  onRemove?: () => void;
-  clickable?: boolean;
-  selected?: boolean;
-  onClick?: () => void;
-  icon?: React.ReactNode;
-  className?: string;
-}
-
-export function Chip({
-  children,
-  variant = 'soft',
-  size = 'md',
-  removable = false,
-  onRemove,
-  clickable = false,
-  selected = false,
-  onClick,
-  icon,
-  className = '',
-}: ChipProps) {
-  return (
-    <span
-      className={[
-        'gy-chip',
-        `gy-chip--${variant}`,
-        `gy-chip--${size}`,
-        clickable ? 'gy-chip--clickable' : '',
-        selected ? 'gy-chip--selected' : '',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      role={clickable ? 'button' : undefined}
-      tabIndex={clickable ? 0 : undefined}
-      onClick={clickable ? onClick : undefined}
-      onKeyDown={clickable ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick?.(); } : undefined}
-    >
-      {icon && <span aria-hidden="true">{icon}</span>}
-      {children}
-      {removable && (
-        <button
-          type="button"
-          className="gy-chip__remove"
-          onClick={(e) => { e.stopPropagation(); onRemove?.(); }}
-          aria-label="Remove"
-        >
-          <svg width="8" height="8" viewBox="0 0 8 8" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
-            <line x1="1" y1="1" x2="7" y2="7" />
-            <line x1="7" y1="1" x2="1" y2="7" />
-          </svg>
-        </button>
-      )}
-    </span>
-  );
-}
-
-// ── ChipsInput ────────────────────────────────────────────────────────────────
-export interface ChipsInputProps {
-  values: string[];
-  onChange: (values: string[]) => void;
-  placeholder?: string;
-  disabled?: boolean;
-  maxItems?: number;
-  chipVariant?: ChipVariant;
-  className?: string;
-}
-
-export function ChipsInput({
-  values,
-  onChange,
-  placeholder = 'Add a tag...',
-  disabled = false,
-  maxItems,
-  chipVariant = 'soft',
-  className = '',
-}: ChipsInputProps) {
-  const [input, setInput] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const addChip = (val: string) => {
-    const trimmed = val.trim();
-    if (!trimmed || values.includes(trimmed)) return;
-    if (maxItems && values.length >= maxItems) return;
-    onChange([...values, trimmed]);
-    setInput('');
-  };
-
-  const removeChip = (idx: number) => {
-    onChange(values.filter((_, i) => i !== idx));
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter' || e.key === ',') {
-      e.preventDefault();
-      addChip(input);
-    }
-    if (e.key === 'Backspace' && !input && values.length > 0) {
-      removeChip(values.length - 1);
-    }
-  };
-
-  return (
-    <div
-      className={`gy-chips-input ${className}`}
-      onClick={() => inputRef.current?.focus()}
-    >
-      {values.map((val, i) => (
-        <Chip
-          key={i}
-          variant={chipVariant}
-          size="sm"
-          removable={!disabled}
-          onRemove={() => removeChip(i)}
-        >
-          {val}
-        </Chip>
-      ))}
-      {(!maxItems || values.length < maxItems) && (
-        <input
-          ref={inputRef}
-          className="gy-chips-input__field"
-          value={input}
-          onChange={(e) => setInput(e.target.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={() => addChip(input)}
-          placeholder={values.length === 0 ? placeholder : ''}
-          disabled={disabled}
-          aria-label={placeholder}
-        />
-      )}
-    </div>
-  );
-}

package/src/chips/chips.css

@@ -1,90 +0,0 @@
-/* ── Chips ────────────────────────────────────────────────────────────────── */
-.gy-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--gy-spacing-1-5);
-  padding: var(--gy-spacing-1) var(--gy-spacing-2-5);
-  font-size: var(--gy-font-size-xs);
-  font-weight: var(--gy-font-weight-medium);
-  border-radius: var(--gy-radius-full);
-  border: 1.5px solid transparent;
-  cursor: default;
-  transition:
-    background-color var(--gy-duration-fast),
-    border-color var(--gy-duration-fast);
-  white-space: nowrap;
-  user-select: none;
-}
-
-.gy-chip--sm  { font-size: 0.65rem; padding: 2px var(--gy-spacing-2); }
-.gy-chip--md  { font-size: var(--gy-font-size-xs); padding: var(--gy-spacing-1) var(--gy-spacing-2-5); }
-.gy-chip--lg  { font-size: var(--gy-font-size-sm); padding: var(--gy-spacing-1-5) var(--gy-spacing-3); }
-
-/* Variants */
-.gy-chip--solid   { background: var(--gy-primary); color: var(--gy-primary-fg); }
-.gy-chip--soft    { background: var(--gy-primary-subtle); color: var(--gy-primary-hover); border-color: var(--gy-primary-muted); }
-.gy-chip--outline { background: transparent; color: var(--gy-primary); border-color: var(--gy-primary-muted); }
-
-/* Status */
-.gy-chip--success  { background: var(--gy-success-subtle); color: var(--gy-success-emphasis); border-color: var(--gy-success-muted); }
-.gy-chip--warning  { background: var(--gy-warning-subtle); color: var(--gy-warning-emphasis); border-color: var(--gy-warning-muted); }
-.gy-chip--danger   { background: var(--gy-danger-subtle);  color: var(--gy-danger);           border-color: var(--gy-danger-muted); }
-.gy-chip--neutral  { background: var(--gy-background-muted); color: var(--gy-text-muted);     border-color: var(--gy-border); }
-
-.gy-chip--clickable { cursor: pointer; }
-.gy-chip--clickable:hover { filter: brightness(0.95); }
-.gy-chip--clickable:focus-visible { outline: 2px solid var(--gy-focus-outline); outline-offset: 2px; }
-
-.gy-chip--selected.gy-chip--soft { background: var(--gy-primary-muted); }
-
-.gy-chip__remove {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity var(--gy-duration-fast), background var(--gy-duration-fast);
-  flex-shrink: 0;
-  color: inherit;
-  background: none;
-  border: none;
-  padding: 0;
-}
-
-.gy-chip__remove:hover { opacity: 1; background: rgba(0,0,0,0.1); }
-
-/* ── Chips Input (multi-select) ─────────────────────────────────────────── */
-.gy-chips-input {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--gy-spacing-1-5);
-  padding: var(--gy-spacing-2) var(--gy-spacing-3);
-  background: var(--gy-surface);
-  border: 1.5px solid var(--gy-border);
-  border-radius: var(--gy-radius-lg);
-  min-height: 2.5rem;
-  cursor: text;
-  transition: border-color var(--gy-duration-fast), box-shadow var(--gy-duration-fast);
-}
-
-.gy-chips-input:focus-within {
-  border-color: var(--gy-border-focus);
-  box-shadow: 0 0 0 3px var(--gy-focus-ring);
-}
-
-.gy-chips-input__field {
-  flex: 1;
-  min-width: 80px;
-  border: none;
-  outline: none;
-  background: transparent;
-  font-size: var(--gy-font-size-sm);
-  color: var(--gy-text);
-  font-family: var(--gy-font-sans);
-  padding: 2px 0;
-}
-
-.gy-chips-input__field::placeholder { color: var(--gy-text-subtle); }

package/src/chips/index.ts

@@ -1,2 +0,0 @@
-export { Chip, ChipsInput } from './Chips';
-export type { ChipProps, ChipsInputProps, ChipVariant, ChipSize } from './Chips';

package/src/code.tsx

@@ -1,11 +0,0 @@
-import { type JSX } from "react";
-
-export function Code({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}): JSX.Element {
-  return <code className={className}>{children}</code>;
-}

package/src/datepicker/DatePicker.tsx

@@ -1,104 +0,0 @@
-'use client';
-
-import React, { useEffect, useRef, useState, useId } from 'react';
-import { Calendar, CalendarProps } from '../calendar/Calendar';
-import { Input } from '../input/Input';
-import './datepicker.css';
-
-export interface DatePickerProps extends Omit<CalendarProps, 'className'> {
-  label?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  error?: string;
-  helperText?: string;
-  className?: string;
-}
-
-const formatDate = (date: Date) => {
-  return date.toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'short',
-    day: 'numeric',
-  });
-};
-
-export function DatePicker({
-  mode = 'single',
-  value,
-  onChange,
-  minDate,
-  maxDate,
-  label,
-  placeholder = 'Select date',
-  disabled,
-  error,
-  helperText,
-  className = '',
-}: DatePickerProps) {
-  const uid = useId();
-  const [open, setOpen] = useState(false);
-  const rootRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const handler = (e: MouseEvent) => {
-      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
-    };
-    document.addEventListener('mousedown', handler);
-    return () => document.removeEventListener('mousedown', handler);
-  }, []);
-
-  let displayValue = '';
-  if (Array.isArray(value)) {
-    if (value[0] && value[1]) displayValue = `${formatDate(value[0])} - ${formatDate(value[1])}`;
-    else if (value[0]) displayValue = formatDate(value[0]);
-  } else if (value) {
-    displayValue = formatDate(value as Date);
-  }
-
-  const handleChange = (val: Date | [Date, Date]) => {
-    onChange?.(val);
-    if (mode === 'single' || (Array.isArray(val) && val[0] && val[1])) {
-      setOpen(false);
-    }
-  };
-
-  return (
-    <div ref={rootRef} className={`gy-datepicker ${className}`}>
-      <div onClick={() => !disabled && setOpen((o) => !o)} style={{ cursor: disabled ? 'not-allowed' : 'pointer' }}>
-        <Input
-          id={`gy-datepicker-${uid}`}
-          label={label}
-          placeholder={placeholder}
-          value={displayValue}
-          readOnly
-          disabled={disabled}
-          error={error}
-          helperText={helperText}
-          style={{ cursor: disabled ? 'not-allowed' : 'pointer', pointerEvents: 'none' }}
-          rightIcon={
-            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <rect x="3" y="4" width="18" height="18" rx="2" ry="2" />
-              <line x1="16" y1="2" x2="16" y2="6" />
-              <line x1="8" y1="2" x2="8" y2="6" />
-              <line x1="3" y1="10" x2="21" y2="10" />
-            </svg>
-          }
-        />
-      </div>
-
-      {open && !disabled && (
-        <div className="gy-datepicker-popover">
-          <Calendar
-            mode={mode}
-            value={value}
-            onChange={handleChange}
-            minDate={minDate}
-            maxDate={maxDate}
-            className="gy-calendar--popover"
-            style={{ border: 'none', borderRadius: 0 }}
-          />
-        </div>
-      )}
-    </div>
-  );
-}

package/src/datepicker/datepicker.css

@@ -1,22 +0,0 @@
-/* ── DatePicker ──────────────────────────────────────────────────────────── */
-.gy-datepicker {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: var(--gy-spacing-1-5);
-  width: 100%;
-}
-
-.gy-datepicker-popover {
-  position: absolute;
-  top: calc(100% + 4px);
-  left: 0;
-  z-index: var(--gy-z-dropdown);
-  background: var(--gy-surface);
-  border: 1px solid var(--gy-border);
-  border-radius: var(--gy-radius-xl);
-  box-shadow: var(--gy-shadow-dropdown);
-  padding: 0;
-  overflow: hidden;
-  animation: gy-slide-in-up var(--gy-duration-fast) var(--gy-ease-out);
-}

package/src/datepicker/index.ts

@@ -1,2 +0,0 @@
-export { DatePicker } from './DatePicker';
-export type { DatePickerProps } from './DatePicker';

package/src/dragdrop/DragDrop.tsx

@@ -1,168 +0,0 @@
-'use client';
-
-import React, { useState, useRef } from 'react';
-import './dragdrop.css';
-
-// ── Reorderable List ────────────────────────────────────────────────────────
-export interface ReorderListProps<T> {
-  items: T[];
-  onReorder: (newItems: T[]) => void;
-  keyExtractor: (item: T) => string;
-  renderItem: (item: T, isDragging: boolean) => React.ReactNode;
-  className?: string;
-}
-
-export function ReorderList<T>({ items, onReorder, keyExtractor, renderItem, className = '' }: ReorderListProps<T>) {
-  const [draggedIdx, setDraggedIdx] = useState<number | null>(null);
-  const [dragOverIdx, setDragOverIdx] = useState<number | null>(null);
-
-  const handleDragStart = (idx: number, e: React.DragEvent) => {
-    setDraggedIdx(idx);
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('text/plain', idx.toString());
-  };
-
-  const handleDragOver = (idx: number, e: React.DragEvent) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    if (idx !== dragOverIdx) setDragOverIdx(idx);
-  };
-
-  const handleDrop = (idx: number, e: React.DragEvent) => {
-    e.preventDefault();
-    const fromIdx = Number(e.dataTransfer.getData('text/plain'));
-    if (fromIdx !== idx) {
-      const next = [...items];
-      const [moved] = next.splice(fromIdx, 1);
-      if (moved !== undefined) {
-        next.splice(idx, 0, moved);
-        onReorder(next);
-      }
-    }
-    setDraggedIdx(null);
-    setDragOverIdx(null);
-  };
-
-  return (
-    <div className={`gy-dnd-list ${className}`}>
-      {items.map((item, idx) => {
-        const isDragging = draggedIdx === idx;
-        const isOver = dragOverIdx === idx;
-        return (
-          <div
-            key={keyExtractor(item)}
-            className={[
-              'gy-dnd-item',
-              isDragging ? 'gy-dnd-item--dragging' : '',
-              isOver && !isDragging ? 'gy-dnd-item--drag-over' : '',
-            ]
-              .filter(Boolean)
-              .join(' ')}
-            draggable
-            onDragStart={(e) => handleDragStart(idx, e)}
-            onDragOver={(e) => handleDragOver(idx, e)}
-            onDragLeave={() => setDragOverIdx(null)}
-            onDrop={(e) => handleDrop(idx, e)}
-            onDragEnd={() => { setDraggedIdx(null); setDragOverIdx(null); }}
-          >
-            <div className="gy-dnd-handle" aria-hidden="true">
-              <svg width="12" height="16" viewBox="0 0 12 16" fill="currentColor">
-                <circle cx="4" cy="4" r="1.5" /><circle cx="8" cy="4" r="1.5" />
-                <circle cx="4" cy="8" r="1.5" /><circle cx="8" cy="8" r="1.5" />
-                <circle cx="4" cy="12" r="1.5" /><circle cx="8" cy="12" r="1.5" />
-              </svg>
-            </div>
-            <div className="gy-dnd-item-content">
-              {renderItem(item, isDragging)}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-// ── Kanban Board ─────────────────────────────────────────────────────────────
-export interface KanbanColumnDef<T> {
-  id: string;
-  title: string;
-  items: T[];
-}
-
-export interface KanbanBoardProps<T> {
-  columns: KanbanColumnDef<T>[];
-  onMove: (itemKey: string, fromCol: string, toCol: string, toIndex: number) => void;
-  keyExtractor: (item: T) => string;
-  renderCard: (item: T, isDragging: boolean) => React.ReactNode;
-  className?: string;
-}
-
-export function KanbanBoard<T>({ columns, onMove, keyExtractor, renderCard, className = '' }: KanbanBoardProps<T>) {
-  const [dragged, setDragged] = useState<{ key: string; colId: string; idx: number } | null>(null);
-  const [overCol, setOverCol] = useState<string | null>(null);
-
-  const handleDragStart = (e: React.DragEvent, key: string, colId: string, idx: number) => {
-    setDragged({ key, colId, idx });
-    e.dataTransfer.effectAllowed = 'move';
-    e.dataTransfer.setData('application/json', JSON.stringify({ key, colId }));
-  };
-
-  const handleDragOver = (e: React.DragEvent, colId: string) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    if (overCol !== colId) setOverCol(colId);
-  };
-
-  const handleDrop = (e: React.DragEvent, toCol: string, toIndex: number) => {
-    e.preventDefault();
-    setOverCol(null);
-    try {
-      const data = JSON.parse(e.dataTransfer.getData('application/json'));
-      if (data.colId === toCol && data.key === dragged?.key && toIndex === dragged?.idx) {
-        // dropped in same place
-        return;
-      }
-      onMove(data.key, data.colId, toCol, toIndex);
-    } catch (err) {}
-    setDragged(null);
-  };
-
-  return (
-    <div className={`gy-kanban ${className}`}>
-      {columns.map((col) => (
-        <div key={col.id} className="gy-kanban-column">
-          <div className="gy-kanban-column-header">
-            <span className="gy-kanban-column-title">{col.title}</span>
-            <span className="gy-kanban-column-count">{col.items.length}</span>
-          </div>
-          <div
-            className={`gy-kanban-drop-zone ${overCol === col.id ? 'gy-kanban-drop-zone--over' : ''}`}
-            onDragOver={(e) => handleDragOver(e, col.id)}
-            onDragLeave={() => setOverCol(null)}
-            onDrop={(e) => handleDrop(e, col.id, col.items.length)}
-          >
-            {col.items.map((item, idx) => {
-              const key = keyExtractor(item);
-              const isDragging = dragged?.key === key;
-              return (
-                <div
-                  key={key}
-                  className={`gy-kanban-card ${isDragging ? 'gy-kanban-card--dragging' : ''}`}
-                  draggable
-                  onDragStart={(e) => handleDragStart(e, key, col.id, idx)}
-                  onDragEnd={() => { setDragged(null); setOverCol(null); }}
-                  onDrop={(e) => {
-                    e.stopPropagation();
-                    handleDrop(e, col.id, idx);
-                  }}
-                >
-                  {renderCard(item, isDragging)}
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      ))}
-    </div>
-  );
-}

package/src/dragdrop/dragdrop.css

@@ -1,122 +0,0 @@
-/* ── Drag & Drop ─────────────────────────────────────────────────────────── */
-
-/* ── List Reorder ── */
-.gy-dnd-list {
-  display: flex;
-  flex-direction: column;
-  gap: var(--gy-spacing-2);
-  width: 100%;
-}
-
-.gy-dnd-item {
-  display: flex;
-  align-items: center;
-  gap: var(--gy-spacing-3);
-  padding: var(--gy-spacing-3) var(--gy-spacing-4);
-  background: var(--gy-surface);
-  border: 1.5px solid var(--gy-border);
-  border-radius: var(--gy-radius-lg);
-  transition: box-shadow var(--gy-duration-fast), border-color var(--gy-duration-fast), opacity var(--gy-duration-fast);
-  cursor: default;
-  user-select: none;
-}
-
-.gy-dnd-item--dragging {
-  opacity: 0.4;
-  border-color: var(--gy-primary);
-  border-style: dashed;
-}
-
-.gy-dnd-item--drag-over {
-  border-color: var(--gy-primary);
-  background: var(--gy-primary-subtle);
-  box-shadow: 0 0 0 3px var(--gy-focus-ring);
-}
-
-.gy-dnd-handle {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--gy-text-subtle);
-  cursor: grab;
-  flex-shrink: 0;
-  padding: 2px;
-  border-radius: var(--gy-radius-sm);
-  transition: color var(--gy-duration-fast);
-}
-
-.gy-dnd-handle:hover { color: var(--gy-text-muted); }
-.gy-dnd-handle:active { cursor: grabbing; }
-
-.gy-dnd-item-content { flex: 1; min-width: 0; }
-
-/* ── Kanban Board ── */
-.gy-kanban {
-  display: flex;
-  gap: var(--gy-spacing-4);
-  overflow-x: auto;
-  padding-bottom: var(--gy-spacing-4);
-  align-items: flex-start;
-  min-height: 200px;
-}
-
-.gy-kanban-column {
-  flex-shrink: 0;
-  width: 280px;
-  display: flex;
-  flex-direction: column;
-  gap: var(--gy-spacing-3);
-}
-
-.gy-kanban-column-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--gy-spacing-2) var(--gy-spacing-3);
-  background: var(--gy-background-muted);
-  border-radius: var(--gy-radius-lg);
-}
-
-.gy-kanban-column-title {
-  font-size: var(--gy-font-size-sm);
-  font-weight: var(--gy-font-weight-semibold);
-  color: var(--gy-text);
-}
-
-.gy-kanban-column-count {
-  font-size: var(--gy-font-size-xs);
-  font-weight: var(--gy-font-weight-semibold);
-  color: var(--gy-text-subtle);
-  background: var(--gy-surface);
-  padding: 1px var(--gy-spacing-2);
-  border-radius: var(--gy-radius-full);
-}
-
-.gy-kanban-drop-zone {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: var(--gy-spacing-2);
-  min-height: 80px;
-  border-radius: var(--gy-radius-lg);
-  padding: var(--gy-spacing-1);
-  transition: background-color var(--gy-duration-fast), border-color var(--gy-duration-fast);
-}
-
-.gy-kanban-drop-zone--over {
-  background: var(--gy-primary-subtle);
-  border: 2px dashed var(--gy-primary);
-}
-
-.gy-kanban-card {
-  background: var(--gy-surface);
-  border: 1px solid var(--gy-border);
-  border-radius: var(--gy-radius-lg);
-  padding: var(--gy-spacing-3);
-  cursor: grab;
-  transition: box-shadow var(--gy-duration-fast), opacity var(--gy-duration-fast);
-  user-select: none;
-}
-
-.gy-kanban-card:hover { box-shadow: var(--gy-shadow-md); }
-.gy-kanban-card--dragging { opacity: 0.4; cursor: grabbing; }

package/src/dragdrop/index.ts

@@ -1,2 +0,0 @@
-export { ReorderList, KanbanBoard } from './DragDrop';
-export type { ReorderListProps, KanbanBoardProps, KanbanColumnDef } from './DragDrop';