@fremtind/jokul 0.1.1

package/build/es/hooks/useSwipeGesture/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/build/es/hooks/useSwipeGesture/useSwipeGesture.js

@@ -0,0 +1,2 @@
+import{useRef as e,useCallback as n}from"react";function r(e){return{x:e.clientX,y:e.clientY}}function t(t){const o=e(!1),u=e(),{onClick:l,onChange:c,onPointerCancel:i,onPointerDown:a,onPointerMove:p,onPointerUp:s}=t,f=n((e=>{o.current||null==l||l(e),o.current=!1}),[l]),P=n((e=>{var n,t;e.preventDefault(),null==(t=(n=e.target).setPointerCapture)||t.call(n,e.pointerId),u.current=r(e),o.current=!1,null==a||a(e)}),[a]),v=n((e=>{if(e.preventDefault(),!u.current)return;const{x:n}=r(e),{x:t}=u.current;n-t>10&&c&&"on"!==o.current?(c(e,!0),o.current="on",u.current=r(e)):t-n>10&&c&&"off"!==o.current&&(c(e,!1),o.current="off",u.current=r(e)),null==p||p(e)}),[p,c]),C=n((e=>{var n,r;e.preventDefault(),null==(r=(n=e.target).releasePointerCapture)||r.call(n,e.pointerId),u.current=void 0,"pointerup"===e.type?null==s||s(e):null==i||i(e)}),[s,i]);return{swipeHandled:o,gestureHandlers:{onClick:f,onPointerDown:P,onPointerMove:v,onPointerUp:C,onPointerCancel:C}}}export{t as useSwipeGesture};
+//# sourceMappingURL=useSwipeGesture.js.map

package/build/es/hooks/useSwipeGesture/useSwipeGesture.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSwipeGesture.js","sources":["../../../../src/hooks/useSwipeGesture/useSwipeGesture.ts"],"sourcesContent":["import { type MouseEventHandler, type PointerEventHandler, type MutableRefObject, useCallback, useRef } from \"react\";\n\nexport type SwipeChangeHandler<T extends HTMLElement> = (\n    event: React.MouseEvent<T> | React.PointerEvent<T>,\n    pressed: boolean,\n) => void;\n\ntype Point = { x: number; y: number };\n\nfunction getGesturePointFromEvent<T extends HTMLElement>(event: React.PointerEvent<T>): Point {\n    return {\n        x: event.clientX,\n        y: event.clientY,\n    };\n}\n\ntype SwipeGestureOptions<T extends HTMLElement> = {\n    onClick?: MouseEventHandler<T>;\n    onChange?: SwipeChangeHandler<T>;\n    onPointerDown?: PointerEventHandler<T>;\n    onPointerUp?: PointerEventHandler<T>;\n    onPointerMove?: PointerEventHandler<T>;\n    onPointerCancel?: PointerEventHandler<T>;\n};\n\n/**\n * Logikk for å håndtere en swipe, for eksempel brukt i toggle switch.\n *\n * @param options Callbacks for de ulike stegene i en swipe-gesture\n * @returns Handlers for de ulike stegene i en swipe-gesture\n */\nexport function useSwipeGesture<T extends HTMLElement>(\n    options: SwipeGestureOptions<T>,\n): {\n    swipeHandled: MutableRefObject<\"on\" | \"off\" | false>;\n    gestureHandlers: {\n        onClick: MouseEventHandler<T>;\n        onPointerDown: PointerEventHandler<T>;\n        onPointerMove: PointerEventHandler<T>;\n        onPointerUp: PointerEventHandler<T>;\n        onPointerCancel: PointerEventHandler<T>;\n    };\n} {\n    const swipeHandled = useRef<\"on\" | \"off\" | false>(false);\n    const gestureStartPosition = useRef<Point>();\n\n    const { onClick, onChange, onPointerCancel, onPointerDown, onPointerMove, onPointerUp } = options;\n\n    const handleClick: MouseEventHandler<T> = useCallback(\n        (event) => {\n            if (!swipeHandled.current) {\n                onClick?.(event);\n            }\n            swipeHandled.current = false; // sørg for at vi får klikke igjen etter swipes\n        },\n        [onClick],\n    );\n\n    const handleGestureStart: PointerEventHandler<T> = useCallback(\n        (event) => {\n            event.preventDefault();\n\n            (event.target as T).setPointerCapture?.(event.pointerId);\n            gestureStartPosition.current = getGesturePointFromEvent(event);\n            swipeHandled.current = false;\n\n            onPointerDown?.(event);\n        },\n        [onPointerDown],\n    );\n\n    const handleGestureMove: PointerEventHandler<T> = useCallback(\n        (event) => {\n            event.preventDefault();\n\n            if (!gestureStartPosition.current) {\n                return;\n            }\n\n            const { x: currentX } = getGesturePointFromEvent(event);\n            const { x: startX } = gestureStartPosition.current;\n\n            if (currentX - startX > 10 && onChange && swipeHandled.current !== \"on\") {\n                onChange(event, true);\n                swipeHandled.current = \"on\";\n                gestureStartPosition.current = getGesturePointFromEvent(event);\n            } else if (startX - currentX > 10 && onChange && swipeHandled.current !== \"off\") {\n                onChange(event, false);\n                swipeHandled.current = \"off\";\n                gestureStartPosition.current = getGesturePointFromEvent(event);\n            }\n\n            onPointerMove?.(event);\n        },\n        [onPointerMove, onChange],\n    );\n\n    const handleGestureEnd: PointerEventHandler<T> = useCallback(\n        (event) => {\n            event.preventDefault();\n\n            (event.target as T).releasePointerCapture?.(event.pointerId);\n            gestureStartPosition.current = undefined;\n\n            event.type === \"pointerup\" ? onPointerUp?.(event) : onPointerCancel?.(event);\n        },\n        [onPointerUp, onPointerCancel],\n    );\n\n    return {\n        swipeHandled,\n        gestureHandlers: {\n            onClick: handleClick,\n            onPointerDown: handleGestureStart,\n            onPointerMove: handleGestureMove,\n            onPointerUp: handleGestureEnd,\n            onPointerCancel: handleGestureEnd,\n        },\n    };\n}\n"],"names":["getGesturePointFromEvent","event","x","clientX","y","clientY","useSwipeGesture","options","swipeHandled","useRef","gestureStartPosition","onClick","onChange","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","handleClick","useCallback","current","handleGestureStart","preventDefault","_b","_a","target","setPointerCapture","call","pointerId","handleGestureMove","currentX","startX","handleGestureEnd","releasePointerCapture","type","gestureHandlers"],"mappings":"gDASA,SAASA,EAAgDC,GAC9C,MAAA,CACHC,EAAGD,EAAME,QACTC,EAAGH,EAAMI,QAEjB,CAiBO,SAASC,EACZC,GAWMC,MAAAA,EAAeC,GAA6B,GAC5CC,EAAuBD,KAErBE,QAAAA,EAASC,SAAAA,EAAUC,gBAAAA,EAAiBC,cAAAA,EAAeC,cAAAA,EAAeC,YAAAA,GAAgBT,EAEpFU,EAAoCC,GACrCjB,IACQO,EAAaW,SACd,MAAAR,GAAAA,EAAUV,GAEdO,EAAaW,SAAU,CAAA,GAE3B,CAACR,IAGCS,EAA6CF,GAC9CjB,YACGA,EAAMoB,iBAEL,OAAAC,GAAAC,EAAAtB,EAAMuB,QAAaC,oBAAnBH,EAAAI,KAAAH,EAAuCtB,EAAM0B,WACzBjB,EAAAS,QAAUnB,EAAyBC,GACxDO,EAAaW,SAAU,EAEvB,MAAAL,GAAAA,EAAgBb,EAAAA,GAEpB,CAACa,IAGCc,EAA4CV,GAC7CjB,IAGO,GAFJA,EAAMoB,kBAEDX,EAAqBS,QACtB,OAGE,MAAEjB,EAAG2B,GAAa7B,EAAyBC,IACzCC,EAAG4B,GAAWpB,EAAqBS,QAEvCU,EAAWC,EAAS,IAAMlB,GAAqC,OAAzBJ,EAAaW,SACnDP,EAASX,GAAO,GAChBO,EAAaW,QAAU,KACFT,EAAAS,QAAUnB,EAAyBC,IACjD6B,EAASD,EAAW,IAAMjB,GAAqC,QAAzBJ,EAAaW,UAC1DP,EAASX,GAAO,GAChBO,EAAaW,QAAU,MACFT,EAAAS,QAAUnB,EAAyBC,IAG5D,MAAAc,GAAAA,EAAgBd,EAAAA,GAEpB,CAACc,EAAeH,IAGdmB,EAA2Cb,GAC5CjB,YACGA,EAAMoB,iBAEL,OAAAC,GAAAC,EAAAtB,EAAMuB,QAAaQ,wBAAnBV,EAAAI,KAAAH,EAA2CtB,EAAM0B,WAClDjB,EAAqBS,aAAU,EAEhB,cAAflB,EAAMgC,KAAuB,MAAAjB,GAAAA,EAAcf,GAAS,MAAAY,GAAAA,EAAkBZ,EAAAA,GAE1E,CAACe,EAAaH,IAGX,MAAA,CACHL,aAAAA,EACA0B,gBAAiB,CACbvB,QAASM,EACTH,cAAeM,EACfL,cAAea,EACfZ,YAAae,EACblB,gBAAiBkB,GAG7B"}

package/build/hooks/index.d.ts

@@ -0,0 +1,18 @@
+export { useAnimatedDetails } from './useAnimatedDetails';
+export { useAnimatedHeight, useAnimatedHeightBetween, useAutoAnimatedHeight, type UseAutoAnimatedHeightOptions, type UseAnimatedHeightOptions, } from './useAnimatedHeight';
+export { useBrowserPreferences } from './/useBrowserPreferences';
+export { useIntersectionObserver } from './useIntersectionObserver';
+export { useLocalStorage } from './useLocalStorage/useLocalStorage';
+export { useMutationObserver } from './useMutationObserver';
+export { usePreviousValue } from './usePreviousValue';
+export { useProgressiveImg, type ProgressiveImageProps } from './useProgressiveImg';
+export { useScreen, type ScreenState } from './useScreen';
+export { useScrollIntoView, type ScrollIntoViewProps } from './useScrollIntoView';
+export { useAriaLiveRegion, type UseAriaLiveRegionOptions } from './useAriaLiveRegion';
+export { useClickOutside } from './useClickOutside';
+export { useFocusOutside } from './useFocusOutside';
+export { useElementDimensions, type Dimensions } from './useElementDimensions';
+export { useId } from './useId';
+export { useKeyListener } from './useKeyListener';
+export { useListNavigation } from './useListNavigation';
+export { useSwipeGesture, type SwipeChangeHandler } from './useSwipeGesture';

package/build/hooks/mediaQueryUtils.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Sjekker om et CSS Media Query matcher nettleserens egenskaper
+ *
+ * @param mediaQuery CSS Media Query som skal sjekkes. F.eks. `(orientation: portrait)`
+ * @returns om det er match på queryen
+ */
+export declare function getInitialMediaQueryMatch(mediaQuery: string): boolean;
+/**
+ * Lytt på endringer i match mot et CSS Media Query
+ *
+ * @param queryList en MediaQueryList initiert med `window.matchMedia(<CSS Media Query>)`
+ * @param callback funksjon som kalles når match for `queryList` endres
+ */
+export declare function addMediaQueryListener(queryList: MediaQueryList, callback: (e: MediaQueryListEvent) => void): void;
+/**
+ * Fjern en lytter fra en MediaQueryList
+ *
+ * @param queryList en MediaQueryList initiert med `window.matchMedia(<CSS Media Query>)`
+ * @param callback lytter som skal fjernes
+ */
+export declare function removeMediaQueryListener(queryList: MediaQueryList, callback: (e: MediaQueryListEvent) => void): void;

package/build/hooks/useAnimatedDetails/index.d.ts

@@ -0,0 +1 @@
+export { useAnimatedDetails } from './useAnimatedDetails';

package/build/hooks/useAnimatedDetails/useAnimatedDetails.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Lar deg animere et HTML details element med en summary trigger og noe innhold.
+ * HTML strukturen din bør se ut som omtrent
+ * <details ref={detailsRef}>
+ *     <summary ref={summaryRef} onClick={onSummaryClick}>Trigger for å åpne</summary>
+ *     <div ref={contentRef}>Ekspanderbart innhold</div>
+ *  </details>
+ *
+ * @param onOpenChange Callback med informasjon om når elementet åpner/lukker seg.
+ * @param isExpanded Styr åpning/lukking utenfra.
+ */
+export declare const useAnimatedDetails: ({ onOpenChange, isExpanded, }: {
+    onOpenChange: (open: boolean, e: React.MouseEvent<HTMLElement>) => void;
+    isExpanded: boolean;
+}) => {
+    detailsRef: React.RefObject<HTMLDetailsElement>;
+    summaryRef: React.RefObject<HTMLButtonElement>;
+    contentRef: React.RefObject<HTMLDivElement>;
+    onSummaryClick: React.MouseEventHandler<HTMLElement>;
+};

package/build/hooks/useAnimatedHeight/index.d.ts

@@ -0,0 +1,4 @@
+export type { UseAnimatedHeightOptions } from './types';
+export { useAnimatedHeight } from './useAnimatedHeight';
+export { useAnimatedHeightBetween } from './useAnimatedHeightBetween';
+export { useAutoAnimatedHeight, type UseAutoAnimatedHeightOptions } from './useAutoAnimateHeight';

package/build/hooks/useAnimatedHeight/types.d.ts

@@ -0,0 +1,26 @@
+import { RefObject } from 'react';
+import { Easing, Timing } from '../../core';
+export interface UseAnimatedHeightOptions<T extends HTMLElement = HTMLElement> {
+    display?: "block" | "grid" | "flex";
+    /**
+     * Overstyr standard easingfunksjon
+     * @default "standard"
+     */
+    easing?: Easing;
+    /**
+     * Overstyr standard timing
+     * @default "productive"
+     */
+    timing?: Timing;
+    onTransitionStart?: (isOpening: boolean, ref: RefObject<T>) => void;
+    /**
+     * Kalles rett etter at elementet har fått display: block; i stedet for hidden;
+     * Nyttig om du må flytte fokus inn i elementet og ikke vil vente til animasjonen er ferdig.
+     * Her er ikke innholdet _visuelt_ synlig ennå, men det er "synlig" for DOM i den
+     * forstand at det _ikke_ er display: hidden;
+     *
+     * `isOpen` er alltid `true`. Det sendes som første parameter for å ha lik funksjonssignatur som `onTransitionEnd`.
+     */
+    onFirstVisible?: (isOpen: boolean, ref: RefObject<T>) => void;
+    onTransitionEnd?: (isOpen: boolean, ref: RefObject<T>) => void;
+}

package/build/hooks/useAnimatedHeight/useAnimatedHeight.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { UseAnimatedHeightOptions } from './types';
+/**
+ * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.
+ *
+ * @param isOpen Om elementet er åpent eller lukket.
+ * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.
+ * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.
+ */
+export declare function useAnimatedHeight<T extends HTMLElement>(isOpen: boolean, options?: UseAnimatedHeightOptions<T>): [RefObject<T>, () => void];

package/build/hooks/useAnimatedHeight/useAnimatedHeightBetween.d.ts

@@ -0,0 +1,10 @@
+import { RefObject } from 'react';
+import { UseAnimatedHeightOptions } from './types';
+/**
+ * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.
+ * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.
+ * @param isExpanded indikerer om elementet skal være utvidet eller ikke
+ * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter
+ * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen
+ */
+export declare function useAnimatedHeightBetween<T extends HTMLElement>(isExpanded: boolean, options?: Omit<UseAnimatedHeightOptions<T>, "display" | "onFirstVisible">): [RefObject<T>, () => void];

package/build/hooks/useAnimatedHeight/useAutoAnimateHeight.d.ts

@@ -0,0 +1,20 @@
+import { RefObject } from 'react';
+import { Easing, Timing } from '../../core';
+export type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {
+    easing?: Easing;
+    /**
+     * Overstyr standard timing
+     * @default "expressive"
+     */
+    timing?: Timing;
+    onTransitionStart?: (ref: RefObject<T>) => void;
+    onTransitionEnd?: (ref: RefObject<T>) => void;
+};
+/**
+ * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.
+ * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.
+ * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.
+ * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter
+ * @returns en referanse til elementet som skal animeres
+ */
+export declare function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(trigger: any, options?: UseAutoAnimatedHeightOptions<T>): RefObject<T>;

package/build/hooks/useAriaLiveRegion/index.d.ts

@@ -0,0 +1 @@
+export { useAriaLiveRegion, type UseAriaLiveRegionOptions } from './useAriaLiveRegion';

package/build/hooks/useAriaLiveRegion/useAriaLiveRegion.d.ts

@@ -0,0 +1,15 @@
+export interface UseAriaLiveRegionOptions {
+    /**
+     * @default "polite"
+     */
+    politeness?: "polite" | "assertive" | "off";
+}
+/**
+ * Hjelper for å bare sette aria-live dersom det har skjedd en endring. Unngår at innholdet annonseres ved sidelasting.
+ * @param watch Verdi som indikerer at det har skjedd en endring. For eksempel en boolean som styrer en loader, eller selve teksten som skal bli lest opp.
+ * @param options Bestem om aria-live skal være polite, assertive eller off.
+ * @returns
+ */
+export declare function useAriaLiveRegion(watch: unknown | unknown[], options?: UseAriaLiveRegionOptions): {
+    "aria-live": "off" | "polite" | "assertive" | undefined;
+};

package/build/hooks/useBrowserPreferences/index.d.ts

@@ -0,0 +1 @@
+export { useBrowserPreferences } from './useBrowserPreferences';

package/build/hooks/useBrowserPreferences/useBrowserPreferences.d.ts

@@ -0,0 +1,12 @@
+import { ColorScheme } from '../../core';
+type BrowserPreferences = {
+    prefersReducedMotion: boolean;
+    prefersColorScheme: ColorScheme;
+    forcedColors: boolean;
+};
+/**
+ * Hook som gir informasjon om brukerens foretrukne konfigurasjon.
+ * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).
+ */
+export declare const useBrowserPreferences: () => BrowserPreferences;
+export {};

package/build/hooks/useClickOutside/index.d.ts

@@ -0,0 +1 @@
+export { useClickOutside } from './useClickOutside';

package/build/hooks/useClickOutside/useClickOutside.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Hook for å sette opp en lytter ved klikk utenfor et element.
+ * @param ref Elementet du ønsker å sjekke om en klikk er utenfor.
+ * @param fn Callback-funksjon som kalles når det klikkes utenfor elementet.
+ */
+export declare function useClickOutside(ref: RefObject<HTMLElement> | null, fn: () => void): void;

package/build/hooks/useElementDimensions/index.d.ts

@@ -0,0 +1 @@
+export { useElementDimensions, type Dimensions } from './useElementDimensions';

package/build/hooks/useElementDimensions/useElementDimensions.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+export type Dimensions = {
+    height: number;
+    width: number;
+};
+/**
+ * Lar deg måle størrelsen på et element, og oppdatere målene når vinduet endrer størrelse.
+ * @param throttleDelay Antall milisekunder som skal gå mellom hver gang dimensjonene oppdateres.
+ * @returns Ref til elementet som skal måles, og dimensjonene til elementet.
+ */
+export declare function useElementDimensions<T extends HTMLElement>(throttleDelay?: number): [RefObject<T>, Dimensions];

package/build/hooks/useFocusOutside/index.d.ts

@@ -0,0 +1 @@
+export { useFocusOutside } from './useFocusOutside';

package/build/hooks/useFocusOutside/useFocusOutside.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+/**
+ * Hook for å lytte etter fokus utenfor et element. Nyttig dersom flere fokuserbare elementer samspiller i en komponent.
+ * @param ref Elementet som skal observeres
+ * @param fn Funksjon som kalles når fokus flyttes utenfor elementet
+ */
+export declare function useFocusOutside(ref: RefObject<HTMLElement> | null, fn: () => void): void;

package/build/hooks/useId/index.d.ts

@@ -0,0 +1 @@
+export { useId } from './useId';

package/build/hooks/useId/useId.d.ts

@@ -0,0 +1,11 @@
+export interface UseIdOptions {
+    /** @default true */
+    generateSuffix?: boolean;
+}
+/**
+ * Hook som genererer en unik ID.
+ * @param id En valgfri eksisterende ID som kan brukes som prefix.
+ * @param options Objekt med innstillinger, dersom du angir et prefix.
+ * @deprecated Bruk useId fra "react" pakka i stedet
+ */
+export declare const useId: (id?: string, options?: UseIdOptions) => string;

package/build/hooks/useIntersectionObserver/index.d.ts

@@ -0,0 +1 @@
+export { useIntersectionObserver } from './useIntersectionObserver';

package/build/hooks/useIntersectionObserver/useIntersectionObserver.d.ts

@@ -0,0 +1,13 @@
+import { RefObject, MutableRefObject } from 'react';
+type ValidElement = HTMLElement | SVGElement;
+type Target = MutableRefObject<ValidElement> | RefObject<ValidElement> | MutableRefObject<NodeListOf<ValidElement>> | RefObject<NodeListOf<ValidElement>> | NodeListOf<ValidElement>;
+/**
+ * Hook som gjør det enkelt å observere om et element er synlig i viewporten.
+ *
+ * @param target Elementet eller elementene som skal observeres. Du kan sende in en React ref til et HTMLElement eller SVG Element, eller en NodeList av samme type elementer (returneres f.eks. av document.querySelectorAll), eller en React ref med en NodeList av samme type elementer.
+ * @param onIntersect Callback-funksjon som utføres når et av elementene som observeres overlapper angitt mål. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.
+ * @param fallback Funksjon som kalles dersom nettleseren ikke støtter IntersectionOpserver-APIet.
+ * @param options Objekt med innstillinger for oberveren. Se https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/IntersectionObserver#parameters for mer info.
+ */
+export declare const useIntersectionObserver: (target: Target, onIntersect: IntersectionObserverCallback, fallback?: VoidFunction | null, options?: Partial<IntersectionObserverInit>) => void;
+export {};

package/build/hooks/useKeyListener/index.d.ts

@@ -0,0 +1 @@
+export { useKeyListener } from './useKeyListener';

package/build/hooks/useKeyListener/useKeyListener.d.ts

@@ -0,0 +1,8 @@
+import { RefObject } from 'react';
+/**
+ * Lar deg sette opp en tastaturlytter på et element.
+ * @param ref Element som skal observeres
+ * @param keys Taster som skal lyttes på
+ * @param fn Funksjon som kalles når en tastetrykk observeres
+ */
+export declare function useKeyListener(ref: RefObject<HTMLElement> | null, keys: string[] | string | null, fn: (event: KeyboardEvent) => void): void;

package/build/hooks/useListNavigation/index.d.ts

@@ -0,0 +1 @@
+export { useListNavigation } from './useListNavigation';

package/build/hooks/useListNavigation/useListNavigation.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from 'react';
+type UseListNavigationProps<T> = {
+    /** Ref til et element med rollen `listbox` */
+    ref: RefObject<T>;
+};
+export declare function useListNavigation<T extends HTMLElement>({ ref }: UseListNavigationProps<T>): void;
+export {};

package/build/hooks/useLocalStorage/index.d.ts

@@ -0,0 +1 @@
+export { useLocalStorage } from './useLocalStorage';

package/build/hooks/useLocalStorage/useLocalStorage.d.ts

@@ -0,0 +1 @@
+export declare const useLocalStorage: <T>(key: string, defaultValue: T) => [T, (newValue: T) => void];

package/build/hooks/useMutationObserver/index.d.ts

@@ -0,0 +1 @@
+export { useMutationObserver } from './useMutationObserver';

package/build/hooks/useMutationObserver/useMutationObserver.d.ts

@@ -0,0 +1,9 @@
+import { RefObject } from 'react';
+/**
+ * Hook som gjør det enklere å sjekke en komponents children for endringer.
+ *
+ * @param targetRef Container som skal observeres. Containeren må ikke rerendres, da vil observereren bli opprettet på nytt.
+ * @param onObservation Callback-funksjon som utføres når en mutasjon observeres.
+ * @param config Parametere til observereren. Se https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit#properties for mer info.
+ */
+export declare const useMutationObserver: (targetRef: RefObject<HTMLElement>, onObservation: MutationCallback, config?: Partial<MutationObserverInit>) => void;

package/build/hooks/usePreviousValue/index.d.ts

@@ -0,0 +1 @@
+export { usePreviousValue } from './usePreviousValue';

package/build/hooks/usePreviousValue/usePreviousValue.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Lar deg huske en verdi fra forrige render.
+ * @param value Verdien som skal huskes.
+ * @returns Forrige render av verdien, eller undefined første render.
+ */
+export declare const usePreviousValue: <T>(value: T) => T | undefined;

package/build/hooks/useProgressiveImg/index.d.ts

@@ -0,0 +1 @@
+export { useProgressiveImg, type ProgressiveImageProps } from './useProgressiveImg';

package/build/hooks/useProgressiveImg/useProgressiveImg.d.ts

@@ -0,0 +1,10 @@
+export interface ProgressiveImageProps {
+    lowQualitySrc: string;
+    highQualitySrc: string;
+}
+type ProgressiveImage = {
+    src: string;
+    isBlurred: boolean;
+};
+export declare const useProgressiveImg: ({ lowQualitySrc, highQualitySrc }: ProgressiveImageProps) => ProgressiveImage;
+export {};

package/build/hooks/useScreen/index.d.ts

@@ -0,0 +1,2 @@
+export { useScreen } from './useScreen';
+export { type ScreenState } from './state';

package/build/hooks/useScreen/state.d.ts

@@ -0,0 +1,17 @@
+export interface ScreenState {
+    isSmallDevice: boolean;
+    isMediumDevice: boolean;
+    isLargeDevice: boolean;
+    isXlDevice: boolean;
+    isLandscape: boolean;
+    isPortrait: boolean;
+}
+export declare enum ActionType {
+    orientation = "ORIENTATION_CHANGED",
+    deviceSize = "DEVICE_SIZE_CHANGED"
+}
+export interface ScreenAction {
+    type: ActionType;
+    property: keyof ScreenState;
+}
+export declare const reducer: (state: ScreenState, action: ScreenAction) => ScreenState;

package/build/hooks/useScreen/useScreen.d.ts

@@ -0,0 +1,6 @@
+import { ScreenState } from './state';
+/**
+ * Finn størrelsen og orienteringen til skjermen.
+ * @returns Et objekt med boolean som indikerer om skjermstørrelsen er liten, medium, stor eller ekstra stor, og om skjermen er i portrett- eller landskapsmodus.
+ */
+export declare const useScreen: () => ScreenState;

package/build/hooks/useScrollIntoView/index.d.ts

@@ -0,0 +1 @@
+export { useScrollIntoView, type ScrollIntoViewProps } from './useScrollIntoView';

package/build/hooks/useScrollIntoView/useScrollIntoView.d.ts

@@ -0,0 +1,11 @@
+import { RefObject } from 'react';
+type ValueOf<T> = T[keyof T];
+export interface ScrollIntoViewProps {
+    ref: RefObject<ValueOf<HTMLElementTagNameMap>>;
+    timeout?: number;
+    autoScroll?: boolean;
+    options?: ScrollIntoViewOptions;
+}
+type ScrollFunction = () => void;
+export declare const useScrollIntoView: ({ ref, timeout, autoScroll, options, }: ScrollIntoViewProps) => [ScrollFunction];
+export {};

package/build/hooks/useSwipeGesture/index.d.ts

@@ -0,0 +1 @@
+export { useSwipeGesture, type SwipeChangeHandler } from './useSwipeGesture';

package/build/hooks/useSwipeGesture/useSwipeGesture.d.ts

@@ -0,0 +1,27 @@
+import { MouseEventHandler, PointerEventHandler, MutableRefObject } from 'react';
+export type SwipeChangeHandler<T extends HTMLElement> = (event: React.MouseEvent<T> | React.PointerEvent<T>, pressed: boolean) => void;
+type SwipeGestureOptions<T extends HTMLElement> = {
+    onClick?: MouseEventHandler<T>;
+    onChange?: SwipeChangeHandler<T>;
+    onPointerDown?: PointerEventHandler<T>;
+    onPointerUp?: PointerEventHandler<T>;
+    onPointerMove?: PointerEventHandler<T>;
+    onPointerCancel?: PointerEventHandler<T>;
+};
+/**
+ * Logikk for å håndtere en swipe, for eksempel brukt i toggle switch.
+ *
+ * @param options Callbacks for de ulike stegene i en swipe-gesture
+ * @returns Handlers for de ulike stegene i en swipe-gesture
+ */
+export declare function useSwipeGesture<T extends HTMLElement>(options: SwipeGestureOptions<T>): {
+    swipeHandled: MutableRefObject<"on" | "off" | false>;
+    gestureHandlers: {
+        onClick: MouseEventHandler<T>;
+        onPointerDown: PointerEventHandler<T>;
+        onPointerMove: PointerEventHandler<T>;
+        onPointerUp: PointerEventHandler<T>;
+        onPointerCancel: PointerEventHandler<T>;
+    };
+};
+export {};

package/package.json

@@ -0,0 +1,83 @@
+{
+    "name": "@fremtind/jokul",
+    "version": "0.1.1",
+    "type": "module",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Jøkul monopakke",
+    "homepage": "https://github.com/fremtind/jokul/tree/main/packages/jokul",
+    "keywords": [],
+    "license": "MIT",
+    "sideEffects": [
+        "*.css",
+        "*.scss"
+    ],
+    "files": [
+        "./build",
+        "./src/core/styles",
+        "./src/core/jkl",
+        "./src/core/tokens.less",
+        "./src/components/navigation/styles"
+    ],
+    "exports": {
+        "./core": {
+            "require": "./build/cjs/core/index.js",
+            "import": "./build/es/core/index.js",
+            "types": "./build/core/index.d.ts"
+        },
+        "./core/tokens.less": "./src/core/tokens.less",
+        "./core/styles/*": "./src/core/styles/*",
+        "./core/jkl": "./src/core/jkl/_index.scss",
+        "./hooks": {
+            "require": "./build/cjs/hooks/index.js",
+            "import": "./build/es/hooks/index.js",
+            "types": "./build/hooks/index.d.ts"
+        },
+        "./components": {
+            "require": "./build/cjs/components/index.js",
+            "import": "./build/es/components/index.js",
+            "types": "./build/components/index.d.ts"
+        },
+        "./components/navigation": {
+            "require": "./build/cjs/components/navigation/index.js",
+            "import": "./build/es/components/navigation/index.js",
+            "types": "./build/components/navigation/index.d.ts"
+        },
+        "./components/navigation/styles/*": "./src/components/navigation/styles/*"
+    },
+    "scripts": {
+        "generate:tokens": "node tokens.build.mjs",
+        "build": "pnpm run /compile:*/",
+        "compile:style": "node build-styles.mjs",
+        "compile:scripts": "vite build --config vite.build.config.mjs"
+    },
+    "peerDependencies": {
+        "react": "^18.0.0"
+    },
+    "devDependencies": {
+        "@rollup/plugin-terser": "^0.4.4",
+        "@vitejs/plugin-react-swc": "^3.7.0",
+        "autoprefixer": "^10.4.14",
+        "change-case": "^4.1.2",
+        "clsx": "^2.1.1",
+        "cssnano": "^6.0.1",
+        "cssnano-preset-lite": "^3.0.0",
+        "glob": "^11.0.0",
+        "postcss": "^8.4.24",
+        "rollup-plugin-node-externals": "^7.1.3",
+        "rollup-plugin-visualizer": "^5.12.0",
+        "sass-embedded": "^1.78.0",
+        "style-dictionary": "^3.8.0",
+        "vite": "^5.2.0",
+        "vite-plugin-dts": "^4.1.0"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/fremtind/jokul.git"
+    },
+    "bugs": {
+        "url": "https://github.com/fremtind/jokul/issues"
+    },
+    "gitHead": "0e6a5f3d5d3ee91d6e899931558bd16d8af190ae"
+}