@docubook/ui-react 2.0.0-beta.2 → 2.0.0-beta.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base/pagination.d.ts +1 -0
- package/dist/pagination.js +69 -42
- package/dist/pagination.js.map +1 -1
- package/package.json +14 -14
package/dist/pagination.js
CHANGED
|
@@ -1,60 +1,87 @@
|
|
|
1
1
|
import { cn as e } from "./cn.js";
|
|
2
|
-
import {
|
|
2
|
+
import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
|
|
3
3
|
//#region src/base/pagination.tsx
|
|
4
|
-
function
|
|
5
|
-
|
|
4
|
+
function i({ direction: i, label: a, title: o, description: s, icon: c }) {
|
|
5
|
+
let l = i === "prev", u = /* @__PURE__ */ r("div", {
|
|
6
|
+
className: e("text-primary/75 flex items-center gap-1.5 text-sm", l ? "pr-5 pl-3" : "pr-3 pl-5"),
|
|
7
|
+
children: [
|
|
8
|
+
l && c && /* @__PURE__ */ n("span", {
|
|
9
|
+
className: "flex shrink-0 items-center",
|
|
10
|
+
children: c
|
|
11
|
+
}),
|
|
12
|
+
/* @__PURE__ */ n("span", {
|
|
13
|
+
"data-component-part": "pagination-label",
|
|
14
|
+
children: a
|
|
15
|
+
}),
|
|
16
|
+
!l && c && /* @__PURE__ */ n("span", {
|
|
17
|
+
className: "flex shrink-0 items-center",
|
|
18
|
+
children: c
|
|
19
|
+
})
|
|
20
|
+
]
|
|
21
|
+
}), d = /* @__PURE__ */ r("div", {
|
|
22
|
+
className: e("flex min-w-0 flex-col justify-center px-5", l ? "items-start text-left" : "items-end text-right"),
|
|
23
|
+
children: [/* @__PURE__ */ n("div", {
|
|
24
|
+
"data-component-part": "pagination-title",
|
|
25
|
+
className: "text-primary w-full truncate text-sm font-semibold",
|
|
26
|
+
children: o
|
|
27
|
+
}), s && /* @__PURE__ */ n("span", {
|
|
28
|
+
"data-component-part": "pagination-description",
|
|
29
|
+
className: "text-primary/75 hidden w-full max-w-72 truncate text-xs sm:block",
|
|
30
|
+
children: s
|
|
31
|
+
})]
|
|
32
|
+
});
|
|
33
|
+
return /* @__PURE__ */ n("div", {
|
|
34
|
+
className: e("bg-primary/15 hover:bg-primary/20 hover:ring-primary/30 flex h-16 flex-1 items-center rounded-xl transition-shadow hover:ring-1", l ? "justify-start" : "justify-end"),
|
|
35
|
+
children: l ? /* @__PURE__ */ r(t, { children: [
|
|
36
|
+
u,
|
|
37
|
+
/* @__PURE__ */ n("div", { className: "bg-primary/20 h-8 w-px" }),
|
|
38
|
+
d
|
|
39
|
+
] }) : /* @__PURE__ */ r(t, { children: [
|
|
40
|
+
d,
|
|
41
|
+
/* @__PURE__ */ n("div", { className: "bg-primary/20 h-8 w-px" }),
|
|
42
|
+
u
|
|
43
|
+
] })
|
|
44
|
+
});
|
|
45
|
+
}
|
|
46
|
+
function a({ prev: a, next: o, className: s, prevIcon: c, nextIcon: l, linkClassName: u }) {
|
|
47
|
+
return /* @__PURE__ */ r("nav", {
|
|
6
48
|
id: "pagination",
|
|
7
49
|
"aria-label": "Pagination",
|
|
8
|
-
className: e("bg-base-200/50 flex w-full gap-1 rounded-2xl p-1",
|
|
9
|
-
children: [
|
|
10
|
-
href:
|
|
50
|
+
className: e("bg-base-200/50 flex w-full gap-1 rounded-2xl p-1", s),
|
|
51
|
+
children: [a && /* @__PURE__ */ n("a", {
|
|
52
|
+
href: a.href,
|
|
11
53
|
rel: "prev",
|
|
12
54
|
"data-component-part": "pagination-prev",
|
|
13
|
-
className: e("group text-muted-foreground hover:bg-base-200/60 hover:text-base-content flex items-center justify-start gap-1.5 rounded-xl px-3 py-3 text-sm
|
|
14
|
-
children:
|
|
55
|
+
className: e("group min-w-0 rounded-xl no-underline", o ? "text-muted-foreground hover:bg-base-200/60 hover:text-base-content flex w-[calc(30%-2px)] items-center justify-start gap-1.5 rounded-xl px-3 py-3 text-sm transition-colors" : "w-full sm:mr-auto sm:w-1/2", u),
|
|
56
|
+
children: o ? /* @__PURE__ */ r(t, { children: [c && /* @__PURE__ */ n("span", {
|
|
15
57
|
className: "flex shrink-0 items-center",
|
|
16
|
-
children:
|
|
17
|
-
}), /* @__PURE__ */
|
|
58
|
+
children: c
|
|
59
|
+
}), /* @__PURE__ */ n("span", {
|
|
18
60
|
"data-component-part": "pagination-label",
|
|
19
61
|
children: "Previous"
|
|
20
|
-
})]
|
|
21
|
-
|
|
22
|
-
|
|
62
|
+
})] }) : /* @__PURE__ */ n(i, {
|
|
63
|
+
direction: "prev",
|
|
64
|
+
label: "Previous",
|
|
65
|
+
title: a.title,
|
|
66
|
+
description: a.description,
|
|
67
|
+
icon: c
|
|
68
|
+
})
|
|
69
|
+
}), o && /* @__PURE__ */ n("a", {
|
|
70
|
+
href: o.href,
|
|
23
71
|
rel: "next",
|
|
24
72
|
"data-component-part": "pagination-next",
|
|
25
|
-
className: e("group min-w-0 rounded-xl no-underline",
|
|
26
|
-
children: /* @__PURE__ */ n(
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"data-component-part": "pagination-title",
|
|
33
|
-
className: "text-primary w-full truncate text-right text-sm font-semibold",
|
|
34
|
-
children: i.title
|
|
35
|
-
}), i.description && /* @__PURE__ */ t("span", {
|
|
36
|
-
"data-component-part": "pagination-description",
|
|
37
|
-
className: "text-primary/75 hidden w-full max-w-72 truncate text-right text-xs sm:block",
|
|
38
|
-
children: i.description
|
|
39
|
-
})]
|
|
40
|
-
}),
|
|
41
|
-
/* @__PURE__ */ t("div", { className: "bg-primary/20 h-8 w-px" }),
|
|
42
|
-
/* @__PURE__ */ n("div", {
|
|
43
|
-
className: "text-primary/75 flex items-center gap-1.5 pr-3 pl-5 text-sm",
|
|
44
|
-
children: [/* @__PURE__ */ t("span", {
|
|
45
|
-
"data-component-part": "pagination-label",
|
|
46
|
-
children: "Next"
|
|
47
|
-
}), s && /* @__PURE__ */ t("span", {
|
|
48
|
-
className: "flex shrink-0 items-center",
|
|
49
|
-
children: s
|
|
50
|
-
})]
|
|
51
|
-
})
|
|
52
|
-
]
|
|
73
|
+
className: e("group min-w-0 rounded-xl no-underline", a ? "w-[calc(70%-2px)]" : "w-full sm:ml-auto sm:w-1/2", u),
|
|
74
|
+
children: /* @__PURE__ */ n(i, {
|
|
75
|
+
direction: "next",
|
|
76
|
+
label: "Next",
|
|
77
|
+
title: o.title,
|
|
78
|
+
description: o.description,
|
|
79
|
+
icon: l
|
|
53
80
|
})
|
|
54
81
|
})]
|
|
55
82
|
});
|
|
56
83
|
}
|
|
57
84
|
//#endregion
|
|
58
|
-
export {
|
|
85
|
+
export { a as PaginationDocs };
|
|
59
86
|
|
|
60
87
|
//# sourceMappingURL=pagination.js.map
|
package/dist/pagination.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pagination.js","names":[],"sources":["../src/base/pagination.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\nimport type { ReactNode } from \"react\";\n\nexport interface PaginationDocsProps {\n prev?: { href: string; title: string };\n next?: { href: string; title: string; description?: string };\n className?: string;\n prevIcon?: ReactNode;\n nextIcon?: ReactNode;\n linkClassName?: string;\n}\n\nexport function PaginationDocs({\n prev,\n next,\n className,\n prevIcon,\n nextIcon,\n linkClassName,\n}: PaginationDocsProps) {\n return (\n <nav\n id=\"pagination\"\n aria-label=\"Pagination\"\n className={cn(\"bg-base-200/50 flex w-full gap-1 rounded-2xl p-1\", className)}\n >\n {prev && (\n <a\n href={prev.href}\n rel=\"prev\"\n data-component-part=\"pagination-prev\"\n className={cn(\n \"group text-muted-foreground hover:bg-base-200/60 hover:text-base-content flex items-center justify-start gap-1.5 rounded-xl px-3 py-3 text-sm
|
|
1
|
+
{"version":3,"file":"pagination.js","names":[],"sources":["../src/base/pagination.tsx"],"sourcesContent":["import { cn } from \"../utils/cn\";\nimport type { ReactNode } from \"react\";\n\nexport interface PaginationDocsProps {\n prev?: { href: string; title: string; description?: string };\n next?: { href: string; title: string; description?: string };\n className?: string;\n prevIcon?: ReactNode;\n nextIcon?: ReactNode;\n linkClassName?: string;\n}\n\ninterface PaginationCardProps {\n direction: \"prev\" | \"next\";\n label: string;\n title: string;\n description?: string;\n icon?: ReactNode;\n}\n\nfunction PaginationCard({ direction, label, title, description, icon }: PaginationCardProps) {\n const isPrevious = direction === \"prev\";\n\n const labelNode = (\n <div\n className={cn(\n \"text-primary/75 flex items-center gap-1.5 text-sm\",\n isPrevious ? \"pr-5 pl-3\" : \"pr-3 pl-5\"\n )}\n >\n {isPrevious && icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n <span data-component-part=\"pagination-label\">{label}</span>\n {!isPrevious && icon && <span className=\"flex shrink-0 items-center\">{icon}</span>}\n </div>\n );\n\n const metaNode = (\n <div\n className={cn(\n \"flex min-w-0 flex-col justify-center px-5\",\n isPrevious ? \"items-start text-left\" : \"items-end text-right\"\n )}\n >\n <div\n data-component-part=\"pagination-title\"\n className=\"text-primary w-full truncate text-sm font-semibold\"\n >\n {title}\n </div>\n {description && (\n <span\n data-component-part=\"pagination-description\"\n className=\"text-primary/75 hidden w-full max-w-72 truncate text-xs sm:block\"\n >\n {description}\n </span>\n )}\n </div>\n );\n\n return (\n <div\n className={cn(\n \"bg-primary/15 hover:bg-primary/20 hover:ring-primary/30 flex h-16 flex-1 items-center rounded-xl transition-shadow hover:ring-1\",\n isPrevious ? \"justify-start\" : \"justify-end\"\n )}\n >\n {isPrevious ? (\n <>\n {labelNode}\n <div className=\"bg-primary/20 h-8 w-px\" />\n {metaNode}\n </>\n ) : (\n <>\n {metaNode}\n <div className=\"bg-primary/20 h-8 w-px\" />\n {labelNode}\n </>\n )}\n </div>\n );\n}\n\nexport function PaginationDocs({\n prev,\n next,\n className,\n prevIcon,\n nextIcon,\n linkClassName,\n}: PaginationDocsProps) {\n return (\n <nav\n id=\"pagination\"\n aria-label=\"Pagination\"\n className={cn(\"bg-base-200/50 flex w-full gap-1 rounded-2xl p-1\", className)}\n >\n {prev && (\n <a\n href={prev.href}\n rel=\"prev\"\n data-component-part=\"pagination-prev\"\n className={cn(\n \"group min-w-0 rounded-xl no-underline\",\n next\n ? // Paired with next: minimal link by design (30% of the pill).\n \"text-muted-foreground hover:bg-base-200/60 hover:text-base-content flex w-[calc(30%-2px)] items-center justify-start gap-1.5 rounded-xl px-3 py-3 text-sm transition-colors\"\n : // Alone (last page, no next): rich card mirroring the next-only\n // variant — full width on mobile, half the container above\n // 640px, pushed left like a back button.\n \"w-full sm:mr-auto sm:w-1/2\",\n linkClassName\n )}\n >\n {next ? (\n <>\n {prevIcon && <span className=\"flex shrink-0 items-center\">{prevIcon}</span>}\n <span data-component-part=\"pagination-label\">Previous</span>\n </>\n ) : (\n <PaginationCard\n direction=\"prev\"\n label=\"Previous\"\n title={prev.title}\n description={prev.description}\n icon={prevIcon}\n />\n )}\n </a>\n )}\n {next && (\n <a\n href={next.href}\n rel=\"next\"\n data-component-part=\"pagination-next\"\n className={cn(\n \"group min-w-0 rounded-xl no-underline\",\n // Next-only (e.g. docs index): full width on mobile, half the\n // container above 640px — pushed right like a forward button.\n // With prev: calc-based 70% (minus half the gap) so the pair\n // always fills the pill without overlapping.\n prev ? \"w-[calc(70%-2px)]\" : \"w-full sm:ml-auto sm:w-1/2\",\n linkClassName\n )}\n >\n <PaginationCard\n direction=\"next\"\n label=\"Next\"\n title={next.title}\n description={next.description}\n icon={nextIcon}\n />\n </a>\n )}\n </nav>\n );\n}\n"],"mappings":";;;AAoBA,SAAS,EAAe,EAAE,cAAW,UAAO,UAAO,gBAAa,WAA6B;CAC3F,IAAM,IAAa,MAAc,QAE3B,IACJ,kBAAC,OAAD;EACE,WAAW,EACT,qDACA,IAAa,cAAc,WAC7B;EAJF,UAAA;GAMG,KAAc,KAAQ,kBAAC,QAAD;IAAM,WAAU;IAA8B,UAAA;GAAW,CAAA;GAChF,kBAAC,QAAD;IAAM,uBAAoB;IAAoB,UAAA;GAAY,CAAA;GACzD,CAAC,KAAc,KAAQ,kBAAC,QAAD;IAAM,WAAU;IAA8B,UAAA;GAAW,CAAA;EAC9E;KAGD,IACJ,kBAAC,OAAD;EACE,WAAW,EACT,6CACA,IAAa,0BAA0B,sBACzC;EAJF,UAAA,CAME,kBAAC,OAAD;GACE,uBAAoB;GACpB,WAAU;GAET,UAAA;EACE,CAAA,GACJ,KACC,kBAAC,QAAD;GACE,uBAAoB;GACpB,WAAU;GAET,UAAA;EACG,CAAA,CAEL;;CAGP,OACE,kBAAC,OAAD;EACE,WAAW,EACT,mIACA,IAAa,kBAAkB,aACjC;EAEC,UAAA,IACC,kBAAA,GAAA,EAAA,UAAA;GACG;GACD,kBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA;GACxC;EACD,EAAA,CAAA,IAEF,kBAAA,GAAA,EAAA,UAAA;GACG;GACD,kBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA;GACxC;EACD,EAAA,CAAA;CAED,CAAA;AAET;AAEA,SAAgB,EAAe,EAC7B,SACA,SACA,cACA,aACA,aACA,oBACsB;CACtB,OACE,kBAAC,OAAD;EACE,IAAG;EACH,cAAW;EACX,WAAW,EAAG,oDAAoD,CAAS;EAH7E,UAAA,CAKG,KACC,kBAAC,KAAD;GACE,MAAM,EAAK;GACX,KAAI;GACJ,uBAAoB;GACpB,WAAW,EACT,yCACA,IAEI,gLAIA,8BACJ,CACF;GAEC,UAAA,IACC,kBAAA,GAAA,EAAA,UAAA,CACG,KAAY,kBAAC,QAAD;IAAM,WAAU;IAA8B,UAAA;GAAe,CAAA,GAC1E,kBAAC,QAAD;IAAM,uBAAoB;IAAmB,UAAA;GAAc,CAAA,CAC3D,EAAA,CAAA,IAEF,kBAAC,GAAD;IACE,WAAU;IACV,OAAM;IACN,OAAO,EAAK;IACZ,aAAa,EAAK;IAClB,MAAM;GACP,CAAA;EAEF,CAAA,GAEJ,KACC,kBAAC,KAAD;GACE,MAAM,EAAK;GACX,KAAI;GACJ,uBAAoB;GACpB,WAAW,EACT,yCAKA,IAAO,sBAAsB,8BAC7B,CACF;GAEA,UAAA,kBAAC,GAAD;IACE,WAAU;IACV,OAAM;IACN,OAAO,EAAK;IACZ,aAAa,EAAK;IAClB,MAAM;GACP,CAAA;EACA,CAAA,CAEF;;AAET"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@docubook/ui-react",
|
|
3
|
-
"version": "2.0.0-beta.
|
|
3
|
+
"version": "2.0.0-beta.4",
|
|
4
4
|
"description": "React + DaisyUI component library for documentation sites",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -18,57 +18,57 @@
|
|
|
18
18
|
"default": "./dist/cn.js"
|
|
19
19
|
},
|
|
20
20
|
"./input": {
|
|
21
|
-
"types": "./dist/input.d.ts",
|
|
21
|
+
"types": "./dist/base/input.d.ts",
|
|
22
22
|
"import": "./dist/input.js",
|
|
23
23
|
"default": "./dist/input.js"
|
|
24
24
|
},
|
|
25
25
|
"./kbd": {
|
|
26
|
-
"types": "./dist/kbd.d.ts",
|
|
26
|
+
"types": "./dist/base/kbd.d.ts",
|
|
27
27
|
"import": "./dist/kbd.js",
|
|
28
28
|
"default": "./dist/kbd.js"
|
|
29
29
|
},
|
|
30
30
|
"./toggle": {
|
|
31
|
-
"types": "./dist/toggle.d.ts",
|
|
31
|
+
"types": "./dist/base/toggle.d.ts",
|
|
32
32
|
"import": "./dist/toggle.js",
|
|
33
33
|
"default": "./dist/toggle.js"
|
|
34
34
|
},
|
|
35
35
|
"./dropdown": {
|
|
36
|
-
"types": "./dist/dropdown.d.ts",
|
|
36
|
+
"types": "./dist/base/dropdown.d.ts",
|
|
37
37
|
"import": "./dist/dropdown.js",
|
|
38
38
|
"default": "./dist/dropdown.js"
|
|
39
39
|
},
|
|
40
40
|
"./modal": {
|
|
41
|
-
"types": "./dist/modal.d.ts",
|
|
41
|
+
"types": "./dist/base/modal.d.ts",
|
|
42
42
|
"import": "./dist/modal.js",
|
|
43
43
|
"default": "./dist/modal.js"
|
|
44
44
|
},
|
|
45
45
|
"./drawer": {
|
|
46
|
-
"types": "./dist/drawer.d.ts",
|
|
46
|
+
"types": "./dist/base/drawer.d.ts",
|
|
47
47
|
"import": "./dist/drawer.js",
|
|
48
48
|
"default": "./dist/drawer.js"
|
|
49
49
|
},
|
|
50
50
|
"./collapse": {
|
|
51
|
-
"types": "./dist/collapse.d.ts",
|
|
51
|
+
"types": "./dist/base/collapse.d.ts",
|
|
52
52
|
"import": "./dist/collapse.js",
|
|
53
53
|
"default": "./dist/collapse.js"
|
|
54
54
|
},
|
|
55
55
|
"./theme-controller": {
|
|
56
|
-
"types": "./dist/theme-controller.d.ts",
|
|
56
|
+
"types": "./dist/base/theme-controller.d.ts",
|
|
57
57
|
"import": "./dist/theme-controller.js",
|
|
58
58
|
"default": "./dist/theme-controller.js"
|
|
59
59
|
},
|
|
60
60
|
"./navbar": {
|
|
61
|
-
"types": "./dist/navbar.d.ts",
|
|
61
|
+
"types": "./dist/base/navbar.d.ts",
|
|
62
62
|
"import": "./dist/navbar.js",
|
|
63
63
|
"default": "./dist/navbar.js"
|
|
64
64
|
},
|
|
65
65
|
"./breadcrumbs": {
|
|
66
|
-
"types": "./dist/breadcrumbs.d.ts",
|
|
66
|
+
"types": "./dist/base/breadcrumbs.d.ts",
|
|
67
67
|
"import": "./dist/breadcrumbs.js",
|
|
68
68
|
"default": "./dist/breadcrumbs.js"
|
|
69
69
|
},
|
|
70
70
|
"./pagination": {
|
|
71
|
-
"types": "./dist/pagination.d.ts",
|
|
71
|
+
"types": "./dist/base/pagination.d.ts",
|
|
72
72
|
"import": "./dist/pagination.js",
|
|
73
73
|
"default": "./dist/pagination.js"
|
|
74
74
|
},
|
|
@@ -99,7 +99,7 @@
|
|
|
99
99
|
"react": "^19.2.0",
|
|
100
100
|
"react-dom": "^19.2.0",
|
|
101
101
|
"vite": "^8.2.1",
|
|
102
|
-
"typescript": "^
|
|
102
|
+
"typescript": "^7.0.2"
|
|
103
103
|
},
|
|
104
104
|
"publishConfig": {
|
|
105
105
|
"access": "public"
|
|
@@ -131,7 +131,7 @@
|
|
|
131
131
|
"build": "vite build && tsc -p tsconfig.build.json",
|
|
132
132
|
"dev": "vite build --watch",
|
|
133
133
|
"typecheck": "tsc --noEmit",
|
|
134
|
-
"lint": "
|
|
134
|
+
"lint": "oxlint src",
|
|
135
135
|
"test": "vitest run",
|
|
136
136
|
"test:watch": "vitest",
|
|
137
137
|
"clean": "rm -rf dist"
|