loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/components/DataTable/DataTable.d.ts

@@ -0,0 +1,227 @@
+import React from 'react';
+import { AlignmentProp, SizeProp } from './../../types';
+type DataTableColumnProp<T extends unknown = unknown> = {
+    /** Instellen van de volgorde van de kolommen. Kolommen worden gesorteerd obv de waarde. De default waarde  = `0`
+     * - `positive`: de kolom wordt naar rechts verplaatst, hoogste waarde meest rechts
+     * - `negative`: de kolom wordt naar links verplaatst, laagste waarde meest links
+     */
+    order?: number;
+    /** Is deze kolom zichtbaar? (default = false) */
+    hidden?: boolean;
+    /** sorteer-functie voor deze kolom. Als niet gedefinieerd kan je niet op deze kolom sorteren */
+    sort?: (a: T, b: T) => -1 | 0 | 1 | number;
+    /** de waarde van de kolom. Een fucnction of een property van object van type `T` (string) */
+    value: keyof T | ((item: T, hovered?: boolean) => React.ReactNode);
+    /** manier om deze cel te identificeren */
+    cellIdentifier?: keyof T | ((item: T) => string);
+    /** header voor de kolom. Als niet gedefinieerd wordt de `value` gebruikt, Dus als `value` een `function` is, **moet** je deze setten */
+    header?: string | React.ReactNode;
+    /** alignment van deze kolom (default = `l` */
+    alignment?: AlignmentProp;
+    /** className voor de kolom, om een cel te stylen afhankelijk van de waarde */
+    columnClass?: string | ((item: T) => string);
+};
+type DatatablePaginationOptionsProp = {
+    /** tonen we paginatie? */
+    hidden?: boolean;
+    /** vanaf wel aantal rijen is paginatie actief */
+    threshold?: number;
+    /** initiele pagination number. default = 1 (first) */
+    initialPage?: number;
+    /** Default aantal rijen per pagina  (Infinity voor alles)*/
+    initialRowsPerPage?: number;
+    /** Opties voor aantal rijen per pagina (gebruik `Infinity` voor alles) */
+    rowsPerPageOptions?: {
+        label: string;
+        value: number;
+    }[];
+    /** callback voor wijzigen van de `rowsPerPage` - zodat je die (als gewenst) kan opslaan */
+    onRowsPerPerPageOptionChanged?: (selected: {
+        label: string;
+        value: number;
+    }) => void;
+};
+/** Data Table API - voor programatische toegang tot de DataTable */
+type DataTableApi<T extends unknown = unknown> = {
+    /** Geef de index terug binnen de complete gesorteerde lijst (incl. zoekfilter, excl. paginatie-slice). */
+    getIndexForRowID: (rowIdentifier: string | number) => number;
+    /** Geef een item terug op basis van index binnen de complete gesorteerde lijst (incl. zoekfilter). */
+    getItemForIndex: (index: number) => T | undefined;
+    /** Geef de complete gesorteerde lijst terug (incl. zoekfilter, excl. paginatie-slice). */
+    getSortedData: () => T[];
+    /** Navigeer de paginatie naar de pagina die het item bevat. */
+    navigateToItem: (item: T) => void;
+    /** Navigeer de paginatie naar de pagina die het item bevat op basis van de gesorteerde index. */
+    navigateToIndex: (sortedIndex: number) => void;
+    /** Navigeer de paginatie naar de pagina die het item bevat op basis van de rowIdentifier. */
+    navigateToRowId: (rowId: string | number) => void;
+};
+type DataTableProps<T extends unknown = unknown> = {
+    /** De kolommen voor de DataTable
+     * @param sort een functie die twee items vergelijkt en -1, 0, 1 of een `number` teruggeeft. Als er geen sort-function is, kan de tabel **niet** op deze kolom gesorteerd worden.
+     * @param value De waarde voor in de tabel: een `keyof T` of een functie die een `React.ReactNode` teruggeeft.
+     * - `keyof T`: de property op het object van type `T`
+     * - `function`: een function die een `React.ReactNode` returned om te renderen in de cell.
+     * @param cellIdentifier een `keyof T` of een functie die een `string` teruggeeft. Deze waarde wordt gebruikt om de cell te identificeren. Als er geen `cellIdentifier` is, wordt de `value` gebruikt.
+     * @param header De header voor de kolom. Als er geen `header` is, wordt de `value` gebruikt.
+     * @param alignment De uitlijning van de cellen in de kolom. Standaard is dit `l` (links).
+     * @param columnClass een `string` of een functie die een `string` teruggeeft. Deze waarde wordt gebruikt om de cell te stylen afhankelijk van de value.
+     * @example // Een DataTable met een kolom met een `keyof T` als `value`:
+     * const columns: Array<DataTableColumnProp<{firstName: string, active: boolean, lastName: string}>> = [
+     * ..{ value: 'firstName', header: 'Naam' }, // value is een `keyof T`
+     * ..{ value: (u) => `${u.firstName} ${u.lastName}`, header: 'Achternaam'}, // value samengesteld met een function
+     * ..{ value: 'active', // true or false
+     * ..  sort: (a,b) => a.active === b.active ? 0 : a.active ? -1 : 1   // sortable kolom
+     * ..},
+     * ];
+     */
+    columns: Array<DataTableColumnProp<T>>;
+    /** het kolom-nummer waarop default gesorteerd moet worden. **LET OP: de 1e kolom heeft nr 1! ** */
+    defaultSortColNum?: number;
+    /** data-array in de tabel */
+    data?: Array<T>;
+    /** moet de tabel compact wwergegevens worden (voorheen `narrow`, default = `false`) */
+    compact?: boolean;
+    /** moet de tabel smaller worden weergegeven? */
+    narrow?: boolean;
+    /** moet de tabel borders hebben? (default = `false`) */
+    bordered?: boolean;
+    /** moet het kleurverschil tussen even en oneven rijen verdwijnen? */
+    noStripes?: boolean;
+    /** is de header van de tabel sticky ? (default = `none`)
+     * - none: geen sticky header
+     * - header: alleen de kolom-namen zijn sticky
+     * - all: de hele header is sticky, inclusief search en de `headerContent`
+     * */
+    sticky?: 'none' | 'header' | 'all';
+    /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */
+    hoverable?: boolean;
+    /** bepaal grootte van paginatie en zoek-input in de tabel */
+    size?: SizeProp;
+    /** moet het zoeken verborgen zijn? (default = `false`) */
+    hideSearch?: boolean;
+    /** placeholder voor zoek-input (default = 'Zoek ...') */
+    searchPlaceholder?: string;
+    /** zoek-function voor de datatable. Default gebruikt `JSON.stringify` op het object om te controleren of de zoekterm in een row voorkomt
+     * @param searchTerm de zoekterm
+     * @param data de data-array
+     * @returns een array van de data die overeenkomen met de zoekterm
+     */
+    onSearch?: (searchTerm: string, data: T[]) => T[];
+    /** opmaak voor informatie over het zoeken
+     * @param fc aantal items dat voldoet aan de zoekterm
+     * @param tc totaal aantal items in de tabel
+     * @param term de zoekterm
+     */
+    searchInfoMessage?: (fc: number, tc: number, term: string) => string;
+    /**
+     * callback voor geselecteerde rij
+     * @param item het item (als object van type `T`)
+     * @param row click-event met row-item (HTMLTableRowElement)
+     */
+    onRowSelected?: (item: T, row?: React.MouseEvent<HTMLTableRowElement>) => void;
+    /** callback voor als de sorteerkolom wijzigt. __LET OP: deze is 1-based, niet 0-based (1e kolom heeft i=1)__ */
+    onSortColumnChanged?: (colNum: number | 1 | 2 | 3) => void;
+    /** Wat voor component moet er gerendered worden in het context menu van een rij? */
+    onRowRightClick?: (item: T) => React.ReactNode;
+    /** wat moet er in de tabel getoont worden als er **GEEN** data is
+     * @param isSearchAction is de tabel leeg omdat er gezocht is en er geen resultaten zijn of omdat er gewoon geen data is?
+     */
+    renderWhenNoData?: (isSearchAction: boolean) => React.ReactNode;
+    /** een `string` of een functie die een `string` teruggeeft. Deze waarde wordt gebruikt om de row te stylen afhankelijk van de value. */
+    rowClass?: string | ((item: T) => string);
+    /** een `keyof T` of een functie die een `string` teruggeeft. Deze waarde wordt gebruikt om de row te identificeren.
+     * - string: de property op het object van type `T`
+     * - function: een function die een `string` returned om te gebruiken als `key` voor de row.
+     */
+    rowIdentifier: keyof T | ((item: T) => string);
+    /** extra content boven de tabel, links van het zoekveld. Deze content wordt automatisch gewrapped met een `<td>...</td>` */
+    headerContent?: React.ReactNode;
+    /** extra content onder de tabel. Een ReactNode.
+     * Deze content **MOET** een `<tr><td>...</td></tr>` bevatten!
+     */
+    footerContent?: React.ReactNode;
+    itemRef?: React.RefObject<any> | null;
+    id?: string;
+    /** opties voor paginatie */
+    paginationOptions?: DatatablePaginationOptionsProp | undefined;
+    /** Vul lege rijen op tot het aantal rijen per pagina op de laatste pagina (default = false). Alleen als er paginatie is */
+    fillEmptyRows?: boolean;
+    /** Expose helper-functies naar de parent om op elk moment de huidige sorted-data volgorde te lezen. */
+    apiRef?: React.MutableRefObject<DataTableApi<T> | null>;
+};
+/**
+ * Maak een tabel voor grote hoeveelheden data. De tabel is doorzoekbaar en heeft paginatie. Dat is allemaal uit te zetten.
+ * Het sorteren moet per kolom ingesteld worden.
+ * @description
+ * ⚠️ __LET OP__: Als je een dropdown binnen een DataTable gebruikt, gebruik dan altijd `DataTable.Dropdown` in plaats van de gewone `Dropdown` component.
+ * Het gaat alleen fout als je de table-container voor horizontaal scrollen in de tabel gebruikt, maar toch.
+ *
+ * @example
+ * const naamSort = (a: User, B: User) =>  { a.first_name < b.first_name ? -1 : 1; }
+ * const searchFn = (searchTerm: string, data: User[]) => data.filter((u) => u.first_name.includes(searchTerm));
+ * const columns: Array<DataTableColumnProp<User>> = [
+ * ..{ value: 'first_name', header: 'Naam', sort: naamSort },
+ * ..{ value: 'last_name', header: 'Achternaam' },
+ * ]
+ * const data: Array<User> = [ ... ];
+ * return (
+ * ..<DataTable<User>
+ * ..  columns={columns}
+ * ..  data={data}
+ * ..  onSearch={searchFn}
+ * ..  defaultSortColNum={1}
+ * ..  maxRows={10}
+ * .. onRowSelected={(u) => console.log(u)}
+ * .. renderWhenNoData={(isSearchAction) => isSearchAction ? 'Geen resultaten' : 'Geen data'}
+ * ../>
+ *
+ * @param data de data-array
+ * @param columns de kolommen van het type `DataTableColumnProp<T>`
+ * @param defaultSortColNum het kolom-nummer waarop default gesorteerd moet worden. **LET OP: de 1e kolom heeft nr 1! **
+ * @param headerContent extra content boven de tabel, links van het zoekveld. Deze content wordt automatisch gewrapped met een `<td>...</td>`
+ * @param footerContent extra content onder de tabel. Een ReactNode. Deze content **MOET** een `<tr><td>...</td></tr>` bevatten!
+ * @param maxRows maximaal aantal rijen in de tabel voor paginatie aangaat. (default = 20)
+ * - 0: geen maximum, alle rijen worden getoond
+ * - number: maximum aantal rijen voor paginatie
+ * @param rowIdentifier welke `keyof T` is de unieke identifier van een row? (default = `id`). Mag ook een functie zijn die een string returned
+ * @param onSearch zoek-function voor de datatable. Default gebruikt `JSON.stringify` op het object om te controleren of de zoekterm in een row voorkomt
+ * @param onRowSelected callback voor geselecteerde rij
+ * @param rowClass een `string` of een functie die een `string` teruggeeft. Deze waarde wordt gebruikt om de row te stylen afhankelijk van de value.
+ * @param renderWhenNoData wat moet er in de tabel getoont worden als er **GEEN** data is, of als er geen zoek-resultaten zijn.
+ * @param searchInfoMessage opmaak voor informatie over het zoeken (default: 'Toon XXX rijen' bij geen zoekopdracht, 'Toon XXX van de YYY rijen' bij een zoekopdracht)
+ * @param compact moet de tabel compact weergegeven worden (voorheen `narrow`, default = `false`)
+ * @param striped moet de tabel om-en-om gestreept weergegeven worden ? (default = `false`)
+ * @param bordered moet de tabel borders hebben? (default = `false`)
+ * @param hoverable is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`)
+ * @param hidePagination paginatie verstoppen? (default = `false`)
+ * @param hideSearch moet het zoeken verborgen zijn? (default = `false`)
+ * @param size bepaal grootte van paginatie en zoek-input in de tabel (default ='s')
+ * @param searchPlaceholder placeholder voor zoek-input (default = 'Zoek ...')
+ * @returns
+ */
+declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hideSearch, headerContent, footerContent, size, searchPlaceholder, rowIdentifier, rowClass, id: tableID, itemRef, paginationOptions: paginationOptionsProp, fillEmptyRows, apiRef, onSearch, onRowSelected, onRowRightClick, renderWhenNoData, searchInfoMessage, onSortColumnChanged, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTable {
+    var Dropdown: {
+        ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, }: import("./DataTableDropdown").DataTableDropdownProps): import("react/jsx-runtime").JSX.Element;
+        Trigger({ children }: {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        Divider(): import("react/jsx-runtime").JSX.Element;
+        Item({ children, onClick, onItemClick, disabled, ...props }: {
+            children: React.ReactNode;
+            disabled?: boolean;
+            onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+            onItemClick?: (isClickable: boolean) => void;
+        } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        Link({ children, onItemClick, disabled, ...props }: {
+            children: React.ReactNode;
+            onItemClick?: (isClickable: boolean) => void;
+            disabled?: boolean;
+        } & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+    };
+    var Container: typeof DataTableContainer;
+}
+declare function DataTableContainer({ className: classNameProp, ...props }: {} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export { DataTable };
+export type { DataTableProps, DataTableColumnProp as DataTableColumn, DataTableApi };

package/dist/lib/components/DataTable/DataTableDropdown.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+type DataTableDropdownProps = {
+    children?: React.ReactNode;
+    trigger?: string | React.ReactNode | ((open: boolean, disabled?: boolean | undefined) => string | React.ReactNode);
+    disabled?: boolean | undefined;
+    startOpen?: boolean | undefined;
+    onHover?: boolean | undefined;
+    id?: string | undefined;
+    alignment?: 'l' | 'r' | undefined;
+    dropUp?: boolean | undefined;
+    className?: string | undefined;
+    keepOpenAfterClick?: boolean | undefined;
+};
+/**
+ * DataTable.Dropdown - A specialized dropdown component for use within DataTable.
+ * This component always uses a portal to render outside the table-container,
+ * preventing clipping issues caused by overflow properties on the table container.
+ * WIEHOE
+ */
+declare const DataTableDropdown: {
+    ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, }: DataTableDropdownProps): import("react/jsx-runtime").JSX.Element;
+    Trigger({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Divider(): import("react/jsx-runtime").JSX.Element;
+    Item({ children, onClick, onItemClick, disabled, ...props }: {
+        children: React.ReactNode;
+        disabled?: boolean;
+        onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+        onItemClick?: (isClickable: boolean) => void;
+    } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    Link({ children, onItemClick, disabled, ...props }: {
+        children: React.ReactNode;
+        onItemClick?: (isClickable: boolean) => void;
+        disabled?: boolean;
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+};
+export { DataTableDropdown };
+export type { DataTableDropdownProps };

package/dist/lib/components/Divider/Divider.d.ts

@@ -0,0 +1,23 @@
+import { ColorProp, StrictOmit } from './../../types';
+type DividerProps = {
+    color?: ColorProp | 'default' | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+};
+/**
+ * Divider component for separating content
+ * @param param0 - Props for the divider
+ * @returns Divider element
+ */
+declare const Divider: {
+    ({ color, style, className: cnProp }: DividerProps): import("react/jsx-runtime").JSX.Element;
+    Primary(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Info(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Link(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Success(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Warning(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Danger(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Light(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Dark(props: StrictOmit<DividerProps, "color">): import("react/jsx-runtime").JSX.Element;
+};
+export { Divider };

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

@@ -0,0 +1,97 @@
+import React from 'react';
+/**
+ * Informatie over een item die wordt meegegeven aan de renderItem functie
+ */
+type RenderItemInfo = {
+    /** De index van het item in de lijst */
+    index: number;
+    /** Of het item disabled is */
+    isDisabled: boolean;
+    /** Of dit het eerste item in de lijst is */
+    isFirstItem: boolean;
+    /** Of dit het laatste item in de lijst is */
+    isLastItem: boolean;
+    /** Of dit item momenteel wordt gesleept */
+    isDragging: boolean;
+    /** Of dit een placeholder/preview is van waar het item zal landen */
+    isPlaceholder: boolean;
+    /** Totaal aantal items in de lijst */
+    totalItems: number;
+};
+/**
+ * Props voor de DragDropList component
+ * @template T - Het type van de items in de lijst
+ */
+type DragDropListProps<T> = {
+    /** De array van items die getoond en herschikt kunnen worden */
+    items: T[];
+    /** Callback functie die wordt aangeroepen wanneer de volgorde van items verandert */
+    onReorder: (items: T[]) => void;
+    /** Functie die bepaalt hoe elk item gerenderd wordt */
+    renderItem: (item: T, info: RenderItemInfo) => React.ReactNode;
+    /** Functie of property naam die de unieke key voor elk item bepaalt */
+    keyExtractor: ((item: T, index: number) => string | number) | keyof T;
+    /** Functie of property naam die bepaalt of een item disabled is */
+    isDisabled?: ((item: T, index: number) => boolean) | keyof T;
+    /** Optionele CSS class voor de lijst container */
+    className?: string;
+    /** Optionele CSS class voor elk list item */
+    itemClassName?: string;
+    /** Children moeten DragDropList.Handle en/of DragDropList.Buttons zijn om de layout te bepalen */
+    children?: React.ReactNode;
+    /** Callback wanneer een item wordt gesleept */
+    onDragStart?: (item: T, index: number) => void;
+    /** Callback wanneer het slepen eindigt */
+    onDragEnd?: (draggedItem: T | null, droppedSuccessfully: boolean) => void;
+    /** Callback wanneer over an item wordt gesleept */
+    onDragOver?: (item: T, index: number) => void;
+    /** Callback wanneer het slepen een item verlaat */
+    onDragLeave?: () => void;
+    /** Callback wanneer een item wordt gedropt */
+    onDrop?: (draggedItem: T, targetItem: T, draggedIndex: number, targetIndex: number) => void;
+};
+/**
+ * Een drag-and-drop lijst component waarmee items verticaal herschikt kunnen worden.
+ * @template T - Het type van de items in de lijst
+ * @example
+ * ```tsx
+ * const [items, setItems] = useState([
+ *   { id: 1, name: 'Item 1', locked: false },
+ *   { id: 2, name: 'Item 2', locked: true },
+ * ]);
+ *
+ * <DragDropList
+ *   items={items}
+ *   onReorder={setItems}
+ *   keyExtractor="id"
+ *   isDisabled="locked"
+ *   className='container-class'
+ *   itemClassName='item-class'
+ *   renderItem={(item, info) => (
+ *     <div>
+ *       {item.name}
+ *       {info.isFirstItem && ' (eerste)'}
+ *       {info.isDisabled && ' (vergrendeld)'}
+ *     </div>
+ *   )}
+ * >
+ *   <DragDropList.Handle>
+ *     <Icon icon={faGripVertical} />
+ *   </DragDropList.Handle>
+ *   <DragDropList.Buttons />
+ * </DragDropList>
+ * ```
+ */
+export declare function DragDropList<T>({ items, onReorder, renderItem, keyExtractor, isDisabled, className, itemClassName, children, onDragStart, onDragEnd, onDragOver, onDragLeave, onDrop, }: DragDropListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DragDropList {
+    var Handle: ({ children }: {
+        children?: React.ReactNode;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Buttons: ({ children }: {
+        children?: React.ReactNode;
+        className?: string;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Item: () => import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/lib/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+type DropDownProps = {
+    children?: React.ReactNode;
+    trigger?: string | React.ReactNode | ((open: boolean, disabled?: boolean | undefined) => string | React.ReactNode);
+    disabled?: boolean | undefined;
+    startOpen?: boolean | undefined;
+    onHover?: boolean | undefined;
+    id?: string | undefined;
+    alignment?: 'l' | 'r' | undefined;
+    dropUp?: boolean | undefined;
+    className?: string | undefined;
+    keepOpenAfterClick?: boolean | undefined;
+    usePortal?: boolean | undefined;
+};
+/**
+ * Dropdown component for creating dropdown menus.
+ * @description
+ * ⚠️ __LET OP__: Als je een dropdown binnen een DataTable gebruikt, gebruik dan altijd `DataTable.Dropdown` in plaats van deze `Dropdown` component.
+ * Het gaat alleen fout als je de table-container voor horizontaal scrollen in de tabel gebruikt, maar toch.
+ *
+ * @see DataTable.Dropdown for table-specific dropdown usage
+ */
+declare const Dropdown: {
+    ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, usePortal, }: DropDownProps): import("react/jsx-runtime").JSX.Element;
+    Trigger({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Divider(): import("react/jsx-runtime").JSX.Element;
+    Item({ children, onClick, onItemClick, disabled, ...props }: {
+        children: React.ReactNode;
+        onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+        onItemClick?: (isClickable: boolean) => void;
+        disabled?: boolean;
+    } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    Link({ children, onItemClick, disabled, ...props }: {
+        children: React.ReactNode;
+        onItemClick?: (isClickable: boolean) => void;
+        disabled?: boolean;
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+};
+export { Dropdown };
+export type { DropDownProps };

package/dist/lib/components/Footer/Footer.d.ts

@@ -0,0 +1,22 @@
+import { AlignmentProp } from './../../types';
+import React from 'react';
+export type FooterProps = {
+    /** De content voor de footer */
+    children: React.ReactNode;
+    /** Alignment bij de footer. (default = 'c') */
+    alignment?: AlignmentProp;
+    /** Extra classes voor op de footer */
+    className?: string;
+    /** Custom styles voor de footer */
+    styles?: React.CSSProperties;
+    itemRef?: React.RefObject<any> | null;
+    id?: string;
+};
+/**
+ * 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>
+ */
+export declare function Footer({ children, alignment, className: cn, styles, id, itemRef }: FooterProps): import("react/jsx-runtime").JSX.Element;

package/dist/lib/components/Help/Help.d.ts

@@ -0,0 +1,19 @@
+import { ColorProp, StrictOmit } from './../../types';
+import React from 'react';
+type HelpTxtProps = {
+    children: React.ReactNode;
+    className?: string;
+    color?: ColorProp;
+};
+type HelpTxtPropsNoColor = StrictOmit<HelpTxtProps, 'color'>;
+declare const HelpTxt: {
+    ({ color, className: cn, children }: HelpTxtProps): import("react/jsx-runtime").JSX.Element;
+    Info(props: HelpTxtPropsNoColor): import("react/jsx-runtime").JSX.Element;
+    Link(props: HelpTxtPropsNoColor): import("react/jsx-runtime").JSX.Element;
+    Primary(props: HelpTxtPropsNoColor): import("react/jsx-runtime").JSX.Element;
+    Danger(props: HelpTxtPropsNoColor): import("react/jsx-runtime").JSX.Element;
+    Success(props: HelpTxtPropsNoColor): import("react/jsx-runtime").JSX.Element;
+    Warning(props: HelpTxtPropsNoColor): import("react/jsx-runtime").JSX.Element;
+};
+export { HelpTxt };
+export type { HelpTxtProps };

package/dist/lib/components/Hero/Hero.d.ts

@@ -0,0 +1,104 @@
+import { SizeProp, AnchorTargetProp, AnchorRelProp } from './../../types';
+import React from 'react';
+type HeroProps = {
+    itemRef?: React.RefObject<any> | null;
+    id?: string;
+    children?: React.ReactNode;
+    /**
+     * force dark of light hero
+     * @ignore werkt nog niet. */
+    forceScheme?: 'dark' | 'light' | undefined;
+    /** 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: {
+    ({ children: nodes, heroColorFor, size, itemRef, id, forceScheme }: HeroProps): import("react/jsx-runtime").JSX.Element;
+    Body({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").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: {
+        ({ children, narrow }: {
+            children: React.ReactNode;
+            narrow?: boolean;
+        }): import("react/jsx-runtime").JSX.Element;
+        NavList({ children }: {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        NavItem: typeof FootNavItem;
+        /** 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>
+         */
+        NavLink: typeof FootNavLink;
+    };
+    /** 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: {
+        ({ children }: {
+            children: React.ReactNode;
+        }): import("react/jsx-runtime").JSX.Element;
+        Button({ children, title, onClick }: {
+            children: React.ReactNode;
+            title?: string;
+            onClick?: (e: any) => void;
+        }): import("react/jsx-runtime").JSX.Element;
+        Link({ children, title, to, target, rel, }: {
+            children: React.ReactNode;
+            title?: string;
+            to?: string;
+            target?: AnchorTargetProp;
+            rel?: AnchorRelProp;
+        }): import("react/jsx-runtime").JSX.Element;
+    };
+};
+declare function FootNavItem({ children, active, title }: {
+    children: React.ReactNode;
+    active?: boolean;
+    title?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function FootNavLink({ children, active, title, to, target, rel, }: {
+    children: React.ReactNode;
+    active?: boolean;
+    title?: string;
+    to?: string;
+    target?: AnchorTargetProp;
+    rel?: AnchorRelProp;
+}): import("react/jsx-runtime").JSX.Element;
+export { Hero };
+export type { HeroProps };

package/dist/lib/components/Icon/Icon.d.ts

@@ -0,0 +1,84 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { SizeProp, ColorProp } from './../../types';
+import React from 'react';
+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 (default = `m` */
+    size?: SizeProp;
+    /** De kleur voor het icoon (default = `p`) */
+    color?: ColorProp;
+    /** Hoeveel graden moet het icoon gedraait zijn (default = 0) */
+    rotation?: 0 | 90 | 180 | 270;
+    /** Horizontaal, verticaal of beiden gespiegeld */
+    flip?: 'horizontal' | 'vertical' | 'both';
+    /** Moet het icon spinnen of pulseren */
+    animate?: 'spin' | 'pulse';
+    /** extra classes voor op de icon-container */
+    className?: string;
+};
+/**
+ * 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 function Icon({ color, size, rotation, icon, flip, animate, className: classNameProp }: IconProps): import("react/jsx-runtime").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;
+    /** De kleur voor het icoon - als die anders moet zijn dan de kleur van de tekst */
+    iconColor?: ColorProp;
+    /** Hoeveel graden moet het icoon gedraait zijn (0 - 360) */
+    rotation?: 0 | 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.ReactNode;
+    /** mag dit item wrappen? text op volgende regel? (default = 'false') */
+    allowWrap?: boolean;
+    /** extra classes voor op de icon-container */
+    className?: string;
+};
+/**
+ * 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 function IconText({ icon, size, color, iconColor, rotation, flip, animate, allowWrap, children, className: classNameProp }: IconTextProps): import("react/jsx-runtime").JSX.Element;
+type IconStackProps = {
+    colors?: ColorProp[];
+    icons: string[] | IconProp[];
+    sizes?: SizeProp[];
+};
+/**
+ * Stapel een x aantal icoontjes op elkaar, om ze visueel samen te voegen. Het 1e item is de onderste, de laatste de bovenste.
+ * @example <IconStack icons={[faHorseHead, faSlash]} />
+ * @example <IconStack icons={[faHorseHead, faSlash]} colors={['p', 'd']} />
+ * @example <IconStack icons={[faHorseHead, faSlash]} colors={['p', 'd']} sizes={['m', 'l']} />
+ * @param colors: array van kleuren voor de iconen. (default =  ['p',...])
+ * @param sizes: array van grootte voor de iconen. (default =  ['s',...])
+ * @param icons: array van iconen. (default =  [faHorseHead, faSlash])
+ * @returns
+ */
+declare function IconStack({ colors: clrs, icons, sizes: szs }: IconStackProps): import("react/jsx-runtime").JSX.Element;
+export { Icon, IconText, IconStack };
+export type { IconProps, IconTextProps, IconStackProps };