@postenbring/hedwig-react/dist/chunk-WVCJV74B.mjs

React components for [Hedwig Design System](https://github.com/bring/hedwig-design-system).

import {
  useTabsContext
} from "./chunk-KQITCS3U.mjs";
import {
  useHydrated,
  useMergeRefs,
  useResize
} from "./chunk-3V4GFS46.mjs";
import {
  __objRest,
  __spreadProps,
  __spreadValues
} from "./chunk-YOSPWY5K.mjs";

// src/tabs/tabs-list.tsx
import { forwardRef, useEffect, useRef } from "react";
import { clsx } from "@postenbring/hedwig-css/typed-classname";
import { jsx } from "react/jsx-runtime";
var TabsList = forwardRef(
  (_a, ref) => {
    var _b = _a, { children, direction = "horizontal", className } = _b, rest = __objRest(_b, ["children", "direction", "className"]);
    const { activeTabId } = useTabsContext();
    const tabsListRef = useRef(null);
    const mergedRef = useMergeRefs([tabsListRef, ref]);
    const { width: tabsWidth } = useResize(tabsListRef);
    const isClientSide = useHydrated();
    const { innerWidth } = isClientSide ? window : { innerWidth: 1e3 };
    const wideEnough = innerWidth >= tabsWidth;
    const previousTabId = useRef(activeTabId);
    useEffect(() => {
      const tabList = tabsListRef.current;
      const activeTab = tabList == null ? void 0 : tabList.querySelector(`[data-tabid="${activeTabId}"]`);
      if (!activeTab || !tabList) return;
      const { offsetHeight: containerHeight, offsetWidth: containerWidth } = tabList;
      const { offsetHeight, offsetWidth, offsetTop, offsetLeft } = activeTab;
      const height = offsetHeight / containerHeight;
      const width = offsetWidth / containerWidth;
      tabsListRef.current.style.setProperty("--_hds-tabs-marker-height", String(height));
      tabsListRef.current.style.setProperty("--_hds-tabs-marker-width", String(width));
      tabsListRef.current.style.setProperty("--_hds-tabs-marker-top", `${offsetTop}px`);
      tabsListRef.current.style.setProperty("--_hds-tabs-marker-left", `${offsetLeft}px`);
      if (previousTabId.current !== activeTabId) {
        tabsListRef.current.style.setProperty(
          "--_hds-tabs-marker-animated-color",
          "var(--_hds-tabs-marker-color)"
        );
        tabsListRef.current.style.setProperty(
          "--_hds-tabs-marker-border-fallback-color",
          "transparent"
        );
      }
      previousTabId.current = activeTabId;
    }, [activeTabId, innerWidth]);
    return /* @__PURE__ */ jsx(
      "div",
      __spreadProps(__spreadValues({
        className: clsx(
          "hds-tabs__list",
          direction === "horizontal" ? {
            "hds-tabs__list--horizontal": wideEnough,
            "hds-tabs__list--vertical": !wideEnough
          } : {
            "hds-tabs__list--vertical": true
          },
          className
        ),
        ref: mergedRef,
        role: "tablist"
      }, rest), {
        children
      })
    );
  }
);
TabsList.displayName = "Tabs.List";
var TabsTab = forwardRef(
  (_a, ref) => {
    var _b = _a, { children, tabId, className, onClick } = _b, rest = __objRest(_b, ["children", "tabId", "className", "onClick"]);
    const context = useTabsContext();
    const toggleTab = (e) => {
      e.preventDefault();
      context.toggleActiveTabId(tabId);
      onClick == null ? void 0 : onClick(e);
    };
    return /* @__PURE__ */ jsx(
      "button",
      __spreadProps(__spreadValues({
        className: clsx(
          "hds-tabs__tab",
          { "hds-tabs__tab--active": context.activeTabId === tabId },
          className
        ),
        "data-tabid": tabId,
        onClick: toggleTab,
        ref,
        type: "button",
        role: "tab"
      }, rest), {
        children
      })
    );
  }
);
TabsTab.displayName = "Tabs.Tab";

export {
  TabsList,
  TabsTab
};
//# sourceMappingURL=chunk-WVCJV74B.mjs.map