@datum-cloud/datum-ui 0.5.0 → 0.6.0-alpha.a49f238
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/README.md +75 -40
- package/dist/adapter-context-BFqfq4Io.mjs +25 -0
- package/dist/components/features/form/adapter-context.d.ts +17 -0
- package/dist/components/features/form/adapter-context.d.ts.map +1 -0
- package/dist/components/features/form/adapter-types.d.ts +120 -0
- package/dist/components/features/form/adapter-types.d.ts.map +1 -0
- package/dist/components/features/form/adapters/conform/conform-adapter.d.ts +9 -0
- package/dist/components/features/form/adapters/conform/conform-adapter.d.ts.map +1 -0
- package/dist/components/features/form/adapters/conform/conform-provider.d.ts +22 -0
- package/dist/components/features/form/adapters/conform/conform-provider.d.ts.map +1 -0
- package/dist/components/features/form/adapters/conform/index.d.ts +3 -0
- package/dist/components/features/form/adapters/conform/index.d.ts.map +1 -0
- package/dist/components/features/form/adapters/rhf/index.d.ts +3 -0
- package/dist/components/features/form/adapters/rhf/index.d.ts.map +1 -0
- package/dist/components/features/form/adapters/rhf/rhf-adapter.d.ts +10 -0
- package/dist/components/features/form/adapters/rhf/rhf-adapter.d.ts.map +1 -0
- package/dist/components/features/form/adapters/rhf/rhf-provider.d.ts +22 -0
- package/dist/components/features/form/adapters/rhf/rhf-provider.d.ts.map +1 -0
- package/dist/components/features/form/components/form-autocomplete.d.ts.map +1 -1
- package/dist/components/features/form/components/form-checkbox.d.ts.map +1 -1
- package/dist/components/features/form/components/form-copy-box.d.ts.map +1 -1
- package/dist/components/features/form/components/form-custom.d.ts.map +1 -1
- package/dist/components/features/form/components/form-field-array.d.ts +5 -17
- package/dist/components/features/form/components/form-field-array.d.ts.map +1 -1
- package/dist/components/features/form/components/form-field.d.ts +7 -21
- package/dist/components/features/form/components/form-field.d.ts.map +1 -1
- package/dist/components/features/form/components/form-input-group.d.ts +4 -4
- package/dist/components/features/form/components/form-input-group.d.ts.map +1 -1
- package/dist/components/features/form/components/form-input.d.ts.map +1 -1
- package/dist/components/features/form/components/form-radio-group.d.ts.map +1 -1
- package/dist/components/features/form/components/form-root.d.ts +5 -25
- package/dist/components/features/form/components/form-root.d.ts.map +1 -1
- package/dist/components/features/form/components/form-select.d.ts.map +1 -1
- package/dist/components/features/form/components/form-switch.d.ts.map +1 -1
- package/dist/components/features/form/components/form-textarea.d.ts.map +1 -1
- package/dist/components/features/form/components/index.d.ts +0 -1
- package/dist/components/features/form/components/index.d.ts.map +1 -1
- package/dist/components/features/form/components/stepper/form-stepper.d.ts.map +1 -1
- package/dist/components/features/form/context/form-context.d.ts +2 -2
- package/dist/components/features/form/context/form-context.d.ts.map +1 -1
- package/dist/components/features/form/hooks/index.d.ts +1 -1
- package/dist/components/features/form/hooks/index.d.ts.map +1 -1
- package/dist/components/features/form/hooks/use-field.d.ts +12 -18
- package/dist/components/features/form/hooks/use-field.d.ts.map +1 -1
- package/dist/components/features/form/hooks/use-form-state.d.ts +36 -0
- package/dist/components/features/form/hooks/use-form-state.d.ts.map +1 -0
- package/dist/components/features/form/hooks/use-watch.d.ts +9 -20
- package/dist/components/features/form/hooks/use-watch.d.ts.map +1 -1
- package/dist/components/features/form/index.d.ts +63 -44
- package/dist/components/features/form/index.d.ts.map +1 -1
- package/dist/components/features/form/stepper/index.d.ts +17 -0
- package/dist/components/features/form/stepper/index.d.ts.map +1 -0
- package/dist/components/features/form/types/index.d.ts +68 -32
- package/dist/components/features/form/types/index.d.ts.map +1 -1
- package/dist/components/features/form/utils/get-field-constraints.d.ts +11 -0
- package/dist/components/features/form/utils/get-field-constraints.d.ts.map +1 -0
- package/dist/components/features/form/utils/get-schema-defaults.d.ts +24 -0
- package/dist/components/features/form/utils/get-schema-defaults.d.ts.map +1 -0
- package/dist/date-picker/index.mjs +1 -1
- package/dist/form/adapters/conform/index.mjs +320 -0
- package/dist/form/adapters/rhf/index.mjs +275 -0
- package/dist/form/index.mjs +3 -2
- package/dist/form/stepper/index.mjs +542 -0
- package/dist/form-C6AOB2f4.mjs +1397 -0
- package/dist/form-context-Ccxm-wqL.mjs +17 -0
- package/dist/get-field-constraints-D4xnXJEg.mjs +48 -0
- package/dist/grid/index.mjs +1 -1
- package/dist/hooks/index.mjs +2 -2
- package/dist/index.mjs +14 -13
- package/dist/input-number/index.mjs +1 -1
- package/dist/map/index.mjs +1 -1
- package/dist/{map-ClxB41Hg.mjs → map-BqpteT_8.mjs} +1 -1
- package/dist/more-actions/index.mjs +1 -1
- package/dist/page-title/index.mjs +1 -1
- package/dist/stepper/index.mjs +1 -320
- package/dist/stepper-C92Ib8Iy.mjs +321 -0
- package/dist/tag-input/index.mjs +1 -1
- package/dist/task-queue/index.mjs +1 -1
- package/package.json +27 -2
- package/dist/form-Co3fM4B7.mjs +0 -2114
- /package/dist/{col-q-J99UHe.mjs → col-CiSpQPUT.mjs} +0 -0
- /package/dist/{hooks-Cb7YlxN4.mjs → hooks-DNjmSsJT.mjs} +0 -0
- /package/dist/{input-number-mDB-5M5C.mjs → input-number-BTQdHqVZ.mjs} +0 -0
- /package/dist/{map-leaflet-imports-CaMm_rdF.mjs → map-leaflet-imports-CT4SpoDi.mjs} +0 -0
- /package/dist/{more-actions-CGagbIDT.mjs → more-actions-CucrYUnA.mjs} +0 -0
- /package/dist/{page-title-R7QbfbWp.mjs → page-title-CmsIi_A3.mjs} +0 -0
- /package/dist/{tag-input-BVSwNcRd.mjs → tag-input-B91C2wdr.mjs} +0 -0
- /package/dist/{task-queue-dropdown-DyM5R8KF.mjs → task-queue-dropdown-OOFuJcHb.mjs} +0 -0
- /package/dist/{to-api-format-BnbRFYQI.mjs → to-api-format-P0gmlqe8.mjs} +0 -0
- /package/dist/{use-copy-to-clipboard-BGdTmkFV.mjs → use-copy-to-clipboard-C2IEmhDn.mjs} +0 -0
package/README.md
CHANGED
|
@@ -88,7 +88,7 @@ Some components with shared heavy dependencies are grouped under a single subpat
|
|
|
88
88
|
| `@datum-cloud/datum-ui/map` | `Map`, `PlaceAutocomplete`, + map controls | `leaflet`, `react-leaflet`, + leaflet plugins |
|
|
89
89
|
| `@datum-cloud/datum-ui/dropzone` | `Dropzone`, `FileInputButton` | `react-dropzone` |
|
|
90
90
|
| `@datum-cloud/datum-ui/chart` | `ChartContainer`, `ChartTooltip`, etc. | `recharts` |
|
|
91
|
-
| `@datum-cloud/datum-ui/form` | `Form`, `FormField`, `FormInput`, etc. |
|
|
91
|
+
| `@datum-cloud/datum-ui/form` | `Form`, `FormField`, `FormInput`, etc. | See [Form Adapters](#form-adapters) below |
|
|
92
92
|
|
|
93
93
|
## Components
|
|
94
94
|
|
|
@@ -136,31 +136,31 @@ Thin wrappers around shadcn/Radix primitives with Datum styling. **Radix UI depe
|
|
|
136
136
|
|
|
137
137
|
Complex, fully-customized components with significant business logic.
|
|
138
138
|
|
|
139
|
-
| Component | Additional Dependencies
|
|
140
|
-
| -------------------------------------------------------------------------------------------------------------------------------- |
|
|
141
|
-
| `Autocomplete` | —
|
|
142
|
-
| `AvatarStack` | —
|
|
143
|
-
| `CalendarDatePicker` | `react-day-picker`, `date-fns`
|
|
144
|
-
| `CodeEditor`, `CodeEditorTabs` | `@monaco-editor/react`, `monaco-editor`
|
|
145
|
-
| `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableToolbar`, `DataTableViewOptions` | `@tanstack/react-table`
|
|
146
|
-
| `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection` | —
|
|
147
|
-
| `Dropzone` | `react-dropzone`
|
|
148
|
-
| `EmptyContent` | —
|
|
149
|
-
| `FileInputButton` | —
|
|
150
|
-
| `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormFieldArray` |
|
|
151
|
-
| `Grid` | `@tanstack/react-virtual`
|
|
152
|
-
| `InputNumber` | `react-number-format`
|
|
153
|
-
| `InputWithAddons` | —
|
|
154
|
-
| `LoaderOverlay` | —
|
|
155
|
-
| `MoreActions` | —
|
|
156
|
-
| `NProgress` | `nprogress`
|
|
157
|
-
| `PageTitle` | —
|
|
158
|
-
| `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton` | —
|
|
159
|
-
| `Stepper` | `@stepperize/react`
|
|
160
|
-
| `TagInput` | —
|
|
161
|
-
| `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog` | —
|
|
162
|
-
| `TimeRangePicker` | `date-fns`, `date-fns-tz`
|
|
163
|
-
| `Toast`, `Toaster`, `useToast` | `sonner`
|
|
139
|
+
| Component | Additional Dependencies | Description |
|
|
140
|
+
| -------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------- | ------------------------------------------ |
|
|
141
|
+
| `Autocomplete` | — | Search autocomplete input |
|
|
142
|
+
| `AvatarStack` | — | Stacked avatar display |
|
|
143
|
+
| `CalendarDatePicker` | `react-day-picker`, `date-fns` | Date/range picker with presets |
|
|
144
|
+
| `CodeEditor`, `CodeEditorTabs` | `@monaco-editor/react`, `monaco-editor` | Monaco-based code editor with VS Code UX |
|
|
145
|
+
| `DataTable`, `DataTableColumnHeader`, `DataTablePagination`, `DataTableToolbar`, `DataTableViewOptions` | `@tanstack/react-table` | Advanced data table with sorting/filtering |
|
|
146
|
+
| `Dropdown`, `DropdownHeader`, `DropdownItem`, `DropdownSection` | — | Dropdown menu |
|
|
147
|
+
| `Dropzone` | `react-dropzone` | File drag-and-drop upload area |
|
|
148
|
+
| `EmptyContent` | — | Empty state placeholder |
|
|
149
|
+
| `FileInputButton` | — | File upload button |
|
|
150
|
+
| `Form`, `FormField`, `FormInput`, `FormTextarea`, `FormSelect`, `FormCheckbox`, `FormSwitch`, `FormRadioGroup`, `FormFieldArray` | See [Form Adapters](#form-adapters) below | Form system with pluggable adapter support |
|
|
151
|
+
| `Grid` | `@tanstack/react-virtual` | Virtualized data grid |
|
|
152
|
+
| `InputNumber` | `react-number-format` | Numeric input with formatting |
|
|
153
|
+
| `InputWithAddons` | — | Input with prefix/suffix addons |
|
|
154
|
+
| `LoaderOverlay` | — | Full-screen loading overlay |
|
|
155
|
+
| `MoreActions` | — | Three-dot actions menu |
|
|
156
|
+
| `NProgress` | `nprogress` | Page navigation progress bar |
|
|
157
|
+
| `PageTitle` | — | Page header with breadcrumbs |
|
|
158
|
+
| `Sidebar`, `SidebarHeader`, `SidebarContent`, `SidebarFooter`, `SidebarMenu`, `SidebarMenuItem`, `SidebarMenuButton` | — | App sidebar navigation |
|
|
159
|
+
| `Stepper` | `@stepperize/react` | Multi-step wizard |
|
|
160
|
+
| `TagInput` | — | Tag/chip input |
|
|
161
|
+
| `TaskQueue`, `TaskQueueProvider`, `TaskQueueDropdown`, `TaskPanelHeader`, `TaskSummaryDialog` | — | Background task queue with progress UI |
|
|
162
|
+
| `TimeRangePicker` | `date-fns`, `date-fns-tz` | Time range selector with timezone support |
|
|
163
|
+
| `Toast`, `Toaster`, `useToast` | `sonner` | Toast notifications |
|
|
164
164
|
|
|
165
165
|
## Usage Examples
|
|
166
166
|
|
|
@@ -212,26 +212,45 @@ import { Title, Text, Paragraph, Code } from '@datum-cloud/datum-ui/typography'
|
|
|
212
212
|
|
|
213
213
|
### Form with Validation
|
|
214
214
|
|
|
215
|
+
The form system uses a pluggable adapter pattern. Wrap your app with an adapter, then use `Form.*` components as usual:
|
|
216
|
+
|
|
215
217
|
```tsx
|
|
216
|
-
import { Form
|
|
218
|
+
import { Form } from '@datum-cloud/datum-ui/form'
|
|
219
|
+
import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
|
|
220
|
+
// or: import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
|
|
217
221
|
import { z } from 'zod'
|
|
218
222
|
|
|
219
223
|
const schema = z.object({
|
|
220
|
-
name: z.string().min(1),
|
|
224
|
+
name: z.string().min(1, 'Name is required'),
|
|
221
225
|
role: z.enum(['admin', 'user']),
|
|
222
226
|
})
|
|
223
227
|
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
228
|
+
// Wrap your app once with an adapter
|
|
229
|
+
function App() {
|
|
230
|
+
return (
|
|
231
|
+
<ConformAdapter>
|
|
232
|
+
<MyForm />
|
|
233
|
+
</ConformAdapter>
|
|
234
|
+
)
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// Form code is identical regardless of adapter
|
|
238
|
+
function MyForm() {
|
|
239
|
+
return (
|
|
240
|
+
<Form.Root schema={schema} onSubmit={handleSubmit}>
|
|
241
|
+
<Form.Field name="name" label="Name" required>
|
|
242
|
+
<Form.Input />
|
|
243
|
+
</Form.Field>
|
|
244
|
+
<Form.Field name="role" label="Role" required>
|
|
245
|
+
<Form.Select placeholder="Select a role">
|
|
246
|
+
<Form.SelectItem value="admin">Admin</Form.SelectItem>
|
|
247
|
+
<Form.SelectItem value="user">User</Form.SelectItem>
|
|
248
|
+
</Form.Select>
|
|
249
|
+
</Form.Field>
|
|
250
|
+
<Form.Submit>Save</Form.Submit>
|
|
251
|
+
</Form.Root>
|
|
252
|
+
)
|
|
253
|
+
}
|
|
235
254
|
```
|
|
236
255
|
|
|
237
256
|
### Map
|
|
@@ -364,9 +383,12 @@ Many components require additional packages. Install only what you use:
|
|
|
364
383
|
> Replace `npm install` with `yarn add`, `pnpm add`, or `bun add` for your package manager.
|
|
365
384
|
|
|
366
385
|
```bash
|
|
367
|
-
# Forms
|
|
386
|
+
# Forms — Conform adapter
|
|
368
387
|
npm install @conform-to/react @conform-to/zod zod
|
|
369
388
|
|
|
389
|
+
# Forms — React Hook Form adapter (alternative)
|
|
390
|
+
npm install react-hook-form @hookform/resolvers zod
|
|
391
|
+
|
|
370
392
|
# Maps (Map, MapMarker, MapPopup, etc.)
|
|
371
393
|
npm install leaflet react-leaflet leaflet-draw leaflet.fullscreen leaflet.markercluster react-leaflet-markercluster
|
|
372
394
|
|
|
@@ -407,6 +429,19 @@ npm install nuqs
|
|
|
407
429
|
npm install motion
|
|
408
430
|
```
|
|
409
431
|
|
|
432
|
+
## Form Adapters
|
|
433
|
+
|
|
434
|
+
The form system supports pluggable adapters. Choose one and wrap your app:
|
|
435
|
+
|
|
436
|
+
| Adapter | Import Path | Dependencies |
|
|
437
|
+
| ------------------- | --------------------------------------------- | -------------------------------------------------------------------- |
|
|
438
|
+
| **Conform.js** | `@datum-cloud/datum-ui/form/adapters/conform` | `@conform-to/react`, `@conform-to/zod`, `zod` (>=4) |
|
|
439
|
+
| **React Hook Form** | `@datum-cloud/datum-ui/form/adapters/rhf` | `react-hook-form` (>=7.55), `@hookform/resolvers` (>=5), `zod` (>=4) |
|
|
440
|
+
|
|
441
|
+
The `Form.*` component API is identical with either adapter. Switch adapters by changing only the root provider -- no form code changes needed.
|
|
442
|
+
|
|
443
|
+
See the [Form README](./src/components/features/form/README.md) for detailed documentation.
|
|
444
|
+
|
|
410
445
|
## Tech Stack
|
|
411
446
|
|
|
412
447
|
- **React 19** with server component support
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React$1 from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
//#region src/components/features/form/adapter-context.tsx
|
|
4
|
+
const AdapterContext = React$1.createContext(null);
|
|
5
|
+
/**
|
|
6
|
+
* Read the current form adapter from context.
|
|
7
|
+
* Throws with a helpful error if no adapter is found.
|
|
8
|
+
*/
|
|
9
|
+
function useAdapter() {
|
|
10
|
+
const adapter = React$1.use(AdapterContext);
|
|
11
|
+
if (!adapter) throw new Error("No form adapter found. Wrap your application with an adapter provider:\n\n import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'\n // or\n import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'\n\n <ConformAdapter>\n <App />\n </ConformAdapter>");
|
|
12
|
+
return adapter;
|
|
13
|
+
}
|
|
14
|
+
/**
|
|
15
|
+
* Internal provider used by adapter packages (ConformAdapter, RHFAdapter).
|
|
16
|
+
* Consumers don't use this directly.
|
|
17
|
+
*/
|
|
18
|
+
function FormAdapterProvider({ adapter, children }) {
|
|
19
|
+
return /* @__PURE__ */ jsx(AdapterContext, {
|
|
20
|
+
value: adapter,
|
|
21
|
+
children
|
|
22
|
+
});
|
|
23
|
+
}
|
|
24
|
+
//#endregion
|
|
25
|
+
export { useAdapter as n, FormAdapterProvider as t };
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { FormAdapter } from './adapter-types';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Read the current form adapter from context.
|
|
5
|
+
* Throws with a helpful error if no adapter is found.
|
|
6
|
+
*/
|
|
7
|
+
export declare function useAdapter(): FormAdapter;
|
|
8
|
+
export interface FormAdapterProviderProps {
|
|
9
|
+
adapter: FormAdapter;
|
|
10
|
+
children: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
/**
|
|
13
|
+
* Internal provider used by adapter packages (ConformAdapter, RHFAdapter).
|
|
14
|
+
* Consumers don't use this directly.
|
|
15
|
+
*/
|
|
16
|
+
export declare function FormAdapterProvider({ adapter, children }: FormAdapterProviderProps): import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
//# sourceMappingURL=adapter-context.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"adapter-context.d.ts","sourceRoot":"","sources":["../../../../src/components/features/form/adapter-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAClD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B;;;GAGG;AACH,wBAAgB,UAAU,IAAI,WAAW,CAgBxC;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,EAAE,WAAW,CAAA;IACpB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE,wBAAwB,2CAElF"}
|
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
import type { z } from 'zod';
|
|
2
|
+
export interface NormalizedFieldMeta {
|
|
3
|
+
/** Unique field ID for accessibility */
|
|
4
|
+
id: string;
|
|
5
|
+
/** Validation errors for this field */
|
|
6
|
+
errors: string[];
|
|
7
|
+
/** Whether the field is required (derived from schema) */
|
|
8
|
+
required: boolean;
|
|
9
|
+
/** Whether the field value differs from its default value */
|
|
10
|
+
isDirty: boolean;
|
|
11
|
+
/** Whether the field has been focused and blurred */
|
|
12
|
+
isTouched: boolean;
|
|
13
|
+
}
|
|
14
|
+
export interface NormalizedFieldState extends NormalizedFieldMeta {
|
|
15
|
+
/** Field name (supports dot-notation paths) */
|
|
16
|
+
name: string;
|
|
17
|
+
/** Current field value (native JS type: string, boolean, number, etc.) */
|
|
18
|
+
value: unknown;
|
|
19
|
+
/** Update the field value */
|
|
20
|
+
change: (value: unknown) => void;
|
|
21
|
+
/** Mark field as blurred (triggers validation in onBlur mode) */
|
|
22
|
+
blur: () => void;
|
|
23
|
+
/** Focus the field */
|
|
24
|
+
focus: () => void;
|
|
25
|
+
/**
|
|
26
|
+
* Optional props object for uncontrolled inputs (Conform uses hidden inputs).
|
|
27
|
+
* When present, spread onto native `<input>` elements instead of using value/change.
|
|
28
|
+
* When absent, components fall back to controlled mode (value + change).
|
|
29
|
+
*/
|
|
30
|
+
inputProps?: Record<string, unknown>;
|
|
31
|
+
}
|
|
32
|
+
export interface NormalizedFieldArray {
|
|
33
|
+
/** Array of field items with id, key, and name prefix */
|
|
34
|
+
items: Array<{
|
|
35
|
+
id: string;
|
|
36
|
+
key: string;
|
|
37
|
+
name: string;
|
|
38
|
+
}>;
|
|
39
|
+
/** Append a new item to the array */
|
|
40
|
+
append: (defaultValue?: Record<string, unknown>) => void;
|
|
41
|
+
/** Remove an item at the given index */
|
|
42
|
+
remove: (index: number) => void;
|
|
43
|
+
/** Move an item from one index to another */
|
|
44
|
+
move: (from: number, to: number) => void;
|
|
45
|
+
}
|
|
46
|
+
export interface NormalizedFormState {
|
|
47
|
+
/** Whether any field value differs from its default value */
|
|
48
|
+
isDirty: boolean;
|
|
49
|
+
/** Whether the form currently passes validation */
|
|
50
|
+
isValid: boolean;
|
|
51
|
+
/** Whether the form has been submitted at least once */
|
|
52
|
+
isSubmitted: boolean;
|
|
53
|
+
/** Number of times the form has been submitted */
|
|
54
|
+
submitCount: number;
|
|
55
|
+
/** Record of which fields have been modified from defaults */
|
|
56
|
+
dirtyFields: Record<string, boolean>;
|
|
57
|
+
/** Record of which fields have been focused and blurred */
|
|
58
|
+
touchedFields: Record<string, boolean>;
|
|
59
|
+
}
|
|
60
|
+
export interface NormalizedFormInstance {
|
|
61
|
+
/** Form ID */
|
|
62
|
+
id: string;
|
|
63
|
+
/** Field metadata keyed by field name */
|
|
64
|
+
fields: Record<string, NormalizedFieldMeta>;
|
|
65
|
+
/** Props to spread on the <form> element (id, onSubmit, noValidate, etc.) */
|
|
66
|
+
formProps: Record<string, unknown>;
|
|
67
|
+
/** Reactive form-level state (dirty, valid, submitted, etc.) */
|
|
68
|
+
formState: NormalizedFormState;
|
|
69
|
+
/** Programmatically submit the form */
|
|
70
|
+
submit: () => void;
|
|
71
|
+
/** Reset the form to default values */
|
|
72
|
+
reset: () => void;
|
|
73
|
+
/** Get all current form values (for stepper prev() save-without-validate) */
|
|
74
|
+
getValues: () => Record<string, unknown>;
|
|
75
|
+
/** The raw underlying library instance (opaque - never read by shared components) */
|
|
76
|
+
raw: unknown;
|
|
77
|
+
}
|
|
78
|
+
export interface CreateFormProps {
|
|
79
|
+
/** Zod schema for validation */
|
|
80
|
+
schema: z.ZodType;
|
|
81
|
+
/** Default values for form fields */
|
|
82
|
+
defaultValues?: Record<string, unknown>;
|
|
83
|
+
/** Validation mode */
|
|
84
|
+
mode: 'onBlur' | 'onChange' | 'onSubmit';
|
|
85
|
+
/** Form ID */
|
|
86
|
+
id?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Submit handler called with validated data.
|
|
89
|
+
* When absent, the form submits natively (server-side / framework integration).
|
|
90
|
+
*/
|
|
91
|
+
onSubmit?: (data: Record<string, unknown>) => void | Promise<void>;
|
|
92
|
+
/** Form ref callback for programmatic submit via requestSubmit */
|
|
93
|
+
formRef?: React.RefObject<HTMLFormElement | null>;
|
|
94
|
+
}
|
|
95
|
+
export interface FormAdapter {
|
|
96
|
+
/** Display name for error messages (e.g., "Conform", "React Hook Form") */
|
|
97
|
+
name: string;
|
|
98
|
+
/** Create a new form instance. Called once per Form.Root mount. */
|
|
99
|
+
useCreateForm: (props: CreateFormProps) => NormalizedFormInstance;
|
|
100
|
+
/**
|
|
101
|
+
* Resolve a field by dot-notation path and return its normalized state.
|
|
102
|
+
* Must be called within the adapter's FormProvider.
|
|
103
|
+
*/
|
|
104
|
+
useField: (name: string) => NormalizedFieldState;
|
|
105
|
+
/** Watch a single field's value reactively. */
|
|
106
|
+
useWatch: (name: string) => unknown;
|
|
107
|
+
/** Watch multiple fields' values reactively. */
|
|
108
|
+
useWatchAll: (names: string[]) => Record<string, unknown>;
|
|
109
|
+
/** Get field array helpers for a given array field name. */
|
|
110
|
+
useFieldArray: (name: string) => NormalizedFieldArray;
|
|
111
|
+
/**
|
|
112
|
+
* Provider component that wraps the form element.
|
|
113
|
+
* Provides library-specific context (e.g., ConformFormProvider, RHF FormProvider).
|
|
114
|
+
*/
|
|
115
|
+
FormProvider: React.ComponentType<{
|
|
116
|
+
instance: NormalizedFormInstance;
|
|
117
|
+
children: React.ReactNode;
|
|
118
|
+
}>;
|
|
119
|
+
}
|
|
120
|
+
//# sourceMappingURL=adapter-types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"adapter-types.d.ts","sourceRoot":"","sources":["../../../../src/components/features/form/adapter-types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,KAAK,CAAA;AAM5B,MAAM,WAAW,mBAAmB;IAClC,wCAAwC;IACxC,EAAE,EAAE,MAAM,CAAA;IACV,uCAAuC;IACvC,MAAM,EAAE,MAAM,EAAE,CAAA;IAChB,0DAA0D;IAC1D,QAAQ,EAAE,OAAO,CAAA;IACjB,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAA;IAChB,qDAAqD;IACrD,SAAS,EAAE,OAAO,CAAA;CACnB;AAED,MAAM,WAAW,oBAAqB,SAAQ,mBAAmB;IAC/D,+CAA+C;IAC/C,IAAI,EAAE,MAAM,CAAA;IACZ,0EAA0E;IAC1E,KAAK,EAAE,OAAO,CAAA;IACd,6BAA6B;IAC7B,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAA;IAChC,iEAAiE;IACjE,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,sBAAsB;IACtB,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB;;;;OAIG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACrC;AAED,MAAM,WAAW,oBAAoB;IACnC,yDAAyD;IACzD,KAAK,EAAE,KAAK,CAAC;QAAE,EAAE,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC,CAAA;IACvD,qCAAqC;IACrC,MAAM,EAAE,CAAC,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IACxD,wCAAwC;IACxC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,6CAA6C;IAC7C,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;CACzC;AAED,MAAM,WAAW,mBAAmB;IAClC,6DAA6D;IAC7D,OAAO,EAAE,OAAO,CAAA;IAChB,mDAAmD;IACnD,OAAO,EAAE,OAAO,CAAA;IAChB,wDAAwD;IACxD,WAAW,EAAE,OAAO,CAAA;IACpB,kDAAkD;IAClD,WAAW,EAAE,MAAM,CAAA;IACnB,8DAA8D;IAC9D,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACpC,2DAA2D;IAC3D,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;CACvC;AAED,MAAM,WAAW,sBAAsB;IACrC,cAAc;IACd,EAAE,EAAE,MAAM,CAAA;IACV,yCAAyC;IACzC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,mBAAmB,CAAC,CAAA;IAC3C,6EAA6E;IAC7E,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAClC,gEAAgE;IAChE,SAAS,EAAE,mBAAmB,CAAA;IAC9B,uCAAuC;IACvC,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,uCAAuC;IACvC,KAAK,EAAE,MAAM,IAAI,CAAA;IACjB,6EAA6E;IAC7E,SAAS,EAAE,MAAM,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACxC,qFAAqF;IACrF,GAAG,EAAE,OAAO,CAAA;CACb;AAMD,MAAM,WAAW,eAAe;IAC9B,gCAAgC;IAChC,MAAM,EAAE,CAAC,CAAC,OAAO,CAAA;IACjB,qCAAqC;IACrC,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IACvC,sBAAsB;IACtB,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,UAAU,CAAA;IACxC,cAAc;IACd,EAAE,CAAC,EAAE,MAAM,CAAA;IACX;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;IAClE,kEAAkE;IAClE,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,eAAe,GAAG,IAAI,CAAC,CAAA;CAClD;AAMD,MAAM,WAAW,WAAW;IAC1B,2EAA2E;IAC3E,IAAI,EAAE,MAAM,CAAA;IAEZ,mEAAmE;IACnE,aAAa,EAAE,CAAC,KAAK,EAAE,eAAe,KAAK,sBAAsB,CAAA;IAEjE;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,oBAAoB,CAAA;IAEhD,+CAA+C;IAC/C,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAA;IAEnC,gDAAgD;IAChD,WAAW,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;IAEzD,4DAA4D;IAC5D,aAAa,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,oBAAoB,CAAA;IAErD;;;OAGG;IACH,YAAY,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,sBAAsB,CAAC;QAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAA;CACnG"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { FormAdapter } from '../../adapter-types';
|
|
2
|
+
/**
|
|
3
|
+
* Conform.js adapter implementing the `FormAdapter` interface.
|
|
4
|
+
*
|
|
5
|
+
* Maps Conform's `useForm` / `useInputControl` / `useFormMetadata` APIs
|
|
6
|
+
* to the normalized form adapter contract.
|
|
7
|
+
*/
|
|
8
|
+
export declare const conformAdapter: FormAdapter;
|
|
9
|
+
//# sourceMappingURL=conform-adapter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"conform-adapter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/features/form/adapters/conform/conform-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,WAAW,EAMZ,MAAM,qBAAqB,CAAA;AA6b5B;;;;;GAKG;AACH,eAAO,MAAM,cAAc,EAAE,WAQ5B,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface ConformAdapterProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Wrap your application with this provider to use Conform.js as the form backend.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { ConformAdapter } from '@datum-cloud/datum-ui/form/adapters/conform'
|
|
11
|
+
*
|
|
12
|
+
* function App() {
|
|
13
|
+
* return (
|
|
14
|
+
* <ConformAdapter>
|
|
15
|
+
* <MyApp />
|
|
16
|
+
* </ConformAdapter>
|
|
17
|
+
* )
|
|
18
|
+
* }
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function ConformAdapter({ children }: ConformAdapterProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=conform-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"conform-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/components/features/form/adapters/conform/conform-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAM/D"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/features/form/adapters/conform/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAA;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../../src/components/features/form/adapters/rhf/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { FormAdapter } from '../../adapter-types';
|
|
2
|
+
/**
|
|
3
|
+
* React Hook Form adapter implementing the `FormAdapter` interface.
|
|
4
|
+
*
|
|
5
|
+
* Maps react-hook-form's `useForm` / `useController` / `useWatch` APIs
|
|
6
|
+
* to the normalized form adapter contract. Uses `@hookform/resolvers/zod`
|
|
7
|
+
* for Zod schema validation.
|
|
8
|
+
*/
|
|
9
|
+
export declare const rhfAdapter: FormAdapter;
|
|
10
|
+
//# sourceMappingURL=rhf-adapter.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rhf-adapter.d.ts","sourceRoot":"","sources":["../../../../../../src/components/features/form/adapters/rhf/rhf-adapter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,WAAW,EAMZ,MAAM,qBAAqB,CAAA;AAoO5B;;;;;;GAMG;AACH,eAAO,MAAM,UAAU,EAAE,WAQxB,CAAA"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface RHFAdapterProps {
|
|
3
|
+
children: ReactNode;
|
|
4
|
+
}
|
|
5
|
+
/**
|
|
6
|
+
* Wrap your application with this provider to use React Hook Form as the form backend.
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* ```tsx
|
|
10
|
+
* import { RHFAdapter } from '@datum-cloud/datum-ui/form/adapters/rhf'
|
|
11
|
+
*
|
|
12
|
+
* function App() {
|
|
13
|
+
* return (
|
|
14
|
+
* <RHFAdapter>
|
|
15
|
+
* <MyApp />
|
|
16
|
+
* </RHFAdapter>
|
|
17
|
+
* )
|
|
18
|
+
* }
|
|
19
|
+
* ```
|
|
20
|
+
*/
|
|
21
|
+
export declare function RHFAdapter({ children }: RHFAdapterProps): import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
//# sourceMappingURL=rhf-provider.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"rhf-provider.d.ts","sourceRoot":"","sources":["../../../../../../src/components/features/form/adapters/rhf/rhf-provider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,eAAe;IAC9B,QAAQ,EAAE,SAAS,CAAA;CACpB;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAMvD"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;
|
|
1
|
+
{"version":3,"file":"form-autocomplete.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,uCAAuC,CAAA;AAKtG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,gBAAgB,CAAC,CAAC,SAAS,kBAAkB,GAAG,kBAAkB,EAAE,EAClF,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,CAAC,CAAC,CAAC,2CAmB1B;yBAvBe,gBAAgB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"form-checkbox.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,UAAU,CAAA;AAOjD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,EAAE,iBAAiB,2CA+B7E;yBA/Be,YAAY"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-copy-box.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-copy-box.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"form-copy-box.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-copy-box.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,gBAAgB;IAC/B,2EAA2E;IAC3E,OAAO,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;IACjC,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,4CAA4C;IAC5C,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,sCAAsC;IACtC,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAmB,EACnB,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,WAAgB,GACjB,EAAE,gBAAgB,2CA6DlB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-custom.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-custom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAA;AAItE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"form-custom.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-custom.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAyB,MAAM,UAAU,CAAA;AAItE;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,eAAe,2CAkBvD;yBAlBe,UAAU"}
|
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import type { FormFieldArrayProps } from '../types';
|
|
2
2
|
/**
|
|
3
|
-
* Form.FieldArray - Dynamic array of fields
|
|
4
|
-
*
|
|
5
|
-
* Provides helpers for managing arrays of form fields.
|
|
3
|
+
* Form.FieldArray - Dynamic array of fields with append/remove/move helpers.
|
|
6
4
|
*
|
|
7
5
|
* @example
|
|
8
6
|
* ```tsx
|
|
@@ -10,30 +8,20 @@ import type { FormFieldArrayProps } from '../types';
|
|
|
10
8
|
* {({ fields, append, remove }) => (
|
|
11
9
|
* <>
|
|
12
10
|
* {fields.map((field, index) => (
|
|
13
|
-
* <div key={field.key}
|
|
11
|
+
* <div key={field.key}>
|
|
14
12
|
* <Form.Field name={`members.${index}.email`} label="Email">
|
|
15
13
|
* <Form.Input type="email" />
|
|
16
14
|
* </Form.Field>
|
|
17
|
-
* <
|
|
18
|
-
* <Form.Select>
|
|
19
|
-
* <Form.SelectItem value="admin">Admin</Form.SelectItem>
|
|
20
|
-
* <Form.SelectItem value="user">User</Form.SelectItem>
|
|
21
|
-
* </Form.Select>
|
|
22
|
-
* </Form.Field>
|
|
23
|
-
* <button type="button" onClick={() => remove(index)}>
|
|
24
|
-
* Remove
|
|
25
|
-
* </button>
|
|
15
|
+
* <button onClick={() => remove(index)}>Remove</button>
|
|
26
16
|
* </div>
|
|
27
17
|
* ))}
|
|
28
|
-
* <button
|
|
29
|
-
* Add Member
|
|
30
|
-
* </button>
|
|
18
|
+
* <button onClick={() => append({})}>Add Member</button>
|
|
31
19
|
* </>
|
|
32
20
|
* )}
|
|
33
21
|
* </Form.FieldArray>
|
|
34
22
|
* ```
|
|
35
23
|
*/
|
|
36
|
-
export declare function FormFieldArray({ name, children }: FormFieldArrayProps): import("react/jsx-runtime").JSX.Element
|
|
24
|
+
export declare function FormFieldArray({ name, children }: FormFieldArrayProps): import("react/jsx-runtime").JSX.Element;
|
|
37
25
|
export declare namespace FormFieldArray {
|
|
38
26
|
var displayName: string;
|
|
39
27
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field-array.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-field-array.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAA6B,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"form-field-array.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-field-array.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAA6B,MAAM,UAAU,CAAA;AAI9E;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAYrE;yBAZe,cAAc"}
|
|
@@ -1,39 +1,25 @@
|
|
|
1
1
|
import type { FormFieldProps } from '../types';
|
|
2
2
|
/**
|
|
3
|
-
* Form.Field - Field wrapper
|
|
4
|
-
*
|
|
5
|
-
* Provides field context to children with:
|
|
6
|
-
* - Automatic label rendering
|
|
7
|
-
* - Error display
|
|
8
|
-
* - Description text
|
|
9
|
-
* - Required indicator
|
|
10
|
-
* - Accessibility attributes
|
|
11
|
-
*
|
|
12
|
-
* Supports two patterns:
|
|
13
|
-
* 1. ReactNode children - for standard Form inputs
|
|
14
|
-
* 2. Render function - for custom components needing field access
|
|
3
|
+
* Form.Field - Field wrapper that provides label, errors, and description.
|
|
4
|
+
* Uses the active adapter to resolve field state by name.
|
|
15
5
|
*
|
|
16
6
|
* @example Standard usage
|
|
17
7
|
* ```tsx
|
|
18
|
-
* <Form.Field name="email" label="Email
|
|
8
|
+
* <Form.Field name="email" label="Email" required>
|
|
19
9
|
* <Form.Input type="email" />
|
|
20
10
|
* </Form.Field>
|
|
21
11
|
* ```
|
|
22
12
|
*
|
|
23
13
|
* @example Render function for custom components
|
|
24
14
|
* ```tsx
|
|
25
|
-
* <Form.Field name="role" label="Role"
|
|
26
|
-
* {({ control, meta
|
|
27
|
-
* <CustomSelect
|
|
28
|
-
* name={meta.name}
|
|
29
|
-
* value={control.value}
|
|
30
|
-
* onChange={control.change}
|
|
31
|
-
* />
|
|
15
|
+
* <Form.Field name="role" label="Role">
|
|
16
|
+
* {({ control, meta }) => (
|
|
17
|
+
* <CustomSelect value={control.value} onChange={control.change} />
|
|
32
18
|
* )}
|
|
33
19
|
* </Form.Field>
|
|
34
20
|
* ```
|
|
35
21
|
*/
|
|
36
|
-
export declare function FormField({ name, children, label, description, tooltip, required, disabled, className, labelClassName, }: FormFieldProps): import("react/jsx-runtime").JSX.Element
|
|
22
|
+
export declare function FormField({ name, children, label, description, tooltip, required, disabled, className, labelClassName, }: FormFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
37
23
|
export declare namespace FormField {
|
|
38
24
|
var displayName: string;
|
|
39
25
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAyB,cAAc,EAAwB,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"form-field.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAyB,cAAc,EAAwB,MAAM,UAAU,CAAA;AAyE3F;;;;;;;;;;;;;;;;;;;GAmBG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAQ,EACR,KAAK,EACL,WAAW,EACX,OAAO,EACP,QAAgB,EAChB,QAAgB,EAChB,SAAS,EACT,cAAc,GACf,EAAE,cAAc,2CAyGhB;yBAnHe,SAAS"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import type { InputWithAddonsProps } from '../../input-with-addons';
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
/**
|
|
4
|
-
* Form.
|
|
4
|
+
* Form.InputGroup - Input with leading/trailing addons
|
|
5
5
|
*
|
|
6
6
|
* Automatically wired to the parent Form.Field context.
|
|
7
7
|
*
|
|
8
8
|
* @example
|
|
9
9
|
* ```tsx
|
|
10
|
-
* <Form.Field name="
|
|
11
|
-
* <Form.
|
|
10
|
+
* <Form.Field name="website" label="Website" required>
|
|
11
|
+
* <Form.InputGroup leading="https://" placeholder="example.com" />
|
|
12
12
|
* </Form.Field>
|
|
13
13
|
* ```
|
|
14
14
|
*/
|
|
15
|
-
export declare function FormInputGroup({ ref,
|
|
15
|
+
export declare function FormInputGroup({ ref, className, disabled, ...props }: Omit<InputWithAddonsProps, 'name'> & {
|
|
16
16
|
ref?: React.RefObject<HTMLInputElement | null>;
|
|
17
17
|
}): import("react/jsx-runtime").JSX.Element;
|
|
18
18
|
export declare namespace FormInputGroup {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-input-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;
|
|
1
|
+
{"version":3,"file":"form-input-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-input-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AACnE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;GAWG;AACH,wBAAgB,cAAc,CAAC,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,IAAI,CAAC,oBAAoB,EAAE,MAAM,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAAE,2CAoB7J;yBApBe,cAAc"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-input.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAC9C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAK9B;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EAAE,GAAG,EAAE,IAAa,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,GAAG;IAAE,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;CAAE,2CAqBnJ;yBArBe,SAAS"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form-radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;
|
|
1
|
+
{"version":3,"file":"form-radio-group.d.ts","sourceRoot":"","sources":["../../../../../src/components/features/form/components/form-radio-group.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,UAAU,CAAA;AAOvE;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,cAAc,CAAC,EAC7B,WAAwB,EACxB,QAAQ,EACR,SAAS,EACT,QAAQ,GACT,EAAE,mBAAmB,2CAsBrB;yBA3Be,cAAc;;;AA+B9B;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,kBAAkB,2CAoBxF;yBApBe,aAAa"}
|