@karakuri-ui/react 0.3.3 → 0.3.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/README.md +27 -4
- package/dist/components/ui/accordion.js +27 -24
- package/dist/components/ui/accordion.js.map +1 -1
- package/dist/components/ui/accordion.mjs +28 -25
- package/dist/components/ui/accordion.mjs.map +1 -1
- package/dist/components/ui/alert.js +45 -27
- package/dist/components/ui/alert.js.map +1 -1
- package/dist/components/ui/alert.mjs +46 -28
- package/dist/components/ui/alert.mjs.map +1 -1
- package/dist/components/ui/avatar.js +41 -32
- package/dist/components/ui/avatar.js.map +1 -1
- package/dist/components/ui/avatar.mjs +42 -33
- package/dist/components/ui/avatar.mjs.map +1 -1
- package/dist/components/ui/badge.js +46 -43
- package/dist/components/ui/badge.js.map +1 -1
- package/dist/components/ui/badge.mjs +47 -44
- package/dist/components/ui/badge.mjs.map +1 -1
- package/dist/components/ui/breadcrumb.js +30 -25
- package/dist/components/ui/breadcrumb.js.map +1 -1
- package/dist/components/ui/breadcrumb.mjs +31 -26
- package/dist/components/ui/breadcrumb.mjs.map +1 -1
- package/dist/components/ui/button-group.js +6 -5
- package/dist/components/ui/button-group.js.map +1 -1
- package/dist/components/ui/button-group.mjs +7 -6
- package/dist/components/ui/button-group.mjs.map +1 -1
- package/dist/components/ui/button.js +24 -14
- package/dist/components/ui/button.js.map +1 -1
- package/dist/components/ui/button.mjs +26 -16
- package/dist/components/ui/button.mjs.map +1 -1
- package/dist/components/ui/card.js +53 -39
- package/dist/components/ui/card.js.map +1 -1
- package/dist/components/ui/card.mjs +54 -40
- package/dist/components/ui/card.mjs.map +1 -1
- package/dist/components/ui/chart.d.mts +1 -1
- package/dist/components/ui/chart.d.ts +1 -1
- package/dist/components/ui/chart.js +154 -130
- package/dist/components/ui/chart.js.map +1 -1
- package/dist/components/ui/chart.mjs +155 -131
- package/dist/components/ui/chart.mjs.map +1 -1
- package/dist/components/ui/checkbox.js +47 -40
- package/dist/components/ui/checkbox.js.map +1 -1
- package/dist/components/ui/checkbox.mjs +49 -42
- package/dist/components/ui/checkbox.mjs.map +1 -1
- package/dist/components/ui/divider.js +16 -13
- package/dist/components/ui/divider.js.map +1 -1
- package/dist/components/ui/divider.mjs +17 -14
- package/dist/components/ui/divider.mjs.map +1 -1
- package/dist/components/ui/drawer.js +44 -35
- package/dist/components/ui/drawer.js.map +1 -1
- package/dist/components/ui/drawer.mjs +45 -36
- package/dist/components/ui/drawer.mjs.map +1 -1
- package/dist/components/ui/dropdown.js +31 -24
- package/dist/components/ui/dropdown.js.map +1 -1
- package/dist/components/ui/dropdown.mjs +32 -25
- package/dist/components/ui/dropdown.mjs.map +1 -1
- package/dist/components/ui/field.js +18 -15
- package/dist/components/ui/field.js.map +1 -1
- package/dist/components/ui/field.mjs +19 -16
- package/dist/components/ui/field.mjs.map +1 -1
- package/dist/components/ui/icon-button.js +17 -14
- package/dist/components/ui/icon-button.js.map +1 -1
- package/dist/components/ui/icon-button.mjs +19 -16
- package/dist/components/ui/icon-button.mjs.map +1 -1
- package/dist/components/ui/index.mjs +35 -35
- package/dist/components/ui/input.js +34 -29
- package/dist/components/ui/input.js.map +1 -1
- package/dist/components/ui/input.mjs +36 -31
- package/dist/components/ui/input.mjs.map +1 -1
- package/dist/components/ui/metric-card.js +24 -21
- package/dist/components/ui/metric-card.js.map +1 -1
- package/dist/components/ui/metric-card.mjs +25 -22
- package/dist/components/ui/metric-card.mjs.map +1 -1
- package/dist/components/ui/modal.js +91 -74
- package/dist/components/ui/modal.js.map +1 -1
- package/dist/components/ui/modal.mjs +92 -75
- package/dist/components/ui/modal.mjs.map +1 -1
- package/dist/components/ui/navigation-menu.js +114 -93
- package/dist/components/ui/navigation-menu.js.map +1 -1
- package/dist/components/ui/navigation-menu.mjs +115 -94
- package/dist/components/ui/navigation-menu.mjs.map +1 -1
- package/dist/components/ui/pagination.js +66 -55
- package/dist/components/ui/pagination.js.map +1 -1
- package/dist/components/ui/pagination.mjs +67 -56
- package/dist/components/ui/pagination.mjs.map +1 -1
- package/dist/components/ui/popover.js +39 -36
- package/dist/components/ui/popover.js.map +1 -1
- package/dist/components/ui/popover.mjs +40 -37
- package/dist/components/ui/popover.mjs.map +1 -1
- package/dist/components/ui/progress.js +73 -64
- package/dist/components/ui/progress.js.map +1 -1
- package/dist/components/ui/progress.mjs +74 -65
- package/dist/components/ui/progress.mjs.map +1 -1
- package/dist/components/ui/radio-group.js +23 -19
- package/dist/components/ui/radio-group.js.map +1 -1
- package/dist/components/ui/radio-group.mjs +25 -21
- package/dist/components/ui/radio-group.mjs.map +1 -1
- package/dist/components/ui/segmented.js +7 -6
- package/dist/components/ui/segmented.js.map +1 -1
- package/dist/components/ui/segmented.mjs +8 -7
- package/dist/components/ui/segmented.mjs.map +1 -1
- package/dist/components/ui/select.js +55 -48
- package/dist/components/ui/select.js.map +1 -1
- package/dist/components/ui/select.mjs +56 -49
- package/dist/components/ui/select.mjs.map +1 -1
- package/dist/components/ui/skeleton.js +20 -19
- package/dist/components/ui/skeleton.js.map +1 -1
- package/dist/components/ui/skeleton.mjs +21 -20
- package/dist/components/ui/skeleton.mjs.map +1 -1
- package/dist/components/ui/slider.js +68 -58
- package/dist/components/ui/slider.js.map +1 -1
- package/dist/components/ui/slider.mjs +69 -59
- package/dist/components/ui/slider.mjs.map +1 -1
- package/dist/components/ui/spinner.js +185 -176
- package/dist/components/ui/spinner.js.map +1 -1
- package/dist/components/ui/spinner.mjs +186 -177
- package/dist/components/ui/spinner.mjs.map +1 -1
- package/dist/components/ui/switch.js +39 -28
- package/dist/components/ui/switch.js.map +1 -1
- package/dist/components/ui/switch.mjs +41 -30
- package/dist/components/ui/switch.mjs.map +1 -1
- package/dist/components/ui/table.js +26 -23
- package/dist/components/ui/table.js.map +1 -1
- package/dist/components/ui/table.mjs +27 -24
- package/dist/components/ui/table.mjs.map +1 -1
- package/dist/components/ui/tabs.js +25 -9
- package/dist/components/ui/tabs.js.map +1 -1
- package/dist/components/ui/tabs.mjs +26 -10
- package/dist/components/ui/tabs.mjs.map +1 -1
- package/dist/components/ui/textarea.js +2 -1
- package/dist/components/ui/textarea.js.map +1 -1
- package/dist/components/ui/textarea.mjs +4 -3
- package/dist/components/ui/textarea.mjs.map +1 -1
- package/dist/components/ui/toast.js +104 -80
- package/dist/components/ui/toast.js.map +1 -1
- package/dist/components/ui/toast.mjs +105 -81
- package/dist/components/ui/toast.mjs.map +1 -1
- package/dist/components/ui/toggle-group.js +9 -8
- package/dist/components/ui/toggle-group.js.map +1 -1
- package/dist/components/ui/toggle-group.mjs +10 -9
- package/dist/components/ui/toggle-group.mjs.map +1 -1
- package/dist/components/ui/toggle.js +3 -2
- package/dist/components/ui/toggle.js.map +1 -1
- package/dist/components/ui/toggle.mjs +4 -3
- package/dist/components/ui/toggle.mjs.map +1 -1
- package/dist/components/ui/tooltip.js +18 -15
- package/dist/components/ui/tooltip.js.map +1 -1
- package/dist/components/ui/tooltip.mjs +19 -16
- package/dist/components/ui/tooltip.mjs.map +1 -1
- package/package.json +27 -19
|
@@ -1,70 +1,73 @@
|
|
|
1
1
|
"use client";
|
|
2
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
2
3
|
import * as React from "react";
|
|
3
4
|
import { cva } from "class-variance-authority";
|
|
4
|
-
import { cn } from "../../lib/utils";
|
|
5
|
+
import { cn } from "../../lib/utils.mjs";
|
|
5
6
|
function ChevronLeftIcon({ className }) {
|
|
6
|
-
return /* @__PURE__ */
|
|
7
|
+
return /* @__PURE__ */ jsx(
|
|
7
8
|
"svg",
|
|
8
9
|
{
|
|
9
10
|
className,
|
|
10
11
|
fill: "none",
|
|
11
12
|
viewBox: "0 0 24 24",
|
|
12
13
|
stroke: "currentColor",
|
|
13
|
-
strokeWidth: 2
|
|
14
|
-
|
|
15
|
-
|
|
14
|
+
strokeWidth: 2,
|
|
15
|
+
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M15 19l-7-7 7-7" })
|
|
16
|
+
}
|
|
16
17
|
);
|
|
17
18
|
}
|
|
18
19
|
function ChevronRightIcon({ className }) {
|
|
19
|
-
return /* @__PURE__ */
|
|
20
|
+
return /* @__PURE__ */ jsx(
|
|
20
21
|
"svg",
|
|
21
22
|
{
|
|
22
23
|
className,
|
|
23
24
|
fill: "none",
|
|
24
25
|
viewBox: "0 0 24 24",
|
|
25
26
|
stroke: "currentColor",
|
|
26
|
-
strokeWidth: 2
|
|
27
|
-
|
|
28
|
-
|
|
27
|
+
strokeWidth: 2,
|
|
28
|
+
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" })
|
|
29
|
+
}
|
|
29
30
|
);
|
|
30
31
|
}
|
|
31
32
|
function ChevronsLeftIcon({ className }) {
|
|
32
|
-
return /* @__PURE__ */
|
|
33
|
+
return /* @__PURE__ */ jsx(
|
|
33
34
|
"svg",
|
|
34
35
|
{
|
|
35
36
|
className,
|
|
36
37
|
fill: "none",
|
|
37
38
|
viewBox: "0 0 24 24",
|
|
38
39
|
stroke: "currentColor",
|
|
39
|
-
strokeWidth: 2
|
|
40
|
-
|
|
41
|
-
|
|
40
|
+
strokeWidth: 2,
|
|
41
|
+
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M11 17l-5-5 5-5M18 17l-5-5 5-5" })
|
|
42
|
+
}
|
|
42
43
|
);
|
|
43
44
|
}
|
|
44
45
|
function ChevronsRightIcon({ className }) {
|
|
45
|
-
return /* @__PURE__ */
|
|
46
|
+
return /* @__PURE__ */ jsx(
|
|
46
47
|
"svg",
|
|
47
48
|
{
|
|
48
49
|
className,
|
|
49
50
|
fill: "none",
|
|
50
51
|
viewBox: "0 0 24 24",
|
|
51
52
|
stroke: "currentColor",
|
|
52
|
-
strokeWidth: 2
|
|
53
|
-
|
|
54
|
-
|
|
53
|
+
strokeWidth: 2,
|
|
54
|
+
children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 7l5 5-5 5M6 7l5 5-5 5" })
|
|
55
|
+
}
|
|
55
56
|
);
|
|
56
57
|
}
|
|
57
58
|
function EllipsisIcon({ className }) {
|
|
58
|
-
return /* @__PURE__ */
|
|
59
|
+
return /* @__PURE__ */ jsxs(
|
|
59
60
|
"svg",
|
|
60
61
|
{
|
|
61
62
|
className,
|
|
62
63
|
fill: "currentColor",
|
|
63
|
-
viewBox: "0 0 24 24"
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
64
|
+
viewBox: "0 0 24 24",
|
|
65
|
+
children: [
|
|
66
|
+
/* @__PURE__ */ jsx("circle", { cx: "6", cy: "12", r: "1.5" }),
|
|
67
|
+
/* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1.5" }),
|
|
68
|
+
/* @__PURE__ */ jsx("circle", { cx: "18", cy: "12", r: "1.5" })
|
|
69
|
+
]
|
|
70
|
+
}
|
|
68
71
|
);
|
|
69
72
|
}
|
|
70
73
|
function range(start, end) {
|
|
@@ -213,17 +216,23 @@ const Pagination = React.forwardRef(
|
|
|
213
216
|
onPageChange: handlePageChange,
|
|
214
217
|
paginationRange
|
|
215
218
|
}), [page, total, siblings, boundaries, size, variant, color, radius, disabled, loop, handlePageChange, paginationRange]);
|
|
216
|
-
return /* @__PURE__ */
|
|
219
|
+
return /* @__PURE__ */ jsx(PaginationContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
|
|
217
220
|
"nav",
|
|
218
221
|
{
|
|
219
222
|
ref,
|
|
220
223
|
role: "navigation",
|
|
221
224
|
"aria-label": "pagination",
|
|
222
225
|
className: cn("", className),
|
|
223
|
-
...props
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
226
|
+
...props,
|
|
227
|
+
children: children ?? /* @__PURE__ */ jsxs(PaginationContent, { children: [
|
|
228
|
+
withEdges && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationFirst, {}) }),
|
|
229
|
+
withControls && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationPrevious, {}) }),
|
|
230
|
+
/* @__PURE__ */ jsx(PaginationItems, {}),
|
|
231
|
+
withControls && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationNext, {}) }),
|
|
232
|
+
withEdges && /* @__PURE__ */ jsx(PaginationItem, { children: /* @__PURE__ */ jsx(PaginationLast, {}) })
|
|
233
|
+
] })
|
|
234
|
+
}
|
|
235
|
+
) });
|
|
227
236
|
}
|
|
228
237
|
);
|
|
229
238
|
Pagination.displayName = "Pagination";
|
|
@@ -231,7 +240,7 @@ const PaginationContent = React.forwardRef(
|
|
|
231
240
|
({ className, ...props }, ref) => {
|
|
232
241
|
const { size } = usePaginationContext();
|
|
233
242
|
const sizeClass = paginationSizeMap[size];
|
|
234
|
-
return /* @__PURE__ */
|
|
243
|
+
return /* @__PURE__ */ jsx(
|
|
235
244
|
"ul",
|
|
236
245
|
{
|
|
237
246
|
ref,
|
|
@@ -243,7 +252,7 @@ const PaginationContent = React.forwardRef(
|
|
|
243
252
|
);
|
|
244
253
|
PaginationContent.displayName = "PaginationContent";
|
|
245
254
|
const PaginationItem = React.forwardRef(
|
|
246
|
-
({ className, ...props }, ref) => /* @__PURE__ */
|
|
255
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx("li", { ref, className: cn("", className), ...props })
|
|
247
256
|
);
|
|
248
257
|
PaginationItem.displayName = "PaginationItem";
|
|
249
258
|
const PaginationLink = React.forwardRef(
|
|
@@ -251,7 +260,7 @@ const PaginationLink = React.forwardRef(
|
|
|
251
260
|
const ctx = usePaginationContext();
|
|
252
261
|
const isActive = isActiveProp ?? ctx.page === targetPage;
|
|
253
262
|
const sizeClass = paginationSizeMap[ctx.size];
|
|
254
|
-
return /* @__PURE__ */
|
|
263
|
+
return /* @__PURE__ */ jsx(
|
|
255
264
|
"button",
|
|
256
265
|
{
|
|
257
266
|
ref,
|
|
@@ -266,9 +275,9 @@ const PaginationLink = React.forwardRef(
|
|
|
266
275
|
getItemClasses(ctx.variant, ctx.color, isActive, ctx.disabled),
|
|
267
276
|
className
|
|
268
277
|
),
|
|
269
|
-
...props
|
|
270
|
-
|
|
271
|
-
|
|
278
|
+
...props,
|
|
279
|
+
children: targetPage
|
|
280
|
+
}
|
|
272
281
|
);
|
|
273
282
|
}
|
|
274
283
|
);
|
|
@@ -285,7 +294,7 @@ const PaginationPrevious = React.forwardRef(
|
|
|
285
294
|
ctx.onPageChange(ctx.page - 1);
|
|
286
295
|
}
|
|
287
296
|
};
|
|
288
|
-
return /* @__PURE__ */
|
|
297
|
+
return /* @__PURE__ */ jsx(
|
|
289
298
|
"button",
|
|
290
299
|
{
|
|
291
300
|
ref,
|
|
@@ -299,9 +308,9 @@ const PaginationPrevious = React.forwardRef(
|
|
|
299
308
|
getItemClasses(ctx.variant, ctx.color, false, isDisabled),
|
|
300
309
|
className
|
|
301
310
|
),
|
|
302
|
-
...props
|
|
303
|
-
|
|
304
|
-
|
|
311
|
+
...props,
|
|
312
|
+
children: icon ?? /* @__PURE__ */ jsx(ChevronLeftIcon, { className: sizeClass.icon })
|
|
313
|
+
}
|
|
305
314
|
);
|
|
306
315
|
}
|
|
307
316
|
);
|
|
@@ -318,7 +327,7 @@ const PaginationNext = React.forwardRef(
|
|
|
318
327
|
ctx.onPageChange(ctx.page + 1);
|
|
319
328
|
}
|
|
320
329
|
};
|
|
321
|
-
return /* @__PURE__ */
|
|
330
|
+
return /* @__PURE__ */ jsx(
|
|
322
331
|
"button",
|
|
323
332
|
{
|
|
324
333
|
ref,
|
|
@@ -332,9 +341,9 @@ const PaginationNext = React.forwardRef(
|
|
|
332
341
|
getItemClasses(ctx.variant, ctx.color, false, isDisabled),
|
|
333
342
|
className
|
|
334
343
|
),
|
|
335
|
-
...props
|
|
336
|
-
|
|
337
|
-
|
|
344
|
+
...props,
|
|
345
|
+
children: icon ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: sizeClass.icon })
|
|
346
|
+
}
|
|
338
347
|
);
|
|
339
348
|
}
|
|
340
349
|
);
|
|
@@ -344,7 +353,7 @@ const PaginationFirst = React.forwardRef(
|
|
|
344
353
|
const ctx = usePaginationContext();
|
|
345
354
|
const sizeClass = paginationSizeMap[ctx.size];
|
|
346
355
|
const isDisabled = ctx.disabled || ctx.page <= 1;
|
|
347
|
-
return /* @__PURE__ */
|
|
356
|
+
return /* @__PURE__ */ jsx(
|
|
348
357
|
"button",
|
|
349
358
|
{
|
|
350
359
|
ref,
|
|
@@ -358,9 +367,9 @@ const PaginationFirst = React.forwardRef(
|
|
|
358
367
|
getItemClasses(ctx.variant, ctx.color, false, isDisabled),
|
|
359
368
|
className
|
|
360
369
|
),
|
|
361
|
-
...props
|
|
362
|
-
|
|
363
|
-
|
|
370
|
+
...props,
|
|
371
|
+
children: icon ?? /* @__PURE__ */ jsx(ChevronsLeftIcon, { className: sizeClass.icon })
|
|
372
|
+
}
|
|
364
373
|
);
|
|
365
374
|
}
|
|
366
375
|
);
|
|
@@ -370,7 +379,7 @@ const PaginationLast = React.forwardRef(
|
|
|
370
379
|
const ctx = usePaginationContext();
|
|
371
380
|
const sizeClass = paginationSizeMap[ctx.size];
|
|
372
381
|
const isDisabled = ctx.disabled || ctx.page >= ctx.total;
|
|
373
|
-
return /* @__PURE__ */
|
|
382
|
+
return /* @__PURE__ */ jsx(
|
|
374
383
|
"button",
|
|
375
384
|
{
|
|
376
385
|
ref,
|
|
@@ -384,9 +393,9 @@ const PaginationLast = React.forwardRef(
|
|
|
384
393
|
getItemClasses(ctx.variant, ctx.color, false, isDisabled),
|
|
385
394
|
className
|
|
386
395
|
),
|
|
387
|
-
...props
|
|
388
|
-
|
|
389
|
-
|
|
396
|
+
...props,
|
|
397
|
+
children: icon ?? /* @__PURE__ */ jsx(ChevronsRightIcon, { className: sizeClass.icon })
|
|
398
|
+
}
|
|
390
399
|
);
|
|
391
400
|
}
|
|
392
401
|
);
|
|
@@ -395,7 +404,7 @@ const PaginationEllipsis = React.forwardRef(
|
|
|
395
404
|
({ className, ...props }, ref) => {
|
|
396
405
|
const ctx = usePaginationContext();
|
|
397
406
|
const sizeClass = paginationSizeMap[ctx.size];
|
|
398
|
-
return /* @__PURE__ */
|
|
407
|
+
return /* @__PURE__ */ jsxs(
|
|
399
408
|
"span",
|
|
400
409
|
{
|
|
401
410
|
ref,
|
|
@@ -405,10 +414,12 @@ const PaginationEllipsis = React.forwardRef(
|
|
|
405
414
|
sizeClass.item,
|
|
406
415
|
className
|
|
407
416
|
),
|
|
408
|
-
...props
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
417
|
+
...props,
|
|
418
|
+
children: [
|
|
419
|
+
/* @__PURE__ */ jsx(EllipsisIcon, { className: sizeClass.icon }),
|
|
420
|
+
/* @__PURE__ */ jsx("span", { className: "sr-only", children: "More pages" })
|
|
421
|
+
]
|
|
422
|
+
}
|
|
412
423
|
);
|
|
413
424
|
}
|
|
414
425
|
);
|
|
@@ -416,7 +427,7 @@ PaginationEllipsis.displayName = "PaginationEllipsis";
|
|
|
416
427
|
const PaginationItems = React.forwardRef(
|
|
417
428
|
({ className, ...props }, ref) => {
|
|
418
429
|
const ctx = usePaginationContext();
|
|
419
|
-
return /* @__PURE__ */
|
|
430
|
+
return /* @__PURE__ */ jsx("div", { ref, className: cn("contents", className), ...props, children: ctx.paginationRange.map((item, index) => /* @__PURE__ */ jsx(PaginationItem, { children: item === "dots" ? /* @__PURE__ */ jsx(PaginationEllipsis, {}) : /* @__PURE__ */ jsx(PaginationLink, { page: item }) }, `${item}-${index}`)) });
|
|
420
431
|
}
|
|
421
432
|
);
|
|
422
433
|
PaginationItems.displayName = "PaginationItems";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in Icons ──────────────────────────────────────\n\nfunction ChevronLeftIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n )\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\nfunction ChevronsLeftIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M11 17l-5-5 5-5M18 17l-5-5 5-5\" />\n </svg>\n )\n}\n\nfunction ChevronsRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M13 7l5 5-5 5M6 7l5 5-5 5\" />\n </svg>\n )\n}\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── usePagination Hook ──────────────────────────────────\n\nexport type PaginationRange = (number | 'dots')[]\n\nexport interface UsePaginationProps {\n /** Total number of pages */\n total: number\n /** Number of siblings on each side of current page */\n siblings?: number\n /** Number of boundary pages at start/end */\n boundaries?: number\n /** Current active page (1-based) */\n page: number\n}\n\nfunction range(start: number, end: number): number[] {\n const result: number[] = []\n for (let i = start; i <= end; i++) result.push(i)\n return result\n}\n\nexport function usePagination({\n total,\n siblings = 1,\n boundaries = 1,\n page,\n}: UsePaginationProps): PaginationRange {\n if (total <= 0) return []\n\n const totalPageNumbers = siblings * 2 + 3 + boundaries * 2\n if (totalPageNumbers >= total) {\n return range(1, total)\n }\n\n const leftSiblingIndex = Math.max(page - siblings, boundaries + 1)\n const rightSiblingIndex = Math.min(page + siblings, total - boundaries)\n\n const showLeftDots = leftSiblingIndex > boundaries + 2\n const showRightDots = rightSiblingIndex < total - boundaries - 1\n\n if (!showLeftDots && showRightDots) {\n const leftItemCount = 3 + 2 * siblings + boundaries\n const leftRange = range(1, leftItemCount)\n return [...leftRange, 'dots' as const, ...range(total - boundaries + 1, total)]\n }\n\n if (showLeftDots && !showRightDots) {\n const rightItemCount = 3 + 2 * siblings + boundaries\n const rightRange = range(total - rightItemCount + 1, total)\n return [...range(1, boundaries), 'dots' as const, ...rightRange]\n }\n\n return [\n ...range(1, boundaries),\n 'dots' as const,\n ...range(leftSiblingIndex, rightSiblingIndex),\n 'dots' as const,\n ...range(total - boundaries + 1, total),\n ]\n}\n\n// ─── Context ─────────────────────────────────────────────\n\nexport type PaginationSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\nexport type PaginationVariant = 'default' | 'outline' | 'ghost'\nexport type PaginationColor = 'default' | 'primary'\nexport type PaginationRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'full'\n\ntype PaginationContextValue = {\n page: number\n total: number\n siblings: number\n boundaries: number\n size: PaginationSize\n variant: PaginationVariant\n color: PaginationColor\n radius: PaginationRadius\n disabled: boolean\n loop: boolean\n onPageChange: (page: number) => void\n paginationRange: PaginationRange\n}\n\nconst PaginationContext = React.createContext<PaginationContextValue | null>(null)\n\nfunction usePaginationContext() {\n const ctx = React.useContext(PaginationContext)\n if (!ctx) throw new Error('Pagination components must be used within <Pagination>')\n return ctx\n}\n\n// ─── Size Map ────────────────────────────────────────────\n\nconst paginationSizeMap = {\n xs: { item: 'h-7 min-w-7 text-xs', icon: 'icon-xs', gap: 'gap-1' },\n sm: { item: 'h-8 min-w-8 text-sm', icon: 'icon-xs', gap: 'gap-1' },\n default: { item: 'h-9 min-w-9 text-md', icon: 'icon-sm', gap: 'gap-1' },\n lg: { item: 'h-10 min-w-10 text-md', icon: 'icon-sm', gap: 'gap-1.5' },\n xl: { item: 'h-12 min-w-12 text-base', icon: 'icon-sm', gap: 'gap-1.5' },\n} as const\n\n// ─── Item Variants (CVA) ─────────────────────────────────\n\nconst paginationItemVariants = cva(\n 'inline-flex items-center justify-center select-none transition-colors duration-fast font-semibold focus-visible:focus-ring',\n {\n variants: {\n radius: {\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n full: 'rounded-full',\n },\n },\n defaultVariants: {\n radius: 'md',\n },\n }\n)\n\n// ─── Variant Style Helpers ───────────────────────────────\n\n// Active color maps\nconst activeColorMap = {\n default: 'bg-foreground text-background',\n primary: 'bg-primary text-primary-foreground',\n} as const\n\nconst ghostActiveColorMap = {\n default: 'bg-background-muted text-foreground font-bold',\n primary: 'bg-background-muted text-primary',\n} as const\n\nfunction getItemClasses(variant: PaginationVariant, color: PaginationColor, isActive: boolean, disabled: boolean) {\n if (disabled) {\n return variant === 'outline'\n ? 'border border-border text-disabled-foreground pointer-events-none opacity-50'\n : 'border border-transparent text-disabled-foreground pointer-events-none opacity-50'\n }\n if (isActive) {\n switch (variant) {\n case 'outline':\n return `border ${color === 'default' ? 'border-foreground' : 'border-primary'} ${activeColorMap[color]}`\n case 'ghost':\n return `border border-transparent ${ghostActiveColorMap[color]}`\n case 'default':\n default:\n return `border border-transparent ${activeColorMap[color]}`\n }\n }\n switch (variant) {\n case 'outline':\n return 'border border-border text-text-muted hover:bg-background-muted hover:text-foreground'\n case 'ghost':\n return 'border border-transparent text-text-muted hover:bg-background-muted hover:text-foreground'\n case 'default':\n default:\n return 'border border-transparent text-text-muted hover:bg-background-muted hover:text-foreground'\n }\n}\n\n// ─── Pagination (Root) ───────────────────────────────────\n\nexport interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {\n /** Total number of pages */\n total?: number\n /** Controlled active page (1-based) */\n value?: number\n /** Initial page for uncontrolled mode */\n defaultValue?: number\n /** Page change callback */\n onChange?: (page: number) => void\n /** Number of siblings on each side of current page */\n siblings?: number\n /** Number of boundary pages at start/end */\n boundaries?: number\n /** Component size */\n size?: PaginationSize\n /** Visual variant */\n variant?: PaginationVariant\n /** Active page color */\n color?: PaginationColor\n /** Border radius */\n radius?: PaginationRadius\n /** Disable all interactions */\n disabled?: boolean\n /** Show previous/next controls */\n withControls?: boolean\n /** Show first/last controls */\n withEdges?: boolean\n /** Loop from last to first and vice versa */\n loop?: boolean\n}\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n ({\n className,\n total = 1,\n value,\n defaultValue = 1,\n onChange,\n siblings = 1,\n boundaries = 1,\n size = 'default',\n variant = 'default',\n color = 'default',\n radius = 'md',\n disabled = false,\n withControls = true,\n withEdges = false,\n loop = false,\n children,\n ...props\n }, ref) => {\n // Controlled / Uncontrolled\n const [internalPage, setInternalPage] = React.useState(defaultValue)\n const isControlled = value !== undefined\n const page = isControlled ? value : internalPage\n\n const handlePageChange = React.useCallback((newPage: number) => {\n if (disabled) return\n const clamped = Math.max(1, Math.min(total, newPage))\n if (!isControlled) setInternalPage(clamped)\n onChange?.(clamped)\n }, [disabled, total, isControlled, onChange])\n\n const paginationRange = usePagination({ total, siblings, boundaries, page })\n\n const contextValue = React.useMemo<PaginationContextValue>(() => ({\n page,\n total,\n siblings,\n boundaries,\n size,\n variant,\n color,\n radius,\n disabled,\n loop,\n onPageChange: handlePageChange,\n paginationRange,\n }), [page, total, siblings, boundaries, size, variant, color, radius, disabled, loop, handlePageChange, paginationRange])\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn('', className)}\n {...props}\n >\n {children ?? (\n <PaginationContent>\n {withEdges && <PaginationItem><PaginationFirst /></PaginationItem>}\n {withControls && <PaginationItem><PaginationPrevious /></PaginationItem>}\n <PaginationItems />\n {withControls && <PaginationItem><PaginationNext /></PaginationItem>}\n {withEdges && <PaginationItem><PaginationLast /></PaginationItem>}\n </PaginationContent>\n )}\n </nav>\n </PaginationContext.Provider>\n )\n }\n)\nPagination.displayName = 'Pagination'\n\n// ─── PaginationContent ───────────────────────────────────\n\nconst PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(\n ({ className, ...props }, ref) => {\n const { size } = usePaginationContext()\n const sizeClass = paginationSizeMap[size]\n return (\n <ul\n ref={ref}\n className={cn('flex flex-wrap items-center', sizeClass.gap, className)}\n {...props}\n />\n )\n }\n)\nPaginationContent.displayName = 'PaginationContent'\n\n// ─── PaginationItem ──────────────────────────────────────\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li ref={ref} className={cn('', className)} {...props} />\n )\n)\nPaginationItem.displayName = 'PaginationItem'\n\n// ─── PaginationLink ──────────────────────────────────────\n\nexport interface PaginationLinkProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Page number this link navigates to */\n page: number\n /** Whether this page is currently active (auto-detected from context if omitted) */\n isActive?: boolean\n}\n\nconst PaginationLink = React.forwardRef<HTMLButtonElement, PaginationLinkProps>(\n ({ className, page: targetPage, isActive: isActiveProp, ...props }, ref) => {\n const ctx = usePaginationContext()\n const isActive = isActiveProp ?? (ctx.page === targetPage)\n const sizeClass = paginationSizeMap[ctx.size]\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-current={isActive ? 'page' : undefined}\n aria-label={`Go to page ${targetPage}`}\n disabled={ctx.disabled}\n onClick={() => ctx.onPageChange(targetPage)}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, isActive, ctx.disabled),\n className\n )}\n {...props}\n >\n {targetPage}\n </button>\n )\n }\n)\nPaginationLink.displayName = 'PaginationLink'\n\n// ─── PaginationPrevious ──────────────────────────────────\n\nexport interface PaginationPreviousProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationPrevious = React.forwardRef<HTMLButtonElement, PaginationPreviousProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || (!ctx.loop && ctx.page <= 1)\n\n const handleClick = () => {\n if (ctx.page <= 1) {\n if (ctx.loop) ctx.onPageChange(ctx.total)\n } else {\n ctx.onPageChange(ctx.page - 1)\n }\n }\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to previous page\"\n disabled={isDisabled}\n onClick={handleClick}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronLeftIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationPrevious.displayName = 'PaginationPrevious'\n\n// ─── PaginationNext ──────────────────────────────────────\n\nexport interface PaginationNextProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationNext = React.forwardRef<HTMLButtonElement, PaginationNextProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || (!ctx.loop && ctx.page >= ctx.total)\n\n const handleClick = () => {\n if (ctx.page >= ctx.total) {\n if (ctx.loop) ctx.onPageChange(1)\n } else {\n ctx.onPageChange(ctx.page + 1)\n }\n }\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to next page\"\n disabled={isDisabled}\n onClick={handleClick}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronRightIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationNext.displayName = 'PaginationNext'\n\n// ─── PaginationFirst ─────────────────────────────────────\n\nexport interface PaginationFirstProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationFirst = React.forwardRef<HTMLButtonElement, PaginationFirstProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || ctx.page <= 1\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to first page\"\n disabled={isDisabled}\n onClick={() => ctx.onPageChange(1)}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronsLeftIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationFirst.displayName = 'PaginationFirst'\n\n// ─── PaginationLast ──────────────────────────────────────\n\nexport interface PaginationLastProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationLast = React.forwardRef<HTMLButtonElement, PaginationLastProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || ctx.page >= ctx.total\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to last page\"\n disabled={isDisabled}\n onClick={() => ctx.onPageChange(ctx.total)}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronsRightIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationLast.displayName = 'PaginationLast'\n\n// ─── PaginationEllipsis ──────────────────────────────────\n\nconst PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n className={cn(\n 'inline-flex items-center justify-center text-text-muted',\n sizeClass.item,\n className\n )}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More pages</span>\n </span>\n )\n }\n)\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n// ─── PaginationItems (Convenience) ───────────────────────\n\nconst PaginationItems = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n ({ className, ...props }, ref) => {\n const ctx = usePaginationContext()\n return (\n <div ref={ref} className={cn('contents', className)} {...props}>\n {ctx.paginationRange.map((item, index) => (\n <PaginationItem key={`${item}-${index}`}>\n {item === 'dots' ? (\n <PaginationEllipsis />\n ) : (\n <PaginationLink page={item} />\n )}\n </PaginationItem>\n ))}\n </div>\n )\n }\n)\nPaginationItems.displayName = 'PaginationItems'\n\n// ─── Exports ─────────────────────────────────────────────\n\nexport {\n Pagination,\n PaginationContent,\n PaginationItem,\n PaginationLink,\n PaginationPrevious,\n PaginationNext,\n PaginationFirst,\n PaginationLast,\n PaginationEllipsis,\n PaginationItems,\n paginationItemVariants,\n paginationSizeMap,\n}\n"],"mappings":";AAEA,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,SAAS,gBAAgB,EAAE,UAAU,GAA2B;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA;AAAA,IAEb,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,mBAAkB;AAAA,EACzE;AAEJ;AAEA,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA;AAAA,IAEb,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,gBAAe;AAAA,EACtE;AAEJ;AAEA,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA;AAAA,IAEb,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kCAAiC;AAAA,EACxF;AAEJ;AAEA,SAAS,kBAAkB,EAAE,UAAU,GAA2B;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA;AAAA,IAEb,oCAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,6BAA4B;AAAA,EACnF;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA;AAAA,IAER,oCAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,IAC/B,oCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,IAChC,oCAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,EAClC;AAEJ;AAiBA,SAAS,MAAM,OAAe,KAAuB;AACnD,QAAM,SAAmB,CAAC;AAC1B,WAAS,IAAI,OAAO,KAAK,KAAK,IAAK,QAAO,KAAK,CAAC;AAChD,SAAO;AACT;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AACF,GAAwC;AACtC,MAAI,SAAS,EAAG,QAAO,CAAC;AAExB,QAAM,mBAAmB,WAAW,IAAI,IAAI,aAAa;AACzD,MAAI,oBAAoB,OAAO;AAC7B,WAAO,MAAM,GAAG,KAAK;AAAA,EACvB;AAEA,QAAM,mBAAmB,KAAK,IAAI,OAAO,UAAU,aAAa,CAAC;AACjE,QAAM,oBAAoB,KAAK,IAAI,OAAO,UAAU,QAAQ,UAAU;AAEtE,QAAM,eAAe,mBAAmB,aAAa;AACrD,QAAM,gBAAgB,oBAAoB,QAAQ,aAAa;AAE/D,MAAI,CAAC,gBAAgB,eAAe;AAClC,UAAM,gBAAgB,IAAI,IAAI,WAAW;AACzC,UAAM,YAAY,MAAM,GAAG,aAAa;AACxC,WAAO,CAAC,GAAG,WAAW,QAAiB,GAAG,MAAM,QAAQ,aAAa,GAAG,KAAK,CAAC;AAAA,EAChF;AAEA,MAAI,gBAAgB,CAAC,eAAe;AAClC,UAAM,iBAAiB,IAAI,IAAI,WAAW;AAC1C,UAAM,aAAa,MAAM,QAAQ,iBAAiB,GAAG,KAAK;AAC1D,WAAO,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,QAAiB,GAAG,UAAU;AAAA,EACjE;AAEA,SAAO;AAAA,IACL,GAAG,MAAM,GAAG,UAAU;AAAA,IACtB;AAAA,IACA,GAAG,MAAM,kBAAkB,iBAAiB;AAAA,IAC5C;AAAA,IACA,GAAG,MAAM,QAAQ,aAAa,GAAG,KAAK;AAAA,EACxC;AACF;AAwBA,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAEjF,SAAS,uBAAuB;AAC9B,QAAM,MAAM,MAAM,WAAW,iBAAiB;AAC9C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,wDAAwD;AAClF,SAAO;AACT;AAIA,MAAM,oBAAoB;AAAA,EACxB,IAAI,EAAE,MAAM,uBAAuB,MAAM,WAAW,KAAK,QAAQ;AAAA,EACjE,IAAI,EAAE,MAAM,uBAAuB,MAAM,WAAW,KAAK,QAAQ;AAAA,EACjE,SAAS,EAAE,MAAM,uBAAuB,MAAM,WAAW,KAAK,QAAQ;AAAA,EACtE,IAAI,EAAE,MAAM,yBAAyB,MAAM,WAAW,KAAK,UAAU;AAAA,EACrE,IAAI,EAAE,MAAM,2BAA2B,MAAM,WAAW,KAAK,UAAU;AACzE;AAIA,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAKA,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe,SAA4B,OAAwB,UAAmB,UAAmB;AAChH,MAAI,UAAU;AACZ,WAAO,YAAY,YACf,iFACA;AAAA,EACN;AACA,MAAI,UAAU;AACZ,YAAQ,SAAS;AAAA,MACf,KAAK;AACH,eAAO,UAAU,UAAU,YAAY,sBAAsB,gBAAgB,IAAI,eAAe,KAAK,CAAC;AAAA,MACxG,KAAK;AACH,eAAO,6BAA6B,oBAAoB,KAAK,CAAC;AAAA,MAChE,KAAK;AAAA,MACL;AACE,eAAO,6BAA6B,eAAe,KAAK,CAAC;AAAA,IAC7D;AAAA,EACF;AACA,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAmCA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC;AAAA,IACC;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,WAAW;AAAA,IACX,aAAa;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,YAAY;AACnE,UAAM,eAAe,UAAU;AAC/B,UAAM,OAAO,eAAe,QAAQ;AAEpC,UAAM,mBAAmB,MAAM,YAAY,CAAC,YAAoB;AAC9D,UAAI,SAAU;AACd,YAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,OAAO,CAAC;AACpD,UAAI,CAAC,aAAc,iBAAgB,OAAO;AAC1C,iBAAW,OAAO;AAAA,IACpB,GAAG,CAAC,UAAU,OAAO,cAAc,QAAQ,CAAC;AAE5C,UAAM,kBAAkB,cAAc,EAAE,OAAO,UAAU,YAAY,KAAK,CAAC;AAE3E,UAAM,eAAe,MAAM,QAAgC,OAAO;AAAA,MAChE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF,IAAI,CAAC,MAAM,OAAO,UAAU,YAAY,MAAM,SAAS,OAAO,QAAQ,UAAU,MAAM,kBAAkB,eAAe,CAAC;AAExH,WACE,oCAAC,kBAAkB,UAAlB,EAA2B,OAAO,gBACjC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW,GAAG,IAAI,SAAS;AAAA,QAC1B,GAAG;AAAA;AAAA,MAEH,YACC,oCAAC,yBACE,aAAa,oCAAC,sBAAe,oCAAC,qBAAgB,CAAE,GAChD,gBAAgB,oCAAC,sBAAe,oCAAC,wBAAmB,CAAE,GACvD,oCAAC,qBAAgB,GAChB,gBAAgB,oCAAC,sBAAe,oCAAC,oBAAe,CAAE,GAClD,aAAa,oCAAC,sBAAe,oCAAC,oBAAe,CAAE,CAClD;AAAA,IAEJ,CACF;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAIzB,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,qBAAqB;AACtC,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,+BAA+B,UAAU,KAAK,SAAS;AAAA,QACpE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAIhC,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oCAAC,QAAG,KAAU,WAAW,GAAG,IAAI,SAAS,GAAI,GAAG,OAAO;AAE3D;AACA,eAAe,cAAc;AAW7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,YAAY,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC1E,UAAM,MAAM,qBAAqB;AACjC,UAAM,WAAW,gBAAiB,IAAI,SAAS;AAC/C,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,gBAAc,WAAW,SAAS;AAAA,QAClC,cAAY,cAAc,UAAU;AAAA,QACpC,UAAU,IAAI;AAAA,QACd,SAAS,MAAM,IAAI,aAAa,UAAU;AAAA,QAC1C,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,UAAU,IAAI,QAAQ;AAAA,UAC7D;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH;AAAA,IACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAS7B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAa,CAAC,IAAI,QAAQ,IAAI,QAAQ;AAE7D,UAAM,cAAc,MAAM;AACxB,UAAI,IAAI,QAAQ,GAAG;AACjB,YAAI,IAAI,KAAM,KAAI,aAAa,IAAI,KAAK;AAAA,MAC1C,OAAO;AACL,YAAI,aAAa,IAAI,OAAO,CAAC;AAAA,MAC/B;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,QAAQ,oCAAC,mBAAgB,WAAW,UAAU,MAAM;AAAA,IACvD;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AASjC,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAa,CAAC,IAAI,QAAQ,IAAI,QAAQ,IAAI;AAEjE,UAAM,cAAc,MAAM;AACxB,UAAI,IAAI,QAAQ,IAAI,OAAO;AACzB,YAAI,IAAI,KAAM,KAAI,aAAa,CAAC;AAAA,MAClC,OAAO;AACL,YAAI,aAAa,IAAI,OAAO,CAAC;AAAA,MAC/B;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,QAAQ,oCAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA,IACxD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAS7B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAY,IAAI,QAAQ;AAE/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS,MAAM,IAAI,aAAa,CAAC;AAAA,QACjC,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,QAAQ,oCAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA,IACxD;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAS9B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAY,IAAI,QAAQ,IAAI;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS,MAAM,IAAI,aAAa,IAAI,KAAK;AAAA,QACzC,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEH,QAAQ,oCAAC,qBAAkB,WAAW,UAAU,MAAM;AAAA,IACzD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV;AAAA,QACF;AAAA,QACC,GAAG;AAAA;AAAA,MAEJ,oCAAC,gBAAa,WAAW,UAAU,MAAM;AAAA,MACzC,oCAAC,UAAK,WAAU,aAAU,YAAU;AAAA,IACtC;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAIjC,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,MAAM,qBAAqB;AACjC,WACE,oCAAC,SAAI,KAAU,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,SACtD,IAAI,gBAAgB,IAAI,CAAC,MAAM,UAC9B,oCAAC,kBAAe,KAAK,GAAG,IAAI,IAAI,KAAK,MAClC,SAAS,SACR,oCAAC,wBAAmB,IAEpB,oCAAC,kBAAe,MAAM,MAAM,CAEhC,CACD,CACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":[]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/pagination.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Built-in Icons ──────────────────────────────────────\n\nfunction ChevronLeftIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M15 19l-7-7 7-7\" />\n </svg>\n )\n}\n\nfunction ChevronRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M9 5l7 7-7 7\" />\n </svg>\n )\n}\n\nfunction ChevronsLeftIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M11 17l-5-5 5-5M18 17l-5-5 5-5\" />\n </svg>\n )\n}\n\nfunction ChevronsRightIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M13 7l5 5-5 5M6 7l5 5-5 5\" />\n </svg>\n )\n}\n\nfunction EllipsisIcon({ className }: { className?: string }) {\n return (\n <svg\n className={className}\n fill=\"currentColor\"\n viewBox=\"0 0 24 24\"\n >\n <circle cx=\"6\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"12\" cy=\"12\" r=\"1.5\" />\n <circle cx=\"18\" cy=\"12\" r=\"1.5\" />\n </svg>\n )\n}\n\n// ─── usePagination Hook ──────────────────────────────────\n\nexport type PaginationRange = (number | 'dots')[]\n\nexport interface UsePaginationProps {\n /** Total number of pages */\n total: number\n /** Number of siblings on each side of current page */\n siblings?: number\n /** Number of boundary pages at start/end */\n boundaries?: number\n /** Current active page (1-based) */\n page: number\n}\n\nfunction range(start: number, end: number): number[] {\n const result: number[] = []\n for (let i = start; i <= end; i++) result.push(i)\n return result\n}\n\nexport function usePagination({\n total,\n siblings = 1,\n boundaries = 1,\n page,\n}: UsePaginationProps): PaginationRange {\n if (total <= 0) return []\n\n const totalPageNumbers = siblings * 2 + 3 + boundaries * 2\n if (totalPageNumbers >= total) {\n return range(1, total)\n }\n\n const leftSiblingIndex = Math.max(page - siblings, boundaries + 1)\n const rightSiblingIndex = Math.min(page + siblings, total - boundaries)\n\n const showLeftDots = leftSiblingIndex > boundaries + 2\n const showRightDots = rightSiblingIndex < total - boundaries - 1\n\n if (!showLeftDots && showRightDots) {\n const leftItemCount = 3 + 2 * siblings + boundaries\n const leftRange = range(1, leftItemCount)\n return [...leftRange, 'dots' as const, ...range(total - boundaries + 1, total)]\n }\n\n if (showLeftDots && !showRightDots) {\n const rightItemCount = 3 + 2 * siblings + boundaries\n const rightRange = range(total - rightItemCount + 1, total)\n return [...range(1, boundaries), 'dots' as const, ...rightRange]\n }\n\n return [\n ...range(1, boundaries),\n 'dots' as const,\n ...range(leftSiblingIndex, rightSiblingIndex),\n 'dots' as const,\n ...range(total - boundaries + 1, total),\n ]\n}\n\n// ─── Context ─────────────────────────────────────────────\n\nexport type PaginationSize = 'xs' | 'sm' | 'default' | 'lg' | 'xl'\nexport type PaginationVariant = 'default' | 'outline' | 'ghost'\nexport type PaginationColor = 'default' | 'primary'\nexport type PaginationRadius = 'sm' | 'base' | 'md' | 'lg' | 'xl' | 'full'\n\ntype PaginationContextValue = {\n page: number\n total: number\n siblings: number\n boundaries: number\n size: PaginationSize\n variant: PaginationVariant\n color: PaginationColor\n radius: PaginationRadius\n disabled: boolean\n loop: boolean\n onPageChange: (page: number) => void\n paginationRange: PaginationRange\n}\n\nconst PaginationContext = React.createContext<PaginationContextValue | null>(null)\n\nfunction usePaginationContext() {\n const ctx = React.useContext(PaginationContext)\n if (!ctx) throw new Error('Pagination components must be used within <Pagination>')\n return ctx\n}\n\n// ─── Size Map ────────────────────────────────────────────\n\nconst paginationSizeMap = {\n xs: { item: 'h-7 min-w-7 text-xs', icon: 'icon-xs', gap: 'gap-1' },\n sm: { item: 'h-8 min-w-8 text-sm', icon: 'icon-xs', gap: 'gap-1' },\n default: { item: 'h-9 min-w-9 text-md', icon: 'icon-sm', gap: 'gap-1' },\n lg: { item: 'h-10 min-w-10 text-md', icon: 'icon-sm', gap: 'gap-1.5' },\n xl: { item: 'h-12 min-w-12 text-base', icon: 'icon-sm', gap: 'gap-1.5' },\n} as const\n\n// ─── Item Variants (CVA) ─────────────────────────────────\n\nconst paginationItemVariants = cva(\n 'inline-flex items-center justify-center select-none transition-colors duration-fast font-semibold focus-visible:focus-ring',\n {\n variants: {\n radius: {\n sm: 'rounded-sm',\n base: 'rounded',\n md: 'rounded-md',\n lg: 'rounded-lg',\n xl: 'rounded-xl',\n full: 'rounded-full',\n },\n },\n defaultVariants: {\n radius: 'md',\n },\n }\n)\n\n// ─── Variant Style Helpers ───────────────────────────────\n\n// Active color maps\nconst activeColorMap = {\n default: 'bg-foreground text-background',\n primary: 'bg-primary text-primary-foreground',\n} as const\n\nconst ghostActiveColorMap = {\n default: 'bg-background-muted text-foreground font-bold',\n primary: 'bg-background-muted text-primary',\n} as const\n\nfunction getItemClasses(variant: PaginationVariant, color: PaginationColor, isActive: boolean, disabled: boolean) {\n if (disabled) {\n return variant === 'outline'\n ? 'border border-border text-disabled-foreground pointer-events-none opacity-50'\n : 'border border-transparent text-disabled-foreground pointer-events-none opacity-50'\n }\n if (isActive) {\n switch (variant) {\n case 'outline':\n return `border ${color === 'default' ? 'border-foreground' : 'border-primary'} ${activeColorMap[color]}`\n case 'ghost':\n return `border border-transparent ${ghostActiveColorMap[color]}`\n case 'default':\n default:\n return `border border-transparent ${activeColorMap[color]}`\n }\n }\n switch (variant) {\n case 'outline':\n return 'border border-border text-text-muted hover:bg-background-muted hover:text-foreground'\n case 'ghost':\n return 'border border-transparent text-text-muted hover:bg-background-muted hover:text-foreground'\n case 'default':\n default:\n return 'border border-transparent text-text-muted hover:bg-background-muted hover:text-foreground'\n }\n}\n\n// ─── Pagination (Root) ───────────────────────────────────\n\nexport interface PaginationProps extends Omit<React.ComponentPropsWithoutRef<'nav'>, 'onChange'> {\n /** Total number of pages */\n total?: number\n /** Controlled active page (1-based) */\n value?: number\n /** Initial page for uncontrolled mode */\n defaultValue?: number\n /** Page change callback */\n onChange?: (page: number) => void\n /** Number of siblings on each side of current page */\n siblings?: number\n /** Number of boundary pages at start/end */\n boundaries?: number\n /** Component size */\n size?: PaginationSize\n /** Visual variant */\n variant?: PaginationVariant\n /** Active page color */\n color?: PaginationColor\n /** Border radius */\n radius?: PaginationRadius\n /** Disable all interactions */\n disabled?: boolean\n /** Show previous/next controls */\n withControls?: boolean\n /** Show first/last controls */\n withEdges?: boolean\n /** Loop from last to first and vice versa */\n loop?: boolean\n}\n\nconst Pagination = React.forwardRef<HTMLElement, PaginationProps>(\n ({\n className,\n total = 1,\n value,\n defaultValue = 1,\n onChange,\n siblings = 1,\n boundaries = 1,\n size = 'default',\n variant = 'default',\n color = 'default',\n radius = 'md',\n disabled = false,\n withControls = true,\n withEdges = false,\n loop = false,\n children,\n ...props\n }, ref) => {\n // Controlled / Uncontrolled\n const [internalPage, setInternalPage] = React.useState(defaultValue)\n const isControlled = value !== undefined\n const page = isControlled ? value : internalPage\n\n const handlePageChange = React.useCallback((newPage: number) => {\n if (disabled) return\n const clamped = Math.max(1, Math.min(total, newPage))\n if (!isControlled) setInternalPage(clamped)\n onChange?.(clamped)\n }, [disabled, total, isControlled, onChange])\n\n const paginationRange = usePagination({ total, siblings, boundaries, page })\n\n const contextValue = React.useMemo<PaginationContextValue>(() => ({\n page,\n total,\n siblings,\n boundaries,\n size,\n variant,\n color,\n radius,\n disabled,\n loop,\n onPageChange: handlePageChange,\n paginationRange,\n }), [page, total, siblings, boundaries, size, variant, color, radius, disabled, loop, handlePageChange, paginationRange])\n\n return (\n <PaginationContext.Provider value={contextValue}>\n <nav\n ref={ref}\n role=\"navigation\"\n aria-label=\"pagination\"\n className={cn('', className)}\n {...props}\n >\n {children ?? (\n <PaginationContent>\n {withEdges && <PaginationItem><PaginationFirst /></PaginationItem>}\n {withControls && <PaginationItem><PaginationPrevious /></PaginationItem>}\n <PaginationItems />\n {withControls && <PaginationItem><PaginationNext /></PaginationItem>}\n {withEdges && <PaginationItem><PaginationLast /></PaginationItem>}\n </PaginationContent>\n )}\n </nav>\n </PaginationContext.Provider>\n )\n }\n)\nPagination.displayName = 'Pagination'\n\n// ─── PaginationContent ───────────────────────────────────\n\nconst PaginationContent = React.forwardRef<HTMLUListElement, React.ComponentPropsWithoutRef<'ul'>>(\n ({ className, ...props }, ref) => {\n const { size } = usePaginationContext()\n const sizeClass = paginationSizeMap[size]\n return (\n <ul\n ref={ref}\n className={cn('flex flex-wrap items-center', sizeClass.gap, className)}\n {...props}\n />\n )\n }\n)\nPaginationContent.displayName = 'PaginationContent'\n\n// ─── PaginationItem ──────────────────────────────────────\n\nconst PaginationItem = React.forwardRef<HTMLLIElement, React.ComponentPropsWithoutRef<'li'>>(\n ({ className, ...props }, ref) => (\n <li ref={ref} className={cn('', className)} {...props} />\n )\n)\nPaginationItem.displayName = 'PaginationItem'\n\n// ─── PaginationLink ──────────────────────────────────────\n\nexport interface PaginationLinkProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Page number this link navigates to */\n page: number\n /** Whether this page is currently active (auto-detected from context if omitted) */\n isActive?: boolean\n}\n\nconst PaginationLink = React.forwardRef<HTMLButtonElement, PaginationLinkProps>(\n ({ className, page: targetPage, isActive: isActiveProp, ...props }, ref) => {\n const ctx = usePaginationContext()\n const isActive = isActiveProp ?? (ctx.page === targetPage)\n const sizeClass = paginationSizeMap[ctx.size]\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-current={isActive ? 'page' : undefined}\n aria-label={`Go to page ${targetPage}`}\n disabled={ctx.disabled}\n onClick={() => ctx.onPageChange(targetPage)}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, isActive, ctx.disabled),\n className\n )}\n {...props}\n >\n {targetPage}\n </button>\n )\n }\n)\nPaginationLink.displayName = 'PaginationLink'\n\n// ─── PaginationPrevious ──────────────────────────────────\n\nexport interface PaginationPreviousProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationPrevious = React.forwardRef<HTMLButtonElement, PaginationPreviousProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || (!ctx.loop && ctx.page <= 1)\n\n const handleClick = () => {\n if (ctx.page <= 1) {\n if (ctx.loop) ctx.onPageChange(ctx.total)\n } else {\n ctx.onPageChange(ctx.page - 1)\n }\n }\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to previous page\"\n disabled={isDisabled}\n onClick={handleClick}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronLeftIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationPrevious.displayName = 'PaginationPrevious'\n\n// ─── PaginationNext ──────────────────────────────────────\n\nexport interface PaginationNextProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationNext = React.forwardRef<HTMLButtonElement, PaginationNextProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || (!ctx.loop && ctx.page >= ctx.total)\n\n const handleClick = () => {\n if (ctx.page >= ctx.total) {\n if (ctx.loop) ctx.onPageChange(1)\n } else {\n ctx.onPageChange(ctx.page + 1)\n }\n }\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to next page\"\n disabled={isDisabled}\n onClick={handleClick}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronRightIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationNext.displayName = 'PaginationNext'\n\n// ─── PaginationFirst ─────────────────────────────────────\n\nexport interface PaginationFirstProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationFirst = React.forwardRef<HTMLButtonElement, PaginationFirstProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || ctx.page <= 1\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to first page\"\n disabled={isDisabled}\n onClick={() => ctx.onPageChange(1)}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronsLeftIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationFirst.displayName = 'PaginationFirst'\n\n// ─── PaginationLast ──────────────────────────────────────\n\nexport interface PaginationLastProps extends React.ComponentPropsWithoutRef<'button'> {\n /** Custom icon */\n icon?: React.ReactNode\n}\n\nconst PaginationLast = React.forwardRef<HTMLButtonElement, PaginationLastProps>(\n ({ className, icon, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n const isDisabled = ctx.disabled || ctx.page >= ctx.total\n\n return (\n <button\n ref={ref}\n type=\"button\"\n aria-label=\"Go to last page\"\n disabled={isDisabled}\n onClick={() => ctx.onPageChange(ctx.total)}\n className={cn(\n paginationItemVariants({ radius: ctx.radius }),\n sizeClass.item,\n getItemClasses(ctx.variant, ctx.color, false, isDisabled),\n className\n )}\n {...props}\n >\n {icon ?? <ChevronsRightIcon className={sizeClass.icon} />}\n </button>\n )\n }\n)\nPaginationLast.displayName = 'PaginationLast'\n\n// ─── PaginationEllipsis ──────────────────────────────────\n\nconst PaginationEllipsis = React.forwardRef<HTMLSpanElement, React.ComponentPropsWithoutRef<'span'>>(\n ({ className, ...props }, ref) => {\n const ctx = usePaginationContext()\n const sizeClass = paginationSizeMap[ctx.size]\n return (\n <span\n ref={ref}\n aria-hidden=\"true\"\n className={cn(\n 'inline-flex items-center justify-center text-text-muted',\n sizeClass.item,\n className\n )}\n {...props}\n >\n <EllipsisIcon className={sizeClass.icon} />\n <span className=\"sr-only\">More pages</span>\n </span>\n )\n }\n)\nPaginationEllipsis.displayName = 'PaginationEllipsis'\n\n// ─── PaginationItems (Convenience) ───────────────────────\n\nconst PaginationItems = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<'div'>>(\n ({ className, ...props }, ref) => {\n const ctx = usePaginationContext()\n return (\n <div ref={ref} className={cn('contents', className)} {...props}>\n {ctx.paginationRange.map((item, index) => (\n <PaginationItem key={`${item}-${index}`}>\n {item === 'dots' ? (\n <PaginationEllipsis />\n ) : (\n <PaginationLink page={item} />\n )}\n </PaginationItem>\n ))}\n </div>\n )\n }\n)\nPaginationItems.displayName = 'PaginationItems'\n\n// ─── Exports ─────────────────────────────────────────────\n\nexport {\n Pagination,\n PaginationContent,\n PaginationItem,\n PaginationLink,\n PaginationPrevious,\n PaginationNext,\n PaginationFirst,\n PaginationLast,\n PaginationEllipsis,\n PaginationItems,\n paginationItemVariants,\n paginationSizeMap,\n}\n"],"mappings":";AAiBM,cAiDF,YAjDE;AAfN,YAAY,WAAW;AACvB,SAAS,WAA8B;AACvC,SAAS,UAAU;AAInB,SAAS,gBAAgB,EAAE,UAAU,GAA2B;AAC9D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,mBAAkB;AAAA;AAAA,EACzE;AAEJ;AAEA,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,gBAAe;AAAA;AAAA,EACtE;AAEJ;AAEA,SAAS,iBAAiB,EAAE,UAAU,GAA2B;AAC/D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,kCAAiC;AAAA;AAAA,EACxF;AAEJ;AAEA,SAAS,kBAAkB,EAAE,UAAU,GAA2B;AAChE,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MACR,QAAO;AAAA,MACP,aAAa;AAAA,MAEb,8BAAC,UAAK,eAAc,SAAQ,gBAAe,SAAQ,GAAE,6BAA4B;AAAA;AAAA,EACnF;AAEJ;AAEA,SAAS,aAAa,EAAE,UAAU,GAA2B;AAC3D,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,MAAK;AAAA,MACL,SAAQ;AAAA,MAER;AAAA,4BAAC,YAAO,IAAG,KAAI,IAAG,MAAK,GAAE,OAAM;AAAA,QAC/B,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA,QAChC,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,OAAM;AAAA;AAAA;AAAA,EAClC;AAEJ;AAiBA,SAAS,MAAM,OAAe,KAAuB;AACnD,QAAM,SAAmB,CAAC;AAC1B,WAAS,IAAI,OAAO,KAAK,KAAK,IAAK,QAAO,KAAK,CAAC;AAChD,SAAO;AACT;AAEO,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA,WAAW;AAAA,EACX,aAAa;AAAA,EACb;AACF,GAAwC;AACtC,MAAI,SAAS,EAAG,QAAO,CAAC;AAExB,QAAM,mBAAmB,WAAW,IAAI,IAAI,aAAa;AACzD,MAAI,oBAAoB,OAAO;AAC7B,WAAO,MAAM,GAAG,KAAK;AAAA,EACvB;AAEA,QAAM,mBAAmB,KAAK,IAAI,OAAO,UAAU,aAAa,CAAC;AACjE,QAAM,oBAAoB,KAAK,IAAI,OAAO,UAAU,QAAQ,UAAU;AAEtE,QAAM,eAAe,mBAAmB,aAAa;AACrD,QAAM,gBAAgB,oBAAoB,QAAQ,aAAa;AAE/D,MAAI,CAAC,gBAAgB,eAAe;AAClC,UAAM,gBAAgB,IAAI,IAAI,WAAW;AACzC,UAAM,YAAY,MAAM,GAAG,aAAa;AACxC,WAAO,CAAC,GAAG,WAAW,QAAiB,GAAG,MAAM,QAAQ,aAAa,GAAG,KAAK,CAAC;AAAA,EAChF;AAEA,MAAI,gBAAgB,CAAC,eAAe;AAClC,UAAM,iBAAiB,IAAI,IAAI,WAAW;AAC1C,UAAM,aAAa,MAAM,QAAQ,iBAAiB,GAAG,KAAK;AAC1D,WAAO,CAAC,GAAG,MAAM,GAAG,UAAU,GAAG,QAAiB,GAAG,UAAU;AAAA,EACjE;AAEA,SAAO;AAAA,IACL,GAAG,MAAM,GAAG,UAAU;AAAA,IACtB;AAAA,IACA,GAAG,MAAM,kBAAkB,iBAAiB;AAAA,IAC5C;AAAA,IACA,GAAG,MAAM,QAAQ,aAAa,GAAG,KAAK;AAAA,EACxC;AACF;AAwBA,MAAM,oBAAoB,MAAM,cAA6C,IAAI;AAEjF,SAAS,uBAAuB;AAC9B,QAAM,MAAM,MAAM,WAAW,iBAAiB;AAC9C,MAAI,CAAC,IAAK,OAAM,IAAI,MAAM,wDAAwD;AAClF,SAAO;AACT;AAIA,MAAM,oBAAoB;AAAA,EACxB,IAAI,EAAE,MAAM,uBAAuB,MAAM,WAAW,KAAK,QAAQ;AAAA,EACjE,IAAI,EAAE,MAAM,uBAAuB,MAAM,WAAW,KAAK,QAAQ;AAAA,EACjE,SAAS,EAAE,MAAM,uBAAuB,MAAM,WAAW,KAAK,QAAQ;AAAA,EACtE,IAAI,EAAE,MAAM,yBAAyB,MAAM,WAAW,KAAK,UAAU;AAAA,EACrE,IAAI,EAAE,MAAM,2BAA2B,MAAM,WAAW,KAAK,UAAU;AACzE;AAIA,MAAM,yBAAyB;AAAA,EAC7B;AAAA,EACA;AAAA,IACE,UAAU;AAAA,MACR,QAAQ;AAAA,QACN,IAAI;AAAA,QACJ,MAAM;AAAA,QACN,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,IAAI;AAAA,QACJ,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,iBAAiB;AAAA,MACf,QAAQ;AAAA,IACV;AAAA,EACF;AACF;AAKA,MAAM,iBAAiB;AAAA,EACrB,SAAS;AAAA,EACT,SAAS;AACX;AAEA,MAAM,sBAAsB;AAAA,EAC1B,SAAS;AAAA,EACT,SAAS;AACX;AAEA,SAAS,eAAe,SAA4B,OAAwB,UAAmB,UAAmB;AAChH,MAAI,UAAU;AACZ,WAAO,YAAY,YACf,iFACA;AAAA,EACN;AACA,MAAI,UAAU;AACZ,YAAQ,SAAS;AAAA,MACf,KAAK;AACH,eAAO,UAAU,UAAU,YAAY,sBAAsB,gBAAgB,IAAI,eAAe,KAAK,CAAC;AAAA,MACxG,KAAK;AACH,eAAO,6BAA6B,oBAAoB,KAAK,CAAC;AAAA,MAChE,KAAK;AAAA,MACL;AACE,eAAO,6BAA6B,eAAe,KAAK,CAAC;AAAA,IAC7D;AAAA,EACF;AACA,UAAQ,SAAS;AAAA,IACf,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AACH,aAAO;AAAA,IACT,KAAK;AAAA,IACL;AACE,aAAO;AAAA,EACX;AACF;AAmCA,MAAM,aAAa,MAAM;AAAA,EACvB,CAAC;AAAA,IACC;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA,WAAW;AAAA,IACX,aAAa;AAAA,IACb,OAAO;AAAA,IACP,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,SAAS;AAAA,IACT,WAAW;AAAA,IACX,eAAe;AAAA,IACf,YAAY;AAAA,IACZ,OAAO;AAAA,IACP;AAAA,IACA,GAAG;AAAA,EACL,GAAG,QAAQ;AAET,UAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,YAAY;AACnE,UAAM,eAAe,UAAU;AAC/B,UAAM,OAAO,eAAe,QAAQ;AAEpC,UAAM,mBAAmB,MAAM,YAAY,CAAC,YAAoB;AAC9D,UAAI,SAAU;AACd,YAAM,UAAU,KAAK,IAAI,GAAG,KAAK,IAAI,OAAO,OAAO,CAAC;AACpD,UAAI,CAAC,aAAc,iBAAgB,OAAO;AAC1C,iBAAW,OAAO;AAAA,IACpB,GAAG,CAAC,UAAU,OAAO,cAAc,QAAQ,CAAC;AAE5C,UAAM,kBAAkB,cAAc,EAAE,OAAO,UAAU,YAAY,KAAK,CAAC;AAE3E,UAAM,eAAe,MAAM,QAAgC,OAAO;AAAA,MAChE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd;AAAA,IACF,IAAI,CAAC,MAAM,OAAO,UAAU,YAAY,MAAM,SAAS,OAAO,QAAQ,UAAU,MAAM,kBAAkB,eAAe,CAAC;AAExH,WACE,oBAAC,kBAAkB,UAAlB,EAA2B,OAAO,cACjC;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,WAAW,GAAG,IAAI,SAAS;AAAA,QAC1B,GAAG;AAAA,QAEH,sBACC,qBAAC,qBACE;AAAA,uBAAa,oBAAC,kBAAe,8BAAC,mBAAgB,GAAE;AAAA,UAChD,gBAAgB,oBAAC,kBAAe,8BAAC,sBAAmB,GAAE;AAAA,UACvD,oBAAC,mBAAgB;AAAA,UAChB,gBAAgB,oBAAC,kBAAe,8BAAC,kBAAe,GAAE;AAAA,UAClD,aAAa,oBAAC,kBAAe,8BAAC,kBAAe,GAAE;AAAA,WAClD;AAAA;AAAA,IAEJ,GACF;AAAA,EAEJ;AACF;AACA,WAAW,cAAc;AAIzB,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,EAAE,KAAK,IAAI,qBAAqB;AACtC,UAAM,YAAY,kBAAkB,IAAI;AACxC,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAW,GAAG,+BAA+B,UAAU,KAAK,SAAS;AAAA,QACpE,GAAG;AAAA;AAAA,IACN;AAAA,EAEJ;AACF;AACA,kBAAkB,cAAc;AAIhC,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QACxB,oBAAC,QAAG,KAAU,WAAW,GAAG,IAAI,SAAS,GAAI,GAAG,OAAO;AAE3D;AACA,eAAe,cAAc;AAW7B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,YAAY,UAAU,cAAc,GAAG,MAAM,GAAG,QAAQ;AAC1E,UAAM,MAAM,qBAAqB;AACjC,UAAM,WAAW,gBAAiB,IAAI,SAAS;AAC/C,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAE5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,gBAAc,WAAW,SAAS;AAAA,QAClC,cAAY,cAAc,UAAU;AAAA,QACpC,UAAU,IAAI;AAAA,QACd,SAAS,MAAM,IAAI,aAAa,UAAU;AAAA,QAC1C,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,UAAU,IAAI,QAAQ;AAAA,UAC7D;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAS7B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAa,CAAC,IAAI,QAAQ,IAAI,QAAQ;AAE7D,UAAM,cAAc,MAAM;AACxB,UAAI,IAAI,QAAQ,GAAG;AACjB,YAAI,IAAI,KAAM,KAAI,aAAa,IAAI,KAAK;AAAA,MAC1C,OAAO;AACL,YAAI,aAAa,IAAI,OAAO,CAAC;AAAA,MAC/B;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBAAQ,oBAAC,mBAAgB,WAAW,UAAU,MAAM;AAAA;AAAA,IACvD;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AASjC,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAa,CAAC,IAAI,QAAQ,IAAI,QAAQ,IAAI;AAEjE,UAAM,cAAc,MAAM;AACxB,UAAI,IAAI,QAAQ,IAAI,OAAO;AACzB,YAAI,IAAI,KAAM,KAAI,aAAa,CAAC;AAAA,MAClC,OAAO;AACL,YAAI,aAAa,IAAI,OAAO,CAAC;AAAA,MAC/B;AAAA,IACF;AAEA,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBAAQ,oBAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA;AAAA,IACxD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAS7B,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAY,IAAI,QAAQ;AAE/C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS,MAAM,IAAI,aAAa,CAAC;AAAA,QACjC,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBAAQ,oBAAC,oBAAiB,WAAW,UAAU,MAAM;AAAA;AAAA,IACxD;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;AAS9B,MAAM,iBAAiB,MAAM;AAAA,EAC3B,CAAC,EAAE,WAAW,MAAM,GAAG,MAAM,GAAG,QAAQ;AACtC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,UAAM,aAAa,IAAI,YAAY,IAAI,QAAQ,IAAI;AAEnD,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS,MAAM,IAAI,aAAa,IAAI,KAAK;AAAA,QACzC,WAAW;AAAA,UACT,uBAAuB,EAAE,QAAQ,IAAI,OAAO,CAAC;AAAA,UAC7C,UAAU;AAAA,UACV,eAAe,IAAI,SAAS,IAAI,OAAO,OAAO,UAAU;AAAA,UACxD;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEH,kBAAQ,oBAAC,qBAAkB,WAAW,UAAU,MAAM;AAAA;AAAA,IACzD;AAAA,EAEJ;AACF;AACA,eAAe,cAAc;AAI7B,MAAM,qBAAqB,MAAM;AAAA,EAC/B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,MAAM,qBAAqB;AACjC,UAAM,YAAY,kBAAkB,IAAI,IAAI;AAC5C,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,eAAY;AAAA,QACZ,WAAW;AAAA,UACT;AAAA,UACA,UAAU;AAAA,UACV;AAAA,QACF;AAAA,QACC,GAAG;AAAA,QAEJ;AAAA,8BAAC,gBAAa,WAAW,UAAU,MAAM;AAAA,UACzC,oBAAC,UAAK,WAAU,WAAU,wBAAU;AAAA;AAAA;AAAA,IACtC;AAAA,EAEJ;AACF;AACA,mBAAmB,cAAc;AAIjC,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,QAAQ;AAChC,UAAM,MAAM,qBAAqB;AACjC,WACE,oBAAC,SAAI,KAAU,WAAW,GAAG,YAAY,SAAS,GAAI,GAAG,OACtD,cAAI,gBAAgB,IAAI,CAAC,MAAM,UAC9B,oBAAC,kBACE,mBAAS,SACR,oBAAC,sBAAmB,IAEpB,oBAAC,kBAAe,MAAM,MAAM,KAJX,GAAG,IAAI,IAAI,KAAK,EAMrC,CACD,GACH;AAAA,EAEJ;AACF;AACA,gBAAgB,cAAc;","names":[]}
|
|
@@ -39,11 +39,12 @@ __export(popover_exports, {
|
|
|
39
39
|
popoverContentVariants: () => popoverContentVariants
|
|
40
40
|
});
|
|
41
41
|
module.exports = __toCommonJS(popover_exports);
|
|
42
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
42
43
|
var React = __toESM(require("react"));
|
|
43
44
|
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"));
|
|
44
45
|
var import_class_variance_authority = require("class-variance-authority");
|
|
45
46
|
var import_utils = require("../../lib/utils");
|
|
46
|
-
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */
|
|
47
|
+
const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
47
48
|
"svg",
|
|
48
49
|
{
|
|
49
50
|
className,
|
|
@@ -51,9 +52,9 @@ const DefaultCloseIcon = ({ className }) => /* @__PURE__ */ React.createElement(
|
|
|
51
52
|
viewBox: "0 0 24 24",
|
|
52
53
|
stroke: "currentColor",
|
|
53
54
|
strokeWidth: 2,
|
|
54
|
-
"aria-hidden": "true"
|
|
55
|
-
|
|
56
|
-
|
|
55
|
+
"aria-hidden": "true",
|
|
56
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 18L18 6M6 6l12 12" })
|
|
57
|
+
}
|
|
57
58
|
);
|
|
58
59
|
const ANIMATION_CLASSES = {
|
|
59
60
|
top: "data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit",
|
|
@@ -62,7 +63,7 @@ const ANIMATION_CLASSES = {
|
|
|
62
63
|
right: "data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit"
|
|
63
64
|
};
|
|
64
65
|
const popoverContentVariants = (0, import_class_variance_authority.cva)(
|
|
65
|
-
"relative z-popover font-normal select-none w-auto max-w-[calc(100vw-16px)] outline-none",
|
|
66
|
+
"relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none",
|
|
66
67
|
{
|
|
67
68
|
variants: {
|
|
68
69
|
variant: {
|
|
@@ -89,7 +90,7 @@ const CSS_ARROW_CLASSES = {
|
|
|
89
90
|
};
|
|
90
91
|
const ARROW_ELEVATED = "fill-background-paper drop-shadow-sm";
|
|
91
92
|
function Popover(props) {
|
|
92
|
-
return /* @__PURE__ */
|
|
93
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { ...props });
|
|
93
94
|
}
|
|
94
95
|
const PopoverTrigger = PopoverPrimitive.Trigger;
|
|
95
96
|
const PopoverPortal = PopoverPrimitive.Portal;
|
|
@@ -98,7 +99,7 @@ const PopoverClose = PopoverPrimitive.Close;
|
|
|
98
99
|
const PopoverContent = React.forwardRef(({ className, variant = "default", size, side = "bottom", sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {
|
|
99
100
|
const resolvedSide = side;
|
|
100
101
|
const resolvedOffset = sideOffset ?? (variant === "default" && showArrow ? 12 : 6);
|
|
101
|
-
return /* @__PURE__ */
|
|
102
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
|
|
102
103
|
PopoverPrimitive.Content,
|
|
103
104
|
{
|
|
104
105
|
ref,
|
|
@@ -109,38 +110,40 @@ const PopoverContent = React.forwardRef(({ className, variant = "default", size,
|
|
|
109
110
|
ANIMATION_CLASSES[resolvedSide],
|
|
110
111
|
className
|
|
111
112
|
),
|
|
112
|
-
...props
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
113
|
+
...props,
|
|
114
|
+
children: [
|
|
115
|
+
showClose && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
116
|
+
PopoverPrimitive.Close,
|
|
117
|
+
{
|
|
118
|
+
className: "absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring",
|
|
119
|
+
"aria-label": "Close",
|
|
120
|
+
children: closeIcon || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultCloseIcon, { className: "icon-sm" })
|
|
121
|
+
}
|
|
122
|
+
),
|
|
123
|
+
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "min-h-0 overflow-y-auto -m-1 p-1", children }),
|
|
124
|
+
showArrow && variant === "default" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
125
|
+
"div",
|
|
126
|
+
{
|
|
127
|
+
className: (0, import_utils.cn)(
|
|
128
|
+
"absolute w-2.5 h-2.5 rotate-45 bg-background-paper",
|
|
129
|
+
CSS_ARROW_CLASSES[resolvedSide]
|
|
130
|
+
)
|
|
131
|
+
}
|
|
132
|
+
),
|
|
133
|
+
showArrow && variant === "elevated" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
134
|
+
PopoverPrimitive.Arrow,
|
|
135
|
+
{
|
|
136
|
+
className: ARROW_ELEVATED,
|
|
137
|
+
width: 12,
|
|
138
|
+
height: 6
|
|
139
|
+
}
|
|
129
140
|
)
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
PopoverPrimitive.Arrow,
|
|
134
|
-
{
|
|
135
|
-
className: ARROW_ELEVATED,
|
|
136
|
-
width: 12,
|
|
137
|
-
height: 6
|
|
138
|
-
}
|
|
139
|
-
)
|
|
140
|
-
));
|
|
141
|
+
]
|
|
142
|
+
}
|
|
143
|
+
) });
|
|
141
144
|
});
|
|
142
145
|
PopoverContent.displayName = "PopoverContent";
|
|
143
|
-
const PopoverArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */
|
|
146
|
+
const PopoverArrow = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
144
147
|
PopoverPrimitive.Arrow,
|
|
145
148
|
{
|
|
146
149
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n top: 'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n left: 'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n right: 'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n 'relative z-popover font-normal select-none w-auto max-w-[calc(100vw-16px)] outline-none',\n {\n variants: {\n variant: {\n default: 'bg-background-paper text-foreground border border-border shadow-lg',\n elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n },\n size: {\n sm: 'text-sm p-3 rounded-lg',\n default: 'text-sm p-4 rounded-xl',\n lg: 'text-md p-5 rounded-xl',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverProps) {\n return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n VariantProps<typeof popoverContentVariants> {\n /** Show arrow pointing to trigger */\n showArrow?: boolean\n /** Show built-in close button */\n showClose?: boolean\n /** Custom close icon (replaces default X icon) */\n closeIcon?: React.ReactNode\n}\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {\n const resolvedSide = side as PopoverSide\n // CSS arrow (default) needs more gap since it doesn't occupy layout space\n const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n side={side}\n sideOffset={resolvedOffset}\n className={cn(\n popoverContentVariants({ variant, size }),\n ANIMATION_CLASSES[resolvedSide],\n className,\n )}\n {...props}\n >\n {showClose && (\n <PopoverPrimitive.Close\n className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n aria-label=\"Close\"\n >\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n </PopoverPrimitive.Close>\n )}\n {children}\n {showArrow && variant === 'default' && (\n <div\n className={cn(\n 'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n CSS_ARROW_CLASSES[resolvedSide],\n )}\n />\n )}\n {showArrow && variant === 'elevated' && (\n <PopoverPrimitive.Arrow\n className={ARROW_ELEVATED}\n width={12}\n height={6}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <PopoverPrimitive.Arrow\n ref={ref}\n className={cn('fill-background-paper', className)}\n width={10}\n height={5}\n {...props}\n />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Popover,\n PopoverTrigger,\n PopoverContent,\n PopoverArrow,\n PopoverClose,\n PopoverAnchor,\n PopoverPortal,\n popoverContentVariants,\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/popover.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport * as PopoverPrimitive from '@radix-ui/react-popover'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// ─── Default Close Icon (built-in, no external dependency) ──\nconst DefaultCloseIcon = ({ className }: { className?: string }) => (\n <svg\n className={className}\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n stroke=\"currentColor\"\n strokeWidth={2}\n aria-hidden=\"true\"\n >\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M6 18L18 6M6 6l12 12\" />\n </svg>\n)\n\n// ─── Types ──────────────────────────────────────────────────\nexport type PopoverSide = 'top' | 'right' | 'bottom' | 'left'\n\n// ─── Animation class mapping (static strings for Tailwind scanner) ──\nconst ANIMATION_CLASSES: Record<PopoverSide, string> = {\n top: 'data-[state=open]:animate-popover-top-enter data-[state=closed]:animate-popover-top-exit',\n bottom: 'data-[state=open]:animate-popover-bottom-enter data-[state=closed]:animate-popover-bottom-exit',\n left: 'data-[state=open]:animate-popover-left-enter data-[state=closed]:animate-popover-left-exit',\n right: 'data-[state=open]:animate-popover-right-enter data-[state=closed]:animate-popover-right-exit',\n}\n\n// ─── Content variants ────────────────────────────────────────\nconst popoverContentVariants = cva(\n 'relative z-popover flex flex-col font-normal select-none w-auto max-w-[calc(100vw-16px)] max-h-[var(--radix-popover-content-available-height)] outline-none',\n {\n variants: {\n variant: {\n default: 'bg-background-paper text-foreground border border-border shadow-lg',\n elevated: 'bg-background-paper/95 text-foreground border border-border-subtle shadow-xl backdrop-blur-sm',\n },\n size: {\n sm: 'text-sm p-3 rounded-lg',\n default: 'text-sm p-4 rounded-xl',\n lg: 'text-md p-5 rounded-xl',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n)\n\n// ─── Arrow styles ──────────────────────────────────────────────\n// default: CSS rotated square with 2-side border (seamless connection)\n// elevated: Radix SVG arrow with drop-shadow (glassmorphism, subtle border)\nconst CSS_ARROW_CLASSES: Record<PopoverSide, string> = {\n bottom: '-top-[5px] left-1/2 -translate-x-1/2 border-t border-l border-border',\n top: '-bottom-[5px] left-1/2 -translate-x-1/2 border-b border-r border-border',\n right: '-left-[5px] top-1/2 -translate-y-1/2 border-b border-l border-border',\n left: '-right-[5px] top-1/2 -translate-y-1/2 border-t border-r border-border',\n}\n\nconst ARROW_ELEVATED = 'fill-background-paper drop-shadow-sm'\n\n// ═══════════════════════════════════════════════════════════════\n// Popover\n// ═══════════════════════════════════════════════════════════════\n\n// ─── Popover (Root) — wrapper to keep our own component identity separate from Radix primitive ──\nexport interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {}\n\nfunction Popover(props: PopoverProps) {\n return <PopoverPrimitive.Root {...props} />\n}\n\n// ─── PopoverTrigger ──────────────────────────────────────────\nconst PopoverTrigger = PopoverPrimitive.Trigger\n\n// ─── PopoverPortal ───────────────────────────────────────────\nconst PopoverPortal = PopoverPrimitive.Portal\n\n// ─── PopoverAnchor ───────────────────────────────────────────\nconst PopoverAnchor = PopoverPrimitive.Anchor\n\n// ─── PopoverClose ────────────────────────────────────────────\nconst PopoverClose = PopoverPrimitive.Close\n\n// ─── PopoverContent ──────────────────────────────────────────\nexport interface PopoverContentProps\n extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>,\n VariantProps<typeof popoverContentVariants> {\n /** Show arrow pointing to trigger */\n showArrow?: boolean\n /** Show built-in close button */\n showClose?: boolean\n /** Custom close icon (replaces default X icon) */\n closeIcon?: React.ReactNode\n}\n\nconst PopoverContent = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Content>,\n PopoverContentProps\n>(({ className, variant = 'default', size, side = 'bottom', sideOffset, showArrow = true, showClose = false, closeIcon, children, ...props }, ref) => {\n const resolvedSide = side as PopoverSide\n // CSS arrow (default) needs more gap since it doesn't occupy layout space\n const resolvedOffset = sideOffset ?? (variant === 'default' && showArrow ? 12 : 6)\n\n return (\n <PopoverPrimitive.Portal>\n <PopoverPrimitive.Content\n ref={ref}\n side={side}\n sideOffset={resolvedOffset}\n className={cn(\n popoverContentVariants({ variant, size }),\n ANIMATION_CLASSES[resolvedSide],\n className,\n )}\n {...props}\n >\n {showClose && (\n <PopoverPrimitive.Close\n className=\"absolute top-3 right-3 rounded-md p-1 text-text-muted hover:text-foreground hover:bg-background-muted transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring\"\n aria-label=\"Close\"\n >\n {closeIcon || <DefaultCloseIcon className=\"icon-sm\" />}\n </PopoverPrimitive.Close>\n )}\n {/* Scrolls when taller than the viewport space; lives inside Content so the arrow is not clipped.\n -m-1 p-1 keeps children's focus rings inside the scroll area */}\n <div className=\"min-h-0 overflow-y-auto -m-1 p-1\">\n {children}\n </div>\n {showArrow && variant === 'default' && (\n <div\n className={cn(\n 'absolute w-2.5 h-2.5 rotate-45 bg-background-paper',\n CSS_ARROW_CLASSES[resolvedSide],\n )}\n />\n )}\n {showArrow && variant === 'elevated' && (\n <PopoverPrimitive.Arrow\n className={ARROW_ELEVATED}\n width={12}\n height={6}\n />\n )}\n </PopoverPrimitive.Content>\n </PopoverPrimitive.Portal>\n )\n})\nPopoverContent.displayName = 'PopoverContent'\n\n// ─── PopoverArrow (standalone, for manual placement outside Content) ──\nconst PopoverArrow = React.forwardRef<\n React.ElementRef<typeof PopoverPrimitive.Arrow>,\n React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Arrow>\n>(({ className, ...props }, ref) => (\n <PopoverPrimitive.Arrow\n ref={ref}\n className={cn('fill-background-paper', className)}\n width={10}\n height={5}\n {...props}\n />\n))\nPopoverArrow.displayName = 'PopoverArrow'\n\n// ─── Exports ────────────────────────────────────────────────\nexport {\n Popover,\n PopoverTrigger,\n PopoverContent,\n PopoverArrow,\n PopoverClose,\n PopoverAnchor,\n PopoverPortal,\n popoverContentVariants,\n}\n"],"mappings":"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","names":[]}
|