@gridui/input 1.1.6 → 3.0.0

package/docs/reference/input.md

@@ -0,0 +1,69 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# Input
+
+Accepts a single line of text within a form. Use it with a visible label and field feedback to explain the expected value.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { Input } from "@gridui/input";
+import "@gridui/theme/styles.css";
+import "@gridui/input/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/storybook/scenarios/controls/input.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### onChange
+
+``(event: ChangeEvent<HTMLInputElement, HTMLInputElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLInputElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLInputElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLInputElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLInputElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### controlSize
+
+``"small" | "standard" | undefined`` · Optional
+
+Default: ``groupSize ?? "standard"``
+
+### onValueChange
+
+``(value: string): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+

package/docs/reference/label.md

@@ -0,0 +1,61 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# Label
+
+Compose Label with ActionForm inside the same @gridui/input component family.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { Label } from "@gridui/input";
+import "@gridui/theme/styles.css";
+import "@gridui/input/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/form/stories/action-form.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLLabelElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLLabelElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLLabelElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLLabelElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLLabelElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### icon
+
+``ReactNode`` · Optional
+

package/docs/reference/password-input.md

@@ -0,0 +1,81 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# PasswordInput
+
+A native password field with an accessible reveal action. Use it for account credentials.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { PasswordInput } from "@gridui/input";
+import "@gridui/theme/styles.css";
+import "@gridui/input/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/password-input.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLInputElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLInputElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLInputElement, HTMLInputElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLInputElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLInputElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onValueChange
+
+``(value: string): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### controlSize
+
+``"small" | "standard" | undefined`` · Optional
+
+Default: ``"standard"``
+
+### showLabel
+
+``string`` · Required
+
+### hideLabel
+
+``string`` · Required
+
+### rootClassName
+
+``string | undefined`` · Optional
+

package/docs/reference/search-input.md

@@ -0,0 +1,87 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# SearchInput
+
+A native search field with clear and loading feedback. Applications own query requests and submission.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { SearchInput } from "@gridui/input";
+import "@gridui/theme/styles.css";
+import "@gridui/input/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/search-input.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLInputElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLInputElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onChange
+
+``(event: ChangeEvent<HTMLInputElement, HTMLInputElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLInputElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLInputElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onValueChange
+
+``(value: string): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### controlSize
+
+``"small" | "standard" | undefined`` · Optional
+
+Default: ``"standard"``
+
+### clearLabel
+
+``string`` · Required
+
+### loading
+
+``boolean | undefined`` · Optional
+
+Default: ``false``
+
+### loadingLabel
+
+``string | undefined`` · Optional
+
+### rootClassName
+
+``string | undefined`` · Optional
+

package/docs/reference/textarea.md

@@ -0,0 +1,89 @@
+<!-- Generated from public Props and owned stories. Run pnpm docs:storybook. -->
+# Textarea
+
+Accepts multiple lines of plain text. Use it for descriptions, notes, and longer responses.
+
+Import from ``@gridui/input`` and load Theme before this family's stylesheet.
+
+```tsx
+import { Textarea } from "@gridui/input";
+import "@gridui/theme/styles.css";
+import "@gridui/input/styles.css";
+```
+
+Read the [package contract](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/README.md) for shared behavior and stylesheet dependencies.
+
+The [working composition](https://github.com/sudo-ui/GridUI-React-Monorepo/blob/main/packages-core/input/stories/textarea.stories.tsx) demonstrates required context, state, and related components. Use View code in Storybook to inspect the actual implementation.
+
+## API
+
+The public Props type is the source of these signatures. Defaults below are explicit implementation defaults; story presets are separate. Native attributes remain available through the exported Props type.
+
+### rows
+
+``number | undefined`` · Optional
+
+Default: ``2``
+
+### onChange
+
+``(event: ChangeEvent<HTMLTextAreaElement, HTMLTextAreaElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### children
+
+``ReactNode`` · Optional
+
+Content rendered inside the component.
+
+### onFocus
+
+``(event: FocusEvent<HTMLTextAreaElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onBlur
+
+``(event: FocusEvent<HTMLTextAreaElement, Element>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onSubmit
+
+``(event: SubmitEvent<HTMLTextAreaElement>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### onClick
+
+``(event: MouseEvent<HTMLTextAreaElement, MouseEvent>): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### controlSize
+
+``"small" | "standard" | undefined`` · Optional
+
+Default: ``groupSize ?? "standard"``
+
+### onValueChange
+
+``(value: string): void`` · Optional
+
+Called when the corresponding interaction occurs; inspect the arguments in Actions.
+
+### autoSize
+
+``boolean | undefined`` · Optional
+
+Default: ``false``
+
+### maxHeight
+
+``number | undefined`` · Optional
+
+### maxRows
+
+``number | undefined`` · Optional
+

package/docs/textarea.md

@@ -1,28 +1,35 @@
 # Textarea
 
-Import `Textarea` and `TextareaProps` from `@gridui/input`. It is a native textarea with the same `controlSize`
-(`standard` or `small`), invalid, disabled, and focus styling as `Input`.
+Textarea is a native multiline input. Native props, events and refs are retained,
+including name, form, value/defaultValue, rows, required, maxLength and ARIA.
+onChange runs before onValueChange. Enter and IME retain native multiline behavior.
+Applications own labels, validation, persistence and submission.
 
-All native textarea props and refs are forwarded, including `value`,
-`defaultValue`, `name`, `rows`, `required`, `maxLength`, and ARIA attributes.
-`onChange` runs before the optional `onValueChange(string)` notification, matching
-Input. Use `value` plus `onValueChange` for a controlled field. The default resize
-behavior is vertical; override it with `className` (for example `resize-none`).
+## Automatic height
 
-The caller supplies the accessible label and owns validation, persistence, and
-submission. Enter and IME input retain native multiline behavior; the library
-does not add a chat-specific send shortcut or automatic submission.
+`autoSize` uses CSS `field-sizing: content`, available in Baseline 2026 browsers
+(https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/field-sizing).
+Automatic height requires support for that property. This replaces the JavaScript
+measurement and reset observers; there is no second sizing implementation.
+Ordinary non-autosizing textareas retain native rows and vertical resizing.
 
-## Optional automatic height
+While autosizing, `rows` (default 2) establishes the minimum through line-height
+and control density. Content, width, visibility, fonts, controlled updates and
+native resets participate in browser layout. Height is automatic; avoid a competing
+explicit height. Overflow remains auto, including when caller CSS limits height.
 
-Set `autoSize` to grow and shrink with the content. Native `rows` and CSS minimum
-height establish the baseline. Optional `maxHeight` is a positive finite CSS
-height in pixels; use a value at least as large as the configured CSS minimum
-height. Beyond the cap the field scrolls internally. The height and overflow are
-owned by autosizing while enabled; avoid competing `height` / `overflowY` styles.
-Without autosizing the existing vertical resize behavior remains unchanged.
+Choose either a positive finite pixel `maxHeight` or an integer `maxRows >= rows`.
+Supplying both throws. CSS minimum height wins when it exceeds an upper bound.
+The pixel prop overrides an inline style.maxHeight; without a prop the caller's
+CSS maximum remains effective. A caller can override generated sizing CSS through
+className/style, and owns the resulting geometry. Constraints do not apply while
+autoSize is false. Disabling autosizing restores ordinary native sizing without
+retained inline height or overflow mutations.
 
-Sizing responds to native input, controlled value renders, element-width changes
-(including becoming visible), and native form reset. Width observation requires
-`ResizeObserver`. Disabling autosizing restores the original inline height and
-overflow. Native refs, onInput, onChange and onValueChange remain available.
+```tsx
+<Textarea aria-label="Notes" autoSize rows={3} maxRows={8} />
+```
+
+Use InputGroup with a block-start or block-end addon for a toolbar or footer.
+FieldCounter from Form uses native maxLength units and can be connected with
+aria-describedby. Composer owns sending; Textarea adds no submit shortcut.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gridui/input",
-  "version": "1.1.6",
+  "version": "3.0.0",
   "description": "GridUI React input",
   "license": "UNLICENSED",
   "type": "module",
@@ -27,10 +27,12 @@
     "react-dom": "^19.2.0"
   },
   "dependencies": {
-    "@gridui/overlay": "^1.2.2",
-    "@gridui/style-utils": "^2.2.2",
+    "@gridui/button": "^4.0.0",
+    "@gridui/overlay": "^2.0.0",
+    "@gridui/style-utils": "^3.0.0",
     "@gridui/theme": "^2.5.3",
-    "class-variance-authority": "0.7.1"
+    "class-variance-authority": "0.7.1",
+    "lucide-react": "1.70.0"
   },
   "devDependencies": {
     "@gridui-internal/configuration": "0.0.0-internal",
@@ -47,6 +49,8 @@
   },
   "scripts": {
     "build": "node ../../scripts/compilation/package.ts",
-    "compile": "tsc --project tsconfig.json"
+    "compile": "tsc --project tsconfig.json",
+    "test": "jest",
+    "coverage": "jest --coverage"
   }
 }

package/dist/textarea/use-textarea-autosize.d.ts

@@ -1,8 +0,0 @@
-/**
- * @author WMXPY
- * @package Input
- * @namespace Textarea
- * @description Use Textarea Autosize
- */
-import { type RefObject } from "react";
-export declare const useTextareaAutosize: (ref: RefObject<HTMLTextAreaElement | null>, enabled: boolean, maxHeight?: number) => () => void;