loon-bulma-react 2023.0.24 → 2023.0.26

package/README.md

@@ -2,6 +2,10 @@
 
 > ## Aanpassingen
 >
+> - `spellCheck`-property op de meeste `<input`-componenten. Default = `false`
+> - `<TextInput />` onthoudt nu de caret-positie, als je typt.
+> - `useCaretPosition`-hook gemaakt voor hierbovengenoemde gebruik.
+> - `<TekstEditor>` -component gemaakt. Eigenlijk ene tekst-editor met wat opmaak-opties die HTML of JSON kan genereren om de opmaak te bewaren (of gewoon platte tekst kan gebruiken). Intern gebruikt met [tiptap](https://tiptap.dev/). Component was nodig voor de Help-In-Loon-prakker.
 > - `useSessionStoredState()`-hook gemaakt. Gebruik session-storage in plaats van local-storage om gegevens te verwijderen bij het sluiten van de tab/browser.
 > - `<CB>`-component gemaakt. Een kale checkbox met een label. Geen wrapper, geen direction, geen form.
 > - `<RB>`-component gemaakt. Een Radio-button met een label. Geen wrapper, geen direction, geen form.

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -23,6 +23,6 @@ declare type AspectRatioProps = {
  *   <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ">
  * </AspectRatio>
  */
-declare function AspectRatio(props: AspectRatioProps): JSX.Element;
+declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): JSX.Element;
 export { AspectRatio };
 export type { AspectRatioProps };

package/dist/components/ButtonGroup/ButtonGroup.d.ts

@@ -25,6 +25,6 @@ declare type ButtonGroupProps = {
  *   <Button>Right</Button>
  * </ButtonGroup>
  */
-declare const ButtonGroup: (props: ButtonGroupProps) => JSX.Element;
+declare const ButtonGroup: ({ children, hasAddons, alignment, className }: ButtonGroupProps) => JSX.Element;
 export { ButtonGroup };
 export type { ButtonGroupProps };

package/dist/components/Container/Container.d.ts

@@ -23,7 +23,7 @@ declare type ContainerProps = {
  * @example <Container>This is a container</Container>
  */
 declare const Container: {
-    (props: ContainerProps): JSX.Element;
+    ({ className, children, styles }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in grote viewports.
      * @param props
@@ -39,7 +39,7 @@ declare const Container: {
      *
      * @example <Container.Wide>This is a somewhat wider container</Container.Wide>
      */
-    Wide(props: ContainerProps): JSX.Element;
+    Wide({ className, children, styles }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in grote viewports.
      * @param props
@@ -55,7 +55,7 @@ declare const Container: {
      *
      * @example <Container.Widest>This is a wide container</Container.Widest>
      */
-    Widest(props: ContainerProps): JSX.Element;
+    Widest({ className, children, styles }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in grote viewports.
      * De width van de container is afhankelijk van de maximale viewport width.
@@ -73,7 +73,7 @@ declare const Container: {
      *
      * @example <Container.Max>This is an almost-fullwidth container </Container.Max>
      */
-    Max(props: ContainerProps): JSX.Element;
+    Max({ className, children, styles }: ContainerProps): JSX.Element;
 };
 export { Container };
 export type { ContainerProps };

package/dist/components/DataTable/DataTable.d.ts

@@ -31,8 +31,6 @@ declare type DataTableProps<T extends unknown> = {
     maxRows?: number;
     /** Placeholder voor zoekveld. Als er geen placeholder is (undefined or emptystring), is er geen zoek-veld */
     searchPlaceholder?: string;
-    /** Placeholder voor zoekveld. Als er geen placeholder is (undefined or emptystring), is er geen zoek-veld @deprecated: use `searchPlaceholder` */
-    searchTxt?: string;
     /**
      * (Optionele) Eigen zoek-functie. De default-zoek-functie wordt dan vervangen.
      * @param searchTerm de content van het zoekveld
@@ -126,6 +124,6 @@ declare type DataTableColumn<T extends unknown> = {
  * );
  *
  */
-declare function DataTable<T extends unknown>({ fullwidth, bordered, narrow, striped, hoverable, defaultSortCol, data, maxRows, columns, rowIdentifier, headerContent, searchTxt, searchPlaceholder, onSearch, rowClasses, onRowSelected, onNoRowsToRender, }: DataTableProps<T>): JSX.Element;
+declare function DataTable<T extends unknown>({ fullwidth, bordered, narrow, striped, hoverable, defaultSortCol, data, maxRows, columns, rowIdentifier, headerContent, searchPlaceholder, onSearch, rowClasses, onRowSelected, onNoRowsToRender, }: DataTableProps<T>): JSX.Element;
 export { DataTable };
 export type { DataTableProps, DataTableColumn };

package/dist/components/Icon/Icon.d.ts

@@ -26,7 +26,7 @@ declare type IconProps = {
  * <Icon icon="fas fa-flag" />
  * <Icon icon={faFlag} /> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
  */
-declare const Icon: (props: IconProps) => JSX.Element;
+declare const Icon: ({ color, size, rotation, icon, flip, animate }: IconProps) => JSX.Element;
 declare type IconTextProps = {
     /** React font-awesome icon
      * - `string`: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.
@@ -55,6 +55,6 @@ declare type IconTextProps = {
  * <IconText icon="fas fa-flag">Flag</IconText>
  * <IconText icon={faFlag}>Flag</IconText> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
  */
-declare const IconText: (props: IconTextProps) => JSX.Element;
+declare const IconText: ({ icon, size, color, rotation, flip, animate, children }: IconTextProps) => JSX.Element;
 export { Icon, IconText };
 export type { IconProps, IconTextProps };

package/dist/components/Image/Image.d.ts

@@ -24,6 +24,6 @@ declare type ImageProps = {
  * @returns an image with a fixed aspect ratio
  * @example <Image ratio="1by1" src="https://www.loon.be/images/logo.png" alt="Loon.be" />
  */
-declare function Image(props: ImageProps): JSX.Element;
+declare function Image({ ratio, imgWidth, alt, figCaption, className, isRounded, src }: ImageProps): JSX.Element;
 export { Image };
 export type { ImageProps };

package/dist/components/Link/Link.d.ts

@@ -43,6 +43,6 @@ declare type LinkProps = {
  * @returns een link
  * @example <Link href="https://www.google.com">Google</Link>
  */
-declare const Link: (props: LinkProps) => JSX.Element;
+declare const Link: ({ href, target, tooltip, id, rel, children }: LinkProps) => JSX.Element;
 export { Link, LinkButton };
 export type { LinkProps, LinkButtonProps };

package/dist/components/Modal/Modal.d.ts

@@ -13,6 +13,7 @@ declare type ModalProps = {
      * - `string`: '834px', '50%, 60em', '100%'
      */
     size?: SizeProp | string;
+    helpTag?: string;
 };
 /**
  * Een modal-component. Als een modal ene Foot en een Head heeft, wordt de rest automatisch toegevoegd in een Body

package/dist/components/Notification/Notification.d.ts

@@ -1,5 +1,17 @@
 import React from 'react';
 import { ColorProp } from '../../loon-react-bulma-types';
+/** Props voor een Notification */
+export declare type NotificationProps = {
+    /** Content van de notificatie */
+    children: React.ReactNode;
+    /**
+     * Afhandeling van dismiss-click notificatie
+     * @param e event
+     */
+    onDismiss(e?: any): void;
+    /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
+    autoDismissAfter?: number;
+};
 /**
  * Een instelbare notificatie. Default is een info-notificatie
  * @param props
@@ -7,8 +19,8 @@ import { ColorProp } from '../../loon-react-bulma-types';
  * @example <Notification>Hello World</Notification>
  */
 declare const Notification: {
-    (props: NotificationProps & {
-        color?: ColorProp;
+    ({ children, onDismiss, autoDismissAfter, color, }: NotificationProps & {
+        color?: string | undefined;
     }): JSX.Element;
     /** Een primary-colored notificatie
      * @param props
@@ -48,15 +60,3 @@ declare const Notification: {
     Info(props: NotificationProps): JSX.Element;
 };
 export { Notification };
-/** Props voor een Notification */
-export declare type NotificationProps = {
-    /** Content van de notificatie */
-    children: React.ReactNode;
-    /**
-     * Afhandeling van dismiss-click notificatie
-     * @param e event
-     */
-    onDismiss(e?: any): void;
-    /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
-    autoDismissAfter?: number;
-};

package/dist/forms/Checkbox/CB.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label'> & {
+declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'spellCheck'> & {
     /** Speciale styling van de checkbox */
     styling?: CheckradioStylingType;
     /** Is de checkbox checked */
@@ -41,6 +41,6 @@ declare type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'dir
  * | onValueChanged()  | `function`           |         | (value: boolean, valid?: boolean) => void  |
  * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
  */
-declare function JustACheckbox({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, onValueChanged, onKeyDown, }: CBInputProps): JSX.Element;
-export { JustACheckbox as CB };
+declare function CB({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, helpTag, onValueChanged, onKeyDown, onFocus, }: CBInputProps): JSX.Element;
+export { CB };
 export type { CBInputProps };

package/dist/forms/Checkbox/Checkbox.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type CheckboxInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type CheckboxInputProps = Omit<BaseInputProps, 'icons' | 'labelHidden' | 'spellCheck'> & {
     /** Kleur van de checkbox (default = 'l', link) */
     color?: ColorProp;
     /** Speciale styling van de checkbox */

package/dist/forms/Currency/CurrencyInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
-declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
+declare type CurrencyInputProps = BaseInputProps & {
     /** Start value voor deze input (optional) */
     value?: number;
     /**
@@ -32,6 +32,7 @@ declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
  * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`                 | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
  * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
  * |                   | `email`,`tel`,`url`       |         |                                            |
  * |                   | `numeric`, `decimal`      |         |                                            |
@@ -44,6 +45,6 @@ declare type CurrencyInputProps = Omit<BaseInputProps, 'labelHidden'> & {
  * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
  * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
  */
-declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, onValueChanged, onKeyDown, decimalSeparator, alwaysShowCents, ...props }: CurrencyInputProps): JSX.Element;
+declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, labelHidden, onValueChanged, onKeyDown, decimalSeparator, alwaysShowCents, ...props }: CurrencyInputProps): JSX.Element;
 export { LbrCurrencyInput as CurrencyInput };
 export type { CurrencyInputProps };

package/dist/forms/Datetimes/DateInput.d.ts

@@ -25,6 +25,7 @@ declare type DateInputProps = BaseInputProps & {
  * | id                | `string `            | `name`  | de id voor de input                        |
  * | tooltip           | `string `            |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
  * | keyboardType      | `search`, `text`,    | `text`  | de type van de keyboard (touch-devices)    |

package/dist/forms/Datetimes/DateTimeInput.d.ts

@@ -24,6 +24,7 @@ declare type DateTimeInputProps = BaseInputProps & {
  * | id                | `string `            | `name`  | de id voor de input                        |
  * | tooltip           | `string `            |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
  * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |

package/dist/forms/Datetimes/TimeInput.d.ts

@@ -25,6 +25,7 @@ declare type TimeInputProps = BaseInputProps & {
  * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
  * | label             | `string `            | `name`  | de label voor de input                     |
  * | id                | `string `            | `name`  | de id voor de input                        |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | tooltip           | `string `            |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |

package/dist/forms/File/FileInput.d.ts

@@ -35,6 +35,7 @@ declare type FileInputProps = Omit<BaseInputProps, 'icons'> & {
  * | name              | `string`             |           | de naam voor de input (REQUIRED)           |
  * | label             | `string`             | `name`    | de label voor de input                     |
  * | kiesLabel         | `string`             |           | de tekst voor de selecteer-file-button     |
+ * | spellCheck        | `boolean`            | `false`   | Moet de browser deze input spell-checken?  |
  * | multiple          | `boolean`            | `false`   | of er meerdere files geselecteerd moeten   |
  * | boxed             | `boolean`            | `false`   | of de input als een block moet worden      |
  * | accept            | `string`             |           | de file-types die geselecteerd mogen worden|

package/dist/forms/FormBuilder/FormBuilderProps.d.ts

@@ -1,5 +1,6 @@
-import { ColorProp, DirectionProp } from '../../../loon-react-bulma-types';
-import { FormValidationType } from './../BaseInputProps';
+/// <reference types="react" />
+import { ColorProp, DirectionProp } from '~/loon-react-bulma-types';
+import { FormValidationType } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './../Selects/BaseSelectProps';
 /** Props voor de Form-component */
 export declare type FormBuilderProps = {
@@ -36,6 +37,7 @@ export declare type FormBuilderProps = {
 };
 /** Props voor de fields in een form van de Form-Component */
 export declare type FormBuilderFieldProps = {
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, helpTag?: string) => void;
     /** de naam voor het field. gebruikt in input en  in <label> als geen label gedefinieerd.
      * <input name="..." /> */
     name: string;

package/dist/forms/Input.d.ts

@@ -1,55 +1,94 @@
-/// <reference types="react" />
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { AutoCompleteType } from '../loon-react-bulma-types';
-import { BaseInputProps, InputTypeProp } from './shared';
-declare type InputValueType = string | number | readonly string[] | Date | undefined;
-declare type InputProps<T extends InputValueType> = BaseInputProps<T> & {
-    /** Default icon voor aan begin van de input */
-    icon?: string | IconProp;
-    /** Type van de tekst input (default = 'text') */
-    type: InputTypeProp;
-    /** Start value voor deze input (optioneel) */
-    value?: T;
-    /** Speciaal voor autocomplete-managers, zoals password-managers. Wat is de functie van deze input */
-    autocomplete?: AutoCompleteType;
+import React from 'react';
+import { AlignmentProp, AutoCompleteType, DirectionProp, KeyboardTypeProp, SizeProp } from '..';
+import { InputTypeProp } from './shared';
+declare type InputValueType = string | number | readonly string[] | undefined;
+declare type InputStylingPropsType = {
+    /** grootte van de input (default = `m`, medium)*/ size?: SizeProp;
+    /** alignment van de input (default = `l`, left) */ alignment?: AlignmentProp;
+    /** label boven (`v`) of voor (`h`) de input, (default = `h`, horizontal) */ direction?: DirectionProp;
+    /** (optioneel) icon op de input */ iconLeft?: IconProp | string;
+    /** (optioneel) icon aan einde op de input */ iconRight?: IconProp | string;
+};
+declare type InputPropsType<T = InputValueType> = {
+    /** label bij de input. Als geen label, dan wordt de `name`-property gebruikt */ label?: string;
+    /** foutmelding bij de input*/ errorMessage?: string;
+    /** helptag in Loon bij de input (`:HOOFDGROEP:SUBGROEP:`)*/ helpTag?: string;
+    /** type input (default = `text`)*/ type?: InputTypeProp;
+    /** (optioneel) tooltip-title voor de input*/ title?: string;
+    /** (optioneel) id voor de input. Als geen id, dan wordt de `name`-property gebruikt */ id?: string;
+    /** name-property voor de input */ name: string;
+    /** waarde voor de input */ value?: T;
+    /** gebruikt deze input de spellchecked (default = `false`) */ spellCheck?: boolean;
+    /** is deze input required (default= `false`)*/ required?: boolean;
+    /** autocomplete voor deze input (default = `off`)*/ autoComplete?: AutoCompleteType;
+    /** type toetsenbord (voor smartphones) voor deze input (default = `text`)*/ keyboardType?: KeyboardTypeProp;
+    /** placeholder in de input */ placeholder?: string;
+    /** is deze input disabled 9default = `false`)*/ disabled?: boolean;
+    /** bij welk form hoort deze input?*/ form?: string;
+    /**
+     * max waarde of max lengte voor de input
+     * _(altijd hoger dan de `min`-prop)_
+     * @example // voor max waarde
+     * <Input type="number" max="100"/>
+     * <Input type="range" max="100"/>
+     * <Input type="date" max="2019-12-25"/>
+     * <Input type="month" max="2019-12"/>
+     * <Input type="week" max="2019-W23"/>
+     * <Input type="time" max="17:30"/>
+     * <Input type="datetime-local" max="29-12-25T23:59"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" max="100"/>
+     * <Input type="password" max="50"/>
+     */
+    max?: number;
     /**
-     * Wat te doen als de waarde is veranderd
-     * @param newVal: de nieuwe waarde
-     * @param isValid: is de nieuwe waarde geldig?
+     * min waarde of min lengte voor de input
+     * _(altijd lager dan de `max`-prop)_
+     * @example <Input type="number" min="1"/>
+     * <Input type="range" min="1"/>
+     * <Input type="date" min="2019-01-01"/>
+     * <Input type="month" min="2019-01-01"/>
+     * <Input type="week" min="2019-W01"/>
+     * <Input type="time" min="08:30"/>
+     * <Input type="datetime-local" max="2019-01-01T00:00"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" min="100"/>
+     * <Input type="password" min="50"/>*/
+    min?: number;
+    /** stapgrootte voor groter/kleiner aanpassingen
+     *  | type| value | Example|
+     * |----------------|----------------|---------------------------------------------|
+     * | number         | `1`            | `<Input type="number" step="2"/>`           |
+     * | range          | `1`            | `<Input type="range" step="2"/>`            |
+     * | date           | `1` (day)      | `<Input type="date" step="2"/>`             |
+     * | month          | `1` (month)    | `<Input type="month" step="2"/>`            |
+     * | week           | `1` (week)     | `<Input type="week" step="2"/>`             |
+     * | time           | `60` (seconds) | `<Input type="time" step="2"/>`             |
+     * | datetime-local | `1` (second)   | `<Input type="datetime-local" step="900"/>` |
      */
-    onValueChanged?(newVal: T, isValid?: boolean): any | void;
+    step?: number;
+    /** Is deze input readonly (default = `false`). Bij `true` zie je alleen nog maar de content van de input*/
+    readonly?: boolean;
+    /** moet deze input de focus krijgen? (default = `false`)*/ autofocus?: boolean;
+    /** (optionele) `ref` voor gebruik met `React.useRef`*/ ref?: React.Ref<HTMLInputElement>;
+    /** callback voor unfocus (blur), zet OOK de input op `touched`*/
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    /** callback voor onChange*/
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    /** callback voor focus */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, helpTag?: string) => void;
+    /** callback voor typen */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** callback voor typen */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
 };
+declare function BaseInput<T extends InputValueType = string>({ placeholder, helpTag, errorMessage, label, disabled, keyboardType, type, title, name, value, required, spellCheck, id, autoComplete, max, min, readonly, step, autofocus, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, size, alignment, }: InputPropsType<T> & Omit<InputStylingPropsType, 'direction' | 'iconLeft' | 'iconRight'>): JSX.Element;
 /**
- * Input met alle gewone <input> properties zelf in te vullen.
- * LET OP: Voor validatie kan ALLEEN de onValidate() function gebruikt
+ *
  * @param props
- * @returns input element
- * @example <Input<T> type="text" placeholder="placeholder" name="name" id="id" value={value} {...props}/>
- * @description alle props voor Input<T> component
- * | prop              | type                      | default | description                                |
- * |-------------------|---------------------------|---------|--------------------------------------------|
- * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
- * | type              | `InputTypeProp`           |         | type voor de input (REQUIRED)              |
- * | label             | `string`                  | `name`  | de label voor de input                     |
- * | id                | `string`                  | `name`  | de id voor de input                        |
- * | icon              | `string`, `IconProp`      |         | Optioneel icon voor de input               |
- * | tooltip           | `string`                  |         | tooltip voor de input                      |
- * | autocomplete      | `AutoCompleteType`        |         | autocomplete voor de input                 |
- * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
- * | disabled          | `boolean`                 | `false` | de input is disabled                       |
- * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
- * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
- * |                   | `email`,`tel`,`url`       |         |                                            |
- * |                   | `numeric`, `decimal`      |         |                                            |
- * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
- * | value             | `T`                       |         | de waarde, generic<T>                      |
- * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
- * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
- * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
- * | placeholder       | `string`                  |         | de placeholder voor de input               |
- * | onValueChanged()  | `function`                |         | (value: T, valid?: boolean) => void        |
- * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ * @returns
  */
-declare function Input<T extends InputValueType>(props: InputProps<T>): JSX.Element;
-export { Input };
-export type { InputProps, InputValueType };
+declare function Input<T extends InputValueType = string>({ errorMessage, label, name, id, iconLeft, iconRight, direction, onBlur, ...props }: InputPropsType<T> & InputStylingPropsType): JSX.Element;
+export { BaseInput, Input };
+export type { InputPropsType, InputStylingPropsType, InputValueType };

package/dist/forms/Numeric/MultiRangeInput.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
-declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck' | 'helpTag'> & {
+    helpTag?: [string, string];
     /** Stap-grootte voor de input (optional, default = 1) */
     step?: number;
     /** De start-waarde voor de input (optional) */

package/dist/forms/Numeric/NumberInput.d.ts

@@ -26,6 +26,7 @@ declare type NumberInputProps = BaseInputProps & {
  * | id                | `string `            | `name`  | de id voor de input                        |
  * | step              | `number `            | `1`     | stapgrootte voor de input (+ & - aansturen)|
  * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | textAlign         | `l`, `c`, `r`        | `l`     | de text-align van de input                 |

package/dist/forms/Numeric/RangeInput.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
-declare type RangeInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type RangeInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** Stap-grootte voor de input (optional, default = 1) */
     step?: number;
     /** een getals-unit (`%`, `kg/m3`, etc) om weer te geven op de range-input */

package/dist/forms/Others/ColorInput.d.ts

@@ -24,6 +24,7 @@ declare type ColorInputProps = BaseInputProps & {
  * | id                | `string`             | `name`  | de id voor de input                        |
  * | tooltip           | `string`             |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | disabled          | `boolean`            | `false` | de input is disabled                       |
  * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
  * |                   | `email`,`tel`,`url`  |         |                                            |

package/dist/forms/Radio/RB.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckradioStylingType, ColorProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'id' | 'name'> & {
+declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'id' | 'name' | 'spellCheck'> & {
     /** de group-name voor deze inputs. Radiobuttons werken daar iets anders mee */
     groupName: string;
     /** Speciale styling van de checkbox */
@@ -46,6 +46,6 @@ declare type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'i
  * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
  * | setValueFn()      | `function`           |         | (newVal: T) => void. Gebruik om een React-useState-setfunction aan te roepen |
  */
-declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, onValueChanged, }: RBInputProps<T>): JSX.Element;
+declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, helpTag, onValueChanged, onFocus, }: RBInputProps<T>): JSX.Element;
 export { JustARadioButon as RB };
 export type { RBInputProps };

package/dist/forms/Radio/Radio.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CheckradioStylingType, ColorProp, DirectionProp, SizeProp, TextAlignmentProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
-declare type RadioInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type RadioInputProps = Omit<BaseInputProps, 'icons' | 'labelHidden' | 'spellCheck'> & {
     value?: string;
     children?: React.ReactNode;
     onValueChanged?(newVal: string, isValid?: boolean): any | void;
@@ -89,7 +89,9 @@ declare const RadioGroup: {
 declare function InternRadioItem(props: RadioItemProps & {
     name: string;
     selectedItem: string;
+    helpTag?: string;
     setter: (identifier: string) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, ht?: string) => void;
 }): JSX.Element;
 /**
  * Een losstaand radio-item om zelf de groep te maken

package/dist/forms/Selects/MultiSelect.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BaseInputProps } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './BaseSelectProps';
-declare type MultiSelectInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type MultiSelectInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** De waarde */
     value?: string[];
     /** De values voor de options. DEZE MOETEN UNIEK ZIJN! */

package/dist/forms/Selects/Select.d.ts

@@ -2,7 +2,7 @@
 import { SizeProp } from '../../loon-react-bulma-types';
 import { BaseInputProps } from '../shared';
 import { SelectOptionType, SelectOptionGroupType } from './BaseSelectProps';
-declare type SelectInputProps = Omit<BaseInputProps, 'icons'> & {
+declare type SelectInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
     /** De waarde */
     value?: number | string;
     /** De values voor de options. DEZE MOETEN UNIEK ZIJN! */

package/dist/forms/Text/EmailInput.d.ts

@@ -26,6 +26,7 @@ declare type EmailInputProps = BaseInputProps & {
  * | name              | `string`             |         | de naam voor de input (REQUIRED)           |
  * | label             | `string`             | `name`  | de label voor de input                     |
  * | id                | `string`             | `name`  | de id voor de input                        |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | autoComplete      | `AutoCompleteType`   | `email` | de autocomplete type (password managers)   |
  * | tooltip           | `string`             |         | tooltip voor de input                      |
  * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |

package/dist/forms/Text/PasswordInput.d.ts

@@ -27,6 +27,7 @@ declare type PasswordInputProps = BaseInputProps & {
  * | label                 | `string`             | `name`  | de label voor de input                     |
  * | id                    | `string`             | `name`  | de id voor de input                        |
  * | autoComplete          | `AutoCompleteType`   |         | de autocomplete type (password managers)   |
+ * | spellCheck            | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
  * | tooltip               | `string`             |         | tooltip voor de input                      |
  * | labelHidden           | `boolean`            | `false` | de label is verborgen (screenreaders)      |
  * | disabled              | `boolean`            | `false` | de input is disabled                       |

package/dist/forms/Text/TextArea.d.ts

@@ -25,6 +25,7 @@ declare type TextAreaProps = Omit<BaseInputProps, 'icons'> & {
  * | label             | `string`                  | `name`  | de label voor de input                     |
  * | id                | `string`                  | `name`  | de id voor de input                        |
  * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
  * | autocomplete      | `AutoCompleteType`        |         | autocomplete voor de input                 |
  * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
  * | disabled          | `boolean`                 | `false` | de input is disabled                       |

package/dist/forms/Text/TextEditor.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { JSONContent } from '@tiptap/react';
+/**
+ * Een Rich Text Editor, dus een uitgebreide vorm van een `<textarea>`, want je kan dingen **bold**, *italic*, enz. maken.
+ * De output is in HTML-vorm of in JSON-vorm.  Je kan er ook gewoon platte tekst uitkrijgen, maar dan vervalt de opmaak.
+ * @url https://tiptap.dev/ voor de documentatie van hoe deze component in elkaar steekt.
+ * @returns een component voor het maken van rich text met HTML of JSON output
+ * @description
+ * | prop         | type                       | uitleg                  |
+ * |--------------|----------------------------|-------------------------|
+ * | content      | `string`                   | de inhoud van de editor |
+ * | onChangeHtml | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als HTML meegegeven. |
+ * | onChangeText | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als platte tekst meegegeven. |
+ * | onChangeJson | `(c: JSONContent) => void` | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als JSON meegegeven. |
+ */
+export declare function TextEditor({ content, onChangeHtml, onChangeText, onChangeJson, }: {
+    content?: string;
+    onChangeHtml?: (content: string) => void;
+    onChangeText?: (content: string) => void;
+    onChangeJson?: (content: JSONContent) => void;
+}): JSX.Element;

package/dist/forms/Text/TextInput.d.ts

@@ -15,7 +15,7 @@ declare type TextInputProps = BaseInputProps & {
      * - `A-Z`: alleen uppercase letters. lowercase maken we uppercase
      * - `a-Z`: alleen lowercase en uppercase letters
      * - `0-Z`: lowercase, uppercase & numeriek
-     * - `RegExp`: geef een regex op met alle toegestande karakters om NIET te replacen
+     * - `RegExp`: geef een regex op met alle toegestande karakters om **NIET** te replacen
      */
     characters?: CharType;
     /**
@@ -38,6 +38,7 @@ declare type TextInputProps = BaseInputProps & {
  * | label             | `string`                  | `name`  | de label voor de input                     |
  * | characters        | `string`, `RegExp`, `0-Z`,|         | de toegestane karakters in de input        |
  * |                   | `0-9`, `a-z`, `A-Z`, `a-Z`|         |                                            |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
  * | autocomplete      | `AutoCompleteType`        |         | de autocomplete type voor de input         |
  * | id                | `string`                  | `name`  | de id voor de input                        |
  * | tooltip           | `string`                  |         | tooltip voor de input                      |

package/dist/forms/index.d.ts

@@ -16,7 +16,7 @@ export type { ColorInputProps } from './Others/ColorInput';
 export { HiddenInput } from './Others/HiddenInput';
 export type { HiddenInputProps } from './Others/HiddenInput';
 export { Input } from './Input';
-export type { InputProps, InputValueType } from './Input';
+export type { InputPropsType, InputStylingPropsType, InputValueType } from './Input';
 export { RadioGroup, Radio } from './Radio/Radio';
 export { RB } from './Radio/RB';
 export type { RBInputProps } from './Radio/RB';
@@ -24,6 +24,7 @@ export { EmailInput } from './Text/EmailInput';
 export type { EmailInputProps } from './Text/EmailInput';
 export { PasswordInput } from './Text/PasswordInput';
 export type { PasswordInputProps } from './Text/PasswordInput';
+export { TextEditor } from './Text/TextEditor';
 export { TextArea } from './Text/TextArea';
 export type { TextAreaProps } from './Text/TextArea';
 export { TextInput } from './Text/TextInput';