loon-bulma-react 2022.3.17 → 2022.3.18

package/README.md

@@ -2,12 +2,7 @@
 
 > ## Aanpassingen
 >
-> alle inputs hebben een `textAlign`-prop<br />
-> README voor `usePagination`, `useEventListener`, `useUncontrolled`<br />
-
-<!-- ## Nog te doen
-
-> TODO: usePagination Hook -->
+> - Inputs: voor inputs waarbij je moet typen: de `icons`-prop om een eigen icoontje in te kunnen stellen.
 
 ## [Bulma](https://bulma.io/) &amp; [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
@@ -94,10 +89,12 @@
 
 ### Voor de laatste versie:
 
-Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` hoef je niet toe te voegen, dat is de default.
+Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` moet je dan wel even toevoegen. Als je deze tag niet toevoegd, installeert npm de in de `package.json` opgegeven versie.
 
 ```bash
-npm install --save bulma loon-bulma-react
+# installeer de meest recente versie van de package. (& update de package.json)
+npm install --save bulma loon-bulma-react@latest
+# installeer de versie die in package.json is gedefinieerd
 ```
 
 ### Voor een versie die hoort bij een bepaald jaar (Bijvoorbeeld in Loon-2021).
@@ -105,17 +102,18 @@ npm install --save bulma loon-bulma-react
 Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm `y[jaar]`. De 'y' is nodig omdat alleen een jaartal geen geldige tag is.
 
 ```bash
-npm install --save loon-bulma-react@y2021
+npm install --save loon-bulma-react@y2022
 ```
 
 Om vast te leggen welke tag je wil gebruiken, moet je in de `package.json` het versie-nummer aanpassen tot de tag.
-Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de laatste versie.
+Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de laatste versie die is gepubliceerd.
+Voor het meeste recente Loon-jaar kan je _wel_ `npm install loon-bulma-react@latest` gebruiken.
 
 ```json
 {
   "devDependencies": {
     // ...
-    "loon-bulma-react": "y2022"
+    "loon-bulma-react": "y2023"
     // ...
   }
 }
@@ -128,7 +126,8 @@ Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de
 >
 > - `@y2020` --> Testversie voor **2020**, installeren met `npm install loon-bulma-react@y2021`.
 > - `@y2021` --> Versie voor **2021**, installeren met `npm install loon-bulma-react@y2021`.
-> - `@y2022` --> Versie voor **2022**, installeren met `npm install loon-bulma-react@y2022`. Zelfde als `latest`
+> - `@y2022` --> Versie voor **2022**, installeren met `npm install loon-bulma-react@y2022`.
+> - `@y2023` --> Versie voor **2023**, installeren met `npm install loon-bulma-react@y2023`. Zelfde als `latest`
 > - `@latest` --> Default versie die geïnstalleerd wordt met `npm install loon-bulma-react`
 
 ## Gebruik <a id="gebruik"></a>
@@ -478,9 +477,8 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 
 #### Button & ButtonGroup <a id="component-button"></a>
 
-Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 6 beschikbaar: _Primary_, _Danger_, _Warning_, _Success_, _Link_, _Info_
+Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 6 beschikbaar: _Primary_, _Danger_, _Warning_, _Success_, _Link_, _Info_.
 
-- _**Bttn**: een default button (met instelbare `color`-props) -> bestaat niett meer_
 - **Button**: Voorheen `Bttn`
   - `<Button.Primary>` Een button in de primary kleur
   - `<Button.Success>` Een button in de success kleur
@@ -1365,6 +1363,7 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 - `placeholder`: placeholder-tekst voor een input.
 - `tooltip`: tooltip voor een input (`<input title="..." />`)
 - `disabled`: input disabled
+
 - `errorMessage`: een errormessage van buiten de component. Voor als je validatie anders wilt oplossen. Wordt altijd getoont
 - `validatie`: een object met wat standaard-validatie-opties en een onValidate-function input. Een validatie-error wordt alleen getoont als de input 'touched' is.
   - `required`: input is verplicht
@@ -1385,6 +1384,17 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 - `size`: de grootte van een input
 - `textAlign`: waar komt de tekst in de input (default = 'l', left)
 
+Voor een aantal inputs (waar je moet typen) Is er ook nog de `icons`-prop. Deze prop ziet er zo uit:
+
+```ts
+type Icons = {
+  start: IconProp | string;
+  end: (valid: boolean) => IconProp | string;
+};
+```
+
+Deze `icons`-prop kan gebruikt worden voor het instellen van de icoontjes aan het begin(start) en einde (end) van de input. De `start`-property wordt gebruikt ipv de default start-icons. De `end`-property wordt dan gebruikt in plaats van de default valid/invalid icons. Daarom is de `end`-property ook een function.
+
 ```tsx
 <div>
   <BasicInput name="something" type="text">

package/dist/components/Calendar/CalendarItems/CalendarColoredItem.d.ts

@@ -1,11 +1,6 @@
 import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
-/**
- * Component voor een event dat de hele dag duurt
- * @param props
- * @returns
- */
-export declare function CalendarColoredItem<T extends BaseEventProps>(props: {
+declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     /** het event */
     desc: (event: T) => JSX.Element;
     event: T;
@@ -13,4 +8,11 @@ export declare function CalendarColoredItem<T extends BaseEventProps>(props: {
     options?: EventOptions<T>;
     /** onclick handler voor het event */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-}): JSX.Element;
+};
+/**
+ * Component voor een event dat de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function CalendarColoredItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarColoredItemProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/CalendarItems/CalendarItem.d.ts

@@ -1,11 +1,6 @@
 import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
-/**
- * Component voor een event met een tijdstip en NIET de hele dag duurt
- * @param props
- * @returns
- */
-export declare function CalendarItem<T extends BaseEventProps>(props: {
+declare type CalendarItemProps<T extends BaseEventProps> = {
     desc: (event: T) => JSX.Element;
     /** het event */
     event: T;
@@ -13,4 +8,11 @@ export declare function CalendarItem<T extends BaseEventProps>(props: {
     options?: EventOptions<T>;
     /** onclick handler */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-}): JSX.Element;
+};
+/**
+ * Component voor een event met een tijdstip en NIET de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function CalendarItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarItemProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Month/DayContainer.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
 import { JSDateTime } from '../../../utils/JSDateTime.class';
-/**
- * Component voor de dag-container in de maand-view
- * @param props
- * @returns
- */
-export declare function DayContainer<T extends BaseEventProps>(props: {
+declare type DayContainerProps<T extends BaseEventProps> = {
     /** events op deze dag */
     events: T[];
     /** wat te doen als een event aangeklikt wordt */
@@ -17,4 +12,11 @@ export declare function DayContainer<T extends BaseEventProps>(props: {
     options?: CalendarOptions<T>;
     /** de datum voor de container */
     date: JSDateTime;
-}): JSX.Element;
+};
+/**
+ * Component voor de dag-container in de maand-view
+ * @param props
+ * @returns
+ */
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, }: DayContainerProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Month/MonthView.d.ts

@@ -18,6 +18,6 @@ declare type MonthViewProps<T extends BaseEventProps> = {
  * @param props
  * @returns
  */
-declare function MonthView<T extends BaseEventProps>(props: MonthViewProps<T>): JSX.Element;
+declare function MonthView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: MonthViewProps<T>): JSX.Element;
 export { MonthView };
 export type { MonthViewProps };

package/dist/components/Calendar/Month/MoreEvents.d.ts

@@ -1,11 +1,6 @@
 import { MouseEvent } from 'react';
 import { BaseEventProps, EventOptions } from '../Props';
-/**
- * expandable events als er meer dan 5 events op een dag vallen
- * @param props
- * @returns
- */
-export declare function MoreEventsView<T extends BaseEventProps>(props: {
+declare type MoreEventsViewProps<T extends BaseEventProps> = {
     /** de events op deze dag */
     events: T[];
     /** event-click handling */
@@ -15,4 +10,11 @@ export declare function MoreEventsView<T extends BaseEventProps>(props: {
         allday?: EventOptions<T>;
         timed?: EventOptions<T>;
     };
-}): JSX.Element;
+};
+/**
+ * expandable events als er meer dan 5 events op een dag vallen
+ * @param props
+ * @returns
+ */
+export declare function MoreEventsView<T extends BaseEventProps>({ events, onEventClick, options, }: MoreEventsViewProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Week/AlldayContainer.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
-/**
- * Component voor allday objects in de calendar
- * @param props
- * @returns
- */
-export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick, }: {
+declare type AlldayContainerProps<T extends BaseEventProps> = {
     events: T[];
     /** wat te doen als een event aangeklikt wordt */
     onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** wat te doen als een dag aangeklikt wordt */
     options?: CalendarOptions<T>;
-}): JSX.Element;
+};
+/**
+ * Component voor allday objects in de calendar
+ * @param props
+ * @returns
+ */
+export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick }: AlldayContainerProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Week/HourRow.d.ts

@@ -8,13 +8,18 @@ import { BaseEventProps, CalendarOptions } from '../Props';
 export declare function HourNumber({ hour }: {
     hour: number;
 }): JSX.Element;
+declare type HourSlotProps<T extends BaseEventProps> = {
+    /** de events voor deze HourProp */
+    events: T[];
+    /** event-selected callback Fn */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** options bij de calendar */
+    options?: CalendarOptions<T>;
+};
 /**
  * Component voor een uur-slot.
  * @param param0
  * @returns
  */
-export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options, }: {
-    events: T[];
-    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
-    options?: CalendarOptions<T>;
-}): JSX.Element;
+export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options }: HourSlotProps<T>): JSX.Element;
+export {};

package/dist/components/Form/Base.Input.Container.d.ts

@@ -8,6 +8,6 @@ export declare const InputContainer: ({ label, children: input, error, size, dir
     } | undefined;
     children: React.ReactNode;
     error?: React.ReactNode;
-    size?: "s" | "l" | "m" | "xl" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction: DirectionProp;
 }) => JSX.Element;

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

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

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type DateInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) FORMAT: YYYY-MM-DD */
     value?: string | Date;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type DateTimeInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) FORMAT: YYYY-MM-DDTHH:mm */
     value?: string | Date;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type TimeInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) FORMAT: HH:mm:SS */
     value?: string | Date;

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { BaseInputProps } from '../BaseInputProps';
-declare type FileInputProps = BaseInputProps & {
+import { BaseInputProps } from '../shared';
+declare type FileInputProps = Omit<BaseInputProps, 'icons'> & {
     /** 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 */

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

@@ -1,10 +1,12 @@
 /// <reference types="react" />
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { AutoCompleteType } from './../../loon-react-bulma-types';
-import { BaseInputProps, InputTypeProp } from './BaseInputProps';
+import { BaseInputProps, InputTypeProp } from './shared';
 declare type InputValueType = string | number | readonly string[] | Date | undefined;
 declare type InputProps<T extends InputValueType> = BaseInputProps<T> & {
-    icon?: string | IconProp | any;
+    /** 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) */

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
-declare type MultiRangeInputProps = BaseInputProps & {
+import { BaseInputProps } from '../shared';
+declare type MultiRangeInputProps = Omit<BaseInputProps, 'icons'> & {
     /** stap-grootte voor de input (optioneel, default = 1) */
     step?: number;
     /** de start-waarde voor de input (optioneel) */

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type NumberInputProps = BaseInputProps & {
     /** stap-grootte voor de input (optioneel, default = 1) */
     step?: number;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
-declare type RangeInputProps = BaseInputProps & {
+import { BaseInputProps } from '../shared';
+declare type RangeInputProps = Omit<BaseInputProps, 'icons'> & {
     /** stap-grootte voor de input (optioneel, default = 1) */
     step?: number;
     /** de start-waarde voor de input (optioneel) */

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type ColorInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) */
     value?: string;

package/dist/components/Form/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 '../BaseInputProps';
-declare type RadioInputProps = BaseInputProps & {
+import { BaseInputProps } from '../shared';
+declare type RadioInputProps = Omit<BaseInputProps, 'icons'> & {
     value?: string;
     children?: React.ReactNode;
     onValueChanged?(newVal: string, isValid?: boolean): any | void;
@@ -81,6 +81,7 @@ declare const RadioGroup: {
      * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
      * |                   | `colored`, `blocky`  |         |                                            |
      * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+     * | icons             |                      |         | RADIOGROUP HEEFT GEEN ICONS                |
      */
     Item: (props: RadioItemProps) => JSX.Element;
 };

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

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

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

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

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AutoCompleteType } from '../../../loon-react-bulma-types';
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type EmailInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) */
     value?: string;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AutoCompleteType } from '../../../loon-react-bulma-types';
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type PasswordInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) */
     value?: string;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { BaseInputProps } from '../BaseInputProps';
-declare type TextAreaProps = BaseInputProps & {
+import { BaseInputProps } from '../shared';
+declare type TextAreaProps = Omit<BaseInputProps, 'icons'> & {
     /** value van een texarea kan via de children of de value-prop */
     value?: string;
     /**
@@ -24,7 +24,6 @@ declare type TextAreaProps = BaseInputProps & {
  * | 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)      |

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 import { AutoCompleteType } from '../../../loon-react-bulma-types';
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | string | RegExp;
 declare type TextInputProps = BaseInputProps & {
     /** type van de tekst input (default = 'text') */

package/dist/components/Form/shared/Base.Input.Container.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { DirectionProp, SizeProp } from '../../../loon-react-bulma-types';
+/** een wrapper voor een input component, om te zorgen dat ze allemaal op dezelfde manier horizontaal of verticaal aligned worden. */
+export declare const InputContainer: ({ label, children: input, error, size, direction, }: {
+    label?: {
+        txt: string;
+        id: string;
+    } | undefined;
+    children: React.ReactNode;
+    error?: React.ReactNode;
+    size?: "s" | "l" | "m" | "xl" | undefined;
+    direction: DirectionProp;
+}) => JSX.Element;

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

@@ -0,0 +1,105 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import React from 'react';
+import { TextAlignmentProp, DirectionProp, KeyboardTypeProp, SizeProp } from '../../../loon-react-bulma-types';
+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> */
+    name: string;
+    /** id voor de input: gebruikt voor een <label for="*id*}">. default wordt anders de 'name'-prop gebruik */
+    id?: string;
+    /** een tooltip voor de button */
+    tooltip?: string;
+    /**  label voor de input, als dat afwijkt van de name-attribuut */
+    label?: string;
+    /** label wordt alleen gebruikt voor accessibility, dus is onzichtbaar op het scherm. (default = false) */
+    labelHidden?: boolean;
+    /** grootte van de input (default = 'm', normal) */
+    size?: SizeProp;
+    /** Waar moet de tekst van de input uitgelijnd worden (default = 'l', links) */
+    textAlign?: TextAlignmentProp;
+    /** de input is horizontaal, label & input op 1 lijn. (default = 'horizontal') */
+    direction?: DirectionProp;
+    /** een object met validatie-regels */
+    validation?: FormValidationType<T>;
+    /** eigen errorMessage voor validatie buiten component om */
+    errorMessage?: string | ((value: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string);
+    /** placeholder in input (optioneel) */
+    placeholder?: string;
+    /** Welk (virtueel) toetsenbord moet er gebruikt worden? (smartphones, tablets) */
+    keyboardType?: KeyboardTypeProp;
+    /** on-key-down-event, bijvoorbeeld voor het gebruik van Hotkeys als dit element focused is */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    /** (optionele) andere icoontjes voor op de inputs. Anders worden de default-waarden gebruikt. */
+    icons?: {
+        /** Icon aan start van een input */
+        start?: IconProp | string;
+        /**
+         * Icon aan eind van een input
+         * @param v: valid
+         * @returns een fontawesome icon-prop of een fontawesome icon string
+         */
+        end?: (v: boolean) => IconProp | string;
+    };
+};
+export declare type FormValidationType<T extends any = void> = {
+    /** is een value required? */
+    required?: boolean;
+    /**
+     * min value voor numbers
+     * min-length voor strings
+     * min-waarde voor ranges,
+     * minimaal aantal selected in multiselect,
+     * min-date voor datum/tijd ("YYYY-MM-DD", "HH:mm" of "YYYY-MM-DDT:HH:mm").
+     * GEBRUIKT VOOR VALIDATIE */
+    min?: number | string;
+    /**
+     * max value voor numbers,
+     * max-length voor strings,
+     * max-waarde voor ranges,
+     * maximaal aantal selected in multiselect,
+     * max-date voor datum/tijd ("YYYY-MM-DD", "HH:mm" of "YYYY-MM-DDT:HH:mm").
+     * GEBRUIKT VOOR VALIDATIE */
+    max?: number | string;
+    /** voor <input type="multirange">: het minimale verschil tussen 2 waarden. */
+    minDiff?: number;
+    /** voor <input type="multirange">: het maximale verschil tussen 2 waarden. */
+    maxDiff?: number;
+    /** een pattern voor string-validatie */
+    pattern?: string | RegExp;
+    /**
+     * een extra validatie-methode
+     * @param val de nieuwe te valideren waarde
+     * @returns een string met daarin de foutmelding OF een lege string voor een valid waarde.
+     */
+    onValidate?: (val: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string;
+};
+export declare type BaseState<T extends any = void> = {
+    /** de naam die in foutmeldingen komt */
+    description: string;
+    /** de fout-melding, '' voor valid */
+    invalidMsg: string;
+    /** is de waarde invalid */
+    valid: boolean;
+    /** is de input aangeraakt */
+    touched: boolean;
+    /** validatie-object voor deze input */
+    validation?: FormValidationType<T>;
+};
+export declare type BaseChangeStateType = {
+    type: 'CHANGE';
+    invalidMsg: string;
+};
+export declare type BaseTouchStateType = {
+    type: 'TOUCH';
+    touched: boolean;
+};
+export declare type BaseSetStateType<T extends any = void> = {
+    type: 'SET';
+    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' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search' | 'multirange' | 'multiselect' | 'select' | 'textarea';

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+declare type InputErrorProps = {
+    /** error gegenereerd door input-validation */
+    stateError?: string;
+    /** error van buitenaf opgegeven */
+    outsideError?: string;
+    /** is het field touched ? dan WEL een stateError opgeven */
+    touched?: boolean;
+};
+/** Toon een erorr bij een input */
+declare const InputError: (props: InputErrorProps) => JSX.Element | null;
+export { InputError };

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+declare type InputIconProps = {
+    icons?: {
+        start?: IconProp | string;
+        end?: (v: boolean) => IconProp | string;
+    };
+    touched: boolean;
+    valid: boolean;
+    defaultIcon: IconProp | string;
+};
+declare function InputIcons({ icons, touched, valid, defaultIcon }: InputIconProps): JSX.Element;
+export { InputIcons };

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

@@ -0,0 +1,4 @@
+export * from './InputError';
+export * from './InputIcons';
+export * from './Base.Input.Container';
+export * from './BaseInputProps';