@karakuri-ui/react 0.2.3 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +0 -1
- package/dist/components/ui/accordion.d.mts +49 -0
- package/dist/components/ui/accordion.d.ts +49 -0
- package/dist/components/ui/accordion.js +220 -0
- package/dist/components/ui/accordion.js.map +1 -0
- package/dist/components/ui/accordion.mjs +181 -0
- package/dist/components/ui/accordion.mjs.map +1 -0
- package/dist/components/ui/alert.d.mts +47 -0
- package/dist/components/ui/alert.d.ts +47 -0
- package/dist/components/ui/alert.js +223 -0
- package/dist/components/ui/alert.js.map +1 -0
- package/dist/components/ui/alert.mjs +185 -0
- package/dist/components/ui/alert.mjs.map +1 -0
- package/dist/components/ui/avatar.d.mts +232 -0
- package/dist/components/ui/avatar.d.ts +232 -0
- package/dist/components/ui/avatar.js +250 -0
- package/dist/components/ui/avatar.js.map +1 -0
- package/dist/components/ui/avatar.mjs +209 -0
- package/dist/components/ui/avatar.mjs.map +1 -0
- package/dist/components/ui/badge.d.mts +31 -0
- package/dist/components/ui/badge.d.ts +31 -0
- package/dist/components/ui/badge.js +205 -0
- package/dist/components/ui/badge.js.map +1 -0
- package/dist/components/ui/badge.mjs +170 -0
- package/dist/components/ui/badge.mjs.map +1 -0
- package/dist/components/ui/breadcrumb.d.mts +57 -0
- package/dist/components/ui/breadcrumb.d.ts +57 -0
- package/dist/components/ui/breadcrumb.js +209 -0
- package/dist/components/ui/breadcrumb.js.map +1 -0
- package/dist/components/ui/breadcrumb.mjs +168 -0
- package/dist/components/ui/breadcrumb.mjs.map +1 -0
- package/dist/components/ui/button-group.d.mts +22 -0
- package/dist/components/ui/button-group.d.ts +22 -0
- package/dist/components/ui/button-group.js +107 -0
- package/dist/components/ui/button-group.js.map +1 -0
- package/dist/components/ui/button-group.mjs +72 -0
- package/dist/components/ui/button-group.mjs.map +1 -0
- package/dist/components/ui/button.d.mts +31 -0
- package/dist/components/ui/button.d.ts +31 -0
- package/dist/components/ui/button.js +176 -0
- package/dist/components/ui/button.js.map +1 -0
- package/dist/components/ui/button.mjs +141 -0
- package/dist/components/ui/button.mjs.map +1 -0
- package/dist/components/ui/card.d.mts +77 -0
- package/dist/components/ui/card.d.ts +77 -0
- package/dist/components/ui/card.js +370 -0
- package/dist/components/ui/card.js.map +1 -0
- package/dist/components/ui/card.mjs +328 -0
- package/dist/components/ui/card.mjs.map +1 -0
- package/dist/{chart.js → components/ui/chart.js} +29 -39
- package/dist/components/ui/chart.js.map +1 -0
- package/dist/{chart.mjs → components/ui/chart.mjs} +21 -31
- package/dist/components/ui/chart.mjs.map +1 -0
- package/dist/components/ui/checkbox.d.mts +24 -0
- package/dist/components/ui/checkbox.d.ts +24 -0
- package/dist/components/ui/checkbox.js +173 -0
- package/dist/components/ui/checkbox.js.map +1 -0
- package/dist/components/ui/checkbox.mjs +138 -0
- package/dist/components/ui/checkbox.mjs.map +1 -0
- package/dist/components/ui/divider.d.mts +27 -0
- package/dist/components/ui/divider.d.ts +27 -0
- package/dist/components/ui/divider.js +147 -0
- package/dist/components/ui/divider.js.map +1 -0
- package/dist/components/ui/divider.mjs +112 -0
- package/dist/components/ui/divider.mjs.map +1 -0
- package/dist/components/ui/drawer.d.mts +51 -0
- package/dist/components/ui/drawer.d.ts +51 -0
- package/dist/components/ui/drawer.js +225 -0
- package/dist/components/ui/drawer.js.map +1 -0
- package/dist/components/ui/drawer.mjs +178 -0
- package/dist/components/ui/drawer.mjs.map +1 -0
- package/dist/components/ui/dropdown.d.mts +59 -0
- package/dist/components/ui/dropdown.d.ts +59 -0
- package/dist/components/ui/dropdown.js +310 -0
- package/dist/components/ui/dropdown.js.map +1 -0
- package/dist/components/ui/dropdown.mjs +263 -0
- package/dist/components/ui/dropdown.mjs.map +1 -0
- package/dist/components/ui/field.d.mts +33 -0
- package/dist/components/ui/field.d.ts +33 -0
- package/dist/components/ui/field.js +146 -0
- package/dist/components/ui/field.js.map +1 -0
- package/dist/components/ui/field.mjs +108 -0
- package/dist/components/ui/field.mjs.map +1 -0
- package/dist/components/ui/icon-button.d.mts +20 -0
- package/dist/components/ui/icon-button.d.ts +20 -0
- package/dist/components/ui/icon-button.js +147 -0
- package/dist/components/ui/icon-button.js.map +1 -0
- package/dist/components/ui/icon-button.mjs +112 -0
- package/dist/components/ui/icon-button.mjs.map +1 -0
- package/dist/components/ui/index.d.mts +55 -0
- package/dist/components/ui/index.d.ts +55 -0
- package/dist/components/ui/index.js +476 -0
- package/dist/components/ui/index.js.map +1 -0
- package/dist/components/ui/index.mjs +246 -0
- package/dist/components/ui/index.mjs.map +1 -0
- package/dist/components/ui/input.d.mts +20 -0
- package/dist/components/ui/input.d.ts +20 -0
- package/dist/components/ui/input.js +250 -0
- package/dist/components/ui/input.js.map +1 -0
- package/dist/components/ui/input.mjs +215 -0
- package/dist/components/ui/input.mjs.map +1 -0
- package/dist/components/ui/metric-card.d.mts +53 -0
- package/dist/components/ui/metric-card.d.ts +53 -0
- package/dist/components/ui/metric-card.js +258 -0
- package/dist/components/ui/metric-card.js.map +1 -0
- package/dist/components/ui/metric-card.mjs +217 -0
- package/dist/components/ui/metric-card.mjs.map +1 -0
- package/dist/components/ui/modal.d.mts +77 -0
- package/dist/components/ui/modal.d.ts +77 -0
- package/dist/components/ui/modal.js +396 -0
- package/dist/components/ui/modal.js.map +1 -0
- package/dist/components/ui/modal.mjs +338 -0
- package/dist/components/ui/modal.mjs.map +1 -0
- package/dist/components/ui/navigation-menu.d.mts +139 -0
- package/dist/components/ui/navigation-menu.d.ts +139 -0
- package/dist/components/ui/navigation-menu.js +531 -0
- package/dist/components/ui/navigation-menu.js.map +1 -0
- package/dist/components/ui/navigation-menu.mjs +488 -0
- package/dist/components/ui/navigation-menu.mjs.map +1 -0
- package/dist/components/ui/pagination.d.mts +130 -0
- package/dist/components/ui/pagination.d.ts +130 -0
- package/dist/components/ui/pagination.js +495 -0
- package/dist/components/ui/pagination.js.map +1 -0
- package/dist/components/ui/pagination.mjs +449 -0
- package/dist/components/ui/pagination.mjs.map +1 -0
- package/dist/components/ui/popover.d.mts +41 -0
- package/dist/components/ui/popover.d.ts +41 -0
- package/dist/components/ui/popover.js +175 -0
- package/dist/components/ui/popover.js.map +1 -0
- package/dist/components/ui/popover.mjs +133 -0
- package/dist/components/ui/popover.mjs.map +1 -0
- package/dist/components/ui/progress.d.mts +35 -0
- package/dist/components/ui/progress.d.ts +35 -0
- package/dist/components/ui/progress.js +194 -0
- package/dist/components/ui/progress.js.map +1 -0
- package/dist/components/ui/progress.mjs +159 -0
- package/dist/components/ui/progress.mjs.map +1 -0
- package/dist/components/ui/radio-group.d.mts +40 -0
- package/dist/components/ui/radio-group.d.ts +40 -0
- package/dist/components/ui/radio-group.js +177 -0
- package/dist/components/ui/radio-group.js.map +1 -0
- package/dist/components/ui/radio-group.mjs +140 -0
- package/dist/components/ui/radio-group.mjs.map +1 -0
- package/dist/components/ui/segmented.d.mts +30 -0
- package/dist/components/ui/segmented.d.ts +30 -0
- package/dist/components/ui/segmented.js +241 -0
- package/dist/components/ui/segmented.js.map +1 -0
- package/dist/components/ui/segmented.mjs +204 -0
- package/dist/components/ui/segmented.mjs.map +1 -0
- package/dist/components/ui/select.d.mts +31 -0
- package/dist/components/ui/select.d.ts +31 -0
- package/dist/components/ui/select.js +317 -0
- package/dist/components/ui/select.js.map +1 -0
- package/dist/components/ui/select.mjs +276 -0
- package/dist/components/ui/select.mjs.map +1 -0
- package/dist/components/ui/skeleton.d.mts +26 -0
- package/dist/components/ui/skeleton.d.ts +26 -0
- package/dist/components/ui/skeleton.js +144 -0
- package/dist/components/ui/skeleton.js.map +1 -0
- package/dist/components/ui/skeleton.mjs +109 -0
- package/dist/components/ui/skeleton.mjs.map +1 -0
- package/dist/components/ui/slider.d.mts +38 -0
- package/dist/components/ui/slider.d.ts +38 -0
- package/dist/components/ui/slider.js +180 -0
- package/dist/components/ui/slider.js.map +1 -0
- package/dist/components/ui/slider.mjs +145 -0
- package/dist/components/ui/slider.mjs.map +1 -0
- package/dist/components/ui/spinner.d.mts +23 -0
- package/dist/components/ui/spinner.d.ts +23 -0
- package/dist/components/ui/spinner.js +471 -0
- package/dist/components/ui/spinner.js.map +1 -0
- package/dist/components/ui/spinner.mjs +436 -0
- package/dist/components/ui/spinner.mjs.map +1 -0
- package/dist/components/ui/switch.d.mts +22 -0
- package/dist/components/ui/switch.d.ts +22 -0
- package/dist/components/ui/switch.js +173 -0
- package/dist/components/ui/switch.js.map +1 -0
- package/dist/components/ui/switch.mjs +138 -0
- package/dist/components/ui/switch.mjs.map +1 -0
- package/dist/components/ui/table.d.mts +74 -0
- package/dist/components/ui/table.d.ts +74 -0
- package/dist/components/ui/table.js +240 -0
- package/dist/components/ui/table.js.map +1 -0
- package/dist/components/ui/table.mjs +199 -0
- package/dist/components/ui/table.mjs.map +1 -0
- package/dist/components/ui/tabs.d.mts +40 -0
- package/dist/components/ui/tabs.d.ts +40 -0
- package/dist/components/ui/tabs.js +238 -0
- package/dist/components/ui/tabs.js.map +1 -0
- package/dist/components/ui/tabs.mjs +199 -0
- package/dist/components/ui/tabs.mjs.map +1 -0
- package/dist/components/ui/textarea.d.mts +19 -0
- package/dist/components/ui/textarea.d.ts +19 -0
- package/dist/components/ui/textarea.js +181 -0
- package/dist/components/ui/textarea.js.map +1 -0
- package/dist/components/ui/textarea.mjs +146 -0
- package/dist/components/ui/textarea.mjs.map +1 -0
- package/dist/components/ui/toast.d.mts +93 -0
- package/dist/components/ui/toast.d.ts +93 -0
- package/dist/components/ui/toast.js +429 -0
- package/dist/components/ui/toast.js.map +1 -0
- package/dist/components/ui/toast.mjs +393 -0
- package/dist/components/ui/toast.mjs.map +1 -0
- package/dist/components/ui/toggle-group.d.mts +47 -0
- package/dist/components/ui/toggle-group.d.ts +47 -0
- package/dist/components/ui/toggle-group.js +186 -0
- package/dist/components/ui/toggle-group.js.map +1 -0
- package/dist/components/ui/toggle-group.mjs +149 -0
- package/dist/components/ui/toggle-group.mjs.map +1 -0
- package/dist/components/ui/toggle.d.mts +19 -0
- package/dist/components/ui/toggle.d.ts +19 -0
- package/dist/components/ui/toggle.js +194 -0
- package/dist/components/ui/toggle.js.map +1 -0
- package/dist/components/ui/toggle.mjs +159 -0
- package/dist/components/ui/toggle.mjs.map +1 -0
- package/dist/components/ui/tooltip.d.mts +37 -0
- package/dist/components/ui/tooltip.d.ts +37 -0
- package/dist/components/ui/tooltip.js +137 -0
- package/dist/components/ui/tooltip.js.map +1 -0
- package/dist/components/ui/tooltip.mjs +96 -0
- package/dist/components/ui/tooltip.mjs.map +1 -0
- package/dist/lib/utils.d.mts +10 -0
- package/dist/lib/utils.d.ts +10 -0
- package/dist/lib/utils.js +33 -0
- package/dist/lib/utils.js.map +1 -0
- package/dist/lib/utils.mjs +9 -0
- package/dist/lib/utils.mjs.map +1 -0
- package/package.json +11 -11
- package/dist/chart.js.map +0 -1
- package/dist/chart.mjs.map +0 -1
- package/dist/index.d.mts +0 -1636
- package/dist/index.d.ts +0 -1636
- package/dist/index.js +0 -7291
- package/dist/index.js.map +0 -1
- package/dist/index.mjs +0 -7048
- package/dist/index.mjs.map +0 -1
- /package/dist/{chart.d.mts → components/ui/chart.d.mts} +0 -0
- /package/dist/{chart.d.ts → components/ui/chart.d.ts} +0 -0
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
"use client";
|
|
3
|
+
var __create = Object.create;
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
6
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __export = (target, all) => {
|
|
10
|
+
for (var name in all)
|
|
11
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
12
|
+
};
|
|
13
|
+
var __copyProps = (to, from, except, desc) => {
|
|
14
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
15
|
+
for (let key of __getOwnPropNames(from))
|
|
16
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
17
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
18
|
+
}
|
|
19
|
+
return to;
|
|
20
|
+
};
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
23
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
24
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
25
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
26
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
27
|
+
mod
|
|
28
|
+
));
|
|
29
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
30
|
+
var table_exports = {};
|
|
31
|
+
__export(table_exports, {
|
|
32
|
+
Table: () => Table,
|
|
33
|
+
TableBody: () => TableBody,
|
|
34
|
+
TableCaption: () => TableCaption,
|
|
35
|
+
TableCell: () => TableCell,
|
|
36
|
+
TableFooter: () => TableFooter,
|
|
37
|
+
TableHead: () => TableHead,
|
|
38
|
+
TableHeader: () => TableHeader,
|
|
39
|
+
TableRow: () => TableRow
|
|
40
|
+
});
|
|
41
|
+
module.exports = __toCommonJS(table_exports);
|
|
42
|
+
var React = __toESM(require("react"));
|
|
43
|
+
var import_class_variance_authority = require("class-variance-authority");
|
|
44
|
+
var import_utils = require("../../lib/utils");
|
|
45
|
+
const TableContext = React.createContext({ size: "default", variant: "default", stickyHeader: false });
|
|
46
|
+
const cellPaddingMap = {
|
|
47
|
+
sm: "px-3 py-2 text-sm",
|
|
48
|
+
default: "px-4 py-3 text-sm",
|
|
49
|
+
lg: "px-6 py-4 text-base"
|
|
50
|
+
};
|
|
51
|
+
const headPaddingMap = {
|
|
52
|
+
sm: "px-3 py-2 text-xs",
|
|
53
|
+
default: "px-4 py-3 text-xs",
|
|
54
|
+
lg: "px-6 py-3.5 text-sm"
|
|
55
|
+
};
|
|
56
|
+
const checkboxPaddingMap = {
|
|
57
|
+
sm: "[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0",
|
|
58
|
+
default: "[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0",
|
|
59
|
+
lg: "[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0"
|
|
60
|
+
};
|
|
61
|
+
const tableVariants = (0, import_class_variance_authority.cva)(
|
|
62
|
+
"w-full caption-bottom text-sm",
|
|
63
|
+
{
|
|
64
|
+
variants: {
|
|
65
|
+
variant: {
|
|
66
|
+
default: "",
|
|
67
|
+
bordered: "border border-border",
|
|
68
|
+
striped: ""
|
|
69
|
+
}
|
|
70
|
+
},
|
|
71
|
+
defaultVariants: {
|
|
72
|
+
variant: "default"
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
);
|
|
76
|
+
const TableRoot = React.forwardRef(
|
|
77
|
+
({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { size, variant, stickyHeader } }, /* @__PURE__ */ React.createElement("div", { className: (0, import_utils.cn)("relative w-full overflow-auto", wrapperClassName) }, /* @__PURE__ */ React.createElement(
|
|
78
|
+
"table",
|
|
79
|
+
{
|
|
80
|
+
ref,
|
|
81
|
+
className: (0, import_utils.cn)(tableVariants({ variant }), className),
|
|
82
|
+
...props
|
|
83
|
+
}
|
|
84
|
+
)))
|
|
85
|
+
);
|
|
86
|
+
TableRoot.displayName = "Table";
|
|
87
|
+
const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
|
|
88
|
+
const { stickyHeader } = React.useContext(TableContext);
|
|
89
|
+
return /* @__PURE__ */ React.createElement(
|
|
90
|
+
"thead",
|
|
91
|
+
{
|
|
92
|
+
ref,
|
|
93
|
+
className: (0, import_utils.cn)(
|
|
94
|
+
"[&_tr]:border-b [&_tr]:border-border",
|
|
95
|
+
stickyHeader && "sticky top-0 z-10 bg-background",
|
|
96
|
+
className
|
|
97
|
+
),
|
|
98
|
+
...props
|
|
99
|
+
}
|
|
100
|
+
);
|
|
101
|
+
});
|
|
102
|
+
TableHeader.displayName = "TableHeader";
|
|
103
|
+
const TableBody = React.forwardRef(({ className, ...props }, ref) => {
|
|
104
|
+
const { variant } = React.useContext(TableContext);
|
|
105
|
+
return /* @__PURE__ */ React.createElement(
|
|
106
|
+
"tbody",
|
|
107
|
+
{
|
|
108
|
+
ref,
|
|
109
|
+
className: (0, import_utils.cn)(
|
|
110
|
+
"[&_tr:last-child]:border-b-0",
|
|
111
|
+
variant === "striped" && "[&_tr:nth-child(even)]:bg-background-muted",
|
|
112
|
+
className
|
|
113
|
+
),
|
|
114
|
+
...props
|
|
115
|
+
}
|
|
116
|
+
);
|
|
117
|
+
});
|
|
118
|
+
TableBody.displayName = "TableBody";
|
|
119
|
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
120
|
+
"tfoot",
|
|
121
|
+
{
|
|
122
|
+
ref,
|
|
123
|
+
className: (0, import_utils.cn)(
|
|
124
|
+
"border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0",
|
|
125
|
+
className
|
|
126
|
+
),
|
|
127
|
+
...props
|
|
128
|
+
}
|
|
129
|
+
));
|
|
130
|
+
TableFooter.displayName = "TableFooter";
|
|
131
|
+
const TableRow = React.forwardRef(
|
|
132
|
+
({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
133
|
+
"tr",
|
|
134
|
+
{
|
|
135
|
+
ref,
|
|
136
|
+
"data-selected": selected || void 0,
|
|
137
|
+
className: (0, import_utils.cn)(
|
|
138
|
+
"border-b border-border transition-colors duration-fast",
|
|
139
|
+
interactive && "hover:bg-background-muted/50 cursor-pointer",
|
|
140
|
+
className
|
|
141
|
+
),
|
|
142
|
+
...props
|
|
143
|
+
}
|
|
144
|
+
)
|
|
145
|
+
);
|
|
146
|
+
TableRow.displayName = "TableRow";
|
|
147
|
+
const defaultSortIcons = {
|
|
148
|
+
asc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" })),
|
|
149
|
+
desc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })),
|
|
150
|
+
default: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }))
|
|
151
|
+
};
|
|
152
|
+
const TableHead = React.forwardRef(
|
|
153
|
+
({ className, align = "left", sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {
|
|
154
|
+
const { size } = React.useContext(TableContext);
|
|
155
|
+
const icons = { ...defaultSortIcons, ...sortIcon };
|
|
156
|
+
const content = sortable ? /* @__PURE__ */ React.createElement(
|
|
157
|
+
"button",
|
|
158
|
+
{
|
|
159
|
+
type: "button",
|
|
160
|
+
className: "inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group",
|
|
161
|
+
onClick: onSort
|
|
162
|
+
},
|
|
163
|
+
children,
|
|
164
|
+
/* @__PURE__ */ React.createElement("span", { className: (0, import_utils.cn)(
|
|
165
|
+
"shrink-0 transition-colors duration-fast",
|
|
166
|
+
sortDirection ? "text-foreground" : "text-text-muted"
|
|
167
|
+
) }, sortDirection === "asc" ? icons.asc : sortDirection === "desc" ? icons.desc : icons.default)
|
|
168
|
+
) : children;
|
|
169
|
+
return /* @__PURE__ */ React.createElement(
|
|
170
|
+
"th",
|
|
171
|
+
{
|
|
172
|
+
ref,
|
|
173
|
+
className: (0, import_utils.cn)(
|
|
174
|
+
"text-left align-middle font-semibold text-text-muted whitespace-nowrap",
|
|
175
|
+
headPaddingMap[size],
|
|
176
|
+
checkboxPaddingMap[size],
|
|
177
|
+
align === "center" && "text-center",
|
|
178
|
+
align === "right" && "text-right",
|
|
179
|
+
sortable && "select-none",
|
|
180
|
+
className
|
|
181
|
+
),
|
|
182
|
+
"aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
|
|
183
|
+
...props
|
|
184
|
+
},
|
|
185
|
+
content
|
|
186
|
+
);
|
|
187
|
+
}
|
|
188
|
+
);
|
|
189
|
+
TableHead.displayName = "TableHead";
|
|
190
|
+
const TableCell = React.forwardRef(
|
|
191
|
+
({ className, align = "left", ...props }, ref) => {
|
|
192
|
+
const { size } = React.useContext(TableContext);
|
|
193
|
+
return /* @__PURE__ */ React.createElement(
|
|
194
|
+
"td",
|
|
195
|
+
{
|
|
196
|
+
ref,
|
|
197
|
+
className: (0, import_utils.cn)(
|
|
198
|
+
"text-foreground align-middle",
|
|
199
|
+
cellPaddingMap[size],
|
|
200
|
+
checkboxPaddingMap[size],
|
|
201
|
+
align === "center" && "text-center",
|
|
202
|
+
align === "right" && "text-right",
|
|
203
|
+
className
|
|
204
|
+
),
|
|
205
|
+
...props
|
|
206
|
+
}
|
|
207
|
+
);
|
|
208
|
+
}
|
|
209
|
+
);
|
|
210
|
+
TableCell.displayName = "TableCell";
|
|
211
|
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
212
|
+
"caption",
|
|
213
|
+
{
|
|
214
|
+
ref,
|
|
215
|
+
className: (0, import_utils.cn)("mt-4 text-sm text-text-muted", className),
|
|
216
|
+
...props
|
|
217
|
+
}
|
|
218
|
+
));
|
|
219
|
+
TableCaption.displayName = "TableCaption";
|
|
220
|
+
const Table = Object.assign(TableRoot, {
|
|
221
|
+
Header: TableHeader,
|
|
222
|
+
Body: TableBody,
|
|
223
|
+
Footer: TableFooter,
|
|
224
|
+
Row: TableRow,
|
|
225
|
+
Head: TableHead,
|
|
226
|
+
Cell: TableCell,
|
|
227
|
+
Caption: TableCaption
|
|
228
|
+
});
|
|
229
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
230
|
+
0 && (module.exports = {
|
|
231
|
+
Table,
|
|
232
|
+
TableBody,
|
|
233
|
+
TableCaption,
|
|
234
|
+
TableCell,
|
|
235
|
+
TableFooter,
|
|
236
|
+
TableHead,
|
|
237
|
+
TableHeader,
|
|
238
|
+
TableRow
|
|
239
|
+
});
|
|
240
|
+
//# sourceMappingURL=table.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n size: TableSize\n variant: TableVariant\n stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-sm',\n default: 'px-4 py-3 text-sm',\n lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-xs',\n default: 'px-4 py-3 text-xs',\n lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n 'w-full caption-bottom text-sm',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-border',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n extends React.HTMLAttributes<HTMLTableElement>,\n VariantProps<typeof tableVariants> {\n /** Table density */\n size?: TableSize\n /** Visual style */\n variant?: TableVariant\n /** Sticky header when scrolling */\n stickyHeader?: boolean\n /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n wrapperClassName?: string\n}\n\nconst TableRoot = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n <TableContext.Provider value={{ size, variant, stickyHeader }}>\n <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n <table\n ref={ref}\n className={cn(tableVariants({ variant }), className)}\n {...props}\n />\n </div>\n </TableContext.Provider>\n )\n)\nTableRoot.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { stickyHeader } = React.useContext(TableContext)\n return (\n <thead\n ref={ref}\n className={cn(\n '[&_tr]:border-b [&_tr]:border-border',\n stickyHeader && 'sticky top-0 z-10 bg-background',\n className\n )}\n {...props}\n />\n )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { variant } = React.useContext(TableContext)\n return (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-b-0',\n variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n className\n )}\n {...props}\n />\n )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Enable hover highlight */\n interactive?: boolean\n /** Selected state background */\n selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, interactive = false, selected = false, ...props }, ref) => (\n <tr\n ref={ref}\n data-selected={selected || undefined}\n className={cn(\n 'border-b border-border transition-colors duration-fast',\n interactive && 'hover:bg-background-muted/50 cursor-pointer',\n className\n )}\n {...props}\n />\n )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n asc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n ),\n desc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n ),\n default: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n </svg>\n ),\n}\n\nexport interface SortIconSet {\n /** Icon for ascending state */\n asc?: React.ReactNode\n /** Icon for descending state */\n desc?: React.ReactNode\n /** Icon for unsorted (default) state */\n default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n /** Enable sort indicator */\n sortable?: boolean\n /** Current sort direction */\n sortDirection?: SortDirection\n /** Sort click handler */\n onSort?: () => void\n /** Custom sort icons (overrides built-in icons) */\n sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n const icons = { ...defaultSortIcons, ...sortIcon }\n\n const content = sortable ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n onClick={onSort}\n >\n {children}\n <span className={cn(\n 'shrink-0 transition-colors duration-fast',\n sortDirection ? 'text-foreground' : 'text-text-muted'\n )}>\n {sortDirection === 'asc' ? icons.asc\n : sortDirection === 'desc' ? icons.desc\n : icons.default}\n </span>\n </button>\n ) : children\n\n return (\n <th\n ref={ref}\n className={cn(\n 'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n headPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n sortable && 'select-none',\n className\n )}\n aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n {...props}\n >\n {content}\n </th>\n )\n }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, align = 'left', ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n return (\n <td\n ref={ref}\n className={cn(\n 'text-foreground align-middle',\n cellPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n className\n )}\n {...props}\n />\n )\n }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-text-muted', className)}\n {...props}\n />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\n// ─── Namespace ──────────────────────────────────────────\nconst Table = Object.assign(TableRoot, {\n Header: TableHeader,\n Body: TableBody,\n Footer: TableFooter,\n Row: TableRow,\n Head: TableHead,\n Cell: TableCell,\n Caption: TableCaption,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Table {\n export type RowProps = TableRowProps\n export type HeadProps = TableHeadProps\n export type CellProps = TableCellProps\n}\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,199 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import * as React from "react";
|
|
3
|
+
import { cva } from "class-variance-authority";
|
|
4
|
+
import { cn } from "../../lib/utils";
|
|
5
|
+
const TableContext = React.createContext({ size: "default", variant: "default", stickyHeader: false });
|
|
6
|
+
const cellPaddingMap = {
|
|
7
|
+
sm: "px-3 py-2 text-sm",
|
|
8
|
+
default: "px-4 py-3 text-sm",
|
|
9
|
+
lg: "px-6 py-4 text-base"
|
|
10
|
+
};
|
|
11
|
+
const headPaddingMap = {
|
|
12
|
+
sm: "px-3 py-2 text-xs",
|
|
13
|
+
default: "px-4 py-3 text-xs",
|
|
14
|
+
lg: "px-6 py-3.5 text-sm"
|
|
15
|
+
};
|
|
16
|
+
const checkboxPaddingMap = {
|
|
17
|
+
sm: "[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0",
|
|
18
|
+
default: "[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0",
|
|
19
|
+
lg: "[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0"
|
|
20
|
+
};
|
|
21
|
+
const tableVariants = cva(
|
|
22
|
+
"w-full caption-bottom text-sm",
|
|
23
|
+
{
|
|
24
|
+
variants: {
|
|
25
|
+
variant: {
|
|
26
|
+
default: "",
|
|
27
|
+
bordered: "border border-border",
|
|
28
|
+
striped: ""
|
|
29
|
+
}
|
|
30
|
+
},
|
|
31
|
+
defaultVariants: {
|
|
32
|
+
variant: "default"
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
);
|
|
36
|
+
const TableRoot = React.forwardRef(
|
|
37
|
+
({ className, size = "default", variant = "default", stickyHeader = false, wrapperClassName, ...props }, ref) => /* @__PURE__ */ React.createElement(TableContext.Provider, { value: { size, variant, stickyHeader } }, /* @__PURE__ */ React.createElement("div", { className: cn("relative w-full overflow-auto", wrapperClassName) }, /* @__PURE__ */ React.createElement(
|
|
38
|
+
"table",
|
|
39
|
+
{
|
|
40
|
+
ref,
|
|
41
|
+
className: cn(tableVariants({ variant }), className),
|
|
42
|
+
...props
|
|
43
|
+
}
|
|
44
|
+
)))
|
|
45
|
+
);
|
|
46
|
+
TableRoot.displayName = "Table";
|
|
47
|
+
const TableHeader = React.forwardRef(({ className, ...props }, ref) => {
|
|
48
|
+
const { stickyHeader } = React.useContext(TableContext);
|
|
49
|
+
return /* @__PURE__ */ React.createElement(
|
|
50
|
+
"thead",
|
|
51
|
+
{
|
|
52
|
+
ref,
|
|
53
|
+
className: cn(
|
|
54
|
+
"[&_tr]:border-b [&_tr]:border-border",
|
|
55
|
+
stickyHeader && "sticky top-0 z-10 bg-background",
|
|
56
|
+
className
|
|
57
|
+
),
|
|
58
|
+
...props
|
|
59
|
+
}
|
|
60
|
+
);
|
|
61
|
+
});
|
|
62
|
+
TableHeader.displayName = "TableHeader";
|
|
63
|
+
const TableBody = React.forwardRef(({ className, ...props }, ref) => {
|
|
64
|
+
const { variant } = React.useContext(TableContext);
|
|
65
|
+
return /* @__PURE__ */ React.createElement(
|
|
66
|
+
"tbody",
|
|
67
|
+
{
|
|
68
|
+
ref,
|
|
69
|
+
className: cn(
|
|
70
|
+
"[&_tr:last-child]:border-b-0",
|
|
71
|
+
variant === "striped" && "[&_tr:nth-child(even)]:bg-background-muted",
|
|
72
|
+
className
|
|
73
|
+
),
|
|
74
|
+
...props
|
|
75
|
+
}
|
|
76
|
+
);
|
|
77
|
+
});
|
|
78
|
+
TableBody.displayName = "TableBody";
|
|
79
|
+
const TableFooter = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
80
|
+
"tfoot",
|
|
81
|
+
{
|
|
82
|
+
ref,
|
|
83
|
+
className: cn(
|
|
84
|
+
"border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0",
|
|
85
|
+
className
|
|
86
|
+
),
|
|
87
|
+
...props
|
|
88
|
+
}
|
|
89
|
+
));
|
|
90
|
+
TableFooter.displayName = "TableFooter";
|
|
91
|
+
const TableRow = React.forwardRef(
|
|
92
|
+
({ className, interactive = false, selected = false, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
93
|
+
"tr",
|
|
94
|
+
{
|
|
95
|
+
ref,
|
|
96
|
+
"data-selected": selected || void 0,
|
|
97
|
+
className: cn(
|
|
98
|
+
"border-b border-border transition-colors duration-fast",
|
|
99
|
+
interactive && "hover:bg-background-muted/50 cursor-pointer",
|
|
100
|
+
className
|
|
101
|
+
),
|
|
102
|
+
...props
|
|
103
|
+
}
|
|
104
|
+
)
|
|
105
|
+
);
|
|
106
|
+
TableRow.displayName = "TableRow";
|
|
107
|
+
const defaultSortIcons = {
|
|
108
|
+
asc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M5 15l7-7 7 7" })),
|
|
109
|
+
desc: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M19 9l-7 7-7-7" })),
|
|
110
|
+
default: /* @__PURE__ */ React.createElement("svg", { className: "icon-xs", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", strokeWidth: 2, "aria-hidden": "true" }, /* @__PURE__ */ React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4" }))
|
|
111
|
+
};
|
|
112
|
+
const TableHead = React.forwardRef(
|
|
113
|
+
({ className, align = "left", sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {
|
|
114
|
+
const { size } = React.useContext(TableContext);
|
|
115
|
+
const icons = { ...defaultSortIcons, ...sortIcon };
|
|
116
|
+
const content = sortable ? /* @__PURE__ */ React.createElement(
|
|
117
|
+
"button",
|
|
118
|
+
{
|
|
119
|
+
type: "button",
|
|
120
|
+
className: "inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group",
|
|
121
|
+
onClick: onSort
|
|
122
|
+
},
|
|
123
|
+
children,
|
|
124
|
+
/* @__PURE__ */ React.createElement("span", { className: cn(
|
|
125
|
+
"shrink-0 transition-colors duration-fast",
|
|
126
|
+
sortDirection ? "text-foreground" : "text-text-muted"
|
|
127
|
+
) }, sortDirection === "asc" ? icons.asc : sortDirection === "desc" ? icons.desc : icons.default)
|
|
128
|
+
) : children;
|
|
129
|
+
return /* @__PURE__ */ React.createElement(
|
|
130
|
+
"th",
|
|
131
|
+
{
|
|
132
|
+
ref,
|
|
133
|
+
className: cn(
|
|
134
|
+
"text-left align-middle font-semibold text-text-muted whitespace-nowrap",
|
|
135
|
+
headPaddingMap[size],
|
|
136
|
+
checkboxPaddingMap[size],
|
|
137
|
+
align === "center" && "text-center",
|
|
138
|
+
align === "right" && "text-right",
|
|
139
|
+
sortable && "select-none",
|
|
140
|
+
className
|
|
141
|
+
),
|
|
142
|
+
"aria-sort": sortDirection === "asc" ? "ascending" : sortDirection === "desc" ? "descending" : void 0,
|
|
143
|
+
...props
|
|
144
|
+
},
|
|
145
|
+
content
|
|
146
|
+
);
|
|
147
|
+
}
|
|
148
|
+
);
|
|
149
|
+
TableHead.displayName = "TableHead";
|
|
150
|
+
const TableCell = React.forwardRef(
|
|
151
|
+
({ className, align = "left", ...props }, ref) => {
|
|
152
|
+
const { size } = React.useContext(TableContext);
|
|
153
|
+
return /* @__PURE__ */ React.createElement(
|
|
154
|
+
"td",
|
|
155
|
+
{
|
|
156
|
+
ref,
|
|
157
|
+
className: cn(
|
|
158
|
+
"text-foreground align-middle",
|
|
159
|
+
cellPaddingMap[size],
|
|
160
|
+
checkboxPaddingMap[size],
|
|
161
|
+
align === "center" && "text-center",
|
|
162
|
+
align === "right" && "text-right",
|
|
163
|
+
className
|
|
164
|
+
),
|
|
165
|
+
...props
|
|
166
|
+
}
|
|
167
|
+
);
|
|
168
|
+
}
|
|
169
|
+
);
|
|
170
|
+
TableCell.displayName = "TableCell";
|
|
171
|
+
const TableCaption = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(
|
|
172
|
+
"caption",
|
|
173
|
+
{
|
|
174
|
+
ref,
|
|
175
|
+
className: cn("mt-4 text-sm text-text-muted", className),
|
|
176
|
+
...props
|
|
177
|
+
}
|
|
178
|
+
));
|
|
179
|
+
TableCaption.displayName = "TableCaption";
|
|
180
|
+
const Table = Object.assign(TableRoot, {
|
|
181
|
+
Header: TableHeader,
|
|
182
|
+
Body: TableBody,
|
|
183
|
+
Footer: TableFooter,
|
|
184
|
+
Row: TableRow,
|
|
185
|
+
Head: TableHead,
|
|
186
|
+
Cell: TableCell,
|
|
187
|
+
Caption: TableCaption
|
|
188
|
+
});
|
|
189
|
+
export {
|
|
190
|
+
Table,
|
|
191
|
+
TableBody,
|
|
192
|
+
TableCaption,
|
|
193
|
+
TableCell,
|
|
194
|
+
TableFooter,
|
|
195
|
+
TableHead,
|
|
196
|
+
TableHeader,
|
|
197
|
+
TableRow
|
|
198
|
+
};
|
|
199
|
+
//# sourceMappingURL=table.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/components/ui/table.tsx"],"sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { cn } from '../../lib/utils'\n\n// Size variants for table density\ntype TableSize = 'sm' | 'default' | 'lg'\n\n// Visual style variants\ntype TableVariant = 'default' | 'bordered' | 'striped'\n\n// Root context — set at Root, consumed by children\nconst TableContext = React.createContext<{\n size: TableSize\n variant: TableVariant\n stickyHeader: boolean\n}>({ size: 'default', variant: 'default', stickyHeader: false })\n\n// Cell padding per size\nconst cellPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-sm',\n default: 'px-4 py-3 text-sm',\n lg: 'px-6 py-4 text-base',\n}\n\n// Head cell padding per size\nconst headPaddingMap: Record<TableSize, string> = {\n sm: 'px-3 py-2 text-xs',\n default: 'px-4 py-3 text-xs',\n lg: 'px-6 py-3.5 text-sm',\n}\n\n// Checkbox column padding override per size (right padding removed — next column's left padding handles the gap)\nconst checkboxPaddingMap: Record<TableSize, string> = {\n sm: '[&:has([role=checkbox])]:pl-1 [&:has([role=checkbox])]:pr-0',\n default: '[&:has([role=checkbox])]:pl-2 [&:has([role=checkbox])]:pr-0',\n lg: '[&:has([role=checkbox])]:pl-3 [&:has([role=checkbox])]:pr-0',\n}\n\nconst tableVariants = cva(\n 'w-full caption-bottom text-sm',\n {\n variants: {\n variant: {\n default: '',\n bordered: 'border border-border',\n striped: '',\n },\n },\n defaultVariants: {\n variant: 'default',\n },\n }\n)\n\n// ─── Root ────────────────────────────────────────────────────────\nexport interface TableProps\n extends React.HTMLAttributes<HTMLTableElement>,\n VariantProps<typeof tableVariants> {\n /** Table density */\n size?: TableSize\n /** Visual style */\n variant?: TableVariant\n /** Sticky header when scrolling */\n stickyHeader?: boolean\n /** Additional className for the scroll wrapper (e.g. max-h-[400px]) */\n wrapperClassName?: string\n}\n\nconst TableRoot = React.forwardRef<HTMLTableElement, TableProps>(\n ({ className, size = 'default', variant = 'default', stickyHeader = false, wrapperClassName, ...props }, ref) => (\n <TableContext.Provider value={{ size, variant, stickyHeader }}>\n <div className={cn('relative w-full overflow-auto', wrapperClassName)}>\n <table\n ref={ref}\n className={cn(tableVariants({ variant }), className)}\n {...props}\n />\n </div>\n </TableContext.Provider>\n )\n)\nTableRoot.displayName = 'Table'\n\n// ─── Header ──────────────────────────────────────────────────────\nconst TableHeader = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { stickyHeader } = React.useContext(TableContext)\n return (\n <thead\n ref={ref}\n className={cn(\n '[&_tr]:border-b [&_tr]:border-border',\n stickyHeader && 'sticky top-0 z-10 bg-background',\n className\n )}\n {...props}\n />\n )\n})\nTableHeader.displayName = 'TableHeader'\n\n// ─── Body ────────────────────────────────────────────────────────\nconst TableBody = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => {\n const { variant } = React.useContext(TableContext)\n return (\n <tbody\n ref={ref}\n className={cn(\n '[&_tr:last-child]:border-b-0',\n variant === 'striped' && '[&_tr:nth-child(even)]:bg-background-muted',\n className\n )}\n {...props}\n />\n )\n})\nTableBody.displayName = 'TableBody'\n\n// ─── Footer ──────────────────────────────────────────────────────\nconst TableFooter = React.forwardRef<\n HTMLTableSectionElement,\n React.HTMLAttributes<HTMLTableSectionElement>\n>(({ className, ...props }, ref) => (\n <tfoot\n ref={ref}\n className={cn(\n 'border-t border-border bg-background-muted/50 font-normal [&>tr]:last:border-b-0',\n className\n )}\n {...props}\n />\n))\nTableFooter.displayName = 'TableFooter'\n\n// ─── Row ─────────────────────────────────────────────────────────\nexport interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n /** Enable hover highlight */\n interactive?: boolean\n /** Selected state background */\n selected?: boolean\n}\n\nconst TableRow = React.forwardRef<HTMLTableRowElement, TableRowProps>(\n ({ className, interactive = false, selected = false, ...props }, ref) => (\n <tr\n ref={ref}\n data-selected={selected || undefined}\n className={cn(\n 'border-b border-border transition-colors duration-fast',\n interactive && 'hover:bg-background-muted/50 cursor-pointer',\n className\n )}\n {...props}\n />\n )\n)\nTableRow.displayName = 'TableRow'\n\n// ─── Head Cell ───────────────────────────────────────────────────\ntype SortDirection = 'asc' | 'desc' | null\n\n// Default sort icons\nconst defaultSortIcons = {\n asc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M5 15l7-7 7 7\" />\n </svg>\n ),\n desc: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M19 9l-7 7-7-7\" />\n </svg>\n ),\n default: (\n <svg className=\"icon-xs\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2} aria-hidden=\"true\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" d=\"M7 16V4m0 0L3 8m4-4l4 4m6 0v12m0 0l4-4m-4 4l-4-4\" />\n </svg>\n ),\n}\n\nexport interface SortIconSet {\n /** Icon for ascending state */\n asc?: React.ReactNode\n /** Icon for descending state */\n desc?: React.ReactNode\n /** Icon for unsorted (default) state */\n default?: React.ReactNode\n}\n\nexport interface TableHeadProps extends React.ThHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n /** Enable sort indicator */\n sortable?: boolean\n /** Current sort direction */\n sortDirection?: SortDirection\n /** Sort click handler */\n onSort?: () => void\n /** Custom sort icons (overrides built-in icons) */\n sortIcon?: SortIconSet\n}\n\nconst TableHead = React.forwardRef<HTMLTableCellElement, TableHeadProps>(\n ({ className, align = 'left', sortable = false, sortDirection = null, onSort, sortIcon, children, ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n const icons = { ...defaultSortIcons, ...sortIcon }\n\n const content = sortable ? (\n <button\n type=\"button\"\n className=\"inline-flex items-center gap-1.5 hover:text-foreground transition-colors duration-fast group\"\n onClick={onSort}\n >\n {children}\n <span className={cn(\n 'shrink-0 transition-colors duration-fast',\n sortDirection ? 'text-foreground' : 'text-text-muted'\n )}>\n {sortDirection === 'asc' ? icons.asc\n : sortDirection === 'desc' ? icons.desc\n : icons.default}\n </span>\n </button>\n ) : children\n\n return (\n <th\n ref={ref}\n className={cn(\n 'text-left align-middle font-semibold text-text-muted whitespace-nowrap',\n headPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n sortable && 'select-none',\n className\n )}\n aria-sort={sortDirection === 'asc' ? 'ascending' : sortDirection === 'desc' ? 'descending' : undefined}\n {...props}\n >\n {content}\n </th>\n )\n }\n)\nTableHead.displayName = 'TableHead'\n\n// ─── Data Cell ───────────────────────────────────────────────────\nexport interface TableCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {\n /** Text alignment */\n align?: 'left' | 'center' | 'right'\n}\n\nconst TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(\n ({ className, align = 'left', ...props }, ref) => {\n const { size } = React.useContext(TableContext)\n return (\n <td\n ref={ref}\n className={cn(\n 'text-foreground align-middle',\n cellPaddingMap[size],\n checkboxPaddingMap[size],\n align === 'center' && 'text-center',\n align === 'right' && 'text-right',\n className\n )}\n {...props}\n />\n )\n }\n)\nTableCell.displayName = 'TableCell'\n\n// ─── Caption ─────────────────────────────────────────────────────\nconst TableCaption = React.forwardRef<\n HTMLTableCaptionElement,\n React.HTMLAttributes<HTMLTableCaptionElement>\n>(({ className, ...props }, ref) => (\n <caption\n ref={ref}\n className={cn('mt-4 text-sm text-text-muted', className)}\n {...props}\n />\n))\nTableCaption.displayName = 'TableCaption'\n\nexport type { TableSize, TableVariant, SortDirection }\n\n// ─── Namespace ──────────────────────────────────────────\nconst Table = Object.assign(TableRoot, {\n Header: TableHeader,\n Body: TableBody,\n Footer: TableFooter,\n Row: TableRow,\n Head: TableHead,\n Cell: TableCell,\n Caption: TableCaption,\n})\n\n// eslint-disable-next-line @typescript-eslint/no-namespace\nnamespace Table {\n export type RowProps = TableRowProps\n export type HeadProps = TableHeadProps\n export type CellProps = TableCellProps\n}\n\nexport {\n Table,\n TableHeader,\n TableBody,\n TableFooter,\n TableRow,\n TableHead,\n TableCell,\n TableCaption,\n}\n"],"mappings":"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","names":[]}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
|
|
6
|
+
declare const tabsListVariants: (props?: ({
|
|
7
|
+
variant?: "line" | "enclosed" | "pill" | null | undefined;
|
|
8
|
+
fitted?: boolean | null | undefined;
|
|
9
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
|
+
interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
|
|
11
|
+
size?: 'sm' | 'md' | 'default' | 'lg';
|
|
12
|
+
/** Indicator color for line variant */
|
|
13
|
+
color?: 'default' | 'primary';
|
|
14
|
+
/** Top border-radius for enclosed variant, container radius for pill variant */
|
|
15
|
+
radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
|
|
16
|
+
}
|
|
17
|
+
declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const tabsTriggerVariants: (props?: ({
|
|
19
|
+
variant?: "line" | "enclosed" | "pill" | null | undefined;
|
|
20
|
+
size?: "default" | "sm" | "lg" | "md" | null | undefined;
|
|
21
|
+
fitted?: boolean | null | undefined;
|
|
22
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
23
|
+
interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {
|
|
24
|
+
}
|
|
25
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
|
|
27
|
+
}
|
|
28
|
+
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>> & {
|
|
30
|
+
List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
Trigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
+
Content: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
+
};
|
|
34
|
+
declare namespace Tabs {
|
|
35
|
+
type ListProps = TabsListProps;
|
|
36
|
+
type TriggerProps = TabsTriggerProps;
|
|
37
|
+
type ContentProps = TabsContentProps;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, tabsListVariants, tabsTriggerVariants };
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import * as class_variance_authority_types from 'class-variance-authority/types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import * as TabsPrimitive from '@radix-ui/react-tabs';
|
|
4
|
+
import { VariantProps } from 'class-variance-authority';
|
|
5
|
+
|
|
6
|
+
declare const tabsListVariants: (props?: ({
|
|
7
|
+
variant?: "line" | "enclosed" | "pill" | null | undefined;
|
|
8
|
+
fitted?: boolean | null | undefined;
|
|
9
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
10
|
+
interface TabsListProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof tabsListVariants> {
|
|
11
|
+
size?: 'sm' | 'md' | 'default' | 'lg';
|
|
12
|
+
/** Indicator color for line variant */
|
|
13
|
+
color?: 'default' | 'primary';
|
|
14
|
+
/** Top border-radius for enclosed variant, container radius for pill variant */
|
|
15
|
+
radius?: 'none' | 'sm' | 'base' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
|
|
16
|
+
}
|
|
17
|
+
declare const TabsList: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
+
declare const tabsTriggerVariants: (props?: ({
|
|
19
|
+
variant?: "line" | "enclosed" | "pill" | null | undefined;
|
|
20
|
+
size?: "default" | "sm" | "lg" | "md" | null | undefined;
|
|
21
|
+
fitted?: boolean | null | undefined;
|
|
22
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
23
|
+
interface TabsTriggerProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>, Omit<VariantProps<typeof tabsTriggerVariants>, 'variant' | 'size' | 'fitted'> {
|
|
24
|
+
}
|
|
25
|
+
declare const TabsTrigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
26
|
+
interface TabsContentProps extends React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> {
|
|
27
|
+
}
|
|
28
|
+
declare const TabsContent: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
29
|
+
declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>> & {
|
|
30
|
+
List: React.ForwardRefExoticComponent<TabsListProps & React.RefAttributes<HTMLDivElement>>;
|
|
31
|
+
Trigger: React.ForwardRefExoticComponent<TabsTriggerProps & React.RefAttributes<HTMLButtonElement>>;
|
|
32
|
+
Content: React.ForwardRefExoticComponent<TabsContentProps & React.RefAttributes<HTMLDivElement>>;
|
|
33
|
+
};
|
|
34
|
+
declare namespace Tabs {
|
|
35
|
+
type ListProps = TabsListProps;
|
|
36
|
+
type TriggerProps = TabsTriggerProps;
|
|
37
|
+
type ContentProps = TabsContentProps;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
export { Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, TabsTrigger, type TabsTriggerProps, tabsListVariants, tabsTriggerVariants };
|