@page-speed/forms 0.8.0 → 0.8.1

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.
Files changed (2) hide show
  1. package/README.md +24 -7
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,8 +1,10 @@
1
- # ⌨️ `@page-speed/forms`
1
+ # @page-speed/forms
2
+
3
+ ## Type-safe, high-performance React form state and input components for OpenSite/DashTrack workloads
2
4
 
3
5
  ![Page Speed React Forms](https://octane.cdn.ing/api/v1/images/transform?url=https://cdn.ing/assets/i/r/286339/nwqgw37pigfluhcmmjmpql3yj9y4/github.png&f=webp&q=90)
4
6
 
5
- > Type-safe, high-performance React form state and input components for OpenSite/DashTrack workloads.
7
+ <br />
6
8
 
7
9
  [![npm version](https://img.shields.io/npm/v/@page-speed/forms?style=flat-square)](https://www.npmjs.com/package/@page-speed/forms)
8
10
  [![npm downloads](https://img.shields.io/npm/dm/@page-speed/forms?style=flat-square)](https://www.npmjs.com/package/@page-speed/forms)
@@ -43,7 +45,7 @@ import {
43
45
 
44
46
  const fields: FormFieldConfig[] = [
45
47
  {
46
- name: "fullName",
48
+ name: "full_name",
47
49
  type: "text",
48
50
  label: "Full Name",
49
51
  required: true,
@@ -65,7 +67,7 @@ const fields: FormFieldConfig[] = [
65
67
  columnSpan: 6,
66
68
  },
67
69
  {
68
- name: "message",
70
+ name: "content",
69
71
  type: "textarea",
70
72
  label: "Message",
71
73
  required: true,
@@ -205,40 +207,49 @@ function ContactBlock({ formEngineSetup }: { formEngineSetup?: FormEngineSetup }
205
207
  ## Package Entry Points
206
208
 
207
209
  ### Main
210
+
208
211
  - `@page-speed/forms`
209
212
 
210
- Exports:
213
+ #### Exports:
214
+
211
215
  - `useForm`, `useField`, `Form`, `Field`, `FormContext`
212
216
  - Core form/types interfaces
213
217
 
214
218
  ### Integration (Recommended)
219
+
215
220
  - `@page-speed/forms/integration`
216
221
 
217
- Exports:
222
+ #### Exports:
223
+
218
224
  - `FormEngine`, `FormEngineSetup`, `FormEngineProps`
219
225
  - `FormFieldConfig`, `FormEngineStyleRules`, `FormEngineLayoutSettings`
220
226
  - `DynamicFormField`, `useContactForm`, `useFileUpload`
221
227
 
222
228
  ### Inputs
229
+
223
230
  - `@page-speed/forms/inputs`
224
231
 
225
- Exports:
232
+ #### Exports:
233
+
226
234
  - `TextInput`, `TextArea`, `Checkbox`, `CheckboxGroup`, `Radio`
227
235
  - `Select`, `MultiSelect`, `DatePicker`, `DateRangePicker`, `TimePicker`
228
236
  - `FileInput`
229
237
 
230
238
  ### Validation
239
+
231
240
  - `@page-speed/forms/validation`
232
241
  - `@page-speed/forms/validation/rules`
233
242
  - `@page-speed/forms/validation/utils`
234
243
  - `@page-speed/forms/validation/valibot`
235
244
 
236
245
  ### Upload
246
+
237
247
  - `@page-speed/forms/upload`
238
248
 
239
249
  ## Input Notes
240
250
 
241
251
  ### `TimePicker`
252
+
242
253
  `TimePicker` uses a native `input[type="time"]` UX internally.
243
254
 
244
255
  - Accepts controlled values in `HH:mm` (24-hour) or `h:mm AM/PM` (12-hour)
@@ -246,11 +257,13 @@ Exports:
246
257
  - Emits `h:mm AM/PM` when `use24Hour` is `false`
247
258
 
248
259
  ### `DatePicker` and `DateRangePicker`
260
+
249
261
  - Calendar popovers close on outside click
250
262
  - Compact month/day layout using tokenized Tailwind classes
251
263
  - `DateRangePicker` renders two months and highlights endpoints + in-range dates
252
264
 
253
265
  ### `Select` and `MultiSelect`
266
+
254
267
  - Close on outside click
255
268
  - Search support
256
269
  - Option groups
@@ -289,6 +302,7 @@ See `INPUT_AUTOFILL_RESET_CLASSES` in `src/utils.ts`.
289
302
  ### Token requirements
290
303
 
291
304
  Ensure your app defines semantic tokens used in classes such as:
305
+
292
306
  - `background`, `foreground`, `border`, `input`, `ring`
293
307
  - `primary`, `primary-foreground`
294
308
  - `muted`, `muted-foreground`
@@ -336,6 +350,7 @@ function CustomForm() {
336
350
  ## Validation Utilities
337
351
 
338
352
  Use built-in rules:
353
+
339
354
  - `required`, `email`, `url`, `phone`
340
355
  - `minLength`, `maxLength`, `min`, `max`
341
356
  - `pattern`, `matches`, `oneOf`
@@ -343,6 +358,7 @@ Use built-in rules:
343
358
  - `compose`
344
359
 
345
360
  Use utilities from `/validation/utils`:
361
+
346
362
  - `debounce`, `asyncValidator`, `crossFieldValidator`, `when`
347
363
  - `setErrorMessages`, `getErrorMessage`, `resetErrorMessages`
348
364
 
@@ -351,6 +367,7 @@ Use utilities from `/validation/utils`:
351
367
  `FileInput` and `FormEngine` support validation, drag/drop, preview, and crop workflows.
352
368
 
353
369
  For full two-phase upload patterns and serializer usage, see:
370
+
354
371
  - [`docs/FILE_UPLOADS.md`](./docs/FILE_UPLOADS.md)
355
372
  - `@page-speed/forms/integration`
356
373
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@page-speed/forms",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "Ultra-high-performance React form library with field-level reactivity and tree-shakable architecture",
5
5
  "keywords": [
6
6
  "react",