@thinkbuff/figma-react/dist/components/tabs/tabs.mjs

A Figma React UI components for creating plugins and widgets

import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as TabsPrimitive from '@radix-ui/react-tabs';
import { cn } from '../../utils/cn.mjs';

const TabsRoot = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.Root,
  {
    className: cn("bg-figma", className),
    ...props,
    ref
  }
));
TabsRoot.displayName = TabsPrimitive.Root.displayName;
const TabsList = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.List,
  {
    className: cn(
      "bg-figma",
      "inline-flex",
      "items-center",
      "justify-center",
      "border-b",
      "border-solid",
      "border-figma",
      className
    ),
    ...props,
    ref
  }
));
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.Trigger,
  {
    className: cn(
      "inline-flex",
      "items-center",
      "justify-center",
      "px-3",
      "font-size-11",
      "text-figma-secondary",
      "bg-transparent",
      "hover:text-figma",
      "data-[state=active]:text-figma data-[state=active]:font-bold",
      "disabled:pointer-events-none",
      className
    ),
    ...props,
    ref
  }
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
  TabsPrimitive.Content,
  {
    className: cn("bg-figma", className),
    ...props,
    ref
  }
));
TabsContent.displayName = TabsPrimitive.Content.displayName;

export { TabsContent as Content, TabsList as List, TabsRoot as Root, TabsTrigger as Trigger };