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

An interface library for Playbooks.

import { jsx } from "react/jsx-runtime";
import { useUI } from "./context.es.js";
import { Font, P } from "./fonts.es.js";
import { Div, Img } from "./html.es.js";
const Avatar = ({ name = "Avatar", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.avatar();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const AvatarBadge = ({
  name = "AvatarBadge",
  size = "sm",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.avatarBadge({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const AvatarImg = ({
  name = "AvatarImg",
  alt = "",
  size = "md",
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.avatarImg({ size });
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Img, { alt, ...computed });
};
const AvatarBody = ({ name = "AvatarBody", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.avatarBody();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
const AvatarTitle = ({
  name = "AvatarTitle",
  size = "h6",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.avatarTitle();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Font, { size, ...computed, children });
};
const AvatarText = ({ name = "AvatarText", tailwind, className, children, ...props }) => {
  const context = useUI();
  const base = context?.theme?.avatarText();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(P, { ...computed, children });
};
const AvatarActions = ({
  name = "AvatarActions",
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.avatarActions();
  const computed = { ...base, ...props, tailwind, className, name };
  return /* @__PURE__ */ jsx(Div, { ...computed, children });
};
export {
  Avatar,
  AvatarActions,
  AvatarBadge,
  AvatarBody,
  AvatarImg,
  AvatarText,
  AvatarTitle
};