@digital-b2c/coreui-kit 0.13.0 → 0.13.1
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/LICENSE.txt +21 -21
- package/README.md +52 -52
- package/dist/index.cjs +45 -9
- package/dist/index.cjs.map +1 -1
- package/dist/index.css +20 -0
- package/dist/index.css.map +1 -1
- package/dist/index.d.cts +5 -1
- package/dist/index.d.ts +5 -1
- package/dist/index.mjs +45 -9
- package/dist/index.mjs.map +1 -1
- package/dist/types/global.d.ts +25 -25
- package/package.json +100 -100
package/LICENSE.txt
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2026 Luxottica
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2026 Luxottica
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,52 +1,52 @@
|
|
|
1
|
-
# CoreUI Kit
|
|
2
|
-
|
|
3
|
-
A React‑based design system and component library.
|
|
4
|
-
|
|
5
|
-
## 🚀 Getting Started
|
|
6
|
-
|
|
7
|
-
Install
|
|
8
|
-
|
|
9
|
-
```bash
|
|
10
|
-
npm install
|
|
11
|
-
```
|
|
12
|
-
|
|
13
|
-
Development
|
|
14
|
-
|
|
15
|
-
- Run the build in watch mode
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
npm run dev
|
|
19
|
-
```
|
|
20
|
-
|
|
21
|
-
Start Storybook
|
|
22
|
-
|
|
23
|
-
```bash
|
|
24
|
-
npm run storybook
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
Run tests
|
|
28
|
-
|
|
29
|
-
```bash
|
|
30
|
-
npm test
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
Lint/format
|
|
34
|
-
|
|
35
|
-
```bash
|
|
36
|
-
npm run lint
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
## 🛠️ Usage
|
|
40
|
-
|
|
41
|
-
Import components in other projects:
|
|
42
|
-
|
|
43
|
-
```ts
|
|
44
|
-
import '@digital-b2c/coreui-kit/styles.css'
|
|
45
|
-
|
|
46
|
-
import { MiniSectionCta } from '@digital-b2c/coreui-kit'
|
|
47
|
-
|
|
48
|
-
<MiniSectionCta>
|
|
49
|
-
<MiniSectionCta.Title>Header</MiniSectionCta.Title>
|
|
50
|
-
<MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
|
|
51
|
-
</MiniSectionCta>
|
|
52
|
-
```
|
|
1
|
+
# CoreUI Kit
|
|
2
|
+
|
|
3
|
+
A React‑based design system and component library.
|
|
4
|
+
|
|
5
|
+
## 🚀 Getting Started
|
|
6
|
+
|
|
7
|
+
Install
|
|
8
|
+
|
|
9
|
+
```bash
|
|
10
|
+
npm install
|
|
11
|
+
```
|
|
12
|
+
|
|
13
|
+
Development
|
|
14
|
+
|
|
15
|
+
- Run the build in watch mode
|
|
16
|
+
|
|
17
|
+
```bash
|
|
18
|
+
npm run dev
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
Start Storybook
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm run storybook
|
|
25
|
+
```
|
|
26
|
+
|
|
27
|
+
Run tests
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
npm test
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
Lint/format
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
npm run lint
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
## 🛠️ Usage
|
|
40
|
+
|
|
41
|
+
Import components in other projects:
|
|
42
|
+
|
|
43
|
+
```ts
|
|
44
|
+
import '@digital-b2c/coreui-kit/styles.css'
|
|
45
|
+
|
|
46
|
+
import { MiniSectionCta } from '@digital-b2c/coreui-kit'
|
|
47
|
+
|
|
48
|
+
<MiniSectionCta>
|
|
49
|
+
<MiniSectionCta.Title>Header</MiniSectionCta.Title>
|
|
50
|
+
<MiniSectionCta.Subtitle>Description</MiniSectionCta.Subtitle>
|
|
51
|
+
</MiniSectionCta>
|
|
52
|
+
```
|
package/dist/index.cjs
CHANGED
|
@@ -514,15 +514,15 @@ var useViewPort = () => {
|
|
|
514
514
|
window.addEventListener("resize", onWindowResizeDebounce);
|
|
515
515
|
return () => window.removeEventListener("resize", onWindowResizeDebounce);
|
|
516
516
|
}, [onWindowResizeDebounce]);
|
|
517
|
-
const is = (what,
|
|
517
|
+
const is = (what, range2) => {
|
|
518
518
|
const isArray = Array.isArray(what);
|
|
519
|
-
if (!
|
|
519
|
+
if (!range2 && !isArray) {
|
|
520
520
|
return what === device;
|
|
521
521
|
}
|
|
522
|
-
if (!
|
|
522
|
+
if (!range2 && isArray) {
|
|
523
523
|
return device ? what.includes(device) : false;
|
|
524
524
|
}
|
|
525
|
-
const list =
|
|
525
|
+
const list = range2 === "above" ? ORDER : [...ORDER].reverse();
|
|
526
526
|
const devices = getOtherDevices(list, what, true);
|
|
527
527
|
return device && devices.includes(device);
|
|
528
528
|
};
|
|
@@ -1121,6 +1121,31 @@ var InfoCard2 = Object.assign(InfoCard, {
|
|
|
1121
1121
|
Subtitle: InfoCardSubtitle
|
|
1122
1122
|
});
|
|
1123
1123
|
|
|
1124
|
+
// src/utils/getPaginationRange.ts
|
|
1125
|
+
var DOTS = "...";
|
|
1126
|
+
var range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
|
|
1127
|
+
var getPaginationRange = (totalPages, currentPage, siblingCount = 1, boundaryCount = 1) => {
|
|
1128
|
+
const totalPageNumbers = siblingCount * 2 + boundaryCount * 2 + 3;
|
|
1129
|
+
if (totalPageNumbers >= totalPages) {
|
|
1130
|
+
return range(1, totalPages);
|
|
1131
|
+
}
|
|
1132
|
+
const leftSiblingIndex = Math.max(currentPage - siblingCount, boundaryCount + 1);
|
|
1133
|
+
const rightSiblingIndex = Math.min(currentPage + siblingCount, totalPages - boundaryCount);
|
|
1134
|
+
const showLeftDots = leftSiblingIndex > boundaryCount + 2;
|
|
1135
|
+
const showRightDots = rightSiblingIndex < totalPages - boundaryCount - 1;
|
|
1136
|
+
const firstPages = range(1, boundaryCount);
|
|
1137
|
+
const lastPages = range(totalPages - boundaryCount + 1, totalPages);
|
|
1138
|
+
if (!showLeftDots && showRightDots) {
|
|
1139
|
+
const leftRange = range(1, boundaryCount + siblingCount * 2 + 2);
|
|
1140
|
+
return [...leftRange, DOTS, ...lastPages];
|
|
1141
|
+
}
|
|
1142
|
+
if (showLeftDots && !showRightDots) {
|
|
1143
|
+
const rightRange = range(totalPages - (boundaryCount + siblingCount * 2 + 1), totalPages);
|
|
1144
|
+
return [...firstPages, DOTS, ...rightRange];
|
|
1145
|
+
}
|
|
1146
|
+
return [...firstPages, DOTS, ...range(leftSiblingIndex, rightSiblingIndex), DOTS, ...lastPages];
|
|
1147
|
+
};
|
|
1148
|
+
|
|
1124
1149
|
// src/components/Pagination/Pagination.module.scss
|
|
1125
1150
|
var Pagination_module_default = {
|
|
1126
1151
|
pagination: "Pagination_module_pagination",
|
|
@@ -1128,8 +1153,10 @@ var Pagination_module_default = {
|
|
|
1128
1153
|
prev: "Pagination_module_prev",
|
|
1129
1154
|
pages: "Pagination_module_pages",
|
|
1130
1155
|
page: "Pagination_module_page",
|
|
1156
|
+
"no-border": "Pagination_module_no-border",
|
|
1157
|
+
number: "Pagination_module_number",
|
|
1131
1158
|
active: "Pagination_module_active",
|
|
1132
|
-
|
|
1159
|
+
dots: "Pagination_module_dots"
|
|
1133
1160
|
};
|
|
1134
1161
|
var Pagination = ({
|
|
1135
1162
|
className,
|
|
@@ -1139,6 +1166,10 @@ var Pagination = ({
|
|
|
1139
1166
|
hasNumber = false,
|
|
1140
1167
|
disableArrows = false,
|
|
1141
1168
|
onPageChange,
|
|
1169
|
+
showEllipsis,
|
|
1170
|
+
boundaryCount,
|
|
1171
|
+
siblingCount,
|
|
1172
|
+
hidePagesBorder = false,
|
|
1142
1173
|
renderLink
|
|
1143
1174
|
}) => {
|
|
1144
1175
|
const [activePage, setActivePage] = React66.useState(currentPage);
|
|
@@ -1173,6 +1204,7 @@ var Pagination = ({
|
|
|
1173
1204
|
};
|
|
1174
1205
|
const prevPage = activePage === 1 ? loop ? totalPages : 1 : activePage - 1;
|
|
1175
1206
|
const nextPage = activePage === totalPages ? loop ? 1 : totalPages : activePage + 1;
|
|
1207
|
+
const pageItems = showEllipsis ? getPaginationRange(totalPages, activePage, siblingCount, boundaryCount) : Array.from({ length: totalPages }, (_, i) => i + 1);
|
|
1176
1208
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx16__default.default(Pagination_module_default.pagination, className), children: [
|
|
1177
1209
|
!disableArrows && (renderLink ? renderLink({
|
|
1178
1210
|
page: prevPage,
|
|
@@ -1189,11 +1221,15 @@ var Pagination = ({
|
|
|
1189
1221
|
children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { type: "filledChevronLeft" })
|
|
1190
1222
|
}
|
|
1191
1223
|
)),
|
|
1192
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { className: Pagination_module_default.pages, children:
|
|
1193
|
-
|
|
1224
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { className: Pagination_module_default.pages, children: pageItems.map((item, index) => {
|
|
1225
|
+
if (item === "...") {
|
|
1226
|
+
return /* @__PURE__ */ jsxRuntime.jsx("span", { className: Pagination_module_default.dots, "aria-hidden": "true", children: "\u2026" }, `dots-${index}`);
|
|
1227
|
+
}
|
|
1228
|
+
const page = item;
|
|
1194
1229
|
const pageClassName = clsx16__default.default(Pagination_module_default.page, {
|
|
1195
1230
|
[Pagination_module_default.active]: activePage === page,
|
|
1196
|
-
[Pagination_module_default.number]: hasNumber
|
|
1231
|
+
[Pagination_module_default.number]: hasNumber,
|
|
1232
|
+
[Pagination_module_default["no-border"]]: hidePagesBorder
|
|
1197
1233
|
});
|
|
1198
1234
|
return renderLink ? /* @__PURE__ */ jsxRuntime.jsx(React66.Fragment, { children: renderLink({
|
|
1199
1235
|
page,
|
|
@@ -3370,7 +3406,7 @@ var Teaser5050WithCta = ({
|
|
|
3370
3406
|
titleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx16__default.default(Teaser5050WithCta_module_default.title, "h3"), children: titleNode }),
|
|
3371
3407
|
subtitleNode && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "subheading", children: subtitleNode })
|
|
3372
3408
|
] }),
|
|
3373
|
-
(ctas == null ? void 0 : ctas.length) && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3409
|
+
ctas && (ctas == null ? void 0 : ctas.length) > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Teaser5050WithCta_module_default.ctaWrapper, children: ctas.map((cta, key) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
3374
3410
|
Button,
|
|
3375
3411
|
{
|
|
3376
3412
|
className: Teaser5050WithCta_module_default.cta,
|