@customafk/lunas-ui 0.2.32 → 0.2.33
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/{alert-CqRM6LFa.d.cts → alert-V73ULWoO.d.mts} +7 -7
- package/dist/{alert-hSQjkSHn.d.mts → alert-mTjrFpkB.d.cts} +6 -6
- package/dist/{badge-BXCkfLW0.d.cts → badge-Cwb0fmkw.d.cts} +4 -4
- package/dist/{badge-BNlMwt54.d.mts → badge-DcQUUKY0.d.mts} +6 -6
- package/dist/{button-xc_1ixgJ.d.cts → button-Bc-MAOOY.d.cts} +5 -5
- package/dist/{button-DhUjRe5e.d.mts → button-W7L4JgMw.d.mts} +7 -7
- package/dist/cards/simple-card.d.mts +2 -2
- package/dist/data-display/statistic.d.cts +3 -3
- package/dist/data-display/statistic.d.mts +5 -5
- package/dist/{dialog-gZTogunf.d.cts → dialog-B8CvBgRs.d.mts} +12 -12
- package/dist/{dialog-KxgG7gFA.d.mts → dialog-CxPqgAES.d.cts} +12 -12
- package/dist/dialogs/detail-dialog/components/sidebar.d.cts +26 -26
- package/dist/dialogs/detail-dialog/components/sidebar.d.mts +26 -26
- package/dist/features/descriptions/index.d.cts +1 -1
- package/dist/features/descriptions/index.d.mts +6 -6
- package/dist/features/search-modal/index.d.cts +2 -2
- package/dist/features/tables/index.d.cts +1 -1
- package/dist/features/tables/index.d.mts +2 -2
- package/dist/features/tanstack-form/index.d.cts +1 -1
- package/dist/features/tanstack-form/index.d.mts +1 -1
- package/dist/{index-DdqgMofm.d.mts → index-3rfnp-Kj.d.mts} +27 -27
- package/dist/{index-22flsTNt.d.cts → index-B0tpV7YG.d.cts} +2 -2
- package/dist/{index-WCk8mTXV.d.mts → index-BQEmU6gw.d.cts} +411 -411
- package/dist/{index-DDPBbVVt.d.cts → index-CE6WacAh.d.mts} +106 -106
- package/dist/index.cjs +1 -1
- package/dist/index.d.cts +7 -7
- package/dist/index.d.mts +7 -7
- package/dist/index.mjs +1 -1
- package/dist/{input-CEYWz7lS.d.cts → input-BkbJ_jDH.d.mts} +5 -5
- package/dist/{input-BILuHVfC.d.mts → input-DgwlkE9s.d.cts} +4 -4
- package/dist/layouts/flex.d.cts +6 -6
- package/dist/layouts/flex.d.mts +8 -8
- package/dist/layouts/payment-layout/index.cjs +1 -1
- package/dist/layouts/payment-layout/index.d.cts +3 -0
- package/dist/layouts/payment-layout/index.d.mts +3 -0
- package/dist/layouts/payment-layout/index.mjs +1 -1
- package/dist/pages/FeatureDeveloping.d.cts +2 -2
- package/dist/pages/FeatureDeveloping.d.mts +2 -2
- package/dist/pages/FeatureFixing.d.cts +2 -2
- package/dist/pages/FeatureFixing.d.mts +2 -2
- package/dist/pages/LoginPage.d.cts +2 -2
- package/dist/pages/LoginPage.d.mts +2 -2
- package/dist/pages/NotAuthorized.d.cts +2 -2
- package/dist/pages/NotAuthorized.d.mts +2 -2
- package/dist/pages/NotFound.d.cts +2 -2
- package/dist/pages/NotFound.d.mts +2 -2
- package/dist/pages/RegisterPage.d.cts +2 -2
- package/dist/pages/RegisterPage.d.mts +2 -2
- package/dist/pages/VerifyEmailPage.d.cts +2 -2
- package/dist/pages/VerifyEmailPage.d.mts +2 -2
- package/dist/{payment-layout-BkSC6JkI.cjs → payment-layout-RVPi4-1C.cjs} +2 -2
- package/dist/payment-layout-RVPi4-1C.cjs.map +1 -0
- package/dist/{payment-layout-CafCw6lS.mjs → payment-layout-RldJzRGP.mjs} +2 -2
- package/dist/payment-layout-RldJzRGP.mjs.map +1 -0
- package/dist/typography/paragraph.d.cts +5 -5
- package/dist/typography/paragraph.d.mts +5 -5
- package/dist/ui/alert-dialog.d.cts +12 -12
- package/dist/ui/alert-dialog.d.mts +12 -12
- package/dist/ui/alert.d.cts +1 -1
- package/dist/ui/alert.d.mts +1 -1
- package/dist/ui/aspect-ratio.d.cts +2 -2
- package/dist/ui/aspect-ratio.d.mts +2 -2
- package/dist/ui/avatar.d.cts +4 -4
- package/dist/ui/avatar.d.mts +4 -4
- package/dist/ui/badge.d.cts +1 -1
- package/dist/ui/badge.d.mts +1 -1
- package/dist/ui/breadcrumb.d.cts +8 -8
- package/dist/ui/breadcrumb.d.mts +8 -8
- package/dist/ui/button-group.d.cts +7 -7
- package/dist/ui/button-group.d.mts +7 -7
- package/dist/ui/button.d.cts +1 -1
- package/dist/ui/button.d.mts +1 -1
- package/dist/ui/calendar.d.cts +4 -4
- package/dist/ui/calendar.d.mts +4 -4
- package/dist/ui/card.d.cts +8 -8
- package/dist/ui/card.d.mts +8 -8
- package/dist/ui/carousel.d.cts +7 -7
- package/dist/ui/carousel.d.mts +7 -7
- package/dist/ui/checkbox.d.cts +2 -2
- package/dist/ui/checkbox.d.mts +2 -2
- package/dist/ui/collapsible.d.cts +4 -4
- package/dist/ui/collapsible.d.mts +4 -4
- package/dist/ui/command.d.cts +11 -11
- package/dist/ui/command.d.mts +11 -11
- package/dist/ui/context-menu.d.cts +16 -16
- package/dist/ui/context-menu.d.mts +16 -16
- package/dist/ui/dialog.d.cts +1 -1
- package/dist/ui/dialog.d.mts +1 -1
- package/dist/ui/drawer.d.cts +11 -11
- package/dist/ui/drawer.d.mts +11 -11
- package/dist/ui/dropdown-menu.d.cts +16 -16
- package/dist/ui/dropdown-menu.d.mts +16 -16
- package/dist/ui/empty.d.cts +9 -9
- package/dist/ui/empty.d.mts +9 -9
- package/dist/ui/field.d.cts +24 -24
- package/dist/ui/field.d.mts +24 -24
- package/dist/ui/file-uploader.d.cts +2 -2
- package/dist/ui/file-uploader.d.mts +2 -2
- package/dist/ui/form.d.cts +10 -10
- package/dist/ui/form.d.mts +10 -10
- package/dist/ui/hover-card.d.cts +4 -4
- package/dist/ui/hover-card.d.mts +4 -4
- package/dist/ui/input-otp.d.cts +5 -5
- package/dist/ui/input-otp.d.mts +5 -5
- package/dist/ui/input.d.cts +1 -1
- package/dist/ui/input.d.mts +1 -1
- package/dist/ui/inputs/search-input.d.cts +3 -3
- package/dist/ui/inputs/search-input.d.mts +3 -3
- package/dist/ui/item.d.cts +16 -16
- package/dist/ui/item.d.mts +16 -16
- package/dist/ui/label.d.cts +2 -2
- package/dist/ui/label.d.mts +2 -2
- package/dist/ui/menubar.d.cts +17 -17
- package/dist/ui/menubar.d.mts +17 -17
- package/dist/ui/multi-select.d.cts +2 -2
- package/dist/ui/multi-select.d.mts +3 -3
- package/dist/ui/navigation-menu.d.cts +11 -11
- package/dist/ui/navigation-menu.d.mts +11 -11
- package/dist/ui/pagination.d.cts +9 -9
- package/dist/ui/pagination.d.mts +9 -9
- package/dist/ui/popover.d.cts +6 -6
- package/dist/ui/popover.d.mts +6 -6
- package/dist/ui/progress.d.cts +2 -2
- package/dist/ui/progress.d.mts +2 -2
- package/dist/ui/radio-group.d.cts +3 -3
- package/dist/ui/radio-group.d.mts +3 -3
- package/dist/ui/resizable.d.cts +9 -9
- package/dist/ui/resizable.d.mts +9 -9
- package/dist/ui/scroll-area.d.cts +5 -5
- package/dist/ui/scroll-area.d.mts +5 -5
- package/dist/ui/select.d.cts +9 -9
- package/dist/ui/select.d.mts +9 -9
- package/dist/ui/separator.d.cts +2 -2
- package/dist/ui/separator.d.mts +2 -2
- package/dist/ui/sheet.d.cts +9 -9
- package/dist/ui/sheet.d.mts +9 -9
- package/dist/ui/sidebar.d.cts +28 -28
- package/dist/ui/sidebar.d.mts +28 -28
- package/dist/ui/skeleton.d.cts +2 -2
- package/dist/ui/skeleton.d.mts +2 -2
- package/dist/ui/slider.d.cts +2 -2
- package/dist/ui/slider.d.mts +2 -2
- package/dist/ui/sonner.d.cts +2 -2
- package/dist/ui/sonner.d.mts +2 -2
- package/dist/ui/spinner.d.cts +2 -2
- package/dist/ui/spinner.d.mts +2 -2
- package/dist/ui/switch.d.cts +2 -2
- package/dist/ui/switch.d.mts +2 -2
- package/dist/ui/table.d.cts +17 -17
- package/dist/ui/table.d.mts +17 -17
- package/dist/ui/tabs.d.cts +5 -5
- package/dist/ui/tabs.d.mts +5 -5
- package/dist/ui/textarea.d.cts +2 -2
- package/dist/ui/textarea.d.mts +2 -2
- package/dist/ui/toggle-group.d.cts +3 -3
- package/dist/ui/toggle-group.d.mts +3 -3
- package/dist/ui/toggle.d.cts +4 -4
- package/dist/ui/toggle.d.mts +2 -2
- package/dist/ui/tooltip.d.cts +5 -5
- package/dist/ui/tooltip.d.mts +5 -5
- package/package.json +1 -1
- package/dist/payment-layout-BkSC6JkI.cjs.map +0 -1
- package/dist/payment-layout-CafCw6lS.mjs.map +0 -1
package/dist/ui/sonner.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react235 from "react";
|
|
2
2
|
import { toast } from "sonner";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/sonner.d.ts
|
|
@@ -18,7 +18,7 @@ import { toast } from "sonner";
|
|
|
18
18
|
* toast.error('Something went wrong.');
|
|
19
19
|
* ```
|
|
20
20
|
*/
|
|
21
|
-
declare const Toaster: () =>
|
|
21
|
+
declare const Toaster: () => react235.JSX.Element;
|
|
22
22
|
//#endregion
|
|
23
23
|
export { Toaster, Toaster as default, toast };
|
|
24
24
|
//# sourceMappingURL=sonner.d.mts.map
|
package/dist/ui/spinner.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react203 from "react";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/spinner.d.ts
|
|
4
4
|
|
|
@@ -19,7 +19,7 @@ import * as react66 from "react";
|
|
|
19
19
|
declare function Spinner({
|
|
20
20
|
className,
|
|
21
21
|
...props
|
|
22
|
-
}: React.ComponentProps<'svg'>):
|
|
22
|
+
}: React.ComponentProps<'svg'>): react203.JSX.Element;
|
|
23
23
|
//#endregion
|
|
24
24
|
export { Spinner };
|
|
25
25
|
//# sourceMappingURL=spinner.d.cts.map
|
package/dist/ui/spinner.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react236 from "react";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/spinner.d.ts
|
|
4
4
|
|
|
@@ -19,7 +19,7 @@ import * as react264 from "react";
|
|
|
19
19
|
declare function Spinner({
|
|
20
20
|
className,
|
|
21
21
|
...props
|
|
22
|
-
}: React.ComponentProps<'svg'>):
|
|
22
|
+
}: React.ComponentProps<'svg'>): react236.JSX.Element;
|
|
23
23
|
//#endregion
|
|
24
24
|
export { Spinner };
|
|
25
25
|
//# sourceMappingURL=spinner.d.mts.map
|
package/dist/ui/switch.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react129 from "react";
|
|
2
2
|
import { Switch as Switch$1 } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/switch.d.ts
|
|
@@ -20,7 +20,7 @@ import { Switch as Switch$1 } from "radix-ui";
|
|
|
20
20
|
declare function Switch({
|
|
21
21
|
className,
|
|
22
22
|
...props
|
|
23
|
-
}: React.ComponentProps<typeof Switch$1.Root>):
|
|
23
|
+
}: React.ComponentProps<typeof Switch$1.Root>): react129.JSX.Element;
|
|
24
24
|
//#endregion
|
|
25
25
|
export { Switch };
|
|
26
26
|
//# sourceMappingURL=switch.d.cts.map
|
package/dist/ui/switch.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react324 from "react";
|
|
2
2
|
import { Switch as Switch$1 } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/switch.d.ts
|
|
@@ -20,7 +20,7 @@ import { Switch as Switch$1 } from "radix-ui";
|
|
|
20
20
|
declare function Switch({
|
|
21
21
|
className,
|
|
22
22
|
...props
|
|
23
|
-
}: React.ComponentProps<typeof Switch$1.Root>):
|
|
23
|
+
}: React.ComponentProps<typeof Switch$1.Root>): react324.JSX.Element;
|
|
24
24
|
//#endregion
|
|
25
25
|
export { Switch };
|
|
26
26
|
//# sourceMappingURL=switch.d.mts.map
|
package/dist/ui/table.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react258 from "react";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/table.d.ts
|
|
4
4
|
|
|
@@ -29,45 +29,45 @@ import * as react170 from "react";
|
|
|
29
29
|
* </Table>
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
|
-
declare const Table:
|
|
32
|
+
declare const Table: react258.MemoExoticComponent<({
|
|
33
33
|
className,
|
|
34
34
|
...props
|
|
35
|
-
}: React.ComponentProps<"table">) =>
|
|
35
|
+
}: React.ComponentProps<"table">) => react258.JSX.Element>;
|
|
36
36
|
/** The `<thead>` element containing one or more header rows. */
|
|
37
|
-
declare const TableHeader:
|
|
37
|
+
declare const TableHeader: react258.MemoExoticComponent<({
|
|
38
38
|
className,
|
|
39
39
|
...props
|
|
40
|
-
}: React.ComponentProps<"thead">) =>
|
|
40
|
+
}: React.ComponentProps<"thead">) => react258.JSX.Element>;
|
|
41
41
|
/** The `<tbody>` element containing data rows with hover and selection styling. */
|
|
42
|
-
declare const TableBody:
|
|
42
|
+
declare const TableBody: react258.MemoExoticComponent<({
|
|
43
43
|
className,
|
|
44
44
|
...props
|
|
45
|
-
}: React.ComponentProps<"tbody">) =>
|
|
45
|
+
}: React.ComponentProps<"tbody">) => react258.JSX.Element>;
|
|
46
46
|
/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */
|
|
47
|
-
declare const TableFooter:
|
|
47
|
+
declare const TableFooter: react258.MemoExoticComponent<({
|
|
48
48
|
className,
|
|
49
49
|
...props
|
|
50
|
-
}: React.ComponentProps<"tfoot">) =>
|
|
50
|
+
}: React.ComponentProps<"tfoot">) => react258.JSX.Element>;
|
|
51
51
|
/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */
|
|
52
|
-
declare const TableRow:
|
|
52
|
+
declare const TableRow: react258.MemoExoticComponent<({
|
|
53
53
|
className,
|
|
54
54
|
...props
|
|
55
|
-
}: React.ComponentProps<"tr">) =>
|
|
55
|
+
}: React.ComponentProps<"tr">) => react258.JSX.Element>;
|
|
56
56
|
/** A `<th>` column header cell with medium-weight text and left alignment. */
|
|
57
|
-
declare const TableHead:
|
|
57
|
+
declare const TableHead: react258.MemoExoticComponent<({
|
|
58
58
|
className,
|
|
59
59
|
...props
|
|
60
|
-
}: React.ComponentProps<"th">) =>
|
|
60
|
+
}: React.ComponentProps<"th">) => react258.JSX.Element>;
|
|
61
61
|
/** A standard `<td>` data cell used inside a TableRow. */
|
|
62
|
-
declare const TableCell:
|
|
62
|
+
declare const TableCell: react258.MemoExoticComponent<({
|
|
63
63
|
className,
|
|
64
64
|
...props
|
|
65
|
-
}: React.ComponentProps<"td">) =>
|
|
65
|
+
}: React.ComponentProps<"td">) => react258.JSX.Element>;
|
|
66
66
|
/** An accessible `<caption>` element displayed below the table. */
|
|
67
|
-
declare const TableCaption:
|
|
67
|
+
declare const TableCaption: react258.MemoExoticComponent<({
|
|
68
68
|
className,
|
|
69
69
|
...props
|
|
70
|
-
}: React.ComponentProps<"caption">) =>
|
|
70
|
+
}: React.ComponentProps<"caption">) => react258.JSX.Element>;
|
|
71
71
|
//#endregion
|
|
72
72
|
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
|
73
73
|
//# sourceMappingURL=table.d.cts.map
|
package/dist/ui/table.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react239 from "react";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/table.d.ts
|
|
4
4
|
|
|
@@ -29,45 +29,45 @@ import * as react265 from "react";
|
|
|
29
29
|
* </Table>
|
|
30
30
|
* ```
|
|
31
31
|
*/
|
|
32
|
-
declare const Table:
|
|
32
|
+
declare const Table: react239.MemoExoticComponent<({
|
|
33
33
|
className,
|
|
34
34
|
...props
|
|
35
|
-
}: React.ComponentProps<"table">) =>
|
|
35
|
+
}: React.ComponentProps<"table">) => react239.JSX.Element>;
|
|
36
36
|
/** The `<thead>` element containing one or more header rows. */
|
|
37
|
-
declare const TableHeader:
|
|
37
|
+
declare const TableHeader: react239.MemoExoticComponent<({
|
|
38
38
|
className,
|
|
39
39
|
...props
|
|
40
|
-
}: React.ComponentProps<"thead">) =>
|
|
40
|
+
}: React.ComponentProps<"thead">) => react239.JSX.Element>;
|
|
41
41
|
/** The `<tbody>` element containing data rows with hover and selection styling. */
|
|
42
|
-
declare const TableBody:
|
|
42
|
+
declare const TableBody: react239.MemoExoticComponent<({
|
|
43
43
|
className,
|
|
44
44
|
...props
|
|
45
|
-
}: React.ComponentProps<"tbody">) =>
|
|
45
|
+
}: React.ComponentProps<"tbody">) => react239.JSX.Element>;
|
|
46
46
|
/** The `<tfoot>` element for summary or aggregate rows at the bottom of the table. */
|
|
47
|
-
declare const TableFooter:
|
|
47
|
+
declare const TableFooter: react239.MemoExoticComponent<({
|
|
48
48
|
className,
|
|
49
49
|
...props
|
|
50
|
-
}: React.ComponentProps<"tfoot">) =>
|
|
50
|
+
}: React.ComponentProps<"tfoot">) => react239.JSX.Element>;
|
|
51
51
|
/** A single `<tr>` row used inside TableHeader, TableBody, or TableFooter. */
|
|
52
|
-
declare const TableRow:
|
|
52
|
+
declare const TableRow: react239.MemoExoticComponent<({
|
|
53
53
|
className,
|
|
54
54
|
...props
|
|
55
|
-
}: React.ComponentProps<"tr">) =>
|
|
55
|
+
}: React.ComponentProps<"tr">) => react239.JSX.Element>;
|
|
56
56
|
/** A `<th>` column header cell with medium-weight text and left alignment. */
|
|
57
|
-
declare const TableHead:
|
|
57
|
+
declare const TableHead: react239.MemoExoticComponent<({
|
|
58
58
|
className,
|
|
59
59
|
...props
|
|
60
|
-
}: React.ComponentProps<"th">) =>
|
|
60
|
+
}: React.ComponentProps<"th">) => react239.JSX.Element>;
|
|
61
61
|
/** A standard `<td>` data cell used inside a TableRow. */
|
|
62
|
-
declare const TableCell:
|
|
62
|
+
declare const TableCell: react239.MemoExoticComponent<({
|
|
63
63
|
className,
|
|
64
64
|
...props
|
|
65
|
-
}: React.ComponentProps<"td">) =>
|
|
65
|
+
}: React.ComponentProps<"td">) => react239.JSX.Element>;
|
|
66
66
|
/** An accessible `<caption>` element displayed below the table. */
|
|
67
|
-
declare const TableCaption:
|
|
67
|
+
declare const TableCaption: react239.MemoExoticComponent<({
|
|
68
68
|
className,
|
|
69
69
|
...props
|
|
70
|
-
}: React.ComponentProps<"caption">) =>
|
|
70
|
+
}: React.ComponentProps<"caption">) => react239.JSX.Element>;
|
|
71
71
|
//#endregion
|
|
72
72
|
export { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };
|
|
73
73
|
//# sourceMappingURL=table.d.mts.map
|
package/dist/ui/tabs.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react199 from "react";
|
|
2
2
|
import { Tabs as Tabs$1 } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/tabs.d.ts
|
|
@@ -23,22 +23,22 @@ import { Tabs as Tabs$1 } from "radix-ui";
|
|
|
23
23
|
declare function Tabs({
|
|
24
24
|
className,
|
|
25
25
|
...props
|
|
26
|
-
}: React.ComponentProps<typeof Tabs$1.Root>):
|
|
26
|
+
}: React.ComponentProps<typeof Tabs$1.Root>): react199.JSX.Element;
|
|
27
27
|
/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */
|
|
28
28
|
declare function TabsList({
|
|
29
29
|
className,
|
|
30
30
|
...props
|
|
31
|
-
}: React.ComponentProps<typeof Tabs$1.List>):
|
|
31
|
+
}: React.ComponentProps<typeof Tabs$1.List>): react199.JSX.Element;
|
|
32
32
|
/** Individual tab button that activates its associated `TabsContent` panel when clicked. */
|
|
33
33
|
declare function TabsTrigger({
|
|
34
34
|
className,
|
|
35
35
|
...props
|
|
36
|
-
}: React.ComponentProps<typeof Tabs$1.Trigger>):
|
|
36
|
+
}: React.ComponentProps<typeof Tabs$1.Trigger>): react199.JSX.Element;
|
|
37
37
|
/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */
|
|
38
38
|
declare function TabsContent({
|
|
39
39
|
className,
|
|
40
40
|
...props
|
|
41
|
-
}: React.ComponentProps<typeof Tabs$1.Content>):
|
|
41
|
+
}: React.ComponentProps<typeof Tabs$1.Content>): react199.JSX.Element;
|
|
42
42
|
//#endregion
|
|
43
43
|
export { Tabs, TabsContent, TabsList, TabsTrigger };
|
|
44
44
|
//# sourceMappingURL=tabs.d.cts.map
|
package/dist/ui/tabs.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react267 from "react";
|
|
2
2
|
import { Tabs as Tabs$1 } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/tabs.d.ts
|
|
@@ -23,22 +23,22 @@ import { Tabs as Tabs$1 } from "radix-ui";
|
|
|
23
23
|
declare function Tabs({
|
|
24
24
|
className,
|
|
25
25
|
...props
|
|
26
|
-
}: React.ComponentProps<typeof Tabs$1.Root>):
|
|
26
|
+
}: React.ComponentProps<typeof Tabs$1.Root>): react267.JSX.Element;
|
|
27
27
|
/** Container that holds the row of `TabsTrigger` buttons with a muted background pill style. */
|
|
28
28
|
declare function TabsList({
|
|
29
29
|
className,
|
|
30
30
|
...props
|
|
31
|
-
}: React.ComponentProps<typeof Tabs$1.List>):
|
|
31
|
+
}: React.ComponentProps<typeof Tabs$1.List>): react267.JSX.Element;
|
|
32
32
|
/** Individual tab button that activates its associated `TabsContent` panel when clicked. */
|
|
33
33
|
declare function TabsTrigger({
|
|
34
34
|
className,
|
|
35
35
|
...props
|
|
36
|
-
}: React.ComponentProps<typeof Tabs$1.Trigger>):
|
|
36
|
+
}: React.ComponentProps<typeof Tabs$1.Trigger>): react267.JSX.Element;
|
|
37
37
|
/** Panel whose visibility is controlled by the active `TabsTrigger`; each panel must have a matching `value`. */
|
|
38
38
|
declare function TabsContent({
|
|
39
39
|
className,
|
|
40
40
|
...props
|
|
41
|
-
}: React.ComponentProps<typeof Tabs$1.Content>):
|
|
41
|
+
}: React.ComponentProps<typeof Tabs$1.Content>): react267.JSX.Element;
|
|
42
42
|
//#endregion
|
|
43
43
|
export { Tabs, TabsContent, TabsList, TabsTrigger };
|
|
44
44
|
//# sourceMappingURL=tabs.d.mts.map
|
package/dist/ui/textarea.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react300 from "react";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/textarea.d.ts
|
|
4
4
|
|
|
@@ -24,7 +24,7 @@ declare function Textarea({
|
|
|
24
24
|
}: React.ComponentProps<'textarea'> & {
|
|
25
25
|
/** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */
|
|
26
26
|
onValueChange?: (value: string) => void;
|
|
27
|
-
}):
|
|
27
|
+
}): react300.JSX.Element;
|
|
28
28
|
//#endregion
|
|
29
29
|
export { Textarea };
|
|
30
30
|
//# sourceMappingURL=textarea.d.cts.map
|
package/dist/ui/textarea.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react325 from "react";
|
|
2
2
|
|
|
3
3
|
//#region packages/components/ui/textarea.d.ts
|
|
4
4
|
|
|
@@ -24,7 +24,7 @@ declare function Textarea({
|
|
|
24
24
|
}: React.ComponentProps<'textarea'> & {
|
|
25
25
|
/** Convenience callback that receives the raw string value on every change, bypassing the synthetic event. */
|
|
26
26
|
onValueChange?: (value: string) => void;
|
|
27
|
-
}):
|
|
27
|
+
}): react325.JSX.Element;
|
|
28
28
|
//#endregion
|
|
29
29
|
export { Textarea };
|
|
30
30
|
//# sourceMappingURL=textarea.d.mts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { toggleVariants } from "./toggle.cjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react195 from "react";
|
|
3
3
|
import { VariantProps } from "class-variance-authority";
|
|
4
4
|
import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
|
|
5
5
|
|
|
@@ -25,7 +25,7 @@ declare function ToggleGroup({
|
|
|
25
25
|
size,
|
|
26
26
|
children,
|
|
27
27
|
...props
|
|
28
|
-
}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>):
|
|
28
|
+
}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react195.JSX.Element;
|
|
29
29
|
/** A single item/button within a ToggleGroup that inherits the group's variant and size. */
|
|
30
30
|
declare function ToggleGroupItem({
|
|
31
31
|
className,
|
|
@@ -33,7 +33,7 @@ declare function ToggleGroupItem({
|
|
|
33
33
|
variant,
|
|
34
34
|
size,
|
|
35
35
|
...props
|
|
36
|
-
}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>):
|
|
36
|
+
}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react195.JSX.Element;
|
|
37
37
|
//#endregion
|
|
38
38
|
export { ToggleGroup, ToggleGroupItem };
|
|
39
39
|
//# sourceMappingURL=toggle-group.d.cts.map
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { toggleVariants } from "./toggle.mjs";
|
|
2
|
-
import * as
|
|
2
|
+
import * as react296 from "react";
|
|
3
3
|
import { VariantProps } from "class-variance-authority";
|
|
4
4
|
import { ToggleGroup as ToggleGroup$1 } from "radix-ui";
|
|
5
5
|
|
|
@@ -25,7 +25,7 @@ declare function ToggleGroup({
|
|
|
25
25
|
size,
|
|
26
26
|
children,
|
|
27
27
|
...props
|
|
28
|
-
}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>):
|
|
28
|
+
}: React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants>): react296.JSX.Element;
|
|
29
29
|
/** A single item/button within a ToggleGroup that inherits the group's variant and size. */
|
|
30
30
|
declare function ToggleGroupItem({
|
|
31
31
|
className,
|
|
@@ -33,7 +33,7 @@ declare function ToggleGroupItem({
|
|
|
33
33
|
variant,
|
|
34
34
|
size,
|
|
35
35
|
...props
|
|
36
|
-
}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>):
|
|
36
|
+
}: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): react296.JSX.Element;
|
|
37
37
|
//#endregion
|
|
38
38
|
export { ToggleGroup, ToggleGroupItem };
|
|
39
39
|
//# sourceMappingURL=toggle-group.d.mts.map
|
package/dist/ui/toggle.d.cts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import * as
|
|
2
|
-
import * as
|
|
1
|
+
import * as react197 from "react";
|
|
2
|
+
import * as class_variance_authority_types8 from "class-variance-authority/types";
|
|
3
3
|
import { VariantProps } from "class-variance-authority";
|
|
4
4
|
import { Toggle as Toggle$1 } from "radix-ui";
|
|
5
5
|
|
|
@@ -7,7 +7,7 @@ import { Toggle as Toggle$1 } from "radix-ui";
|
|
|
7
7
|
declare const toggleVariants: (props?: ({
|
|
8
8
|
variant?: "default" | "outline" | null | undefined;
|
|
9
9
|
size?: "sm" | "lg" | "default" | null | undefined;
|
|
10
|
-
} &
|
|
10
|
+
} & class_variance_authority_types8.ClassProp) | undefined) => string;
|
|
11
11
|
/**
|
|
12
12
|
* A two-state button that switches between pressed (`on`) and unpressed (`off`).
|
|
13
13
|
*
|
|
@@ -26,7 +26,7 @@ declare function Toggle({
|
|
|
26
26
|
variant,
|
|
27
27
|
size,
|
|
28
28
|
...props
|
|
29
|
-
}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>):
|
|
29
|
+
}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react197.JSX.Element;
|
|
30
30
|
//#endregion
|
|
31
31
|
export { Toggle, toggleVariants };
|
|
32
32
|
//# sourceMappingURL=toggle.d.cts.map
|
package/dist/ui/toggle.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react295 from "react";
|
|
2
2
|
import { VariantProps } from "class-variance-authority";
|
|
3
3
|
import { Toggle as Toggle$1 } from "radix-ui";
|
|
4
4
|
import * as class_variance_authority_types11 from "class-variance-authority/types";
|
|
@@ -26,7 +26,7 @@ declare function Toggle({
|
|
|
26
26
|
variant,
|
|
27
27
|
size,
|
|
28
28
|
...props
|
|
29
|
-
}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>):
|
|
29
|
+
}: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants>): react295.JSX.Element;
|
|
30
30
|
//#endregion
|
|
31
31
|
export { Toggle, toggleVariants };
|
|
32
32
|
//# sourceMappingURL=toggle.d.mts.map
|
package/dist/ui/tooltip.d.cts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react293 from "react";
|
|
2
2
|
import { Tooltip as Tooltip$1 } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/tooltip.d.ts
|
|
@@ -19,7 +19,7 @@ import { Tooltip as Tooltip$1 } from "radix-ui";
|
|
|
19
19
|
declare function TooltipProvider({
|
|
20
20
|
delayDuration,
|
|
21
21
|
...props
|
|
22
|
-
}: React.ComponentProps<typeof Tooltip$1.Provider>):
|
|
22
|
+
}: React.ComponentProps<typeof Tooltip$1.Provider>): react293.JSX.Element;
|
|
23
23
|
/**
|
|
24
24
|
* Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
|
|
25
25
|
*
|
|
@@ -38,18 +38,18 @@ declare function TooltipProvider({
|
|
|
38
38
|
*/
|
|
39
39
|
declare function Tooltip({
|
|
40
40
|
...props
|
|
41
|
-
}: React.ComponentProps<typeof Tooltip$1.Root>):
|
|
41
|
+
}: React.ComponentProps<typeof Tooltip$1.Root>): react293.JSX.Element;
|
|
42
42
|
/** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
|
|
43
43
|
declare function TooltipTrigger({
|
|
44
44
|
...props
|
|
45
|
-
}: React.ComponentProps<typeof Tooltip$1.Trigger>):
|
|
45
|
+
}: React.ComponentProps<typeof Tooltip$1.Trigger>): react293.JSX.Element;
|
|
46
46
|
/** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
|
|
47
47
|
declare function TooltipContent({
|
|
48
48
|
className,
|
|
49
49
|
sideOffset,
|
|
50
50
|
children,
|
|
51
51
|
...props
|
|
52
|
-
}: React.ComponentProps<typeof Tooltip$1.Content>):
|
|
52
|
+
}: React.ComponentProps<typeof Tooltip$1.Content>): react293.JSX.Element;
|
|
53
53
|
//#endregion
|
|
54
54
|
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
55
55
|
//# sourceMappingURL=tooltip.d.cts.map
|
package/dist/ui/tooltip.d.mts
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as
|
|
1
|
+
import * as react231 from "react";
|
|
2
2
|
import { Tooltip as Tooltip$1 } from "radix-ui";
|
|
3
3
|
|
|
4
4
|
//#region packages/components/ui/tooltip.d.ts
|
|
@@ -19,7 +19,7 @@ import { Tooltip as Tooltip$1 } from "radix-ui";
|
|
|
19
19
|
declare function TooltipProvider({
|
|
20
20
|
delayDuration,
|
|
21
21
|
...props
|
|
22
|
-
}: React.ComponentProps<typeof Tooltip$1.Provider>):
|
|
22
|
+
}: React.ComponentProps<typeof Tooltip$1.Provider>): react231.JSX.Element;
|
|
23
23
|
/**
|
|
24
24
|
* Floating label that reveals supplementary text when the user hovers or focuses its trigger element.
|
|
25
25
|
*
|
|
@@ -38,18 +38,18 @@ declare function TooltipProvider({
|
|
|
38
38
|
*/
|
|
39
39
|
declare function Tooltip({
|
|
40
40
|
...props
|
|
41
|
-
}: React.ComponentProps<typeof Tooltip$1.Root>):
|
|
41
|
+
}: React.ComponentProps<typeof Tooltip$1.Root>): react231.JSX.Element;
|
|
42
42
|
/** Element that opens the tooltip on hover/focus; use `asChild` to forward props to a custom child element. */
|
|
43
43
|
declare function TooltipTrigger({
|
|
44
44
|
...props
|
|
45
|
-
}: React.ComponentProps<typeof Tooltip$1.Trigger>):
|
|
45
|
+
}: React.ComponentProps<typeof Tooltip$1.Trigger>): react231.JSX.Element;
|
|
46
46
|
/** Floating panel rendered in a portal that displays the tooltip text with a directional arrow. */
|
|
47
47
|
declare function TooltipContent({
|
|
48
48
|
className,
|
|
49
49
|
sideOffset,
|
|
50
50
|
children,
|
|
51
51
|
...props
|
|
52
|
-
}: React.ComponentProps<typeof Tooltip$1.Content>):
|
|
52
|
+
}: React.ComponentProps<typeof Tooltip$1.Content>): react231.JSX.Element;
|
|
53
53
|
//#endregion
|
|
54
54
|
export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };
|
|
55
55
|
//# sourceMappingURL=tooltip.d.mts.map
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"payment-layout-BkSC6JkI.cjs","names":["open","TooltipProvider","Sheet","SheetContent","SheetHeader","SheetTitle","SheetDescription","Button","MenuIcon","ShoppingCartIcon","Slot","Tooltip","TooltipTrigger","TooltipContent","UserDataDisplay: React.FC<UserDataDisplayProps>","Flex","Avatar","AvatarFallback","colorHashLight","UserRoundIcon","Paragraph","PaymentLayoutHeader: React.FC<{\n user?: PaymentLayoutUser | null;\n onLogin?: () => void;\n onLogout?: () => void;\n}>","Button","MenuIcon","ShoppingCartIcon","DropdownMenu","DropdownMenuTrigger","DropdownMenuContent","DropdownMenuLabel","DropdownMenuSeparator","DropdownMenuGroup","DropdownMenuItem","LogOutIcon","PaymentLayout: React.FC<\n React.PropsWithChildren<{\n /** ID of the currently active navigation item; matched against each item's `id` to apply the active style. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: {\n groupcontent: {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n items: {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. */\n onClick?: () => void;\n }[];\n }[];\n };\n /** Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. */\n user?: PaymentLayoutUser | null;\n /** Called when the login button in the header is clicked (only shown when `user` is absent). */\n onLogin?: () => void;\n /** Called when the logout item in the user dropdown is clicked. */\n onLogout?: () => void;\n }>\n>"],"sources":["../packages/components/layouts/payment-layout/components/sidebar.tsx","../packages/components/layouts/payment-layout/components/header.tsx","../packages/components/layouts/payment-layout/index.tsx"],"sourcesContent":["'use client';\n\nimport { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';\n\nimport { MenuIcon, PanelLeftIcon, ShoppingCartIcon } from 'lucide-react';\n\nimport { useIsMobile } from '@customafk/react-toolkit/hooks/useMobile';\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Separator } from '@/components/ui/separator';\nimport { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';\nimport { Skeleton } from '@/components/ui/skeleton';\nimport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';\n\nimport { Slot } from '@radix-ui/react-slot';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nconst SIDEBAR_COOKIE_NAME = 'sidebar_state';\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;\nconst SIDEBAR_WIDTH = '16rem';\nconst SIDEBAR_WIDTH_MOBILE = '18rem';\nconst SIDEBAR_WIDTH_ICON = '3rem';\nconst SIDEBAR_KEYBOARD_SHORTCUT = 'b';\n\ntype SidebarContextProps = {\n state: 'expanded' | 'collapsed';\n open: boolean;\n setOpen: (open: boolean) => void;\n openMobile: boolean;\n setOpenMobile: (open: boolean) => void;\n isMobile: boolean;\n toggleSidebar: () => void;\n};\n\nconst SidebarContext = createContext<SidebarContextProps | null>(null);\n\nfunction useSidebar() {\n const context = useContext(SidebarContext);\n if (!context) {\n throw new Error('useSidebar must be used within a SidebarProvider.');\n }\n\n return context;\n}\n\nfunction SidebarProvider({\n defaultOpen = true,\n open: openProp,\n onOpenChange: setOpenProp,\n className,\n style,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}) {\n const isMobile = useIsMobile();\n const [openMobile, setOpenMobile] = useState(false);\n\n // This is the internal state of the sidebar.\n // We use openProp and setOpenProp for control from outside the component.\n const [_open, _setOpen] = useState(defaultOpen);\n const open = openProp ?? _open;\n const setOpen = useCallback(\n (value: boolean | ((value: boolean) => boolean)) => {\n const openState = typeof value === 'function' ? value(open) : value;\n if (setOpenProp) {\n setOpenProp(openState);\n } else {\n _setOpen(openState);\n }\n\n // This sets the cookie to keep the sidebar state.\n // biome-ignore lint/suspicious/noDocumentCookie: true\n document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;\n },\n [setOpenProp, open]\n );\n\n // Helper to toggle the sidebar.\n const toggleSidebar = useCallback(() => {\n return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);\n }, [isMobile, setOpen]);\n\n // Adds a keyboard shortcut to toggle the sidebar.\n useEffect(() => {\n const handleKeyDown = (event: KeyboardEvent) => {\n if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {\n event.preventDefault();\n toggleSidebar();\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [toggleSidebar]);\n\n // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n // This makes it easier to style the sidebar with Tailwind classes.\n const state = open ? 'expanded' : 'collapsed';\n\n const contextValue = useMemo<SidebarContextProps>(\n () => ({\n state,\n open,\n setOpen,\n isMobile,\n openMobile,\n setOpenMobile,\n toggleSidebar,\n }),\n [state, open, setOpen, isMobile, openMobile, toggleSidebar]\n );\n\n return (\n <SidebarContext.Provider value={contextValue}>\n <TooltipProvider delayDuration={0}>\n <div\n data-slot=\"sidebar-wrapper\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH,\n '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,\n ...style,\n } as React.CSSProperties\n }\n className={cn('group/sidebar-wrapper flex h-dvh w-full', className)}\n {...props}\n >\n {children}\n </div>\n </TooltipProvider>\n </SidebarContext.Provider>\n );\n}\n\nfunction Sidebar({\n side = 'left',\n variant = 'sidebar',\n collapsible = 'offcanvas',\n className,\n children,\n ...props\n}: React.ComponentProps<'div'> & {\n side?: 'left' | 'right';\n variant?: 'sidebar' | 'floating' | 'inset';\n collapsible?: 'offcanvas' | 'icon' | 'none';\n}) {\n const { isMobile, state, openMobile, setOpenMobile, toggleSidebar } = useSidebar();\n\n if (collapsible === 'none') {\n return (\n <aside data-slot=\"sidebar\" className={cn('flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground', className)} {...props}>\n {children}\n </aside>\n );\n }\n\n if (isMobile) {\n return (\n <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n <SheetContent\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar\"\n data-mobile=\"true\"\n className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground sm:max-w-3xs [&>button]:hidden\"\n style={\n {\n '--sidebar-width': SIDEBAR_WIDTH_MOBILE,\n } as React.CSSProperties\n }\n side={side}\n >\n <SheetHeader className=\"sr-only\">\n <SheetTitle>Sidebar</SheetTitle>\n <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n </SheetHeader>\n <div className=\"flex size-full flex-col\">\n <div className=\"flex flex-0 items-center gap-x-2 border-border-weak border-b p-2 pr-4\">\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className={cn('size-10 rounded-full', className)}\n onClick={event => {\n toggleSidebar();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n <div className=\"ml-2 flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Established 2023</span>\n </div>\n </div>\n <div className=\"flex flex-1 flex-col p-2\">{children}</div>\n </div>\n </SheetContent>\n </Sheet>\n );\n }\n\n return (\n <aside\n className=\"group peer hidden bg-card text-sidebar-foreground md:block\"\n data-state={state}\n data-collapsible={state === 'collapsed' ? collapsible : ''}\n data-variant={variant}\n data-side={side}\n data-slot=\"sidebar\"\n >\n {/* This is what handles the sidebar gap on desktop */}\n <div\n data-slot=\"sidebar-gap\"\n className={cn(\n 'relative',\n 'bg-transparent',\n 'transition-[width] duration-200 ease-linear',\n 'h-(--header-height) w-(--sidebar-width)',\n 'sm:h-[calc(var(--header-height)+0.5rem)]',\n 'group-data-[collapsible=offcanvas]:w-0',\n 'group-data-[side=right]:rotate-180',\n variant === 'floating' || variant === 'inset'\n ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'\n )}\n />\n <div\n data-slot=\"sidebar-container\"\n className={cn(\n 'hidden md:flex',\n 'fixed inset-y-0 top-14 z-10 shadow-nav',\n 'h-[calc(100dvh-3.5rem)] w-(--sidebar-width)',\n 'transition-[left,right,width] duration-200 ease-linear',\n side === 'left' && 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]',\n side === 'right' && 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',\n // Adjust the padding for floating and inset variants.\n variant === 'floating' || variant === 'inset'\n ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'\n : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',\n className\n )}\n {...props}\n >\n <div\n data-sidebar=\"sidebar\"\n data-slot=\"sidebar-inner\"\n className={cn(\n 'flex size-full flex-col',\n 'group-data-[variant=floating]:rounded-lg',\n 'group-data-[variant=floating]:border',\n 'group-data-[variant=floating]:border-sidebar-border',\n 'group-data-[variant=floating]:shadow-sm'\n )}\n >\n {children}\n </div>\n </div>\n </aside>\n );\n}\n\nfunction SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n size=\"icon\"\n className={cn('size-7', className)}\n onClick={event => {\n onClick?.(event);\n toggleSidebar();\n }}\n {...props}\n >\n <PanelLeftIcon />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n );\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {\n const { toggleSidebar } = useSidebar();\n\n return (\n <button\n data-sidebar=\"rail\"\n data-slot=\"sidebar-rail\"\n aria-label=\"Toggle Sidebar\"\n tabIndex={-1}\n onClick={toggleSidebar}\n title=\"Toggle Sidebar\"\n className={cn(\n 'absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex',\n 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',\n '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',\n 'group-data-[collapsible=offcanvas]:translate-x-0 hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:after:left-full',\n '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',\n '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarInset({ className, children, ...props }: React.ComponentProps<'main'>) {\n return (\n <main data-slot=\"sidebar-inset\" className={cn('relative flex w-full flex-1 flex-col', className)} {...props}>\n <div className=\"h-(--header-height) w-full sm:h-[calc(var(--header-height)+0.5rem)]\" />\n <div className=\"inset-shadow-sm flex-1\">{children}</div>\n </main>\n );\n}\n\nfunction SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {\n return <Input data-slot=\"sidebar-input\" data-sidebar=\"input\" className={cn('h-8 w-full bg-background shadow-none', className)} {...props} />;\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-header\" data-sidebar=\"header\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-footer\" data-sidebar=\"footer\" className={cn('flex flex-col gap-2 p-2', className)} {...props} />;\n}\n\nfunction SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {\n return <Separator data-slot=\"sidebar-separator\" data-sidebar=\"separator\" className={cn('mx-2 w-auto bg-sidebar-border', className)} {...props} />;\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-content\"\n data-sidebar=\"content\"\n className={cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', className)}\n {...props}\n />\n );\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group\" data-sidebar=\"group\" className={cn('relative flex w-full min-w-0 flex-col', className)} {...props} />;\n}\n\nfunction SidebarGroupLabel({ className, asChild = false, ...props }: React.ComponentProps<'div'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'div';\n\n return (\n <Comp\n data-slot=\"sidebar-group-label\"\n data-sidebar=\"group-label\"\n className={cn(\n 'flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',\n 'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupAction({ className, asChild = false, ...props }: React.ComponentProps<'button'> & { asChild?: boolean }) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-group-action\"\n data-sidebar=\"group-action\"\n className={cn(\n 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',\n 'focus-visible:ring-2',\n '[&>svg]:size-4',\n '[&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"sidebar-group-content\" data-sidebar=\"group-content\" className={cn('w-full text-sm', className)} {...props} />;\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {\n return <ul data-slot=\"sidebar-menu\" data-sidebar=\"menu\" className={cn('flex w-full min-w-0 flex-col gap-1', className)} {...props} />;\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-item\" data-sidebar=\"menu-item\" className={cn('group/menu-item relative', className)} {...props} />;\n}\n\nconst sidebarMenuButtonVariants = cva(\n [\n 'peer/menu-button',\n 'cursor-pointer',\n 'flex w-full items-center gap-2',\n 'overflow-hidden rounded-md p-2 outline-hidden',\n 'truncate text-left font-normal',\n 'transition-[color,width,height,padding]',\n 'hover:bg-sidebar-accent',\n 'hover:text-sidebar-accent-foreground',\n 'active:bg-sidebar-accent',\n 'active:text-sidebar-accent-foreground',\n 'disabled:pointer-events-none',\n 'disabled:opacity-50',\n 'group-has-data-[sidebar=menu-action]/menu-item:pr-8',\n 'aria-disabled:pointer-events-none',\n 'aria-disabled:opacity-50',\n 'data-[active=true]:bg-sidebar-primary-muted',\n 'data-[active=true]:text-sidebar-primary',\n 'data-[state=open]:hover:bg-sidebar-accent',\n 'data-[state=open]:hover:text-sidebar-accent-foreground',\n 'group-data-[collapsible=icon]:size-12!',\n 'group-data-[collapsible=icon]:p-3!',\n 'group-data-[collapsible=icon]:gap-3!',\n '[&>svg]:size-6',\n '[&>svg]:shrink-0',\n '[&>span:last-child]:truncate',\n ],\n {\n variants: {\n variant: {\n default: 'hover:bg-sidebar-accent/60 hover:text-sidebar-accent-foreground/80',\n outline:\n 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',\n },\n size: {\n default: 'h-10 text-sm',\n sm: 'h-7 text-xs',\n lg: 'h-12 text-sm group-data-[collapsible=icon]:p-0!',\n },\n },\n defaultVariants: {\n variant: 'default',\n size: 'default',\n },\n }\n);\n\nfunction SidebarMenuButton({\n asChild = false,\n isActive = false,\n variant = 'default',\n size = 'default',\n tooltip,\n className,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n isActive?: boolean;\n tooltip?: string | React.ComponentProps<typeof TooltipContent>;\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n const Comp = asChild ? Slot : 'button';\n const { isMobile, state } = useSidebar();\n\n const button = (\n <Comp\n data-slot=\"sidebar-menu-button\"\n data-sidebar=\"menu-button\"\n data-size={size}\n data-active={isActive}\n className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n {...props}\n />\n );\n\n if (!tooltip) {\n return button;\n }\n\n if (typeof tooltip === 'string') {\n tooltip = {\n children: tooltip,\n };\n }\n\n return (\n <Tooltip>\n <TooltipTrigger asChild>{button}</TooltipTrigger>\n <TooltipContent side=\"right\" align=\"center\" hidden={state !== 'collapsed' || isMobile} {...tooltip} />\n </Tooltip>\n );\n}\n\nfunction SidebarMenuAction({\n className,\n asChild = false,\n showOnHover = false,\n ...props\n}: React.ComponentProps<'button'> & {\n asChild?: boolean;\n showOnHover?: boolean;\n}) {\n const Comp = asChild ? Slot : 'button';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-action\"\n data-sidebar=\"menu-action\"\n className={cn(\n 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0',\n // Increases the hit area of the button on mobile.\n 'after:absolute after:-inset-2 md:after:hidden',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n showOnHover &&\n 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sidebar-menu-badge\"\n data-sidebar=\"menu-badge\"\n className={cn(\n 'pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums',\n 'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',\n 'peer-data-[size=sm]/menu-button:top-1',\n 'peer-data-[size=default]/menu-button:top-1.5',\n 'peer-data-[size=lg]/menu-button:top-2.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSkeleton({\n className,\n showIcon = false,\n ...props\n}: React.ComponentProps<'div'> & {\n showIcon?: boolean;\n}) {\n // Random width between 50 to 90%.\n const width = useMemo(() => {\n return `${Math.floor(Math.random() * 40) + 50}%`;\n }, []);\n\n return (\n <div data-slot=\"sidebar-menu-skeleton\" data-sidebar=\"menu-skeleton\" className={cn('flex h-8 items-center gap-2 rounded-md px-2', className)} {...props}>\n {showIcon && <Skeleton className=\"size-4 rounded-md\" data-sidebar=\"menu-skeleton-icon\" />}\n <Skeleton\n className=\"h-4 max-w-(--skeleton-width) flex-1\"\n data-sidebar=\"menu-skeleton-text\"\n style={\n {\n '--skeleton-width': width,\n } as React.CSSProperties\n }\n />\n </div>\n );\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {\n return (\n <ul\n data-slot=\"sidebar-menu-sub\"\n data-sidebar=\"menu-sub\"\n className={cn(\n 'mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nfunction SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {\n return <li data-slot=\"sidebar-menu-sub-item\" data-sidebar=\"menu-sub-item\" className={cn('group/menu-sub-item relative', className)} {...props} />;\n}\n\nfunction SidebarMenuSubButton({\n asChild = false,\n size = 'md',\n isActive = false,\n className,\n ...props\n}: React.ComponentProps<'a'> & {\n asChild?: boolean;\n size?: 'sm' | 'md';\n isActive?: boolean;\n}) {\n const Comp = asChild ? Slot : 'a';\n\n return (\n <Comp\n data-slot=\"sidebar-menu-sub-button\"\n data-sidebar=\"menu-sub-button\"\n data-size={size}\n data-active={isActive}\n className={cn(\n 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',\n 'data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground',\n size === 'sm' && 'text-xs',\n size === 'md' && 'text-sm',\n 'group-data-[collapsible=icon]:hidden',\n className\n )}\n {...props}\n />\n );\n}\n\nexport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupAction,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarHeader,\n SidebarInput,\n SidebarInset,\n SidebarMenu,\n SidebarMenuAction,\n SidebarMenuBadge,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarMenuSkeleton,\n SidebarMenuSub,\n SidebarMenuSubButton,\n SidebarMenuSubItem,\n SidebarProvider,\n SidebarRail,\n SidebarSeparator,\n SidebarTrigger,\n // biome-ignore lint/style/useComponentExportOnlyModules: true\n useSidebar,\n};\n","import { useCallback } from 'react';\n\nimport { LogOutIcon, MenuIcon, ShoppingCartIcon, UserRoundIcon } from 'lucide-react';\n\nimport { cn } from '@customafk/react-toolkit/utils';\n\nimport { Button } from '@/components/ui/button';\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu';\n\nimport type { PaymentLayoutUser } from '../index';\nimport { useSidebar } from './sidebar';\nimport { Flex } from '../../flex';\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar';\nimport { Paragraph } from '@/components/typography/paragraph';\nimport { colorHashLight } from '@customafk/react-toolkit/color-hash';\n\ntype UserDataDisplayProps = {\n /** Unique identifier used to deterministically generate the avatar background colour. */\n uuid: string;\n /** Display name rendered as the primary line of the user card. */\n username: string;\n /** Email address rendered as the secondary, muted line below the username. */\n email: string;\n};\n\n/**\n * Displays a user identity card with a colour-hashed avatar, username, and email address.\n *\n * @example\n * ```tsx\n * import { UserDataDisplay } from '@customafk/lunas-ui/data-display/user';\n *\n * <UserDataDisplay uuid=\"abc-123\" username=\"Nguyễn Văn An\" email=\"an@example.com\" />\n * ```\n */\nexport const UserDataDisplay: React.FC<UserDataDisplayProps> = ({ uuid, username, email }) => {\n return (\n <Flex data-slot=\"user-display\" wrap={false} gap=\"sm\" padding=\"none\">\n <Avatar className=\"size-9 shadow-card\">\n <AvatarFallback style={{ backgroundColor: colorHashLight.hex(uuid) }}>\n <UserRoundIcon size={28} className=\"text-white\" />\n </AvatarFallback>\n </Avatar>\n <Flex vertical padding=\"none\" gap=\"none\" align=\"start\" className=\"hidden sm:flex\">\n <Paragraph className=\"text-sm font-medium text-text-positive\">{username}</Paragraph>\n <Paragraph variant=\"sm\" className=\"mt-0! text-xs text-text-positive-weak\">\n {email}\n </Paragraph>\n </Flex>\n </Flex>\n );\n};\n\nexport const PaymentLayoutHeader: React.FC<{\n user?: PaymentLayoutUser | null;\n onLogin?: () => void;\n onLogout?: () => void;\n}> = ({ user, onLogin, onLogout }) => {\n const { toggleSidebar } = useSidebar();\n\n const handleToggleSidebar = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n toggleSidebar();\n },\n [toggleSidebar]\n );\n\n const handleLogout = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onLogout?.();\n },\n [onLogout]\n );\n\n const handleLogin = useCallback(\n (event: React.MouseEvent) => {\n event.preventDefault();\n event.stopPropagation();\n onLogin?.();\n },\n [onLogin]\n );\n\n return (\n <header\n data-slot=\"payment-layout-header\"\n className={cn(\n 'bg-card',\n 'h-(--header-height)',\n 'sm:h-[calc(var(--header-height)+0.5rem)] sm:px-4 sm:pr-6',\n 'absolute inset-x-0 top-0 z-20 gap-2 px-2 pr-2.5',\n 'flex items-center shadow-nav',\n 'transition-[width,height] ease-linear'\n )}\n >\n <Button\n data-sidebar=\"trigger\"\n data-slot=\"sidebar-trigger\"\n variant=\"ghost\"\n color=\"muted\"\n size=\"icon\"\n className=\"size-10 rounded-full transition-all hover:text-text-positive\"\n onClick={handleToggleSidebar}\n >\n <MenuIcon className=\"size-6!\" />\n <span className=\"sr-only\">Toggle Sidebar</span>\n </Button>\n\n <div className=\"flex flex-1 gap-x-2 sm:ml-2.5\">\n <div className=\"flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground\">\n <ShoppingCartIcon size={20} />\n </div>\n <div className=\"grid flex-1 text-left text-sm leading-tight\">\n <span className=\"truncate font-medium\">Lunas Store</span>\n <span className=\"truncate text-xs\">Quản lý đơn hàng, thanh toán và hóa đơn người dùng</span>\n </div>\n </div>\n\n {user ? (\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" color=\"muted\" className=\"gap-x-2 rounded-full px-2 transition-all hover:text-text-positive\">\n <UserDataDisplay uuid={user?.uuid ?? ''} username={user.fullname} email={user.email} />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\" className=\"w-56\">\n <DropdownMenuLabel className=\"font-normal\">\n <p className=\"font-medium\">{user.fullname}</p>\n <p className=\"text-muted-foreground text-xs\">{user.email}</p>\n </DropdownMenuLabel>\n <DropdownMenuSeparator />\n <DropdownMenuGroup>\n <DropdownMenuItem onClick={handleLogout}>\n <LogOutIcon size={14} />\n Đăng xuất\n </DropdownMenuItem>\n </DropdownMenuGroup>\n </DropdownMenuContent>\n </DropdownMenu>\n ) : (\n <Button size=\"sm\" onClick={handleLogin}>\n Đăng nhập\n </Button>\n )}\n </header>\n );\n};\n","import { useMemo } from 'react';\n\nimport { PaymentLayoutHeader } from './components/header';\nimport {\n Sidebar,\n SidebarContent,\n SidebarFooter,\n SidebarGroup,\n SidebarGroupContent,\n SidebarGroupLabel,\n SidebarInset,\n SidebarMenu,\n SidebarMenuButton,\n SidebarMenuItem,\n SidebarProvider,\n} from './components/sidebar';\n\nexport type PaymentLayoutUser = {\n uuid?: string;\n /** Display name shown in the header and dropdown. */\n fullname: string;\n /** Email address shown in the user dropdown. */\n email: string;\n /** Optional avatar image URL; falls back to initials when omitted. */\n avatar?: string;\n};\n\n/**\n * Full-page payment application shell with a collapsible inset sidebar and a fixed header.\n *\n * @example\n * ```tsx\n * import { PaymentLayout } from '@customafk/lunas-ui/layouts/payment-layout';\n * import { CreditCardIcon } from 'lucide-react';\n *\n * <PaymentLayout\n * activeNavItemId=\"transactions\"\n * sidebar={{\n * groupcontent: [\n * {\n * id: 'payment',\n * label: 'Payment',\n * items: [\n * { id: 'transactions', label: 'Transactions', icon: <CreditCardIcon />, onClick: () => router.push('/transactions') },\n * ],\n * },\n * ],\n * }}\n * user={{ fullname: 'Nguyen Van A', email: 'a@example.com' }}\n * onLogin={() => setLoginOpen(true)}\n * onLogout={() => authService.logout()}\n * >\n * <TransactionsPage />\n * </PaymentLayout>\n * ```\n */\nexport const PaymentLayout: React.FC<\n React.PropsWithChildren<{\n /** ID of the currently active navigation item; matched against each item's `id` to apply the active style. */\n activeNavItemId?: string;\n /** Sidebar navigation definition; omitting this prop renders an empty sidebar. */\n sidebar?: {\n groupcontent: {\n /** Unique identifier for the group, used as React key. */\n id: string;\n /** Optional section heading rendered above the group's items. */\n label?: string;\n items: {\n /** Unique identifier for the nav item, used as React key and for active-state comparison. */\n id: string;\n /** Human-readable label rendered inside the sidebar button. */\n label: string;\n /** Optional icon element rendered to the left of the label. */\n icon?: React.ReactNode;\n /** Callback fired when the sidebar button is clicked. */\n onClick?: () => void;\n }[];\n }[];\n };\n /** Authenticated user; when provided the header shows user info and a logout option, otherwise a login button. */\n user?: PaymentLayoutUser | null;\n /** Called when the login button in the header is clicked (only shown when `user` is absent). */\n onLogin?: () => void;\n /** Called when the logout item in the user dropdown is clicked. */\n onLogout?: () => void;\n }>\n> = ({ activeNavItemId, sidebar, user, onLogin, onLogout, children }) => {\n const groupcontent = useMemo(() => {\n return sidebar?.groupcontent || [];\n }, [sidebar]);\n\n return (\n <SidebarProvider>\n <PaymentLayoutHeader user={user} onLogin={onLogin} onLogout={onLogout} />\n\n <Sidebar variant=\"inset\" collapsible=\"icon\">\n <SidebarContent>\n {groupcontent.map(group => {\n return (\n <SidebarGroup key={group.id}>\n <SidebarGroupLabel>{group.label}</SidebarGroupLabel>\n <SidebarGroupContent>\n <SidebarMenu>\n {group.items.map(item => {\n return (\n <SidebarMenuItem key={item.id}>\n <SidebarMenuButton\n isActive={item.id === activeNavItemId}\n onClick={event => {\n item.onClick?.();\n event.preventDefault();\n event.stopPropagation();\n }}\n >\n {item.icon}\n {item.label}\n </SidebarMenuButton>\n </SidebarMenuItem>\n );\n })}\n </SidebarMenu>\n </SidebarGroupContent>\n </SidebarGroup>\n );\n })}\n </SidebarContent>\n <SidebarFooter>\n <SidebarMenu>\n <SidebarMenuItem className=\"mt-2 border-t border-t-border\">\n <p className=\"pt-2 text-center text-muted-foreground text-xs\">Copyright © 2025, Lunas.</p>\n </SidebarMenuItem>\n </SidebarMenu>\n </SidebarFooter>\n </Sidebar>\n\n <SidebarInset>\n <section className=\"relative size-full\">\n <div className=\"absolute inset-0\">{children}</div>\n </section>\n </SidebarInset>\n </SidebarProvider>\n );\n};\n"],"mappings":"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"}
|