@pattern-stack/frontend-patterns 0.1.2 → 0.2.0-alpha.0

package/src/atoms/composed/IconBadge/IconBadge.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { cn } from '../../utils/utils';
-import { Tooltip } from '../Tooltip';
-import { getAnimationClasses, animationPresets } from '../../utils/animations';
-
-export interface IconBadgeProps {
-  children?: React.ReactNode;
-  icon?: React.ReactNode;
-  variant?: 'category' | 'status';
-  category?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8;
-  status?: 'success' | 'warning' | 'error' | 'info' | 'neutral';
-  size?: 'sm' | 'md' | 'lg';
-  interactive?: boolean;
-  onClick?: () => void;
-  className?: string;
-  /** Tooltip content to show on hover */
-  tooltip?: string;
-}
-
-export const IconBadge = ({  
-  children,
-  icon,
-  variant = 'category',
-  category = 1,
-  status = 'neutral',
-  size = 'md',
-  interactive = false,
-  onClick,
-  className,
-  tooltip
-}: IconBadgeProps) => {
-
-  const sizeClasses: Record<'sm' | 'md' | 'lg', string> = {
-    sm: 'w-8 h-8 text-xs rounded-lg',
-    md: 'w-10 h-10 text-sm rounded-xl',
-    lg: 'w-12 h-12 text-base rounded-xl',
-  };
-
-  const baseClasses = cn(
-    'inline-flex items-center justify-center font-bold shadow-md',
-    sizeClasses[size],
-    interactive && [
-      'cursor-pointer',
-      getAnimationClasses({
-        ...animationPresets.dataBadge,
-        size: size === 'lg' ? 'lg' : size === 'sm' ? 'sm' : 'md'
-      })
-    ],
-    className
-  );
-
-  // Generate gradient classes based on variant
-  const gradientClasses = variant === 'category' 
-    ? `bg-gradient-to-br from-category-${category} to-category-${Math.min(category + 1, 8)}`
-    : variant === 'status'
-    ? `bg-gradient-to-br from-status-${status} to-status-${status}`
-    : 'bg-gradient-to-br from-category-1 to-category-2';
-
-  const badge = (
-    <div 
-      className={cn(baseClasses, gradientClasses, 'animate-fade-in')}
-      onClick={onClick}
-      role={interactive ? 'button' : undefined}
-      tabIndex={interactive ? 0 : undefined}
-      onKeyDown={interactive ? (e) => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          onClick?.();
-        }
-      } : undefined}
-      data-component-name="IconBadge"
-    >
-      {icon && (
-        <span className="text-primary-foreground drop-shadow">
-          {icon}
-        </span>
-      )}
-      {children && !icon && (
-        <span className="text-primary-foreground font-bold">
-          {children}
-        </span>
-      )}
-    </div>
-  );
-
-  if (tooltip) {
-    return (
-      <Tooltip content={tooltip} position="top" size="sm">
-        {badge}
-      </Tooltip>
-    );
-  }
-
-  return badge;
-};

package/src/atoms/composed/IconBadge/index.ts

@@ -1,2 +0,0 @@
-export { IconBadge } from './IconBadge';
-export type { IconBadgeProps } from './IconBadge';

package/src/atoms/composed/Modal/Modal.tsx

@@ -1,223 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from '../../ui/button';
-import { X } from 'lucide-react';
-import { cn } from '../../utils/utils';
-
-export interface ModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  title?: string;
-  children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
-  variant?: 'default' | 'destructive' | 'success';
-  closeOnBackdrop?: boolean;
-  closeOnEscape?: boolean;
-  showCloseButton?: boolean;
-  footer?: React.ReactNode;
-  className?: string;
-  overlayClassName?: string;
-  contentClassName?: string;
-}
-
-const sizeClasses = {
-  sm: 'max-w-sm',
-  md: 'max-w-md',
-  lg: 'max-w-lg', 
-  xl: 'max-w-xl'
-};
-
-const variantClasses = {
-  default: 'border-border',
-  destructive: 'border-l-4 border-l-status-error',
-  success: 'border-l-4 border-l-status-success'
-};
-
-export const Modal = ({
-  isOpen,
-  onClose,
-  title,
-  children,
-  size = 'md',
-  variant = 'default',
-  closeOnBackdrop = true,
-  closeOnEscape = true,
-  showCloseButton = true,
-  footer,
-  className,
-  overlayClassName,
-  contentClassName
-}: ModalProps) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-  const previousActiveElement = useRef<HTMLElement | null>(null);
-
-  // Handle escape key
-  useEffect(() => {
-    if (!isOpen || !closeOnEscape) return;
-
-    const handleEscape = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        onClose();
-      }
-    };
-
-    document.addEventListener('keydown', handleEscape);
-    return () => document.removeEventListener('keydown', handleEscape);
-  }, [isOpen, closeOnEscape, onClose]);
-
-  // Handle focus management
-  useEffect(() => {
-    if (!isOpen) return;
-
-    // Store the currently focused element
-    previousActiveElement.current = document.activeElement as HTMLElement;
-
-    // Focus the modal
-    if (modalRef.current) {
-      modalRef.current.focus();
-    }
-
-    // Restore focus when modal closes
-    return () => {
-      if (previousActiveElement.current) {
-        previousActiveElement.current.focus();
-      }
-    };
-  }, [isOpen]);
-
-  // Prevent body scroll when modal is open
-  useEffect(() => {
-    if (isOpen) {
-      document.body.style.overflow = 'hidden';
-    } else {
-      document.body.style.overflow = '';
-    }
-
-    return () => {
-      document.body.style.overflow = '';
-    };
-  }, [isOpen]);
-
-  // Handle backdrop click
-  const handleBackdropClick = (e: React.MouseEvent) => {
-    if (closeOnBackdrop && e.target === e.currentTarget) {
-      onClose();
-    }
-  };
-
-  // Trap focus within modal
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Tab') {
-      const focusableElements = modalRef.current?.querySelectorAll(
-        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-      );
-      
-      if (!focusableElements?.length) return;
-
-      const firstElement = focusableElements[0] as HTMLElement;
-      const lastElement = focusableElements[focusableElements.length - 1] as HTMLElement;
-
-      if (e.shiftKey) {
-        if (document.activeElement === firstElement) {
-          e.preventDefault();
-          lastElement.focus();
-        }
-      } else {
-        if (document.activeElement === lastElement) {
-          e.preventDefault();
-          firstElement.focus();
-        }
-      }
-    }
-  };
-
-  if (!isOpen) return null;
-
-  return createPortal(
-    <div
-      className={cn(
-        "fixed inset-0 z-50 flex items-center justify-center p-4",
-        "bg-black/50 backdrop-blur-sm",
-        "animate-in fade-in-0 duration-200",
-        overlayClassName
-      )}
-      onClick={handleBackdropClick}
-      data-component-name="ModalOverlay"
-    >
-      <div
-        ref={modalRef}
-        role="dialog"
-        aria-modal="true"
-        aria-labelledby={title ? "modal-title" : undefined}
-        tabIndex={-1}
-        onKeyDown={handleKeyDown}
-        className={cn(
-          "relative w-full max-h-[90vh] overflow-hidden",
-          "bg-card border rounded-lg shadow-lg",
-          "animate-in zoom-in-95 duration-200",
-          sizeClasses[size],
-          variantClasses[variant],
-          className
-        )}
-        data-component-name="Modal"
-        data-variant={variant}
-        data-size={size}
-      >
-        {/* Header */}
-        {(title || showCloseButton) && (
-          <div className="flex items-center justify-between p-6 border-b border-border">
-            {title && (
-              <h2 
-                id="modal-title"
-                className={cn(
-                  "text-lg font-semibold text-foreground",
-                  variant === 'destructive' && "text-status-error",
-                  variant === 'success' && "text-status-success"
-                )}
-                data-component-name="ModalTitle"
-              >
-                {title}
-              </h2>
-            )}
-            {showCloseButton && (
-              <Button
-                variant="ghost"
-                size="icon"
-                onClick={onClose}
-                className="h-8 w-8 rounded hover:bg-muted/80"
-                aria-label="Close modal"
-                data-component-name="ModalCloseButton"
-              >
-                <X className="h-4 w-4" />
-              </Button>
-            )}
-          </div>
-        )}
-
-        {/* Content */}
-        <div 
-          className={cn(
-            "p-6 overflow-y-auto",
-            (!title && !showCloseButton) && "pt-6",
-            !footer && "pb-6",
-            contentClassName
-          )}
-          data-component-name="ModalContent"
-        >
-          {children}
-        </div>
-
-        {/* Footer */}
-        {footer && (
-          <div 
-            className="flex items-center justify-end gap-3 p-6 pt-0 border-t border-border"
-            data-component-name="ModalFooter"
-          >
-            {footer}
-          </div>
-        )}
-      </div>
-    </div>,
-    document.body
-  );
-};

package/src/atoms/composed/Modal/index.ts

@@ -1,2 +0,0 @@
-export { Modal } from './Modal';
-export type { ModalProps } from './Modal';