"use client";
import { jsxs as w, jsx as p } from "react/jsx-runtime";
import { useRef as h, useState as z, useEffect as D } from "react";
import { c } from "./vendor-styling-ofvnbcuht98q88oo.js";
import { bj as N, bk as y, bl as L, bm as O } from "./vendor-base-ui-elpbzr8xeffrz4h2.js";
const I = {
  variant: "segmented",
  size: "base"
};
function M({
  tabs: s,
  value: a,
  selectedValue: n,
  onValueChange: o,
  activateOnFocus: e,
  className: t,
  listClassName: r,
  indicatorClassName: f,
  variant: v = I.variant,
  size: C = I.size
}) {
  const g = s ?? [];
  if (g.length === 0)
    return null;
  const T = g[0]?.value, k = a !== void 0, P = {
    value: k ? a : void 0,
    defaultValue: k ? void 0 : n ?? T
  }, u = v === "segmented", d = v === "underline", l = C === "sm", { ref: x, isOverflowing: m } = R(u), S = V(x, m);
  return /* @__PURE__ */ w(
    N,
    {
      ...P,
      className: c(
        "relative isolate min-w-0 font-medium",
        u && (l ? "rounded-md" : "rounded-lg") + " ring ring-kumo-hairline/70",
        t
      ),
      onValueChange: (i) => {
        const b = String(i);
        o?.(b);
      },
      children: [
        u && /* @__PURE__ */ p(
          "div",
          {
            className: c(
              "absolute inset-x-0 top-1/2 z-0 -translate-y-1/2 rounded-lg bg-kumo-recessed",
              l ? "h-6.5" : "h-9"
            )
          }
        ),
        /* @__PURE__ */ w(
          y,
          {
            ref: x,
            activateOnFocus: e,
            "data-overflowing": m ? "" : void 0,
            ...S(),
            className: c(
              "relative flex min-w-0 shrink items-stretch",
              u && "kumo-tabs-list overflow-x-auto rounded-lg bg-kumo-recessed px-0.5 [--scroll-fade-width:3rem] scroll-px-(--scroll-fade-width)",
              u && (l ? "h-6.5 rounded-md" : "h-9"),
              m && "cursor-grab active:cursor-grabbing",
              d && "gap-4 border-b border-kumo-hairline pb-2",
              d && (l ? "h-6.5" : "h-7.5"),
              r
            ),
            children: [
              g.map((i) => /* @__PURE__ */ p(
                L,
                {
                  "data-kumo-component": "Tabs",
                  "data-kumo-part": "tab",
                  value: i.value,
                  render: i.render,
                  onClick: (b) => {
                    b.currentTarget.scrollIntoView({
                      behavior: "smooth",
                      block: "nearest",
                      inline: "nearest"
                    });
                  },
                  className: c(
                    "relative z-2 flex items-center rounded bg-transparent whitespace-nowrap focus:outline-none focus:ring-kumo-focus/50 focus-visible:ring-2 focus-visible:ring-kumo-brand",
                    m ? "cursor-grab active:cursor-grabbing" : "cursor-pointer",
                    l ? "text-xs" : "text-base",
                    u && "my-0.5 text-kumo-subtle hover:text-kumo-default aria-selected:text-kumo-default focus-visible:ring-inset",
                    u && (l ? "px-2 rounded-sm" : "px-2.5 rounded-md"),
                    d && "text-kumo-subtle hover:bg-kumo-tint hover:text-kumo-default aria-selected:hover:bg-kumo-tint aria-selected:font-medium aria-selected:text-kumo-default",
                    d && (l ? "px-1.5 py-2.5" : "px-2 py-3"),
                    i.className
                  ),
                  children: i.label
                },
                i.value
              )),
              /* @__PURE__ */ p(
                O,
                {
                  render: (i) => /* @__PURE__ */ p(
                    "div",
                    {
                      ...i,
                      className: c(
                        "absolute z-1 left-0",
                        "w-(--active-tab-width) translate-x-(--active-tab-left) transition-all duration-200",
                        "data-[rendered=false]:scale-90 data-[rendered=false]:opacity-0",
                        u && c(
                          "top-(--active-tab-top) h-(--active-tab-height) bg-kumo-base shadow-sm ring ring-kumo-line",
                          l ? "rounded" : "rounded-md"
                        ),
                        d && "bottom-0 h-0.5 bg-kumo-brand",
                        f
                      )
                    }
                  )
                }
              )
            ]
          }
        )
      ]
    }
  );
}
function V(s, a) {
  const n = h(null), o = h(!1);
  return () => ({
    onPointerDownCapture: (e) => {
      const t = s.current;
      !t || !a || e.pointerType !== "mouse" || e.button !== 0 || (n.current = {
        pointerId: e.pointerId,
        startX: e.clientX,
        scrollLeft: t.scrollLeft,
        dragging: !1
      }, o.current = !1);
    },
    onPointerMoveCapture: (e) => {
      const t = s.current, r = n.current;
      if (!t || !a || !r || r.pointerId !== e.pointerId)
        return;
      const f = e.clientX - r.startX;
      if (!r.dragging) {
        if (Math.abs(f) <= 3) return;
        r.dragging = !0, o.current = !0, t.setPointerCapture(e.pointerId);
      }
      e.preventDefault(), t.scrollLeft = r.scrollLeft - f;
    },
    onPointerUpCapture: (e) => {
      const t = s.current, r = n.current;
      !t || !r || r.pointerId !== e.pointerId || (n.current = null, t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId), o.current && window.setTimeout(() => {
        o.current = !1;
      }, 0));
    },
    onPointerCancelCapture: (e) => {
      const t = s.current, r = n.current;
      !t || !r || r.pointerId !== e.pointerId || (n.current = null, t.hasPointerCapture(e.pointerId) && t.releasePointerCapture(e.pointerId));
    },
    onClickCapture: (e) => {
      o.current && (e.preventDefault(), e.stopPropagation(), o.current = !1);
    }
  });
}
function R(s) {
  const a = h(null), [n, o] = z(!1);
  return D(() => {
    if (!s) return;
    const e = a.current;
    if (!e) return;
    const t = () => o(e.scrollWidth > e.clientWidth), r = new ResizeObserver(t);
    return r.observe(e), t(), () => r.disconnect();
  }, [s]), { ref: a, isOverflowing: n };
}
export {
  M as T
};
//# sourceMappingURL=tabs-kemdy19kfesj2xjr.js.map
