refactor(shared): consolidate inert helper into @clerk/shared/inert

Replace the duplicated per-package inert.ts utilities in @clerk/ui and
@clerk/headless with a single canonical helper at @clerk/shared/inert.
Adds @clerk/shared as @clerk/headless's first internal dependency and
externalizes it in the headless vite build.

Author: alexcarpenter

.changeset/shared-inert-props-helper.md

@@ -0,0 +1,5 @@
+---
+"@clerk/shared": patch
+---
+
+Add an `inertProps` helper (`@clerk/shared/inert`) that resolves the correct `inert` attribute value for the consumer's React major (React 19 dropped the `inert` attribute for falsy string values).

packages/headless/package.json

@@ -57,6 +57,7 @@
     "test": "vitest run"
   },
   "dependencies": {
+    "@clerk/shared": "workspace:^",
     "@floating-ui/react": "catalog:repo"
   },
   "devDependencies": {

packages/headless/src/primitives/tabs/tabs-panel.tsx

@@ -1,10 +1,10 @@
 'use client';
 
+import { inertProps } from '@clerk/shared/inert';
 import { useMergeRefs } from '@floating-ui/react';
 import React, { useRef } from 'react';
 
 import { useTransition } from '../../hooks/use-transition';
-import { inertProps } from '../../utils/inert';
 import { type ComponentProps, mergeProps, renderElement } from '../../utils/render-element';
 import { useTabsContext } from './tabs-context';
 

packages/headless/src/utils/index.ts

@@ -1,3 +1,2 @@
 export { cssVars } from './css-vars';
-export { inertProps } from './inert';
 export { type ComponentProps, mergeProps, type RenderProp, renderElement } from './render-element';

packages/headless/vite.config.ts

@@ -31,7 +31,7 @@ export default defineConfig({
       formats: ['es'],
     },
     rollupOptions: {
-      external: ['react', 'react-dom', 'react/jsx-runtime', '@floating-ui/react'],
+      external: ['react', 'react-dom', 'react/jsx-runtime', '@floating-ui/react', /^@clerk\/shared(\/.*)?$/],
       // Preserve module-level directives such as `'use client'`. Rollup otherwise
       // strips them when bundling (emitting a warning), which would drop the
       // client boundary for React Server Component consumers of the primitives.

packages/headless/src/utils/inert.ts packages/shared/src/inert.tspackages/headless/src/utils/inert.ts renamed to packages/shared/src/inert.ts

@@ -12,10 +12,10 @@ const major = parseInt(version, 10);
 const isModernReact = major >= 19 || major === 0;
 
 /**
- * Props to spread onto an element to apply (or omit) the `inert` attribute correctly
- * across React 18 and 19.
+ * Returns props to spread onto an element to apply (or omit) the `inert` attribute
+ * correctly across React 18 and 19.
  *
- * Returned as `Record<string, unknown>` on purpose: React 18's types reject `inert` and
+ * Typed as `Record<string, unknown>` on purpose: React 18's types reject `inert` and
  * React 19's type it as `boolean`, so an untyped spread sidesteps both type-level shapes
  * regardless of which `@types/react` a consumer compiles against.
  *

packages/ui/src/components/PricingTable/PricingTableMatrix.tsx

@@ -1,10 +1,10 @@
+import { inertProps } from '@clerk/shared/inert';
 import type { BillingPlanResource, BillingSubscriptionPlanPeriod } from '@clerk/shared/types';
 import * as React from 'react';
 
 import { Avatar } from '@/ui/elements/Avatar';
 import { SegmentedControl } from '@/ui/elements/SegmentedControl';
 import { colors } from '@/ui/utils/colors';
-import { inertProps } from '@/ui/utils/inert';
 
 import { usePlansContext } from '../../contexts';
 import {

packages/ui/src/components/devPrompts/KeylessPrompt/index.tsx

@@ -1,10 +1,10 @@
+import { inertProps } from '@clerk/shared/inert';
 import { useUser } from '@clerk/shared/react';
 // eslint-disable-next-line no-restricted-imports
 import { css } from '@emotion/react';
 import { type ReactNode, useId, useMemo, useState } from 'react';
 
 import { InternalThemeProvider } from '../../../styledSystem';
-import { inertProps } from '../../../utils/inert';
 import { handleDashboardUrlParsing } from '../shared';
 import { useDragToCorner } from './use-drag-to-corner';
 import { useRevalidateEnvironment } from './use-revalidate-environment';

packages/ui/src/elements/Collapsible.tsx

@@ -1,9 +1,9 @@
+import { inertProps } from '@clerk/shared/inert';
 import { type PropsWithChildren, useEffect, useState } from 'react';
 
 import { Box, descriptors, useAppearance } from '../customizables';
 import { usePrefersReducedMotion } from '../hooks';
 import type { ThemableCssProp } from '../styledSystem';
-import { inertProps } from '../utils/inert';
 
 type CollapsibleProps = PropsWithChildren<{
   open: boolean;