@galyan/ui 0.0.1

package/src/textarea/Textarea.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React, { forwardRef, useCallback, useEffect, useId, useRef } from 'react';
+import './textarea.css';
+
+export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  maxCharCount?: number;
+  autoResize?: boolean;
+  required?: boolean;
+}
+
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  {
+    label,
+    error,
+    helperText,
+    maxCharCount,
+    autoResize = false,
+    required,
+    disabled,
+    value,
+    onChange,
+    className = '',
+    id,
+    ...rest
+  },
+  ref
+) {
+  const uid = useId();
+  const inputId = id ?? uid;
+  const innerRef = useRef<HTMLTextAreaElement>(null);
+  const textareaRef = (ref as React.RefObject<HTMLTextAreaElement>) ?? innerRef;
+
+  const charCount = typeof value === 'string' ? value.length : 0;
+  const isOver = maxCharCount ? charCount > maxCharCount : false;
+
+  const adjustHeight = useCallback(() => {
+    const el = textareaRef.current;
+    if (!el || !autoResize) return;
+    el.style.height = 'auto';
+    el.style.height = `${el.scrollHeight}px`;
+  }, [autoResize, textareaRef]);
+
+  useEffect(() => {
+    adjustHeight();
+  }, [value, adjustHeight]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    adjustHeight();
+    onChange?.(e);
+  };
+
+  return (
+    <div className={`gy-textarea-root ${className}`}>
+      {label && (
+        <label
+          className={`gy-textarea-label ${required ? 'gy-textarea-label--required' : ''}`}
+          htmlFor={inputId}
+        >
+          {label}
+        </label>
+      )}
+
+      <textarea
+        ref={textareaRef}
+        id={inputId}
+        className={[
+          'gy-textarea',
+          error ? 'gy-textarea--error' : '',
+          autoResize ? 'gy-textarea--auto-resize' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        disabled={disabled}
+        required={required}
+        aria-invalid={!!error}
+        value={value}
+        onChange={handleChange}
+        {...rest}
+      />
+
+      <div className="gy-textarea-footer">
+        {error ? (
+          <span className="gy-textarea-helper gy-textarea-helper--error" role="alert">{error}</span>
+        ) : helperText ? (
+          <span className="gy-textarea-helper">{helperText}</span>
+        ) : (
+          <span />
+        )}
+
+        {maxCharCount !== undefined && (
+          <span className={`gy-textarea-count ${isOver ? 'gy-textarea-count--over' : ''}`}>
+            {charCount}/{maxCharCount}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+});

package/src/textarea/index.ts

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

package/src/textarea/textarea.css

@@ -0,0 +1,85 @@
+/* ── Textarea ─────────────────────────────────────────────────────────────── */
+.gy-textarea-root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-1-5);
+  width: 100%;
+}
+
+.gy-textarea-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text);
+}
+
+.gy-textarea-label--required::after {
+  content: '*';
+  color: var(--gy-danger);
+  margin-left: 2px;
+}
+
+.gy-textarea {
+  width: 100%;
+  min-height: 80px;
+  padding: var(--gy-spacing-2-5) var(--gy-spacing-3);
+  font-family: var(--gy-font-sans);
+  font-size: var(--gy-font-size-sm);
+  line-height: var(--gy-line-height-relaxed);
+  color: var(--gy-text);
+  background: var(--gy-surface);
+  border: 1.5px solid var(--gy-border);
+  border-radius: var(--gy-radius-lg);
+  resize: vertical;
+  transition:
+    border-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    box-shadow var(--gy-duration-fast) var(--gy-ease-in-out);
+  outline: none;
+}
+
+.gy-textarea::placeholder { color: var(--gy-text-subtle); }
+
+.gy-textarea:focus {
+  border-color: var(--gy-border-focus);
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+}
+
+.gy-textarea--error {
+  border-color: var(--gy-danger);
+}
+
+.gy-textarea--error:focus {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+
+.gy-textarea:disabled {
+  background: var(--gy-disabled-bg);
+  color: var(--gy-text-disabled);
+  cursor: not-allowed;
+  resize: none;
+}
+
+.gy-textarea--auto-resize {
+  resize: none;
+  overflow: hidden;
+}
+
+.gy-textarea-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.gy-textarea-helper {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+}
+
+.gy-textarea-helper--error { color: var(--gy-danger); }
+
+.gy-textarea-count {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+  margin-left: auto;
+}
+
+.gy-textarea-count--over { color: var(--gy-danger); }

package/src/toaster/Toaster.tsx

@@ -0,0 +1,108 @@
+'use client';
+
+import React, { createContext, useCallback, useContext, useId, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Spinner } from '../spinner/Spinner';
+import './toaster.css';
+
+export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'loading';
+export type ToastPosition =
+  | 'top-right' | 'top-left' | 'top-center'
+  | 'bottom-right' | 'bottom-left' | 'bottom-center';
+
+export interface Toast {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  dismissible?: boolean;
+}
+
+interface ToastContextValue {
+  toasts: Toast[];
+  toast: (toast: Omit<Toast, 'id'>) => string;
+  dismiss: (id: string) => void;
+  dismissAll: () => void;
+}
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+const icons: Record<ToastVariant, React.ReactNode> = {
+  success: <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#10b981" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="7"/><polyline points="5,8 7,10 11,6"/></svg>,
+  error: <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#ef4444" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="7"/><line x1="8" y1="5" x2="8" y2="9"/><circle cx="8" cy="11.5" r="0.5" fill="#ef4444"/></svg>,
+  warning: <svg width="16" height="16" viewBox="0 0 16 16" fill="#f59e0b"><path d="M8 2L1 14h14L8 2zm0 4v4m0 2v.01" stroke="white" strokeWidth="1.5" strokeLinecap="round"/></svg>,
+  info: <svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="#0ea5e9" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="8" cy="8" r="7"/><line x1="8" y1="8" x2="8" y2="12"/><circle cx="8" cy="5" r="0.5" fill="#0ea5e9"/></svg>,
+  loading: <Spinner size="xs" />,
+};
+
+export function ToasterProvider({ children, position = 'top-right' }: { children: React.ReactNode; position?: ToastPosition }) {
+  const [toasts, setToasts] = useState<Toast[]>([]);
+
+  const dismiss = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const dismissAll = useCallback(() => setToasts([]), []);
+
+  const toast = useCallback((data: Omit<Toast, 'id'>) => {
+    const id = Math.random().toString(36).slice(2);
+    const duration = data.duration ?? (data.variant === 'loading' ? 0 : 4000);
+    const newToast: Toast = { ...data, id, duration };
+
+    setToasts((prev) => [...prev, newToast]);
+
+    if (duration > 0) {
+      setTimeout(() => dismiss(id), duration);
+    }
+
+    return id;
+  }, [dismiss]);
+
+  const isLeft = position.includes('left');
+
+  const toasterNode = (
+    <div className={`gy-toaster gy-toaster--${position}`}>
+      {toasts.map((t) => (
+        <div
+          key={t.id}
+          className={`gy-toast gy-toast--${t.variant ?? 'info'} ${isLeft ? 'gy-toast--left' : ''}`}
+          role="alert"
+          aria-live="polite"
+        >
+          <div className="gy-toast-accent" />
+          <span className="gy-toast-icon">{icons[t.variant ?? 'info']}</span>
+          <div className="gy-toast-content">
+            <div className="gy-toast-title">{t.title}</div>
+            {t.description && <div className="gy-toast-description">{t.description}</div>}
+          </div>
+          {(t.dismissible ?? true) && (
+            <button className="gy-toast-close" onClick={() => dismiss(t.id)} aria-label="Dismiss">
+              <svg width="12" height="12" viewBox="0 0 12 12" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="1" y1="1" x2="11" y2="11" /><line x1="11" y1="1" x2="1" y2="11" />
+              </svg>
+            </button>
+          )}
+          {t.duration && t.duration > 0 && (
+            <div className="gy-toast-progress">
+              <div className="gy-toast-progress-bar" style={{ animationDuration: `${t.duration}ms` }} />
+            </div>
+          )}
+        </div>
+      ))}
+    </div>
+  );
+
+  return (
+    <ToastContext.Provider value={{ toasts, toast, dismiss, dismissAll }}>
+      {children}
+      {typeof document !== 'undefined' && createPortal(toasterNode, document.body)}
+    </ToastContext.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = useContext(ToastContext);
+  if (!ctx) throw new Error('useToast must be used inside ToasterProvider');
+  return ctx;
+}

package/src/toaster/index.ts

@@ -0,0 +1,2 @@
+export { ToasterProvider, useToast } from './Toaster';
+export type { Toast, ToastVariant, ToastPosition } from './Toaster';

package/src/toaster/toaster.css

@@ -0,0 +1,113 @@
+/* ── Toaster ──────────────────────────────────────────────────────────────── */
+.gy-toaster {
+  position: fixed;
+  z-index: var(--gy-z-toast);
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-2);
+  pointer-events: none;
+  padding: var(--gy-spacing-4);
+}
+
+.gy-toaster--top-right    { top: 0; right: 0; align-items: flex-end; }
+.gy-toaster--top-left     { top: 0; left: 0;  align-items: flex-start; }
+.gy-toaster--top-center   { top: 0; left: 50%; transform: translateX(-50%); align-items: center; }
+.gy-toaster--bottom-right { bottom: 0; right: 0; align-items: flex-end; flex-direction: column-reverse; }
+.gy-toaster--bottom-left  { bottom: 0; left: 0;  align-items: flex-start; flex-direction: column-reverse; }
+.gy-toaster--bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); align-items: center; flex-direction: column-reverse; }
+
+.gy-toast {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--gy-spacing-3);
+  padding: var(--gy-spacing-3) var(--gy-spacing-4);
+  background: var(--gy-surface);
+  border-radius: var(--gy-radius-xl);
+  box-shadow: var(--gy-shadow-lg);
+  border: 1px solid var(--gy-border);
+  min-width: 280px;
+  max-width: 380px;
+  pointer-events: all;
+  animation: gy-slide-toast-in-right var(--gy-duration-normal) var(--gy-ease-spring);
+  position: relative;
+  overflow: hidden;
+}
+
+.gy-toast--left { animation: gy-slide-in-left var(--gy-duration-normal) var(--gy-ease-spring); }
+
+.gy-toast-accent {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 4px;
+  border-radius: var(--gy-radius-lg) 0 0 var(--gy-radius-lg);
+}
+
+.gy-toast--success .gy-toast-accent { background: var(--gy-success); }
+.gy-toast--error   .gy-toast-accent { background: var(--gy-danger); }
+.gy-toast--warning .gy-toast-accent { background: var(--gy-warning); }
+.gy-toast--info    .gy-toast-accent { background: var(--gy-info); }
+.gy-toast--loading .gy-toast-accent { background: var(--gy-primary); }
+
+.gy-toast-icon {
+  flex-shrink: 0;
+  margin-left: var(--gy-spacing-1);
+}
+
+.gy-toast-content { flex: 1; }
+
+.gy-toast-title {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text);
+  line-height: 1.4;
+}
+
+.gy-toast-description {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-muted);
+  margin-top: 2px;
+  line-height: 1.5;
+}
+
+.gy-toast-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--gy-radius-md);
+  flex-shrink: 0;
+  color: var(--gy-text-subtle);
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: color var(--gy-duration-fast), background var(--gy-duration-fast);
+  margin-top: -2px;
+}
+
+.gy-toast-close:hover { color: var(--gy-text); background: var(--gy-background-muted); }
+
+.gy-toast-progress {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: var(--gy-primary-muted);
+  border-radius: 0 0 var(--gy-radius-xl) var(--gy-radius-xl);
+}
+
+.gy-toast-progress-bar {
+  height: 100%;
+  background: var(--gy-primary);
+  border-radius: inherit;
+  transform-origin: left;
+  animation: gy-toast-progress linear forwards;
+}
+
+@keyframes gy-toast-progress {
+  from { width: 100%; }
+  to { width: 0%; }
+}

package/src/toggle/Toggle.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React, { forwardRef, useId } from 'react';
+import './toggle.css';
+
+export type ToggleSize = 'sm' | 'md' | 'lg';
+
+export interface ToggleProps {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  label?: React.ReactNode;
+  labelPosition?: 'left' | 'right';
+  size?: ToggleSize;
+  id?: string;
+  name?: string;
+  className?: string;
+}
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(function Toggle(
+  {
+    checked,
+    defaultChecked,
+    onChange,
+    disabled = false,
+    label,
+    labelPosition = 'right',
+    size = 'md',
+    id,
+    name,
+    className = '',
+  },
+  ref
+) {
+  const uid = useId();
+  const inputId = id ?? uid;
+  const isChecked = checked ?? defaultChecked ?? false;
+
+  const track = (
+    <span
+      className={[
+        'gy-toggle-track',
+        `gy-toggle-track--${size}`,
+        isChecked ? 'gy-toggle-track--checked' : '',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      aria-hidden="true"
+    >
+      <span className="gy-toggle-thumb" />
+    </span>
+  );
+
+  const labelEl = label && (
+    <span className="gy-toggle-label">{label}</span>
+  );
+
+  return (
+    <label
+      htmlFor={inputId}
+      className={[
+        'gy-toggle-root',
+        disabled ? 'gy-toggle-root--disabled' : '',
+        className,
+      ]
+        .filter(Boolean)
+        .join(' ')}
+    >
+      <input
+        ref={ref}
+        id={inputId}
+        type="checkbox"
+        role="switch"
+        name={name}
+        checked={checked}
+        defaultChecked={defaultChecked}
+        disabled={disabled}
+        className="gy-toggle-input"
+        aria-checked={isChecked}
+        onChange={(e) => onChange?.(e.target.checked)}
+      />
+      {labelPosition === 'left' && labelEl}
+      {track}
+      {labelPosition === 'right' && labelEl}
+    </label>
+  );
+});

package/src/toggle/index.ts

@@ -0,0 +1,2 @@
+export { Toggle } from './Toggle';
+export type { ToggleProps, ToggleSize } from './Toggle';

package/src/toggle/toggle.css

@@ -0,0 +1,63 @@
+/* ── Toggle / Switch ──────────────────────────────────────────────────────── */
+.gy-toggle-root {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gy-spacing-2-5);
+  cursor: pointer;
+}
+
+.gy-toggle-root--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.gy-toggle-input {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.gy-toggle-track {
+  position: relative;
+  background: var(--gy-border-strong);
+  border-radius: var(--gy-radius-full);
+  transition:
+    background-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    box-shadow var(--gy-duration-fast) var(--gy-ease-in-out);
+}
+
+.gy-toggle-track--sm  { width: 2rem;    height: 1.125rem; }
+.gy-toggle-track--md  { width: 2.5rem;  height: 1.375rem; }
+.gy-toggle-track--lg  { width: 3rem;    height: 1.625rem; }
+
+.gy-toggle-track--checked { background: var(--gy-primary); }
+
+.gy-toggle-input:focus-visible ~ .gy-toggle-label,
+.gy-toggle-root:has(.gy-toggle-input:focus-visible) .gy-toggle-track {
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+}
+
+.gy-toggle-thumb {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) translateX(2px);
+  background: white;
+  border-radius: 50%;
+  box-shadow: var(--gy-shadow-sm);
+  transition: transform var(--gy-duration-normal) var(--gy-ease-spring);
+}
+
+.gy-toggle-track--sm .gy-toggle-thumb  { width: 0.875rem; height: 0.875rem; }
+.gy-toggle-track--md .gy-toggle-thumb  { width: 1.0625rem; height: 1.0625rem; }
+.gy-toggle-track--lg .gy-toggle-thumb  { width: 1.25rem; height: 1.25rem; }
+
+.gy-toggle-track--sm.gy-toggle-track--checked .gy-toggle-thumb  { transform: translateY(-50%) translateX(calc(2rem - 0.875rem - 2px)); }
+.gy-toggle-track--md.gy-toggle-track--checked .gy-toggle-thumb  { transform: translateY(-50%) translateX(calc(2.5rem - 1.0625rem - 2px)); }
+.gy-toggle-track--lg.gy-toggle-track--checked .gy-toggle-thumb  { transform: translateY(-50%) translateX(calc(3rem - 1.25rem - 2px)); }
+
+.gy-toggle-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text);
+}

package/src/typography/Typography.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import React from 'react';
+import './typography.css';
+
+export type TypographyVariant =
+  | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+  | 'body-xl' | 'body-lg' | 'body-md' | 'body-sm' | 'body-xs'
+  | 'caption-lg' | 'caption-md'
+  | 'label' | 'code';
+
+export type TypographyColor =
+  | 'default' | 'muted' | 'subtle' | 'disabled' | 'inverse'
+  | 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+const variantTagMap: Record<TypographyVariant, React.ElementType> = {
+  h1: 'h1', h2: 'h2', h3: 'h3', h4: 'h4', h5: 'h5', h6: 'h6',
+  'body-xl': 'p', 'body-lg': 'p', 'body-md': 'p', 'body-sm': 'p', 'body-xs': 'p',
+  'caption-lg': 'span', 'caption-md': 'span',
+  label: 'label',
+  code: 'code',
+};
+
+export interface TypographyProps {
+  variant?: TypographyVariant;
+  color?: TypographyColor;
+  as?: React.ElementType;
+  truncate?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+  id?: string;
+  htmlFor?: string;
+  style?: React.CSSProperties;
+}
+
+export function Typography({
+  variant = 'body-md',
+  color = 'default',
+  as,
+  truncate = false,
+  className = '',
+  children,
+  ...rest
+}: TypographyProps) {
+  const Tag = as ?? variantTagMap[variant];
+
+  const classes = [
+    'gy-text',
+    `gy-text--${variant}`,
+    `gy-text--color-${color}`,
+    truncate ? 'gy-text--truncate' : '',
+    className,
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  return <Tag className={classes} {...rest}>{children}</Tag>;
+}

package/src/typography/index.ts

@@ -0,0 +1,2 @@
+export { Typography } from './Typography';
+export type { TypographyProps, TypographyVariant, TypographyColor } from './Typography';