overflow-guard-react 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Artur Marczyk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,354 @@
+<p align="center">
+  <img src="https://raw.githubusercontent.com/arturmarc/overflow-guard/main/docs/assets/overflow-guard-logo.svg" alt="Overflow Guard logo" width="88" />
+</p>
+
+# overflow-guard-react
+
+![Overflow Guard demo](https://raw.githubusercontent.com/arturmarc/overflow-guard/main/docs/assets/overflow-guard-demo.gif)
+
+`overflow-guard-react` helps React UI adapt when content stops fitting, instead of relying on viewport breakpoints, container breakpoints, or magic numbers.
+
+Repository: <https://github.com/arturmarc/overflow-guard>
+Website: <https://overflow-guard.vercel.app/>
+
+Wrap a piece of UI in `<OverflowGuard>`, and it tells you when content no longer fits the available space. You can then switch to a compact layout, collapse actions to icons, swap a full nav for a menu, or reveal a "Read more" affordance.
+
+## Why use it
+
+- Build around content, not guessed pixel values
+- Handle dynamic labels, localization, and data-driven content
+- Reuse the same component across narrow sidebars, wide panels, and resizable layouts
+- Respond to horizontal overflow, vertical overflow, or both
+
+## Installation
+
+```sh
+bun add overflow-guard-react
+npm install overflow-guard-react
+pnpm add overflow-guard-react
+yarn add overflow-guard-react
+```
+
+Peer dependencies:
+
+- `react`
+- `react-dom`
+
+`overflow-guard-react` is a client-side package. It measures rendered DOM with `ResizeObserver`, so use it from client components in frameworks that distinguish server and client rendering.
+
+## Quick start
+
+```tsx
+import { OverflowGuard } from 'overflow-guard-react'
+
+export function AdaptiveToolbar() {
+  return (
+    <OverflowGuard>
+      {(isOverflowing) => (
+        <div className={isOverflowing ? 'flex flex-wrap gap-2' : 'flex gap-2'}>
+          <button>Search</button>
+          <button>Share update</button>
+          <button>Launch flow</button>
+        </div>
+      )}
+    </OverflowGuard>
+  )
+}
+```
+
+## How it works
+
+`OverflowGuard` renders your content into a hidden measurement layer and compares its `scrollWidth` and `scrollHeight` against the available `clientWidth` and `clientHeight`.
+
+At runtime it exposes:
+
+- `isOverflowing`: `true` when content overflows on any axis
+- `overflowAxis`: `'none' | 'horizontal' | 'vertical' | 'both'`
+
+## Usage patterns
+
+### 1. Fallback mode
+
+Use fallback mode when the compact state should be a different tree entirely.
+
+```tsx
+import { OverflowGuard } from 'overflow-guard-react'
+import { Menu } from 'lucide-react'
+
+function Brand() {
+  return <div className="font-semibold">OverflowGuard</div>
+}
+
+export function ResponsiveNav() {
+  return (
+    <OverflowGuard
+      fallbackOn="horizontal"
+      fallback={
+        <nav className="flex items-center justify-between rounded-3xl border px-4 py-3">
+          <Brand />
+          <button aria-label="Open menu">
+            <Menu />
+          </button>
+        </nav>
+      }
+    >
+      <nav className="flex min-w-max items-center justify-between gap-3 rounded-3xl border px-4 py-3">
+        <Brand />
+        <div className="flex flex-nowrap gap-2">
+          <a href="/docs">Docs</a>
+          <a href="/recipes">Recipes</a>
+          <a href="/playground">Playground</a>
+          <a href="/pricing">Pricing</a>
+        </div>
+      </nav>
+    </OverflowGuard>
+  )
+}
+```
+
+### 2. Render prop mode
+
+Use the render prop when both states share most of the same structure and only behavior or presentation changes.
+
+```tsx
+import { OverflowGuard } from 'overflow-guard-react'
+
+function ActionButtons() {
+  return (
+    <>
+      <button>Search</button>
+      <button>Export brief</button>
+      <button>Share update</button>
+      <button>Launch flow</button>
+    </>
+  )
+}
+
+function ActionIcons() {
+  return (
+    <>
+      <button aria-label="Search">S</button>
+      <button aria-label="Export brief">E</button>
+      <button aria-label="Share update">U</button>
+      <button aria-label="Launch flow">L</button>
+    </>
+  )
+}
+
+export function ProjectActions() {
+  return (
+    <OverflowGuard>
+      {(isOverflowing, overflowAxis) => (
+        <section className="flex flex-col gap-3">
+          <div className="text-sm text-slate-500">overflow: {overflowAxis}</div>
+          <div className={isOverflowing ? 'flex flex-wrap gap-2' : 'flex gap-2'}>
+            <div className="min-w-max rounded-xl border px-3 py-2">
+              Sprint planning
+            </div>
+            <div className="flex gap-2">
+              {isOverflowing ? <ActionIcons /> : <ActionButtons />}
+            </div>
+          </div>
+        </section>
+      )}
+    </OverflowGuard>
+  )
+}
+```
+
+### 3. Custom hook mode
+
+Use `useOverflowGuard()` when nested children need access to the overflow state without threading props through every layer.
+
+The hook only returns the boolean state. If you need axis details, keep using the render prop at the boundary.
+
+```tsx
+import {
+  OverflowGuard,
+  useOverflowGuard,
+} from 'overflow-guard-react'
+
+function ToolbarSummary() {
+  const isOverflowing = useOverflowGuard()
+
+  return (
+    <span className="text-sm">
+      {isOverflowing ? 'Compact mode' : 'Expanded mode'}
+    </span>
+  )
+}
+
+function ToolbarActions() {
+  const isOverflowing = useOverflowGuard()
+
+  return isOverflowing ? (
+    <>
+      <button aria-label="Overview">O</button>
+      <button aria-label="Team">T</button>
+      <button aria-label="Docs">D</button>
+      <button aria-label="Support">S</button>
+    </>
+  ) : (
+    <>
+      <button>Overview</button>
+      <button>Team updates</button>
+      <button>Docs space</button>
+      <button>Support</button>
+    </>
+  )
+}
+
+export function NestedExample() {
+  return (
+    <OverflowGuard className="w-full">
+      {() => (
+        <div className="flex flex-col gap-3">
+          <ToolbarSummary />
+          <div className="flex min-w-0 gap-2">
+            <ToolbarActions />
+          </div>
+        </div>
+      )}
+    </OverflowGuard>
+  )
+}
+```
+
+### 4. Vertical overflow example
+
+Overflow handling is not limited to width. You can react to height constraints too.
+
+```tsx
+import { OverflowGuard } from 'overflow-guard-react'
+
+export function ReadMoreCard() {
+  return (
+    <OverflowGuard className="h-full" containerClassName="h-64">
+      {(isOverflowing, overflowAxis) => {
+        const showReadMore =
+          overflowAxis === 'vertical' || overflowAxis === 'both'
+
+        return (
+          <article className="flex h-full flex-col rounded-3xl border p-5">
+            <div className="mb-3">
+              <h2 className="font-semibold">Release notes draft</h2>
+            </div>
+            <p className={showReadMore ? 'max-h-24 overflow-hidden' : undefined}>
+              OverflowGuard can reveal a call to action when the content exceeds
+              the available height instead of letting the card blow up the
+              surrounding layout.
+            </p>
+            <div className="mt-4">
+              {showReadMore ? <button>Read more</button> : null}
+            </div>
+          </article>
+        )
+      }}
+    </OverflowGuard>
+  )
+}
+```
+
+## API
+
+### `OverflowGuard`
+
+`OverflowGuard` supports two mutually exclusive modes:
+
+- fallback mode: pass regular `children` plus `fallback`
+- render prop mode: pass a function as `children`
+
+### Common props
+
+These props are available in both modes.
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `children` | `ReactNode` or `(isOverflowing, overflowAxis) => ReactNode` | - | Regular children in fallback mode, or a render function in render-prop mode. |
+| `className` | `string` | - | Applied to the inner measured and visible content box. |
+| `style` | `CSSProperties` | - | Applied to the inner measured and visible content box. |
+| `containerClassName` | `string` | - | Applied to the outer wrapper that hosts the measurement and visible layers. |
+| `containerStyle` | `CSSProperties` | - | Applied to the outer wrapper. The component also sets `display: grid` and `position: relative`. |
+| `throttleTime` | `number` | `0` | Debounce-like delay, in milliseconds, before re-running overflow checks after resize observer updates. |
+| `...divProps` | `HTMLAttributes<HTMLDivElement>` | - | Standard div props such as `id`, `role`, `data-*`, and `aria-*`. These are forwarded to the inner content box. |
+
+### Fallback mode props
+
+| Prop | Type | Default | Description |
+| --- | --- | --- | --- |
+| `fallback` | `ReactNode` | required | Rendered when overflow matches `fallbackOn`. |
+| `fallbackOn` | `'horizontal' \| 'vertical' \| 'both'` | `'both'` | Controls which overflow axis activates the fallback. `'both'` means any overflow triggers it. |
+
+Example:
+
+```tsx
+<OverflowGuard fallback={<CompactNav />} fallbackOn="horizontal">
+  <FullNav />
+</OverflowGuard>
+```
+
+### Render prop signature
+
+```ts
+(isOverflowing: boolean, overflowAxis: OverflowAxis) => ReactNode
+```
+
+Parameters:
+
+| Parameter | Type | Description |
+| --- | --- | --- |
+| `isOverflowing` | `boolean` | `true` when content overflows on any axis. |
+| `overflowAxis` | `'none' \| 'horizontal' \| 'vertical' \| 'both'` | The measured overflow direction. |
+
+Example:
+
+```tsx
+<OverflowGuard>
+  {(isOverflowing, overflowAxis) => (
+    <div data-overflow-axis={overflowAxis}>
+      {isOverflowing ? <CompactLayout /> : <FullLayout />}
+    </div>
+  )}
+</OverflowGuard>
+```
+
+### `useOverflowGuard()`
+
+```ts
+const isOverflowing = useOverflowGuard()
+```
+
+Returns the nearest `OverflowGuard` boolean overflow state.
+
+Use it inside descendants rendered by `OverflowGuard` when you want nested components to react to the current compact or expanded state.
+
+## Exported types
+
+```ts
+import type {
+  FallbackOn,
+  OverflowAxis,
+  OverflowGuardProps,
+} from 'overflow-guard-react'
+```
+
+## Notes and gotchas
+
+- `fallback` and render-prop `children` are mutually exclusive.
+- `fallbackOn` can only be used together with `fallback`.
+- The hook returns only `boolean`. It does not expose the overflow axis.
+- `className` and `style` apply to the measured content box, so layout-affecting styles should usually live there.
+- The outer container always uses `display: grid` and `position: relative` so the visible layer can stack on top of the hidden measurement layer.
+- Overflow detection uses a small `+1` tolerance to avoid noisy flips from sub-pixel measurement differences.
+- The component includes loop protection for layouts that oscillate endlessly between states. In that case it locks into an overflowing state and warns in the console.
+
+## When to choose this over CSS queries
+
+Use `overflow-guard-react` when the decision depends on whether the rendered content actually fits:
+
+- action bars that collapse only when labels stop fitting
+- navigation that turns into a menu based on content length
+- translated UI where text length changes by locale
+- cards that reveal "Read more" only when body copy exceeds available height
+
+Use media or container queries when you already know the rule should be based on viewport or container size alone.

package/dist/index.cjs

@@ -0,0 +1 @@
+"use client";Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require(`react`),l=require(`use-resize-observer`);l=s(l);let u=require(`react/jsx-runtime`);function d(e,t){return e&&t?`both`:e?`horizontal`:t?`vertical`:`none`}function f(e,t){return t===`none`?!1:e===`both`?!0:t===e||t===`both`}function p(e,t){let n=null;return(...r)=>{n&&clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}var m=0,h=300,g=7,_=(0,c.createContext)({isOverflowing:!1,overflowAxis:`none`});function v(){return(0,c.useContext)(_).isOverflowing}function y(e){let{children:t,className:n,containerClassName:r,containerStyle:i,style:a,throttleTime:o=m}=e,s=(0,c.useRef)(null),[v,y]=(0,c.useState)(`none`),[x,S]=(0,c.useState)(!1),C=b(e),w=(0,c.useCallback)(()=>{let e=s.current;if(!e)return;let t=e.scrollWidth>e.clientWidth+1,n=e.scrollHeight>e.clientHeight+1;y(e=>{let r=d(t,n);return e===r?e:r})},[]),T=(0,c.useCallback)(()=>{requestAnimationFrame(w)},[w]),E=(0,c.useMemo)(()=>p(()=>{T()},o),[T,o]),{ref:D}=(0,l.default)({onResize:E}),{ref:O}=(0,l.default)({onResize:E}),k=(0,c.useCallback)(e=>{s.current=e,D(e),T()},[D,T]);(0,c.useLayoutEffect)(()=>{w()});let A=(0,c.useRef)(0),j=(0,c.useRef)(0);(0,c.useEffect)(()=>{let e=Date.now();if(j.current===0&&(j.current=e),e-j.current>h){A.current=1,j.current=e,S(!1);return}A.current+=1,A.current>g&&(console.warn(`OverflowGuard infinite loop detected. The component will stay in the overflowing state to stabilize rendering.`),S(!0),y(e=>e===`none`?`both`:e))});let M=x&&v===`none`?`both`:v,N=M!==`none`,P=typeof t==`function`?t(!1,`none`):t,F=`fallback`in e?e.fallbackOn??`both`:`both`,I=`fallback`in e&&f(F,M),L=typeof t==`function`?t(N,M):I?e.fallback:t,R={...a,minWidth:0,minHeight:0};return(0,u.jsxs)(`div`,{ref:O,"data-overflow-guard":`container`,className:r,style:{...i,display:`grid`,position:`relative`},children:[(0,u.jsx)(`div`,{"aria-hidden":`true`,"data-overflow-guard":`hidden-measurement-layer`,style:{position:`absolute`,inset:0,overflow:`auto`,pointerEvents:`none`,visibility:`hidden`,zIndex:-1},children:(0,u.jsx)(`div`,{...C,ref:k,"data-overflow-guard":`hidden-measurement-box`,className:n,style:R,children:(0,u.jsx)(_.Provider,{value:{isOverflowing:!1,overflowAxis:`none`},children:P})})}),(0,u.jsx)(`div`,{"data-overflow-guard":`visible-layer-${M}`,style:{gridArea:`1 / 1`,minWidth:0,minHeight:0},children:(0,u.jsx)(`div`,{...C,className:n,style:R,"data-overflow-guard":`visible-box`,children:(0,u.jsx)(_.Provider,{value:{isOverflowing:N,overflowAxis:M},children:L})})})]})}function b(e){let t={...e};return delete t.children,delete t.className,delete t.containerClassName,delete t.containerStyle,delete t.fallback,delete t.fallbackOn,delete t.style,delete t.throttleTime,t}exports.OverflowGuard=y,exports.useOverflowGuard=v;

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { OverflowGuard, useOverflowGuard, } from './overflow-guard';
+export type { FallbackOn, OverflowAxis, OverflowGuardProps, } from './overflow-guard';

package/dist/index.js

@@ -0,0 +1,124 @@
+"use client";
+import { createContext as e, useCallback as t, useContext as n, useEffect as r, useLayoutEffect as i, useMemo as a, useRef as o, useState as s } from "react";
+import c from "use-resize-observer";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/utils.ts
+function d(e, t) {
+	return e && t ? "both" : e ? "horizontal" : t ? "vertical" : "none";
+}
+function f(e, t) {
+	return t === "none" ? !1 : e === "both" ? !0 : t === e || t === "both";
+}
+function p(e, t) {
+	let n = null;
+	return (...r) => {
+		n && clearTimeout(n), n = setTimeout(() => {
+			e(...r);
+		}, t);
+	};
+}
+//#endregion
+//#region src/overflow-guard.tsx
+var m = 0, h = 300, g = 7, _ = e({
+	isOverflowing: !1,
+	overflowAxis: "none"
+});
+function v() {
+	return n(_).isOverflowing;
+}
+function y(e) {
+	let { children: n, className: v, containerClassName: y, containerStyle: x, style: S, throttleTime: C = m } = e, w = o(null), [T, E] = s("none"), [D, O] = s(!1), k = b(e), A = t(() => {
+		let e = w.current;
+		if (!e) return;
+		let t = e.scrollWidth > e.clientWidth + 1, n = e.scrollHeight > e.clientHeight + 1;
+		E((e) => {
+			let r = d(t, n);
+			return e === r ? e : r;
+		});
+	}, []), j = t(() => {
+		requestAnimationFrame(A);
+	}, [A]), M = a(() => p(() => {
+		j();
+	}, C), [j, C]), { ref: N } = c({ onResize: M }), { ref: P } = c({ onResize: M }), F = t((e) => {
+		w.current = e, N(e), j();
+	}, [N, j]);
+	i(() => {
+		A();
+	});
+	let I = o(0), L = o(0);
+	r(() => {
+		let e = Date.now();
+		if (L.current === 0 && (L.current = e), e - L.current > h) {
+			I.current = 1, L.current = e, O(!1);
+			return;
+		}
+		I.current += 1, I.current > g && (console.warn("OverflowGuard infinite loop detected. The component will stay in the overflowing state to stabilize rendering."), O(!0), E((e) => e === "none" ? "both" : e));
+	});
+	let R = D && T === "none" ? "both" : T, z = R !== "none", B = typeof n == "function" ? n(!1, "none") : n, V = "fallback" in e ? e.fallbackOn ?? "both" : "both", H = "fallback" in e && f(V, R), U = typeof n == "function" ? n(z, R) : H ? e.fallback : n, W = {
+		...S,
+		minWidth: 0,
+		minHeight: 0
+	};
+	return /* @__PURE__ */ u("div", {
+		ref: P,
+		"data-overflow-guard": "container",
+		className: y,
+		style: {
+			...x,
+			display: "grid",
+			position: "relative"
+		},
+		children: [/* @__PURE__ */ l("div", {
+			"aria-hidden": "true",
+			"data-overflow-guard": "hidden-measurement-layer",
+			style: {
+				position: "absolute",
+				inset: 0,
+				overflow: "auto",
+				pointerEvents: "none",
+				visibility: "hidden",
+				zIndex: -1
+			},
+			children: /* @__PURE__ */ l("div", {
+				...k,
+				ref: F,
+				"data-overflow-guard": "hidden-measurement-box",
+				className: v,
+				style: W,
+				children: /* @__PURE__ */ l(_.Provider, {
+					value: {
+						isOverflowing: !1,
+						overflowAxis: "none"
+					},
+					children: B
+				})
+			})
+		}), /* @__PURE__ */ l("div", {
+			"data-overflow-guard": `visible-layer-${R}`,
+			style: {
+				gridArea: "1 / 1",
+				minWidth: 0,
+				minHeight: 0
+			},
+			children: /* @__PURE__ */ l("div", {
+				...k,
+				className: v,
+				style: W,
+				"data-overflow-guard": "visible-box",
+				children: /* @__PURE__ */ l(_.Provider, {
+					value: {
+						isOverflowing: z,
+						overflowAxis: R
+					},
+					children: U
+				})
+			})
+		})]
+	});
+}
+function b(e) {
+	let t = { ...e };
+	return delete t.children, delete t.className, delete t.containerClassName, delete t.containerStyle, delete t.fallback, delete t.fallbackOn, delete t.style, delete t.throttleTime, t;
+}
+//#endregion
+export { y as OverflowGuard, v as useOverflowGuard };

package/dist/overflow-guard.d.ts

@@ -0,0 +1,23 @@
+import type { CSSProperties, HTMLAttributes, ReactNode } from 'react';
+export type OverflowAxis = 'none' | 'horizontal' | 'vertical' | 'both';
+export type FallbackOn = Exclude<OverflowAxis, 'none'>;
+type SharedProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
+    containerClassName?: string;
+    containerStyle?: CSSProperties;
+    throttleTime?: number;
+};
+type RenderProp = (isOverflowing: boolean, overflowAxis: OverflowAxis) => ReactNode;
+type FallbackModeProps = SharedProps & {
+    children?: ReactNode;
+    fallback: ReactNode;
+    fallbackOn?: FallbackOn;
+};
+type RenderPropModeProps = SharedProps & {
+    children?: RenderProp;
+    fallback?: never;
+    fallbackOn?: never;
+};
+export type OverflowGuardProps = FallbackModeProps | RenderPropModeProps;
+export declare function useOverflowGuard(): boolean;
+export declare function OverflowGuard(props: OverflowGuardProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,6 @@
+type OverflowAxisLike = "none" | "horizontal" | "vertical" | "both";
+type FallbackOnLike = Exclude<OverflowAxisLike, "none">;
+export declare function resolveOverflowAxis(horizontalOverflow: boolean, verticalOverflow: boolean): OverflowAxisLike;
+export declare function shouldUseFallback(fallbackOn: FallbackOnLike, overflowAxis: OverflowAxisLike): boolean;
+export declare function throttle<T extends (...args: unknown[]) => void>(fn: T, delay: number): (...args: Parameters<T>) => void;
+export {};

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "overflow-guard-react",
+  "version": "0.0.1",
+  "description": "React component and hook for content-aware responsive UI that adapts when content stops fitting, without breakpoints or magic numbers.",
+  "license": "MIT",
+  "author": "Artur Marczyk",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/arturmarc/overflow-guard.git",
+    "directory": "packages/overflow-guard-react"
+  },
+  "homepage": "https://github.com/arturmarc/overflow-guard/tree/main/packages/overflow-guard-react#readme",
+  "bugs": {
+    "url": "https://github.com/arturmarc/overflow-guard/issues"
+  },
+  "keywords": [
+    "react",
+    "overflow",
+    "responsive",
+    "content-aware",
+    "content-aware-ui",
+    "responsive-ui",
+    "adaptive-ui",
+    "layout",
+    "toolbar",
+    "navigation",
+    "menu",
+    "dynamic-content",
+    "localization",
+    "resize-observer",
+    "render-props",
+    "hook",
+    "truncate"
+  ],
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "dependencies": {
+    "use-resize-observer": "^9.1.0"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.0",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.0-beta.13",
+    "vitest": "^4.0.18"
+  }
+}