@galyan/ui 0.0.1 → 0.0.2

package/src/input/Input.tsx

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

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

package/src/input/input.css

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

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

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

package/src/menu/menu.css

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

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

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

package/src/modal/modal.css

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