@umituz/web-design-system 3.1.7 → 3.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "3.1.7",
+  "version": "3.1.9",
   "private": false,
   "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",

package/src/infrastructure/utils/cn.util.ts

@@ -1,6 +1,6 @@
 /**
  * cn Utility
- * @description Conditional className utility using clsx + tailwind-merge for proper Tailwind class merging
+ * @description Conditional className utility using clsx + tailwind-merge for proper Tailwind class merging with LRU cache for performance
  */
 
 import { clsx, type ClassValue } from 'clsx';
@@ -8,6 +8,65 @@ import { twMerge } from 'tailwind-merge';
 
 export type { ClassValue };
 
+// Simple LRU Cache implementation for className caching
+class LRUCache<K, V> {
+  private cache: Map<K, V>;
+  private maxSize: number;
+
+  constructor(maxSize: number = 128) {
+    this.cache = new Map();
+    this.maxSize = maxSize;
+  }
+
+  get(key: K): V | undefined {
+    const value = this.cache.get(key);
+    if (value !== undefined) {
+      // Move to end (most recently used)
+      this.cache.delete(key);
+      this.cache.set(key, value);
+    }
+    return value;
+  }
+
+  set(key: K, value: V): void {
+    // Remove existing entry to update position
+    if (this.cache.has(key)) {
+      this.cache.delete(key);
+    }
+    // Remove oldest entry if at capacity
+    else if (this.cache.size >= this.maxSize) {
+      const firstKey = this.cache.keys().next().value;
+      this.cache.delete(firstKey);
+    }
+    this.cache.set(key, value);
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+}
+
+// Create cache instance
+const classNameCache = new LRUCache<string, string>(256);
+
+// Cache key generator
+function generateCacheKey(inputs: ClassValue[]): string {
+  return JSON.stringify(inputs);
+}
+
 export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
+  const cacheKey = generateCacheKey(inputs);
+  const cached = classNameCache.get(cacheKey);
+
+  if (cached) {
+    return cached;
+  }
+
+  const result = twMerge(clsx(inputs));
+  classNameCache.set(cacheKey, result);
+
+  return result;
 }
+
+// Export cache for manual clearing if needed
+export { classNameCache };

package/src/presentation/atoms/Button.tsx

@@ -41,12 +41,12 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+const Button = React.memo(React.forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : 'button';
     return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
   }
-);
+));
 Button.displayName = 'Button';
 
 export { Button, buttonVariants };

package/src/presentation/atoms/Text.tsx

@@ -4,6 +4,7 @@
  */
 
 import { forwardRef, type HTMLAttributes } from 'react';
+import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -45,7 +46,7 @@ const weightStyles: Record<'normal' | 'medium' | 'semibold' | 'bold', string> =
 
 // NOTE: "as any" is used here for the polymorphic ref, which is a necessary workaround
 // for TypeScript's limitations in typing polymorphic components properly.
-export const Text = forwardRef<HTMLElement, TextProps>(
+export const Text = React.memo(forwardRef<HTMLElement, TextProps>(
   ({ className, as = 'p', variant = 'body', size = 'md', weight = 'normal', ...props }, ref) => {
     const Tag = as as any;
     return (
@@ -61,6 +62,6 @@ export const Text = forwardRef<HTMLElement, TextProps>(
       />
     );
   }
-);
+));
 
 Text.displayName = 'Text';

package/src/presentation/hooks/useDebounce.ts

@@ -1,22 +1,65 @@
 /**
  * useDebounce Hook
- * @description Debounce a value
+ * @description Debounce a value with optimized performance
  */
 
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
 export function useDebounce<T>(value: T, delay: number = 500): T {
   const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const timeoutRef = useRef<number>();
 
   useEffect(() => {
-    const handler = setTimeout(() => {
+    // Clear previous timeout
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Set new timeout
+    timeoutRef.current = window.setTimeout(() => {
       setDebouncedValue(value);
     }, delay);
 
+    // Cleanup
     return () => {
-      clearTimeout(handler);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
     };
   }, [value, delay]);
 
   return debouncedValue;
 }
+
+/**
+ * useThrottle Hook
+ * @description Throttle a function to limit execution rate
+ */
+export function useThrottle<T extends (...args: any[]) => any>(
+  func: T,
+  delay: number = 300
+): T {
+  const lastRun = useRef<Date>(new Date());
+  const timeoutRef = useRef<number>();
+
+  return useCallback((...args: Parameters<T>) => {
+    const now = new Date();
+    const timeSinceLastRun = now.getTime() - lastRun.current.getTime();
+
+    if (timeSinceLastRun >= delay) {
+      lastRun.current = now;
+      return func(...args);
+    }
+
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = window.setTimeout(() => {
+      lastRun.current = new Date();
+      func(...args);
+    }, delay - timeSinceLastRun);
+  }, [func, delay]) as T;
+}
+
+import { useCallback } from 'react';

package/src/presentation/hooks/useLocalStorage.ts

@@ -1,9 +1,9 @@
 /**
  * useLocalStorage Hook
- * @description LocalStorage state management
+ * @description LocalStorage state management with optimized re-renders
  */
 
-import { useCallback, useState } from 'react';
+import { useCallback, useState, useRef } from 'react';
 
 export function useLocalStorage<T>(
   key: string,
@@ -18,17 +18,21 @@ export function useLocalStorage<T>(
     }
   });
 
+  // Use ref to track latest value without causing re-renders
+  const valueRef = useRef(storedValue);
+  valueRef.current = storedValue;
+
   const setValue = useCallback(
     (value: T | ((prev: T) => T)) => {
       try {
-        const valueToStore = value instanceof Function ? value(storedValue) : value;
+        const valueToStore = value instanceof Function ? value(valueRef.current) : value;
         setStoredValue(valueToStore);
         window.localStorage.setItem(key, JSON.stringify(valueToStore));
       } catch (error) {
         console.error(`Error setting localStorage key "${key}":`, error);
       }
     },
-    [key, storedValue]
+    [key] // Remove storedValue dependency
   );
 
   const removeValue = useCallback(() => {

package/src/presentation/organisms/Card.tsx

@@ -4,6 +4,7 @@
  */
 
 import { forwardRef, type HTMLAttributes } from 'react';
+import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -33,7 +34,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
 
 Card.displayName = 'Card';
 
-export const CardHeader = forwardRef<HTMLDivElement, CardProps>(
+export const CardHeader = React.memo(forwardRef<HTMLDivElement, CardProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
@@ -41,11 +42,11 @@ export const CardHeader = forwardRef<HTMLDivElement, CardProps>(
       {...props}
     />
   )
-);
+));
 
 CardHeader.displayName = 'CardHeader';
 
-export const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
+export const CardTitle = React.memo(forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHeadingElement>>(
   ({ className, ...props }, ref) => (
     <h3
       ref={ref}
@@ -53,11 +54,11 @@ export const CardTitle = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLHea
       {...props}
     />
   )
-);
+));
 
 CardTitle.displayName = 'CardTitle';
 
-export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+export const CardDescription = React.memo(forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
   ({ className, ...props }, ref) => (
     <p
       ref={ref}
@@ -65,19 +66,19 @@ export const CardDescription = forwardRef<HTMLParagraphElement, HTMLAttributes<H
       {...props}
     />
   )
-);
+));
 
 CardDescription.displayName = 'CardDescription';
 
-export const CardContent = forwardRef<HTMLDivElement, CardProps>(
+export const CardContent = React.memo(forwardRef<HTMLDivElement, CardProps>(
   ({ className, ...props }, ref) => (
     <div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
   )
-);
+));
 
 CardContent.displayName = 'CardContent';
 
-export const CardFooter = forwardRef<HTMLDivElement, CardProps>(
+export const CardFooter = React.memo(forwardRef<HTMLDivElement, CardProps>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
@@ -85,6 +86,6 @@ export const CardFooter = forwardRef<HTMLDivElement, CardProps>(
       {...props}
     />
   )
-);
+));
 
 CardFooter.displayName = 'CardFooter';

package/src/presentation/organisms/FilterBar.tsx

@@ -1,9 +1,9 @@
 /**
  * FilterBar Component (Organism)
- * @description Mobile filter bar with search, categories, tags, and sort
+ * @description Mobile filter bar with search, categories, tags, and sort with optimized performance
  */
 
-import { useState } from 'react';
+import { useState, useCallback, memo } from 'react';
 import React from 'react';
 import type { BaseProps } from '../../domain/types';
 
@@ -35,7 +35,67 @@ export interface FilterBarProps extends BaseProps {
   onClearFilters: () => void;
 }
 
-export const FilterBar = ({
+// Memoize category button component
+const CategoryButton = memo<{
+  category: Category;
+  selectedCategory: string | null;
+  onCategoryChange: (category: string) => void;
+}>(({ category, selectedCategory, onCategoryChange }) => {
+  const Icon = category.icon;
+  const isActive = selectedCategory === category.id;
+
+  const handleClick = useCallback(() => {
+    onCategoryChange(category.id);
+  }, [category.id, onCategoryChange]);
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs transition-all transition-theme ${
+        isActive
+          ? 'bg-primary-light text-text-primary font-medium'
+          : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
+      }`}
+      type="button"
+      aria-pressed={isActive}
+    >
+      <Icon size={14} />
+      <span>{category.name}</span>
+    </button>
+  );
+});
+
+CategoryButton.displayName = 'CategoryButton';
+
+// Memoize tag button component
+const TagButton = memo<{
+  tag: string;
+  isSelected: boolean;
+  onTagToggle: (tag: string) => void;
+}>(({ tag, isSelected, onTagToggle }) => {
+  const handleClick = useCallback(() => {
+    onTagToggle(tag);
+  }, [tag, onTagToggle]);
+
+  return (
+    <button
+      onClick={handleClick}
+      className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all transition-theme ${
+        isSelected
+          ? 'bg-primary-light text-text-primary'
+          : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
+      }`}
+      type="button"
+      aria-pressed={isSelected}
+    >
+      {tag}
+    </button>
+  );
+});
+
+TagButton.displayName = 'TagButton';
+
+export const FilterBar = memo<FilterBarProps>(({
   searchQuery,
   setSearchQuery,
   selectedCategory,
@@ -50,9 +110,25 @@ export const FilterBar = ({
   hasActiveFilters,
   onClearFilters,
   className,
-}: FilterBarProps) => {
+}) => {
   const [isFilterOpen, setIsFilterOpen] = useState(false);
 
+  const handleSearchChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchQuery(e.target.value);
+  }, [setSearchQuery]);
+
+  const handleToggleFilters = useCallback(() => {
+    setIsFilterOpen(prev => !prev);
+  }, []);
+
+  const handleSortChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+    onSortChange(e.target.value);
+  }, [onSortChange]);
+
+  const handleClearFilters = useCallback(() => {
+    onClearFilters();
+  }, [onClearFilters]);
+
   return (
     <div className={`lg:hidden mb-4 space-y-3 ${className || ''}`}>
       {/* Search */}
@@ -75,7 +151,7 @@ export const FilterBar = ({
           type="text"
           placeholder="Search..."
           value={searchQuery}
-          onChange={(e) => setSearchQuery(e.target.value)}
+          onChange={handleSearchChange}
           className="w-full pl-10 pr-4 py-2.5 bg-bg-secondary text-text-primary rounded-lg border border-border focus:border-primary-light focus:outline-none placeholder-text-secondary/50 transition-theme text-sm"
           aria-label="Search"
         />
@@ -84,7 +160,7 @@ export const FilterBar = ({
       {/* Filter Toggle + Sort + Clear Filters */}
       <div className="flex items-center gap-2 flex-wrap">
         <button
-          onClick={() => setIsFilterOpen(!isFilterOpen)}
+          onClick={handleToggleFilters}
           className="flex items-center gap-2 px-4 py-2.5 bg-bg-secondary text-text-primary rounded-lg border border-border hover:border-primary-light transition-all text-sm font-medium transition-theme"
           type="button"
           aria-expanded={isFilterOpen}
@@ -104,7 +180,7 @@ export const FilterBar = ({
         {/* Sort Dropdown */}
         <select
           value={sortBy}
-          onChange={(e) => onSortChange(e.target.value)}
+          onChange={handleSortChange}
           className="px-3 py-2.5 bg-bg-secondary text-text-primary rounded-lg border border-border focus:border-primary-light focus:outline-none transition-theme text-sm"
           aria-label="Sort by"
         >
@@ -118,7 +194,7 @@ export const FilterBar = ({
         {/* Clear Filters */}
         {hasActiveFilters && (
           <button
-            onClick={onClearFilters}
+            onClick={handleClearFilters}
             className="px-3 py-2.5 text-text-secondary hover:text-text-primary text-sm transition-colors"
             type="button"
           >
@@ -134,28 +210,14 @@ export const FilterBar = ({
           <div>
             <h4 className="text-sm font-semibold text-text-primary mb-3">Categories</h4>
             <div className="grid grid-cols-2 gap-2">
-              {categories.map((category) => {
-                const Icon = category.icon;
-                const isActive = selectedCategory === category.id;
-                return (
-                  <button
-                    key={category.id}
-                    onClick={() => {
-                      onCategoryChange(category.id);
-                    }}
-                    className={`flex items-center gap-2 px-3 py-2 rounded-lg text-xs transition-all transition-theme ${
-                      isActive
-                        ? 'bg-primary-light text-text-primary font-medium'
-                        : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
-                    }`}
-                    type="button"
-                    aria-pressed={isActive}
-                  >
-                    <Icon size={14} />
-                    <span>{category.name}</span>
-                  </button>
-                );
-              })}
+              {categories.map((category) => (
+                <CategoryButton
+                  key={category.id}
+                  category={category}
+                  selectedCategory={selectedCategory}
+                  onCategoryChange={onCategoryChange}
+                />
+              ))}
             </div>
           </div>
 
@@ -164,19 +226,12 @@ export const FilterBar = ({
             <h4 className="text-sm font-semibold text-text-primary mb-3">Popular Tags</h4>
             <div className="flex flex-wrap gap-2">
               {popularTags.map((tag) => (
-                <button
+                <TagButton
                   key={tag}
-                  onClick={() => onTagToggle(tag)}
-                  className={`px-3 py-1.5 rounded-full text-xs font-medium transition-all transition-theme ${
-                    selectedTags.includes(tag)
-                      ? 'bg-primary-light text-text-primary'
-                      : 'bg-bg-secondary text-text-secondary hover:bg-bg-tertiary hover:text-text-primary'
-                  }`}
-                  type="button"
-                  aria-pressed={selectedTags.includes(tag)}
-                >
-                  {tag}
-                </button>
+                  tag={tag}
+                  isSelected={selectedTags.includes(tag)}
+                  onTagToggle={onTagToggle}
+                />
               ))}
             </div>
           </div>
@@ -184,4 +239,6 @@ export const FilterBar = ({
       )}
     </div>
   );
-};
+});
+
+FilterBar.displayName = 'FilterBar';

package/src/presentation/organisms/Footer.tsx

@@ -1,21 +1,17 @@
 /**
  * Footer Organism Component
- * @description Footer with brand info, links, and social icons
+ * @description Minimal footer with brand and social icons - optimized for performance
  */
 
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { forwardRef, type HTMLAttributes, type ReactNode, memo } from 'react';
+import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface FooterProps extends HTMLAttributes<HTMLElement>, BaseProps {
   brand?: {
     name: string;
-    description?: string;
   };
-  sections?: Array<{
-    title: string;
-    links: Array<{ label: string; href: string }>;
-  }>;
   social?: Array<{
     name: string;
     href: string;
@@ -24,106 +20,61 @@ export interface FooterProps extends HTMLAttributes<HTMLElement>, BaseProps {
   copyright?: string;
 }
 
-export const Footer = forwardRef<HTMLElement, FooterProps>(
-  ({ className, brand, sections, social, copyright = '© 2026 UmitUZ. All rights reserved.', ...props }, ref) => {
+// Memoize social icon component to prevent unnecessary re-renders
+const SocialIcon = memo<{
+  item: FooterProps['social'][number];
+}>(({ item }) => (
+  <a
+    href={item.href}
+    target="_blank"
+    rel="noopener noreferrer"
+    className="flex items-center justify-center w-10 h-10 rounded-lg bg-bg-secondary/50 text-text-secondary hover:bg-primary-gradient hover:text-white transition-all duration-200"
+    aria-label={item.name}
+    title={item.name}
+  >
+    <span className="relative">{item.icon}</span>
+  </a>
+));
+
+SocialIcon.displayName = 'SocialIcon';
+
+export const Footer = memo(forwardRef<HTMLElement, FooterProps>(
+  ({ className, brand, social, copyright = '© 2026 UmitUZ. All rights reserved.', ...props }, ref) => {
     return (
       <footer
         ref={ref}
-        className={cn('relative mt-12 transition-theme overflow-hidden', className)}
+        className={cn('relative mt-8 transition-theme', className)}
         {...props}
       >
-        <style>{`
-          @keyframes gradient-shift {
-            0%, 100% { opacity: 0.3; transform: scale(1) translate(0, 0); }
-            50% { opacity: 0.5; transform: scale(1.1) translate(-10px, -10px); }
-          }
-          .animate-gradient-shift {
-            animation: gradient-shift 8s ease-in-out infinite;
-          }
-        `}</style>
-
-        {/* Animated Gradient Background */}
-        <div className="absolute inset-0 bg-gradient-to-br from-bg-card via-bg-secondary/20 to-bg-card"></div>
-        <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--tw-gradient-stops))] from-primary/8 via-transparent to-transparent animate-gradient-shift"></div>
-
-        {/* Gradient Top Border */}
-        <div className="absolute top-0 left-0 right-0 h-px bg-gradient-to-r from-transparent via-primary/50 to-transparent"></div>
-
-        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 sm:py-16">
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10 lg:gap-12">
-            {/* Brand Section - Prominent */}
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+          <div className="flex flex-col md:flex-row items-center justify-between gap-6">
+            {/* Brand */}
             {brand && (
-              <div className="lg:col-span-1 space-y-6">
-                <div className="space-y-2">
-                  <h3 className="text-2xl font-bold text-text-primary tracking-tight">
-                    {brand.name}
-                  </h3>
-                  {brand.description && (
-                    <p className="text-text-secondary text-sm leading-relaxed">{brand.description}</p>
-                  )}
-                </div>
-
-                {/* Social Icons */}
-                {social && social.length > 0 && (
-                  <div className="flex items-center gap-3">
-                    {social.map((item, index) => (
-                      <a
-                        key={index}
-                        href={item.href}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="group relative flex items-center justify-center w-12 h-12 rounded-xl bg-bg-secondary/50 text-text-secondary hover:bg-primary-gradient hover:text-white border border-border/50 hover:border-transparent transition-all duration-300 hover:scale-110 hover:shadow-lg hover:shadow-primary/20"
-                        aria-label={item.name}
-                        title={item.name}
-                      >
-                        {/* Glow effect */}
-                        <span className="absolute inset-0 rounded-xl bg-primary/15 blur-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
-                        {/* Icon */}
-                        <span className="relative">{item.icon}</span>
-                      </a>
-                    ))}
-                  </div>
-                )}
+              <div className="text-xl font-bold text-text-primary">
+                {brand.name}
               </div>
             )}
 
-            {/* Links Sections */}
-            <div className="md:col-span-1 lg:col-span-2">
-              <div className="grid grid-cols-2 sm:grid-cols-3 gap-10">
-                {sections?.map((section, index) => (
-                  <div key={index} className="space-y-3">
-                    <h4 className="font-semibold text-text-primary text-sm uppercase tracking-wider">{section.title}</h4>
-                    <ul className="space-y-2">
-                      {section.links.map((link, linkIndex) => (
-                        <li key={linkIndex}>
-                          <a
-                            href={link.href}
-                            className="text-text-secondary text-sm hover:text-primary-light transition-colors duration-200 inline-flex items-center gap-2 group"
-                          >
-                            <span className="opacity-0 group-hover:opacity-100 transition-opacity duration-200 text-primary-light text-xs">→</span>
-                            <span>{link.label}</span>
-                          </a>
-                        </li>
-                      ))}
-                    </ul>
-                  </div>
+            {/* Social Icons */}
+            {social && social.length > 0 && (
+              <div className="flex items-center gap-3">
+                {social.map((item, index) => (
+                  <SocialIcon key={`${item.name}-${index}`} item={item} />
                 ))}
               </div>
-            </div>
+            )}
           </div>
 
-          {/* Copyright Bar */}
+          {/* Copyright */}
           {copyright && (
-            <div className="border-t border-border/30 mt-12 pt-6">
-              <div className="flex flex-col sm:flex-row items-center justify-center gap-4 text-center">
-                <p className="text-sm text-text-secondary/80">{copyright}</p>
-              </div>
+            <div className="text-center mt-6 pt-6 border-t border-border/20">
+              <p className="text-sm text-text-secondary/60">{copyright}</p>
             </div>
           )}
         </div>
       </footer>
     );
   }
-);
+));
 
 Footer.displayName = 'Footer';

package/src/presentation/organisms/Modal.tsx

@@ -1,9 +1,10 @@
 /**
  * Modal Component (Organism)
- * @description Dialog/overlay container
+ * @description Dialog/overlay container with optimized transitions
  */
 
-import { forwardRef, type HTMLAttributes } from 'react';
+import { forwardRef, type HTMLAttributes, useEffect, useState } from 'react';
+import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -22,9 +23,35 @@ const sizeStyles: Record<'sm' | 'md' | 'lg' | 'xl' | 'full', string> = {
   full: 'max-w-full mx-4',
 };
 
-export const Modal = forwardRef<HTMLDivElement, ModalProps>(
+export const Modal = React.memo(forwardRef<HTMLDivElement, ModalProps>(
   ({ open = false, onClose, showCloseButton = true, size = 'md', className, children, ...props }, ref) => {
-    if (!open) return null;
+    const [shouldRender, setShouldRender] = useState(open);
+    const [isAnimating, setIsAnimating] = useState(false);
+
+    useEffect(() => {
+      if (open) {
+        setShouldRender(true);
+        // Small delay to trigger animation
+        requestAnimationFrame(() => {
+          setIsAnimating(true);
+        });
+      } else {
+        setIsAnimating(false);
+        // Wait for animation to complete before unmounting
+        const timer = setTimeout(() => {
+          setShouldRender(false);
+        }, 200); // Match animation duration
+        return () => clearTimeout(timer);
+      }
+    }, [open]);
+
+    if (!shouldRender) return null;
+
+    const handleBackdropClick = (e: React.MouseEvent) => {
+      if (e.target === e.currentTarget && onClose) {
+        onClose();
+      }
+    };
 
     return (
       <div
@@ -33,8 +60,11 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       >
         {/* Backdrop */}
         <div
-          className="fixed inset-0 bg-background/80 backdrop-blur-sm"
-          onClick={onClose}
+          className={`fixed inset-0 bg-background/80 backdrop-blur-sm transition-opacity duration-200 ${
+            isAnimating ? 'opacity-100' : 'opacity-0'
+          }`}
+          onClick={handleBackdropClick}
+          aria-hidden="true"
         />
 
         {/* Modal */}
@@ -42,7 +72,8 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
           ref={ref}
           className={cn(
             'relative z-50 w-full rounded-lg border bg-card p-6 shadow-lg',
-            'animate-in fade-in-0 zoom-in-95',
+            'transition-all duration-200',
+            isAnimating ? 'opacity-100 scale-100' : 'opacity-0 scale-95',
             sizeStyles[size],
             className
           )}
@@ -53,6 +84,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
             <button
               onClick={onClose}
               className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+              aria-label="Close modal"
             >
               <svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
@@ -66,7 +98,7 @@ export const Modal = forwardRef<HTMLDivElement, ModalProps>(
       </div>
     );
   }
-);
+));
 
 Modal.displayName = 'Modal';
 

package/src/presentation/organisms/Navbar.tsx

@@ -1,9 +1,10 @@
 /**
  * Navbar Component (Organism)
- * @description Navigation bar with logo and links
+ * @description Navigation bar with logo and links - optimized for performance
  */
 
 import { forwardRef, type HTMLAttributes } from 'react';
+import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -17,7 +18,7 @@ const variantStyles: Record<'default' | 'sticky' | 'fixed', string> = {
   fixed: 'fixed top-0 left-0 right-0 z-50',
 };
 
-export const Navbar = forwardRef<HTMLElement, NavbarProps>(
+export const Navbar = React.memo(forwardRef<HTMLElement, NavbarProps>(
   ({ className, variant = 'default', children, ...props }, ref) => {
     return (
       <nav
@@ -33,11 +34,11 @@ export const Navbar = forwardRef<HTMLElement, NavbarProps>(
       </nav>
     );
   }
-);
+));
 
 Navbar.displayName = 'Navbar';
 
-export const NavbarBrand = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+export const NavbarBrand = React.memo(forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
@@ -45,11 +46,11 @@ export const NavbarBrand = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElem
       {...props}
     />
   )
-);
+));
 
 NavbarBrand.displayName = 'NavbarBrand';
 
-export const NavbarLinks = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+export const NavbarLinks = React.memo(forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
@@ -57,11 +58,11 @@ export const NavbarLinks = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElem
       {...props}
     />
   )
-);
+));
 
 NavbarLinks.displayName = 'NavbarLinks';
 
-export const NavbarActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+export const NavbarActions = React.memo(forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
@@ -69,6 +70,6 @@ export const NavbarActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivEl
       {...props}
     />
   )
-);
+));
 
 NavbarActions.displayName = 'NavbarActions';

package/src/presentation/organisms/Table.tsx

@@ -4,6 +4,7 @@
  */
 
 import { forwardRef, type HTMLAttributes } from 'react';
+import React from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
@@ -62,7 +63,7 @@ export const TableFooter = forwardRef<HTMLTableSectionElement, HTMLAttributes<HT
 
 TableFooter.displayName = 'TableFooter';
 
-export const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
+export const TableRow = React.memo(forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTableRowElement>>(
   ({ className, ...props }, ref) => (
     <tr
       ref={ref}
@@ -73,11 +74,11 @@ export const TableRow = forwardRef<HTMLTableRowElement, HTMLAttributes<HTMLTable
       {...props}
     />
   )
-);
+));
 
 TableRow.displayName = 'TableRow';
 
-export const TableHead = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
+export const TableHead = React.memo(forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement>>(
   ({ className, ...props }, ref) => (
     <th
       ref={ref}
@@ -88,11 +89,11 @@ export const TableHead = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTab
       {...props}
     />
   )
-);
+));
 
 TableHead.displayName = 'TableHead';
 
-export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement> & { colSpan?: number }>(
+export const TableCell = React.memo(forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTableCellElement> & { colSpan?: number }>(
   ({ className, ...props }, ref) => (
     <td
       ref={ref}
@@ -103,7 +104,7 @@ export const TableCell = forwardRef<HTMLTableCellElement, HTMLAttributes<HTMLTab
       {...props}
     />
   )
-);
+));
 
 TableCell.displayName = 'TableCell';