@flikk/ui 1.0.0-beta.1

package/dist/components/core/NavItem/NavItem.js

@@ -0,0 +1,125 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useMemo } from 'react';
+import { cn } from '../../../utils/cn.js';
+import { navItemTheme } from './NavItem.theme.js';
+import { useSidebarContext } from '../Sidebar/SidebarContext.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import '../Tooltip/Tooltip.animations.js';
+import { Badge } from '../Badge/Badge.js';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
+
+const NavItem = React__default.forwardRef(({ children, startContent: propStartContent, endContent: propEndContent, icon, // Legacy
+badge, // Legacy
+description, shortcut, href, onClick, active = false, disabled = false, isDisabled: propIsDisabled, isDanger = false, hasSubmenu = false, expanded = false, onToggleExpanded, level = 0, showTooltipWhenCollapsed = true, className, theme: customTheme = {}, ...props }, ref) => {
+    var _a, _b;
+    const sidebarContext = useSidebarContext();
+    const collapsed = (sidebarContext === null || sidebarContext === void 0 ? void 0 : sidebarContext.collapsed) || false;
+    const isInSidebar = !!sidebarContext;
+    // Map legacy props
+    const startContent = propStartContent || icon;
+    const actualIsDisabled = propIsDisabled || disabled;
+    // Construct end content
+    let endContent = propEndContent;
+    if (!endContent && badge) {
+        endContent = (jsx(Badge, { color: "neutral", variant: "ghost", size: "sm", children: badge }));
+    }
+    if (!endContent && hasSubmenu) {
+        endContent = (jsx(ChevronDownIcon, { className: cn("size-4 transition-transform duration-300", expanded && "rotate-180") }));
+    }
+    const theme = useMemo(() => ({
+        ...navItemTheme,
+        ...customTheme,
+        states: {
+            ...navItemTheme.states,
+            ...customTheme.states,
+        },
+        iconStates: {
+            ...navItemTheme.iconStates,
+            ...customTheme.iconStates,
+        },
+        levels: {
+            ...navItemTheme.levels,
+            ...customTheme.levels,
+        },
+        collapsed: {
+            ...navItemTheme.collapsed,
+            ...customTheme.collapsed,
+        },
+        danger: customTheme.danger ||
+            navItemTheme.danger ||
+            "text-[var(--color-danger)] hover:bg-[var(--color-danger-50)]",
+    }), [customTheme]);
+    // Handle click events
+    const handleClick = (e) => {
+        if (actualIsDisabled) {
+            e.preventDefault();
+            return;
+        }
+        if (hasSubmenu && onToggleExpanded) {
+            e.preventDefault();
+            onToggleExpanded();
+            return;
+        }
+        if (onClick) {
+            e.preventDefault();
+            onClick();
+            return;
+        }
+        // If href is provided, let the default navigation happen
+    };
+    const isActive = active;
+    // Get state classes
+    const getStateClasses = () => {
+        if (actualIsDisabled)
+            return theme.states.disabled;
+        if (isActive)
+            return theme.states.active;
+        return theme.states.default;
+    };
+    // Danger overrides
+    const dangerClasses = isDanger ? theme.danger : "";
+    // Build container classes
+    const containerClasses = cn(theme.baseStyle, getStateClasses(), theme.levels[level], isInSidebar && collapsed && ((_a = theme.collapsed) === null || _a === void 0 ? void 0 : _a.container), dangerClasses, className);
+    // Get icon state classes
+    const getIconStateClasses = () => {
+        var _a, _b, _c;
+        if (actualIsDisabled)
+            return (_a = theme.iconStates) === null || _a === void 0 ? void 0 : _a.disabled;
+        if (isActive)
+            return (_b = theme.iconStates) === null || _b === void 0 ? void 0 : _b.active;
+        return (_c = theme.iconStates) === null || _c === void 0 ? void 0 : _c.default;
+    };
+    // Build icon classes
+    const iconClasses = cn(isInSidebar && collapsed ? (_b = theme.collapsed) === null || _b === void 0 ? void 0 : _b.icon : theme.icon, getIconStateClasses());
+    const textClasses = cn(theme.text);
+    // Content component
+    const content = (jsxs("div", { ref: ref, className: containerClasses, role: href ? "link" : "button", tabIndex: actualIsDisabled ? -1 : 0, "aria-disabled": actualIsDisabled, "aria-expanded": hasSubmenu ? expanded : undefined, "data-active": isActive, "data-disabled": actualIsDisabled, "data-level": level, onClick: handleClick, onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault();
+                handleClick(e);
+            }
+        }, ...props, children: [startContent && (jsx("div", { className: cn("flex items-center justify-center flex-shrink-0"
+                // Icon size is handled by icon classes
+                ), children: React__default.isValidElement(startContent)
+                    ? React__default.cloneElement(startContent, {
+                        className: cn(iconClasses, startContent.props.className),
+                    })
+                    : startContent })), (!isInSidebar || !collapsed) && (jsxs("div", { className: "flex-1 min-w-0", children: [jsxs("div", { className: "flex items-center justify-between gap-2", children: [jsx("span", { className: cn("truncate", textClasses), children: children }), shortcut && (jsx("kbd", { className: "hidden group-hover:inline-block text-xs text-[var(--color-text-muted)] font-sans border border-[var(--color-border)] rounded px-1.5 py-0.5", children: shortcut }))] }), description && (jsx("div", { className: "text-xs text-[var(--color-text-muted)] mt-0.5 truncate", children: description }))] })), endContent && (!isInSidebar || !collapsed) && (jsx("div", { className: "flex items-center justify-center flex-shrink-0", children: endContent })), isInSidebar && collapsed && (jsx("span", { className: "sr-only", children: children }))] }));
+    // Wrap with link if href is provided
+    if (href && !actualIsDisabled) {
+        const LinkContent = (jsx("a", { href: href, className: "block group", children: content }));
+        // Show tooltip in collapsed sidebar mode
+        if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
+            return (jsx(Tooltip, { content: children, placement: "right", children: LinkContent }));
+        }
+        return LinkContent;
+    }
+    // Show tooltip in collapsed sidebar mode
+    if (isInSidebar && collapsed && showTooltipWhenCollapsed) {
+        return (jsx(Tooltip, { content: children, placement: "right", children: content }));
+    }
+    return content;
+});
+NavItem.displayName = "NavItem";
+
+export { NavItem };

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

@@ -0,0 +1,2 @@
+import { NavItemTheme } from "./NavItem.types";
+export declare const navItemTheme: NavItemTheme;

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

@@ -0,0 +1,27 @@
+const navItemTheme = {
+    baseStyle: "relative flex items-center gap-2 px-2 py-1.5 text-sm font-medium cursor-pointer select-none transition-all duration-300 w-full rounded-[var(--nav-item-radius)] outline-none group",
+    icon: "size-4 text-[var(--color-text-secondary)]",
+    text: "flex-1 min-w-0 truncate",
+    states: {
+        default: "text-[var(--color-text-primary)] hover:bg-neutral-100",
+        active: "bg-[var(--color-primary)]/10 text-[var(--color-primary)] font-semibold",
+        disabled: "opacity-60 cursor-not-allowed pointer-events-none text-[var(--color-text-placeholder)]",
+        hover: "hover:bg-neutral-100",
+    },
+    iconStates: {
+        default: "text-[var(--color-text-secondary)] group-hover:text-[var(--color-text-primary)]",
+        active: "text-[var(--color-primary)]",
+        disabled: "opacity-60",
+    },
+    levels: {
+        0: "",
+        1: "pl-6",
+        2: "pl-10",
+    },
+    collapsed: {
+        container: "!gap-0 justify-center p-2 aspect-square",
+        icon: "size-5",
+    },
+};
+
+export { navItemTheme };

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

@@ -0,0 +1,168 @@
+import { ReactNode } from "react";
+export interface NavItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Content of the navigation item
+     */
+    children: ReactNode;
+    /**
+     * Start content (icon), replaces `icon`
+     */
+    startContent?: ReactNode;
+    /**
+     * End content (badge/arrow), replaces `badge`
+     */
+    endContent?: ReactNode;
+    /**
+     * Description text below the title
+     */
+    description?: ReactNode;
+    /**
+     * Keyboard shortcut (optional)
+     */
+    shortcut?: string;
+    /**
+     * Legacy icon prop (mapped to startContent)
+     * @deprecated Use startContent instead
+     */
+    icon?: ReactNode;
+    /**
+     * Legacy badge prop (mapped to endContent)
+     * @deprecated Use endContent instead
+     */
+    badge?: string | number;
+    /**
+     * Link href (for navigation)
+     */
+    href?: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Whether the item is currently active
+     * @default false
+     */
+    active?: boolean;
+    /**
+     * Whether the item is disabled
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Alias for isDisabled
+     * @deprecated Use isDisabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the item represents a danger action
+     */
+    isDanger?: boolean;
+    /**
+     * Whether the item has a submenu
+     * @default false
+     */
+    hasSubmenu?: boolean;
+    /**
+     * Whether the submenu is expanded (for multi-level navigation)
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Callback when submenu is toggled
+     */
+    onToggleExpanded?: () => void;
+    /**
+     * Nesting level for indentation (0, 1, 2)
+     * @default 0
+     */
+    level?: number;
+    /**
+     * Whether to show tooltip when in collapsed sidebar mode
+     * @default true
+     */
+    showTooltipWhenCollapsed?: boolean;
+    /**
+     * Custom theme overrides
+     */
+    theme?: NavItemThemeOverrides;
+}
+export interface NavItemTheme {
+    baseStyle: string;
+    icon: string;
+    text: string;
+    states: {
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    };
+    iconStates?: {
+        default?: string;
+        active?: string;
+        disabled?: string;
+        hover?: string;
+    };
+    levels: {
+        0: string;
+        1: string;
+        2: string;
+    };
+    collapsed: {
+        container: string;
+        icon: string;
+    };
+}
+export interface NavItemThemeOverrides {
+    baseStyle?: string;
+    icon?: string;
+    text?: string;
+    states?: Partial<{
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    }>;
+    iconStates?: Partial<{
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    }>;
+    levels?: Partial<{
+        0: string;
+        1: string;
+        2: string;
+    }>;
+    collapsed?: Partial<{
+        container: string;
+        icon: string;
+    }>;
+    danger?: string;
+}
+export interface NavItemTheme {
+    baseStyle: string;
+    icon: string;
+    text: string;
+    states: {
+        default: string;
+        active: string;
+        disabled: string;
+        hover: string;
+    };
+    iconStates?: {
+        default?: string;
+        active?: string;
+        disabled?: string;
+        hover?: string;
+    };
+    levels: {
+        0: string;
+        1: string;
+        2: string;
+    };
+    collapsed: {
+        container: string;
+        icon: string;
+    };
+    danger?: string;
+}

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

@@ -0,0 +1,2 @@
+export { NavItem } from './NavItem';
+export type { NavItemProps, NavItemTheme, NavItemThemeOverrides } from './NavItem.types';

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.ForwardRefExoticComponent<OfflineIndicatorProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useEffect, useMemo } 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 - 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 = React__default.forwardRef(({ position = "top", showQueueCount = false, queue, variant = "toast", autoHideOnline = true, autoHideDelay = 5000, offlineMessage = "You're offline", onlineMessage = "Back online", className, }, ref) => {
+    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 = useMemo(() => ({
+        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,
+        },
+    }), [position]);
+    const isOffline = !isOnline;
+    const Icon = isOffline ? SignalSlashIcon : CheckCircleIcon;
+    const message = isOffline ? offlineMessage : onlineMessage;
+    const stateStyle = isOffline ? theme.offline : theme.online;
+    return (jsx(AnimatePresence, { children: isVisible && (jsxs(motion.div, { ref: ref, 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", children: [jsx(Icon, { className: theme.icon, "aria-hidden": "true" }), jsxs("span", { className: theme.message, children: [message, showQueueCount && queueSize > 0 && isOffline && (jsxs("span", { className: theme.queueCount, children: ["(", queueSize, " action", queueSize !== 1 ? "s" : "", " queued)"] }))] })] })) }));
+});
+OfflineIndicator.displayName = "OfflineIndicator";
+
+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-[var(--radius-base)] 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

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

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

@@ -0,0 +1,91 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useMemo, useCallback } from 'react';
+import { paginationTheme } from './Pagination.theme.js';
+import { cn } from '../../../utils/cn.js';
+import { ChevronDoubleLeftIcon, ChevronLeftIcon, ChevronRightIcon, ChevronDoubleRightIcon } from '@heroicons/react/24/outline';
+
+/**
+ * Internal PaginationItem component for page numbers and ellipsis
+ */
+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 (jsx("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: children }));
+});
+PaginationItem.displayName = "PaginationItem";
+/**
+ * Generate pagination range with ellipsis
+ */
+const usePaginationRange = (currentPage, totalPages, siblingCount = 1) => {
+    return useMemo(() => {
+        const DOTS = "...";
+        // Total page numbers to show: current + siblings + first + last + 2 dots
+        const totalPageNumbers = siblingCount + 5;
+        // If total pages is less than total page numbers, show all pages
+        if (totalPageNumbers >= totalPages) {
+            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;
+        const firstPageIndex = 1;
+        const lastPageIndex = totalPages;
+        // No left dots, but right dots
+        if (!shouldShowLeftDots && shouldShowRightDots) {
+            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) {
+            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) {
+            const middleRange = Array.from({ length: rightSiblingIndex - leftSiblingIndex + 1 }, (_, i) => leftSiblingIndex + i);
+            return [firstPageIndex, DOTS, ...middleRange, DOTS, lastPageIndex];
+        }
+        return [];
+    }, [currentPage, totalPages, siblingCount]);
+};
+/**
+ * Pagination component for navigating through pages
+ */
+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
+    const theme = useMemo(() => ({
+        ...paginationTheme,
+        ...customTheme,
+    }), [customTheme]);
+    const paginationRange = usePaginationRange(currentPage, totalPages, siblingCount);
+    const handlePageChange = useCallback((page) => {
+        if (page >= 1 && page <= totalPages && page !== currentPage) {
+            onPageChange(page);
+        }
+    }, [totalPages, currentPage, onPageChange]);
+    // Don't render if there's only one page
+    if (totalPages <= 1) {
+        return null;
+    }
+    const isFirstPage = currentPage === 1;
+    const isLastPage = currentPage === totalPages;
+    return (jsxs("nav", { ref: ref, role: "navigation", "aria-label": "Pagination Navigation", className: cn(theme.baseStyle, className), ...props, children: [showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(1), "aria-label": "Go to first page", children: [jsx(ChevronDoubleLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "First" })] })), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isFirstPage, onClick: () => handlePageChange(currentPage - 1), "aria-label": `Go to previous page (${currentPage - 1})`, children: [jsx(ChevronLeftIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Previous" })] })), paginationRange.map((pageNumber, index) => {
+                if (pageNumber === "...") {
+                    return (jsxs(PaginationItem, { size: size, variant: "ellipsis", isDisabled: true, "aria-label": "More pages", role: "separator", children: [jsx("span", { "aria-hidden": "true", children: "\u2026" }), jsx("span", { className: "sr-only", children: "More pages" })] }, `ellipsis-${index}`));
+                }
+                const page = pageNumber;
+                const isActive = page === currentPage;
+                return (jsxs(PaginationItem, { size: size, variant: "page", isActive: isActive, onClick: () => handlePageChange(page), "aria-label": isActive ? `Page ${page}, current page` : `Go to page ${page}`, children: [page, isActive && jsx("span", { className: "sr-only", children: "(current)" })] }, page));
+            }), showPrevNext && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(currentPage + 1), "aria-label": `Go to next page (${currentPage + 1})`, children: [jsx(ChevronRightIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Next" })] })), showFirstLast && (jsxs(PaginationItem, { size: size, isDisabled: isLastPage, onClick: () => handlePageChange(totalPages), "aria-label": "Go to last page", children: [jsx(ChevronDoubleRightIcon, { className: "w-4 h-4" }), jsx("span", { className: "sr-only", children: "Last" })] }))] }));
+});
+Pagination.displayName = "Pagination";
+
+export { Pagination };

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

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