@telia/teddy 0.7.0 → 0.7.5
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/accordion/accordion-indicator.cjs +1 -1
- package/dist/components/accordion/accordion-indicator.js +1 -1
- package/dist/components/avatar/avatar-root.cjs +1 -1
- package/dist/components/avatar/avatar-root.d.ts +1 -1
- package/dist/components/avatar/avatar-root.js +1 -1
- package/dist/components/avatar/index.d.ts +1 -1
- package/dist/components/badge/badge.cjs +1 -1
- package/dist/components/badge/badge.js +1 -1
- package/dist/components/breadcrumbs/breadcrumbs-link.cjs +1 -1
- package/dist/components/breadcrumbs/breadcrumbs-link.js +1 -1
- package/dist/components/carousel/carousel-root.cjs +1 -1
- package/dist/components/carousel/carousel-root.js +1 -1
- package/dist/components/channel-button/channel-button-root.d.ts +3 -3
- package/dist/components/channel-button/index.d.ts +3 -3
- package/dist/components/checkbox/checkbox-indicator.cjs +1 -1
- package/dist/components/checkbox/checkbox-indicator.js +1 -1
- package/dist/components/chip/chip-indicator.cjs +1 -1
- package/dist/components/chip/chip-indicator.d.ts +2 -2
- package/dist/components/chip/chip-indicator.js +1 -1
- package/dist/components/chip/index.d.ts +2 -2
- package/dist/components/dashboard-card/dashboard-card-avatar.d.ts +1 -1
- package/dist/components/dashboard-card/dashboard-card-root.cjs +1 -1
- package/dist/components/dashboard-card/dashboard-card-root.js +1 -1
- package/dist/components/date-picker/date-picker-input.cjs +1 -1
- package/dist/components/date-picker/date-picker-input.js +1 -1
- package/dist/components/date-picker/date-picker.cjs +1 -1
- package/dist/components/date-picker/date-picker.js +1 -1
- package/dist/components/drawer/drawer-close.cjs +1 -1
- package/dist/components/drawer/drawer-close.js +1 -1
- package/dist/components/expandable-card/expandable-card-button.d.ts +2 -2
- package/dist/components/expandable-card/expandable-card-indicator.cjs +1 -1
- package/dist/components/expandable-card/expandable-card-indicator.js +1 -1
- package/dist/components/expandable-card/index.d.ts +3 -3
- package/dist/components/field-error-text/field-error-text.cjs +1 -1
- package/dist/components/field-error-text/field-error-text.js +1 -1
- package/dist/components/flip-card/flip-card-trigger.d.ts +2 -2
- package/dist/components/icon/icon.cjs +1 -1
- package/dist/components/icon/icon.js +1 -1
- package/dist/components/icon/index.cjs +1 -1
- package/dist/components/icon/index.js +1 -1
- package/dist/components/icon/utils.d.ts +1 -1
- package/dist/components/index.cjs +3 -1
- package/dist/components/index.d.ts +1 -0
- package/dist/components/index.js +3 -1
- package/dist/components/input/input-clear-button.cjs +1 -1
- package/dist/components/input/input-clear-button.js +1 -1
- package/dist/components/input/input-group.cjs +1 -1
- package/dist/components/input/input-group.js +1 -1
- package/dist/components/input/input-indicator.cjs +1 -1
- package/dist/components/input/input-indicator.js +1 -1
- package/dist/components/modal/modal-close.cjs +2 -1
- package/dist/components/modal/modal-close.js +2 -1
- package/dist/components/modal/modal-title.d.ts +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-desktop.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-desktop.js +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile-simplified.js +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-mobile.js +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-my-pages.js +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-search-field.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-search-field.js +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-search.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-search.js +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-shopping-cart.cjs +1 -1
- package/dist/components/navigation-menu/global-navigation/global-navigation-shopping-cart.js +1 -1
- package/dist/components/navigation-menu/navigation-menu.cjs +2 -1
- package/dist/components/navigation-menu/navigation-menu.js +2 -1
- package/dist/components/notabene/notabene-icon.cjs +1 -1
- package/dist/components/notabene/notabene-icon.d.ts +2 -2
- package/dist/components/notabene/notabene-icon.js +1 -1
- package/dist/components/notification/index.d.ts +2 -2
- package/dist/components/notification/notification-dismiss.cjs +1 -1
- package/dist/components/notification/notification-dismiss.js +1 -1
- package/dist/components/notification/notification-icon.cjs +1 -1
- package/dist/components/notification/notification-icon.d.ts +2 -2
- package/dist/components/notification/notification-icon.js +1 -1
- package/dist/components/notification/notification-root.d.ts +2 -2
- package/dist/components/pagination/index.cjs +27 -0
- package/dist/components/pagination/index.d.ts +114 -0
- package/dist/components/pagination/index.js +27 -0
- package/dist/components/pagination/pagination-button.cjs +116 -0
- package/dist/components/pagination/pagination-button.d.ts +56 -0
- package/dist/components/pagination/pagination-button.js +116 -0
- package/dist/components/pagination/pagination-items-per-page.cjs +66 -0
- package/dist/components/pagination/pagination-items-per-page.d.ts +35 -0
- package/dist/components/pagination/pagination-items-per-page.js +66 -0
- package/dist/components/pagination/pagination-navigation.cjs +51 -0
- package/dist/components/pagination/pagination-navigation.d.ts +25 -0
- package/dist/components/pagination/pagination-navigation.js +51 -0
- package/dist/components/pagination/pagination-page-numbers.cjs +94 -0
- package/dist/components/pagination/pagination-page-numbers.d.ts +26 -0
- package/dist/components/pagination/pagination-page-numbers.js +94 -0
- package/dist/components/pagination/pagination-page-selector.cjs +68 -0
- package/dist/components/pagination/pagination-page-selector.d.ts +22 -0
- package/dist/components/pagination/pagination-page-selector.js +68 -0
- package/dist/components/pagination/pagination-root.cjs +29 -0
- package/dist/components/pagination/pagination-root.d.ts +24 -0
- package/dist/components/pagination/pagination-root.js +29 -0
- package/dist/components/radio-card-group/radio-card-group-content.cjs +2 -1
- package/dist/components/radio-card-group/radio-card-group-content.js +2 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.cjs +2 -1
- package/dist/components/radio-card-group/radio-card-group-item-title.js +2 -1
- package/dist/components/radio-card-group/radio-card-group-item.cjs +2 -1
- package/dist/components/radio-card-group/radio-card-group-item.js +2 -1
- package/dist/components/scroll-area/index.d.ts +2 -2
- package/dist/components/scroll-area/scroll-area-button.cjs +1 -1
- package/dist/components/scroll-area/scroll-area-button.d.ts +2 -2
- package/dist/components/scroll-area/scroll-area-button.js +1 -1
- package/dist/components/scroll-area/scroll-area-thumb.cjs +1 -1
- package/dist/components/scroll-area/scroll-area-thumb.js +1 -1
- package/dist/components/select/select-indicator.cjs +1 -1
- package/dist/components/select/select-indicator.js +1 -1
- package/dist/components/tabs/tabs-scroll-button.d.ts +2 -2
- package/dist/components/text-field/index.d.ts +2 -2
- package/dist/components/text-field/text-field-button.d.ts +2 -2
- package/dist/components/toast/toast-root.cjs +1 -1
- package/dist/components/toast/toast-root.js +1 -1
- package/dist/components/toggle/toggle.cjs +1 -1
- package/dist/components/toggle/toggle.d.ts +2 -2
- package/dist/components/toggle/toggle.js +1 -1
- package/dist/components/toggletip/toggletip-close.cjs +1 -1
- package/dist/components/toggletip/toggletip-close.js +1 -1
- package/dist/components/tooltip/tooltip-trigger.cjs +1 -1
- package/dist/components/tooltip/tooltip-trigger.js +1 -1
- package/dist/main.cjs +3 -1
- package/dist/main.js +3 -1
- package/dist/pagination.module-BZYtfhKG.js +14 -0
- package/dist/pagination.module-cJw-49kO.cjs +13 -0
- package/dist/style.css +750 -691
- package/dist/utils/generate-styling/grid.d.ts +24 -24
- package/dist/utils/generate-styling/index.d.ts +16 -16
- package/dist/utils/generate-styling/util.d.ts +2 -2
- package/package.json +1 -1
- package/dist/assets/{sprite.c7653d19-teddy.svg → sprite.6511e521-teddy.svg} +9 -9
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const components_pagination_paginationButton = require("./pagination-button.cjs");
|
|
5
|
+
const Navigation = ({
|
|
6
|
+
currentPage,
|
|
7
|
+
totalPages,
|
|
8
|
+
onPageChange,
|
|
9
|
+
side = "prev",
|
|
10
|
+
showLabels = false
|
|
11
|
+
}) => {
|
|
12
|
+
if (totalPages < 1) {
|
|
13
|
+
console.warn("Pagination.Navigation: totalPages must be at least 1");
|
|
14
|
+
return null;
|
|
15
|
+
}
|
|
16
|
+
if (currentPage < 1 || currentPage > totalPages) {
|
|
17
|
+
console.warn(`Pagination.Navigation: currentPage (${currentPage}) must be between 1 and ${totalPages}`);
|
|
18
|
+
}
|
|
19
|
+
const validCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
20
|
+
const handlePageChange = (page) => {
|
|
21
|
+
if (page >= 1 && page <= totalPages && page !== validCurrentPage) {
|
|
22
|
+
try {
|
|
23
|
+
onPageChange(page);
|
|
24
|
+
} catch (error) {
|
|
25
|
+
console.error("Pagination.Navigation: Error in onPageChange callback:", error);
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
if (side === "prev") {
|
|
30
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
31
|
+
components_pagination_paginationButton.Button,
|
|
32
|
+
{
|
|
33
|
+
variant: "prev",
|
|
34
|
+
disabled: validCurrentPage === 1,
|
|
35
|
+
onClick: () => handlePageChange(validCurrentPage - 1),
|
|
36
|
+
showLabel: showLabels
|
|
37
|
+
}
|
|
38
|
+
);
|
|
39
|
+
}
|
|
40
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
41
|
+
components_pagination_paginationButton.Button,
|
|
42
|
+
{
|
|
43
|
+
variant: "next",
|
|
44
|
+
disabled: validCurrentPage === totalPages,
|
|
45
|
+
onClick: () => handlePageChange(validCurrentPage + 1),
|
|
46
|
+
showLabel: showLabels
|
|
47
|
+
}
|
|
48
|
+
);
|
|
49
|
+
};
|
|
50
|
+
Navigation.displayName = "Pagination.Navigation";
|
|
51
|
+
exports.Navigation = Navigation;
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export type NavigationProps = {
|
|
4
|
+
/**
|
|
5
|
+
* Current active page number (1-indexed)
|
|
6
|
+
*/
|
|
7
|
+
currentPage: number;
|
|
8
|
+
/**
|
|
9
|
+
* Total number of pages
|
|
10
|
+
*/
|
|
11
|
+
totalPages: number;
|
|
12
|
+
/**
|
|
13
|
+
* Callback function when page changes
|
|
14
|
+
*/
|
|
15
|
+
onPageChange: (page: number) => void;
|
|
16
|
+
/**
|
|
17
|
+
* Which side of navigation to show
|
|
18
|
+
*/
|
|
19
|
+
side?: 'prev' | 'next';
|
|
20
|
+
/**
|
|
21
|
+
* Show text labels with icons for prev/next buttons
|
|
22
|
+
*/
|
|
23
|
+
showLabels?: boolean;
|
|
24
|
+
};
|
|
25
|
+
export declare const Navigation: React.FC<NavigationProps>;
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import { Button } from "./pagination-button.js";
|
|
3
|
+
const Navigation = ({
|
|
4
|
+
currentPage,
|
|
5
|
+
totalPages,
|
|
6
|
+
onPageChange,
|
|
7
|
+
side = "prev",
|
|
8
|
+
showLabels = false
|
|
9
|
+
}) => {
|
|
10
|
+
if (totalPages < 1) {
|
|
11
|
+
console.warn("Pagination.Navigation: totalPages must be at least 1");
|
|
12
|
+
return null;
|
|
13
|
+
}
|
|
14
|
+
if (currentPage < 1 || currentPage > totalPages) {
|
|
15
|
+
console.warn(`Pagination.Navigation: currentPage (${currentPage}) must be between 1 and ${totalPages}`);
|
|
16
|
+
}
|
|
17
|
+
const validCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
18
|
+
const handlePageChange = (page) => {
|
|
19
|
+
if (page >= 1 && page <= totalPages && page !== validCurrentPage) {
|
|
20
|
+
try {
|
|
21
|
+
onPageChange(page);
|
|
22
|
+
} catch (error) {
|
|
23
|
+
console.error("Pagination.Navigation: Error in onPageChange callback:", error);
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
};
|
|
27
|
+
if (side === "prev") {
|
|
28
|
+
return /* @__PURE__ */ jsx(
|
|
29
|
+
Button,
|
|
30
|
+
{
|
|
31
|
+
variant: "prev",
|
|
32
|
+
disabled: validCurrentPage === 1,
|
|
33
|
+
onClick: () => handlePageChange(validCurrentPage - 1),
|
|
34
|
+
showLabel: showLabels
|
|
35
|
+
}
|
|
36
|
+
);
|
|
37
|
+
}
|
|
38
|
+
return /* @__PURE__ */ jsx(
|
|
39
|
+
Button,
|
|
40
|
+
{
|
|
41
|
+
variant: "next",
|
|
42
|
+
disabled: validCurrentPage === totalPages,
|
|
43
|
+
onClick: () => handlePageChange(validCurrentPage + 1),
|
|
44
|
+
showLabel: showLabels
|
|
45
|
+
}
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
Navigation.displayName = "Pagination.Navigation";
|
|
49
|
+
export {
|
|
50
|
+
Navigation
|
|
51
|
+
};
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const clsx = require("clsx");
|
|
5
|
+
const components_pagination_paginationButton = require("./pagination-button.cjs");
|
|
6
|
+
const pagination_module = require("../../pagination.module-cJw-49kO.cjs");
|
|
7
|
+
const pageNumbersClassName = "teddy-pagination-page-numbers";
|
|
8
|
+
const MIN_VISIBLE_PAGES = 3;
|
|
9
|
+
const DEFAULT_MAX_VISIBLE_PAGES = 5;
|
|
10
|
+
const getVisiblePages = (currentPage, totalPages, maxVisible) => {
|
|
11
|
+
if (totalPages <= 0 || maxVisible <= 0) return [];
|
|
12
|
+
if (currentPage < 1 || currentPage > totalPages) return [];
|
|
13
|
+
if (totalPages <= maxVisible) {
|
|
14
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
15
|
+
}
|
|
16
|
+
const half = Math.floor(maxVisible / 2);
|
|
17
|
+
let start = Math.max(currentPage - half, 1);
|
|
18
|
+
const end = Math.min(start + maxVisible - 1, totalPages);
|
|
19
|
+
if (end - start + 1 < maxVisible) {
|
|
20
|
+
start = Math.max(end - maxVisible + 1, 1);
|
|
21
|
+
}
|
|
22
|
+
const pages = [];
|
|
23
|
+
if (start > 1) {
|
|
24
|
+
pages.push(1);
|
|
25
|
+
if (start > 2) {
|
|
26
|
+
pages.push("ellipsis-start");
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
for (let i = start; i <= end; i++) {
|
|
30
|
+
pages.push(i);
|
|
31
|
+
}
|
|
32
|
+
if (end < totalPages) {
|
|
33
|
+
if (end < totalPages - 1) {
|
|
34
|
+
pages.push("ellipsis-end");
|
|
35
|
+
}
|
|
36
|
+
pages.push(totalPages);
|
|
37
|
+
}
|
|
38
|
+
return pages;
|
|
39
|
+
};
|
|
40
|
+
const PageNumbers = ({
|
|
41
|
+
currentPage,
|
|
42
|
+
totalPages,
|
|
43
|
+
onPageChange,
|
|
44
|
+
maxVisiblePages = DEFAULT_MAX_VISIBLE_PAGES,
|
|
45
|
+
className
|
|
46
|
+
}) => {
|
|
47
|
+
if (totalPages < 1) {
|
|
48
|
+
console.warn("Pagination.PageNumbers: totalPages must be at least 1");
|
|
49
|
+
return null;
|
|
50
|
+
}
|
|
51
|
+
if (currentPage < 1 || currentPage > totalPages) {
|
|
52
|
+
console.warn(`Pagination.PageNumbers: currentPage (${currentPage}) must be between 1 and ${totalPages}`);
|
|
53
|
+
}
|
|
54
|
+
if (maxVisiblePages < MIN_VISIBLE_PAGES) {
|
|
55
|
+
console.warn(`Pagination.PageNumbers: maxVisiblePages should be at least ${MIN_VISIBLE_PAGES} for proper ellipsis display`);
|
|
56
|
+
}
|
|
57
|
+
const validCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
58
|
+
const classes = clsx(pagination_module.styles[pageNumbersClassName], className);
|
|
59
|
+
const handlePageChange = (page) => {
|
|
60
|
+
if (page >= 1 && page <= totalPages && page !== validCurrentPage) {
|
|
61
|
+
try {
|
|
62
|
+
onPageChange(page);
|
|
63
|
+
} catch (error) {
|
|
64
|
+
console.error("Pagination.PageNumbers: Error in onPageChange callback:", error);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
};
|
|
68
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes, children: getVisiblePages(validCurrentPage, totalPages, Math.max(MIN_VISIBLE_PAGES, maxVisiblePages)).map((page) => {
|
|
69
|
+
if (typeof page === "string") {
|
|
70
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
71
|
+
components_pagination_paginationButton.Button,
|
|
72
|
+
{
|
|
73
|
+
variant: "ellipsis",
|
|
74
|
+
children: "…"
|
|
75
|
+
},
|
|
76
|
+
page
|
|
77
|
+
);
|
|
78
|
+
}
|
|
79
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
80
|
+
components_pagination_paginationButton.Button,
|
|
81
|
+
{
|
|
82
|
+
variant: "page",
|
|
83
|
+
pageNumber: page,
|
|
84
|
+
isActive: page === validCurrentPage,
|
|
85
|
+
onClick: () => handlePageChange(page),
|
|
86
|
+
children: page
|
|
87
|
+
},
|
|
88
|
+
page
|
|
89
|
+
);
|
|
90
|
+
}) });
|
|
91
|
+
};
|
|
92
|
+
PageNumbers.displayName = "Pagination.PageNumbers";
|
|
93
|
+
exports.PageNumbers = PageNumbers;
|
|
94
|
+
exports.pageNumbersClassName = pageNumbersClassName;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export declare const pageNumbersClassName = "teddy-pagination-page-numbers";
|
|
4
|
+
export type PageNumbersProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Current active page number (1-indexed)
|
|
7
|
+
*/
|
|
8
|
+
currentPage: number;
|
|
9
|
+
/**
|
|
10
|
+
* Total number of pages
|
|
11
|
+
*/
|
|
12
|
+
totalPages: number;
|
|
13
|
+
/**
|
|
14
|
+
* Callback function when page changes
|
|
15
|
+
*/
|
|
16
|
+
onPageChange: (page: number) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Maximum number of visible page buttons
|
|
19
|
+
*/
|
|
20
|
+
maxVisiblePages?: number;
|
|
21
|
+
/**
|
|
22
|
+
* Additional CSS class name
|
|
23
|
+
*/
|
|
24
|
+
className?: string;
|
|
25
|
+
};
|
|
26
|
+
export declare const PageNumbers: React.FC<PageNumbersProps>;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { Button } from "./pagination-button.js";
|
|
4
|
+
import { s as styles } from "../../pagination.module-BZYtfhKG.js";
|
|
5
|
+
const pageNumbersClassName = "teddy-pagination-page-numbers";
|
|
6
|
+
const MIN_VISIBLE_PAGES = 3;
|
|
7
|
+
const DEFAULT_MAX_VISIBLE_PAGES = 5;
|
|
8
|
+
const getVisiblePages = (currentPage, totalPages, maxVisible) => {
|
|
9
|
+
if (totalPages <= 0 || maxVisible <= 0) return [];
|
|
10
|
+
if (currentPage < 1 || currentPage > totalPages) return [];
|
|
11
|
+
if (totalPages <= maxVisible) {
|
|
12
|
+
return Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
13
|
+
}
|
|
14
|
+
const half = Math.floor(maxVisible / 2);
|
|
15
|
+
let start = Math.max(currentPage - half, 1);
|
|
16
|
+
const end = Math.min(start + maxVisible - 1, totalPages);
|
|
17
|
+
if (end - start + 1 < maxVisible) {
|
|
18
|
+
start = Math.max(end - maxVisible + 1, 1);
|
|
19
|
+
}
|
|
20
|
+
const pages = [];
|
|
21
|
+
if (start > 1) {
|
|
22
|
+
pages.push(1);
|
|
23
|
+
if (start > 2) {
|
|
24
|
+
pages.push("ellipsis-start");
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
for (let i = start; i <= end; i++) {
|
|
28
|
+
pages.push(i);
|
|
29
|
+
}
|
|
30
|
+
if (end < totalPages) {
|
|
31
|
+
if (end < totalPages - 1) {
|
|
32
|
+
pages.push("ellipsis-end");
|
|
33
|
+
}
|
|
34
|
+
pages.push(totalPages);
|
|
35
|
+
}
|
|
36
|
+
return pages;
|
|
37
|
+
};
|
|
38
|
+
const PageNumbers = ({
|
|
39
|
+
currentPage,
|
|
40
|
+
totalPages,
|
|
41
|
+
onPageChange,
|
|
42
|
+
maxVisiblePages = DEFAULT_MAX_VISIBLE_PAGES,
|
|
43
|
+
className
|
|
44
|
+
}) => {
|
|
45
|
+
if (totalPages < 1) {
|
|
46
|
+
console.warn("Pagination.PageNumbers: totalPages must be at least 1");
|
|
47
|
+
return null;
|
|
48
|
+
}
|
|
49
|
+
if (currentPage < 1 || currentPage > totalPages) {
|
|
50
|
+
console.warn(`Pagination.PageNumbers: currentPage (${currentPage}) must be between 1 and ${totalPages}`);
|
|
51
|
+
}
|
|
52
|
+
if (maxVisiblePages < MIN_VISIBLE_PAGES) {
|
|
53
|
+
console.warn(`Pagination.PageNumbers: maxVisiblePages should be at least ${MIN_VISIBLE_PAGES} for proper ellipsis display`);
|
|
54
|
+
}
|
|
55
|
+
const validCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
56
|
+
const classes = clsx(styles[pageNumbersClassName], className);
|
|
57
|
+
const handlePageChange = (page) => {
|
|
58
|
+
if (page >= 1 && page <= totalPages && page !== validCurrentPage) {
|
|
59
|
+
try {
|
|
60
|
+
onPageChange(page);
|
|
61
|
+
} catch (error) {
|
|
62
|
+
console.error("Pagination.PageNumbers: Error in onPageChange callback:", error);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
};
|
|
66
|
+
return /* @__PURE__ */ jsx("div", { className: classes, children: getVisiblePages(validCurrentPage, totalPages, Math.max(MIN_VISIBLE_PAGES, maxVisiblePages)).map((page) => {
|
|
67
|
+
if (typeof page === "string") {
|
|
68
|
+
return /* @__PURE__ */ jsx(
|
|
69
|
+
Button,
|
|
70
|
+
{
|
|
71
|
+
variant: "ellipsis",
|
|
72
|
+
children: "…"
|
|
73
|
+
},
|
|
74
|
+
page
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
return /* @__PURE__ */ jsx(
|
|
78
|
+
Button,
|
|
79
|
+
{
|
|
80
|
+
variant: "page",
|
|
81
|
+
pageNumber: page,
|
|
82
|
+
isActive: page === validCurrentPage,
|
|
83
|
+
onClick: () => handlePageChange(page),
|
|
84
|
+
children: page
|
|
85
|
+
},
|
|
86
|
+
page
|
|
87
|
+
);
|
|
88
|
+
}) });
|
|
89
|
+
};
|
|
90
|
+
PageNumbers.displayName = "Pagination.PageNumbers";
|
|
91
|
+
export {
|
|
92
|
+
PageNumbers,
|
|
93
|
+
pageNumbersClassName
|
|
94
|
+
};
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const clsx = require("clsx");
|
|
5
|
+
const components_select_index = require("../select/index.cjs");
|
|
6
|
+
const components_text_text = require("../text/text.cjs");
|
|
7
|
+
const pagination_module = require("../../pagination.module-cJw-49kO.cjs");
|
|
8
|
+
const pageSelectorClassName = "teddy-pagination-page-selector";
|
|
9
|
+
const PageSelector = ({
|
|
10
|
+
currentPage,
|
|
11
|
+
totalPages,
|
|
12
|
+
onPageChange,
|
|
13
|
+
className
|
|
14
|
+
}) => {
|
|
15
|
+
if (totalPages < 1) {
|
|
16
|
+
console.warn("PageSelector: totalPages must be at least 1");
|
|
17
|
+
return null;
|
|
18
|
+
}
|
|
19
|
+
if (currentPage < 1 || currentPage > totalPages) {
|
|
20
|
+
console.warn(`PageSelector: currentPage (${currentPage}) must be between 1 and ${totalPages}`);
|
|
21
|
+
}
|
|
22
|
+
const classes = clsx(pagination_module.styles[pageSelectorClassName], className);
|
|
23
|
+
const validCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
24
|
+
const handleValueChange = (value) => {
|
|
25
|
+
const pageNumber = parseInt(value, 10);
|
|
26
|
+
if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages && pageNumber !== validCurrentPage) {
|
|
27
|
+
try {
|
|
28
|
+
onPageChange(pageNumber);
|
|
29
|
+
} catch (error) {
|
|
30
|
+
console.error("PageSelector: Error in onPageChange callback:", error);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
return value;
|
|
34
|
+
};
|
|
35
|
+
const pageOptions = Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
36
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes, role: "group", "aria-label": "Page selection", children: [
|
|
37
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
38
|
+
components_select_index.Select,
|
|
39
|
+
{
|
|
40
|
+
name: "page-selector",
|
|
41
|
+
options: pageOptions.map((p) => p.toString()),
|
|
42
|
+
onValueChange: handleValueChange,
|
|
43
|
+
value: validCurrentPage.toString(),
|
|
44
|
+
className: `${pagination_module.styles[`${pageSelectorClassName}__select`]}`,
|
|
45
|
+
"aria-label": `Current page ${validCurrentPage} of ${totalPages}`,
|
|
46
|
+
children: [
|
|
47
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_select_index.Select.Trigger, { children: /* @__PURE__ */ jsxRuntime.jsx(components_select_index.Select.Value, {}) }),
|
|
48
|
+
/* @__PURE__ */ jsxRuntime.jsx(components_select_index.Select.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(components_select_index.Select.Content, { children: /* @__PURE__ */ jsxRuntime.jsx(components_select_index.Select.Viewport, { children: pageOptions.map((page) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
49
|
+
components_select_index.Select.Item,
|
|
50
|
+
{
|
|
51
|
+
value: page.toString(),
|
|
52
|
+
"aria-label": `Go to page ${page}`,
|
|
53
|
+
children: page
|
|
54
|
+
},
|
|
55
|
+
page
|
|
56
|
+
)) }) }) })
|
|
57
|
+
]
|
|
58
|
+
}
|
|
59
|
+
),
|
|
60
|
+
/* @__PURE__ */ jsxRuntime.jsxs(components_text_text.Text, { "aria-hidden": "true", children: [
|
|
61
|
+
"av ",
|
|
62
|
+
totalPages
|
|
63
|
+
] })
|
|
64
|
+
] });
|
|
65
|
+
};
|
|
66
|
+
PageSelector.displayName = "Pagination.PageSelector";
|
|
67
|
+
exports.PageSelector = PageSelector;
|
|
68
|
+
exports.pageSelectorClassName = pageSelectorClassName;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export declare const pageSelectorClassName = "teddy-pagination-page-selector";
|
|
4
|
+
export type PageSelectorProps = {
|
|
5
|
+
/**
|
|
6
|
+
* Current active page number (1-indexed)
|
|
7
|
+
*/
|
|
8
|
+
currentPage: number;
|
|
9
|
+
/**
|
|
10
|
+
* Total number of pages
|
|
11
|
+
*/
|
|
12
|
+
totalPages: number;
|
|
13
|
+
/**
|
|
14
|
+
* Callback function when page changes
|
|
15
|
+
*/
|
|
16
|
+
onPageChange: (page: number) => void;
|
|
17
|
+
/**
|
|
18
|
+
* Additional CSS class name
|
|
19
|
+
*/
|
|
20
|
+
className?: string;
|
|
21
|
+
};
|
|
22
|
+
export declare const PageSelector: React.FC<PageSelectorProps>;
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import { Select } from "../select/index.js";
|
|
4
|
+
import { Text } from "../text/text.js";
|
|
5
|
+
import { s as styles } from "../../pagination.module-BZYtfhKG.js";
|
|
6
|
+
const pageSelectorClassName = "teddy-pagination-page-selector";
|
|
7
|
+
const PageSelector = ({
|
|
8
|
+
currentPage,
|
|
9
|
+
totalPages,
|
|
10
|
+
onPageChange,
|
|
11
|
+
className
|
|
12
|
+
}) => {
|
|
13
|
+
if (totalPages < 1) {
|
|
14
|
+
console.warn("PageSelector: totalPages must be at least 1");
|
|
15
|
+
return null;
|
|
16
|
+
}
|
|
17
|
+
if (currentPage < 1 || currentPage > totalPages) {
|
|
18
|
+
console.warn(`PageSelector: currentPage (${currentPage}) must be between 1 and ${totalPages}`);
|
|
19
|
+
}
|
|
20
|
+
const classes = clsx(styles[pageSelectorClassName], className);
|
|
21
|
+
const validCurrentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
22
|
+
const handleValueChange = (value) => {
|
|
23
|
+
const pageNumber = parseInt(value, 10);
|
|
24
|
+
if (!isNaN(pageNumber) && pageNumber >= 1 && pageNumber <= totalPages && pageNumber !== validCurrentPage) {
|
|
25
|
+
try {
|
|
26
|
+
onPageChange(pageNumber);
|
|
27
|
+
} catch (error) {
|
|
28
|
+
console.error("PageSelector: Error in onPageChange callback:", error);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
return value;
|
|
32
|
+
};
|
|
33
|
+
const pageOptions = Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
34
|
+
return /* @__PURE__ */ jsxs("div", { className: classes, role: "group", "aria-label": "Page selection", children: [
|
|
35
|
+
/* @__PURE__ */ jsxs(
|
|
36
|
+
Select,
|
|
37
|
+
{
|
|
38
|
+
name: "page-selector",
|
|
39
|
+
options: pageOptions.map((p) => p.toString()),
|
|
40
|
+
onValueChange: handleValueChange,
|
|
41
|
+
value: validCurrentPage.toString(),
|
|
42
|
+
className: `${styles[`${pageSelectorClassName}__select`]}`,
|
|
43
|
+
"aria-label": `Current page ${validCurrentPage} of ${totalPages}`,
|
|
44
|
+
children: [
|
|
45
|
+
/* @__PURE__ */ jsx(Select.Trigger, { children: /* @__PURE__ */ jsx(Select.Value, {}) }),
|
|
46
|
+
/* @__PURE__ */ jsx(Select.Portal, { children: /* @__PURE__ */ jsx(Select.Content, { children: /* @__PURE__ */ jsx(Select.Viewport, { children: pageOptions.map((page) => /* @__PURE__ */ jsx(
|
|
47
|
+
Select.Item,
|
|
48
|
+
{
|
|
49
|
+
value: page.toString(),
|
|
50
|
+
"aria-label": `Go to page ${page}`,
|
|
51
|
+
children: page
|
|
52
|
+
},
|
|
53
|
+
page
|
|
54
|
+
)) }) }) })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ jsxs(Text, { "aria-hidden": "true", children: [
|
|
59
|
+
"av ",
|
|
60
|
+
totalPages
|
|
61
|
+
] })
|
|
62
|
+
] });
|
|
63
|
+
};
|
|
64
|
+
PageSelector.displayName = "Pagination.PageSelector";
|
|
65
|
+
export {
|
|
66
|
+
PageSelector,
|
|
67
|
+
pageSelectorClassName
|
|
68
|
+
};
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
+
const React = require("react");
|
|
5
|
+
const clsx = require("clsx");
|
|
6
|
+
const pagination_module = require("../../pagination.module-cJw-49kO.cjs");
|
|
7
|
+
const rootClassName = "teddy-pagination";
|
|
8
|
+
const Root = React.forwardRef(
|
|
9
|
+
({
|
|
10
|
+
className,
|
|
11
|
+
"aria-label": ariaLabel = "Pagination navigation",
|
|
12
|
+
...props
|
|
13
|
+
}, forwardRef) => {
|
|
14
|
+
const classes = clsx([pagination_module.styles[`${rootClassName}`]], className);
|
|
15
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
16
|
+
"nav",
|
|
17
|
+
{
|
|
18
|
+
...props,
|
|
19
|
+
ref: forwardRef,
|
|
20
|
+
className: classes,
|
|
21
|
+
"aria-label": ariaLabel,
|
|
22
|
+
role: "navigation"
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
}
|
|
26
|
+
);
|
|
27
|
+
Root.displayName = "Pagination";
|
|
28
|
+
exports.Root = Root;
|
|
29
|
+
exports.rootClassName = rootClassName;
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import { default as React } from 'react';
|
|
2
|
+
|
|
3
|
+
export declare const rootClassName = "teddy-pagination";
|
|
4
|
+
/**
|
|
5
|
+
* Props for the Pagination Root component
|
|
6
|
+
*/
|
|
7
|
+
export type RootProps = React.ComponentPropsWithoutRef<'nav'> & {
|
|
8
|
+
/**
|
|
9
|
+
* Accessible label for the pagination navigation
|
|
10
|
+
* @default 'Pagination navigation'
|
|
11
|
+
*/
|
|
12
|
+
'aria-label'?: string;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* Root container component for pagination navigation.
|
|
16
|
+
* Provides the semantic nav element and base styling for pagination components.
|
|
17
|
+
*/
|
|
18
|
+
export declare const Root: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & {
|
|
19
|
+
/**
|
|
20
|
+
* Accessible label for the pagination navigation
|
|
21
|
+
* @default 'Pagination navigation'
|
|
22
|
+
*/
|
|
23
|
+
'aria-label'?: string | undefined;
|
|
24
|
+
} & React.RefAttributes<HTMLElement>>;
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import { jsx } from "react/jsx-runtime";
|
|
2
|
+
import React__default from "react";
|
|
3
|
+
import clsx from "clsx";
|
|
4
|
+
import { s as styles } from "../../pagination.module-BZYtfhKG.js";
|
|
5
|
+
const rootClassName = "teddy-pagination";
|
|
6
|
+
const Root = React__default.forwardRef(
|
|
7
|
+
({
|
|
8
|
+
className,
|
|
9
|
+
"aria-label": ariaLabel = "Pagination navigation",
|
|
10
|
+
...props
|
|
11
|
+
}, forwardRef) => {
|
|
12
|
+
const classes = clsx([styles[`${rootClassName}`]], className);
|
|
13
|
+
return /* @__PURE__ */ jsx(
|
|
14
|
+
"nav",
|
|
15
|
+
{
|
|
16
|
+
...props,
|
|
17
|
+
ref: forwardRef,
|
|
18
|
+
className: classes,
|
|
19
|
+
"aria-label": ariaLabel,
|
|
20
|
+
role: "navigation"
|
|
21
|
+
}
|
|
22
|
+
);
|
|
23
|
+
}
|
|
24
|
+
);
|
|
25
|
+
Root.displayName = "Pagination";
|
|
26
|
+
export {
|
|
27
|
+
Root,
|
|
28
|
+
rootClassName
|
|
29
|
+
};
|
|
@@ -4,6 +4,7 @@ require("react/jsx-runtime");
|
|
|
4
4
|
require("clsx");
|
|
5
5
|
require("react");
|
|
6
6
|
require("./radio-card-group-root.cjs");
|
|
7
|
+
require("../pagination/index.cjs");
|
|
7
8
|
require("../select/index.cjs");
|
|
8
9
|
require("../avatar/index.cjs");
|
|
9
10
|
require("../dashboard-card/index.cjs");
|
|
@@ -31,7 +32,7 @@ require("../tabs/index.cjs");
|
|
|
31
32
|
require("../drawer/index.cjs");
|
|
32
33
|
require("../image/image.cjs");
|
|
33
34
|
require("../chip/index.cjs");
|
|
34
|
-
require("../../assets/sprite.
|
|
35
|
+
require("../../assets/sprite.6511e521-teddy.svg");
|
|
35
36
|
require("../notification/index.cjs");
|
|
36
37
|
require("../radio-group/index.cjs");
|
|
37
38
|
require("../box/box.cjs");
|
|
@@ -2,6 +2,7 @@ import "react/jsx-runtime";
|
|
|
2
2
|
import "clsx";
|
|
3
3
|
import "react";
|
|
4
4
|
import "./radio-card-group-root.js";
|
|
5
|
+
import "../pagination/index.js";
|
|
5
6
|
import "../select/index.js";
|
|
6
7
|
import "../avatar/index.js";
|
|
7
8
|
import "../dashboard-card/index.js";
|
|
@@ -29,7 +30,7 @@ import "../tabs/index.js";
|
|
|
29
30
|
import "../drawer/index.js";
|
|
30
31
|
import "../image/image.js";
|
|
31
32
|
import "../chip/index.js";
|
|
32
|
-
import "../../assets/sprite.
|
|
33
|
+
import "../../assets/sprite.6511e521-teddy.svg";
|
|
33
34
|
import "../notification/index.js";
|
|
34
35
|
import "../radio-group/index.js";
|
|
35
36
|
import "../box/box.js";
|
|
@@ -12,6 +12,7 @@ const reactSlot = require("@radix-ui/react-slot");
|
|
|
12
12
|
const reactUseControllableState = require("@radix-ui/react-use-controllable-state");
|
|
13
13
|
const utils_generateStyling_index = require("../../utils/generate-styling/index.cjs");
|
|
14
14
|
const tokens_motion_variables = require("../../tokens/motion/variables.cjs");
|
|
15
|
+
require("../pagination/index.cjs");
|
|
15
16
|
require("../select/index.cjs");
|
|
16
17
|
require("../avatar/index.cjs");
|
|
17
18
|
require("../dashboard-card/index.cjs");
|
|
@@ -40,7 +41,7 @@ const components_tabs_index = require("../tabs/index.cjs");
|
|
|
40
41
|
const components_drawer_index = require("../drawer/index.cjs");
|
|
41
42
|
require("../image/image.cjs");
|
|
42
43
|
require("../chip/index.cjs");
|
|
43
|
-
require("../../assets/sprite.
|
|
44
|
+
require("../../assets/sprite.6511e521-teddy.svg");
|
|
44
45
|
const components_modal_modalRoot = require("../modal/modal-root.cjs");
|
|
45
46
|
const components_modal_modalTrigger = require("../modal/modal-trigger.cjs");
|
|
46
47
|
const components_modal_modalContent = require("../modal/modal-content.cjs");
|
|
@@ -10,6 +10,7 @@ import { Slot } from "@radix-ui/react-slot";
|
|
|
10
10
|
import { useControllableState } from "@radix-ui/react-use-controllable-state";
|
|
11
11
|
import { mergeStyles } from "../../utils/generate-styling/index.js";
|
|
12
12
|
import { teddyMotionDuration300 } from "../../tokens/motion/variables.js";
|
|
13
|
+
import "../pagination/index.js";
|
|
13
14
|
import "../select/index.js";
|
|
14
15
|
import "../avatar/index.js";
|
|
15
16
|
import "../dashboard-card/index.js";
|
|
@@ -38,7 +39,7 @@ import { Tabs } from "../tabs/index.js";
|
|
|
38
39
|
import { Drawer } from "../drawer/index.js";
|
|
39
40
|
import "../image/image.js";
|
|
40
41
|
import "../chip/index.js";
|
|
41
|
-
import "../../assets/sprite.
|
|
42
|
+
import "../../assets/sprite.6511e521-teddy.svg";
|
|
42
43
|
import { rootClassName as rootClassName$3, RootContext as RootContext$1, Root as Root$3 } from "../modal/modal-root.js";
|
|
43
44
|
import { Trigger as Trigger$1 } from "../modal/modal-trigger.js";
|
|
44
45
|
import { Content as Content$2 } from "../modal/modal-content.js";
|
|
@@ -5,6 +5,7 @@ require("clsx");
|
|
|
5
5
|
require("react");
|
|
6
6
|
require("./radio-card-group-root.cjs");
|
|
7
7
|
require("@radix-ui/react-radio-group");
|
|
8
|
+
require("../pagination/index.cjs");
|
|
8
9
|
require("../select/index.cjs");
|
|
9
10
|
require("../avatar/index.cjs");
|
|
10
11
|
require("../dashboard-card/index.cjs");
|
|
@@ -32,7 +33,7 @@ require("../tabs/index.cjs");
|
|
|
32
33
|
require("../drawer/index.cjs");
|
|
33
34
|
require("../image/image.cjs");
|
|
34
35
|
require("../chip/index.cjs");
|
|
35
|
-
require("../../assets/sprite.
|
|
36
|
+
require("../../assets/sprite.6511e521-teddy.svg");
|
|
36
37
|
require("../notification/index.cjs");
|
|
37
38
|
require("../radio-group/index.cjs");
|
|
38
39
|
require("../box/box.cjs");
|