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

An interface library for Playbooks.

import { jsx } from "react/jsx-runtime";
import { a as computeProps, v as Section$1 } from "./index.es-7ZX4yv7W.js";
import { useUI } from "./context.es.js";
import { Small, Font, P } from "./fonts.es.js";
import { Div, Hr } from "./html.es.js";
const Section = ({ name = "Section", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.section();
  const formatted = { ...base, ...props, ...tailwind };
  const filtered = computeProps(props);
  return /* @__PURE__ */ jsx(Section$1, { name, tailwind: formatted, className, ...filtered, children });
};
const SectionHeader = ({
  name = "SectionHeader",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionHeader();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const SectionPretitle = ({
  name = "SectionPretitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionPretitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Small, { ...computed, children });
};
const SectionTitle = ({
  name = "SectionTitle",
  size = "h5",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const SectionSubtitle = ({
  name = "SectionSubtitle",
  size = "h6",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const SectionText = ({
  name = "SectionText",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const SectionActions = ({
  name = "SectionActions",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionActions();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const SectionBody = ({
  name = "SectionBody",
  size,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionBody({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const SectionHr = ({ name = "SectionHr", tailwind, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.sectionHr();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Hr, { ...computed });
};
const SectionFooter = ({
  name = "SectionFooter",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.sectionFooter();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Section,
  SectionActions,
  SectionBody,
  SectionFooter,
  SectionHeader,
  SectionHr,
  SectionPretitle,
  SectionSubtitle,
  SectionText,
  SectionTitle
};