@mattilsynet/design 2.1.7 → 2.1.9
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/mtds/index.iife.js +3 -3
- package/mtds/layout/layout.d.ts +0 -7
- package/mtds/layout/layout.js +10 -13
- package/mtds/layout/layout.js.map +1 -1
- package/mtds/package.json.js +1 -1
- package/mtds/progress/progress.stories.d.ts +0 -3
- package/mtds/react.js +31 -31
- package/mtds/styles.css +1 -1
- package/mtds/tooltip/tooltip-observer.js +1 -1
- package/mtds/tooltip/tooltip-observer.js.map +1 -1
- package/mtds/typography/typography.d.ts +10 -2
- package/mtds/typography/typography.js +14 -11
- package/mtds/typography/typography.js.map +1 -1
- package/package.json +3 -3
|
@@ -24,7 +24,7 @@ function S(i) {
|
|
|
24
24
|
const n = t && a(t, "data-tooltip") || "", l = t && a(t, "data-tooltip-position") || window.getComputedStyle(t || document.body).getPropertyValue(O)?.trim() || "top";
|
|
25
25
|
(!n || n === "false" || n === "true" || l === "none") && (t = null), t && (o.textContent = n);
|
|
26
26
|
const E = e && a(e, s) === o?.id, b = (t instanceof HTMLElement ? t.innerText : t?.textContent)?.trim() || t?.hasAttribute(s) || t?.hasAttribute("aria-label");
|
|
27
|
-
e?.removeAttribute(E ? s : m), u(o, !1), e = t, e && a(e, b ? m : s, o?.id), e && o.hidePopover(), o.togglePopover(!!t), u(o, t || !1, {
|
|
27
|
+
e?.removeAttribute(E ? s : m), u(o, !1), e = t, e && a(e, b ? m : s, o?.id), e?.isConnected && o.hidePopover(), o.togglePopover(!!t), u(o, t || !1, {
|
|
28
28
|
placement: l,
|
|
29
29
|
middleware: [L(), h({ padding: 10 })]
|
|
30
30
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\ton,\n\tonLoaded,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst DESCRIBEDBY = \"aria-describedby\";\nconst ESC = \"Escape\";\nconst LABELLEDBY = \"aria-labelledby\";\nconst POSITION_CSS_PROPERTY = \"--mtds-tooltip-position\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP = IS_BROWSER\n\t? Object.assign(document.createElement(\"div\"), {\n\t\t\tclassName: styles._tooltip,\n\t\t\tid: \"mtds-tooltip\",\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null; // Create a dummy element to avoid null checks\n\nlet ANCHOR: Element | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\n\nfunction handleTooltipMove({ target, type, key }: Event & { key?: string }) {\n\tif (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n\tconst wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n\tclearTimeout(THROTTLE);\n\tTHROTTLE = setTimeout(\n\t\thandleTooltipMoveThrottled,\n\t\tMath.max(wait, 0),\n\t\tkey === ESC ? null : target,\n\t);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleTooltipMoveThrottled(target: Element | null) {\n\tLAST_CALL = Date.now();\n\n\t// Build and append tooltip if not existing\n\tif (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\tlet anchor = target?.closest?.<Element>(\"[data-tooltip]\") || null;\n\n\t// No need to update\n\tif (anchor === ANCHOR) return;\n\n\tconst content = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n\tconst position =\n\t\t(anchor && attr(anchor, \"data-tooltip-position\")) ||\n\t\twindow\n\t\t\t.getComputedStyle(anchor || document.body)\n\t\t\t.getPropertyValue(POSITION_CSS_PROPERTY)\n\t\t\t?.trim() ||\n\t\t\"top\";\n\n\tconst isHidden =\n\t\t!content ||\n\t\tcontent === \"false\" ||\n\t\tcontent === \"true\" ||\n\t\tposition === \"none\";\n\n\tif (isHidden) anchor = null; // Do not show tooltip if boolish value\n\tif (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n\tconst hadLabel = ANCHOR && attr(ANCHOR, LABELLEDBY) === TOOLTIP?.id;\n\tconst hasLabel =\n\t\t(anchor instanceof HTMLElement\n\t\t\t? anchor.innerText\n\t\t\t: anchor?.textContent\n\t\t)?.trim() ||\n\t\tanchor?.hasAttribute(LABELLEDBY) ||\n\t\tanchor?.hasAttribute(\"aria-label\");\n\n\tANCHOR?.removeAttribute(hadLabel ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n\tanchorPosition(TOOLTIP, false); // Reset anchor position\n\n\tANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\tif (ANCHOR) attr(ANCHOR, hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP?.id); // Use tooltip as description if allready has label\n\tif (ANCHOR) TOOLTIP.hidePopover(); // Hide tooltip so it can be placed on top-layer on next show\n\tTOOLTIP.togglePopover(!!anchor);\n\tanchorPosition(TOOLTIP, anchor || false, {\n\t\tplacement: position as Placement,\n\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t});\n}\n\nonLoaded(() => {\n\ton(document, \"blur,focus,mouseout,mouseover\", handleTooltipMove, QUICK_EVENT);\n\ton(window, \"keydown\", handleTooltipMove, QUICK_EVENT);\n\ton(window, \"blur\", handleTooltipMove, QUICK_EVENT);\n});\n"],"names":["DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP","IS_BROWSER","styles","ANCHOR","LAST_CALL","THROTTLE","handleTooltipMove","target","type","key","wait","handleTooltipMoveThrottled","anchor","content","attr","position","hadLabel","hasLabel","anchorPosition","flip","shift","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAWA,MAAMA,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAUC,IACb,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG;AAAA,EAC7C,WAAWC,EAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAIC,IAAyB,MACzBC,IAAY,OAAO,mBACnBC,IAAmD;AAEvD,SAASC,EAAkB,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC3E,MAAID,MAAS,aAAaC,MAAQb,EAAK;AACvC,QAAMc,IAAON,IAAYL,IAAiB,KAAK,IAAA;AAC/C,eAAaM,CAAQ,GACrBA,IAAW;AAAA,IACVM;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQb,IAAM,OAAOW;AAAA,EAAA;AAEvB;AAGA,SAASI,EAA2BJ,GAAwB;AAI3D,MAHAH,IAAY,KAAK,IAAA,GAGb,CAACJ,KAAWO,MAAWP,EAAS;AACpC,EAAKA,GAAS,eAAa,SAAS,KAAK,OAAOA,CAAO;AACvD,MAAIY,IAASL,GAAQ,UAAmB,gBAAgB,KAAK;AAG7D,MAAIK,MAAWT,EAAQ;AAEvB,QAAMU,IAAWD,KAAUE,EAAKF,GAAQ,cAAc,KAAM,IACtDG,IACJH,KAAUE,EAAKF,GAAQ,uBAAuB,KAC/C,OACE,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiBd,CAAqB,GACrC,UACH;AAQD,GALC,CAACe,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEAH,IAAS,OACnBA,QAAgB,cAAcC;AAElC,QAAMG,IAAWb,KAAUW,EAAKX,GAAQN,CAAU,MAAMG,GAAS,IAC3DiB,KACJL,aAAkB,cAChBA,EAAO,YACPA,GAAQ,cACR,KAAA,KACHA,GAAQ,aAAaf,CAAU,KAC/Be,GAAQ,aAAa,YAAY;AAElC,EAAAT,GAAQ,gBAAgBa,IAAWnB,IAAaF,CAAW,GAC3DuB,EAAelB,GAAS,EAAK,GAE7BG,IAASS,GACLT,KAAQW,EAAKX,GAAQc,IAAWtB,IAAcE,GAAYG,GAAS,EAAE,GACrEG,
|
|
1
|
+
{"version":3,"file":"tooltip-observer.js","sources":["../../designsystem/tooltip/tooltip-observer.ts"],"sourcesContent":["import { flip, type Placement, shift } from \"@floating-ui/dom\";\nimport styles from \"../styles.module.css\";\nimport {\n\tanchorPosition,\n\tattr,\n\tIS_BROWSER,\n\ton,\n\tonLoaded,\n\tQUICK_EVENT,\n} from \"../utils\";\n\nconst DESCRIBEDBY = \"aria-describedby\";\nconst ESC = \"Escape\";\nconst LABELLEDBY = \"aria-labelledby\";\nconst POSITION_CSS_PROPERTY = \"--mtds-tooltip-position\";\nconst THROTTLE_DELAY = 300;\nconst TOOLTIP = IS_BROWSER\n\t? Object.assign(document.createElement(\"div\"), {\n\t\t\tclassName: styles._tooltip,\n\t\t\tid: \"mtds-tooltip\",\n\t\t\tpopover: \"manual\",\n\t\t})\n\t: null; // Create a dummy element to avoid null checks\n\nlet ANCHOR: Element | null = null;\nlet LAST_CALL = Number.NEGATIVE_INFINITY;\nlet THROTTLE: number | ReturnType<typeof setTimeout> = 0;\n\nfunction handleTooltipMove({ target, type, key }: Event & { key?: string }) {\n\tif (type === \"keydown\" && key !== ESC) return; // Allow ESC dismiss to follow https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/\n\tconst wait = LAST_CALL + THROTTLE_DELAY - Date.now();\n\tclearTimeout(THROTTLE);\n\tTHROTTLE = setTimeout(\n\t\thandleTooltipMoveThrottled,\n\t\tMath.max(wait, 0),\n\t\tkey === ESC ? null : target,\n\t);\n}\n\n// Using a throttled function to avoid performance issues\nfunction handleTooltipMoveThrottled(target: Element | null) {\n\tLAST_CALL = Date.now();\n\n\t// Build and append tooltip if not existing\n\tif (!TOOLTIP || target === TOOLTIP) return; // Allow tooltip to be hovered, following https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus\n\tif (!TOOLTIP?.isConnected) document.body.append(TOOLTIP); // Ensure connected\n\tlet anchor = target?.closest?.<Element>(\"[data-tooltip]\") || null;\n\n\t// No need to update\n\tif (anchor === ANCHOR) return;\n\n\tconst content = (anchor && attr(anchor, \"data-tooltip\")) || \"\";\n\tconst position =\n\t\t(anchor && attr(anchor, \"data-tooltip-position\")) ||\n\t\twindow\n\t\t\t.getComputedStyle(anchor || document.body)\n\t\t\t.getPropertyValue(POSITION_CSS_PROPERTY)\n\t\t\t?.trim() ||\n\t\t\"top\";\n\n\tconst isHidden =\n\t\t!content ||\n\t\tcontent === \"false\" ||\n\t\tcontent === \"true\" ||\n\t\tposition === \"none\";\n\n\tif (isHidden) anchor = null; // Do not show tooltip if boolish value\n\tif (anchor) TOOLTIP.textContent = content; // Only update content if new anchor\n\n\tconst hadLabel = ANCHOR && attr(ANCHOR, LABELLEDBY) === TOOLTIP?.id;\n\tconst hasLabel =\n\t\t(anchor instanceof HTMLElement\n\t\t\t? anchor.innerText\n\t\t\t: anchor?.textContent\n\t\t)?.trim() ||\n\t\tanchor?.hasAttribute(LABELLEDBY) ||\n\t\tanchor?.hasAttribute(\"aria-label\");\n\n\tANCHOR?.removeAttribute(hadLabel ? LABELLEDBY : DESCRIBEDBY); // Unlink previous anchor\n\tanchorPosition(TOOLTIP, false); // Reset anchor position\n\n\tANCHOR = anchor; // Store new anchor - might be null if no new anchor\n\tif (ANCHOR) attr(ANCHOR, hasLabel ? DESCRIBEDBY : LABELLEDBY, TOOLTIP?.id); // Use tooltip as description if allready has label\n\tif (ANCHOR?.isConnected) TOOLTIP.hidePopover(); // Hide tooltip so it can be placed on top-layer on next show\n\tTOOLTIP.togglePopover(!!anchor);\n\tanchorPosition(TOOLTIP, anchor || false, {\n\t\tplacement: position as Placement,\n\t\tmiddleware: [flip(), shift({ padding: 10 })],\n\t});\n}\n\nonLoaded(() => {\n\ton(document, \"blur,focus,mouseout,mouseover\", handleTooltipMove, QUICK_EVENT);\n\ton(window, \"keydown\", handleTooltipMove, QUICK_EVENT);\n\ton(window, \"blur\", handleTooltipMove, QUICK_EVENT);\n});\n"],"names":["DESCRIBEDBY","ESC","LABELLEDBY","POSITION_CSS_PROPERTY","THROTTLE_DELAY","TOOLTIP","IS_BROWSER","styles","ANCHOR","LAST_CALL","THROTTLE","handleTooltipMove","target","type","key","wait","handleTooltipMoveThrottled","anchor","content","attr","position","hadLabel","hasLabel","anchorPosition","flip","shift","onLoaded","on","QUICK_EVENT"],"mappings":";;;AAWA,MAAMA,IAAc,oBACdC,IAAM,UACNC,IAAa,mBACbC,IAAwB,2BACxBC,IAAiB,KACjBC,IAAUC,IACb,OAAO,OAAO,SAAS,cAAc,KAAK,GAAG;AAAA,EAC7C,WAAWC,EAAO;AAAA,EAClB,IAAI;AAAA,EACJ,SAAS;AACV,CAAC,IACA;AAEH,IAAIC,IAAyB,MACzBC,IAAY,OAAO,mBACnBC,IAAmD;AAEvD,SAASC,EAAkB,EAAE,QAAAC,GAAQ,MAAAC,GAAM,KAAAC,KAAiC;AAC3E,MAAID,MAAS,aAAaC,MAAQb,EAAK;AACvC,QAAMc,IAAON,IAAYL,IAAiB,KAAK,IAAA;AAC/C,eAAaM,CAAQ,GACrBA,IAAW;AAAA,IACVM;AAAA,IACA,KAAK,IAAID,GAAM,CAAC;AAAA,IAChBD,MAAQb,IAAM,OAAOW;AAAA,EAAA;AAEvB;AAGA,SAASI,EAA2BJ,GAAwB;AAI3D,MAHAH,IAAY,KAAK,IAAA,GAGb,CAACJ,KAAWO,MAAWP,EAAS;AACpC,EAAKA,GAAS,eAAa,SAAS,KAAK,OAAOA,CAAO;AACvD,MAAIY,IAASL,GAAQ,UAAmB,gBAAgB,KAAK;AAG7D,MAAIK,MAAWT,EAAQ;AAEvB,QAAMU,IAAWD,KAAUE,EAAKF,GAAQ,cAAc,KAAM,IACtDG,IACJH,KAAUE,EAAKF,GAAQ,uBAAuB,KAC/C,OACE,iBAAiBA,KAAU,SAAS,IAAI,EACxC,iBAAiBd,CAAqB,GACrC,UACH;AAQD,GALC,CAACe,KACDA,MAAY,WACZA,MAAY,UACZE,MAAa,YAEAH,IAAS,OACnBA,QAAgB,cAAcC;AAElC,QAAMG,IAAWb,KAAUW,EAAKX,GAAQN,CAAU,MAAMG,GAAS,IAC3DiB,KACJL,aAAkB,cAChBA,EAAO,YACPA,GAAQ,cACR,KAAA,KACHA,GAAQ,aAAaf,CAAU,KAC/Be,GAAQ,aAAa,YAAY;AAElC,EAAAT,GAAQ,gBAAgBa,IAAWnB,IAAaF,CAAW,GAC3DuB,EAAelB,GAAS,EAAK,GAE7BG,IAASS,GACLT,KAAQW,EAAKX,GAAQc,IAAWtB,IAAcE,GAAYG,GAAS,EAAE,GACrEG,GAAQ,eAAaH,EAAQ,YAAA,GACjCA,EAAQ,cAAc,CAAC,CAACY,CAAM,GAC9BM,EAAelB,GAASY,KAAU,IAAO;AAAA,IACxC,WAAWG;AAAA,IACX,YAAY,CAACI,EAAA,GAAQC,EAAM,EAAE,SAAS,IAAI,CAAC;AAAA,EAAA,CAC3C;AACF;AAEAC,EAAS,MAAM;AACd,EAAAC,EAAG,UAAU,iCAAiChB,GAAmBiB,CAAW,GAC5ED,EAAG,QAAQ,WAAWhB,GAAmBiB,CAAW,GACpDD,EAAG,QAAQ,QAAQhB,GAAmBiB,CAAW;AAClD,CAAC;"}
|
|
@@ -13,9 +13,17 @@ export declare const Muted: MutedComponent;
|
|
|
13
13
|
export type IngressProps<As extends React.ElementType = "span"> = PolymorphicComponentPropWithRef<As>;
|
|
14
14
|
type IngressComponent = <As extends React.ElementType = "span">(props: MutedProps<As>) => JSX.Element;
|
|
15
15
|
export declare const Ingress: IngressComponent;
|
|
16
|
-
export type InfoProps<As extends React.ElementType = "
|
|
16
|
+
export type InfoProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, {
|
|
17
17
|
"data-variant"?: "regular" | "circle";
|
|
18
18
|
}>;
|
|
19
|
-
type InfoComponent = <As extends React.ElementType = "
|
|
19
|
+
type InfoComponent = <As extends React.ElementType = "div">(props: MutedProps<As>) => JSX.Element;
|
|
20
20
|
export declare const Info: InfoComponent;
|
|
21
|
+
/**
|
|
22
|
+
* Prose
|
|
23
|
+
*/
|
|
24
|
+
export type ProseProps<As extends React.ElementType = "div"> = PolymorphicComponentPropWithRef<As, {
|
|
25
|
+
"data-justify"?: "start" | "center" | "end";
|
|
26
|
+
}>;
|
|
27
|
+
type ProseComponent = <As extends React.ElementType = "div">(props: ProseProps<As>) => JSX.Element;
|
|
28
|
+
export declare const Prose: ProseComponent;
|
|
21
29
|
export {};
|
|
@@ -1,20 +1,23 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { clsx as
|
|
1
|
+
import { jsx as r } from "react/jsx-runtime";
|
|
2
|
+
import { clsx as a } from "../external/clsx/dist/clsx.js";
|
|
3
3
|
import { forwardRef as e } from "react";
|
|
4
4
|
import c from "../styles.module.css.js";
|
|
5
|
-
const
|
|
6
|
-
return /* @__PURE__ */
|
|
7
|
-
}),
|
|
8
|
-
return /* @__PURE__ */
|
|
5
|
+
const d = e(function({ as: n, className: s, ...o }, t) {
|
|
6
|
+
return /* @__PURE__ */ r(n || "h2", { className: a(c.heading, s), ref: t, ...o });
|
|
7
|
+
}), l = e(function({ as: n, className: s, ...o }, t) {
|
|
8
|
+
return /* @__PURE__ */ r(n || "small", { className: a(c.muted, s), ref: t, ...o });
|
|
9
9
|
}), p = e(function({ as: n, className: s, ...o }, t) {
|
|
10
|
-
return /* @__PURE__ */
|
|
10
|
+
return /* @__PURE__ */ r(n || "span", { className: a(c.ingress, s), ref: t, ...o });
|
|
11
|
+
}), N = e(function({ as: n, className: s, ...o }, t) {
|
|
12
|
+
return /* @__PURE__ */ r(n || "div", { className: a(c.info, s), ref: t, ...o });
|
|
11
13
|
}), I = e(function({ as: n, className: s, ...o }, t) {
|
|
12
|
-
return /* @__PURE__ */
|
|
14
|
+
return /* @__PURE__ */ r(n || "div", { className: a(c.prose, s), ref: t, ...o });
|
|
13
15
|
});
|
|
14
16
|
export {
|
|
15
|
-
|
|
16
|
-
|
|
17
|
+
d as Heading,
|
|
18
|
+
N as Info,
|
|
17
19
|
p as Ingress,
|
|
18
|
-
|
|
20
|
+
l as Muted,
|
|
21
|
+
I as Prose
|
|
19
22
|
};
|
|
20
23
|
//# sourceMappingURL=typography.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingSizes = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: HeadingSizes;\n\t\t\t\"data-justify\"?: \"start\" | \"center\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type MutedProps<As extends React.ElementType = \"small\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype MutedComponent = <As extends React.ElementType = \"small\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Muted: MutedComponent = forwardRef<null>(function Muted<\n\tAs extends React.ElementType = \"small\",\n>({ as, className, ...rest }: MutedProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"small\";\n\treturn <Tag className={clsx(styles.muted, className)} ref={ref} {...rest} />;\n}) as MutedComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type IngressProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype IngressComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Ingress: IngressComponent = forwardRef<null>(function Ingress<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: IngressProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn (\n\t\t<Tag className={clsx(styles.ingress, className)} ref={ref} {...rest} />\n\t);\n}) as IngressComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type InfoProps<As extends React.ElementType = \"
|
|
1
|
+
{"version":3,"file":"typography.js","sources":["../../designsystem/typography/typography.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, type JSX } from \"react\";\nimport type {\n\tPolymorphicComponentPropWithRef,\n\tPolymorphicRef,\n} from \"../react-types\";\nimport styles from \"../styles.module.css\";\n\nexport type HeadingSizes = \"2xs\" | \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\";\nexport type HeadingProps<As extends React.ElementType = \"h2\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{\n\t\t\t\"data-size\"?: HeadingSizes;\n\t\t\t\"data-justify\"?: \"start\" | \"center\";\n\t\t}\n\t>;\n\ntype HeadingComponent = <As extends React.ElementType = \"h2\">(\n\tprops: HeadingProps<As>,\n) => JSX.Element;\n\nexport const Heading: HeadingComponent = forwardRef<null>(function Heading<\n\tAs extends React.ElementType = \"h2\",\n>({ as, className, ...rest }: HeadingProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"h2\";\n\n\treturn (\n\t\t<Tag className={clsx(styles.heading, className)} ref={ref} {...rest} />\n\t);\n}) as HeadingComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type MutedProps<As extends React.ElementType = \"small\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype MutedComponent = <As extends React.ElementType = \"small\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Muted: MutedComponent = forwardRef<null>(function Muted<\n\tAs extends React.ElementType = \"small\",\n>({ as, className, ...rest }: MutedProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"small\";\n\treturn <Tag className={clsx(styles.muted, className)} ref={ref} {...rest} />;\n}) as MutedComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type IngressProps<As extends React.ElementType = \"span\"> =\n\tPolymorphicComponentPropWithRef<As>;\n\ntype IngressComponent = <As extends React.ElementType = \"span\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Ingress: IngressComponent = forwardRef<null>(function Ingress<\n\tAs extends React.ElementType = \"span\",\n>({ as, className, ...rest }: IngressProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"span\";\n\treturn (\n\t\t<Tag className={clsx(styles.ingress, className)} ref={ref} {...rest} />\n\t);\n}) as IngressComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\nexport type InfoProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-variant\"?: \"regular\" | \"circle\" }\n\t>;\n\ntype InfoComponent = <As extends React.ElementType = \"div\">(\n\tprops: MutedProps<As>,\n) => JSX.Element;\n\nexport const Info: InfoComponent = forwardRef<null>(function Info<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: InfoProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\treturn <Tag className={clsx(styles.info, className)} ref={ref} {...rest} />;\n}) as InfoComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n\n/**\n * Prose\n */\nexport type ProseProps<As extends React.ElementType = \"div\"> =\n\tPolymorphicComponentPropWithRef<\n\t\tAs,\n\t\t{ \"data-justify\"?: \"start\" | \"center\" | \"end\" }\n\t>;\n\ntype ProseComponent = <As extends React.ElementType = \"div\">(\n\tprops: ProseProps<As>,\n) => JSX.Element;\n\nexport const Prose: ProseComponent = forwardRef<null>(function Prose<\n\tAs extends React.ElementType = \"div\",\n>({ as, className, ...rest }: ProseProps<As>, ref?: PolymorphicRef<As>) {\n\tconst Tag = as || \"div\";\n\n\treturn <Tag className={clsx(styles.prose, className)} ref={ref} {...rest} />;\n}) as ProseComponent; // Needed to tell Typescript this does not return ReactNode but acutally JSX.Element\n"],"names":["Heading","forwardRef","as","className","rest","ref","jsx","clsx","styles","Muted","Ingress","Info","Prose"],"mappings":";;;;AAsBO,MAAMA,IAA4BC,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAGzE,SACC,gBAAAC,EAHWJ,KAAM,MAGhB,EAAI,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAEvE,CAAC,GASYK,IAAwBR,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAEvE,SAAO,gBAAAC,EADKJ,KAAM,SACV,EAAI,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC,GASYM,IAA4BT,EAAiB,SAExD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,GAA0B;AAEzE,SACC,gBAAAC,EAFWJ,KAAM,QAEhB,EAAI,WAAWK,EAAKC,EAAO,SAASL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAEvE,CAAC,GAYYO,IAAsBV,EAAiB,SAElD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAuBC,GAA0B;AAEtE,SAAO,gBAAAC,EADKJ,KAAM,OACV,EAAI,WAAWK,EAAKC,EAAO,MAAML,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC1E,CAAC,GAeYQ,IAAwBX,EAAiB,SAEpD,EAAE,IAAAC,GAAI,WAAAC,GAAW,GAAGC,EAAA,GAAwBC,GAA0B;AAGvE,SAAO,gBAAAC,EAFKJ,KAAM,OAEV,EAAI,WAAWK,EAAKC,EAAO,OAAOL,CAAS,GAAG,KAAAE,GAAW,GAAGD,EAAA,CAAM;AAC3E,CAAC;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mattilsynet/design",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "./mtds/index.js",
|
|
6
6
|
"types": "./mtds/index.d.ts",
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"@storybook/react-vite": "^9.1.3",
|
|
52
52
|
"@tanstack/react-table": "^8.21.3",
|
|
53
53
|
"@types/node": "^24.3.0",
|
|
54
|
-
"@types/react": "^19.1.
|
|
54
|
+
"@types/react": "^19.1.12",
|
|
55
55
|
"@types/react-dom": "^19.1.8",
|
|
56
|
-
"@vitejs/plugin-react": "^5.0.
|
|
56
|
+
"@vitejs/plugin-react": "^5.0.2",
|
|
57
57
|
"fast-glob": "^3.3.3",
|
|
58
58
|
"postcss": "^8.5.6",
|
|
59
59
|
"postcss-nesting": "^13.0.2",
|