@box/blueprint-web 6.17.0 → 6.19.0

package/lib-esm/index.css

@@ -791,7 +791,7 @@
   top:0;
 }
 
-.icon_button_module_iconButton--19afc{
+.icon_button_module_iconButton--5ec37{
   align-items:center;
   background:var(--surface-cta-surface-icon);
   border:0;
@@ -802,44 +802,47 @@
   justify-content:center;
   padding:0;
 }
-.icon_button_module_iconButton--19afc .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37 .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon);
 }
-.icon_button_module_iconButton--19afc[aria-disabled=true]{
+.icon_button_module_iconButton--5ec37[aria-disabled=true]{
   background:var(--surface-cta-surface-icon-disabled);
   opacity:.3;
 }
-.icon_button_module_iconButton--19afc[aria-disabled=true] .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37[aria-disabled=true] .icon_button_module_iconColor--5ec37 *{
   fill:var(--gray-50);
 }
-.icon_button_module_iconButton--19afc:focus-visible,.icon_button_module_iconButton--19afc[data-focus-visible]{
+.icon_button_module_iconButton--5ec37:focus-visible{
+  outline:none;
+}
+.icon_button_module_iconButton--5ec37[data-focus-visible]{
   background:var(--surface-cta-surface-icon-hover);
   outline:var(--border-2) solid var(--outline-focus-on-light);
 }
-.icon_button_module_iconButton--19afc:focus-visible .icon_button_module_iconColor--19afc *,.icon_button_module_iconButton--19afc[data-focus-visible] .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37[data-focus-visible] .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon-hover);
 }
-.icon_button_module_iconButton--19afc:hover{
+.icon_button_module_iconButton--5ec37:hover{
   background:var(--surface-cta-surface-icon-hover);
 }
-.icon_button_module_iconButton--19afc:hover .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37:hover .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon-hover);
 }
-.icon_button_module_iconButton--19afc:active,.icon_button_module_iconButton--19afc[data-active]{
+.icon_button_module_iconButton--5ec37:active,.icon_button_module_iconButton--5ec37[data-active]{
   background:var(--surface-cta-surface-icon-pressed);
 }
-.icon_button_module_iconButton--19afc:active .icon_button_module_iconColor--19afc *,.icon_button_module_iconButton--19afc[data-active] .icon_button_module_iconColor--19afc *{
+.icon_button_module_iconButton--5ec37:active .icon_button_module_iconColor--5ec37 *,.icon_button_module_iconButton--5ec37[data-active] .icon_button_module_iconColor--5ec37 *{
   fill:var(--icon-cta-icon-pressed);
 }
-.icon_button_module_iconButton--19afc.icon_button_module_large--19afc{
+.icon_button_module_iconButton--5ec37.icon_button_module_large--5ec37{
   height:var(--size-10);
   width:var(--size-10);
 }
-.icon_button_module_iconButton--19afc.icon_button_module_small--19afc{
+.icon_button_module_iconButton--5ec37.icon_button_module_small--5ec37{
   height:var(--size-8);
   width:var(--size-8);
 }
-.icon_button_module_iconButton--19afc.icon_button_module_x-small--19afc{
+.icon_button_module_iconButton--5ec37.icon_button_module_x-small--5ec37{
   height:var(--size-6);
   width:var(--size-6);
 }
@@ -4132,29 +4135,100 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   opacity:.3;
 }
 
-.tabs_module_tabsListContainer--23e09{
+.tabs_module_hiddenWidthSetter--6a56b{
+  display:block;
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-weight:700;
+  height:0;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  overflow:hidden;
+  text-decoration:none;
+  text-transform:none;
+  visibility:hidden;
+}
+.tabs_module_hiddenWidthSetter--6a56b > *{
+  visibility:hidden;
+}
+
+.tabs_module_contentSwitchTabList--6a56b{
+  background:var(--surface-contentswitcher-surface);
+  border-radius:var(--radius-3);
+  display:grid;
+  gap:var(--space-1);
+  grid-auto-columns:1fr;
+  grid-auto-flow:column;
+  min-width:-moz-fit-content;
+  min-width:fit-content;
+  padding:var(--space-1);
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b{
+  align-items:center;
+  background:#0000;
+  border:none;
+  border-radius:var(--radius-2);
+  display:flex;
+  flex-direction:column;
+  font-weight:400;
+  height:var(--size-8);
+  justify-content:center;
+  outline:none;
+  padding-inline:var(--space-4);
+  white-space:nowrap;
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b,.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b[aria-selected=true]{
+  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  letter-spacing:.01875rem;
+  line-height:1.25rem;
+  text-decoration:none;
+  text-transform:none;
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b[aria-selected=true]{
+  background:var(--surface-cta-surface-secondary);
+  box-shadow:0 0 0 var(--border-1) var(--gray-50);
+  color:var(--text-text-on-light);
+  font-weight:700;
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b:not([aria-disabled=true])[data-focus-visible]{
+  border-color:#0000;
+  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b:not([aria-disabled=true]):hover{
+  background:var(--surface-surface-hover);
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b:not([aria-disabled=true]):active{
+  background:var(--surface-cta-surface-secondary-pressed);
+}
+.tabs_module_contentSwitchTabList--6a56b .tabs_module_contentSwitchTab--6a56b[aria-disabled=true]{
+  opacity:.3;
+  pointer-events:none;
+}
+
+.tabs_module_tabsListContainer--6a56b{
   height:calc(var(--size-10) + (var(--border-3) + 1px)*2);
   overflow-y:hidden;
   scroll-behavior:smooth;
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b{
   display:flex;
   overflow-x:auto;
   padding:calc(var(--border-3) + 1px);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tabSeparator--23e09{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tabSeparator--6a56b{
   border-bottom:var(--border-2) solid var(--border-tab-border);
   min-width:var(--space-4);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tabSeparator--23e09:last-child{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tabSeparator--6a56b:last-child{
   display:none;
 }
 @media only screen and (max-width: 1023px){
-  .tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tabSeparator--23e09{
+  .tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tabSeparator--6a56b{
     min-width:calc(var(--border-3) + 1px);
   }
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b{
   background:var(--background-background);
   border-style:none;
   border-bottom:var(--border-2) solid var(--border-tab-border);
@@ -4168,7 +4242,7 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   scroll-margin:calc(var(--border-3) + 1px);
   z-index:2;
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09,.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09 .tabs_module_hiddenWidthSetter--23e09{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b,.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b[aria-selected=true]{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   letter-spacing:.01875rem;
@@ -4176,42 +4250,26 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09 .tabs_module_hiddenWidthSetter--23e09{
-  display:block;
-  font-weight:700;
-  height:0;
-  overflow:hidden;
-  visibility:hidden;
-}
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09 .tabs_module_hiddenWidthSetter--23e09 > *{
-  visibility:hidden;
-}
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09[aria-selected=true]{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b[aria-selected=true]{
   border-bottom:var(--border-2) solid var(--border-tab-border-selected);
   color:var(--text-cta-link);
-  font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
-  font-size:.875rem;
   font-weight:700;
-  letter-spacing:.01875rem;
-  line-height:1.25rem;
-  text-decoration:none;
-  text-transform:none;
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09:hover{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b:hover{
   background-color:var(--surface-tab-surface-hover);
   color:var(--text-text-on-light-secondary-hover);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09:hover[aria-selected=true]{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b:hover[aria-selected=true]{
   color:var(--text-cta-link);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09:active{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b:active{
   background-color:var(--surface-tab-surface-pressed);
   color:var(--text-text-on-light-secondary-hover);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09:active[aria-selected=true]{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b:active[aria-selected=true]{
   color:var(--text-cta-link);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09:focus-visible,.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09[data-focus-visible]{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b:focus-visible,.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b[data-focus-visible]{
   background-color:var(--surface-tab-surface-hover);
   border-radius:var(--radius-05);
   box-shadow:inset 0 0 0 1px #fff;
@@ -4219,10 +4277,10 @@ table.inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   outline:var(--border-3) solid var(--outline-focus-on-light);
   outline-offset:1px;
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09:focus-visible[aria-selected=true],.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09[data-focus-visible][aria-selected=true]{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b:focus-visible[aria-selected=true],.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b[data-focus-visible][aria-selected=true]{
   color:var(--text-cta-link);
 }
-.tabs_module_tabsListContainer--23e09 .tabs_module_tabList--23e09 .tabs_module_tab--23e09[aria-disabled=true]{
+.tabs_module_tabsListContainer--6a56b .tabs_module_tabList--6a56b .tabs_module_tab--6a56b[aria-disabled=true]{
   opacity:.5;
 }
 

package/lib-esm/primitives/icon-button/icon-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"iconButton":"icon_button_module_iconButton--19afc","iconColor":"icon_button_module_iconColor--19afc","large":"icon_button_module_large--19afc","small":"icon_button_module_small--19afc","x-small":"icon_button_module_x-small--19afc"};
+var styles = {"iconButton":"icon_button_module_iconButton--5ec37","iconColor":"icon_button_module_iconColor--5ec37","large":"icon_button_module_large--5ec37","small":"icon_button_module_small--5ec37","x-small":"icon_button_module_x-small--5ec37"};
 
 export { styles as default };

package/lib-esm/primitives/select-menu-grid/index.d.ts

@@ -1,5 +1,6 @@
 import { SelectMenuGrid } from './select-menu-grid';
 import { SelectMenuGridColorCircle, SelectMenuGridOption, SelectMenuGridSquare } from './select-menu-grid-option';
+export { type SelectMenuGridProps, type SelectMenuOptionProps } from './types';
 type SelectMenuOption = typeof SelectMenuGridOption & {
     Square: typeof SelectMenuGridSquare;
     ColorCircle: typeof SelectMenuGridColorCircle;
@@ -9,4 +10,3 @@ type SelectMenuType = {
     Grid: typeof SelectMenuGrid;
 };
 export declare const SelectMenu: SelectMenuType;
-export {};

package/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Button } from '@ariakit/react';
+import { CompositeItem, Button } from '@ariakit/react';
 import clsx from 'clsx';
 import Color from 'color';
 import { forwardRef } from 'react';
@@ -33,22 +33,24 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const isButtonActive = !disabled && !loading && active;
   const shouldShowTooltip = !isButtonDisabled;
   // TODO: [DSYS-764] use IconButton instead of AriakitButton
-  const button = jsxs(Button, {
-    ...restProps,
-    ref: forwardedRef,
-    "aria-label": loading ? loadingAriaLabel : ariaLabel,
-    className: clsx(styles.optionButton, className, {
-      [styles.loading]: loading,
-      [styles.active]: isButtonActive
-    }),
-    disabled: isButtonDisabled,
-    children: [variant === 'colorCircle' && jsx(ColorSwatch, {
-      color: color || '',
-      loading: !!loading
-    }), variant === 'square' && jsx(Icon, {
-      loading: !!loading,
-      children: children
-    })]
+  const button = jsx(CompositeItem, {
+    render: jsxs(Button, {
+      ...restProps,
+      ref: forwardedRef,
+      "aria-label": loading ? loadingAriaLabel : ariaLabel,
+      className: clsx(styles.optionButton, className, {
+        [styles.loading]: loading,
+        [styles.active]: isButtonActive
+      }),
+      disabled: isButtonDisabled,
+      children: [variant === 'colorCircle' && jsx(ColorSwatch, {
+        color: color || '',
+        loading: !!loading
+      }), variant === 'square' && jsx(Icon, {
+        loading: !!loading,
+        children: children
+      })]
+    })
   });
   return jsxs("div", {
     className: styles.buttonWrapper,

package/lib-esm/primitives/select-menu-grid/select-menu-grid.d.ts

@@ -2,4 +2,8 @@
 export declare const SelectMenuGrid: import("react").ForwardRefExoticComponent<Omit<{
     children: import("react").ReactNode;
     columns: number;
-} & import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+} & import("@ariakit/react").CompositeOptions<"div"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@ariakit/react").CompositeOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/select-menu-grid/select-menu-grid.js

@@ -1,10 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
+import { CompositeProvider, Composite, CompositeRow } from '@ariakit/react';
 import clsx from 'clsx';
 import chunk from 'lodash/chunk';
 import { forwardRef, Children } from 'react';
 import styles from './select-menu-grid.module.js';
 
-const Row = props => jsx("div", {
+const Row = props => jsx(CompositeRow, {
   ...props,
   className: styles.row,
   role: "row"
@@ -17,14 +18,16 @@ const SelectMenuGrid = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const childrenByColumns = chunk(Children.toArray(children), columns);
-  return jsx("div", {
-    ...rest,
-    ref: forwardedRef,
-    className: clsx(styles.grid, className),
-    role: "grid",
-    children: childrenByColumns.map((row, i) => jsx(Row, {
-      children: row
-    }, row[0]?.key || i))
+  return jsx(CompositeProvider, {
+    children: jsx(Composite, {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(styles.grid, className),
+      role: "grid",
+      children: childrenByColumns.map((row, i) => jsx(Row, {
+        children: row
+      }, row[0]?.key || i))
+    })
   });
 });
 

package/lib-esm/primitives/select-menu-grid/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type ButtonProps as AriakitButtonProps, type CompositeProps, type CompositeRowProps } from '@ariakit/react';
 import { type RequireAllOrNone, type SetOptional } from 'type-fest';
 type Loading = {
     /** Loading state of the grid option. Ghost section is displaying as a placeholder. When this is true `loadingAriaLabel` must also be provided. */
@@ -23,13 +23,14 @@ export type SelectMenuGridColorCircleProps = CommonOptionProps & {
     /** The color of the swatch  */
     color: string;
 };
-export type SelectMenuGridOptionProps = SetOptional<SelectMenuGridSquareProps, keyof SelectMenuGridSquareProps> & SetOptional<SelectMenuGridColorCircleProps, keyof SelectMenuGridColorCircleProps> & {
+export type SelectMenuOptionProps = SetOptional<SelectMenuGridSquareProps, keyof SelectMenuGridSquareProps> & SetOptional<SelectMenuGridColorCircleProps, keyof SelectMenuGridColorCircleProps> & {
     variant: 'square' | 'colorCircle';
 };
+export type SelectMenuGridRowProps = CompositeRowProps;
 export type SelectMenuGridProps = {
     /** The grid options to render */
     children: React.ReactNode;
     /** The number of columns to slice the grid options into */
     columns: number;
-} & React.ComponentProps<'div'>;
+} & CompositeProps;
 export {};

package/lib-esm/primitives/tabs/content-switch-tab.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ContentSwitchTab: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").TabOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, keyof import("@ariakit/react").TabOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+} & {
+    variant?: import("./types").TabsVariant | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/tabs/content-switch-tab.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Tab } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useTabsWidthContext } from './tabs-width-context.js';
+import styles from './tabs.module.js';
+
+const ContentSwitchTab = /*#__PURE__*/forwardRef(function Tab$1(props, ref) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  const widthSetterRef = useRef(null);
+  const {
+    minTabWidth,
+    addTabWidth
+  } = useTabsWidthContext();
+  useEffect(() => {
+    const tabElement = widthSetterRef.current;
+    if (!tabElement) {
+      return;
+    }
+    const tabWidth = tabElement.getBoundingClientRect().width;
+    addTabWidth(tabWidth);
+  }, [addTabWidth]);
+  return jsxs(Tab, {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.contentSwitchTab, className),
+    children: [children, jsx("span", {
+      ref: widthSetterRef,
+      className: styles.hiddenWidthSetter,
+      style: {
+        minWidth: minTabWidth
+      },
+      children: children
+    })]
+  });
+});
+ContentSwitchTab.displayName = 'ContentSwitchTab';
+
+export { ContentSwitchTab };

package/lib-esm/primitives/tabs/default-tab.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const DefaultTab: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").TabOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: import("react").RefObject<HTMLButtonElement> | ((instance: HTMLButtonElement | null) => void) | null | undefined;
+}, keyof import("@ariakit/react").TabOptions<T>> & {
+    [index: `data-${string}`]: unknown;
+} & {
+    variant?: import("./types").TabsVariant | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/primitives/tabs/default-tab.js

@@ -0,0 +1,57 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { Tab } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, useRef, useEffect } from 'react';
+import { useForkRef } from '../../utils/useForkRef.js';
+import styles from './tabs.module.js';
+import { useTabs } from './use-tabs.js';
+
+const outlineWidth = 3;
+const outlineOffset = 1;
+const padding = 12;
+const scrollTabIntoViewIfSelected = (tabRef, isSelected) => {
+  const tabElement = tabRef.current;
+  const tabParentElement = tabRef.current?.parentElement;
+  const scrollOffset = outlineWidth + outlineOffset + padding;
+  if (!isSelected || !tabElement || !tabParentElement) {
+    return;
+  }
+  const scrollHorizontalPosition = tabElement.getBoundingClientRect().left - scrollOffset;
+  tabParentElement.scrollLeft = scrollHorizontalPosition;
+};
+const DefaultTab = /*#__PURE__*/forwardRef(function Tab$1(props, ref) {
+  const {
+    className,
+    children,
+    ...rest
+  } = props;
+  const tabRef = useRef(null);
+  const selectedTabId = useTabs()?.useState('selectedId');
+  const isTabSelected = selectedTabId === rest?.id;
+  const checkedScrollOnMount = useRef(false);
+  useEffect(() => {
+    if (checkedScrollOnMount.current) {
+      return;
+    }
+    scrollTabIntoViewIfSelected(tabRef, isTabSelected);
+    checkedScrollOnMount.current = true;
+  }, [isTabSelected]);
+  return jsxs(Fragment, {
+    children: [jsxs(Tab, {
+      ...rest,
+      ref: useForkRef(tabRef, ref),
+      className: clsx(styles.tab, className),
+      children: [children, jsx("span", {
+        className: styles.hiddenWidthSetter,
+        children: children
+      })]
+    }), jsx("div", {
+      "aria-hidden": "true",
+      className: styles.tabSeparator,
+      role: "presentation"
+    })]
+  });
+});
+DefaultTab.displayName = 'DefaultTab';
+
+export { DefaultTab };

package/lib-esm/primitives/tabs/index.d.ts

@@ -1,24 +1,19 @@
 /// <reference types="react" />
-export declare const Tabs: ((props: import("./tabs").TabsProps) => JSX.Element) & {
+export declare const Tabs: ((props: import("./types").TabsProps) => JSX.Element) & {
     /**
      * The component that displays a Tab name and allows selection.
      */
-    Tab: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").TabOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-        ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-    }, keyof import("@ariakit/react").TabOptions<T>> & {
-        [index: `data-${string}`]: unknown;
-    }, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+    Tab: (props: import("./types").TabProps) => JSX.Element;
     /**
      * Wrapper for a list of Tabs.
      */
-    TabList: import("react").ForwardRefExoticComponent<Omit<import("./tab-list").TabListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    TabList: import("react").ForwardRefExoticComponent<Omit<Omit<import("@ariakit/react").TabListProps<"div">, "store"> & {
+        variant?: import("./types").TabsVariant | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     /**
      * The content for a single Tab.
      */
-    TabPanel: import("react").ForwardRefExoticComponent<Omit<import("./tab-panel").TabPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    TabPanel: import("react").ForwardRefExoticComponent<Omit<import("./types").TabPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
 };
+export { type TabListProps, type TabPanelProps, type TabProps, type TabsProps } from './types';
 export { useTabs } from './use-tabs';
-export { type TabProps } from './tab';
-export { type TabListProps } from './tab-list';
-export { type TabPanelProps } from './tab-panel';
-export { type TabsProps } from './tabs';

package/lib-esm/primitives/tabs/tab-list.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
-import { type TabListProps as PrimitiveTabListProps } from '@ariakit/react';
-export type TabListProps = Omit<PrimitiveTabListProps, 'store'>;
-export declare const TabList: import("react").ForwardRefExoticComponent<Omit<TabListProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabList: import("react").ForwardRefExoticComponent<Omit<Omit<import("@ariakit/react").TabListProps<"div">, "store"> & {
+    variant?: import("./types").TabsVariant | undefined;
+}, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/tabs/tab-list.js

@@ -7,7 +7,8 @@ import { useTabs } from './use-tabs.js';
 
 const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
   const {
-    className
+    className,
+    variant = 'default'
   } = props;
   const tab = useTabs();
   if (!tab) {
@@ -18,7 +19,7 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
     children: jsx(TabList$1, {
       ...props,
       ref: ref,
-      className: clsx(styles.tabList, className),
+      className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
       store: tab
     })
   });

package/lib-esm/primitives/tabs/tab-panel.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-import { type TabPanelProps as PrimitiveTabPanelProps } from '@ariakit/react';
-export type TabPanelProps = Omit<PrimitiveTabPanelProps, 'store'>;
+import { type TabPanelProps } from './types';
 export declare const TabPanel: import("react").ForwardRefExoticComponent<Omit<TabPanelProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/primitives/tabs/tab.d.ts

@@ -1,8 +1,3 @@
 /// <reference types="react" />
-import { type TabProps as PrimitiveTabProps } from '@ariakit/react';
-export type TabProps = PrimitiveTabProps;
-export declare const Tab: import("react").ForwardRefExoticComponent<Omit<import("@ariakit/react").TabOptions<"button"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
-    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@ariakit/react").TabOptions<T>> & {
-    [index: `data-${string}`]: unknown;
-}, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+import { type TabProps } from './types';
+export declare const Tab: (props: TabProps) => JSX.Element;

package/lib-esm/primitives/tabs/tab.js

@@ -1,58 +1,17 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { Tab as Tab$1 } from '@ariakit/react';
-import clsx from 'clsx';
-import { forwardRef, useRef, useEffect } from 'react';
-import { useForkRef } from '../../utils/useForkRef.js';
-import styles from './tabs.module.js';
-import { useTabs } from './use-tabs.js';
+import { jsx } from 'react/jsx-runtime';
+import { ContentSwitchTab } from './content-switch-tab.js';
+import { DefaultTab } from './default-tab.js';
 
-const scrollSelectedTabIntoView = (tabRef, isSelected) => {
-  const tabElement = tabRef.current;
-  const tabParentElement = tabRef.current?.parentElement;
-  const outlineWidthAndOffset = 4;
-  if (!isSelected || !tabElement || !tabParentElement) {
-    return;
-  }
-  const scrollHorizontalPosition = tabElement.getBoundingClientRect().left + outlineWidthAndOffset;
-  tabParentElement.scrollLeft = scrollHorizontalPosition;
-};
-const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+const Tab = props => {
   const {
-    className,
-    children,
-    id,
+    variant = 'default',
     ...rest
   } = props;
-  const tabRef = useRef(null);
-  const selectedTabId = useTabs()?.useState('selectedId');
-  const isTabSelected = selectedTabId === id;
-  const tabId = id ? {
-    id
-  } : {};
-  const scrolledOnMount = useRef(false);
-  useEffect(() => {
-    if (scrolledOnMount.current === true) {
-      return;
-    }
-    scrollSelectedTabIntoView(tabRef, isTabSelected);
-    scrolledOnMount.current = true;
-  }, [isTabSelected]);
-  return jsxs(Fragment, {
-    children: [jsxs(Tab$1, {
-      ...rest,
-      ref: useForkRef(tabRef, ref),
-      className: clsx(styles.tab, className),
-      ...tabId,
-      children: [children, jsx("span", {
-        className: styles.hiddenWidthSetter,
-        children: children
-      })]
-    }), jsx("div", {
-      "aria-hidden": "true",
-      className: styles.tabSeparator,
-      role: "presentation"
-    })]
+  return variant === 'contentSwitcher' ? jsx(ContentSwitchTab, {
+    ...rest
+  }) : jsx(DefaultTab, {
+    ...rest
   });
-});
+};
 
 export { Tab };

package/lib-esm/primitives/tabs/tabs-width-context.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from 'react';
+export interface TabsWidthContextData {
+    /**
+     * Minimum width of each rendered tab, derived from a tab with the longest label with minimal paddings.
+     */
+    minTabWidth: number;
+    /**
+     * Register width of a tab in context.
+     */
+    addTabWidth: (width: number) => void;
+}
+export interface TabsWidthContextProps {
+    children: ReactNode;
+}
+export declare const TabsWidthContext: import("react").Context<TabsWidthContextData | undefined>;
+export declare const useTabsWidthContext: () => TabsWidthContextData;
+export declare const TabsWidthProvider: (props: TabsWidthContextProps) => JSX.Element;

package/lib-esm/primitives/tabs/tabs-width-context.js

@@ -0,0 +1,31 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useState, useCallback, useMemo, createContext } from 'react';
+
+const TabsWidthContext = /*#__PURE__*/createContext(undefined);
+const useTabsWidthContext = () => {
+  const tabsWidthContextData = useContext(TabsWidthContext);
+  if (!tabsWidthContextData) {
+    throw new Error('Tabs subcomponents must be wrapped in Tabs component.');
+  }
+  return tabsWidthContextData;
+};
+const TabsWidthProvider = props => {
+  const {
+    children
+  } = props;
+  const [tabWidths, setTabWidths] = useState([]);
+  const minTabWidth = Math.max(...tabWidths);
+  const addTabWidth = useCallback(width => {
+    setTabWidths(prev => [...prev, width]);
+  }, []);
+  const store = useMemo(() => ({
+    minTabWidth,
+    addTabWidth
+  }), [minTabWidth, addTabWidth]);
+  return jsx(TabsWidthContext.Provider, {
+    value: store,
+    children: children
+  });
+};
+
+export { TabsWidthContext, TabsWidthProvider, useTabsWidthContext };

package/lib-esm/primitives/tabs/tabs.d.ts

@@ -1,6 +1,3 @@
-import { type TabStoreProps } from '@ariakit/react';
-import { type ReactNode } from 'react';
-export type TabsProps = TabStoreProps & {
-    children: ReactNode;
-};
+/// <reference types="react" />
+import { type TabsProps } from './types';
 export declare const Tabs: (props: TabsProps) => JSX.Element;

package/lib-esm/primitives/tabs/tabs.js

@@ -1,14 +1,17 @@
 import { jsx } from 'react/jsx-runtime';
 import { TabProvider } from '@ariakit/react';
+import { TabsWidthProvider } from './tabs-width-context.js';
 
 const Tabs = props => {
   const {
     children
   } = props;
-  return jsx(TabProvider, {
-    selectOnMove: false,
-    ...props,
-    children: children
+  return jsx(TabsWidthProvider, {
+    children: jsx(TabProvider, {
+      selectOnMove: false,
+      ...props,
+      children: children
+    })
   });
 };
 

package/lib-esm/primitives/tabs/tabs.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"tabsListContainer":"tabs_module_tabsListContainer--23e09","tabList":"tabs_module_tabList--23e09","tabSeparator":"tabs_module_tabSeparator--23e09","tab":"tabs_module_tab--23e09","hiddenWidthSetter":"tabs_module_hiddenWidthSetter--23e09"};
+var styles = {"hiddenWidthSetter":"tabs_module_hiddenWidthSetter--6a56b","contentSwitchTabList":"tabs_module_contentSwitchTabList--6a56b","contentSwitchTab":"tabs_module_contentSwitchTab--6a56b","tabsListContainer":"tabs_module_tabsListContainer--6a56b","tabList":"tabs_module_tabList--6a56b","tabSeparator":"tabs_module_tabSeparator--6a56b","tab":"tabs_module_tab--6a56b"};
 
 export { styles as default };

package/lib-esm/primitives/tabs/types.d.ts

@@ -0,0 +1,13 @@
+import { type TabListProps as PrimitiveTabListProps, type TabPanelProps as PrimitiveTabPanelProps, type TabProps as PrimitiveTabProps, type TabStoreProps as PrimitiveTabStoreProps } from '@ariakit/react';
+import { type ReactNode } from 'react';
+export type TabsVariant = 'default' | 'contentSwitcher';
+export type TabListProps = Omit<PrimitiveTabListProps, 'store'> & {
+    variant?: TabsVariant;
+};
+export type TabPanelProps = Omit<PrimitiveTabPanelProps, 'store'>;
+export type TabProps = PrimitiveTabProps & {
+    variant?: TabsVariant;
+};
+export type TabsProps = PrimitiveTabStoreProps & {
+    children: ReactNode;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.17.0",
+    "version": "6.19.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.3"
     },
-    "gitHead": "27a55b8816fa467409faedf10420e08d5f2004cf",
+    "gitHead": "05fe9fbc44f97b1e8b5df6062ded4ef9fc1d05ae",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {