@fremtind/jokul 5.0.0-next.0 → 5.0.0-next.10

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

@@ -1,2 +1,2 @@
-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};
+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};
 //# 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    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"}
+{"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"}

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, ModalOverlayProps, UseModalOptions, ModalConfig, } from './types.js';
+export type { ModalProps, BaseModalProps, ModalContainerProps, ModalOverlayProps, UseModalOptions, ModalConfig, ModalPlacement, } from './types.js';

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

@@ -1,5 +1,6 @@
 import { A11yDialogConfig, A11yDialogProps } from 'react-a11y-dialog';
-import { WithOptionalChildren } from '../../core/types.js';
+import { WithOptionalChildren } from '../../utilities/types.js';
+export type ModalPlacement = "center" | "left" | "bottom" | "right";
 export interface UseModalOptions extends Omit<A11yDialogProps, "id" | "closeButtonPosition"> {
     id?: string;
     /**
@@ -34,9 +35,26 @@ 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/popover/Popover.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as t,FloatingPortal as n,FloatingFocusManager as o,useFloating as s,autoUpdate as r,offset as a,flip as i,shift as l,useClick as c,useHover as u,useFocus as d,useDismiss as p,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndSize as v}from"../../utilities/getThemeAndSize.js";const x=h.createContext(null),F=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},R=({children:t,...n})=>{const o=(({open:e,onOpenChange:t,placement:n="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:F,focusOptions:R,clickOptions:b,roleOptions:k,dismissOptions:C})=>{const[O,P]=h.useState(e),E=e??O,j=t??P,y=s({open:E,onOpenChange:j,placement:n,strategy:o,middleware:[a(v),i({padding:5,fallbackPlacements:["bottom","top"]}),l({padding:12})],whileElementsMounted:r}),w=y.context,z=c(w,{enabled:!1,...b}),M=u(w,{enabled:!1,...F}),S=d(w,{enabled:!1,...R}),T=p(w,C),A=f(w,k),N=m([z,T,S,M,A]);return h.useLayoutEffect(()=>{x&&y.refs.setPositionReference(x?.current)},[x,y.refs]),h.useMemo(()=>({open:E,onOpenChange:j,modal:g,...N,...y}),[E,j,g,N,y])})({...n});return e(x.Provider,{value:o,children:t})},b=h.forwardRef(function({children:n,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:i,open:l,onOpenChange:c}=F(),u=n.ref,d=t([a.setReference,r,u]);return o&&h.isValidElement(n)?h.cloneElement(n,i({ref:d,...s,...n.props})):e("button",{ref:d,onClick:()=>c?.(!l),"aria-expanded":l,...i(s),children:n})}),k=h.forwardRef(function({style:s,className:r,padding:a=0,initialFocus:i=0,returnFocus:l=!0,...c},u){const{context:d,modal:p,refs:f,open:m,floatingStyles:x,getFloatingProps:R}=F(),b=t([f.setFloating,u]),k=f.reference.current,{theme:C,size:O}=v((E=k)&&"contextElement"in E?k.contextElement:k),P=h.useRef(null);var E;return h.useEffect(()=>{P.current=d.elements.domReference?.closest("[data-portal]")||document.body},[d.elements.domReference]),m?e(n,{root:P.current,children:e(o,{context:d,modal:p,initialFocus:i,returnFocus:l,children:e("div",{"data-theme":C,"data-size":O,className:g("jkl jkl-popover",r),ref:b,style:{...s,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...R(c),children:c.children})})}):null});R.Trigger=b,R.Content=k;export{R as Popover,R as default};
+import{jsx as e}from"react/jsx-runtime";import{useMergeRefs as t,FloatingPortal as n,FloatingFocusManager as o,useFloating as s,autoUpdate as r,offset as a,flip as i,shift as l,useClick as c,useHover as u,useFocus as p,useDismiss as d,useRole as f,useInteractions as m}from"@floating-ui/react";import{c as g}from"../../../clsx-BeLtu-UY.js";import*as h from"react";import{getThemeAndSize as v}from"../../utilities/getThemeAndSize.js";const x=h.createContext(null),k=()=>{const e=h.useContext(x);if(null==e)throw new Error("Popover komponenter må brukes innenfor en <Popover /> komponent");return e},F=({children:t,...n})=>{const o=(({open:e,onOpenChange:t,placement:n="bottom-start",strategy:o="absolute",modal:g=!0,offset:v=4,positionReference:x,hoverOptions:k,focusOptions:F,clickOptions:R,roleOptions:b,dismissOptions:C})=>{const[O,P]=h.useState(e),j=e??O,E=t??P,y=s({open:j,onOpenChange:E,placement:n,strategy:o,middleware:[a(v),i({padding:5,fallbackPlacements:["bottom","top"]}),l({padding:12})],whileElementsMounted:r}),w=y.context,z=c(w,{enabled:!1,...R}),M=u(w,{enabled:!1,...k}),N=p(w,{enabled:!1,...F}),S=d(w,C),T=f(w,b),A=m([z,S,N,M,T]);return h.useLayoutEffect(()=>{x&&y.refs.setPositionReference(x?.current)},[x,y.refs]),h.useMemo(()=>({open:j,onOpenChange:E,modal:g,...A,...y}),[j,E,g,A,y])})({...n});return e(x.Provider,{value:o,children:t})},R=h.forwardRef(function({children:n,asChild:o=!1,...s},r){const{refs:a,getReferenceProps:i,open:l,onOpenChange:c}=k(),u=n.ref,p=t([a.setReference,r,u]);return o&&h.isValidElement(n)?h.cloneElement(n,i({ref:p,...s,...n.props})):e("button",{ref:p,onClick:()=>c?.(!l),"aria-expanded":l,...i({...s,className:g("jkl-popover-trigger",s.className)}),children:n})}),b=h.forwardRef(function({style:s,className:r,padding:a=0,initialFocus:i=0,returnFocus:l=!0,...c},u){const{context:p,modal:d,refs:f,open:m,floatingStyles:x,getFloatingProps:F}=k(),R=t([f.setFloating,u]),b=f.reference.current,{theme:C,size:O}=v((j=b)&&"contextElement"in j?b.contextElement:b),P=h.useRef(null);var j;return h.useEffect(()=>{P.current=p.elements.domReference?.closest("[data-portal]")||document.body},[p.elements.domReference]),m?e(n,{root:P.current,children:e(o,{context:p,modal:d,initialFocus:i,returnFocus:l,children:e("div",{"data-theme":C,"data-size":O,className:g("jkl jkl-popover",r),ref:R,style:{...s,...x,"--popover-padding":`var(--jkl-spacing-${a})`},...F(c),children:c.children})})}):null});F.Trigger=R,F.Content=b;export{F as Popover,F as default};
 //# sourceMappingURL=Popover.js.map

package/build/es/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps(props)}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-size={size}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","PopoverContent","style","className","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","clsx","Trigger","Content"],"mappings":"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"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/popover/Popover.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    FloatingPortal,\n    type ReferenceElement,\n    type VirtualElement,\n    autoUpdate,\n    flip,\n    offset,\n    shift,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useMergeRefs,\n    useRole,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport * as React from \"react\";\nimport { getThemeAndSize } from \"../../utilities/getThemeAndSize.js\";\nimport type { PopoverOptions } from \"./types.js\";\n\nconst usePopover = ({\n    open: _open,\n    onOpenChange: _onOpenChange,\n    placement = \"bottom-start\",\n    strategy = \"absolute\",\n    modal = true,\n    offset: _offset = 4,\n    positionReference,\n    hoverOptions,\n    focusOptions,\n    clickOptions,\n    roleOptions,\n    dismissOptions,\n}: PopoverOptions) => {\n    const [uncontrolledOpen, setUncontrolledOpen] = React.useState(_open);\n\n    const open = _open ?? uncontrolledOpen;\n    const onOpenChange = _onOpenChange ?? setUncontrolledOpen;\n\n    const data = useFloating({\n        open,\n        onOpenChange,\n        placement,\n        strategy,\n        middleware: [\n            offset(_offset),\n            flip({ padding: 5, fallbackPlacements: [\"bottom\", \"top\"] }),\n            shift({ padding: 12 }),\n        ],\n        whileElementsMounted: autoUpdate,\n    });\n\n    const context = data.context;\n\n    const click = useClick(context, {\n        enabled: false,\n        ...clickOptions,\n    });\n    const hover = useHover(context, { enabled: false, ...hoverOptions });\n    const focus = useFocus(context, { enabled: false, ...focusOptions });\n    const dismiss = useDismiss(context, dismissOptions);\n    const role = useRole(context, roleOptions);\n\n    const interactions = useInteractions([click, dismiss, focus, hover, role]);\n\n    React.useLayoutEffect(() => {\n        if (positionReference) {\n            data.refs.setPositionReference(positionReference?.current);\n        }\n    }, [positionReference, data.refs]);\n\n    return React.useMemo(\n        () => ({\n            open,\n            onOpenChange,\n            modal,\n            ...interactions,\n            ...data,\n        }),\n        [open, onOpenChange, modal, interactions, data],\n    );\n};\n\ntype PopoverContextType = ReturnType<typeof usePopover> | null;\n\nconst PopoverContext = React.createContext<PopoverContextType>(null);\n\nconst usePopoverContext = () => {\n    const context = React.useContext(PopoverContext);\n\n    if (context == null) {\n        throw new Error(\n            \"Popover komponenter må brukes innenfor en <Popover /> komponent\",\n        );\n    }\n\n    return context;\n};\n\nexport const Popover = ({\n    children,\n    ...restOptions\n}: {\n    children: React.ReactNode;\n} & PopoverOptions) => {\n    const popover = usePopover({ ...restOptions });\n    return (\n        <PopoverContext.Provider value={popover}>\n            {children}\n        </PopoverContext.Provider>\n    );\n};\n\ninterface PopoverTriggerProps {\n    children: React.ReactNode;\n    /**\n     * Rendrer komponenten som child-elementet sitt, og slår sammen egenskaper og props.\n     *\n     * Default er `false`.\n     *\n     * @example\n     * ```tsx\n     * <Component asChild foo=\"bar\">\n     *    <Child baz=\"qux\" />\n     * </Component>\n     *\n     * // Rendrer følgende:\n     * <Child foo=\"bar\" baz=\"qux\" />\n     * ```\n     */\n    asChild?: boolean;\n}\n\nconst PopoverTrigger = React.forwardRef<\n    HTMLElement,\n    React.HTMLProps<HTMLElement> & PopoverTriggerProps\n>(function PopoverTrigger({ children, asChild = false, ...props }, propRef) {\n    const { refs, getReferenceProps, open, onOpenChange } = usePopoverContext();\n    const childrenRef = (children as any).ref;\n    const ref = useMergeRefs([refs.setReference, propRef, childrenRef]);\n\n    if (asChild && React.isValidElement(children)) {\n        return React.cloneElement(\n            children,\n            getReferenceProps({\n                ref,\n                ...props,\n                ...children.props,\n            }),\n        );\n    }\n\n    return (\n        <button\n            ref={ref}\n            onClick={() => onOpenChange?.(!open)}\n            aria-expanded={open}\n            {...getReferenceProps({\n                ...props,\n                className: clsx(\"jkl-popover-trigger\", props.className),\n            })}\n        >\n            {children}\n        </button>\n    );\n});\n\ninterface PopoverContentProps {\n    /**\n     * Padding rundt innholdet i popoveren.\n     *\n     * Default er `0`.\n     */\n    padding?: 0 | 8 | 16 | 24;\n    /**\n     *\n     * Angir hvilket element som skal motta fokus ved åpning.\n     * Kan være en tabbar index eller en referanse til et element.\"\n     *\n     * Default er `0`, som betyr at det første fokuserbare elementet i popoveren får fokus.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#initialfocus\n     */\n    initialFocus?: number | React.RefObject<HTMLElement>;\n    /**\n     * Angir om fokus skal returneres til triggeren når popoveren lukkes.\n     *\n     * Default er `true`.\n     * @see https://floating-ui.com/docs/FloatingFocusManager#returnfocus\n     */\n    returnFocus?: boolean;\n}\n\n// Er popover-elementet posisjonert i forhold til et annet element enn triggeren?\nconst isCustomPositioned = (\n    referenceElement: ReferenceElement,\n): referenceElement is VirtualElement => {\n    if (!referenceElement) return false;\n\n    return \"contextElement\" in referenceElement;\n};\n\nconst PopoverContent = React.forwardRef<\n    HTMLDivElement,\n    React.HTMLProps<HTMLDivElement> & PopoverContentProps\n>(function PopoverContent(\n    {\n        style,\n        className,\n        padding = 0,\n        initialFocus = 0,\n        returnFocus = true,\n        ...props\n    },\n    propRef,\n) {\n    const { context, modal, refs, open, floatingStyles, getFloatingProps } =\n        usePopoverContext();\n    const ref = useMergeRefs([refs.setFloating, propRef]);\n\n    const referenceElement = refs.reference.current as ReferenceElement;\n\n    const { theme, size } = isCustomPositioned(referenceElement)\n        ? getThemeAndSize(referenceElement.contextElement)\n        : getThemeAndSize(referenceElement);\n\n    const floatingPortalRef = React.useRef<HTMLElement | null>(null);\n\n    // TODO: Løser et problem hvor nestede portaler ikke \"fester\" seg til det nærmeste portal-elementet. Fjernes når alle komponenter som rendres i en portal tar i bruk popover komponenten da den håndterer dette internt. Issue: https://github.com/fremtind/jokul/issues/4356\n    React.useEffect(() => {\n        floatingPortalRef.current =\n            context.elements.domReference?.closest<HTMLElement>(\n                \"[data-portal]\",\n            ) || document.body;\n    }, [context.elements.domReference]);\n\n    if (!open) return null;\n\n    return (\n        <FloatingPortal root={floatingPortalRef.current}>\n            <FloatingFocusManager\n                context={context}\n                modal={modal}\n                initialFocus={initialFocus}\n                returnFocus={returnFocus}\n            >\n                <div\n                    data-theme={theme}\n                    data-size={size}\n                    className={clsx(\"jkl jkl-popover\", className)}\n                    ref={ref}\n                    style={\n                        {\n                            ...style,\n                            ...floatingStyles,\n                            \"--popover-padding\": `var(--jkl-spacing-${padding})`,\n                        } as React.CSSProperties\n                    }\n                    {...getFloatingProps(props)}\n                >\n                    {props.children}\n                </div>\n            </FloatingFocusManager>\n        </FloatingPortal>\n    );\n});\n\nPopover.Trigger = PopoverTrigger;\nPopover.Content = PopoverContent;\n\nexport default Popover;\n"],"names":["PopoverContext","React","createContext","usePopoverContext","context","useContext","Error","Popover","children","restOptions","popover","open","_open","onOpenChange","_onOpenChange","placement","strategy","modal","offset","_offset","positionReference","hoverOptions","focusOptions","clickOptions","roleOptions","dismissOptions","uncontrolledOpen","setUncontrolledOpen","useState","data","useFloating","middleware","flip","padding","fallbackPlacements","shift","whileElementsMounted","autoUpdate","click","useClick","enabled","hover","useHover","focus","useFocus","dismiss","useDismiss","role","useRole","interactions","useInteractions","useLayoutEffect","refs","setPositionReference","current","useMemo","usePopover","Provider","value","PopoverTrigger","forwardRef","asChild","props","propRef","getReferenceProps","childrenRef","ref","useMergeRefs","setReference","isValidElement","cloneElement","jsx","onClick","className","clsx","PopoverContent","style","initialFocus","returnFocus","floatingStyles","getFloatingProps","setFloating","referenceElement","reference","theme","size","getThemeAndSize","contextElement","floatingPortalRef","useRef","useEffect","elements","domReference","closest","document","body","FloatingPortal","root","FloatingFocusManager","Trigger","Content"],"mappings":"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"}

package/build/es/components/radio-button/BaseRadioButton.js

@@ -1,2 +1,2 @@
-import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{useId as o}from"../../hooks/useId/useId.js";const r=t((t,r)=>{const{id:l,className:n,checked:s,children:d,label:u,inline:c,invalid:m,name:j,value:b,onChange:k,...f}=t,h=o(l||"jkl-radio-button",{generateSuffix:!l});return a("div",{className:i("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":m}),children:[e("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:u||d}),e("input",{name:j,ref:r,...f,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:s,"aria-invalid":m||f["aria-invalid"]})]})});r.displayName="BaseRadioButton";export{r as BaseRadioButton};
+import{jsxs as a,jsx as e}from"react/jsx-runtime";import{c as i}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";import{useId as o}from"../../hooks/useId/useId.js";const r=t((t,r)=>{const{id:l,className:n,checked:s,children:d,label:u,inline:c,invalid:m,name:j,value:b,onChange:k,...f}=t,h=o(l||"jkl-radio-button",{generateSuffix:!l});return a("div",{className:i("jkl-radio-button",n,{"jkl-radio-button--inline":c,"jkl-radio-button--error":m}),children:[e("input",{name:j,ref:r,...f,id:h,className:"jkl-radio-button__input",type:"radio",onChange:k,value:b,checked:s,"aria-invalid":m||f["aria-invalid"]}),e("label",{"data-testid":"jkl-radio-button__label-tag",htmlFor:h,className:"jkl-radio-button__label",children:u||d})]})});r.displayName="BaseRadioButton";export{r as BaseRadioButton};
 //# sourceMappingURL=BaseRadioButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n    HTMLInputElement,\n    BaseRadioButtonProps\n>((props, ref) => {\n    const {\n        id,\n        className,\n        checked,\n        children,\n        label,\n        inline,\n        invalid,\n        name,\n        value,\n        onChange,\n        ...rest\n    } = props;\n\n    const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n    return (\n        <div\n            className={clsx(\"jkl-radio-button\", className, {\n                \"jkl-radio-button--inline\": inline,\n                \"jkl-radio-button--error\": invalid,\n            })}\n        >\n            <label\n                data-testid=\"jkl-radio-button__label-tag\"\n                htmlFor={inputId}\n                className=\"jkl-radio-button__label\"\n            >\n                {label || children}\n            </label>\n            <input\n                name={name}\n                ref={ref}\n                {...rest}\n                id={inputId}\n                className=\"jkl-radio-button__input\"\n                type=\"radio\"\n                onChange={onChange}\n                value={value}\n                checked={checked}\n                aria-invalid={invalid || rest[\"aria-invalid\"]}\n            />\n        </div>\n    );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","htmlFor","type","displayName"],"mappings":"sLAKO,MAAMA,EAAkBC,EAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAC,MAAA,CACGb,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAC,QAAA,CACG,cAAY,8BACZC,QAASN,EACTV,UAAU,0BAETE,SAAAC,GAASD,IAEda,EAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACViB,KAAK,QACLT,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,uBAM9Cd,EAAgBuB,YAAc"}
+{"version":3,"file":"BaseRadioButton.js","sources":["../../../../src/components/radio-button/BaseRadioButton.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport type { BaseRadioButtonProps } from \"./types.js\";\n\nexport const BaseRadioButton = forwardRef<\n    HTMLInputElement,\n    BaseRadioButtonProps\n>((props, ref) => {\n    const {\n        id,\n        className,\n        checked,\n        children,\n        label,\n        inline,\n        invalid,\n        name,\n        value,\n        onChange,\n        ...rest\n    } = props;\n\n    const inputId = useId(id || \"jkl-radio-button\", { generateSuffix: !id });\n\n    return (\n        <div\n            className={clsx(\"jkl-radio-button\", className, {\n                \"jkl-radio-button--inline\": inline,\n                \"jkl-radio-button--error\": invalid,\n            })}\n        >\n            <input\n                name={name}\n                ref={ref}\n                {...rest}\n                id={inputId}\n                className=\"jkl-radio-button__input\"\n                type=\"radio\"\n                onChange={onChange}\n                value={value}\n                checked={checked}\n                aria-invalid={invalid || rest[\"aria-invalid\"]}\n            />\n            <label\n                data-testid=\"jkl-radio-button__label-tag\"\n                htmlFor={inputId}\n                className=\"jkl-radio-button__label\"\n            >\n                {label || children}\n            </label>\n        </div>\n    );\n});\n\nBaseRadioButton.displayName = \"BaseRadioButton\";\n"],"names":["BaseRadioButton","forwardRef","props","ref","id","className","checked","children","label","inline","invalid","name","value","onChange","rest","inputId","useId","generateSuffix","jsxs","clsx","jsx","type","htmlFor","displayName"],"mappings":"sLAKO,MAAMA,EAAkBC,EAG7B,CAACC,EAAOC,KACN,MACIC,GAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,SAAAA,EACAC,MAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EACAC,MAAAA,EACAC,SAAAA,KACGC,GACHZ,EAEEa,EAAUC,EAAMZ,GAAM,mBAAoB,CAAEa,gBAAiBb,IAEnE,OACIc,EAAC,MAAA,CACGb,UAAWc,EAAK,mBAAoBd,EAAW,CAC3C,2BAA4BI,EAC5B,0BAA2BC,IAG/BH,SAAA,CAAAa,EAAC,QAAA,CACGT,KAAAA,EACAR,IAAAA,KACIW,EACJV,GAAIW,EACJV,UAAU,0BACVgB,KAAK,QACLR,SAAAA,EACAD,MAAAA,EACAN,QAAAA,EACA,eAAcI,GAAWI,EAAK,kBAElCM,EAAC,QAAA,CACG,cAAY,8BACZE,QAASP,EACTV,UAAU,0BAETE,SAAAC,GAASD,SAM1BP,EAAgBuB,YAAc"}

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/text-area/BaseTextArea.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as t}from"react/jsx-runtime";import{forwardRef as a,useState as r,useRef as s,useEffect as n}from"react";const o=a((a,o)=>{const{autoExpand:l,counter:i,onBlur:c,onFocus:u,rows:d=7,placeholder:h=" ",startOpen:x,style:f,value:g,"aria-invalid":v,onChange:p,...m}=a,[y,_]=r(()=>typeof g>"u"?0:"number"==typeof g?String(g).length:g.length),[j,k]=r(!1),w=s(null),N=o||w;n(()=>{const e=N.current;if(e){if(!l)return void(e.style.height="");j||g?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[l,N,g,j,y]);const B=i?.maxLength||0,$=B-y;const A=!(!v&&!(i&&y>B?`Du har skrevet ${y-B} tegn for mye`:void 0));return e("div",{className:"jkl-text-area-wrapper","data-invalid":A,"data-has-content":y>0,children:[t("textarea",{"aria-invalid":A,className:`jkl-text-area__text-area jkl-text-area__text-area--${d}-rows`,onBlur:function(e){k(!1),c&&c(e)},onFocus:function(e){k(!0),u&&u(e)},onChange:function(e){_(e.target.value.length),p&&p(e)},ref:N,style:{...f,...{overflowX:l?"hidden":void 0}},placeholder:h,value:g,...m}),i&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[y," / ",B]}),!i.hideProgress&&t("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(C=$,E=B,C<=0||0===E?0:100*C/E)+"%"}})]})]});var C,E});o.displayName="BaseTextArea";export{o as BaseTextArea};
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import{forwardRef as t,useState as r,useRef as s,useEffect as o}from"react";import{getCounterValue as l}from"./counter.js";const n=t((t,n)=>{const{autoExpand:i,counter:u,defaultValue:c,onBlur:d,onFocus:h,rows:f=7,placeholder:x=" ",startOpen:p,style:g,value:m,"aria-invalid":v,onChange:j,...y}=t,_=u?.strategy??"characters",k=typeof m<"u",[w,N]=r(c),[B,C]=r(!1),V=s(null),A=n||V,E=k?m:w,F=k?{value:m}:{defaultValue:c},R=l(E,_),T=u?.maxLength||0,$=T-R,H=!(!v&&!!!(u&&R>T));o(()=>{const e=A.current;if(e){if(!i)return void(e.style.height="");B||E?(e.style.height="auto",e.style.height=`${e.scrollHeight}px`):e.style.height=""}},[i,A,E,B,R]);return e("div",{className:"jkl-text-area-wrapper","data-invalid":H,"data-has-content":R>0,children:[a("textarea",{"aria-invalid":H,className:`jkl-text-area__text-area jkl-text-area__text-area--${f}-rows`,onBlur:function(e){C(!1),d&&d(e)},onFocus:function(e){C(!0),h&&h(e)},onChange:function(e){k||N(e.target.value),j&&j(e)},ref:A,style:{...g,...{overflowX:i?"hidden":void 0}},placeholder:x,...F,...y}),u&&e("div",{className:"jkl-text-area__counter","aria-hidden":"true",children:[e("div",{className:"jkl-text-area__counter-count",children:[R," / ",T]}),!u.hideProgress&&a("div",{className:"jkl-text-area__counter-progress",style:{"--progress-width":(L=$,O=T,L<=0||0===O?0:100*L/O)+"%"}})]})]});var L,O});n.displayName="BaseTextArea";export{n as BaseTextArea};
 //# sourceMappingURL=BaseTextArea.js.map

package/build/es/components/text-area/BaseTextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const [counterCurrent, setCounterCurrent] = useState(() => {\n            if (typeof value === \"undefined\") {\n                return 0;\n            }\n\n            if (typeof value === \"number\") {\n                return String(value).length;\n            }\n\n            return value.length;\n        });\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || value) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [autoExpand, textAreaRef, value, textAreaFocused, counterCurrent]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            setCounterCurrent(e.target.value.length);\n            if (onChange) {\n                onChange(e);\n            }\n        }\n\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n        const counterLabel =\n            counter && counterCurrent > counterTotal\n                ? `Du har skrevet ${counterCurrent - counterTotal} tegn for mye`\n                : undefined;\n\n        const invalid = Boolean(ariaInvalid || counterLabel);\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    value={value}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","counterCurrent","setCounterCurrent","useState","String","length","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","useEffect","textAreaElement","current","height","scrollHeight","counterTotal","maxLength","progressCurrent","invalid","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","displayName"],"mappings":"8HAWO,MAAMA,EAAeC,EACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHb,GAEGc,EAAgBC,GAAqBC,EAAS,WACtCN,EAAU,IACV,EAGU,iBAAVA,EACAO,OAAOP,GAAOQ,OAGlBR,EAAMQ,SAEVC,EAAiBC,GAAsBJ,GAAS,GACjDK,EAAcC,EAA4B,MAC1CC,EACDtB,GAA0CoB,EAG/CG,EAAU,KACN,MAAMC,EAAkBF,EAAYG,QACpC,GAAID,EAAiB,CACjB,IAAKvB,EAED,YADAuB,EAAgBhB,MAAMkB,OAAS,IAI/BR,GAAmBT,GACnBe,EAAgBhB,MAAMkB,OAAS,OAC/BF,EAAgBhB,MAAMkB,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBhB,MAAMkB,OAAS,EAEvC,GACD,CAACzB,EAAYqB,EAAab,EAAOS,EAAiBL,IAuBrD,MAAMe,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAef,EAO/C,MAKMkB,KAAkBrB,KAJpBR,GAAWW,EAAiBe,EACtB,kBAAkBf,EAAiBe,sBACnC,IAQV,OACII,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcF,EACd,mBAAkBlB,EAAiB,EAEnCqB,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcJ,EACdE,UAAW,sDAAsD5B,SACjEF,OA1CZ,SAAsBiC,GAClBjB,GAAmB,GACfhB,GACAA,EAAOiC,EAEf,EAsCYhC,QAlDZ,SAAuBgC,GACnBjB,GAAmB,GACff,GACAA,EAAQgC,EAEhB,EA8CYzB,SArCZ,SAAwByB,GACpBtB,EAAkBsB,EAAEC,OAAO5B,MAAMQ,QAC7BN,GACAA,EAASyB,EAEjB,EAiCYpC,IAAKsB,EACLd,MAAO,IAAKA,KAjBF,CAClB8B,UAAWrC,EAAa,cAAW,IAiB3BK,YAAAA,EACAG,MAAAA,KACIG,IAEPV,GACG8B,EAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAArB,EAAe,MAAce,MAEhC1B,EAAQqC,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACVzB,MAAO,CACF,oBA5CAiB,EA6CGK,EA7CcU,EA8CdZ,EA7CxBH,GAAW,GAGE,IAAVe,EAFI,EAEyB,IAAVf,EAAiBe,GAwCa,aA5C5D,IAA6Bf,EAAiBe,IAyDtD3C,EAAa4C,YAAc"}
+{"version":3,"file":"BaseTextArea.js","sources":["../../../../src/components/text-area/BaseTextArea.tsx"],"sourcesContent":["import React, {\n    type ChangeEvent,\n    type FocusEvent,\n    forwardRef,\n    type RefObject,\n    useEffect,\n    useRef,\n    useState,\n} from \"react\";\nimport { getCounterValue } from \"./counter.js\";\nimport type { BaseTextAreaProps } from \"./types.js\";\n\nexport const BaseTextArea = forwardRef<HTMLTextAreaElement, BaseTextAreaProps>(\n    (props, ref) => {\n        const {\n            autoExpand,\n            counter,\n            defaultValue,\n            onBlur,\n            onFocus,\n            rows = 7,\n            placeholder = \" \", // This space intentionally left blank. Denne + rows trengs for å få den ekspanderende effekten.\n            startOpen,\n            style,\n            value,\n            \"aria-invalid\": ariaInvalid,\n            onChange,\n            ...rest\n        } = props;\n\n        const strategy = counter?.strategy ?? \"characters\";\n        const isControlled = typeof value !== \"undefined\";\n\n        const [uncontrolledValue, setUncontrolledValue] =\n            useState(defaultValue);\n        const [textAreaFocused, setTextAreaFocused] = useState(false);\n        const internalRef = useRef<HTMLTextAreaElement>(null);\n        const textAreaRef =\n            (ref as RefObject<HTMLTextAreaElement>) || internalRef;\n\n        // Hvis feltet styres utenfra bruker vi `value`, ellers holder vi styr på verdien selv.\n        const textAreaValue = isControlled ? value : uncontrolledValue;\n        const textAreaValueProps = isControlled ? { value } : { defaultValue };\n\n        const counterCurrent = getCounterValue(textAreaValue, strategy);\n        const counterTotal: number = counter?.maxLength || 0;\n        const progressCurrent: number = counterTotal - counterCurrent;\n        const isOverLimit = Boolean(counter && counterCurrent > counterTotal);\n        const invalid = Boolean(ariaInvalid || isOverLimit);\n\n        // biome-ignore lint/correctness/useExhaustiveDependencies: counterCurrent trengs for å lytte på tekstendringer i textarea for auto-expand funksjonalitet\n        useEffect(() => {\n            const textAreaElement = textAreaRef.current;\n            if (textAreaElement) {\n                if (!autoExpand) {\n                    textAreaElement.style.height = \"\";\n                    return;\n                }\n\n                if (textAreaFocused || textAreaValue) {\n                    textAreaElement.style.height = \"auto\"; // Sett til auto før scrollhøyden leses, sånn at redusering av høyde ved sletting av tekst fungerer\n                    textAreaElement.style.height = `${textAreaElement.scrollHeight}px`;\n                } else {\n                    textAreaElement.style.height = \"\";\n                }\n            }\n        }, [\n            autoExpand,\n            textAreaRef,\n            textAreaValue,\n            textAreaFocused,\n            counterCurrent,\n        ]);\n\n        function handleOnFocus(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(true);\n            if (onFocus) {\n                onFocus(e);\n            }\n        }\n\n        function handleOnBlur(e: FocusEvent<HTMLTextAreaElement>) {\n            setTextAreaFocused(false);\n            if (onBlur) {\n                onBlur(e);\n            }\n        }\n\n        function handleOnChange(e: ChangeEvent<HTMLTextAreaElement>) {\n            if (!isControlled) {\n                setUncontrolledValue(e.target.value);\n            }\n\n            if (onChange) {\n                onChange(e);\n            }\n        }\n        function calculatePercentage(current: number, total: number): number {\n            if (current <= 0) {\n                return 0;\n            }\n            return total === 0 ? 0 : (current * 100) / total;\n        }\n\n        const overflowStyle = {\n            overflowX: autoExpand ? \"hidden\" : undefined, // Must set overflowX hidden for Firefox https://stackoverflow.com/a/22700700\n        } as React.CSSProperties;\n\n        return (\n            <div\n                className=\"jkl-text-area-wrapper\"\n                data-invalid={invalid}\n                data-has-content={counterCurrent > 0}\n            >\n                <textarea\n                    aria-invalid={invalid}\n                    className={`jkl-text-area__text-area jkl-text-area__text-area--${rows}-rows`}\n                    onBlur={handleOnBlur}\n                    onFocus={handleOnFocus}\n                    onChange={handleOnChange}\n                    ref={textAreaRef}\n                    style={{ ...style, ...overflowStyle }}\n                    placeholder={placeholder}\n                    {...textAreaValueProps}\n                    {...rest}\n                />\n                {counter && (\n                    <div className=\"jkl-text-area__counter\" aria-hidden=\"true\">\n                        <div className=\"jkl-text-area__counter-count\">\n                            {counterCurrent}&nbsp;/&nbsp;{counterTotal}\n                        </div>\n                        {!counter.hideProgress && (\n                            <div\n                                className=\"jkl-text-area__counter-progress\"\n                                style={{\n                                    [\"--progress-width\" as string]: `${calculatePercentage(\n                                        progressCurrent,\n                                        counterTotal,\n                                    )}%`,\n                                }}\n                            />\n                        )}\n                    </div>\n                )}\n            </div>\n        );\n    },\n);\nBaseTextArea.displayName = \"BaseTextArea\";\n"],"names":["BaseTextArea","forwardRef","props","ref","autoExpand","counter","defaultValue","onBlur","onFocus","rows","placeholder","startOpen","style","value","ariaInvalid","onChange","rest","strategy","isControlled","uncontrolledValue","setUncontrolledValue","useState","textAreaFocused","setTextAreaFocused","internalRef","useRef","textAreaRef","textAreaValue","textAreaValueProps","counterCurrent","getCounterValue","counterTotal","maxLength","progressCurrent","invalid","useEffect","textAreaElement","current","height","scrollHeight","jsxs","className","children","jsx","e","target","overflowX","hideProgress","total","displayName"],"mappings":"6KAYO,MAAMA,EAAeC,EACxB,CAACC,EAAOC,KACJ,MACIC,WAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,QAAAA,EACAC,KAAAA,EAAO,EACPC,YAAAA,EAAc,IACdC,UAAAA,EACAC,MAAAA,EACAC,MAAAA,EACA,eAAgBC,EAChBC,SAAAA,KACGC,GACHd,EAEEe,EAAWZ,GAASY,UAAY,aAChCC,SAAsBL,EAAU,KAE/BM,EAAmBC,GACtBC,EAASf,IACNgB,EAAiBC,GAAsBF,GAAS,GACjDG,EAAcC,EAA4B,MAC1CC,EACDvB,GAA0CqB,EAGzCG,EAAgBT,EAAeL,EAAQM,EACvCS,EAAqBV,EAAe,CAAEL,MAAAA,GAAU,CAAEP,aAAAA,GAElDuB,EAAiBC,EAAgBH,EAAeV,GAChDc,EAAuB1B,GAAS2B,WAAa,EAC7CC,EAA0BF,EAAeF,EAEzCK,KAAkBpB,OADIT,GAAWwB,EAAiBE,IAIxDI,EAAU,KACN,MAAMC,EAAkBV,EAAYW,QACpC,GAAID,EAAiB,CACjB,IAAKhC,EAED,YADAgC,EAAgBxB,MAAM0B,OAAS,IAI/BhB,GAAmBK,GACnBS,EAAgBxB,MAAM0B,OAAS,OAC/BF,EAAgBxB,MAAM0B,OAAS,GAAGF,EAAgBG,kBAElDH,EAAgBxB,MAAM0B,OAAS,EAEvC,GACD,CACClC,EACAsB,EACAC,EACAL,EACAO,IAqCJ,OACIW,EAAC,MAAA,CACGC,UAAU,wBACV,eAAcP,EACd,mBAAkBL,EAAiB,EAEnCa,SAAA,CAAAC,EAAC,WAAA,CACG,eAAcT,EACdO,UAAW,sDAAsDhC,SACjEF,OApCZ,SAAsBqC,GAClBrB,GAAmB,GACfhB,GACAA,EAAOqC,EAEf,EAgCYpC,QA5CZ,SAAuBoC,GACnBrB,GAAmB,GACff,GACAA,EAAQoC,EAEhB,EAwCY7B,SA/BZ,SAAwB6B,GACf1B,GACDE,EAAqBwB,EAAEC,OAAOhC,OAG9BE,GACAA,EAAS6B,EAEjB,EAwBYzC,IAAKuB,EACLd,MAAO,IAAKA,KAjBF,CAClBkC,UAAW1C,EAAa,cAAW,IAiB3BM,YAAAA,KACIkB,KACAZ,IAEPX,GACGmC,EAAC,MAAA,CAAIC,UAAU,yBAAyB,cAAY,OAChDC,SAAA,CAAAF,EAAC,MAAA,CAAIC,UAAU,+BACVC,SAAA,CAAAb,EAAe,MAAcE,MAEhC1B,EAAQ0C,cACNJ,EAAC,MAAA,CACGF,UAAU,kCACV7B,MAAO,CACF,oBAtCAyB,EAuCGJ,EAvCce,EAwCdjB,EAvCxBM,GAAW,GAGE,IAAVW,EAFI,EAEyB,IAAVX,EAAiBW,GAkCa,aAtC5D,IAA6BX,EAAiBW,IAmDtDhD,EAAaiD,YAAc"}

package/build/es/components/text-area/counter.d.ts

@@ -0,0 +1,2 @@
+import { CounterStrategy } from './types.js';
+export declare function getCounterValue(value: string | number | readonly string[] | undefined, strategy?: CounterStrategy): number;

package/build/es/components/text-area/counter.js

@@ -0,0 +1,2 @@
+const e=new TextEncoder;function t(t,n="characters"){if(typeof t>"u")return 0;const r="string"==typeof t?t:Array.isArray(t)?t.join(""):String(t);return"bytes"===n?e.encode(r).length:r.length}export{t as getCounterValue};
+//# sourceMappingURL=counter.js.map

package/build/es/components/text-area/counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"counter.js","sources":["../../../../src/components/text-area/counter.ts"],"sourcesContent":["import type { CounterStrategy } from \"./types.js\";\n\nconst textEncoder = new TextEncoder();\n\nexport function getCounterValue(\n    value: string | number | readonly string[] | undefined,\n    strategy: CounterStrategy = \"characters\",\n): number {\n    if (typeof value === \"undefined\") {\n        return 0;\n    }\n\n    const normalizedValue =\n        typeof value === \"string\"\n            ? value\n            : Array.isArray(value)\n              ? value.join(\"\")\n              : String(value);\n\n    if (strategy === \"bytes\") {\n        return textEncoder.encode(normalizedValue).length;\n    }\n\n    return normalizedValue.length;\n}\n"],"names":["textEncoder","TextEncoder","getCounterValue","value","strategy","normalizedValue","Array","isArray","join","String","encode","length"],"mappings":"AAEA,MAAMA,EAAc,IAAIC,YAEjB,SAASC,EACZC,EACAC,EAA4B,cAE5B,UAAWD,EAAU,IACjB,OAAO,EAGX,MAAME,EACe,iBAAVF,EACDA,EACAG,MAAMC,QAAQJ,GACZA,EAAMK,KAAK,IACXC,OAAON,GAEnB,MAAiB,UAAbC,EACOJ,EAAYU,OAAOL,GAAiBM,OAGxCN,EAAgBM,MAC3B"}

package/build/es/components/text-area/types.d.ts

@@ -1,8 +1,28 @@
 import { TextareaHTMLAttributes } from 'react';
 import { InputGroupProps } from '../input-group/types.js';
+export type CounterStrategy = "characters" | "bytes";
 export type Counter = {
-    /** Antall tegn før telleren når maksimum og vi viser en feilmelding */
+    /**
+     * Maksverdi for telleren.
+     *
+     * Enheten avhenger av `strategy`:
+     * - `"characters"`: antall tegn
+     * - `"bytes"`: antall UTF-8-bytes
+     */
     maxLength: number;
+    /**
+     * Bestemmer hva telleren måler.
+     *
+     * - "characters" teller tekst på samme måte som i dag og er standard
+     * - "bytes" teller antall UTF-8-bytes, for usecaser der backend eller API
+     *   håndhever en bytegrense
+     *
+     * Unngå å kombinere `strategy="bytes"` med native `maxLength` på
+     * `<textarea>`, siden nettleseren fortsatt håndhever `maxLength` som tegn.
+     *
+     * @default "characters"
+     */
+    strategy?: CounterStrategy;
     /**
      * Med teller vises en progress-bar i bunnen av tekstfeltet som krymper
      * ned fra 100% (null tegn skrevet) til 0% (maks antall tegn skrevet).

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/components/typography/Text.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TextElement, TextProps } from './types.js';
+type TextComponent = <As extends TextElement = "p">(props: TextProps<As>) => React.ReactElement | null;
+export declare const Text: TextComponent;
+export {};

package/build/es/components/typography/Text.js

@@ -0,0 +1,2 @@
+import{jsx as s}from"react/jsx-runtime";import{c as t}from"../../../clsx-BeLtu-UY.js";import{forwardRef as r}from"react";const a=r(function({as:r,className:a,size:o="m",bold:e,short:m,srOnly:i,...l},c){return s(r||"p",{className:t("jkl-text",i&&"jkl-sr-only",a),"data-text-size":o,"data-bold":e||void 0,"data-short":m||void 0,ref:c,...l})});export{a as Text};
+//# sourceMappingURL=Text.js.map

package/build/es/components/typography/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../../../src/components/typography/Text.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TextElement, TextProps } from \"./types.js\";\n\ntype TextComponent = <As extends TextElement = \"p\">(\n    props: TextProps<As>,\n) => React.ReactElement | null;\n\nexport const Text: TextComponent = forwardRef(function Text<\n    As extends TextElement = \"p\",\n>(\n    { as, className, size = \"m\", bold, short, srOnly, ...rest }: TextProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Component = (as || \"p\") as React.ElementType;\n    return (\n        <Component\n            className={clsx(\"jkl-text\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            data-bold={bold || undefined}\n            data-short={short || undefined}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TextComponent;\n"],"names":["Text","forwardRef","as","className","size","bold","short","srOnly","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAsBC,EAAW,UAGxCC,GAAAA,EAAIC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,KAAAA,EAAMC,MAAAA,EAAOC,OAAAA,KAAWC,GACrDC,GAGA,OACIC,EAFeR,GAAM,IAEpB,CACGC,UAAWQ,EAAK,WAAYJ,GAAU,cAAeJ,GACrD,iBAAgBC,EAChB,YAAWC,QAAQ,EACnB,aAAYC,QAAS,EACrBG,IAAAA,KACID,GAGhB"}

package/build/es/components/typography/Title.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import { TitleElement, TitleProps } from './types.js';
+type TitleComponent = <As extends TitleElement = "h2">(props: TitleProps<As>) => React.ReactElement | null;
+export declare const Title: TitleComponent;
+export {};

package/build/es/components/typography/Title.js

@@ -0,0 +1,2 @@
+import{jsx as s}from"react/jsx-runtime";import{c as r}from"../../../clsx-BeLtu-UY.js";import{forwardRef as t}from"react";const a=t(function({className:t,size:a="l",as:e,srOnly:o,...l},i){return s(e||"h2",{className:r("jkl-title",o&&"jkl-sr-only",t),"data-text-size":a,ref:i,...l})});export{a as Title};
+//# sourceMappingURL=Title.js.map

package/build/es/components/typography/Title.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Title.js","sources":["../../../../src/components/typography/Title.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport type { PolymorphicRef } from \"../../utilities/index.js\";\nimport type { TitleElement, TitleProps } from \"./types.js\";\n\ntype TitleComponent = <As extends TitleElement = \"h2\">(\n    props: TitleProps<As>,\n) => React.ReactElement | null;\n\nexport const Title: TitleComponent = forwardRef(function Title<\n    As extends TitleElement = \"h2\",\n>(\n    { className, size = \"l\", as, srOnly, ...rest }: TitleProps<As>,\n    ref?: PolymorphicRef<As>,\n) {\n    const Tag = (as || \"h2\") as React.ElementType;\n    return (\n        <Tag\n            className={clsx(\"jkl-title\", srOnly && \"jkl-sr-only\", className)}\n            data-text-size={size}\n            ref={ref}\n            {...rest}\n        />\n    );\n}) as TitleComponent;\n"],"names":["Title","forwardRef","className","size","as","srOnly","rest","ref","jsx","clsx"],"mappings":"yHASO,MAAMA,EAAwBC,EAAW,UAG1CC,UAAAA,EAAWC,KAAAA,EAAO,IAAKC,GAAAA,EAAIC,OAAAA,KAAWC,GACxCC,GAGA,OACIC,EAFSJ,GAAM,KAEd,CACGF,UAAWO,EAAK,YAAaJ,GAAU,cAAeH,GACtD,iBAAgBC,EAChBI,IAAAA,KACID,GAGhB"}

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

@@ -0,0 +1,3 @@
+export { Text } from './Text.js';
+export { Title } from './Title.js';
+export type { TextProps, TextSize, TitleProps, TitleSize } from './types.js';

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

@@ -0,0 +1,2 @@
+import{Text as t}from"./Text.js";import{Title as e}from"./Title.js";export{t as Text,e as Title};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1,48 @@
+import { PolymorphicPropsWithRef } from '../../utilities/index.js';
+export type TextElement = "p" | "span" | "label" | "legend" | "small" | "strong" | "em" | "code" | "kbd" | "samp" | "var";
+export type TitleElement = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "label" | "legend";
+export type TextSize = "xs" | "s" | "m" | "l";
+export type TitleSize = "xs" | "s" | "m" | "l" | "xl";
+type TextOwnProps = {
+    /**
+     * Visuell størrelse på teksten. Tilsvarer font-size-tokens i Jøkul.
+     * @default "m"
+     */
+    size?: TextSize;
+    /**
+     * Uthever teksten (font-weight: bold).
+     * @default false
+     */
+    bold?: boolean;
+    /**
+     * Setter mindre linjehøyde — bruk når teksten i all hovedsak går over
+     * én linje (f.eks. i tabellceller eller knapper).
+     * @default false
+     */
+    short?: boolean;
+    /**
+     * Skjuler elementet visuelt, men beholder det for skjermlesere.
+     * Bruk for å gi ekstra kontekst til assistive teknologier uten å
+     * påvirke det visuelle.
+     * @default false
+     */
+    srOnly?: boolean;
+};
+type TitleOwnProps = {
+    /**
+     * Visuell størrelse på tittelen. Frakoblet fra `as` — velg semantisk
+     * nivå via `as`, og visuell størrelse via `size`.
+     * @default "l"
+     */
+    size?: TitleSize;
+    /**
+     * Skjuler elementet visuelt, men beholder det for skjermlesere.
+     * Bruk for å beholde riktig overskrifts-hierarki i skjermlesere
+     * uten å vise tittelen visuelt.
+     * @default false
+     */
+    srOnly?: boolean;
+};
+export type TextProps<As extends TextElement = "p"> = PolymorphicPropsWithRef<As, TextOwnProps>;
+export type TitleProps<As extends TitleElement = "h2"> = PolymorphicPropsWithRef<As, TitleOwnProps>;
+export {};

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