@alfadocs/ui-kit 0.1.8 → 0.1.9

package/dist/_chunks/breadcrumb.agent-GM2hAKFX.js

@@ -0,0 +1,371 @@
+import { jsx as n, jsxs as E } from "react/jsx-runtime";
+import { forwardRef as x, useMemo as I, useImperativeHandle as R, Children as g, isValidElement as b, cloneElement as L, useContext as V, createContext as A } from "react";
+import * as j from "@radix-ui/react-dropdown-menu";
+import { Slot as M } from "@radix-ui/react-slot";
+import { c as q } from "./index-D2ZczOXr.js";
+import { useTranslation as B } from "react-i18next";
+import { E as K } from "./ellipsis-rgGdiK_9.js";
+import { C as O } from "./chevron-right-BrpYejk0.js";
+const S = A({
+  separator: "chevron"
+}), _ = x(
+  ({
+    children: r,
+    className: a,
+    "aria-label": l,
+    separator: e = "chevron",
+    maxItems: s = 4,
+    itemsBeforeCollapse: t = 1,
+    itemsAfterCollapse: o = 1,
+    disableCollapse: i = !1,
+    id: d,
+    ...h
+  }, k) => {
+    const { t: y } = B(), f = I(() => D(r), [r]), u = I(
+      () => ({
+        getItems: () => f,
+        navigateTo: (m) => {
+          const c = f.find((w) => w.id === m);
+          if (!(c != null && c.href) || typeof window > "u") return;
+          const p = c.href.trim();
+          /^\s*javascript:/i.test(p) || window.location.assign(p);
+        }
+      }),
+      [f]
+    );
+    return R(k, () => u, [u]), /* @__PURE__ */ n(S.Provider, { value: { separator: e }, children: /* @__PURE__ */ n(
+      "nav",
+      {
+        id: d,
+        "aria-label": l ?? y("ui.navigation.breadcrumb.label"),
+        "data-component": "breadcrumb",
+        "data-component-id": d,
+        className: a,
+        ...h,
+        children: /* @__PURE__ */ n(
+          T,
+          {
+            maxItems: s,
+            itemsBeforeCollapse: t,
+            itemsAfterCollapse: o,
+            disableCollapse: i,
+            children: r
+          }
+        )
+      }
+    ) });
+  }
+);
+_.displayName = "Breadcrumb";
+function D(r) {
+  const a = [];
+  let l = 0;
+  return g.forEach(r, (e) => {
+    if (!b(e) || e.type !== N) return;
+    const s = e.props;
+    let t;
+    g.forEach(s.children, (i) => {
+      if (t || !b(i) || i.type !== C) return;
+      const d = i.props;
+      typeof d.href == "string" && (t = d.href);
+    });
+    const o = s.id ?? t ?? String(l);
+    a.push({ id: o, href: t }), l += 1;
+  }), a;
+}
+const G = [
+  "ds:flex ds:flex-wrap ds:items-center",
+  "ds:gap-[var(--spacing-xs)]",
+  "ds:text-[var(--font-size-sm)] ds:text-[var(--muted-foreground)]",
+  "ds:ps-0 ds:m-0",
+  "ds:list-none"
+].join(" "), T = x(
+  ({
+    children: r,
+    className: a,
+    maxItems: l = 4,
+    itemsBeforeCollapse: e = 1,
+    itemsAfterCollapse: s = 1,
+    disableCollapse: t = !1,
+    ...o
+  }, i) => {
+    const d = g.toArray(r).filter((m) => b(m)), h = d.length, k = !t && h > l && e + s < h, y = (m, c, p) => L(m, {
+      isCurrent: m.props.isCurrent ?? c,
+      key: p
+    }), f = (m, c) => m ? /* @__PURE__ */ n($, {}, c) : null;
+    let u = [];
+    if (!k)
+      d.forEach((m, c) => {
+        const p = c === h - 1;
+        u.push(y(m, p, `item-${c}`)), u.push(f(!p, `sep-${c}`));
+      });
+    else {
+      const m = d.slice(0, e), c = d.slice(h - s), p = d.slice(e, h - s);
+      m.forEach((w, v) => {
+        u.push(y(w, !1, `b-${v}`)), u.push(f(!0, `b-sep-${v}`));
+      }), u.push(
+        /* @__PURE__ */ n(N, { children: /* @__PURE__ */ n(H, { hiddenItems: p }) }, "ellipsis")
+      ), u.push(f(!0, "ellipsis-sep")), c.forEach((w, v) => {
+        const z = v === c.length - 1;
+        u.push(y(w, z, `a-${v}`)), u.push(f(!z, `a-sep-${v}`));
+      });
+    }
+    return /* @__PURE__ */ n("ol", { ref: i, className: [G, a].filter(Boolean).join(" "), ...o, children: u });
+  }
+);
+T.displayName = "BreadcrumbList";
+const F = [
+  "ds:inline-flex ds:items-center",
+  "ds:max-inline-size-[16rem]",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:py-[var(--spacing-xs)]"
+].join(" "), N = x(
+  ({ children: r, className: a, isCurrent: l = !1, id: e, ...s }, t) => {
+    let o = e;
+    return o || g.forEach(r, (i) => {
+      if (o || !b(i) || i.type !== C) return;
+      const d = i.props;
+      typeof d.href == "string" && (o = d.href);
+    }), /* @__PURE__ */ n(
+      "li",
+      {
+        ref: t,
+        id: e,
+        "data-crumb-id": o,
+        className: [F, a].filter(Boolean).join(" "),
+        ...s,
+        children: g.map(
+          r,
+          (i) => {
+            var d;
+            return b(i) && (i.type === C || (d = i.props) != null && d._link) ? L(i, {
+              isCurrent: l
+            }) : i;
+          }
+        )
+      }
+    );
+  }
+);
+N.displayName = "BreadcrumbItem";
+const P = [
+  "ds:inline-flex ds:items-center",
+  "ds:max-inline-size-[16rem]",
+  "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap",
+  "ds:break-normal",
+  "ds:text-[var(--muted-foreground)] ds:no-underline",
+  "ds:hover:text-[var(--foreground)] ds:hover:underline",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none",
+  "ds:min-h-[var(--min-target-size)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]"
+].join(" "), J = [
+  "ds:inline-flex ds:items-center",
+  "ds:max-inline-size-[16rem]",
+  "ds:overflow-hidden ds:text-ellipsis ds:whitespace-nowrap",
+  "ds:break-normal",
+  "ds:text-[var(--foreground)] ds:font-[var(--font-weight-semibold)]",
+  "ds:min-h-[var(--min-target-size)] ds:ps-[var(--spacing-xs)] ds:pe-[var(--spacing-xs)]"
+].join(" "), C = x(
+  ({ asChild: r = !1, isCurrent: a = !1, className: l, children: e, ...s }, t) => {
+    const { t: o } = B();
+    return a ? /* @__PURE__ */ n(
+      "span",
+      {
+        "aria-current": "page",
+        "aria-label": s["aria-label"] ?? o("ui.navigation.breadcrumb.current"),
+        className: [J, l].filter(Boolean).join(" "),
+        children: e
+      }
+    ) : r ? /* @__PURE__ */ n(
+      M,
+      {
+        ref: t,
+        className: [P, l].filter(Boolean).join(" "),
+        ...s,
+        children: e
+      }
+    ) : /* @__PURE__ */ n(
+      "a",
+      {
+        ref: t,
+        className: [P, l].filter(Boolean).join(" "),
+        ...s,
+        children: e
+      }
+    );
+  }
+);
+C.displayName = "BreadcrumbLink";
+const Q = q(
+  [
+    "ds:inline-flex ds:items-center ds:justify-center",
+    "ds:text-[var(--muted-foreground)]",
+    "ds:ms-[var(--spacing-xs)] ds:me-[var(--spacing-xs)]",
+    "ds:select-none"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        chevron: "",
+        slash: ""
+      }
+    },
+    defaultVariants: { variant: "chevron" }
+  }
+), $ = x(
+  ({ className: r, variant: a, children: l, ...e }, s) => {
+    const t = V(S), o = a ?? t.separator, i = o === "slash" ? /* @__PURE__ */ n("span", { "aria-hidden": "true", children: "/" }) : /* @__PURE__ */ n(
+      O,
+      {
+        "aria-hidden": "true",
+        className: "ds:size-4 ds:rtl:-scale-x-100"
+      }
+    );
+    return /* @__PURE__ */ n(
+      "li",
+      {
+        ref: s,
+        "aria-hidden": "true",
+        role: "presentation",
+        className: Q({ variant: o, className: r }),
+        ...e,
+        children: l ?? i
+      }
+    );
+  }
+);
+$.displayName = "BreadcrumbSeparator";
+const U = [
+  "ds:inline-flex ds:items-center ds:justify-center",
+  "ds:min-w-[var(--min-target-size)] ds:min-h-[var(--min-target-size)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--muted-foreground)]",
+  "ds:hover:text-[var(--foreground)]",
+  "ds:focus-visible:outline-[length:var(--focus-ring-width)] ds:focus-visible:outline-solid",
+  "ds:focus-visible:outline-[var(--ring)] ds:focus-visible:outline-offset-[length:var(--focus-ring-offset)]",
+  "ds:transition-colors ds:duration-[var(--animation-duration)] ds:motion-reduce:transition-none"
+].join(" "), W = [
+  "ds:z-[var(--z-dropdown)] ds:min-w-[12rem] ds:overflow-hidden",
+  "ds:rounded-[var(--radius-md)] ds:border ds:border-[var(--border)]",
+  "ds:bg-[var(--background)] ds:text-[var(--foreground)]",
+  "ds:shadow-[var(--shadow-lg)]",
+  "ds:p-[var(--spacing-xs)]",
+  "ds:animate-in ds:fade-in ds:zoom-in-95 ds:motion-reduce:animate-none"
+].join(" "), X = [
+  "ds:flex ds:items-center",
+  "ds:min-h-[var(--min-target-size)]",
+  "ds:ps-[var(--spacing-sm)] ds:pe-[var(--spacing-sm)]",
+  "ds:rounded-[var(--radius-sm)]",
+  "ds:text-[var(--foreground)] ds:cursor-pointer ds:select-none",
+  "ds:data-[highlighted]:bg-[var(--muted)] ds:data-[highlighted]:text-[var(--foreground)]",
+  "ds:outline-none"
+].join(" "), H = x(
+  ({ className: r, hiddenItems: a = [], ...l }, e) => {
+    const { t: s } = B(), t = s("ui.navigation.breadcrumb.showPath");
+    return /* @__PURE__ */ E(j.Root, { children: [
+      /* @__PURE__ */ n(j.Trigger, { asChild: !0, children: /* @__PURE__ */ E(
+        "button",
+        {
+          ref: e,
+          type: "button",
+          "aria-label": t,
+          className: [U, r].filter(Boolean).join(" "),
+          ...l,
+          children: [
+            /* @__PURE__ */ n(K, { "aria-hidden": "true", className: "ds:size-4" }),
+            /* @__PURE__ */ n("span", { className: "ds:sr-only", children: t })
+          ]
+        }
+      ) }),
+      /* @__PURE__ */ n(j.Portal, { children: /* @__PURE__ */ n(
+        j.Content,
+        {
+          className: W,
+          align: "start",
+          sideOffset: 6,
+          children: a.map((o, i) => {
+            const d = Y(o);
+            return /* @__PURE__ */ n(
+              j.Item,
+              {
+                asChild: !0,
+                className: X,
+                children: d ?? /* @__PURE__ */ n("span", { children: o })
+              },
+              `hidden-${i}`
+            );
+          })
+        }
+      ) })
+    ] });
+  }
+);
+H.displayName = "BreadcrumbEllipsis";
+function Y(r) {
+  let a = null;
+  const l = r.props.children;
+  return g.forEach(l, (e) => {
+    if (!a && b(e) && e.type === C) {
+      const s = e.props, t = typeof s.href == "string" ? s.href : void 0, o = t && /^\s*javascript:/i.test(t) ? void 0 : t;
+      a = /* @__PURE__ */ n(
+        "a",
+        {
+          href: o,
+          onClick: s.onClick,
+          children: s.children
+        }
+      );
+    }
+  }), a;
+}
+const ae = {
+  id: "breadcrumb",
+  capabilities: ["navigate"],
+  state: {
+    items: {
+      type: "Array<{ id: string, href?: string }>",
+      descriptionKey: "ui.agent.breadcrumb.state.items",
+      description: "Ordered list of crumb ids + hrefs in display order. Labels are intentionally excluded — they may contain PHI.",
+      read: (r) => r.getItems()
+    }
+  },
+  actions: {
+    navigate_to: {
+      safety: "read",
+      argsType: "{ id: string }",
+      descriptionKey: "ui.agent.breadcrumb.actions.navigateTo",
+      description: "Activate the crumb with the given id — equivalent to clicking the link.",
+      invoke: (r, a) => {
+        r.navigateTo(a.id);
+      }
+    }
+  },
+  domHooks: {
+    root: {
+      attr: "data-component",
+      value: "breadcrumb",
+      description: "Marks the Breadcrumb root `<nav>`."
+    },
+    instanceId: {
+      attr: "data-component-id",
+      sourceProp: "id",
+      description: "Sourced from the id prop."
+    },
+    item: {
+      attr: "data-crumb-id",
+      description: "Stable opaque id of a crumb. Labels are NEVER carried in data-* — they may contain PHI."
+    }
+  }
+};
+export {
+  _ as B,
+  H as a,
+  N as b,
+  C as c,
+  T as d,
+  $ as e,
+  ae as f
+};
+//# sourceMappingURL=breadcrumb.agent-GM2hAKFX.js.map