loon-bulma-react 2026.0.39 → 2026.0.41

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

@@ -0,0 +1,76 @@
+import { AlignmentProp } from './../../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/lib/components/Section/Section.d.ts

@@ -0,0 +1,21 @@
+import { TagSizeProp } from './../../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/lib/components/SimpleTable/SimpleTable.d.ts

@@ -0,0 +1,130 @@
+import { StrictOmit } from './../../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 | React.ReactNode;
+    /** class voor de header-cell van de kolom */
+    headerClassName?: string;
+    /** class voor de footer-cell van de kolom */
+    footerClassName?: 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;
+    /** class voor de kolom
+     * - Als string: deze class wordt gebruikt voor alle cellen in deze kolom
+     * - Als function: aangeroepen met de value van de row
+     */
+    className?: string | ((v: T) => string);
+};
+/**
+ * Render een tabel. Als je een tabel met zoekfunctie, pagination en sorteren wil, moet je een @see DataTable nemen.
+ * @param props
+ * @returns een tabel gestyled met bulma
+ * @example
+ * <SimpleTable
+ *   data={customTableData}
+ *   columns={['id', 'first_name', 'last_name', 'email']}
+ *   rowIdentifier="id"
+ *   striped={true}
+ *   fullwidth={true}
+ *   hoverable={true}
+ *   narrow={true}
+ *   bordered={false}
+ * />
+ */
+declare function SimpleTable<T extends 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 };

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

@@ -0,0 +1,61 @@
+import { SizeProp } from './../../types';
+import React from 'react';
+type StatusType = 'active' | 'completed' | 'error' | 'pending';
+type StepChoiceType = 'neighbours' | 'disabled' | 'up' | 'down' | 'allowed';
+type StepsProps = {
+    /** Extra classes voor de steps-container */
+    className?: string;
+    /** Alleen <Steps.Item> componenten */
+    children: React.ReactNode;
+    /** Grootte van de steps (default = 'm') */
+    size?: SizeProp;
+    id?: string;
+    itemRef?: React.RefObject<any> | null;
+    /** Wat is de actieve step */
+    activeStepIndex?: number;
+    /** Change-step callback */
+    onChangeStep?: (step: number) => void;
+    /** stepChoice:
+     * - `neighbours`: alleen links/rechts vrij selecteren
+     * - `disabled`: niks mogen selecteren
+     * - `up`: alleen naar rechts vrij selecteren
+     * - `down`: alleen links beneden vrij selecteren
+     * - `allowed`: alles vrij selecteerbaar */
+    stepChoice?: StepChoiceType;
+};
+type StepItemProps = {
+    /** Step status */
+    status?: StatusType;
+    /** Title van de step */
+    title?: string;
+    /** Details bij de step */
+    details?: string;
+    /** Een makering van de step (default = stepnr) */
+    marker?: React.ReactNode | ((s?: StatusType) => React.ReactNode);
+    /** Tooltip voor deze step */
+    tooltip?: string;
+    children?: React.ReactNode;
+};
+/**
+ * Maak een stappen-paneel voor een set van stappen.
+ * @param props
+ * @returns een stappen-paneel
+ * @example
+ * <Steps activeStep={1} onChangeStep={handleStepChange}>
+ *   <Steps.Item title="Step 1" marker={1} />
+ *   <Steps.Item title="" marker={<Icon icon={faFlask} />} />
+ *   <Steps.Item title="Step 2" details="dit zijn de details voor deze stap" />
+ *   <Steps.Item title="" marker={<Icon icon={faBomb} />} status="error" />
+ *   <Steps.Item
+ *     title="Step 3"
+ *     marker={(status) => (status == 'pending' ? <Icon icon={faFlag} /> : <Icon icon={faFire} />)}
+ *   />
+ *   <Steps.Item title="Step 4" marker="A" />
+ * </Steps>
+ */
+declare const Steps: {
+    ({ size, id, itemRef, className: cn, activeStepIndex, onChangeStep, children, stepChoice }: StepsProps): import("react/jsx-runtime").JSX.Element;
+    Item(props: StepItemProps): import("react/jsx-runtime").JSX.Element;
+};
+export { Steps };
+export type { StepItemProps, StepsProps };

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

@@ -0,0 +1,47 @@
+import { SizeProp, AlignmentProp, StrictOmit } from './../../types';
+import React from 'react';
+export type TabBarProps = {
+    /** Tab grootte. (default = 'm') */
+    size?: SizeProp;
+    type?: 'page' | 'pill' | 'toggle' | 'lined';
+    id?: string;
+    /** Links, rechts of centered uilijnen (default = 'l') */
+    alignment?: AlignmentProp | undefined;
+    /** Is de tabbar fullwidth */
+    fullwidth?: boolean;
+    /** Initial active tab  (default 1e item) */
+    initialTab?: number | string | undefined;
+    /** Active tab, change the current tab AND sets the initial tab, (default 1e item) */
+    activeTab?: number | string | undefined;
+    /**
+     * Afhandeling van een tab geselecteerd.
+     * @param index index selected tab
+     */
+    onTabChange(index: number | string): void;
+    /** De tab items: Allemaal TabItem-Components */
+    children: React.ReactNode;
+};
+export type TabBarItemProps = {
+    /** Tooltip voor dit tabbar item */ title?: string;
+    /** Content voor dit tabbar item */ children: React.ReactNode;
+    /** ID van dit item */ tabId: number | string;
+    /** Is deze tab disabled? */ disabled?: boolean;
+    /** INTERN */ isActive?: boolean;
+    /** INTERN */ onClick: (tabId: number | string, disabled: boolean) => void;
+};
+/**
+ * Maak een tabs-lijst. Zichtbare content moet zelf geregeld worden.
+ * @param props
+ * @returns tabs component
+ * @example
+ * <TabBar onTabChange={handleTabChange} activeTab={activePage}>
+ *   <TabBar.Item tabId={1}>Tab 1</TabBar.Item>
+ *   <TabBar.Item tabId={2}><Icon icon={faFLag} />Tab 2</TabBar.Item>
+ *   <TabBar.Item tabId={3}>Tab 3</TabBar.Item>
+ * </TabBar>
+ */
+declare const TabBar: {
+    ({ id, type, activeTab: currentActiveTab, initialTab, size: sizeProp, alignment, fullwidth, children, onTabChange }: TabBarProps): import("react/jsx-runtime").JSX.Element;
+    Item(_props: StrictOmit<TabBarItemProps, "onClick" | "isActive">): import("react/jsx-runtime").JSX.Element;
+};
+export { TabBar };

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

@@ -0,0 +1,54 @@
+import { ColorProp, TagSizeProp, AlignmentProp } from './../../types';
+import React from 'react';
+export type TagProps = {
+    /** Content van de tag */
+    children: React.ReactNode;
+    /** Kleur van de tag, de standaard kleuren + dark & light en `is-${`string`}`-waardes */
+    color?: ColorProp | 'dark' | 'light' | `#${string}`;
+    /** Sizes van de tag. (default = 's'). LET OP 3 verschillende sizes ipv 4! */
+    size?: TagSizeProp;
+    /** Moet de light-colored versie van de tag getoont worden */
+    light?: boolean;
+    /** Moet de dark-colored versie van de tag getoont worden */
+    dark?: boolean;
+    /** Moet er een dismiss-knop op de tag, en zo ja, definieer daar een functie voor */
+    onDismiss?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Title voor de tag  (tooltip) */
+    title?: string;
+};
+export type TagsProps = {
+    /** De content van de tags-div */
+    children: React.ReactNode;
+    /** Moeten de tags aan elkaar geplakt worden? */
+    merged?: boolean;
+    /** De grootte van alle tags , overschrijfbaar per tag  (default = 's'). LET OP: 3 sizes ipv 4 */
+    size?: TagSizeProp;
+    /** Alignment van de tags (default = 'l') */
+    alignment?: AlignmentProp;
+    /** Extra classes op de tags container  */
+    className?: string;
+    id?: string;
+    styles?: React.CSSProperties;
+    itemRef?: React.RefObject<any> | null;
+};
+/**
+ * Maak een tag
+ * @param props Tag Props
+ * @returns een tag
+ * @example
+ * <Tag>Hello</Tag>
+ * <Tag color='d'>Danger</Tag>
+ */
+export declare function Tag({ children, color, size: sizeProp, light, dark, title, onDismiss }: TagProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Maak een tag-container aan. De tags kunnen aan elkaar geplakt worden of niet.
+ * De grootte van de tags kan ook ingesteld worden
+ * @param props
+ * @returns een groep van tags
+ * @example
+ * <Tags size="m">
+ *   <Tag>Tag 1</Tag>
+ *   <Tag color="i">Tag 2</Tag>
+ * </Tags>
+ */
+export declare function Tags({ children: nodes, merged, size: sizeProp, alignment, className: cn, styles, itemRef, id, }: TagsProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,62 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { AlignmentProp, ColorProp, TagSizeProp } from './../../types';
+type TimeLineProps = {
+    id?: string;
+    /** Alignment van de timeline (default = 'l', left) */
+    alignment?: AlignmentProp;
+    /** Children van de timeline, dus TimeLine.Item & TimeLine.Point */
+    children: React.ReactNode;
+    /** Extra classname op de timeline container */
+    className?: string;
+};
+type TimeLineItemProps = {
+    /** Aanpassingen aan de default grijze marker op de timeline. Los van elkaar instelbaar */
+    marker?: {
+        /** Icon op de timeline */
+        icon?: string | IconProp;
+        /** Aangepaste kleur */
+        color?: ColorProp;
+    };
+    /** Een title voor omschrijving van het item */
+    heading?: string;
+    /** Content bij dit timeline item */
+    children: React.ReactNode;
+    /** Een tooltip voor een timeline item */
+    title?: string;
+    /** onClick() callback voor timeline content */
+    onClick?: (heading?: string) => void;
+};
+type TimeLinePointProps = {
+    /** De content van het Point */
+    children: React.ReactNode;
+    /** De kleur van het point (default = 'l', link) */
+    color?: ColorProp;
+    /** De grotte van het point (default = 's', small) */
+    size?: TagSizeProp;
+    /** Een optionele tooltip voor dit point */
+    title?: string;
+    /** onClick() callback voor timeline content */
+    onClick?: () => void;
+};
+/**
+ * Een timeline is een lijst van items met een marker op een lijn.
+ * @param props
+ * @returns een Timeline component
+ * @example
+ * <TimeLine alignment="c">
+ *   <TimeLine.Point>Start</TimeLine.Point>
+ *   <TimeLine.Point color="l">2016</TimeLine.Point>
+ *   <TimeLine.Item heading="March 2016">nothing happened</TimeLine.Item>
+ *   <TimeLine.Item marker={{ color: 's' }} heading="August 2016">
+ *     Als nothing happened
+ *   </TimeLine.Item>
+ *   <TimeLine.Point color="d" size="m"> 2017</TimeLine.Point>
+ * </TimeLine>
+ */
+declare const TimeLine: {
+    ({ id, alignment, children, className: cn }: TimeLineProps): import("react/jsx-runtime").JSX.Element;
+    Point({ children, color, size, title, onClick }: TimeLinePointProps): import("react/jsx-runtime").JSX.Element;
+    Item({ marker, heading, children, title, onClick }: TimeLineItemProps): import("react/jsx-runtime").JSX.Element;
+};
+export { TimeLine };
+export type { TimeLineProps, TimeLineItemProps, TimeLinePointProps };

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

@@ -0,0 +1,71 @@
+import React from 'react';
+type HeadingProps = {
+    children: React.ReactNode;
+    itemRef?: React.RefObject<any> | null;
+    size?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | '1' | '2' | '3' | '4' | '5' | '6' | '7';
+    subtitle?: boolean;
+    id?: string;
+    ariaLabeledBy?: string;
+    ariaRole?: 'heading' | 'presentation' | 'tab' | 'none';
+} & React.HTMLAttributes<HTMLHeadingElement>;
+/**
+ * Een `<h1>`.
+ * @param children: de content van de tag
+ * @param size: de (bulma)-grootte van de tag (1 t/m 6, default = 3)
+ * @param subtitle: wordt deze title-tag gebruikt als een subtitle? )Default = false)
+ * @example <H1 size={1}>Title</H1>
+ * @example <H1 size='1'>Title</H1>
+ * @example <H1 subtitle size={1}>Subtitle</H1>
+ */
+declare const H1: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, className: cn, itemRef, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Een `<h2>`
+ * @param children: de content van de tag
+ * @param size: de (bulma)-grootte van de tag (1 t/m 6, default = 3)
+ * @param subtitle: wordt deze title-tag gebruikt als een subtitle? )Default = false)
+ * @example <H2 size={1}>Title</H2>
+ * @example <H2 size='1'>Title</H2>
+ * @example <H2 subtitle size={1}>Subtitle</H2>
+ */
+declare const H2: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, className: cn, itemRef, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Een `<h3>`
+ * @param children: de content van de tag
+ * @param size: de (bulma)-grootte van de tag (1 t/m 6, default = 3)
+ * @param subtitle: wordt deze title-tag gebruikt als een subtitle? )Default = false)
+ * @example <H3 size={1}>Title</H3>
+ * @example <H3 size='1'>Title</H3>
+ * @example <H3 subtitle size={1}>Subtitle</H3>
+ */
+declare const H3: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, className: cn, itemRef, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Een `<h3>`
+ * @param children: de content van de tag
+ * @param size: de (bulma)-grootte van de tag (1 t/m 6, default = 3)
+ * @param subtitle: wordt deze title-tag gebruikt als een subtitle? )Default = false)
+ * @example <H4 size={1}>Title</H1>
+ * @example <H4 size='1'>Title</H4>
+ * @example <H4 subtitle size={1}>Subtitle</H4>
+ */
+declare const H4: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, className: cn, itemRef, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Een `<h5>`
+ * @param children: de content van de tag
+ * @param size: de (bulma)-grootte van de tag (1 t/m 6, default = 3)
+ * @param subtitle: wordt deze title-tag gebruikt als een subtitle? )Default = false)
+ * @example <H5 size={1}>Title</H5>
+ * @example <H5 size='1'>Title</H5>
+ * @example <H5 subtitle size={1}>Subtitle</H5>
+ */
+declare const H5: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, className: cn, itemRef, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Een `<h6>`
+ * @param children: de content van de tag
+ * @param size: de (bulma)-grootte van de tag (1 t/m 6, default = 3)
+ * @param subtitle: wordt deze title-tag gebruikt als een subtitle? )Default = false)
+ * @example <H6 size={1}>Title</H6>
+ * @example <H6 size='1'>Title</H6>
+ * @example <H6 subtitle size={1}>Subtitle</H6>
+ */
+declare const H6: ({ children, subtitle, size, id, ariaLabeledBy, ariaRole, className: cn, itemRef, ...props }: HeadingProps) => import("react/jsx-runtime").JSX.Element;
+export { H1, H2, H3, H4, H5, H6 };

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

@@ -0,0 +1,80 @@
+import { AlignmentProp, SizeProp } from './../../types';
+import React from 'react';
+type ToggleBarProps = {
+    /** De beginwaarde (default = undefined)
+     * Deze property wordt alleen voor ToggleItems gebruikt. voor OnOffToggleItems kan dat per item geset worden
+     * Om een waarde van buitenaf te zete, gebruik je de 'value'-prop
+     */
+    initialValue?: string;
+    /** De beginwaarde, alsd ie van buitenaf aangepast mag worden. gebruik 'initialValue' voor alleen een beginwaarde */
+    value?: string;
+    /** ToggleItems */
+    children: React.ReactNode;
+    /** Callback voor toggelen */
+    onToggle?: (toggledItem: string) => void;
+    /** Zijn de randen afgerond of vierkant (default true) */
+    rounded?: boolean;
+    /** Alignment van de container */
+    alignment?: AlignmentProp;
+    /** Size van de buttons (default = 's') */
+    size?: SizeProp;
+    /** Extra classes voor de toggle-bar */
+    className?: string;
+};
+type ToggleItemProps = {
+    /** Content van een Toggle Item */
+    children: React.ReactNode;
+    /** Is dit item disabled? */
+    disabled?: boolean;
+    /** Selectie-naam voor dit toggle-item. ALs undefined wordt de children-string-content gebruikt */
+    identifier?: string;
+    /** Tooltip voor dit toggle-item */
+    title?: string;
+    onClick?: (toggledItem?: string) => void;
+};
+type OnOffToggleItemProps = ToggleItemProps & {
+    /** Set de initiele waarde van dit toggle item */
+    toggled?: boolean;
+    /** onToggle callback, deze 'cancelt' de OnToggle van de <ItemToggleBar> voor dit item */
+    onToggle?: (on: boolean, item: string) => void;
+};
+/**
+ * Een groep van bij-elkaar-horende buttons waar er maar 1 van actief kan zijn.
+ * Om elk toggle-item APART te kunnen togglen, gebruik je de ItemToggleBar Component.
+ * De Togglebar gebruikt de default size voor Buttons
+ * @param props
+ * @returns een Toggle bar
+ * @example
+ * <ToggleBar onToggle={handleToggle} initialValue={calendarView}>
+ *   <ToggleBar.Item>WeekView</ToggleBar.Item>
+ *   <ToggleBar.Item>MonthView</ToggleBar.Item>
+ * </ToggleBar>
+ *
+ * <ToggleBar >
+ *   <ToggleBar.OnOffItem onToggle={handleToggle2} identifier="1">
+ *     Toggle 2
+ *   </ToggleBar.OnOffItem>
+ *   <ToggleBar.OnOffItem toggled={true} onToggle={handleToggle3} identifier="2">
+ *     Toggle 3
+ *   </ToggleBar.OnOffItem>
+ * </ToggleBar>
+ */
+declare const ToggleBar: {
+    ({ size: sizeProp, rounded, alignment, value, initialValue, children: nodes, className: classes, onToggle, }: ToggleBarProps): import("react/jsx-runtime").JSX.Element;
+    /**
+     * Item binnen de ToggleBar. Een van de ToggleItems in een ToggleBar kan maar actief zijn.
+     * @param props
+     * @returns een item in de togglebar waarvan er maar 1 actief kan zijn
+     * @example <ToggleBar.Item>Item 2</ToggleBar.Item>
+     */
+    Item: (props: ToggleItemProps) => import("react/jsx-runtime").JSX.Element;
+    /**
+     * Een zelf-toggelend item in een ToggleBar. OnOffToggleItems regelen zelf de toggle-state.
+     * @param props
+     * @returns een losstaand toggle-baar item.
+     * @example <ToggleBar.OnoffItem onToggle={handleToggle} identifier="1">Toggle 1</ToggleBar.OnoffItem>
+     */
+    OnOffItem: (props: OnOffToggleItemProps) => import("react/jsx-runtime").JSX.Element;
+};
+export { ToggleBar };
+export type { ToggleBarProps, ToggleItemProps, OnOffToggleItemProps };

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

@@ -0,0 +1,50 @@
+import React from 'react';
+import { PositionProp } from 'lib';
+/** actions die de tooltip kan doen */
+type ActionType = 'hover' | 'focus';
+/** props bij de Tooltip component */
+type TooltipProps = {
+    /** className voor de container van de tooltip (dat is een `<span>`) */
+    className?: string | undefined;
+    /** Styling-object voor de container van de tooltip (dat is een `<span>`) */
+    style?: React.CSSProperties | undefined;
+    /** de inhoud van de tooltip, een string of een component. __LET OP!__: maximale width van 300px */
+    content?: React.ReactNode | undefined;
+    /** Waar moet de tooltip op worden weergegeven? */
+    children: React.ReactNode;
+    /** Waar moeten we de tooltip tonen? (default = `rt`, right-top)
+     * - `t` = top
+     * - `b` = bottom
+     * - `l` = left
+     * - `r` = right
+     * - `tl` of `lt` = top left
+     * - `tr` of `rt` = top right
+     * - `bl` of `lb` = bottom left
+     * - `br` of `rb` = bottom right
+     */
+    placement?: PositionProp | 'tl' | 'bl' | 'tr' | 'br' | 'lt' | 'lb' | 'rt' | 'rb' | undefined;
+    /** Op welke (meer dan 1 mogelijk) moet de tooltip getoont worden? (Default  = `hover`)
+     * @example triggers={['hover', 'click']}
+     * @example triggers="click"
+     */
+    triggers?: ActionType | Array<ActionType> | undefined;
+    /** Moet de pijl getoont worden? (Default = `false`) */
+    hideArrow?: boolean | undefined;
+    /** setten van de display-pattribute voor de tooltip-children. Soms heb je wat anders nodig. Default = 'inline-block' */
+    display?: 'inline-block' | 'block' | 'inline' | 'flex' | 'inline-flex' | 'grid' | 'inline-grid' | 'contents' | 'none' | 'initial' | 'inherit' | 'unset' | undefined;
+    /** Hoe lang moet de tooltip wachten voordat hij getoont wordt? (Default = 0.2)
+     * - number: delay voor show & hide
+     * - [number, number]: [delayShow, delayHide]
+     */
+    delay?: number | [number, number];
+};
+/**
+ * Tooltip component, gebaseerd op rc-tooltip!
+ * @see https://github.com/react-component/tooltip
+ * @example <TT content="Tooltip content">Hover me</TT>
+ * @example <TT content="Tooltip content" placement="t">Hover me</TT>
+ * @example <TT content={<>Tooltip content</>} placement="b">Hover me</TT>
+ * @example <TT content="Tooltip content" triggers={['click', 'contextMenu']}>Click or RightClick me</TT>
+ */
+declare function TT({ className, children, style, content, hideArrow, triggers, placement: plcmnt, display, delay, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+export { TT as Tooltip };