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

A Figma React UI components for creating plugins and widgets

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

const RadioGroup = forwardRef(({ className, inline = false, ...props }, ref) => {
  return /* @__PURE__ */ jsx(
    RadioGroupPrimitive.Root,
    {
      ref,
      className: cn(
        "flex",
        "gap-2",
        inline ? "flex-row" : "flex-col",
        className
      ),
      ...props
    }
  );
});
RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
const RadioGroupItem = forwardRef(({ className, ...props }, ref) => {
  return /* @__PURE__ */ jsx(
    RadioGroupPrimitive.Item,
    {
      ref,
      className: cn(
        "peer",
        "group",
        "size-3.5",
        "text-figma",
        "fill-figma-icon",
        "border",
        "border-solid",
        "border-figma-icon",
        "rounded-full",
        "aspect-square",
        "cursor-default",
        "outline-solid",
        "outline-1",
        "-outline-offset-2",
        "outline-transparent",
        "bg-clip-border",
        "not-disabled:focus:border-figma-selected not-disabled:focus:outline-figma-border-selected",
        "disabled:cursor-not-allowed disabled:text-figma-disabled disabled:fill-figma-icon-disabled disabled:border-figma-disabled-strong",
        className
      ),
      ...props,
      children: /* @__PURE__ */ jsx(RadioGroupPrimitive.Indicator, { className: "pointer-events-none flex items-center justify-center after:block after:size-1.5 after:rounded-full after:content-[''] after:bg-figma-icon group-disabled:after:bg-figma-icon-disabled" })
    }
  );
});
RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;

export { RadioGroup as Group, RadioGroupItem as GroupItem };