@gridui/pagination 1.0.5 → 1.0.7

package/README.md

@@ -6,3 +6,5 @@ Import components from `@gridui/pagination` and load `@gridui/pagination/styles.
 Load styles for any composed dependency used by this family. Applications own routes, labels, state persistence, and branding.
 
 See [component ownership](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/docs/component-ownership.md) and [release history](https://github.com/sudo-ui/GridUI-React-Monorepo/tree/main/packages-core/pagination/.changeset/history).
+
+[Component reference](docs/reference/README.md) contains focused API pages for each public component.

package/dist/index.js

@@ -69,7 +69,7 @@ var Pagination = (props) => {
       "aria-current": active ? "page" : void 0,
       variant: active ? "secondary" : "quiet",
       layout: "icon",
-      className: typeof children === "number" ? "gridui-u-h-auto gridui-u-min-h-11 gridui-u-w-auto gridui-u-min-w-11 gridui-u-px-gridui-8 gridui-u-whitespace-nowrap" : void 0
+      className: typeof children === "number" ? "gridui-u-pagination--h-auto gridui-u-pagination--min-h-11 gridui-u-pagination--w-auto gridui-u-pagination--min-w-11 gridui-u-pagination--px-gridui-8 gridui-u-pagination--whitespace-nowrap" : void 0
     };
     if (getPageHref && !disabled) {
       return /* @__PURE__ */ jsx(
@@ -104,7 +104,7 @@ var Pagination = (props) => {
           "span",
           {
             role: "img",
-            className: "gridui-u-inline-flex gridui-u-min-h-11 gridui-u-min-w-11 gridui-u-items-center gridui-u-justify-center gridui-u-text-muted",
+            className: "gridui-u-pagination--inline-flex gridui-u-pagination--min-h-11 gridui-u-pagination--min-w-11 gridui-u-pagination--items-center gridui-u-pagination--justify-center gridui-u-pagination--text-muted",
             "aria-label": labels.ellipsis,
             children: /* @__PURE__ */ jsx(
               Ellipsis,
@@ -122,16 +122,16 @@ var Pagination = (props) => {
     {
       ...restProps,
       "aria-label": labels.navigation,
-      className: cn("gridui-u-min-w-0", className),
+      className: cn("gridui-u-pagination--min-w-0", className),
       children: /* @__PURE__ */ jsxs(
         "ul",
         {
-          className: "gridui-u-m-0 gridui-u-flex gridui-u-list-none gridui-u-flex-wrap gridui-u-items-center gridui-u-gap-0 gridui-u-p-0 gridui-u-md:gap-gridui-4",
+          className: "gridui-u-pagination--m-0 gridui-u-pagination--flex gridui-u-pagination--list-none gridui-u-pagination--flex-wrap gridui-u-pagination--items-center gridui-u-pagination--gap-0 gridui-u-pagination--p-0 gridui-u-pagination--md:gap-gridui-4",
           children: [
             /* @__PURE__ */ jsx("li", { children: control(current - 1, labels.previous, /* @__PURE__ */ jsx(
               ChevronLeft,
               {
-                className: "gridui-u-rtl:rotate-180",
+                className: "gridui-u-pagination--rtl:rotate-180",
                 "aria-hidden": "true"
               }
             ), pageCount === 0 || current === 1) }),
@@ -140,9 +140,9 @@ var Pagination = (props) => {
                 Fragment,
                 {
                   children: [
-                    entry === pageCount && compactEntries.includes("end-ellipsis") && !entries.includes("end-ellipsis") && renderEntry("end-ellipsis", cn("gridui-u-md:hidden")),
-                    renderEntry(entry, compactEntries.includes(entry) ? void 0 : cn("gridui-u-hidden gridui-u-md:block")),
-                    entry === 1 && compactEntries.includes("start-ellipsis") && !entries.includes("start-ellipsis") && renderEntry("start-ellipsis", cn("gridui-u-md:hidden"))
+                    entry === pageCount && compactEntries.includes("end-ellipsis") && !entries.includes("end-ellipsis") && renderEntry("end-ellipsis", cn("gridui-u-pagination--md:hidden")),
+                    renderEntry(entry, compactEntries.includes(entry) ? void 0 : cn("gridui-u-pagination--hidden gridui-u-pagination--md:block")),
+                    entry === 1 && compactEntries.includes("start-ellipsis") && !entries.includes("start-ellipsis") && renderEntry("start-ellipsis", cn("gridui-u-pagination--md:hidden"))
                   ]
                 },
                 entry
@@ -151,7 +151,7 @@ var Pagination = (props) => {
             /* @__PURE__ */ jsx("li", { children: control(current + 1, labels.next, /* @__PURE__ */ jsx(
               ChevronRight,
               {
-                className: "gridui-u-rtl:rotate-180",
+                className: "gridui-u-pagination--rtl:rotate-180",
                 "aria-hidden": "true"
               }
             ), pageCount === 0 || current >= pageCount) })

package/dist/index.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/pagination/range.ts", "../src/pagination/pagination.tsx"],
-  "sourcesContent": ["/**\n * @author WMXPY\n * @package Pagination\n * @namespace Pagination\n * @description Range\n */\n\nexport type PaginationEntry = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nexport const paginationRange = (page: number, pageCount: number, compact = false): PaginationEntry[] => {\n    if (!Number.isSafeInteger(pageCount) || pageCount < 0 || !Number.isSafeInteger(page) || page < 1) {\n        throw new RangeError(\"Pagination requires a positive integer page and a non-negative integer pageCount.\");\n    }\n    if (pageCount === 0) {\n        return [];\n    }\n    if (pageCount <= (compact ? 5 : 7)) {\n        return Array.from({ length: pageCount }, (_, index) => {\n            return index + 1;\n        });\n    }\n    const current = Math.min(page, pageCount);\n    if (compact) {\n        const positions = [\n            ...new Set([\n                1,\n                current,\n                pageCount,\n            ]),\n        ];\n        const entries: PaginationEntry[] = [];\n        for (const [\n            index,\n            position,\n        ] of positions.entries()) {\n            if (index > 0 && position - positions[index - 1]! > 1) {\n                entries.push(position <= current ? \"start-ellipsis\" : \"end-ellipsis\");\n            }\n            entries.push(position);\n        }\n        return entries;\n    }\n    const start = Math.max(2, Math.min(current - 1, pageCount - 4));\n    const end = Math.min(pageCount - 1, Math.max(current + 1, 5));\n    const entries: PaginationEntry[] = [1];\n    if (start === 3) {\n        entries.push(2);\n    } else if (start > 3) {\n        entries.push(\"start-ellipsis\");\n    }\n    for (let index = start; index <= end; index++) { entries.push(index); }\n    if (end === pageCount - 2) {\n        entries.push(pageCount - 1);\n    } else if (end < pageCount - 2) {\n        entries.push(\"end-ellipsis\");\n    }\n    entries.push(pageCount);\n    return entries;\n};\n", "/**\n * @author WMXPY\n * @package Pagination\n * @namespace Pagination\n * @description Pagination\n */\n\nimport { type PaginationEntry, paginationRange } from \"./range\";\nimport { Button, ButtonLink } from \"@gridui/button\";\nimport { cn } from \"@gridui/style-utils\";\nimport { ChevronLeft, ChevronRight, Ellipsis } from \"lucide-react\";\nimport { type ComponentPropsWithRef, type FC, Fragment, type ReactNode } from \"react\";\n\nexport type PaginationLabels = {\n    readonly navigation: string;\n    readonly previous: string;\n    readonly next: string;\n    readonly page: (page: number) => string;\n    readonly ellipsis: string;\n};\n\nexport type PaginationProps = Omit<ComponentPropsWithRef<\"nav\">, \"children\" | \"aria-label\"> & {\n    readonly page: number;\n    readonly pageCount: number;\n    readonly labels: PaginationLabels;\n} & ({\n    readonly onPageChange: (page: number) => void;\n    readonly getPageHref?: never;\n} | {\n    readonly getPageHref: (page: number) => string;\n    readonly onPageChange?: never;\n});\n\nexport const Pagination: FC<PaginationProps> = (props: PaginationProps) => {\n    const { page, pageCount, labels, onPageChange, getPageHref, className, ...restProps } = props;\n    const entries = paginationRange(page, pageCount);\n    const compactEntries = paginationRange(page, pageCount, true);\n    const current = Math.max(1, Math.min(page, pageCount));\n    const control = (target: number, label: string, children: ReactNode, disabled: boolean, active = false) => {\n        const shared = {\n            \"aria-label\": label,\n            \"aria-current\": active ? \"page\" as const : undefined,\n            variant: active ? \"secondary\" as const : \"quiet\" as const,\n            layout: \"icon\" as const,\n            className: typeof children === \"number\" ? \"gridui-u-h-auto gridui-u-min-h-11 gridui-u-w-auto gridui-u-min-w-11 gridui-u-px-gridui-8 gridui-u-whitespace-nowrap\" : undefined,\n        };\n        if (getPageHref && !disabled) {\n            return (<ButtonLink\n                {...shared}\n                href={getPageHref(target)}\n            >\n                {children}\n            </ButtonLink>);\n        }\n        return (<Button\n            {...shared}\n            disabled={disabled}\n            onClick={() => {\n                if (target !== current) {\n                    onPageChange?.(target);\n                }\n            }}\n        >\n            {children}\n        </Button>);\n    };\n    const renderEntry = (entry: PaginationEntry, entryClassName?: string) => {\n        return (<li\n            className={entryClassName}\n        >\n            {typeof entry === \"number\"\n                ? control(entry, labels.page(entry), entry, false, entry === current)\n                : (<span\n                    role=\"img\"\n                    className=\"gridui-u-inline-flex gridui-u-min-h-11 gridui-u-min-w-11 gridui-u-items-center gridui-u-justify-center gridui-u-text-muted\"\n                    aria-label={labels.ellipsis}\n                >\n                    <Ellipsis\n                        aria-hidden=\"true\"\n                    />\n                </span>)}\n        </li>);\n    };\n    return (<nav\n        {...restProps}\n        aria-label={labels.navigation}\n        className={cn(\"gridui-u-min-w-0\", className)}\n    >\n        <ul\n            className=\"gridui-u-m-0 gridui-u-flex gridui-u-list-none gridui-u-flex-wrap gridui-u-items-center gridui-u-gap-0 gridui-u-p-0 gridui-u-md:gap-gridui-4\"\n        >\n            <li>\n                {control(current - 1, labels.previous, (<ChevronLeft\n                    className=\"gridui-u-rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                />), pageCount === 0 || current === 1)}\n            </li>\n            {entries.map(entry => {\n                return (<Fragment\n                    key={entry}\n                >\n                    {entry === pageCount && compactEntries.includes(\"end-ellipsis\") && !entries.includes(\"end-ellipsis\")\n                        && renderEntry(\"end-ellipsis\", cn(\"gridui-u-md:hidden\"))}\n                    {renderEntry(entry, compactEntries.includes(entry) ? undefined : cn(\"gridui-u-hidden gridui-u-md:block\"))}\n                    {entry === 1 && compactEntries.includes(\"start-ellipsis\") && !entries.includes(\"start-ellipsis\")\n                        && renderEntry(\"start-ellipsis\", cn(\"gridui-u-md:hidden\"))}\n                </Fragment>);\n            })}\n            <li>\n                {control(current + 1, labels.next, (<ChevronRight\n                    className=\"gridui-u-rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                />), pageCount === 0 || current >= pageCount)}\n            </li>\n        </ul>\n    </nav>);\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["/**\n * @author WMXPY\n * @package Pagination\n * @namespace Pagination\n * @description Range\n */\n\nexport type PaginationEntry = number | \"start-ellipsis\" | \"end-ellipsis\";\n\nexport const paginationRange = (page: number, pageCount: number, compact = false): PaginationEntry[] => {\n    if (!Number.isSafeInteger(pageCount) || pageCount < 0 || !Number.isSafeInteger(page) || page < 1) {\n        throw new RangeError(\"Pagination requires a positive integer page and a non-negative integer pageCount.\");\n    }\n    if (pageCount === 0) {\n        return [];\n    }\n    if (pageCount <= (compact ? 5 : 7)) {\n        return Array.from({ length: pageCount }, (_, index) => {\n            return index + 1;\n        });\n    }\n    const current = Math.min(page, pageCount);\n    if (compact) {\n        const positions = [\n            ...new Set([\n                1,\n                current,\n                pageCount,\n            ]),\n        ];\n        const entries: PaginationEntry[] = [];\n        for (const [\n            index,\n            position,\n        ] of positions.entries()) {\n            if (index > 0 && position - positions[index - 1]! > 1) {\n                entries.push(position <= current ? \"start-ellipsis\" : \"end-ellipsis\");\n            }\n            entries.push(position);\n        }\n        return entries;\n    }\n    const start = Math.max(2, Math.min(current - 1, pageCount - 4));\n    const end = Math.min(pageCount - 1, Math.max(current + 1, 5));\n    const entries: PaginationEntry[] = [1];\n    if (start === 3) {\n        entries.push(2);\n    } else if (start > 3) {\n        entries.push(\"start-ellipsis\");\n    }\n    for (let index = start; index <= end; index++) { entries.push(index); }\n    if (end === pageCount - 2) {\n        entries.push(pageCount - 1);\n    } else if (end < pageCount - 2) {\n        entries.push(\"end-ellipsis\");\n    }\n    entries.push(pageCount);\n    return entries;\n};\n", "/**\n * @author WMXPY\n * @package Pagination\n * @namespace Pagination\n * @description Pagination\n */\n\nimport { type PaginationEntry, paginationRange } from \"./range\";\nimport { Button, ButtonLink } from \"@gridui/button\";\nimport { cn } from \"@gridui/style-utils\";\nimport { ChevronLeft, ChevronRight, Ellipsis } from \"lucide-react\";\nimport { type ComponentPropsWithRef, type FC, Fragment, type ReactNode } from \"react\";\n\nexport type PaginationLabels = {\n    readonly navigation: string;\n    readonly previous: string;\n    readonly next: string;\n    readonly page: (page: number) => string;\n    readonly ellipsis: string;\n};\n\nexport type PaginationProps = Omit<ComponentPropsWithRef<\"nav\">, \"children\" | \"aria-label\"> & {\n    readonly page: number;\n    readonly pageCount: number;\n    readonly labels: PaginationLabels;\n} & ({\n    readonly onPageChange: (page: number) => void;\n    readonly getPageHref?: never;\n} | {\n    readonly getPageHref: (page: number) => string;\n    readonly onPageChange?: never;\n});\n\nexport const Pagination: FC<PaginationProps> = (props: PaginationProps) => {\n    const { page, pageCount, labels, onPageChange, getPageHref, className, ...restProps } = props;\n    const entries = paginationRange(page, pageCount);\n    const compactEntries = paginationRange(page, pageCount, true);\n    const current = Math.max(1, Math.min(page, pageCount));\n    const control = (target: number, label: string, children: ReactNode, disabled: boolean, active = false) => {\n        const shared = {\n            \"aria-label\": label,\n            \"aria-current\": active ? \"page\" as const : undefined,\n            variant: active ? \"secondary\" as const : \"quiet\" as const,\n            layout: \"icon\" as const,\n            className: typeof children === \"number\" ? \"gridui-u-pagination--h-auto gridui-u-pagination--min-h-11 gridui-u-pagination--w-auto gridui-u-pagination--min-w-11 gridui-u-pagination--px-gridui-8 gridui-u-pagination--whitespace-nowrap\" : undefined,\n        };\n        if (getPageHref && !disabled) {\n            return (<ButtonLink\n                {...shared}\n                href={getPageHref(target)}\n            >\n                {children}\n            </ButtonLink>);\n        }\n        return (<Button\n            {...shared}\n            disabled={disabled}\n            onClick={() => {\n                if (target !== current) {\n                    onPageChange?.(target);\n                }\n            }}\n        >\n            {children}\n        </Button>);\n    };\n    const renderEntry = (entry: PaginationEntry, entryClassName?: string) => {\n        return (<li\n            className={entryClassName}\n        >\n            {typeof entry === \"number\"\n                ? control(entry, labels.page(entry), entry, false, entry === current)\n                : (<span\n                    role=\"img\"\n                    className=\"gridui-u-pagination--inline-flex gridui-u-pagination--min-h-11 gridui-u-pagination--min-w-11 gridui-u-pagination--items-center gridui-u-pagination--justify-center gridui-u-pagination--text-muted\"\n                    aria-label={labels.ellipsis}\n                >\n                    <Ellipsis\n                        aria-hidden=\"true\"\n                    />\n                </span>)}\n        </li>);\n    };\n    return (<nav\n        {...restProps}\n        aria-label={labels.navigation}\n        className={cn(\"gridui-u-pagination--min-w-0\", className)}\n    >\n        <ul\n            className=\"gridui-u-pagination--m-0 gridui-u-pagination--flex gridui-u-pagination--list-none gridui-u-pagination--flex-wrap gridui-u-pagination--items-center gridui-u-pagination--gap-0 gridui-u-pagination--p-0 gridui-u-pagination--md:gap-gridui-4\"\n        >\n            <li>\n                {control(current - 1, labels.previous, (<ChevronLeft\n                    className=\"gridui-u-pagination--rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                />), pageCount === 0 || current === 1)}\n            </li>\n            {entries.map(entry => {\n                return (<Fragment\n                    key={entry}\n                >\n                    {entry === pageCount && compactEntries.includes(\"end-ellipsis\") && !entries.includes(\"end-ellipsis\")\n                        && renderEntry(\"end-ellipsis\", cn(\"gridui-u-pagination--md:hidden\"))}\n                    {renderEntry(entry, compactEntries.includes(entry) ? undefined : cn(\"gridui-u-pagination--hidden gridui-u-pagination--md:block\"))}\n                    {entry === 1 && compactEntries.includes(\"start-ellipsis\") && !entries.includes(\"start-ellipsis\")\n                        && renderEntry(\"start-ellipsis\", cn(\"gridui-u-pagination--md:hidden\"))}\n                </Fragment>);\n            })}\n            <li>\n                {control(current + 1, labels.next, (<ChevronRight\n                    className=\"gridui-u-pagination--rtl:rotate-180\"\n                    aria-hidden=\"true\"\n                />), pageCount === 0 || current >= pageCount)}\n            </li>\n        </ul>\n    </nav>);\n};\n"],
+  "mappings": "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",
   "names": ["entries"]
 }

package/dist/styles.css

@@ -1,4 +1,4 @@
-/*! tailwindcss v4.3.4 | MIT License | https://tailwindcss.com */
+/*! tailwindcss v4.3.5 | MIT License | https://tailwindcss.com */
 @layer theme, base, components, utilities;
 @layer theme {
   :root, :host {
@@ -6,72 +6,72 @@
   }
 }
 @layer utilities {
-  .gridui-u-m-0 {
+  .gridui-u-pagination--m-0 {
     margin: 0px;
   }
-  .gridui-u-flex {
+  .gridui-u-pagination--flex {
     display: flex;
   }
-  .gridui-u-hidden {
+  .gridui-u-pagination--hidden {
     display: none;
   }
-  .gridui-u-inline-flex {
+  .gridui-u-pagination--inline-flex {
     display: inline-flex;
   }
-  .gridui-u-h-auto {
+  .gridui-u-pagination--h-auto {
     height: auto;
   }
-  .gridui-u-min-h-11 {
+  .gridui-u-pagination--min-h-11 {
     min-height: calc(var(--spacing) * 11);
   }
-  .gridui-u-w-auto {
+  .gridui-u-pagination--w-auto {
     width: auto;
   }
-  .gridui-u-min-w-0 {
+  .gridui-u-pagination--min-w-0 {
     min-width: 0px;
   }
-  .gridui-u-min-w-11 {
+  .gridui-u-pagination--min-w-11 {
     min-width: calc(var(--spacing) * 11);
   }
-  .gridui-u-list-none {
+  .gridui-u-pagination--list-none {
     list-style-type: none;
   }
-  .gridui-u-flex-wrap {
+  .gridui-u-pagination--flex-wrap {
     flex-wrap: wrap;
   }
-  .gridui-u-items-center {
+  .gridui-u-pagination--items-center {
     align-items: center;
   }
-  .gridui-u-justify-center {
+  .gridui-u-pagination--justify-center {
     justify-content: center;
   }
-  .gridui-u-gap-0 {
+  .gridui-u-pagination--gap-0 {
     gap: 0px;
   }
-  .gridui-u-p-0 {
+  .gridui-u-pagination--p-0 {
     padding: 0px;
   }
-  .gridui-u-px-gridui-8 {
+  .gridui-u-pagination--px-gridui-8 {
     padding-inline: var(--gridui-space-8);
   }
-  .gridui-u-whitespace-nowrap {
+  .gridui-u-pagination--whitespace-nowrap {
     white-space: nowrap;
   }
-  .gridui-u-text-muted {
+  .gridui-u-pagination--text-muted {
     color: var(--gridui-muted);
   }
   @media (width >= 48rem) {
-    .gridui-u-md\:block {
+    .gridui-u-pagination--md\:block {
       display: block;
     }
-    .gridui-u-md\:hidden {
+    .gridui-u-pagination--md\:hidden {
       display: none;
     }
-    .gridui-u-md\:gap-gridui-4 {
+    .gridui-u-pagination--md\:gap-gridui-4 {
       gap: var(--gridui-space-4);
     }
   }
-  .gridui-u-rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
+  .gridui-u-pagination--rtl\:rotate-180:where(:dir(rtl), [dir="rtl"], [dir="rtl"] *) {
     rotate: 180deg;
   }
 }

package/docs/catalog.json

@@ -1,12 +1,14 @@
 {
   "schemaVersion": 1,
   "name": "@gridui/pagination",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "category": "core",
   "description": "GridUI React pagination",
-  "usage": "GridUI React pagination",
+  "usage": "Component reference contains focused API pages for each public component.",
   "documentation": [
-    "README.md"
+    "README.md",
+    "docs/reference/README.md",
+    "docs/reference/pagination.md"
   ],
   "exports": [
     {
@@ -31,6 +33,7 @@
     "@gridui/pagination/styles.css"
   ],
   "examples": [
+    "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/pagination/stories/paginated-navigation.mdx",
     "https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/pagination/stories/pagination.stories.tsx"
   ]
 }

package/docs/reference/README.md

@@ -0,0 +1,4 @@
+<!-- Generated by pnpm docs:storybook. -->
+# Component reference
+
+- [Pagination](pagination.md)

package/docs/reference/pagination.md

@@ -0,0 +1,73 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# Pagination
+
+Navigates a collection divided into pages. Applications own the current page and the data shown for it.
+
+Import from ``@gridui/pagination`` and load Theme before this family's stylesheet.
+
+```tsx
+import { Pagination } from "@gridui/pagination";
+import "@gridui/theme/styles.css";
+import "@gridui/pagination/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/pagination/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/pagination/stories/pagination.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### onFocus
+
+``(event: FocusEvent<HTMLElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### page
+
+``number`` · Required
+
+### pageCount
+
+``number`` · Required
+
+### labels
+
+``PaginationLabels`` · Required
+
+### onPageChange
+
+``(page: number): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### getPageHref
+
+``((page: number) => string) | undefined`` · Optional
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/pagination",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "GridUI React pagination",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,10 +27,10 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/button": "^3.1.2",
-    "@gridui/style-utils": "^2.2.2",
+    "@gridui/button": "^4.1.0",
+    "@gridui/style-utils": "^4.0.0",
     "@gridui/theme": "^2.5.3",
-    "lucide-react": "1.69.0"
+    "lucide-react": "1.70.0"
   },
   "devDependencies": {
     "@gridui-internal/configuration": "0.0.0-internal",