@galyan/ui 0.0.1

package/src/card/card.css

@@ -0,0 +1,115 @@
+/* ── Card ─────────────────────────────────────────────────────────────────── */
+.gy-card {
+  background: var(--gy-surface);
+  border-radius: var(--gy-radius-xl);
+  border: 1px solid var(--gy-border);
+  overflow: hidden;
+  transition: box-shadow var(--gy-duration-normal) var(--gy-ease-in-out);
+}
+
+.gy-card--elevated {
+  border-color: transparent;
+  box-shadow: var(--gy-shadow-md);
+}
+
+.gy-card--elevated:hover { box-shadow: var(--gy-shadow-lg); }
+
+.gy-card--outlined {
+  border-color: var(--gy-border-strong);
+  box-shadow: none;
+}
+
+.gy-card--filled {
+  background: var(--gy-background-subtle);
+  border-color: transparent;
+}
+
+.gy-card--hoverable { cursor: pointer; }
+.gy-card--hoverable:hover { box-shadow: var(--gy-shadow-lg); transform: translateY(-1px); }
+
+.gy-card--sm  { border-radius: var(--gy-radius-lg); }
+.gy-card--lg  { border-radius: var(--gy-radius-2xl); }
+
+.gy-card-header {
+  padding: var(--gy-spacing-4) var(--gy-spacing-5);
+  border-bottom: 1px solid var(--gy-border);
+}
+
+.gy-card-body  { padding: var(--gy-spacing-5); }
+.gy-card-body--sm { padding: var(--gy-spacing-3); }
+.gy-card-body--lg { padding: var(--gy-spacing-6); }
+
+.gy-card-footer {
+  padding: var(--gy-spacing-4) var(--gy-spacing-5);
+  border-top: 1px solid var(--gy-border);
+  background: var(--gy-background-subtle);
+}
+
+/* ── CardInfo ─────────────────────────────────────────────────────────────── */
+.gy-card-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-3);
+  padding: var(--gy-spacing-5);
+  background: var(--gy-surface);
+  border-radius: var(--gy-radius-xl);
+  border: 1px solid var(--gy-border);
+  transition: box-shadow var(--gy-duration-normal);
+}
+
+.gy-card-info:hover { box-shadow: var(--gy-shadow-md); }
+
+.gy-card-info__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.gy-card-info__title {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text-muted);
+}
+
+.gy-card-info__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  border-radius: var(--gy-radius-lg);
+  background: var(--gy-primary-subtle);
+  color: var(--gy-primary);
+}
+
+.gy-card-info__value {
+  font-size: var(--gy-font-size-3xl);
+  font-weight: var(--gy-font-weight-bold);
+  color: var(--gy-text);
+  line-height: 1;
+}
+
+.gy-card-info__trend {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gy-spacing-1);
+  font-size: var(--gy-font-size-xs);
+  font-weight: var(--gy-font-weight-medium);
+  padding: 2px var(--gy-spacing-1-5);
+  border-radius: var(--gy-radius-full);
+}
+
+.gy-card-info__trend--up {
+  color: var(--gy-success-emphasis);
+  background: var(--gy-success-subtle);
+}
+
+.gy-card-info__trend--down {
+  color: var(--gy-danger);
+  background: var(--gy-danger-subtle);
+}
+
+.gy-card-info__footer {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+}

package/src/card/index.ts

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardBody, CardFooter, CardInfo } from './Card';
+export type { CardProps, CardInfoProps, CardVariant, CardSize } from './Card';

package/src/card.tsx

@@ -0,0 +1,27 @@
+import { type JSX } from "react";
+
+export function Card({
+  className,
+  title,
+  children,
+  href,
+}: {
+  className?: string;
+  title: string;
+  children: React.ReactNode;
+  href: string;
+}): JSX.Element {
+  return (
+    <a
+      className={className}
+      href={`${href}?utm_source=create-turbo&utm_medium=basic&utm_campaign=create-turbo"`}
+      rel="noopener noreferrer"
+      target="_blank"
+    >
+      <h2>
+        {title} <span>-&gt;</span>
+      </h2>
+      <p>{children}</p>
+    </a>
+  );
+}

package/src/chart/Chart.tsx

@@ -0,0 +1,186 @@
+'use client';
+
+import React from 'react';
+import {
+  LineChart, Line, BarChart, Bar, AreaChart, Area, PieChart, Pie, Cell,
+  XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Legend
+} from 'recharts';
+
+export type ChartType = 'line' | 'bar' | 'area' | 'pie' | 'donut';
+
+export interface ChartSeries {
+  key: string;
+  name?: string;
+  color?: string;
+}
+
+export interface ChartProps {
+  type: ChartType;
+  data: any[];
+  xAxisKey?: string;
+  series?: ChartSeries[]; // for line, bar, area
+  nameKey?: string;       // for pie
+  valueKey?: string;      // for pie
+  height?: number | string;
+  showGrid?: boolean;
+  showLegend?: boolean;
+  className?: string;
+}
+
+const DEFAULT_COLORS = [
+  'var(--gy-primary)',
+  'var(--gy-success)',
+  'var(--gy-warning)',
+  'var(--gy-danger)',
+  'var(--gy-info)',
+  '#8b5cf6',
+  '#ec4899',
+];
+
+export function Chart({
+  type,
+  data,
+  xAxisKey,
+  series = [],
+  nameKey,
+  valueKey,
+  height = 300,
+  showGrid = true,
+  showLegend = true,
+  className = '',
+}: ChartProps) {
+  const commonAxisProps = {
+    stroke: 'var(--gy-border-strong)',
+    tick: { fill: 'var(--gy-text-subtle)', fontSize: 12 },
+    tickLine: { stroke: 'var(--gy-border)' },
+  };
+
+  const commonTooltipProps = {
+    contentStyle: {
+      backgroundColor: 'var(--gy-surface)',
+      borderColor: 'var(--gy-border)',
+      borderRadius: 'var(--gy-radius-lg)',
+      boxShadow: 'var(--gy-shadow-md)',
+      color: 'var(--gy-text)',
+      fontSize: 13,
+    },
+    itemStyle: { color: 'var(--gy-text)' },
+  };
+
+  const renderContent = () => {
+    switch (type) {
+      case 'line':
+        return (
+          <LineChart data={data}>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="var(--gy-border)" vertical={false} />}
+            <XAxis dataKey={xAxisKey} {...commonAxisProps} />
+            <YAxis {...commonAxisProps} />
+            <Tooltip {...commonTooltipProps} />
+            {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+            {series.map((s, i) => (
+              <Line
+                key={s.key}
+                type="monotone"
+                dataKey={s.key}
+                name={s.name ?? s.key}
+                stroke={s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length]}
+                strokeWidth={2}
+                dot={{ r: 4, strokeWidth: 2, fill: 'var(--gy-surface)' }}
+                activeDot={{ r: 6, strokeWidth: 0 }}
+              />
+            ))}
+          </LineChart>
+        );
+
+      case 'bar':
+        return (
+          <BarChart data={data}>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="var(--gy-border)" vertical={false} />}
+            <XAxis dataKey={xAxisKey} {...commonAxisProps} />
+            <YAxis {...commonAxisProps} />
+            <Tooltip {...commonTooltipProps} cursor={{ fill: 'var(--gy-background-muted)' }} />
+            {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+            {series.map((s, i) => (
+              <Bar
+                key={s.key}
+                dataKey={s.key}
+                name={s.name ?? s.key}
+                fill={s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length]}
+                radius={[4, 4, 0, 0]}
+              />
+            ))}
+          </BarChart>
+        );
+
+      case 'area':
+        return (
+          <AreaChart data={data}>
+            <defs>
+              {series.map((s, i) => {
+                const color = s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+                return (
+                  <linearGradient key={`grad-${s.key}`} id={`grad-${s.key}`} x1="0" y1="0" x2="0" y2="1">
+                    <stop offset="5%" stopColor={color} stopOpacity={0.3} />
+                    <stop offset="95%" stopColor={color} stopOpacity={0} />
+                  </linearGradient>
+                );
+              })}
+            </defs>
+            {showGrid && <CartesianGrid strokeDasharray="3 3" stroke="var(--gy-border)" vertical={false} />}
+            <XAxis dataKey={xAxisKey} {...commonAxisProps} />
+            <YAxis {...commonAxisProps} />
+            <Tooltip {...commonTooltipProps} />
+            {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+            {series.map((s, i) => {
+              const color = s.color ?? DEFAULT_COLORS[i % DEFAULT_COLORS.length];
+              return (
+                <Area
+                  key={s.key}
+                  type="monotone"
+                  dataKey={s.key}
+                  name={s.name ?? s.key}
+                  stroke={color}
+                  strokeWidth={2}
+                  fillOpacity={1}
+                  fill={`url(#grad-${s.key})`}
+                />
+              );
+            })}
+          </AreaChart>
+        );
+
+      case 'pie':
+      case 'donut':
+        return (
+          <PieChart>
+            <Tooltip {...commonTooltipProps} />
+            {showLegend && <Legend wrapperStyle={{ fontSize: 12 }} />}
+            <Pie
+              data={data}
+              dataKey={valueKey!}
+              nameKey={nameKey!}
+              cx="50%"
+              cy="50%"
+              innerRadius={type === 'donut' ? '60%' : 0}
+              outerRadius="80%"
+              stroke="var(--gy-surface)"
+              strokeWidth={2}
+              paddingAngle={type === 'donut' ? 2 : 0}
+            >
+              {data.map((entry, index) => (
+                <Cell key={`cell-${index}`} fill={entry.color ?? DEFAULT_COLORS[index % DEFAULT_COLORS.length]} />
+              ))}
+            </Pie>
+          </PieChart>
+        );
+    }
+  };
+
+  return (
+    <div className={`gy-chart ${className}`} style={{ width: '100%', height }}>
+      <ResponsiveContainer width="100%" height="100%">
+        {renderContent()}
+      </ResponsiveContainer>
+    </div>
+  );
+}

package/src/chart/index.ts

@@ -0,0 +1,2 @@
+export { Chart } from './Chart';
+export type { ChartProps, ChartType, ChartSeries } from './Chart';

package/src/checkbox/Checkbox.tsx

@@ -0,0 +1,101 @@
+'use client';
+
+import React, { forwardRef, useId } from 'react';
+import './checkbox.css';
+
+export type CheckboxSize = 'sm' | 'md' | 'lg';
+
+export interface CheckboxProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  indeterminate?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  description?: string;
+  size?: CheckboxSize;
+  id?: string;
+  name?: string;
+  value?: string;
+  className?: string;
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
+  {
+    checked,
+    defaultChecked,
+    indeterminate = false,
+    onChange,
+    disabled = false,
+    label,
+    description,
+    size = 'md',
+    id,
+    name,
+    value,
+    className = '',
+  },
+  ref
+) {
+  const uid = useId();
+  const inputId = id ?? uid;
+
+  const isChecked = checked ?? defaultChecked ?? false;
+
+  const boxClasses = [
+    'gy-checkbox-box',
+    `gy-checkbox-box--${size}`,
+    isChecked ? 'gy-checkbox-box--checked' : '',
+    indeterminate ? 'gy-checkbox-box--indeterminate' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <label
+      className={[
+        'gy-checkbox-root',
+        disabled ? 'gy-checkbox-root--disabled' : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      htmlFor={inputId}
+    >
+      <input
+        ref={ref}
+        type="checkbox"
+        id={inputId}
+        name={name}
+        value={value}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        className="gy-checkbox-input"
+        onChange={(e) => onChange?.(e.target.checked)}
+        aria-checked={indeterminate ? 'mixed' : checked}
+      />
+      <span className={boxClasses} aria-hidden="true">
+        {(isChecked || indeterminate) && (
+          <span className="gy-checkbox-icon">
+            {indeterminate ? (
+              <svg width="10" height="2" viewBox="0 0 10 2" fill="currentColor">
+                <rect x="0" y="0" width="10" height="2" rx="1" />
+              </svg>
+            ) : (
+              <svg width="10" height="8" viewBox="0 0 10 8" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+                <polyline points="1,4 4,7 9,1" />
+              </svg>
+            )}
+          </span>
+        )}
+      </span>
+      {(label || description) && (
+        <span className="gy-checkbox-content">
+          {label && <span className="gy-checkbox-label">{label}</span>}
+          {description && <span className="gy-checkbox-description">{description}</span>}
+        </span>
+      )}
+    </label>
+  );
+});

package/src/checkbox/checkbox.css

@@ -0,0 +1,76 @@
+/* ── Checkbox ─────────────────────────────────────────────────────────────── */
+.gy-checkbox-root {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--gy-spacing-2);
+  cursor: pointer;
+}
+
+.gy-checkbox-root--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.gy-checkbox-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.gy-checkbox-box {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border: 2px solid var(--gy-border-strong);
+  border-radius: var(--gy-radius-sm);
+  background: var(--gy-surface);
+  transition:
+    background-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    border-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    box-shadow var(--gy-duration-fast) var(--gy-ease-in-out);
+}
+
+.gy-checkbox-box--sm { width: 1rem; height: 1rem; }
+.gy-checkbox-box--md { width: 1.125rem; height: 1.125rem; }
+.gy-checkbox-box--lg { width: 1.25rem; height: 1.25rem; }
+
+.gy-checkbox-root:not(.gy-checkbox-root--disabled):hover .gy-checkbox-box {
+  border-color: var(--gy-primary);
+}
+
+.gy-checkbox-input:focus-visible + .gy-checkbox-box {
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+  border-color: var(--gy-primary);
+}
+
+.gy-checkbox-box--checked,
+.gy-checkbox-box--indeterminate {
+  background: var(--gy-primary);
+  border-color: var(--gy-primary);
+}
+
+.gy-checkbox-icon {
+  color: var(--gy-primary-fg);
+  animation: gy-zoom-in var(--gy-duration-fast) var(--gy-ease-spring);
+}
+
+.gy-checkbox-content {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.gy-checkbox-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text);
+  line-height: 1.4;
+}
+
+.gy-checkbox-description {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+}

package/src/checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox';
+export type { CheckboxProps, CheckboxSize } from './Checkbox';

package/src/chips/Chips.tsx

@@ -0,0 +1,146 @@
+'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>
+  );
+}