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

Stanford Biodesign Digital Health Spezi Web Design System

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