@fluentui/react-tabs 1.0.0-beta.96 → 9.0.0-beta.6

package/lib/components/Tab/useTabStyles.js

@@ -0,0 +1,205 @@
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+import { tabPendingDesignTokens } from '../../tab.constants';
+export const tabClassName = 'fui-Tab';
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/__styles({
+  "base": {
+    "De3pzq": "flu3bqm",
+    "g2u3we": "fwhevhj",
+    "h3c5rm": ["f61n433", "f1q8l70w"],
+    "B9xav0g": "fv1dfc8",
+    "zhjwy3": ["f1q8l70w", "f61n433"],
+    "Bbmb7ep": ["f1aa9q02", "f16jpd5f"],
+    "Beyfa6y": ["f16jpd5f", "f1aa9q02"],
+    "B7oj6ja": ["f1jar5jt", "fyu767a"],
+    "Btl43ni": ["fyu767a", "f1jar5jt"],
+    "B4j52fo": "f192inf7",
+    "Bekrc4i": ["f5tn483", "f1ojsxk5"],
+    "Bn0qgzm": "f1vxd6vx",
+    "ibv6hh": ["f1ojsxk5", "f5tn483"],
+    "i8kkvl": "fgfbwa2",
+    "Bceei9c": "f1k6fduh",
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fkhj508",
+    "Bg96gwp": "f1i3iumi",
+    "z8tnut": "f1809wu7",
+    "z189sj": ["f81rol6", "frdkuqy"],
+    "Byoj8tv": "f1fow5ox",
+    "uwmqm3": ["frdkuqy", "f81rol6"],
+    "qhf8xq": "f10pi13n",
+    "B68tc82": "f1p9o1ba",
+    "Bmxbyg5": "f1sil6mw"
+  },
+  "horizontal": {
+    "Bt984gj": "f122n59",
+    "Brf1p80": "f4d9j23"
+  },
+  "vertical": {
+    "Bt984gj": "f122n59",
+    "Brf1p80": "fbhxue7"
+  },
+  "small": {
+    "z8tnut": "f1xp5gbu",
+    "z189sj": ["f1sgzk6v", "f1bg5zqg"],
+    "Byoj8tv": "f1d7kygh",
+    "uwmqm3": ["f1bg5zqg", "f1sgzk6v"],
+    "i8kkvl": "f16mnhsx"
+  },
+  "subtle": {
+    "Jwef8y": "f1knas48"
+  }
+}, {
+  "d": [".flu3bqm{background-color:none;}", ".fwhevhj{border-top-color:none;}", ".f61n433{border-right-color:none;}", ".f1q8l70w{border-left-color:none;}", ".fv1dfc8{border-bottom-color:none;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".f192inf7{border-top-width:var(--strokeWidthThin);}", ".f5tn483{border-right-width:var(--strokeWidthThin);}", ".f1ojsxk5{border-left-width:var(--strokeWidthThin);}", ".f1vxd6vx{border-bottom-width:var(--strokeWidthThin);}", ".fgfbwa2{-webkit-column-gap:6px;column-gap:6px;}", ".f1k6fduh{cursor:pointer;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1809wu7{padding-top:10px;}", ".f81rol6{padding-right:10px;}", ".frdkuqy{padding-left:10px;}", ".f1fow5ox{padding-bottom:10px;}", ".f10pi13n{position:relative;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fbhxue7{-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;}", ".f1xp5gbu{padding-top:6px;}", ".f1sgzk6v{padding-right:6px;}", ".f1bg5zqg{padding-left:6px;}", ".f1d7kygh{padding-bottom:6px;}", ".f16mnhsx{-webkit-column-gap:2px;column-gap:2px;}"],
+  "h": [".f1knas48:hover{background-color:var(--colorNeutralBackground1Hover);}"]
+});
+/**
+ * Focus styles for the root slot
+ */
+
+
+const useFocusStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B486eqv": "f2hkw1w",
+    "Bnmjwt4": "flfsvnh",
+    "Jopkrh": ["f1781m5e", "flvaaa9"],
+    "hhrs2v": "f50u1b5",
+    "B7jbng7": ["flvaaa9", "f1781m5e"],
+    "B32s92o": "fgeg2qa",
+    "Bh48x57": "f19j8a82",
+    "B5hngm5": "fhcq1yo",
+    "D4py6b": "f1gkya50",
+    "Bgwpjed": "fpt6wn7"
+  }
+}, {
+  "i": [".f2hkw1w:focus-visible{outline-style:none;}"],
+  "d": ["[data-keyboard-nav] .flfsvnh:focus{border-top-color:transparent;}", "[data-keyboard-nav] .f1781m5e:focus{border-right-color:transparent;}", "[data-keyboard-nav] .flvaaa9:focus{border-left-color:transparent;}", "[data-keyboard-nav] .f50u1b5:focus{border-bottom-color:transparent;}", "[data-keyboard-nav] .fgeg2qa:focus{outline-width:var(--strokeWidthThick);}", "[data-keyboard-nav] .f19j8a82:focus{outline-color:transparent;}", "[data-keyboard-nav] .fhcq1yo:focus{outline-style:solid;}", "[data-keyboard-nav] .f1gkya50:focus{box-shadow:var(--shadow4),0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2);}", "[data-keyboard-nav] .fpt6wn7:focus{z-index:1;}"]
+});
+/**
+ * Indicator styles for the root slot when horizontal.
+ */
+
+
+const useHorizontalIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bkbwdz4": "f1mif8u4",
+    "frdscb": ["fvxed1z", "f1j2a01o"],
+    "B9nohqn": ["f1j2a01o", "fvxed1z"],
+    "B1dhsta": ["fsamouo", "f1aazreq"],
+    "Bjdmjzx": ["f1aazreq", "fsamouo"],
+    "oqd9ik": "ffdc0f3",
+    "Bs6t6z0": "fqc6z8f",
+    "Hdbjpj": "f11ef69",
+    "mpb1vu": "f119hevp",
+    "Bj55yzk": "fw2wsqs",
+    "jc51t6": ["f1l9humg", "f3c5rjh"],
+    "cnmfks": ["f3c5rjh", "f1l9humg"],
+    "Bt86n75": "fg6xmog"
+  },
+  "small": {
+    "jc51t6": ["f1i8k3s6", "fy447wy"],
+    "cnmfks": ["fy447wy", "f1i8k3s6"]
+  }
+}, {
+  "d": [".f1mif8u4:after{background-color:none;}", ".fvxed1z:after{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1j2a01o:after{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fsamouo:after{border-top-right-radius:var(--borderRadiusMedium);}", ".f1aazreq:after{border-top-left-radius:var(--borderRadiusMedium);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fqc6z8f:after{content:\"\";}", ".f11ef69:after{position:absolute;}", ".f119hevp:after{height:2px;}", ".fw2wsqs:after{bottom:0;}", ".f1l9humg:after{left:10px;}", ".f3c5rjh:after{right:10px;}", ".f1i8k3s6:after{left:6px;}", ".fy447wy:after{right:6px;}"],
+  "h": [".fg6xmog:hover:after{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Indicator styles for the root slot when vertical.
+ */
+
+
+const useVerticalIndicatorStyles = /*#__PURE__*/__styles({
+  "base": {
+    "B1dvbpk": "ffgj6zs",
+    "px8gyy": ["f16to4m4", "f1ceoihi"],
+    "B5c9fhp": ["f1ceoihi", "f16to4m4"],
+    "Bhe99jt": ["fkibbow", "fnlo9u7"],
+    "B2r1szc": ["fnlo9u7", "fkibbow"],
+    "Bmqnesq": "f170vdtw",
+    "rurcny": "fuzzvh5",
+    "xx9plb": "fxf9f1y",
+    "Bdn98qo": "f15bpuwh",
+    "Byque4d": ["f1t0u0az", "fmlx6bj"],
+    "Bf8kmfk": "f1bwym7p",
+    "Bj2wrql": "fk3f4e0",
+    "Cgij5x": "fl6lm7t"
+  },
+  "small": {
+    "Bf8kmfk": "fp6nmmp",
+    "Bj2wrql": "f14i0ki9"
+  }
+}, {
+  "d": [".ffgj6zs:before{background-color:none;}", ".f16to4m4:before{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f1ceoihi:before{border-bottom-left-radius:var(--borderRadiusMedium);}", ".fkibbow:before{border-top-right-radius:var(--borderRadiusMedium);}", ".fnlo9u7:before{border-top-left-radius:var(--borderRadiusMedium);}", ".f170vdtw:before{box-sizing:border-box;}", ".fuzzvh5:before{content:\"\";}", ".fxf9f1y:before{position:absolute;}", ".f15bpuwh:before{width:2px;}", ".f1t0u0az:before{left:0;}", ".fmlx6bj:before{right:0;}", ".f1bwym7p:before{top:10px;}", ".fk3f4e0:before{bottom:10px;}", ".fp6nmmp:before{top:6px;}", ".f14i0ki9:before{bottom:6px;}"],
+  "h": [".fl6lm7t:hover:before{background-color:var(--colorNeutralStroke1);}"]
+});
+/**
+ * Styles for the icon slot.
+ */
+
+
+const useIconStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "mc9l5x": "ftuwxu6",
+    "Brf1p80": "f4d9j23"
+  },
+  "small": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  },
+  "medium": {
+    "Be2twd7": "fe5j1ua",
+    "Bqenvij": "fjamq6b",
+    "a9b677": "f64fuq3"
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".ftuwxu6{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}", ".f4d9j23{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}", ".fe5j1ua{font-size:20px;}", ".fjamq6b{height:20px;}", ".f64fuq3{width:20px;}"]
+});
+/**
+ * Styles for the content slot (children)
+ */
+
+
+const useContentStyles = /*#__PURE__*/__styles({
+  "base": {
+    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "z189sj": ["f12huiiw", "f161knb0"]
+  },
+  "small": {
+    "uwmqm3": ["f161knb0", "f12huiiw"],
+    "z189sj": ["f12huiiw", "f161knb0"]
+  }
+}, {
+  "d": [".f161knb0{padding-left:2px;}", ".f12huiiw{padding-right:2px;}"]
+});
+/**
+ * Apply styling to the Tab slots based on the state
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+
+export const useTabStyles_unstable = state => {
+  const rootStyles = useRootStyles();
+  const focusStyles = useFocusStyles();
+  const horizontalIndicatorStyles = useHorizontalIndicatorStyles();
+  const verticalIndicatorStyles = useVerticalIndicatorStyles();
+  const iconStyles = useIconStyles();
+  const contentStyles = useContentStyles();
+  state.root.className = mergeClasses(tabClassName, rootStyles.base, focusStyles.base, state.size === 'small' && rootStyles.small, state.appearance === 'subtle' && rootStyles.subtle, state.vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base, state.size === 'small' && (state.vertical ? verticalIndicatorStyles.small : horizontalIndicatorStyles.small), state.root.className);
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);
+  }
+
+  state.content.className = mergeClasses(contentStyles.base, state.size === 'small' && contentStyles.small, state.content.className);
+  return state;
+};
+//# sourceMappingURL=useTabStyles.js.map

package/lib/components/Tab/useTabStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Tab/useTabStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import type { TabState } from './Tab.types';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens } from '@fluentui/react-theme';\nimport { tabPendingDesignTokens } from '../../tab.constants';\n\nexport const tabClassName = 'fui-Tab';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    backgroundColor: 'none',\n    ...shorthands.borderColor('none'),\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n    ...shorthands.borderWidth(tokens.strokeWidthThin),\n    columnGap: tabPendingDesignTokens.gap.medium,\n    cursor: 'pointer',\n    display: 'flex',\n    flexDirection: 'row',\n    fontFamily: tokens.fontFamilyBase,\n    fontSize: tokens.fontSizeBase300,\n    lineHeight: tokens.lineHeightBase300,\n    ...shorthands.padding(tabPendingDesignTokens.tabPadding.medium),\n    position: 'relative',\n    ...shorthands.overflow('hidden'),\n  },\n  horizontal: {\n    alignItems: 'center',\n    justifyContent: 'center',\n  },\n  vertical: {\n    alignItems: 'center',\n    justifyContent: 'flex-start',\n  },\n  small: {\n    ...shorthands.padding(tabPendingDesignTokens.tabPadding.small),\n    columnGap: tabPendingDesignTokens.gap.small,\n  },\n  subtle: {\n    ':hover': {\n      backgroundColor: tokens.colorNeutralBackground1Hover,\n    },\n  },\n});\n\n/**\n * Focus styles for the root slot\n */\nconst useFocusStyles = makeStyles({\n  // Tab creates a custom focus indicator because the default focus indicator\n  // is applied using an :after pseudo-element on the root. Since the selection\n  // indicator uses an :after pseudo-element on the root, there is a conflict.\n  base: createCustomFocusIndicatorStyle({\n    ...shorthands.borderColor('transparent'),\n    outlineWidth: tokens.strokeWidthThick,\n    outlineColor: 'transparent',\n    outlineStyle: 'solid',\n    boxShadow: `\n      ${tokens.shadow4},\n      0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}\n    `,\n    zIndex: 1,\n  }),\n});\n\n/**\n * Indicator styles for the root slot when horizontal.\n */\nconst useHorizontalIndicatorStyles = makeStyles({\n  base: {\n    ':after': {\n      backgroundColor: 'none',\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      height: tabPendingDesignTokens.indicatorThickness,\n      bottom: '0',\n      left: tabPendingDesignTokens.tabPadding.medium,\n      right: tabPendingDesignTokens.tabPadding.medium,\n    },\n    ':hover': {\n      ':after': {\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n  small: {\n    ':after': {\n      left: tabPendingDesignTokens.tabPadding.small,\n      right: tabPendingDesignTokens.tabPadding.small,\n    },\n  },\n});\n\n/**\n * Indicator styles for the root slot when vertical.\n */\nconst useVerticalIndicatorStyles = makeStyles({\n  base: {\n    ':before': {\n      backgroundColor: 'none',\n      ...shorthands.borderRadius(tokens.borderRadiusMedium),\n      boxSizing: 'border-box',\n      content: '\"\"',\n      position: 'absolute',\n      width: tabPendingDesignTokens.indicatorThickness,\n      left: '0',\n      top: tabPendingDesignTokens.tabPadding.medium,\n      bottom: tabPendingDesignTokens.tabPadding.medium,\n    },\n    ':hover': {\n      ':before': {\n        backgroundColor: tokens.colorNeutralStroke1,\n      },\n    },\n  },\n  small: {\n    ':before': {\n      top: tabPendingDesignTokens.tabPadding.small,\n      bottom: tabPendingDesignTokens.tabPadding.small,\n    },\n  },\n});\n\n/**\n * Styles for the icon slot.\n */\nconst useIconStyles = makeStyles({\n  base: {\n    alignItems: 'center',\n    display: 'inline-flex',\n    justifyContent: 'center',\n  },\n  // per design, the small and medium font sizes are the same.\n  // the size prop only affects spacing.\n  small: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n  medium: {\n    fontSize: '20px',\n    height: '20px',\n    width: '20px',\n  },\n});\n\n/**\n * Styles for the content slot (children)\n */\nconst useContentStyles = makeStyles({\n  base: {\n    paddingLeft: tabPendingDesignTokens.contentPadding.medium,\n    paddingRight: tabPendingDesignTokens.contentPadding.medium,\n  },\n  small: {\n    paddingLeft: tabPendingDesignTokens.contentPadding.small,\n    paddingRight: tabPendingDesignTokens.contentPadding.small,\n  },\n});\n\n/**\n * Apply styling to the Tab slots based on the state\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const useTabStyles_unstable = (state: TabState): TabState => {\n  const rootStyles = useRootStyles();\n  const focusStyles = useFocusStyles();\n  const horizontalIndicatorStyles = useHorizontalIndicatorStyles();\n  const verticalIndicatorStyles = useVerticalIndicatorStyles();\n  const iconStyles = useIconStyles();\n  const contentStyles = useContentStyles();\n\n  state.root.className = mergeClasses(\n    tabClassName,\n    rootStyles.base,\n    focusStyles.base,\n    state.size === 'small' && rootStyles.small,\n    state.appearance === 'subtle' && rootStyles.subtle,\n    state.vertical ? verticalIndicatorStyles.base : horizontalIndicatorStyles.base,\n    state.size === 'small' && (state.vertical ? verticalIndicatorStyles.small : horizontalIndicatorStyles.small),\n    state.root.className,\n  );\n\n  if (state.icon) {\n    state.icon.className = mergeClasses(iconStyles.base, iconStyles[state.size], state.icon.className);\n  }\n\n  state.content.className = mergeClasses(\n    contentStyles.base,\n    state.size === 'small' && contentStyles.small,\n    state.content.className,\n  );\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/TabList.d.ts

@@ -0,0 +1,6 @@
+import type { TabListProps } from './TabList.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+export declare const TabList: ForwardRefComponent<TabListProps>;

package/lib/components/TabList/TabList.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { useTabList_unstable } from './useTabList';
+import { renderTabList_unstable } from './renderTabList';
+import { useTabListStyles_unstable } from './useTabListStyles';
+import { useTabListContextValues } from './useTabListContextValues';
+/**
+ * A tab list provides single selection from a set of tabs.
+ */
+
+export const TabList = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useTabList_unstable(props, ref);
+  const contextValues = useTabListContextValues(state);
+  useTabListStyles_unstable(state);
+  return renderTabList_unstable(state, contextValues);
+});
+TabList.displayName = 'TabList';
+//# sourceMappingURL=TabList.js.map

package/lib/components/TabList/TabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAGA,SAAS,uBAAT,QAAwC,2BAAxC;AAEA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;AACA,QAAM,aAAa,GAAG,uBAAuB,CAAC,KAAD,CAA7C;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AACA,SAAO,sBAAsB,CAAC,KAAD,EAAQ,aAAR,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { useTabList_unstable } from './useTabList';\nimport { renderTabList_unstable } from './renderTabList';\nimport { useTabListStyles_unstable } from './useTabListStyles';\nimport type { TabListProps } from './TabList.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTabListContextValues } from './useTabListContextValues';\n\n/**\n * A tab list provides single selection from a set of tabs.\n */\nexport const TabList: ForwardRefComponent<TabListProps> = React.forwardRef((props, ref) => {\n  const state = useTabList_unstable(props, ref);\n  const contextValues = useTabListContextValues(state);\n\n  useTabListStyles_unstable(state);\n  return renderTabList_unstable(state, contextValues);\n});\n\nTabList.displayName = 'TabList';\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/TabList.types.d.ts

@@ -0,0 +1,99 @@
+import * as React from 'react';
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+import { TabValue } from '../Tab/Tab.types';
+export declare type RegisterTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+    ref: React.RefObject<HTMLElement>;
+};
+export declare type RegisterTabEventHandler = (data: RegisterTabData) => void;
+export declare type SelectTabData = {
+    /**
+     * The value of the selected tab.
+     */
+    value: TabValue;
+};
+export declare type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;
+export declare type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;
+export declare type TabListSlots = {
+    /**
+     * The slot associated with the root element of this tab list.
+     */
+    root: Slot<'div'>;
+};
+declare type TabListCommons = {
+    /**
+     * A tab list can supports 'transparent' and 'subtle' appearance.
+     *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
+     *- 'transparent': No background and border styling
+     * The appearance affects each of the contained tabs.
+     * @default 'transparent'
+     */
+    appearance?: 'transparent' | 'subtle';
+    /**
+     * Raised when a tab is selected.
+     */
+    onTabSelect?: SelectTabEventHandler;
+    /**
+     * The value of the currently selected tab.
+     */
+    selectedValue?: TabValue;
+    /**
+     * A tab list can be either 'small' or 'medium' size.
+     * The size affects each of the contained tabs.
+     * @default 'medium'
+     */
+    size?: 'small' | 'medium';
+    /**
+     * A tab list can arrange its tabs vertically.
+     * @default false
+     */
+    vertical?: boolean;
+};
+/**
+ * TabList Props
+ */
+export declare type TabListProps = ComponentProps<TabListSlots> & TabListCommons & {
+    /**
+     * The value of the tab to be selected by default.
+     * Typically useful when the selectedValue is uncontrolled.
+     */
+    defaultSelectedValue?: TabValue;
+};
+export declare type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> & Required<Pick<TabListCommons, 'appearance' | 'size' | 'vertical'>> & {
+    /** A callback to allow a tab to register itself with the tab list. */
+    onRegister: RegisterTabEventHandler;
+    /** A callback to allow a tab to unregister itself with the tab list. */
+    onUnregister: RegisterTabEventHandler;
+    /**
+     * A callback to allow a tab to select itself when pressed.
+     */
+    onSelect: SelectTabEventHandler;
+};
+/**
+ * Context values used in rendering TabList.
+ */
+export declare type TabListContextValues = {
+    /**
+     * The context of the tab list available to each tab.
+     */
+    tabList: TabListContextValue;
+};
+/**
+ * A bounding rectangle of a tab
+ */
+export declare type TabContentRect = {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+/**
+ * State used in rendering TabList.
+ */
+export declare type TabListState = ComponentState<Required<TabListSlots>> & TabListContextValue & {
+    selectedTabRect?: TabContentRect;
+};
+export {};

package/lib/components/TabList/TabList.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=TabList.types.js.map

package/lib/components/TabList/TabList.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabList.types.js","sourceRoot":"../src/","sources":["components/TabList/TabList.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { TabValue } from '../Tab/Tab.types';\n\nexport type RegisterTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n\n  ref: React.RefObject<HTMLElement>;\n};\n\nexport type RegisterTabEventHandler = (data: RegisterTabData) => void;\n\nexport type SelectTabData = {\n  /**\n   * The value of the selected tab.\n   */\n  value: TabValue;\n};\n\nexport type SelectTabEvent<E = HTMLElement> = React.MouseEvent<E> | React.KeyboardEvent<E>;\n\nexport type SelectTabEventHandler = (event: SelectTabEvent, data: SelectTabData) => void;\n\nexport type TabListSlots = {\n  /**\n   * The slot associated with the root element of this tab list.\n   */\n  root: Slot<'div'>;\n};\n\ntype TabListCommons = {\n  /**\n   * A tab list can supports 'transparent' and 'subtle' appearance.\n   *- 'subtle': Minimizes emphasis to blend into the background until hovered or focused.\n   *- 'transparent': No background and border styling\n   * The appearance affects each of the contained tabs.\n   * @default 'transparent'\n   */\n  appearance?: 'transparent' | 'subtle';\n\n  /**\n   * Raised when a tab is selected.\n   */\n  onTabSelect?: SelectTabEventHandler;\n\n  /**\n   * The value of the currently selected tab.\n   */\n  selectedValue?: TabValue;\n\n  /**\n   * A tab list can be either 'small' or 'medium' size.\n   * The size affects each of the contained tabs.\n   * @default 'medium'\n   */\n  size?: 'small' | 'medium';\n\n  /**\n   * A tab list can arrange its tabs vertically.\n   * @default false\n   */\n  vertical?: boolean;\n};\n\n/**\n * TabList Props\n */\nexport type TabListProps = ComponentProps<TabListSlots> &\n  TabListCommons & {\n    /**\n     * The value of the tab to be selected by default.\n     * Typically useful when the selectedValue is uncontrolled.\n     */\n    defaultSelectedValue?: TabValue;\n  };\n\nexport type TabListContextValue = Pick<TabListCommons, 'onTabSelect' | 'selectedValue'> &\n  Required<Pick<TabListCommons, 'appearance' | 'size' | 'vertical'>> & {\n    /** A callback to allow a tab to register itself with the tab list. */\n    onRegister: RegisterTabEventHandler;\n\n    /** A callback to allow a tab to unregister itself with the tab list. */\n    onUnregister: RegisterTabEventHandler;\n    /**\n     * A callback to allow a tab to select itself when pressed.\n     */\n    onSelect: SelectTabEventHandler;\n  };\n\n/**\n * Context values used in rendering TabList.\n */\nexport type TabListContextValues = {\n  /**\n   * The context of the tab list available to each tab.\n   */\n  tabList: TabListContextValue;\n};\n\n/**\n * A bounding rectangle of a tab\n */\nexport type TabContentRect = {\n  x: number;\n  y: number;\n  width: number;\n  height: number;\n};\n\n/**\n * State used in rendering TabList.\n */\nexport type TabListState = ComponentState<Required<TabListSlots>> &\n  TabListContextValue & {\n    selectedTabRect?: TabContentRect;\n  };\n"]}

package/lib/components/TabList/TabListContext.d.ts

@@ -0,0 +1,3 @@
+import type { Context } from '@fluentui/react-context-selector';
+import { TabListContextValue } from './TabList.types';
+export declare const TabListContext: Context<TabListContextValue>;

package/lib/components/TabList/TabListContext.js

@@ -0,0 +1,17 @@
+import { createContext } from '@fluentui/react-context-selector';
+export const TabListContext = /*#__PURE__*/createContext({
+  appearance: 'transparent',
+  selectedValue: undefined,
+  onRegister: () => {
+    /* noop */
+  },
+  onUnregister: () => {
+    /* noop */
+  },
+  onSelect: () => {
+    /* noop */
+  },
+  size: 'medium',
+  vertical: false
+});
+//# sourceMappingURL=TabListContext.js.map

package/lib/components/TabList/TabListContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/TabListContext.ts"],"names":[],"mappings":"AAAA,SAAS,aAAT,QAA8B,kCAA9B;AAIA,OAAO,MAAM,cAAc,gBAAiC,aAAa,CAAsB;AAC7F,EAAA,UAAU,EAAE,aADiF;AAE7F,EAAA,aAAa,EAAE,SAF8E;AAG7F,EAAA,UAAU,EAAE,MAAK;AACf;AACD,GAL4F;AAM7F,EAAA,YAAY,EAAE,MAAK;AACjB;AACD,GAR4F;AAS7F,EAAA,QAAQ,EAAE,MAAK;AACb;AACD,GAX4F;AAY7F,EAAA,IAAI,EAAE,QAZuF;AAa7F,EAAA,QAAQ,EAAE;AAbmF,CAAtB,CAAlE","sourcesContent":["import { createContext } from '@fluentui/react-context-selector';\nimport type { Context } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue>({\n  appearance: 'transparent',\n  selectedValue: undefined,\n  onRegister: () => {\n    /* noop */\n  },\n  onUnregister: () => {\n    /* noop */\n  },\n  onSelect: () => {\n    /* noop */\n  },\n  size: 'medium',\n  vertical: false,\n});\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/index.d.ts

@@ -0,0 +1,5 @@
+export * from './TabList';
+export * from './TabList.types';
+export * from './renderTabList';
+export * from './useTabList';
+export * from './useTabListStyles';

package/lib/components/TabList/index.js

@@ -0,0 +1,6 @@
+export * from './TabList';
+export * from './TabList.types';
+export * from './renderTabList';
+export * from './useTabList';
+export * from './useTabListStyles';
+//# sourceMappingURL=index.js.map

package/lib/components/TabList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/TabList/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListStyles';\n"]}

package/lib/components/TabList/renderTabList.d.ts

@@ -0,0 +1,5 @@
+import type { TabListState, TabListContextValues } from './TabList.types';
+/**
+ * Render the final JSX of TabList
+ */
+export declare const renderTabList_unstable: (state: TabListState, contextValues: TabListContextValues) => JSX.Element;

package/lib/components/TabList/renderTabList.js

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import { TabListContext } from './TabListContext';
+/**
+ * Render the final JSX of TabList
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const renderTabList_unstable = (state, contextValues) => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, /*#__PURE__*/React.createElement(TabListContext.Provider, {
+    value: contextValues.tabList
+  }, state.root.children));
+};
+//# sourceMappingURL=renderTabList.js.map

package/lib/components/TabList/renderTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/renderTabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAEA,SAAS,cAAT,QAA+B,kBAA/B;AAEA;;AAEG;AACH;;AACA,OAAO,MAAM,sBAAsB,GAAG,CAAC,KAAD,EAAsB,aAAtB,KAA6D;AACjG,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,eACE,KAAA,CAAA,aAAA,CAAC,cAAc,CAAC,QAAhB,EAAwB;AAAC,IAAA,KAAK,EAAE,aAAa,CAAC;AAAtB,GAAxB,EAAwD,KAAK,CAAC,IAAN,CAAW,QAAnE,CADF,CADF;AAKD,CARM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListContext } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n  const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n  return (\n    <slots.root {...slotProps.root}>\n      <TabListContext.Provider value={contextValues.tabList}>{state.root.children}</TabListContext.Provider>\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/useTabList.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import type { TabListProps, TabListState } from './TabList.types';
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+export declare const useTabList_unstable: (props: TabListProps, ref: React.Ref<HTMLElement>) => TabListState;

package/lib/components/TabList/useTabList.js

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { getNativeElementProps, useConst, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render TabList.
+ *
+ * The returned state can be modified with hooks such as useTabListStyles_unstable,
+ * before being passed to renderTabList_unstable.
+ *
+ * @param props - props from this instance of TabList
+ * @param ref - reference to root HTMLElement of TabList
+ */
+// eslint-disable-next-line @typescript-eslint/naming-convention
+
+export const useTabList_unstable = (props, ref) => {
+  const {
+    appearance = 'transparent',
+    onTabSelect,
+    size = 'medium',
+    vertical = false
+  } = props;
+  const innerRef = React.useRef(null);
+  const focusAttributes = useArrowNavigationGroup({
+    circular: true,
+    axis: vertical ? 'vertical' : 'horizontal'
+  });
+  const [selectedValue, setSelectedValue] = useControllableState({
+    state: props.selectedValue,
+    defaultState: props.defaultSelectedValue,
+    initialState: undefined
+  });
+  const onSelect = useEventCallback((event, data) => {
+    onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
+    setSelectedValue(data.value);
+  }); // provide force recalculation of the selection indicator rectangle
+
+  const [calcRect, setCalcRect] = React.useState(0);
+  const recalcRect = useConst(() => () => setCalcRect(value => ++value)); // when this list or any tab resizes, recalculate the selection indicator rectangle
+
+  const resizeObserver = React.useMemo(() => new ResizeObserver(entries => {
+    recalcRect();
+  }), [recalcRect]); // observe this list for resize
+
+  React.useEffect(() => {
+    const currentRef = innerRef.current;
+    currentRef && resizeObserver.observe(currentRef);
+    return () => {
+      currentRef && resizeObserver.unobserve(currentRef);
+    };
+  }, [resizeObserver]); // when tabs register their refs, observe them for resize
+
+  const registeredTabs = React.useRef({});
+  const onRegister = useEventCallback(data => {
+    var _a;
+
+    registeredTabs.current[JSON.stringify(data.value)] = data;
+    ((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) && resizeObserver.observe(data.ref.current);
+    recalcRect();
+  });
+  const onUnregister = useEventCallback(data => {
+    var _a;
+
+    delete registeredTabs.current[JSON.stringify(data.value)];
+    ((_a = data.ref) === null || _a === void 0 ? void 0 : _a.current) && resizeObserver.unobserve(data.ref.current);
+    recalcRect();
+  }); // calculate the selection indicator rectangle
+
+  const selectedTabRect = React.useMemo(() => {
+    var _a, _b, _c;
+
+    const listRect = (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+    const tabRef = (_b = registeredTabs.current[JSON.stringify(selectedValue)]) === null || _b === void 0 ? void 0 : _b.ref;
+    const tabRect = (_c = tabRef === null || tabRef === void 0 ? void 0 : tabRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
+
+    if (listRect && tabRect) {
+      return {
+        x: tabRect.x - listRect.x,
+        y: tabRect.y - listRect.y,
+        width: tabRect.width,
+        height: tabRect.height
+      };
+    } // calcRect is used to force updates when registered tabs change or resize occurs
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [calcRect, selectedValue]);
+  return {
+    components: {
+      root: 'div'
+    },
+    root: getNativeElementProps('div', {
+      ref: useMergedRefs(ref, innerRef),
+      role: 'tablist',
+      ...focusAttributes,
+      ...props
+    }),
+    appearance,
+    selectedTabRect,
+    selectedValue,
+    size,
+    vertical,
+    onRegister,
+    onUnregister,
+    onSelect
+  };
+};
+//# sourceMappingURL=useTabList.js.map

package/lib/components/TabList/useTabList.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/useTabList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n  getNativeElementProps,\n  useConst,\n  useControllableState,\n  useEventCallback,\n  useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { RegisterTabData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\n// eslint-disable-next-line @typescript-eslint/naming-convention\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n  const { appearance = 'transparent', onTabSelect, size = 'medium', vertical = false } = props;\n\n  const innerRef = React.useRef<HTMLElement>(null);\n\n  const focusAttributes = useArrowNavigationGroup({ circular: true, axis: vertical ? 'vertical' : 'horizontal' });\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: undefined,\n  });\n\n  const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n    onTabSelect?.(event, data);\n    setSelectedValue(data.value);\n  });\n\n  // provide force recalculation of the selection indicator rectangle\n  const [calcRect, setCalcRect] = React.useState(0);\n  const recalcRect = useConst(() => () => setCalcRect(value => ++value));\n\n  // when this list or any tab resizes, recalculate the selection indicator rectangle\n  const resizeObserver = React.useMemo(\n    () =>\n      new ResizeObserver(entries => {\n        recalcRect();\n      }),\n    [recalcRect],\n  );\n\n  // observe this list for resize\n  React.useEffect(() => {\n    const currentRef = innerRef.current;\n    currentRef && resizeObserver.observe(currentRef);\n\n    return () => {\n      currentRef && resizeObserver.unobserve(currentRef);\n    };\n  }, [resizeObserver]);\n\n  // when tabs register their refs, observe them for resize\n  const registeredTabs = React.useRef<Record<string, RegisterTabData>>({});\n\n  const onRegister = useEventCallback((data: RegisterTabData) => {\n    registeredTabs.current[JSON.stringify(data.value)] = data;\n    data.ref?.current && resizeObserver.observe(data.ref.current);\n    recalcRect();\n  });\n\n  const onUnregister = useEventCallback((data: RegisterTabData) => {\n    delete registeredTabs.current[JSON.stringify(data.value)];\n    data.ref?.current && resizeObserver.unobserve(data.ref.current);\n    recalcRect();\n  });\n\n  // calculate the selection indicator rectangle\n  const selectedTabRect = React.useMemo(() => {\n    const listRect = innerRef.current?.getBoundingClientRect();\n    const tabRef: React.Ref<HTMLElement> = registeredTabs.current[JSON.stringify(selectedValue)]?.ref;\n    const tabRect = tabRef?.current?.getBoundingClientRect();\n\n    if (listRect && tabRect) {\n      return {\n        x: tabRect.x - listRect.x,\n        y: tabRect.y - listRect.y,\n        width: tabRect.width,\n        height: tabRect.height,\n      };\n    }\n    // calcRect is used to force updates when registered tabs change or resize occurs\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [calcRect, selectedValue]);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: getNativeElementProps('div', {\n      ref: useMergedRefs(ref, innerRef),\n      role: 'tablist',\n      ...focusAttributes,\n      ...props,\n    }),\n    appearance,\n    selectedTabRect,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n  };\n};\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/useTabListContextValues.d.ts

@@ -0,0 +1,2 @@
+import { TabListContextValues, TabListState } from './TabList.types';
+export declare function useTabListContextValues(state: TabListState): TabListContextValues;

package/lib/components/TabList/useTabListContextValues.js

@@ -0,0 +1,24 @@
+export function useTabListContextValues(state) {
+  const {
+    appearance,
+    selectedValue: selectedKey,
+    onRegister,
+    onUnregister,
+    onSelect,
+    size,
+    vertical
+  } = state;
+  const tabList = {
+    appearance,
+    selectedValue: selectedKey,
+    onSelect,
+    onRegister,
+    onUnregister,
+    size,
+    vertical
+  };
+  return {
+    tabList
+  };
+}
+//# sourceMappingURL=useTabListContextValues.js.map

package/lib/components/TabList/useTabListContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":"AAEA,OAAM,SAAU,uBAAV,CAAkC,KAAlC,EAAqD;AACzD,QAAM;AAAE,IAAA,UAAF;AAAc,IAAA,aAAa,EAAE,WAA7B;AAA0C,IAAA,UAA1C;AAAsD,IAAA,YAAtD;AAAoE,IAAA,QAApE;AAA8E,IAAA,IAA9E;AAAoF,IAAA;AAApF,MAAiG,KAAvG;AAEA,QAAM,OAAO,GAAwB;AACnC,IAAA,UADmC;AAEnC,IAAA,aAAa,EAAE,WAFoB;AAGnC,IAAA,QAHmC;AAInC,IAAA,UAJmC;AAKnC,IAAA,YALmC;AAMnC,IAAA,IANmC;AAOnC,IAAA;AAPmC,GAArC;AAUA,SAAO;AAAE,IAAA;AAAF,GAAP;AACD","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n  const { appearance, selectedValue: selectedKey, onRegister, onUnregister, onSelect, size, vertical } = state;\n\n  const tabList: TabListContextValue = {\n    appearance,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"sourceRoot":"../src/"}

package/lib/components/TabList/useTabListStyles.d.ts

@@ -0,0 +1,9 @@
+import type { TabListState } from './TabList.types';
+export declare const tabListClassName = "fui-TabList";
+export declare const tabListSelectionIndicatorName = "fui-TabList_SelectionIndicator";
+export declare const indicatorOffsetVar = "--selection-indicator-offset";
+export declare const indicatorLengthVar = "--selection-indicator-length";
+/**
+ * Apply styling to the TabList slots based on the state
+ */
+export declare const useTabListStyles_unstable: (state: TabListState) => TabListState;