@thinkbuff/figma-react
Version:
A Figma React UI components for creating plugins and widgets
54 lines (51 loc) • 1.78 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cn } from '../../utils/cn.mjs';
const ActionIcon = forwardRef(
({ className, disabled, asChild = false, ...props }, ref) => {
const Component = asChild ? Slot : "button";
return /* @__PURE__ */ jsx(
Component,
{
ref,
className: cn(
"size-8",
"font-size-11",
"flex",
"justify-center",
"items-center",
"shrink-0",
"rounded-0.5",
"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",
"text-figma-disabled",
"fill-figma-icon-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=open]:bg-figma-brand data-[state=open]:text-figma-icon-onbrand data-[state=open]:fill-figma-icon-onbrand",
"data-[state=open]:hover:bg-figma-brand data-[state=open]:hover:text-figma-icon-onbrand data-[state=open]:hover:fill-figma-icon-onbrand"
],
className
),
...props,
disabled
}
);
}
);
ActionIcon.displayName = "ActionIcon";
export { ActionIcon };