braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Tabs/Tabs.cjs

@@ -0,0 +1,192 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const assert = require("assert");
+const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
+const dynamic = require("@vanilla-extract/dynamic");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Divider_Divider_cjs = require("../Divider/Divider.cjs");
+const lib_components_Tabs_Tabs_actions_cjs = require("./Tabs.actions.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_Tabs_TabsProvider_cjs = require("./TabsProvider.cjs");
+const lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
+const lib_components_BraidProvider_BraidThemeContext_cjs = require("../BraidProvider/BraidThemeContext.cjs");
+const lib_components_Tabs_TabListContext_cjs = require("./TabListContext.cjs");
+const lib_components_Tabs_Tabs_css_cjs = require("./Tabs.css.cjs");
+const lib_hooks_useIsomorphicLayoutEffect_cjs = require("../../hooks/useIsomorphicLayoutEffect.cjs");
+const _interopDefaultCompat = (e) => e && typeof e === "object" && "default" in e ? e : { default: e };
+const assert__default = /* @__PURE__ */ _interopDefaultCompat(assert);
+const tabLinePositionDefault = { left: 0, width: 0 };
+const getActiveTabLinePosition = (button) => {
+  if (!button) {
+    return tabLinePositionDefault;
+  }
+  const computedStyle = getComputedStyle(button);
+  const elWidth = button.getBoundingClientRect().width;
+  const paddingLeft = parseFloat(computedStyle.paddingLeft);
+  const paddingRight = parseFloat(computedStyle.paddingRight);
+  const width = elWidth - paddingLeft - paddingRight;
+  return { left: button.offsetLeft + paddingLeft, width };
+};
+const Tabs = (props) => {
+  const tabsContext = React.useContext(lib_components_Tabs_TabsProvider_cjs.TabsContext);
+  const tabsRef = React.useRef(null);
+  const [activeTabPosition, setActiveTabPosition] = React.useState(
+    tabLinePositionDefault
+  );
+  const {
+    children,
+    label,
+    data,
+    align = "left",
+    gutter,
+    reserveHitArea = false,
+    divider = "minimal",
+    ...restProps
+  } = props;
+  assert__default.default(
+    tabsContext !== null,
+    "Tabs must be rendered as a child of TabsProvider. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tabs"
+  );
+  if (!tabsContext) {
+    throw new Error("Tabs rendered outside TabsProvider");
+  }
+  const { dispatch, a11y, selectedIndex, selectedItem } = tabsContext;
+  const tabItems = [];
+  const childTabs = lib_utils_flattenChildren_cjs.flattenChildren(children);
+  const tabs = childTabs.map((tab, index) => {
+    assert__default.default(
+      // @ts-expect-error
+      typeof tab === "object" && tab.type.__isTab__,
+      "Only Tab elements can be direct children of a Tabs"
+    );
+    tabItems.push(tab.props.item ?? index);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Tabs_TabListContext_cjs.TabListContext.Provider,
+      {
+        value: {
+          tabListItemIndex: index,
+          scrollContainer: tabsRef.current,
+          isLast: childTabs.length === index + 1
+        },
+        children: tab
+      },
+      index
+    );
+  });
+  React.useEffect(() => {
+    dispatch({ type: lib_components_Tabs_Tabs_actions_cjs.TAB_LIST_UPDATED, tabItems });
+  }, [tabItems.join(), dispatch]);
+  const {
+    space: { grid, space }
+  } = lib_components_BraidProvider_BraidThemeContext_cjs.useBraidTheme();
+  const [showMask, setShowMask] = React.useState(true);
+  const updateMask = React.useCallback(() => {
+    if (!tabsRef.current) {
+      return;
+    }
+    setShowMask(
+      tabsRef.current.scrollWidth - tabsRef.current.offsetWidth - tabsRef.current.scrollLeft > grid * space.small
+    );
+  }, [tabsRef, setShowMask, grid, space]);
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    updateMask();
+    window.addEventListener("resize", updateMask);
+    return () => window.removeEventListener("resize", updateMask);
+  }, [updateMask]);
+  const selectedTabIndex = typeof selectedItem !== "undefined" ? tabItems.indexOf(selectedItem) : selectedIndex;
+  const selectedTabButtonEl = tabsContext.tabButtonElements[selectedTabIndex.toString()];
+  lib_hooks_useIsomorphicLayoutEffect_cjs.useIsomorphicLayoutEffect(() => {
+    setActiveTabPosition(getActiveTabLinePosition(selectedTabButtonEl));
+  }, [selectedTabButtonEl]);
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { children: /* @__PURE__ */ jsxRuntime.jsx(
+    lib_components_Box_Box_cjs.Box,
+    {
+      className: reserveHitArea ? void 0 : lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", "medium"),
+      children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Box_Box_cjs.Box, { position: "relative", children: /* @__PURE__ */ jsxRuntime.jsxs(
+        lib_components_Box_Box_cjs.Box,
+        {
+          ref: tabsRef,
+          className: [
+            lib_components_Tabs_Tabs_css_cjs.scroll,
+            lib_components_Tabs_Tabs_css_cjs.nowrap,
+            showMask ? lib_components_Tabs_Tabs_css_cjs.mask : null
+          ],
+          display: "flex",
+          onScroll: updateMask,
+          flexWrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Box_Box_cjs.Box,
+              {
+                display: "flex",
+                className: align === "center" ? lib_components_Tabs_Tabs_css_cjs.marginAuto : void 0,
+                paddingX: gutter,
+                flexWrap: "nowrap",
+                position: "relative",
+                zIndex: 1,
+                children: /* @__PURE__ */ jsxRuntime.jsxs(
+                  lib_components_Box_Box_cjs.Box,
+                  {
+                    ...a11y.tabListProps({ label }),
+                    display: "flex",
+                    ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+                    flexWrap: "nowrap",
+                    position: "relative",
+                    children: [
+                      tabs,
+                      divider === "minimal" ? /* @__PURE__ */ jsxRuntime.jsx(
+                        lib_components_Box_Box_cjs.Box,
+                        {
+                          position: "absolute",
+                          bottom: 0,
+                          left: 0,
+                          right: 0,
+                          className: lib_components_Tabs_Tabs_css_cjs.divider,
+                          children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, {})
+                        }
+                      ) : null,
+                      selectedTabButtonEl ? /* @__PURE__ */ jsxRuntime.jsx(
+                        lib_components_Box_Box_cjs.Box,
+                        {
+                          component: "span",
+                          position: "absolute",
+                          display: "block",
+                          left: 0,
+                          right: 0,
+                          bottom: 0,
+                          background: "formAccent",
+                          pointerEvents: "none",
+                          className: [
+                            lib_components_Tabs_Tabs_css_cjs.tabUnderline,
+                            lib_components_Tabs_Tabs_css_cjs.tabUnderlineActiveDarkMode
+                          ],
+                          style: dynamic.assignInlineVars({
+                            [lib_components_Tabs_Tabs_css_cjs.underlineLeft]: activeTabPosition.left.toString(),
+                            [lib_components_Tabs_Tabs_css_cjs.underlineWidth]: activeTabPosition.width.toString()
+                          })
+                        }
+                      ) : null
+                    ]
+                  }
+                )
+              }
+            ),
+            divider === "full" ? /* @__PURE__ */ jsxRuntime.jsx(
+              lib_components_Box_Box_cjs.Box,
+              {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                className: lib_components_Tabs_Tabs_css_cjs.divider,
+                children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, {})
+              }
+            ) : null
+          ]
+        }
+      ) })
+    }
+  ) });
+};
+exports.Tabs = Tabs;

package/dist/lib/components/Tabs/Tabs.css.cjs

@@ -0,0 +1,93 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/Tabs/Tabs.css.ts", "braid-design-system");
+const tab = css.style({
+  selectors: {
+    "&::-moz-focus-inner": {
+      border: 0
+    }
+  }
+}, "tab");
+const hoveredTab = css.style({
+  selectors: {
+    [`${tab}:hover &`]: {
+      opacity: 1
+    }
+  }
+}, "hoveredTab");
+const nowrap = css.style({
+  whiteSpace: "nowrap"
+}, "nowrap");
+const scroll = css.style({
+  WebkitOverflowScrolling: "touch",
+  overflowX: "auto",
+  overflowY: "hidden",
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  selectors: {
+    "&::-webkit-scrollbar": {
+      width: 0,
+      height: 0
+    }
+  }
+}, "scroll");
+const mask = css.style({
+  maskImage: "linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 80px), rgba(0,0,0,0) 100%)"
+}, "mask");
+const marginAuto = css.style({
+  marginLeft: "auto",
+  marginRight: "auto"
+}, "marginAuto");
+const tabFocusRing = css.style({
+  margin: lib_themes_vars_css_cjs.vars.borderWidth.large,
+  selectors: {
+    [`${tab}:focus &`]: {
+      opacity: 1
+    }
+  }
+}, "tabFocusRing");
+const underlineLeft = css.createVar("underlineLeft");
+const underlineWidth = css.createVar("underlineWidth");
+const initialUnderlineWidth = 10;
+const tabUnderline = css.style({
+  height: lib_themes_vars_css_cjs.vars.borderWidth.large,
+  width: initialUnderlineWidth,
+  transformOrigin: "0 0",
+  transition: "transform .3s ease",
+  transform: `translateZ(0) translateX(${cssUtils.calc(underlineLeft).multiply("1px")}) scaleX(${cssUtils.calc(underlineWidth).divide(initialUnderlineWidth)})`
+}, "tabUnderline");
+const tabUnderlineActiveDarkMode = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
+  darkMode: {
+    background: lib_themes_vars_css_cjs.vars.borderColor.formAccentLight
+  }
+}), "tabUnderlineActiveDarkMode");
+const tabPanel = css.style({}, "tabPanel");
+const tabPanelFocusRing = css.style({
+  selectors: {
+    [`${tabPanel}:focus > &`]: {
+      opacity: 1
+    }
+  }
+}, "tabPanelFocusRing");
+const divider = css.style({
+  height: lib_themes_vars_css_cjs.vars.borderWidth.standard
+}, "divider");
+__vanilla_filescope__.endFileScope();
+exports.divider = divider;
+exports.hoveredTab = hoveredTab;
+exports.marginAuto = marginAuto;
+exports.mask = mask;
+exports.nowrap = nowrap;
+exports.scroll = scroll;
+exports.tab = tab;
+exports.tabFocusRing = tabFocusRing;
+exports.tabPanel = tabPanel;
+exports.tabPanelFocusRing = tabPanelFocusRing;
+exports.tabUnderline = tabUnderline;
+exports.tabUnderlineActiveDarkMode = tabUnderlineActiveDarkMode;
+exports.underlineLeft = underlineLeft;
+exports.underlineWidth = underlineWidth;

package/dist/lib/components/Tabs/Tabs.css.mjs

@@ -0,0 +1,94 @@
+import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
+import { style, createVar } from "@vanilla-extract/css";
+import { calc } from "@vanilla-extract/css-utils";
+import { colorModeStyle } from "../../css/colorModeStyle.mjs";
+import { vars } from "../../themes/vars.css.mjs";
+setFileScope("src/lib/components/Tabs/Tabs.css.ts", "braid-design-system");
+const tab = style({
+  selectors: {
+    "&::-moz-focus-inner": {
+      border: 0
+    }
+  }
+}, "tab");
+const hoveredTab = style({
+  selectors: {
+    [`${tab}:hover &`]: {
+      opacity: 1
+    }
+  }
+}, "hoveredTab");
+const nowrap = style({
+  whiteSpace: "nowrap"
+}, "nowrap");
+const scroll = style({
+  WebkitOverflowScrolling: "touch",
+  overflowX: "auto",
+  overflowY: "hidden",
+  scrollbarWidth: "none",
+  msOverflowStyle: "none",
+  selectors: {
+    "&::-webkit-scrollbar": {
+      width: 0,
+      height: 0
+    }
+  }
+}, "scroll");
+const mask = style({
+  maskImage: "linear-gradient(90deg, rgba(0,0,0,1) 0, rgba(0,0,0,1) calc(100% - 80px), rgba(0,0,0,0) 100%)"
+}, "mask");
+const marginAuto = style({
+  marginLeft: "auto",
+  marginRight: "auto"
+}, "marginAuto");
+const tabFocusRing = style({
+  margin: vars.borderWidth.large,
+  selectors: {
+    [`${tab}:focus &`]: {
+      opacity: 1
+    }
+  }
+}, "tabFocusRing");
+const underlineLeft = createVar("underlineLeft");
+const underlineWidth = createVar("underlineWidth");
+const initialUnderlineWidth = 10;
+const tabUnderline = style({
+  height: vars.borderWidth.large,
+  width: initialUnderlineWidth,
+  transformOrigin: "0 0",
+  transition: "transform .3s ease",
+  transform: `translateZ(0) translateX(${calc(underlineLeft).multiply("1px")}) scaleX(${calc(underlineWidth).divide(initialUnderlineWidth)})`
+}, "tabUnderline");
+const tabUnderlineActiveDarkMode = style(colorModeStyle({
+  darkMode: {
+    background: vars.borderColor.formAccentLight
+  }
+}), "tabUnderlineActiveDarkMode");
+const tabPanel = style({}, "tabPanel");
+const tabPanelFocusRing = style({
+  selectors: {
+    [`${tabPanel}:focus > &`]: {
+      opacity: 1
+    }
+  }
+}, "tabPanelFocusRing");
+const divider = style({
+  height: vars.borderWidth.standard
+}, "divider");
+endFileScope();
+export {
+  divider,
+  hoveredTab,
+  marginAuto,
+  mask,
+  nowrap,
+  scroll,
+  tab,
+  tabFocusRing,
+  tabPanel,
+  tabPanelFocusRing,
+  tabUnderline,
+  tabUnderlineActiveDarkMode,
+  underlineLeft,
+  underlineWidth
+};

package/dist/lib/components/Tabs/Tabs.mjs

@@ -0,0 +1,191 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useContext, useRef, useState, useEffect, useCallback } from "react";
+import assert from "assert";
+import { flattenChildren } from "../../utils/flattenChildren.mjs";
+import { assignInlineVars } from "@vanilla-extract/dynamic";
+import { Box } from "../Box/Box.mjs";
+import { Divider } from "../Divider/Divider.mjs";
+import { TAB_LIST_UPDATED } from "./Tabs.actions.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+import { TabsContext } from "./TabsProvider.mjs";
+import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
+import { useBraidTheme } from "../BraidProvider/BraidThemeContext.mjs";
+import { TabListContext } from "./TabListContext.mjs";
+import { scroll, nowrap, mask, marginAuto, divider, tabUnderline, tabUnderlineActiveDarkMode, underlineLeft, underlineWidth } from "./Tabs.css.mjs";
+import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.mjs";
+const tabLinePositionDefault = { left: 0, width: 0 };
+const getActiveTabLinePosition = (button) => {
+  if (!button) {
+    return tabLinePositionDefault;
+  }
+  const computedStyle = getComputedStyle(button);
+  const elWidth = button.getBoundingClientRect().width;
+  const paddingLeft = parseFloat(computedStyle.paddingLeft);
+  const paddingRight = parseFloat(computedStyle.paddingRight);
+  const width = elWidth - paddingLeft - paddingRight;
+  return { left: button.offsetLeft + paddingLeft, width };
+};
+const Tabs = (props) => {
+  const tabsContext = useContext(TabsContext);
+  const tabsRef = useRef(null);
+  const [activeTabPosition, setActiveTabPosition] = useState(
+    tabLinePositionDefault
+  );
+  const {
+    children,
+    label,
+    data,
+    align = "left",
+    gutter,
+    reserveHitArea = false,
+    divider: divider$1 = "minimal",
+    ...restProps
+  } = props;
+  assert(
+    tabsContext !== null,
+    "Tabs must be rendered as a child of TabsProvider. See the documentation for correct usage: https://seek-oss.github.io/braid-design-system/components/Tabs"
+  );
+  if (!tabsContext) {
+    throw new Error("Tabs rendered outside TabsProvider");
+  }
+  const { dispatch, a11y, selectedIndex, selectedItem } = tabsContext;
+  const tabItems = [];
+  const childTabs = flattenChildren(children);
+  const tabs = childTabs.map((tab, index) => {
+    assert(
+      // @ts-expect-error
+      typeof tab === "object" && tab.type.__isTab__,
+      "Only Tab elements can be direct children of a Tabs"
+    );
+    tabItems.push(tab.props.item ?? index);
+    return /* @__PURE__ */ jsx(
+      TabListContext.Provider,
+      {
+        value: {
+          tabListItemIndex: index,
+          scrollContainer: tabsRef.current,
+          isLast: childTabs.length === index + 1
+        },
+        children: tab
+      },
+      index
+    );
+  });
+  useEffect(() => {
+    dispatch({ type: TAB_LIST_UPDATED, tabItems });
+  }, [tabItems.join(), dispatch]);
+  const {
+    space: { grid, space }
+  } = useBraidTheme();
+  const [showMask, setShowMask] = useState(true);
+  const updateMask = useCallback(() => {
+    if (!tabsRef.current) {
+      return;
+    }
+    setShowMask(
+      tabsRef.current.scrollWidth - tabsRef.current.offsetWidth - tabsRef.current.scrollLeft > grid * space.small
+    );
+  }, [tabsRef, setShowMask, grid, space]);
+  useIsomorphicLayoutEffect(() => {
+    updateMask();
+    window.addEventListener("resize", updateMask);
+    return () => window.removeEventListener("resize", updateMask);
+  }, [updateMask]);
+  const selectedTabIndex = typeof selectedItem !== "undefined" ? tabItems.indexOf(selectedItem) : selectedIndex;
+  const selectedTabButtonEl = tabsContext.tabButtonElements[selectedTabIndex.toString()];
+  useIsomorphicLayoutEffect(() => {
+    setActiveTabPosition(getActiveTabLinePosition(selectedTabButtonEl));
+  }, [selectedTabButtonEl]);
+  return /* @__PURE__ */ jsx(Box, { children: /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: reserveHitArea ? void 0 : negativeMargin("top", "medium"),
+      children: /* @__PURE__ */ jsx(Box, { position: "relative", children: /* @__PURE__ */ jsxs(
+        Box,
+        {
+          ref: tabsRef,
+          className: [
+            scroll,
+            nowrap,
+            showMask ? mask : null
+          ],
+          display: "flex",
+          onScroll: updateMask,
+          flexWrap: "nowrap",
+          children: [
+            /* @__PURE__ */ jsx(
+              Box,
+              {
+                display: "flex",
+                className: align === "center" ? marginAuto : void 0,
+                paddingX: gutter,
+                flexWrap: "nowrap",
+                position: "relative",
+                zIndex: 1,
+                children: /* @__PURE__ */ jsxs(
+                  Box,
+                  {
+                    ...a11y.tabListProps({ label }),
+                    display: "flex",
+                    ...buildDataAttributes({ data, validateRestProps: restProps }),
+                    flexWrap: "nowrap",
+                    position: "relative",
+                    children: [
+                      tabs,
+                      divider$1 === "minimal" ? /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          position: "absolute",
+                          bottom: 0,
+                          left: 0,
+                          right: 0,
+                          className: divider,
+                          children: /* @__PURE__ */ jsx(Divider, {})
+                        }
+                      ) : null,
+                      selectedTabButtonEl ? /* @__PURE__ */ jsx(
+                        Box,
+                        {
+                          component: "span",
+                          position: "absolute",
+                          display: "block",
+                          left: 0,
+                          right: 0,
+                          bottom: 0,
+                          background: "formAccent",
+                          pointerEvents: "none",
+                          className: [
+                            tabUnderline,
+                            tabUnderlineActiveDarkMode
+                          ],
+                          style: assignInlineVars({
+                            [underlineLeft]: activeTabPosition.left.toString(),
+                            [underlineWidth]: activeTabPosition.width.toString()
+                          })
+                        }
+                      ) : null
+                    ]
+                  }
+                )
+              }
+            ),
+            divider$1 === "full" ? /* @__PURE__ */ jsx(
+              Box,
+              {
+                position: "absolute",
+                bottom: 0,
+                left: 0,
+                right: 0,
+                className: divider,
+                children: /* @__PURE__ */ jsx(Divider, {})
+              }
+            ) : null
+          ]
+        }
+      ) })
+    }
+  ) });
+};
+export {
+  Tabs
+};

package/dist/lib/components/Tabs/Tabs.playroom.cjs

@@ -0,0 +1,25 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_utils_cjs = require("../../playroom/utils.cjs");
+const lib_components_Tabs_TabsProvider_cjs = require("./TabsProvider.cjs");
+const lib_components_Tabs_Tabs_cjs = require("./Tabs.cjs");
+const lib_components_Tabs_Tab_cjs = require("./Tab.cjs");
+const TabsProvider = ({
+  id,
+  ...restProps
+}) => {
+  const fallbackId = lib_playroom_utils_cjs.useFallbackId();
+  return /* @__PURE__ */ jsxRuntime.jsx(lib_components_Tabs_TabsProvider_cjs.TabsProvider, { id: id ?? fallbackId, ...restProps });
+};
+const Tabs = ({ label, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(lib_components_Tabs_Tabs_cjs.Tabs, { label: "", ...restProps });
+const Tab = ({ icon, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Tabs_Tab_cjs.Tab,
+  {
+    icon: typeof icon === "boolean" ? void 0 : icon,
+    ...restProps
+  }
+);
+Tab.__isTab__ = true;
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+exports.TabsProvider = TabsProvider;

package/dist/lib/components/Tabs/Tabs.playroom.mjs

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useFallbackId } from "../../playroom/utils.mjs";
+import { TabsProvider as TabsProvider$1 } from "./TabsProvider.mjs";
+import { Tabs as Tabs$1 } from "./Tabs.mjs";
+import { Tab as Tab$1 } from "./Tab.mjs";
+const TabsProvider = ({
+  id,
+  ...restProps
+}) => {
+  const fallbackId = useFallbackId();
+  return /* @__PURE__ */ jsx(TabsProvider$1, { id: id ?? fallbackId, ...restProps });
+};
+const Tabs = ({ label, ...restProps }) => /* @__PURE__ */ jsx(Tabs$1, { label: "", ...restProps });
+const Tab = ({ icon, ...restProps }) => /* @__PURE__ */ jsx(
+  Tab$1,
+  {
+    icon: typeof icon === "boolean" ? void 0 : icon,
+    ...restProps
+  }
+);
+Tab.__isTab__ = true;
+export {
+  Tab,
+  Tabs,
+  TabsProvider
+};