@galyan/ui 0.0.1

package/src/dropdown/Dropdown.tsx

@@ -0,0 +1,176 @@
+'use client';
+
+import React, { useEffect, useId, useRef, useState } from 'react';
+import './dropdown.css';
+
+export interface DropdownOption {
+  value: string;
+  label: React.ReactNode;
+  disabled?: boolean;
+  group?: string;
+  icon?: React.ReactNode;
+}
+
+export interface DropdownProps {
+  options: DropdownOption[];
+  value?: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  searchable?: boolean;
+  disabled?: boolean;
+  label?: string;
+  error?: string;
+  className?: string;
+  id?: string;
+}
+
+export function Dropdown({
+  options,
+  value,
+  onChange,
+  placeholder = 'Select an option',
+  searchable = false,
+  disabled = false,
+  label,
+  error,
+  className = '',
+  id,
+}: DropdownProps) {
+  const uid = useId();
+  const inputId = id ?? uid;
+  const [open, setOpen] = useState(false);
+  const [search, setSearch] = useState('');
+  const [focused, setFocused] = useState(0);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const selected = options.find((o) => o.value === value);
+
+  const filtered = searchable && search
+    ? options.filter((o) => String(o.label).toLowerCase().includes(search.toLowerCase()))
+    : options;
+
+  // Group options
+  const groups = filtered.reduce<Record<string, DropdownOption[]>>((acc, opt) => {
+    const g = opt.group ?? '__default__';
+    acc[g] = [...(acc[g] ?? []), opt];
+    return acc;
+  }, {});
+
+  useEffect(() => {
+    if (!open) { setSearch(''); setFocused(0); return; }
+    if (searchable) setTimeout(() => searchRef.current?.focus(), 50);
+  }, [open, searchable]);
+
+  // Close on outside click
+  useEffect(() => {
+    const handler = (e: MouseEvent) => {
+      if (!rootRef.current?.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', handler);
+    return () => document.removeEventListener('mousedown', handler);
+  }, []);
+
+  const handleSelect = (opt: DropdownOption) => {
+    if (opt.disabled) return;
+    onChange?.(opt.value);
+    setOpen(false);
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    const flat = filtered.filter((o) => !o.disabled);
+    if (e.key === 'ArrowDown') { e.preventDefault(); setFocused((f) => Math.min(f + 1, flat.length - 1)); }
+    if (e.key === 'ArrowUp') { e.preventDefault(); setFocused((f) => Math.max(f - 1, 0)); }
+    if (e.key === 'Enter' && open) { e.preventDefault(); const opt = flat[focused]; if (opt) handleSelect(opt); }
+    if (e.key === 'Escape') setOpen(false);
+    if (!open && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); setOpen(true); }
+  };
+
+  return (
+    <div ref={rootRef} className={`gy-dropdown-root ${className}`} onKeyDown={handleKeyDown}>
+      {label && <label className="gy-input-label" htmlFor={inputId}>{label}</label>}
+
+      <button
+        id={inputId}
+        type="button"
+        className={[
+          'gy-dropdown-trigger',
+          open ? 'gy-dropdown-trigger--open' : '',
+          disabled ? 'gy-dropdown-trigger--disabled' : '',
+          !selected ? 'gy-dropdown-trigger--placeholder' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        onClick={() => !disabled && setOpen((o) => !o)}
+        disabled={disabled}
+        aria-expanded={open}
+        aria-haspopup="listbox"
+      >
+        <span>{selected ? selected.label : placeholder}</span>
+        <span className={`gy-dropdown-chevron ${open ? 'gy-dropdown-chevron--open' : ''}`} aria-hidden="true">
+          <svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+            <polyline points="3,5 7,9 11,5" />
+          </svg>
+        </span>
+      </button>
+
+      {open && (
+        <div className="gy-dropdown-menu" role="listbox">
+          {searchable && (
+            <div className="gy-dropdown-search">
+              <input
+                ref={searchRef}
+                className="gy-dropdown-search-input"
+                value={search}
+                onChange={(e) => { setSearch(e.target.value); setFocused(0); }}
+                placeholder="Search..."
+                aria-label="Search options"
+              />
+            </div>
+          )}
+          <div className="gy-dropdown-options">
+            {filtered.length === 0 ? (
+              <div className="gy-dropdown-empty">No options found</div>
+            ) : (
+              Object.entries(groups).map(([group, opts]) => (
+                <div key={group}>
+                  {group !== '__default__' && (
+                    <div className="gy-dropdown-group-label">{group}</div>
+                  )}
+                  {opts.map((opt, i) => (
+                    <div
+                      key={opt.value}
+                      className={[
+                        'gy-dropdown-option',
+                        opt.value === value ? 'gy-dropdown-option--selected' : '',
+                        focused === i ? 'gy-dropdown-option--focused' : '',
+                        opt.disabled ? 'gy-dropdown-option--disabled' : '',
+                      ]
+                        .filter(Boolean)
+                        .join(' ')}
+                      role="option"
+                      aria-selected={opt.value === value}
+                      onClick={() => handleSelect(opt)}
+                    >
+                      {opt.icon && <span aria-hidden="true">{opt.icon}</span>}
+                      {opt.label}
+                      {opt.value === value && (
+                        <span className="gy-dropdown-check" aria-hidden="true">
+                          <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>
+                        </span>
+                      )}
+                    </div>
+                  ))}
+                </div>
+              ))
+            )}
+          </div>
+        </div>
+      )}
+
+      {error && <span className="gy-input-helper gy-input-helper--error" role="alert">{error}</span>}
+    </div>
+  );
+}

package/src/dropdown/dropdown.css

@@ -0,0 +1,118 @@
+/* ── Dropdown / Select ───────────────────────────────────────────────────── */
+.gy-dropdown-root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-1-5);
+  width: 100%;
+}
+
+.gy-dropdown-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--gy-spacing-2);
+  padding: var(--gy-spacing-2-5) var(--gy-spacing-3);
+  background: var(--gy-surface);
+  border: 1.5px solid var(--gy-border);
+  border-radius: var(--gy-radius-lg);
+  cursor: pointer;
+  transition: border-color var(--gy-duration-fast), box-shadow var(--gy-duration-fast);
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  min-height: 2.5rem;
+  text-align: left;
+}
+
+.gy-dropdown-trigger:focus, .gy-dropdown-trigger--open {
+  border-color: var(--gy-border-focus);
+  box-shadow: 0 0 0 3px var(--gy-focus-ring);
+  outline: none;
+}
+
+.gy-dropdown-trigger--disabled { opacity: 0.5; cursor: not-allowed; }
+.gy-dropdown-trigger--placeholder { color: var(--gy-text-subtle); }
+
+.gy-dropdown-chevron {
+  flex-shrink: 0;
+  color: var(--gy-text-subtle);
+  transition: transform var(--gy-duration-normal) var(--gy-ease-spring);
+}
+
+.gy-dropdown-chevron--open { transform: rotate(180deg); }
+
+.gy-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  background: var(--gy-surface);
+  border: 1px solid var(--gy-border);
+  border-radius: var(--gy-radius-xl);
+  box-shadow: var(--gy-shadow-dropdown);
+  z-index: var(--gy-z-dropdown);
+  overflow: hidden;
+  animation: gy-slide-in-up var(--gy-duration-fast) var(--gy-ease-out);
+}
+
+.gy-dropdown-search {
+  padding: var(--gy-spacing-2) var(--gy-spacing-3);
+  border-bottom: 1px solid var(--gy-border);
+}
+
+.gy-dropdown-search-input {
+  width: 100%;
+  padding: var(--gy-spacing-1-5) var(--gy-spacing-2);
+  font-size: var(--gy-font-size-sm);
+  border: 1px solid var(--gy-border);
+  border-radius: var(--gy-radius-md);
+  background: var(--gy-background-subtle);
+  color: var(--gy-text);
+  outline: none;
+  font-family: var(--gy-font-sans);
+}
+
+.gy-dropdown-search-input:focus { border-color: var(--gy-border-focus); }
+
+.gy-dropdown-options {
+  max-height: 200px;
+  overflow-y: auto;
+  padding: var(--gy-spacing-1) 0;
+}
+
+.gy-dropdown-group-label {
+  padding: var(--gy-spacing-2) var(--gy-spacing-3) 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;
+}
+
+.gy-dropdown-option {
+  display: flex;
+  align-items: center;
+  gap: var(--gy-spacing-2);
+  padding: var(--gy-spacing-2) var(--gy-spacing-3);
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  cursor: pointer;
+  transition: background-color var(--gy-duration-fast);
+}
+
+.gy-dropdown-option:hover { background: var(--gy-background-subtle); }
+.gy-dropdown-option--selected { color: var(--gy-primary); font-weight: var(--gy-font-weight-medium); background: var(--gy-primary-subtle); }
+.gy-dropdown-option--focused  { background: var(--gy-background-muted); }
+.gy-dropdown-option--disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
+
+.gy-dropdown-check {
+  margin-left: auto;
+  color: var(--gy-primary);
+}
+
+.gy-dropdown-empty {
+  padding: var(--gy-spacing-3);
+  text-align: center;
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text-subtle);
+}

package/src/dropdown/index.ts

@@ -0,0 +1,2 @@
+export { Dropdown } from './Dropdown';
+export type { DropdownProps, DropdownOption } from './Dropdown';

package/src/fileupload/FileUpload.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import React, { useRef, useState } from 'react';
+import './fileupload.css';
+
+export interface FileUploadProps {
+  onFilesSelected?: (files: File[]) => void;
+  multiple?: boolean;
+  accept?: string;
+  maxSize?: number; // in bytes
+  maxFiles?: number;
+  disabled?: boolean;
+  label?: string;
+  helperText?: string;
+  className?: string;
+}
+
+const formatSize = (bytes: number) => {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+};
+
+export function FileUpload({
+  onFilesSelected,
+  multiple = false,
+  accept,
+  maxSize,
+  maxFiles,
+  disabled = false,
+  label = 'Click or drag files to upload',
+  helperText,
+  className = '',
+}: FileUploadProps) {
+  const [dragActive, setDragActive] = useState(false);
+  const [selectedFiles, setSelectedFiles] = useState<File[]>([]);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleFiles = (files: FileList | null) => {
+    if (!files) return;
+    const valid = Array.from(files).filter(f => !maxSize || f.size <= maxSize);
+    const newFiles = multiple ? [...selectedFiles, ...valid] : valid;
+    
+    const limited = maxFiles ? newFiles.slice(0, maxFiles) : newFiles;
+    if (!multiple) limited.splice(1);
+
+    setSelectedFiles(limited);
+    onFilesSelected?.(limited);
+  };
+
+  const handleDrag = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (disabled) return;
+    if (e.type === 'dragenter' || e.type === 'dragover') setDragActive(true);
+    else if (e.type === 'dragleave') setDragActive(false);
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragActive(false);
+    if (disabled) return;
+    handleFiles(e.dataTransfer.files);
+  };
+
+  const removeFile = (idx: number) => {
+    const updated = selectedFiles.filter((_, i) => i !== idx);
+    setSelectedFiles(updated);
+    onFilesSelected?.(updated);
+  };
+
+  return (
+    <div className={`gy-fileupload ${className}`}>
+      <div
+        className={[
+          'gy-fileupload-zone',
+          dragActive ? 'gy-fileupload-zone--drag-active' : '',
+          disabled ? 'gy-fileupload-zone--disabled' : '',
+        ]
+          .filter(Boolean)
+          .join(' ')}
+        onClick={() => !disabled && inputRef.current?.click()}
+        onDragEnter={handleDrag}
+        onDragLeave={handleDrag}
+        onDragOver={handleDrag}
+        onDrop={handleDrop}
+      >
+        <input
+          ref={inputRef}
+          type="file"
+          className="gy-fileupload-input"
+          multiple={multiple}
+          accept={accept}
+          disabled={disabled}
+          onChange={(e) => handleFiles(e.target.files)}
+        />
+        <svg className="gy-fileupload-icon" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+          <polyline points="17 8 12 3 7 8"></polyline>
+          <line x1="12" y1="3" x2="12" y2="15"></line>
+        </svg>
+        <div className="gy-fileupload-text">{label}</div>
+        {(helperText || maxSize) && (
+          <div className="gy-fileupload-subtext">
+            {helperText} {maxSize && `(Max ${formatSize(maxSize)})`}
+          </div>
+        )}
+      </div>
+
+      {selectedFiles.length > 0 && (
+        <div className="gy-fileupload-list">
+          {selectedFiles.map((f, i) => (
+            <div key={`${f.name}-${i}`} className="gy-fileupload-item">
+              <div className="gy-fileupload-item-icon">
+                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path>
+                  <polyline points="13 2 13 9 20 9"></polyline>
+                </svg>
+              </div>
+              <div className="gy-fileupload-item-info">
+                <span className="gy-fileupload-item-name" title={f.name}>{f.name}</span>
+                <span className="gy-fileupload-item-size">{formatSize(f.size)}</span>
+              </div>
+              <button
+                type="button"
+                className="gy-fileupload-item-remove"
+                onClick={(e) => { e.stopPropagation(); removeFile(i); }}
+                aria-label="Remove file"
+              >
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                  <line x1="18" y1="6" x2="6" y2="18"></line>
+                  <line x1="6" y1="6" x2="18" y2="18"></line>
+                </svg>
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/fileupload/fileupload.css

@@ -0,0 +1,118 @@
+/* ── FileUpload ──────────────────────────────────────────────────────────── */
+.gy-fileupload {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-2);
+  width: 100%;
+}
+
+.gy-fileupload-zone {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--gy-spacing-2);
+  padding: var(--gy-spacing-8) var(--gy-spacing-4);
+  background: var(--gy-surface);
+  border: 2px dashed var(--gy-border-strong);
+  border-radius: var(--gy-radius-xl);
+  cursor: pointer;
+  transition: all var(--gy-duration-normal) var(--gy-ease-out);
+  text-align: center;
+}
+
+.gy-fileupload-zone:hover, .gy-fileupload-zone--drag-active {
+  background: var(--gy-primary-subtle);
+  border-color: var(--gy-primary);
+}
+
+.gy-fileupload-zone--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.gy-fileupload-icon {
+  color: var(--gy-primary);
+  opacity: 0.8;
+  margin-bottom: var(--gy-spacing-2);
+}
+
+.gy-fileupload-text {
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  font-weight: var(--gy-font-weight-medium);
+}
+
+.gy-fileupload-subtext {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+}
+
+.gy-fileupload-input {
+  display: none;
+}
+
+/* File list */
+.gy-fileupload-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gy-spacing-2);
+  margin-top: var(--gy-spacing-2);
+}
+
+.gy-fileupload-item {
+  display: flex;
+  align-items: center;
+  gap: var(--gy-spacing-3);
+  padding: var(--gy-spacing-2) var(--gy-spacing-3);
+  background: var(--gy-surface);
+  border: 1px solid var(--gy-border);
+  border-radius: var(--gy-radius-lg);
+}
+
+.gy-fileupload-item-icon {
+  color: var(--gy-text-subtle);
+  display: flex;
+  align-items: center;
+}
+
+.gy-fileupload-item-info {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.gy-fileupload-item-name {
+  font-size: var(--gy-font-size-sm);
+  color: var(--gy-text);
+  font-weight: var(--gy-font-weight-medium);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gy-fileupload-item-size {
+  font-size: var(--gy-font-size-xs);
+  color: var(--gy-text-subtle);
+}
+
+.gy-fileupload-item-remove {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.5rem;
+  height: 1.5rem;
+  border-radius: var(--gy-radius-md);
+  color: var(--gy-text-subtle);
+  background: none;
+  border: none;
+  cursor: pointer;
+  transition: color var(--gy-duration-fast), background var(--gy-duration-fast);
+}
+
+.gy-fileupload-item-remove:hover {
+  color: var(--gy-danger);
+  background: var(--gy-danger-subtle);
+}

package/src/fileupload/index.ts

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

package/src/index.ts

@@ -0,0 +1,28 @@
+export * from './button/index';
+export * from './typography/index';
+export * from './input/index';
+export * from './textarea/index';
+export * from './checkbox/index';
+export * from './radiogroup/index';
+export * from './toggle/index';
+export * from './chips/index';
+export * from './card/index';
+export * from './spinner/index';
+export * from './progressbar/index';
+export * from './skeleton/index';
+export * from './banner/index';
+export * from './breadcrumb/index';
+export * from './animatednumber/index';
+export * from './accordion/index';
+export * from './tab/index';
+export * from './modal/index';
+export * from './dropdown/index';
+export * from './menu/index';
+export * from './toaster/index';
+export * from './stepper/index';
+export * from './table/index';
+export * from './dragdrop/index';
+export * from './fileupload/index';
+export * from './calendar/index';
+export * from './datepicker/index';
+export * from './chart/index';