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

An interface library for Playbooks.

import { jsx, jsxs } from "react/jsx-runtime";
import { Fragment } from "react";
import { c as computeTailwind, a as computeProps, B as Button } from "./index.es-7ZX4yv7W.js";
import { useUI } from "./context.es.js";
import { Span, Img } from "./html.es.js";
import { Icon } from "./icons.es.js";
import { Oval } from "./spinners.es.js";
const Btn = (props) => {
  switch (props?.variant) {
    case "primary":
      return /* @__PURE__ */ jsx(PrimaryBtn, { ...props });
    case "accent":
      return /* @__PURE__ */ jsx(AccentBtn, { ...props });
    case "border":
      return /* @__PURE__ */ jsx(BorderBtn, { ...props });
    case "tab":
      return /* @__PURE__ */ jsx(TabBtn, { ...props });
    case "text":
      return /* @__PURE__ */ jsx(TextBtn, { ...props });
    case "wrapper":
      return /* @__PURE__ */ jsx(BtnWrapper, { ...props });
    default:
      return /* @__PURE__ */ jsx(PrimaryBtn, { ...props });
  }
};
const PrimaryBtn = ({
  name = "PrimaryBtn",
  size = "sm",
  active,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.primaryBtn({ active, size });
  return /* @__PURE__ */ jsx(BtnShared, { name, className, ...base, tailwind, ...props });
};
const AccentBtn = ({
  name = "AccentBtn",
  size = "sm",
  active,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.accentBtn({ active, size });
  return /* @__PURE__ */ jsx(BtnShared, { name, className, ...base, tailwind, ...props });
};
const BorderBtn = ({
  name = "BorderBtn",
  size = "sm",
  active,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.borderBtn({ active, size });
  return /* @__PURE__ */ jsx(BtnShared, { name, className, ...base, tailwind, ...props });
};
const TabBtn = ({ name = "TabBtn", size = "sm", active, tailwind, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.tabBtn({ active, size });
  return /* @__PURE__ */ jsx(BtnShared, { name, className, ...base, tailwind, ...props });
};
const TextBtn = ({ name = "TextBtn", size = "sm", active, tailwind, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.textBtn({ active, size });
  return /* @__PURE__ */ jsx(BtnShared, { name, className, ...base, tailwind, ...props });
};
const BtnShared = ({
  alt,
  prevIcon,
  prevImg,
  icon,
  img,
  nextIcon,
  nextImg,
  taskRunning,
  tailwind,
  children,
  ...props
}) => {
  return /* @__PURE__ */ jsxs(BtnWrapper, { alt, taskRunning, tailwind, ...props, children: [
    taskRunning ? /* @__PURE__ */ jsx(Span, {}) : prevIcon && /* @__PURE__ */ jsx(Icon, { type: "far", icon: prevIcon?.icon || prevIcon, ...prevIcon }),
    taskRunning ? /* @__PURE__ */ jsx(Fragment, {}) : prevImg && /* @__PURE__ */ jsx(Img, { src: prevImg?.src || prevImg, borderRadius: "rounded-sm", spacing: "w-5 h-5", ...prevImg }),
    /* @__PURE__ */ jsx(Span, { display: "inline-flex", space: "space-x-4", ...tailwind?.span, children: taskRunning ? /* @__PURE__ */ jsx(Oval, {}) : icon ? /* @__PURE__ */ jsx(Icon, { type: "far", icon: icon?.icon || icon, ...icon }) : img ? /* @__PURE__ */ jsx(Img, { src: img?.src || img, borderRadius: "rounded-sm", spacing: "w-5 h-5", ...img }) : children }),
    taskRunning ? /* @__PURE__ */ jsx(Fragment, {}) : nextImg && /* @__PURE__ */ jsx(Img, { src: prevImg?.src || prevImg, borderRadius: "rounded-sm", spacing: "w-5 h-5", ...prevImg }),
    taskRunning ? /* @__PURE__ */ jsx(Span, {}) : nextIcon && /* @__PURE__ */ jsx(Icon, { type: "far", icon: nextIcon?.icon || nextIcon, ...nextIcon })
  ] });
};
const BtnWrapper = ({
  type = "button",
  name = "BtnWrapper",
  alt,
  dataActive,
  disabled,
  taskRunning,
  children,
  tailwind,
  className,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.btnWrapper({ disabled });
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  const filtered = computeProps(props);
  return /* @__PURE__ */ jsx(
    Button,
    {
      type,
      "aria-label": alt,
      "data-active": dataActive,
      title: alt,
      name,
      disabled: disabled || taskRunning,
      className: classes,
      ...filtered,
      children
    }
  );
};
export {
  AccentBtn,
  BorderBtn,
  Btn,
  BtnWrapper,
  PrimaryBtn,
  TabBtn,
  TextBtn
};