loon-bulma-react 2022.3.18 → 2022.3.20

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/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/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,72 @@
+import React from 'react';
+import { AlignmentProp } from '../../..';
+/**
+ * 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: {
+        /** 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;
+    }) => 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: {
+        /** 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;
+    }) => JSX.Element;
+};
+export { ScrollArea };

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

@@ -0,0 +1,15 @@
+import React, { CSSProperties } from 'react';
+declare type SectionPropsType = {
+    children: React.ReactNode;
+    className?: string;
+    styles?: CSSProperties;
+};
+/**
+ * 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: classes, styles }: SectionPropsType): JSX.Element;
+export {};

package/dist/components/index.d.ts

@@ -0,0 +1,57 @@
+export { AspectRatio } from './AspectRatio/AspectRatio';
+export type { AspectRatioProps } from './AspectRatio/AspectRatio';
+export { Box } from './Box/Box';
+export type { BoxProps } from './Box/Box';
+export { Columns } from './Columns/Columns';
+export type { ColumnProps, ExpandedColumnProps } from './Columns/Column';
+export { Column } from './Columns/Column';
+export { Container } from './Container/Container';
+export { Content } from './Content/Content';
+export { Footer } from './Footer/Footer';
+export { Hero } from './Hero/Hero';
+export type { HeroProps } from './Hero/Hero';
+export { Image } from './Image/Image';
+export type { ImageProps } from './Image/Image';
+export { Section } from './Section/Section';
+export { ScrollArea } from './ScrollArea/ScrollArea';
+export { DataTable } from './DataTable/DataTable';
+export type { DataTableColumn, DataTableProps } from './DataTable/DataTableProps';
+export { Icon, IconText } from './Icon/Icon';
+export type { IconProps, IconTextProps } from './Icon/Icon';
+export { Indicator } from './Indicator/Indicator';
+export type { IndicatorProps } from './Indicator/Indicator';
+export { Kbd, Kbds } from './Kbd/Kbd';
+export { Menu } from './Menu/Menu';
+export type { MenuProps, MenuItemProps, MenuItemGroupProps } from './Menu/Menu';
+export { Message } from './Message/Message';
+export type { MessageProps } from './Message/Message';
+export { Modal } from './Modal/Modal';
+export type { ModalProps } from './Modal/Modal';
+export { Notification } from './Notification/Notification';
+export type { NotificationProps } from './Notification/Notification';
+export { ProgressBar } from './ProgressBar/ProgressBar';
+export type { ProgressBarProps } from './ProgressBar/ProgressBar';
+export { SimpleTable } from './SimpleTable/SimpleTable';
+export type { SimpleTableProps, SimpleTableColProps } from './SimpleTable/SimpleTable';
+export { Steps } from './Steps/Steps';
+export type { StepsProps, StepItemProps } from './Steps/Steps';
+export { TabBar } from './TabBar/TabBar';
+export type { TabBarProps, TabBarItemProps } from './TabBar/TabBar';
+export { Tag, Tags } from './Tag/Tag';
+export type { TagProps, TagsProps } from './Tag/Tag';
+export { TimeLine } from './TimeLine/TimeLine';
+export type { TimeLineProps, TimeLineItemProps, TimeLinePointProps } from './TimeLine/TimeLine';
+export { Title, Subtitle, TitleWithSubtitle } from './Titles/Titles';
+export type { TitleProps, TitleWithSubtitleProps } from './Titles/Titles';
+export { ToggleBar } from './ToggleBar/ToggleBar';
+export type { ToggleBarProps, ToggleItemProps, OnOffToggleItemProps } from './ToggleBar/ToggleBar';
+export { ButtonGroup } from './ButtonGroup/ButtonGroup';
+export type { ButtonGroupProps } from './ButtonGroup/ButtonGroup';
+export type { ButtonProps } from './Button/ButtonProps';
+export { Button } from './Button/Button';
+export { Link, LinkButton } from './Link/Link';
+export type { LinkProps, LinkButtonProps } from './Link/Link';
+export { Calendar } from './Calendar';
+export type { BaseEventProps, CalendarOptions } from './Calendar/Props';
+export type { MonthViewProps } from './Calendar';
+export type { WeekViewProps } from './Calendar';

package/dist/contexts/Confirm/Confirm.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+declare type ActionType = {
+    type: 'SHOW' | 'HIDE';
+    payload: {
+        content: string | React.ReactNode;
+    };
+};
+declare type State = {
+    show: boolean;
+    content: string | React.ReactNode;
+};
+export declare const initialState: State;
+export declare function confirmReducer(state: State | undefined, action: ActionType): State;
+export declare function useConfirm(): {
+    confirm: (text: string) => Promise<unknown>;
+    onConfirm: () => void;
+    onCancel: () => void;
+    confirmState: any;
+};
+export {};