@stanfordspezi/spezi-web-design-system/dist/components/Breadcrumb.js

Stanford Biodesign Digital Health Spezi Web Design System

import { jsx as e, jsxs as o, Fragment as h } from "react/jsx-runtime";
import { createElement as f } from "react";
import { D as x, a as B, h as N, i as w } from "../DropdownMenu-BXSQUAoy.mjs";
import { u as m } from "../SpeziProvider-DjiaU6qz.mjs";
import { c as s } from "../index-2NvaPZWc.mjs";
import { C } from "../chevron-right-DRPdnJlq.mjs";
import { E as k } from "../ellipsis-C1BZ3Trb.mjs";
import { S as b } from "../index-Bytw4Lqn.mjs";
const v = ({ ...r }) => /* @__PURE__ */ e("nav", { "aria-label": "breadcrumb", ...r }), L = ({
  className: r,
  ...n
}) => /* @__PURE__ */ e(
  "ol",
  {
    className: s(
      "text-muted-foreground flex flex-wrap items-center gap-1 text-sm break-words sm:gap-2",
      r
    ),
    ...n
  }
), p = ({
  className: r,
  ...n
}) => /* @__PURE__ */ e(
  "li",
  {
    className: s("inline-flex items-center gap-1.5", r),
    ...n
  }
), M = ({
  asChild: r,
  className: n,
  ...t
}) => {
  const {
    router: { Link: a }
  } = m();
  return /* @__PURE__ */ e(
    r ? b : a,
    {
      className: s(
        "focus-ring hover:text-foreground rounded-sm transition",
        n
      ),
      ...t
    }
  );
}, z = ({
  className: r,
  ...n
}) => /* @__PURE__ */ e(
  "span",
  {
    role: "link",
    "aria-disabled": "true",
    "aria-current": "page",
    className: s("text-foreground font-normal", r),
    ...n
  }
), g = ({
  children: r,
  className: n,
  ...t
}) => /* @__PURE__ */ e(
  "li",
  {
    role: "presentation",
    "aria-hidden": "true",
    className: s("opacity-60 [&>svg]:size-3.5", n),
    ...t,
    children: r ?? /* @__PURE__ */ e(C, {})
  }
), E = ({
  className: r,
  ...n
}) => /* @__PURE__ */ o(
  "span",
  {
    role: "presentation",
    "aria-hidden": "true",
    className: s("flex-center size-4", r),
    ...n,
    children: [
      /* @__PURE__ */ e(k, { className: "size-4" }),
      /* @__PURE__ */ e("span", { className: "sr-only", children: "More" })
    ]
  }
), u = ({
  href: r,
  isActive: n,
  label: t
}) => {
  const {
    router: { Link: a }
  } = m();
  return /* @__PURE__ */ o(h, { children: [
    /* @__PURE__ */ e(p, { children: n ? /* @__PURE__ */ e(z, { className: "max-w-25 truncate md:max-w-none", children: t }) : /* @__PURE__ */ e(M, { asChild: !0, className: "max-w-25 truncate md:max-w-none", children: /* @__PURE__ */ e(a, { href: r, children: t }) }) }),
    !n && /* @__PURE__ */ e(g, {})
  ] });
}, q = ({
  breadcrumbs: r,
  maxToDisplay: n = 3
}) => {
  const {
    router: { Link: t }
  } = m(), a = r.at(0), l = r.length > n, d = l ? r.slice(-n + 1) : r.slice(1, n);
  return /* @__PURE__ */ e(v, { children: /* @__PURE__ */ o(L, { children: [
    a && /* @__PURE__ */ e(
      u,
      {
        ...a,
        isActive: r.length === 1
      }
    ),
    l && /* @__PURE__ */ o(h, { children: [
      /* @__PURE__ */ e(p, { children: /* @__PURE__ */ o(x, { children: [
        /* @__PURE__ */ e(
          B,
          {
            "aria-label": "Toggle menu",
            className: "focus-ring rounded-sm",
            children: /* @__PURE__ */ e(E, {})
          }
        ),
        /* @__PURE__ */ e(N, { align: "start", children: r.slice(1, -n + 1).map((i, c) => /* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(t, { href: i.href, children: i.label }) }, c)) })
      ] }) }),
      /* @__PURE__ */ e(g, {})
    ] }),
    d.map((i, c) => /* @__PURE__ */ f(
      u,
      {
        ...i,
        isActive: c === d.length - 1,
        key: c
      }
    ))
  ] }) });
};
export {
  v as Breadcrumb,
  E as BreadcrumbEllipsis,
  p as BreadcrumbItem,
  M as BreadcrumbLink,
  L as BreadcrumbList,
  z as BreadcrumbPage,
  g as BreadcrumbSeparator,
  q as Breadcrumbs
};