loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/forms/Radio/Radio.d.ts

@@ -0,0 +1,97 @@
+import { StrictOmit, DirectionProp, ColorProp } from './../../types';
+import React from 'react';
+import { InputValueType, InputStylingPropsType, InputErrorProps, InputPropsType } from '../Input';
+type RBValueType = InputValueType | {};
+type RadioGroupProps<T extends RBValueType = string> = StrictOmit<InputStylingPropsType, 'icon'> & {
+    /** id voor de container van de radio-items */ id?: string;
+    /** label bij de radio-group. Als geen label, dan wordt de `name`-property gebruikt */ label?: string;
+    /** name-property voor de input. Deze hoort bij **alle** radio-buttons in de groep */ name: string;
+    /** huidige waarde voor de radio-group. Dus de geselecteerde RadioButton */ value: T;
+    /** help-tag voor deze radio-group */ helpTag?: string | undefined;
+    /** is deze input required (default= `false`) */ required?: boolean;
+    /** Wordt er een rood sterretje bij het label getoond als een Radiogroup item required is ? (default = `false`) */ showRequiredOnLabel?: boolean;
+    /** is deze input disabled (default= `false`) */ disabled?: boolean;
+    itemsDirection?: DirectionProp;
+    children?: React.ReactNode;
+    /** foutmelding bij de input */ errorMessage?: string | ((s: InputErrorProps<T>) => string) | undefined;
+    /** info-melding bij de input */ infoMessage?: string | ((v: T) => string) | undefined;
+    /** callback voor unfocus (blur), zet OOK de input op `touched` */
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void | Promise<void>;
+    /** callback voor onChange */
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void | Promise<void>;
+    /** value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState('');
+     * return <Input value={x} onValueChange={setX} {...props} />
+     */
+    onValueChanged?: (e: T) => void | Promise<void>;
+    /** callback voor focus */
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>, helpTag?: string) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void | Promise<void>;
+};
+type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel' | 'iconRight'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
+    /** label van de Radio Button. Als niet gedefinieerd, wordt de `name`-prop gebruikt */
+    children: React.ReactNode;
+    /** de waarde van de radiobutton */
+    value: T;
+    /** callback voor value changed */
+    onValueChanged?(val: T): void | Promise<void>;
+    /** id voor de container van de radio-button-items. */
+    id?: string;
+    /** worden meerdere radiobuttons gestapeld (v) of naast elkaar weergegeven (default = `h`) */
+    itemsDirection?: DirectionProp;
+    /** `name`-prop die door alle RB-items in deze groep wordt gedeeld */
+    name: string;
+    /** is deze radio-button checked ? */
+    checked?: boolean;
+    /** kleur voor de checkbox. (default = `p`, primary) */
+    color?: ColorProp;
+};
+/** RB (**R**adio**B**utton) is een losstaande radio-button. Alles moet je daaraan zelf regelen.  Gebruik `RadioGroup` voor een groep radio-buttons met direction etc..
+ * `RB` is een wrapper voor de HTML `<input type="radio">`-element. de `name`-prop moet voor alle items in een groep hetzelfde zijn.
+ * Ook of een button `checked` is moet je zelf regelen.
+ *
+ * @param value de waarde van de radiobutton, dus de value die met `onValueChanged` naar buiten komt
+ * @param checked is deze radio-button checked  ?
+ * @param color kleur voor de checkbox. (default = `p`, primary)
+ * @param itemsDirection worden meerdere radiobuttons gestapeld (v) of naast elkaar weergegeven (default = `h`)
+ * @param name `name`-prop die door alle RB-items in deze groep **moet** wordt gedeeld
+ * @param onValueChanged value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+ *
+ * @example
+ * const [x, setX] = React.useState('');
+ * <div>
+ * ..<RB name="input-rb-2" onValueChanged={setRBItem2} value="Y" checked={RBItem2 === 'Y'}>
+ * ..  set to Y
+ * ..</RB>
+ * ..<RB name="input-rb-2" onValueChanged={setRBItem2} value="Z" checked={RBItem2 === 'Z'}>
+ * ..  set to Z
+ * ..</RB>
+ * </div>
+ */
+declare function RB<T extends RBValueType = string>({ helpTag, disabled, keyboardType, title, name, value, checked, required, spellCheck, id, autoComplete, readonly, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size: sizeProp, alignment: alignmentProp, itemsDirection: itemsDirectionProp, color, children, infoData, }: RadioInputProps<T>): import("react/jsx-runtime").JSX.Element;
+/** RadioGroup is een groep radio-buttons met direction, alignment, etc. Gebruik `RB` voor een losstaande radio-button, **dus niet `<RadioGroup.Item>` daarvoor**
+ * De RadioGroup kan je vullen met `RadioGroup.Item`-componenten, of met `RB`-componenten.
+ * @param value de geselecteerde waarde van de input
+ * @param name `name`-prop die door alle RB-items in deze groep wordt gedeeld
+ * @param onValueChanged callback voor value changed
+ * @param itemsDirection worden meerdere radiobuttons gestapeld (v) of naast elkaar weergegeven (default = `h`)
+ * @example
+ * const [RBItem2, setRBItem2] = React.useState('Y');
+ * <RadioGroup name="input-rb-2" onValueChanged={setRBItem2} value={RBItem2} itemsDirection="v">
+ * ..<RB value="Y">set to Y</RB>
+ * ..<RB value="Z">set to Z</RB>
+ * </RadioGroup>
+ */
+declare function RadioGroup<T extends RBValueType = string>({ children: childrenProp, id: _id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size: sizeProp, direction: directionProp, itemsDirection: itemsDirectionProp, alignment: alignmentProp, errorMessage, infoMessage, infoData, helpTag, color, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace RadioGroup {
+    var Item: typeof SpecialRadioItem;
+}
+declare function SpecialRadioItem<T extends RBValueType = string>({ checked, id, value, children, ...props }: {
+    children?: React.ReactNode;
+} & StrictOmit<RadioInputProps<T>, 'name'>): import("react/jsx-runtime").JSX.Element;
+export { RadioGroup, RB };
+export type { RadioInputProps, RadioGroupProps };

package/dist/lib/forms/Select/Select.d.ts

@@ -0,0 +1,136 @@
+import { StrictOmit } from './../../types';
+import React from 'react';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'iconRight' | 'inputRef' | 'value' | 'onValueChanged' | 'onBlur' | 'onFocus' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max' | 'readonly' | 'pattern' | 'placeholder'> & InputStylingPropsType & {
+    /** De waarde van de select
+     * - bij `multiple` is dit een array van strings
+     * - bij `gewoon` is dit een string (defsault)
+     * Om het type te setten:
+     * @example <Select<string[]> value={x} onValueChanged={setX} />
+     * @example <Select<string> value={x} onValueChanged={setX} /> // string
+     * @example <Select value={x} onValueChanged={setX} /> // string is default
+     */
+    value?: T;
+    /**
+     * moeten er meerdere opties selecteerbaar zijn (default = `false`)
+     * - `false`: Gewone select, 1 optie selecteerbaar in een dropdown
+     * - `number`: Meerdere opties selecteerbaar in een lijst van 'X' hoog.
+     */
+    multiple?: false | number;
+    /**
+     * Moeten de items gegroupeerd wewergegeven worden (voor als de `options`-prop een array van objecten is met een `group`-property)
+     */
+    grouped?: boolean;
+    useCssArrow?: boolean;
+    iconOpen?: IconProp | undefined;
+    iconClosed?: IconProp | undefined;
+    /** De opties van de select. Kan een array van strings zijn, of een array van objecten met een `value`-property en een `label`-property.
+     * - `string`: is het label EN de value van de `<Select.Option>`
+     * - `object`: Een object met de volgende properties
+     *    - `label`: Het label, (optioneel, default = `value`)
+     *    - `value`: De value (REQUIRED)
+     *    - `disabled`: Is deze disabled? (optioneel, default = `false`)
+     *    - `group`: De groep, voor als `grouping` aan staat (optioneel, default = `''`)
+     * */
+    options?: Array<string> | Array<number> | Array<{
+        label?: string;
+        value: string | number;
+        disabled?: boolean;
+        group?: string;
+    }>;
+    /**
+     * Je kan ook gewoon een lijst van `<Select.Option>`-elementen meegeven als children.
+     *
+     * **Ondersteund zijn:**
+     * - `<Select.Option>`
+     * - `<Select.OptGroup>`
+     * - `<Select.Option>`
+     * - `<optgroup>`
+     */
+    children?: React.ReactNode;
+    /** referentie naar het `<select>`-element */
+    inputRef?: React.Ref<HTMLSelectElement>;
+    /** value-changed callback met de nieuwe waarde van de input. Kan direct met de `setX()` van `const [x, setX] = React.useState()` worden gebruikt
+     * @example
+     * const [x, setX] = React.useState('');
+     * return <Input value={x} onValueChange={setX} {...props} />
+     */
+    onValueChanged?: (e: T) => void | Promise<void>;
+    /** callback voor unfocus (blur), zet OOK de input op `touched` */
+    onBlur?: (e: React.FocusEvent<HTMLSelectElement>) => void | Promise<void>;
+    /** callback voor onChange */
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void | Promise<void>;
+    /** callback voor focus */
+    onFocus?: (e: React.FocusEvent<HTMLSelectElement>, helpTag?: string) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyDown?: (e: React.KeyboardEvent<HTMLSelectElement>) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyUp?: (e: React.KeyboardEvent<HTMLSelectElement>) => void | Promise<void>;
+};
+/**
+ * Select input component (single of multiple). Kan via de `options`-prop, maar ook via `children` worden opgebouwd. Dat gaat met `<Select.Option>` en `<Select.OptGroup>` kan je de opties opbouwen. Dat kan ook gewoon met `<option>` en `<optgroup>`.
+ * @message **LET OP:** *`options` en `children` mengen ?* De children worden als eerste getoond. Zo kan je een van de children als `placeholder` gebruiken.
+ * @param value De waarde van de select. Bij `multiple` is dit een array van strings. Bij `gewoon` is dit een string (default)
+ * @param multiple  moeten er meerdere opties selecteerbaar zijn (default = `false`).
+ * - `false`: Gewone select, 1 optie selecteerbaar in een dropdown.
+ * - `number`: Meerdere opties selecteerbaar in een lijst van 'X' hoog.
+ * @param grouped  Moeten de items gegroupeerd weergegeven worden (voor als de `options`-prop een array van objecten is met een `group`-property)
+ * @param options  De opties van de select. Kan een array van strings zijn, of een array van objecten met een `value`-property en een `label`-property.
+ * - `string`: is het label EN de value van de `<Select.Option>`
+ * - `object`: Een object met de volgende properties:
+ * -  - `label`: Het label, (optioneel, default = `value`),
+ * -  - `value`: De value (REQUIRED),
+ * -  - `disabled`: Is deze disabled? (optioneel, default = `false`),
+ * -  - `group`: De groep, voor als `grouping` aan staat (optioneel, default = `''`),
+ * @param children  Je kan ook gewoon een lijst van `<Select.Option>`-elementen meegeven als children. Deze worden gerendered **voor** de waardes in `options`. Dus hier kan je een placeholder mee maken.
+ * @example //type is een string
+ * const [x, setX] = React.useState<string>('');
+ * <Select value={x} onValueChanged={setX} options={[...]}/>
+ * @example  // multiple geeft een array
+ * const [x, setX] = React.useState<string[]>([]);
+ * <Select<string[]> value={x} onValueChanged={setX} multiple={3} options={[...]}/>
+ * @example  // single geeft een string, ook default is het een string
+ * const [x, setX] = React.useState<string>('');
+ * <Select<string> value={x} onValueChanged={setX} options={[...]}/>
+ *@example // met options en children
+ * const [x, setX] = React.useState<string>('');
+ * <Select value={x} onValueChanged={setX} options={['1', '2']}>
+ * .. <Select.Option value="3">3</Select.Option>
+ * .. <Select.Option value="4">4</Select.Option>
+ * </Select>
+ * @example // met children
+ * const [x, setX] = React.useState<string>('');
+ * <Select value={x} onValueChanged={setX}>
+ *  .. <Select.Option value="1">1</Select.Option>
+ *  .. <Select.Option value="2">2</Select.Option>
+ * </Select>
+ * @example // met children en optgroups
+ * const [x, setX] = React.useState<string>('');
+ * <Select value={x} onValueChanged={setX}>
+ * ..<Select.OptGroup label="groep 1">
+ * .. ..<Select.Option value="1">1</Select.Option>
+ * .. ..<Select.Option value="2">2</Select.Option>
+ * ..</Select.OptGroup>
+ * </Select>
+ */
+declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment: alignmentProp, size: sizeProp, direction: directionProp, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, iconOpen, iconClosed, infoData, useCssArrow, color, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): import("react/jsx-runtime").JSX.Element;
+declare namespace Select {
+    var Option: ({ value, disabled, id, children }: {
+        id?: string;
+        value?: number | string;
+        disabled?: boolean;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var OptGroup: ({ label, children, disabled }: {
+        label: string;
+        disabled?: boolean;
+        children: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Divider: ({ dividerChar, repeat }: {
+        dividerChar?: string;
+        repeat?: number;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export { Select };
+export type { SelectInputProps };

package/dist/lib/forms/TagsInput/TagsInput.d.ts

@@ -0,0 +1,44 @@
+import { StrictOmit, ColorProp } from './../../types';
+import { InputPropsType, InputStylingPropsType, InputErrorProps } from '../Input';
+type TagsInputProps = StrictOmit<InputPropsType<string[]>, 'type' | 'step' | 'onChange' | 'value' | 'onValueChanged' | 'max' | 'min' | 'inputRef' | 'errorMessage'> & StrictOmit<InputStylingPropsType, 'color'> & {
+    /** de values (dus de tags) van het input field */
+    value?: string[] | undefined;
+    /** mogen tags meerdere keren voorkomen (2 tags met dezelfde tekst). default = `false` */
+    allowDuplicates?: boolean;
+    /** mogen tags niet verwijderd worden? (default = false) */
+    disableRemove?: boolean;
+    /** welke kleur moeten de tags worden (default = `'p'`). Dit zijn de gewone Color Props, maar kan ook op `random` gezet worden.
+     * Dan wordt een willekeurge kleur van de tag colors gekozen
+     * */
+    color?: ColorProp | 'random';
+    /** lijst van kleuren om te gebruiken bij random colors */
+    randomColors?: Array<ColorProp | `#${string}`>;
+    /** value changed callback */
+    onValueChanged?: (v: string[]) => void | Promise<void>;
+    /** max length van de tag-tekst */
+    maxLength?: number;
+    /** min length van de tag-tekst */
+    minLength?: number;
+    /** maximaal aantal tags */
+    maxTags?: number;
+    /** foutmelding bij de input */
+    errorMessage?: string | ((s: InputErrorProps<string[]>) => string);
+};
+/**
+ * Tags Input component, je kan meerdere tags intypen, die dan onder de input verschijnen als tags. Je kan ze verwijderen door op het kruisje te klikken.
+ * De `onValueChanged`-callback geeft een array van strings van de tags.
+ * @example // zonder beginwaarden
+ * <Section>
+ *   <TagsInput name="Tag Input" value={value} onValueChanged={setValue} direction={direction} size={size} />
+ *   <HelpTxt>De tags zijn: {value.join(', ')}</HelpTxt>
+ * </Section>
+ * @example // met beginwaarden en random colors
+ * <Section>
+ *   <TagsInput name="Tag Input met value" value={value2} onValueChanged={setValue2} color="random" direction={direction} size={size} />
+ *   <HelpTxt>De tags zijn: {value2.join(', ')}</HelpTxt>
+ * </Section>
+ * @returns
+ */
+declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction: directionProp, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size: sizeProp, alignment: alignmentProp, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, iconRight, title, className: extraClasses, styles, randomColors, maxTags, infoData, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): import("react/jsx-runtime").JSX.Element;
+export { TagsInput };
+export type { TagsInputProps };

package/dist/lib/forms/Text/EmailInput.d.ts

@@ -0,0 +1,14 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type EmailInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
+    pattern?: string;
+};
+/**
+ * Een input voor een e-mailadres. Deze input heeft een default `pattern` voor validatie op form-verzending. Deze kan worden overschreven. Ook wordt de autocomplete op `email` gezet.
+ * @example <EmailInput name="email" value={email} onValueChanged={setEmail} pattern="/^@ \t\r\n]+@[^@ \t\r\n]+.[^@ \t\r\n]+/" />
+ * @param pattern het pattern voor validatie, (default = `/^@ \t\r\n]+@[^@ \t\r\n]+.[^@ \t\r\n]+/`)
+ * @param autoComplete de autocomplete type (password managers) (default = `email`)
+ */
+declare function EmailInput({ value, icon, pattern, autoComplete, onValueChanged, ...props }: EmailInputProps): import("react/jsx-runtime").JSX.Element;
+export { EmailInput };
+export type { EmailInputProps };

package/dist/lib/forms/Text/FormattedInput.d.ts

@@ -0,0 +1,54 @@
+import { InputPropsType, InputStylingPropsType } from '../Input';
+import { StrictOmit } from './../../types';
+type FormattedInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'inputRef'> & InputStylingPropsType & {
+    /**
+     * De groepen bij de input, kan een string zijn, een nummer of een array van nummers
+     * - `string`: de groepen worden bepaald door de string, de groepen worden gescheiden door de divider
+     * - `nummer`: de groepen worden bepaald door het aantal karakters per groep, de groepen worden gescheiden door de divider
+     * - `number[]`: de groepen worden bepaald door de nummers in de array, de groepen worden gescheiden door de divider. De nummers in de array worden herhaald totdat de `value` eindigd.
+     */
+    groupBy?: string | number | number[] | undefined;
+    /** Het teken dat tussen de groepen moet komen */
+    divider?: string | undefined;
+    /** Bepaal de casing van de formatter: default is `ignore`
+     * - `uppercase`: wordt de waarde omgezet naar hoofdletters.
+     * - `lowercase`: wordt de waarde omgezet naar kleine letters.
+     * - `capitalize`: wordt de eerste letter van elk woord een hoofdletter.
+     * - `default` of `ignore`: wordt de waarde niet aangepast. Dit is de default
+     *
+     */
+    casing?: 'uppercase' | 'upper' | 'lowercase' | 'lower' | 'default' | 'ignore' | 'capitalize';
+    /** Functie die de geformatteerde waarde nog verder kan aanpassen als het grouperen van de karakters gebeurd is. */
+    onFormat?: (v: string) => string;
+};
+/**
+ * Een input die de waarde formatteert op basis van de groepen die je meegeeft. De groepen kan je opgeven met een voorbeeldstring, een nummer (aantal chars per groep) of een array van nummers (aantal chars per groep)
+ * @param groupBy - De groepen waarin de waarde moet worden verdeeld. Groepen kan je opgeven met een voorbeeldstring, een nummer (aantal chars per groep) of een array van nummers (aantal chars per groep)
+ * @param divider - Het teken dat tussen de groepen moet komen
+ * @param casing - regel wat de casing van de waarde moet zijn.
+ * -  `uppercase`: wordt de waarde omgezet naar hoofdletters.
+ * - `lowercase`: wordt de waarde omgezet naar kleine letters.
+ * - `capitalize`: wordt de eerste letter van elk woord een hoofdletter.
+ * - `ignore`: wordt de waarde niet aangepast. Dit is de default
+ * @param onFormat - Functie die de geformatteerde waarde nog verder kan aanpassen als het grouperen van de karakters gebeurd is.
+ * @example export function VB() {
+ *  let [v, setV] = React.useState('nl29INGB1234567890');
+ *
+ *  const onFormat = (v) => v.toLowerCase().replaceAll(' ', '_');
+ *  return (
+ *    <>
+ *      // NL29 INGB 1234 5678 90
+ *      <FormattedInput name="numeric" value={v} groupBy={4} divider=" " onValueChanged={setV} />
+ *      // nl 29 ingb 1234 5678 90
+ *      <FormattedInput name="num-array" value={v} groupBy={[2, 2, 4]} divider=" " onValueChanged={setV} casing='lower' />
+ *      // NL29 INGB 1234 5678 90
+ *      <FormattedInput name="with-string" value={v} groupBy="NL00 ASNB 4444 3333" divider=" " onValueChanged={setV} casing='uppercase' />
+ *      // Nl29 ingb 1234 5678 90
+ *      <FormattedInput name="with-string" value={v} groupBy={5} divider=" " onValueChanged={setV} casing='capitalize' />
+ *    </>
+ *  );
+ *}
+ */
+declare function FormattedInput({ placeholder, helpTag, errorMessage, infoMessage, disabled, title, required, showRequiredOnLabel, spellCheck, autoComplete, max, min, readonly, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, size: sizeProp, alignment: alignmentProp, direction: directionProp, iconRight, labelHidden, loading, value, icon, groupBy, divider, name, label, id, color, casing, onValueChanged, onFormat, }: FormattedInputProps): import("react/jsx-runtime").JSX.Element;
+export { FormattedInput };
+export type { FormattedInputProps };

package/dist/lib/forms/Text/PasswordInput.d.ts

@@ -0,0 +1,19 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type PasswordInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
+    revealPasswordAllowed?: boolean;
+    revealPasswordMsg?: string;
+    iconRevealed?: IconProp | string;
+};
+/**
+ * Input voor een wachtwoord. Het type is al op wachtwoord gezet, en autocomplete op 'current-password'. Dat is voor password managers.
+ * @example <PasswordInput name="wachtwoord" value={pw} onValueChanged={setPw}  />
+ * @param autocomplete speciaal voor password managers. Wat is de functie van deze input. Default is `current-password`
+ * @param revealPasswordAllowed mag de toon-ww checkbox getoond worden? Default is `false`
+ * @param revealPasswordMsg boodschap bij de checkbox. Default is `Toon wachtwoord`
+ * @param iconRevealed icon voor ww revealed. Default is `faEye`
+ */
+declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, loading, showRequiredOnLabel, labelHidden, size: sizeProp, direction: directionProp, revealPasswordAllowed, disabled, readonly, iconRight, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): import("react/jsx-runtime").JSX.Element;
+export { PasswordInput };
+export type { PasswordInputProps };

package/dist/lib/forms/Text/TextArea.d.ts

@@ -0,0 +1,31 @@
+import { StrictOmit } from './../../types';
+import React from 'react';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'keyboardType' | 'step' | 'pattern' | 'onBlur' | 'onChange' | 'onFocus' | 'onKeyDown' | 'onKeyUp' | 'iconRight'> & StrictOmit<InputStylingPropsType, 'icon'> & {
+    /** (optionele) `ref` voor gebruik met `React.useRef<HTMLTextAreaElement>` */
+    inputRef?: React.RefObject<HTMLTextAreaElement>;
+    /** aantal rijen voor de textarea */ rows?: number;
+    /** aantal kolommen voor de textarea.
+     * **werkt niet in Bulma! de breedte is altijd maximaal!**
+     */ cols?: number;
+    /** callback voor onChange. Voor de echte waarde, gebruik je `onValueChanged` */
+    onChange?: (val: React.ChangeEvent<HTMLTextAreaElement>) => void | Promise<void>;
+    /** callback voor unfocus (blur), zet OOK de input op `touched` */
+    onBlur?: (val: React.FocusEvent<HTMLTextAreaElement>) => void | Promise<void>;
+    /** callback voor focus, MET daarbij de helptag */
+    onFocus?: (val: React.FocusEvent<HTMLTextAreaElement>, ht?: string) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyDown?: (val: React.KeyboardEvent<HTMLTextAreaElement>) => void | Promise<void>;
+    /** callback voor typen */
+    onKeyUp?: (val: React.KeyboardEvent<HTMLTextAreaElement>) => void | Promise<void>;
+};
+/**
+ * Een textarea input met Bulma styling. De textarea kan een label hebben en een help tag.
+ * De callbacks maken allemaal gebruik van het HTMLTextAreaElement type.
+ * @example <TextArea label="Type wat" value={txt} onValueChanged={setTxt} />
+ * @param rows aantal rijen voor de textarea (default: 4)
+ * @param cols aantal kolommen voor de textarea. **werkt niet in Bulma! de breedte is altijd maximaal!**
+ */
+declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size: sizeProp, alignment: alignmentProp, direction: directionProp, cols, rows, labelHidden, loading, infoData, color, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): import("react/jsx-runtime").JSX.Element;
+export { TextArea };
+export type { TextAreaProps };

package/dist/lib/forms/Text/TextEditor.d.ts

@@ -0,0 +1,36 @@
+import { JSONContent } from '@tiptap/react';
+import { SizeProp } from './../../types';
+type TextEditorPropsType = {
+    content?: string;
+    /** De tag-selector (headers of paragraaf) verbergen? */ hideTagSelector?: boolean;
+    /** De highlight-kleur-selectie voor tekst verbergen? */ hideHighlightColor?: boolean;
+    /** De tekst-kleur-selectie verbergen? */ hideFontColor?: boolean;
+    /** De alignment-opties verbergen? */ hideAlignment?: boolean;
+    /** De list-opties verbergen? */ hideLists?: boolean;
+    /** NewLine en Lijn verbergen? */ hideLines?: boolean;
+    /** De undo- en redo-opties verbergen? */ hideUndoRedo?: boolean;
+    /** De tabel-opties verbergen? */ hideTables?: boolean;
+    /** ID voor de editor, gebruiken als je meerdere editors op 1 pagina hebt. */ id?: string;
+    /** Help-tag voor de editor */ helpTag?: string;
+    /**  */ /**  */ /** De Bold-, Italic-, Underline-, Strikethrough-, Subscript- en Supersscript-opties verbergen? */ hideFontStyling?: boolean;
+    /** Converteer ingetypte links automatisch naar anchor-tags? `<a href="..." target="_blank">` */ autoUrlConversion?: boolean;
+    /** grootte van de knoppen, default = ''s */ size?: SizeProp;
+    /** html-content callback */ onChangeHtml?: (content: string) => void;
+    /** platte text-content callback */ onChangeText?: (content: string) => void;
+    /** json-object-callback */ onChangeJson?: (content: JSONContent) => void;
+};
+/**
+ * Een Rich Text Editor, dus een uitgebreide vorm van een `<textarea>`, want je kan dingen **bold**, *italic*, enz. maken.
+ * De output is in HTML-vorm of in JSON-vorm.  Je kan er ook gewoon platte tekst uitkrijgen, maar dan vervalt de opmaak.
+ * @url https://tiptap.dev/ voor de documentatie van hoe deze component in elkaar steekt.
+ * @returns een component voor het maken van rich text met HTML of JSON output
+ * @description
+ * | prop         | type                       | uitleg                  |
+ * |--------------|----------------------------|-------------------------|
+ * | content      | `string`                   | de inhoud van de editor |
+ * | onChangeHtml | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als HTML meegegeven. |
+ * | onChangeText | `(c: string) => void`      | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als platte tekst meegegeven. |
+ * | onChangeJson | `(c: JSONContent) => void` | een callback die wordt aangeroepen als de inhoud van de editor verandert. De inhoud wordt dan als JSON meegegeven. |
+ */
+export declare function TextEditor({ content, hideTagSelector, hideAlignment, hideLists, hideLines, hideFontColor, hideHighlightColor, hideUndoRedo, hideFontStyling, hideTables, autoUrlConversion, size, id: editorID, onChangeHtml, onChangeText, onChangeJson, }: TextEditorPropsType): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/forms/Text/TextInput.d.ts

@@ -0,0 +1,30 @@
+import { StrictOmit } from './../../types';
+import { InputPropsType, InputStylingPropsType } from '../Input';
+type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | (string & {}) | RegExp;
+type TextInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
+    pattern?: string;
+    /** Toegestane karakters in de input
+     * - `undefined`: alle karakters toegestaan
+     * - `string`: string met alle toegestane karakters
+     * - `0-9`: alleen numeriek
+     * - `a-z`: alleen lowercase letters. Uppercase maken we lowercase
+     * - `A-Z`: alleen uppercase letters. lowercase maken we uppercase
+     * - `a-Z`: alleen lowercase en uppercase letters
+     * - `0-Z`: lowercase, uppercase & numeriek
+     * - `RegExp`: geef een regex op met alle toegestande karakters om **NIET** te replacen
+     */
+    characters?: CharType;
+};
+/** Een text input component, met optionele toegetsande karakters en een patroon voor de input.
+ * @param characters Toegestane karakters in de input
+ * @example // met `characters` kan je vertellen welke karakters zijn toegestaan.
+ * <TextInput characters="0-9" /> // alleen numeriek
+ * <TextInput characters="a-z" /> // alleen lowercase letters
+ * <TextInput characters="A-Z" /> // alleen uppercase letters
+ * <TextInput characters="a-Z" /> // lowercase en uppercase letters
+ * <TextInput characters="0-Z" /> // lowercase, uppercase & numeriek
+ * <TextInput characters={rgx} /> // replace alle karakters die niet in de regex zitten
+ */
+declare function TextInput({ value, characters, icon, onValueChanged, ...props }: TextInputProps): import("react/jsx-runtime").JSX.Element;
+export { TextInput };
+export type { TextInputProps };

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

@@ -0,0 +1,8 @@
+import React from 'react';
+/** Voor gebruik met inputs waarbij je ene bewerking doet en de positie van de cursor wilt onthouden. */
+export declare function useCaretPosition<T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement>(): {
+    start: number;
+    end: number;
+    ref: React.RefObject<T | null>;
+    updateCaret: (diff?: number) => void;
+};

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

@@ -0,0 +1,15 @@
+import React from 'react';
+/**
+ * Gebruikt om clicks en touches buiten een element te detecteren. Bijvoorbeeld bij de `QuickView` en de `Modal componenten`. Daar KAN hij gebruikt worden via de `itemRef`-prop.
+ * @param handler de callback voor de outside-click
+ * @param events optionele list van events die een outside-click definieren
+ * @param nodes optionele list van nodes die genegeerd moeten worden
+ * @returns de ref naar het element
+ * @example
+ * const ref = useClickOutside(() => console.log('clicked outside'));
+ * return <div ref={ref}>...</div>
+ * @example
+ * const ref = useClickOutside(() => console.log('clicked outside'), ['mousedown']);
+ * return <QuickView itemRef={ref}>...</QuickView>
+ */
+export declare function useClickOutside<T extends HTMLElement = any>(handler: () => void, events?: string[] | null, nodes?: (HTMLElement | null)[]): React.RefObject<T | null>;

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

@@ -0,0 +1,21 @@
+type CopyType = {
+    /**
+    * Kopieer een waarde naar het clipboard, om die daarna ergens te kunnen plakken.
+    * @param valueToCopy De waarde omte copy-pasten
+    */
+    copy: (valueToCopy: any) => void;
+    /** Clear de time-out en reset "copied" naar "false" */
+    reset: () => void;
+    /** Als er bij het kopiëren iets mis gaat, is de error != null */
+    error: Error | null;
+    /** Is de waarde gekopieerd? Is "true" als een item gekopieerd is, totdat reset() wordt aangeroepen of de timeout over is */
+    copied: boolean;
+};
+/**
+ * Hook om een waarde naar de navigator.clipboard te kopiëren en die daarna ergens te plakken.
+ * @param timeout timeout in ms voordat de copy-reset gebeurt (default = 2000)
+ * @returns een object met de functies copy() en reset(), een boolean copied en een error
+ * @example const { copy, reset, copied, error } = useClipboard();
+ */
+declare function useClipboard(timeout?: number): CopyType;
+export { useClipboard };

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

@@ -0,0 +1,29 @@
+import React from 'react';
+/**
+ * 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.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.RefObject<HTMLElement | null> | null;
+    children: React.ReactNode | (() => React.ReactNode);
+}): import("react/jsx-runtime").JSX.Element;
+export { useContextMenu, useContextMenu as useRightClick, ContextMenu, ContextMenu as RightClickMenu };

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

@@ -0,0 +1,37 @@
+type UseCookieStoredStateFn<T = string> = {
+    /** Key to store the value with in Local Storage */
+    key: string;
+    /** Initial value (if its non-existent in Local 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;
+    /** expiration date voor cookie */
+    expires?: Date | string;
+};
+/**
+ * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in een Cookie.
+ * 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.
+ * @param {UseCookieStoredStateFn} 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 een cookie 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 { useCookieStoredState } from 'loon-bulma-react';
+ * const [ value, setValue, remove ] = useCookieStoredState({ 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 Cookies in devtools.
+ * // 6. close the browser / tab
+ * // 7. check the value in cookie storage. it should still be there.
+ */
+declare function useCookieStoredState<T extends unknown>({ key, initialValue, expires, deserialize, serialize, }: UseCookieStoredStateFn<T>): readonly [T, (value: T) => void, () => void];
+export { useCookieStoredState };