@carton-org/react-neumorphism/dist/components/Tabs/Tabs.js

A React component library implementing the neumorphism design style

import { jsxs as i, jsx as n } from "@emotion/react/jsx-runtime";
import { withTheme as T } from "@emotion/react";
import { forwardRef as y, useState as C } from "react";
import S from "../IconBox/IconBox.js";
import u from "../Typography/Typography.js";
import { StyledTabsContainer as $, StyledTabsList as x, StyledTab as g, StyledContentWrapper as j, StyledContentContainer as k, StyledContent as w } from "./tabs.styles.js";
import { spacings as I } from "../../constants/units.js";
const B = y(({
  items: r,
  insetTab: s = !1,
  insetContent: o = !1,
  size: a = "sm",
  activeTabIndex: c,
  onChangeIndexTab: d,
  tabLabelStyle: m,
  ...p
}, f) => {
  const [l, b] = C(c), h = (t) => {
    b(t), d(t);
  };
  return /* @__PURE__ */ i($, { ref: f, ...p, children: [
    /* @__PURE__ */ n(x, { children: r.map((t, e) => /* @__PURE__ */ i(g, { onClick: () => h(e), $insetTab: s, children: [
      /* @__PURE__ */ n(S, { blank: !0, icon: t.icon, size: a }),
      /* @__PURE__ */ n(u, { size: a, bold: !0, labelStyle: m, children: t.label })
    ] }, e)) }),
    /* @__PURE__ */ n(j, { children: /* @__PURE__ */ n(k, { $insetContent: o, animate: {
      x: `calc(${-l * 100}% - ${l} * ${I.xl})`
    }, transition: {
      type: "spring",
      stiffness: 300,
      damping: 30
    }, children: r.map((t, e) => /* @__PURE__ */ n(w, { $insetContent: o, children: t.content }, e)) }) })
  ] });
}), E = T(B);
export {
  E as default
};