Add Tabs

.changeset/chatty-bikes-clap.md

@@ -0,0 +1,5 @@
+---
+"@zenml-io/react-component-library": minor
+---
+
+add tabs

package.json

@@ -88,6 +88,7 @@
 		"@radix-ui/react-collapsible": "^1.0.3",
 		"@radix-ui/react-dropdown-menu": "^2.0.6",
 		"@radix-ui/react-slot": "^1.0.2",
+		"@radix-ui/react-tabs": "^1.0.4",
 		"@tanstack/react-table": "^8.15.3",
 		"class-variance-authority": "^0.7.0",
 		"clsx": "^2.1.0",

src/components/Tabs/Tabs.stories.tsx

@@ -0,0 +1,48 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./index";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Tabs",
+	component: Tabs,
+	argTypes: {},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Tabs>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Tabs",
+	render: () => (
+		<Tabs defaultValue="tab1">
+			<TabsList>
+				<TabsTrigger className="text-text-md" value="tab1">
+					<span>Tab 1</span>
+				</TabsTrigger>
+				<TabsTrigger className="text-text-md" value="tab2">
+					<span>Tab 2</span>
+				</TabsTrigger>
+				<TabsTrigger className="text-text-md" value="tab3">
+					<span>Tab 3</span>
+				</TabsTrigger>
+			</TabsList>
+
+			<TabsContent className="m-0 mt-5 border-0 bg-white p-0 h-[500px]" value="tab1">
+				<div>Tab Content 1</div>
+			</TabsContent>
+			<TabsContent className="m-0 mt-5 border-0 bg-white p-0 h-[500px]" value="tab2">
+				<div>Tab Content 2</div>
+			</TabsContent>
+			<TabsContent className="m-0 mt-5 border-0 bg-white p-0 h-[500px]" value="tab3">
+				<div>Tab Content 3</div>
+			</TabsContent>
+		</Tabs>
+	)
+};

src/components/Tabs/Tabs.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../../utilities";
+
+const Tabs = TabsPrimitive.Root;
+
+const TabsList = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.List>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.List
+		ref={ref}
+		className={cn("flex shrink-0 flex-wrap justify-start border-b text-text-sm", className)}
+		{...props}
+	/>
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+
+const TabsTrigger = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Trigger>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Trigger
+		ref={ref}
+		className={cn(
+			"group/trigger px-3 py-2 data-[state=active]:text-theme-text-brand data-[state=active]:shadow-inner data-[state=active]:shadow-primary-400 hover:data-[state=inactive]:shadow-inner hover:data-[state=inactive]:shadow-neutral-200",
+			className
+		)}
+		{...props}
+	/>
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+
+const TabsContent = React.forwardRef<
+	React.ElementRef<typeof TabsPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
+>(({ className, ...props }, ref) => (
+	<TabsPrimitive.Content
+		ref={ref}
+		className={cn(
+			"mt-5 grow rounded-md border border-theme-border-moderate bg-white p-7 outline-none",
+			className
+		)}
+		{...props}
+	/>
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+export { Tabs, TabsList, TabsTrigger, TabsContent };

src/components/Tabs/index.tsx

@@ -0,0 +1 @@
+export * from "./Tabs";

src/components/index.ts

@@ -9,4 +9,5 @@ export * from "./Table";
 export * from "./Tag";
 export * from "./Badge";
 export * from "./Spinner";
+export * from "./Tabs";
 export * from "./Collapsible";

src/tailwind/index.ts

@@ -359,7 +359,8 @@ export const zenmlPlugin = plugin(
 					}
 				},
 				boxShadow: {
-					sm: "0px 0px 4px 0px rgba(0, 0, 0, 0.10)"
+					sm: "0px 0px 4px 0px rgba(0, 0, 0, 0.10)",
+					inner: "inset 0 -2px 0 0,0 2px 0 0"
 				},
 				backgroundImage: {
 					"gradient-dark":