import { cn } from "../../utils/cn.mjs";
import { cva } from "class-variance-authority";
import { jsx, jsxs } from "react/jsx-runtime";

//#region src/components/Input/Checkbox.tsx
const checkboxVariants = cva([
	"appearance-none",
	"relative cursor-pointer border-2",
	"focus:outline-0",
	"checked:border-current checked:bg-current checked:hover:bg-current/80",
	"ring-current/20 ring-offset-current",
	"hover:bg-current/20",
	"disabled:opacity-50",
	"ring-0 transition-all duration-300 ease-in-out hover:ring-4 focus-visible:ring-6",
	"checked:before:absolute checked:before:inset-0 checked:before:content-['✓']",
	"checked:before:flex checked:before:items-center checked:before:justify-center",
	"checked:before:text-text-opposite/80",
	"rounded-xl [corner-shape:squircle] supports-[corner-shape:squircle]:rounded-2xl",
	"after:absolute after:-inset-2 after:content-['']"
].join(" "), {
	variants: {
		variant: { default: "" },
		size: {
			sm: "size-4 rounded-md",
			md: "size-5 rounded-lg",
			lg: "size-6 rounded-xl"
		},
		color: {
			primary: "accent-primary",
			secondary: "accent-secondary",
			destructive: "accent-destructive",
			neutral: "accent-neutral",
			light: "accent-light",
			text: "accent-text",
			dark: "accent-dark",
			error: "accent-error",
			success: "accent-success",
			custom: "accent-custom"
		},
		validationStyleEnabled: {
			disabled: "",
			enabled: "valid:border-success invalid:border-error"
		}
	},
	defaultVariants: {
		variant: "default",
		color: "primary",
		validationStyleEnabled: "disabled",
		size: "md"
	}
});
let CheckboxSize = /* @__PURE__ */ function(CheckboxSize) {
	CheckboxSize["SM"] = "sm";
	CheckboxSize["MD"] = "md";
	CheckboxSize["LG"] = "lg";
	return CheckboxSize;
}({});
let CheckboxColor = /* @__PURE__ */ function(CheckboxColor) {
	CheckboxColor["PRIMARY"] = "primary";
	CheckboxColor["SECONDARY"] = "secondary";
	CheckboxColor["DESTRUCTIVE"] = "destructive";
	CheckboxColor["NEUTRAL"] = "neutral";
	CheckboxColor["LIGHT"] = "light";
	CheckboxColor["TEXT"] = "text";
	CheckboxColor["DARK"] = "dark";
	CheckboxColor["ERROR"] = "error";
	CheckboxColor["SUCCESS"] = "success";
	CheckboxColor["CUSTOM"] = "custom";
	return CheckboxColor;
}({});
const Input = ({ validationStyleEnabled = false, label, size, color, name, variant, className, labelClassName, ...props }) => /* @__PURE__ */ jsx("input", {
	type: "checkbox",
	className: cn(checkboxVariants({
		variant,
		size,
		color,
		validationStyleEnabled: validationStyleEnabled ? "enabled" : "disabled"
	}), className),
	...props
});
const Checkbox = (props) => {
	const { label, name, id } = props;
	return label ? /* @__PURE__ */ jsxs("label", {
		htmlFor: id ?? name,
		className: cn("flex w-full cursor-pointer items-center gap-x-4 font-medium text-sm", props.labelClassName),
		children: [/* @__PURE__ */ jsx(Input, {
			id: id ?? name,
			...props
		}), label]
	}) : /* @__PURE__ */ jsx(Input, {
		id: id ?? name,
		...props
	});
};

//#endregion
export { Checkbox, CheckboxColor, CheckboxSize, checkboxVariants };
//# sourceMappingURL=Checkbox.mjs.map