@rovula/ui 0.1.0 → 0.1.2

package/dist/components/Navbar/Navbar.stories.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Navbar from "./Navbar";
+import { Footer } from "../Footer";
 const meta = {
     title: "Components/Navbar",
     component: Navbar,
@@ -14,17 +15,23 @@ const meta = {
 export default meta;
 export const Default = {
     args: {},
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
+    render: (args) => (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) })),
+};
+export const Transparent = {
+    args: {},
+    render: (args) => (_jsxs("div", { className: "flex flex-col w-full min-h-screen bg-primary-5", children: [_jsx(Navbar, { variant: "transparent", position: "sticky", scrollShadow: true, leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" })] }), center: _jsx(_Fragment, { children: "Transparent Navbar" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Menu 1" }), _jsx("li", { children: "Menu 2" })] }) }), _jsx("div", { className: "flex-1 p-8", children: "Scroll down to see shadow" }), _jsx(Footer, { variant: "transparent", copyright: "\u00A9 2024" })] })),
+};
+export const WithScrollShadow = {
+    args: {},
+    parameters: {
+        layout: "fullscreen",
     },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-full h-[200vh]", children: _jsxs("div", { className: "h-screen flex flex-col", children: [_jsx(Story, {}), _jsx("div", { className: "flex-1 p-8 text-center", children: "Scroll down to see navbar shadow" })] }) })),
+    ],
+    render: (args) => (_jsx(Navbar, { position: "sticky", scrollShadow: true, leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" })] }), center: _jsx(_Fragment, { children: "Sticky + Scroll Shadow" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "Menu 1" }), _jsx("li", { children: "Menu 2" })] }) })),
 };
 export const Custom = {
     args: {},
-    render: (args) => {
-        console.log("args ", args);
-        const props = Object.assign({}, args);
-        return (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { className: "px-8", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) }));
-    },
+    render: (args) => (_jsx("div", { className: "flex flex-row gap-4 w-full", children: _jsx(Navbar, { className: "px-8", leftNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "link 1" }), _jsx("li", { children: "link 2" }), _jsx("li", { children: "link 3" })] }), center: _jsx(_Fragment, { children: "Center text" }), rightNav: _jsxs("ul", { className: "flex gap-2", children: [_jsx("li", { children: "sss 1" }), _jsx("li", { children: "ddd 2" }), _jsx("li", { children: "vvvv 3" })] }) }) })),
 };

package/dist/components/PasswordInput/PasswordInput.js

@@ -0,0 +1,36 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useRef, useState } from "react";
+import TextInput from "../TextInput/TextInput";
+import Icon from "../Icon/Icon";
+export const PasswordInput = forwardRef((_a, ref) => {
+    var _b;
+    var { showToggle = true, hasClearIcon = false, hideIcon, showIcon, endIcon, renderEndIcon, onClickEndIcon } = _a, props = __rest(_a, ["showToggle", "hasClearIcon", "hideIcon", "showIcon", "endIcon", "renderEndIcon", "onClickEndIcon"]);
+    const inputRef = useRef(null);
+    const [visible, setVisible] = useState(false);
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
+    const handleToggleVisibility = () => {
+        var _a;
+        if (props.disabled)
+            return;
+        setVisible((v) => !v);
+        (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        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 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";
+export default PasswordInput;

package/dist/components/PasswordInput/PasswordInput.stories.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PasswordInput from "./PasswordInput";
+const meta = {
+    title: "Components/PasswordInput",
+    component: PasswordInput,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "fullscreen",
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-[rgb(var(--base-bg-2))]", children: _jsx(Story, {}) })),
+    ],
+};
+export default meta;
+export const Default = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        fullwidth: true,
+    },
+    render: (args) => (_jsxs("div", { className: "flex flex-col gap-4 w-full max-w-md", children: [_jsx(PasswordInput, Object.assign({ id: "1", size: "lg" }, args)), _jsx(PasswordInput, Object.assign({ id: "2", size: "md" }, args)), _jsx(PasswordInput, Object.assign({ id: "3", size: "sm" }, args))] })),
+};
+export const WithHelperText = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        helperText: "Must be at least 8 characters",
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};
+export const WithError = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        error: true,
+        errorMessage: "Password is required",
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};
+export const Disabled = {
+    args: {
+        label: "Password",
+        value: "secret123",
+        disabled: true,
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};
+export const CustomIcons = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({}, args, { id: "1", hideIcon: _jsx("span", { className: "text-sm", children: "\uD83D\uDC41" }), showIcon: _jsx("span", { className: "text-sm", children: "\uD83D\uDE48" }) })) })),
+};
+export const WithoutToggle = {
+    args: {
+        label: "Password",
+        placeholder: "Enter your password",
+        showToggle: false,
+        fullwidth: true,
+    },
+    render: (args) => (_jsx("div", { className: "w-full max-w-md", children: _jsx(PasswordInput, Object.assign({ id: "1", size: "md" }, args)) })),
+};

package/dist/components/PasswordInput/index.js

@@ -0,0 +1 @@
+export { default } from "./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;