@rovula/ui 0.0.67 → 0.0.69

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

@@ -359,10 +359,12 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

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

@@ -349,10 +349,12 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

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

@@ -310,11 +310,13 @@ declare const meta: {
         required?: boolean | undefined;
         src?: string | undefined | undefined;
         label?: string | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         modal?: boolean | undefined;
         optionContainerClassName?: string | undefined;

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

@@ -5,6 +5,7 @@ export type InputProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -22,6 +23,7 @@ export type InputProps = {
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 export declare const TextInput: React.ForwardRefExoticComponent<{
@@ -30,6 +32,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -47,6 +50,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

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

@@ -7,6 +7,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg";
         rounded?: "none" | "normal" | "full";
         variant?: "flat" | "outline" | "underline";
+        iconMode?: "flat" | "solid";
         type?: React.HTMLInputTypeAttribute;
         helperText?: string;
         errorMessage?: string;
@@ -24,6 +25,7 @@ declare const meta: {
         labelClassName?: string;
         onClickStartIcon?: () => void;
         onClickEndIcon?: () => void;
+        renderStartIcon?: () => React.ReactNode;
         renderEndIcon?: () => React.ReactNode;
     } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
@@ -36,6 +38,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         variant?: "flat" | "outline" | "underline" | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         type?: React.HTMLInputTypeAttribute | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
@@ -53,6 +56,7 @@ declare const meta: {
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
@@ -371,3 +375,10 @@ export declare const FuctionInput: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const CustomIcon: {
+    args: {
+        label: string;
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -15,6 +15,7 @@ export declare const labelVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
     hasSearchIcon?: boolean | null | undefined;
+    hasLeftSectionIcon?: boolean | null | undefined;
     isFloatingLabel?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const helperTextVariant: (props?: ({

package/dist/cjs/types/components/Toast/useToast.d.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { ToastActionElement, ToastProps } from "./Toast";
+import { IconProps } from "../Icon/Icon";
 type ToasterToast = ToastProps & {
     id: string;
     title?: React.ReactNode;
@@ -7,6 +8,8 @@ type ToasterToast = ToastProps & {
     action?: ToastActionElement;
     contentMode?: "vertical" | "horizontal";
     onClose?: () => void;
+    iconProps?: IconProps;
+    renderIcon?: () => React.ReactElement;
 };
 type ToasterPosition = "top-center" | "top-left" | "top-right" | "bottom-center" | "bottom-left" | "bottom-right" | undefined;
 declare const actionTypes: {

package/dist/components/TextInput/TextInput.js

@@ -10,16 +10,16 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, } from "react";
 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 const TextInput = forwardRef((_a, ref) => {
-    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickEndIcon, renderEndIcon } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickEndIcon", "renderEndIcon"]);
+    var { id, label, size = "md", rounded = "normal", variant = "outline", type = "text", iconMode = "solid", helperText, errorMessage, fullwidth = true, disabled = false, error = false, required = true, isFloatingLabel = true, keepCloseIconOnValue = false, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
-    const hasLeftSectionIcon = !!startIcon;
-    const hasRightSectionIcon = !!endIcon;
+    const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
+    const hasRightSectionIcon = !!endIcon || !!renderEndIcon;
     const inputClassname = inputVariant({
         size,
         rounded,
@@ -27,27 +27,35 @@ export const TextInput = forwardRef((_a, ref) => {
         fullwidth,
         disabled,
         error,
-        hasSearchIcon,
-        hasClearIcon: hasRightSectionIcon ? false : hasClearIcon,
-        leftSectionIcon: hasLeftSectionIcon,
-        rightSectionIcon: hasRightSectionIcon,
+        hasSearchIcon: (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
+        hasClearIcon: (iconMode === "flat" && hasRightSectionIcon) || hasClearIcon,
+        leftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
+        rightSectionIcon: iconMode === "solid" ? hasRightSectionIcon : false,
     });
     const labelClassname = labelVariant({
         size,
         disabled,
         error,
-        hasSearchIcon,
+        hasSearchIcon: (iconMode === "flat" && hasLeftSectionIcon) || hasSearchIcon,
+        hasLeftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
         isFloatingLabel,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
     const iconSearchWrapperClassname = iconSearchWrapperVariant({ size });
     const iconClassname = iconVariant({ size });
-    // TODO startIcon
+    // TODO wait for clearify aboutm start,end, search and clearIcon with iconMode
+    const startIconWrapperClassname = sectionIconWrapperVariant({
+        size,
+        rounded,
+        error,
+        position: "start",
+    });
     const endIconWrapperClassname = sectionIconWrapperVariant({
         size,
         rounded,
         error,
+        position: "end",
     });
     useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
     const handleClearInput = useCallback(() => {
@@ -59,7 +67,14 @@ export const TextInput = forwardRef((_a, ref) => {
             }
         }
     }, [props.onChange]);
-    // TODO startIcon
+    const handleOnClickLeftSectionIcon = useCallback(() => {
+        if (disabled)
+            return;
+        onClickStartIcon === null || onClickStartIcon === void 0 ? void 0 : onClickStartIcon();
+        if (inputRef.current) {
+            inputRef.current.focus();
+        }
+    }, [disabled, onClickStartIcon]);
     const handleOnClickRightSectionIcon = useCallback(() => {
         if (disabled)
             return;
@@ -68,10 +83,47 @@ export const TextInput = forwardRef((_a, ref) => {
             inputRef.current.focus();
         }
     }, [disabled, onClickEndIcon]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
+    const startIconElement = useMemo(() => {
+        if (!hasLeftSectionIcon)
+            return;
+        if (renderStartIcon)
+            return renderStartIcon();
+        if (iconMode === "flat") {
+            return (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx("div", { className: iconClassname, onClick: handleOnClickLeftSectionIcon, children: startIcon }) }));
+        }
+        return (_jsx("div", { className: startIconWrapperClassname, onClick: handleOnClickLeftSectionIcon, children: startIcon }));
+    }, [
+        hasLeftSectionIcon,
+        startIcon,
+        iconMode,
+        iconSearchWrapperClassname,
+        startIconWrapperClassname,
+        iconClassname,
+        renderStartIcon,
+        handleOnClickLeftSectionIcon,
+    ]);
+    const endIconElement = useMemo(() => {
+        if (!hasRightSectionIcon)
+            return;
+        if (renderEndIcon)
+            return renderEndIcon();
+        if (iconMode === "flat") {
+            return (_jsx("div", { className: cn(iconWrapperClassname, "flex"), children: _jsx("div", { className: iconClassname, onClick: handleOnClickRightSectionIcon, children: endIcon }) }));
+        }
+        return (_jsx("div", { className: endIconWrapperClassname, onClick: handleOnClickRightSectionIcon, children: endIcon }));
+    }, [
+        hasRightSectionIcon,
+        endIcon,
+        iconMode,
+        iconSearchWrapperClassname,
+        endIconWrapperClassname,
+        iconClassname,
+        renderEndIcon,
+        handleOnClickRightSectionIcon,
+    ]);
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: iconSearchWrapperClassname, children: _jsx(MagnifyingGlassIcon, { className: iconClassname }) })), _jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: iconWrapperClassname, style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
-                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon &&
-                        (renderEndIcon ? (renderEndIcon()) : (_jsx("div", { className: endIconWrapperClassname, onClick: handleOnClickRightSectionIcon, children: endIcon }))), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                        }, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), endIconElement, _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("span", { className: "h-full", children: _jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }) }), errorMessage || helperText] }))] }));
 });

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

@@ -2,6 +2,7 @@ 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";
+import Icon from "../Icon/Icon";
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
     title: "Components/TextInput",
@@ -61,3 +62,17 @@ export const FuctionInput = {
         return (_jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "2", size: "md" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "3", size: "sm" }, args, { endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) }))] }));
     },
 };
+export const CustomIcon = {
+    args: {
+        label: "Placeholder Text",
+        // value: "",
+        disabled: true,
+    },
+    render: (args) => {
+        console.log("args ", args);
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-col gap-4 w-full", children: [_jsx("div", { children: _jsx("h4", { children: "Icon mode: solid:" }) }), _jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args, { startIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }), endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "2", size: "md" }, args, { startIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }), endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "3", size: "sm" }, args, { startIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }), endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) }))] }), _jsx("div", { children: _jsx("h4", { children: "Icon mode: flat:" }) }), _jsxs("div", { className: "flex flex-row gap-4 w-full", children: [_jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args, { iconMode: "flat", startIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }), endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "2", size: "md" }, args, { iconMode: "flat", startIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }), endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) })), _jsx(TextInput, Object.assign({ id: "3", size: "sm" }, args, { iconMode: "flat", startIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }), endIcon: _jsx(CalendarIcon, { className: "size-full", fill: "inherit" }) }))] }), _jsx(TextInput, Object.assign({ id: "1", size: "lg" }, args, { iconMode: "flat", startIcon: _jsx(Icon, { name: "magnifying-glass", fill: "inherit" }), 
+                    // <MagnifyingGlassIcon className="size-full" fill="inherit" />
+                    hasClearIcon: true }))] }));
+    },
+};

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

@@ -148,6 +148,9 @@ export const labelVariant = cva([
         hasSearchIcon: {
             false: "",
         },
+        hasLeftSectionIcon: {
+            false: "",
+        },
         isFloatingLabel: {
             false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
         },
@@ -260,12 +263,69 @@ export const labelVariant = cva([
                 "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
             ],
         },
+        // -------- hasLeftSectionIcon ------
+        {
+            isFloatingLabel: true,
+            hasLeftSectionIcon: true,
+            size: "sm",
+            className: [
+                "left-[38px] -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",
+            ],
+        },
+        {
+            isFloatingLabel: true,
+            hasLeftSectionIcon: true,
+            size: "md",
+            className: [
+                "left-[46px] -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",
+            ],
+        },
+        {
+            isFloatingLabel: true,
+            hasLeftSectionIcon: true,
+            size: "lg",
+            className: [
+                "left-[72px] -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",
+            ],
+        },
+        // floating = false and has search icon
+        {
+            isFloatingLabel: false,
+            hasLeftSectionIcon: true,
+            size: "sm",
+            className: [
+                "left-[38px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            hasLeftSectionIcon: true,
+            size: "md",
+            className: [
+                "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            hasLeftSectionIcon: true,
+            size: "lg",
+            className: [
+                "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
+        },
     ],
     defaultVariants: {
         size: "md",
         disabled: false,
         error: false,
         hasSearchIcon: false,
+        hasLeftSectionIcon: false,
         isFloatingLabel: true,
     },
 });
@@ -333,7 +393,6 @@ export const iconVariant = cva([
 export const sectionIconWrapperVariant = cva([
     "cursor-pointer",
     "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: {
@@ -343,18 +402,68 @@ export const sectionIconWrapperVariant = cva([
             lg: "p-3 size-14",
         },
         rounded: {
-            none: "rounded-r-none",
-            normal: "rounded-r-xl",
-            full: "rounded-r-full",
+            none: "",
+            normal: "",
+            full: "",
         },
         error: {
-            true: "border-l-input-error",
+            false: "",
         },
         position: {
-            start: "inset-y-0 left-0 ",
-            end: "inset-y-0 right-0 ",
+            start: [
+                "inset-y-0 left-0 ",
+                "border-r border-r-input-default-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
+            ],
+            end: [
+                "inset-y-0 right-0 ",
+                "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",
+            ],
         },
     },
+    compoundVariants: [
+        // --- start rounded ---
+        {
+            position: "start",
+            rounded: "none",
+            className: "rounded-l-none",
+        },
+        {
+            position: "start",
+            rounded: "normal",
+            className: "rounded-l-xl",
+        },
+        {
+            position: "start",
+            rounded: "full",
+            className: "rounded-l-full",
+        },
+        {
+            position: "end",
+            rounded: "none",
+            className: "rounded-r-none",
+        },
+        {
+            position: "end",
+            rounded: "normal",
+            className: "rounded-r-xl",
+        },
+        {
+            position: "end",
+            rounded: "full",
+            className: "rounded-r-full",
+        },
+        // --- Error start ---
+        {
+            position: "start",
+            error: true,
+            className: "border-r-input-error",
+        },
+        {
+            position: "end",
+            error: true,
+            className: "border-l-input-error",
+        },
+    ],
     defaultVariants: {
         size: "md",
         rounded: "normal",

package/dist/components/Toast/Toast.js

@@ -46,7 +46,7 @@ const ToastTitle = React.forwardRef((_a, ref) => {
 ToastTitle.displayName = ToastPrimitives.Title.displayName;
 const ToastDescription = React.forwardRef((_a, ref) => {
     var { className } = _a, props = __rest(_a, ["className"]);
-    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile5 text-input-default-tex", className) }, props)));
+    return (_jsx(ToastPrimitives.Description, Object.assign({ ref: ref, className: cn("typography-subtitile5 text-input-default-text", className) }, props)));
 });
 ToastDescription.displayName = ToastPrimitives.Description.displayName;
 export { ToastProvider, ToastViewport, Toast, ToastTitle, ToastDescription, ToastClose, ToastAction, };

package/dist/components/Toast/Toaster.js

@@ -20,7 +20,7 @@ export function Toaster(_a) {
     var { viewportClassName, titleClassName, descriptionClassName, contentClassName, iconWrapperClassName, actionWrapperClassName } = _a, toastProviderProps = __rest(_a, ["viewportClassName", "titleClassName", "descriptionClassName", "contentClassName", "iconWrapperClassName", "actionWrapperClassName"]);
     const { toasts, position } = useToast();
     return (_jsxs(ToastProvider, Object.assign({}, toastProviderProps, { children: [toasts.map(function (_a) {
-                var { id, title, description, action, contentMode = "horizontal" } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode"]);
-                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: _jsx(Icon, { type: "heroicons", name: "check-circle", className: "size-6" }) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: titleClassName, children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
+                var { id, title, description, action, contentMode = "horizontal", iconProps, renderIcon } = _a, props = __rest(_a, ["id", "title", "description", "action", "contentMode", "iconProps", "renderIcon"]);
+                return (_jsxs(Toast, Object.assign({}, props, { children: [_jsx("div", { className: cn(toastIconVariants({ variant: props.variant }), iconWrapperClassName), children: renderIcon ? (renderIcon === null || renderIcon === void 0 ? void 0 : renderIcon()) : (_jsx(Icon, Object.assign({ type: "heroicons", name: "check-circle", className: "size-6" }, iconProps))) }), _jsxs("div", { className: cn(toastContentVariants({ contentMode }), contentClassName), children: [title && (_jsx(ToastTitle, { className: titleClassName, children: title })), description && (_jsx(ToastDescription, { className: descriptionClassName, children: description }))] }), _jsx("div", { className: cn("self-center ml-[var(--spacing-spacing-xl)]", actionWrapperClassName), children: action }), _jsx(ToastClose, {})] }), id));
             }), _jsx(ToastViewport, { position: position, className: viewportClassName })] })));
 }

package/dist/esm/bundle.css

@@ -617,9 +617,18 @@ input[type=number] {
 .left-9{
   left: 2.25rem;
 }
+.left-\[38px\]{
+  left: 38px;
+}
+.left-\[46px\]{
+  left: 46px;
+}
 .left-\[50\%\]{
   left: 50%;
 }
+.left-\[72px\]{
+  left: 72px;
+}
 .right-0{
   right: 0px;
 }
@@ -1200,6 +1209,18 @@ input[type=number] {
 .rounded-xs{
   border-radius: var(--radius-radius-xs);
 }
+.rounded-l-full{
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+.rounded-l-none{
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+.rounded-l-xl{
+  border-top-left-radius: var(--radius-radius-xl);
+  border-bottom-left-radius: var(--radius-radius-xl);
+}
 .rounded-r-full{
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -1236,6 +1257,9 @@ input[type=number] {
 .border-l{
   border-left-width: 1px;
 }
+.border-r{
+  border-right-width: 1px;
+}
 .border-t{
   border-top-width: 1px;
 }
@@ -1447,6 +1471,14 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.border-r-input-default-stroke{
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+.border-r-input-error{
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
 .border-t-secondary{
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -5116,6 +5148,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.peer:hover ~ .peer-hover\:border-r-input-active-stroke{
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
 .peer:hover ~ .peer-hover\:fill-input-filled-text{
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
@@ -5138,6 +5174,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.peer:focus ~ .peer-focus\:border-r-input-active-stroke{
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
 .peer:focus ~ .peer-focus\:bg-input-label-bg{
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -5182,6 +5222,10 @@ input[type=number] {
   --tw-border-opacity: 1;
   border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
+.peer:disabled ~ .peer-disabled\:border-r-input-disable-stroke{
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
 .peer:disabled ~ .peer-disabled\:fill-input-disable-stroke{
   fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }