loon-bulma-react 2023.1.0 → 2023.1.1

package/dist/index.d.ts

@@ -1,6 +1,4348 @@
-export * from './loon-react-bulma-types';
-export * from './components';
-export * from './forms';
-export * from './contexts';
-export * from './hooks';
-export * from './utils';
+import React$1, { CSSProperties, ReactNode } from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { JSONContent } from '@tiptap/react';
+
+/** Types waar de size van een component van belang is (default is meestal Medium (`'m'`))
+ * - De `<Tag>`-component gebruikt een speciale `TagSizeProp`. Er is voor tags geen `xl`-size
+ * - In bulma bestaat `'xl'` niet. Daarom is `'l'` in bulma `'medium'` en `'xl'` in in bulma `'large'`
+ */
+type SizeProp = 's' | 'm' | 'l' | 'xl';
+/** Type waarbij je de alignment van (meestal de content) kan instellen: (l)eft, (c)enter, (r)ight.
+ * Default is meestal left (l)) */
+type AlignmentProp = 'l' | 'c' | 'r';
+/** Type voor de bulma-kleuren: (p)rimary, (i)nfo, (s)uccess, (d)anger, (w)arning, (l)ink.
+ * Als bulma niet alleen de default kleuren gebruikt, kan je ook andere kleuren uit bulma
+ * gebruiken met een string (structuur `is-${string}`) optie.
+ * TODO: Als microbundle de typescript-versie update: gebruik de template literal ipv een string
+ */
+type ColorProp = 'p' | 'i' | 's' | 'd' | 'w' | 'l' | string;
+/** Type voor het instellen van de alignment van tekst: (l)eft, (c)enter, (r)ight. Default is meestal left (l))
+ */
+type TextAlignmentProp = 'l' | 'c' | 'r';
+/** Positie voor items: (l)eft, (r)ight, (t)op, (b)ottom */
+type PositionProp$1 = 'l' | 'r' | 't' | 'b';
+/** Input modus voor virtuele toetsenborden (smartphones, tablets) */
+type KeyboardTypeProp = 'numeric' | 'decimal' | 'tel' | 'search' | 'url' | 'email' | 'text';
+/** Coordinaten - gebruikt voor ContextMenu */
+type CoordinatesProp = {
+    x: number;
+    y: number;
+    z?: number;
+};
+/** Rectangle - gebruikt voor ContextMenu */
+type RectProp = {
+    width: number;
+    height: number;
+};
+/** Tags gebruiken andere sizes dan de gewone sizes van de `SizeProp`. Er is geen `'xl'`-variant */
+type TagSizeProp = 's' | 'm' | 'l';
+/** Direction prop voor inputs */
+type DirectionProp = 'h' | 'horizontal' | 'v' | 'vertical';
+/** Link Relationship types */
+type RelationshipProp = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'prefetch' | 'prev' | 'search';
+/** Check Radio styling types */
+type CheckradioStylingType = 'rounded' | 'noborder' | 'colored' | 'blocky';
+/** Indicator positie
+ * - `tl` = `top-left`
+ * - `tr` = `top-right`
+ * - `tc` = `top-center`
+ * - `bl` = `bottom-left`
+ * - `br` = `bottom-right`
+ * - `bc` = `bottom-center`
+ * - `lc` = `left-center`
+ * - `rc` = `right-center`
+ */
+type IndicatorPositionProp = 'tl' | 'tr' | 'tc' | 'bl' | 'br' | 'bc' | 'lc' | 'rc' | 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'left-center' | 'right-center';
+/** Autocomplete-types voor bijvoorbeeld password-managers.
+ * Programma's zoals bijvoorbeeld 1Password gebruiken deze om te bepalen waar dit veld mee gevuld moet worden.
+ * **LET OP:** `off` wordt door sommige browsers genegeerd (eikels). Gebruik `nope` als je *ECHT* geen autocomplete wil.
+ * */
+type AutoCompleteType = 'on' | 'off' | 'nope' | 'current-password' | 'new-password' | 'username' | 'given-name' | 'additional-name' | 'family-name' | 'nickname' | 'email' | 'name' | 'one-time-code' | 'organization' | 'street-address' | 'tel' | 'bday' | 'language' | 'country' | 'postal-code';
+/** Vaste (per jaar verschillende) kleuren die gebruikt worden binnen `loon-bulma-react` voor als we GEEN css kunnen gebruiken. */
+declare const enum DefinedHexColors {
+    Primary = "#0089b6",
+    Info = "#3b59ec",
+    Link = "2f47bc",
+    Success = "#519c43",
+    Danger = "#d91000",
+    Warning = "#eea720"
+}
+
+/** Props voor een aspect-ratio */
+type AspectRatioProps = {
+    /** De ratio (width x height) van het gewenste element */
+    ratio: '1by1' | '5by4' | '4by5' | '4by3' | '3by4' | '3by2' | '2by3' | '5by3' | '3by5' | '16by9' | '9by16' | '2by1' | '1by2' | '3by1' | '1by3';
+    /** Het item dat aan de aspect-ratio moet voldoen */
+    children: React$1.ReactNode;
+    /** ? */
+    caption?: {
+        placement: 'top' | 'bottom';
+        text: string;
+    };
+    /** Extra classes on aspect-ratio-element */
+    className?: string;
+};
+/**
+ * Gebruik een aspect-ratio voor een bepaald resizable element, waar een width en height bij hoort.
+ * Zoals bijvoorbeeld een iframe, img, etc
+ * @param props
+ * @returns een aspect-ratio'd element.
+ * @example
+ * <AspectRatio ratio="16by9" >
+ *   <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ">
+ * </AspectRatio>
+ */
+declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): JSX.Element;
+
+type BoxProps = {
+    /** De children van de box */
+    children: React$1.ReactNode;
+    /** Andere classes om op de box toe te passen */
+    className?: string;
+    /** Style props direct op de box */
+    styles?: CSSProperties;
+};
+/**
+ * Maak een witte box om andere elementen heen. Voor forms of modals. Heeft een beetje schaduw.
+ * @see {@link https://bulma.io/documentation/elements/box/}
+ * @param {{children: any, classes?: string|string[]}} props
+ * @returns een witte box om elementen.
+ * @example <Box>This is a box</Box>
+ */
+declare const Box: ({ children, className: classes, styles }: BoxProps) => JSX.Element;
+
+type ColumnsProps = {
+    /** Children van de Columns. Moeten van het type @see Column zijn */
+    children: React$1.ReactNode;
+    /** De gap-grootte (stappen van .25rem), een margin tussen kolommen (default = 3, 0.75rem) */
+    gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | undefined;
+    /** Mogen de kolommen over meerdere rijen verdeeld worden */
+    multiline?: boolean;
+    /** Moeten de kolom centraal aligned worden */
+    centered?: boolean;
+    /** Extra classes voor dit element */
+    className?: string;
+    /** Set de styling direct */
+    styles?: CSSProperties;
+};
+/**
+ * Verdeel een pagina in kolommen, children zijn van het type {@link Column } voor het maken van de kolommen.
+ *
+ * Kijk op {@link https://bulma.io/documentation/columns/sizes/} voor de bulma-uitleg.
+ * @param {ColumnProps} props
+ * @returns Columns component which can be used to create a column layout.
+ * @example
+ * <Columns>
+ *   <Column>This is a column</Column>
+ *   <Column>This is a column</Column>
+ *   <Column narrow>This is a narrow column</Column>
+ * </Columns>
+ */
+declare function Columns({ children, gap, multiline, centered, className: classes, styles }: ColumnsProps): JSX.Element;
+
+type ColumnProps = {
+    /** De inhoud van de column */
+    children: React$1.ReactNode;
+    /** Extra classes op deze kolom */
+    className?: string;
+    /** Zet de styling direct */
+    styles?: CSSProperties;
+};
+type ExpandedColumnProps = ColumnProps & {
+    /** Is deze kolom zo smal mogelijk of vanaf welke schermmaat */
+    narrow?: boolean | 'mobile' | 'tablet' | 'touch' | 'desktop' | 'widescreen' | 'fullhd';
+};
+/**
+ * Standaard kolom voor gebruik in {@link Columns}.
+ * Als voor narrow een waarde is meegegeven, wordt de minimale ruimte voor deze kolom aangehouden: https://bulma.io/documentation/columns/sizes/
+ * @return Een kolom
+ * @example
+ * <Column>This is a column</Column>
+ * <Column narrow>This is a narrow column</Column>
+ */
+declare const Column: {
+    (props: ExpandedColumnProps): JSX.Element;
+    /** Column full width of parent
+     * @returns een kolom met de maximale breedte van de parent 'Columns'
+     * @example <Column.Full>This is a full column</Column.Full>
+     */
+    Full(props: ColumnProps): JSX.Element;
+    /** Column 1/2 width of parent
+     * @returns een kolom met de halve breedte van de parent 'Columns'
+     * @example <Column.Half>This is a half column</Column.Half>
+     */
+    Half(props: ColumnProps): JSX.Element;
+    /** Spread columns based on thirds (1/3, 2/3) */
+    Thirds: {
+        /** Column  1/3 width of parent
+         * @returns een kolom met 1/3 breedte van de parent 'Columns'
+         * @example <Column.Thirds.One>This is a first third column</Column.Thirds.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/3 width of parent
+         * @returns een kolom met 2/3 breedte van de parent 'Columns'
+         * @example <Column.Thirds.Two>This is a second third column</Column.Thirds.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+    };
+    /** Spread columns based on quarters (1/4, 2/4, 3/4) */
+    Quarters: {
+        /** Column  1/4 width of parent
+         * @returns een kolom met 1/4 breedte van de parent 'Columns'
+         * @example <Column.Quarters.One>This is a 1/4 column</Column.Quarters.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/4 width of parent
+         * @returns een kolom met 2/4 breedte van de parent 'Columns'
+         * @example <Column.Quarters.Two>This is a 2/4 column</Column.Quarters.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+        /** Column  3/4 width of parent
+         * @returns een kolom met 3/4 breedte van de parent 'Columns'
+         * @example <Column.Quarters.Three>This is a 3/4 column</Column.Quarters.Three>
+         */
+        Three: (props: ColumnProps) => JSX.Element;
+    };
+    /** Spread columns based on fifths (1/5, 2/5, 3/5, 4/5) */
+    Fifths: {
+        /** Column  1/5 width of parent
+         * @returns een kolom met 1/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.One>This is a 1/5 column</Column.Fifths.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/5 width of parent
+         * @returns een kolom met 2/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.Two>This is a 2/5 column</Column.Fifths.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+        /** Column  3/5 width of parent
+         * @returns een kolom met 3/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.Three>This is a 3/5 column</Column.Fifths.Three>
+         */
+        Three: (props: ColumnProps) => JSX.Element;
+        /** Column  4/5 width of parent
+         * @returns een kolom met 4/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.Four>This is a 4/5 column</Column.Fifths.Four>
+         */
+        Four: (props: ColumnProps) => JSX.Element;
+    };
+    Twelves: {
+        /** Column  1/12 width of parent
+         * @returns een kolom met 1/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.One>This is a 1/12 column</Column.Twelves.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/12 width of parent
+         * @returns een kolom met 2/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Two>This is a 2/12 column</Column.Twelves.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+        /** Column  3/12 width of parent
+         * @returns een kolom met 3/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Three>This is a 3/12 column</Column.Twelves.Three>
+         */
+        Three: (props: ColumnProps) => JSX.Element;
+        /** Column  4/12 width of parent
+         * @returns een kolom met 4/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Four>This is a 4/12 column</Column.Twelves.Four>
+         */
+        Four: (props: ColumnProps) => JSX.Element;
+        /** Column  5/12 width of parent
+         * @returns een kolom met 5/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Five>This is a 5/12 column</Column.Twelves.Five>
+         */
+        Five: (props: ColumnProps) => JSX.Element;
+        /** Column  6/12 width of parent
+         * @returns een kolom met 6/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Six>This is a 6/12 column</Column.Twelves.Six>
+         */
+        Six: (props: ColumnProps) => JSX.Element;
+        /** Column  7/12 width of parent
+         * @returns een kolom met 7/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Seven>This is a 7/12 column</Column.Twelves.Seven>
+         */
+        Seven: (props: ColumnProps) => JSX.Element;
+        /** Column  8/12 width of parent
+         * @returns een kolom met 8/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Eight>This is a 8/12 column</Column.Twelves.Eight>
+         */
+        Eight: (props: ColumnProps) => JSX.Element;
+        /** Column  9/12 width of parent
+         * @returns een kolom met 9/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Nine>This is a 9/12 column</Column.Twelves.Nine>
+         */
+        Nine: (props: ColumnProps) => JSX.Element;
+        /** Column  10/12 width of parent
+         * @returns een kolom met 10/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Ten>This is a 10/12 column</Column.Twelves.Ten>
+         */
+        Ten: (props: ColumnProps) => JSX.Element;
+        /** Column  11/12 width of parent
+         * @returns een kolom met 11/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Eleven>This is a 11/12 column</Column.Twelves.Eleven>
+         */
+        Eleven: (props: ColumnProps) => JSX.Element;
+        /** Column  12/12 width of parent
+         * @returns een kolom met 12/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Twelve>This is a 12/12 column</Column.Twelves.Twelve>
+         */
+        Twelve: (props: ColumnProps) => JSX.Element;
+    };
+    displayName: string;
+};
+
+type ContainerProps = {
+    /** Container content */
+    children: React$1.ReactNode;
+    /** Extra classes */
+    className?: string;
+    /** Set styling directly on container */
+    styles?: CSSProperties;
+};
+/**
+ * Een container om content horizontaal te centreren in grote viewports.
+ * @param props
+ * @return een default container
+ *
+ * @description De width van de container is afhankelijk van de maximale viewport width:
+ * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+ * |----|----------------------|------------|------------|------------|-----------|
+ * | >> | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+ * |    | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+ * |    | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+ * |    | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+ *
+ * @example <Container>This is a container</Container>
+ */
+declare const Container: {
+    ({ className, children, styles }: ContainerProps): JSX.Element;
+    /**
+     * Een container om content horizontaal te centreren in grote viewports.
+     * @param props
+     * @returns een iets bredere container
+     *
+     * @description De width van de container is afhankelijk van de maximale viewport width:
+     * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+     * |----|----------------------|------------|------------|------------|-----------|
+     * |    | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+     * | >> | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+     * |    | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+     * |    | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+     *
+     * @example <Container.Wide>This is a somewhat wider container</Container.Wide>
+     */
+    Wide({ className, children, styles }: ContainerProps): JSX.Element;
+    /**
+     * Een container om content horizontaal te centreren in grote viewports.
+     * @param props
+     * @returns een hele brede container
+     *
+     * @description De width van de container is afhankelijk van de maximale viewport width:
+     * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+     * |----|----------------------|------------|------------|------------|-----------|
+     * |    | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+     * |    | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+     * | >> | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+     * |    | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+     *
+     * @example <Container.Widest>This is a wide container</Container.Widest>
+     */
+    Widest({ className, children, styles }: ContainerProps): JSX.Element;
+    /**
+     * Een container om content horizontaal te centreren in grote viewports.
+     * De width van de container is afhankelijk van de maximale viewport width.
+     * Aan de linker- en rechter-zijde wordt een margin van 32px behouden.
+     * @param props
+     * @returns een container die de gehele breedte van de viewport gebruikt.
+     *
+     * @description De width van de container is afhankelijk van de maximale viewport width:
+     * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+     * |----|----------------------|------------|------------|------------|-----------|
+     * |    | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+     * |    | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+     * |    | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+     * | >> | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+     *
+     * @example <Container.Max>This is an almost-fullwidth container </Container.Max>
+     */
+    Max({ className, children, styles }: ContainerProps): JSX.Element;
+};
+
+type ContentPropsType = {
+    /** Size van de content (default = 'm') */
+    size?: SizeProp;
+    /** Content voor het content-element */
+    children: React$1.ReactNode;
+    /** Extra classes */
+    className?: string;
+    /** Extra inline styles */
+    styles?: CSSProperties;
+};
+/**
+ * Een Content component voor generated content. De meeste html tags kunnen hier worden gebruikt.
+ * @param props size: de tekstgrootte, children: de content van de content
+ * @returns een div geschikt voor content. WYSIWYG ofzo.
+ * @example <Content>This is a content which can contain lists, <strong>strong</strong>  and <em>italic</em> tags</Content>
+ */
+declare function Content({ size, className, styles, children }: ContentPropsType): JSX.Element;
+
+type FooterProps = {
+    /** De content voor de footer */
+    children: React$1.ReactNode;
+    /** Alignment bij de footer. (default = 'c') */
+    alignment?: AlignmentProp;
+    /** Extra classes voor op de footer */
+    className?: string;
+    /** Custom styles voor de footer */
+    styles?: React$1.CSSProperties;
+};
+/**
+ * Maak een footer voor onderaan de pagina.
+ * - de footer bevat een container waarvan de text default 'centered' is.
+ * @param props
+ * @returns een footer met daarin de content.
+ * @example <Footer>This is a footer</Footer>
+ */
+declare function Footer({ children, alignment, className, styles }: FooterProps): JSX.Element;
+
+type HeroProps = {
+    children?: React$1.ReactNode;
+    /** Type hero */
+    heroColorFor?: 'werknemer' | 'werkgever' | 'klant' | 'admin' | 'primary' | undefined;
+    /** De grootte van de hero (default = small ('s')) */
+    size?: SizeProp | undefined;
+};
+/**
+ * Maak een schermbrede hero aan. Optionele top-buttons en/of tabs voor navigatie
+ * @param props
+ * @returns een Hero
+ * @example
+ */
+declare const Hero: {
+    (props: HeroProps): JSX.Element;
+    /** Top-bar van de hero met
+     * - een BurgerMenu voor de navigatie-items
+     * - items aan de rechterkant van het scherm
+     * @param props props
+     * @returns een HeroHead met daarin optionele links of buttons
+     * @example
+     * <Hero.Head>
+     *   <Hero.Head.Button onClick={handleClickNotify}>Notify</Hero.Head.Button>
+     *   <Hero.Head.Button onClick={handleClickClear}>Clear</Hero.Head.Button>
+     *   <Hero.Head.Link to="https://www.bulma.io">Bulma</Hero.Head.Link>
+     *   <Hero.Head.Link to="https://www.nodeJS.org">NodeJS</Hero.Head.Link>
+     * </Hero.Head>
+     */
+    Head: {
+        (props: {
+            children: React$1.ReactNode;
+        }): JSX.Element;
+        /** Een button in de hero head
+         * @param props props
+         * @returns een button in de hero head
+         * @example <Hero.Head.Button onClick={handleClick}>Button</Hero.Head.Button>
+         */
+        Button(props: {
+            children: React$1.ReactNode;
+            tooltip?: string | undefined;
+            onClick?: ((e: any) => void) | undefined;
+        }): JSX.Element;
+        /** Een link in de hero head
+         * @param props props
+         * @returns een link in de hero head
+         * @example <Hero.Head.Link to="https://www.loon.be" tooltip="Loon.be">Loon.be</Hero.Head.Link>
+         */
+        Link(props: {
+            children: React$1.ReactNode;
+            tooltip?: string;
+            to?: string;
+            target?: '_blank' | '_self' | '_parent' | '_top';
+            rel?: 'alternat' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+        }): JSX.Element;
+    };
+    /**
+     * Body of the hero, which could contain a title and/or subtitle
+     * @param props props
+     * @returns hero body with content
+     * @example
+     * <Hero.Body>
+     *   <Title>Title</Title>
+     *   <Subtitle>Subtitle</Subtitle>
+     * </Hero.Body>
+     */
+    Body(props: {
+        children: React$1.ReactNode;
+    }): JSX.Element;
+    /**
+     * Hero foot with navigation
+     * @param props props
+     * @returns hero foot with navigation
+     * @example
+     * <Hero.Foot>
+     *   <ul>
+     *     <li className="is-active"><a href="">Active Navigation Link </a></li>
+     *     <li><a href="">Another Navigation Link</a></li>
+     *   </ul>
+     * </Hero.Foot>
+    
+    * <Hero.NavList>
+     *    <Hero.NavItem to="/">Navigation Link</Hero.NavItem>
+     * </Hero.NavList>
+     */
+    Foot: {
+        (props: {
+            children: React$1.ReactNode;
+        }): JSX.Element;
+        /** Navigation ItemList voor In een Hero Foot. Parent should be <Hero.Foot> and children should be <Hero.Foot.NavItem>
+         * @param props props
+         * @returns Navigation Item List for Hero's
+         * @example
+         * <Hero.Foot.NavList>
+         *   <Hero.Foot.NavItem to="/">URL </Hero.Foot.NavItem>
+         *   <Hero.Foot.NavItem to="/">URL </Hero.Foot.NavItem>
+         * </Hero.Foot.NavList>
+         */
+        NavList(props: {
+            children: React$1.ReactNode;
+        }): JSX.Element;
+        /** Navigation Item voor in een Hero Foot. Parent should be <Hero.Foot.NavList>
+         * @param props props
+         * @returns Navigation Item for Hero's
+         * @example <Hero.Foot.NavItem to="/">URL</Hero.Foot.NavItem>
+         */
+        NavItem(props: {
+            children: React$1.ReactNode;
+            to: string;
+            active?: boolean;
+            target?: '_blank' | '_self' | '_parent' | '_top';
+            tooltip?: string;
+            rel?: 'alternat' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+        }): JSX.Element;
+    };
+};
+
+type ImageProps = {
+    /** De ratio (width x height) van de afbeelding */
+    ratio: '1by1' | '5by4' | '4by5' | '4by3' | '3by4' | '3by2' | '2by3' | '5by3' | '3by5' | '16by9' | '9by16' | '2by1' | '1by2' | '3by1' | '1by3' | 'square';
+    /** Geef een gewenste width op in geval van een ratio. Als er geen waarde is, wordt de parent gevuld
+     * voor ratio='square' MOETEN de string literal waarden worden gebruikt */
+    imgWidth?: '16' | '24' | '32' | '48' | '64' | '96' | '128' | string;
+    /** Wordt de afbeelding rond ? LET OP: Alleen voor ratio == 'square'! */
+    isRounded?: boolean;
+    /** `src`-Attribuut van image tag */
+    src: string;
+    /** `alt`-Attribuut van image tag */
+    alt: string;
+    /** Een optionele figcaption */
+    figCaption?: string;
+    /** extra classNames voor de omringende div */
+    className?: string;
+};
+/**
+ * Een afbeelding met een vastgestelde aspect ratio.
+ * Voor de ratio 'square' kan er een size worden opgegeven.
+ * De andere ratio's nemen de gehele width van de parent-container in.
+ * @param props
+ * @returns an image with a fixed aspect ratio
+ * @example <Image ratio="1by1" src="https://www.loon.be/images/logo.png" alt="Loon.be" />
+ */
+declare function Image({ ratio, imgWidth, alt, figCaption, className, isRounded, src }: ImageProps): JSX.Element;
+
+type SectionPropsType = {
+    children: React$1.ReactNode;
+    className?: string;
+    styles?: CSSProperties;
+};
+/**
+ * Maak een simpele container m een pagina te verdelen in secties.
+ * Een section heeft een responsive padding.
+ * @param props alleen de children van de section
+ * @returns een sectie voor op de pagina, met ruimte eromheen
+ * @example <Section>This is a section</Section>
+ */
+declare function Section({ children, className: classes, styles }: SectionPropsType): JSX.Element;
+
+/**
+ * Maak een ScrollArea om in een bepaalde richting te kunnen scrollen. De scrollareas maken gebruik van flexbox.
+ */
+declare const ScrollArea: {
+    /** Maak een horizontale flexbox container om items naast elkaar (default: van links naar rechts) neer te zetten, met of zonder wrappen
+     * @param props
+     * @returns ScrollArea in horizontale richting
+     * @example <ScrollArea.Horizontal>...</ScrollArea.Horizontal>
+     */
+    Horizontal: (props: {
+        /** Wat moet er in de flexbox container komen */
+        children: React$1.ReactNode;
+        /** Moeten de items gewrapped worden (meerdere rijen/kolommen) (default = false) */
+        wrap?: boolean;
+        /** Moeten de items van eind tot begin of begin tot eind komen? (default = false) */
+        reverse?: boolean;
+        /** De ruimte tussen items (default = 0px):
+         * - `number`: aantal px
+         * - `string`: '16px', '1em', '1rem', etc
+         * Kan voor kolom/rij anders worden aangegeven
+         */
+        gap?: number | string | {
+            /** Gap voor row */
+            row: number | string;
+            /** Gap voor column */
+            col: number | string;
+        };
+        /** Alignment van de items (default = 'l') */
+        alignment?: AlignmentProp;
+        /** Max width van een item in de horizontal scroll area
+         * - `number`: aantal px
+         * - `string`: '160x', '10em', etc.
+         */
+        maxItemWidth?: number | string;
+        /** Max width van een item in de horizontal scroll area
+         * - `number`: aantal px
+         * - `string`: '160x', '10em', etc.
+         */
+        minItemWidth?: number | string;
+    }) => JSX.Element;
+    /** Maak een verticale flexbox container om items onder elkaar (default van boven naar beneden) neer te zetten, met of zonder wrappen
+     * @param props
+     * @returns ScrollArea in verticale richting
+     * @example <ScrollArea.Vertical>...</ScrollArea.Vertical>
+     */
+    Vertical: (props: {
+        /** Wat moet er in de flexbox container komen */
+        children: React$1.ReactNode;
+        /** Moeten de items gewrapped worden (meerdere rijen/kolommen) (default = false) */
+        wrap?: boolean;
+        /** Moeten de items van eind tot begin of begin tot eind komen? (default = false) */
+        reverse?: boolean;
+        /** De ruimte tussen items (default = 0px):
+         * - `number`: aantal px
+         * - `string`: '16px', '1em', '1rem', etc
+         * Kan voor kolom/rij anders worden aangegeven
+         */
+        gap?: number | string | {
+            /** Gap voor row */
+            row: number | string;
+            /** Gap voor column */
+            col: number | string;
+        };
+        /** Alignment van de items (default = 'l') */
+        alignment?: AlignmentProp;
+        /** Alleen voor verticale flexboxen: een met een maximale hoogte waarna de container gaat scrollen */
+        maxHeight?: number | string;
+    }) => JSX.Element;
+};
+
+/** De props voor de DataTable Component zelf. */
+type DataTableProps<T extends unknown> = {
+    /** Titels voor de kolommen als die afwijken van de object-properties */
+    columns: DataTableColumn<T>[];
+    /** Header-name van de default-sorteer-kolom (default: 1e kolom die 'sortable' is) */
+    defaultSortCol?: string;
+    /** (optionele) Content voor de header. Verschijnt links van de search-bar */
+    headerContent?: React$1.ReactNode;
+    /** De array met daarin de data voor de datatabel */
+    data: T[];
+    /** Welke data-object-property is uniek? Anders wordt de index gebruikt (liever niet, react-performance-reasons)
+     * - als string: de property die uniek is: obj.<string>
+     * - als function: stel een string samen die uniek is.
+     */
+    rowIdentifier?: string | ((item: T) => string);
+    /** Een functie om de classes op een row te zetten, op basis van het object */
+    rowClasses?: (item: T, index?: number) => string;
+    /** Moet de tabel zichzelf wat kleiner maken ? */
+    narrow?: boolean;
+    /** Is de tabel gestreept? (om-en-om wit/grijze rijen) */
+    striped?: boolean;
+    /** Is de tabel fullwidth ?  (default true) */
+    fullwidth?: boolean;
+    /** Is de tabel bordered?  */
+    bordered?: boolean;
+    /** Is de tabel hoverbaar (verkleuring rij waar de muis op hangt) */
+    hoverable?: boolean;
+    /** Wat is het maximaal aantal rijen dat zichtbaar is zonder paginatie? Als 0 is er geen maximum aantal rijen (default 0) */
+    maxRows?: number;
+    /** Placeholder voor zoekveld. Als er geen placeholder is (undefined or emptystring), is er geen zoek-veld */
+    searchPlaceholder?: string;
+    /**
+     * (Optionele) Eigen zoek-functie. De default-zoek-functie wordt dan vervangen.
+     * @param searchTerm de content van het zoekveld
+     * @param items de items waarbinnen gezocht moet worden
+     * @returns een array met de gefilterde items
+     */
+    onSearch?: (searchTerm: string, items: T[]) => T[];
+    /** Terugkoppeling voor een geselecteerde rij.
+     * @param item: Het geselecteerde item
+     * @param row: de tabel-rij waarop geklikt is (<tr> tag). Om de row 'selected' te laten lijken: toggle de 'is-selected' class
+     */
+    onRowSelected?(item: T, row: HTMLTableRowElement): void;
+    /**
+     * Als er geen rijen zijn om te renderen, wordt de ReactNode van deze functie gerendered. Er wordt dan geen lege tabel gerendered, maar een boodschap
+     * @param isSearchResult is de no-rows het resultaat van een zoek-actie?
+     * @example (isSearch:boolean) => isSearch ? <div>Er zijn geen rijen die voldoen aan uw zoek-opdracht</div> : <div>U heeft geen of een lege data-array opgegeven</div>
+     */
+    onNoRowsToRender?(isSearchResult: boolean): React$1.ReactNode;
+};
+/** Props voor het samenstellen van de kolommen van de tabel */
+type DataTableColumn<T extends unknown> = {
+    /** Naam voor de kolom, als die anders is dan de key-value  */
+    header?: string;
+    /** Sorteren op deze kolom mogelijk? zo ja:
+     * - `string`: sorteer alfabetisch
+     * - `number`: sorteer numeriek
+     * - `boolean`: sorteer op true/false
+     * - `function`: een eigen sorteermechanisme
+     */
+    sort?: true | false | ((a: T, B: T) => -1 | 0 | 1 | number);
+    /** Wat is de object property die bij deze kolom hoort als je wil sorteren
+     * - `string`: de object-property-key --> obj['colValue']
+     * - `function`: samenstellen van de waarde.
+     */
+    value: string | JSX.Element | ((e: T) => string | JSX.Element);
+    /** Moet de kolom-content link, rechts of centraal aligned worden (default = 'l') */
+    alignment?: AlignmentProp;
+    /** Een functie om een class per cell toe te voegen */
+    columnClasses?: (item: T, index?: number) => string;
+};
+/**
+ * Maak een datatable voor grote hoeveelheden data. Voor kleinere hoeveelheden: gebruik @see{@link Table}.
+ * Een DataTable heeft pagination, zoekfunctie en sortering ingebouwd.
+ * @param props
+ * @returns een datatable.
+ * @example
+ * const nameSortFn = (a: IUser, b: IUser) => {
+ *   const aNaam = a.first_name + ' ' + a.last_name;
+ *   const bNaam = b.first_name + ' ' + b.last_name;
+ *   return (aNaam < bNaam) ? -1 : 1;
+ * };
+ *
+ * const columns = [
+ *   { sort: true, value: 'id' },
+ *   { header: 'Naam', sort: nameSortFn, value: (v: IUser) => `${v.first_name} ${v.last_name}`, },
+ *   { header: 'Voornaam', sort: false, value: 'first_name' },
+ *   { header: 'Achternaam', sort: true value: 'last_name' },
+ *
+ * ];
+ *
+ * const [data, setData] = useState(tableData);
+ * const handleRowClick = (item: IPersoon, rowEl: HTMLTableRowElement) => {
+ *   console.log(item, rowEl);
+ *   rowEl.classList.toggle('is-selected');
+ * };
+ * return (
+ *   <DataTable<IUser>
+ *     data={data}
+ *     columns={columns}
+ *     onSearch={(term: string, users: IUser[]) => users.filter((u) => u.language.startsWith(term))}
+ *     onRowSelected={(i, r) => handleRowClick(i, r)}
+ *     defaultSortCol="Naam"
+ *     rowClasses={(item: IUser) => (item.first_name.startsWith('C') ? 'is-dangerous' : '')}
+ *     searchPlaceholder="Zoek een persoon ..."
+ *     rowIdentifier="id"
+ *     striped={true}
+ *     hoverable={true}
+ *     narrow={false}
+ *     maxRows={20}
+ *     bordered={false}
+ *     onNoRowsToRender={(isSearch:boolean) => isSearch ?
+ *        <div>Er zijn geen rijen die voldoen aan uw zoek-opdracht</div> :
+ *        <div>U heeft geen of een lege data-array opgegeven</div>
+ *    }
+ *     headerContent={
+ *       <Button.Primary>Add</Button.Primary>
+ *       <Button.Warning>Change</Button.Warning>
+ *       <Button.Success>Refresh</Button.Success>
+ *     }
+ *   />
+ * );
+ *
+ */
+declare function DataTable<T extends unknown>({ fullwidth, bordered, narrow, striped, hoverable, defaultSortCol, data, maxRows, columns, rowIdentifier, headerContent, searchPlaceholder, onSearch, rowClasses, onRowSelected, onNoRowsToRender, }: DataTableProps<T>): JSX.Element;
+
+type IconProps = {
+    /** React font-awesome icon
+     * - `string`: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.
+     * - `IconProp (fontawesome)`: geef een react IconProp object door.
+     */
+    icon: string | IconProp;
+    /** De icon-grootte */
+    size?: SizeProp;
+    /** De kleur voor het icoon */
+    color?: ColorProp;
+    /** Hoeveel graden moet het icoon gedraait zijn (0 - 360) */
+    rotation?: 90 | 180 | 270;
+    /** Horizontaal, verticaal of beiden gespiegeld */
+    flip?: 'horizontal' | 'vertical' | 'both';
+    /** Moet het icon spinnen of pulseren */
+    animate?: 'spin' | 'pulse';
+};
+/**
+ * Toon een Font Awesome Icon
+ * default: 1.5rem x 1.5rem, de font-size is inherited.
+ * @returns een Icon element
+ * @example
+ * <Icon icon="fas fa-flag" />
+ * <Icon icon={faFlag} /> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
+ */
+declare const Icon: ({ color, size, rotation, icon, flip, animate }: IconProps) => JSX.Element;
+type IconTextProps = {
+    /** React font-awesome icon
+     * - `string`: geef de gehele font-awesome-class op. 'flip', 'animate', 'rotation' worden dan al gebruikt in deze class.
+     * - `IconProp (fontawesome)`: geef een react IconProp object door.
+     */
+    icon: string | IconProp;
+    /** De icon-grootte */
+    size?: SizeProp;
+    /** De kleur voor het icoon */
+    color?: ColorProp;
+    /** Hoeveel graden moet het icoon gedraait zijn (0 - 360) */
+    rotation?: 90 | 180 | 270;
+    /** Horizontaal, verticaal of beiden geflipt */
+    flip?: 'horizontal' | 'vertical' | 'both';
+    /** Moet het icon spinnen of pulseren */
+    animate?: 'spin' | 'pulse';
+    /** Tekst bij het icon */
+    children: React$1.ReactNode;
+};
+/**
+ * Toon een Font Awesome Icon met bijhorende tekst. De tekst krijgt dezeflde kleur als de icon
+ * IconText is een inline-flex element dus kan in een paragraaf worden gebruikt.
+ * default: 1.5rem x 1.5rem, de font-size is inherited.
+ * @returns een Icon met tekst in dezelfde kleur als het icon
+ * @example
+ * <IconText icon="fas fa-flag">Flag</IconText>
+ * <IconText icon={faFlag}>Flag</IconText> // import { faFlag } from '@fortawesome/free-solid-svg-icons';
+ */
+declare const IconText: ({ icon, size, color, rotation, flip, animate, children }: IconTextProps) => JSX.Element;
+
+type IndicatorProps = {
+    /** Positie van de indicator (default = 'tr' (top-right)) */
+    position?: IndicatorPositionProp;
+    /** Het element waar de indicator op moet */
+    children: React$1.ReactNode;
+    /** Label voor op de indicator (optioneel) */
+    label?: string | React$1.ReactNode;
+    /** Kleur van de indicator (default = 'l' ('link')) */
+    color?: ColorProp;
+    /** Extra classes voor de indicator container (element waar indicator & target-element inzitten) (optioneel) */
+    className?: string;
+    /** Tooltip voor indicator (optioneel) */
+    tooltip?: string;
+};
+/**
+ * Een indicator toont een badge op een ander element. Er zijn meerdere posities. De indicator moet als wrapper voor het gewenste element gebruikt worden.
+ * @param props Indicator Props
+ * @returns Een element met een indicator
+ * @example
+ * <Indicator position="tl" color="p" tooltip="There are 5 new messages">
+ *   <Button>Check messages</Button>
+ *   5
+ * </Indicator>
+ */
+declare function Indicator({ label, className, position, color, tooltip, children }: IndicatorProps): JSX.Element;
+
+/**
+ * Toon een Keyboard-Key als een 'key' op een keyboard.
+ * @param params
+ * @returns een element dat lijkt op een keyboard-key
+ * @example <Kbd>A</Kbd>
+ */
+declare function Kbd({ children, className, }: {
+    /** Optionele extra class */
+    className?: string;
+    /** Content van de key */
+    children: React$1.ReactNode;
+}): JSX.Element;
+/**
+ * Toont meerdere keyboard-keys, gescheiden door een teken (deafult = '+')
+ * @param props
+ * @returns een rijtje keyboard-keys
+ * @example <Kbds keys={['ctrl+S', 'shift+D']} />
+ */
+declare function Kbds({ keys, separator, className, }: {
+    /** Weer te geven keys als string */
+    keys: string[];
+    /** De separator van de keys, default '+' */
+    separator?: string;
+    /** Optionele className */
+    className?: string;
+}): JSX.Element;
+
+type MenuProps = {
+    /** Welk item is het initiële geselecteerde item */
+    initialItem?: string;
+    /** De content van het menu (<MenuItem>, <ExpandableMenuItem> or <MenuItemGroup>) */
+    children: React$1.ReactNode;
+    /** Callback voor menu-item selectie */
+    onMenuItemClicked: (item: string) => void;
+};
+type MenuItemProps = {
+    /** (optional) Naam voor menu-item dat geselecteert wordt. Als niet opgegevens, wordt de string-content van het item gebruikt */
+    name?: string;
+    /** Content van het item */
+    children: React$1.ReactNode;
+};
+type MenuItemGroupProps = {
+    /** Label voor een groep MenuItems */
+    label: string;
+    /** Items in de ze groep (<MenuItem> or <ExpandableMenuItem>) */
+    children: React$1.ReactNode;
+};
+type ExpandableMenuItemProps = {
+    /** De content van het menu-item (MenuItem components) */
+    children: React$1.ReactNode;
+    /** Label voor exapnd/collapse */
+    label: string;
+    /** Begint de lijst expanded? */
+    startExpanded?: boolean;
+    /** Click handler */
+    onClick?: (label: string, e?: React$1.MouseEvent) => void;
+};
+/**
+ * Render een Menu met <Menu.ItemGroup>, <Menu.Item> en <Menu.ExpandableItem> children
+ * @param props
+ * @returns een Menu
+ * @example
+ * <Menu initialItem="1">
+ *   <Menu.ItemGroup label="Groep 1">
+ *     <Menu.Item name="1">Item 1</Menu.Item>
+ *     <Menu.Item name="2">Item 2</Menu.Item>
+ *   </Menu.ItemGroup>
+ *   <Menu.ItemGroup label="Groep 2">
+ *     ...
+ *   </Menu.ItemGroup>
+ * </Menu>
+ */
+declare const Menu: {
+    (props: MenuProps): JSX.Element;
+    /**
+     * Een selecteerbaar menu-item in het Menu
+     * @param props
+     * @return een selecteerbaar menu-item
+     * @example <Menu.Item name="1">Item 1</Menu.Item>
+     */
+    Item: ({ name, children }: MenuItemProps) => JSX.Element;
+    /**
+     * Groepeer Menu Items in een lijstje met een label om te laten weten dat ze bij elkaar horen
+     * @param props
+     * @returns een MenuItemGroup
+     * @example
+     * <Menu.ItemGroup label="Groep 1">
+     *   <Menu.Item name="1">Item 1</Menu.Item>
+     *   <Menu.Item name="2">Item 2</Menu.Item>
+     * </Menu.ItemGroup>
+     */
+    ItemGroup: ({ label, children }: MenuItemGroupProps) => JSX.Element;
+    /**
+     * Een niet-selecteerbare, maar wel collapsable / expandable menu item met een lijstje children
+     * @param props
+     * @returns een collapsible menu item
+     * @example
+     * <Menu.ExpandableItem label="Groep 1">
+     *   <Menu.Item name="1">Item 1</Menu.Item>
+     *   <Menu.Item name="2">Item 2</Menu.Item>
+     * </Menu.ExpandableItem>
+     */
+    ExpandableItem: (props: ExpandableMenuItemProps) => JSX.Element;
+};
+
+type MessageProps = {
+    /** Content van de message */
+    children: React$1.ReactNode;
+    /** Optionele titel voor de message */
+    title?: string | undefined;
+    /** De grootte van de tekst in de messages (default = 'm') */
+    size?: SizeProp;
+};
+/** Zelf regelbare message.
+ * @returns een message
+ * @example <Message color="p" size="l" tooltip="This is a tooltip">This is a message</Message>
+ */
+declare const Message: {
+    ({ children, title, size, color, }: MessageProps & {
+        color?: string | undefined;
+    }): JSX.Element;
+    /** Een primary-colored message
+     * @param props props
+     * @returns een primary-colored message
+     * @example <Message color="p" size="l" tooltip="This is a tooltip">This is a primary message</Message>
+     */
+    Primary(props: MessageProps): JSX.Element;
+    /** Een success-colored message
+     * @param props props
+     * @returns een success-colored message
+     * @example <Message color="s" size="l" tooltip="This is a tooltip">This is a success message</Message>
+     */
+    Success(props: MessageProps): JSX.Element;
+    /** Een danger-colored message
+     * @param props props
+     * @returns een danger-colored message
+     * @example <Message color="d" size="l" tooltip="This is a tooltip">This is a danger message</Message>
+     */
+    Danger(props: MessageProps): JSX.Element;
+    /** Een warning-colored message
+     * @param props props
+     * @returns een warning-colored message
+     * @example <Message color="w" size="l" tooltip="This is a tooltip">This is a warning message</Message>
+     */
+    Warning(props: MessageProps): JSX.Element;
+    /** Een info-colored message (OOK de default)
+     * @param props props
+     * @returns een info-colored message
+     * @example <Message color="i" size="l" tooltip="This is a tooltip">This is a info message</Message>
+     */
+    Info(props: MessageProps): JSX.Element;
+    /** Een link-colored message
+     * @param props props
+     * @returns een link-colored message
+     * @example <Message color="l" size="l" tooltip="This is a tooltip">This is a link message</Message>
+     */
+    Link(props: MessageProps): JSX.Element;
+};
+
+type ModalProps = {
+    /** Content van de modal. Als deze te lang wordt, wordt hij scrollable */
+    children: React$1.ReactNode;
+    /**
+     * Afhandeling van de dismiss van de modal
+     * @param e event
+     */
+    onDismiss(e?: any): any;
+    /** De grootte van de modal: met SizeProp of een string. ( DEFAULT = 'm', 800px)
+     * - `SizeProp`: s: 600px, m: 800px, l: 1000px, xl: 1200px
+     * - `string`: '834px', '50%, 60em', '100%'
+     */
+    size?: SizeProp | string;
+    helpTag?: string;
+};
+/**
+ * Een modal-component. Als een modal ene Foot en een Head heeft, wordt de rest automatisch toegevoegd in een Body
+ * @param props modal props
+ * @returns een modal
+ * @example
+ * <Modal onDismiss={handleDismiss}>Modal without head and foot, all body</Modal>
+ *
+ * <Modal onDismiss={handleDismissModal} size="m">
+ *   <Modal.Head>Optional Modal Head</Modal.Head>
+ *   <Modal.Body>Optional Modal Body</Modal.Body>
+ *   <Modal.Foot>Optional Modal Foot</Modal.Foot>
+ * </Modal>
+ */
+declare const Modal: {
+    (props: ModalProps): JSX.Element;
+    /**
+     * Een niet-scrollende, altijd zichtbare head voor de modal
+     * @param props
+     * @returns modal head
+     * @example <Modal.Head>Optional Modal Head</Modal.Head>
+     */
+    Head: (props: {
+        children: React$1.ReactNode;
+    }) => JSX.Element;
+    /**
+     * Een scrollende body voor de modal
+     * @param props
+     * @returns modal body
+     * @example <Modal.Body>Modal Body</Modal.Body>
+     */
+    Body: (props: {
+        children: React$1.ReactNode;
+    }) => JSX.Element;
+    /**
+     * Een niet-scrollende, altijd zichtbare foot voor de modal
+     * @param props props
+     * @returns modal foot
+     * @example <Modal.Foot>Optional Modal Foot</Modal.Foot>
+     */
+    Foot: (props: {
+        children: React$1.ReactNode;
+    }) => JSX.Element;
+};
+
+/** Props voor een Notification */
+type NotificationProps = {
+    /** Content van de notificatie */
+    children: React$1.ReactNode;
+    /**
+     * Afhandeling van dismiss-click notificatie
+     * @param e event
+     */
+    onDismiss(e?: any): void;
+    /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
+    autoDismissAfter?: number;
+};
+/**
+ * Een instelbare notificatie. Default is een info-notificatie
+ * @param props
+ * @returns notificatie
+ * @example <Notification>Hello World</Notification>
+ */
+declare const Notification: {
+    ({ children, onDismiss, autoDismissAfter, color, }: NotificationProps & {
+        color?: string | undefined;
+    }): JSX.Element;
+    /** Een primary-colored notificatie
+     * @param props
+     * @returns een primary-colored notificatie
+     * @example <Notification.Primary>Hello World</Notification.Primary>
+     */
+    Primary(props: NotificationProps): JSX.Element;
+    /** Een danger-colored notificatie
+     * @param props
+     * @returns een danger-colored notificatie
+     * @example <Notification.Danger>Hello World</Notification.Danger>
+     */
+    Danger(props: NotificationProps): JSX.Element;
+    /** Een warning-colored notificatie
+     * @param props
+     * @returns een warning-colored notificatie
+     * @example <Notification.Warning>Hello World</Notification.Warning>
+     */
+    Warning(props: NotificationProps): JSX.Element;
+    /** Een success-colored notificatie
+     * @param props
+     * @returns een success-colored notificatie
+     * @example <Notification.Success>Hello World</Notification.Success>
+     */
+    Success(props: NotificationProps): JSX.Element;
+    /** Een link-colored notificatie
+     * @param props
+     * @returns een link-colored notificatie
+     * @example <Notification.Link>Hello World</Notification.Link>
+     */
+    Link(props: NotificationProps): JSX.Element;
+    /** Een info-colored notificatie (OOK DE DEFAULT)
+     * @param props
+     * @returns een info-colored notificatie
+     * @example <Notification.Info>Hello World</Notification.Info>
+     */
+    Info(props: NotificationProps): JSX.Element;
+};
+
+type ProgressBarProps = {
+    /** Grootte van de progressbar */
+    size?: SizeProp;
+    /** De maximale waarde, default = 100 */
+    max?: number;
+    /** De waarde waarop de progressbar staat. Vul niet in voor een onbepaalde, loopende progressbar */
+    value?: number;
+    /** Waarde-extensie (default = '%') */
+    extension?: '%' | 'pct' | '$' | string;
+    /** De kleur van de progressbar (default = 'i') */
+    color?: ColorProp;
+};
+/**
+ * Maak een progress-bar met de <progress> tag.
+ * Door de attribut 'value' leeg te laten, krijg je een looping progress bar
+ * @param props
+ * @returns een progress bar
+ * @example
+ * <ProgressBar value={50} />
+ * <ProgressBar value={50} extension="%" />
+ * <ProgressBar size='xl' />
+ */
+declare function ProgressBar({ color, size, extension, max, value }: ProgressBarProps): JSX.Element;
+
+type SimpleTableProps<T extends unknown> = {
+    /**
+     * Zichtbare kolommen:
+     * - `string[]`: object keys
+     * - `TableColProps`: naam van de kolom en de object-key die daarbij hoort. Als name undefined, wordt de key genomen
+     * - `undefined`: alle object keys worden gebruikt en getoont
+     */
+    columns?: string[] | SimpleTableColProps<T>[] | undefined;
+    /** De data van tabel: een array objects */
+    data: T[];
+    /** Waarmee moet een rij worden geidentificeerd. Anders wordt index gebruikt, liever niet: react-performance */
+    rowIdentifier?: string | number | ((item: T) => string | number);
+    /** Is de tabel narrow ? (default false) */
+    narrow?: boolean;
+    /** Is de tabel striped ? (default false) */
+    striped?: boolean;
+    /** Is de tabel bordered ? (default false) */
+    bordered?: boolean;
+    /** Is de tabel hovered (default false) */
+    hoverable?: boolean;
+    /** Is de tabel fullwidth (default false) */
+    fullwidth?: boolean;
+    /** Moet de inhoud van de table-header ook onderaan verschijnen ? (default false) */
+    hasFooter?: boolean;
+    /** Terugkoppeling voor een geselecteerde rij.
+     * @param item: Het geselecteerde item
+     * @param row: de tabel-rij waarop geklikt is (<tr> tag). Om de row 'selected' te laten lijken: toggle de 'is-selected' class
+     */
+    onRowSelected?(item: T, row: HTMLTableRowElement): void;
+};
+type SimpleTableColProps<T> = {
+    /** De naam van de kolom
+     * - Als niet opgegeven wordt de obj key gebruikt uit de 'value'prop (als dat een string is)
+     * - Als je geen header wil tonen, zet dan een lege string als header
+     */
+    header?: string;
+    /** De obj-property die gebruikt moet worden in de kolom
+     * - Als string: object[value] geeft de waarde
+     * - Als function: eigen function om de value te zetten
+     */
+    value: string | ((v: T) => string);
+};
+/**
+ * Render een tabel. Als je een tabel met zoekfunctie, pagination en sorteren wil, moet je een @see DataTable nemen.
+ * @param props
+ * @returns een tabel gestyled met bulma
+ * @example
+ * <SimpleTable
+ *   data={customTableData}
+ *   columns={['id', 'first_name', 'last_name', 'email']}
+ *   rowIdentifier="id"
+ *   striped={true}
+ *   fullwidth={true}
+ *   hoverable={true}
+ *   narrow={true}
+ *   bordered={false}
+ * />
+ */
+declare function SimpleTable<T extends {}>(props: SimpleTableProps<T>): JSX.Element;
+
+type StatusType = 'active' | 'completed' | 'error' | 'pending';
+type StepChoiceType = 'disabled' | 'up' | 'down' | 'allowed';
+type StepsProps = {
+    /** Extra classes voor de steps-container */
+    className?: string;
+    /** Alleen <Steps.Item> componenten */
+    children: React$1.ReactNode;
+    /** Grootte van de steps (default = 'm') */
+    size?: SizeProp;
+    /** Wat is de actieve step @deprecated use activeStepindex */
+    activeStep?: number;
+    /** Wat is de actieve step */
+    activeStepIndex?: number;
+    /** Change-step callback */
+    onChangeStep?: (step: number) => void;
+    /** FreeStepChoice:
+     * - `disabled`: alleen links/recht selecteren
+     * - `up`: alleen naar rechts vrij selecteren
+     * - `down`: alleen links beneden vrij selecteren
+     * - `allowed`: alles vrij selecteerbaar */
+    freeStepChoice?: StepChoiceType;
+};
+type StepItemProps = {
+    /** Step status */
+    status?: StatusType;
+    /** Title van de step */
+    title?: string;
+    /** Details bij de step */
+    details?: string;
+    /** Een makering van de step (default = stepnr) */
+    marker?: React$1.ReactNode | ((s?: StatusType) => React$1.ReactNode);
+    /** Tooltip voor deze step */
+    tooltip?: string;
+};
+/**
+ * Maak een stappen-paneel voor een set van stappen.
+ * @param props
+ * @returns een stappen-paneel
+ * @example
+ * <Steps activeStep={1} onChangeStep={handleStepChange}>
+ *   <Steps.Item title="Step 1" marker={1} />
+ *   <Steps.Item title="" marker={<Icon icon={faFlask} />} />
+ *   <Steps.Item title="Step 2" details="dit zijn de details voor deze stap" />
+ *   <Steps.Item title="" marker={<Icon icon={faBomb} />} status="error" />
+ *   <Steps.Item
+ *     title="Step 3"
+ *     marker={(status) => (status == 'pending' ? <Icon icon={faFlag} /> : <Icon icon={faFire} />)}
+ *   />
+ *   <Steps.Item title="Step 4" marker="A" />
+ * </Steps>
+ */
+declare const Steps: {
+    (props: StepsProps): JSX.Element;
+    /**
+     * Een stap in een stappen-paneel.
+     * @param props
+     * @returns een stap voor de <Steps> component
+     * @example
+     * <Steps.Item title="Step 1" marker={1} />
+     * <Steps.Item title="Step 2" marker={2} tooltip="step 2" status="error" />
+     */
+    Item(props: StepItemProps): JSX.Element;
+};
+
+type TabBarProps = {
+    /** Tab grootte. (default = 'm') */
+    size?: SizeProp;
+    /** Style van de tabs */
+    styling?: 'boxed' | 'toggle' | undefined;
+    /** Links, rechts of centered uilijnen (default = 'l') */
+    alignment?: AlignmentProp | undefined;
+    /** Is de tabbar fullwidth */
+    fullwidth?: boolean;
+    /** Initial active tab  (default 1e item) */
+    initialTab?: number | string | undefined;
+    /** Active tab, change the current tab AND sets the initial tab, (default 1e item) */
+    activeTab?: number | string | undefined;
+    /**
+     * Afhandeling van een tab geselecteerd.
+     * @param index index selected tab
+     */
+    onTabChange(index: number | string): void;
+    /** De tab items: Allemaal TabItem-Components */
+    children: React$1.ReactNode;
+};
+type TabBarItemProps = {
+    /** Tooltip voor dit tabbar item */ tooltip?: string;
+    /** Content voor dit tabbar item */ children: React$1.ReactNode;
+    /** ID van dit item */ tabId: number | string;
+};
+/**
+ * Maak een tabs-lijst. Zichtbare content moet zelf geregeld worden.
+ * @param props
+ * @returns tabs component
+ * @example
+ * <TabBar onTabChange={handleTabChange} activeTab={activePage}>
+ *   <TabBar.Item tabId={1}>Tab 1</TabBar.Item>
+ *   <TabBar.Item tabId={2}><Icon icon={faFLag} />Tab 2</TabBar.Item>
+ *   <TabBar.Item tabId={3}>Tab 3</TabBar.Item>
+ * </TabBar>
+ */
+declare const TabBar: {
+    (props: TabBarProps): JSX.Element;
+    /** Een item in deen <TabBar> component
+     * @param props
+     * @returns tab item component
+     * @example <TabBar.Item tabId={1}>Tab 1</TabBar.Item>
+     */
+    Item: typeof TabBarItem;
+};
+declare function TabBarItem({ children, tabId, tooltip }: TabBarItemProps): JSX.Element;
+
+type TagProps = {
+    /** Content van de tag */
+    children: React$1.ReactNode;
+    /** Kleur van de tag, de standaard kleuren + dark & light en `is-${`string`}`-waardes */
+    color?: ColorProp | 'dark' | 'light';
+    /** Sizes van de tag. (default = 's'). LET OP 3 verschillende sizes ipv 4! */
+    size?: TagSizeProp;
+    /** Moet de light-colored versie van de tag getoont worden */
+    light?: boolean;
+    /** Zijn de tags rounded ? */
+    rounded?: boolean;
+    /** Moet er een dismiss-knop op de tag, en zo ja, definieer daar een functie voor */
+    onDismiss?: (e: any) => void;
+    /** Tooltip voor de tag */
+    tooltip?: string;
+};
+type TagsProps = {
+    /** De content van de tags-div */
+    children: React$1.ReactNode;
+    /** Moeten de tags aan elkaar geplakt worden? */
+    merged?: boolean;
+    /** De grootte van alle tags , overschrijfbaar per tag  (default = 's'). LET OP: 3 sizes ipv 4 */
+    size?: TagSizeProp;
+    /** Alignment van de tags (default = 'l') */
+    alignment?: AlignmentProp;
+    /** Extra classes op de tags container  */
+    className?: string;
+};
+/**
+ * Maak een tag
+ * @param props Tag Props
+ * @returns een tag
+ * @example
+ * <Tag>Hello</Tag>
+ * <Tag color='d'>Danger</Tag>
+ */
+declare function Tag({ children, color, size, light, rounded, tooltip, onDismiss }: TagProps): JSX.Element;
+/**
+ * Maak een tag-container aan. De tags kunnen aan elkaar geplakt worden of niet.
+ * De grootte van de tags kan ook ingesteld worden
+ * @param props
+ * @returns een groep van tags
+ * @example
+ * <Tags size="m">
+ *   <Tag>Tag 1</Tag>
+ *   <Tag color="i">Tag 2</Tag>
+ * </Tags>
+ */
+declare function Tags({ children, merged, size, alignment, className }: TagsProps): JSX.Element;
+
+type TimeLineProps = {
+    /** Alignment van de timeline (default = 'l', left) */
+    alignment?: AlignmentProp;
+    /** Children van de timeline, dus TimeLine.Item & TimeLine.Point */
+    children: React$1.ReactNode;
+    /** Extra classname op de timeline container */
+    className?: string;
+};
+type TimeLineItemProps = {
+    /** Aanpassingen aan de default grijze marker op de timeline. Los van elkaar instelbaar */
+    marker?: {
+        /** Icon op de timeline */
+        icon?: string | IconProp;
+        /** Aangepaste kleur */
+        color?: ColorProp;
+    };
+    /** Een title voor omschrijving van het item */
+    heading?: string;
+    /** Content bij dit timeline item */
+    children: React$1.ReactNode;
+    /** Een tooltip voor een timeline item */
+    tooltip?: string;
+    /** onClick() callback voor timeline content */
+    onClick?: (heading?: string) => void;
+};
+type TimeLinePointProps = {
+    /** De content van het Point */
+    children: React$1.ReactNode;
+    /** De kleur van het point (default = 'l', link) */
+    color?: ColorProp;
+    /** De grotte van het point (default = 's', small) */
+    size?: TagSizeProp;
+    /** Een optionele tooltip voor dit point */
+    tooltip?: string;
+    /** onClick() callback voor timeline content */
+    onClick?: () => void;
+};
+/**
+ * Een timeline is een lijst van items met een marker op een lijn.
+ * @param props
+ * @returns een Timeline component
+ * @example
+ * <TimeLine alignment="c">
+ *   <TimeLine.Point>Start</TimeLine.Point>
+ *   <TimeLine.Point color="l">2016</TimeLine.Point>
+ *   <TimeLine.Item heading="March 2016">nothing happened</TimeLine.Item>
+ *   <TimeLine.Item marker={{ color: 's' }} heading="August 2016">
+ *     Als nothing happened
+ *   </TimeLine.Item>
+ *   <TimeLine.Point color="d" size="m"> 2017</TimeLine.Point>
+ * </TimeLine>
+ */
+declare const TimeLine: {
+    ({ alignment, children, className }: TimeLineProps): JSX.Element;
+    /**
+     * Een punt op de timeline, bijvoorbeeld een jaartal of een datum. Er wordt een <Tag> gebruikt
+     * @param props
+     * @returns een punt (Tag-component) op de timeline
+     * @example <TimeLine.Point color="l">2016</TimeLine.Point>
+     */
+    Point({ children, color, size, tooltip, onClick }: TimeLinePointProps): JSX.Element;
+    /**
+     * Een item met een omschrijving, heading en icon op de timeline
+     * @param props
+     * @returns een Item op de timeline
+     * @example <TimeLine.Item heading="March 2016">nothing happened</TimeLine.Item>
+     */
+    Item({ marker, heading, children, tooltip, onClick }: TimeLineItemProps): JSX.Element;
+};
+
+type TitleProps = {
+    /** Content van de title. Kan ook met `txt`-prop gezet worden */
+    children?: React$1.ReactNode;
+    /** Content van de title. Kan ook met `children` gezet worden */
+    txt?: string;
+    /** De bulma-grootte die gebruikt wordt */
+    bulmaSize?: '1' | '2' | '3' | '4' | '5' | '6' | number;
+    /** De heading grootte: h1, h2, h3, h4, h5 of h6 */
+    headingSize?: '1' | '2' | '3' | '4' | '5' | '6' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined | number;
+};
+type SubtitleProps = {
+    /** Content van de title. Kan ook met `txt`-prop gezet worden */
+    children?: React$1.ReactNode;
+    /** Content van de title. Kan ook met `children` gezet worden */
+    txt?: string;
+    /** De bulma-grootte die gebruikt wordt */
+    bulmaSize?: '3' | '4' | '5' | '6' | number;
+    /** De heading grootte: h1, h2, h3, h4, h5 of h6 */
+    headingSize?: '1' | '2' | '3' | '4' | '5' | '6' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined | number;
+};
+type TitleWithSubtitleProps = {
+    /** Content van de title */
+    titleTxt: string;
+    /** Content van de subtitle */
+    subtitleTxt: string;
+    /** De bulma-grootte die gebruikt wordt */
+    bulmaSize?: '1' | '2' | '3' | '4' | '5' | '6' | number;
+    /** De heading grootte: h1, h2, h3, h4, h5 of h6 */
+    headingSize?: '1' | '2' | '3' | '4' | '5' | '6' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | undefined | number;
+    /** (optional) Classes op de omringende container */
+    className?: string;
+};
+/**
+ * Maak een heading. @see {@link TitleWithSubtitle} voor een combinatie met een subtitle.
+ * @param props txt as string, size voor bulma (is-1 t/m is-6) en een heading-waarde (h1-h6)
+ * @returns een heading (h1-h6) met class 'title'
+ * @example
+ * <Title txt="Default title" />
+ * <Title txt="Title" bulmaSize={1} headingSize={4} />
+ */
+declare function Title(props: TitleProps): JSX.Element;
+/**
+ * Maak een subtitle voor een heading. @see {@link TitleWithSubtitle} voor een combinatie van deze 2.
+ * @param props text as string, size voor bulma (is-3 t/m is-6) en een heading-waarde (h2-h6)
+ * @returns een heading (h1-h6) met class 'subtitle'.
+ * @example
+ * <Subtitle txt="Default subtitle" />
+ * <Subtitle txt="Subtitle" bulmaSize={3} headingSize={4} />
+ */
+declare function Subtitle(props: SubtitleProps): JSX.Element;
+/**
+ * Combineer een title en een subtitle
+ * @param props titleTxt as string, subtitleTxt as string, bulmaSize as number (1-4) en headingSize as number (1-4)
+ * De subtitle sizes worden +2 gedaan, dus bij title bulmaSize = 1 en headingSize = 3 (<h3 class="title is-1">) komt een subtitle van (<h6 class="subtitle is-4">)
+ * @returns een title met daaronder een subtitle.
+ * @example <TitleWithSubtitle titleTxt="Title" subtitleTxt="Subtitle" bulmaSize={1} headingSize={3} />
+ */
+declare function TitleWithSubtitle({ bulmaSize: bulmaSizeVal, headingSize, titleTxt, subtitleTxt, className, }: TitleWithSubtitleProps): JSX.Element;
+
+type ToggleBarProps = {
+    /** De beginwaarde (default = undefined)
+     * Deze property wordt alleen voor ToggleItems gebruikt. voor OnOffToggleItems kan dat per item geset worden
+     * Om een waarde van buitenaf te zete, gebruik je de 'value'-prop
+     */
+    initialValue?: string;
+    /** De beginwaarde, alsd ie van buitenaf aangepast mag worden. gebruik 'initialValue' voor alleen een beginwaarde */
+    value?: string;
+    /** ToggleItems */
+    children: React$1.ReactNode;
+    /** Callback voor toggelen */
+    onToggle?: (toggledItem: string) => void;
+    /** Zijn de randen afgerond of vierkant (default true) */
+    rounded?: boolean;
+    /** Alignment van de container */
+    alignment?: AlignmentProp;
+    /** Size van de buttons (default = 's') */
+    size?: SizeProp;
+    /** Color van de toggles (default = 's', success), (kan per item overschreven worden) */
+    onColor?: ColorProp;
+    /** Color van de toggles (default = 'd', danger), (kan per item overschreven worden) */
+    offColor?: ColorProp;
+    /** Zijn de toggles light of niet (default = true) */
+    light?: boolean;
+    /** Zijn de toggles outlined of niet (default = false) */
+    outlined?: boolean;
+    /** Extra classes voor de toggle-bar */
+    className?: string;
+};
+type ToggleItemProps = {
+    /** Content van een Toggle Item */
+    children: React$1.ReactNode;
+    /** Is dit item disabled? */
+    disabled?: boolean;
+    /** Selectie-naam voor dit toggle-item. ALs undefined wordt de children-string-content gebruikt */
+    identifier?: string;
+    /** Tooltip voor dit toggle-item */
+    tooltip?: string;
+    /** Color voor on-status */
+    onColor?: ColorProp;
+    /** Color voor off-status */
+    offColor?: ColorProp;
+};
+type OnOffToggleItemProps = ToggleItemProps & {
+    /** Set de initiele waarde van dit toggle item */
+    toggled?: boolean;
+    /** onToggle callback, deze 'cancelt' de OnToggle van de <ItemToggleBar> voor dit item */
+    onToggle?: (on: boolean, item: string) => void;
+};
+/**
+ * Een groep van bij-elkaar-horende buttons waar er maar 1 van actief kan zijn.
+ * Om elk toggle-item APART te kunnen togglen, gebruik je de ItemToggleBar Component
+ * @param props
+ * @returns een Toggle bar
+ * @example
+ * <ToggleBar onToggle={handleToggle} initialValue={calendarView}>
+ *   <ToggleBar.Item>WeekView</ToggleBar.Item>
+ *   <ToggleBar.Item>MonthView</ToggleBar.Item>
+ * </ToggleBar>
+ *
+ * <ToggleBar >
+ *   <ToggleBar.OnOffItem onToggle={handleToggle2} identifier="1">
+ *     Toggle 2
+ *   </ToggleBar.OnOffItem>
+ *   <ToggleBar.OnOffItem toggled={true} onToggle={handleToggle3} identifier="2">
+ *     Toggle 3
+ *   </ToggleBar.OnOffItem>
+ * </ToggleBar>
+ */
+declare const ToggleBar: {
+    (props: ToggleBarProps): JSX.Element;
+    /**
+     * Item binnen de ToggleBar. Een van de ToggleItems in een ToggleBar kan maar actief zijn.
+     * @param props
+     * @returns een item in de togglebar waarvan er maar 1 actief kan zijn
+     * @example <ToggleBar.Item>Item 2</ToggleBar.Item>
+     */
+    Item: (props: ToggleItemProps) => JSX.Element;
+    /**
+     * Een zelf-toggelend item in een ToggleBar. OnOffToggleItems regelen zelf de toggle-state.
+     * @param props
+     * @returns een losstaand toggle-baar item.
+     * @example <ToggleBar.OnoffItem onToggle={handleToggle} identifier="1">Toggle 1</ToggleBar.OnoffItem>
+     */
+    OnOffItem: (props: OnOffToggleItemProps) => JSX.Element;
+};
+
+type ButtonGroupProps = {
+    /** Een buttongroup kan alleen Buttons als children hebben! */
+    children?: React$1.ReactNode;
+    /** Moeten de buttons aan elkaar vast gezet worden (default = false) */
+    hasAddons?: boolean;
+    /** Aan welke kant moeten de buttons aligned worden (default = l) */
+    alignment?: AlignmentProp | undefined;
+    /** Voeg  extra classes aan de buttons-container toe */
+    className?: string;
+};
+/**
+ * Groupeer buttons in een groep. Ze krijgen allemala dezelfde grootte en worden als gewenst anders aligned.
+ * Een ButtonGroup mag ALLEEN buttons bevatten!
+ * sizes: small, medium, large
+ * alignment: l(eft), c(entered), r(ight)
+ * merge: voeg de buttons samen tot een buttonbar
+ * @param props
+ * @returns een button groep
+ * @example
+ * <ButtonGroup hasAddons alignment="r">
+ *   <Button>Left</Button>
+ *   <Button>Middle</Button>
+ *   <Button>Right</Button>
+ * </ButtonGroup>
+ */
+declare const ButtonGroup: ({ children, hasAddons, alignment, className }: ButtonGroupProps) => JSX.Element;
+
+type ButtonTypes = 'button' | 'submit' | 'reset' | undefined;
+type ButtonStyles = 'static' | 's' | 'light' | 'l' | 'outlined' | 'o' | 'inverted' | 'i' | 'light-outlined' | 'lo' | 'default';
+type ButtonProps = {
+    /** Is de button loading ? */
+    loading?: boolean | undefined;
+    /** Heeft de button afgeronde hoeken ? */
+    rounded?: boolean | undefined;
+    /** Wat moet er op de button komen (text, icons etc.) */
+    children?: ReactNode;
+    /** Button type: <button type="..."> */
+    type?: ButtonTypes;
+    /** Styling voor de button */
+    styling?: ButtonStyles;
+    /** De grootte van de button */
+    size?: SizeProp;
+    /** Is de buttton disabled? */
+    disabled?: boolean | undefined;
+    /** Een tooltip voor de button */
+    tooltip?: string;
+    /** ID voor de button (id="...") */
+    id?: string;
+    /** Function voor onclick event */
+    onClick?(e: MouseEvent): void;
+};
+type BaseButtonProps = ButtonProps & {
+    /** De kleur van de button */
+    color?: ColorProp;
+};
+
+/**
+ * Button is helemaal instelbaar. Maak de button. Alle button instellingen worden hier verwerkt.
+ * @param props
+ * @returns een default button
+ * @example <Button>Button</Button>
+ * @description Alle mogelijke props voor de Button-component
+ * | Prop     | Value                   | Default  | Description                             |
+ * |----------|-------------------------|----------|-----------------------------------------|
+ * | children |                         |          | De content van de button (icon, text)   |
+ * | color    | `p`, `l`, `i`, `w`, `d`,|   `p`    | Kleuren voor de button                  |
+ * |          | `s`, `is-${string}`     |          |                                         |
+ * | styling  | `l` , light             |          | Light style voor de button              |
+ * |          | `o` , outlined          |          | Outlined style voor de button           |
+ * |          | `i` , inverted          |          | Inverted style voor de button           |
+ * |          | `lo`, light-outlined    |          | Light & outlined style voor de button   |
+ * |          | `s` , static            |          | static style voor de button (grey)      |
+ * | size     | `s, m, l, xl`           |          | sizes voor de button                    |
+ * | rounded  | `true, false`           | `false`  | Afgeronde hoeken voor de button         |
+ * | loading  | `true, false`           | `false`  | heeft button de loading state           |
+ * | disabled | `true, false`           | `false`  | is de button disabled                   |
+ * | tooltip  | string                  |          | tooltip voor de button                  |
+ * | id       | string                  |          | id voor de button                       |
+ * | onClick  | function                |          | onClick voor de button                  |
+ * | type     | `button, reset, submit` | `button` | type 'button' voor de button            |
+ */
+declare const Button: {
+    ({ color, size, rounded, loading, disabled, type, styling, onClick, children: chldrn, tooltip, id, }: BaseButtonProps): JSX.Element;
+    /**
+     * Een Static Button
+     * Een static button is niet interactief, maar wordt bijvoorbeeld gebruikt als scheiding voor add-ons
+     * @example <Button.Static>Static Button</Button.Static>
+     */
+    Static(props: ButtonProps): JSX.Element;
+    /** Een Button in de primary kleur
+     * @example <Button.Primary>Primary Button</Button.Primary>
+     */
+    Primary(props: ButtonProps): JSX.Element;
+    /** Een Button in de success kleur
+     * @example <Button.Success>Success Button</Button.Success>
+     */
+    Success(props: ButtonProps): JSX.Element;
+    /** Een Button in de danger kleur
+     * @example <Button.Danger>Danger Button</Button.Danger>
+     */
+    Danger(props: ButtonProps): JSX.Element;
+    /** Een Button in de warning kleur
+     * @example <Button.Warning>Warning Button</Button.Warning>
+     */
+    Warning(props: ButtonProps): JSX.Element;
+    /** Een Button in de info kleur
+     * @example <Button.Info>Info Button</Button.Info>
+     */
+    Info(props: ButtonProps): JSX.Element;
+    /** Een Button in de link kleur
+     * @example <Button.Link>Link Button</Button.Link>
+     */
+    Link(props: ButtonProps): JSX.Element;
+};
+
+type LinkButtonProps = {
+    /** De content van de button */
+    children?: React$1.ReactNode;
+    /** `onClick` voor de button */
+    onClick: (e: any) => any | void;
+    /** Een tooltip voor de button */
+    tooltip?: string;
+    id?: string;
+};
+/**
+ * Een button die er uit ziet als een link. Om een link te maken met een onClick() ipv een href.
+ * @param props
+ * @returns een button die er uit ziet als een link
+ * @example <LinkButton onClick={handleClick}>Click me!</LinkButton>
+ */
+declare const LinkButton: ({ children, onClick, tooltip, id }: LinkButtonProps) => JSX.Element;
+type LinkProps = {
+    /** link / URL */
+    href: string;
+    /** open target
+     * - `default`: _blank
+     * - `string`: naam van een <iframe>
+     */
+    target?: '_blank' | '_self' | '_parent' | '_top' | string;
+    /** Relatie tussen het huidige document en het gelinkte document */
+    rel?: 'alternat' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+    /** MIME type van een evt download */
+    type?: string;
+    /** De taal van het gelinkte document */
+    hreflang?: string;
+    /** Is dit een downloadlink? */
+    download?: boolean;
+    /** De inhoud van de link: wat is er te lezen / zien */
+    children?: React$1.ReactNode;
+    /** Een tooltip voor de button */
+    tooltip?: string;
+    id?: string;
+};
+/**
+ * Een link (duh) die er hetzelfde uit ziet als de linkbutton.
+ * @param props
+ * @returns een link
+ * @example <Link href="https://www.google.com">Google</Link>
+ */
+declare const Link: ({ href, target, tooltip, id, rel, children }: LinkProps) => JSX.Element;
+
+/** type equal to Intl.DateTimeFormatOptions, but with a typed timeZone */
+type JSDateTimeFormatOptions = Intl.DateTimeFormatOptions & {
+    timeZone?: JSDateTimeZoneType;
+};
+/** Type used for setting values in a JSDateTime */
+type JSDateSetterType = {
+    /** Set the year value to ... */ year?: number;
+    /** Set the month value to ... (1 - 12, 0 automatic to 1)*/ month?: number;
+    /** Set the day value to ... (1 - 31)  */ day?: number;
+    /** Set the hour value to ... (0 - 23) */ hour?: number;
+    /** Set the minute value to ... (0 - 59) */ minute?: number;
+    /** Set the second value to ... (0 - 59) */ second?: number;
+    /** Set the millisecond value to ... (0 - 999) */ millisecond?: number;
+};
+/** Type used for changing values in a JSDateTime */
+type JSChangeDateTimeType = {
+    /** Number of years to add or subtract */ years?: number;
+    /** Number of months to add or subtract */ months?: number;
+    /** Number of weeks to add or subtract */ weeks?: number;
+    /** Number of days to add or subtract */ days?: number;
+    /** Number of hours to add or subtract */ hours?: number;
+    /** Number of minutes to add or subtract */ minutes?: number;
+    /** Number of seconds to add or subtract */ seconds?: number;
+    /** Number of milliseconds to add or subtract */ milliseconds?: number;
+};
+type JSDateTimeInfoType = {
+    year: JSDateTimeYearInfoType;
+    month: JSDateTimeMonthInfoType;
+};
+type JSDateTimeYearInfoType = JSDateTimeMonthInfoType & {
+    isLeapYear: boolean;
+};
+type JSDateTimeMonthInfoType = {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    milliseconds: number;
+};
+/**
+ * @class JSDateTime
+ * @summary
+ * JSDateTime is een class voor het werken met datum & tijd in JavaScript. Elk JSDateTime object is een immutable object.
+ * Het is niet echt een vervanging voor andere Datum-libraries, maar meer een kleine wrapper rond gewone Javascript Dates, want Dates gebruiken is lastig.
+ * Kijk onder de description-tag van deze uitleg wat de functies zijn.
+ *
+ * @example // creating JSDateTime - all methods return a NEW JSDateTime object
+ * const date1 = JSDateTime.now();                                 // timestamp of now
+ * const date2 = JSDateTime.fromISO('2020-01-01T00:00:00.000Z');   // 01-01-2020
+ * const date3 = JSDateTime.fromDate(new Date());                  // timestamp of now
+ * const date4 = JSDateTime.fromMillis(0);                         // 01-01-1970
+ * const date5 = JSDateTime.from({ year: 2020, month: 1, day: 1 }) // 01-01-2020
+ *
+ * @example // changing & chaining JSDateTime - All methods return a NEW JSDateTime object
+ * const date1 = JSDateTime.fromISO('2020-06-01T00:00:00.000Z');  // date1: 01-06-2020
+ * const date2 = date1.set({ year: 2022, month: 1, day: 1 });     // date2: 01-06-2022, date1: 01-06-2020
+ * const date3 = date1.plus({ years: 2, days: 15 });              // date3: 16-06-2022, date1: 01-06-2020
+ * const date4 = date1.startOf('year');                           // date4: 01-01-2020, date1: 01-06-2020
+ * const date5 = date1.endOf('year').startOf('month')             // date5: 01-12-2020, date1: 01-06-2020
+ *
+ * @example // formatting dates
+ * const date = JSDateTime.from({year: 2022, month: 6, day: 18}); // date: 18-06-2022
+ * date.ISO;                                                      // 2020-06-18T00:00:00.000Z
+ * date.UTC                                                       // Mon, 18 Jul 2022 07:14:08 GMT
+ * date.timeHM;                                                   // 07:14
+ * date.timeHMS;                                                  // 07:14:08
+ * date.monthLong;                                                // Juli
+ * date.monthShort;                                               // Jul
+ * date.dayLong;                                                  // Monday
+ * date.dayShort;                                                 // Mon
+ * date.toFormat('yyyy-MM-dd');                                   // 2020-01-01
+ *
+ * @example // comparing JSDateTimes
+ * const date1 = JSDateTime.now();                                                                     // date1: 18-06-2022
+ * const date2 = JSDateTime.epoch();                                                                   // date2: 01-01-1970
+ * date1.isBetween(new Date(1970,0,1), new Date(2222, 0,1))                                            // true
+ * date1.isBetween(JSDateTime.fromDate(new Date(1970,0,1), JSDateTime.fromDate(new Date(1900, 0, 1)))) // false
+ * date1.isAfter(new Date(1970,0,1))                                                                   // true
+ * date1.isBefore(new Date(2222, 0,1))                                                                 // true
+ * date1.hasSame(new Date(2020, 0, 1), 'year')                                                         // true
+ * date1.hasSame(new Date(2020, 0, 1), 'month')                                                        // false
+ * const beforeEpoch: boolean = date2 < date1;                                                         // true
+ *
+ * @description Static values & methods on JSDateTime - used for creating JSDateTimes
+ * | Value / Method         | Description                                                                        |
+ * |------------------------|------------------------------------------------------------------------------------|
+ * | `defaultLocale`        | Default locale to use. Based on client locale                                      |
+ * | `defaultTimeZone`      | Default Timezone to use. Based on client timezone                                  |
+ * | `MAX_DATE`             | (readonly) Max and Min date as Date that can be used in JSDateTime                 |
+ * | `MAX_DATE_NUM`         | (readonly) Max and Min millis from 01-01-1970 00:00:00 that can be used            |
+ * | `defaultFormatOptions` | (readonly) Default format options to use when formatting dates                     |
+ * | `fromISO()`            | Creates a new JSDateTime from an ISO string.                                       |
+ * | `fromUTC()`            | Creates a new JSDateTime from a UTC string.                                        |
+ * | `fromDate()`           | Creates a new JSDateTime from a Date object.                                       |
+ * | `fromMillis()`         | Creates a new JSDateTime based on milliseconds since 01-01-1970 00:00:00           |
+ * | `from({})`             | Creates a new JSDateTime object from a set of values.                              |
+ * | `now()`                | Creates a new JSDateTime object from the current timestamp.                        |
+ * | `epoch()`              | Creates a new JSDateTime on 01-01-1970 00:00:00.                                   |
+ *
+ * @description values & methods on JSDateTime instances - used for changing, chaining and comparing JSDateTimes
+ * | Value / Method           | returns      | type       | Description                                                           |
+ * |--------------------------|--------------|------------|-----------------------------------------------------------------------|
+ * | `valueOf()`              | `number `    | `(method)` |Returns the number of milliseconds since 01-01-1970 00:00:00           |
+ * | `isLeapYear`             | `boolean`    | `(get)`    |Returns true if the year is a leap year                                |
+ * | `isAM`                   | `boolean`    | `(get)`    |Returns true if the time is AM                                         |
+ * | `isPM`                   | `boolean`    | `(get)`    |Returns true if the time is PM                                         |
+ * | `isDST`                  | `boolean`    | `(get)`    |Returns true if the time is in DST                                     |
+ * | `JSDate`                 | `Date   `    | `(get)`    |Returns the Date as a Javascript Date                                  |
+ * | `ISO`                    | `string `    | `(get)`    |Returns the date as an ISO string                                      |
+ * | `UTC`                    | `string `    | `(get)`    |Returns the date as an UTC string                                      |
+ * | `locale`                 | `string `    | `(get)`    |Returns the locale used for formatting                                 |
+ * | `timeZoneLong`           | `string `    | `(get)`    |Returns a long timezone name (Central European Standard Time)          |
+ * | `timeZoneShort`          | `string `    | `(get)`    |Returns a short timezone name (CEST)                                   |
+ * | `timezoneOffsetLongStr`  | `number `    | `(get)`    |Returns the timezone offset as a long string (GMT+02:00)               |
+ * | `timezoneOffsetShortStr` | `string `    | `(get)`    |Returns the timezone offset as a long string (+02:00)                  |
+ * | `timezoneOffset`         | `number `    | `(get)`    |Returns the timezone offset as a number                                |
+ * | `timeHM`                 | `string `    | `(get)`    |Returns the time as a string (07:14)                                   |
+ * | `timeHMS`                | `string `    | `(get)`    |Returns the time as a string (07:14:08)                                |
+ * | `monthLong`              | `string `    | `(get)`    |Returns the month as a long string (January)                           |
+ * | `monthShort`             | `string `    | `(get)`    |Returns the month as a short string (Jan)                              |
+ * | `dayLong`                | `string `    | `(get)`    |Returns the day as a long string (Monday)                              |
+ * | `dayShort`               | `string `    | `(get)`    |Returns the day as a short string (Mon)                                |
+ * | `dateLong`               | `string `    | `(get)`    |Returns the date as a long string (friday 7 september 1990)            |
+ * | `dateShort`              | `string `    | `(get)`    |Returns the date as a short string (07-09-1990)                        |
+ * | `yr`, `year`             | `number `    | `(get)`    |Returns the year                                                       |
+ * | `qr`, `quarter`          | `number `    | `(get)`    |Returns the quarter                                                    |
+ * | `m`, `month`             | `number `    | `(get)`    |Returns the month                                                      |
+ * | `d`, `day`               | `number `    | `(get)`    |Returns the number of the day in the month                             |
+ * | `h`, `hour`              | `number `    | `(get)`    |Returns the hour                                                       |
+ * | `min`, `minute`          | `number `    | `(get)`    |Returns the minute                                                     |
+ * | `s`, `second`            | `number `    | `(get)`    |Returns the second                                                     |
+ * | `ms`, `millisecond`      | `number `    | `(get)`    |Returns the millisecond                                                |
+ * | `weekNr`                 | `number `    | `(get)`    |Returns the week number                                                |
+ * | `daysInMonth`            | `number `    | `(get)`    |Returns the number of days in the month                                |
+ * | `daysInYear`             | `number `    | `(get)`    |Returns the number of days in the year                                 |
+ * | `millis`                 | `number `    | `(get)`    |Returns the number of milliseconds since 01-01-1970 00:00:00           |
+ * | `yearToDate`             | `number `    | `(get)`    |Returns the number of days since the start of the year                 |
+ * | `set()`                  | `JSDateTime` | `(method)` |Sets the date and time from a set of values.                           |
+ * | `startOf()`              | `JSDateTime` | `(method)` |Sets the date and time to the start of the given unit.                 |
+ * | `endOf()`                | `JSDateTime` | `(method)` |Sets the date and time to the end of the given unit.                   |
+ * | `plus()`                 | `JSDateTime` | `(method)` |Adds a set of values to the date and time.                             |
+ * | `isBetween()`            | `boolean`    | `(method)` |true if this JSDateTime is between the given dates.                    |
+ * | `hasSame()`              | `boolean`    | `(method)` |true if this JSDateTime has te same value for the period (same year, same month, same day, etc). See `hasSame()` description for more |
+ * | `isAfter()`              | `boolean`    | `(method)` |true if this JSDateTime is after the given date.                       |
+ * | `isBefore()`             | `boolean`    | `(method)` |true if this JSDateTime is before the given date.                      |
+ * | `toFormat()`             | `string`     | `(method)` |Returns the date and time as a string using the given format. See `toFormat()` description for more     |
+ * | `toString()`             | `string`     | `(method)` |Returns the date and time as a string using the default Intl.DateTimeFormat. See `toString()` description for more     |
+ */
+declare class JSDateTime {
+    /** Default locale for JSDateTime classes, based on clients browser & location */
+    static defaultLocale: string;
+    /** Default Timezone for JSDateTime classes, based on clients browser & location */
+    static defaultTimezone: JSDateTimeZoneType;
+    /** Max number of millies since epoch (01-01-1970) or before epoch */
+    static readonly MAX_DATE_NUM = 8640000000000000;
+    /** Max date based on @see MAX_DATE_NUM */
+    static readonly MAX_DATE: Date;
+    /** Default formatting options for JSDateTime */
+    private static readonly defaultFormatOptions;
+    private readonly IGNORE_SIGN;
+    /** Date on this JSDateTime object. everything based on this one */
+    protected readonly _date: Date;
+    /** Setted locale on this JSDateTime */
+    protected readonly _locale: string;
+    /** Setted format options on this JSDateTime */
+    private readonly formatOptions;
+    protected constructor(date: Date, locale: string, formatOptions?: JSDateTimeFormatOptions);
+    /** @returns datetime string based on the default format options of this JSDateTime */
+    toString(formatOptions?: JSDateTimeFormatOptions): string;
+    /** To compare JSDates with each other with <, >, <= and >= @returns nu,ber of milliseconds since epoch */
+    valueOf(): number;
+    /**
+   * Use DateTimeFormat to get a date string
+   * @param dtfOptions
+   * @return
+   */
+    private intlDtf;
+    /** @return Information about this date's year or month. Information like numver of days, hours, etc */
+    get info(): JSDateTimeInfoType;
+    /** @return Is JSDateTime in a leap-year (true/false) */
+    get isLeapYear(): boolean;
+    /** @return Is JSDateTime AM (true) or PM (false) */
+    get isAM(): boolean;
+    /** @return Is JSDateTime AM (false) or PM (true) */
+    get isPM(): boolean;
+    /** @returns Is DST (Daylight Saving Time) observed */
+    get isDST(): boolean;
+    /** @returns Is this JSDateTime today? */
+    get isToday(): boolean;
+    /** @return JSDate-date as Javascript Date object */
+    get JSDate(): Date;
+    /** @return Date as ISO string ('1990-09-07T12:30:55.666Z') */
+    get ISO(): string;
+    /** @return Date as UTC string ('Fri, 08 Jul 2022 13:34:47 GMT') */
+    get UTC(): string;
+    /** @return The locale ('nl-NL') */
+    get locale(): string;
+    /** @return A long timezone description (Midden-Europese zomertijd, Australian Standard Time) */
+    get timezoneLong(): string;
+    /** @return A short timezone descriptn (CEST, CET, AEST) */
+    get timezoneShort(): string;
+    /** @return Current timezone offset as a string (+02:00) */
+    get timezoneOffsetShortStr(): string;
+    /** @return Current timezone offset as a string (GMT+02:00) */
+    get timezoneOffsetLongStr(): string;
+    /** @return Current timezone offset (+2) */
+    get timezoneOffset(): number;
+    /** @return A time string (12:30) */
+    get timeHM(): string;
+    /** @return A time string (12:30:45) */
+    get timeHMS(): string;
+    /** @return The whole month name (september) */
+    get monthLong(): string;
+    /** @return An abbreviated month name (sep) */
+    get monthShort(): string;
+    /** @return The whole day name (friday) */
+    get dayLong(): string;
+    /** @return An abbreviated day name (fri) */
+    get dayShort(): string;
+    /** @return A long date string (friday 7 september 1990) */
+    get dateLong(): string;
+    /** @return A short date string (07-09-1990) */
+    get dateShort(): string;
+    /** @return Year (1990) */
+    get yr(): number;
+    /** @return Year (1990) */
+    get year(): number;
+    /** @return Quarter (1990) */
+    get qr(): number;
+    /** @return Quearter (1990) */
+    get quarter(): number;
+    /** @return Month number (1-12) */
+    get m(): number;
+    /** @return Month number (1-12) */
+    get month(): number;
+    get d(): number;
+    /** @return Day of the month number (1-31) */
+    get day(): number;
+    /** @return Day of the week number (1-7, ma = 1, di = 2, ... zo = 7) */
+    get weekDay(): number;
+    /** @return Hour (0-23) */
+    get hr(): number;
+    /** @return Hour (0-23) */
+    get hour(): number;
+    /** @return Minute (0-59) */
+    get min(): number;
+    /** @return Minute (0-59) */
+    get minute(): number;
+    /** @return Second (0-59) */
+    get sec(): number;
+    /** g@return Second (0-59) */
+    get second(): number;
+    /** @return MilliSecond (0-999) */
+    get ms(): number;
+    /** @return MilliSecond (0-999) */
+    get millisecond(): number;
+    /** @return Week number (1-53) */
+    get weekNr(): number;
+    /** @return Number of milliseconds since epoch (01-01-1970 00:00:00) */
+    get millis(): number;
+    /** @return Number of days in a month (28, 29, 30 or 31) */
+    get daysInMonth(): number;
+    /** @return Number of days in year of this JSDateTime */
+    get daysInYear(): number;
+    get yearToDate(): number;
+    /**
+     * Return a new JSDateTime object with the given data, based on this JSDateTime object.
+     * The old value is NOT changed
+     * @param val the new values. if no values are given, the current values are used
+     * @param locale a new locale, if not given, the current locale is used
+     * @return a new JSDateTime with updated values
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1));  // 01-01-2020
+     * const date2 = date.set({year: 1990, month: 12, day: 1}); // 01-12-1990
+     */
+    set(val: JSDateSetterType, locale?: string): JSDateTime;
+    /**
+     * Returns a new JSDateTime object where the date is set to the start of a period.
+     * The old value is NOT changed
+     * @param period the period
+     * @return a new readonly JSDateTime object
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 11, 31)); // 31-12-2020
+     * const date2 = date.startof('year');                       // 01-01-2020
+     */
+    startOf(period: 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour'): JSDateTime;
+    /**
+     * Returns a new JSDateTime object where the date is set to the end of a period.
+     * The old value is NOT changed.
+     * @param period the period
+     * @return a new readonly JSDateTime object
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1)); // 01-01-2020
+     * const date2 = date.endOf('year');                       // 31-12-2020
+     */
+    endOf(period: 'year' | 'quarter' | 'month' | 'week' | 'day' | 'hour'): JSDateTime;
+    /**
+     * Add values to a date. Starting with the biggest unit (year) to the smallest (millisecond).
+     * The old value is NOT changed.
+     * @param addVals object with values to add to the date
+     * @return a new readonly JSDateTime object
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1)); // 01-01-2020
+     * const date2 = date.add({ years: 1, months: 1, days: 1 });  // 02-02-2021
+     */
+    plus({ years, months, weeks, days, hours, minutes, seconds, milliseconds }: JSChangeDateTimeType): JSDateTime;
+    /**
+     * Check if this JSDateTime object is between two other JSDates or Dates
+     * @param dates a tuple with two JSDateTime|Date instances
+     * @param included if the start and end date should be included (default: false)
+     * @return is this JSDateTime between the two dates (true|false)
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1));        // 01-01-2020
+     * date.isBetween([new Date(2030, 0, 1), new Date(2010, 0, 1)]);  // true
+     * date.isBetween([new Date(2010, 0, 1), new Date(2015, 0, 1)]);  // false
+     * @example examples for the include-parameter
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1));                       // 01-01-2020
+     * date.isBetween([new Date(2020, 0, 1), new Date(2010, 0, 1)]);                 // false
+     * date.isBetween([new Date(2020, 0, 1), new Date(2010, 0, 1), true]);           // true
+     * date.isBetween([new Date(2020, 0, 1), new Date(2010, 0, 1), [true, false]]);  // true
+     */
+    isBetween(dates: [JSDateTime | Date, JSDateTime | Date], included?: boolean | [boolean, boolean]): boolean;
+    /**
+     * Is this JSDateTime before another Date or JSDateTime.
+     * JSDateTime implements the .valueOf() method of objects, so it is possible to compare JSDateTime objects and Date objects through <, >, ==, <= and >=.
+     * @param date the date to compare to
+     * @param includeEqual if the dates are equal, return true or false? (default: false)
+     * @return is the given date before this JSDateTime (true/false)
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1)); // 01-01-2020
+     * date.isBefore(new Date(2021, 0, 1));                    // true
+     * date.isBefore(new Date(2019, 0, 1));                    // false
+     */
+    isBefore(date: Date | JSDateTime, includeEqual?: boolean): boolean;
+    /**
+     * Is this JSDateTime after another Date or JSDateTime.
+     * JSDateTime implements the .valueOf() method of objects, so it is possible to compare JSDateTime objects and Date objects through <, >, ==, <= and >=.
+     * @param date the date to compare to
+     * @param includeEqual if the dates are equal, return true or false? (default: false)
+     * @return is the given date after this JSDateTime (true/false)
+     * @example
+     * const date = JSDateTime.fromDate(new Date(2020, 0, 1)); // 01-01-2020
+     * date.isAfter(new Date(2021, 0, 1));                     // false
+     * date.isAfter(new Date(2019, 0, 1));                     // true
+     */
+    isAfter(date: Date | JSDateTime, includeEqual?: boolean): boolean;
+    /**
+     * Checks if a Date or JSDateTime is equal on some level to this JSDateTime. The method checks until given period-level.
+     * If hasSame('xxx', 'day') returns true,  the year, month and day are the same. hours, minutes, seconds and milliseconds are not checked
+     *
+     * @param date Date or JSDateTime object to compare with
+     * @param period the perio that should be the same (default = 'millisecond')
+     * @return if the dates share the same period (true/false)
+     * @example
+     * const jsDate = JSDateTime.fromDate(new Date(2020, 0, 1)); // 01-01-2020
+     * jsDate.hasSame(new Date(2020, 7, 17)), 'year')            // true
+     * jsDate.hasSame(new Date(2020, 7, 17)), 'month')           // true
+     * jsDate.hasSame(new Date(2020, 7, 17)), 'day')             // false
+     * jsDate.hasSame(new Date(2021, 0, 01)), 'year')            // false
+     */
+    hasSame(date: Date | JSDateTime, period?: 'year' | 'month' | 'week' | 'day' | 'hour' | 'minute' | 'second' | 'millisecond'): boolean;
+    /**
+     * Checks if a JSDateTime, Date or millis-since-epoch number is equal to this JSDateTime, since you cannot compare two JSDateTime items with '==' or '===', even with .valueOf() implemented.
+     * This method compares the time and date of the values, not if they are the same objects.
+     *
+     * method `hasSame(date: Date|JSDateTime)` with default period 'millisecond' has the same functionality.
+     *
+     * @param val  the value to compare to
+     * @returns is the given value equal to this JSDateTime
+     * @example
+     * const jsDate = JSDateTime.fromDate(new Date(2020, 0, 1));  // 01-01-2020
+     * jsDate.equals(new Date(2020, 0, 1));                       // true
+     * jsDate.equals(new Date(2020, 0, 2));                       // false
+     * jsDate.equals(JSDateTime.epoch);                           // false
+     * jsDate.equals(0);                                          // false
+     * JSDateTime.epoch().is(0);                                  // true
+     */
+    equals(val: Date | JSDateTime | number): boolean;
+    /**
+     * Clone this JSDateTIme to a new object.
+     * @returns new JSDateTime object with the same time and date as this one
+     */
+    clone(): JSDateTime;
+    /**
+     * A new JSDateTime object with the current date and time
+     * @param locale locale, if different from default (JSData.defaultLocale)
+     * @param formatOptions format options, if different from default (JSData.defaultFormatOptions)
+     * @return readonly JSDateTime object
+     * @example JSDateTime.now() // current Date & time
+     */
+    static now(locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * A new JSDateTime object on 01 januari 1970 00:00:00
+     * @param locale locale, if different from default (JSData.defaultLocale)
+     * @param formatOptions format options, if different from default (JSData.defaultFormatOptions)
+     * @param formatOptions
+     * @returns readonly JSDateTime object with the date 01-01-1970 00:00:00
+     * @example JSDateTime.epoch() // 01-01-1970 00:00:00
+     */
+    static epoch(locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * A new JSDateTime object for a given date (Date)
+     * @param date Javascript Date object for a date
+     * @param locale locale, if different from default (JSData.defaultLocale)
+     * @param formatOptions format options, if different from default (JSData.defaultFormatOptions)
+     * @return readonly JSDateTime object
+     * @example JSDateTime.fromDate(new Date(2020, 0, 1)) // 01-01-2020
+     */
+    static fromDate(date: Date, locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * A new JSDateTime object based on a @see JSDateSetterType.
+     * @param value object with values for a date, like year, month, day, hour, minute, second, millisecond
+     * @param locale locale, if different from default (JSData.defaultLocale)
+     * @param formatOptions format options, if different from default (JSData.defaultFormatOptions)
+     * @return readonly JSDateTime object
+     * @example JSDateTime.from({ year: 2020, month: 1, day: 1 }) // 01-01-2020
+     */
+    static from(value: JSDateSetterType, locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * A new JSDateTime object based on an ISO string
+     * @param iso a date in ISO format (1990-09-07T12:30:55.666Z)
+     * @param locale locale, if different from default (JSData.defaultLocale)
+     * @return readonly JSDateTime object
+     * @example JSDateTime.fromISO('1990-09-07T12:30:55.666Z')
+     */
+    static fromISO(iso: string, locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * A new JSDateTime object based on an ISO string
+     * @param utc a date in UTC format (Fri, 08 Jul 2022 13:34:47 GMT)
+     * @param locale locale, if different from default (JSData.defaultLocale)
+     * @param formatOptions format options, if different from default (JSData.defaultFormatOptions)
+     * @return readonly JSDateTime object
+     * @example JSDateTime.fromUTC('Fri, 08 Jul 2022 13:34:47 GMT')
+     */
+    static fromUTC(utc: string, locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * A new JSDateTime object based on milliseconds sinde 1970-01-01T00:00:00.000Z
+     * @param ms number of milliseconds
+     * @param locale locale if different from default (JSData.defaultLocale)
+     * @param formatOptions if different from default (JSData.defaultFormatOptions)
+     * @return readonly JSDateTime object
+     * @example JSDateTime.fromMillis(0) // 01-01-1970 00:00:00
+     * @example JSDateTime.fromMillis(1000) // 01-01-1970 00:00:01
+     */
+    static fromMillis(ms: number | string, locale?: string, formatOptions?: JSDateTimeFormatOptions): JSDateTime;
+    /**
+     * Formatten van een datum mbv keys. Onderaan deze uitleg staan deze keys
+     * new JSDateTime(2022, 1, 1, 3, 4, 5, 6,789).fo() // "Tue, 01 Feb 2021 03:04:05.678 GMT, 01-02-2011"
+     *
+     * @param format string, like "dddd dd MMMM yyyy HH:mm:ss.SSS" or  DateTimeFormatOptions
+     * @return date-string based on format
+     *
+     * @description Accepted patterns and characters:
+     * | Unit         | Pattern   | Example-Output               | Description                                    |
+     * |--------------|-----------|------------------------------|------------------------------------------------|
+     * | IGNORE CHAR  | `^...^`   | `^HADIHO^`                   | txt between 1st ^ and 2nd ^ are ignored        |
+     * | day of month | `d`       | `7`, `14`                    | Day of the month as digits; no leading zero.   |
+     * |              | `dd`      | `07`, `14`                   | Day of the month as digits; leading zero       |
+     * | day of week  | `ddd`     | `thu`                        | Day of the week as a three-letter abbr.        |
+     * |              | `dddd`    | `thursday`                   | Day of the week as its full name.              |
+     * | month        | `m`       | `1`, `12`                    | Month as digits; no leading zero.              |
+     * |              | `mm`      | `01`, `12`                   | Month as digits; leading zero                  |
+     * |              | `mmm`     | `Aug`                        | Month as a three-letter abbr.                  |
+     * |              | `mmmm`    | `August`                     | Month as its full name.                        |
+     * | year         | `yy`      | `22`, `19`, `07`             | Year as last two digits.                       |
+     * |              | `yyyy`    | `2022`, `2019`, `2007`       | Year as four digits.                           |
+     * | hour         | `H`       | `0`, `13`                    | Hour as digits (0-23); no leading zero.        |
+     * |              | `HH`      | `00`, `13`                   | Hour as digits (0-23); leading zero            |
+     * |              | `h`       | `1`, `12`                    | Hour as digits (0-12); no leading zero.        |
+     * |              | `hh`      | `01`, `12`                   | Hour as digits (0-12); leading zero            |
+     * | minute       | `M`       | `0`, `59`                    | Minute as digits; no leading zero.             |
+     * |              | `MM`      | `00`, `59`                   | Minute as digits; leading zero                 |
+     * | second       | `s`       | `0`, `59`                    | Second as digits; no leading zero.             |
+     * |              | `ss`      | `00`, `59`                   | Second as digits; leading zero                 |
+     * | millisecond  | `S`       | `0`, `999`                   | Millisecond as digits; no leading zero         |
+     * |              | `SSS`     | `000`, `999`                 | Millisecond as digits; leading zero's          |
+     * | am/pm        | `T`       | `A`, `P`                     | AM or PM, 1 character                          |
+     * |              | `TT`      | `am`, `pm`                   | AM or PM, 2 characters                         |
+     * | timezone     | `Z`       | `CEST`, `AEST`               | Timezone name - short version                  |
+     * |              | `ZZ`      | `Central Europe Summer Time` | Timezone name - long version                   |
+     * | tz offset    | `O`       | `+2`, `-4`                   | Timezone offset in hours and minutes (short)   |
+     * |              | `OO`      | `+02:00`                     | Timezone offset in hours and minutes (longer)  |
+     * |              | `OOO`     | `GMT+02:00`                  | Timezone offset in hours and minutes (longest) |
+     *
+     * @example
+     * // example for donderdag 7 oktober 1999 04:30:45.678 (AM), week 40
+     * const dt = JSDateTime.fromDate(new Date());
+     * dt.toFormat('dddd dd mmmm yyyy HH:mm:ss.SSS tt');  // 'donderdag 7 oktober 1999 04:30:45.678 AM'
+     * dt.toFormat('ddd d mmm yy')                        // 'do 7 okt 99'
+     * dt.toFormat('DD-mm-yyyy')                          // '07-10-1990'
+     * dt.toFormat('HH:MM:ss.SSS')                        // '04:30:45.678'
+     * dt.toFormat('hh:MM tt')                            // '04:30 AM'
+     * dt.toFormat('HH:MM OO')                            // '04:30 +02:00'
+     * dt.toFormat('HH:MM Z')                             // '04:30 CEST'
+     * dt.toFormat('^HH:MM ZZ^')                          // 'HH:MM ZZ'
+     */
+    toFormat(format: string | JSDateTimeFormatOptions): string;
+    /** Converteer een format naar een bruikbare replaceable string */
+    private formatBuilder;
+}
+
+/** Type for timezones (<Continent>/<Location>), Is on the bottom side because its very long and just a lot of strings */
+type JSDateTimeZoneType = 'Africa/Abidjan' | 'Africa/Accra' | 'Africa/Algiers' | 'Africa/Bissau' | 'Africa/Cairo' | 'Africa/Casablanca' | 'Africa/Ceuta' | 'Africa/El_Aaiun' | 'Africa/Johannesburg' | 'Africa/Juba' | 'Africa/Khartoum' | 'Africa/Lagos' | 'Africa/Maputo' | 'Africa/Monrovia' | 'Africa/Nairobi' | 'Africa/Ndjamena' | 'Africa/Sao_Tome' | 'Africa/Tripoli' | 'Africa/Tunis' | 'Africa/Windhoek' | 'America/Adak' | 'America/Anchorage' | 'America/Araguaina' | 'America/Argentina/Buenos_Aires' | 'America/Argentina/Catamarca' | 'America/Argentina/Cordoba' | 'America/Argentina/Jujuy' | 'America/Argentina/La_Rioja' | 'America/Argentina/Mendoza' | 'America/Argentina/Rio_Gallegos' | 'America/Argentina/Salta' | 'America/Argentina/San_Juan' | 'America/Argentina/San_Luis' | 'America/Argentina/Tucuman' | 'America/Argentina/Ushuaia' | 'America/Asuncion' | 'America/Atikokan' | 'America/Bahia' | 'America/Bahia_Banderas' | 'America/Barbados' | 'America/Belem' | 'America/Belize' | 'America/Blanc-Sablon' | 'America/Boa_Vista' | 'America/Bogota' | 'America/Boise' | 'America/Cambridge_Bay' | 'America/Campo_Grande' | 'America/Cancun' | 'America/Caracas' | 'America/Cayenne' | 'America/Chicago' | 'America/Chihuahua' | 'America/Costa_Rica' | 'America/Creston' | 'America/Cuiaba' | 'America/Curacao' | 'America/Danmarkshavn' | 'America/Dawson' | 'America/Dawson_Creek' | 'America/Denver' | 'America/Detroit' | 'America/Edmonton' | 'America/Eirunepe' | 'America/El_Salvador' | 'America/Fort_Nelson' | 'America/Fortaleza' | 'America/Glace_Bay' | 'America/Godthab' | 'America/Goose_Bay' | 'America/Grand_Turk' | 'America/Guatemala' | 'America/Guayaquil' | 'America/Guyana' | 'America/Halifax' | 'America/Havana' | 'America/Hermosillo' | 'America/Indiana/Indianapolis' | 'America/Indiana/Knox' | 'America/Indiana/Marengo' | 'America/Indiana/Petersburg' | 'America/Indiana/Tell_City' | 'America/Indiana/Vevay' | 'America/Indiana/Vincennes' | 'America/Indiana/Winamac' | 'America/Inuvik' | 'America/Iqaluit' | 'America/Jamaica' | 'America/Juneau' | 'America/Kentucky/Louisville' | 'America/Kentucky/Monticello' | 'America/La_Paz' | 'America/Lima' | 'America/Los_Angeles' | 'America/Maceio' | 'America/Managua' | 'America/Manaus' | 'America/Martinique' | 'America/Matamoros' | 'America/Mazatlan' | 'America/Menominee' | 'America/Merida' | 'America/Metlakatla' | 'America/Mexico_City' | 'America/Miquelon' | 'America/Moncton' | 'America/Monterrey' | 'America/Montevideo' | 'America/Nassau' | 'America/New_York' | 'America/Nipigon' | 'America/Nome' | 'America/Noronha' | 'America/North_Dakota/Beulah' | 'America/North_Dakota/Center' | 'America/North_Dakota/New_Salem' | 'America/Ojinaga' | 'America/Panama' | 'America/Pangnirtung' | 'America/Paramaribo' | 'America/Phoenix' | 'America/Port-au-Prince' | 'America/Port_of_Spain' | 'America/Porto_Velho' | 'America/Puerto_Rico' | 'America/Punta_Arenas' | 'America/Rainy_River' | 'America/Rankin_Inlet' | 'America/Recife' | 'America/Regina' | 'America/Resolute' | 'America/Rio_Branco' | 'America/Santarem' | 'America/Santiago' | 'America/Santo_Domingo' | 'America/Sao_Paulo' | 'America/Scoresbysund' | 'America/Sitka' | 'America/St_Johns' | 'America/Swift_Current' | 'America/Tegucigalpa' | 'America/Thule' | 'America/Thunder_Bay' | 'America/Tijuana' | 'America/Toronto' | 'America/Vancouver' | 'America/Whitehorse' | 'America/Winnipeg' | 'America/Yakutat' | 'America/Yellowknife' | 'Antarctica/Casey' | 'Antarctica/Davis' | 'Antarctica/DumontDUrville' | 'Antarctica/Macquarie' | 'Antarctica/Mawson' | 'Antarctica/Palmer' | 'Antarctica/Rothera' | 'Antarctica/Syowa' | 'Antarctica/Troll' | 'Antarctica/Vostok' | 'Asia/Almaty' | 'Asia/Amman' | 'Asia/Anadyr' | 'Asia/Aqtau' | 'Asia/Aqtobe' | 'Asia/Ashgabat' | 'Asia/Atyrau' | 'Asia/Baghdad' | 'Asia/Baku' | 'Asia/Bangkok' | 'Asia/Barnaul' | 'Asia/Beirut' | 'Asia/Bishkek' | 'Asia/Brunei' | 'Asia/Chita' | 'Asia/Choibalsan' | 'Asia/Colombo' | 'Asia/Damascus' | 'Asia/Dhaka' | 'Asia/Dili' | 'Asia/Dubai' | 'Asia/Dushanbe' | 'Asia/Famagusta' | 'Asia/Gaza' | 'Asia/Hebron' | 'Asia/Ho_Chi_Minh' | 'Asia/Hong_Kong' | 'Asia/Hovd' | 'Asia/Irkutsk' | 'Asia/Jakarta' | 'Asia/Jayapura' | 'Asia/Jerusalem' | 'Asia/Kabul' | 'Asia/Kamchatka' | 'Asia/Karachi' | 'Asia/Kathmandu' | 'Asia/Khandyga' | 'Asia/Kolkata' | 'Asia/Krasnoyarsk' | 'Asia/Kuala_Lumpur' | 'Asia/Kuching' | 'Asia/Macau' | 'Asia/Magadan' | 'Asia/Makassar' | 'Asia/Manila' | 'Asia/Nicosia' | 'Asia/Novokuznetsk' | 'Asia/Novosibirsk' | 'Asia/Omsk' | 'Asia/Oral' | 'Asia/Pontianak' | 'Asia/Pyongyang' | 'Asia/Qatar' | 'Asia/Qostanay' | 'Asia/Qyzylorda' | 'Asia/Riyadh' | 'Asia/Sakhalin' | 'Asia/Samarkand' | 'Asia/Seoul' | 'Asia/Shanghai' | 'Asia/Singapore' | 'Asia/Srednekolymsk' | 'Asia/Taipei' | 'Asia/Tashkent' | 'Asia/Tbilisi' | 'Asia/Tehran' | 'Asia/Thimphu' | 'Asia/Tokyo' | 'Asia/Tomsk' | 'Asia/Ulaanbaatar' | 'Asia/Urumqi' | 'Asia/Ust-Nera' | 'Asia/Vladivostok' | 'Asia/Yakutsk' | 'Asia/Yangon' | 'Asia/Yekaterinburg' | 'Asia/Yerevan' | 'Atlantic/Azores' | 'Atlantic/Bermuda' | 'Atlantic/Canary' | 'Atlantic/Cape_Verde' | 'Atlantic/Faroe' | 'Atlantic/Madeira' | 'Atlantic/Reykjavik' | 'Atlantic/South_Georgia' | 'Atlantic/Stanley' | 'Australia/Adelaide' | 'Australia/Brisbane' | 'Australia/Broken_Hill' | 'Australia/Currie' | 'Australia/Darwin' | 'Australia/Eucla' | 'Australia/Hobart' | 'Australia/Lindeman' | 'Australia/Lord_Howe' | 'Australia/Melbourne' | 'Australia/Perth' | 'Australia/Sydney' | 'Europe/Amsterdam' | 'Europe/Andorra' | 'Europe/Astrakhan' | 'Europe/Athens' | 'Europe/Belgrade' | 'Europe/Berlin' | 'Europe/Brussels' | 'Europe/Bucharest' | 'Europe/Budapest' | 'Europe/Chisinau' | 'Europe/Copenhagen' | 'Europe/Dublin' | 'Europe/Gibraltar' | 'Europe/Helsinki' | 'Europe/Istanbul' | 'Europe/Kaliningrad' | 'Europe/Kiev' | 'Europe/Kirov' | 'Europe/Lisbon' | 'Europe/London' | 'Europe/Luxembourg' | 'Europe/Madrid' | 'Europe/Malta' | 'Europe/Minsk' | 'Europe/Monaco' | 'Europe/Moscow' | 'Europe/Oslo' | 'Europe/Paris' | 'Europe/Prague' | 'Europe/Riga' | 'Europe/Rome' | 'Europe/Samara' | 'Europe/Saratov' | 'Europe/Simferopol' | 'Europe/Sofia' | 'Europe/Stockholm' | 'Europe/Tallinn' | 'Europe/Tirane' | 'Europe/Ulyanovsk' | 'Europe/Uzhgorod' | 'Europe/Vienna' | 'Europe/Vilnius' | 'Europe/Volgograd' | 'Europe/Warsaw' | 'Europe/Zaporozhye' | 'Europe/Zurich' | 'Indian/Chagos' | 'Indian/Christmas' | 'Indian/Cocos' | 'Indian/Kerguelen' | 'Indian/Mahe' | 'Indian/Maldives' | 'Indian/Mauritius' | 'Indian/Reunion' | 'Pacific/Apia' | 'Pacific/Auckland' | 'Pacific/Bougainville' | 'Pacific/Chatham' | 'Pacific/Chuuk' | 'Pacific/Easter' | 'Pacific/Efate' | 'Pacific/Enderbury' | 'Pacific/Fakaofo' | 'Pacific/Fiji' | 'Pacific/Funafuti' | 'Pacific/Galapagos' | 'Pacific/Gambier' | 'Pacific/Guadalcanal' | 'Pacific/Guam' | 'Pacific/Honolulu' | 'Pacific/Kiritimati' | 'Pacific/Kosrae' | 'Pacific/Kwajalein' | 'Pacific/Majuro' | 'Pacific/Marquesas' | 'Pacific/Nauru' | 'Pacific/Niue' | 'Pacific/Norfolk' | 'Pacific/Noumea' | 'Pacific/Pago_Pago' | 'Pacific/Palau' | 'Pacific/Pitcairn' | 'Pacific/Pohnpei' | 'Pacific/Port_Moresby' | 'Pacific/Rarotonga' | 'Pacific/Tahiti' | 'Pacific/Tarawa' | 'Pacific/Tongatapu' | 'Pacific/Wake' | 'Pacific/Wallis';
+
+declare class JSDuration {
+    /** Een van de 2 JSDateTimes om te vergelijken */ private jsdate1;
+    /** Een van de 2 JSDateTimes om te vergelijken */ private jsdate2;
+    /**
+     * Constructor voor een JSDuration. Gebruik om het verschil in tijd tussen 2 JSDateTimes of Dates te berekenen.
+     *
+     * @param jsd1 de 1e JSDateTime/Date om het verschil mee uit te rekenen.
+     * @param jsd2 (optioneel) de andere JSDateTime/Date om het verschil mee te berekenen (default = Date.now())
+     *
+     * @example
+     * // verschil tussen 01-01-1970 & NU
+     * const dur = new JSDuration(JSDateTime.epoch());
+     * @example
+     * // verschil tussen nu en 1 dag, 30min later
+     * let dur = new JSDuration(JSDateTime.now(), JSDateTime.now().plus({ days: 1, minutes: 30 }));
+     * console.log(dur.inDays);                             // 1
+     * console.log(dur.differenceIn(['hours', 'minutes'])); // { hours: 24, minutes: 30 }
+     *
+     * let dur = new JSDuration(JSDateTime.now(), JSDateTime.now().plus({ days: 1, minutes: 30, seconds: 30 }));
+     * console.log(dur.differenceIn(['hours', 'minutes']))  // { hours: 24, minutes: 30, rest: 30_000 }
+     */
+    constructor(jsd1: Date | JSDateTime, jsd2?: Date | JSDateTime);
+    /** @returns Aantal absolute milliseconden tussen de twee JSDateTimes van deze duration (altijd positief) */
+    private get ms();
+    /** @returns Aantal milliseconden tussen de twee datums. */
+    get inMillis(): number;
+    /** @returns Aantal HELE seconden tussen de twee datums. */
+    get inSeconds(): number;
+    /** @returns Aantal HELE minuten tussen de twee datums. */
+    get inMinutes(): number;
+    /** @returns Aantal HELE uren tussen de twee datums. */
+    get inHours(): number;
+    /** @returns Aantal HELE dagen tussen de twee datums. */
+    get inDays(): number;
+    /** @returns Aantal HELE weken tussen de twee datums. */
+    get inWeeks(): number;
+    /** @returns Een overzicht van alle gehele waarden tussen de twee datums  */
+    get inAllTypes(): {
+        milliseconds: number;
+        seconds: number;
+        minutes: number;
+        hours: number;
+        days: number;
+        weeks: number;
+    };
+    /**
+     * Bereken het verschil tussen de twee datums in de gewenste types.
+     * Dat is het verschil tov de inXXX-get-functions, die geven alleen het verschil in gehele eenheden van dat type
+     * @todo: TODO: maanden en jaren nog niet goed
+     * @param types een array van de gewenste types
+     * @returns {DiffReturnType}een object met daarin de waarden van de gewenste types
+     * @example
+     * const dur = new JSDuration(JSDateTime.now(), JSDateTime.now().plus({ days: 1, minutes: 30 }));
+     * dur.differenceIn(['hours', 'minutes']);  // { hours: 24, minutes: 30 }
+     * dur.differenceIn(['days', 'minutes']);   // { days: 1, minutes: 30 }
+     * dur.differenceIn(['hours']);             // { hours: 24, rest: 1_800_000 }
+     */
+    differenceIn(types: DiffFnType[]): DiffReturnType;
+}
+type DiffFnType = 'weeks' | 'days' | 'hours' | 'minutes' | 'seconds' | 'milliseconds';
+type DiffReturnType = {
+    /** Number of milliseconds in this difference */
+    milliseconds?: number;
+    /** Number of seconds in this difference */
+    seconds?: number;
+    /** Number of minutes in this difference */
+    minutes?: number;
+    /** Number of hours in this difference */
+    hours?: number;
+    /** Number of days in this difference */
+    days?: number;
+    /** Number of weeks in this difference */
+    weeks?: number;
+    /** Number of milliseconds left after subtracting all other wanted date-parts */
+    rest?: number;
+};
+
+/**
+ * Controleer of een string een BSN bevat. Om dat te doen worden alle karakters, behalve letters en getallen gewist.
+ * Als er een of meer BSNs aangetroffen worden, worden ze allemaal teruggeven in een array.
+ * @param txt a string which could contain a BSN
+ * @returns false when there is no BSN or a tuple [true, Array<string>] where the string-array contains all found BSNs
+ * @example
+ * hasBSN('123456789')                       // [false, []]
+ * hasBSN('200644440')                       // [true, ['200644440']]
+ * hasBSN('xxx200644440xxx')                 // [true, ['200644440']]
+ * hasBSN('xxx123456789xxx')                 // [false, []]
+ * hasBSN('200x644x440')                     // [false, []]
+ * hasBSN('200644440, 200644440, 200644440') // [true, ['200644440','200644440','200644440']]
+ */
+declare function hasBSN(txt: string): [boolean, Array<string>];
+
+type RGBType = [number, number, number, number?];
+/**
+ * Bepaal op basis van de achtergrondkleur wat de kleur van de tekst moet zijn (zwart of wit).
+ * - alpha-channel wordt genegeerd.
+ * - gebaseerd op WCAG-guidelines
+ * @param bgColor de achtergrondkleur van de tekst. string? hex colors (#abc of #abcdef). tuple? [r, g, b]
+ * @returns zwart of wit (hex-color of rgb-tuple)
+ * @example
+ * txtColorDecision('#ffffff');       // '#000000'
+ * txtColorDecision('#000000');       // '#ffffff'
+ * txtColorDecision([0, 0, 0]);       // [255, 255, 255]
+ * txtColorDecision([255, 255, 255]); // [0, 0, 0]
+ */
+declare function calculateTxtColor(bgColor: string | RGBType): '#ffffff' | '#000000' | [0, 0, 0] | [255, 255, 255];
+
+/**
+ * Controleer of een opgegeven rekeningnummer wel een IBAN, nummer is.
+ * @param rekNr het rekeningsnummer dat gecontroleerd moet worden
+ * @returns een tuple met een boolean en een string
+ * - `[true, 'LAND']` als het een geldige IBAN is
+ * - `[false, 'invalid format']` als het niet voldoet aan het IBAN-formaat
+ * - `[false, 'invalid landcode']` als de landcode niet bestaat (in onze gegevens)
+ * - `[false, 'invalid length']` als het niet voldoet aan de lengte-eis die hoort bij de landcode
+ * - `[false, 'invalid restgetal']` als het niet voldoet aan de mod-97 berekening voor IBAN
+ * @example
+ * const [bool, msg] = isIBAN('NL28 ASNB 0709 1665 92');  // [true, 'Nederland']
+ * const [bool, msg] = isIBAN('NL28 ASNB 0709 1665 922'); // [false, 'invalid length']
+ * const [bool, msg] = isIBAN('NL28 ASNB 0709 1665 93');  // [false, 'invalid restgetal']
+ * const [bool, msg] = isIBAN('ABCDEFG');                 // [false, 'invalid format']
+ * const [bool, msg] = isIBAN('QQ28 ASNB 0709 1665 93');  // [false, 'invalid landcode']
+ */
+declare function isIBAN(rekNr: string): [boolean, string];
+/** Een array van landen met de landcode en de lengte van een IBAN. Ook een voorbeeld-IBAN */
+declare const IBAN_GEGEVENS_MET_TEST_PER_LAND: Readonly<Array<{
+    /** landnaam waar deze settings van toepassing zijn */ land: string;
+    /** code voor het land zoals dat in een IBAN voorkomt */ code: string;
+    /** de totale lengte van het IBAN-rekeningnummer */ length: number;
+    /** een voorbeeld-IBAN-nummer */ IBAN: string;
+}>>;
+
+type BaseEventProps = {
+    /** ID van een event */
+    id: number | string | (() => number | string);
+    /** Title van een event */
+    title: string | (() => string);
+    /** Start datetime or date event */
+    startDateTime: Date | JSDateTime;
+    /** (optional) End datetime */
+    endDateTime?: Date | JSDateTime;
+    /** Is event an allday-event (hide starttime) */
+    allDay?: boolean;
+    /** Event description */
+    description?: React$1.ReactNode | (() => React$1.ReactNode);
+    /** Background-color for event (hexColors, default = #ee8000) */
+    evtColor?: HexColor | ColorProp | ((hovered?: boolean) => HexColor | ColorProp);
+    /** (optional) Tooltip tekst */
+    tooltip?: React$1.ReactNode;
+};
+type CalendarOptions<T> = {
+    /** De locale voor de calendar. default = 'nl-NL' */
+    locale?: string;
+    /** Zichtbare dagen als set (default 1,2,3,4,5,6,7 (ma = 1, di = 2,... zo = 7)) @deprecated */
+    visibleDays?: Set<number>;
+    /** Settings for events */
+    event?: {
+        /** Settings for allday events */
+        allday?: EventOptions<T>;
+        /** Settings for timed events */
+        timed?: EventOptions<T>;
+    };
+    /** Settings for today */
+    today?: {
+        /** Background color for today (HexColors, default = #3b59ec) */
+        bgColor?: (hovered: boolean, date?: Date | JSDateTime) => HexColor | ColorProp;
+        /** Do not show which day is today */
+        doNotMarkToday: boolean;
+    };
+    tooltipColor?: ColorProp;
+};
+type EventOptions<T> = {
+    /** Dackground color for event (hex color, default = #ff8000) */
+    evtColor?: (evt: T, hovered: boolean) => HexColor | ColorProp;
+};
+type HexColor = `#${string}`;
+
+type FourweekViewProps<T extends BaseEventProps> = {
+    /** Events voor deze view */
+    events: T[];
+    /** Opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** Event aangeklikt */
+    onEventClick?: (e: T, event: React$1.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React$1.MouseEvent<HTMLElement>) => void;
+    /** Huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * Maak een vierweken-view (grid) met events
+ * @param props
+ * @returns
+ */
+declare function FourweeksView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: FourweekViewProps<T>): JSX.Element;
+
+type MonthViewProps<T extends BaseEventProps> = {
+    /** Events voor deze view */
+    events: T[];
+    /** Opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** Event aangeklikt */
+    onEventClick?: (e: T, event: React$1.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React$1.MouseEvent<HTMLElement>) => void;
+    /** Huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * Maak een maand-view (grid) met events
+ * @param props
+ * @returns
+ */
+declare function MonthView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: MonthViewProps<T>): JSX.Element;
+
+type WeekViewProps<T extends BaseEventProps> = {
+    /** Events voor deze view */
+    events: T[];
+    /** Opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** Event aangeklikt */
+    onEventClick?: (e: T, event: React$1.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React$1.MouseEvent<HTMLElement>) => void;
+    /** Huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * Maak een week-view (grid) met events
+ * @param props
+ * @returns een weekview (grid) met de events
+ * @ex
+ */
+declare function WeekView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, events: orgEvents, onDayClick, }: WeekViewProps<T>): JSX.Element;
+
+declare const Calendar: {
+    Month: typeof MonthView;
+    Week: typeof WeekView;
+    Fourweeks: typeof FourweeksView;
+};
+
+type PositionProp = 'bottom';
+declare class Tooltip extends React$1.Component<{
+    content?: React$1.ReactNode;
+    color?: ColorProp;
+    children: React$1.ReactNode;
+    display?: 'block' | 'inline';
+}> {
+    static defaultProps: {
+        position: PositionProp;
+        color: ColorProp;
+        content: React$1.ReactNode;
+        display: 'block' | 'inline';
+    };
+    state: {
+        active: boolean;
+    };
+    show: () => void;
+    hide: () => void;
+    render(): JSX.Element;
+}
+
+type BaseInputProps<T extends any = void> = {
+    /** De help-tag  van een input (ion loon gebruikt voor help */
+    helpTag?: string;
+    /** Is dit veld disabled ? (optioneel) */
+    disabled?: boolean;
+    /** Name input: gebruikt voor een `<label>` als er geen label gedefinieerd is & de name-attribuut `<input>` */
+    name: string;
+    /** ID voor de input: gebruikt voor een `<label for="*id*">`. default wordt anders de `name`-prop gebruik */
+    id?: string;
+    /** Een tooltip voor de button */
+    tooltip?: string;
+    /** Label voor de input, als dat afwijkt van de name-attribuut */
+    label?: string;
+    /** Label wordt alleen gebruikt voor accessibility, dus is onzichtbaar op het scherm. (default `false`) */
+    labelHidden?: boolean;
+    /** Grootte van de input (default = `m`, normal) */
+    size?: SizeProp;
+    /** Waar moet de tekst van de input uitgelijnd worden (default = `l`, links) */
+    textAlign?: TextAlignmentProp;
+    /** De input is horizontaal, label & input op 1 lijn. (default = `horizontal`) */
+    direction?: DirectionProp;
+    /** Een object met validatie-regels */
+    validation?: FormValidationType<T>;
+    /** Moet de spell-checker van de browser aanstaan voor deze input? (default `false`) */
+    spellCheck?: boolean;
+    /** Eigen errorMessage voor validatie buiten component om */
+    errorMessage?: string | ((value: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string);
+    /** Placeholder in input (optioneel) */
+    placeholder?: string;
+    /** Welk (virtueel) toetsenbord moet er gebruikt worden? (smartphones, tablets) */
+    keyboardType?: KeyboardTypeProp;
+    /** `onKeyDown`-event-callback, bijvoorbeeld voor het gebruik van Hotkeys als dit element focused is */
+    onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
+    /** `onFocus`-event-callback, met optionele helpTag (als opgegeven) */
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, helpTag?: string) => void;
+    /** (optionele) Andere icoontjes voor op de inputs. Anders worden de default-waarden gebruikt. */
+    icons?: {
+        /** Icon aan start van een input */
+        start?: IconProp | string;
+        /**
+         * Icon aan eind van een input
+         * @param v: valid
+         * @returns een fontawesome icon-prop of een fontawesome icon string
+         */
+        end?: (v: boolean) => IconProp | string;
+    };
+};
+type FormValidationType<T extends any = void> = {
+    /** Is een value required? */
+    required?: boolean;
+    /**
+     * - Min value voor numbers
+     * - Min-length voor strings
+     * - Min-waarde voor ranges,
+     * - Minimaal aantal selected in multiselect,
+     * - Min-date voor datum/tijd ("YYYY-MM-DD", "HH:mm" of "YYYY-MM-DDT:HH:mm").
+     * GEBRUIKT VOOR VALIDATIE */
+    min?: number | string;
+    /**
+     * - Max value voor numbers,
+     * - Max-length voor strings,
+     * - Max-waarde voor ranges,
+     * - Maximaal aantal selected in multiselect,
+     * - Max-date voor datum/tijd ("YYYY-MM-DD", "HH:mm" of "YYYY-MM-DDT:HH:mm").
+     * GEBRUIKT VOOR VALIDATIE */
+    max?: number | string;
+    /** Voor <input type="multirange">: het minimale verschil tussen 2 waarden. */
+    minDiff?: number;
+    /** Voor <input type="multirange">: het maximale verschil tussen 2 waarden. */
+    maxDiff?: number;
+    /** Een pattern voor string-validatie */
+    pattern?: string | RegExp;
+    /**
+     * een extra validatie-methode
+     * @param val de nieuwe te valideren waarde
+     * @returns een string met daarin de foutmelding OF een lege string voor een valid waarde.
+     */
+    onValidate?: (val: T | string | string[] | number | number[] | boolean | Date | FileList | any) => string;
+};
+type InputTypeProp = 'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'range' | 'date' | 'datetime-local' | 'datetime' | 'month' | 'week' | 'time' | 'color' | 'search' | 'multirange' | 'multiselect' | 'select' | 'textarea';
+
+type RadioInputProps = Omit<BaseInputProps, 'icons' | 'labelHidden' | 'spellCheck'> & {
+    value?: string;
+    children?: React$1.ReactNode;
+    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+};
+type RadioItemProps = {
+    /** ID van radio item */
+    id?: string;
+    /** Radio item value */
+    value: string;
+    /** Is disabled */
+    disabled?: boolean;
+    /** Tootlip */
+    tooltip?: string;
+    /** Content */
+    children?: React$1.ReactNode;
+    /** Grootte van de radiobutton (defaulkt = 'm', normal) */
+    size?: SizeProp;
+    /** Kleur van de radiobutton (default = 'l', link) */
+    color?: ColorProp;
+    /** Speciale styling van de radiobutton */
+    styling?: CheckradioStylingType;
+    /** Verticaal of horizontall weergeven? */
+    direction?: DirectionProp;
+    /** Waar moet de tekst van de input uitgelijnd worden (default = 'l', links) */
+    textAlign?: TextAlignmentProp;
+};
+/**
+ * Een groep radio-buttons voor een <input type="radio" />
+ * @param props
+ * @returns een radio-group
+ * @example
+ * <RadioGroup name="radioGroup" value="1" onValueChanged={change}>
+ *   <RadioGroup.Item value="1">Radio 1</RadioGroup.Item>
+ *   <RadioGroup.Item value="2">Radio 2</RadioGroup.Item>
+ * </RadioGroup>
+ * @description alle props voor RadioGroup component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `string`             |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare const RadioGroup: {
+    (props: RadioInputProps): JSX.Element;
+    /**
+     * Een Radio-button voor in de RadioGroup
+     * @param props
+     * @returns een radio-item
+     * @example
+     * <RadioGroup.Item name="item 1" value="item1">Radio item 1</RadioGroup.Item>
+     * @description alle props voor RadioGroup.Item component
+     * | prop              | type                 | default | description                                |
+     * |-------------------|----------------------|---------|--------------------------------------------|
+     * | id                | `string `            | `name`  | de id voor het radioitem                   |
+     * | tooltip           | `string `            |         | tooltip voor het item                      |
+     * | labelHidden       | `boolean`            | false   | de label is verborgen (screenreaders)      |
+     * | disabled          | `boolean`            | false   | de input is disabled                       |
+     * | value             | `string `            | #000000 | de waarde                 (REQUIRED)       |
+     * | children          | `React.ReactNode`    |         | de tekst van het item     (REQUIRED)       |
+     * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+     * | color             | `w`,`d`,`i`,`s`,`p`  | `l`     | de kleur van de input                      |
+     * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+     * |                   | `colored`, `blocky`  |         |                                            |
+     * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+     * | icons             |                      |         | RADIOGROUP HEEFT GEEN ICONS                |
+     */
+    Item: (props: RadioItemProps) => JSX.Element;
+};
+/** DO NOT EXPORT -- INTERN USE ONLY */
+declare function InternRadioItem(props: RadioItemProps & {
+    name: string;
+    selectedItem: string;
+    helpTag?: string;
+    setter: (identifier: string) => void;
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement>, ht?: string) => void;
+}): JSX.Element;
+/**
+ * Een losstaand radio-item om zelf de groep te maken
+ * @param props
+ * @returns een radio-item
+ * @example
+ * <RadioItem name="item 1" value="item1" selecteditem={radioItem}>Radio item 1</RadioItem>
+ * @description alle props voor RadioItem component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | selectedItem      | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | id                | `string `            | `name`  | de id voor het radioitem                   |
+ * | tooltip           | `string `            |         | tooltip voor het item                      |
+ * | labelHidden       | `boolean`            | false   | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | false   | de input is disabled                       |
+ * | value             | `string `            |         | de waarde                 (REQUIRED)       |
+ * | children          | `React.ReactNode`    |         | de tekst van het item     (REQUIRED)       |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | color             | `w`,`d`,`i`,`s`,`p`  | `l`     | de kleur van de input                      |
+ * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+ * |                   | `colored`, `blocky`  |         |                                            |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | setter()          | `function`           |         | (val: string) => void                      |
+ */
+declare const Radio: typeof InternRadioItem;
+
+type CheckboxInputProps = Omit<BaseInputProps, 'icons' | 'labelHidden' | 'spellCheck'> & {
+    /** Kleur van de checkbox (default = 'l', link) */
+    color?: ColorProp;
+    /** Speciale styling van de checkbox */
+    styling?: CheckradioStylingType;
+    /** De waarde */
+    value?: boolean;
+    /** Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param isValid is de waarde gevalideerd en geldig?
+     */
+    onValueChanged?(newVal: boolean, isValid?: boolean): any | void;
+};
+/**
+ * Maak een checkbox input
+ * @param props
+ * @returns een checkbox
+ * @example <Checkbox value={true} {...props}/>
+ * @description alle props voor Checkbox component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | validation        | `FormValidationType` | `{}   ` | de validatie voor de input                 |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
+ * | keyboardType      | `search`, `text`,    | `text`  | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | value             | `boolean`            | `false` | de waarde                                  |
+ * | color             | `l`,`p`,`s`          | `l`     | de kleur van de checkbox                   |
+ * |                   | `d`,`w`,`i`          |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+ * |                   | `colored`, `blocky`  |         |                                            |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | onValueChanged()  | `function`           |         | (value: boolean, valid?: boolean) => void  |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function CheckBox(props: CheckboxInputProps): JSX.Element;
+
+type DateInputProps = BaseInputProps & {
+    /** Start value voor deze input (optional) FORMAT: YYYY-MM-DD */
+    value?: string | Date;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, valid: boolean): any | void;
+};
+/**
+ * Input voor het opgeven van een datum
+ * @param props
+ * @returns input met als value een datum
+ * @example
+ * <DateInput value="2020-01-01" {...props}/>
+ * <DateInput value={new Date()} {...props}/>
+ * @description alle props voor Date component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
+ * | keyboardType      | `search`, `text`,    | `text`  | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `string`, `Date`     | `now()` | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       ` */
+declare function DateInput(props: DateInputProps): JSX.Element;
+
+type DateTimeInputProps = BaseInputProps & {
+    /** Start value voor deze input (optional) FORMAT: YYYY-MM-DDTHH:mm */
+    value?: string | Date;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, valid: boolean): any | void;
+};
+/** Input voor het opgeven van een datum-tijd combinatie
+ * @param props
+ * @returns Een input voor een Datum en Tijd combinatie
+ * @example
+ * <DateTimeInput value="2020-01-01T00:00" {...props}/>
+ * <DateTimeInput value={new Date()} {...props}/>
+ * @description alle props voor DateTime component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
+ * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `string`, `Date`     | `now()` | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function DateTimeInput(props: DateTimeInputProps): JSX.Element;
+
+type TimeInputProps = BaseInputProps & {
+    /** Start value voor deze input (optional) FORMAT: HH:mm:SS */
+    value?: string | Date;
+    /** Grootte van een stap verzetten. het aantal secondes om de klok te verzetten, default = 60 (1 minuut) */
+    step?: number;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, valid: boolean): void;
+};
+/**
+ * Input om een tijd op te geven (HH:mm OF HH:mm:SS) met optionele validatie
+ * @param props
+ * @returns
+ * @example
+ * <TimeInput value="12:30" {...props}>
+ * <TimeInput value={new Date()} {...props}>
+ * * @description alle props voor Time component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
+ * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}   ` | de validatie voor de input                 |
+ * | value             | `string`, `Date`     | `now()` | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function TimeInput(props: TimeInputProps): JSX.Element;
+
+type MultiRangeInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck' | 'helpTag'> & {
+    helpTag?: [string, string];
+    /** Stap-grootte voor de input (optional, default = 1) */
+    step?: number;
+    /** De start-waarde voor de input (optional) */
+    value?: [number, number];
+    /** een eenheid voor de waardes van de input (`%`, `kg/m3`, etc) */
+    unit?: string;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: [number, number], valid: boolean): any | void;
+};
+/**
+ * Gebruik een input met een range-selector; <input type="range" ... />
+ * De min- en max-waarden zijn instelbaar via props.validatie. Default zijn dit (0 en 100)
+ * @param props
+ * @returns een range input met als value een array van twee waarden
+ * @example <MultiRangeInput value={[valueA, valueB]} validation={{min: 10, max: 110}} {...props}/>
+ * @description alle props voor MultiRange component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |          | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`   | de label voor de input                     |
+ * | id                | `string `            | `name`   | de id voor de input                        |
+ * | tooltip           | `string `            |          | tooltip voor de input                      |
+ * | step              | `number `            | `1    `  | stapgrootte voor verschuiving              |
+ * | labelHidden       | `boolean`            | `false`  | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false`  | de input is disabled                       |
+ * | unit              | `string`             | `''`     | Een eenheid voor de waardes uit de range   |
+ * | keyboardType      | `search`, `text`,    | `text `  | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |          |                                            |
+ * |                   | `numeric`, `decimal` |          |                                            |
+ * | validation        | `FormValidationType` | `{}`     | de validatie voor de input                 |
+ * | value             | `[number, number]`   |`[0, 100]`| de waarde als number-tuple                 |
+ * | direction         | `h`,`v`              | `h`      | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |          | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |          | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |          | (value: [number, number], valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |          | (event: React.KeyboardEvent) => void       |
+ */
+declare function MultiRangeInput(props: MultiRangeInputProps): JSX.Element;
+
+type NumberInputProps = BaseInputProps & {
+    /** Stap-grootte voor de input (optional, default = 1) */
+    step?: number;
+    /** De start-waarde voor de input (optional) */
+    value?: number;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: number, valid: boolean): any | void;
+};
+/**
+ * Maak een input van type number met optionele validation.
+ * @see RangeInput voor een input van type range die ook numbers oplevert.
+ * @param props
+ * @returns input with numeric values
+ * @example <NumberInput value={10} onValueChanged={handleChange} {...props} />
+ * @description alle props voor Number component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | step              | `number `            | `1`     | stapgrootte voor de input (+ & - aansturen)|
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,    | `text`  | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `number`             |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: number, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function NumberInput(props: NumberInputProps): JSX.Element;
+
+type RangeInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
+    /** Stap-grootte voor de input (optional, default = 1) */
+    step?: number;
+    /** een getals-unit (`%`, `kg/m3`, etc) om weer te geven op de range-input */
+    unit?: string;
+    /** De start-waarde voor de input (optional) */
+    value?: number;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: number, valid: boolean): any | void;
+};
+/**
+ * Gebruik een input met een range-selector; <input type="range" ... />
+ * De min- en max-waarden zijn instelbaar via props.validatie. Default zijn dit (0 en 100)
+ * @see NumberInput om een nimerieke waarde in te typen
+ * @param props
+ * @returns een input om een range te selecteren
+ * @example <RangeInput value={value} validation={{min: 10, max: 110}} {...props}/>
+ * @description alle props voor Range component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string `            | `name`  | de label voor de input                     |
+ * | id                | `string `            | `name`  | de id voor de input                        |
+ * | tooltip           | `string `            |         | tooltip voor de input                      |
+ * | step              | `number `            | `1    ` | stapgrootte voor verschuiving              |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | unit              | `string `            | ''      | een eenheid voor de input                  |
+ * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `number `            |         | de waarde                                  |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string  `           |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function RangeInput(props: RangeInputProps): JSX.Element;
+
+type ColorInputProps = BaseInputProps & {
+    /** Start value voor deze input (optioneel) */
+    value?: string;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+};
+/**
+ * Maak een input voor hexadecimale kleuren.
+ * altijd: #000000 t/m #ffffff
+ * @param props
+ * @returns input om een color te selecteren
+ * @example <ColorInput value="#FF8000" {...props}/>
+ * @description alle props voor Color component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string`             |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string`             | `name`  | de label voor de input                     |
+ * | id                | `string`             | `name`  | de id voor de input                        |
+ * | tooltip           | `string`             |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `string`             |`#000000`| de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`             |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`             |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function ColorInput(props: ColorInputProps): JSX.Element;
+
+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 */
+    tooltip?: string;
+};
+/**
+ * Maak een input die verborgen is maar wel een waarde moet hebben.
+ * @param props
+ * @returns een hidden input
+ * @example <HiddenInput value={value} {...props} />
+ * @description alle props voor Hidden component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | id                | `string `            | `name`  | de id voor de input                        |                                         |
+ * | value             | `string `            | ''      | de waarde                                  |
+ * | required          | `boolean`            |         |                                            |
+ */
+declare function HiddenInput(props: HiddenInputProps): JSX.Element;
+
+type SelectOptionType = {
+    /** De waarde van een option */
+    value: number | string;
+    /** Is deze select option disabled */
+    disabled?: boolean;
+    /** De naam van een option (optioneel, bij undefined wordt de waarde gebruikt) */
+    label?: string;
+};
+type SelectOptionGroupType = {
+    /** De naam van de <optgroup> */
+    label: string;
+    /** De options */
+    selectOptions: SelectOptionType[];
+};
+
+type MultiSelectInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
+    /** De waarde */
+    value?: string[];
+    /** De values voor de options. DEZE MOETEN UNIEK ZIJN! */
+    options: string[] | SelectOptionType[] | SelectOptionGroupType[];
+    /** Aantal zichtbare rijen zonder scrollen */
+    rows?: number;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string[], valid: boolean): void;
+};
+/**
+ * Maak een select waarin meerdere opties geselecteerd kunnen worden.
+ * Wordt weergegeven als een lijstje waarin met ctrl-click, shift-click of cmd-click 2 of meer waarden geselecteerd kunnen worden.
+ * - lijstje van strings
+ * - lijstje van {value: string, label: string, disabled: boolean}
+ * - lijstje van {value: string, label: string, disabled: boolean} per group (<optgroup>)
+ * @see Select voor een select waarin maar 1 waarde geselecteerd kan worden.
+ * @param props
+ * @returns Een MultiSelect waarvan de value ALTIJD een string[] is. Ook als er 1 optie geselecteerd is.
+ * @example <MultiSelect value={['a', 'b']} options={['a', 'b', 'c']} {...props}/>
+ * @description alle props voor MultiSelect component
+ * | prop              | type                      | default | description                                |
+ * |-------------------|---------------------------|---------|--------------------------------------------|
+ * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string`                  | `name`  | de label voor de input                     |
+ * | rows              | `number`                  | `6`     | zichtbare rijen in de select               |
+ * | id                | `string`                  | `name`  | de id voor de input                        |
+ * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`                 | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`       |         |                                            |
+ * |                   | `numeric`, `decimal`      |         |                                            |
+ * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
+ * | value             | `string[]`                | `[]`    | de waarde                                  |
+ * | options           | `string[]`                | `[]`    | de opties                                  |
+ * |                   | `SelectOptionType[]`      |         |                                            |
+ * |                   | `SelectOptionGroupType[]` |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`                  |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`                |         | (value: string[], valid?: boolean) => void |
+ * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function MultiSelect(props: MultiSelectInputProps): JSX.Element;
+
+type SelectInputProps = Omit<BaseInputProps, 'icons' | 'spellCheck'> & {
+    /** De waarde */
+    value?: number | string;
+    /** De values voor de options. DEZE MOETEN UNIEK ZIJN! */
+    options: string[] | SelectOptionType[] | SelectOptionGroupType[];
+    /** Grootte input (optioneel) */
+    size?: SizeProp;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string | number, valid: boolean): void;
+};
+/**
+ * Een select-input om een waarde te selecteren uit een lijstje
+ * - lijstje van strings
+ * - lijstje van `{value: string, label: string, disabled: boolean}`
+ * - lijstje van `{value: string, label: string, disabled: boolean}` per group (`<optgroup>`)
+ * @see MultiSelect voor een select waar meerdere waarden mogelijk zijn.
+ * @param props
+ * @returns  een Select component
+ * @example <Select {...props}/>
+ * @description alle props voor Number component
+ * | prop              | type                      | default | description                                |
+ * |-------------------|---------------------------|---------|--------------------------------------------|
+ * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string`                  | `name`  | de label voor de input                     |
+ * | rows              | `number`                  | `6`     | zichtbare rijen in de select               |
+ * | id                | `string`                  | `name`  | de id voor de input                        |
+ * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`                 | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`       |         |                                            |
+ * |                   | `numeric`, `decimal`      |         |                                            |
+ * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
+ * | value             | `string`                  |         | de waarde                                  |
+ * | options           | `string[]`                | `[]`    | de opties                                  |
+ * |                   | `SelectOptionType[]`      |         |                                            |
+ * |                   | `SelectOptionGroupType[]` |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`                  |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function Select(props: SelectInputProps): JSX.Element;
+
+type EmailInputProps = BaseInputProps & {
+    /** Start value voor deze input (optioneel) */
+    value?: string;
+    /** Speciaal voor password-managers. Wat is de functie van deze input */
+    autocomplete?: AutoCompleteType;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param isValid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+};
+/**
+ * Maak een input van een tekst-type met optionele validation.
+ * een ingevoerd e-mailadres wordt al automatisch gevalideert met een regex.
+ * Onder validatie kan zo nodig een ander pattern worden opgegeven.
+ * @param props
+ * @returns een input met als type e-mail
+ * @example <EmailInput value=" {...props} />
+ * @description alle props voor Email component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string`             |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string`             | `name`  | de label voor de input                     |
+ * | id                | `string`             | `name`  | de id voor de input                        |
+ * | spellCheck        | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | autoComplete      | `AutoCompleteType`   | `email` | de autocomplete type (password managers)   |
+ * | tooltip           | `string`             |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |         |                                            |
+ * |                   | `numeric`, `decimal` |         |                                            |
+ * | validation        | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value             | `string`             |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`             |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`             |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ *
+ */
+declare function EmailInput(props: EmailInputProps): JSX.Element;
+
+type PasswordInputProps = BaseInputProps & {
+    /** Start value voor deze input (optioneel) */
+    value?: string;
+    /** Speciaal voor password-managers. Wat is de functie van deze input */
+    autocomplete?: AutoCompleteType;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+    revealPasswordTooltip?: string;
+};
+/**
+ * Maak een input van een tekst-type met optionele validation.
+ * Het wachtwoord wordt door **** verborgen.
+ * @param props
+ * @returns een input met type password
+ * @example <PasswordInput {...props}/>
+ * @description alle props voor Password component
+ * | prop                  | type                 | default | description                                |
+ * |-----------------------|----------------------|---------|--------------------------------------------|
+ * | name                  | `string`             |         | de naam voor de input (REQUIRED)           |
+ * | label                 | `string`             | `name`  | de label voor de input                     |
+ * | id                    | `string`             | `name`  | de id voor de input                        |
+ * | autoComplete          | `AutoCompleteType`   |         | de autocomplete type (password managers)   |
+ * | spellCheck            | `boolean`            | `false` | Moet de browser deze input spell-checken?  |
+ * | tooltip               | `string`             |         | tooltip voor de input                      |
+ * | labelHidden           | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled              | `boolean`            | `false` | de input is disabled                       |
+ * | revealPasswordTooltip | `string`             |         | tooltip voor show-password-button          |
+ * | textAlign             | `l`, `c`, `r`        | `l`     | de text-align van de input                 |
+ * | keyboardType          | `search`, `text`,    | `text ` | de type van de keyboard (touch-devices)    |
+ * |                       | `email`,`tel`,`url`  |         |                                            |
+ * |                       | `numeric`, `decimal` |         |                                            |
+ * | validation            | `FormValidationType` | `{}`    | de validatie voor de input                 |
+ * | value                 | `string`             |         | de waarde                                  |
+ * | size                  | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | direction             | `h`,`v`              | `h`     | de form-richting voor de input             |
+ * | errorMessage          | `string`, `function` |         | een error message (van buiten setbaar)     |
+ * | placeholder           | `string`             |         | de placeholder voor de input               |
+ * | onValueChanged()      | `function`           |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()           | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function PasswordInput(props: PasswordInputProps): JSX.Element;
+
+type TextAreaProps = Omit<BaseInputProps, 'icons'> & {
+    /** Value van een texarea kan via de children of de value-prop */
+    value?: string;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param valid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, valid: boolean): any | void;
+    /** Eigen onKeyDown voor TextAreas */
+    onKeyDown?(e: React$1.KeyboardEvent<HTMLTextAreaElement>): void;
+};
+/**
+ * Maak een textarea met optionele validation.
+ * @param props
+ * @returns een textarea
+ * @example <TextArea {...props}/>
+ * @description alle props voor TextArea component
+ * | prop              | type                      | default | description                                |
+ * |-------------------|---------------------------|---------|--------------------------------------------|
+ * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
+ * | type              | `InputTypeProp`           |         | type voor de input (REQUIRED)              |
+ * | label             | `string`                  | `name`  | de label voor de input                     |
+ * | id                | `string`                  | `name`  | de id voor de input                        |
+ * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
+ * | autocomplete      | `AutoCompleteType`        |         | autocomplete voor de input                 |
+ * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`                 | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`       |         |                                            |
+ * |                   | `numeric`, `decimal`      |         |                                            |
+ * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
+ * | value             | `string`                  |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`                  |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function TextArea(props: TextAreaProps): JSX.Element;
+
+type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | string | RegExp;
+type TextInputProps = BaseInputProps & {
+    /** Type van de tekst input (default = 'text') */
+    type?: 'text' | 'tel' | 'url';
+    /** Start value voor deze input (optioneel) */
+    value?: string;
+    /** Speciaal voor password-managers. Wat is de functie van deze input */
+    autocomplete?: AutoCompleteType;
+    /** Toegestane karakters in de input
+     * - `0-9`: alleen numeriek
+     * - `a-z`: alleen lowercase letters. Uppercase maken we lowercase
+     * - `A-Z`: alleen uppercase letters. lowercase maken we uppercase
+     * - `a-Z`: alleen lowercase en uppercase letters
+     * - `0-Z`: lowercase, uppercase & numeriek
+     * - `RegExp`: geef een regex op met alle toegestande karakters om **NIET** te replacen
+     */
+    characters?: CharType;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param newVal: de nieuwe waarde
+     * @param isValid: is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: string, isValid?: boolean): any | void;
+};
+/**
+ * Maak een input van een tekst-type met optionele validation.
+ * @param props
+ * @returns En TextInput met validatie en karakter-checking
+ * @example <TextInput value="oompa loompa dooba di dee" {...props} />
+ * @description alle props voor TextArea component
+ * | prop              | type                      | default | description                                |
+ * |-------------------|---------------------------|---------|--------------------------------------------|
+ * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
+ * | type              | `text`, `tel`, `url`      | `text`  | type voor de input (REQUIRED)              |
+ * | label             | `string`                  | `name`  | de label voor de input                     |
+ * | characters        | `string`, `RegExp`, `0-Z`,|         | de toegestane karakters in de input        |
+ * |                   | `0-9`, `a-z`, `A-Z`, `a-Z`|         |                                            |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
+ * | autocomplete      | `AutoCompleteType`        |         | de autocomplete type voor de input         |
+ * | id                | `string`                  | `name`  | de id voor de input                        |
+ * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`                 | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`       |         |                                            |
+ * |                   | `numeric`, `decimal`      |         |                                            |
+ * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
+ * | value             | `string`                  |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`                  |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function TextInput(props: TextInputProps): JSX.Element;
+
+type InputValueType = string | number | readonly string[] | undefined;
+type InputStylingPropsType = {
+    /** grootte van de input (default = `m`, medium)*/ size?: SizeProp;
+    /** alignment van de input (default = `l`, left) */ alignment?: AlignmentProp;
+    /** label boven (`v`) of voor (`h`) de input, (default = `h`, horizontal) */ direction?: DirectionProp;
+    /** (optioneel) icon op de input */ iconLeft?: IconProp | string;
+    /** (optioneel) icon aan einde op de input */ iconRight?: IconProp | string;
+};
+type InputPropsType<T = InputValueType> = {
+    /** label bij de input. Als geen label, dan wordt de `name`-property gebruikt */ label?: string;
+    /** foutmelding bij de input*/ errorMessage?: string | ((v: InputValueType) => string);
+    /** helptag in Loon bij de input (`:HOOFDGROEP:SUBGROEP:`)*/ helpTag?: string;
+    /** type input (default = `text`)*/ type?: InputTypeProp;
+    /** (optioneel) tooltip-title voor de input*/ title?: string;
+    /** (optioneel) id voor de input. Als geen id, dan wordt de `name`-property gebruikt */ id?: string;
+    /** name-property voor de input */ name: string;
+    /** waarde voor de input */ value?: T;
+    /** gebruikt deze input de spellchecked (default = `false`) */ spellCheck?: boolean;
+    /** is deze input required (default= `false`)*/ required?: boolean;
+    /** autocomplete voor deze input (default = `off`)*/ autoComplete?: AutoCompleteType;
+    /** type toetsenbord (voor smartphones) voor deze input (default = `text`)*/ keyboardType?: KeyboardTypeProp;
+    /** placeholder in de input */ placeholder?: string;
+    /** is deze input disabled 9default = `false`)*/ disabled?: boolean;
+    /** bij welk form hoort deze input?*/ form?: string;
+    /**
+     * max waarde of max lengte voor de input
+     * _(altijd hoger dan de `min`-prop)_
+     * @example // voor max waarde
+     * <Input type="number" max="100"/>
+     * <Input type="range" max="100"/>
+     * <Input type="date" max="2019-12-25"/>
+     * <Input type="month" max="2019-12"/>
+     * <Input type="week" max="2019-W23"/>
+     * <Input type="time" max="17:30"/>
+     * <Input type="datetime-local" max="29-12-25T23:59"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" max="100"/>
+     * <Input type="password" max="50"/>
+     */
+    max?: number;
+    /**
+     * min waarde of min lengte voor de input
+     * _(altijd lager dan de `max`-prop)_
+     * @example <Input type="number" min="1"/>
+     * <Input type="range" min="1"/>
+     * <Input type="date" min="2019-01-01"/>
+     * <Input type="month" min="2019-01-01"/>
+     * <Input type="week" min="2019-W01"/>
+     * <Input type="time" min="08:30"/>
+     * <Input type="datetime-local" max="2019-01-01T00:00"/>
+     * @example //strings: voor max length, altijd 0 of hoger
+     * <Input type="text" min="100"/>
+     * <Input type="password" min="50"/>*/
+    min?: number;
+    /** stapgrootte voor groter/kleiner aanpassingen
+     *  | type| value | Example|
+     * |----------------|----------------|---------------------------------------------|
+     * | number         | `1`            | `<Input type="number" step="2"/>`           |
+     * | range          | `1`            | `<Input type="range" step="2"/>`            |
+     * | date           | `1` (day)      | `<Input type="date" step="2"/>`             |
+     * | month          | `1` (month)    | `<Input type="month" step="2"/>`            |
+     * | week           | `1` (week)     | `<Input type="week" step="2"/>`             |
+     * | time           | `60` (seconds) | `<Input type="time" step="2"/>`             |
+     * | datetime-local | `1` (second)   | `<Input type="datetime-local" step="900"/>` |
+     */
+    step?: number;
+    /** Is deze input readonly (default = `false`). Bij `true` zie je alleen nog maar de content van de input*/
+    readonly?: boolean;
+    /** moet deze input de focus krijgen? (default = `false`)*/ autofocus?: boolean;
+    /** (optionele) `ref` voor gebruik met `React.useRef`*/ ref?: React$1.Ref<HTMLInputElement>;
+    /** callback voor unfocus (blur), zet OOK de input op `touched`*/
+    onBlur?: (e: React$1.FocusEvent<HTMLInputElement>) => void;
+    /** callback voor onChange*/
+    onChange?: (e: React$1.ChangeEvent<HTMLInputElement>) => void;
+    /** callback voor focus */
+    onFocus?: (e: React$1.FocusEvent<HTMLInputElement>, helpTag?: string) => void;
+    /** callback voor typen */
+    onKeyDown?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
+    /** callback voor typen */
+    onKeyUp?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
+};
+/**
+ *
+ * @param props
+ * @returns
+ */
+declare function Input<T extends InputValueType = string>({ errorMessage, label, name, id, iconLeft, iconRight, direction, onBlur, ...props }: InputPropsType<T> & InputStylingPropsType): JSX.Element;
+
+type FileInputProps = Omit<BaseInputProps, 'icons'> & {
+    /** File types die een file-input zou moeten accepteren. Komma-gescheiden lijst van unieke file-type-specificaties (zie MDN: @link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) */
+    accept?: string;
+    /** Welke camera moet er gebruikt maken voor afbeelding/video data, als dat via de accept-prop is toegestaan */
+    capture?: 'user' | 'environment';
+    /** Toon de input als een block */
+    boxed?: boolean;
+    /** Mag een gebruik meerdere files selecteren */
+    multiple?: boolean;
+    /** Tekst voor op selecteer-file-button. (default = `name`-prop) */
+    kiesLabel?: string;
+    /** Tekst voor 'er-is-nog-geen-bestand'. default = '' */
+    nogGeenBestandLabel?: string;
+    /** Value van de input *__(LET OP: MOET `''` ZIJN BIJ INITIALISATIE!)__* */
+    value?: string;
+    /**
+     * Wat te doen als de waarde is veranderd
+     * @param files: De nieuwe waarde
+     * @param isValid: Is de nieuwe waarde geldig?
+     */
+    onValueChanged?(files: FileList, isValid?: boolean): any | void;
+    /** Formatteer de weergegeven filenaam volgens een eigen functie */
+    filenameFormatter?(val: string, files: FileList): string;
+};
+/**
+ * Maak een file input. __De value MOET bij initialisatie `''` zijn. React heeft geen toegang tot het file system__
+ * @param props
+ * @returns an input for files
+ * @example <FileInput name="file" {...props}/>
+ * @description alle props voor File component
+ * | prop              | type                 | default   | description                                |
+ * |-------------------|----------------------|-----------|--------------------------------------------|
+ * | name              | `string`             |           | de naam voor de input (REQUIRED)           |
+ * | label             | `string`             | `name`    | de label voor de input                     |
+ * | kiesLabel         | `string`             |           | de tekst voor de selecteer-file-button     |
+ * | spellCheck        | `boolean`            | `false`   | Moet de browser deze input spell-checken?  |
+ * | multiple          | `boolean`            | `false`   | of er meerdere files geselecteerd moeten   |
+ * | boxed             | `boolean`            | `false`   | of de input als een block moet worden      |
+ * | accept            | `string`             |           | de file-types die geselecteerd mogen worden|
+ * | capture           | `user`, `environment`|`undefined`| de camera die gebruikt moet worden         |
+ * | id                | `string`             | `name`    | de id voor de input                        |
+ * | icon              | `string`, `IconProp` |           | de icon voor de input                      |
+ * | tooltip           | `string`             |           | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false`   | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false`   | de input is disabled                       |
+ * | keyboardType      | `search`, `text`,    | `text `   | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`  |           |                                            |
+ * |                   | `numeric`, `decimal` |           |                                            |
+ * | validation        | `FormValidationType` | `{}`      | de validatie voor de input                 |
+ * | value             | `string`             | FORBIDDEN | de waarde, mag NIET default geset worden   |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`       | de grootte van de input                    |
+ * | direction         | `h`,`v`              | `h`       | de form-richting voor de input             |
+ * | errorMessage      | `string`             |           | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`             |           | de placeholder voor de input               |
+ * | onValueChanged()  | `function`           |           | (value: FileList, valid?: boolean) => void |
+ * | onKeyDown()       | `function`           |           | (event: React.KeyboardEvent) => void       |
+ * | filenameFormatter | `function`           |           | (value: string, files: FileList) => string |
+ */
+declare function FileInput(props: FileInputProps): JSX.Element;
+
+type FormProps = {
+    /** De inputs voor dit form */
+    children: React$1.ReactNode;
+    /** Form attribuut \<form action="..." > */
+    action?: string;
+    /** Form attribuut \<form name="..." > */
+    name?: string;
+    /** Form attribuut \<form method="..." > */
+    method?: 'post' | 'get';
+    /** Form attribuut <form target="..." > */
+    target?: '_self' | '_blank' | '_parent' | '_top';
+    /** Form onsubmit handler */
+    onSubmit?: (event: React$1.FormEvent<HTMLFormElement>) => void;
+    /** Size voor alle form-elementen (default = 'm') */
+    size?: SizeProp;
+    /** Form attribuut\ <form autocomplete="..." >. */
+    autocomplete?: 'on' | 'off';
+    /** Direction voor form-elementen (horizontaal (1 lijn, default) of vertical (label boven, input onder)) */
+    direction?: DirectionProp;
+    /** Form attribuut \<form novalidate="..." > */
+    novalidate?: boolean;
+    /** Extra classnames voor de form */
+    className?: string;
+};
+/**
+ * Maak een form met verschillende inputs. De inputs zelf zijn hetzelfde als de losse inputs.
+ * @param props
+ * @returns een form
+ * @example
+ * <Form action="POST" name="formpie">
+ *   <TextInput name="name" label="Naam" />
+ *   <TextInput name="email" label="Email" />
+ *   <PasswordInput name="password" label="Wachtwoord" />
+ * </Form>
+ */
+declare const Form: {
+    (props: FormProps): JSX.Element;
+    /** Een zelf-configureerbare base input
+     * @see Input
+     */
+    Input: typeof Input;
+    /** Input voor type url, text of tel
+     * @see TextInput
+     */
+    Text: typeof TextInput;
+    /** Password input
+     * @see PasswordInput
+     */
+    Password: typeof PasswordInput;
+    /** Email input
+     * @see EmailInput
+     */
+    Email: typeof EmailInput;
+    /** Text area input
+     * @see TextArea
+     */
+    TextArea: typeof TextArea;
+    /** Select input
+     * @see Select
+     */
+    Select: typeof Select;
+    /** Multi-select input
+     * @see MultiSelect
+     */
+    MultiSelect: typeof MultiSelect;
+    /** Color input
+     * @see ColorInput
+     */
+    Color: typeof ColorInput;
+    /** Hidden input
+     * @see HiddenInput
+     */
+    Hidden: typeof HiddenInput;
+    /** Number input
+     * @see NumberInput
+     */
+    Number: typeof NumberInput;
+    /** Range input (als a number input)
+     * @see RangeInput
+     */
+    Range: typeof RangeInput;
+    /** Multi-range input (2 numbers)
+     * @see MultiRangeInput
+     */
+    MultiRange: typeof MultiRangeInput;
+    /** Input for dates
+     * @see DateInput
+     */
+    Date: typeof DateInput;
+    /** Input for date & time combinations
+     * @see DateTimeInput
+     */
+    DateTime: typeof DateTimeInput;
+    /** Time input
+     * @see TimeInput
+     */
+    Time: typeof TimeInput;
+    /** Checkbox input
+     * @see CheckBox
+     */
+    CheckBox: typeof CheckBox;
+    /** Radio input
+     * @see RadioGroup
+     */
+    RadioGroup: {
+        (props: RadioInputProps): JSX.Element;
+        Item: (props: {
+            id?: string | undefined;
+            value: string;
+            disabled?: boolean | undefined;
+            tooltip?: string | undefined;
+            children?: React$1.ReactNode;
+            size?: SizeProp | undefined;
+            color?: string | undefined;
+            styling?: CheckradioStylingType | undefined;
+            direction?: DirectionProp | undefined;
+            textAlign?: TextAlignmentProp | undefined;
+        }) => JSX.Element;
+    };
+    /** Een file-input
+     * @see FileInput
+     */
+    File: typeof FileInput;
+    /**
+     * Gebruik om de richting (direction-attribuut) van meerdere inputs te wijzigen.
+     * @return een aantal inputs op een lijn
+     * @example
+     * <Form.Line>
+     *   <Form.Date name={`date-${i}-${ii}`} id={`date-${direction}-${size}-1`} direction="vertical" />
+     *   <Form.Time name={`time-${i}-${ii}`} id={`date-${direction}-${size}-2`} direction="vertical" />
+     * </Form.Line>
+     */
+    Line: ({ children }: {
+        children: React$1.ReactNode;
+    }) => JSX.Element;
+    /** Open ruimte voor eigen content, die zich aan de direction van het form houdt.
+     * @return eigen componenten of content.
+     * @example
+     * <Form.Space>
+     *   <Message size={size} color="w">
+     *     Met de component <strong>{'<Form.Line>'}</strong> kan je twee inputs achter elkaar kwijt. Dan
+     *     moet je wel zelf nog de direction instellen (default = 'horizontal')
+     *   </Message>
+     * </Form.Space>
+     */
+    Space: ({ children }: {
+        children: React$1.ReactNode;
+    }) => JSX.Element;
+    /** container voor de buttons van het form. Grootte van de buttons kan onafhankelijk worden ingesteld */
+    /**
+     * Buttons container voor het form. Mag alleen buttons bevatten. Grootte van de buttons kan onafhankelijk worden ingesteld, maar ook voor allemaal.
+     * @return een buttons-container
+     * @example
+     * <Form.Buttons>
+     *    <Button.Success type="submit">Verstuur</Button.Success>
+     *    <Button.Danger>Reset</Button.Danger>
+     *    <Button.Info>Meer...</Button.Info>
+     * </Form.Buttons>
+     */
+    Buttons: ({ children, size, alignment, }: {
+        children: React$1.ReactNode;
+        size?: SizeProp | undefined;
+        alignment?: AlignmentProp | undefined;
+    }) => JSX.Element;
+};
+
+/** Props voor de Form-component */
+type FormBuilderProps = {
+    /** definieer een onSubmit voor het form
+     * <form onSubmit="onSubmit(e)"
+     * @param e: data
+     * @returns: het resultaat van het form: GET: URLSearchParams string, POST: key-values van fields
+     */
+    onSubmit(e: any | undefined): void;
+    /** Moet het form in een modal verschijnen */
+    useModal?: boolean;
+    /** wat te doen om de modal te sluiten. ALLEEN ALS useModal 'true' IS, IS DEZE NODIG */
+    onDismiss?(e: any): void;
+    /** buttons voor onderaan het form */
+    buttons: {
+        /** de tekst voor de (groene) submit button, deze is VERPLICHT */
+        submit: string;
+        /** 0 of emerdere (blauw) buttons */
+        other?: FormBuilderButton[];
+    };
+    /** Een array van fields voor het form */
+    fields: FormBuilderFieldProps[];
+    /** autocomplete on or off? */
+    autocomplete?: 'on' | 'off' | null;
+    /** de form name */
+    name: string;
+    /** de GET / POST methode voor het form
+     * <form method="get"></form>
+     */
+    method: 'post' | 'get';
+    /** target voor het form */
+    target?: '_self' | '_blank' | '_parent' | '_top' | null;
+    direction?: DirectionProp;
+};
+/** Props voor de fields in een form van de Form-Component */
+type FormBuilderFieldProps = {
+    onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>, helpTag?: string) => void;
+    /** de naam voor het field. gebruikt in input en  in <label> als geen label gedefinieerd.
+     * <input name="..." /> */
+    name: string;
+    /** een tooltip voor de button */
+    tooltip?: string;
+    /** label voor het field, als die afwijkt van de name-attribuut. gebruikt in <label> (optional) */
+    label?: string;
+    /** is het field gevalideerd en wat is daar de uitkomst van. */
+    placeholder?: string;
+    /** (optioneel) id van een field. Anders wordt de "name" gebruikt  */
+    id?: string;
+    valid?: boolean;
+    /** de waarde van de input.
+     * Voor multi-range-inputs: een number[] van twee waarden: [valueA, valueB]
+     * Voor Datum/Tijd inputs:
+     * - type 'date': YYYY-MM-DD
+     * - type 'time': HH:mm
+     * - type 'datetime': YYYY-MM-DD HH:mm OF YYYY-MM-DDTHH:mm
+     */
+    value?: ValueTypes;
+    /** object gebruikt voot validatie */
+    validation?: FormValidationType;
+    /** input type: <input type="..." /> */
+    type: 'text' | 'number' | 'email' | 'password' | 'date' | 'datetime' | 'time' | 'textarea' | 'select' | 'multiselect' | 'checkbox' | 'tel' | 'url' | 'range' | 'multirange' | 'hidden';
+    /** voor type 'number', 'time', 'range' en 'multirange' kan er een step-grootte worden opgegeven */
+    step?: number;
+    /** autocomplete voor gebruik met wachtwoorden, usernames & wachtwoordmanagers */
+    autocomplete?: 'on' | 'off' | 'current-password' | 'new-password' | 'username' | undefined;
+    /** voor een <select> input: welke options moeten er zijn */
+    selectOptions?: string[] | SelectOptionType[] | SelectOptionGroupType[];
+};
+/** Props voor het Button-object van de Form-component */
+type FormBuilderButton = {
+    /** tekst op de button */
+    txt: string;
+    /** moet de formdata gevalideert zijn voor je de button kan gebruiken? */
+    mustValidate?: boolean;
+    /** button type <button type="..." */
+    type: 'submit' | 'reset' | 'button';
+    /** button color: s: success-button, d: danger-button, n: primarycolor button */
+    color?: ColorProp;
+    /** wat als er op de button geklikt wordt? (optional) */
+    onClick(e: MouseEvent): any | void;
+};
+type ValueTypes = number | [number, number] | string | string[] | boolean | null | undefined;
+
+/**
+ * stel een form samen op basis van een array van fields, met een submit-button en optionele extra buttons.
+ * Kan ook in een modal getoont worden.
+ * @param props
+ * @returns een object voor POST requests OF een URLPARAMS string voor GET requests
+ */
+declare function FormBuilder(props: FormBuilderProps): JSX.Element;
+
+type CBInputProps = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'spellCheck'> & {
+    /** Speciale styling van de checkbox */
+    styling?: CheckradioStylingType;
+    /** Is de checkbox checked */
+    checked?: boolean;
+    /** Kleur van de checkbox (default = 'l', link) */
+    color?: ColorProp | ((checked: boolean) => ColorProp);
+    /** Verplicht label voor een gewone checkbox */
+    label: string | React$1.ReactNode;
+    /** Wat te doen als de waarde is veranderd
+     * @param checked: is de checkbox checked ?
+     */
+    onValueChanged?(checked: boolean): void;
+};
+/**
+ * Maak een kale checkbox input met een label, dus ZONDER alle form-functies met controls, fields en directions.
+ * **LET OP**: Zelf de checked-state bijhouden!
+ * @param props
+ * @returns een checkbox
+ * @example <CB checked={true} {...props}/>
+ * @description alle props voor de CB component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | name              | `string `            |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string?`            | `name`  | de label voor de input                     |
+ * | id                | `string?`            | `name`  | de id voor de input                        |
+ * | tooltip           | `string?`            | `''`    | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
+ * | checked           | `boolean`            | `false` | is de checkbox `checked` of niet           |
+ * | color             | `l`,`p`,`s`,`d`,`w`, | `l`     | de kleur van de checkbox                   |
+ * |                   | `i`,`is-${string}`   |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+ * |                   | `colored`, `blocky`  |         |                                            |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | onValueChanged()  | `function`           |         | (value: boolean, valid?: boolean) => void  |
+ * | onKeyDown()       | `function`           |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function CB({ checked, label, name, id, size, color, styling, textAlign, disabled, errorMessage, helpTag, onValueChanged, onKeyDown, onFocus, }: CBInputProps): JSX.Element;
+
+type RBInputProps<T = string> = Omit<BaseInputProps, 'keyboardType' | 'icons' | 'direction' | 'validation' | 'labelHidden' | 'label' | 'id' | 'name' | 'spellCheck'> & {
+    /** de group-name voor deze inputs. Radiobuttons werken daar iets anders mee */
+    groupName: string;
+    /** Speciale styling van de checkbox */
+    styling?: CheckradioStylingType;
+    /** de te emitten waarde als deze radiobutton checked moet worden */
+    value: T;
+    /** Is deze radio-button checked */
+    checked: boolean;
+    /** Kleur van de checkbox (default = 'l', link) */
+    color?: ColorProp | ((value: T) => ColorProp);
+    /** Verplicht label voor een gewone checkbox */
+    label: string | React$1.ReactNode;
+    /** Wat te doen als de waarde is veranderd
+     * @param checked: is de checkbox checked ?
+     */
+    onValueChanged?(value: T): void;
+    /** ID voor het item. Bij radio-buttons is deze VERPLICHT! */
+    id: string;
+};
+/**
+ * Maak een kale radiobutton input met een label, dus ZONDER alle form-functies met controls, fields en directions.
+ * **LET OP**: Zelf de checked-state bijhouden!
+ * @param props
+ * @returns een radiobutton
+ * @example <RB checked={true} groupName="radio-button-group-name" {...props}/>
+ * @description alle props voor de CB component
+ * | prop              | type                 | default | description                                |
+ * |-------------------|----------------------|---------|--------------------------------------------|
+ * | groupName         | `string`             |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string?`            | `name`  | de label voor de input                     |
+ * | id                | `string`             | `name`  | de id voor de input                        |
+ * | tooltip           | `string?`            | `''`    | tooltip voor de input                      |
+ * | labelHidden       | `boolean`            | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`            | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`        | `l`     | de text-uitlijning van de input            |
+ * | checked           | `boolean`            | `false` | is de checkbox `checked` of niet           |
+ * | color             | `l`,`p`,`s`,`d`,`w`, | `l`     | de kleur van de checkbox                   |
+ * |                   | `i`,`is-${string}`   |         |                                            |
+ * | size              | `s`,`m`,`l`,`xl`     | `m`     | de grootte van de input                    |
+ * | styling           | `rounded`,`noborder` |         | de styling van de checkbox                 |
+ * |                   | `colored`, `blocky`  |         |                                            |
+ * | errorMessage      | `string  `           |         | een error message (van buiten setbaar)     |
+ * | setValueFn()      | `function`           |         | (newVal: T) => void. Gebruik om een React-useState-setfunction aan te roepen |
+ */
+declare function JustARadioButon<T = string>({ value, checked, label, groupName: name, id, size, color, styling, textAlign, disabled, errorMessage, helpTag, onValueChanged, onFocus, }: RBInputProps<T>): JSX.Element;
+
+/**
+ * Een Rich Text Editor, dus een uitgebreide vorm van een `<textarea>`, want je kan dingen **bold**, *italic*, enz. maken.
+ * De output is in HTML-vorm of in JSON-vorm.  Je kan er ook gewoon platte tekst uitkrijgen, maar dan vervalt de opmaak.
+ * @url https://tiptap.dev/ voor de documentatie van hoe deze component in elkaar steekt.
+ * @returns een component voor het maken van rich text met HTML of JSON output
+ * @description
+ * | prop         | type                       | uitleg                  |
+ * |--------------|----------------------------|-------------------------|
+ * | content      | `string`                   | de inhoud van de editor |
+ * | onChangeHtml | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als HTML meegegeven. |
+ * | onChangeText | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als platte tekst meegegeven. |
+ * | onChangeJson | `(c: JSONContent) => void` | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als JSON meegegeven. |
+ */
+declare function TextEditor({ content, onChangeHtml, onChangeText, onChangeJson, }: {
+    content?: string;
+    onChangeHtml?: (content: string) => void;
+    onChangeText?: (content: string) => void;
+    onChangeJson?: (content: JSONContent) => void;
+}): JSX.Element;
+
+type CurrencyInputProps = BaseInputProps & {
+    /** Start value voor deze input (optional) */
+    value?: number;
+    /**
+     * Wat te doen als de waarde is veranderd.
+     * @param newVal: De nieuwe waarde. `[0]` = het bedrag in centen, `[1]` = het bedrag als string
+     * @param isValid: Is de nieuwe waarde geldig?
+     */
+    onValueChanged?(newVal: [number, string], isValid?: boolean): void;
+    /** Scheidingsteken gehele getallen en decimalen (default = `','` ) */
+    decimalSeparator?: string;
+    /** Scheidingsteken per duizend (default = `'.'`) */
+    thousandsSeparator?: string;
+    /** Altijd de centen tonen, ook als dat '0' is (default = `true`) */
+    alwaysShowCents?: boolean;
+};
+/**
+ * Een input voor een bedrag.
+ * @param props
+ * @returns Een CurrencyInput
+ * @example <CurrencyInput value="12" {...props} />
+ * @description alle props voor CurencyInput component
+ * | prop              | type                      | default | description                                |
+ * |-------------------|---------------------------|---------|--------------------------------------------|
+ * | name              | `string`                  |         | de naam voor de input (REQUIRED)           |
+ * | label             | `string`                  | `name`  | de label voor de input                     |
+ * | autocomplete      | `AutoCompleteType`        |         | de autocomplete type voor de input         |
+ * | id                | `string`                  | `name`  | de id voor de input                        |
+ * | tooltip           | `string`                  |         | tooltip voor de input                      |
+ * | labelHidden       | `boolean`                 | `false` | de label is verborgen (screenreaders)      |
+ * | disabled          | `boolean`                 | `false` | de input is disabled                       |
+ * | textAlign         | `l`, `c`, `r`             | `l`     | de text-align van de input                 |
+ * | spellCheck        | `boolean`                 | `false` | Moet de browser deze input spell-checken?  |
+ * | keyboardType      | `search`, `text`,         | `text ` | de type van de keyboard (touch-devices)    |
+ * |                   | `email`,`tel`,`url`       |         |                                            |
+ * |                   | `numeric`, `decimal`      |         |                                            |
+ * | validation        | `FormValidationType`      | `{}`    | de validatie voor de input                 |
+ * | value             | `string`|`number`         |         | de waarde                                  |
+ * | size              | `s`,`m`,`l`,`xl`          | `m`     | de grootte van de input                    |
+ * | direction         | `h`,`v`                   | `h`     | de form-richting voor de input             |
+ * | errorMessage      | `string`, `function`      |         | een error message (van buiten setbaar)     |
+ * | placeholder       | `string`                  |         | de placeholder voor de input               |
+ * | onValueChanged()  | `function`                |         | (value: string, valid?: boolean) => void   |
+ * | onKeyDown()       | `function`                |         | (event: React.KeyboardEvent) => void       |
+ */
+declare function LbrCurrencyInput({ label, name, id, value, validation, errorMessage, size, textAlign, disabled, placeholder, keyboardType, tooltip, direction, labelHidden, onValueChanged, onKeyDown, decimalSeparator, alwaysShowCents, ...props }: CurrencyInputProps): JSX.Element;
+
+type NotifierProviderProps = {
+    /** De child-components die de notifier mogen gebruiken */
+    children: React.ReactNode;
+    /** Waar moet de notifier getoont worden? (default = 'top') */
+    location?: 'top' | 'bottom';
+    /** De tijd (in ms) waarna een notificatie automatisch moet dismissen */
+    defaultAutoDismiss?: number;
+};
+type NotifierProps = {
+    next?: NotifierItemProps;
+    del?: number;
+    clearTime: Date;
+    /** De standaard-tijd om notificaties te sluiten in milliseconden. (default = 5000 (ms)) */
+    defaultDismissTime?: number;
+    /** Notificaties komen altijd aan de rechterkant, kies uit bovenkant of onderkant (default = 'top') */
+    location?: 'top' | 'bottom';
+};
+type NotifierItemProps = {
+    /** Optioneel id voor notificatie, als niet gedefinieerd wordt het een random integer */
+    id?: number;
+    /** Type notificatie I(info), S(success), D(danger), W(warning) */
+    type?: ColorProp;
+    /** De content voor de notificatie */
+    content?: React.ReactNode;
+    /** Tijd voor automatisch sluiten.
+     * - `0`:niet automatisch te sluiten. Dan is de notificatie alleen te sluiten met een 'click'
+     * - `number`: aantal milliseconden voor automatisch sluiten */
+    dismissAfter?: 0 | number;
+    /** Wat te doen als er geklikt wordt. Bij een 'click' wordt de notificatie ook gesloten. */
+    onClick?: (e: any) => void;
+    /** Payload voor de notification */
+    payload?: any;
+};
+
+/**
+ * Een component om notificaties in weer te geven, die na verloop van tijd weer verdwijnen. Dat is per notificatie instelbaar.
+ * Notificaties hebben ook een click-handler om een onClick() actie uit te voeren. De notificatie wordt dan ook gesloten.
+ * @param props
+ * @returns een Notificatie-component die (tijdelijke) berichtjes weergeeft aan de rechterkant van het scherm.
+ */
+declare function Notifier(props: NotifierProps): JSX.Element;
+
+type NotifierContextType = {
+    /** Toon een notificatie
+     * @param notification de notificatie-data
+     * @returns ID van de notificatie (om te kunnen verwijderen)
+     */
+    notify: (notification: NotifierItemProps) => number;
+    /** Cerwijder een notificatie
+     * @param id ID van de notificatie
+     */
+    remove: (id: number) => void;
+    /**
+     * Verwijder ALLE notificaties
+     */
+    clear: () => void;
+};
+/** Provider voor de notifier.
+ * De inhoud van de app moet binnen deze <NotifierProvider>...</NotifierProvider vallen.
+ * De notifier is dan via de hook @see useNotifier te gebruiken in child-components van de App zelf, niet in APP!
+ * @param props: bevat alleen de children van de notifier, dus ook van de app.
+ * @example
+ * <NotifierProvider>
+ *  <App />
+ * </NotifierProvider>
+ * */
+declare const NotifierProvider: (props: NotifierProviderProps) => JSX.Element;
+/** React Hook om notificaties in de notifier te beïnvloeden
+ * @function notify(n: NotifierItemProps): toon een notificatie, returns ID
+ * @function remove(id: number): verwijder een notificatie obv ID
+ * @function clear(): verwijder alle notificaties
+ * @example
+ * const { notify, remove, clear } = useNotifier();
+ */
+declare function useNotifier(): NotifierContextType;
+
+type State = {
+    show: boolean;
+    content: string | React$1.ReactNode;
+    ok: string;
+    cancel: string;
+    others?: React$1.ReactNode;
+};
+/**
+ * Confirm provider om `useConfirm`-hook te kunnen gebruiken.
+ * @param children de children
+ * @returns
+ * @example // index.tsx of App.tsx
+ * root.render(
+ * <ConfirmProvider>
+ *   <>
+ *    // ...
+ *   </>
+ * </ConfirmProvider>)
+ */
+declare function ConfirmProvider({ children }: {
+    children: React$1.ReactNode;
+}): JSX.Element;
+/**
+ * Hook voor de confirmation
+ * @param ok tekst voor op de OK-button (default = 'Ok')
+ * @param cancel tekst voor opd e cancel-button (default = 'Annuleren')
+ * @param others eventuele andere buttons (default = undefined)
+ * @returns onConfirm-fn, onCancel-fn, confirm-fn, confirmState
+ * @example
+ * const {  confirm } = useConfirm("Ja", "Nee", <Button>Extra</Button>);
+ * const confirmSomethingFromString = (msg: string) => {
+ *   const isConfirmed = await (confirm(msg))
+ * }
+ * @example
+ * const {  confirm } = useConfirm("Ja", "Nee", <Button>Extra</Button>);
+ * const confirmSomethingFromFragment = (fragment: React.ReactNode) => {
+ *   const isConfirmed = await (confirm(fragment))
+ * }
+ */
+declare function useConfirm(ok?: string, cancel?: string, others?: React$1.ReactNode): {
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onConfirm: () => void;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onCancel: () => 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?")
+     */
+    confirm: (content: string | React$1.ReactNode) => Promise<boolean>;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    confirmState: State;
+};
+
+type CopyType = {
+    /**
+    * Kopieer een waarde naar het clipboard, om die daarna ergens te kunnen plakken.
+    * @param valueToCopy De waarde omte copy-pasten
+    */
+    copy: (valueToCopy: any) => void;
+    /** Clear de time-out en reset "copied" naar "false" */
+    reset: () => void;
+    /** Als er bij het kopiëren iets mis gaat, is de error != null */
+    error: Error | null;
+    /** Is de waarde gekopieerd? Is "true" als een item gekopieerd is, totdat reset() wordt aangeroepen of de timeout over is */
+    copied: boolean;
+};
+/**
+ * Hook om een waarde naar de navigator.clipboard te kopiëren en die daarna ergens te plakken.
+ * @param timeout timeout in ms voordat de copy-reset gebeurt (default = 2000)
+ * @returns een object met de functies copy() en reset(), een boolean copied en een error
+ * @example const { copy, reset, copied, error } = useClipboard();
+ */
+declare function useClipboard(timeout?: number): CopyType;
+
+/** Opties voor de useDebounce Hook */
+type useDebounceHookOptions = {
+    /** Moet er wel een value-update zijn na de 1e wijziging (Default: false) */
+    leading?: boolean;
+    /** Vertraging (in ms) voor het updaten van de  debounced waarde  (Default: 500ms) */
+    delay: number;
+};
+/**
+ * Debounce-hook voor een value. Kan handig zijn om een zware operatie uit
+ * te voeren, bijvoorbeeld op zoeken in een lijst van objecten, gebaseerd op react state.
+ * Met de cancel-function kan een value-update worden geannuleerd.
+ * @param value de debounceable value
+ * @param options extra opties
+ * @returns de waarde en een cancel-functie
+ * @example const { value, cancel } = useDebounce(value, { delay: 1000 });
+ */
+declare function useDebouncedValue<T = unknown>(value: T, options?: useDebounceHookOptions): readonly [T, () => void];
+
+type KeyboardModifiers = {
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    mod: boolean;
+    shift: boolean;
+};
+type Hotkey = KeyboardModifiers & {
+    key?: string;
+};
+type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
+type ReactHotkeyItem = [string, (event: React$1.KeyboardEvent<HTMLElement>) => void];
+type HotkeyItem = [string, (event: KeyboardEvent) => void];
+/** Parse een key-combi naar een Hotkey object */
+declare function parseHotkey(hotkey: string): Hotkey;
+/** Match hotkeys */
+declare function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch;
+/** `getHotkeyHandler` kan bijvoorbeeld op een `onKeyDown()` handler gebruikt worden. Om bijvoorbeeld hotkeys aan inputs toe te voegen
+ * @param hotkeys een array van keyboard-combinaties met een handler.
+ * @example
+ * <input type="text" onKeyDown={getHotkeyHandler(['alt+shift+l'])} />
+ */
+declare function getHotkeyHandler(hotkeys: ReactHotkeyItem[]): (event: React$1.KeyboardEvent<HTMLElement>) => void;
+/**
+ * Hook om te luisteren naar keyboard-combinaties op het document.
+ * formats:
+ * `"mod+s"` = Cmd + s op macOS, Ctrl + S op Windows,
+ * `"ctrl+shift+x"` = Ctrl + Shift + x,
+ * `"alt + shiftt + L"` = Alt + Shfit + l, spaties zijn toegestaan,
+ * `"ArrowLeft"` = @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values voor speciale keys
+ *
+ * @param hotkeys een array van keyboard-combinaties met een handler.
+ * @example
+ * const hks: HotkeyItem[] = [
+ *   ['mod+J', () => console.log('mod + J pressed')],
+ *   ['shift+L', () => console.log('Shift and L pressed')],
+ * ];
+ * useHotkeys(hks);
+ */
+declare function useHotkeys(hotkeys: HotkeyItem[]): void;
+
+type UseLocalStoredStateFn<T = string> = {
+    /** Key to store the value with in Local Storage */
+    key: string;
+    /** Initial value (if its non-existent in Local Storage) */
+    initialValue: T;
+    /** Your own serializing-function. Implement when you cannot use `JSON.stringify` */
+    serialize?: (value: T, replacer?: (key: string, value: any) => any, space?: string | number) => string;
+    /** Your own deserializing-funtion. Implement when you cannot use `JSON.parse` */
+    deserialize?: (value: string, reviver?: (key: string, value: any) => any) => T;
+};
+/**
+ * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Local Storage.
+ * De waarde blijft dan bij het refreshen van de pagina aanwezig. Als de pagina dan ververst wordt, word de al bestaande waarde gebruikt, niet de initialValue.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useSessionStoredState}`.
+ * @param {UseLocalStoredStateFn} params voor de hook
+ * @returns {[T, (value: T) => void]} tuple met een value en een setValue-function (net als React.useState)
+ * @description
+ * | Property     | Type       | Description                                                   |
+ * |--------------|------------|---------------------------------------------------------------|
+ * | key          | `string`   | De key waaronder de waarde in Local Storage wordt opgeslagen. |
+ * | initialValue | `T`        | De initiale waarde.                                           |
+ * | serialize    | `function` | (optional) functie om de waarde om te zetten naar een string. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.stringify()`! |
+ * | deserialize  | `function` | (optional) De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
+ * @example
+ * import { useLocalStoredState } from 'loon-bulma-react';
+ * const [ value, setValue, removeFromLocalStorage ] = useLocalStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
+ * // 1. value is 'Oompa Loompa', put it somewhere on the screen
+ * // 2. change the value to something else
+ * // 3. refresh the page.
+ * // 4. see te new value on the page.
+ * // 5. you can also check the value in Local Storage in devtools.
+ * // 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 | undefined, (value: T) => void, () => void];
+
+type PaginationParams = {
+    /** Geselecteerde pagina op 1e render, default = 1 */
+    initialPage?: number;
+    /** Controlled actieve page number */
+    page?: number;
+    /** Totaal aantal pages */
+    total: number;
+    /** Aantal directe buren van de geselecteerde pagina (default = 1) */
+    siblings?: number;
+    /** Aantal zichtbare pagina's aan de uiteinden van de paginatie (default = 1) */
+    boundaries?: number;
+    /** Callback voor het wijzigigen van de pagina */
+    onChange: (page: number | null | undefined) => void;
+};
+declare const DOTS = "dots";
+declare function usePagination({ total, siblings, boundaries, page, initialPage, onChange, }: PaginationParams): {
+    range: (number | "dots")[];
+    active: number | null | undefined;
+    setPage: (pageNumber: number) => void;
+    next: () => void;
+    prev: () => void;
+    first: () => void;
+    last: () => void;
+};
+
+/**
+ * Een toggle tussen twee state-opties. de state switched tussen de twee.
+ * @param initialState startwaarde
+ * @param options 2 toggle-opties
+ * @returns een state-toggle function
+ * @example const [state, toggle] = useToggle("yes", ["yes", "no"]);
+ */
+declare function useToggle<T extends unknown>(initialState: T, options: [T, T]): readonly [T, (value?: T) => void];
+/**
+ * useToggle voor booleans
+ * @param initialState initia
+ * @returns een state-toggle met booleans
+ * @example const [state, toggle] = useBoolToggle(true);
+ */
+declare function useBoolToggle(initialState?: boolean): readonly [boolean, (value?: boolean) => void];
+
+type UncontrolledMode = 'initial' | 'controlled' | 'uncontrolled';
+type UncontrolledOptions<T> = {
+    value: T | null | undefined;
+    defaultValue: T | null | undefined;
+    finalValue: T | null | undefined;
+    onChange(value: T | null | undefined): void;
+    onValueUpdate?(value: T | null | undefined): void;
+    rule: (value: T | null | undefined) => boolean;
+};
+/** Hook voor het managen van state voor 'controlled' en 'uncontrolled' componenten (inputs etc).
+ * Het is met deze hook mogelijk om een component als 'controlled' EN 'uncontrolled' te gebruiken.
+ * @param options.value waarde
+ * @param options.defaultValue default waarde
+ * @param options.finalValue eindwaarde
+ * @param options.onChange callback voor waarde verandering
+ * @param options.onValueUpdate callback voor waarde update
+ * @param options.rule bepaal welke waarde initieel gebruikt wordt. zie examples
+ * @returns [value, setalue, controllerMode]
+ *
+ * @example
+ * const [_value, handleChange] = useUncontrolled({
+ *   value: VALUE,
+ *   defaultValue: DEFAULT,
+ *   finalValue: 'final',
+ *   onChange: (v) => {console.log(v)},
+ *   rule: (v) => typeof v === 'string'
+ * });
+ *
+ * return <input type="text" value={_value} onChange={(evt) => handleChange(evt.target.value)} />
+ *
+ * // als VALUE = 'oi' && DEFAULT = 'there': defaultValue & finalValue ignored in controlled components, _value == VALUE == 'oi'
+ * // als VALUE = null && DEFAULT = 'there': rule() returns 'false', defaultValue is used, _value == defaultValue == 'there'
+ * // als VALUE = null && DEFAULT = null: rule() returns 'false' voor beiden, finalValue is used, _value == defaultValue == 'final'
+ *
+ * @example - uncontrolled & controlled
+ * // Uncontrolled
+* <input />
+* <input defaultValue="hello" />
+* <input onChange={() => {}} /> // still possible since value is stored in internal state
+*
+* // Controlled
+* <input value="Hello" onChange={() => {}} />
+
+ */
+declare function useUncontrolled<T>({ value, defaultValue, finalValue, rule, onChange, onValueUpdate, }: UncontrolledOptions<T>): readonly [T | null | undefined, (nextValue: T | null | undefined) => void, UncontrolledMode];
+
+/**
+ * Hook voor gebruik van een gevalideerde waarde.
+ * @param initialValue de beginwaarde (optioneel)
+ * @param validation validatie-functie (optioneel)
+ * @returns een uitgebreid useState hook met een gevalideerde waarde
+ * @example
+ * const validation = (value?: string): [boolean, string] => {
+ *    console.log(value);
+ *    if (!value) return [false, 'required'];
+ *    else if (value.length < 3) return [false, 'too short'];
+ *    return [true, ''];
+ * };
+ * const [{ value, lastValidValue, valid, invalidMsg }, onChange] = useValidatedState<string>('', validation);
+ *
+ * <input onChange={onChange} value={value} />
+ */
+declare function useValidatedState<T extends unknown>(initialValue?: T, validation?: (value?: T) => [boolean, string]): readonly [{
+    readonly value: T | undefined;
+    readonly lastValidValue: T | undefined;
+    readonly valid: boolean;
+    readonly invalidMsg: string;
+}, (val: T) => void];
+
+type UseSessionStoredState<T = string> = {
+    /** Key to store the value with in Session Storage */
+    key: string;
+    /** Initial value (if its non-existent in Session Storage) */
+    initialValue: T;
+    /** Your own serializing-function. Implement when you cannot use `JSON.stringify` */
+    serialize?: (value: T, replacer?: (key: string, value: any) => any, space?: string | number) => string;
+    /** Your own deserializing-funtion. Implement when you cannot use `JSON.parse` */
+    deserialize?: (value: string, reviver?: (key: string, value: any) => any) => T;
+};
+/**
+ * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Session Storage.
+ * De waarde blijft dan bij het refreshen van de pagina aanwezig.
+ * Als de pagina dan ververst wordt, word de al bestaande waarde gebruikt, niet de initialValue.
+ *  Maar als de tab of de browser gesloten wordt, dan wordt de inhoud van de session storage gewist.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useLocalStoredState}`.
+ * @param {UseSessionStoredState} params voor de hook
+ * @returns {[T, (value: T) => void]} tuple met een `value` en een `setValue`-function (net als `React.useState`)
+ * @description
+ * | Property     | Type       | Description                                                   |
+ * |--------------|------------|---------------------------------------------------------------|
+ * | key          | `string`   | De key waaronder de waarde in Session Storage wordt opgeslagen. |
+ * | initialValue | `T`        | De initiale waarde.                                           |
+ * | serialize    | `function` | (optional) functie om de waarde om te zetten naar een string. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.stringify()`! |
+ * | deserialize  | `function` | (optional) De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
+ * @example
+ * import { useSessionStoredState } from 'loon-bulma-react';
+ * const [ value, setValue, removeFromSessionStorage ] = useSessionStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
+ * // 1. value is 'Oompa Loompa', put it somewhere on the screen
+ * // 2. change the value to something else
+ * // 3. refresh the page.
+ * // 4. see te new value on the page.
+ * // 5. you can also check the value in Local Storage in devtools.
+ * // 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 | undefined, (value: T) => void, () => void];
+
+export { AlignmentProp, AspectRatio, AspectRatioProps, AutoCompleteType, BaseEventProps, Box, BoxProps, Button, ButtonGroup, ButtonGroupProps, ButtonProps, CB, CBInputProps, Calendar, CalendarOptions, CheckBox, CheckboxInputProps, CheckradioStylingType, ColorInput, ColorInputProps, ColorProp, Column, ColumnProps, Columns, ConfirmProvider, Container, Content, CoordinatesProp, LbrCurrencyInput as CurrencyInput, CurrencyInputProps, DOTS, DataTable, DataTableColumn, DataTableProps, DateInput, DateInputProps, DateTimeInput, DateTimeInputProps, DefinedHexColors, DiffFnType, DirectionProp, EmailInput, EmailInputProps, ExpandedColumnProps, FileInput, FileInputProps, Footer, Form, FormBuilder, FormBuilderButton, FormBuilderFieldProps, FormBuilderProps, FormProps, Hero, HeroProps, HiddenInput, HiddenInputProps, Hotkey, HotkeyItem, IBAN_GEGEVENS_MET_TEST_PER_LAND as IbanDetailsPerLand, Icon, IconProps, IconText, IconTextProps, Image, ImageProps, Indicator, IndicatorPositionProp, IndicatorProps, Input, InputPropsType, InputStylingPropsType, InputValueType, JSChangeDateTimeType, JSDateSetterType, JSDateTime, JSDateTimeZoneType, JSDuration, Kbd, Kbds, KeyboardTypeProp, Link, LinkButton, LinkButtonProps, LinkProps, Menu, MenuItemGroupProps, MenuItemProps, MenuProps, Message, MessageProps, Modal, ModalProps, MonthViewProps, MultiRangeInput, MultiRangeInputProps, MultiSelect, MultiSelectInputProps, Notification, NotificationProps, Notifier, NotifierContextType, NotifierItemProps, NotifierProps, NotifierProvider, NotifierProviderProps, NumberInput, NumberInputProps, OnOffToggleItemProps, PasswordInput, PasswordInputProps, PositionProp$1 as PositionProp, ProgressBar, ProgressBarProps, JustARadioButon as RB, RBInputProps, Radio, RadioGroup, RangeInput, RangeInputProps, RectProp, RelationshipProp, ScrollArea, Section, Select, SelectInputProps, SelectOptionGroupType, SelectOptionType, SimpleTable, SimpleTableColProps, SimpleTableProps, SizeProp, StepItemProps, Steps, StepsProps, Subtitle, TabBar, TabBarItemProps, TabBarProps, Tag, TagProps, TagSizeProp, Tags, TagsProps, TextAlignmentProp, TextArea, TextAreaProps, TextEditor, TextInput, TextInputProps, TimeInput, TimeInputProps, TimeLine, TimeLineItemProps, TimeLinePointProps, TimeLineProps, Title, TitleProps, TitleWithSubtitle, TitleWithSubtitleProps, ToggleBar, ToggleBarProps, ToggleItemProps, Tooltip, UncontrolledMode, UncontrolledOptions, WeekViewProps, calculateTxtColor, getHotkeyHandler, getHotkeyMatcher, hasBSN, isIBAN, parseHotkey, useBoolToggle, useClipboard, useConfirm, useDebounceHookOptions, useDebouncedValue, useHotkeys, useLocalStoredState, useNotifier, usePagination, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };