import { defineComponent as n, createBlock as r, openBlock as d, withCtx as u, createElementVNode as t, normalizeClass as l, unref as o, createVNode as m } from "vue";
import { cva as p, ScalarIcon as f } from "@scalar/components";
import b from "./DataTableCell.vue.js";
const h = ["checked", "disabled"], x = /* @__PURE__ */ n({
  __name: "DataTableCheckbox",
  props: {
    modelValue: { type: Boolean },
    disabled: { type: Boolean },
    align: { default: "center" }
  },
  emits: ["update:modelValue"],
  setup(e) {
    const c = p({
      base: "w-8 h-8 flex items-center justify-center text-border peer-checked:text-c-1 pointer-events-none absolute",
      variants: {
        align: {
          left: "left-0",
          center: "centered"
        }
      }
    });
    return (s, a) => (d(), r(b, { class: "group/cell relative flex min-w-8" }, {
      default: u(() => [
        t("input", {
          checked: e.modelValue,
          class: "peer absolute inset-0 size-full cursor-pointer opacity-0 disabled:cursor-default",
          disabled: !!e.disabled,
          type: "checkbox",
          onChange: a[0] || (a[0] = (i) => s.$emit("update:modelValue", i.target.checked))
        }, null, 40, h),
        t("div", {
          class: l(o(c)({ align: e.align }))
        }, [
          t("div", {
            class: l([
              "absolute m-auto size-3/4 rounded border-[1px] opacity-0",
              !e.disabled && "group-has-[:focus-visible]/cell:border-c-accent group-hover/cell:opacity-100 group-has-[:focus-visible]/cell:opacity-100"
            ])
          }, null, 2),
          m(o(f), {
            icon: "Checkmark",
            size: "xs",
            thickness: "2.5"
          })
        ], 2)
      ]),
      _: 1
    }));
  }
});
export {
  x as default
};
