@rovula/ui 0.1.1 → 0.1.2

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

@@ -364,6 +364,7 @@ declare const meta: {
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

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

@@ -351,6 +351,7 @@ declare const meta: {
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

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

@@ -46,6 +46,7 @@ export declare const MaskedTextInput: React.ForwardRefExoticComponent<{
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: React.ReactNode;

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

@@ -17,6 +17,7 @@ declare const meta: {
         required?: boolean;
         isFloatingLabel?: boolean;
         keepCloseIconOnValue?: boolean;
+        keepFooterSpace?: boolean;
         hasClearIcon?: boolean;
         hasSearchIcon?: boolean;
         startIcon?: React.ReactNode;
@@ -63,6 +64,7 @@ declare const meta: {
         required?: boolean | undefined;
         isFloatingLabel?: boolean | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         hasClearIcon?: boolean | undefined;
         hasSearchIcon?: boolean | undefined;
         startIcon?: React.ReactNode;

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

@@ -320,6 +320,7 @@ declare const meta: {
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

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

@@ -345,6 +345,7 @@ declare const meta: {
         src?: string | undefined | undefined;
         iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         labelClassName?: string | undefined;
         classes?: {
             iconWrapper?: string;

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

@@ -15,6 +15,7 @@ export type InputProps = {
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;
@@ -49,6 +50,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;

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

@@ -17,6 +17,7 @@ declare const meta: {
         required?: boolean;
         isFloatingLabel?: boolean;
         keepCloseIconOnValue?: boolean;
+        keepFooterSpace?: boolean;
         hasClearIcon?: boolean;
         hasSearchIcon?: boolean;
         startIcon?: React.ReactNode;
@@ -55,6 +56,7 @@ declare const meta: {
         required?: boolean | undefined;
         isFloatingLabel?: boolean | undefined;
         keepCloseIconOnValue?: boolean | undefined;
+        keepFooterSpace?: boolean | undefined;
         hasClearIcon?: boolean | undefined;
         hasSearchIcon?: boolean | undefined;
         startIcon?: React.ReactNode;
@@ -396,3 +398,11 @@ export declare const CustomIcon: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const KeepFooterSpace: {
+    args: {
+        label: string;
+        fullwidth: boolean;
+        keepFooterSpace: boolean;
+    };
+    render: () => import("react/jsx-runtime").JSX.Element;
+};

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

@@ -23,6 +23,21 @@ export declare const helperTextVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const inlineEndIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const inlineStartIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const iconActionVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
+export declare const segmentedIconWrapperVariant: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    rounded?: "none" | "normal" | "full" | null | undefined;
+    error?: boolean | null | undefined;
+    position?: "end" | "start" | null | undefined;
+} & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const iconWrapperVariant: (props?: ({
     size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/dist/components/PasswordInput/PasswordInput.js

@@ -28,8 +28,8 @@ export const PasswordInput = forwardRef((_a, ref) => {
         onClickEndIcon === null || onClickEndIcon === void 0 ? void 0 : onClickEndIcon();
     };
     const toggleIcon = visible
-        ? showIcon !== null && showIcon !== void 0 ? showIcon : _jsx(Icon, { name: "eye", type: "lucide", size: "inherit", className: "size-full", "aria-label": "Hide password" })
-        : hideIcon !== null && hideIcon !== void 0 ? hideIcon : _jsx(Icon, { name: "eye-closed", type: "lucide", size: "inherit", className: "size-full", "aria-label": "Show password" });
+        ? showIcon !== null && showIcon !== void 0 ? showIcon : _jsx(Icon, { name: "eye", type: "lucide", size: "inherit", className: "size-full stroke-input-default-stroke hover:stroke-input-active-stroke", "aria-label": "Hide password" })
+        : hideIcon !== null && hideIcon !== void 0 ? hideIcon : _jsx(Icon, { name: "eye-closed", type: "lucide", size: "inherit", className: "size-full stroke-input-default-stroke hover:stroke-input-active-stroke", "aria-label": "Show password" });
     return (_jsx(TextInput, Object.assign({ iconMode: "flat" }, props, { ref: inputRef, type: visible ? "text" : "password", hasClearIcon: hasClearIcon, endIcon: showToggle ? toggleIcon : endIcon, renderEndIcon: renderEndIcon, onClickEndIcon: showToggle ? handleToggleVisibility : onClickEndIcon, autoComplete: (_b = props.autoComplete) !== null && _b !== void 0 ? _b : "current-password" })));
 });
 PasswordInput.displayName = "PasswordInput";

package/dist/components/TextArea/TextArea.styles.js

@@ -184,7 +184,7 @@ export const clearIconVariant = cva([
         size: "md",
     },
 });
-export const helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
+export const helperTextVariant = cva(["typography-small1 flex flex-row items-center gap-1"], {
     variants: {
         size: {
             sm: "mt-1",

package/dist/components/TextInput/TextInput.js

@@ -11,11 +11,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 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 { helperTextVariant, iconActionVariant, inlineEndIconWrapperVariant, inlineStartIconWrapperVariant, inputVariant, labelVariant, segmentedIconWrapperVariant, } from "./TextInput.styles";
+import { CircleAlert, CircleX, Search, } from "lucide-react";
 import { cn } from "@/utils/cn";
 export const TextInput = forwardRef((_a, ref) => {
-    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, classes } = _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", "classes"]);
+    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, keepFooterSpace = true, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName, onClickStartIcon, onClickEndIcon, renderStartIcon, renderEndIcon, classes } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "iconMode", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "isFloatingLabel", "keepCloseIconOnValue", "keepFooterSpace", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName", "onClickStartIcon", "onClickEndIcon", "renderStartIcon", "renderEndIcon", "classes"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     const hasLeftSectionIcon = !!startIcon || !!renderStartIcon;
@@ -40,18 +40,24 @@ export const TextInput = forwardRef((_a, ref) => {
         hasLeftSectionIcon: iconMode === "solid" ? hasLeftSectionIcon : false,
         isFloatingLabel,
     });
-    const helperTextClassname = helperTextVariant({ size, error, disabled });
-    const iconWrapperClassname = iconWrapperVariant({ size });
-    const iconSearchWrapperClassname = iconSearchWrapperVariant({ size });
-    const iconClassname = iconVariant({ size });
+    const helperTextClassname = helperTextVariant({
+        size,
+        error,
+        disabled,
+    });
+    const inlineEndIconWrapperClassname = inlineEndIconWrapperVariant({ size });
+    const inlineStartIconWrapperClassname = inlineStartIconWrapperVariant({
+        size,
+    });
+    const iconActionClassname = iconActionVariant({ size });
     // TODO wait for clearify aboutm start,end, search and clearIcon with iconMode
-    const startIconWrapperClassname = sectionIconWrapperVariant({
+    const startSegmentIconWrapperClassname = segmentedIconWrapperVariant({
         size,
         rounded,
         error,
         position: "start",
     });
-    const endIconWrapperClassname = sectionIconWrapperVariant({
+    const endSegmentIconWrapperClassname = segmentedIconWrapperVariant({
         size,
         rounded,
         error,
@@ -87,19 +93,19 @@ export const TextInput = forwardRef((_a, ref) => {
         if (!hasLeftSectionIcon)
             return;
         if (renderStartIcon) {
-            return (_jsx("div", { className: cn(iconSearchWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: renderStartIcon() }));
+            return (_jsx("div", { className: cn(inlineStartIconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: renderStartIcon() }));
         }
         if (iconMode === "flat") {
-            return (_jsx("div", { className: cn(iconSearchWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx("div", { className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onClick: handleOnClickLeftSectionIcon, children: startIcon }) }));
+            return (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx("div", { className: cn(iconActionClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onClick: handleOnClickLeftSectionIcon, children: startIcon }) }));
         }
-        return (_jsx("div", { className: cn(startIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.startIconWrapper), onClick: handleOnClickLeftSectionIcon, children: startIcon }));
+        return (_jsx("div", { className: cn(startSegmentIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.startIconWrapper), onClick: handleOnClickLeftSectionIcon, children: startIcon }));
     }, [
         hasLeftSectionIcon,
         startIcon,
         iconMode,
-        iconSearchWrapperClassname,
-        startIconWrapperClassname,
-        iconClassname,
+        inlineStartIconWrapperClassname,
+        startSegmentIconWrapperClassname,
+        iconActionClassname,
         renderStartIcon,
         handleOnClickLeftSectionIcon,
     ]);
@@ -107,26 +113,29 @@ export const TextInput = forwardRef((_a, ref) => {
         if (!hasRightSectionIcon)
             return;
         if (renderEndIcon) {
-            return (_jsx("div", { className: cn(iconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconWrapper), children: renderEndIcon() }));
+            return (_jsx("div", { className: cn(inlineEndIconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconWrapper), children: renderEndIcon() }));
         }
         if (iconMode === "flat") {
-            return (_jsx("div", { className: cn(iconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconWrapper), children: _jsx("div", { className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onClick: handleOnClickRightSectionIcon, children: endIcon }) }));
+            return (_jsx("div", { className: cn(inlineEndIconWrapperClassname, "flex", classes === null || classes === void 0 ? void 0 : classes.iconWrapper), children: _jsx("div", { className: cn(iconActionClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onClick: handleOnClickRightSectionIcon, children: endIcon }) }));
         }
-        return (_jsx("div", { className: cn(endIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.endIconWrapper), onClick: handleOnClickRightSectionIcon, children: endIcon }));
+        return (_jsx("div", { className: cn(endSegmentIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.endIconWrapper), onClick: handleOnClickRightSectionIcon, children: endIcon }));
     }, [
         hasRightSectionIcon,
         endIcon,
         iconMode,
-        iconSearchWrapperClassname,
-        endIconWrapperClassname,
-        iconClassname,
+        inlineEndIconWrapperClassname,
+        endSegmentIconWrapperClassname,
+        iconActionClassname,
         renderEndIcon,
         handleOnClickRightSectionIcon,
     ]);
-    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(iconSearchWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(MagnifyingGlassIcon, { className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), _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: cn(iconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
+    return (_jsxs("div", { className: `inline-flex flex-col ${fullwidth ? "w-full" : ""}`, children: [_jsxs("div", { className: "relative", children: [_jsx("input", Object.assign({}, props, { placeholder: " ", ref: inputRef, type: type, id: _id, disabled: disabled, className: cn(inputClassname, props.className) })), hasSearchIcon && !hasLeftSectionIcon && (_jsx("div", { className: cn(inlineStartIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconSearchWrapper), children: _jsx(Search, { className: cn(iconActionClassname, classes === null || classes === void 0 ? void 0 : classes.icon) }) })), startIconElement, hasClearIcon && !hasRightSectionIcon && (_jsx("div", { className: cn(inlineEndIconWrapperClassname, classes === null || classes === void 0 ? void 0 : classes.iconWrapper), style: {
                             display: keepCloseIconOnValue && props.value ? "flex" : undefined,
-                        }, children: _jsx(XCircleIcon, { type: "button", className: cn(iconClassname, classes === null || classes === void 0 ? void 0 : classes.icon), onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+                        }, children: _jsx(CircleX, { className: cn(iconActionClassname, 
+                            // 'fill-none stroke-current',
+                            // "fill-none stroke-input-default-text hover:stroke-input-filled-text active:stroke-input-filled-text",
+                            classes === null || classes === void 0 ? void 0 : classes.icon), onMouseDown: handleClearInput }) })), endIconElement, _jsxs("label", { htmlFor: _id, className: cn(labelClassname), children: [label, " ", required && (_jsx("span", { className: cn("text-input-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] }))] }));
+                                }), children: "*" }))] })] }), (errorMessage || helperText || keepFooterSpace) && (_jsxs("span", { className: helperTextClassname, children: [(errorMessage || helperText) && (_jsx("span", { className: "h-full shrink-0", children: _jsx(CircleAlert, { width: 14, height: 14, className: cn("fill-none", error ? "stroke-input-error" : "stroke-input-filled-text") }) })), keepFooterSpace && !error && !helperText && (_jsx("span", { className: "block min-h-[14px]", "aria-hidden": true })), (error ? errorMessage : helperText) || ''] }))] }));
 });
 export default TextInput;

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import TextInput from "./TextInput";
 import { CalendarIcon } from "@heroicons/react/16/solid";
 import Icon from "../Icon/Icon";
@@ -13,7 +13,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))] ", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex h-full w-full bg-[var(--base-color-popup)] ", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -76,3 +76,15 @@ export const CustomIcon = {
                     hasClearIcon: true }))] }));
     },
 };
+const KeepFooterSpaceDemo = () => {
+    const [hasError, setHasError] = useState(false);
+    return (_jsxs("div", { className: "flex flex-col gap-8 w-full max-w-md", children: [_jsxs("p", { className: "text-sm text-text-grey-dark", children: ["Use ", _jsx("code", { children: "keepFooterSpace" }), " to always reserve space for the footer/helper area, preventing layout shift when an error or helper text is shown or hidden."] }), _jsxs("div", { className: "flex flex-col gap-4", children: [_jsxs("label", { className: "flex items-center gap-2 cursor-pointer", children: [_jsx("input", { type: "checkbox", checked: hasError, onChange: (e) => setHasError(e.target.checked) }), "Show error message"] }), _jsxs("div", { className: "flex flex-col", children: [_jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "With keepFooterSpace (layout stays stable)" }), _jsx(TextInput, { id: "with-keep", label: "Email", keepFooterSpace: true, error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsxs("div", { children: [_jsx("h4", { className: "text-sm font-medium mb-2 text-text-grey-dark", children: "Without keepFooterSpace (layout shifts when error appears)" }), _jsx(TextInput, { id: "no-keep", label: "Email", error: hasError, errorMessage: hasError ? "Please enter a valid email address" : undefined })] }), _jsx("div", {})] })] })] }));
+};
+export const KeepFooterSpace = {
+    args: {
+        label: "Email",
+        fullwidth: true,
+        keepFooterSpace: true,
+    },
+    render: () => _jsx(KeepFooterSpaceDemo, {}),
+};

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

@@ -35,7 +35,7 @@ export const inputVariant = cva([
             ],
         },
         error: {
-            true: "ring-input-error focus:ring-input-error",
+            true: "ring-input-error hover:ring-input-error focus:ring-input-error",
         },
         hasClearIcon: {
             true: "",
@@ -131,7 +131,7 @@ export const inputVariant = cva([
 });
 export const labelVariant = cva([
     "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
+    "peer-focus:text-input-default-text peer-focus:bg-input-label-bg", // TODO bg
 ], {
     variants: {
         size: {
@@ -329,7 +329,7 @@ export const labelVariant = cva([
         isFloatingLabel: true,
     },
 });
-export const helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
+export const helperTextVariant = cva(["typography-small1 flex flex-row items-center gap-1"], {
     variants: {
         size: {
             sm: "mt-1",
@@ -350,8 +350,17 @@ export const helperTextVariant = cva(["text-small1 flex flex-row items-center ga
         error: false,
     },
 });
-export const iconWrapperVariant = cva([
+const iconInteractiveColorStateClasses = [
+    "fill-input-default-text",
+    "peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-active:fill-input-filled-text",
+    "peer-disabled:fill-input-disable-stroke",
+    "[&_svg]:text-input-default-text",
+    "peer-hover:[&_svg]:text-input-filled-text peer-focus:[&_svg]:text-input-filled-text peer-active:[&_svg]:text-input-filled-text",
+    "peer-disabled:[&_svg]:text-input-disable-stroke",
+];
+export const inlineEndIconWrapperVariant = cva([
     "absolute inset-y-0 right-0 items-center justify-center hidden peer-focus:flex",
+    ...iconInteractiveColorStateClasses,
 ], {
     variants: {
         size: {
@@ -364,7 +373,10 @@ export const iconWrapperVariant = cva([
         size: "md",
     },
 });
-export const iconSearchWrapperVariant = cva(["absolute inset-y-0 left-0 items-center justify-center flex"], {
+export const inlineStartIconWrapperVariant = cva([
+    "absolute inset-y-0 left-0 items-center justify-center flex",
+    ...iconInteractiveColorStateClasses,
+], {
     variants: {
         size: {
             sm: "ml-2",
@@ -376,9 +388,7 @@ export const iconSearchWrapperVariant = cva(["absolute inset-y-0 left-0 items-ce
         size: "md",
     },
 });
-export const iconVariant = cva([
-    "cursor-pointer z-50 fill-input-active-stroke hover:fill-input-default-text",
-], {
+export const iconActionVariant = cva(["cursor-pointer z-50"], {
     variants: {
         size: {
             sm: "size-3",
@@ -390,10 +400,10 @@ export const iconVariant = cva([
         size: "md",
     },
 });
-export const sectionIconWrapperVariant = cva([
+export const segmentedIconWrapperVariant = cva([
     "cursor-pointer",
     "absolute items-center justify-center flex",
-    "fill-input-default-text peer-hover:fill-input-filled-text peer-focus:fill-input-filled-text peer-disabled:fill-input-disable-stroke",
+    ...iconInteractiveColorStateClasses,
 ], {
     variants: {
         size: {
@@ -471,3 +481,8 @@ export const sectionIconWrapperVariant = cva([
         position: "end",
     },
 });
+// Backward-compatible aliases (can be removed in a future major version)
+export const iconWrapperVariant = inlineEndIconWrapperVariant;
+export const iconSearchWrapperVariant = inlineStartIconWrapperVariant;
+export const iconVariant = iconActionVariant;
+export const sectionIconWrapperVariant = segmentedIconWrapperVariant;

package/dist/esm/bundle.css

@@ -719,6 +719,9 @@ input[type=number] {
 .mb-1{
   margin-bottom: 0.25rem;
 }
+.mb-2{
+  margin-bottom: 0.5rem;
+}
 .ml-2{
   margin-left: 0.5rem;
 }
@@ -938,6 +941,9 @@ input[type=number] {
 .min-h-10{
   min-height: 2.5rem;
 }
+.min-h-\[14px\]{
+  min-height: 14px;
+}
 .min-h-screen{
   min-height: 100vh;
 }
@@ -1197,6 +1203,9 @@ input[type=number] {
 .gap-6{
   gap: 1.5rem;
 }
+.gap-8{
+  gap: 2rem;
+}
 .gap-\[2px\]{
   gap: 2px;
 }
@@ -1593,6 +1602,9 @@ input[type=number] {
 .bg-\[rgb\(var\(--navbar-bg-color\)\)\]{
   background-color: rgb(var(--navbar-bg-color));
 }
+.bg-\[var\(--base-color-popup\)\]{
+  background-color: var(--base-color-popup);
+}
 .bg-\[var\(--dropdown-menu-default-bg\)\]{
   background-color: var(--dropdown-menu-default-bg);
 }
@@ -2938,6 +2950,9 @@ input[type=number] {
 .fill-input-disable-stroke{
   fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }
+.fill-none{
+  fill: none;
+}
 .fill-primary{
   fill: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -2956,9 +2971,18 @@ input[type=number] {
 .stroke-input-default-stroke{
   stroke: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * 1), transparent);
 }
+.stroke-input-default-text{
+  stroke: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
+}
 .stroke-input-disable-stroke{
   stroke: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }
+.stroke-input-error{
+  stroke: color-mix(in srgb, var(--input-color-error) calc(100% * 1), transparent);
+}
+.stroke-input-filled-text{
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
 .stroke-primary-default{
   stroke: color-mix(in srgb, var(--state-color-primary-default) calc(100% * 1), transparent);
 }
@@ -4290,6 +4314,12 @@ input[type=number] {
 .hover\:fill-input-default-text:hover{
   fill: color-mix(in srgb, var(--input-color-default-text) calc(100% * 1), transparent);
 }
+.hover\:stroke-input-active-stroke:hover{
+  stroke: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * 1), transparent);
+}
+.hover\:stroke-input-filled-text:hover{
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
 .hover\:text-\[var\(--dropdown-menu-hover-text\)\]:hover{
   color: var(--dropdown-menu-hover-text);
 }
@@ -4424,6 +4454,10 @@ input[type=number] {
   --tw-ring-opacity: 1;
   --tw-ring-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-ring-opacity, 1)), transparent);
 }
+.hover\:ring-input-error:hover{
+  --tw-ring-opacity: 1;
+  --tw-ring-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-ring-opacity, 1)), transparent);
+}
 .hover\:placeholder\:text-input-disable-text:hover::-moz-placeholder{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-disable-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -4812,6 +4846,9 @@ input[type=number] {
 .active\:fill-button-warning-solid-active:active{
   fill: color-mix(in srgb, var(--button-warning-solid-active-text) calc(100% * 1), transparent);
 }
+.active\:stroke-input-filled-text:active{
+  stroke: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
 .active\:text-action-button-icon-active-pressed:active{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--action-button-icon-active-pressed-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -5401,6 +5438,10 @@ input[type=number] {
 .peer:focus ~ .peer-focus\:stroke-primary-hover{
   stroke: color-mix(in srgb, var(--state-color-primary-hover) calc(100% * 1), transparent);
 }
+.peer:focus ~ .peer-focus\:text-input-default-text{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
 .peer:focus ~ .peer-focus\:text-input-filled-text{
   --tw-text-opacity: 1;
   color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
@@ -5415,6 +5456,9 @@ input[type=number] {
   line-height: var(--label-label2-line-height, 10px);
   font-weight: var(--label-label2-weight, 400);
 }
+.peer:active ~ .peer-active\:fill-input-filled-text{
+  fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
+}
 .peer:disabled ~ .peer-disabled\:cursor-not-allowed{
   cursor: not-allowed;
 }
@@ -5983,6 +6027,26 @@ input[type=number] {
   width: 32px;
   height: 32px;
 }
+.\[\&_svg\]\:text-input-default-text svg{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-default-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+.peer:hover ~ .peer-hover\:\[\&_svg\]\:text-input-filled-text svg{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+.peer:focus ~ .peer-focus\:\[\&_svg\]\:text-input-filled-text svg{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+.peer:active ~ .peer-active\:\[\&_svg\]\:text-input-filled-text svg{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-filled-text) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
+.peer:disabled ~ .peer-disabled\:\[\&_svg\]\:text-input-disable-stroke svg{
+  --tw-text-opacity: 1;
+  color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-text-opacity, 1)), transparent);
+}
 .\[\&_tr\:last-child\]\:border-0 tr:last-child{
   border-width: 0px;
 }