@rovula/ui 0.1.7 → 0.1.9

package/src/components/OtpInput/OtpInput.tsx

@@ -0,0 +1,223 @@
+import React, {
+  KeyboardEvent,
+  ClipboardEvent,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from "react";
+import { cn } from "@/utils/cn";
+
+export type OtpInputProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onBlur?: () => void;
+  onComplete?: (value: string) => void;
+  length?: number;
+  disabled?: boolean;
+  invalid?: boolean;
+  autoFocus?: boolean;
+  inputMode?: React.HTMLAttributes<HTMLInputElement>["inputMode"];
+  charPattern?: RegExp;
+  className?: string;
+  inputClassName?: string;
+};
+
+const sanitizeChars = (
+  raw: string,
+  charPattern: RegExp,
+  maxLength: number,
+): string[] => {
+  const chars = Array.from(raw).filter((char) => charPattern.test(char));
+  return chars.slice(0, maxLength);
+};
+
+export const OtpInput = forwardRef<HTMLInputElement, OtpInputProps>(
+  (
+    {
+      value,
+      onChange,
+      onBlur,
+      onComplete,
+      length = 6,
+      disabled = false,
+      invalid = false,
+      autoFocus = false,
+      inputMode = "numeric",
+      charPattern = /^\d$/,
+      className,
+      inputClassName,
+    },
+    ref,
+  ) => {
+    const inputRefs = useRef<Array<HTMLInputElement | null>>([]);
+    const containerRef = useRef<HTMLDivElement | null>(null);
+
+    const slots = useMemo(() => {
+      const normalizedValue = value || "";
+      return Array.from({ length }, (_, index) => normalizedValue[index] || "");
+    }, [length, value]);
+
+    useImperativeHandle(
+      ref,
+      () => inputRefs.current[0] as HTMLInputElement,
+      [],
+    );
+
+    const setCode = (nextSlots: string[]) => {
+      const nextValue = nextSlots.join("");
+      onChange(nextValue);
+
+      if (onComplete && nextSlots.every((slot) => slot !== "")) {
+        onComplete(nextValue);
+      }
+    };
+
+    const focusInput = (index: number) => {
+      const clamped = Math.max(0, Math.min(length - 1, index));
+      inputRefs.current[clamped]?.focus();
+      inputRefs.current[clamped]?.select();
+    };
+
+    const handleInputChange = (index: number, rawValue: string) => {
+      if (disabled) return;
+
+      if (!rawValue) {
+        const nextSlots = [...slots];
+        nextSlots[index] = "";
+        setCode(nextSlots);
+        return;
+      }
+
+      const incomingChars = sanitizeChars(rawValue, charPattern, length);
+      if (!incomingChars.length) return;
+
+      const nextSlots = [...slots];
+      let cursor = index;
+
+      incomingChars.forEach((char) => {
+        if (cursor < length) {
+          nextSlots[cursor] = char;
+          cursor += 1;
+        }
+      });
+
+      setCode(nextSlots);
+
+      if (cursor < length) {
+        focusInput(cursor);
+      } else {
+        focusInput(length - 1);
+      }
+    };
+
+    const handlePaste = (
+      index: number,
+      event: ClipboardEvent<HTMLInputElement>,
+    ) => {
+      event.preventDefault();
+      if (disabled) return;
+
+      const pasted = event.clipboardData.getData("text");
+      const incomingChars = sanitizeChars(pasted, charPattern, length - index);
+      if (!incomingChars.length) return;
+
+      const nextSlots = [...slots];
+      incomingChars.forEach((char, offset) => {
+        nextSlots[index + offset] = char;
+      });
+
+      setCode(nextSlots);
+      const nextFocusIndex = Math.min(index + incomingChars.length, length - 1);
+      focusInput(nextFocusIndex);
+    };
+
+    const handleKeyDown = (
+      index: number,
+      event: KeyboardEvent<HTMLInputElement>,
+    ) => {
+      if (disabled) return;
+
+      if (event.key === "ArrowLeft") {
+        event.preventDefault();
+        focusInput(index - 1);
+        return;
+      }
+
+      if (event.key === "ArrowRight") {
+        event.preventDefault();
+        focusInput(index + 1);
+        return;
+      }
+
+      if (event.key !== "Backspace") return;
+
+      if (slots[index]) {
+        event.preventDefault();
+        const nextSlots = [...slots];
+        nextSlots[index] = "";
+        setCode(nextSlots);
+        return;
+      }
+
+      if (index > 0) {
+        event.preventDefault();
+        const nextSlots = [...slots];
+        nextSlots[index - 1] = "";
+        setCode(nextSlots);
+        focusInput(index - 1);
+      }
+    };
+
+    return (
+      <div
+        className={cn("flex items-center gap-3", className)}
+        ref={containerRef}
+      >
+        {slots.map((slot, index) => (
+          <input
+            key={index}
+            ref={(element) => {
+              inputRefs.current[index] = element;
+            }}
+            type="text"
+            inputMode={inputMode}
+            autoComplete={index === 0 ? "one-time-code" : "off"}
+            value={slot}
+            maxLength={1}
+            disabled={disabled}
+            autoFocus={autoFocus && index === 0}
+            aria-invalid={invalid || undefined}
+            className={cn(
+              "h-14 w-[46px] rounded-[8px] text-input-filled-text border bg-transparent text-center text-2xl font-semibold outline-none transition-all duration-200",
+              "border-input-default-stroke focus:border-input-active-stroke",
+              "disabled:cursor-not-allowed disabled:opacity-50",
+              invalid && "border-input-error focus:border-input-error",
+              inputClassName,
+            )}
+            onFocus={(event) => {
+              event.target.select();
+            }}
+            onBlur={(event) => {
+              const nextFocused = event.relatedTarget as Node | null;
+              const stillInside =
+                nextFocused && containerRef.current?.contains(nextFocused);
+
+              // Notify RHF only when focus leaves the whole OTP control.
+              if (!stillInside) {
+                onBlur?.();
+              }
+            }}
+            onChange={(event) => handleInputChange(index, event.target.value)}
+            onPaste={(event) => handlePaste(index, event)}
+            onKeyDown={(event) => handleKeyDown(index, event)}
+          />
+        ))}
+      </div>
+    );
+  },
+);
+
+OtpInput.displayName = "OtpInput";
+
+export default OtpInput;

package/src/components/OtpInput/OtpInputGroup.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import { cn } from "@/utils/cn";
+import { OtpInput, OtpInputProps } from "./OtpInput";
+
+export type OtpInputGroupProps = OtpInputProps & {
+  id?: string;
+  label?: string;
+  required?: boolean;
+  helperText?: string;
+  error?: boolean;
+  errorMessage?: string;
+  keepFooterSpace?: boolean;
+  labelClassName?: string;
+  messageClassName?: string;
+};
+
+export const OtpInputGroup = React.forwardRef<HTMLInputElement, OtpInputGroupProps>(
+  (
+    {
+      id,
+      label,
+      required = false,
+      helperText,
+      error = false,
+      errorMessage,
+      keepFooterSpace = true,
+      labelClassName,
+      messageClassName,
+      className,
+      ...otpProps
+    },
+    ref
+  ) => {
+    const isInvalid = Boolean(error || errorMessage);
+    const message = isInvalid ? errorMessage : helperText;
+
+    return (
+      <div className={cn("inline-flex w-full flex-col gap-2", className)}>
+        {label && (
+          <label
+            htmlFor={id}
+            className={cn(
+              "typography-overline text-input-default-text",
+              isInvalid && "text-input-error",
+              labelClassName
+            )}
+          >
+            {label}
+            {required && <span className="ml-1 text-input-error">*</span>}
+          </label>
+        )}
+
+        <OtpInput {...otpProps} ref={ref} invalid={isInvalid} />
+
+        {(message || keepFooterSpace) && (
+          <div
+            className={cn(
+              "typography-small2 min-h-[18px]",
+              isInvalid ? "text-input-error" : "text-text-g-contrast-medium",
+              messageClassName
+            )}
+            role={isInvalid ? "alert" : undefined}
+          >
+            {message || " "}
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+
+OtpInputGroup.displayName = "OtpInputGroup";
+
+export default OtpInputGroup;

package/src/components/OtpInput/index.ts

@@ -0,0 +1,5 @@
+export { OtpInput } from "./OtpInput";
+export type { OtpInputProps } from "./OtpInput";
+export { OtpInputGroup } from "./OtpInputGroup";
+export type { OtpInputGroupProps } from "./OtpInputGroup";
+export { default } from "./OtpInput";

package/src/components/PasswordInput/PasswordInput.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),

package/src/components/Popover/Popover.tsx

@@ -19,7 +19,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 min-w-72 rounded-md border bg-surface border-none overflow-hidden p-0 text-surface-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "z-50 min-w-72 rounded-md border bg-bg-bg1 border-none overflow-hidden p-0 text-common-black shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),
@@ -121,11 +121,11 @@ const radioPreviewRows: RadioPreviewRow[] = [
 
 export const FigmaPreview = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
-      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[360px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6">
         {radioPreviewRows.map((row) => (
           <div key={row.label} className="grid grid-cols-[160px_16px] items-center gap-4">
-            <span className="text-sm font-medium text-text-white">{row.label}</span>
+            <span className="text-sm font-medium text-text-contrast-max">{row.label}</span>
             <RadioGroup defaultValue={row.checked ? "option" : undefined} disabled={row.disabled}>
               <RadioGroupItem value="option" className={row.className} />
             </RadioGroup>

package/src/components/RadioGroup/RadioGroup.tsx

@@ -28,7 +28,8 @@ const RadioGroupItem = React.forwardRef<
         "hover:border-function-default-hover",
         "focus:outline-none",
         // Disabled state styles
-        "data-[disabled]:!border-state-disable-solid data-[disabled]:!fill-state-disable-solid data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-solid",
+        "data-[disabled]:!border-state-disable-outline data-[disabled]:!fill-state-disable-outline data-[disabled]:!cursor-not-allowed data-[disabled]:!pointer-events-none data-[disabled]:!text-state-disable-outline",
+        "[&[data-disabled][data-state=checked]]:!border-state-disable-solid [&[data-disabled][data-state=checked]]:!text-state-disable-solid",
         // Checked state styles
         "data-[state=checked]:border-function-active-solid data-[state=checked]:text-function-active-solid",
         "hover:data-[state=checked]:border-function-active-hover hover:data-[state=checked]:text-function-active-hover",

package/src/components/Search/Search.stories.tsx

@@ -12,7 +12,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),

package/src/components/Search/Search.tsx

@@ -26,10 +26,13 @@ export type SearchProps = {
 } & Omit<InputProps, "value" | "onSelect">;
 
 const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
+  const { label = "Search", required = false, ...restProps } = props;
+
   return (
     <Dropdown
-      label="Search"
-      {...props}
+      label={label}
+      required={required}
+      {...restProps}
       ref={ref}
       keepCloseIconOnValue
       hasClearIcon
@@ -37,6 +40,7 @@ const Search = forwardRef<HTMLInputElement, SearchProps>((props, ref) => {
       endIcon={null}
       filterMode
       isFloatingLabel={false}
+      segmentedInput={false}
     />
   );
 });

package/src/components/Slider/Slider.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-background">
+      <div className="p-5 flex w-full bg-bg-bg1">
         <Story />
       </div>
     ),
@@ -54,15 +54,15 @@ export const GradientColor: StoryObj = {
     const [darkRed, setDarkRed] = useState([50]);
 
     return (
-      <div className="w-[400px] p-6 space-y-8 rounded-md shadow-lg bg-surface">
+      <div className="w-[400px] p-6 space-y-8 rounded-md shadow-lg bg-bg-bg1">
         {/* Exposure (Black to White) */}
         <Slider
           value={exposure}
           onValueChange={setExposure}
           className="bg-grey-transparent-24"
-          trackClassName="h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-black to-white"
+          trackClassName="h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-common-black to-common-white"
           rangeClassName="bg-unset"
-          thumbClassName="bg-white border border-white shadow"
+          thumbClassName="bg-common-white border border-common-white shadow"
           thumbStyle={{
             filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
           }}
@@ -78,7 +78,7 @@ export const GradientColor: StoryObj = {
           className="bg-grey-transparent-24"
           trackClassName="h-1 rounded-full bg-grey-transparent-24"
           rangeClassName="bg-unset"
-          thumbClassName="bg-white border border-white shadow"
+          thumbClassName="bg-common-white border border-common-white shadow"
           thumbStyle={{
             filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
           }}
@@ -98,7 +98,7 @@ export const GradientColor: StoryObj = {
               "linear-gradient(90deg, #F00 0%, #FF8502 11.54%, #F2FF05 23.08%, #06F90F 35.58%, #00E6FF 48.56%, #0404FF 61.54%, #AB02FF 74.52%, #FF069E 87.5%, #FF0408 100%)",
           }}
           rangeClassName="bg-unset"
-          thumbClassName="bg-white border border-white shadow"
+          thumbClassName="bg-common-white border border-common-white shadow"
           thumbStyle={{
             filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
           }}
@@ -114,7 +114,7 @@ export const GradientColor: StoryObj = {
           className="bg-grey-transparent-24"
           trackClassName="h-1 rounded-full bg-grey-transparent-24 bg-gradient-to-r from-[#848484] to-[#A00202]"
           rangeClassName="bg-unset"
-          thumbClassName="bg-white border border-white shadow"
+          thumbClassName="bg-common-white border border-common-white shadow"
           thumbStyle={{
             filter: "drop-shadow(0px 6px 12px rgba(0, 0, 0, 0.12))",
           }}

package/src/components/Slider/Slider.tsx

@@ -53,7 +53,7 @@ const Slider = React.forwardRef<
       </SliderPrimitive.Track>
       <SliderPrimitive.Thumb
         className={cn(
-          "block h-5 w-5 cursor-pointer rounded-full border-[3px] border-primary bg-background outline-none ring-0 transition-colors disabled:pointer-events-none disabled:opacity-50",
+          "block h-5 w-5 cursor-pointer rounded-full border-[3px] border-primary bg-bg-bg1 outline-none ring-0 transition-colors disabled:pointer-events-none disabled:opacity-50",
           thumbClassName
         )}
         style={thumbStyle}

package/src/components/Switch/Switch.stories.tsx

@@ -13,7 +13,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),
@@ -58,11 +58,11 @@ const switchPreviewRows: SwitchPreviewRow[] = [
 
 export const FigmaPreview = {
   render: () => (
-    <div className="bg-base-bg2 p-8 min-h-screen">
-      <div className="mx-auto flex w-full max-w-[300px] flex-col gap-4 rounded-lg border border-base-bg-stroke1 bg-base-bg1 p-6">
+    <div className="bg-bg-bg2 p-8 min-h-screen">
+      <div className="mx-auto flex w-full max-w-[300px] flex-col gap-4 rounded-lg border border-bg-stroke1 bg-bg-bg1 p-6">
         {switchPreviewRows.map((row) => (
           <div key={row.label} className="grid grid-cols-[1fr_40px] items-center gap-6">
-            <span className="text-sm font-medium text-text-white">{row.label}</span>
+            <span className="text-sm font-medium text-text-contrast-max">{row.label}</span>
             <Switch checked={row.checked} disabled={row.disabled} forceHover={row.forceHover} />
           </div>
         ))}

package/src/components/Table/Table.tsx

@@ -54,7 +54,7 @@ const TableFooter = React.forwardRef<
   <tfoot
     ref={ref}
     className={cn(
-      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      "border-t bg-transparent-grey2-8 font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
@@ -69,7 +69,7 @@ const TableRow = React.forwardRef<
   <tr
     ref={ref}
     className={cn(
-      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-grey-20",
+      "border-b transition-colors hover:bg-transparent-grey2-8 data-[state=selected]:bg-grey-20",
       className
     )}
     {...props}
@@ -84,7 +84,7 @@ const TableHead = React.forwardRef<
   <th
     ref={ref}
     className={cn(
-      " h-12 py-3 px-6 text-left align-middle typography-body2 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
+      " h-12 py-3 px-6 text-left align-middle typography-body2 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
       className
     )}
     {...props}
@@ -99,7 +99,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      " py-3 px-6 text-left align-middle  typography-body3 text-text-grey-dark [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
+      " py-3 px-6 text-left align-middle  typography-body3 text-text-g-contrast-low [&:has([role=checkbox])]:pr-4 [&:has([role=checkbox])]:w-4",
       className
     )}
     {...props}
@@ -113,7 +113,7 @@ const TableCaption = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <caption
     ref={ref}
-    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    className={cn("mt-4 text-sm text-text-g-contrast-medium", className)}
     {...props}
   />
 ));

package/src/components/Tabs/Tabs.stories.tsx

@@ -17,7 +17,7 @@ const meta = {
   },
   decorators: [
     (Story) => (
-      <div className="p-5 flex w-full bg-base-bg2">
+      <div className="p-5 flex w-full bg-bg-bg2">
         <Story />
       </div>
     ),

package/src/components/Tabs/Tabs.tsx

@@ -54,7 +54,7 @@ const Tabs: React.FC<TabsProps> = ({
   tabBarSize = 38,
   enableBorderLine = true,
   enableAddTabButton = false,
-  keepIconSpace = true,
+  keepIconSpace = false,
   disabled = false,
   keepMounted = false,
   tabMode = "start",
@@ -75,6 +75,7 @@ const Tabs: React.FC<TabsProps> = ({
   onTabChange,
 }) => {
   const [activeTab, setActiveTab] = useState(initialTab);
+  const [hoveredTab, setHoveredTab] = useState<number | null>(null);
   const [sliderStyle, setSliderStyle] = useState({
     width: "0px",
     transform: "translateX(0px)",
@@ -147,7 +148,7 @@ const Tabs: React.FC<TabsProps> = ({
             "border-state-disable-outline": disabled,
             "flex-1": tabMode === "justify",
           },
-          tabBarContainerClassName
+          tabBarContainerClassName,
         )}
       >
         {leftAction}
@@ -157,7 +158,7 @@ const Tabs: React.FC<TabsProps> = ({
             {
               "flex-1": tabMode === "justify",
             },
-            tabBarWrapperClassName
+            tabBarWrapperClassName,
           )}
         >
           <div
@@ -167,7 +168,7 @@ const Tabs: React.FC<TabsProps> = ({
               {
                 "gap-0": tabMode === "justify",
               },
-              tabBarClassName
+              tabBarClassName,
             )}
             style={{
               justifyContent: tabMode === "justify" ? "stretch" : tabMode,
@@ -184,13 +185,12 @@ const Tabs: React.FC<TabsProps> = ({
                 disabled={disabled || tab.disabled}
                 id={`tab-${index}`}
                 className={cn(
-                  "flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitle6",
+                  "group relative flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0 typography-subtitle6",
                   {
-                    "text-foreground": index === activeTab,
-                    "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark":
-                      index !== activeTab,
+                    "text-text-contrast-max": index === activeTab,
+                    "text-text-g-contrast-medium": index !== activeTab,
                     // -- disabled
-                    "text-state-disable-solid pointer-events-none":
+                    "text-state-disable-outline pointer-events-none":
                       disabled || tab.disabled,
                     [tab.disableClassName ?? tabButtonDisableClassName ?? ""]:
                       disabled || tab.disabled,
@@ -207,33 +207,44 @@ const Tabs: React.FC<TabsProps> = ({
                     [tab.activeClassName ?? tabButtonActiveClassName ?? ""]:
                       index === activeTab,
                     "flex-1": tabMode === "justify",
-                  }
+                  },
                 )}
                 onClick={() => {
                   setActiveTab(index);
                   onTabChange?.(index);
                 }}
+                onMouseEnter={() => setHoveredTab(index)}
+                onMouseLeave={() => setHoveredTab(null)}
               >
                 {(keepIconSpace || tab.startTabContent) && (
-                  <div className="h-full w-3 flex items-center justify-center">
-                    {tab.isLoading ? <Loading /> : tab.startTabContent}
+                  <div className="h-full w-3 flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-current [&_svg]:text-current">
+                    {tab.isLoading ? (
+                      <Loading size={12} />
+                    ) : (
+                      tab.startTabContent
+                    )}
                   </div>
                 )}
                 {tab.label}
                 {(keepIconSpace || tab.endTabContent) && (
-                  <div className="h-full w-3 flex items-center justify-center">
+                  <div className="h-full w-3 flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-current [&_svg]:text-current">
                     {tab.endTabContent}
                   </div>
                 )}
+                {!disabled && !tab.disabled && index !== activeTab && (
+                  <div className="absolute bottom-0 left-0 right-0 h-[2px] rounded-[1px] bg-function-default-hover opacity-0 transition-opacity duration-150 group-hover:opacity-100" />
+                )}
               </button>
             ))}
             <div
               className={cn(
-                `absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`,
+                "absolute left-0 bottom-0 h-[2px] rounded-[1px] bg-function-active-solid transition-all duration-300 ease-in-out",
                 {
-                  "bg-state-disable-solid": disabled,
+                  hidden: disabled || tabs[activeTab]?.disabled,
+                  "bg-function-active-hover":
+                    hoveredTab === activeTab && !disabled,
                 },
-                borderSliderClassName
+                borderSliderClassName,
               )}
               style={sliderStyle}
             />
@@ -243,7 +254,7 @@ const Tabs: React.FC<TabsProps> = ({
           <div
             className={cn(
               "sticky right-0 flex content-center items-center mx-4",
-              addTabButtonWrapperClassName
+              addTabButtonWrapperClassName,
             )}
           >
             <ActionButton
@@ -260,7 +271,7 @@ const Tabs: React.FC<TabsProps> = ({
       </div>
 
       <div
-        className={cn("mt-4 text-foreground", tabContentClassName)}
+        className={cn("mt-4 text-text-g-contrast-high", tabContentClassName)}
         role="tabpanel"
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}