@fremtind/jokul 0.22.1 → 0.22.2

package/build/components/text-input/TextArea.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import { InputGroupProps } from '../input-group';
+import { BaseTextAreaProps } from './BaseTextArea';
+export interface TextAreaProps extends Omit<InputGroupProps, "children">, BaseTextAreaProps {
+}
+export declare const TextArea: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;

package/build/components/text-input/TextInput.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { InputGroupProps } from '../input-group';
+import { BaseTextInputProps } from './BaseTextInput';
+export interface TextInputProps extends Omit<InputGroupProps, "children">, BaseTextInputProps {
+    "data-testautoid"?: string;
+    inline?: boolean;
+    inputClassName?: string;
+}
+export declare const TextInput: React.ForwardRefExoticComponent<TextInputProps & React.RefAttributes<HTMLInputElement>>;

package/build/components/text-input/index.d.ts

@@ -0,0 +1,4 @@
+export { BaseTextArea, type BaseTextAreaProps } from './BaseTextArea';
+export { BaseTextInput, type BaseTextInputProps } from './BaseTextInput';
+export { TextArea, type TextAreaProps } from './TextArea';
+export { TextInput, type TextInputProps } from './TextInput';

package/build/components/toast/Toast.d.ts

@@ -0,0 +1,11 @@
+import { AriaToastProps } from '@react-aria/toast';
+import { QueuedToast, ToastState } from '@react-stately/toast';
+import { default as React } from 'react';
+import { ToastContent, ToastOptions } from './types';
+interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {
+    className?: string;
+    state: ToastState<T>;
+    toast: QueuedToast<T> & ToastOptions;
+}
+export declare function Toast<T extends ToastContent>({ className, state, ...props }: ToastProps<T>): React.JSX.Element;
+export {};

package/build/components/toast/ToastRegion.d.ts

@@ -0,0 +1,7 @@
+import { ToastQueue } from '@react-stately/toast';
+import { default as React } from 'react';
+import { ToastContent } from './types';
+export declare function ToastRegion({ queue, placement }: {
+    queue: ToastQueue<ToastContent>;
+    placement: "center" | "left";
+}): React.ReactPortal | null;

package/build/components/toast/index.d.ts

@@ -0,0 +1,2 @@
+export { ToastProvider, useToast } from './toastContext';
+export { type ToastContent } from './types';

package/build/components/toast/toastContext.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { WithChildren } from '../..';
+import { ToastContent, ToastOptions } from './types';
+interface ToastContextProviderProps extends WithChildren {
+    maxVisibleToasts?: number;
+    /**
+     * @default "center"
+     */
+    placement?: "center" | "left";
+}
+type ToastContext = {
+    add: (toast: ToastContent, options?: ToastOptions) => string;
+};
+export declare const useToast: () => ToastContext;
+export declare const ToastProvider: FC<ToastContextProviderProps>;
+export {};

package/build/components/toast/types.d.ts

@@ -0,0 +1,10 @@
+import { ToastOptions as StatelyToastOptions } from '@react-stately/toast';
+import { ReactNode } from 'react';
+export type ToastContent = {
+    content: ReactNode;
+    title?: string;
+} | string;
+export type ToastOptions = Omit<StatelyToastOptions, "timeout"> & {
+    variant?: "info" | "success" | "warning" | "error";
+    timeout?: number | null | "off";
+};

package/build/components/toggle-switch/ToggleSlider.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { Density, WithChildren } from '../..';
+interface Props extends WithChildren {
+    labels: [string, string];
+    onToggle: (value: string) => void;
+    defaultValue?: string;
+    className?: string;
+    hideLegend?: boolean;
+    density?: Density;
+}
+export declare const ToggleSlider: FC<Props>;
+export {};

package/build/components/toggle-switch/ToggleSwitch.d.ts

@@ -0,0 +1,32 @@
+import { default as React, ButtonHTMLAttributes } from 'react';
+import { Density } from '../..';
+import { SwipeChangeHandler } from '../../hooks';
+export type ToggleChangeHandler<T extends HTMLElement> = SwipeChangeHandler<T>;
+export type ToggleProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement>;
+};
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    density?: Density | undefined;
+    /**
+     * Handler for å håndtere toggling av knappen. Tar inn en boolean som indikerer om knappen er er togglet på
+     * eller ikke, samt en MouseEvent eller en PointerEvent avhengig av om togglingen skjedde via klikk eller swipe.
+     * @example
+     * ```js
+     * function handleChange(event, pressed) {
+     *    console.log(`ToggleSwitch er ${pressed ? "på" : "av"}`);
+     * }
+     * ```
+     */
+    onChange?: ToggleChangeHandler<HTMLButtonElement> | undefined;
+} & React.RefAttributes<HTMLButtonElement>>;

package/build/components/toggle-switch/index.d.ts

@@ -0,0 +1,2 @@
+export { ToggleSwitch, type ToggleChangeHandler } from './ToggleSwitch';
+export { ToggleSlider } from './ToggleSlider';

package/build/components/toggle-switch/usePillStyles.d.ts

@@ -0,0 +1,5 @@
+import { RefObject } from 'react';
+export declare const usePillStyles: (ref: RefObject<HTMLLabelElement>, shouldTransform: boolean, dependencies: unknown[]) => {
+    width: number;
+    transform: string;
+};

package/build/components/tooltip/PopupTip.d.ts

@@ -0,0 +1,13 @@
+import { FC, ReactNode, HTMLProps } from 'react';
+import { TooltipProps } from './Tooltip';
+export interface PopupTipProps extends Omit<TooltipProps, "triggerOn" | "children"> {
+    /**
+     * Innholdet i tooltipet som vises
+     */
+    content: ReactNode;
+    /**
+     * Eventuelle props du vil sette på trigger-knappen for tooltipet
+     */
+    triggerProps?: Omit<HTMLProps<HTMLButtonElement>, "children" | "type">;
+}
+export declare const PopupTip: FC<PopupTipProps>;

package/build/components/tooltip/TooltipContent.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;

package/build/components/tooltip/TooltipTrigger.d.ts

@@ -0,0 +1,2 @@
+import { default as React } from 'react';
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<React.HTMLProps<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;

package/build/components/tooltip/index.d.ts

@@ -0,0 +1,4 @@
+export { Tooltip, type TooltipPlacement, type TooltipProps } from './Tooltip';
+export { TooltipContent } from './TooltipContent';
+export { TooltipTrigger } from './TooltipTrigger';
+export { PopupTip, type PopupTipProps } from './PopupTip';

package/build/core/index.d.ts

@@ -0,0 +1,2 @@
+export type { ColorScheme, Density, Easing, Timing, DataTestAutoId, WithChildren, WithOptionalChildren } from './types';
+export { default as tokens } from './tokens';

package/build/core/tokens.d.ts

@@ -0,0 +1,372 @@
+/**
+ * Do not edit directly
+ * Generated on Mon, 23 Sep 2024 08:51:40 GMT
+ */
+declare const _default: {
+    breakpoint: {
+        medium: string;
+        large: string;
+        xl: string;
+    };
+    color: {
+        brand: {
+            snohvit: string;
+            varde: string;
+            granitt: string;
+            hvit: string;
+            svart: string;
+            skifer: string;
+            fjellgra: string;
+            stein: string;
+            svaberg: string;
+            dis: string;
+            sand: string;
+        };
+        functional: {
+            info: string;
+            infoDark: string;
+            success: string;
+            successDark: string;
+            warning: string;
+            warningDark: string;
+            error: string;
+            errorDark: string;
+        };
+        background: {
+            page: {
+                light: string;
+                dark: string;
+            };
+            pageVariant: {
+                light: string;
+                dark: string;
+            };
+            container: {
+                light: string;
+                dark: string;
+            };
+            containerLow: {
+                light: string;
+                dark: string;
+            };
+            containerHigh: {
+                light: string;
+                dark: string;
+            };
+            containerInverted: {
+                light: string;
+                dark: string;
+            };
+            containerSubdued: {
+                light: string;
+                dark: string;
+            };
+            input: {
+                base: {
+                    light: string;
+                    dark: string;
+                };
+                focus: {
+                    light: string;
+                    dark: string;
+                };
+            };
+            action: {
+                light: string;
+                dark: string;
+            };
+            interactive: {
+                light: string;
+                dark: string;
+            };
+            interactiveHover: {
+                light: string;
+                dark: string;
+            };
+            interactiveSelected: {
+                light: string;
+                dark: string;
+            };
+            alert: {
+                neutral: {
+                    light: string;
+                    dark: string;
+                };
+                info: {
+                    light: string;
+                    dark: string;
+                };
+                success: {
+                    light: string;
+                    dark: string;
+                };
+                warning: {
+                    light: string;
+                    dark: string;
+                };
+                error: {
+                    light: string;
+                    dark: string;
+                };
+            };
+        };
+        text: {
+            default: {
+                light: string;
+                dark: string;
+            };
+            subdued: {
+                light: string;
+                dark: string;
+            };
+            inverted: {
+                light: string;
+                dark: string;
+            };
+            onAction: {
+                light: string;
+                dark: string;
+            };
+            interactive: {
+                light: string;
+                dark: string;
+            };
+            interactiveHover: {
+                light: string;
+                dark: string;
+            };
+            onAlert: {
+                light: string;
+                dark: string;
+            };
+        };
+        border: {
+            action: {
+                light: string;
+                dark: string;
+            };
+            input: {
+                light: string;
+                dark: string;
+            };
+            inputFocus: {
+                light: string;
+                dark: string;
+            };
+            separator: {
+                light: string;
+                dark: string;
+            };
+            separatorStrong: {
+                light: string;
+                dark: string;
+            };
+            separatorHover: {
+                light: string;
+                dark: string;
+            };
+            subdued: {
+                light: string;
+                dark: string;
+            };
+        };
+        svart: string;
+        granitt: string;
+        skifer: string;
+        fjellgra: string;
+        stein: string;
+        svaberg: string;
+        varde: string;
+        dis: string;
+        sand: string;
+        snohvit: string;
+        hvit: string;
+        suksess: string;
+        suksessDark: string;
+        feil: string;
+        feilDark: string;
+        info: string;
+        infoDark: string;
+        advarsel: string;
+        advarselDark: string;
+    };
+    motion: {
+        timing: {
+            energetic: string;
+            snappy: string;
+            productive: string;
+            expressive: string;
+            lazy: string;
+        };
+        easing: {
+            standard: string;
+            entrance: string;
+            exit: string;
+            easeInBounceOut: string;
+            focus: string;
+        };
+    };
+    spacing: {
+        0: string;
+        2: string;
+        4: string;
+        8: string;
+        12: string;
+        16: string;
+        24: string;
+        32: string;
+        40: string;
+        64: string;
+        104: string;
+        168: string;
+    };
+    icon: {
+        weight: {
+            normal: string;
+            bold: string;
+        };
+    };
+    typography: {
+        weight: {
+            normal: string;
+            bold: string;
+        };
+        font: {
+            size: {
+                16: string;
+                18: string;
+                20: string;
+                21: string;
+                23: string;
+                25: string;
+                26: string;
+                28: string;
+                30: string;
+                36: string;
+                44: string;
+                56: string;
+            };
+        };
+        line: {
+            height: {
+                24: string;
+                28: string;
+                32: string;
+                36: string;
+                40: string;
+                44: string;
+                52: string;
+                64: string;
+            };
+        };
+        title: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        titleSmall: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        heading_1: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        heading_2: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        heading_3: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        heading_4: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        heading_5: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        body: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+        small: {
+            small: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+            base: {
+                fontSize: string;
+                lineHeight: string;
+                fontWeight: string;
+            };
+        };
+    };
+};
+export default _default;

package/build/core/types.d.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+import { tokens } from './';
+export interface DataTestAutoId {
+    "data-testautoid"?: string;
+}
+export type ColorScheme = "light" | "dark";
+export type Density = "comfortable" | "compact";
+export type Easing = keyof typeof tokens.motion.easing;
+export type Timing = keyof typeof tokens.motion.timing;
+/**
+ * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at
+ * TypeScript skal kunne oppdage når komponenten forventer children og ikke
+ * får det, eller at komponenten blir _gitt_ children men ikke forventer det.
+ *
+ * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du
+ * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.
+ * Dersom de er valgfrie (for eksempel om du har en standardverdi) bruker du
+ * WithOptionalChildren.
+ *
+ * @see WithOptionalChildren
+ * @see https://solverfox.dev/writing/no-implicit-children/
+ */
+export interface WithChildren {
+    children: ReactNode | ReactNode[];
+}
+/**
+ * Etter React 18 er ikke children lenger en _implicit type_. Tanken er at
+ * TypeScript skal kunne oppdage når komponenten forventer children og ikke
+ * får det, eller at komponenten blir _gitt_ children men ikke forventer det.
+ *
+ * Om komponenten din ikke tar i mot children er det i prinsippet ikke noe du
+ * trenger å gjøre. Om den derimot tar i mot children bør du spesifisere det.
+ *
+ * Om du alltid forventer å få children, bruk WithChildren.
+ *
+ * @see WithChildren
+ * @see https://solverfox.dev/writing/no-implicit-children/
+ */
+export interface WithOptionalChildren {
+    children?: ReactNode | ReactNode[];
+}

package/build/es/components/menu/MenuItemCheckbox.js

@@ -1,2 +1,2 @@
-import{jsxs as o,jsx as n}from"react/jsx-runtime";import i from"classnames";import{forwardRef as c}from"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import{useSwipeGesture as s}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import{CheckIcon as e}from"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";const r=c(((c,r)=>{const{"aria-checked":t,className:m,children:a,icon:l,onChange:p,onClick:j,onPointerCancel:I,onPointerDown:h,onPointerMove:d,onPointerUp:u,onKeyDown:k,...w}=c,{gestureHandlers:g}=s({onClick:o=>{o.preventDefault(),null==p||p(o,!t),null==j||j(o)},onChange:(o,n)=>{n!==t&&(null==p||p(o,n))},onPointerCancel:I,onPointerDown:h,onPointerMove:d,onPointerUp:u});return o("div",{ref:r,tabIndex:-1,...w,role:"menuitemcheckbox","aria-checked":t,className:i("jkl-menu-item","jkl-menu-item--checkbox",m),...g,onKeyDown:o=>{"Enter"===o.key?null==p||p(o,!t):" "===o.key&&(o.preventDefault(),null==p||p(o,!t)),null==k||k(o)},children:[l&&n("span",{className:"jkl-menu-item__icon",children:l}),n("div",{className:"jkl-menu-item__content",children:a}),n("div",{className:"jkl-toggle-switch",children:n("div",{className:"jkl-toggle-switch-widget",children:o("div",{className:"jkl-toggle-switch-widget__slider",children:[n("div",{className:"jkl-toggle-switch-widget__knob"}),n(e,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));r.displayName="MenuItemCheckbox";export{r as MenuItemCheckbox};
+import{jsxs as o,jsx as n}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as c}from"react";import"../../hooks/useScreen/useScreen.js";import"../../hooks/useId/useId.js";import{useSwipeGesture as s}from"../../hooks/useSwipeGesture/useSwipeGesture.js";import"../icon/Icon.js";import"../icon/icons/animated/ArrowVerticalAnimated.js";import"../icon/icons/animated/ArrowHorizontalAnimated.js";import"../icon/icons/animated/PlusRemoveAnimated.js";import"../icon/icons/ArrowDownIcon.js";import"../icon/icons/ArrowLeftIcon.js";import"../icon/icons/ArrowNorthEastIcon.js";import"../icon/icons/ArrowRightIcon.js";import"../icon/icons/ArrowUpIcon.js";import"../icon/icons/CalendarIcon.js";import{CheckIcon as e}from"../icon/icons/CheckIcon.js";import"../icon/icons/ChevronDownIcon.js";import"../icon/icons/ChevronLeftIcon.js";import"../icon/icons/ChevronRightIcon.js";import"../icon/icons/ChevronUpIcon.js";import"../icon/icons/CloseIcon.js";import"../icon/icons/CopyIcon.js";import"../icon/icons/DotsIcon.js";import"../icon/icons/DragIcon.js";import"../icon/icons/ErrorIcon.js";import"../icon/icons/GreenCheckIcon.js";import"../icon/icons/HamburgerIcon.js";import"../icon/icons/InfoIcon.js";import"../icon/icons/LinkIcon.js";import"../icon/icons/PlusIcon.js";import"../icon/icons/QuestionIcon.js";import"../icon/icons/RedCrossIcon.js";import"../icon/icons/SearchIcon.js";import"../icon/icons/SuccessIcon.js";import"../icon/icons/WarningIcon.js";import"../icon/icons/MinusIcon.js";import"../icon/icons/ThumbDownIcon.js";import"../icon/icons/ThumbUpIcon.js";import"../icon/icons/TrashCanIcon.js";import"../icon/icons/PenIcon.js";const r=c(((c,r)=>{const{"aria-checked":t,className:m,children:a,icon:l,onChange:p,onClick:j,onPointerCancel:I,onPointerDown:h,onPointerMove:d,onPointerUp:u,onKeyDown:k,...w}=c,{gestureHandlers:g}=s({onClick:o=>{o.preventDefault(),null==p||p(o,!t),null==j||j(o)},onChange:(o,n)=>{n!==t&&(null==p||p(o,n))},onPointerCancel:I,onPointerDown:h,onPointerMove:d,onPointerUp:u});return o("div",{ref:r,tabIndex:-1,...w,role:"menuitemcheckbox","aria-checked":t,className:i("jkl-menu-item","jkl-menu-item--checkbox",m),...g,onKeyDown:o=>{"Enter"===o.key?null==p||p(o,!t):" "===o.key&&(o.preventDefault(),null==p||p(o,!t)),null==k||k(o)},children:[l&&n("span",{className:"jkl-menu-item__icon",children:l}),n("div",{className:"jkl-menu-item__content",children:a}),n("div",{className:"jkl-toggle-switch",children:n("div",{className:"jkl-toggle-switch-widget",children:o("div",{className:"jkl-toggle-switch-widget__slider",children:[n("div",{className:"jkl-toggle-switch-widget__knob"}),n(e,{variant:"small",bold:!0,className:"jkl-toggle-switch-widget__indicator"})]})})})]})}));r.displayName="MenuItemCheckbox";export{r as MenuItemCheckbox};
 //# sourceMappingURL=MenuItemCheckbox.js.map

package/build/es/components/menu/MenuItemCheckbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import cn from \"classnames\";\nimport React, {\n    forwardRef,\n    type HTMLAttributes,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { useSwipeGesture, type SwipeChangeHandler } from \"../../hooks\";\nimport { CheckIcon } from \"../icon\";\n\nexport interface MenuItemCheckboxProps extends Omit<HTMLAttributes<HTMLDivElement>, \"aria-checked\" | \"onChange\"> {\n    \"aria-checked\": boolean;\n    /**\n     * Et ikon som vises før innholdet i menypunktet\n     */\n    icon?: ReactNode;\n    onChange?: SwipeChangeHandler<HTMLDivElement> &\n        ((event: React.KeyboardEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>, pressed: boolean) => void);\n}\n\nexport const MenuItemCheckbox = forwardRef<HTMLDivElement, MenuItemCheckboxProps>((props, ref) => {\n    const {\n        \"aria-checked\": checked,\n        className,\n        children,\n        icon,\n        onChange,\n        onClick,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n        onKeyDown,\n        ...rest\n    } = props;\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n        event.preventDefault(); // Prevents the menu from closing on toggle\n        onChange?.(event, !checked);\n        onClick?.(event);\n    };\n\n    const handleChange: SwipeChangeHandler<HTMLDivElement> = (event, toggleTo) => {\n        if (toggleTo !== checked) {\n            onChange?.(event, toggleTo);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n        if (event.key === \"Enter\") {\n            onChange?.(event, !checked);\n        } else if (event.key === \" \") {\n            event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n            onChange?.(event, !checked);\n        }\n        onKeyDown?.(event);\n    };\n\n    const { gestureHandlers } = useSwipeGesture({\n        onClick: handleClick,\n        onChange: handleChange,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n    });\n\n    return (\n        <div\n            ref={ref}\n            tabIndex={-1}\n            {...rest}\n            role=\"menuitemcheckbox\"\n            aria-checked={checked}\n            className={cn(\"jkl-menu-item\", \"jkl-menu-item--checkbox\", className)}\n            {...gestureHandlers}\n            onKeyDown={handleKeyDown}\n        >\n            {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n            <div className=\"jkl-menu-item__content\">{children}</div>\n            <div className=\"jkl-toggle-switch\">\n                <div className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon variant=\"small\" bold className=\"jkl-toggle-switch-widget__indicator\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","cn","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"qmDAqBO,MAAMA,EAAmBC,GAAkD,CAACC,EAAOC,KAChF,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GAwBIc,gBAAAA,GAAoBC,EAAgB,CACxCR,QAvBoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EAAAA,EAqBVV,SAlBqD,CAACU,EAAOE,KACzDA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,GAAAA,EAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EAAG,gBAAiB,0BAA2BnB,MACtDW,EACJF,UA5BqDI,IACvC,UAAdA,EAAMO,IACK,MAAAjB,GAAAA,EAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,IAEvB,MAAAU,GAAAA,EAAYI,EAAAA,EAuBPZ,SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,qCACdsB,EAAU,CAAAC,QAAQ,QAAQC,MAAI,EAACxB,UAAU,iDAGtD,IAKZL,EAAiB8B,YAAc"}
+{"version":3,"file":"MenuItemCheckbox.js","sources":["../../../../src/components/menu/MenuItemCheckbox.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    forwardRef,\n    type HTMLAttributes,\n    type KeyboardEventHandler,\n    type MouseEventHandler,\n    type ReactNode,\n} from \"react\";\nimport { useSwipeGesture, type SwipeChangeHandler } from \"../../hooks\";\nimport { CheckIcon } from \"../icon\";\n\nexport interface MenuItemCheckboxProps extends Omit<HTMLAttributes<HTMLDivElement>, \"aria-checked\" | \"onChange\"> {\n    \"aria-checked\": boolean;\n    /**\n     * Et ikon som vises før innholdet i menypunktet\n     */\n    icon?: ReactNode;\n    onChange?: SwipeChangeHandler<HTMLDivElement> &\n        ((event: React.KeyboardEvent<HTMLDivElement> | React.PointerEvent<HTMLDivElement>, pressed: boolean) => void);\n}\n\nexport const MenuItemCheckbox = forwardRef<HTMLDivElement, MenuItemCheckboxProps>((props, ref) => {\n    const {\n        \"aria-checked\": checked,\n        className,\n        children,\n        icon,\n        onChange,\n        onClick,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n        onKeyDown,\n        ...rest\n    } = props;\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (event) => {\n        event.preventDefault(); // Prevents the menu from closing on toggle\n        onChange?.(event, !checked);\n        onClick?.(event);\n    };\n\n    const handleChange: SwipeChangeHandler<HTMLDivElement> = (event, toggleTo) => {\n        if (toggleTo !== checked) {\n            onChange?.(event, toggleTo);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {\n        if (event.key === \"Enter\") {\n            onChange?.(event, !checked);\n        } else if (event.key === \" \") {\n            event.preventDefault(); // Prevents the menu from closing on toggle, https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/menuitemcheckbox_role#keyboard_interactions\n            onChange?.(event, !checked);\n        }\n        onKeyDown?.(event);\n    };\n\n    const { gestureHandlers } = useSwipeGesture({\n        onClick: handleClick,\n        onChange: handleChange,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n    });\n\n    return (\n        <div\n            ref={ref}\n            tabIndex={-1}\n            {...rest}\n            role=\"menuitemcheckbox\"\n            aria-checked={checked}\n            className={clsx(\"jkl-menu-item\", \"jkl-menu-item--checkbox\", className)}\n            {...gestureHandlers}\n            onKeyDown={handleKeyDown}\n        >\n            {icon && <span className=\"jkl-menu-item__icon\">{icon}</span>}\n            <div className=\"jkl-menu-item__content\">{children}</div>\n            <div className=\"jkl-toggle-switch\">\n                <div className=\"jkl-toggle-switch-widget\">\n                    <div className=\"jkl-toggle-switch-widget__slider\">\n                        <div className=\"jkl-toggle-switch-widget__knob\" />\n                        <CheckIcon variant=\"small\" bold className=\"jkl-toggle-switch-widget__indicator\" />\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n});\n\nMenuItemCheckbox.displayName = \"MenuItemCheckbox\";\n"],"names":["MenuItemCheckbox","forwardRef","props","ref","checked","className","children","icon","onChange","onClick","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","onKeyDown","rest","gestureHandlers","useSwipeGesture","event","preventDefault","toggleTo","jsxs","tabIndex","role","clsx","key","jsx","CheckIcon","variant","bold","displayName"],"mappings":"ynDAqBO,MAAMA,EAAmBC,GAAkD,CAACC,EAAOC,KAChF,MACF,eAAgBC,EAChBC,UAAAA,EACAC,SAAAA,EACAC,KAAAA,EACAC,SAAAA,EACAC,QAAAA,EACAC,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,EACAC,UAAAA,KACGC,GACHb,GAwBIc,gBAAAA,GAAoBC,EAAgB,CACxCR,QAvBoDS,IACpDA,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,GACnB,MAAAK,GAAAA,EAAUS,EAAAA,EAqBVV,SAlBqD,CAACU,EAAOE,KACzDA,IAAahB,IACb,MAAAI,GAAAA,EAAWU,EAAOE,GAAAA,EAiBtBV,gBAAAA,EACAC,cAAAA,EACAC,cAAAA,EACAC,YAAAA,IAIA,OAAAQ,EAAC,MAAA,CACGlB,IAAAA,EACAmB,UAAU,KACNP,EACJQ,KAAK,mBACL,eAAcnB,EACdC,UAAWmB,EAAK,gBAAiB,0BAA2BnB,MACxDW,EACJF,UA5BqDI,IACvC,UAAdA,EAAMO,IACK,MAAAjB,GAAAA,EAAAU,GAAQd,GACE,MAAdc,EAAMO,MACbP,EAAMC,iBACK,MAAAX,GAAAA,EAAAU,GAAQd,IAEvB,MAAAU,GAAAA,EAAYI,EAAAA,EAuBPZ,SAAA,CAAAC,GAASmB,EAAA,OAAA,CAAKrB,UAAU,sBAAuBC,SAAKC,IACpDmB,EAAA,MAAA,CAAIrB,UAAU,yBAA0BC,SAAAA,IACzCoB,EAAC,MAAI,CAAArB,UAAU,oBACXC,SAAAoB,EAAC,MAAI,CAAArB,UAAU,2BACXC,SAAAe,EAAC,MAAI,CAAAhB,UAAU,mCACXC,SAAA,CAACoB,EAAA,MAAA,CAAIrB,UAAU,qCACdsB,EAAU,CAAAC,QAAQ,QAAQC,MAAI,EAACxB,UAAU,iDAGtD,IAKZL,EAAiB8B,YAAc"}

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';