react-headings 3.4.0 → 4.0.0-next.2

package/README.md

@@ -9,304 +9,121 @@
   <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/)
+> Never write `h1`–`h6` again.
 
-## Table of contents
+Hardcoded heading levels break accessibility and SEO when components are reused. React Headings fixes this by computing each level from your component tree.
 
-- [Demos](#demos)
-- [Highlights](#highlights)
-- [Installation](#installation)
-- [Examples](#examples)
-- [API](#api)
-- [Changelog](#changelog)
-- [Contributing](#contributing)
+## Features
 
-## Demos
-
-- [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)
-
-## Highlights
-
-- Improves SEO and accessibility
 - Supports server-side rendering
-- Under 1 kB minified & gzipped
+- 370 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
-
-Child components inherit the current level of their parent:
-
-```jsx
-import React from "react";
-import { H, Section } from "react-headings";
-
-function ParentComponent() {
-  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>
-  );
-}
-
-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
+## Usage
 
-A heading can be styled like any ordinary `<hx>` element since it accepts all the same props:
+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 App() {
+function Page() {
   return (
-    <Section component={<H className="my-class">My hx</H>}>
-      ...
-    </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>
+    </>
   );
 }
-```
 
-### 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";
+### `HeadingLevel`
 
-function Example1() {
-  return (
-    <Section component={<H>This is my title</H>}>
-      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.      |
 
-function Example2() {
-  return (
-    <Section
-      component={
-        <div>
-          <div>
-            <H>This is my title</H>
-          </div>
-        </div>
-      }
-    >
-      This is my content
-    </Section>
-  );
-}
-```
-
-### `useLevel` hook
-
-Returns an object containing the current `level` and current `Component`.
-
-#### Arguments
+Pass `offset` or `level`, not both. Nested offsets add up. `offset={0}` adds nothing, which is useful for conditional nesting.
 
-None
+Invalid values never throw: they're ignored with a warning, as if not passed. `null` counts as not passed, without a warning.
 
-#### Returns
+### `useHeadingLevel()`
 
-| 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. |
+Returns the `level` (`1`–`6`) and `tag` (`"h1"`–`"h6"`) a `Heading` would render here.
 
-#### Example
+## Development warnings
 
-```jsx
-import React from "react";
-import { useLevel } from "react-headings";
-
-function Example(props) {
-  const { level, Component } = useLevel();
-
-  return <Component {...props}>This is a h{level}</Component>;
-}
-```
+In development, React Headings warns in the console when:
 
-## Changelog
+- a level is skipped,
+- a level goes past 6,
+- an `offset` or `level` is invalid.
 
-For a list of changes and releases, see the [changelog](https://github.com/alexnault/react-headings/releases).
+Warnings are removed from production builds. Vite and webpack show them automatically in dev mode. In plain Node, run with `--conditions=development`.
 
-## 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,104 @@
+"use client";
+
+// src/index.tsx
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var LevelContext = createContext(1);
+function isValidOffset(offset) {
+  return Number.isInteger(offset) && offset >= 0;
+}
+function isValidLevel(level) {
+  return Number.isInteger(level) && 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 = isValidLevel(level), isOffsetValid = isValidOffset(offset), innerLevel = isReset ? level : parentLevel + (isOffsetValid ? offset : 1);
+  return useInvalidPropWarning("offset", offset, isOffsetValid), useInvalidPropWarning("level", level, isReset), children = /* @__PURE__ */ jsx(
+    SkippedLevelScope,
+    {
+      firstLevel: isReset ? innerLevel : parentLevel + 1,
+      isIsolated: isReset,
+      isPassthrough: !isReset && offset === 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, isValid) {
+  useEffect(() => {
+    value != null && !isValid && console.warn(
+      `react-headings: HeadingLevel received invalid ${prop} ${value}, ignored.`
+    );
+  }, [prop, value, isValid]);
+}
+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 isValidOffset(offset) {
+  return Number.isInteger(offset) && 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 isValidLevel(level) {
+  return Number.isInteger(level) && 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 = isValidLevel(level), isOffsetValid = isValidOffset(offset), innerLevel = isReset ? level : parentLevel + (isOffsetValid ? offset : 1);
+  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,36 @@
 {
   "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.2",
+  "type": "module",
+  "description": "Dynamic heading levels for React.",
   "author": "Alex Nault",
   "keywords": [
     "react",
     "heading",
-    "auto",
+    "headings",
     "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",
+  "types": "./dist/index.d.ts",
+  "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 +41,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"
   }
 }