@rovula/ui 0.0.68 → 0.0.70

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/FocusedScrollView/FocusedScrollView.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactNode, HTMLAttributes } from "react";
+type ScrollAlign = "start" | "center" | "end";
+type FocusedScrollViewProps = {
+    selectedKey?: string;
+    children: ReactNode;
+    direction?: "vertical" | "horizontal";
+    className?: string;
+    containerProps?: HTMLAttributes<HTMLDivElement>;
+    scrollAlign?: ScrollAlign;
+};
+export declare const FocusedScrollView: React.FC<FocusedScrollViewProps>;
+export {};

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

@@ -0,0 +1,7 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { FocusedScrollView } from "./FocusedScrollView";
+declare const meta: Meta<typeof FocusedScrollView>;
+export default meta;
+type Story = StoryObj<typeof FocusedScrollView>;
+export declare const VerticalScroll: Story;
+export declare const HorizontalScroll: Story;

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/index.d.ts

@@ -33,6 +33,7 @@ export * from "./components/Toast/Toast";
 export * from "./components/Toast/Toaster";
 export * from "./components/Toast/useToast";
 export * from "./components/Tree";
+export * from "./components/FocusedScrollView/FocusedScrollView";
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";

package/dist/components/FocusedScrollView/FocusedScrollView.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, cloneElement, isValidElement, } from "react";
+export const FocusedScrollView = ({ selectedKey, children, direction = "vertical", className, containerProps, scrollAlign = "center", }) => {
+    const containerRef = useRef(null);
+    const itemRefs = useRef({});
+    const scrollToItem = (key) => {
+        const container = containerRef.current;
+        const item = itemRefs.current[key];
+        if (container && item) {
+            if (direction === "vertical") {
+                const containerTop = container.getBoundingClientRect().top;
+                const itemTop = item.getBoundingClientRect().top;
+                const offset = itemTop - containerTop + container.scrollTop;
+                const containerHeight = container.clientHeight;
+                const itemHeight = item.offsetHeight;
+                let targetTop = offset;
+                if (scrollAlign === "center") {
+                    targetTop = offset - (containerHeight / 2 - itemHeight / 2);
+                }
+                else if (scrollAlign === "end") {
+                    targetTop = offset + (itemHeight - containerHeight);
+                }
+                container.scrollTo({
+                    top: targetTop,
+                    behavior: "smooth",
+                });
+            }
+            else if (direction === "horizontal") {
+                const containerLeft = container.getBoundingClientRect().left;
+                const itemLeft = item.getBoundingClientRect().left;
+                const offset = itemLeft - containerLeft + container.scrollLeft;
+                const containerWidth = container.clientWidth;
+                const itemWidth = item.offsetWidth;
+                let targetLeft = offset;
+                if (scrollAlign === "center") {
+                    targetLeft = offset - (containerWidth / 2 - itemWidth / 2);
+                }
+                else if (scrollAlign === "end") {
+                    targetLeft = offset + (itemWidth - containerWidth);
+                }
+                container.scrollTo({
+                    left: targetLeft,
+                    behavior: "smooth",
+                });
+            }
+        }
+    };
+    useEffect(() => {
+        if (selectedKey) {
+            scrollToItem(selectedKey);
+        }
+    }, [selectedKey, direction, scrollAlign]);
+    const enhancedChildren = Array.isArray(children)
+        ? children.map((child) => {
+            if (isValidElement(child) && child.key) {
+                return cloneElement(child, {
+                    // @ts-ignore
+                    ref: (el) => {
+                        itemRefs.current[String(child.key)] = el;
+                    },
+                });
+            }
+            return child;
+        })
+        : children;
+    return (_jsx("div", Object.assign({ ref: containerRef, className: `overflow-auto ${direction === "vertical" ? "max-h-60" : "max-w-full whitespace-nowrap"} ${className !== null && className !== void 0 ? className : ""}` }, containerProps, { children: enhancedChildren })));
+};

package/dist/components/FocusedScrollView/FocusedScrollView.stories.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { FocusedScrollView } from "./FocusedScrollView";
+const meta = {
+    title: "Components/FocusedScrollView",
+    component: FocusedScrollView,
+    args: {
+        direction: "vertical",
+        scrollAlign: "center",
+        className: "border border-input-default-stroke rounded",
+    },
+};
+export default meta;
+const items = Array.from({ length: 30 }, (_, i) => `Item ${i + 1}`);
+export const VerticalScroll = {
+    render: (args) => {
+        const [selected, setSelected] = useState("item-5");
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-20"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 20" }), _jsx("button", { onClick: () => setSelected("item-29"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 30" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `px-4 py-2 ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-secondary-foreground"
+                            : "bg-white"}`, children: item }, `item-${index + 1}`))) }))] }));
+    },
+};
+export const HorizontalScroll = {
+    args: {
+        direction: "horizontal",
+    },
+    render: (args) => {
+        const [selected, setSelected] = useState("item-15");
+        return (_jsxs("div", { className: "p-6 space-y-4", children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setSelected("item-5"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 5" }), _jsx("button", { onClick: () => setSelected("item-15"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 15" }), _jsx("button", { onClick: () => setSelected("item-25"), className: "px-3 py-1 bg-primary text-white rounded", children: "Scroll to Item 25" })] }), _jsx(FocusedScrollView, Object.assign({}, args, { selectedKey: selected, children: items.map((item, index) => (_jsx("div", { className: `inline-block w-28 h-12 mx-2 text-center leading-[3rem] rounded ${selected === `item-${index + 1}`
+                            ? "bg-secondary text-secondary-foreground"
+                            : "bg-gray-200"}`, children: item }, `item-${index + 1}`))) }))] }));
+    },
+};

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",