loon-bulma-react 2026.0.39 → 2026.0.41

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

@@ -0,0 +1,85 @@
+/**
+ * Debounce-hook voor een externe value (bijv. prop of state van elders).
+ * Neemt een externe waarde en retourneert een debounced versie ervan.
+ * Handig voor zware operaties zoals zoeken in een lijst, waarbij je de oorspronkelijke
+ * waarde nog steeds direct nodig hebt.
+ * @example
+ * const [value, setValue] = React.useState('');
+ * const [debouncedValue, cancel] = useDebouncedValue(value, { delay: 1000 });
+ * return <TextInput
+ *   label="Typ hier om de debounced waarde te zien"
+ *   value={value}  // Directe toegang tot originele waarde
+ *   onChange={setValue}
+ * />
+ * <p>Originele waarde: {value}</p>
+ * <p>Debounced waarde: {debouncedValue}</p>
+ * @description Belangrijkste verschillen met `useDebouncedState`:
+ * - Neemt externe waarde als input (geen eigen state management)
+ * - Geeft toegang tot zowel originele als debounced 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
+ * - Kortere standaard delay (300ms vs 500ms)
+ * @param valueParam de externe waarde die gedebounced moet worden
+ * @param options extra opties
+ * - leading: Direct updaten bij eerste wijziging (Default: false)
+ * - delay: Vertraging in ms voor het updaten van de debounced waarde (Default: 300ms)
+ * @returns [debouncedValue, cancelFunction] - de debounced waarde en een annuleer-functie
+ */
+export declare function useDebouncedValue<T = unknown>(valueParam: T, options?: {
+    leading?: boolean;
+    delay?: number;
+}): readonly [T, () => void];
+/**
+ * Debounce-hook die zijn eigen interne state beheert.
+ * Creëert en beheert een debounced state waarde met bijbehorende setter functie.
+ * Handig voor formulieren waar je niet wilt dat elke toetsaanslag een re-render veroorzaakt.
+ * @param defaultValue de standaard waarde voor de debounced state
+ * @param options extra opties
+ * - `leading`: Direct updaten bij eerste wijziging (Default: false)
+ * - `delay`: Vertraging in ms voor het updaten van de debounced waarde (Default: 500ms)
+ * - `onDebouncedChange`: Callback die wordt aangeroepen bij wijzigingen van debounced waarde (niet bij initiële waarde) Wordt ook overgeslagen bij `setSilent`
+ * @returns [immediateValue, debouncedValue, setValue, setSilent] - directe waarde, debounced waarde, normale setter en stille setter
+ * - `immediateValue`: De directe waarde die onmiddellijk wordt bijgewerkt bij elke aanroep van `setValue`. (gebruik in input)
+ * - `debouncedValue`: De debounced waarde die wordt bijgewerkt na de opgegeven vertraging. (dat is dus de debounced waarde)
+ * - `setValue(newValue)`: Stelt zowel de directe als de debounced waarde in met een vertraging. (gebruik in formulieren)
+ * - `setSilent(newValue)`: Stelt zowel de directe als de debounced waarde onmiddellijk in zonder vertraging en zonder het aanroepen van de onDebouncedChange callback.
+ * @example
+ * const [immediateValue, debouncedValue, setValue, setSilent] = useDebouncedState('', {
+ *   delay: 1000,
+ *   onDebouncedChange: (value) => {
+ *     // Dit wordt alleen aangeroepen bij echte wijzigingen, niet bij eerste render
+ *     console.log('Debounced waarde veranderd naar:', value);
+ *     searchAPI(value);
+ *   }
+ * });
+ *
+ * // Voor gebruikersinput (triggert onChange)
+ * const handleUserInput = (e) => setValue(e.target.value);
+ *
+ * // Voor programmatische updates (triggert NIET de  onDebouncedChange)
+ * const handleApiResponse = (data) => setSilent(data.defaultValue);
+ *
+ * return <TextInput
+ *   label="Typ hier om de debounced state te zien"
+ *   value={immediateValue}  // Toon directe input voor responsive UI
+ *   onChange={handleUserInput}     // Direct de debounced setter gebruiken
+ * />
+ * <p>Je typt: {immediateValue}</p>
+ * <p>Debounced waarde: {debouncedValue}</p>
+ * @description Belangrijkste verschillen met `useDebouncedValue`:
+ * - Beheert eigen interne state (geen externe waarde nodig)
+ * - Geeft nu toegang tot zowel directe als debounced waarde
+ * - Geen cancel-functie beschikbaar
+ * - Gebruikt voor controlled inputs met directe feedback
+ * - Werkt alleen met interne useState, niet met externe state providers
+ * - Langere standaard delay (500ms vs 300ms)
+ * - Eenvoudigere API dan useDebouncedValue
+ * - Optionele onChange callback voor side-effects
+ * - setSilent functie voor programmatische updates zonder onChange
+ */
+export declare function useDebouncedState<T = unknown>(defaultValue: T, options?: {
+    leading?: boolean;
+    delay?: number;
+    onDebouncedChange?: (value: T) => void;
+}): readonly [T, T, (newValue: T) => void, (newValue: T) => void];

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

@@ -0,0 +1,65 @@
+type LoonResponseType = '=OK' | `=${string}` | `*${string}` | string;
+type FetchAPIWrapper = {
+    /** fetch-wrapper voor ophalen van een status of iets dergelijks. Resulteert in 2 mogelijkheden: `=...` voor een GOEDE afhandeling of `*...` voor een foute afhandeling. De puntjes bevatten dan een goed-code of fout-code
+     * @param url de url waarvandaan gefetched moet worden
+     * @throws een error met de status en statusText van de response
+     * @returns {`=${string}` | `*${string}`} promise met het resultaat `=...` of `*...`
+    */
+    ftch({ url, init }: {
+        url: string;
+        init?: RequestInit;
+    }): Promise<LoonResponseType>;
+    /** typed fetch-wrapper voor een GET-request. De deserializer is optioneel, default wordt de function genaamd `deserializeJSON` gebruikt
+    * @param url de url waarvandaan gefetched moet worden
+    * @param deserializer de deserializer die de string omzet naar een object. Default is `deserializeJSON`
+    * @throws een error met de status en statusText van de response
+    * @returns promise met het resultaat `T`
+    */
+    get<T = unknown>({ url, deserializer }: {
+        url: string;
+        deserializer?: ((v: string) => T);
+    }): Promise<T>;
+    /** typed fetch-wrapper voor een POST-request. De `serializer` is optioneel voor de body, default wordt de function genaamd `serializeJSON` gebruikt
+     * @param url de url waarheen gePOST moet worden
+     * @param body de body die gePOST moet worden (niet serialized). De body MOET een `token`-property bevatten.
+     * @param headers de headers die gePOST moeten worden. Default is `{'Content-Type': 'application/json'}`
+     * @param serializer de serializer voor de body. Default is `serializeJSON<T>()`
+     * @throws een error met de status en statusText van de response
+     * @returns het resultaat
+    */
+    post<B = {
+        token: string;
+    }>({ url, body, headers, serializer }: {
+        url: string;
+        body: B;
+        headers?: HeadersInit | undefined;
+        serializer?: (v: B) => string;
+    }): Promise<string>;
+    /** typed fetch-wrapper voor een PUT-request. De serializer is optioneel voor de body, default wordt de function genaamd `serializeJSON` gebruikt
+     * @param url de url waarheen gePUT moet worden
+     * @param body de body die gePUT moet worden (niet serialized). De body MOET een `token`-property bevatten.
+     * @param headers de headers die gePUT moeten worden. Default is `{'Content-Type': 'application/json'}`
+     * @param serializer de serializer voor de body. Default is `serializeJSON<T>()`
+     * @throws een error met de status en statusText van de response
+     * @returns het resultaat
+    */
+    put<B = {
+        token: string;
+    }>({ url, body, headers, serializer }: {
+        url: string;
+        body: B;
+        headers?: HeadersInit | undefined;
+        serializer?: (v: B) => string;
+    }): Promise<string>;
+    /**
+     * fetch-wrapper voor een DELETE-request
+     * @param url de url voor de delete-request
+     * @throws een error met de status en statusText van de response
+     * @returns het resultaat
+     */
+    del: ({ url }: {
+        url: string;
+    }) => Promise<string>;
+};
+export declare function useFetchAPI(): FetchAPIWrapper;
+export {};

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

@@ -0,0 +1,96 @@
+import React from 'react';
+type KeyboardModifiers = {
+    alt: boolean;
+    ctrl: boolean;
+    meta: boolean;
+    /** Cross-platform modifier: Cmd (meta) op macOS, Ctrl op Windows/Linux. Gebruik dit voor shortcuts zoals 'save' (mod+s) */
+    mod: boolean;
+    shift: boolean;
+};
+export type Hotkey = KeyboardModifiers & {
+    key?: string;
+};
+type CheckHotkeyMatch = (event: KeyboardEvent) => boolean;
+export type HotkeyOptions = {
+    /** Sta de standaard browser actie toe (bijv. ctrl+s opslaan). Standaard: false (browser actie wordt voorkomen) */
+    allowBrowserDefault?: boolean;
+    /** Sta toe dat eerdere hotkey handlers ook afvuren. Standaard: false (alleen deze handler wordt uitgevoerd) */
+    allowPropagation?: boolean;
+};
+type ReactHotkeyItem = readonly [string, (event: React.KeyboardEvent<HTMLElement>) => void, HotkeyOptions?];
+export type HotkeyItem = readonly [string, (event: KeyboardEvent) => void, HotkeyOptions?];
+/** Parse een key-combi naar een Hotkey object */
+export declare function parseHotkey(hotkey: string): Hotkey;
+/** Vergelijk hotkeys */
+export declare function isExactHotkey(hotkey: Hotkey, event: KeyboardEvent): boolean;
+/** Match hotkeys */
+export declare function getHotkeyMatcher(hotkey: string): CheckHotkeyMatch;
+/**
+ * `getHotkeyHandler` kan bijvoorbeeld op een `onKeyDown()` handler gebruikt worden. Om bijvoorbeeld hotkeys aan inputs toe te voegen
+ * @param hotkeys een array van keyboard-combinaties met een handler.
+ * @example
+ * <input type="text" onKeyDown={getHotkeyHandler(['alt+shift+l'])} />
+ */
+export declare function getHotkeyHandler(hotkeys: ReactHotkeyItem[]): (event: React.KeyboardEvent<HTMLElement>) => void;
+/**
+ * Hook om te luisteren naar keyboard-combinaties op het document.
+ * Vereist KeysProvider in de component tree.
+ *
+ * Formats:
+ * `"mod+s"` = Cmd + s op macOS, Ctrl + S op Windows,
+ * `"ctrl+shift+x"` = Ctrl + Shift + x,
+ * `"alt+shift+L"` = Alt + Shift + L, spaties zijn toegestaan,
+ * `"ArrowLeft"` = @see https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values voor speciale keys
+ *
+ * Options:
+ * - `allowBrowserDefault`: Sta de standaard browser actie toe (standaard: false)
+ * - `allowPropagation`: Sta toe dat eerder geregistreerde handlers ook afvuren (standaard: false)
+ *
+ * @param hotkeys een array van keyboard-combinaties met een handler en optionele opties.
+ * @example
+ * // Basis gebruik
+ * useHotkeys([
+ *   ['mod+s', (e) => saveDocument()],
+ *   ['ctrl+k', (e) => openCommandPalette()],
+ * ]);
+ *
+ * @example
+ * // Met opties: sta browser default toe (bijv. voor ctrl+f)
+ * useHotkeys([
+ *   ['ctrl+f', (e) => customSearch(), { allowBrowserDefault: true }],
+ * ]);
+ *
+ * @example
+ * // Parent en child componenten met specificity
+ * // Parent component:
+ * useHotkeys([
+ *   ['escape', () => console.log('Parent escape')],
+ * ]);
+ *
+ * // Child component (heeft voorrang):
+ * useHotkeys([
+ *   ['escape', () => console.log('Child escape')], // Alleen deze vuurt af
+ * ]);
+ *
+ * @example
+ * // Sta propagatie toe naar eerdere handlers
+ * useHotkeys([
+ *   ['ctrl+l', () => logAction(), { allowPropagation: true }], // Beide handlers vuren af
+ * ]);
+ */
+export declare function useHotkeys(hotkeys: HotkeyItem[], tagsToIgnore?: string[], triggerOnContentEditable?: boolean): void;
+/**
+ * Hook om te checken of een hotkey al geregistreerd is.
+ * Geeft een array terug met alle registraties die deze hotkey gebruiken.
+ *
+ * @param hotkey de hotkey om te checken (bijv. "mod+s" of "ctrl+k")
+ * @returns array van matches met id en hotkey string
+ *
+ * @example
+ * const matches = useIsHotkeyRegistered('mod+s');
+ * if (matches.length > 0) {
+ *   console.log('mod+s is al geregistreerd door:', matches);
+ * }
+ */
+export declare function useIsHotkeyRegistered(hotkey: string): import("..").RegisteredHotkeyMatch[];
+export {};

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

@@ -0,0 +1,90 @@
+type DBKey = string | number | Date;
+type DBData = {
+    isOpen: boolean;
+    name: string;
+    version: number;
+    defaultStore: string;
+    stores: string[];
+};
+type DBFunctions<T extends unknown = string> = {
+    /** write a value to this database
+     * @param key the key to write to
+     * @param value the value to write
+     * @param store the store to write to (optional). When not provided, the default store is used
+     * @returns true if the write was successful
+     */
+    write: (key: DBKey, value: T, store?: string | undefined) => Promise<boolean>;
+    /** read a value from this database
+     * @param key the key to read from
+     * @param store the store to read from (optional). When not provided, the default store is used
+     * @param defaultValue the default value to return if the key does not exist (optional), defaults to null
+     * @returns the value if it exists, null otherwise
+     */
+    read: (key: DBKey, store?: string | undefined, defaultValue?: T | undefined) => Promise<T | null>;
+    /** remove a value from this database
+     * @param keyParam the key to remove
+     * @param storeParam the store to remove from (optional). When not provided, the default store is used
+     * @returns true if the remove was successful
+     */
+    remove: (key: DBKey, store?: string | undefined) => Promise<boolean>;
+    /** close the database manually */
+    close: () => void;
+    /** open the database manually */
+    open: () => void;
+    /** clear the store
+     * @param store the store to clear from (optional). When not provided, the default store is used.
+     * @return true if the clear was successful
+     */
+    clear: (store?: string | undefined) => Promise<boolean>;
+    /** check if a key exists in the store
+     * @param key the key to check
+     * @param store the store to check (optional). When not provided, the default store is used
+     * @returns true if the key exists, false otherwise
+     */
+    keyExists: (key?: DBKey | undefined, store?: string | undefined) => Promise<boolean>;
+};
+type DBSFunctions = {
+    /**
+     * Get a list of all databases
+     * @returns a promise that resolves to an array of database information
+     */
+    getDbs: () => Promise<IDBDatabaseInfo[]>;
+    /**
+     * Delete a database by name
+     * @param dbName the name of the database to delete
+     * @returns a promise that resolves when the database is deleted
+     */
+    deleteDb(dbName: string): Promise<void>;
+};
+type HookReturnValue = {
+    db: DBData & DBFunctions;
+    dbs: DBSFunctions;
+};
+type IndexedDBHookParams = {
+    /** The name of the database */
+    db?: string | undefined;
+    /** The default name of the object store (something like a table in SQL) */
+    store?: string | undefined;
+    /** The version of the database, defaults to 1 */
+    version?: number | undefined;
+};
+/** Hook to manage an IndexedDB database.
+ * @param dbName the name of the database to use, defaults to 'lbr-default-db'
+ * @param storeName the name of the object store to use, defaults to 'lbr-default-store'
+ * @param version the version of the database, defaults to 1
+ * @example
+ * const { db } = useIndexedDB({ db: 'my-db', store: 'my-store', version: 1 });
+ * db.write('my-key', 'my-value').then(success => console.log('Write successful:', success));
+ * db.read('my-key').then(value => console.log('Read value:', value));
+ * db.remove('my-key').then(success => console.log('Remove successful:', success));
+ * db.clear().then(success => console.log('Clear successful:', success));
+ * db.keyExists('my-key').then(exists => console.log('Key exists:', exists));
+ * db.open(); // to open the database manually
+ * db.close(); // to close the database manually
+ * @example // database management functions
+ * const { dbs } = useIndexedDB({ db: 'my-db', store: 'my-store', version: 1 });
+ * dbs.getDbs().then(dbs => console.log('All IndexedDBs:', dbs));
+ * dbs.deleteDb('my-db').then(() => console.log('Database deleted'));
+ */
+declare function useIndexedDB({ db: dbName, store: storeName, version }: IndexedDBHookParams): HookReturnValue;
+export { useIndexedDB };

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

@@ -0,0 +1,36 @@
+type UseLocalStoredStateFn<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;
+};
+/**
+ * Hook die werkt als `React.useState<T|undefined>()`, maar waarbij de waarde ook wordt opgeslagen in Local 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.
+ * Om de waarde te bewaren bij afsluiten van de browser, gebruik je de hook `{@link useSessionStoredState}`.
+ * @param {UseLocalStoredStateFn} 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 Local 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 { useLocalStoredState } from 'loon-bulma-react';
+ * const [ value, setValue, removeFromLocalStorage ] = useLocalStoredState({ 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 still be there.
+ */
+declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize, }: UseLocalStoredStateFn<T>): readonly [T, (value: T) => void, () => void];
+export { useLocalStoredState };

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

@@ -0,0 +1,154 @@
+/**
+ * Bulma breakpoints as defined in the Bulma CSS framework
+ * @see https://bulma.io/documentation/overview/responsiveness/
+ */
+export declare const BulmaBreakpoints: {
+    /** Mobile devices (up to 768px) */
+    readonly mobile: "(max-width: 768px)";
+    /** Tablet and up (769px and above) */
+    readonly tablet: "(min-width: 769px)";
+    /** Tablet only (769px to 1023px) */
+    readonly tabletOnly: "(min-width: 769px) and (max-width: 1023px)";
+    /** Touch devices (up to 1023px) */
+    readonly touch: "(max-width: 1023px)";
+    /** Desktop and up (1024px and above) */
+    readonly desktop: "(min-width: 1024px)";
+    /** Desktop only (1024px to 1215px) */
+    readonly desktopOnly: "(min-width: 1024px) and (max-width: 1215px)";
+    /** Widescreen and up (1216px and above) */
+    readonly widescreen: "(min-width: 1216px)";
+    /** Widescreen only (1216px to 1407px) */
+    readonly widescreenOnly: "(min-width: 1216px) and (max-width: 1407px)";
+    /** FullHD and up (1408px and above) */
+    readonly fullhd: "(min-width: 1408px)";
+};
+/**
+ * Common media queries for typical use cases
+ * Provides convenient shortcuts for frequently used media features
+ */
+export declare const CommonMediaQueries: {
+    /** Portrait orientation (height > width) */
+    readonly portrait: "(orientation: portrait)";
+    /** Landscape orientation (width > height) */
+    readonly landscape: "(orientation: landscape)";
+    /** User prefers light color scheme */
+    readonly lightMode: "(prefers-color-scheme: light)";
+    /** User prefers dark color scheme */
+    readonly darkMode: "(prefers-color-scheme: dark)";
+    /** User prefers reduced motion (accessibility) */
+    readonly reduceMotion: "(prefers-reduced-motion: reduce)";
+    /** User has no motion preference */
+    readonly allowMotion: "(prefers-reduced-motion: no-preference)";
+    /** Device supports hover (mouse, trackpad) */
+    readonly canHover: "(hover: hover)";
+    /** Device does not support hover (touch screens) */
+    readonly cannotHover: "(hover: none)";
+    /** Fine pointer (mouse, stylus) */
+    readonly finePointer: "(pointer: fine)";
+    /** Coarse pointer (touch, limited precision) */
+    readonly coarsePointer: "(pointer: coarse)";
+    /** High DPI / Retina displays (2x pixel density) */
+    readonly retina: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
+    /** Extra high DPI displays (3x pixel density) */
+    readonly retina3x: "(-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi)";
+    /** Screen media (not print) */
+    readonly screen: "screen";
+    /** Print media */
+    readonly print: "print";
+    /** Wide aspect ratio (16:9 or wider) */
+    readonly wideAspect: "(min-aspect-ratio: 16/9)";
+    /** Square-ish aspect ratio */
+    readonly squareAspect: "(min-aspect-ratio: 4/5) and (max-aspect-ratio: 5/4)";
+    /** User prefers high contrast */
+    readonly highContrast: "(prefers-contrast: more)";
+    /** User prefers low contrast */
+    readonly lowContrast: "(prefers-contrast: less)";
+};
+export type BulmaBreakpointKey = keyof typeof BulmaBreakpoints;
+export type CommonMediaQueryKey = keyof typeof CommonMediaQueries;
+export type MediaQueryKey = BulmaBreakpointKey | CommonMediaQueryKey;
+/**
+ * Hook to detect if a media query matches the current viewport.
+ * Integrates with Bulma breakpoints and common media queries, but also supports custom queries.
+ *
+ * @param query - A media query string, Bulma breakpoint key, or common media query key
+ * @param defaultValue - Default value to return during SSR or before first check (default: false)
+ * @returns boolean indicating if the media query matches
+ *
+ * @example
+ * // Using Bulma breakpoints
+ * const isMobile = useMediaQuery('mobile');
+ * const isDesktop = useMediaQuery('desktop');
+ * const isWidescreen = useMediaQuery('widescreen');
+ *
+ * @example
+ * // Using common media queries
+ * const isPortrait = useMediaQuery('portrait');
+ * const isDarkMode = useMediaQuery('darkMode');
+ * const canHover = useMediaQuery('canHover');
+ * const prefersReducedMotion = useMediaQuery('reduceMotion');
+ *
+ * @example
+ * // Using custom media queries
+ * const isVerySmall = useMediaQuery('(max-width: 400px)');
+ * const isExtraWide = useMediaQuery('(min-width: 2000px)');
+ *
+ * @example
+ * // With default value for SSR
+ * const isMobile = useMediaQuery('mobile', true); // assume mobile during SSR
+ *
+ * @example
+ * // Responsive component rendering
+ * function ResponsiveNav() {
+ *   const isMobile = useMediaQuery('mobile');
+ *   return isMobile ? <MobileNav /> : <DesktopNav />;
+ * }
+ */
+export declare function useMediaQuery(query: MediaQueryKey | string, defaultValue?: boolean): boolean;
+/**
+ * Hook to get multiple Bulma breakpoint matches at once.
+ * More efficient than calling useMediaQuery multiple times.
+ *
+ * @returns Object with boolean values for each Bulma breakpoint
+ *
+ * @example
+ * function ResponsiveComponent() {
+ *   const { mobile, tablet, desktop, widescreen } = useBulmaBreakpoints();
+ *
+ *   return (
+ *     <div>
+ *       {mobile && <p>Mobile view</p>}
+ *       {tablet && <p>Tablet view</p>}
+ *       {desktop && <p>Desktop view</p>}
+ *       {widescreen && <p>Widescreen view</p>}
+ *     </div>
+ *   );
+ * }
+ */
+export declare function useBulmaBreakpoints(): {
+    readonly mobile: boolean;
+    readonly tablet: boolean;
+    readonly tabletOnly: boolean;
+    readonly touch: boolean;
+    readonly desktop: boolean;
+    readonly desktopOnly: boolean;
+    readonly widescreen: boolean;
+    readonly widescreenOnly: boolean;
+    readonly fullhd: boolean;
+};
+/**
+ * Hook to get the current Bulma breakpoint name.
+ * Returns the most specific matching breakpoint.
+ *
+ * @returns The name of the current breakpoint or 'unknown' if none match
+ *
+ * @example
+ * function App() {
+ *   const breakpoint = useCurrentBreakpoint();
+ *
+ *   return <div className={`app-${breakpoint}`}>
+ *     Current breakpoint: {breakpoint}
+ *   </div>;
+ * }
+ */
+export declare function useCurrentBulmaBreakpoint(): 'mobile' | 'tablet' | 'desktop' | 'widescreen' | 'fullhd' | 'unknown';

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

@@ -0,0 +1,25 @@
+export declare const DOTS = "dots";
+export interface PaginationParams {
+    /** Page selected on initial render, defaults to 1 */
+    initialPage?: number;
+    /** Controlled active page number */
+    page?: number;
+    /** Total amount of pages */
+    total: number;
+    /** Siblings amount on left/right side of selected page, defaults to 1 */
+    siblings?: number;
+    /** Amount of elements visible on left/right edges, defaults to 1  */
+    boundaries?: number;
+    /** Callback fired after change of each page */
+    onChange?: (page: number) => void;
+}
+export declare function usePagination({ total, siblings, boundaries, page, initialPage, onChange, }: PaginationParams): {
+    range: (number | "dots")[];
+    active: number;
+    total: number;
+    setPage: (pageNumber: number) => void;
+    next: () => void;
+    prev: () => void;
+    first: () => void;
+    last: () => void;
+};

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

@@ -0,0 +1,16 @@
+import React from 'react';
+/**
+ * Doet hetzelfde als `React.useState`, maar zorgt ervoor dat de state altijd gelijk is aan de parameter.
+ * Om te voorkomen dat je constructies als onderstaand voorbeeld hoeft te gebruiken
+ * @example // Dit stuk
+ * const [state, setState] = React.useState(value);
+ * React.useEffect(() => {
+ *   setState(propValue);
+ * }, [propValue]);
+ *
+ * // Kan vervangen worden door
+ * const [state, setState] = usePropState(value);
+ * @param propValue
+ * @returns
+ */
+export declare function usePropState<T extends unknown>(propValue: T): readonly [T, React.Dispatch<React.SetStateAction<T>>];

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

@@ -0,0 +1,59 @@
+import React from 'react';
+type Axis = 'x' | 'y';
+type Alignment = 'start' | 'end' | 'center';
+type ScrollIntoViewAnimation = {
+    /** target element alignment relatively to parent based on current axis */
+    alignment?: Alignment;
+};
+type ScrollIntoViewParams = {
+    /** callback voor NA het scrollen */
+    onScrollFinish?: () => void;
+    /** Duur van het scrollen (in Milliseconden) */
+    duration?: number;
+    /** axis/richting van het scrollen */
+    axis?: Axis;
+    /** offset van de dichtstbijzijnde rand en het element */
+    offset?: number;
+    /** mag het scrollen door andere gebruikersactiviteit geannuleerd worden */
+    cancelable?: boolean;
+    /** voorkomt verspringen van content bij lijsten met veel dezelfde elementen. */
+    isList?: boolean;
+};
+/**
+ *  Scrollt een element in het zicht van een parent element.
+ * @param duration: de duur van een scroll animatie in milliseconden
+ * @param axis: de richting van het scrollen
+ * @param onScrollFinish: callback voor NA het scrollen
+ * @param offset: offset van de dichtstbijzijnde rand en het element
+ * @param cancelable: mag het scrollen door andere gebruikersactiviteit geannuleerd worden
+ * @param isList: voorkomt verspringen van content bij lijsten met veel dezelfde elementen.
+ * @returns object met:
+ * - `scrollableRef`: ref van de parent element,
+ * - `targetRef`: ref van het element dat in het zicht moet komen,
+ * - `scrollIntoView`: functie om het element in het zicht te scrollen,
+ * - `cancel`: functie om het scrollen te annuleren
+ * @example // 1 element om naar te scrollen
+ * const { scrollableRef, targetRef, scrollIntoView, cancel } = useScrollIntoView();
+ * <div ref={scrollableRef}>
+ *   <div ref={targetRef} />
+ * </div>
+ * <button onClick={() => scrollIntoView()}>Scroll</button>
+ *
+ * @example // meerdere elementen om naar te scrollen
+ * const { FirstIargetRef, scrollIntoView: ScrollToFirstTarget, cancel } = useScrollIntoView();
+ * const { secondTargetRef, scrollIntoView: ScrollToSecondTarget, cancel } = useScrollIntoView();
+ * <div ref={scrollableRef}>
+ *   <div ref={firstTtargetRef} />
+ *   <div ref={secondTargetRef} />
+ * </div>
+ *
+ * <button onClick={() => ScrollToFirstTarget()}>Scroll naar eerste element</button>
+ * <button onClick={() => ScrollToSecondTarget()}>Scroll naar tweede element</button>
+ */
+export declare function useScrollIntoView<Target extends HTMLElement, Parent extends HTMLElement | null = null>({ duration, axis, onScrollFinish, offset, cancelable, isList, }?: ScrollIntoViewParams): {
+    scrollableRef: React.RefObject<Parent | null>;
+    targetRef: React.RefObject<Target | null>;
+    scrollIntoView: ({ alignment }?: ScrollIntoViewAnimation) => void;
+    cancel: () => void;
+};
+export {};