auramaxx 0.0.20 → 0.1.1

package/src/components/design-system/Drawer.tsx

@@ -1,133 +0,0 @@
-'use client';
-
-import React, { useEffect, useState } from 'react';
-import { createPortal } from 'react-dom';
-import { X } from 'lucide-react';
-
-interface DrawerProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title: string;
-  subtitle?: string;
-  children: React.ReactNode;
-  width?: 'sm' | 'md' | 'lg' | 'full';
-  footerLabel?: string;
-}
-
-export const Drawer: React.FC<DrawerProps> = ({
-  isOpen,
-  onClose,
-  title,
-  subtitle,
-  children,
-  width = 'md',
-  footerLabel = '',
-}) => {
-  const [shouldRender, setShouldRender] = useState(false);
-  const [isAnimating, setIsAnimating] = useState(false);
-  const [isMounted, setIsMounted] = useState(false);
-
-  useEffect(() => {
-    setIsMounted(true);
-  }, []);
-
-  useEffect(() => {
-    if (isOpen) {
-      setShouldRender(true);
-      // Small delay to ensure DOM is ready before animation
-      requestAnimationFrame(() => {
-        requestAnimationFrame(() => {
-          setIsAnimating(true);
-        });
-      });
-    } else {
-      setIsAnimating(false);
-      // Wait for exit animation to complete
-      const timer = setTimeout(() => {
-        setShouldRender(false);
-      }, 200);
-      return () => clearTimeout(timer);
-    }
-  }, [isOpen]);
-
-  // Close on escape
-  useEffect(() => {
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') onClose();
-    };
-    if (isOpen) {
-      window.addEventListener('keydown', handleEscape);
-    }
-    return () => window.removeEventListener('keydown', handleEscape);
-  }, [isOpen, onClose]);
-
-  const widthStyles = {
-    sm: 'min(100vw, calc(320px * var(--ui-scale-factor, 1)))',
-    md: 'min(100vw, calc(400px * var(--ui-scale-factor, 1)))',
-    lg: 'min(100vw, calc(520px * var(--ui-scale-factor, 1)))',
-    full: '100vw',
-  };
-
-  if (!shouldRender || !isMounted) return null;
-
-  const drawerContent = (
-    <div
-      className="fixed inset-0 z-[110]"
-      onMouseDown={onClose}
-      data-testid="drawer-backdrop"
-    >
-      <div className="absolute inset-0 bg-black/10" />
-      <div
-        className="absolute right-0 top-0 h-full overflow-hidden"
-        style={{ width: widthStyles[width] }}
-        onMouseDown={(event) => event.stopPropagation()}
-      >
-        <div
-          className={`
-            h-full bg-[var(--color-surface,#ffffff)] flex flex-col clip-specimen border-mech shadow-mech
-            transition-transform duration-200 ease-out
-            ${isAnimating ? 'translate-x-0' : 'translate-x-full'}
-          `}
-        >
-          {/* Header — hazard accent + specimen label */}
-          <div className="relative border-b border-[var(--color-border,#d4d4d8)]">
-            <div className="absolute top-0 left-0 right-0 h-[2px] bg-hazard-stripes" />
-            <div className="px-[var(--space-4)] pt-[var(--space-3)] pb-[var(--space-2)]">
-              <div className="flex items-start justify-between">
-                <div>
-                  <span className="label-specimen-sm text-[var(--color-text-muted,#6b7280)]">{subtitle || 'PANEL'}</span>
-                  <h2 className="font-mono font-bold text-[length:var(--font-size-md)] text-[var(--color-text,#0a0a0a)] tracking-tight mt-[2px]">{title}</h2>
-                </div>
-                <button
-                  onClick={onClose}
-                  aria-label="Close drawer"
-                  className="p-[var(--space-1)] hover:bg-[var(--color-background-alt,#f4f4f5)] transition-colors group -mr-[var(--space-1)]"
-                >
-                  <X
-                    className="text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] transition-colors"
-                    style={{ width: 'var(--font-size-md)', height: 'var(--font-size-md)' }}
-                  />
-                </button>
-              </div>
-            </div>
-          </div>
-
-          {/* Content */}
-          <div className="flex-1 overflow-y-auto p-[var(--space-4)]">
-            {children}
-          </div>
-
-          {/* Footer — barcode strip */}
-          <div className="px-[var(--space-4)] py-[var(--space-2)] border-t border-[var(--color-border,#d4d4d8)]">
-            <div className="flex items-center justify-between">
-              <span className="label-specimen-sm text-[var(--color-text-faint,#9ca3af)]">{footerLabel || ''}</span>
-              <span className="font-mono text-[8px] text-[var(--color-text-faint,#9ca3af)] tracking-[0.3em]">|||||||||||</span>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-
-  return createPortal(drawerContent, document.body);
-};

package/src/components/design-system/FilterDropdown.tsx

@@ -1,183 +0,0 @@
-'use client';
-
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { ChevronDown } from 'lucide-react';
-
-interface FilterDropdownProps {
-  options: ReadonlyArray<{ value: string; label: string }>;
-  value: string;
-  onChange: (value: string) => void;
-  label?: string;
-  compact?: boolean;
-  disabled?: boolean;
-  ariaLabel?: string;
-  searchable?: boolean;
-  searchPlaceholder?: string;
-  emptyMessage?: string;
-  menuPosition?: 'auto' | 'top' | 'bottom';
-}
-
-export const FilterDropdown: React.FC<FilterDropdownProps> = ({
-  options,
-  value,
-  onChange,
-  label,
-  compact = false,
-  disabled = false,
-  ariaLabel,
-  searchable = false,
-  searchPlaceholder = 'Search...',
-  emptyMessage = 'No options found',
-  menuPosition = 'auto',
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const [openUpward, setOpenUpward] = useState(false);
-  const [menuMaxHeight, setMenuMaxHeight] = useState(192);
-  const [searchQuery, setSearchQuery] = useState('');
-  const triggerRef = useRef<HTMLButtonElement>(null);
-  const searchInputRef = useRef<HTMLInputElement>(null);
-  const selectedOption = options.find(opt => opt.value === value);
-
-  const filteredOptions = useMemo(() => {
-    if (!searchable) return options;
-    const needle = searchQuery.trim().toLowerCase();
-    if (!needle) return options;
-    return options.filter((option) => (
-      option.label.toLowerCase().includes(needle)
-      || option.value.toLowerCase().includes(needle)
-    ));
-  }, [options, searchQuery, searchable]);
-
-  useEffect(() => {
-    if (!isOpen) {
-      setSearchQuery('');
-      return;
-    }
-    if (searchable) {
-      requestAnimationFrame(() => {
-        searchInputRef.current?.focus();
-      });
-    }
-  }, [isOpen, searchable]);
-
-  const openMenu = () => {
-    const rect = triggerRef.current?.getBoundingClientRect();
-    const scale = Number.parseFloat(
-      window.getComputedStyle(document.documentElement).getPropertyValue('--ui-scale-factor'),
-    ) || 1;
-    if (rect) {
-      const viewportPadding = Math.round(12 * scale);
-      const desiredHeight = Math.round(192 * scale);
-      const spaceBelow = Math.max(0, window.innerHeight - rect.bottom - viewportPadding);
-      const spaceAbove = Math.max(0, rect.top - viewportPadding);
-      const shouldOpenUpward = menuPosition === 'top'
-        ? true
-        : menuPosition === 'bottom'
-          ? false
-          : spaceBelow < desiredHeight && spaceAbove > spaceBelow;
-      const available = shouldOpenUpward ? spaceAbove : spaceBelow;
-      setOpenUpward(shouldOpenUpward);
-      setMenuMaxHeight(Math.max(0, Math.floor(Math.min(desiredHeight, available))));
-    } else {
-      setOpenUpward(menuPosition === 'top');
-      setMenuMaxHeight(Math.round(192 * scale));
-    }
-    setIsOpen(true);
-  };
-
-  return (
-    <div className={`relative w-full group ${isOpen ? 'z-50' : 'z-20'}`}>
-      {label && (
-        <label className="block text-[length:var(--font-size-xs)] font-mono font-bold uppercase tracking-widest text-[var(--color-text-muted,#6b7280)] mb-[var(--space-1)] px-[var(--space-1)] pointer-events-none">
-          {label}
-        </label>
-      )}
-      <button
-        ref={triggerRef}
-        type="button"
-        aria-label={ariaLabel}
-        disabled={disabled}
-        onClick={() => {
-          if (disabled) return;
-          if (isOpen) {
-            setIsOpen(false);
-            return;
-          }
-          openMenu();
-        }}
-        className={`
-            w-full ${compact ? 'h-[var(--control-height-sm)] text-[length:var(--font-size-xs)]' : 'h-[calc(var(--control-height-lg)+var(--space-2))] text-[length:var(--font-size-md)]'} flex items-center justify-between px-[var(--space-3)] outline-none
-            bg-[var(--color-background-alt,#f4f4f5)] border font-mono font-bold tracking-wider text-[var(--color-text,#0a0a0a)]
-            transition-all duration-200
-            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
-            ${isOpen
-            ? 'border-[var(--color-border-focus,#0a0a0a)] bg-[var(--color-surface,#ffffff)] shadow-[0_0_0_1px_var(--color-border-muted,#a1a1aa)]'
-            : 'border-[var(--color-border,#d4d4d8)] hover:border-[var(--color-border-muted,#a1a1aa)] hover:bg-[var(--color-surface,#ffffff)]'
-          }
-        `}
-      >
-        <span className="min-w-0 flex-1 truncate text-left">{selectedOption?.label || 'SELECT'}</span>
-        <ChevronDown
-          className={`shrink-0 transform transition-transform text-[var(--color-text-muted,#6b7280)] group-hover:text-[var(--color-text,#0a0a0a)] ${isOpen ? 'rotate-180 text-[var(--color-text,#0a0a0a)]' : ''}`}
-          style={{ width: 'var(--font-size-md)', height: 'var(--font-size-md)' }}
-        />
-      </button>
-
-      {isOpen && !disabled && (
-        <>
-          <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
-          <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)] pointer-events-none z-30" />
-        </>
-      )}
-
-      {isOpen && !disabled && (
-        <>
-          <div className="fixed inset-0 z-40" onClick={() => setIsOpen(false)} />
-          <div
-            className={`absolute left-0 w-full bg-[var(--color-surface,#ffffff)] border border-[var(--color-border-focus,#0a0a0a)] shadow-[0_0_0_1px_var(--color-border-muted,#a1a1aa)] overflow-y-auto z-50 ${openUpward ? 'bottom-full mb-[var(--space-1)]' : 'top-full mt-[var(--space-1)]'}`}
-            style={{ maxHeight: `${menuMaxHeight}px` }}
-          >
-            {searchable && (
-              <div className="sticky top-0 bg-[var(--color-surface,#ffffff)] border-b border-[var(--color-border-muted,#e5e5e5)] p-[var(--space-2)]">
-                <input
-                  ref={searchInputRef}
-                  value={searchQuery}
-                  onChange={(event) => setSearchQuery(event.target.value)}
-                  placeholder={searchPlaceholder}
-                  className="w-full h-[var(--control-height-sm)] px-[var(--space-2)] border border-[var(--color-border,#d4d4d8)] font-mono text-[length:var(--font-size-xs)] text-[var(--color-text,#0a0a0a)] bg-[var(--color-background-alt,#f4f4f5)] focus:outline-none focus:border-[var(--color-border-focus,#0a0a0a)]"
-                  onKeyDown={(event) => {
-                    if (event.key === 'Escape') {
-                      event.preventDefault();
-                      setIsOpen(false);
-                    }
-                  }}
-                />
-              </div>
-            )}
-
-            {filteredOptions.length === 0 ? (
-              <div className="px-[var(--space-3)] py-[var(--space-3)] text-[var(--color-text-faint,#9ca3af)] font-mono text-[length:var(--font-size-xs)]">
-                {emptyMessage}
-              </div>
-            ) : (
-              filteredOptions.map((opt) => (
-                <button
-                  key={opt.value}
-                  type="button"
-                  onClick={() => {
-                    onChange(opt.value);
-                    setIsOpen(false);
-                  }}
-                  className={`w-full text-left px-[var(--space-3)] py-[var(--space-2)] text-[var(--color-text-muted,#6b7280)] hover:text-[var(--color-text,#0a0a0a)] hover:bg-[var(--color-background-alt,#f4f4f5)] font-mono ${compact ? 'text-[length:var(--font-size-xs)]' : 'text-[length:var(--font-size-sm)]'} border-b border-[var(--color-border-muted,#e5e5e5)] last:border-0 flex items-center gap-[var(--space-2)] group/item`}
-                >
-                  <div className={`w-1.5 h-1.5 flex-shrink-0 ${opt.value === value ? 'bg-[var(--color-text,#0a0a0a)]' : 'bg-[var(--color-border,#d4d4d8)] group-hover/item:bg-[var(--color-text,#0a0a0a)]'}`} />
-                  <span className="min-w-0 flex-1 truncate">{opt.label}</span>
-                </button>
-              ))
-            )}
-          </div>
-        </>
-      )}
-    </div>
-  );
-};

package/src/components/design-system/ItemPicker.tsx

@@ -1,157 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Check } from 'lucide-react';
-
-export interface ItemPickerOption {
-  value: string;
-  label: string;
-  description?: string;
-  icon?: React.ReactNode;
-  quickActionLabel?: string;
-  onQuickAction?: () => void;
-}
-
-interface ItemPickerProps {
-  options: ItemPickerOption[];
-  value: string | string[];
-  onChange: (value: any) => void;
-  multi?: boolean;
-  className?: string;
-  disabled?: boolean;
-  ariaLabel?: string;
-}
-
-export const ItemPicker: React.FC<ItemPickerProps> = ({
-  options,
-  value,
-  onChange,
-  multi = false,
-  className = '',
-  disabled = false,
-  ariaLabel,
-}) => {
-  const isSelected = (optionValue: string) => {
-    if (multi && Array.isArray(value)) {
-      return value.includes(optionValue);
-    }
-    return value === optionValue;
-  };
-
-  const handleSelect = (optionValue: string) => {
-    if (disabled) return;
-
-    if (multi) {
-      const currentValues = Array.isArray(value) ? value : [];
-      if (currentValues.includes(optionValue)) {
-        onChange(currentValues.filter((v) => v !== optionValue));
-      } else {
-        onChange([...currentValues, optionValue]);
-      }
-    } else {
-      onChange(optionValue);
-    }
-  };
-
-  return (
-    <div
-      className={`relative clip-specimen-sm border-mech bg-[var(--color-surface,#ffffff)] shadow-mech ${disabled ? 'opacity-60' : ''} ${className}`}
-      role={multi ? 'group' : 'radiogroup'}
-      aria-label={ariaLabel}
-      data-testid="item-picker"
-    >
-      <div className="absolute top-0 right-0 w-2 h-2 border-t border-r border-[var(--color-border-focus,#0a0a0a)] pointer-events-none" />
-      <div className="absolute bottom-0 left-0 w-2 h-2 border-b border-l border-[var(--color-border-focus,#0a0a0a)] pointer-events-none" />
-
-      <div className="absolute top-[6px] right-[10px] h-[calc(100%-12px)] w-[14px] opacity-35 pointer-events-none"
-        aria-hidden="true"
-        style={{
-          backgroundImage:
-            'repeating-linear-gradient(to bottom, var(--color-text-muted,#71717a) 0px, var(--color-text-muted,#71717a) 2px, transparent 2px, transparent 4px)',
-        }}
-      />
-
-      {options.map((option, index) => {
-        const selected = isSelected(option.value);
-        const descriptionId = option.description ? `item-picker-description-${option.value}` : undefined;
-
-        return (
-          <div
-            key={option.value}
-            role={multi ? 'checkbox' : 'radio'}
-            tabIndex={disabled ? -1 : 0}
-            aria-checked={selected}
-            aria-describedby={descriptionId}
-            data-testid={`item-picker-option-${option.value}`}
-            onClick={() => handleSelect(option.value)}
-            onKeyDown={(event) => {
-              if (disabled) return;
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                handleSelect(option.value);
-              }
-            }}
-            className={`
-              group relative flex w-full items-center gap-[var(--space-2)] px-[var(--space-3)] py-[var(--space-2)] pr-[calc(var(--space-4)+12px)] text-left transition-colors
-              ${index !== options.length - 1 ? 'border-b border-[var(--color-border,#d4d4d8)]' : ''}
-              ${selected
-                ? 'bg-[var(--color-background-alt,#f4f4f5)] text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-inverse,#ffffff)]'
-                : 'bg-[var(--color-surface,#ffffff)] text-[var(--color-text-muted,#6b7280)] hover:bg-[var(--color-background-alt,#f4f4f5)] hover:text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-muted-inverse,#a1a1aa)] dark:hover:text-[var(--color-text-inverse,#ffffff)]'
-              }
-              ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}
-            `}
-          >
-            <span
-              className={`
-                relative mt-[1px] flex h-3.5 w-3.5 shrink-0 items-center justify-center border transition-colors
-                ${multi ? 'rounded-[1px]' : 'rounded-full'}
-                ${selected
-                  ? 'border-[var(--color-text,#0a0a0a)] bg-[var(--color-text,#0a0a0a)] text-[var(--color-surface,#ffffff)] dark:border-[var(--color-text-inverse,#ffffff)] dark:bg-[var(--color-text-inverse,#ffffff)] dark:text-[var(--color-surface-inverse,#000000)]'
-                  : 'border-[var(--color-border-muted,#a1a1aa)] bg-transparent'
-                }
-              `}
-            >
-              {selected ? <Check size={8} strokeWidth={3.5} /> : null}
-            </span>
-
-            <span className="min-w-0 flex-1">
-              <span className="block font-mono text-[10px] font-bold uppercase tracking-widest leading-none">
-                {option.label}
-              </span>
-              {option.description ? (
-                <span
-                  id={descriptionId}
-                  className="mt-1 block font-mono text-[10px] leading-tight text-[var(--color-text-muted,#71717a)] dark:text-[var(--color-text-muted-inverse,#a1a1aa)]"
-                >
-                  {option.description}
-                </span>
-              ) : null}
-            </span>
-
-            {option.onQuickAction ? (
-              <button
-                type="button"
-                data-testid={`item-picker-quick-action-${option.value}`}
-                aria-label={option.quickActionLabel || `Quick create ${option.label}`}
-                onClick={(event) => {
-                  event.stopPropagation();
-                  option.onQuickAction?.();
-                }}
-                disabled={disabled}
-                className="shrink-0 inline-flex h-5 w-5 items-center justify-center border border-[var(--color-border,#d4d4d8)] font-mono text-[10px] leading-none text-[var(--color-text-muted,#71717a)] opacity-0 transition-opacity group-hover:opacity-100 focus:opacity-100 group-focus-within:opacity-100 hover:text-[var(--color-text,#0a0a0a)]"
-              >
-                +
-              </button>
-            ) : null}
-
-            {option.icon ? (
-              <span className={`shrink-0 ${selected ? 'text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-inverse,#ffffff)]' : 'text-[var(--color-text-muted,#71717a)] group-hover:text-[var(--color-text,#0a0a0a)] dark:text-[var(--color-text-muted-inverse,#a1a1aa)] dark:group-hover:text-[var(--color-text-inverse,#ffffff)]'}`}>
-                {option.icon}
-              </span>
-            ) : null}
-          </div>
-        );
-      })}
-    </div>
-  );
-};