@homebound/beam 4.14.6 → 4.14.7

package/dist/index.d.cts

@@ -10851,8 +10851,14 @@ type RequiredRenderRouteTabs<V extends string, X> = {
  * If you want to tease apart Tabs from their TabContent, you can use the `Tab`
  * and `TabContent` components directly.
  */
-declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: RequiredRenderTabs<V, X> | RequiredRenderRouteTabs<V, X>): React$1.JSX.Element;
-declare function TabContent<V extends string, X extends Only<TabsContentXss, X>>(props: Omit<RequiredRenderTabs<V, X>, "onChange"> | RequiredRenderRouteTabs<V, X>): React$1.JSX.Element;
+declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: (RequiredRenderTabs<V, X> | RequiredRenderRouteTabs<V, X>) & {
+    /** Skip the default top gap. Also set when the tab list is hidden. */
+    omitTopSpacing?: boolean;
+}): React$1.JSX.Element;
+declare function TabContent<V extends string, X extends Only<TabsContentXss, X>>(props: (Omit<RequiredRenderTabs<V, X>, "onChange"> | RequiredRenderRouteTabs<V, X>) & {
+    /** Skip the default top gap. `TabsWithContent` sets this when the tab list is hidden. */
+    omitTopSpacing?: boolean;
+}): React$1.JSX.Element;
 /** The top list of tabs. */
 declare function Tabs<V extends string, X extends Only<TabsContentXss, X>>(props: TabsProps<V, X> | RouteTabsProps<V, X>): React$1.JSX.Element;
 

package/dist/index.d.ts

@@ -10851,8 +10851,14 @@ type RequiredRenderRouteTabs<V extends string, X> = {
  * If you want to tease apart Tabs from their TabContent, you can use the `Tab`
  * and `TabContent` components directly.
  */
-declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: RequiredRenderTabs<V, X> | RequiredRenderRouteTabs<V, X>): React$1.JSX.Element;
-declare function TabContent<V extends string, X extends Only<TabsContentXss, X>>(props: Omit<RequiredRenderTabs<V, X>, "onChange"> | RequiredRenderRouteTabs<V, X>): React$1.JSX.Element;
+declare function TabsWithContent<V extends string, X extends Only<TabsContentXss, X>>(props: (RequiredRenderTabs<V, X> | RequiredRenderRouteTabs<V, X>) & {
+    /** Skip the default top gap. Also set when the tab list is hidden. */
+    omitTopSpacing?: boolean;
+}): React$1.JSX.Element;
+declare function TabContent<V extends string, X extends Only<TabsContentXss, X>>(props: (Omit<RequiredRenderTabs<V, X>, "onChange"> | RequiredRenderRouteTabs<V, X>) & {
+    /** Skip the default top gap. `TabsWithContent` sets this when the tab list is hidden. */
+    omitTopSpacing?: boolean;
+}): React$1.JSX.Element;
 /** The top list of tabs. */
 declare function Tabs<V extends string, X extends Only<TabsContentXss, X>>(props: TabsProps<V, X> | RouteTabsProps<V, X>): React$1.JSX.Element;
 

package/dist/index.js

@@ -28477,15 +28477,13 @@ import { Link as Link7, useLocation as useLocation2 } from "react-router-dom";
 import { trussProps as trussProps128, maybeCssVar as maybeCssVar61 } from "@homebound/truss/runtime";
 import { Fragment as Fragment51, jsx as jsx224, jsxs as jsxs118 } from "react/jsx-runtime";
 function TabsWithContent(props) {
-  const styles = hideTabs(props) ? {} : {
-    paddingTop: "pt3"
-  };
+  const {
+    omitTopSpacing = false,
+    ...tabProps
+  } = props;
   return /* @__PURE__ */ jsxs118(Fragment51, { children: [
-    /* @__PURE__ */ jsx224(Tabs, { ...props }),
-    /* @__PURE__ */ jsx224(TabContent, { ...props, contentXss: {
-      ...styles,
-      ...props.contentXss
-    } })
+    /* @__PURE__ */ jsx224(Tabs, { ...tabProps }),
+    /* @__PURE__ */ jsx224(TabContent, { ...tabProps, omitTopSpacing: omitTopSpacing || hideTabs(props) })
   ] });
 }
 function TabContent(props) {
@@ -28493,7 +28491,8 @@ function TabContent(props) {
   const {
     tabs,
     contentXss = {},
-    omitFullBleedPadding = false
+    omitFullBleedPadding = false,
+    omitTopSpacing = false
   } = props;
   const location = useLocation2();
   const selectedTab = isRouteTabs(props) ? props.tabs.find((t) => {
@@ -28507,7 +28506,26 @@ function TabContent(props) {
   return (
     // Using FullBleed to allow the tab's bgColor to extend to the edges of the <ScrollableContent /> element.
     // Omit the padding from `FullBleed` if the caller passes in the `paddingLeft/Right` styles.
-    /* @__PURE__ */ jsx224(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx224("div", { "aria-labelledby": `${uniqueValue}-tab`, id: `${uniqueValue}-tabPanel`, role: "tabpanel", tabIndex: 0, ...tid.panel, ...trussProps128(contentXss), children: selectedTab.render() }) })
+    /* @__PURE__ */ jsx224(FullBleed, { omitPadding: omitFullBleedPadding, children: /* @__PURE__ */ jsx224(
+      "div",
+      {
+        "aria-labelledby": `${uniqueValue}-tab`,
+        id: `${uniqueValue}-tabPanel`,
+        role: "tabpanel",
+        tabIndex: 0,
+        ...tid.panel,
+        ...selfTopSpaced,
+        ...trussProps128({
+          ...{
+            ...!omitTopSpacing ? {
+              paddingTop: "first_child_n_data_self_top_spaced_pt3"
+            } : {}
+          },
+          ...contentXss
+        }),
+        children: selectedTab.render()
+      }
+    ) })
   );
 }
 function Tabs(props) {
@@ -29570,7 +29588,7 @@ function PageHeaderLayout(props) {
       flexShrink: "fs0",
       width: "w100"
     }), children: /* @__PURE__ */ jsx236("div", { ref: headerMetricsRef, ...mergeProps42(void 0, innerStyle, innerCss), ...tid.pageHeader, children: pageHeaderEl }) }),
-    /* @__PURE__ */ jsx236("div", { className: "df fdc fg1 mh0 w100 first_child_n_data_self_top_spaced_mt3", ...tid.body, children })
+    /* @__PURE__ */ jsx236("div", { className: "df fdc fg1 mh0 w100 first_child_n_data_self_top_spaced_pt3", ...tid.body, children })
   ] }) });
 }