@a5it/sync-ui 0.1.2 → 0.1.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/data-table/cells/payment-pill.js +1 -1
- package/dist/components/data-table/cells/payment-pill.js.map +1 -1
- package/dist/components/data-table/cells/status-pill.d.ts.map +1 -1
- package/dist/components/data-table/cells/status-pill.js +35 -0
- package/dist/components/data-table/cells/status-pill.js.map +1 -1
- package/dist/components/data-table/cells/text-cell.js +1 -1
- package/dist/components/data-table/cells/text-cell.js.map +1 -1
- package/dist/components/page-header/index.d.ts +1 -2
- package/dist/components/page-header/index.d.ts.map +1 -1
- package/dist/components/page-header/index.js +1 -1
- package/dist/components/page-header/index.js.map +1 -1
- package/dist/components/page-header/page-header.d.ts +54 -44
- package/dist/components/page-header/page-header.d.ts.map +1 -1
- package/dist/components/page-header/page-header.js +78 -54
- package/dist/components/page-header/page-header.js.map +1 -1
- package/package.json +3 -2
|
@@ -28,6 +28,6 @@ export function DataTablePaymentPill({ label, className, }) {
|
|
|
28
28
|
const normalizedLabel = normalizePaymentLabel(label);
|
|
29
29
|
const displayLabel = getDisplayLabel(label);
|
|
30
30
|
const styles = getPaymentStyles(normalizedLabel);
|
|
31
|
-
return (_jsxs("div", { className: cn("flex min-w-[104px]
|
|
31
|
+
return (_jsxs("div", { className: cn("flex min-w-[104px] max-w-fit justify-center items-center gap-2 rounded-full px-2 py-1", styles.container, className), children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", className: cn("shrink-0", styles.icon), children: [_jsx("path", { d: "M14.6667 6.16699H1.33337C1.06004 6.16699 0.833374 5.94033 0.833374 5.66699C0.833374 5.39366 1.06004 5.16699 1.33337 5.16699H14.6667C14.94 5.16699 15.1667 5.39366 15.1667 5.66699C15.1667 5.94033 14.94 6.16699 14.6667 6.16699Z", fill: "currentColor" }), _jsx("path", { d: "M5.33333 11.5H4C3.72667 11.5 3.5 11.2733 3.5 11C3.5 10.7267 3.72667 10.5 4 10.5H5.33333C5.60667 10.5 5.83333 10.7267 5.83333 11C5.83333 11.2733 5.60667 11.5 5.33333 11.5Z", fill: "currentColor" }), _jsx("path", { d: "M9.66667 11.5H7C6.72667 11.5 6.5 11.2733 6.5 11C6.5 10.7267 6.72667 10.5 7 10.5H9.66667C9.94 10.5 10.1667 10.7267 10.1667 11C10.1667 11.2733 9.94 11.5 9.66667 11.5Z", fill: "currentColor" }), _jsx("path", { d: "M11.7067 14.1663H4.29337C1.64004 14.1663 0.833374 13.3663 0.833374 10.7397V5.25967C0.833374 2.63301 1.64004 1.83301 4.29337 1.83301H11.7C14.3534 1.83301 15.16 2.63301 15.16 5.25967V10.733C15.1667 13.3663 14.36 14.1663 11.7067 14.1663ZM4.29337 2.83301C2.20004 2.83301 1.83337 3.19301 1.83337 5.25967V10.733C1.83337 12.7997 2.20004 13.1597 4.29337 13.1597H11.7C13.7934 13.1597 14.16 12.7997 14.16 10.733V5.25967C14.16 3.19301 13.7934 2.83301 11.7 2.83301H4.29337Z", fill: "currentColor" })] }), _jsx("span", { className: cn("text-[14px] font-bold", styles.text), children: displayLabel })] }));
|
|
32
32
|
}
|
|
33
33
|
//# sourceMappingURL=payment-pill.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"payment-pill.js","sourceRoot":"","sources":["../../../../src/components/data-table/cells/payment-pill.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/D,SAAS,qBAAqB,CAAC,KAAsC;IACnE,OAAO,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;AAC9C,CAAC;AAED,SAAS,eAAe,CAAC,KAAsC;IAC7D,MAAM,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAEhD,IAAI,UAAU,KAAK,KAAK;QAAE,OAAO,KAAK,CAAC;IAEvC,OAAO,UAAU,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,gBAAgB,CAAC,eAAuB;IAC/C,IAAI,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QACvC,OAAO;YACL,SAAS,EAAE,gBAAgB;YAC3B,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,cAAc;SACrB,CAAC;IACJ,CAAC;IACD,OAAO;QACL,SAAS,EAAE,aAAa;QACxB,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;KACtB,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,GACiB;IAC1B,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,
|
|
1
|
+
{"version":3,"file":"payment-pill.js","sourceRoot":"","sources":["../../../../src/components/data-table/cells/payment-pill.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAI/D,SAAS,qBAAqB,CAAC,KAAsC;IACnE,OAAO,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,WAAW,EAAE,CAAC;AAC9C,CAAC;AAED,SAAS,eAAe,CAAC,KAAsC;IAC7D,MAAM,UAAU,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IAEhD,IAAI,UAAU,KAAK,KAAK;QAAE,OAAO,KAAK,CAAC;IAEvC,OAAO,UAAU,CAAC,SAAS,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC,CAAC;AACvE,CAAC;AAED,SAAS,gBAAgB,CAAC,eAAuB;IAC/C,IAAI,eAAe,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC;QACvC,OAAO;YACL,SAAS,EAAE,gBAAgB;YAC3B,IAAI,EAAE,cAAc;YACpB,IAAI,EAAE,cAAc;SACrB,CAAC;IACJ,CAAC;IACD,OAAO;QACL,SAAS,EAAE,aAAa;QACxB,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,eAAe;KACtB,CAAC;AACJ,CAAC;AAOD,MAAM,UAAU,oBAAoB,CAAC,EACnC,KAAK,EACL,SAAS,GACiB;IAC1B,MAAM,eAAe,GAAG,qBAAqB,CAAC,KAAK,CAAC,CAAC;IACrD,MAAM,YAAY,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,MAAM,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,uFAAuF,EACvF,MAAM,CAAC,SAAS,EAChB,SAAS,CACV,aAED,eACE,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,iBACC,MAAM,EAClB,SAAS,EAAE,EAAE,CAAC,UAAU,EAAE,MAAM,CAAC,IAAI,CAAC,aAEtC,eACE,CAAC,EAAC,kOAAkO,EACpO,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,4KAA4K,EAC9K,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,sKAAsK,EACxK,IAAI,EAAC,cAAc,GACnB,EACF,eACE,CAAC,EAAC,+cAA+c,EACjd,IAAI,EAAC,cAAc,GACnB,IACE,EACN,eAAM,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE,MAAM,CAAC,IAAI,CAAC,YACtD,YAAY,GACR,IACH,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/cells/status-pill.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;
|
|
1
|
+
{"version":3,"file":"status-pill.d.ts","sourceRoot":"","sources":["../../../../src/components/data-table/cells/status-pill.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA6FF,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,wBAAwB,2CA4BjF"}
|
|
@@ -2,6 +2,31 @@
|
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { capitalize, cn, deslugify } from "../../../lib/utils";
|
|
4
4
|
const statusConfig = {
|
|
5
|
+
new: {
|
|
6
|
+
bg: "#dbeafe", // Light blue background
|
|
7
|
+
dot: "#111827", // Near-black dot
|
|
8
|
+
text: "#111827", // Near-black text
|
|
9
|
+
},
|
|
10
|
+
inProgress: {
|
|
11
|
+
bg: "#fef3c7", // Light yellow background
|
|
12
|
+
dot: "#d97706", // Amber dot
|
|
13
|
+
text: "#d97706", // Amber text
|
|
14
|
+
},
|
|
15
|
+
completed: {
|
|
16
|
+
bg: "#c6f3df", // Light green background
|
|
17
|
+
dot: "#12845c", // Green dot
|
|
18
|
+
text: "#12845c", // Green text
|
|
19
|
+
},
|
|
20
|
+
rejected: {
|
|
21
|
+
bg: "#fee2e2", // Light red background
|
|
22
|
+
dot: "#dc2626", // Red dot
|
|
23
|
+
text: "#dc2626", // Red text
|
|
24
|
+
},
|
|
25
|
+
invalid: {
|
|
26
|
+
bg: "#f5f5f5", // Neutral background
|
|
27
|
+
dot: "#6b7280", // Gray dot
|
|
28
|
+
text: "#6b7280", // Gray text
|
|
29
|
+
},
|
|
5
30
|
pending: {
|
|
6
31
|
bg: "#fef3c7", // Light yellow background
|
|
7
32
|
dot: "#d97706", // Amber dot
|
|
@@ -26,6 +51,16 @@ const statusConfig = {
|
|
|
26
51
|
function normalizeStatus(label) {
|
|
27
52
|
// Deslugify first, then normalize
|
|
28
53
|
const normalized = deslugify(label).toLowerCase().trim();
|
|
54
|
+
if (normalized.includes("new"))
|
|
55
|
+
return "new";
|
|
56
|
+
if (normalized.includes("in progress"))
|
|
57
|
+
return "inProgress";
|
|
58
|
+
if (normalized.includes("completed"))
|
|
59
|
+
return "completed";
|
|
60
|
+
if (normalized.includes("rejected"))
|
|
61
|
+
return "rejected";
|
|
62
|
+
if (normalized.includes("invalid"))
|
|
63
|
+
return "invalid";
|
|
29
64
|
if (normalized.includes("pending"))
|
|
30
65
|
return "pending";
|
|
31
66
|
if (normalized.includes("processed") || normalized.includes("ready for send") || normalized.includes("ready to send"))
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"status-pill.js","sourceRoot":"","sources":["../../../../src/components/data-table/cells/status-pill.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;
|
|
1
|
+
{"version":3,"file":"status-pill.js","sourceRoot":"","sources":["../../../../src/components/data-table/cells/status-pill.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,6 +2,6 @@
|
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
3
|
import { cn } from "../../../lib/utils";
|
|
4
4
|
export function DataTableTextCell({ text, className, textClassName, truncate = false, }) {
|
|
5
|
-
return (_jsx("div", { className: cn("flex min-w-0 items-center", className), children: _jsx("span", { className: cn("text-[14px]
|
|
5
|
+
return (_jsx("div", { className: cn("flex min-w-0 items-center", className), children: _jsx("span", { className: cn("text-[14px] font-semibold text-[#1a1a1a]", truncate && "min-w-0 flex-1 truncate", textClassName), children: text }) }));
|
|
6
6
|
}
|
|
7
7
|
//# sourceMappingURL=text-cell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"text-cell.js","sourceRoot":"","sources":["../../../../src/components/data-table/cells/text-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AASxC,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,aAAa,EACb,QAAQ,GAAG,KAAK,GACO;IACvB,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,YACxD,eACE,SAAS,EAAE,EAAE,CACX,
|
|
1
|
+
{"version":3,"file":"text-cell.js","sourceRoot":"","sources":["../../../../src/components/data-table/cells/text-cell.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAIb,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AASxC,MAAM,UAAU,iBAAiB,CAAC,EAChC,IAAI,EACJ,SAAS,EACT,aAAa,EACb,QAAQ,GAAG,KAAK,GACO;IACvB,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,2BAA2B,EAAE,SAAS,CAAC,YACxD,eACE,SAAS,EAAE,EAAE,CACX,0CAA0C,EAC1C,QAAQ,IAAI,yBAAyB,EACrC,aAAa,CACd,YAEA,IAAI,GACA,GACH,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -1,3 +1,2 @@
|
|
|
1
|
-
export { PageHeader } from "./page-header";
|
|
2
|
-
export type { PageHeaderProps, PageHeaderNavItem, PageHeaderMoreAction, } from "./page-header";
|
|
1
|
+
export { PageHeader, PageHeaderTitle, PageHeaderTitleMenu, PageHeaderNavItem, PageHeaderActions, PageHeaderMoreMenu, PageHeaderMoreMenuItem, PageHeaderMoreMenuSeparator, } from "./page-header";
|
|
3
2
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,eAAe,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export { PageHeader } from "./page-header";
|
|
1
|
+
export { PageHeader, PageHeaderTitle, PageHeaderTitleMenu, PageHeaderNavItem, PageHeaderActions, PageHeaderMoreMenu, PageHeaderMoreMenuItem, PageHeaderMoreMenuSeparator, } from "./page-header";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/page-header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,GAC5B,MAAM,eAAe,CAAC"}
|
|
@@ -1,56 +1,66 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
import { DropdownMenuItem, DropdownMenuSeparator } from "@/components/ui/dropdown-menu";
|
|
3
|
+
/**
|
|
4
|
+
* Root container for the page header.
|
|
5
|
+
* Compose with `PageHeaderTitle` or `PageHeaderTitleMenu`, `PageHeaderActions`,
|
|
6
|
+
* and optionally `PageHeaderMoreMenu` as direct children.
|
|
7
|
+
*/
|
|
8
|
+
declare function PageHeader({ className, children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
/**
|
|
10
|
+
* Static title with icon. Use when there is no dropdown navigation.
|
|
11
|
+
* For a title that opens a navigation dropdown, use `PageHeaderTitleMenu` instead.
|
|
12
|
+
*/
|
|
13
|
+
declare function PageHeaderTitle({ icon: Icon, className, children, ...props }: React.ComponentProps<"div"> & {
|
|
5
14
|
icon?: React.ComponentType<{
|
|
6
15
|
className?: string;
|
|
7
16
|
}>;
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
17
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
/**
|
|
19
|
+
* Title button that opens a dropdown navigation menu.
|
|
20
|
+
* Pass `PageHeaderNavItem` components as children to populate the dropdown.
|
|
21
|
+
*/
|
|
22
|
+
declare function PageHeaderTitleMenu({ title, icon: Icon, className, contentClassName, children, ...props }: Omit<React.ComponentProps<"div">, "title" | "children"> & {
|
|
23
|
+
title: string;
|
|
13
24
|
icon?: React.ComponentType<{
|
|
14
25
|
className?: string;
|
|
15
26
|
}>;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
27
|
+
contentClassName?: string;
|
|
28
|
+
children: React.ReactNode;
|
|
29
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
30
|
+
/**
|
|
31
|
+
* A single navigation entry inside a `PageHeaderTitleMenu` dropdown.
|
|
32
|
+
* Renders as a link (`<a>`) when `href` is provided, otherwise as a `<button>`.
|
|
33
|
+
*/
|
|
34
|
+
declare function PageHeaderNavItem({ href, icon: Icon, active, className, onClick, children, }: {
|
|
35
|
+
href?: string;
|
|
22
36
|
icon?: React.ComponentType<{
|
|
23
37
|
className?: string;
|
|
24
38
|
}>;
|
|
25
|
-
|
|
26
|
-
actions?: React.ReactNode;
|
|
27
|
-
/**
|
|
28
|
-
* Optional: Array of action items to show in a three-dot menu.
|
|
29
|
-
* Will appear as a dropdown menu button with MoreVertical icon at the rightmost side.
|
|
30
|
-
* Each item will be automatically rendered as a DropdownMenuItem.
|
|
31
|
-
*/
|
|
32
|
-
moreActions?: PageHeaderMoreAction[];
|
|
39
|
+
active?: boolean;
|
|
33
40
|
className?: string;
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
41
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
42
|
+
children: React.ReactNode;
|
|
43
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
44
|
+
/**
|
|
45
|
+
* Right-side action slot. Place buttons, switches, or any controls as children.
|
|
46
|
+
*/
|
|
47
|
+
declare function PageHeaderActions({ className, children, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
/**
|
|
49
|
+
* Three-dot overflow menu. Place `PageHeaderMoreMenuItem` and
|
|
50
|
+
* `PageHeaderMoreMenuSeparator` components as children.
|
|
51
|
+
*/
|
|
52
|
+
declare function PageHeaderMoreMenu({ contentClassName, children, }: {
|
|
53
|
+
contentClassName?: string;
|
|
54
|
+
children: React.ReactNode;
|
|
55
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
56
|
+
/**
|
|
57
|
+
* A single item inside a `PageHeaderMoreMenu` dropdown.
|
|
58
|
+
*/
|
|
59
|
+
declare function PageHeaderMoreMenuItem({ icon: Icon, className, children, ...props }: React.ComponentProps<typeof DropdownMenuItem> & {
|
|
60
|
+
icon?: React.ComponentType<{
|
|
61
|
+
className?: string;
|
|
62
|
+
}>;
|
|
63
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
64
|
+
declare const PageHeaderMoreMenuSeparator: typeof DropdownMenuSeparator;
|
|
65
|
+
export { PageHeader, PageHeaderTitle, PageHeaderTitleMenu, PageHeaderNavItem, PageHeaderActions, PageHeaderMoreMenu, PageHeaderMoreMenuItem, PageHeaderMoreMenuSeparator, };
|
|
56
66
|
//# sourceMappingURL=page-header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"page-header.d.ts","sourceRoot":"","sources":["../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAGL,gBAAgB,EAChB,qBAAqB,EAEtB,MAAM,+BAA+B,CAAC;AAWvC;;;;GAIG;AACH,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAa7B;AAID;;;GAGG;AACH,iBAAS,eAAe,CAAC,EACvB,IAAI,EAAE,IAAe,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IAC/B,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD,2CAWA;AAID;;;GAGG;AACH,iBAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,IAAI,EAAE,IAAe,EACrB,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC,GAAG;IAC3D,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAqCA;AAID;;;GAGG;AACH,iBAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,IAAI,EAAE,IAAI,EACV,MAAc,EACd,SAAS,EACT,OAAO,EACP,QAAQ,GACT,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACnD,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACxC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAuDA;AAID;;GAEG;AACH,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAY7B;AAID;;;GAGG;AACH,iBAAS,kBAAkB,CAAC,EAC1B,gBAAgB,EAChB,QAAQ,GACT,EAAE;IACD,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,2CAuBA;AAID;;GAEG;AACH,iBAAS,sBAAsB,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,GAAG;IACjD,IAAI,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;CACpD,2CAUA;AAID,QAAA,MAAM,2BAA2B,8BAAwB,CAAC;AAI1D,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,GAC5B,CAAC"}
|
|
@@ -1,59 +1,83 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import * as React from "react";
|
|
4
3
|
import { ChevronDown, FileText, MoreVertical } from "lucide-react";
|
|
5
|
-
import { cn } from "
|
|
6
|
-
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}, [onNavItemClick]);
|
|
12
|
-
const getHref = React.useCallback((href) => {
|
|
13
|
-
return hrefResolver ? hrefResolver(href) : href;
|
|
14
|
-
}, [hrefResolver]);
|
|
15
|
-
const checkIsActive = React.useCallback((item) => {
|
|
16
|
-
// If custom isActive function is provided, use it
|
|
17
|
-
if (isActive) {
|
|
18
|
-
return isActive(item);
|
|
19
|
-
}
|
|
20
|
-
// Otherwise, automatically detect based on pathname
|
|
21
|
-
if (pathname) {
|
|
22
|
-
const resolvedHref = getHref(item.href);
|
|
23
|
-
// If item has activePaths, check if current pathname matches any of them
|
|
24
|
-
if (item.activePaths && item.activePaths.length > 0) {
|
|
25
|
-
return item.activePaths.some((path) => {
|
|
26
|
-
const resolvedPath = getHref(path);
|
|
27
|
-
return pathname.startsWith(resolvedPath);
|
|
28
|
-
});
|
|
29
|
-
}
|
|
30
|
-
// Otherwise, check if pathname matches the item's href
|
|
31
|
-
return pathname === resolvedHref;
|
|
32
|
-
}
|
|
33
|
-
// No pathname provided, can't determine active state
|
|
34
|
-
return false;
|
|
35
|
-
}, [isActive, pathname, getHref]);
|
|
36
|
-
return (_jsx("div", { className: cn("w-full rounded-[12px] border border-[#e6e6e6] bg-white overflow-hidden", containerClassName, className), "data-slot": "page-header", children: _jsxs("div", { className: "flex items-center justify-between px-6 py-4", children: [_jsx("div", { className: "flex items-center gap-4 flex-1", children: navItems.length > 0 ? (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: cn("flex items-center gap-2 cursor-pointer group outline-none", titleClassName), "data-slot": "page-header-title", "data-cy": `page-header-${title.toLowerCase().replace(/\s+/g, "-")}-dropdown-trigger`, "aria-label": `${title} menu`, children: [_jsx(Icon, { className: "h-5 w-5 text-[#4d4d4d] group-hover:text-[#1a1a1a] transition-colors" }), _jsx("span", { className: "text-large font-bold", children: title }), _jsx(ChevronDown, { className: "h-4 w-4 text-[#4d4d4d] transition-transform duration-200 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: cn("w-[calc(100%+48px)] p-2 flex flex-col gap-1", dropdownContentClassName), "data-slot": "page-header-dropdown", sideOffset: 24, alignOffset: -24, children: navItems.map((item) => {
|
|
37
|
-
const ItemIcon = item.icon;
|
|
38
|
-
const active = checkIsActive(item);
|
|
39
|
-
return (_jsx(DropdownMenuItem, { asChild: true, className: cn("px-3 py-3 cursor-pointer rounded-md",
|
|
40
|
-
// Active state - more prominent
|
|
41
|
-
active && "bg-primary/10 text-primary font-medium",
|
|
42
|
-
// Hover state - lighter, only when not active
|
|
43
|
-
!active && "hover:bg-muted/50 hover:text-foreground",
|
|
44
|
-
// Focus state
|
|
45
|
-
"focus:bg-primary/10 focus:text-primary", dropdownClassName), children: item.onClick ? (_jsxs("button", { type: "button", onClick: (e) => handleItemClick(item, e), className: "flex items-center gap-3 w-full text-left", "data-slot": `page-header-nav-${item.title
|
|
46
|
-
.toLowerCase()
|
|
47
|
-
.replace(/\s+/g, "-")}`, "data-cy": `page-header-nav-${item.title
|
|
48
|
-
.toLowerCase()
|
|
49
|
-
.replace(/\s+/g, "-")}`, children: [ItemIcon && (_jsx(ItemIcon, { className: "h-5 w-5", "aria-hidden": "true" })), _jsx("span", { className: "text-[15px]", children: item.title })] })) : (_jsxs("a", { href: getHref(item.href), onClick: (e) => handleItemClick(item, e), className: "flex items-center gap-3", "data-slot": `page-header-nav-${item.title
|
|
50
|
-
.toLowerCase()
|
|
51
|
-
.replace(/\s+/g, "-")}`, "data-cy": `page-header-nav-${item.title
|
|
52
|
-
.toLowerCase()
|
|
53
|
-
.replace(/\s+/g, "-")}`, children: [ItemIcon && (_jsx(ItemIcon, { className: "h-5 w-5", "aria-hidden": "true" })), _jsx("span", { className: "text-[15px]", children: item.title })] })) }, item.href));
|
|
54
|
-
}) })] })) : (_jsxs("div", { className: cn("flex items-center gap-2", titleClassName), "data-slot": "page-header-title", children: [_jsx(Icon, { className: "h-5 w-5 text-[#4d4d4d]" }), _jsx("span", { className: "text-base font-semibold text-[#1a1a1a]", children: title })] })) }), _jsxs("div", { className: "flex items-center gap-4", children: [actions && (_jsx("div", { className: "flex items-center gap-6", onClick: (e) => e.stopPropagation(), "data-slot": "page-header-actions", "data-cy": "page-header-actions", children: actions })), moreActions && moreActions.length > 0 && (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "flex items-center justify-center rounded-[8px] bg-[#f2f2f2] p-2", "data-cy": `page-header-${title.toLowerCase().replace(/\s+/g, "-")}-more-actions-trigger`, "aria-label": "More actions", children: _jsx(MoreVertical, { className: "h-4 w-4 text-[#4d4d4d]", "aria-hidden": true }) }) }), _jsx(DropdownMenuContent, { align: "end", className: "min-w-[180px]", "data-cy": `page-header-${title.toLowerCase().replace(/\s+/g, "-")}-more-actions-content`, onClick: (e) => e.stopPropagation(), children: moreActions.map((action, index) => {
|
|
55
|
-
const ActionIcon = action.icon;
|
|
56
|
-
return (_jsxs(React.Fragment, { children: [action.separator && index > 0 && _jsx(DropdownMenuSeparator, {}), _jsxs(DropdownMenuItem, { onClick: action.onClick, disabled: action.disabled, className: "cursor-pointer", children: [ActionIcon && (_jsx(ActionIcon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" })), _jsx("span", { children: action.label })] })] }, index));
|
|
57
|
-
}) })] }))] })] }) }));
|
|
4
|
+
import { cn } from "@/lib/utils";
|
|
5
|
+
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu";
|
|
6
|
+
import Link from "next/link";
|
|
7
|
+
/* ─────────────────────────── Helpers ─────────────────────────── */
|
|
8
|
+
function slugify(text) {
|
|
9
|
+
return text.toLowerCase().replace(/\s+/g, "-");
|
|
58
10
|
}
|
|
11
|
+
/* ─────────────────────────── PageHeader ─────────────────────────── */
|
|
12
|
+
/**
|
|
13
|
+
* Root container for the page header.
|
|
14
|
+
* Compose with `PageHeaderTitle` or `PageHeaderTitleMenu`, `PageHeaderActions`,
|
|
15
|
+
* and optionally `PageHeaderMoreMenu` as direct children.
|
|
16
|
+
*/
|
|
17
|
+
function PageHeader({ className, children, ...props }) {
|
|
18
|
+
return (_jsx("div", { className: cn("w-full rounded-[12px] border border-[#e6e6e6] bg-white overflow-hidden", className), "data-slot": "page-header", ...props, children: _jsx("div", { className: "flex items-center gap-4 px-6 py-4", children: children }) }));
|
|
19
|
+
}
|
|
20
|
+
/* ─────────────────────────── PageHeaderTitle ─────────────────────────── */
|
|
21
|
+
/**
|
|
22
|
+
* Static title with icon. Use when there is no dropdown navigation.
|
|
23
|
+
* For a title that opens a navigation dropdown, use `PageHeaderTitleMenu` instead.
|
|
24
|
+
*/
|
|
25
|
+
function PageHeaderTitle({ icon: Icon = FileText, className, children, ...props }) {
|
|
26
|
+
return (_jsxs("div", { className: cn("flex items-center gap-2 flex-1", className), "data-slot": "page-header-title", ...props, children: [_jsx(Icon, { className: "h-5 w-5 text-[#4d4d4d]" }), _jsx("span", { className: "text-large font-bold", children: children })] }));
|
|
27
|
+
}
|
|
28
|
+
/* ─────────────────────────── PageHeaderTitleMenu ─────────────────────────── */
|
|
29
|
+
/**
|
|
30
|
+
* Title button that opens a dropdown navigation menu.
|
|
31
|
+
* Pass `PageHeaderNavItem` components as children to populate the dropdown.
|
|
32
|
+
*/
|
|
33
|
+
function PageHeaderTitleMenu({ title, icon: Icon = FileText, className, contentClassName, children, ...props }) {
|
|
34
|
+
const titleSlug = slugify(title);
|
|
35
|
+
return (_jsx("div", { className: cn("flex items-center gap-4 flex-1", className), ...props, children: _jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs("button", { type: "button", className: "flex items-center gap-2 cursor-pointer group outline-none", "data-slot": "page-header-title", "data-cy": `page-header-${titleSlug}-dropdown-trigger`, "aria-label": `${title} menu`, children: [_jsx(Icon, { className: "h-5 w-5 text-[#4d4d4d] group-hover:text-[#1a1a1a] transition-colors" }), _jsx("span", { className: "text-large font-bold", children: title }), _jsx(ChevronDown, { className: "h-4 w-4 text-[#4d4d4d] transition-transform duration-200 group-data-[state=open]:rotate-180", "aria-hidden": "true" })] }) }), _jsx(DropdownMenuContent, { align: "start", className: cn("w-[calc(100%+58px)] min-w-fit rounded-[20px] border-0 bg-white p-2 shadow-none overflow-hidden [box-shadow:0_12px_20px_0_rgba(0,0,0,0.08),0_4px_6px_0_rgba(0,0,0,0.06)] flex flex-col gap-2", contentClassName), "data-slot": "page-header-dropdown", sideOffset: 24, alignOffset: -24, children: children })] }) }));
|
|
36
|
+
}
|
|
37
|
+
/* ─────────────────────────── PageHeaderNavItem ─────────────────────────── */
|
|
38
|
+
/**
|
|
39
|
+
* A single navigation entry inside a `PageHeaderTitleMenu` dropdown.
|
|
40
|
+
* Renders as a link (`<a>`) when `href` is provided, otherwise as a `<button>`.
|
|
41
|
+
*/
|
|
42
|
+
function PageHeaderNavItem({ href, icon: Icon, active = false, className, onClick, children, }) {
|
|
43
|
+
const label = typeof children === "string" ? children : "";
|
|
44
|
+
const itemSlug = slugify(label);
|
|
45
|
+
const rowClasses = cn("group h-10 w-full min-w-0 flex items-center gap-3 rounded-[14px] p-2 transition-colors", active
|
|
46
|
+
? "border-primary/20 bg-primary/5 [--stroke-0:hsl(var(--primary))]"
|
|
47
|
+
: "border-primary/20 bg-white hover:bg-primary/5 hover:border-primary/20 group-hover:[--stroke-0:hsl(var(--primary))]", "focus:bg-primary/5 focus:text-primary", className);
|
|
48
|
+
const iconClasses = cn("size-5 shrink-0", active ? "text-primary" : "text-[#1A1A1A] group-hover:text-primary");
|
|
49
|
+
const textClasses = cn("font-normal text-sm", active
|
|
50
|
+
? "text-primary font-medium"
|
|
51
|
+
: "text-[#1A1A1A] group-hover:text-primary");
|
|
52
|
+
if (href) {
|
|
53
|
+
return (_jsx(DropdownMenuItem, { asChild: true, className: rowClasses, children: _jsxs(Link, { href: href, onClick: onClick, "data-slot": `page-header-nav-${itemSlug}`, "data-cy": `page-header-nav-${itemSlug}`, children: [Icon && _jsx(Icon, { className: iconClasses, "aria-hidden": "true" }), _jsx("span", { className: textClasses, children: children })] }) }));
|
|
54
|
+
}
|
|
55
|
+
return (_jsx(DropdownMenuItem, { asChild: true, className: rowClasses, children: _jsxs("button", { type: "button", onClick: onClick, className: "text-left", "data-slot": `page-header-nav-${itemSlug}`, "data-cy": `page-header-nav-${itemSlug}`, children: [Icon && _jsx(Icon, { className: iconClasses, "aria-hidden": "true" }), _jsx("span", { className: textClasses, children: children })] }) }));
|
|
56
|
+
}
|
|
57
|
+
/* ─────────────────────────── PageHeaderActions ─────────────────────────── */
|
|
58
|
+
/**
|
|
59
|
+
* Right-side action slot. Place buttons, switches, or any controls as children.
|
|
60
|
+
*/
|
|
61
|
+
function PageHeaderActions({ className, children, ...props }) {
|
|
62
|
+
return (_jsx("div", { className: cn("flex items-center gap-6", className), onClick: (e) => e.stopPropagation(), "data-slot": "page-header-actions", "data-cy": "page-header-actions", ...props, children: children }));
|
|
63
|
+
}
|
|
64
|
+
/* ─────────────────────────── PageHeaderMoreMenu ─────────────────────────── */
|
|
65
|
+
/**
|
|
66
|
+
* Three-dot overflow menu. Place `PageHeaderMoreMenuItem` and
|
|
67
|
+
* `PageHeaderMoreMenuSeparator` components as children.
|
|
68
|
+
*/
|
|
69
|
+
function PageHeaderMoreMenu({ contentClassName, children, }) {
|
|
70
|
+
return (_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsx("button", { type: "button", className: "flex items-center justify-center rounded-[8px] bg-[#f2f2f2] p-2", "data-cy": "page-header-more-actions-trigger", "aria-label": "More actions", children: _jsx(MoreVertical, { className: "h-4 w-4 text-[#4d4d4d]", "aria-hidden": true }) }) }), _jsx(DropdownMenuContent, { align: "end", className: cn("min-w-[180px]", contentClassName), "data-cy": "page-header-more-actions-content", onClick: (e) => e.stopPropagation(), children: children })] }));
|
|
71
|
+
}
|
|
72
|
+
/* ─────────────────────────── PageHeaderMoreMenuItem ─────────────────────────── */
|
|
73
|
+
/**
|
|
74
|
+
* A single item inside a `PageHeaderMoreMenu` dropdown.
|
|
75
|
+
*/
|
|
76
|
+
function PageHeaderMoreMenuItem({ icon: Icon, className, children, ...props }) {
|
|
77
|
+
return (_jsxs(DropdownMenuItem, { className: cn("cursor-pointer", className), ...props, children: [Icon && _jsx(Icon, { className: "mr-2 h-4 w-4", "aria-hidden": "true" }), _jsx("span", { children: children })] }));
|
|
78
|
+
}
|
|
79
|
+
/* ─────────────────────────── PageHeaderMoreMenuSeparator ─────────────────────────── */
|
|
80
|
+
const PageHeaderMoreMenuSeparator = DropdownMenuSeparator;
|
|
81
|
+
/* ─────────────────────────── Exports ─────────────────────────── */
|
|
82
|
+
export { PageHeader, PageHeaderTitle, PageHeaderTitleMenu, PageHeaderNavItem, PageHeaderActions, PageHeaderMoreMenu, PageHeaderMoreMenuItem, PageHeaderMoreMenuSeparator, };
|
|
59
83
|
//# sourceMappingURL=page-header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;
|
|
1
|
+
{"version":3,"file":"page-header.js","sourceRoot":"","sources":["../../../src/components/page-header/page-header.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAGb,OAAO,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AACnE,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,YAAY,EACZ,mBAAmB,EACnB,gBAAgB,EAChB,qBAAqB,EACrB,mBAAmB,GACpB,MAAM,+BAA+B,CAAC;AACvC,OAAO,IAAI,MAAM,WAAW,CAAC;AAE7B,qEAAqE;AAErE,SAAS,OAAO,CAAC,IAAY;IAC3B,OAAO,IAAI,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;AACjD,CAAC;AAED,wEAAwE;AAExE;;;;GAIG;AACH,SAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACoB;IAC5B,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CACX,wEAAwE,EACxE,SAAS,CACV,eACS,aAAa,KACnB,KAAK,YAET,cAAK,SAAS,EAAC,mCAAmC,YAAE,QAAQ,GAAO,GAC/D,CACP,CAAC;AACJ,CAAC;AAED,6EAA6E;AAE7E;;;GAGG;AACH,SAAS,eAAe,CAAC,EACvB,IAAI,EAAE,IAAI,GAAG,QAAQ,EACrB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAGT;IACC,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,eAChD,mBAAmB,KACzB,KAAK,aAET,KAAC,IAAI,IAAC,SAAS,EAAC,wBAAwB,GAAG,EAC3C,eAAM,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAQ,IACpD,CACP,CAAC;AACJ,CAAC;AAED,iFAAiF;AAEjF;;;GAGG;AACH,SAAS,mBAAmB,CAAC,EAC3B,KAAK,EACL,IAAI,EAAE,IAAI,GAAG,QAAQ,EACrB,SAAS,EACT,gBAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EAMT;IACC,MAAM,SAAS,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAEjC,OAAO,CACL,cAAK,SAAS,EAAE,EAAE,CAAC,gCAAgC,EAAE,SAAS,CAAC,KAAM,KAAK,YACxE,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,2DAA2D,eAC3D,mBAAmB,aACpB,eAAe,SAAS,mBAAmB,gBACxC,GAAG,KAAK,OAAO,aAE3B,KAAC,IAAI,IAAC,SAAS,EAAC,qEAAqE,GAAG,EACxF,eAAM,SAAS,EAAC,sBAAsB,YAAE,KAAK,GAAQ,EACrD,KAAC,WAAW,IACV,SAAS,EAAC,6FAA6F,iBAC3F,MAAM,GAClB,IACK,GACW,EACtB,KAAC,mBAAmB,IAClB,KAAK,EAAC,OAAO,EACb,SAAS,EAAE,EAAE,CACX,6LAA6L,EAC7L,gBAAgB,CACjB,eACS,sBAAsB,EAChC,UAAU,EAAE,EAAE,EACd,WAAW,EAAE,CAAC,EAAE,YAEf,QAAQ,GACW,IACT,GACX,CACP,CAAC;AACJ,CAAC;AAED,+EAA+E;AAE/E;;;GAGG;AACH,SAAS,iBAAiB,CAAC,EACzB,IAAI,EACJ,IAAI,EAAE,IAAI,EACV,MAAM,GAAG,KAAK,EACd,SAAS,EACT,OAAO,EACP,QAAQ,GAQT;IACC,MAAM,KAAK,GAAG,OAAO,QAAQ,KAAK,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC;IAC3D,MAAM,QAAQ,GAAG,OAAO,CAAC,KAAK,CAAC,CAAC;IAEhC,MAAM,UAAU,GAAG,EAAE,CACnB,wFAAwF,EACxF,MAAM;QACJ,CAAC,CAAC,iEAAiE;QACnE,CAAC,CAAC,oHAAoH,EACxH,uCAAuC,EACvC,SAAS,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,EAAE,CACpB,iBAAiB,EACjB,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,yCAAyC,CACpE,CAAC;IAEF,MAAM,WAAW,GAAG,EAAE,CACpB,qBAAqB,EACrB,MAAM;QACJ,CAAC,CAAC,0BAA0B;QAC5B,CAAC,CAAC,yCAAyC,CAC9C,CAAC;IAEF,IAAI,IAAI,EAAE,CAAC;QACT,OAAO,CACL,KAAC,gBAAgB,IAAC,OAAO,QAAC,SAAS,EAAE,UAAU,YAC7C,MAAC,IAAI,IACH,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,eACL,mBAAmB,QAAQ,EAAE,aAC/B,mBAAmB,QAAQ,EAAE,aAErC,IAAI,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,iBAAc,MAAM,GAAG,EAC5D,eAAM,SAAS,EAAE,WAAW,YAAG,QAAQ,GAAQ,IAC1C,GACU,CACpB,CAAC;IACJ,CAAC;IAED,OAAO,CACL,KAAC,gBAAgB,IAAC,OAAO,QAAC,SAAS,EAAE,UAAU,YAC7C,kBACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,WAAW,eACV,mBAAmB,QAAQ,EAAE,aAC/B,mBAAmB,QAAQ,EAAE,aAErC,IAAI,IAAI,KAAC,IAAI,IAAC,SAAS,EAAE,WAAW,iBAAc,MAAM,GAAG,EAC5D,eAAM,SAAS,EAAE,WAAW,YAAG,QAAQ,GAAQ,IACxC,GACQ,CACpB,CAAC;AACJ,CAAC;AAED,+EAA+E;AAE/E;;GAEG;AACH,SAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACoB;IAC5B,OAAO,CACL,cACE,SAAS,EAAE,EAAE,CAAC,yBAAyB,EAAE,SAAS,CAAC,EACnD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,eACzB,qBAAqB,aACvB,qBAAqB,KACzB,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC;AAED,gFAAgF;AAEhF;;;GAGG;AACH,SAAS,kBAAkB,CAAC,EAC1B,gBAAgB,EAChB,QAAQ,GAIT;IACC,OAAO,CACL,MAAC,YAAY,eACX,KAAC,mBAAmB,IAAC,OAAO,kBAC1B,iBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iEAAiE,aACnE,kCAAkC,gBAC/B,cAAc,YAEzB,KAAC,YAAY,IAAC,SAAS,EAAC,wBAAwB,wBAAe,GACxD,GACW,EACtB,KAAC,mBAAmB,IAClB,KAAK,EAAC,KAAK,EACX,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,gBAAgB,CAAC,aACxC,kCAAkC,EAC1C,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,YAElC,QAAQ,GACW,IACT,CAChB,CAAC;AACJ,CAAC;AAED,oFAAoF;AAEpF;;GAEG;AACH,SAAS,sBAAsB,CAAC,EAC9B,IAAI,EAAE,IAAI,EACV,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EAGT;IACC,OAAO,CACL,MAAC,gBAAgB,IACf,SAAS,EAAE,EAAE,CAAC,gBAAgB,EAAE,SAAS,CAAC,KACtC,KAAK,aAER,IAAI,IAAI,KAAC,IAAI,IAAC,SAAS,EAAC,cAAc,iBAAa,MAAM,GAAG,EAC7D,yBAAO,QAAQ,GAAQ,IACN,CACpB,CAAC;AACJ,CAAC;AAED,yFAAyF;AAEzF,MAAM,2BAA2B,GAAG,qBAAqB,CAAC;AAE1D,qEAAqE;AAErE,OAAO,EACL,UAAU,EACV,eAAe,EACf,mBAAmB,EACnB,iBAAiB,EACjB,iBAAiB,EACjB,kBAAkB,EAClB,sBAAsB,EACtB,2BAA2B,GAC5B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@a5it/sync-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
4
4
|
"description": "Shared UI components for A5 apps.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "./dist/index.js",
|
|
@@ -67,7 +67,8 @@
|
|
|
67
67
|
"nuqs": "^2.7.2",
|
|
68
68
|
"react": ">=19.0.0",
|
|
69
69
|
"react-dom": ">=19.0.0",
|
|
70
|
-
"tailwind-merge": "^3.3.1"
|
|
70
|
+
"tailwind-merge": "^3.3.1",
|
|
71
|
+
"next": ">=13.0.0"
|
|
71
72
|
},
|
|
72
73
|
"devDependencies": {
|
|
73
74
|
"@types/react": "^19.2.2",
|