@invana/forms 0.0.12 → 0.0.13

package/dist/index.d.cts

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps, Control } from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, Control, UseFormReturn } from 'react-hook-form';
 export { Control, DefaultValues, FieldValues, Mode, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -36,17 +36,34 @@ declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
 
 type LabelPosition = 'side' | 'top';
 /**
- * Field density. `sm` is the compact look used by dense panels (e.g. the
- * modeller property editor) and is the default for backward compatibility.
- * `md` renders full-size fields for primary, page-level forms.
+ * Field density.
+ * - `xs` — ultra-dense property-panel look (small controls, tight rows, compact
+ *   section headers). Use for inspector/side panels like the modeller diagram
+ *   properties editor.
+ * - `sm` — compact look, the default for backward compatibility.
+ * - `md` — full-size fields for primary, page-level forms.
  */
-type FieldSize = 'sm' | 'md';
-type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'color' | 'select' | 'icon';
+type FieldSize = 'xs' | 'sm' | 'md';
+type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'checkbox' | 'radio' | 'color' | 'select' | 'icon';
+/** Widget used to render a single `boolean` field. Defaults to `switch`. */
+type BooleanControl = 'switch' | 'checkbox';
+/** Layout for the `radio` list and the multi-select `checkbox` group. */
+type FieldOrientation = 'vertical' | 'horizontal';
 type ColorPreset = {
     label: string;
     value: string;
     darkValue?: string;
 };
+/**
+ * Small status pill rendered next to a field's label — the "on" / "active" /
+ * "no editor" chips seen in inspector panels. `variant` maps to the `Badge`
+ * component's variants and defaults to `secondary` (neutral grey). Use
+ * `default` for the solid accent ("on") pill.
+ */
+type FieldBadge = {
+    label: string;
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'soft';
+};
 type FieldConfig = {
     name: string;
     type: FieldType;
@@ -63,7 +80,26 @@ type FieldConfig = {
     group?: string;
     row?: string;
     presetColors?: ColorPreset[];
-    defaultValue?: string;
+    /**
+     * Widget for a single `boolean` field: `switch` (default) renders a toggle;
+     * `checkbox` renders a compact inline `☑ label`. Ignored by non-boolean types.
+     */
+    control?: BooleanControl;
+    /**
+     * Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`
+     * (the switch renders inline). Ignored by non-boolean / `checkbox` fields.
+     */
+    boxed?: boolean;
+    /**
+     * Layout for `radio` and multi-select `checkbox` groups. Defaults to
+     * `vertical`. Ignored by other types.
+     */
+    orientation?: FieldOrientation;
+    /**
+     * Initial value. A `string` for most fields, `boolean` for `boolean`, or a
+     * `string[]` for a multi-select `checkbox` group.
+     */
+    defaultValue?: string | number | boolean | string[];
     /** Number of visible rows for `textarea` fields. */
     rows?: number;
     /**
@@ -80,16 +116,47 @@ type FieldConfig = {
      * without adding a dedicated prop for every case.
      */
     className?: string;
+    /**
+     * Extra classes merged onto the field's `<FormLabel>`. Escape hatch for
+     * per-field label styling (padding, colour, weight, casing, the label→control
+     * gap via margin, …) on top of the size-driven defaults.
+     */
+    labelClassName?: string;
+    /**
+     * Optional status pill rendered next to the field's label (e.g. an "on" /
+     * "active" chip in an inspector row). See {@link FieldBadge}.
+     */
+    badge?: FieldBadge;
 };
 type RowConfig = {
     id: string;
     fields: string[];
 };
+/**
+ * Per-group metadata for the section headers of a grouped `ObjectField`.
+ * Groups are still discovered from each field's `group` value; this only
+ * decorates the matching section header.
+ */
+type GroupConfig = {
+    /** Matches the `group` value on fields. */
+    id: string;
+    /** Override the auto-humanized section label (e.g. `viewMode` → "View Mode"). */
+    label?: string;
+    /**
+     * Extra status pills rendered in the section header, after the automatic
+     * field-count badge. See {@link FieldBadge}.
+     */
+    badges?: FieldBadge[];
+    /** Show the automatic field-count badge. Defaults to `true`. */
+    showCount?: boolean;
+};
 interface ObjectFieldProps {
     control: Control<any>;
     name: string;
     fields: FieldConfig[];
     rowConfig?: RowConfig[];
+    /** Optional per-group header decoration (extra badges, label override). */
+    groupConfig?: GroupConfig[];
     labelPosition?: LabelPosition;
     /** Field density. Defaults to `sm` (compact) for backward compatibility. */
     size?: FieldSize;
@@ -116,17 +183,25 @@ interface BaseFieldProps {
     max?: number;
     step?: number;
     presetColors?: ColorPreset[];
-    defaultValue?: string;
+    defaultValue?: AnyValue;
     rows?: number;
     className?: string;
+    labelClassName?: string;
+    badge?: FieldBadge;
     labelPosition?: LabelPosition;
     size?: FieldSize;
+    control?: BooleanControl;
+    orientation?: FieldOrientation;
+    /** Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`. */
+    boxed?: boolean;
 }
 declare const InputField: React$1.FC<BaseFieldProps>;
 declare const PasswordField: React$1.FC<BaseFieldProps>;
 declare const TextareaField: React$1.FC<BaseFieldProps>;
 declare const SelectField: React$1.FC<BaseFieldProps>;
 declare const BooleanField: React$1.FC<BaseFieldProps>;
+declare const RadioField: React$1.FC<BaseFieldProps>;
+declare const CheckboxGroupField: React$1.FC<BaseFieldProps>;
 declare const ColorField: React$1.FC<BaseFieldProps>;
 declare const NumberField: React$1.FC<BaseFieldProps>;
 declare const IconField: React$1.FC<BaseFieldProps>;
@@ -135,6 +210,8 @@ declare const Field: {
     Password: React$1.FC<BaseFieldProps>;
     Textarea: React$1.FC<BaseFieldProps>;
     Boolean: React$1.FC<BaseFieldProps>;
+    Radio: React$1.FC<BaseFieldProps>;
+    CheckboxGroup: React$1.FC<BaseFieldProps>;
     Color: React$1.FC<BaseFieldProps>;
     Number: React$1.FC<BaseFieldProps>;
     Select: React$1.FC<BaseFieldProps>;
@@ -147,6 +224,8 @@ interface FormFieldExtensions {
     Password: typeof PasswordField;
     Textarea: typeof TextareaField;
     Boolean: typeof BooleanField;
+    Radio: typeof RadioField;
+    CheckboxGroup: typeof CheckboxGroupField;
     Color: typeof ColorField;
     Number: typeof NumberField;
     Select: typeof SelectField;
@@ -155,6 +234,43 @@ interface FormFieldExtensions {
 type FormFieldType = typeof FormField$1 & FormFieldExtensions;
 declare const FormField: FormFieldType;
 
+interface SettingsPanelProps extends Omit<ObjectFieldProps, 'control'> {
+    /**
+     * The react-hook-form instance (from `useForm`). The panel renders its own
+     * `<Form>` provider around the fields, so it is fully self-contained — no
+     * external `<Form>` wrapper is required.
+     */
+    form: UseFormReturn<any>;
+    /** Title shown above the fields (uppercase, muted — the panel heading). */
+    title?: React$1.ReactNode;
+    /** Extra classes merged onto the outer `Card` (e.g. a fixed width). */
+    className?: string;
+    /** Extra classes merged onto the scrollable `CardContent`. */
+    contentClassName?: string;
+    /**
+     * Extra content rendered inside the form, after the fields — e.g. a footer
+     * with Apply / Reset actions. Rendered within the `<Form>` provider so a
+     * submit button has form context.
+     */
+    children?: React$1.ReactNode;
+}
+/**
+ * A self-contained, form-driven settings / inspector panel: the card chrome, an
+ * uppercase heading and the sectioned {@link ObjectField} accordion in a single
+ * component. Consumers own their `useForm` and pass it in; everything else — the
+ * `Card`, scroll region, `<Form>` provider, grouped accordions with count
+ * badges and per-field status pills — is handled here.
+ *
+ * ```tsx
+ * const form = useForm({ defaultValues });
+ * <SettingsPanel title="Canvas Settings" form={form} name="canvas" fields={fields} />
+ * ```
+ *
+ * All {@link ObjectFieldProps} (`name`, `fields`, `rowConfig`, `labelPosition`,
+ * `size`, `columns`) are forwarded to the underlying `ObjectField`.
+ */
+declare function SettingsPanel({ form, title, className, contentClassName, children, ...objectField }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
+
 interface ColorSwatchesProps {
     value?: string;
     onChange?: (value: string) => void;
@@ -252,4 +368,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 
-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 };
+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

@@ -2,7 +2,7 @@ import * as React$1 from 'react';
 import * as _radix_ui_react_slot from '@radix-ui/react-slot';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps, Control } from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, Control, UseFormReturn } from 'react-hook-form';
 export { Control, DefaultValues, FieldValues, Mode, SubmitHandler, UseFormReturn } from 'react-hook-form';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -36,17 +36,34 @@ declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttribu
 
 type LabelPosition = 'side' | 'top';
 /**
- * Field density. `sm` is the compact look used by dense panels (e.g. the
- * modeller property editor) and is the default for backward compatibility.
- * `md` renders full-size fields for primary, page-level forms.
+ * Field density.
+ * - `xs` — ultra-dense property-panel look (small controls, tight rows, compact
+ *   section headers). Use for inspector/side panels like the modeller diagram
+ *   properties editor.
+ * - `sm` — compact look, the default for backward compatibility.
+ * - `md` — full-size fields for primary, page-level forms.
  */
-type FieldSize = 'sm' | 'md';
-type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'color' | 'select' | 'icon';
+type FieldSize = 'xs' | 'sm' | 'md';
+type FieldType = 'text' | 'password' | 'textarea' | 'number' | 'boolean' | 'checkbox' | 'radio' | 'color' | 'select' | 'icon';
+/** Widget used to render a single `boolean` field. Defaults to `switch`. */
+type BooleanControl = 'switch' | 'checkbox';
+/** Layout for the `radio` list and the multi-select `checkbox` group. */
+type FieldOrientation = 'vertical' | 'horizontal';
 type ColorPreset = {
     label: string;
     value: string;
     darkValue?: string;
 };
+/**
+ * Small status pill rendered next to a field's label — the "on" / "active" /
+ * "no editor" chips seen in inspector panels. `variant` maps to the `Badge`
+ * component's variants and defaults to `secondary` (neutral grey). Use
+ * `default` for the solid accent ("on") pill.
+ */
+type FieldBadge = {
+    label: string;
+    variant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'soft';
+};
 type FieldConfig = {
     name: string;
     type: FieldType;
@@ -63,7 +80,26 @@ type FieldConfig = {
     group?: string;
     row?: string;
     presetColors?: ColorPreset[];
-    defaultValue?: string;
+    /**
+     * Widget for a single `boolean` field: `switch` (default) renders a toggle;
+     * `checkbox` renders a compact inline `☑ label`. Ignored by non-boolean types.
+     */
+    control?: BooleanControl;
+    /**
+     * Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`
+     * (the switch renders inline). Ignored by non-boolean / `checkbox` fields.
+     */
+    boxed?: boolean;
+    /**
+     * Layout for `radio` and multi-select `checkbox` groups. Defaults to
+     * `vertical`. Ignored by other types.
+     */
+    orientation?: FieldOrientation;
+    /**
+     * Initial value. A `string` for most fields, `boolean` for `boolean`, or a
+     * `string[]` for a multi-select `checkbox` group.
+     */
+    defaultValue?: string | number | boolean | string[];
     /** Number of visible rows for `textarea` fields. */
     rows?: number;
     /**
@@ -80,16 +116,47 @@ type FieldConfig = {
      * without adding a dedicated prop for every case.
      */
     className?: string;
+    /**
+     * Extra classes merged onto the field's `<FormLabel>`. Escape hatch for
+     * per-field label styling (padding, colour, weight, casing, the label→control
+     * gap via margin, …) on top of the size-driven defaults.
+     */
+    labelClassName?: string;
+    /**
+     * Optional status pill rendered next to the field's label (e.g. an "on" /
+     * "active" chip in an inspector row). See {@link FieldBadge}.
+     */
+    badge?: FieldBadge;
 };
 type RowConfig = {
     id: string;
     fields: string[];
 };
+/**
+ * Per-group metadata for the section headers of a grouped `ObjectField`.
+ * Groups are still discovered from each field's `group` value; this only
+ * decorates the matching section header.
+ */
+type GroupConfig = {
+    /** Matches the `group` value on fields. */
+    id: string;
+    /** Override the auto-humanized section label (e.g. `viewMode` → "View Mode"). */
+    label?: string;
+    /**
+     * Extra status pills rendered in the section header, after the automatic
+     * field-count badge. See {@link FieldBadge}.
+     */
+    badges?: FieldBadge[];
+    /** Show the automatic field-count badge. Defaults to `true`. */
+    showCount?: boolean;
+};
 interface ObjectFieldProps {
     control: Control<any>;
     name: string;
     fields: FieldConfig[];
     rowConfig?: RowConfig[];
+    /** Optional per-group header decoration (extra badges, label override). */
+    groupConfig?: GroupConfig[];
     labelPosition?: LabelPosition;
     /** Field density. Defaults to `sm` (compact) for backward compatibility. */
     size?: FieldSize;
@@ -116,17 +183,25 @@ interface BaseFieldProps {
     max?: number;
     step?: number;
     presetColors?: ColorPreset[];
-    defaultValue?: string;
+    defaultValue?: AnyValue;
     rows?: number;
     className?: string;
+    labelClassName?: string;
+    badge?: FieldBadge;
     labelPosition?: LabelPosition;
     size?: FieldSize;
+    control?: BooleanControl;
+    orientation?: FieldOrientation;
+    /** Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`. */
+    boxed?: boolean;
 }
 declare const InputField: React$1.FC<BaseFieldProps>;
 declare const PasswordField: React$1.FC<BaseFieldProps>;
 declare const TextareaField: React$1.FC<BaseFieldProps>;
 declare const SelectField: React$1.FC<BaseFieldProps>;
 declare const BooleanField: React$1.FC<BaseFieldProps>;
+declare const RadioField: React$1.FC<BaseFieldProps>;
+declare const CheckboxGroupField: React$1.FC<BaseFieldProps>;
 declare const ColorField: React$1.FC<BaseFieldProps>;
 declare const NumberField: React$1.FC<BaseFieldProps>;
 declare const IconField: React$1.FC<BaseFieldProps>;
@@ -135,6 +210,8 @@ declare const Field: {
     Password: React$1.FC<BaseFieldProps>;
     Textarea: React$1.FC<BaseFieldProps>;
     Boolean: React$1.FC<BaseFieldProps>;
+    Radio: React$1.FC<BaseFieldProps>;
+    CheckboxGroup: React$1.FC<BaseFieldProps>;
     Color: React$1.FC<BaseFieldProps>;
     Number: React$1.FC<BaseFieldProps>;
     Select: React$1.FC<BaseFieldProps>;
@@ -147,6 +224,8 @@ interface FormFieldExtensions {
     Password: typeof PasswordField;
     Textarea: typeof TextareaField;
     Boolean: typeof BooleanField;
+    Radio: typeof RadioField;
+    CheckboxGroup: typeof CheckboxGroupField;
     Color: typeof ColorField;
     Number: typeof NumberField;
     Select: typeof SelectField;
@@ -155,6 +234,43 @@ interface FormFieldExtensions {
 type FormFieldType = typeof FormField$1 & FormFieldExtensions;
 declare const FormField: FormFieldType;
 
+interface SettingsPanelProps extends Omit<ObjectFieldProps, 'control'> {
+    /**
+     * The react-hook-form instance (from `useForm`). The panel renders its own
+     * `<Form>` provider around the fields, so it is fully self-contained — no
+     * external `<Form>` wrapper is required.
+     */
+    form: UseFormReturn<any>;
+    /** Title shown above the fields (uppercase, muted — the panel heading). */
+    title?: React$1.ReactNode;
+    /** Extra classes merged onto the outer `Card` (e.g. a fixed width). */
+    className?: string;
+    /** Extra classes merged onto the scrollable `CardContent`. */
+    contentClassName?: string;
+    /**
+     * Extra content rendered inside the form, after the fields — e.g. a footer
+     * with Apply / Reset actions. Rendered within the `<Form>` provider so a
+     * submit button has form context.
+     */
+    children?: React$1.ReactNode;
+}
+/**
+ * A self-contained, form-driven settings / inspector panel: the card chrome, an
+ * uppercase heading and the sectioned {@link ObjectField} accordion in a single
+ * component. Consumers own their `useForm` and pass it in; everything else — the
+ * `Card`, scroll region, `<Form>` provider, grouped accordions with count
+ * badges and per-field status pills — is handled here.
+ *
+ * ```tsx
+ * const form = useForm({ defaultValues });
+ * <SettingsPanel title="Canvas Settings" form={form} name="canvas" fields={fields} />
+ * ```
+ *
+ * All {@link ObjectFieldProps} (`name`, `fields`, `rowConfig`, `labelPosition`,
+ * `size`, `columns`) are forwarded to the underlying `ObjectField`.
+ */
+declare function SettingsPanel({ form, title, className, contentClassName, children, ...objectField }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
+
 interface ColorSwatchesProps {
     value?: string;
     onChange?: (value: string) => void;
@@ -252,4 +368,4 @@ declare function InputGroupText({ className, ...props }: React$1.ComponentProps<
 declare function InputGroupInput({ className, ...props }: React$1.ComponentProps<"input">): react_jsx_runtime.JSX.Element;
 declare function InputGroupTextarea({ className, ...props }: React$1.ComponentProps<"textarea">): react_jsx_runtime.JSX.Element;
 
-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 };
+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 };