@zentauri-ui/zentauri-components 1.8.1 → 1.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +123 -25
- package/cli/cli.integration.test.ts +77 -2
- package/cli/index.mjs +53 -0
- package/cli/registry.json +136 -0
- package/cli/rewrite-imports.mjs +4 -1
- package/dist/charts/area.js +9 -10
- package/dist/charts/area.js.map +1 -1
- package/dist/charts/area.mjs +2 -3
- package/dist/charts/area.mjs.map +1 -1
- package/dist/charts/bar.js +10 -95
- package/dist/charts/bar.js.map +1 -1
- package/dist/charts/bar.mjs +2 -95
- package/dist/charts/bar.mjs.map +1 -1
- package/dist/charts/bubble.js +8 -9
- package/dist/charts/bubble.js.map +1 -1
- package/dist/charts/bubble.mjs +2 -3
- package/dist/charts/bubble.mjs.map +1 -1
- package/dist/charts/funnel/Funnel.d.ts +6 -0
- package/dist/charts/funnel/Funnel.d.ts.map +1 -0
- package/dist/charts/funnel/index.d.ts +4 -0
- package/dist/charts/funnel/index.d.ts.map +1 -0
- package/dist/charts/funnel.js +102 -0
- package/dist/charts/funnel.js.map +1 -0
- package/dist/charts/funnel.mjs +89 -0
- package/dist/charts/funnel.mjs.map +1 -0
- package/dist/charts/line.js +8 -9
- package/dist/charts/line.js.map +1 -1
- package/dist/charts/line.mjs +2 -3
- package/dist/charts/line.mjs.map +1 -1
- package/dist/charts/pie/Pie.d.ts +1 -1
- package/dist/charts/pie/Pie.d.ts.map +1 -1
- package/dist/charts/pie.js +19 -6
- package/dist/charts/pie.js.map +1 -1
- package/dist/charts/pie.mjs +17 -4
- package/dist/charts/pie.mjs.map +1 -1
- package/dist/charts/radar/Radar.d.ts +6 -0
- package/dist/charts/radar/Radar.d.ts.map +1 -0
- package/dist/charts/radar/index.d.ts +4 -0
- package/dist/charts/radar/index.d.ts.map +1 -0
- package/dist/charts/radar.js +94 -0
- package/dist/charts/radar.js.map +1 -0
- package/dist/charts/radar.mjs +81 -0
- package/dist/charts/radar.mjs.map +1 -0
- package/dist/charts/scatter/Scatter.d.ts +6 -0
- package/dist/charts/scatter/Scatter.d.ts.map +1 -0
- package/dist/charts/scatter/index.d.ts +4 -0
- package/dist/charts/scatter/index.d.ts.map +1 -0
- package/dist/charts/scatter.js +116 -0
- package/dist/charts/scatter.js.map +1 -0
- package/dist/charts/scatter.mjs +103 -0
- package/dist/charts/scatter.mjs.map +1 -0
- package/dist/charts/shared/chart-frame.d.ts +2 -1
- package/dist/charts/shared/chart-frame.d.ts.map +1 -1
- package/dist/charts/shared/types.d.ts +22 -2
- package/dist/charts/shared/types.d.ts.map +1 -1
- package/dist/charts/stacked-bar/StackedBar.d.ts +6 -0
- package/dist/charts/stacked-bar/StackedBar.d.ts.map +1 -0
- package/dist/charts/stacked-bar/index.d.ts +4 -0
- package/dist/charts/stacked-bar/index.d.ts.map +1 -0
- package/dist/charts/stacked-bar.js +29 -0
- package/dist/charts/stacked-bar.js.map +1 -0
- package/dist/charts/stacked-bar.mjs +15 -0
- package/dist/charts/stacked-bar.mjs.map +1 -0
- package/dist/{chunk-ABOZ5QIX.js → chunk-466QDL44.js} +5 -12
- package/dist/chunk-466QDL44.js.map +1 -0
- package/dist/chunk-4ZP444GA.mjs +19 -0
- package/dist/chunk-4ZP444GA.mjs.map +1 -0
- package/dist/{chunk-HDO5ZM2S.mjs → chunk-CIEZFHCO.mjs} +3 -10
- package/dist/chunk-CIEZFHCO.mjs.map +1 -0
- package/dist/chunk-F3V4POW3.mjs +8 -0
- package/dist/chunk-F3V4POW3.mjs.map +1 -0
- package/dist/{chunk-G2WARVAM.mjs → chunk-HZIRD3SR.mjs} +35 -15
- package/dist/chunk-HZIRD3SR.mjs.map +1 -0
- package/dist/{chunk-G66SXATZ.js → chunk-IL4LH2XX.js} +50 -4
- package/dist/chunk-IL4LH2XX.js.map +1 -0
- package/dist/{chunk-QQ6F4LZK.js → chunk-JFS5PJSH.js} +5 -5
- package/dist/{chunk-QQ6F4LZK.js.map → chunk-JFS5PJSH.js.map} +1 -1
- package/dist/chunk-LREMK2XR.js +97 -0
- package/dist/chunk-LREMK2XR.js.map +1 -0
- package/dist/chunk-MUP7DVQR.js +26 -0
- package/dist/chunk-MUP7DVQR.js.map +1 -0
- package/dist/chunk-O2KM3ETC.mjs +95 -0
- package/dist/chunk-O2KM3ETC.mjs.map +1 -0
- package/dist/{chunk-ZIFMIS7D.mjs → chunk-OL3BJSRC.mjs} +51 -5
- package/dist/chunk-OL3BJSRC.mjs.map +1 -0
- package/dist/{chunk-QNUDODDX.js → chunk-PWPMKXEG.js} +36 -14
- package/dist/chunk-PWPMKXEG.js.map +1 -0
- package/dist/{chunk-ASJQP53L.mjs → chunk-VARQ7W4G.mjs} +3 -3
- package/dist/{chunk-ASJQP53L.mjs.map → chunk-VARQ7W4G.mjs.map} +1 -1
- package/dist/chunk-XRM7GOIE.js +10 -0
- package/dist/chunk-XRM7GOIE.js.map +1 -0
- package/dist/design-system/tokens.js +32 -0
- package/dist/design-system/tokens.js.map +1 -0
- package/dist/design-system/tokens.mjs +3 -0
- package/dist/design-system/tokens.mjs.map +1 -0
- package/dist/hooks/index.d.ts +2 -0
- package/dist/hooks/index.d.ts.map +1 -1
- package/dist/hooks/useIsomorphicLayoutEffect.js +6 -4
- package/dist/hooks/useIsomorphicLayoutEffect.js.map +1 -1
- package/dist/hooks/useIsomorphicLayoutEffect.mjs +1 -6
- package/dist/hooks/useIsomorphicLayoutEffect.mjs.map +1 -1
- package/dist/hooks/useTableFilter/index.d.ts +3 -0
- package/dist/hooks/useTableFilter/index.d.ts.map +1 -0
- package/dist/hooks/useTableFilter/types.d.ts +20 -0
- package/dist/hooks/useTableFilter/types.d.ts.map +1 -0
- package/dist/hooks/useTableFilter/useTableFilter.d.ts +3 -0
- package/dist/hooks/useTableFilter/useTableFilter.d.ts.map +1 -0
- package/dist/hooks/useTableFilter.js +124 -0
- package/dist/hooks/useTableFilter.js.map +1 -0
- package/dist/hooks/useTableFilter.mjs +122 -0
- package/dist/hooks/useTableFilter.mjs.map +1 -0
- package/dist/hooks/useTableSort/index.d.ts +3 -0
- package/dist/hooks/useTableSort/index.d.ts.map +1 -0
- package/dist/hooks/useTableSort/types.d.ts +15 -0
- package/dist/hooks/useTableSort/types.d.ts.map +1 -0
- package/dist/hooks/useTableSort/useTableSort.d.ts +3 -0
- package/dist/hooks/useTableSort/useTableSort.d.ts.map +1 -0
- package/dist/hooks/useTableSort.js +99 -0
- package/dist/hooks/useTableSort.js.map +1 -0
- package/dist/hooks/useTableSort.mjs +97 -0
- package/dist/hooks/useTableSort.mjs.map +1 -0
- package/dist/ui/buttons/animated.js +4 -3
- package/dist/ui/buttons/animated.js.map +1 -1
- package/dist/ui/buttons/animated.mjs +2 -1
- package/dist/ui/buttons/animated.mjs.map +1 -1
- package/dist/ui/buttons.js +5 -4
- package/dist/ui/buttons.mjs +3 -2
- package/dist/ui/dynamic-stepper.js +5 -4
- package/dist/ui/dynamic-stepper.js.map +1 -1
- package/dist/ui/dynamic-stepper.mjs +3 -2
- package/dist/ui/dynamic-stepper.mjs.map +1 -1
- package/dist/ui/marquee/marquee.d.ts.map +1 -1
- package/dist/ui/marquee.js +82 -21
- package/dist/ui/marquee.js.map +1 -1
- package/dist/ui/marquee.mjs +83 -22
- package/dist/ui/marquee.mjs.map +1 -1
- package/dist/ui/pagination.js +5 -4
- package/dist/ui/pagination.js.map +1 -1
- package/dist/ui/pagination.mjs +2 -1
- package/dist/ui/pagination.mjs.map +1 -1
- package/dist/ui/table/animated.js +8 -8
- package/dist/ui/table/animated.mjs +2 -2
- package/dist/ui/table/index.d.ts +1 -1
- package/dist/ui/table/index.d.ts.map +1 -1
- package/dist/ui/table/table-base.d.ts +2 -2
- package/dist/ui/table/table-base.d.ts.map +1 -1
- package/dist/ui/table/types.d.ts +9 -1
- package/dist/ui/table/types.d.ts.map +1 -1
- package/dist/ui/table.js +14 -14
- package/dist/ui/table.mjs +1 -1
- package/package.json +8 -2
- package/src/charts/charts.test.tsx +80 -0
- package/src/charts/funnel/Funnel.tsx +105 -0
- package/src/charts/funnel/index.ts +14 -0
- package/src/charts/pie/Pie.tsx +28 -1
- package/src/charts/radar/Radar.tsx +84 -0
- package/src/charts/radar/index.ts +16 -0
- package/src/charts/scatter/Scatter.tsx +104 -0
- package/src/charts/scatter/index.ts +16 -0
- package/src/charts/shared/chart-frame.tsx +4 -2
- package/src/charts/shared/types.ts +42 -2
- package/src/charts/stacked-bar/StackedBar.tsx +12 -0
- package/src/charts/stacked-bar/index.ts +16 -0
- package/src/hooks/index.ts +12 -0
- package/src/hooks/useTableFilter/index.ts +7 -0
- package/src/hooks/useTableFilter/types.ts +28 -0
- package/src/hooks/useTableFilter/useTableFilter.test.ts +141 -0
- package/src/hooks/useTableFilter/useTableFilter.ts +153 -0
- package/src/hooks/useTableSort/index.ts +5 -0
- package/src/hooks/useTableSort/types.ts +23 -0
- package/src/hooks/useTableSort/useTableSort.test.ts +150 -0
- package/src/hooks/useTableSort/useTableSort.ts +121 -0
- package/src/ui/context-menu/context-menu.test.tsx +30 -0
- package/src/ui/divider/divider.test.tsx +55 -0
- package/src/ui/empty-state/empty-state.test.tsx +88 -0
- package/src/ui/marquee/marquee.test.tsx +45 -4
- package/src/ui/marquee/marquee.tsx +100 -18
- package/src/ui/modal/modal.test.tsx +24 -0
- package/src/ui/peer-isolation.test.ts +81 -0
- package/src/ui/select/select.test.tsx +98 -2
- package/src/ui/skeleton/skeleton.test.tsx +85 -0
- package/src/ui/table/index.ts +3 -0
- package/src/ui/table/table-base.tsx +69 -4
- package/src/ui/table/table.test.tsx +207 -0
- package/src/ui/table/types.ts +13 -1
- package/dist/chunk-ABOZ5QIX.js.map +0 -1
- package/dist/chunk-G2WARVAM.mjs.map +0 -1
- package/dist/chunk-G66SXATZ.js.map +0 -1
- package/dist/chunk-HDO5ZM2S.mjs.map +0 -1
- package/dist/chunk-OULU7OC4.mjs +0 -21
- package/dist/chunk-OULU7OC4.mjs.map +0 -1
- package/dist/chunk-QNUDODDX.js.map +0 -1
- package/dist/chunk-Z6S36PDD.js +0 -24
- package/dist/chunk-Z6S36PDD.js.map +0 -1
- package/dist/chunk-ZIFMIS7D.mjs.map +0 -1
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
|
|
3
|
-
import {
|
|
3
|
+
import {
|
|
4
|
+
createContext,
|
|
5
|
+
useCallback,
|
|
6
|
+
useContext,
|
|
7
|
+
useMemo,
|
|
8
|
+
type KeyboardEvent,
|
|
9
|
+
} from "react";
|
|
4
10
|
|
|
5
11
|
import { cn } from "../../lib/utils";
|
|
6
12
|
|
|
@@ -10,6 +16,7 @@ import type {
|
|
|
10
16
|
TableHeadCellProps,
|
|
11
17
|
TableProps,
|
|
12
18
|
TableSectionProps,
|
|
19
|
+
TableSortDirection,
|
|
13
20
|
} from "./types";
|
|
14
21
|
import { tableCellVariants, tableRowVariants, tableVariants } from "./variants";
|
|
15
22
|
|
|
@@ -122,19 +129,20 @@ export function TableRow({
|
|
|
122
129
|
children,
|
|
123
130
|
ref,
|
|
124
131
|
as: Wrapper = "tr",
|
|
132
|
+
rowAnimation: _rowAnimation,
|
|
125
133
|
...rest
|
|
126
134
|
}: TableSectionProps & { ref?: React.Ref<HTMLTableRowElement> }) {
|
|
127
135
|
const { appearance } = useTableContext("TableRow");
|
|
128
136
|
|
|
129
137
|
return (
|
|
130
|
-
<
|
|
138
|
+
<Wrapper
|
|
131
139
|
ref={ref}
|
|
132
140
|
data-slot="table-row"
|
|
133
141
|
className={cn(tableRowVariants({ appearance }), className)}
|
|
134
142
|
{...rest}
|
|
135
143
|
>
|
|
136
144
|
{children}
|
|
137
|
-
</
|
|
145
|
+
</Wrapper>
|
|
138
146
|
);
|
|
139
147
|
}
|
|
140
148
|
|
|
@@ -144,21 +152,78 @@ export function TableHead({
|
|
|
144
152
|
className,
|
|
145
153
|
children,
|
|
146
154
|
scope = "col",
|
|
155
|
+
sortKey,
|
|
147
156
|
sortDirection,
|
|
157
|
+
onSortChange,
|
|
158
|
+
onClick,
|
|
159
|
+
onKeyDown,
|
|
160
|
+
tabIndex,
|
|
148
161
|
ref,
|
|
149
162
|
...rest
|
|
150
163
|
}: TableHeadCellProps) {
|
|
151
164
|
const { appearance, size, textAlign } = useTableContext("TableHead");
|
|
165
|
+
const isSortable = Boolean(sortKey && onSortChange);
|
|
166
|
+
const sortableDirection: TableSortDirection = sortDirection ?? "none";
|
|
167
|
+
|
|
168
|
+
const handleSort = useCallback(() => {
|
|
169
|
+
if (!sortKey || !onSortChange) {
|
|
170
|
+
return;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
const nextDirection: TableSortDirection =
|
|
174
|
+
sortableDirection === "ascending"
|
|
175
|
+
? "descending"
|
|
176
|
+
: sortableDirection === "descending"
|
|
177
|
+
? "none"
|
|
178
|
+
: "ascending";
|
|
179
|
+
|
|
180
|
+
onSortChange({
|
|
181
|
+
sortKey,
|
|
182
|
+
sortDirection: nextDirection,
|
|
183
|
+
});
|
|
184
|
+
}, [onSortChange, sortKey, sortableDirection]);
|
|
185
|
+
|
|
186
|
+
const handleClick = useCallback<NonNullable<TableHeadCellProps["onClick"]>>(
|
|
187
|
+
(event) => {
|
|
188
|
+
onClick?.(event);
|
|
189
|
+
if (!event.defaultPrevented) {
|
|
190
|
+
handleSort();
|
|
191
|
+
}
|
|
192
|
+
},
|
|
193
|
+
[handleSort, onClick],
|
|
194
|
+
);
|
|
195
|
+
|
|
196
|
+
const handleKeyDown = useCallback(
|
|
197
|
+
(event: KeyboardEvent<HTMLTableCellElement>) => {
|
|
198
|
+
onKeyDown?.(event);
|
|
199
|
+
if (event.defaultPrevented || !isSortable) {
|
|
200
|
+
return;
|
|
201
|
+
}
|
|
202
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
203
|
+
event.preventDefault();
|
|
204
|
+
handleSort();
|
|
205
|
+
}
|
|
206
|
+
},
|
|
207
|
+
[handleSort, isSortable, onKeyDown],
|
|
208
|
+
);
|
|
209
|
+
|
|
152
210
|
return (
|
|
153
211
|
<th
|
|
154
212
|
ref={ref}
|
|
155
213
|
data-slot="table-head"
|
|
156
214
|
scope={scope}
|
|
157
|
-
aria-sort={sortDirection}
|
|
215
|
+
aria-sort={isSortable ? sortableDirection : sortDirection}
|
|
216
|
+
data-sort-key={sortKey}
|
|
217
|
+
data-sort-direction={sortDirection}
|
|
218
|
+
tabIndex={isSortable ? (tabIndex ?? 0) : tabIndex}
|
|
158
219
|
className={cn(
|
|
159
220
|
tableCellVariants({ appearance, size, textAlign }),
|
|
221
|
+
isSortable &&
|
|
222
|
+
"cursor-pointer select-none outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950",
|
|
160
223
|
className,
|
|
161
224
|
)}
|
|
225
|
+
onClick={isSortable ? handleClick : onClick}
|
|
226
|
+
onKeyDown={isSortable ? handleKeyDown : onKeyDown}
|
|
162
227
|
{...rest}
|
|
163
228
|
>
|
|
164
229
|
{children}
|
|
@@ -0,0 +1,207 @@
|
|
|
1
|
+
import { createRef } from "react";
|
|
2
|
+
import { render, screen } from "@testing-library/react";
|
|
3
|
+
import userEvent from "@testing-library/user-event";
|
|
4
|
+
import { describe, expect, it, vi } from "vitest";
|
|
5
|
+
|
|
6
|
+
import { Table } from "./table";
|
|
7
|
+
import {
|
|
8
|
+
TableBody,
|
|
9
|
+
TableCaption,
|
|
10
|
+
TableCell,
|
|
11
|
+
TableFooter,
|
|
12
|
+
TableHead,
|
|
13
|
+
TableHeader,
|
|
14
|
+
TableRow,
|
|
15
|
+
} from "./table-base";
|
|
16
|
+
|
|
17
|
+
function renderBasicTable() {
|
|
18
|
+
return render(
|
|
19
|
+
<Table>
|
|
20
|
+
<TableCaption>Quarterly revenue</TableCaption>
|
|
21
|
+
<TableHeader>
|
|
22
|
+
<TableRow>
|
|
23
|
+
<TableHead>Company</TableHead>
|
|
24
|
+
<TableHead>ARR</TableHead>
|
|
25
|
+
</TableRow>
|
|
26
|
+
</TableHeader>
|
|
27
|
+
<TableBody>
|
|
28
|
+
<TableRow>
|
|
29
|
+
<TableCell scope="row">Zentauri</TableCell>
|
|
30
|
+
<TableCell>$42k</TableCell>
|
|
31
|
+
</TableRow>
|
|
32
|
+
</TableBody>
|
|
33
|
+
<TableFooter>
|
|
34
|
+
<TableRow>
|
|
35
|
+
<TableCell>Total</TableCell>
|
|
36
|
+
<TableCell>$42k</TableCell>
|
|
37
|
+
</TableRow>
|
|
38
|
+
</TableFooter>
|
|
39
|
+
</Table>,
|
|
40
|
+
);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
describe("Table", () => {
|
|
44
|
+
it("should set displayName on compound parts", () => {
|
|
45
|
+
expect(Table.displayName).toBe("Table");
|
|
46
|
+
expect(TableHeader.displayName).toBe("TableHeader");
|
|
47
|
+
expect(TableBody.displayName).toBe("TableBody");
|
|
48
|
+
expect(TableFooter.displayName).toBe("TableFooter");
|
|
49
|
+
expect(TableRow.displayName).toBe("TableRow");
|
|
50
|
+
expect(TableHead.displayName).toBe("TableHead");
|
|
51
|
+
expect(TableCell.displayName).toBe("TableCell");
|
|
52
|
+
expect(TableCaption.displayName).toBe("TableCaption");
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
it("should render semantic table structure inside a focusable scroll region", () => {
|
|
56
|
+
const { container } = renderBasicTable();
|
|
57
|
+
expect(
|
|
58
|
+
screen.getByRole("region", { name: "Scrollable table" }),
|
|
59
|
+
).toHaveAttribute("data-slot", "table-scroll");
|
|
60
|
+
expect(screen.getByRole("table")).toHaveAttribute("data-slot", "table");
|
|
61
|
+
expect(
|
|
62
|
+
container.querySelector('[data-slot="table-caption"]'),
|
|
63
|
+
).toHaveTextContent("Quarterly revenue");
|
|
64
|
+
});
|
|
65
|
+
|
|
66
|
+
it("should support a custom scroll region label", () => {
|
|
67
|
+
render(<Table scrollAreaAriaLabel="Usage table" />);
|
|
68
|
+
expect(screen.getByRole("region", { name: "Usage table" })).toBeVisible();
|
|
69
|
+
});
|
|
70
|
+
|
|
71
|
+
it("should apply sticky header classes when stickyHeader is enabled", () => {
|
|
72
|
+
const { container } = render(
|
|
73
|
+
<Table stickyHeader>
|
|
74
|
+
<TableHeader>
|
|
75
|
+
<TableRow>
|
|
76
|
+
<TableHead>Name</TableHead>
|
|
77
|
+
</TableRow>
|
|
78
|
+
</TableHeader>
|
|
79
|
+
</Table>,
|
|
80
|
+
);
|
|
81
|
+
expect(
|
|
82
|
+
container.querySelector('[data-slot="table-header"]')?.className,
|
|
83
|
+
).toMatch(/sticky/);
|
|
84
|
+
expect(container.querySelector('[data-slot="table"]')?.className).toMatch(
|
|
85
|
+
/table-auto/,
|
|
86
|
+
);
|
|
87
|
+
});
|
|
88
|
+
|
|
89
|
+
it("should expose sort state on sortable header cells", () => {
|
|
90
|
+
render(
|
|
91
|
+
<Table>
|
|
92
|
+
<TableHeader>
|
|
93
|
+
<TableRow>
|
|
94
|
+
<TableHead sortKey="name" sortDirection="ascending">
|
|
95
|
+
Name
|
|
96
|
+
</TableHead>
|
|
97
|
+
</TableRow>
|
|
98
|
+
</TableHeader>
|
|
99
|
+
</Table>,
|
|
100
|
+
);
|
|
101
|
+
const header = screen.getByRole("columnheader", { name: "Name" });
|
|
102
|
+
expect(header).toHaveAttribute("aria-sort", "ascending");
|
|
103
|
+
expect(header).toHaveAttribute("data-sort-key", "name");
|
|
104
|
+
expect(header).toHaveAttribute("data-sort-direction", "ascending");
|
|
105
|
+
});
|
|
106
|
+
|
|
107
|
+
it("should mark sortable unsorted header cells with aria-sort none", () => {
|
|
108
|
+
render(
|
|
109
|
+
<Table>
|
|
110
|
+
<TableHeader>
|
|
111
|
+
<TableRow>
|
|
112
|
+
<TableHead sortKey="name" onSortChange={vi.fn()}>
|
|
113
|
+
Name
|
|
114
|
+
</TableHead>
|
|
115
|
+
</TableRow>
|
|
116
|
+
</TableHeader>
|
|
117
|
+
</Table>,
|
|
118
|
+
);
|
|
119
|
+
expect(screen.getByRole("columnheader", { name: "Name" })).toHaveAttribute(
|
|
120
|
+
"aria-sort",
|
|
121
|
+
"none",
|
|
122
|
+
);
|
|
123
|
+
});
|
|
124
|
+
|
|
125
|
+
it("should call onSortChange with the next direction on click", async () => {
|
|
126
|
+
const user = userEvent.setup();
|
|
127
|
+
const handleSortChange = vi.fn();
|
|
128
|
+
render(
|
|
129
|
+
<Table>
|
|
130
|
+
<TableHeader>
|
|
131
|
+
<TableRow>
|
|
132
|
+
<TableHead
|
|
133
|
+
sortKey="name"
|
|
134
|
+
sortDirection="ascending"
|
|
135
|
+
onSortChange={handleSortChange}
|
|
136
|
+
>
|
|
137
|
+
Name
|
|
138
|
+
</TableHead>
|
|
139
|
+
</TableRow>
|
|
140
|
+
</TableHeader>
|
|
141
|
+
</Table>,
|
|
142
|
+
);
|
|
143
|
+
|
|
144
|
+
await user.click(screen.getByRole("columnheader", { name: "Name" }));
|
|
145
|
+
expect(handleSortChange).toHaveBeenCalledWith({
|
|
146
|
+
sortKey: "name",
|
|
147
|
+
sortDirection: "descending",
|
|
148
|
+
});
|
|
149
|
+
});
|
|
150
|
+
|
|
151
|
+
it("should support keyboard sorting", async () => {
|
|
152
|
+
const user = userEvent.setup();
|
|
153
|
+
const handleSortChange = vi.fn();
|
|
154
|
+
render(
|
|
155
|
+
<Table>
|
|
156
|
+
<TableHeader>
|
|
157
|
+
<TableRow>
|
|
158
|
+
<TableHead
|
|
159
|
+
sortKey="createdAt"
|
|
160
|
+
sortDirection="none"
|
|
161
|
+
onSortChange={handleSortChange}
|
|
162
|
+
>
|
|
163
|
+
Created
|
|
164
|
+
</TableHead>
|
|
165
|
+
</TableRow>
|
|
166
|
+
</TableHeader>
|
|
167
|
+
</Table>,
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
screen.getByRole("columnheader", { name: "Created" }).focus();
|
|
171
|
+
await user.keyboard("{Enter}");
|
|
172
|
+
expect(handleSortChange).toHaveBeenCalledWith({
|
|
173
|
+
sortKey: "createdAt",
|
|
174
|
+
sortDirection: "ascending",
|
|
175
|
+
});
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
it("should render scoped body cells as row headers", () => {
|
|
179
|
+
renderBasicTable();
|
|
180
|
+
expect(screen.getByRole("rowheader", { name: "Zentauri" })).toHaveAttribute(
|
|
181
|
+
"data-slot",
|
|
182
|
+
"table-cell",
|
|
183
|
+
);
|
|
184
|
+
});
|
|
185
|
+
|
|
186
|
+
it("should not leak rowAnimation onto the rendered row", () => {
|
|
187
|
+
const { container } = render(
|
|
188
|
+
<Table>
|
|
189
|
+
<TableBody>
|
|
190
|
+
<TableRow rowAnimation="hover">
|
|
191
|
+
<TableCell>Animated elsewhere</TableCell>
|
|
192
|
+
</TableRow>
|
|
193
|
+
</TableBody>
|
|
194
|
+
</Table>,
|
|
195
|
+
);
|
|
196
|
+
expect(
|
|
197
|
+
container.querySelector('[data-slot="table-row"]'),
|
|
198
|
+
).not.toHaveAttribute("rowAnimation");
|
|
199
|
+
});
|
|
200
|
+
|
|
201
|
+
it("should forward refs to the table element", () => {
|
|
202
|
+
const ref = createRef<HTMLTableElement>();
|
|
203
|
+
render(<Table ref={ref} />);
|
|
204
|
+
expect(ref.current).toBeInstanceOf(HTMLTableElement);
|
|
205
|
+
expect(ref.current?.getAttribute("data-slot")).toBe("table");
|
|
206
|
+
});
|
|
207
|
+
});
|
package/src/ui/table/types.ts
CHANGED
|
@@ -11,6 +11,16 @@ import type {
|
|
|
11
11
|
import type { tableVariants } from "./variants";
|
|
12
12
|
|
|
13
13
|
export type TableAnimation = "none" | "hover";
|
|
14
|
+
export type TableSortDirection = "ascending" | "descending" | "none";
|
|
15
|
+
|
|
16
|
+
export type TableSortState<TKey extends string = string> = {
|
|
17
|
+
sortKey?: TKey;
|
|
18
|
+
sortDirection: TableSortDirection;
|
|
19
|
+
};
|
|
20
|
+
|
|
21
|
+
export type TableSortChangeHandler<TKey extends string = string> = (
|
|
22
|
+
nextSort: TableSortState<TKey>,
|
|
23
|
+
) => void;
|
|
14
24
|
|
|
15
25
|
type TableVariantProps = VariantProps<typeof tableVariants>;
|
|
16
26
|
|
|
@@ -31,7 +41,9 @@ export type TableSectionProps = {
|
|
|
31
41
|
};
|
|
32
42
|
|
|
33
43
|
export type TableHeadCellProps = ThHTMLAttributes<HTMLTableCellElement> & {
|
|
34
|
-
|
|
44
|
+
sortKey?: string;
|
|
45
|
+
sortDirection?: TableSortDirection;
|
|
46
|
+
onSortChange?: TableSortChangeHandler;
|
|
35
47
|
ref?: Ref<HTMLTableCellElement>;
|
|
36
48
|
};
|
|
37
49
|
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/design-system/tokens.ts","../src/design-system/button.ts","../src/ui/buttons/variants.ts"],"names":["cva"],"mappings":";;;;;;;AAGO,IAAM,kBAAA,GAAqB,CAAC,mBAAA,EAAqB,aAAa,CAAA;AAE9D,IAAM,gBAAA,GAAmB;AAAA,EAC9B,OAAA,EAAS;AACX,CAAA;;;ACLO,IAAM,aAAA,GAAgB;AAAA,EAC3B,iEAAA;AAAA,EACA,4CAAA;AAAA,EACA,qBAAA;AAAA,EACA,mHAAA;AAAA,EACA,GAAG,kBAAA;AAAA,EACH,2MAAA;AAAA,EACA,gBAAA,CAAiB;AACnB,CAAA;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA,EACE,ycAAA;AAAA,EACF,SAAA,EACE,+UAAA;AAAA,EACF,WAAA,EACE,2VAAA;AAAA,EACF,OAAA,EACE,gdAAA;AAAA,EACF,KAAA,EACE,gPAAA;AAAA,EACF,IAAA,EAAM,2JAAA;AAAA,EACN,KAAA,EACE,idAAA;AAAA,EACF,OAAA,EACE,mUAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,IAAA,EAAM,iTAAA;AAAA,EACN,IAAA,EAAM,iTAAA;AAAA,EACN,GAAA,EAAK,2SAAA;AAAA,EACL,IAAA,EAAM,iTAAA;AAAA,EACN,MAAA,EACE,6TAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,IAAA,EAAM,iTAAA;AAAA,EACN,KAAA,EACE,uTAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,gBAAA,EACE,4nBAAA;AAAA,EACF,cAAA,EACE,wmBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,iBAAA,EACE;AACJ,CAAA;AAEO,IAAM,cAAA,GAAiB;AAAA,EAC5B,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,2BAAA;AAAA,EACJ,KAAA,EAAO,mCAAA;AAAA,EACP,KAAA,EAAO,qCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,6BAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,MAAA,EAAQ,sCAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;;;ACxEO,IAAM,cAAA,GAAiBA,2BAAI,aAAA,EAAe;AAAA,EAC/C,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,oBAAA;AAAA,IACZ,IAAA,EAAM;AAAA,GACR;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM;AAAA;AAEV,CAAC","file":"chunk-ABOZ5QIX.js","sourcesContent":["export const zuiCssVariablePattern =\n \"--zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?\" as const;\n\nexport const zuiInteractiveBase = [\"transition-colors\", \"select-none\"] as const;\n\nexport const zuiDisabledState = {\n default: \"disabled:pointer-events-none disabled:opacity-50\",\n} as const;\n\nexport const zuiFocusRing = {\n default:\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-focus-ring,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2\",\n} as const;\n\nexport const zuiRingOffset = {\n default:\n \"ring-offset-[var(--zui-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-ring-offset-dark,oklch(12.9%_0.042_264.695))]\",\n} as const;\n\nexport const zuiRadius = {\n xl: \"rounded-[var(--zui-radius-xl,0.75rem)]\",\n} as const;\n","import { zuiDisabledState, zuiInteractiveBase } from \"./tokens\";\n\nexport const zuiButtonBase = [\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap\",\n \"rounded-[var(--zui-button-radius,0.75rem)]\",\n \"text-sm font-medium\",\n \"ring-offset-[var(--zui-button-ring-offset,#f8fafc)] dark:ring-offset-[var(--zui-button-ring-offset-dark,#020617)]\",\n ...zuiInteractiveBase,\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-button-focus-ring,#475569)] dark:focus-visible:ring-[var(--zui-button-focus-ring-dark,#cbd5e1)] focus-visible:ring-offset-2\",\n zuiDisabledState.default,\n] as const;\n\nexport const zuiButtonAppearances = {\n default:\n \"bg-[var(--zui-button-default-bg,#0f172a)] dark:bg-[var(--zui-button-default-bg-dark,#f8fafc)] text-[color:var(--zui-button-default-fg,#f8fafc)] dark:text-[color:var(--zui-button-default-fg-dark,#020617)] shadow-[var(--zui-button-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-button-default-shadow-dark,0_1px_2px_#0f172a1f)] hover:bg-[var(--zui-button-default-bg-hover,#000000)] dark:hover:bg-[var(--zui-button-default-bg-hover-dark,#ffffff)]\",\n secondary:\n \"bg-[var(--zui-button-secondary-bg,#e2e8f0)] dark:bg-[var(--zui-button-secondary-bg-dark,#1e293b)] text-[color:var(--zui-button-secondary-fg,#0f172a)] dark:text-[color:var(--zui-button-secondary-fg-dark,#f8fafc)] hover:bg-[var(--zui-button-secondary-bg-hover,#cbd5e1)] dark:hover:bg-[var(--zui-button-secondary-bg-hover-dark,#334155)]\",\n destructive:\n \"bg-[var(--zui-button-destructive-bg,#f43f5e)] dark:bg-[var(--zui-button-destructive-bg-dark,#be123c)] text-[color:var(--zui-button-destructive-fg,#ffffff)] dark:text-[color:var(--zui-button-destructive-fg-dark,#ffffff)] hover:bg-[var(--zui-button-destructive-bg-hover,#f43f5e)] dark:hover:bg-[var(--zui-button-destructive-bg-hover-dark,#9f1239)]\",\n outline:\n \"border border-[color:var(--zui-button-outline-border,#0000001a)] dark:border-[color:var(--zui-button-outline-border-dark,#ffffff1a)] bg-[var(--zui-button-outline-bg,#0000000d)] dark:bg-[var(--zui-button-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-button-outline-fg,#0f172a)] dark:text-[color:var(--zui-button-outline-fg-dark,#f8fafc)] hover:bg-[var(--zui-button-outline-bg-hover,#0000001a)] dark:hover:bg-[var(--zui-button-outline-bg-hover-dark,#ffffff1a)]\",\n ghost:\n \"bg-transparent text-[color:var(--zui-button-ghost-fg,#334155)] dark:text-[color:var(--zui-button-ghost-fg-dark,#e2e8f0)] hover:bg-[var(--zui-button-ghost-bg-hover,#0000000d)] dark:hover:bg-[var(--zui-button-ghost-bg-hover-dark,#ffffff0d)]\",\n link: \"bg-transparent text-[color:var(--zui-button-link-fg,#0e7490)] dark:text-[color:var(--zui-button-link-fg-dark,#67e8f9)] underline-offset-4 hover:underline\",\n glass:\n \"border border-[color:var(--zui-button-glass-border,#00000026)] dark:border-[color:var(--zui-button-glass-border-dark,#ffffff26)] bg-[var(--zui-button-glass-bg,#0000001a)] dark:bg-[var(--zui-button-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-button-glass-fg,#0f172a)] dark:text-[color:var(--zui-button-glass-fg-dark,#ffffff)] backdrop-blur-md hover:bg-[var(--zui-button-glass-bg-hover,#00000026)] dark:hover:bg-[var(--zui-button-glass-bg-hover-dark,#ffffff26)]\",\n emerald:\n \"bg-[var(--zui-button-emerald-bg,#10b981)] dark:bg-[var(--zui-button-emerald-bg-dark,#065f46)] text-[color:var(--zui-button-emerald-fg,#ffffff)] dark:text-[color:var(--zui-button-emerald-fg-dark,#ffffff)] hover:bg-[var(--zui-button-emerald-bg-hover,#10b981)] dark:hover:bg-[var(--zui-button-emerald-bg-hover-dark,#064e3b)]\",\n indigo:\n \"bg-[var(--zui-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-button-indigo-bg-hover-dark,#4f46e5)]\",\n purple:\n \"bg-[var(--zui-button-purple-bg,#6b21a8)] dark:bg-[var(--zui-button-purple-bg-dark,#9333ea)] text-[color:var(--zui-button-purple-fg,#ffffff)] dark:text-[color:var(--zui-button-purple-fg-dark,#ffffff)] hover:bg-[var(--zui-button-purple-bg-hover,#6b21a8)] dark:hover:bg-[var(--zui-button-purple-bg-hover-dark,#9333ea)]\",\n pink: \"bg-[var(--zui-button-pink-bg,#9d174d)] dark:bg-[var(--zui-button-pink-bg-dark,#db2777)] text-[color:var(--zui-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-button-pink-bg-hover-dark,#db2777)]\",\n rose: \"bg-[var(--zui-button-rose-bg,#9f1239)] dark:bg-[var(--zui-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-button-rose-bg-hover-dark,#e11d48)]\",\n sky: \"bg-[var(--zui-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-button-sky-bg-hover-dark,#075985)]\",\n teal: \"bg-[var(--zui-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-button-teal-bg-hover-dark,#115e59)]\",\n yellow:\n \"bg-[var(--zui-button-yellow-bg,#eab308)] dark:bg-[var(--zui-button-yellow-bg-dark,#854d0e)] text-[color:var(--zui-button-yellow-fg,#ffffff)] dark:text-[color:var(--zui-button-yellow-fg-dark,#ffffff)] hover:bg-[var(--zui-button-yellow-bg-hover,#eab308)] dark:hover:bg-[var(--zui-button-yellow-bg-hover-dark,#713f12)]\",\n orange:\n \"bg-[var(--zui-button-orange-bg,#f97316)] dark:bg-[var(--zui-button-orange-bg-dark,#9a3412)] text-[color:var(--zui-button-orange-fg,#ffffff)] dark:text-[color:var(--zui-button-orange-fg-dark,#ffffff)] hover:bg-[var(--zui-button-orange-bg-hover,#f97316)] dark:hover:bg-[var(--zui-button-orange-bg-hover-dark,#7c2d12)]\",\n gray: \"bg-[var(--zui-button-gray-bg,#6b7280)] dark:bg-[var(--zui-button-gray-bg-dark,#374151)] text-[color:var(--zui-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-button-gray-bg-hover-dark,#1f2937)]\",\n amber:\n \"bg-[var(--zui-button-amber-bg,#f59e0b)] dark:bg-[var(--zui-button-amber-bg-dark,#92400e)] text-[color:var(--zui-button-amber-fg,#ffffff)] dark:text-[color:var(--zui-button-amber-fg-dark,#ffffff)] hover:bg-[var(--zui-button-amber-bg-hover,#f59e0b)] dark:hover:bg-[var(--zui-button-amber-bg-hover-dark,#78350f)]\",\n violet:\n \"bg-[var(--zui-button-violet-bg,#5b21b6)] dark:bg-[var(--zui-button-violet-bg-dark,#7c3aed)] text-[color:var(--zui-button-violet-fg,#ffffff)] dark:text-[color:var(--zui-button-violet-fg-dark,#ffffff)] hover:bg-[var(--zui-button-violet-bg-hover,#5b21b6)] dark:hover:bg-[var(--zui-button-violet-bg-hover-dark,#7c3aed)]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-blue-from,#1e40af)] dark:from-[var(--zui-button-gradient-blue-from-dark,#2563eb)] to-[var(--zui-button-gradient-blue-to,#6b21a8)] dark:to-[var(--zui-button-gradient-blue-to-dark,#9333ea)] text-[color:var(--zui-button-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-blue-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-blue-from-hover,#1e40af)] dark:hover:from-[var(--zui-button-gradient-blue-from-hover-dark,#2563eb)] hover:to-[var(--zui-button-gradient-blue-to-hover,#6b21a8)] dark:hover:to-[var(--zui-button-gradient-blue-to-hover-dark,#9333ea)]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-green-from,#166534)] dark:from-[var(--zui-button-gradient-green-from-dark,#16a34a)] to-[var(--zui-button-gradient-green-to,#3f6212)] dark:to-[var(--zui-button-gradient-green-to-dark,#65a30d)] text-[color:var(--zui-button-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-green-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-green-from-hover,#166534)] dark:hover:from-[var(--zui-button-gradient-green-from-hover-dark,#16a34a)] hover:to-[var(--zui-button-gradient-green-to-hover,#3f6212)] dark:hover:to-[var(--zui-button-gradient-green-to-hover-dark,#65a30d)]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-red-from,#991b1b)] dark:from-[var(--zui-button-gradient-red-from-dark,#dc2626)] to-[var(--zui-button-gradient-red-to,#9d174d)] dark:to-[var(--zui-button-gradient-red-to-dark,#db2777)] text-[color:var(--zui-button-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-red-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-red-from-hover,#991b1b)] dark:hover:from-[var(--zui-button-gradient-red-from-hover-dark,#dc2626)] hover:to-[var(--zui-button-gradient-red-to-hover,#9d174d)] dark:hover:to-[var(--zui-button-gradient-red-to-hover-dark,#db2777)]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-yellow-from,#854d0e)] dark:from-[var(--zui-button-gradient-yellow-from-dark,#ca8a04)] to-[var(--zui-button-gradient-yellow-to,#9a3412)] dark:to-[var(--zui-button-gradient-yellow-to-dark,#ea580c)] text-[color:var(--zui-button-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-yellow-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-yellow-from-hover,#854d0e)] dark:hover:from-[var(--zui-button-gradient-yellow-from-hover-dark,#ca8a04)] hover:to-[var(--zui-button-gradient-yellow-to-hover,#9a3412)] dark:hover:to-[var(--zui-button-gradient-yellow-to-hover-dark,#ea580c)]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-purple-from,#6b21a8)] dark:from-[var(--zui-button-gradient-purple-from-dark,#9333ea)] to-[var(--zui-button-gradient-purple-to,#9d174d)] dark:to-[var(--zui-button-gradient-purple-to-dark,#db2777)] text-[color:var(--zui-button-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-purple-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-purple-from-hover,#6b21a8)] dark:hover:from-[var(--zui-button-gradient-purple-from-hover-dark,#9333ea)] hover:to-[var(--zui-button-gradient-purple-to-hover,#9d174d)] dark:hover:to-[var(--zui-button-gradient-purple-to-hover-dark,#db2777)]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-teal-from,#115e59)] dark:from-[var(--zui-button-gradient-teal-from-dark,#0d9488)] to-[var(--zui-button-gradient-teal-to,#155e75)] dark:to-[var(--zui-button-gradient-teal-to-dark,#0891b2)] text-[color:var(--zui-button-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-teal-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-teal-from-hover,#115e59)] dark:hover:from-[var(--zui-button-gradient-teal-from-hover-dark,#0d9488)] hover:to-[var(--zui-button-gradient-teal-to-hover,#155e75)] dark:hover:to-[var(--zui-button-gradient-teal-to-hover-dark,#0891b2)]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-indigo-from,#3730a3)] dark:from-[var(--zui-button-gradient-indigo-from-dark,#4f46e5)] to-[var(--zui-button-gradient-indigo-to,#6b21a8)] dark:to-[var(--zui-button-gradient-indigo-to-dark,#9333ea)] text-[color:var(--zui-button-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-indigo-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-indigo-from-hover,#3730a3)] dark:hover:from-[var(--zui-button-gradient-indigo-from-hover-dark,#4f46e5)] hover:to-[var(--zui-button-gradient-indigo-to-hover,#6b21a8)] dark:hover:to-[var(--zui-button-gradient-indigo-to-hover-dark,#9333ea)]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-pink-from,#9d174d)] dark:from-[var(--zui-button-gradient-pink-from-dark,#db2777)] to-[var(--zui-button-gradient-pink-to,#9f1239)] dark:to-[var(--zui-button-gradient-pink-to-dark,#e11d48)] text-[color:var(--zui-button-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-pink-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-pink-from-hover,#9d174d)] dark:hover:from-[var(--zui-button-gradient-pink-from-hover-dark,#db2777)] hover:to-[var(--zui-button-gradient-pink-to-hover,#9f1239)] dark:hover:to-[var(--zui-button-gradient-pink-to-hover-dark,#e11d48)]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-orange-from,#9a3412)] dark:from-[var(--zui-button-gradient-orange-from-dark,#ea580c)] to-[var(--zui-button-gradient-orange-to,#991b1b)] dark:to-[var(--zui-button-gradient-orange-to-dark,#dc2626)] text-[color:var(--zui-button-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-orange-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-orange-from-hover,#9a3412)] dark:hover:from-[var(--zui-button-gradient-orange-from-hover-dark,#ea580c)] hover:to-[var(--zui-button-gradient-orange-to-hover,#991b1b)] dark:hover:to-[var(--zui-button-gradient-orange-to-hover-dark,#dc2626)]\",\n} as const;\n\nexport const zuiButtonSizes = {\n sm: \"h-7 md:h-9 px-3 text-xs\",\n md: \"h-9 md:h-11 px-4\",\n lg: \"h-10 md:h-12 px-5 text-base\",\n xl: \"h-12 md:h-14 px-6 text-lg\",\n \"2xl\": \"h-14 md:h-16 px-6 md:px-8 text-xl\",\n \"3xl\": \"h-16 md:h-18 px-8 md:px-10 text-2xl\",\n \"4xl\": \"h-18 md:h-20 px-10 md:px-12 text-2xl\",\n \"5xl\": \"h-20 md:h-22 px-12 md:px-14 text-2xl\",\n \"6xl\": \"h-22 md:h-24 px-14 md:px-16 text-2xl\",\n \"7xl\": \"h-24 md:h-26 px-16 md:px-18 text-2xl\",\n \"8xl\": \"h-26 md:h-28 px-20 text-2xl\",\n \"9xl\": \"h-24 md:h-30 px-18 md:px-22 text-2xl\",\n \"10xl\": \"h-26 md:h-32 px-20 md:px-24 text-2xl\",\n icon: \"h-10 w-10\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiButtonAppearances,\n zuiButtonBase,\n zuiButtonSizes,\n} from \"../../design-system\";\n\nexport const buttonVariants = cva(zuiButtonBase, {\n variants: {\n appearance: zuiButtonAppearances,\n size: zuiButtonSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n});\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/charts/shared/variants.ts","../src/charts/shared/chart-frame.tsx"],"names":[],"mappings":";;;;;;AAEO,IAAM,aAAA,GAAgB,GAAA;AAAA,EAC3B;AAAA,IACE,oDAAA;AAAA,IACA,0DAAA;AAAA,IACA,8HAAA;AAAA,IACA,mFAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,UAAA,EAAY;AAAA,QACV,OAAA,EACE,gFAAA;AAAA,QACF,KAAA,EACE,mFAAA;AAAA,QACF,OAAA,EACE,wGAAA;AAAA,QACF,KAAA,EACE,uHAAA;AAAA,QACF,GAAA,EAAK,+EAAA;AAAA,QACL,OAAA,EACE,uFAAA;AAAA,QACF,MAAA,EACE,qFAAA;AAAA,QACF,KAAA,EACE,mFAAA;AAAA,QACF,IAAA,EAAM,iFAAA;AAAA,QACN,KAAA,EACE,mFAAA;AAAA,QACF,IAAA,EAAM,iFAAA;AAAA,QACN,MAAA,EACE,qFAAA;AAAA,QACF,sBAAA,EACE,4GAAA;AAAA,QACF,yBAAA,EACE,+GAAA;AAAA,QACF,qBAAA,EACE,2GAAA;AAAA,QACF,qBAAA,EACE,2GAAA;AAAA,QACF,wBAAA,EACE,8GAAA;AAAA,QACF,oBAAA,EACE,0GAAA;AAAA,QACF,uBAAA,EACE,6GAAA;AAAA,QACF,qBAAA,EACE;AAAA,OACJ;AAAA,MACA,OAAA,EAAS;AAAA,QACP,OAAA,EAAS,YAAA;AAAA,QACT,WAAA,EAAa,YAAA;AAAA,QACb,QAAA,EAAU;AAAA;AACZ,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,UAAA,EAAY,SAAA;AAAA,MACZ,OAAA,EAAS;AAAA;AACX;AAEJ;AAEO,IAAM,YAAA,GAAe;AAAA,EAC1B,OAAO,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EAClE,SAAS,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACpE,OAAO,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EAClE,SAAS,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACpE,KAAK,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EAChE,MAAM,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACjE,SAAS,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACpE,QAAQ,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACnE,OAAO,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EAClE,MAAM,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACjE,OAAO,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EAClE,MAAM,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACjE,OAAO,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EAClE,QAAQ,EAAE,MAAA,EAAQ,WAAW,IAAA,EAAM,SAAA,EAAW,WAAW,SAAA,EAAU;AAAA,EACnE,sBAAA,EAAwB;AAAA,IACtB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,yBAAA,EAA2B;AAAA,IACzB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,qBAAA,EAAuB;AAAA,IACrB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,qBAAA,EAAuB;AAAA,IACrB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,wBAAA,EAA0B;AAAA,IACxB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,oBAAA,EAAsB;AAAA,IACpB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,uBAAA,EAAyB;AAAA,IACvB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA,GACb;AAAA,EACA,qBAAA,EAAuB;AAAA,IACrB,MAAA,EAAQ,SAAA;AAAA,IACR,IAAA,EAAM,SAAA;AAAA,IACN,SAAA,EAAW;AAAA;AAEf;AAEO,IAAM,gBAAA,GAAmB,MAAA,CAAO,IAAA,CAAK,YAAY;AC9GxD,IAAM,wBAAA,uBAA+B,GAAA,CAAI;AAAA,EACvC,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,iBAAA;AAAA,EACA,QAAA;AAAA,EACA,cAAA;AAAA,EACA;AACF,CAAC,CAAA;AAED,SAAS,eACP,KAAA,EACgC;AAChC,EAAA,MAAM,OAAA,GAAU,MAAA,CAAO,OAAA,CAAQ,KAAK,CAAA,CAAE,MAAA;AAAA,IACpC,CAAC,CAAC,GAAG,MAAM,CAAC,wBAAA,CAAyB,IAAI,GAAG;AAAA,GAC9C;AACA,EAAA,OAAO,MAAA,CAAO,YAAY,OAAO,CAAA;AACnC;AAaO,IAAM,kBAAA,GAAqB,EAAE,GAAA,EAAK,EAAA,EAAI,OAAO,EAAA,EAAI,MAAA,EAAQ,CAAA,EAAG,IAAA,EAAM,CAAA;AAElE,SAAS,UAAA,CAAW;AAAA,EACzB,UAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA,GAAa,IAAA;AAAA,EACb,OAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAoB;AAClB,EAAA,MAAM,QAAA,GAAW,eAAe,KAAK,CAAA;AACrC,EAAA,MAAM,CAAC,UAAA,EAAY,IAAI,CAAA,GAAI,iBAAA,EAAkC;AAC7D,EAAA,MAAM,UAAA,GAAa;AAAA,IACjB,gBAAA,EAAkB,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,IAC3B,GAAG;AAAA,GACL;AACA,EAAA,MAAM,kBACH,IAAA,EAAM,KAAA,IAAS,KAAK,CAAA,IAAA,CAAM,IAAA,EAAM,UAAU,CAAA,IAAK,CAAA;AAElD,EAAA,IAAI,CAAC,OAAA,EAAS;AACZ,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,GAAG,aAAA,CAAc,EAAE,YAAY,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,QAC/D,KAAA,EAAO,UAAA;AAAA,QACN,GAAG,QAAA;AAAA,QAEJ,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,yEAAA,EACZ,QAAA,EAAA,UAAA,EACH;AAAA;AAAA,KACF;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,GAAG,aAAA,CAAc,EAAE,YAAY,OAAA,EAAS,GAAG,SAAS,CAAA;AAAA,MAC/D,KAAA,EAAO,UAAA;AAAA,MACN,GAAG,QAAA;AAAA,MAEJ,8BAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EAAY,SAAA,EAAU,iCAC7B,QAAA,EAAA,cAAA,mBACC,GAAA;AAAA,QAAC,mBAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAM,MAAA;AAAA,UACN,MAAA,EAAO,MAAA;AAAA,UACP,QAAA,EAAU,CAAA;AAAA,UACV,QAAA,EAAU,EAAA;AAAA,UACV,KAAA,EAAO,cAAA;AAAA,UAEN;AAAA;AAAA,UAED,IAAA,EACN;AAAA;AAAA,GACF;AAEJ;AAEO,SAAS,eAAA,CAAgB;AAAA,EAC9B,IAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA,GAAe;AACjB,CAAA,EAMG;AACD,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,QAAA,mBACC,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,eAAA,EAAgB,KAAA;AAAA,QAChB,MAAA,EAAO,cAAA;AAAA,QACP,OAAA,EAAS;AAAA;AAAA,KACX,GACE,IAAA;AAAA,IACH,IAAA;AAAA,IACA,WAAA,mBACC,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,EAAE,OAAA,EAAS,IAAA,EAAK;AAAA,QACxB,YAAA,EAAc,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QACpC,UAAA,EAAY,EAAE,KAAA,EAAO,YAAA,EAAa;AAAA,QAClC,SAAA,EAAW,EAAE,KAAA,EAAO,YAAA;AAAa;AAAA,KACnC,GACE,IAAA;AAAA,IACH,UAAA,mBAAa,GAAA,CAAC,MAAA,EAAA,EAAO,CAAA,GAAK;AAAA,GAAA,EAC7B,CAAA;AAEJ","file":"chunk-G2WARVAM.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const chartVariants = cva(\n [\n \"relative w-full min-w-0 overflow-hidden rounded-xl\",\n \"h-[var(--chart-height)] min-h-64 sm:min-h-72 md:min-h-80\",\n \"[&_.recharts-default-tooltip]:rounded-lg [&_.recharts-default-tooltip]:border [&_.recharts-default-tooltip]:border-slate-200\",\n \"[&_.recharts-default-tooltip]:bg-white/95 [&_.recharts-default-tooltip]:shadow-lg\",\n \"[&_.recharts-default-tooltip]:text-slate-900\",\n ],\n {\n variants: {\n appearance: {\n default:\n \"bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n muted:\n \"bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n outline:\n \"border border-slate-200 bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n glass:\n \"border border-white/15 bg-white/10 text-slate-100 backdrop-blur-md [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n sky: \"bg-sky-50 text-sky-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n emerald:\n \"bg-emerald-50 text-emerald-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n violet:\n \"bg-violet-50 text-violet-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n amber:\n \"bg-amber-50 text-amber-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n rose: \"bg-rose-50 text-rose-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n slate:\n \"bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n gray: \"bg-gray-50 text-gray-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n indigo:\n \"bg-indigo-50 text-indigo-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n \"gradient-cyan-violet\":\n \"bg-gradient-to-r from-cyan-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-emerald-violet\":\n \"bg-gradient-to-r from-emerald-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-amber-rose\":\n \"bg-gradient-to-r from-amber-500 to-rose-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-slate-gray\":\n \"bg-gradient-to-r from-slate-500 to-gray-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-indigo-purple\":\n \"bg-gradient-to-r from-indigo-500 to-purple-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-cyan-blue\":\n \"bg-gradient-to-r from-cyan-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-emerald-blue\":\n \"bg-gradient-to-r from-emerald-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-amber-blue\":\n \"bg-gradient-to-r from-amber-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n },\n density: {\n compact: \"p-2 sm:p-3\",\n comfortable: \"p-3 sm:p-4\",\n spacious: \"p-4 sm:p-5 md:p-6\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n density: \"comfortable\",\n },\n },\n);\n\nexport const chartPalette = {\n glass: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n outline: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n muted: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n default: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n sky: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n cyan: { stroke: \"#0891b2\", fill: \"#67e8f9\", textColor: \"#0891b2\" },\n emerald: { stroke: \"#059669\", fill: \"#6ee7b7\", textColor: \"#059669\" },\n violet: { stroke: \"#7c3aed\", fill: \"#c4b5fd\", textColor: \"#7c3aed\" },\n amber: { stroke: \"#d97706\", fill: \"#fcd34d\", textColor: \"#d97706\" },\n rose: { stroke: \"#e11d48\", fill: \"#fda4af\", textColor: \"#e11d48\" },\n slate: { stroke: \"#475569\", fill: \"#cbd5e1\", textColor: \"#475569\" },\n gray: { stroke: \"#6b7280\", fill: \"#d1d5db\", textColor: \"#6b7280\" },\n white: { stroke: \"#ffffff\", fill: \"#ffffff\", textColor: \"#ffffff\" },\n indigo: { stroke: \"#6366f1\", fill: \"#c7d2fe\", textColor: \"#6366f1\" },\n \"gradient-cyan-violet\": {\n stroke: \"#0891b2\",\n fill: \"#67e8f9\",\n textColor: \"#0891b2\",\n },\n \"gradient-emerald-violet\": {\n stroke: \"#059669\",\n fill: \"#6ee7b7\",\n textColor: \"#059669\",\n },\n \"gradient-amber-rose\": {\n stroke: \"#d97706\",\n fill: \"#fcd34d\",\n textColor: \"#d97706\",\n },\n \"gradient-slate-gray\": {\n stroke: \"#475569\",\n fill: \"#cbd5e1\",\n textColor: \"#475569\",\n },\n \"gradient-indigo-purple\": {\n stroke: \"#6366f1\",\n fill: \"#c7d2fe\",\n textColor: \"#6366f1\",\n },\n \"gradient-cyan-blue\": {\n stroke: \"#0891b2\",\n fill: \"#67e8f9\",\n textColor: \"#0891b2\",\n },\n \"gradient-emerald-blue\": {\n stroke: \"#059669\",\n fill: \"#6ee7b7\",\n textColor: \"#059669\",\n },\n \"gradient-amber-blue\": {\n stroke: \"#d97706\",\n fill: \"#fcd34d\",\n textColor: \"#d97706\",\n },\n} as const;\n\nexport const chartColorValues = Object.keys(chartPalette) as Array<\n keyof typeof chartPalette\n>;\n","\"use client\";\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { CartesianGrid, Legend, ResponsiveContainer, Tooltip } from \"recharts\";\n\nimport { useResizeObserver } from \"../../hooks/useResizeObserver/useResizeObserver\";\nimport { cn } from \"../../lib/utils\";\nimport { chartVariants } from \"./variants\";\nimport { VariantProps } from \"class-variance-authority\";\n\n/** Chart-level props that may be forwarded from *Chart `...rest` and must not reach a DOM node. */\nconst CHART_ONLY_DIV_PROP_KEYS = new Set([\n \"data\",\n \"margin\",\n \"series\",\n \"showGrid\",\n \"showLegend\",\n \"showTooltip\",\n \"stacked\",\n \"strokeDasharray\",\n \"syncId\",\n \"tooltipColor\",\n \"xKey\",\n]);\n\nfunction filterDivProps(\n props: HTMLAttributes<HTMLDivElement>,\n): HTMLAttributes<HTMLDivElement> {\n const entries = Object.entries(props).filter(\n ([key]) => !CHART_ONLY_DIV_PROP_KEYS.has(key),\n );\n return Object.fromEntries(entries) as HTMLAttributes<HTMLDivElement>;\n}\n\ntype ChartFrameProps = HTMLAttributes<HTMLDivElement> & {\n appearance?: VariantProps<typeof chartVariants>[\"appearance\"];\n containerStyle?: CSSProperties;\n density?: \"compact\" | \"comfortable\" | \"spacious\" | null;\n emptyState?: ReactNode;\n hasData: boolean;\n height: number;\n style?: CSSProperties;\n children: ReactNode;\n};\n\nexport const defaultChartMargin = { top: 16, right: 16, bottom: 8, left: 0 };\n\nexport function ChartFrame({\n appearance,\n children,\n className,\n containerStyle,\n density,\n emptyState = null,\n hasData,\n height,\n style,\n ...props\n}: ChartFrameProps) {\n const divProps = filterDivProps(props);\n const [measureRef, size] = useResizeObserver<HTMLDivElement>();\n const chartStyle = {\n \"--chart-height\": `${height}px`,\n ...style,\n } as CSSProperties;\n const canRenderChart =\n (size?.width ?? 0) > 0 && (size?.height ?? 0) > 0;\n\n if (!hasData) {\n return (\n <div\n className={cn(chartVariants({ appearance, density }), className)}\n style={chartStyle}\n {...divProps}\n >\n <div className=\"flex h-full min-h-48 items-center justify-center text-sm text-slate-500\">\n {emptyState}\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={cn(chartVariants({ appearance, density }), className)}\n style={chartStyle}\n {...divProps}\n >\n <div ref={measureRef} className=\"h-full min-h-0 w-full min-w-0\">\n {canRenderChart ? (\n <ResponsiveContainer\n width=\"100%\"\n height=\"100%\"\n minWidth={0}\n debounce={80}\n style={containerStyle}\n >\n {children}\n </ResponsiveContainer>\n ) : null}\n </div>\n </div>\n );\n}\n\nexport function ChartDecorators({\n axis,\n showGrid,\n showLegend,\n showTooltip,\n tooltipColor = \"#0f172a\",\n}: {\n axis: ReactNode;\n showGrid: boolean;\n showLegend: boolean;\n showTooltip: boolean;\n tooltipColor?: string;\n}) {\n return (\n <>\n {showGrid ? (\n <CartesianGrid\n strokeDasharray=\"3 3\"\n stroke=\"currentColor\"\n opacity={0.16}\n />\n ) : null}\n {axis}\n {showTooltip ? (\n <Tooltip\n cursor={{ opacity: 0.12 }}\n contentStyle={{ color: tooltipColor }}\n labelStyle={{ color: tooltipColor }}\n itemStyle={{ color: tooltipColor }}\n />\n ) : null}\n {showLegend ? <Legend /> : null}\n </>\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/design-system/table.ts","../src/ui/table/variants.ts","../src/ui/table/table-base.tsx"],"names":["cva","createContext","useContext","useMemo","jsx","cn"],"mappings":"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","file":"chunk-G66SXATZ.js","sourcesContent":["export const zuiTableBase =\n \"w-full table-auto border-collapse caption-bottom text-sm text-[color:var(--zui-table-fg,oklch(37.2%_0.044_257.287))] dark:text-[color:var(--zui-table-fg-dark,oklch(92.9%_0.013_255.508))] md:table-fixed\";\n\nexport const zuiTableAppearances = {\n default: \"\",\n striped: \"\",\n bordered:\n \"border border-[color:var(--zui-table-bordered-border,#0000001a)] dark:border-[color:var(--zui-table-bordered-border-dark,#ffffff1a)]\",\n ghost: \"\",\n sky: \"border border-[color:var(--zui-table-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-table-sky-border-dark,oklch(58.8%_0.158_241.966))]\",\n rose: \"border border-[color:var(--zui-table-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-table-rose-border-dark,oklch(58.6%_0.253_17.585))]\",\n purple:\n \"border border-[color:var(--zui-table-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-table-purple-border-dark,oklch(55.8%_0.288_302.321))]\",\n pink: \"border border-[color:var(--zui-table-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-table-pink-border-dark,oklch(59.2%_0.249_0.584))]\",\n orange:\n \"border border-[color:var(--zui-table-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-table-orange-border-dark,oklch(64.6%_0.222_41.116))]\",\n yellow:\n \"border border-[color:var(--zui-table-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-table-yellow-border-dark,oklch(68.1%_0.162_75.834))]\",\n teal: \"border border-[color:var(--zui-table-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-table-teal-border-dark,oklch(60%_0.118_184.704))]\",\n indigo:\n \"border border-[color:var(--zui-table-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-table-indigo-border-dark,oklch(51.1%_0.262_276.966))]\",\n emerald:\n \"border border-[color:var(--zui-table-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-table-emerald-border-dark,oklch(59.6%_0.145_163.225))]\",\n gray: \"border border-[color:var(--zui-table-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-table-gray-border-dark,oklch(44.6%_0.03_256.802))]\",\n amber:\n \"border border-[color:var(--zui-table-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-table-amber-border-dark,oklch(66.6%_0.179_58.318))]\",\n violet:\n \"border border-[color:var(--zui-table-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-table-violet-border-dark,oklch(54.1%_0.281_293.009))]\",\n} as const;\n\nexport const zuiTableSizes = {\n sm: \"text-xs\",\n md: \"text-sm\",\n lg: \"text-base\",\n} as const;\n\nexport const zuiTableStickyHeader = {\n true: \"\",\n false: \"\",\n} as const;\n\nexport const zuiTableRowBase =\n \"border-b border-[color:var(--zui-table-row-border,#0000000d)] dark:border-[color:var(--zui-table-row-border-dark,#ffffff0d)] transition-colors data-[state=selected]:bg-[var(--zui-table-row-bg-selected,#0000000f)] dark:data-[state=selected]:bg-[var(--zui-table-row-bg-selected-dark,#ffffff0f)]\";\n\nexport const zuiTableRowAppearances = {\n default: \"\",\n striped:\n \"odd:bg-[var(--zui-table-row-striped-bg,#00000008)] dark:odd:bg-[var(--zui-table-row-striped-bg-dark,#ffffff08)]\",\n bordered: \"\",\n ghost:\n \"border-[color:var(--zui-table-row-ghost-border,transparent)] dark:border-[color:var(--zui-table-row-ghost-border-dark,transparent)] hover:bg-[var(--zui-table-row-ghost-bg-hover,#00000008)] dark:hover:bg-[var(--zui-table-row-ghost-bg-hover-dark,#ffffff08)]\",\n sky: \"border-[color:var(--zui-table-row-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-table-row-sky-border-dark,oklch(58.8%_0.158_241.966))] hover:bg-[var(--zui-table-row-sky-bg-hover,oklch(44.3%_0.11_240.79))] dark:hover:bg-[var(--zui-table-row-sky-bg-hover-dark,oklch(58.8%_0.158_241.966))] hover:text-[color:var(--zui-table-row-sky-fg-hover,oklch(95.1%_0.026_236.824))] dark:hover:text-[color:var(--zui-table-row-sky-fg-hover-dark,oklch(95.1%_0.026_236.824))]\",\n rose: \"border-[color:var(--zui-table-row-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-table-row-rose-border-dark,oklch(58.6%_0.253_17.585))] hover:bg-[var(--zui-table-row-rose-bg-hover,oklch(64.5%_0.246_16.439))] dark:hover:bg-[var(--zui-table-row-rose-bg-hover-dark,oklch(41%_0.159_10.272))] hover:text-[color:var(--zui-table-row-rose-fg-hover,oklch(94.1%_0.03_12.58))] dark:hover:text-[color:var(--zui-table-row-rose-fg-hover-dark,oklch(94.1%_0.03_12.58))]\",\n purple:\n \"border-[color:var(--zui-table-row-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-table-row-purple-border-dark,oklch(55.8%_0.288_302.321))] hover:bg-[var(--zui-table-row-purple-bg-hover,oklch(62.7%_0.265_303.9))] dark:hover:bg-[var(--zui-table-row-purple-bg-hover-dark,oklch(38.1%_0.176_304.987))] hover:text-[color:var(--zui-table-row-purple-fg-hover,oklch(94.6%_0.033_307.174))] dark:hover:text-[color:var(--zui-table-row-purple-fg-hover-dark,oklch(94.6%_0.033_307.174))]\",\n pink: \"border-[color:var(--zui-table-row-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-table-row-pink-border-dark,oklch(59.2%_0.249_0.584))] hover:bg-[var(--zui-table-row-pink-bg-hover,oklch(65.6%_0.241_354.308))] dark:hover:bg-[var(--zui-table-row-pink-bg-hover-dark,oklch(40.8%_0.153_2.432))] hover:text-[color:var(--zui-table-row-pink-fg-hover,oklch(94.8%_0.028_342.258))] dark:hover:text-[color:var(--zui-table-row-pink-fg-hover-dark,oklch(94.8%_0.028_342.258))]\",\n orange:\n \"border-[color:var(--zui-table-row-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-table-row-orange-border-dark,oklch(64.6%_0.222_41.116))] hover:bg-[var(--zui-table-row-orange-bg-hover,oklch(70.5%_0.213_47.604))] dark:hover:bg-[var(--zui-table-row-orange-bg-hover-dark,oklch(40.8%_0.123_38.172))] hover:text-[color:var(--zui-table-row-orange-fg-hover,oklch(95.4%_0.038_75.164))] dark:hover:text-[color:var(--zui-table-row-orange-fg-hover-dark,oklch(95.4%_0.038_75.164))]\",\n yellow:\n \"border-[color:var(--zui-table-row-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-table-row-yellow-border-dark,oklch(68.1%_0.162_75.834))] hover:bg-[var(--zui-table-row-yellow-bg-hover,oklch(79.5%_0.184_86.047))] dark:hover:bg-[var(--zui-table-row-yellow-bg-hover-dark,oklch(42.1%_0.095_57.708))] hover:text-[color:var(--zui-table-row-yellow-fg-hover,oklch(97.3%_0.071_103.193))] dark:hover:text-[color:var(--zui-table-row-yellow-fg-hover-dark,oklch(97.3%_0.071_103.193))]\",\n teal: \"border-[color:var(--zui-table-row-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-table-row-teal-border-dark,oklch(60%_0.118_184.704))] hover:bg-[var(--zui-table-row-teal-bg-hover,oklch(70.4%_0.14_182.503))] dark:hover:bg-[var(--zui-table-row-teal-bg-hover-dark,oklch(38.6%_0.063_188.416))] hover:text-[color:var(--zui-table-row-teal-fg-hover,oklch(95.3%_0.051_180.801))] dark:hover:text-[color:var(--zui-table-row-teal-fg-hover-dark,oklch(95.3%_0.051_180.801))]\",\n indigo:\n \"border-[color:var(--zui-table-row-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-table-row-indigo-border-dark,oklch(51.1%_0.262_276.966))] hover:bg-[var(--zui-table-row-indigo-bg-hover,oklch(58.5%_0.233_277.117))] dark:hover:bg-[var(--zui-table-row-indigo-bg-hover-dark,oklch(35.9%_0.144_278.697))] hover:text-[color:var(--zui-table-row-indigo-fg-hover,oklch(93%_0.034_272.788))] dark:hover:text-[color:var(--zui-table-row-indigo-fg-hover-dark,oklch(93%_0.034_272.788))]\",\n emerald:\n \"border-[color:var(--zui-table-row-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-table-row-emerald-border-dark,oklch(59.6%_0.145_163.225))] hover:bg-[var(--zui-table-row-emerald-bg-hover,oklch(69.6%_0.17_162.48))] dark:hover:bg-[var(--zui-table-row-emerald-bg-hover-dark,oklch(37.8%_0.077_168.94))] hover:text-[color:var(--zui-table-row-emerald-fg-hover,oklch(95%_0.052_163.051))] dark:hover:text-[color:var(--zui-table-row-emerald-fg-hover-dark,oklch(95%_0.052_163.051))]\",\n gray: \"border-[color:var(--zui-table-row-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-table-row-gray-border-dark,oklch(44.6%_0.03_256.802))] hover:bg-[var(--zui-table-row-gray-bg-hover,oklch(55.1%_0.027_264.364))] dark:hover:bg-[var(--zui-table-row-gray-bg-hover-dark,oklch(21%_0.034_264.665))] hover:text-[color:var(--zui-table-row-gray-fg-hover,oklch(96.7%_0.003_264.542))] dark:hover:text-[color:var(--zui-table-row-gray-fg-hover-dark,oklch(96.7%_0.003_264.542))]\",\n amber:\n \"border-[color:var(--zui-table-row-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-table-row-amber-border-dark,oklch(66.6%_0.179_58.318))] hover:bg-[var(--zui-table-row-amber-bg-hover,oklch(76.9%_0.188_70.08))] dark:hover:bg-[var(--zui-table-row-amber-bg-hover-dark,oklch(41.4%_0.112_45.904))] hover:text-[color:var(--zui-table-row-amber-fg-hover,oklch(96.2%_0.059_95.617))] dark:hover:text-[color:var(--zui-table-row-amber-fg-hover-dark,oklch(96.2%_0.059_95.617))]\",\n violet:\n \"border-[color:var(--zui-table-row-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-table-row-violet-border-dark,oklch(54.1%_0.281_293.009))] hover:bg-[var(--zui-table-row-violet-bg-hover,oklch(60.6%_0.25_292.717))] dark:hover:bg-[var(--zui-table-row-violet-bg-hover-dark,oklch(38%_0.189_293.745))] hover:text-[color:var(--zui-table-row-violet-fg-hover,oklch(94.3%_0.029_294.588))] dark:hover:text-[color:var(--zui-table-row-violet-fg-hover-dark,oklch(94.3%_0.029_294.588))]\",\n} as const;\n\nexport const zuiTableCellBase = \"min-w-0 border p-3 align-middle break-words\";\n\nexport const zuiTableCellAppearances = {\n default:\n \"border-[color:var(--zui-table-cell-default-border,#0000001a)] dark:border-[color:var(--zui-table-cell-default-border-dark,#ffffff1a)]\",\n striped:\n \"border-[color:var(--zui-table-cell-striped-border,#0000001a)] dark:border-[color:var(--zui-table-cell-striped-border-dark,#ffffff1a)]\",\n bordered:\n \"border-[color:var(--zui-table-cell-bordered-border,#0000001a)] dark:border-[color:var(--zui-table-cell-bordered-border-dark,#ffffff1a)]\",\n ghost:\n \"border-[color:var(--zui-table-cell-ghost-border,#0000001a)] dark:border-[color:var(--zui-table-cell-ghost-border-dark,#ffffff1a)]\",\n sky: \"border-[color:var(--zui-table-cell-sky-border,oklch(44.3%_0.11_240.79))] dark:border-[color:var(--zui-table-cell-sky-border-dark,oklch(58.8%_0.158_241.966))]\",\n rose: \"border-[color:var(--zui-table-cell-rose-border,oklch(45.5%_0.188_13.697))] dark:border-[color:var(--zui-table-cell-rose-border-dark,oklch(58.6%_0.253_17.585))]\",\n purple:\n \"border-[color:var(--zui-table-cell-purple-border,oklch(43.8%_0.218_303.724))] dark:border-[color:var(--zui-table-cell-purple-border-dark,oklch(55.8%_0.288_302.321))]\",\n pink: \"border-[color:var(--zui-table-cell-pink-border,oklch(45.9%_0.187_3.815))] dark:border-[color:var(--zui-table-cell-pink-border-dark,oklch(59.2%_0.249_0.584))]\",\n orange:\n \"border-[color:var(--zui-table-cell-orange-border,oklch(47%_0.157_37.304))] dark:border-[color:var(--zui-table-cell-orange-border-dark,oklch(64.6%_0.222_41.116))]\",\n yellow:\n \"border-[color:var(--zui-table-cell-yellow-border,oklch(47.6%_0.114_61.907))] dark:border-[color:var(--zui-table-cell-yellow-border-dark,oklch(68.1%_0.162_75.834))]\",\n teal: \"border-[color:var(--zui-table-cell-teal-border,oklch(43.7%_0.078_188.216))] dark:border-[color:var(--zui-table-cell-teal-border-dark,oklch(60%_0.118_184.704))]\",\n indigo:\n \"border-[color:var(--zui-table-cell-indigo-border,oklch(39.8%_0.195_277.366))] dark:border-[color:var(--zui-table-cell-indigo-border-dark,oklch(51.1%_0.262_276.966))]\",\n emerald:\n \"border-[color:var(--zui-table-cell-emerald-border,oklch(43.2%_0.095_166.913))] dark:border-[color:var(--zui-table-cell-emerald-border-dark,oklch(59.6%_0.145_163.225))]\",\n gray: \"border-[color:var(--zui-table-cell-gray-border,oklch(27.8%_0.033_256.848))] dark:border-[color:var(--zui-table-cell-gray-border-dark,oklch(44.6%_0.03_256.802))]\",\n amber:\n \"border-[color:var(--zui-table-cell-amber-border,oklch(47.3%_0.137_46.201))] dark:border-[color:var(--zui-table-cell-amber-border-dark,oklch(66.6%_0.179_58.318))]\",\n violet:\n \"border-[color:var(--zui-table-cell-violet-border,oklch(43.2%_0.232_292.759))] dark:border-[color:var(--zui-table-cell-violet-border-dark,oklch(54.1%_0.281_293.009))]\",\n} as const;\n\nexport const zuiTableCellSizes = {\n sm: \"p-2\",\n md: \"p-3\",\n lg: \"p-4\",\n} as const;\n\nexport const zuiTableTextAlignments = {\n left: \"text-left\",\n center: \"text-center\",\n right: \"text-right\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiTableAppearances,\n zuiTableBase,\n zuiTableCellAppearances,\n zuiTableCellBase,\n zuiTableCellSizes,\n zuiTableRowAppearances,\n zuiTableRowBase,\n zuiTableSizes,\n zuiTableStickyHeader,\n zuiTableTextAlignments,\n} from \"../../design-system/table\";\n\nexport const tableVariants = cva(zuiTableBase, {\n variants: {\n appearance: zuiTableAppearances,\n size: zuiTableSizes,\n stickyHeader: zuiTableStickyHeader,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n stickyHeader: false,\n },\n});\n\nexport const tableRowVariants = cva(zuiTableRowBase, {\n variants: {\n appearance: zuiTableRowAppearances,\n },\n defaultVariants: { appearance: \"default\" },\n});\n\nexport const tableCellVariants = cva(zuiTableCellBase, {\n variants: {\n appearance: zuiTableCellAppearances,\n size: zuiTableCellSizes,\n textAlign: zuiTableTextAlignments,\n },\n defaultVariants: { appearance: \"default\", size: \"md\" },\n});\n","\"use client\";\n\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { cn } from \"../../lib/utils\";\n\nimport type {\n TableCtx,\n TableCellProps,\n TableHeadCellProps,\n TableProps,\n TableSectionProps,\n} from \"./types\";\nimport { tableCellVariants, tableRowVariants, tableVariants } from \"./variants\";\n\nexport const TableContext = createContext<TableCtx | null>(null);\n\nexport function useTableContext(component: string): TableCtx {\n const ctx = useContext(TableContext);\n if (!ctx) {\n throw new Error(`${component} must be used within <Table>`);\n }\n return ctx;\n}\n\nexport function TableBase(props: TableProps) {\n const {\n className,\n appearance = \"default\",\n size = \"md\",\n textAlign = \"left\",\n stickyHeader = false,\n scrollAreaAriaLabel,\n children,\n ref,\n ...rest\n } = props;\n const ctx = useMemo(\n () => ({\n appearance: appearance ?? \"default\",\n size: size ?? \"md\",\n stickyHeader: Boolean(stickyHeader),\n rowAnimation: \"none\" as const,\n textAlign,\n }),\n [appearance, size, stickyHeader, textAlign],\n );\n\n return (\n <TableContext.Provider value={ctx}>\n <div\n data-slot=\"table-scroll\"\n tabIndex={0}\n role=\"region\"\n aria-label={scrollAreaAriaLabel ?? \"Scrollable table\"}\n className={cn(\n \"relative w-full overflow-auto\",\n \"outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n )}\n >\n <table\n ref={ref}\n data-slot=\"table\"\n className={cn(\n tableVariants({ appearance, size, stickyHeader }),\n \"w-full min-w-0 table\",\n className,\n )}\n {...rest}\n >\n {children}\n </table>\n </div>\n </TableContext.Provider>\n );\n}\n\nTableBase.displayName = \"Table\";\n\nexport function TableHeader({ className, children }: TableSectionProps) {\n const { stickyHeader } = useTableContext(\"TableHeader\");\n const stickyClass = stickyHeader\n ? \"sticky top-0 z-10 dark:bg-slate-950/95 bg-slate-50/95 backdrop-blur\"\n : \"\";\n return (\n <thead data-slot=\"table-header\" className={cn(stickyClass, className)}>\n {children}\n </thead>\n );\n}\n\nTableHeader.displayName = \"TableHeader\";\n\nexport function TableBody({ className, children }: TableSectionProps) {\n return (\n <tbody data-slot=\"table-body\" className={cn(className)}>\n {children}\n </tbody>\n );\n}\n\nTableBody.displayName = \"TableBody\";\n\nexport function TableFooter({ className, children }: TableSectionProps) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn(\n \"border-t border-white/10 bg-white/3 font-medium\",\n className,\n )}\n >\n {children}\n </tfoot>\n );\n}\n\nTableFooter.displayName = \"TableFooter\";\n\nexport function TableRow({\n className,\n children,\n ref,\n as: Wrapper = \"tr\",\n ...rest\n}: TableSectionProps & { ref?: React.Ref<HTMLTableRowElement> }) {\n const { appearance } = useTableContext(\"TableRow\");\n\n return (\n <tr\n ref={ref}\n data-slot=\"table-row\"\n className={cn(tableRowVariants({ appearance }), className)}\n {...rest}\n >\n {children}\n </tr>\n );\n}\n\nTableRow.displayName = \"TableRow\";\n\nexport function TableHead({\n className,\n children,\n scope = \"col\",\n sortDirection,\n ref,\n ...rest\n}: TableHeadCellProps) {\n const { appearance, size, textAlign } = useTableContext(\"TableHead\");\n return (\n <th\n ref={ref}\n data-slot=\"table-head\"\n scope={scope}\n aria-sort={sortDirection}\n className={cn(\n tableCellVariants({ appearance, size, textAlign }),\n className,\n )}\n {...rest}\n >\n {children}\n </th>\n );\n}\n\nTableHead.displayName = \"TableHead\";\n\nexport function TableCell({\n className,\n children,\n ref,\n scope,\n ...rest\n}: TableCellProps) {\n const { appearance, size, textAlign } = useTableContext(\"TableCell\");\n const cellClassName = cn(\n tableCellVariants({ appearance, size, textAlign }),\n className,\n );\n\n if (scope !== undefined) {\n return (\n <th\n ref={ref}\n data-slot=\"table-cell\"\n scope={scope}\n className={cellClassName}\n {...rest}\n >\n {children}\n </th>\n );\n }\n\n return (\n <td ref={ref} data-slot=\"table-cell\" className={cellClassName} {...rest}>\n {children}\n </td>\n );\n}\n\nTableCell.displayName = \"TableCell\";\n\nexport function TableCaption({ className, children }: TableSectionProps) {\n return (\n <caption\n data-slot=\"table-caption\"\n className={cn(\"mt-3 text-left text-xs text-slate-500\", className)}\n >\n {children}\n </caption>\n );\n}\n\nTableCaption.displayName = \"TableCaption\";\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/design-system/tokens.ts","../src/design-system/button.ts","../src/ui/buttons/variants.ts"],"names":[],"mappings":";;;;;AAGO,IAAM,kBAAA,GAAqB,CAAC,mBAAA,EAAqB,aAAa,CAAA;AAE9D,IAAM,gBAAA,GAAmB;AAAA,EAC9B,OAAA,EAAS;AACX,CAAA;;;ACLO,IAAM,aAAA,GAAgB;AAAA,EAC3B,iEAAA;AAAA,EACA,4CAAA;AAAA,EACA,qBAAA;AAAA,EACA,mHAAA;AAAA,EACA,GAAG,kBAAA;AAAA,EACH,2MAAA;AAAA,EACA,gBAAA,CAAiB;AACnB,CAAA;AAEO,IAAM,oBAAA,GAAuB;AAAA,EAClC,OAAA,EACE,ycAAA;AAAA,EACF,SAAA,EACE,+UAAA;AAAA,EACF,WAAA,EACE,2VAAA;AAAA,EACF,OAAA,EACE,gdAAA;AAAA,EACF,KAAA,EACE,gPAAA;AAAA,EACF,IAAA,EAAM,2JAAA;AAAA,EACN,KAAA,EACE,idAAA;AAAA,EACF,OAAA,EACE,mUAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,IAAA,EAAM,iTAAA;AAAA,EACN,IAAA,EAAM,iTAAA;AAAA,EACN,GAAA,EAAK,2SAAA;AAAA,EACL,IAAA,EAAM,iTAAA;AAAA,EACN,MAAA,EACE,6TAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,IAAA,EAAM,iTAAA;AAAA,EACN,KAAA,EACE,uTAAA;AAAA,EACF,MAAA,EACE,6TAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,gBAAA,EACE,4nBAAA;AAAA,EACF,cAAA,EACE,wmBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,iBAAA,EACE,soBAAA;AAAA,EACF,eAAA,EACE,knBAAA;AAAA,EACF,iBAAA,EACE;AACJ,CAAA;AAEO,IAAM,cAAA,GAAiB;AAAA,EAC5B,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI,kBAAA;AAAA,EACJ,EAAA,EAAI,6BAAA;AAAA,EACJ,EAAA,EAAI,2BAAA;AAAA,EACJ,KAAA,EAAO,mCAAA;AAAA,EACP,KAAA,EAAO,qCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,KAAA,EAAO,6BAAA;AAAA,EACP,KAAA,EAAO,sCAAA;AAAA,EACP,MAAA,EAAQ,sCAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;;;ACxEO,IAAM,cAAA,GAAiB,IAAI,aAAA,EAAe;AAAA,EAC/C,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,oBAAA;AAAA,IACZ,IAAA,EAAM;AAAA,GACR;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM;AAAA;AAEV,CAAC","file":"chunk-HDO5ZM2S.mjs","sourcesContent":["export const zuiCssVariablePattern =\n \"--zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?\" as const;\n\nexport const zuiInteractiveBase = [\"transition-colors\", \"select-none\"] as const;\n\nexport const zuiDisabledState = {\n default: \"disabled:pointer-events-none disabled:opacity-50\",\n} as const;\n\nexport const zuiFocusRing = {\n default:\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-focus-ring,oklch(44.6%_0.043_257.281))] dark:focus-visible:ring-[var(--zui-focus-ring-dark,oklch(86.9%_0.022_252.894))] focus-visible:ring-offset-2\",\n} as const;\n\nexport const zuiRingOffset = {\n default:\n \"ring-offset-[var(--zui-ring-offset,oklch(98.4%_0.003_247.858))] dark:ring-offset-[var(--zui-ring-offset-dark,oklch(12.9%_0.042_264.695))]\",\n} as const;\n\nexport const zuiRadius = {\n xl: \"rounded-[var(--zui-radius-xl,0.75rem)]\",\n} as const;\n","import { zuiDisabledState, zuiInteractiveBase } from \"./tokens\";\n\nexport const zuiButtonBase = [\n \"inline-flex items-center justify-center gap-2 whitespace-nowrap\",\n \"rounded-[var(--zui-button-radius,0.75rem)]\",\n \"text-sm font-medium\",\n \"ring-offset-[var(--zui-button-ring-offset,#f8fafc)] dark:ring-offset-[var(--zui-button-ring-offset-dark,#020617)]\",\n ...zuiInteractiveBase,\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--zui-button-focus-ring,#475569)] dark:focus-visible:ring-[var(--zui-button-focus-ring-dark,#cbd5e1)] focus-visible:ring-offset-2\",\n zuiDisabledState.default,\n] as const;\n\nexport const zuiButtonAppearances = {\n default:\n \"bg-[var(--zui-button-default-bg,#0f172a)] dark:bg-[var(--zui-button-default-bg-dark,#f8fafc)] text-[color:var(--zui-button-default-fg,#f8fafc)] dark:text-[color:var(--zui-button-default-fg-dark,#020617)] shadow-[var(--zui-button-default-shadow,0_1px_2px_#0f172a14)] dark:shadow-[var(--zui-button-default-shadow-dark,0_1px_2px_#0f172a1f)] hover:bg-[var(--zui-button-default-bg-hover,#000000)] dark:hover:bg-[var(--zui-button-default-bg-hover-dark,#ffffff)]\",\n secondary:\n \"bg-[var(--zui-button-secondary-bg,#e2e8f0)] dark:bg-[var(--zui-button-secondary-bg-dark,#1e293b)] text-[color:var(--zui-button-secondary-fg,#0f172a)] dark:text-[color:var(--zui-button-secondary-fg-dark,#f8fafc)] hover:bg-[var(--zui-button-secondary-bg-hover,#cbd5e1)] dark:hover:bg-[var(--zui-button-secondary-bg-hover-dark,#334155)]\",\n destructive:\n \"bg-[var(--zui-button-destructive-bg,#f43f5e)] dark:bg-[var(--zui-button-destructive-bg-dark,#be123c)] text-[color:var(--zui-button-destructive-fg,#ffffff)] dark:text-[color:var(--zui-button-destructive-fg-dark,#ffffff)] hover:bg-[var(--zui-button-destructive-bg-hover,#f43f5e)] dark:hover:bg-[var(--zui-button-destructive-bg-hover-dark,#9f1239)]\",\n outline:\n \"border border-[color:var(--zui-button-outline-border,#0000001a)] dark:border-[color:var(--zui-button-outline-border-dark,#ffffff1a)] bg-[var(--zui-button-outline-bg,#0000000d)] dark:bg-[var(--zui-button-outline-bg-dark,#ffffff0d)] text-[color:var(--zui-button-outline-fg,#0f172a)] dark:text-[color:var(--zui-button-outline-fg-dark,#f8fafc)] hover:bg-[var(--zui-button-outline-bg-hover,#0000001a)] dark:hover:bg-[var(--zui-button-outline-bg-hover-dark,#ffffff1a)]\",\n ghost:\n \"bg-transparent text-[color:var(--zui-button-ghost-fg,#334155)] dark:text-[color:var(--zui-button-ghost-fg-dark,#e2e8f0)] hover:bg-[var(--zui-button-ghost-bg-hover,#0000000d)] dark:hover:bg-[var(--zui-button-ghost-bg-hover-dark,#ffffff0d)]\",\n link: \"bg-transparent text-[color:var(--zui-button-link-fg,#0e7490)] dark:text-[color:var(--zui-button-link-fg-dark,#67e8f9)] underline-offset-4 hover:underline\",\n glass:\n \"border border-[color:var(--zui-button-glass-border,#00000026)] dark:border-[color:var(--zui-button-glass-border-dark,#ffffff26)] bg-[var(--zui-button-glass-bg,#0000001a)] dark:bg-[var(--zui-button-glass-bg-dark,#ffffff1a)] text-[color:var(--zui-button-glass-fg,#0f172a)] dark:text-[color:var(--zui-button-glass-fg-dark,#ffffff)] backdrop-blur-md hover:bg-[var(--zui-button-glass-bg-hover,#00000026)] dark:hover:bg-[var(--zui-button-glass-bg-hover-dark,#ffffff26)]\",\n emerald:\n \"bg-[var(--zui-button-emerald-bg,#10b981)] dark:bg-[var(--zui-button-emerald-bg-dark,#065f46)] text-[color:var(--zui-button-emerald-fg,#ffffff)] dark:text-[color:var(--zui-button-emerald-fg-dark,#ffffff)] hover:bg-[var(--zui-button-emerald-bg-hover,#10b981)] dark:hover:bg-[var(--zui-button-emerald-bg-hover-dark,#064e3b)]\",\n indigo:\n \"bg-[var(--zui-button-indigo-bg,#3730a3)] dark:bg-[var(--zui-button-indigo-bg-dark,#4f46e5)] text-[color:var(--zui-button-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-indigo-fg-dark,#ffffff)] hover:bg-[var(--zui-button-indigo-bg-hover,#3730a3)] dark:hover:bg-[var(--zui-button-indigo-bg-hover-dark,#4f46e5)]\",\n purple:\n \"bg-[var(--zui-button-purple-bg,#6b21a8)] dark:bg-[var(--zui-button-purple-bg-dark,#9333ea)] text-[color:var(--zui-button-purple-fg,#ffffff)] dark:text-[color:var(--zui-button-purple-fg-dark,#ffffff)] hover:bg-[var(--zui-button-purple-bg-hover,#6b21a8)] dark:hover:bg-[var(--zui-button-purple-bg-hover-dark,#9333ea)]\",\n pink: \"bg-[var(--zui-button-pink-bg,#9d174d)] dark:bg-[var(--zui-button-pink-bg-dark,#db2777)] text-[color:var(--zui-button-pink-fg,#ffffff)] dark:text-[color:var(--zui-button-pink-fg-dark,#ffffff)] hover:bg-[var(--zui-button-pink-bg-hover,#9d174d)] dark:hover:bg-[var(--zui-button-pink-bg-hover-dark,#db2777)]\",\n rose: \"bg-[var(--zui-button-rose-bg,#9f1239)] dark:bg-[var(--zui-button-rose-bg-dark,#e11d48)] text-[color:var(--zui-button-rose-fg,#ffffff)] dark:text-[color:var(--zui-button-rose-fg-dark,#ffffff)] hover:bg-[var(--zui-button-rose-bg-hover,#9f1239)] dark:hover:bg-[var(--zui-button-rose-bg-hover-dark,#e11d48)]\",\n sky: \"bg-[var(--zui-button-sky-bg,#0ea5e9)] dark:bg-[var(--zui-button-sky-bg-dark,#0369a1)] text-[color:var(--zui-button-sky-fg,#ffffff)] dark:text-[color:var(--zui-button-sky-fg-dark,#ffffff)] hover:bg-[var(--zui-button-sky-bg-hover,#0ea5e9)] dark:hover:bg-[var(--zui-button-sky-bg-hover-dark,#075985)]\",\n teal: \"bg-[var(--zui-button-teal-bg,#14b8a6)] dark:bg-[var(--zui-button-teal-bg-dark,#0f766e)] text-[color:var(--zui-button-teal-fg,#ffffff)] dark:text-[color:var(--zui-button-teal-fg-dark,#ffffff)] hover:bg-[var(--zui-button-teal-bg-hover,#14b8a6)] dark:hover:bg-[var(--zui-button-teal-bg-hover-dark,#115e59)]\",\n yellow:\n \"bg-[var(--zui-button-yellow-bg,#eab308)] dark:bg-[var(--zui-button-yellow-bg-dark,#854d0e)] text-[color:var(--zui-button-yellow-fg,#ffffff)] dark:text-[color:var(--zui-button-yellow-fg-dark,#ffffff)] hover:bg-[var(--zui-button-yellow-bg-hover,#eab308)] dark:hover:bg-[var(--zui-button-yellow-bg-hover-dark,#713f12)]\",\n orange:\n \"bg-[var(--zui-button-orange-bg,#f97316)] dark:bg-[var(--zui-button-orange-bg-dark,#9a3412)] text-[color:var(--zui-button-orange-fg,#ffffff)] dark:text-[color:var(--zui-button-orange-fg-dark,#ffffff)] hover:bg-[var(--zui-button-orange-bg-hover,#f97316)] dark:hover:bg-[var(--zui-button-orange-bg-hover-dark,#7c2d12)]\",\n gray: \"bg-[var(--zui-button-gray-bg,#6b7280)] dark:bg-[var(--zui-button-gray-bg-dark,#374151)] text-[color:var(--zui-button-gray-fg,#ffffff)] dark:text-[color:var(--zui-button-gray-fg-dark,#ffffff)] hover:bg-[var(--zui-button-gray-bg-hover,#6b7280)] dark:hover:bg-[var(--zui-button-gray-bg-hover-dark,#1f2937)]\",\n amber:\n \"bg-[var(--zui-button-amber-bg,#f59e0b)] dark:bg-[var(--zui-button-amber-bg-dark,#92400e)] text-[color:var(--zui-button-amber-fg,#ffffff)] dark:text-[color:var(--zui-button-amber-fg-dark,#ffffff)] hover:bg-[var(--zui-button-amber-bg-hover,#f59e0b)] dark:hover:bg-[var(--zui-button-amber-bg-hover-dark,#78350f)]\",\n violet:\n \"bg-[var(--zui-button-violet-bg,#5b21b6)] dark:bg-[var(--zui-button-violet-bg-dark,#7c3aed)] text-[color:var(--zui-button-violet-fg,#ffffff)] dark:text-[color:var(--zui-button-violet-fg-dark,#ffffff)] hover:bg-[var(--zui-button-violet-bg-hover,#5b21b6)] dark:hover:bg-[var(--zui-button-violet-bg-hover-dark,#7c3aed)]\",\n \"gradient-blue\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-blue-from,#1e40af)] dark:from-[var(--zui-button-gradient-blue-from-dark,#2563eb)] to-[var(--zui-button-gradient-blue-to,#6b21a8)] dark:to-[var(--zui-button-gradient-blue-to-dark,#9333ea)] text-[color:var(--zui-button-gradient-blue-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-blue-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-blue-from-hover,#1e40af)] dark:hover:from-[var(--zui-button-gradient-blue-from-hover-dark,#2563eb)] hover:to-[var(--zui-button-gradient-blue-to-hover,#6b21a8)] dark:hover:to-[var(--zui-button-gradient-blue-to-hover-dark,#9333ea)]\",\n \"gradient-green\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-green-from,#166534)] dark:from-[var(--zui-button-gradient-green-from-dark,#16a34a)] to-[var(--zui-button-gradient-green-to,#3f6212)] dark:to-[var(--zui-button-gradient-green-to-dark,#65a30d)] text-[color:var(--zui-button-gradient-green-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-green-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-green-from-hover,#166534)] dark:hover:from-[var(--zui-button-gradient-green-from-hover-dark,#16a34a)] hover:to-[var(--zui-button-gradient-green-to-hover,#3f6212)] dark:hover:to-[var(--zui-button-gradient-green-to-hover-dark,#65a30d)]\",\n \"gradient-red\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-red-from,#991b1b)] dark:from-[var(--zui-button-gradient-red-from-dark,#dc2626)] to-[var(--zui-button-gradient-red-to,#9d174d)] dark:to-[var(--zui-button-gradient-red-to-dark,#db2777)] text-[color:var(--zui-button-gradient-red-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-red-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-red-from-hover,#991b1b)] dark:hover:from-[var(--zui-button-gradient-red-from-hover-dark,#dc2626)] hover:to-[var(--zui-button-gradient-red-to-hover,#9d174d)] dark:hover:to-[var(--zui-button-gradient-red-to-hover-dark,#db2777)]\",\n \"gradient-yellow\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-yellow-from,#854d0e)] dark:from-[var(--zui-button-gradient-yellow-from-dark,#ca8a04)] to-[var(--zui-button-gradient-yellow-to,#9a3412)] dark:to-[var(--zui-button-gradient-yellow-to-dark,#ea580c)] text-[color:var(--zui-button-gradient-yellow-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-yellow-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-yellow-from-hover,#854d0e)] dark:hover:from-[var(--zui-button-gradient-yellow-from-hover-dark,#ca8a04)] hover:to-[var(--zui-button-gradient-yellow-to-hover,#9a3412)] dark:hover:to-[var(--zui-button-gradient-yellow-to-hover-dark,#ea580c)]\",\n \"gradient-purple\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-purple-from,#6b21a8)] dark:from-[var(--zui-button-gradient-purple-from-dark,#9333ea)] to-[var(--zui-button-gradient-purple-to,#9d174d)] dark:to-[var(--zui-button-gradient-purple-to-dark,#db2777)] text-[color:var(--zui-button-gradient-purple-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-purple-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-purple-from-hover,#6b21a8)] dark:hover:from-[var(--zui-button-gradient-purple-from-hover-dark,#9333ea)] hover:to-[var(--zui-button-gradient-purple-to-hover,#9d174d)] dark:hover:to-[var(--zui-button-gradient-purple-to-hover-dark,#db2777)]\",\n \"gradient-teal\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-teal-from,#115e59)] dark:from-[var(--zui-button-gradient-teal-from-dark,#0d9488)] to-[var(--zui-button-gradient-teal-to,#155e75)] dark:to-[var(--zui-button-gradient-teal-to-dark,#0891b2)] text-[color:var(--zui-button-gradient-teal-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-teal-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-teal-from-hover,#115e59)] dark:hover:from-[var(--zui-button-gradient-teal-from-hover-dark,#0d9488)] hover:to-[var(--zui-button-gradient-teal-to-hover,#155e75)] dark:hover:to-[var(--zui-button-gradient-teal-to-hover-dark,#0891b2)]\",\n \"gradient-indigo\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-indigo-from,#3730a3)] dark:from-[var(--zui-button-gradient-indigo-from-dark,#4f46e5)] to-[var(--zui-button-gradient-indigo-to,#6b21a8)] dark:to-[var(--zui-button-gradient-indigo-to-dark,#9333ea)] text-[color:var(--zui-button-gradient-indigo-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-indigo-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-indigo-from-hover,#3730a3)] dark:hover:from-[var(--zui-button-gradient-indigo-from-hover-dark,#4f46e5)] hover:to-[var(--zui-button-gradient-indigo-to-hover,#6b21a8)] dark:hover:to-[var(--zui-button-gradient-indigo-to-hover-dark,#9333ea)]\",\n \"gradient-pink\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-pink-from,#9d174d)] dark:from-[var(--zui-button-gradient-pink-from-dark,#db2777)] to-[var(--zui-button-gradient-pink-to,#9f1239)] dark:to-[var(--zui-button-gradient-pink-to-dark,#e11d48)] text-[color:var(--zui-button-gradient-pink-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-pink-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-pink-from-hover,#9d174d)] dark:hover:from-[var(--zui-button-gradient-pink-from-hover-dark,#db2777)] hover:to-[var(--zui-button-gradient-pink-to-hover,#9f1239)] dark:hover:to-[var(--zui-button-gradient-pink-to-hover-dark,#e11d48)]\",\n \"gradient-orange\":\n \"bg-linear-to-r from-[var(--zui-button-gradient-orange-from,#9a3412)] dark:from-[var(--zui-button-gradient-orange-from-dark,#ea580c)] to-[var(--zui-button-gradient-orange-to,#991b1b)] dark:to-[var(--zui-button-gradient-orange-to-dark,#dc2626)] text-[color:var(--zui-button-gradient-orange-fg,#ffffff)] dark:text-[color:var(--zui-button-gradient-orange-fg-dark,#ffffff)] hover:from-[var(--zui-button-gradient-orange-from-hover,#9a3412)] dark:hover:from-[var(--zui-button-gradient-orange-from-hover-dark,#ea580c)] hover:to-[var(--zui-button-gradient-orange-to-hover,#991b1b)] dark:hover:to-[var(--zui-button-gradient-orange-to-hover-dark,#dc2626)]\",\n} as const;\n\nexport const zuiButtonSizes = {\n sm: \"h-7 md:h-9 px-3 text-xs\",\n md: \"h-9 md:h-11 px-4\",\n lg: \"h-10 md:h-12 px-5 text-base\",\n xl: \"h-12 md:h-14 px-6 text-lg\",\n \"2xl\": \"h-14 md:h-16 px-6 md:px-8 text-xl\",\n \"3xl\": \"h-16 md:h-18 px-8 md:px-10 text-2xl\",\n \"4xl\": \"h-18 md:h-20 px-10 md:px-12 text-2xl\",\n \"5xl\": \"h-20 md:h-22 px-12 md:px-14 text-2xl\",\n \"6xl\": \"h-22 md:h-24 px-14 md:px-16 text-2xl\",\n \"7xl\": \"h-24 md:h-26 px-16 md:px-18 text-2xl\",\n \"8xl\": \"h-26 md:h-28 px-20 text-2xl\",\n \"9xl\": \"h-24 md:h-30 px-18 md:px-22 text-2xl\",\n \"10xl\": \"h-26 md:h-32 px-20 md:px-24 text-2xl\",\n icon: \"h-10 w-10\",\n} as const;\n","import { cva } from \"class-variance-authority\";\n\nimport {\n zuiButtonAppearances,\n zuiButtonBase,\n zuiButtonSizes,\n} from \"../../design-system\";\n\nexport const buttonVariants = cva(zuiButtonBase, {\n variants: {\n appearance: zuiButtonAppearances,\n size: zuiButtonSizes,\n },\n defaultVariants: {\n appearance: \"default\",\n size: \"md\",\n },\n});\n"]}
|
package/dist/chunk-OULU7OC4.mjs
DELETED
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { chartPalette } from './chunk-G2WARVAM.mjs';
|
|
2
|
-
|
|
3
|
-
// src/charts/shared/colors.ts
|
|
4
|
-
function resolveColor(color, index) {
|
|
5
|
-
if (color && color in chartPalette) {
|
|
6
|
-
return chartPalette[color];
|
|
7
|
-
}
|
|
8
|
-
if (color) {
|
|
9
|
-
return { stroke: color, fill: color };
|
|
10
|
-
}
|
|
11
|
-
const paletteValues = Object.values(chartPalette);
|
|
12
|
-
return paletteValues[index % paletteValues.length] ?? chartPalette.cyan;
|
|
13
|
-
}
|
|
14
|
-
function getSeriesFill(series, index, opacity = 0.18) {
|
|
15
|
-
const color = resolveColor(series.color, index);
|
|
16
|
-
return series.fill ?? `${color.fill}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
export { getSeriesFill, resolveColor };
|
|
20
|
-
//# sourceMappingURL=chunk-OULU7OC4.mjs.map
|
|
21
|
-
//# sourceMappingURL=chunk-OULU7OC4.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/charts/shared/colors.ts"],"names":[],"mappings":";;;AAGO,SAAS,YAAA,CACd,OACA,KAAA,EACA;AACA,EAAA,IAAI,KAAA,IAAS,SAAS,YAAA,EAAc;AAClC,IAAA,OAAO,aAAa,KAAmB,CAAA;AAAA,EACzC;AACA,EAAA,IAAI,KAAA,EAAO;AACT,IAAA,OAAO,EAAE,MAAA,EAAQ,KAAA,EAAO,IAAA,EAAM,KAAA,EAAM;AAAA,EACtC;AAEA,EAAA,MAAM,aAAA,GAAgB,MAAA,CAAO,MAAA,CAAO,YAAY,CAAA;AAChD,EAAA,OAAO,aAAA,CAAc,KAAA,GAAQ,aAAA,CAAc,MAAM,KAAK,YAAA,CAAa,IAAA;AACrE;AAEO,SAAS,aAAA,CACd,MAAA,EACA,KAAA,EACA,OAAA,GAAU,IAAA,EACV;AACA,EAAA,MAAM,KAAA,GAAQ,YAAA,CAAa,MAAA,CAAO,KAAA,EAAO,KAAK,CAAA;AAC9C,EAAA,OACE,OAAO,IAAA,IACP,CAAA,EAAG,KAAA,CAAM,IAAI,GAAG,IAAA,CAAK,KAAA,CAAM,OAAA,GAAU,GAAG,EACrC,QAAA,CAAS,EAAE,EACX,QAAA,CAAS,CAAA,EAAG,GAAG,CAAC,CAAA,CAAA;AAEvB","file":"chunk-OULU7OC4.mjs","sourcesContent":["import type { ChartColor, ChartSeries } from \"./types\";\nimport { chartPalette } from \"./variants\";\n\nexport function resolveColor(\n color: ChartColor | string | undefined,\n index: number,\n) {\n if (color && color in chartPalette) {\n return chartPalette[color as ChartColor];\n }\n if (color) {\n return { stroke: color, fill: color };\n }\n\n const paletteValues = Object.values(chartPalette);\n return paletteValues[index % paletteValues.length] ?? chartPalette.cyan;\n}\n\nexport function getSeriesFill(\n series: ChartSeries,\n index: number,\n opacity = 0.18,\n) {\n const color = resolveColor(series.color, index);\n return (\n series.fill ??\n `${color.fill}${Math.round(opacity * 255)\n .toString(16)\n .padStart(2, \"0\")}`\n );\n}\n"]}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/charts/shared/variants.ts","../src/charts/shared/chart-frame.tsx"],"names":["cva","useResizeObserver","jsx","cn","ResponsiveContainer","jsxs","Fragment","CartesianGrid","Tooltip","Legend"],"mappings":"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","file":"chunk-QNUDODDX.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nexport const chartVariants = cva(\n [\n \"relative w-full min-w-0 overflow-hidden rounded-xl\",\n \"h-[var(--chart-height)] min-h-64 sm:min-h-72 md:min-h-80\",\n \"[&_.recharts-default-tooltip]:rounded-lg [&_.recharts-default-tooltip]:border [&_.recharts-default-tooltip]:border-slate-200\",\n \"[&_.recharts-default-tooltip]:bg-white/95 [&_.recharts-default-tooltip]:shadow-lg\",\n \"[&_.recharts-default-tooltip]:text-slate-900\",\n ],\n {\n variants: {\n appearance: {\n default:\n \"bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n muted:\n \"bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n outline:\n \"border border-slate-200 bg-white text-slate-600 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n glass:\n \"border border-white/15 bg-white/10 text-slate-100 backdrop-blur-md [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n sky: \"bg-sky-50 text-sky-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n emerald:\n \"bg-emerald-50 text-emerald-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n violet:\n \"bg-violet-50 text-violet-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n amber:\n \"bg-amber-50 text-amber-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n rose: \"bg-rose-50 text-rose-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n slate:\n \"bg-slate-50 text-slate-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n gray: \"bg-gray-50 text-gray-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n indigo:\n \"bg-indigo-50 text-indigo-500 [&_.recharts-cartesian-axis-tick-value]:fill-slate-900\",\n \"gradient-cyan-violet\":\n \"bg-gradient-to-r from-cyan-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-emerald-violet\":\n \"bg-gradient-to-r from-emerald-500 to-violet-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-amber-rose\":\n \"bg-gradient-to-r from-amber-500 to-rose-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-slate-gray\":\n \"bg-gradient-to-r from-slate-500 to-gray-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-indigo-purple\":\n \"bg-gradient-to-r from-indigo-500 to-purple-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-cyan-blue\":\n \"bg-gradient-to-r from-cyan-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-emerald-blue\":\n \"bg-gradient-to-r from-emerald-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n \"gradient-amber-blue\":\n \"bg-gradient-to-r from-amber-500 to-blue-500 text-white [&_.recharts-cartesian-axis-tick-value]:fill-white\",\n },\n density: {\n compact: \"p-2 sm:p-3\",\n comfortable: \"p-3 sm:p-4\",\n spacious: \"p-4 sm:p-5 md:p-6\",\n },\n },\n defaultVariants: {\n appearance: \"default\",\n density: \"comfortable\",\n },\n },\n);\n\nexport const chartPalette = {\n glass: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n outline: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n muted: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n default: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n sky: { stroke: \"#0f172a\", fill: \"#0f172a\", textColor: \"#0f172a\" },\n cyan: { stroke: \"#0891b2\", fill: \"#67e8f9\", textColor: \"#0891b2\" },\n emerald: { stroke: \"#059669\", fill: \"#6ee7b7\", textColor: \"#059669\" },\n violet: { stroke: \"#7c3aed\", fill: \"#c4b5fd\", textColor: \"#7c3aed\" },\n amber: { stroke: \"#d97706\", fill: \"#fcd34d\", textColor: \"#d97706\" },\n rose: { stroke: \"#e11d48\", fill: \"#fda4af\", textColor: \"#e11d48\" },\n slate: { stroke: \"#475569\", fill: \"#cbd5e1\", textColor: \"#475569\" },\n gray: { stroke: \"#6b7280\", fill: \"#d1d5db\", textColor: \"#6b7280\" },\n white: { stroke: \"#ffffff\", fill: \"#ffffff\", textColor: \"#ffffff\" },\n indigo: { stroke: \"#6366f1\", fill: \"#c7d2fe\", textColor: \"#6366f1\" },\n \"gradient-cyan-violet\": {\n stroke: \"#0891b2\",\n fill: \"#67e8f9\",\n textColor: \"#0891b2\",\n },\n \"gradient-emerald-violet\": {\n stroke: \"#059669\",\n fill: \"#6ee7b7\",\n textColor: \"#059669\",\n },\n \"gradient-amber-rose\": {\n stroke: \"#d97706\",\n fill: \"#fcd34d\",\n textColor: \"#d97706\",\n },\n \"gradient-slate-gray\": {\n stroke: \"#475569\",\n fill: \"#cbd5e1\",\n textColor: \"#475569\",\n },\n \"gradient-indigo-purple\": {\n stroke: \"#6366f1\",\n fill: \"#c7d2fe\",\n textColor: \"#6366f1\",\n },\n \"gradient-cyan-blue\": {\n stroke: \"#0891b2\",\n fill: \"#67e8f9\",\n textColor: \"#0891b2\",\n },\n \"gradient-emerald-blue\": {\n stroke: \"#059669\",\n fill: \"#6ee7b7\",\n textColor: \"#059669\",\n },\n \"gradient-amber-blue\": {\n stroke: \"#d97706\",\n fill: \"#fcd34d\",\n textColor: \"#d97706\",\n },\n} as const;\n\nexport const chartColorValues = Object.keys(chartPalette) as Array<\n keyof typeof chartPalette\n>;\n","\"use client\";\n\nimport type { CSSProperties, HTMLAttributes, ReactNode } from \"react\";\nimport { CartesianGrid, Legend, ResponsiveContainer, Tooltip } from \"recharts\";\n\nimport { useResizeObserver } from \"../../hooks/useResizeObserver/useResizeObserver\";\nimport { cn } from \"../../lib/utils\";\nimport { chartVariants } from \"./variants\";\nimport { VariantProps } from \"class-variance-authority\";\n\n/** Chart-level props that may be forwarded from *Chart `...rest` and must not reach a DOM node. */\nconst CHART_ONLY_DIV_PROP_KEYS = new Set([\n \"data\",\n \"margin\",\n \"series\",\n \"showGrid\",\n \"showLegend\",\n \"showTooltip\",\n \"stacked\",\n \"strokeDasharray\",\n \"syncId\",\n \"tooltipColor\",\n \"xKey\",\n]);\n\nfunction filterDivProps(\n props: HTMLAttributes<HTMLDivElement>,\n): HTMLAttributes<HTMLDivElement> {\n const entries = Object.entries(props).filter(\n ([key]) => !CHART_ONLY_DIV_PROP_KEYS.has(key),\n );\n return Object.fromEntries(entries) as HTMLAttributes<HTMLDivElement>;\n}\n\ntype ChartFrameProps = HTMLAttributes<HTMLDivElement> & {\n appearance?: VariantProps<typeof chartVariants>[\"appearance\"];\n containerStyle?: CSSProperties;\n density?: \"compact\" | \"comfortable\" | \"spacious\" | null;\n emptyState?: ReactNode;\n hasData: boolean;\n height: number;\n style?: CSSProperties;\n children: ReactNode;\n};\n\nexport const defaultChartMargin = { top: 16, right: 16, bottom: 8, left: 0 };\n\nexport function ChartFrame({\n appearance,\n children,\n className,\n containerStyle,\n density,\n emptyState = null,\n hasData,\n height,\n style,\n ...props\n}: ChartFrameProps) {\n const divProps = filterDivProps(props);\n const [measureRef, size] = useResizeObserver<HTMLDivElement>();\n const chartStyle = {\n \"--chart-height\": `${height}px`,\n ...style,\n } as CSSProperties;\n const canRenderChart =\n (size?.width ?? 0) > 0 && (size?.height ?? 0) > 0;\n\n if (!hasData) {\n return (\n <div\n className={cn(chartVariants({ appearance, density }), className)}\n style={chartStyle}\n {...divProps}\n >\n <div className=\"flex h-full min-h-48 items-center justify-center text-sm text-slate-500\">\n {emptyState}\n </div>\n </div>\n );\n }\n\n return (\n <div\n className={cn(chartVariants({ appearance, density }), className)}\n style={chartStyle}\n {...divProps}\n >\n <div ref={measureRef} className=\"h-full min-h-0 w-full min-w-0\">\n {canRenderChart ? (\n <ResponsiveContainer\n width=\"100%\"\n height=\"100%\"\n minWidth={0}\n debounce={80}\n style={containerStyle}\n >\n {children}\n </ResponsiveContainer>\n ) : null}\n </div>\n </div>\n );\n}\n\nexport function ChartDecorators({\n axis,\n showGrid,\n showLegend,\n showTooltip,\n tooltipColor = \"#0f172a\",\n}: {\n axis: ReactNode;\n showGrid: boolean;\n showLegend: boolean;\n showTooltip: boolean;\n tooltipColor?: string;\n}) {\n return (\n <>\n {showGrid ? (\n <CartesianGrid\n strokeDasharray=\"3 3\"\n stroke=\"currentColor\"\n opacity={0.16}\n />\n ) : null}\n {axis}\n {showTooltip ? (\n <Tooltip\n cursor={{ opacity: 0.12 }}\n contentStyle={{ color: tooltipColor }}\n labelStyle={{ color: tooltipColor }}\n itemStyle={{ color: tooltipColor }}\n />\n ) : null}\n {showLegend ? <Legend /> : null}\n </>\n );\n}\n"]}
|
package/dist/chunk-Z6S36PDD.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
var chunkQNUDODDX_js = require('./chunk-QNUDODDX.js');
|
|
4
|
-
|
|
5
|
-
// src/charts/shared/colors.ts
|
|
6
|
-
function resolveColor(color, index) {
|
|
7
|
-
if (color && color in chunkQNUDODDX_js.chartPalette) {
|
|
8
|
-
return chunkQNUDODDX_js.chartPalette[color];
|
|
9
|
-
}
|
|
10
|
-
if (color) {
|
|
11
|
-
return { stroke: color, fill: color };
|
|
12
|
-
}
|
|
13
|
-
const paletteValues = Object.values(chunkQNUDODDX_js.chartPalette);
|
|
14
|
-
return paletteValues[index % paletteValues.length] ?? chunkQNUDODDX_js.chartPalette.cyan;
|
|
15
|
-
}
|
|
16
|
-
function getSeriesFill(series, index, opacity = 0.18) {
|
|
17
|
-
const color = resolveColor(series.color, index);
|
|
18
|
-
return series.fill ?? `${color.fill}${Math.round(opacity * 255).toString(16).padStart(2, "0")}`;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
exports.getSeriesFill = getSeriesFill;
|
|
22
|
-
exports.resolveColor = resolveColor;
|
|
23
|
-
//# sourceMappingURL=chunk-Z6S36PDD.js.map
|
|
24
|
-
//# sourceMappingURL=chunk-Z6S36PDD.js.map
|