loon-bulma-react 2024.0.38 → 2024.1.0

package/dist/index.d.cts

@@ -4,6 +4,8 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Locale } from 'date-fns';
 import { JSONContent } from '@tiptap/react';
 
+/** Color scheme type  */
+type ColorSchemeType = 'light' | 'dark';
 /**
  * Type om een ander type beter leestbaar te maken, meer niet
  */
@@ -133,7 +135,7 @@ type AspectRatioProps = {
 declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): JSX.Element;
 
 /** Basis block component met een standaard margin & padding (bulma) */
-declare function Block({ id, children, className: classes, styles, }: {
+declare function Block({ id, children, className: cn, styles, }: {
     id?: string;
     children: React$1.ReactNode;
     className?: string;
@@ -156,7 +158,7 @@ type BoxProps = {
  * @returns een witte box om elementen.
  * @example <Box>This is a box</Box>
  */
-declare function Box({ id, children, className, styles, itemRef }: BoxProps): JSX.Element;
+declare function Box({ id, children, className: cn, styles, itemRef }: BoxProps): JSX.Element;
 
 type BorderBoxProps = {
     children: React$1.ReactNode;
@@ -165,17 +167,32 @@ type BorderBoxProps = {
     itemRef?: React$1.RefObject<HTMLDivElement> | undefined;
     className?: string | undefined;
     color?: ColorProp | undefined;
+    titleColor?: ColorProp | 'default' | 'border' | 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, alignment, }: BorderBoxProps): JSX.Element;
+    ({ children, title, style, itemRef, className: cn, color, titleColor, alignment, }: BorderBoxProps): JSX.Element;
+    /** Een Box met een Primary-colored title */
     Primary(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Link-colored title */
     Link(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Info-colored title */
     Info(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Warning-colored title */
     Warning(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Danger-colored title */
     Danger(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Success-colored title */
     Success(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Light-colored title */
     Light(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Dark-colored title (default) */
     Dark(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
 };
 
@@ -399,7 +416,7 @@ type ContainerProps = {
  * @example <Container>This is a container</Container>
  */
 declare const Container: {
-    ({ className, children, styles, size, id, itemRef }: ContainerProps): JSX.Element;
+    ({ className: cn, children, styles, size, id, itemRef }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in default viewports.
      * @param props
@@ -487,7 +504,7 @@ type ContentPropsType = {
  * @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>
  */
-declare function Content({ size, className: extraClasses, styles, id, children, itemRef }: ContentPropsType): JSX.Element;
+declare function Content({ size, className: cn, styles, id, children, itemRef }: ContentPropsType): JSX.Element;
 
 type FooterProps = {
     /** De content voor de footer */
@@ -508,14 +525,14 @@ type FooterProps = {
  * @returns een footer met daarin de content.
  * @example <Footer>This is a footer</Footer>
  */
-declare function Footer({ children, alignment, className: extraClasses, styles, id, itemRef }: FooterProps): JSX.Element;
+declare function Footer({ children, alignment, className: cn, styles, id, itemRef }: FooterProps): JSX.Element;
 
 type HeroProps = {
     itemRef?: React$1.RefObject<any>;
     id?: string;
     children?: React$1.ReactNode;
     /** Type hero */
-    heroColorFor?: 'werknemer' | 'werkgever' | 'klant' | 'admin' | 'primary' | undefined;
+    heroColorFor?: 'werknemer' | 'werkgever' | 'klant' | 'admin' | 'primary' | 'info' | 'link' | 'danger' | 'success' | 'warning' | 'dark' | 'light' | undefined;
     /** De grootte van de hero (default = small ('s')) */
     size?: SizeProp | undefined;
 };
@@ -665,6 +682,8 @@ type SectionPropsType = {
     children: React$1.ReactNode;
     className?: string;
     styles?: CSSProperties;
+    /** size voor  de section, de verticale margin. (default = `s`) */
+    size?: TagSizeProp;
 };
 /**
  * Maak een simpele container m een pagina te verdelen in secties.
@@ -673,7 +692,7 @@ type SectionPropsType = {
  * @returns een sectie voor op de pagina, met ruimte eromheen
  * @example <Section>This is a section</Section>
  */
-declare function Section({ children, className: classes, styles, id, itemRef }: SectionPropsType): JSX.Element;
+declare function Section({ children, className: cn, styles, id, itemRef, size }: SectionPropsType): JSX.Element;
 
 /**
  * Maak een ScrollArea om in een bepaalde richting te kunnen scrollen. De scrollareas maken gebruik van flexbox.
@@ -910,14 +929,15 @@ type HelpTxtProps = {
     className?: string;
     color?: ColorProp;
 };
+type HelpTxtPropsNoColor = StrictOmit<HelpTxtProps, 'color'>;
 declare const HelpTxt: {
-    ({ color, className: extraClasses, children }: HelpTxtProps): JSX.Element;
-    Info(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Link(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Primary(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Danger(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Success(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Warning(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
+    ({ color, className: cn, children }: HelpTxtProps): JSX.Element;
+    Info(props: HelpTxtPropsNoColor): JSX.Element;
+    Link(props: HelpTxtPropsNoColor): JSX.Element;
+    Primary(props: HelpTxtPropsNoColor): JSX.Element;
+    Danger(props: HelpTxtPropsNoColor): JSX.Element;
+    Success(props: HelpTxtPropsNoColor): JSX.Element;
+    Warning(props: HelpTxtPropsNoColor): JSX.Element;
 };
 
 type IconProps = {
@@ -1219,8 +1239,9 @@ type ModalProps = {
     /** De grootte van de modal: met SizeProp of een string. ( DEFAULT = 'm', 800px)
      * - `SizeProp`: s: 600px, m: 800px, l: 1000px, xl: 1200px, max: 95%;
      * - `string`: '834px', '50%, 60em', '100%'
+     * - `number`: size < 100 ? als percentage, anders als px
      */
-    size?: SizeProp | 'max' | string | undefined;
+    size?: SizeProp | 'max' | string | number | undefined;
     /** Helptag in Loon voor de modal */
     helpTag?: string | undefined;
     /** blokkeer sluiten van modal als je er buiten klikt? (default = false) */
@@ -1287,7 +1308,7 @@ type NotificationProps = {
     onClick?(e?: React$1.MouseEvent<HTMLDivElement>): void;
     /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
     autoDismissAfter?: number;
-    /** kleur van de notificatie (defualt = 'i') */
+    /** kleur van de notificatie (default = 'i') */
     color?: ColorProp;
     icon?: string | IconProp;
     itemRef?: React$1.RefObject<any>;
@@ -1654,6 +1675,8 @@ type TagProps = {
     size?: TagSizeProp;
     /** Moet de light-colored versie van de tag getoont worden */
     light?: boolean;
+    /** Moet de dark-colored versie van de tag getoont worden */
+    dark?: boolean;
     /** Moet er een dismiss-knop op de tag, en zo ja, definieer daar een functie voor */
     onDismiss?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
     /** Title voor de tag  (tooltip) */
@@ -1682,7 +1705,7 @@ type TagsProps = {
  * <Tag>Hello</Tag>
  * <Tag color='d'>Danger</Tag>
  */
-declare function Tag({ children, color, size, light, title, onDismiss }: TagProps): JSX.Element;
+declare function Tag({ children, color, size, light, dark, title, onDismiss }: TagProps): JSX.Element;
 /**
  * Maak een tag-container aan. De tags kunnen aan elkaar geplakt worden of niet.
  * De grootte van de tags kan ook ingesteld worden
@@ -1750,7 +1773,7 @@ type TimeLinePointProps = {
  * </TimeLine>
  */
 declare const TimeLine: {
-    ({ id, alignment, children, className: extraClasses }: TimeLineProps): JSX.Element;
+    ({ id, alignment, children, className: cn }: TimeLineProps): JSX.Element;
     /**
      * Een punt op de timeline, bijvoorbeeld een jaartal of een datum. Er wordt een <Tag> gebruikt
      * @param props
@@ -3093,6 +3116,10 @@ declare function centerPad(v: string | number | boolean, padLen: number, opts?:
  */
 declare function EvMv<T>(count: number | T[] | undefined | null, ev: string, mv: string, options?: EvMvOptions): string;
 
+declare function setColorScheme(scheme?: ColorSchemeType): void;
+declare function getCurrentColorScheme(): ColorSchemeType;
+declare function getSystemColorScheme(): ColorSchemeType;
+
 type CalendarType = 'm' | 'v' | 'w' | 'p';
 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 & {});
 type BaseEventProps = {
@@ -3271,7 +3298,6 @@ declare const Calendar: {
     Fourweeks: typeof FourweeksView;
     Planning: typeof PlanningView;
     Mini: typeof MiniView;
-    MiniKutAgenda: typeof MiniView;
 };
 
 /** actions die de tooltip kan doen */
@@ -4751,6 +4777,18 @@ declare function DialogsProvider({ children }: {
     children: React.ReactNode;
 }): JSX.Element;
 
+declare const ColorSchemeContext: React$1.Context<{
+    scheme: ColorSchemeType;
+    setScheme: (v: ColorSchemeType) => void;
+}>;
+declare function ColorSchemeProvider({ children }: {
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useColorScheme(): {
+    scheme: ColorSchemeType;
+    setScheme: (v: ColorSchemeType) => void;
+};
+
 type CopyType = {
     /**
     * Kopieer een waarde naar het clipboard, om die daarna ergens te kunnen plakken.
@@ -5190,4 +5228,32 @@ type FetchAPIWrapper = {
 };
 declare function useFetchAPI(): FetchAPIWrapper;
 
-export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AllowedPromptTypes, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, BorderBox, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, InputContainer, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationParams, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getHotkeyHandler, getHotkeyMatcher, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useConfirm, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };
+/**
+ * Overschrijf de default right-click actie van een element met de meegegeven ref. Dit kan je gebruiken om je EIGEN context-menu systematiek te maken. Gebruik `<ContextMenu />`-component voor de standaard contextmenu implementatie.
+ * @example
+ * ```tsx
+ * // some component
+ * const outerRef = React.useRef<HTMLDivElement>(null);
+ * const { x, y, show } = useContextMenu(outerRef);
+ *
+ * return
+ * <div ref={outerRef}> bla di bla
+ *    {show && <div style={{ top: y, left: x }}>context menu</div>}
+ * </div>
+ *  ```
+ */
+declare function useContextMenu<T extends HTMLElement = HTMLElement>(outerRef: React$1.RefObject<T>): {
+    x: `${number}px`;
+    y: `${number}px`;
+    show: boolean;
+};
+/**
+ * Standaard contextmenu component. Gebruik deze om een standaard contextmenu te tonen.
+ * @returns
+ */
+declare function ContextMenu({ outerRef, children }: {
+    outerRef: React$1.RefObject<HTMLDivElement>;
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AllowedPromptTypes, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, BorderBox, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, ColorSchemeContext, ColorSchemeProvider, type ColorSchemeType, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, ContextMenu, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, InputContainer, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationParams, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, ContextMenu as RightClickMenu, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getCurrentColorScheme, getHotkeyHandler, getHotkeyMatcher, getSystemColorScheme, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, setColorScheme, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useColorScheme, useConfirm, useContextMenu, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useContextMenu as useRightClick, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };

package/dist/index.d.ts

@@ -4,6 +4,8 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { Locale } from 'date-fns';
 import { JSONContent } from '@tiptap/react';
 
+/** Color scheme type  */
+type ColorSchemeType = 'light' | 'dark';
 /**
  * Type om een ander type beter leestbaar te maken, meer niet
  */
@@ -133,7 +135,7 @@ type AspectRatioProps = {
 declare function AspectRatio({ ratio, children, caption, className }: AspectRatioProps): JSX.Element;
 
 /** Basis block component met een standaard margin & padding (bulma) */
-declare function Block({ id, children, className: classes, styles, }: {
+declare function Block({ id, children, className: cn, styles, }: {
     id?: string;
     children: React$1.ReactNode;
     className?: string;
@@ -156,7 +158,7 @@ type BoxProps = {
  * @returns een witte box om elementen.
  * @example <Box>This is a box</Box>
  */
-declare function Box({ id, children, className, styles, itemRef }: BoxProps): JSX.Element;
+declare function Box({ id, children, className: cn, styles, itemRef }: BoxProps): JSX.Element;
 
 type BorderBoxProps = {
     children: React$1.ReactNode;
@@ -165,17 +167,32 @@ type BorderBoxProps = {
     itemRef?: React$1.RefObject<HTMLDivElement> | undefined;
     className?: string | undefined;
     color?: ColorProp | undefined;
+    titleColor?: ColorProp | 'default' | 'border' | 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, alignment, }: BorderBoxProps): JSX.Element;
+    ({ children, title, style, itemRef, className: cn, color, titleColor, alignment, }: BorderBoxProps): JSX.Element;
+    /** Een Box met een Primary-colored title */
     Primary(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Link-colored title */
     Link(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Info-colored title */
     Info(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Warning-colored title */
     Warning(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Danger-colored title */
     Danger(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Success-colored title */
     Success(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Light-colored title */
     Light(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
+    /** Een Box met een Dark-colored title (default) */
     Dark(props: StrictOmit<BorderBoxProps, 'color'>): JSX.Element;
 };
 
@@ -399,7 +416,7 @@ type ContainerProps = {
  * @example <Container>This is a container</Container>
  */
 declare const Container: {
-    ({ className, children, styles, size, id, itemRef }: ContainerProps): JSX.Element;
+    ({ className: cn, children, styles, size, id, itemRef }: ContainerProps): JSX.Element;
     /**
      * Een container om content horizontaal te centreren in default viewports.
      * @param props
@@ -487,7 +504,7 @@ type ContentPropsType = {
  * @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>
  */
-declare function Content({ size, className: extraClasses, styles, id, children, itemRef }: ContentPropsType): JSX.Element;
+declare function Content({ size, className: cn, styles, id, children, itemRef }: ContentPropsType): JSX.Element;
 
 type FooterProps = {
     /** De content voor de footer */
@@ -508,14 +525,14 @@ type FooterProps = {
  * @returns een footer met daarin de content.
  * @example <Footer>This is a footer</Footer>
  */
-declare function Footer({ children, alignment, className: extraClasses, styles, id, itemRef }: FooterProps): JSX.Element;
+declare function Footer({ children, alignment, className: cn, styles, id, itemRef }: FooterProps): JSX.Element;
 
 type HeroProps = {
     itemRef?: React$1.RefObject<any>;
     id?: string;
     children?: React$1.ReactNode;
     /** Type hero */
-    heroColorFor?: 'werknemer' | 'werkgever' | 'klant' | 'admin' | 'primary' | undefined;
+    heroColorFor?: 'werknemer' | 'werkgever' | 'klant' | 'admin' | 'primary' | 'info' | 'link' | 'danger' | 'success' | 'warning' | 'dark' | 'light' | undefined;
     /** De grootte van de hero (default = small ('s')) */
     size?: SizeProp | undefined;
 };
@@ -665,6 +682,8 @@ type SectionPropsType = {
     children: React$1.ReactNode;
     className?: string;
     styles?: CSSProperties;
+    /** size voor  de section, de verticale margin. (default = `s`) */
+    size?: TagSizeProp;
 };
 /**
  * Maak een simpele container m een pagina te verdelen in secties.
@@ -673,7 +692,7 @@ type SectionPropsType = {
  * @returns een sectie voor op de pagina, met ruimte eromheen
  * @example <Section>This is a section</Section>
  */
-declare function Section({ children, className: classes, styles, id, itemRef }: SectionPropsType): JSX.Element;
+declare function Section({ children, className: cn, styles, id, itemRef, size }: SectionPropsType): JSX.Element;
 
 /**
  * Maak een ScrollArea om in een bepaalde richting te kunnen scrollen. De scrollareas maken gebruik van flexbox.
@@ -910,14 +929,15 @@ type HelpTxtProps = {
     className?: string;
     color?: ColorProp;
 };
+type HelpTxtPropsNoColor = StrictOmit<HelpTxtProps, 'color'>;
 declare const HelpTxt: {
-    ({ color, className: extraClasses, children }: HelpTxtProps): JSX.Element;
-    Info(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Link(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Primary(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Danger(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Success(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
-    Warning(props: StrictOmit<HelpTxtProps, 'color'>): JSX.Element;
+    ({ color, className: cn, children }: HelpTxtProps): JSX.Element;
+    Info(props: HelpTxtPropsNoColor): JSX.Element;
+    Link(props: HelpTxtPropsNoColor): JSX.Element;
+    Primary(props: HelpTxtPropsNoColor): JSX.Element;
+    Danger(props: HelpTxtPropsNoColor): JSX.Element;
+    Success(props: HelpTxtPropsNoColor): JSX.Element;
+    Warning(props: HelpTxtPropsNoColor): JSX.Element;
 };
 
 type IconProps = {
@@ -1219,8 +1239,9 @@ type ModalProps = {
     /** De grootte van de modal: met SizeProp of een string. ( DEFAULT = 'm', 800px)
      * - `SizeProp`: s: 600px, m: 800px, l: 1000px, xl: 1200px, max: 95%;
      * - `string`: '834px', '50%, 60em', '100%'
+     * - `number`: size < 100 ? als percentage, anders als px
      */
-    size?: SizeProp | 'max' | string | undefined;
+    size?: SizeProp | 'max' | string | number | undefined;
     /** Helptag in Loon voor de modal */
     helpTag?: string | undefined;
     /** blokkeer sluiten van modal als je er buiten klikt? (default = false) */
@@ -1287,7 +1308,7 @@ type NotificationProps = {
     onClick?(e?: React$1.MouseEvent<HTMLDivElement>): void;
     /** Roep de @see onDismiss() automatisch aan na ... milliseconden  */
     autoDismissAfter?: number;
-    /** kleur van de notificatie (defualt = 'i') */
+    /** kleur van de notificatie (default = 'i') */
     color?: ColorProp;
     icon?: string | IconProp;
     itemRef?: React$1.RefObject<any>;
@@ -1654,6 +1675,8 @@ type TagProps = {
     size?: TagSizeProp;
     /** Moet de light-colored versie van de tag getoont worden */
     light?: boolean;
+    /** Moet de dark-colored versie van de tag getoont worden */
+    dark?: boolean;
     /** Moet er een dismiss-knop op de tag, en zo ja, definieer daar een functie voor */
     onDismiss?: (e: React$1.MouseEvent<HTMLButtonElement>) => void;
     /** Title voor de tag  (tooltip) */
@@ -1682,7 +1705,7 @@ type TagsProps = {
  * <Tag>Hello</Tag>
  * <Tag color='d'>Danger</Tag>
  */
-declare function Tag({ children, color, size, light, title, onDismiss }: TagProps): JSX.Element;
+declare function Tag({ children, color, size, light, dark, title, onDismiss }: TagProps): JSX.Element;
 /**
  * Maak een tag-container aan. De tags kunnen aan elkaar geplakt worden of niet.
  * De grootte van de tags kan ook ingesteld worden
@@ -1750,7 +1773,7 @@ type TimeLinePointProps = {
  * </TimeLine>
  */
 declare const TimeLine: {
-    ({ id, alignment, children, className: extraClasses }: TimeLineProps): JSX.Element;
+    ({ id, alignment, children, className: cn }: TimeLineProps): JSX.Element;
     /**
      * Een punt op de timeline, bijvoorbeeld een jaartal of een datum. Er wordt een <Tag> gebruikt
      * @param props
@@ -3093,6 +3116,10 @@ declare function centerPad(v: string | number | boolean, padLen: number, opts?:
  */
 declare function EvMv<T>(count: number | T[] | undefined | null, ev: string, mv: string, options?: EvMvOptions): string;
 
+declare function setColorScheme(scheme?: ColorSchemeType): void;
+declare function getCurrentColorScheme(): ColorSchemeType;
+declare function getSystemColorScheme(): ColorSchemeType;
+
 type CalendarType = 'm' | 'v' | 'w' | 'p';
 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 & {});
 type BaseEventProps = {
@@ -3271,7 +3298,6 @@ declare const Calendar: {
     Fourweeks: typeof FourweeksView;
     Planning: typeof PlanningView;
     Mini: typeof MiniView;
-    MiniKutAgenda: typeof MiniView;
 };
 
 /** actions die de tooltip kan doen */
@@ -4751,6 +4777,18 @@ declare function DialogsProvider({ children }: {
     children: React.ReactNode;
 }): JSX.Element;
 
+declare const ColorSchemeContext: React$1.Context<{
+    scheme: ColorSchemeType;
+    setScheme: (v: ColorSchemeType) => void;
+}>;
+declare function ColorSchemeProvider({ children }: {
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+declare function useColorScheme(): {
+    scheme: ColorSchemeType;
+    setScheme: (v: ColorSchemeType) => void;
+};
+
 type CopyType = {
     /**
     * Kopieer een waarde naar het clipboard, om die daarna ergens te kunnen plakken.
@@ -5190,4 +5228,32 @@ type FetchAPIWrapper = {
 };
 declare function useFetchAPI(): FetchAPIWrapper;
 
-export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AllowedPromptTypes, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, BorderBox, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, InputContainer, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationParams, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getHotkeyHandler, getHotkeyMatcher, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useConfirm, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };
+/**
+ * Overschrijf de default right-click actie van een element met de meegegeven ref. Dit kan je gebruiken om je EIGEN context-menu systematiek te maken. Gebruik `<ContextMenu />`-component voor de standaard contextmenu implementatie.
+ * @example
+ * ```tsx
+ * // some component
+ * const outerRef = React.useRef<HTMLDivElement>(null);
+ * const { x, y, show } = useContextMenu(outerRef);
+ *
+ * return
+ * <div ref={outerRef}> bla di bla
+ *    {show && <div style={{ top: y, left: x }}>context menu</div>}
+ * </div>
+ *  ```
+ */
+declare function useContextMenu<T extends HTMLElement = HTMLElement>(outerRef: React$1.RefObject<T>): {
+    x: `${number}px`;
+    y: `${number}px`;
+    show: boolean;
+};
+/**
+ * Standaard contextmenu component. Gebruik deze om een standaard contextmenu te tonen.
+ * @returns
+ */
+declare function ContextMenu({ outerRef, children }: {
+    outerRef: React$1.RefObject<HTMLDivElement>;
+    children: React$1.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AllowedPromptTypes, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, BorderBox, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, ColorSchemeContext, ColorSchemeProvider, type ColorSchemeType, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, ContextMenu, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, InputContainer, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationParams, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, ContextMenu as RightClickMenu, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getCurrentColorScheme, getHotkeyHandler, getHotkeyMatcher, getSystemColorScheme, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, setColorScheme, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useColorScheme, useConfirm, useContextMenu, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useContextMenu as useRightClick, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };