nextuiq/dist/index23.mjs

NextUIQ is a modern, lightweight, and developer-friendly UI component library for React and Next.js. Built with TypeScript and Tailwind CSS, it offers customizable, accessible, and performance-optimized components with built-in dark mode, theme customizat

import { j as jsxRuntimeExports } from './index46.mjs';
import { forwardRef, useId } from 'react';

const CheckboxComponent = forwardRef(({
  label,
  checked,
  id,
  onChange,
  className = "",
  disabled = false,
  required = false,
  name,
  "aria-label": ariaLabel,
  "aria-describedby": ariaDescribedby,
  ...props
}, ref) => {
  const uniqueId = useId();
  const checkboxId = id || uniqueId;
  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
    "label",
    {
      htmlFor: checkboxId,
      className: `flex items-center space-x-3 group ${disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer"}`,
      children: [
        /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "relative w-5 h-5", children: [
          /* @__PURE__ */ jsxRuntimeExports.jsx(
            "input",
            {
              ref,
              id: checkboxId,
              type: "checkbox",
              name,
              className: `w-5 h-5 appearance-none border rounded-md
            border-[oklch(var(--theme-border))]
            checked:border-transparent
            checked:bg-[oklch(var(--theme-primary))]
            disabled:opacity-60 
            focus-visible:outline-none 
            focus-visible:ring-2 
            focus-visible:ring-[oklch(var(--theme-ring))]
            ${disabled ? "cursor-not-allowed" : "cursor-pointer"}
            ${className}`,
              checked,
              onChange: (e) => onChange(e.target.checked),
              disabled,
              required,
              "aria-label": ariaLabel || (typeof label === "string" ? label : void 0),
              "aria-describedby": ariaDescribedby,
              "aria-checked": checked,
              ...props
            }
          ),
          checked && /* @__PURE__ */ jsxRuntimeExports.jsx(
            "svg",
            {
              className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none",
              xmlns: "http://www.w3.org/2000/svg",
              width: "14",
              height: "14",
              viewBox: "0 0 14 14",
              fill: "none",
              "aria-hidden": "true",
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                "path",
                {
                  d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
                  stroke: "oklch(var(--theme-primary-foreground))",
                  strokeWidth: "1.94437",
                  strokeLinecap: "round",
                  strokeLinejoin: "round"
                }
              )
            }
          ),
          disabled && /* @__PURE__ */ jsxRuntimeExports.jsx(
            "svg",
            {
              className: "absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none",
              xmlns: "http://www.w3.org/2000/svg",
              width: "14",
              height: "14",
              viewBox: "0 0 14 14",
              fill: "none",
              "aria-hidden": "true",
              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
                "path",
                {
                  d: "M11.6666 3.5L5.24992 9.91667L2.33325 7",
                  stroke: "oklch(var(--theme-muted-foreground))",
                  strokeWidth: "2.33333",
                  strokeLinecap: "round",
                  strokeLinejoin: "round"
                }
              )
            }
          )
        ] }),
        label && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-sm font-medium text-[oklch(var(--theme-foreground))]", children: label })
      ]
    }
  );
});
CheckboxComponent.displayName = "Checkbox";
const Checkbox = CheckboxComponent;

export { Checkbox };