@react-md/core 1.0.0-next.20 → 1.0.0-next.21

package/dist/tabs/SimpleTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/SimpleTabPanel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type ProvidedTabPanelProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,\n    ProvidedTabPanelProps {\n  children: ReactNode;\n}\n\n/**\n * This component can be a replacement for the `Slide` component when animations\n * are not required for changing the active tab contents.\n *\n * This should generally be used along with the `SimpleTabPanels` component.\n *\n * @since 6.0.0\n */\nexport const SimpleTabPanel = forwardRef<HTMLDivElement, SimpleTabPanelProps>(\n  function SimpleTabPanel(props, ref) {\n    const { active, className, ...remaining } = props;\n    return (\n      <div\n        ref={ref}\n        {...remaining}\n        className={cnb(!active && DISPLAY_NONE_CLASS, className)}\n      />\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DISPLAY_NONE_CLASS","SimpleTabPanel","props","ref","active","className","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,kBAAkB,QAAQ,+BAA+B;AAYlE;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC5C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWP,IAAI,CAACM,UAAUJ,oBAAoBK;;AAGpD,GACA"}
+{"version":3,"sources":["../../src/tabs/SimpleTabPanel.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { DISPLAY_NONE_CLASS } from \"../utils/isElementVisible.js\";\nimport { type ProvidedTabPanelProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelProps\n  extends Omit<HTMLAttributes<HTMLDivElement>, keyof ProvidedTabPanelProps>,\n    ProvidedTabPanelProps {\n  children: ReactNode;\n}\n\n/**\n * This component can be a replacement for the `Slide` component when animations\n * are not required for changing the active tab contents.\n *\n * This should generally be used along with the `SimpleTabPanels` component.\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}\n * @since 6.0.0\n */\nexport const SimpleTabPanel = forwardRef<HTMLDivElement, SimpleTabPanelProps>(\n  function SimpleTabPanel(props, ref) {\n    const { active, className, ...remaining } = props;\n    return (\n      <div\n        ref={ref}\n        {...remaining}\n        className={cnb(!active && DISPLAY_NONE_CLASS, className)}\n      />\n    );\n  }\n);\n"],"names":["cnb","forwardRef","DISPLAY_NONE_CLASS","SimpleTabPanel","props","ref","active","className","remaining","div"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAA8CC,UAAU,QAAQ,QAAQ;AAExE,SAASC,kBAAkB,QAAQ,+BAA+B;AAYlE;;;;;;;;;CASC,GACD,OAAO,MAAMC,+BAAiBF,WAC5B,SAASE,eAAeC,KAAK,EAAEC,GAAG;IAChC,MAAM,EAAEC,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAC5C,qBACE,KAACK;QACCJ,KAAKA;QACJ,GAAGG,SAAS;QACbD,WAAWP,IAAI,CAACM,UAAUJ,oBAAoBK;;AAGpD,GACA"}

package/dist/tabs/SimpleTabPanels.d.ts

@@ -12,6 +12,8 @@ export interface SimpleTabPanelsProps extends HTMLAttributes<HTMLDivElement>, Om
  *
  * This should be normally be used along with the `SimpleTabPanel` component.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */
 export declare const SimpleTabPanels: import("react").ForwardRefExoticComponent<SimpleTabPanelsProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tabs/SimpleTabPanels.js

@@ -6,6 +6,8 @@ import { forwardRef } from "react";
  *
  * This should be normally be used along with the `SimpleTabPanel` component.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
+ * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}
  * @since 6.0.0
  */ export const SimpleTabPanels = /*#__PURE__*/ forwardRef(function SimpleTabPanels(props, ref) {
     const { direction: _direction, ...remaining } = props;

package/dist/tabs/SimpleTabPanels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/SimpleTabPanels.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type ProvidedTabPanelsProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelsProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Omit<ProvidedTabPanelsProps<HTMLDivElement>, \"ref\"> {\n  children: ReactNode;\n}\n\n/**\n * This component can be used as a replacement for the `SlideContainer` when\n * animations are not required for changing the active tab contents.\n *\n * This should be normally be used along with the `SimpleTabPanel` component.\n *\n * @since 6.0.0\n */\nexport const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(\n  function SimpleTabPanels(props, ref) {\n    const { direction: _direction, ...remaining } = props;\n\n    return <div ref={ref} {...remaining} />;\n  }\n);\n"],"names":["forwardRef","SimpleTabPanels","props","ref","direction","_direction","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAaxE;;;;;;;CAOC,GACD,OAAO,MAAMC,gCAAkBD,WAC7B,SAASC,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EAAEC,WAAWC,UAAU,EAAE,GAAGC,WAAW,GAAGJ;IAEhD,qBAAO,KAACK;QAAIJ,KAAKA;QAAM,GAAGG,SAAS;;AACrC,GACA"}
+{"version":3,"sources":["../../src/tabs/SimpleTabPanels.tsx"],"sourcesContent":["import { type HTMLAttributes, type ReactNode, forwardRef } from \"react\";\n\nimport { type ProvidedTabPanelsProps } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface SimpleTabPanelsProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Omit<ProvidedTabPanelsProps<HTMLDivElement>, \"ref\"> {\n  children: ReactNode;\n}\n\n/**\n * This component can be used as a replacement for the `SlideContainer` when\n * animations are not required for changing the active tab contents.\n *\n * This should be normally be used along with the `SimpleTabPanel` component.\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @see {@link https://next.react-md.dev/components/tabs#disable-tab-panel-transition|Disable Tab Panel Transition Demo}\n * @since 6.0.0\n */\nexport const SimpleTabPanels = forwardRef<HTMLDivElement, SimpleTabPanelsProps>(\n  function SimpleTabPanels(props, ref) {\n    const { direction: _direction, ...remaining } = props;\n\n    return <div ref={ref} {...remaining} />;\n  }\n);\n"],"names":["forwardRef","SimpleTabPanels","props","ref","direction","_direction","remaining","div"],"mappings":";AAAA,SAA8CA,UAAU,QAAQ,QAAQ;AAaxE;;;;;;;;;CASC,GACD,OAAO,MAAMC,gCAAkBD,WAC7B,SAASC,gBAAgBC,KAAK,EAAEC,GAAG;IACjC,MAAM,EAAEC,WAAWC,UAAU,EAAE,GAAGC,WAAW,GAAGJ;IAEhD,qBAAO,KAACK;QAAIJ,KAAKA;QAAM,GAAGG,SAAS;;AACrC,GACA"}

package/dist/tabs/Tab.d.ts

@@ -1,6 +1,24 @@
 import { type AnchorHTMLAttributes, type ButtonHTMLAttributes, type ReactElement, type ReactNode } from "react";
 import { type ComponentWithRippleProps } from "../interaction/types.js";
 import { type CustomLinkComponent } from "../link/Link.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-tab-color"?: string;
+        "--rmd-tab-active-color"?: string;
+        "--rmd-tab-inactive-color"?: string;
+        "--rmd-tab-disabled-color"?: string;
+        "--rmd-tab-size"?: string;
+        "--rmd-tab-offset"?: string | number;
+        "--rmd-tab-min-width"?: string;
+        "--rmd-tab-max-width"?: string;
+        "--rmd-tab-min-height"?: string;
+        "--rmd-tab-stacked-height"?: string;
+        "--rmd-tab-stacked-width"?: string;
+        "--rmd-tab-padding"?: string | number;
+        "--rmd-tab-stacked-padding"?: string | number;
+        "--rmd-tab-indicator-background"?: string;
+    }
+}
 /**
  * @since 6.0.0
  */
@@ -70,8 +88,8 @@ export type TabProps = TabButtonProps | TabLinkProps;
  * This component should usually be used with the `TabsList` component and
  * `useTabs` hook.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs}
- *
  * @since 6.0.0
  */
 export declare function Tab(props: TabProps): ReactElement;

package/dist/tabs/Tab.js

@@ -11,8 +11,8 @@ import { tab } from "./tabStyles.js";
  * This component should usually be used with the `TabsList` component and
  * `useTabs` hook.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs}
- *
  * @since 6.0.0
  */ export function Tab(props) {
     const { id: propId, as: Component = "button", active, activeIndicator, verticalActiveIndicator, icon, iconAfter, stacked, className, children: propChildren, onBlur, onClick, onKeyDown, onKeyUp, onMouseDown, onMouseUp, onMouseLeave, onDragStart, onTouchStart, onTouchEnd, onTouchMove, disableRipple, ...remaining } = props;

package/dist/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\nimport { tab } from \"./tabStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps extends ComponentWithRippleProps {\n  /**\n   * Set this to `true` if the tab is currently active.\n   *\n   * This is normally provided by the {@link useTabs} hook.\n   */\n  active: boolean;\n\n  /**\n   * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n   * also been set to `true` to disable an active indicator below the tab when\n   * {@link active} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  activeIndicator?: boolean;\n\n  /**\n   * Set this to `true` when rendering the tabs vertically and\n   * {@link activeIndicator} has been enabled.\n   *\n   * @defaultValue !false\n   */\n  verticalActiveIndicator?: boolean;\n\n  /**\n   * An optional icon to render with the with the {@link children}. The default\n   * behavior will render this icon before the children.\n   *\n   * @see {@link iconAfter}\n   * @see {@link stacked}\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this to `true` to render the {@link icon} after the {@link children}.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` to render the {@link icon} and {@link children} stacked\n   * instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabButtonProps\n  extends BaseTabProps,\n    ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: \"button\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabLinkProps\n  extends BaseTabProps,\n    AnchorHTMLAttributes<HTMLAnchorElement> {\n  as: CustomLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link useTabs}\n *\n * @since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n  const {\n    id: propId,\n    as: Component = \"button\",\n    active,\n    activeIndicator,\n    verticalActiveIndicator,\n    icon,\n    iconAfter,\n    stacked,\n    className,\n    children: propChildren,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disableRipple,\n    ...remaining\n  } = props as TabButtonProps;\n  const { disabled } = props as TabButtonProps;\n\n  const id = useEnsuredId(propId, \"tab\");\n  const { activeDescendantId } = useKeyboardMovementContext();\n  const { ripples, handlers } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  const isLink = Component !== \"button\";\n  const children = useHigherContrastChildren(propChildren);\n  let buttonOnlyProps: Record<string, unknown> | undefined;\n  if (!isLink) {\n    buttonOnlyProps = { type: \"button\" };\n  }\n\n  return (\n    <Component\n      {...remaining}\n      {...buttonOnlyProps}\n      {...handlers}\n      aria-selected={active}\n      id={id}\n      role=\"tab\"\n      tabIndex={id === activeDescendantId ? 0 : -1}\n      className={tab({\n        className,\n        active,\n        isLink,\n        stacked: !!icon && stacked,\n        disabled,\n        reversed: !!icon && iconAfter,\n        activeIndicator,\n        verticalActiveIndicator,\n      })}\n    >\n      {icon}\n      {children}\n      {ripples}\n    </Component>\n  );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","disabled","activeDescendantId","ripples","handlers","mode","undefined","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAUA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAGlD,SAASC,GAAG,QAAQ,iBAAiB;AAgFrC;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM,EAAE2B,QAAQ,EAAE,GAAG3B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAE0B,kBAAkB,EAAE,GAAGhC;IAC/B,MAAM,EAAEiC,OAAO,EAAEC,QAAQ,EAAE,GAAGpC,sBAAsB;QAClDqC,MAAMN,gBAAgB,SAASO;QAC/BlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;IACF;IAEA,MAAMM,SAAS7B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIqB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC/B;QACE,GAAGsB,SAAS;QACZ,GAAGQ,eAAe;QAClB,GAAGJ,QAAQ;QACZM,iBAAe/B;QACfJ,IAAIA;QACJoC,MAAK;QACLC,UAAUrC,OAAO2B,qBAAqB,IAAI,CAAC;QAC3CjB,WAAWb,IAAI;YACba;YACAN;YACA4B;YACAvB,SAAS,CAAC,CAACF,QAAQE;YACnBiB;YACAY,UAAU,CAAC,CAAC/B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAiB;;;AAGP"}
+{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\n\nimport { type ComponentWithRippleProps } from \"../interaction/types.js\";\nimport { useElementInteraction } from \"../interaction/useElementInteraction.js\";\nimport { useHigherContrastChildren } from \"../interaction/useHigherContrastChildren.js\";\nimport { type CustomLinkComponent } from \"../link/Link.js\";\nimport { useKeyboardMovementContext } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\nimport { tab } from \"./tabStyles.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-min-width\"?: string;\n    \"--rmd-tab-max-width\"?: string;\n    \"--rmd-tab-min-height\"?: string;\n    \"--rmd-tab-stacked-height\"?: string;\n    \"--rmd-tab-stacked-width\"?: string;\n    \"--rmd-tab-padding\"?: string | number;\n    \"--rmd-tab-stacked-padding\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps extends ComponentWithRippleProps {\n  /**\n   * Set this to `true` if the tab is currently active.\n   *\n   * This is normally provided by the {@link useTabs} hook.\n   */\n  active: boolean;\n\n  /**\n   * Set this to `true` if the {@link TabListProps.disableTransition} prop has\n   * also been set to `true` to disable an active indicator below the tab when\n   * {@link active} is `true`.\n   *\n   * @defaultValue `false`\n   */\n  activeIndicator?: boolean;\n\n  /**\n   * Set this to `true` when rendering the tabs vertically and\n   * {@link activeIndicator} has been enabled.\n   *\n   * @defaultValue !false\n   */\n  verticalActiveIndicator?: boolean;\n\n  /**\n   * An optional icon to render with the with the {@link children}. The default\n   * behavior will render this icon before the children.\n   *\n   * @see {@link iconAfter}\n   * @see {@link stacked}\n   */\n  icon?: ReactNode;\n\n  /**\n   * Set this to `true` to render the {@link icon} after the {@link children}.\n   *\n   * @defaultValue `false`\n   */\n  iconAfter?: boolean;\n\n  /**\n   * Set this to `true` to render the {@link icon} and {@link children} stacked\n   * instead of horizontally.\n   *\n   * @defaultValue `false`\n   */\n  stacked?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabButtonProps\n  extends BaseTabProps,\n    ButtonHTMLAttributes<HTMLButtonElement> {\n  as?: \"button\";\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabLinkProps\n  extends BaseTabProps,\n    AnchorHTMLAttributes<HTMLAnchorElement> {\n  as: CustomLinkComponent;\n}\n\n/**\n * @since 6.0.0\n */\nexport type TabProps = TabButtonProps | TabLinkProps;\n\n/**\n * **Client Component**\n *\n * This component should usually be used with the `TabsList` component and\n * `useTabs` hook.\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @see {@link useTabs}\n * @since 6.0.0\n */\nexport function Tab(props: TabProps): ReactElement {\n  const {\n    id: propId,\n    as: Component = \"button\",\n    active,\n    activeIndicator,\n    verticalActiveIndicator,\n    icon,\n    iconAfter,\n    stacked,\n    className,\n    children: propChildren,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disableRipple,\n    ...remaining\n  } = props as TabButtonProps;\n  const { disabled } = props as TabButtonProps;\n\n  const id = useEnsuredId(propId, \"tab\");\n  const { activeDescendantId } = useKeyboardMovementContext();\n  const { ripples, handlers } = useElementInteraction({\n    mode: disableRipple ? \"none\" : undefined,\n    onBlur,\n    onClick,\n    onKeyDown,\n    onKeyUp,\n    onMouseDown,\n    onMouseUp,\n    onMouseLeave,\n    onDragStart,\n    onTouchStart,\n    onTouchEnd,\n    onTouchMove,\n    disabled,\n  });\n\n  const isLink = Component !== \"button\";\n  const children = useHigherContrastChildren(propChildren);\n  let buttonOnlyProps: Record<string, unknown> | undefined;\n  if (!isLink) {\n    buttonOnlyProps = { type: \"button\" };\n  }\n\n  return (\n    <Component\n      {...remaining}\n      {...buttonOnlyProps}\n      {...handlers}\n      aria-selected={active}\n      id={id}\n      role=\"tab\"\n      tabIndex={id === activeDescendantId ? 0 : -1}\n      className={tab({\n        className,\n        active,\n        isLink,\n        stacked: !!icon && stacked,\n        disabled,\n        reversed: !!icon && iconAfter,\n        activeIndicator,\n        verticalActiveIndicator,\n      })}\n    >\n      {icon}\n      {children}\n      {ripples}\n    </Component>\n  );\n}\n"],"names":["useElementInteraction","useHigherContrastChildren","useKeyboardMovementContext","useEnsuredId","tab","Tab","props","id","propId","as","Component","active","activeIndicator","verticalActiveIndicator","icon","iconAfter","stacked","className","children","propChildren","onBlur","onClick","onKeyDown","onKeyUp","onMouseDown","onMouseUp","onMouseLeave","onDragStart","onTouchStart","onTouchEnd","onTouchMove","disableRipple","remaining","disabled","activeDescendantId","ripples","handlers","mode","undefined","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAUA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAGlD,SAASC,GAAG,QAAQ,iBAAiB;AAoGrC;;;;;;;;;CASC,GACD,OAAO,SAASC,IAAIC,KAAe;IACjC,MAAM,EACJC,IAAIC,MAAM,EACVC,IAAIC,YAAY,QAAQ,EACxBC,MAAM,EACNC,eAAe,EACfC,uBAAuB,EACvBC,IAAI,EACJC,SAAS,EACTC,OAAO,EACPC,SAAS,EACTC,UAAUC,YAAY,EACtBC,MAAM,EACNC,OAAO,EACPC,SAAS,EACTC,OAAO,EACPC,WAAW,EACXC,SAAS,EACTC,YAAY,EACZC,WAAW,EACXC,YAAY,EACZC,UAAU,EACVC,WAAW,EACXC,aAAa,EACb,GAAGC,WACJ,GAAG1B;IACJ,MAAM,EAAE2B,QAAQ,EAAE,GAAG3B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAE0B,kBAAkB,EAAE,GAAGhC;IAC/B,MAAM,EAAEiC,OAAO,EAAEC,QAAQ,EAAE,GAAGpC,sBAAsB;QAClDqC,MAAMN,gBAAgB,SAASO;QAC/BlB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAG;IACF;IAEA,MAAMM,SAAS7B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIqB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC/B;QACE,GAAGsB,SAAS;QACZ,GAAGQ,eAAe;QAClB,GAAGJ,QAAQ;QACZM,iBAAe/B;QACfJ,IAAIA;QACJoC,MAAK;QACLC,UAAUrC,OAAO2B,qBAAqB,IAAI,CAAC;QAC3CjB,WAAWb,IAAI;YACba;YACAN;YACA4B;YACAvB,SAAS,CAAC,CAACF,QAAQE;YACnBiB;YACAY,UAAU,CAAC,CAAC/B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAiB;;;AAGP"}

package/dist/tabs/TabList.d.ts

@@ -83,8 +83,8 @@ export interface TabListProps extends HTMLAttributes<HTMLDivElement>, Omit<TabLi
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs} for example usage.
- *
  * @since 6.0.0
  */
 export declare const TabList: import("react").ForwardRefExoticComponent<TabListProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/tabs/TabList.js

@@ -8,8 +8,8 @@ import { useTabList } from "./useTabList.js";
 /**
  * **Client Component**
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @see {@link useTabs} for example usage.
- *
  * @since 6.0.0
  */ export const TabList = /*#__PURE__*/ forwardRef(function TabList(props, ref) {
     const { style, onClick, onFocus, onKeyDown, className, children, activeIndex, setActiveIndex, activationMode = "manual", align = "left", padded = false, inline = false, vertical = false, scrollbar = false, scrollButtons = false, fullWidthTabs, disableTransition = false, transitionDuration = 150, getScrollToOptions, forwardScrollButtonProps, backwardScrollButtonProps, ...remaining } = props;

package/dist/tabs/TabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type BaseTabListScrollButtonProps,\n  TabListScrollButton,\n} from \"./TabListScrollButton.js\";\nimport { type GetTabListScrollToOptions } from \"./getTabListScrollToOptions.js\";\nimport { type TabListClassNameOptions, tabList } from \"./tabListStyles.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { useTabList } from \"./useTabList.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Omit<TabListClassNameOptions, \"animate\" | \"indicator\"> {\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   * @see {@link TabListActivationMode}\n   */\n  activationMode?: TabListActivationMode;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link TabListScrollButtonsBehavior}\n   */\n  scrollButtons?: TabListScrollButtonsBehavior;\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link useTabs} for example usage.\n *\n * @since 6.0.0\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    const {\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      className,\n      children,\n      activeIndex,\n      setActiveIndex,\n      activationMode = \"manual\",\n      align = \"left\",\n      padded = false,\n      inline = false,\n      vertical = false,\n      scrollbar = false,\n      scrollButtons = false,\n      fullWidthTabs,\n      disableTransition = false,\n      transitionDuration = 150,\n      getScrollToOptions,\n      forwardScrollButtonProps,\n      backwardScrollButtonProps,\n      ...remaining\n    } = props;\n\n    const {\n      elementProps,\n      movementContext,\n      backwardProps,\n      forwardProps,\n      showScrollButtons,\n    } = useTabList({\n      ref,\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      vertical,\n      activeIndex,\n      setActiveIndex,\n      activationMode,\n      scrollButtons,\n      disableTransition,\n    });\n\n    const prevActiveIndex = useRef(activeIndex);\n    const [animate, setAnimate] = useState(false);\n    useEffect(() => {\n      const isSameIndex = activeIndex === prevActiveIndex.current;\n      prevActiveIndex.current = activeIndex;\n      if (disableTransition || isSameIndex) {\n        return;\n      }\n\n      setAnimate(true);\n      const timeout = window.setTimeout(() => {\n        setAnimate(false);\n      }, transitionDuration);\n\n      return () => {\n        window.clearTimeout(timeout);\n      };\n    }, [activeIndex, disableTransition, transitionDuration]);\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div\n          {...remaining}\n          {...elementProps}\n          role=\"tablist\"\n          className={tabList({\n            align,\n            padded,\n            inline,\n            animate: !disableTransition && animate,\n            vertical,\n            scrollbar,\n            indicator: !disableTransition,\n            fullWidthTabs,\n            className,\n          })}\n        >\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...backwardScrollButtonProps}\n              {...backwardProps}\n            />\n          )}\n          {children}\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...forwardScrollButtonProps}\n              {...forwardProps}\n            />\n          )}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useRef","useState","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","fullWidthTabs","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","elementProps","movementContext","backwardProps","forwardProps","showScrollButtons","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","window","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAEEC,mBAAmB,QACd,2BAA2B;AAElC,SAAuCC,OAAO,QAAQ,qBAAqB;AAK3E,SAASC,UAAU,QAAQ,kBAAkB;AA4F7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,aAAa,EACbC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGvB;IAEJ,MAAM,EACJwB,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAG9B,WAAW;QACbG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM;QACAE;IACF;IAEA,MAAMW,kBAAkBpC,OAAOe;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGrC,SAAS;IACvCF,UAAU;QACR,MAAMwC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIU,qBAAqBc,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,OAAOC,UAAU,CAAC;YAChCL,WAAW;QACb,GAAGZ;QAEH,OAAO;YACLgB,OAAOE,YAAY,CAACH;QACtB;IACF,GAAG;QAAC1B;QAAaU;QAAmBC;KAAmB;IAEvD,qBACE,KAACxB;QAAyB2C,OAAOb;kBAC/B,cAAA,MAACc;YACE,GAAGhB,SAAS;YACZ,GAAGC,YAAY;YAChBgB,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACZ,qBAAqBY;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACvB;gBACZD;gBACAX;YACF;;gBAECsB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGI,aAAa;;gBAGpBnB;gBACAqB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGM,YAAY;;;;;AAM5B,GACA"}
+{"version":3,"sources":["../../src/tabs/TabList.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { KeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport {\n  type BaseTabListScrollButtonProps,\n  TabListScrollButton,\n} from \"./TabListScrollButton.js\";\nimport { type GetTabListScrollToOptions } from \"./getTabListScrollToOptions.js\";\nimport { type TabListClassNameOptions, tabList } from \"./tabListStyles.js\";\nimport {\n  type TabListActivationMode,\n  type TabListScrollButtonsBehavior,\n} from \"./types.js\";\nimport { useTabList } from \"./useTabList.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabListProps\n  extends HTMLAttributes<HTMLDivElement>,\n    Omit<TabListClassNameOptions, \"animate\" | \"indicator\"> {\n  activeIndex: number;\n  setActiveIndex: (nextActiveIndex: number) => void;\n\n  /**\n   * Set this to `true` to show a scrollbar when the number of tabs cause\n   * overflow.\n   *\n   * @see {@link scrollButtons}\n   * @defaultValue `false`\n   */\n  scrollbar?: boolean;\n\n  /**\n   * Set this to `true` to disable the active tab indicator from animating\n   * when a new tab is selected.\n   *\n   * @defaultValue `false`\n   */\n  disableTransition?: boolean;\n\n  /**\n   * This should be equal to the `$tabs-transition-duration` variable.\n   *\n   * @defaultValue `150`\n   */\n  transitionDuration?: number;\n\n  /**\n   * @defaultValue `\"manual\"`\n   * @see {@link TabListActivationMode}\n   */\n  activationMode?: TabListActivationMode;\n\n  /**\n   * @defaultValue `false`\n   * @see {@link TabListScrollButtonsBehavior}\n   */\n  scrollButtons?: TabListScrollButtonsBehavior;\n\n  /**\n   * A convenience prop for the {@link BaseTabListScrollButtonProps.getScrollToOptions}\n   * on {@link forwardScrollButtonProps} and {@link backwardScrollButtonProps}.\n   */\n  getScrollToOptions?: GetTabListScrollToOptions;\n\n  /**\n   * Any additional props that should be passed to the scroll forward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll right\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  forwardScrollButtonProps?: BaseTabListScrollButtonProps;\n\n  /**\n   * Any additional props that should be passed to the scroll backward button.\n   *\n   * @example\n   * ```tsx\n   * forwardScrollButtonProps={{\n   *   \"aria-label\": \"Scroll left\",\n   *   theme: \"primary\",\n   *   themeType: \"contained\",\n   *   className: styles.buttonContainer,\n   *   buttonProps: {\n   *     className: styles.button,\n   *   }\n   * }}\n   * ```\n   */\n  backwardScrollButtonProps?: BaseTabListScrollButtonProps;\n}\n\n/**\n * **Client Component**\n *\n * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}\n * @see {@link useTabs} for example usage.\n * @since 6.0.0\n */\nexport const TabList = forwardRef<HTMLDivElement, TabListProps>(\n  function TabList(props, ref) {\n    const {\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      className,\n      children,\n      activeIndex,\n      setActiveIndex,\n      activationMode = \"manual\",\n      align = \"left\",\n      padded = false,\n      inline = false,\n      vertical = false,\n      scrollbar = false,\n      scrollButtons = false,\n      fullWidthTabs,\n      disableTransition = false,\n      transitionDuration = 150,\n      getScrollToOptions,\n      forwardScrollButtonProps,\n      backwardScrollButtonProps,\n      ...remaining\n    } = props;\n\n    const {\n      elementProps,\n      movementContext,\n      backwardProps,\n      forwardProps,\n      showScrollButtons,\n    } = useTabList({\n      ref,\n      style,\n      onClick,\n      onFocus,\n      onKeyDown,\n      vertical,\n      activeIndex,\n      setActiveIndex,\n      activationMode,\n      scrollButtons,\n      disableTransition,\n    });\n\n    const prevActiveIndex = useRef(activeIndex);\n    const [animate, setAnimate] = useState(false);\n    useEffect(() => {\n      const isSameIndex = activeIndex === prevActiveIndex.current;\n      prevActiveIndex.current = activeIndex;\n      if (disableTransition || isSameIndex) {\n        return;\n      }\n\n      setAnimate(true);\n      const timeout = window.setTimeout(() => {\n        setAnimate(false);\n      }, transitionDuration);\n\n      return () => {\n        window.clearTimeout(timeout);\n      };\n    }, [activeIndex, disableTransition, transitionDuration]);\n\n    return (\n      <KeyboardMovementProvider value={movementContext}>\n        <div\n          {...remaining}\n          {...elementProps}\n          role=\"tablist\"\n          className={tabList({\n            align,\n            padded,\n            inline,\n            animate: !disableTransition && animate,\n            vertical,\n            scrollbar,\n            indicator: !disableTransition,\n            fullWidthTabs,\n            className,\n          })}\n        >\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...backwardScrollButtonProps}\n              {...backwardProps}\n            />\n          )}\n          {children}\n          {showScrollButtons && (\n            <TabListScrollButton\n              getScrollToOptions={getScrollToOptions}\n              {...forwardScrollButtonProps}\n              {...forwardProps}\n            />\n          )}\n        </div>\n      </KeyboardMovementProvider>\n    );\n  }\n);\n"],"names":["forwardRef","useEffect","useRef","useState","KeyboardMovementProvider","TabListScrollButton","tabList","useTabList","TabList","props","ref","style","onClick","onFocus","onKeyDown","className","children","activeIndex","setActiveIndex","activationMode","align","padded","inline","vertical","scrollbar","scrollButtons","fullWidthTabs","disableTransition","transitionDuration","getScrollToOptions","forwardScrollButtonProps","backwardScrollButtonProps","remaining","elementProps","movementContext","backwardProps","forwardProps","showScrollButtons","prevActiveIndex","animate","setAnimate","isSameIndex","current","timeout","window","setTimeout","clearTimeout","value","div","role","indicator"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,wBAAwB,QAAQ,6CAA6C;AACtF,SAEEC,mBAAmB,QACd,2BAA2B;AAElC,SAAuCC,OAAO,QAAQ,qBAAqB;AAK3E,SAASC,UAAU,QAAQ,kBAAkB;AA4F7C;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAUR,WACrB,SAASQ,QAAQC,KAAK,EAAEC,GAAG;IACzB,MAAM,EACJC,KAAK,EACLC,OAAO,EACPC,OAAO,EACPC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,WAAW,EACXC,cAAc,EACdC,iBAAiB,QAAQ,EACzBC,QAAQ,MAAM,EACdC,SAAS,KAAK,EACdC,SAAS,KAAK,EACdC,WAAW,KAAK,EAChBC,YAAY,KAAK,EACjBC,gBAAgB,KAAK,EACrBC,aAAa,EACbC,oBAAoB,KAAK,EACzBC,qBAAqB,GAAG,EACxBC,kBAAkB,EAClBC,wBAAwB,EACxBC,yBAAyB,EACzB,GAAGC,WACJ,GAAGvB;IAEJ,MAAM,EACJwB,YAAY,EACZC,eAAe,EACfC,aAAa,EACbC,YAAY,EACZC,iBAAiB,EAClB,GAAG9B,WAAW;QACbG;QACAC;QACAC;QACAC;QACAC;QACAS;QACAN;QACAC;QACAC;QACAM;QACAE;IACF;IAEA,MAAMW,kBAAkBpC,OAAOe;IAC/B,MAAM,CAACsB,SAASC,WAAW,GAAGrC,SAAS;IACvCF,UAAU;QACR,MAAMwC,cAAcxB,gBAAgBqB,gBAAgBI,OAAO;QAC3DJ,gBAAgBI,OAAO,GAAGzB;QAC1B,IAAIU,qBAAqBc,aAAa;YACpC;QACF;QAEAD,WAAW;QACX,MAAMG,UAAUC,OAAOC,UAAU,CAAC;YAChCL,WAAW;QACb,GAAGZ;QAEH,OAAO;YACLgB,OAAOE,YAAY,CAACH;QACtB;IACF,GAAG;QAAC1B;QAAaU;QAAmBC;KAAmB;IAEvD,qBACE,KAACxB;QAAyB2C,OAAOb;kBAC/B,cAAA,MAACc;YACE,GAAGhB,SAAS;YACZ,GAAGC,YAAY;YAChBgB,MAAK;YACLlC,WAAWT,QAAQ;gBACjBc;gBACAC;gBACAC;gBACAiB,SAAS,CAACZ,qBAAqBY;gBAC/BhB;gBACAC;gBACA0B,WAAW,CAACvB;gBACZD;gBACAX;YACF;;gBAECsB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGE,yBAAyB;oBAC5B,GAAGI,aAAa;;gBAGpBnB;gBACAqB,mCACC,KAAChC;oBACCwB,oBAAoBA;oBACnB,GAAGC,wBAAwB;oBAC3B,GAAGM,YAAY;;;;;AAM5B,GACA"}

package/dist/tabs/TabListScrollButton.d.ts

@@ -1,6 +1,6 @@
 import { type HTMLAttributes } from "react";
 import { type ButtonProps } from "../button/Button.js";
-import { type ButtonClassNameThemeOptions } from "../button/buttonStyles.js";
+import { type ButtonClassNameThemeOptions } from "../button/styles.js";
 import { type PropsWithRef } from "../types.js";
 import { type GetTabListScrollToOptions } from "./getTabListScrollToOptions.js";
 /**

package/dist/tabs/TabListScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B,GAAG"}
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type HTMLAttributes,\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n} from \"react\";\n\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/styles.js\";\nimport { getIcon } from \"../icon/config.js\";\nimport { type PropsWithRef } from \"../types.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useIntersectionObserver } from \"../useIntersectionObserver.js\";\nimport { applyRef } from \"../utils/applyRef.js\";\nimport {\n  type GetTabListScrollToOptions,\n  getTabListScrollToOptions,\n} from \"./getTabListScrollToOptions.js\";\nimport {\n  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface BaseTabListScrollButtonProps\n  extends HTMLAttributes<HTMLDivElement>,\n    ButtonClassNameThemeOptions {\n  buttonProps?: PropsWithRef<ButtonProps, HTMLButtonElement>;\n\n  /** @defaultValue `false` */\n  disableTransition?: boolean;\n\n  /** @defaultValue {@link getTabListScrollToOptions} */\n  getScrollToOptions?: GetTabListScrollToOptions;\n}\n\n/**\n * @internal\n * @since 6.0.0\n */\nexport interface TabListScrollButtonProps extends BaseTabListScrollButtonProps {\n  type: \"back\" | \"forward\";\n  /** @defaultValue `false` */\n  vertical?: boolean;\n}\n\n/**\n * **Client Component**\n *\n * @internal\n * @since 6.0.0\n */\nexport const TabListScrollButton = forwardRef<\n  HTMLDivElement,\n  TabListScrollButtonProps\n>(function TabListScrollButton(props, ref) {\n  const {\n    \"aria-label\": ariaLabel,\n    className,\n    buttonProps,\n    type,\n    theme,\n    themeType,\n    buttonType = \"icon\",\n    disabled: propDisabled,\n    children: propChildren,\n    getScrollToOptions = getTabListScrollToOptions,\n    vertical = false,\n    disableTransition = false,\n    ...remaining\n  } = props;\n\n  const forward = type === \"forward\";\n  const iconButton = buttonType === \"icon\";\n  const icon = getIcon(type);\n  const children = propChildren || icon;\n\n  const root = useRef<HTMLElement | null>(null);\n  const isRTL = useDir().dir === \"rtl\";\n  const [disabled, setDisabled] = useState(!forward);\n  const nodeRef = useIntersectionObserver({\n    root,\n    rootMargin: \"1px\",\n    onUpdate: useCallback(([entry]) => {\n      setDisabled(entry.intersectionRatio === 1);\n    }, []),\n  });\n\n  return (\n    <>\n      {!forward && <span ref={nodeRef} />}\n      <div\n        {...remaining}\n        ref={(instance) => {\n          applyRef(instance, ref);\n          root.current = instance?.parentElement || null;\n        }}\n        className={tabListScrollButtonContainer({\n          forward,\n          vertical,\n          className,\n        })}\n      >\n        <Button\n          aria-label={ariaLabel || (iconButton ? type : undefined)}\n          theme={theme}\n          themeType={themeType}\n          buttonType={buttonType}\n          disabled={propDisabled || disabled}\n          {...buttonProps}\n          className={tabListScrollButton({\n            className: buttonProps?.className,\n            vertical,\n          })}\n          onClick={(event) => {\n            buttonProps?.onClick?.(event);\n            const container = root.current;\n            if (!container) {\n              return;\n            }\n\n            container.scrollTo(\n              getScrollToOptions({\n                isRTL,\n                animate: !disableTransition,\n                vertical,\n                container,\n                increment: forward,\n              })\n            );\n          }}\n        >\n          {children}\n        </Button>\n      </div>\n      {forward && <span ref={nodeRef} />}\n    </>\n  );\n});\n"],"names":["forwardRef","useCallback","useRef","useState","Button","getIcon","useDir","useIntersectionObserver","applyRef","getTabListScrollToOptions","tabListScrollButton","tabListScrollButtonContainer","TabListScrollButton","props","ref","ariaLabel","className","buttonProps","type","theme","themeType","buttonType","disabled","propDisabled","children","propChildren","getScrollToOptions","vertical","disableTransition","remaining","forward","iconButton","icon","root","isRTL","dir","setDisabled","nodeRef","rootMargin","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AAEA,SAEEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAEf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,oBAAoB;AAE5C,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SAEEC,yBAAyB,QACpB,iCAAiC;AACxC,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AA4BxC;;;;;CAKC,GACD,OAAO,MAAMC,oCAAsBZ,WAGjC,SAASY,oBAAoBC,KAAK,EAAEC,GAAG;IACvC,MAAM,EACJ,cAAcC,SAAS,EACvBC,SAAS,EACTC,WAAW,EACXC,IAAI,EACJC,KAAK,EACLC,SAAS,EACTC,aAAa,MAAM,EACnBC,UAAUC,YAAY,EACtBC,UAAUC,YAAY,EACtBC,qBAAqBjB,yBAAyB,EAC9CkB,WAAW,KAAK,EAChBC,oBAAoB,KAAK,EACzB,GAAGC,WACJ,GAAGhB;IAEJ,MAAMiB,UAAUZ,SAAS;IACzB,MAAMa,aAAaV,eAAe;IAClC,MAAMW,OAAO3B,QAAQa;IACrB,MAAMM,WAAWC,gBAAgBO;IAEjC,MAAMC,OAAO/B,OAA2B;IACxC,MAAMgC,QAAQ5B,SAAS6B,GAAG,KAAK;IAC/B,MAAM,CAACb,UAAUc,YAAY,GAAGjC,SAAS,CAAC2B;IAC1C,MAAMO,UAAU9B,wBAAwB;QACtC0B;QACAK,YAAY;QACZC,UAAUtC,YAAY,CAAC,CAACuC,MAAM;YAC5BJ,YAAYI,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACX,yBAAW,KAACY;gBAAK5B,KAAKuB;;0BACxB,KAACM;gBACE,GAAGd,SAAS;gBACbf,KAAK,CAAC8B;oBACJpC,SAASoC,UAAU9B;oBACnBmB,KAAKY,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA9B,WAAWL,6BAA6B;oBACtCmB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC2C,cAAYhC,aAAcgB,CAAAA,aAAab,OAAO8B,SAAQ;oBACtD7B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWN,oBAAoB;wBAC7BM,WAAWC,aAAaD;wBACxBW;oBACF;oBACAsB,SAAS,CAACC;wBACRjC,aAAagC,UAAUC;wBACvB,MAAMC,YAAYlB,KAAKY,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChB1B,mBAAmB;4BACjBQ;4BACAmB,SAAS,CAACzB;4BACVD;4BACAwB;4BACAG,WAAWxB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACY;gBAAK5B,KAAKuB;;;;AAG7B,GAAG"}

package/dist/tabs/_tabs.scss

@@ -1,3 +1,7 @@
+////
+/// @group tabs
+////
+
 @use "sass:map";
 
 @use "../utils";
@@ -8,45 +12,151 @@
 @use "../icon/icon";
 @use "../button/button";
 
+/// Set to `true` to disable all the styles
+/// @type Boolean
 $disable-everything: false !default;
+
+/// Set to `true` to disable the icon support within a `Tab`.
+/// @type Boolean
 $disable-icon: false !default;
+
+/// Set to `true` to disable the stacked `Tab` styles.
+/// @type Boolean
 $disable-stacked: false !default;
+
+/// Set to `true` to disable the reversed `Tab` styles.
+/// @type Boolean
 $disable-reversed: false !default;
+
+/// Set to `true` to disable the padded `TabList` styles.
+/// @type Boolean
 $disable-tablist-padded: false !default;
+
+/// Set to `true` to disable the vertical `TabList` styles.
+/// @type Boolean
 $disable-tablist-vertical: false !default;
+
+/// Set to `true` if the active tab indicator animation is not required due to
+/// all `TabList` components enabling the `disableTransition` prop and all
+/// `Tab` components enable the `tabIndicator` prop.
+/// @type Boolean
 $disable-tablist-indicator: false !default;
+
+/// Set to `true` to disable the hidden scrollbar styles on the `TabList`.
+/// @type Boolean
 $disable-tablist-hidden-scrollbar: false !default;
+
+/// Set to `true` to disable the styles for the scroll buttons within the
+/// `TabList`.
+/// @type Boolean
 $disable-tablist-scroll-button: false !default;
-$disable-tablist-active-indicator-transition: false !default;
+
+/// Set to `true` to disable the active tab indicator animation from the
+/// `TabList` component.
+///
+/// @type Boolean
+$disable-tablist-active-indicator-transition: $disable-tablist-indicator !default;
+
+/// Set to `true` to disable the icon support within a `Tab`.
+/// @type Boolean
 $disable-tablist-scroll-button-vertical: $disable-tablist-vertical !default;
+
+/// Set to `true` to disable the active tab indicator styles.
+/// @type Boolean
 $disable-indicator: false !default;
+
+/// Set to `true` to disable the vertical active tab indicator styles.
+/// @type Boolean
 $disable-indicator-vertical: $disable-tablist-vertical !default;
 
+/// The default `Tab` typography.
+/// @type Map
 $typography: map.remove(typography.$button-styles, line-height) !default;
+
+/// The default gap between the `Tab` icon and children.
+/// @type Number
 $gap: icon.$spacing !default;
+
+/// The default `Tab` height.
+/// @type Number
 $height: 3rem !default;
+
+/// The default `Tab` stacked height.
+/// @type Number
 $stacked-height: 4.5rem !default;
+
+/// The default `Tab` horizontal padding.
+/// @type Number
 $horizontal-padding: 1rem !default;
+
+/// The default `Tab` vertical padding while `stacked`.
+/// @type Number
 $vertical-padding: 0.75rem !default;
+
+/// The `Tab` min width.
+/// @type Number
 $min-width: 5.625rem !default;
+
+/// The `Tab` max width.
+/// @type Number
 $max-width: 20rem !default;
+
+/// The default height for the active tab indicator.
+/// @type Number
 $indicator-height: 0.125rem !default;
+
+/// The default background-color for the active tab indicator.
+/// @type Color
 $indicator-background: theme.theme-get-var(primary-color) !default;
+
+/// The default text color for an active `Tab`.
+/// @type Color
 $active-color: theme.theme-get-var(text-primary-color) !default;
+
+/// The default text color for an inactive `Tab`.
+/// @type Color
 $inactive-color: theme.theme-get-var(text-secondary-color) !default;
+
+/// The default text color for a disabled `Tab`.
+/// @type Color
 $disabled-color: theme.theme-get-var(text-disabled-color) !default;
+
+/// The default transition duration for the active tab indicator.
+/// @type Number
 $transition-duration: transition.$linear-duration !default;
+
+/// The default transition timing function for the active tab indicator.
+/// @type Number
 $transition-timing-function: transition.$linear-timing-function !default;
 
+/// The default padding for a `TabList` with the `padded` prop enabled.
+/// @type Number
 $tablist-padding-left: 3.25rem !default;
-$tablist-scroller-z-index: 2 !default;
-$tablist-scroller-background-color: theme.theme-get-var(
+
+/// The default z-index for a `TabList` scroll button.
+/// @type Number
+$tablist-scroll-button-z-index: 2 !default;
+
+/// The default background color for a `TabList` scroll button.
+/// @type Number
+$tablist-scroll-button-background-color: theme.theme-get-var(
   background-color,
   inherit
 ) !default;
+
+/// The default `top` or `left` position for the active tab indicator relative
+/// to the `TabList` container.
+///
+/// @type Number
 $tablist-vertical-indicator-position: 0 !default;
+
+/// The `border-radius` for the `TabListScrollButton`.
+/// @type Number
 $tablist-button-border-radius: 0 !default;
 
+/// The available configurable css variables and mostly used internally for the
+/// `get-var`, `set-var`, and `use-var` utils.
+/// @type List
 $variables: (
   color,
   active-color,
@@ -62,6 +172,9 @@ $variables: (
   stacked-padding
 );
 
+/// @param {String} name - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value
+/// @returns {String} a `var()` statement
 @function get-var($name, $fallback: null) {
   $var: utils.get-var-name($variables, $name, "tab");
   @if $fallback {
@@ -71,16 +184,26 @@ $variables: (
   @return var(#{$var});
 }
 
+/// @param {String} name - The supported variable name
+/// @param {any} value - The value to set the variable to. Supports `null` which
+/// will just be a no-op.
 @mixin set-var($name, $value) {
   @if $value {
     #{utils.get-var-name($variables, $name, "tab")}: #{$value};
   }
 }
 
+/// @param {String} property - The css property to apply the variable to
+/// @param {String} name [$property] - The supported variable name
+/// @param {any} fallback [null] - An optional fallback value if the variable
+/// has not been set
 @mixin use-var($property, $name: $property, $fallback: null) {
   #{$property}: get-var($name, $fallback);
 }
 
+/// This should only be used if not using the `tab-styles` mixin.
+///
+/// @see {mixin} styles
 @mixin indicator-styles {
   .rmd-tab-indicator {
     &::after {
@@ -137,6 +260,9 @@ $variables: (
   }
 }
 
+/// This should only be used if not using the `tab-styles` mixin.
+///
+/// @see {mixin} styles
 @mixin tablist-styles {
   .rmd-tablist {
     display: inline-flex;
@@ -188,18 +314,21 @@ $variables: (
   }
 }
 
+/// This should only be used if not using the `tab-styles` mixin.
+///
+/// @see {mixin} styles
 @mixin tablist-button-styles {
   .rmd-tablist-button {
     @include button.set-var(icon-border-radius, $tablist-button-border-radius);
 
     align-items: center;
-    background-color: $tablist-scroller-background-color;
+    background-color: $tablist-scroll-button-background-color;
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
     max-width: $max-width;
     position: sticky;
-    z-index: $tablist-scroller-z-index;
+    z-index: $tablist-scroll-button-z-index;
 
     &--left {
       left: 0;
@@ -256,6 +385,9 @@ $variables: (
   }
 }
 
+/// This should only be used if not using the `tab-styles` mixin.
+///
+/// @see {mixin} styles
 @mixin tab-styles {
   .rmd-tab {
     @include utils.map-to-styles($typography);
@@ -308,6 +440,7 @@ $variables: (
   }
 }
 
+/// Conditionally applies the css variables based on feature flags
 @mixin variables {
   @if not $disable-everything {
     @include set-var(color, $inactive-color);
@@ -330,6 +463,10 @@ $variables: (
   }
 }
 
+/// Generates all the styles based on feature flags.
+///
+/// @param {Boolean} disable-layer [false] - Set this to `true` to disable the
+/// layer behavior
 @mixin styles($disable-layer: false) {
   @if not $disable-everything {
     @include utils.optional-layer(tabs, $disable-layer) {

package/dist/tabs/tabStyles.d.ts

@@ -1,21 +1,3 @@
-declare module "react" {
-    interface CSSProperties {
-        "--rmd-tab-color"?: string;
-        "--rmd-tab-active-color"?: string;
-        "--rmd-tab-inactive-color"?: string;
-        "--rmd-tab-disabled-color"?: string;
-        "--rmd-tab-size"?: string;
-        "--rmd-tab-offset"?: string | number;
-        "--rmd-tab-min-width"?: string;
-        "--rmd-tab-max-width"?: string;
-        "--rmd-tab-min-height"?: string;
-        "--rmd-tab-stacked-height"?: string;
-        "--rmd-tab-stacked-width"?: string;
-        "--rmd-tab-padding"?: string | number;
-        "--rmd-tab-stacked-padding"?: string | number;
-        "--rmd-tab-indicator-background"?: string;
-    }
-}
 /**
  * @since 6.0.0
  */

package/dist/tabs/tabStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-color\"?: string;\n    \"--rmd-tab-active-color\"?: string;\n    \"--rmd-tab-inactive-color\"?: string;\n    \"--rmd-tab-disabled-color\"?: string;\n\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-min-width\"?: string;\n    \"--rmd-tab-max-width\"?: string;\n    \"--rmd-tab-min-height\"?: string;\n    \"--rmd-tab-stacked-height\"?: string;\n    \"--rmd-tab-stacked-width\"?: string;\n    \"--rmd-tab-padding\"?: string | number;\n    \"--rmd-tab-stacked-padding\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAsBvD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}
+{"version":3,"sources":["../../src/tabs/tabStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { tabIndicator } from \"./tabIndicatorStyles.js\";\n\nconst styles = bem(\"rmd-tab\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabClassNameOptions {\n  className?: string;\n  active?: boolean;\n  isLink?: boolean;\n  activeIndicator?: boolean;\n  verticalActiveIndicator?: boolean;\n  stacked?: boolean;\n  reversed?: boolean;\n  disabled?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tab(options: TabClassNameOptions = {}): string {\n  const {\n    className,\n    active,\n    isLink,\n    stacked,\n    reversed,\n    disabled,\n    activeIndicator,\n    verticalActiveIndicator,\n  } = options;\n\n  return cnb(\n    styles({\n      active,\n      reversed: reversed && !stacked,\n      stacked,\n      \"stacked-reversed\": stacked && reversed,\n      disabled,\n    }),\n    active &&\n      activeIndicator &&\n      tabIndicator({ vertical: verticalActiveIndicator }),\n    cssUtils({ surface: true, textDecoration: isLink ? \"none\" : undefined }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","tabIndicator","styles","tab","options","className","active","isLink","stacked","reversed","disabled","activeIndicator","verticalActiveIndicator","vertical","surface","textDecoration","undefined"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAEhC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AACtC,SAASC,YAAY,QAAQ,0BAA0B;AAEvD,MAAMC,SAASF,IAAI;AAgBnB;;CAEC,GACD,OAAO,SAASG,IAAIC,UAA+B,CAAC,CAAC;IACnD,MAAM,EACJC,SAAS,EACTC,MAAM,EACNC,MAAM,EACNC,OAAO,EACPC,QAAQ,EACRC,QAAQ,EACRC,eAAe,EACfC,uBAAuB,EACxB,GAAGR;IAEJ,OAAON,IACLI,OAAO;QACLI;QACAG,UAAUA,YAAY,CAACD;QACvBA;QACA,oBAAoBA,WAAWC;QAC/BC;IACF,IACAJ,UACEK,mBACAV,aAAa;QAAEY,UAAUD;IAAwB,IACnDb,SAAS;QAAEe,SAAS;QAAMC,gBAAgBR,SAAS,SAASS;IAAU,IACtEX;AAEJ"}

package/dist/tabs/useTabs.d.ts

@@ -150,6 +150,7 @@ export interface TabsImplementation<TabValue extends string | number = number> {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs(): TabsImplementation & {
@@ -203,6 +204,7 @@ export declare function useTabs(): TabsImplementation & {
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs<TabValue extends number>(options: TabsHookOptions<TabValue> & {
@@ -269,6 +271,7 @@ export declare function useTabs<TabValue extends number>(options: TabsHookOption
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs<TabValue extends string>(options: TabsHookOptions<TabValue> & {
@@ -376,6 +379,7 @@ export declare function useTabs<TabValue extends string>(options: TabsHookOption
  * }
  * ```
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */
 export declare function useTabs<TabValue extends string>(options: TabsHookOptions<TabValue> & {

package/dist/tabs/useTabs.js

@@ -9,11 +9,12 @@ const PANEL_PREFIX = "panel-";
  * This hook can be uncontrolled/controlled and supports strongly typing the tab
  * values if needed. Check out the overloads for examples.
  *
+ * @see {@link https://next.react-md.dev/components/tabs | Tabs Demos}
  * @since 6.0.0
  */ export function useTabs(options = {}) {
     const { baseId: propBaseId, tabs = EMPTY_LIST, stacked, vertical, iconAfter, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab, disableScrollFix, disableTransition } = options;
     const baseId = useEnsuredId(propBaseId, "tab");
-    const [direction, setDirection] = useState("left");
+    const [direction, setDirection] = useState("forward");
     const [activeTab, setActiveTab] = useEnsuredState({
         value: propActiveTab,
         setValue: propSetActiveTab,
@@ -53,7 +54,7 @@ const PANEL_PREFIX = "panel-";
             return {
                 activeIndex,
                 setActiveIndex: (nextActiveIndex)=>{
-                    setDirection(activeIndex < nextActiveIndex ? "left" : "right");
+                    setDirection(activeIndex < nextActiveIndex ? "forward" : "backward");
                     if (typeof activeTab === "string" || tabs.length > 0) {
                         setActiveTab(tabs[nextActiveIndex]);
                     } else {