@rovula/ui 0.0.9 → 0.0.10

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)) }));
+    },
+};