Tabs Component

import { Tabs, TabsList, TabsPanel, TabsTrigger } from "@/registry/components/tabs/react/tabs";

export const TabsDemo = () => {
    return (
        <Tabs defaultValue="account" className="grid gutter-2xs">
            <TabsList className="w-fit-content">
                <TabsTrigger value="account">Account</TabsTrigger>
                <TabsTrigger value="password">Password</TabsTrigger>
            </TabsList>
            <TabsPanel value="account">
                <p>Tab 1 content</p>
            </TabsPanel>
            <TabsPanel value="password">
                <p>Tab 2 content</p>
            </TabsPanel>
        </Tabs>
    );
};

"use client";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import cn from "clsx";
import type * as React from "react";

function Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {
    return <TabsPrimitive.Root data-slot="tabs" className={cn("tabs", className)} {...props} />;
}
function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {
    return (
        <TabsPrimitive.List
            data-slot="tabs-list"
            className={cn("tabs-list", className)}
            {...props}
        />
    );
}
function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
    return (
        <TabsPrimitive.Trigger
            data-slot="tabs-trigger"
            className={cn("tabs-trigger", className)}
            {...props}
        />
    );
}
function TabsPanel({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {
    return (
        <TabsPrimitive.Content
            data-slot="tabs-content"
            className={cn("tabs-panel", className)}
            {...props}
        />
    );
}
export { Tabs, TabsList, TabsTrigger, TabsPanel };

.tabs {
    border-radius: var(--tabs-radius);
    border: var(--tabs-border);
}

.tabs-list {
    display: flex;
    background-color: var(--tabs-list-bg);
    padding: var(--tabs-list-padding-block) var(--tabs-list-padding-inline);
    border-radius: calc(var(--tabs-radius) * 1.25);
    border: var(--tabs-list-border);
}

.tabs-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: var(--tabs-trigger-gap);
    border: var(--tabs-trigger-border);
    padding-block: var(--tabs-trigger-padding-block);
    padding-inline: var(--tabs-trigger-padding-inline);
    background-color: var(--tabs-trigger-bg);
    color: var(--tabs-trigger-color);
    border-radius: var(--tabs-trigger-radius);
    font-size: var(--tabs-trigger-font-size);
    font-weight: var(--tabs-trigger-font-weight);
    transition: color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.tabs-trigger[data-state="active"] {
    background-color: var(--tabs-trigger-active-bg);
    color: var(--tabs-trigger-active-color);
    box-shadow: var(--tabs-trigger-shadow);
}

.tabs-panel[data-state="inactive"] {
    display: none;
}

{
  "tabs": {
    "radius": {
      "$value": "{radius.panel}"
    },
    "border": {
      "$value": "{border.transparent}"
    },
    "list-bg": {
      "$value": "{color.bg-offset-1}"
    },
    "list-border": {
      "$value": "{border.transparent}"
    },
    "list-padding-inline": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "list-padding-block": {
      "$type": "dimension",
      "$value": {
        "value": 3,
        "unit": "px"
      }
    },
    "trigger-font-size": {
      "$value": "{text.sm}"
    },
    "trigger-font-weight": {
      "$value": "{font.weight.medium}"
    },
    "trigger-bg": {
      "$value": "{color.bg-offset-1}"
    },
    "trigger-border": {
      "$value": "{border.transparent}"
    },
    "trigger-shadow": {
      "$value": "{shadow.sm}"
    },
    "trigger-padding-block": {
      "$value": "{space.3xs}"
    },
    "trigger-padding-inline": {
      "$value": "{space.xs}"
    },
    "trigger-radius": {
      "$value": "{radius.button}"
    },
    "trigger-active-bg": {
      "$value": "{color.bg}"
    },
    "trigger-active-color": {
      "$value": "{color.text.primary}"
    },
    "trigger-gap": {
      "$type": "dimension",
      "$value": {
        "value": 0.375,
        "unit": "rem"
      }
    }
  }
}