@rovula/ui 0.0.21 → 0.0.23

package/dist/components/DatePicker/DatePicker.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);
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from "react";
 import { CalendarIcon } from "@heroicons/react/16/solid";
@@ -17,15 +6,10 @@ import { Calendar } from "../Calendar";
 import { Popover, PopoverContent, PopoverTrigger } from "../Popover/Popover";
 import { TextInput } from "../TextInput/TextInput";
 import { format } from "date-fns/format";
-var DatePicker = function (_a) {
-    var date = _a.date, onSelect = _a.onSelect, textInputProps = _a.textInputProps;
-    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
-    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, __assign({ fullwidth: true, id: "2", readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: function () {
-                            var value = [];
-                            for (var _i = 0; _i < arguments.length; _i++) {
-                                value[_i] = arguments[_i];
-                            }
-                            onSelect === null || onSelect === void 0 ? void 0 : onSelect.apply(void 0, value);
+const DatePicker = ({ date, onSelect, textInputProps, }) => {
+    const [isOpen, setIsOpen] = useState(false);
+    return (_jsx("div", { children: _jsxs(Popover, { open: isOpen, onOpenChange: setIsOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("div", { className: "flex", children: _jsx(TextInput, Object.assign({ fullwidth: true, id: "2", readOnly: true, label: "Date", size: "md", value: date ? format(date, "dd MMM yyyy") : isOpen ? " " : "", hasClearIcon: false, endIcon: _jsx(CalendarIcon, { fill: "inherit" }) }, textInputProps)) }) }), _jsx(PopoverContent, { className: "w-auto p-0", children: _jsx(Calendar, { mode: "single", selected: date, onSelect: (...value) => {
+                            onSelect === null || onSelect === void 0 ? void 0 : onSelect(...value);
                             setIsOpen(false);
                         } }) })] }) }));
 };

package/dist/components/DatePicker/DatePicker.stories.js

@@ -1,19 +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 } from "react/jsx-runtime";
 import React from "react";
 import DatePicker from "./DatePicker";
 // import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
-var meta = {
+const meta = {
     title: "Components/DatePicker",
     component: DatePicker,
     tags: ["autodocs"],
@@ -21,16 +10,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(undefined), date = _a[0], setDate = _a[1];
+        const props = Object.assign({}, args);
+        const [date, setDate] = React.useState(undefined);
         return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DatePicker, { date: date, onSelect: setDate }) }));
     },
 };

package/dist/components/Dialog/Dialog.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,38 +15,38 @@ import * as React from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XMarkIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
-var Dialog = DialogPrimitive.Root;
-var DialogTrigger = DialogPrimitive.Trigger;
-var DialogPortal = DialogPrimitive.Portal;
-var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Overlay, __assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-base-popup-curtain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogPortal = DialogPrimitive.Portal;
+const DialogClose = DialogPrimitive.Close;
+const DialogOverlay = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Overlay, Object.assign({ ref: ref, className: cn("fixed inset-0 z-50 bg-base-popup-curtain data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0", className) }, props)));
 });
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React.forwardRef(function (_a, ref) {
-    var className = _a.className, children = _a.children, props = __rest(_a, ["className", "children"]);
-    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.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-4 border border-base-popup bg-base-popup p-6 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, { children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground", children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+const DialogContent = React.forwardRef((_a, ref) => {
+    var { className, children } = _a, props = __rest(_a, ["className", "children"]);
+    return (_jsxs(DialogPortal, { children: [_jsx(DialogOverlay, {}), _jsxs(DialogPrimitive.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-4 border border-base-popup bg-base-popup p-6 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, { children: [children, _jsxs(DialogPrimitive.Close, { className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-primary data-[state=open]:text-primary-foreground", children: [_jsx(XMarkIcon, { className: "h-4 w-4" }), _jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
-var DialogHeader = 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 DialogHeader = (_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)));
 };
 DialogHeader.displayName = "DialogHeader";
-var DialogFooter = 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 DialogFooter = (_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)));
 };
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Title, __assign({ ref: ref, className: cn("typography-h5 tracking-tight ", className) }, props)));
+const DialogTitle = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Title, Object.assign({ ref: ref, className: cn("typography-h5 tracking-tight ", className) }, props)));
 });
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React.forwardRef(function (_a, ref) {
-    var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(DialogPrimitive.Description, __assign({ ref: ref, className: cn("text-sm", className) }, props)));
+const DialogDescription = React.forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (_jsx(DialogPrimitive.Description, Object.assign({ ref: ref, className: cn("text-sm", className) }, props)));
 });
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 export { Dialog, DialogPortal, DialogOverlay, DialogClose, DialogTrigger, DialogContent, DialogHeader, DialogFooter, DialogTitle, DialogDescription, };

package/dist/components/Dialog/Dialog.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 { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, } from "./Dialog";
 import Button from "../Button/Button";
 import { Label } from "../Label/Label";
 import { Input } from "../Input/Input";
-var meta = {
+const meta = {
     title: "Components/Dialog",
     component: Dialog,
     tags: ["autodocs"],
@@ -22,31 +11,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: {
     // 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(Dialog, { children: [_jsx(DialogTrigger, { children: "Open" }), _jsx(DialogContent, { children: _jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Are you absolutely sure?" }), _jsx(DialogDescription, { children: "This action cannot be undone. This will permanently delete your account and remove your data from our servers." })] }) })] }) }));
     },
 };
-export var Demo = {
+export const Demo = {
     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(Dialog, { children: [_jsx(DialogTrigger, { asChild: true, children: _jsx(Button, { variant: "outline", children: "Edit Profile" }) }), _jsxs(DialogContent, { className: "sm:max-w-[425px]", children: [_jsxs(DialogHeader, { children: [_jsx(DialogTitle, { children: "Edit profile" }), _jsx(DialogDescription, { children: "Make changes to your profile here. Click save when you're done." })] }), _jsxs("div", { className: "grid gap-4 py-4", children: [_jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "name", className: "text-right", children: "Name" }), _jsx(Input, { id: "name", defaultValue: "Pedro Duarte", className: "col-span-3" })] }), _jsxs("div", { className: "grid grid-cols-4 items-center gap-4", children: [_jsx(Label, { htmlFor: "username", className: "text-right", children: "Username" }), _jsx(Input, { id: "username", defaultValue: "@peduarte", className: "col-span-3" })] })] }), _jsx(DialogFooter, { children: _jsx(Button, { type: "submit", children: "Save changes" }) })] })] }) }));
     },
 };

package/dist/components/Dropdown/Dropdown.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,56 +14,56 @@ import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
-var Dropdown = forwardRef(function (_a, ref) {
-    var id = _a.id, _b = _a.options, options = _b === void 0 ? [] : _b, value = _a.value, label = _a.label, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.rounded, rounded = _d === void 0 ? "normal" : _d, _e = _a.variant, variant = _e === void 0 ? "outline" : _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.filterMode, filterMode = _j === void 0 ? false : _j, _k = _a.required, required = _k === void 0 ? true : _k, onChangeText = _a.onChangeText, onSelect = _a.onSelect, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
-    var _id = id || "".concat(label, "-select");
-    var _l = useState(false), isFocused = _l[0], setIsFocused = _l[1];
-    var _m = useState(null), selectedOption = _m[0], setSelectedOption = _m[1];
-    var _o = useState(""), textValue = _o[0], setTextValue = _o[1];
-    var keyCode = useRef("");
-    useEffect(function () {
+const Dropdown = forwardRef((_a, ref) => {
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, onChangeText, onSelect } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "onChangeText", "onSelect"]);
+    const _id = id || `${label}-select`;
+    const [isFocused, setIsFocused] = useState(false);
+    const [selectedOption, setSelectedOption] = useState(null);
+    const [textValue, setTextValue] = useState("");
+    const keyCode = useRef("");
+    useEffect(() => {
         if (value && !selectedOption) {
             setSelectedOption(value);
         }
     }, [value, selectedOption]);
-    var handleOnChangeText = useCallback(function (event) {
+    const handleOnChangeText = useCallback((event) => {
         onChangeText === null || onChangeText === void 0 ? void 0 : onChangeText(event);
         setTextValue(event.target.value);
     }, [onChangeText]);
-    var handleOptionClick = useCallback(function (option) {
+    const handleOptionClick = useCallback((option) => {
         setSelectedOption(option);
         setTextValue(option.label);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
     }, [onSelect]);
-    var optionsFiltered = useMemo(function () {
-        return options.filter(function (option) {
+    const optionsFiltered = useMemo(() => {
+        return options.filter((option) => {
             var _a;
             return !filterMode ||
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
-    var renderOptions = function () { return (_jsxs("ul", { className: "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map(function (option) {
+    const renderOptions = () => (_jsxs("ul", { className: "absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", children: [optionsFiltered.map((option) => {
                 if (option.renderLabel) {
                     return (_jsx(Fragment, { children: option.renderLabel({
                             value: option.value,
                             label: option.label,
-                            handleOnClick: function () { return handleOptionClick(option); },
-                            className: "px-4 py-2 hover:bg-gray-100 cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""),
+                            handleOnClick: () => handleOptionClick(option),
+                            className: `px-4 py-2 hover:bg-gray-100 cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value ? " bg-gray-200" : ""}`,
                         }) }, option.value));
                 }
-                return (_jsx("li", { onMouseDown: function () { return handleOptionClick(option); }, className: "px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ".concat((selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
+                return (_jsx("li", { onMouseDown: () => handleOptionClick(option), className: `px-4 py-2 hover:bg-primary-hover-bg cursor-pointer ${(selectedOption === null || selectedOption === void 0 ? void 0 : selectedOption.value) === option.value
                         ? "bg-base-popup-highligh"
-                        : ""), children: option.label }, option.value));
-            }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] })); };
-    var handleOnFocus = useCallback(function (e) {
+                        : ""}`, children: option.label }, option.value));
+            }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] }));
+    const handleOnFocus = useCallback((e) => {
         var _a;
         setIsFocused(true);
         (_a = props === null || props === void 0 ? void 0 : props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onFocus]);
-    var clearMismatchValue = useCallback(function (e) {
-        var matchSelectedValue = optionsFiltered.find(function (opt) { var _a, _b; return opt.value === ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || opt.label === ((_b = e.target) === null || _b === void 0 ? void 0 : _b.value); });
-        var isMatchSelectedValue = !!matchSelectedValue;
-        var option = matchSelectedValue || {
+    const clearMismatchValue = useCallback((e) => {
+        const matchSelectedValue = optionsFiltered.find((opt) => { var _a, _b; return opt.value === ((_a = e.target) === null || _a === void 0 ? void 0 : _a.value) || opt.label === ((_b = e.target) === null || _b === void 0 ? void 0 : _b.value); });
+        const isMatchSelectedValue = !!matchSelectedValue;
+        let option = matchSelectedValue || {
             value: "",
             label: "",
         };
@@ -91,17 +80,17 @@ var Dropdown = forwardRef(function (_a, ref) {
         setTextValue(option.label);
         onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
     }, [optionsFiltered, textValue]);
-    var handleOnBlur = useCallback(function (e) {
+    const handleOnBlur = useCallback((e) => {
         var _a;
         setIsFocused(false);
         clearMismatchValue(e);
         (_a = props === null || props === void 0 ? void 0 : props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onBlur]);
-    var handleOnKeyDown = useCallback(function (e) {
+    const handleOnKeyDown = useCallback((e) => {
         var _a;
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size: size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    return (_jsxs("div", { className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
 });
 export default Dropdown;

package/dist/components/Dropdown/Dropdown.stories.js

@@ -1,30 +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);
-};
-var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
-    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
-        if (ar || !(i in from)) {
-            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
-            ar[i] = from[i];
-        }
-    }
-    return to.concat(ar || Array.prototype.slice.call(from));
-};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef, useState } from "react";
 import Dropdown from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
 // 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/Dropdown",
     component: Dropdown,
     tags: ["autodocs"],
@@ -33,43 +13,44 @@ 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 options = new Array(100).fill("").map(function (__, index) { return ({
-    value: "option".concat(index + 1),
-    label: "Option ".concat(index + 1),
-}); });
-export var Default = {
+const options = new Array(100).fill("").map((__, index) => ({
+    value: `option${index + 1}`,
+    label: `Option ${index + 1}`,
+}));
+export const Default = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
-        options: options,
+        options,
     },
-    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(Dropdown, __assign({ id: "1", size: "lg", options: options }, args)), _jsx(Dropdown, __assign({ id: "2", size: "md", options: options }, args)), _jsx(Dropdown, __assign({ id: "3", size: "sm", options: options }, args))] }));
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Dropdown, Object.assign({ id: "1", size: "lg", options: options }, args)), _jsx(Dropdown, Object.assign({ id: "2", size: "md", options: options }, args)), _jsx(Dropdown, Object.assign({ id: "3", size: "sm", options: options }, args))] }));
     },
 };
-var DropdownWithRef = function (props) {
-    var inputRef = useRef(null);
-    var _a = useState(customOptions), options = _a[0], setOptions = _a[1];
-    var _b = useState({
+const DropdownWithRef = (props) => {
+    const inputRef = useRef(null);
+    const [options, setOptions] = useState(customOptions);
+    const [value, setValue] = useState({
         label: "",
         value: "",
-    }), value = _b[0], setValue = _b[1];
-    var _c = useState(""), text = _c[0], setText = _c[1];
-    return (_jsx(Dropdown, __assign({ id: "1", size: "lg" }, props, { value: value, options: options, ref: inputRef, labelClassName: "peer-focus:bg-red-500", onSelect: setValue, onChangeText: function (e) { return setText(e.target.value); }, onKeyDown: function (e) {
+    });
+    const [text, setText] = useState("");
+    return (_jsx(Dropdown, Object.assign({ id: "1", size: "lg" }, props, { value: value, options: options, ref: inputRef, labelClassName: "peer-focus:bg-red-500", onSelect: setValue, onChangeText: (e) => setText(e.target.value), onKeyDown: (e) => {
             var _a, _b;
             if (e.code === "Enter") {
-                setOptions(function (options) { return __spreadArray(__spreadArray([], options, true), [
+                setOptions((options) => [
+                    ...options,
                     {
                         label: text,
                         value: text,
                     },
-                ], false); });
+                ]);
                 setValue({
                     label: text,
                     value: text,
@@ -78,39 +59,39 @@ var DropdownWithRef = function (props) {
             }
         } })));
 };
-export var WithRef = {
+export const WithRef = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
-        options: options,
+        options,
         filterMode: true,
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)) }));
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, Object.assign({ id: "1", size: "lg", options: options }, args)) }));
     },
 };
-var customOptions = new Array(100).fill("").map(function (__, index) { return ({
-    value: "option".concat(index + 1),
-    label: "Option ".concat(index + 1),
-    renderLabel: function (config) {
-        return (_jsxs("div", { className: cn(config, "w-full  flex justify-between"), onMouseDown: config.handleOnClick, children: [_jsx("span", { children: "Test custom" }), _jsx(Button, { onMouseDown: function (e) {
+const customOptions = new Array(100).fill("").map((__, index) => ({
+    value: `option${index + 1}`,
+    label: `Option ${index + 1}`,
+    renderLabel(config) {
+        return (_jsxs("div", { className: cn(config, "w-full  flex justify-between"), onMouseDown: config.handleOnClick, children: [_jsx("span", { children: "Test custom" }), _jsx(Button, { onMouseDown: (e) => {
                         // e.stopPropagation();
                         alert("SSS");
                     }, children: "Add action" })] }));
     },
-}); });
-export var CustomOption = {
+}));
+export const CustomOption = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
         options: customOptions,
         filterMode: true,
     },
-    render: function (args) {
+    render: (args) => {
         console.log("args ", args);
-        var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)) }));
+        const props = Object.assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, Object.assign({ id: "1", size: "lg", options: options }, args)) }));
     },
 };

package/dist/components/Dropdown/Dropdown.styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-export var iconWrapperVariant = cva(["absolute inset-y-0 right-0 flex items-center justify-center"], {
+export const iconWrapperVariant = cva(["absolute inset-y-0 right-0 flex items-center justify-center"], {
     variants: {
         size: {
             sm: "mr-2",
@@ -11,7 +11,7 @@ export var iconWrapperVariant = cva(["absolute inset-y-0 right-0 flex items-cent
         size: "md",
     },
 });
-export var dropdownIconVariant = cva(["transition-all"], {
+export const dropdownIconVariant = cva(["transition-all"], {
     variants: {
         size: {
             sm: "size-[14px]",
@@ -33,7 +33,7 @@ export var dropdownIconVariant = cva(["transition-all"], {
         isFocus: false,
     },
 });
-export var customInputVariant = cva([], {
+export const customInputVariant = cva([], {
     variants: {
         size: {
             sm: "pe-[30px]",