loon-bulma-react 2022.3.17 → 2022.3.19

package/README.md

@@ -2,12 +2,7 @@
 
 > ## Aanpassingen
 >
-> alle inputs hebben een `textAlign`-prop<br />
-> README voor `usePagination`, `useEventListener`, `useUncontrolled`<br />
-
-<!-- ## Nog te doen
-
-> TODO: usePagination Hook -->
+> - Inputs: voor inputs waarbij je moet typen: de `icons`-prop om een eigen icoontje in te kunnen stellen.
 
 ## [Bulma](https://bulma.io/) &amp; [React](https://reactjs.org/) componenten voor Loon Salarissoftware.
 
@@ -94,10 +89,12 @@
 
 ### Voor de laatste versie:
 
-Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` hoef je niet toe te voegen, dat is de default.
+Dat kan zonder toevoeging van versienummer. Je gebruikt dan de laatste versie (dus ook laatste jaar-tag) van de componenten. De tag `latest` moet je dan wel even toevoegen. Als je deze tag niet toevoegd, installeert npm de in de `package.json` opgegeven versie.
 
 ```bash
-npm install --save bulma loon-bulma-react
+# installeer de meest recente versie van de package. (& update de package.json)
+npm install --save bulma loon-bulma-react@latest
+# installeer de versie die in package.json is gedefinieerd
 ```
 
 ### Voor een versie die hoort bij een bepaald jaar (Bijvoorbeeld in Loon-2021).
@@ -105,17 +102,18 @@ npm install --save bulma loon-bulma-react
 Het jaar wordt bepaald door tags: voor elk jaar is er een tag van de vorm `y[jaar]`. De 'y' is nodig omdat alleen een jaartal geen geldige tag is.
 
 ```bash
-npm install --save loon-bulma-react@y2021
+npm install --save loon-bulma-react@y2022
 ```
 
 Om vast te leggen welke tag je wil gebruiken, moet je in de `package.json` het versie-nummer aanpassen tot de tag.
-Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de laatste versie.
+Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de laatste versie die is gepubliceerd.
+Voor het meeste recente Loon-jaar kan je _wel_ `npm install loon-bulma-react@latest` gebruiken.
 
 ```json
 {
   "devDependencies": {
     // ...
-    "loon-bulma-react": "y2022"
+    "loon-bulma-react": "y2023"
     // ...
   }
 }
@@ -128,7 +126,8 @@ Dan wordt altijd de laatste versie van die tag geïnstalleerd, in plaats van de
 >
 > - `@y2020` --> Testversie voor **2020**, installeren met `npm install loon-bulma-react@y2021`.
 > - `@y2021` --> Versie voor **2021**, installeren met `npm install loon-bulma-react@y2021`.
-> - `@y2022` --> Versie voor **2022**, installeren met `npm install loon-bulma-react@y2022`. Zelfde als `latest`
+> - `@y2022` --> Versie voor **2022**, installeren met `npm install loon-bulma-react@y2022`.
+> - `@y2023` --> Versie voor **2023**, installeren met `npm install loon-bulma-react@y2023`. Zelfde als `latest`
 > - `@latest` --> Default versie die geïnstalleerd wordt met `npm install loon-bulma-react`
 
 ## Gebruik <a id="gebruik"></a>
@@ -478,9 +477,8 @@ Een ScrollArea is een horizontaal of verticaal scrollbare `<div>` met flexbox-ei
 
 #### Button & ButtonGroup <a id="component-button"></a>
 
-Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 6 beschikbaar: _Primary_, _Danger_, _Warning_, _Success_, _Link_, _Info_
+Gebruikt de [Bulma-button](https://bulma.io/documentation/elements/button/) Er zijn meerdere soorten button-types. Van elke soort zijn er 6 beschikbaar: _Primary_, _Danger_, _Warning_, _Success_, _Link_, _Info_.
 
-- _**Bttn**: een default button (met instelbare `color`-props) -> bestaat niett meer_
 - **Button**: Voorheen `Bttn`
   - `<Button.Primary>` Een button in de primary kleur
   - `<Button.Success>` Een button in de success kleur
@@ -1365,6 +1363,7 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 - `placeholder`: placeholder-tekst voor een input.
 - `tooltip`: tooltip voor een input (`<input title="..." />`)
 - `disabled`: input disabled
+
 - `errorMessage`: een errormessage van buiten de component. Voor als je validatie anders wilt oplossen. Wordt altijd getoont
 - `validatie`: een object met wat standaard-validatie-opties en een onValidate-function input. Een validatie-error wordt alleen getoont als de input 'touched' is.
   - `required`: input is verplicht
@@ -1385,6 +1384,17 @@ Er zijn verschillende soorten inputs voor de afhandeling van input-types. Er zij
 - `size`: de grootte van een input
 - `textAlign`: waar komt de tekst in de input (default = 'l', left)
 
+Voor een aantal inputs (waar je moet typen) Is er ook nog de `icons`-prop. Deze prop ziet er zo uit:
+
+```ts
+type Icons = {
+  start: IconProp | string;
+  end: (valid: boolean) => IconProp | string;
+};
+```
+
+Deze `icons`-prop kan gebruikt worden voor het instellen van de icoontjes aan het begin(start) en einde (end) van de input. De `start`-property wordt gebruikt ipv de default start-icons. De `end`-property wordt dan gebruikt in plaats van de default valid/invalid icons. Daarom is de `end`-property ook een function.
+
 ```tsx
 <div>
   <BasicInput name="something" type="text">

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/Calendar/CalendarItems/CalendarColoredItem.d.ts

@@ -1,11 +1,6 @@
 import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
-/**
- * Component voor een event dat de hele dag duurt
- * @param props
- * @returns
- */
-export declare function CalendarColoredItem<T extends BaseEventProps>(props: {
+declare type CalendarColoredItemProps<T extends BaseEventProps> = {
     /** het event */
     desc: (event: T) => JSX.Element;
     event: T;
@@ -13,4 +8,11 @@ export declare function CalendarColoredItem<T extends BaseEventProps>(props: {
     options?: EventOptions<T>;
     /** onclick handler voor het event */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-}): JSX.Element;
+};
+/**
+ * Component voor een event dat de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function CalendarColoredItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarColoredItemProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/CalendarItems/CalendarItem.d.ts

@@ -1,11 +1,6 @@
 import { MouseEvent } from 'react';
 import { EventOptions, BaseEventProps } from '../Props';
-/**
- * Component voor een event met een tijdstip en NIET de hele dag duurt
- * @param props
- * @returns
- */
-export declare function CalendarItem<T extends BaseEventProps>(props: {
+declare type CalendarItemProps<T extends BaseEventProps> = {
     desc: (event: T) => JSX.Element;
     /** het event */
     event: T;
@@ -13,4 +8,11 @@ export declare function CalendarItem<T extends BaseEventProps>(props: {
     options?: EventOptions<T>;
     /** onclick handler */
     onClick?: (event: T, clickEvent: MouseEvent<HTMLElement>) => void;
-}): JSX.Element;
+};
+/**
+ * Component voor een event met een tijdstip en NIET de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function CalendarItem<T extends BaseEventProps>({ event, options, onClick, desc, }: CalendarItemProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Month/DayContainer.d.ts

@@ -1,12 +1,7 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
 import { JSDateTime } from '../../../utils/JSDateTime.class';
-/**
- * Component voor de dag-container in de maand-view
- * @param props
- * @returns
- */
-export declare function DayContainer<T extends BaseEventProps>(props: {
+declare type DayContainerProps<T extends BaseEventProps> = {
     /** events op deze dag */
     events: T[];
     /** wat te doen als een event aangeklikt wordt */
@@ -17,4 +12,11 @@ export declare function DayContainer<T extends BaseEventProps>(props: {
     options?: CalendarOptions<T>;
     /** de datum voor de container */
     date: JSDateTime;
-}): JSX.Element;
+};
+/**
+ * Component voor de dag-container in de maand-view
+ * @param props
+ * @returns
+ */
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, }: DayContainerProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Month/MonthView.d.ts

@@ -18,6 +18,6 @@ declare type MonthViewProps<T extends BaseEventProps> = {
  * @param props
  * @returns
  */
-declare function MonthView<T extends BaseEventProps>(props: MonthViewProps<T>): JSX.Element;
+declare function MonthView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents, }: MonthViewProps<T>): JSX.Element;
 export { MonthView };
 export type { MonthViewProps };

package/dist/components/Calendar/Month/MoreEvents.d.ts

@@ -1,11 +1,6 @@
 import { MouseEvent } from 'react';
 import { BaseEventProps, EventOptions } from '../Props';
-/**
- * expandable events als er meer dan 5 events op een dag vallen
- * @param props
- * @returns
- */
-export declare function MoreEventsView<T extends BaseEventProps>(props: {
+declare type MoreEventsViewProps<T extends BaseEventProps> = {
     /** de events op deze dag */
     events: T[];
     /** event-click handling */
@@ -15,4 +10,11 @@ export declare function MoreEventsView<T extends BaseEventProps>(props: {
         allday?: EventOptions<T>;
         timed?: EventOptions<T>;
     };
-}): JSX.Element;
+};
+/**
+ * expandable events als er meer dan 5 events op een dag vallen
+ * @param props
+ * @returns
+ */
+export declare function MoreEventsView<T extends BaseEventProps>({ events, onEventClick, options, }: MoreEventsViewProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Week/AlldayContainer.d.ts

@@ -1,14 +1,16 @@
 import React from 'react';
 import { BaseEventProps, CalendarOptions } from '../Props';
-/**
- * Component voor allday objects in de calendar
- * @param props
- * @returns
- */
-export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick, }: {
+declare type AlldayContainerProps<T extends BaseEventProps> = {
     events: T[];
     /** wat te doen als een event aangeklikt wordt */
     onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
     /** wat te doen als een dag aangeklikt wordt */
     options?: CalendarOptions<T>;
-}): JSX.Element;
+};
+/**
+ * Component voor allday objects in de calendar
+ * @param props
+ * @returns
+ */
+export declare function AlldayContainer<T extends BaseEventProps>({ options, events, onEventClick }: AlldayContainerProps<T>): JSX.Element;
+export {};

package/dist/components/Calendar/Week/HourRow.d.ts

@@ -8,13 +8,18 @@ import { BaseEventProps, CalendarOptions } from '../Props';
 export declare function HourNumber({ hour }: {
     hour: number;
 }): JSX.Element;
+declare type HourSlotProps<T extends BaseEventProps> = {
+    /** de events voor deze HourProp */
+    events: T[];
+    /** event-selected callback Fn */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** options bij de calendar */
+    options?: CalendarOptions<T>;
+};
 /**
  * Component voor een uur-slot.
  * @param param0
  * @returns
  */
-export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options, }: {
-    events: T[];
-    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
-    options?: CalendarOptions<T>;
-}): JSX.Element;
+export declare function HourSlot<T extends BaseEventProps>({ events, onEventClick, options }: HourSlotProps<T>): JSX.Element;
+export {};

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { CheckradioStylingType, ColorProp } from '../../../loon-react-bulma-types';
-import { BaseInputProps } from '../BaseInputProps';
-declare type CheckboxInputProps = BaseInputProps & {
+import { BaseInputProps } from '../shared';
+declare type CheckboxInputProps = Omit<BaseInputProps, 'icons'> & {
     /** kleur van de checkbox (default = 'l', link) */
     color?: ColorProp;
     /** speciale styling van de checkbox */

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type DateInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) FORMAT: YYYY-MM-DD */
     value?: string | Date;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type DateTimeInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) FORMAT: YYYY-MM-DDTHH:mm */
     value?: string | Date;

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

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseInputProps } from '../BaseInputProps';
+import { BaseInputProps } from '../shared';
 declare type TimeInputProps = BaseInputProps & {
     /** start value voor deze input (optioneel) FORMAT: HH:mm:SS */
     value?: string | Date;