react-headings 3.4.0 → 4.0.0-next.1

package/README.md

@@ -9,304 +9,132 @@
   <a aria-label="NPM version" href="https://www.npmjs.com/package/react-headings">
     <img alt="" src="https://img.shields.io/npm/v/react-headings?style=for-the-badge">
   </a>
-  <a aria-label="Size" href="https://bundlephobia.com/package/react-headings">
-    <img alt="" src="https://img.shields.io/bundlephobia/minzip/react-headings?style=for-the-badge">
-  </a>
-  <a aria-label="Monthly downloads" href="https://www.npmjs.com/package/react-headings">
-    <img alt="" src="https://img.shields.io/npm/dm/react-headings?style=for-the-badge">
-  </a>
 </p>
 
-> Never worry about using the wrong heading level (`h1`, `h2`, etc.) in complex React apps!
-
-React-headings maintains the proper hierarchy of headings for improved accessibility and SEO, no matter the component structure, while you keep full control of what's rendered.
-
-References:
-
-- [WCAG 2.0 technique H69](https://www.w3.org/TR/WCAG20-TECHS/H69.html)
-- [Lighthouse SEO heading order audit](https://web.dev/heading-order/)
-
-## Table of contents
-
-- [Demos](#demos)
-- [Highlights](#highlights)
-- [Installation](#installation)
-- [Examples](#examples)
-- [API](#api)
-- [Changelog](#changelog)
-- [Contributing](#contributing)
-
-## Demos
+> Never write `h1`–`h6` again.
 
-- [Minimal](https://codesandbox.io/s/react-headings-minimal-4temt?file=/src/Demo.js)
-- [Custom component](https://codesandbox.io/s/react-headings-custom-component-l4bjb?file=/src/Demo.js)
-- [Advanced structure](https://codesandbox.io/s/react-headings-advanced-structure-uxk4p?file=/src/Demo.js)
+Search engines and screen readers rely on heading levels, but reusable components can't know how deep they'll be rendered. React Headings works out each level from your component tree, like the HTML [`headingoffset`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Global_attributes/headingoffset) proposal, but in any browser today.
 
-## Highlights
+## Features
 
-- Improves SEO and accessibility
 - Supports server-side rendering
-- Under 1 kB minified & gzipped
+- 384 bytes minified & brotlied
 - Typed with TypeScript
-- Fully tested
-- Works with any CSS solutions (Tailwind, CSS-in-JS, etc.)
-- Plays nicely with component libraries (Material UI, etc.)
-- Follows [semantic versioning](https://semver.org/)
+- Works with any CSS solution (Tailwind, CSS-in-JS, etc.)
+- Plays nicely with component libraries
 
-## Installation
+## Install
 
-```bash
+```sh
 npm install react-headings
 ```
 
-## Examples
-
-### Basic usage
-
-```jsx
-import React from "react";
-import { H, Section } from "react-headings";
-
-function App() {
-  return (
-    <Section component={<H>My hx</H>}>
-      <div>...</div>
-      <div>...</div>
-      <div>...</div>
-      <Section component={<H>My hx+1</H>}>
-        <div>...</div>
-        <div>...</div>
-        <div>...</div>
-      </Section>
-    </Section>
-  );
-}
-```
-
-### Advanced structure
+## Usage
 
-Child components inherit the current level of their parent:
+Use `H` for every heading. Wrap the content that belongs under a heading in `HeadingLevel`: headings inside render one level deeper.
 
-```jsx
-import React from "react";
-import { H, Section } from "react-headings";
+```tsx
+import { H, HeadingLevel } from "react-headings";
 
-function ParentComponent() {
+function Page() {
   return (
-    <Section component={<H>My hx</H>}>
-      <Section component={<H>My hx+1</H>}>
-        <Section component={<H>My hx+2</H>}>
-          <ChildComponent />
-        </Section>
-      </Section>
-    </Section>
+    <>
+      <H>Star Wars</H> {/* h1 */}
+      <HeadingLevel>
+        <Card title="Characters"> {/* h2 */}
+          <Card title="Luke" /> {/* h3 */}
+          <Card title="Leia" /> {/* h3 */}
+          <Card title="Han Solo" /> {/* h3 */}
+        </Card>
+      </HeadingLevel>
+    </>
   );
 }
 
-function ChildComponent() {
-  return (
-    <Section component={<H>My hy</H>}>
-      {/* The following heading would be a <h5> in the current context */}
-      <Section component={<H>My hy+1</H>}>
-        <p>...</p>
-      </Section>
-    </Section>
-  );
-}
-```
-
-### Styling
-
-A heading can be styled like any ordinary `<hx>` element since it accepts all the same props:
-
-```jsx
-import React from "react";
-import { H, Section } from "react-headings";
-
-function App() {
-  return (
-    <Section component={<H className="my-class">My hx</H>}>
-      ...
-    </Section>
-  );
-}
-```
-
-### Custom heading
-
-A heading can be as complex as we want:
-
-```jsx
-import React from "react";
-import { H, Section } from "react-headings";
-import MyIcon from "./MyIcon";
-
-function App() {
+function Card({ title, children }) {
   return (
-    <Section
-      component={
-        <div className="my-div">
-          <MyIcon className="my-icon" />
-          <H className="my-heading">My hx</H>
-        </div>
-      }
-    >
-      <div>...</div>
-      <div>...</div>
-      <div>...</div>
-    </Section>
+    <article>
+      <H>{title}</H>
+      <HeadingLevel>{children}</HeadingLevel>
+    </article>
   );
 }
 ```
 
-### Dialogs and portals
+`Card` doesn't know its level: it renders `h2` for Characters, `h3` for each character, and `h1` on its own.
 
-Content rendered elsewhere in the DOM (e.g. dialogs portalled to the end of `<body>`) can reset the heading hierarchy with the `level` prop.
-Nested sections continue from that level.
+### Dialogs
 
-```jsx
-import React from "react";
-import { Section, H } from "react-headings";
+Portaled elements, like dialogs, aren't part of the page outline. Use `level` to start their headings at `h1`:
 
-function App() {
-  return (
-    <Section component={<H>My H1</H>}>
-      <Section component={<H>My H2</H>}>
-        <Dialog>
-          <Section level={1} component={<H>My dialog title (H1)</H>}>
-            My dialog content
-          </Section>
-        </Dialog>
-      </Section>
-    </Section>
-  );
-}
+```tsx
+<Dialog>
+  <HeadingLevel level={1}>
+    <H>Delete file?</H> {/* h1 */}
+  </HeadingLevel>
+</Dialog>
 ```
 
-### Using component libraries
-
-Leveraging `Component` and `level` from the context allows the use of component libraries.
-Here's an example with [Material UI](https://material-ui.com/api/typography/):
-
-```jsx
-import React from "react";
-import { useLevel } from "react-headings";
-import { Typography } from "@material-ui/core";
+### Styling
 
-function MyHeading(props) {
-  const { Component } = useLevel();
+React Headings only picks the tag. Style headings however you like, or use `render` for your own component:
 
-  return <Typography component={Component} {...props} />;
-}
+```tsx
+<H render={(props, { tag }) => <Text as={tag} size="lg" {...props} />}>
+  Title
+</H>
 ```
 
 ## API
 
-### `<H>` component
-
-Renders a `<h1>`, `<h2>`, `<h3>`, `<h4>`, `<h5>` or `<h6>` depending on the current level.
-
-#### Props
-
-| Name       | Type       | Required | Description                                                     |
-| ---------- | ---------- | -------- | --------------------------------------------------------------- |
-| `render`   | `function` | No       | Override with a custom heading. Has precedence over `children`. |
-| `children` | `node`     | No       | The content of the heading. Usually the title.                  |
-
-Any other props will be passed to the heading element.
-
-#### Example
-
-```jsx
-import React from "react";
-import { H } from "react-headings";
-
-function Example1() {
-  return <H>This is my title</H>;
-}
-
-function Example2() {
-  return (
-    <H render={({ level, Component }) => <Component>My h{level}</Component>} />
-  );
-}
-```
-
-### `<Section>` component
+### `Heading` / `H`
 
-Creates a new section (a heading and its level).
+Renders `h1`–`h6` based on the current level: `h1` by default, and never deeper than `h6`.
 
-#### Props
+Accepts every `h1` prop and a `ref`, plus:
 
-| Name        | Type   | Required | Description                                                                     |
-| ----------- | ------ | -------- | ------------------------------------------------------------------------------- |
-| `component` | `node` | Yes      | The heading component. Can be anything but best used in combination with `<H>`. |
-| `children`  | `node` | No       | The content of the new level.                                                   |
-| `level`     | `1-6`  | No       | Renders `component` at this level instead of the current one.                   |
+| Prop     | Type                                         | Description                                                                                                 |
+| -------- | -------------------------------------------- | ----------------------------------------------------------------------------------------------------------- |
+| `render` | `(props, { level, tag }) => ReactElement`    | Renders your own element. Spread `props` on it (includes `children` and `ref`). |
 
-#### Example
+`H` is the same component as `Heading`. Pick one name per project.
 
-```jsx
-import React from "react";
-import { Section, H } from "react-headings";
-
-function Example1() {
-  return (
-    <Section component={<H>This is my title</H>}>
-      This is my content
-    </Section>
-  );
-}
+### `HeadingLevel`
 
-function Example2() {
-  return (
-    <Section
-      component={
-        <div>
-          <div>
-            <H>This is my title</H>
-          </div>
-        </div>
-      }
-    >
-      This is my content
-    </Section>
-  );
-}
-```
+| Prop     | Type     | Default | Description                                      |
+| -------- | -------- | ------- | ------------------------------------------------ |
+| `offset` | `number` | `1`     | Levels added to headings inside.                 |
+| `level`  | `number` |         | Level of headings inside, ignoring parents.      |
 
-### `useLevel` hook
+Pass `offset` or `level`, not both. Nested offsets add up. `offset={0}` adds nothing, which is useful for conditional nesting.
 
-Returns an object containing the current `level` and current `Component`.
+Invalid values never throw: fractions round down, and anything else invalid counts as `offset={0}` or `level={1}`.
 
-#### Arguments
+### `useHeadingLevel()`
 
-None
+Returns the `level` (`1`–`6`) and `tag` (`"h1"`–`"h6"`) a `Heading` would render here.
 
-#### Returns
+## Development warnings
 
-| Name        | Type                                                     | Description                           |
-| ----------- | -------------------------------------------------------- | ------------------------------------- |
-| `level`     | `1` \| `2` \| `3` \| `4` \| `5` \| `6`                   | The current level.                    |
-| `Component` | `"h1"` \| `"h2"` \| `"h3"` \| `"h4"` \| `"h5"` \| `"h6"` | The current component. Same as level. |
+In development, React Headings warns in the console when:
 
-#### Example
+- a level is skipped, like an `h3` with no `h2` above it,
+- a level goes past 6,
+- an `offset` or `level` is invalid.
 
-```jsx
-import React from "react";
-import { useLevel } from "react-headings";
+Warnings are removed from production builds. Vite and webpack show them automatically in dev mode. In plain Node or Jest, run with `--conditions=development`.
 
-function Example(props) {
-  const { level, Component } = useLevel();
+## Server Components
 
-  return <Component {...props}>This is a h{level}</Component>;
-}
-```
+Works in Server Components, including Server Components nested inside `HeadingLevel`. Only `useHeadingLevel()` needs a Client Component.
 
-## Changelog
+## Differences from `headingoffset`
 
-For a list of changes and releases, see the [changelog](https://github.com/alexnault/react-headings/releases).
+- Levels follow the React tree, not the DOM, so portaled content inherits its level.
+- `Heading` always starts at level 1, while a native `h2` starts at 2.
+- Levels stop at 6, while `headingoffset` goes up to 9 through `aria-level`.
+- The output is a real `h1`–`h6` tag, so CSS like `h2 { … }` matches the level.
 
-## Contributing
+## License
 
-Found a bug, have a question or looking to improve react-headings? Open an [issue](https://github.com/alexnault/react-headings/issues/new), start a [discussion](https://github.com/alexnault/react-headings/discussions/new) or submit a [PR](https://github.com/alexnault/react-headings/fork)!
+MIT

package/dist/index.d.ts

@@ -1,41 +1,40 @@
-import React from "react";
+import type { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from "react";
 type Level = 1 | 2 | 3 | 4 | 5 | 6;
-type Heading = `h${Level}`;
-type LevelContextValue = {
-    level: Level;
-    Component: Heading;
+type Tag = `h${Level}`;
+export type HeadingProps = ComponentPropsWithoutRef<"h1"> & {
+    render?: (props: ComponentPropsWithRef<"h1">, heading: {
+        level: Level;
+        tag: Tag;
+    }) => ReactElement;
 };
+export type HeadingLevelProps = {
+    children?: ReactNode;
+} & ({
+    offset?: number;
+    level?: never;
+} | {
+    level: number;
+    offset?: never;
+});
 /**
- * Returns the current heading and level.
+ * Renders an `h1`–`h6` according to the current level.
  */
-export declare function useLevel(): LevelContextValue;
-type HProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement> & {
-    render?: (context: LevelContextValue) => React.ReactElement;
-};
+export declare const Heading: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & {
+    render?: (props: ComponentPropsWithRef<"h1">, heading: {
+        level: Level;
+        tag: Tag;
+    }) => ReactElement;
+} & import("react").RefAttributes<HTMLHeadingElement>>;
+export { Heading as H };
 /**
- * Renders a dynamic HTML heading (h1, h2, etc.) or custom component according to the current level.
+ * Renders headings inside `offset` levels deeper (default 1), or at `level`
+ * regardless of ancestors.
  */
-export declare const H: React.ForwardRefExoticComponent<Omit<HProps, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-type LevelProps = {
-    level?: Level;
-    children?: React.ReactNode;
-};
+export declare function HeadingLevel({ offset, level, children, }: HeadingLevelProps): import("react").JSX.Element;
 /**
- * Renders `children` 1 level down, or at `level` when provided.
- * @param level The level to render `children` at
- * @param children The children to render
+ * Returns the level and tag a `Heading` would render at this position.
  */
-declare function Level({ level: desiredLevel, children }: LevelProps): JSX.Element;
-type SectionProps = {
-    component: React.ReactNode;
-    children?: React.ReactNode;
-    level?: Level;
+export declare function useHeadingLevel(): {
+    level: Level;
+    tag: Tag;
 };
-/**
- * Renders `component` in the current level and `children` in the next level.
- * @param component A component containing a heading
- * @param children The children in the next level
- * @param level A level to render `component` at instead of the current one (e.g. for dialogs and portals)
- */
-export declare function Section({ component, children, level, }: SectionProps): JSX.Element;
-export {};

package/dist/index.development.js

@@ -0,0 +1,108 @@
+"use client";
+
+// src/index.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var LevelContext = createContext(1);
+function getNormalizedOffset(offset) {
+  return Number.isFinite(offset) && offset > 0 ? Math.floor(offset) : 0;
+}
+function getNormalizedLevel(level) {
+  return Number.isFinite(level) && level > 1 ? Math.floor(level) : 1;
+}
+var Heading = forwardRef(
+  function({ render, ...props }, ref) {
+    let { level, tag } = useHeadingLevel();
+    return useHeadingChecks(), render ? render({ ...props, ref }, { level, tag }) : /* @__PURE__ */ jsx(tag, { ref, ...props });
+  }
+);
+Heading.displayName = "Heading";
+function HeadingLevel({
+  offset = 1,
+  level,
+  children
+}) {
+  let parentLevel = useContext(LevelContext), isReset = level !== void 0, normalizedOffset = getNormalizedOffset(offset), innerLevel = isReset ? getNormalizedLevel(level) : parentLevel + normalizedOffset;
+  return useInvalidPropWarning(
+    isReset ? "level" : "offset",
+    isReset ? level : offset,
+    isReset ? innerLevel : normalizedOffset
+  ), children = /* @__PURE__ */ jsx(
+    SkippedLevelScope,
+    {
+      firstLevel: isReset ? innerLevel : parentLevel + 1,
+      isIsolated: isReset,
+      isPassthrough: !isReset && normalizedOffset === 0,
+      children
+    }
+  ), /* @__PURE__ */ jsx(LevelContext.Provider, { value: innerLevel, children });
+}
+function useHeadingLevel() {
+  let level = Math.min(useContext(LevelContext), 6);
+  return { level, tag: `h${level}` };
+}
+var ScopeContext = /* @__PURE__ */ createContext(null);
+function createScopeRegistry(firstLevel, parentRegistry) {
+  let headingLevels = /* @__PURE__ */ new Map(), unregisterFromParent, isCheckScheduled = !1, hasWarned = !1;
+  function warnIfLevelSkipped() {
+    if (isCheckScheduled = !1, hasWarned || headingLevels.size === 0) return;
+    let presentLevels = new Set(headingLevels.values()), deepestLevel = Math.max(...presentLevels);
+    for (let level = firstLevel; level < deepestLevel; level++)
+      if (!presentLevels.has(level)) {
+        hasWarned = !0, console.warn(
+          `react-headings: Skipped heading level ${level}: found a level ${deepestLevel} heading but no level ${level} heading.`
+        );
+        return;
+      }
+  }
+  function scheduleCheck() {
+    isCheckScheduled || (isCheckScheduled = !0, queueMicrotask(warnIfLevelSkipped));
+  }
+  return {
+    register(level) {
+      let token = {};
+      return headingLevels.set(token, level), headingLevels.size === 1 && (unregisterFromParent = parentRegistry?.register(firstLevel)), scheduleCheck(), () => {
+        headingLevels.delete(token), headingLevels.size === 0 && (unregisterFromParent?.(), unregisterFromParent = void 0), scheduleCheck();
+      };
+    }
+  };
+}
+function SkippedLevelScope({
+  firstLevel,
+  isIsolated,
+  isPassthrough,
+  children
+}) {
+  let parentRegistry = useContext(ScopeContext), registry = useMemo(
+    () => isPassthrough ? parentRegistry : createScopeRegistry(firstLevel, isIsolated ? null : parentRegistry),
+    [firstLevel, isIsolated, isPassthrough, parentRegistry]
+  );
+  return /* @__PURE__ */ jsx(ScopeContext.Provider, { value: registry, children });
+}
+function useHeadingChecks() {
+  let level = useContext(LevelContext), scopeRegistry = useContext(ScopeContext);
+  useEffect(() => {
+    level > 6 && console.warn(
+      `react-headings: Heading level ${level} exceeds 6 and was clamped to h6.`
+    );
+  }, [level]), useEffect(() => scopeRegistry?.register(level), [scopeRegistry, level]);
+}
+function useInvalidPropWarning(prop, value, normalizedValue) {
+  useEffect(() => {
+    value !== normalizedValue && console.warn(
+      `react-headings: HeadingLevel received invalid ${prop} ${value}, treated as ${normalizedValue}.`
+    );
+  }, [prop, value, normalizedValue]);
+}
+export {
+  Heading as H,
+  Heading,
+  HeadingLevel,
+  useHeadingLevel
+};

package/dist/index.js

@@ -1,80 +1,43 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Section = exports.H = exports.useLevel = void 0;
-var react_1 = __importDefault(require("react"));
-var LevelContext = react_1.default.createContext({
-    level: 1,
-    Component: "h1",
-});
-/**
- * Returns the current heading and level.
- */
-function useLevel() {
-    return react_1.default.useContext(LevelContext);
+"use client";
+
+// src/index.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var LevelContext = createContext(1);
+function getNormalizedOffset(offset) {
+  return Number.isFinite(offset) && offset > 0 ? Math.floor(offset) : 0;
 }
-exports.useLevel = useLevel;
-/**
- * Renders a dynamic HTML heading (h1, h2, etc.) or custom component according to the current level.
- */
-exports.H = react_1.default.forwardRef(function H(_a, forwardedRef) {
-    var render = _a.render, props = __rest(_a, ["render"]);
-    var context = useLevel();
-    if (render) {
-        return render(context);
-    }
-    return react_1.default.createElement(context.Component, __assign({ ref: forwardedRef }, props));
-});
-/**
- * Renders `children` 1 level down, or at `level` when provided.
- * @param level The level to render `children` at
- * @param children The children to render
- */
-function Level(_a) {
-    var desiredLevel = _a.level, children = _a.children;
-    var currentLevel = useLevel().level;
-    var level = desiredLevel !== null && desiredLevel !== void 0 ? desiredLevel : Math.min(currentLevel + 1, 6);
-    var value = {
-        level: level,
-        Component: "h".concat(level),
-    };
-    return (react_1.default.createElement(LevelContext.Provider, { value: value }, children));
+function getNormalizedLevel(level) {
+  return Number.isFinite(level) && level > 1 ? Math.floor(level) : 1;
 }
-/**
- * Renders `component` in the current level and `children` in the next level.
- * @param component A component containing a heading
- * @param children The children in the next level
- * @param level A level to render `component` at instead of the current one (e.g. for dialogs and portals)
- */
-function Section(_a) {
-    var component = _a.component, children = _a.children, level = _a.level;
-    var content = (react_1.default.createElement(react_1.default.Fragment, null,
-        component,
-        react_1.default.createElement(Level, null, children)));
-    return level ? react_1.default.createElement(Level, { level: level }, content) : content;
+var Heading = forwardRef(
+  function({ render, ...props }, ref) {
+    let { level, tag } = useHeadingLevel();
+    return render ? render({ ...props, ref }, { level, tag }) : /* @__PURE__ */ jsx(tag, { ref, ...props });
+  }
+);
+Heading.displayName = "Heading";
+function HeadingLevel({
+  offset = 1,
+  level,
+  children
+}) {
+  let parentLevel = useContext(LevelContext), isReset = level !== void 0, normalizedOffset = getNormalizedOffset(offset), innerLevel = isReset ? getNormalizedLevel(level) : parentLevel + normalizedOffset;
+  return /* @__PURE__ */ jsx(LevelContext.Provider, { value: innerLevel, children });
 }
-exports.Section = Section;
+function useHeadingLevel() {
+  let level = Math.min(useContext(LevelContext), 6);
+  return { level, tag: `h${level}` };
+}
+export {
+  Heading as H,
+  Heading,
+  HeadingLevel,
+  useHeadingLevel
+};

package/package.json

@@ -1,27 +1,37 @@
 {
   "name": "react-headings",
-  "version": "3.4.0",
-  "description": "HTML headings with auto-incrementing levels for WCAG compliance.",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "version": "4.0.0-next.1",
+  "type": "module",
+  "description": "Dynamic heading levels for React. A polyfill of the HTML headingoffset proposal.",
   "author": "Alex Nault",
   "keywords": [
     "react",
     "heading",
-    "auto",
+    "headings",
+    "headingoffset",
+    "headingreset",
     "level",
+    "outline",
     "accessibility",
     "a11y",
     "wcag",
-    "h1",
-    "header",
-    "title"
+    "h1"
   ],
   "license": "MIT",
   "repository": "https://github.com/alexnault/react-headings",
   "homepage": "https://github.com/alexnault/react-headings#readme",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "development": "./dist/index.development.js",
+      "production": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "scripts": {
-    "build": "rm -rf ./dist && tsc",
+    "build": "rm -rf dist && node scripts/build.js && tsc -p tsconfig.build.json",
+    "typecheck": "tsc",
     "format": "prettier ./ --write",
     "lint": "eslint ./ --max-warnings=0",
     "size": "size-limit",
@@ -32,26 +42,28 @@
   ],
   "sideEffects": false,
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+    "react": "^18.0.0 || ^19.0.0"
   },
   "devDependencies": {
-    "@size-limit/preset-small-lib": "^7.0.8",
-    "@testing-library/react": "^13.4.0",
-    "@types/react": "^18.3.28",
-    "@types/react-dom": "^18.3.7",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
-    "@vitest/coverage-c8": "^0.30.1",
-    "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "^7.32.0",
-    "eslint-config-prettier": "^8.10.2",
-    "jsdom": "^21.1.2",
-    "prettier": "^2.8.8",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "@eslint/js": "^10.0.1",
+    "@size-limit/preset-small-lib": "^14.3.0",
+    "@testing-library/dom": "^10.4.2",
+    "@testing-library/react": "^16.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitest/coverage-v8": "^5.0.5",
+    "conventional-changelog-conventionalcommits": "^9.3.1",
+    "esbuild": "^0.28.2",
+    "eslint": "^10.14.0",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "jsdom": "^30.1.3",
+    "prettier": "^3.9.10",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
     "semantic-release": "^25.0.3",
-    "size-limit": "^7.0.8",
-    "typescript": "^4.9.5",
-    "vitest": "^0.30.1"
+    "size-limit": "^14.3.0",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.72.1",
+    "vitest": "^5.0.5"
   }
 }