@galyan/ui 0.0.1 → 0.0.2

package/src/card/Card.tsx

@@ -1,88 +0,0 @@
-'use client';
-
-import React from 'react';
-import './card.css';
-
-// ── Card ─────────────────────────────────────────────────────────────────────
-export type CardVariant = 'default' | 'elevated' | 'outlined' | 'filled';
-export type CardSize = 'sm' | 'md' | 'lg';
-
-export interface CardProps {
-  variant?: CardVariant;
-  size?: CardSize;
-  hoverable?: boolean;
-  className?: string;
-  children?: React.ReactNode;
-  onClick?: () => void;
-  style?: React.CSSProperties;
-}
-
-export function Card({ variant = 'default', size = 'md', hoverable = false, className = '', children, onClick, style }: CardProps) {
-  return (
-    <div
-      className={[
-        'gy-card',
-        variant !== 'default' ? `gy-card--${variant}` : '',
-        size !== 'md' ? `gy-card--${size}` : '',
-        hoverable ? 'gy-card--hoverable' : '',
-        className,
-      ]
-        .filter(Boolean)
-        .join(' ')}
-      onClick={onClick}
-      style={style}
-      role={onClick ? 'button' : undefined}
-      tabIndex={onClick ? 0 : undefined}
-    >
-      {children}
-    </div>
-  );
-}
-
-export function CardHeader({ children, className = '' }: { children?: React.ReactNode; className?: string }) {
-  return <div className={`gy-card-header ${className}`}>{children}</div>;
-}
-
-export function CardBody({ children, size, className = '' }: { children?: React.ReactNode; size?: CardSize; className?: string }) {
-  return (
-    <div className={['gy-card-body', size ? `gy-card-body--${size}` : '', className].filter(Boolean).join(' ')}>
-      {children}
-    </div>
-  );
-}
-
-export function CardFooter({ children, className = '' }: { children?: React.ReactNode; className?: string }) {
-  return <div className={`gy-card-footer ${className}`}>{children}</div>;
-}
-
-// ── CardInfo ──────────────────────────────────────────────────────────────────
-export interface CardInfoProps {
-  title: string;
-  value: string | number;
-  icon?: React.ReactNode;
-  trend?: { value: number; label?: string };
-  footer?: string;
-  className?: string;
-}
-
-export function CardInfo({ title, value, icon, trend, footer, className = '' }: CardInfoProps) {
-  const isUp = trend ? trend.value >= 0 : null;
-  return (
-    <div className={`gy-card-info ${className}`}>
-      <div className="gy-card-info__header">
-        <span className="gy-card-info__title">{title}</span>
-        {icon && <span className="gy-card-info__icon">{icon}</span>}
-      </div>
-      <div className="gy-card-info__value">{value}</div>
-      {trend && (
-        <div>
-          <span className={`gy-card-info__trend gy-card-info__trend--${isUp ? 'up' : 'down'}`}>
-            {isUp ? '↑' : '↓'} {Math.abs(trend.value)}%
-            {trend.label && ` ${trend.label}`}
-          </span>
-        </div>
-      )}
-      {footer && <div className="gy-card-info__footer">{footer}</div>}
-    </div>
-  );
-}

package/src/card/card.css

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

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

package/src/card.tsx

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

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

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

package/src/checkbox/Checkbox.tsx

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

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

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