@pycolors/ui 1.2.5 → 1.3.0
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.
|
@@ -16,22 +16,54 @@ export interface PaginationLinkProps extends React.ComponentPropsWithoutRef<"but
|
|
|
16
16
|
* Defaults to "icon-sm" for compact pagination.
|
|
17
17
|
*/
|
|
18
18
|
size?: ButtonProps["size"];
|
|
19
|
+
/**
|
|
20
|
+
* Render the control as a Slot wrapper so a real link element can be
|
|
21
|
+
* supplied as the child while keeping all pagination styling.
|
|
22
|
+
*
|
|
23
|
+
* @example
|
|
24
|
+
* <PaginationLink asChild isActive>
|
|
25
|
+
* <a href="/page/2">2</a>
|
|
26
|
+
* </PaginationLink>
|
|
27
|
+
*/
|
|
28
|
+
asChild?: boolean;
|
|
19
29
|
}
|
|
20
|
-
export declare
|
|
30
|
+
export declare const PaginationLink: React.ForwardRefExoticComponent<PaginationLinkProps & React.RefAttributes<HTMLButtonElement>>;
|
|
21
31
|
export interface PaginationPreviousProps extends React.ComponentPropsWithoutRef<"button"> {
|
|
22
32
|
/**
|
|
23
33
|
* Optional label for accessibility and i18n.
|
|
24
34
|
*/
|
|
25
35
|
label?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Render the control as a Slot wrapper so a real link element can be
|
|
38
|
+
* supplied as the child while keeping all pagination styling, the built-in
|
|
39
|
+
* ChevronLeft icon, and the visible "Previous" text.
|
|
40
|
+
*
|
|
41
|
+
* @example
|
|
42
|
+
* <PaginationPrevious asChild>
|
|
43
|
+
* <a href="/page/1" />
|
|
44
|
+
* </PaginationPrevious>
|
|
45
|
+
*/
|
|
46
|
+
asChild?: boolean;
|
|
26
47
|
}
|
|
27
|
-
export declare
|
|
48
|
+
export declare const PaginationPrevious: React.ForwardRefExoticComponent<PaginationPreviousProps & React.RefAttributes<HTMLButtonElement>>;
|
|
28
49
|
export interface PaginationNextProps extends React.ComponentPropsWithoutRef<"button"> {
|
|
29
50
|
/**
|
|
30
51
|
* Optional label for accessibility and i18n.
|
|
31
52
|
*/
|
|
32
53
|
label?: string;
|
|
54
|
+
/**
|
|
55
|
+
* Render the control as a Slot wrapper so a real link element can be
|
|
56
|
+
* supplied as the child while keeping all pagination styling, the built-in
|
|
57
|
+
* ChevronRight icon, and the visible "Next" text.
|
|
58
|
+
*
|
|
59
|
+
* @example
|
|
60
|
+
* <PaginationNext asChild>
|
|
61
|
+
* <a href="/page/3" />
|
|
62
|
+
* </PaginationNext>
|
|
63
|
+
*/
|
|
64
|
+
asChild?: boolean;
|
|
33
65
|
}
|
|
34
|
-
export declare
|
|
66
|
+
export declare const PaginationNext: React.ForwardRefExoticComponent<PaginationNextProps & React.RefAttributes<HTMLButtonElement>>;
|
|
35
67
|
export interface PaginationEllipsisProps extends React.ComponentPropsWithoutRef<"span"> {
|
|
36
68
|
/**
|
|
37
69
|
* Accessible label read by screen readers.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,aAAa,CAAC;AAUvD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAEpE,wBAAgB,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CASlE;AAED,MAAM,MAAM,sBAAsB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;AAE1E,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAQxB;AAED,MAAM,MAAM,mBAAmB,GAAG,KAAK,CAAC,wBAAwB,CAAC,IAAI,CAAC,CAAC;AAEvE,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,mBAAmB,2CAQ1E;AAED,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IACnF;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAC3B;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,+FAoBzB,CAAC;AAEH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IACvF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,kBAAkB,mGAwB7B,CAAC;AAEH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,QAAQ,CAAC;IACnF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;OASG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,cAAc,+FAwBzB,CAAC;AAEH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,wBAAwB,CAAC,MAAM,CAAC;IACrF;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,KAAoB,EACpB,GAAG,KAAK,EACT,EAAE,uBAAuB,2CAczB;AASD,MAAM,MAAM,eAAe,GACvB;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,GACnD;IAAE,IAAI,EAAE,UAAU,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAE,CAAC;AAEtC,wBAAgB,oBAAoB,CAAC,IAAI,EAAE;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,GAAG,eAAe,EAAE,CAyEpB"}
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from "react";
|
|
2
3
|
import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react";
|
|
4
|
+
import { Slottable } from "@radix-ui/react-slot";
|
|
3
5
|
import { Button } from "./button.js";
|
|
4
6
|
import { cn } from "../../lib/utils.js";
|
|
5
7
|
export function Pagination({ className, ...props }) {
|
|
@@ -11,17 +13,15 @@ export function PaginationContent({ className, ...props }) {
|
|
|
11
13
|
export function PaginationItem({ className, ...props }) {
|
|
12
14
|
return (_jsx("li", { "data-slot": "pagination-item", className: cn("list-none", className), ...props }));
|
|
13
15
|
}
|
|
14
|
-
export function PaginationLink({ className, isActive = false, size = "icon-sm", ...props }) {
|
|
15
|
-
return (_jsx(Button, { "data-slot": "pagination-link", type: "button", variant: isActive ? "secondary" : "outline", size: size, "aria-current": isActive ? "page" : undefined, className: cn("min-w-8 px-2",
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
return (_jsxs(Button, { "data-slot": "pagination-next", type: "button", variant: "outline", size: "sm", "aria-label": label, className: cn("gap-2 px-3", className), ...props, children: [_jsx("span", { className: "hidden sm:inline", children: "Next" }), _jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" })] }));
|
|
24
|
-
}
|
|
16
|
+
export const PaginationLink = React.forwardRef(function PaginationLink({ className, isActive = false, size = "icon-sm", asChild = false, ...props }, ref) {
|
|
17
|
+
return (_jsx(Button, { ref: ref, "data-slot": "pagination-link", type: asChild ? undefined : "button", asChild: asChild, variant: isActive ? "secondary" : "outline", size: size, "aria-current": isActive ? "page" : undefined, className: cn("min-w-8 px-2", isActive && "font-semibold", className), ...props }));
|
|
18
|
+
});
|
|
19
|
+
export const PaginationPrevious = React.forwardRef(function PaginationPrevious({ className, label = "Previous page", asChild = false, children, ...props }, ref) {
|
|
20
|
+
return (_jsxs(Button, { ref: ref, "data-slot": "pagination-previous", type: asChild ? undefined : "button", asChild: asChild, variant: "outline", size: "sm", "aria-label": label, className: cn("gap-2 px-3", className), ...props, children: [asChild ? _jsx(Slottable, { children: children }) : null, _jsx(ChevronLeft, { className: "h-4 w-4", "aria-hidden": "true" }), _jsx("span", { className: "hidden sm:inline", children: "Previous" })] }));
|
|
21
|
+
});
|
|
22
|
+
export const PaginationNext = React.forwardRef(function PaginationNext({ className, label = "Next page", asChild = false, children, ...props }, ref) {
|
|
23
|
+
return (_jsxs(Button, { ref: ref, "data-slot": "pagination-next", type: asChild ? undefined : "button", asChild: asChild, variant: "outline", size: "sm", "aria-label": label, className: cn("gap-2 px-3", className), ...props, children: [asChild ? _jsx(Slottable, { children: children }) : null, _jsx("span", { className: "hidden sm:inline", children: "Next" }), _jsx(ChevronRight, { className: "h-4 w-4", "aria-hidden": "true" })] }));
|
|
24
|
+
});
|
|
25
25
|
export function PaginationEllipsis({ className, label = "More pages", ...props }) {
|
|
26
26
|
return (_jsxs("span", { "data-slot": "pagination-ellipsis", className: cn("flex h-8 w-8 items-center justify-center text-muted-foreground", className), ...props, children: [_jsx(MoreHorizontal, { className: "h-4 w-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: label })] }));
|
|
27
27
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pycolors/ui",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.3.0",
|
|
4
4
|
"description": "Production-ready UI primitives for modern SaaS apps (Radix + Tailwind-friendly).",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"pycolors",
|
|
@@ -64,7 +64,7 @@
|
|
|
64
64
|
"tailwind-merge": "^3.4.0"
|
|
65
65
|
},
|
|
66
66
|
"devDependencies": {
|
|
67
|
-
"@pycolors/eslint-config": "^1.0.
|
|
67
|
+
"@pycolors/eslint-config": "^1.0.5",
|
|
68
68
|
"@pycolors/typescript-config": "^1.0.0",
|
|
69
69
|
"@storybook/addon-a11y": "^10.5.9",
|
|
70
70
|
"@storybook/react-vite": "^10.5.9",
|
|
@@ -78,7 +78,7 @@
|
|
|
78
78
|
"jsdom": "^29.1.1",
|
|
79
79
|
"storybook": "^10.5.9",
|
|
80
80
|
"tailwindcss": "^4.3.0",
|
|
81
|
-
"typescript": "
|
|
81
|
+
"typescript": "6.0.3",
|
|
82
82
|
"vite": "^8.1.4",
|
|
83
83
|
"vitest": "^4.1.10",
|
|
84
84
|
"vitest-axe": "1.0.0-pre.5",
|