@umituz/web-design-system 1.1.0 → 1.3.1

package/package.json

@@ -1,7 +1,8 @@
 {
   "name": "@umituz/web-design-system",
-  "version": "1.1.0",
-  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms) for React applications",
+  "version": "1.3.1",
+  "private": false,
+  "description": "Web Design System - Atomic Design components (Atoms, Molecules, Organisms, Templates) for React applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "sideEffects": false,
@@ -52,13 +53,17 @@
   },
   "peerDependencies": {
     "react": ">=18.0.0",
-    "react-dom": ">=18.0.0"
+    "react-dom": ">=18.0.0",
+    "clsx": ">=2.0.0",
+    "tailwind-merge": ">=2.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
+    "clsx": "^2.1.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "tailwind-merge": "^3.5.0",
     "typescript": "~5.9.2"
   },
   "publishConfig": {

package/src/global.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Global Type Declarations
+ * @description Global type definitions for the design system
+ */
+
+declare global {
+  interface ImportMetaEnv {
+    readonly DEV: boolean;
+    readonly MODE: string;
+    readonly BASE_URL: string;
+    readonly PROD: boolean;
+    readonly SSR: boolean;
+  }
+
+  interface ImportMeta {
+    readonly env: ImportMetaEnv;
+  }
+}
+
+export {};

package/src/infrastructure/error/ErrorDisplay.tsx

@@ -55,13 +55,9 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
   const errorMessage = error instanceof Error ? error.message : (error || 'Unknown error');
   const errorStack = error instanceof Error ? error.stack : undefined;
 
-  const containerStyle: React.CSSProperties = {
-    className
-  };
-
   if (variant === 'minimal') {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: config.color, ...containerStyle }}>
+      <div className={className} style={{ display: 'flex', alignItems: 'center', gap: '8px', fontSize: '14px', color: config.color }}>
         <span>{config.icon}</span>
         <span>{errorMessage}</span>
       </div>
@@ -70,12 +66,11 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   if (variant === 'inline') {
     return (
-      <div style={{
+      <div className={className} style={{
         padding: '12px 16px',
         background: config.bgColor,
         border: `1px solid ${config.borderColor}`,
-        borderRadius: '6px',
-        ...containerStyle
+        borderRadius: '6px'
       }}>
         <span style={{ marginRight: '8px' }}>{config.icon}</span>
         <span style={{ fontWeight: 500 }}>{title}:</span> {errorMessage}
@@ -85,12 +80,11 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   if (variant === 'card') {
     return (
-      <div style={{
+      <div className={className} style={{
         background: 'white',
         borderRadius: '8px',
         boxShadow: '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
-        border: 'none',
-        ...containerStyle
+        border: 'none'
       }}>
         <div style={{ padding: '24px' }}>
           <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '16px' }}>
@@ -209,7 +203,7 @@ export const ErrorDisplay: React.FC<ErrorDisplayProps> = ({
 
   // Default variant
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px', ...containerStyle }}>
+    <div className={className} style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', padding: '32px' }}>
       <div style={{
         width: '100%',
         maxWidth: '448px',

package/src/infrastructure/error/SuspenseWrapper.tsx

@@ -8,6 +8,7 @@ export interface SuspenseWrapperProps {
   loadingText?: string;
   variant?: 'default' | 'minimal' | 'card';
   className?: string;
+  style?: React.CSSProperties;
   showErrorBoundary?: boolean;
   errorBoundaryLevel?: 'page' | 'component' | 'feature';
 }
@@ -41,6 +42,7 @@ export const SuspenseWrapper: React.FC<SuspenseWrapperProps> = ({
   loadingText = 'Loading...',
   variant = 'default',
   className = '',
+  style,
   showErrorBoundary = true,
   errorBoundaryLevel = 'component'
 }) => {
@@ -57,18 +59,21 @@ export const SuspenseWrapper: React.FC<SuspenseWrapperProps> = ({
     </Suspense>
   );
 
-  if (showErrorBoundary) {
-    return (
-      <ErrorBoundary
-        level={errorBoundaryLevel}
-        fallback={errorFallback}
-      >
-        {suspenseContent}
-      </ErrorBoundary>
-    );
+  const content = showErrorBoundary ? (
+    <ErrorBoundary
+      level={errorBoundaryLevel}
+      fallback={errorFallback}
+    >
+      {suspenseContent}
+    </ErrorBoundary>
+  ) : suspenseContent;
+
+  // Wrap in div if className or style is provided
+  if (className || style) {
+    return <div className={className} style={style}>{content}</div>;
   }
 
-  return suspenseContent;
+  return content;
 };
 
 // Specialized Suspense wrappers

package/src/infrastructure/performance/useMemoryOptimization.ts

@@ -249,7 +249,7 @@ export const useMemoryOptimization = (config: MemoryOptimizationConfig = {}) =>
 };
 
 export const useMemoryLeakDetector = (componentName?: string) => {
-  const mountTime = useRef<number>(() => Date.now());
+  const mountTime = useRef<number>(Date.now());
   const [renderCount, setRenderCount] = useState<number>(0);
   const [lifespan, setLifespan] = useState<number>(0);
 

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

@@ -1,13 +1,13 @@
 /**
  * cn Utility
- * @description Conditional className utility (clsx + tailwind-merge alternative)
+ * @description Conditional className utility using clsx + tailwind-merge for proper Tailwind class merging
  */
 
-export type ClassName = string | undefined | null | false | ClassName[];
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
 
-export function cn(...classes: ClassName[]): string {
-  return classes
-    .flat(Infinity as any)
-    .filter(Boolean)
-    .join(' ');
+export type { ClassValue };
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
 }

package/src/infrastructure/utils/index.ts

@@ -6,5 +6,5 @@
 
 export {
   cn,
-  type ClassName,
 } from './cn.util';
+export type { ClassValue } from './cn.util';

package/src/presentation/atoms/Input.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, SizeVariant } from '../../domain/types';
 
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement>, BaseProps {
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
   error?: boolean;
   size?: Extract<SizeVariant, 'sm' | 'md' | 'lg'>;
 }

package/src/presentation/atoms/Slider.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type InputHTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
-export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size'>, BaseProps {
+export interface SliderProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'>, BaseProps {
   min?: number;
   max?: number;
   step?: number;

package/src/presentation/atoms/Text.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
-export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+export type TextElement = 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'label';
 export type TextVariant = 'body' | 'heading' | 'label' | 'caption';
 export type TextSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
 

package/src/presentation/atoms/Tooltip.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes, type ReactNode, useState, useRef, useE
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface TooltipProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+export interface TooltipProps extends Omit<HTMLAttributes<HTMLDivElement>, 'content'>, BaseProps {
   content: ReactNode;
   placement?: 'top' | 'bottom' | 'left' | 'right';
   delay?: number;
@@ -23,7 +23,7 @@ const placementStyles: Record<'top' | 'bottom' | 'left' | 'right', string> = {
 export const Tooltip = forwardRef<HTMLDivElement, TooltipProps>(
   ({ className, children, content, placement = 'top', delay = 200, ...props }, ref) => {
     const [isOpen, setIsOpen] = useState(false);
-    const timeoutRef = useRef<NodeJS.Timeout>();
+    const timeoutRef = useRef<number>();
 
     const handleMouseEnter = () => {
       timeoutRef.current = setTimeout(() => {

package/src/presentation/hooks/index.ts

@@ -15,11 +15,12 @@ export { useLocalStorage } from './useLocalStorage';
 export { useClickOutside } from './useClickOutside';
 
 export { useKeyboard, useEscape } from './useKeyboard';
-export type { KeyboardKey, KeyboardModifier, KeyboardOptions, UseClipboardReturn } from './useKeyboard';
+export type { KeyboardKey, KeyboardModifier, KeyboardOptions } from './useKeyboard';
 
 export { useDebounce } from './useDebounce';
 
 export { useClipboard } from './useClipboard';
+export type { UseClipboardReturn } from './useClipboard';
 
 export { useToggle } from './useToggle';
 

package/src/presentation/hooks/useClickOutside.ts

@@ -14,7 +14,7 @@ export function useClickOutside<T extends HTMLElement>(
   useEffect(() => {
     if (!enabled) return;
 
-    const handleClick = (event: MouseEvent) => {
+    const handleClick = (event: Event) => {
       if (ref.current && !ref.current.contains(event.target as Node)) {
         callback();
       }

package/src/presentation/molecules/CheckboxGroup.tsx

@@ -15,7 +15,7 @@ export interface CheckboxOption {
   disabled?: boolean;
 }
 
-export interface CheckboxGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+export interface CheckboxGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, BaseProps {
   options: CheckboxOption[];
   value?: string[];
   onChange?: (values: string[]) => void;

package/src/presentation/molecules/FormField.tsx

@@ -27,10 +27,10 @@ export const FormField = forwardRef<HTMLInputElement, FormFieldProps>(
     return (
       <div className={cn('space-y-1.5', className)} {...props}>
         {label && (
-          <Text as="label" variant="label" size="sm" htmlFor={fieldId}>
+          <label htmlFor={fieldId} className="text-sm font-medium">
             {label}
             {required && <span className="text-destructive ml-1">*</span>}
-          </Text>
+          </label>
         )}
 
         <Input

package/src/presentation/molecules/InputGroup.tsx

@@ -8,7 +8,7 @@ import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 import { Input } from '../atoms/Input';
 
-export interface InputGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+export interface InputGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   leftElement?: ReactNode;
   rightElement?: ReactNode;
 }

package/src/presentation/molecules/RadioGroup.tsx

@@ -15,7 +15,7 @@ export interface RadioOption {
   disabled?: boolean;
 }
 
-export interface RadioGroupProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+export interface RadioGroupProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>, BaseProps {
   name: string;
   options: RadioOption[];
   value?: string;

package/src/presentation/organisms/Alert.tsx

@@ -10,7 +10,7 @@ import { Icon } from '../atoms/Icon';
 
 export type AlertVariant = Extract<ColorVariant, 'success' | 'warning' | 'destructive'> | 'info';
 
-export interface AlertProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+export interface AlertProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   variant?: AlertVariant;
   showIcon?: boolean;
 }

package/src/presentation/organisms/Card.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface CardProps extends HTMLAttributes<HTMLDivElement>, BaseProps, ChildrenProps {
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
   variant?: 'default' | 'outlined' | 'elevated';
 }
 

package/src/presentation/organisms/Footer.tsx

@@ -0,0 +1,99 @@
+/**
+ * Footer Organism Component
+ * @description Footer with brand info, links, and social icons
+ */
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } 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;
+    icon: ReactNode;
+  }>;
+  copyright?: string;
+}
+
+export const Footer = forwardRef<HTMLElement, FooterProps>(
+  ({ className, brand, sections, social, copyright = '© 2026 UmitUZ. All rights reserved.', ...props }, ref) => {
+    return (
+      <footer
+        ref={ref}
+        className={cn('bg-bg-primary border-t border-border mt-20 transition-theme', className)}
+        {...props}
+      >
+        <div className="max-w-7xl mx-auto px-4 py-12">
+          <div className="grid md:grid-cols-3 gap-8">
+            {/* Brand */}
+            {brand && (
+              <div>
+                <h3 className="text-xl font-bold text-text-primary mb-3">{brand.name}</h3>
+                {brand.description && (
+                  <p className="text-text-secondary text-sm">{brand.description}</p>
+                )}
+              </div>
+            )}
+
+            {/* Sections */}
+            {sections?.map((section, index) => (
+              <div key={index}>
+                <h4 className="font-semibold text-text-primary mb-3">{section.title}</h4>
+                <ul className="space-y-2 text-sm">
+                  {section.links.map((link, linkIndex) => (
+                    <li key={linkIndex}>
+                      <a
+                        href={link.href}
+                        className="text-text-secondary hover:text-primary-light transition-colors"
+                      >
+                        {link.label}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+
+            {/* Social */}
+            {social && (
+              <div>
+                <h4 className="font-semibold text-text-primary mb-3">Connect</h4>
+                <div className="flex gap-4">
+                  {social.map((item, index) => (
+                    <a
+                      key={index}
+                      href={item.href}
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      className="text-text-secondary hover:text-primary-light transition-colors"
+                    >
+                      {item.icon}
+                    </a>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* Copyright */}
+          {copyright && (
+            <div className="border-t border-border mt-8 pt-8 text-center text-sm text-text-secondary">
+              <p>{copyright}</p>
+            </div>
+          )}
+        </div>
+      </footer>
+    );
+  }
+);
+
+Footer.displayName = 'Footer';

package/src/presentation/organisms/Navbar.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface NavbarProps extends HTMLAttributes<HTMLElement>, BaseProps, ChildrenProps {
+export interface NavbarProps extends HTMLAttributes<HTMLElement>, BaseProps {
   variant?: 'default' | 'sticky' | 'fixed';
 }
 

package/src/presentation/organisms/Table.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface TableProps extends HTMLAttributes<HTMLTableElement>, BaseProps, ChildrenProps {}
+export interface TableProps extends HTMLAttributes<HTMLTableElement>, BaseProps {}
 
 export const Table = forwardRef<HTMLTableElement, TableProps>(
   ({ className, children, ...props }, ref) => {

package/src/presentation/organisms/index.ts

@@ -36,3 +36,6 @@ export type { AccordionProps, AccordionItem } from './Accordion';
 
 export { Breadcrumbs } from './Breadcrumb';
 export type { BreadcrumbsProps, BreadcrumbItem } from './Breadcrumb';
+
+export { Footer } from './Footer';
+export type { FooterProps } from './Footer';

package/src/presentation/templates/Form.tsx

@@ -3,11 +3,11 @@
  * @description Complete form structure
  */
 
-import { forwardRef, type FormHTMLAttributes } from 'react';
+import { forwardRef, type FormHTMLAttributes, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface FormProps extends FormHTMLAttributes<HTMLFormElement>, BaseProps, ChildrenProps {
+export interface FormProps extends FormHTMLAttributes<HTMLFormElement>, BaseProps {
   onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
 }
 

package/src/presentation/templates/List.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface ListProps extends HTMLAttributes<HTMLUListElement>, BaseProps, ChildrenProps {
+export interface ListProps extends HTMLAttributes<HTMLUListElement>, BaseProps {
   variant?: 'default' | 'bordered' | 'spaced';
 }
 

package/src/presentation/templates/PageHeader.tsx

@@ -0,0 +1,78 @@
+/**
+ * PageHeader Template Component
+ * @description Centralized page header with consistent heading styling
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { type ReactNode } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export type TextAlign = 'left' | 'center' | 'right';
+export type HeaderSize = 'small' | 'medium' | 'large';
+
+export interface PageHeaderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'title'>, BaseProps {
+  title: ReactNode;
+  subtitle?: string;
+  align?: TextAlign;
+  size?: HeaderSize;
+  actions?: ReactNode;
+}
+
+const sizeClasses: Record<HeaderSize, { title: string; subtitle: string }> = {
+  small: {
+    title: 'text-2xl md:text-3xl font-bold',
+    subtitle: 'text-base md:text-lg',
+  },
+  medium: {
+    title: 'text-3xl md:text-4xl font-bold',
+    subtitle: 'text-lg md:text-xl',
+  },
+  large: {
+    title: 'text-4xl md:text-5xl lg:text-6xl font-bold',
+    subtitle: 'text-lg md:text-xl',
+  },
+};
+
+const alignClasses: Record<TextAlign, string> = {
+  left: 'text-left',
+  center: 'text-center',
+  right: 'text-right',
+};
+
+const getAlignFlexClass = (align: TextAlign, hasActions: boolean): string => {
+  if (!hasActions) return '';
+  return align === 'center'
+    ? 'flex justify-center'
+    : align === 'right'
+      ? 'flex justify-end'
+      : 'flex justify-start';
+};
+
+export const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
+  ({ title, subtitle, align = 'center', size = 'large', actions, className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('mb-6 md:mb-12', alignClasses[align], className)}
+        {...props}
+      >
+        <h1 className={cn(sizeClasses[size].title, 'text-text-primary mb-4')}>
+          {title}
+        </h1>
+        {subtitle && (
+          <p className={cn(sizeClasses[size].subtitle, 'text-text-secondary')}>
+            {subtitle}
+          </p>
+        )}
+        {actions && (
+          <div className={cn('mt-6 md:mt-8', getAlignFlexClass(align, true))}>
+            {actions}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+PageHeader.displayName = 'PageHeader';

package/src/presentation/templates/PageLayout.tsx

@@ -0,0 +1,38 @@
+/**
+ * PageLayout Template Component
+ * @description Centralized page layout with consistent padding, max-width, and theme integration
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps, ChildrenProps } from '../../domain/types';
+
+export type MaxWidth = '4xl' | '7xl' | 'full';
+
+export interface PageLayoutProps extends HTMLAttributes<HTMLDivElement>, BaseProps {
+  maxWidth?: MaxWidth;
+}
+
+const maxWidthClasses: Record<MaxWidth, string> = {
+  '4xl': 'max-w-4xl',
+  '7xl': 'max-w-7xl',
+  'full': 'max-w-full',
+};
+
+export const PageLayout = forwardRef<HTMLDivElement, PageLayoutProps>(
+  ({ children, maxWidth = '7xl', className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className="min-h-screen bg-surface-gradient py-8 md:py-12 px-4 transition-theme"
+        {...props}
+      >
+        <div className={cn(maxWidthClasses[maxWidth], 'mx-auto', className)}>
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+
+PageLayout.displayName = 'PageLayout';

package/src/presentation/templates/ProjectSkeleton.tsx

@@ -0,0 +1,35 @@
+/**
+ * ProjectSkeleton Template Component
+ * @description Loading skeleton for project cards
+ */
+
+import { forwardRef, type HTMLAttributes } from 'react';
+import { cn } from '../../infrastructure/utils';
+import type { BaseProps } from '../../domain/types';
+
+export interface ProjectSkeletonProps extends HTMLAttributes<HTMLDivElement>, BaseProps {}
+
+export const ProjectSkeleton = forwardRef<HTMLDivElement, ProjectSkeletonProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn('bg-bg-card rounded-xl overflow-hidden border border-border transition-theme', className)}
+        {...props}
+      >
+        <div className="h-28 bg-bg-tertiary animate-pulse" />
+        <div className="p-5">
+          <div className="flex gap-2 mb-3">
+            <div className="w-16 h-6 bg-bg-tertiary rounded-full animate-pulse" />
+            <div className="w-20 h-6 bg-bg-tertiary rounded-full animate-pulse" />
+          </div>
+          <div className="w-3/4 h-5 bg-bg-tertiary rounded mb-2 animate-pulse" />
+          <div className="w-full h-4 bg-bg-tertiary rounded mb-4 animate-pulse" />
+          <div className="w-1/2 h-4 bg-bg-tertiary rounded animate-pulse" />
+        </div>
+      </div>
+    );
+  }
+);
+
+ProjectSkeleton.displayName = 'ProjectSkeleton';

package/src/presentation/templates/Section.tsx

@@ -7,7 +7,7 @@ import { forwardRef, type HTMLAttributes } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps, ChildrenProps } from '../../domain/types';
 
-export interface SectionProps extends HTMLAttributes<HTMLElement>, BaseProps, ChildrenProps {
+export interface SectionProps extends HTMLAttributes<HTMLElement>, BaseProps {
   title?: string;
   description?: string;
 }

package/src/presentation/templates/index.ts

@@ -12,3 +12,12 @@ export type { ListProps } from './List';
 
 export { Section } from './Section';
 export type { SectionProps } from './Section';
+
+export { PageLayout } from './PageLayout';
+export type { PageLayoutProps, MaxWidth } from './PageLayout';
+
+export { PageHeader } from './PageHeader';
+export type { PageHeaderProps, TextAlign, HeaderSize } from './PageHeader';
+
+export { ProjectSkeleton } from './ProjectSkeleton';
+export type { ProjectSkeletonProps } from './ProjectSkeleton';