@rovula/ui 0.0.19 → 0.0.21

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

@@ -2,7 +2,7 @@ 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",
+    "peer text-input-filled-text placeholder:text-input-default-text bg-transparent caret-primary",
 ], {
     variants: {
         size: {
@@ -17,8 +17,12 @@ export var inputVariants = cva([
         },
         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",
+            outline: [
+                "ring-1 ring-inset ring-input-default-stroke",
+                "hover:ring-input-active-stroke hover:text-input-filled-text",
+                "focus:ring-1 focus:ring-inset focus:ring-input-active-stroke focus:text-input-filled-text active:text-input-filled-text",
+            ],
+            underline: "border-b-2 border-input-default-stroke transition-colors hover:border-input-active-stroke focus:border-input-default-stroke",
         },
         hiddenPlaceholder: {
             true: "placeholder:text-transparent",
@@ -27,10 +31,14 @@ export var inputVariants = cva([
             true: "w-full",
         },
         disabled: {
-            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+            true: [
+                "text-input-disable-text ring-input-disable-stroke bg-input-disable-bg placeholder:text-input-disable-text",
+                "hover:text-input-disable-text hover:ring-input-disable-stroke hover:bg-input-disable-bg hover:placeholder:text-input-disable-text",
+                "active:text-input-disable-text active:ring-input-disable-stroke active:bg-input-disable-bg active:placeholder:text-input-disable-text",
+            ],
         },
         error: {
-            true: "ring-error focus:ring-error",
+            true: "ring-input-error focus:ring-input-error",
         },
     },
     defaultVariants: {

package/dist/components/Loading/Loading.js

@@ -0,0 +1,23 @@
+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 { cn } from "@/utils/cn";
+var Loading = function (_a) {
+    var _b = _a.size, size = _b === void 0 ? 16 : _b, _c = _a.color, color = _c === void 0 ? "" : _c, _d = _a.trackColor, trackColor = _d === void 0 ? "" : _d, _e = _a.strokeWidth, strokeWidth = _e === void 0 ? 2 : _e, _f = _a.percentage, percentage = _f === void 0 ? 75 : _f, _g = _a.animate, animate = _g === void 0 ? true : _g, className = _a.className, progressClassName = _a.progressClassName, trackClassName = _a.trackClassName;
+    var radius = (size - strokeWidth * 2) / 2;
+    var circumference = 2 * Math.PI * radius;
+    var offset = circumference - (percentage / 100) * circumference;
+    return (_jsxs("svg", { className: cn({
+            "animate-spin": animate,
+        }, className), xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 ".concat(size, " ").concat(size), width: size, height: size, role: "status", "aria-live": "polite", children: [_jsx("circle", { className: cn("text-[var(--loading-track-color)]", trackClassName), style: __assign({}, (trackColor ? { color: trackColor } : {})), cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth }), _jsx("circle", { className: cn("text-[var(--loading-process-color)]", progressClassName), style: __assign({}, (color ? { color: color } : {})), cx: size / 2, cy: size / 2, r: radius, stroke: "currentColor", strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round" })] }));
+};
+export default Loading;

package/dist/components/Loading/Loading.stories.js

@@ -0,0 +1,37 @@
+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 Loading from "./Loading";
+var meta = {
+    title: "Components/Loading",
+    component: Loading,
+    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: {
+    // Loading: "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("div", { className: "flex items-center space-x-2", children: _jsx(Loading, __assign({}, props)) }) }));
+    },
+};

package/dist/components/Popover/Popover.js

@@ -29,7 +29,7 @@ var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverContent = React.forwardRef(function (_a, ref) {
     var className = _a.className, _b = _a.align, align = _b === void 0 ? "center" : _b, _c = _a.sideOffset, sideOffset = _c === void 0 ? 4 : _c, props = __rest(_a, ["className", "align", "sideOffset"]);
-    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-popup-background border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
+    return (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, __assign({ ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 min-w-72 rounded-md border bg-base-popup-highlight border-none overflow-hidden p-0 text-popover-foreground shadow-md outline-none 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-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className) }, props)) }));
 });
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "@/utils/cn";
+import { useEffect, useState } from "react";
+var ProgressBar = function (_a) {
+    var _b = _a.progress, progress = _b === void 0 ? 0 : _b, color = _a.color, gradientStart = _a.gradientStart, gradientEnd = _a.gradientEnd, _c = _a.animationDuration, animationDuration = _c === void 0 ? 0.5 : _c, _d = _a.height, height = _d === void 0 ? 8 : _d, trackClassName = _a.trackClassName, progressClassName = _a.progressClassName;
+    var _e = useState(0), width = _e[0], setWidth = _e[1];
+    useEffect(function () {
+        setWidth(progress);
+    }, [progress]);
+    var getBackgroundStyle = function () {
+        if (gradientStart && gradientEnd) {
+            return "linear-gradient(to right, ".concat(gradientStart, ", ").concat(gradientEnd, ")");
+        }
+        return color;
+    };
+    return (_jsx("div", { className: cn("w-full bg-grey2-transparent-16 rounded-full overflow-hidden", trackClassName), style: { height: "".concat(height, "px") }, children: _jsx("div", { className: cn("h-full rounded-full transition-all ease-out bg-primary", progressClassName), style: {
+                width: "".concat(width, "%"),
+                background: getBackgroundStyle(),
+                transition: "width ".concat(animationDuration, "s ease-out"),
+            } }) }));
+};
+export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,52 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
+import ProgressBar from "./ProgressBar";
+var meta = {
+    title: "Components/ProgressBar",
+    component: ProgressBar,
+    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: {},
+    render: function (args) {
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "p-4 space-y-4 w-full", children: _jsx(ProgressBar, __assign({}, props)) }));
+    },
+};
+export var Preview = {
+    args: {},
+    render: function (args) {
+        console.log("args ", args);
+        var _a = useState(0), progress = _a[0], setProgress = _a[1];
+        useEffect(function () {
+            var timer = setInterval(function () {
+                setProgress(function (prevProgress) {
+                    return prevProgress >= 100 ? 0 : prevProgress + 10;
+                });
+            }, 1000);
+            return function () {
+                clearInterval(timer);
+            };
+        }, []);
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "p-4 space-y-4 w-full", children: [_jsx(ProgressBar, { progress: progress, color: "#3b82f6", animationDuration: 0.7 }), _jsx(ProgressBar, { progress: progress, gradientStart: "#8a8a8a", gradientEnd: "#c0c0c0", animationDuration: 0.7 })] }));
+    },
+};

package/dist/components/RadioGroup/RadioGroup.js

@@ -32,9 +32,9 @@ var RadioGroup = React.forwardRef(function (_a, ref) {
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest(_a, ["className"]);
-    return (_jsx(RadioGroupPrimitive.Item, __assign({ ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-secondary-110 ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:border-secondary-110", {
+    return (_jsx(RadioGroupPrimitive.Item, __assign({ ref: ref, className: cn("aspect-square h-4 w-4 rounded-full border text-primary disabled:fill-state-disable-solid ring-offset-background focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:state-disable-solid", {
             "border-primary-30 data-[state=checked]:border-primary": !props.disabled,
-            "border-secondary-110 data-disabled:border-secondary-110 text-secondary-110 fill-secondary-110": props.disabled,
+            "border-state-disable-solid data-disabled:border-state-disable-solid text-state-disable-solid fill-state-disable-solid": props.disabled,
         }, className) }, props, { children: _jsx(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: _jsx("svg", { width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "fill-current text-current", children: _jsx("circle", { cx: "5", cy: "5", r: "5", fill: "current" }) }) }) })));
 });
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

package/dist/components/Search/Search.js

@@ -9,11 +9,10 @@ var __assign = (this && this.__assign) || function () {
     };
     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" })] }));
-}
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import Dropdown from "../Dropdown/Dropdown";
+var Search = forwardRef(function (props, ref) {
+    return (_jsx(Dropdown, __assign({}, props, { ref: ref, hasClearIcon: true, hasSearchIcon: true, label: "Search", endIcon: null, filterMode: true })));
+});
 export { Search };

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

@@ -23,14 +23,17 @@ var meta = {
     ],
 };
 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 = {
     args: {
-        error: false,
-        // fullwidth: true,
+        label: "Choose an option:",
+        fullwidth: true,
+        options: options,
     },
     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))] }));
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(Search, __assign({ id: "1", size: "lg", options: options }, args)), _jsx(Search, __assign({ id: "2", size: "md", options: options }, args)), _jsx(Search, __assign({ id: "3", size: "sm", options: options }, args))] }));
     },
 };

package/dist/components/Text/Text.js

@@ -1,8 +1,23 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "@/utils/cn";
 import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+var textVariants = cva(["text-foreground"], {
+    variants: {
+        color: {
+            primary: "text-primary",
+            secondary: "text-secondary",
+            success: "text-success",
+            tertiary: "text-tertiary",
+            info: "text-info",
+            warning: "text-warning",
+            error: "text-error",
+        },
+    },
+});
+// TODO font, fontBold, elipt
 var Text = forwardRef(function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? "body1" : _b, _c = _a.tag, Tag = _c === void 0 ? "p" : _c, children = _a.children, className = _a.className, color = _a.color, style = _a.style;
-    return (_jsx(Tag, { className: cn("typography-".concat(variant, " text-").concat(color), className), style: style, children: children }));
+    var _b = _a.variant, variant = _b === void 0 ? "body1" : _b, _c = _a.tag, Tag = _c === void 0 ? "p" : _c, children = _a.children, _d = _a.className, className = _d === void 0 ? "" : _d, color = _a.color, style = _a.style;
+    return (_jsx(Tag, { className: cn("typography-".concat(variant), textVariants({ color: color }), className), style: style, children: children }));
 });
 export default Text;

package/dist/components/Text/Text.stories.js

@@ -45,8 +45,12 @@ var variant = [
     "small1",
     "small2",
     "small3",
+    "small4",
+    "small5",
     "label1",
     "label2",
+    "buttonL",
+    "buttonMS",
 ];
 var color = [
     "primary",
@@ -61,7 +65,7 @@ export var Default = {
     args: {},
     render: function (args) {
         var props = __assign({}, args);
-        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: variant.map(function (value) { return (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[200px]", children: _jsx(Text, { variant: value, color: "primary", children: value }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: value, color: "primary", children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, value)); }) }));
+        return (_jsx("div", { className: "flex flex-col gap-2 gap-y-6 w-full", children: variant.map(function (value) { return (_jsxs("div", { className: "flex flex-row ", children: [_jsx("div", { className: "w-[200px]", children: _jsx(Text, { variant: value, children: value }) }), _jsx("div", { className: "w-full", children: _jsx(Text, { variant: value, children: "Lorem ipsum dolor sit amet, adipiscing elit." }) })] }, value)); }) }));
     },
 };
 export var Color = {

package/dist/components/TextInput/TextInput.js

@@ -22,13 +22,14 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useImperativeHandle, useRef, } from "react";
-import { helperTextVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, sectionIconWrapperVariant, } from "./TextInput.styles";
-import { XCircleIcon, ExclamationCircleIcon } from "@heroicons/react/16/solid";
+import { helperTextVariant, iconSearchWrapperVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, sectionIconWrapperVariant, } from "./TextInput.styles";
+import { XCircleIcon, ExclamationCircleIcon, MagnifyingGlassIcon, } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 export var TextInput = forwardRef(function (_a, ref) {
-    var id = _a.id, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.type, type = _e === void 0 ? "text" : _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.required, required = _j === void 0 ? true : _j, _k = _a.hasClearIcon, hasClearIcon = _k === void 0 ? true : _k, endIcon = _a.endIcon, labelClassName = _a.labelClassName, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "endIcon", "labelClassName"]);
+    var id = _a.id, label = _a.label, _b = _a.size, size = _b === void 0 ? "md" : _b, _c = _a.rounded, rounded = _c === void 0 ? "normal" : _c, _d = _a.variant, variant = _d === void 0 ? "outline" : _d, _e = _a.type, type = _e === void 0 ? "text" : _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.required, required = _j === void 0 ? true : _j, _k = _a.hasClearIcon, hasClearIcon = _k === void 0 ? true : _k, _l = _a.hasSearchIcon, hasSearchIcon = _l === void 0 ? false : _l, startIcon = _a.startIcon, endIcon = _a.endIcon, labelClassName = _a.labelClassName, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName"]);
     var inputRef = useRef(null);
     var _id = id || "".concat(type, "-").concat(label, "-input");
+    var hasLeftSectionIcon = !!startIcon;
     var hasRightSectionIcon = !!endIcon;
     var inputClassname = inputVariant({
         size: size,
@@ -37,20 +38,26 @@ export var TextInput = forwardRef(function (_a, ref) {
         fullwidth: fullwidth,
         disabled: disabled,
         error: error,
+        hasSearchIcon: hasSearchIcon,
         hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
+        leftSectionIcon: hasLeftSectionIcon,
         rightSectionIcon: hasRightSectionIcon,
     });
     var labelClassname = labelVariant({
         size: size,
         disabled: disabled,
         error: error,
+        hasSearchIcon: hasSearchIcon,
     });
     var helperTextClassname = helperTextVariant({ size: size, error: error, disabled: disabled });
     var iconWrapperClassname = iconWrapperVariant({ size: size });
+    var iconSearchWrapperClassname = iconSearchWrapperVariant({ size: size });
     var iconClassname = iconVariant({ size: size });
-    var sectionIconWrapperClassname = sectionIconWrapperVariant({
+    // TODO startIcon
+    var endIconWrapperClassname = sectionIconWrapperVariant({
         size: size,
         rounded: rounded,
+        error: error,
     });
     useImperativeHandle(ref, function () { return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current; });
     var handleClearInput = function () {
@@ -58,6 +65,8 @@ export var TextInput = forwardRef(function (_a, ref) {
             inputRef.current.value = "";
         }
     };
-    return (_jsxs("div", { className: "inline-flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [_jsx("input", __assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && (_jsx("div", { className: sectionIconWrapperClassname, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && _jsx("span", { className: "text-error", children: "*" })] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
+    return (_jsxs("div", { className: "inline-flex flex-col ".concat(fullwidth ? "w-full" : ""), children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", __assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && (_jsx("div", { className: endIconWrapperClassname, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                                    "text-input-disable-text": disabled,
+                                }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
 });
 export default TextInput;

package/dist/components/TextInput/TextInput.stories.js

@@ -23,7 +23,7 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--other-bg-2))]", children: _jsx(Story, {}) })); },
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })); },
     ],
 };
 export default meta;
@@ -63,7 +63,8 @@ export var CustomLabel = {
 export var FuctionInput = {
     args: {
         label: "Placeholder Text",
-        disabled: false,
+        value: "dsdsds",
+        disabled: true,
     },
     render: function (args) {
         console.log("args ", args);

package/dist/components/TextInput/TextInput.styles.js

@@ -2,7 +2,7 @@ import { cva } from "class-variance-authority";
 export var inputVariant = cva([
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
-    "peer text-black placeholder:text-transparent bg-transparent caret-primary",
+    "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
 ], {
     variants: {
         size: {
@@ -12,26 +12,39 @@ export var inputVariant = cva([
         },
         rounded: {
             none: "rounded-none",
-            normal: "rounded-xl",
+            normal: "rounded-md",
             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",
+            outline: [
+                "ring-1 ring-inset ring-input-default-stroke",
+                "hover:ring-input-active-stroke",
+                "focus:ring-1 focus:ring-inset focus:ring-input-active-stroke",
+            ],
+            underline: "border-b-2 border-input-default-stroke transition-colors hover:border-input-active-stroke focus:border-input-stroke",
         },
         fullwidth: {
             true: "w-full",
         },
         disabled: {
-            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+            true: [
+                "bg-input-disable-bg text-input-disable-text ring-input-disable-stroke placeholder:text-input-disable-text",
+                "hover:ring-input-disable-stroke",
+            ],
         },
         error: {
-            true: "ring-error focus:ring-error",
+            true: "ring-input-error focus:ring-input-error",
         },
         hasClearIcon: {
             true: "",
         },
+        hasSearchIcon: {
+            false: "",
+        },
+        leftSectionIcon: {
+            false: "",
+        },
         rightSectionIcon: {
             false: "",
         },
@@ -56,6 +69,36 @@ export var inputVariant = cva([
             size: "lg",
             class: "focus:pe-10",
         },
+        {
+            hasSearchIcon: true,
+            size: "sm",
+            class: "ps-6",
+        },
+        {
+            hasSearchIcon: true,
+            size: "md",
+            class: "ps-9",
+        },
+        {
+            hasSearchIcon: true,
+            size: "lg",
+            class: "ps-11",
+        },
+        {
+            leftSectionIcon: true,
+            size: "sm",
+            class: "ps-[38px]",
+        },
+        {
+            leftSectionIcon: true,
+            size: "md",
+            class: "ps-[46px]",
+        },
+        {
+            leftSectionIcon: true,
+            size: "lg",
+            class: "ps-[72px]",
+        },
         {
             rightSectionIcon: true,
             size: "sm",
@@ -80,41 +123,77 @@ export var inputVariant = cva([
         disabled: false,
         error: false,
         hasClearIcon: false,
+        hasSearchIcon: false,
+        leftSectionIcon: false, // TODO function style
         rightSectionIcon: false,
     },
 });
 export var labelVariant = cva([
-    "absolute block duration-450 transition-all px-[2px] text-input-text peer-focus:text-input-text-active peer-focus:bg-input-label-background",
+    "absolute block duration-450 transition-all px-[2px] text-input-default-text",
+    "peer-focus:text-input-filled-text peer-focus:bg-input-label-bg", // TODO bg
 ], {
     variants: {
         size: {
             sm: [
-                "left-3 -top-1.5 typography-label2 bg-input-label-background",
+                "left-3 -top-1.5 typography-label2 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label2",
             ],
             md: [
-                "left-3 -top-1.5 typography-label1 bg-input-label-background",
+                "left-3 -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
             lg: [
-                "left-4 -top-1.5 typography-label1 bg-input-label-background",
+                "left-4 -top-1.5 typography-label1 bg-input-label-bg",
                 "peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1 peer-placeholder-shown:bg-transparent",
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
         disabled: {
-            true: "text-input-text-disabled ring-input-stroke-disabled placeholder:text-input-text-disabled",
+            true: "text-input-default-text placeholder:text-input-default-text",
         },
         error: {
             true: "ring-error",
         },
+        hasSearchIcon: {
+            false: "",
+        },
     },
+    compoundVariants: [
+        {
+            hasSearchIcon: true,
+            size: "sm",
+            className: [
+                "left-6 -top-1.5 typography-label2 bg-input-label-bg",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label2",
+            ],
+        },
+        {
+            hasSearchIcon: true,
+            size: "md",
+            className: [
+                "left-9 -top-1.5 typography-label1 bg-input-label-bg",
+                "peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4 peer-placeholder-shown:bg-transparent",
+                "peer-focus:-top-1.5 peer-focus:typography-label1",
+            ],
+        },
+        {
+            hasSearchIcon: true,
+            size: "lg",
+            className: [
+                "left-11 -top-1.5 typography-label1 bg-input-label-bg",
+                "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,
+        hasSearchIcon: false,
     },
 });
 export var helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
@@ -125,11 +204,11 @@ export var helperTextVariant = cva(["text-small1 flex flex-row items-center gap-
             lg: "mt-[6px]",
         },
         disabled: {
-            true: "text-input-text-disabled",
+            true: "text-input-disable-text",
         },
         error: {
-            true: "text-error",
-            false: "text-input-text",
+            true: "text-input-error",
+            false: "text-input-filled-text",
         },
     },
     defaultVariants: {
@@ -152,7 +231,21 @@ export var iconWrapperVariant = cva([
         size: "md",
     },
 });
-export var iconVariant = cva(["cursor-pointer z-50 fill-input-stroke-active hover:fill-input-text"], {
+export var iconSearchWrapperVariant = cva(["absolute inset-y-0 left-0 items-center justify-center flex"], {
+    variants: {
+        size: {
+            sm: "ml-2",
+            md: "ml-3",
+            lg: "ml-4",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+    },
+});
+export var iconVariant = cva([
+    "cursor-pointer z-50 fill-input-active-stroke hover:fill-input-default-text",
+], {
     variants: {
         size: {
             sm: "size-3",
@@ -165,9 +258,9 @@ export var iconVariant = cva(["cursor-pointer z-50 fill-input-stroke-active hove
     },
 });
 export var sectionIconWrapperVariant = cva([
-    "absolute inset-y-0 right-0 items-center justify-center flex",
-    "border-l border-l-input-stroke peer-hover:border-l-input-active peer-focus:border-l-input-stroke-active peer-disabled:border-l-input-stroke-disabled",
-    "fill-input-text peer-hover:fill-input-text-active peer-focus:fill-input-text-active",
+    "absolute items-center justify-center flex",
+    "border-l border-l-input-default-stroke peer-hover:border-l-input-active-stroke peer-focus:border-l-input-active-stroke peer-disabled:border-l-input-disable-stroke",
+    "fill-input-default-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-disabled:fill-input-disable-stroke",
 ], {
     variants: {
         size: {
@@ -180,9 +273,18 @@ export var sectionIconWrapperVariant = cva([
             normal: "rounded-r-xl",
             full: "rounded-r-full",
         },
+        error: {
+            true: "border-l-input-error",
+        },
+        position: {
+            start: "inset-y-0 left-0 ",
+            end: "inset-y-0 right-0 ",
+        },
     },
     defaultVariants: {
         size: "md",
         rounded: "normal",
+        error: false,
+        position: "end",
     },
 });