@fremtind/jokul 2.0.0 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/build-stats.html +1 -1
- package/build/cjs/components/button/documentation/ButtonDocs.cjs +1 -1
- package/build/cjs/components/button/documentation/ButtonDocs.cjs.map +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs +1 -1
- package/build/cjs/components/cookie-consent/CookieConsent.cjs.map +1 -1
- package/build/cjs/components/flex/Flex.cjs +1 -1
- package/build/cjs/components/flex/Flex.cjs.map +1 -1
- package/build/cjs/components/flex/types.cjs +1 -1
- package/build/cjs/components/flex/types.cjs.map +1 -1
- package/build/cjs/components/flex/types.d.cts +24 -10
- package/build/cjs/components/toast/Toast.cjs +1 -1
- package/build/cjs/components/toast/Toast.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSlider.cjs.map +1 -1
- package/build/cjs/components/toggle-switch/ToggleSlider.d.cts +3 -0
- package/build/cjs/core/tokens/style-dictionary/config.cjs +1 -1
- package/build/cjs/core/tokens/style-dictionary/config.cjs.map +1 -1
- package/build/cjs/core/tokens/style-dictionary/formats/scss-theme-variables.cjs +1 -1
- package/build/cjs/core/tokens/style-dictionary/formats/scss-theme-variables.cjs.map +1 -1
- package/build/cjs/core/tokens.cjs +1 -1
- package/build/cjs/core/tokens.cjs.map +1 -1
- package/build/cjs/core/tokens.d.cts +11 -0
- package/build/cjs/utilities/polymorphism/polymorphism.d.cts +1 -1
- package/build/es/components/button/documentation/ButtonDocs.js +1 -1
- package/build/es/components/button/documentation/ButtonDocs.js.map +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js +1 -1
- package/build/es/components/cookie-consent/CookieConsent.js.map +1 -1
- package/build/es/components/flex/Flex.js +1 -1
- package/build/es/components/flex/Flex.js.map +1 -1
- package/build/es/components/flex/types.d.ts +24 -10
- package/build/es/components/flex/types.js +1 -1
- package/build/es/components/flex/types.js.map +1 -1
- package/build/es/components/toast/Toast.js +1 -1
- package/build/es/components/toast/Toast.js.map +1 -1
- package/build/es/components/toggle-switch/ToggleSlider.d.ts +3 -0
- package/build/es/components/toggle-switch/ToggleSlider.js.map +1 -1
- package/build/es/core/tokens/style-dictionary/config.js +1 -1
- package/build/es/core/tokens/style-dictionary/config.js.map +1 -1
- package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.js +1 -1
- package/build/es/core/tokens/style-dictionary/formats/scss-theme-variables.js.map +1 -1
- package/build/es/core/tokens.d.ts +11 -0
- package/build/es/core/tokens.js +1 -1
- package/build/es/core/tokens.js.map +1 -1
- package/build/es/utilities/polymorphism/polymorphism.d.ts +1 -1
- package/package.json +1 -1
- package/styles/components/autosuggest/autosuggest.css +0 -3
- package/styles/components/breadcrumb/breadcrumb.css +0 -3
- package/styles/components/button/button.css +0 -3
- package/styles/components/card/card.css +0 -3
- package/styles/components/checkbox/checkbox.css +4 -7
- package/styles/components/checkbox/checkbox.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.css +190 -5
- package/styles/components/checkbox-panel/checkbox-panel.min.css +1 -1
- package/styles/components/checkbox-panel/checkbox-panel.scss +1 -0
- package/styles/components/checkbox-panel/development/styles.css +0 -3
- package/styles/components/chip/chip.css +0 -3
- package/styles/components/combobox/combobox.css +0 -3
- package/styles/components/cookie-consent/cookie-consent.css +0 -3
- package/styles/components/countdown/countdown.css +2 -5
- package/styles/components/countdown/countdown.min.css +1 -1
- package/styles/components/datepicker/datepicker.css +0 -3
- package/styles/components/description-list/description-list.css +0 -3
- package/styles/components/expander/expandable.css +0 -3
- package/styles/components/feedback/feedback.css +2 -5
- package/styles/components/feedback/feedback.min.css +1 -1
- package/styles/components/file/file.css +0 -3
- package/styles/components/file-input/file-input.css +11 -14
- package/styles/components/file-input/file-input.min.css +1 -1
- package/styles/components/flex/_index.scss +1 -0
- package/styles/components/flex/flex.css +703 -0
- package/styles/components/flex/flex.min.css +1 -0
- package/styles/components/flex/flex.scss +252 -0
- package/styles/components/help/help.css +0 -3
- package/styles/components/icon/icon.css +0 -3
- package/styles/components/icon-button/icon-button.css +0 -3
- package/styles/components/image/image.css +0 -3
- package/styles/components/input-group/input-group.css +2 -5
- package/styles/components/input-group/input-group.min.css +1 -1
- package/styles/components/link/link.css +0 -3
- package/styles/components/link-list/link-list.css +0 -3
- package/styles/components/list/list.css +0 -3
- package/styles/components/loader/loader.css +6 -9
- package/styles/components/loader/loader.min.css +1 -1
- package/styles/components/loader/skeleton-loader.css +5 -8
- package/styles/components/loader/skeleton-loader.min.css +1 -1
- package/styles/components/logo/logo.css +0 -3
- package/styles/components/menu/menu.css +0 -3
- package/styles/components/message/message.css +2 -5
- package/styles/components/message/message.min.css +1 -1
- package/styles/components/modal/modal.css +0 -3
- package/styles/components/nav-link/nav-link.css +0 -3
- package/styles/components/pagination/development/styles.css +0 -3
- package/styles/components/pagination/pagination.css +0 -3
- package/styles/components/popover/popover.css +0 -3
- package/styles/components/progress-bar/progress-bar.css +1 -4
- package/styles/components/progress-bar/progress-bar.min.css +1 -1
- package/styles/components/radio-button/radio-button.css +2 -5
- package/styles/components/radio-button/radio-button.min.css +1 -1
- package/styles/components/radio-panel/development/styles.css +0 -3
- package/styles/components/radio-panel/radio-panel.css +3 -5
- package/styles/components/radio-panel/radio-panel.min.css +1 -1
- package/styles/components/segmented-control/segmented-control.css +4 -7
- package/styles/components/segmented-control/segmented-control.min.css +1 -1
- package/styles/components/select/select.css +0 -3
- package/styles/components/summary-table/development/summary-table-example.css +0 -3
- package/styles/components/summary-table/summary-table.css +0 -3
- package/styles/components/system-message/system-message.css +2 -5
- package/styles/components/system-message/system-message.min.css +1 -1
- package/styles/components/table/table.css +0 -3
- package/styles/components/tabs/tabs.css +0 -3
- package/styles/components/tag/tag.css +0 -3
- package/styles/components/text-area/text-area.css +0 -3
- package/styles/components/text-input/text-input.css +0 -3
- package/styles/components/toast/toast.css +4 -7
- package/styles/components/toast/toast.min.css +1 -1
- package/styles/components/toggle-switch/toggle-switch.css +0 -3
- package/styles/components/tooltip/tooltip.css +0 -3
- package/styles/core/core.css +28 -3
- package/styles/core/core.min.css +1 -1
- package/styles/core/jkl/_colors.scss +2 -2
- package/styles/core/jkl/_index.scss +2 -2
- package/styles/core/jkl/_spacing.scss +19 -23
- package/styles/core/jkl/_tokens.scss +4 -3
- package/styles/core/jkl/_typography.scss +42 -58
- package/styles/core/jkl/legacy/_dynamic-colors.scss +40 -0
- package/styles/core/jkl/legacy/_index.scss +2 -0
- package/styles/core/jkl/legacy/_tokens.scss +396 -0
- package/styles/core/theme/_legacy-tokens.scss +9 -0
- package/styles/core/theme/_spacing-tokens.scss +2 -0
- package/styles/core/theme/_tokens.scss +2 -0
- package/styles/shared/input/shared-input-styles.css +0 -3
- package/styles/shared/input-panel/shared.css +1 -3
- package/styles/shared/input-panel/shared.min.css +1 -1
- package/styles/shared/input-panel/shared.scss +2 -2
- package/styles/shared/track/track.css +0 -3
- package/styles/styles.css +738 -39
- package/styles/styles.min.css +2 -2
- package/styles/styles.scss +1 -0
- package/styles/core/jkl/_legacy-tokens.scss +0 -181
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CookieConsent.js","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { type FormEventHandler, useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport {\n convertBooleanConsentObjectToConsentObject,\n setConsentCookie,\n} from \"./cookieConsentUtils.js\";\nimport type { Consent, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n requirement,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n if (onAccept) {\n onAccept({\n functional: \"denied\",\n statistics: \"denied\",\n });\n }\n\n return null;\n }\n\n const accept = (\n selection = convertBooleanConsentObjectToConsentObject(\n {\n functional: true,\n statistics: true,\n },\n requirement,\n ),\n ) => {\n const selectionWithoutEmptyValues = Object.fromEntries(\n Object.entries(selection).filter(\n ([, value]) => typeof value !== \"undefined\",\n ),\n );\n\n const updatedConsent: Consent = {\n ...currentConsent,\n ...selectionWithoutEmptyValues,\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n updateCurrentConsents();\n\n onAccept?.(updatedConsent);\n\n instance?.hide();\n };\n\n const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {\n e.preventDefault();\n\n const formData = new FormData(e.currentTarget);\n\n const newConsents = convertBooleanConsentObjectToConsentObject(\n {\n functional: formData.get(\"functional\") === \"true\",\n statistics: formData.get(\"statistics\") === \"true\",\n },\n requirement,\n );\n\n accept(newConsents);\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal component=\"form\" {...modalConfig.modal} {...{ onSubmit }}>\n <form>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjonskapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap
|
|
1
|
+
{"version":3,"file":"CookieConsent.js","sources":["../../../../src/components/cookie-consent/CookieConsent.tsx"],"sourcesContent":["import React, { type FormEventHandler, useEffect, useId } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { Button } from \"../button/Button.js\";\nimport { Flex } from \"../flex/index.js\";\nimport { Link } from \"../link/index.js\";\nimport {\n Modal,\n ModalActions,\n ModalBody,\n ModalContainer,\n ModalHeader,\n ModalOverlay,\n ModalTitle,\n} from \"../modal/Modal.js\";\nimport { useModal } from \"../modal/useModal.js\";\nimport { useInternalState } from \"./CookieConsentContext.js\";\nimport {\n convertBooleanConsentObjectToConsentObject,\n setConsentCookie,\n} from \"./cookieConsentUtils.js\";\nimport type { Consent, CookieConsentProps } from \"./types.js\";\n\nexport const CookieConsent = ({\n blocking,\n onAccept,\n aboutPage = \"https://www.fremtind.no/informasjonskapsler\",\n ...rest\n}: CookieConsentProps): JSX.Element | null => {\n const {\n currentConsent,\n cookieName,\n cookieDomain,\n cookiePath,\n requirement,\n isOpen,\n setIsOpen,\n updateCurrentConsents,\n } = useInternalState();\n\n const [instance, modalConfig] = useModal({\n id: `jkl-cookie-modal-${useId()}`,\n // The optional `role` attribute of the dialog element, either `dialog`\n // (default) or `alertdialog` to make it a modal (preventing closing on\n // click outside of ESC key).\n role: blocking ? \"alertdialog\" : \"dialog\",\n // The required dialog title, mandatory in the document\n // to provide context to assistive technology.\n title: \"Informasjonskapsler\",\n });\n useEffect(() => {\n if (isOpen) {\n instance?.show();\n } else {\n instance?.hide();\n }\n }, [instance, isOpen]);\n\n useEffect(() => {\n const onHide = () => setIsOpen(false);\n instance?.on(\"hide\", onHide);\n return () => {\n instance?.off(\"hide\", onHide);\n };\n }, [instance, setIsOpen]);\n\n if (typeof document === \"undefined\") {\n return null;\n }\n\n // Cookies are disabled in the browser\n if (typeof navigator !== \"undefined\" && !navigator.cookieEnabled) {\n if (onAccept) {\n onAccept({\n functional: \"denied\",\n statistics: \"denied\",\n });\n }\n\n return null;\n }\n\n const accept = (\n selection = convertBooleanConsentObjectToConsentObject(\n {\n functional: true,\n statistics: true,\n },\n requirement,\n ),\n ) => {\n const selectionWithoutEmptyValues = Object.fromEntries(\n Object.entries(selection).filter(\n ([, value]) => typeof value !== \"undefined\",\n ),\n );\n\n const updatedConsent: Consent = {\n ...currentConsent,\n ...selectionWithoutEmptyValues,\n };\n\n setConsentCookie({\n consent: updatedConsent,\n name: cookieName,\n domain: cookieDomain,\n path: cookiePath,\n });\n\n updateCurrentConsents();\n\n onAccept?.(updatedConsent);\n\n instance?.hide();\n };\n\n const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {\n e.preventDefault();\n\n const formData = new FormData(e.currentTarget);\n\n const newConsents = convertBooleanConsentObjectToConsentObject(\n {\n functional: formData.get(\"functional\") === \"true\",\n statistics: formData.get(\"statistics\") === \"true\",\n },\n requirement,\n );\n\n accept(newConsents);\n };\n\n return ReactDOM.createPortal(\n <ModalContainer\n {...modalConfig.container}\n {...rest}\n data-cookie-consent-open={isOpen}\n >\n <ModalOverlay {...modalConfig.overlay} />\n <Modal component=\"form\" {...modalConfig.modal} {...{ onSubmit }}>\n <form>\n <ModalHeader>\n <ModalTitle {...modalConfig.title}>\n Får vi bruke valgfrie informasjonskapsler?\n </ModalTitle>\n </ModalHeader>\n <ModalBody>\n <Flex direction=\"column\" gap=\"m\">\n <p>\n Vi ønsker å samle anonym statistikk for å forstå\n hvordan nettsidene våre brukes. Det hjelper oss\n til å gjøre innhold og løsninger bedre og mer\n brukervennlige.\n </p>\n <p>\n <Link href={aboutPage} target=\"_blank\">\n Les mer om hvilke informasjonskapsler vi\n lagrer her\n </Link>\n .\n </p>\n </Flex>\n </ModalBody>\n <ModalActions>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta-alle\"\n type=\"button\"\n onClick={() => accept()}\n >\n Ja, det er greit\n </Button>\n <Button\n variant=\"secondary\"\n data-testid=\"jkl-cookie-consent-godta\"\n type=\"submit\"\n >\n Nei takk\n </Button>\n </ModalActions>\n </form>\n </Modal>\n </ModalContainer>,\n document.body,\n );\n};\n"],"names":["CookieConsent","blocking","onAccept","aboutPage","rest","currentConsent","cookieName","cookieDomain","cookiePath","requirement","isOpen","setIsOpen","updateCurrentConsents","useInternalState","instance","modalConfig","useModal","id","useId","role","title","useEffect","show","hide","onHide","on","off","document","navigator","cookieEnabled","functional","statistics","accept","selection","convertBooleanConsentObjectToConsentObject","selectionWithoutEmptyValues","Object","fromEntries","entries","filter","value","updatedConsent","setConsentCookie","consent","name","domain","path","ReactDOM","createPortal","jsxs","ModalContainer","container","children","jsx","ModalOverlay","overlay","Modal","component","modal","onSubmit","e","preventDefault","formData","FormData","currentTarget","newConsents","get","ModalHeader","ModalTitle","ModalBody","Flex","direction","gap","Link","href","target","ModalActions","Button","variant","type","onClick","body"],"mappings":"6lBAsBO,MAAMA,EAAgB,EACzBC,SAAAA,EACAC,SAAAA,EACAC,UAAAA,EAAY,iDACTC,MAEG,MACFC,eAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,WAAAA,EACAC,YAAAA,EACAC,OAAAA,EACAC,UAAAA,EACAC,sBAAAA,GACAC,KAEGC,EAAUC,GAAeC,EAAS,CACrCC,GAAI,oBAAoBC,MAIxBC,KAAMlB,EAAW,cAAgB,SAGjCmB,MAAO,wBAkBP,GAhBJC,GAAU,KACFX,EACAI,GAAUQ,OAEVR,GAAUS,MAAK,GAEpB,CAACT,EAAUJ,IAEdW,GAAU,KACAG,MAAAA,EAAS,IAAMb,GAAU,GACrB,OAAAG,GAAAW,GAAG,OAAQD,GACd,KACOV,GAAAY,IAAI,OAAQF,EAAM,CAChC,GACD,CAACV,EAAUH,WAEHgB,SAAa,IACb,OAAA,KAIX,UAAWC,UAAc,MAAgBA,UAAUC,cAC/C,OAAI3B,GACSA,EAAA,CACL4B,WAAY,SACZC,WAAY,WAIb,KAGLC,MAAAA,EAAS,CACXC,EAAYC,EACR,CACIJ,YAAY,EACZC,YAAY,GAEhBtB,MAGJ,MAAM0B,EAA8BC,OAAOC,YACvCD,OAAOE,QAAQL,GAAWM,QACtB,EAAI,CAAAC,YAAkBA,EAAU,OAIlCC,EAA0B,IACzBpC,KACA8B,GAGUO,EAAA,CACbC,QAASF,EACTG,KAAMtC,EACNuC,OAAQtC,EACRuC,KAAMtC,IAGYI,IAEtBV,IAAWuC,GAEX3B,GAAUS,MAAK,EAmBnB,OAAOwB,EAASC,aACZC,EAACC,EAAA,IACOnC,EAAYoC,aACZ/C,EACJ,2BAA0BM,EAE1B0C,SAAA,CAACC,EAAAC,EAAA,IAAiBvC,EAAYwC,UAC7BF,EAAAG,EAAA,CAAMC,UAAU,UAAW1C,EAAY2C,MAAaC,SAvBRC,IACjDA,EAAEC,iBAEF,MAAMC,EAAW,IAAIC,SAASH,EAAEI,eAE1BC,EAAc/B,EAChB,CACIJ,WAA2C,SAA/BgC,EAASI,IAAI,cACzBnC,WAA2C,SAA/B+B,EAASI,IAAI,eAE7BzD,GAGJuB,EAAOiC,EAAW,EAWVb,SAAAH,EAAC,OACG,CAAAG,SAAA,CAAAC,EAACc,GACGf,SAACC,EAAAe,EAAA,IAAerD,EAAYK,MAAOgC,4DAItCiB,EACG,CAAAjB,SAAAH,EAACqB,GAAKC,UAAU,SAASC,IAAI,IACzBpB,SAAA,CAAAC,EAAC,KAAED,SAKH,qKACC,IACG,CAAAA,SAAA,CAAAC,EAACoB,EAAK,CAAAC,KAAMvE,EAAWwE,OAAO,SAASvB,SAGvC,wDAAO,cAKlBwB,EACG,CAAAxB,SAAA,CAAAC,EAACwB,EAAA,CACGC,QAAQ,YACR,cAAY,gCACZC,KAAK,SACLC,QAAS,IAAMhD,IAClBoB,SAAA,qBAGDC,EAACwB,EAAA,CACGC,QAAQ,YACR,cAAY,2BACZC,KAAK,SACR3B,SAAA,wBAOjBzB,SAASsD,KACb"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsx as t}from"react/jsx-runtime";import
|
|
1
|
+
import{jsx as t}from"react/jsx-runtime";import{c as e}from"../../../clsx-BeLtu-UY.js";import{forwardRef as n}from"react";import{SlotComponent as i}from"../../utilities/polymorphism/SlotComponent.js";import{isResponsive as r}from"./types.js";const o=n((function(n,r){const{asChild:o,alignItems:l,alignContent:a,as:m="div",center:c=!1,className:p,direction:f="row",fill:$,gap:x="m",inline:u,justifyContent:g,layout:j={},textAlign:w,wrap:d="nowrap",...y}=n,C=o?i:m,h=s(x).flatMap((([t,e])=>{const[n,i=n]=e.trim().split(" ");return[`screen-${t}-row-gap-${n}`,`screen-${t}-col-gap-${i}`]})),v=s(j).map((([t,e])=>`screen-${t}-${e}`));return t(C,{...y,className:e("jkl-flex",!l||`align-items-${l}`,!a||`align-content-${a}`,!c||`center-${!0===c?"2xl":c}`,!$||"fill",!u||"inline-flex",!g||`justify-content-${g}`,!w||`text-align-${w}`,!d||`flex-wrap-${d}`,!f||`flex-direction-${f}`,...h,...v,p),ref:r})}));function s(t){return r(t)?Object.entries(t):[["small",t]]}export{o as Flex};
|
|
2
2
|
//# sourceMappingURL=Flex.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import
|
|
1
|
+
{"version":3,"file":"Flex.js","sources":["../../../../src/components/flex/Flex.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { forwardRef } from \"react\";\nimport { SlotComponent } from \"../../utilities/index.js\";\nimport type { PolymorphicRef } from \"../../utilities/polymorphism/polymorphism.js\";\nimport {\n type Breakpoint,\n type FlexComponent,\n type FlexProps,\n type Responsive,\n isResponsive,\n} from \"./types.js\";\n\nexport const Flex = forwardRef(function Flex<\n ElementType extends React.ElementType = \"div\",\n>(props: FlexProps<ElementType>, ref?: PolymorphicRef<ElementType>) {\n const {\n asChild,\n alignItems,\n alignContent,\n as = \"div\",\n center = false,\n className,\n direction = \"row\",\n fill,\n gap = \"m\",\n inline,\n justifyContent,\n layout = {},\n textAlign,\n wrap = \"nowrap\",\n ...rest\n } = props;\n\n const Tag = asChild ? SlotComponent : as;\n const gaps = toObjectEntries(gap).flatMap(([breakpoint, gap]) => {\n const [row, col = row] = gap.trim().split(\" \");\n return [\n `screen-${breakpoint}-row-gap-${row}`,\n `screen-${breakpoint}-col-gap-${col}`,\n ];\n });\n const layouts = toObjectEntries(layout).map(\n ([breakpoint, layout]) => `screen-${breakpoint}-${layout}`, // Convert to number to convert 2.10 to 2.1 and false to 0\n );\n\n return (\n <Tag\n {...rest}\n className={clsx(\n \"jkl-flex\",\n !alignItems || `align-items-${alignItems}`,\n !alignContent || `align-content-${alignContent}`,\n !center || `center-${center === true ? \"2xl\" : center}`,\n !fill || \"fill\",\n !inline || \"inline-flex\",\n !justifyContent || `justify-content-${justifyContent}`,\n !textAlign || `text-align-${textAlign}`,\n !wrap || `flex-wrap-${wrap}`,\n !direction || `flex-direction-${direction}`,\n ...gaps,\n ...layouts,\n className,\n )}\n ref={ref}\n />\n );\n}) as FlexComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Gjør en enkeltstående eller responsiv verdi om til et nøstet array,\n * der hvert indre array inneholder et breakpoint med tilhørende verdi.\n * @example `{ small: \"12\", large: \"64\" }` -> `[[\"small\", \"12\"], [\"large\", \"64\"]]`\n * @example `\"24\"` -> `[[\"small\", \"24\"]]`\n * @param value enkeltstående eller responsiv verdi\n * @returns nøstet array med breakpoints og verdier\n */\nfunction toObjectEntries<T>(value: T | Responsive<T>): [Breakpoint, T][] {\n if (isResponsive(value)) {\n return Object.entries(value) as [Breakpoint, T][];\n }\n\n return [[\"small\", value]];\n}\n"],"names":["Flex","forwardRef","props","ref","asChild","alignItems","alignContent","as","center","className","direction","fill","gap","inline","justifyContent","layout","textAlign","wrap","rest","Tag","SlotComponent","gaps","toObjectEntries","flatMap","breakpoint","row","col","trim","split","layouts","map","jsx","clsx","value","isResponsive","Object","entries"],"mappings":"iPAYO,MAAMA,EAAOC,GAAW,SAE7BC,EAA+BC,GACvB,MACFC,QAAAA,EACAC,WAAAA,EACAC,aAAAA,EACAC,GAAAA,EAAK,MACLC,OAAAA,GAAS,EACTC,UAAAA,EACAC,UAAAA,EAAY,MACZC,KAAAA,EACAC,IAAAA,EAAM,IACNC,OAAAA,EACAC,eAAAA,EACAC,OAAAA,EAAS,CAAC,EACVC,UAAAA,EACAC,KAAAA,EAAO,YACJC,GACHhB,EAEEiB,EAAMf,EAAUgB,EAAgBb,EAChCc,EAAOC,EAAgBV,GAAKW,SAAQ,EAAEC,EAAYZ,MAC9C,MAACa,EAAKC,EAAMD,GAAOb,EAAIe,OAAOC,MAAM,KACnC,MAAA,CACH,UAAUJ,aAAsBC,IAChC,UAAUD,aAAsBE,IACpC,IAEEG,EAAUP,EAAgBP,GAAQe,KACpC,EAAEN,EAAYT,KAAY,UAAUS,KAAcT,MAIlD,OAAAgB,EAACZ,EAAA,IACOD,EACJT,UAAWuB,EACP,YACC3B,GAAc,eAAeA,KAC7BC,GAAgB,iBAAiBA,KACjCE,GAAU,WAAqB,IAAXA,EAAkB,MAAQA,KAC9CG,GAAQ,QACRE,GAAU,eACVC,GAAkB,mBAAmBA,KACrCE,GAAa,cAAcA,KAC3BC,GAAQ,aAAaA,KACrBP,GAAa,kBAAkBA,OAC7BW,KACAQ,EACHpB,GAEJN,IAAAA,GAGZ,IAUA,SAASmB,EAAmBW,GACpBC,OAAAA,EAAaD,GACNE,OAAOC,QAAQH,GAGnB,CAAC,CAAC,QAASA,GACtB"}
|
|
@@ -1,14 +1,28 @@
|
|
|
1
|
-
import { default as React
|
|
1
|
+
import { default as React } from 'react';
|
|
2
2
|
import { default as tokens } from '../../core/tokens.js';
|
|
3
3
|
import { AsChildProps } from '../../utilities/polymorphism/as-child.js';
|
|
4
4
|
import { PolymorphicPropsWithRef } from '../../utilities/polymorphism/polymorphism.js';
|
|
5
|
-
export type
|
|
6
|
-
export type
|
|
7
|
-
export type
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
export type Spacing = keyof typeof tokens.semanticSpacing;
|
|
6
|
+
export type Breakpoint = keyof typeof tokens.breakpoint;
|
|
7
|
+
export type Responsive<T> = Partial<Record<Breakpoint, T>>;
|
|
8
|
+
export declare function isResponsive<T>(value: unknown): value is Responsive<T>;
|
|
9
|
+
export declare const LAYOUTS: readonly ["auto", "1", "2", "3", "4", "6", "4.8", "8.4", "2.10", "10.2", "3.9", "9.3", "5.7", "7.5"];
|
|
10
|
+
export type Layout = (typeof LAYOUTS)[number];
|
|
11
|
+
export type Center = "m" | "l" | "xl" | "2xl" | boolean;
|
|
12
|
+
export type Gap = `${Spacing}` | `${Spacing} ${Spacing}`;
|
|
13
|
+
type FlexBaseProps = {
|
|
14
|
+
alignItems?: "normal" | "start" | "center" | "end" | "baseline" | "stretch";
|
|
15
|
+
alignContent?: "normal" | "start" | "center" | "end" | "stretch" | "baseline" | "space-between" | "space-around" | "space-evenly";
|
|
16
|
+
center?: Center;
|
|
17
|
+
direction?: "row" | "column" | "row-reverse" | "column-reverse";
|
|
18
|
+
fill?: boolean;
|
|
19
|
+
gap?: Gap | Responsive<Gap>;
|
|
20
|
+
inline?: boolean;
|
|
21
|
+
textAlign?: "left" | "right" | "center";
|
|
22
|
+
justifyContent?: "normal" | "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
|
|
23
|
+
layout?: Layout | Responsive<Layout>;
|
|
24
|
+
wrap?: "wrap" | "nowrap" | "reverse";
|
|
25
|
+
};
|
|
26
|
+
export type FlexProps<As extends React.ElementType = "div"> = PolymorphicPropsWithRef<As, FlexBaseProps>;
|
|
14
27
|
export type FlexComponent = <ElementType extends React.ElementType = "div">(props: FlexProps<ElementType> & AsChildProps) => React.ReactElement | null;
|
|
28
|
+
export {};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import"react";
|
|
1
|
+
import"react";import e from"../../core/tokens.js";function t(t){return Object.keys(e.breakpoint).includes(Object.keys(t)[0])}const o=["auto","1","2","3","4","6","4.8","8.4","2.10","10.2","3.9","9.3","5.7","7.5"];export{o as LAYOUTS,t as isResponsive};
|
|
2
2
|
//# sourceMappingURL=types.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
1
|
+
{"version":3,"file":"types.js","sources":["../../../../src/components/flex/types.ts"],"sourcesContent":["import React from \"react\";\nimport tokens from \"../../core/tokens.js\";\nimport type { AsChildProps } from \"../../utilities/polymorphism/as-child.js\";\nimport type { PolymorphicPropsWithRef } from \"../../utilities/polymorphism/polymorphism.js\";\n\nexport type Spacing = keyof typeof tokens.semanticSpacing;\nexport type Breakpoint = keyof typeof tokens.breakpoint;\n\nexport type Responsive<T> = Partial<Record<Breakpoint, T>>;\nexport function isResponsive<T>(value: unknown): value is Responsive<T> {\n return Object.keys(tokens.breakpoint).includes(\n Object.keys(value as Responsive<T>)[0],\n );\n}\n\nexport const LAYOUTS = [\n \"auto\",\n \"1\",\n \"2\",\n \"3\",\n \"4\",\n \"6\",\n \"4.8\",\n \"8.4\",\n \"2.10\",\n \"10.2\",\n \"3.9\",\n \"9.3\",\n \"5.7\",\n \"7.5\",\n] as const;\n\nexport type Layout = (typeof LAYOUTS)[number];\nexport type Center = \"m\" | \"l\" | \"xl\" | \"2xl\" | boolean;\nexport type Gap = `${Spacing}` | `${Spacing} ${Spacing}`;\n\ntype FlexBaseProps = {\n alignItems?: \"normal\" | \"start\" | \"center\" | \"end\" | \"baseline\" | \"stretch\";\n alignContent?:\n | \"normal\"\n | \"start\"\n | \"center\"\n | \"end\"\n | \"stretch\"\n | \"baseline\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n center?: Center;\n direction?: \"row\" | \"column\" | \"row-reverse\" | \"column-reverse\";\n fill?: boolean;\n gap?: Gap | Responsive<Gap>;\n inline?: boolean;\n textAlign?: \"left\" | \"right\" | \"center\";\n justifyContent?:\n | \"normal\"\n | \"start\"\n | \"center\"\n | \"end\"\n | \"space-between\"\n | \"space-around\"\n | \"space-evenly\";\n layout?: Layout | Responsive<Layout>;\n wrap?: \"wrap\" | \"nowrap\" | \"reverse\";\n};\n\nexport type FlexProps<As extends React.ElementType = \"div\"> =\n PolymorphicPropsWithRef<As, FlexBaseProps>;\n\nexport type FlexComponent = <ElementType extends React.ElementType = \"div\">(\n props: FlexProps<ElementType> & AsChildProps,\n) => React.ReactElement | null;\n"],"names":["isResponsive","value","Object","keys","tokens","breakpoint","includes","LAYOUTS"],"mappings":"kDASO,SAASA,EAAgBC,GAC5B,OAAOC,OAAOC,KAAKC,EAAOC,YAAYC,SAClCJ,OAAOC,KAAKF,GAAwB,GAE5C,CAEO,MAAMM,EAAU,CACnB,OACA,IACA,IACA,IACA,IACA,IACA,MACA,MACA,OACA,OACA,MACA,MACA,MACA"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useEffect as
|
|
1
|
+
import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useToast as s}from"@react-aria/toast";import{c as a}from"../../../clsx-BeLtu-UY.js";import{useRef as n,useState as e,useEffect as r}from"react";import{useBrowserPreferences as i}from"../../hooks/useBrowserPreferences/useBrowserPreferences.js";import{Button as c}from"../button/Button.js";import{Countdown as l}from"../countdown/Countdown.js";import{IconButton as m}from"../icon-button/IconButton.js";import{CloseIcon as u}from"../icon/icons/CloseIcon.js";import{ErrorIcon as f}from"../icon/icons/ErrorIcon.js";import{InfoIcon as d}from"../icon/icons/InfoIcon.js";import{SuccessIcon as j}from"../icon/icons/SuccessIcon.js";import{WarningIcon as p}from"../icon/icons/WarningIcon.js";const k=t=>{switch(t){case"error":return o(f,{className:"jkl-toast__icon"});case"info":return o(d,{className:"jkl-toast__icon"});case"success":return o(j,{className:"jkl-toast__icon"});case"warning":return o(p,{className:"jkl-toast__icon"});default:return null}};function _({className:f,state:d,...j}){const p=n(null),{toastProps:_,titleProps:v}=s(j,d,p),[I,g]=e(!1),h="string"==typeof j.toast.content?j.toast.content:j.toast.content.content,N="string"==typeof j.toast.content?void 0:j.toast.content.title,w=null==j.toast.timer?.timerId,{prefersReducedMotion:y}=i();return r((()=>{const t=setTimeout((()=>{g(!0)}),0);return()=>clearTimeout(t)}),[]),r((()=>{y&&"exiting"===j.toast.animation&&d.remove(j.toast.key)}),[y,j.toast.animation,j.toast.key,d]),t("div",{..._,ref:p,className:a("jkl-toast",{"jkl-toast--info":"info"===j.toast.variant,"jkl-toast--error":"error"===j.toast.variant,"jkl-toast--warning":"warning"===j.toast.variant,"jkl-toast--success":"success"===j.toast.variant},f),"data-animation":j.toast.animation,onAnimationEnd:()=>{"exiting"===j.toast.animation&&d.remove(j.toast.key)},children:[o("span",{className:"jkl-toast__progress",children:j.toast.timeout?o(l,{from:j.toast.timeout,isPaused:w,onAnimationEnd:t=>{t.stopPropagation()}}):null}),k(j.toast.variant),t("div",{...v,className:"jkl-toast__content","aria-live":"assertive",children:[N&&o("p",{className:"jkl-toast__title",children:I&&N}),o("p",{className:"jkl-toast__message",children:I&&h}),j.toast.action&&o("div",{className:"jkl-toast__action",children:o(c,{variant:"secondary",density:"compact",onClick:j.toast.action.onClick,children:j.toast.action.label})})]}),o(m,{"data-theme":j.toast.variant?"light":void 0,"aria-label":"Lukk varsel",className:"jkl-toast__dismiss-button",onClick:()=>{d.close(j.toast.key)},children:o(u,{})})]})}export{_ as Toast};
|
|
2
2
|
//# sourceMappingURL=Toast.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n <span className=\"jkl-toast__progress\">\n {props.toast.timeout ? (\n <Countdown\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n </span>\n {getIcon(props.toast.variant)}\n <div
|
|
1
|
+
{"version":3,"file":"Toast.js","sources":["../../../../src/components/toast/Toast.tsx"],"sourcesContent":["import { type AriaToastProps, useToast } from \"@react-aria/toast\";\nimport type { QueuedToast, ToastState } from \"@react-stately/toast\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useBrowserPreferences } from \"../../hooks/useBrowserPreferences/useBrowserPreferences.js\";\nimport { Button } from \"../button/Button.js\";\nimport { Countdown } from \"../countdown/Countdown.js\";\nimport { IconButton } from \"../icon-button/IconButton.js\";\nimport { CloseIcon } from \"../icon/icons/CloseIcon.js\";\nimport { ErrorIcon } from \"../icon/icons/ErrorIcon.js\";\nimport { InfoIcon } from \"../icon/icons/InfoIcon.js\";\nimport { SuccessIcon } from \"../icon/icons/SuccessIcon.js\";\nimport { WarningIcon } from \"../icon/icons/WarningIcon.js\";\nimport type { ToastContent, ToastOptions } from \"./types.js\";\n\nexport interface ToastProps<T extends ToastContent> extends AriaToastProps<T> {\n className?: string;\n state: ToastState<T>;\n toast: QueuedToast<T> & ToastOptions;\n}\n\nconst getIcon = (messageType?: \"error\" | \"info\" | \"success\" | \"warning\") => {\n switch (messageType) {\n case \"error\":\n return <ErrorIcon className=\"jkl-toast__icon\" />;\n case \"info\":\n return <InfoIcon className=\"jkl-toast__icon\" />;\n case \"success\":\n return <SuccessIcon className=\"jkl-toast__icon\" />;\n case \"warning\":\n return <WarningIcon className=\"jkl-toast__icon\" />;\n default:\n return null;\n }\n};\n\nexport function Toast<T extends ToastContent>({\n className,\n state,\n ...props\n}: ToastProps<T>) {\n const ref = useRef(null);\n const { toastProps, titleProps } = useToast(props, state, ref);\n const [announceReady, setAnnounceReady] = useState(false);\n\n const content =\n typeof props.toast.content === \"string\"\n ? props.toast.content\n : props.toast.content.content;\n const title =\n typeof props.toast.content === \"string\"\n ? undefined\n : props.toast.content.title;\n\n // @ts-ignore Proxy for å sjekke om timeren er pauset: https://github.com/adobe/react-spectrum/blob/b1545c0d225b12672fb6a4e7b787268591d66b90/packages/%40react-stately/toast/src/useToastState.ts#L222\n const isPaused = props.toast.timer?.timerId == null;\n\n const { prefersReducedMotion } = useBrowserPreferences();\n\n useEffect(() => {\n // Delay the update to the next event loop so the toast has time to render before being announced to screen readers\n const timeout = setTimeout(() => {\n setAnnounceReady(true);\n }, 0);\n\n return () => clearTimeout(timeout);\n }, []);\n\n useEffect(() => {\n if (prefersReducedMotion && props.toast.animation === \"exiting\") {\n // If user has prefers-reduced-motion the exit animation won't run and our\n // onAnimationEnd callback won't be invoked. In this case, remove the toast\n // manually.\n state.remove(props.toast.key);\n }\n }, [prefersReducedMotion, props.toast.animation, props.toast.key, state]);\n\n return (\n <div\n {...toastProps}\n ref={ref}\n className={clsx(\n \"jkl-toast\",\n {\n \"jkl-toast--info\": props.toast.variant === \"info\",\n \"jkl-toast--error\": props.toast.variant === \"error\",\n \"jkl-toast--warning\": props.toast.variant === \"warning\",\n \"jkl-toast--success\": props.toast.variant === \"success\",\n },\n className,\n )}\n data-animation={props.toast.animation}\n onAnimationEnd={() => {\n // Remove the toast when the exiting animation completes.\n if (props.toast.animation === \"exiting\") {\n state.remove(props.toast.key);\n }\n }}\n >\n <span className=\"jkl-toast__progress\">\n {props.toast.timeout ? (\n <Countdown\n from={props.toast.timeout}\n isPaused={isPaused}\n onAnimationEnd={(e) => {\n // Avoid triggering the toast's onAnimationEnd handler so we still get our exit animation\n e.stopPropagation();\n }}\n />\n ) : null}\n </span>\n {getIcon(props.toast.variant)}\n <div\n {...titleProps}\n className=\"jkl-toast__content\"\n aria-live=\"assertive\"\n >\n {title && (\n <p className=\"jkl-toast__title\">{announceReady && title}</p>\n )}\n <p className=\"jkl-toast__message\">{announceReady && content}</p>\n {props.toast.action && (\n <div className=\"jkl-toast__action\">\n <Button\n variant=\"secondary\"\n density=\"compact\"\n onClick={props.toast.action.onClick}\n >\n {props.toast.action.label}\n </Button>\n </div>\n )}\n </div>\n <IconButton\n data-theme={!props.toast.variant ? undefined : \"light\"}\n aria-label=\"Lukk varsel\"\n className=\"jkl-toast__dismiss-button\"\n onClick={() => {\n state.close(props.toast.key);\n }}\n >\n <CloseIcon />\n </IconButton>\n </div>\n );\n}\n"],"names":["getIcon","messageType","jsx","ErrorIcon","className","InfoIcon","SuccessIcon","WarningIcon","Toast","state","props","ref","useRef","toastProps","titleProps","useToast","announceReady","setAnnounceReady","useState","content","toast","title","isPaused","timer","timerId","prefersReducedMotion","useBrowserPreferences","useEffect","timeout","setTimeout","clearTimeout","animation","remove","key","jsxs","clsx","variant","onAnimationEnd","children","Countdown","from","e","stopPropagation","action","Button","density","onClick","label","IconButton","close","CloseIcon"],"mappings":"kuBAqBA,MAAMA,EAAWC,IACb,OAAQA,GACJ,IAAK,QACM,OAAAC,EAACC,EAAU,CAAAC,UAAU,oBAChC,IAAK,OACM,OAAAF,EAACG,EAAS,CAAAD,UAAU,oBAC/B,IAAK,UACM,OAAAF,EAACI,EAAY,CAAAF,UAAU,oBAClC,IAAK,UACM,OAAAF,EAACK,EAAY,CAAAH,UAAU,oBAClC,QACW,OAAA,KAAA,EAIZ,SAASI,GACZJ,UAAAA,EACAK,MAAAA,KACGC,IAEGC,MAAAA,EAAMC,EAAO,OACXC,WAAAA,EAAYC,WAAAA,GAAeC,EAASL,EAAOD,EAAOE,IACnDK,EAAeC,GAAoBC,GAAS,GAE7CC,EAC6B,iBAAxBT,EAAMU,MAAMD,QACbT,EAAMU,MAAMD,QACZT,EAAMU,MAAMD,QAAQA,QACxBE,EAC6B,iBAAxBX,EAAMU,MAAMD,aACb,EACAT,EAAMU,MAAMD,QAAQE,MAGxBC,EAAyC,MAA9BZ,EAAMU,MAAMG,OAAOC,SAE5BC,qBAAAA,GAAyBC,IAEjC,OAAAC,GAAU,KAEAC,MAAAA,EAAUC,YAAW,KACvBZ,GAAiB,EAAI,GACtB,GAEI,MAAA,IAAMa,aAAaF,EAAO,GAClC,IAEHD,GAAU,KACFF,GAAkD,YAA1Bf,EAAMU,MAAMW,WAI9BtB,EAAAuB,OAAOtB,EAAMU,MAAMa,IAAG,GAEjC,CAACR,EAAsBf,EAAMU,MAAMW,UAAWrB,EAAMU,MAAMa,IAAKxB,IAG9DyB,EAAC,MAAA,IACOrB,EACJF,IAAAA,EACAP,UAAW+B,EACP,YACA,CACI,kBAA2C,SAAxBzB,EAAMU,MAAMgB,QAC/B,mBAA4C,UAAxB1B,EAAMU,MAAMgB,QAChC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,QAClC,qBAA8C,YAAxB1B,EAAMU,MAAMgB,SAEtChC,GAEJ,iBAAgBM,EAAMU,MAAMW,UAC5BM,eAAgB,KAEkB,YAA1B3B,EAAMU,MAAMW,WACNtB,EAAAuB,OAAOtB,EAAMU,MAAMa,IAAG,EAIpCK,SAAA,CAAApC,EAAC,OAAK,CAAAE,UAAU,sBACXkC,SAAA5B,EAAMU,MAAMQ,QACT1B,EAACqC,EAAA,CACGC,KAAM9B,EAAMU,MAAMQ,QAClBN,SAAAA,EACAe,eAAiBI,IAEbA,EAAEC,iBAAgB,IAG1B,OAEP1C,EAAQU,EAAMU,MAAMgB,SACrBF,EAAC,MAAA,IACOpB,EACJV,UAAU,qBACV,YAAU,YAETkC,SAAA,CAAAjB,GACInB,EAAA,IAAA,CAAEE,UAAU,mBAAoBkC,YAAiBjB,IAErDnB,EAAA,IAAA,CAAEE,UAAU,qBAAsBkC,YAAiBnB,IACnDT,EAAMU,MAAMuB,QACRzC,EAAA,MAAA,CAAIE,UAAU,oBACXkC,SAAApC,EAAC0C,EAAA,CACGR,QAAQ,YACRS,QAAQ,UACRC,QAASpC,EAAMU,MAAMuB,OAAOG,QAE3BR,SAAA5B,EAAMU,MAAMuB,OAAOI,aAKpC7C,EAAC8C,EAAA,CACG,aAAatC,EAAMU,MAAMgB,QAAsB,aAAZ,EACnC,aAAW,cACXhC,UAAU,4BACV0C,QAAS,KACCrC,EAAAwC,MAAMvC,EAAMU,MAAMa,IAAG,EAG/BK,WAACY,EAAU,CAAA,OAI3B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ToggleSlider.js","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n Fragment,\n type MouseEventHandler,\n useRef,\n useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport type { ToggleChangeHandler, ToggleSliderProps } from \"./types.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\nexport const ToggleSlider: FC<ToggleSliderProps> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue || labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n onClick: handleClick,\n onChange: handleChange,\n });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\":\n label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span\n className=\"jkl-toggle-slider__pill\"\n style={pillStyles}\n aria-hidden\n />\n </div>\n </fieldset>\n );\n};\n"],"names":["ToggleSlider","children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ToggleSlider.js","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n type FC,\n Fragment,\n type MouseEventHandler,\n useRef,\n useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport type { ToggleChangeHandler, ToggleSliderProps } from \"./types.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\n/**\n * @deprecated bruk heller {@link SegmentedControl}\n */\n\nexport const ToggleSlider: FC<ToggleSliderProps> = ({\n children,\n labels,\n className = \"\",\n onToggle,\n defaultValue,\n hideLegend = false,\n density,\n ...rest\n}) => {\n const [currentLabel, setCurrentLabel] = useState(defaultValue || labels[0]);\n const id = useId(\"jkl-toggle-slider\");\n const legendId = useId(\"jkl-toggle-slider-legend\");\n const activeRef = useRef<HTMLLabelElement>(null);\n\n const shouldTransform = currentLabel === labels[1];\n const pillStyles = usePillStyles(activeRef, shouldTransform, [density]);\n\n const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n setCurrentLabel(pressed ? labels[1] : labels[0]);\n onToggle(pressed ? labels[1] : labels[0]);\n };\n\n const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n const { value } = event.currentTarget;\n setCurrentLabel(value);\n onToggle(value);\n };\n\n const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n onClick: handleClick,\n onChange: handleChange,\n });\n const { onClick, ...swipeHandlers } = gestureHandlers;\n\n if (process.env.NODE_ENV !== \"production\") {\n console.error(\n \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n );\n }\n\n return (\n <fieldset\n {...rest}\n className={clsx(\"jkl-toggle-slider\", className)}\n aria-labelledby={legendId}\n data-testid=\"jkl-toggle-slider\"\n data-density={density}\n >\n <div\n id={legendId}\n className={clsx(\"jkl-toggle-slider__legend\", {\n \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n })}\n >\n {children}\n </div>\n <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n {labels.map((label) => (\n <Fragment key={label}>\n <input\n className=\"jkl-toggle-slider__input\"\n type=\"radio\"\n value={label}\n checked={label === currentLabel}\n name={id}\n id={`${label}-${id}`}\n onClick={onClick}\n onChange={() => {}}\n />\n <label\n className={clsx(\"jkl-toggle-slider__label\", {\n \"jkl-toggle-slider__label--selected\":\n label === currentLabel,\n })}\n ref={label === currentLabel ? activeRef : undefined}\n htmlFor={`${label}-${id}`}\n >\n {label}\n </label>\n </Fragment>\n ))}\n <span\n className=\"jkl-toggle-slider__pill\"\n style={pillStyles}\n aria-hidden\n />\n </div>\n </fieldset>\n );\n};\n"],"names":["ToggleSlider","children","labels","className","onToggle","defaultValue","hideLegend","density","rest","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"kVAiBO,MAAMA,EAAsC,EAC/CC,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,EACbC,QAAAA,KACGC,MAEG,MAACC,EAAcC,GAAmBC,EAASN,GAAgBH,EAAO,IAClEU,EAAKC,EAAM,qBACXC,EAAWD,EAAM,4BACjBE,EAAYC,EAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAcJ,EAAWE,EAAiB,CAACV,KAatDa,gBAAAA,GAAoBC,EAAgC,CACxDC,QAPsDC,IAChD,MAAEC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,EAAK,EAKdE,SAbmD,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,GAAE,KAapCoB,QAAAA,KAAYO,GAAkBT,EAElC,MAAyB,eAAzBU,QAAQC,IAAIC,UACJC,QAAAC,MACJ,iHAKJC,EAAC,WAAA,IACO3B,EACJL,UAAWiC,EAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBACZ,eAAcP,EAEdN,SAAA,CAAAoC,EAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,EAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAEJkC,EAAA,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,KAAKC,GACTJ,EAACK,EACG,CAAAvC,SAAA,CAAAoC,EAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAC,QAAA,CACGlC,UAAWiC,EAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,KAuBnBF,EAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW,SAGvB"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const s="jkl",t={source:["src/core/tokens/legacy/*.json"],platforms:{ts:{transformGroup:"typescript",buildPath:"./src/core/",files:[{destination:"tokens.ts",format:"javascript/esm",filter:s=>!s.filePath.includes("color.legacy")}]},scss:{transformGroup:"scss",buildPath:"./src/core/jkl/",files:[{destination:"
|
|
1
|
+
const s="jkl",t={source:["src/core/tokens/legacy/*.json"],platforms:{ts:{transformGroup:"typescript",buildPath:"./src/core/",files:[{destination:"tokens.ts",format:"javascript/esm",filter:s=>!s.filePath.includes("color.legacy")}]},scss:{transformGroup:"scss",buildPath:"./src/core/jkl/legacy/",files:[{destination:"_dynamic-colors.scss",format:"scss/theme-variables",filter:s=>s.path.some((s=>["light","dark"].includes(s)))},{destination:"_tokens.scss",format:"scss/map-deep",filter:s=>!s.path.some((s=>["light","dark"].includes(s)))}]},css:{transformGroup:"css",buildPath:"./src/core/styles/theme/",files:[{destination:"_legacy-tokens.scss",format:"css/theme-variables",filter:s=>!s.filePath.includes("semantic")},{destination:"_legacy-color-tokens.scss",format:"css/dynamic-color-variables",filter:s=>s.filePath.includes("semantic")}]},tailwind:{transformGroup:"css",buildPath:"src/tailwind/",files:[{destination:"colors.ts",format:"tailwindcss/colors",filter:s=>s.path.includes("light")}]}}},e={source:["src/core/tokens/!(legacy)/*.json"],platforms:{scss:{transformGroup:"scss",buildPath:"./src/core/jkl/",files:[{destination:"_tokens.scss",format:"scss/theme-variables",filter:s=>"spacing"===s.type||["border","text","background"].includes("string"==typeof s.attributes?.type?s.attributes.type:"")}]},css:{transformGroup:"css",buildPath:"./src/core/styles/theme/",files:[{destination:"_tokens.scss",format:"css/theme-variables",filter:s=>"spacing"===s.type},{destination:"_color-tokens.scss",format:"css/dynamic-color-variables",filter:"isColor"},{destination:"_spacing-tokens.scss",format:"css/theme-variables",filter:"isSpacing"}]}}};export{s as PREFIX,e as designTokensConfig,t as legacyDesignTokensConfig};
|
|
2
2
|
//# sourceMappingURL=config.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sources":["../../../../../src/core/tokens/style-dictionary/config.ts"],"sourcesContent":["import type { Config, DesignToken } from \"style-dictionary/types\";\n\nexport const PREFIX = \"jkl\";\n\nexport const legacyDesignTokensConfig: Config = {\n source: [\"src/core/tokens/legacy/*.json\"],\n platforms: {\n ts: {\n transformGroup: \"typescript\",\n buildPath: \"./src/core/\",\n files: [\n {\n destination: \"tokens.ts\",\n format: \"javascript/esm\",\n filter: (token: DesignToken) =>\n !token.filePath.includes(\"color.legacy\"),\n },\n ],\n },\n scss: {\n transformGroup: \"scss\",\n buildPath: \"./src/core/jkl/\",\n files: [\n {\n destination: \"
|
|
1
|
+
{"version":3,"file":"config.js","sources":["../../../../../src/core/tokens/style-dictionary/config.ts"],"sourcesContent":["import type { Config, DesignToken } from \"style-dictionary/types\";\n\nexport const PREFIX = \"jkl\";\n\nexport const legacyDesignTokensConfig: Config = {\n source: [\"src/core/tokens/legacy/*.json\"],\n platforms: {\n ts: {\n transformGroup: \"typescript\",\n buildPath: \"./src/core/\",\n files: [\n {\n destination: \"tokens.ts\",\n format: \"javascript/esm\",\n filter: (token: DesignToken) =>\n !token.filePath.includes(\"color.legacy\"),\n },\n ],\n },\n scss: {\n transformGroup: \"scss\",\n buildPath: \"./src/core/jkl/legacy/\",\n files: [\n {\n destination: \"_dynamic-colors.scss\",\n format: \"scss/theme-variables\",\n filter: (token) =>\n token.path.some((word) =>\n [\"light\", \"dark\"].includes(word),\n ),\n },\n {\n destination: \"_tokens.scss\",\n format: \"scss/map-deep\",\n filter: (token) =>\n !token.path.some((word) =>\n [\"light\", \"dark\"].includes(word),\n ),\n },\n ],\n },\n css: {\n transformGroup: \"css\",\n buildPath: \"./src/core/styles/theme/\",\n files: [\n {\n destination: \"_legacy-tokens.scss\",\n format: \"css/theme-variables\",\n filter: (token: DesignToken) =>\n !token.filePath.includes(\"semantic\"),\n },\n {\n destination: \"_legacy-color-tokens.scss\",\n format: \"css/dynamic-color-variables\",\n filter: (token: DesignToken) =>\n token.filePath.includes(\"semantic\"),\n },\n ],\n },\n tailwind: {\n transformGroup: \"css\",\n buildPath: \"src/tailwind/\",\n files: [\n {\n destination: \"colors.ts\",\n format: \"tailwindcss/colors\",\n filter: (token: DesignToken) =>\n token.path.includes(\"light\"),\n },\n ],\n },\n },\n};\n\nexport const designTokensConfig: Config = {\n source: [\"src/core/tokens/!(legacy)/*.json\"],\n platforms: {\n scss: {\n transformGroup: \"scss\",\n buildPath: \"./src/core/jkl/\",\n files: [\n {\n destination: \"_tokens.scss\",\n format: \"scss/theme-variables\",\n filter: (token: DesignToken) =>\n token.type === \"spacing\" ||\n [\"border\", \"text\", \"background\"].includes(\n typeof token.attributes?.type === \"string\"\n ? token.attributes.type\n : \"\",\n ),\n },\n ],\n },\n css: {\n transformGroup: \"css\",\n buildPath: \"./src/core/styles/theme/\",\n files: [\n {\n destination: \"_tokens.scss\",\n format: \"css/theme-variables\",\n filter: (token: DesignToken) => token.type === \"spacing\",\n },\n {\n destination: \"_color-tokens.scss\",\n format: \"css/dynamic-color-variables\",\n filter: \"isColor\",\n },\n {\n destination: \"_spacing-tokens.scss\",\n format: \"css/theme-variables\",\n filter: \"isSpacing\",\n },\n ],\n },\n },\n};\n"],"names":["PREFIX","legacyDesignTokensConfig","source","platforms","ts","transformGroup","buildPath","files","destination","format","filter","token","filePath","includes","scss","path","some","word","css","tailwind","designTokensConfig","type","attributes"],"mappings":"AAEO,MAAMA,EAAS,MAETC,EAAmC,CAC5CC,OAAQ,CAAC,iCACTC,UAAW,CACPC,GAAI,CACAC,eAAgB,aAChBC,UAAW,cACXC,MAAO,CACH,CACIC,YAAa,YACbC,OAAQ,iBACRC,OAASC,IACJA,EAAMC,SAASC,SAAS,mBAIzCC,KAAM,CACFT,eAAgB,OAChBC,UAAW,yBACXC,MAAO,CACH,CACIC,YAAa,uBACbC,OAAQ,uBACRC,OAASC,GACLA,EAAMI,KAAKC,MAAMC,GACb,CAAC,QAAS,QAAQJ,SAASI,MAGvC,CACIT,YAAa,eACbC,OAAQ,gBACRC,OAASC,IACJA,EAAMI,KAAKC,MAAMC,GACd,CAAC,QAAS,QAAQJ,SAASI,QAK/CC,IAAK,CACDb,eAAgB,MAChBC,UAAW,2BACXC,MAAO,CACH,CACIC,YAAa,sBACbC,OAAQ,sBACRC,OAASC,IACJA,EAAMC,SAASC,SAAS,aAEjC,CACIL,YAAa,4BACbC,OAAQ,8BACRC,OAASC,GACLA,EAAMC,SAASC,SAAS,eAIxCM,SAAU,CACNd,eAAgB,MAChBC,UAAW,gBACXC,MAAO,CACH,CACIC,YAAa,YACbC,OAAQ,qBACRC,OAASC,GACLA,EAAMI,KAAKF,SAAS,cAO/BO,EAA6B,CACtClB,OAAQ,CAAC,oCACTC,UAAW,CACPW,KAAM,CACFT,eAAgB,OAChBC,UAAW,kBACXC,MAAO,CACH,CACIC,YAAa,eACbC,OAAQ,uBACRC,OAASC,GACU,YAAfA,EAAMU,MACN,CAAC,SAAU,OAAQ,cAAcR,SACK,iBAA3BF,EAAMW,YAAYD,KACnBV,EAAMW,WAAWD,KACjB,OAK1BH,IAAK,CACDb,eAAgB,MAChBC,UAAW,2BACXC,MAAO,CACH,CACIC,YAAa,eACbC,OAAQ,sBACRC,OAASC,GAAsC,YAAfA,EAAMU,MAE1C,CACIb,YAAa,qBACbC,OAAQ,8BACRC,OAAQ,WAEZ,CACIF,YAAa,uBACbC,OAAQ,sBACRC,OAAQ"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{fileHeader as
|
|
1
|
+
import{commentStyles as a}from"style-dictionary/enums";import{fileHeader as e,formattedVariables as s}from"style-dictionary/utils";import{PREFIX as t}from"../config.js";const r={name:"scss/theme-variables",format:async({dictionary:r,file:i})=>{const l=await e({file:i,commentStyle:a.short}),o=r.allTokens.filter((a=>!a.path.some((a=>["light","dark"].includes(a))))),n=r.allTokens.filter((a=>a.path.includes("light"))).map((a=>({...a,value:`var(--${t}-${a.name})`})));return`${l}\n${s({format:"sass",dictionary:{...r,allTokens:o}})}\n\n// Dynamiske variabler for farge, via referanse til CSS-variabler\n${s({format:"sass",dictionary:{...r,allTokens:n}})}`}};export{r as default};
|
|
2
2
|
//# sourceMappingURL=scss-theme-variables.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"scss-theme-variables.js","sources":["../../../../../../src/core/tokens/style-dictionary/formats/scss-theme-variables.ts"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"scss-theme-variables.js","sources":["../../../../../../src/core/tokens/style-dictionary/formats/scss-theme-variables.ts"],"sourcesContent":["import { commentStyles } from \"style-dictionary/enums\";\nimport type { Dictionary, File, Format } from \"style-dictionary/types\";\nimport { fileHeader, formattedVariables } from \"style-dictionary/utils\";\nimport { PREFIX } from \"../config.js\";\n\nconst scssThemeVariablesFormat: Format = {\n name: \"scss/theme-variables\",\n format: async ({\n dictionary,\n file,\n }: { dictionary: Dictionary; file: File }) => {\n const header = await fileHeader({\n file,\n commentStyle: commentStyles.short,\n });\n const staticColorTokens = dictionary.allTokens.filter(\n (token) =>\n !token.path.some((word) => [\"light\", \"dark\"].includes(word)),\n );\n\n // Bruker 'light' som kilde for å unngå duplikater\n const uniqueColorTokens = dictionary.allTokens.filter((token) =>\n token.path.includes(\"light\"),\n );\n\n const dynamicColorTokens = uniqueColorTokens.map((token) => {\n return {\n ...token,\n value: `var(--${PREFIX}-${token.name})`,\n };\n });\n\n const staticColorVariables = formattedVariables({\n format: \"sass\",\n dictionary: { ...dictionary, allTokens: staticColorTokens },\n });\n\n const dynamicColorVariables = formattedVariables({\n format: \"sass\",\n dictionary: { ...dictionary, allTokens: dynamicColorTokens },\n });\n\n return `${header}\n${staticColorVariables}\n\n// Dynamiske variabler for farge, via referanse til CSS-variabler\n${dynamicColorVariables}`;\n },\n};\n\nexport default scssThemeVariablesFormat;\n"],"names":["scssThemeVariablesFormat","name","format","async","dictionary","file","header","fileHeader","commentStyle","commentStyles","short","staticColorTokens","allTokens","filter","token","path","some","word","includes","dynamicColorTokens","map","value","PREFIX","formattedVariables"],"mappings":"yKAKA,MAAMA,EAAmC,CACrCC,KAAM,uBACNC,OAAQC,OACJC,WAAAA,EACAC,KAAAA,MAEMC,MAAAA,QAAeC,EAAW,CAC5BF,KAAAA,EACAG,aAAcC,EAAcC,QAE1BC,EAAoBP,EAAWQ,UAAUC,QAC1CC,IACIA,EAAMC,KAAKC,MAAMC,GAAS,CAAC,QAAS,QAAQC,SAASD,OAQxDE,EAJoBf,EAAWQ,UAAUC,QAAQC,GACnDA,EAAMC,KAAKG,SAAS,WAGqBE,KAAKN,IACvC,IACAA,EACHO,MAAO,SAASC,KAAUR,EAAMb,YAcxC,MAAO,GAAGK,MAVmBiB,EAAmB,CAC5CrB,OAAQ,OACRE,WAAY,IAAKA,EAAYQ,UAAWD,8EAGdY,EAAmB,CAC7CrB,OAAQ,OACRE,WAAY,IAAKA,EAAYQ,UAAWO,MAO7B"}
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
*/
|
|
4
4
|
declare const _default: {
|
|
5
5
|
breakpoint: {
|
|
6
|
+
small: string;
|
|
6
7
|
medium: string;
|
|
7
8
|
large: string;
|
|
8
9
|
xl: string;
|
|
@@ -204,6 +205,16 @@ declare const _default: {
|
|
|
204
205
|
104: string;
|
|
205
206
|
168: string;
|
|
206
207
|
};
|
|
208
|
+
semanticSpacing: {
|
|
209
|
+
none: string;
|
|
210
|
+
"2xs": string;
|
|
211
|
+
xs: string;
|
|
212
|
+
s: string;
|
|
213
|
+
m: string;
|
|
214
|
+
l: string;
|
|
215
|
+
xl: string;
|
|
216
|
+
"2xl": string;
|
|
217
|
+
};
|
|
207
218
|
icon: {
|
|
208
219
|
weight: {
|
|
209
220
|
normal: string;
|
package/build/es/core/tokens.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
const e={breakpoint:{medium:"680px",large:"1200px",xl:"1600px"},color:{brand:{snohvit:"#F9F9F9",varde:"#E0DBD4",granitt:"#1B1917",hvit:"#FFFFFF",svart:"#000000",skifer:"#313030",fjellgra:"#444141",stein:"#636060",svaberg:"#C8C5C3",dis:"#ECE9E5",sand:"#F4F2EF"},functional:{info:"#D3D3F6",infoDark:"#A9A9CA",success:"#ACD3B5",successDark:"#94B79B",warning:"#EFDD9E",warningDark:"#DECC8D",error:"#F6B3B3",errorDark:"#DE9E9E"},background:{page:{light:"#F4F2EF",dark:"#1B1917"},pageVariant:{light:"#F9F9F9",dark:"#1B1917"},container:{light:"#F9F9F9",dark:"#313030"},containerLow:{light:"#ECE9E5",dark:"#000000"},containerHigh:{light:"#FFFFFF",dark:"#313030"},containerInverted:{light:"#1B1917",dark:"#F9F9F9"},containerSubdued:{light:"#C8C5C3",dark:"#636060"},input:{base:{light:"transparent",dark:"transparent"},focus:{light:"#FFFFFF",dark:"#313030"}},action:{light:"#1B1917",dark:"#F9F9F9"},interactive:{light:"transparent",dark:"transparent"},interactiveHover:{light:"#ECE9E5",dark:"#444141"},interactiveSelected:{light:"#E0DBD4",dark:"#636060"},alert:{neutral:{light:"#E0DBD4",dark:"#E0DBD4"},info:{light:"#D3D3F6",dark:"#A9A9CA"},success:{light:"#ACD3B5",dark:"#94B79B"},warning:{light:"#EFDD9E",dark:"#DECC8D"},error:{light:"#F6B3B3",dark:"#DE9E9E"}}},text:{default:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#636060",dark:"#C8C5C3"},inverted:{light:"#F9F9F9",dark:"#1B1917"},onAction:{light:"#F9F9F9",dark:"#1B1917"},interactive:{light:"#1B1917",dark:"#F9F9F9"},interactiveHover:{light:"#636060",dark:"#C8C5C3"},onAlert:{light:"#1B1917",dark:"#1B1917"},onAlertSubdued:{light:"#444141",dark:"#444141"}},border:{action:{light:"#1B1917",dark:"#F9F9F9"},input:{light:"#636060",dark:"#C8C5C3"},inputFocus:{light:"#1B1917",dark:"#F9F9F9"},separator:{light:"#C8C5C3",dark:"#636060"},separatorStrong:{light:"#636060",dark:"#C8C5C3"},separatorHover:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#C8C5C3",dark:"#636060"}}},motion:{timing:{energetic:"75ms",snappy:"100ms",productive:"150ms",expressive:"250ms",lazy:"400ms"},easing:{standard:"ease",entrance:"ease-out",exit:"ease-in",easeInBounceOut:"cubic-bezier(0, 0, 0.375, 1.17)",focus:"cubic-bezier(0.6, 0.2, 0.35, 1)"}},spacing:{0:"0rem",2:"0.125rem",4:"0.25rem",8:"0.5rem",12:"0.75rem",16:"1rem",24:"1.5rem",32:"2rem",40:"2.5rem",64:"4rem",104:"6.5rem",168:"10.5rem"},icon:{weight:{normal:"300",bold:"400"}},typography:{weight:{normal:"400",bold:"700"},font:{size:{16:"1rem",18:"1.125rem",20:"1.25rem",21:"1.3125rem",23:"1.4375rem",25:"1.5625rem",26:"1.625rem",28:"1.75rem",30:"1.875rem",36:"2.25rem",44:"2.75rem",56:"3.5rem"}},line:{height:{24:"1.5rem",28:"1.75rem",32:"2rem",36:"2.25rem",40:"2.5rem",44:"2.75rem",52:"3.25rem",64:"4rem"}},title:{small:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"},base:{fontSize:"3.5rem",lineHeight:"4rem",fontWeight:"400"}},titleSmall:{small:{fontSize:"1.875rem",lineHeight:"2.25rem",fontWeight:"400"},base:{fontSize:"2.75rem",lineHeight:"3.25rem",fontWeight:"400"}},heading_1:{small:{fontSize:"1.625rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"}},heading_2:{small:{fontSize:"1.4375rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"1.75rem",lineHeight:"2.5rem",fontWeight:"400"}},heading_3:{small:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"},base:{fontSize:"1.5625rem",lineHeight:"2rem",fontWeight:"700"}},heading_4:{small:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"}},heading_5:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"}},body:{small:{fontSize:"1.125rem",lineHeight:"1.75rem",fontWeight:"400"},base:{fontSize:"1.25rem",lineHeight:"2rem",fontWeight:"400"}},small:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"}}}};export{e as default};
|
|
1
|
+
const e={breakpoint:{small:"0",medium:"680px",large:"1200px",xl:"1600px"},color:{brand:{snohvit:"#F9F9F9",varde:"#E0DBD4",granitt:"#1B1917",hvit:"#FFFFFF",svart:"#000000",skifer:"#313030",fjellgra:"#444141",stein:"#636060",svaberg:"#C8C5C3",dis:"#ECE9E5",sand:"#F4F2EF"},functional:{info:"#D3D3F6",infoDark:"#A9A9CA",success:"#ACD3B5",successDark:"#94B79B",warning:"#EFDD9E",warningDark:"#DECC8D",error:"#F6B3B3",errorDark:"#DE9E9E"},background:{page:{light:"#F4F2EF",dark:"#1B1917"},pageVariant:{light:"#F9F9F9",dark:"#1B1917"},container:{light:"#F9F9F9",dark:"#313030"},containerLow:{light:"#ECE9E5",dark:"#000000"},containerHigh:{light:"#FFFFFF",dark:"#313030"},containerInverted:{light:"#1B1917",dark:"#F9F9F9"},containerSubdued:{light:"#C8C5C3",dark:"#636060"},input:{base:{light:"transparent",dark:"transparent"},focus:{light:"#FFFFFF",dark:"#313030"}},action:{light:"#1B1917",dark:"#F9F9F9"},interactive:{light:"transparent",dark:"transparent"},interactiveHover:{light:"#ECE9E5",dark:"#444141"},interactiveSelected:{light:"#E0DBD4",dark:"#636060"},alert:{neutral:{light:"#E0DBD4",dark:"#E0DBD4"},info:{light:"#D3D3F6",dark:"#A9A9CA"},success:{light:"#ACD3B5",dark:"#94B79B"},warning:{light:"#EFDD9E",dark:"#DECC8D"},error:{light:"#F6B3B3",dark:"#DE9E9E"}}},text:{default:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#636060",dark:"#C8C5C3"},inverted:{light:"#F9F9F9",dark:"#1B1917"},onAction:{light:"#F9F9F9",dark:"#1B1917"},interactive:{light:"#1B1917",dark:"#F9F9F9"},interactiveHover:{light:"#636060",dark:"#C8C5C3"},onAlert:{light:"#1B1917",dark:"#1B1917"},onAlertSubdued:{light:"#444141",dark:"#444141"}},border:{action:{light:"#1B1917",dark:"#F9F9F9"},input:{light:"#636060",dark:"#C8C5C3"},inputFocus:{light:"#1B1917",dark:"#F9F9F9"},separator:{light:"#C8C5C3",dark:"#636060"},separatorStrong:{light:"#636060",dark:"#C8C5C3"},separatorHover:{light:"#1B1917",dark:"#F9F9F9"},subdued:{light:"#C8C5C3",dark:"#636060"}}},motion:{timing:{energetic:"75ms",snappy:"100ms",productive:"150ms",expressive:"250ms",lazy:"400ms"},easing:{standard:"ease",entrance:"ease-out",exit:"ease-in",easeInBounceOut:"cubic-bezier(0, 0, 0.375, 1.17)",focus:"cubic-bezier(0.6, 0.2, 0.35, 1)"}},spacing:{0:"0rem",2:"0.125rem",4:"0.25rem",8:"0.5rem",12:"0.75rem",16:"1rem",24:"1.5rem",32:"2rem",40:"2.5rem",64:"4rem",104:"6.5rem",168:"10.5rem"},semanticSpacing:{none:"0","2xs":"0.25rem",xs:"0.5rem",s:"1rem",m:"1.5rem",l:"2.5rem",xl:"4rem","2xl":"6.5rem"},icon:{weight:{normal:"300",bold:"400"}},typography:{weight:{normal:"400",bold:"700"},font:{size:{16:"1rem",18:"1.125rem",20:"1.25rem",21:"1.3125rem",23:"1.4375rem",25:"1.5625rem",26:"1.625rem",28:"1.75rem",30:"1.875rem",36:"2.25rem",44:"2.75rem",56:"3.5rem"}},line:{height:{24:"1.5rem",28:"1.75rem",32:"2rem",36:"2.25rem",40:"2.5rem",44:"2.75rem",52:"3.25rem",64:"4rem"}},title:{small:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"},base:{fontSize:"3.5rem",lineHeight:"4rem",fontWeight:"400"}},titleSmall:{small:{fontSize:"1.875rem",lineHeight:"2.25rem",fontWeight:"400"},base:{fontSize:"2.75rem",lineHeight:"3.25rem",fontWeight:"400"}},heading_1:{small:{fontSize:"1.625rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"2.25rem",lineHeight:"2.75rem",fontWeight:"400"}},heading_2:{small:{fontSize:"1.4375rem",lineHeight:"2rem",fontWeight:"400"},base:{fontSize:"1.75rem",lineHeight:"2.5rem",fontWeight:"400"}},heading_3:{small:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"},base:{fontSize:"1.5625rem",lineHeight:"2rem",fontWeight:"700"}},heading_4:{small:{fontSize:"1.125rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1.3125rem",lineHeight:"1.75rem",fontWeight:"700"}},heading_5:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"700"}},body:{small:{fontSize:"1.125rem",lineHeight:"1.75rem",fontWeight:"400"},base:{fontSize:"1.25rem",lineHeight:"2rem",fontWeight:"400"}},small:{small:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"},base:{fontSize:"1rem",lineHeight:"1.5rem",fontWeight:"400"}}}};export{e as default};
|
|
2
2
|
//# sourceMappingURL=tokens.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tokens.js","sources":["../../../src/core/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n breakpoint: { medium: \"680px\", large: \"1200px\", xl: \"1600px\" },\n color: {\n brand: {\n snohvit: \"#F9F9F9\",\n varde: \"#E0DBD4\",\n granitt: \"#1B1917\",\n hvit: \"#FFFFFF\",\n svart: \"#000000\",\n skifer: \"#313030\",\n fjellgra: \"#444141\",\n stein: \"#636060\",\n svaberg: \"#C8C5C3\",\n dis: \"#ECE9E5\",\n sand: \"#F4F2EF\",\n },\n functional: {\n info: \"#D3D3F6\",\n infoDark: \"#A9A9CA\",\n success: \"#ACD3B5\",\n successDark: \"#94B79B\",\n warning: \"#EFDD9E\",\n warningDark: \"#DECC8D\",\n error: \"#F6B3B3\",\n errorDark: \"#DE9E9E\",\n },\n background: {\n page: { light: \"#F4F2EF\", dark: \"#1B1917\" },\n pageVariant: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n container: { light: \"#F9F9F9\", dark: \"#313030\" },\n containerLow: { light: \"#ECE9E5\", dark: \"#000000\" },\n containerHigh: { light: \"#FFFFFF\", dark: \"#313030\" },\n containerInverted: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n containerSubdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n input: {\n base: { light: \"transparent\", dark: \"transparent\" },\n focus: { light: \"#FFFFFF\", dark: \"#313030\" },\n },\n action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n interactive: { light: \"transparent\", dark: \"transparent\" },\n interactiveHover: { light: \"#ECE9E5\", dark: \"#444141\" },\n interactiveSelected: { light: \"#E0DBD4\", dark: \"#636060\" },\n alert: {\n neutral: { light: \"#E0DBD4\", dark: \"#E0DBD4\" },\n info: { light: \"#D3D3F6\", dark: \"#A9A9CA\" },\n success: { light: \"#ACD3B5\", dark: \"#94B79B\" },\n warning: { light: \"#EFDD9E\", dark: \"#DECC8D\" },\n error: { light: \"#F6B3B3\", dark: \"#DE9E9E\" },\n },\n },\n text: {\n default: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n subdued: { light: \"#636060\", dark: \"#C8C5C3\" },\n inverted: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n onAction: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n interactive: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n interactiveHover: { light: \"#636060\", dark: \"#C8C5C3\" },\n onAlert: { light: \"#1B1917\", dark: \"#1B1917\" },\n onAlertSubdued: { light: \"#444141\", dark: \"#444141\" },\n },\n border: {\n action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n input: { light: \"#636060\", dark: \"#C8C5C3\" },\n inputFocus: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n separator: { light: \"#C8C5C3\", dark: \"#636060\" },\n separatorStrong: { light: \"#636060\", dark: \"#C8C5C3\" },\n separatorHover: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n subdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n },\n },\n motion: {\n timing: { energetic: \"75ms\", snappy: \"100ms\", productive: \"150ms\", expressive: \"250ms\", lazy: \"400ms\" },\n easing: {\n standard: \"ease\",\n entrance: \"ease-out\",\n exit: \"ease-in\",\n easeInBounceOut: \"cubic-bezier(0, 0, 0.375, 1.17)\",\n focus: \"cubic-bezier(0.6, 0.2, 0.35, 1)\",\n },\n },\n spacing: {\n 0: \"0rem\",\n 2: \"0.125rem\",\n 4: \"0.25rem\",\n 8: \"0.5rem\",\n 12: \"0.75rem\",\n 16: \"1rem\",\n 24: \"1.5rem\",\n 32: \"2rem\",\n 40: \"2.5rem\",\n 64: \"4rem\",\n 104: \"6.5rem\",\n 168: \"10.5rem\",\n },\n icon: { weight: { normal: \"300\", bold: \"400\" } },\n typography: {\n weight: { normal: \"400\", bold: \"700\" },\n font: {\n size: {\n 16: \"1rem\",\n 18: \"1.125rem\",\n 20: \"1.25rem\",\n 21: \"1.3125rem\",\n 23: \"1.4375rem\",\n 25: \"1.5625rem\",\n 26: \"1.625rem\",\n 28: \"1.75rem\",\n 30: \"1.875rem\",\n 36: \"2.25rem\",\n 44: \"2.75rem\",\n 56: \"3.5rem\",\n },\n },\n line: {\n height: {\n 24: \"1.5rem\",\n 28: \"1.75rem\",\n 32: \"2rem\",\n 36: \"2.25rem\",\n 40: \"2.5rem\",\n 44: \"2.75rem\",\n 52: \"3.25rem\",\n 64: \"4rem\",\n },\n },\n title: {\n small: { fontSize: \"2.25rem\", lineHeight: \"2.75rem\", fontWeight: \"400\" },\n base: { fontSize: \"3.5rem\", lineHeight: \"4rem\", fontWeight: \"400\" },\n },\n titleSmall: {\n small: { fontSize: \"1.875rem\", lineHeight: \"2.25rem\", fontWeight: \"400\" },\n base: { fontSize: \"2.75rem\", lineHeight: \"3.25rem\", fontWeight: \"400\" },\n },\n heading_1: {\n small: { fontSize: \"1.625rem\", lineHeight: \"2rem\", fontWeight: \"400\" },\n base: { fontSize: \"2.25rem\", lineHeight: \"2.75rem\", fontWeight: \"400\" },\n },\n heading_2: {\n small: { fontSize: \"1.4375rem\", lineHeight: \"2rem\", fontWeight: \"400\" },\n base: { fontSize: \"1.75rem\", lineHeight: \"2.5rem\", fontWeight: \"400\" },\n },\n heading_3: {\n small: { fontSize: \"1.3125rem\", lineHeight: \"1.75rem\", fontWeight: \"700\" },\n base: { fontSize: \"1.5625rem\", lineHeight: \"2rem\", fontWeight: \"700\" },\n },\n heading_4: {\n small: { fontSize: \"1.125rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n base: { fontSize: \"1.3125rem\", lineHeight: \"1.75rem\", fontWeight: \"700\" },\n },\n heading_5: {\n small: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n },\n body: {\n small: { fontSize: \"1.125rem\", lineHeight: \"1.75rem\", fontWeight: \"400\" },\n base: { fontSize: \"1.25rem\", lineHeight: \"2rem\", fontWeight: \"400\" },\n },\n small: {\n small: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"400\" },\n base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"400\" },\n },\n },\n};\n"],"names":["tokens","breakpoint","medium","large","xl","color","brand","snohvit","varde","granitt","hvit","svart","skifer","fjellgra","stein","svaberg","dis","sand","functional","info","infoDark","success","successDark","warning","warningDark","error","errorDark","background","page","light","dark","pageVariant","container","containerLow","containerHigh","containerInverted","containerSubdued","input","base","focus","action","interactive","interactiveHover","interactiveSelected","alert","neutral","text","default","subdued","inverted","onAction","onAlert","onAlertSubdued","border","inputFocus","separator","separatorStrong","separatorHover","motion","timing","energetic","snappy","productive","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","spacing","icon","weight","normal","bold","typography","font","size","line","height","title","small","fontSize","lineHeight","fontWeight","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"tokens.js","sources":["../../../src/core/tokens.ts"],"sourcesContent":["/**\n * Do not edit directly, this file was auto-generated.\n */\n\nexport default {\n breakpoint: { small: \"0\", medium: \"680px\", large: \"1200px\", xl: \"1600px\" },\n color: {\n brand: {\n snohvit: \"#F9F9F9\",\n varde: \"#E0DBD4\",\n granitt: \"#1B1917\",\n hvit: \"#FFFFFF\",\n svart: \"#000000\",\n skifer: \"#313030\",\n fjellgra: \"#444141\",\n stein: \"#636060\",\n svaberg: \"#C8C5C3\",\n dis: \"#ECE9E5\",\n sand: \"#F4F2EF\",\n },\n functional: {\n info: \"#D3D3F6\",\n infoDark: \"#A9A9CA\",\n success: \"#ACD3B5\",\n successDark: \"#94B79B\",\n warning: \"#EFDD9E\",\n warningDark: \"#DECC8D\",\n error: \"#F6B3B3\",\n errorDark: \"#DE9E9E\",\n },\n background: {\n page: { light: \"#F4F2EF\", dark: \"#1B1917\" },\n pageVariant: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n container: { light: \"#F9F9F9\", dark: \"#313030\" },\n containerLow: { light: \"#ECE9E5\", dark: \"#000000\" },\n containerHigh: { light: \"#FFFFFF\", dark: \"#313030\" },\n containerInverted: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n containerSubdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n input: {\n base: { light: \"transparent\", dark: \"transparent\" },\n focus: { light: \"#FFFFFF\", dark: \"#313030\" },\n },\n action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n interactive: { light: \"transparent\", dark: \"transparent\" },\n interactiveHover: { light: \"#ECE9E5\", dark: \"#444141\" },\n interactiveSelected: { light: \"#E0DBD4\", dark: \"#636060\" },\n alert: {\n neutral: { light: \"#E0DBD4\", dark: \"#E0DBD4\" },\n info: { light: \"#D3D3F6\", dark: \"#A9A9CA\" },\n success: { light: \"#ACD3B5\", dark: \"#94B79B\" },\n warning: { light: \"#EFDD9E\", dark: \"#DECC8D\" },\n error: { light: \"#F6B3B3\", dark: \"#DE9E9E\" },\n },\n },\n text: {\n default: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n subdued: { light: \"#636060\", dark: \"#C8C5C3\" },\n inverted: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n onAction: { light: \"#F9F9F9\", dark: \"#1B1917\" },\n interactive: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n interactiveHover: { light: \"#636060\", dark: \"#C8C5C3\" },\n onAlert: { light: \"#1B1917\", dark: \"#1B1917\" },\n onAlertSubdued: { light: \"#444141\", dark: \"#444141\" },\n },\n border: {\n action: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n input: { light: \"#636060\", dark: \"#C8C5C3\" },\n inputFocus: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n separator: { light: \"#C8C5C3\", dark: \"#636060\" },\n separatorStrong: { light: \"#636060\", dark: \"#C8C5C3\" },\n separatorHover: { light: \"#1B1917\", dark: \"#F9F9F9\" },\n subdued: { light: \"#C8C5C3\", dark: \"#636060\" },\n },\n },\n motion: {\n timing: {\n energetic: \"75ms\",\n snappy: \"100ms\",\n productive: \"150ms\",\n expressive: \"250ms\",\n lazy: \"400ms\",\n },\n easing: {\n standard: \"ease\",\n entrance: \"ease-out\",\n exit: \"ease-in\",\n easeInBounceOut: \"cubic-bezier(0, 0, 0.375, 1.17)\",\n focus: \"cubic-bezier(0.6, 0.2, 0.35, 1)\",\n },\n },\n spacing: {\n 0: \"0rem\",\n 2: \"0.125rem\",\n 4: \"0.25rem\",\n 8: \"0.5rem\",\n 12: \"0.75rem\",\n 16: \"1rem\",\n 24: \"1.5rem\",\n 32: \"2rem\",\n 40: \"2.5rem\",\n 64: \"4rem\",\n 104: \"6.5rem\",\n 168: \"10.5rem\",\n },\n semanticSpacing: {\n none: \"0\",\n \"2xs\": \"0.25rem\",\n xs: \"0.5rem\",\n s: \"1rem\",\n m: \"1.5rem\",\n l: \"2.5rem\",\n xl: \"4rem\",\n \"2xl\": \"6.5rem\",\n },\n icon: { weight: { normal: \"300\", bold: \"400\" } },\n typography: {\n weight: { normal: \"400\", bold: \"700\" },\n font: {\n size: {\n 16: \"1rem\",\n 18: \"1.125rem\",\n 20: \"1.25rem\",\n 21: \"1.3125rem\",\n 23: \"1.4375rem\",\n 25: \"1.5625rem\",\n 26: \"1.625rem\",\n 28: \"1.75rem\",\n 30: \"1.875rem\",\n 36: \"2.25rem\",\n 44: \"2.75rem\",\n 56: \"3.5rem\",\n },\n },\n line: {\n height: {\n 24: \"1.5rem\",\n 28: \"1.75rem\",\n 32: \"2rem\",\n 36: \"2.25rem\",\n 40: \"2.5rem\",\n 44: \"2.75rem\",\n 52: \"3.25rem\",\n 64: \"4rem\",\n },\n },\n title: {\n small: {\n fontSize: \"2.25rem\",\n lineHeight: \"2.75rem\",\n fontWeight: \"400\",\n },\n base: { fontSize: \"3.5rem\", lineHeight: \"4rem\", fontWeight: \"400\" },\n },\n titleSmall: {\n small: {\n fontSize: \"1.875rem\",\n lineHeight: \"2.25rem\",\n fontWeight: \"400\",\n },\n base: {\n fontSize: \"2.75rem\",\n lineHeight: \"3.25rem\",\n fontWeight: \"400\",\n },\n },\n heading_1: {\n small: {\n fontSize: \"1.625rem\",\n lineHeight: \"2rem\",\n fontWeight: \"400\",\n },\n base: {\n fontSize: \"2.25rem\",\n lineHeight: \"2.75rem\",\n fontWeight: \"400\",\n },\n },\n heading_2: {\n small: {\n fontSize: \"1.4375rem\",\n lineHeight: \"2rem\",\n fontWeight: \"400\",\n },\n base: {\n fontSize: \"1.75rem\",\n lineHeight: \"2.5rem\",\n fontWeight: \"400\",\n },\n },\n heading_3: {\n small: {\n fontSize: \"1.3125rem\",\n lineHeight: \"1.75rem\",\n fontWeight: \"700\",\n },\n base: {\n fontSize: \"1.5625rem\",\n lineHeight: \"2rem\",\n fontWeight: \"700\",\n },\n },\n heading_4: {\n small: {\n fontSize: \"1.125rem\",\n lineHeight: \"1.5rem\",\n fontWeight: \"700\",\n },\n base: {\n fontSize: \"1.3125rem\",\n lineHeight: \"1.75rem\",\n fontWeight: \"700\",\n },\n },\n heading_5: {\n small: {\n fontSize: \"1rem\",\n lineHeight: \"1.5rem\",\n fontWeight: \"700\",\n },\n base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"700\" },\n },\n body: {\n small: {\n fontSize: \"1.125rem\",\n lineHeight: \"1.75rem\",\n fontWeight: \"400\",\n },\n base: {\n fontSize: \"1.25rem\",\n lineHeight: \"2rem\",\n fontWeight: \"400\",\n },\n },\n small: {\n small: {\n fontSize: \"1rem\",\n lineHeight: \"1.5rem\",\n fontWeight: \"400\",\n },\n base: { fontSize: \"1rem\", lineHeight: \"1.5rem\", fontWeight: \"400\" },\n },\n },\n};\n"],"names":["tokens","breakpoint","small","medium","large","xl","color","brand","snohvit","varde","granitt","hvit","svart","skifer","fjellgra","stein","svaberg","dis","sand","functional","info","infoDark","success","successDark","warning","warningDark","error","errorDark","background","page","light","dark","pageVariant","container","containerLow","containerHigh","containerInverted","containerSubdued","input","base","focus","action","interactive","interactiveHover","interactiveSelected","alert","neutral","text","default","subdued","inverted","onAction","onAlert","onAlertSubdued","border","inputFocus","separator","separatorStrong","separatorHover","motion","timing","energetic","snappy","productive","expressive","lazy","easing","standard","entrance","exit","easeInBounceOut","spacing","semanticSpacing","none","xs","s","m","l","icon","weight","normal","bold","typography","font","size","line","height","title","fontSize","lineHeight","fontWeight","titleSmall","heading_1","heading_2","heading_3","heading_4","heading_5","body"],"mappings":"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"}
|
|
@@ -8,7 +8,7 @@ type ElementTypeProp<ElementType extends React.ElementType> = {
|
|
|
8
8
|
};
|
|
9
9
|
type PropsToOmit<ElementType extends React.ElementType, Props> = keyof (ElementTypeProp<ElementType> & Props);
|
|
10
10
|
export type PolymorphicProps<ElementType extends React.ElementType, Props = {}> = React.PropsWithChildren<Props & ElementTypeProp<ElementType>> & Omit<React.ComponentPropsWithoutRef<ElementType>, PropsToOmit<ElementType, Props>> & ElementTypeProp<ElementType>;
|
|
11
|
-
export type PolymorphicRef<
|
|
11
|
+
export type PolymorphicRef<As extends React.ElementType> = React.ComponentPropsWithRef<As>["ref"];
|
|
12
12
|
export type PolymorphicPropsWithRef<ElementType extends React.ElementType, Props = {}> = PolymorphicProps<ElementType, Props> & {
|
|
13
13
|
ref?: PolymorphicRef<ElementType>;
|
|
14
14
|
} & ElementTypeProp<ElementType>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Do not edit directly, this file was auto-generated.
|
|
3
|
-
*/
|
|
4
1
|
/**
|
|
5
2
|
* Do not edit directly, this file was auto-generated.
|
|
6
3
|
*/
|
|
@@ -33,7 +30,7 @@
|
|
|
33
30
|
--jkl-checkbox-box-size: 1.125rem;
|
|
34
31
|
--jkl-checkbox-line-height: 1.5rem;
|
|
35
32
|
}
|
|
36
|
-
@keyframes jkl-checkbox-checked-
|
|
33
|
+
@keyframes jkl-checkbox-checked-u8tg0zk {
|
|
37
34
|
0% {
|
|
38
35
|
width: 0;
|
|
39
36
|
height: 0;
|
|
@@ -47,7 +44,7 @@
|
|
|
47
44
|
height: 58%;
|
|
48
45
|
}
|
|
49
46
|
}
|
|
50
|
-
@keyframes jkl-checkbox-indeterminate-
|
|
47
|
+
@keyframes jkl-checkbox-indeterminate-u8tg109 {
|
|
51
48
|
0% {
|
|
52
49
|
width: 0;
|
|
53
50
|
}
|
|
@@ -76,11 +73,11 @@
|
|
|
76
73
|
left: calc(-0.5 * var(--jkl-checkbox-box-size));
|
|
77
74
|
}
|
|
78
75
|
.jkl-checkbox__input:checked + .jkl-checkbox__label .jkl-checkbox__check-mark::after {
|
|
79
|
-
animation: jkl-checkbox-checked-
|
|
76
|
+
animation: jkl-checkbox-checked-u8tg0zk 150ms ease-in-out forwards;
|
|
80
77
|
opacity: 1;
|
|
81
78
|
}
|
|
82
79
|
.jkl-checkbox__input:indeterminate:not(:checked) + .jkl-checkbox__label .jkl-checkbox__indeterminate-mark::after {
|
|
83
|
-
animation: jkl-checkbox-indeterminate-
|
|
80
|
+
animation: jkl-checkbox-indeterminate-u8tg109 150ms ease-in-out forwards;
|
|
84
81
|
opacity: 1;
|
|
85
82
|
}
|
|
86
83
|
.jkl-checkbox__input:focus-visible + .jkl-checkbox__label {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-
|
|
1
|
+
@layer jokul.components{:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-font-size:var(--jkl-body-font-size);--jkl-checkbox-line-height:var(--jkl-body-line-height);--jkl-checkbox-font-weight:var(--jkl-body-font-weight);--jkl-checkbox-height:3rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:2rem}@media (width >= 0) and (max-width:679px){:root,[data-density=comfortable],[data-layout-density=comfortable]{--jkl-checkbox-height:2.5rem;--jkl-checkbox-box-size:1.5rem;--jkl-checkbox-line-height:1.75rem}}[data-density=compact],[data-layout-density=compact]{--jkl-checkbox-font-size:var(--jkl-small-font-size);--jkl-checkbox-line-height:var(--jkl-small-line-height);--jkl-checkbox-font-weight:var(--jkl-small-font-weight);--jkl-checkbox-height:1.75rem;--jkl-checkbox-box-size:1.125rem;--jkl-checkbox-line-height:1.5rem}@keyframes jkl-checkbox-checked-u8tg0zk{0%{height:0;width:0}40%{height:0;width:18%}to{height:58%;width:18%}}@keyframes jkl-checkbox-indeterminate-u8tg109{0%{width:0}to{width:66%}}.jkl-checkbox{--box-color:var(--jkl-color-border-action);--check-color:var(--jkl-color-border-action);--text-color:var(--jkl-color-text-default);--background-color:#0000;color:var(--text-color);display:flex;flex-wrap:wrap;font-size:var(--jkl-checkbox-font-size);font-weight:var(--jkl-checkbox-font-weight);line-height:var(--jkl-checkbox-line-height);min-height:var(--jkl-checkbox-height);position:relative}.jkl-checkbox__input{left:calc(var(--jkl-checkbox-box-size)*-.5);opacity:0;position:absolute;top:var(--jkl-checkbox-box-size)}.jkl-checkbox__input:checked+.jkl-checkbox__label .jkl-checkbox__check-mark:after{animation:jkl-checkbox-checked-u8tg0zk .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:indeterminate:not(:checked)+.jkl-checkbox__label .jkl-checkbox__indeterminate-mark:after{animation:jkl-checkbox-indeterminate-u8tg109 .15s ease-in-out forwards;opacity:1}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label{color:var(--jkl-checkbox-focus-color)}.jkl-checkbox__input:focus-visible+.jkl-checkbox__label>.jkl-checkbox__mark{outline:3px solid var(--jkl-color-border-action);outline-offset:3px}.jkl-checkbox__input:disabled+.jkl-checkbox__label{color:var(--jkl-checkbox-disabled-color)}.jkl-checkbox__input:active{--background-color:var(--jkl-color-background-input-focus)}.jkl-checkbox__label{cursor:pointer;display:flex;flex-shrink:0;max-width:100%;min-width:0}.jkl-checkbox__label:active .jkl-checkbox__mark,.jkl-checkbox__label:hover .jkl-checkbox__mark{outline:1px solid var(--box-color)}.jkl-checkbox__text{margin:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-line-height))*.5) 0;transition-duration:.15s;transition-property:color;transition-timing-function:ease;translate:0 .0625rem}.jkl-checkbox__mark{box-sizing:border-box;height:var(--jkl-checkbox-box-size);margin-block:calc((var(--jkl-checkbox-height) - var(--jkl-checkbox-box-size))*.5);position:relative;width:var(--jkl-checkbox-box-size);-webkit-margin-end:var(--jkl-unit-10);align-self:flex-start;background-color:var(--background-color);border:1px solid;border-color:var(--box-color);border-radius:0;flex-shrink:0;margin-inline-end:var(--jkl-unit-10);outline:none;transition-duration:.15s;transition-property:background-color;transition-timing-function:ease}@media screen and (forced-colors:active){.jkl-checkbox__mark{border:1px solid ButtonText;outline:revert}}.jkl-checkbox__check-mark:after{border-bottom:.125rem solid var(--check-color);border-left-width:.125rem;border-left:0 solid var(--check-color);border-right:.125rem solid var(--check-color);border-top-width:.125rem;border-top:0 solid var(--check-color);bottom:42%;content:"";display:block;height:58%;left:18%;opacity:0;position:absolute;transform:rotate(45deg);transform-origin:bottom left;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:18%}@media screen and (forced-colors:active){.jkl-checkbox__check-mark:after{border-color:ButtonText}}.jkl-checkbox__indeterminate-mark:after{--width:66%;--thickness:0.125rem;border-bottom:solid var(--thickness) var(--check-color);bottom:calc(50% - var(--thickness)/2);content:"";display:block;left:calc((100% - var(--width))/2);opacity:0;position:absolute;transition-duration:.15s;transition-property:opacity,border-color;transition-timing-function:ease;width:var(--width)}@media screen and (forced-colors:active){.jkl-checkbox__indeterminate-mark:after{border-color:ButtonText}}.jkl-checkbox--inline{display:inline-flex}.jkl-checkbox--inline:not(:last-of-type){margin-right:calc(var(--jkl-unit-10)*3)}.jkl-checkbox--error{--background-color:var(--jkl-color-background-alert-error);--check-color:var(--jkl-color-text-on-alert)}}
|