@fremtind/jokul 0.14.1 → 0.15.0

package/build/cjs/components/button/Button.js

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("../../../clsx-E3yX_9sL.cjs"),o=require("react");require("../../hooks/useScreen/useScreen.js");const r=require("../../hooks/useAriaLiveRegion/useAriaLiveRegion.js");require("../../hooks/useId/useId.js");const s=require("../loader/Loader.js"),n=o.forwardRef((function(n,i){const{as:c="button",children:a,className:l,density:u,onTouchStart:d,loader:j,iconLeft:h,iconRight:x,variant:y="secondary",...k}=n,p=c,b=o.useCallback((t=>{d&&d(t);const e=t.target;if(e&&t.targetTouches.length){const o=t.targetTouches[0].clientX-e.getBoundingClientRect().x,r=t.targetTouches[0].clientY-e.getBoundingClientRect().y;e.style.setProperty("--jkl-touch-xcoord",o.toPrecision(4)+"px"),e.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),e.classList.add("jkl-button--pressed"),setTimeout((()=>{e.classList.remove("jkl-button--pressed"),e.style.removeProperty("--jkl-touch-xcoord"),e.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[d]),v=r.useAriaLiveRegion(null==j?void 0:j.showLoader);return t.jsx(p,{...v,"data-density":u,className:e.clsx("jkl-button","jkl-button--"+y,l,{"jkl-button--icon-left":h,"jkl-button--icon-right":x}),disabled:"button"===c?null==j?void 0:j.showLoader:void 0,onTouchStart:b,...k,ref:i,children:t.jsx("div",{className:"jkl-button__content",children:t.jsxs("div",{className:e.clsx("jkl-button__slider",{"jkl-button__slider--show-loader":!(null==j||!j.showLoader)}),children:[h&&t.jsx("span",{className:"jkl-button__icon",children:h}),t.jsx("span",{className:"jkl-button__children",children:a}),x&&t.jsx("span",{className:"jkl-button__icon",children:x}),j&&t.jsx("div",{className:"jkl-button__loader",children:t.jsx(s.Loader,{textDescription:j.textDescription,"aria-hidden":!j.showLoader})})]})})})}));exports.Button=n,exports.GhostButton=function(e){const o={...e,variant:"ghost"};return t.jsx(n,{...o})},exports.PrimaryButton=function(e){const o={...e,variant:"primary"};return t.jsx(n,{...o})},exports.SecondaryButton=function(e){const o={...e,variant:"secondary"};return t.jsx(n,{...o})},exports.TertiaryButton=function(e){const o={...e,variant:"tertiary"};return t.jsx(n,{...o})};
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t=require("../../../clsx-E3yX_9sL.cjs"),o=require("react");require("../../hooks/useScreen/useScreen.js");const r=require("../../hooks/useAriaLiveRegion/useAriaLiveRegion.js");require("../../hooks/useId/useId.js");const s=require("../loader/Loader.js"),n=o.forwardRef((function(n,i){const{as:a="button",children:c,className:u,density:l,onTouchStart:d,loader:h,icon:j,iconPosition:x="left",iconLeft:y,iconRight:g,variant:p="secondary",...v}=n,b=a,k=o.useCallback((e=>{d&&d(e);const t=e.target;if(t&&!t.disabled&&e.targetTouches.length){const o=e.targetTouches[0].clientX-t.getBoundingClientRect().x,r=e.targetTouches[0].clientY-t.getBoundingClientRect().y;t.style.setProperty("--jkl-touch-xcoord",o.toPrecision(4)+"px"),t.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),t.classList.add("jkl-button--pressed"),setTimeout((()=>{t.classList.remove("jkl-button--pressed"),t.style.removeProperty("--jkl-touch-xcoord"),t.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[d]),m=r.useAriaLiveRegion(null==h?void 0:h.showLoader),f=!!c&&!(null==h||!h.showLoader);return e.jsxs(b,{...m,"data-loading":f,"data-density":l,className:t.clsx("jkl-button","jkl-button--"+p,u),disabled:"button"===a?null==h?void 0:h.showLoader:void 0,onTouchStart:k,...v,ref:i,children:[e.jsxs("div",{className:"jkl-button__label",children:[y&&y,j&&"left"===x&&j,c&&e.jsx("span",{className:"jkl-button__text",children:c}),g&&g,j&&"right"===x&&j]}),c&&e.jsx(s.Loader,{className:"jkl-button__loader",variant:"medium",textDescription:(null==h?void 0:h.textDescription)||"Vennligst vent","aria-hidden":!(null!=h&&h.showLoader)})]})}));exports.Button=n,exports.GhostButton=function(t){const o={...t,variant:"ghost"};return e.jsx(n,{...o})},exports.PrimaryButton=function(t){const o={...t,variant:"primary"};return e.jsx(n,{...o})},exports.SecondaryButton=function(t){const o={...t,variant:"secondary"};return e.jsx(n,{...o})},exports.TertiaryButton=function(t){const o={...t,variant:"tertiary"};return e.jsx(n,{...o})};
 //# sourceMappingURL=Button.js.map

package/build/cjs/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ButtonHTMLAttributes, type TouchEvent, useCallback } from \"react\";\nimport type { PolymorphicRef } from \"../..\";\nimport { useAriaLiveRegion } from \"../../hooks\";\nimport { Loader } from \"../loader\";\nimport type { ButtonComponent, ButtonProps } from \"./types\";\n\nexport const Button = React.forwardRef(function Button<ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && event.targetTouches.length) {\n                const Xcoord = event.targetTouches[0].clientX - target.getBoundingClientRect().x;\n                const Ycoord = event.targetTouches[0].clientY - target.getBoundingClientRect().y;\n                target.style.setProperty(\"--jkl-touch-xcoord\", Xcoord.toPrecision(4) + \"px\");\n                target.style.setProperty(\"--jkl-touch-ycoord\", Ycoord.toPrecision(4) + \"px\");\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-density={density}\n            className={clsx(\"jkl-button\", \"jkl-button--\" + variant, className, {\n                \"jkl-button--icon-left\": iconLeft,\n                \"jkl-button--icon-right\": iconRight,\n            })}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__content\">\n                <div\n                    className={clsx(\"jkl-button__slider\", {\n                        \"jkl-button__slider--show-loader\": !!loader?.showLoader,\n                    })}\n                >\n                    {iconLeft && <span className=\"jkl-button__icon\">{iconLeft}</span>}\n                    <span className=\"jkl-button__children\">{children}</span>\n                    {iconRight && <span className=\"jkl-button__icon\">{iconRight}</span>}\n\n                    {loader && (\n                        <div className=\"jkl-button__loader\">\n                            <Loader textDescription={loader.textDescription} aria-hidden={!loader.showLoader} />\n                        </div>\n                    )}\n                </div>\n            </div>\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"primary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"secondary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"tertiary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = { ...props, variant: \"ghost\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","iconLeft","iconRight","variant","rest","Component","handleTouch","useCallback","event","target","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsx","clsx","disabled","jsxs","Loader","textDescription","buttonProps"],"mappings":"iXAOaA,EAASC,EAAMC,YAAW,SACnCC,EACAC,GAEM,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHX,EAEEY,EAAYV,EAEZW,EAAcC,EAAAA,aACfC,IACGT,GAAgBA,EAAaS,GAE7B,MAAMC,EAASD,EAAMC,OACjB,GAAAA,GAAUD,EAAME,cAAcC,OAAQ,CAChC,MAAAC,EAASJ,EAAME,cAAc,GAAGG,QAAUJ,EAAOK,wBAAwBC,EACzEC,EAASR,EAAME,cAAc,GAAGO,QAAUR,EAAOK,wBAAwBI,EAC/ET,EAAOU,MAAMC,YAAY,qBAAsBR,EAAOS,YAAY,GAAK,MACvEZ,EAAOU,MAAMC,YAAY,qBAAsBJ,EAAOK,YAAY,GAAK,MAChEZ,EAAAa,UAAUC,IAAI,uBAErBC,YAAW,KACAf,EAAAa,UAAUG,OAAO,uBACjBhB,EAAAU,MAAMO,eAAe,sBACrBjB,EAAAU,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAAC3B,IAGC4B,EAAWC,EAAAA,kBAAkB,MAAA5B,SAAAA,EAAQ6B,YAGvC,OAAAC,EAAAA,IAACzB,EAAA,IACOsB,EACJ,eAAc7B,EACdD,UAAWkC,EAAAA,KAAK,aAAc,eAAiB5B,EAASN,EAAW,CAC/D,wBAAyBI,EACzB,yBAA0BC,IAE9B8B,SAAiB,WAAPrC,EAAkB,MAAAK,OAAAA,EAAAA,EAAQ6B,gBAAa,EACjD9B,aAAcO,KACVF,EACJV,IAAAA,EAEAE,SAAAkC,EAAAA,IAAC,MAAI,CAAAjC,UAAU,sBACXD,SAAAqC,EAAAA,KAAC,MAAA,CACGpC,UAAWkC,OAAK,qBAAsB,CAClC,oCAAqC,MAAA/B,IAAAA,EAAQ6B,cAGhDjC,SAAA,CAAAK,GAAa6B,EAAAA,IAAA,OAAA,CAAKjC,UAAU,mBAAoBD,SAASK,IACzD6B,EAAAA,IAAA,OAAA,CAAKjC,UAAU,uBAAwBD,SAAAA,IACvCM,GAAa4B,EAAAA,IAAC,OAAK,CAAAjC,UAAU,mBAAoBD,SAAUM,IAE3DF,GACG8B,EAAAA,IAAC,MAAI,CAAAjC,UAAU,qBACXD,SAACkC,MAAAI,EAAAA,OAAA,CAAOC,gBAAiBnC,EAAOmC,gBAAiB,eAAcnC,EAAO6B,qBAOlG,yCA0BO,SACHpC,GAEA,MAAM2C,EAAc,IAAK3C,EAAOU,QAAS,SAClC,OAAA2B,EAAAA,IAACxC,EAAQ,IAAG8C,GACvB,wBA7BO,SACH3C,GAGA,MAAM2C,EAAc,IAAK3C,EAAOU,QAAS,WAClC,OAAA2B,EAAAA,IAACxC,EAAQ,IAAG8C,GACvB,0BAEO,SACH3C,GAGA,MAAM2C,EAAc,IAAK3C,EAAOU,QAAS,aAClC,OAAA2B,EAAAA,IAACxC,EAAQ,IAAG8C,GACvB,yBAEO,SACH3C,GAGA,MAAM2C,EAAc,IAAK3C,EAAOU,QAAS,YAClC,OAAA2B,EAAAA,IAACxC,EAAQ,IAAG8C,GACvB"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React, { ButtonHTMLAttributes, type TouchEvent, useCallback } from \"react\";\nimport { useAriaLiveRegion } from \"../../hooks\";\nimport type { PolymorphicRef } from \"../../utilities\";\nimport { Loader } from \"../loader\";\nimport type { ButtonComponent, ButtonProps } from \"./types\";\n\nexport const Button = React.forwardRef(function Button<ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        icon,\n        iconPosition = \"left\",\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && !target.disabled && event.targetTouches.length) {\n                const Xcoord = event.targetTouches[0].clientX - target.getBoundingClientRect().x;\n                const Ycoord = event.targetTouches[0].clientY - target.getBoundingClientRect().y;\n                target.style.setProperty(\"--jkl-touch-xcoord\", Xcoord.toPrecision(4) + \"px\");\n                target.style.setProperty(\"--jkl-touch-ycoord\", Ycoord.toPrecision(4) + \"px\");\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n    const showLoader = Boolean(children) && Boolean(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-loading={showLoader}\n            data-density={density}\n            className={cn(\"jkl-button\", \"jkl-button--\" + variant, className)}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__label\">\n                {iconLeft && iconLeft}\n                {icon && iconPosition === \"left\" && icon}\n                {children && <span className=\"jkl-button__text\">{children}</span>}\n                {iconRight && iconRight}\n                {icon && iconPosition === \"right\" && icon}\n            </div>\n\n            {children && (\n                <Loader\n                    className=\"jkl-button__loader\"\n                    variant=\"medium\"\n                    textDescription={loader?.textDescription || \"Vennligst vent\"}\n                    aria-hidden={!loader?.showLoader}\n                />\n            )}\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"primary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"secondary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"tertiary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = { ...props, variant: \"ghost\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","icon","iconPosition","iconLeft","iconRight","variant","rest","Component","handleTouch","useCallback","event","target","disabled","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsxs","cn","jsx","Loader","textDescription","buttonProps"],"mappings":"iXAOaA,EAASC,EAAMC,YAAW,SACnCC,EACAC,GAEM,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,aAAAA,EAAe,OACfC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHb,EAEEc,EAAYZ,EAEZa,EAAcC,EAAAA,aACfC,IACGX,GAAgBA,EAAaW,GAE7B,MAAMC,EAASD,EAAMC,OACrB,GAAIA,IAAWA,EAAOC,UAAYF,EAAMG,cAAcC,OAAQ,CACpD,MAAAC,EAASL,EAAMG,cAAc,GAAGG,QAAUL,EAAOM,wBAAwBC,EACzEC,EAAST,EAAMG,cAAc,GAAGO,QAAUT,EAAOM,wBAAwBI,EAC/EV,EAAOW,MAAMC,YAAY,qBAAsBR,EAAOS,YAAY,GAAK,MACvEb,EAAOW,MAAMC,YAAY,qBAAsBJ,EAAOK,YAAY,GAAK,MAChEb,EAAAc,UAAUC,IAAI,uBAErBC,YAAW,KACAhB,EAAAc,UAAUG,OAAO,uBACjBjB,EAAAW,MAAMO,eAAe,sBACrBlB,EAAAW,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAAC9B,IAGC+B,EAAWC,EAAAA,kBAAkB,MAAA/B,OAAA,EAAAA,EAAQgC,YACrCA,IAAqBpC,KAAqB,MAAAI,IAAAA,EAAQgC,YAGpD,OAAAC,EAAAA,KAAC1B,EAAA,IACOuB,EACJ,eAAcE,EACd,eAAclC,EACdD,UAAWqC,EAAAA,KAAG,aAAc,eAAiB7B,EAASR,GACtDe,SAAiB,WAAPjB,EAAkB,MAAAK,SAAAA,EAAQgC,gBAAa,EACjDjC,aAAcS,KACVF,EACJZ,IAAAA,EAEAE,SAAA,CAACqC,EAAAA,KAAA,MAAA,CAAIpC,UAAU,oBACVD,SAAA,CAAYO,GAAAA,EACZF,GAAyB,SAAjBC,GAA2BD,EACnCL,GAAYuC,EAAAA,IAAC,OAAK,CAAAtC,UAAU,mBAAoBD,SAAAA,IAChDQ,GAAaA,EACbH,GAAyB,UAAjBC,GAA4BD,KAGxCL,GACGuC,EAAAA,IAACC,EAAAA,OAAA,CACGvC,UAAU,qBACVQ,QAAQ,SACRgC,iBAAiB,MAAArC,SAAAA,EAAQqC,kBAAmB,iBAC5C,gBAAc,MAAArC,GAAAA,EAAQgC,gBAK1C,yCA0BO,SACHvC,GAEA,MAAM6C,EAAc,IAAK7C,EAAOY,QAAS,SAClC,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB,wBA7BO,SACH7C,GAGA,MAAM6C,EAAc,IAAK7C,EAAOY,QAAS,WAClC,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB,0BAEO,SACH7C,GAGA,MAAM6C,EAAc,IAAK7C,EAAOY,QAAS,aAClC,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB,yBAEO,SACH7C,GAGA,MAAM6C,EAAc,IAAK7C,EAAOY,QAAS,YAClC,OAAA8B,EAAAA,IAAC7C,EAAQ,IAAGgD,GACvB"}

package/build/cjs/components/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density, PolymorphicPropsWithRef } from \"../..\";\n\nexport const buttonVariants = [\"primary\", \"secondary\", \"tertiary\", \"ghost\"] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\n\nexport type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        density?: Density;\n        /**\n         * Hvilken variant av knappen skal vises\n         * @default \"secondary\"\n         */\n        variant?: ButtonVariant;\n        className?: string;\n        loader?: {\n            showLoader: boolean;\n            textDescription: string;\n        };\n        iconLeft?: React.ReactNode;\n        iconRight?: React.ReactNode;\n    }\n>;\n\nexport type ButtonComponent = <ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":[],"mappings":"uGAE8B,CAAC,UAAW,YAAa,WAAY"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density } from \"../../core\";\nimport { PolymorphicPropsWithRef } from \"../../utilities\";\n\nexport const buttonVariants = [\"primary\", \"secondary\", \"tertiary\", \"ghost\"] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = \"left\" | \"right\";\n\ntype IconOptions<T extends React.ElementType> =\n    // Hvis ikke knappen har ikon, MÅ den ha children:\n    | {\n          iconPosition?: never;\n          icon?: never;\n          children: React.ComponentPropsWithoutRef<T>[\"children\"];\n      }\n    | {\n          /**\n           * Plasseringen av ikonet\n           * @default \"left\"\n           */\n          iconPosition?: IconPosition;\n          /**\n           * Hvilket ikon som skal vises i knappen\n           */\n          icon: React.ReactElement;\n      };\n\nexport type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        density?: Density;\n        /**\n         * Hvilken variant av knappen skal vises\n         * @default \"secondary\"\n         */\n        variant?: ButtonVariant;\n        className?: string;\n        loader?: {\n            showLoader: boolean;\n            textDescription: string;\n        };\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"left\"`\n         */\n        iconLeft?: React.ReactNode;\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"right\"`\n         */\n        iconRight?: React.ReactNode;\n    } & IconOptions<ElementType>\n>;\n\nexport type ButtonComponent = <ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":[],"mappings":"uGAG8B,CAAC,UAAW,YAAa,WAAY"}

package/build/es/components/button/Button.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as o}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import r,{useCallback as n}from"react";import"../../hooks/useScreen/useScreen.js";import{useAriaLiveRegion as s}from"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js";import"../../hooks/useId/useId.js";import{Loader as a}from"../loader/Loader.js";const i=r.forwardRef((function(r,i){const{as:c="button",children:l,className:u,density:d,onTouchStart:h,loader:m,iconLeft:j,iconRight:p,variant:k="secondary",...y}=r,b=c,v=n((t=>{h&&h(t);const o=t.target;if(o&&t.targetTouches.length){const e=t.targetTouches[0].clientX-o.getBoundingClientRect().x,r=t.targetTouches[0].clientY-o.getBoundingClientRect().y;o.style.setProperty("--jkl-touch-xcoord",e.toPrecision(4)+"px"),o.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),o.classList.add("jkl-button--pressed"),setTimeout((()=>{o.classList.remove("jkl-button--pressed"),o.style.removeProperty("--jkl-touch-xcoord"),o.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[h]),f=s(null==m?void 0:m.showLoader);return t(b,{...f,"data-density":d,className:e("jkl-button","jkl-button--"+k,u,{"jkl-button--icon-left":j,"jkl-button--icon-right":p}),disabled:"button"===c?null==m?void 0:m.showLoader:void 0,onTouchStart:v,...y,ref:i,children:t("div",{className:"jkl-button__content",children:o("div",{className:e("jkl-button__slider",{"jkl-button__slider--show-loader":!(null==m||!m.showLoader)}),children:[j&&t("span",{className:"jkl-button__icon",children:j}),t("span",{className:"jkl-button__children",children:l}),p&&t("span",{className:"jkl-button__icon",children:p}),m&&t("div",{className:"jkl-button__loader",children:t(a,{textDescription:m.textDescription,"aria-hidden":!m.showLoader})})]})})})}));function c(o){const e={...o,variant:"primary"};return t(i,{...e})}function l(o){const e={...o,variant:"secondary"};return t(i,{...e})}function u(o){const e={...o,variant:"tertiary"};return t(i,{...e})}function d(o){const e={...o,variant:"ghost"};return t(i,{...e})}export{i as Button,d as GhostButton,c as PrimaryButton,l as SecondaryButton,u as TertiaryButton};
+import{jsxs as t,jsx as o}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import r,{useCallback as s}from"react";import"../../hooks/useScreen/useScreen.js";import{useAriaLiveRegion as n}from"../../hooks/useAriaLiveRegion/useAriaLiveRegion.js";import"../../hooks/useId/useId.js";import{Loader as a}from"../loader/Loader.js";const i=r.forwardRef((function(r,i){const{as:c="button",children:l,className:u,density:d,onTouchStart:h,loader:m,icon:p,iconPosition:y="left",iconLeft:j,iconRight:v,variant:f="secondary",...g}=r,k=c,b=s((t=>{h&&h(t);const o=t.target;if(o&&!o.disabled&&t.targetTouches.length){const e=t.targetTouches[0].clientX-o.getBoundingClientRect().x,r=t.targetTouches[0].clientY-o.getBoundingClientRect().y;o.style.setProperty("--jkl-touch-xcoord",e.toPrecision(4)+"px"),o.style.setProperty("--jkl-touch-ycoord",r.toPrecision(4)+"px"),o.classList.add("jkl-button--pressed"),setTimeout((()=>{o.classList.remove("jkl-button--pressed"),o.style.removeProperty("--jkl-touch-xcoord"),o.style.removeProperty("--jkl-touch-ycoord")}),400)}}),[h]),x=n(null==m?void 0:m.showLoader),L=!!l&&!(null==m||!m.showLoader);return t(k,{...x,"data-loading":L,"data-density":d,className:e("jkl-button","jkl-button--"+f,u),disabled:"button"===c?null==m?void 0:m.showLoader:void 0,onTouchStart:b,...g,ref:i,children:[t("div",{className:"jkl-button__label",children:[j&&j,p&&"left"===y&&p,l&&o("span",{className:"jkl-button__text",children:l}),v&&v,p&&"right"===y&&p]}),l&&o(a,{className:"jkl-button__loader",variant:"medium",textDescription:(null==m?void 0:m.textDescription)||"Vennligst vent","aria-hidden":!(null!=m&&m.showLoader)})]})}));function c(t){const e={...t,variant:"primary"};return o(i,{...e})}function l(t){const e={...t,variant:"secondary"};return o(i,{...e})}function u(t){const e={...t,variant:"tertiary"};return o(i,{...e})}function d(t){const e={...t,variant:"ghost"};return o(i,{...e})}export{i as Button,d as GhostButton,c as PrimaryButton,l as SecondaryButton,u as TertiaryButton};
 //# sourceMappingURL=Button.js.map

package/build/es/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { ButtonHTMLAttributes, type TouchEvent, useCallback } from \"react\";\nimport type { PolymorphicRef } from \"../..\";\nimport { useAriaLiveRegion } from \"../../hooks\";\nimport { Loader } from \"../loader\";\nimport type { ButtonComponent, ButtonProps } from \"./types\";\n\nexport const Button = React.forwardRef(function Button<ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && event.targetTouches.length) {\n                const Xcoord = event.targetTouches[0].clientX - target.getBoundingClientRect().x;\n                const Ycoord = event.targetTouches[0].clientY - target.getBoundingClientRect().y;\n                target.style.setProperty(\"--jkl-touch-xcoord\", Xcoord.toPrecision(4) + \"px\");\n                target.style.setProperty(\"--jkl-touch-ycoord\", Ycoord.toPrecision(4) + \"px\");\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-density={density}\n            className={clsx(\"jkl-button\", \"jkl-button--\" + variant, className, {\n                \"jkl-button--icon-left\": iconLeft,\n                \"jkl-button--icon-right\": iconRight,\n            })}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__content\">\n                <div\n                    className={clsx(\"jkl-button__slider\", {\n                        \"jkl-button__slider--show-loader\": !!loader?.showLoader,\n                    })}\n                >\n                    {iconLeft && <span className=\"jkl-button__icon\">{iconLeft}</span>}\n                    <span className=\"jkl-button__children\">{children}</span>\n                    {iconRight && <span className=\"jkl-button__icon\">{iconRight}</span>}\n\n                    {loader && (\n                        <div className=\"jkl-button__loader\">\n                            <Loader textDescription={loader.textDescription} aria-hidden={!loader.showLoader} />\n                        </div>\n                    )}\n                </div>\n            </div>\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"primary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"secondary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"tertiary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = { ...props, variant: \"ghost\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","iconLeft","iconRight","variant","rest","Component","handleTouch","useCallback","event","target","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsx","clsx","disabled","jsxs","Loader","textDescription","PrimaryButton","buttonProps","SecondaryButton","TertiaryButton","GhostButton"],"mappings":"yVAOO,MAAMA,EAASC,EAAMC,YAAW,SACnCC,EACAC,GAEM,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHX,EAEEY,EAAYV,EAEZW,EAAcC,GACfC,IACGT,GAAgBA,EAAaS,GAE7B,MAAMC,EAASD,EAAMC,OACjBA,GAAAA,GAAUD,EAAME,cAAcC,OAAQ,CAChC,MAAAC,EAASJ,EAAME,cAAc,GAAGG,QAAUJ,EAAOK,wBAAwBC,EACzEC,EAASR,EAAME,cAAc,GAAGO,QAAUR,EAAOK,wBAAwBI,EAC/ET,EAAOU,MAAMC,YAAY,qBAAsBR,EAAOS,YAAY,GAAK,MACvEZ,EAAOU,MAAMC,YAAY,qBAAsBJ,EAAOK,YAAY,GAAK,MAChEZ,EAAAa,UAAUC,IAAI,uBAErBC,YAAW,KACAf,EAAAa,UAAUG,OAAO,uBACjBhB,EAAAU,MAAMO,eAAe,sBACrBjB,EAAAU,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAAC3B,IAGC4B,EAAWC,EAAkB,MAAA5B,OAAA,EAAAA,EAAQ6B,YAGvC,OAAAC,EAACzB,EAAA,IACOsB,EACJ,eAAc7B,EACdD,UAAWkC,EAAK,aAAc,eAAiB5B,EAASN,EAAW,CAC/D,wBAAyBI,EACzB,yBAA0BC,IAE9B8B,SAAiB,WAAPrC,EAAkB,MAAAK,OAAA,EAAAA,EAAQ6B,gBAAa,EACjD9B,aAAcO,KACVF,EACJV,IAAAA,EAEAE,SAAAkC,EAAC,MAAI,CAAAjC,UAAU,sBACXD,SAAAqC,EAAC,MAAA,CACGpC,UAAWkC,EAAK,qBAAsB,CAClC,oCAAqC,MAAA/B,IAAAA,EAAQ6B,cAGhDjC,SAAA,CAAAK,GAAa6B,EAAA,OAAA,CAAKjC,UAAU,mBAAoBD,SAASK,IACzD6B,EAAA,OAAA,CAAKjC,UAAU,uBAAwBD,SAAAA,IACvCM,GAAa4B,EAAC,OAAK,CAAAjC,UAAU,mBAAoBD,SAAUM,IAE3DF,GACG8B,EAAC,MAAI,CAAAjC,UAAU,qBACXD,SAACkC,EAAAI,EAAA,CAAOC,gBAAiBnC,EAAOmC,gBAAiB,eAAcnC,EAAO6B,qBAOlG,IAEO,SAASO,EACZ3C,GAGA,MAAM4C,EAAc,IAAK5C,EAAOU,QAAS,WAClC,OAAA2B,EAACxC,EAAQ,IAAG+C,GACvB,CAEO,SAASC,EACZ7C,GAGA,MAAM4C,EAAc,IAAK5C,EAAOU,QAAS,aAClC,OAAA2B,EAACxC,EAAQ,IAAG+C,GACvB,CAEO,SAASE,EACZ9C,GAGA,MAAM4C,EAAc,IAAK5C,EAAOU,QAAS,YAClC,OAAA2B,EAACxC,EAAQ,IAAG+C,GACvB,CAEO,SAASG,EACZ/C,GAEA,MAAM4C,EAAc,IAAK5C,EAAOU,QAAS,SAClC,OAAA2B,EAACxC,EAAQ,IAAG+C,GACvB"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/button/Button.tsx"],"sourcesContent":["import cn from \"clsx\";\nimport React, { ButtonHTMLAttributes, type TouchEvent, useCallback } from \"react\";\nimport { useAriaLiveRegion } from \"../../hooks\";\nimport type { PolymorphicRef } from \"../../utilities\";\nimport { Loader } from \"../loader\";\nimport type { ButtonComponent, ButtonProps } from \"./types\";\n\nexport const Button = React.forwardRef(function Button<ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n    ref?: PolymorphicRef<ElementType>,\n) {\n    const {\n        as = \"button\",\n        children,\n        className,\n        density,\n        onTouchStart,\n        loader,\n        icon,\n        iconPosition = \"left\",\n        iconLeft,\n        iconRight,\n        variant = \"secondary\",\n        ...rest\n    } = props;\n\n    const Component = as;\n\n    const handleTouch = useCallback(\n        (event: TouchEvent<HTMLButtonElement>) => {\n            onTouchStart && onTouchStart(event);\n\n            const target = event.target as HTMLButtonElement;\n            if (target && !target.disabled && event.targetTouches.length) {\n                const Xcoord = event.targetTouches[0].clientX - target.getBoundingClientRect().x;\n                const Ycoord = event.targetTouches[0].clientY - target.getBoundingClientRect().y;\n                target.style.setProperty(\"--jkl-touch-xcoord\", Xcoord.toPrecision(4) + \"px\");\n                target.style.setProperty(\"--jkl-touch-ycoord\", Ycoord.toPrecision(4) + \"px\");\n                target.classList.add(\"jkl-button--pressed\");\n\n                setTimeout(() => {\n                    target.classList.remove(\"jkl-button--pressed\");\n                    target.style.removeProperty(\"--jkl-touch-xcoord\");\n                    target.style.removeProperty(\"--jkl-touch-ycoord\");\n                }, 400);\n            }\n        },\n        [onTouchStart],\n    );\n\n    const ariaLive = useAriaLiveRegion(loader?.showLoader);\n    const showLoader = Boolean(children) && Boolean(loader?.showLoader);\n\n    return (\n        <Component\n            {...ariaLive}\n            data-loading={showLoader}\n            data-density={density}\n            className={cn(\"jkl-button\", \"jkl-button--\" + variant, className)}\n            disabled={as === \"button\" ? loader?.showLoader : undefined}\n            onTouchStart={handleTouch}\n            {...rest}\n            ref={ref}\n        >\n            <div className=\"jkl-button__label\">\n                {iconLeft && iconLeft}\n                {icon && iconPosition === \"left\" && icon}\n                {children && <span className=\"jkl-button__text\">{children}</span>}\n                {iconRight && iconRight}\n                {icon && iconPosition === \"right\" && icon}\n            </div>\n\n            {children && (\n                <Loader\n                    className=\"jkl-button__loader\"\n                    variant=\"medium\"\n                    textDescription={loader?.textDescription || \"Vennligst vent\"}\n                    aria-hidden={!loader?.showLoader}\n                />\n            )}\n        </Component>\n    );\n}) as ButtonComponent;\n\nexport function PrimaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"primary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function SecondaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"secondary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function TertiaryButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"onClick\" | \"as\"> &\n        Pick<ButtonHTMLAttributes<HTMLButtonElement>, \"onClick\">,\n) {\n    const buttonProps = { ...props, variant: \"tertiary\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n\nexport function GhostButton<ElementType extends React.ElementType = \"button\">(\n    props: Omit<ButtonProps<ElementType>, \"variant\" | \"loader\">,\n) {\n    const buttonProps = { ...props, variant: \"ghost\" } as ButtonProps<ElementType>;\n    return <Button {...buttonProps} />;\n}\n"],"names":["Button","React","forwardRef","props","ref","as","children","className","density","onTouchStart","loader","icon","iconPosition","iconLeft","iconRight","variant","rest","Component","handleTouch","useCallback","event","target","disabled","targetTouches","length","Xcoord","clientX","getBoundingClientRect","x","Ycoord","clientY","y","style","setProperty","toPrecision","classList","add","setTimeout","remove","removeProperty","ariaLive","useAriaLiveRegion","showLoader","jsxs","cn","jsx","Loader","textDescription","PrimaryButton","buttonProps","SecondaryButton","TertiaryButton","GhostButton"],"mappings":"yVAOO,MAAMA,EAASC,EAAMC,YAAW,SACnCC,EACAC,GAEM,MACFC,GAAAA,EAAK,SACLC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EACAC,aAAAA,EACAC,OAAAA,EACAC,KAAAA,EACAC,aAAAA,EAAe,OACfC,SAAAA,EACAC,UAAAA,EACAC,QAAAA,EAAU,eACPC,GACHb,EAEEc,EAAYZ,EAEZa,EAAcC,GACfC,IACGX,GAAgBA,EAAaW,GAE7B,MAAMC,EAASD,EAAMC,OACrB,GAAIA,IAAWA,EAAOC,UAAYF,EAAMG,cAAcC,OAAQ,CACpD,MAAAC,EAASL,EAAMG,cAAc,GAAGG,QAAUL,EAAOM,wBAAwBC,EACzEC,EAAST,EAAMG,cAAc,GAAGO,QAAUT,EAAOM,wBAAwBI,EAC/EV,EAAOW,MAAMC,YAAY,qBAAsBR,EAAOS,YAAY,GAAK,MACvEb,EAAOW,MAAMC,YAAY,qBAAsBJ,EAAOK,YAAY,GAAK,MAChEb,EAAAc,UAAUC,IAAI,uBAErBC,YAAW,KACAhB,EAAAc,UAAUG,OAAO,uBACjBjB,EAAAW,MAAMO,eAAe,sBACrBlB,EAAAW,MAAMO,eAAe,qBAAoB,GACjD,IACP,IAEJ,CAAC9B,IAGC+B,EAAWC,EAAkB,MAAA/B,SAAAA,EAAQgC,YACrCA,IAAqBpC,KAAqB,MAAAI,IAAAA,EAAQgC,YAGpD,OAAAC,EAAC1B,EAAA,IACOuB,EACJ,eAAcE,EACd,eAAclC,EACdD,UAAWqC,EAAG,aAAc,eAAiB7B,EAASR,GACtDe,SAAiB,WAAPjB,EAAkB,MAAAK,OAAA,EAAAA,EAAQgC,gBAAa,EACjDjC,aAAcS,KACVF,EACJZ,IAAAA,EAEAE,SAAA,CAACqC,EAAA,MAAA,CAAIpC,UAAU,oBACVD,SAAA,CAAYO,GAAAA,EACZF,GAAyB,SAAjBC,GAA2BD,EACnCL,GAAYuC,EAAC,OAAK,CAAAtC,UAAU,mBAAoBD,SAAAA,IAChDQ,GAAaA,EACbH,GAAyB,UAAjBC,GAA4BD,KAGxCL,GACGuC,EAACC,EAAA,CACGvC,UAAU,qBACVQ,QAAQ,SACRgC,iBAAiB,MAAArC,OAAAA,EAAAA,EAAQqC,kBAAmB,iBAC5C,gBAAc,MAAArC,GAAAA,EAAQgC,gBAK1C,IAEO,SAASM,EACZ7C,GAGA,MAAM8C,EAAc,IAAK9C,EAAOY,QAAS,WAClC,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB,CAEO,SAASC,EACZ/C,GAGA,MAAM8C,EAAc,IAAK9C,EAAOY,QAAS,aAClC,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB,CAEO,SAASE,EACZhD,GAGA,MAAM8C,EAAc,IAAK9C,EAAOY,QAAS,YAClC,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB,CAEO,SAASG,EACZjD,GAEA,MAAM8C,EAAc,IAAK9C,EAAOY,QAAS,SAClC,OAAA8B,EAAC7C,EAAQ,IAAGiD,GACvB"}

package/build/es/components/button/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density, PolymorphicPropsWithRef } from \"../..\";\n\nexport const buttonVariants = [\"primary\", \"secondary\", \"tertiary\", \"ghost\"] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\n\nexport type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        density?: Density;\n        /**\n         * Hvilken variant av knappen skal vises\n         * @default \"secondary\"\n         */\n        variant?: ButtonVariant;\n        className?: string;\n        loader?: {\n            showLoader: boolean;\n            textDescription: string;\n        };\n        iconLeft?: React.ReactNode;\n        iconRight?: React.ReactNode;\n    }\n>;\n\nexport type ButtonComponent = <ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":["buttonVariants"],"mappings":"AAEO,MAAMA,EAAiB,CAAC,UAAW,YAAa,WAAY"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/button/types.ts"],"sourcesContent":["import { Density } from \"../../core\";\nimport { PolymorphicPropsWithRef } from \"../../utilities\";\n\nexport const buttonVariants = [\"primary\", \"secondary\", \"tertiary\", \"ghost\"] as const;\nexport type ButtonVariant = (typeof buttonVariants)[number];\nexport type IconPosition = \"left\" | \"right\";\n\ntype IconOptions<T extends React.ElementType> =\n    // Hvis ikke knappen har ikon, MÅ den ha children:\n    | {\n          iconPosition?: never;\n          icon?: never;\n          children: React.ComponentPropsWithoutRef<T>[\"children\"];\n      }\n    | {\n          /**\n           * Plasseringen av ikonet\n           * @default \"left\"\n           */\n          iconPosition?: IconPosition;\n          /**\n           * Hvilket ikon som skal vises i knappen\n           */\n          icon: React.ReactElement;\n      };\n\nexport type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<\n    ElementType,\n    {\n        density?: Density;\n        /**\n         * Hvilken variant av knappen skal vises\n         * @default \"secondary\"\n         */\n        variant?: ButtonVariant;\n        className?: string;\n        loader?: {\n            showLoader: boolean;\n            textDescription: string;\n        };\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"left\"`\n         */\n        iconLeft?: React.ReactNode;\n        /**\n         * @deprecated Bruk `icon` i kombinasjon med `iconPosition=\"right\"`\n         */\n        iconRight?: React.ReactNode;\n    } & IconOptions<ElementType>\n>;\n\nexport type ButtonComponent = <ElementType extends React.ElementType = \"button\">(\n    props: ButtonProps<ElementType>,\n) => React.ReactElement | null;\n"],"names":["buttonVariants"],"mappings":"AAGO,MAAMA,EAAiB,CAAC,UAAW,YAAa,WAAY"}

package/build/packages/jokul/src/components/button/types.d.ts

@@ -1,6 +1,23 @@
-import { Density, PolymorphicPropsWithRef } from '../..';
+import { Density } from '../../core';
+import { PolymorphicPropsWithRef } from '../../utilities';
 export declare const buttonVariants: readonly ["primary", "secondary", "tertiary", "ghost"];
 export type ButtonVariant = (typeof buttonVariants)[number];
+export type IconPosition = "left" | "right";
+type IconOptions<T extends React.ElementType> = {
+    iconPosition?: never;
+    icon?: never;
+    children: React.ComponentPropsWithoutRef<T>["children"];
+} | {
+    /**
+     * Plasseringen av ikonet
+     * @default "left"
+     */
+    iconPosition?: IconPosition;
+    /**
+     * Hvilket ikon som skal vises i knappen
+     */
+    icon: React.ReactElement;
+};
 export type ButtonProps<ElementType extends React.ElementType> = PolymorphicPropsWithRef<ElementType, {
     density?: Density;
     /**
@@ -13,7 +30,14 @@ export type ButtonProps<ElementType extends React.ElementType> = PolymorphicProp
         showLoader: boolean;
         textDescription: string;
     };
+    /**
+     * @deprecated Bruk `icon` i kombinasjon med `iconPosition="left"`
+     */
     iconLeft?: React.ReactNode;
+    /**
+     * @deprecated Bruk `icon` i kombinasjon med `iconPosition="right"`
+     */
     iconRight?: React.ReactNode;
-}>;
+} & IconOptions<ElementType>>;
 export type ButtonComponent = <ElementType extends React.ElementType = "button">(props: ButtonProps<ElementType>) => React.ReactElement | null;
+export {};