radtools 0.1.0

package/templates/components/ui/Popover.tsx

@@ -0,0 +1,211 @@
+'use client';
+
+import React, { createContext, useContext, useState, useRef, useEffect, useCallback } from 'react';
+import { createPortal } from 'react-dom';
+import { useEscapeKey, useClickOutside } from './hooks/useModalBehavior';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type PopoverPosition = 'top' | 'bottom' | 'left' | 'right';
+
+interface PopoverContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  position: PopoverPosition;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const PopoverContext = createContext<PopoverContextValue | null>(null);
+
+function usePopoverContext() {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error('Popover components must be used within a Popover');
+  }
+  return context;
+}
+
+// ============================================================================
+// Popover Root
+// ============================================================================
+
+interface PopoverProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Position relative to trigger */
+  position?: PopoverPosition;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function Popover({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  position = 'bottom',
+  children,
+}: PopoverProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const triggerRef = useRef<HTMLElement>(null);
+
+  const setOpen = useCallback((newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+
+  return (
+    <PopoverContext.Provider value={{ open, setOpen, triggerRef, position }}>
+      {children}
+    </PopoverContext.Provider>
+  );
+}
+
+// ============================================================================
+// Popover Trigger
+// ============================================================================
+
+interface PopoverTriggerProps {
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function PopoverTrigger({ children, asChild }: PopoverTriggerProps) {
+  const { open, setOpen, triggerRef } = usePopoverContext();
+
+  const handleClick = () => {
+    setOpen(!open);
+  };
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void; ref?: React.Ref<HTMLElement | null> }>, {
+      onClick: handleClick,
+      ref: triggerRef as React.Ref<HTMLElement | null>,
+    });
+  }
+
+  return (
+    <button
+      type="button"
+      ref={triggerRef as React.RefObject<HTMLButtonElement>}
+      onClick={handleClick}
+    >
+      {children}
+    </button>
+  );
+}
+
+// ============================================================================
+// Popover Content
+// ============================================================================
+
+interface PopoverContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+  /** Alignment relative to trigger */
+  align?: 'start' | 'center' | 'end';
+}
+
+export function PopoverContent({ className = '', children, align = 'center' }: PopoverContentProps) {
+  const { open, setOpen, triggerRef, position } = usePopoverContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [mounted, setMounted] = useState(false);
+  const [coords, setCoords] = useState({ top: 0, left: 0 });
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Calculate position
+  useEffect(() => {
+    if (!open || !triggerRef.current || !contentRef.current) return;
+
+    const trigger = triggerRef.current.getBoundingClientRect();
+    const content = contentRef.current.getBoundingClientRect();
+    const gap = 8;
+
+    let top = 0;
+    let left = 0;
+
+    switch (position) {
+      case 'top':
+        top = trigger.top - content.height - gap;
+        left = trigger.left + (trigger.width - content.width) / 2;
+        break;
+      case 'bottom':
+        top = trigger.bottom + gap;
+        left = trigger.left + (trigger.width - content.width) / 2;
+        break;
+      case 'left':
+        top = trigger.top + (trigger.height - content.height) / 2;
+        left = trigger.left - content.width - gap;
+        break;
+      case 'right':
+        top = trigger.top + (trigger.height - content.height) / 2;
+        left = trigger.right + gap;
+        break;
+    }
+
+    // Adjust for alignment
+    if (position === 'top' || position === 'bottom') {
+      if (align === 'start') {
+        left = trigger.left;
+      } else if (align === 'end') {
+        left = trigger.right - content.width;
+      }
+    }
+
+    // Keep within viewport
+    top = Math.max(8, Math.min(top, window.innerHeight - content.height - 8));
+    left = Math.max(8, Math.min(left, window.innerWidth - content.width - 8));
+
+    setCoords({ top, left });
+  }, [open, position, align, triggerRef]);
+
+  // Handle click outside
+  useClickOutside(open, [contentRef, triggerRef], () => setOpen(false));
+
+  // Handle escape
+  useEscapeKey(open, () => setOpen(false));
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div
+      ref={contentRef}
+      className={`
+        fixed z-50
+        bg-warm-cloud
+        border-2 border-black
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-black)]
+        p-4
+        animate-fadeIn
+        ${className}
+      `.trim()}
+      style={{ top: coords.top, left: coords.left }}
+    >
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+export default Popover;

package/templates/components/ui/Progress.tsx

@@ -0,0 +1,158 @@
+'use client';
+
+import React from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type ProgressVariant = 'default' | 'success' | 'warning' | 'error';
+type ProgressSize = 'sm' | 'md' | 'lg';
+
+interface ProgressProps {
+  /** Progress value (0-100) */
+  value: number;
+  /** Maximum value */
+  max?: number;
+  /** Visual variant */
+  variant?: ProgressVariant;
+  /** Size preset */
+  size?: ProgressSize;
+  /** Show percentage label */
+  showLabel?: boolean;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const sizeStyles: Record<ProgressSize, string> = {
+  sm: 'h-2',
+  md: 'h-4',
+  lg: 'h-6',
+};
+
+const variantStyles: Record<ProgressVariant, string> = {
+  default: 'bg-sun-yellow',
+  success: 'bg-success-green',
+  warning: 'bg-sunset-fuzz',
+  error: 'bg-error-red',
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Progress bar with retro styling
+ */
+export function Progress({
+  value,
+  max = 100,
+  variant = 'default',
+  size = 'md',
+  showLabel = false,
+  className = '',
+}: ProgressProps) {
+  const percentage = Math.min(100, Math.max(0, (value / max) * 100));
+
+  return (
+    <div className={`w-full ${className}`}>
+      {/* Track */}
+      <div
+        className={`
+          w-full
+          bg-warm-cloud
+          border border-black
+          rounded-sm
+          overflow-hidden
+          ${sizeStyles[size]}
+        `}
+        role="progressbar"
+        aria-valuenow={value}
+        aria-valuemin={0}
+        aria-valuemax={max}
+      >
+        {/* Fill */}
+        <div
+          className={`
+            h-full
+            ${variantStyles[variant]}
+          `}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      
+      {/* Label */}
+      {showLabel && (
+        <div className="mt-1 font-joystix text-2xs text-black text-right">
+          {Math.round(percentage)}%
+        </div>
+      )}
+    </div>
+  );
+}
+
+// ============================================================================
+// Loading Spinner
+// ============================================================================
+
+interface SpinnerProps {
+  /** Size in pixels */
+  size?: number;
+  /** Additional classes */
+  className?: string;
+  /** Whether loading is completed - shows checkmark */
+  completed?: boolean;
+}
+
+// PixelCode loader frames - Private Use Area characters from PixelCode font
+// These are the 6-frame loader animation characters (U+EE06-U+EE0B)
+// Frame1:  Frame2:  Frame3:  Frame4:  Frame5:  Frame6: 
+const LOADER_FRAMES = ['\uEE06', '\uEE07', '\uEE08', '\uEE09', '\uEE0A', '\uEE0B'];
+
+/**
+ * PixelCode loader with animated frames that loop through 6 frames
+ * When completed, displays a checkmark (✓)
+ */
+export function Spinner({ size = 24, className = '', completed = false }: SpinnerProps) {
+  const [frameIndex, setFrameIndex] = React.useState(0);
+
+  React.useEffect(() => {
+    if (completed) {
+      setFrameIndex(0); // Reset to first frame when completed
+      return;
+    }
+
+    const interval = setInterval(() => {
+      setFrameIndex((prev) => (prev + 1) % LOADER_FRAMES.length);
+    }, 150); // Change frame every 150ms for smooth animation
+
+    return () => clearInterval(interval);
+  }, [completed]);
+
+  const fontSize = size;
+  const displayChar = completed ? '✓' : LOADER_FRAMES[frameIndex];
+
+  return (
+    <div
+      className={`inline-block flex items-center justify-center ${className}`}
+      style={{ 
+        width: size, 
+        height: size,
+        fontSize: fontSize,
+        fontFamily: 'PixelCode, monospace',
+        lineHeight: 1,
+      }}
+      aria-label={completed ? 'Completed' : 'Loading'}
+      role="status"
+    >
+      {displayChar}
+    </div>
+  );
+}
+
+export default Progress;
+

package/templates/components/ui/Select.tsx

@@ -0,0 +1,134 @@
+'use client';
+
+import React, { useState, useRef, useEffect } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface SelectOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+interface SelectProps {
+  /** Available options */
+  options: SelectOption[];
+  /** Currently selected value */
+  value?: string;
+  /** Placeholder text when no value selected */
+  placeholder?: string;
+  /** Change handler */
+  onChange?: (value: string) => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Error state */
+  error?: boolean;
+  /** Full width */
+  fullWidth?: boolean;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Custom select/dropdown with retro styling
+ */
+export function Select({
+  options,
+  value,
+  placeholder = 'Select...',
+  onChange,
+  disabled = false,
+  error = false,
+  fullWidth = false,
+  className = '',
+}: SelectProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    function handleClickOutside(event: MouseEvent) {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const selectedOption = options.find(opt => opt.value === value);
+
+  const handleSelect = (optionValue: string) => {
+    onChange?.(optionValue);
+    setIsOpen(false);
+  };
+
+  return (
+    <div
+      ref={containerRef}
+      className={`relative ${fullWidth ? 'w-full' : 'w-fit'} ${className}`}
+    >
+      {/* Trigger Button */}
+      <button
+        type="button"
+        onClick={() => !disabled && setIsOpen(!isOpen)}
+        disabled={disabled}
+        className={`
+          flex items-center justify-between gap-2
+          w-full h-10 px-3
+          font-mondwest text-base
+          bg-warm-cloud text-black
+          border rounded-sm
+          ${error ? 'border-error' : 'border-black'}
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          ${isOpen ? 'shadow-[0_3px_0_0_var(--color-black)] -translate-y-0.5' : 'shadow-[0_1px_0_0_var(--color-black)]'}
+        `}
+      >
+        <span className={selectedOption ? 'text-black' : 'text-black/40'}>
+          {selectedOption?.label || placeholder}
+        </span>
+        <span className={`text-black ${isOpen ? 'rotate-180' : ''}`}>▼</span>
+      </button>
+
+      {/* Dropdown Menu */}
+      {isOpen && (
+        <div
+          className={`
+            absolute z-50 top-full left-0 right-0 mt-1
+            bg-warm-cloud
+            border border-black
+            rounded-sm
+            shadow-[2px_2px_0_0_var(--color-black)]
+            overflow-hidden
+          `}
+        >
+          {options.map((option) => (
+            <button
+              key={option.value}
+              type="button"
+              onClick={() => !option.disabled && handleSelect(option.value)}
+              disabled={option.disabled}
+              className={`
+                w-full px-3 py-2
+                font-mondwest text-base text-left
+                ${option.value === value ? 'bg-sun-yellow text-black' : 'text-black'}
+                ${option.disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-sun-yellow cursor-pointer'}
+              `}
+            >
+              {option.label}
+            </button>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Select;
+