@playbooks/ui/dist/radios.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 Radio = ({
  id,
  name = "Radio",
  title,
  text,
  value,
  onClick,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.radio({ active: value });
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsxs(Label, { id, onClick, className: classes, children: [
    /* @__PURE__ */ jsx(RadioInput, { value }),
    /* @__PURE__ */ jsxs(Div, { space: "space-y-1", tailwind: tailwind?.div, children: [
      title && /* @__PURE__ */ jsx(RadioTitle, { tailwind: tailwind?.title, children: title }),
      text && /* @__PURE__ */ jsx(RadioText, { tailwind: tailwind?.text, children: text })
    ] })
  ] });
};
const RadioInput = ({
  id,
  name = "RadioInput",
  value,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.radioInput();
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  return /* @__PURE__ */ jsx(Input, { id, type: "radio", name, checked: value, className: classes, readOnly: true, children });
};
const RadioTitle = ({ name = "RadioLabel", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.radioTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const RadioText = ({ name = "RadioLabel", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.radioText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Small, { ...computed, children });
};
export {
  Radio,
  RadioInput,
  RadioText,
  RadioTitle
};