@rovula/ui 0.0.9 → 0.0.11

package/dist/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,44 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RadioGroup, RadioGroupItem } from "./RadioGroup";
+import { Label } from "../Label/Label";
+var meta = {
+    title: "Components/RadioGroup",
+    component: RadioGroup,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        disabled: false,
+    },
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(RadioGroup, __assign({ defaultValue: "option-one" }, props, { children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] })) }));
+    },
+};
+export var Diabled = {
+    args: {
+        disabled: true,
+    },
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex items-center space-x-2", children: _jsxs(RadioGroup, { defaultValue: "option-one", disabled: true, children: [_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-one", id: "option-one" }), _jsx(Label, { htmlFor: "option-one", children: "Option One" })] }), _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(RadioGroupItem, { value: "option-two", id: "option-two" }), _jsx(Label, { htmlFor: "option-two", children: "Option Two" })] })] }) }));
+    },
+};

package/dist/components/Table/Datagrid.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Table = function (_a) {
+    var columns = _a.columns, data = _a.data;
+    return (_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(function (column, index) { return (_jsx("th", { children: column.header }, index)); }) }) }), _jsx("tbody", { children: data.map(function (row, rowIndex) { return (_jsx("tr", { children: columns.map(function (column, colIndex) { return (_jsx("td", { children: row[column.accessor] }, colIndex)); }) }, rowIndex)); }) })] }));
+};
+export default Table;

package/dist/components/Table/Table.js

@@ -1,6 +1,66 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var Table = function (_a) {
-    var columns = _a.columns, data = _a.data;
-    return (_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map(function (column, index) { return (_jsx("th", { children: column.header }, index)); }) }) }), _jsx("tbody", { children: data.map(function (row, rowIndex) { return (_jsx("tr", { children: columns.map(function (column, colIndex) { return (_jsx("td", { children: row[column.accessor] }, colIndex)); }) }, rowIndex)); }) })] }));
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
 };
-export default Table;
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@/utils/cn";
+var Table = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom text-sm", className) }, props)) }));
+});
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b", className) }, props)));
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("tbody", __assign({ ref: ref, className: cn("[&_tr:last-child]:border-0", className) }, props)));
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("tfoot", __assign({ ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className) }, props)));
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("tr", __assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className) }, props)));
+});
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("th", __assign({ ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className) }, props)));
+});
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("td", __assign({ ref: ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className) }, props)));
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("caption", __assign({ ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className) }, props)));
+});
+TableCaption.displayName = "TableCaption";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };

package/dist/components/Table/Table.stories.js

@@ -0,0 +1,32 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Table, TableBody, TableCaption, TableCell, TableHead, TableHeader, TableRow, } from "./Table";
+var meta = {
+    title: "Components/Table",
+    component: Table,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {},
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(Table, { children: [_jsx(TableCaption, { children: "A list of your recent invoices." }), _jsx(TableHeader, { children: _jsxs(TableRow, { children: [_jsx(TableHead, { className: "w-[100px]", children: "Invoice" }), _jsx(TableHead, { children: "Status" }), _jsx(TableHead, { children: "Method" }), _jsx(TableHead, { className: "text-right", children: "Amount" })] }) }), _jsxs(TableBody, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] }), _jsxs(TableRow, { children: [_jsx(TableCell, { className: "font-medium", children: "INV001" }), _jsx(TableCell, { children: "Paid" }), _jsx(TableCell, { children: "Credit Card" }), _jsx(TableCell, { className: "text-right", children: "$250.00" })] })] })] }) }));
+    },
+};

package/dist/components/Tabs/Tabs.js

@@ -1,8 +1,14 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+"use client";
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/utils/cn";
 import { useState } from "react";
 var Tabs = function (_a) {
-    var tabs = _a.tabs, _b = _a.initialTab, initialTab = _b === void 0 ? 0 : _b;
-    var _c = useState(initialTab), activeTab = _c[0], setActiveTab = _c[1];
-    return (_jsxs("div", { className: "tabs", children: [_jsx("div", { className: "tab-buttons", children: tabs.map(function (tab, index) { return (_jsx("button", { className: index === activeTab ? "active" : "", onClick: function () { return setActiveTab(index); }, children: tab.label }, index)); }) }), _jsx("div", { className: "tab-content", children: tabs[activeTab].content })] }));
+    var _b;
+    var _c = _a.tabs, tabs = _c === void 0 ? [] : _c, _d = _a.initialTab, initialTab = _d === void 0 ? 0 : _d;
+    var _e = useState(initialTab), activeTab = _e[0], setActiveTab = _e[1];
+    return (_jsxs("div", { className: "w-full space-y-4", children: [_jsx("div", { className: "flex border-b border-primary-10 gap-6 h-[54px] box-border", role: "tablist", children: tabs.map(function (tab, index) { return (_jsxs("button", { role: "tab", "aria-selected": index === activeTab, "aria-controls": "tab-content-".concat(index), id: "tab-".concat(index), className: cn("flex flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3", {
+                        "typography-body2 text-textcolor-dark border-b-[3px] border-textcolor-dark": index === activeTab,
+                        "typography-body1 text-textcolor-grey-light border-b-[3px] border-transparent hover:text-textcolor-dark ": index !== activeTab,
+                    }), onClick: function () { return setActiveTab(index); }, children: [tab.startTabContent, tab.label, tab.endTabContent] }, index)); }) }), _jsx("div", { className: "", role: "tabpanel", id: "tab-content-".concat(activeTab), "aria-labelledby": "tab-".concat(activeTab), children: (_b = tabs[activeTab]) === null || _b === void 0 ? void 0 : _b.content })] }));
 };
 export default Tabs;

package/dist/components/Tabs/Tabs.stories.js

@@ -0,0 +1,60 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import Tabs from "./Tabs";
+import { ChevronDownIcon, ArchiveBoxIcon } from "@heroicons/react/16/solid";
+var meta = {
+    title: "Components/Tabs",
+    component: Tabs,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+var tabs = [
+    {
+        label: "Tab1",
+        content: _jsx("p", { children: "Tab 1 content" }),
+    },
+    {
+        label: "Tab2",
+        content: _jsx("p", { children: "Tab 2 content" }),
+    },
+    {
+        label: "Tab3",
+        content: _jsx("p", { children: "Tab 3 content" }),
+    },
+];
+export var Default = {
+    args: {
+        initialTab: 0,
+        tabs: tabs,
+    },
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tabs, __assign({ tabs: tabs }, props)) }));
+    },
+};
+export var CustomTab = {
+    args: {
+        initialTab: 0,
+        tabs: tabs.map(function (tab) { return (__assign(__assign({}, tab), { startTabContent: _jsx(ArchiveBoxIcon, { className: "size-3 " }), endTabContent: _jsx(ChevronDownIcon, { className: "size-3" }) })); }),
+    },
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tabs, __assign({ tabs: tabs }, props)) }));
+    },
+};

package/dist/components/Text/Text.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-var Text = function (_a) {
+import { forwardRef } from "react";
+var Text = forwardRef(function (_a) {
     var _b = _a.variant, variant = _b === void 0 ? "body1" : _b, _c = _a.tag, Tag = _c === void 0 ? "p" : _c, children = _a.children, className = _a.className, color = _a.color, style = _a.style;
     return (_jsx(Tag, { className: "typography-".concat(variant, " text-").concat(color, " ").concat(className), style: style, children: children }));
-};
+});
 export default Text;

package/dist/components/TextInput/TextInput.js

@@ -23,10 +23,10 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, } from "react";
 import { helperTextVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, } from "./TextInput.styles";
-import { twMerge } from "tailwind-merge";
 import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
-var TextInput = forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.type, type = _e === void 0 ? "text" : _e, helperText = _a.helperText, errorMessage = _a.errorMessage, _f = _a.fullwidth, fullwidth = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? true : _j, _k = _a.hasClearIcon, hasClearIcon = _k === void 0 ? true : _k, endIcon = _a.endIcon, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "endIcon"]);
+import { cn } from "@/utils/cn";
+export var TextInput = forwardRef(function (_a, ref) {
+    var id = _a.id, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.type, type = _e === void 0 ? "text" : _e, helperText = _a.helperText, errorMessage = _a.errorMessage, _f = _a.fullwidth, fullwidth = _f === void 0 ? true : _f, _g = _a.disabled, disabled = _g === void 0 ? false : _g, _h = _a.error, error = _h === void 0 ? false : _h, _j = _a.required, required = _j === void 0 ? true : _j, _k = _a.hasClearIcon, hasClearIcon = _k === void 0 ? true : _k, endIcon = _a.endIcon, labelClassName = _a.labelClassName, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "endIcon", "labelClassName"]);
     var inputRef = useRef(null);
     var _id = id || "".concat(type, "-").concat(label, "-input");
     var inputClassname = inputVariant({
@@ -46,14 +46,12 @@ var TextInput = forwardRef(function (_a, ref) {
     var helperTextClassname = helperTextVariant({ size: size, error: error, disabled: disabled });
     var iconWrapperClassname = iconWrapperVariant({ size: size });
     var iconClassname = iconVariant({ size: size });
-    useImperativeHandle(ref, function () { return ({
-        clearInput: handleClearInput,
-    }); });
+    useImperativeHandle(ref, function () { return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current; });
     var handleClearInput = function () {
         if (inputRef.current) {
             inputRef.current.value = "";
         }
     };
-    return (_jsxs("div", { className: "inline-flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [_jsx("input", __assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: twMerge(inputClassname, props.className) })), hasClearIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIcon, _jsxs("label", { htmlFor: _id, className: labelClassname, children: [label, " ", required && _jsx("span", { className: "text-error", children: "*" })] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
+    return (_jsxs("div", { className: "inline-flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [_jsx("input", __assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIcon, _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && _jsx("span", { className: "text-error", children: "*" })] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
 });
 export default TextInput;

package/dist/components/TextInput/TextInput.stories.js

@@ -10,6 +10,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
 import TextInput from "./TextInput";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 var meta = {
@@ -37,3 +38,24 @@ export var Default = {
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", size: "lg" }, args)), _jsx(TextInput, __assign({ id: "2", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args))] }));
     },
 };
+var InputWithRef = function (props) {
+    var inputRef = useRef(null);
+    return (_jsx(TextInput, __assign({ id: "1", size: "lg" }, props, { ref: inputRef, labelClassName: "peer-focus:bg-red-500", onKeyDown: function (e) {
+            var _a, _b;
+            if (e.code === "Enter") {
+                (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
+            }
+        } })));
+};
+export var CustomLabel = {
+    args: {
+        label: "Lorem Ipsum",
+        // value: "Lorem Ipsum",
+        fullwidth: true,
+    },
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", size: "lg" }, args, { labelClassName: "peer-focus:bg-red-500" })), _jsx(InputWithRef, __assign({ id: "2", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args))] }));
+    },
+};

package/dist/components/ui/table.js

@@ -0,0 +1,66 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { cn } from "@/utils/cn";
+var Table = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("div", { className: "relative w-full overflow-auto", children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom text-sm", className) }, props)) }));
+});
+Table.displayName = "Table";
+var TableHeader = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("thead", __assign({ ref: ref, className: cn("[&_tr]:border-b", className) }, props)));
+});
+TableHeader.displayName = "TableHeader";
+var TableBody = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("tbody", __assign({ ref: ref, className: cn("[&_tr:last-child]:border-0", className) }, props)));
+});
+TableBody.displayName = "TableBody";
+var TableFooter = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("tfoot", __assign({ ref: ref, className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className) }, props)));
+});
+TableFooter.displayName = "TableFooter";
+var TableRow = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("tr", __assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className) }, props)));
+});
+TableRow.displayName = "TableRow";
+var TableHead = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("th", __assign({ ref: ref, className: cn("h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0", className) }, props)));
+});
+TableHead.displayName = "TableHead";
+var TableCell = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("td", __assign({ ref: ref, className: cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className) }, props)));
+});
+TableCell.displayName = "TableCell";
+var TableCaption = React.forwardRef(function (_a, ref) {
+    var className = _a.className, props = __rest(_a, ["className"]);
+    return (_jsx("caption", __assign({ ref: ref, className: cn("mt-4 text-sm text-muted-foreground", className) }, props)));
+});
+TableCaption.displayName = "TableCaption";
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };