import { jsx as r } from "react/jsx-runtime";
import { forwardRef as g } from "react";
import { cx as o } from "../../utils/classNames.js";
import { useArrowTheme as h } from "../../hooks/useArrowTheme.js";
const p = g(
  ({
    tabs: i,
    selectedIndex: u,
    a11yLabel: s,
    alignment: t = "left",
    size: a = "lg",
    navStyle: n = "default",
    inverse: c,
    className: f
  }, m) => {
    const v = h(), l = c ?? v.inverse;
    return !i || i.length === 0 ? null : /* @__PURE__ */ r(
      "nav",
      {
        ref: m,
        className: o(
          "tdds-subnavigation",
          {
            [`tdds-subnavigation--${t}`]: t !== "left"
          },
          f
        ),
        ...l ? { "data-inverse": "true" } : {},
        "aria-label": s ? l ? `${s}-inverse` : s : void 0,
        children: /* @__PURE__ */ r(
          "ul",
          {
            role: "list",
            className: o("tdds-subnavigation--list", {
              [`tdds-subnavigation--${a}`]: a !== "lg",
              [`tdds-subnavigation--${n}`]: n !== "default"
            }),
            children: i.map((e, d) => /* @__PURE__ */ r("li", { role: "listitem", className: "tdds-subnavigation--list__item", children: /* @__PURE__ */ r(
              "a",
              {
                href: e.href,
                className: o({
                  "force-focus": !!e.focused,
                  "force-hover": !!e.hover,
                  "force-pressed": !!e.pressed
                }),
                "aria-current": u === d ? "page" : void 0,
                children: e.label
              }
            ) }, d))
          }
        )
      }
    );
  }
);
p.displayName = "Subnavigation";
export {
  p as Subnavigation
};
//# sourceMappingURL=Subnavigation.js.map
