welcome-ui/dist/Checkbox.js

Customizable design system with react, typescript, tailwindcss and ariakit.

"use client";
import './Checkbox.css';
import { jsxs as b, jsx as s } from "react/jsx-runtime";
import { a as x } from "./I7KWAPMF-DQWZpGyL.js";
import { forwardRef as w, useState as h } from "react";
import { useField as g } from "./Field.js";
import { VisuallyHidden as C } from "./VisuallyHidden.js";
import { c as V } from "./index-B6iGEm-i.js";
import { Icon as l } from "./Icon.js";
const k = "_root_paw59_2", y = "_indeterminate_paw59_61", F = {
  root: k,
  "variant-danger": "_variant-danger_paw59_43",
  "variant-warning": "_variant-warning_paw59_49",
  "variant-success": "_variant-success_paw59_55",
  indeterminate: y
}, N = V(F), j = w(
  ({ checked: a = !1, className: m, indeterminate: i = !1, onChange: e, variant: d, ...o }, f) => {
    const [u, n] = h(!1), { getInputProps: t, variant: p } = g(), r = p || d, { disabled: c } = t(o), _ = (v) => {
      e && e(!a, v);
    };
    return /* @__PURE__ */ b(
      "div",
      {
        "aria-checked": a,
        "aria-disabled": c,
        className: N(
          "root",
          r && `variant-${r}`,
          i && "indeterminate",
          "field-input",
          m
        ),
        "data-focus-visible": u || void 0,
        onClick: c ? void 0 : _,
        children: [
          /* @__PURE__ */ s(C, { children: /* @__PURE__ */ s(
            x,
            {
              ...t(o),
              checked: a,
              onBlur: () => n(!1),
              onFocusVisible: () => n(!0),
              ref: f
            }
          ) }),
          a ? /* @__PURE__ */ s(l, { name: "check", size: "sm" }) : null,
          !a && i ? /* @__PURE__ */ s(l, { name: "minus", size: "sm" }) : null
        ]
      }
    );
  }
);
j.displayName = "Checkbox";
export {
  j as Checkbox,
  F as checkboxClasses
};