loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/internal_functions/createIconsInternal.d.ts

@@ -13,6 +13,7 @@ type ParamType<T extends InputValueType = InputValueType> = {
     infoData?: React.ReactNode | (() => void) | undefined;
     inputId?: string | undefined;
     helpTag?: string | undefined;
+    type?: 'input' | 'select' | 'textarea' | 'checkbox' | 'radiobutton';
     /**
      * `hidden`: geen icon rechts
      * `visible`: standaard gedrag, een check of een error icoon, of een info icoon als showInfo/infoData is meegegeven
@@ -31,6 +32,6 @@ type ParamType<T extends InputValueType = InputValueType> = {
 /** functie voor inputs om de juiste icons te maken
  * INTERN GEBRUIK!
  */
-export declare function createInputIcons_INTERNAL<T extends InputValueType = InputValueType>({ icon, error, showInfo, infoData, inputId, helpTag, focused, hovered, disabled, loading, value, iconRight, }: ParamType<T>): [containerClass: string, iconLeft: React.ReactNode | undefined, iconRight: React.ReactNode | undefined];
+export declare function createInputIcons_INTERNAL<T extends InputValueType = InputValueType>({ icon, error, showInfo, infoData, inputId, helpTag, focused, hovered, disabled, loading, value, iconRight, type, }: ParamType<T>): [containerClass: string, iconLeft: React.ReactNode | undefined, iconRight: React.ReactNode | undefined];
 export declare function createShowInfo_INTERNAL(infoData?: React.ReactNode | ((helpTag?: string) => void) | undefined, restoreFocus?: Function | undefined, helpTag?: string | undefined): React.ReactNode;
 export {};

package/dist/lib/classes/Console.d.ts

@@ -0,0 +1,29 @@
+type ConsoleLevel = 'error' | 'warn' | 'log' | 'info' | (string & {});
+/** log in console */
+export declare class Console {
+    static enabled: boolean;
+    /** console-log error - Alleen in Debug Modus!  */
+    static Error(message?: any, ...optionalParams: any[]): void;
+    /** console-log warning  - Alleen in Debug Modus! */
+    static Warn(message?: any, ...optionalParams: any[]): void;
+    /** console-log something  - Alleen in Debug Modus! */
+    static Log(message?: any, ...optionalParams: any[]): void;
+    /** console-log info - Alleen in Debug Modus!  */
+    static Info(message?: any, ...optionalParams: any[]): void;
+    /**
+     * console-log items in een group - Alleen in Debug Modus!
+     * @param groupTitle TItle van de group, deze is altijd zichtbaar in de console
+     * @param groupItems de items van de group: als key-value pair zichtbaar als expanded
+     * @param collapsed Wordt de groep collapsed of expanded getoond? default = true, collapsed
+     */
+    static Group(groupTitle: string, itemSet: Map<string, any> | Array<[string, any]> | object, collapsed?: boolean): void;
+    /**
+     * Schrijf een log naar de console en return de value die ook naar de console is geschreven
+     * @param message de message die naar de console wordt geschreven
+     * @param value de value die naar de console wordt geschreven EN wordt gereturned
+     * @param level wat voor tyhpe console-log moet er worden gemaakt? default = 'log'
+     * @returns de value
+     */
+    static LogAndReturn<T extends unknown>(message: string, value: T, level?: ConsoleLevel | undefined): T;
+}
+export {};

package/dist/lib/classes/FetchWrapper.d.ts

@@ -0,0 +1,124 @@
+import { PrettierType, StrictOmit } from "../types";
+type BaseFetchOptions<T extends unknown = {}, B extends {
+    token: string;
+} = {
+    token: string;
+}> = PrettierType<RequestInit> & {
+    /** loggen we de request in de console? */
+    log: boolean;
+    /**
+     * reviver voor het resultaat. Default = `true`.
+     * - `true` -> zorgt ervoor dat types in het result naar het goede type worden omgezet
+     * - `false` -> doet niets
+     *
+     * __TRUE__ heeft op dit moment invloed op:
+     * - `Date`-strings worden omgezet naar `Date`-objecten.
+     */
+    revive: boolean;
+    /** _(optionele)_ functie om een handeling uit te voeren __NA het parsen & reviven VAN__  json */
+    serializer: ((v: B) => string);
+    /** _(optionele)_ functie om een handeling uit te voeren __OM te parsen NAAR__ json. Default =`JSON.stringify` */
+    deserializer: ((v: T) => T);
+};
+type FetchOptions<T extends unknown = {}> = StrictOmit<BaseFetchOptions<T>, 'method'>;
+type GETOptions<T extends unknown = {}> = StrictOmit<FetchOptions<T>, 'serializer'>;
+type DELOptions<T extends unknown = {}> = StrictOmit<FetchOptions<T>, 'serializer'>;
+type POSTOptions<T extends unknown = {}> = FetchOptions<T>;
+type PUTOptions<T extends unknown = {}> = FetchOptions<T>;
+export declare abstract class FetchWrapper {
+    /** constructor - private zodate je hem __NIET__ gaat gebruiken */
+    private constructor();
+    /** haal de default options op en overschrijf die (zo nodig) met de fetch-specifieke opties voor een request */
+    private static _getOptions;
+    /**
+      * Doe een GET request
+      * @param url url waar de request heen moet
+      * @param options Opties zoals ook in  _`RequestInit`_ beschreven EN onze zelf toegevoegde (optionele) opties
+      * @returns Het resultaat of een error
+      */
+    static get<T extends unknown = {}>({ url, options, params }: {
+        url: string;
+        options?: Partial<GETOptions<T>> | undefined | null;
+        params?: URLSearchParams | Map<string, string | number | boolean> | object | string | undefined;
+    }): Promise<T>;
+    /**
+      * Doe een POST request
+      * @param url url waar de request heen moet
+      * @param body de body van de request. Als het een object is, moet het een `token`-property bevatten
+      * @param options Opties zoals ook in  _`RequestInit`_ beschreven EN onze zelf toegevoegde (optionele) opties
+      * @returns Het resultaat of een error
+      */
+    static post<B extends ({
+        token: string;
+    } | string) = {
+        token: string;
+    }, T extends unknown = {}>({ url, body, options }: {
+        url: string;
+        body: B | string;
+        options?: Partial<POSTOptions<T>> | undefined | null;
+    }): Promise<T>;
+    /**
+     * Doe een PUT request
+     * @param url url waar de request heen moet
+     * @param body de body van de request. Als het een object is, moet het een `token`-property bevatten
+     * @param options Opties zoals ook in  _`RequestInit`_ beschreven EN onze zelf toegevoegde (optionele) opties
+     * @returns Het resultaat of een error
+     */
+    static put<B extends ({
+        token: string;
+    } | string) = {
+        token: string;
+    }, T extends unknown = {}>({ url, body, options }: {
+        url: string;
+        body: B | string;
+        options?: Partial<PUTOptions<T>> | undefined | null;
+    }): Promise<T>;
+    /**
+     * Doe een DELETE request
+     * @param url url waar de request heen moet
+     * @param options Opties zoals ook in  _`RequestInit`_ beschreven EN onze zelf toegevoegde (optionele) opties
+     * @returns Het resultaat of een error
+     */
+    static del<T extends unknown = {}>({ url, params, options }: {
+        url: string;
+        params?: URLSearchParams | Map<string, string | number | boolean> | object | string | undefined;
+        options?: Partial<DELOptions<T>> | undefined | null;
+    }): Promise<T>;
+    /**
+     * Afhandeling van de logging van een fetch-request
+     * - logt de status van de request
+     * - logt de body van de request (indien aanwezig)
+     * - logt de opties van de request
+     * - logt het resultaat van de request (indien aanwezig)
+     * - logt de error van de request (indien aanwezig)
+     *
+     * @param obj bevat een object met alle opties en resultaten van de fetch-request
+     * @returns
+     */
+    private static handleLog;
+    /**
+     * Stel een URL met parameters samen op basis van de opgegeven URL en (optionele) parameters voor deze URL.
+     * @param url de url waar de request heen gaat
+     * @param params de (optionele) params voor deze url
+     * @returns Een Url met URLParams
+     */
+    private static createUrlWithParams;
+    /**
+     * Afhandeling van de response van een fetch-request
+     * @param response de response van de fetch-request
+     * @param log moet er gelogged worden
+     * @param revive
+     * @param deserializer
+     * @returns
+     */
+    private static handleResponse;
+    /**
+     * handel het deserializeren van json of text af
+     * @param response de response van de fetch-request
+     * @param revive moeten waardes 'revived' worden ?
+     * @param deserializer functie die wordt aangeroepen NA deserialisatie en NA reviving
+     * @returns
+     */
+    private static handleDeserialize;
+}
+export {};

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

@@ -0,0 +1,28 @@
+import React from 'react';
+/** Props voor een aspect-ratio */
+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({ ratio, children, caption, className }: AspectRatioProps): import("react/jsx-runtime").JSX.Element;
+export { AspectRatio };
+export type { AspectRatioProps };

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

@@ -0,0 +1,9 @@
+import React from 'react';
+/** Basis block component met een standaard margin & padding (bulma) */
+declare function Block({ id, children, className: cn, styles }: {
+    id?: string;
+    children: React.ReactNode;
+    className?: string;
+    styles?: React.CSSProperties;
+}): import("react/jsx-runtime").JSX.Element;
+export { Block };

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ColorProp, AlignmentProp, StrictOmit } from './../../types';
+type BorderBoxProps = {
+    children: React.ReactNode;
+    title?: string | undefined;
+    style?: React.CSSProperties | undefined;
+    itemRef?: React.RefObject<HTMLDivElement> | undefined | null;
+    className?: string | undefined;
+    color?: ColorProp | 'default' | undefined;
+    alignment?: AlignmentProp | undefined;
+};
+/**
+ * Een Box met een border en een (optionele) title. De border heeft een optionele kleur. Default is dat 'dark'
+ * @example <BorderBox title="Title">Content</BorderBox>
+ * @example <BorderBox title="Title" color="p">Content</BorderBox>
+ * @example <BorderBox.Primary title="Title" alignment="c">Content</BorderBox.Primary>
+ */
+declare const BorderBox: {
+    ({ children, title, style, itemRef, className: cn, color: colorProp, alignment }: BorderBoxProps): import("react/jsx-runtime").JSX.Element;
+    Primary(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Link(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Info(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Warning(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Danger(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Success(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Light(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+    Dark(props: StrictOmit<BorderBoxProps, "color">): import("react/jsx-runtime").JSX.Element;
+};
+export { BorderBox };

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

@@ -0,0 +1,20 @@
+import React from 'react';
+type BoxProps = {
+    id?: string;
+    /** 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?: React.CSSProperties;
+    itemRef?: React.RefObject<any> | null;
+};
+/**
+ * Maak een witte box om andere elementen heen. Voor forms of modals. Heeft een beetje schaduw.
+ * @see {@link https://bulma.io/documentation/elements/box/}
+ * @returns een witte box om elementen.
+ * @example <Box>This is a box</Box>
+ */
+declare function Box({ id, children, className: cn, styles, itemRef }: BoxProps): import("react/jsx-runtime").JSX.Element;
+export { Box };
+export type { BoxProps };

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

@@ -0,0 +1,87 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ColorProp, StrictOmit, SizeProp } from './../../types';
+type ButtonStyles = 'faded' | 'f' | 'inverted' | 'i' | 'static' | 's' | 'default' | 'd' | 'outlined' | 'o';
+export type ButtonProps = {
+    /** Is de button loading ? */
+    loading?: boolean;
+    /** Is de button de gehele breedte van de container? */
+    fullwidth?: boolean;
+    /** Wat moet er op de button komen (text, icons etc.) */
+    children?: React.ReactNode;
+    /** Styling voor de button   */
+    styling?: ButtonStyles;
+    /** is dit een static button? */
+    isStatic?: boolean;
+    /** De grootte van de button */
+    size?: SizeProp;
+    /** helpTag voor gebruik met Loon, om de juiste help-teksten weer te kunnen geven. Gebruikt met `onFocus()` */
+    helpTag?: string;
+    /** value voor gebruik in bijvoorbeeld een form */
+    value?: string;
+    /** De kleur van de button */
+    color?: ColorProp | 'none';
+    /** Function voor onFocus event
+      @param e het event
+      @param ht de helpTag voor de button (optioneel)
+    */
+    onFocus?: (e: React.FocusEvent<HTMLButtonElement>, ht?: string) => void;
+} & React.ButtonHTMLAttributes<HTMLButtonElement>;
+/**
+ * Button is helemaal instelbaar. Maak de button. Alle button instellingen worden hier verwerkt.
+ * @param props
+ * @returns een default button
+ * @example <Button>Button</Button>
+ * @description Alle mogelijke props voor de Button-component
+ * | Prop     | Value                   | Default  | Description                             |
+ * |----------|-------------------------|----------|-----------------------------------------|
+ * | children |                         |          | De content van de button (icon, text)   |
+ * | color    | `p`, `l`, `i`, `w`, `d`,|   `p`    | Kleuren voor de button                  |
+ * |          | `s`, `is-${string}`     |          |                                         |
+ * | styling  | `l` , light             |          | Light style voor de button              |
+ * |          | `o` , outlined          |          | Outlined style voor de button           |
+ * |          | `i` , inverted          |          | Inverted style voor de button           |
+ * |          | `lo`, light-outlined    |          | Light & outlined style voor de button   |
+ * |          | `s` , static            |          | static style voor de button (grey)      |
+ * | size     | `s, m, l, xl`           |          | sizes voor de button                    |
+ * | rounded  | `true, false`           | `false`  | Afgeronde hoeken voor de button         |
+ * | fullwidth| `true, false`           | `false`  | Button de gehele breedte van de container |
+ * | loading  | `true, false`           | `false`  | heeft button de loading state           |
+ * | disabled | `true, false`           | `false`  | is de button disabled                   |
+ * | title    | string                  |          | tooltip voor de button                  |
+ * | id       | string                  |          | id voor de button                       |
+ * | onClick  | function                |          | onClick voor de button                  |
+ * | onFocus  | function                |          | onFocus voor de button                  |
+ * | name     | string                  |          | name voor de button                     |
+ * | value    | string                  |          | value voor de button                    |
+ * | form     | string                  |          | form waar de button bij hoort           |
+ * | formAction | string                |          | formAction voor de button               |
+ * | helpTag  | string                  |          | helpTag voor de button                  |
+ * | tooltip  | string                  |          | tooltip voor de button (deprecated, gebruik `title`)                  |
+ * | type     | `button, reset, submit` | `button` | type 'button' voor de button            |
+ */
+declare const Button: {
+    ({ color: colorProp, size: sizeProp, loading, disabled, fullwidth, styling, type, className: classNameProp, isStatic, helpTag, onClick, onFocus, onMouseEnter, children: nodes, value, ...props }: ButtonProps): import("react/jsx-runtime").JSX.Element;
+    OK({ text, icon, color, ...props }: Partial<DefinedButtonProps>): import("react/jsx-runtime").JSX.Element;
+    Cancel({ text, icon, color, ...props }: Partial<DefinedButtonProps>): import("react/jsx-runtime").JSX.Element;
+    Close({ text, icon, color, ...props }: Partial<DefinedButtonProps>): import("react/jsx-runtime").JSX.Element;
+    Delete({ text, icon, color, ...props }: Partial<DefinedButtonProps>): import("react/jsx-runtime").JSX.Element;
+    Static(props: StrictOmit<ButtonProps, "color" | "isStatic" | "onClick" | "onFocus" | "disabled" | "loading">): import("react/jsx-runtime").JSX.Element;
+    Primary(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Success(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Danger(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Warning(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Info(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Link(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Light(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Dark(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    None(props: StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+    Theme({ invert, ...props }: {
+        invert?: boolean;
+    } & StrictOmit<ButtonProps, "color" | "isStatic">): import("react/jsx-runtime").JSX.Element;
+};
+type DefinedButtonProps = StrictOmit<ButtonProps, 'children' | 'isStatic'> & {
+    icon: IconProp;
+    text: string;
+};
+export { Button };

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { AlignmentProp } from './../../types';
+type ButtonGroupProps = {
+    /** Een buttongroup kan alleen Buttons als children hebben! */
+    children?: React.ReactNode;
+    /** Moeten de buttons aan elkaar vast gezet worden (default = false) */
+    hasAddons?: boolean;
+    /** Aan welke kant moeten de buttons aligned worden (default = l) */
+    alignment?: AlignmentProp | undefined;
+    /** Voeg  extra classes aan de buttons-container toe */
+    className?: string;
+    /** Moeten de buttons even groot zijn (default = false) */
+    unevenSize?: boolean;
+};
+/**
+ * Button-group component. Groupeert een zooitje buttons.
+ * @param children: De buttons. Mogen alleen maar buttons zijn!
+ * @param sameSize: Moeten de buttons even groot zijn (default = false)
+ * @param hasAddons: Moeten de buttons aan elkaar vast gezet worden (default = false). Werkt alleen voor `uneven`
+ * @param alignment: Aan welke kant moeten de buttons aligned worden (default = l)
+ * @param className: Voeg  extra classes aan de buttons-container toe
+ * @returns
+ */
+declare function Buttons({ unevenSize, alignment, ...props }: ButtonGroupProps): import("react/jsx-runtime").JSX.Element;
+export { Buttons, Buttons as ButtonGroup };
+export type { ButtonGroupProps };

package/dist/lib/components/Calendar/CalendarItems/CalendarColoredItem.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseEventProps, EventOptions } from '../Props';
+type CalendarColoredItemProps<T extends BaseEventProps> = {
+    /** Het event */
+    desc: (event: T, isHovered?: boolean) => React.JSX.Element;
+    event: T;
+    /** Opties voor events */
+    options?: EventOptions<T>;
+    /** Onclick handler voor het event */
+    onClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+};
+/**
+ * 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>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseEventProps, EventOptions } from '../Props';
+type CalendarItemProps<T extends BaseEventProps> = {
+    desc: (event: T, isHovered?: boolean) => React.JSX.Element;
+    /** Het event */
+    event: T;
+    /** Opties voor events */
+    options?: EventOptions<T>;
+    /** Onclick handler */
+    onClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+};
+/**
+ * Component voor een event met een tijdstip en NIET de hele dag duurt
+ * @param props
+ * @returns
+ */
+export declare function CalendarItem<T extends BaseEventProps>({ event, onClick, desc }: CalendarItemProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import { JSDateTime } from './../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions, CalendarType } from './Props';
+type DayContainerProps<T extends BaseEventProps> = {
+    /** Events op deze dag */
+    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 */
+    onDayClick?: (date: JSDateTime, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** Opties voor deze container */
+    options?: CalendarOptions<T>;
+    /** De datum voor de container */
+    date: JSDateTime;
+    /** Behoort deze dag tot de huidige maand ? */
+    isCurrentMonth?: boolean;
+    calendarType: CalendarType;
+};
+/**
+ * Component voor de dag-container in de maand-view
+ * @param props
+ * @returns
+ */
+export declare function DayContainer<T extends BaseEventProps>({ options, date, onDayClick, onEventClick, events, calendarType, isCurrentMonth, }: DayContainerProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Calendar/EventDescriptions.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { BaseEventProps, CalendarType, EventOptions } from './Props';
+type MoreEventsViewProps<T extends BaseEventProps> = {
+    calendarType: CalendarType;
+    /** De events op deze dag */
+    events: T[];
+    /** Event-click handling */
+    onEventClick?: (event: T, clickEvent: React.MouseEvent<HTMLElement>) => void;
+    /** Global event options */
+    options?: {
+        allday?: EventOptions<T>;
+        timed?: EventOptions<T>;
+    };
+};
+export declare function AllDayDesc<T extends BaseEventProps>({ evt, calendarType, }: {
+    evt: T;
+    calendarType: CalendarType;
+    isHovered?: boolean;
+    options?: EventOptions<T>;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function NotAllDayDesc<T extends BaseEventProps>({ evt, options, calendarType, isHovered, }: {
+    evt: T;
+    calendarType: CalendarType;
+    options?: EventOptions<T>;
+    isHovered?: boolean;
+}): import("react/jsx-runtime").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, calendarType }: MoreEventsViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/components/Calendar/Fourweeks/FourweeksView.d.ts

@@ -0,0 +1,23 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+type FourweekViewProps<T extends BaseEventProps> = {
+    /** Events voor deze view */
+    events: T[];
+    /** Opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** Event aangeklikt */
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React.MouseEvent<HTMLElement>) => void;
+    /** Huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * Maak een vierweken-view (grid) met events
+ * @param props
+ * @returns
+ */
+declare function FourweeksView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents }: FourweekViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export { FourweeksView };
+export type { FourweekViewProps };

package/dist/lib/components/Calendar/Mini/MiniView.d.ts

@@ -0,0 +1,24 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import { Locale } from 'date-fns';
+type MiniViewProps = {
+    /** de viewDate waarop de mini-view start (optioneel, default = vandaag) */
+    viewDate?: JSDateTime | Date;
+    /** opties voor de weergave van de view */
+    options?: MiniViewOptions;
+    /** callback voor een geselecteerde datum (JS Date) */
+    onDateSelected?: (date: Date) => void;
+    /** callback voor een geselecteerde datum (JSDateTime gebruik) */
+    onJSDateTimeSelected?: (date: JSDateTime) => void;
+};
+type MiniViewOptions = {
+    /** formatString voor weergeven van datum-numbers (0-31). Default 'd' (1, 2, 12, 13,...) */
+    dayFormat?: string;
+    /** formatString voor weergeven van week-dagen (ma, di, wo, etc). Default 'E' (maa, din, woe, don,...) */
+    weekDayFormat?: string;
+    /** formatString voor weergeven van maand (januari 2022, februari 2022, etc). Default 'MMMM yyyy' */
+    monthFormat?: string;
+    dateFormat?: string;
+    locale?: Locale;
+};
+export declare function MiniView({ viewDate: vd, options: opts, onDateSelected, onJSDateTimeSelected }: MiniViewProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+type MonthViewProps<T extends BaseEventProps> = {
+    /** Events voor deze view */
+    events: T[];
+    /** Opties voor deze view */
+    options?: CalendarOptions<T>;
+    /** Event aangeklikt */
+    onEventClick?: (e: T, event: React.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, event: React.MouseEvent<HTMLElement>) => void;
+    /** Huidige geselecteerde datum */
+    viewDate: Date | JSDateTime;
+};
+/**
+ * Maak een maand-view (grid) met events
+ * @param props
+ * @returns
+ */
+declare function MonthView<T extends BaseEventProps>({ viewDate: vd, options, onEventClick, onDayClick, events: orgEvents }: MonthViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export { MonthView };
+export type { MonthViewProps };

package/dist/lib/components/Calendar/Planning/PlanningView.d.ts

@@ -0,0 +1,41 @@
+import { JSDateTime } from './../../../utils/JSDateTime.class';
+import React from 'react';
+import { BaseEventProps, CalendarOptions } from '../Props';
+type PlanningViewProps<R, E extends BaseEventProps = BaseEventProps> = {
+    /** Datum van de view */
+    viewDate: JSDateTime | Date;
+    /** Aantal dagen om te tonen NA de viewDate, default 65 dagen, exclusief de useSTartAndEndOfWeek */
+    days?: number | undefined;
+    /**
+     * Array van tuples: [R, E[]] , waar bij R een object of een rij in de planning is en E een array van events die bij dit object/deze rij horen.
+     * Op die manier sorteer je de events per object, dus per rij.
+     */
+    rows?: Array<[R, E[]]>;
+    /** Hoe identificeren we een rij?
+     * - 'itself' -> Gebruik met R is een string of number.
+     * - Anders moet de rowIdentifer een property van R zijn.
+     */
+    rowIdentifier?: 'itself' | keyof R | ((item: R, index?: number) => string);
+    /** Gebruik start en einde van de week? Dan is de 1e kolom met events altijd een maandag, de laatste altijd een zondag (bij visibleDays is allemaal) */
+    alwaysStartOnMonday?: boolean;
+    /** Opties voor deze view */
+    options?: CalendarOptions<E>;
+    /** Event aangeklikt */
+    onEventClick?: (e: E, event: React.MouseEvent<HTMLElement>) => void;
+    /** Dag-datum geklikt? */
+    onDayClick?: (date: JSDateTime, row: R, event: React.MouseEvent<HTMLElement>) => void;
+    /** Hoe tonen we de rij? */
+    rowLabel?: (rowItem: R, events?: E[] | undefined) => React.ReactNode;
+    /** Hoe tonen we de dag? */
+    dayHeader?: (d: JSDateTime) => React.ReactNode;
+    /** Hoe tonen we de rij-header? first row, first column. */
+    rowHeader?: string | React.ReactNode | (() => React.ReactNode);
+};
+/**
+ * Een view voor het weergeven van een planning. To
+ * @param param0
+ * @returns
+ */
+declare function PlanningView<R, E extends BaseEventProps>({ viewDate, days: daysShown, alwaysStartOnMonday, options, rows, rowIdentifier, dayHeader, rowHeader, rowLabel, onDayClick, onEventClick, }: PlanningViewProps<R, E>): import("react/jsx-runtime").JSX.Element;
+export { PlanningView };
+export type { PlanningViewProps };

package/dist/lib/components/Calendar/Props.d.ts

@@ -0,0 +1,58 @@
+import { ColorProp } from './../../types';
+import { JSDateTime } from './../../utils/JSDateTime.class';
+import { Locale } from 'date-fns';
+export type CalendarType = 'm' | 'v' | 'w' | 'p';
+export type CalendarHours = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | (number & {});
+export type BaseEventProps = {
+    /** ID van een event */
+    id: number | string | (() => number | string);
+    /** Title van een event */
+    title: React.ReactNode | ((calType?: CalendarType) => React.ReactNode);
+    /** Start datetime or date event */
+    startDateTime: Date | JSDateTime;
+    /** [INTERN GEBRUIK!! AFBLIJVEN!!!]  Start datetime or date event */
+    _startDateTime?: JSDateTime;
+    /** (optional) End datetime */
+    endDateTime?: Date | JSDateTime;
+    /** [INTERN GEBRUIK!! AFBLIJVEN!!!]  end datetime or date event */
+    _endDateTime?: JSDateTime;
+    /** Is event an allday-event (hide starttime) */
+    allDay?: boolean;
+    /** Event description */
+    description?: React.ReactNode | ((calType?: CalendarType) => React.ReactNode);
+    /** Background-color for event (hexColors, default = #ee8000) */
+    evtColor?: HexColor | ColorProp | ((hovered?: boolean) => HexColor | ColorProp);
+    /** (optional) Tooltip wordt getoont als opgegeven, heeft een maxWidth van 300px */
+    tooltip?: React.ReactNode | string | undefined;
+};
+export type CalendarOptions<T extends BaseEventProps> = {
+    /** begin-uur voor de weekview, het 1e zichtbare uur in de calendar. default = `0`, '00:00', of 24:00. Kan alleen in de ochtend zijn */
+    firstHour?: CalendarHours;
+    /** eind-uur voor de weekview, het 1e zichtbare uur in de calendar */
+    lastHour?: CalendarHours;
+    /** De locale voor de calendar. default = 'nl-NL' */
+    locale?: Locale;
+    /** Zichtbare dagen als set (default 1,2,3,4,5,6,7 (ma = 1, di = 2,... zo = 7)) */
+    visibleDays?: Set<number>;
+    /** Settings for events */
+    event?: {
+        /** Settings for allday events */
+        allday?: EventOptions<T>;
+        /** Settings for timed events */
+        timed?: EventOptions<T>;
+    };
+    /** Settings for today */
+    today?: {
+        /** Background color for today (HexColors, default = #3b59ec) */
+        bgColor?: (hovered: boolean, date?: Date | JSDateTime) => HexColor | ColorProp;
+        /** Do not show which day is today */
+        doNotMarkToday: boolean;
+    };
+    tooltipColor?: ColorProp;
+};
+export type EventOptions<T extends BaseEventProps> = {
+    /** Dackground color for event (hex color, default = #ff8000) */
+    evtColor?: (evt: T, hovered: boolean) => HexColor | ColorProp;
+};
+type HexColor = `#${string}`;
+export {};