loon-bulma-react 2022.3.4 → 2022.3.5

package/dist/components/Form/BaseInputProps.d.ts

@@ -1,5 +1,5 @@
 import { DirectionProp, KeyboardTypeProp } from '../../loon-react-bulma-types';
-export declare type BaseInputProps = {
+export declare type BaseInputProps<T extends any = void> = {
     /** is dit veld disabled ? (optioneel) */
     disabled?: boolean;
     /** name input: gebruikt voor een <label> als er geen label gedefinieerd is & de name-attribuut <input> */
@@ -15,13 +15,13 @@ export declare type BaseInputProps = {
     /** de input is horizontaal, label & input op 1 lijn. (default = 'horizontal') */
     direction?: DirectionProp;
     /** een object met validatie-regels */
-    validation?: FormValidationType;
+    validation?: FormValidationType<T>;
     /** placeholder in input (optioneel) */
     placeholder?: string;
     /** Welk (virtueel) toetsenbord moet er gebruikt worden? (smartphones, tablets) */
     keyboardType?: KeyboardTypeProp;
 };
-export declare type FormValidationType = {
+export declare type FormValidationType<T extends any = void> = {
     /** is een value required? */
     required?: boolean;
     /**
@@ -51,9 +51,9 @@ export declare type FormValidationType = {
      * @param val de nieuwe te valideren waarde
      * @returns een string met daarin de foutmelding OF een lege string voor een valid waarde.
      */
-    onValidate?: (val: string | string[] | number | number[] | boolean | Date) => string;
+    onValidate?: (val: T | string | string[] | number | number[] | boolean | Date | FileList) => string;
 };
-export declare type BaseState = {
+export declare type BaseState<T extends any = void> = {
     /** de naam die in foutmeldingen komt */
     description: string;
     /** de fout-melding, '' voor valid */
@@ -63,7 +63,7 @@ export declare type BaseState = {
     /** is de input aangeraakt */
     touched: boolean;
     /** validatie-object voor deze input */
-    validation?: FormValidationType;
+    validation?: FormValidationType<T>;
 };
 export declare type BaseChangeStateType = {
     type: 'CHANGE';
@@ -73,12 +73,12 @@ export declare type BaseTouchStateType = {
     type: 'TOUCH';
     touched: boolean;
 };
-export declare type BaseSetStateType = {
+export declare type BaseSetStateType<T extends any = void> = {
     type: 'SET';
-    validation?: FormValidationType;
+    validation?: FormValidationType<T>;
 };
 export declare type BaseFocusStateType = {
     type: 'FOCUS';
     focus: boolean;
 };
-export declare type InputTypeProp = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'month' | 'week' | 'time' | 'color' | 'search' | 'multirange' | 'multiselect' | 'select' | 'textarea';
+export declare type InputTypeProp = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search' | 'multirange' | 'multiselect' | 'select' | 'textarea';

package/dist/components/Form/File/FileInput.d.ts

@@ -0,0 +1,39 @@
+/// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { SizeProp } from '../../../loon-react-bulma-types';
+import { BaseInputProps } from '../BaseInputProps';
+declare type FileInputProps = BaseInputProps & {
+    /** file types die een file-input zou moeten accepteren. Komma-gescheiden lijst van unieke file-type-specificaties (zie MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) */
+    accept?: string;
+    /** welke camera moet er gebruikt maken voor afbeelding/video data, als dat via de accept-prop is toegestaan */
+    capture?: 'user' | 'environment';
+    /** toon de input als een block */
+    boxed?: boolean;
+    /** mag een gebruik meerdere files selecteren */
+    multiple?: boolean;
+    /** tekst voor op selecteer-file-button. default wordt de 'name'-prop gebruikt */
+    kiesLabel?: string;
+    /** tekst voor 'er-is-nog-geen-bestand'. default = '' */
+    nogGeenBestandLabel?: string;
+    /** start value voor deze input (optioneel) */
+    value?: string;
+    /** grootte input (optioneel) */
+    size?: SizeProp;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param files: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(files: FileList, isValid?: boolean): any | void;
+    /** formatteer de weergegeven filenaamm volgens een eigen functie */
+    filenameFormatter?(val: string, files: FileList): string;
+    icon?: string | IconProp;
+};
+/**
+ * Maak een file input
+ * @param props
+ * @returns <input type="text'|'tel'|'url">
+ */
+declare const FileInput: (props: FileInputProps) => JSX.Element;
+export { FileInput };
+export type { FileInputProps };

package/dist/components/Form/Form.d.ts

@@ -1,5 +1,6 @@
-import { DirectionProp, SizeProp } from '../../loon-react-bulma-types';
+import { AlignmentProp, DirectionProp, SizeProp } from '../../loon-react-bulma-types';
 import React from 'react';
+import { BasicInput } from './Others/BasicInput';
 declare type FormProps = {
     /** de inputs voor dit form */
     children: React.ReactNode;
@@ -27,7 +28,7 @@ declare type FormProps = {
 declare const Form: {
     (props: FormProps): JSX.Element;
     /** een zelf-configureerbare base input */
-    Input: (props: import("./Others/BasicInput").BasicInputProps) => JSX.Element;
+    Input: typeof BasicInput;
     /** input voor type url, text of tel */
     Text: (props: import("./Text/TextInput").TextInputProps) => JSX.Element;
     /** password input */
@@ -58,12 +59,24 @@ declare const Form: {
     Time: (props: import("./Datetimes/TimeInput").TimeInputProps) => JSX.Element;
     /** checkbox input */
     CheckBox: (props: import("./Checkbox/Checkbox").CheckboxInputProps) => JSX.Element;
+    /** een file-input */
+    File: (props: import("./File/FileInput").FileInputProps) => JSX.Element;
     /** Plaats 2 of meer inputs op een lijn
      * LET OP: je moet zelf instellen of ze horizontaal / verticaal moeten zijn (default = horizontal)
      */
-    Line: (props: {
+    Line: ({ children }: {
         children: React.ReactNode;
     }) => JSX.Element;
+    /** ruimte om eigen spullen in het form te stoppen. */
+    Space: ({ children }: {
+        children: React.ReactNode;
+    }) => JSX.Element;
+    /** container voor de buttons van het form. Grootte van de buttons kan onafhankelijk worden ingesteld */
+    Buttons: ({ children, size, alignment, }: {
+        children: React.ReactNode;
+        size?: "s" | "l" | "m" | "xl" | undefined;
+        alignment?: "l" | "c" | "r" | undefined;
+    }) => JSX.Element;
 };
 export { Form };
 export type { FormProps };

package/dist/components/Form/FormBuilder/FormBuilder.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { FormBuilderProps } from './FormBuilderProps';
+/**
+ * stel een form samen op basis van een array van fields, met een submit-button en optionele extra buttons.
+ * Kan ook in een modal getoont worden.
+ * @param props
+ * @returns een object voor POST requests OF een URLPARAMS string voor GET requests
+ */
+export declare function FormBuilder(props: FormBuilderProps): JSX.Element;

package/dist/components/Form/FormBuilder/FormBuilderProps.d.ts

@@ -0,0 +1,92 @@
+import { ColorProp, DirectionProp } from '../../../loon-react-bulma-types';
+import { FormValidationType } from './../BaseInputProps';
+import { SelectOptionType, SelectOptionGroupType } from './../Selects/BaseSelectProps';
+/** Props voor de Form-component */
+export declare type FormBuilderProps = {
+    /** definieer een onSubmit voor het form
+     * <form onSubmit="onSubmit(e)"
+     * @param e: data
+     * @returns: het resultaat van het form: GET: URLSearchParams string, POST: key-values van fields
+     */
+    onSubmit(e: any | undefined): void;
+    /** Moet het form in een modal verschijnen */
+    useModal?: boolean;
+    /** wat te doen om de modal te sluiten. ALLEEN ALS useModal 'true' IS, IS DEZE NODIG */
+    onDismiss?(e: any): void;
+    /** buttons voor onderaan het form */
+    buttons: {
+        /** de tekst voor de (groene) submit button, deze is VERPLICHT */
+        submit: string;
+        /** 0 of emerdere (blauw) buttons */
+        other?: FormBuilderButton[];
+    };
+    /** Een array van fields voor het form */
+    fields: FormBuilderFieldProps[];
+    /** autocomplete on or off? */
+    autocomplete?: 'on' | 'off' | null;
+    /** de form name */
+    name: string;
+    /** de GET / POST methode voor het form
+     * <form method="get"></form>
+     */
+    method: 'post' | 'get';
+    /** target voor het form */
+    target?: '_self' | '_blank' | '_parent' | '_top' | null;
+    direction?: DirectionProp;
+};
+/** Props voor de fields in een form van de Form-Component */
+export declare type FormBuilderFieldProps = {
+    /** de naam voor het field. gebruikt in input en  in <label> als geen label gedefinieerd.
+     * <input name="..." /> */
+    name: string;
+    /** een tooltip voor de button */
+    tooltip?: string;
+    /** label voor het field, als die afwijkt van de name-attribuut. gebruikt in <label> (optional) */
+    label?: string;
+    /** is het field gevalideerd en wat is daar de uitkomst van. */
+    placeholder?: string;
+    /** (optioneel) id van een field. Anders wordt de "name" gebruikt  */
+    id?: string;
+    valid?: boolean;
+    /** de waarde van de input.
+     * Voor multi-range-inputs: een number[] van twee waarden: [valueA, valueB]
+     * Voor Datum/Tijd inputs:
+     * - type 'date': YYYY-MM-DD
+     * - type 'time': HH:mm
+     * - type 'datetime': YYYY-MM-DD HH:mm OF YYYY-MM-DDTHH:mm
+     */
+    value?: string | string[] | number | number[] | boolean | null;
+    /** object gebruikt voot validatie */
+    validation?: FormValidationType;
+    /** input type: <input type="..." /> */
+    type: 'text' | 'number' | 'email' | 'password' | 'date' | 'datetime' | 'time' | 'textarea' | 'select' | 'multiselect' | 'checkbox' | 'tel' | 'url' | 'range' | 'multirange' | 'hidden';
+    /** voor type 'number', 'time', 'range' en 'multirange' kan er een step-grootte worden opgegeven */
+    step?: number;
+    /** autocomplete voor gebruik met wachtwoorden, usernames & wachtwoordmanagers */
+    autocomplete?: 'on' | 'off' | 'current-password' | 'new-password' | 'username' | undefined;
+    /** voor een <select> input: welke options moeten er zijn */
+    selectOptions?: string[] | SelectOptionType[] | SelectOptionGroupType[];
+};
+/** Props voor het Button-object van de Form-component */
+export declare type FormBuilderButton = {
+    /** tekst op de button */
+    txt: string;
+    /** moet de formdata gevalideert zijn voor je de button kan gebruiken? */
+    mustValidate?: boolean;
+    /** button type <button type="..." */
+    type: 'submit' | 'reset' | 'button';
+    /** button color: s: success-button, d: danger-button, n: primarycolor button */
+    color?: ColorProp;
+    /** wat als er op de button geklikt wordt? (optional) */
+    onClick(e: MouseEvent): any | void;
+};
+export declare type ChangedValue = {
+    /** nieuwe waarde */
+    new: number | number[] | string | string[] | boolean | null | undefined;
+    /** oude waarde */
+    old: number | number[] | string | string[] | boolean | null | undefined;
+    /** is de waarde valid */
+    valid: boolean;
+    /** wat is de naam van het gewijzigde field */
+    name: string;
+};

package/dist/components/Form/Others/BasicInput.d.ts

@@ -2,13 +2,14 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { SizeProp } from '../../../loon-react-bulma-types';
 import { BaseInputProps, InputTypeProp } from '../BaseInputProps';
-declare type BasicInputProps = BaseInputProps & {
+declare type InputValueType = string | number | readonly string[] | undefined;
+declare type BasicInputProps<T extends InputValueType> = BaseInputProps<T> & {
     icon?: string | IconProp | any;
     /** type van de tekst input (default = 'text') */
-    type?: InputTypeProp;
+    type: InputTypeProp;
     /** start value voor deze input (optioneel) */
-    value?: string;
-    /** speciaal voor password-managers. Wat is de functie van deze input */
+    value?: T;
+    /** speciaal voor autocomplete-managers, zoals password-managers. Wat is de functie van deze input */
     autocomplete?: 'on' | 'off' | 'current-password' | 'new-password' | 'username' | 'given-name' | 'additional-name' | 'family-name' | 'nickname' | 'email' | 'name' | 'one-time-code' | 'organization' | 'street-address' | 'tel' | 'bday' | 'language' | 'country' | 'postal-code' | string;
     /** grootte input (optioneel) */
     size?: SizeProp;
@@ -17,13 +18,14 @@ declare type BasicInputProps = BaseInputProps & {
      * @param newVal: de nieuwe waarde
      * @param valid: is de nieuwe waarde geldig?
      */
-    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+    onValueChanged?(newVal: T, isValid?: boolean): any | void;
 };
 /**
- * Maak een input van een tekst-type met optionele validation.
+ * Input met alle gewone <input> properties zelf in te vullen.
+ * LET OP: Voor validatie kan ALLEEN de onValidate() function gebruikt
  * @param props
- * @returns <input type="text'|'tel'|'url">
+ * @returns <input type="...">
  */
-declare const BasicInput: (props: BasicInputProps) => JSX.Element;
+declare function BasicInput<T extends InputValueType>(props: BasicInputProps<T>): JSX.Element;
 export { BasicInput };
-export type { BasicInputProps };
+export type { BasicInputProps, InputValueType };

package/dist/index.d.ts

@@ -47,8 +47,8 @@ export { Link, LinkButton } from './components/Link/Link';
 export type { LinkProps, LinkButtonProps } from './components/Link/Link';
 export { Form } from './components/Form/Form';
 export type { FormProps } from './components/Form/Form';
-export { FormBuilder } from './components/Form/FormBuilder';
-export type { FormBuilderProps, FormBuilderFieldProps, FormBuilderButton } from './components/Form/FormBuilderProps';
+export { FormBuilder } from './components/Form/FormBuilder/FormBuilder';
+export type { FormBuilderProps, FormBuilderFieldProps, FormBuilderButton, } from './components/Form/FormBuilder/FormBuilderProps';
 export { CheckBox } from './components/Form/Checkbox/Checkbox';
 export type { CheckboxInputProps } from './components/Form/Checkbox/Checkbox';
 export type { SelectOptionGroupType, SelectOptionType } from './components/Form/Selects/BaseSelectProps';
@@ -61,7 +61,7 @@ export type { ColorInputProps } from './components/Form/Others/ColorInput';
 export { HiddenInput } from './components/Form/Others/HiddenInput';
 export type { HiddenInputProps } from './components/Form/Others/HiddenInput';
 export { BasicInput } from './components/Form/Others/BasicInput';
-export type { BasicInputProps } from './components/Form/Others/BasicInput';
+export type { BasicInputProps, InputValueType } from './components/Form/Others/BasicInput';
 export { EmailInput } from './components/Form/Text/EmailInput';
 export type { EmailInputProps } from './components/Form/Text/EmailInput';
 export { PasswordInput } from './components/Form/Text/PasswordInput';
@@ -82,6 +82,8 @@ export { DateTimeInput } from './components/Form/Datetimes/DateTimeInput';
 export type { DateTimeInputProps } from './components/Form/Datetimes/DateTimeInput';
 export { TimeInput } from './components/Form/Datetimes/TimeInput';
 export type { TimeInputProps } from './components/Form/Datetimes/TimeInput';
+export { FileInput } from './components/Form/File/FileInput';
+export type { FileInputProps } from './components/Form/File/FileInput';
 export { NotifierProvider, useNotifier } from './contexts/Notifier/NotifierProvider';
 export type { NotifierItemProps } from './contexts/Notifier/NotifierProps';
 export { Calendar } from './components/Calendar';

package/dist/index.js

@@ -3893,7 +3893,7 @@ function validate$d(value, desc, type, validation) {
   return '';
 }
 
-var reducer$e = function reducer(state, action) {
+function reducer$e(state, action) {
   switch (action.type) {
     case 'SET':
       var invalidMsg = validate$e(action.value, action.validation);
@@ -3917,17 +3917,17 @@ var reducer$e = function reducer(state, action) {
         touched: action.touched
       });
   }
-};
+}
 
-var BasicInput = function BasicInput(props) {
-  var _props$label, _props$value, _props$type, _props$label2, _props$id, _props$direction, _props$id2, _props$validation, _props$keyboardType;
+function BasicInput(props) {
+  var _props$label, _props$value, _props$label2, _props$id, _props$direction, _props$id2, _props$validation, _props$keyboardType;
 
   var _useReducer = React.useReducer(reducer$e, {
     description: (_props$label = props.label) != null ? _props$label : props.name,
     value: (_props$value = props.value) != null ? _props$value : '',
     invalidMsg: '',
     valid: false,
-    type: (_props$type = props.type) != null ? _props$type : 'text',
+    type: props.type == 'datetime' ? 'datetime-local' : props.type,
     touched: false,
     validation: props.validation
   }),
@@ -3981,7 +3981,7 @@ var BasicInput = function BasicInput(props) {
     required: (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.required,
     className: classes,
     onBlur: function onBlur() {
-      return !state.touched && dispatch({
+      return dispatch({
         type: 'TOUCH',
         touched: true
       });
@@ -4004,17 +4004,156 @@ var BasicInput = function BasicInput(props) {
   }), state.valid && state.touched && React__default.createElement(reactFontawesome.FontAwesomeIcon, {
     icon: freeSolidSvgIcons.faCheck
   }))));
-};
+}
 
 function validate$e(value, validation) {
-  var rgx = validation !== null && validation !== void 0 && validation.pattern ? new RegExp(validation === null || validation === void 0 ? void 0 : validation.pattern) : null;
-  if (!validation) return '';else if (validation !== null && validation !== void 0 && validation.onValidate) return validation.onValidate(value);else if (validation !== null && validation !== void 0 && validation.min && value.length < validation.min) return "Waarde moet uit minstens " + validation.min + " karakters bestaan";else if (validation !== null && validation !== void 0 && validation.max && value.length > validation.max) return "Waarde moet uit maximaal " + validation.max + " karakters bestaan";else if (validation !== null && validation !== void 0 && validation.required && !value) return "Waarde is verplicht";else if (rgx && !(rgx !== null && rgx !== void 0 && rgx.test(value))) return "Waarde voldoet niet aan het verwachte patroon";
+  if (validation !== null && validation !== void 0 && validation.onValidate) return validation.onValidate(value);
+  return '';
+}
+
+var reducer$f = function reducer(state, action) {
+  switch (action.type) {
+    case 'SET':
+      var invalidMsg = validate$f(action.files, state.description, action.validation);
+      return _extends({}, state, {
+        value: action.value,
+        filename: action.filename,
+        files: action.files,
+        validation: action.validation,
+        invalidMsg: invalidMsg,
+        valid: invalidMsg == ''
+      });
+
+    case 'CHANGE':
+      return _extends({}, state, {
+        value: action.value,
+        filename: action.filename,
+        files: action.files,
+        touched: true,
+        invalidMsg: action.invalidMsg,
+        valid: action.invalidMsg == ''
+      });
+
+    case 'TOUCH':
+      return _extends({}, state, {
+        touched: action.touched
+      });
+  }
+};
+
+var FileInput = function FileInput(props) {
+  var _props$label, _props$value, _props$label2, _props$id, _props$direction, _props$id2, _props$validation, _props$keyboardType, _props$kiesLabel, _ref, _state$filename;
+
+  var _React$useReducer = React__default.useReducer(reducer$f, {
+    description: (_props$label = props.label) != null ? _props$label : props.name,
+    value: (_props$value = props.value) != null ? _props$value : '',
+    filename: '',
+    invalidMsg: '',
+    files: undefined,
+    valid: false,
+    touched: false,
+    validation: props.validation
+  }),
+      state = _React$useReducer[0],
+      dispatch = _React$useReducer[1];
+
+  var fileClasses = 'file has-name';
+  if (props.boxed) fileClasses += ' is-boxed';else fileClasses += ' is-fullwidth';
+  if (props.size == 's') fileClasses += ' is-small';else if (props.size == 'l') fileClasses += ' is-medium';else if (props.size == 'xl') fileClasses += ' is-large';
+
+  var handleChange = function handleChange(path, files) {
+    if (!props.disabled) {
+      var validationError = validate$f(files, state.description, state.validation);
+      var filename = props.filenameFormatter ? props.filenameFormatter(path, files) : defaultFilenameFormatter(path);
+      props.onValueChanged && props.onValueChanged(files, validationError == '');
+      dispatch({
+        type: 'CHANGE',
+        value: path,
+        filename: filename,
+        files: files,
+        invalidMsg: validationError
+      });
+    }
+  };
+
+  var defaultFilenameFormatter = React__default.useCallback(function (path) {
+    return path.replace(/^.*[\\/]/, '');
+  }, []);
+  React__default.useEffect(function () {
+    var _props$value2;
+
+    dispatch({
+      type: 'SET',
+      value: (_props$value2 = props.value) != null ? _props$value2 : '',
+      filename: '',
+      files: undefined,
+      validation: props.validation
+    });
+  }, [props.value, props.validation]);
+  var label = {
+    txt: (_props$label2 = props.label) != null ? _props$label2 : props.name,
+    id: (_props$id = props.id) != null ? _props$id : props.name
+  };
+  var error = !state.valid && state.touched ? React__default.createElement("p", {
+    className: "help is-danger pl-3"
+  }, state.invalidMsg) : null;
+  return React__default.createElement(InputContainer, {
+    size: props.size,
+    label: label,
+    error: error,
+    direction: (_props$direction = props.direction) != null ? _props$direction : 'horizontal'
+  }, React__default.createElement("div", {
+    className: fileClasses
+  }, React__default.createElement("label", {
+    className: "file-label"
+  }, React__default.createElement("input", {
+    id: (_props$id2 = props.id) != null ? _props$id2 : props.name,
+    accept: props.accept,
+    capture: props.capture,
+    multiple: props.multiple,
+    name: props.name,
+    value: state.value,
+    required: (_props$validation = props.validation) === null || _props$validation === void 0 ? void 0 : _props$validation.required,
+    className: "file-input",
+    onBlur: function onBlur() {
+      return !state.touched && dispatch({
+        type: 'TOUCH',
+        touched: true
+      });
+    },
+    onChange: function onChange(e) {
+      return handleChange(e.target.value, e.target.files);
+    },
+    type: "file",
+    inputMode: (_props$keyboardType = props.keyboardType) != null ? _props$keyboardType : 'text',
+    placeholder: props.placeholder,
+    disabled: props.disabled
+  }), React__default.createElement("span", {
+    className: "file-cta"
+  }, props.icon && typeof props.icon != 'string' && React__default.createElement("span", {
+    className: "file-icon"
+  }, React__default.createElement(reactFontawesome.FontAwesomeIcon, {
+    icon: props.icon
+  })), props.icon && typeof props.icon == 'string' && React__default.createElement("span", {
+    className: "file-icon",
+    role: "icon"
+  }, React__default.createElement("i", {
+    className: props.icon
+  })), React__default.createElement("span", {
+    className: "file-label"
+  }, (_props$kiesLabel = props.kiesLabel) != null ? _props$kiesLabel : props.name)), React__default.createElement("span", {
+    className: "file-name"
+  }, (_ref = (_state$filename = state.filename) != null ? _state$filename : props.nogGeenBestandLabel) != null ? _ref : ''))));
+};
+
+function validate$f(value, desc, validation) {
+  if (validation !== null && validation !== void 0 && validation.required && (!value || value.length < 1)) return desc + " is verplicht";else if (validation !== null && validation !== void 0 && validation.onValidate) return validation.onValidate(value);
   return '';
 }
 
 var Form = function Form(props) {
   var allowedContent = React__default.useMemo(function () {
-    return [TextInput, TextArea, PasswordInput, EmailInput, Select, MultiSelect, ColorInput, HiddenInput, NumberInput, RangeInput, MultiRangeInput, DateInput, DateTimeInput, TimeInput, CheckBox, BasicInput];
+    return [TextInput, TextArea, PasswordInput, EmailInput, Select, MultiSelect, ColorInput, HiddenInput, NumberInput, RangeInput, MultiRangeInput, DateInput, DateTimeInput, TimeInput, CheckBox, BasicInput, FileInput];
   }, []);
   var action = props.action,
       method = props.method,
@@ -4030,10 +4169,17 @@ var Form = function Form(props) {
       children: child.props.children,
       direction: direction,
       size: size
-    });else if (allowedContent.includes(child.type)) return React__default.createElement(child.type, Object.assign({}, child.props, {
+    });else if (child.type === Buttons) return React__default.createElement(InputContainer, {
+      direction: direction != null ? direction : 'horizontal'
+    }, React__default.createElement(ButtonGroup, Object.assign({
+      size: size
+    }, child.props)));else if (child.type === FreeSpace) return React__default.createElement(InternFreeSpace, Object.assign({}, child.props, {
+      direction: direction,
+      size: size
+    }));else if (allowedContent.includes(child.type)) return React__default.createElement(child.type, Object.assign({}, child.props, {
       direction: direction,
       size: size
-    }));else if (typeof child == 'string') console.warn("<Form> should only contain children of type: <Form.XXX /> or <...Input> elements. You passed <" + child + ">, which will be ignored");else if (typeof child.type == 'string') console.warn("<Form> should only contain children of type: <Form.XXX /> or <...Input> elements. You passed <" + child.type + ">, which will be ignored");
+    }));else if (typeof child == 'string') console.warn("<Form> should only contain children of type: <Form.XXX /> or <...Input> elements. You passed a string (\"" + child + "\"), which will be ignored");else if (typeof child.type == 'string') console.warn("<Form> should only contain children of type: <Form.XXX /> or <...Input> elements. You passed a HTMLElement (<" + child.type + ">), which will be ignored");else if (typeof child.type.name == 'string') console.warn("<Form> should only contain children of type: <Form.XXX /> or <...Input> elements. You passed a Component (<" + child.type.name + ">), which will be ignored");
     return null;
   });
   return React__default.createElement("form", {
@@ -4047,8 +4193,9 @@ var Form = function Form(props) {
   }, children);
 };
 
-var FormLine = function FormLine(props) {
-  return React__default.createElement("div", null, props.children);
+var FormLine = function FormLine(_ref) {
+  var children = _ref.children;
+  return React__default.createElement("div", null, children);
 };
 
 var InternalFormLine = function InternalFormLine(props) {
@@ -4069,6 +4216,30 @@ var InternalFormLine = function InternalFormLine(props) {
   })));
 };
 
+var FreeSpace = function FreeSpace(_ref2) {
+  var children = _ref2.children;
+  return React__default.createElement("div", null, children);
+};
+
+var InternFreeSpace = function InternFreeSpace(_ref3) {
+  var children = _ref3.children,
+      direction = _ref3.direction,
+      size = _ref3.size;
+  return React__default.createElement(InputContainer, {
+    direction: direction,
+    size: size
+  }, children);
+};
+
+var Buttons = function Buttons(_ref4) {
+  var children = _ref4.children,
+      size = _ref4.size,
+      alignment = _ref4.alignment;
+  return React__default.createElement("div", {
+    className: "buttons"
+  }, children, size, alignment);
+};
+
 Form.Input = BasicInput;
 Form.Text = TextInput;
 Form.Password = PasswordInput;
@@ -4085,9 +4256,12 @@ Form.Date = DateInput;
 Form.DateTime = DateTimeInput;
 Form.Time = TimeInput;
 Form.CheckBox = CheckBox;
+Form.File = FileInput;
 Form.Line = FormLine;
+Form.Space = FreeSpace;
+Form.Buttons = Buttons;
 
-var reducer$f = function reducer(state, action) {
+var reducer$g = function reducer(state, action) {
   switch (action.type) {
     case 'SET':
       return _extends({}, state, {
@@ -4113,7 +4287,7 @@ var reducer$f = function reducer(state, action) {
 };
 
 function FormBuilder(props) {
-  var _useReducer = React.useReducer(reducer$f, {
+  var _useReducer = React.useReducer(reducer$g, {
     valid: false,
     loading: false,
     method: props.method,
@@ -5448,6 +5622,7 @@ exports.DataTable = DataTable;
 exports.DateInput = DateInput;
 exports.DateTimeInput = DateTimeInput;
 exports.EmailInput = EmailInput;
+exports.FileInput = FileInput;
 exports.Footer = Footer;
 exports.Form = Form;
 exports.FormBuilder = FormBuilder;