From dcfa3db0264976b2fa591f756a18379d1a26b0f6 Mon Sep 17 00:00:00 2001
From: alejandrobailo <alejandrobailo94@gmail.com>
Date: Wed, 18 Mar 2026 19:31:56 +0100
Subject: [PATCH] refactor(ui): inline tabs constants and adjust trigger styles

---
 ui/components/shadcn/tabs/tabs.constants.ts | 43 ------------------
 ui/components/shadcn/tabs/tabs.tsx          | 48 ++++++++++++++++++---
 2 files changed, 43 insertions(+), 48 deletions(-)
 delete mode 100644 ui/components/shadcn/tabs/tabs.constants.ts

diff --git a/ui/components/shadcn/tabs/tabs.constants.ts b/ui/components/shadcn/tabs/tabs.constants.ts
deleted file mode 100644
index 4bac2eb71a..0000000000
--- a/ui/components/shadcn/tabs/tabs.constants.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Trigger component style parts using semantic class names
- */
-const TRIGGER_STYLES = {
-  base: "relative inline-flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50",
-  border: "border-r border-[#E9E9F0] last:border-r-0 dark:border-[#171D30]",
-  text: "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white",
-  active:
-    "data-[state=active]:text-slate-900 dark:data-[state=active]:text-white",
-  underline:
-    "after:absolute after:bottom-0 after:left-1/2 after:h-0.5 after:w-0 after:-translate-x-1/2 after:bg-emerald-400 after:transition-all data-[state=active]:after:w-[calc(100%-theme(spacing.5))]",
-  focus:
-    "focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:focus-visible:ring-offset-slate-950",
-  icon: "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-} as const;
-
-/**
- * Content component styles
- */
-export const CONTENT_STYLES =
-  "mt-2 focus-visible:rounded-md focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50" as const;
-
-/**
- * Build trigger className by combining style parts
- */
-export function buildTriggerClassName(): string {
-  return [
-    TRIGGER_STYLES.base,
-    TRIGGER_STYLES.border,
-    TRIGGER_STYLES.text,
-    TRIGGER_STYLES.active,
-    TRIGGER_STYLES.underline,
-    TRIGGER_STYLES.focus,
-    TRIGGER_STYLES.icon,
-  ].join(" ");
-}
-
-/**
- * Build list className
- */
-export function buildListClassName(): string {
-  return "inline-flex w-full items-center border-[#E9E9F0] dark:border-[#171D30]";
-}
diff --git a/ui/components/shadcn/tabs/tabs.tsx b/ui/components/shadcn/tabs/tabs.tsx
index 8208a7d292..fc593ca88d 100644
--- a/ui/components/shadcn/tabs/tabs.tsx
+++ b/ui/components/shadcn/tabs/tabs.tsx
@@ -5,11 +5,49 @@ import type { ComponentProps } from "react";
 
 import { cn } from "@/lib/utils";
 
-import {
-  buildListClassName,
-  buildTriggerClassName,
-  CONTENT_STYLES,
-} from "./tabs.constants";
+/**
+ * Trigger component style parts using semantic class names
+ */
+const TRIGGER_STYLES = {
+  base: "relative inline-flex items-center justify-center gap-2 py-3 text-sm font-medium transition-colors disabled:pointer-events-none disabled:opacity-50 [&:not(:first-child)]:pl-4 [&:not(:last-child)]:pr-4",
+  border: "border-r border-[#E9E9F0] last:border-r-0 dark:border-[#171D30]",
+  text: "text-slate-600 hover:text-slate-900 dark:text-slate-400 dark:hover:text-white",
+  active:
+    "data-[state=active]:text-slate-900 dark:data-[state=active]:text-white",
+  underline:
+    "after:absolute after:bottom-0 after:left-0 after:right-4 after:h-0.5 after:scale-x-0 after:bg-emerald-400 after:transition-transform data-[state=active]:after:scale-x-100 [&:not(:first-child)]:after:left-4 [&:last-child]:after:right-0",
+  focus:
+    "focus-visible:ring-2 focus-visible:ring-emerald-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white focus-visible:outline-none dark:focus-visible:ring-offset-slate-950",
+  icon: "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+} as const;
+
+/**
+ * Content component styles
+ */
+const CONTENT_STYLES =
+  "mt-2 focus-visible:rounded-md focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:border-ring focus-visible:outline-ring focus-visible:ring-ring/50" as const;
+
+/**
+ * Build trigger className by combining style parts
+ */
+function buildTriggerClassName(): string {
+  return [
+    TRIGGER_STYLES.base,
+    TRIGGER_STYLES.border,
+    TRIGGER_STYLES.text,
+    TRIGGER_STYLES.active,
+    TRIGGER_STYLES.underline,
+    TRIGGER_STYLES.focus,
+    TRIGGER_STYLES.icon,
+  ].join(" ");
+}
+
+/**
+ * Build list className
+ */
+function buildListClassName(): string {
+  return "inline-flex w-full items-center border-[#E9E9F0] dark:border-[#171D30]";
+}
 
 function Tabs({
   className,