@galyan/ui 0.0.1 → 0.0.2

package/src/dropdown/Dropdown.tsx

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

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

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

package/src/fileupload/FileUpload.tsx

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

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

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

package/src/index.ts

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