@galyan/ui 0.0.1

package/src/progressbar/ProgressBar.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import React from 'react';
+import './progressbar.css';
+
+export type ProgressSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type ProgressColor = 'primary' | 'success' | 'warning' | 'danger' | 'gradient';
+
+export interface ProgressBarProps {
+  value?: number;
+  max?: number;
+  size?: ProgressSize;
+  color?: ProgressColor;
+  label?: string;
+  showValue?: boolean;
+  striped?: boolean;
+  indeterminate?: boolean;
+  className?: string;
+}
+
+export function ProgressBar({
+  value = 0,
+  max = 100,
+  size = 'md',
+  color = 'primary',
+  label,
+  showValue = false,
+  striped = false,
+  indeterminate = false,
+  className = '',
+}: ProgressBarProps) {
+  const pct = Math.min(Math.max((value / max) * 100, 0), 100);
+
+  const fillClasses = [
+    'gy-progress-fill',
+    color !== 'primary' ? `gy-progress-fill--${color}` : '',
+    striped ? 'gy-progress-fill--striped' : '',
+    indeterminate ? 'gy-progress-fill--indeterminate' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return (
+    <div className={`gy-progress ${className}`}>
+      {(label || showValue) && (
+        <div className="gy-progress-header">
+          {label && <span className="gy-progress-label">{label}</span>}
+          {showValue && !indeterminate && (
+            <span className="gy-progress-value">{Math.round(pct)}%</span>
+          )}
+        </div>
+      )}
+      <div
+        className={`gy-progress-track gy-progress-track--${size}`}
+        role="progressbar"
+        aria-valuenow={indeterminate ? undefined : value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+        aria-label={label ?? 'Progress'}
+      >
+        <div
+          className={fillClasses}
+          style={{ width: indeterminate ? undefined : `${pct}%` }}
+        />
+      </div>
+    </div>
+  );
+}

package/src/progressbar/index.ts

@@ -0,0 +1,2 @@
+export { ProgressBar } from './ProgressBar';
+export type { ProgressBarProps, ProgressSize, ProgressColor } from './ProgressBar';

package/src/progressbar/progressbar.css

@@ -0,0 +1,73 @@
+/* ── ProgressBar ─────────────────────────────────────────────────────────── */
+.gy-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-1-5);
+  width: 100%;
+}
+
+.gy-progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gy-progress-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text);
+}
+
+.gy-progress-value {
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text-muted);
+  font-weight: var(--gy-font-weight-medium);
+}
+
+.gy-progress-track {
+  background: var(--gy-background-muted);
+  border-radius: var(--gy-radius-full);
+  overflow: hidden;
+}
+
+.gy-progress-track--xs { height: 0.25rem; }
+.gy-progress-track--sm { height: 0.375rem; }
+.gy-progress-track--md { height: 0.5rem; }
+.gy-progress-track--lg { height: 0.75rem; }
+.gy-progress-track--xl { height: 1rem; }
+
+.gy-progress-fill {
+  height: 100%;
+  border-radius: var(--gy-radius-full);
+  background: var(--gy-primary);
+  transition: width var(--gy-duration-slow) var(--gy-ease-out);
+}
+
+.gy-progress-fill--success { background: var(--gy-success); }
+.gy-progress-fill--warning { background: var(--gy-warning); }
+.gy-progress-fill--danger  { background: var(--gy-danger); }
+
+.gy-progress-fill--gradient {
+  background: var(--gy-gradient-primary);
+}
+
+.gy-progress-fill--striped {
+  background-image: repeating-linear-gradient(
+    -45deg,
+    transparent,
+    transparent 8px,
+    rgba(255,255,255,0.2) 8px,
+    rgba(255,255,255,0.2) 16px
+  );
+  background-size: 32px 32px;
+}
+
+.gy-progress-fill--indeterminate {
+  width: 40% !important;
+  animation: gy-progress-indeterminate 1.5s var(--gy-ease-in-out) infinite;
+}
+
+@keyframes gy-progress-indeterminate {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(250%); }
+}

package/src/radiogroup/RadioGroup.tsx

@@ -0,0 +1,73 @@
+'use client';
+
+import React, { useId } from 'react';
+import './radiogroup.css';
+
+export interface RadioOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  options: RadioOption[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  orientation?: 'horizontal' | 'vertical';
+  groupLabel?: string;
+  name?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function RadioGroup({
+  options,
+  value,
+  defaultValue,
+  onChange,
+  orientation = 'vertical',
+  groupLabel,
+  name,
+  disabled = false,
+  className = '',
+}: RadioGroupProps) {
+  const uid = useId();
+  const groupName = name ?? uid;
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label={typeof groupLabel === 'string' ? groupLabel : undefined}
+      className={`gy-radio-group ${orientation === 'horizontal' ? 'gy-radio-group--horizontal' : ''} ${className}`}
+    >
+      {groupLabel && <div className="gy-radio-group-label">{groupLabel}</div>}
+      {options.map((opt) => {
+        const isChecked = value !== undefined ? value === opt.value : undefined;
+        const isDisabled = disabled || opt.disabled;
+
+        return (
+          <label
+            key={opt.value}
+            className={`gy-radio ${isDisabled ? 'gy-radio--disabled' : ''}`}
+          >
+            <input
+              type="radio"
+              name={groupName}
+              value={opt.value}
+              checked={isChecked}
+              defaultChecked={defaultValue === opt.value}
+              disabled={isDisabled}
+              className="gy-radio-input"
+              onChange={() => onChange?.(opt.value)}
+            />
+            <span className={`gy-radio-circle ${isChecked ? 'gy-radio-circle--checked' : ''}`}>
+              {isChecked && <span className="gy-radio-dot" />}
+            </span>
+            <span className="gy-radio-label">{opt.label}</span>
+          </label>
+        );
+      })}
+    </div>
+  );
+}

package/src/radiogroup/index.ts

@@ -0,0 +1,2 @@
+export { RadioGroup } from './RadioGroup';
+export type { RadioGroupProps, RadioOption } from './RadioGroup';

package/src/radiogroup/radiogroup.css

@@ -0,0 +1,80 @@
+/* ── RadioGroup ───────────────────────────────────────────────────────────── */
+.gy-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-2);
+}
+
+.gy-radio-group--horizontal {
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.gy-radio-group-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text);
+  margin-bottom: var(--gy-spacing-1);
+}
+
+.gy-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gy-spacing-2);
+  cursor: pointer;
+}
+
+.gy-radio--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.gy-radio-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.gy-radio-circle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125rem;
+  height: 1.125rem;
+  border-radius: 50%;
+  border: 2px solid var(--gy-border-strong);
+  background: var(--gy-surface);
+  flex-shrink: 0;
+  transition:
+    border-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    box-shadow var(--gy-duration-fast) var(--gy-ease-in-out);
+}
+
+.gy-radio:not(.gy-radio--disabled):hover .gy-radio-circle {
+  border-color: var(--gy-primary);
+}
+
+.gy-radio-input:focus-visible + .gy-radio-circle {
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+  border-color: var(--gy-primary);
+}
+
+.gy-radio-circle--checked {
+  border-color: var(--gy-primary);
+}
+
+.gy-radio-dot {
+  width: 0.5rem;
+  height: 0.5rem;
+  border-radius: 50%;
+  background: var(--gy-primary);
+  animation: gy-zoom-in var(--gy-duration-fast) var(--gy-ease-spring);
+}
+
+.gy-radio-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text);
+  line-height: 1.4;
+}

package/src/skeleton/Skeleton.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import React from 'react';
+import './skeleton.css';
+
+export type SkeletonShape = 'text' | 'circle' | 'rect' | 'card';
+export type SkeletonAnimation = 'wave' | 'pulse' | 'none';
+
+export interface SkeletonProps {
+  shape?: SkeletonShape;
+  animation?: SkeletonAnimation;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
+  lines?: number;
+  gap?: string;
+}
+
+export function Skeleton({
+  shape = 'rect',
+  animation = 'wave',
+  width,
+  height,
+  className = '',
+  lines,
+  gap = '0.5rem',
+}: SkeletonProps) {
+  const classes = [
+    'gy-skeleton',
+    `gy-skeleton--${shape}`,
+    animation !== 'none' ? `gy-skeleton--${animation}` : '',
+    !width ? 'gy-skeleton--w-full' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const style: React.CSSProperties = {
+    width: width,
+    height: height,
+  };
+
+  if (lines) {
+    return (
+      <div style={{ display: 'flex', flexDirection: 'column', gap }}>
+        {Array.from({ length: lines }).map((_, i) => (
+          <div
+            key={i}
+            className={`gy-skeleton gy-skeleton--text ${animation !== 'none' ? `gy-skeleton--${animation}` : ''} ${
+              i === lines - 1 ? 'gy-skeleton--w-3-4' : 'gy-skeleton--w-full'
+            }`}
+            style={{ height: height ?? '1em' }}
+            aria-hidden="true"
+          />
+        ))}
+      </div>
+    );
+  }
+
+  return <div className={classes} style={style} aria-hidden="true" />;
+}

package/src/skeleton/index.ts

@@ -0,0 +1,2 @@
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonShape, SkeletonAnimation } from './Skeleton';

package/src/skeleton/skeleton.css

@@ -0,0 +1,46 @@
+/* ── Skeleton ─────────────────────────────────────────────────────────────── */
+.gy-skeleton {
+  background: var(--gy-skeleton-base);
+  border-radius: var(--gy-radius-md);
+  overflow: hidden;
+  position: relative;
+}
+
+/* Wave animation */
+.gy-skeleton--wave::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 25%, var(--gy-border) 50%, transparent 75%);
+  background-size: 200% 100%;
+  animation: gy-wave 1.5s var(--gy-ease) infinite;
+}
+
+/* Pulse animation */
+.gy-skeleton--pulse {
+  animation: gy-pulse 1.5s var(--gy-ease-in-out) infinite;
+}
+
+/* Shapes */
+.gy-skeleton--text {
+  height: 1em;
+  border-radius: var(--gy-radius-sm);
+}
+
+.gy-skeleton--circle {
+  border-radius: 50%;
+}
+
+.gy-skeleton--rect {
+  border-radius: var(--gy-radius-md);
+}
+
+.gy-skeleton--card {
+  border-radius: var(--gy-radius-xl);
+}
+
+/* Width presets */
+.gy-skeleton--w-full  { width: 100%; }
+.gy-skeleton--w-3-4   { width: 75%; }
+.gy-skeleton--w-1-2   { width: 50%; }
+.gy-skeleton--w-1-4   { width: 25%; }

package/src/spinner/Spinner.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React from 'react';
+import './spinner.css';
+
+export type SpinnerSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+export type SpinnerColor = 'primary' | 'white' | 'neutral';
+
+export interface SpinnerProps {
+  size?: SpinnerSize;
+  color?: SpinnerColor;
+  label?: string;
+  className?: string;
+}
+
+export function Spinner({ size = 'md', color = 'primary', label, className = '' }: SpinnerProps) {
+  return (
+    <div className={`gy-spinner-container ${className}`}>
+      <span
+        className={`gy-spinner gy-spinner--${size} gy-spinner--${color}`}
+        role="status"
+        aria-label={label ?? 'Loading...'}
+      >
+        <span className="gy-spinner__circle" aria-hidden="true" />
+      </span>
+      {label && <span className="gy-spinner__label">{label}</span>}
+    </div>
+  );
+}

package/src/spinner/index.ts

@@ -0,0 +1,2 @@
+export { Spinner } from './Spinner';
+export type { SpinnerProps, SpinnerSize, SpinnerColor } from './Spinner';

package/src/spinner/spinner.css

@@ -0,0 +1,39 @@
+/* ── Spinner ──────────────────────────────────────────────────────────────── */
+.gy-spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.gy-spinner__circle {
+  border-radius: 50%;
+  border-style: solid;
+  border-color: var(--gy-primary-muted);
+  border-top-color: var(--gy-primary);
+  animation: gy-spin var(--gy-duration-slower) linear infinite;
+}
+
+.gy-spinner--xs .gy-spinner__circle  { width: 1rem;   height: 1rem;   border-width: 2px; }
+.gy-spinner--sm .gy-spinner__circle  { width: 1.25rem; height: 1.25rem; border-width: 2px; }
+.gy-spinner--md .gy-spinner__circle  { width: 1.5rem;  height: 1.5rem;  border-width: 2.5px; }
+.gy-spinner--lg .gy-spinner__circle  { width: 2rem;    height: 2rem;    border-width: 3px; }
+.gy-spinner--xl .gy-spinner__circle  { width: 3rem;    height: 3rem;    border-width: 4px; }
+
+/* Color variants */
+.gy-spinner--primary   .gy-spinner__circle { border-color: var(--gy-primary-muted); border-top-color: var(--gy-primary); }
+.gy-spinner--white     .gy-spinner__circle { border-color: rgba(255,255,255,0.3); border-top-color: #ffffff; }
+.gy-spinner--neutral   .gy-spinner__circle { border-color: var(--gy-border); border-top-color: var(--gy-text-muted); }
+
+.gy-spinner__label {
+  margin-top: var(--gy-spacing-2);
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+  text-align: center;
+}
+
+.gy-spinner-container {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+}

package/src/stepper/Stepper.tsx

@@ -0,0 +1,127 @@
+'use client';
+
+import React, { useState } from 'react';
+import './stepper.css';
+
+export type StepStatus = 'upcoming' | 'active' | 'completed' | 'error';
+
+export interface Step {
+  id: string;
+  label: string;
+  description?: string;
+  content?: React.ReactNode;
+  optional?: boolean;
+}
+
+export interface StepperProps {
+  steps: Step[];
+  activeStep?: number;
+  defaultStep?: number;
+  /** 'linear' = must complete in order; 'free' = can jump to any step */
+  variant?: 'linear' | 'free';
+  orientation?: 'horizontal' | 'vertical';
+  onStepChange?: (index: number) => void;
+  onComplete?: () => void;
+  className?: string;
+}
+
+const CheckIcon = () => (
+  <svg width="14" height="11" viewBox="0 0 14 11" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+    <polyline points="1,5 5,9 13,1" />
+  </svg>
+);
+
+const ErrorIcon = () => (
+  <svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+    <line x1="2" y1="2" x2="10" y2="10" /><line x1="10" y1="2" x2="2" y2="10" />
+  </svg>
+);
+
+export function Stepper({
+  steps,
+  activeStep: controlledStep,
+  defaultStep = 0,
+  variant = 'linear',
+  orientation = 'horizontal',
+  onStepChange,
+  onComplete,
+  className = '',
+}: StepperProps) {
+  const [internalStep, setInternalStep] = useState(defaultStep);
+  const current = controlledStep ?? internalStep;
+
+  const goTo = (idx: number) => {
+    if (variant === 'linear' && idx > current + 1) return;
+    if (idx < 0 || idx >= steps.length) return;
+    setInternalStep(idx);
+    onStepChange?.(idx);
+  };
+
+  const next = () => {
+    if (current === steps.length - 1) {
+      onComplete?.();
+    } else {
+      goTo(current + 1);
+    }
+  };
+
+  const prev = () => goTo(current - 1);
+
+  const getStatus = (idx: number): StepStatus => {
+    if (idx < current) return 'completed';
+    if (idx === current) return 'active';
+    return 'upcoming';
+  };
+
+  return (
+    <div className={`gy-stepper ${orientation === 'vertical' ? 'gy-stepper--vertical' : ''} ${className}`}>
+      {/* Step Indicators */}
+      <div className={`gy-stepper ${orientation === 'vertical' ? 'gy-stepper--vertical' : ''}`} style={{ width: '100%' }}>
+        {steps.map((step, idx) => {
+          const status = getStatus(idx);
+          const isClickable = variant === 'free' || idx <= current;
+
+          return (
+            <React.Fragment key={step.id}>
+              <div className="gy-stepper-item">
+                <span
+                  className={[
+                    'gy-stepper-indicator',
+                    `gy-stepper-indicator--${status}`,
+                    isClickable ? 'gy-stepper-indicator--clickable' : '',
+                  ]
+                    .filter(Boolean)
+                    .join(' ')}
+                  onClick={() => isClickable && goTo(idx)}
+                  role={isClickable ? 'button' : undefined}
+                  tabIndex={isClickable ? 0 : undefined}
+                  onKeyDown={isClickable ? (e) => { if (e.key === 'Enter') goTo(idx); } : undefined}
+                  aria-label={`Step ${idx + 1}: ${step.label}`}
+                  aria-current={status === 'active' ? 'step' : undefined}
+                >
+                  {status === 'completed' ? <CheckIcon /> : status === 'error' ? <ErrorIcon /> : idx + 1}
+                </span>
+                <div>
+                  <div className={`gy-stepper-label gy-stepper-label--${status}`}>{step.label}</div>
+                  {step.optional && <div className="gy-stepper-description">Optional</div>}
+                  {step.description && <div className="gy-stepper-description">{step.description}</div>}
+                </div>
+              </div>
+
+              {idx < steps.length - 1 && (
+                <div className={`gy-stepper-connector ${idx < current ? 'gy-stepper-connector--completed' : ''}`} />
+              )}
+            </React.Fragment>
+          );
+        })}
+      </div>
+
+      {/* Active Panel */}
+      {steps[current]?.content && (
+        <div key={current} className="gy-stepper-panel">
+          {steps[current].content}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/stepper/index.ts

@@ -0,0 +1,2 @@
+export { Stepper } from './Stepper';
+export type { StepperProps, Step, StepStatus } from './Stepper';