@umituz/web-design-system 3.1.21 → 4.0.0

package/src/presentation/molecules/ActiveFilterTags.tsx

@@ -3,6 +3,8 @@
  * @description Display active filters with remove buttons
  */
 
+import { X } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
 export interface ActiveFilterTagsProps extends BaseProps {
@@ -24,7 +26,7 @@ export const ActiveFilterTags = ({
   className,
 }: ActiveFilterTagsProps) => {
   const categoryName = selectedCategory
-    ? categories.find(c => c.id === selectedCategory)?.name
+    ? categories.find((c) => c.id === selectedCategory)?.name
     : null;
 
   if (!selectedCategory && selectedTags.length === 0) {
@@ -32,49 +34,48 @@ export const ActiveFilterTags = ({
   }
 
   return (
-    <div className={`hidden lg:flex flex-wrap items-center gap-2 mb-4 md:mb-6 ${className || ''}`}>
-      <span className="text-sm text-text-secondary">Active filters:</span>
+    <div
+      role="region"
+      aria-label="Active filters"
+      className={cn('mb-4 hidden flex-wrap items-center gap-2 md:mb-6 lg:flex', className)}
+    >
+      <span className="text-sm text-muted-foreground">Active filters:</span>
 
-      {/* Category Tag */}
       {categoryName && (
-        <span className="inline-flex items-center gap-1 px-3 py-1.5 bg-primary-light text-text-primary rounded-full text-xs font-medium">
+        <span className="inline-flex items-center gap-1 rounded-full bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground">
           {categoryName}
           <button
+            type="button"
             onClick={onCategoryRemove}
-            className="ml-1 hover:opacity-70 transition-opacity"
             aria-label={`Remove ${categoryName} filter`}
+            className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <X className="h-3 w-3" aria-hidden="true" />
           </button>
         </span>
       )}
 
-      {/* Tag Buttons */}
       {selectedTags.map((tag) => (
         <span
           key={tag}
-          className="inline-flex items-center gap-1 px-3 py-1.5 bg-bg-secondary text-text-primary rounded-full text-xs font-medium border border-border"
+          className="inline-flex items-center gap-1 rounded-full border border-border bg-secondary px-3 py-1.5 text-xs font-medium text-foreground"
         >
           {tag}
           <button
+            type="button"
             onClick={() => onTagRemove(tag)}
-            className="ml-1 hover:opacity-70 transition-opacity"
             aria-label={`Remove ${tag} filter`}
+            className="ml-1 inline-flex h-4 w-4 items-center justify-center rounded-full transition-opacity hover:opacity-70 focus:outline-none focus:ring-2 focus:ring-ring"
           >
-            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-              <path d="M18 6L6 18M6 6l12 12" />
-            </svg>
+            <X className="h-3 w-3" aria-hidden="true" />
           </button>
         </span>
       ))}
 
-      {/* Clear All Button */}
       <button
-        onClick={onClearAll}
-        className="px-3 py-1.5 text-primary-light hover:underline text-xs font-medium"
         type="button"
+        onClick={onClearAll}
+        className="px-3 py-1.5 text-xs font-medium text-primary underline-offset-4 transition-colors hover:underline"
       >
         Clear all
       </button>

package/src/presentation/molecules/Avatar.tsx

@@ -59,7 +59,7 @@ const AvatarImage = forwardRef<HTMLImageElement, AvatarImageProps>(
 
 AvatarImage.displayName = 'AvatarImage';
 
-export interface AvatarFallbackProps extends HTMLAttributes<HTMLDivElement> {}
+export type AvatarFallbackProps = HTMLAttributes<HTMLDivElement>;
 
 const AvatarFallback = forwardRef<HTMLDivElement, AvatarFallbackProps>(
   ({ className, ...props }, ref) => {

package/src/presentation/molecules/CodeBlock.tsx

@@ -6,6 +6,9 @@
 import { useState, useEffect } from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { ChevronDown, ChevronUp, Check, Copy } from 'lucide-react';
+import { cn } from '../../infrastructure/utils';
+import { TIMING } from '../../infrastructure/constants/timing.constants';
 import type { BaseProps } from '../../domain/types';
 
 export interface CodeBlockProps extends BaseProps {
@@ -13,106 +16,107 @@ export interface CodeBlockProps extends BaseProps {
   language?: string;
   filename?: string;
   showLineNumbers?: boolean;
+  /** Lines threshold to enable collapse/expand. */
+  collapseThreshold?: number;
 }
 
+const DEFAULT_LANGUAGE = 'javascript';
+const DEFAULT_COLLAPSE_THRESHOLD = 10;
+const COPY_RESET_MS = 2000;
+const COLLAPSED_MAX_HEIGHT = 'max-h-80';
+
 export const CodeBlock = ({
   children,
-  language = 'javascript',
+  language = DEFAULT_LANGUAGE,
   filename,
   showLineNumbers = false,
+  collapseThreshold = DEFAULT_COLLAPSE_THRESHOLD,
   className,
 }: CodeBlockProps) => {
   const [copied, setCopied] = useState(false);
   const [isExpanded, setIsExpanded] = useState(false);
 
-  // Cleanup copy timeout
   useEffect(() => {
-    if (copied) {
-      const timeout = setTimeout(() => setCopied(false), 2000);
-      return () => clearTimeout(timeout);
-    }
+    if (!copied) return;
+    const timeout = setTimeout(() => setCopied(false), COPY_RESET_MS);
+    return () => clearTimeout(timeout);
   }, [copied]);
 
   const handleCopy = async () => {
+    if (typeof navigator === 'undefined' || !navigator.clipboard) {
+      console.error('[CodeBlock] Clipboard API not available');
+      return;
+    }
     try {
       await navigator.clipboard.writeText(children);
       setCopied(true);
     } catch (error) {
-      console.error('Failed to copy code:', error);
+      console.error('[CodeBlock] Failed to copy code:', error);
     }
   };
 
-  // Auto-detect language if not provided
-  const detectedLanguage = language || 'javascript';
-
-  // Check if code is long enough for collapse
   const lineCount = children.split('\n').length;
-  const isLongCode = lineCount > 10;
+  const isLongCode = lineCount > collapseThreshold;
 
   return (
-    <div className={`my-6 rounded-lg border border-border overflow-hidden bg-bg-card transition-theme ${className || ''}`}>
-      {/* Header */}
-      <div className="flex items-center justify-between px-4 py-2 bg-bg-tertiary border-b border-border">
+    <div
+      className={cn(
+        'my-6 overflow-hidden rounded-lg border border-border bg-card transition-colors',
+        className
+      )}
+    >
+      <div className="flex items-center justify-between border-b border-border bg-secondary px-4 py-2">
         <div className="flex items-center gap-2">
           {filename && (
-            <span className="text-xs font-medium text-text-secondary">{filename}</span>
+            <span className="text-xs font-medium text-muted-foreground">{filename}</span>
           )}
-          <span className="text-xs px-2 py-1 bg-bg-primary text-text-primary rounded-md font-medium">
-            {detectedLanguage}
+          <span className="rounded-md bg-muted px-2 py-1 text-xs font-medium text-foreground">
+            {language}
           </span>
         </div>
 
         <div className="flex items-center gap-2">
           {isLongCode && (
             <button
-              onClick={() => setIsExpanded(!isExpanded)}
-              className="p-1 text-text-secondary hover:text-text-primary rounded transition-colors"
-              title={isExpanded ? 'Collapse' : 'Expand'}
               type="button"
+              onClick={() => setIsExpanded((prev) => !prev)}
               aria-label={isExpanded ? 'Collapse code' : 'Expand code'}
+              title={isExpanded ? 'Collapse' : 'Expand'}
+              className="rounded p-1 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
             >
               {isExpanded ? (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="18 15 12 9 6 15" />
-                </svg>
+                <ChevronUp className="h-4 w-4" aria-hidden="true" />
               ) : (
-                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                  <polyline points="6 9 12 15 18 9" />
-                </svg>
+                <ChevronDown className="h-4 w-4" aria-hidden="true" />
               )}
             </button>
           )}
 
           <button
-            onClick={handleCopy}
-            className={`flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium rounded-lg transition-all ${
-              copied
-                ? 'bg-green-500 text-white'
-                : 'bg-bg-secondary text-text-primary hover:bg-bg-tertiary border border-border'
-            }`}
-            title={copied ? 'Copied!' : 'Copy code'}
             type="button"
+            onClick={handleCopy}
             aria-label={copied ? 'Code copied' : 'Copy code'}
+            title={copied ? 'Copied!' : 'Copy code'}
+            className={cn(
+              'flex items-center gap-1.5 rounded-lg border border-border px-3 py-1.5 text-xs font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring',
+              copied
+                ? 'border-success bg-success text-success-foreground'
+                : 'border-border bg-secondary text-foreground hover:bg-muted'
+            )}
           >
             {copied ? (
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <polyline points="20 6 9 17 4 12" />
-              </svg>
+              <Check className="h-3.5 w-3.5" aria-hidden="true" />
             ) : (
-              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
-                <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
-                <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
-              </svg>
+              <Copy className="h-3.5 w-3.5" aria-hidden="true" />
             )}
             <span className="hidden sm:inline">{copied ? 'Copied!' : 'Copy'}</span>
           </button>
         </div>
       </div>
 
-      {/* Code */}
-      <div className={isLongCode && !isExpanded ? 'max-h-80 overflow-hidden' : ''}>
+      <div className={cn(isLongCode && !isExpanded && COLLAPSED_MAX_HEIGHT, 'overflow-hidden')}>
         <SyntaxHighlighter
-          language={detectedLanguage}
+          language={language}
           style={vscDarkPlus}
           showLineNumbers={showLineNumbers}
           customStyle={{
@@ -126,14 +130,13 @@ export const CodeBlock = ({
         </SyntaxHighlighter>
       </div>
 
-      {/* Expand hint for collapsed code */}
       {isLongCode && !isExpanded && (
-        <div className="px-4 py-2 bg-bg-secondary text-center border-t border-border">
+        <div className="border-t border-border bg-secondary px-4 py-2 text-center">
           <button
-            onClick={() => setIsExpanded(true)}
-            className="text-sm text-primary-light hover:underline font-medium"
             type="button"
+            onClick={() => setIsExpanded(true)}
             aria-label={`Show all ${lineCount} lines`}
+            className="text-sm font-medium text-primary underline-offset-4 transition-colors hover:underline focus:outline-none focus:ring-2 focus:ring-ring"
           >
             Show all {lineCount} lines
           </button>

package/src/presentation/molecules/ListItem.tsx

@@ -1,27 +1,25 @@
 /**
  * ListItem Component (Molecule)
  * @description Reusable list item with icon, content, and actions
- * Reduces boilerplate in list components throughout the app
  */
 
-import { forwardRef, type ReactNode } from 'react';
+import { forwardRef, type ReactNode, type MouseEvent } from 'react';
 import { cn } from '../../infrastructure/utils';
 import type { BaseProps } from '../../domain/types';
 
-export interface ListItemProps extends BaseProps {
+export interface ListItemProps extends Omit<BaseProps, 'id'> {
   title: string;
   description?: string;
   icon?: ReactNode;
   actions?: ReactNode;
   leftContent?: ReactNode;
   rightContent?: ReactNode;
-  onClick?: () => void;
+  onClick?: (event: MouseEvent<HTMLElement>) => void;
   href?: string;
   disabled?: boolean;
   selected?: boolean;
   size?: 'sm' | 'md' | 'lg';
   variant?: 'default' | 'bordered' | 'ghost';
-  className?: string;
   id?: string;
 }
 
@@ -29,27 +27,27 @@ const sizeStyles = {
   sm: 'p-3 gap-3',
   md: 'p-4 gap-4',
   lg: 'p-5 gap-5',
-};
+} as const;
 
 const titleSizeStyles = {
   sm: 'text-sm',
   md: 'text-base',
   lg: 'text-lg',
-};
+} as const;
 
 const descriptionSizeStyles = {
   sm: 'text-xs',
   md: 'text-sm',
   lg: 'text-base',
-};
+} as const;
 
 const iconSizeStyles = {
   sm: 'h-4 w-4',
   md: 'h-5 w-5',
   lg: 'h-6 w-6',
-};
+} as const;
 
-export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+export const ListItem = forwardRef<HTMLElement, ListItemProps>(
   (
     {
       className,
@@ -70,46 +68,57 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
     ref
   ) => {
     const baseClasses = cn(
-      'flex items-center justify-between w-full transition-all duration-200',
+      'flex w-full items-center justify-between transition-all duration-200',
       sizeStyles[size],
       !disabled && onClick && 'cursor-pointer hover:bg-muted/50 active:scale-[0.98]',
-      selected && 'bg-muted/50 border-primary',
-      variant === 'bordered' && 'border border-border rounded-lg',
+      selected && 'border-primary bg-muted/50',
+      variant === 'bordered' && 'rounded-lg border border-border',
       variant === 'ghost' && 'hover:bg-muted/30',
-      disabled && 'opacity-50 cursor-not-allowed',
+      disabled && 'cursor-not-allowed opacity-50',
       className
     );
 
     const content = (
       <>
-        {leftContent || icon ? (
-          <div className="flex items-center gap-3 flex-shrink-0">
-            {icon && <div className={cn(iconSizeStyles[size], 'text-muted-foreground')}>{icon}</div>}
-            {!icon && leftContent}
+        {(leftContent || icon) && (
+          <div className="flex shrink-0 items-center gap-3">
+            {icon ? (
+              <div className={cn(iconSizeStyles[size], 'text-muted-foreground')}>{icon}</div>
+            ) : (
+              leftContent
+            )}
           </div>
-        ) : null}
+        )}
 
-        <div className="flex-1 min-w-0">
-          <p className={cn('font-medium text-foreground truncate', titleSizeStyles[size])}>{title}</p>
+        <div className="min-w-0 flex-1">
+          <p className={cn('truncate font-medium text-foreground', titleSizeStyles[size])}>
+            {title}
+          </p>
           {description && (
-            <p className={cn('text-muted-foreground truncate', descriptionSizeStyles[size])}>{description}</p>
+            <p className={cn('truncate text-muted-foreground', descriptionSizeStyles[size])}>
+              {description}
+            </p>
           )}
         </div>
 
-        {rightContent || actions ? (
-          <div className="flex items-center gap-2 flex-shrink-0">
+        {(rightContent || actions) && (
+          <div className="flex shrink-0 items-center gap-2">
             {rightContent}
             {actions}
           </div>
-        ) : null}
+        )}
       </>
     );
 
-    // NOTE: Polymorphic component - renders as anchor when href is provided
-    // "ref as any" is necessary due to TypeScript limitations with polymorphic refs
     if (href && !disabled) {
       return (
-        <a href={href} className={baseClasses} id={id} ref={ref as any}>
+        <a
+          ref={ref as React.Ref<HTMLAnchorElement>}
+          href={href}
+          className={baseClasses}
+          id={id}
+          onClick={onClick}
+        >
           {content}
         </a>
       );
@@ -117,10 +126,12 @@ export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
 
     return (
       <div
-        ref={ref}
+        ref={ref as React.Ref<HTMLDivElement>}
         className={baseClasses}
         onClick={disabled ? undefined : onClick}
         id={id}
+        role={onClick && !disabled ? 'button' : undefined}
+        tabIndex={onClick && !disabled ? 0 : undefined}
       >
         {content}
       </div>

package/src/presentation/molecules/Select.tsx

@@ -76,7 +76,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         position === 'popper' &&
           'data-[side=bottom]:translate-y-1 data-[side=left]:translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:translate-y-1',
         className

package/src/presentation/molecules/Toggle.tsx

@@ -16,13 +16,13 @@ export interface ToggleProps extends ButtonHTMLAttributes<HTMLButtonElement>, Ba
 const sizeStyles = {
   sm: 'h-5 w-9',
   md: 'h-6 w-11',
-  lg: 'h-7 w-13',
+  lg: 'h-7 w-14',
 };
 
 const thumbSizeStyles = {
-  sm: 'h-4 w-4 data-[state=checked:translate-x-4',
-  md: 'h-5 w-5 data-[state=checked:translate-x-5',
-  lg: 'h-6 w-6 data-[state=checked:translate-x-6',
+  sm: 'h-4 w-4 data-[state=checked]:translate-x-4',
+  md: 'h-5 w-5 data-[state=checked]:translate-x-5',
+  lg: 'h-6 w-6 data-[state=checked]:translate-x-7',
 };
 
 export const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(

package/src/presentation/molecules/index.ts

@@ -42,8 +42,5 @@ export type { ListItemProps } from './ListItem';
 export { ActiveFilterTags } from './ActiveFilterTags';
 export type { ActiveFilterTagsProps } from './ActiveFilterTags';
 
-export { Breadcrumb } from './Breadcrumb';
-export type { BreadcrumbProps, BreadcrumbItem } from './Breadcrumb';
-
 export { CodeBlock } from './CodeBlock';
 export type { CodeBlockProps } from './CodeBlock';

package/src/presentation/organisms/Alert.tsx

@@ -16,7 +16,7 @@ const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       ref={ref}
       role="alert"
       className={cn(
-        'relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+        'relative w-full rounded-lg border border-border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
         variant === 'default' && 'bg-background text-foreground',
         variant === 'destructive' && 'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
         className

package/src/presentation/organisms/DataTable.tsx

@@ -4,6 +4,7 @@
  */
 
 import { useState, useMemo } from 'react';
+import { ArrowDown, ArrowUp, ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
 import { cn } from '../../infrastructure/utils';
 import {
   Table,
@@ -16,7 +17,11 @@ import {
   TableCaption,
 } from './Table';
 import { Button } from '../atoms/Button';
-import { ChevronLeft, ChevronRight, ChevronsLeft, ChevronsRight } from 'lucide-react';
+import {
+  computeTotalPages,
+  clampPageNumber,
+  computePageBounds,
+} from '../../infrastructure/utils/calculation.utils';
 import type { BaseProps, ColorVariant } from '../../domain/types';
 import type { MediumSizes } from '../../infrastructure/constants';
 
@@ -100,7 +105,9 @@ export function DataTable<T extends Record<string, unknown>>({
     return sortedData.slice(start, end);
   }, [sortedData, currentPage, paginated, pageSize]);
 
-  const totalPages = Math.ceil(data.length / pageSize);
+  const totalPages = computeTotalPages(data.length, pageSize);
+  const safePage = clampPageNumber(currentPage, totalPages);
+  const pageBounds = computePageBounds(currentPage, pageSize, data.length);
 
   const renderCell = (row: T, column: Column<T>) => {
     if (column.cell) {
@@ -154,7 +161,13 @@ export function DataTable<T extends Record<string, unknown>>({
                 <div className="flex items-center gap-2">
                   {column.header}
                   {column.sortable && sortable && sortColumn === column.id && (
-                    <span className="text-xs">{sortDirection === 'asc' ? '↑' : '↓'}</span>
+                    <span className="text-xs">
+                      {sortDirection === 'asc' ? (
+                        <ArrowUp className="h-3 w-3" aria-hidden="true" />
+                      ) : (
+                        <ArrowDown className="h-3 w-3" aria-hidden="true" />
+                      )}
+                    </span>
                   )}
                 </div>
               </TableHead>
@@ -185,33 +198,33 @@ export function DataTable<T extends Record<string, unknown>>({
               <TableCell colSpan={columns.length}>
                 <div className="flex items-center justify-between">
                   <p className={cn('text-muted-foreground', sizeStyles[size])}>
-                    Showing {((currentPage - 1) * pageSize) + 1} to {Math.min(currentPage * pageSize, data.length)} of {data.length} results
+                    Showing {pageBounds.startIndex} to {pageBounds.endIndex} of {data.length} results
                   </p>
                   <div className="flex items-center gap-2">
                     <Button
                       size="sm"
                       variant="outline"
                       onClick={() => setCurrentPage(1)}
-                      disabled={currentPage === 1}
+                      disabled={safePage === 1}
                     >
                       <ChevronsLeft className="h-4 w-4" />
                     </Button>
                     <Button
                       size="sm"
                       variant="outline"
-                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
-                      disabled={currentPage === 1}
+                      onClick={() => setCurrentPage((p) => clampPageNumber(p - 1, totalPages))}
+                      disabled={safePage === 1}
                     >
                       <ChevronLeft className="h-4 w-4" />
                     </Button>
                     <span className={cn('text-sm font-medium', sizeStyles[size])}>
-                      Page {currentPage} of {totalPages}
+                      Page {safePage} of {totalPages}
                     </span>
                     <Button
                       size="sm"
                       variant="outline"
-                      onClick={() => setCurrentPage((p) => Math.min(totalPages, p + 1))}
-                      disabled={currentPage === totalPages}
+                      onClick={() => setCurrentPage((p) => clampPageNumber(p + 1, totalPages))}
+                      disabled={safePage === totalPages}
                     >
                       <ChevronRight className="h-4 w-4" />
                     </Button>
@@ -219,7 +232,7 @@ export function DataTable<T extends Record<string, unknown>>({
                       size="sm"
                       variant="outline"
                       onClick={() => setCurrentPage(totalPages)}
-                      disabled={currentPage === totalPages}
+                      disabled={safePage === totalPages}
                     >
                       <ChevronsRight className="h-4 w-4" />
                     </Button>

package/src/presentation/organisms/Dialog.tsx

@@ -40,7 +40,7 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+        'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
         className
       )}
       {...props}

package/src/presentation/organisms/DropdownMenu.tsx

@@ -49,7 +49,7 @@ const DropdownMenuSubContent = React.forwardRef<
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
-      'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}
@@ -67,7 +67,7 @@ const DropdownMenuContent = React.forwardRef<
       collisionPadding={collisionPadding}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md',
         'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}

package/src/presentation/organisms/HoverCard.tsx

@@ -20,7 +20,7 @@ const HoverCardContent = React.forwardRef<
     align={align}
     sideOffset={sideOffset}
     className={cn(
-      'z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+      'z-50 w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
       className
     )}
     {...props}

package/src/presentation/organisms/LoadingState.tsx

@@ -46,11 +46,7 @@ export const LoadingState = forwardRef<HTMLDivElement, LoadingStateProps>(
             {[0, 1, 2].map((i) => (
               <div
                 key={i}
-                className={cn(
-                  'w-2 h-2 bg-primary rounded-full animate-bounce',
-                  'w-1.5 h-1.5 sm:w-2 sm:h-2',
-                  'lg:w-2.5 h-2.5'
-                )}
+                className="h-1.5 w-1.5 animate-bounce rounded-full bg-primary sm:h-2 sm:w-2 lg:h-2.5 lg:w-2.5"
                 style={{ animationDelay: `${i * 0.15}s` }}
               />
             ))}

package/src/presentation/organisms/Popover.tsx

@@ -21,7 +21,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 w-72 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className
       )}
       {...props}