@playbooks/ui/dist/checkboxes.es.js

An interface library for Playbooks.

import { jsxs, jsx } from "react/jsx-runtime";
import { c as computeTailwind, L as Label, I as Input } from "./index.es-7ZX4yv7W.js";
import { useUI } from "./context.es.js";
import { P, Small } from "./fonts.es.js";
import { Div } from "./html.es.js";
const Checkbox = ({
  id,
  name = "Checkbox",
  title,
  text,
  checked,
  onChange,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.checkbox({ active: checked });
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsxs(Label, { id, className: classes, children: [
    /* @__PURE__ */ jsx(CheckboxInput, { id, checked, onChange }),
    /* @__PURE__ */ jsxs(Div, { space: "space-y-1", tailwind: tailwind?.div, children: [
      title && /* @__PURE__ */ jsx(CheckboxTitle, { tailwind: tailwind?.title, children: title }),
      text && /* @__PURE__ */ jsx(CheckboxText, { tailwind: tailwind?.text, children: text })
    ] })
  ] });
};
const CheckboxInput = ({
  id,
  name = "CheckboxInput",
  checked,
  onChange,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.checkboxInput();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(Input, { id, type: "checkbox", name, checked, onChange, className: classes, children });
};
const CheckboxTitle = ({ name = "CheckboxLabel", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.checkboxTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const CheckboxText = ({ name = "CheckboxLabel", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.checkboxText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Small, { ...computed, children });
};
export {
  Checkbox,
  CheckboxInput,
  CheckboxText,
  CheckboxTitle
};