'use strict';
'use client';
import { jsxs, jsx } from 'react/jsx-runtime';
import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
import { cn } from '../../../fd-toolbox/lib/utils.js';
import { Icon } from '../icon/Icon.js';

var __defProp = Object.defineProperty;
var __name = (target, value) => __defProp(target, "name", {
  value,
  configurable: true
});
function Checkbox({
  className,
  text,
  checked,
  onCheckedChange,
  id
}) {
  return /* @__PURE__ */jsxs("div", {
    className: "flex items-center",
    children: [/* @__PURE__ */jsx(Checkbox$1.Root, {
      id,
      className: cn("border-primary focus-visible:ring-primary peer size-4 shrink-0 rounded-sm border shadow focus-visible:ring-1 focus-visible:outline-none", "data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground disabled:cursor-not-allowed disabled:opacity-50", className),
      checked,
      onCheckedChange,
      children: /* @__PURE__ */jsx(Checkbox$1.Indicator, {
        className: cn("flex items-center justify-center text-current"),
        children: /* @__PURE__ */jsx(Icon, {
          name: "check",
          color: "text-fd-tertiary-200"
        })
      })
    }), text && /* @__PURE__ */jsx("div", {
      className: "ml-2 grid gap-1.5 leading-none",
      children: /* @__PURE__ */jsx("label", {
        className: "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
        children: text
      })
    })]
  });
}
__name(Checkbox, "Checkbox");
Checkbox.displayName = Checkbox$1.Root.displayName;

export { Checkbox };
