@playbooks/ui/dist/links.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, u as A } 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 Link = (props) => {
  switch (props?.variant) {
    case "primary":
      return /* @__PURE__ */ jsx(PrimaryLink, { ...props });
    case "accent":
      return /* @__PURE__ */ jsx(AccentLink, { ...props });
    case "border":
      return /* @__PURE__ */ jsx(BorderLink, { ...props });
    case "tab":
      return /* @__PURE__ */ jsx(TabLink, { ...props });
    case "text":
      return /* @__PURE__ */ jsx(TextLink, { ...props });
    case "wrapper":
      return /* @__PURE__ */ jsx(LinkWrapper, { ...props });
    default:
      return /* @__PURE__ */ jsx(PrimaryLink, { ...props });
  }
};
const PrimaryLink = ({ name = "Link", size = "sm", alt, active, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.primaryLink({ active, size });
  return /* @__PURE__ */ jsx(LinkShared, { name, className, ...base, ...props });
};
const AccentLink = ({ name = "AccentLink", size = "sm", active, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.accentLink({ active, size });
  return /* @__PURE__ */ jsx(LinkShared, { name, className, ...base, ...props });
};
const BorderLink = ({ name = "BorderLink", size = "sm", active, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.borderLink({ active, size });
  return /* @__PURE__ */ jsx(LinkShared, { name, className, ...base, ...props });
};
const TabLink = ({ name = "TabLink", size = "sm", active, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.tabLink({ active, size });
  return /* @__PURE__ */ jsx(LinkShared, { name, className, ...base, ...props });
};
const TextLink = ({ name = "TextLink", size = "sm", active, className, ...props }) => {
  const context = useUI();
  const base = context?.theme?.textLink({ active, size });
  return /* @__PURE__ */ jsx(LinkShared, { name, className, ...base, ...props });
};
const LinkShared = ({
  alt,
  prevIcon,
  prevImg,
  icon,
  img,
  nextIcon,
  nextImg,
  taskRunning,
  tailwind,
  children,
  ...props
}) => {
  return /* @__PURE__ */ jsxs(LinkWrapper, { alt, 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 LinkWrapper = ({
  name = "LinkWrapper",
  alt = "",
  dataActive,
  href,
  target,
  disabled,
  tailwind,
  className,
  children,
  ...props
}) => {
  const context = useUI();
  const base = context?.theme?.linkWrapper({ disabled });
  const classes = computeTailwind({ ...base, ...props, ...tailwind, className });
  const filtered = computeProps(props);
  const NextLink = context?.components?.Link;
  return /* @__PURE__ */ jsx(Fragment, { children: target ? /* @__PURE__ */ jsx(
    A,
    {
      "aria-label": alt,
      "data-active": dataActive,
      title: alt,
      name,
      href,
      target,
      className: classes,
      ...filtered,
      children
    }
  ) : /* @__PURE__ */ jsx(
    NextLink,
    {
      "aria-label": alt,
      "data-active": dataActive,
      title: alt,
      "data-name": name,
      href,
      className: classes,
      ...filtered,
      children
    }
  ) });
};
export {
  AccentLink,
  BorderLink,
  Link,
  LinkShared,
  LinkWrapper,
  PrimaryLink,
  TabLink,
  TextLink
};