radtools 0.1.0

package/templates/components/ui/Tabs.tsx

@@ -0,0 +1,253 @@
+'use client';
+
+import React, { createContext, useContext, useState } from 'react';
+import { Icon } from '@/components/icons';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type TabsVariant = 'pill' | 'line';
+
+interface TabsContextValue {
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  variant: TabsVariant;
+}
+
+interface TabsProps {
+  /** Default active tab ID (uncontrolled mode) */
+  defaultValue?: string;
+  /** Active tab ID (controlled mode) */
+  value?: string;
+  /** Callback when tab changes (controlled mode) */
+  onValueChange?: (value: string) => void;
+  /** Visual variant */
+  variant?: TabsVariant;
+  /** Tab components */
+  children: React.ReactNode;
+  /** Additional classes for container */
+  className?: string;
+}
+
+interface TabListProps {
+  /** TabTrigger components */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+interface TabTriggerProps {
+  /** Unique tab ID */
+  value: string;
+  /** Tab label */
+  children: React.ReactNode;
+  /** Icon name (filename without .svg extension) */
+  iconName?: string;
+  /** Additional classes */
+  className?: string;
+}
+
+interface TabContentProps {
+  /** Tab ID this content belongs to */
+  value: string;
+  /** Content to render when active */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const TabsContext = createContext<TabsContextValue | null>(null);
+
+function useTabsContext() {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error('Tab components must be used within a Tabs provider');
+  }
+  return context;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+/**
+ * Tab trigger base styles - matching Webflow tab style
+ */
+const triggerBaseStyles = `
+  flex items-center justify-center
+  px-4 py-2
+  font-joystix text-xs uppercase
+  cursor-pointer select-none
+  text-black
+  transition-all duration-200 ease-out
+  relative
+`;
+
+/**
+ * Pill variant styles (similar to buttons)
+ */
+const pillStyles = {
+  inactive: `
+    border border-black
+    rounded-sm
+    bg-transparent
+    hover:bg-black/5
+  `,
+  active: `
+    border border-black
+    rounded-sm
+    bg-sun-yellow
+  `,
+};
+
+/**
+ * Line variant styles (Webflow-style tabs with connected active state)
+ */
+const lineStyles = {
+  inactive: `
+    bg-transparent
+    hover:bg-warm-cloud/50
+  `,
+  active: `
+    border-b-0
+    bg-warm-cloud
+    border-t border-l border-r border-black
+    rounded-t-md
+    mb-0
+    relative
+    z-10
+  `,
+};
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Tabs container - provides context for tab state
+ * Supports both controlled and uncontrolled modes
+ */
+export function Tabs({
+  defaultValue,
+  value,
+  onValueChange,
+  variant = 'pill',
+  children,
+  className = '',
+}: TabsProps) {
+  // Uncontrolled mode uses internal state
+  const [internalValue, setInternalValue] = useState(defaultValue || '');
+  
+  // Determine if controlled or uncontrolled
+  const isControlled = value !== undefined;
+  const activeTab = isControlled ? value : internalValue;
+  
+  const setActiveTab = (newValue: string) => {
+    if (isControlled) {
+      onValueChange?.(newValue);
+    } else {
+      setInternalValue(newValue);
+    }
+  };
+
+  return (
+    <TabsContext.Provider value={{ activeTab, setActiveTab, variant }}>
+      <div className={className}>
+        {children}
+      </div>
+    </TabsContext.Provider>
+  );
+}
+
+/**
+ * Container for tab triggers - Webflow-style tab menu
+ */
+export function TabList({ children, className = '' }: TabListProps) {
+  return (
+    <div className={`flex gap-1 ${className}`}>
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Individual tab trigger button - Webflow-style
+ */
+export function TabTrigger({
+  value,
+  children,
+  iconName,
+  className = '',
+}: TabTriggerProps) {
+  const { activeTab, setActiveTab, variant } = useTabsContext();
+  const isActive = activeTab === value;
+
+  const variantStyle = variant === 'pill'
+    ? (isActive ? pillStyles.active : pillStyles.inactive)
+    : (isActive ? lineStyles.active : lineStyles.inactive);
+
+  const classes = [
+    triggerBaseStyles,
+    variantStyle,
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      aria-selected={isActive}
+      onClick={() => setActiveTab(value)}
+      className={classes}
+    >
+      <span className="flex items-center gap-2">
+        {iconName && (
+          <span className="opacity-70">
+            <Icon name={iconName} size={16} />
+          </span>
+        )}
+        <span>{children}</span>
+      </span>
+    </button>
+  );
+}
+
+/**
+ * Tab content panel - Webflow-style tab pane
+ */
+export function TabContent({
+  value,
+  children,
+  className = '',
+}: TabContentProps) {
+  const { activeTab, variant } = useTabsContext();
+
+  if (activeTab !== value) {
+    return null;
+  }
+
+  // For line variant, content connects seamlessly with active tab
+  const contentClasses = variant === 'line'
+    ? `bg-warm-cloud border-r border-black ${className}`
+    : className;
+
+  return (
+    <div 
+      role="tabpanel" 
+      className={contentClasses}
+    >
+      {children}
+    </div>
+  );
+}
+
+export default Tabs;
+

package/templates/components/ui/Toast.tsx

@@ -0,0 +1,192 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { Icon } from '@/components/icons';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type ToastVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+interface ToastData {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+  /** Icon name (filename without .svg extension) - overrides variant default */
+  iconName?: string;
+}
+
+interface ToastContextValue {
+  toasts: ToastData[];
+  addToast: (toast: Omit<ToastData, 'id'>) => string;
+  removeToast: (id: string) => void;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const ToastContext = createContext<ToastContextValue | null>(null);
+
+export function useToast() {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error('useToast must be used within a ToastProvider');
+  }
+  return context;
+}
+
+// ============================================================================
+// Toast Provider
+// ============================================================================
+
+interface ToastProviderProps {
+  /** Children */
+  children: React.ReactNode;
+  /** Default duration in ms */
+  defaultDuration?: number;
+}
+
+export function ToastProvider({ children, defaultDuration = 5000 }: ToastProviderProps) {
+  const [toasts, setToasts] = useState<ToastData[]>([]);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const addToast = useCallback((toast: Omit<ToastData, 'id'>) => {
+    const id = `toast-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+    const duration = toast.duration ?? defaultDuration;
+
+    setToasts((prev) => [...prev, { ...toast, id }]);
+
+    // Auto-remove after duration
+    if (duration > 0) {
+      setTimeout(() => {
+        setToasts((prev) => prev.filter((t) => t.id !== id));
+      }, duration);
+    }
+
+    return id;
+  }, [defaultDuration]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  return (
+    <ToastContext.Provider value={{ toasts, addToast, removeToast }}>
+      {children}
+      {mounted && createPortal(
+        <ToastViewport toasts={toasts} removeToast={removeToast} />,
+        document.body
+      )}
+    </ToastContext.Provider>
+  );
+}
+
+// ============================================================================
+// Toast Viewport
+// ============================================================================
+
+interface ToastViewportProps {
+  toasts: ToastData[];
+  removeToast: (id: string) => void;
+}
+
+function ToastViewport({ toasts, removeToast }: ToastViewportProps) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <div
+      className="fixed bottom-4 right-4 z-[100] flex flex-col gap-2 max-w-sm w-full pointer-events-none"
+      aria-live="polite"
+    >
+      {toasts.map((toast) => (
+        <Toast key={toast.id} toast={toast} onClose={() => removeToast(toast.id)} />
+      ))}
+    </div>
+  );
+}
+
+// ============================================================================
+// Toast Component
+// ============================================================================
+
+const variantStyles: Record<ToastVariant, string> = {
+  default: 'bg-warm-cloud border-black',
+  success: 'bg-success-green/20 border-success-green',
+  warning: 'bg-sun-yellow/20 border-sunset-fuzz',
+  error: 'bg-error-red/20 border-error-red',
+  info: 'bg-sky-blue/20 border-sky-blue',
+};
+
+const variantIconMap: Record<ToastVariant, string | null> = {
+  default: null,
+  success: 'checkmark-filled',
+  warning: 'warning-triangle-filled-2',
+  error: 'close',
+  info: 'information-circle',
+};
+
+interface ToastProps {
+  toast: ToastData;
+  onClose: () => void;
+}
+
+function Toast({ toast, onClose }: ToastProps) {
+  const variant = toast.variant || 'default';
+  const displayIconName = toast.iconName || variantIconMap[variant];
+
+  return (
+    <div
+      className={`
+        pointer-events-auto
+        p-4
+        border-2
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-black)]
+        animate-slideIn
+        ${variantStyles[variant]}
+      `.trim()}
+      role="alert"
+    >
+      <div className="flex items-start gap-3">
+        {/* Icon */}
+        {displayIconName && (
+          <span className="flex-shrink-0">
+            <Icon name={displayIconName} size={16} />
+          </span>
+        )}
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <p className="font-joystix text-xs uppercase text-black">
+            {toast.title}
+          </p>
+          {toast.description && (
+            <p className="font-mondwest text-base text-black/70 mt-1">
+              {toast.description}
+            </p>
+          )}
+        </div>
+
+        {/* Close Button */}
+        <button
+          onClick={onClose}
+          className="text-black/50 hover:text-black flex-shrink-0 -mt-1"
+          aria-label="Close"
+        >
+          <Icon name="close" size={16} />
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default ToastProvider;

package/templates/components/ui/Tooltip.tsx

@@ -0,0 +1,129 @@
+'use client';
+
+import React, { useState, useRef } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+type TooltipSize = 'sm' | 'md' | 'lg';
+
+interface TooltipProps {
+  /** Tooltip content */
+  content: React.ReactNode;
+  /** Position relative to trigger */
+  position?: TooltipPosition;
+  /** Delay before showing (ms) - set to 0 for instant */
+  delay?: number;
+  /** Size preset - matches Button sizes (sm=10px, md=12px, lg=14px) */
+  size?: TooltipSize;
+  /** Trigger element */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const positionStyles: Record<TooltipPosition, string> = {
+  top: 'bottom-full left-1/2 -translate-x-1/2 mb-2',
+  bottom: 'top-full left-1/2 -translate-x-1/2 mt-2',
+  left: 'right-full top-1/2 -translate-y-1/2 mr-2',
+  right: 'left-full top-1/2 -translate-y-1/2 ml-2',
+};
+
+const arrowStyles: Record<TooltipPosition, string> = {
+  top: 'top-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-b-transparent border-t-black',
+  bottom: 'bottom-full left-1/2 -translate-x-1/2 border-l-transparent border-r-transparent border-t-transparent border-b-black',
+  left: 'left-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-r-transparent border-l-black',
+  right: 'right-full top-1/2 -translate-y-1/2 border-t-transparent border-b-transparent border-l-transparent border-r-black',
+};
+
+/**
+ * Font size presets matching Button component sizes
+ * sm=10px, md=12px, lg=14px
+ */
+const sizeStyles: Record<TooltipSize, string> = {
+  sm: 'text-[10px]',
+  md: 'text-xs',
+  lg: 'text-sm',
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Tooltip component for hover information
+ */
+export function Tooltip({
+  content,
+  position = 'top',
+  delay = 0,
+  size = 'md',
+  children,
+  className = '',
+}: TooltipProps) {
+  const [isVisible, setIsVisible] = useState(false);
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  const showTooltip = () => {
+    if (delay > 0) {
+      timeoutRef.current = setTimeout(() => setIsVisible(true), delay);
+    } else {
+      setIsVisible(true);
+    }
+  };
+
+  const hideTooltip = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+  };
+
+  return (
+    <div
+      className={`relative inline-flex ${className}`}
+      onMouseEnter={showTooltip}
+      onMouseLeave={hideTooltip}
+      onFocus={showTooltip}
+      onBlur={hideTooltip}
+    >
+      {children}
+      
+      {isVisible && (
+        <div
+          className={`
+            absolute z-[1000]
+            px-2 py-1
+            bg-black text-cream
+            font-joystix uppercase
+            rounded-sm
+            whitespace-nowrap
+            pointer-events-none
+            ${sizeStyles[size]}
+            ${positionStyles[position]}
+          `}
+          role="tooltip"
+        >
+          {content}
+          {/* Arrow */}
+          <div
+            className={`
+              absolute
+              border-4 border-solid
+              ${arrowStyles[position]}
+            `}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default Tooltip;
+

package/templates/components/ui/hooks/useModalBehavior.ts

@@ -0,0 +1,66 @@
+import { useEffect, RefObject } from 'react';
+
+/**
+ * Hook to handle escape key press to close modals/overlays
+ * @param isActive - Whether the modal is currently open
+ * @param onEscape - Callback to close the modal
+ */
+export function useEscapeKey(isActive: boolean, onEscape: () => void): void {
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onEscape();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    return () => document.removeEventListener('keydown', handleEscape);
+  }, [isActive, onEscape]);
+}
+
+/**
+ * Hook to detect clicks outside of specified element(s)
+ * @param isActive - Whether to listen for clicks
+ * @param refs - Array of refs to elements that should NOT trigger the callback
+ * @param onClickOutside - Callback when clicking outside all refs
+ */
+export function useClickOutside(
+  isActive: boolean,
+  refs: RefObject<HTMLElement | null>[],
+  onClickOutside: () => void
+): void {
+  useEffect(() => {
+    if (!isActive) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      const clickedOutsideAll = refs.every(
+        (ref) => ref.current && !ref.current.contains(e.target as Node)
+      );
+      if (clickedOutsideAll) {
+        onClickOutside();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [isActive, refs, onClickOutside]);
+}
+
+/**
+ * Hook to prevent body scroll when modal is open
+ * @param isActive - Whether to lock body scroll
+ */
+export function useLockBodyScroll(isActive: boolean): void {
+  useEffect(() => {
+    if (isActive) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      document.body.style.overflow = '';
+    }
+    return () => {
+      document.body.style.overflow = '';
+    };
+  }, [isActive]);
+}