@rovula/ui 0.1.0 → 0.1.2

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;

package/src/components/TextInput/TextInput.tsx

@@ -1,5 +1,4 @@
 import React, {
-  FC,
   ReactNode,
   forwardRef,
   useCallback,
@@ -9,18 +8,18 @@ import React, {
 } from "react";
 import {
   helperTextVariant,
-  iconSearchWrapperVariant,
-  iconVariant,
-  iconWrapperVariant,
+  iconActionVariant,
+  inlineEndIconWrapperVariant,
+  inlineStartIconWrapperVariant,
   inputVariant,
   labelVariant,
-  sectionIconWrapperVariant,
+  segmentedIconWrapperVariant,
 } from "./TextInput.styles";
 import {
-  XCircleIcon,
-  ExclamationCircleIcon,
-  MagnifyingGlassIcon,
-} from "@heroicons/react/16/solid";
+  CircleAlert,
+  CircleX,
+  Search,
+} from "lucide-react";
 import { cn } from "@/utils/cn";
 
 export type InputProps = {
@@ -39,6 +38,7 @@ export type InputProps = {
   required?: boolean;
   isFloatingLabel?: boolean;
   keepCloseIconOnValue?: boolean;
+  keepFooterSpace?: boolean;
   hasClearIcon?: boolean;
   hasSearchIcon?: boolean;
   startIcon?: ReactNode;
@@ -76,6 +76,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       required = true,
       isFloatingLabel = true,
       keepCloseIconOnValue = false,
+      keepFooterSpace = true,
       hasClearIcon = true,
       hasSearchIcon = false,
       startIcon,
@@ -118,20 +119,26 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       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,
@@ -176,7 +183,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         return (
           <div
             className={cn(
-              iconSearchWrapperClassname,
+              inlineStartIconWrapperClassname,
               "flex",
               classes?.iconSearchWrapper
             )}
@@ -190,12 +197,12 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
         return (
           <div
             className={cn(
-              iconSearchWrapperClassname,
+              inlineStartIconWrapperClassname,
               classes?.iconSearchWrapper
             )}
           >
             <div
-              className={cn(iconClassname, classes?.icon)}
+              className={cn(iconActionClassname, classes?.icon)}
               onClick={handleOnClickLeftSectionIcon}
             >
               {startIcon}
@@ -206,7 +213,10 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={cn(startIconWrapperClassname, classes?.startIconWrapper)}
+          className={cn(
+            startSegmentIconWrapperClassname,
+            classes?.startIconWrapper
+          )}
           onClick={handleOnClickLeftSectionIcon}
         >
           {startIcon}
@@ -216,9 +226,9 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       hasLeftSectionIcon,
       startIcon,
       iconMode,
-      iconSearchWrapperClassname,
-      startIconWrapperClassname,
-      iconClassname,
+      inlineStartIconWrapperClassname,
+      startSegmentIconWrapperClassname,
+      iconActionClassname,
       renderStartIcon,
       handleOnClickLeftSectionIcon,
     ]);
@@ -229,7 +239,11 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       if (renderEndIcon) {
         return (
           <div
-            className={cn(iconWrapperClassname, "flex", classes?.iconWrapper)}
+            className={cn(
+              inlineEndIconWrapperClassname,
+              "flex",
+              classes?.iconWrapper
+            )}
           >
             {renderEndIcon()}
           </div>
@@ -239,10 +253,14 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       if (iconMode === "flat") {
         return (
           <div
-            className={cn(iconWrapperClassname, "flex", classes?.iconWrapper)}
+            className={cn(
+              inlineEndIconWrapperClassname,
+              "flex",
+              classes?.iconWrapper
+            )}
           >
             <div
-              className={cn(iconClassname, classes?.icon)}
+              className={cn(iconActionClassname, classes?.icon)}
               onClick={handleOnClickRightSectionIcon}
             >
               {endIcon}
@@ -253,7 +271,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
 
       return (
         <div
-          className={cn(endIconWrapperClassname, classes?.endIconWrapper)}
+          className={cn(endSegmentIconWrapperClassname, classes?.endIconWrapper)}
           onClick={handleOnClickRightSectionIcon}
         >
           {endIcon}
@@ -263,9 +281,9 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
       hasRightSectionIcon,
       endIcon,
       iconMode,
-      iconSearchWrapperClassname,
-      endIconWrapperClassname,
-      iconClassname,
+      inlineEndIconWrapperClassname,
+      endSegmentIconWrapperClassname,
+      iconActionClassname,
       renderEndIcon,
       handleOnClickRightSectionIcon,
     ]);
@@ -273,18 +291,6 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
     return (
       <div className={`inline-flex flex-col ${fullwidth ? "w-full" : ""}`}>
         <div className="relative">
-          {hasSearchIcon && !hasLeftSectionIcon && (
-            <div
-              className={cn(
-                iconSearchWrapperClassname,
-                classes?.iconSearchWrapper
-              )}
-            >
-              <MagnifyingGlassIcon
-                className={cn(iconClassname, classes?.icon)}
-              />
-            </div>
-          )}
           <input
             {...props}
             placeholder=" "
@@ -294,19 +300,33 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             disabled={disabled}
             className={cn(inputClassname, props.className)}
           />
+          {hasSearchIcon && !hasLeftSectionIcon && (
+            <div
+              className={cn(
+                inlineStartIconWrapperClassname,
+                classes?.iconSearchWrapper
+              )}
+            >
+              <Search className={cn(iconActionClassname, classes?.icon)} />
+            </div>
+          )}
           {startIconElement}
 
           {hasClearIcon && !hasRightSectionIcon && (
             <div
-              className={cn(iconWrapperClassname, classes?.iconWrapper)}
+              className={cn(inlineEndIconWrapperClassname, classes?.iconWrapper)}
               style={{
                 display:
                   keepCloseIconOnValue && props.value ? "flex" : undefined,
               }}
             >
-              <XCircleIcon
-                type="button"
-                className={cn(iconClassname, classes?.icon)}
+              <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?.icon
+                )}
                 onMouseDown={handleClearInput}
               />
             </div>
@@ -317,7 +337,7 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             {label}{" "}
             {required && (
               <span
-                className={cn("text-error", {
+                className={cn("text-input-error", {
                   "text-input-disable-text": disabled,
                 })}
               >
@@ -326,16 +346,24 @@ export const TextInput = forwardRef<HTMLInputElement, InputProps>(
             )}
           </label>
         </div>
-        {(errorMessage || helperText) && (
+        {(errorMessage || helperText || keepFooterSpace) && (
           <span className={helperTextClassname}>
-            <span className="h-full">
-              <ExclamationCircleIcon
-                width={16}
-                height={16}
-                className={error ? "fill-error" : ""}
-              />
-            </span>
-            {errorMessage || helperText}
+            {(errorMessage || helperText) && (
+              <span className="h-full shrink-0">
+                <CircleAlert
+                  width={14}
+                  height={14}
+                  className={cn(
+                    "fill-none",
+                    error ? "stroke-input-error" : "stroke-input-filled-text"
+                  )}
+                />
+              </span>
+            )}
+            {keepFooterSpace && !error && !helperText && (
+              <span className="block min-h-[14px]" aria-hidden />
+            )}
+            {(error ? errorMessage : helperText) || ''}
           </span>
         )}
       </div>

package/src/icons/index.ts

@@ -1 +1,2 @@
 export * from "./iconRegistry";
+export { getLucideIconNames } from "./lucideIconNames";

package/src/icons/lucideIconNames.ts

@@ -0,0 +1,14 @@
+/**
+ * Get all available Lucide icon names (kebab-case).
+ * Use for autocomplete, validation, or browsing.
+ *
+ * @example
+ * const names = await getLucideIconNames();
+ * names.includes("eye-closed"); // true
+ */
+export async function getLucideIconNames(): Promise<string[]> {
+  const { default: dynamicIconImports } = await import(
+    "lucide-react/dynamicIconImports"
+  );
+  return Object.keys(dynamicIconImports);
+}

package/src/index.ts

@@ -6,6 +6,7 @@ import "./icons/iconConfig";
 export { default as Button } from "./components/Button/Button";
 export { default as TextInput } from "./components/TextInput/TextInput";
 export { default as MaskedTextInput } from "./components/MaskedTextInput";
+export { default as PasswordInput } from "./components/PasswordInput";
 export { NumberInput } from "./components/NumberInput/NumberInput";
 export { default as TextArea } from "./components/TextArea/TextArea";
 export { default as Text } from "./components/Text/Text";
@@ -15,6 +16,7 @@ export { Checkbox } from "./components/Checkbox/Checkbox";
 export { Label } from "./components/Label/Label";
 export { Input } from "./components/Input/Input";
 export { Navbar } from "./components/Navbar";
+export { Footer } from "./components/Footer";
 export { default as ActionButton } from "./components/ActionButton/ActionButton";
 export { Avatar, AvatarGroup } from "./components/Avatar";
 export { Collapsible } from "./components/Collapsible";
@@ -50,6 +52,7 @@ export * from "./components/RadioGroup/RadioGroup";
 // Export component types
 export type { ButtonProps } from "./components/Button/Button";
 export type { InputProps } from "./components/TextInput/TextInput";
+export type { PasswordInputProps } from "./components/PasswordInput/PasswordInput";
 export type {
   MaskedTextInputProps,
   MaskRule,
@@ -57,7 +60,8 @@ export type {
 export type { NumberInputProps } from "./components/NumberInput/NumberInput";
 export type { TextAreaProps } from "./components/TextArea/TextArea";
 export type { DropdownProps, Options } from "./components/Dropdown/Dropdown";
-export type { NavbarProps } from "./components/Navbar/Navbar";
+export type { NavbarProps, NavbarVariant } from "./components/Navbar/Navbar";
+export type { FooterProps, FooterVariant } from "./components/Footer/Footer";
 export type { AvatarProps } from "./components/Avatar/Avatar";
 export type { AvatarGroupProps } from "./components/Avatar/AvatarGroup";
 
@@ -75,6 +79,16 @@ export * from "./hooks";
 
 export { cn } from "./utils/cn";
 
+export {
+  srgbToHex,
+  getThemeColor,
+  getThemeColors,
+  THEME_COLOR_KEYS,
+  type ThemeColorKey,
+} from "./utils/colors";
+
+export { getLucideIconNames } from "./icons/lucideIconNames";
+
 // const mainPreset = require("./theme/main-preset");
 
 // export { mainPreset };

package/src/theme/themes/skyller/typography.css

@@ -3,28 +3,28 @@
   /* Typography                                                          */
   /* ------------------------------------------------------------------ */
 
-  --h1-family: "Poppins";
-  --h2-family: "Poppins";
-  --h3-family: "Poppins";
-  --h4-family: "Poppins";
-  --h5-family: "Poppins";
-  --h6-family: "Poppins";
-  --subtitle2-family: "Poppins";
-  --subtitle3-family: "Poppins";
-  --subtitle4-family: "Poppins";
-  --subtitle5-family: "Poppins";
-  --subtitle6-family: "Poppins";
-  --body1-family: "Poppins";
-  --body2-family: "Poppins";
-  --body3-family: "Poppins";
-  --body4-family: "Poppins";
-  --small1-family: "Poppins";
-  --small2-family: "Poppins";
-  --small3-family: "Poppins";
-  --small4-family: "Poppins";
-  --small5-family: "Poppins";
-  --label-label1-family: "Poppins";
-  --label-label2-family: "Poppins";
-  --button-button-l-family: "Poppins";
-  --button-button-ms-family: "Poppins";
+  --h1-family: "Montserrat";
+  --h2-family: "Montserrat";
+  --h3-family: "Montserrat";
+  --h4-family: "Montserrat";
+  --h5-family: "Montserrat";
+  --h6-family: "Montserrat";
+  --subtitle2-family: "Montserrat";
+  --subtitle3-family: "Montserrat";
+  --subtitle4-family: "Montserrat";
+  --subtitle5-family: "Montserrat";
+  --subtitle6-family: "Montserrat";
+  --body1-family: "Montserrat";
+  --body2-family: "Montserrat";
+  --body3-family: "Montserrat";
+  --body4-family: "Montserrat";
+  --small1-family: "Montserrat";
+  --small2-family: "Montserrat";
+  --small3-family: "Montserrat";
+  --small4-family: "Montserrat";
+  --small5-family: "Montserrat";
+  --label-label1-family: "Montserrat";
+  --label-label2-family: "Montserrat";
+  --button-button-l-family: "Montserrat";
+  --button-button-ms-family: "Montserrat";
 }

package/src/theme/tokens/baseline.css

@@ -8,5 +8,6 @@
 @import url(components/action-button.css);
 @import url(components/loading.css);
 @import url(components/navbar.css);
+@import url(components/footer.css);
 @import url(components/dropdown-menu.css);
 @import url(components/switch.css);

package/src/theme/tokens/components/footer.css

@@ -0,0 +1,9 @@
+:root {
+  /* Footer */
+  --footer-height: 58px;
+  --footer-height-simple: 48px;
+  --footer-bg-color: var(--state-color-primary-default);
+  --footer-text-color: var(--primary-foreground);
+  --footer-border-color: var(--primary-foreground);
+  --footer-gap: 16px;
+}

package/src/theme/tokens/components/navbar.css

@@ -1,8 +1,9 @@
 :root {
-    /* Navbar */
+  /* Navbar */
   --navbar-height: 58px;
   --navbar-bg-color: var(--primary-default);
   --navbar-text-color: var(--primary-foreground);
   --navbar-border-color: var(--primary-foreground);
   --navbar-gap: 16px;
+  --navbar-shadow-scrolled: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }

package/src/types/lucide-react.d.ts

@@ -0,0 +1,5 @@
+declare module "lucide-react/dynamicIconImports" {
+  type IconLoader = () => Promise<{ default: React.ComponentType<any> }>;
+  const dynamicIconImports: Record<string, IconLoader>;
+  export { dynamicIconImports as default };
+}