From 89e29eb0cf343baef091c50c1262fc1bf5f488ce Mon Sep 17 00:00:00 2001
From: Ariful Hoque <hoquea57@gmail.com>
Date: Thu, 12 Mar 2026 14:06:28 +0600
Subject: [PATCH] Add white-active tab background support

Expose an activeColor prop on TabsList to allow a white background for active tabs and wire it into the DOM for styling (data-active-color). Update TabsTrigger classnames to apply the white active background when activeColor="white". Also adjust storybook examples: replace fixed w-[400px] with w-100 and add a new ActiveWhiteBackground story demonstrating the white active background. Files changed: src/components/ui/tabs.tsx, src/components/ui/Tabs.stories.tsx.
---
 src/components/ui/Tabs.stories.tsx | 21 +++++++++++++++++++--
 src/components/ui/tabs.tsx         |  7 ++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/Tabs.stories.tsx b/src/components/ui/Tabs.stories.tsx
index 2a433f0..2741af9 100644
--- a/src/components/ui/Tabs.stories.tsx
+++ b/src/components/ui/Tabs.stories.tsx
@@ -14,7 +14,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {
   render: () => (
-    <Tabs defaultValue="tab1" className="w-[400px]">
+    <Tabs defaultValue="tab1" className="w-100">
       <TabsList>
         <TabsTrigger value="tab1">Tab 1</TabsTrigger>
         <TabsTrigger value="tab2">Tab 2</TabsTrigger>
@@ -29,7 +29,7 @@ export const Default: Story = {
 
 export const LineVariant: Story = {
   render: () => (
-    <Tabs defaultValue="a" className="w-[400px]">
+    <Tabs defaultValue="a" className="w-100">
       <TabsList variant="line">
         <TabsTrigger value="a">Account</TabsTrigger>
         <TabsTrigger value="b">Password</TabsTrigger>
@@ -39,3 +39,20 @@ export const LineVariant: Story = {
     </Tabs>
   ),
 };
+
+export const ActiveWhiteBackground: Story = {
+  render: () => (
+    <div className="rounded-lg">
+      <Tabs defaultValue="tab1" className="w-100">
+        <TabsList activeColor="white">
+          <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+          <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+          <TabsTrigger value="tab3">Tab 3</TabsTrigger>
+        </TabsList>
+        <TabsContent value="tab1">Content for tab 1.</TabsContent>
+        <TabsContent value="tab2">Content for tab 2.</TabsContent>
+        <TabsContent value="tab3">Content for tab 3.</TabsContent>
+      </Tabs>
+    </div>
+  ),
+};
diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
index 6a1e0f3..1db014b 100644
--- a/src/components/ui/tabs.tsx
+++ b/src/components/ui/tabs.tsx
@@ -39,12 +39,16 @@ const tabsListVariants = cva(
 function TabsList({
   className,
   variant = "default",
+  activeColor,
   ...props
-}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {
+}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants> & {
+  activeColor?: "white"
+}) {
   return (
     <TabsPrimitive.List
       data-slot="tabs-list"
       data-variant={variant}
+      data-active-color={activeColor}
       className={cn(tabsListVariants({ variant }), className)}
       {...props}
     />
@@ -59,6 +63,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
         "gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
+        "group-data-[active-color=white]/tabs-list:data-active:bg-white group-data-[active-color=white]/tabs-list:dark:data-active:bg-white",
         "after:bg-primary after:absolute after:opacity-0 after:transition-opacity after:inset-x-0 after:bottom-0 after:h-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100 group-data-[variant=line]/tabs-list:data-active:text-primary",
         className
       )}