import { jsxs as g, jsx as a } from "react/jsx-runtime";
import { useId as Z, useState as k } from "react";
import { useReducedMotion as _, motion as u, AnimatePresence as C } from "motion/react";
import { noop as ee } from "es-toolkit/function";
import r from "../../utils/classNames.js";
import { mergeClassNameOverrides as c } from "../../utils/mergeClassNameOverrides.js";
import ae from "../../hooks/useResizeObserver.js";
const A = (t) => t.find((s) => !s.disabled) ?? t[0], re = (t) => {
  const {
    activeKey: s,
    defaultActiveKey: T,
    tabs: l,
    bsStyle: $ = "default",
    bodyTransition: x = "height-fade",
    duration: m = 0.16,
    headerRight: y,
    onSelectTab: B = ee,
    className: R,
    headerClassName: K,
    navClassName: w,
    tabLinkClassName: I,
    bodyClassName: S,
    activeContentClassName: D,
    headerRightClassName: j,
    ...P
  } = t, o = Z(), z = _(), [E, , { blockSize: H }] = ae(), [L, N] = k(!1), [M, O] = k(T ?? A(l)?.key), F = s ?? M, n = l.find((e) => e.key === F) ?? A(l), p = z ? "none" : x, b = (e) => {
    e.disabled || e.key === n?.key || (s === void 0 && O(e.key), B(e.key));
  }, q = (e, i) => {
    i.preventDefault(), b(e);
  }, G = (e, i) => {
    (i.key === "Enter" || i.key === " ") && (i.preventDefault(), b(e));
  }, J = c(`tabbed-panel panel panel-${$} margin-bottom-20`, R), Q = c(
    "panel-heading display-flex align-items-center justify-content-between gap-15 padding-0 margin-bottom-0",
    K
  ), h = r("panel-body", S), U = c("nav nav-pills align-items-end margin-0 shadow-none", w), V = c("padding-right-10", j), W = r(D, n?.contentClassName);
  let d = null;
  typeof y == "function" ? d = n ? y(n) : null : d = y;
  const f = () => /* @__PURE__ */ a(
    "div",
    {
      className: W,
      role: "tabpanel",
      id: `${o}-${n?.key}-panel`,
      "aria-labelledby": `${o}-${n?.key}-tab`,
      children: n?.content
    }
  ), X = () => p === "none" ? /* @__PURE__ */ a("div", { className: h, children: f() }) : p === "height-fade" ? /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(
    u.div,
    {
      initial: !1,
      animate: { height: H ?? "auto" },
      className: r(L && "overflow-hidden"),
      transition: { duration: m },
      onAnimationStart: () => N(!0),
      onAnimationComplete: () => N(!1),
      children: /* @__PURE__ */ a("div", { ref: E, children: /* @__PURE__ */ a(C, { initial: !1, mode: "popLayout", children: /* @__PURE__ */ a(
        u.div,
        {
          initial: { opacity: 0 },
          animate: { opacity: 1 },
          exit: { opacity: 0 },
          transition: { duration: m },
          children: f()
        },
        n?.key
      ) }) })
    }
  ) }) : p === "fade" ? /* @__PURE__ */ a("div", { className: h, children: /* @__PURE__ */ a(C, { initial: !1, mode: "wait", children: /* @__PURE__ */ a(
    u.div,
    {
      transition: { duration: m },
      initial: { opacity: 0 },
      animate: { opacity: 1 },
      exit: { opacity: 0 },
      children: f()
    },
    n?.key
  ) }) }) : null;
  return /* @__PURE__ */ g("div", { ...P, className: J, children: [
    /* @__PURE__ */ g("div", { className: Q, children: [
      /* @__PURE__ */ a("ul", { className: U, role: "tablist", children: l.map((e) => {
        const i = e.key === n?.key, Y = `${o}-${e.key}-tab`;
        return /* @__PURE__ */ a(
          "li",
          {
            className: r(
              i && "active text-medium",
              e.disabled && "disabled",
              e.className
            ),
            role: "presentation",
            children: /* @__PURE__ */ a(
              "span",
              {
                id: Y,
                role: "tab",
                "aria-selected": i,
                "aria-controls": `${o}-${e.key}-panel`,
                "aria-disabled": e.disabled,
                tabIndex: e.disabled ? -1 : 0,
                className: I,
                onClick: (v) => q(e, v),
                onKeyDown: (v) => G(e, v),
                children: e.title
              }
            )
          },
          e.key
        );
      }) }),
      d && /* @__PURE__ */ a("div", { className: V, children: d })
    ] }),
    X()
  ] });
};
export {
  re as default
};
//# sourceMappingURL=TabbedPanel.js.map
