@rovula/ui 0.0.21 → 0.0.23

package/dist/components/Button/Buttons.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 Button from "./Button";
 // 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/Button",
     component: Button,
     tags: ["autodocs"],
@@ -21,54 +10,54 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-export var Solid = {
+export const Solid = {
     args: {
         title: "Button",
         disabled: false,
         isLoading: false,
     },
-    render: function (args) {
-        var props = __assign(__assign({}, args), { className: "capitalize" });
-        return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    render: (args) => {
+        const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex items-start gap-2", children: [_jsx(Button, Object.assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, Object.assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, Object.assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, Object.assign({ color: "info" }, props, { title: "info" })), _jsx(Button, Object.assign({ color: "success" }, props, { title: "success" })), _jsx(Button, Object.assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, Object.assign({ color: "error" }, props, { title: "error" }))] }));
     },
 };
-export var Outline = {
+export const Outline = {
     args: {
         title: "Button",
         variant: "outline",
         disabled: false,
         isLoading: false,
     },
-    render: function (args) {
-        var props = __assign(__assign({}, args), { className: "capitalize" });
-        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    render: (args) => {
+        const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, Object.assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, Object.assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, Object.assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, Object.assign({ color: "info" }, props, { title: "info" })), _jsx(Button, Object.assign({ color: "success" }, props, { title: "success" })), _jsx(Button, Object.assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, Object.assign({ color: "error" }, props, { title: "error" }))] }));
     },
 };
-export var Flat = {
+export const Flat = {
     args: {
         title: "Button",
         variant: "flat",
         disabled: false,
         isLoading: false,
     },
-    render: function (args) {
-        var props = __assign(__assign({}, args), { className: "capitalize" });
-        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    render: (args) => {
+        const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, Object.assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, Object.assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, Object.assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, Object.assign({ color: "info" }, props, { title: "info" })), _jsx(Button, Object.assign({ color: "success" }, props, { title: "success" })), _jsx(Button, Object.assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, Object.assign({ color: "error" }, props, { title: "error" }))] }));
     },
 };
-export var Link = {
+export const Link = {
     args: {
         title: "Button",
         variant: "link",
         disabled: false,
         isLoading: false,
     },
-    render: function (args) {
-        var props = __assign(__assign({}, args), { className: "capitalize" });
-        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, __assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, __assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, __assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, __assign({ color: "info" }, props, { title: "info" })), _jsx(Button, __assign({ color: "success" }, props, { title: "success" })), _jsx(Button, __assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, __assign({ color: "error" }, props, { title: "error" }))] }));
+    render: (args) => {
+        const props = Object.assign(Object.assign({}, args), { className: "capitalize" });
+        return (_jsxs("div", { className: "flex gap-2", children: [_jsx(Button, Object.assign({ color: "primary" }, props, { title: "primary" })), _jsx(Button, Object.assign({ color: "secondary" }, props, { title: "secondary" })), _jsx(Button, Object.assign({ color: "tertiary" }, props, { title: "tertiary" })), _jsx(Button, Object.assign({ color: "info" }, props, { title: "info" })), _jsx(Button, Object.assign({ color: "success" }, props, { title: "success" })), _jsx(Button, Object.assign({ color: "warning" }, props, { title: "warning" })), _jsx(Button, Object.assign({ color: "error" }, props, { title: "error" }))] }));
     },
 };

package/dist/components/Calendar/Calendar.js

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -26,9 +15,9 @@ import { DayPicker, getDefaultClassNames } from "react-day-picker";
 // import "react-day-picker/dist/style.css";
 import { cn } from "@/utils/cn";
 function Calendar(_a) {
-    var className = _a.className, classNames = _a.classNames, _b = _a.showOutsideDays, showOutsideDays = _b === void 0 ? true : _b, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
-    var defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-surface text-surface-foreground border-surface", className), classNames: __assign(__assign(__assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9 "), day: "typography-subtitile1 ", today: "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative" }), classNames), styles: {
+    var { className, classNames, showOutsideDays = true } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
+    const defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, Object.assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-surface text-surface-foreground border-surface", className), classNames: Object.assign(Object.assign(Object.assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9 "), day: "typography-subtitile1 ", today: "text-bold text-surface-foreground [&_button]:rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary !text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6 absolute flex right-0"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4"), caption_label: cn(defaultClassNames.caption_label, "gap-2 flex items-center"), months: "flex flex-col relative" }), classNames), styles: {
             caption_label: {
                 zIndex: 1,
                 position: "relative",

package/dist/components/Calendar/Calendar.stories.js

@@ -1,21 +1,10 @@
-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 React from "react";
 import Calendar from "./Calendar";
 import ThemeToggle from "../ThemeToggle";
 import Button from "../Button/Button";
 // import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
-var meta = {
+const meta = {
     title: "Components/Calendar",
     component: Calendar,
     tags: ["autodocs"],
@@ -23,16 +12,16 @@ 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) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        var _a = React.useState(new Date()), date = _a[0], setDate = _a[1];
+        const props = Object.assign({}, args);
+        const [date, setDate] = React.useState(new Date());
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(ThemeToggle, {}), _jsx(Button, { children: "Text" }), _jsx(Calendar, { mode: "single", selected: date, onSelect: setDate, className: "rounded-md border" })] }));
     },
 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,15 +1,4 @@
 "use client";
-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)
@@ -26,9 +15,9 @@ import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
 import { CheckIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
-var Checkbox = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(CheckboxPrimitive.Root, __assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary-30 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-state-disable-solid", {
+const Checkbox = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(CheckboxPrimitive.Root, Object.assign({ ref: ref, className: cn("peer h-4 w-4 shrink-0 rounded-sm border border-primary-30 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-state-disable-solid", {
             "data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground": !props.disabled,
             "bg-grey2-300": props.checked && props.disabled,
         }, className) }, props, { children: _jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: _jsx(CheckIcon, { className: "h-4 w-4" }) }) })));

package/dist/components/Checkbox/Checkbox.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 { Checkbox } from "./Checkbox";
-var meta = {
+const meta = {
     title: "Components/Checkbox",
     component: Checkbox,
     tags: ["autodocs"],
@@ -19,31 +8,31 @@ 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: {
         checked: false,
         disabled: false,
     },
-    render: function (args) {
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, __assign({ id: "terms" }, props)), _jsx("label", { htmlFor: "terms", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }) }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, Object.assign({ id: "terms" }, props)), _jsx("label", { htmlFor: "terms", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }) }));
     },
 };
-export var WithText = {
+export const WithText = {
     args: {},
-    render: function (args) {
-        var props = __assign({}, args);
+    render: (args) => {
+        const props = Object.assign({}, args);
         return (_jsxs("div", { className: "items-top flex space-x-2", children: [_jsx(Checkbox, { id: "terms1" }), _jsxs("div", { className: "grid gap-1.5 leading-none", children: [_jsx("label", { htmlFor: "terms1", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "You agree to our Terms of Service and Privacy Policy." })] })] }));
     },
 };
-export var Diabled = {
+export const Diabled = {
     args: {},
-    render: function (args) {
-        var props = __assign({}, args);
+    render: (args) => {
+        const props = Object.assign({}, args);
         return (_jsxs("div", { className: "flex items-center space-x-2", children: [_jsx(Checkbox, { id: "terms2", disabled: true }), _jsx("label", { htmlFor: "terms2", className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: "Accept terms and conditions" })] }));
     },
 };

package/dist/components/Collapsible/Collapsible.js

@@ -4,31 +4,28 @@ import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { CollapsibleProvider, useCollapsible } from "./CollapsibleContext";
 import { cn } from "@/utils/cn";
 import { collapseButtonVariants, collapseContainerVariants, collapseIconVariants, collapsePanelVariants, } from "./Collapsible.styles";
-var CollapsibleButton = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className, _b = _a.hideExpandIcon, hideExpandIcon = _b === void 0 ? false : _b;
-    var _c = useCollapsible(), toggle = _c.toggle, isExpand = _c.isExpand, size = _c.size;
-    var collapseButtonClassName = collapseButtonVariants({ size: size });
-    var collapseIconClassName = collapseIconVariants({ isExpand: isExpand, size: size });
+const CollapsibleButton = forwardRef(({ children, className, hideExpandIcon = false }, ref) => {
+    const { toggle, isExpand, size } = useCollapsible();
+    const collapseButtonClassName = collapseButtonVariants({ size });
+    const collapseIconClassName = collapseIconVariants({ isExpand, size });
     return (_jsxs("button", { onClick: toggle, className: cn(collapseButtonClassName, className), ref: ref, children: [_jsx("span", { className: "flex flex-1", children: children }), !hideExpandIcon && (_jsx("span", { className: cn(collapseIconClassName), children: _jsx(ChevronDownIcon, { className: cn("size-full") }) }))] }));
 });
 CollapsibleButton.displayName = "CollapsibleButton";
-var CollapsiblePanel = forwardRef(function (_a, ref) {
-    var children = _a.children, className = _a.className;
-    var _b = useCollapsible(), isExpand = _b.isExpand, size = _b.size;
-    var collapsePanelClassName = collapsePanelVariants({ size: size });
-    var _c = useState("0px"), height = _c[0], setHeight = _c[1];
-    var contentRef = useRef(null);
-    useEffect(function () {
+const CollapsiblePanel = forwardRef(({ children, className }, ref) => {
+    const { isExpand, size } = useCollapsible();
+    const collapsePanelClassName = collapsePanelVariants({ size });
+    const [height, setHeight] = useState("0px");
+    const contentRef = useRef(null);
+    useEffect(() => {
         if (contentRef.current) {
-            setHeight(isExpand ? "".concat(contentRef.current.scrollHeight, "px") : "0px");
+            setHeight(isExpand ? `${contentRef.current.scrollHeight}px` : "0px");
         }
     }, [isExpand, children]); // Add `children` to the dependency array to recalculate height on content change
-    return (_jsx("div", { ref: ref, className: cn("overflow-hidden transition-all ease-in-out"), style: { height: height }, children: _jsx("div", { ref: contentRef, className: cn(collapsePanelClassName, className), children: children }) }));
+    return (_jsx("div", { ref: ref, className: cn("overflow-hidden transition-all ease-in-out"), style: { height }, children: _jsx("div", { ref: contentRef, className: cn(collapsePanelClassName, className), children: children }) }));
 });
 CollapsiblePanel.displayName = "CollapsiblePanel";
-var Collapsible = forwardRef(function (_a, ref) {
-    var children = _a.children, isExpand = _a.isExpand, size = _a.size, className = _a.className, onToggle = _a.onToggle;
-    var collapseContainerClassName = collapseContainerVariants();
+const Collapsible = forwardRef(({ children, isExpand, size, className, onToggle }, ref) => {
+    const collapseContainerClassName = collapseContainerVariants();
     return (_jsx(CollapsibleProvider, { size: size, isExpandControlled: isExpand, onToggle: onToggle, children: _jsx("div", { ref: ref, className: cn(collapseContainerClassName, className), children: children }) }));
 });
 Collapsible.displayName = "Collapsible";

package/dist/components/Collapsible/Collapsible.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 { useEffect } from "react";
 import Collapsible from "./Collapsible";
-var meta = {
+const meta = {
     title: "Components/Collapsible",
     component: Collapsible,
     tags: ["autodocs"],
@@ -20,25 +9,25 @@ 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 Test = function () {
-    useEffect(function () {
+const Test = () => {
+    useEffect(() => {
         console.log("Mont");
-        return function () {
+        return () => {
             console.log("UnMont");
         };
     }, []);
     return _jsx("p", { children: "This is the content of section 1." });
 };
-export var Default = {
+export const Default = {
     args: {
         size: "md",
     },
-    render: function (args) {
-        var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-col gap-1 w-full ", children: [_jsxs(Collapsible, __assign({ isExpand: true }, props, { children: [_jsx(Collapsible.Button, { children: "Section 1" }), _jsx(Collapsible.Panel, { children: "This is the content of section 1." })] })), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 2" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 2." }) })] }), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 3" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 3." }) })] })] }));
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-col gap-1 w-full ", children: [_jsxs(Collapsible, Object.assign({ isExpand: true }, props, { children: [_jsx(Collapsible.Button, { children: "Section 1" }), _jsx(Collapsible.Panel, { children: "This is the content of section 1." })] })), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 2" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 2." }) })] }), _jsxs(Collapsible, { children: [_jsx(Collapsible.Button, { children: "Section 3" }), _jsx(Collapsible.Panel, { children: _jsx("p", { children: "This is the content of section 3." }) })] })] }));
     },
 };

package/dist/components/Collapsible/Collapsible.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var collapseButtonVariants = cva([
+export const collapseButtonVariants = cva([
     "flex flex-1 bg-secondary-default hover:bg-secondary-hover text-secondary-foreground",
     "focus:outline-none focus-visible:ring focus-visible:ring-gray-500 focus-visible:ring-opacity-75",
 ], {
@@ -14,7 +14,7 @@ export var collapseButtonVariants = cva([
         size: "md",
     },
 });
-export var collapseIconVariants = cva(["transition-all flex content-center justify-center "], {
+export const collapseIconVariants = cva(["transition-all flex content-center justify-center "], {
     variants: {
         size: {
             sm: "size-5",
@@ -30,7 +30,7 @@ export var collapseIconVariants = cva(["transition-all flex content-center justi
         isExpand: false,
     },
 });
-export var collapsePanelVariants = cva([
+export const collapsePanelVariants = cva([
     "flex flex-1 border-t border-t-secondary",
     "transition ease-in-out delay-150 duration-300",
 ], {
@@ -45,6 +45,6 @@ export var collapsePanelVariants = cva([
         size: "md",
     },
 });
-export var collapseContainerVariants = cva([
+export const collapseContainerVariants = cva([
     "flex flex-col border border-secondary rounded overflow-hidden",
 ]);

package/dist/components/Collapsible/CollapsibleContext.js

@@ -1,25 +1,24 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useContext, useState, useEffect, } from "react";
-var CollapsibleContext = createContext(undefined);
-export var useCollapsible = function () {
-    var context = useContext(CollapsibleContext);
+const CollapsibleContext = createContext(undefined);
+export const useCollapsible = () => {
+    const context = useContext(CollapsibleContext);
     if (!context) {
         throw new Error("useCollapsible must be used within a CollapsibleProvider");
     }
     return context;
 };
-export var CollapsibleProvider = function (_a) {
-    var size = _a.size, children = _a.children, isExpandControlled = _a.isExpandControlled, onToggle = _a.onToggle;
-    var _b = useState(false), isExpand = _b[0], setIsExpand = _b[1];
-    var toggle = function () {
-        setIsExpand(function (prev) { return !prev; });
+export const CollapsibleProvider = ({ size, children, isExpandControlled, onToggle, }) => {
+    const [isExpand, setIsExpand] = useState(false);
+    const toggle = () => {
+        setIsExpand((prev) => !prev);
         if (onToggle)
             onToggle(!isExpand);
     };
-    useEffect(function () {
+    useEffect(() => {
         if (isExpandControlled !== undefined) {
             setIsExpand(isExpandControlled);
         }
     }, [isExpandControlled]);
-    return (_jsx(CollapsibleContext.Provider, { value: { size: size, isExpand: isExpand, toggle: toggle, setIsExpand: setIsExpand }, children: children }));
+    return (_jsx(CollapsibleContext.Provider, { value: { size, isExpand, toggle, setIsExpand }, children: children }));
 };

package/dist/components/DataTable/DataTable.js

@@ -5,18 +5,17 @@ getSortedRowModel, useReactTable, } from "@tanstack/react-table";
 import { useEffect, useRef, useState } from "react";
 import { ArrowDownIcon, ArrowUpIcon, ArrowsUpDownIcon, ClipboardDocumentListIcon, } from "@heroicons/react/16/solid";
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow, } from "../Table/Table";
-export function DataTable(_a) {
-    var _b;
-    var data = _a.data, columns = _a.columns, _c = _a.manualSorting, manualSorting = _c === void 0 ? false : _c, onSorting = _a.onSorting, fetchMoreData = _a.fetchMoreData;
-    var tableBodyRef = useRef(null);
-    var _d = useState([]), sorting = _d[0], setSorting = _d[1];
-    var _e = useState([]), columnFilters = _e[0], setColumnFilters = _e[1];
-    var _f = useState({}), columnVisibility = _f[0], setColumnVisibility = _f[1];
-    var _g = useState({}), rowSelection = _g[0], setRowSelection = _g[1];
-    var table = useReactTable({
-        data: data,
-        columns: columns,
-        manualSorting: manualSorting,
+export function DataTable({ data, columns, manualSorting = false, onSorting, fetchMoreData, }) {
+    var _a;
+    const tableBodyRef = useRef(null);
+    const [sorting, setSorting] = useState([]);
+    const [columnFilters, setColumnFilters] = useState([]);
+    const [columnVisibility, setColumnVisibility] = useState({});
+    const [rowSelection, setRowSelection] = useState({});
+    const table = useReactTable({
+        data,
+        columns,
+        manualSorting,
         onSortingChange: setSorting,
         onColumnFiltersChange: setColumnFilters,
         getCoreRowModel: getCoreRowModel(),
@@ -26,46 +25,46 @@ export function DataTable(_a) {
         onColumnVisibilityChange: setColumnVisibility,
         onRowSelectionChange: setRowSelection,
         state: {
-            sorting: sorting,
-            columnFilters: columnFilters,
-            columnVisibility: columnVisibility,
-            rowSelection: rowSelection,
+            sorting,
+            columnFilters,
+            columnVisibility,
+            rowSelection,
             // pagination: {
             //   pageSize: 100,
             //   pageIndex: 0,
             // },
         },
     });
-    useEffect(function () {
+    useEffect(() => {
         onSorting === null || onSorting === void 0 ? void 0 : onSorting(sorting);
     }, [sorting, onSorting]);
-    useEffect(function () {
-        var handleScroll = function () {
+    useEffect(() => {
+        const handleScroll = () => {
             if (tableBodyRef.current) {
-                var _a = tableBodyRef.current, scrollTop = _a.scrollTop, scrollHeight = _a.scrollHeight, clientHeight = _a.clientHeight;
+                const { scrollTop, scrollHeight, clientHeight } = tableBodyRef.current;
                 if (scrollTop + clientHeight >= scrollHeight - 10) {
                     fetchMoreData === null || fetchMoreData === void 0 ? void 0 : fetchMoreData();
                 }
             }
         };
-        var tableBodyElement = tableBodyRef.current;
+        const tableBodyElement = tableBodyRef.current;
         if (tableBodyElement) {
             tableBodyElement.addEventListener("scroll", handleScroll);
         }
-        return function () {
+        return () => {
             if (tableBodyElement) {
                 tableBodyElement.removeEventListener("scroll", handleScroll);
             }
         };
     }, [fetchMoreData]);
-    var isEmpty = ((_b = table.getRowModel().rows) === null || _b === void 0 ? void 0 : _b.length) === 0;
-    return (_jsx("div", { className: "flex w-full h-full rounded-xl overflow-hidden border border-primary-10", children: _jsxs(Table, { className: isEmpty ? "h-full" : "", rootRef: tableBodyRef, children: [_jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map(function (headerGroup) { return (_jsx(TableRow, { className: "", children: headerGroup.headers.map(function (header, i) {
+    const isEmpty = ((_a = table.getRowModel().rows) === null || _a === void 0 ? void 0 : _a.length) === 0;
+    return (_jsx("div", { className: "flex w-full h-full rounded-xl overflow-hidden border border-primary-10", children: _jsxs(Table, { className: isEmpty ? "h-full" : "", rootRef: tableBodyRef, children: [_jsx(TableHeader, { className: "sticky top-0", children: table.getHeaderGroups().map((headerGroup) => (_jsx(TableRow, { className: "", children: headerGroup.headers.map((header, i) => {
                             var _a;
                             return (_jsx(TableHead, { children: _jsxs("div", { className: "flex flex-row items-center cursor-pointer", onClick: header.column.getToggleSortingHandler(), children: [header.isPlaceholder
                                             ? null
                                             : flexRender(header.column.columnDef.header, header.getContext()), (_a = {
                                             asc: _jsx(ArrowUpIcon, { className: "ml-3 h-4 w-4" }),
                                             desc: _jsx(ArrowDownIcon, { className: "ml-3 h-4 w-4" }),
-                                        }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : (header.column.getCanSort() ? (_jsx(ArrowsUpDownIcon, { className: "ml-3 h-4 w-4 text-textcolor-grey-light" })) : null)] }) }, header.id));
-                        }) }, headerGroup.id)); }) }), _jsx(TableBody, { className: "overflow-y-scroll", children: !isEmpty ? (table.getRowModel().rows.map(function (row) { return (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", className: "", children: row.getVisibleCells().map(function (cell) { return (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)); }) }, row.id)); })) : (_jsx(TableRow, { className: "h-full self-stretch", children: _jsx(TableCell, { colSpan: columns.length, className: "typography-body1 text-textcolor-grey-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3", children: [_jsx(ClipboardDocumentListIcon, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) })] }) }));
+                                        }[header.column.getIsSorted()]) !== null && _a !== void 0 ? _a : (header.column.getCanSort() ? (_jsx(ArrowsUpDownIcon, { className: "ml-3 h-4 w-4 text-text-grey-light" })) : null)] }) }, header.id));
+                        }) }, headerGroup.id))) }), _jsx(TableBody, { className: "overflow-y-scroll", children: !isEmpty ? (table.getRowModel().rows.map((row) => (_jsx(TableRow, { "data-state": row.getIsSelected() && "selected", className: "", children: row.getVisibleCells().map((cell) => (_jsx(TableCell, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id)))) : (_jsx(TableRow, { className: "h-full self-stretch", children: _jsx(TableCell, { colSpan: columns.length, className: "typography-body1 text-text-grey-medium text-center h-full", children: _jsxs("div", { className: "flex flex-1 h-full flex-col items-center justify-center gap-3", children: [_jsx(ClipboardDocumentListIcon, { className: "w-8 text-secondary-120" }), "There is no information yet."] }) }) })) })] }) }));
 }

package/dist/components/DataTable/DataTable.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 } from "react/jsx-runtime";
 import { DataTable } from "./DataTable";
-var meta = {
+const meta = {
     title: "Components/DataTable",
     component: DataTable,
     tags: ["autodocs"],
@@ -19,11 +8,11 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex flex-1 h-full w-full ", style: { height: "100vh" }, children: _jsx(Story, {}) })); },
+        (Story) => (_jsx("div", { className: "p-5 flex flex-1 h-full w-full ", style: { height: "100vh" }, children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
-var columns = [
+const columns = [
     {
         accessorKey: "amount",
     },
@@ -34,12 +23,12 @@ var columns = [
         accessorKey: "email",
     },
 ];
-export var Default = {
+export const Default = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        var data = new Array(20).fill(0).map(function (__, i) { return ({
+        const props = Object.assign({}, args);
+        const data = new Array(20).fill(0).map((__, i) => ({
             id: "m5gr84i9",
             amount: i + 1,
             status: "success",
@@ -47,10 +36,10 @@ export var Default = {
             email1: "ken99@yahoo.com",
             email2: "ken99@yahoo.com",
             email3: "ken99@yahoo.com",
-        }); });
-        return (_jsx("div", { className: "flex flex-1 h-full flex-row gap-4 w-full", children: _jsx(DataTable, { columns: columns, data: data, onSorting: function (sorting) {
+        }));
+        return (_jsx("div", { className: "flex flex-1 h-full flex-row gap-4 w-full", children: _jsx(DataTable, { columns: columns, data: data, onSorting: (sorting) => {
                     console.log("sorting ", sorting);
-                }, fetchMoreData: function () {
+                }, fetchMoreData: () => {
                     console.log("fetchMoreData");
                 } }) }));
     },