@galyan/ui 0.0.1

package/src/chips/chips.css

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

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

package/src/code.tsx

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

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

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

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

package/src/dragdrop/DragDrop.tsx

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

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

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