@dashforge/tw 0.1.0-beta

package/src/components/TextField/TextField.tsx

@@ -0,0 +1,216 @@
+import { useCallback, useContext, useEffect, useId, useRef } from 'react';
+import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
+import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
+import { useDashFieldMeta } from '@dashforge/forms';
+import { cn } from '../../utils/cn.js';
+import { useAccessState } from '../../hooks/useAccessState.js';
+import { resolveValidationState } from '../_shared/resolveValidationState.js';
+import { textFieldVariants } from './textField.variants.js';
+import type { TextFieldProps } from './textField.types.js';
+
+/**
+ * Dashforge TW TextField — bridge-integrated text input.
+ *
+ * Implementation mirrors `@dashforge/ui/TextField` (MUI) at the bridge
+ * level — same `name` / `rules` / `visibleWhen` / `access` semantics,
+ * same validation gating, same StrictMode-safe unregister pattern.
+ * Renderer differences:
+ *
+ *  - Native `<input>` element wrapped in a TV-styled
+ *    `<div role-less wrapper>` so the focus ring extends to the entire
+ *    field (consistent with shadcn-style inputs).
+ *  - Layout modes: `stacked` (default — label above) and `inline`
+ *    (label left of input). MUI's `floating` mode is deferred to a
+ *    follow-up sprint; consumers needing the visual can layer it via
+ *    `slotProps`.
+ *  - No Select-integration hook (Select lands in F4 as its own component).
+ *
+ * **A11y**:
+ *   - `aria-invalid` is set from the resolved validation state.
+ *   - `aria-describedby` links the input to the helper/error text node.
+ *   - Required fields get the native `required` attribute + a visual `*`.
+ */
+export function TextField(props: TextFieldProps) {
+  const {
+    name,
+    rules,
+    visibleWhen,
+    layout = 'stacked',
+    size,
+    label,
+    helperText,
+    required,
+    error,
+    disabled,
+    fullWidth,
+    access,
+    sx,
+    slotProps,
+    placeholder,
+    type,
+    onChange: userOnChange,
+    onBlur: userOnBlur,
+    value: userValue,
+    defaultValue,
+    ...rest
+  } = props;
+
+  // ───── Hooks (unconditional) ─────
+  const bridge = useContext(DashFormContext) as DashFormBridge | null;
+  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
+  // Granular per-field subscription. We READ from `fieldMeta.value`
+  // (reactive snapshot) rather than `bridge.getValue(name)` (eager
+  // read with no subscription) so React re-renders this field on its
+  // own state mutations — the canonical pattern, mirrors the MUI side.
+  const fieldMeta = useDashFieldMeta(name);
+  const accessState = useAccessState(access);
+
+  const inputId = useId();
+  const helperId = `${inputId}-help`;
+
+  // StrictMode-safe unregister-on-unmount
+  const unregisterRef = useRef({ bridge, name });
+  unregisterRef.current = { bridge, name };
+  const isMountedRef = useRef(false);
+   
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      const { bridge: cap, name: capName } = unregisterRef.current;
+      queueMicrotask(() => {
+        if (!isMountedRef.current) cap?.unregister?.(capName);
+      });
+    };
+  }, []);
+
+  // ───── Derived (every hook MUST be called above the early returns) ─────
+  const effectiveDisabled =
+    Boolean(disabled) || accessState.disabled;
+  const effectiveReadOnly = accessState.readonly;
+
+  const isFormMode = Boolean(bridge?.register);
+
+  let resolvedError = error;
+  let resolvedHelperText: typeof helperText = helperText;
+  let registration: FieldRegistration | null = null;
+  let resolvedValue: string | number | readonly string[] | undefined = userValue as
+    | string
+    | number
+    | readonly string[]
+    | undefined;
+
+  if (isFormMode && bridge) {
+    registration = bridge.register(name, rules);
+    const validation = resolveValidationState(name, bridge, error, helperText);
+    resolvedError = validation.error;
+    resolvedHelperText = validation.helperText;
+    if (userValue === undefined) {
+      // Read the reactive snapshot from `useDashFieldMeta` — NOT
+      // `bridge.getValue` — so the component re-renders on every
+      // per-field state change without the unsubscribe trick the
+      // legacy bridge used.
+      const bv = fieldMeta.value;
+      resolvedValue =
+        bv == null ? '' : (bv as string | number);
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (isFormMode && bridge) {
+      bridge.setValue?.(name, e.target.value);
+      void registration?.onChange?.(e);
+    }
+    userOnChange?.(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
+    if (isFormMode && bridge) {
+      registration?.onBlur?.(e);
+    }
+    userOnBlur?.(e);
+  };
+
+  // In form mode, RHF supplies its own callback ref via registration.
+  // Wrap it in a stable callback so React 19 unambiguously treats it as
+  // a callback ref (and to give us a single place to extend the ref
+  // chain in the future — e.g. for a user-supplied `ref` prop via
+  // `forwardRef`).
+  const registrationRefFn = registration?.ref;
+  const inputRef = useCallback(
+    (instance: HTMLInputElement | null) => {
+      if (typeof registrationRefFn === 'function') {
+        registrationRefFn(instance);
+      }
+    },
+    [registrationRefFn]
+  );
+
+  // ───── Render-time guards (after all hooks) ─────
+  if (!isVisible) return null;
+  if (!accessState.visible) return null;
+
+  const v = textFieldVariants({
+    size,
+    layout,
+    error: resolvedError,
+    fullWidth,
+    disabled: effectiveDisabled,
+  });
+
+  return (
+    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(v.label(), slotProps?.label?.className)}
+        >
+          {label}
+          {required && (
+            <span
+              aria-hidden="true"
+              className={cn(v.requiredMark(), slotProps?.requiredMark?.className)}
+            >
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      <div className={cn(v.inputWrapper(), slotProps?.inputWrapper?.className)}>
+        <input
+          {...rest}
+          id={inputId}
+          name={name}
+          type={type ?? 'text'}
+          placeholder={placeholder}
+          value={isFormMode ? (resolvedValue as string | number | readonly string[]) ?? '' : userValue}
+          defaultValue={!isFormMode && userValue === undefined ? defaultValue : undefined}
+          disabled={effectiveDisabled}
+          readOnly={effectiveReadOnly}
+          required={required}
+          aria-invalid={resolvedError || undefined}
+          aria-describedby={resolvedHelperText ? helperId : undefined}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          ref={inputRef}
+          className={cn(v.input(), slotProps?.input?.className)}
+        />
+      </div>
+
+      {resolvedHelperText && (
+        <p
+          id={helperId}
+          className={cn(
+            resolvedError ? v.errorText() : v.helperText(),
+            resolvedError
+              ? slotProps?.errorText?.className
+              : slotProps?.helperText?.className
+          )}
+        >
+          {resolvedHelperText}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/TextField/textField.types.ts

@@ -0,0 +1,70 @@
+import type { InputHTMLAttributes, ReactNode } from 'react';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { Engine } from '@dashforge/ui-core';
+import type { TextFieldVariants } from './textField.variants.js';
+
+/**
+ * Per-slot overrides for `<TextField>`.
+ *
+ * Each slot accepts `{ className: string }` so the override path is
+ * extensible (style / aria-* / data-* can be added without a breaking
+ * change). Mirrors the MUI-side `slotProps` shape.
+ */
+export interface TextFieldSlotProps {
+  root?: { className?: string };
+  label?: { className?: string };
+  requiredMark?: { className?: string };
+  inputWrapper?: { className?: string };
+  input?: { className?: string };
+  helperText?: { className?: string };
+  errorText?: { className?: string };
+}
+
+/**
+ * Props for the Dashforge TW `<TextField>`.
+ *
+ * Extends the native `<input>` attributes (so `placeholder`, `type`,
+ * `autoComplete`, `aria-*` etc. all flow through), narrowed in two
+ * places:
+ *
+ *   - `size` is omitted because HTML's legacy `size` attribute (number)
+ *     collides with our variant axis (`'sm' | 'md' | 'lg'`).
+ *   - `className` is omitted — use `sx` instead (the canonical override
+ *     path that wins over variant classes via `tailwind-merge`).
+ *
+ * Plus the variant axes and Dashforge form-bridge wiring (`name`,
+ * `rules`, `visibleWhen`, `access`).
+ */
+export interface TextFieldProps
+  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'className'>,
+    Pick<TextFieldVariants, 'size' | 'layout' | 'fullWidth'> {
+  /** Bridge field name (required when used inside `DashFormProvider`). */
+  name: string;
+
+  /** Visible label. */
+  label?: ReactNode;
+
+  /** Forwarded to the bridge as RHF rules — opaque to this component. */
+  rules?: unknown;
+
+  /** Engine predicate. Component returns null when false. */
+  visibleWhen?: (engine: Engine) => boolean;
+
+  /** Helper line below the input. */
+  helperText?: ReactNode;
+
+  /** Explicit error semaphore. Overrides bridge auto-error. */
+  error?: boolean;
+
+  /** Render the asterisk + set the native `required` attribute. */
+  required?: boolean;
+
+  /** RBAC requirement. */
+  access?: AccessRequirement;
+
+  /** Root-level Tailwind override — wins over variant classes via `cn()`. */
+  sx?: string;
+
+  /** Per-slot overrides — see `TextFieldSlotProps`. */
+  slotProps?: TextFieldSlotProps;
+}

package/src/components/TextField/textField.variants.ts

@@ -0,0 +1,87 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<TextField>` with 7 slots.
+ *
+ * The MUI-side `TextField` supports three layout modes (floating /
+ * stacked / inline) plus a Select-integration hook. The TW-side
+ * port covers **stacked** + **inline** in F3 (label outside the
+ * input wrapper) and ships a CSS-only floating label using
+ * Tailwind's `peer` modifier.
+ *
+ * The Select integration (`__selectAvailableValues` etc.) is
+ * deferred to F4 when the dedicated `<Select>` component arrives.
+ */
+export const textFieldVariants = tv({
+  slots: {
+    root: 'flex',
+    label: 'block text-sm font-medium text-neutral-900 mb-1',
+    requiredMark: 'text-danger-500 ml-0.5',
+    inputWrapper: [
+      'relative flex items-center',
+      // bg-neutral-50 inverts via @dashforge/tw-tokens: #fafafa in light,
+      // #0a0a0a in dark. Same class, dark-mode aware automatically.
+      'rounded-md border bg-neutral-50',
+      'border-neutral-300',
+      'transition-colors',
+      'focus-within:border-primary-500 focus-within:ring-2 focus-within:ring-primary-500/30',
+    ],
+    input: [
+      'block w-full bg-transparent outline-none',
+      'text-neutral-900 placeholder:text-neutral-400',
+      'disabled:cursor-not-allowed disabled:opacity-60',
+      'read-only:cursor-default',
+    ],
+    helperText: 'mt-1 text-sm text-neutral-600',
+    errorText: 'mt-1 text-sm text-danger-600',
+  },
+  variants: {
+    size: {
+      sm: {
+        inputWrapper: 'h-8 px-2',
+        input: 'text-sm',
+      },
+      md: {
+        inputWrapper: 'h-10 px-3',
+        input: 'text-base',
+      },
+      lg: {
+        inputWrapper: 'h-12 px-4',
+        input: 'text-lg',
+      },
+    },
+    layout: {
+      stacked: { root: 'flex-col' },
+      inline: { root: 'flex-row items-start gap-3', label: 'mb-0 pt-2 whitespace-nowrap shrink-0' },
+    },
+    error: {
+      true: {
+        inputWrapper:
+          'border-danger-500 focus-within:border-danger-500 focus-within:ring-danger-500/30',
+      },
+    },
+    fullWidth: {
+      true: {
+        root: 'w-full',
+        inputWrapper: 'w-full',
+      },
+    },
+    disabled: {
+      true: {
+        // neutral-200 is a darker shade of the default neutral-50 surface
+        // — visually distinguishes the disabled input from the active one
+        // in both light and dark modes.
+        inputWrapper: 'opacity-60 cursor-not-allowed bg-neutral-200',
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    layout: 'stacked',
+    error: false,
+    fullWidth: false,
+    disabled: false,
+  },
+});
+
+export type TextFieldVariants = VariantProps<typeof textFieldVariants>;

package/src/components/Textarea/Textarea.test.tsx

@@ -0,0 +1,75 @@
+// @vitest-environment jsdom
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { DashFormProvider } from '@dashforge/forms';
+import { Textarea } from './Textarea.js';
+
+describe('<Textarea>', () => {
+  describe('standalone (no DashForm)', () => {
+    it('renders a <textarea> element with the label', () => {
+      render(<Textarea name="bio" label="Bio" />);
+      const el = screen.getByLabelText('Bio');
+      expect(el).toBeInstanceOf(HTMLTextAreaElement);
+    });
+
+    it('respects the `rows` attribute (default 3, overridable)', () => {
+      const { rerender } = render(<Textarea name="bio" label="Bio" />);
+      expect(screen.getByLabelText('Bio').getAttribute('rows')).toBe('3');
+      rerender(<Textarea name="bio" label="Bio" rows={6} />);
+      expect(screen.getByLabelText('Bio').getAttribute('rows')).toBe('6');
+    });
+
+    it('renders helperText when provided', () => {
+      render(
+        <Textarea name="bio" label="Bio" helperText="Tell us about yourself" />
+      );
+      expect(screen.getByText('Tell us about yourself')).toBeTruthy();
+    });
+
+    it('renders a `*` for required fields', () => {
+      render(<Textarea name="bio" label="Bio" required />);
+      expect(screen.getByText('*')).toBeTruthy();
+    });
+
+    it('fires onChange when typed into', () => {
+      const onChange = vi.fn();
+      render(<Textarea name="bio" label="Bio" onChange={onChange} />);
+      fireEvent.change(screen.getByLabelText('Bio'), {
+        target: { value: 'hello' },
+      });
+      expect(onChange).toHaveBeenCalledTimes(1);
+    });
+
+    it('applies the `disabled` attribute on the textarea', () => {
+      render(<Textarea name="bio" label="Bio" disabled />);
+      const el = screen.getByLabelText('Bio') as HTMLTextAreaElement;
+      expect(el.disabled).toBe(true);
+    });
+  });
+
+  describe('inside DashFormProvider', () => {
+    it('reflects the typed value on the textarea element', () => {
+      render(
+        <DashFormProvider defaultValues={{ bio: '' }}>
+          <Textarea name="bio" label="Bio" />
+        </DashFormProvider>
+      );
+      const el = screen.getByLabelText('Bio') as HTMLTextAreaElement;
+      fireEvent.change(el, { target: { value: 'A short bio.' } });
+      // The bridge updates synchronously; the rendered value mirrors it.
+      expect(el.value).toBe('A short bio.');
+    });
+  });
+
+  describe('resize variant', () => {
+    it('default `vertical` adds resize-y', () => {
+      render(<Textarea name="bio" label="Bio" />);
+      expect(screen.getByLabelText('Bio').className).toMatch(/resize-y/);
+    });
+
+    it('`none` adds resize-none', () => {
+      render(<Textarea name="bio" label="Bio" resize="none" />);
+      expect(screen.getByLabelText('Bio').className).toMatch(/resize-none/);
+    });
+  });
+});

package/src/components/Textarea/Textarea.tsx

@@ -0,0 +1,190 @@
+import { useCallback, useContext, useEffect, useId, useRef } from 'react';
+import { DashFormContext, useEngineVisibility } from '@dashforge/ui-core';
+import type { DashFormBridge, FieldRegistration } from '@dashforge/ui-core';
+import { useDashFieldMeta } from '@dashforge/forms';
+import { cn } from '../../utils/cn.js';
+import { useAccessState } from '../../hooks/useAccessState.js';
+import { resolveValidationState } from '../_shared/resolveValidationState.js';
+import { textareaVariants } from './textarea.variants.js';
+import type { TextareaProps } from './textarea.types.js';
+
+/**
+ * Dashforge TW Textarea — bridge-integrated multi-line input.
+ *
+ * Sibling of `<TextField>` (same slot taxonomy, same bridge wiring) but
+ * renders a `<textarea>` element instead of a single-line `<input>`.
+ *
+ * Defaults to `rows={3}` and `resize="vertical"` — both overridable via
+ * variant prop or per-instance `rows` attribute.
+ *
+ * **A11y**: `aria-invalid` from the resolved validation state,
+ * `aria-describedby` links to the helper/error text node, required
+ * fields get the native `required` attribute + a visual `*`.
+ */
+export function Textarea(props: TextareaProps) {
+  const {
+    name,
+    rules,
+    visibleWhen,
+    layout = 'stacked',
+    size,
+    resize,
+    label,
+    helperText,
+    required,
+    error,
+    disabled,
+    fullWidth,
+    access,
+    sx,
+    slotProps,
+    placeholder,
+    rows = 3,
+    onChange: userOnChange,
+    onBlur: userOnBlur,
+    value: userValue,
+    defaultValue,
+    ...rest
+  } = props;
+
+  // ───── Hooks (unconditional) ─────
+  const bridge = useContext(DashFormContext) as DashFormBridge | null;
+  const isVisible = useEngineVisibility(bridge?.engine, visibleWhen);
+  const fieldMeta = useDashFieldMeta(name);
+  const accessState = useAccessState(access);
+
+  const inputId = useId();
+  const helperId = `${inputId}-help`;
+
+  // StrictMode-safe unregister-on-unmount
+  const unregisterRef = useRef({ bridge, name });
+  unregisterRef.current = { bridge, name };
+  const isMountedRef = useRef(false);
+   
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+      const { bridge: cap, name: capName } = unregisterRef.current;
+      queueMicrotask(() => {
+        if (!isMountedRef.current) cap?.unregister?.(capName);
+      });
+    };
+  }, []);
+
+  // ───── Derived (every hook MUST be called above the early returns) ─────
+  const effectiveDisabled = Boolean(disabled) || accessState.disabled;
+  const effectiveReadOnly = accessState.readonly;
+
+  const isFormMode = Boolean(bridge?.register);
+
+  let resolvedError = error;
+  let resolvedHelperText: typeof helperText = helperText;
+  let registration: FieldRegistration | null = null;
+  let resolvedValue: string | undefined = userValue;
+
+  if (isFormMode && bridge) {
+    registration = bridge.register(name, rules);
+    const validation = resolveValidationState(name, bridge, error, helperText);
+    resolvedError = validation.error;
+    resolvedHelperText = validation.helperText;
+    if (userValue === undefined) {
+      const bv = fieldMeta.value;
+      resolvedValue = bv == null ? '' : String(bv);
+    }
+  }
+
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (isFormMode && bridge) {
+      bridge.setValue?.(name, e.target.value);
+      void registration?.onChange?.(e);
+    }
+    userOnChange?.(e);
+  };
+
+  const handleBlur = (e: React.FocusEvent<HTMLTextAreaElement>) => {
+    if (isFormMode && bridge) {
+      registration?.onBlur?.(e);
+    }
+    userOnBlur?.(e);
+  };
+
+  const registrationRefFn = registration?.ref;
+  const inputRef = useCallback(
+    (instance: HTMLTextAreaElement | null) => {
+      if (typeof registrationRefFn === 'function') {
+        registrationRefFn(instance);
+      }
+    },
+    [registrationRefFn]
+  );
+
+  // ───── Render-time guards (after all hooks) ─────
+  if (!isVisible) return null;
+  if (!accessState.visible) return null;
+
+  const v = textareaVariants({
+    size,
+    layout,
+    resize,
+    error: resolvedError,
+    fullWidth,
+    disabled: effectiveDisabled,
+  });
+
+  return (
+    <div className={cn(v.root(), sx, slotProps?.root?.className)}>
+      {label && (
+        <label
+          htmlFor={inputId}
+          className={cn(v.label(), slotProps?.label?.className)}
+        >
+          {label}
+          {required && (
+            <span
+              aria-hidden="true"
+              className={cn(v.requiredMark(), slotProps?.requiredMark?.className)}
+            >
+              *
+            </span>
+          )}
+        </label>
+      )}
+
+      <div className={cn(v.inputWrapper(), slotProps?.inputWrapper?.className)}>
+        <textarea
+          {...rest}
+          id={inputId}
+          name={name}
+          rows={rows}
+          placeholder={placeholder}
+          value={isFormMode ? resolvedValue ?? '' : userValue}
+          defaultValue={!isFormMode && userValue === undefined ? defaultValue : undefined}
+          disabled={effectiveDisabled}
+          readOnly={effectiveReadOnly}
+          required={required}
+          aria-invalid={resolvedError || undefined}
+          aria-describedby={resolvedHelperText ? helperId : undefined}
+          onChange={handleChange}
+          onBlur={handleBlur}
+          ref={inputRef}
+          className={cn(v.input(), slotProps?.input?.className)}
+        />
+      </div>
+
+      {resolvedHelperText && (
+        <p
+          id={helperId}
+          className={cn(
+            resolvedError ? v.errorText() : v.helperText(),
+            resolvedError
+              ? slotProps?.errorText?.className
+              : slotProps?.helperText?.className
+          )}
+        >
+          {resolvedHelperText}
+        </p>
+      )}
+    </div>
+  );
+}

package/src/components/Textarea/textarea.types.ts

@@ -0,0 +1,60 @@
+import type {
+  ChangeEventHandler,
+  FocusEventHandler,
+  ReactNode,
+  TextareaHTMLAttributes,
+} from 'react';
+import type { Engine } from '@dashforge/ui-core';
+import type { AccessRequirement } from '@dashforge/rbac';
+import type { TextareaVariants } from './textarea.variants.js';
+
+export interface TextareaSlotProps {
+  root?: { className?: string };
+  label?: { className?: string };
+  requiredMark?: { className?: string };
+  inputWrapper?: { className?: string };
+  input?: { className?: string };
+  helperText?: { className?: string };
+  errorText?: { className?: string };
+}
+
+/**
+ * Props for `<Textarea>`.
+ *
+ * Mirrors `<TextField>` semantics (bridge integration, RBAC, gating)
+ * but renders a multi-line `<textarea>` and exposes a `resize` variant
+ * (default `'vertical'`). Inherits standard HTMLTextarea attributes
+ * (`rows`, `cols`, `maxLength`, etc.) via `TextareaHTMLAttributes`.
+ */
+export interface TextareaProps
+  extends Omit<
+      TextareaHTMLAttributes<HTMLTextAreaElement>,
+      'name' | 'size' | 'onChange' | 'onBlur' | 'value' | 'defaultValue'
+    >,
+    TextareaVariants {
+  name: string;
+  rules?: unknown;
+  label?: ReactNode;
+  helperText?: ReactNode;
+  required?: boolean;
+  error?: boolean;
+  disabled?: boolean;
+  /** Engine predicate — textarea not rendered when it returns `false`. */
+  visibleWhen?: (engine: Engine) => boolean;
+  /** RBAC access requirement (combines with explicit `disabled`). */
+  access?: AccessRequirement;
+  /** Root className shortcut (`cn`'d with the variant root class). */
+  sx?: string;
+  /** Per-slot className overrides. */
+  slotProps?: TextareaSlotProps;
+  /** Controlled value (form mode reads from the bridge if omitted). */
+  value?: string;
+  /** Default value (uncontrolled, standalone mode only). */
+  defaultValue?: string;
+  /** User-supplied change handler — fires *after* bridge update. */
+  onChange?: ChangeEventHandler<HTMLTextAreaElement>;
+  /** User-supplied blur handler — fires *after* bridge `onBlur`. */
+  onBlur?: FocusEventHandler<HTMLTextAreaElement>;
+  /** Minimum visible row count for the textarea. Default: 3. */
+  rows?: number;
+}