@fremtind/jokul 4.3.0 → 5.0.0-next.1

package/build/es/components/list/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list/ListItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { WithChildren } from \"../../core/types.js\";\n\nexport interface ListItemProps extends WithChildren {\n    className?: string;\n}\n\ntype ValidListItems = \"normal\" | \"check\" | \"cross\";\n\nfunction makeListItem(listItemType: ValidListItems): FC<ListItemProps> {\n    const ListItem: FC<ListItemProps> = ({ className, children, ...rest }) => {\n        return (\n            <li\n                className={clsx(\"jkl-list__item\", className, {\n                    \"jkl-list__item--iconed\": listItemType !== \"normal\",\n                    \"jkl-list__item--check\": listItemType === \"check\",\n                    \"jkl-list__item--cross\": listItemType === \"cross\",\n                })}\n                data-testid=\"jkl-list-item\"\n                {...rest}\n            >\n                {children}\n            </li>\n        );\n    };\n    return ListItem;\n}\n\nexport const ListItem = makeListItem(\"normal\");\nListItem.displayName = \"ListItem\";\nexport const CrossListItem = makeListItem(\"cross\");\nCrossListItem.displayName = \"CrossListItem\";\nexport const CheckListItem = makeListItem(\"check\");\nCheckListItem.displayName = \"CheckListItem\";\n"],"names":["makeListItem","listItemType","className","children","rest","jsx","clsx","ListItem","displayName","CrossListItem","CheckListItem"],"mappings":"oGAUA,SAASA,EAAaC,GAgBlB,MAfoC,EAAGC,UAAAA,EAAWC,SAAAA,KAAaC,KAEvDC,EAAC,KAAA,CACGH,UAAWI,EAAK,iBAAkBJ,EAAW,CACzC,yBAA2C,WAAjBD,EAC1B,wBAA0C,UAAjBA,EACzB,wBAA0C,UAAjBA,IAE7B,cAAY,mBACRG,EAEHD,SAAAA,GAKjB,CAEO,MAAMI,EAAWP,EAAa,UACrCO,EAASC,YAAc,WAChB,MAAMC,EAAgBT,EAAa,SAC1CS,EAAcD,YAAc,gBACrB,MAAME,EAAgBV,EAAa,SAC1CU,EAAcF,YAAc"}
+{"version":3,"file":"ListItem.js","sources":["../../../../src/components/list/ListItem.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { type FC } from \"react\";\nimport type { WithChildren } from \"../../utilities/types.js\";\n\nexport interface ListItemProps extends WithChildren {\n    className?: string;\n}\n\ntype ValidListItems = \"normal\" | \"check\" | \"cross\";\n\nfunction makeListItem(listItemType: ValidListItems): FC<ListItemProps> {\n    const ListItem: FC<ListItemProps> = ({ className, children, ...rest }) => {\n        return (\n            <li\n                className={clsx(\"jkl-list__item\", className, {\n                    \"jkl-list__item--iconed\": listItemType !== \"normal\",\n                    \"jkl-list__item--check\": listItemType === \"check\",\n                    \"jkl-list__item--cross\": listItemType === \"cross\",\n                })}\n                data-testid=\"jkl-list-item\"\n                {...rest}\n            >\n                {children}\n            </li>\n        );\n    };\n    return ListItem;\n}\n\nexport const ListItem = makeListItem(\"normal\");\nListItem.displayName = \"ListItem\";\nexport const CrossListItem = makeListItem(\"cross\");\nCrossListItem.displayName = \"CrossListItem\";\nexport const CheckListItem = makeListItem(\"check\");\nCheckListItem.displayName = \"CheckListItem\";\n"],"names":["makeListItem","listItemType","className","children","rest","jsx","clsx","ListItem","displayName","CrossListItem","CheckListItem"],"mappings":"oGAUA,SAASA,EAAaC,GAgBlB,MAfoC,EAAGC,UAAAA,EAAWC,SAAAA,KAAaC,KAEvDC,EAAC,KAAA,CACGH,UAAWI,EAAK,iBAAkBJ,EAAW,CACzC,yBAA2C,WAAjBD,EAC1B,wBAA0C,UAAjBA,EACzB,wBAA0C,UAAjBA,IAE7B,cAAY,mBACRG,EAEHD,SAAAA,GAKjB,CAEO,MAAMI,EAAWP,EAAa,UACrCO,EAASC,YAAc,WAChB,MAAMC,EAAgBT,EAAa,SAC1CS,EAAcD,YAAc,gBACrB,MAAME,EAAgBV,EAAa,SAC1CU,EAAcF,YAAc"}

package/build/es/components/logo/types.d.ts

@@ -1,5 +1,5 @@
 import { CSSProperties } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface LogoProps {
     className?: string;
     id?: string;

package/build/es/components/menu/types.d.ts

@@ -1,8 +1,8 @@
 import { Placement } from '@floating-ui/react';
 import { ButtonHTMLAttributes, HTMLAttributes, ReactNode } from 'react';
-import { DataTestAutoId, WithChildren } from '../../core/types.js';
 import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
 import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
+import { DataTestAutoId, WithChildren } from '../../utilities/types.js';
 export interface MenuProps extends DataTestAutoId, WithChildren, Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
     className?: string;
     /**

package/build/es/components/modal/Modal.d.ts

@@ -1,10 +1,17 @@
 import { default as React } from 'react';
 import { IconButtonProps } from '../icon-button/types.js';
-import { BaseModalProps, ModalContainerProps, ModalProps } from './types.js';
+import { BaseModalProps, ModalProps } from './types.js';
 /**
  * Ment å brukes med `useModal`.
  */
-export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<ModalContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ModalContainer: React.ForwardRefExoticComponent<Omit<{
+    id: string;
+    ref: (node: React.ReactNode | HTMLElement) => void;
+    role: string;
+    'aria-modal': boolean;
+    'aria-hidden': boolean;
+    'aria-labelledby': string;
+} & BaseModalProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 /**
  * Ment å brukes med `useModal`.
  */

package/build/es/components/modal/Modal.js

@@ -1,2 +1,2 @@
-import{jsx as a}from"react/jsx-runtime";import{c as l}from"../../../clsx-BeLtu-UY.js";import{forwardRef as o}from"react";import{IconButton as s}from"../icon-button/IconButton.js";import{CloseIcon as e}from"../icon/icons/CloseIcon.js";const d=o(({className:o,placement:s="center",slideIn:e,...d},t)=>a("div",{className:l("jkl-modal-container",`jkl-modal-container--placement-${s}`,{"jkl-modal-container--slide-in":e},o),...d,ref:t,"data-portal":!0}));d.displayName="ModalContainer";const t=o(({className:o,transparent:s,...e},d)=>a("div",{className:l("jkl-modal-overlay",o,{"jkl-modal-overlay--transparent":s}),...e,ref:d}));t.displayName="ModalOverlay";const m=o(({className:o,component:s,padding:e,style:d,...t},m)=>a(s||"div",{className:l("jkl jkl-modal",o),style:{"--modal-padding":e?`var(--jkl-spacing-${e})`:void 0,...d},...t,ref:m}));m.displayName="Modal";const n=o(({className:o,...s},e)=>a("div",{className:l("jkl-modal-header",o),...s,ref:e}));n.displayName="ModalHeader";const c=o(({className:o,...s},e)=>a("p",{className:l("jkl-modal-title",o),...s,ref:e}));c.displayName="ModalTitle";const i=o(({className:o,...d},t)=>a(s,{className:l("jkl-modal-close",o),"data-testautoid":"jkl-modal-close",...d,ref:t,children:a(e,{variant:"medium"})}));i.displayName="ModalCloseButton";const r=o(({className:o,...s},e)=>a("div",{className:l("jkl-modal-body",o),...s,ref:e}));r.displayName="ModalBody";const p=o(({className:o,...s},e)=>a("div",{className:l("jkl-modal-actions",o),...s,ref:e}));p.displayName="ModalActions";export{m as Modal,p as ModalActions,r as ModalBody,i as ModalCloseButton,d as ModalContainer,n as ModalHeader,t as ModalOverlay,c as ModalTitle};
+import{jsx as a}from"react/jsx-runtime";import{c as s}from"../../../clsx-BeLtu-UY.js";import{forwardRef as l}from"react";import{IconButton as o}from"../icon-button/IconButton.js";import{CloseIcon as e}from"../icon/icons/CloseIcon.js";const d=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-container",l),...o,ref:e,"data-portal":!0}));d.displayName="ModalContainer";const t=l(({className:l,transparent:o,...e},d)=>a("div",{className:s("jkl-modal-overlay",l,{"jkl-modal-overlay--transparent":o}),...e,ref:d}));t.displayName="ModalOverlay";const m=l(({className:l,component:o,padding:e,style:d,...t},m)=>a(o||"div",{className:s("jkl jkl-modal",l),style:{"--jkl-modal-padding":e?`var(--jkl-spacing-${e})`:void 0,...d},...t,ref:m}));m.displayName="Modal";const c=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-header",l),...o,ref:e}));c.displayName="ModalHeader";const r=l(({className:l,...o},e)=>a("p",{className:s("jkl-modal-title",l),...o,ref:e}));r.displayName="ModalTitle";const n=l(({className:l,...d},t)=>a(o,{className:s("jkl-modal-close",l),"data-testautoid":"jkl-modal-close",...d,ref:t,children:a(e,{variant:"medium"})}));n.displayName="ModalCloseButton";const i=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-body",l),...o,ref:e}));i.displayName="ModalBody";const N=l(({className:l,...o},e)=>a("div",{className:s("jkl-modal-actions",l),...o,ref:e}));N.displayName="ModalActions";export{m as Modal,N as ModalActions,i as ModalBody,n as ModalCloseButton,d as ModalContainer,c as ModalHeader,t as ModalOverlay,r as ModalTitle};
 //# sourceMappingURL=Modal.js.map

package/build/es/components/modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n    BaseModalProps,\n    ModalConfig,\n    ModalContainerProps,\n    ModalOverlayProps,\n    ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<HTMLDivElement, ModalContainerProps>(\n    ({ className, placement = \"center\", slideIn, ...rest }, ref) => {\n        // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n        return (\n            <div\n                className={clsx(\n                    \"jkl-modal-container\",\n                    `jkl-modal-container--placement-${placement}`,\n                    { \"jkl-modal-container--slide-in\": slideIn },\n                    className,\n                )}\n                {...rest}\n                ref={ref}\n                data-portal\n            />\n        );\n    },\n);\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","placement","slideIn","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAgBO,MAAMA,EAAiBC,EAC1B,EAAGC,UAAAA,EAAWC,UAAAA,EAAY,SAAUC,QAAAA,KAAYC,GAAQC,IAGhDC,EAAC,MAAA,CACGL,UAAWM,EACP,sBACA,kCAAkCL,IAClC,CAAE,gCAAiCC,GACnCF,MAEAG,EACJC,IAAAA,EACA,eAAW,KAK3BN,EAAeS,YAAc,iBAKtB,MAAMC,EAAeT,EACxB,EAAGC,UAAAA,EAAWS,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGL,UAAWM,EAAK,oBAAqBN,EAAW,CAC5C,iCAAkCS,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQX,EACjB,EAAGC,UAAAA,EAAWW,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGX,UAAWM,EAAK,gBAAiBN,GACjCa,MACI,CACI,kBAAmBD,EACb,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,KAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcf,EACvB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAC,MAAA,CACGL,UAAWM,EAAK,mBAAoBN,MAChCG,EACJC,IAAAA,KAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAahB,EAGxB,EAAGC,UAAAA,KAAcG,GAAQC,MACtB,IAAA,CAAEJ,UAAWM,EAAK,kBAAmBN,MAAgBG,EAAMC,IAAAA,KAEhEW,EAAWR,YAAc,aAKlB,MAAMS,EAAmBjB,EAK9B,EAAGC,UAAAA,KAAcG,GAAQC,IACvBC,EAACY,EAAA,CACGjB,UAAWM,EAAK,kBAAmBN,GACnC,kBAAgB,qBACZG,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAA,CAAUC,QAAQ,cAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYtB,EACrB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAC,MAAA,CACGL,UAAWM,EAAK,iBAAkBN,MAC9BG,EACJC,IAAAA,KAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAevB,EACxB,EAAGC,UAAAA,KAAcG,GAAQC,IACrBC,EAAC,MAAA,CACGL,UAAWM,EAAK,oBAAqBN,MACjCG,EACJC,IAAAA,KAIZkB,EAAaf,YAAc"}
+{"version":3,"file":"Modal.js","sources":["../../../../src/components/modal/Modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport type { IconButtonProps } from \"../icon-button/types.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport type {\n    BaseModalProps,\n    ModalConfig,\n    ModalOverlayProps,\n    ModalProps,\n} from \"./types.js\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalContainer = forwardRef<\n    HTMLDivElement,\n    ModalConfig[\"container\"] & BaseModalProps\n>(({ className, ...rest }, ref) => {\n    // TODO: 'data-portal' fjernes når modalen tar i bruk Popover komponenten. Issue: https://github.com/fremtind/jokul/issues/4356\n    return (\n        <div\n            className={clsx(\"jkl-modal-container\", className)}\n            {...rest}\n            ref={ref}\n            data-portal\n        />\n    );\n});\nModalContainer.displayName = \"ModalContainer\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalOverlay = forwardRef<HTMLDivElement, ModalOverlayProps>(\n    ({ className, transparent, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-overlay\", className, {\n                \"jkl-modal-overlay--transparent\": transparent,\n            })}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalOverlay.displayName = \"ModalOverlay\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const Modal = forwardRef<HTMLElement, ModalConfig[\"modal\"] & ModalProps>(\n    ({ className, component, padding, style, ...rest }, ref) => {\n        const C = component || \"div\";\n        return (\n            <C\n                className={clsx(\"jkl jkl-modal\", className)}\n                style={\n                    {\n                        \"--jkl-modal-padding\": padding\n                            ? `var(--jkl-spacing-${padding})`\n                            : undefined,\n                        ...style,\n                    } as React.CSSProperties\n                }\n                {...rest}\n                ref={ref}\n            />\n        );\n    },\n);\nModal.displayName = \"Modal\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalHeader = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-header\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalHeader.displayName = \"ModalHeader\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalTitle = forwardRef<\n    HTMLParagraphElement,\n    ModalConfig[\"title\"] & BaseModalProps\n>(({ className, ...rest }, ref) => (\n    <p className={clsx(\"jkl-modal-title\", className)} {...rest} ref={ref} />\n));\nModalTitle.displayName = \"ModalTitle\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalCloseButton = forwardRef<\n    HTMLButtonElement,\n    Omit<ModalConfig[\"closeButton\"], \"onClick\"> &\n        BaseModalProps &\n        IconButtonProps\n>(({ className, ...rest }, ref) => (\n    <IconButton\n        className={clsx(\"jkl-modal-close\", className)}\n        data-testautoid=\"jkl-modal-close\"\n        {...rest}\n        ref={ref}\n    >\n        <CloseIcon variant=\"medium\" />\n    </IconButton>\n));\nModalCloseButton.displayName = \"ModalCloseButton\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalBody = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-body\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalBody.displayName = \"ModalBody\";\n\n/**\n * Ment å brukes med `useModal`.\n */\nexport const ModalActions = forwardRef<HTMLDivElement, BaseModalProps>(\n    ({ className, ...rest }, ref) => (\n        <div\n            className={clsx(\"jkl-modal-actions\", className)}\n            {...rest}\n            ref={ref}\n        />\n    ),\n);\nModalActions.displayName = \"ModalActions\";\n"],"names":["ModalContainer","forwardRef","className","rest","ref","jsx","clsx","displayName","ModalOverlay","transparent","Modal","component","padding","style","ModalHeader","ModalTitle","ModalCloseButton","IconButton","children","CloseIcon","variant","ModalBody","ModalActions"],"mappings":"0OAeO,MAAMA,EAAiBC,EAG5B,EAAGC,UAAAA,KAAcC,GAAQC,IAGnBC,EAAC,MAAA,CACGH,UAAWI,EAAK,sBAAuBJ,MACnCC,EACJC,IAAAA,EACA,eAAW,KAIvBJ,EAAeO,YAAc,iBAKtB,MAAMC,EAAeP,EACxB,EAAGC,UAAAA,EAAWO,YAAAA,KAAgBN,GAAQC,IAClCC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,EAAW,CAC5C,iCAAkCO,OAElCN,EACJC,IAAAA,KAIZI,EAAaD,YAAc,eAKpB,MAAMG,EAAQT,EACjB,EAAGC,UAAAA,EAAWS,UAAAA,EAAWC,QAAAA,EAASC,MAAAA,KAAUV,GAAQC,IAG5CC,EAFMM,GAAa,MAElB,CACGT,UAAWI,EAAK,gBAAiBJ,GACjCW,MACI,CACI,sBAAuBD,EACjB,qBAAqBA,UACrB,KACHC,MAGPV,EACJC,IAAAA,KAKhBM,EAAMH,YAAc,QAKb,MAAMO,EAAcb,EACvB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,mBAAoBJ,MAChCC,EACJC,IAAAA,KAIZU,EAAYP,YAAc,cAKnB,MAAMQ,EAAad,EAGxB,EAAGC,UAAAA,KAAcC,GAAQC,MACtB,IAAA,CAAEF,UAAWI,EAAK,kBAAmBJ,MAAgBC,EAAMC,IAAAA,KAEhEW,EAAWR,YAAc,aAKlB,MAAMS,EAAmBf,EAK9B,EAAGC,UAAAA,KAAcC,GAAQC,IACvBC,EAACY,EAAA,CACGf,UAAWI,EAAK,kBAAmBJ,GACnC,kBAAgB,qBACZC,EACJC,IAAAA,EAEAc,SAAAb,EAACc,EAAA,CAAUC,QAAQ,cAG3BJ,EAAiBT,YAAc,mBAKxB,MAAMc,EAAYpB,EACrB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,iBAAkBJ,MAC9BC,EACJC,IAAAA,KAIZiB,EAAUd,YAAc,YAKjB,MAAMe,EAAerB,EACxB,EAAGC,UAAAA,KAAcC,GAAQC,IACrBC,EAAC,MAAA,CACGH,UAAWI,EAAK,oBAAqBJ,MACjCC,EACJC,IAAAA,KAIZkB,EAAaf,YAAc"}

package/build/es/components/modal/index.d.ts

@@ -1,3 +1,3 @@
 export { ModalContainer, ModalOverlay, Modal, ModalHeader, ModalTitle, ModalCloseButton, ModalBody, ModalActions, } from './Modal.js';
 export { useModal, type ModalInstance } from './useModal.js';
-export type { ModalProps, BaseModalProps, ModalContainerProps, ModalOverlayProps, UseModalOptions, ModalConfig, ModalPlacement, } from './types.js';
+export type { ModalProps, BaseModalProps, ModalOverlayProps, UseModalOptions, ModalConfig, } from './types.js';

package/build/es/components/modal/types.d.ts

@@ -1,6 +1,5 @@
 import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
-import { WithOptionalChildren } from '../../core/types.js';
-export type ModalPlacement = "center" | "left" | "bottom" | "right";
+import { WithOptionalChildren } from '../../utilities/types.js';
 export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
     id?: string;
     /**
@@ -35,26 +34,9 @@ export interface ModalProps extends WithOptionalChildren {
     padding?: 16 | 24 | 40;
 }
 export type BaseModalProps = Omit<ModalProps, "padding" | "component">;
-export type ModalContainerProps = ModalConfig["container"] & BaseModalProps & {
-    /**
-     * Plassering og animasjon styres av containeren, siden det er den som
-     * håndterer viewport-layout og `aria-hidden`-tilstand.
-     *
-     * @default "center"
-     */
-    placement?: ModalPlacement;
-    /**
-     * Slå på enkel slide-in-animasjon når modalen vises.
-     *
-     * @default false
-     */
-    slideIn?: boolean;
-};
 export type ModalOverlayProps = ModalConfig["overlay"] & BaseModalProps & {
     /**
      * Rendre uten bakgrunnsfarge, men med click target for å lukke modalen ved klikk utenfor.
-     *
-     * @default false
      */
     transparent?: boolean;
 };

package/build/es/components/nav-link/index.d.ts

@@ -1,4 +1,4 @@
 export { NavLink } from './NavLink.js';
 export type { NavLinkProps } from './types.js';
-export { NavLink as BETA_NavLink } from '../../components-beta/nav-link/NavLink.js';
-export type { NavLinkProps as BETA_NavLinkProps } from '../../components-beta/nav-link/types.js';
+export { NavLink as BETA_NavLink } from '../beta/nav-link/NavLink.jsx';
+export type { NavLinkProps as BETA_NavLinkProps } from '../beta/nav-link/types.js';

package/build/es/components/nav-link/index.js

@@ -1,2 +1,2 @@
-import{NavLink as a}from"./NavLink.js";import{NavLink as n}from"../../components-beta/nav-link/NavLink.js";export{n as BETA_NavLink,a as NavLink};
+import{NavLink as a}from"./NavLink.js";import{NavLink as i}from"../beta/nav-link/NavLink.js";export{i as BETA_NavLink,a as NavLink};
 //# sourceMappingURL=index.js.map

package/build/es/components/radio-button/radioGroupContext.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ChangeEventHandler } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 type RadioGroupContext = {
     name: string | undefined;
     value: string | undefined;

package/build/es/components/radio-button/radioGroupContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, {\n    createContext,\n    useContext,\n    type ChangeEventHandler,\n} from \"react\";\nimport type { WithChildren } from \"../../core/types.js\";\n\ntype RadioGroupContext = {\n    name: string | undefined;\n    value: string | undefined;\n    inline: boolean;\n    invalid: boolean;\n    onChange: ChangeEventHandler<HTMLInputElement> | undefined;\n};\n\nconst radioGroupContext = createContext<RadioGroupContext>({\n    name: undefined,\n    value: undefined,\n    onChange: () => {\n        return;\n    },\n    inline: false,\n    invalid: false,\n});\n\nexport const useRadioGroupContext = (): RadioGroupContext =>\n    useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n    state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({\n    state,\n    children,\n}) => (\n    <radioGroupContext.Provider value={state}>\n        {children}\n    </radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","Provider"],"mappings":"8FAeA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,SAAS,IAGAC,EAAuB,IAChCC,EAAWR,GAMFS,EAA6C,EACtDC,MAAAA,EACAC,SAAAA,OAECX,EAAkBY,SAAlB,CAA2BT,MAAOO,EAC9BC,SAAAA"}
+{"version":3,"file":"radioGroupContext.js","sources":["../../../../src/components/radio-button/radioGroupContext.tsx"],"sourcesContent":["import React, {\n    createContext,\n    useContext,\n    type ChangeEventHandler,\n} from \"react\";\nimport type { WithChildren } from \"../../utilities/types.js\";\n\ntype RadioGroupContext = {\n    name: string | undefined;\n    value: string | undefined;\n    inline: boolean;\n    invalid: boolean;\n    onChange: ChangeEventHandler<HTMLInputElement> | undefined;\n};\n\nconst radioGroupContext = createContext<RadioGroupContext>({\n    name: undefined,\n    value: undefined,\n    onChange: () => {\n        return;\n    },\n    inline: false,\n    invalid: false,\n});\n\nexport const useRadioGroupContext = (): RadioGroupContext =>\n    useContext(radioGroupContext);\n\ninterface Props extends WithChildren {\n    state: RadioGroupContext;\n}\n\nexport const RadioGroupContextProvider: React.FC<Props> = ({\n    state,\n    children,\n}) => (\n    <radioGroupContext.Provider value={state}>\n        {children}\n    </radioGroupContext.Provider>\n);\n"],"names":["radioGroupContext","createContext","name","value","onChange","inline","invalid","useRadioGroupContext","useContext","RadioGroupContextProvider","state","children","Provider"],"mappings":"8FAeA,MAAMA,EAAoBC,EAAiC,CACvDC,UAAM,EACNC,WAAO,EACPC,SAAU,OAGVC,QAAQ,EACRC,SAAS,IAGAC,EAAuB,IAChCC,EAAWR,GAMFS,EAA6C,EACtDC,MAAAA,EACAC,SAAAA,OAECX,EAAkBY,SAAlB,CAA2BT,MAAOO,EAC9BC,SAAAA"}

package/build/es/components/screen-reader-only/types.d.ts

@@ -1,4 +1,4 @@
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface ScreenReaderOnlyProps extends WithChildren {
     showOnFocus?: boolean;
 }

package/build/es/components/select/index.d.ts

@@ -1,5 +1,5 @@
 export { Select } from './Select.js';
 export { NativeSelect } from './NativeSelect.js';
 export type { SelectProps, SelectChangeEventHandler, SelectPartialChangeEvent, NativeSelectProps, } from './types.js';
-export { Select as BETA_Select } from '../../components-beta/select/Select.js';
-export type { SelectProps as BETA_SelectProps } from '../../components-beta/select/types.js';
+export { Select as BETA_Select } from '../beta/select/Select.jsx';
+export type { SelectProps as BETA_SelectProps } from '../beta/select/types.js';

package/build/es/components/select/index.js

@@ -1,2 +1,2 @@
-import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";import{Select as c}from"../../components-beta/select/Select.js";export{c as BETA_Select,t as NativeSelect,e as Select};
+import{Select as e}from"./Select.js";import{NativeSelect as t}from"./NativeSelect.js";import{Select as a}from"../beta/select/Select.js";export{a as BETA_Select,t as NativeSelect,e as Select};
 //# sourceMappingURL=index.js.map

package/build/es/components/select/types.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEvent, SelectHTMLAttributes } from 'react';
-import { DataTestAutoId } from '../../core/types.js';
+import { DataTestAutoId } from '../../utilities/types.js';
 import { ValuePair } from '../../utilities/valuePair.js';
 import { LabelProps, InputGroupProps } from '../input-group/types.js';
 export interface NativeSelectProps extends Omit<InputGroupProps, "children">, SelectHTMLAttributes<HTMLSelectElement> {

package/build/es/components/system-message/types.d.ts

@@ -1,4 +1,4 @@
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface SystemMessageProps extends WithChildren {
     id?: string;
     className?: string;

package/build/es/components/table/types.d.ts

@@ -1,5 +1,5 @@
 import { default as React, ChangeEventHandler, ColgroupHTMLAttributes, ColHTMLAttributes, HTMLAttributes, ReactNode, TableHTMLAttributes, TdHTMLAttributes, ThHTMLAttributes } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 import { TableSortProps } from './utils.js';
 export interface DataTableProps extends TableHTMLAttributes<HTMLTableElement> {
     /** Beskrivelse av tabellen for skjermlesere */

package/build/es/components/table-of-contents/TableOfContents.d.ts

@@ -2,5 +2,5 @@ import { default as React } from 'react';
 import { TableOfContentsProps } from './types.js';
 export declare const TableOfContents: {
     ({ label, className, ...rest }: TableOfContentsProps): React.JSX.Element;
-    Link: React.ForwardRefExoticComponent<Omit<import('../../index.js').PolymorphicPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
+    Link: React.ForwardRefExoticComponent<Omit<import('../../utilities/index.js').PolymorphicPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements>>, "ref"> & React.RefAttributes<unknown>>;
 };

package/build/es/components/tabs/types.d.ts

@@ -1,5 +1,5 @@
-import { WithChildren } from '../../core/types.js';
 import { PolymorphicPropsWithRef } from '../../utilities/index.js';
+import { WithChildren } from '../../utilities/types.js';
 export type NavTabProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     /**
      * Hook for å kunne stoppe default oppførsel ved tastaturnavigasjon.

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

@@ -1,6 +1,6 @@
 import { ToastOptions as StatelyToastOptions } from '@react-stately/toast';
 import { ReactNode } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 export type ToastContent = {
     content: ReactNode;
     title?: string;

package/build/es/components/toggle-switch/types.d.ts

@@ -1,6 +1,6 @@
 import { ButtonHTMLAttributes } from 'react';
-import { WithChildren } from '../../core/types.js';
 import { SwipeChangeHandler } from '../../hooks/useSwipeGesture/useSwipeGesture.js';
+import { WithChildren } from '../../utilities/types.js';
 export interface ToggleSliderProps extends WithChildren {
     labels: [string, string];
     onToggle: (value: string) => void;

package/build/es/components/tooltip/Tooltip.d.ts

@@ -1,6 +1,6 @@
 import { UseFloatingReturn, useInteractions } from '@floating-ui/react';
 import { default as React, FC } from 'react';
-import { WithChildren } from '../../core/types.js';
+import { WithChildren } from '../../utilities/types.js';
 import { TooltipProps } from './types.js';
 type UseTooltipReturn = {
     triggerOn: NonNullable<TooltipProps["triggerOn"]>;

package/build/es/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type UseFloatingReturn,\n    arrow,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, {\n    type FC,\n    createContext,\n    useContext,\n    useRef,\n    useState,\n} from \"react\";\nimport type { WithChildren } from \"../../core/types.js\";\nimport type { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<SVGSVGElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n    onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<SVGSVGElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) => {\n        description.current = element;\n    };\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: (open) => {\n            onOpenChange?.(open);\n            setOpen(open);\n        },\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(16),\n            flip(),\n            shift({ padding: 16 }),\n            arrow({ element: arrowElement, padding: 8 }),\n        ],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context);\n    const click = useClick(data.context, {\n        enabled: triggerOn === \"click\",\n    });\n    const hover = useHover(data.context, {\n        enabled: triggerOn === \"hover\",\n        delay: isOpen ? 0 : delay,\n    });\n    const focus = useFocus(data.context, {\n        enabled: triggerOn === \"hover\",\n    });\n\n    const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n    return {\n        triggerOn,\n        isOpen,\n        setOpen,\n        arrowElement,\n        ...data,\n        refs: {\n            ...data.refs,\n            description,\n            setDescription,\n        },\n        ...interactions,\n    };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> | null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n    const context = useContext(tooltipContext);\n\n    if (context === null) {\n        throw new Error(\n            \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n        );\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n    children,\n    ...options\n}) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"iUAqCA,MA8DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KAC7B,MAAMC,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIR,OAAOF,GAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEH,MAAMC,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAKzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACXT,IAAeS,GACfP,EAAQO,IAEZZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAEnE,MAAO,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA5CgBf,IACpBZ,EAAY4B,QAAUhB,OA6CnBY,IA0BSK,CAAWzC,GAE3B,OAAO0C,EAAClD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    type UseFloatingReturn,\n    arrow,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, {\n    type FC,\n    createContext,\n    useContext,\n    useRef,\n    useState,\n} from \"react\";\nimport type { WithChildren } from \"../../utilities/types.js\";\nimport type { TooltipProps } from \"./types.js\";\n\ntype UseTooltipReturn = {\n    triggerOn: NonNullable<TooltipProps[\"triggerOn\"]>;\n    isOpen: boolean;\n    setOpen: React.Dispatch<React.SetStateAction<boolean>>;\n    arrowElement: React.RefObject<SVGSVGElement>;\n    refs: {\n        description: React.MutableRefObject<HTMLElement | null>;\n        setDescription: (element: HTMLElement | null) => void;\n    } & UseFloatingReturn[\"refs\"];\n} & UseFloatingReturn &\n    ReturnType<typeof useInteractions>;\n\nconst useTooltip = ({\n    initialOpen = false,\n    placement = \"top\",\n    delay = 250,\n    triggerOn = \"hover\",\n    onOpenChange,\n}: TooltipProps): UseTooltipReturn => {\n    const [isOpen, setOpen] = useState(initialOpen);\n    const arrowElement = useRef<SVGSVGElement>(null);\n    const description = useRef<HTMLElement | null>(null);\n    const setDescription = (element: HTMLElement | null) => {\n        description.current = element;\n    };\n\n    const data = useFloating({\n        open: isOpen,\n        onOpenChange: (open) => {\n            onOpenChange?.(open);\n            setOpen(open);\n        },\n        placement,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(16),\n            flip(),\n            shift({ padding: 16 }),\n            arrow({ element: arrowElement, padding: 8 }),\n        ],\n    });\n\n    const role = useRole(data.context, { role: \"tooltip\" });\n    const dismiss = useDismiss(data.context);\n    const click = useClick(data.context, {\n        enabled: triggerOn === \"click\",\n    });\n    const hover = useHover(data.context, {\n        enabled: triggerOn === \"hover\",\n        delay: isOpen ? 0 : delay,\n    });\n    const focus = useFocus(data.context, {\n        enabled: triggerOn === \"hover\",\n    });\n\n    const interactions = useInteractions([dismiss, focus, role, click, hover]);\n\n    return {\n        triggerOn,\n        isOpen,\n        setOpen,\n        arrowElement,\n        ...data,\n        refs: {\n            ...data.refs,\n            description,\n            setDescription,\n        },\n        ...interactions,\n    };\n};\n\nexport type TooltipContext = ReturnType<typeof useTooltip> | null;\n\nconst tooltipContext = createContext<TooltipContext>(null);\n\nexport const TooltipProvider = tooltipContext.Provider;\n\nexport const useTooltipContext = () => {\n    const context = useContext(tooltipContext);\n\n    if (context === null) {\n        throw new Error(\n            \"Tooltip-komponentene kan kun brukes inne i <Tooltip />\",\n        );\n    }\n\n    return context;\n};\n\nexport const Tooltip: FC<TooltipProps & WithChildren> = ({\n    children,\n    ...options\n}) => {\n    const tooltip = useTooltip(options);\n\n    return <TooltipProvider value={tooltip}>{children}</TooltipProvider>;\n};\n"],"names":["tooltipContext","createContext","TooltipProvider","Provider","useTooltipContext","context","useContext","Error","Tooltip","children","options","tooltip","initialOpen","placement","delay","triggerOn","onOpenChange","isOpen","setOpen","useState","arrowElement","useRef","description","data","useFloating","open","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","padding","arrow","element","role","useRole","dismiss","useDismiss","click","useClick","enabled","hover","useHover","focus","useFocus","interactions","useInteractions","refs","setDescription","current","useTooltip","jsx","value"],"mappings":"iUAqCA,MA8DMA,EAAiBC,EAA8B,MAExCC,EAAkBF,EAAeG,SAEjCC,EAAoB,KAC7B,MAAMC,EAAUC,EAAWN,GAE3B,GAAgB,OAAZK,EACA,MAAM,IAAIE,MACN,0DAIR,OAAOF,GAGEG,EAA2C,EACpDC,SAAAA,KACGC,MAEH,MAAMC,EAlFS,GACfC,YAAAA,GAAc,EACdC,UAAAA,EAAY,MACZC,MAAAA,EAAQ,IACRC,UAAAA,EAAY,QACZC,aAAAA,MAEA,MAAOC,EAAQC,GAAWC,EAASP,GAC7BQ,EAAeC,EAAsB,MACrCC,EAAcD,EAA2B,MAKzCE,EAAOC,EAAY,CACrBC,KAAMR,EACND,aAAeS,IACXT,IAAeS,GACfP,EAAQO,IAEZZ,UAAAA,EACAa,qBAAsBC,EACtBC,WAAY,CACRC,EAAO,IACPC,IACAC,EAAM,CAAEC,QAAS,KACjBC,EAAM,CAAEC,QAASd,EAAcY,QAAS,OAI1CG,EAAOC,EAAQb,EAAKlB,QAAS,CAAE8B,KAAM,YACrCE,EAAUC,EAAWf,EAAKlB,SAC1BkC,EAAQC,EAASjB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAEP2B,EAAQC,EAASpB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,EACTD,MAAOG,EAAS,EAAIH,IAElB8B,EAAQC,EAAStB,EAAKlB,QAAS,CACjCoC,QAAuB,UAAd1B,IAGP+B,EAAeC,EAAgB,CAACV,EAASO,EAAOT,EAAMI,EAAOG,IAEnE,MAAO,CACH3B,UAAAA,EACAE,OAAAA,EACAC,QAAAA,EACAE,aAAAA,KACGG,EACHyB,KAAM,IACCzB,EAAKyB,KACR1B,YAAAA,EACA2B,eA5CgBf,IACpBZ,EAAY4B,QAAUhB,OA6CnBY,IA0BSK,CAAWzC,GAE3B,OAAO0C,EAAClD,EAAA,CAAgBmD,MAAO1C,EAAUF,SAAAA"}

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

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { Easing, Timing } from '../../core/types.js';
+import { Easing, Timing } from '../../utilities/types.js';
 export interface UseAnimatedHeightOptions<T extends HTMLElement = HTMLElement> {
     display?: "block" | "grid" | "flex";
     /**

package/build/es/hooks/useAnimatedHeight/useAnimatedHeight.js

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function o(o,a){const u=s(o),l=a?.easing||"standard",c=a?.timing||"productive",m=a?.display||"block",d=`${n.motion.timing[c]} height ${n.motion.easing[l]}`,{prefersReducedMotion:f}=i(),y=e(),h=e(),p=e(null);function v(e){const t=p.current;t&&e.target===t&&(o?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),a?.onTransitionEnd?.(o,p))}const g=t(()=>{const e=p.current;if(e&&void 0!==u){if(o){if(o&&u)return}else if(e.style.display="none",!u)return;if(a?.onTransitionStart?.(o,p),f)return e.removeAttribute("style"),o?a?.onFirstVisible?.(o,p):e.style.display="none",void a?.onTransitionEnd?.(o,p);if(e.style.transition=d,e.style.display=m,e.style.overflow="hidden",o)a?.onFirstVisible?.(o,p),e.style.height="0",e.style.height=`${e.scrollHeight}px`;else{if(0===e.scrollHeight)return void e.removeAttribute("style");e.style.height=`${e.scrollHeight}px`,y.current=requestAnimationFrame(()=>{h.current=requestAnimationFrame(()=>{e.style.height="0px"})})}}},[o,a,u,d,f,m]);return r(()=>{g()},[o,g]),r(()=>{const e=p.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}},[o]),r(()=>{const e=y.current,t=h.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[p,g]}export{o as useAnimatedHeight};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../tokens.js";import{useBrowserPreferences as i}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as s}from"../usePreviousValue/usePreviousValue.js";function o(o,a){const u=s(o),l=a?.easing||"standard",c=a?.timing||"productive",m=a?.display||"block",d=`${n.motion.timing[c]} height ${n.motion.easing[l]}`,{prefersReducedMotion:f}=i(),y=e(),h=e(),p=e(null);function v(e){const t=p.current;t&&e.target===t&&(o?t.removeAttribute("style"):(t.removeAttribute("style"),t.style.display="none"),a?.onTransitionEnd?.(o,p))}const g=t(()=>{const e=p.current;if(e&&void 0!==u){if(o){if(o&&u)return}else if(e.style.display="none",!u)return;if(a?.onTransitionStart?.(o,p),f)return e.removeAttribute("style"),o?a?.onFirstVisible?.(o,p):e.style.display="none",void a?.onTransitionEnd?.(o,p);if(e.style.transition=d,e.style.display=m,e.style.overflow="hidden",o)a?.onFirstVisible?.(o,p),e.style.height="0",e.style.height=`${e.scrollHeight}px`;else{if(0===e.scrollHeight)return void e.removeAttribute("style");e.style.height=`${e.scrollHeight}px`,y.current=requestAnimationFrame(()=>{h.current=requestAnimationFrame(()=>{e.style.height="0px"})})}}},[o,a,u,d,f,m]);return r(()=>{g()},[o,g]),r(()=>{const e=p.current;return e&&e.addEventListener("transitionend",v),()=>{e&&e.removeEventListener("transitionend",v)}},[o]),r(()=>{const e=y.current,t=h.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[p,g]}export{o as useAnimatedHeight};
 //# sourceMappingURL=useAnimatedHeight.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/**\n * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n *\n * @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n    isOpen: boolean,\n    options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n    const wasOpen = usePreviousValue(isOpen);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const display = options?.display || defaultDisplay;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    function handleTransitionEnd(event: TransitionEvent) {\n        const element = elementRef.current;\n\n        // Ignore bubbling transitions from within container\n        if (element && event.target === element) {\n            if (isOpen) {\n                element.removeAttribute(\"style\");\n            } else {\n                element.removeAttribute(\"style\");\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef);\n        }\n    }\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        // Ikke kjør animasjonen hvis elementet ikke er rendret,\n        // eller hvis det er første render.\n        if (!element || wasOpen === undefined) {\n            return;\n        }\n\n        if (!isOpen) {\n            element.style.display = \"none\";\n            if (!wasOpen) {\n                // Første render eller rerender med isOpen false\n                return;\n            }\n        } else if (isOpen && wasOpen) {\n            // Re-render etter å ha vært lukket, men forblitt åpen.\n            return;\n        }\n\n        options?.onTransitionStart?.(isOpen, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            if (isOpen) {\n                options?.onFirstVisible?.(isOpen, elementRef);\n            } else {\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        element.style.transition = transition;\n        element.style.display = display;\n        element.style.overflow = \"hidden\";\n\n        if (isOpen) {\n            options?.onFirstVisible?.(isOpen, elementRef);\n            element.style.height = \"0\";\n            element.style.height = `${element.scrollHeight}px`;\n        } else {\n            // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n            // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n            // style: height: 0; display: block; overflow:hidden\n            if (element.scrollHeight === 0) {\n                element.removeAttribute(\"style\");\n                return;\n            }\n\n            element.style.height = `${element.scrollHeight}px`;\n\n            raf1.current = requestAnimationFrame(() => {\n                raf2.current = requestAnimationFrame(() => {\n                    element.style.height = `${0}px`;\n                });\n            });\n        }\n    }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n    useEffect(() => {\n        runAnimation();\n    }, [isOpen, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isOpen]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiBO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAE5BL,GAASsB,kBAAkBvB,EAAQe,GAE3C,CAEA,MAAMS,EAAeC,EAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFAD,GAASyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAE5BL,GAASsB,kBAAkBvB,EAAQe,GAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAIH,GAA6B,IAAzBZ,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAElClB,EAAKO,QAAUY,sBAAsB,KACjCjB,EAAKK,QAAUY,sBAAsB,KACjCb,EAAQI,MAAMO,OAAS,SAGnC,CAAA,GACD,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,EAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}
+{"version":3,"file":"useAnimatedHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeight.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultDisplay = \"block\";\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\n/**\n * Lar deg animere et element opp til sin maksimale høyde, eller ned til 0.\n *\n * @param isOpen Om elementet er åpent eller lukket.\n * @param options Konfigurer display-property, easing og timing, og eventuelle callbacks for life cycle til animasjonen.\n * @returns Ref til elementet som skal animeres, og en funksjon for å trigge animasjonen manuelt.\n */\nexport function useAnimatedHeight<T extends HTMLElement>(\n    isOpen: boolean,\n    options?: UseAnimatedHeightOptions<T>,\n): [RefObject<T>, () => void] {\n    const wasOpen = usePreviousValue(isOpen);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const display = options?.display || defaultDisplay;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    function handleTransitionEnd(event: TransitionEvent) {\n        const element = elementRef.current;\n\n        // Ignore bubbling transitions from within container\n        if (element && event.target === element) {\n            if (isOpen) {\n                element.removeAttribute(\"style\");\n            } else {\n                element.removeAttribute(\"style\");\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef);\n        }\n    }\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        // Ikke kjør animasjonen hvis elementet ikke er rendret,\n        // eller hvis det er første render.\n        if (!element || wasOpen === undefined) {\n            return;\n        }\n\n        if (!isOpen) {\n            element.style.display = \"none\";\n            if (!wasOpen) {\n                // Første render eller rerender med isOpen false\n                return;\n            }\n        } else if (isOpen && wasOpen) {\n            // Re-render etter å ha vært lukket, men forblitt åpen.\n            return;\n        }\n\n        options?.onTransitionStart?.(isOpen, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            if (isOpen) {\n                options?.onFirstVisible?.(isOpen, elementRef);\n            } else {\n                element.style.display = \"none\";\n            }\n            options?.onTransitionEnd?.(isOpen, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        element.style.transition = transition;\n        element.style.display = display;\n        element.style.overflow = \"hidden\";\n\n        if (isOpen) {\n            options?.onFirstVisible?.(isOpen, elementRef);\n            element.style.height = \"0\";\n            element.style.height = `${element.scrollHeight}px`;\n        } else {\n            // If the scrollHeight is 0 it means that we are transitioning from height 0 -> 0.\n            // This causes the \"transitionend\"-event to never fire and the element gets stuck with\n            // style: height: 0; display: block; overflow:hidden\n            if (element.scrollHeight === 0) {\n                element.removeAttribute(\"style\");\n                return;\n            }\n\n            element.style.height = `${element.scrollHeight}px`;\n\n            raf1.current = requestAnimationFrame(() => {\n                raf2.current = requestAnimationFrame(() => {\n                    element.style.height = `${0}px`;\n                });\n            });\n        }\n    }, [isOpen, options, wasOpen, transition, prefersReducedMotion, display]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isOpen\n    useEffect(() => {\n        runAnimation();\n    }, [isOpen, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isOpen]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeight","isOpen","options","wasOpen","usePreviousValue","easing","timing","display","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","event","element","current","target","removeAttribute","style","onTransitionEnd","runAnimation","useCallback","onTransitionStart","onFirstVisible","overflow","height","scrollHeight","requestAnimationFrame","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"mQAiBO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAUC,EAAiBH,GAC3BI,EAASH,GAASG,QAfN,WAgBZC,EAASJ,GAASI,QAfN,aAgBZC,EAAUL,GAASK,SAlBN,QAmBbC,EAAa,GAAGC,EAAOC,OAAOJ,OAAOA,aAAkBG,EAAOC,OAAOL,OAAOA,MAE1EM,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAE7B,SAASG,EAAoBC,GACzB,MAAMC,EAAUH,EAAWI,QAGvBD,GAAWD,EAAMG,SAAWF,IACxBlB,EACAkB,EAAQG,gBAAgB,UAExBH,EAAQG,gBAAgB,SACxBH,EAAQI,MAAMhB,QAAU,QAE5BL,GAASsB,kBAAkBvB,EAAQe,GAE3C,CAEA,MAAMS,EAAeC,EAAY,KAC7B,MAAMP,EAAUH,EAAWI,QAI3B,GAAKD,QAAuB,IAAZhB,EAIhB,CAAA,GAAKF,GAML,GAAWA,GAAUE,EAEjB,YAAA,GAPAgB,EAAQI,MAAMhB,QAAU,QACnBJ,EAED,OASR,GAFAD,GAASyB,oBAAoB1B,EAAQe,GAEjCL,EAQA,OAPAQ,EAAQG,gBAAgB,SACpBrB,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAElCG,EAAQI,MAAMhB,QAAU,YAE5BL,GAASsB,kBAAkBvB,EAAQe,GAQvC,GAJAG,EAAQI,MAAMf,WAAaA,EAC3BW,EAAQI,MAAMhB,QAAUA,EACxBY,EAAQI,MAAMM,SAAW,SAErB5B,EACAC,GAAS0B,iBAAiB3B,EAAQe,GAClCG,EAAQI,MAAMO,OAAS,IACvBX,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,qBAC/B,CAIH,GAA6B,IAAzBZ,EAAQY,aAER,YADAZ,EAAQG,gBAAgB,SAI5BH,EAAQI,MAAMO,OAAS,GAAGX,EAAQY,iBAElClB,EAAKO,QAAUY,sBAAsB,KACjCjB,EAAKK,QAAUY,sBAAsB,KACjCb,EAAQI,MAAMO,OAAS,SAGnC,CAAA,GACD,CAAC7B,EAAQC,EAASC,EAASK,EAAYG,EAAsBJ,IAGhE,OAAA0B,EAAU,KACNR,KACD,CAACxB,EAAQwB,IAGZQ,EAAU,KACN,MAAMd,EAAUH,EAAWI,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBjB,GAGvC,KACCE,GACAA,EAAQgB,oBACJ,gBACAlB,KAIb,CAAChB,IAEJgC,EAAU,KACN,MAAMG,EAAKvB,EAAKO,QACViB,EAAKtB,EAAKK,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAACrB,EAAYS,EACxB"}

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js

@@ -1,2 +1,2 @@
-import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../core/tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),c=a?.easing||"standard",d=a?.timing||"productive",l=`${n.motion.timing[d]} height ${n.motion.easing[c]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),g=t(e=>{const t=f.current;t&&e.target===t&&(t.removeAttribute("style"),a?.onTransitionEnd?.(i,f))},[a,i]),h=t(()=>{const e=f.current;if(e&&(void 0===u&&(e.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(a?.onTransitionStart?.(i,f),m)return e.removeAttribute("style"),e.dataset.expanded=i?"true":"false",void a?.onTransitionEnd?.(i,f);i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"})})}(f,l,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"})})}(f,l,p,y)}},[u,i,a,m,l]);return r(()=>{h()},[i,h]),r(()=>{const e=f.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),r(()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[f,h]}export{i as useAnimatedHeightBetween};
+import{useRef as e,useCallback as t,useEffect as r}from"react";import n from"../../tokens.js";import{useBrowserPreferences as s}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as o}from"../usePreviousValue/usePreviousValue.js";function i(i,a){const u=o(i),c=a?.easing||"standard",d=a?.timing||"productive",l=`${n.motion.timing[d]} height ${n.motion.easing[c]}`,{prefersReducedMotion:m}=s(),p=e(),y=e(),f=e(null),g=t(e=>{const t=f.current;t&&e.target===t&&(t.removeAttribute("style"),a?.onTransitionEnd?.(i,f))},[a,i]),h=t(()=>{const e=f.current;if(e&&(void 0===u&&(e.dataset.expanded=i?"true":"false"),!(!i&&!u||i&&u))){if(a?.onTransitionStart?.(i,f),m)return e.removeAttribute("style"),e.dataset.expanded=i?"true":"false",void a?.onTransitionEnd?.(i,f);i?function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.style.setProperty("height",`${e}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${o}px`),s.dataset.expanded="true"})})}(f,l,p,y):function(e,t,r,n){const s=e.current;if(!s)return;s.removeAttribute("style");const o=s.scrollHeight;r.current=requestAnimationFrame(()=>{s.style.removeProperty("transition"),s.dataset.expanded="false";const e=s.getBoundingClientRect().height;s.dataset.expanded="true",s.style.setProperty("height",`${o}px`),s.style.setProperty("overflow-y","hidden"),n.current=requestAnimationFrame(()=>{s.style.setProperty("transition",t),s.style.setProperty("height",`${e}px`),s.dataset.expanded="false"})})}(f,l,p,y)}},[u,i,a,m,l]);return r(()=>{h()},[i,h]),r(()=>{const e=f.current;return e&&e.addEventListener("transitionend",g),()=>{e&&e.removeEventListener("transitionend",g)}},[i]),r(()=>{const e=p.current,t=y.current;return()=>{e&&cancelAnimationFrame(e),t&&cancelAnimationFrame(t)}},[]),[f,h]}export{i as useAnimatedHeightBetween};
 //# sourceMappingURL=useAnimatedHeightBetween.js.map

package/build/es/hooks/useAnimatedHeight/useAnimatedHeightBetween.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent kollapset høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n        element.dataset.expanded = \"true\";\n\n        // Sett høyde tilbake til utvidet høyde\n        element.style.setProperty(\"height\", `${expandedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til kollapset høyde og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${collapsedHeight}px`);\n            element.dataset.expanded = \"false\";\n        });\n    });\n}\n\nfunction expandElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent utvidet høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n\n        // Sett høyde tilbake til kollapset høyde\n        element.style.setProperty(\"height\", `${collapsedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til utvidet høyde  og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${expandedHeight}px`);\n            element.dataset.expanded = \"true\";\n        });\n    });\n}\n\n/**\n * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n    isExpanded: boolean,\n    options?: Omit<UseAnimatedHeightOptions<T>, \"display\" | \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n    const wasExpanded = usePreviousValue(isExpanded);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(isExpanded, elementRef);\n            }\n        },\n        [options, isExpanded],\n    );\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (wasExpanded === undefined) {\n            // Første render\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n        }\n\n        if ((!isExpanded && !wasExpanded) || (isExpanded && wasExpanded)) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(isExpanded, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n            options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        if (isExpanded) {\n            expandElement(elementRef, transition, raf1, raf2);\n        } else {\n            collapseElement(elementRef, transition, raf1, raf2);\n        }\n    }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isExpanded\n    useEffect(() => {\n        runAnimation();\n    }, [isExpanded, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isExpanded]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","runAnimation","dataset","expanded","onTransitionStart","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"wQAiFO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAcC,EAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,YAG/CA,IAAeE,GAAiBF,GAAcE,IAOpD,CAAA,GAFAD,GAASyB,oBAAoB1B,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,aACjDC,GAASqB,kBAAkBtB,EAAYc,GAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OAGxDhB,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQM,QAAQC,SAAW,UAGvC,CA8DYW,CAActB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OACxDhB,EAAQM,QAAQC,SAAW,OAG3BP,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQM,QAAQC,SAAW,WAGvC,CAgGYY,CAAgBvB,EAAYR,EAAYK,EAAME,EAAI,GAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAG5D,OAAAgC,EAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}
+{"version":3,"file":"useAnimatedHeightBetween.js","sources":["../../../../src/hooks/useAnimatedHeight/useAnimatedHeightBetween.ts"],"sourcesContent":["import { type RefObject, useCallback, useEffect, useRef } from \"react\";\nimport tokens from \"../../tokens.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\nimport type { UseAnimatedHeightOptions } from \"./types.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"productive\";\n\nfunction collapseElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent kollapset høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n        element.dataset.expanded = \"true\";\n\n        // Sett høyde tilbake til utvidet høyde\n        element.style.setProperty(\"height\", `${expandedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til kollapset høyde og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${collapsedHeight}px`);\n            element.dataset.expanded = \"false\";\n        });\n    });\n}\n\nfunction expandElement<T extends HTMLElement>(\n    elementRef: RefObject<T | null>,\n    transition: string,\n    raf1: React.MutableRefObject<number | undefined>,\n    raf2: React.MutableRefObject<number | undefined>,\n) {\n    const element = elementRef.current;\n\n    if (!element) return;\n\n    element.removeAttribute(\"style\");\n    const expandedHeight = element.scrollHeight;\n\n    raf1.current = requestAnimationFrame(() => {\n        // Hent utvidet høyde\n        element.style.removeProperty(\"transition\");\n        element.dataset.expanded = \"false\";\n        const collapsedHeight = element.getBoundingClientRect().height;\n\n        // Sett høyde tilbake til kollapset høyde\n        element.style.setProperty(\"height\", `${collapsedHeight}px`);\n        element.style.setProperty(\"overflow-y\", \"hidden\");\n\n        raf2.current = requestAnimationFrame(() => {\n            // Sett høyde til utvidet høyde  og start transition\n            element.style.setProperty(\"transition\", transition);\n            element.style.setProperty(\"height\", `${expandedHeight}px`);\n            element.dataset.expanded = \"true\";\n        });\n    });\n}\n\n/**\n * Lar deg enklere animere mellom to tilstander, gitt ved å sette `data-expanded` på et element til `true` eller `false`.\n * Du bestemmer selv hvilke stiler elementet skal ha i de to tilstandene (vha CSS/Sass), og høyden animeres dersom den endrer seg.\n * @param isExpanded indikerer om elementet skal være utvidet eller ikke\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns En tuple med referanse til elementet og en funksjon som kan trigge animasjonen\n */\nexport function useAnimatedHeightBetween<T extends HTMLElement>(\n    isExpanded: boolean,\n    options?: Omit<UseAnimatedHeightOptions<T>, \"display\" | \"onFirstVisible\">,\n): [RefObject<T>, () => void] {\n    const wasExpanded = usePreviousValue(isExpanded);\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(isExpanded, elementRef);\n            }\n        },\n        [options, isExpanded],\n    );\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (wasExpanded === undefined) {\n            // Første render\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n        }\n\n        if ((!isExpanded && !wasExpanded) || (isExpanded && wasExpanded)) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(isExpanded, elementRef);\n\n        if (prefersReducedMotion) {\n            element.removeAttribute(\"style\");\n            element.dataset.expanded = isExpanded ? \"true\" : \"false\";\n            options?.onTransitionEnd?.(isExpanded, elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        if (isExpanded) {\n            expandElement(elementRef, transition, raf1, raf2);\n        } else {\n            collapseElement(elementRef, transition, raf1, raf2);\n        }\n    }, [wasExpanded, isExpanded, options, prefersReducedMotion, transition]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi trigger med isExpanded\n    useEffect(() => {\n        runAnimation();\n    }, [isExpanded, runAnimation]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies:\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [isExpanded]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return [elementRef, runAnimation];\n}\n"],"names":["useAnimatedHeightBetween","isExpanded","options","wasExpanded","usePreviousValue","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","runAnimation","dataset","expanded","onTransitionStart","expandedHeight","scrollHeight","requestAnimationFrame","style","removeProperty","collapsedHeight","getBoundingClientRect","height","setProperty","expandElement","collapseElement","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"mQAiFO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAcC,EAAiBH,GAC/BI,EAASH,GAASG,QAhFN,WAiFZC,EAASJ,GAASI,QAhFN,aAiFZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBpB,GAASqB,kBAAkBtB,EAAYc,KAG/C,CAACb,EAASD,IAGRuB,EAAeP,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,SAEe,IAAhBhB,IAEAgB,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,YAG/CA,IAAeE,GAAiBF,GAAcE,IAOpD,CAAA,GAFAD,GAASyB,oBAAoB1B,EAAYc,GAErCL,EAIA,OAHAS,EAAQG,gBAAgB,SACxBH,EAAQM,QAAQC,SAAWzB,EAAa,OAAS,aACjDC,GAASqB,kBAAkBtB,EAAYc,GAIvCd,EA3FZ,SACIc,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OAGxDhB,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQM,QAAQC,SAAW,UAGvC,CA8DYW,CAActB,EAAYR,EAAYK,EAAME,GA7HxD,SACIC,EACAR,EACAK,EACAE,GAEA,MAAMK,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMM,EAAiBT,EAAQU,aAE/BjB,EAAKQ,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMC,eAAe,cAC7Bb,EAAQM,QAAQC,SAAW,QAC3B,MAAMO,EAAkBd,EAAQe,wBAAwBC,OACxDhB,EAAQM,QAAQC,SAAW,OAG3BP,EAAQY,MAAMK,YAAY,SAAU,GAAGR,OACvCT,EAAQY,MAAMK,YAAY,aAAc,UAExCtB,EAAKM,QAAUU,sBAAsB,KAEjCX,EAAQY,MAAMK,YAAY,aAAc7B,GACxCY,EAAQY,MAAMK,YAAY,SAAU,GAAGH,OACvCd,EAAQM,QAAQC,SAAW,WAGvC,CAgGYY,CAAgBvB,EAAYR,EAAYK,EAAME,EAAI,GAEvD,CAACX,EAAaF,EAAYC,EAASQ,EAAsBH,IAG5D,OAAAgC,EAAU,KACNf,KACD,CAACvB,EAAYuB,IAGhBe,EAAU,KACN,MAAMpB,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQqB,iBAAiB,gBAAiBxB,GAGvC,KACCG,GACAA,EAAQsB,oBACJ,gBACAzB,KAIb,CAACf,IAEJsC,EAAU,KACN,MAAMG,EAAK9B,EAAKQ,QACVuB,EAAK7B,EAAKM,QAChB,MAAO,KACHsB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEI,CAAC5B,EAAYS,EACxB"}

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

@@ -1,5 +1,5 @@
 import { RefObject } from 'react';
-import { Easing, Timing } from '../../core/types.js';
+import { Easing, Timing } from '../../utilities/types.js';
 export type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {
     easing?: Easing;
     /**

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js

@@ -1,2 +1,2 @@
-import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import s from"../../core/tokens.js";import{useBrowserPreferences as o}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as i}from"../usePreviousValue/usePreviousValue.js";function a(a,u){const c=i(a),[m,l]=e(0),f=u?.easing||"standard",d=u?.timing||"expressive",p=`${s.motion.timing[d]} height ${s.motion.easing[f]}`,{prefersReducedMotion:v}=o(),y=r(),g=r(),P=r(null),h=t(e=>{const r=P.current;r&&e.target===r&&(r.removeAttribute("style"),u?.onTransitionEnd?.(P))},[u]),A=t(()=>{const e=P.current;if(!e)return;e.removeAttribute("style");const r=e.scrollHeight;y.current=requestAnimationFrame(()=>{e.style.removeProperty("transition"),e.style.setProperty("height",`${m}px`),e.style.setProperty("overflow-y","hidden"),g.current=requestAnimationFrame(()=>{e.style.setProperty("transition",p),e.style.setProperty("height",`${r}px`)})}),l(r)},[p,m]),E=t(()=>{const e=P.current;if(e){if(void 0===c)return void l(e.scrollHeight);if(a!==c){if(u?.onTransitionStart?.(P),v)return void u?.onTransitionEnd?.(P);A()}}},[A,a,c,u,v]);return n(()=>{E()},[a,E]),n(()=>{const e=P.current;return e&&e.addEventListener("transitionend",h),()=>{e&&e.removeEventListener("transitionend",h)}},[h]),n(()=>{const e=y.current,r=g.current;return()=>{e&&cancelAnimationFrame(e),r&&cancelAnimationFrame(r)}},[]),P}export{a as useAutoAnimatedHeight};
+import{useState as e,useRef as r,useCallback as t,useEffect as n}from"react";import s from"../../tokens.js";import{useBrowserPreferences as o}from"../useBrowserPreferences/useBrowserPreferences.js";import{usePreviousValue as i}from"../usePreviousValue/usePreviousValue.js";function a(a,u){const c=i(a),[m,l]=e(0),f=u?.easing||"standard",d=u?.timing||"expressive",p=`${s.motion.timing[d]} height ${s.motion.easing[f]}`,{prefersReducedMotion:v}=o(),y=r(),g=r(),P=r(null),h=t(e=>{const r=P.current;r&&e.target===r&&(r.removeAttribute("style"),u?.onTransitionEnd?.(P))},[u]),A=t(()=>{const e=P.current;if(!e)return;e.removeAttribute("style");const r=e.scrollHeight;y.current=requestAnimationFrame(()=>{e.style.removeProperty("transition"),e.style.setProperty("height",`${m}px`),e.style.setProperty("overflow-y","hidden"),g.current=requestAnimationFrame(()=>{e.style.setProperty("transition",p),e.style.setProperty("height",`${r}px`)})}),l(r)},[p,m]),E=t(()=>{const e=P.current;if(e){if(void 0===c)return void l(e.scrollHeight);if(a!==c){if(u?.onTransitionStart?.(P),v)return void u?.onTransitionEnd?.(P);A()}}},[A,a,c,u,v]);return n(()=>{E()},[a,E]),n(()=>{const e=P.current;return e&&e.addEventListener("transitionend",h),()=>{e&&e.removeEventListener("transitionend",h)}},[h]),n(()=>{const e=y.current,r=g.current;return()=>{e&&cancelAnimationFrame(e),r&&cancelAnimationFrame(r)}},[]),P}export{a as useAutoAnimatedHeight};
 //# sourceMappingURL=useAutoAnimateHeight.js.map

package/build/es/hooks/useAnimatedHeight/useAutoAnimateHeight.js.map

@@ -1 +1 @@
-{"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import {\n    type RefObject,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport type { Easing, Timing } from \"../../core/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n    easing?: Easing;\n    /**\n     * Overstyr standard timing\n     * @default \"expressive\"\n     */\n    timing?: Timing;\n    onTransitionStart?: (ref: RefObject<T | null>) => void;\n    onTransitionEnd?: (ref: RefObject<T | null>) => void;\n};\n\n/**\n * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n    trigger: any,\n    options?: UseAutoAnimatedHeightOptions<T>,\n) {\n    const previousTriggerValue = usePreviousValue(trigger);\n    const [previousHeight, setPreviousHeight] = useState(0);\n\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(elementRef);\n            }\n        },\n        [options],\n    );\n\n    const animateElement = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        element.removeAttribute(\"style\");\n        const newHeight = element.scrollHeight;\n\n        raf1.current = requestAnimationFrame(() => {\n            // Sett høyde tilbake til forrige høyde\n            element.style.removeProperty(\"transition\");\n            element.style.setProperty(\"height\", `${previousHeight}px`);\n            element.style.setProperty(\"overflow-y\", \"hidden\");\n\n            raf2.current = requestAnimationFrame(() => {\n                // Sett høyde til kollapset høyde og start transition\n                element.style.setProperty(\"transition\", transition);\n                element.style.setProperty(\"height\", `${newHeight}px`);\n            });\n        });\n\n        setPreviousHeight(newHeight);\n    }, [transition, previousHeight]);\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (previousTriggerValue === undefined) {\n            // Første render\n            setPreviousHeight(element.scrollHeight);\n            return;\n        }\n\n        if (trigger === previousTriggerValue) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(elementRef);\n\n        if (prefersReducedMotion) {\n            options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        animateElement();\n    }, [\n        animateElement,\n        trigger,\n        previousTriggerValue,\n        options,\n        prefersReducedMotion,\n    ]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi vil trige med trigger\n    useEffect(() => {\n        runAnimation();\n    }, [trigger, runAnimation]);\n\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [handleTransitionEnd]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"sRAiCO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMG,EAAYN,EAAQO,aAE1Bd,EAAKQ,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAMC,eAAe,cAC7BV,EAAQS,MAAME,YAAY,SAAU,GAAG5B,OACvCiB,EAAQS,MAAME,YAAY,aAAc,UAExChB,EAAKM,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAME,YAAY,aAAcvB,GACxCY,EAAQS,MAAME,YAAY,SAAU,GAAGL,WAI/CtB,EAAkBsB,IACnB,CAAClB,EAAYL,IAEV6B,EAAed,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,CAAA,GAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJ,OAAAuB,EAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}
+{"version":3,"file":"useAutoAnimateHeight.js","sources":["../../../../src/hooks/useAnimatedHeight/useAutoAnimateHeight.ts"],"sourcesContent":["import {\n    type RefObject,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport tokens from \"../../tokens.js\";\nimport type { Easing, Timing } from \"../../utilities/types.js\";\nimport { useBrowserPreferences } from \"../useBrowserPreferences/useBrowserPreferences.js\";\nimport { usePreviousValue } from \"../usePreviousValue/usePreviousValue.js\";\n\nconst defaultEasing = \"standard\";\nconst defaultTiming = \"expressive\";\n\nexport type UseAutoAnimatedHeightOptions<T extends HTMLElement> = {\n    easing?: Easing;\n    /**\n     * Overstyr standard timing\n     * @default \"expressive\"\n     */\n    timing?: Timing;\n    onTransitionStart?: (ref: RefObject<T | null>) => void;\n    onTransitionEnd?: (ref: RefObject<T | null>) => void;\n};\n\n/**\n * Gjør det enklere å animere høyden på et element når innholdet endrer seg, men kan brukes på mer generelt grunnlag.\n * Hooken tar inn en triggerverdi, og når denne endrer seg animeres høyden på elementet dersom den har endret seg.\n * @param trigger verdien som brukes til å trigge animasjonen. Dersom denne endrer seg animeres høyden på elementet.\n * @param options konfigurasjon for animasjonen, og lyttere for når animasjonen starter og slutter\n * @returns en referanse til elementet som skal animeres\n */\nexport function useAutoAnimatedHeight<T extends HTMLElement = HTMLElement>(\n    trigger: any,\n    options?: UseAutoAnimatedHeightOptions<T>,\n) {\n    const previousTriggerValue = usePreviousValue(trigger);\n    const [previousHeight, setPreviousHeight] = useState(0);\n\n    const easing = options?.easing || defaultEasing;\n    const timing = options?.timing || defaultTiming;\n    const transition = `${tokens.motion.timing[timing]} height ${tokens.motion.easing[easing]}`;\n\n    const { prefersReducedMotion } = useBrowserPreferences();\n\n    const raf1 = useRef<number>();\n    const raf2 = useRef<number>();\n    const elementRef = useRef<T>(null);\n\n    const handleTransitionEnd = useCallback(\n        (event: TransitionEvent) => {\n            const element = elementRef.current;\n\n            // Ignore bubbling transitions from within container\n            if (element && event.target === element) {\n                element.removeAttribute(\"style\");\n                options?.onTransitionEnd?.(elementRef);\n            }\n        },\n        [options],\n    );\n\n    const animateElement = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        element.removeAttribute(\"style\");\n        const newHeight = element.scrollHeight;\n\n        raf1.current = requestAnimationFrame(() => {\n            // Sett høyde tilbake til forrige høyde\n            element.style.removeProperty(\"transition\");\n            element.style.setProperty(\"height\", `${previousHeight}px`);\n            element.style.setProperty(\"overflow-y\", \"hidden\");\n\n            raf2.current = requestAnimationFrame(() => {\n                // Sett høyde til kollapset høyde og start transition\n                element.style.setProperty(\"transition\", transition);\n                element.style.setProperty(\"height\", `${newHeight}px`);\n            });\n        });\n\n        setPreviousHeight(newHeight);\n    }, [transition, previousHeight]);\n\n    const runAnimation = useCallback(() => {\n        const element = elementRef.current;\n\n        if (!element) return;\n\n        if (previousTriggerValue === undefined) {\n            // Første render\n            setPreviousHeight(element.scrollHeight);\n            return;\n        }\n\n        if (trigger === previousTriggerValue) {\n            // Ingen endring\n            return;\n        }\n\n        options?.onTransitionStart?.(elementRef);\n\n        if (prefersReducedMotion) {\n            options?.onTransitionEnd?.(elementRef); // make sure to call callback when animation is off\n            return;\n        }\n\n        animateElement();\n    }, [\n        animateElement,\n        trigger,\n        previousTriggerValue,\n        options,\n        prefersReducedMotion,\n    ]);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: Vi vil trige med trigger\n    useEffect(() => {\n        runAnimation();\n    }, [trigger, runAnimation]);\n\n    useEffect(() => {\n        const element = elementRef.current;\n        if (element) {\n            element.addEventListener(\"transitionend\", handleTransitionEnd);\n        }\n\n        return () => {\n            if (element) {\n                element.removeEventListener(\n                    \"transitionend\",\n                    handleTransitionEnd,\n                );\n            }\n        };\n    }, [handleTransitionEnd]);\n\n    useEffect(() => {\n        const r1 = raf1.current;\n        const r2 = raf2.current;\n        return () => {\n            r1 && cancelAnimationFrame(r1);\n            r2 && cancelAnimationFrame(r2);\n        };\n    }, []);\n\n    return elementRef;\n}\n"],"names":["useAutoAnimatedHeight","trigger","options","previousTriggerValue","usePreviousValue","previousHeight","setPreviousHeight","useState","easing","timing","transition","tokens","motion","prefersReducedMotion","useBrowserPreferences","raf1","useRef","raf2","elementRef","handleTransitionEnd","useCallback","event","element","current","target","removeAttribute","onTransitionEnd","animateElement","newHeight","scrollHeight","requestAnimationFrame","style","removeProperty","setProperty","runAnimation","onTransitionStart","useEffect","addEventListener","removeEventListener","r1","r2","cancelAnimationFrame"],"mappings":"iRAiCO,SAASA,EACZC,EACAC,GAEA,MAAMC,EAAuBC,EAAiBH,IACvCI,EAAgBC,GAAqBC,EAAS,GAE/CC,EAASN,GAASM,QA5BN,WA6BZC,EAASP,GAASO,QA5BN,aA6BZC,EAAa,GAAGC,EAAOC,OAAOH,OAAOA,aAAkBE,EAAOC,OAAOJ,OAAOA,MAE1EK,qBAAAA,GAAyBC,IAE3BC,EAAOC,IACPC,EAAOD,IACPE,EAAaF,EAAU,MAEvBG,EAAsBC,EACvBC,IACG,MAAMC,EAAUJ,EAAWK,QAGvBD,GAAWD,EAAMG,SAAWF,IAC5BA,EAAQG,gBAAgB,SACxBvB,GAASwB,kBAAkBR,KAGnC,CAAChB,IAGCyB,EAAiBP,EAAY,KAC/B,MAAME,EAAUJ,EAAWK,QAE3B,IAAKD,EAAS,OAEdA,EAAQG,gBAAgB,SACxB,MAAMG,EAAYN,EAAQO,aAE1Bd,EAAKQ,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAMC,eAAe,cAC7BV,EAAQS,MAAME,YAAY,SAAU,GAAG5B,OACvCiB,EAAQS,MAAME,YAAY,aAAc,UAExChB,EAAKM,QAAUO,sBAAsB,KAEjCR,EAAQS,MAAME,YAAY,aAAcvB,GACxCY,EAAQS,MAAME,YAAY,SAAU,GAAGL,WAI/CtB,EAAkBsB,IACnB,CAAClB,EAAYL,IAEV6B,EAAed,EAAY,KAC7B,MAAME,EAAUJ,EAAWK,QAE3B,GAAKD,EAEL,CAAA,QAA6B,IAAzBnB,EAGA,YADAG,EAAkBgB,EAAQO,cAI9B,GAAI5B,IAAYE,EAOhB,CAAA,GAFAD,GAASiC,oBAAoBjB,GAEzBL,EAEA,YADAX,GAASwB,kBAAkBR,GAI/BS,GAAA,CAAA,GACD,CACCA,EACA1B,EACAE,EACAD,EACAW,IAIJ,OAAAuB,EAAU,KACNF,KACD,CAACjC,EAASiC,IAEbE,EAAU,KACN,MAAMd,EAAUJ,EAAWK,QAC3B,OAAID,GACAA,EAAQe,iBAAiB,gBAAiBlB,GAGvC,KACCG,GACAA,EAAQgB,oBACJ,gBACAnB,KAIb,CAACA,IAEJiB,EAAU,KACN,MAAMG,EAAKxB,EAAKQ,QACViB,EAAKvB,EAAKM,QAChB,MAAO,KACHgB,GAAME,qBAAqBF,GAC3BC,GAAMC,qBAAqBD,KAEhC,IAEItB,CACX"}

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

@@ -11,5 +11,5 @@ export interface UseAriaLiveRegionOptions {
  * @returns
  */
 export declare function useAriaLiveRegion(watch: unknown | unknown[], options?: UseAriaLiveRegionOptions): {
-    "aria-live": "polite" | "assertive" | "off" | undefined;
+    "aria-live": "off" | "assertive" | "polite" | undefined;
 };

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

@@ -1,4 +1,4 @@
-import { ColorScheme } from '../../core/types.js';
+import { ColorScheme } from '../../utilities/types.js';
 type BrowserPreferences = {
     prefersReducedMotion: boolean;
     prefersColorScheme: ColorScheme;

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

@@ -1 +1 @@
-{"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { type Reducer, useEffect, useReducer, useState } from \"react\";\nimport type { ColorScheme } from \"../../core/types.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n    prefersReducedMotion: boolean;\n    prefersColorScheme: ColorScheme;\n    forcedColors: boolean;\n};\n\nconst ActionType = {\n    PrefersColorScheme: \"COLOR_SCHEME_CHANGED\",\n    PrefersReducedMotion: \"REDUCED_MOTION_CHANGED\",\n    ForcedColors: \"FORCED_COLORS_CHANGED\",\n} as const;\n\ntype Action =\n    | {\n          type: typeof ActionType.PrefersColorScheme;\n          value: ColorScheme;\n      }\n    | {\n          type: typeof ActionType.PrefersReducedMotion;\n          value: boolean;\n      }\n    | {\n          type: typeof ActionType.ForcedColors;\n          value: boolean;\n      };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n    prefersReducedMotion: false,\n    prefersColorScheme: \"light\",\n    forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n    switch (action.type) {\n        case ActionType.PrefersColorScheme:\n            return {\n                ...state,\n                prefersColorScheme: action.value,\n            };\n        case ActionType.PrefersReducedMotion:\n            return {\n                ...state,\n                prefersReducedMotion: action.value,\n            };\n        case ActionType.ForcedColors:\n            return {\n                ...state,\n                forcedColors: action.value,\n            };\n        default:\n            return state;\n    }\n};\n\n/**\n * Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [state, dispatch] = useReducer(reducer, initialState);\n\n    useEffect(() => {\n        setHasMounted(true);\n        const prefersReducedMotion = getInitialMediaQueryMatch(\n            PREFERS_REDUCED_MOTION,\n        );\n        const prefersColorScheme = getInitialMediaQueryMatch(\n            PREFERS_LIGHT_COLOR_SCHEME,\n        )\n            ? \"light\"\n            : \"dark\";\n        const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n        dispatch({\n            type: ActionType.PrefersReducedMotion,\n            value: prefersReducedMotion,\n        });\n        dispatch({\n            type: ActionType.PrefersColorScheme,\n            value: prefersColorScheme,\n        });\n        dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n    }, []);\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersReducedMotion,\n                value: e.matches,\n            });\n        };\n        const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersColorScheme,\n                value: e.matches ? \"light\" : \"dark\",\n            });\n        };\n        const onForcedColorsChange = (e: MediaQueryListEvent) => {\n            dispatch({ type: ActionType.ForcedColors, value: e.matches });\n        };\n\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_REDUCED_MOTION),\n            onPrefersReducedMotionChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n            onPrefersColorSchemeChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(FORCED_COLORS),\n            onForcedColorsChange,\n        );\n\n        return () => {\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_REDUCED_MOTION),\n                onPrefersReducedMotionChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n                onPrefersColorSchemeChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(FORCED_COLORS),\n                onForcedColorsChange,\n            );\n        };\n    }, [hasMounted]);\n\n    return { ...state };\n};\n"],"names":["ActionType","PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAcA,MAAMA,EACkB,uBADlBA,EAEoB,yBAFpBA,EAGY,wBAiBZC,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,KAAKX,EACD,MAAO,IACAS,EACHH,mBAAoBI,EAAOE,OAEnC,KAAKZ,EACD,MAAO,IACAS,EACHJ,qBAAsBK,EAAOE,OAErC,KAAKZ,EACD,MAAO,IACAS,EACHF,aAAcG,EAAOE,OAE7B,QACI,OAAOH,IAQNI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,EAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GAC/Cc,EAAS,CACLN,KAAMX,EACNY,MAAOP,IAEXY,EAAS,CACLN,KAAMX,EACNY,MAAON,IAEXW,EAAS,CAAEN,KAAMX,EAAyBY,MAAOL,KAClD,IAEHY,EAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAMX,EAAyBY,MAAOY,EAAEC,WAGvD,OAAAG,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,KAGT,CAACb,IAEG,IAAKL"}
+{"version":3,"file":"useBrowserPreferences.js","sources":["../../../../src/hooks/useBrowserPreferences/useBrowserPreferences.tsx"],"sourcesContent":["import { type Reducer, useEffect, useReducer, useState } from \"react\";\nimport type { ColorScheme } from \"../../utilities/types.js\";\nimport {\n    addMediaQueryListener,\n    getInitialMediaQueryMatch,\n    removeMediaQueryListener,\n} from \"../mediaQueryUtils.js\";\n\ntype BrowserPreferences = {\n    prefersReducedMotion: boolean;\n    prefersColorScheme: ColorScheme;\n    forcedColors: boolean;\n};\n\nconst ActionType = {\n    PrefersColorScheme: \"COLOR_SCHEME_CHANGED\",\n    PrefersReducedMotion: \"REDUCED_MOTION_CHANGED\",\n    ForcedColors: \"FORCED_COLORS_CHANGED\",\n} as const;\n\ntype Action =\n    | {\n          type: typeof ActionType.PrefersColorScheme;\n          value: ColorScheme;\n      }\n    | {\n          type: typeof ActionType.PrefersReducedMotion;\n          value: boolean;\n      }\n    | {\n          type: typeof ActionType.ForcedColors;\n          value: boolean;\n      };\n\nconst PREFERS_REDUCED_MOTION = \"(prefers-reduced-motion: reduce)\";\nconst PREFERS_LIGHT_COLOR_SCHEME = \"(prefers-color-scheme: light)\";\nconst FORCED_COLORS = \"(forced-colors: active)\";\n\nconst initialState: BrowserPreferences = {\n    prefersReducedMotion: false,\n    prefersColorScheme: \"light\",\n    forcedColors: false,\n};\n\nconst reducer: Reducer<BrowserPreferences, Action> = (state, action) => {\n    switch (action.type) {\n        case ActionType.PrefersColorScheme:\n            return {\n                ...state,\n                prefersColorScheme: action.value,\n            };\n        case ActionType.PrefersReducedMotion:\n            return {\n                ...state,\n                prefersReducedMotion: action.value,\n            };\n        case ActionType.ForcedColors:\n            return {\n                ...state,\n                forcedColors: action.value,\n            };\n        default:\n            return state;\n    }\n};\n\n/**\n * Hook som gir informasjon om brukerens foretrukne konfigurasjon.\n * @returns Objekt med informasjon om brukerens foretrukne tema (lyst vs mørkt), redusert bevegelse, og høykontrast (forced colors).\n */\nexport const useBrowserPreferences = (): BrowserPreferences => {\n    const [hasMounted, setHasMounted] = useState(false);\n\n    const [state, dispatch] = useReducer(reducer, initialState);\n\n    useEffect(() => {\n        setHasMounted(true);\n        const prefersReducedMotion = getInitialMediaQueryMatch(\n            PREFERS_REDUCED_MOTION,\n        );\n        const prefersColorScheme = getInitialMediaQueryMatch(\n            PREFERS_LIGHT_COLOR_SCHEME,\n        )\n            ? \"light\"\n            : \"dark\";\n        const forcedColors = getInitialMediaQueryMatch(FORCED_COLORS);\n        dispatch({\n            type: ActionType.PrefersReducedMotion,\n            value: prefersReducedMotion,\n        });\n        dispatch({\n            type: ActionType.PrefersColorScheme,\n            value: prefersColorScheme,\n        });\n        dispatch({ type: ActionType.ForcedColors, value: forcedColors });\n    }, []);\n\n    useEffect(() => {\n        if (!hasMounted || !window.matchMedia) {\n            return;\n        }\n        const onPrefersReducedMotionChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersReducedMotion,\n                value: e.matches,\n            });\n        };\n        const onPrefersColorSchemeChange = (e: MediaQueryListEvent) => {\n            dispatch({\n                type: ActionType.PrefersColorScheme,\n                value: e.matches ? \"light\" : \"dark\",\n            });\n        };\n        const onForcedColorsChange = (e: MediaQueryListEvent) => {\n            dispatch({ type: ActionType.ForcedColors, value: e.matches });\n        };\n\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_REDUCED_MOTION),\n            onPrefersReducedMotionChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n            onPrefersColorSchemeChange,\n        );\n        addMediaQueryListener(\n            window.matchMedia(FORCED_COLORS),\n            onForcedColorsChange,\n        );\n\n        return () => {\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_REDUCED_MOTION),\n                onPrefersReducedMotionChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(PREFERS_LIGHT_COLOR_SCHEME),\n                onPrefersColorSchemeChange,\n            );\n            removeMediaQueryListener(\n                window.matchMedia(FORCED_COLORS),\n                onForcedColorsChange,\n            );\n        };\n    }, [hasMounted]);\n\n    return { ...state };\n};\n"],"names":["ActionType","PREFERS_REDUCED_MOTION","PREFERS_LIGHT_COLOR_SCHEME","FORCED_COLORS","initialState","prefersReducedMotion","prefersColorScheme","forcedColors","reducer","state","action","type","value","useBrowserPreferences","hasMounted","setHasMounted","useState","dispatch","useReducer","useEffect","getInitialMediaQueryMatch","window","matchMedia","onPrefersReducedMotionChange","e","matches","onPrefersColorSchemeChange","onForcedColorsChange","addMediaQueryListener","removeMediaQueryListener"],"mappings":"2LAcA,MAAMA,EACkB,uBADlBA,EAEoB,yBAFpBA,EAGY,wBAiBZC,EAAyB,mCACzBC,EAA6B,gCAC7BC,EAAgB,0BAEhBC,EAAmC,CACrCC,sBAAsB,EACtBC,mBAAoB,QACpBC,cAAc,GAGZC,EAA+C,CAACC,EAAOC,KACzD,OAAQA,EAAOC,MACX,KAAKX,EACD,MAAO,IACAS,EACHH,mBAAoBI,EAAOE,OAEnC,KAAKZ,EACD,MAAO,IACAS,EACHJ,qBAAsBK,EAAOE,OAErC,KAAKZ,EACD,MAAO,IACAS,EACHF,aAAcG,EAAOE,OAE7B,QACI,OAAOH,IAQNI,EAAwB,KACjC,MAAOC,EAAYC,GAAiBC,GAAS,IAEtCP,EAAOQ,GAAYC,EAAWV,EAASJ,GAE9C,OAAAe,EAAU,KACNJ,GAAc,GACd,MAAMV,EAAuBe,EACzBnB,GAEEK,EAAqBc,EACvBlB,GAEE,QACA,OACAK,EAAea,EAA0BjB,GAC/Cc,EAAS,CACLN,KAAMX,EACNY,MAAOP,IAEXY,EAAS,CACLN,KAAMX,EACNY,MAAON,IAEXW,EAAS,CAAEN,KAAMX,EAAyBY,MAAOL,KAClD,IAEHY,EAAU,KACN,IAAKL,IAAeO,OAAOC,WACvB,OAEJ,MAAMC,EAAgCC,IAClCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,WAGXC,EAA8BF,IAChCP,EAAS,CACLN,KAAMX,EACNY,MAAOY,EAAEC,QAAU,QAAU,UAG/BE,EAAwBH,IAC1BP,EAAS,CAAEN,KAAMX,EAAyBY,MAAOY,EAAEC,WAGvD,OAAAG,EACIP,OAAOC,WAAWrB,GAClBsB,GAEJK,EACIP,OAAOC,WAAWpB,GAClBwB,GAEJE,EACIP,OAAOC,WAAWnB,GAClBwB,GAGG,KACHE,EACIR,OAAOC,WAAWrB,GAClBsB,GAEJM,EACIR,OAAOC,WAAWpB,GAClBwB,GAEJG,EACIR,OAAOC,WAAWnB,GAClBwB,KAGT,CAACb,IAEG,IAAKL"}

package/build/es/hooks/useScreen/useScreen.js

@@ -1,2 +1,2 @@
-import{useState as e,useReducer as i,useEffect as t,useCallback as a}from"react";import r from"../../core/tokens.js";import{getInitialMediaQueryMatch as s,addMediaQueryListener as o,removeMediaQueryListener as n}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=r,p=e=>Number.parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),f=()=>{const[r,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});t(()=>{m(!0);const e=Object.entries(u).map(([e,i])=>[e,s(i)]);for(const[i,t]of e)t&&p(l(i))},[]);const f=a(e=>i=>{requestAnimationFrame(()=>{i.matches&&p(l(e))})},[]);return t(()=>{if(!r||!window.matchMedia)return;const e=[];for(const[i,t]of Object.entries(u)){const a=window.matchMedia(t),r=f(i);e.push([a,r]),o(a,r)}return()=>{for(const[i,t]of e)n(i,t)}},[f,r]),{...d}};export{f as useScreen};
+import{useState as e,useReducer as i,useEffect as t,useCallback as a}from"react";import s from"../../tokens.js";import{getInitialMediaQueryMatch as r,addMediaQueryListener as o,removeMediaQueryListener as n}from"../mediaQueryUtils.js";import{reducer as c,ActionType as m}from"./state.js";const{breakpoint:d}=s,p=e=>Number.parseInt(e.replace("px","")),u={isSmallDevice:`(max-width: ${p(d.medium)-1}px)`,isMediumDevice:`(min-width: ${d.medium}) and (max-width: ${p(d.large)-1}px)`,isLargeDevice:`(min-width: ${d.large}) and (max-width: ${p(d.xl)-1}px)`,isXlDevice:`(min-width: ${d.xl})`,isPortrait:"(orientation: portrait)",isLandscape:"(orientation: landscape)"},l=e=>({type:"isLandscape"===e||"isPortrait"===e?m.orientation:m.deviceSize,property:e}),f=()=>{const[s,m]=e(!1),[d,p]=i(c,{isSmallDevice:!1,isMediumDevice:!1,isLargeDevice:!1,isXlDevice:!1,isLandscape:!1,isPortrait:!1});t(()=>{m(!0);const e=Object.entries(u).map(([e,i])=>[e,r(i)]);for(const[i,t]of e)t&&p(l(i))},[]);const f=a(e=>i=>{requestAnimationFrame(()=>{i.matches&&p(l(e))})},[]);return t(()=>{if(!s||!window.matchMedia)return;const e=[];for(const[i,t]of Object.entries(u)){const a=window.matchMedia(t),s=f(i);e.push([a,s]),o(a,s)}return()=>{for(const[i,t]of e)n(i,t)}},[f,s]),{...d}};export{f as useScreen};
 //# sourceMappingURL=useScreen.js.map