@react-md/core 1.0.0-next.15 → 1.0.0-next.16

package/dist/suspense/NullSuspense.js

@@ -1,8 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Suspense } from "react";
 /**
- * **Server Component**
- *
  * This is just a convenience component to set the `fallback` to `null`.
  *
  * @example Simple Example

package/dist/suspense/NullSuspense.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/suspense/NullSuspense.tsx"],"sourcesContent":["import { Suspense, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport interface NullSuspenseProps {\n  children: ReactNode;\n}\n\n/**\n * **Server Component**\n *\n * This is just a convenience component to set the `fallback` to `null`.\n *\n * @example Simple Example\n * ```tsx\n * import { NullSuspense } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { lazy } from \"react\";\n *\n * const Component = lazy(() => import('./Some/Path/To/Component'));\n *\n * function Example() {\n *   return (\n *     <NullSuspense>\n *       <Component />\n *     </NullSuspense>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function NullSuspense(props: NullSuspenseProps): ReactElement {\n  const { children } = props;\n\n  return <Suspense fallback={null}>{children}</Suspense>;\n}\n"],"names":["Suspense","NullSuspense","props","children","fallback"],"mappings":";AAAA,SAASA,QAAQ,QAA2C,QAAQ;AASpE;;;;;;;;;;;;;;;;;;;;;;;CAuBC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,qBAAO,KAACF;QAASI,UAAU;kBAAOD;;AACpC"}
+{"version":3,"sources":["../../src/suspense/NullSuspense.tsx"],"sourcesContent":["import { Suspense, type ReactElement, type ReactNode } from \"react\";\n\n/**\n * @since 6.0.0\n */\nexport interface NullSuspenseProps {\n  children: ReactNode;\n}\n\n/**\n * This is just a convenience component to set the `fallback` to `null`.\n *\n * @example Simple Example\n * ```tsx\n * import { NullSuspense } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { lazy } from \"react\";\n *\n * const Component = lazy(() => import('./Some/Path/To/Component'));\n *\n * function Example() {\n *   return (\n *     <NullSuspense>\n *       <Component />\n *     </NullSuspense>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function NullSuspense(props: NullSuspenseProps): ReactElement {\n  const { children } = props;\n\n  return <Suspense fallback={null}>{children}</Suspense>;\n}\n"],"names":["Suspense","NullSuspense","props","children","fallback"],"mappings":";AAAA,SAASA,QAAQ,QAA2C,QAAQ;AASpE;;;;;;;;;;;;;;;;;;;;;CAqBC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,QAAQ,EAAE,GAAGD;IAErB,qBAAO,KAACF;QAASI,UAAU;kBAAOD;;AACpC"}

package/dist/table/TableCellContent.d.ts

@@ -37,9 +37,6 @@ export interface TableCellContentProps extends ButtonHTMLAttributes<HTMLButtonEl
     hAlign?: TableCellHorizontalAlignment;
 }
 /**
- * **Server Component**
- * This might actually be a client component.
- *
  * This is mostly an internal component since it is automatically used within
  * the `TableCell` component but this will conditionally wrap the `children`
  * within an `UnstyledButton` to make a clickable cell. This is really to help

package/dist/table/TableCellContent.js

@@ -6,9 +6,6 @@ import { IconRotator } from "../icon/IconRotator.js";
 import { bem } from "../utils/bem.js";
 const styles = bem("rmd-table-cell");
 /**
- * **Server Component**
- * This might actually be a client component.
- *
  * This is mostly an internal component since it is automatically used within
  * the `TableCell` component but this will conditionally wrap the `children`
  * within an `UnstyledButton` to make a clickable cell. This is really to help

package/dist/table/TableCellContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type SortOrder, type TableCellHorizontalAlignment } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * Any additional props to pass to the `IconRotator`.\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * @since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * **Server Component**\n * This might actually be a client component.\n *\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    iconRotatorProps,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = (\n      <IconRotator {...iconRotatorProps} rotated={rotated}>\n        {propIcon}\n      </IconRotator>\n    );\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","iconRotatorProps","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAiDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;;;;CAUC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACJ,GAAGb;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBACE,KAACN;YAAa,GAAGgB,gBAAgB;YAAEJ,SAASA;sBACzCL;;IAGP;IAEA,qBACE,MAACR;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}
+{"version":3,"sources":["../../src/table/TableCellContent.tsx"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { forwardRef, type ButtonHTMLAttributes, type ReactNode } from \"react\";\nimport { ButtonUnstyled } from \"../button/ButtonUnstyled.js\";\nimport { IconRotator, type IconRotatorProps } from \"../icon/IconRotator.js\";\nimport { bem } from \"../utils/bem.js\";\nimport { type SortOrder, type TableCellHorizontalAlignment } from \"./types.js\";\n\n/**\n * @since 6.0.0\n */\nexport type TableCellContentsIconRotatorProps = Omit<\n  IconRotatorProps,\n  \"children\" | \"rotated\"\n>;\n\n/**\n * @since 6.0.0 Extends the `ButtonHTMLAttributes` so the extra props\n * can be passed to the `ButtonUnstyled`\n * @internal\n */\nexport interface TableCellContentProps\n  extends ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The current sort order for this cell. Setting this to `null` will prevent\n   * the button from being rendered.\n   */\n  sortOrder?: SortOrder;\n\n  /**\n   * This should normally be the `getIcon(\"sort\")`\n   */\n  icon?: ReactNode;\n\n  /** @defaultValue `false` */\n  iconAfter?: boolean;\n\n  /**\n   * Boolean if the icon should be rotated.\n   */\n  rotated?: boolean;\n\n  /**\n   * Any additional props to pass to the `IconRotator`.\n   */\n  iconRotatorProps?: TableCellContentsIconRotatorProps;\n\n  /**\n   * @since 4.0.3\n   * @see {@link TableCellHorizontalAlignment}\n   */\n  hAlign?: TableCellHorizontalAlignment;\n}\n\nconst styles = bem(\"rmd-table-cell\");\n\n/**\n * This is mostly an internal component since it is automatically used within\n * the `TableCell` component but this will conditionally wrap the `children`\n * within an `UnstyledButton` to make a clickable cell. This is really to help\n * with sort behavior within headers.\n *\n * @internal\n */\nexport const TableCellContent = forwardRef<\n  HTMLButtonElement,\n  TableCellContentProps\n>(function TableCellContent(props, ref) {\n  const {\n    icon: propIcon,\n    style,\n    className,\n    sortOrder,\n    children,\n    rotated: propRotated,\n    hAlign = \"left\",\n    iconAfter,\n    iconRotatorProps,\n    ...remaining\n  } = props;\n  if (!sortOrder || propIcon === null) {\n    return <>{children}</>;\n  }\n\n  let icon: ReactNode = null;\n  if (sortOrder !== \"none\") {\n    const rotated = propRotated ?? sortOrder === \"descending\";\n\n    icon = (\n      <IconRotator {...iconRotatorProps} rotated={rotated}>\n        {propIcon}\n      </IconRotator>\n    );\n  }\n\n  return (\n    <ButtonUnstyled\n      {...remaining}\n      ref={ref}\n      style={style}\n      className={cnb(\n        styles(\"content\", {\n          [hAlign]: hAlign !== \"left\",\n        }),\n        className\n      )}\n    >\n      {!iconAfter && icon}\n      {children}\n      {iconAfter && icon}\n    </ButtonUnstyled>\n  );\n});\n"],"names":["cnb","forwardRef","ButtonUnstyled","IconRotator","bem","styles","TableCellContent","props","ref","icon","propIcon","style","className","sortOrder","children","rotated","propRotated","hAlign","iconAfter","iconRotatorProps","remaining"],"mappings":";AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,UAAU,QAAmD,QAAQ;AAC9E,SAASC,cAAc,QAAQ,8BAA8B;AAC7D,SAASC,WAAW,QAA+B,yBAAyB;AAC5E,SAASC,GAAG,QAAQ,kBAAkB;AAiDtC,MAAMC,SAASD,IAAI;AAEnB;;;;;;;CAOC,GACD,OAAO,MAAME,iCAAmBL,WAG9B,SAASK,iBAAiBC,KAAK,EAAEC,GAAG;IACpC,MAAM,EACJC,MAAMC,QAAQ,EACdC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,QAAQ,EACRC,SAASC,WAAW,EACpBC,SAAS,MAAM,EACfC,SAAS,EACTC,gBAAgB,EAChB,GAAGC,WACJ,GAAGb;IACJ,IAAI,CAACM,aAAaH,aAAa,MAAM;QACnC,qBAAO;sBAAGI;;IACZ;IAEA,IAAIL,OAAkB;IACtB,IAAII,cAAc,QAAQ;QACxB,MAAME,UAAUC,eAAeH,cAAc;QAE7CJ,qBACE,KAACN;YAAa,GAAGgB,gBAAgB;YAAEJ,SAASA;sBACzCL;;IAGP;IAEA,qBACE,MAACR;QACE,GAAGkB,SAAS;QACbZ,KAAKA;QACLG,OAAOA;QACPC,WAAWZ,IACTK,OAAO,WAAW;YAChB,CAACY,OAAO,EAAEA,WAAW;QACvB,IACAL;;YAGD,CAACM,aAAaT;YACdK;YACAI,aAAaT;;;AAGpB,GAAG"}

package/dist/table/TableConfigurationProvider.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type TableConfig, type TableConfigContext } from "./types.js";
 /**
  * An internal hook for getting the current table configuration in child

package/dist/tabs/Tab.d.ts

@@ -53,6 +53,9 @@ export interface BaseTabProps {
 export interface TabButtonProps extends BaseTabProps, ButtonHTMLAttributes<HTMLButtonElement> {
     as?: "button";
 }
+/**
+ * @since 6.0.0
+ */
 export interface TabLinkProps extends BaseTabProps, AnchorHTMLAttributes<HTMLAnchorElement> {
     as: CustomLinkComponent;
 }

package/dist/tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\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\";\nimport { tab } from \"./tabStyles.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps {\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\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    ...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    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","remaining","disabled","activeDescendantId","ripples","handlers","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAOA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,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,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM,EAAE0B,QAAQ,EAAE,GAAG1B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAEyB,kBAAkB,EAAE,GAAG/B;IAC/B,MAAM,EAAEgC,OAAO,EAAEC,QAAQ,EAAE,GAAGnC,sBAAsB;QAClDoB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMI,SAAS1B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIkB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC5B;QACE,GAAGqB,SAAS;QACZ,GAAGM,eAAe;QAClB,GAAGF,QAAQ;QACZI,iBAAe5B;QACfJ,IAAIA;QACJiC,MAAK;QACLC,UAAUlC,OAAO0B,qBAAqB,IAAI,CAAC;QAC3ChB,WAAWb,IAAI;YACba;YACAN;YACAyB;YACApB,SAAS,CAAC,CAACF,QAAQE;YACnBgB;YACAU,UAAU,CAAC,CAAC5B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAgB;;;AAGP"}
+{"version":3,"sources":["../../src/tabs/Tab.tsx"],"sourcesContent":["\"use client\";\nimport {\n  type AnchorHTMLAttributes,\n  type ButtonHTMLAttributes,\n  type ReactElement,\n  type ReactNode,\n} from \"react\";\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\";\nimport { tab } from \"./tabStyles.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type useTabs } from \"./useTabs.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\n/**\n * @since 6.0.0\n */\nexport interface BaseTabProps {\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    ...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    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","remaining","disabled","activeDescendantId","ripples","handlers","isLink","buttonOnlyProps","type","aria-selected","role","tabIndex","reversed"],"mappings":"AAAA;;AAOA,SAASA,qBAAqB,QAAQ,0CAA0C;AAChF,SAASC,yBAAyB,QAAQ,8CAA8C;AAExF,SAASC,0BAA0B,QAAQ,6CAA6C;AACxF,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,GAAG,QAAQ,iBAAiB;AAmFrC;;;;;;;;;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,EACX,GAAGC,WACJ,GAAGzB;IACJ,MAAM,EAAE0B,QAAQ,EAAE,GAAG1B;IAErB,MAAMC,KAAKJ,aAAaK,QAAQ;IAChC,MAAM,EAAEyB,kBAAkB,EAAE,GAAG/B;IAC/B,MAAM,EAAEgC,OAAO,EAAEC,QAAQ,EAAE,GAAGnC,sBAAsB;QAClDoB;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAC;QACAE;IACF;IAEA,MAAMI,SAAS1B,cAAc;IAC7B,MAAMQ,WAAWjB,0BAA0BkB;IAC3C,IAAIkB;IACJ,IAAI,CAACD,QAAQ;QACXC,kBAAkB;YAAEC,MAAM;QAAS;IACrC;IAEA,qBACE,MAAC5B;QACE,GAAGqB,SAAS;QACZ,GAAGM,eAAe;QAClB,GAAGF,QAAQ;QACZI,iBAAe5B;QACfJ,IAAIA;QACJiC,MAAK;QACLC,UAAUlC,OAAO0B,qBAAqB,IAAI,CAAC;QAC3ChB,WAAWb,IAAI;YACba;YACAN;YACAyB;YACApB,SAAS,CAAC,CAACF,QAAQE;YACnBgB;YACAU,UAAU,CAAC,CAAC5B,QAAQC;YACpBH;YACAC;QACF;;YAECC;YACAI;YACAgB;;;AAGP"}

package/dist/tabs/TabListScrollButton.js

@@ -41,6 +41,7 @@ import { getTabListScrollToOptions } from "./utils.js";
                 },
                 className: tabListScrollButtonContainer({
                     forward,
+                    vertical,
                     className
                 }),
                 children: /*#__PURE__*/ _jsx(Button, {
@@ -50,7 +51,10 @@ import { getTabListScrollToOptions } from "./utils.js";
                     buttonType: buttonType,
                     disabled: propDisabled || disabled,
                     ...buttonProps,
-                    className: tabListScrollButton(buttonProps),
+                    className: tabListScrollButton({
+                        className: buttonProps?.className,
+                        vertical
+                    }),
                     onClick: (event)=>{
                         buttonProps?.onClick?.(event);
                         const container = root.current;

package/dist/tabs/TabListScrollButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.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  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\nimport {\n  getTabListScrollToOptions,\n  type GetTabListScrollToOptions,\n} from \"./utils.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    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({ forward, className })}\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(buttonProps)}\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","tabListScrollButton","tabListScrollButtonContainer","getTabListScrollToOptions","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","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AACxC,SACEC,yBAAyB,QAEpB,aAAa;AA4BpB;;;;;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,qBAAqBf,yBAAyB,EAC9CgB,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,UAAUrC,YAAY,CAAC,CAACsC,MAAM;YAC5BH,YAAYG,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACV,yBAAW,KAACW;gBAAK3B,KAAKuB;;0BACxB,KAACK;gBACE,GAAGb,SAAS;gBACbf,KAAK,CAAC6B;oBACJnC,SAASmC,UAAU7B;oBACnBmB,KAAKW,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA7B,WAAWN,6BAA6B;oBAAEoB;oBAASd;gBAAU;0BAE7D,cAAA,KAACZ;oBACC0C,cAAY/B,aAAcgB,CAAAA,aAAab,OAAO6B,SAAQ;oBACtD5B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWP,oBAAoBQ;oBAC/B+B,SAAS,CAACC;wBACRhC,aAAa+B,UAAUC;wBACvB,MAAMC,YAAYjB,KAAKW,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChBzB,mBAAmB;4BACjBQ;4BACAkB,SAAS,CAACxB;4BACVD;4BACAuB;4BACAG,WAAWvB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACW;gBAAK3B,KAAKuB;;;;AAG7B,GAAG"}
+{"version":3,"sources":["../../src/tabs/TabListScrollButton.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type HTMLAttributes,\n} from \"react\";\nimport { Button, type ButtonProps } from \"../button/Button.js\";\nimport { type ButtonClassNameThemeOptions } from \"../button/buttonStyles.js\";\nimport { getIcon } from \"../icon/iconConfig.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  tabListScrollButton,\n  tabListScrollButtonContainer,\n} from \"./tabListScrollButtonStyles.js\";\nimport {\n  getTabListScrollToOptions,\n  type GetTabListScrollToOptions,\n} from \"./utils.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    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","tabListScrollButton","tabListScrollButtonContainer","getTabListScrollToOptions","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","onUpdate","entry","intersectionRatio","span","div","instance","current","parentElement","aria-label","undefined","onClick","event","container","scrollTo","animate","increment"],"mappings":"AAAA;;AACA,SACEA,UAAU,EACVC,WAAW,EACXC,MAAM,EACNC,QAAQ,QAEH,QAAQ;AACf,SAASC,MAAM,QAA0B,sBAAsB;AAE/D,SAASC,OAAO,QAAQ,wBAAwB;AAEhD,SAASC,MAAM,QAAQ,4CAA4C;AACnE,SAASC,uBAAuB,QAAQ,gCAAgC;AACxE,SAASC,QAAQ,QAAQ,uBAAuB;AAChD,SACEC,mBAAmB,EACnBC,4BAA4B,QACvB,iCAAiC;AACxC,SACEC,yBAAyB,QAEpB,aAAa;AA4BpB;;;;;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,qBAAqBf,yBAAyB,EAC9CgB,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,UAAUrC,YAAY,CAAC,CAACsC,MAAM;YAC5BH,YAAYG,MAAMC,iBAAiB,KAAK;QAC1C,GAAG,EAAE;IACP;IAEA,qBACE;;YACG,CAACV,yBAAW,KAACW;gBAAK3B,KAAKuB;;0BACxB,KAACK;gBACE,GAAGb,SAAS;gBACbf,KAAK,CAAC6B;oBACJnC,SAASmC,UAAU7B;oBACnBmB,KAAKW,OAAO,GAAGD,UAAUE,iBAAiB;gBAC5C;gBACA7B,WAAWN,6BAA6B;oBACtCoB;oBACAH;oBACAX;gBACF;0BAEA,cAAA,KAACZ;oBACC0C,cAAY/B,aAAcgB,CAAAA,aAAab,OAAO6B,SAAQ;oBACtD5B,OAAOA;oBACPC,WAAWA;oBACXC,YAAYA;oBACZC,UAAUC,gBAAgBD;oBACzB,GAAGL,WAAW;oBACfD,WAAWP,oBAAoB;wBAC7BO,WAAWC,aAAaD;wBACxBW;oBACF;oBACAqB,SAAS,CAACC;wBACRhC,aAAa+B,UAAUC;wBACvB,MAAMC,YAAYjB,KAAKW,OAAO;wBAC9B,IAAI,CAACM,WAAW;4BACd;wBACF;wBAEAA,UAAUC,QAAQ,CAChBzB,mBAAmB;4BACjBQ;4BACAkB,SAAS,CAACxB;4BACVD;4BACAuB;4BACAG,WAAWvB;wBACb;oBAEJ;8BAECN;;;YAGJM,yBAAW,KAACW;gBAAK3B,KAAKuB;;;;AAG7B,GAAG"}

package/dist/tabs/_tabs.scss

@@ -17,8 +17,9 @@ $disable-tablist-indicator: false !default;
 $disable-tablist-hidden-scrollbar: false !default;
 $disable-tablist-scroll-button: false !default;
 $disable-tablist-active-indicator-transition: false !default;
+$disable-tablist-scroll-button-vertical: $disable-tablist-vertical !default;
 $disable-indicator: false !default;
-$disable-indicator-vertical: false !default;
+$disable-indicator-vertical: $disable-tablist-vertical !default;
 
 $typography: map.remove(typography.$button-styles, line-height) !default;
 $gap: icon.$spacing !default;
@@ -133,7 +134,7 @@ $variables: (
     // make sure it can enable scrollbars in flex/grid containers
     max-width: 100%;
     outline: none;
-    overflow-x: auto;
+    overflow: auto;
     position: relative;
 
     &--full-width {
@@ -172,6 +173,7 @@ $variables: (
     display: inline-flex;
     flex-shrink: 0;
     justify-content: center;
+    max-width: $max-width;
     position: sticky;
     z-index: $tablist-scroller-z-index;
 
@@ -183,10 +185,26 @@ $variables: (
       @include utils.auto-rtl(right, 0);
     }
 
+    @if not $disable-tablist-scroll-button-vertical {
+      &--above {
+        top: 0;
+      }
+
+      &--below {
+        bottom: 0;
+      }
+    }
+
     &__button {
       @include utils.rtl {
         transform: rotate(180deg);
       }
+
+      @if not $disable-tablist-scroll-button-vertical {
+        &--v {
+          transform: rotate(90deg);
+        }
+      }
     }
   }
 }
@@ -205,9 +223,9 @@ $variables: (
     display: inline-flex;
     flex: 1 1 auto;
     gap: $gap;
-    height: $height;
     justify-content: center;
     max-width: $max-width;
+    min-height: $height;
     min-width: $min-width;
     padding: 0 $horizontal-padding;
     transition: color $transition-duration $transition-timing-function;

package/dist/tabs/tabListScrollButtonStyles.d.ts

@@ -4,6 +4,7 @@
 export interface TabListScrollButtonContainerClassNameOptions {
     className?: string;
     forward: boolean;
+    vertical?: boolean;
 }
 /**
  * @since 6.0.0
@@ -14,6 +15,7 @@ export declare function tabListScrollButtonContainer(options: TabListScrollButto
  */
 export interface TabListScrollButtonClassNameOptions {
     className?: string;
+    vertical?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/tabs/tabListScrollButtonStyles.js

@@ -4,17 +4,21 @@ const styles = bem("rmd-tablist-button");
 /**
  * @since 6.0.0
  */ export function tabListScrollButtonContainer(options) {
-    const { forward, className } = options;
+    const { forward, vertical, className } = options;
     return cnb(styles({
-        left: !forward,
-        right: forward
+        left: !vertical && !forward,
+        right: !vertical && forward,
+        above: vertical && !forward,
+        below: vertical && forward
     }), className);
 }
 /**
  * @since 6.0.0
  */ export function tabListScrollButton(options = {}) {
-    const { className } = options;
-    return cnb(styles("button"), className);
+    const { className, vertical } = options;
+    return cnb(styles("button", {
+        v: vertical
+    }), className);
 }
 
 //# sourceMappingURL=tabListScrollButtonStyles.js.map

package/dist/tabs/tabListScrollButtonStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, className } = options;\n\n  return cnb(\n    styles({\n      left: !forward,\n      right: forward,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(styles(\"button\"), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","className","left","right","tabListScrollButton"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAUnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,SAAS,EAAE,GAAGF;IAE/B,OAAOJ,IACLE,OAAO;QACLK,MAAM,CAACF;QACPG,OAAOH;IACT,IACAC;AAEJ;AASA;;CAEC,GACD,OAAO,SAASG,oBACdL,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEE,SAAS,EAAE,GAAGF;IAEtB,OAAOJ,IAAIE,OAAO,WAAWI;AAC/B"}
+{"version":3,"sources":["../../src/tabs/tabListScrollButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tablist-button\");\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonContainerClassNameOptions {\n  className?: string;\n  forward: boolean;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButtonContainer(\n  options: TabListScrollButtonContainerClassNameOptions\n): string {\n  const { forward, vertical, className } = options;\n\n  return cnb(\n    styles({\n      left: !vertical && !forward,\n      right: !vertical && forward,\n      above: vertical && !forward,\n      below: vertical && forward,\n    }),\n    className\n  );\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabListScrollButtonClassNameOptions {\n  className?: string;\n  vertical?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport function tabListScrollButton(\n  options: TabListScrollButtonClassNameOptions = {}\n): string {\n  const { className, vertical } = options;\n\n  return cnb(styles(\"button\", { v: vertical }), className);\n}\n"],"names":["cnb","bem","styles","tabListScrollButtonContainer","options","forward","vertical","className","left","right","above","below","tabListScrollButton","v"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB;;CAEC,GACD,OAAO,SAASE,6BACdC,OAAqD;IAErD,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,SAAS,EAAE,GAAGH;IAEzC,OAAOJ,IACLE,OAAO;QACLM,MAAM,CAACF,YAAY,CAACD;QACpBI,OAAO,CAACH,YAAYD;QACpBK,OAAOJ,YAAY,CAACD;QACpBM,OAAOL,YAAYD;IACrB,IACAE;AAEJ;AAUA;;CAEC,GACD,OAAO,SAASK,oBACdR,UAA+C,CAAC,CAAC;IAEjD,MAAM,EAAEG,SAAS,EAAED,QAAQ,EAAE,GAAGF;IAEhC,OAAOJ,IAAIE,OAAO,UAAU;QAAEW,GAAGP;IAAS,IAAIC;AAChD"}

package/dist/tabs/useTabList.d.ts

@@ -37,11 +37,13 @@ export interface TabListHookReturnValue {
         ref: RefObject<HTMLDivElement>;
         type: "back";
         vertical: boolean;
+        disableTransition?: boolean;
     };
     forwardProps: {
         ref: RefObject<HTMLDivElement>;
         type: "forward";
         vertical: boolean;
+        disableTransition?: boolean;
     };
 }
 /**

package/dist/tabs/useTabList.js

@@ -117,12 +117,14 @@ const noop = ()=>{
         backwardProps: {
             ref: backwardRef,
             type: "back",
-            vertical
+            vertical,
+            disableTransition
         },
         forwardProps: {
             ref: forwardRef,
             type: "forward",
-            vertical
+            vertical,
+            disableTransition
         },
         movementContext
     };

package/dist/tabs/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex(nextActiveIndex: number): void;\n  scrollButtons: boolean;\n  activationMode: \"manual\" | \"automatic\";\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n  };\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching between\n        // RTL, but the RTL state isn't required for any styles. Just reference it\n        // so that the hooks eslint rule doesn't show a warning...\n        isRTL;\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [activeIndex, isRTL, vertical]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n    },\n    movementContext,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","onUpdate","entry","activeTab","target","size","offsetHeight","offsetWidth","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","current","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}
+{"version":3,"sources":["../../src/tabs/useTabList.ts"],"sourcesContent":["\"use client\";\nimport type {\n  CSSProperties,\n  FocusEventHandler,\n  KeyboardEventHandler,\n  MouseEventHandler,\n  Ref,\n  RefObject,\n} from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport type {\n  KeyboardMovementContext,\n  KeyboardMovementProps,\n} from \"../movement/types.js\";\nimport { useKeyboardMovementProvider } from \"../movement/useKeyboardMovementProvider.js\";\nimport { useDir } from \"../typography/WritingDirectionProvider.js\";\nimport { useEnsuredRef } from \"../useEnsuredRef.js\";\nimport { useResizeObserver } from \"../useResizeObserver.js\";\nimport { getTabRoleOnly, scrollTabIntoView } from \"./utils.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-tab-size\"?: string;\n    \"--rmd-tab-offset\"?: string | number;\n    \"--rmd-tab-indicator-background\"?: string;\n  }\n}\n\nconst TAB_SIZE_VAR = \"--rmd-tab-size\";\nconst TAB_OFFSET_VAR = \"--rmd-tab-offset\";\n\nconst noop = (): void => {\n  // do nothing\n};\n\nexport type TabWidthVar = typeof TAB_SIZE_VAR;\nexport type TabOffsetVar = typeof TAB_OFFSET_VAR;\n\nexport type IndicatorCSSProperties = CSSProperties &\n  Record<TabWidthVar | TabOffsetVar, string>;\n\nexport interface TabListHookOptions {\n  ref: Ref<HTMLDivElement> | undefined;\n  style: CSSProperties | undefined;\n  activeIndex: number;\n  setActiveIndex(nextActiveIndex: number): void;\n  scrollButtons: boolean;\n  activationMode: \"manual\" | \"automatic\";\n  vertical: boolean;\n  onClick: MouseEventHandler<HTMLDivElement> | undefined;\n  onFocus: FocusEventHandler<HTMLDivElement> | undefined;\n  onKeyDown: KeyboardEventHandler<HTMLDivElement> | undefined;\n  disableTransition: boolean;\n}\n\nexport interface TabListHookReturnValue {\n  elementProps: KeyboardMovementProps<HTMLDivElement> & {\n    \"aria-orientation\": \"horizontal\" | \"vertical\";\n    style: CSSProperties;\n    ref: Ref<HTMLDivElement>;\n    onClick: MouseEventHandler<HTMLDivElement>;\n  };\n  movementContext: KeyboardMovementContext;\n  backwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"back\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n  forwardProps: {\n    ref: RefObject<HTMLDivElement>;\n    type: \"forward\";\n    vertical: boolean;\n    disableTransition?: boolean;\n  };\n}\n\n/**\n * @internal\n */\nexport function useTabList(\n  options: TabListHookOptions\n): TabListHookReturnValue {\n  const {\n    ref: propRef,\n    style,\n    activeIndex,\n    scrollButtons,\n    onClick = noop,\n    onFocus,\n    onKeyDown,\n    activationMode,\n    vertical,\n    setActiveIndex,\n    disableTransition,\n  } = options;\n\n  const isRTL = useDir().dir === \"rtl\";\n\n  const [indicatorStyles, setIndicatorStyles] =\n    useState<IndicatorCSSProperties>(() => {\n      const tabWidth = `${100 / 3}%`;\n      return {\n        [TAB_SIZE_VAR]: tabWidth,\n        [TAB_OFFSET_VAR]: \"0px\",\n      };\n    });\n\n  const [nodeRef, ref] = useEnsuredRef(propRef);\n  const tabListRef = useResizeObserver({\n    ref,\n    disabled: disableTransition,\n    onUpdate: useCallback(\n      (entry) => {\n        // this is kind of hacky -- the styles should update when switching between\n        // RTL, but the RTL state isn't required for any styles. Just reference it\n        // so that the hooks eslint rule doesn't show a warning...\n        isRTL;\n\n        const activeTab = getTabRoleOnly(entry.target)[activeIndex];\n        if (!activeTab) {\n          return;\n        }\n\n        const size = vertical ? activeTab.offsetHeight : activeTab.offsetWidth;\n        const offset = vertical ? activeTab.offsetTop : activeTab.offsetLeft;\n        const cssVars: IndicatorCSSProperties = {\n          [TAB_SIZE_VAR]: `${size}px`,\n          [TAB_OFFSET_VAR]: `${offset}px`,\n        };\n\n        setIndicatorStyles((prevStyles) => {\n          if (\n            prevStyles &&\n            prevStyles[TAB_SIZE_VAR] === cssVars[TAB_SIZE_VAR] &&\n            prevStyles[TAB_OFFSET_VAR] === cssVars[TAB_OFFSET_VAR]\n          ) {\n            return prevStyles;\n          }\n\n          return cssVars;\n        });\n      },\n      [activeIndex, isRTL, vertical]\n    ),\n  });\n  const forwardRef = useRef<HTMLDivElement>(null);\n  const backwardRef = useRef<HTMLDivElement>(null);\n  const { movementProps, movementContext } = useKeyboardMovementProvider({\n    onClick(event) {\n      onClick(event);\n      if (event.isPropagationStopped() || !(event.target instanceof Element)) {\n        return;\n      }\n\n      const clickedTab = event.target.closest(\"[role='tab']\");\n      const tabs = getTabRoleOnly(event.currentTarget);\n      const i = tabs.findIndex((tab) => tab === clickedTab);\n      if (i !== -1) {\n        setActiveIndex(i);\n      }\n    },\n    onFocus,\n    onKeyDown,\n    onFocusChange(event) {\n      const { index } = event;\n      if (activationMode === \"automatic\") {\n        setActiveIndex(index);\n      } else if (scrollButtons) {\n        scrollTabIntoView({\n          activeIndex: index,\n          backward: backwardRef.current,\n          container: nodeRef.current,\n          forward: forwardRef.current,\n          vertical,\n        });\n      }\n    },\n    loopable: true,\n    searchable: true,\n    horizontal: !vertical,\n    includeDisabled: true,\n    tabIndexBehavior: \"roving\",\n    getFocusableElements: getTabRoleOnly,\n  });\n\n  useEffect(() => {\n    scrollTabIntoView({\n      activeIndex,\n      backward: backwardRef.current,\n      container: nodeRef.current,\n      forward: forwardRef.current,\n      vertical,\n    });\n  }, [activeIndex, nodeRef, vertical]);\n\n  return {\n    elementProps: {\n      \"aria-orientation\": vertical ? \"vertical\" : \"horizontal\",\n      ref: tabListRef,\n      style: {\n        ...style,\n        ...(disableTransition ? undefined : indicatorStyles),\n      },\n      ...movementProps,\n    },\n    backwardProps: {\n      ref: backwardRef,\n      type: \"back\",\n      vertical,\n      disableTransition,\n    },\n    forwardProps: {\n      ref: forwardRef,\n      type: \"forward\",\n      vertical,\n      disableTransition,\n    },\n    movementContext,\n  };\n}\n"],"names":["useCallback","useEffect","useRef","useState","useKeyboardMovementProvider","useDir","useEnsuredRef","useResizeObserver","getTabRoleOnly","scrollTabIntoView","TAB_SIZE_VAR","TAB_OFFSET_VAR","noop","useTabList","options","ref","propRef","style","activeIndex","scrollButtons","onClick","onFocus","onKeyDown","activationMode","vertical","setActiveIndex","disableTransition","isRTL","dir","indicatorStyles","setIndicatorStyles","tabWidth","nodeRef","tabListRef","disabled","onUpdate","entry","activeTab","target","size","offsetHeight","offsetWidth","offset","offsetTop","offsetLeft","cssVars","prevStyles","forwardRef","backwardRef","movementProps","movementContext","event","isPropagationStopped","Element","clickedTab","closest","tabs","currentTarget","i","findIndex","tab","onFocusChange","index","backward","current","container","forward","loopable","searchable","horizontal","includeDisabled","tabIndexBehavior","getFocusableElements","elementProps","undefined","backwardProps","type","forwardProps"],"mappings":"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"}

package/dist/tabs/useTabs.d.ts

@@ -1,6 +1,6 @@
-import type { Dispatch, Ref } from "react";
-import type { SlideDirection } from "../transition/SlideContainer.js";
-import type { UseStateInitializer, UseStateSetter } from "../types.js";
+import { type Dispatch, type Ref } from "react";
+import { type SlideDirection } from "../transition/SlideContainer.js";
+import { type UseStateInitializer, type UseStateSetter } from "../types.js";
 /**
  * @since 6.0.0
  */
@@ -12,14 +12,6 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
      * @defaultValue `"tab-" + useId()`
      */
     baseId?: string;
-    /**
-     * Set this to `true` if changing active tabs should no longer attempt to
-     * scroll to the top of the tab panels container when using the
-     * {@link TabsImplementation.getTabPanelsProps}.
-     *
-     * @defaultValue `false`
-     */
-    disableScrollFix?: boolean;
     /**
      * Set this to an **ordered** list of tab values when:
      * - using a `string` tab value
@@ -42,6 +34,26 @@ export interface TabsHookOptions<TabValue extends string | number = number> {
      * @defaultValue `0`
      */
     defaultActiveTab?: UseStateInitializer<TabValue>;
+    /** Convenience pass-through prop to {@link TabProps.stacked} */
+    stacked?: boolean;
+    /** Convenience pass-through prop to {@link TabProps.iconAfter} */
+    iconAfter?: boolean;
+    /** Convenience pass-through props to {@link TabListProps.vertical} */
+    vertical?: boolean;
+    /**
+     * Set this to `true` if changing active tabs should no longer attempt to
+     * scroll to the top of the tab panels container when using the
+     * {@link TabsImplementation.getTabPanelsProps}.
+     *
+     * @defaultValue `false`
+     */
+    disableScrollFix?: boolean;
+    /**
+     * Convenience prop to disable all transitions for the
+     * {@link TabsImplementation.getTabProps} and
+     * {@link TabsImplementation.getTabListProps}.
+     */
+    disableTransition?: boolean;
 }
 /**
  * @since 6.0.0
@@ -50,6 +62,14 @@ export interface ProvidedTabProps {
     "aria-controls": string;
     id: string;
     active: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */
+    stacked?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */
+    iconAfter?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */
+    activeIndicator?: boolean;
+    /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */
+    verticalActiveIndicator?: boolean;
 }
 /**
  * @since 6.0.0
@@ -57,6 +77,8 @@ export interface ProvidedTabProps {
 export interface ProvidedTabListProps {
     activeIndex: number;
     setActiveIndex: Dispatch<number>;
+    vertical?: boolean;
+    disableTransition?: boolean;
 }
 /**
  * @since 6.0.0

package/dist/tabs/useTabs.js

@@ -10,7 +10,7 @@ const PANEL_PREFIX = "panel-";
  *
  * @since 6.0.0
  */ export function useTabs(options = {}) {
-    const { baseId: propBaseId, disableScrollFix, tabs = EMPTY_LIST, activeTab: propActiveTab, setActiveTab: propSetActiveTab, defaultActiveTab } = 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 [activeTab, setActiveTab] = useEnsuredState({
@@ -41,7 +41,11 @@ const PANEL_PREFIX = "panel-";
             return {
                 "aria-controls": getTabId(tabValue, PANEL_PREFIX),
                 id: getTabId(tabValue),
-                active: tabValue === activeTab
+                active: tabValue === activeTab,
+                stacked,
+                iconAfter,
+                activeIndicator: disableTransition,
+                verticalActiveIndicator: vertical && disableTransition
             };
         },
         getTabListProps () {
@@ -54,7 +58,9 @@ const PANEL_PREFIX = "panel-";
                     } else {
                         setActiveTab(nextActiveIndex);
                     }
-                }
+                },
+                vertical,
+                disableTransition
             };
         },
         getTabPanelProps (tabValue) {

package/dist/tabs/useTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport type { Dispatch, Ref, RefObject } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport type { SlideDirection } from \"../transition/SlideContainer.js\";\nimport type { UseStateInitializer, UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?(nextActiveTab: TabValue): void;\n  getTabProps(tabValue: TabValue): ProvidedTabProps;\n  getTabListProps(): ProvidedTabListProps;\n  getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;\n  getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs(): TabsImplementation<number> & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example Controlled\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Value Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Controlled Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Navigation Tabs\n * ```tsx\n * \"use client\";\n * import {\n *   RippleContainer,\n *   Tab,\n *   TabList,\n *   useElementInteraction,\n *   useEnsuredId,\n *   useHigherContrastChildren,\n *   useKeyboardMovementContext,\n *   useTabs,\n * } from \"@react-md/core\";\n * import type { LinkProps } from \"next/link\";\n * import Link from \"next/link\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import { usePathname } from \"next/navigation\";\n *\n * interface TabLinkProps extends LinkProps {\n *   active: boolean;\n * }\n *\n * function TabLink(props: LinkProps): ReactElement {\n *   const {\n *     id: propId,\n *     children: propChildren,\n *     active,\n *     className,\n *     ...remaining,\n *   } = props;\n *\n *   const id = useEnsuredId(propId, \"tab\");\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *   const { handlers, ripples } = useElementInteraction(props);\n *   const children = useHigherContrastChildren(propChildren);\n *\n *   return (\n *     <Link\n *       {...props}\n *       {...handlers}\n *       id={id}\n *       aria-selected={active}\n *       role=\"tab\"\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *       className={tab({\n *         className,\n *         active,\n *         // stacked,\n *         // reversed,\n *       })}\n *     >\n *       {children}\n *       {ripples}\n *     </Link>\n *   );\n * }\n *\n * const noop = (): void => {\n *  // do nothing\n * };\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <TabLink {...getTabProps(\"/\")} href=\"/\">Home</TabLink>\n *         <TabLink {...getTabProps(\"/page-1\")} href=\"/page-1\">Page 1</TabLink>\n *         <TabLink {...getTabProps(\"/page-2\")} href=\"/page-2\">Page 2</TabLink>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    disableScrollFix,\n    tabs = EMPTY_LIST,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"left\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"left\" : \"right\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps<E>() {\n      return {\n        ref: tabPanelsRef as RefObject<E>,\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","disableScrollFix","tabs","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref"],"mappings":"AAAA;AAEA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAGpD,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAExD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AA0YrB;;;;;CAKC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,gBAAgB,EAChBC,OAAOP,UAAU,EACjBQ,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EACjB,GAAGT;IAEJ,MAAMC,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACQ,WAAWC,aAAa,GAAGjB,SAAyB;IAE3D,MAAM,CAACW,WAAWE,aAAa,GAAGX,gBAAgB;QAChDgB,OAAON;QACPO,UAAUL;QACVM,cAAcL,oBAAqB;IACrC;IAEA,MAAMM,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYZ,KAAKa,MAAM,GAAG,IAC1Cb,KAAKc,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,CAAC,EAAEnB,OAAO,CAAC,EAAEmB,OAAO,EAAEL,YAAYC,YAAY,EAAE,CAAC;IAEnD,MAAMK,cAAcN,YAAYV;IAChC,MAAMiB,eAAe7B,OAAoB;IACzCD,UAAU;QACR,MAAM+B,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAapB,kBAAkB;YAClC;QACF;QAEAoB,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACtB;QAAkBE;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAG;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUlB;gBACpC6B,IAAIR,SAASH;gBACbY,QAAQZ,aAAaX;YACvB;QACF;QACAwB;YACE,OAAO;gBACLR;gBACAS,gBAAgB,CAACC;oBACfpB,aAAaU,cAAcU,kBAAkB,SAAS;oBACtD,IAAI,OAAO1B,cAAc,YAAYD,KAAKa,MAAM,GAAG,GAAG;wBACpDV,aAAaH,IAAI,CAAC2B,gBAAgB;oBACpC,OAAO;wBACLxB,aAAawB;oBACf;gBACF;YACF;QACF;QACAC,kBAAiBhB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUlB;gBACvBmC,MAAM;gBACNL,QAAQZ,aAAaX;YACvB;QACF;QACA6B;YACE,OAAO;gBACLC,KAAKb;gBACLZ;YACF;QACF;IACF;AACF"}
+{"version":3,"sources":["../../src/tabs/useTabs.ts"],"sourcesContent":["\"use client\";\nimport {\n  type Dispatch,\n  type Ref,\n  type RefObject,\n  useEffect,\n  useRef,\n  useState,\n} from \"react\";\nimport { type SlideDirection } from \"../transition/SlideContainer.js\";\nimport { type UseStateInitializer, type UseStateSetter } from \"../types.js\";\nimport { useEnsuredId } from \"../useEnsuredId.js\";\nimport { useEnsuredState } from \"../useEnsuredState.js\";\n\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabProps } from \"./Tab.js\";\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nimport { type TabListProps } from \"./TabList.js\";\n\nconst EMPTY_LIST = [] as const;\nconst PANEL_PREFIX = \"panel-\";\n\n/**\n * @since 6.0.0\n */\nexport interface TabsHookOptions<TabValue extends string | number = number> {\n  /**\n   * This can be used to generate the ids for the different components within\n   * the tab widget.\n   *\n   * @defaultValue `\"tab-\" + useId()`\n   */\n  baseId?: string;\n\n  /**\n   * Set this to an **ordered** list of tab values when:\n   * - using a `string` tab value\n   * - using a `number` tab value does not represent a tab index\n   *\n   * See the examples on the {@link useTabs} for usage.\n   */\n  tabs?: readonly TabValue[];\n\n  /**\n   * Provide this value and {@link setActiveTab} to control the active tab\n   * behavior.\n   */\n  activeTab?: TabValue;\n\n  /** @see {@link activeTab} */\n  setActiveTab?: Dispatch<TabValue>;\n\n  /**\n   * Set this to the default tab index when not controlling the active tab value\n   * through {@link activeTab} and {@link setActiveTab}.\n   *\n   * @defaultValue `0`\n   */\n  defaultActiveTab?: UseStateInitializer<TabValue>;\n\n  /** Convenience pass-through prop to {@link TabProps.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop to {@link TabProps.iconAfter} */\n  iconAfter?: boolean;\n\n  /** Convenience pass-through props to {@link TabListProps.vertical} */\n  vertical?: boolean;\n\n  /**\n   * Set this to `true` if changing active tabs should no longer attempt to\n   * scroll to the top of the tab panels container when using the\n   * {@link TabsImplementation.getTabPanelsProps}.\n   *\n   * @defaultValue `false`\n   */\n  disableScrollFix?: boolean;\n\n  /**\n   * Convenience prop to disable all transitions for the\n   * {@link TabsImplementation.getTabProps} and\n   * {@link TabsImplementation.getTabListProps}.\n   */\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabProps {\n  \"aria-controls\": string;\n  id: string;\n  active: boolean;\n\n  /** Convenience pass-through prop from {@link TabsHookOptions.stacked} */\n  stacked?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.iconAfter} */\n  iconAfter?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.disableTransition} */\n  activeIndicator?: boolean;\n  /** Convenience pass-through prop from {@link TabsHookOptions.vertical} and {@link TabsHookOptions.disableTransition} */\n  verticalActiveIndicator?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabListProps {\n  activeIndex: number;\n  setActiveIndex: Dispatch<number>;\n  vertical?: boolean;\n  disableTransition?: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelProps {\n  \"aria-labelledby\": string;\n  id: string;\n  role: \"tabpanel\";\n  active: boolean;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface ProvidedTabPanelsProps<E extends HTMLElement> {\n  ref: Ref<E>;\n  direction: SlideDirection;\n}\n\n/**\n * @since 6.0.0\n */\nexport interface TabsImplementation<TabValue extends string | number = number> {\n  direction: SlideDirection;\n  setDirection: UseStateSetter<SlideDirection>;\n  activeTab?: TabValue;\n  setActiveTab?(nextActiveTab: TabValue): void;\n  getTabProps(tabValue: TabValue): ProvidedTabProps;\n  getTabListProps(): ProvidedTabListProps;\n  getTabPanelProps(tabValue: TabValue): ProvidedTabPanelProps;\n  getTabPanelsProps<E extends HTMLElement>(): ProvidedTabPanelsProps<E>;\n}\n\n/**\n * @example Super Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs();\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs(): TabsImplementation<number> & {\n  activeTab: number;\n  setActiveTab: number;\n};\n/**\n * The tab behavior can be controlled by providing the `activeTab` and\n * `setActiveTab` options.\n *\n * @example Controlled\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n * import { useState } from \"react\";\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(1);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <Tab {...getTabProps(0)}>Tab 1</Tab>\n *         <Tab {...getTabProps(1)}>Tab 2</Tab>\n *         <Tab {...getTabProps(2)}>Tab 3</Tab>\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *         <Slide {...getTabPanelProps(0)}>Tab 1 Content</Slide>\n *         <Slide {...getTabPanelProps(1)}>Tab 2 Content</Slide>\n *         <Slide {...getTabPanelProps(2)}>Tab 3 Content</Slide>\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\nexport function useTabs<TabValue extends number>(\n  options: TabsHookOptions<TabValue> & {\n    tabs?: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Value Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"];\n *\n * function Example(): ReactElement {\n *   const {\n *     activeTab,\n *     setActiveTab,\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({ tabs });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab?: never;\n    setActiveTab?: never;\n    defaultActiveTab?: UseStateInitializer<TabValue>;\n  }\n): TabsImplementation<TabValue> & {\n  activeTab: TabValue;\n  setActiveTab: Dispatch<TabValue>;\n};\n/**\n * When using string values, the {@link TabsHookOptions.tabs} option **must** be\n * provided to determine the correct active tab index.\n *\n * @example String Controlled Simple\n * ```tsx\n * import { TabList, Tab, SlideContainer, Slide, useTabs } from \"@react-md/core\";\n * import type { ReactElement } from \"react\";\n *\n * const tabs = [\"value-1\", \"value-2\", \"value-3\"] as const;\n *\n * function Example(): ReactElement {\n *   const [activeTab, setActiveTab] = useState(tabs[0]);\n *\n *   const {\n *     direction,\n *     setDirection,\n *     getTabListProps,\n *     getTabPanelProps,\n *     getTabPanelsProps,\n *     getTabProps,\n *   } = useTabs({\n *     tabs,\n *     activeTab,\n *     setActiveTab,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         {tabs.map((value) => (\n *           <Tab key={value} {...getTabProps(value)}>{value}</Tab>\n *         ))}\n *       </TabList>\n *       <SlideContainer {...getTabPanelsProps()}>\n *        {tabs.map((value) => (\n *          <Slide key={value}>{value} Content</Slide>\n *        ))}\n *       </SlideContainer>\n *     </>\n *   );\n * }\n * ```\n *\n * @example Navigation Tabs\n * ```tsx\n * \"use client\";\n * import {\n *   RippleContainer,\n *   Tab,\n *   TabList,\n *   useElementInteraction,\n *   useEnsuredId,\n *   useHigherContrastChildren,\n *   useKeyboardMovementContext,\n *   useTabs,\n * } from \"@react-md/core\";\n * import type { LinkProps } from \"next/link\";\n * import Link from \"next/link\";\n * import type { PropsWithChildren, ReactElement } from \"react\";\n * import { usePathname } from \"next/navigation\";\n *\n * interface TabLinkProps extends LinkProps {\n *   active: boolean;\n * }\n *\n * function TabLink(props: LinkProps): ReactElement {\n *   const {\n *     id: propId,\n *     children: propChildren,\n *     active,\n *     className,\n *     ...remaining,\n *   } = props;\n *\n *   const id = useEnsuredId(propId, \"tab\");\n *   const { activeDescendantId } = useKeyboardMovementContext();\n *   const { handlers, ripples } = useElementInteraction(props);\n *   const children = useHigherContrastChildren(propChildren);\n *\n *   return (\n *     <Link\n *       {...props}\n *       {...handlers}\n *       id={id}\n *       aria-selected={active}\n *       role=\"tab\"\n *       tabIndex={id === activeDescendantId ? 0 : -1}\n *       className={tab({\n *         className,\n *         active,\n *         // stacked,\n *         // reversed,\n *       })}\n *     >\n *       {children}\n *       {ripples}\n *     </Link>\n *   );\n * }\n *\n * const noop = (): void => {\n *  // do nothing\n * };\n *\n * const PATHNAME_TABS = [\"/\", \"/page-1\", \"/page-2\"];\n *\n * function Layout({ children }: PropsWithChildren) {\n *   const pathname = usePathname();\n *   const { getTabListProps, getTabProps } = useTabs({\n *     tabs: PATHNAME_TABS,\n *     activeTab: pathname,\n *     setActiveTab: noop,\n *   });\n *\n *   return (\n *     <>\n *       <TabList {...getTabListProps()}>\n *         <TabLink {...getTabProps(\"/\")} href=\"/\">Home</TabLink>\n *         <TabLink {...getTabProps(\"/page-1\")} href=\"/page-1\">Page 1</TabLink>\n *         <TabLink {...getTabProps(\"/page-2\")} href=\"/page-2\">Page 2</TabLink>\n *       </TabList>\n *       <main>{children}</main>\n *     </>\n *   );\n * }\n * ```\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string>(\n  options: TabsHookOptions<TabValue> & {\n    tabs: readonly TabValue[];\n    activeTab: TabValue;\n    setActiveTab: Dispatch<TabValue>;\n    defaultActiveTab?: never;\n  }\n): TabsImplementation<TabValue> & { activeTab?: never; setActiveTab?: never };\n/**\n * This hook can be uncontrolled/controlled and supports strongly typing the tab\n * values if needed. Check out the overloads for examples.\n *\n * @since 6.0.0\n */\nexport function useTabs<TabValue extends string | number>(\n  options: TabsHookOptions<TabValue> = {}\n): TabsImplementation<TabValue> {\n  const {\n    baseId: propBaseId,\n    tabs = EMPTY_LIST,\n    stacked,\n    vertical,\n    iconAfter,\n    activeTab: propActiveTab,\n    setActiveTab: propSetActiveTab,\n    defaultActiveTab,\n    disableScrollFix,\n    disableTransition,\n  } = options;\n\n  const baseId = useEnsuredId(propBaseId, \"tab\");\n  const [direction, setDirection] = useState<SlideDirection>(\"left\");\n\n  const [activeTab, setActiveTab] = useEnsuredState({\n    value: propActiveTab,\n    setValue: propSetActiveTab,\n    defaultValue: defaultActiveTab ?? (0 as TabValue),\n  });\n\n  const getTabIndex = (tabValue: TabValue): number =>\n    typeof tabValue === \"string\" || tabs.length > 0\n      ? tabs.indexOf(tabValue)\n      : tabValue;\n  const getTabId = (tabValue: TabValue, prefix = \"\"): string =>\n    `${baseId}-${prefix}${getTabIndex(tabValue) + 1}`;\n\n  const activeIndex = getTabIndex(activeTab);\n  const tabPanelsRef = useRef<HTMLElement>(null);\n  useEffect(() => {\n    const container = tabPanelsRef.current;\n    if (!container || disableScrollFix) {\n      return;\n    }\n\n    container.scrollTop = 0;\n  }, [disableScrollFix, activeTab]);\n\n  return {\n    activeTab,\n    setActiveTab,\n    direction,\n    setDirection,\n    getTabProps(tabValue) {\n      return {\n        \"aria-controls\": getTabId(tabValue, PANEL_PREFIX),\n        id: getTabId(tabValue),\n        active: tabValue === activeTab,\n        stacked,\n        iconAfter,\n        activeIndicator: disableTransition,\n        verticalActiveIndicator: vertical && disableTransition,\n      };\n    },\n    getTabListProps() {\n      return {\n        activeIndex,\n        setActiveIndex: (nextActiveIndex) => {\n          setDirection(activeIndex < nextActiveIndex ? \"left\" : \"right\");\n          if (typeof activeTab === \"string\" || tabs.length > 0) {\n            setActiveTab(tabs[nextActiveIndex]);\n          } else {\n            setActiveTab(nextActiveIndex as TabValue);\n          }\n        },\n        vertical,\n        disableTransition,\n      };\n    },\n    getTabPanelProps(tabValue) {\n      return {\n        \"aria-labelledby\": getTabId(tabValue),\n        id: getTabId(tabValue, PANEL_PREFIX),\n        role: \"tabpanel\",\n        active: tabValue === activeTab,\n      };\n    },\n    getTabPanelsProps<E>() {\n      return {\n        ref: tabPanelsRef as RefObject<E>,\n        direction,\n      };\n    },\n  };\n}\n"],"names":["useEffect","useRef","useState","useEnsuredId","useEnsuredState","EMPTY_LIST","PANEL_PREFIX","useTabs","options","baseId","propBaseId","tabs","stacked","vertical","iconAfter","activeTab","propActiveTab","setActiveTab","propSetActiveTab","defaultActiveTab","disableScrollFix","disableTransition","direction","setDirection","value","setValue","defaultValue","getTabIndex","tabValue","length","indexOf","getTabId","prefix","activeIndex","tabPanelsRef","container","current","scrollTop","getTabProps","id","active","activeIndicator","verticalActiveIndicator","getTabListProps","setActiveIndex","nextActiveIndex","getTabPanelProps","role","getTabPanelsProps","ref"],"mappings":"AAAA;AACA,SAIEA,SAAS,EACTC,MAAM,EACNC,QAAQ,QACH,QAAQ;AAGf,SAASC,YAAY,QAAQ,qBAAqB;AAClD,SAASC,eAAe,QAAQ,wBAAwB;AAOxD,MAAMC,aAAa,EAAE;AACrB,MAAMC,eAAe;AAoarB;;;;;CAKC,GACD,OAAO,SAASC,QACdC,UAAqC,CAAC,CAAC;IAEvC,MAAM,EACJC,QAAQC,UAAU,EAClBC,OAAON,UAAU,EACjBO,OAAO,EACPC,QAAQ,EACRC,SAAS,EACTC,WAAWC,aAAa,EACxBC,cAAcC,gBAAgB,EAC9BC,gBAAgB,EAChBC,gBAAgB,EAChBC,iBAAiB,EAClB,GAAGb;IAEJ,MAAMC,SAASN,aAAaO,YAAY;IACxC,MAAM,CAACY,WAAWC,aAAa,GAAGrB,SAAyB;IAE3D,MAAM,CAACa,WAAWE,aAAa,GAAGb,gBAAgB;QAChDoB,OAAOR;QACPS,UAAUP;QACVQ,cAAcP,oBAAqB;IACrC;IAEA,MAAMQ,cAAc,CAACC,WACnB,OAAOA,aAAa,YAAYjB,KAAKkB,MAAM,GAAG,IAC1ClB,KAAKmB,OAAO,CAACF,YACbA;IACN,MAAMG,WAAW,CAACH,UAAoBI,SAAS,EAAE,GAC/C,CAAC,EAAEvB,OAAO,CAAC,EAAEuB,OAAO,EAAEL,YAAYC,YAAY,EAAE,CAAC;IAEnD,MAAMK,cAAcN,YAAYZ;IAChC,MAAMmB,eAAejC,OAAoB;IACzCD,UAAU;QACR,MAAMmC,YAAYD,aAAaE,OAAO;QACtC,IAAI,CAACD,aAAaf,kBAAkB;YAClC;QACF;QAEAe,UAAUE,SAAS,GAAG;IACxB,GAAG;QAACjB;QAAkBL;KAAU;IAEhC,OAAO;QACLA;QACAE;QACAK;QACAC;QACAe,aAAYV,QAAQ;YAClB,OAAO;gBACL,iBAAiBG,SAASH,UAAUtB;gBACpCiC,IAAIR,SAASH;gBACbY,QAAQZ,aAAab;gBACrBH;gBACAE;gBACA2B,iBAAiBpB;gBACjBqB,yBAAyB7B,YAAYQ;YACvC;QACF;QACAsB;YACE,OAAO;gBACLV;gBACAW,gBAAgB,CAACC;oBACftB,aAAaU,cAAcY,kBAAkB,SAAS;oBACtD,IAAI,OAAO9B,cAAc,YAAYJ,KAAKkB,MAAM,GAAG,GAAG;wBACpDZ,aAAaN,IAAI,CAACkC,gBAAgB;oBACpC,OAAO;wBACL5B,aAAa4B;oBACf;gBACF;gBACAhC;gBACAQ;YACF;QACF;QACAyB,kBAAiBlB,QAAQ;YACvB,OAAO;gBACL,mBAAmBG,SAASH;gBAC5BW,IAAIR,SAASH,UAAUtB;gBACvByC,MAAM;gBACNP,QAAQZ,aAAab;YACvB;QACF;QACAiC;YACE,OAAO;gBACLC,KAAKf;gBACLZ;YACF;QACF;IACF;AACF"}

package/dist/test-utils/IntersectionObserver.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : options.threshold ?? [];\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","constructor","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCAC,YACE,AAAOjB,QAAsC,EAC7CkB,UAAoC,CAAC,CAAC,CACtC;;QATFJ,uBAAAA,QAAAA,KAAAA;QACAK,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEAtB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGI,QAAQJ,IAAI,IAAI;QAC5B,IAAI,CAACK,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GACnBH,QAAQG,SAAS,IAAI,EAAE;QAE7B,IAAI,CAACvB,QAAQ,GAAG,IAAIwB;IACtB;AA8BF"}
+{"version":3,"sources":["../../src/test-utils/IntersectionObserver.ts"],"sourcesContent":["export class IntersectionObserverMock implements IntersectionObserver {\n  root: Document | Element | null;\n  rootMargin: string;\n  thresholds: readonly number[];\n\n  elements: Set<Element>;\n\n  constructor(\n    public callback: IntersectionObserverCallback,\n    options: IntersectionObserverInit = {}\n  ) {\n    this.root = options.root || null;\n    this.rootMargin = options.rootMargin || \"\";\n    this.thresholds =\n      typeof options.threshold === \"number\"\n        ? [options.threshold]\n        : (options.threshold ?? []);\n\n    this.elements = new Set();\n  }\n\n  observe(target: Element): void {\n    this.elements.add(target);\n\n    this.callback(this.takeRecords(), this);\n  }\n\n  unobserve(target: Element): void {\n    this.elements.delete(target);\n  }\n\n  takeRecords(): IntersectionObserverEntry[] {\n    return [...this.elements].map<IntersectionObserverEntry>((target) => ({\n      time: Date.now(),\n      target,\n      boundingClientRect: target.getBoundingClientRect(),\n      intersectionRatio: 0,\n      intersectionRect: target.getBoundingClientRect(),\n      isIntersecting: false,\n      rootBounds:\n        this.root && \"getBoundingClientRect\" in this.root\n          ? this.root.getBoundingClientRect()\n          : null,\n    }));\n  }\n\n  disconnect(): void {\n    this.elements.clear();\n  }\n}\n"],"names":["IntersectionObserverMock","observe","target","elements","add","callback","takeRecords","unobserve","delete","map","time","Date","now","boundingClientRect","getBoundingClientRect","intersectionRatio","intersectionRect","isIntersecting","rootBounds","root","disconnect","clear","constructor","options","rootMargin","thresholds","threshold","Set"],"mappings":";;;;;;;;;;;;;AAAA,OAAO,MAAMA;IAqBXC,QAAQC,MAAe,EAAQ;QAC7B,IAAI,CAACC,QAAQ,CAACC,GAAG,CAACF;QAElB,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACC,WAAW,IAAI,IAAI;IACxC;IAEAC,UAAUL,MAAe,EAAQ;QAC/B,IAAI,CAACC,QAAQ,CAACK,MAAM,CAACN;IACvB;IAEAI,cAA2C;QACzC,OAAO;eAAI,IAAI,CAACH,QAAQ;SAAC,CAACM,GAAG,CAA4B,CAACP,SAAY,CAAA;gBACpEQ,MAAMC,KAAKC,GAAG;gBACdV;gBACAW,oBAAoBX,OAAOY,qBAAqB;gBAChDC,mBAAmB;gBACnBC,kBAAkBd,OAAOY,qBAAqB;gBAC9CG,gBAAgB;gBAChBC,YACE,IAAI,CAACC,IAAI,IAAI,2BAA2B,IAAI,CAACA,IAAI,GAC7C,IAAI,CAACA,IAAI,CAACL,qBAAqB,KAC/B;YACR,CAAA;IACF;IAEAM,aAAmB;QACjB,IAAI,CAACjB,QAAQ,CAACkB,KAAK;IACrB;IAzCAC,YACE,AAAOjB,QAAsC,EAC7CkB,UAAoC,CAAC,CAAC,CACtC;;QATFJ,uBAAAA,QAAAA,KAAAA;QACAK,uBAAAA,cAAAA,KAAAA;QACAC,uBAAAA,cAAAA,KAAAA;QAEAtB,uBAAAA,YAAAA,KAAAA;aAGSE,WAAAA;QAGP,IAAI,CAACc,IAAI,GAAGI,QAAQJ,IAAI,IAAI;QAC5B,IAAI,CAACK,UAAU,GAAGD,QAAQC,UAAU,IAAI;QACxC,IAAI,CAACC,UAAU,GACb,OAAOF,QAAQG,SAAS,KAAK,WACzB;YAACH,QAAQG,SAAS;SAAC,GAClBH,QAAQG,SAAS,IAAI,EAAE;QAE9B,IAAI,CAACvB,QAAQ,GAAG,IAAIwB;IACtB;AA8BF"}

package/dist/test-utils/data-testid.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 declare module "react" {
     interface HTMLAttributes<T> extends React.AriaAttributes, React.DOMAttributes<T> {
         "data-testid"?: string | number;

package/dist/theme/useColorScheme.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { UseStateSetter } from "../types.js";
 /** @since 6.0.0 */
 export type ColorScheme = "light" | "dark";