@intility/bifrost-react/dist/components/Tabs/Tabs.js

React library for Intility's design system, Bifrost.

"use client";

import { c as _c } from "react-compiler-runtime";
import { forwardRef, useState } from "react";
import classNames from "classnames";
import TabsContext from "./TabsContext.js";
import WidthOverflow from "./WidthOverflow.internal.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const Tabs = /*#__PURE__*/forwardRef((t0, ref) => {
  const $ = _c(52);
  let children;
  let className;
  let contentProps;
  let paddingInline;
  let props;
  let t1;
  let t2;
  let t3;
  let t4;
  let t5;
  let t6;
  let t7;
  if ($[0] !== t0) {
    ({
      variant: t1,
      noPadding: t2,
      paddingInline,
      noBackground: t3,
      contentBackground: t4,
      contentProps,
      radius: t5,
      radiusTop: t6,
      radiusBottom: t7,
      className,
      children,
      ...props
    } = t0);
    $[0] = t0;
    $[1] = children;
    $[2] = className;
    $[3] = contentProps;
    $[4] = paddingInline;
    $[5] = props;
    $[6] = t1;
    $[7] = t2;
    $[8] = t3;
    $[9] = t4;
    $[10] = t5;
    $[11] = t6;
    $[12] = t7;
  } else {
    children = $[1];
    className = $[2];
    contentProps = $[3];
    paddingInline = $[4];
    props = $[5];
    t1 = $[6];
    t2 = $[7];
    t3 = $[8];
    t4 = $[9];
    t5 = $[10];
    t6 = $[11];
    t7 = $[12];
  }
  const variant = t1 === undefined ? "default" : t1;
  const noPadding = t2 === undefined ? false : t2;
  const noBackground = t3 === undefined ? false : t3;
  const contentBackground = t4 === undefined ? "base" : t4;
  const radius = t5 === undefined ? false : t5;
  const radiusTop = t6 === undefined ? false : t6;
  const radiusBottom = t7 === undefined ? false : t7;
  const [active, setActive] = useState(null);
  const [contentContainerRef, setContentContainerRef] = useState(null);
  let contentStyle;
  let tabBarStyle;
  if ($[13] !== contentBackground || $[14] !== contentProps?.style || $[15] !== props.style || $[16] !== radius || $[17] !== radiusBottom || $[18] !== radiusTop) {
    tabBarStyle = {
      ...props.style
    };
    contentStyle = {
      ...contentProps?.style
    };
    if (radius || radiusTop) {
      if (radius === true || radiusTop === true) {
        tabBarStyle.borderTopLeftRadius = "var(--bf-radius)";
        tabBarStyle.borderTopRightRadius = "var(--bf-radius)";
      } else {
        tabBarStyle.borderTopLeftRadius = `var(--bf-radius-${radiusTop ?? radius})`;
        tabBarStyle.borderTopRightRadius = `var(--bf-radius-${radiusTop ?? radius})`;
      }
    }
    if (radius || radiusBottom) {
      if (radius === true || radiusBottom === true) {
        contentStyle.borderBottomLeftRadius = "var(--bf-radius)";
        contentStyle.borderBottomRightRadius = "var(--bf-radius)";
      } else {
        contentStyle.borderBottomLeftRadius = `var(--bf-radius-${radiusTop ?? radius})`;
        contentStyle.borderBottomRightRadius = `var(--bf-radius-${radiusTop ?? radius})`;
      }
    }
    if (contentBackground === "transparent") {
      contentStyle["--bf-tabs-content-bg"] = "transparent";
      tabBarStyle["--bf-tabs-content-bg"] = "transparent";
    } else {
      if (contentBackground) {
        contentStyle["--bf-tabs-content-bg"] = `var(--bfc-${contentBackground})`;
        tabBarStyle["--bf-tabs-content-bg"] = `var(--bfc-${contentBackground})`;
      }
    }
    $[13] = contentBackground;
    $[14] = contentProps?.style;
    $[15] = props.style;
    $[16] = radius;
    $[17] = radiusBottom;
    $[18] = radiusTop;
    $[19] = contentStyle;
    $[20] = tabBarStyle;
  } else {
    contentStyle = $[19];
    tabBarStyle = $[20];
  }
  let t8;
  if ($[21] !== active || $[22] !== contentContainerRef) {
    t8 = {
      portal: contentContainerRef,
      active,
      setActive
    };
    $[21] = active;
    $[22] = contentContainerRef;
    $[23] = t8;
  } else {
    t8 = $[23];
  }
  const t9 = variant === "styled";
  let t10;
  if ($[24] !== className || $[25] !== noBackground || $[26] !== t9) {
    t10 = classNames(className, "bf-tabs-container", {
      "bf-tabs-styled": t9,
      "bf-tabs-no-background": noBackground
    });
    $[24] = className;
    $[25] = noBackground;
    $[26] = t9;
    $[27] = t10;
  } else {
    t10 = $[27];
  }
  let t11;
  if ($[28] !== noPadding) {
    t11 = classNames("bf-tabs", {
      "bf-tabs-no-padding": noPadding
    });
    $[28] = noPadding;
    $[29] = t11;
  } else {
    t11 = $[29];
  }
  let t12;
  if ($[30] !== paddingInline) {
    t12 = {
      paddingInline
    };
    $[30] = paddingInline;
    $[31] = t12;
  } else {
    t12 = $[31];
  }
  let t13;
  if ($[32] !== t11 || $[33] !== t12) {
    t13 = {
      className: t11,
      style: t12
    };
    $[32] = t11;
    $[33] = t12;
    $[34] = t13;
  } else {
    t13 = $[34];
  }
  let t14;
  if ($[35] !== children || $[36] !== props || $[37] !== ref || $[38] !== t10 || $[39] !== t13 || $[40] !== tabBarStyle) {
    t14 = /*#__PURE__*/_jsx(WidthOverflow, {
      ...props,
      className: t10,
      style: tabBarStyle,
      contentProps: t13,
      ref: ref,
      children: children
    });
    $[35] = children;
    $[36] = props;
    $[37] = ref;
    $[38] = t10;
    $[39] = t13;
    $[40] = tabBarStyle;
    $[41] = t14;
  } else {
    t14 = $[41];
  }
  const t15 = contentProps?.className;
  let t16;
  if ($[42] !== t15) {
    t16 = classNames("bf-tab-content", t15);
    $[42] = t15;
    $[43] = t16;
  } else {
    t16 = $[43];
  }
  let t17;
  if ($[44] !== contentProps || $[45] !== contentStyle || $[46] !== t16) {
    t17 = /*#__PURE__*/_jsx("div", {
      ...contentProps,
      className: t16,
      style: contentStyle,
      ref: setContentContainerRef
    });
    $[44] = contentProps;
    $[45] = contentStyle;
    $[46] = t16;
    $[47] = t17;
  } else {
    t17 = $[47];
  }
  let t18;
  if ($[48] !== t14 || $[49] !== t17 || $[50] !== t8) {
    t18 = /*#__PURE__*/_jsxs(TabsContext.Provider, {
      value: t8,
      children: [t14, t17]
    });
    $[48] = t14;
    $[49] = t17;
    $[50] = t8;
    $[51] = t18;
  } else {
    t18 = $[51];
  }
  return t18;
});
Tabs.displayName = "Tabs";
export default Tabs;