loon-bulma-react 2025.0.34 → 2025.1.0

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

@@ -0,0 +1,187 @@
+import { KeyOf, AlignmentProp, SizeProp } from '@lib/types';
+import React from 'react';
+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 PaginationOptionsProp = {
+    /** 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  (-1 voor alles)*/
+    defaultRowsPerPage?: number;
+    /** Opties voor aantal rijen per pagina (gebruik `-1` voor alles) */
+    rowsPerPageOptions?: {
+        label: string;
+        value: number;
+    }[];
+};
+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;
+    /** paginatie verstoppen? (default = `false`)
+     * @deprecated gebruik de paginationOptions prop
+     */
+    hidePagination?: boolean;
+    /** initiele pagination number. default = 1 (first)
+     * @deprecated gebruik de paginationOptions prop
+     */
+    initialPage?: number;
+    /** maximaal aantal rijen in de tabel voor paginatie aangaat. (default = 20)
+     * @deprecated gebruik de paginationOptions prop
+     * - 0: geen maximum, alle rijen worden getoond
+     * - number: maximum aantal rijen voor paginatie */
+    maxRows?: 0 | number;
+    /** 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;
+    /** 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;
+    paginationOptions?: PaginationOptionsProp | undefined;
+};
+/**
+ * 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.
+ * @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, hidePagination, initialPage, hideSearch, headerContent, footerContent, size, maxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, onRowRightClick, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, paginationOptions: paginationOptionsProp, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export { DataTable };
+export type { DataTableProps, DataTableColumnProp as DataTableColumn };

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

@@ -0,0 +1,8 @@
+import { ColorProp } from '@lib/types';
+type DividerProps = {
+    color?: ColorProp | 'default' | undefined;
+    className?: string | undefined;
+    style?: React.CSSProperties | undefined;
+};
+declare function Divider({ color, style, className: cnProp }: DividerProps): import("react/jsx-runtime").JSX.Element;
+export { Divider };

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

@@ -0,0 +1,25 @@
+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;
+};
+declare const Dropdown: {
+    ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, }: DropDownProps): import("react/jsx-runtime").JSX.Element;
+    Divider(): import("react/jsx-runtime").JSX.Element;
+    Item({ children, onClick, ...props }: {
+        children: React.ReactNode;
+        onClick?: () => void;
+    } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    Link({ children, ...props }: {
+        children: React.ReactNode;
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+};
+export { Dropdown };
+export type { DropDownProps };

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

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

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

@@ -0,0 +1,104 @@
+import { SizeProp, AnchorTargetProp, AnchorRelProp } from '@lib/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/components/Icon/Icon.d.ts

@@ -0,0 +1,82 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { SizeProp, ColorProp } from '@lib/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;
+    /** 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, 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 };

package/dist/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/components/Indicator/Indicator.d.ts

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

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