@rovula/ui 0.0.29 → 0.0.31

package/dist/components/Search/Search.stories.js

@@ -8,7 +8,7 @@ const meta = {
         layout: "fullscreen",
     },
     decorators: [
-        (Story) => (_jsx("div", { className: "p-5 flex w-full", children: _jsx(Story, {}) })),
+        (Story) => (_jsx("div", { className: "p-5 flex w-full bg-base-bg2", children: _jsx(Story, {}) })),
     ],
 };
 export default meta;
@@ -20,6 +20,7 @@ export const Default = {
     args: {
         label: "Choose an option:",
         fullwidth: true,
+        size: "md",
         options,
     },
     render: (args) => {

package/dist/components/TextInput/TextInput.js

@@ -10,12 +10,12 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useImperativeHandle, useRef, } from "react";
+import { forwardRef, useCallback, useImperativeHandle, 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, hasClearIcon = true, hasSearchIcon = false, startIcon, endIcon, labelClassName } = _a, props = __rest(_a, ["id", "label", "size", "rounded", "variant", "type", "helperText", "errorMessage", "fullwidth", "disabled", "error", "required", "hasClearIcon", "hasSearchIcon", "startIcon", "endIcon", "labelClassName"]);
+    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"]);
     const inputRef = useRef(null);
     const _id = id || `${type}-${label}-input`;
     const hasLeftSectionIcon = !!startIcon;
@@ -37,6 +37,7 @@ export const TextInput = forwardRef((_a, ref) => {
         disabled,
         error,
         hasSearchIcon,
+        isFloatingLabel,
     });
     const helperTextClassname = helperTextVariant({ size, error, disabled });
     const iconWrapperClassname = iconWrapperVariant({ size });
@@ -49,13 +50,29 @@ export const TextInput = forwardRef((_a, ref) => {
         error,
     });
     useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
-    const handleClearInput = () => {
+    const handleClearInput = useCallback(() => {
         if (inputRef.current) {
             inputRef.current.value = "";
+            if (props.onChange) {
+                const event = new Event("input", { bubbles: true });
+                props.onChange({ target: { value: "" } });
+            }
         }
-    };
-    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, children: _jsx(XCircleIcon, { type: "button", className: iconClassname, onMouseDown: handleClearInput }) })), hasRightSectionIcon && (_jsx("div", { className: endIconWrapperClassname, children: endIcon })), _jsxs("label", { htmlFor: _id, className: cn(labelClassname, labelClassName), children: [label, " ", required && (_jsx("span", { className: cn("text-error", {
+    }, [props.onChange]);
+    // TODO startIcon
+    const handleOnClickRightSectionIcon = useCallback(() => {
+        if (disabled)
+            return;
+        onClickEndIcon === null || onClickEndIcon === void 0 ? void 0 : onClickEndIcon();
+        if (inputRef.current) {
+            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: {
+                            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", {
                                     "text-input-disable-text": disabled,
-                                }), children: "*" }))] })] }), (errorMessage || helperText) && (_jsxs("span", { className: helperTextClassname, children: [_jsx(ExclamationCircleIcon, { width: 16, height: 16, className: error ? "fill-error" : "" }), " ", errorMessage || helperText] }))] }));
+                                }), 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] }))] }));
 });
 export default TextInput;

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

@@ -1,5 +1,6 @@
 import { cva } from "class-variance-authority";
 export const inputVariant = cva([
+    "truncate",
     "border-0 outline-none",
     "p-1 flex w-auto box-border",
     "peer text-input-filled-text placeholder:text-transparent bg-transparent caret-primary",
@@ -72,47 +73,47 @@ export const inputVariant = cva([
         {
             hasSearchIcon: true,
             size: "sm",
-            class: "ps-6",
+            class: "!ps-6",
         },
         {
             hasSearchIcon: true,
             size: "md",
-            class: "ps-9",
+            class: "!ps-9",
         },
         {
             hasSearchIcon: true,
             size: "lg",
-            class: "ps-11",
+            class: "!ps-11",
         },
         {
             leftSectionIcon: true,
             size: "sm",
-            class: "ps-[38px]",
+            class: "!ps-[38px]",
         },
         {
             leftSectionIcon: true,
             size: "md",
-            class: "ps-[46px]",
+            class: "!ps-[46px]",
         },
         {
             leftSectionIcon: true,
             size: "lg",
-            class: "ps-[72px]",
+            class: "!ps-[72px]",
         },
         {
             rightSectionIcon: true,
             size: "sm",
-            class: "pe-[38px]",
+            class: "!pe-[38px]",
         },
         {
             rightSectionIcon: true,
             size: "md",
-            class: "pe-[46px]",
+            class: "!pe-[46px]",
         },
         {
             rightSectionIcon: true,
             size: "lg",
-            class: "pe-[72px]",
+            class: "!pe-[72px]",
         },
     ],
     defaultVariants: {
@@ -134,34 +135,78 @@ export const labelVariant = cva([
 ], {
     variants: {
         size: {
-            sm: [
+            sm: [],
+            md: [],
+            lg: [],
+        },
+        disabled: {
+            true: "text-input-default-text placeholder:text-input-default-text",
+        },
+        error: {
+            true: "ring-error",
+        },
+        hasSearchIcon: {
+            false: "",
+        },
+        isFloatingLabel: {
+            false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
+        },
+    },
+    compoundVariants: [
+        // floating = true
+        {
+            isFloatingLabel: true,
+            size: "sm",
+            className: [
                 "left-3 -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",
             ],
-            md: [
+        },
+        {
+            isFloatingLabel: true,
+            size: "md",
+            className: [
                 "left-3 -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",
             ],
-            lg: [
+        },
+        {
+            isFloatingLabel: true,
+            size: "lg",
+            className: [
                 "left-4 -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",
             ],
         },
-        disabled: {
-            true: "text-input-default-text placeholder:text-input-default-text",
+        // --------------
+        // flating = false
+        {
+            isFloatingLabel: false,
+            size: "sm",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
         },
-        error: {
-            true: "ring-error",
+        {
+            isFloatingLabel: false,
+            size: "md",
+            className: [
+                "left-3 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
         },
-        hasSearchIcon: {
-            false: "",
+        {
+            isFloatingLabel: false,
+            size: "lg",
+            className: [
+                "left-4 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
         },
-    },
-    compoundVariants: [
+        // --------------
         {
+            isFloatingLabel: true,
             hasSearchIcon: true,
             size: "sm",
             className: [
@@ -171,6 +216,7 @@ export const labelVariant = cva([
             ],
         },
         {
+            isFloatingLabel: true,
             hasSearchIcon: true,
             size: "md",
             className: [
@@ -180,6 +226,7 @@ export const labelVariant = cva([
             ],
         },
         {
+            isFloatingLabel: true,
             hasSearchIcon: true,
             size: "lg",
             className: [
@@ -188,12 +235,38 @@ export const labelVariant = cva([
                 "peer-focus:-top-1.5 peer-focus:typography-label1",
             ],
         },
+        // floating = false and has search icon
+        {
+            isFloatingLabel: false,
+            hasSearchIcon: true,
+            size: "sm",
+            className: [
+                "left-6 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            hasSearchIcon: true,
+            size: "md",
+            className: [
+                "left-9 peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+            ],
+        },
+        {
+            isFloatingLabel: false,
+            hasSearchIcon: true,
+            size: "lg",
+            className: [
+                "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+            ],
+        },
     ],
     defaultVariants: {
         size: "md",
         disabled: false,
         error: false,
         hasSearchIcon: false,
+        isFloatingLabel: true,
     },
 });
 export const helperTextVariant = cva(["text-small1 flex flex-row items-center gap-1"], {
@@ -258,6 +331,7 @@ 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",