@rovula/ui 0.0.68 → 0.0.69

package/dist/esm/types/components/Dropdown/Dropdown.stories.d.ts

@@ -359,10 +359,12 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

package/dist/esm/types/components/InputFilter/InputFilter.stories.d.ts

@@ -349,10 +349,12 @@ declare const meta: {
         placeholder?: string | undefined | undefined;
         readOnly?: boolean | undefined | undefined;
         src?: string | undefined | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         keepCloseIconOnValue?: boolean | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         ref?: React.LegacyRef<HTMLInputElement> | undefined;
         key?: React.Key | null | undefined;

package/dist/esm/types/components/Search/Search.stories.d.ts

@@ -310,11 +310,13 @@ declare const meta: {
         required?: boolean | undefined;
         src?: string | undefined | undefined;
         label?: string | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         modal?: boolean | undefined;
         optionContainerClassName?: string | undefined;

package/dist/esm/types/components/TextInput/TextInput.d.ts

@@ -5,6 +5,7 @@ export type InputProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -22,6 +23,7 @@ export type InputProps = {
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
 export declare const TextInput: React.ForwardRefExoticComponent<{
@@ -30,6 +32,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -47,6 +50,7 @@ export declare const TextInput: React.ForwardRefExoticComponent<{
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
 export default TextInput;

package/dist/esm/types/components/TextInput/TextInput.stories.d.ts

@@ -7,6 +7,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg";
         rounded?: "none" | "normal" | "full";
         variant?: "flat" | "outline" | "underline";
+        iconMode?: "flat" | "solid";
         type?: React.HTMLInputTypeAttribute;
         helperText?: string;
         errorMessage?: string;
@@ -24,6 +25,7 @@ declare const meta: {
         labelClassName?: string;
         onClickStartIcon?: () => void;
         onClickEndIcon?: () => void;
+        renderStartIcon?: () => React.ReactNode;
         renderEndIcon?: () => React.ReactNode;
     } & Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
@@ -36,6 +38,7 @@ declare const meta: {
         size?: "sm" | "md" | "lg" | undefined;
         rounded?: "none" | "normal" | "full" | undefined;
         variant?: "flat" | "outline" | "underline" | undefined;
+        iconMode?: "flat" | "solid" | undefined;
         type?: React.HTMLInputTypeAttribute | undefined;
         helperText?: string | undefined;
         errorMessage?: string | undefined;
@@ -53,6 +56,7 @@ declare const meta: {
         labelClassName?: string | undefined;
         onClickStartIcon?: (() => void) | undefined;
         onClickEndIcon?: (() => void) | undefined;
+        renderStartIcon?: (() => React.ReactNode) | undefined;
         renderEndIcon?: (() => React.ReactNode) | undefined;
         suppressHydrationWarning?: boolean | undefined | undefined;
         color?: string | undefined | undefined;
@@ -371,3 +375,10 @@ export declare const FuctionInput: {
     };
     render: (args: {}) => import("react/jsx-runtime").JSX.Element;
 };
+export declare const CustomIcon: {
+    args: {
+        label: string;
+        disabled: boolean;
+    };
+    render: (args: {}) => import("react/jsx-runtime").JSX.Element;
+};

package/dist/esm/types/components/TextInput/TextInput.styles.d.ts

@@ -15,6 +15,7 @@ export declare const labelVariant: (props?: ({
     disabled?: boolean | null | undefined;
     error?: boolean | null | undefined;
     hasSearchIcon?: boolean | null | undefined;
+    hasLeftSectionIcon?: boolean | null | undefined;
     isFloatingLabel?: boolean | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 export declare const helperTextVariant: (props?: ({

package/dist/index.d.ts

@@ -49,6 +49,7 @@ type InputProps = {
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React__default.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -66,6 +67,7 @@ type InputProps = {
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size">;
 declare const TextInput: React__default.ForwardRefExoticComponent<{
@@ -74,6 +76,7 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     size?: "sm" | "md" | "lg";
     rounded?: "none" | "normal" | "full";
     variant?: "flat" | "outline" | "underline";
+    iconMode?: "flat" | "solid";
     type?: React__default.HTMLInputTypeAttribute;
     helperText?: string;
     errorMessage?: string;
@@ -91,6 +94,7 @@ declare const TextInput: React__default.ForwardRefExoticComponent<{
     labelClassName?: string;
     onClickStartIcon?: () => void;
     onClickEndIcon?: () => void;
+    renderStartIcon?: () => ReactNode;
     renderEndIcon?: () => ReactNode;
 } & Omit<React__default.InputHTMLAttributes<HTMLInputElement>, "size"> & React__default.RefAttributes<HTMLInputElement>>;
 

package/dist/src/theme/global.css

@@ -2284,10 +2284,22 @@ input[type=number] {
   left: 2.25rem;
 }
 
+.left-\[38px\] {
+  left: 38px;
+}
+
+.left-\[46px\] {
+  left: 46px;
+}
+
 .left-\[50\%\] {
   left: 50%;
 }
 
+.left-\[72px\] {
+  left: 72px;
+}
+
 .right-0 {
   right: 0px;
 }
@@ -3047,6 +3059,21 @@ input[type=number] {
   border-radius: var(--radius-radius-xs);
 }
 
+.rounded-l-full {
+  border-top-left-radius: 9999px;
+  border-bottom-left-radius: 9999px;
+}
+
+.rounded-l-none {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.rounded-l-xl {
+  border-top-left-radius: var(--radius-radius-xl);
+  border-bottom-left-radius: var(--radius-radius-xl);
+}
+
 .rounded-r-full {
   border-top-right-radius: 9999px;
   border-bottom-right-radius: 9999px;
@@ -3094,6 +3121,10 @@ input[type=number] {
   border-left-width: 1px;
 }
 
+.border-r {
+  border-right-width: 1px;
+}
+
 .border-t {
   border-top-width: 1px;
 }
@@ -3359,6 +3390,16 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.border-r-input-default-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-default-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
+.border-r-input-error {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-error) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .border-t-secondary {
   --tw-border-opacity: 1;
   border-top-color: color-mix(in srgb, var(--state-color-secondary-default) calc(100% * var(--tw-border-opacity, 1)), transparent);
@@ -7977,6 +8018,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.peer:hover ~ .peer-hover\:border-r-input-active-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .peer:hover ~ .peer-hover\:fill-input-filled-text {
   fill: color-mix(in srgb, var(--input-color-filled-text) calc(100% * 1), transparent);
 }
@@ -8006,6 +8052,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.peer:focus ~ .peer-focus\:border-r-input-active-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-active-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .peer:focus ~ .peer-focus\:bg-input-label-bg {
   --tw-bg-opacity: 1;
   background-color: color-mix(in srgb, var(--input-color-label-bg) calc(100% * var(--tw-bg-opacity, 1)), transparent);
@@ -8062,6 +8113,11 @@ input[type=number] {
   border-left-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
 }
 
+.peer:disabled ~ .peer-disabled\:border-r-input-disable-stroke {
+  --tw-border-opacity: 1;
+  border-right-color: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * var(--tw-border-opacity, 1)), transparent);
+}
+
 .peer:disabled ~ .peer-disabled\:fill-input-disable-stroke {
   fill: color-mix(in srgb, var(--input-color-disable-stroke) calc(100% * 1), transparent);
 }

package/package.json

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

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

@@ -2,6 +2,7 @@ import React, { useRef } from "react";
 import type { Meta, StoryObj } from "@storybook/react";
 import TextInput from "./TextInput";
 import { CalendarIcon } from "@heroicons/react/16/solid";
+import Icon from "../Icon/Icon";
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta = {
@@ -124,3 +125,85 @@ export const FuctionInput = {
     );
   },
 } satisfies StoryObj;
+
+export const CustomIcon = {
+  args: {
+    label: "Placeholder Text",
+    // value: "",
+    disabled: true,
+  },
+  render: (args) => {
+    console.log("args ", args);
+    const props: typeof args = {
+      ...args,
+    };
+    return (
+      <div className="flex flex-col gap-4 w-full">
+        <div>
+          <h4>Icon mode: solid:</h4>
+        </div>
+        <div className="flex flex-row gap-4 w-full">
+          <TextInput
+            id="1"
+            size="lg"
+            {...args}
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="2"
+            size="md"
+            {...args}
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="3"
+            size="sm"
+            {...args}
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+        </div>
+        <div>
+          <h4>Icon mode: flat:</h4>
+        </div>
+        <div className="flex flex-row gap-4 w-full">
+          <TextInput
+            id="1"
+            size="lg"
+            {...args}
+            iconMode="flat"
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="2"
+            size="md"
+            {...args}
+            iconMode="flat"
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+          <TextInput
+            id="3"
+            size="sm"
+            {...args}
+            iconMode="flat"
+            startIcon={<CalendarIcon className="size-full" fill="inherit" />}
+            endIcon={<CalendarIcon className="size-full" fill="inherit" />}
+          />
+        </div>
+        <TextInput
+          id="1"
+          size="lg"
+          {...args}
+          iconMode="flat"
+          startIcon={<Icon name="magnifying-glass" fill="inherit" />}
+          // <MagnifyingGlassIcon className="size-full" fill="inherit" />
+          hasClearIcon
+        />
+      </div>
+    );
+  },
+} satisfies StoryObj;

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

@@ -156,6 +156,9 @@ export const labelVariant = cva(
       hasSearchIcon: {
         false: "",
       },
+      hasLeftSectionIcon: {
+        false: "",
+      },
       isFloatingLabel: {
         false: "hidden peer-placeholder-shown:block peer-focus:bg-transparent",
       },
@@ -268,12 +271,70 @@ export const labelVariant = cva(
           "left-11 peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
         ],
       },
+
+      // -------- hasLeftSectionIcon ------
+      {
+        isFloatingLabel: true,
+        hasLeftSectionIcon: true,
+        size: "sm",
+        className: [
+          "left-[38px] -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",
+        ],
+      },
+      {
+        isFloatingLabel: true,
+        hasLeftSectionIcon: true,
+        size: "md",
+        className: [
+          "left-[46px] -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",
+        ],
+      },
+      {
+        isFloatingLabel: true,
+        hasLeftSectionIcon: true,
+        size: "lg",
+        className: [
+          "left-[72px] -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",
+        ],
+      },
+      // floating = false and has search icon
+      {
+        isFloatingLabel: false,
+        hasLeftSectionIcon: true,
+        size: "sm",
+        className: [
+          "left-[38px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-small1",
+        ],
+      },
+      {
+        isFloatingLabel: false,
+        hasLeftSectionIcon: true,
+        size: "md",
+        className: [
+          "left-[46px] peer-placeholder-shown:top-2 peer-placeholder-shown:typography-subtitile4",
+        ],
+      },
+      {
+        isFloatingLabel: false,
+        hasLeftSectionIcon: true,
+        size: "lg",
+        className: [
+          "left-[72px] peer-placeholder-shown:top-4 peer-placeholder-shown:typography-subtitile1",
+        ],
+      },
     ],
     defaultVariants: {
       size: "md",
       disabled: false,
       error: false,
       hasSearchIcon: false,
+      hasLeftSectionIcon: false,
       isFloatingLabel: true,
     },
   }
@@ -360,7 +421,6 @@ 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",
   ],
   {
@@ -371,18 +431,68 @@ export const sectionIconWrapperVariant = cva(
         lg: "p-3 size-14",
       },
       rounded: {
-        none: "rounded-r-none",
-        normal: "rounded-r-xl",
-        full: "rounded-r-full",
+        none: "",
+        normal: "",
+        full: "",
       },
       error: {
-        true: "border-l-input-error",
+        false: "",
       },
       position: {
-        start: "inset-y-0 left-0 ",
-        end: "inset-y-0 right-0 ",
+        start: [
+          "inset-y-0 left-0 ",
+          "border-r border-r-input-default-stroke peer-hover:border-r-input-active-stroke peer-focus:border-r-input-active-stroke peer-disabled:border-r-input-disable-stroke",
+        ],
+        end: [
+          "inset-y-0 right-0 ",
+          "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",
+        ],
       },
     },
+    compoundVariants: [
+      // --- start rounded ---
+      {
+        position: "start",
+        rounded: "none",
+        className: "rounded-l-none",
+      },
+      {
+        position: "start",
+        rounded: "normal",
+        className: "rounded-l-xl",
+      },
+      {
+        position: "start",
+        rounded: "full",
+        className: "rounded-l-full",
+      },
+      {
+        position: "end",
+        rounded: "none",
+        className: "rounded-r-none",
+      },
+      {
+        position: "end",
+        rounded: "normal",
+        className: "rounded-r-xl",
+      },
+      {
+        position: "end",
+        rounded: "full",
+        className: "rounded-r-full",
+      },
+      // --- Error start ---
+      {
+        position: "start",
+        error: true,
+        className: "border-r-input-error",
+      },
+      {
+        position: "end",
+        error: true,
+        className: "border-l-input-error",
+      },
+    ],
     defaultVariants: {
       size: "md",
       rounded: "normal",