@rovula/ui 0.0.17 → 0.0.19

package/dist/cjs/types/components/Calendar/index.d.ts

@@ -0,0 +1 @@
+export { default as Calendar } from "./Calendar";

package/dist/cjs/types/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from "react";
+import { Modifiers } from "react-day-picker";
+type DatePickerProps = {
+    date: Date | undefined;
+    onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: Modifiers, e: React.MouseEvent | React.KeyboardEvent) => void | undefined;
+};
+declare const DatePicker: FC<DatePickerProps>;
+export default DatePicker;

package/dist/cjs/types/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<{
+        date: Date | undefined;
+        onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
+    }>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        date: Date | undefined;
+        onSelect: (selected: Date | undefined, triggerDate: Date, modifiers: import("react-day-picker").Modifiers, e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => void | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/Popover/Popover.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/cjs/types/components/Popover/Popover.stories.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+declare const meta: {
+    title: string;
+    component: React.FC<import("@radix-ui/react-popover").PopoverProps>;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    decorators: ((Story: import("@storybook/types").PartialStoryFn<import("@storybook/react").ReactRenderer, {
+        children?: React.ReactNode;
+        open?: boolean | undefined;
+        defaultOpen?: boolean | undefined;
+        onOpenChange?: ((open: boolean) => void) | undefined;
+        modal?: boolean | undefined;
+    }>) => import("react/jsx-runtime").JSX.Element)[];
+};
+export default meta;
+export declare const Default: {
+    args: {};
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/TextInput/TextInput.stories.d.ts

@@ -349,3 +349,10 @@ export declare const CustomLabel: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const FuctionInput: {
+    args: {
+        label: string;
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/cjs/types/components/TextInput/TextInput.styles.d.ts

@@ -6,6 +6,7 @@ export declare const inputVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
     hasClearIcon?: boolean | null | undefined;
+    rightSectionIcon?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const labelVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
@@ -23,3 +24,7 @@ export declare const iconWrapperVariant: (props?: ({
 export declare const iconVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const sectionIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "normal" | "full" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/cjs/types/index.d.ts

@@ -11,6 +11,9 @@ export { Navbar } from "./components/Navbar";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
+export { Calendar } from "./components/Calendar";
+export { default as DatePicker } from "./components/DatePicker/DatePicker";
+export { Popover, PopoverTrigger, PopoverContent, } from "./components/Popover/Popover";
 export * from "./components/Table/Table";
 export * from "./components/DataTable/DataTable";
 export * from "./components/Dialog/Dialog";

package/dist/components/Calendar/Calendar.js

@@ -0,0 +1,34 @@
+"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 { DayPicker, getDefaultClassNames } from "react-day-picker";
+import "react-day-picker/dist/style.css";
+import { cn } from "@/utils/cn";
+function Calendar(_a) {
+    var className = _a.className, classNames = _a.classNames, _b = _a.showOutsideDays, showOutsideDays = _b === void 0 ? true : _b, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
+    var defaultClassNames = getDefaultClassNames();
+    return (_jsx(DayPicker, __assign({ showOutsideDays: showOutsideDays, captionLayout: "dropdown-years" }, props, { className: cn("bg-[rgb(var(--card))] text-[rgb(var(--card-foreground))] border-[rgb(var(--card))]", className), classNames: __assign(__assign(__assign({}, defaultClassNames), { day_button: cn(defaultClassNames.day_button, "size-9 "), day: "typography-subtitile1 ", today: "text-bold rounded-full [&_button]:!border-primary [&_button]:!border [&_button]:!border-solid", selected: "bg-primary text-primary-foreground rounded-full ", weekdays: "text-gray-400", month_caption: cn(defaultClassNames.month_caption, "h-[54px]"), outside: "text-gray-400", nav: cn(defaultClassNames.nav, "gap-6"), chevron: "fill-primary", root: cn(defaultClassNames.root, "px-6 py-4 "), caption_label: cn(defaultClassNames.caption_label, "gap-2") }), classNames) })));
+}
+Calendar.displayName = "Calendar";
+export default Calendar;

package/dist/components/Calendar/Calendar.stories.js

@@ -0,0 +1,38 @@
+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 React from "react";
+import Calendar from "./Calendar";
+import ThemeToggle from "../ThemeToggle";
+import Button from "../Button/Button";
+// import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+var meta = {
+    title: "Components/Calendar",
+    component: Calendar,
+    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) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        var _a = React.useState(new Date()), date = _a[0], setDate = _a[1];
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(ThemeToggle, {}), _jsx(Button, { children: "Text" }), _jsx(Calendar, { mode: "single", selected: date, onSelect: setDate, className: "rounded-md border" })] }));
+    },
+};

package/dist/components/Calendar/index.js

@@ -0,0 +1 @@
+export { default as Calendar } from "./Calendar";

package/dist/components/DatePicker/DatePicker.js

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

package/dist/components/DatePicker/DatePicker.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 } from "react/jsx-runtime";
+import React from "react";
+import DatePicker from "./DatePicker";
+// import { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+var meta = {
+    title: "Components/DatePicker",
+    component: DatePicker,
+    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) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        var _a = React.useState(undefined), date = _a[0], setDate = _a[1];
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(DatePicker, { date: date, onSelect: setDate }) }));
+    },
+};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,35 @@
+"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 PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "@/utils/cn";
+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)) }));
+});
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/Popover/Popover.stories.js

@@ -0,0 +1,33 @@
+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 { Popover, PopoverTrigger, PopoverContent } from "./Popover";
+var meta = {
+    title: "Components/Popver",
+    component: Popover,
+    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) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsxs(Popover, { children: [_jsx(PopoverTrigger, { children: "Open" }), _jsx(PopoverContent, { children: "Place content for the popover here." })] }) }));
+    },
+};

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, } from "./TextInput.styles";
+import { helperTextVariant, iconVariant, iconWrapperVariant, inputVariant, labelVariant, sectionIconWrapperVariant, } from "./TextInput.styles";
 import { XCircleIcon, ExclamationCircleIcon } 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 inputRef = useRef(null);
     var _id = id || "".concat(type, "-").concat(label, "-input");
+    var hasRightSectionIcon = !!endIcon;
     var inputClassname = inputVariant({
         size: size,
         rounded: rounded,
@@ -36,7 +37,8 @@ export var TextInput = forwardRef(function (_a, ref) {
         fullwidth: fullwidth,
         disabled: disabled,
         error: error,
-        hasClearIcon: hasClearIcon,
+        hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
+        rightSectionIcon: hasRightSectionIcon,
     });
     var labelClassname = labelVariant({
         size: size,
@@ -46,12 +48,16 @@ export var TextInput = forwardRef(function (_a, ref) {
     var helperTextClassname = helperTextVariant({ size: size, error: error, disabled: disabled });
     var iconWrapperClassname = iconWrapperVariant({ size: size });
     var iconClassname = iconVariant({ size: size });
+    var sectionIconWrapperClassname = sectionIconWrapperVariant({
+        size: size,
+        rounded: rounded,
+    });
     useImperativeHandle(ref, function () { return inputRef === null || inputRef === void 0 ? void 0 : inputRef.current; });
     var handleClearInput = function () {
         if (inputRef.current) {
             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 && (_jsx("div", { className: iconWrapperClassname, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), 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: [_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] }))] }));
 });
 export default TextInput;

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

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import TextInput from "./TextInput";
+import { CalendarIcon } from "@heroicons/react/16/solid";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 var meta = {
     title: "Components/TextInput",
@@ -22,7 +23,7 @@ var meta = {
         layout: "fullscreen",
     },
     decorators: [
-        function (Story) { return (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })); },
+        function (Story) { return (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--other-bg-2))]", children: _jsx(Story, {}) })); },
     ],
 };
 export default meta;
@@ -59,3 +60,14 @@ export var CustomLabel = {
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", size: "lg" }, args, { labelClassName: "peer-focus:bg-red-500" })), _jsx(InputWithRef, __assign({ id: "2", size: "md" }, args)), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args))] }));
     },
 };
+export var FuctionInput = {
+    args: {
+        label: "Placeholder Text",
+        disabled: false,
+    },
+    render: function (args) {
+        console.log("args ", args);
+        var props = __assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, __assign({ id: "1", size: "lg" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, __assign({ id: "2", size: "md" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, __assign({ id: "3", size: "sm" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) }))] }));
+    },
+};

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",
+    "peer text-black placeholder:text-transparent bg-transparent caret-primary",
 ], {
     variants: {
         size: {
@@ -32,6 +32,9 @@ export var inputVariant = cva([
         hasClearIcon: {
             true: "",
         },
+        rightSectionIcon: {
+            false: "",
+        },
     },
     compoundVariants: [
         {
@@ -53,6 +56,21 @@ export var inputVariant = cva([
             size: "lg",
             class: "focus:pe-10",
         },
+        {
+            rightSectionIcon: true,
+            size: "sm",
+            class: "pe-[38px]",
+        },
+        {
+            rightSectionIcon: true,
+            size: "md",
+            class: "pe-[46px]",
+        },
+        {
+            rightSectionIcon: true,
+            size: "lg",
+            class: "pe-[72px]",
+        },
     ],
     defaultVariants: {
         size: "md",
@@ -62,6 +80,7 @@ export var inputVariant = cva([
         disabled: false,
         error: false,
         hasClearIcon: false,
+        rightSectionIcon: false,
     },
 });
 export var labelVariant = cva([
@@ -145,3 +164,25 @@ export var iconVariant = cva(["cursor-pointer z-50 fill-input-stroke-active hove
         size: "md",
     },
 });
+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",
+], {
+    variants: {
+        size: {
+            sm: "p-1 size-[30px]",
+            md: "p-2 size-[38px]",
+            lg: "p-3 size-14",
+        },
+        rounded: {
+            none: "rounded-r-none",
+            normal: "rounded-r-xl",
+            full: "rounded-r-full",
+        },
+    },
+    defaultVariants: {
+        size: "md",
+        rounded: "normal",
+    },
+});