@rovula/ui 0.0.21 → 0.0.22

package/dist/components/Switch/Switch.js

@@ -0,0 +1,22 @@
+"use client";
+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 * as SwitchPrimitives from "@radix-ui/react-switch";
+import { cn } from "@/utils/cn";
+const Switch = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(SwitchPrimitives.Root, Object.assign({ className: cn("peer inline-flex h-3 w-[32px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background", "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-secondary-active/[0.32] data-[state=unchecked]:bg-tertiary-active/[0.32]", className) }, props, { ref: ref, children: _jsx(SwitchPrimitives.Thumb, { className: cn("pointer-events-none block size-4 rounded-full bg-secondary-active shadow-lg ring-0", "transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:-translate-x-[2px] data-[state=unchecked]:bg-tertiary-active") }) })));
+});
+Switch.displayName = SwitchPrimitives.Root.displayName;
+export { Switch };

package/dist/components/Switch/Switch.stories.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Switch } from "./Switch";
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+const meta = {
+    title: "Components/Switch",
+    component: Switch,
+    tags: ["autodocs"],
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        defaultValue: [50],
+        max: 100,
+        step: 1,
+        name: "test",
+        minStepsBetweenThumbs: 1,
+        disabled: false,
+        inverted: false,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Switch, Object.assign({}, props)) }));
+    },
+};

package/dist/components/Table/Datagrid.js

@@ -1,6 +1,5 @@
 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)); }) })] }));
+const Table = ({ columns, data }) => {
+    return (_jsxs("table", { className: "table", children: [_jsx("thead", { children: _jsx("tr", { children: columns.map((column, index) => (_jsx("th", { children: column.header }, index))) }) }), _jsx("tbody", { children: data.map((row, rowIndex) => (_jsx("tr", { children: columns.map((column, colIndex) => (_jsx("td", { children: row[column.accessor] }, colIndex))) }, rowIndex))) })] }));
 };
 export default Table;

package/dist/components/Table/Table.js

@@ -1,14 +1,3 @@
-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)
@@ -23,44 +12,44 @@ var __rest = (this && this.__rest) || function (s, e) {
 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, rootRef = _a.rootRef, props = __rest(_a, ["className", "rootRef"]);
-    return (_jsx("div", { className: "relative h-full w-full overflow-auto", ref: rootRef, children: _jsx("table", __assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", className) }, props)) }));
+const Table = React.forwardRef((_a, ref) => {
+    var { className, rootRef } = _a, props = __rest(_a, ["className", "rootRef"]);
+    return (_jsx("div", { className: "relative h-full w-full overflow-auto", ref: rootRef, children: _jsx("table", Object.assign({ ref: ref, className: cn("w-full caption-bottom text-sm border-collapse", 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 bg-secondary-80", className) }, props)));
+const TableHeader = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("thead", Object.assign({ ref: ref, className: cn("[&_tr]:border-b bg-secondary-80", 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)));
+const TableBody = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("tbody", Object.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)));
+const TableFooter = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("tfoot", Object.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-grey-20", className) }, props)));
+const TableRow = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("tr", Object.assign({ ref: ref, className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-grey-20", 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 py-3 px-6 text-left align-middle typography-body2 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
+const TableHead = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("th", Object.assign({ ref: ref, className: cn(" h-12 py-3 px-6 text-left align-middle typography-body2 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", 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(" py-3 px-6 text-left align-middle  typography-body3 text-textcolor-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", className) }, props)));
+const TableCell = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("td", Object.assign({ ref: ref, className: cn(" py-3 px-6 text-left align-middle  typography-body3 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4", 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)));
+const TableCaption = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("caption", Object.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

@@ -1,17 +1,6 @@
-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 = {
+const meta = {
     title: "Components/Table",
     component: Table,
     tags: ["autodocs"],
@@ -19,14 +8,14 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export var Default = {
+export const Default = {
     args: {},
-    render: function (args) {
-        var props = __assign({}, args);
+    render: (args) => {
+        const props = Object.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,14 +1,61 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from "react";
 import { cn } from "@/utils/cn";
-import { useState } from "react";
-var Tabs = function (_a) {
-    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 })] }));
+const Tabs = ({ tabs = [], initialTab = 0, tabBarSize = 38, enableBorderLine = true, tabMode = "start", className, tabBarClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, borderSliderClassname, }) => {
+    var _a;
+    const [activeTab, setActiveTab] = useState(initialTab);
+    const [sliderStyle, setSliderStyle] = useState({
+        width: "0px",
+        transform: "translateX(0px)",
+    });
+    const tabRefs = useRef([]);
+    const isInitialMount = useRef(true);
+    const updateSliderStyle = () => {
+        const activeTabElement = tabRefs.current[activeTab];
+        if (activeTabElement) {
+            setSliderStyle({
+                width: `${activeTabElement.offsetWidth}px`,
+                transform: `translateX(${activeTabElement.offsetLeft}px)`,
+            });
+        }
+    };
+    useEffect(() => {
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            // Set initial position without animation
+            const activeTabElement = tabRefs.current[activeTab];
+            if (activeTabElement) {
+                setSliderStyle({
+                    width: "0px",
+                    transform: `translateX(${activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2}px)`,
+                });
+                // Trigger reflow
+                setTimeout(() => {
+                    updateSliderStyle();
+                }, 50);
+            }
+        }
+        else {
+            updateSliderStyle();
+        }
+        // const handleResize = () => {
+        //   updateSliderStyle();
+        // };
+        // window.addEventListener("resize", handleResize);
+        // return () => window.removeEventListener("resize", handleResize);
+    }, [activeTab, tabs, tabMode]);
+    return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: cn(`relative flex gap-6 h-[${tabBarSize}px] box-border`, {
+                    [`border-b-[1px] border-base-stroke`]: enableBorderLine,
+                    "gap-0": tabMode === "justify",
+                }, tabBarClassName), style: {
+                    justifyContent: tabMode === "justify" ? "stretch" : tabMode,
+                }, role: "tablist", children: [tabs.map((tab, index) => (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-4 px-1 cursor-pointer transition-colors duration-300 box-border gap-3", {
+                            "typography-small3 text-text-dark": index === activeTab,
+                            "typography-small1 text-text-grey-light hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
+                            [tabButtonClassName !== null && tabButtonClassName !== void 0 ? tabButtonClassName : ""]: true,
+                            [tabButtonActiveClassName !== null && tabButtonActiveClassName !== void 0 ? tabButtonActiveClassName : ""]: index === activeTab,
+                            "flex-1": tabMode === "justify",
+                        }), onClick: () => setActiveTab(index), children: [tab.startTabContent, tab.label, tab.endTabContent] }, index))), _jsx("div", { className: cn(`absolute -bottom-[1px] h-[1px] bg-primary transition-all duration-300 ease-in-out`, borderSliderClassname), style: sliderStyle })] }), _jsx("div", { className: cn("mt-4", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content })] }));
 };
 export default Tabs;

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

@@ -1,18 +1,7 @@
-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 = {
+const meta = {
     title: "Components/Tabs",
     component: Tabs,
     tags: ["autodocs"],
@@ -20,11 +9,11 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-var tabs = [
+const tabs = [
     {
         label: "Tab1",
         content: _jsx("p", { children: "Tab 1 content" }),
@@ -38,23 +27,23 @@ var tabs = [
         content: _jsx("p", { children: "Tab 3 content" }),
     },
 ];
-export var Default = {
+export const Default = {
     args: {
         initialTab: 0,
-        tabs: 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)) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props)) }));
     },
 };
-export var CustomTab = {
+export const 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" }) })); }),
+        tabs: tabs.map((tab) => (Object.assign(Object.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)) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Tabs, Object.assign({ tabs: tabs }, props)) }));
     },
 };

package/dist/components/Text/Text.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
 import { forwardRef } from "react";
 import { cva } from "class-variance-authority";
-var textVariants = cva(["text-foreground"], {
+const textVariants = cva(["text-foreground"], {
     variants: {
         color: {
             primary: "text-primary",
@@ -16,8 +16,7 @@ var textVariants = cva(["text-foreground"], {
     },
 });
 // TODO font, fontBold, elipt
-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, _d = _a.className, className = _d === void 0 ? "" : _d, color = _a.color, style = _a.style;
-    return (_jsx(Tag, { className: cn("typography-".concat(variant), textVariants({ color: color }), className), style: style, children: children }));
+const Text = forwardRef(({ variant = "body1", tag: Tag = "p", children, className = "", color, style, }) => {
+    return (_jsx(Tag, { className: cn(`typography-${variant}`, textVariants({ color }), className), style: style, children: children }));
 });
 export default Text;

package/dist/components/Text/Text.stories.js

@@ -1,18 +1,7 @@
-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 Text from "./Text";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-var meta = {
+const meta = {
     title: "Components/Text",
     component: Text,
     tags: ["autodocs"],
@@ -21,11 +10,11 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-var variant = [
+const variant = [
     "h1",
     "h2",
     "h3",
@@ -52,7 +41,7 @@ var variant = [
     "buttonL",
     "buttonMS",
 ];
-var color = [
+const color = [
     "primary",
     "secondary",
     "tertiary",
@@ -61,17 +50,17 @@ var color = [
     "warning",
     "error",
 ];
-export var Default = {
+export const Default = {
     args: {},
-    render: function (args) {
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: variant.map(function (value) { return (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[200px]", children: _jsx(Text, { variant: value, children: value }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: value, children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, value)); }) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: variant.map((value) => (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[200px]", children: _jsx(Text, { variant: value, children: value }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: value, children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, value))) }));
     },
 };
-export var Color = {
+export const Color = {
     args: {},
-    render: function (args) {
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: color.map(function (color, i) { return (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[400px]", children: _jsx(Text, { variant: variant === null || variant === void 0 ? void 0 : variant[i], color: color, children: color }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: variant === null || variant === void 0 ? void 0 : variant[i], color: color, children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, color)); }) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: color.map((color, i) => (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[400px]", children: _jsx(Text, { variant: variant === null || variant === void 0 ? void 0 : variant[i], color: color, children: color }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: variant === null || variant === void 0 ? void 0 : variant[i], color: color, children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, color))) }));
     },
 };

package/dist/components/TextInput/TextInput.js

@@ -1,14 +1,3 @@
-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)
@@ -25,47 +14,47 @@ import { forwardRef, useImperativeHandle, useRef, } from "react";
 import { helperTextVariant, iconSearchWrapperVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, sectionIconWrapperVariant, } from "./TextInput.styles";
 import { XCircleIcon, ExclamationCircleIcon, MagnifyingGlassIcon, } from "@heroicons/react/16/solid";
 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, _l = _a.hasSearchIcon, hasSearchIcon = _l === void 0 ? false : _l, startIcon = _a.startIcon, endIcon = _a.endIcon, labelClassName = _a.labelClassName, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName"]);
-    var inputRef = useRef(null);
-    var _id = id || "".concat(type, "-").concat(label, "-input");
-    var hasLeftSectionIcon = !!startIcon;
-    var hasRightSectionIcon = !!endIcon;
-    var inputClassname = inputVariant({
-        size: size,
-        rounded: rounded,
-        variant: variant,
-        fullwidth: fullwidth,
-        disabled: disabled,
-        error: error,
-        hasSearchIcon: hasSearchIcon,
+export const TextInput = forwardRef((_a, ref) => {
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName"]);
+    const inputRef = useRef(null);
+    const _id = id || `${type}-${label}-input`;
+    const hasLeftSectionIcon = !!startIcon;
+    const hasRightSectionIcon = !!endIcon;
+    const inputClassname = inputVariant({
+        size,
+        rounded,
+        variant,
+        fullwidth,
+        disabled,
+        error,
+        hasSearchIcon,
         hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
         leftSectionIcon: hasLeftSectionIcon,
         rightSectionIcon: hasRightSectionIcon,
     });
-    var labelClassname = labelVariant({
-        size: size,
-        disabled: disabled,
-        error: error,
-        hasSearchIcon: hasSearchIcon,
+    const labelClassname = labelVariant({
+        size,
+        disabled,
+        error,
+        hasSearchIcon,
     });
-    var helperTextClassname = helperTextVariant({ size: size, error: error, disabled: disabled });
-    var iconWrapperClassname = iconWrapperVariant({ size: size });
-    var iconSearchWrapperClassname = iconSearchWrapperVariant({ size: size });
-    var iconClassname = iconVariant({ size: size });
+    const helperTextClassname = helperTextVariant({ size, error, disabled });
+    const iconWrapperClassname = iconWrapperVariant({ size });
+    const iconSearchWrapperClassname = iconSearchWrapperVariant({ size });
+    const iconClassname = iconVariant({ size });
     // TODO startIcon
-    var endIconWrapperClassname = sectionIconWrapperVariant({
-        size: size,
-        rounded: rounded,
-        error: error,
+    const endIconWrapperClassname = sectionIconWrapperVariant({
+        size,
+        rounded,
+        error,
     });
-    useImperativeHandle(ref, function () { return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current; });
-    var handleClearInput = function () {
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleClearInput = () => {
         if (inputRef.current) {
             inputRef.current.value = "";
         }
     };
-    return (_jsxs("div", { className: "inline-flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", __assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && (_jsx("div", { className: endIconWrapperClassname, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && (_jsx("div", { className: endIconWrapperClassname, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
                                     "text-input-disable-text": disabled,
                                 }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
 });

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

@@ -1,20 +1,9 @@
-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 { useRef } from "react";
 import TextInput from "./TextInput";
 import { CalendarIcon } from "@heroicons/react/16/solid";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
-var meta = {
+const meta = {
     title: "Components/TextInput",
     component: TextInput,
     tags: ["autodocs"],
@@ -23,52 +12,52 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export var Default = {
+export const Default = {
     args: {
         label: "Lorem Ipsum",
         // value: "Lorem Ipsum",
         fullwidth: true,
     },
-    render: function (args) {
+    render: (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)), _jsx(TextInput, __assign({ id: "2", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args))] }));
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(TextInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(TextInput, Object.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) {
+const InputWithRef = (props) => {
+    const inputRef = useRef(null);
+    return (_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, props, { ref: inputRef, labelClassName: "peer-focus:bg-red-500", onKeyDown: (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 = {
+export const CustomLabel = {
     args: {
         label: "Lorem Ipsum",
         // value: "Lorem Ipsum",
         fullwidth: true,
     },
-    render: function (args) {
+    render: (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))] }));
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args, { labelClassName: "peer-focus:bg-red-500" })), _jsx(InputWithRef, Object.assign({ id: "2", size: "md" }, args)), _jsx(TextInput, Object.assign({ id: "3", size: "sm" }, args))] }));
     },
 };
-export var FuctionInput = {
+export const FuctionInput = {
     args: {
         label: "Placeholder Text",
         value: "dsdsds",
         disabled: true,
     },
-    render: function (args) {
+    render: (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, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, __assign({ id: "2", size: "md" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) }))] }));
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "2", size: "md" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "3", size: "sm" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) }))] }));
     },
 };