@thinkbuff/figma-react
Version:
A Figma React UI components for creating plugins and widgets
52 lines (49 loc) • 1.66 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as TogglePrimitive from '@radix-ui/react-toggle';
import { cn } from '../../utils/cn.mjs';
const Toggle = forwardRef(({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
TogglePrimitive.Root,
{
ref,
className: cn(
"size-8",
"font-size-11",
"text-figma",
"inline-flex",
"items-center",
"justify-center",
"shrink-0",
"rounded-0.5",
"font-medium",
"cursor-default",
"appearance-none",
"text-figma-icon",
"fill-figma-icon",
"bg-transparent",
"bg-clip-border",
"outline-solid",
"outline-1",
"-outline-offset-1",
"outline-transparent",
"transition-colors",
"focus:not-focus-visible:outline-0 focus:not-focus-visible:outline-transparent",
disabled ? [
"cursor-not-allowed",
"pointer-events-none",
"text-figma-disabled",
"fill-figma-icon-disabled",
"data-[state=on]:bg-figma-disabled"
] : [
"hover:bg-figma-hover hover:text-figma-icon-hover hover:fill-figma-icon-hover",
"focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-figma-border-brand-strong",
"data-[state=on]:bg-figma-brand data-[state=on]:text-figma-icon-onbrand data-[state=on]:fill-figma-icon-onbrand",
"data-[state=on]:hover:bg-figma-brand data-[state=on]:hover:text-figma-icon-onbrand data-[state=on]:hover:fill-figma-icon-onbrand"
],
className
),
...props
}
));
Toggle.displayName = TogglePrimitive.Root.displayName;
export { Toggle };