@rovula/ui 0.0.13 → 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/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 };

package/dist/components/Label/Label.styles.js

@@ -0,0 +1,57 @@
+import { cva } from "class-variance-authority";
+export var labelVariant = cva([
+    "block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active",
+], {
+    variants: {
+        size: {
+            sm: "typography-small1",
+            md: "typography-subtitile4",
+            lg: "typography-subtitile1",
+        },
+        disabled: {
+            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled peer-disabled:cursor-not-allowed",
+        },
+        error: {
+            true: "ring-error",
+        },
+        isFloatable: {
+            true: "absolute peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+            false: "",
+        },
+    },
+    compoundVariants: [
+        {
+            size: "sm",
+            isFloatable: true,
+            className: [
+                "left-3 -top-1.5 typography-label2 bg-input-label-background",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label2",
+            ],
+        },
+        {
+            size: "md",
+            isFloatable: true,
+            className: [
+                "left-3 -top-1.5 typography-label1 bg-input-label-background",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+        {
+            size: "lg",
+            isFloatable: true,
+            className: [
+                "left-4 -top-1.5 typography-label1 bg-input-label-background",
+                "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+    ],
+    defaultVariants: {
+        size: "md",
+        disabled: false,
+        error: false,
+        isFloatable: false,
+    },
+});

package/dist/components/Navbar/Navbar.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "@/utils/cn";
+var Navbar = function (_a) {
+    var children = _a.children, className = _a.className, center = _a.center, leftNav = _a.leftNav, rightNav = _a.rightNav, position = _a.position, _b = _a.container, container = _b === void 0 ? false : _b;
+    return (_jsx("header", { className: cn("w-full px-4 py-6 h-[var(--navbar-height)] box-border overflow-hidden typography-subtitile2 border-solid border-b-2 bg-[rgb(var(--navbar-bg-color))] text-[rgb(var(--navbar-text-color))] border-b-[rgb(var(--navbar-border-color))]", { position: position }, className), children: _jsx("div", { className: cn("mx-auto flex h-full justify-between items-center", {
+                container: container,
+            }), children: children || (_jsxs(_Fragment, { children: [_jsx("nav", { className: "flex w-1/2 gap-x-[var(--navbar-gap)] text-xl", children: leftNav }), _jsx("div", { className: "flex flex-shrink-0 flex-wrap justify-center", children: center }), _jsx("nav", { className: "flex w-1/2 justify-end gap-x-[var(--navbar-gap)] text-xl", children: rightNav })] })) }) }));
+};
+export default Navbar;

package/dist/components/Navbar/Navbar.stories.js

@@ -0,0 +1,41 @@
+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, Fragment as _Fragment } from "react/jsx-runtime";
+import Navbar from "./Navbar";
+var meta = {
+    title: "Components/Navbar",
+    component: Navbar,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 w-full h-screen", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {},
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
+    },
+};
+export var Custom = {
+    args: {},
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { className: "px-8", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
+    },
+};

package/dist/components/Search/Search.js

@@ -0,0 +1,19 @@
+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 { Input } from "../Input/Input";
+import { Label } from "../Label/Label";
+function Search(props) {
+    var _a;
+    return (_jsxs("div", { className: " relative", children: [_jsx(Input, __assign({}, props, { hiddenPlaceholder: true })), _jsx(Label, { htmlFor: props.id, size: props.size, disabled: props.disabled, error: props.error, className: (_a = props.labelClassname) !== null && _a !== void 0 ? _a : "", isFloatable: true, children: "Search" })] }));
+}
+export { Search };

package/dist/components/Search/Search.stories.js

@@ -0,0 +1,36 @@
+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 { Search } from "./Search";
+var meta = {
+    title: "Components/Search",
+    component: Search,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+    ],
+};
+export default meta;
+export var Default = {
+    args: {
+        error: false,
+        // fullwidth: true,
+    },
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Search, __assign({ id: "1", size: "lg", placeholder: "Search" }, args)), _jsx(Search, __assign({ id: "2", size: "md", placeholder: "Search" }, args)), _jsx(Search, __assign({ id: "3", size: "sm", placeholder: "Search" }, args))] }));
+    },
+};