import { cn } from "./cva.js";
import { useFieldControl } from "./Field.js";
import * as React from "react";
import { jsx } from "react/jsx-runtime";
import * as RCheckbox from "@radix-ui/react-checkbox";
//#region src/Checkbox.tsx
const Checkbox = React.forwardRef(({ id, className, ...props }, ref) => {
	const field = useFieldControl();
	return /* @__PURE__ */ jsx(RCheckbox.Root, {
		ref,
		id: id ?? field?.id,
		"aria-describedby": props["aria-describedby"] ?? field?.describedBy,
		className: cn("inline-flex h-[var(--mod-touch-min)] w-[var(--mod-touch-min)] items-center justify-center rounded-sm border border-border bg-surface text-[var(--mod-color-accent-contrast)] focus-visible:outline-[var(--mod-focus-ring-width)] focus-visible:outline-[var(--mod-focus-ring-color)] focus-visible:outline-offset-[var(--mod-focus-ring-offset)] disabled:cursor-not-allowed disabled:opacity-[var(--mod-opacity-disabled)] data-[state=checked]:border-[var(--mod-color-accent-9)] data-[state=checked]:bg-[var(--mod-color-accent-9)] data-[state=checked]:hover:bg-[var(--mod-color-accent-10)] data-[state=checked]:active:bg-[var(--mod-color-accent-11)] data-[state=indeterminate]:border-[var(--mod-color-accent-9)] data-[state=indeterminate]:bg-[var(--mod-color-accent-9)]", className),
		...props,
		children: /* @__PURE__ */ jsx(RCheckbox.Indicator, { children: /* @__PURE__ */ jsx("svg", {
			viewBox: "0 0 16 16",
			className: "h-3 w-3",
			"aria-hidden": "true",
			fill: "none",
			stroke: "currentColor",
			strokeWidth: "2",
			children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4" })
		}) })
	});
});
Checkbox.displayName = "Checkbox";
//#endregion
export { Checkbox };
