@arolariu/components/dist/esm/components/ui/tabs.js

🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

"use client";
import { jsx } from "react/jsx-runtime";
import "react";
import { Content, List, Root, Trigger } from "@radix-ui/react-tabs";
import { cn } from "../../lib/utils.js";
function Tabs({ className, ...props }) {
    return /*#__PURE__*/ jsx(Root, {
        "data-slot": "tabs",
        className: cn("flex flex-col gap-2", className),
        ...props
    });
}
function TabsList({ className, ...props }) {
    return /*#__PURE__*/ jsx(List, {
        "data-slot": "tabs-list",
        className: cn("bg-neutral-100 text-neutral-500 inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px] dark:bg-neutral-800 dark:text-neutral-400", className),
        ...props
    });
}
function TabsTrigger({ className, ...props }) {
    return /*#__PURE__*/ jsx(Trigger, {
        "data-slot": "tabs-trigger",
        className: cn("data-[state=active]:bg-white dark:data-[state=active]:text-neutral-950 focus-visible:border-neutral-950 focus-visible:ring-neutral-950/50 focus-visible:outline-ring dark:data-[state=active]:border-neutral-200 dark:data-[state=active]:bg-neutral-200/30 text-neutral-950 dark:text-neutral-500 inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-neutral-200 border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 dark:data-[state=active]:bg-neutral-950 dark:dark:data-[state=active]:text-neutral-50 dark:focus-visible:border-neutral-300 dark:focus-visible:ring-neutral-300/50 dark:dark:data-[state=active]:border-neutral-800 dark:dark:data-[state=active]:bg-neutral-800/30 dark:text-neutral-50 dark:dark:text-neutral-400 dark:border-neutral-800", className),
        ...props
    });
}
function TabsContent({ className, ...props }) {
    return /*#__PURE__*/ jsx(Content, {
        "data-slot": "tabs-content",
        className: cn("flex-1 outline-none", className),
        ...props
    });
}
export { Tabs, TabsContent, TabsList, TabsTrigger };

//# sourceMappingURL=tabs.js.map