@konstructio/ui/dist/components/Breadcrumb/Breadcrumb.js

A set of reusable and customizable React components built for konstruct.io

import { jsx as a, jsxs as g } from "react/jsx-runtime";
import u, { forwardRef as b, useId as v, Fragment as y } from "react";
import { cn as h } from "../../utils/index.js";
import { breadcrumbVariants as O, breadcrumbWrapperVariants as j } from "./Breadcrumb.variants.js";
import { Item as w } from "./components/Item/Item.js";
import { P as l } from "../../index--V_ZsiQe.js";
function m() {
  return m = Object.assign || function(r) {
    for (var o = 1; o < arguments.length; o++) {
      var e = arguments[o];
      for (var t in e)
        Object.prototype.hasOwnProperty.call(e, t) && (r[t] = e[t]);
    }
    return r;
  }, m.apply(this, arguments);
}
function x(r, o) {
  if (r == null) return {};
  var e = P(r, o), t, n;
  if (Object.getOwnPropertySymbols) {
    var i = Object.getOwnPropertySymbols(r);
    for (n = 0; n < i.length; n++)
      t = i[n], !(o.indexOf(t) >= 0) && Object.prototype.propertyIsEnumerable.call(r, t) && (e[t] = r[t]);
  }
  return e;
}
function P(r, o) {
  if (r == null) return {};
  var e = {}, t = Object.keys(r), n, i;
  for (i = 0; i < t.length; i++)
    n = t[i], !(o.indexOf(n) >= 0) && (e[n] = r[n]);
  return e;
}
var c = b(function(r, o) {
  var e = r.color, t = e === void 0 ? "currentColor" : e, n = r.size, i = n === void 0 ? 24 : n, s = x(r, ["color", "size"]);
  return /* @__PURE__ */ u.createElement("svg", m({
    ref: o,
    xmlns: "http://www.w3.org/2000/svg",
    width: i,
    height: i,
    viewBox: "0 0 24 24",
    fill: "none",
    stroke: t,
    strokeWidth: "2",
    strokeLinecap: "round",
    strokeLinejoin: "round"
  }, s), /* @__PURE__ */ u.createElement("polyline", {
    points: "9 18 15 12 9 6"
  }));
});
c.propTypes = {
  color: l.string,
  size: l.oneOfType([l.string, l.number])
};
c.displayName = "ChevronRight";
const W = ({
  "aria-label": r = "breadcrumb",
  className: o,
  steps: e,
  theme: t,
  wrapperClassName: n,
  ...i
}) => {
  const s = v();
  return /* @__PURE__ */ a(
    "nav",
    {
      "aria-label": r,
      "data-theme": t,
      className: h(
        j({
          className: n
        })
      ),
      children: /* @__PURE__ */ a("ol", { className: h(O({ className: o })), ...i, children: e.map(({ label: p, ...d }, f) => /* @__PURE__ */ g(y, { children: [
        /* @__PURE__ */ a(
          w,
          {
            ...d,
            label: p,
            isLast: f === e.length - 1
          }
        ),
        f !== e.length - 1 && /* @__PURE__ */ a("li", { "aria-hidden": "true", children: /* @__PURE__ */ a(c, { className: "text-gray-400 w-5 h-5 mt-0.5" }) })
      ] }, `${s}-${p}`)) })
    }
  );
};
export {
  W as Breadcrumb
};