@rovula/ui 0.1.1 → 0.1.3

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;