loon-bulma-react 2025.0.34 → 2025.1.0

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

@@ -0,0 +1,71 @@
+import { StrictOmit } from '@lib/types';
+import React from 'react';
+import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
+type FileInputValue = {
+    files: File[];
+    path: string;
+};
+type FileInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'value' | 'onChange' | 'onValueChanged'> & InputStylingPropsType & {
+    /** Is het mogelijk om meerdere files te selectere (default = `false`) */
+    multiple?: boolean;
+    /** Tekst op de kies-bestand-button (default = `'Kies een bestand'`) */
+    chooseFileTxt?: string;
+    /** Tekst om weer te geven als er geen bestanden zijn (default = `'Geen bestand(en) geselecteerd'`) */
+    noFilesTxt?: string;
+    /** Toon als een grote knop, niet als ene input (default = `false`) */
+    boxed?: boolean;
+    /** toegestane extensies of MIME-types
+     * - type `string`: komma-geschijden lijst van extensies of MIME-types, bijv. `'image/*, .pdf'`
+     * - type `string[]`: array van extensies of MIME-types, bijv. `['image/*', '.pdf']`
+     *
+     * **LET OP:** In het geval van extensies *MOET* de punt ervoor staan!
+     */
+    accept?: string | string[];
+    /** Voor mobile devices: Welke camera moet gebruikt worden (default = `false`)
+     * - `undefined`: laat de gebruiker kiezen
+     * - `true`: laat de gebruiker kiezen
+     * - `false`: geen camera
+     * - `'user'`: de selfie camera
+     * - `'environment'`:  camera op de achterkant
+     */
+    capture?: boolean | 'user' | 'environment';
+    /** De geselecteerde files EN het path naar deze files.
+     * **LET OP: ** Het is niet mogelijk om in te stellen welke files al geselecteerd zijn.
+     */
+    value?: FileInputValue;
+    /** functie om de namen van bestanden weer te geven.
+     *
+     * **default:** toon de namen van alle geselecteerde bestanden, gescheiden door komma's. Als er geen bestanden zijn, dan de noFilesTxt tonen.
+     */
+    formatter?: (value: FileInputValue) => string;
+    /** callback voor value changes. Bevat het path naar de file(s) en de files in een array. */
+    onValueChanged?: (value: FileInputValue) => void | Promise<void>;
+    /** callback voor value changes. **LET OP:** de  files vindt je in `e.target.files` */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void | Promise<void>;
+    /** foutmelding bij de input */
+    errorMessage?: string | ((s: InputErrorProps<FileInputValue>) => string);
+};
+/**
+ * Een input voor het selecteren van een bestand. de `value`-prop is een object met daarin de Files en het fake path.
+ * **De `value`-prop *MOET* `undefined` zijn voordat je begint. Het is niet mogelijk om alvast een waarde op te geven voor file-inputs in browsers**
+ *
+ * Onderstaande props zijn anders of speciaal voor file-inputs
+ * @param multiple Is het mogelijk om meerdere files te selectere (default = `false`)
+ * @param chooseFileTxt tekst op de knop om files te selecteren (default = `'Kies een bestand'`)
+ * @param noFilesTxt tekst om weer te geven als er geen bestanden zijn (default = `'Geen bestand(en) geselecteerd'`)
+ * @param boxed toon als een grote knop, niet als ene input (default = `false`)
+ * @param accept toegestane extensies of MIME-types
+ * - type `string`: komma-geschijden lijst van extensies of MIME-types, bijv. `'image/*, .pdf'`
+ * - type `string[]`: array van extensies of MIME-types, bijv. `['image/*', '.pdf']`
+
+ * **LET OP:** In het geval van extensies *MOET* de punt ervoor staan!
+ * @param capture Voor mobile devices: Welke camera moet gebruikt worden (default = `false`)
+ * @param value De geselecteerde files EN het path naar deze files.
+ * **LET OP: ** Het is niet mogelijk om in te stellen welke files al geselecteerd zijn.
+ * @param formatter functie om de namen van bestanden weer te geven.
+ * **default:** toon de namen van alle geselecteerde bestanden, gescheiden door komma's. Als er geen bestanden zijn, dan de noFilesTxt tonen.
+ * @param onValueChanged callback voor value changes. Bevat het path naar de file(s) en de files in een array.
+ */
+declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage: errorProp, infoMessage: infoProp, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, infoData, formatter, }: FileInputProps): import("react/jsx-runtime").JSX.Element;
+export { FileInput };
+export type { FileInputProps, FileInputValue };

package/dist/forms/Input.d.ts

@@ -0,0 +1,223 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { AlignmentProp, DirectionProp, AutoCompleteProp, KeyboardTypeProp, StrictOmit, SizeProp } from '@lib/types';
+import React from 'react';
+import { MonthInputString } from './Periodes/MonthInput';
+import { WeekInputString } from './Periodes/WeekInput';
+export type InputErrorProps<T = InputValueType> = {
+    /** current value */
+    value: T | undefined;
+    /** is deze input 'touched' (gefocused en weer geblurred (unfocused)) */
+    touched: boolean;
+    /** is deze input focused? */
+    focused: boolean;
+    /** is deze input required? */
+    required: boolean;
+    /** is deze input disabled? */
+    disabled: boolean;
+    /** is deze input readonly? */
+    readonly: boolean;
+};
+type InputValueType = string | number | readonly string[] | undefined;
+type InputStylingPropsType = {
+    /** grootte van de input (default = `m`, medium) */ size?: SizeProp | undefined;
+    /** alignment van de input (default = `l`, left) */ alignment?: AlignmentProp | undefined;
+    /** moet het label van de input verborgen worden? (screenreader only) (default = `false`) */ labelHidden?: boolean | undefined;
+    /** label boven (`v`) of voor (`h`) de input, (default = `v`, vertical) */ direction?: DirectionProp | undefined;
+    /** (optioneel) icon op de input */ icon?: IconProp | string | undefined | null;
+    infoData?: string | React.ReactNode | ((helptag?: string | undefined) => void) | undefined;
+};
+type InputPropsType<T = InputValueType> = {
+    optionList?: string[] | Array<{
+        value: string;
+        label: string;
+    }>;
+    /** label bij de input. Als geen label, dan wordt de `name`-property gebruikt */ label?: string | undefined;
+    /** Wordt er een rood sterretje getoond bij required inputs ? (default = `false`) */ showRequiredOnLabel?: boolean;
+    /** foutmelding bij de input */ errorMessage?: string | ((s: InputErrorProps<T>) => string) | undefined;
+    /** info-melding bij de input */ infoMessage?: string | ((v?: InputValueType) => string) | undefined;
+    /** helptag in Loon bij de input (`:HOOFDGROEP:SUBGROEP:`) */ helpTag?: string;
+    /** type input (default = `text`) */ type?: 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search' | 'select' | 'file' | 'textarea';
+    /** (optioneel) tooltip-title voor de input. Bij gebruik van `pattern`, kan je hier het gewenste formaat opgeven. */ title?: string | undefined;
+    /** (optioneel) id voor de input. Als geen id, dan wordt de `name`-property gebruikt */ id?: string | undefined;
+    /** name-property voor de input */ name: string;
+    /** waarde voor de input */ value?: T | undefined;
+    /** is deze input loading (default = false) */ loading?: boolean | undefined;
+    /** gebruikt deze input de spellchecked (default = `false`) */ spellCheck?: boolean | undefined;
+    /** is deze input required (default= `false`) */ required?: boolean | undefined;
+    /** autocomplete voor deze input (default = `off`) */ autoComplete?: AutoCompleteProp | undefined;
+    /** type toetsenbord (voor smartphones) voor deze input (default = `text`) */ keyboardType?: KeyboardTypeProp | undefined;
+    /** placeholder in de input */ placeholder?: string | undefined;
+    /** is deze input disabled 9default = `false`) */ disabled?: boolean | undefined;
+    /** bij welk form hoort deze input? */ form?: string | undefined;
+    /** patroon voor de inputs (string of regex). Geef met `title` een gewenst formaat op. */ pattern?: string | undefined;
+    /** Is deze input readonly (default = `false`). Bij `true` zie je alleen nog maar de content van de input */
+    readonly?: boolean | undefined;
+    /** moet deze input de focus krijgen? (default = `false`) */ autofocus?: boolean | undefined;
+    /** (optionele) `ref` voor gebruik met `React.useRef<HTMLInputElement>` */ inputRef?: React.Ref<HTMLInputElement> | undefined;
+    /** 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 | WeekInputString | MonthInputString | string | undefined;
+    /** 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 | WeekInputString | MonthInputString | string | undefined;
+    /** 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"/>` | */
+    step?: number | undefined;
+    /** Voeg extra styles to aan deze input */
+    styles?: React.CSSProperties | undefined;
+    /** Voeg extra classes toe aan deze input */
+    className?: string | undefined;
+    optionListId?: string | undefined;
+    hideIconRight?: boolean | undefined;
+    /** callback voor unfocus (blur), zet OOK de input op `touched` */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void | Promise<void>;
+    /** callback voor onChange. Voor de echte waarde, gebruik je `onValueChanged` */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void | Promise<void>;
+    /** value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState('');
+     * return <Input value={x} onValueChange={setX} {...props} />
+     */
+    onValueChanged?: (e: T) => void | Promise<void>;
+    /** callback voor focus MET daarbij de helptag */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, helpTag?: string) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
+};
+/** Tijd voordat een input de focus verliest als je erop klikt/hovert en er is hulp. Anders is het instant. */
+declare const FOCUS_HELP_TIMEOUT_IN_MS = 333;
+/**
+ * Basis input component. Deze component heeft dezelfde properties als de gewone `<input ... />`-tag en de `<Input<T> ... />-tag`.
+ * Het verschil met de `Input`-tag is dat deze compionent **geen** direction, label, of icon heeft, dus je kan hem zelf inrichten
+ * Wordt door (bijna) alle andere input-componenten gebruikt. Alleen niet door de `<Select>`, <Radio>`, `<Checkbox>` en `<Textarea>` componenten.
+ * @example <BaseInput type="text" name="myInput" value={x} onValueChanged={setX} />
+ * @description callbacks.
+ * | callback       |      | description                                 |
+ * |----------------|------|---------------------------------------------|
+ * | onBlur         |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor unfocus (blur), zet OOK de input op `touched`|
+ * | onChange       |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor onChange|
+ * | onValueChanged |`(v: T)=> void`      | value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt|
+ * | onFocus        |`(e: React.FocusEvent<HTMLInputElement>, ht?: string)=> void`      | callback voor focus, MET de `helpTag` voor gebruik in Loon (F1) |
+ * | onKeyDown      |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * | onKeyUp        |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * @description props: ({@link InputPropsType}) voor de input.
+ * | prop           | type           | description                                 |
+ * |----------------|----------------|---------------------------------------------|
+ * | alignment      | `AlignmentType`  | alignment van de input (default = `left`)   |
+ * | autoComplete   | `AutoCompleteProp`       | autocomplete voor deze input (default = `off`)|
+ * | autofocus      | `boolean`      | moet deze input de focus krijgen? (default = `false`)|
+ * | disabled       | `boolean`      | is deze input disabled (default = `false`)|
+ * | errorMessage   | `string`, `(v?: string) => string`       | error message voor deze input (default = `''`)|
+ * | form           | `string`        | form waar deze input bij hoort (default = `undefined`)|
+ * | helpTag        | `string` `:Hoofdgroep:Subgroep:`      | help tag voor deze input (default = `undefined`). Kan gebruikt worden voor de Help In loon (F1) functionaliteit. Meegelevert in de callback voor `onFocus`|
+ * | id             | `string`       | id voor deze input (default = `undefined`)|
+ * | inputRef       | `React.Ref<HTMLInputElement>` | `ref` voor gebruik met `React.useRef<HTMLInputElement>` (default = `undefined`)|
+ * | keyboardType   | `string`       | keyboard type voor deze input (default = `text`)|
+ * | max            | `number`,`string` | max waarde of max lengte voor de input (default = `undefined`)|
+ * | min            | `number`,`string` | min waarde of min lengte voor de input (default = `undefined`)|
+ * | name           | `string`       | name voor deze input (**verplicht**)|
+ * | pattern        | `string`       | pattern voor deze input (default = `undefined`)|
+ * | placeholder    | `string`       | placeholder voor deze input (default = `undefined`)|
+ * | readonly       | `boolean`      | is deze input readonly (default = `false`)|
+ * | required       | `boolean`      | is deze input required (default = `false`)|
+ * | size           | `SizeProp`       | size voor deze input (default = `undefined`)|
+ * | spellCheck     | `boolean`      | moet deze input spellcheck hebben (default = `false`)|
+ * | step           | `number`       | stapgrootte voor groter/kleiner aanpassingen (default = `1`)|
+ * | title          | `string`       | title voor deze input (default = `undefined`)|
+ * | type           | `string`       | type voor deze input (default = `text`)|
+ * | value          | `string`       | value voor deze input (default = `undefined`)|
+ */
+declare function BaseInput<T extends InputValueType = string>({ alignment: alignmentProp, autoComplete, optionListId, autofocus, disabled, errorMessage, infoMessage, form, helpTag, id, inputRef: ref, keyboardType, max, min, name, pattern, placeholder, readonly, required, size: sizeProp, spellCheck, step, title, type, value, className: extraClasses, styles, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, }: StrictOmit<InputPropsType<T>, 'optionList'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Input component. Deze component heeft dezelfde properties als de gewone `<input ... />`-tag en de `<BaseInput<T> ... />-tag`.
+ * Het verschil met de `BaseInput`-tag is dat deze compionent **wel** direction, label, of icon heeft.
+ * @example <Input type="text" name="myInput" value={x} onValueChanged={setX} icon={faMouse} />
+ * @description callbacks.
+ * | callback       |      | description                                 |
+ * |----------------|------|---------------------------------------------|
+ * | onBlur         |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor unfocus (blur), zet OOK de input op `touched`|
+ * | onChange       |`(e: React.FocusEvent<HTMLInputElement>)=> void`      | callback voor onChange|
+ * | onValueChanged |`(v: T)=> void`      | value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt|
+ * | onFocus        |`(e: React.FocusEvent<HTMLInputElement>, ht?: string)=> void`      | callback voor focus, MET de `helpTag` voor gebruik in Loon (F1) |
+ * | onKeyDown      |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * | onKeyUp        |`(e: React.KeyboardEvent<HTMLInputElement>)=> void`      | callback voor typen |
+ * @description props: {@link InputPropsType} voor de input.
+ * | prop           | type           | description                                 |
+ * |----------------|----------------|---------------------------------------------|
+ * | alignment      | `AlignmentType`  | alignment van de input (default = `left`)   |
+ * | autoComplete   | `AutoCompleteProp`       | autocomplete voor deze input (default = `off`)|
+ * | autofocus      | `boolean`      | moet deze input de focus krijgen? (default = `false`)|
+ * | disabled       | `boolean`      | is deze input disabled (default = `false`)|
+ * | direction      | `DirectionProp` | direction voor deze input (default = `h`). Voor styling|
+ * | errorMessage   | `string`, `(v?: string) => string`       | error message voor deze input (default = `''`)|
+ * | form           | `string`        | form waar deze input bij hoort (default = `undefined`)|
+ * | helpTag        | `string`       | help tag voor deze input (default = `undefined`). Kan gebruikt worden voor de Help In loon (F1) functionaliteit. Meegelevert in de callback voor `onFocus`|
+ * | id             | `string`       | id voor deze input (default = `undefined`)|
+ * | inputRef       | `React.Ref<HTMLInputElement>` | `ref` voor gebruik met `React.useRef<HTMLInputElement>` (default = `undefined`)|
+ * | keyboardType   | `string`       | keyboard type voor deze input (default = `text`)|
+ * | max            | `number`, `string`       | max waarde of max lengte voor de input (default = `undefined`)|
+ * | min            | `number`, `string`       | min waarde of min lengte voor de input (default = `undefined`)|
+ * | name           | `string`       | name voor deze input (**verplicht**)|
+ * | pattern        | `string`       | pattern voor deze input (default = `undefined`)|
+ * | placeholder    | `string`       | placeholder voor deze input (default = `undefined`)|
+ * | readonly       | `boolean`      | is deze input readonly (default = `false`)|
+ * | required       | `boolean`      | is deze input required (default = `false`)|
+ * | size           | `SizeProp`       | size voor deze input (default = `undefined`)|
+ * | spellCheck     | `boolean`      | moet deze input spellcheck hebben (default = `false`)|
+ * | step           | `number`       | stapgrootte voor groter/kleiner aanpassingen (default = `1`)|
+ * | title          | `string`       | title voor deze input (default = `undefined`)|
+ * | type           | `string`       | type voor deze input (default = `text`)|
+ * | value          | `string`       | value voor deze input (default = `undefined`)|
+ */
+declare function Input<T extends InputValueType = string>({ direction: directionProp, errorMessage, infoMessage, showRequiredOnLabel, hideIconRight, icon, id, label, labelHidden, name, required, loading, disabled, readonly, size: sizeProp, value, infoData, helpTag, optionList, onBlur, onFocus, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): import("react/jsx-runtime").JSX.Element;
+type InputContainerProps = {
+    label: string;
+    required: boolean;
+    showRequiredOnLabel: boolean;
+    inputId: string;
+    labelHidden?: boolean;
+    loading?: boolean;
+    children: React.ReactNode;
+    size: SizeProp;
+    direction: DirectionProp;
+    controlClassName?: string;
+    infoData?: React.ReactNode | undefined;
+    setHovered?: (hovered: boolean) => void;
+    onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
+    onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+/** Een wrapper voor een input component, om te zorgen dat ze allemaal op dezelfde manier horizontaal of verticaal aligned worden. */
+declare function InputContainer({ children, controlClassName, direction, showRequiredOnLabel, inputId, label, labelHidden, required, size, loading, infoData, setHovered, onMouseEnter, onMouseLeave, }: InputContainerProps): import("react/jsx-runtime").JSX.Element;
+export { BaseInput, Input, InputContainer, FOCUS_HELP_TIMEOUT_IN_MS };
+export type { InputPropsType, InputStylingPropsType, InputValueType };

package/dist/forms/MaskedInput/MaskedInput.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+interface MaskedInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange' | 'onBlur'> {
+    mask: any;
+    guide?: boolean;
+    value?: string | number;
+    pipe?: any;
+    placeholderChar?: string;
+    keepCharPositions?: boolean;
+    showMask?: boolean;
+    onBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
+type Mask = Array<string | RegExp> | ((value: string, config?: any) => Array<string | RegExp> | false);
+interface ConformToMaskConfig {
+    guide?: boolean;
+    previousConformedValue?: string;
+    placeholderChar?: string;
+    placeholder?: string;
+    currentCaretPosition?: number;
+    keepCharPositions?: boolean;
+}
+interface ConformToMaskResult {
+    conformedValue: string;
+    meta: {
+        someCharsRejected: boolean;
+    };
+}
+export declare const MaskedInput: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<HTMLInputElement>>;
+export default function conformToMask(rawValue: string | undefined, mask: Mask, config?: ConformToMaskConfig): ConformToMaskResult;
+export declare function createNumberMask({ prefix, suffix, includeThousandsSeparator, thousandsSeparatorSymbol, allowDecimal, decimalSymbol, decimalLimit, requireDecimal, allowNegative, allowLeadingZeroes, integerLimit, }?: {
+    prefix?: string | undefined;
+    suffix?: string | undefined;
+    includeThousandsSeparator?: boolean | undefined;
+    thousandsSeparatorSymbol?: string | undefined;
+    allowDecimal?: boolean | undefined;
+    decimalSymbol?: string | undefined;
+    decimalLimit?: number | undefined;
+    requireDecimal?: boolean | undefined;
+    allowNegative?: boolean | undefined;
+    allowLeadingZeroes?: boolean | undefined;
+    integerLimit?: null | undefined;
+}): {
+    (rawValue?: string): any;
+    instanceOf: string;
+};
+export {};

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

@@ -0,0 +1,14 @@
+import { StrictOmit } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type NumberInputProps = StrictOmit<InputPropsType<number>, 'type' | 'spellCheck'> & InputStylingPropsType & {
+    prefix?: string;
+    suffix?: string;
+};
+/**
+ * NumberInput: input voor een getal
+ * @param value De waarde van de input
+ * @example <NumberInput value={1} step={3}/>
+ */
+declare function NumberInput({ value, prefix, suffix, icon, name, id: idProp, label, direction: directionProp, size: sizeProp, alignment: alignmentProp, required, disabled, readonly, loading, labelHidden, showRequiredOnLabel, hideIconRight, className: extraClasses, infoData, helpTag, errorMessage, infoMessage, onValueChanged, onBlur, onFocus, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
+export { NumberInput };
+export type { NumberInputProps };

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

@@ -0,0 +1,21 @@
+import { StrictOmit } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoComplete' | 'type' | 'spellCheck' | 'placeholder' | 'hideIconRight'> & StrictOmit<InputStylingPropsType, 'alignment' | 'icon'> & {
+    /** value-unit om __voor__ de geselecteerde waarde te zetten. (default = `''`) */
+    prefix?: string;
+    /** value-unit om __achter__ de geselecteerde waarde te zetten. (default = `''`) */
+    suffix?: string;
+};
+/**
+ * RangeInput: input voor een getal. De range-input heeft geen placeholder, icon, autoComplete, spellCheck en autofocus. Ook size en alignment zijn niet van toepassing. Alleen op de uitlijning van het label
+ * @param value De waarde van de input
+ * @param prefix De unit (default = ''). Staat **voor** de geselecteerde waarde
+ * @param suffix De unit (default = ''). Staat **achter** de geselecteerde waarde
+ * @param min De minimale waarde van de input (default = 0)
+ * @param max De maximale waarde van de input (default = 100)
+ * @param step De stapgrootte van de input (default = 1)
+ * @example <RangeInput value={50} min={0} max={100} />
+ */
+declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size: sizeProp, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction: directionProp, labelHidden, infoData, }: RangeInputProps): import("react/jsx-runtime").JSX.Element;
+export { RangeInput };
+export type { RangeInputProps };

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

@@ -0,0 +1,56 @@
+import { StrictOmit, HexColor, RGBColor, HSLColor } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type ColorInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged' | 'step' | 'min' | 'max' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
+    /** Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff` */
+    hexValue?: HexColor;
+    /** value-changed callback met de nieuwe waarde van de input in Hex-format. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState('#ff8000');
+     * return <ColorInput hexValue={x} onHexValueChange={setX} {...props} />
+     */
+    onHexValueChanged?: (v: HexColor) => void | Promise<void>;
+    /** Gebruik de color-input met een RGB-color, van `[0, 0, 0]` t/m `[255, 255, 255]` */
+    rgbValue?: RGBColor;
+    /** value-changed callback met de nieuwe waarde van de input in RGB-format. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState([255, 128, 0]);
+     * return <ColorInput rgbValue={x} onRGBValueChange={setX} {...props} />
+     */
+    onRGBValueChanged?: (v: RGBColor) => void | Promise<void>;
+    /** Gebruik de color-input met een HSL-color, van `[0, 0, 0]` t/m `[360, 100, 100]` */
+    hslValue?: HSLColor;
+    /** value-changed callback met de nieuwe waarde van de input in HSL-format. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState([60, 100, 50]);
+     * return <ColorInput hslValue={x} onHSLValueChange={setX} {...props} />
+     */
+    onHSLValueChanged?: (v: HSLColor) => void | Promise<void>;
+};
+/**
+ * Een color-input component dat een hex-color, een rgb-color of een hsl-color kan gebruiken.
+ * @description __LET OP:__ _Er zit een volgorde-afhankelijkheid in deze component: HEX gaat voor RGB en RGB gaat voor HSL._
+ * @param value deze bestaat niet. er zijn 3 verschillende manieren om de value te zetten
+ * - `hexValue` Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff`
+ * - `rgbValue` Gebruik de color-input met een RGB-color, van `[0, 0, 0]` t/m `[255, 255, 255]`
+ * - `hslValue` Gebruik de color-input met een HSL-color, van `[0, 0, 0]` t/m `[360, 100, 100]`
+ *
+ * @param onValueChanged deze bestaat niet. er zijn 3 verschillende manieren om de value te krijgen.
+ * - `onHexValueChanged` value-changed callback met de nieuwe waarde van de input in Hex-format.
+ * - `onRGBValueChanged` value-changed callback met de nieuwe waarde van de input in RGB-format.
+ * - `onHSLValueChanged` value-changed callback met de nieuwe waarde van de input in HSL-format.
+ * Daardoor zou je de colors ook naar elkaar kunnen omzetten. De functies daarvoor worden **ook** geexporteerd.
+ *@example
+ * // Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff`
+ *  const [x, setX] = React.useState<HexColor>('#ff8000');
+ * <ColorInput hexValue={x} onHexValueChange={setX} {...props} />
+ * @example // Gebruik de color-input met een RGB-color, van `[0, 0, 0]` t/m `[255, 255, 255]`
+ * const [x, setX] = React.useState<RGBColor>([255, 128, 0]);
+ * <ColorInput rgbValue={x} onRGBValueChange={setX} {...props} />
+ * @example // Gebruik de color-input met een HSL-color, van `[0, 0, 0]` t/m `[360, 100, 100]`
+ * const [x, setX] = React.useState<HSLColor>([60, 100, 50]);
+ * <ColorInput hslValue={x} onHSLValueChange={setX} {...props} />
+ *
+ */
+declare function ColorInput({ hexValue, rgbValue, hslValue, icon, onHexValueChanged, onRGBValueChanged, onHSLValueChanged, ...props }: ColorInputProps): import("react/jsx-runtime").JSX.Element;
+export { ColorInput };
+export type { ColorInputProps };

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

@@ -0,0 +1,29 @@
+type HiddenInputProps = {
+    /** Start value voor deze input (optioneel) */
+    value?: string;
+    /** 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*}"> */
+    id: string;
+    /** Moet dit verborgen field worden ingevoerd */
+    required?: boolean;
+    /** (optional) Tooltip voor een hidden input ??? vooral voor test-doeleinden
+     * @deprecated use `title`
+     */
+    tooltip?: string;
+    /** (optional) Tooltip voor een hidden input ??? vooral voor test-doeleinden */
+    title?: string;
+};
+/**
+ * Maak een input die verborgen is maar wel een waarde moet hebben.
+ * @param props
+ * @returns een hidden input
+ * @param name de naam voor de input (REQUIRED)
+ * @param id de id voor de input
+ * @param value de waarde
+ * @param required moet dit verborgen field worden ingevoerd
+ * @example <HiddenInput value={value} {...props} />
+ */
+declare function HiddenInput({ value, name, id, required, title, tooltip }: HiddenInputProps): import("react/jsx-runtime").JSX.Element;
+export { HiddenInput };
+export type { HiddenInputProps };

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

@@ -0,0 +1,14 @@
+import { StrictOmit } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type TelephoneInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
+    pattern?: 'mobiel' | 'vast' | string;
+};
+/**
+ * Een input voor een telefoonnummer. Deze input heeft een default `pattern` voor validatie op form-verzending. Deze kan worden overschreven. Ook wordt de autocomplete op `email` gezet.
+ * @example <TelephoneInput name="phonenr" value={phone} onValueChanged={setPhone} pattern='mobiel' />
+ * @param pattern het pattern voor validatie, (default = '')
+ * @param autoComplete de autocomplete type (password managers) (default = `tel`)
+ */
+declare function TelephoneInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: TelephoneInputProps): import("react/jsx-runtime").JSX.Element;
+export { TelephoneInput };
+export type { TelephoneInputProps };

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

@@ -0,0 +1,14 @@
+import { StrictOmit } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type URLInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
+    pattern?: string;
+};
+/**
+ * Een input voor een URL. Deze input heeft een default `pattern` voor validatie op form-verzending. Deze kan worden overschreven. Ook wordt de autocomplete op `email` gezet.
+ * @example <URLInput name="url" value={url} onValueChanged={setUrl} />
+ * @param pattern het pattern voor validatie, (default = '')
+ * @param autoComplete de autocomplete type (password managers) (default = `url`)
+ */
+declare function URLInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: URLInputProps): import("react/jsx-runtime").JSX.Element;
+export { URLInput };
+export type { URLInputProps };

package/dist/forms/Periodes/MonthInput.d.ts

@@ -0,0 +1,43 @@
+import { StrictOmit } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+/** WeekInput: input voor een weeknummer (format: yyyy-MM)
+ * -1e getal: jaartal
+ * -2e getal: maandnummer (1-12), **met** voorloopnullen. *LET OP: NIET JavaScript Date 0-11!*
+ * @example
+ * `'2021-01'`  // correct
+ * `'2021-1'`   // incorrect ZONDER ERROR
+ * `'2021-001'` // incorrect ZONDER ERROR
+ * `'2021-M01'` // incorrect met error
+ */
+type MonthInputString = '' | `${number}-${number}`;
+type MonthInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'value' | 'onValueChanged' | 'min' | 'max'> & InputStylingPropsType & {
+    /** waarde van de month-input zetten met een string van format `yyyy-MM`.
+     *
+     * *LET OP: Niet JavaScript Date 0-11, maar gewoon 1-12*
+     * @example '2021-01'
+     */
+    value?: MonthInputString;
+    /** minimaal toegestane waarde als MonthInputValue. MOET lager zijn dan `max`-prop */
+    min?: MonthInputString;
+    /** maximaal toegestane waarde als MonthInputValue. MOET hoger zijn dan `min`-prop */
+    max?: MonthInputString;
+    /** callback met het resultaat als string  */
+    onValueChanged?(newVal: MonthInputString): void;
+};
+/**
+ * MonthInput: input voor een maand in een jaar
+ *@param value De value bestaat uit 2 delen, gescheiden met een `-`-karakter
+ * - 1e getal: jaartal
+ * - 2e getal: maandnummer (01-12), **met** voorloopnullen. *LET OP: NIET JavaScript Date 0-11!*
+ * @example
+ * `'2021-01'`  // correct
+ * `'2021-1'`   // correct
+ * `'2021-001'` // incorrect
+ * `'2021-M01'` // incorrect
+ * @param min minimale waarde als MonthInputValue. MOET lager zijn dan `max`-prop
+ * @param max maximale waarde als MonthInputValue. MOET hoger zijn dan `min`-prop
+ * @example <MonthInput value="2021-06" min="2021-01" max="2021-12" />
+ */
+declare function MonthInput({ value, min, max, icon, onValueChanged, ...props }: MonthInputProps): import("react/jsx-runtime").JSX.Element;
+export { MonthInput };
+export type { MonthInputProps, MonthInputString };

package/dist/forms/Periodes/WeekInput.d.ts

@@ -0,0 +1,43 @@
+import { StrictOmit } from '@lib/types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+/** WeekInput: input voor een weeknummer (format: yyyy-Www)
+ * -1e getal: jaartal
+ * -2e getal: weeknummer, **met** voorloopnullen, voorafgaan door een *'W'*
+ * @example
+ * `'2021-W01'`  // correct
+ * `'2021-W1'`   // incorrect ZONDER ERROR
+ * `'2021-W001'` // incorrect ZONDER ERROR
+ * `'2021-01'`   // incorrect met error
+ * `'202101'`    // incorrect met error
+ */
+type WeekInputString = '' | `${number}-W${number}`;
+type WeekInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'value' | 'onValueChanged' | 'min' | 'max'> & InputStylingPropsType & {
+    /** waarde van de weekinput zetten met een string van format `yyyy-Www`
+     * @example '2021-W01'
+     */
+    value?: WeekInputString;
+    /** minimaal toegestane waarde als WeekInputValue. MOET lager zijn dan `max`-prop */
+    min?: WeekInputString;
+    /** maximaal toegestane waarde als WeekInputValue. MOET hoger zijn dan `min`-prop */
+    max?: WeekInputString;
+    /** callback met het resultaat als string  */
+    onValueChanged?(newVal: WeekInputString): void;
+};
+/**
+ * WeekInput: input voor een weeknummer in een jaar
+ * @param value De value bestaat uit 2 delen, gescheiden met een `-W`-string
+ * -1e getal: jaartal
+ * -2e getal: weeknummer, **met** voorloopnullen, voorafgaan door een *'W'*
+ * @example
+ * '2021-W01' // correct
+ * '2021-W1'  // correct, geen voorloopnullen
+ * '2021-W001' // incorrect te veel voorloopnullen
+ * '2021-01'  // incorrect, weeknummer heeft geen W-karakter
+ * '202101' // incorrect, geen `-W`-string
+ * @param min minimale waarde als WeekInputValue. MOET lager zijn dan `max`-prop
+ * @param max maximale waarde als WeekInputValue. MOET hoger zijn dan `min`-prop
+ * @example <WeekInput value="2021-W01" min="2021-W01" max="2021-W53" />
+ */
+declare function WeekInput({ value, min, max, icon, onValueChanged, ...props }: WeekInputProps): import("react/jsx-runtime").JSX.Element;
+export { WeekInput };
+export type { WeekInputProps, WeekInputString };