@invana/forms 0.0.30 → 0.0.32

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps, Control, UseFormReturn } from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, RegisterOptions, 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';
@@ -74,6 +74,10 @@ type FieldConfig = {
         label: string;
         value: string;
     }[];
+    /**
+     * Bounds of a `number` field. With both, it is a slider beside its number;
+     * without, a typed number input that can carry a `unit` and an `aside`.
+     */
     min?: number;
     max?: number;
     step?: number;
@@ -102,6 +106,16 @@ type FieldConfig = {
     defaultValue?: string | number | boolean | string[];
     /** Number of visible rows for `textarea` fields. */
     rows?: number;
+    /**
+     * Unit drawn at the end of a `text` or `number` input — `%`, `d`, `kg/ha`.
+     * Display only; the value stays the bare number or text.
+     */
+    unit?: string;
+    /**
+     * A short note drawn at the end of a `text` or `number` input, after the
+     * unit — `quoted 14 d` beside an observed lead time. Display only.
+     */
+    aside?: string;
     /**
      * How many grid columns the field spans on `md+` screens. Defaults to `1`.
      * The grid is two columns by default (see `ObjectField`'s `columns`), so
@@ -127,6 +141,11 @@ type FieldConfig = {
      * "active" chip in an inspector row). See {@link FieldBadge}.
      */
     badge?: FieldBadge;
+    /**
+     * Validation, as react-hook-form's rules — `validate: (v) => v > 0 || 'Must
+     * be above 0'`. The message shows under the field.
+     */
+    rules?: Omit<RegisterOptions<FieldValues>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
 };
 type RowConfig = {
     id: string;
@@ -150,8 +169,9 @@ type GroupConfig = {
     /** Show the automatic field-count badge. Defaults to `true`. */
     showCount?: boolean;
 };
-interface ObjectFieldProps {
-    control: Control<any>;
+interface ObjectFieldProps<T extends FieldValues = FieldValues> {
+    /** `form.control` of the consumer's `useForm`, typed or not. */
+    control: Control<T>;
     name: string;
     fields: FieldConfig[];
     rowConfig?: RowConfig[];
@@ -166,6 +186,19 @@ interface ObjectFieldProps {
      * Below `md` the grid always collapses to a single column.
      */
     columns?: number;
+    /**
+     * What the columns answer to. `viewport` (the default) is the grid of a
+     * page: `columns` wide from `md` up. `container` is a form inside a card or
+     * a chat turn, which is narrow on any screen: two columns once the form
+     * itself is 280px wide, one below, and a lone last field takes the row.
+     */
+    fit?: 'viewport' | 'container';
+    /**
+     * How a field's `group` is drawn. `accordion` (the default) folds each
+     * group under a header with its count — a settings panel. `section` sets
+     * each under a small caps label and keeps it open — a short form in a card.
+     */
+    groupAs?: 'accordion' | 'section';
 }
 
 type AnyValue = any;
@@ -194,6 +227,10 @@ interface BaseFieldProps {
     orientation?: FieldOrientation;
     /** Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`. */
     boxed?: boolean;
+    /** Unit at the end of a text or number input. */
+    unit?: string;
+    /** Note at the end of a text or number input, after the unit. */
+    aside?: string;
 }
 declare const InputField: React$1.FC<BaseFieldProps>;
 declare const PasswordField: React$1.FC<BaseFieldProps>;
@@ -205,19 +242,7 @@ 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>;
-declare const Field: {
-    Input: React$1.FC<BaseFieldProps>;
-    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>;
-    Icon: React$1.FC<BaseFieldProps>;
-};
-declare const ObjectField: React$1.FC<ObjectFieldProps>;
+declare const ObjectField: <T extends FieldValues = FieldValues>({ control, name, fields, rowConfig, groupConfig, labelPosition, size, columns, fit, groupAs, }: ObjectFieldProps<T>) => React$1.JSX.Element;
 interface FormFieldExtensions {
     ObjectField: typeof ObjectField;
     Input: typeof InputField;
@@ -300,13 +325,14 @@ interface IconInputProps {
 declare const IconInput: React$1.FC<IconInputProps>;
 
 /**
- * `sm` (26px) is the application field — a property editor, a settings row, a
- * form inside a 420px panel. `default` (40px) stays the form-page size.
+ * The control scale: `sm` (26px) is the application field — a property
+ * editor, a settings row, a form inside a 420px panel; `default` (32px) a
+ * standalone form or dialog; `lg` (40px) a form page.
  *
  * Named `inputSize` because `size` is already an `<input>` attribute meaning
  * "how many characters wide", and shadowing it would silently drop that.
  */
-type InputSize = "default" | "sm";
+type InputSize = "sm" | "default" | "lg";
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLInputElement> & React$1.InputHTMLAttributes<HTMLInputElement> & {
     inputSize?: InputSize;
 }, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
@@ -332,8 +358,8 @@ declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
-    /** Matches `Input`'s `inputSize` — `sm` is the 26px application field. */
-    triggerSize?: "default" | "sm";
+    /** Matches `Input`'s `inputSize` — the control scale, `sm` 26 / `default` 32 / `lg` 40. */
+    triggerSize?: "sm" | "default" | "lg";
 } & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -358,6 +384,10 @@ declare function FieldLegend({ className, variant, ...props }: React.ComponentPr
     variant?: "legend" | "label";
 }): React$1.JSX.Element;
 declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React$1.JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React$1.JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
@@ -428,7 +458,7 @@ interface ParamRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  */
 declare const ParamRow: React$1.ForwardRefExoticComponent<ParamRowProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function InputGroup({ className, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React$1 from 'react';
 import * as react_hook_form from 'react-hook-form';
-import { FieldValues, FieldPath, ControllerProps, Control, UseFormReturn } from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps, RegisterOptions, 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';
@@ -74,6 +74,10 @@ type FieldConfig = {
         label: string;
         value: string;
     }[];
+    /**
+     * Bounds of a `number` field. With both, it is a slider beside its number;
+     * without, a typed number input that can carry a `unit` and an `aside`.
+     */
     min?: number;
     max?: number;
     step?: number;
@@ -102,6 +106,16 @@ type FieldConfig = {
     defaultValue?: string | number | boolean | string[];
     /** Number of visible rows for `textarea` fields. */
     rows?: number;
+    /**
+     * Unit drawn at the end of a `text` or `number` input — `%`, `d`, `kg/ha`.
+     * Display only; the value stays the bare number or text.
+     */
+    unit?: string;
+    /**
+     * A short note drawn at the end of a `text` or `number` input, after the
+     * unit — `quoted 14 d` beside an observed lead time. Display only.
+     */
+    aside?: string;
     /**
      * How many grid columns the field spans on `md+` screens. Defaults to `1`.
      * The grid is two columns by default (see `ObjectField`'s `columns`), so
@@ -127,6 +141,11 @@ type FieldConfig = {
      * "active" chip in an inspector row). See {@link FieldBadge}.
      */
     badge?: FieldBadge;
+    /**
+     * Validation, as react-hook-form's rules — `validate: (v) => v > 0 || 'Must
+     * be above 0'`. The message shows under the field.
+     */
+    rules?: Omit<RegisterOptions<FieldValues>, 'valueAsNumber' | 'valueAsDate' | 'setValueAs' | 'disabled'>;
 };
 type RowConfig = {
     id: string;
@@ -150,8 +169,9 @@ type GroupConfig = {
     /** Show the automatic field-count badge. Defaults to `true`. */
     showCount?: boolean;
 };
-interface ObjectFieldProps {
-    control: Control<any>;
+interface ObjectFieldProps<T extends FieldValues = FieldValues> {
+    /** `form.control` of the consumer's `useForm`, typed or not. */
+    control: Control<T>;
     name: string;
     fields: FieldConfig[];
     rowConfig?: RowConfig[];
@@ -166,6 +186,19 @@ interface ObjectFieldProps {
      * Below `md` the grid always collapses to a single column.
      */
     columns?: number;
+    /**
+     * What the columns answer to. `viewport` (the default) is the grid of a
+     * page: `columns` wide from `md` up. `container` is a form inside a card or
+     * a chat turn, which is narrow on any screen: two columns once the form
+     * itself is 280px wide, one below, and a lone last field takes the row.
+     */
+    fit?: 'viewport' | 'container';
+    /**
+     * How a field's `group` is drawn. `accordion` (the default) folds each
+     * group under a header with its count — a settings panel. `section` sets
+     * each under a small caps label and keeps it open — a short form in a card.
+     */
+    groupAs?: 'accordion' | 'section';
 }
 
 type AnyValue = any;
@@ -194,6 +227,10 @@ interface BaseFieldProps {
     orientation?: FieldOrientation;
     /** Wrap a `switch` boolean in a bordered, padded box. Defaults to `false`. */
     boxed?: boolean;
+    /** Unit at the end of a text or number input. */
+    unit?: string;
+    /** Note at the end of a text or number input, after the unit. */
+    aside?: string;
 }
 declare const InputField: React$1.FC<BaseFieldProps>;
 declare const PasswordField: React$1.FC<BaseFieldProps>;
@@ -205,19 +242,7 @@ 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>;
-declare const Field: {
-    Input: React$1.FC<BaseFieldProps>;
-    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>;
-    Icon: React$1.FC<BaseFieldProps>;
-};
-declare const ObjectField: React$1.FC<ObjectFieldProps>;
+declare const ObjectField: <T extends FieldValues = FieldValues>({ control, name, fields, rowConfig, groupConfig, labelPosition, size, columns, fit, groupAs, }: ObjectFieldProps<T>) => React$1.JSX.Element;
 interface FormFieldExtensions {
     ObjectField: typeof ObjectField;
     Input: typeof InputField;
@@ -300,13 +325,14 @@ interface IconInputProps {
 declare const IconInput: React$1.FC<IconInputProps>;
 
 /**
- * `sm` (26px) is the application field — a property editor, a settings row, a
- * form inside a 420px panel. `default` (40px) stays the form-page size.
+ * The control scale: `sm` (26px) is the application field — a property
+ * editor, a settings row, a form inside a 420px panel; `default` (32px) a
+ * standalone form or dialog; `lg` (40px) a form page.
  *
  * Named `inputSize` because `size` is already an `<input>` attribute meaning
  * "how many characters wide", and shadowing it would silently drop that.
  */
-type InputSize = "default" | "sm";
+type InputSize = "sm" | "default" | "lg";
 declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLInputElement> & React$1.InputHTMLAttributes<HTMLInputElement> & {
     inputSize?: InputSize;
 }, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
@@ -332,8 +358,8 @@ declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
 declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
 declare const SelectTrigger: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & {
-    /** Matches `Input`'s `inputSize` — `sm` is the 26px application field. */
-    triggerSize?: "default" | "sm";
+    /** Matches `Input`'s `inputSize` — the control scale, `sm` 26 / `default` 32 / `lg` 40. */
+    triggerSize?: "sm" | "default" | "lg";
 } & React$1.RefAttributes<HTMLButtonElement>>;
 declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
 declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
@@ -358,6 +384,10 @@ declare function FieldLegend({ className, variant, ...props }: React.ComponentPr
     variant?: "legend" | "label";
 }): React$1.JSX.Element;
 declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
+declare const fieldVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | "responsive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): React$1.JSX.Element;
 declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
 declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): React$1.JSX.Element;
 declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): React$1.JSX.Element;
@@ -428,7 +458,7 @@ interface ParamRowProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  */
 declare const ParamRow: React$1.ForwardRefExoticComponent<ParamRowProps & React$1.RefAttributes<HTMLDivElement>>;
 
-declare function InputGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
+declare function InputGroup({ className, id, "aria-describedby": describedBy, "aria-invalid": invalid, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare const inputGroupAddonVariants: (props?: ({
     align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;