loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/contexts/Prompt/PromptContextProvider.d.ts

@@ -0,0 +1,71 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { TextInputProps } from './../../forms/Text/TextInput';
+import { StrictOmit } from './../../types';
+type State = {
+    show: boolean;
+    content: string | React.ReactNode;
+    submit: string;
+    submitIcon?: IconProp | undefined;
+    cancel: string;
+    cancelIcon?: IconProp | undefined;
+    otherButtons: React.ReactNode[];
+    value: string;
+    inputProps: TextInputProps;
+    modalID: number;
+};
+/**
+ * prompt provider om `usePrompt`-hook te kunnen gebruiken.
+ * @param children de children
+ * @returns
+ * @example // index.tsx of App.tsx
+ * root.render(
+ * <PromptProvider>
+ *   <>
+ *    // ...
+ *   </>
+ * </PromptProvider>)
+ */
+declare function PromptProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export type AllowedPromptTypes = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search';
+/**
+ * Hook voor de prompt
+ * @param submitTxt tekst voor op de OK-button (default = 'OK')
+ * @param cancelTxt tekst voor opd e cancel-button (default = 'Annuleren')
+ * @param inputSettings: de props voor de input, gebruikt dezelfde als `<TextInput>`, alleen `name` en `label` zijn optioneel
+ * @returns onConfirm-fn, onCancel-fn, prompt-fn, onUpdate-fn, promptState
+ * @example
+ * const { prompt } = usePrompt({
+ *    name: 'my-prompt-input',
+ *    label: 'Mijn superspeciale prompt input',
+ *    type: 'password',
+ *    max: 6,
+ *  });
+ * // ...
+ * const result = await prompt("Geef een waarde op", "Okidoki","Neuhh")
+ * // OR:
+ * const result2 = await prompt(<p>Doe een waarde!</p>)
+ */
+declare function usePrompt(inputSettings?: StrictOmit<TextInputProps, 'name'> & {
+    name?: string;
+    type?: AllowedPromptTypes;
+}): {
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onSubmit: () => void;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onCancel: () => void;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onUpdate: (val: string) => void;
+    /**
+     * awaitable confirm function. Geef een string of Fragment op om iets in de confirm-modal te tonen
+     * @param content string of Fragment met de boodschap voor de confirm
+     * @returns Promise<boolean> met true als de gebruiker op OK heeft geklikt, false als anders
+     * @example const isConfirmed = await confirm("Weet je het zeker?")
+     */
+    prompt: (content: string | React.ReactNode, okText?: string | undefined, cancelText?: string | undefined, okIcon?: IconProp | undefined, cancelIcon?: IconProp | undefined, ...otherButtons: React.ReactNode[]) => Promise<string>;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    promptState: State;
+};
+export { PromptProvider, usePrompt };

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

@@ -0,0 +1,48 @@
+import { StrictOmit, ColorProp } from './../../types';
+import React from 'react';
+import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
+type CheckBoxInputProps = StrictOmit<InputPropsType<string>, 'value' | 'onValueChanged' | 'type' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'pattern' | 'placeholder' | 'iconRight'> & StrictOmit<InputStylingPropsType, 'icon'> & {
+    /** is de input checked? */
+    value?: boolean;
+    /** label bij de input. Mag ook een `React.ReactNode` zijn. Als geen label, dan wordt de `name`-property gebruikt. */
+    label?: string | React.ReactNode;
+    /** kleur voor de checkbox. (default = `p`, primary) */
+    color?: ColorProp;
+    /** foutmelding bij de input */ errorMessage?: string | ((s: InputErrorProps<boolean>) => string);
+    /** info-melding bij de input */ infoMessage?: string | ((v: boolean) => string);
+    onValueChanged?: (v: boolean) => void | Promise<void>;
+};
+/**
+ * Een checkbox input met een container eromheen. Om een checkbox in te voegen zonder container, gebruik dan de `<CB ... />`-component. DEze component 'wrapt' deze `CB`-component.
+ * De properties `type`, `step`, `min`, `max`, `pattern`, `icon` en `placeholder` kunnen niet op deze component gebruikt worden. Ze slaan nergens op bij checkboxes.
+ *
+ * **De checkbox maakt *geen* gebruik van de `checked`-prop van normale checkboxes, gebruik `value`!**
+ * @param value is de checkbox checked?
+ * @param label label bij de checkbox. Mag ook een `React.ReactNode` zijn. Als geen label, dan wordt de `name`-property gebruikt.
+ * @param color kleur voor de checkbox. (default = `p`, primary)
+ * @param styling styling voor de checkbox. (default = `normal`)
+ * @example
+ * const [x, setX] = React.useState(false);
+ * <CheckBox name="test" label="test" value={x} onValueChanged={setX} direction='v'/>
+ */
+declare function CheckBox({ id, label, name, size: sizeProp, direction: directionProp, required, showRequiredOnLabel, value, labelHidden, helpTag, infoData, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Een checkbox input die nog helemaal zelf aan te passen is, dus zonder container eromheen. Om een checkbox in met wat meer styling te gebruiken, gebruik dan de `CheckBox` component.
+ * Dat is een wrapper om deze component heen. De properties `type`, `step`, `min`, `max`, `icon`, `pattern`, `placeholder` en `direction` zijn niet van toepassing op deze component.
+ *
+ * **De checkbox maakt *geen* gebruik van de `checked`-prop van normale checkboxes, gebruik `value`!**
+ * @param value is de checkbox checked?
+ * @param label label bij de checkbox. Mag ook een `React.ReactNode` zijn. Als geen label, dan wordt de `name`-property gebruikt.
+ * @param color kleur voor de checkbox. (default = `p`, primary)
+ * @param styling styling voor de checkbox. (default = `normal`)
+ *
+ * @example
+ * const [x, setX] = React.useState(false);
+ * <CB name="test" label="test" value={x} onValueChanged={setX}/>
+ */
+declare function CB({ helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, value, required, spellCheck, id, autoComplete, readonly, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, color, infoDataEl, }: // inverted = false,
+StrictOmit<CheckBoxInputProps, 'direction' | 'labelHidden' | 'infoData'> & {
+    infoDataEl?: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { CheckBox, CB };
+export type { CheckBoxInputProps as CheckboxInputProps };

package/dist/lib/forms/ComboBox/ComboBox.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+import { StrictOmit, AutoCompleteProp } from './../../types';
+import { InputPropsType, InputStylingPropsType, InputErrorProps, InputValueType } from '../Input';
+type ComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'min' | 'max' | 'readonly' | 'pattern' | 'errorMessage' | 'infoMessage' | 'title' | 'form' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
+    /** De waarde van de combobox */ value: T;
+    /** Alle mogelijke opties in de combobox */ options: T[];
+    /** Is autocomplete aan op deze combobox? (default = `'off'` ) */ autoComplete?: AutoCompleteProp;
+    /** functie om het label in de combobox samen te stellen
+     * default:
+     */
+    formatLabel?: (value: T) => string;
+    formatOption?: (value: T, index: number) => React.ReactNode;
+    formatValue?: (value: T) => React.ReactNode;
+    /** callback voor calue changes */
+    onValueChanged?: (value: T) => void | Promise<void>;
+    /** Als we typen in de combobox, hoe moet er gezocht worden? Default doorzoeken we de `JSON.stringify`-string van de objecten */
+    onSearch?: (searchTxt: string, value: T) => boolean;
+    /** foutmelding bij de input */ errorMessage?: string | ((s: InputErrorProps<string>) => string);
+    /** info-melding bij de input */ infoMessage?: string | ((v: InputValueType) => string);
+};
+/**
+ * Een ComboBox is een combi van een `<Select>` en een `<Input>`. Je kan een waarde uit een lijst kieze, maar deze ook intypen.
+ * @example // Combobox met string values
+ * const options:string[] = users.slice(0, 100).map((item) => `${item.first_name} ${item.last_name}`);
+ * <ComboBox name="ComboBox"
+ *   value={value}
+ *   options={options}
+ *   onValueChanged={onChange}
+ *   onSearch={(txt, v) => v.includes(txt)}
+ * />
+ * @example // ComboBox met object values
+ * const options: User[] = users.slice(0, 100);
+ * <ComboBox<typeof value2>
+ *   name="ComboBox - Objects"
+ *   value={value2}
+ *   options={options2}
+ *   onValueChanged={onChange2}
+ *   labelForValue={(v) => `${v.first_name} ${v.last_name}`}
+ *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
+ * />
+ */
+declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment: alignmentProp, size: sizeProp, direction: directionProp, placeholder, helpTag, disabled, loading, autofocus, iconRight, labelHidden, icon, infoData, className: cn, color, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, formatOption, }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export { ComboBox };
+export type { ComboBoxProps };

package/dist/lib/forms/ComboBox/MultiComboBox.d.ts

@@ -0,0 +1,44 @@
+import { StrictOmit, AutoCompleteProp } from './../../types';
+import { InputPropsType, InputStylingPropsType, InputErrorProps, InputValueType } from '../Input';
+type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'min' | 'max' | 'readonly' | 'pattern' | 'errorMessage' | 'infoMessage' | 'title' | 'form' | 'autoComplete' | 'spellCheck' | 'keyboardType' | 'onChange'> & InputStylingPropsType & {
+    /** De waarde van de combobox */ value: T[];
+    /** Alle mogelijke opties in de combobox */ options: T[];
+    /** Is autocomplete aan op deze combobox? (default = `'off'` ) */ autoComplete?: AutoCompleteProp;
+    /** functie om het label in de combobox samen te stellen
+     * default:
+     */
+    formatLabel?: (value: T) => string;
+    /** functie om de waarde in de combobox samen te stellen (als niet-geopend) */
+    formatValue?: (value: T[]) => string;
+    /** callback voor calue changes */
+    onValueChanged?: (value: T[]) => void | Promise<void>;
+    /** Als we typen in de combobox, hoe moet er gezocht worden? Default doorzoeken we de `JSON.stringify`-string van de objecten */
+    onSearch?: (searchTxt: string, value: T) => boolean | Promise<void>;
+    /** foutmelding bij de input */ errorMessage?: string | ((s: InputErrorProps<T[]>) => string);
+    /** info-melding bij de input */ infoMessage?: string | ((v: InputValueType) => string);
+};
+/**
+ * Een MultiComboBox is een combi van een `<Select>` en een `<Input>`. Je kan een waarde uit een lijst kiezen, maar deze ook zoeken door hem in te typen.
+ * @example // Combobox met string values
+ * const options: string[] = users.slice(0, 100).map((item) => `${item.first_name} ${item.last_name}`);
+ * <MultiComboBox name="MultiComboBox"
+ *   value={value}
+ *   options={options}
+ *   onValueChanged={onChange}
+ *   onSearch={(txt, v) => v.includes(txt)}
+ * />
+ * @example // MultiComboBox met object values
+ * const options: User[] = users.slice(0, 100);
+ * <MultiComboBox<User>
+ *   name="MultiComboBox - Objects"
+ *   value={value2}
+ *   options={options2}
+ *   onValueChanged={onChange2}
+ *   formatLabel={(v) => `${v.first_name} ${v.last_name}`}
+ *   formatValue={(items) => items.map((v) => `${v.first_name} ${v.last_name}`).join(', ')}
+ *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
+ * />
+ */
+declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment: alignmentProp, size: sizeProp, direction: directionProp, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, iconRight, infoData, color, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+export { MultiComboBox };
+export type { MultiComboBoxProps };

package/dist/lib/forms/ComboBox/useComboBoxScroll.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+/** speciale use scroll handler voor de combobox */
+declare function useComboBoxScroll(focusIndex: number, container: React.RefObject<HTMLDivElement | null>, list: React.RefObject<HTMLUListElement | null>): void;
+export { useComboBoxScroll };

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

@@ -0,0 +1,50 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
+type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'pattern' | 'value' | 'type' | 'onValueChanged' | 'errorMessage' | 'infoMessage'> & InputStylingPropsType & {
+    /** waarde van de input. Als number of als number-string-tuple (zoals waarde uit `onValueChanged`) */
+    value?: number | undefined;
+    /** foutmelding bij de input */
+    errorMessage?: string | ((v: InputErrorProps) => string);
+    /** speciale informatie-tekst bij de input */
+    infoMessage?: string | ((v?: number) => string);
+    /** suffix achter het bedrag (default = `''`) */
+    suffix?: string;
+    /** prefix voor het bedrag (default = `''`) */
+    prefix?: string;
+    /** aantal getoonde decimalen _achter_ de integer, ook als dat 0 is! (default = `2`) */
+    decimalScale?: number;
+    /** Scheidingsteken gehele getallen en decimalen (default = `','` ) */
+    decimalSeparator?: ',' | '.';
+    /** scheidingsteken voor duizend-tallen, (default = `'.'`) */
+    groupSeparator?: '.' | ',';
+    /** negatieve getallen toestaan ? (default = `false`) */
+    allowNegativeValue?: boolean;
+    leadingZeros?: boolean;
+    /** 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<number>(0);
+     * return <MyCurrencyInput value={x} onValueChange={setX} {...props} />
+     */
+    onValueChanged?: (value: number) => void | Promise<void>;
+    /** value-changed callback met de nieuwe string-waarde van de input.     */
+    onStringValueChanged?: (value: string) => void | Promise<void>;
+};
+/** Een input speciaal voor bedragen. Geeft standaard een eur-teken weer met daarachter het ingevoerde bedrag.
+ * Het bedrag wordt als number-string-tuple opgeslagen, zodat het ook met een `setX()` van `const [x, setX] = React.useState()` kan worden gebruikt.
+ * De eerste waarde van de tuple is het bedrag als string, de tweede waarde is het bedrag als number. Deze laatste gaat **niet** altijd goed, daarom moeten we met strings werken ipv numbers.
+ * @param value waarde van de input. Als string of als number-string-tuple (zoals waarde uit `onValueChanged`)
+ * @param prefix prefix voo het bedrag (default = `'€ '`)
+ * @param suffix suffix achter het bedrag (default = `''`)
+ * @param decimalScale aantal getoonde decimalen _achter_ de integer, ook als dat 0 is! (default = `2`)
+ * @param decimalSeparator Scheidingsteken gehele getallen en decimalen (default = `','` )
+ * @param onValueChanged value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+ * @example // value is een tuple van [string, number] (het bedrag als number en het bedrag als string)
+ *  const [x, setX] = React.useState<[string, number]>([0, '0']);
+ *  <CurrencyInput value={x} onValueChanged={setX} />
+ * @example // value is een string
+ * const [x, setX] = React.useState<string>('0');
+ * <CurrencyInput value={x} onValueChanged={([strVal, _numVal]) => setX(strVal)} />
+ */
+declare function CurrencyInput({ allowNegativeValue, placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max: maxProp, min: minProp, inputRef, readonly, step, autofocus, iconRight, infoData, form, color, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, onStringValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, leadingZeros, }: CurrencyInputProps): import("react/jsx-runtime").JSX.Element;
+export { CurrencyInput };
+export type { CurrencyInputProps };

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

@@ -0,0 +1,37 @@
+import { StrictOmit } from './../../types';
+import { JSDateTime } from './../../utils/JSDateTime.class';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type DateInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
+    /**
+     * De waarde van de input
+     * - als string: `yyyy-MM-dd` of `yyyyMMdd` (deze laatste wordt automatisch omgezet naar `yyyy-MM-dd`)
+     * - als Date: `new Date()` object
+     * - als JSDateTime: `JSDateTime` object (from `loon-bulma-react`-library)
+     */
+    value?: string | Date | JSDateTime;
+    /** value of input changed. Get the value as a string (`yyyy-mm-dd`) */
+    onValueChanged?(newVal: string): void | Promise<void>;
+    /** value of input changed. Get the value as a javascript `Date` object */
+    onDateValueChanged?(newVal: Date): void | Promise<void>;
+    /** value of input changed. Get the value as a custom `JSDateTime` object (from `loon-bulma-react`-library) */
+    onJSDateTimeValueChanged?(newVal: JSDateTime): void | Promise<void>;
+};
+/**
+ * Date Input voor het selecteren van een datum.
+ * @param value Er zijn 3 manieren om de value op te geven
+ * - als string: `yyyy-MM-dd`
+ * - als Date: `new Date()` object
+ * - als JSDateTime: `JSDateTime` object (from `loon-bulma-react`-library)
+ *
+ * @param onValueChanged bestaat niet. Er zijn 3 callbacks voor de verschillende value types
+ * - onValueChanged: als string
+ * - onDateValueChanged: als Date
+ * - onJSDateTimeValueChanged: als JSDateTime
+ *
+ * @example <DateInput value="2020-01-01" {...props} onValueChanged={(v) => console.log(v)}/>
+ * @example <DateInput value={new Date()} {...props} onDateValueChanged={(v) => console.log(v)}/>
+ * @example <DateInput value={JSDateTime.now()} {...props} onJSDateTimeValueChanged={(v) => console.log(v)}/>
+ */
+declare function DateInput({ value, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export { DateInput };
+export type { DateInputProps };

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

@@ -0,0 +1,44 @@
+import { StrictOmit } from './../../types';
+import { JSDateTime } from './../../utils/JSDateTime.class';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type DateTimeInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
+    /** Moeten de secondes en de milliseconden ook getoond worden? (default = `'none'`)
+     * - `'both'`: secondes en milliseconden
+     * - `'seconds'`: alleen secondes
+     * - `'none'`: geen secondes of milliseconden
+     */
+    useSecAndMillis?: 'both' | 'seconds' | 'none';
+    /**
+     * De waarde van de input
+     * - als string: `hh:mm:ss` of `hh:mm`
+     * - als Date: `new Date()` object
+     * - als JSDateTime: `JSDateTime` object (from `loon-bulma-react`-library)
+     */
+    value?: string | Date | JSDateTime;
+    /** value of input changed. Get the value as a string (`yyyy-mm-dd`) */
+    onValueChanged?(newVal: string): void | Promise<void>;
+    /** value of input changed. Get the value as a javascript `Date` object */
+    onDateValueChanged?(newVal: Date): void | Promise<void>;
+    /** value of input changed. Get the value as a custom `JSDateTime` object (from `loon-bulma-react`-library) */
+    onJSDateTimeValueChanged?(newVal: JSDateTime): void | Promise<void>;
+};
+/**
+ * DateTime Input voor het selecteren van een datum en de tijd.
+ * @param value: Er zijn 3 manieren om de value op te geven
+ * - als string: `yyyy-MM-dd hh:mm:ss` of `yyyy-MM-dd hh:mm
+ * - als Date: `new Date()` object
+ * - als JSDateTime: `JSDateTime` object (from `loon-bulma-react`-library)
+ *
+ * @param onValueChanged bestaat niet. Er zijn 3 callbacks voor de verschillende value types
+ * - onValueChanged: als string
+ * - onDateValueChanged: als Date
+ * - onJSDateTimeValueChanged: als JSDateTime
+ *
+ * @param useSeconds Moeten de secondes ook getoont worden in de input? (Default = false)
+ * @example <DateTimeInput value="2020-01-01T12:00:00" onValueChanged={(val) => console.log(val)} />
+ * @example <DateTimeInput value={new Date()} onDateValueChanged={(val) => console.log(val)} />
+ * @example <DateTimeInput value={JSDateTime.now()} onJSDateTimeValueChanged={(val) => console.log(val)} />
+ */
+declare function DateTimeInput({ value, step, useSecAndMillis, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: DateTimeInputProps): import("react/jsx-runtime").JSX.Element;
+export { DateTimeInput };
+export type { DateTimeInputProps };

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

@@ -0,0 +1,42 @@
+import { StrictOmit } from './../../types';
+import { JSDateTime } from './../../utils/JSDateTime.class';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type TimeInputProps = StrictOmit<InputPropsType<string>, 'step' | 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
+    /** Moeten de secondes ook getoont worden in de input? (Default = false) */
+    useSeconds?: boolean;
+    /** Moeten de millsecondes ook getoont worden in de input? (Default = false) */
+    useMillis?: boolean;
+    /**
+     * De waarde van de input
+     * - als string: `hh:mm:ss` of `hh:mm`
+     * - als Date: `new Date()` object
+     * - als JSDateTime: `JSDateTime` object (from `loon-bulma-react`-library)
+     */
+    value?: string | Date | JSDateTime;
+    /** value of input changed. Get the value as a string (`hh:mm:ss` of `hh:mm`) */
+    onValueChanged?(newVal: string): void | Promise<void>;
+    /** value of input changed. Get the value as a javascript `Date` object */
+    onDateValueChanged?(newVal: Date): void | Promise<void>;
+    /** value of input changed. Get the value as a custom `JSDateTime` object (from `loon-bulma-react`-library) */
+    onJSDateTimeValueChanged?(newVal: JSDateTime): void;
+};
+/**
+ * Time Input voor het selecteren van een tijd.
+ * @param value: Er zijn 3 manieren om de value op te geven
+ * - als string: `hh:mm:ss` of `hh:mm`
+ * - als Date: `new Date()` object
+ * - als JSDateTime: `JSDateTime` object (from `loon-bulma-react`-library)
+ *
+ * @param onValueChanged bestaat niet. Er zijn 3 callbacks voor de verschillende value types
+ * - onValueChanged: als string
+ * - onDateValueChanged: als Date
+ * - onJSDateTimeValueChanged: als JSDateTime
+ *
+ * @param useSeconds Moeten de secondes ook getoont worden in de input? (Default = false)
+ * @example <TimeInput value="12:00:00" onValueChanged={(val) => console.log(val)} />
+ * @example <TimeInput value={new Date()} onDateValueChanged={(val) => console.log(val)} />
+ * @example <TimeInput value={JSDateTime.now()} onJSDateTimeValueChanged={(val) => console.log(val)} />
+ */
+declare function TimeInput({ value, useSeconds, useMillis, icon, onValueChanged, onDateValueChanged, onJSDateTimeValueChanged, ...props }: TimeInputProps): import("react/jsx-runtime").JSX.Element;
+export { TimeInput };
+export type { TimeInputProps };

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

@@ -0,0 +1,71 @@
+import { StrictOmit } from './../../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, color, formatter, }: FileInputProps): import("react/jsx-runtime").JSX.Element;
+export { FileInput };
+export type { FileInputProps, FileInputValue };