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

A Figma React UI components for creating plugins and widgets

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

const Checkbox = forwardRef(
  ({ className, checked, indeterminate = false, disabled, ...props }, ref) => /* @__PURE__ */ jsx(
    CheckboxPrimitive.Root,
    {
      ref,
      className: cn(
        "peer",
        "relative",
        "size-3",
        "inline-flex",
        "items-center",
        "justify-center",
        "shrink-0",
        "cursor-default",
        "rounded-0.5",
        "outline-solid",
        "outline-1",
        "outline-transparent",
        "border",
        "border-solid",
        "border-figma-icon",
        "bg-figma",
        disabled ? [
          "cursor-not-allowed",
          "text-figma-disabled",
          "border-figma-bg-disabled",
          "data-[state=checked]:text-figma-ondisabled data-[state=checked]:bg-figma-disabled"
        ] : [
          "focus:border-figma-selected-strong focus:outline-figma-border-selected-strong",
          "data-[state=checked]:focus:border-figma-bg",
          "data-[state=checked]:bg-figma-brand data-[state=checked]:text-figma-onbrand data-[state=checked]:border-figma-bg-brand"
        ],
        className
      ),
      ...props,
      checked: indeterminate ? "indeterminate" : checked,
      disabled,
      children: /* @__PURE__ */ jsx(
        CheckboxPrimitive.Indicator,
        {
          className: "absolute inline-block size-2.5",
          asChild: true,
          children: indeterminate ? /* @__PURE__ */ jsx("span", { className: "i-mdi-minus-thick" }) : /* @__PURE__ */ jsx("span", { className: "i-mdi-check-bold -mt-1px" })
        }
      )
    }
  )
);
Checkbox.displayName = CheckboxPrimitive.Root.displayName;

export { Checkbox };