@thangnqdev/ui 0.2.0 → 0.2.2

package/src/navigation/Pagination.tsx

@@ -1,114 +1,114 @@
-import React, { forwardRef } from 'react';
-import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
-import { Button } from '../buttons/Button';
-import { cn } from '../utils/cn';
-
-export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
-  currentPage: number;
-  totalPages: number;
-  onPageChange: (page: number) => void;
-  siblingCount?: number;
-}
-
-export const Pagination = forwardRef<HTMLElement, PaginationProps>(
-  ({ className, currentPage, totalPages, onPageChange, siblingCount = 1, ...props }, ref) => {
-    const generatePages = () => {
-      const totalPageNumbers = siblingCount * 2 + 5;
-
-      if (totalPages <= totalPageNumbers) {
-        return Array.from({ length: totalPages }, (_, i) => i + 1);
-      }
-
-      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-
-      const shouldShowLeftDots = leftSiblingIndex > 2;
-      const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
-
-      if (!shouldShowLeftDots && shouldShowRightDots) {
-        const leftItemCount = 3 + 2 * siblingCount;
-        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
-        return [...leftRange, 'DOTS', totalPages];
-      }
-
-      if (shouldShowLeftDots && !shouldShowRightDots) {
-        const rightItemCount = 3 + 2 * siblingCount;
-        const rightRange = Array.from(
-          { length: rightItemCount },
-          (_, i) => totalPages - rightItemCount + i + 1
-        );
-        return [1, 'DOTS', ...rightRange];
-      }
-
-      if (shouldShowLeftDots && shouldShowRightDots) {
-        const middleRange = Array.from(
-          { length: rightSiblingIndex - leftSiblingIndex + 1 },
-          (_, i) => leftSiblingIndex + i
-        );
-        return [1, 'DOTS', ...middleRange, 'DOTS', totalPages];
-      }
-
-      return [];
-    };
-
-    const pages = generatePages();
-
-    return (
-      <nav
-        ref={ref}
-        role="navigation"
-        aria-label="Pagination"
-        className={cn('flex items-center justify-center gap-1.5', className)}
-        {...props}
-      >
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={currentPage <= 1}
-          onClick={() => onPageChange(currentPage - 1)}
-          aria-label="Go to previous page"
-        >
-          <ChevronLeft className="w-4 h-4" />
-        </Button>
-
-        {pages.map((p, index) => {
-          if (p === 'DOTS') {
-            return (
-              <span key={`dots-${index}`} className="flex items-center justify-center w-8 h-8 text-[var(--ui-text-muted)]">
-                <MoreHorizontal className="w-4 h-4" />
-              </span>
-            );
-          }
-
-          const pageNum = Number(p);
-          const isActive = pageNum === currentPage;
-
-          return (
-            <Button
-              key={pageNum}
-              variant={isActive ? 'primary' : 'ghost'}
-              size="sm"
-              aria-current={isActive ? 'page' : undefined}
-              onClick={() => onPageChange(pageNum)}
-              className="w-8 h-8 p-0 text-xs font-semibold"
-            >
-              {pageNum}
-            </Button>
-          );
-        })}
-
-        <Button
-          variant="outline"
-          size="sm"
-          disabled={currentPage >= totalPages}
-          onClick={() => onPageChange(currentPage + 1)}
-          aria-label="Go to next page"
-        >
-          <ChevronRight className="w-4 h-4" />
-        </Button>
-      </nav>
-    );
-  }
-);
-
-Pagination.displayName = 'Pagination';
+import React, { forwardRef } from 'react';
+import { ChevronLeft, ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Button } from '../buttons/Button';
+import { cn } from '../utils/cn';
+
+export interface PaginationProps extends React.HTMLAttributes<HTMLElement> {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  siblingCount?: number;
+}
+
+export const Pagination = forwardRef<HTMLElement, PaginationProps>(
+  ({ className, currentPage, totalPages, onPageChange, siblingCount = 1, ...props }, ref) => {
+    const generatePages = () => {
+      const totalPageNumbers = siblingCount * 2 + 5;
+
+      if (totalPages <= totalPageNumbers) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+      }
+
+      const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+      const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+
+      const shouldShowLeftDots = leftSiblingIndex > 2;
+      const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+
+      if (!shouldShowLeftDots && shouldShowRightDots) {
+        const leftItemCount = 3 + 2 * siblingCount;
+        const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+        return [...leftRange, 'DOTS', totalPages];
+      }
+
+      if (shouldShowLeftDots && !shouldShowRightDots) {
+        const rightItemCount = 3 + 2 * siblingCount;
+        const rightRange = Array.from(
+          { length: rightItemCount },
+          (_, i) => totalPages - rightItemCount + i + 1
+        );
+        return [1, 'DOTS', ...rightRange];
+      }
+
+      if (shouldShowLeftDots && shouldShowRightDots) {
+        const middleRange = Array.from(
+          { length: rightSiblingIndex - leftSiblingIndex + 1 },
+          (_, i) => leftSiblingIndex + i
+        );
+        return [1, 'DOTS', ...middleRange, 'DOTS', totalPages];
+      }
+
+      return [];
+    };
+
+    const pages = generatePages();
+
+    return (
+      <nav
+        ref={ref}
+        role="navigation"
+        aria-label="Pagination"
+        className={cn('flex items-center justify-center gap-1.5', className)}
+        {...props}
+      >
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage <= 1}
+          onClick={() => onPageChange(currentPage - 1)}
+          aria-label="Go to previous page"
+        >
+          <ChevronLeft className="w-4 h-4" />
+        </Button>
+
+        {pages.map((p, index) => {
+          if (p === 'DOTS') {
+            return (
+              <span key={`dots-${index}`} className="flex items-center justify-center w-8 h-8 text-[var(--ui-text-muted)]">
+                <MoreHorizontal className="w-4 h-4" />
+              </span>
+            );
+          }
+
+          const pageNum = Number(p);
+          const isActive = pageNum === currentPage;
+
+          return (
+            <Button
+              key={pageNum}
+              variant={isActive ? 'primary' : 'ghost'}
+              size="sm"
+              aria-current={isActive ? 'page' : undefined}
+              onClick={() => onPageChange(pageNum)}
+              className="w-8 h-8 p-0 text-xs font-semibold"
+            >
+              {pageNum}
+            </Button>
+          );
+        })}
+
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={currentPage >= totalPages}
+          onClick={() => onPageChange(currentPage + 1)}
+          aria-label="Go to next page"
+        >
+          <ChevronRight className="w-4 h-4" />
+        </Button>
+      </nav>
+    );
+  }
+);
+
+Pagination.displayName = 'Pagination';

package/src/navigation/Stepper.tsx

@@ -1,93 +1,93 @@
-import React, { forwardRef } from 'react';
-import { Check } from 'lucide-react';
-import { cn } from '../utils/cn';
-
-export interface StepItem {
-  title: string;
-  description?: string;
-}
-
-export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
-  steps: StepItem[];
-  currentStep: number;
-  orientation?: 'horizontal' | 'vertical';
-}
-
-export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
-  ({ className, steps, currentStep, orientation = 'horizontal', ...props }, ref) => {
-    return (
-      <div
-        ref={ref}
-        role="navigation"
-        aria-label="Progress Stepper"
-        className={cn(
-          'flex',
-          orientation === 'horizontal'
-            ? 'flex-row items-center w-full justify-between'
-            : 'flex-col space-y-6',
-          className
-        )}
-        {...props}
-      >
-        {steps.map((step, index) => {
-          const isCompleted = index < currentStep;
-          const isActive = index === currentStep;
-          const isPending = index > currentStep;
-
-          return (
-            <div
-              key={index}
-              className={cn(
-                'flex items-center',
-                orientation === 'horizontal' ? 'flex-1 last:flex-none' : 'flex-row items-start'
-              )}
-            >
-              <div className="flex items-center gap-3">
-                {/* Step indicator circle */}
-                <div
-                  className={cn(
-                    'flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors flex-shrink-0',
-                    isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
-                    isActive && 'border-2 border-[var(--ui-primary)] text-[var(--ui-primary)] bg-[var(--ui-bg-surface)] ring-4 ring-[var(--ui-primary)]/20',
-                    isPending && 'border border-[var(--ui-border-default)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
-                  )}
-                >
-                  {isCompleted ? <Check className="w-4 h-4 stroke-[3]" /> : index + 1}
-                </div>
-
-                {/* Step details */}
-                <div className="flex flex-col">
-                  <span
-                    className={cn(
-                      'text-xs font-semibold',
-                      isActive ? 'text-[var(--ui-text-primary)]' : 'text-[var(--ui-text-muted)]'
-                    )}
-                  >
-                    {step.title}
-                  </span>
-                  {step.description && (
-                    <span className="text-[11px] text-[var(--ui-text-muted)] opacity-80">
-                      {step.description}
-                    </span>
-                  )}
-                </div>
-              </div>
-
-              {/* Connecting line */}
-              {orientation === 'horizontal' && index < steps.length - 1 && (
-                <div
-                  className={cn(
-                    'flex-1 h-0.5 mx-4 transition-colors',
-                    isCompleted ? 'bg-[var(--ui-primary)]' : 'bg-[var(--ui-border-subtle)]'
-                  )}
-                />
-              )}
-            </div>
-          );
-        })}
-      </div>
-    );
-  }
-);
-
-Stepper.displayName = 'Stepper';
+import React, { forwardRef } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../utils/cn';
+
+export interface StepItem {
+  title: string;
+  description?: string;
+}
+
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+  steps: StepItem[];
+  currentStep: number;
+  orientation?: 'horizontal' | 'vertical';
+}
+
+export const Stepper = forwardRef<HTMLDivElement, StepperProps>(
+  ({ className, steps, currentStep, orientation = 'horizontal', ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        role="navigation"
+        aria-label="Progress Stepper"
+        className={cn(
+          'flex',
+          orientation === 'horizontal'
+            ? 'flex-row items-center w-full justify-between'
+            : 'flex-col space-y-6',
+          className
+        )}
+        {...props}
+      >
+        {steps.map((step, index) => {
+          const isCompleted = index < currentStep;
+          const isActive = index === currentStep;
+          const isPending = index > currentStep;
+
+          return (
+            <div
+              key={index}
+              className={cn(
+                'flex items-center',
+                orientation === 'horizontal' ? 'flex-1 last:flex-none' : 'flex-row items-start'
+              )}
+            >
+              <div className="flex items-center gap-3">
+                {/* Step indicator circle */}
+                <div
+                  className={cn(
+                    'flex items-center justify-center w-8 h-8 rounded-full text-xs font-bold transition-colors flex-shrink-0',
+                    isCompleted && 'bg-[var(--ui-primary)] text-[var(--ui-primary-fg)]',
+                    isActive && 'border-2 border-[var(--ui-primary)] text-[var(--ui-primary)] bg-[var(--ui-bg-surface)] ring-4 ring-[var(--ui-primary)]/20',
+                    isPending && 'border border-[var(--ui-border-default)] text-[var(--ui-text-muted)] bg-[var(--ui-bg-tertiary)]'
+                  )}
+                >
+                  {isCompleted ? <Check className="w-4 h-4 stroke-[3]" /> : index + 1}
+                </div>
+
+                {/* Step details */}
+                <div className="flex flex-col">
+                  <span
+                    className={cn(
+                      'text-xs font-semibold',
+                      isActive ? 'text-[var(--ui-text-primary)]' : 'text-[var(--ui-text-muted)]'
+                    )}
+                  >
+                    {step.title}
+                  </span>
+                  {step.description && (
+                    <span className="text-[11px] text-[var(--ui-text-muted)] opacity-80">
+                      {step.description}
+                    </span>
+                  )}
+                </div>
+              </div>
+
+              {/* Connecting line */}
+              {orientation === 'horizontal' && index < steps.length - 1 && (
+                <div
+                  className={cn(
+                    'flex-1 h-0.5 mx-4 transition-colors',
+                    isCompleted ? 'bg-[var(--ui-primary)]' : 'bg-[var(--ui-border-subtle)]'
+                  )}
+                />
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+
+Stepper.displayName = 'Stepper';