@thinkbuff/figma-react
Version:
A Figma React UI components for creating plugins and widgets
59 lines (56 loc) • 1.69 kB
JavaScript
import { jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import * as ToggleGroupPrimitive from '@radix-ui/react-toggle-group';
import { cn } from '../../utils/cn.mjs';
const ToggleGroup = forwardRef(({ className, children, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
ToggleGroupPrimitive.Root,
{
ref,
className: cn(
"group",
"flex",
"items-center",
"justify-center",
"bg-figma",
"border",
"border-solid",
"border-transparent",
"rounded-0.5",
disabled ? "cursor-not-allowed" : "hover:border-figma",
className
),
...props,
disabled,
children
}
));
ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
const ToggleGroupItem = forwardRef(({ className, children, ...props }, ref) => {
return /* @__PURE__ */ jsx(
ToggleGroupPrimitive.Item,
{
ref,
className: cn(
"size-6",
"font-size-11",
"flex",
"justify-center",
"items-center",
"cursor-default",
"appearance-none",
"text-figma",
"fill-figma-icon",
"bg-transparent",
"transition-colors",
"data-[state=on]:bg-figma-tertiary",
"disabled:pointer-events-none disabled:cursor-not-allowed disabled:text-figma-disabled disabled:fill-figma-icon-disabled",
"disabled:data-[state=on]:bg-figma-disabled disabled:data-[state=on]:text-figma-ondisabled disabled:data-[state=on]:fill-figma-icon-ondisabled",
className
),
...props,
children
}
);
});
ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
export { ToggleGroup, ToggleGroupItem };