@voilajsx/uikit
Version:
Cross-platform React components with beautiful themes and OKLCH color science
49 lines (48 loc) • 1.65 kB
JavaScript
import { jsx } from "react/jsx-runtime";
import { forwardRef } from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "./utils.js";
const Tabs = TabsPrimitive.Root;
const TabsList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
TabsPrimitive.List,
{
ref,
className: cn(
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
className
),
...props
}
));
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
TabsPrimitive.Trigger,
{
ref,
className: cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
className
),
...props
}
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
TabsPrimitive.Content,
{
ref,
className: cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className
),
...props
}
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
export {
Tabs,
TabsContent,
TabsList,
TabsTrigger
};
//# sourceMappingURL=tabs.js.map