@dsn-starter-kit/components-react 3.0.0 → 3.1.0

package/dist/MenuLink/MenuLink2.mjs

@@ -0,0 +1,98 @@
+import { Icon } from "../Icon/Icon2.mjs";
+/* empty css          */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/MenuLink/MenuLink.tsx
+/**
+* MenuLink component
+* Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.
+* Semantisch een `<a>`, visueel consistent met MenuButton.
+*
+* Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).
+*
+* @example
+* ```tsx
+* // Basisgebruik (level 1)
+* <MenuLink href="/dashboard">Dashboard</MenuLink>
+*
+* // Actieve pagina
+* <MenuLink href="/rapporten" current>Rapporten</MenuLink>
+*
+* // Level 2 (subpagina)
+* <MenuLink href="/rapporten/maandelijks" level={2}>Maandelijks</MenuLink>
+*
+* // Met icoon en NumberBadge
+* <MenuLink
+*   href="/inbox"
+*   iconStart={<Icon name="mail" aria-hidden />}
+*   numberBadge={<NumberBadge variant="negative">5</NumberBadge>}
+* >
+*   Inbox
+* </MenuLink>
+*
+* // Met uitklapknop
+* <MenuLink
+*   href="/rapporten"
+*   subItems
+*   expanded={isExpanded}
+*   onExpandToggle={() => setIsExpanded(!isExpanded)}
+* >
+*   Rapporten
+* </MenuLink>
+* ```
+*/
+const MenuLink = React.forwardRef(({ href, level = 1, current = false, iconStart, iconEnd, numberBadge, subItems = false, expanded = false, onExpandToggle, className, children, ...props }, ref) => {
+	const liClasses = classNames("dsn-menu-link", level > 1 && `dsn-menu-link--level-${level}`, className);
+	const childrenText = typeof children === "string" ? children : void 0;
+	return /* @__PURE__ */ jsxs("li", {
+		className: liClasses,
+		children: [
+			/* @__PURE__ */ jsxs("a", {
+				ref,
+				className: "dsn-menu-link__link",
+				href,
+				"aria-current": current ? "page" : void 0,
+				...props,
+				children: [
+					iconStart,
+					/* @__PURE__ */ jsx("span", {
+						className: "dsn-menu-link__label",
+						children
+					}),
+					numberBadge,
+					iconEnd
+				]
+			}),
+			subItems && /* @__PURE__ */ jsx("span", {
+				className: "dsn-menu-link__divider",
+				"aria-hidden": "true"
+			}),
+			subItems && /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: "dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button",
+				"aria-expanded": expanded,
+				onClick: onExpandToggle,
+				children: [/* @__PURE__ */ jsx(Icon, {
+					name: "chevron-down",
+					"aria-hidden": true
+				}), /* @__PURE__ */ jsxs("span", {
+					className: "dsn-button__label",
+					children: [expanded ? "Inklappen" : "Uitklappen", childrenText && /* @__PURE__ */ jsxs("span", {
+						className: "dsn-visually-hidden",
+						children: [
+							" ",
+							"voor ",
+							childrenText
+						]
+					})]
+				})]
+			})
+		]
+	});
+});
+MenuLink.displayName = "MenuLink";
+//#endregion
+export { MenuLink };
+
+//# sourceMappingURL=MenuLink2.mjs.map

package/dist/MenuLink/MenuLink2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuLink2.mjs","names":[],"sources":["../../src/MenuLink/MenuLink.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './MenuLink.css';\n\nexport type MenuLinkLevel = 1 | 2 | 3 | 4;\n\nexport interface MenuLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {\n  /**\n   * Navigatie-URL van de link\n   */\n  href?: string;\n\n  /**\n   * Hiërarchisch niveau — bepaalt de `padding-inline-start` inspringing\n   * @default 1\n   */\n  level?: MenuLinkLevel;\n\n  /**\n   * Markeert de actieve/huidige pagina.\n   * Voegt `aria-current=\"page\"` toe aan het `<a>`-element.\n   * @default false\n   */\n  current?: boolean;\n\n  /**\n   * Icoon links van het label\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Icoon rechts van het label — gebruik hier bij voorkeur geen NumberBadge (zie `numberBadge`)\n   */\n  iconEnd?: React.ReactNode;\n\n  /**\n   * NumberBadge element rechts van het label (naast iconEnd)\n   * Verwacht een `<NumberBadge>` component.\n   */\n  numberBadge?: React.ReactNode;\n\n  /**\n   * Toont een uitklapknop naast de link (voor subnavigatie).\n   * @default false\n   */\n  subItems?: boolean;\n\n  /**\n   * Geeft aan of de subnavigatie momenteel uitgevouwen is.\n   * Alleen relevant wanneer `subItems` true is.\n   * @default false\n   */\n  expanded?: boolean;\n\n  /**\n   * Callback die aangeroepen wordt wanneer op de uitklapknop geklikt wordt.\n   */\n  onExpandToggle?: () => void;\n\n  /**\n   * Zichtbare linktekst — ook gebruikt voor de toegankelijke naam van de uitklapknop\n   */\n  children?: React.ReactNode;\n\n  /**\n   * Aanvullende CSS-klassen voor het `<li>`-element\n   */\n  className?: string;\n}\n\n/**\n * MenuLink component\n * Navigatielink met niveau-hiërarchie, actieve staat en uitklapbare subnavigatie.\n * Semantisch een `<a>`, visueel consistent met MenuButton.\n *\n * Gebruik in een `<ul>`-element (het `<nav>`-element met lijst).\n *\n * @example\n * ```tsx\n * // Basisgebruik (level 1)\n * <MenuLink href=\"/dashboard\">Dashboard</MenuLink>\n *\n * // Actieve pagina\n * <MenuLink href=\"/rapporten\" current>Rapporten</MenuLink>\n *\n * // Level 2 (subpagina)\n * <MenuLink href=\"/rapporten/maandelijks\" level={2}>Maandelijks</MenuLink>\n *\n * // Met icoon en NumberBadge\n * <MenuLink\n *   href=\"/inbox\"\n *   iconStart={<Icon name=\"mail\" aria-hidden />}\n *   numberBadge={<NumberBadge variant=\"negative\">5</NumberBadge>}\n * >\n *   Inbox\n * </MenuLink>\n *\n * // Met uitklapknop\n * <MenuLink\n *   href=\"/rapporten\"\n *   subItems\n *   expanded={isExpanded}\n *   onExpandToggle={() => setIsExpanded(!isExpanded)}\n * >\n *   Rapporten\n * </MenuLink>\n * ```\n */\nexport const MenuLink = React.forwardRef<HTMLAnchorElement, MenuLinkProps>(\n  (\n    {\n      href,\n      level = 1,\n      current = false,\n      iconStart,\n      iconEnd,\n      numberBadge,\n      subItems = false,\n      expanded = false,\n      onExpandToggle,\n      className,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const liClasses = classNames(\n      'dsn-menu-link',\n      level > 1 && `dsn-menu-link--level-${level}`,\n      className\n    );\n\n    const childrenText = typeof children === 'string' ? children : undefined;\n\n    return (\n      <li className={liClasses}>\n        <a\n          ref={ref}\n          className=\"dsn-menu-link__link\"\n          href={href}\n          aria-current={current ? 'page' : undefined}\n          {...props}\n        >\n          {iconStart}\n          <span className=\"dsn-menu-link__label\">{children}</span>\n          {numberBadge}\n          {iconEnd}\n        </a>\n\n        {subItems && (\n          <span className=\"dsn-menu-link__divider\" aria-hidden=\"true\" />\n        )}\n        {subItems && (\n          <button\n            type=\"button\"\n            className=\"dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-menu-link__expand-button\"\n            aria-expanded={expanded}\n            onClick={onExpandToggle}\n          >\n            <Icon name=\"chevron-down\" aria-hidden />\n            <span className=\"dsn-button__label\">\n              {expanded ? 'Inklappen' : 'Uitklappen'}\n              {childrenText && (\n                <span className=\"dsn-visually-hidden\">\n                  {' '}\n                  voor {childrenText}\n                </span>\n              )}\n            </span>\n          </button>\n        )}\n      </li>\n    );\n  }\n);\n\nMenuLink.displayName = 'MenuLink';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GA,MAAa,WAAW,MAAM,YAE1B,EACE,MACA,QAAQ,GACR,UAAU,OACV,WACA,SACA,aACA,WAAW,OACX,WAAW,OACX,gBACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,WAChB,iBACA,QAAQ,KAAK,wBAAwB,SACrC,SACF;CAEA,MAAM,eAAe,OAAO,aAAa,WAAW,WAAW,KAAA;CAE/D,OACE,qBAAC,MAAD;EAAI,WAAW;EAAf,UAAA;GACE,qBAAC,KAAD;IACO;IACL,WAAU;IACJ;IACN,gBAAc,UAAU,SAAS,KAAA;IACjC,GAAI;IALN,UAAA;KAOG;KACD,oBAAC,QAAD;MAAM,WAAU;MAAwB;KAAe,CAAA;KACtD;KACA;IACA;;GAEF,YACC,oBAAC,QAAD;IAAM,WAAU;IAAyB,eAAY;GAAQ,CAAA;GAE9D,YACC,qBAAC,UAAD;IACE,MAAK;IACL,WAAU;IACV,iBAAe;IACf,SAAS;IAJX,UAAA,CAME,oBAAC,MAAD;KAAM,MAAK;KAAe,eAAA;IAAa,CAAA,GACvC,qBAAC,QAAD;KAAM,WAAU;KAAhB,UAAA,CACG,WAAW,cAAc,cACzB,gBACC,qBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACG;OAAI;OACC;MACF;KAEJ,CAAA,CAAA;IACA,CAAA,CAAA;;EAER;;AAER,CACF;AAEA,SAAS,cAAc"}

package/dist/MenuLink/index.d.mts

@@ -0,0 +1,2 @@
+import { MenuLink, MenuLinkLevel, MenuLinkProps } from "./MenuLink.mjs";
+export { MenuLink, MenuLinkLevel, MenuLinkProps };

package/dist/ModalDialog/ModalDialog.d.mts

@@ -0,0 +1,97 @@
+import React from "react";
+//#region src/ModalDialog/ModalDialog.d.ts
+interface ModalDialogProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
+  /**
+   * Bepaalt of het dialoogvenster getoond wordt.
+   * Het dialoogvenster wordt via `.showModal()` geopend — nooit via `.show()`.
+   */
+  isOpen: boolean;
+  /**
+   * Callback die wordt aangeroepen wanneer het dialoogvenster sluit
+   * (sluitknop, Escape-toets of klik buiten het venster).
+   */
+  onClose?: () => void;
+  /**
+   * De subcomponenten van het dialoogvenster:
+   * `ModalDialogHeader`, `ModalDialogBody`, `ModalDialogFooter`
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ModalDialog component
+ * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.
+ *
+ * Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.
+ * Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.
+ *
+ * @example
+ * ```tsx
+ * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <ModalDialogHeader>
+ *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
+ *   </ModalDialogHeader>
+ *   <ModalDialogBody>
+ *     <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>
+ *   </ModalDialogBody>
+ *   <ModalDialogFooter>
+ *     <ActionGroup>
+ *       <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
+ *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
+ *     </ActionGroup>
+ *   </ModalDialogFooter>
+ * </ModalDialog>
+ * ```
+ */
+declare const ModalDialog: React.ForwardRefExoticComponent<ModalDialogProps & React.RefAttributes<HTMLDialogElement>>;
+interface ModalDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Inhoud van de header — doorgaans een `ModalDialogHeading`
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ModalDialogHeader
+ * De headerstrook van het dialoogvenster met heading en sluitknop.
+ */
+declare const ModalDialogHeader: React.ForwardRefExoticComponent<ModalDialogHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface ModalDialogHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  /**
+   * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.
+   * @default 2
+   */
+  level?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * De zichtbare heading-tekst
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ModalDialogHeading
+ * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+declare const ModalDialogHeading: React.ForwardRefExoticComponent<ModalDialogHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface ModalDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * De hoofdinhoud van het dialoogvenster
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ModalDialogBody
+ * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
+ */
+declare const ModalDialogBody: React.ForwardRefExoticComponent<ModalDialogBodyProps & React.RefAttributes<HTMLDivElement>>;
+interface ModalDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * De acties van het dialoogvenster — doorgaans een `ActionGroup` met knoppen
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ModalDialogFooter
+ * De voettekst van het dialoogvenster met actieknoppen.
+ */
+declare const ModalDialogFooter: React.ForwardRefExoticComponent<ModalDialogFooterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { ModalDialog, ModalDialogBody, ModalDialogBodyProps, ModalDialogFooter, ModalDialogFooterProps, ModalDialogHeader, ModalDialogHeaderProps, ModalDialogHeading, ModalDialogHeadingProps, ModalDialogProps };
+//# sourceMappingURL=ModalDialog.d.mts.map

package/dist/ModalDialog/ModalDialog.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog.d.mts","names":[],"sources":["../../src/ModalDialog/ModalDialog.tsx"],"mappings":";;UAuBiB,yBAAyB,KACxC,MAAM,eAAe;;;;;EAOrB;;;;;EAMA;;;;;EAMA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BN,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA;UA+CP,+BAA+B,MAAM,eAAe;;;;EAInE,WAAW,MAAM;;;;;;cAON,mBAAiB,MAAA,0BAAA,yBAAA,MAAA,cAAA;UAgCb,gCAAgC,MAAM,eAAe;;;;;EAKpE;;;;EAKA,WAAW,MAAM;;;;;;cAON,oBAAkB,MAAA,0BAAA,0BAAA,MAAA,cAAA;UAyBd,6BAA6B,MAAM,eAAe;;;;EAIjE,WAAW,MAAM;;;;;;cAON,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA;UAqBX,+BAA+B,MAAM,eAAe;;;;EAInE,WAAW,MAAM;;;;;;cAON,mBAAiB,MAAA,0BAAA,yBAAA,MAAA,cAAA"}

package/dist/ModalDialog/ModalDialog2.mjs

@@ -0,0 +1,134 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import { Button } from "../Button/Button2.mjs";
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/ModalDialog/ModalDialog.tsx
+const ModalDialogContext = React.createContext({ headingId: "" });
+/**
+* ModalDialog component
+* Modaal dialoogvenster gebaseerd op het native `<dialog>` element.
+*
+* Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.
+* Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.
+*
+* @example
+* ```tsx
+* <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>
+*   <ModalDialogHeader>
+*     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>
+*   </ModalDialogHeader>
+*   <ModalDialogBody>
+*     <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>
+*   </ModalDialogBody>
+*   <ModalDialogFooter>
+*     <ActionGroup>
+*       <Button variant="negative" onClick={() => setIsOpen(false)}>Verwijderen</Button>
+*       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
+*     </ActionGroup>
+*   </ModalDialogFooter>
+* </ModalDialog>
+* ```
+*/
+const ModalDialog = React.forwardRef(({ className, isOpen, onClose, children, ...props }, ref) => {
+	const internalRef = React.useRef(null);
+	const dialogRef = ref ?? internalRef;
+	const headingId = React.useId();
+	React.useEffect(() => {
+		const dialog = dialogRef.current;
+		if (!dialog) return;
+		if (isOpen && !dialog.open) dialog.showModal();
+		else if (!isOpen && dialog.open) dialog.close();
+	}, [isOpen, dialogRef]);
+	const handleCancel = (event) => {
+		event.preventDefault();
+		onClose?.();
+	};
+	const classes = classNames("dsn-modal-dialog", className);
+	return /* @__PURE__ */ jsx(ModalDialogContext.Provider, {
+		value: {
+			headingId,
+			onClose
+		},
+		children: /* @__PURE__ */ jsx("dialog", {
+			ref: dialogRef,
+			className: classes,
+			"aria-labelledby": headingId,
+			onCancel: handleCancel,
+			...props,
+			children
+		})
+	});
+});
+ModalDialog.displayName = "ModalDialog";
+/**
+* ModalDialogHeader
+* De headerstrook van het dialoogvenster met heading en sluitknop.
+*/
+const ModalDialogHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { onClose } = React.useContext(ModalDialogContext);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames("dsn-modal-dialog__header", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			size: "small",
+			iconOnly: true,
+			onClick: onClose,
+			iconStart: /* @__PURE__ */ jsx(Icon, {
+				name: "x",
+				"aria-hidden": true
+			}),
+			children: "Sluiten"
+		})]
+	});
+});
+ModalDialogHeader.displayName = "ModalDialogHeader";
+/**
+* ModalDialogHeading
+* De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.
+*/
+const ModalDialogHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+	const { headingId } = React.useContext(ModalDialogContext);
+	const Tag = `h${level}`;
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		id: headingId,
+		className: classNames("dsn-modal-dialog-heading", className),
+		...props,
+		children
+	});
+});
+ModalDialogHeading.displayName = "ModalDialogHeading";
+/**
+* ModalDialogBody
+* De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.
+*/
+const ModalDialogBody = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-modal-dialog__body", className),
+		...props,
+		children
+	});
+});
+ModalDialogBody.displayName = "ModalDialogBody";
+/**
+* ModalDialogFooter
+* De voettekst van het dialoogvenster met actieknoppen.
+*/
+const ModalDialogFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-modal-dialog__footer", className),
+		...props,
+		children
+	});
+});
+ModalDialogFooter.displayName = "ModalDialogFooter";
+//#endregion
+export { ModalDialog, ModalDialogBody, ModalDialogFooter, ModalDialogHeader, ModalDialogHeading };
+
+//# sourceMappingURL=ModalDialog2.mjs.map

package/dist/ModalDialog/ModalDialog2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalDialog2.mjs","names":[],"sources":["../../src/ModalDialog/ModalDialog.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './ModalDialog.css';\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface ModalDialogContextValue {\n  headingId: string;\n  onClose?: () => void;\n}\n\nconst ModalDialogContext = React.createContext<ModalDialogContextValue>({\n  headingId: '',\n});\n\n// =============================================================================\n// ModalDialog (root)\n// =============================================================================\n\nexport interface ModalDialogProps extends Omit<\n  React.HTMLAttributes<HTMLDialogElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of het dialoogvenster getoond wordt.\n   * Het dialoogvenster wordt via `.showModal()` geopend — nooit via `.show()`.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback die wordt aangeroepen wanneer het dialoogvenster sluit\n   * (sluitknop, Escape-toets of klik buiten het venster).\n   */\n  onClose?: () => void;\n\n  /**\n   * De subcomponenten van het dialoogvenster:\n   * `ModalDialogHeader`, `ModalDialogBody`, `ModalDialogFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialog component\n * Modaal dialoogvenster gebaseerd op het native `<dialog>` element.\n *\n * Gebruik altijd `.showModal()` (intern afgehandeld via `isOpen` prop) — nooit `.show()`.\n * Dit garandeert natieve focus-trap, aria-modal semantiek en inert-attribuut op de achtergrond.\n *\n * @example\n * ```tsx\n * <ModalDialog isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <ModalDialogHeader>\n *     <ModalDialogHeading>Bevestig verwijderen</ModalDialogHeading>\n *   </ModalDialogHeader>\n *   <ModalDialogBody>\n *     <Paragraph>Weet u zeker dat u dit item wilt verwijderen?</Paragraph>\n *   </ModalDialogBody>\n *   <ModalDialogFooter>\n *     <ActionGroup>\n *       <Button variant=\"negative\" onClick={() => setIsOpen(false)}>Verwijderen</Button>\n *       <Button variant=\"default\" onClick={() => setIsOpen(false)}>Annuleren</Button>\n *     </ActionGroup>\n *   </ModalDialogFooter>\n * </ModalDialog>\n * ```\n */\nexport const ModalDialog = React.forwardRef<\n  HTMLDialogElement,\n  ModalDialogProps\n>(({ className, isOpen, onClose, children, ...props }, ref) => {\n  const internalRef = React.useRef<HTMLDialogElement>(null);\n  const dialogRef = (ref as React.RefObject<HTMLDialogElement>) ?? internalRef;\n  const headingId = React.useId();\n\n  React.useEffect(() => {\n    const dialog = dialogRef.current;\n    if (!dialog) return;\n\n    if (isOpen && !dialog.open) {\n      dialog.showModal();\n    } else if (!isOpen && dialog.open) {\n      dialog.close();\n    }\n  }, [isOpen, dialogRef]);\n\n  const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n    event.preventDefault();\n    onClose?.();\n  };\n\n  const classes = classNames('dsn-modal-dialog', className);\n\n  return (\n    <ModalDialogContext.Provider value={{ headingId, onClose }}>\n      <dialog\n        ref={dialogRef}\n        className={classes}\n        aria-labelledby={headingId}\n        onCancel={handleCancel}\n        {...props}\n      >\n        {children}\n      </dialog>\n    </ModalDialogContext.Provider>\n  );\n});\n\nModalDialog.displayName = 'ModalDialog';\n\n// =============================================================================\n// ModalDialogHeader\n// =============================================================================\n\nexport interface ModalDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Inhoud van de header — doorgaans een `ModalDialogHeading`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogHeader\n * De headerstrook van het dialoogvenster met heading en sluitknop.\n */\nexport const ModalDialogHeader = React.forwardRef<\n  HTMLDivElement,\n  ModalDialogHeaderProps\n>(({ className, children, ...props }, ref) => {\n  const { onClose } = React.useContext(ModalDialogContext);\n\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-modal-dialog__header', className)}\n      {...props}\n    >\n      {children}\n      <Button\n        variant=\"subtle\"\n        size=\"small\"\n        iconOnly\n        onClick={onClose}\n        iconStart={<Icon name=\"x\" aria-hidden />}\n      >\n        Sluiten\n      </Button>\n    </div>\n  );\n});\n\nModalDialogHeader.displayName = 'ModalDialogHeader';\n\n// =============================================================================\n// ModalDialogHeading\n// =============================================================================\n\nexport interface ModalDialogHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.\n   * @default 2\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * De zichtbare heading-tekst\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogHeading\n * De heading van het dialoogvenster. ID wordt automatisch gegenereerd voor aria-labelledby.\n */\nexport const ModalDialogHeading = React.forwardRef<\n  HTMLHeadingElement,\n  ModalDialogHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId } = React.useContext(ModalDialogContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  return (\n    <Tag\n      ref={ref}\n      id={headingId}\n      className={classNames('dsn-modal-dialog-heading', className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nModalDialogHeading.displayName = 'ModalDialogHeading';\n\n// =============================================================================\n// ModalDialogBody\n// =============================================================================\n\nexport interface ModalDialogBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De hoofdinhoud van het dialoogvenster\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogBody\n * De scrollbare inhoudssectie van het dialoogvenster met scroll-affordance schaduw.\n */\nexport const ModalDialogBody = React.forwardRef<\n  HTMLDivElement,\n  ModalDialogBodyProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-modal-dialog__body', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nModalDialogBody.displayName = 'ModalDialogBody';\n\n// =============================================================================\n// ModalDialogFooter\n// =============================================================================\n\nexport interface ModalDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De acties van het dialoogvenster — doorgaans een `ActionGroup` met knoppen\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * ModalDialogFooter\n * De voettekst van het dialoogvenster met actieknoppen.\n */\nexport const ModalDialogFooter = React.forwardRef<\n  HTMLDivElement,\n  ModalDialogFooterProps\n>(({ className, children, ...props }, ref) => {\n  return (\n    <div\n      ref={ref}\n      className={classNames('dsn-modal-dialog__footer', className)}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n});\n\nModalDialogFooter.displayName = 'ModalDialogFooter';\n"],"mappings":";;;;;;;AAeA,MAAM,qBAAqB,MAAM,cAAuC,EACtE,WAAW,GACb,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDD,MAAa,cAAc,MAAM,YAG9B,EAAE,WAAW,QAAQ,SAAS,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,MAAM,OAA0B,IAAI;CACxD,MAAM,YAAa,OAA8C;CACjE,MAAM,YAAY,MAAM,MAAM;CAE9B,MAAM,gBAAgB;EACpB,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,IAAI,UAAU,CAAC,OAAO,MACpB,OAAO,UAAU;OACZ,IAAI,CAAC,UAAU,OAAO,MAC3B,OAAO,MAAM;CAEjB,GAAG,CAAC,QAAQ,SAAS,CAAC;CAEtB,MAAM,gBAAgB,UAAmD;EACvE,MAAM,eAAe;EACrB,UAAU;CACZ;CAEA,MAAM,UAAU,WAAW,oBAAoB,SAAS;CAExD,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;GAAE;GAAW;EAAQ;EACvD,UAAA,oBAAC,UAAD;GACE,KAAK;GACL,WAAW;GACX,mBAAiB;GACjB,UAAU;GACV,GAAI;GAEH;EACK,CAAA;CACmB,CAAA;AAEjC,CAAC;AAED,YAAY,cAAc;;;;;AAiB1B,MAAa,oBAAoB,MAAM,YAGpC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,MAAM,EAAE,YAAY,MAAM,WAAW,kBAAkB;CAEvD,OACE,qBAAC,OAAD;EACO;EACL,WAAW,WAAW,4BAA4B,SAAS;EAC3D,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,SAAS;GACT,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAI,eAAA;GAAa,CAAA;GACxC,UAAA;EAEO,CAAA,CACL;;AAET,CAAC;AAED,kBAAkB,cAAc;;;;;AAuBhC,MAAa,qBAAqB,MAAM,YAGrC,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS,QAAQ;CACvD,MAAM,EAAE,cAAc,MAAM,WAAW,kBAAkB;CACzD,MAAM,MAAM,IAAI;CAEhB,OACE,oBAAC,KAAD;EACO;EACL,IAAI;EACJ,WAAW,WAAW,4BAA4B,SAAS;EAC3D,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,mBAAmB,cAAc;;;;;AAiBjC,MAAa,kBAAkB,MAAM,YAGlC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,0BAA0B,SAAS;EACzD,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,gBAAgB,cAAc;;;;;AAiB9B,MAAa,oBAAoB,MAAM,YAGpC,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC5C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,4BAA4B,SAAS;EAC3D,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,kBAAkB,cAAc"}

package/dist/ModalDialog/index.d.mts

@@ -0,0 +1,2 @@
+import { ModalDialog, ModalDialogBody, ModalDialogBodyProps, ModalDialogFooter, ModalDialogFooterProps, ModalDialogHeader, ModalDialogHeaderProps, ModalDialogHeading, ModalDialogHeadingProps, ModalDialogProps } from "./ModalDialog.mjs";
+export { ModalDialog, ModalDialogBody, type ModalDialogBodyProps, ModalDialogFooter, type ModalDialogFooterProps, ModalDialogHeader, type ModalDialogHeaderProps, ModalDialogHeading, type ModalDialogHeadingProps, type ModalDialogProps };

package/dist/Note/Note.d.mts

@@ -0,0 +1,95 @@
+import React from "react";
+//#region src/Note/Note.d.ts
+type NoteVariant = 'neutral' | 'info' | 'positive' | 'negative' | 'warning';
+type NoteAs = 'div' | 'aside' | 'nav' | 'section';
+interface NoteProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * HTML-element — ontkoppelt semantiek van visuele stijl
+   * @default 'div'
+   */
+  as?: NoteAs;
+  /**
+   * Semantische variant die de signaalkleur bepaalt
+   * @default 'neutral'
+   */
+  variant?: NoteVariant;
+  /**
+   * Optionele heading-tekst (renders als `<Heading appearance="heading-3">`)
+   */
+  heading?: string;
+  /**
+   * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
+   * @default 3
+   */
+  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+  /**
+   * Icoon vóór de heading.
+   * - `undefined` (default) — aanbevolen icoon per variant
+   * - `null` — geen icoon
+   * - `ReactNode` — aangepast icoon
+   */
+  iconStart?: React.ReactNode;
+  /**
+   * Visueel verborgen tekst die de variant benoemt voor screenreadergebruikers
+   * (inclusief scheidingsteken en spatie). Komt vóór de heading, of vóór de
+   * content als er geen heading is.
+   * - `undefined` (default) — standaardtekst per variant:
+   *   `''` (neutral) / `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
+   * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
+   * - `string` — eigen tekst, bijv. voor een andere taal
+   */
+  variantLabel?: string;
+  /**
+   * Body-content: tekst, lijst, links, etc.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Note component
+ * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
+ * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.
+ *
+ * @example
+ * ```tsx
+ * // Neutral (default), inline tip
+ * <Note heading="Let op">
+ *   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>
+ * </Note>
+ *
+ * // Info variant
+ * <Note variant="info" heading="Wist je dat...">
+ *   <Paragraph>Extra context.</Paragraph>
+ * </Note>
+ *
+ * // Zonder heading — icoon overspant beide rijen
+ * <Note variant="warning">
+ *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+ * </Note>
+ *
+ * // as="aside" — echt aanvullende content
+ * <Note as="aside" variant="info" heading="Achtergrondinformatie">
+ *   <Paragraph>Meer context.</Paragraph>
+ * </Note>
+ *
+ * // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
+ * <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
+ *   <UnorderedList>
+ *     <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
+ *   </UnorderedList>
+ * </Note>
+ *
+ * // Icoon weglaten
+ * <Note variant="info" heading="Opmerking" iconStart={null}>
+ *   <Paragraph>Zonder icoon.</Paragraph>
+ * </Note>
+ *
+ * // Variant-label onderdrukken (heading benoemt de variant al)
+ * <Note variant="warning" heading="Waarschuwing" variantLabel="">
+ *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+ * </Note>
+ * ```
+ */
+declare const Note: React.ForwardRefExoticComponent<NoteProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Note, NoteAs, NoteProps, NoteVariant };
+//# sourceMappingURL=Note.d.mts.map

package/dist/Note/Note.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.d.mts","names":[],"sources":["../../src/Note/Note.tsx"],"mappings":";;KAMY;KAMA;UAkBK,kBAAkB,MAAM,eAAe;;;;;EAKtD,KAAK;;;;;EAML,UAAU;;;;EAKV;;;;;EAMA;;;;;;;EAQA,YAAY,MAAM;;;;;;;;;;EAWlB;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAgDN,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}

package/dist/Note/Note2.mjs

@@ -0,0 +1,116 @@
+import { Heading } from "../Heading/Heading2.mjs";
+import { Icon } from "../Icon/Icon2.mjs";
+/* empty css      */
+import React, { useId } from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Note/Note.tsx
+const PREFERRED_ICONS = {
+	neutral: "info-circle",
+	info: "info-circle",
+	positive: "circle-check",
+	negative: "exclamation-circle",
+	warning: "alert-triangle"
+};
+const VARIANT_LABELS = {
+	neutral: "",
+	info: "Informatie: ",
+	positive: "Succes: ",
+	negative: "Foutmelding: ",
+	warning: "Let op: "
+};
+/**
+* Note component
+* Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
+* Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.
+*
+* @example
+* ```tsx
+* // Neutral (default), inline tip
+* <Note heading="Let op">
+*   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>
+* </Note>
+*
+* // Info variant
+* <Note variant="info" heading="Wist je dat...">
+*   <Paragraph>Extra context.</Paragraph>
+* </Note>
+*
+* // Zonder heading — icoon overspant beide rijen
+* <Note variant="warning">
+*   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+* </Note>
+*
+* // as="aside" — echt aanvullende content
+* <Note as="aside" variant="info" heading="Achtergrondinformatie">
+*   <Paragraph>Meer context.</Paragraph>
+* </Note>
+*
+* // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
+* <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
+*   <UnorderedList>
+*     <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
+*   </UnorderedList>
+* </Note>
+*
+* // Icoon weglaten
+* <Note variant="info" heading="Opmerking" iconStart={null}>
+*   <Paragraph>Zonder icoon.</Paragraph>
+* </Note>
+*
+* // Variant-label onderdrukken (heading benoemt de variant al)
+* <Note variant="warning" heading="Waarschuwing" variantLabel="">
+*   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
+* </Note>
+* ```
+*/
+const Note = React.forwardRef(({ as: As = "div", className, variant = "neutral", heading, headingLevel = 3, iconStart, variantLabel, children, ...props }, ref) => {
+	const headingId = useId();
+	const noIcon = iconStart === null;
+	const noHeading = !heading;
+	const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];
+	const resolvedIcon = iconStart === void 0 ? /* @__PURE__ */ jsx(Icon, {
+		name: PREFERRED_ICONS[variant],
+		size: "xl",
+		"aria-hidden": true
+	}) : iconStart;
+	const classes = classNames("dsn-note", variant !== "neutral" && `dsn-note--${variant}`, noHeading && "dsn-note--no-heading", className);
+	const isLandmark = As === "nav" || As === "aside" || As === "section";
+	const labelledBy = isLandmark && heading && !props["aria-label"] && !props["aria-labelledby"] ? headingId : void 0;
+	return /* @__PURE__ */ jsxs(As, {
+		ref,
+		className: classes,
+		"aria-labelledby": labelledBy,
+		...props,
+		children: [
+			!noIcon && /* @__PURE__ */ jsx("span", {
+				className: "dsn-note__icon",
+				"aria-hidden": true,
+				children: resolvedIcon
+			}),
+			heading && /* @__PURE__ */ jsxs(Heading, {
+				level: headingLevel,
+				appearance: "heading-3",
+				className: "dsn-note__heading",
+				id: isLandmark ? headingId : void 0,
+				children: [resolvedVariantLabel && /* @__PURE__ */ jsx("span", {
+					className: "dsn-visually-hidden",
+					children: resolvedVariantLabel
+				}), heading]
+			}),
+			noHeading && resolvedVariantLabel && /* @__PURE__ */ jsx("span", {
+				className: "dsn-visually-hidden",
+				children: resolvedVariantLabel
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "dsn-note__content",
+				children
+			})
+		]
+	});
+});
+Note.displayName = "Note";
+//#endregion
+export { Note };
+
+//# sourceMappingURL=Note2.mjs.map

package/dist/Note/Note2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note2.mjs","names":[],"sources":["../../src/Note/Note.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport { Heading } from '../Heading';\nimport './Note.css';\n\nexport type NoteVariant =\n  | 'neutral'\n  | 'info'\n  | 'positive'\n  | 'negative'\n  | 'warning';\nexport type NoteAs = 'div' | 'aside' | 'nav' | 'section';\n\nconst PREFERRED_ICONS: Record<NoteVariant, string> = {\n  neutral: 'info-circle',\n  info: 'info-circle',\n  positive: 'circle-check',\n  negative: 'exclamation-circle',\n  warning: 'alert-triangle',\n};\n\nconst VARIANT_LABELS: Record<NoteVariant, string> = {\n  neutral: '',\n  info: 'Informatie: ',\n  positive: 'Succes: ',\n  negative: 'Foutmelding: ',\n  warning: 'Let op: ',\n};\n\nexport interface NoteProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML-element — ontkoppelt semantiek van visuele stijl\n   * @default 'div'\n   */\n  as?: NoteAs;\n\n  /**\n   * Semantische variant die de signaalkleur bepaalt\n   * @default 'neutral'\n   */\n  variant?: NoteVariant;\n\n  /**\n   * Optionele heading-tekst (renders als `<Heading appearance=\"heading-3\">`)\n   */\n  heading?: string;\n\n  /**\n   * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)\n   * @default 3\n   */\n  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * Icoon vóór de heading.\n   * - `undefined` (default) — aanbevolen icoon per variant\n   * - `null` — geen icoon\n   * - `ReactNode` — aangepast icoon\n   */\n  iconStart?: React.ReactNode;\n\n  /**\n   * Visueel verborgen tekst die de variant benoemt voor screenreadergebruikers\n   * (inclusief scheidingsteken en spatie). Komt vóór de heading, of vóór de\n   * content als er geen heading is.\n   * - `undefined` (default) — standaardtekst per variant:\n   *   `''` (neutral) / `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`\n   * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)\n   * - `string` — eigen tekst, bijv. voor een andere taal\n   */\n  variantLabel?: string;\n\n  /**\n   * Body-content: tekst, lijst, links, etc.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Note component\n * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.\n * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.\n *\n * @example\n * ```tsx\n * // Neutral (default), inline tip\n * <Note heading=\"Let op\">\n *   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>\n * </Note>\n *\n * // Info variant\n * <Note variant=\"info\" heading=\"Wist je dat...\">\n *   <Paragraph>Extra context.</Paragraph>\n * </Note>\n *\n * // Zonder heading — icoon overspant beide rijen\n * <Note variant=\"warning\">\n *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>\n * </Note>\n *\n * // as=\"aside\" — echt aanvullende content\n * <Note as=\"aside\" variant=\"info\" heading=\"Achtergrondinformatie\">\n *   <Paragraph>Meer context.</Paragraph>\n * </Note>\n *\n * // as=\"nav\" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)\n * <Note as=\"nav\" variant=\"neutral\" heading=\"Gerelateerde pagina's\" headingLevel={2}>\n *   <UnorderedList>\n *     <li><Link href=\"/gerelateerd-1\">Gerelateerde pagina 1</Link></li>\n *   </UnorderedList>\n * </Note>\n *\n * // Icoon weglaten\n * <Note variant=\"info\" heading=\"Opmerking\" iconStart={null}>\n *   <Paragraph>Zonder icoon.</Paragraph>\n * </Note>\n *\n * // Variant-label onderdrukken (heading benoemt de variant al)\n * <Note variant=\"warning\" heading=\"Waarschuwing\" variantLabel=\"\">\n *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>\n * </Note>\n * ```\n */\nexport const Note = React.forwardRef<HTMLElement, NoteProps>(\n  (\n    {\n      as: As = 'div',\n      className,\n      variant = 'neutral',\n      heading,\n      headingLevel = 3,\n      iconStart,\n      variantLabel,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const headingId = useId();\n    const noIcon = iconStart === null;\n    const noHeading = !heading;\n    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];\n\n    const resolvedIcon =\n      iconStart === undefined ? (\n        <Icon\n          name={PREFERRED_ICONS[variant] as Parameters<typeof Icon>[0]['name']}\n          size=\"xl\"\n          aria-hidden\n        />\n      ) : (\n        iconStart\n      );\n\n    const classes = classNames(\n      'dsn-note',\n      variant !== 'neutral' && `dsn-note--${variant}`,\n      noHeading && 'dsn-note--no-heading',\n      className\n    );\n\n    // For landmark elements with a heading, add aria-labelledby automatically\n    const isLandmark = As === 'nav' || As === 'aside' || As === 'section';\n    const labelledBy =\n      isLandmark && heading && !props['aria-label'] && !props['aria-labelledby']\n        ? headingId\n        : undefined;\n\n    return (\n      <As\n        ref={ref as React.Ref<HTMLDivElement>}\n        className={classes}\n        aria-labelledby={labelledBy}\n        {...props}\n      >\n        {!noIcon && (\n          <span className=\"dsn-note__icon\" aria-hidden>\n            {resolvedIcon}\n          </span>\n        )}\n        {heading && (\n          <Heading\n            level={headingLevel}\n            appearance=\"heading-3\"\n            className=\"dsn-note__heading\"\n            id={isLandmark ? headingId : undefined}\n          >\n            {resolvedVariantLabel && (\n              <span className=\"dsn-visually-hidden\">\n                {resolvedVariantLabel}\n              </span>\n            )}\n            {heading}\n          </Heading>\n        )}\n        {noHeading && resolvedVariantLabel && (\n          <span className=\"dsn-visually-hidden\">{resolvedVariantLabel}</span>\n        )}\n        {children && <div className=\"dsn-note__content\">{children}</div>}\n      </As>\n    );\n  }\n);\n\nNote.displayName = 'Note';\n"],"mappings":";;;;;;;AAcA,MAAM,kBAA+C;CACnD,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU;CACV,SAAS;AACX;AAEA,MAAM,iBAA8C;CAClD,SAAS;CACT,MAAM;CACN,UAAU;CACV,UAAU;CACV,SAAS;AACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgGA,MAAa,OAAO,MAAM,YAEtB,EACE,IAAI,KAAK,OACT,WACA,UAAU,WACV,SACA,eAAe,GACf,WACA,cACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,YAAY,MAAM;CACxB,MAAM,SAAS,cAAc;CAC7B,MAAM,YAAY,CAAC;CACnB,MAAM,uBAAuB,gBAAgB,eAAe;CAE5D,MAAM,eACJ,cAAc,KAAA,IACZ,oBAAC,MAAD;EACE,MAAM,gBAAgB;EACtB,MAAK;EACL,eAAA;CACD,CAAA,IAED;CAGJ,MAAM,UAAU,WACd,YACA,YAAY,aAAa,aAAa,WACtC,aAAa,wBACb,SACF;CAGA,MAAM,aAAa,OAAO,SAAS,OAAO,WAAW,OAAO;CAC5D,MAAM,aACJ,cAAc,WAAW,CAAC,MAAM,iBAAiB,CAAC,MAAM,qBACpD,YACA,KAAA;CAEN,OACE,qBAAC,IAAD;EACO;EACL,WAAW;EACX,mBAAiB;EACjB,GAAI;EAJN,UAAA;GAMG,CAAC,UACA,oBAAC,QAAD;IAAM,WAAU;IAAiB,eAAA;IAC9B,UAAA;GACG,CAAA;GAEP,WACC,qBAAC,SAAD;IACE,OAAO;IACP,YAAW;IACX,WAAU;IACV,IAAI,aAAa,YAAY,KAAA;IAJ/B,UAAA,CAMG,wBACC,oBAAC,QAAD;KAAM,WAAU;KACb,UAAA;IACG,CAAA,GAEP,OACM;;GAEV,aAAa,wBACZ,oBAAC,QAAD;IAAM,WAAU;IAAuB,UAAA;GAA2B,CAAA;GAEnE,YAAY,oBAAC,OAAD;IAAK,WAAU;IAAqB;GAAc,CAAA;EAC7D;;AAER,CACF;AAEA,KAAK,cAAc"}

package/dist/Note/index.d.mts

@@ -0,0 +1,2 @@
+import { Note, NoteAs, NoteProps, NoteVariant } from "./Note.mjs";
+export { Note, type NoteAs, type NoteProps, type NoteVariant };

package/dist/NumberBadge/NumberBadge.d.mts

@@ -0,0 +1,44 @@
+import React from "react";
+//#region src/NumberBadge/NumberBadge.d.ts
+type NumberBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
+interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Signaalkleur van de badge
+   * @default 'negative'
+   */
+  variant?: NumberBadgeVariant;
+  /**
+   * Als `children` als getal groter is dan `maxCount`, wordt `{maxCount}+` getoond.
+   * Heeft geen effect als `children` geen getal is.
+   */
+  maxCount?: number;
+}
+/**
+ * NumberBadge component
+ * Compact inline-element dat een getal toont — zoals het aantal ongelezen berichten
+ * of openstaande taken. Geplaatst binnen een Button of Menu-item, naast het label.
+ *
+ * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
+ *
+ * @example
+ * ```tsx
+ * // Basis gebruik — inline in een Button
+ * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
+ *   Inbox
+ *   <NumberBadge variant="negative">5</NumberBadge>
+ * </Button>
+ *
+ * // Afgekapt getal — toont "99+" als count > 99
+ * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
+ *   <span>
+ *     Inbox
+ *     <span className="dsn-visually-hidden">, 128 ongelezen berichten</span>
+ *   </span>
+ *   <NumberBadge variant="negative" maxCount={99}>128</NumberBadge>
+ * </Button>
+ * ```
+ */
+declare const NumberBadge: React.ForwardRefExoticComponent<NumberBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { NumberBadge, NumberBadgeProps, NumberBadgeVariant };
+//# sourceMappingURL=NumberBadge.d.mts.map