loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/hooks/useSessionStoredState.d.ts

@@ -0,0 +1,38 @@
+type UseSessionStoredState<T = string> = {
+    /** Key to store the value with in Session Storage */
+    key: string;
+    /** Initial value (if its non-existent in Session Storage) */
+    initialValue: T;
+    /** Your own serializing-function. Implement when you cannot use `JSON.stringify` */
+    serialize?: (value: T, replacer?: (key: string, value: any) => any, space?: string | number) => string;
+    /** Your own deserializing-funtion. Implement when you cannot use `JSON.parse` */
+    deserialize?: (value: string, reviver?: (key: string, value: any) => any) => T;
+};
+/**
+ * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Session Storage.
+ * De waarde blijft dan bij het refreshen van de pagina aanwezig.
+ * Als de pagina dan ververst wordt, word de al bestaande waarde gebruikt, niet de initialValue.
+ *  Maar als de tab of de browser gesloten wordt, dan wordt de inhoud van de session storage gewist.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useLocalStoredState}`.
+ * @param {UseSessionStoredState} params voor de hook
+ * @returns {[T, (value: T) => void]} tuple met een `value` en een `setValue`-function (net als `React.useState`)
+ * @description
+ * | Property     | Type       | Description                                                   |
+ * |--------------|------------|---------------------------------------------------------------|
+ * | key          | `string`   | De key waaronder de waarde in Session Storage wordt opgeslagen. |
+ * | initialValue | `T`        | De initiale waarde.                                           |
+ * | serialize    | `function` | (optional) functie om de waarde om te zetten naar een string. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.stringify()`! |
+ * | deserialize  | `function` | (optional) De functie die een string omzet naar de waarde. Implementeer als de waarde __GEEN__ gebruik kan maken van `JSON.parse()`! |
+ * @example
+ * import { useSessionStoredState } from 'loon-bulma-react';
+ * const [ value, setValue, removeFromSessionStorage ] = useSessionStoredState({ key: 'myKey', initialValue: 'Oompa Loompa' });
+ * // 1. value is 'Oompa Loompa', put it somewhere on the screen
+ * // 2. change the value to something else
+ * // 3. refresh the page.
+ * // 4. see te new value on the page.
+ * // 5. you can also check the value in Local Storage in devtools.
+ * // 6. close the browser / tab
+ * // 7. check the value in session storage. it should be gone.
+ */
+declare function useSessionStoredState<T extends unknown = {}>({ key, initialValue, deserialize, serialize, }: UseSessionStoredState<T>): readonly [T, (value: T) => void, () => void];
+export { useSessionStoredState };

package/dist/lib/hooks/useThrottle.hooks.d.ts

@@ -0,0 +1,99 @@
+/**
+ * Throttle-hook voor een externe value (bijv. prop of state van elders).
+ * Neemt een externe waarde en retourneert een throttled versie ervan.
+ * Handig voor performance bij events die vaak worden getriggerd zoals scroll, resize, of mousemove,
+ * waarbij je wilt dat updates maximaal één keer per interval plaatsvinden.
+ * @example
+ * const [scrollY, setScrollY] = React.useState(0);
+ * const [throttledScrollY, cancel] = useThrottledValue(scrollY, { interval: 200 });
+ *
+ * React.useEffect(() => {
+ *   const handleScroll = () => setScrollY(window.scrollY);
+ *   window.addEventListener('scroll', handleScroll);
+ *   return () => window.removeEventListener('scroll', handleScroll);
+ * }, []);
+ *
+ * return <div>
+ *   <p>Huidige scroll positie: {scrollY}</p>
+ *   <p>Throttled scroll positie: {throttledScrollY}</p>
+ * </div>
+ * @description Belangrijkste verschillen met debouncing:
+ * - Throttling: Voert updates uit met regelmatige intervallen tijdens activiteit
+ * - Debouncing: Wacht tot activiteit stopt voordat update wordt uitgevoerd
+ * - Throttle is ideaal voor scroll handlers, mousemove, resize events
+ * - Debounce is ideaal voor search inputs, form validation
+ * @description Verschillen met `useThrottledState`:
+ * - Neemt externe waarde als input (geen eigen state management)
+ * - Geeft toegang tot zowel originele als throttled waarde
+ * - Bevat cancel-functie om pending updates te annuleren
+ * - Gebruikt voor controlled inputs waar je state elders beheert
+ * - Werkt met props, context, of andere state providers
+ * @param valueParam de externe waarde die throttled moet worden
+ * @param options extra opties
+ * - leading: Direct updaten bij eerste wijziging (Default: true)
+ * - trailing: Update aan het einde van interval met laatste waarde (Default: true)
+ * - interval: Minimum tijd in ms tussen updates (Default: 200ms)
+ * @returns [throttledValue, cancelFunction] - de throttled waarde en een annuleer-functie
+ */
+export declare function useThrottledValue<T = unknown>(valueParam: T, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+    interval?: number;
+}): readonly [T, () => void];
+/**
+ * Throttle-hook die zijn eigen interne state beheert.
+ * Creëert en beheert een throttled state waarde met bijbehorende setter functie.
+ * Handig voor het beperken van update-frequentie bij events zoals window resize,
+ * scroll tracking, of real-time input waar je updates wilt limiteren maar niet wilt wachten
+ * tot de gebruiker stopt (zoals bij debounce).
+ * @param defaultValue de standaard waarde voor de throttled state
+ * @param options extra opties
+ * - `leading`: Direct updaten bij eerste wijziging na een rustige periode (Default: true)
+ * - `trailing`: Update aan het einde van het interval met laatste waarde (Default: true)
+ * - `interval`: Minimum tijd in ms tussen throttled updates (Default: 200ms)
+ * - `onThrottledChange`: Callback die wordt aangeroepen bij wijzigingen van throttled waarde (niet bij initiële waarde). Wordt ook overgeslagen bij `setSilent`
+ * @returns [immediateValue, throttledValue, setValue, setSilent] - directe waarde, throttled waarde, normale setter en stille setter
+ * - `immediateValue`: De directe waarde die onmiddellijk wordt bijgewerkt bij elke aanroep van `setValue`. (gebruik in input)
+ * - `throttledValue`: De throttled waarde die maximaal één keer per interval wordt bijgewerkt. (dat is dus de throttled waarde)
+ * - `setValue(newValue)`: Stelt de directe waarde in en plant een throttled update indien nodig. (gebruik in event handlers)
+ * - `setSilent(newValue)`: Stelt zowel de directe als de throttled waarde onmiddellijk in zonder throttling en zonder het aanroepen van de onThrottledChange callback.
+ * @example
+ * const [immediateValue, throttledValue, setValue, setSilent] = useThrottledState(0, {
+ *   interval: 200,
+ *   onThrottledChange: (value) => {
+ *     console.log('Throttled update:', value);
+ *     updateServerSideTracking(value);
+ *   }
+ * });
+ *
+ * // Voor scroll tracking (triggert onChange max 1x per 200ms)
+ * const handleScroll = () => setValue(window.scrollY);
+ *
+ * // Voor programmatische updates (triggert NIET de onThrottledChange)
+ * const resetScroll = () => setSilent(0);
+ *
+ * return <div onScroll={handleScroll}>
+ *   <p>Current scroll: {immediateValue}</p>
+ *   <p>Throttled scroll: {throttledValue}</p>
+ * </div>
+ * @description Belangrijkste verschillen met `useThrottledValue`:
+ * - Beheert eigen interne state (geen externe waarde nodig)
+ * - Geeft toegang tot zowel directe als throttled waarde
+ * - Geen cancel-functie beschikbaar
+ * - Gebruikt voor controlled inputs met directe feedback
+ * - Werkt alleen met interne useState, niet met externe state providers
+ * - Eenvoudigere API dan useThrottledValue
+ * - Optionele onChange callback voor side-effects
+ * - setSilent functie voor programmatische updates zonder onChange
+ * @description Leading vs Trailing:
+ * - `leading: true, trailing: false`: Update alleen aan het begin van elke interval periode
+ * - `leading: false, trailing: true`: Update alleen aan het einde van elke interval periode
+ * - `leading: true, trailing: true` (default): Update aan begin én einde als er wijzigingen waren
+ * - `leading: false, trailing: false`: Geen updates (niet nuttig in de praktijk)
+ */
+export declare function useThrottledState<T = unknown>(defaultValue: T, options?: {
+    leading?: boolean;
+    trailing?: boolean;
+    interval?: number;
+    onThrottledChange?: (value: T) => void;
+}): readonly [T, T, (newValue: T) => void, (newValue: T) => void];

package/dist/lib/hooks/useToggle.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Een toggle tussen twee state-opties. de state switched tussen de twee.
+ * @param initialState startwaarde
+ * @param options 2 toggle-opties
+ * @returns een state-toggle function
+ * @example const [state, toggle] = useToggle("yes", ["yes", "no"]);
+ */
+declare function useToggle<T extends unknown>(initialState: T, options: [T, T]): readonly [T, (value?: T) => void];
+/**
+ * useToggle voor booleans
+ * @param initialState initia
+ * @returns een state-toggle met booleans
+ * @example const [state, toggle] = useBoolToggle(true);
+ */
+declare function useBoolToggle(initialState?: boolean): readonly [boolean, (value?: boolean) => void];
+export { useToggle, useBoolToggle };

package/dist/lib/hooks/useUncontrolled.d.ts

@@ -0,0 +1,44 @@
+export type UncontrolledMode = 'initial' | 'controlled' | 'uncontrolled';
+export type UncontrolledOptions<T extends unknown> = {
+    value?: T;
+    defaultValue?: T;
+    finalValue?: T;
+    onChange?: (value: T) => void;
+};
+/**
+ * Hook voor het managen van state voor 'controlled' en 'uncontrolled' componenten (inputs etc).
+ * Het is met deze hook mogelijk om een component als 'controlled' EN 'uncontrolled' te gebruiken.
+ * @param options.value waarde
+ * @param options.defaultValue default waarde
+ * @param options.finalValue eindwaarde
+ * @param options.onChange callback voor waarde verandering
+ * @param options.onValueUpdate callback voor waarde update
+ * @param options.rule bepaal welke waarde initieel gebruikt wordt. zie examples
+ * @returns [value, setalue, controllerMode]
+ *
+ * @example
+ * const [_value, handleChange] = useUncontrolled({
+ *   value: VALUE,
+ *   defaultValue: DEFAULT,
+ *   finalValue: 'final',
+ *   onChange: (v) => {console.log(v)},
+ *   rule: (v) => typeof v === 'string'
+ * });
+ *
+ * return <input type="text" value={_value} onChange={(evt) => handleChange(evt.target.value)} />
+ *
+ * // als VALUE = 'oi' && DEFAULT = 'there': defaultValue & finalValue ignored in controlled components, _value == VALUE == 'oi'
+ * // als VALUE = null && DEFAULT = 'there': rule() returns 'false', defaultValue is used, _value == defaultValue == 'there'
+ * // als VALUE = null && DEFAULT = null: rule() returns 'false' voor beiden, finalValue is used, _value == defaultValue == 'final'
+ *
+ * @example - uncontrolled & controlled
+ * // Uncontrolled
+* <input />
+* <input defaultValue="hello" />
+* <input onChange={() => {}} /> // still possible since value is stored in internal state
+*
+* // Controlled
+* <input value="Hello" onChange={() => {}} />
+
+ */
+export declare function useUncontrolled<T extends unknown>({ value, defaultValue, finalValue, onChange, }: UncontrolledOptions<T>): readonly [T, (nextValue: T) => void, boolean];

package/dist/lib/hooks/useValidatedState.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Hook voor gebruik van een gevalideerde waarde.
+ * @param initialValue de beginwaarde (optioneel)
+ * @param validation validatie-functie (optioneel)
+ * @returns een uitgebreid useState hook met een gevalideerde waarde
+ * @example
+ * const validation = (value?: string): [boolean, string] => {
+ *    console.log(value);
+ *    if (!value) return [false, 'required'];
+ *    else if (value.length < 3) return [false, 'too short'];
+ *    return [true, ''];
+ * };
+ * const [{ value, lastValidValue, valid, invalidMsg }, onChange] = useValidatedState<string>('', validation);
+ * <input onChange={onChange} value={value} />
+ */
+export declare function useValidatedState<T extends unknown>(initialValue?: T, validation?: (value?: T) => [boolean, string]): readonly [{
+    readonly value: T | undefined;
+    readonly lastValidValue: T | undefined;
+    readonly valid: boolean;
+    readonly invalidMsg: string;
+}, (val: T) => void];

package/dist/lib/index.d.ts

@@ -0,0 +1,174 @@
+export * from './types';
+export { AspectRatio } from './components/AspectRatio/AspectRatio';
+export type { AspectRatioProps } from './components/AspectRatio/AspectRatio';
+export { Block } from './components/Block/Block';
+export { Box } from './components/Box/Box';
+export { BorderBox } from './components/Box/BorderBox';
+export type { BoxProps } from './components/Box/Box';
+export { Columns } from './components/Columns/Columns';
+export type { ColumnProps, ExpandedColumnProps } from './components/Columns/Column';
+export { Column } from './components/Columns/Column';
+export { Container } from './components/Container/Container';
+export { Content } from './components/Content/Content';
+export { Divider } from './components/Divider/Divider';
+export { Footer } from './components/Footer/Footer';
+export { Hero } from './components/Hero/Hero';
+export type { HeroProps } from './components/Hero/Hero';
+export { Image } from './components/Image/Image';
+export type { ImageProps } from './components/Image/Image';
+export { Section } from './components/Section/Section';
+export { ScrollArea } from './components/ScrollArea/ScrollArea';
+export { CodeBlock } from './components/CodeBlock/CodeBlock';
+export type { CodeBlockProps, CodeLanguage } from './components/CodeBlock/CodeBlock';
+export { DataTable } from './components/DataTable/DataTable';
+export type { DataTableApi, DataTableColumn, DataTableProps } from './components/DataTable/DataTable';
+export { DragDropList } from './components/DragDrop/DragDropList';
+export { Dropdown } from './components/Dropdown/Dropdown';
+export { HelpTxt } from './components/Help/Help';
+export type { HelpTxtProps } from './components/Help/Help';
+export { Icon, IconText, IconStack } from './components/Icon/Icon';
+export type { IconProps, IconTextProps } from './components/Icon/Icon';
+export { Indicator } from './components/Indicator/Indicator';
+export type { IndicatorProps } from './components/Indicator/Indicator';
+export { Kbd, Kbds } from './components/Kbd/Kbd';
+export { Label } from './components/Label/Label';
+export type { LabelProps } from './components/Label/Label';
+export { Menu } from './components/Menu/Menu';
+export type { MenuProps, MenuItemProps, MenuItemGroupProps } from './components/Menu/Menu';
+export { Message } from './components/Message/Message';
+export type { MessageProps } from './components/Message/Message';
+export { Modal } from './components/Modal/Modal';
+export type { ModalProps } from './components/Modal/Modal';
+export { Notification } from './components/Notification/Notification';
+export type { NotificationProps } from './components/Notification/Notification';
+export { Panel } from './components/Panel/Panel';
+export type { PanelProps } from './components/Panel/Panel';
+export { ProgressBar } from './components/ProgressBar/ProgressBar';
+export type { ProgressBarProps } from './components/ProgressBar/ProgressBar';
+export { SimpleTable, Table } from './components/SimpleTable/SimpleTable';
+export type { SimpleTableProps, SimpleTableColProps } from './components/SimpleTable/SimpleTable';
+export { Steps } from './components/Steps/Steps';
+export type { StepsProps, StepItemProps } from './components/Steps/Steps';
+export { TabBar } from './components/TabBar/TabBar';
+export type { TabBarProps, TabBarItemProps } from './components/TabBar/TabBar';
+export { Tag, Tags } from './components/Tag/Tag';
+export type { TagProps, TagsProps } from './components/Tag/Tag';
+export { TimeLine } from './components/TimeLine/TimeLine';
+export type { TimeLineProps, TimeLineItemProps, TimeLinePointProps } from './components/TimeLine/TimeLine';
+export { TreeView } from './components/TreeView/TreeView';
+export { useTreeViewControls } from './components/TreeView/TreeView';
+export type { TreeViewProps, TreeViewNode, TreeViewRef } from './components/TreeView/TreeView';
+export { H1, H2, H3, H4, H5, H6 } from './components/Titles/Titles';
+export { QuickView } from './components/QuickView/QuickView';
+export type { QuickViewProps } from './components/QuickView/QuickView';
+export { ToggleBar } from './components/ToggleBar/ToggleBar';
+export type { ToggleBarProps, ToggleItemProps, OnOffToggleItemProps } from './components/ToggleBar/ToggleBar';
+export { Buttons, ButtonGroup } from './components/ButtonGroup/ButtonGroup';
+export type { ButtonGroupProps } from './components/ButtonGroup/ButtonGroup';
+export type { ButtonProps } from './components/Button/Button';
+export { Button } from './components/Button/Button';
+export { Link, LinkButton } from './components/Link/Link';
+export type { LinkProps, LinkButtonProps } from './components/Link/Link';
+export * from './components/Calendar';
+export type { BaseEventProps, CalendarOptions, CalendarType } from './components/Calendar/Props';
+export type { MonthViewProps } from './components/Calendar/Month/MonthView';
+export type { WeekViewProps } from './components/Calendar/Week/WeekView';
+export { Tooltip } from './components/Tooltip/Tooltip';
+export { Pagination } from './components/Pagination/Pagination';
+export type { PaginationProps } from './components/Pagination/Pagination';
+export { CheckBox, CB } from './forms/Checkbox/Checkbox';
+export type { CheckboxInputProps } from './forms/Checkbox/Checkbox';
+export { Select } from './forms/Select/Select';
+export type { SelectInputProps } from './forms/Select/Select';
+export { ComboBox } from './forms/ComboBox/ComboBox';
+export type { ComboBoxProps } from './forms/ComboBox/ComboBox';
+export { MultiComboBox } from './forms/ComboBox/MultiComboBox';
+export type { MultiComboBoxProps } from './forms/ComboBox/MultiComboBox';
+export { ColorInput } from './forms/Others/ColorInput';
+export type { ColorInputProps } from './forms/Others/ColorInput';
+export { HiddenInput } from './forms/Others/HiddenInput';
+export type { HiddenInputProps } from './forms/Others/HiddenInput';
+export { BaseInput, Input, InputContainer } from './forms/Input';
+export type { InputPropsType, InputStylingPropsType, InputValueType } from './forms/Input';
+export { RadioGroup, RB } from './forms/Radio/Radio';
+export type { RadioInputProps } from './forms/Radio/Radio';
+export { TagsInput } from './forms/TagsInput/TagsInput';
+export type { TagsInputProps } from './forms/TagsInput/TagsInput';
+export { EmailInput } from './forms/Text/EmailInput';
+export type { EmailInputProps } from './forms/Text/EmailInput';
+export { TelephoneInput } from './forms/Others/TelephoneInput';
+export type { TelephoneInputProps } from './forms/Others/TelephoneInput';
+export { URLInput } from './forms/Others/URLInput';
+export type { URLInputProps } from './forms/Others/URLInput';
+export { PasswordInput } from './forms/Text/PasswordInput';
+export type { PasswordInputProps } from './forms/Text/PasswordInput';
+export { TextEditor } from './forms/Text/TextEditor';
+export { TextArea } from './forms/Text/TextArea';
+export type { TextAreaProps } from './forms/Text/TextArea';
+export { TextInput } from './forms/Text/TextInput';
+export type { TextInputProps } from './forms/Text/TextInput';
+export { FormattedInput } from './forms/Text/FormattedInput';
+export type { FormattedInputProps } from './forms/Text/FormattedInput';
+export { NumberInput } from './forms/Numeric/NumberInput';
+export type { NumberInputProps } from './forms/Numeric/NumberInput';
+export { RangeInput } from './forms/Numeric/RangeInput';
+export type { RangeInputProps } from './forms/Numeric/RangeInput';
+export { DateInput } from './forms/Datetimes/DateInput';
+export type { DateInputProps } from './forms/Datetimes/DateInput';
+export { DateTimeInput } from './forms/Datetimes/DateTimeInput';
+export type { DateTimeInputProps } from './forms/Datetimes/DateTimeInput';
+export { TimeInput } from './forms/Datetimes/TimeInput';
+export type { TimeInputProps } from './forms/Datetimes/TimeInput';
+export { FileInput } from './forms/File/FileInput';
+export type { FileInputProps, FileInputValue } from './forms/File/FileInput';
+export { CurrencyInput } from './forms/Currency/CurrencyInput';
+export type { CurrencyInputProps } from './forms/Currency/CurrencyInput';
+export { IBANInput } from './forms/MaskedInput/IBANInput';
+export type { IBANInputProps } from './forms/MaskedInput/IBANInput';
+export { WeekInput } from './forms/Periodes/WeekInput';
+export type { WeekInputProps, WeekInputString } from './forms/Periodes/WeekInput';
+export { MonthInput } from './forms/Periodes/MonthInput';
+export type { MonthInputProps, MonthInputString } from './forms/Periodes/MonthInput';
+export * from './contexts/Notifier/Notifier';
+export * from './contexts/Confirm/ConfirmContextProvider';
+export * from './contexts/Prompt/PromptContextProvider';
+export * from './contexts/ActionSheet/ActionSheetContextProvider';
+export * from './contexts/DialogsProvider/DialogsProvider';
+export * from './contexts/ColorSchemeProvider/ColorSchemeProvider';
+export * from './contexts/ModalProvider/ModalProvider';
+export * from './contexts/DefaultsProvider/DefaultsProvider';
+export * from './contexts/KeysProvider/KeysProvider';
+export * from './contexts/ModeProvider/ModeProvider';
+export * from './contexts/AppProvider/AppProviders';
+export * from './contexts/DialogsProvider/DialogsProvider';
+export * from './hooks/useClipboard';
+export * from './hooks/useDebounced.hooks';
+export * from './hooks/useThrottle.hooks';
+export * from './hooks/useMediaQuery';
+export * from './hooks/useHotkeys';
+export * from './hooks/useLocalStoredState';
+export * from './hooks/useCookieState';
+export * from './hooks/usePagination';
+export * from './hooks/useToggle';
+export * from './hooks/useUncontrolled';
+export * from './hooks/useValidatedState';
+export * from './hooks/useSessionStoredState';
+export * from './hooks/useClickOutside';
+export * from './hooks/useScrollIntoView';
+export * from './hooks/useFetchApi';
+export * from './hooks/useContextMenu';
+export * from './hooks/usePropState';
+export * from './hooks/useIndexedDb';
+export * from './utils/JSDateTime.class';
+export * from './utils/JSDuration.class';
+export * from './utils/BSN.functions';
+export * from './utils/IBAN.functions';
+export * from './utils/colors';
+export * from './utils/math';
+export * from './utils/sorting';
+export * from './utils/colors';
+export * from './utils/operators';
+export * from './utils/string.utils';
+export * from './utils/flattenChildren.function';
+export * from './classes/Console';
+export * from './classes/FetchWrapper';

package/dist/lib/internal_functions/createIconsInternal.d.ts

@@ -0,0 +1,36 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { InputValueType } from 'lib';
+import { InputIconRightFn } from 'lib/forms/Input';
+type ParamType<T extends InputValueType = InputValueType> = {
+    icon: IconProp | string | undefined | null;
+    hovered: boolean;
+    disabled: boolean;
+    loading: boolean;
+    focused: boolean;
+    value?: T | undefined;
+    error?: string;
+    showInfo?: boolean | undefined;
+    infoData?: React.ReactNode | (() => void) | undefined;
+    inputId?: string | undefined;
+    helpTag?: string | undefined;
+    /**
+     * `hidden`: geen icon rechts
+     * `visible`: standaard gedrag, een check of een error icoon, of een info icoon als showInfo/infoData is meegegeven
+     * De functie is raar. Die returned een tuple. __LET OP: ALS JE DEZE GEBRUIKT, HEB JE NIET MEER DE NORMALE HELP-FUNCTIONALITEIT__
+     * - 1e item een ReactNode teruggeven van het type `<Icon icon={...} />`, voor het icon.
+     * - 2e item (optioneel) een onClick functie, als het icon klikbaar moet zijn. Die __MOET__ op de container
+     * @param v: de value van de input
+     * @param hovered: is de input momenteel hovered?
+     * @param disabled: is de input momenteel disabled?
+     * @param loading: is de input momenteel loading?
+     * @param focused: is de input momenteel focused?
+     * @param onClick: (optionele) functie die wordt aangeroepen bij click van het icon
+     */
+    iconRight?: 'hidden' | 'visible' | InputIconRightFn<T> | undefined;
+};
+/** 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 createShowInfo_INTERNAL(infoData?: React.ReactNode | ((helpTag?: string) => void) | undefined, restoreFocus?: Function | undefined, helpTag?: string | undefined): React.ReactNode;
+export {};

package/dist/lib/internal_functions/getAlignmentClass.d.ts

@@ -0,0 +1,16 @@
+import { AlignmentProp } from "../types";
+/**
+ * @param alignment - The alignment of the element.
+ * @returns The appropriate Bulma class for the element alignment.
+ */
+export declare function getAlignmentClass(alignment: AlignmentProp, trim?: boolean): string;
+/**
+ * @param alignment - The alignment of the element or the text
+ * @returns The appropriate Bulma class for the element alignment.
+ */
+export declare function getTextAlignmentClass(alignment: AlignmentProp, trim?: boolean): string;
+/**
+ * @param alignment - The alignment of the element-group
+ * @returns The appropriate Bulma class for the element-grosup alignment.
+ */
+export declare function getGroupAlignmentClass(alignment: AlignmentProp, trim?: boolean): string;

package/dist/lib/internal_functions/getColorClass.d.ts

@@ -0,0 +1,23 @@
+import { BaseEventProps, EventOptions, CalendarOptions } from "./../components/Calendar/Props";
+import { ColorProp, HexColor } from "./../types";
+import { JSDateTime } from "./../utils/JSDateTime.class";
+/**
+ * @param color  de kleur die je wilt gebruiken als ColorProp
+ * @returns een string met de juiste kleurclass
+ */
+export declare function getClassForColorProp(color?: ColorProp | 'none', trim?: boolean): string | HexColor;
+/**
+ * @param event het event waarvoor je de kleur wilt bepalen
+ * @param isHovered of de muis eroverheen hangt
+ * @param options (optionele) options voor het event
+ * @param def (optionele) default kleur
+ * @returns een string met de juiste kleur
+ */
+export declare function getCalendarEventColorClass<T extends BaseEventProps>(event: T, isHovered: boolean, options?: EventOptions<T>): string | HexColor;
+/**
+ * @param date de datum waarvoor je de kleur wilt bepalen
+ * @param isHovered of de muis eroverheen hangt
+ * @param options  (optionele) options voor de kalender
+ * @returns  een string met de juiste kleur
+ */
+export declare function getCalendarColorClass<T extends BaseEventProps>(date: JSDateTime | Date, isHovered: boolean, options?: CalendarOptions<T>): string;

package/dist/lib/internal_functions/getPositionClass.d.ts

@@ -0,0 +1,2 @@
+import { PositionProp } from "../types";
+export declare function getPositionClass(position: PositionProp, trim?: boolean): string;

package/dist/lib/internal_functions/getSizeClass.d.ts

@@ -0,0 +1,23 @@
+import { SizeProp, TagSizeProp } from "../types";
+/**
+ * @param size the preferred size of the element
+ * @returns The appropriate Bulma class for the element size.
+ */
+export declare function getSizeClass(size: SizeProp, trim?: boolean): string;
+/**
+ *
+ * @param size icon size
+ * @returns The appropriate Font Awesome icon size.
+ */
+export declare function getFAIconSize(size: SizeProp, trim?: boolean): string;
+/**
+ * @param size - The size of the tag.
+ * @param single - Whether the tag is a single tag or a group of tags.
+ * @returns The appropriate Bulma class for the tag size.
+ */
+export declare function getTagSizeClass(size: TagSizeProp, single: boolean, trim?: boolean): string;
+/**
+ * @param size the preferred size of the element
+ * @returns The appropriate Bulma class for the element size.
+ */
+export declare function getTextSizeClass(size: SizeProp, trim?: boolean): string;

package/dist/lib/internal_functions/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Deze map bevat alleen functies voor intern gebruik.
+ */
+export * from './createIconsInternal';
+export * from './getAlignmentClass';
+export * from './getSizeClass';
+export * from './getColorClass';
+export * from './getPositionClass';

package/dist/lib/shims/useSyncExternalStoreShim.d.ts

@@ -0,0 +1 @@
+export { useSyncExternalStore } from 'react';

package/dist/lib/shims/useSyncExternalStoreWithSelector.d.ts

@@ -0,0 +1,5 @@
+type Subscribe = (onStoreChange: () => void) => () => void;
+type GetSnapshot<T> = () => T;
+type IsEqual<T> = (left: T, right: T) => boolean;
+export declare function useSyncExternalStoreWithSelector<TSnapshot, TSelection>(subscribe: Subscribe, getSnapshot: GetSnapshot<TSnapshot>, getServerSnapshot: GetSnapshot<TSnapshot> | undefined, selector: (snapshot: TSnapshot) => TSelection, isEqual?: IsEqual<TSelection>): TSelection;
+export {};

package/dist/lib/test-data.d.ts

@@ -0,0 +1,9 @@
+export declare const tableData: {
+    id: number;
+    first_name: string;
+    last_name: string;
+    email: string;
+    gender: string;
+    language: string;
+    active: boolean;
+}[];

package/dist/lib/types/index.d.ts

@@ -0,0 +1,104 @@
+/** Color scheme type  */
+export type ColorSchemeType = 'light' | 'dark';
+/**
+ * Type om een ander type beter leestbaar te maken, meer niet
+ */
+export type PrettierType<T> = {
+    [P in keyof T]: T[P];
+} & {};
+/** voor het maken van van ene partial, maar dan OOK voor nested objects */
+export type DeepPartial<T> = {
+    [P in keyof T]?: T[P] extends object ? DeepPartial<T[P]> : T[P];
+};
+/** Strict Omit, controleert ook of K wel een key van T is. */
+export type StrictOmit<T, K extends keyof T> = Omit<T, K>;
+/** wrapper voor `keyof T` */
+export type KeyOf<T> = keyof T;
+/** bepaal het type van een `Set` */
+export type TypeOfSet<T extends Set<any>> = T extends Set<infer U> ? U : never;
+/** extend een string met autocomplete opties voor de DEVELOPER
+ * @example:
+ * type Color = 'primary'|'white'|'black'|string // een string met een  aantal voorgebakken opties. De VSCode autocomplete werkt
+ * type ColorWithAutocomplete = StringWithAutocomplete<'primary'|'white'|'black'> // zelfde, maar de VSCode autocomplete werkt nu op de opgegeven waarden
+ */
+export type StringWithAutocomplete<TOptions extends string> = TOptions | (string & {});
+/**
+ * Types waar de size van een component van belang is (default is meestal Medium (`'m'`))
+ * - De `<Tag>`-component gebruikt een speciale `TagSizeProp`. Er is voor tags geen `xl`-size
+ * - In bulma bestaat `'xl'` niet. Daarom is `'l'` in bulma `'medium'` en `'xl'` in in bulma `'large'`
+ */
+export type SizeProp = 's' | 'm' | 'l' | 'xl';
+/**
+ * Type waarbij je de alignment van (meestal de content) kan instellen: (l)eft, (c)enter, (r)ight.
+ * Default is meestal left (l))
+ */
+export type AlignmentProp = 'l' | 'c' | 'r';
+/**
+ *
+ * String template literal type voor een Hex Color, gebruikt in de `ColorInput`.
+ * Kan als hex-kleur met 3 of 6 karakters worden opgegeven. Dus `#fff` of `#ffffff`.
+ */
+export type HexColor = `#${string}`;
+/**
+ * String template literal type voor een Hex Color, gebruikt in de `ColorInput`.
+ * - Tuple[0] r: red (0-255)
+ * - Tuple[1] g: green (0-255)
+ * - Tuple[2] b: blue (0-255)
+ */
+export type RGBColor = readonly [r: number, g: number, b: number, a?: number];
+/**
+ * Tuple type voor een hsl Color, gebruikt in de `ColorInput`.
+ * - Tuple[0] h: hue (0-360)
+ * - Tuple[1] s: saturation (0-100)
+ * - Tuple[2] l: lightness (0-100)
+ */
+export type HSLColor = readonly [h: number, s: number, l: number, a?: number];
+/**
+ * Type voor de bulma-kleuren: (p)rimary, (i)nfo, (s)uccess, (d)anger, (w)arning, (l)ink.
+ * Als bulma niet alleen de default kleuren gebruikt, kan je ook andere kleuren uit bulma
+ * gebruiken met een string (structuur `is-${string}`) optie.
+ */
+export type ColorProp = 'p' | 'i' | 's' | 'd' | 'w' | 'l' | 'light' | 'dark' | `is-${string}`;
+/** Type voor het instellen van de alignment van tekst: (l)eft, (c)enter, (r)ight. Default is meestal left (l)) */
+export type TextAlignmentProp = 'l' | 'c' | 'r';
+/** Positie voor items: (l)eft, (r)ight, (t)op, (b)ottom */
+export type PositionProp = 'l' | 'r' | 't' | 'b';
+/** Input modus voor virtuele toetsenborden (smartphones, tablets) */
+export type KeyboardTypeProp = 'none' | 'numeric' | 'decimal' | 'tel' | 'search' | 'url' | 'email' | 'text';
+/** Coordinaten - gebruikt voor ContextMenu */
+export type CoordinatesProp = {
+    x: number;
+    y: number;
+    z?: number;
+};
+/** Rectangle - gebruikt voor ContextMenu */
+export type RectProp = {
+    width: number;
+    height: number;
+};
+/** Tags gebruiken andere sizes dan de gewone sizes van de `SizeProp`. Er is geen `'xl'`-variant */
+export type TagSizeProp = 's' | 'm' | 'l';
+/** Direction prop voor inputs */
+export type DirectionProp = 'h' | 'horizontal' | 'v' | 'vertical';
+/** Link Relationship types */
+export type RelationshipProp = 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'prefetch' | 'prev' | 'search';
+export type AnchorTargetProp = '_blank' | '_self' | '_parent' | '_top' | string;
+export type AnchorRelProp = 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'next' | 'nofollow' | 'noreferrer' | 'noopener' | 'prev' | 'search' | 'tag' | string;
+/**
+ * Indicator positie
+ * - `tl` = `top-left`
+ * - `tr` = `top-right`
+ * - `tc` = `top-center`
+ * - `bl` = `bottom-left`
+ * - `br` = `bottom-right`
+ * - `bc` = `bottom-center`
+ * - `lc` = `left-center`
+ * - `rc` = `right-center`
+ */
+export type IndicatorPositionProp = 'tl' | 'tr' | 'tc' | 'bl' | 'br' | 'bc' | 'lc' | 'rc' | 'top-left' | 'top-right' | 'top-center' | 'bottom-left' | 'bottom-right' | 'bottom-center' | 'left-center' | 'right-center';
+/**
+ * Autocomplete-types voor bijvoorbeeld password-managers.
+ * Programma's zoals bijvoorbeeld 1Password gebruiken deze om te bepalen waar dit veld mee gevuld moet worden.
+ * **LET OP:** `off` wordt door sommige browsers genegeerd (eikels). Gebruik `nope` als je *ECHT* geen autocomplete wil.
+ * */
+export type AutoCompleteProp = 'on' | 'off' | 'nope' | 'current-password' | 'new-password' | 'username' | 'given-name' | 'additional-name' | 'family-name' | 'nickname' | 'email' | 'name' | 'one-time-code' | 'organization' | 'street-address' | 'tel' | 'url' | 'bday' | 'language' | 'country' | 'postal-code' | 'cc-name' | 'cc-number' | 'cc-exp' | 'cc-csc' | 'cc-type' | (string & {});