@homebound/beam 2.167.0 → 2.168.0

package/dist/components/Tabs.d.ts

@@ -16,6 +16,7 @@ export interface TabsProps<V extends string, X> {
     onChange: (value: V) => void;
     contentXss?: X;
     alwaysShowAllTabs?: boolean;
+    includeBottomBorder?: boolean;
 }
 export interface RouteTabsProps<V extends string, X> extends Omit<TabsProps<V, X>, "onChange" | "selected" | "tabs"> {
     tabs: RouteTab<V>[];
@@ -65,26 +66,36 @@ export declare function getTabStyles(): {
     } & {
         paddingRight: import("csstype").Property.PaddingRight<0 | (string & {})> | undefined;
     } & {
-        borderRadius: import("csstype").Property.BorderRadius<0 | (string & {})> | undefined;
+        outline: import("csstype").Property.Outline<0 | (string & {})> | undefined;
+    } & {
+        color: import("csstype").Property.Color | undefined;
+    } & {
+        width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+    } & {
+        cursor: import("csstype").Property.Cursor | undefined;
     } & {
         fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
         fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
     } & {
         lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    };
+    activeStyles: {
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
     } & {
-        outline: import("csstype").Property.Outline<0 | (string & {})> | undefined;
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
     } & {
-        color: import("csstype").Property.Color | undefined;
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
     } & {
-        width: import("csstype").Property.Width<0 | (string & {})> | undefined;
+        borderColor: import("csstype").Property.BorderColor | undefined;
     } & {
-        cursor: import("csstype").Property.Cursor | undefined;
-    };
-    activeStyles: {
-        color: import("csstype").Property.Color | undefined;
+        fontWeight: import("csstype").Property.FontWeight | undefined;
     } & {
-        backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+        fontSize: import("csstype").Property.FontSize<0 | (string & {})> | undefined;
+    } & {
+        lineHeight: import("csstype").Property.LineHeight<0 | (string & {})> | undefined;
+    } & {
+        color: import("csstype").Property.Color | undefined;
     };
     disabledStyles: {
         color: import("csstype").Property.Color | undefined;
@@ -97,14 +108,24 @@ export declare function getTabStyles(): {
         boxShadow: import("csstype").Property.BoxShadow | undefined;
     };
     hoverStyles: {
-        color: import("csstype").Property.Color | undefined;
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
     } & {
-        backgroundColor: import("csstype").Property.BackgroundColor | undefined;
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
+    } & {
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    } & {
+        borderColor: import("csstype").Property.BorderColor | undefined;
     };
     activeHoverStyles: {
         backgroundColor: import("csstype").Property.BackgroundColor | undefined;
     } & {
-        color: import("csstype").Property.Color | undefined;
+        borderBottomStyle: import("csstype").Property.BorderBottomStyle | undefined;
+    } & {
+        borderBottomWidth: import("csstype").Property.BorderBottomWidth<0 | (string & {})> | undefined;
+    } & {
+        paddingBottom: import("csstype").Property.PaddingBottom<0 | (string & {})> | undefined;
+    } & {
+        borderColor: import("csstype").Property.BorderColor | undefined;
     };
 };
 export declare function getNextTabValue<V extends string>(selected: V, key: "ArrowLeft" | "ArrowRight", tabs: Tab<V>[] | RouteTab<V>[]): V;

package/dist/components/Tabs.js

@@ -45,7 +45,7 @@ exports.TabContent = TabContent;
 /** The top list of tabs. */
 function Tabs(props) {
     const { tabActionsRef, tabActionsDiv } = (0, BeamContext_1.useBeamContext)();
-    const { ariaLabel, tabs, ...others } = props;
+    const { ariaLabel, tabs, includeBottomBorder, ...others } = props;
     const location = (0, react_router_1.useLocation)();
     const selected = isRouteTabs(props)
         ? uniqueTabValue(props.tabs.find((t) => !!(0, react_router_1.matchPath)(location.pathname, { path: t.path, exact: true })) || props.tabs[0])
@@ -84,7 +84,7 @@ function Tabs(props) {
             setActive(selected);
         }
     }
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: Css_1.Css.dif.childGap1.$, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ css: Css_1.Css.df.aic.$ }, { children: [!hideTabs(props) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ ref: ref, css: { ...Css_1.Css.dif.childGap1.$, ...(includeBottomBorder ? { ...Css_1.Css.bb.bGray200.$ } : {}) }, "aria-label": ariaLabel, role: "tablist" }, tid, { children: tabs.map((tab) => {
                     const uniqueValue = uniqueTabValue(tab);
                     return ((0, jsx_runtime_1.jsx)(TabImpl, Object.assign({ active: active === uniqueValue, focusProps: focusProps, isFocusVisible: isFocusVisible, onClick: onClick, onKeyUp: onKeyUp, onBlur: onBlur, tab: tab }, tid[(0, defaultTestId_1.defaultTestId)(uniqueValue)]), uniqueValue));
                 }) }), void 0)), (0, jsx_runtime_1.jsx)("div", { css: Css_1.Css.ml("auto").addIn("&>div", Css_1.Css.df.aic.childGap1.$).$, ref: tabActionsRef }, void 0)] }), void 0));
@@ -122,13 +122,20 @@ function TabImpl(props) {
     return isDisabled ? ((0, jsx_runtime_1.jsx)("div", Object.assign({}, tabProps, { children: tabLabel }), void 0)) : isRouteTab(tab) ? ((0, jsx_runtime_1.jsx)(react_router_dom_1.Link, Object.assign({}, { ...tabProps, ...interactiveProps }, { className: "navLink", to: tab.href }, { children: tabLabel }), void 0)) : ((0, jsx_runtime_1.jsx)("button", Object.assign({}, { ...tabProps, ...interactiveProps }, { children: tabLabel }), void 0));
 }
 function getTabStyles() {
+    const borderBottomWidthPx = 4;
+    const verticalPaddingPx = 6;
+    // Decrease the bottom padding by the same amount of the new border width to prevent text layout shift
+    const borderBottomStyles = Css_1.Css.bb
+        .add("borderBottomWidth", `${borderBottomWidthPx}px`)
+        .pbPx(verticalPaddingPx - borderBottomWidthPx).$;
     return {
-        baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(6).px1.br4.smEm.outline0.gray700.add("width", "fit-content").cursorPointer.$,
-        activeStyles: Css_1.Css.lightBlue700.bgLightBlue50.$,
+        baseStyles: Css_1.Css.df.aic.hPx(32).pyPx(verticalPaddingPx).px1.outline0.gray700.add("width", "fit-content")
+            .cursorPointer.sm.$,
+        activeStyles: Css_1.Css.add(borderBottomStyles).bLightBlue700.smEm.gray900.$,
         disabledStyles: Css_1.Css.gray400.cursorNotAllowed.$,
         focusRingStyles: Css_1.Css.bgLightBlue50.bshFocus.$,
-        hoverStyles: Css_1.Css.gray700.bgGray100.$,
-        activeHoverStyles: Css_1.Css.bgLightBlue200.lightBlue700.$,
+        hoverStyles: Css_1.Css.add(borderBottomStyles).bGray400.$,
+        activeHoverStyles: Css_1.Css.bgLightBlue50.add(borderBottomStyles).bLightBlue700.$,
     };
 }
 exports.getTabStyles = getTabStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homebound/beam",
-  "version": "2.167.0",
+  "version": "2.168.0",
   "author": "Homebound",
   "license": "MIT",
   "main": "dist/index.js",