@mohasinac/appkit 2.3.0 → 2.3.1

package/dist/ui/components/ListingViewShell.d.ts

@@ -0,0 +1,37 @@
+/**
+ * ListingViewShell
+ *
+ * Thin wrapper around ListingLayout that adds overlay slots (drawer, modal)
+ * and an optional detail-view short-circuit. Replaces the ~10 identical
+ * Admin*View ListingLayout delegates and can be used by seller/account views
+ * that need the full ListingLayout feature set.
+ *
+ * Usage:
+ *   <ListingViewShell
+ *     headerSlot={<PageHeader title="Products" />}
+ *     searchSlot={<SearchInput />}
+ *     overlays={<><ProductDrawer /><ConfirmDeleteModal /></>}
+ *     isDashboard
+ *   >
+ *     <DataTable columns={cols} data={rows} />
+ *   </ListingViewShell>
+ */
+import { type ReactNode } from "react";
+import type { ViewPortal } from "./Layout";
+import type { ListingLayoutProps } from "./ListingLayout";
+export interface ListingViewShellProps extends Omit<ListingLayoutProps, "children"> {
+    /** Portal context — sets isDashboard default (admin/seller=true, user/public=false). */
+    portal?: ViewPortal;
+    /** Overlay elements rendered after the layout (drawers, modals, confirm dialogs). */
+    overlays?: ReactNode;
+    /** @deprecated Use `overlays` instead. Render-prop for a drawer overlay. */
+    renderDrawer?: () => ReactNode;
+    /** @deprecated Use `overlays` instead. Render-prop for a confirm modal overlay. */
+    renderConfirmModal?: () => ReactNode;
+    /** @deprecated Use `overlays` instead. Render-prop for a generic modal overlay. */
+    renderModal?: () => ReactNode;
+    /** When provided, the entire layout is replaced with this view (detail/edit mode). */
+    detailView?: ReactNode;
+    children?: ReactNode;
+}
+export declare function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }: ListingViewShellProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/ListingViewShell.js

@@ -0,0 +1,9 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListingLayout } from "./ListingLayout";
+export function ListingViewShell({ overlays, renderDrawer, renderConfirmModal, renderModal, detailView, children, portal, isDashboard, ...listingProps }) {
+    const effectiveIsDashboard = isDashboard ?? (portal === "admin" || portal === "seller");
+    if (detailView) {
+        return _jsx(_Fragment, { children: detailView });
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(ListingLayout, { ...listingProps, isDashboard: effectiveIsDashboard, children: children }), overlays, renderDrawer?.(), renderConfirmModal?.(), renderModal?.()] }));
+}

package/dist/ui/components/Menu.d.ts

@@ -0,0 +1,29 @@
+import React from "react";
+import { type DropdownMenuItem as MenuListItem } from "./Dropdown";
+export interface MenuProps {
+    trigger?: React.ReactNode;
+    items?: MenuListItem[];
+    align?: "left" | "right";
+    className?: string;
+    menuClassName?: string;
+    children?: React.ReactNode;
+}
+export declare function Menu(props: MenuProps): import("react/jsx-runtime").JSX.Element;
+export declare function MenuTrigger({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuContent({ className, children, }: {
+    className?: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuItem(props: {
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function MenuSeparator({ className }: {
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export default Menu;

package/dist/ui/components/Menu.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown, DropdownItem, DropdownMenu, DropdownSeparator, DropdownTrigger, } from "./Dropdown";
+export function Menu(props) {
+    return _jsx(Dropdown, { ...props });
+}
+export function MenuTrigger({ className, children, }) {
+    return _jsx(DropdownTrigger, { className: className, children: children });
+}
+export function MenuContent({ className, children, }) {
+    return _jsx(DropdownMenu, { className: className, children: children });
+}
+export function MenuItem(props) {
+    return _jsx(DropdownItem, { ...props });
+}
+export function MenuSeparator({ className }) {
+    return _jsx(DropdownSeparator, { className: className });
+}
+export default Menu;

package/dist/ui/components/Menu.style.css

@@ -0,0 +1,6 @@
+/* Menu — delegates to Dropdown; no additional styles needed */
+/* Exists for style contract compliance. See Dropdown.style.css for actual styles. */
+
+.appkit-menu {
+  /* Inherits all styling from Dropdown */
+}

package/dist/ui/components/Modal.d.ts

@@ -0,0 +1,17 @@
+import React from "react";
+export interface ModalProps {
+    isOpen?: boolean;
+    open?: boolean;
+    onClose: () => void;
+    title?: React.ReactNode;
+    children: React.ReactNode;
+    size?: "sm" | "md" | "lg" | "xl" | "full";
+    showCloseButton?: boolean;
+    actions?: React.ReactNode;
+    className?: string;
+}
+export declare function Modal({ isOpen, open, onClose, title, children, size, showCloseButton, actions, className, }: ModalProps): React.ReactPortal | null;
+export declare function ModalFooter({ children, className, }: {
+    children: React.ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Modal.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { createPortal } from "react-dom";
+import { Heading } from "./Typography";
+import { Button } from "./Button";
+const SIZE_CLASSES = {
+    sm: "appkit-modal__panel--sm",
+    md: "appkit-modal__panel--md",
+    lg: "appkit-modal__panel--lg",
+    xl: "appkit-modal__panel--xl",
+    full: "appkit-modal__panel--full",
+};
+export function Modal({ isOpen, open, onClose, title, children, size = "md", showCloseButton = true, actions, className = "", }) {
+    const visible = open ?? isOpen ?? false;
+    const titleId = React.useId();
+    const panelRef = React.useRef(null);
+    const previousFocusRef = React.useRef(null);
+    React.useEffect(() => {
+        if (!visible) {
+            return;
+        }
+        const previousOverflow = document.body.style.overflow;
+        document.body.style.overflow = "hidden";
+        return () => {
+            document.body.style.overflow = previousOverflow;
+        };
+    }, [visible]);
+    React.useEffect(() => {
+        if (visible) {
+            previousFocusRef.current = document.activeElement;
+            requestAnimationFrame(() => panelRef.current?.focus());
+            return;
+        }
+        previousFocusRef.current?.focus();
+    }, [visible]);
+    const handleKeyDown = (event) => {
+        if (event.key === "Escape") {
+            onClose();
+            return;
+        }
+        if (event.key !== "Tab") {
+            return;
+        }
+        const panel = panelRef.current;
+        if (!panel) {
+            return;
+        }
+        const focusable = Array.from(panel.querySelectorAll('a[href],button:not([disabled]),textarea,input,select,[tabindex]:not([tabindex="-1"])'));
+        if (!focusable.length) {
+            return;
+        }
+        const first = focusable[0];
+        const last = focusable[focusable.length - 1];
+        if (event.shiftKey && document.activeElement === first) {
+            event.preventDefault();
+            last.focus();
+        }
+        else if (!event.shiftKey && document.activeElement === last) {
+            event.preventDefault();
+            first.focus();
+        }
+    };
+    if (!visible || typeof document === "undefined") {
+        return null;
+    }
+    return createPortal(_jsxs("div", { className: "appkit-modal", role: "dialog", "aria-modal": "true", "aria-labelledby": title ? titleId : undefined, onKeyDown: handleKeyDown, "data-section": "modal-div-561", children: [_jsx("div", { className: "appkit-modal__backdrop", "aria-hidden": "true", onClick: onClose }), _jsxs("div", { ref: panelRef, tabIndex: -1, className: ["appkit-modal__panel", SIZE_CLASSES[size], className]
+                    .filter(Boolean)
+                    .join(" "), "data-section": "modal-div-562", children: [(title || showCloseButton) && (_jsxs("div", { className: "appkit-modal__header", "data-section": "modal-div-563", children: [title ? (_jsx(Heading, { level: 2, id: titleId, className: "appkit-modal__title", children: title })) : (_jsx("span", {})), showCloseButton ? (_jsx(Button, { variant: "ghost", size: "sm", type: "button", onClick: onClose, className: "appkit-modal__close", "aria-label": "Close", children: _jsx("span", { className: "appkit-modal__close-icon", "aria-hidden": "true", children: "\u00D7" }) })) : null] })), _jsx("div", { className: "appkit-modal__body", "data-section": "modal-div-564", children: children }), actions ? _jsx(ModalFooter, { children: actions }) : null] })] }), document.body);
+}
+export function ModalFooter({ children, className = "", }) {
+    return (_jsx("div", { className: [
+            "flex items-center justify-end gap-3 border-t border-zinc-100 px-6 py-4 dark:border-slate-800",
+            className,
+        ]
+            .filter(Boolean)
+            .join(" "), "data-section": "modal-div-565", children: children }));
+}

package/dist/ui/components/Modal.style.css

@@ -0,0 +1,102 @@
+.appkit-modal {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 1rem;
+}
+
+.appkit-modal__backdrop {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.6);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-modal__panel {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  max-height: 90vh;
+  overflow: hidden;
+  border-radius: 1rem;
+  background: #ffffff;
+  box-shadow: 0 20px 45px -20px rgba(0, 0, 0, 0.45);
+  border: 1px solid #e4e4e7;
+  animation: appkit-modal-fade-up 0.15s ease forwards;
+}
+
+.dark .appkit-modal__panel {
+  background: #0f172a;
+  border-color: #334155;
+}
+
+.appkit-modal__panel--sm { max-width: 24rem; }
+.appkit-modal__panel--md { max-width: 32rem; }
+.appkit-modal__panel--lg { max-width: 42rem; }
+.appkit-modal__panel--xl { max-width: 56rem; }
+.appkit-modal__panel--full { max-width: 95vw; max-height: 95vh; }
+
+.appkit-modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid #f4f4f5;
+  flex-shrink: 0;
+}
+
+.dark .appkit-modal__header {
+  border-bottom-color: #1e293b;
+}
+
+.appkit-modal__title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.appkit-modal__close {
+  margin-left: auto;
+  min-height: 0;
+  padding: 0.375rem;
+  border-radius: 0.5rem;
+  color: #a1a1aa;
+}
+
+.appkit-modal__close:hover {
+  color: #52525b;
+}
+
+.dark .appkit-modal__close {
+  color: #71717a;
+}
+
+.dark .appkit-modal__close:hover {
+  color: #cbd5e1;
+}
+
+.appkit-modal__close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}
+
+.appkit-modal__body {
+  overflow-y: auto;
+  flex: 1;
+  padding: 1rem 1.5rem;
+}
+
+@keyframes appkit-modal-fade-up {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/dist/ui/components/NavigationLoader.d.ts

@@ -0,0 +1,29 @@
+export interface NavigationLoaderProps {
+    /**
+     * Spinner variant shown during navigation.
+     * @default "pokeball"
+     */
+    spinnerVariant?: "primary" | "white" | "current" | "pokeball";
+    /** Label read by screen readers. @default "Loading page…" */
+    label?: string;
+    /**
+     * Safety valve: hides the overlay if the route never settles.
+     * @default 15000 (ms)
+     */
+    timeoutMs?: number;
+    /** Additional className on the overlay div. */
+    className?: string;
+}
+/**
+ * NavigationLoader
+ *
+ * Renders a full-screen overlay with a spinner during any client-side
+ * navigation (Link clicks, router.push, back/forward).
+ *
+ * Strategy:
+ *  - Start: intercept `history.pushState` + `popstate`
+ *  - End:   `usePathname()` changing means React has settled
+ *
+ * Mount once at the app shell level (e.g. inside LayoutShellClient).
+ */
+export declare function NavigationLoader({ spinnerVariant, label, timeoutMs, className, }: NavigationLoaderProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/ui/components/NavigationLoader.js

@@ -0,0 +1,146 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { usePathname, useSearchParams } from "next/navigation";
+import { Spinner } from "./Spinner";
+/**
+ * NavigationLoader
+ *
+ * Renders a full-screen overlay with a spinner during any client-side
+ * navigation (Link clicks, router.push, back/forward).
+ *
+ * Strategy:
+ *  - Start: intercept `history.pushState` + `popstate`
+ *  - End:   `usePathname()` changing means React has settled
+ *
+ * Mount once at the app shell level (e.g. inside LayoutShellClient).
+ */
+export function NavigationLoader({ spinnerVariant = "pokeball", label = "Loading page…", timeoutMs = 15000, className = "", }) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [visible, setVisible] = useState(false);
+    const [elapsed, setElapsed] = useState(0);
+    const safetyTimer = useRef(null);
+    const showTimer = useRef(null);
+    const startTime = useRef(null);
+    const tickTimer = useRef(null);
+    const pendingUrl = useRef(null);
+    const visibleRef = useRef(false);
+    const activeRef = useRef(false);
+    const currentUrl = `${pathname ?? ""}?${searchParams?.toString() ?? ""}`;
+    const prevUrl = useRef(currentUrl);
+    useEffect(() => {
+        visibleRef.current = visible;
+    }, [visible]);
+    // Hide once the route URL (path + query/hash) has settled in React.
+    useEffect(() => {
+        if (currentUrl !== prevUrl.current) {
+            prevUrl.current = currentUrl;
+            activeRef.current = false;
+            visibleRef.current = false;
+            setVisible(false);
+            if (showTimer.current) {
+                clearTimeout(showTimer.current);
+                showTimer.current = null;
+            }
+            if (safetyTimer.current)
+                clearTimeout(safetyTimer.current);
+            if (tickTimer.current)
+                clearInterval(tickTimer.current);
+            startTime.current = null;
+            pendingUrl.current = null;
+        }
+    }, [currentUrl]);
+    useEffect(() => {
+        function showOverlay(nextKey) {
+            if (activeRef.current || visibleRef.current)
+                return;
+            if (showTimer.current)
+                return;
+            activeRef.current = true;
+            if (nextKey && pendingUrl.current === nextKey)
+                return;
+            pendingUrl.current = nextKey ?? pendingUrl.current;
+            // Defer to next macrotask to avoid updates during router insertion effects.
+            showTimer.current = setTimeout(() => {
+                showTimer.current = null;
+                visibleRef.current = true;
+                startTime.current = performance.now();
+                setElapsed(0);
+                if (tickTimer.current)
+                    clearInterval(tickTimer.current);
+                tickTimer.current = setInterval(() => {
+                    setElapsed(Math.floor((performance.now() - startTime.current) / 100) / 10);
+                }, 100);
+                setVisible(true);
+                if (safetyTimer.current)
+                    clearTimeout(safetyTimer.current);
+                safetyTimer.current = setTimeout(() => {
+                    activeRef.current = false;
+                    visibleRef.current = false;
+                    setVisible(false);
+                    if (tickTimer.current)
+                        clearInterval(tickTimer.current);
+                    startTime.current = null;
+                    pendingUrl.current = null;
+                }, timeoutMs);
+            }, 0);
+        }
+        function shouldShowForNextUrl(next) {
+            // No target URL means history state mutation only, not navigation.
+            if (!next)
+                return false;
+            try {
+                const href = typeof next === "string" ? next : next.toString();
+                const nextUrl = new URL(href, window.location.href);
+                const nextKey = `${nextUrl.pathname}?${nextUrl.searchParams.toString()}`;
+                const liveUrl = new URL(window.location.href);
+                const liveKey = `${liveUrl.pathname}?${liveUrl.searchParams.toString()}`;
+                if (nextKey === liveKey)
+                    return false;
+                if (pendingUrl.current && nextKey === pendingUrl.current)
+                    return false;
+                return true;
+            }
+            catch {
+                return true;
+            }
+        }
+        const origPush = history.pushState.bind(history);
+        history.pushState = (...args) => {
+            const next = args[2];
+            if (shouldShowForNextUrl(next)) {
+                try {
+                    const href = typeof next === "string" ? next : next?.toString() ?? "";
+                    const nextUrl = new URL(href, window.location.href);
+                    showOverlay(`${nextUrl.pathname}?${nextUrl.searchParams.toString()}`);
+                }
+                catch {
+                    showOverlay();
+                }
+            }
+            return origPush(...args);
+        };
+        function onPopState() {
+            showOverlay();
+        }
+        window.addEventListener("popstate", onPopState);
+        return () => {
+            history.pushState = origPush;
+            window.removeEventListener("popstate", onPopState);
+            if (showTimer.current)
+                clearTimeout(showTimer.current);
+            if (safetyTimer.current)
+                clearTimeout(safetyTimer.current);
+            if (tickTimer.current)
+                clearInterval(tickTimer.current);
+            activeRef.current = false;
+            visibleRef.current = false;
+            startTime.current = null;
+            pendingUrl.current = null;
+        };
+    }, [timeoutMs]);
+    if (!visible)
+        return null;
+    return (_jsxs("div", { role: "status", "aria-label": label, className: `appkit-nav-loader ${className}`, "data-section": "navigationloader-div-566", children: [_jsx(Spinner, { size: "xl", variant: spinnerVariant, label: label }), _jsxs("span", { className: "appkit-nav-loader__timer", "aria-hidden": "true", children: [elapsed.toFixed(1), "s"] })] }));
+}

package/dist/ui/components/NavigationLoader.style.css

@@ -0,0 +1,19 @@
+.appkit-nav-loader {
+  position: fixed;
+  inset: 0;
+  z-index: 9998;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.25rem;
+  background: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(4px);
+}
+
+.appkit-nav-loader__timer {
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  color: rgba(255, 255, 255, 0.75);
+  letter-spacing: 0.04em;
+}

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

@@ -0,0 +1,25 @@
+import type { PaginationConfig } from "../../contracts";
+/**
+ * Pagination — smart ellipsis pagination with prev/next chevrons.
+ *
+ * Accepts either individual props OR a `paginationConfig` object
+ * (merged with DEFAULT_PAGINATION_CONFIG). Individual props take precedence.
+ */
+export interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    /**
+     * Composable pagination config. Merged with DEFAULT_PAGINATION_CONFIG.
+     * Individual flat props override this.
+     */
+    paginationConfig?: Partial<PaginationConfig>;
+    /** Max visible page buttons before ellipsis kicks in. Default: 7 */
+    maxVisible?: number;
+    showFirstLast?: boolean;
+    showPrevNext?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+}
+export declare function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled, size: sizeProp, className, }: PaginationProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/components/Pagination.js

@@ -0,0 +1,55 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DEFAULT_PAGINATION_CONFIG } from "../../contracts";
+function getPageNumbers(currentPage, totalPages, maxVisible) {
+    if (totalPages <= maxVisible) {
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = [];
+    const halfVisible = Math.floor(maxVisible / 2);
+    let startPage = Math.max(1, currentPage - halfVisible);
+    let endPage = Math.min(totalPages, currentPage + halfVisible);
+    if (currentPage <= halfVisible)
+        endPage = maxVisible;
+    if (currentPage >= totalPages - halfVisible)
+        startPage = totalPages - maxVisible + 1;
+    if (startPage > 1) {
+        pages.push(1);
+        if (startPage > 2)
+            pages.push("...");
+    }
+    for (let i = startPage; i <= endPage; i++)
+        pages.push(i);
+    if (endPage < totalPages) {
+        if (endPage < totalPages - 1)
+            pages.push("...");
+        pages.push(totalPages);
+    }
+    return pages;
+}
+const SIZE_CLASSES = {
+    sm: "appkit-pagination--sm",
+    md: "appkit-pagination--md",
+    lg: "appkit-pagination--lg",
+};
+export function Pagination({ currentPage, totalPages, onPageChange, paginationConfig, maxVisible: maxVisibleProp, showFirstLast: showFirstLastProp, showPrevNext: showPrevNextProp, disabled = false, size: sizeProp, className = "", }) {
+    const resolved = { ...DEFAULT_PAGINATION_CONFIG, ...paginationConfig };
+    const maxVisible = maxVisibleProp ?? resolved.maxVisible;
+    const showFirstLast = showFirstLastProp ?? resolved.showFirstLast;
+    const showPrevNext = showPrevNextProp ?? resolved.showPrevNext;
+    const size = sizeProp ?? resolved.size;
+    const handle = (page) => {
+        if (disabled || page < 1 || page > totalPages || page === currentPage)
+            return;
+        onPageChange(page);
+    };
+    const btnClass = (active, off) => {
+        const base = `appkit-pagination__button ${SIZE_CLASSES[size]}`;
+        if (off)
+            return `${base} appkit-pagination__button--disabled`;
+        if (active)
+            return `${base} appkit-pagination__button--active`;
+        return `${base} appkit-pagination__button--default`;
+    };
+    const pages = getPageNumbers(currentPage, totalPages, maxVisible);
+    return (_jsxs("nav", { className: `appkit-pagination ${className}`, "aria-label": "Pagination", children: [showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(1), disabled: disabled || currentPage === 1, "aria-label": "First page", children: "\u00AB" })), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === 1), onClick: () => handle(currentPage - 1), disabled: disabled || currentPage === 1, "aria-label": "Previous page", children: "\u2039" })), pages.map((page, i) => page === "..." ? (_jsx("span", { className: `appkit-pagination__ellipsis ${SIZE_CLASSES[size]}`, "aria-hidden": "true", children: "\u2026" }, `ellipsis-${i}`)) : (_jsx("button", { type: "button", className: btnClass(page === currentPage, disabled && page !== currentPage), onClick: () => handle(page), disabled: disabled, "aria-label": `Page ${page}`, "aria-current": page === currentPage ? "page" : undefined, children: page }, page))), showPrevNext && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(currentPage + 1), disabled: disabled || currentPage === totalPages, "aria-label": "Next page", children: "\u203A" })), showFirstLast && (_jsx("button", { type: "button", className: btnClass(false, disabled || currentPage === totalPages), onClick: () => handle(totalPages), disabled: disabled || currentPage === totalPages, "aria-label": "Last page", children: "\u00BB" }))] }));
+}

package/dist/ui/components/Pagination.style.css

@@ -0,0 +1,76 @@
+.appkit-pagination {
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.appkit-pagination__button {
+  border: 1px solid #e4e4e7;
+  border-radius: 0.5rem;
+  font-weight: 500;
+  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+}
+
+.appkit-pagination--sm { font-size: 0.75rem; padding: 0.25rem 0.5rem; min-width: 1.75rem; }
+.appkit-pagination--md { font-size: 0.875rem; padding: 0.375rem 0.75rem; min-width: 2.25rem; }
+.appkit-pagination--lg { font-size: 1rem; padding: 0.5rem 1rem; min-width: 2.75rem; }
+
+.appkit-pagination__button--default {
+  background: #ffffff;
+  color: #3f3f46;
+  cursor: pointer;
+}
+
+.appkit-pagination__button--default:hover {
+  background: #fafafa;
+  border-color: #d4d4d8;
+}
+
+.appkit-pagination__button--active {
+  background: #509c02;
+  color: #ffffff;
+  border-color: #509c02;
+  cursor: default;
+}
+
+.appkit-pagination__button--disabled {
+  background: #f4f4f5;
+  color: #a1a1aa;
+  border-color: #e4e4e7;
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.appkit-pagination__ellipsis {
+  color: #a1a1aa;
+  text-align: center;
+}
+
+.dark .appkit-pagination__button {
+  border-color: #334155;
+}
+
+.dark .appkit-pagination__button--default {
+  background: #0f172a;
+  color: #cbd5e1;
+}
+
+.dark .appkit-pagination__button--default:hover {
+  background: #1e293b;
+  border-color: #475569;
+}
+
+.dark .appkit-pagination__button--active {
+  background: #e91e8c;
+  border-color: #e91e8c;
+  color: #ffffff;
+}
+
+.dark .appkit-pagination__button--disabled {
+  background: #1e293b;
+  color: #64748b;
+}
+
+.dark .appkit-pagination__ellipsis {
+  color: #64748b;
+}

package/dist/ui/components/PasswordStrengthIndicator.d.ts

@@ -0,0 +1,12 @@
+export interface PasswordStrengthIndicatorProps {
+    password: string;
+    minLength?: number;
+    showRequirements?: boolean;
+    labels?: {
+        weak?: string;
+        fair?: string;
+        good?: string;
+        strong?: string;
+    };
+}
+export declare function PasswordStrengthIndicator({ password, minLength, showRequirements, labels, }: PasswordStrengthIndicatorProps): import("react/jsx-runtime").JSX.Element | null;