@invana/forms 0.0.11 → 0.0.13
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/dist/index.cjs +445 -114
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +145 -9
- package/dist/index.d.ts +145 -9
- package/dist/index.js +442 -114
- package/dist/index.js.map +1 -1
- package/package.json +5 -5
package/dist/index.d.cts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React$1 from 'react';
|
|
|
2
2
|
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as react_hook_form from 'react-hook-form';
|
|
5
|
-
import { FieldValues, FieldPath, ControllerProps, Control } from 'react-hook-form';
|
|
5
|
+
import { FieldValues, FieldPath, ControllerProps, Control, UseFormReturn } from 'react-hook-form';
|
|
6
6
|
export { Control, DefaultValues, FieldValues, Mode, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
|
7
7
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
8
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
@@ -36,17 +36,34 @@ declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
|
|
|
36
36
|
|
|
37
37
|
type LabelPosition = 'side' | 'top';
|
|
38
38
|
/**
|
|
39
|
-
* Field density.
|
|
40
|
-
*
|
|
41
|
-
*
|
|
39
|
+
* Field density.
|
|
40
|
+
* - `xs` — ultra-dense property-panel look (small controls, tight rows, compact
|
|
41
|
+
* section headers). Use for inspector/side panels like the modeller diagram
|
|
42
|
+
* properties editor.
|
|
43
|
+
* - `sm` — compact look, the default for backward compatibility.
|
|
44
|
+
* - `md` — full-size fields for primary, page-level forms.
|
|
42
45
|
*/
|
|
43
|
-
type FieldSize = 'sm' | 'md';
|
|
44
|
-
type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'color' | 'select' | 'icon';
|
|
46
|
+
type FieldSize = 'xs' | 'sm' | 'md';
|
|
47
|
+
type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'checkbox' | 'radio' | 'color' | 'select' | 'icon';
|
|
48
|
+
/** Widget used to render a single `boolean` field. Defaults to `switch`. */
|
|
49
|
+
type BooleanControl = 'switch' | 'checkbox';
|
|
50
|
+
/** Layout for the `radio` list and the multi-select `checkbox` group. */
|
|
51
|
+
type FieldOrientation = 'vertical' | 'horizontal';
|
|
45
52
|
type ColorPreset = {
|
|
46
53
|
label: string;
|
|
47
54
|
value: string;
|
|
48
55
|
darkValue?: string;
|
|
49
56
|
};
|
|
57
|
+
/**
|
|
58
|
+
* Small status pill rendered next to a field's label — the "on" / "active" /
|
|
59
|
+
* "no editor" chips seen in inspector panels. `variant` maps to the `Badge`
|
|
60
|
+
* component's variants and defaults to `secondary` (neutral grey). Use
|
|
61
|
+
* `default` for the solid accent ("on") pill.
|
|
62
|
+
*/
|
|
63
|
+
type FieldBadge = {
|
|
64
|
+
label: string;
|
|
65
|
+
variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'soft';
|
|
66
|
+
};
|
|
50
67
|
type FieldConfig = {
|
|
51
68
|
name: string;
|
|
52
69
|
type: FieldType;
|
|
@@ -63,22 +80,92 @@ type FieldConfig = {
|
|
|
63
80
|
group?: string;
|
|
64
81
|
row?: string;
|
|
65
82
|
presetColors?: ColorPreset[];
|
|
66
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Widget for a single `boolean` field: `switch` (default) renders a toggle;
|
|
85
|
+
* `checkbox` renders a compact inline `☑ label`. Ignored by non-boolean types.
|
|
86
|
+
*/
|
|
87
|
+
control?: BooleanControl;
|
|
88
|
+
/**
|
|
89
|
+
* Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`
|
|
90
|
+
* (the switch renders inline). Ignored by non-boolean / `checkbox` fields.
|
|
91
|
+
*/
|
|
92
|
+
boxed?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Layout for `radio` and multi-select `checkbox` groups. Defaults to
|
|
95
|
+
* `vertical`. Ignored by other types.
|
|
96
|
+
*/
|
|
97
|
+
orientation?: FieldOrientation;
|
|
98
|
+
/**
|
|
99
|
+
* Initial value. A `string` for most fields, `boolean` for `boolean`, or a
|
|
100
|
+
* `string[]` for a multi-select `checkbox` group.
|
|
101
|
+
*/
|
|
102
|
+
defaultValue?: string | number | boolean | string[];
|
|
67
103
|
/** Number of visible rows for `textarea` fields. */
|
|
68
104
|
rows?: number;
|
|
105
|
+
/**
|
|
106
|
+
* How many grid columns the field spans on `md+` screens. Defaults to `1`.
|
|
107
|
+
* The grid is two columns by default (see `ObjectField`'s `columns`), so
|
|
108
|
+
* `colSpan: 2` makes a full-width field (textarea, long URI, …). A span
|
|
109
|
+
* larger than the column count simply fills the row. Ignored below `md`,
|
|
110
|
+
* where every field stacks full width.
|
|
111
|
+
*/
|
|
112
|
+
colSpan?: number;
|
|
113
|
+
/**
|
|
114
|
+
* Extra classes merged onto the field's grid cell. Escape hatch for
|
|
115
|
+
* per-field layout/spacing tweaks (custom width, ordering, margins, …)
|
|
116
|
+
* without adding a dedicated prop for every case.
|
|
117
|
+
*/
|
|
118
|
+
className?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Extra classes merged onto the field's `<FormLabel>`. Escape hatch for
|
|
121
|
+
* per-field label styling (padding, colour, weight, casing, the label→control
|
|
122
|
+
* gap via margin, …) on top of the size-driven defaults.
|
|
123
|
+
*/
|
|
124
|
+
labelClassName?: string;
|
|
125
|
+
/**
|
|
126
|
+
* Optional status pill rendered next to the field's label (e.g. an "on" /
|
|
127
|
+
* "active" chip in an inspector row). See {@link FieldBadge}.
|
|
128
|
+
*/
|
|
129
|
+
badge?: FieldBadge;
|
|
69
130
|
};
|
|
70
131
|
type RowConfig = {
|
|
71
132
|
id: string;
|
|
72
133
|
fields: string[];
|
|
73
134
|
};
|
|
135
|
+
/**
|
|
136
|
+
* Per-group metadata for the section headers of a grouped `ObjectField`.
|
|
137
|
+
* Groups are still discovered from each field's `group` value; this only
|
|
138
|
+
* decorates the matching section header.
|
|
139
|
+
*/
|
|
140
|
+
type GroupConfig = {
|
|
141
|
+
/** Matches the `group` value on fields. */
|
|
142
|
+
id: string;
|
|
143
|
+
/** Override the auto-humanized section label (e.g. `viewMode` → "View Mode"). */
|
|
144
|
+
label?: string;
|
|
145
|
+
/**
|
|
146
|
+
* Extra status pills rendered in the section header, after the automatic
|
|
147
|
+
* field-count badge. See {@link FieldBadge}.
|
|
148
|
+
*/
|
|
149
|
+
badges?: FieldBadge[];
|
|
150
|
+
/** Show the automatic field-count badge. Defaults to `true`. */
|
|
151
|
+
showCount?: boolean;
|
|
152
|
+
};
|
|
74
153
|
interface ObjectFieldProps {
|
|
75
154
|
control: Control<any>;
|
|
76
155
|
name: string;
|
|
77
156
|
fields: FieldConfig[];
|
|
78
157
|
rowConfig?: RowConfig[];
|
|
158
|
+
/** Optional per-group header decoration (extra badges, label override). */
|
|
159
|
+
groupConfig?: GroupConfig[];
|
|
79
160
|
labelPosition?: LabelPosition;
|
|
80
161
|
/** Field density. Defaults to `sm` (compact) for backward compatibility. */
|
|
81
162
|
size?: FieldSize;
|
|
163
|
+
/**
|
|
164
|
+
* Number of columns in the field grid on `md+` screens. Defaults to `2`.
|
|
165
|
+
* Increase it to build wider layouts that fields can span via `colSpan`.
|
|
166
|
+
* Below `md` the grid always collapses to a single column.
|
|
167
|
+
*/
|
|
168
|
+
columns?: number;
|
|
82
169
|
}
|
|
83
170
|
|
|
84
171
|
type AnyValue = any;
|
|
@@ -96,17 +183,25 @@ interface BaseFieldProps {
|
|
|
96
183
|
max?: number;
|
|
97
184
|
step?: number;
|
|
98
185
|
presetColors?: ColorPreset[];
|
|
99
|
-
defaultValue?:
|
|
186
|
+
defaultValue?: AnyValue;
|
|
100
187
|
rows?: number;
|
|
101
188
|
className?: string;
|
|
189
|
+
labelClassName?: string;
|
|
190
|
+
badge?: FieldBadge;
|
|
102
191
|
labelPosition?: LabelPosition;
|
|
103
192
|
size?: FieldSize;
|
|
193
|
+
control?: BooleanControl;
|
|
194
|
+
orientation?: FieldOrientation;
|
|
195
|
+
/** Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`. */
|
|
196
|
+
boxed?: boolean;
|
|
104
197
|
}
|
|
105
198
|
declare const InputField: React$1.FC<BaseFieldProps>;
|
|
106
199
|
declare const PasswordField: React$1.FC<BaseFieldProps>;
|
|
107
200
|
declare const TextareaField: React$1.FC<BaseFieldProps>;
|
|
108
201
|
declare const SelectField: React$1.FC<BaseFieldProps>;
|
|
109
202
|
declare const BooleanField: React$1.FC<BaseFieldProps>;
|
|
203
|
+
declare const RadioField: React$1.FC<BaseFieldProps>;
|
|
204
|
+
declare const CheckboxGroupField: React$1.FC<BaseFieldProps>;
|
|
110
205
|
declare const ColorField: React$1.FC<BaseFieldProps>;
|
|
111
206
|
declare const NumberField: React$1.FC<BaseFieldProps>;
|
|
112
207
|
declare const IconField: React$1.FC<BaseFieldProps>;
|
|
@@ -115,6 +210,8 @@ declare const Field: {
|
|
|
115
210
|
Password: React$1.FC<BaseFieldProps>;
|
|
116
211
|
Textarea: React$1.FC<BaseFieldProps>;
|
|
117
212
|
Boolean: React$1.FC<BaseFieldProps>;
|
|
213
|
+
Radio: React$1.FC<BaseFieldProps>;
|
|
214
|
+
CheckboxGroup: React$1.FC<BaseFieldProps>;
|
|
118
215
|
Color: React$1.FC<BaseFieldProps>;
|
|
119
216
|
Number: React$1.FC<BaseFieldProps>;
|
|
120
217
|
Select: React$1.FC<BaseFieldProps>;
|
|
@@ -127,6 +224,8 @@ interface FormFieldExtensions {
|
|
|
127
224
|
Password: typeof PasswordField;
|
|
128
225
|
Textarea: typeof TextareaField;
|
|
129
226
|
Boolean: typeof BooleanField;
|
|
227
|
+
Radio: typeof RadioField;
|
|
228
|
+
CheckboxGroup: typeof CheckboxGroupField;
|
|
130
229
|
Color: typeof ColorField;
|
|
131
230
|
Number: typeof NumberField;
|
|
132
231
|
Select: typeof SelectField;
|
|
@@ -135,6 +234,43 @@ interface FormFieldExtensions {
|
|
|
135
234
|
type FormFieldType = typeof FormField$1 & FormFieldExtensions;
|
|
136
235
|
declare const FormField: FormFieldType;
|
|
137
236
|
|
|
237
|
+
interface SettingsPanelProps extends Omit<ObjectFieldProps, 'control'> {
|
|
238
|
+
/**
|
|
239
|
+
* The react-hook-form instance (from `useForm`). The panel renders its own
|
|
240
|
+
* `<Form>` provider around the fields, so it is fully self-contained — no
|
|
241
|
+
* external `<Form>` wrapper is required.
|
|
242
|
+
*/
|
|
243
|
+
form: UseFormReturn<any>;
|
|
244
|
+
/** Title shown above the fields (uppercase, muted — the panel heading). */
|
|
245
|
+
title?: React$1.ReactNode;
|
|
246
|
+
/** Extra classes merged onto the outer `Card` (e.g. a fixed width). */
|
|
247
|
+
className?: string;
|
|
248
|
+
/** Extra classes merged onto the scrollable `CardContent`. */
|
|
249
|
+
contentClassName?: string;
|
|
250
|
+
/**
|
|
251
|
+
* Extra content rendered inside the form, after the fields — e.g. a footer
|
|
252
|
+
* with Apply / Reset actions. Rendered within the `<Form>` provider so a
|
|
253
|
+
* submit button has form context.
|
|
254
|
+
*/
|
|
255
|
+
children?: React$1.ReactNode;
|
|
256
|
+
}
|
|
257
|
+
/**
|
|
258
|
+
* A self-contained, form-driven settings / inspector panel: the card chrome, an
|
|
259
|
+
* uppercase heading and the sectioned {@link ObjectField} accordion in a single
|
|
260
|
+
* component. Consumers own their `useForm` and pass it in; everything else — the
|
|
261
|
+
* `Card`, scroll region, `<Form>` provider, grouped accordions with count
|
|
262
|
+
* badges and per-field status pills — is handled here.
|
|
263
|
+
*
|
|
264
|
+
* ```tsx
|
|
265
|
+
* const form = useForm({ defaultValues });
|
|
266
|
+
* <SettingsPanel title="Canvas Settings" form={form} name="canvas" fields={fields} />
|
|
267
|
+
* ```
|
|
268
|
+
*
|
|
269
|
+
* All {@link ObjectFieldProps} (`name`, `fields`, `rowConfig`, `labelPosition`,
|
|
270
|
+
* `size`, `columns`) are forwarded to the underlying `ObjectField`.
|
|
271
|
+
*/
|
|
272
|
+
declare function SettingsPanel({ form, title, className, contentClassName, children, ...objectField }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
|
|
273
|
+
|
|
138
274
|
interface ColorSwatchesProps {
|
|
139
275
|
value?: string;
|
|
140
276
|
onChange?: (value: string) => void;
|
|
@@ -232,4 +368,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
|
|
|
232
368
|
declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
|
|
233
369
|
declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
|
|
234
370
|
|
|
235
|
-
export { BooleanField, Checkbox, ColorField, type ColorPreset, ColorSwatches, Field, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
|
|
371
|
+
export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as React$1 from 'react';
|
|
|
2
2
|
import * as _radix_ui_react_slot from '@radix-ui/react-slot';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as react_hook_form from 'react-hook-form';
|
|
5
|
-
import { FieldValues, FieldPath, ControllerProps, Control } from 'react-hook-form';
|
|
5
|
+
import { FieldValues, FieldPath, ControllerProps, Control, UseFormReturn } from 'react-hook-form';
|
|
6
6
|
export { Control, DefaultValues, FieldValues, Mode, SubmitHandler, UseFormReturn } from 'react-hook-form';
|
|
7
7
|
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
8
8
|
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
@@ -36,17 +36,34 @@ declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
|
|
|
36
36
|
|
|
37
37
|
type LabelPosition = 'side' | 'top';
|
|
38
38
|
/**
|
|
39
|
-
* Field density.
|
|
40
|
-
*
|
|
41
|
-
*
|
|
39
|
+
* Field density.
|
|
40
|
+
* - `xs` — ultra-dense property-panel look (small controls, tight rows, compact
|
|
41
|
+
* section headers). Use for inspector/side panels like the modeller diagram
|
|
42
|
+
* properties editor.
|
|
43
|
+
* - `sm` — compact look, the default for backward compatibility.
|
|
44
|
+
* - `md` — full-size fields for primary, page-level forms.
|
|
42
45
|
*/
|
|
43
|
-
type FieldSize = 'sm' | 'md';
|
|
44
|
-
type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'color' | 'select' | 'icon';
|
|
46
|
+
type FieldSize = 'xs' | 'sm' | 'md';
|
|
47
|
+
type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'checkbox' | 'radio' | 'color' | 'select' | 'icon';
|
|
48
|
+
/** Widget used to render a single `boolean` field. Defaults to `switch`. */
|
|
49
|
+
type BooleanControl = 'switch' | 'checkbox';
|
|
50
|
+
/** Layout for the `radio` list and the multi-select `checkbox` group. */
|
|
51
|
+
type FieldOrientation = 'vertical' | 'horizontal';
|
|
45
52
|
type ColorPreset = {
|
|
46
53
|
label: string;
|
|
47
54
|
value: string;
|
|
48
55
|
darkValue?: string;
|
|
49
56
|
};
|
|
57
|
+
/**
|
|
58
|
+
* Small status pill rendered next to a field's label — the "on" / "active" /
|
|
59
|
+
* "no editor" chips seen in inspector panels. `variant` maps to the `Badge`
|
|
60
|
+
* component's variants and defaults to `secondary` (neutral grey). Use
|
|
61
|
+
* `default` for the solid accent ("on") pill.
|
|
62
|
+
*/
|
|
63
|
+
type FieldBadge = {
|
|
64
|
+
label: string;
|
|
65
|
+
variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'soft';
|
|
66
|
+
};
|
|
50
67
|
type FieldConfig = {
|
|
51
68
|
name: string;
|
|
52
69
|
type: FieldType;
|
|
@@ -63,22 +80,92 @@ type FieldConfig = {
|
|
|
63
80
|
group?: string;
|
|
64
81
|
row?: string;
|
|
65
82
|
presetColors?: ColorPreset[];
|
|
66
|
-
|
|
83
|
+
/**
|
|
84
|
+
* Widget for a single `boolean` field: `switch` (default) renders a toggle;
|
|
85
|
+
* `checkbox` renders a compact inline `☑ label`. Ignored by non-boolean types.
|
|
86
|
+
*/
|
|
87
|
+
control?: BooleanControl;
|
|
88
|
+
/**
|
|
89
|
+
* Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`
|
|
90
|
+
* (the switch renders inline). Ignored by non-boolean / `checkbox` fields.
|
|
91
|
+
*/
|
|
92
|
+
boxed?: boolean;
|
|
93
|
+
/**
|
|
94
|
+
* Layout for `radio` and multi-select `checkbox` groups. Defaults to
|
|
95
|
+
* `vertical`. Ignored by other types.
|
|
96
|
+
*/
|
|
97
|
+
orientation?: FieldOrientation;
|
|
98
|
+
/**
|
|
99
|
+
* Initial value. A `string` for most fields, `boolean` for `boolean`, or a
|
|
100
|
+
* `string[]` for a multi-select `checkbox` group.
|
|
101
|
+
*/
|
|
102
|
+
defaultValue?: string | number | boolean | string[];
|
|
67
103
|
/** Number of visible rows for `textarea` fields. */
|
|
68
104
|
rows?: number;
|
|
105
|
+
/**
|
|
106
|
+
* How many grid columns the field spans on `md+` screens. Defaults to `1`.
|
|
107
|
+
* The grid is two columns by default (see `ObjectField`'s `columns`), so
|
|
108
|
+
* `colSpan: 2` makes a full-width field (textarea, long URI, …). A span
|
|
109
|
+
* larger than the column count simply fills the row. Ignored below `md`,
|
|
110
|
+
* where every field stacks full width.
|
|
111
|
+
*/
|
|
112
|
+
colSpan?: number;
|
|
113
|
+
/**
|
|
114
|
+
* Extra classes merged onto the field's grid cell. Escape hatch for
|
|
115
|
+
* per-field layout/spacing tweaks (custom width, ordering, margins, …)
|
|
116
|
+
* without adding a dedicated prop for every case.
|
|
117
|
+
*/
|
|
118
|
+
className?: string;
|
|
119
|
+
/**
|
|
120
|
+
* Extra classes merged onto the field's `<FormLabel>`. Escape hatch for
|
|
121
|
+
* per-field label styling (padding, colour, weight, casing, the label→control
|
|
122
|
+
* gap via margin, …) on top of the size-driven defaults.
|
|
123
|
+
*/
|
|
124
|
+
labelClassName?: string;
|
|
125
|
+
/**
|
|
126
|
+
* Optional status pill rendered next to the field's label (e.g. an "on" /
|
|
127
|
+
* "active" chip in an inspector row). See {@link FieldBadge}.
|
|
128
|
+
*/
|
|
129
|
+
badge?: FieldBadge;
|
|
69
130
|
};
|
|
70
131
|
type RowConfig = {
|
|
71
132
|
id: string;
|
|
72
133
|
fields: string[];
|
|
73
134
|
};
|
|
135
|
+
/**
|
|
136
|
+
* Per-group metadata for the section headers of a grouped `ObjectField`.
|
|
137
|
+
* Groups are still discovered from each field's `group` value; this only
|
|
138
|
+
* decorates the matching section header.
|
|
139
|
+
*/
|
|
140
|
+
type GroupConfig = {
|
|
141
|
+
/** Matches the `group` value on fields. */
|
|
142
|
+
id: string;
|
|
143
|
+
/** Override the auto-humanized section label (e.g. `viewMode` → "View Mode"). */
|
|
144
|
+
label?: string;
|
|
145
|
+
/**
|
|
146
|
+
* Extra status pills rendered in the section header, after the automatic
|
|
147
|
+
* field-count badge. See {@link FieldBadge}.
|
|
148
|
+
*/
|
|
149
|
+
badges?: FieldBadge[];
|
|
150
|
+
/** Show the automatic field-count badge. Defaults to `true`. */
|
|
151
|
+
showCount?: boolean;
|
|
152
|
+
};
|
|
74
153
|
interface ObjectFieldProps {
|
|
75
154
|
control: Control<any>;
|
|
76
155
|
name: string;
|
|
77
156
|
fields: FieldConfig[];
|
|
78
157
|
rowConfig?: RowConfig[];
|
|
158
|
+
/** Optional per-group header decoration (extra badges, label override). */
|
|
159
|
+
groupConfig?: GroupConfig[];
|
|
79
160
|
labelPosition?: LabelPosition;
|
|
80
161
|
/** Field density. Defaults to `sm` (compact) for backward compatibility. */
|
|
81
162
|
size?: FieldSize;
|
|
163
|
+
/**
|
|
164
|
+
* Number of columns in the field grid on `md+` screens. Defaults to `2`.
|
|
165
|
+
* Increase it to build wider layouts that fields can span via `colSpan`.
|
|
166
|
+
* Below `md` the grid always collapses to a single column.
|
|
167
|
+
*/
|
|
168
|
+
columns?: number;
|
|
82
169
|
}
|
|
83
170
|
|
|
84
171
|
type AnyValue = any;
|
|
@@ -96,17 +183,25 @@ interface BaseFieldProps {
|
|
|
96
183
|
max?: number;
|
|
97
184
|
step?: number;
|
|
98
185
|
presetColors?: ColorPreset[];
|
|
99
|
-
defaultValue?:
|
|
186
|
+
defaultValue?: AnyValue;
|
|
100
187
|
rows?: number;
|
|
101
188
|
className?: string;
|
|
189
|
+
labelClassName?: string;
|
|
190
|
+
badge?: FieldBadge;
|
|
102
191
|
labelPosition?: LabelPosition;
|
|
103
192
|
size?: FieldSize;
|
|
193
|
+
control?: BooleanControl;
|
|
194
|
+
orientation?: FieldOrientation;
|
|
195
|
+
/** Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`. */
|
|
196
|
+
boxed?: boolean;
|
|
104
197
|
}
|
|
105
198
|
declare const InputField: React$1.FC<BaseFieldProps>;
|
|
106
199
|
declare const PasswordField: React$1.FC<BaseFieldProps>;
|
|
107
200
|
declare const TextareaField: React$1.FC<BaseFieldProps>;
|
|
108
201
|
declare const SelectField: React$1.FC<BaseFieldProps>;
|
|
109
202
|
declare const BooleanField: React$1.FC<BaseFieldProps>;
|
|
203
|
+
declare const RadioField: React$1.FC<BaseFieldProps>;
|
|
204
|
+
declare const CheckboxGroupField: React$1.FC<BaseFieldProps>;
|
|
110
205
|
declare const ColorField: React$1.FC<BaseFieldProps>;
|
|
111
206
|
declare const NumberField: React$1.FC<BaseFieldProps>;
|
|
112
207
|
declare const IconField: React$1.FC<BaseFieldProps>;
|
|
@@ -115,6 +210,8 @@ declare const Field: {
|
|
|
115
210
|
Password: React$1.FC<BaseFieldProps>;
|
|
116
211
|
Textarea: React$1.FC<BaseFieldProps>;
|
|
117
212
|
Boolean: React$1.FC<BaseFieldProps>;
|
|
213
|
+
Radio: React$1.FC<BaseFieldProps>;
|
|
214
|
+
CheckboxGroup: React$1.FC<BaseFieldProps>;
|
|
118
215
|
Color: React$1.FC<BaseFieldProps>;
|
|
119
216
|
Number: React$1.FC<BaseFieldProps>;
|
|
120
217
|
Select: React$1.FC<BaseFieldProps>;
|
|
@@ -127,6 +224,8 @@ interface FormFieldExtensions {
|
|
|
127
224
|
Password: typeof PasswordField;
|
|
128
225
|
Textarea: typeof TextareaField;
|
|
129
226
|
Boolean: typeof BooleanField;
|
|
227
|
+
Radio: typeof RadioField;
|
|
228
|
+
CheckboxGroup: typeof CheckboxGroupField;
|
|
130
229
|
Color: typeof ColorField;
|
|
131
230
|
Number: typeof NumberField;
|
|
132
231
|
Select: typeof SelectField;
|
|
@@ -135,6 +234,43 @@ interface FormFieldExtensions {
|
|
|
135
234
|
type FormFieldType = typeof FormField$1 & FormFieldExtensions;
|
|
136
235
|
declare const FormField: FormFieldType;
|
|
137
236
|
|
|
237
|
+
interface SettingsPanelProps extends Omit<ObjectFieldProps, 'control'> {
|
|
238
|
+
/**
|
|
239
|
+
* The react-hook-form instance (from `useForm`). The panel renders its own
|
|
240
|
+
* `<Form>` provider around the fields, so it is fully self-contained — no
|
|
241
|
+
* external `<Form>` wrapper is required.
|
|
242
|
+
*/
|
|
243
|
+
form: UseFormReturn<any>;
|
|
244
|
+
/** Title shown above the fields (uppercase, muted — the panel heading). */
|
|
245
|
+
title?: React$1.ReactNode;
|
|
246
|
+
/** Extra classes merged onto the outer `Card` (e.g. a fixed width). */
|
|
247
|
+
className?: string;
|
|
248
|
+
/** Extra classes merged onto the scrollable `CardContent`. */
|
|
249
|
+
contentClassName?: string;
|
|
250
|
+
/**
|
|
251
|
+
* Extra content rendered inside the form, after the fields — e.g. a footer
|
|
252
|
+
* with Apply / Reset actions. Rendered within the `<Form>` provider so a
|
|
253
|
+
* submit button has form context.
|
|
254
|
+
*/
|
|
255
|
+
children?: React$1.ReactNode;
|
|
256
|
+
}
|
|
257
|
+
/**
|
|
258
|
+
* A self-contained, form-driven settings / inspector panel: the card chrome, an
|
|
259
|
+
* uppercase heading and the sectioned {@link ObjectField} accordion in a single
|
|
260
|
+
* component. Consumers own their `useForm` and pass it in; everything else — the
|
|
261
|
+
* `Card`, scroll region, `<Form>` provider, grouped accordions with count
|
|
262
|
+
* badges and per-field status pills — is handled here.
|
|
263
|
+
*
|
|
264
|
+
* ```tsx
|
|
265
|
+
* const form = useForm({ defaultValues });
|
|
266
|
+
* <SettingsPanel title="Canvas Settings" form={form} name="canvas" fields={fields} />
|
|
267
|
+
* ```
|
|
268
|
+
*
|
|
269
|
+
* All {@link ObjectFieldProps} (`name`, `fields`, `rowConfig`, `labelPosition`,
|
|
270
|
+
* `size`, `columns`) are forwarded to the underlying `ObjectField`.
|
|
271
|
+
*/
|
|
272
|
+
declare function SettingsPanel({ form, title, className, contentClassName, children, ...objectField }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
|
|
273
|
+
|
|
138
274
|
interface ColorSwatchesProps {
|
|
139
275
|
value?: string;
|
|
140
276
|
onChange?: (value: string) => void;
|
|
@@ -232,4 +368,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
|
|
|
232
368
|
declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
|
|
233
369
|
declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
|
|
234
370
|
|
|
235
|
-
export { BooleanField, Checkbox, ColorField, type ColorPreset, ColorSwatches, Field, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
|
|
371
|
+
export { type BooleanControl, BooleanField, Checkbox, CheckboxGroupField, ColorField, type ColorPreset, ColorSwatches, Field, type FieldBadge, type FieldConfig, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, type FieldOrientation, FieldSeparator, FieldSet, type FieldSize, FieldTitle, type FieldType, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, type GroupConfig, IconField, IconInput, Input, InputField, InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, Label, type LabelPosition, NumberField, ObjectField, type ObjectFieldProps, PasswordField, PasswordInput, type PasswordInputProps, RadioField, RadioGroup, RadioGroupItem, type RowConfig, Select, SelectContent, SelectField, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, SettingsPanel, type SettingsPanelProps, Slider, SliderNumber, Switch, Textarea, TextareaField, useFormField };
|