@playbooks/ui/dist/links.cjs

An interface library for Playbooks.

"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require$$0 = require("react/jsx-runtime");
const React = require("react");
const NLink = require("next/link");
const transforms = require("./transforms-Ca9m4pGF.cjs");
const html = require("./toast-context-kVz4KXNu.cjs");
const Link = (props) => {
  switch (props == null ? void 0 : props.variant) {
    case "primary":
      return /* @__PURE__ */ require$$0.jsx(PrimaryLink, { ...props });
    case "accent":
      return /* @__PURE__ */ require$$0.jsx(AccentLink, { ...props });
    case "border":
      return /* @__PURE__ */ require$$0.jsx(BorderLink, { ...props });
    case "tab":
      return /* @__PURE__ */ require$$0.jsx(TabLink, { ...props });
    case "text":
      return /* @__PURE__ */ require$$0.jsx(TextLink, { ...props });
    case "wrapper":
      return /* @__PURE__ */ require$$0.jsx(LinkWrapper, { ...props });
    default:
      return /* @__PURE__ */ require$$0.jsx(PrimaryLink, { ...props });
  }
};
const PrimaryLink = ({ name = "Link", size = "sm", alt, active, className, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.primaryLink({ active, size });
  return /* @__PURE__ */ require$$0.jsx(LinkShared, { name, className, ...base, ...props });
};
const AccentLink = ({ name = "AccentLink", size = "sm", active, className, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.accentLink({ active, size });
  return /* @__PURE__ */ require$$0.jsx(LinkShared, { name, className, ...base, ...props });
};
const BorderLink = ({ name = "BorderLink", size = "sm", active, className, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.borderLink({ active, size });
  return /* @__PURE__ */ require$$0.jsx(LinkShared, { name, className, ...base, ...props });
};
const TabLink = ({ name = "TabLink", size = "sm", active, className, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.tabLink({ active, size });
  return /* @__PURE__ */ require$$0.jsx(LinkShared, { name, className, ...base, ...props });
};
const TextLink = ({ name = "TextLink", size = "sm", active, className, ...props }) => {
  const { theme } = html.useInterface();
  const base = theme.textLink({ active, size });
  return /* @__PURE__ */ require$$0.jsx(LinkShared, { name, className, ...base, ...props });
};
const LinkShared = ({
  alt,
  prevIcon,
  prevImg,
  icon,
  img,
  nextIcon,
  nextImg,
  taskRunning,
  tailwind,
  children,
  ...props
}) => {
  return /* @__PURE__ */ require$$0.jsxs(LinkWrapper, { alt, tailwind, ...props, children: [
    taskRunning ? /* @__PURE__ */ require$$0.jsx(html.Span, {}) : prevIcon && /* @__PURE__ */ require$$0.jsx(html.Icon, { type: "far", icon: (prevIcon == null ? void 0 : prevIcon.icon) || prevIcon, ...prevIcon }),
    taskRunning ? /* @__PURE__ */ require$$0.jsx(React.Fragment, {}) : prevImg && /* @__PURE__ */ require$$0.jsx(html.Img, { src: (prevImg == null ? void 0 : prevImg.src) || prevImg, borderRadius: "rounded-sm", spacing: "w-5 h-5", ...prevImg }),
    /* @__PURE__ */ require$$0.jsx(html.Span, { display: "inline-flex", space: "space-x-4", ...tailwind == null ? void 0 : tailwind.span, children: taskRunning ? /* @__PURE__ */ require$$0.jsx(html.Oval, {}) : icon ? /* @__PURE__ */ require$$0.jsx(html.Icon, { type: "far", icon: (icon == null ? void 0 : icon.icon) || icon, ...icon }) : img ? /* @__PURE__ */ require$$0.jsx(html.Img, { src: (img == null ? void 0 : img.src) || img, borderRadius: "rounded-sm", spacing: "w-5 h-5", ...img }) : children }),
    taskRunning ? /* @__PURE__ */ require$$0.jsx(React.Fragment, {}) : nextImg && /* @__PURE__ */ require$$0.jsx(html.Img, { src: (prevImg == null ? void 0 : prevImg.src) || prevImg, borderRadius: "rounded-sm", spacing: "w-5 h-5", ...prevImg }),
    taskRunning ? /* @__PURE__ */ require$$0.jsx(html.Span, {}) : nextIcon && /* @__PURE__ */ require$$0.jsx(html.Icon, { type: "far", icon: (nextIcon == null ? void 0 : nextIcon.icon) || nextIcon, ...nextIcon })
  ] });
};
const LinkWrapper = ({
  name = "LinkWrapper",
  alt = "",
  href,
  target,
  disabled,
  tailwind,
  className,
  children,
  ...props
}) => {
  const { theme } = html.useInterface();
  const base = theme.linkWrapper({ disabled });
  const classes = transforms.computeTailwind({ ...base, ...props, ...tailwind, className });
  const filtered = transforms.computeProps(props);
  return /* @__PURE__ */ require$$0.jsx(React.Fragment, { children: target ? /* @__PURE__ */ require$$0.jsx(transforms.A, { "aria-label": alt, title: alt, name, href, target, className: classes, ...filtered, children }) : /* @__PURE__ */ require$$0.jsx(NLink, { "aria-label": alt, title: alt, "data-name": name, href, className: classes, ...filtered, children }) });
};
exports.AccentLink = AccentLink;
exports.BorderLink = BorderLink;
exports.Link = Link;
exports.LinkShared = LinkShared;
exports.LinkWrapper = LinkWrapper;
exports.PrimaryLink = PrimaryLink;
exports.TabLink = TabLink;
exports.TextLink = TextLink;