react-store-input 0.4.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -5,7 +5,39 @@ All notable changes to this project are documented in this file.
5
5
  The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
6
6
  and this project uses [Semantic Versioning](https://semver.org/).
7
7
 
8
- ## [Unreleased]
8
+ ## [0.6.0] - 2026-08-10
9
+
10
+ ### Changed
11
+
12
+ - Replaced the optional `gw-react-text-editor` peer integration with
13
+ `gw-rich-text-editor@^0.1.4` and updated the text editor binding for its
14
+ current value callback API.
15
+ - The optional text editor integration now requires Node.js 20 or newer,
16
+ matching the new peer package.
17
+
18
+ ## [0.5.0] - 2026-07-31
19
+
20
+ ### Changed
21
+
22
+ - Replaced `useStoreController` with `useStoreBinding`, a Lens/Codec-based
23
+ adapter for synchronizing external controls without exposing whole-state
24
+ subscription and draft callbacks.
25
+ - Reimplemented `useStoreHTMLElement` and the optional `TextEditor` integration
26
+ on top of `useStoreBinding`.
27
+ - Renamed `useStoreComponent` to `useStoreInput`. It accepts an existing
28
+ `gw-store` `Store` and returns bound `input`, `select`, and `textarea`
29
+ components.
30
+ - Renamed the low-level DOM binding hook from `useStoreInput` to
31
+ `useStoreHTMLElement`.
32
+ - Removed `gw-store` API re-exports. Import stores, selectors, and their types
33
+ directly from `gw-store`.
34
+
35
+ ### Removed
36
+
37
+ - Removed the deprecated `useFormStore`, `FormStore`, and `FormComponents`
38
+ APIs.
39
+ - Removed `useStoreController`. Non-input actions should call
40
+ `store.dispatch` directly.
9
41
 
10
42
  ## [0.4.0] - 2026-07-22
11
43
 
package/README.md CHANGED
@@ -13,10 +13,11 @@ npm install react-store-input
13
13
  ## Quick start
14
14
 
15
15
  ```tsx
16
- import { useFormStore } from "react-store-input";
16
+ import { useStore } from "gw-store";
17
+ import { Input } from "react-store-input";
17
18
 
18
19
  export default function LoginForm() {
19
- const form = useFormStore({
20
+ const store = useStore({
20
21
  email: "",
21
22
  password: "",
22
23
  rememberMe: false,
@@ -26,28 +27,28 @@ export default function LoginForm() {
26
27
  <form
27
28
  onSubmit={(event) => {
28
29
  event.preventDefault();
29
- console.log(form.state);
30
+ console.log(store.state);
30
31
  }}
31
32
  >
32
- <form.input name="email" type="email" />
33
- <form.input name="password" type="password" />
34
- <form.input name="rememberMe" type="checkbox" />
33
+ <Input store={store} name="email" type="email" />
34
+ <Input store={store} name="password" type="password" />
35
+ <Input store={store} name="rememberMe" type="checkbox" />
35
36
  <button type="submit">Sign in</button>
36
37
  </form>
37
38
  );
38
39
  }
39
40
  ```
40
41
 
41
- `useFormStore` returns the complete `gw-store` API (`state`, `dispatch`,
42
- `batch`, and `subscribe`) together with stable `input`, `select`, `textarea`,
43
- and `render` helpers.
42
+ Create and own stores with `gw-store`. This package only binds that store to
43
+ input controls.
44
44
 
45
45
  ## Components
46
46
 
47
47
  You can use the standalone components when the store is passed from elsewhere:
48
48
 
49
49
  ```tsx
50
- import { Input, Select, Textarea, useStore } from "react-store-input";
50
+ import { useStore } from "gw-store";
51
+ import { Input, Select, Textarea } from "react-store-input";
51
52
 
52
53
  const store = useStore({ role: "user", bio: "" });
53
54
 
@@ -60,8 +61,23 @@ const store = useStore({ role: "user", bio: "" });
60
61
  <Textarea store={store} name="bio" rows={5} />;
61
62
  ```
62
63
 
64
+ When passing `store` to every control would be repetitive, `useStoreInput`
65
+ returns stable components already bound to an existing store:
66
+
67
+ ```tsx
68
+ import { useStore } from "gw-store";
69
+ import { useStoreInput } from "react-store-input";
70
+
71
+ const store = useStore({ role: "user", bio: "" });
72
+ const controls = useStoreInput(store);
73
+
74
+ <controls.input name="role" />;
75
+ <controls.select name="role">...</controls.select>;
76
+ <controls.textarea name="bio" />;
77
+ ```
78
+
63
79
  A named `Input`, `Select`, or `Textarea` requires a valid top-level state key.
64
- Use `useStoreInput` with a typed binding for nested or converted values.
80
+ Use `useStoreHTMLElement` with a typed binding for nested or converted values.
65
81
 
66
82
  ## Value conversion
67
83
 
@@ -93,7 +109,7 @@ A custom control is defined from three small pieces:
93
109
 
94
110
  Keeping the lens and codec separate lets one state field use different UI
95
111
  representations, and lets one codec be reused for the same domain type in
96
- different stores.
112
+ different stores. `InputBinding` itself is not tied to an HTML element.
97
113
 
98
114
  ```tsx
99
115
  import {
@@ -132,10 +148,11 @@ codec implementations.
132
148
 
133
149
  ## Rendering selected state
134
150
 
135
- `useSelector`, `shallowEqual`, and the rest of `gw-store@0.2.0` are re-exported.
151
+ Use `gw-store` selectors with this package's rendering helper.
136
152
 
137
153
  ```tsx
138
- import { createRender, useSelector } from "react-store-input";
154
+ import { useSelector } from "gw-store";
155
+ import { createRender } from "react-store-input";
139
156
 
140
157
  const email = useSelector(store, (state) => state.email);
141
158
 
@@ -143,25 +160,30 @@ return (
143
160
  <>
144
161
  <p>{email}</p>
145
162
  {createRender(store, (state) => <p>{state.password.length} characters</p>)}
146
- {form.render((state) => <p>{state.rememberMe ? "Remember" : "Forget"}</p>)}
163
+ {createRender(store, (state) => (
164
+ <p>{state.rememberMe ? "Remember" : "Forget"}</p>
165
+ ))}
147
166
  </>
148
167
  );
149
168
  ```
150
169
 
151
170
  ## Custom controls
152
171
 
153
- Use `useStoreInput` with a binding for custom elements that expose a normal
172
+ Use `useStoreHTMLElement` with a binding for custom elements that expose a normal
154
173
  form-control DOM node. The ref is deliberately explicit. A parse failure keeps
155
174
  the last valid store value, preserves the user's raw input, and exposes the
156
175
  typed error through `meta`.
157
176
 
158
177
  ```tsx
159
178
  import { useRef } from "react";
160
- import { useStoreInput, type Store } from "react-store-input";
179
+ import type { Store } from "gw-store";
180
+ import { useStoreHTMLElement } from "react-store-input";
161
181
 
162
182
  function BudgetInput({ store }: { store: Store<FormState> }) {
163
183
  const ref = useRef<HTMLInputElement>(null);
164
- const field = useStoreInput(ref, store, budgetBinding, { type: "text" });
184
+ const field = useStoreHTMLElement(ref, store, budgetBinding, {
185
+ type: "text",
186
+ });
165
187
 
166
188
  return (
167
189
  <label>
@@ -179,6 +201,21 @@ function BudgetInput({ store }: { store: Store<FormState> }) {
179
201
  }
180
202
  ```
181
203
 
204
+ For an imperative editor or another non-DOM control, use the same binding
205
+ through `useStoreBinding`. It parses commits, exposes validation metadata, and
206
+ synchronizes external store changes without echoing its own dispatch:
207
+
208
+ ```tsx
209
+ const field = useStoreBinding(store, budgetBinding, {
210
+ onStoreChange: (input) => editorRef.current?.setValue(input),
211
+ });
212
+
213
+ <ExternalEditor
214
+ defaultValue={field.initialValue}
215
+ onChange={(input) => field.commit(input)}
216
+ />;
217
+ ```
218
+
182
219
  Generated lenses and codecs can be checked with the exported law assertions in
183
220
  unit tests:
184
221
 
@@ -200,32 +237,29 @@ values, plus `format(parse(input).value)` for successful canonical inputs when
200
237
  `inputs` are supplied. Normalizing or lossy codecs may supply domain-specific
201
238
  `equals` and `equalsInput` functions.
202
239
 
203
- For non-input controllers, call the returned `dispatch` when the controller
204
- changes:
240
+ For non-input actions, dispatch directly to the store:
205
241
 
206
242
  ```tsx
207
- import { useStoreController } from "react-store-input";
243
+ import type { Store } from "gw-store";
208
244
 
209
245
  function Counter({ store }: { store: Store<{ count: number }> }) {
210
- const { dispatch } = useStoreController(store, {
211
- onSubscribe: () => {},
212
- onDispatch: (state) => {
246
+ const increment = () =>
247
+ store.dispatch((state) => {
213
248
  state.count += 1;
214
- },
215
- });
249
+ });
216
250
 
217
- return <button onClick={dispatch}>Increment</button>;
251
+ return <button onClick={increment}>Increment</button>;
218
252
  }
219
253
  ```
220
254
 
221
255
  ## Optional text editor
222
256
 
223
257
  The ProseMirror-based editor is a separate entry point so normal forms do not
224
- download or bundle editor dependencies. It requires React 19 and an explicit
225
- optional peer installation:
258
+ download or bundle editor dependencies. It requires React 19, Node.js 20 or
259
+ newer, and an explicit optional peer installation:
226
260
 
227
261
  ```sh
228
- npm install gw-react-text-editor
262
+ npm install gw-rich-text-editor
229
263
  ```
230
264
 
231
265
  ```tsx
@@ -244,8 +278,8 @@ Source code is grouped by responsibility:
244
278
  ```text
245
279
  src/
246
280
  ├─ binding/ Lens, Codec, Binding, and law assertions
247
- ├─ input/ DOM value conversion, reset coordination, and input hooks
248
- ├─ form/ bound components and useFormStore composition
281
+ ├─ input/ DOM value conversion, reset coordination, and element hooks
282
+ ├─ form/ standalone and store-bound input components
249
283
  ├─ store/ controller and render helpers
250
284
  └─ editor/ optional text-editor integration
251
285
 
package/dist/index.d.mts CHANGED
@@ -1,20 +1,11 @@
1
- import { Immutable, Draft } from 'immer';
2
- import { Store, EqualityFn } from 'gw-store';
3
- export * from 'gw-store';
4
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { Immutable, Draft } from 'immer';
3
+ import { EqualityFn, Store } from 'gw-store';
5
4
  import * as react from 'react';
6
- import { ReactNode, ChangeEvent, HTMLInputTypeAttribute, RefObject, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
5
+ import { ReactNode, ChangeEvent, HTMLInputTypeAttribute, RefObject, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
7
6
  import { Result } from 'gw-result';
8
7
  export { Result, err, ok } from 'gw-result';
9
8
 
10
- type StoreControllerProps<TState extends object> = {
11
- onSubscribe: (state: Immutable<TState>) => void;
12
- onDispatch: (state: Draft<TState>) => void;
13
- };
14
- declare function useStoreController<TState extends object>(store: Store<TState>, props: StoreControllerProps<TState>): {
15
- dispatch: () => void;
16
- };
17
-
18
9
  type CreateRender<TState extends object> = (selector: (state: Immutable<TState>) => ReactNode, compare?: EqualityFn<Immutable<TState>>) => ReactNode;
19
10
  declare function createRender<TState extends object>(store: Store<TState>, selector: (state: Immutable<TState>) => ReactNode, compare?: EqualityFn<Immutable<TState>>): react_jsx_runtime.JSX.Element;
20
11
  declare function createRenderWithStore<TState extends object>(store: Store<TState>): CreateRender<TState>;
@@ -59,6 +50,24 @@ declare function assertCodecLaws<TValue, TInput, TError>(codec: Codec<TValue, TI
59
50
  equalsInput?: Equality<TInput>;
60
51
  }): void;
61
52
 
53
+ type StoreBindingMeta<TError> = {
54
+ valid: true;
55
+ error?: never;
56
+ } | {
57
+ valid: false;
58
+ error: TError;
59
+ };
60
+ type StoreBindingOptions<TValue, TInput> = {
61
+ onStoreChange?: (input: TInput, value: TValue) => void;
62
+ };
63
+ type StoreBindingResult<TValue, TInput, TError> = {
64
+ initialValue: TInput;
65
+ meta: StoreBindingMeta<TError>;
66
+ commit: (input: TInput) => Result<TValue, TError>;
67
+ reset: (value: TValue) => void;
68
+ };
69
+ declare function useStoreBinding<TState extends object, TValue, TInput, TError>(store: Store<TState>, binding: InputBinding<TState, TValue, TInput, TError>, options?: StoreBindingOptions<TValue, TInput>): StoreBindingResult<TValue, TInput, TError>;
70
+
62
71
  type InputDisplayValue = string | number | readonly string[];
63
72
  type InputStateValue = string | string[];
64
73
  type InputControlValue = string | readonly string[] | number | boolean | FileList | null;
@@ -79,20 +88,14 @@ type StoreInputDomProps<TInputElement> = {
79
88
  defaultChecked?: boolean;
80
89
  onChange: (event: ChangeEvent<TInputElement>) => void;
81
90
  };
82
- type StoreInputMeta<TError> = {
83
- valid: true;
84
- error?: never;
85
- } | {
86
- valid: false;
87
- error: TError;
88
- };
91
+ type StoreInputMeta<TError> = StoreBindingMeta<TError>;
89
92
  type BindingInputResult<TInputElement, TError> = {
90
93
  inputProps: StoreInputDomProps<TInputElement>;
91
94
  meta: StoreInputMeta<TError>;
92
95
  };
93
96
 
94
97
  type StoreElement$2 = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
95
- declare function useStoreInput<TInputElement extends StoreElement$2, TState extends object, TValue, TInput extends InputControlValue, TError>(ref: RefObject<TInputElement | null>, store: Store<TState>, binding: InputBinding<TState, TValue, TInput, TError>, options?: StoreInputBindingOptions<TInputElement, TValue>): BindingInputResult<TInputElement, TError>;
98
+ declare function useStoreHTMLElement<TInputElement extends StoreElement$2, TState extends object, TValue, TInput extends InputControlValue, TError>(ref: RefObject<TInputElement | null>, store: Store<TState>, binding: InputBinding<TState, TValue, TInput, TError>, options?: StoreInputBindingOptions<TInputElement, TValue>): BindingInputResult<TInputElement, TError>;
96
99
 
97
100
  type StoreElement$1 = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
98
101
  type StoreInputWithNameProps<TInputElement, TState extends object, TName extends keyof TState> = StoreInputOptions<TInputElement> & {
@@ -111,18 +114,14 @@ type StoreInputWithNameComponentProps<TElement extends StoreElement, TState exte
111
114
  type StoreComponentPropsWithStore<TElement extends StoreElement, TState extends object, TName extends keyof TState> = StoreInputWithNameComponentProps<TElement, TState, TName> & {
112
115
  store: Store<TState>;
113
116
  };
117
+ type StoreComponents<TState extends object> = {
118
+ input: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName>) => ReactElement | null;
119
+ select: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName>) => ReactElement | null;
120
+ textarea: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName>) => ReactElement | null;
121
+ };
114
122
  declare function Input<TState extends object, TName extends keyof TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName>): react_jsx_runtime.JSX.Element;
115
123
  declare function Select<TState extends object, TName extends keyof TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName>): react_jsx_runtime.JSX.Element;
116
124
  declare function Textarea<TState extends object, TName extends keyof TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName>): react_jsx_runtime.JSX.Element;
117
- declare function useStoreComponent<TState extends object>(store: Store<TState>): {
118
- input: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName>) => react_jsx_runtime.JSX.Element;
119
- select: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName>) => react_jsx_runtime.JSX.Element;
120
- textarea: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName>) => react_jsx_runtime.JSX.Element;
121
- };
122
-
123
- type FormStore<TState extends object> = Store<TState> & ReturnType<typeof useStoreComponent<TState>> & {
124
- render: CreateRender<TState>;
125
- };
126
- declare function useFormStore<TState extends object>(initialState: TState): FormStore<TState>;
125
+ declare function useStoreInput<TState extends object>(store: Store<TState>): StoreComponents<TState>;
127
126
 
128
- export { type BindingInputResult, type Codec, type CreateRender, type FormStore, Input, type InputBinding, type InputControlValue, type InputDisplayValue, type InputStateValue, type Lens, type LensBuilder, Select, type StateLens, type StoreComponentPropsWithStore, type StoreControllerProps, type StoreInputBindingOptions, type StoreInputDomProps, type StoreInputMeta, type StoreInputOptions, type StoreInputWithNameComponentProps, type StoreInputWithNameProps, Textarea, assertCodecLaws, assertLensLaws, createRender, createRenderWithStore, defineBinding, defineCodec, defineLens, stateLens, useFormStore, useStoreComponent, useStoreController, useStoreInput, useStoreInputWithName };
127
+ export { type BindingInputResult, type Codec, type CreateRender, Input, type InputBinding, type InputControlValue, type InputDisplayValue, type InputStateValue, type Lens, type LensBuilder, Select, type StateLens, type StoreBindingMeta, type StoreBindingOptions, type StoreBindingResult, type StoreComponentPropsWithStore, type StoreComponents, type StoreInputBindingOptions, type StoreInputDomProps, type StoreInputMeta, type StoreInputOptions, type StoreInputWithNameComponentProps, type StoreInputWithNameProps, Textarea, assertCodecLaws, assertLensLaws, createRender, createRenderWithStore, defineBinding, defineCodec, defineLens, stateLens, useStoreBinding, useStoreHTMLElement, useStoreInput, useStoreInputWithName };
package/dist/index.d.ts CHANGED
@@ -1,20 +1,11 @@
1
- import { Immutable, Draft } from 'immer';
2
- import { Store, EqualityFn } from 'gw-store';
3
- export * from 'gw-store';
4
1
  import * as react_jsx_runtime from 'react/jsx-runtime';
2
+ import { Immutable, Draft } from 'immer';
3
+ import { EqualityFn, Store } from 'gw-store';
5
4
  import * as react from 'react';
6
- import { ReactNode, ChangeEvent, HTMLInputTypeAttribute, RefObject, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes } from 'react';
5
+ import { ReactNode, ChangeEvent, HTMLInputTypeAttribute, RefObject, InputHTMLAttributes, SelectHTMLAttributes, TextareaHTMLAttributes, ReactElement } from 'react';
7
6
  import { Result } from 'gw-result';
8
7
  export { Result, err, ok } from 'gw-result';
9
8
 
10
- type StoreControllerProps<TState extends object> = {
11
- onSubscribe: (state: Immutable<TState>) => void;
12
- onDispatch: (state: Draft<TState>) => void;
13
- };
14
- declare function useStoreController<TState extends object>(store: Store<TState>, props: StoreControllerProps<TState>): {
15
- dispatch: () => void;
16
- };
17
-
18
9
  type CreateRender<TState extends object> = (selector: (state: Immutable<TState>) => ReactNode, compare?: EqualityFn<Immutable<TState>>) => ReactNode;
19
10
  declare function createRender<TState extends object>(store: Store<TState>, selector: (state: Immutable<TState>) => ReactNode, compare?: EqualityFn<Immutable<TState>>): react_jsx_runtime.JSX.Element;
20
11
  declare function createRenderWithStore<TState extends object>(store: Store<TState>): CreateRender<TState>;
@@ -59,6 +50,24 @@ declare function assertCodecLaws<TValue, TInput, TError>(codec: Codec<TValue, TI
59
50
  equalsInput?: Equality<TInput>;
60
51
  }): void;
61
52
 
53
+ type StoreBindingMeta<TError> = {
54
+ valid: true;
55
+ error?: never;
56
+ } | {
57
+ valid: false;
58
+ error: TError;
59
+ };
60
+ type StoreBindingOptions<TValue, TInput> = {
61
+ onStoreChange?: (input: TInput, value: TValue) => void;
62
+ };
63
+ type StoreBindingResult<TValue, TInput, TError> = {
64
+ initialValue: TInput;
65
+ meta: StoreBindingMeta<TError>;
66
+ commit: (input: TInput) => Result<TValue, TError>;
67
+ reset: (value: TValue) => void;
68
+ };
69
+ declare function useStoreBinding<TState extends object, TValue, TInput, TError>(store: Store<TState>, binding: InputBinding<TState, TValue, TInput, TError>, options?: StoreBindingOptions<TValue, TInput>): StoreBindingResult<TValue, TInput, TError>;
70
+
62
71
  type InputDisplayValue = string | number | readonly string[];
63
72
  type InputStateValue = string | string[];
64
73
  type InputControlValue = string | readonly string[] | number | boolean | FileList | null;
@@ -79,20 +88,14 @@ type StoreInputDomProps<TInputElement> = {
79
88
  defaultChecked?: boolean;
80
89
  onChange: (event: ChangeEvent<TInputElement>) => void;
81
90
  };
82
- type StoreInputMeta<TError> = {
83
- valid: true;
84
- error?: never;
85
- } | {
86
- valid: false;
87
- error: TError;
88
- };
91
+ type StoreInputMeta<TError> = StoreBindingMeta<TError>;
89
92
  type BindingInputResult<TInputElement, TError> = {
90
93
  inputProps: StoreInputDomProps<TInputElement>;
91
94
  meta: StoreInputMeta<TError>;
92
95
  };
93
96
 
94
97
  type StoreElement$2 = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
95
- declare function useStoreInput<TInputElement extends StoreElement$2, TState extends object, TValue, TInput extends InputControlValue, TError>(ref: RefObject<TInputElement | null>, store: Store<TState>, binding: InputBinding<TState, TValue, TInput, TError>, options?: StoreInputBindingOptions<TInputElement, TValue>): BindingInputResult<TInputElement, TError>;
98
+ declare function useStoreHTMLElement<TInputElement extends StoreElement$2, TState extends object, TValue, TInput extends InputControlValue, TError>(ref: RefObject<TInputElement | null>, store: Store<TState>, binding: InputBinding<TState, TValue, TInput, TError>, options?: StoreInputBindingOptions<TInputElement, TValue>): BindingInputResult<TInputElement, TError>;
96
99
 
97
100
  type StoreElement$1 = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
98
101
  type StoreInputWithNameProps<TInputElement, TState extends object, TName extends keyof TState> = StoreInputOptions<TInputElement> & {
@@ -111,18 +114,14 @@ type StoreInputWithNameComponentProps<TElement extends StoreElement, TState exte
111
114
  type StoreComponentPropsWithStore<TElement extends StoreElement, TState extends object, TName extends keyof TState> = StoreInputWithNameComponentProps<TElement, TState, TName> & {
112
115
  store: Store<TState>;
113
116
  };
117
+ type StoreComponents<TState extends object> = {
118
+ input: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName>) => ReactElement | null;
119
+ select: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName>) => ReactElement | null;
120
+ textarea: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName>) => ReactElement | null;
121
+ };
114
122
  declare function Input<TState extends object, TName extends keyof TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLInputElement, TState, TName>): react_jsx_runtime.JSX.Element;
115
123
  declare function Select<TState extends object, TName extends keyof TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLSelectElement, TState, TName>): react_jsx_runtime.JSX.Element;
116
124
  declare function Textarea<TState extends object, TName extends keyof TState>({ store, ...props }: StoreComponentPropsWithStore<HTMLTextAreaElement, TState, TName>): react_jsx_runtime.JSX.Element;
117
- declare function useStoreComponent<TState extends object>(store: Store<TState>): {
118
- input: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLInputElement, TState, TName>) => react_jsx_runtime.JSX.Element;
119
- select: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLSelectElement, TState, TName>) => react_jsx_runtime.JSX.Element;
120
- textarea: <TName extends keyof TState>(props: StoreInputWithNameComponentProps<HTMLTextAreaElement, TState, TName>) => react_jsx_runtime.JSX.Element;
121
- };
122
-
123
- type FormStore<TState extends object> = Store<TState> & ReturnType<typeof useStoreComponent<TState>> & {
124
- render: CreateRender<TState>;
125
- };
126
- declare function useFormStore<TState extends object>(initialState: TState): FormStore<TState>;
125
+ declare function useStoreInput<TState extends object>(store: Store<TState>): StoreComponents<TState>;
127
126
 
128
- export { type BindingInputResult, type Codec, type CreateRender, type FormStore, Input, type InputBinding, type InputControlValue, type InputDisplayValue, type InputStateValue, type Lens, type LensBuilder, Select, type StateLens, type StoreComponentPropsWithStore, type StoreControllerProps, type StoreInputBindingOptions, type StoreInputDomProps, type StoreInputMeta, type StoreInputOptions, type StoreInputWithNameComponentProps, type StoreInputWithNameProps, Textarea, assertCodecLaws, assertLensLaws, createRender, createRenderWithStore, defineBinding, defineCodec, defineLens, stateLens, useFormStore, useStoreComponent, useStoreController, useStoreInput, useStoreInputWithName };
127
+ export { type BindingInputResult, type Codec, type CreateRender, Input, type InputBinding, type InputControlValue, type InputDisplayValue, type InputStateValue, type Lens, type LensBuilder, Select, type StateLens, type StoreBindingMeta, type StoreBindingOptions, type StoreBindingResult, type StoreComponentPropsWithStore, type StoreComponents, type StoreInputBindingOptions, type StoreInputDomProps, type StoreInputMeta, type StoreInputOptions, type StoreInputWithNameComponentProps, type StoreInputWithNameProps, Textarea, assertCodecLaws, assertLensLaws, createRender, createRenderWithStore, defineBinding, defineCodec, defineLens, stateLens, useStoreBinding, useStoreHTMLElement, useStoreInput, useStoreInputWithName };