@stratakit/structures/dist/Tabs.js

Medium-sized component structures for the Strata design system

import { c as _c } from "react-compiler-runtime";
import { jsx } from "react/jsx-runtime";
import { useStoreState } from "@ariakit/react/store";
import * as AkTab from "@ariakit/react/tab";
import { forwardRef, isBrowser, useUnreactiveCallback } from "@stratakit/foundations/secret-internals";
import cx from "classnames";
import { useInit } from "./~utils.useInit.js";
const supportsAnchorPositioning = isBrowser && CSS?.supports?.("anchor-name: --foo");
const prefersReducedMotion = () => isBrowser && window.matchMedia("(prefers-reduced-motion)").matches;
function TabsProvider(props) {
  const $ = _c(14);
  useInit();
  const {
    defaultSelectedId,
    selectedId,
    setSelectedId,
    selectOnMove: t0,
    children
  } = props;
  const selectOnMove = t0 === void 0 ? false : t0;
  let t1;
  if ($[0] !== defaultSelectedId) {
    t1 = {
      defaultSelectedId
    };
    $[0] = defaultSelectedId;
    $[1] = t1;
  } else {
    t1 = $[1];
  }
  const store = AkTab.useTabStore(t1);
  const tablist = useStoreState(store, "baseElement");
  const selectedIdFromStore = useStoreState(store, "selectedId");
  let t2;
  if ($[2] !== selectedIdFromStore || $[3] !== tablist) {
    t2 = (newSelectedId) => {
      if (!supportsAnchorPositioning) {
        return;
      }
      const rootNode = tablist?.getRootNode();
      if (!rootNode || !selectedIdFromStore || !newSelectedId) {
        return;
      }
      const previousTabRect = rootNode.getElementById?.(selectedIdFromStore)?.getBoundingClientRect();
      const nextTabRect = rootNode.getElementById?.(newSelectedId)?.getBoundingClientRect();
      if (!previousTabRect || !nextTabRect) {
        return;
      }
      const deltaX = previousTabRect.left - nextTabRect.left;
      const deltaWidth = previousTabRect.width / nextTabRect.width;
      tablist?.animate([{
        transform: `translateX(${deltaX}px) scaleX(${deltaWidth})`
      }, {
        transform: "none"
      }], {
        pseudoElement: "::after",
        duration: 150,
        easing: "ease-in-out"
      });
    };
    $[2] = selectedIdFromStore;
    $[3] = tablist;
    $[4] = t2;
  } else {
    t2 = $[4];
  }
  const flipAnimateStripe = t2;
  let t3;
  if ($[5] !== flipAnimateStripe || $[6] !== setSelectedId) {
    t3 = (newSelectedId_0) => {
      if (!prefersReducedMotion()) {
        flipAnimateStripe(newSelectedId_0);
      }
      setSelectedId?.(newSelectedId_0);
    };
    $[5] = flipAnimateStripe;
    $[6] = setSelectedId;
    $[7] = t3;
  } else {
    t3 = $[7];
  }
  const t4 = useUnreactiveCallback(t3);
  let t5;
  if ($[8] !== children || $[9] !== selectOnMove || $[10] !== selectedId || $[11] !== store || $[12] !== t4) {
    t5 = jsx(AkTab.TabProvider, {
      store,
      selectedId,
      setSelectedId: t4,
      selectOnMove,
      children
    });
    $[8] = children;
    $[9] = selectOnMove;
    $[10] = selectedId;
    $[11] = store;
    $[12] = t4;
    $[13] = t5;
  } else {
    t5 = $[13];
  }
  return t5;
}
const TabList = forwardRef((props, forwardedRef) => {
  const {
    tone = "neutral",
    ...rest
  } = props;
  return /* @__PURE__ */ jsx(AkTab.TabList, {
    ...rest,
    "data-_sk-tone": tone,
    className: cx("\u{1F95D}TabList", props.className),
    ref: forwardedRef
  });
});
const Tab = forwardRef((props, forwardedRef) => {
  return /* @__PURE__ */ jsx(AkTab.Tab, {
    accessibleWhenDisabled: true,
    ...props,
    className: cx("\u{1F95D}Tab", props.className),
    ref: forwardedRef
  });
});
const TabPanel = forwardRef((props, forwardedRef) => {
  return /* @__PURE__ */ jsx(AkTab.TabPanel, {
    ...props,
    className: cx("\u{1F95D}TabPanel", props.className),
    ref: forwardedRef
  });
});
export {
  TabsProvider as Provider,
  Tab,
  TabList,
  TabPanel
};