@rovula/ui 0.0.12 → 0.0.14

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

@@ -0,0 +1,45 @@
+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 = {
+    title: "Components/ActionButton",
+    component: ActionButton,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        variant: "solid",
+        size: "lg",
+    },
+    render: function (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, {}) })) }));
+    },
+};
+export var Preview = {
+    args: {},
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-col gap-2 w-full  bg-black 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, {}) })] })] })] }));
+    },
+};

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

@@ -0,0 +1,71 @@
+import { cva } from "class-variance-authority";
+export var actionButtonVariants = cva(["bg-primary rounded box-border flex items-center justify-center"], {
+    variants: {
+        variant: {
+            solid: " bg-secondary-20 hover:bg-secondary-5 fill-secondary-foreground text-secondary-foreground",
+            outline: [
+                "bg-transparent border border-main-transparent-secondary-32 fill-secondary-70 text-secondary-70",
+                "hover:bg-main-transparent-secondary-8 hover:border-main-secondary-48 hover:fill-secondary-5 hover:text-secondary-5",
+            ],
+            icon: [
+                "rounded-full bg-transparent fill-secondary-70 text-secondary-70",
+                "hover:bg-main-transparent-secondary-8 hover:fill-secondary-5 hover:text-secondary-5",
+            ],
+        },
+        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]",
+        },
+        disabled: {
+            true: "pointer-events-none border-grey2-500/[.32] text-grey2-500/[.32] fill-red-500",
+        },
+        active: {
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            variant: "solid",
+            disabled: true,
+            className: "bg-grey2-500 text-textcolor-medium fill-textcolor-medium",
+        },
+        {
+            variant: "solid",
+            active: true,
+            className: "bg-primary-120 hover:bg-primary-100 text-primary-foreground",
+        },
+        {
+            variant: "outline",
+            active: true,
+            className: "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+        },
+        {
+            variant: "icon",
+            active: true,
+            className: "border-main-transparent-primary-48 hover:bg-main-transparent-primary-8 hover:text-primary text-primary",
+        },
+        {
+            size: "lg",
+            variant: "icon",
+            className: "w-[56px] h-[56px]",
+        },
+        {
+            size: "md",
+            variant: "icon",
+            className: "w-[38px] h-[38px]",
+        },
+        {
+            size: "sm",
+            variant: "icon",
+            className: "w-[30px] h-[30px]",
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        variant: "solid",
+        disabled: false,
+        active: false,
+    },
+});

package/dist/components/Avatar/Avatar.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@/utils/cn";
+import { AvatarBase, AvatarFallback, AvatarImage } from "./AvatarBase";
+import { avatarVariants } from "./Avatar.styles";
+export var formatAvatarName = function (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);
+};
+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 });
+    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] })) }));
+};
+export default Avatar;

package/dist/components/Avatar/Avatar.stories.js

@@ -0,0 +1,47 @@
+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 = {
+    title: "Components/Avatar/Avatar",
+    component: Avatar,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        imageUrl: "",
+        text: "AN",
+        size: "lg",
+        rounded: "full",
+    },
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row justify-between", children: _jsx(Avatar, __assign({}, props)) }));
+    },
+};
+export var Preview = {
+    args: {},
+    render: function (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)); })] }));
+    },
+};

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

@@ -0,0 +1,23 @@
+import { cva } from "class-variance-authority";
+export var avatarVariants = cva([
+    "flex items-center justify-center bg-grey2-700 text-white typography-subtitile2 truncate",
+], {
+    variants: {
+        size: {
+            xxs: "w-[24px] h-[24px] typography-subtitile3",
+            xs: "w-[32px] h-[32px]",
+            sm: "w-[40px] h-[40px]",
+            md: "w-[48px] h-[48px]",
+            lg: "w-[64px] h-[64px]",
+        },
+        rounded: {
+            normal: "rounded",
+            full: "rounded-full",
+            none: "rounded-none",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        rounded: "normal",
+    },
+});

package/dist/components/Avatar/AvatarBase.js

@@ -0,0 +1,43 @@
+"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)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import * as 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)));
+});
+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)));
+});
+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)));
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+export { AvatarBase, AvatarImage, AvatarFallback };

package/dist/components/Avatar/AvatarGroup.js

@@ -0,0 +1,21 @@
+"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 ||
+        cloneElement(displayAvatars[0], {
+            style: { borderWidth: borderWidth, borderColor: borderColor },
+            className: "relative z-0",
+            children: remainingText || "+".concat(remainingCount),
+        });
+    return (_jsxs("div", { className: "flex items-center -space-x-2", children: [displayAvatars.map(function (avatar, index) {
+                return (_jsx("div", { className: "relative", style: { zIndex: avatars.length - index }, children: cloneElement(avatar, {
+                        style: { borderWidth: borderWidth, borderColor: borderColor },
+                    }) }, index));
+            }), remainingCount > 0 && remainingComp] }));
+};
+export default AvatarGroup;

package/dist/components/Avatar/AvatarGroup.stories.js

@@ -0,0 +1,47 @@
+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 = {
+    title: "Components/Avatar/AvatarGroup",
+    component: AvatarGroup,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        imageUrl: "",
+        text: "AN",
+        size: "lg",
+        rounded: "full",
+    },
+    render: function (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" })] })) }));
+    },
+};
+export var Preview = {
+    args: {},
+    render: function (args) {
+        console.log("args ", args);
+        var props = __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.styles.js

@@ -49,12 +49,12 @@ export var buttonVariants = cva([
             color: "secondary",
             class: "text-secondary-foreground",
         },
-        {
-            variant: "solid",
-            disabled: true,
-            color: "secondary",
-            class: "text-white",
-        },
+        // {
+        //   variant: "solid",
+        //   disabled: true,
+        //   color: "secondary",
+        //   class: "text-white",
+        // },
         {
             variant: "solid",
             color: "tertiary",

package/dist/components/Dropdown/Dropdown.js

@@ -21,7 +21,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef, useCallback, useEffect, useMemo, useState, } from "react";
+import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
@@ -31,6 +31,7 @@ var Dropdown = forwardRef(function (_a, ref) {
     var _k = useState(false), isFocused = _k[0], setIsFocused = _k[1];
     var _l = useState(null), selectedOption = _l[0], setSelectedOption = _l[1];
     var _m = useState(""), textValue = _m[0], setTextValue = _m[1];
+    var keyCode = useRef("");
     useEffect(function () {
         if (value && !selectedOption) {
             setSelectedOption(value);
@@ -63,6 +64,42 @@ var Dropdown = forwardRef(function (_a, ref) {
                 }
                 return (_jsx("li", { onMouseDown: 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" : ""), children: option.label }, option.value));
             }), optionsFiltered.length === 0 && (_jsx("li", { className: "px-4 py-14 text-center text-input-text", children: "Not found" }))] })); };
-    return (_jsxs("div", { className: "relative ".concat(fullwidth ? "w-full" : ""), children: [_jsx(TextInput, __assign({}, 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, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: function () { return setIsFocused(true); }, onBlur: function () { return setIsFocused(false); }, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
+    var handleOnFocus = useCallback(function (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 || {
+            value: "",
+            label: "",
+        };
+        if (!isMatchSelectedValue && textValue) {
+            option = {
+                value: "",
+                label: "",
+            };
+        }
+        if (keyCode.current === "Enter") {
+            return;
+        }
+        setSelectedOption(option);
+        setTextValue(option.label);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect(option);
+    }, [optionsFiltered, textValue]);
+    var handleOnBlur = useCallback(function (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) {
+        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({}, 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, hasClearIcon: false, size: size, className: customInputVariant({ size: size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown, endIcon: _jsx("div", { className: iconWrapperVariant({ size: size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size: size, isFocus: isFocused }) }) }) })), isFocused && renderOptions()] }));
 });
 export default Dropdown;

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

@@ -9,8 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     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 } from "react";
+import { useRef, useState } from "react";
 import Dropdown from "./Dropdown";
 import Button from "../Button/Button";
 import { cn } from "@/utils/cn";
@@ -46,9 +55,25 @@ export var Default = {
 };
 var DropdownWithRef = function (props) {
     var inputRef = useRef(null);
-    return (_jsx(Dropdown, __assign({ id: "1", size: "lg" }, props, { ref: inputRef, labelClassName: "peer-focus:bg-red-500", onKeyDown: function (e) {
+    var _a = useState(customOptions), options = _a[0], setOptions = _a[1];
+    var _b = 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) {
             var _a, _b;
             if (e.code === "Enter") {
+                setOptions(function (options) { return __spreadArray(__spreadArray([], options, true), [
+                    {
+                        label: text,
+                        value: text,
+                    },
+                ], false); });
+                setValue({
+                    label: text,
+                    value: text,
+                });
                 (_b = (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur) === null || _b === void 0 ? void 0 : _b.call(_a);
             }
         } })));
@@ -63,7 +88,7 @@ export var WithRef = {
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)), "\\"] }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)) }));
     },
 };
 var customOptions = new Array(100).fill("").map(function (__, index) { return ({
@@ -86,6 +111,6 @@ export var CustomOption = {
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)), "\\"] }));
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DropdownWithRef, __assign({ id: "1", size: "lg", options: options }, args)) }));
     },
 };

package/dist/components/Input/Input.js

@@ -21,11 +21,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import { forwardRef } from "react";
 import { cn } from "@/utils/cn";
-var Input = React.forwardRef(function (_a, ref) {
-    var className = _a.className, type = _a.type, props = __rest(_a, ["className", "type"]);
-    return (_jsx("input", __assign({ type: type, className: cn("flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", className), ref: ref }, props)));
+import { inputVariants } from "./Input.styles";
+var Input = forwardRef(function (_a, ref) {
+    var className = _a.className, _b = _a.type, type = _b === void 0 ? "text" : _b, _c = _a.size, size = _c === void 0 ? "md" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.fullwidth, fullwidth = _e === void 0 ? false : _e, _f = _a.disabled, disabled = _f === void 0 ? false : _f, _g = _a.error, error = _g === void 0 ? false : _g, _h = _a.required, required = _h === void 0 ? false : _h, _j = _a.hiddenPlaceholder, hiddenPlaceholder = _j === void 0 ? false : _j, props = __rest(_a, ["className", "type", "size", "variant", "fullwidth", "disabled", "error", "required", "hiddenPlaceholder"]);
+    return (_jsx("input", __assign({ type: type, className: cn(inputVariants({ size: size, variant: variant, fullwidth: fullwidth, error: error, hiddenPlaceholder: hiddenPlaceholder }), className), ref: ref, disabled: disabled }, props)));
 });
 Input.displayName = "Input";
 export { Input };

package/dist/components/Input/Input.stories.js

@@ -9,7 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Input } from "./Input";
 var meta = {
     title: "Components/Input",
@@ -25,13 +25,11 @@ var meta = {
 export default meta;
 export var Default = {
     args: {
-    // label: "Lorem Ipsum",
-    // value: "Lorem Ipsum",
     // fullwidth: true,
     },
     render: function (args) {
         console.log("args ", args);
         var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Input, { type: "email", placeholder: "Email" }) }));
+        return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Input, __assign({ id: "1", size: "lg", placeholder: "Email" }, args)), _jsx(Input, __assign({ id: "2", size: "md", placeholder: "Email" }, args)), _jsx(Input, __assign({ id: "3", size: "sm", placeholder: "Email" }, args))] }));
     },
 };

package/dist/components/Input/Input.styles.js

@@ -0,0 +1,45 @@
+import { cva } from "class-variance-authority";
+export var inputVariants = cva([
+    "border-0 outline-none",
+    "p-1 flex w-auto h-fit box-border",
+    "peer text-black",
+], {
+    variants: {
+        size: {
+            sm: "p-2 px-3 typography-small1",
+            md: "py-2 px-3 typography-subtitile4",
+            lg: "p-4 typography-subtitile1",
+        },
+        rounded: {
+            none: "rounded-none",
+            normal: "rounded-xl",
+            full: "rounded-full",
+        },
+        variant: {
+            flat: "",
+            outline: "ring-1 ring-inset ring-input-stroke hover:ring-input-active focus:ring-1 focus:ring-inset focus:ring-input-stroke-active",
+            underline: "border-b-2 border-input-stroke transition-colors hover:border-input-stroke-active focus:border-input-stroke",
+        },
+        hiddenPlaceholder: {
+            true: "placeholder:text-transparent",
+        },
+        fullwidth: {
+            true: "w-full",
+        },
+        disabled: {
+            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+        },
+        error: {
+            true: "ring-error focus:ring-error",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        variant: "outline",
+        rounded: "normal",
+        fullwidth: false,
+        disabled: false,
+        error: false,
+        hiddenPlaceholder: true,
+    },
+});

package/dist/components/Label/Label.js

@@ -24,12 +24,16 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
-import { cva } from "class-variance-authority";
 import { cn } from "@/utils/cn";
-var labelVariants = cva("typography-label1 peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+import { labelVariant } from "./Label.styles";
 var Label = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(LabelPrimitive.Root, __assign({ ref: ref, className: cn(labelVariants(), className) }, props)));
+    return (_jsx(LabelPrimitive.Root, __assign({ ref: ref, className: cn(labelVariant({
+            size: props.size,
+            disabled: props.disabled,
+            error: props.error,
+            isFloatable: props.isFloatable,
+        }), className) }, props)));
 });
 Label.displayName = LabelPrimitive.Root.displayName;
 export { Label };