koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
79 lines (78 loc) • 2.24 kB
JavaScript
"use client";
import { jsxs as d, jsx as r } from "react/jsx-runtime";
import { forwardRef as L, useMemo as t, Children as l, useState as h, useEffect as j, useCallback as A, useRef as I } from "react";
import B from "classnames";
import { useLocalTheme as E } from "css-vars-hook";
import { useLinkRefs as M } from "../../internal/hooks/useLinkRefs.js";
import { useIsOverflow as O } from "../../internal/hooks/useIsOverflow.js";
import { IconScroll as X } from "../../internal/Icons/IconScroll.js";
import { TabButton as q } from "./TabButton.js";
import a from "./Tabs.module.css.js";
const z = L(
({
children: s,
className: v,
selected: o,
width: m,
height: n,
onToggle: p = () => {
},
...b
}, N) => {
const { LocalRoot: R, ref: k } = E();
M(N, k);
const y = t(() => {
let e = {};
return n && (e = { ...e, height: n }), m && (e = { ...e, width: m }), e;
}, [n, m]), c = t(
() => o || l.toArray(s)[0].props.name,
[s, o]
), [i, f] = h(c);
j(() => {
f(o || c);
}, [o, c]);
const C = A(
(e) => {
f(e), p(e);
},
[p]
), S = t(
() => l.map(s, (e) => ({ tabName: e.props.name, icon: e.props.icon })),
[s]
), T = t(
() => l.toArray(s).find(
(e) => e.props.name === i
),
[s, i]
), u = I(null), { overflowX: w } = O(u);
return /* @__PURE__ */ d(
R,
{
...b,
theme: y,
className: B(a.tabs, v),
children: [
/* @__PURE__ */ d("div", { className: a.viewport, children: [
/* @__PURE__ */ r("header", { ref: u, className: a.header, children: S.map(({ tabName: e, icon: x }) => /* @__PURE__ */ r(
q,
{
icon: x,
onClick: C,
tabName: e,
activeName: i
},
e
)) }),
w && /* @__PURE__ */ r("div", { className: a["overflow-indicator"], children: /* @__PURE__ */ r(X, {}) })
] }),
/* @__PURE__ */ r("div", { className: a.content, children: T })
]
}
);
}
);
z.displayName = "Tabs";
export {
z as Tabs
};
//# sourceMappingURL=Tabs.js.map