@galyan/ui 0.0.1

package/src/input/Input.tsx

@@ -0,0 +1,121 @@
+'use client';
+
+import React, { forwardRef, useId } from 'react';
+import './input.css';
+
+export type InputSize = 'sm' | 'md' | 'lg';
+
+export interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+  label?: string;
+  size?: InputSize;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  clearable?: boolean;
+  onClear?: () => void;
+  required?: boolean;
+  fullWidth?: boolean;
+}
+
+export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  {
+    label,
+    size = 'md',
+    error,
+    helperText,
+    leftIcon,
+    rightIcon,
+    clearable,
+    onClear,
+    required,
+    fullWidth = true,
+    disabled,
+    className = '',
+    id,
+    value,
+    onChange,
+    ...rest
+  },
+  ref
+) {
+  const uid = useId();
+  const inputId = id ?? uid;
+
+  const wrapperClasses = [
+    'gy-input-wrapper',
+    `gy-input-wrapper--${size}`,
+    error ? 'gy-input-wrapper--error' : '',
+    disabled ? 'gy-input-wrapper--disabled' : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
+
+  const showClear = clearable && value && !disabled;
+
+  return (
+    <div className={`gy-input-root ${fullWidth ? '' : 'gy-input-root--inline'} ${className}`}>
+      {label && (
+        <label
+          className={`gy-input-label ${required ? 'gy-input-label--required' : ''}`}
+          htmlFor={inputId}
+        >
+          {label}
+        </label>
+      )}
+
+      <div className={wrapperClasses}>
+        {leftIcon && (
+          <span className="gy-input-addon gy-input-addon--left" aria-hidden="true">
+            {leftIcon}
+          </span>
+        )}
+
+        <input
+          ref={ref}
+          id={inputId}
+          className="gy-input"
+          disabled={disabled}
+          required={required}
+          aria-invalid={!!error}
+          aria-describedby={error ? `${inputId}-error` : helperText ? `${inputId}-helper` : undefined}
+          value={value}
+          onChange={onChange}
+          {...rest}
+        />
+
+        {showClear && (
+          <button
+            type="button"
+            className="gy-input-clear"
+            onClick={onClear}
+            aria-label="Clear input"
+            tabIndex={-1}
+          >
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2">
+              <line x1="1" y1="1" x2="13" y2="13" />
+              <line x1="13" y1="1" x2="1" y2="13" />
+            </svg>
+          </button>
+        )}
+
+        {rightIcon && !showClear && (
+          <span className="gy-input-addon gy-input-addon--right" aria-hidden="true">
+            {rightIcon}
+          </span>
+        )}
+      </div>
+
+      {error && (
+        <span id={`${inputId}-error`} className="gy-input-helper gy-input-helper--error" role="alert">
+          {error}
+        </span>
+      )}
+      {!error && helperText && (
+        <span id={`${inputId}-helper`} className="gy-input-helper">
+          {helperText}
+        </span>
+      )}
+    </div>
+  );
+});

package/src/input/index.ts

@@ -0,0 +1,2 @@
+export { Input } from './Input';
+export type { InputProps, InputSize } from './Input';

package/src/input/input.css

@@ -0,0 +1,120 @@
+/* ── Input Component ──────────────────────────────────────────────────────── */
+.gy-input-root {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-1-5);
+  width: 100%;
+}
+
+.gy-input-label {
+  font-size: var(--gy-font-size-sm);
+  font-weight: var(--gy-font-weight-medium);
+  color: var(--gy-text);
+  display: flex;
+  align-items: center;
+  gap: var(--gy-spacing-1);
+}
+
+.gy-input-label--required::after {
+  content: '*';
+  color: var(--gy-danger);
+  margin-left: 2px;
+}
+
+.gy-input-wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  background: var(--gy-surface);
+  border: 1.5px solid var(--gy-border);
+  border-radius: var(--gy-radius-lg);
+  transition:
+    border-color var(--gy-duration-fast) var(--gy-ease-in-out),
+    box-shadow var(--gy-duration-fast) var(--gy-ease-in-out);
+}
+
+.gy-input-wrapper:focus-within {
+  border-color: var(--gy-border-focus);
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+}
+
+.gy-input-wrapper--error {
+  border-color: var(--gy-danger) !important;
+  box-shadow: none !important;
+}
+
+.gy-input-wrapper--error:focus-within {
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
+}
+
+.gy-input-wrapper--disabled {
+  background: var(--gy-disabled-bg);
+  border-color: var(--gy-disabled-border);
+  cursor: not-allowed;
+}
+
+.gy-input-addon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--gy-text-subtle);
+  flex-shrink: 0;
+}
+
+.gy-input-addon--left  { padding-left: var(--gy-spacing-3); }
+.gy-input-addon--right { padding-right: var(--gy-spacing-3); }
+
+.gy-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: var(--gy-text);
+  font-family: var(--gy-font-sans);
+  width: 100%;
+  min-width: 0;
+}
+
+.gy-input::placeholder { color: var(--gy-text-subtle); }
+
+.gy-input:disabled {
+  cursor: not-allowed;
+  color: var(--gy-text-disabled);
+}
+
+/* Sizes */
+.gy-input-wrapper--sm .gy-input { padding: var(--gy-spacing-1-5) var(--gy-spacing-3); font-size: var(--gy-font-size-sm); }
+.gy-input-wrapper--md .gy-input { padding: var(--gy-spacing-2-5) var(--gy-spacing-3); font-size: var(--gy-font-size-sm); }
+.gy-input-wrapper--lg .gy-input { padding: var(--gy-spacing-3) var(--gy-spacing-4);   font-size: var(--gy-font-size-md); }
+
+.gy-input-wrapper--sm { min-height: 2rem; }
+.gy-input-wrapper--md { min-height: 2.5rem; }
+.gy-input-wrapper--lg { min-height: 3rem; }
+
+/* Left addon spacing fix */
+.gy-input-wrapper .gy-input-addon--left + .gy-input { padding-left: var(--gy-spacing-2); }
+.gy-input-wrapper .gy-input:has(+ .gy-input-addon--right) { padding-right: var(--gy-spacing-2); }
+
+/* Clear button */
+.gy-input-clear {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gy-spacing-1);
+  margin-right: var(--gy-spacing-1);
+  color: var(--gy-text-subtle);
+  border-radius: var(--gy-radius-full);
+  cursor: pointer;
+  transition: color var(--gy-duration-fast), background var(--gy-duration-fast);
+}
+
+.gy-input-clear:hover { color: var(--gy-text); background: var(--gy-background-muted); }
+
+/* Helper / Error text */
+.gy-input-helper {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+  margin-top: var(--gy-spacing-0-5);
+}
+
+.gy-input-helper--error { color: var(--gy-danger); }

package/src/menu/Menu.tsx

@@ -0,0 +1,118 @@
+'use client';
+
+import React, { useEffect, useRef, useState } from 'react';
+import './menu.css';
+
+// ── Tooltip ───────────────────────────────────────────────────────────────────
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+
+export interface TooltipProps {
+  content: React.ReactNode;
+  children: React.ReactElement;
+  position?: TooltipPosition;
+  delay?: number;
+  disabled?: boolean;
+}
+
+export function Tooltip({ content, children, position = 'top', delay = 300, disabled = false }: TooltipProps) {
+  const [visible, setVisible] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
+
+  const show = () => { timerRef.current = setTimeout(() => setVisible(true), delay); };
+  const hide = () => { clearTimeout(timerRef.current); setVisible(false); };
+
+  return (
+    <span className="gy-tooltip-wrapper" onMouseEnter={show} onMouseLeave={hide} onFocus={show} onBlur={hide}>
+      {children}
+      {visible && !disabled && content && (
+        <span className={`gy-tooltip gy-tooltip--${position}`} role="tooltip">
+          {content}
+        </span>
+      )}
+    </span>
+  );
+}
+
+// ── Menu ──────────────────────────────────────────────────────────────────────
+export interface MenuItemDef {
+  id: string;
+  label: React.ReactNode;
+  icon?: React.ReactNode;
+  onClick?: () => void;
+  disabled?: boolean;
+  danger?: boolean;
+  badge?: string;
+  separator?: never;
+  groupLabel?: never;
+}
+
+export interface MenuSeparator { separator: true; id: string; }
+export interface MenuGroupLabel { groupLabel: string; id: string; }
+
+export type MenuEntry = MenuItemDef | MenuSeparator | MenuGroupLabel;
+
+export interface MenuProps {
+  items: MenuEntry[];
+  trigger: React.ReactElement;
+  position?: 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
+  className?: string;
+}
+
+const posStyle: Record<string, React.CSSProperties> = {
+  'bottom-left': { top: 'calc(100% + 4px)', left: 0 },
+  'bottom-right': { top: 'calc(100% + 4px)', right: 0 },
+  'top-left': { bottom: 'calc(100% + 4px)', left: 0 },
+  'top-right': { bottom: 'calc(100% + 4px)', right: 0 },
+};
+
+export function Menu({ items, trigger, position = 'bottom-left', className = '' }: MenuProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  return (
+    <div ref={rootRef} className="gy-menu-trigger" style={{ position: 'relative' }}>
+      {React.cloneElement(trigger as React.ReactElement<any>, { onClick: () => setOpen((o) => !o) })}
+      {open && (
+        <div className={`gy-menu gy-menu--absolute ${className}`} style={posStyle[position]} role="menu">
+          {items.map((entry) => {
+            if ('separator' in entry && entry.separator) {
+              return <div key={entry.id} className="gy-menu-separator" role="separator" />;
+            }
+            if ('groupLabel' in entry && entry.groupLabel) {
+              return <div key={entry.id} className="gy-menu-group-label">{entry.groupLabel}</div>;
+            }
+            const item = entry as MenuItemDef;
+            return (
+              <button
+                key={item.id}
+                type="button"
+                className={[
+                  'gy-menu-item',
+                  item.danger ? 'gy-menu-item--danger' : '',
+                  item.disabled ? 'gy-menu-item--disabled' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+                role="menuitem"
+                disabled={item.disabled}
+                onClick={() => { item.onClick?.(); setOpen(false); }}
+              >
+                {item.icon && <span className="gy-menu-item__icon" aria-hidden="true">{item.icon}</span>}
+                {item.label}
+                {item.badge && <span className="gy-menu-item__badge">{item.badge}</span>}
+              </button>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/menu/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip, Menu } from './Menu';
+export type { TooltipProps, TooltipPosition, MenuProps, MenuItemDef, MenuEntry } from './Menu';

package/src/menu/menu.css

@@ -0,0 +1,117 @@
+/* ── Tooltip ─────────────────────────────────────────────────────────────── */
+.gy-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+}
+
+.gy-tooltip {
+  position: absolute;
+  z-index: var(--gy-z-tooltip);
+  background: var(--gy-text);
+  color: var(--gy-text-inverse);
+  font-size: var(--gy-font-size-xs);
+  font-weight: var(--gy-font-weight-medium);
+  padding: var(--gy-spacing-1-5) var(--gy-spacing-2-5);
+  border-radius: var(--gy-radius-md);
+  white-space: nowrap;
+  pointer-events: none;
+  box-shadow: var(--gy-shadow-sm);
+  animation: gy-fade-in var(--gy-duration-fast) var(--gy-ease-out);
+  max-width: 240px;
+  word-wrap: break-word;
+  white-space: normal;
+  text-align: center;
+  line-height: 1.4;
+}
+
+/* Arrow */
+.gy-tooltip::after {
+  content: '';
+  position: absolute;
+  border: 5px solid transparent;
+}
+
+.gy-tooltip--top { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
+.gy-tooltip--top::after { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--gy-text); }
+
+.gy-tooltip--bottom { top: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
+.gy-tooltip--bottom::after { bottom: 100%; left: 50%; transform: translateX(-50%); border-bottom-color: var(--gy-text); }
+
+.gy-tooltip--left { right: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
+.gy-tooltip--left::after { left: 100%; top: 50%; transform: translateY(-50%); border-left-color: var(--gy-text); }
+
+.gy-tooltip--right { left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
+.gy-tooltip--right::after { right: 100%; top: 50%; transform: translateY(-50%); border-right-color: var(--gy-text); }
+
+/* ── Menu ────────────────────────────────────────────────────────────────── */
+.gy-menu {
+  background: var(--gy-surface);
+  border: 1px solid var(--gy-border);
+  border-radius: var(--gy-radius-xl);
+  box-shadow: var(--gy-shadow-dropdown);
+  padding: var(--gy-spacing-1) 0;
+  min-width: 180px;
+  z-index: var(--gy-z-dropdown);
+  animation: gy-slide-in-up var(--gy-duration-fast) var(--gy-ease-out);
+}
+
+.gy-menu--absolute {
+  position: absolute;
+}
+
+.gy-menu-item {
+  display: flex;
+  align-items: center;
+  gap: var(--gy-spacing-2-5);
+  padding: var(--gy-spacing-2) var(--gy-spacing-4);
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  cursor: pointer;
+  transition: background-color var(--gy-duration-fast);
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  border-radius: 0;
+}
+
+.gy-menu-item:hover { background: var(--gy-background-subtle); }
+.gy-menu-item:focus-visible { outline: none; background: var(--gy-background-muted); }
+
+.gy-menu-item--danger { color: var(--gy-danger); }
+.gy-menu-item--danger:hover { background: var(--gy-danger-subtle); }
+
+.gy-menu-item--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+
+.gy-menu-item__icon {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--gy-text-subtle);
+}
+
+.gy-menu-item--danger .gy-menu-item__icon { color: var(--gy-danger); }
+
+.gy-menu-item__badge {
+  margin-left: auto;
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+}
+
+.gy-menu-separator {
+  height: 1px;
+  background: var(--gy-divider);
+  margin: var(--gy-spacing-1) 0;
+}
+
+.gy-menu-group-label {
+  padding: var(--gy-spacing-2) var(--gy-spacing-4) var(--gy-spacing-1);
+  font-size: var(--gy-font-size-xs);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text-subtle);
+  letter-spacing: var(--gy-letter-spacing-wider);
+  text-transform: uppercase;
+}
+
+/* Context menu trigger */
+.gy-menu-trigger { position: relative; display: inline-flex; }

package/src/modal/Modal.tsx

@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useEffect, useRef } from 'react';
+import { createPortal } from 'react-dom';
+import './modal.css';
+
+export type ModalSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+
+export interface ModalProps {
+  open: boolean;
+  onClose: () => void;
+  title?: React.ReactNode;
+  size?: ModalSize;
+  children?: React.ReactNode;
+  footer?: React.ReactNode;
+  closeOnBackdrop?: boolean;
+  closeOnEscape?: boolean;
+  className?: string;
+}
+
+export function Modal({
+  open,
+  onClose,
+  title,
+  size = 'md',
+  children,
+  footer,
+  closeOnBackdrop = true,
+  closeOnEscape = true,
+  className = '',
+}: ModalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+
+  // Focus trap and keyboard handling
+  useEffect(() => {
+    if (!open) return;
+
+    const previous = document.activeElement as HTMLElement;
+    dialogRef.current?.focus();
+
+    const handleKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && closeOnEscape) onClose();
+      if (e.key === 'Tab') {
+        const focusable = dialogRef.current?.querySelectorAll<HTMLElement>(
+          'a, button:not(:disabled), textarea, input, select, [tabindex]:not([tabindex="-1"])'
+        );
+        if (!focusable?.length) return;
+        const first = focusable[0]!;
+        const last = focusable[focusable.length - 1]!;
+        if (e.shiftKey && document.activeElement === first) {
+          e.preventDefault();
+          last.focus();
+        } else if (!e.shiftKey && document.activeElement === last) {
+          e.preventDefault();
+          first.focus();
+        }
+      }
+    };
+
+    document.addEventListener('keydown', handleKey);
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.removeEventListener('keydown', handleKey);
+      document.body.style.overflow = '';
+      previous?.focus();
+    };
+  }, [open, onClose, closeOnEscape]);
+
+  if (!open) return null;
+
+  const content = (
+    <div
+      className="gy-modal-backdrop"
+      onClick={closeOnBackdrop ? (e) => { if (e.target === e.currentTarget) onClose(); } : undefined}
+      aria-modal="true"
+    >
+      <div
+        ref={dialogRef}
+        role="dialog"
+        aria-labelledby={title ? 'gy-modal-title' : undefined}
+        className={`gy-modal gy-modal--${size} ${className}`}
+        tabIndex={-1}
+      >
+        {title && (
+          <div className="gy-modal-header">
+            <h2 id="gy-modal-title" className="gy-modal-title">{title}</h2>
+            <button className="gy-modal-close" onClick={onClose} aria-label="Close dialog">
+              <svg width="16" height="16" viewBox="0 0 16 16" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+                <line x1="1" y1="1" x2="15" y2="15" />
+                <line x1="15" y1="1" x2="1" y2="15" />
+              </svg>
+            </button>
+          </div>
+        )}
+        <div className="gy-modal-body">{children}</div>
+        {footer && <div className="gy-modal-footer">{footer}</div>}
+      </div>
+    </div>
+  );
+
+  return createPortal(content, document.body);
+}

package/src/modal/index.ts

@@ -0,0 +1,2 @@
+export { Modal } from './Modal';
+export type { ModalProps, ModalSize } from './Modal';

package/src/modal/modal.css

@@ -0,0 +1,79 @@
+/* ── Modal ────────────────────────────────────────────────────────────────── */
+.gy-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: var(--gy-overlay);
+  backdrop-filter: blur(4px);
+  z-index: var(--gy-z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--gy-spacing-4);
+  animation: gy-fade-in var(--gy-duration-normal) var(--gy-ease-out);
+}
+
+.gy-modal {
+  background: var(--gy-surface);
+  border-radius: var(--gy-radius-2xl);
+  box-shadow: var(--gy-shadow-modal);
+  display: flex;
+  flex-direction: column;
+  max-height: calc(100vh - 2rem);
+  width: 100%;
+  animation: gy-zoom-in var(--gy-duration-normal) var(--gy-ease-spring);
+  outline: none;
+}
+
+.gy-modal--xs  { max-width: 20rem; }
+.gy-modal--sm  { max-width: 28rem; }
+.gy-modal--md  { max-width: 36rem; }
+.gy-modal--lg  { max-width: 48rem; }
+.gy-modal--xl  { max-width: 64rem; }
+.gy-modal--full { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); }
+
+.gy-modal-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--gy-spacing-5) var(--gy-spacing-6);
+  border-bottom: 1px solid var(--gy-border);
+  flex-shrink: 0;
+}
+
+.gy-modal-title {
+  font-size: var(--gy-font-size-lg);
+  font-weight: var(--gy-font-weight-semibold);
+  color: var(--gy-text);
+}
+
+.gy-modal-close {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2rem;
+  height: 2rem;
+  border-radius: var(--gy-radius-md);
+  color: var(--gy-text-subtle);
+  cursor: pointer;
+  background: none;
+  border: none;
+  transition: color var(--gy-duration-fast), background var(--gy-duration-fast);
+}
+
+.gy-modal-close:hover { color: var(--gy-text); background: var(--gy-background-muted); }
+
+.gy-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--gy-spacing-6);
+}
+
+.gy-modal-footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--gy-spacing-3);
+  padding: var(--gy-spacing-4) var(--gy-spacing-6);
+  border-top: 1px solid var(--gy-border);
+  flex-shrink: 0;
+}