@gearbox-protocol/permissionless-ui 1.7.2 → 1.7.4

package/dist/esm/components/layout/layout/layout.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React__default from 'react';
+import { cn } from '../../../utils/cn.js';
+
+const Layout = React__default.forwardRef(
+  ({ header, footer, children, className, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn("grid min-h-screen grid-rows-[auto_1fr_auto]", className),
+        style: {
+          gridTemplateAreas: `
+            "header"
+            "main"
+            "footer"
+          `
+        },
+        ...props,
+        children: [
+          header && /* @__PURE__ */ jsx("div", { style: { gridArea: "header" }, children: header }),
+          /* @__PURE__ */ jsx(
+            "main",
+            {
+              className: "overflow-x-hidden py-6",
+              style: {
+                gridArea: "main",
+                backgroundColor: "hsl(var(--background))",
+                color: "hsl(var(--foreground))"
+              },
+              children
+            }
+          ),
+          footer && /* @__PURE__ */ jsx("div", { style: { gridArea: "footer" }, children: footer })
+        ]
+      }
+    );
+  }
+);
+Layout.displayName = "Layout";
+
+export { Layout };

package/dist/esm/components/layout/legal-disclaimer/index.js

@@ -0,0 +1 @@
+export { LegalDisclaimer } from './legal-disclaimer.js';

package/dist/esm/components/layout/legal-disclaimer/legal-disclaimer.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BaseLink } from '../../base-link/base-link.js';
+
+function LegalDisclaimer({ hrefs }) {
+  return /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground max-w-md", children: [
+    "Any use of and/or interaction with the Permissionless Interface is subject to the",
+    " ",
+    /* @__PURE__ */ jsx(
+      BaseLink,
+      {
+        href: hrefs.termsOfService,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Terms of Service"
+      }
+    ),
+    " ",
+    "and",
+    " ",
+    /* @__PURE__ */ jsx(
+      BaseLink,
+      {
+        href: hrefs.privacyNotice,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Privacy Notice"
+      }
+    ),
+    ", and acceptance of risks described in the",
+    " ",
+    /* @__PURE__ */ jsx(
+      BaseLink,
+      {
+        href: hrefs.riskDisclosure,
+        className: "underline hover:text-foreground transition-colors",
+        children: "Risk Disclosure Statement"
+      }
+    ),
+    "."
+  ] });
+}
+
+export { LegalDisclaimer };

package/dist/esm/components/layout/page-layout/index.js

@@ -0,0 +1 @@
+export { PageLayout } from './page-layout.js';

package/dist/esm/components/layout/page-layout/page-layout.js

@@ -0,0 +1,38 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BackButton } from '../../buttons/back-button/back-button.js';
+import { Container } from '../container/container.js';
+
+function PageLayout({
+  children,
+  title,
+  description,
+  icon,
+  backButton,
+  actionButton,
+  maxContainerWidth = "xl",
+  containerClassName
+}) {
+  return /* @__PURE__ */ jsxs(Container, { maxWidth: maxContainerWidth, className: containerClassName, children: [
+    backButton && /* @__PURE__ */ jsx(
+      BackButton,
+      {
+        href: backButton.href,
+        text: backButton.text,
+        onClick: backButton.onClick
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-4 mb-6 w-full", children: [
+      icon,
+      /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex justify-between items-center w-full", children: [
+          /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold", children: title }),
+          actionButton
+        ] }),
+        description
+      ] })
+    ] }),
+    children
+  ] });
+}
+
+export { PageLayout };

package/dist/esm/components/liquidation/index.js

@@ -1,4 +1,4 @@
-export * from "./liquidation-assets-table.js";
-export * from "./liquidation-graph.js";
-export * from "./liquidation-graph-legend.js";
-export * from "./liquidation-graph-tip.js";
+export { LiquidationModellingAssetsTable } from './liquidation-assets-table/liquidation-assets-table.js';
+export { LiquidationGraph } from './liquidation-graph/liquidation-graph.js';
+export { LiquidationGraphLegend } from './liquidation-graph-legend/liquidation-graph-legend.js';
+export { LiquidationGraphTip } from './liquidation-graph-tip/liquidation-graph-tip.js';

package/dist/esm/components/liquidation/liquidation-assets-table/index.js

@@ -0,0 +1 @@
+export { LiquidationModellingAssetsTable } from './liquidation-assets-table.js';

package/dist/esm/components/liquidation/liquidation-assets-table/liquidation-assets-table.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { AssetUtils, PRICE_DECIMALS } from '@gearbox-protocol/sdk';
+import { useMemo } from 'react';
+import { TokenSymbol } from '../../token-symbol/token-symbol.js';
+import { FormattedMessageTyped } from '../../typed-intl/index.js';
+
+const lineHeight = 51;
+function LiquidationModellingAssetsTable({
+  tokensList,
+  graphParams,
+  data,
+  prices,
+  editedPrices
+}) {
+  const { fixedBalances } = graphParams;
+  const fixedBalancesRecord = useMemo(() => {
+    return AssetUtils.constructAssetRecord(fixedBalances);
+  }, [fixedBalances]);
+  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid w-full px-4 gap-2 items-center h-[30px] relative after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border",
+        style: { gridTemplateColumns: "1fr 1fr 1fr" },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "text-left text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.asset" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.currentPrice" }) }),
+          /* @__PURE__ */ jsx("div", { className: "text-right text-sm font-medium text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.modelPrice" }) })
+        ]
+      }
+    ),
+    data.map((c, num, arr) => {
+      const isLast = arr.length - 1 === num;
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: `grid w-full px-4 gap-2 items-center relative ${isLast ? "" : "after:absolute after:bottom-0 after:left-2 after:right-2 after:h-px after:border-b after:border-border"}`,
+          style: {
+            gridTemplateColumns: "1fr 1fr 1fr",
+            height: `${lineHeight}px`
+          },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: "text-left", children: /* @__PURE__ */ jsx(
+              TokenSymbol,
+              {
+                size: 24,
+                token: tokensList[c.token],
+                showSymbol: true,
+                maxLength: 8
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "text-right", children: [
+              "$",
+              formatPrice(prices[c.token])
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "text-right", children: fixedBalancesRecord[c.token] ? /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.table.seeGraph" }) }) : /* @__PURE__ */ jsxs("span", { className: "text-sm text-muted-foreground", children: [
+              "$",
+              formatPrice(editedPrices[c.token] || prices[c.token])
+            ] }) })
+          ]
+        },
+        c.token
+      );
+    })
+  ] });
+}
+function formatPrice(price) {
+  return (Number(price || 0n) / Number(PRICE_DECIMALS)).toFixed(2);
+}
+
+export { LiquidationModellingAssetsTable };

package/dist/esm/components/liquidation/liquidation-graph/index.js

@@ -0,0 +1 @@
+export { LiquidationGraph } from './liquidation-graph.js';

package/dist/esm/components/liquidation/liquidation-graph/liquidation-graph.js

@@ -0,0 +1,176 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { VSpace } from '../../vspace/vspace.js';
+import { useHF } from '../../../hooks/use-hf.js';
+import { useLiquidationHeatmap } from '../../../hooks/use-liquidation/index.js';
+import { XYPlot, XAxis, YAxis, ColorHeatmap, XLine, YLine } from '../../../utils/reactochart-compat.js';
+import { LiquidationGraphLegend } from '../liquidation-graph-legend/liquidation-graph-legend.js';
+import { LiquidationGraphTip } from '../liquidation-graph-tip/liquidation-graph-tip.js';
+import { DEFAULT_AXIS_MIN, DEFAULT_AXIS_MAX, useLiquidationGraphCurrentActiveValue, useWithLiquidationGraphActivePrices, useIsAxisInRelativeUnits, useLiquidationGraphActivePrice, formatAxisLabel, formatAxisTipLabel, getCellClass } from '../../../hooks/use-liquidation/utils.js';
+
+const WIDTH = 300;
+const HEIGHT = 300;
+const CROSSHAIR_X = "rct-crosshair-x";
+const CROSSHAIR_Y = "rct-crosshair-y";
+function LiquidationGraph({
+  graphParams,
+  assets,
+  liquidationThresholds,
+  quotas,
+  quotasInfo,
+  underlyingToken: underlyingTokenAddress,
+  debt,
+  prices,
+  tokensList,
+  width = WIDTH,
+  height = HEIGHT,
+  maxLabelLength
+}) {
+  const { xAxis, yAxis, currentPoint } = graphParams;
+  const {
+    min: xMin = DEFAULT_AXIS_MIN,
+    max: xMax = DEFAULT_AXIS_MAX,
+    label: xLabel,
+    order: xOrder = "straight",
+    nextOrder: nextOrderX
+  } = xAxis || {};
+  const {
+    min: yMin = DEFAULT_AXIS_MIN,
+    max: yMax = DEFAULT_AXIS_MAX,
+    label: yLabel,
+    order: yOrder = "straight",
+    nextOrder: nextOrderY
+  } = yAxis || {};
+  const heatmap = useLiquidationHeatmap({
+    xMin,
+    xMax,
+    yMin,
+    yMax,
+    xLabel,
+    yLabel,
+    assets,
+    quotas,
+    prices,
+    liquidationThresholds,
+    underlyingTokenAddress,
+    debt,
+    quotasInfo,
+    tokensList
+  });
+  const { activePoint, handleMouseLeave, handleMouseMove } = useLiquidationGraphCurrentActiveValue();
+  const [activePointX, activePointY] = activePoint || [];
+  const activePrices = useWithLiquidationGraphActivePrices({
+    prices,
+    activePoint,
+    xLabel,
+    yLabel
+  });
+  const hf = useHF({
+    quotas,
+    quotasInfo,
+    assets,
+    prices: activePrices,
+    liquidationThresholds,
+    underlyingToken: underlyingTokenAddress,
+    debt,
+    tokensList
+  });
+  const underlyingPrice = prices[underlyingTokenAddress] || 1n;
+  const underlyingToken = tokensList[underlyingTokenAddress];
+  const xRelative = useIsAxisInRelativeUnits(xLabel, underlyingToken);
+  const yRelative = useIsAxisInRelativeUnits(yLabel, underlyingToken);
+  const activePriceX = useLiquidationGraphActivePrice(
+    activePointX || currentPoint[0],
+    underlyingPrice,
+    xRelative,
+    xOrder
+  );
+  const activePriceY = useLiquidationGraphActivePrice(
+    activePointY || currentPoint[1],
+    underlyingPrice,
+    yRelative,
+    yOrder
+  );
+  const labelXFormatter = useCallback(
+    formatAxisLabel(underlyingPrice, xRelative, xOrder),
+    []
+  );
+  const labelYFormatter = useCallback(
+    formatAxisLabel(underlyingPrice, yRelative, yOrder),
+    []
+  );
+  return /* @__PURE__ */ jsxs("div", { className: "mx-auto", style: { width: `${width}px`, maxWidth: "100%" }, children: [
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(
+      LiquidationGraphTip,
+      {
+        underlyingToken,
+        hf: hf.hf,
+        xAxis,
+        yAxis,
+        activePointX: activePriceX,
+        activePointY: activePriceY,
+        maxLabelLength
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VSpace, { height: 16 }),
+    /* @__PURE__ */ jsx("div", { className: "w-full liquidation-graph-container", children: /* @__PURE__ */ jsxs(
+      XYPlot,
+      {
+        width,
+        height,
+        xDomain: [xMin, xMax],
+        yDomain: [yMin, yMax],
+        onMouseMove: handleMouseMove,
+        onMouseLeave: handleMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx(
+            XAxis,
+            {
+              showLine: false,
+              title: formatAxisTipLabel(xLabel, underlyingToken, xOrder),
+              titleAlign: "right",
+              tickCount: 5,
+              labelFormat: labelXFormatter,
+              showLabels: !!xLabel,
+              showTicks: !!xLabel,
+              onMouseClickAxis: nextOrderX,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            YAxis,
+            {
+              showLine: false,
+              title: formatAxisTipLabel(yLabel, underlyingToken, yOrder),
+              titleAlign: "top",
+              tickCount: 5,
+              labelFormat: labelYFormatter,
+              showLabels: !!yLabel,
+              showTicks: !!yLabel,
+              onMouseClickAxis: nextOrderY,
+              nice: false
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ColorHeatmap,
+            {
+              data: heatmap,
+              value: (d) => d.value,
+              x: (d) => d.x,
+              xEnd: (d) => d.xEnd,
+              y: (d) => d.y,
+              yEnd: (d) => d.yEnd,
+              rectClassName: (p) => getCellClass(p, currentPoint, activePointX, activePointY)
+            }
+          ),
+          activePointX !== void 0 && activePointX !== null && /* @__PURE__ */ jsx(XLine, { value: activePointX, className: CROSSHAIR_X }),
+          activePointY !== void 0 && activePointY !== null && /* @__PURE__ */ jsx(YLine, { value: activePointY, className: CROSSHAIR_Y })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(VSpace, { height: 12 }),
+    /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx(LiquidationGraphLegend, {}) })
+  ] });
+}
+
+export { LiquidationGraph };

package/dist/esm/components/liquidation/liquidation-graph-legend/index.js

@@ -0,0 +1 @@
+export { LiquidationGraphLegend } from './liquidation-graph-legend.js';

package/dist/esm/components/liquidation/liquidation-graph-legend/liquidation-graph-legend.js

@@ -0,0 +1,17 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { FormattedMessageTyped } from '../../typed-intl/index.js';
+
+function LiquidationGraphLegend() {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-center gap-8 w-full", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-[9px] h-[9px] bg-white" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.point" }) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("div", { className: "w-[9px] h-[9px] bg-[rgb(244,67,54)]" }),
+      /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground", children: /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.legend.area" }) })
+    ] })
+  ] });
+}
+
+export { LiquidationGraphLegend };

package/dist/esm/components/liquidation/liquidation-graph-tip/index.js

@@ -0,0 +1 @@
+export { LiquidationGraphTip } from './liquidation-graph-tip.js';

package/dist/esm/components/liquidation/liquidation-graph-tip/liquidation-graph-tip.js

@@ -0,0 +1,71 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { HealthFactor } from '../../health-factor/health-factor.js';
+import { ShortString } from '../../short-string/short-string.js';
+import { TokenSymbol } from '../../token-symbol/token-symbol.js';
+import { FormattedMessageTyped } from '../../typed-intl/index.js';
+import '@gearbox-protocol/sdk';
+import 'react';
+import { formatAxisTipPrice, formatAxisTipLabel } from '../../../hooks/use-liquidation/utils.js';
+
+function LiquidationGraphTip({
+  activePointX,
+  activePointY,
+  xAxis,
+  yAxis,
+  hf,
+  underlyingToken,
+  maxLabelLength
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex w-full justify-between items-center", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+      xAxis && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        PriceLine,
+        {
+          underlyingToken,
+          token: xAxis.label,
+          value: activePointX,
+          order: xAxis.order,
+          maxLabelLength
+        }
+      ) }),
+      yAxis && /* @__PURE__ */ jsx("div", { className: "flex items-center", children: /* @__PURE__ */ jsx(
+        PriceLine,
+        {
+          underlyingToken,
+          token: yAxis.label,
+          value: activePointY,
+          order: yAxis.order,
+          maxLabelLength
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.tip.hf" }),
+        ":"
+      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(HealthFactor, { value: hf, debt: 1n }) })
+    ] })
+  ] });
+}
+function PriceLine({
+  token,
+  underlyingToken,
+  value = 0,
+  order = "straight",
+  maxLabelLength = 13
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsx(TokenSymbol, { token, size: 12 }),
+    /* @__PURE__ */ jsxs("div", { className: "text-sm text-foreground", children: [
+      /* @__PURE__ */ jsx(ShortString, { maxLength: maxLabelLength, children: formatAxisTipLabel(token, underlyingToken, order) }),
+      " ",
+      /* @__PURE__ */ jsx(FormattedMessageTyped, { messageId: "components.creditSessionDetailedLiquidation.graph.tip.price" }),
+      ": ",
+      underlyingToken ? "" : "$",
+      formatAxisTipPrice(value)
+    ] })
+  ] });
+}
+
+export { LiquidationGraphTip };

package/dist/esm/components/loader-guard/index.js

@@ -0,0 +1 @@
+export { LoaderGuard } from './loader-guard.js';

package/dist/esm/components/loader-guard/loader-guard.js

@@ -0,0 +1,32 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Guard } from '../guard/guard.js';
+import 'clsx';
+import 'tailwind-merge';
+import '../layout/col/col.js';
+import { Container } from '../layout/container/container.js';
+import '../layout/footer/footer.js';
+import '../layout/grid/grid.js';
+import '../layout/header/header.js';
+import '../layout/layout/layout.js';
+import '../base-link/base-link.js';
+import '../buttons/back-button/back-button.js';
+import { Skeleton } from '../skeleton/skeleton.js';
+
+function LoaderGuard({
+  showGuard: show,
+  children,
+  loader
+}) {
+  const defaultLoader = /* @__PURE__ */ jsx(Container, { children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 p-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-8 w-64" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" })
+    ] })
+  ] }) });
+  const showGuard = show;
+  return /* @__PURE__ */ jsx(Guard, { showGuard, guard: showGuard && (loader || defaultLoader), children });
+}
+
+export { LoaderGuard };

package/dist/esm/components/navbar/index.js

@@ -0,0 +1,2 @@
+export { Navbar, NavbarNav, navbarVariants } from './navbar.js';
+export { NavbarIndicatorProvider, useNavbarIndicator } from './navbar-indicator-context.js';

package/dist/esm/components/navbar/navbar-indicator-context.js

@@ -0,0 +1,67 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useRef, useState, useCallback, useEffect, useContext } from 'react';
+
+const NavbarIndicatorContext = createContext(
+  null
+);
+const NavbarIndicatorProvider = ({ children }) => {
+  const itemsRef = useRef(/* @__PURE__ */ new Map());
+  const [activeItemId, setActiveItemId] = useState(null);
+  const indicatorRef = useRef(null);
+  const containerRef = useRef(null);
+  const registerItem = useCallback((id, element) => {
+    itemsRef.current.set(id, element);
+  }, []);
+  const unregisterItem = useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const updateIndicatorPosition = useCallback((id) => {
+    if (!indicatorRef.current || !containerRef.current) return;
+    const targetElement = itemsRef.current.get(id);
+    if (!targetElement) return;
+    const targetRect = targetElement.getBoundingClientRect();
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const left = targetRect.left - containerRect.left + containerRef.current.scrollLeft;
+    const width = targetRect.width;
+    indicatorRef.current.style.opacity = "1";
+    indicatorRef.current.style.transform = `translateX(${left}px)`;
+    indicatorRef.current.style.width = `${width}px`;
+  }, []);
+  const handleSetActiveItem = useCallback(
+    (id) => {
+      setActiveItemId(id);
+      updateIndicatorPosition(id);
+    },
+    [updateIndicatorPosition]
+  );
+  useEffect(() => {
+    if (activeItemId) {
+      updateIndicatorPosition(activeItemId);
+    }
+  }, [activeItemId, updateIndicatorPosition]);
+  useEffect(() => {
+    const handleResize = () => {
+      if (activeItemId) {
+        updateIndicatorPosition(activeItemId);
+      }
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [activeItemId, updateIndicatorPosition]);
+  return /* @__PURE__ */ jsx(
+    NavbarIndicatorContext.Provider,
+    {
+      value: {
+        registerItem,
+        unregisterItem,
+        setActiveItem: handleSetActiveItem,
+        containerRef,
+        indicatorRef
+      },
+      children
+    }
+  );
+};
+const useNavbarIndicator = () => useContext(NavbarIndicatorContext);
+
+export { NavbarIndicatorProvider, useNavbarIndicator };