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

An interface library for Playbooks.

import { jsx } from "react/jsx-runtime";
import { a as computeProps, H as Header } from "./index.es-7ZX4yv7W.js";
import { useUI } from "./context.es.js";
import { Small, Font, P } from "./fonts.es.js";
import { Div, Img } from "./html.es.js";
import { FadIcon } from "./icons.es.js";
const Hero = ({ name = "Hero", size = "", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.hero({ size });
  const formatted = { ...base, ...props, ...tailwind };
  const filtered = computeProps(props);
  return /* @__PURE__ */ jsx(Header, { name, tailwind: formatted, className, ...filtered, children });
};
const HeroBg = ({ name = "HeroBg", ref, tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.heroBg();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const HeroImg = ({
  name = "HeroImg",
  alt = "thumbnail",
  size = "lg",
  src,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.heroImg({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children: /* @__PURE__ */ jsx(Img, { src, alt, tailwind: { width: "w-full" } }) });
};
const HeroIcon = ({
  name = "HeroIcon",
  size = "lg",
  icon = "code",
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.heroIcon({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children: /* @__PURE__ */ jsx(FadIcon, { icon }) });
};
const HeroBody = ({ name = "HeroBody", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.heroBody();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const HeroPretitle = ({
  name = "HeroPretitle",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.heroPretitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Small, { ...computed, children });
};
const HeroTitle = ({
  name = "HeroTitle",
  size = "h1",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.heroTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const HeroSubtitle = ({
  name = "HeroSubtitle",
  size = "h5",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.heroSubtitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const HeroText = ({ name = "HeroText", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.heroText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const HeroActions = ({
  name = "HeroActions",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.heroActions();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Hero,
  HeroActions,
  HeroBg,
  HeroBody,
  HeroIcon,
  HeroImg,
  HeroPretitle,
  HeroSubtitle,
  HeroText,
  HeroTitle
};