radtools 0.1.0

package/templates/components/icons.tsx

@@ -0,0 +1,164 @@
+/**
+ * Icon Components for RadTools
+ * SVG icons copied from radOS reference
+ */
+
+import React from 'react';
+import { Icon } from './icons/Icon';
+
+// ============================================================================
+// Standard Icon Sizes
+// ============================================================================
+
+export const ICON_SIZE = {
+  xs: 14,
+  sm: 18,
+  md: 20,
+  lg: 24,
+} as const;
+
+export type IconSize = keyof typeof ICON_SIZE;
+
+interface IconProps {
+  className?: string;
+  size?: number | string;
+}
+
+// ============================================================================
+// UI Icons
+// ============================================================================
+
+export function CloseIcon({ className = '', size = 10 }: IconProps) {
+  return (
+    <svg 
+      width={size} 
+      height={size} 
+      viewBox="0 0 10 11" 
+      fill="none" 
+      className={className}
+    >
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M1.11111 0.5H0V1.61111H1.11111V2.72222H2.22222V3.83333H3.33333V4.94444H4.44444V6.05556H3.33333V7.16667H2.22222V8.27778H1.11111V9.38889H0V10.5H1.11111H2.22222V9.38889H3.33333V8.27778H4.44444V7.16667H5.55556V8.27778H6.66667V9.38889H7.77778V10.5H8.88889H10V9.38889H8.88889V8.27778H7.77778V7.16667H6.66667V6.05556H5.55556V4.94444H6.66667V3.83333H7.77778V2.72222H8.88889V1.61111H10V0.5H8.88889H7.77778V1.61111H6.66667V2.72222H5.55556V3.83333H4.44444V2.72222H3.33333V1.61111H2.22222V0.5H1.11111Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function CopyIcon({ className = '', size = 18 }: IconProps) {
+  return (
+    <svg 
+      width={size} 
+      height={size} 
+      viewBox="0 0 28 28" 
+      fill="none" 
+      className={className}
+    >
+      <path 
+        fillRule="evenodd" 
+        clipRule="evenodd" 
+        d="M8.71111 0H28V19.2889H19.2889V28H0V8.71111H8.71111V0ZM11 8.71111H19.2889V17H26V2.5H11V8.71111ZM17 11.5H2.5V25.5H17V11.5Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function CopiedIcon({ className = '', size = 18 }: IconProps) {
+  return (
+    <svg 
+      width={size} 
+      height={typeof size === 'number' ? size * (20 / 26) : size} 
+      viewBox="0 0 26 20" 
+      fill="none" 
+      className={className}
+    >
+      <path 
+        d="M11.4187 11.4375H8.56875V8.5875H5.7V5.71875H2.85V8.5875H0V11.4375H2.85V14.2875H5.7V17.1563H8.56875V20.0062H11.4187V17.1563H14.2875V14.2875H17.1375V11.4375H19.9875V8.5875H22.8562V5.71875H25.7062V2.86875H22.8562V0H19.9875V2.86875H17.1375V5.71875H14.2875V8.5875H11.4187V11.4375Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export function HelpIcon({ className = '', size = 16 }: IconProps) {
+  return (
+    <svg 
+      width={size} 
+      height={size} 
+      viewBox="0 0 16 16" 
+      fill="none" 
+      className={className}
+    >
+      {/* Outer circle */}
+      <path d="M5 0H11V2H5V0Z" fill="currentColor" />
+      <path d="M3 2H5V4H3V2Z" fill="currentColor" />
+      <path d="M11 2H13V4H11V2Z" fill="currentColor" />
+      <path d="M2 4H4V6H2V4Z" fill="currentColor" />
+      <path d="M12 4H14V6H12V4Z" fill="currentColor" />
+      <path d="M0 5H2V11H0V5Z" fill="currentColor" />
+      <path d="M14 5H16V11H14V5Z" fill="currentColor" />
+      <path d="M2 10H4V12H2V10Z" fill="currentColor" />
+      <path d="M12 10H14V12H12V10Z" fill="currentColor" />
+      <path d="M3 12H5V14H3V12Z" fill="currentColor" />
+      <path d="M11 12H13V14H11V12Z" fill="currentColor" />
+      <path d="M5 14H11V16H5V14Z" fill="currentColor" />
+      {/* Question mark */}
+      <path d="M6 4H10V5H6V4Z" fill="currentColor" />
+      <path d="M10 5H11V7H10V5Z" fill="currentColor" />
+      <path d="M8 7H10V8H8V7Z" fill="currentColor" />
+      <path d="M7 8H9V10H7V8Z" fill="currentColor" />
+      <path d="M7 11H9V13H7V11Z" fill="currentColor" />
+    </svg>
+  );
+}
+
+export function ComponentsIcon({ className = '', size = 16 }: IconProps) {
+  return (
+    <svg 
+      width={size} 
+      height={size} 
+      viewBox="0 0 24 24" 
+      fill="currentColor" 
+      className={className}
+    >
+      {/* 2x2 grid of squares representing components */}
+      <rect x="2" y="2" width="9" height="9" />
+      <rect x="13" y="2" width="9" height="9" />
+      <rect x="2" y="13" width="9" height="9" />
+      <rect x="13" y="13" width="9" height="9" />
+    </svg>
+  );
+}
+
+export function ChevronIcon({ className = '', size = 8 }: IconProps) {
+  return (
+    <svg 
+      width={size} 
+      height={size} 
+      viewBox="0 0 8 10" 
+      fill="none" 
+      className={className}
+    >
+      <path 
+        d="M7.21826 5.64286L5.91799 5.64286L5.91799 6.92857L4.64346 6.92857L4.64346 8.21429L3.35605 8.21429L3.35605 9.5L0.781248 9.5L0.781249 8.21429L2.06865 8.21429L2.06865 6.92857L3.35605 6.92857L3.35605 5.64286L4.64346 5.64286L4.64346 4.35714L3.35605 4.35714L3.35605 3.07143L2.06865 3.07143L2.06865 1.78572L0.78125 1.78571L0.78125 0.5L3.35606 0.5L3.35606 1.78572L4.64346 1.78572L4.64346 3.07143L5.91799 3.07143L5.91799 4.35714L7.21826 4.35714L7.21826 5.64286Z" 
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
+export default {
+  CloseIcon,
+  CopyIcon,
+  CopiedIcon,
+  HelpIcon,
+  ComponentsIcon,
+  ChevronIcon,
+};
+
+// Re-export Icon component from icons directory
+export { Icon };
+

package/templates/components/ui/Accordion.tsx

@@ -0,0 +1,268 @@
+'use client';
+
+import React, { createContext, useContext, useState, useCallback, useRef, useEffect } from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type AccordionType = 'single' | 'multiple';
+
+interface AccordionContextValue {
+  type: AccordionType;
+  expandedItems: Set<string>;
+  toggleItem: (value: string) => void;
+}
+
+interface AccordionItemContextValue {
+  value: string;
+  isExpanded: boolean;
+}
+
+// ============================================================================
+// Context
+// ============================================================================
+
+const AccordionContext = createContext<AccordionContextValue | null>(null);
+const AccordionItemContext = createContext<AccordionItemContextValue | null>(null);
+
+function useAccordionContext() {
+  const context = useContext(AccordionContext);
+  if (!context) {
+    throw new Error('Accordion components must be used within an Accordion');
+  }
+  return context;
+}
+
+function useAccordionItemContext() {
+  const context = useContext(AccordionItemContext);
+  if (!context) {
+    throw new Error('AccordionTrigger/AccordionContent must be used within an AccordionItem');
+  }
+  return context;
+}
+
+// ============================================================================
+// Accordion Root
+// ============================================================================
+
+interface AccordionProps {
+  /** Allow single or multiple items to be expanded at once */
+  type?: AccordionType;
+  /** Default expanded item(s) - string for single, array for multiple */
+  defaultValue?: string | string[];
+  /** Controlled expanded value(s) */
+  value?: string | string[];
+  /** Callback when expanded items change */
+  onValueChange?: (value: string | string[]) => void;
+  /** Additional className */
+  className?: string;
+  /** Children */
+  children: React.ReactNode;
+}
+
+export function Accordion({
+  type = 'single',
+  defaultValue,
+  value: controlledValue,
+  onValueChange,
+  className = '',
+  children,
+}: AccordionProps) {
+  // Initialize expanded items
+  const getInitialExpanded = (): Set<string> => {
+    const initial = controlledValue ?? defaultValue;
+    if (!initial) return new Set();
+    return new Set(Array.isArray(initial) ? initial : [initial]);
+  };
+
+  const [expandedItems, setExpandedItems] = useState<Set<string>>(getInitialExpanded);
+
+  // Sync with controlled value
+  useEffect(() => {
+    if (controlledValue !== undefined) {
+      setExpandedItems(new Set(Array.isArray(controlledValue) ? controlledValue : [controlledValue]));
+    }
+  }, [controlledValue]);
+
+  const toggleItem = useCallback((itemValue: string) => {
+    setExpandedItems((prev) => {
+      const next = new Set(prev);
+
+      if (next.has(itemValue)) {
+        next.delete(itemValue);
+      } else {
+        if (type === 'single') {
+          next.clear();
+        }
+        next.add(itemValue);
+      }
+
+      // Notify parent of change
+      if (onValueChange) {
+        const newValue = Array.from(next);
+        onValueChange(type === 'single' ? (newValue[0] ?? '') : newValue);
+      }
+
+      return next;
+    });
+  }, [type, onValueChange]);
+
+  return (
+    <AccordionContext.Provider value={{ type, expandedItems, toggleItem }}>
+      <div className={`space-y-0 ${className}`}>
+        {children}
+      </div>
+    </AccordionContext.Provider>
+  );
+}
+
+// ============================================================================
+// Accordion Item
+// ============================================================================
+
+interface AccordionItemProps {
+  /** Unique value for this item */
+  value: string;
+  /** Additional className */
+  className?: string;
+  /** Children (AccordionTrigger and AccordionContent) */
+  children: React.ReactNode;
+}
+
+export function AccordionItem({ value, className = '', children }: AccordionItemProps) {
+  const { expandedItems } = useAccordionContext();
+  const isExpanded = expandedItems.has(value);
+
+  return (
+    <AccordionItemContext.Provider value={{ value, isExpanded }}>
+      <div
+        className={`
+          border border-black
+          bg-warm-cloud
+          -mt-px first:mt-0
+          ${className}
+        `.trim()}
+        data-state={isExpanded ? 'open' : 'closed'}
+      >
+        {children}
+      </div>
+    </AccordionItemContext.Provider>
+  );
+}
+
+// ============================================================================
+// Accordion Trigger
+// ============================================================================
+
+interface AccordionTriggerProps {
+  /** Additional className */
+  className?: string;
+  /** Children (header content) */
+  children: React.ReactNode;
+}
+
+export function AccordionTrigger({ className = '', children }: AccordionTriggerProps) {
+  const { toggleItem } = useAccordionContext();
+  const { value, isExpanded } = useAccordionItemContext();
+
+  return (
+    <button
+      type="button"
+      onClick={() => toggleItem(value)}
+      className={`
+        w-full flex items-center justify-between
+        px-4 py-3
+        font-joystix text-sm uppercase text-black
+        bg-transparent
+        hover:bg-black/5
+        transition-colors
+        cursor-pointer
+        ${className}
+      `.trim()}
+      aria-expanded={isExpanded}
+    >
+      <span>{children}</span>
+      <span
+        className="text-[1rem] font-mondwest select-none"
+        aria-hidden="true"
+      >
+        {isExpanded ? '−' : '+'}
+      </span>
+    </button>
+  );
+}
+
+// ============================================================================
+// Accordion Content
+// ============================================================================
+
+interface AccordionContentProps {
+  /** Additional className */
+  className?: string;
+  /** Children (content) */
+  children: React.ReactNode;
+}
+
+export function AccordionContent({ className = '', children }: AccordionContentProps) {
+  const { isExpanded } = useAccordionItemContext();
+  const contentRef = useRef<HTMLDivElement>(null);
+  const [height, setHeight] = useState<number | undefined>(undefined);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  useEffect(() => {
+    const content = contentRef.current;
+    if (!content) return;
+
+    if (isExpanded) {
+      // Expanding: measure content height and animate
+      const scrollHeight = content.scrollHeight;
+      setHeight(scrollHeight);
+      setIsAnimating(true);
+
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+        setHeight(undefined); // Remove fixed height after animation
+      }, 200);
+
+      return () => clearTimeout(timer);
+    } else {
+      // Collapsing: set current height first, then animate to 0
+      const scrollHeight = content.scrollHeight;
+      setHeight(scrollHeight);
+      setIsAnimating(true);
+
+      // Force reflow before setting height to 0
+      requestAnimationFrame(() => {
+        setHeight(0);
+      });
+
+      const timer = setTimeout(() => {
+        setIsAnimating(false);
+      }, 200);
+
+      return () => clearTimeout(timer);
+    }
+  }, [isExpanded]);
+
+  return (
+    <div
+      ref={contentRef}
+      className={`
+        overflow-hidden
+        transition-[height] duration-200 ease-out
+        ${className}
+      `.trim()}
+      style={{
+        height: isAnimating ? height : (isExpanded ? 'auto' : 0),
+      }}
+      aria-hidden={!isExpanded}
+    >
+      <div className="px-4 pb-4">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default Accordion;

package/templates/components/ui/Alert.tsx

@@ -0,0 +1,111 @@
+'use client';
+
+import React from 'react';
+import { Icon } from '@/components/icons';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type AlertVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+
+interface AlertProps {
+  /** Alert variant */
+  variant?: AlertVariant;
+  /** Alert title */
+  title?: string;
+  /** Alert content */
+  children: React.ReactNode;
+  /** Show close button */
+  closable?: boolean;
+  /** Close handler */
+  onClose?: () => void;
+  /** Icon name (filename without .svg extension) - overrides variant default */
+  iconName?: string;
+  /** Additional className */
+  className?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+const variantStyles: Record<AlertVariant, string> = {
+  default: 'bg-warm-cloud border-black text-black',
+  success: 'bg-green/10 border-green text-black',
+  warning: 'bg-sun-yellow/10 border-sun-yellow text-black',
+  error: 'bg-error-red/10 border-error-red text-black',
+  info: 'bg-sky-blue/10 border-sky-blue text-black',
+};
+
+const variantIconMap: Record<AlertVariant, string> = {
+  default: 'information-circle',
+  success: 'checkmark-filled',
+  warning: 'warning-triangle-filled-2',
+  error: 'close',
+  info: 'information-circle',
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Alert component - Static alert banners
+ */
+export function Alert({
+  variant = 'default',
+  title,
+  children,
+  closable = false,
+  onClose,
+  iconName,
+  className = '',
+}: AlertProps) {
+  const displayIconName = iconName || variantIconMap[variant];
+
+  return (
+    <div
+      role="alert"
+      className={`
+        p-4
+        border-2
+        rounded-sm
+        ${variantStyles[variant]}
+        ${className}
+      `.trim()}
+    >
+      <div className="flex items-start gap-3">
+        {/* Icon */}
+        <span className="flex-shrink-0 mt-0.5">
+          <Icon name={displayIconName} size={16} />
+        </span>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          {title && (
+            <p className="font-joystix text-xs uppercase mb-1">
+              {title}
+            </p>
+          )}
+          <div className="font-mondwest text-base text-black/80">
+            {children}
+          </div>
+        </div>
+
+        {/* Close Button */}
+        {closable && (
+          <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 Alert;

package/templates/components/ui/Badge.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import React from 'react';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+type BadgeVariant = 'default' | 'success' | 'warning' | 'error' | 'info';
+type BadgeSize = 'sm' | 'md';
+
+interface BadgeProps {
+  /** Visual variant */
+  variant?: BadgeVariant;
+  /** Size preset */
+  size?: BadgeSize;
+  /** Badge content */
+  children: React.ReactNode;
+  /** Additional classes */
+  className?: string;
+}
+
+// ============================================================================
+// Styles
+// ============================================================================
+
+/**
+ * Base badge styles
+ */
+const baseStyles = `
+  inline-flex items-center justify-center
+  font-joystix uppercase
+  rounded-sm
+  whitespace-nowrap
+`;
+
+/**
+ * Size presets
+ */
+const sizeStyles: Record<BadgeSize, string> = {
+  sm: 'px-2 py-0.5 text-2xs',
+  md: 'px-2.5 py-1 text-xs',
+};
+
+/**
+ * Variant color schemes
+ */
+const variantStyles: Record<BadgeVariant, string> = {
+  default: 'bg-warm-cloud text-black border border-black',
+  success: 'bg-green text-black border border-black',
+  warning: 'bg-sun-yellow text-black border border-black',
+  error: 'bg-error-red text-black border border-black',
+  info: 'bg-sky-blue text-black border border-black',
+};
+
+// ============================================================================
+// Component
+// ============================================================================
+
+/**
+ * Badge component for status indicators and labels
+ */
+export function Badge({
+  variant = 'default',
+  size = 'md',
+  children,
+  className = '',
+}: BadgeProps) {
+  const classes = [
+    baseStyles,
+    sizeStyles[size],
+    variantStyles[variant],
+    className,
+  ]
+    .join(' ')
+    .replace(/\s+/g, ' ')
+    .trim();
+
+  return (
+    <span className={classes}>
+      {children}
+    </span>
+  );
+}
+
+export default Badge;
+