flikkui 0.1.0-beta.9 → 0.2.0-beta.2

package/dist/components/core/Notification/Notification.theme.js

@@ -0,0 +1,57 @@
+import { XCircleIcon, ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, BellIcon } from '@heroicons/react/24/solid';
+
+const notificationTheme = {
+    // Base container styles - layout and spacing only
+    baseStyle: 'relative flex items-start gap-4 rounded-xl border-t border-white px-6 py-4 shadow-lg shadow-black/5 text-sm glass-effect',
+    /**
+     * Visual style variants (appearance treatment)
+     */
+    variants: {
+        filled: 'ring-[1px]',
+        outline: 'bg-transparent ring-2',
+        soft: 'ring-[1px] ring-transparent',
+    },
+    /**
+     * Semantic colors with container, icon, and title styling
+     */
+    colors: {
+        neutral: {
+            containerStyle: 'bg-[var(--color-background)]/80 ring-[var(--color-border)]',
+            iconColor: 'text-[var(--color-text-primary)]',
+            titleColor: 'text-[var(--color-text-primary)]',
+            defaultIcon: BellIcon,
+        },
+        dark: {
+            containerStyle: 'bg-[var(--color-neutral-950)]/90 ring-[var(--color-border)]',
+            iconColor: 'text-white',
+            titleColor: 'text-white',
+            defaultIcon: BellIcon,
+        },
+        primary: {
+            containerStyle: 'bg-[var(--color-primary-50)]/80 ring-[var(--color-primary)]/10',
+            iconColor: 'text-[var(--color-primary)]',
+            titleColor: 'text-[var(--color-primary-700)]',
+            defaultIcon: InformationCircleIcon,
+        },
+        success: {
+            containerStyle: 'bg-[var(--color-success-50)]/80 ring-[var(--color-success)]/20',
+            iconColor: 'text-[var(--color-success)]',
+            titleColor: 'text-[var(--color-success-700)]',
+            defaultIcon: CheckCircleIcon,
+        },
+        warning: {
+            containerStyle: 'bg-[var(--color-warning-50)]/80 ring-[var(--color-warning)]/10',
+            iconColor: 'text-[var(--color-warning)]',
+            titleColor: 'text-[var(--color-warning-700)]',
+            defaultIcon: ExclamationTriangleIcon,
+        },
+        danger: {
+            containerStyle: 'bg-[var(--color-danger-50)]/80 ring-[var(--color-danger)]/10',
+            iconColor: 'text-[var(--color-danger)]',
+            titleColor: 'text-[var(--color-danger-700)]',
+            defaultIcon: XCircleIcon,
+        },
+    },
+};
+
+export { notificationTheme };

package/dist/components/core/Notification/Notification.types.d.ts

@@ -0,0 +1,46 @@
+import { HTMLAttributes, ReactNode } from 'react';
+/**
+ * Notification visual variants (appearance treatment)
+ */
+export type NotificationVariant = 'filled' | 'outline' | 'soft';
+/**
+ * Notification semantic colors (intent)
+ */
+export type NotificationColor = 'neutral' | 'dark' | 'primary' | 'success' | 'warning' | 'danger';
+export interface NotificationProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual style variant (filled, outline, soft) */
+    variant?: NotificationVariant;
+    /** Semantic color (neutral, dark, primary, success, warning, danger) */
+    color?: NotificationColor;
+    /** The main title of the notification */
+    title: string;
+    /** Additional description text */
+    description?: string;
+    /**
+     * Avatar to display (takes precedence over icons)
+     * Recommended: Use Avatar component from @/components/core/Avatar
+     * Example: avatar={<Avatar src="..." alt="User name" size="md" />}
+     */
+    avatar?: ReactNode;
+    /**
+     * Custom icon for the notification
+     * - Provide custom icon: overrides the default variant icon
+     * - Set to null: hides icon completely
+     * - Leave undefined: shows default variant icon
+     */
+    icon?: ReactNode | null;
+    /**
+     * Action buttons as ReactNode - use Button components directly
+     * Example: actions={<><Button>Cancel</Button><Button variant="primary">Save</Button></>}
+     */
+    actions?: ReactNode;
+    /**
+     * Callback when the notification is dismissed
+     * Note: Providing this callback automatically makes the notification dismissible
+     */
+    onDismiss?: () => void;
+    /** Custom class name */
+    className?: string;
+    /** Children content */
+    children?: ReactNode;
+}

package/dist/components/core/OfflineIndicator/OfflineIndicator.d.ts

@@ -0,0 +1,20 @@
+/**
+ * OfflineIndicator Component
+ * Shows network status and queued actions
+ */
+import React from "react";
+import type { OfflineIndicatorProps } from "./OfflineIndicator.types";
+/**
+ * OfflineIndicator - Visual indicator for offline status
+ *
+ * @example
+ * // Basic usage - appears when offline
+ * <OfflineIndicator />
+ *
+ * // With queue count
+ * <OfflineIndicator showQueueCount queue={myQueue} />
+ *
+ * // Custom position and variant
+ * <OfflineIndicator position="bottom-right" variant="badge" />
+ */
+export declare const OfflineIndicator: React.FC<OfflineIndicatorProps>;

package/dist/components/core/OfflineIndicator/OfflineIndicator.js

@@ -0,0 +1,112 @@
+import React__default, { useState, useEffect } from 'react';
+import { SignalSlashIcon, CheckCircleIcon } from '@heroicons/react/24/solid';
+import { AnimatePresence, motion } from 'motion/react';
+import { cn } from '../../../utils/cn.js';
+import { useNetworkStatus } from '../../../hooks/useNetworkStatus.js';
+import { getDefaultQueue } from '../../../utils/actionQueue.js';
+import { offlineIndicatorTheme } from './OfflineIndicator.theme.js';
+
+/**
+ * OfflineIndicator Component
+ * Shows network status and queued actions
+ */
+/**
+ * OfflineIndicator - Visual indicator for offline status
+ *
+ * @example
+ * // Basic usage - appears when offline
+ * <OfflineIndicator />
+ *
+ * // With queue count
+ * <OfflineIndicator showQueueCount queue={myQueue} />
+ *
+ * // Custom position and variant
+ * <OfflineIndicator position="bottom-right" variant="badge" />
+ */
+const OfflineIndicator = ({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", className, }) => {
+    var _a, _b;
+    const theme = offlineIndicatorTheme;
+    const { isOnline, wasOffline } = useNetworkStatus();
+    const [isVisible, setIsVisible] = useState(false);
+    const [queueSize, setQueueSize] = useState(0);
+    const [isSuccessfullyReconnected, setIsSuccessfullyReconnected] = useState(false);
+    // Get action queue
+    const actionQueue = queue !== null && queue !== void 0 ? queue : getDefaultQueue();
+    // Track queue size
+    useEffect(() => {
+        if (!showQueueCount)
+            return;
+        const updateQueueSize = () => {
+            setQueueSize(actionQueue.size);
+        };
+        // Initial check
+        updateQueueSize();
+        // Poll for updates (since queue doesn't have built-in subscriptions for external consumers)
+        const interval = setInterval(updateQueueSize, 1000);
+        return () => clearInterval(interval);
+    }, [showQueueCount, actionQueue]);
+    // Handle visibility based on network status
+    useEffect(() => {
+        if (!isOnline) {
+            setIsVisible(true);
+            setIsSuccessfullyReconnected(false);
+        }
+        else if (wasOffline || isSuccessfullyReconnected) {
+            // Just came back online or currently showing reconnected state
+            if (wasOffline && !isSuccessfullyReconnected) {
+                setIsSuccessfullyReconnected(true);
+            }
+            if (autoHideOnline) {
+                const timer = setTimeout(() => {
+                    setIsVisible(false);
+                    setIsSuccessfullyReconnected(false);
+                }, autoHideDelay);
+                return () => clearTimeout(timer);
+            }
+        }
+        else {
+            // Was never offline in this session or already hid after reconnection
+            setIsVisible(false);
+        }
+    }, [
+        isOnline,
+        wasOffline,
+        isSuccessfullyReconnected,
+        autoHideOnline,
+        autoHideDelay,
+    ]);
+    // Animation variants
+    const animationVariants = {
+        initial: {
+            opacity: 0,
+            y: position.startsWith("top") ? -20 : 20,
+            scale: 0.95,
+        },
+        animate: {
+            opacity: 1,
+            y: 0,
+            scale: 1,
+        },
+        exit: {
+            opacity: 0,
+            y: position.startsWith("top") ? -20 : 20,
+            scale: 0.95,
+        },
+    };
+    const isOffline = !isOnline;
+    const Icon = isOffline ? SignalSlashIcon : CheckCircleIcon;
+    const message = isOffline ? offlineMessage : onlineMessage;
+    const stateStyle = isOffline ? theme.offline : theme.online;
+    return (React__default.createElement(AnimatePresence, null, isVisible && (React__default.createElement(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants: animationVariants, transition: { duration: 0.2, ease: "easeOut" }, className: cn(theme.base, (_a = theme.positions) === null || _a === void 0 ? void 0 : _a[position], (_b = theme.variants) === null || _b === void 0 ? void 0 : _b[variant], stateStyle, className), role: "status", "aria-live": "polite" },
+        React__default.createElement(Icon, { className: theme.icon, "aria-hidden": "true" }),
+        React__default.createElement("span", { className: theme.message },
+            message,
+            showQueueCount && queueSize > 0 && isOffline && (React__default.createElement("span", { className: theme.queueCount },
+                "(",
+                queueSize,
+                " action",
+                queueSize !== 1 ? "s" : "",
+                " queued)")))))));
+};
+
+export { OfflineIndicator };

package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.d.ts

@@ -0,0 +1,2 @@
+import type { OfflineIndicatorTheme } from "./OfflineIndicator.types";
+export declare const offlineIndicatorTheme: OfflineIndicatorTheme;

package/dist/components/core/OfflineIndicator/OfflineIndicator.theme.js

@@ -0,0 +1,22 @@
+const offlineIndicatorTheme = {
+    base: "fixed z-50 flex items-center gap-2 transition-all duration-300 select-none ",
+    positions: {
+        top: "top-4 left-1/2 -translate-x-1/2",
+        bottom: "bottom-4 left-1/2 -translate-x-1/2",
+        "top-left": "top-4 left-4",
+        "top-right": "top-4 right-4",
+        "bottom-left": "bottom-4 left-4",
+        "bottom-right": "bottom-4 right-4",
+    },
+    variants: {
+        banner: "w-full left-0 right-0 px-4 py-1 justify-center rounded-none shadow-real-lg",
+        toast: "px-3 py-2 rounded-lg shadow-real-lg",
+    },
+    offline: "bg-[var(--color-neutral-900)]/90 backdrop-blur-sm text-white",
+    online: "bg-[var(--color-success)]/90 backdrop-blur-sm text-white",
+    icon: "size-4 flex-shrink-0",
+    message: "text-xs font-medium",
+    queueCount: "text-xs opacity-80 ml-1",
+};
+
+export { offlineIndicatorTheme };

package/dist/components/core/OfflineIndicator/OfflineIndicator.types.d.ts

@@ -0,0 +1,57 @@
+import type { ActionQueue } from "../../../utils/actionQueue";
+/**
+ * Position options for OfflineIndicator
+ */
+export type OfflineIndicatorPosition = "top" | "bottom" | "top-left" | "top-right" | "bottom-left" | "bottom-right";
+/**
+ * Visual variant for OfflineIndicator
+ */
+export type OfflineIndicatorVariant = "banner" | "toast";
+/**
+ * Props for OfflineIndicator component
+ */
+export interface OfflineIndicatorProps {
+    /** Position of the indicator */
+    position?: OfflineIndicatorPosition;
+    /** Show count of queued actions */
+    showQueueCount?: boolean;
+    /** Custom action queue instance */
+    queue?: ActionQueue;
+    /** Visual style variant */
+    variant?: OfflineIndicatorVariant;
+    /** Auto-hide when back online */
+    autoHideOnline?: boolean;
+    /** Delay before auto-hiding (ms) */
+    autoHideDelay?: number;
+    /** Custom offline message */
+    offlineMessage?: string;
+    /** Custom online message (shown briefly when reconnecting) */
+    onlineMessage?: string;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * Theme configuration for OfflineIndicator
+ */
+export interface OfflineIndicatorTheme {
+    /** Base container styles */
+    base?: string;
+    /** Position-specific styles */
+    positions?: Record<OfflineIndicatorPosition, string>;
+    /** Variant-specific styles */
+    variants?: {
+        banner?: string;
+        badge?: string;
+        toast?: string;
+    };
+    /** Offline state styles */
+    offline?: string;
+    /** Online (reconnected) state styles */
+    online?: string;
+    /** Icon styles */
+    icon?: string;
+    /** Message text styles */
+    message?: string;
+    /** Queue count styles */
+    queueCount?: string;
+}

package/dist/components/core/OfflineIndicator/index.d.ts

@@ -0,0 +1,3 @@
+export { OfflineIndicator } from "./OfflineIndicator";
+export type { OfflineIndicatorProps, OfflineIndicatorPosition, OfflineIndicatorVariant, OfflineIndicatorTheme, } from "./OfflineIndicator.types";
+export { offlineIndicatorTheme } from "./OfflineIndicator.theme";

package/dist/components/core/Pagination/Pagination.d.ts

@@ -4,4 +4,4 @@ import { PaginationProps } from "./Pagination.types";
  * Pagination component for navigating through pages
  */
 declare const Pagination: React.ForwardRefExoticComponent<PaginationProps & React.RefAttributes<HTMLDivElement>>;
-export default Pagination;
+export { Pagination };

package/dist/components/core/Pagination/Pagination.js

@@ -1,64 +1,56 @@
-import { __rest, __assign, __spreadArray } from '../../../node_modules/tslib/tslib.es6.js';
 import React__default, { useMemo } from 'react';
 import { paginationTheme } from './Pagination.theme.js';
 import { cn } from '../../../utils/cn.js';
-import Button from '../Button/Button.js';
-import ForwardRef from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDoubleLeftIcon.js';
-import ForwardRef$1 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronLeftIcon.js';
-import ForwardRef$2 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronRightIcon.js';
-import ForwardRef$3 from '../../../node_modules/@heroicons/react/24/outline/esm/ChevronDoubleRightIcon.js';
+import { ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
 
 /**
  * Internal PaginationItem component for page numbers and ellipsis
  */
-var PaginationItem = React__default.forwardRef(function (_a, ref) {
-    var isActive = _a.isActive, isDisabled = _a.isDisabled, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.variant, variant = _c === void 0 ? "page" : _c, className = _a.className, children = _a.children, props = __rest(_a, ["isActive", "isDisabled", "size", "variant", "className", "children"]);
-    var baseClasses = paginationTheme.itemBase;
-    var variantClasses = paginationTheme.variants[variant];
-    var sizeClasses = paginationTheme.sizes[size];
-    var stateClasses = isActive
-        ? paginationTheme.states.active
-        : isDisabled
-            ? paginationTheme.states.disabled
-            : "";
-    return (React__default.createElement("button", __assign({ ref: ref, type: "button", disabled: isDisabled, className: cn(baseClasses, variantClasses, sizeClasses, stateClasses, className), "aria-current": isActive ? "page" : undefined }, props), children));
+const PaginationItem = React__default.forwardRef(({ isActive, isDisabled, size = "md", variant = "page", className, children, ...props }, ref) => {
+    // Use appropriate style based on variant
+    const baseStyle = variant === "ellipsis"
+        ? paginationTheme.ellipsisStyle
+        : paginationTheme.itemStyle;
+    const sizeStyle = variant === "ellipsis"
+        ? paginationTheme.itemSizes[size]
+        : paginationTheme.itemSizes[size];
+    return (React__default.createElement("button", { ref: ref, type: "button", disabled: isDisabled, "data-active": isActive, "data-disabled": isDisabled, className: cn(baseStyle, sizeStyle, className), "aria-current": isActive ? "page" : undefined, ...props }, children));
 });
 PaginationItem.displayName = "PaginationItem";
 /**
  * Generate pagination range with ellipsis
  */
-var usePaginationRange = function (currentPage, totalPages, siblingCount) {
-    if (siblingCount === void 0) { siblingCount = 1; }
-    return useMemo(function () {
-        var DOTS = "...";
+const usePaginationRange = (currentPage, totalPages, siblingCount = 1) => {
+    return useMemo(() => {
+        const DOTS = "...";
         // Total page numbers to show: current + siblings + first + last + 2 dots
-        var totalPageNumbers = siblingCount + 5;
+        const totalPageNumbers = siblingCount + 5;
         // If total pages is less than total page numbers, show all pages
         if (totalPageNumbers >= totalPages) {
-            return Array.from({ length: totalPages }, function (_, i) { return i + 1; });
+            return Array.from({ length: totalPages }, (_, i) => i + 1);
         }
-        var leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
-        var rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
-        var shouldShowLeftDots = leftSiblingIndex > 2;
-        var shouldShowRightDots = rightSiblingIndex < totalPages - 2;
-        var firstPageIndex = 1;
-        var lastPageIndex = totalPages;
+        const leftSiblingIndex = Math.max(currentPage - siblingCount, 1);
+        const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages);
+        const shouldShowLeftDots = leftSiblingIndex > 2;
+        const shouldShowRightDots = rightSiblingIndex < totalPages - 2;
+        const firstPageIndex = 1;
+        const lastPageIndex = totalPages;
         // No left dots, but right dots
         if (!shouldShowLeftDots && shouldShowRightDots) {
-            var leftItemCount = 3 + 2 * siblingCount;
-            var leftRange = Array.from({ length: leftItemCount }, function (_, i) { return i + 1; });
-            return __spreadArray(__spreadArray([], leftRange, true), [DOTS, totalPages], false);
+            const leftItemCount = 3 + 2 * siblingCount;
+            const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1);
+            return [...leftRange, DOTS, totalPages];
         }
         // Left dots, but no right dots
         if (shouldShowLeftDots && !shouldShowRightDots) {
-            var rightItemCount_1 = 3 + 2 * siblingCount;
-            var rightRange = Array.from({ length: rightItemCount_1 }, function (_, i) { return totalPages - rightItemCount_1 + i + 1; });
-            return __spreadArray([firstPageIndex, DOTS], rightRange, true);
+            const rightItemCount = 3 + 2 * siblingCount;
+            const rightRange = Array.from({ length: rightItemCount }, (_, i) => totalPages - rightItemCount + i + 1);
+            return [firstPageIndex, DOTS, ...rightRange];
         }
         // Both left and right dots
         if (shouldShowLeftDots && shouldShowRightDots) {
-            var middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, function (_, i) { return leftSiblingIndex + i; });
-            return __spreadArray(__spreadArray([firstPageIndex, DOTS], middleRange, true), [DOTS, lastPageIndex], false);
+            const middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);
+            return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
         }
         return [];
     }, [currentPage, totalPages, siblingCount]);
@@ -66,48 +58,50 @@ var usePaginationRange = function (currentPage, totalPages, siblingCount) {
 /**
  * Pagination component for navigating through pages
  */
-var Pagination = React__default.forwardRef(function (_a, ref) {
-    var currentPage = _a.currentPage, totalPages = _a.totalPages, onPageChange = _a.onPageChange, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.showFirstLast, showFirstLast = _c === void 0 ? false : _c, _d = _a.showPrevNext, showPrevNext = _d === void 0 ? true : _d, _e = _a.siblingCount, siblingCount = _e === void 0 ? 1 : _e, className = _a.className, _f = _a.theme, customTheme = _f === void 0 ? {} : _f, props = __rest(_a, ["currentPage", "totalPages", "onPageChange", "size", "showFirstLast", "showPrevNext", "siblingCount", "className", "theme"]);
+const Pagination = React__default.forwardRef(({ currentPage, totalPages, onPageChange, size = "md", showFirstLast = false, showPrevNext = true, siblingCount = 1, className, theme: customTheme = {}, ...props }, ref) => {
     // Merge theme with custom overrides
-    var theme = __assign(__assign(__assign({}, paginationTheme), customTheme), { variants: __assign(__assign({}, paginationTheme.variants), (customTheme.variants || {})), sizes: __assign(__assign({}, paginationTheme.sizes), (customTheme.sizes || {})), states: __assign(__assign({}, paginationTheme.states), (customTheme.states || {})) });
-    var paginationRange = usePaginationRange(currentPage, totalPages, siblingCount);
+    const theme = {
+        ...paginationTheme,
+        ...customTheme,
+    };
+    const paginationRange = usePaginationRange(currentPage, totalPages, siblingCount);
     // Don't render if there's only one page
     if (totalPages <= 1) {
         return null;
     }
-    var handlePageChange = function (page) {
+    const handlePageChange = (page) => {
         if (page >= 1 && page <= totalPages && page !== currentPage) {
             onPageChange(page);
         }
     };
-    var isFirstPage = currentPage === 1;
-    var isLastPage = currentPage === totalPages;
-    return (React__default.createElement("nav", __assign({ ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className) }, props),
-        showFirstLast && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isFirstPage, onClick: function () { return handlePageChange(1); }, "aria-label": "Go to first page" },
-            React__default.createElement(ForwardRef, { className: "w-4 h-4" }),
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === totalPages;
+    return (React__default.createElement("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props },
+        showFirstLast && (React__default.createElement(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page" },
+            React__default.createElement(ChevronDoubleLeftIcon, { className: "w-4 h-4" }),
             React__default.createElement("span", { className: "sr-only" }, "First"))),
-        showPrevNext && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isFirstPage, onClick: function () { return handlePageChange(currentPage - 1); }, "aria-label": "Go to previous page (".concat(currentPage - 1, ")") },
-            React__default.createElement(ForwardRef$1, { className: "w-4 h-4" }),
+        showPrevNext && (React__default.createElement(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${currentPage - 1})` },
+            React__default.createElement(ChevronLeftIcon, { className: "w-4 h-4" }),
             React__default.createElement("span", { className: "sr-only" }, "Previous"))),
-        paginationRange.map(function (pageNumber, index) {
+        paginationRange.map((pageNumber, index) => {
             if (pageNumber === "...") {
-                return (React__default.createElement(PaginationItem, { key: "ellipsis-".concat(index), size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator" },
+                return (React__default.createElement(PaginationItem, { key: `ellipsis-${index}`, size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator" },
                     React__default.createElement("span", { "aria-hidden": "true" }, "\u2026"),
                     React__default.createElement("span", { className: "sr-only" }, "More pages")));
             }
-            var page = pageNumber;
-            var isActive = page === currentPage;
-            return (React__default.createElement(PaginationItem, { key: page, size: size, variant: "page", isActive: isActive, onClick: function () { return handlePageChange(page); }, "aria-label": isActive ? "Page ".concat(page, ", current page") : "Go to page ".concat(page) },
+            const page = pageNumber;
+            const isActive = page === currentPage;
+            return (React__default.createElement(PaginationItem, { key: page, size: size, variant: "page", isActive: isActive, onClick: () => handlePageChange(page), "aria-label": isActive ? `Page ${page}, current page` : `Go to page ${page}` },
                 page,
                 isActive && React__default.createElement("span", { className: "sr-only" }, "(current)")));
         }),
-        showPrevNext && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isLastPage, onClick: function () { return handlePageChange(currentPage + 1); }, "aria-label": "Go to next page (".concat(currentPage + 1, ")") },
-            React__default.createElement(ForwardRef$2, { className: "w-4 h-4" }),
+        showPrevNext && (React__default.createElement(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "aria-label": `Go to next page (${currentPage + 1})` },
+            React__default.createElement(ChevronRightIcon, { className: "w-4 h-4" }),
             React__default.createElement("span", { className: "sr-only" }, "Next"))),
-        showFirstLast && (React__default.createElement(Button, { size: size, variant: "clear", disabled: isLastPage, onClick: function () { return handlePageChange(totalPages); }, "aria-label": "Go to last page" },
-            React__default.createElement(ForwardRef$3, { className: "w-4 h-4" }),
+        showFirstLast && (React__default.createElement(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(totalPages), "aria-label": "Go to last page" },
+            React__default.createElement(ChevronDoubleRightIcon, { className: "w-4 h-4" }),
             React__default.createElement("span", { className: "sr-only" }, "Last")))));
 });
 Pagination.displayName = "Pagination";
 
-export { Pagination as default };
+export { Pagination };

package/dist/components/core/Pagination/Pagination.theme.d.ts

@@ -1,23 +1,14 @@
 import { PaginationSize } from "./Pagination.types";
 /**
- * Internal theme structure for the Pagination component
+ * Simplified theme structure for the Pagination component with unified item styling
  */
-interface PaginationTheme {
+export interface PaginationTheme {
     baseStyle: string;
-    itemBase: string;
-    variants: {
-        page: string;
-        ellipsis: string;
-    };
-    sizes: Record<PaginationSize, string>;
-    states: {
-        active: string;
-        disabled: string;
-        hover: string;
-    };
+    itemStyle: string;
+    itemSizes: Record<PaginationSize, string>;
+    ellipsisStyle: string;
 }
 /**
- * Default theme for the Pagination component
+ * Default theme for the Pagination component using modern neutral colors
  */
 export declare const paginationTheme: PaginationTheme;
-export {};

package/dist/components/core/Pagination/Pagination.theme.js

@@ -1,27 +1,36 @@
 /**
- * Default theme for the Pagination component
+ * Default theme for the Pagination component using modern neutral colors
  */
-var paginationTheme = {
+const paginationTheme = {
     // Base container styles
     baseStyle: "flex items-center justify-center gap-1",
-    // Base item styles
-    itemBase: "inline-flex items-center justify-center font-medium rounded-full transition-all duration-200 ease-in-out focus:outline-none focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 cursor-pointer text-text-secondary hover:text-text-primary",
-    // Variant styles
-    variants: {
-        page: "hover:bg-neutral-50 hover:border-neutral-300",
-        ellipsis: "border-none cursor-default pointer-events-none",
-    },
-    // Size variants
-    sizes: {
-        sm: "h-8 min-w-[2rem] px-2 text-sm",
-        md: "h-10 min-w-[2.5rem] px-3 text-sm",
-    },
-    // State styles
-    states: {
-        active: "bg-primary-50 text-text-primary",
-        disabled: "opacity-50 cursor-not-allowed pointer-events-none",
-        hover: "hover:bg-neutral-50",
+    // Unified item styles for all pagination elements (pages, navigation, etc.)
+    // Light mode: white background, muted text, neutral borders
+    // Dark mode: neutral-800 background, lighter text, neutral-600 borders
+    itemStyle: "inline-flex items-center justify-center font-medium rounded-[var(--form-rounded)] transition-all duration-200 ease-in-out " +
+        // Focus styles
+        "focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-primary)] focus-visible:ring-offset-2 dark:focus-visible:ring-offset-[var(--color-neutral-900)] " +
+        // Base state - light
+        "cursor-pointer bg-white border border-transparent text-[var(--color-text-muted)] " +
+        // Base state - dark
+        "dark:bg-[var(--color-neutral-800)] dark:text-[var(--color-neutral-400)] dark:border-transparent " +
+        // Hover state - light
+        "hover:text-[var(--color-text-primary)] hover:bg-neutral-50 hover:border-[var(--color-border)] " +
+        // Hover state - dark
+        "dark:hover:bg-[var(--color-neutral-700)] dark:hover:text-[var(--color-neutral-200)] dark:hover:border-[var(--color-neutral-600)] " +
+        // Active state - light
+        "data-[active=true]:bg-white data-[active=true]:border-[var(--color-border)] data-[active=true]:text-[var(--color-text-primary)] " +
+        // Active state - dark (uses primary color accent)
+        "dark:data-[active=true]:bg-[var(--color-primary-900)] dark:data-[active=true]:border-[var(--color-primary-700)] dark:data-[active=true]:text-[var(--color-primary-300)] " +
+        // Disabled state
+        "data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:pointer-events-none",
+    // Unified item sizes
+    itemSizes: {
+        sm: "size-8 min-w-[2rem] text-sm",
+        md: "size-10 min-w-[2.5rem] text-sm",
     },
+    // Ellipsis styles
+    ellipsisStyle: "inline-flex items-center justify-center font-medium text-[var(--color-text-muted)] dark:text-[var(--color-neutral-500)] cursor-default pointer-events-none",
 };
 
 export { paginationTheme };

package/dist/components/core/Pagination/Pagination.types.d.ts

@@ -1,4 +1,5 @@
 import React from "react";
+import { PaginationTheme } from "./Pagination.theme";
 /**
  * Pagination component props
  * @property {number} currentPage - The current active page number (1-based)
@@ -27,31 +28,9 @@ export interface PaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Additional class names */
     className?: string;
     /** Theme overrides */
-    theme?: PaginationThemeOverrides;
+    theme?: Partial<PaginationTheme>;
 }
 export type PaginationSize = "sm" | "md";
-/**
- * Theme overrides for the Pagination component
- */
-export interface PaginationThemeOverrides {
-    /** Base container styles */
-    baseStyle?: string;
-    /** Base item styles */
-    itemBase?: string;
-    /** Variant styles */
-    variants?: {
-        page?: string;
-        ellipsis?: string;
-    };
-    /** Size variants */
-    sizes?: Partial<Record<PaginationSize, string>>;
-    /** State styles */
-    states?: {
-        active?: string;
-        disabled?: string;
-        hover?: string;
-    };
-}
 /**
  * Internal pagination item props
  */

package/dist/components/core/Pagination/index.d.ts

@@ -1,2 +1,2 @@
-export { default as Pagination } from "./Pagination";
+export { Pagination } from "./Pagination";
 export type { PaginationProps, PaginationSize } from "./Pagination.types";