radtools 0.1.0

package/templates/components/ui/ContextMenu.tsx

@@ -0,0 +1,220 @@
+'use client';
+
+import React, { useState, useRef, useEffect, createContext, useContext } from 'react';
+import { Icon } from '@/components/icons';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface Position {
+  x: number;
+  y: number;
+}
+
+interface ContextMenuContextValue {
+  isOpen: boolean;
+  position: Position;
+  open: (position: Position) => void;
+  close: () => void;
+}
+
+interface ContextMenuProps {
+  /** Content that triggers context menu on right-click */
+  children: React.ReactNode;
+  /** Additional classes for trigger container */
+  className?: string;
+}
+
+interface ContextMenuContentProps {
+  /** Menu items */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+interface ContextMenuItemProps {
+  /** Click handler */
+  onClick?: () => void;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Destructive action (red text) */
+  destructive?: boolean;
+  /** Icon name (filename without .svg extension) */
+  iconName?: string;
+  /** Menu item content */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+interface ContextMenuSeparatorProps {
+  className?: string;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const ContextMenuContext = createContext<ContextMenuContextValue | null>(null);
+
+function useContextMenu() {
+  const context = useContext(ContextMenuContext);
+  if (!context) {
+    throw new Error('ContextMenu components must be used within a ContextMenu provider');
+  }
+  return context;
+}
+
+// ============================================================================
+// Components
+// ============================================================================
+
+/**
+ * Context menu container - wraps content that should have right-click menu
+ */
+export function ContextMenu({ children, className = '' }: ContextMenuProps) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [position, setPosition] = useState<Position>({ x: 0, y: 0 });
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  const open = (pos: Position) => {
+    setPosition(pos);
+    setIsOpen(true);
+  };
+
+  const close = () => {
+    setIsOpen(false);
+  };
+
+  // Handle right-click
+  const handleContextMenu = (e: React.MouseEvent) => {
+    e.preventDefault();
+    open({ x: e.clientX, y: e.clientY });
+  };
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        close();
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') close();
+    };
+
+    if (isOpen) {
+      document.addEventListener('mousedown', handleClickOutside);
+      document.addEventListener('keydown', handleEscape);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+      document.removeEventListener('keydown', handleEscape);
+    };
+  }, [isOpen]);
+
+  return (
+    <ContextMenuContext.Provider value={{ isOpen, position, open, close }}>
+      <div
+        ref={containerRef}
+        onContextMenu={handleContextMenu}
+        className={className}
+      >
+        {children}
+      </div>
+    </ContextMenuContext.Provider>
+  );
+}
+
+/**
+ * Context menu dropdown content
+ */
+export function ContextMenuContent({ children, className = '' }: ContextMenuContentProps) {
+  const { isOpen, position, close } = useContextMenu();
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      className={`
+        fixed z-[1000]
+        min-w-[160px]
+        bg-warm-cloud
+        border border-black
+        rounded-sm
+        shadow-[2px_2px_0_0_var(--color-black)]
+        py-1
+        ${className}
+      `}
+      style={{
+        left: position.x,
+        top: position.y,
+      }}
+      onClick={close}
+    >
+      {children}
+    </div>
+  );
+}
+
+/**
+ * Context menu item
+ */
+export function ContextMenuItem({
+  onClick,
+  disabled = false,
+  destructive = false,
+  iconName,
+  children,
+  className = '',
+}: ContextMenuItemProps) {
+  const { close } = useContextMenu();
+
+  const handleClick = () => {
+    if (!disabled && onClick) {
+      onClick();
+      close();
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      onClick={handleClick}
+      disabled={disabled}
+      className={`
+        w-full flex items-center gap-2
+        px-3 py-1.5
+        font-mondwest text-base text-left
+        ${destructive ? 'text-error-red' : 'text-black'}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : 'hover:bg-sun-yellow cursor-pointer'}
+        ${className}
+      `}
+    >
+      {iconName && (
+        <span className="w-4 h-4 flex items-center justify-center">
+          <Icon name={iconName} size={16} />
+        </span>
+      )}
+      <span>{children}</span>
+    </button>
+  );
+}
+
+/**
+ * Context menu separator line
+ */
+export function ContextMenuSeparator({ className = '' }: ContextMenuSeparatorProps) {
+  return (
+    <div 
+      className={`my-1 border-t ${className}`}
+      style={{ borderTopColor: 'var(--border-black-20)' }}
+    />
+  );
+}
+
+export default ContextMenu;
+

package/templates/components/ui/Dialog.tsx

@@ -0,0 +1,264 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useEffect } from 'react';
+import { createPortal } from 'react-dom';
+import { useEscapeKey, useLockBodyScroll } from './hooks/useModalBehavior';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface DialogContextValue {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const DialogContext = createContext<DialogContextValue | null>(null);
+
+function useDialogContext() {
+  const context = useContext(DialogContext);
+  if (!context) {
+    throw new Error('Dialog components must be used within a Dialog');
+  }
+  return context;
+}
+
+// ============================================================================
+// Dialog Root
+// ============================================================================
+
+interface DialogProps {
+  /** Controlled open state */
+  open?: boolean;
+  /** Default open state for uncontrolled usage */
+  defaultOpen?: boolean;
+  /** Callback when open state changes */
+  onOpenChange?: (open: boolean) => void;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function Dialog({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+}: DialogProps) {
+  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 (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+// ============================================================================
+// Dialog Trigger
+// ============================================================================
+
+interface DialogTriggerProps {
+  /** Trigger element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function DialogTrigger({ children, asChild }: DialogTriggerProps) {
+  const { setOpen } = useDialogContext();
+
+  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>
+  );
+}
+
+// ============================================================================
+// Dialog Portal & Overlay
+// ============================================================================
+
+interface DialogContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DialogContent({ className = '', children }: DialogContentProps) {
+  const { open, setOpen } = useDialogContext();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Handle escape key
+  useEscapeKey(open, () => setOpen(false));
+
+  // Prevent body scroll when open
+  useLockBodyScroll(open);
+
+  if (!mounted || !open) return null;
+
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Overlay */}
+      <div
+        className="absolute inset-0 bg-black/50 animate-fadeIn"
+        onClick={() => setOpen(false)}
+        aria-hidden="true"
+      />
+
+      {/* Content */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        className={`
+          relative z-10
+          w-full max-w-lg mx-4
+          bg-warm-cloud
+          border-2 border-black
+          rounded-sm
+          shadow-[4px_4px_0_0_var(--color-black)]
+          animate-scaleIn
+          ${className}
+        `.trim()}
+      >
+        {children}
+      </div>
+    </div>,
+    document.body
+  );
+}
+
+// ============================================================================
+// Dialog Header, Title, Description
+// ============================================================================
+
+interface DialogHeaderProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DialogHeader({ className = '', children }: DialogHeaderProps) {
+  return (
+    <div className={`px-6 pt-6 pb-4 border-b border-black/20 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+interface DialogTitleProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DialogTitle({ className = '', children }: DialogTitleProps) {
+  return (
+    <h2 className={`font-joystix text-base uppercase text-black ${className}`.trim()}>
+      {children}
+    </h2>
+  );
+}
+
+interface DialogDescriptionProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DialogDescription({ className = '', children }: DialogDescriptionProps) {
+  return (
+    <p className={`font-mondwest text-base text-black/70 mt-2 ${className}`.trim()}>
+      {children}
+    </p>
+  );
+}
+
+// ============================================================================
+// Dialog Body & Footer
+// ============================================================================
+
+interface DialogBodyProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DialogBody({ className = '', children }: DialogBodyProps) {
+  return (
+    <div className={`px-6 py-4 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+interface DialogFooterProps {
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function DialogFooter({ className = '', children }: DialogFooterProps) {
+  return (
+    <div className={`px-6 pb-6 pt-4 border-t border-black/20 flex justify-end gap-2 ${className}`.trim()}>
+      {children}
+    </div>
+  );
+}
+
+// ============================================================================
+// Dialog Close
+// ============================================================================
+
+interface DialogCloseProps {
+  /** Close button element */
+  children: React.ReactElement;
+  /** Pass through as child instead of wrapping */
+  asChild?: boolean;
+}
+
+export function DialogClose({ children, asChild }: DialogCloseProps) {
+  const { setOpen } = useDialogContext();
+
+  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 Dialog;

package/templates/components/ui/Divider.tsx

@@ -0,0 +1,70 @@
+'use client';
+
+import React from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type DividerOrientation = 'horizontal' | 'vertical';
+type DividerVariant = 'solid' | 'dashed' | 'decorated';
+
+interface DividerProps {
+  /** Orientation */
+  orientation?: DividerOrientation;
+  /** Visual variant */
+  variant?: DividerVariant;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Divider component for separating content
+ */
+export function Divider({
+  orientation = 'horizontal',
+  variant = 'solid',
+  className = '',
+}: DividerProps) {
+  // Decorated variant with diamond in center
+  if (variant === 'decorated') {
+    return (
+      <div className={`flex items-center gap-4 ${className}`}>
+        <div className="flex-1 h-[2px]" style={{ backgroundColor: 'var(--border-black-20)' }} />
+        <div className="w-2 h-2 bg-sun-yellow border border-black rotate-45" />
+        <div className="flex-1 h-[2px]" style={{ backgroundColor: 'var(--border-black-20)' }} />
+      </div>
+    );
+  }
+
+  // Horizontal divider
+  if (orientation === 'horizontal') {
+    const borderStyle = variant === 'dashed' ? 'border-dashed' : 'border-solid';
+    return (
+      <div
+        className={`w-full border-t ${borderStyle} ${className}`}
+        style={{ borderTopColor: 'var(--border-black-20)' }}
+        role="separator"
+        aria-orientation="horizontal"
+      />
+    );
+  }
+
+  // Vertical divider
+  const borderStyle = variant === 'dashed' ? 'border-dashed' : 'border-solid';
+  return (
+    <div
+      className={`h-full border-l ${borderStyle} ${className}`}
+      style={{ borderLeftColor: 'var(--border-black-20)' }}
+      role="separator"
+      aria-orientation="vertical"
+    />
+  );
+}
+
+export default Divider;
+