loon-bulma-react 2026.0.24 → 2026.0.26

package/dist/components/DragDrop/DragDropList.d.ts

@@ -39,6 +39,16 @@ type DragDropListProps<T> = {
     itemClassName?: string;
     /** Children moeten DragDropList.Handle en/of DragDropList.Buttons zijn om de layout te bepalen */
     children?: React.ReactNode;
+    /** Callback wanneer een item wordt gesleept */
+    onDragStart?: (item: T, index: number) => void;
+    /** Callback wanneer het slepen eindigt */
+    onDragEnd?: (draggedItem: T | null, droppedSuccessfully: boolean) => void;
+    /** Callback wanneer over an item wordt gesleept */
+    onDragOver?: (item: T, index: number) => void;
+    /** Callback wanneer het slepen een item verlaat */
+    onDragLeave?: () => void;
+    /** Callback wanneer een item wordt gedropt */
+    onDrop?: (draggedItem: T, targetItem: T, draggedIndex: number, targetIndex: number) => void;
 };
 /**
  * Een drag-and-drop lijst component waarmee items verticaal herschikt kunnen worden.
@@ -72,7 +82,7 @@ type DragDropListProps<T> = {
  * </DragDropList>
  * ```
  */
-export declare function DragDropList<T>({ items, onReorder, renderItem, keyExtractor, isDisabled, className, itemClassName, children }: DragDropListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DragDropList<T>({ items, onReorder, renderItem, keyExtractor, isDisabled, className, itemClassName, children, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, }: DragDropListProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DragDropList {
     var Handle: ({ children }: {
         children?: React.ReactNode;

package/dist/components/Panel/Panel.d.ts

@@ -49,6 +49,7 @@ type PanelInputProps<T extends InputValueType> = PrettierType<StrictOmit<InputPr
     icon?: string | IconProp | undefined;
     infoData?: string | React.ReactNode | ((helptag?: string | undefined) => void) | undefined;
     name?: string | undefined;
+    iconRight?: 'hidden' | 'visible' | ((v: InputValueType, isHovered: boolean, isDisabled: boolean, isLoading: boolean) => [IconComponent: React.ReactNode, onClick?: () => void]) | undefined;
 }>;
 /**
  * Een panel is een soort menu
@@ -93,6 +94,6 @@ declare const Panel: {
     /** Een input op het panel */
     Input: typeof PanelInput;
 };
-declare function PanelInput({ icon, id: idProp, infoData, helpTag, name, onBlur, onFocus, ...props }: PanelInputProps<string>): import("react/jsx-runtime").JSX.Element;
+declare function PanelInput({ icon, id: idProp, infoData, helpTag, name, loading, disabled, value, iconRight, onBlur, onFocus, ...props }: PanelInputProps<string>): import("react/jsx-runtime").JSX.Element;
 export { Panel };
 export type { PanelProps };

package/dist/components/TreeView/TreeView.d.ts

@@ -1,7 +1,28 @@
 import React from 'react';
-import { StrictOmit } from './../../types';
+import { DeepPartial, StrictOmit } from './../../types';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
 type InitialStateParams = 'expanded' | 'collapsed' | 'auto';
+type GlobalExpandStateParams = 'expanded' | 'collapsed';
 type SearchBehaviorParams = 'hide' | 'dim';
+type GlobalExpandCommand = {
+    state: GlobalExpandStateParams | 'expandToLevel';
+    nonce: number;
+    level?: number;
+};
+type TreeViewRef = {
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToLevel: (depth: number) => void;
+};
+/** icon-set voor de treeview */
+type IconSet = {
+    /** icon voor node die je kan expanden (default: chevron Down) */
+    expand: IconProp;
+    /** icon voor node die momenteel is uitgebreid (default: chevron Up) */
+    collapse: IconProp;
+    /** icon voor node zonder kinderen (default: Min-teken) */
+    noChildren: IconProp;
+};
 /** De basis-props voor de nodes en de items */
 type BaseProps = {
     /** het path naar deze node*/
@@ -23,6 +44,10 @@ type InternTreeViewProps<T extends unknown = string> = BaseProps & {
     /** Data in de treeview */
     nodes?: Array<TreeViewNode<T>>;
     expanded: boolean;
+    /** internal command for expand/collapse actions */
+    globalExpandCommand?: GlobalExpandCommand;
+    /** initial path to select/open */
+    initialPath?: string;
     /** initial expanded/collapsed state of parent */
     parentInitialState?: InitialStateParams;
     /** search term to filter nodes */
@@ -31,6 +56,8 @@ type InternTreeViewProps<T extends unknown = string> = BaseProps & {
     searchBehavior?: SearchBehaviorParams;
     /** Custom search function to determine if a node matches the search term */
     searchFn?: (node: TreeViewNode<T>, searchTerm: string) => boolean;
+    /** expand/collapse/noChildren icons */
+    icons: IconSet;
 };
 type TreeViewNode<T extends unknown = string> = {
     /** de value van deze node (default een string, maar generic) */
@@ -69,7 +96,7 @@ type TreeViewNode<T extends unknown = string> = {
     searchable?: string | ((value: T) => string);
 };
 /** Props voor de TreeView */
-type TreeViewProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<T>, 'path' | 'hoveredPath' | 'setHoveredPath' | 'selectedPath' | 'setSelectedPath' | 'expanded'> & {
+type TreeViewRootProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<T>, 'path' | 'hoveredPath' | 'setHoveredPath' | 'selectedPath' | 'setSelectedPath' | 'expanded' | 'icons'> & {
     /** initial path to expand */
     initialPath?: string;
     /** Zoekterm om de nodes te doorzoeken */
@@ -87,6 +114,12 @@ type TreeViewProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<
      * @returns true if the node matches the search term
      */
     searchFn?: (node: TreeViewNode<T>, searchTerm: string) => boolean;
+    /** Icon set for the TreeView: 3 properties:
+     * - `expand`: icon voor node die je kan expanden (default: chevron Down)
+     * - `collapse`: icon voor node die momenteel is uitgebreid (default: chevron Up)
+     * - `noChildren`: icon voor node zonder kinderen (default: Min-teken)
+     */
+    icons?: DeepPartial<IconSet>;
 };
 /**
  *  TreeView component om hiërarchische data weer te geven.
@@ -103,8 +136,50 @@ type TreeViewProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<
  *    initialPath="/Root/Item 1/Item 1.1/Item 1.1.2"
  *    searchTerm={term}
  *    searchBehavior={behavior} />
+ * @example // Gebruik van useTreeViewControls hook voor expandAll/collapseAll
+ * function Demo() {
+ *   const { treeRef, expandAll, collapseAll } = useTreeViewControls();
+ *
+ *   return (
+ *     <>
+ *       <Buttons>
+ *         <Button onClick={expandAll}>Expand all</Button>
+ *         <Button onClick={collapseAll}>Collapse all</Button>
+ *       </Buttons>
+ *
+ *       <TreeView ref={treeRef} nodes={data} />
+ *     </>
+ *   );
+ * }
+
  */
-declare function TreeViewRoot<T extends unknown = string>({ className: cn, style, initialPath, nodes: data, searchTerm, searchBehavior, searchFn, }: TreeViewProps<T>): import("react/jsx-runtime").JSX.Element;
-declare function TreeViewNode<T extends unknown = string>({ className: cnProp, style, path, expanded, hoveredPath, setHoveredPath, selectedPath, setSelectedPath, nodes, parentInitialState, searchTerm, searchBehavior, searchFn, }: InternTreeViewProps<T>): import("react/jsx-runtime").JSX.Element;
-export type { TreeViewProps, TreeViewNode };
-export { TreeViewRoot as TreeView };
+declare const TreeViewRoot: <T extends unknown = string>(props: TreeViewRootProps<T> & React.RefAttributes<TreeViewRef>) => React.ReactElement;
+declare function TreeViewNode<T extends unknown = string>({ className: cnProp, style, path, expanded, globalExpandCommand, initialPath, hoveredPath, setHoveredPath, selectedPath, setSelectedPath, nodes, parentInitialState, searchTerm, searchBehavior, icons, searchFn, }: InternTreeViewProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook om de `TreeView` imperatief aan te sturen met `expandAll`, `collapseAll`, en `expandToLevel`.
+ *
+ * @example
+ * function Demo() {
+ *   const { treeRef, expandAll, collapseAll, expandToLevel } = useTreeViewControls();
+ *
+ *   return (
+ *     <>
+ *       <Buttons>
+ *         <Button onClick={expandAll}>Expand all</Button>
+ *         <Button onClick={collapseAll}>Collapse all</Button>
+ *         <Button onClick={() => expandToLevel(2)}>Show 2 levels</Button>
+ *       </Buttons>
+ *
+ *       <TreeView ref={treeRef} nodes={data} />
+ *     </>
+ *   );
+ * }
+ */
+declare function useTreeViewControls(): {
+    treeRef: React.RefObject<TreeViewRef | null>;
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToLevel: (depth: number) => void;
+};
+export type { TreeViewRootProps as TreeViewProps, TreeViewNode, TreeViewRef };
+export { TreeViewRoot as TreeView, useTreeViewControls };

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

@@ -1,7 +1,7 @@
 import { StrictOmit, ColorProp } from './../../types';
 import React from 'react';
 import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
-type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'pattern' | 'placeholder' | 'hideIconRight'> & StrictOmit<InputStylingPropsType, 'icon'> & {
+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. */
@@ -10,6 +10,7 @@ type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' |
     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.

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

@@ -39,6 +39,6 @@ type ComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number |
  *   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, hideIconRight, labelHidden, icon, infoData, className: cn, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, formatOption, }: ComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+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, 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/forms/ComboBox/MultiComboBox.d.ts

@@ -39,6 +39,6 @@ type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<numb
  *   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, hideIconRight, infoData, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
+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, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): import("react/jsx-runtime").JSX.Element;
 export { MultiComboBox };
 export type { MultiComboBoxProps };

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

@@ -14,9 +14,9 @@ type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'p
     /** aantal getoonde decimalen _achter_ de integer, ook als dat 0 is! (default = `2`) */
     decimalScale?: number;
     /** Scheidingsteken gehele getallen en decimalen (default = `','` ) */
-    decimalSeparator?: string;
+    decimalSeparator?: ',' | '.';
     /** scheidingsteken voor duizend-tallen, (default = `'.'`) */
-    groupSeparator?: string;
+    groupSeparator?: '.' | ',';
     /** negatieve getallen toestaan ? (default = `false`) */
     allowNegativeValue?: boolean;
     leadingZeros?: boolean;
@@ -45,6 +45,6 @@ type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'p
  * 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, min, inputRef, readonly, step, autofocus, hideIconRight, infoData, form, 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;
+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, 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/forms/Datetimes/DateInput.d.ts

@@ -4,7 +4,7 @@ import { InputPropsType, InputStylingPropsType } from '../Input';
 type DateInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
     /**
      * De waarde van de input
-     * - als string: `yyyy-MM-dd`
+     * - 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)
      */

package/dist/forms/Input.d.ts

@@ -17,7 +17,19 @@ export type InputErrorProps<T = InputValueType> = {
     /** is deze input readonly? */
     readonly: boolean;
 };
-type InputValueType = string | number | readonly string[] | undefined;
+/**
+ * Stel een icoon (met wat extra settings) samen voor gebruik aan de rechterkant van een Input.
+ * @param v de value van de input
+ * @param hovered is de input momenteel hovered?
+ * @param disabled is de input momenteel disabled?
+ * @param loading is de input momenteel loading?
+ * @param focused is de input momenteel focused?
+ * @return een tuple: `[icon: React.Reactnode]` of `[icon: React.ReactNode, onClick:() => void]`.
+ * - 1e item `ReactNode` MOET van het component-type `<Icon icon={...} />` zijn!
+ * - 2e item`onClick` is optioneel en is een callback voor een click op het icon.
+ */
+export type InputIconRightFn<T extends InputValueType = InputValueType> = (v: T | undefined, hovered: boolean, disabled: boolean, loading: boolean, focused: boolean) => [IconComponent: React.ReactNode, onClick?: () => void];
+type InputValueType = string | number | string[] | 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;
@@ -26,7 +38,7 @@ type InputStylingPropsType = {
     /** (optioneel) icon op de input */ icon?: IconProp | string | undefined | null;
     infoData?: string | React.ReactNode | ((helptag?: string | undefined) => void) | undefined;
 };
-type InputPropsType<T = InputValueType> = {
+type InputPropsType<T extends InputValueType = InputValueType> = {
     optionList?: string[] | Array<{
         value: string;
         label: string;
@@ -40,7 +52,7 @@ type InputPropsType<T = InputValueType> = {
     /** (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;
+    /** waarde voor de input */ value?: T;
     /** 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;
@@ -97,8 +109,20 @@ type InputPropsType<T = InputValueType> = {
     /** 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` */
+    /**
+     * `hidden`: geen icon rechts
+     * `visible`: standaard gedrag, een check of een error icoon, of een info icoon als showInfo/infoData is meegegeven
+     * De functie is apart. Die returned een tuple. __LET OP: ALS JE DEZE GEBRUIKT, HEB JE NIET MEER DE NORMALE HELP-FUNCTIONALITEIT__
+     * - 1e item een ReactNode teruggeven van het type `<Icon icon={...} />`, voor het icon.
+     * - 2e item (optioneel) een onClick functie, als het icon klikbaar moet zijn. Die __MOET__ op de container, daarom niet in de component zelf.
+     * De functie wordt aangeroepen met de volgende parameters:
+     * - `value`: de value van de input
+     * - `hovered`: is de input momenteel hovered?
+     * - `disabled`: is de input momenteel disabled?
+     * - `loading`: is de input momenteel loading?
+     * - `focused`: is de input momenteel focused?
+     */
+    iconRight?: 'hidden' | 'visible' | InputIconRightFn<T> | undefined;
     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>;
@@ -200,7 +224,7 @@ declare function BaseInput<T extends InputValueType = string>({ alignment: align
  * | 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;
+declare function Input<T extends InputValueType = string>({ direction: directionProp, errorMessage, infoMessage, showRequiredOnLabel, iconRight, 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;

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

@@ -0,0 +1,95 @@
+import { StrictOmit } from './../../types';
+import { IbanCountryCode, IbanGegevens } from './../../utils/IBAN.functions';
+import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
+export type IBANInputErrorCode = '' | 'unknown_country' | 'unsupported_country' | 'incomplete' | 'invalid_format' | 'invalid_length' | 'invalid_structure' | 'invalid_checksum' | 'disallowed_country';
+export type IBANInputValidationResult = {
+    /** De schone IBAN-waarde (uppercase, geen spaties) */
+    value: string;
+    /** De geformatteerde IBAN-waarde (met spaties elke 4 tekens) */
+    formatted: string;
+    /** Of de IBAN geldig is */
+    isValid: boolean;
+    /** Error code bij ongeldig, lege string bij geldig */
+    errorCode: IBANInputErrorCode;
+    /** ISO country code (bijv. 'NL', 'DE', '') */
+    countryCode: string;
+    /** Volledige country name (bijv. 'Netherlands', 'Germany', '') */
+    countryName: string;
+    /** Of dit land onderdeel is van SEPA */
+    isSepa: boolean;
+    /** De 2-cijferige check digits */
+    checkDigits: string;
+    /** Basic Bank Account Number (alles na country code en check digits) */
+    bban: string;
+    /** Verwachte IBAN-lengte voor dit land (0 als onbekend) */
+    expectedLength: number;
+    /** Huidige lengte van de opgeschoonde IBAN */
+    currentLength: number;
+    /** Bank code (eerste 4 tekens van BBAN voor de meeste landen, leeg indien niet van toepassing) */
+    bankCode: string;
+    /** Of de IBAN de verwachte lengte heeft bereikt */
+    isComplete: boolean;
+    /** Of volledige validatie wordt ondersteund voor dit land */
+    isSupported: boolean;
+};
+export type IBANInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'pattern'> & InputStylingPropsType & {
+    /**
+     * Allowed countries voor IBAN validatie.
+     * Kan zijn:
+     * - Een array met country codes (uppercase of lowercase): `['NL', 'DE']` of `['nl', 'de']`
+     * - Een predicate function: `(code, details) => details.sepa`
+     * Als niet opgegeven, zijn alle landen toegestaan.
+     * @example ['NL', 'DE']
+     * @example (code, details) => details.sepa && code !== 'RU'
+     */
+    allowCountries?: (Uppercase<IbanCountryCode> | Lowercase<IbanCountryCode>)[] | ((code: IbanCountryCode, details: IbanGegevens) => boolean);
+    /**
+     * Wordt aangeroepen bij value changes met gedetailleerde validation info
+     * @param result Object met value, formatted, isValid en errorCode
+     * @example onValueChangedObj={(result) => console.log(result.errorCode, result.isValid)}
+     */
+    onValueChangedObj?: (result: IBANInputValidationResult) => void;
+    /**
+     * Error message om te tonen. Kan zijn:
+     * - Een string voor een vaste error message (component valideert dan niet meer zelf)
+     * - Een function die InputErrorProps ontvangt, uitgebreid met ibanErrorCode en ibanValidationResult
+     * Als niet opgegeven of als de function een lege string teruggeeft, worden default IBAN error messages getoond
+     * Let op: bij een string betekent een lege string "geen error"
+     * @example errorMessage={(props) => props.ibanErrorCode === 'incomplete' ? 'Vul het IBAN compleet in' : ''}
+     * @example errorMessage={(props) => props.ibanValidationResult?.bankName ? `Bank: ${props.ibanValidationResult.bankName}` : ''}
+     */
+    errorMessage?: string | ((props: InputErrorProps & {
+        ibanErrorCode?: IBANInputErrorCode;
+        ibanValidationResult?: IBANInputValidationResult;
+    }) => string);
+};
+/**
+ * Een input voor een IBAN. Deze input heeft validatie, formatting en country filtering.
+ * @example <IBANInput name="iban" value={iban} onValueChanged={setIban} />
+ * @example
+ * // Met custom error messages
+ * <IBANInput
+ *   name="iban"
+ *   value={iban}
+ *   onValueChanged={setIban}
+ *   errorMessage={(props) => {
+ *     switch (props.ibanErrorCode) {
+ *       case 'incomplete': return 'Vul het IBAN compleet in';
+ *       case 'invalid_checksum': return 'Controleer de cijfers';
+ *       default: return '';
+ *     }
+ *   }}
+ * />
+ * @example
+ * // Met toegang tot validation result
+ * <IBANInput
+ *   errorMessage={(props) => {
+ *     const result = props.ibanValidationResult;
+ *     if (result?.bankName) return `Bank: ${result.bankName}`;
+ *     if (result?.countryName) return `Land: ${result.countryName} (${result.currentLength}/${result.expectedLength})`;
+ *     return '';
+ *   }}
+ * />
+ * @param autoComplete de autocomplete type (password managers) (default = `cc-number`)
+ */
+export declare function IBANInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, inputRef, readonly, autofocus, iconRight, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, direction: directionProp, labelHidden, loading, icon, allowCountries, onValueChangedObj, ...props }: IBANInputProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,9 @@
 import { StrictOmit } from './../../types';
 import { InputPropsType, InputStylingPropsType } from '../Input';
 type NumberInputProps = StrictOmit<InputPropsType<number>, 'type' | 'spellCheck'> & InputStylingPropsType & {
+    /** prefix voor de waarde (in de input zelf) */
     prefix?: string;
+    /** suffix voor de waarde (in de input zelf) */
     suffix?: string;
 };
 /**
@@ -9,6 +11,6 @@ type NumberInputProps = StrictOmit<InputPropsType<number>, 'type' | 'spellCheck'
  * @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;
+declare function NumberInput({ value, prefix, suffix, icon, name, id: idProp, label, direction: directionProp, size: sizeProp, alignment: alignmentProp, required, disabled, readonly, loading, labelHidden, showRequiredOnLabel, iconRight, className: extraClasses, infoData, helpTag, errorMessage, infoMessage, min: minProp, max: maxProp, onValueChanged, onBlur, onFocus, ...props }: NumberInputProps): import("react/jsx-runtime").JSX.Element;
 export { NumberInput };
 export type { NumberInputProps };

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

@@ -1,6 +1,6 @@
 import { StrictOmit } from './../../types';
 import { InputPropsType, InputStylingPropsType } from '../Input';
-type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoComplete' | 'type' | 'spellCheck' | 'placeholder' | 'hideIconRight'> & StrictOmit<InputStylingPropsType, 'alignment' | 'icon'> & {
+type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoComplete' | 'type' | 'spellCheck' | 'placeholder' | 'iconRight'> & 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 = `''`) */

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

@@ -32,7 +32,7 @@ type RadioGroupProps<T extends RBValueType = string> = StrictOmit<InputStylingPr
     /** callback voor typen */
     onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
 };
-type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel' | 'hideIconRight'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
+type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel' | 'iconRight'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
     /** label van de Radio Button. Als niet gedefinieerd, wordt de `name`-prop gebruikt */
     children: React.ReactNode;
     /** de waarde van de radiobutton */

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

@@ -110,9 +110,9 @@ type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPr
  * ..</Select.OptGroup>
  * </Select>
  */
-declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment: alignmentProp, size: sizeProp, direction: directionProp, hideIconRight, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment: alignmentProp, size: sizeProp, direction: directionProp, iconRight, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Select {
-    var Option: ({ value, disabled, id, children, }: {
+    var Option: ({ value, disabled, id, children }: {
         id?: string;
         value?: number | string;
         disabled?: boolean;

package/dist/forms/TagsInput/TagsInput.d.ts

@@ -1,6 +1,6 @@
 import { StrictOmit, ColorProp } from './../../types';
 import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
-type TagsInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'onChange' | 'value' | 'onValueChanged' | 'max' | 'min' | 'inputRef' | 'errorMessage'> & InputStylingPropsType & {
+type TagsInputProps = StrictOmit<InputPropsType<string[]>, 'type' | 'step' | 'onChange' | 'value' | 'onValueChanged' | 'max' | 'min' | 'inputRef' | 'errorMessage'> & InputStylingPropsType & {
     /** de values (dus de tags) van het input field */
     value?: string[] | undefined;
     /** mogen tags meerdere keren voorkomen (2 tags met dezelfde tekst). default = `false` */
@@ -39,6 +39,6 @@ type TagsInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'onCh
  * </Section>
  * @returns
  */
-declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction: directionProp, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size: sizeProp, alignment: alignmentProp, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, hideIconRight, title, className: extraClasses, styles, randomColors, maxTags, infoData, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): import("react/jsx-runtime").JSX.Element;
+declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction: directionProp, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size: sizeProp, alignment: alignmentProp, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, iconRight, title, className: extraClasses, styles, randomColors, maxTags, infoData, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): import("react/jsx-runtime").JSX.Element;
 export { TagsInput };
 export type { TagsInputProps };

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

@@ -49,6 +49,6 @@ type FormattedInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' |
  *  );
  *}
  */
-declare function FormattedInput({ placeholder, helpTag, errorMessage, infoMessage, disabled, title, required, showRequiredOnLabel, spellCheck, autoComplete, max, min, readonly, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, size: sizeProp, alignment: alignmentProp, direction: directionProp, hideIconRight, labelHidden, loading, value, icon, groupBy, divider, name, label, id, casing, onValueChanged, onFormat, }: FormattedInputProps): import("react/jsx-runtime").JSX.Element;
+declare function FormattedInput({ placeholder, helpTag, errorMessage, infoMessage, disabled, title, required, showRequiredOnLabel, spellCheck, autoComplete, max, min, readonly, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, size: sizeProp, alignment: alignmentProp, direction: directionProp, iconRight, labelHidden, loading, value, icon, groupBy, divider, name, label, id, casing, onValueChanged, onFormat, }: FormattedInputProps): import("react/jsx-runtime").JSX.Element;
 export { FormattedInput };
 export type { FormattedInputProps };

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

@@ -14,6 +14,6 @@ type PasswordInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> &
  * @param revealPasswordMsg boodschap bij de checkbox. Default is `Toon wachtwoord`
  * @param iconRevealed icon voor ww revealed. Default is `faEye`
  */
-declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, showRequiredOnLabel, labelHidden, size: sizeProp, direction: directionProp, revealPasswordAllowed, disabled, readonly, hideIconRight, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, loading, showRequiredOnLabel, labelHidden, size: sizeProp, direction: directionProp, revealPasswordAllowed, disabled, readonly, iconRight, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
 export { PasswordInput };
 export type { PasswordInputProps };

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

@@ -1,7 +1,7 @@
 import { StrictOmit } from './../../types';
 import React from 'react';
 import { InputPropsType, InputStylingPropsType } from '../Input';
-type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'keyboardType' | 'step' | 'pattern' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'hideIconRight'> & StrictOmit<InputStylingPropsType, 'icon'> & {
+type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'keyboardType' | 'step' | 'pattern' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'iconRight'> & StrictOmit<InputStylingPropsType, 'icon'> & {
     /** (optionele) `ref` voor gebruik met `React.useRef<HTMLTextAreaElement>` */
     inputRef?: React.RefObject<HTMLTextAreaElement>;
     /** aantal rijen voor de textarea */ rows?: number;

package/dist/hooks/useLocalStoredState.d.ts

@@ -32,5 +32,5 @@ type UseLocalStoredStateFn<T = string> = {
  * // 6. close the browser / tab
  * // 7. check the value in session storage. it should still be there.
  */
-declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T, (value: T) => void, () => void];
+declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize, }: UseLocalStoredStateFn<T>): readonly [T, (value: T) => void, () => void];
 export { useLocalStoredState };

package/dist/hooks/useSessionStoredState.d.ts

@@ -34,5 +34,5 @@ type UseSessionStoredState<T = string> = {
  * // 6. close the browser / tab
  * // 7. check the value in session storage. it should be gone.
  */
-declare function useSessionStoredState<T extends unknown = {}>({ key, initialValue, deserialize, serialize }: UseSessionStoredState<T>): readonly [T, (value: T) => void, () => void];
+declare function useSessionStoredState<T extends unknown = {}>({ key, initialValue, deserialize, serialize, }: UseSessionStoredState<T>): readonly [T, (value: T) => void, () => void];
 export { useSessionStoredState };

package/dist/index.d.ts

@@ -56,7 +56,8 @@ export type { TagProps, TagsProps } from './components/Tag/Tag';
 export { TimeLine } from './components/TimeLine/TimeLine';
 export type { TimeLineProps, TimeLineItemProps, TimeLinePointProps } from './components/TimeLine/TimeLine';
 export { TreeView } from './components/TreeView/TreeView';
-export type { TreeViewProps, TreeViewNode } from './components/TreeView/TreeView';
+export { useTreeViewControls } from './components/TreeView/TreeView';
+export type { TreeViewProps, TreeViewNode, TreeViewRef } from './components/TreeView/TreeView';
 export { H1, H2, H3, H4, H5, H6 } from './components/Titles/Titles';
 export { QuickView } from './components/QuickView/QuickView';
 export type { QuickViewProps } from './components/QuickView/QuickView';
@@ -122,6 +123,8 @@ export { FileInput } from './forms/File/FileInput';
 export type { FileInputProps, FileInputValue } from './forms/File/FileInput';
 export { CurrencyInput } from './forms/Currency/CurrencyInput';
 export type { CurrencyInputProps } from './forms/Currency/CurrencyInput';
+export { IBANInput } from './forms/MaskedInput/IBANInput';
+export type { IBANInputProps } from './forms/MaskedInput/IBANInput';
 export { WeekInput } from './forms/Periodes/WeekInput';
 export type { WeekInputProps, WeekInputString } from './forms/Periodes/WeekInput';
 export { MonthInput } from './forms/Periodes/MonthInput';