@rovula/ui 0.0.21 → 0.0.22

package/dist/components/ActionButton/ActionButton.stories.js

@@ -1,18 +1,8 @@
-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 ActionButton from "./ActionButton";
 import { ArrowsUpDownIcon } from "@heroicons/react/16/solid";
-var meta = {
+import Icon from "../Icon/Icon";
+const meta = {
     title: "Components/ActionButton",
     component: ActionButton,
     tags: ["autodocs"],
@@ -20,26 +10,26 @@ 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 Default = {
+export const Default = {
     args: {
         variant: "solid",
-        size: "lg",
+        size: "md",
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row justify-between", children: _jsx(ActionButton, __assign({}, props, { children: _jsx(ArrowsUpDownIcon, {}) })) }));
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-2 items-start", children: _jsx(ActionButton, Object.assign({}, props, { children: _jsx(Icon, { type: "heroicons", name: "arrow-left" }) })) }));
     },
 };
-export var Preview = {
+export const Preview = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  p-20", children: [_jsxs("div", { className: "flex flex-row justify-between items-center", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Default:" }), _jsxs("div", { className: "flex flex-row gap-2 ", children: [_jsx(ActionButton, { variant: "solid", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "outline", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "icon", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Active:" }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "solid", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "outline", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "icon", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Disabled:" }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "solid", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "outline", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2", children: [_jsx(ActionButton, { variant: "icon", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] })] })] }));
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  p-20", children: [_jsxs("div", { className: "flex flex-row justify-between items-center", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Default:" }), _jsxs("div", { className: "flex flex-row gap-2 items-start ", children: [_jsx(ActionButton, { variant: "solid", size: "lg", children: _jsx(Icon, { type: "heroicons", name: "arrows-up-down" }) }), _jsx(ActionButton, { variant: "solid", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "outline", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "icon", size: "lg", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", children: _jsx(ArrowsUpDownIcon, {}) })] })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Active:" }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "solid", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "outline", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "icon", size: "lg", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", active: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", active: true, children: _jsx(ArrowsUpDownIcon, {}) })] })] }), _jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("h6", { className: "w-[20px] text-white", children: "Disabled:" }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "solid", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "solid", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "outline", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "outline", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] }), _jsxs("div", { className: "flex flex-row gap-2 items-start", children: [_jsx(ActionButton, { variant: "icon", size: "lg", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "md", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "sm", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) }), _jsx(ActionButton, { variant: "icon", size: "xs", disabled: true, children: _jsx(ArrowsUpDownIcon, {}) })] })] })] }));
     },
 };

package/dist/components/ActionButton/ActionButton.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var actionButtonVariants = cva(["rounded-md box-border flex items-center justify-center"], {
+export const actionButtonVariants = cva(["box-border flex items-center justify-center"], {
     variants: {
         variant: {
             solid: [
@@ -21,10 +21,10 @@ export var actionButtonVariants = cva(["rounded-md box-border flex items-center
             ],
         },
         size: {
-            xs: "p-[2px] w-[18px] h-[18px]",
-            sm: "px-2 py-1 w-[38px] h-[30px]",
-            md: "px-3 py-2 w-[46px] h-[38px]",
-            lg: "px-4 py-3 w-[64px] h-[56px]",
+            xs: "",
+            sm: "",
+            md: "",
+            lg: "",
         },
         disabled: {
             false: "",
@@ -61,20 +61,45 @@ export var actionButtonVariants = cva(["rounded-md box-border flex items-center
                 "active:bg-action-button-icon-active-pressed active:border-action-button-icon-active-pressed active:text-action-button-icon-active-pressed active:fill-action-button-icon-active-pressed",
             ],
         },
+        {
+            size: "lg",
+            variant: ["solid", "outline"],
+            className: "px-lg py-md [&_svg]:size-[32px] rounded-md",
+        },
+        {
+            size: "md",
+            variant: ["solid", "outline"],
+            className: "px-md py-sm [&_svg]:size-[22px] rounded-md",
+        },
+        {
+            size: "sm",
+            variant: ["solid", "outline"],
+            className: "px-sm py-xs [&_svg]:size-[22px] rounded-sm",
+        },
+        {
+            size: "xs",
+            variant: ["solid", "outline"],
+            className: "px-xs py-xxs [&_svg]:size-[14px] rounded-xs",
+        },
         {
             size: "lg",
             variant: "icon",
-            className: "w-[56px] h-[56px]",
+            className: "px-lg py-lg [&_svg]:size-[32px] rounded-full",
         },
         {
             size: "md",
             variant: "icon",
-            className: "w-[38px] h-[38px]",
+            className: "px-md py-md [&_svg]:size-[22px] rounded-full",
         },
         {
             size: "sm",
             variant: "icon",
-            className: "w-[30px] h-[30px]",
+            className: "px-xs py-xs [&_svg]:size-[22px] rounded-full",
+        },
+        {
+            size: "xs",
+            variant: "icon",
+            className: "px-xxs py-xxs [&_svg]:size-[14px] rounded-full",
         },
         {
             variant: "solid",

package/dist/components/AlertDialog/Alert.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 { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger, } from "./AlertDialog";
 // 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/Alert",
     component: AlertDialog,
     tags: ["autodocs"],
@@ -21,19 +10,19 @@ 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: {
     // label: "Lorem Ipsum",
     // value: "Lorem Ipsum",
     // fullwidth: true,
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(AlertDialog, { children: [_jsx(AlertDialogTrigger, { children: "Open" }), _jsxs(AlertDialogContent, { children: [_jsxs(AlertDialogHeader, { children: [_jsx(AlertDialogTitle, { children: "Are you absolutely sure?" }), _jsx(AlertDialogDescription, { children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers." })] }), _jsxs(AlertDialogFooter, { children: [_jsx(AlertDialogCancel, { children: "Cancel" }), _jsx(AlertDialogAction, { children: "Continue" })] })] })] }) }));
     },
 };

package/dist/components/AlertDialog/AlertDialog.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,48 +15,48 @@ import * as React from "react";
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { cn } from "@/utils/cn";
 import { buttonVariants } from "../Button/Button.styles";
-var AlertDialog = AlertDialogPrimitive.Root;
-var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
-var AlertDialogPortal = AlertDialogPrimitive.Portal;
-var AlertDialogOverlay = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Overlay, __assign({ className: cn("fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
+const AlertDialog = AlertDialogPrimitive.Root;
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
+const AlertDialogOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Overlay, Object.assign({ className: cn("fixed inset-0 bg-base-popup-curtain z-50 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props, { ref: ref })));
 });
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, __assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props))] }));
+const AlertDialogContent = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsxs(AlertDialogPortal, { children: [_jsx(AlertDialogOverlay, {}), _jsx(AlertDialogPrimitive.Content, Object.assign({ ref: ref, className: cn("fixed text-base-popup-foreground left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-6 border border-base-popup bg-base-popup p-8 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-md", className) }, props))] }));
 });
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
-var AlertDialogHeader = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
+const AlertDialogHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col space-y-2 text-center sm:text-left", className) }, props)));
 };
 AlertDialogHeader.displayName = "AlertDialogHeader";
-var AlertDialogFooter = function (_a) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx("div", __assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
+const AlertDialogFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx("div", Object.assign({ className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className) }, props)));
 };
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Title, __assign({ ref: ref, className: cn("typography-h5", className) }, props)));
+const AlertDialogTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h5", className) }, props)));
 });
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogDescription = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Description, __assign({ ref: ref, className: cn("text-sm", className) }, props)));
+const AlertDialogDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm", className) }, props)));
 });
 AlertDialogDescription.displayName =
     AlertDialogPrimitive.Description.displayName;
-var AlertDialogAction = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Action, __assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false }), className) }, props)));
+const AlertDialogAction = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Action, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false }), className) }, props)));
 });
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AlertDialogPrimitive.Cancel, __assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false, variant: "outline" }), "mt-2 sm:mt-0", className) }, props)));
+const AlertDialogCancel = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AlertDialogPrimitive.Cancel, Object.assign({ ref: ref, className: cn(buttonVariants({ fullwidth: false, variant: "outline" }), "mt-2 sm:mt-0", className) }, props)));
 });
 AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 export { AlertDialog, AlertDialogPortal, AlertDialogOverlay, AlertDialogTrigger, AlertDialogContent, AlertDialogHeader, AlertDialogFooter, AlertDialogTitle, AlertDialogDescription, AlertDialogAction, AlertDialogCancel, };

package/dist/components/Avatar/Avatar.js

@@ -3,18 +3,17 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { cn } from "@/utils/cn";
 import { AvatarBase, AvatarFallback, AvatarImage } from "./AvatarBase";
 import { avatarVariants } from "./Avatar.styles";
-export var formatAvatarName = function (text) {
+export const formatAvatarName = (text) => {
     var _a, _b, _c;
     if (!text.length)
         return "-";
-    var spitWithSpace = text.split(" ");
-    var first = text === null || text === void 0 ? void 0 : text.charAt(0);
-    var last = (_c = (_b = (_a = spitWithSpace === null || spitWithSpace === void 0 ? void 0 : spitWithSpace[1]) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null && _b !== void 0 ? _b : text === null || text === void 0 ? void 0 : text.charAt(1)) !== null && _c !== void 0 ? _c : "";
-    return "".concat(first).concat(last);
+    const spitWithSpace = text.split(" ");
+    const first = text === null || text === void 0 ? void 0 : text.charAt(0);
+    const last = (_c = (_b = (_a = spitWithSpace === null || spitWithSpace === void 0 ? void 0 : spitWithSpace[1]) === null || _a === void 0 ? void 0 : _a.charAt(0)) !== null && _b !== void 0 ? _b : text === null || text === void 0 ? void 0 : text.charAt(1)) !== null && _c !== void 0 ? _c : "";
+    return `${first}${last}`;
 };
-var Avatar = function (_a) {
-    var text = _a.text, imageUrl = _a.imageUrl, icon = _a.icon, fallback = _a.fallback, size = _a.size, rounded = _a.rounded, className = _a.className, imageClassName = _a.imageClassName, fallbackClassName = _a.fallbackClassName, _b = _a.type, type = _b === void 0 ? "text" : _b, children = _a.children, style = _a.style;
-    var avatarClassname = avatarVariants({ size: size, rounded: rounded });
+const Avatar = ({ text, imageUrl, icon, fallback, size, rounded, className, imageClassName, fallbackClassName, type = "text", children, style, }) => {
+    const avatarClassname = avatarVariants({ size, rounded });
     return (_jsx(AvatarBase, { className: cn(avatarClassname, className), style: style, children: children || (_jsxs(_Fragment, { children: [type === "image" && (_jsxs(_Fragment, { children: [_jsx(AvatarImage, { src: imageUrl, className: cn(imageClassName) }), _jsx(AvatarFallback, { className: cn(fallbackClassName), children: typeof fallback === "string"
                                 ? formatAvatarName(fallback)
                                 : fallback })] })), type === "text" && formatAvatarName(text !== null && text !== void 0 ? text : ""), type === "icon" && icon] })) }));

package/dist/components/Avatar/Avatar.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 Avatar from "./Avatar";
-var meta = {
+const meta = {
     title: "Components/Avatar/Avatar",
     component: Avatar,
     tags: ["autodocs"],
@@ -19,29 +8,29 @@ 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 Default = {
+export const Default = {
     args: {
         imageUrl: "",
         text: "AN",
         size: "lg",
         rounded: "full",
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row justify-between", children: _jsx(Avatar, __assign({}, props)) }));
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row justify-between", children: _jsx(Avatar, Object.assign({}, props)) }));
     },
 };
-export var Preview = {
+export const Preview = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        var BORDER = ["full", "normal", "none"];
-        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  bg-black p-20", children: [BORDER.map(function (rounded) { return (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" })] }, rounded)); }), BORDER.map(function (rounded) { return (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "text", text: "AS" })] }, rounded)); })] }));
+        const props = Object.assign({}, args);
+        const BORDER = ["full", "normal", "none"];
+        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  bg-black p-20", children: [BORDER.map((rounded) => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" })] }, rounded))), BORDER.map((rounded) => (_jsxs("div", { className: "flex flex-row items-center gap-3", children: [_jsx(Avatar, { size: "xxs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "xs", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "sm", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "md", rounded: rounded, type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: rounded, type: "text", text: "AS" })] }, rounded)))] }));
     },
 };

package/dist/components/Avatar/Avatar.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var avatarVariants = cva([
+export const avatarVariants = cva([
     "flex items-center justify-center bg-grey2-700 text-foreground typography-subtitile2 truncate",
 ], {
     variants: {

package/dist/components/Avatar/AvatarBase.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)
@@ -25,19 +14,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { cn } from "@/utils/cn";
-var AvatarBase = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AvatarPrimitive.Root, __assign({ ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className) }, props)));
+const AvatarBase = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Root, Object.assign({ ref: ref, className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className) }, props)));
 });
 AvatarBase.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AvatarPrimitive.Image, __assign({ ref: ref, className: cn("aspect-square h-full w-full", className) }, props)));
+const AvatarImage = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Image, Object.assign({ ref: ref, className: cn("aspect-square h-full w-full", className) }, props)));
 });
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(AvatarPrimitive.Fallback, __assign({ ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className) }, props)));
+const AvatarFallback = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(AvatarPrimitive.Fallback, Object.assign({ ref: ref, className: cn("flex h-full w-full items-center justify-center rounded-full bg-muted", className) }, props)));
 });
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 export { AvatarBase, AvatarImage, AvatarFallback };

package/dist/components/Avatar/AvatarGroup.js

@@ -1,20 +1,19 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Children, cloneElement } from "react";
-var AvatarGroup = function (_a) {
-    var _b = _a.borderWidth, borderWidth = _b === void 0 ? 2 : _b, _c = _a.borderColor, borderColor = _c === void 0 ? "white" : _c, _d = _a.maxDisplay, maxDisplay = _d === void 0 ? 4 : _d, children = _a.children, remainingText = _a.remainingText, remainingAvatar = _a.remainingAvatar;
-    var avatars = Children.toArray(children);
-    var displayAvatars = avatars.slice(0, maxDisplay);
-    var remainingCount = Math.max(0, avatars.length - maxDisplay);
-    var remainingComp = remainingAvatar ||
+const AvatarGroup = ({ borderWidth = 2, borderColor = "white", maxDisplay = 4, children, remainingText, remainingAvatar, }) => {
+    const avatars = Children.toArray(children);
+    const displayAvatars = avatars.slice(0, maxDisplay);
+    const remainingCount = Math.max(0, avatars.length - maxDisplay);
+    const remainingComp = remainingAvatar ||
         cloneElement(displayAvatars[0], {
-            style: { borderWidth: borderWidth, borderColor: borderColor },
+            style: { borderWidth, borderColor },
             className: "relative z-0",
-            children: remainingText || "+".concat(remainingCount),
+            children: remainingText || `+${remainingCount}`,
         });
-    return (_jsxs("div", { className: "flex items-center -space-x-2", children: [displayAvatars.map(function (avatar, index) {
+    return (_jsxs("div", { className: "flex items-center -space-x-2", children: [displayAvatars.map((avatar, index) => {
                 return (_jsx("div", { className: "relative", style: { zIndex: avatars.length - index }, children: cloneElement(avatar, {
-                        style: { borderWidth: borderWidth, borderColor: borderColor },
+                        style: { borderWidth, borderColor },
                     }) }, index));
             }), remainingCount > 0 && remainingComp] }));
 };

package/dist/components/Avatar/AvatarGroup.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 AvatarGroup from "./AvatarGroup";
 import Avatar from "./Avatar";
-var meta = {
+const meta = {
     title: "Components/Avatar/AvatarGroup",
     component: AvatarGroup,
     tags: ["autodocs"],
@@ -20,28 +9,28 @@ 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 Default = {
+export const Default = {
     args: {
         imageUrl: "",
         text: "AN",
         size: "lg",
         rounded: "full",
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row justify-between", children: _jsxs(AvatarGroup, __assign({}, props, { children: [_jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" })] })) }));
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row justify-between", children: _jsxs(AvatarGroup, Object.assign({}, props, { children: [_jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" })] })) }));
     },
 };
-export var Preview = {
+export const Preview = {
     args: {},
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
+        const props = Object.assign({}, args);
         return (_jsx("div", { className: "flex flex-col gap-2 w-full  bg-black p-20", children: _jsx("div", { className: "flex flex-row items-center gap-3", children: _jsxs(AvatarGroup, { children: [_jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "image", imageUrl: "https://i.pravatar.cc/300?img=59", fallback: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" }), _jsx(Avatar, { size: "lg", rounded: "full", type: "text", text: "AS" })] }) }) }));
     },
 };

package/dist/components/Button/Button.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,9 +14,9 @@ import { forwardRef } from "react";
 import { buttonVariants } from "./Button.styles";
 import { cn } from "@/utils/cn";
 import Loading from "../Loading/Loading";
-var Button = forwardRef(function (_a, ref) {
-    var _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.color, color = _c === void 0 ? "primary" : _c, _d = _a.variant, variant = _d === void 0 ? "solid" : _d, title = _a.title, children = _a.children, startIcon = _a.startIcon, endIcon = _a.endIcon, _e = _a.disabled, disabled = _e === void 0 ? false : _e, _f = _a.fullwidth, fullwidth = _f === void 0 ? false : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, className = _a.className, props = __rest(_a, ["size", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
-    var isDisabled = disabled || isLoading;
-    return (_jsx("button", __assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, "data-loading": isLoading || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size: size, color: color, variant: variant, disabled: disabled, fullwidth: fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [isLoading && _jsx(Loading, {}), startIcon, children || title, endIcon] }) })));
+const Button = forwardRef((_a, ref) => {
+    var { size = "md", color = "primary", variant = "solid", title, children, startIcon, endIcon, disabled = false, fullwidth = false, isLoading = false, className } = _a, props = __rest(_a, ["size", "color", "variant", "title", "children", "startIcon", "endIcon", "disabled", "fullwidth", "isLoading", "className"]);
+    const isDisabled = disabled || isLoading;
+    return (_jsx("button", Object.assign({ type: "button" }, props, { ref: ref, "aria-disabled": isDisabled || undefined, "data-loading": isLoading || undefined, tabIndex: isDisabled ? -1 : 0, className: cn(buttonVariants({ size, color, variant, disabled, fullwidth }), className), disabled: isDisabled, children: _jsxs(_Fragment, { children: [isLoading && _jsx(Loading, {}), startIcon, children || title, endIcon] }) })));
 });
 export default Button;

package/dist/components/Button/Button.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var buttonVariants = cva([
+export const buttonVariants = cva([
     "gap-2 font-bold inline-flex items-center outline-none transition ease-in-out duration-45",
 ], {
     variants: {