loon-bulma-react 2025.0.34 → 2025.1.0

package/dist/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 '@lib/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/components/Modal/Modal.d.ts

@@ -0,0 +1,74 @@
+import { SizeProp } from '@lib/types';
+import React from 'react';
+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 grootte 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
+     */
+    size?: SizeProp | 'max' | string | number | ((windowWidth: number) => `${number}${'px' | '%' | 'em' | 'vw'}`) | 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, 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/components/Notification/Notification.d.ts

@@ -0,0 +1,38 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ColorProp, StrictOmit } from '@lib/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>): 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/components/Pagination/Pagination.d.ts

@@ -0,0 +1,56 @@
+import { SizeProp } from '@lib/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;
+    /** 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, set, first, last, prev, next, }: PaginationProps): import("react/jsx-runtime").JSX.Element;
+export { Pagination };
+export type { PaginationProps };

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

@@ -0,0 +1,98 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { InputValueType, InputPropsType, InputStylingPropsType } from '@lib/forms/Input';
+import { ColorProp, PrettierType, StrictOmit } from '@lib/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;
+}>;
+/**
+ * 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, onBlur, onFocus, ...props }: PanelInputProps<string>): import("react/jsx-runtime").JSX.Element;
+export { Panel };
+export type { PanelProps };

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

@@ -0,0 +1,28 @@
+import { SizeProp, ColorProp } from '@lib/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/components/QuickView/QuickView.d.ts

@@ -0,0 +1,61 @@
+import { ColorProp } from '@lib/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 };

package/dist/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,76 @@
+import { AlignmentProp } from '@lib/types';
+import React from 'react';
+/**
+ * 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: {
+        id?: string;
+        itemRef?: React.RefObject<any> | null;
+        /** Wat moet er in de flexbox container komen */
+        children: React.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;
+    }) => import("react/jsx-runtime").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: {
+        itemRef?: React.RefObject<any>;
+        id?: string;
+        /** Wat moet er in de flexbox container komen */
+        children: React.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;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { ScrollArea };

package/dist/components/Section/Section.d.ts

@@ -0,0 +1,21 @@
+import { TagSizeProp } from '@lib/types';
+import React from 'react';
+type SectionPropsType = {
+    id?: string;
+    itemRef?: React.RefObject<HTMLElement | HTMLDivElement | any> | null;
+    children?: React.ReactNode | undefined;
+    className?: string;
+    /** extra styles voor dit object */
+    styles?: React.CSSProperties;
+    /** size voor  de section, de verticale margin. (default = `s`). Deze gebruikt maar 3 sizes! */
+    size?: TagSizeProp;
+};
+/**
+ * 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>
+ */
+export declare function Section({ children, className: cn, styles, id, itemRef, size }: SectionPropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SimpleTable/SimpleTable.d.ts

@@ -0,0 +1,121 @@
+import { KeyOf, StrictOmit } from '@lib/types';
+import React from 'react';
+type SimpleTableProps<T extends unknown = unknown> = {
+    id?: string;
+    tableRef?: React.RefObject<HTMLTableElement>;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    /**
+     * 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?: KeyOf<T>[] | SimpleTableColProps<T>[];
+    /** De data van tabel: een array objects */
+    data: T[];
+    /** Waarmee moet een rij worden geidentificeerd. Anders wordt index gebruikt, liever niet: react-performance */
+    rowIdentifier: KeyOf<T> | ((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;
+    /** Is de tabel horizontaal scrollable als er niet genoeg ruimte op het scherm is? (default false) */
+    scrollX?: 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 extends unknown = unknown> = {
+    /** 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: KeyOf<T> | ((v: T) => string | React.ReactNode);
+    hidden?: boolean;
+};
+/**
+ * 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 unknown = unknown>({ rowIdentifier: rowKey, columns: cols, data, onRowSelected, tableRef, containerRef, id, hasFooter, ...props }: SimpleTableProps<T>): import("react/jsx-runtime").JSX.Element;
+type TableProps = {
+    id?: string;
+    containerRef?: React.RefObject<HTMLDivElement>;
+    tableRef?: React.RefObject<HTMLTableElement>;
+    /** Is de tabel scrollbaar in horizontale richting ? (default false) */ scrollX?: boolean;
+    /** 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;
+    /** De tabel rows, headers, body, etc */ children: React.ReactNode;
+    /** Extra classnames */ className?: string;
+};
+type TablePartProps<T extends HTMLElement = HTMLElement> = {
+    children?: React.ReactNode;
+} & React.HTMLProps<T>;
+/** Simpele wrapper om een Bulma-tabel heen. De classes van bulma woren hier gebruikt, verder is het een gewone HTML-tabel, je moet dus alles nog zelf regelen.
+ * @param props de props voor de tabel
+ * @description
+ * - `Table` - is alleen de `<table>`-tag. Met de extra functions op dit object kan je dingen aan de tabel toevoegen.
+ * - `Table.Head`, `Table.Body` en `Table.Foot` zijn de `<thead>`, `<tbody>` en `<tfoot>` tags. Deze kan je gebruiken om de tabel op te bouwen.
+ * - `Table.Row` is de `<tr>` tag. Deze kan je gebruiken om een rij in de tabel te maken.
+ * - `Table.HCell` of `Table.TH` - is de `<th>` tag. Deze kan je gebruiken om een header-cel in de tabel te maken.
+ * - `Table.Cell` of `Table.TD` zijn de `<td>` tag. Deze kan je gebruiken om een cel in de tabel te maken.
+ * - `Table.ColGroup` is de `<colgroup>` tag. Deze kan je gebruiken om een colgroup in de tabel te maken.
+ * - `Table.Col` is de `<col>` tag. Deze kan je gebruiken om een column in de tabel te maken en deze bijvoorbeeld met een achtergrondkleur te vullen.
+ */
+declare const Table: {
+    ({ id, containerRef, tableRef, scrollX, striped, bordered, hoverable, fullwidth, narrow, children, className: extraClasses, }: TableProps): import("react/jsx-runtime").JSX.Element;
+    Head({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+    Foot({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+    Body({ children, className, ...props }: TablePartProps<HTMLTableSectionElement>): import("react/jsx-runtime").JSX.Element;
+    Row({ children, className, ...props }: TablePartProps<HTMLTableRowElement>): import("react/jsx-runtime").JSX.Element;
+    Cell({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
+        children?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    HCell({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
+        children?: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    ColGroup({ className, ...props }: StrictOmit<TablePartProps<HTMLTableColElement>, "span">): import("react/jsx-runtime").JSX.Element;
+    Col(props: StrictOmit<TablePartProps<HTMLTableColElement>, "children">): import("react/jsx-runtime").JSX.Element;
+    /** `<tr>`, table-row */
+    TR: ({ children, className, ...props }: TablePartProps<HTMLTableRowElement>) => import("react/jsx-runtime").JSX.Element;
+    /** `<td>`-cell */
+    TD: ({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
+        children?: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    /** `<th>`-cell */
+    TH: ({ children, className, ...props }: TablePartProps<HTMLTableCellElement> & {
+        children?: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+};
+export { SimpleTable, Table };
+export type { SimpleTableProps, SimpleTableColProps };