@rovula/ui 0.1.1 → 0.1.2

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

@@ -60,6 +60,7 @@ type InputProps = {
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;
@@ -94,6 +95,7 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: ReactNode;
@@ -144,6 +146,7 @@ declare const MaskedTextInput: React__default.ForwardRefExoticComponent<{
     required?: boolean;
     isFloatingLabel?: boolean;
     keepCloseIconOnValue?: boolean;
+    keepFooterSpace?: boolean;
     hasClearIcon?: boolean;
     hasSearchIcon?: boolean;
     startIcon?: React__default.ReactNode;

package/dist/src/theme/global.css

@@ -3969,6 +3969,10 @@ input[type=number] {
   margin-bottom: 0.25rem;
 }
 
+.mb-2 {
+  margin-bottom: 0.5rem;
+}
+
 .ml-2 {
   margin-left: 0.5rem;
 }
@@ -4256,6 +4260,10 @@ input[type=number] {
   min-height: 2.5rem;
 }
 
+.min-h-\[14px\] {
+  min-height: 14px;
+}
+
 .min-h-screen {
   min-height: 100vh;
 }
@@ -4597,6 +4605,10 @@ input[type=number] {
   gap: 1.5rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
 .gap-\[2px\] {
   gap: 2px;
 }
@@ -5100,6 +5112,10 @@ input[type=number] {
   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);
 }
@@ -6792,6 +6808,10 @@ input[type=number] {
   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);
 }
@@ -6816,10 +6836,22 @@ input[type=number] {
   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);
 }
@@ -8490,6 +8522,14 @@ input[type=number] {
   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);
 }
@@ -8658,6 +8698,11 @@ input[type=number] {
   --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);
@@ -9151,6 +9196,10 @@ input[type=number] {
   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);
@@ -9897,6 +9946,11 @@ input[type=number] {
   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);
@@ -9914,6 +9968,10 @@ input[type=number] {
   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;
 }
@@ -10624,6 +10682,31 @@ input[type=number] {
   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;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/PasswordInput/PasswordInput.tsx

@@ -26,8 +26,8 @@ export const PasswordInput = forwardRef<HTMLInputElement, PasswordInputProps>(
     };
 
     const toggleIcon = visible
-      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full" aria-label="Hide password" />
-      : hideIcon ?? <Icon name="eye-closed" type="lucide" size="inherit" className="size-full" aria-label="Show password" />;
+      ? showIcon ?? <Icon name="eye" type="lucide" size="inherit" className="size-full stroke-input-default-stroke hover:stroke-input-active-stroke" aria-label="Hide password" />
+      : hideIcon ?? <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 (
       <TextInput

package/src/components/TextArea/TextArea.styles.ts

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

package/src/components/TextInput/TextInput.stories.tsx

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

package/src/components/TextInput/TextInput.styles.ts

@@ -39,7 +39,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: "",
@@ -132,13 +132,13 @@ export const inputVariant = cva(
       leftSectionIcon: false, // TODO function style
       rightSectionIcon: false,
     },
-  }
+  },
 );
 
 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: {
@@ -337,11 +337,11 @@ export const labelVariant = cva(
       hasLeftSectionIcon: false,
       isFloatingLabel: true,
     },
-  }
+  },
 );
 
 export const helperTextVariant = cva(
-  ["text-small1 flex flex-row items-center gap-1"],
+  ["typography-small1 flex flex-row items-center gap-1"],
   {
     variants: {
       size: {
@@ -362,12 +362,22 @@ export const helperTextVariant = cva(
       disabled: false,
       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: {
@@ -380,11 +390,14 @@ export const iconWrapperVariant = cva(
     defaultVariants: {
       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: {
@@ -396,13 +409,11 @@ export const iconSearchWrapperVariant = cva(
     defaultVariants: {
       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: {
@@ -414,14 +425,14 @@ export const iconVariant = cva(
     defaultVariants: {
       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: {
@@ -499,5 +510,11 @@ export const sectionIconWrapperVariant = cva(
       error: false,
       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;