@inkra/react 0.6.0 → 0.8.0

package/README.md

@@ -176,6 +176,39 @@ All standard `button` props, including `disabled`, `name`, `value`, `form`, `ari
 
 `Input` defaults to an underline appearance, with explicit `outline`, `soft` and `ghost` variants. It supports `startIcon`, `endIcon`, `prefix`, `suffix`, `clearable`, `loading`, `startAction`, `endAction`, `fullWidth` and logical `textAlign`. Use `onValueChange` for edits and clearing; native `onChange` does not receive fabricated clear events. `Field` connects labels, descriptions and errors.
 
+`Textarea` respects an explicit native `rows`, including `rows={1}`. Omit both
+`rows` and `autoSize` to retain the existing sm/md/lg minimum heights. Enable
+`autoSize` to grow and shrink with content, including lines wrapped by the actual
+container width:
+
+```tsx
+import { Textarea } from '@inkra/react/form';
+import type { TextareaAutoSizeOptions } from '@inkra/react/form';
+
+<Textarea rows={1} aria-label="Single-line initial height" />
+<Textarea autoSize={{ minRows: 1, maxRows: 6 }} aria-label="Note" />
+<Textarea autoSize rows={2} aria-label="At least two rows, unlimited growth" />
+```
+
+`autoSize` accepts `boolean | TextareaAutoSizeOptions` and defaults to `false`.
+Its `minRows` falls back to `rows`, then 1; omit `maxRows` for unlimited growth.
+Both limits accept positive safe integers; invalid values use these defaults and
+`maxRows` below `minRows` is raised to `minRows`. The limit counts visible text
+rows, including soft wraps, rather than newline characters or input length.
+Above the maximum, the native editor scrolls internally; deleting text shrinks it.
+Controlled value updates, native form reset, width and font changes remeasure
+without emitting change events or replacing the native control. Empty editors
+size from their minimum rows rather than their placeholder text.
+
+Automatic sizing owns `height`, `minHeight`, `maxHeight` and vertical overflow;
+it takes precedence over inline height and `resize="vertical"`, hiding the manual
+handle. With automatic sizing disabled, manual resizing keeps its existing
+behavior (an explicit `rows` supplies its minimum). Row limits apply only to the
+editor: the character counter retains its separate footer, even while its
+automatic indicator is hidden. On the server, native `rows` provides the initial
+height; existing multi-line content is measured after hydration. Avoid CSS
+`!important` height constraints when enabling automatic sizing.
+
 `InputNumber` places decrease and increase buttons on either side of a centered numeric input, with no clear button. Keyboard deletion produces `null`; decimal stepping and out-of-range validation remain native. `Slider` supports single/range values, horizontal/vertical layout and `standard` or `inset` appearance.
 
 `InputNumber` supports Shift-click and Shift-arrow increments of 10 by default.
@@ -328,7 +361,7 @@ working examples, live property tabs and per-component API/accessibility notes.
 | Drawer | Dialog parts plus section layout, four `Content.direction` values and token/custom `size`; focus trap, Escape and return focus, no swipe gesture API |
 | DatePicker | Calendar/Popover composition; single/range local dates, controlled/default values, clear, form fields and localized labels; no UTC conversion |
 | TimePicker | Native time input with clear, disabled/readOnly, min/max/step and optional seconds; browser/OS controls the native presentation |
-| Pagination | Page count/current page, boundary actions and ellipses; buttons change local state rather than pretending to navigate URLs |
+| Pagination | Page count/current page, boundary actions and ellipses; optional page-size selection, button variants, logical alignment and wrapping |
 | Empty | Optional `Root`, `Icon`, `Title`, `Description`, `Actions`; no mandatory card or live-region role |
 | ToggleGroup | `Root` and `Item`; array values for single/multiple toggles, roving focus and `aria-pressed`, not tabs |
 | Command | cmdk-backed search, grouped commands, empty/disabled states and optional modal composition |
@@ -338,6 +371,49 @@ working examples, live property tabs and per-component API/accessibility notes.
 | Steps | Ordered `items`, `current`, orientation and optional `onStepChange`; status and disabled steps |
 | Timeline | Ordered `items` with date/title/description/content, semantic `dateTime` and horizontal/vertical orientation |
 
+### Pagination page sizes
+
+```tsx
+const [page, setPage] = useState(1);
+const [pageSize, setPageSize] = useState(20);
+<Pagination totalPages={Math.ceil(itemCount / pageSize)}
+  page={page} onPageChange={setPage}
+  pageSize={pageSize} onPageSizeChange={setPageSize}
+  pageSizeOptions={[10, 20, 50]} hideOnSinglePage
+  variant="outline" align="end" wrap />
+```
+
+The caller computes `totalPages` and slices or fetches its data. `pageSize` is
+controlled; `defaultPageSize` initializes an uncontrolled size (default `10`).
+Only positive safe integers are accepted. Invalid sizes fall back to `10`;
+invalid options are ignored, duplicates removed and options sorted numerically.
+The current size is retained in a nonempty option list. Omit `pageSizeOptions`
+or provide no valid options to hide the selector.
+
+Selecting a different size first calls `onPageSizeChange(size)`, then requests
+`onPageChange(1)` when the current page exceeds one. Each uncontrolled state
+updates independently; controlled state changes only when the parent accepts
+the request. Rendering, changing totals or options, and clamping do not emit
+user callbacks. `hideOnSinglePage` hides page controls for zero or one page while
+retaining the size selector.
+
+`variant` uses the Button variants (default `ghost`). `align` accepts logical
+`start | center | end` (default `start`); `wrap` defaults to `false` and retains
+local horizontal scrolling. The size selector reuses Select, inherits disabled
+state and direction, and uses InkraProvider labels. Override
+`labels.pageSize` (accessible name) and `labels.pageSizeOption(size)` (visible
+option text) for application-specific copy. `simple`, `renderPage` and
+`renderSummary` compose with these options.
+
+分页容量由调用方计算总页数并切分或请求数据。`pageSize` 为受控值，
+`defaultPageSize` 为非受控初值，默认 10；只接收正安全整数。非法容量回退为
+10，非法选项忽略，选项去重并排序，有效列表保留当前容量。省略或提供空的有效
+选项列表时不显示选择器。切换容量先通知 `onPageSizeChange`，当前页大于 1 时
+再请求 `onPageChange(1)`；受控值由父组件决定是否接受。渲染、总页数及选项变化
+不触发交互回调。`hideOnSinglePage` 隐藏翻页按钮但保留容量选择器；`align`
+按逻辑方向对齐，`wrap` 允许换行，默认仍为局部横滚。容量选择复用 Select，
+继承禁用、方向和语言设置，可用 `labels.pageSize/pageSizeOption` 覆盖文案。
+
 ## Utility Components (Unreleased)
 
 `Slot` is a fixed square visual container for arbitrary icons or content. Static

package/dist/Button.js

@@ -36,7 +36,7 @@ function ButtonVisual({ children, endIcon, loading, loadingPosition, loadingIndi
     const label = typeof children === 'string'
         ? _jsx(PencilText, { seed: `${seed}-label`, children: children })
         : children == null ? null : _jsx("span", { children: children });
-    return (_jsxs(_Fragment, { children: [_jsx(PencilSurface, { as: "span", className: "inkra-button__surface", clipContent: sharedOutline, radius: sharedOutline ? 0 : undefined, seed: seed, variant: inputAction ? 'ghost' : surfaceVariant(variant), children: _jsxs("span", { className: "inkra-button__content", children: [loading && loadingPosition === 'center' ? indicator : null, iconSlot('start', startIcon), label == null ? null : _jsxs("span", { className: "inkra-button__label", children: [label, variant === 'link' ? _jsx(PencilLine, { className: "inkra-button__underline", seed: `${seed}-underline`, weight: 0.9 }) : null] }), iconSlot('end', endIcon)] }) }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-button__focus-ring", variant: "outline", seed: `${seed}-focus` }), group === null ? null : _jsx(PencilLine, { className: "inkra-button-group__divider", orientation: group.orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: `${seed}-group-divider` })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(PencilSurface, { as: "span", className: "inkra-button__surface", clipContent: sharedOutline || variant === 'ghost', radius: sharedOutline ? 0 : undefined, seed: seed, variant: inputAction ? 'ghost' : surfaceVariant(variant), children: _jsxs("span", { className: "inkra-button__content", children: [loading && loadingPosition === 'center' ? indicator : null, iconSlot('start', startIcon), label == null ? null : _jsxs("span", { className: "inkra-button__label", children: [label, variant === 'link' ? _jsx(PencilLine, { className: "inkra-button__underline", seed: `${seed}-underline`, weight: 0.9 }) : null] }), iconSlot('end', endIcon)] }) }), _jsx(PencilSurface, { as: "span", "aria-hidden": "true", className: "inkra-button__focus-ring", variant: "outline", seed: `${seed}-focus` }), group === null ? null : _jsx(PencilLine, { className: "inkra-button-group__divider", orientation: group.orientation === 'horizontal' ? 'vertical' : 'horizontal', seed: `${seed}-group-divider` })] }));
 }
 export const Button = forwardRef(function Button({ children, 'aria-label': ariaLabel, className, disabled = false, endIcon, loading = false, loadingPosition = 'center', loadingIndicator, fullWidth = false, align = 'center', seed, size: sizeProp, startIcon, type = 'button', variant: variantProp, ...props }, ref) {
     const id = useId();

package/dist/PencilText.js

@@ -324,6 +324,14 @@ const PencilTextImplementation = forwardRef(function PencilText({ as: Element =
             markDirty();
         });
         schedule();
+        // Ancestor layout effects can reveal a clipped label during the same commit.
+        if (!visible)
+            queueMicrotask(() => {
+                if (!disposed && dirty && inViewport()) {
+                    visible = true;
+                    schedule();
+                }
+            });
         return () => {
             disposed = true;
             stopRecovery();

package/dist/form/Textarea.d.ts

@@ -1,5 +1,7 @@
 import type { ReactNode, TextareaHTMLAttributes } from 'react';
 import type { FieldControlStateProps } from './types.js';
+import type { TextareaAutoSizeOptions } from './textareaSizing.js';
+export type { TextareaAutoSizeOptions } from './textareaSizing.js';
 export interface TextareaCountDetails {
     count: number;
     maxLength: number;
@@ -15,5 +17,7 @@ export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElemen
     getCountLabel?: (details: TextareaCountDetails) => string;
     resize?: 'none' | 'vertical';
     resizeLabel?: string;
+    /** Grow and shrink with content. Takes precedence over manual resize and inline height. */
+    autoSize?: boolean | TextareaAutoSizeOptions;
 }
 export declare const Textarea: import("react").ForwardRefExoticComponent<TextareaProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/form/Textarea.js

@@ -10,16 +10,19 @@ import { Progress } from '../display/index.js';
 import { useResolvedControlProps } from './controlProps.js';
 import { EditablePencilText } from './EditablePencilText.js';
 import { InputAction } from './InputAction.js';
+import { textareaResizeHeight, useTextareaSizing } from './textareaSizing.js';
 const resizePaths = [{ d: 'M12 3v18M8 7l4-4 4 4M8 17l4 4 4-4' }];
 export const Textarea = forwardRef(function Textarea(inkraProps, ref) {
     const { t } = useInkraLocale();
-    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', variant = 'outline', endAction, countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = ({ remaining }) => t(remaining < 0 ? 'textarea.overLimit' : 'textarea.countRemaining', { count: Math.abs(remaining) }), resize = 'none', resizeLabel = t('textarea.resize'), ...props } = inkraProps;
+    const { 'aria-describedby': ariaDescribedBy, 'aria-errormessage': ariaErrorMessage, 'aria-invalid': ariaInvalid, className, disabled, id, invalid = false, readOnly, required, seed, size = 'md', variant = 'outline', endAction, countMode = 'remaining', countDisplay = 'auto', countThreshold = 0.8, getCountLabel = ({ remaining }) => t(remaining < 0 ? 'textarea.overLimit' : 'textarea.countRemaining', { count: Math.abs(remaining) }), resize = 'none', resizeLabel = t('textarea.resize'), autoSize = false, ...props } = inkraProps;
     const generatedId = useId();
     const textareaRef = useRef(null);
     const [uncontrolledCount, setUncontrolledCount] = useState(() => String(props.defaultValue ?? '').length);
     const [height, setHeight] = useState();
     const [measuredHeight, setMeasuredHeight] = useState();
     const drag = useRef(null);
+    const sizing = useTextareaSizing(textareaRef, autoSize, props.rows, props.form, resize === 'vertical');
+    const manualResize = resize === 'vertical' && !sizing.enabled;
     const controlled = props.value != null;
     const count = controlled ? String(props.value).length : uncontrolledCount;
     const maximum = props.maxLength;
@@ -30,11 +33,12 @@ export const Textarea = forwardRef(function Textarea(inkraProps, ref) {
     const controlId = id ?? `inkra-textarea-${generatedId}`;
     const remaining = hasCount ? maximum - count : 0;
     const countLabel = hasCount ? getCountLabel({ count, maxLength: maximum, remaining }) : '';
-    const minimumHeight = size === 'sm' ? 80 : size === 'lg' ? 112 : 96;
-    const resizeTo = (next) => setHeight(Math.max(minimumHeight, Math.min(1200, next)));
+    const minimumHeight = (sizing.minimumHeight ?? (size === 'sm' ? 80 : size === 'lg' ? 112 : 96)) + sizing.boxAdjustment;
+    const maximumHeight = Math.max(1200, minimumHeight);
+    const resizeTo = (next) => setHeight(textareaResizeHeight(next, minimumHeight, maximumHeight, sizing.boxAdjustment));
     useEffect(() => {
         const control = textareaRef.current;
-        if (resize !== 'vertical' || !control)
+        if (!manualResize || !control)
             return;
         const measure = () => setMeasuredHeight(control.getBoundingClientRect().height);
         measure();
@@ -43,7 +47,7 @@ export const Textarea = forwardRef(function Textarea(inkraProps, ref) {
         const observer = new ResizeObserver(measure);
         observer.observe(control);
         return () => observer.disconnect();
-    }, [resize]);
+    }, [manualResize]);
     useEffect(() => {
         const control = textareaRef.current;
         const form = control?.form;
@@ -73,11 +77,13 @@ export const Textarea = forwardRef(function Textarea(inkraProps, ref) {
     });
     const resolvedSeed = seed ?? `inkra-textarea-${state.id ?? generatedId}`;
     const classes = ['inkra-textarea', className].filter(Boolean).join(' ');
-    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, "data-variant": variant, "data-end-action": endAction != null || undefined, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: variant === 'underline' ? 'ghost' : state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, style: { ...props.style, ...(resize === 'vertical' && height !== undefined ? { height } : {}), resize: 'none' }, onInput: event => {
+    return (_jsx("div", { className: "inkra-field-control-hit inkra-field-control-hit--textarea", "data-disabled": state.disabled || undefined, "data-invalid": state.invalid || undefined, "data-readonly": state.readOnly || undefined, "data-size": size, "data-variant": variant, "data-end-action": endAction != null || undefined, "data-row-sizing": sizing.rowSizing || undefined, children: _jsxs(PencilSurface, { className: "inkra-field-control inkra-field-control--textarea", seed: resolvedSeed, variant: variant === 'underline' ? 'ghost' : state.invalid ? 'danger' : 'outline', children: [_jsx("textarea", { ...props, "aria-describedby": [state.describedBy, showCount && countId].filter(Boolean).join(' ') || undefined, "aria-errormessage": state.errorMessage, "aria-invalid": state.ariaInvalid, className: classes, disabled: state.disabled, id: state.id, readOnly: state.readOnly, ref: textareaRef, required: state.required, rows: sizing.enabled ? sizing.minRows : props.rows, style: { ...props.style, ...(manualResize && height !== undefined ? { height: Math.max(height, sizing.minimumHeight ?? height) } : {}), ...sizing.style, resize: 'none' }, onInput: event => {
                         if (!controlled)
                             setUncontrolledCount(event.currentTarget.value.length);
                         props.onInput?.(event);
-                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), endAction != null && _jsx("div", { className: "inkra-textarea__end-action", children: _jsx(InputAction, { disabled: Boolean(state.disabled), seed: `${resolvedSeed}-action`, children: endAction }) }), (hasCount || resize === 'vertical') && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), resize === 'vertical' && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": 1200, "aria-valuenow": Math.round(measuredHeight ?? minimumHeight), disabled: state.disabled, onPointerDown: event => {
+                        // Wait for React to accept or restore a controlled value before measuring.
+                        sizing.schedule();
+                    } }), _jsx(EditablePencilText, { controlRef: textareaRef, defaultValue: props.defaultValue, multiline: true, placeholder: props.placeholder, seed: `${resolvedSeed}-editable`, value: props.value }), endAction != null && _jsx("div", { className: "inkra-textarea__end-action", children: _jsx(InputAction, { disabled: Boolean(state.disabled), seed: `${resolvedSeed}-action`, children: endAction }) }), (hasCount || manualResize) && _jsxs("div", { className: "inkra-textarea__footer", children: [hasCount && _jsxs("div", { className: "inkra-textarea__count", id: countId, "data-visible": showCount, "data-limit": remaining <= 0 ? 'reached' : 'near', "aria-hidden": !showCount || undefined, children: [countMode === 'progress' && _jsx(Progress, { size: "sm", value: maximum === 0 ? 1 : count, max: maximum === 0 ? 1 : maximum, "aria-label": countLabel, "aria-valuetext": countLabel }), _jsx(PencilText, { children: countMode === 'fraction' ? `${count} / ${maximum}` : countLabel })] }), manualResize && _jsx(Button, { className: "inkra-textarea__resize", variant: "ghost", size: "icon", role: "slider", "aria-label": resizeLabel, title: resizeLabel, "aria-controls": state.id, "aria-orientation": "vertical", "aria-valuemin": minimumHeight, "aria-valuemax": maximumHeight, "aria-valuenow": Math.round(Math.max(measuredHeight ?? minimumHeight, minimumHeight)), disabled: state.disabled, onPointerDown: event => {
                                 if (event.button !== 0)
                                     return;
                                 drag.current = { y: event.clientY, height: textareaRef.current?.getBoundingClientRect().height ?? minimumHeight };
@@ -98,7 +104,7 @@ export const Textarea = forwardRef(function Textarea(inkraProps, ref) {
                                 else if (event.key === 'Home')
                                     resizeTo(minimumHeight);
                                 else if (event.key === 'End')
-                                    resizeTo(1200);
+                                    resizeTo(maximumHeight);
                                 else
                                     return;
                                 event.preventDefault();

package/dist/form/index.d.ts

@@ -3,5 +3,5 @@ export type { FieldProps } from './Field.js';
 export { Input } from './Input.js';
 export type { InputProps, InputVariant, InputTextAlign, InputValueChangeDetails, InputClassNames } from './Input.js';
 export { Textarea } from './Textarea.js';
-export type { TextareaProps, TextareaCountDetails } from './Textarea.js';
+export type { TextareaProps, TextareaCountDetails, TextareaAutoSizeOptions } from './Textarea.js';
 export type { FieldControlSize, FieldControlStateProps } from './types.js';

package/dist/form/textareaSizing.d.ts

@@ -0,0 +1,29 @@
+import type { CSSProperties, RefObject } from 'react';
+export interface TextareaAutoSizeOptions {
+    /** Minimum visible text rows. Falls back to rows, then 1. */
+    minRows?: number;
+    /** Maximum visible text rows, including soft wraps. Omit for unlimited growth. */
+    maxRows?: number;
+}
+export declare function resolveTextareaRows(autoSize: boolean | TextareaAutoSizeOptions | undefined, rows?: number): {
+    minRows: number;
+    maxRows: number;
+};
+/** Measure a native textarea without changing its value, selection, scroll position or height. */
+export declare function measureTextareaSize(control: HTMLTextAreaElement, minRows: number, maxRows: number, measureContent?: boolean): {
+    minimumHeight: number;
+    boxAdjustment: number;
+    height: number;
+    overflowY: "hidden" | "auto";
+} | undefined;
+export declare function useTextareaSizing(controlRef: RefObject<HTMLTextAreaElement | null>, autoSize: boolean | TextareaAutoSizeOptions | undefined, rows: number | undefined, form: string | undefined, manualResize?: boolean): {
+    enabled: boolean;
+    rowSizing: boolean;
+    minRows: number;
+    minimumHeight: number | undefined;
+    boxAdjustment: number;
+    style: CSSProperties | undefined;
+    schedule: () => void;
+};
+/** Manual handles and ARIA use visible border-box pixels; CSS height may use content-box pixels. */
+export declare function textareaResizeHeight(visibleHeight: number, minimum: number, maximum: number, boxAdjustment: number): number;

package/dist/form/textareaSizing.js

@@ -0,0 +1,153 @@
+import { useCallback, useRef, useState } from 'react';
+import { useBrowserLayoutEffect } from '../internal/useBrowserLayoutEffect.js';
+function positiveRows(value, fallback) {
+    return typeof value === 'number' && Number.isSafeInteger(value) && value > 0 ? value : fallback;
+}
+export function resolveTextareaRows(autoSize, rows) {
+    const options = typeof autoSize === 'object' ? autoSize : undefined;
+    const minRows = positiveRows(options?.minRows, positiveRows(rows, 1));
+    return { minRows, maxRows: Math.max(minRows, positiveRows(options?.maxRows, Infinity)) };
+}
+const sizingProperties = [
+    'boxSizing', 'width', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft',
+    'borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth', 'borderStyle',
+    'fontFamily', 'fontSize', 'fontWeight', 'fontStyle', 'fontStretch', 'fontVariant',
+    'fontFeatureSettings', 'fontVariationSettings', 'fontKerning', 'lineHeight', 'letterSpacing',
+    'wordSpacing', 'textIndent', 'textTransform', 'textAlign', 'tabSize', 'direction',
+    'overflowWrap', 'wordBreak', 'whiteSpace', 'scrollbarGutter',
+];
+/** Measure a native textarea without changing its value, selection, scroll position or height. */
+export function measureTextareaSize(control, minRows, maxRows, measureContent = true) {
+    const document = control.ownerDocument;
+    const view = document.defaultView;
+    if (!view || !document.body || control.getClientRects().length === 0)
+        return undefined;
+    const computed = view.getComputedStyle(control);
+    if (Number.parseFloat(computed.width) <= 0)
+        return undefined;
+    const number = (value) => Number.parseFloat(value) || 0;
+    const padding = number(computed.paddingTop) + number(computed.paddingBottom);
+    const border = number(computed.borderTopWidth) + number(computed.borderBottomWidth);
+    const mirror = document.createElement('textarea');
+    mirror.setAttribute('aria-hidden', 'true');
+    mirror.tabIndex = -1;
+    mirror.rows = 1;
+    mirror.wrap = control.wrap;
+    for (const property of sizingProperties)
+        mirror.style[property] = computed[property];
+    Object.assign(mirror.style, {
+        position: 'fixed', left: '-100000px', top: '0', visibility: 'hidden',
+        pointerEvents: 'none', height: '0', minHeight: '0', maxHeight: 'none',
+        overflow: 'hidden', resize: 'none',
+    });
+    document.body.appendChild(mirror);
+    try {
+        mirror.value = 'x';
+        let lineHeight = number(computed.lineHeight);
+        if (!lineHeight) {
+            // scrollHeight rounds to integer pixels. A bounded multi-line probe avoids
+            // multiplying that rounding error by maxRows when line-height is normal.
+            mirror.value = Array(100).fill('x').join('\n');
+            lineHeight = Math.max(1, (mirror.scrollHeight - padding) / 100);
+        }
+        // Placeholder copy does not change the height of an otherwise empty editor.
+        mirror.value = measureContent ? control.value || ' ' : ' ';
+        const contentHeight = Math.max(lineHeight, mirror.scrollHeight - padding);
+        const extra = computed.boxSizing === 'border-box' ? padding + border : 0;
+        const minimumHeight = Math.ceil(minRows * lineHeight + extra);
+        const maximumHeight = Math.ceil(maxRows * lineHeight + extra);
+        return {
+            minimumHeight,
+            boxAdjustment: computed.boxSizing === 'border-box' ? 0 : padding + border,
+            height: Math.min(maximumHeight, Math.max(minimumHeight, Math.ceil(contentHeight + extra))),
+            overflowY: contentHeight > maxRows * lineHeight + 1 ? 'auto' : 'hidden',
+        };
+    }
+    finally {
+        mirror.remove();
+    }
+}
+export function useTextareaSizing(controlRef, autoSize, rows, form, manualResize = false) {
+    const enabled = Boolean(autoSize);
+    const rowSizing = enabled || rows !== undefined;
+    const measureEnabled = enabled || (rowSizing && manualResize);
+    const { minRows, maxRows } = resolveTextareaRows(autoSize, rows);
+    const [measurement, setMeasurement] = useState();
+    const measure = useCallback(() => {
+        const control = controlRef.current;
+        if (!measureEnabled || !control)
+            return;
+        const next = measureTextareaSize(control, minRows, maxRows, enabled);
+        if (next)
+            setMeasurement(previous => previous?.height === next.height && previous.minimumHeight === next.minimumHeight
+                && previous.boxAdjustment === next.boxAdjustment
+                && previous.overflowY === next.overflowY ? previous : next);
+    }, [controlRef, measureEnabled, enabled, minRows, maxRows]);
+    const latestMeasure = useRef(measure);
+    latestMeasure.current = measure;
+    const scheduleRef = useRef(() => { });
+    const schedule = useCallback(() => scheduleRef.current(), []);
+    // Includes controlled/default value, class, style, size and row-option updates.
+    useBrowserLayoutEffect(() => { measure(); });
+    useBrowserLayoutEffect(() => {
+        const control = controlRef.current;
+        const view = control?.ownerDocument.defaultView;
+        if (!measureEnabled || !control || !view)
+            return;
+        let frame = 0;
+        let disposed = false;
+        const schedule = () => {
+            if (!frame && !disposed)
+                frame = view.requestAnimationFrame(() => {
+                    frame = 0;
+                    if (!disposed)
+                        latestMeasure.current();
+                });
+        };
+        scheduleRef.current = schedule;
+        // Height changes are our output; only width changes should schedule another measurement.
+        let width = control.getBoundingClientRect().width;
+        const observer = typeof ResizeObserver === 'undefined' ? undefined : new ResizeObserver(() => {
+            const nextWidth = control.getBoundingClientRect().width;
+            if (nextWidth !== width) {
+                width = nextWidth;
+                schedule();
+            }
+        });
+        observer?.observe(control);
+        const inheritedStyle = typeof MutationObserver === 'undefined' ? undefined : new MutationObserver(schedule);
+        // Do not observe our own inline height: React updates already measure it.
+        for (let element = control.parentElement; element; element = element.parentElement) {
+            inheritedStyle?.observe(element, { attributes: true, attributeFilter: ['class', 'style', 'data-theme', 'data-inkra-theme'] });
+        }
+        const fonts = control.ownerDocument.fonts;
+        void fonts?.ready.then(() => { if (!disposed)
+            schedule(); });
+        fonts?.addEventListener('loadingdone', schedule);
+        fonts?.addEventListener('loadingerror', schedule);
+        view.addEventListener('resize', schedule);
+        // The frame runs after the native reset default action, including cancelled resets.
+        const ownerForm = control.form;
+        ownerForm?.addEventListener('reset', schedule);
+        return () => {
+            disposed = true;
+            scheduleRef.current = () => { };
+            view.cancelAnimationFrame(frame);
+            observer?.disconnect();
+            inheritedStyle?.disconnect();
+            fonts?.removeEventListener('loadingdone', schedule);
+            fonts?.removeEventListener('loadingerror', schedule);
+            view.removeEventListener('resize', schedule);
+            ownerForm?.removeEventListener('reset', schedule);
+        };
+    }, [controlRef, measureEnabled, form]);
+    const style = enabled && measurement ? {
+        height: measurement.height, minHeight: measurement.minimumHeight, maxHeight: 'none', overflowY: measurement.overflowY,
+    } : undefined;
+    return { enabled, rowSizing, minRows, minimumHeight: rowSizing ? measurement?.minimumHeight : undefined,
+        boxAdjustment: rowSizing ? measurement?.boxAdjustment ?? 0 : 0, style, schedule };
+}
+/** Manual handles and ARIA use visible border-box pixels; CSS height may use content-box pixels. */
+export function textareaResizeHeight(visibleHeight, minimum, maximum, boxAdjustment) {
+    return Math.max(minimum, Math.min(maximum, visibleHeight)) - boxAdjustment;
+}