staffa 0.6.0 → 0.6.1

package/skill/SKILL.md

@@ -0,0 +1,548 @@
+---
+name: staffa
+description: Documentation for the Staffa component library for Aberdeen. Covers *surfaces*, CSS variables for colors etc, how to the various `s-` prefixed css classes, customizing, overriding style, adding own components. Access this if you're doing front-end work on an Aberdeen project that already uses Staffa, or may benefit from it.
+---
+
+# Staffa
+
+A small, opinionated TypeScript component library for the [Aberdeen](https://aberdeenjs.org) reactive UI library.
+
+```ts
+import A from "aberdeen";
+import * as S from "staffa";
+
+const $user = A.proxy({ name: "", email: "" });
+
+A.mount(document.body, () => {
+  S.main({
+    title: "Sign up",
+    maxWidth: "40rem",
+    content: () => {
+      S.form({
+        submit: () => console.log(A.unproxy($user)),
+        content: () => {
+          S.textline({ label: "Name", required: true, bind: A.ref($user, "name") });
+          S.textline({ label: "Email", type: "email", bind: A.ref($user, "email") });
+        },
+        actions: () => S.button({ text: "Create account", type: "submit" }),
+      });
+    },
+  });
+});
+```
+
+Staffa is made to look decent out of the box, but easily customizable at runtime.
+
+## Install
+
+```sh
+npm install staffa aberdeen
+```
+
+Aberdeen is a peer dependency. Staffa is published as ESM with TypeScript types.
+
+## How it works
+
+### Components are functions
+
+Every component takes a single typed options object and draws DOM via Aberdeen. No classes, no web components. The `S` object collects all component functions:
+
+```ts
+S.button({ text: "Save", disabled: false });
+S.box({ header: "Settings", content: () => { ... } });
+```
+
+### Options objects are typed and can be reactive
+
+All components get their options in a typed object. The object may be an Aberdeen proxy, if you want to update the component in-place.
+
+```ts
+const $btn = A.proxy({ text: "Save", disabled: false });
+S.button($btn);
+// ...later:
+$btn.disabled = true;  // button updates instantly
+```
+
+### Rich text slots
+
+Anywhere a component takes content, a `label`, `header`, button `text`, dialog body, etc, you can pass either a string or a `() => void` draw function. Strings render as **rich text**: `*italic*`, `**bold**`, `` `code` ``, `[link](/path)`. All text is safely escaped.
+
+```ts
+S.button({ text: "Save **now**" });
+S.box({ header: "See the [docs](/docs)", content: () => { ... } });
+```
+
+### Surfaces
+
+Staffa builds on **surfaces**: elements marked with `.s-s` that have their own background and derived text/border tokens. Add modifier classes to colour them:
+
+- **level**: `.base`, `.panel`, `.raised`
+- **role**: `.primary`, `.secondary`, `.gradient`, `.neutral`, `.danger`, `.success`, `.warning`
+- **variant**: `.filled`, `.tonal`, `.outlined`
+
+Components are built from these (`S.button` is a `.s-s.primary.filled`, `S.box` a `.s-s.panel`, etc.). Because component options include an optional `attrs` string, which has Aberdeen `A()` string semantics, you can easily override it:
+
+```ts
+S.button({ text: "Delete", attrs: ".danger" });
+S.box({ attrs: ".raised.outlined", content: () => { ... } });
+```
+
+Inside any surface, CSS variables are defined for suitable foreground colors (`$s-fg`, `$s-bg`, `$s-fg-muted`, `$s-border`, `$s-accent`, ...), with `color` defaulting to `$s-fg`. By using these, components has access to various foreground colors that will look regardless of the surface it is drawing on.
+
+### Dark and light modes
+
+Dark/light mode is detected from OS preference by default. If you want to override this (based on user preferences), use:
+
+```ts
+S.setDarkMode(true);       // force dark
+S.setDarkMode(false);      // force light
+S.setDarkMode(undefined);  // follow OS
+```
+
+*Hint:* A `buttonChooser` is probably the right component for a color scheme selector.
+
+### CSS reset
+
+Staffa includes a lightweight CSS reset that makes bare semantic HTML look a bit better but unsurprising without additional styling. 
+
+### Theming
+
+The first step in theming is just setting some CSS variables, most commonly the primary and secondary color. This can be done through CSS directly, or using Aberdeen:
+
+```ts
+A.cssVars["s-primary"] = "#fdda58";
+A.cssVars["s-secondary"] = "#cc5624";
+A.cssVars["s-danger"] = "#ee4422";
+A.cssVars["s-radius"] = "4px";
+```
+
+See `src/theme.ts` for what other CSS variables are being used.
+
+If you need further customization, just add some CSS to override the default styling. For instance, to add your own surface type:
+
+```ts
+// In filled mode, 's-a' is the foreground and 's-b' is the background. "outlined" and "tonal" use the colors in different ways.
+A.insertGlobalCss({".s-s.my-surface": "--s-a:white --s-b:#ef6b00"});
+
+S.button({
+  text: "You'll want to click me",
+  attrs: ".my-surface",
+  click: () => S.alert("Good work!", {attrs: ".my-surface"})
+});
+```
+
+Note that when changing CSS like this, things *may* break if you upgrade Staffa. The recommended update strategy is therefore: don't!
+
+If you want to make changes that are dependent upon the current light/dark mode setting, rely on Aberdeen reactivity:
+
+```ts
+A(() => {
+  if (S.getDarkMode()) {
+    A.cssVars["s-primary"] = "#aa9944";
+    A.insertGlobalCss({".s-s.my-surface": "--s-a:white --s-b:#444444"});
+  } else {
+    A.cssVars["s-primary"] = "#fdda58";
+    A.insertGlobalCss({".s-s.my-surface": "--s-a:black --s-b:#cccccc"});
+  }
+});
+```
+
+## Components
+
+Components share naming conventions for options: `attrs` (outermost element), `contentAttrs` (children-holding element), `inputAttrs` (form control element), and `<region>Attrs` (sub-regions like `headerAttrs`/`footerAttrs`). Form components consistently support `label`, `help`, `error`, `disabled`, `required`, `name` through the `drawField()` helper.
+
+### Layout & containers
+
+- **`S.main(opts)`**: app shell, a sticky header with `icon`, `title`, `subtitle`, `menu`; scrollable content area; footer. Set `maxWidth` to center the content.
+- **`S.box(opts | content)`**: surface with optional `header`/`footer` and padded body. Pass a function for shorthand `{ content }`.
+- **`S.tabs(opts)`**: tablist with live panels and keyboard navigation.
+- **`S.form(opts | content)`**: form aligning fields in a column or responsive grid, with an `actions` bar. Prevents the default page reload.
+
+### Form fields
+
+- **`S.textline(opts)`**: single-line input (`text`, `password`, `email`, `number`, `tel`, `url`, `search`, dates, ...).
+- **`S.textarea(opts)`**: multi-line input.
+- **`S.checkbox(opts)`**: labelled checkbox.
+- **`S.select(opts)`**: single-select dropdown backed by native `<select>` (styled control, OS dropdown).
+- **`S.autocomplete(opts)`**: type-ahead combobox with `multi` (chips), `allowCustom` (free text), `required`, and dynamic `options`.
+
+### Dialogs
+
+- **`S.dialog(opts)`**: modal dialog with backdrop and fade transition. The `content` slot receives a `close()` function. Lifecycle is tied to the calling scope (disappears when cleaned up). Nesting stacks correctly.
+- **`S.alert(msg)` / `S.confirm(msg)` / `S.prompt(msg, initial?)`**: promise-returning shortcuts.
+
+### Actions
+
+- **`S.button(opts | text)`**: button surface; restyle via `attrs` (e.g. `.danger`, `.outlined`), plus `size`, `disabled`, `icon`, `href` (renders `<a role=button>`). Defaults to filled `.primary`.
+- **`S.buttonGroup(opts)`**: groups buttons, `attached` (segmented) or `spaced`.
+- **`S.buttonChooser(opts)`**: single-select segmented control bound to a value.
+
+
+### Icons
+
+Staffa ships the full [Lucide icon set](https://lucide.dev/icons/) as named exports. Import only the ones you use, so a bundler tree-shakes the rest (the whole set is ~82 kB gzipped):
+
+```ts
+import { sparkles, bell } from "staffa/icons.js";
+```
+
+Each icon is a draw function usable anywhere a slot is accepted (e.g. a button `icon`), or called directly. Customize per call, or globally via `setDefaults()`:
+
+```ts
+S.button({ text: "Save", icon: bell });
+sparkles({ size: "1.5em", color: "var(--s-primary)", strokeWidth: 1.5 });
+```
+
+Options: `size`, `color` (defaults to `currentColor`), `strokeWidth`, `cap`, `join`, `attrs`.
+
+### Other
+
+- **`S.menuButton(opts)` / `S.showFloatingMenu(opts)`**: menu actions and floating menus, with keyboard navigation and submenus.
+- **`S.toast(opts)`**: transient notification at the bottom of the viewport.
+- **`S.addTooltip(el, opts)`**: tooltip on hover, attached to an existing element.
+
+Two-way binding uses Aberdeen proxies: pass `bind: A.ref($obj, "key")` to form fields.
+
+## Browser (no bundler)
+
+`staffa/all.js` is a pre-built ESM bundle. Use an [import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/script/type/importmap):
+
+```html
+<script type="importmap">
+{
+  "imports": {
+    "aberdeen": "https://cdn.jsdelivr.net/npm/aberdeen/dist/src/aberdeen.js",
+    "staffa/all.js": "https://cdn.jsdelivr.net/npm/staffa/dist/staffa.esm.js"
+  }
+}
+</script>
+<script type="module">
+  import A from "aberdeen";
+  import * as S from "staffa/all.js";
+  // ...
+</script>
+```
+
+It includes all components, but not the icons.
+
+## Extending Staffa
+
+Staffa is designed for extension. A component is simply a plain function taking a typed options object and drawing Aberdeen DOM. This section explains the philosophy so extensions follow the same patterns.
+
+### Design principles
+
+1. **Components are functions**. They take one typed options object, emit Aberdeen DOM, and *usually* return nothing.
+
+2. **Reuse option types.** Define options by extending `ContentOptions` (for layout components) or `FieldOptions` (for form controls) from `src/core.ts` and `src/components/field.ts`. Don't reinvent fields like `attrs`, `label`, `help`, etc.
+
+3. **Reach for reactivity deliberately.** Pass option strings straight to `A` as positional args (the caller's scope). Only wrap a dedicated `A(() => ...)` scope where it matters: input elements (recreation loses focus), or large subtrees you don't want to redraw. Use `A.peek(() => ...)` when you need a value but must not subscribe.
+
+4. **Build on surfaces.** Mark elements `.s-s` and add level/role/variant modifiers. Inside them, use the contextual foreground color CSS variables (`$s-fg`, `$s-bg`, `$s-border`, ...) so components adapt to wherever they're nested. Hard-coding colors in components shouldn't be needed, but if you must, make sure you set *both* foreground and background.
+
+5. **No outer margins.** Components don't margin themselves; spacing is the parent's job. Content components set default `padding` on the content element; `contentAttrs` overrides it.
+
+6. **Make everything styleable.** Provide `attrs`, `contentAttrs`, `inputAttrs`, and `<region>Attrs` hooks so callers can customize. Apply `attrs` last so it can override component classes.
+
+7. **Use semantic HTML and ARIA.** Prefer native elements (`<button>`, `<label>`, `<form>`, `<section>`) and native behaviour. Add ARIA only where semantics fall short (e.g. tabs, combobox).
+
+8. **Use CSS.** Use `A.insertGlobalCss({...})` at module top level to provide (nested) CSS styling for your component. Give your top-level element the `s-<component-name>` class. Avoid inventing further classes; lean on nesting (`&` for the element, bare key for descendants) and element/structural selectors.  
+
+9. **Reuse form controls.** Use `drawField()` and call `applyControlAttrs()`.
+
+10. **Function over form.** Provide enough contrast. Stick to UI conventions to help users; buttons have a rounded border, links are underlined, text input background is white, etc.
+
+### Adding a component to Staffa
+
+The previous section is good advice for any project-specific custom, but should definitely be followed for any new components to be included in Staffa. In addition, you'd want to: 
+
+1. Create `src/components/<name>.ts`.
+2. Define `<Name>Options` extending `ContentOptions`, `FieldOptions`, or a plain interface. Add TSDoc on every option.
+3. Add a TSDoc `@example` on the function.
+4. Register in `src/index.ts` (the `S` object + type re-export).
+5. Extend `smoke.mjs` to render it. Run `npm run smoke` and `npm run build`.
+
+See `src/components/button.ts` and `src/components/dialog.ts` for examples.
+
+## Commands
+
+```sh
+npm run build      # compile TypeScript to dist/
+npm run typecheck  # check types
+npm run smoke      # render every component in jsdom
+npx http-server    # allows demo to be viewed at http://localhost:8080/demo
+npx shotest test   # visual tests: click through the demo, screenshotting every step
+npx shotest review # review/accept the visual changes against the baseline
+```
+
+The visual tests (`tests/*.spec.ts`) need a build first (`npm run build`); they serve the repo root themselves and click through every demo page. Accepted baselines live in `test-accepted/`.
+
+# API Reference
+
+## setDarkMode · function
+
+Force dark mode (`true`), light mode (`false`), or follow the OS preference
+(`undefined`). Takes effect immediately and is persisted to localStorage.
+
+**Signature:** `(value: boolean) => void`
+
+**Parameters:**
+
+- `value: boolean | undefined`
+
+## [getDarkMode](getDarkMode.md) · function
+
+Whether dark mode is currently active. Reactive — read it inside a scope to
+re-run on changes.
+
+## [autocomplete](autocomplete.md) · function
+
+A combobox with type-ahead filtering. Supports single or multi-select (chips),
+optional free-text entry, and full keyboard control (arrows, enter, escape,
+backspace-to-remove). Implements the ARIA combobox/listbox pattern.
+
+## [AutocompleteOptions](AutocompleteOptions.md) · interface
+
+Options for `autocomplete`.
+
+## AutocompleteOptionInput · type
+
+A selectable option: a bare string, or a `{ value, label }` pair.
+
+**Type:** `string | { value: string; label?: string }`
+
+## [box](box.md) · function
+
+A surface container — the workhorse layout primitive. Has an optional styled
+header and footer, and a padded body that holds `ContentOptions.content`.
+
+## [BoxOptions](BoxOptions.md) · interface
+
+Options for `box`.
+
+## [button](button.md) · function
+
+A button. Always carries at least a visible border so its affordance is
+obvious at a glance.
+
+## [ButtonOptions](ButtonOptions.md) · interface
+
+Options for `button`.
+
+## [buttonChooser](buttonChooser.md) · function
+
+A single-selection segmented control: an attached button group where exactly
+one button is active at a time. Optionally allows deselecting back to `undefined`.
+
+## [ButtonChooserOptions](ButtonChooserOptions.md) · interface
+
+Options for `buttonChooser`.
+
+## [buttonGroup](buttonGroup.md) · function
+
+Groups related buttons, either as a joined segmented control (`attached`) or
+spaced out. A `role=group` is applied for assistive tech.
+
+## [ButtonGroupOptions](ButtonGroupOptions.md) · interface
+
+Options for `buttonGroup`.
+
+## [checkbox](checkbox.md) · function
+
+A checkbox with an associated, clickable label. Uses the native `<input
+type=checkbox>` (styled with `accent-color`) for full keyboard and screen
+reader support.
+
+## [CheckboxOptions](CheckboxOptions.md) · interface
+
+Options for `checkbox`.
+
+## [form](form.md) · function
+
+An opinionated `<form>` wrapper that lays its fields out consistently — a clean
+single column by default, or a responsive grid — and provides a standard
+action bar.
+
+## [FormOptions](FormOptions.md) · interface
+
+Options for `form`.
+
+## [main](main.md) · function
+
+An application shell that wires up the things almost every app needs: a sticky
+top bar (icon, title, subtitle, action menu), a scrollable content area, and a
+footer. With `MainOptions.maxWidth` the content area is centred and its
+width capped. Add a `nav` to get a responsive sidebar (auto-collapses to a
+menu button below 640 px, or always a button with `navPosition: "button"`).
+
+## [MainOptions](MainOptions.md) · interface
+
+Options for `main`.
+
+## [menuButton](menuButton.md) · function
+
+A button that opens a | floating dropdown menu on
+click. Keyboard navigation: Arrow Up/Down, Home, End; Escape/Tab to close;
+Enter/Space activate the focused item natively.
+
+## [showFloatingMenu](showFloatingMenu.md) · function
+
+Open a floating dropdown menu anchored to an element. Portals to
+`document.body` (never clipped), positions itself (flipping up when there's
+no room below), and closes on Escape, Tab, item selection, or any click
+outside the panel and anchor. Returns a `close()` function.
+
+## [MenuOptions](MenuOptions.md) · interface
+
+Options for `menuButton` and `MainOptions.nav`.
+
+## MenuEntry · type
+
+An entry in a menu or sidebar nav list. Three forms:
+- `MenuItem` — a clickable/linkable row with label and optional icon.
+- `MenuSeparator` — a visual divider (`{ separator: true }`).
+- A slot (string or draw function) — renders custom content (section header,
+  avatar, search box, …). Skipped by keyboard navigation.
+
+**Type:** `MenuItem | MenuSeparator | Slot`
+
+## [MenuItem](MenuItem.md) · interface
+
+A clickable item in a menu or sidebar nav.
+
+## MenuSeparator · interface
+
+A visual divider between groups of items.
+
+### menuSeparator.separator · member
+
+**Type:** `true`
+
+## [FloatingMenuOptions](FloatingMenuOptions.md) · interface
+
+Options for `showFloatingMenu`.
+
+## [dialog](dialog.md) · function
+
+A dialog rendered into `document.body` via `A.mount`, with a dimming backdrop
+that fades in and out. Returns a `Promise<void>` that resolves when the dialog
+closes. Lifecycle is also tied to the parent reactive scope — when that scope
+is cleaned up the dialog disappears and the promise resolves.
+
+## [alert](alert.md) · function
+
+Shows a message dialog with a single OK button. Returns a `Promise<void>`
+that resolves when the user dismisses it.
+
+## [confirm](confirm.md) · function
+
+Shows a confirmation dialog with Cancel and OK buttons. Returns a
+`Promise<boolean>` — `true` if the user clicked OK, `false` otherwise.
+
+## [prompt](prompt.md) · function
+
+Shows a prompt dialog with a text input. Returns a `Promise<string | null>` —
+the entered string if the user confirmed, or `null` if cancelled.
+
+## [DialogOptions](DialogOptions.md) · interface
+
+Options for `dialog`.
+
+## [select](select.md) · function
+
+A single-select dropdown backed by a native `<select>` element. Looks like the
+other Staffa inputs but delegates all focus management, keyboard navigation, and
+mobile-native picker behaviour to the browser.
+
+## [SelectOptions](SelectOptions.md) · interface
+
+Options for `select`.
+
+## SelectOptionInput · type
+
+A selectable option: a bare string, or a `{ value, label }` pair.
+
+**Type:** `string | { value: string; label?: string }`
+
+## [tabs](tabs.md) · function
+
+A tabbed view. Renders an ARIA `tablist` of buttons and a single live panel
+for the selected tab. Supports keyboard navigation (left/right/home/end).
+
+## [Tab](Tab.md) · interface
+
+A single tab definition.
+
+## [TabsOptions](TabsOptions.md) · interface
+
+Options for `tabs`.
+
+## [textarea](textarea.md) · function
+
+A multi-line text input. Shares the field chrome and styling of
+`textline`, adding `rows` and `resize` controls.
+
+## [TextareaOptions](TextareaOptions.md) · interface
+
+Options for `textarea`.
+
+## [textline](textline.md) · function
+
+A single-line text input — covering text, passwords, numbers, email, dates and
+the other line-oriented `<input>` types.
+
+## [TextlineOptions](TextlineOptions.md) · interface
+
+Options for `textline`.
+
+## [TextlineType](TextlineType.md) · type
+
+The `<input>` types `textline` supports. Deliberately excludes types
+that need their own widget (`checkbox`, `radio`, `color`, `range`, `file`,
+`button`, ...) — use the dedicated components for those.
+
+## [toast](toast.md) · function
+
+Show a toast notification. Returns a `dismiss()` function to remove it
+programmatically. Auto-dismisses after `duration` ms (default 4 000).
+
+## [ToastOptions](ToastOptions.md) · interface
+
+Options for `toast`.
+
+## [addTooltip](addTooltip.md) · function
+
+Attaches a tooltip to the current element: adds hover/focus handlers via
+`A` so the tip appears when the element is hovered or keyboard-focused.
+The tip panel is rendered into `document.body` via a portal, so it is never
+clipped by `overflow:hidden` ancestors. Position is computed from the
+element's bounding rect and automatically flips when near the viewport edge.
+
+## [TooltipOptions](TooltipOptions.md) · interface
+
+Options for `addTooltip`.
+
+## [FieldOptions](FieldOptions.md) · interface
+
+Options shared by all *form field* components (textline, textarea, checkbox,
+autocomplete, ...).
+
+## [ContentOptions](ContentOptions.md) · interface
+
+Options for components that wrap a single block of caller-provided content,
+with an `attrs` escape hatch on the outermost element.
+
+## Bindable · type
+
+A reactive "value box", such as the result of `A.proxy(x)` or `A.ref(obj, key)`.
+
+**Type:** `{ value: T }`
+
+## [Slot](Slot.md) · type
+
+Something that renders a small piece of content: either a plain string or a
+draw function (for icons, badges, custom markup, ...).
+
+## [Attributes](Attributes.md) · type
+
+Shared building blocks for the Staffa component library.
+

package/skill/SelectOptions.md

@@ -0,0 +1,21 @@
+## SelectOptions · interface
+
+Options for `select`.
+
+### selectOptions.options · member
+
+The list of selectable options.
+
+**Type:** `SelectOptionInput[] | (() => SelectOptionInput[])`
+
+### selectOptions.bind · member
+
+Two-way binding for the selected value string (`""` when nothing is selected).
+
+**Type:** `Bindable<string>`
+
+### selectOptions.placeholder · member
+
+Placeholder option shown when nothing is selected yet.
+
+**Type:** `string`

package/skill/Slot.md

@@ -0,0 +1,13 @@
+## Slot · type
+
+Something that renders a small piece of content: either a plain string or a
+draw function (for icons, badges, custom markup, ...).
+
+A string is drawn as **rich text** (see `drawSlot`): Aberdeen's `rich`
+markup is applied, so `*italic*`, `**bold**`, `` `code` `` and
+`[links](/path)` render as inline elements (text is safely escaped).
+
+The optional `Args` type parameter lets a slot's draw-function receive
+arguments — e.g. a dialog body is a `Slot<[close: () => void]>`.
+
+**Type:** `string | ((...args: Args) => void)`

package/skill/Tab.md

@@ -0,0 +1,33 @@
+## Tab · interface
+
+A single tab definition.
+
+### tab.id · member
+
+Stable id used as the selection value. Falls back to the array index.
+
+**Type:** `string`
+
+### tab.label · member
+
+Tab label shown in the tab strip.
+
+**Type:** `Slot`
+
+### tab.icon · member
+
+Optional leading icon.
+
+**Type:** `Slot`
+
+### tab.content · member
+
+Content rendered in the panel when this tab is active. A string is rendered as rich text.
+
+**Type:** `Slot`
+
+### tab.disabled · member
+
+Disables selecting this tab.
+
+**Type:** `boolean`

package/skill/TabsOptions.md

@@ -0,0 +1,28 @@
+## TabsOptions · interface
+
+Options for `tabs`.
+
+### tabsOptions.attrs · member
+
+Aberdeen attr/style string applied to the outermost element.
+
+**Type:** `string`
+
+### tabsOptions.tabs · member
+
+The tabs to display.
+
+**Type:** `Tab[]`
+
+### tabsOptions.bind · member
+
+Two-way binding for the selected tab's id. When omitted, the component keeps
+its own internal selection, starting at the first tab.
+
+**Type:** `Bindable<string>`
+
+### tabsOptions.contentAttrs · member
+
+Aberdeen attr/style string applied to the active panel.
+
+**Type:** `string`

package/skill/TextareaOptions.md

@@ -0,0 +1,51 @@
+## TextareaOptions · interface
+
+Options for `textarea`.
+
+### textareaOptions.placeholder · member
+
+Placeholder text.
+
+**Type:** `string`
+
+### textareaOptions.bind · member
+
+Two-way binding target.
+
+**Type:** `Bindable<string>`
+
+### textareaOptions.value · member
+
+Static initial value.
+
+**Type:** `string`
+
+### textareaOptions.rows · member
+
+Visible number of text rows. Defaults to `4`. Ignored when `autoGrow` is enabled.
+
+**Type:** `number`
+
+### textareaOptions.resize · member
+
+Whether the textarea may be resized by the user. Defaults to `"vertical"`. Ignored when `autoGrow` is enabled.
+
+**Type:** `"none" | "vertical" | "horizontal" | "both"`
+
+### textareaOptions.autoGrow · member
+
+Auto-grow the textarea to fit its content. Defaults to `true`.
+
+**Type:** `boolean`
+
+### textareaOptions.input · member
+
+Fired on every `input` event.
+
+**Type:** `(event: Event) => void`
+
+### textareaOptions.change · member
+
+Fired on `change` (commit).
+
+**Type:** `(event: Event) => void`