@neynar/ui 0.1.1 → 0.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ui/accordion.d.ts +1 -25
- package/dist/components/ui/accordion.d.ts.map +1 -1
- package/dist/components/ui/alert-dialog.d.ts +240 -46
- package/dist/components/ui/alert-dialog.d.ts.map +1 -1
- package/dist/components/ui/alert.d.ts +73 -11
- package/dist/components/ui/alert.d.ts.map +1 -1
- package/dist/components/ui/aspect-ratio.d.ts +44 -10
- package/dist/components/ui/aspect-ratio.d.ts.map +1 -1
- package/dist/components/ui/avatar.d.ts +117 -33
- package/dist/components/ui/avatar.d.ts.map +1 -1
- package/dist/components/ui/badge.d.ts +50 -71
- package/dist/components/ui/badge.d.ts.map +1 -1
- package/dist/components/ui/breadcrumb.d.ts +231 -49
- package/dist/components/ui/breadcrumb.d.ts.map +1 -1
- package/dist/components/ui/button.d.ts +189 -71
- package/dist/components/ui/button.d.ts.map +1 -1
- package/dist/components/ui/calendar.d.ts +197 -40
- package/dist/components/ui/calendar.d.ts.map +1 -1
- package/dist/components/ui/card.d.ts +7 -22
- package/dist/components/ui/card.d.ts.map +1 -1
- package/dist/components/ui/carousel.d.ts +369 -99
- package/dist/components/ui/carousel.d.ts.map +1 -1
- package/dist/components/ui/chart.d.ts.map +1 -1
- package/dist/components/ui/checkbox.d.ts +110 -38
- package/dist/components/ui/checkbox.d.ts.map +1 -1
- package/dist/components/ui/collapsible.d.ts +246 -61
- package/dist/components/ui/collapsible.d.ts.map +1 -1
- package/dist/components/ui/combobox.d.ts +207 -159
- package/dist/components/ui/combobox.d.ts.map +1 -1
- package/dist/components/ui/command.d.ts +336 -67
- package/dist/components/ui/command.d.ts.map +1 -1
- package/dist/components/ui/container.d.ts +159 -64
- package/dist/components/ui/container.d.ts.map +1 -1
- package/dist/components/ui/context-menu.d.ts +321 -39
- package/dist/components/ui/context-menu.d.ts.map +1 -1
- package/dist/components/ui/date-picker.d.ts +113 -86
- package/dist/components/ui/date-picker.d.ts.map +1 -1
- package/dist/components/ui/dialog.d.ts +106 -25
- package/dist/components/ui/dialog.d.ts.map +1 -1
- package/dist/components/ui/drawer.d.ts +388 -59
- package/dist/components/ui/drawer.d.ts.map +1 -1
- package/dist/components/ui/dropdown-menu.d.ts +521 -74
- package/dist/components/ui/dropdown-menu.d.ts.map +1 -1
- package/dist/components/ui/empty-state.d.ts +148 -76
- package/dist/components/ui/empty-state.d.ts.map +1 -1
- package/dist/components/ui/hover-card.d.ts +253 -34
- package/dist/components/ui/hover-card.d.ts.map +1 -1
- package/dist/components/ui/input.d.ts +143 -44
- package/dist/components/ui/input.d.ts.map +1 -1
- package/dist/components/ui/label.d.ts +0 -8
- package/dist/components/ui/label.d.ts.map +1 -1
- package/dist/components/ui/menubar.d.ts +288 -46
- package/dist/components/ui/menubar.d.ts.map +1 -1
- package/dist/components/ui/navigation-menu.d.ts +444 -127
- package/dist/components/ui/navigation-menu.d.ts.map +1 -1
- package/dist/components/ui/pagination.d.ts +342 -66
- package/dist/components/ui/pagination.d.ts.map +1 -1
- package/dist/components/ui/popover.d.ts +0 -8
- package/dist/components/ui/popover.d.ts.map +1 -1
- package/dist/components/ui/progress.d.ts +88 -30
- package/dist/components/ui/progress.d.ts.map +1 -1
- package/dist/components/ui/radio-group.d.ts +189 -45
- package/dist/components/ui/radio-group.d.ts.map +1 -1
- package/dist/components/ui/resizable.d.ts +178 -62
- package/dist/components/ui/resizable.d.ts.map +1 -1
- package/dist/components/ui/scroll-area.d.ts +180 -21
- package/dist/components/ui/scroll-area.d.ts.map +1 -1
- package/dist/components/ui/select.d.ts +382 -60
- package/dist/components/ui/select.d.ts.map +1 -1
- package/dist/components/ui/separator.d.ts +52 -39
- package/dist/components/ui/separator.d.ts.map +1 -1
- package/dist/components/ui/sheet.d.ts +144 -27
- package/dist/components/ui/sheet.d.ts.map +1 -1
- package/dist/components/ui/sidebar.d.ts +81 -31
- package/dist/components/ui/sidebar.d.ts.map +1 -1
- package/dist/components/ui/skeleton.d.ts +94 -32
- package/dist/components/ui/skeleton.d.ts.map +1 -1
- package/dist/components/ui/slider.d.ts +37 -31
- package/dist/components/ui/slider.d.ts.map +1 -1
- package/dist/components/ui/sonner.d.ts +280 -46
- package/dist/components/ui/sonner.d.ts.map +1 -1
- package/dist/components/ui/stack.d.ts +289 -148
- package/dist/components/ui/stack.d.ts.map +1 -1
- package/dist/components/ui/stories/aspect-ratio.stories.d.ts +1 -2
- package/dist/components/ui/stories/aspect-ratio.stories.d.ts.map +1 -1
- package/dist/components/ui/stories/container.stories.d.ts +2 -3
- package/dist/components/ui/stories/container.stories.d.ts.map +1 -1
- package/dist/components/ui/stories/empty-state.stories.d.ts +2 -2
- package/dist/components/ui/stories/scroll-area.stories.d.ts +1 -2
- package/dist/components/ui/stories/scroll-area.stories.d.ts.map +1 -1
- package/dist/components/ui/stories/stack.stories.d.ts +1 -1
- package/dist/components/ui/stories/text-field.stories.d.ts +7 -1
- package/dist/components/ui/stories/text-field.stories.d.ts.map +1 -1
- package/dist/components/ui/switch.d.ts +44 -38
- package/dist/components/ui/switch.d.ts.map +1 -1
- package/dist/components/ui/table.d.ts +33 -0
- package/dist/components/ui/table.d.ts.map +1 -1
- package/dist/components/ui/tabs.d.ts +4 -22
- package/dist/components/ui/tabs.d.ts.map +1 -1
- package/dist/components/ui/text-field.d.ts +170 -84
- package/dist/components/ui/text-field.d.ts.map +1 -1
- package/dist/components/ui/textarea.d.ts +106 -29
- package/dist/components/ui/textarea.d.ts.map +1 -1
- package/dist/components/ui/theme-toggle.d.ts +190 -65
- package/dist/components/ui/theme-toggle.d.ts.map +1 -1
- package/dist/components/ui/theme.d.ts +107 -23
- package/dist/components/ui/theme.d.ts.map +1 -1
- package/dist/components/ui/toggle-group.d.ts +143 -67
- package/dist/components/ui/toggle-group.d.ts.map +1 -1
- package/dist/components/ui/toggle.d.ts +118 -30
- package/dist/components/ui/toggle.d.ts.map +1 -1
- package/dist/components/ui/tooltip.d.ts +152 -28
- package/dist/components/ui/tooltip.d.ts.map +1 -1
- package/dist/components/ui/typography.d.ts +452 -134
- package/dist/components/ui/typography.d.ts.map +1 -1
- package/dist/index.js +9388 -8281
- package/dist/index.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/llms.txt +173 -3
- package/package.json +5 -2
- package/src/components/ui/accordion.tsx +112 -27
- package/src/components/ui/alert-dialog.tsx +401 -46
- package/src/components/ui/alert.tsx +114 -11
- package/src/components/ui/aspect-ratio.tsx +69 -14
- package/src/components/ui/avatar.tsx +179 -33
- package/src/components/ui/badge.tsx +74 -75
- package/src/components/ui/breadcrumb.tsx +335 -50
- package/src/components/ui/button.tsx +198 -90
- package/src/components/ui/calendar.tsx +867 -43
- package/src/components/ui/card.tsx +140 -33
- package/src/components/ui/carousel.tsx +529 -98
- package/src/components/ui/chart.tsx +222 -1
- package/src/components/ui/checkbox.tsx +176 -38
- package/src/components/ui/collapsible.tsx +321 -67
- package/src/components/ui/combobox.tsx +284 -83
- package/src/components/ui/command.tsx +527 -67
- package/src/components/ui/container.tsx +217 -65
- package/src/components/ui/context-menu.tsx +716 -51
- package/src/components/ui/date-picker.tsx +228 -38
- package/src/components/ui/dialog.tsx +270 -33
- package/src/components/ui/drawer.tsx +546 -67
- package/src/components/ui/dropdown-menu.tsx +657 -74
- package/src/components/ui/empty-state.tsx +241 -82
- package/src/components/ui/hover-card.tsx +328 -39
- package/src/components/ui/input.tsx +207 -44
- package/src/components/ui/label.tsx +98 -8
- package/src/components/ui/menubar.tsx +587 -54
- package/src/components/ui/navigation-menu.tsx +557 -128
- package/src/components/ui/pagination.tsx +561 -79
- package/src/components/ui/popover.tsx +119 -8
- package/src/components/ui/progress.tsx +131 -29
- package/src/components/ui/radio-group.tsx +260 -51
- package/src/components/ui/resizable.tsx +289 -63
- package/src/components/ui/scroll-area.tsx +377 -66
- package/src/components/ui/select.tsx +545 -60
- package/src/components/ui/separator.tsx +146 -40
- package/src/components/ui/sheet.tsx +348 -31
- package/src/components/ui/sidebar.tsx +471 -29
- package/src/components/ui/skeleton.tsx +114 -32
- package/src/components/ui/slider.tsx +77 -31
- package/src/components/ui/sonner.tsx +574 -46
- package/src/components/ui/stack.tsx +423 -101
- package/src/components/ui/switch.tsx +78 -39
- package/src/components/ui/table.tsx +170 -4
- package/src/components/ui/tabs.tsx +108 -22
- package/src/components/ui/text-field.tsx +226 -81
- package/src/components/ui/textarea.tsx +180 -29
- package/src/components/ui/theme-toggle.tsx +313 -65
- package/src/components/ui/theme.tsx +117 -23
- package/src/components/ui/toggle-group.tsx +280 -69
- package/src/components/ui/toggle.tsx +124 -35
- package/src/components/ui/tooltip.tsx +239 -29
- package/src/components/ui/typography.tsx +1115 -165
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,uBAAuB,MAAM,iCAAiC,CAAC;
|
|
1
|
+
{"version":3,"file":"navigation-menu.d.ts","sourceRoot":"","sources":["../../../src/components/ui/navigation-menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,uBAAuB,MAAM,iCAAiC,CAAC;AA8B3E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwJG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,QAAe,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,GAAG;IAC7D,0GAA0G;IAC1G,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,2CAeA;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6CG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAW3D;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAQ3D;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,QAAA,MAAM,0BAA0B,oFAE/B,CAAC;AAYF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqDG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,2CAc9D;AAsBD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqFG;AACH,iBAAS,qBAAqB,CAAC,EAC7B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,OAAO,CAAC,2CAY9D;AAcD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,QAAQ,CAAC,2CAiB/D;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,IAAI,CAAC,2CAW3D;AAaD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2DG;AACH,iBAAS,uBAAuB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,uBAAuB,CAAC,SAAS,CAAC,2CAahE;AAED,OAAO,EACL,cAAc,EACd,kBAAkB,EAClB,kBAAkB,EAClB,qBAAqB,EACrB,qBAAqB,EACrB,kBAAkB,EAClB,uBAAuB,EACvB,sBAAsB,EACtB,0BAA0B,GAC3B,CAAC"}
|
|
@@ -1,14 +1,26 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Component prop type using inferred HTML nav element props
|
|
4
|
+
*/
|
|
5
|
+
type PaginationProps = {
|
|
6
|
+
/** Additional CSS classes for custom styling */
|
|
7
|
+
className?: string;
|
|
8
|
+
/** Child elements - typically PaginationContent */
|
|
9
|
+
children?: React.ReactNode;
|
|
10
|
+
} & Omit<React.ComponentProps<"nav">, "className" | "children">;
|
|
3
11
|
/**
|
|
4
12
|
* Pagination navigation component for large datasets
|
|
5
13
|
*
|
|
6
14
|
* A comprehensive pagination component built on shadcn/ui standards that provides
|
|
7
|
-
* intuitive navigation through pages of content.
|
|
8
|
-
*
|
|
15
|
+
* intuitive navigation through pages of content. All interactive elements use
|
|
16
|
+
* buttonVariants from the Button component for consistent styling and behavior:
|
|
17
|
+
* - PaginationLink uses "outline" variant when active, "ghost" when inactive
|
|
18
|
+
* - PaginationPrevious/PaginationNext use "ghost" variant by default
|
|
19
|
+
* - All components inherit Button's focus management, hover states, and accessibility
|
|
9
20
|
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
21
|
+
* Features responsive design, full accessibility compliance, and flexible composition
|
|
22
|
+
* patterns for different use cases. Ideal for data tables, search results, product
|
|
23
|
+
* listings, and any paginated content that needs professional navigation controls.
|
|
12
24
|
*
|
|
13
25
|
* @example
|
|
14
26
|
* ```tsx
|
|
@@ -16,19 +28,19 @@ import { Button } from "@/components/ui/button";
|
|
|
16
28
|
* <Pagination>
|
|
17
29
|
* <PaginationContent>
|
|
18
30
|
* <PaginationItem>
|
|
19
|
-
* <PaginationPrevious href="/page
|
|
31
|
+
* <PaginationPrevious href="/products?page=1" />
|
|
20
32
|
* </PaginationItem>
|
|
21
33
|
* <PaginationItem>
|
|
22
|
-
* <PaginationLink href="/page
|
|
34
|
+
* <PaginationLink href="/products?page=1">1</PaginationLink>
|
|
23
35
|
* </PaginationItem>
|
|
24
36
|
* <PaginationItem>
|
|
25
|
-
* <PaginationLink href="/page
|
|
37
|
+
* <PaginationLink href="/products?page=2" isActive>2</PaginationLink>
|
|
26
38
|
* </PaginationItem>
|
|
27
39
|
* <PaginationItem>
|
|
28
|
-
* <PaginationLink href="/page
|
|
40
|
+
* <PaginationLink href="/products?page=3">3</PaginationLink>
|
|
29
41
|
* </PaginationItem>
|
|
30
42
|
* <PaginationItem>
|
|
31
|
-
* <PaginationNext href="/page
|
|
43
|
+
* <PaginationNext href="/products?page=3" />
|
|
32
44
|
* </PaginationItem>
|
|
33
45
|
* </PaginationContent>
|
|
34
46
|
* </Pagination>
|
|
@@ -36,29 +48,35 @@ import { Button } from "@/components/ui/button";
|
|
|
36
48
|
*
|
|
37
49
|
* @example
|
|
38
50
|
* ```tsx
|
|
39
|
-
* //
|
|
51
|
+
* // Complete pagination with ellipsis for large datasets
|
|
40
52
|
* <Pagination>
|
|
41
53
|
* <PaginationContent>
|
|
42
54
|
* <PaginationItem>
|
|
43
|
-
* <PaginationPrevious href="/page
|
|
55
|
+
* <PaginationPrevious href="/search?q=react&page=4" />
|
|
44
56
|
* </PaginationItem>
|
|
45
57
|
* <PaginationItem>
|
|
46
|
-
* <PaginationLink href="/page
|
|
58
|
+
* <PaginationLink href="/search?q=react&page=1">1</PaginationLink>
|
|
47
59
|
* </PaginationItem>
|
|
48
60
|
* <PaginationItem>
|
|
49
61
|
* <PaginationEllipsis />
|
|
50
62
|
* </PaginationItem>
|
|
51
63
|
* <PaginationItem>
|
|
52
|
-
* <PaginationLink href="/page
|
|
64
|
+
* <PaginationLink href="/search?q=react&page=4">4</PaginationLink>
|
|
65
|
+
* </PaginationItem>
|
|
66
|
+
* <PaginationItem>
|
|
67
|
+
* <PaginationLink href="/search?q=react&page=5" isActive>5</PaginationLink>
|
|
68
|
+
* </PaginationItem>
|
|
69
|
+
* <PaginationItem>
|
|
70
|
+
* <PaginationLink href="/search?q=react&page=6">6</PaginationLink>
|
|
53
71
|
* </PaginationItem>
|
|
54
72
|
* <PaginationItem>
|
|
55
73
|
* <PaginationEllipsis />
|
|
56
74
|
* </PaginationItem>
|
|
57
75
|
* <PaginationItem>
|
|
58
|
-
* <PaginationLink href="/page
|
|
76
|
+
* <PaginationLink href="/search?q=react&page=50">50</PaginationLink>
|
|
59
77
|
* </PaginationItem>
|
|
60
78
|
* <PaginationItem>
|
|
61
|
-
* <PaginationNext href="/page
|
|
79
|
+
* <PaginationNext href="/search?q=react&page=6" />
|
|
62
80
|
* </PaginationItem>
|
|
63
81
|
* </PaginationContent>
|
|
64
82
|
* </Pagination>
|
|
@@ -66,13 +84,81 @@ import { Button } from "@/components/ui/button";
|
|
|
66
84
|
*
|
|
67
85
|
* @example
|
|
68
86
|
* ```tsx
|
|
69
|
-
* //
|
|
87
|
+
* // Client-side pagination with state management
|
|
88
|
+
* function PaginatedResults() {
|
|
89
|
+
* const [currentPage, setCurrentPage] = useState(1);
|
|
90
|
+
* const totalPages = 25;
|
|
91
|
+
*
|
|
92
|
+
* return (
|
|
93
|
+
* <Pagination>
|
|
94
|
+
* <PaginationContent>
|
|
95
|
+
* <PaginationItem>
|
|
96
|
+
* <PaginationPrevious
|
|
97
|
+
* href="#"
|
|
98
|
+
* onClick={(e) => {
|
|
99
|
+
* e.preventDefault();
|
|
100
|
+
* if (currentPage > 1) setCurrentPage(currentPage - 1);
|
|
101
|
+
* }}
|
|
102
|
+
* className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
|
|
103
|
+
* aria-disabled={currentPage === 1}
|
|
104
|
+
* />
|
|
105
|
+
* </PaginationItem>
|
|
106
|
+
*
|
|
107
|
+
* {[1, 2, 3].map((page) => (
|
|
108
|
+
* <PaginationItem key={page}>
|
|
109
|
+
* <PaginationLink
|
|
110
|
+
* href="#"
|
|
111
|
+
* isActive={currentPage === page}
|
|
112
|
+
* onClick={(e) => {
|
|
113
|
+
* e.preventDefault();
|
|
114
|
+
* setCurrentPage(page);
|
|
115
|
+
* }}
|
|
116
|
+
* >
|
|
117
|
+
* {page}
|
|
118
|
+
* </PaginationLink>
|
|
119
|
+
* </PaginationItem>
|
|
120
|
+
* ))}
|
|
121
|
+
*
|
|
122
|
+
* <PaginationItem>
|
|
123
|
+
* <PaginationNext
|
|
124
|
+
* href="#"
|
|
125
|
+
* onClick={(e) => {
|
|
126
|
+
* e.preventDefault();
|
|
127
|
+
* if (currentPage < totalPages) setCurrentPage(currentPage + 1);
|
|
128
|
+
* }}
|
|
129
|
+
* className={currentPage === totalPages ? "pointer-events-none opacity-50" : ""}
|
|
130
|
+
* aria-disabled={currentPage === totalPages}
|
|
131
|
+
* />
|
|
132
|
+
* </PaginationItem>
|
|
133
|
+
* </PaginationContent>
|
|
134
|
+
* </Pagination>
|
|
135
|
+
* );
|
|
136
|
+
* }
|
|
137
|
+
* ```
|
|
138
|
+
*
|
|
139
|
+
* @example
|
|
140
|
+
* ```tsx
|
|
141
|
+
* // Different sizes for various use cases
|
|
142
|
+
* // Compact pagination for data tables
|
|
143
|
+
* <Pagination>
|
|
144
|
+
* <PaginationContent>
|
|
145
|
+
* <PaginationItem>
|
|
146
|
+
* <PaginationLink href="/data?page=1" size="sm">1</PaginationLink>
|
|
147
|
+
* </PaginationItem>
|
|
148
|
+
* <PaginationItem>
|
|
149
|
+
* <PaginationLink href="/data?page=2" size="sm" isActive>2</PaginationLink>
|
|
150
|
+
* </PaginationItem>
|
|
151
|
+
* </PaginationContent>
|
|
152
|
+
* </Pagination>
|
|
153
|
+
*
|
|
154
|
+
* // Large pagination for primary content
|
|
70
155
|
* <Pagination>
|
|
71
156
|
* <PaginationContent>
|
|
72
157
|
* <PaginationItem>
|
|
73
|
-
* <PaginationLink
|
|
74
|
-
*
|
|
75
|
-
*
|
|
158
|
+
* <PaginationLink href="/articles?page=1" size="lg">1</PaginationLink>
|
|
159
|
+
* </PaginationItem>
|
|
160
|
+
* <PaginationItem>
|
|
161
|
+
* <PaginationLink href="/articles?page=2" size="lg" isActive>2</PaginationLink>
|
|
76
162
|
* </PaginationItem>
|
|
77
163
|
* </PaginationContent>
|
|
78
164
|
* </Pagination>
|
|
@@ -82,11 +168,23 @@ import { Button } from "@/components/ui/button";
|
|
|
82
168
|
* - Semantic nav element with role="navigation" and aria-label="pagination"
|
|
83
169
|
* - aria-current="page" automatically applied to active page links
|
|
84
170
|
* - Descriptive aria-labels on Previous/Next buttons for screen readers
|
|
85
|
-
* - Full keyboard navigation support
|
|
86
|
-
* - High contrast focus indicators
|
|
87
|
-
* - Screen reader friendly ellipsis with "More pages"
|
|
171
|
+
* - Full keyboard navigation support (Tab, Enter, Space keys)
|
|
172
|
+
* - High contrast focus indicators (3px ring) meeting WCAG 2.1 AA standards
|
|
173
|
+
* - Screen reader friendly ellipsis with hidden "More pages" text
|
|
174
|
+
* - Proper disabled states communicated via aria-disabled
|
|
175
|
+
* - Touch-friendly minimum 44px target sizes on all interactive elements
|
|
176
|
+
* - Respects user's reduced motion preferences in transitions
|
|
177
|
+
*
|
|
178
|
+
* @variant outline - Used for active page links (PaginationLink with isActive=true)
|
|
179
|
+
* @variant ghost - Used for inactive page links and navigation buttons (default state)
|
|
180
|
+
*
|
|
181
|
+
* @size icon - Default for PaginationLink (36px × 36px) optimized for page numbers
|
|
182
|
+
* @size default - Used for PaginationPrevious/Next (36px height with more padding)
|
|
183
|
+
* @size sm - Available for compact layouts (32px height)
|
|
184
|
+
* @size lg - Available for prominent pagination (40px height)
|
|
88
185
|
*
|
|
89
186
|
* @see {@link https://ui.shadcn.com/docs/components/pagination} shadcn/ui Pagination
|
|
187
|
+
* @see {@link buttonVariants} CVA configuration for all button styling
|
|
90
188
|
* @see {@link PaginationContent} Container for pagination items
|
|
91
189
|
* @see {@link PaginationLink} Individual page number links
|
|
92
190
|
* @see {@link PaginationPrevious} Previous page navigation button
|
|
@@ -94,7 +192,16 @@ import { Button } from "@/components/ui/button";
|
|
|
94
192
|
* @see {@link PaginationEllipsis} Ellipsis indicator for omitted pages
|
|
95
193
|
* @since 1.0.0
|
|
96
194
|
*/
|
|
97
|
-
declare function Pagination({ className, ...props }:
|
|
195
|
+
declare function Pagination({ className, ...props }: PaginationProps): import("react/jsx-runtime").JSX.Element;
|
|
196
|
+
/**
|
|
197
|
+
* Component prop type using inferred HTML ul element props
|
|
198
|
+
*/
|
|
199
|
+
type PaginationContentProps = {
|
|
200
|
+
/** Additional CSS classes for custom styling */
|
|
201
|
+
className?: string;
|
|
202
|
+
/** Child elements - typically PaginationItem components */
|
|
203
|
+
children?: React.ReactNode;
|
|
204
|
+
} & Omit<React.ComponentProps<"ul">, "className" | "children">;
|
|
98
205
|
/**
|
|
99
206
|
* Container for pagination navigation items
|
|
100
207
|
*
|
|
@@ -119,7 +226,16 @@ declare function Pagination({ className, ...props }: React.ComponentProps<"nav">
|
|
|
119
226
|
* - Flexible gap spacing for touch-friendly interaction
|
|
120
227
|
* - Horizontal scrolling support on narrow viewports
|
|
121
228
|
*/
|
|
122
|
-
declare function PaginationContent({ className, ...props }:
|
|
229
|
+
declare function PaginationContent({ className, ...props }: PaginationContentProps): import("react/jsx-runtime").JSX.Element;
|
|
230
|
+
/**
|
|
231
|
+
* Component prop type using inferred HTML li element props
|
|
232
|
+
*/
|
|
233
|
+
type PaginationItemProps = {
|
|
234
|
+
/** Child elements - typically PaginationLink, PaginationPrevious, PaginationNext, or PaginationEllipsis */
|
|
235
|
+
children?: React.ReactNode;
|
|
236
|
+
/** Additional CSS classes for custom styling */
|
|
237
|
+
className?: string;
|
|
238
|
+
} & Omit<React.ComponentProps<"li">, "children" | "className">;
|
|
123
239
|
/**
|
|
124
240
|
* Individual list item wrapper for pagination controls
|
|
125
241
|
*
|
|
@@ -138,32 +254,68 @@ declare function PaginationContent({ className, ...props }: React.ComponentProps
|
|
|
138
254
|
* </PaginationItem>
|
|
139
255
|
* ```
|
|
140
256
|
*/
|
|
141
|
-
declare function PaginationItem({ ...props }:
|
|
257
|
+
declare function PaginationItem({ ...props }: PaginationItemProps): import("react/jsx-runtime").JSX.Element;
|
|
142
258
|
/**
|
|
143
|
-
*
|
|
259
|
+
* Component prop type using inferred HTML anchor element props
|
|
144
260
|
*/
|
|
145
261
|
type PaginationLinkProps = {
|
|
146
262
|
/**
|
|
147
263
|
* Whether this link represents the currently active page
|
|
148
264
|
*
|
|
149
|
-
* When true, applies active styling and adds aria-current="page"
|
|
150
|
-
* for screen reader accessibility.
|
|
265
|
+
* When true, applies active styling (outline variant) and adds aria-current="page"
|
|
266
|
+
* for screen reader accessibility. Active links use the "outline" button variant
|
|
267
|
+
* while inactive links use the "ghost" variant from buttonVariants.
|
|
151
268
|
*
|
|
152
269
|
* @default false
|
|
153
270
|
*/
|
|
154
271
|
isActive?: boolean;
|
|
155
|
-
|
|
272
|
+
/**
|
|
273
|
+
* Size variant inherited from Button component
|
|
274
|
+
*
|
|
275
|
+
* Controls the dimensions and padding of the pagination link:
|
|
276
|
+
* - "default": Standard height (36px) with balanced padding
|
|
277
|
+
* - "sm": Small height (32px) for compact interfaces
|
|
278
|
+
* - "lg": Large height (40px) for prominent actions
|
|
279
|
+
* - "icon": Square (36px × 36px) optimized for icon-only usage
|
|
280
|
+
*
|
|
281
|
+
* @default "icon"
|
|
282
|
+
*/
|
|
283
|
+
size?: "default" | "sm" | "lg" | "icon";
|
|
284
|
+
/** URL or path to navigate to when the link is clicked */
|
|
285
|
+
href?: string;
|
|
286
|
+
/** Child content - typically page numbers or navigation text */
|
|
287
|
+
children?: React.ReactNode;
|
|
288
|
+
/** Additional CSS classes for custom styling */
|
|
289
|
+
className?: string;
|
|
290
|
+
/** Click handler for custom navigation logic or analytics tracking */
|
|
291
|
+
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
292
|
+
/** ARIA label for screen readers - especially important for icon-only links */
|
|
293
|
+
"aria-label"?: string;
|
|
294
|
+
/** Indicates current page state for screen readers when isActive is true */
|
|
295
|
+
"aria-current"?: "page" | "step" | "location" | "date" | "time" | boolean;
|
|
296
|
+
/** References elements that describe this link */
|
|
297
|
+
"aria-describedby"?: string;
|
|
298
|
+
/** Indicates if the link is disabled (use with appropriate styling) */
|
|
299
|
+
"aria-disabled"?: boolean;
|
|
300
|
+
/** Tab index for focus management @default 0 */
|
|
301
|
+
tabIndex?: number;
|
|
302
|
+
} & Omit<React.ComponentProps<"a">, "size" | "href" | "children" | "className" | "onClick" | "tabIndex">;
|
|
156
303
|
/**
|
|
157
304
|
* Clickable link for individual page numbers
|
|
158
305
|
*
|
|
159
306
|
* Interactive link component that navigates to specific pages within
|
|
160
|
-
* paginated content.
|
|
161
|
-
*
|
|
162
|
-
*
|
|
307
|
+
* paginated content. Uses buttonVariants from the Button component to provide
|
|
308
|
+
* consistent styling - applies "outline" variant when active and "ghost" variant
|
|
309
|
+
* when inactive. Features automatic active state styling and comprehensive
|
|
310
|
+
* accessibility attributes.
|
|
311
|
+
*
|
|
312
|
+
* The component automatically inherits focus management, hover states, and
|
|
313
|
+
* proper spacing from the Button component's CVA configuration while maintaining
|
|
314
|
+
* semantic link behavior for proper navigation and SEO.
|
|
163
315
|
*
|
|
164
316
|
* @example
|
|
165
317
|
* ```tsx
|
|
166
|
-
* // Basic page links
|
|
318
|
+
* // Basic page links with different states
|
|
167
319
|
* <PaginationLink href="/products?page=1">1</PaginationLink>
|
|
168
320
|
* <PaginationLink href="/products?page=2" isActive>2</PaginationLink>
|
|
169
321
|
* <PaginationLink href="/products?page=3">3</PaginationLink>
|
|
@@ -171,10 +323,10 @@ type PaginationLinkProps = {
|
|
|
171
323
|
*
|
|
172
324
|
* @example
|
|
173
325
|
* ```tsx
|
|
174
|
-
* //
|
|
175
|
-
* <PaginationLink
|
|
176
|
-
*
|
|
177
|
-
* </PaginationLink>
|
|
326
|
+
* // Different sizes using Button size variants
|
|
327
|
+
* <PaginationLink href="/page/1" size="sm">1</PaginationLink>
|
|
328
|
+
* <PaginationLink href="/page/2" size="default">2</PaginationLink>
|
|
329
|
+
* <PaginationLink href="/page/3" size="lg">3</PaginationLink>
|
|
178
330
|
* ```
|
|
179
331
|
*
|
|
180
332
|
* @example
|
|
@@ -186,24 +338,70 @@ type PaginationLinkProps = {
|
|
|
186
338
|
* e.preventDefault();
|
|
187
339
|
* onPageChange(1);
|
|
188
340
|
* }}
|
|
341
|
+
* aria-label="Go to page 1"
|
|
189
342
|
* >
|
|
190
343
|
* 1
|
|
191
344
|
* </PaginationLink>
|
|
192
345
|
* ```
|
|
193
346
|
*
|
|
347
|
+
* @example
|
|
348
|
+
* ```tsx
|
|
349
|
+
* // Disabled state for out-of-bounds pages
|
|
350
|
+
* <PaginationLink
|
|
351
|
+
* href="#"
|
|
352
|
+
* className="pointer-events-none opacity-50"
|
|
353
|
+
* aria-disabled="true"
|
|
354
|
+
* tabIndex={-1}
|
|
355
|
+
* >
|
|
356
|
+
* 5
|
|
357
|
+
* </PaginationLink>
|
|
358
|
+
* ```
|
|
359
|
+
*
|
|
194
360
|
* @accessibility
|
|
195
361
|
* - Automatically applies aria-current="page" when isActive is true
|
|
196
|
-
* -
|
|
197
|
-
* -
|
|
198
|
-
* - Touch-friendly minimum
|
|
362
|
+
* - Inherits button-style focus indicators from buttonVariants (3px ring)
|
|
363
|
+
* - High color contrast for active/inactive states meeting WCAG 2.1 AA
|
|
364
|
+
* - Touch-friendly minimum target size from Button component
|
|
365
|
+
* - Full keyboard navigation support (Tab, Enter, Space)
|
|
366
|
+
* - Screen reader friendly with proper link semantics
|
|
367
|
+
* - Supports aria-disabled for unavailable pages
|
|
368
|
+
*
|
|
369
|
+
* @variant outline - Applied when isActive=true, provides clear active state indication
|
|
370
|
+
* @variant ghost - Applied when isActive=false, subtle hover states for navigation
|
|
371
|
+
*
|
|
372
|
+
* @size icon - Default size (36px × 36px) optimized for single digit page numbers
|
|
373
|
+
* @size default - Standard height (36px) with more horizontal padding for longer content
|
|
374
|
+
* @size sm - Compact height (32px) for dense pagination layouts
|
|
375
|
+
* @size lg - Large height (40px) for prominent pagination controls
|
|
199
376
|
*/
|
|
200
377
|
declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
|
|
378
|
+
/**
|
|
379
|
+
* Component prop type using PaginationLink props with size and isActive omitted
|
|
380
|
+
*/
|
|
381
|
+
type PaginationPreviousProps = {
|
|
382
|
+
/** URL to navigate to for the previous page */
|
|
383
|
+
href?: string;
|
|
384
|
+
/** Additional CSS classes for custom styling */
|
|
385
|
+
className?: string;
|
|
386
|
+
/** Click handler for custom navigation logic */
|
|
387
|
+
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
388
|
+
/** Override default aria-label for screen readers @default "Go to previous page" */
|
|
389
|
+
"aria-label"?: string;
|
|
390
|
+
/** Indicates if the button is disabled (use with appropriate styling) */
|
|
391
|
+
"aria-disabled"?: boolean;
|
|
392
|
+
/** Tab index for focus management @default 0 */
|
|
393
|
+
tabIndex?: number;
|
|
394
|
+
} & Omit<React.ComponentProps<typeof PaginationLink>, "href" | "className" | "onClick" | "aria-label" | "tabIndex" | "size" | "isActive">;
|
|
201
395
|
/**
|
|
202
396
|
* Previous page navigation button
|
|
203
397
|
*
|
|
204
|
-
* Navigates to the previous page in the pagination sequence.
|
|
205
|
-
*
|
|
206
|
-
*
|
|
398
|
+
* Navigates to the previous page in the pagination sequence. Built on PaginationLink
|
|
399
|
+
* with fixed "default" size and includes a chevron-left icon for visual direction.
|
|
400
|
+
* Features responsive design that shows only an icon on mobile devices and
|
|
401
|
+
* icon with "Previous" text on larger screens for optimal user experience.
|
|
402
|
+
*
|
|
403
|
+
* Uses buttonVariants with "ghost" variant by default, inheriting all focus management,
|
|
404
|
+
* hover states, and accessibility features from the Button component.
|
|
207
405
|
*
|
|
208
406
|
* @example
|
|
209
407
|
* ```tsx
|
|
@@ -218,6 +416,7 @@ declare function PaginationLink({ className, isActive, size, ...props }: Paginat
|
|
|
218
416
|
* href="#"
|
|
219
417
|
* className="pointer-events-none opacity-50"
|
|
220
418
|
* aria-disabled="true"
|
|
419
|
+
* tabIndex={-1}
|
|
221
420
|
* />
|
|
222
421
|
* ```
|
|
223
422
|
*
|
|
@@ -235,20 +434,52 @@ declare function PaginationLink({ className, isActive, size, ...props }: Paginat
|
|
|
235
434
|
* />
|
|
236
435
|
* ```
|
|
237
436
|
*
|
|
437
|
+
* @example
|
|
438
|
+
* ```tsx
|
|
439
|
+
* // With custom aria-label for internationalization
|
|
440
|
+
* <PaginationPrevious
|
|
441
|
+
* href="/page/4"
|
|
442
|
+
* aria-label="Ir a la página anterior"
|
|
443
|
+
* />
|
|
444
|
+
* ```
|
|
445
|
+
*
|
|
238
446
|
* @accessibility
|
|
239
447
|
* - Built-in aria-label="Go to previous page" for screen readers
|
|
240
|
-
* -
|
|
241
|
-
* - Responsive text
|
|
242
|
-
* -
|
|
243
|
-
* -
|
|
448
|
+
* - ChevronLeftIcon provides visual direction context
|
|
449
|
+
* - Responsive "Previous" text appears on sm screens and larger
|
|
450
|
+
* - Full keyboard navigation support (Tab, Enter, Space)
|
|
451
|
+
* - Inherits button focus indicators (3px ring) from buttonVariants
|
|
452
|
+
* - Should be disabled (aria-disabled="true") on first page to prevent confusion
|
|
453
|
+
* - Maintains semantic link behavior for proper navigation
|
|
244
454
|
*/
|
|
245
|
-
declare function PaginationPrevious({ className, ...props }:
|
|
455
|
+
declare function PaginationPrevious({ className, ...props }: PaginationPreviousProps): import("react/jsx-runtime").JSX.Element;
|
|
456
|
+
/**
|
|
457
|
+
* Component prop type using PaginationLink props with size and isActive omitted
|
|
458
|
+
*/
|
|
459
|
+
type PaginationNextProps = {
|
|
460
|
+
/** URL to navigate to for the next page */
|
|
461
|
+
href?: string;
|
|
462
|
+
/** Additional CSS classes for custom styling */
|
|
463
|
+
className?: string;
|
|
464
|
+
/** Click handler for custom navigation logic */
|
|
465
|
+
onClick?: React.MouseEventHandler<HTMLAnchorElement>;
|
|
466
|
+
/** Override default aria-label for screen readers @default "Go to next page" */
|
|
467
|
+
"aria-label"?: string;
|
|
468
|
+
/** Indicates if the button is disabled (use with appropriate styling) */
|
|
469
|
+
"aria-disabled"?: boolean;
|
|
470
|
+
/** Tab index for focus management @default 0 */
|
|
471
|
+
tabIndex?: number;
|
|
472
|
+
} & Omit<React.ComponentProps<typeof PaginationLink>, "href" | "className" | "onClick" | "aria-label" | "tabIndex" | "size" | "isActive">;
|
|
246
473
|
/**
|
|
247
474
|
* Next page navigation button
|
|
248
475
|
*
|
|
249
|
-
* Navigates to the next page in the pagination sequence.
|
|
250
|
-
*
|
|
251
|
-
*
|
|
476
|
+
* Navigates to the next page in the pagination sequence. Built on PaginationLink
|
|
477
|
+
* with fixed "default" size and includes a chevron-right icon for visual direction.
|
|
478
|
+
* Features responsive design that shows only an icon on mobile devices and
|
|
479
|
+
* "Next" text with icon on larger screens for optimal user experience.
|
|
480
|
+
*
|
|
481
|
+
* Uses buttonVariants with "ghost" variant by default, inheriting all focus management,
|
|
482
|
+
* hover states, and accessibility features from the Button component.
|
|
252
483
|
*
|
|
253
484
|
* @example
|
|
254
485
|
* ```tsx
|
|
@@ -263,6 +494,7 @@ declare function PaginationPrevious({ className, ...props }: React.ComponentProp
|
|
|
263
494
|
* href="#"
|
|
264
495
|
* className="pointer-events-none opacity-50"
|
|
265
496
|
* aria-disabled="true"
|
|
497
|
+
* tabIndex={-1}
|
|
266
498
|
* />
|
|
267
499
|
* ```
|
|
268
500
|
*
|
|
@@ -280,20 +512,45 @@ declare function PaginationPrevious({ className, ...props }: React.ComponentProp
|
|
|
280
512
|
* />
|
|
281
513
|
* ```
|
|
282
514
|
*
|
|
515
|
+
* @example
|
|
516
|
+
* ```tsx
|
|
517
|
+
* // With custom aria-label for internationalization
|
|
518
|
+
* <PaginationNext
|
|
519
|
+
* href="/page/6"
|
|
520
|
+
* aria-label="Ir a la página siguiente"
|
|
521
|
+
* />
|
|
522
|
+
* ```
|
|
523
|
+
*
|
|
283
524
|
* @accessibility
|
|
284
525
|
* - Built-in aria-label="Go to next page" for screen readers
|
|
285
|
-
* -
|
|
286
|
-
* - Responsive text
|
|
287
|
-
* -
|
|
288
|
-
* -
|
|
526
|
+
* - ChevronRightIcon provides visual direction context
|
|
527
|
+
* - Responsive "Next" text appears on sm screens and larger
|
|
528
|
+
* - Full keyboard navigation support (Tab, Enter, Space)
|
|
529
|
+
* - Inherits button focus indicators (3px ring) from buttonVariants
|
|
530
|
+
* - Should be disabled (aria-disabled="true") on last page to prevent confusion
|
|
531
|
+
* - Maintains semantic link behavior for proper navigation
|
|
532
|
+
*/
|
|
533
|
+
declare function PaginationNext({ className, ...props }: PaginationNextProps): import("react/jsx-runtime").JSX.Element;
|
|
534
|
+
/**
|
|
535
|
+
* Component prop type using inferred HTML span element props
|
|
289
536
|
*/
|
|
290
|
-
|
|
537
|
+
type PaginationEllipsisProps = {
|
|
538
|
+
/** Additional CSS classes for custom styling */
|
|
539
|
+
className?: string;
|
|
540
|
+
/** Override default aria-hidden behavior for custom accessibility @default true */
|
|
541
|
+
"aria-hidden"?: boolean;
|
|
542
|
+
} & Omit<React.ComponentProps<"span">, "className" | "aria-hidden">;
|
|
291
543
|
/**
|
|
292
544
|
* Visual indicator for omitted page numbers
|
|
293
545
|
*
|
|
294
|
-
* Displays a horizontal ellipsis (
|
|
295
|
-
* page numbers have been omitted from the pagination display.
|
|
296
|
-
*
|
|
546
|
+
* Displays a horizontal ellipsis (MoreHorizontalIcon from Lucide React) to indicate
|
|
547
|
+
* that page numbers have been omitted from the pagination display. Used to maintain
|
|
548
|
+
* clean UI when dealing with large page ranges without overwhelming users.
|
|
549
|
+
*
|
|
550
|
+
* The component is sized consistently with PaginationLink components (36px × 36px)
|
|
551
|
+
* to maintain visual harmony in the pagination layout. Includes accessible hidden
|
|
552
|
+
* text for screen readers while keeping the visual element hidden from assistive
|
|
553
|
+
* technology to avoid confusion.
|
|
297
554
|
*
|
|
298
555
|
* @example
|
|
299
556
|
* ```tsx
|
|
@@ -312,7 +569,7 @@ declare function PaginationNext({ className, ...props }: React.ComponentProps<ty
|
|
|
312
569
|
* @example
|
|
313
570
|
* ```tsx
|
|
314
571
|
* // Common pagination pattern with ellipsis
|
|
315
|
-
* // 1 ... 23 24 [25] 26 27 ... 100
|
|
572
|
+
* // Layout: 1 ... 23 24 [25] 26 27 ... 100
|
|
316
573
|
* <PaginationContent>
|
|
317
574
|
* <PaginationItem>
|
|
318
575
|
* <PaginationLink href="/page/1">1</PaginationLink>
|
|
@@ -321,9 +578,21 @@ declare function PaginationNext({ className, ...props }: React.ComponentProps<ty
|
|
|
321
578
|
* <PaginationEllipsis />
|
|
322
579
|
* </PaginationItem>
|
|
323
580
|
* <PaginationItem>
|
|
581
|
+
* <PaginationLink href="/page/23">23</PaginationLink>
|
|
582
|
+
* </PaginationItem>
|
|
583
|
+
* <PaginationItem>
|
|
584
|
+
* <PaginationLink href="/page/24">24</PaginationLink>
|
|
585
|
+
* </PaginationItem>
|
|
586
|
+
* <PaginationItem>
|
|
324
587
|
* <PaginationLink href="/page/25" isActive>25</PaginationLink>
|
|
325
588
|
* </PaginationItem>
|
|
326
589
|
* <PaginationItem>
|
|
590
|
+
* <PaginationLink href="/page/26">26</PaginationLink>
|
|
591
|
+
* </PaginationItem>
|
|
592
|
+
* <PaginationItem>
|
|
593
|
+
* <PaginationLink href="/page/27">27</PaginationLink>
|
|
594
|
+
* </PaginationItem>
|
|
595
|
+
* <PaginationItem>
|
|
327
596
|
* <PaginationEllipsis />
|
|
328
597
|
* </PaginationItem>
|
|
329
598
|
* <PaginationItem>
|
|
@@ -332,12 +601,19 @@ declare function PaginationNext({ className, ...props }: React.ComponentProps<ty
|
|
|
332
601
|
* </PaginationContent>
|
|
333
602
|
* ```
|
|
334
603
|
*
|
|
604
|
+
* @example
|
|
605
|
+
* ```tsx
|
|
606
|
+
* // With custom styling for different themes
|
|
607
|
+
* <PaginationEllipsis className="text-muted-foreground/60" />
|
|
608
|
+
* ```
|
|
609
|
+
*
|
|
335
610
|
* @accessibility
|
|
336
|
-
* - Visual
|
|
337
|
-
* - Hidden "More pages" text provides context for assistive technology
|
|
338
|
-
* - Non-interactive, purely decorative indicator
|
|
339
|
-
* - Consistent sizing
|
|
611
|
+
* - Visual MoreHorizontalIcon is aria-hidden from screen readers to avoid clutter
|
|
612
|
+
* - Hidden "More pages" text (sr-only) provides context for assistive technology
|
|
613
|
+
* - Non-interactive, purely decorative indicator that doesn't receive focus
|
|
614
|
+
* - Consistent 36px × 36px sizing matches PaginationLink for visual alignment
|
|
615
|
+
* - Screen readers understand this indicates omitted content without confusion
|
|
340
616
|
*/
|
|
341
|
-
declare function PaginationEllipsis({ className, ...props }:
|
|
617
|
+
declare function PaginationEllipsis({ className, ...props }: PaginationEllipsisProps): import("react/jsx-runtime").JSX.Element;
|
|
342
618
|
export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
|
|
343
619
|
//# sourceMappingURL=pagination.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"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"}
|
|
@@ -83,14 +83,6 @@ import * as PopoverPrimitive from "@radix-ui/react-popover";
|
|
|
83
83
|
* @see {@link https://www.radix-ui.com/primitives/docs/components/popover} Radix Popover Primitive
|
|
84
84
|
* @since 1.0.0
|
|
85
85
|
*/
|
|
86
|
-
/**
|
|
87
|
-
* Root popover component that manages open/closed state
|
|
88
|
-
*
|
|
89
|
-
* @param open - Controls the open state of the popover
|
|
90
|
-
* @param onOpenChange - Event handler called when the open state changes
|
|
91
|
-
* @param defaultOpen - The initial open state for uncontrolled usage
|
|
92
|
-
* @param modal - Whether the popover should be modal (default: false)
|
|
93
|
-
*/
|
|
94
86
|
declare function Popover({ ...props }: React.ComponentProps<typeof PopoverPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
|
|
95
87
|
/**
|
|
96
88
|
* PopoverTrigger - The element that triggers the popover
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../../src/components/ui/popover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AA2H5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkFG;AACH,iBAAS,OAAO,CAAC,EACf,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAEpD;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,iBAAS,cAAc,CAAC,EACtB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAevD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,iBAAS,aAAa,CAAC,EACrB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,MAAM,CAAC,2CAEtD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,CAAC"}
|