loon-bulma-react 2026.0.39 → 2026.0.41

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

@@ -0,0 +1,28 @@
+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): import("react/jsx-runtime").JSX.Element;
+export { Image };
+export type { ImageProps };

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

@@ -0,0 +1,25 @@
+import { IndicatorPositionProp, ColorProp } from './../../types';
+import React from 'react';
+type IndicatorProps = {
+    /** Positie van de indicator (default = 'tr' (top-right)) */
+    position?: IndicatorPositionProp;
+    /** Het element waar de indicator op moet */
+    children: React.ReactNode;
+    /** Kleur van de indicator (default = 'l' ('link')) */
+    color?: ColorProp;
+    /** Title (tooltip) voor indicator (optioneel) */
+    title?: 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" title="There are 5 new messages">
+ *   <Button>Check messages</Button>
+ *   5
+ * </Indicator>
+ */
+declare function Indicator({ position, color, title, children }: IndicatorProps): import("react/jsx-runtime").JSX.Element;
+export { Indicator };
+export type { IndicatorProps };

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

@@ -0,0 +1,30 @@
+import React from 'react';
+type KbdProps = {
+    /** Optionele extra class */
+    className?: string;
+    /** Content van de key */
+    children: React.ReactNode;
+};
+type KbdsProps = {
+    /** Weer te geven keys als string */
+    keys: string[];
+    /** De separator van de keys, default '+' */
+    separator?: string;
+    /** Optionele className */
+    className?: string;
+};
+/**
+ * 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: cn }: KbdProps): import("react/jsx-runtime").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 }: KbdsProps): import("react/jsx-runtime").JSX.Element;
+export { Kbd, Kbds };

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

@@ -0,0 +1,11 @@
+import React from 'react';
+type ComponentProps = {
+    children?: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+};
+/** Props voo de LabelComponent */
+export type LabelProps = React.LabelHTMLAttributes<HTMLLabelElement> & ComponentProps;
+/** Speciaal voor Menno: een Label Component */
+export declare function Label({ children, className: cnProp, style, htmlFor, ...props }: LabelProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,44 @@
+import { ColorProp, AnchorTargetProp, AnchorRelProp } from './../../types';
+import React from 'react';
+type LinkButtonProps = {
+    fullwidth?: boolean;
+    /** De content van de button */
+    children?: React.ReactNode;
+    /** `onClick` voor de button */
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    color?: ColorProp;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * 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 function LinkButton({ fullwidth, children, color, onClick, ...props }: LinkButtonProps): import("react/jsx-runtime").JSX.Element;
+type LinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    color?: ColorProp;
+    /** link / URL */
+    href: string;
+    /** open target
+     * - `default`: _blank
+     * - `string`: naam van een <iframe>
+     */
+    target?: AnchorTargetProp;
+    /** Relatie tussen het huidige document en het gelinkte document */
+    rel?: AnchorRelProp;
+    /** MIME type van een evt download */
+    type?: string;
+    /** Is dit een downloadlink? */
+    download?: boolean;
+    /** De inhoud van de link: wat is er te lezen / zien */
+    children?: React.ReactNode;
+};
+/**
+ * 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 function Link({ color, href, target, id, rel, children, ...props }: LinkProps): import("react/jsx-runtime").JSX.Element;
+export { Link, LinkButton };
+export type { LinkProps, LinkButtonProps };

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

@@ -0,0 +1,64 @@
+import React from 'react';
+type MenuProps = {
+    /** Welk item is het initiële geselecteerde item */
+    initialItem?: string;
+    /** De content van het menu (<MenuItem>, <ExpandableMenuItem> or <MenuItemGroup>) */
+    children: React.ReactNode;
+    /** Callback voor menu-item selectie */
+    onMenuItemClicked: (item: string) => void;
+    style?: React.CSSProperties;
+    className?: string;
+    itemRef?: React.RefObject<any> | null;
+};
+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.ReactNode;
+    onClick?: (label: string, e: React.MouseEvent) => void;
+    disabled?: boolean;
+};
+type MenuItemGroupProps = {
+    /** Label voor een groep MenuItems */
+    label: string | React.ReactNode;
+    /** Items in de ze groep (<MenuItem> or <ExpandableMenuItem>) */
+    children: React.ReactNode;
+};
+type ExpandableMenuItemProps = {
+    /** De content van het menu-item (MenuItem components) */
+    children: React.ReactNode;
+    /** Label voor exapnd/collapse */
+    label: string | React.ReactNode;
+    /** Begint de lijst expanded? */
+    startExpanded?: boolean;
+    /** Click handler */
+    onClick?: (label: string, e?: React.MouseEvent) => void;
+    disabled?: boolean;
+};
+/**
+ * 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: {
+    ({ initialItem, children, className: classes, style, onMenuItemClicked, itemRef }: MenuProps): import("react/jsx-runtime").JSX.Element;
+    Item({ name, children }: MenuItemProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    ItemGroup({ label, children }: MenuItemGroupProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    ExpandableGroup(props: ExpandableMenuItemProps): import("react/jsx-runtime").JSX.Element;
+    ExpandableItem(props: ExpandableMenuItemProps & React.HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+    Label({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+};
+export { Menu };
+export type { MenuProps, MenuItemProps, MenuItemGroupProps };

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { SizeProp, ColorProp, StrictOmit } from './../../types';
+type MessageProps = {
+    /** ID voor de message */
+    id?: string;
+    /** Content van de message */
+    children: React.ReactNode;
+    /** Optionele titel voor de message */
+    title?: React.ReactNode | undefined;
+    /** De grootte van de tekst in de messages (default = 'm') */
+    size?: SizeProp;
+    /** Kleur van de message (default = 'i') */
+    color?: ColorProp;
+    /** Eigen icon op de Message-header, anders de default:
+     * - `'i'`, `'l'`, `'p'` = faInfo
+     * - `'s'` = faCheck
+     * - `'w'` = faExclamation
+     * - `'d'` = faExclamationTriangle
+     */
+    icon?: string | IconProp;
+    /** dismissable messages hebben ene callback voor deze functie. Als deze functie gedefinieerd is, krijgt de message een sluitknop   */
+    onDismiss?: () => void;
+    /** is deze message inklapbaar? (default = `false`) */
+    collapsable?: boolean;
+    /** begint deze message ingeklapt? (default = `false`).
+     * Werkt natuurlijk alleen bij `collapsable = true`
+     */
+    startCollapsed?: boolean;
+    itemRef?: React.RefObject<any> | null;
+};
+/** Zelf regelbare message.
+ * @returns een message
+ * @example <Message color="p" size="l" title="This is a title">This is a message</Message>
+ * @example <Message color="s" size="m" title="This is a title" collapsable>This is a message that is collapsable</Message>
+ * @example <Message color="w" size="s" title="This is a title" collapsable startCollapsed>This is a message that starts collapsed</Message>
+ * @example <Message color="d" size="s" title="This is a title" startCollapsed>This is a message that could NOT be collapsed/expanded</Message>
+ */
+declare const Message: {
+    ({ id, children, title, size, color, icon: customIcon, collapsable, startCollapsed, itemRef, onDismiss, }: MessageProps): import("react/jsx-runtime").JSX.Element;
+    Primary(props: StrictOmit<MessageProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Success(props: StrictOmit<MessageProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Danger(props: StrictOmit<MessageProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Warning(props: StrictOmit<MessageProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Info(props: StrictOmit<MessageProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Link(props: StrictOmit<MessageProps, "color">): import("react/jsx-runtime").JSX.Element;
+};
+export { Message };
+export type { MessageProps };

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

@@ -0,0 +1,89 @@
+import { SizeProp } from './../../types';
+import React from 'react';
+type SizeString = `${number}${'px' | '%' | 'em' | 'vw' | 'vh'}`;
+type ModalProps = {
+    /** Content van de modal. Als deze te lang wordt, wordt hij scrollable */
+    children: React.ReactNode;
+    /**
+     * Afhandeling van de dismiss van de modal
+     * @param e event
+     */
+    onDismiss?: (e?: React.MouseEvent<HTMLElement>) => void;
+    /** Callback voor openen van de modal */
+    onOpened?: (helptag?: string) => void;
+    /** De breedte van de modal: met SizeProp of een string. ( DEFAULT = 'm', 800px)
+     * - `function` met windowWidth als parameter, retourneert een string met px, %, em of vw
+     * - `SizeProp`: s: 600px, m: 800px, l: 1000px, xl: 1200px, max: 95%;
+     * - `string`: '834px', '50%, 60em', '100%'
+     * - `number`: size < 100 ? als percentage, anders als px
+     * @deprecated > gebruik liever de `width`-property, deze is te verwarrend
+     */
+    size?: SizeProp | 'max' | string | number | ((windowWidth: number) => SizeString) | undefined;
+    /** De breedte van de modal: met SizeProp of een string. ( DEFAULT = 'm', 800px)
+     * - `function` met windowWidth als parameter, retourneert een string met px, %, em of vw
+     * - `SizeProp`: s: 600px, m: 800px, l: 1000px, xl: 1200px, max: 95%;
+     * - `string`: '834px', '50%, 60em', '100%'
+     * - `number`: size <= 100 ? als percentage, anders als px
+     */
+    width?: SizeProp | 'max' | string | number | ((windowWidth: number) => SizeString) | undefined;
+    /** De hoogte van de modal: met SizeProp of een string. ( DEFAULT = 'm', 800px)
+     * - `function` met windowWidth als parameter, retourneert een string met px, %, em of vw
+     * - `string`: '834px', '50%, 60em', '100%'
+     * - `number`: size <= 100 ? als percentage, anders als px
+     */
+    height?: string | number | ((height: number) => SizeString) | undefined;
+    /** Helptag in Loon voor de modal */
+    helpTag?: string | undefined;
+    /** blokkeer sluiten van modal als je er buiten klikt? (default = false)
+     * @deprecated > click-outside gaat weg
+     */
+    enableClickOutsideDismiss?: boolean;
+    /** id for the modal itself */
+    id?: string | undefined;
+    z?: number | undefined;
+};
+/**
+ * Een modal-component. Als een modal een 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: {
+    ({ id, z, size, width, height, children: nodeChildren, onOpened, onDismiss, helpTag }: ModalProps): import("react/jsx-runtime").JSX.Element;
+    Head({ children, id }: {
+        id?: string | undefined;
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Een scrollende body voor de modal
+     * @param props
+     * @returns modal body
+     * @example <Modal.Body>Modal Body</Modal.Body>
+     */
+    Body: typeof InternBody;
+    /**
+     * Een niet-scrollende, altijd zichtbare foot voor de modal
+     * @param props props
+     * @returns modal foot
+     * @example <Modal.Foot>Optional Modal Foot</Modal.Foot>
+     */
+    Foot: typeof InternFoot;
+};
+declare function InternBody({ id, children, helpTag }: {
+    id?: string | undefined;
+    children: React.ReactNode;
+    helpTag?: string | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+declare function InternFoot({ id, children }: {
+    id?: string | undefined;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export { Modal };
+export type { ModalProps };

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

@@ -0,0 +1,38 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ColorProp, StrictOmit } from './../../types';
+import React from 'react';
+/** Props voor een Notification */
+export type NotificationProps = {
+    /** Content van de notificatie */
+    children: React.ReactNode;
+    /**
+     * Afhandeling van dismiss-click notificatie
+     * @param e event
+     */
+    onDismiss(_e?: React.MouseEvent<HTMLButtonElement | HTMLDivElement>): void;
+    /** onclick callback  */
+    onClick?(_e?: React.MouseEvent<HTMLDivElement>): void;
+    /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
+    autoDismissAfter?: number;
+    /** kleur van de notificatie (default = 'i') */
+    color?: ColorProp;
+    icon?: string | IconProp;
+    itemRef?: React.RefObject<any> | null;
+    id?: string;
+};
+/**
+ * Een instelbare notificatie. Default is een info-notificatie
+ * @param props
+ * @returns notificatie
+ * @example <Notification>Hello World</Notification>
+ */
+declare const Notification: {
+    ({ children, onDismiss, onClick, autoDismissAfter, color, icon, id, itemRef }: NotificationProps): import("react/jsx-runtime").JSX.Element;
+    Primary(props: StrictOmit<NotificationProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Danger(props: StrictOmit<NotificationProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Warning(props: StrictOmit<NotificationProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Success(props: StrictOmit<NotificationProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Link(props: StrictOmit<NotificationProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Info(props: StrictOmit<NotificationProps, "color">): import("react/jsx-runtime").JSX.Element;
+};
+export { Notification };

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

@@ -0,0 +1,58 @@
+import { SizeProp } from './../../types';
+type PaginationProps = {
+    /** current selected page number */ currentPage: number;
+    /** range to render bijvoorbeeld van de  `usePagination()`-hook. Bestaat uit numbers en `'dots'` op de plekken waar puntjes moeten komen
+     * @example const range = [1, 'dots', 6, 7, 8, 'dots', 100] */
+    range: Array<number | 'dots'>;
+    /** grootte van de pagination buttons (default = `s`) */
+    size?: SizeProp;
+    /** verberg de `vorige-pagina`-button (default = `false)` */
+    hidePrev?: boolean;
+    /** verberg de `volgende-pagina`-button (default = `false)` */
+    hideNext?: boolean;
+    /** verberg de `eerste pagina`-button (default = `false)` */
+    hideFirst?: boolean;
+    /** verberg de `laatste-pagina`-button (default = `false)` */
+    hideLast?: boolean;
+    /** verberg de `1, 2, 3,`-buttons (default = `false)` */
+    hideNumbers?: boolean;
+    /** disable all pagination buttons (default = `false)` */
+    disabled?: boolean;
+    /** function om de pagina te setten */
+    set?: (page: number) => void;
+    /** function om de currentPage op de eerste pagina te setten */
+    first?: () => void;
+    /** function om de currentPage op de laatste pagina te setten */
+    last?: () => void;
+    /** function om de currentPage op vorige pagina te setten */
+    prev?: () => void;
+    /** function om de currentPage op volgende pagina te setten */
+    next?: () => void;
+};
+/**
+ * Pagination component voor gebruik met de `usePagination()`-hook.
+ * @example
+ * const data: Data[] = createArrayWithRandomDataOfLength(1000);
+ * const maxRows = 20;
+ * const { range, active, next, prev, first, last, setPage } = usePagination({
+ *    total: Math.ceil(data.length / maxRows),
+ *  });
+ *
+ * return <Pagination range={range} currentPage={currentPage} next={next} prev={prev} first={first} last={last} set={set} />
+ * @param range - array met de pagina-nummers die getoond moeten worden OF `'dots'` waar de puntjes moeten komen
+ * @param currentPage - huidige pagina
+ * @param size - grootte van de pagination
+ * @param hidePrev - verberg de vorige-pagina knop
+ * @param hideNext - verberg de volgende-pagina knop
+ * @param hideFirst - verberg de eerste-pagina knop
+ * @param hideLast - verberg de laatste-pagina knop
+ * @param hideNumbers - verberg de pagina-nummers
+ * @param set - functie die wordt aangeroepen als er op een pagina-nummer wordt geklikt
+ * @param first - functie die wordt aangeroepen als er op de eerste-pagina knop wordt geklikt
+ * @param last - functie die wordt aangeroepen als er op de laatste-pagina knop wordt geklikt
+ * @param prev - functie die wordt aangeroepen als er op de vorige-pagina knop wordt geklikt
+ * @param next - functie die wordt aangeroepen als er op de volgende-pagina knop wordt geklikt
+ */
+declare function Pagination({ range, currentPage, size, hideFirst, hideLast, hidePrev, hideNext, hideNumbers, disabled, set, first, last, prev, next, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination };
+export type { PaginationProps };

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

@@ -0,0 +1,99 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { InputValueType, InputPropsType, InputStylingPropsType } from './../../forms/Input';
+import { ColorProp, PrettierType, StrictOmit } from './../../types';
+import React from 'react';
+type PanelProps = {
+    /** de kleur van het Panel (default = `i`) */
+    color?: ColorProp | undefined;
+    /** panel-children */
+    children?: React.ReactNode | undefined;
+    className?: string | undefined;
+};
+type PanelItemProps = {
+    /** Is dit panel item active? */
+    active?: boolean;
+    /** Is dit panel item disabled? */
+    disabled?: boolean;
+    /** Icon van het panel item (optioneel) */
+    icon?: string | IconProp;
+    /** content van het panelitem */
+    children: React.ReactNode;
+    /** Functie die wordt aangeroepen als er op het panel item wordt geklikt */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+type PanelTabsProps = {
+    /** Tabs van het panel, voor als je niet de `tabs`-prop wilt gebruikten */
+    children?: React.ReactNode | undefined;
+    /** wat is de active tab? */
+    activeTab?: string | undefined;
+    /** Functie die wordt aangeroepen als er op een tab wordt geklikt */
+    onTabChange?: (tab: string) => void | undefined;
+    /** Array van tabs, voor als je geen children wilt gebruiken */
+    tabs?: string[] | Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }> | undefined;
+};
+type PanelTabItemProps = {
+    /** is dit tab-item active? */
+    active?: boolean;
+    /** is dit tab-item disabled? */
+    disabled?: boolean;
+    /** Functie die wordt aangeroepen als er op het tab-item wordt geklikt */
+    onClick?: () => void;
+    /** content van het tab-item */
+    children: React.ReactNode;
+};
+type PanelInputProps<T extends InputValueType> = PrettierType<StrictOmit<InputPropsType<T>, 'optionList' | 'name'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
+    icon?: string | IconProp | undefined;
+    infoData?: string | React.ReactNode | ((helptag?: string | undefined) => void) | undefined;
+    name?: string | undefined;
+    iconRight?: 'hidden' | 'visible' | ((v: InputValueType, isHovered: boolean, isDisabled: boolean, isLoading: boolean) => [IconComponent: React.ReactNode, onClick?: () => void]) | undefined;
+}>;
+/**
+ * Een panel is een soort menu
+ * @example
+ *  <Panel color={panelTab}>
+ *    <Panel.Header>Panel header</Panel.Header>
+ *    <Panel.Item>Hieronder staan tabs. Verander het kleurtje</Panel.Item>
+ *    <Panel.Tabs tabs={panelTabs} activeTab={panelTab} onTabChange={handleChangeActivePanelTab}>
+ *      <Panel.TabItem disabled onClick={() => console.log('Woohoo!')}>
+ *        WOOHOO
+ *      </Panel.TabItem>
+ *    </Panel.Tabs>
+ *    <Panel.Item>Dit is een Panel Item</Panel.Item>
+ *    <Panel.Item active>Dit is een active Panel Item</Panel.Item>
+ *    <Panel.Item disabled>Dit is een disabled Panel Item</Panel.Item>
+ *    <Panel.Item onClick={() => console.log('clickable panel item clicked')}>
+ *      Dit is een klikbaar Panel Item
+ *    </Panel.Item>
+ *
+ *    <Panel.Header>Panel header in het midden</Panel.Header>
+ *    <Panel.Item icon={faBomb}>Dit is ook een Panel Item, maar met icon</Panel.Item>
+ *    <Panel.Item icon={faBomb} active>
+ *      Dit is ook een active Panel Item
+ *    </Panel.Item>
+ *    <Panel.Item onClick={() => console.log('clickable panel item clicked')} icon={faFire}>
+ *      Dit is een klikbaar Panel Item
+ *    </Panel.Item>
+ *    <Panel.Item icon={faBomb} disabled>
+ *      Dit is een disabled item
+ *    </Panel.Item>
+ *    <Panel.Header>Panel header an het end</Panel.Header>
+ *  </Panel>
+ */
+declare const Panel: {
+    ({ color, className: cnProp, children }: PanelProps): import("react/jsx-runtime").JSX.Element;
+    Tabs({ tabs, activeTab, onTabChange, children }: PanelTabsProps): import("react/jsx-runtime").JSX.Element;
+    TabItem({ active, disabled, onClick, children }: PanelTabItemProps): import("react/jsx-runtime").JSX.Element;
+    Header({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    Item({ icon, active, disabled, children, onClick }: PanelItemProps): import("react/jsx-runtime").JSX.Element;
+    /** Een input op het panel */
+    Input: typeof PanelInput;
+};
+declare function PanelInput({ icon, id: idProp, infoData, helpTag, name, loading, disabled, value, iconRight, onBlur, onFocus, ...props }: PanelInputProps<string>): import("react/jsx-runtime").JSX.Element;
+export { Panel };
+export type { PanelProps };

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

@@ -0,0 +1,28 @@
+import { SizeProp, ColorProp } from './../../types';
+type ProgressBarProps = {
+    /** Grootte van de progressbar */
+    size?: SizeProp;
+    /** De maximale waarde, default = 100 */
+    max?: number;
+    /** De waarde waarop de progressbar staat. Vul `undefined` of `'indeterminate'` in voor een onbepaalde, loopende progressbar */
+    value?: number | 'indeterminate';
+    /** teken of symbool **voor** de waarde (bijvoorbeeld in de title) */ prefix?: '%' | '€' | 'º' | '$' | '£' | '¢' | '¥' | (string & {});
+    /** teken of symbool **achter** de waarde (bijvoorbeeld in de title) */ suffix?: '%' | '€' | 'º' | '$' | '£' | '¢' | '¥' | (string & {});
+    /** De kleur van de progressbar (default = 'i') */
+    color?: ColorProp;
+    /** (optionele) hover-title voor de progress-bar. Als er geen title is gebruikt, wordt de `value` weergegeven (met pre- en suffix) */
+    title?: string | ((v?: number | 'indeterminate') => string);
+};
+/**
+ * Maak een progress-bar met de <progress> tag.
+ * Door de attribute `value` de waarde `undefined` of `'indeterminate'` te geven, krijg je een loopende progress bar
+ * @param props
+ * @returns een progress bar
+ * @example
+ * <ProgressBar value={50} />
+ * <ProgressBar value={50} extension="%" />
+ * <ProgressBar size='xl' />
+ */
+declare function ProgressBar({ color, size, prefix, suffix, max, value, title: titleProp }: ProgressBarProps): import("react/jsx-runtime").JSX.Element;
+export { ProgressBar };
+export type { ProgressBarProps };

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

@@ -0,0 +1,61 @@
+import { ColorProp } from './../../types';
+import React from 'react';
+type QuickViewProps = {
+    /** ref naar de quickview. Bijvoorbeeld voor gebruik met de `useClickOutside()`-hook */
+    itemRef?: any | null;
+    /** ID van de quickview */
+    id?: string;
+    /** Content van de quickview, kunnen Quickview.Head,er, Quickview.Body of Quickview.Footer elementen zijn. Andere elementen worden gewrapped in Quickview.Body */
+    children?: React.ReactNode;
+    /** onDismiss callback (voor de close-button) */
+    onDismiss?: () => void;
+    /** on Opened callback met optionele helptag */
+    onOpened?: (helptag?: string) => void;
+    /** de helptag van de quickview */
+    tag?: string;
+    /** header-kleur voor de quickview */
+    color?: ColorProp;
+    /** alignment van de quickview. LET OP: default = 'r' */
+    alignment?: 'l' | 'r';
+    /** begint deze quickview in de open-stand? */
+    startOpen?: boolean;
+};
+/**
+ * Component om aan (default) de rechterkant van het scherm een schermpje te tonen.
+ * @example
+ * <QuickView onDismiss={handleDismiss} tag="helpTag" color='d'>
+ *   <QuickView.Header>Optional QuickView Head</QuickView.Head>
+ *   <QuickView.Body>QuickView Body</QuickView.Body>
+ *   <QuickView.Footer>Optional QuickView Foot</QuickView.Foot>
+ * </QuickView>
+ * @example
+ * <QuickView onDismiss={handleDismiss} tag="helpTag" color='d'>
+ *   <div>This will be wrapped inside a QuickView.Body. A header with a dismiss-button will be added automatically</div>
+ * </QuickView>
+ * @example // met itemRef
+ * const itemRef = useOutsideClick(() => closeQuickView());
+ * // ...
+ * return <QuickView itemRef={itemRef} onDismiss={handleDismiss} tag="helpTag" color='d'>
+ *   <div>This will be wrapped inside a QuickView.Body</div>
+ * </QuickView>
+ */
+declare const QuickView: {
+    ({ children, id, itemRef, color, alignment, tag, onDismiss, onOpened }: QuickViewProps): import("react/jsx-runtime").JSX.Element;
+    Header: typeof InternHeader;
+    Body: ({ children }: InternBodyProps) => import("react/jsx-runtime").JSX.Element;
+    Footer: ({ children }: InternFooterProps) => import("react/jsx-runtime").JSX.Element;
+};
+type InternHeaderProps = {
+    children?: React.ReactNode;
+    color?: ColorProp;
+    onDismiss?: () => void;
+};
+declare function InternHeader({ children, color, onDismiss }: InternHeaderProps): import("react/jsx-runtime").JSX.Element;
+type InternBodyProps = {
+    children: React.ReactNode;
+};
+type InternFooterProps = {
+    children: React.ReactNode;
+};
+export { QuickView };
+export type { QuickViewProps };