radtools 0.1.0

package/templates/components/ui/Sheet.tsx

@@ -0,0 +1,316 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useEscapeKey, useLockBodyScroll } from './hooks/useModalBehavior';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type SheetSide = 'left' | 'right' | 'top' | 'bottom';
+
+interface SheetContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  side: SheetSide;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const SheetContext = createContext<SheetContextValue | null>(null);
+
+function useSheetContext() {
+  const context = useContext(SheetContext);
+  if (!context) {
+    throw new Error('Sheet components must be used within a Sheet');
+  }
+  return context;
+}
+
+// ============================================================================
+// Sheet Root
+// ============================================================================
+
+interface SheetProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Side to slide in from */
+  side?: SheetSide;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function Sheet({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  side = 'right',
+  children,
+}: SheetProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+
+  const setOpen = useCallback((newOpen: boolean) => {
+    if (!isControlled) {
+      setInternalOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isControlled, onOpenChange]);
+
+  return (
+    <SheetContext.Provider value={{ open, setOpen, side }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+
+// ============================================================================
+// Sheet Trigger
+// ============================================================================
+
+interface SheetTriggerProps {
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function SheetTrigger({ children, asChild }: SheetTriggerProps) {
+  const { setOpen } = useSheetContext();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+      onClick: () => setOpen(true),
+    });
+  }
+
+  return (
+    <button type="button" onClick={() => setOpen(true)}>
+      {children}
+    </button>
+  );
+}
+
+// ============================================================================
+// Sheet Content
+// ============================================================================
+
+const sideStyles: Record<SheetSide, { container: string; open: string; closed: string }> = {
+  left: {
+    container: 'inset-y-0 left-0 h-full w-80 max-w-[90vw]',
+    open: 'translate-x-0',
+    closed: '-translate-x-full',
+  },
+  right: {
+    container: 'inset-y-0 right-0 h-full w-80 max-w-[90vw]',
+    open: 'translate-x-0',
+    closed: 'translate-x-full',
+  },
+  top: {
+    container: 'inset-x-0 top-0 w-full h-80 max-h-[90vh]',
+    open: 'translate-y-0',
+    closed: '-translate-y-full',
+  },
+  bottom: {
+    container: 'inset-x-0 bottom-0 w-full h-80 max-h-[90vh]',
+    open: 'translate-y-0',
+    closed: 'translate-y-full',
+  },
+};
+
+interface SheetContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function SheetContent({ className = '', children }: SheetContentProps) {
+  const { open, setOpen, side } = useSheetContext();
+  const [mounted, setMounted] = useState(false);
+  const [isVisible, setIsVisible] = useState(false);
+  const styles = sideStyles[side];
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Handle animation states
+  useEffect(() => {
+    if (open) {
+      setIsVisible(true);
+    } else {
+      // Delay hiding until animation completes
+      const timer = setTimeout(() => {
+        setIsVisible(false);
+      }, 200);
+      return () => clearTimeout(timer);
+    }
+  }, [open]);
+
+  // Handle escape key
+  useEscapeKey(open, () => setOpen(false));
+
+  // Prevent body scroll when open
+  useLockBodyScroll(open);
+
+  if (!mounted || !isVisible) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50">
+      {/* Overlay */}
+      <div
+        className={`
+          absolute inset-0 bg-black/50
+          transition-opacity duration-200
+          ${open ? 'opacity-100' : 'opacity-0'}
+        `.trim()}
+        onClick={() => setOpen(false)}
+        aria-hidden="true"
+      />
+
+      {/* Content */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={`
+          fixed
+          ${styles.container}
+          bg-warm-cloud
+          border-black
+          ${side === 'left' ? 'border-r-2' : ''}
+          ${side === 'right' ? 'border-l-2' : ''}
+          ${side === 'top' ? 'border-b-2' : ''}
+          ${side === 'bottom' ? 'border-t-2' : ''}
+          shadow-[4px_4px_0_0_var(--color-black)]
+          transform transition-transform duration-200 ease-out
+          ${open ? styles.open : styles.closed}
+          ${className}
+        `.trim()}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+// ============================================================================
+// Sheet Header, Title, Description
+// ============================================================================
+
+interface SheetHeaderProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function SheetHeader({ className = '', children }: SheetHeaderProps) {
+  return (
+    <div className={`px-6 pt-6 pb-4 border-b border-black/20 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+interface SheetTitleProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function SheetTitle({ className = '', children }: SheetTitleProps) {
+  return (
+    <h2 className={`font-joystix text-base uppercase text-black ${className}`.trim()}>
+      {children}
+    </h2>
+  );
+}
+
+interface SheetDescriptionProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function SheetDescription({ className = '', children }: SheetDescriptionProps) {
+  return (
+    <p className={`font-mondwest text-base text-black/70 mt-2 ${className}`.trim()}>
+      {children}
+    </p>
+  );
+}
+
+// ============================================================================
+// Sheet Body & Footer
+// ============================================================================
+
+interface SheetBodyProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function SheetBody({ className = '', children }: SheetBodyProps) {
+  return (
+    <div className={`px-6 py-4 flex-1 overflow-auto ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+interface SheetFooterProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function SheetFooter({ className = '', children }: SheetFooterProps) {
+  return (
+    <div className={`px-6 pb-6 pt-4 border-t border-black/20 flex justify-end gap-2 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// Sheet Close
+// ============================================================================
+
+interface SheetCloseProps {
+  /** Close button element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function SheetClose({ children, asChild }: SheetCloseProps) {
+  const { setOpen } = useSheetContext();
+
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children as React.ReactElement<{ onClick?: () => void }>, {
+      onClick: () => setOpen(false),
+    });
+  }
+
+  return (
+    <button type="button" onClick={() => setOpen(false)}>
+      {children}
+    </button>
+  );
+}
+
+export default Sheet;

package/templates/components/ui/Slider.tsx

@@ -0,0 +1,223 @@
+'use client';
+
+import React, { useRef, useState, useCallback, useEffect } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type SliderSize = 'sm' | 'md' | 'lg';
+
+interface SliderProps {
+  /** Current value */
+  value: number;
+  /** Change handler */
+  onChange: (value: number) => void;
+  /** Minimum value */
+  min?: number;
+  /** Maximum value */
+  max?: number;
+  /** Step increment */
+  step?: number;
+  /** Size preset */
+  size?: SliderSize;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Show value label */
+  showValue?: boolean;
+  /** Label text */
+  label?: string;
+  /** Additional className */
+  className?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const sizeStyles: Record<SliderSize, { track: string; thumb: string }> = {
+  sm: {
+    track: 'h-1',
+    thumb: 'w-3 h-3 -mt-1',
+  },
+  md: {
+    track: 'h-2',
+    thumb: 'w-4 h-4 -mt-1',
+  },
+  lg: {
+    track: 'h-3',
+    thumb: 'w-5 h-5 -mt-1',
+  },
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Slider component - Numeric range input
+ */
+export function Slider({
+  value,
+  onChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  size = 'md',
+  disabled = false,
+  showValue = false,
+  label,
+  className = '',
+}: SliderProps) {
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [isDragging, setIsDragging] = useState(false);
+  const styles = sizeStyles[size];
+
+  // Calculate percentage
+  const percentage = ((value - min) / (max - min)) * 100;
+
+  // Snap value to step
+  const snapToStep = useCallback((val: number) => {
+    const stepped = Math.round((val - min) / step) * step + min;
+    return Math.max(min, Math.min(max, stepped));
+  }, [min, max, step]);
+
+  // Calculate value from position
+  const getValueFromPosition = useCallback((clientX: number) => {
+    if (!trackRef.current) return value;
+
+    const rect = trackRef.current.getBoundingClientRect();
+    const percent = Math.max(0, Math.min(1, (clientX - rect.left) / rect.width));
+    const newValue = min + percent * (max - min);
+    return snapToStep(newValue);
+  }, [min, max, value, snapToStep]);
+
+  // Handle mouse/touch events
+  const handlePointerDown = useCallback((e: React.PointerEvent) => {
+    if (disabled) return;
+
+    e.preventDefault();
+    setIsDragging(true);
+
+    const newValue = getValueFromPosition(e.clientX);
+    onChange(newValue);
+  }, [disabled, getValueFromPosition, onChange]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+
+    const handlePointerMove = (e: PointerEvent) => {
+      const newValue = getValueFromPosition(e.clientX);
+      onChange(newValue);
+    };
+
+    const handlePointerUp = () => {
+      setIsDragging(false);
+    };
+
+    document.addEventListener('pointermove', handlePointerMove);
+    document.addEventListener('pointerup', handlePointerUp);
+
+    return () => {
+      document.removeEventListener('pointermove', handlePointerMove);
+      document.removeEventListener('pointerup', handlePointerUp);
+    };
+  }, [isDragging, getValueFromPosition, onChange]);
+
+  // Handle keyboard
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (disabled) return;
+
+    let newValue = value;
+    switch (e.key) {
+      case 'ArrowRight':
+      case 'ArrowUp':
+        newValue = Math.min(max, value + step);
+        break;
+      case 'ArrowLeft':
+      case 'ArrowDown':
+        newValue = Math.max(min, value - step);
+        break;
+      case 'Home':
+        newValue = min;
+        break;
+      case 'End':
+        newValue = max;
+        break;
+      default:
+        return;
+    }
+
+    e.preventDefault();
+    onChange(newValue);
+  };
+
+  return (
+    <div className={`space-y-2 ${className}`.trim()}>
+      {/* Label & Value */}
+      {(label || showValue) && (
+        <div className="flex items-center justify-between">
+          {label && (
+            <span className="font-mondwest text-base text-black">
+              {label}
+            </span>
+          )}
+          {showValue && (
+            <span className="font-mondwest text-sm text-black/60">
+              {value}
+            </span>
+          )}
+        </div>
+      )}
+
+      {/* Track */}
+      <div
+        ref={trackRef}
+        role="slider"
+        tabIndex={disabled ? -1 : 0}
+        aria-valuemin={min}
+        aria-valuemax={max}
+        aria-valuenow={value}
+        aria-disabled={disabled}
+        onPointerDown={handlePointerDown}
+        onKeyDown={handleKeyDown}
+        className={`
+          relative w-full
+          ${styles.track}
+          bg-black/10
+          border border-black
+          rounded-sm
+          ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-2
+        `.trim()}
+      >
+        {/* Filled Track */}
+        <div
+          className={`
+            absolute top-0 left-0 h-full
+            bg-sun-yellow
+            rounded-sm
+          `.trim()}
+          style={{ width: `${percentage}%` }}
+        />
+
+        {/* Thumb */}
+        <div
+          className={`
+            absolute top-[7px]
+            ${styles.thumb}
+            bg-cream
+            border border-black
+            rounded
+            transform -translate-y-1/2
+            ${isDragging ? 'scale-110' : ''}
+            transition-transform
+          `.trim()}
+          style={{ left: `calc(${percentage}% - ${parseInt(styles.thumb.split(' ')[0].replace('w-', '')) * 2}px)` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+export default Slider;

package/templates/components/ui/Switch.tsx

@@ -0,0 +1,155 @@
+'use client';
+
+import React from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type SwitchSize = 'sm' | 'md' | 'lg';
+
+interface SwitchProps {
+  /** Checked state */
+  checked: boolean;
+  /** Change handler */
+  onChange: (checked: boolean) => void;
+  /** Size preset */
+  size?: SwitchSize;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Label text */
+  label?: string;
+  /** Label position */
+  labelPosition?: 'left' | 'right';
+  /** Additional className */
+  className?: string;
+  /** ID for accessibility */
+  id?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const sizeStyles: Record<SwitchSize, { track: string; thumb: string; translate: string }> = {
+  sm: {
+    track: 'w-8 h-4',
+    thumb: 'w-3 h-3',
+    translate: 'translate-x-4',
+  },
+  md: {
+    track: 'w-10 h-5',
+    thumb: 'w-4 h-4',
+    translate: 'translate-x-5',
+  },
+  lg: {
+    track: 'w-12 h-6',
+    thumb: 'w-5 h-5',
+    translate: 'translate-x-6',
+  },
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Switch component - On/off toggle
+ */
+export function Switch({
+  checked,
+  onChange,
+  size = 'md',
+  disabled = false,
+  label,
+  labelPosition = 'right',
+  className = '',
+  id,
+}: SwitchProps) {
+  const styles = sizeStyles[size];
+  const switchId = id || `switch-${Math.random().toString(36).slice(2)}`;
+
+  const handleClick = () => {
+    if (!disabled) {
+      onChange(!checked);
+    }
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent) => {
+    if (e.key === ' ' || e.key === 'Enter') {
+      e.preventDefault();
+      handleClick();
+    }
+  };
+
+  const switchElement = (
+    <button
+      type="button"
+      role="switch"
+      id={switchId}
+      aria-checked={checked}
+      disabled={disabled}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+      className={`
+        relative inline-flex items-center
+        ${styles.track}
+        rounded-full
+        border border-black
+        transition-colors
+        ${checked ? 'bg-sun-yellow' : 'bg-black/10'}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+        focus:outline-none focus:ring-2 focus:ring-tertiary focus:ring-offset-2
+      `.trim()}
+    >
+      {/* Thumb */}
+      <span
+        className={`
+          ${styles.thumb}
+          rounded-full
+          bg-black
+          border border-black
+          transform transition-transform
+          ${checked ? styles.translate : 'translate-x-0.5'}
+        `.trim()}
+        aria-hidden="true"
+      />
+    </button>
+  );
+
+  if (!label) {
+    return <div className={className}>{switchElement}</div>;
+  }
+
+  return (
+    <div className={`inline-flex items-center gap-2 ${className}`.trim()}>
+      {labelPosition === 'left' && (
+        <label
+          htmlFor={switchId}
+          className={`
+            font-mondwest text-base text-black
+            ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          `.trim()}
+        >
+          {label}
+        </label>
+      )}
+
+      {switchElement}
+
+      {labelPosition === 'right' && (
+        <label
+          htmlFor={switchId}
+          className={`
+            font-mondwest text-base text-black
+            ${disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}
+          `.trim()}
+        >
+          {label}
+        </label>
+      )}
+    </div>
+  );
+}
+
+export default Switch;