loon-bulma-react 2023.0.1 → 2023.0.2

package/README.md

@@ -3,12 +3,14 @@
 > ## Aanpassingen
 >
 > - Inputs: voor inputs waarbij je moet typen: de `icons`-prop om een eigen icoontje in te kunnen stellen.
+> - Confirm provider: een Zeker-weten?-achtige popup.
 
 ## [Bulma](https://bulma.io/) & [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
 - [Installatie](#installatie)
 - [Gebruik](#gebruik)
 - [Notifier](#notifier)
+- [Confirmation](#confirmation)
 - [Componenten](#components)
 
   - [Layout](#layout)
@@ -229,6 +231,44 @@ const { notify, remove, clear } = useNotifier();
 >
 > De `useNotifier()`-hook werkt alleen in componenten die children zijn van de _NotifierProvider_, dus als je de _NotifierProvider_ in `App.tsx` importeert en neerzet, kan je de hook daar **niet** gebruiken.
 
+## Confirm <a id="confirmation"></a>
+
+De ConfirmProvider is een ContextProvider die ervoor zorgt dat je overal ee confirm-request kan doen met een mooiere modal dan de modal van Bulma. De ConfirmProvider moet om de componenten heen die de `useConfirm()`-hook gebruiken.
+
+```tsx
+// App.tsx
+<ConfirmProvider>
+  {/* Alle children die de Confirm moeten kunnen gebruiken*/}
+  {children}
+  <MyComponent />
+  <MyComponent2>La di dah</MyComponent2>
+</ConfirmProvider>
+```
+
+In een van de componenten kan dan de `useConfirm()`-hook gebruikt worden om een confirm te tonen.
+
+```tsx
+// MyComponent.tsx
+export function MyComponent() {
+  const { confirm } = useConfirm('JAA', 'NEE', <Button.Info>Meer info</Button.Info>);
+
+  const confirmSomething = (msg: string) => {
+    const isConfirmed = await confirm(msg);
+    if (isConfirmed) console.log('YAYYY');
+    else console.log('NOOOOO');
+  };
+
+  return <Button onClick={() => confirmSomething('Zeker weten?')}>Confirm</Button>;
+}
+```
+
+De `useConfirm()`-hook exporteert nog meer dan alleen de `confirm()`-function. Deze functies zijn voor intern gebruik.
+
+- confirm: `(content: string) => Promise<boolean>`;
+- (AFBLIJVEN) onConfirm: `() => void`;
+- (AFBLIJVEN) onCancel: `() => void`;
+- (AFBLIJVEN) confirmState: `State` van de confirm req;
+
 ## Componenten <a id="components"></a>
 
 ### Layout <a id="layout"></a>

package/dist/components/AspectRatio/AspectRatio.d.ts

@@ -0,0 +1,28 @@
+import React from 'react';
+/** Props voor een aspect-ratio */
+declare type AspectRatioProps = {
+    /** de ratio (width x height) van het gewenste element */
+    ratio: '1by1' | '5by4' | '4by5' | '4by3' | '3by4' | '3by2' | '2by3' | '5by3' | '3by5' | '16by9' | '9by16' | '2by1' | '1by2' | '3by1' | '1by3';
+    /** het item dat aan de aspect-ratio moet voldoen */
+    children: React.ReactNode;
+    /**  */
+    caption?: {
+        placement: 'top' | 'bottom';
+        text: string;
+    };
+    /** extra classes on aspect-ratio-element */
+    className?: string;
+};
+/**
+ * gebruik een aspect-ratio voor een bepaald resizable element, waar een width en height bij hoort.
+ * Zoals bijvoorbeeld een iframe, img, etc
+ * @param props
+ * @returns een aspect-ratio'd element.
+ * @example
+ * <AspectRatio ratio="16by9" >
+ *   <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ">
+ * </AspectRatio>
+ */
+declare function AspectRatio(props: AspectRatioProps): JSX.Element;
+export { AspectRatio };
+export type { AspectRatioProps };

package/dist/components/Box/Box.d.ts

@@ -0,0 +1,19 @@
+import React, { CSSProperties } from 'react';
+declare type BoxProps = {
+    /** de children van de box */
+    children: React.ReactNode;
+    /** Andere classes om op de box toe te passen */
+    className?: string;
+    /** style props direct op de box */
+    styles?: CSSProperties;
+};
+/**
+ * Maak een witte box om andere elementen heen. Voor forms of modals. Heeft een beetje schaduw.
+ * @see {@link https://bulma.io/documentation/elements/box/}
+ * @param {{children: any, classes?: string|string[]}} props
+ * @returns een witte box om elementen.
+ * @example <Box>This is a box</Box>
+ */
+declare const Box: ({ children, className: classes, styles }: BoxProps) => JSX.Element;
+export { Box };
+export type { BoxProps };

package/dist/components/Columns/Column.d.ts

@@ -0,0 +1,153 @@
+import React, { CSSProperties } from 'react';
+declare type ColumnProps = {
+    /** wat staat er in deze kolom */
+    children: React.ReactNode;
+    /** extra classes op deze kolom */
+    className?: string;
+    /** zet de styling direct */
+    styles?: CSSProperties;
+};
+declare type ExpandedColumnProps = ColumnProps & {
+    /** is deze kolom zo smal mogelijk of vanaf welke schermmaat */
+    narrow?: boolean | 'mobile' | 'tablet' | 'touch' | 'desktop' | 'widescreen' | 'fullhd';
+};
+/**
+ * Standaard kolom voor gebruik in {@link Columns}.
+ * Als voor narrow een waarde is meegegeven, wordt de minimale ruimte voor deze kolom aangehouden: https://bulma.io/documentation/columns/sizes/
+ * @return Een kolom
+ * @example
+ * <Column>This is a column</Column>
+ * <Column narrow>This is a narrow column</Column>
+ */
+declare const Column: {
+    (props: ExpandedColumnProps): JSX.Element;
+    /** Column  full width of parent
+     * @returns een kolom met de maximale breedte van de parent 'Columns'
+     * @example <Column.Full>This is a full column</Column.Full>
+     */
+    Full(props: ColumnProps): JSX.Element;
+    /** Column  1/2 width of parent
+     * @returns een kolom met de halve breedte van de parent 'Columns'
+     * @example <Column.Half>This is a half column</Column.Half>
+     */
+    Half(props: ColumnProps): JSX.Element;
+    /** Spread columns based on thirds (1/3, 2/3) */
+    Thirds: {
+        /** Column  1/3 width of parent
+         * @returns een kolom met 1/3 breedte van de parent 'Columns'
+         * @example <Column.Thirds.One>This is a first third column</Column.Thirds.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/3 width of parent
+         * @returns een kolom met 2/3 breedte van de parent 'Columns'
+         * @example <Column.Thirds.Two>This is a second third column</Column.Thirds.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+    };
+    /** Spread columns based on quarters (1/4, 2/4, 3/4) */
+    Quarters: {
+        /** Column  1/4 width of parent
+         * @returns een kolom met 1/4 breedte van de parent 'Columns'
+         * @example <Column.Quarters.One>This is a 1/4 column</Column.Quarters.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/4 width of parent
+         * @returns een kolom met 2/4 breedte van de parent 'Columns'
+         * @example <Column.Quarters.Two>This is a 2/4 column</Column.Quarters.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+        /** Column  3/4 width of parent
+         * @returns een kolom met 3/4 breedte van de parent 'Columns'
+         * @example <Column.Quarters.Three>This is a 3/4 column</Column.Quarters.Three>
+         */
+        Three: (props: ColumnProps) => JSX.Element;
+    };
+    /** Spread columns based on fifths (1/5, 2/5, 3/5, 4/5) */
+    Fifths: {
+        /** Column  1/5 width of parent
+         * @returns een kolom met 1/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.One>This is a 1/5 column</Column.Fifths.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/5 width of parent
+         * @returns een kolom met 2/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.Two>This is a 2/5 column</Column.Fifths.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+        /** Column  3/5 width of parent
+         * @returns een kolom met 3/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.Three>This is a 3/5 column</Column.Fifths.Three>
+         */
+        Three: (props: ColumnProps) => JSX.Element;
+        /** Column  4/5 width of parent
+         * @returns een kolom met 4/5 breedte van de parent 'Columns'
+         * @example <Column.Fifths.Four>This is a 4/5 column</Column.Fifths.Four>
+         */
+        Four: (props: ColumnProps) => JSX.Element;
+    };
+    Twelves: {
+        /** Column  1/12 width of parent
+         * @returns een kolom met 1/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.One>This is a 1/12 column</Column.Twelves.One>
+         */
+        One: (props: ColumnProps) => JSX.Element;
+        /** Column  2/12 width of parent
+         * @returns een kolom met 2/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Two>This is a 2/12 column</Column.Twelves.Two>
+         */
+        Two: (props: ColumnProps) => JSX.Element;
+        /** Column  3/12 width of parent
+         * @returns een kolom met 3/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Three>This is a 3/12 column</Column.Twelves.Three>
+         */
+        Three: (props: ColumnProps) => JSX.Element;
+        /** Column  4/12 width of parent
+         * @returns een kolom met 4/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Four>This is a 4/12 column</Column.Twelves.Four>
+         */
+        Four: (props: ColumnProps) => JSX.Element;
+        /** Column  5/12 width of parent
+         * @returns een kolom met 5/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Five>This is a 5/12 column</Column.Twelves.Five>
+         */
+        Five: (props: ColumnProps) => JSX.Element;
+        /** Column  6/12 width of parent
+         * @returns een kolom met 6/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Six>This is a 6/12 column</Column.Twelves.Six>
+         */
+        Six: (props: ColumnProps) => JSX.Element;
+        /** Column  7/12 width of parent
+         * @returns een kolom met 7/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Seven>This is a 7/12 column</Column.Twelves.Seven>
+         */
+        Seven: (props: ColumnProps) => JSX.Element;
+        /** Column  8/12 width of parent
+         * @returns een kolom met 8/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Eight>This is a 8/12 column</Column.Twelves.Eight>
+         */
+        Eight: (props: ColumnProps) => JSX.Element;
+        /** Column  9/12 width of parent
+         * @returns een kolom met 9/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Nine>This is a 9/12 column</Column.Twelves.Nine>
+         */
+        Nine: (props: ColumnProps) => JSX.Element;
+        /** Column  10/12 width of parent
+         * @returns een kolom met 10/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Ten>This is a 10/12 column</Column.Twelves.Ten>
+         */
+        Ten: (props: ColumnProps) => JSX.Element;
+        /** Column  11/12 width of parent
+         * @returns een kolom met 11/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Eleven>This is a 11/12 column</Column.Twelves.Eleven>
+         */
+        Eleven: (props: ColumnProps) => JSX.Element;
+        /** Column  12/12 width of parent
+         * @returns een kolom met 12/12 breedte van de parent 'Columns'
+         * @example <Column.Twelves.Twelve>This is a 12/12 column</Column.Twelves.Twelve>
+         */
+        Twelve: (props: ColumnProps) => JSX.Element;
+    };
+    displayName: string;
+};
+export { Column };
+export type { ColumnProps, ExpandedColumnProps };

package/dist/components/Columns/Columns.d.ts

@@ -0,0 +1,29 @@
+import React, { CSSProperties } from 'react';
+export declare type ColumnsProps = {
+    /** Children van de Columns. Moeten van het type @see Column zijn */
+    children: React.ReactNode;
+    /** de gap-grootte (stappen van .25rem), een margin tussen kolommen (default = 3, 0.75rem) */
+    gap?: '0' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | undefined;
+    /** mogen de kolommen over meerdere rijen verdeeld worden */
+    multiline?: boolean;
+    /** moeten de kolom centraal aligned worden */
+    centered?: boolean;
+    /** extra classes voor dit element */
+    className?: string;
+    /** set de styling direct */
+    styles?: CSSProperties;
+};
+/**
+ * Verdeel een pagina in kolommen, children zijn van het type {@link Column } voor het maken van de kolommen.
+ *
+ * Kijk op {@link https://bulma.io/documentation/columns/sizes/} voor de bulma-uitleg.
+ * @param {ColumnProps} props
+ * @returns Columns component which can be used to create a column layout.
+ * @example
+ * <Columns>
+ *   <Column>This is a column</Column>
+ *   <Column>This is a column</Column>
+ *   <Column narrow>This is a narrow column</Column>
+ * </Columns>
+ */
+export declare function Columns({ children, gap, multiline, centered, className: classes, styles }: ColumnsProps): JSX.Element;

package/dist/components/Container/Container.d.ts

@@ -0,0 +1,78 @@
+import React, { CSSProperties } from 'react';
+declare type ContainerProps = {
+    children: React.ReactNode;
+    /** extra classes */
+    className?: string;
+    /** set styling directly on container */
+    styles?: CSSProperties;
+};
+/**
+ * Een container om content horizontaal te centreren in grote viewports.
+ * @param props
+ * @return een default container
+ *
+ * @description De width van de container is afhankelijk van de maximale viewport width:
+ * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+ * |----|----------------------|------------|------------|------------|-----------|
+ * | >> | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+ * |    | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+ * |    | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+ * |    | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+ *
+ * @example <Container>This is a container</Container>
+ */
+declare const Container: {
+    (props: ContainerProps): JSX.Element;
+    /**
+     * Een container om content horizontaal te centreren in grote viewports.
+     * @param props
+     * @returns een iets bredere container
+     *
+     * @description De width van de container is afhankelijk van de maximale viewport width:
+     * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+     * |----|----------------------|------------|------------|------------|-----------|
+     * |    | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+     * | >> | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+     * |    | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+     * |    | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+     *
+     * @example <Container.Wide>This is a somewhat wider container</Container.Wide>
+     */
+    Wide(props: ContainerProps): JSX.Element;
+    /**
+     * Een container om content horizontaal te centreren in grote viewports.
+     * @param props
+     * @returns een hele brede container
+     *
+     * @description De width van de container is afhankelijk van de maximale viewport width:
+     * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+     * |----|----------------------|------------|------------|------------|-----------|
+     * |    | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+     * |    | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+     * | >> | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+     * |    | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+     *
+     * @example <Container.Widest>This is a wide container</Container.Widest>
+     */
+    Widest(props: ContainerProps): JSX.Element;
+    /**
+     * Een container om content horizontaal te centreren in grote viewports.
+     * De width van de container is afhankelijk van de maximale viewport width.
+     * Aan de linker- en rechter-zijde wordt een margin van 32px behouden.
+     * @param props
+     * @returns een container die de gehele breedte van de viewport gebruikt.
+     *
+     * @description De width van de container is afhankelijk van de maximale viewport width:
+     * |    | Component            | tot 1023px | tot 1216px | tot 1408px | groter    |
+     * |----|----------------------|------------|------------|------------|-----------|
+     * |    | `<Container>`        | max-width  | 960px      | 1152px     | 1344px    |
+     * |    | `<Container.Wide>`   | max-width  | max-width  | 1152px     | 1344px    |
+     * |    | `<Container.Widest>` | max-width  | max-width  | max-width  | 1344px    |
+     * | >> | `<Container.Max>`    | max-width  | max-width  | max-width  | max-width |
+     *
+     * @example <Container.Max>This is an almost-fullwidth container </Container.Max>
+     */
+    Max(props: ContainerProps): JSX.Element;
+};
+export { Container };
+export type { ContainerProps };

package/dist/components/Content/Content.d.ts

@@ -0,0 +1,16 @@
+import React, { CSSProperties } from 'react';
+import { SizeProp } from '../../loon-react-bulma-types';
+declare type ContentPropsType = {
+    size?: SizeProp;
+    children: React.ReactNode;
+    className?: string;
+    styles?: CSSProperties;
+};
+/**
+ * Een Content component voor generated content. De meeste html tags kunnen hier worden gebruikt.
+ * @param props size: de tekstgrootte, children: de content van de content
+ * @returns een div geschikt voor content. WYSIWYG ofzo.
+ * @example <Content>This is a content which can contain lists, <strong>strong</strong>  and <em>italic</em> tags</Content>
+ */
+export declare function Content({ size, className, styles, children }: ContentPropsType): JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AlignmentProp } from '../../loon-react-bulma-types';
+export declare 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;
+};
+/**
+ * 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 }: FooterProps): JSX.Element;

package/dist/components/Form/File/FileInput.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { BaseInputProps } from '../shared';
 declare type FileInputProps = Omit<BaseInputProps, 'icons'> & {
     /** file types die een file-input zou moeten accepteren. Komma-gescheiden lijst van unieke file-type-specificaties (zie MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file) */
@@ -24,8 +23,6 @@ declare type FileInputProps = Omit<BaseInputProps, 'icons'> & {
     onValueChanged?(files: FileList, isValid?: boolean): any | void;
     /** formatteer de weergegeven filenaamm volgens een eigen functie */
     filenameFormatter?(val: string, files: FileList): string;
-    /** icon voor op de input */
-    icon?: string | IconProp;
 };
 /**
  * Maak een file input

package/dist/components/Form/Form.d.ts

@@ -129,10 +129,10 @@ declare const Form: {
             disabled?: boolean | undefined;
             tooltip?: string | undefined;
             children?: React.ReactNode;
-            size?: "s" | "l" | "m" | "xl" | undefined;
-            color?: "p" | "i" | "s" | "d" | "w" | "l" | undefined;
+            size?: "s" | "m" | "l" | "xl" | undefined;
+            color?: "s" | "l" | "w" | "i" | "p" | "d" | undefined;
             styling?: "rounded" | "noborder" | "colored" | "blocky" | undefined;
-            direction?: "horizontal" | "vertical" | "v" | "h" | undefined;
+            direction?: "h" | "horizontal" | "v" | "vertical" | undefined;
             textAlign?: "l" | "c" | "r" | undefined;
         }) => JSX.Element;
     };
@@ -178,7 +178,7 @@ declare const Form: {
      */
     Buttons: ({ children, size, alignment, }: {
         children: React.ReactNode;
-        size?: "s" | "l" | "m" | "xl" | undefined;
+        size?: "s" | "m" | "l" | "xl" | undefined;
         alignment?: "l" | "c" | "r" | undefined;
     }) => JSX.Element;
 };

package/dist/components/Form/shared/Base.Input.Container.d.ts

@@ -8,6 +8,6 @@ export declare const InputContainer: ({ label, children: input, error, size, dir
     } | undefined;
     children: React.ReactNode;
     error?: React.ReactNode;
-    size?: "s" | "l" | "m" | "xl" | undefined;
+    size?: "s" | "m" | "l" | "xl" | undefined;
     direction: DirectionProp;
 }) => JSX.Element;

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { SizeProp } from '../../loon-react-bulma-types';
+declare type HeroProps = {
+    children?: React.ReactNode;
+    /** 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: {
+    (props: HeroProps): JSX.Element;
+    /** 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: {
+        (props: {
+            children: React.ReactNode;
+        }): JSX.Element;
+        /** een button in de hero head
+         * @param props props
+         * @returns een button in de hero head
+         * @example <Hero.Head.Button onClick={handleClick}>Button</Hero.Head.Button>
+         */
+        Button(props: {
+            children: React.ReactNode;
+            tooltip?: string | undefined;
+            onClick?: ((e: any) => void) | undefined;
+        }): JSX.Element;
+        /** Een link in de hero head
+         * @param props props
+         * @returns een link in de hero head
+         * @example <Hero.Head.Link to="https://www.loon.be" tooltip="Loon.be">Loon.be</Hero.Head.Link>
+         */
+        Link(props: {
+            children: React.ReactNode;
+            tooltip?: string;
+            to?: string;
+            target?: '_blank' | '_self' | '_parent' | '_top';
+            rel?: 'alternat' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+        }): JSX.Element;
+    };
+    /**
+     * BOdy of the hero, which could contain a title and/or subtitle
+     * @param props props
+     * @returns hero body with content
+     * @example
+     * <Hero.Body>
+     *   <Title>Title</Title>
+     *   <Subtitle>Subtitle</Subtitle>
+     * </Hero.Body>
+     */
+    Body(props: {
+        children: React.ReactNode;
+    }): 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: {
+        (props: {
+            children: React.ReactNode;
+        }): JSX.Element;
+        /** Navigation ItemList voor In een Hero Foot. Parent should be <Hero.Foot> and children should be <Hero.Foot.NavItem>
+         * @param props props
+         * @returns Navigation Item List for Hero's
+         * @example
+         * <Hero.Foot.NavList>
+         *   <Hero.Foot.NavItem to="/">URL </Hero.Foot.NavItem>
+         *   <Hero.Foot.NavItem to="/">URL </Hero.Foot.NavItem>
+         * </Hero.Foot.NavList>
+         */
+        NavList(props: {
+            children: React.ReactNode;
+        }): JSX.Element;
+        /** 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>
+         */
+        NavItem(props: {
+            children: React.ReactNode;
+            to: string;
+            active?: boolean;
+            target?: '_blank' | '_self' | '_parent' | '_top';
+            tooltip?: string;
+            rel?: 'alternat' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag';
+        }): JSX.Element;
+    };
+};
+export { Hero };
+export type { HeroProps };

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

@@ -0,0 +1,27 @@
+/// <reference types="react" />
+declare 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;
+};
+/**
+ * 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(props: ImageProps): JSX.Element;
+export { Image };
+export type { ImageProps };

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

@@ -17,7 +17,7 @@ declare type MessageProps = {
  */
 declare const Message: {
     ({ children, title, size, color }: MessageProps & {
-        color?: "p" | "i" | "s" | "d" | "w" | "l" | undefined;
+        color?: "i" | "p" | "s" | "d" | "w" | "l" | undefined;
     }): JSX.Element;
     /** een primary-colored message
      * @param props props