@galyan/ui 0.0.1 → 0.0.2

package/src/textarea/Textarea.tsx

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

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

package/src/textarea/textarea.css

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

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

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

package/src/toaster/toaster.css

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

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

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

package/src/toggle/toggle.css

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

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

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