From 46c6edf4582f1800bb8a27f571a8ea2cb5f3892d Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Mon, 10 Nov 2025 15:44:53 +0100
Subject: [PATCH 1/2] feat: add Tab component with horizontal and vertical
 orientation support

---
 src/components/tab/Tab.stories.tsx | 60 ++++++++++++++++++++++++++++++
 src/components/tab/Tab.style.scss  | 48 ++++++++++++++++++++++++
 src/components/tab/Tab.tsx         | 37 ++++++++++++++++++
 3 files changed, 145 insertions(+)
 create mode 100644 src/components/tab/Tab.stories.tsx
 create mode 100644 src/components/tab/Tab.style.scss
 create mode 100644 src/components/tab/Tab.tsx

diff --git a/src/components/tab/Tab.stories.tsx b/src/components/tab/Tab.stories.tsx
new file mode 100644
index 00000000..c62daa99
--- /dev/null
+++ b/src/components/tab/Tab.stories.tsx
@@ -0,0 +1,60 @@
+import {Meta} from "@storybook/react";
+import {Tab, TabContent, TabList, TabTrigger} from "./Tab";
+import {Button} from "../button/Button";
+import {Text} from "../text/Text";
+import React from "react";
+import {IconHome, IconBuilding} from "@tabler/icons-react";
+
+export default {
+    title: "Tab",
+} as Meta
+
+export const TabExample = () => {
+    return <Tab orientation={"horizontal"} defaultValue={"overview"}>
+        <TabList>
+            <TabTrigger value={"overview"}>
+                <Button variant={"none"}>
+                    <IconHome size={16}/>
+                    Overview
+                </Button>
+            </TabTrigger>
+            <TabTrigger value={"organizations"}>
+                <Button variant={"none"}>
+                    <IconBuilding size={16}/>
+                    Organizations
+                </Button>
+            </TabTrigger>
+        </TabList>
+        <TabContent value={"overview"}>
+            <Text>Overview</Text>
+        </TabContent>
+        <TabContent value={"organizations"}>
+            <Text>Organizations</Text>
+        </TabContent>
+    </Tab>
+}
+
+export const TabExampleVertical = () => {
+    return <Tab orientation={"vertical"} defaultValue={"overview"}>
+        <TabList>
+            <TabTrigger value={"overview"}>
+                <Button variant={"none"}>
+                    <IconHome size={16}/>
+                    Overview
+                </Button>
+            </TabTrigger>
+            <TabTrigger value={"organizations"}>
+                <Button variant={"none"}>
+                    <IconBuilding size={16}/>
+                    Organizations
+                </Button>
+            </TabTrigger>
+        </TabList>
+        <TabContent w={"200px"} value={"overview"}>
+            <Text>Overview</Text>
+        </TabContent>
+        <TabContent w={"200px"} value={"organizations"}>
+            <Text>Organizations</Text>
+        </TabContent>
+    </Tab>
+}
\ No newline at end of file
diff --git a/src/components/tab/Tab.style.scss b/src/components/tab/Tab.style.scss
new file mode 100644
index 00000000..275d3102
--- /dev/null
+++ b/src/components/tab/Tab.style.scss
@@ -0,0 +1,48 @@
+@use "../../styles/variables";
+@use "../../styles/helpers";
+
+.tab {
+
+  &[data-orientation="vertical"] {
+    display: flex;
+  }
+
+  &__list {
+    display: flex;
+
+    &[data-orientation="vertical"] {
+      flex-direction: column;
+    }
+  }
+
+  &__trigger {
+    background: transparent;
+    border: none;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    box-sizing: border-box;
+
+    &[data-orientation="vertical"] {
+      border-left: 2px solid transparent;
+    }
+    &[data-orientation="horizontal"] {
+      border-bottom: 2px solid transparent;
+    }
+
+    &[aria-selected=true] {
+      &[data-orientation="vertical"] {
+        border-left: 2px solid helpers.borderColor(variables.$info);
+      }
+      &[data-orientation="horizontal"] {
+        border-bottom: 2px solid helpers.borderColor(variables.$info);
+      }
+    }
+
+  }
+
+  &__content {
+
+  }
+
+}
\ No newline at end of file
diff --git a/src/components/tab/Tab.tsx b/src/components/tab/Tab.tsx
new file mode 100644
index 00000000..095afa3c
--- /dev/null
+++ b/src/components/tab/Tab.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import {Code0ComponentProps, mergeCode0Props} from "../../utils";
+import {
+    Content,
+    List,
+    Tabs,
+    TabsContentProps,
+    TabsListProps,
+    TabsProps,
+    TabsTriggerProps,
+    Trigger
+} from "@radix-ui/react-tabs";
+import "./Tab.style.scss"
+
+export type TabProps = Code0ComponentProps & TabsProps
+export type TabListProps = Code0ComponentProps & TabsListProps;
+export type TabTriggerProps = Code0ComponentProps & TabsTriggerProps
+export type TabContentProps = Code0ComponentProps & TabsContentProps
+
+export const Tab: React.FC<TabProps> = (props) => {
+    return <Tabs data-slot="tabs" {...mergeCode0Props("tab", props)}/>
+}
+
+export const TabList: React.FC<TabListProps> = (props) => {
+    return <List data-slot="tabs" {...mergeCode0Props("tab__list", props)}/>
+}
+
+export const TabTrigger: React.FC<TabTriggerProps> = (props) => {
+    return <Trigger data-slot="tabs"
+                    data-value={props.value}
+                    {...mergeCode0Props("tab__trigger", props) as TabTriggerProps}/>
+
+}
+
+export const TabContent: React.FC<TabContentProps> = (props) => {
+    return <Content data-slot="tabs" {...mergeCode0Props("tab__content", props) as TabContentProps}/>
+}
\ No newline at end of file

From e00f93ee2ab9c65d55f05f5ee87054b0ff46a906 Mon Sep 17 00:00:00 2001
From: nicosammito <nico@sammito.de>
Date: Mon, 10 Nov 2025 15:51:38 +0100
Subject: [PATCH 2/2] feat: enhance Tab component styles for vertical and
 horizontal orientations

---
 src/components/tab/Tab.style.scss | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/src/components/tab/Tab.style.scss b/src/components/tab/Tab.style.scss
index 275d3102..dbef8885 100644
--- a/src/components/tab/Tab.style.scss
+++ b/src/components/tab/Tab.style.scss
@@ -23,19 +23,36 @@
     position: relative;
     box-sizing: border-box;
 
+    &:after {
+      content: "";
+      position: absolute;
+      background: transparent;
+      border-radius: 50rem;
+    }
+
     &[data-orientation="vertical"] {
-      border-left: 2px solid transparent;
+      &:after {
+        height: 100%;
+        width: 2px;
+        top: 0;
+        left: 0;
+      }
     }
+
     &[data-orientation="horizontal"] {
-      border-bottom: 2px solid transparent;
+      &:after {
+        width: 100%;
+        height: 2px;
+        bottom: 0;
+        left: 0;
+      }
     }
 
     &[aria-selected=true] {
-      &[data-orientation="vertical"] {
-        border-left: 2px solid helpers.borderColor(variables.$info);
-      }
-      &[data-orientation="horizontal"] {
-        border-bottom: 2px solid helpers.borderColor(variables.$info);
+      &[data-orientation="vertical"], &[data-orientation="horizontal"] {
+        &:after {
+          background: variables.$info;
+        }
       }
     }