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

package/README.md

@@ -23,11 +23,23 @@ import {
   FormField,
   Icon,
 } from '@dsn-starter-kit/components-react';
-
-// Also supported: Import individually
-import { Button } from '@dsn-starter-kit/components-react/Button';
 ```
 
+Per-component subpaths are not exported; import everything from the package root.
+The ESM build ships one module per component and the package declares
+`"sideEffects": false`, so your bundler drops what you do not use. Measured with
+Vite 6, minified: React on its own is 194.47 kB, React plus a single `Heading` is
+195.02 kB, and React plus every export is 263.24 kB.
+
+A component costs what it actually pulls in. `Button` adds 19.6 kB rather than
+`Heading`'s 0.55 kB because it imports `Icon`, and `Icon` carries the full icon
+registry.
+
+The CommonJS build is a single bundled file and does not tree-shake. That is
+deliberate: in unbundled mode tsdown leaves a `require()` behind per component
+pointing at the stripped CSS module, which does not exist. ESM consumers get the
+smaller bundle; CommonJS consumers are no worse off than before.
+
 ### Example
 
 ```tsx
@@ -167,7 +179,23 @@ pnpm watch
 
 ## CSS
 
-CSS styles are imported from `@dsn-starter-kit/components-html` for each component. The CSS is not bundled with the JavaScript - you need to import it separately in your application.
+The JavaScript contains no CSS imports. That is what makes this package loadable by
+Node itself, and therefore usable in server-side rendering. The flip side is that the
+styles never arrive on their own — import them once in your application entry point:
+
+```tsx
+import '@dsn-starter-kit/core/css'; // tokens + reset, first
+import '@dsn-starter-kit/components-react/css'; // all component styles
+```
+
+`dist/index.css` holds every component style, with the `@import` chains to
+`@dsn-starter-kit/components-html` already resolved.
+
+## Module formats
+
+The package ships both ESM (`dist/index.mjs`) and CommonJS (`dist/index.cjs`), each
+with its own type declarations. Your bundler or Node picks the right one through the
+`exports` field, so `import` and `require` both work.
 
 ## Dependencies
 

package/dist/ActionGroup/ActionGroup.d.mts

@@ -0,0 +1,51 @@
+import React from "react";
+//#region src/ActionGroup/ActionGroup.d.ts
+interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {
+  /**
+   * Richting van de groep — horizontale rij met wrapping of verticale kolom
+   * @default 'horizontal'
+   */
+  direction?: 'horizontal' | 'vertical';
+  /**
+   * `Button`- en/of `Link`-componenten
+   */
+  children?: React.ReactNode;
+}
+/**
+ * ActionGroup component
+ * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
+ * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
+ * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
+ * aantal acties en de groepsnaam aankondigen (zie issue #295).
+ *
+ * @example
+ * ```tsx
+ * // Horizontaal (default)
+ * <ActionGroup>
+ *   <Button variant="strong">Opslaan</Button>
+ *   <Button variant="subtle">Annuleren</Button>
+ * </ActionGroup>
+ *
+ * // Horizontaal met Link
+ * <ActionGroup>
+ *   <Button variant="strong">Volgende stap</Button>
+ *   <Link href="/">Terug naar overzicht</Link>
+ * </ActionGroup>
+ *
+ * // Verticaal
+ * <ActionGroup direction="vertical">
+ *   <Button variant="strong">Primaire actie</Button>
+ *   <Button variant="subtle">Secundaire actie</Button>
+ * </ActionGroup>
+ *
+ * // Aangepast aria-label
+ * <ActionGroup aria-label="Formulierknoppen">
+ *   <Button variant="strong" type="submit">Verstuur</Button>
+ *   <Button variant="subtle">Annuleren</Button>
+ * </ActionGroup>
+ * ```
+ */
+declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLUListElement>>;
+//#endregion
+export { ActionGroup, ActionGroupProps };
+//# sourceMappingURL=ActionGroup.d.mts.map

package/dist/ActionGroup/ActionGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup.d.mts","names":[],"sources":["../../src/ActionGroup/ActionGroup.tsx"],"mappings":";;UAIiB,yBAAyB,MAAM,eAAe;;;;;EAK7D;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkDN,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/ActionGroup/ActionGroup2.mjs

@@ -0,0 +1,65 @@
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/ActionGroup/ActionGroup.tsx
+/**
+* Flattens top-level React.Fragment children (e.g. `<>...</>`) so each
+* action ends up as its own `<li>`, regardless of whether the caller wraps
+* multiple children in a Fragment or passes them as direct JSX children.
+*/
+function flattenActions(children) {
+	return React.Children.toArray(children).flatMap((child) => React.isValidElement(child) && child.type === React.Fragment ? flattenActions(child.props.children) : [child]);
+}
+/**
+* ActionGroup component
+* Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
+* Horizontale richting (default) wraps automatisch bij te weinig ruimte.
+* Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
+* aantal acties en de groepsnaam aankondigen (zie issue #295).
+*
+* @example
+* ```tsx
+* // Horizontaal (default)
+* <ActionGroup>
+*   <Button variant="strong">Opslaan</Button>
+*   <Button variant="subtle">Annuleren</Button>
+* </ActionGroup>
+*
+* // Horizontaal met Link
+* <ActionGroup>
+*   <Button variant="strong">Volgende stap</Button>
+*   <Link href="/">Terug naar overzicht</Link>
+* </ActionGroup>
+*
+* // Verticaal
+* <ActionGroup direction="vertical">
+*   <Button variant="strong">Primaire actie</Button>
+*   <Button variant="subtle">Secundaire actie</Button>
+* </ActionGroup>
+*
+* // Aangepast aria-label
+* <ActionGroup aria-label="Formulierknoppen">
+*   <Button variant="strong" type="submit">Verstuur</Button>
+*   <Button variant="subtle">Annuleren</Button>
+* </ActionGroup>
+* ```
+*/
+const ActionGroup = React.forwardRef(({ className, direction = "horizontal", "aria-label": ariaLabel = "Acties", children, ...props }, ref) => {
+	const classes = classNames("dsn-action-group", direction === "vertical" && "dsn-action-group--vertical", className);
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: classes,
+		"aria-label": ariaLabel,
+		...props,
+		children: flattenActions(children).map((child, index) => /* @__PURE__ */ jsx("li", {
+			className: "dsn-action-group__item",
+			children: child
+		}, index))
+	});
+});
+ActionGroup.displayName = "ActionGroup";
+//#endregion
+export { ActionGroup };
+
+//# sourceMappingURL=ActionGroup2.mjs.map

package/dist/ActionGroup/ActionGroup2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ActionGroup2.mjs","names":[],"sources":["../../src/ActionGroup/ActionGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './ActionGroup.css';\n\nexport interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {\n  /**\n   * Richting van de groep — horizontale rij met wrapping of verticale kolom\n   * @default 'horizontal'\n   */\n  direction?: 'horizontal' | 'vertical';\n\n  /**\n   * `Button`- en/of `Link`-componenten\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Flattens top-level React.Fragment children (e.g. `<>...</>`) so each\n * action ends up as its own `<li>`, regardless of whether the caller wraps\n * multiple children in a Fragment or passes them as direct JSX children.\n */\nfunction flattenActions(children: React.ReactNode): React.ReactNode[] {\n  return React.Children.toArray(children).flatMap((child) =>\n    React.isValidElement(child) && child.type === React.Fragment\n      ? flattenActions((child.props as { children?: React.ReactNode }).children)\n      : [child]\n  );\n}\n\n/**\n * ActionGroup component\n * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.\n * Horizontale richting (default) wraps automatisch bij te weinig ruimte.\n * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het\n * aantal acties en de groepsnaam aankondigen (zie issue #295).\n *\n * @example\n * ```tsx\n * // Horizontaal (default)\n * <ActionGroup>\n *   <Button variant=\"strong\">Opslaan</Button>\n *   <Button variant=\"subtle\">Annuleren</Button>\n * </ActionGroup>\n *\n * // Horizontaal met Link\n * <ActionGroup>\n *   <Button variant=\"strong\">Volgende stap</Button>\n *   <Link href=\"/\">Terug naar overzicht</Link>\n * </ActionGroup>\n *\n * // Verticaal\n * <ActionGroup direction=\"vertical\">\n *   <Button variant=\"strong\">Primaire actie</Button>\n *   <Button variant=\"subtle\">Secundaire actie</Button>\n * </ActionGroup>\n *\n * // Aangepast aria-label\n * <ActionGroup aria-label=\"Formulierknoppen\">\n *   <Button variant=\"strong\" type=\"submit\">Verstuur</Button>\n *   <Button variant=\"subtle\">Annuleren</Button>\n * </ActionGroup>\n * ```\n */\nexport const ActionGroup = React.forwardRef<HTMLUListElement, ActionGroupProps>(\n  (\n    {\n      className,\n      direction = 'horizontal',\n      'aria-label': ariaLabel = 'Acties',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-action-group',\n      direction === 'vertical' && 'dsn-action-group--vertical',\n      className\n    );\n\n    return (\n      <ul ref={ref} className={classes} aria-label={ariaLabel} {...props}>\n        {flattenActions(children).map((child, index) => (\n          <li className=\"dsn-action-group__item\" key={index}>\n            {child}\n          </li>\n        ))}\n      </ul>\n    );\n  }\n);\n\nActionGroup.displayName = 'ActionGroup';\n"],"mappings":";;;;;;;;;;AAsBA,SAAS,eAAe,UAA8C;CACpE,OAAO,MAAM,SAAS,QAAQ,QAAQ,CAAC,CAAC,SAAS,UAC/C,MAAM,eAAe,KAAK,KAAK,MAAM,SAAS,MAAM,WAChD,eAAgB,MAAM,MAAyC,QAAQ,IACvE,CAAC,KAAK,CACZ;AACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCA,MAAa,cAAc,MAAM,YAE7B,EACE,WACA,YAAY,cACZ,cAAc,YAAY,UAC1B,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,oBACA,cAAc,cAAc,8BAC5B,SACF;CAEA,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAS,cAAY;EAAW,GAAI;EAC1D,UAAA,eAAe,QAAQ,CAAC,CAAC,KAAK,OAAO,UACpC,oBAAC,MAAD;GAAI,WAAU;GACX,UAAA;EACC,GAFwC,KAExC,CACL;CACC,CAAA;AAER,CACF;AAEA,YAAY,cAAc"}

package/dist/ActionGroup/index.d.mts

@@ -0,0 +1,2 @@
+import { ActionGroup, ActionGroupProps } from "./ActionGroup.mjs";
+export { ActionGroup, type ActionGroupProps };

package/dist/Alert/Alert.d.mts

@@ -0,0 +1,85 @@
+import React from "react";
+//#region src/Alert/Alert.d.ts
+type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';
+interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Semantische variant die de signaalkleur bepaalt
+   * @default 'info'
+   */
+  variant?: AlertVariant;
+  /**
+   * Koptekst van het bericht (verplicht)
+   */
+  heading: string;
+  /**
+   * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
+   * @default 2
+   */
+  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 vóór de heading die de variant benoemt voor
+   * screenreadergebruikers (inclusief scheidingsteken en spatie).
+   * - `undefined` (default) — standaardtekst per variant:
+   *   `'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;
+  /**
+   * Optionele body content (tekst, lijst, links, etc.)
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Alert component
+ * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
+ *
+ * @example
+ * ```tsx
+ * // Info (default)
+ * <Alert heading="Uw aanvraag wordt verwerkt">
+ *   Dit kan enkele minuten duren.
+ * </Alert>
+ *
+ * // Positive
+ * <Alert variant="positive" heading="Gelukt">
+ *   Uw gegevens zijn opgeslagen.
+ * </Alert>
+ *
+ * // Negative
+ * <Alert variant="negative" heading="Er is een fout opgetreden">
+ *   Controleer uw gegevens en probeer het opnieuw.
+ * </Alert>
+ *
+ * // Warning
+ * <Alert variant="warning" heading="Let op">
+ *   Uw sessie verloopt over 5 minuten.
+ * </Alert>
+ *
+ * // Zonder icoon
+ * <Alert variant="info" heading="Opmerking" iconStart={null}>
+ *   Aanvullende informatie.
+ * </Alert>
+ *
+ * // Met aangepast icoon
+ * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
+ *   Gebruik de zoekfunctie om snel te navigeren.
+ * </Alert>
+ *
+ * // Variant-label onderdrukken (heading benoemt de variant al)
+ * <Alert variant="negative" heading="Foutmelding" variantLabel="">
+ *   Controleer uw gegevens.
+ * </Alert>
+ * ```
+ */
+declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Alert, AlertProps, AlertVariant };
+//# sourceMappingURL=Alert.d.mts.map

package/dist/Alert/Alert.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.d.mts","names":[],"sources":["../../src/Alert/Alert.tsx"],"mappings":";;KAMY;UAgBK,mBAAmB,MAAM,eAAe;;;;;EAKvD,UAAU;;;;EAKV;;;;;EAMA;;;;;;;EAQA,YAAY,MAAM;;;;;;;;;EAUlB;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6CN,OAAK,MAAA,0BAAA,aAAA,MAAA,cAAA"}

package/dist/Alert/Alert2.mjs

@@ -0,0 +1,102 @@
+import { Heading } from "../Heading/Heading2.mjs";
+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/Alert/Alert.tsx
+const PREFERRED_ICONS = {
+	info: "info-circle",
+	positive: "circle-check",
+	negative: "exclamation-circle",
+	warning: "alert-triangle"
+};
+const VARIANT_LABELS = {
+	info: "Informatie: ",
+	positive: "Succes: ",
+	negative: "Foutmelding: ",
+	warning: "Let op: "
+};
+/**
+* Alert component
+* Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
+*
+* @example
+* ```tsx
+* // Info (default)
+* <Alert heading="Uw aanvraag wordt verwerkt">
+*   Dit kan enkele minuten duren.
+* </Alert>
+*
+* // Positive
+* <Alert variant="positive" heading="Gelukt">
+*   Uw gegevens zijn opgeslagen.
+* </Alert>
+*
+* // Negative
+* <Alert variant="negative" heading="Er is een fout opgetreden">
+*   Controleer uw gegevens en probeer het opnieuw.
+* </Alert>
+*
+* // Warning
+* <Alert variant="warning" heading="Let op">
+*   Uw sessie verloopt over 5 minuten.
+* </Alert>
+*
+* // Zonder icoon
+* <Alert variant="info" heading="Opmerking" iconStart={null}>
+*   Aanvullende informatie.
+* </Alert>
+*
+* // Met aangepast icoon
+* <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
+*   Gebruik de zoekfunctie om snel te navigeren.
+* </Alert>
+*
+* // Variant-label onderdrukken (heading benoemt de variant al)
+* <Alert variant="negative" heading="Foutmelding" variantLabel="">
+*   Controleer uw gegevens.
+* </Alert>
+* ```
+*/
+const Alert = React.forwardRef(({ className, variant = "info", heading, headingLevel = 2, iconStart, variantLabel, children, ...props }, ref) => {
+	const noIcon = iconStart === null;
+	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-alert", variant !== "info" && `dsn-alert--${variant}`, noIcon && "dsn-alert--no-icon", className);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classes,
+		role: "alert",
+		...props,
+		children: [
+			!noIcon && /* @__PURE__ */ jsx("span", {
+				className: "dsn-alert__icon",
+				"aria-hidden": true,
+				children: resolvedIcon
+			}),
+			/* @__PURE__ */ jsxs(Heading, {
+				level: headingLevel,
+				appearance: "heading-3",
+				className: "dsn-alert__heading",
+				children: [resolvedVariantLabel && /* @__PURE__ */ jsx("span", {
+					className: "dsn-visually-hidden",
+					children: resolvedVariantLabel
+				}), heading]
+			}),
+			children && /* @__PURE__ */ jsx("div", {
+				className: "dsn-alert__content",
+				children
+			})
+		]
+	});
+});
+Alert.displayName = "Alert";
+//#endregion
+export { Alert };
+
+//# sourceMappingURL=Alert2.mjs.map

package/dist/Alert/Alert2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert2.mjs","names":[],"sources":["../../src/Alert/Alert.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport { Heading } from '../Heading';\nimport './Alert.css';\n\nexport type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';\n\nconst PREFERRED_ICONS: Record<AlertVariant, string> = {\n  info: 'info-circle',\n  positive: 'circle-check',\n  negative: 'exclamation-circle',\n  warning: 'alert-triangle',\n};\n\nconst VARIANT_LABELS: Record<AlertVariant, string> = {\n  info: 'Informatie: ',\n  positive: 'Succes: ',\n  negative: 'Foutmelding: ',\n  warning: 'Let op: ',\n};\n\nexport interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Semantische variant die de signaalkleur bepaalt\n   * @default 'info'\n   */\n  variant?: AlertVariant;\n\n  /**\n   * Koptekst van het bericht (verplicht)\n   */\n  heading: string;\n\n  /**\n   * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)\n   * @default 2\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 vóór de heading die de variant benoemt voor\n   * screenreadergebruikers (inclusief scheidingsteken en spatie).\n   * - `undefined` (default) — standaardtekst per variant:\n   *   `'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   * Optionele body content (tekst, lijst, links, etc.)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Alert component\n * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.\n *\n * @example\n * ```tsx\n * // Info (default)\n * <Alert heading=\"Uw aanvraag wordt verwerkt\">\n *   Dit kan enkele minuten duren.\n * </Alert>\n *\n * // Positive\n * <Alert variant=\"positive\" heading=\"Gelukt\">\n *   Uw gegevens zijn opgeslagen.\n * </Alert>\n *\n * // Negative\n * <Alert variant=\"negative\" heading=\"Er is een fout opgetreden\">\n *   Controleer uw gegevens en probeer het opnieuw.\n * </Alert>\n *\n * // Warning\n * <Alert variant=\"warning\" heading=\"Let op\">\n *   Uw sessie verloopt over 5 minuten.\n * </Alert>\n *\n * // Zonder icoon\n * <Alert variant=\"info\" heading=\"Opmerking\" iconStart={null}>\n *   Aanvullende informatie.\n * </Alert>\n *\n * // Met aangepast icoon\n * <Alert variant=\"info\" heading=\"Tip\" iconStart={<Icon name=\"star\" aria-hidden />}>\n *   Gebruik de zoekfunctie om snel te navigeren.\n * </Alert>\n *\n * // Variant-label onderdrukken (heading benoemt de variant al)\n * <Alert variant=\"negative\" heading=\"Foutmelding\" variantLabel=\"\">\n *   Controleer uw gegevens.\n * </Alert>\n * ```\n */\nexport const Alert = React.forwardRef<HTMLDivElement, AlertProps>(\n  (\n    {\n      className,\n      variant = 'info',\n      heading,\n      headingLevel = 2,\n      iconStart,\n      variantLabel,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const noIcon = iconStart === null;\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-alert',\n      variant !== 'info' && `dsn-alert--${variant}`,\n      noIcon && 'dsn-alert--no-icon',\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes} role=\"alert\" {...props}>\n        {!noIcon && (\n          <span className=\"dsn-alert__icon\" aria-hidden>\n            {resolvedIcon}\n          </span>\n        )}\n        <Heading\n          level={headingLevel}\n          appearance=\"heading-3\"\n          className=\"dsn-alert__heading\"\n        >\n          {resolvedVariantLabel && (\n            <span className=\"dsn-visually-hidden\">{resolvedVariantLabel}</span>\n          )}\n          {heading}\n        </Heading>\n        {children && <div className=\"dsn-alert__content\">{children}</div>}\n      </div>\n    );\n  }\n);\n\nAlert.displayName = 'Alert';\n"],"mappings":";;;;;;;AAQA,MAAM,kBAAgD;CACpD,MAAM;CACN,UAAU;CACV,UAAU;CACV,SAAS;AACX;AAEA,MAAM,iBAA+C;CACnD,MAAM;CACN,UAAU;CACV,UAAU;CACV,SAAS;AACX;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFA,MAAa,QAAQ,MAAM,YAEvB,EACE,WACA,UAAU,QACV,SACA,eAAe,GACf,WACA,cACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,SAAS,cAAc;CAC7B,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,aACA,YAAY,UAAU,cAAc,WACpC,UAAU,sBACV,SACF;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,MAAK;EAAQ,GAAI;EAApD,UAAA;GACG,CAAC,UACA,oBAAC,QAAD;IAAM,WAAU;IAAkB,eAAA;IAC/B,UAAA;GACG,CAAA;GAER,qBAAC,SAAD;IACE,OAAO;IACP,YAAW;IACX,WAAU;IAHZ,UAAA,CAKG,wBACC,oBAAC,QAAD;KAAM,WAAU;KAAuB,UAAA;IAA2B,CAAA,GAEnE,OACM;;GACR,YAAY,oBAAC,OAAD;IAAK,WAAU;IAAsB;GAAc,CAAA;EAC7D;;AAET,CACF;AAEA,MAAM,cAAc"}

package/dist/Alert/index.d.mts

@@ -0,0 +1,2 @@
+import { Alert, AlertProps, AlertVariant } from "./Alert.mjs";
+export { Alert, type AlertProps, type AlertVariant };

package/dist/Backdrop/Backdrop.d.mts

@@ -0,0 +1,28 @@
+import React from "react";
+//#region src/Backdrop/Backdrop.d.ts
+interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Schakelt het blur-filter in of uit.
+   * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.
+   * @default true
+   */
+  blur?: boolean;
+}
+/**
+ * Backdrop component
+ * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
+ * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
+ *
+ * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
+ * Conditioneel renderen vanuit de parent.
+ *
+ * @example
+ * ```tsx
+ * {isOpen && <Backdrop />}
+ * {isOpen && <Backdrop blur={false} />}
+ * ```
+ */
+declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Backdrop, BackdropProps };
+//# sourceMappingURL=Backdrop.d.mts.map

package/dist/Backdrop/Backdrop.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.d.mts","names":[],"sources":["../../src/Backdrop/Backdrop.tsx"],"mappings":";;UAIiB,sBAAsB,MAAM,eAAe;;;;;;EAM1D;;;;;;;;;;;;;;;;cAiBW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/Backdrop/Backdrop2.mjs

@@ -0,0 +1,32 @@
+/* empty css          */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Backdrop/Backdrop.tsx
+/**
+* Backdrop component
+* Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
+* wanneer een modaal UI-element open is (Modal Dialog, Drawer).
+*
+* Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
+* Conditioneel renderen vanuit de parent.
+*
+* @example
+* ```tsx
+* {isOpen && <Backdrop />}
+* {isOpen && <Backdrop blur={false} />}
+* ```
+*/
+const Backdrop = React.forwardRef(({ className, blur = true, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-backdrop", !blur && "dsn-backdrop--no-blur", className),
+		"aria-hidden": "true",
+		...props
+	});
+});
+Backdrop.displayName = "Backdrop";
+//#endregion
+export { Backdrop };
+
+//# sourceMappingURL=Backdrop2.mjs.map

package/dist/Backdrop/Backdrop2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop2.mjs","names":[],"sources":["../../src/Backdrop/Backdrop.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Backdrop.css';\n\nexport interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Schakelt het blur-filter in of uit.\n   * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.\n   * @default true\n   */\n  blur?: boolean;\n}\n\n/**\n * Backdrop component\n * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult\n * wanneer een modaal UI-element open is (Modal Dialog, Drawer).\n *\n * Altijd aria-hidden=\"true\" — puur decoratief, geen interactieve rol.\n * Conditioneel renderen vanuit de parent.\n *\n * @example\n * ```tsx\n * {isOpen && <Backdrop />}\n * {isOpen && <Backdrop blur={false} />}\n * ```\n */\nexport const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>(\n  ({ className, blur = true, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames(\n          'dsn-backdrop',\n          !blur && 'dsn-backdrop--no-blur',\n          className\n        )}\n        aria-hidden=\"true\"\n        {...props}\n      />\n    );\n  }\n);\n\nBackdrop.displayName = 'Backdrop';\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA2BA,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,OAAO,MAAM,GAAG,SAAS,QAAQ;CAC7C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WACT,gBACA,CAAC,QAAQ,yBACT,SACF;EACA,eAAY;EACZ,GAAI;CACL,CAAA;AAEL,CACF;AAEA,SAAS,cAAc"}

package/dist/Backdrop/index.d.mts

@@ -0,0 +1,2 @@
+import { Backdrop, BackdropProps } from "./Backdrop.mjs";
+export { Backdrop, type BackdropProps };

package/dist/Body/Body.d.mts

@@ -0,0 +1,29 @@
+import React from "react";
+//#region src/Body/Body.d.ts
+interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Child-elementen die de document-level stijlen erven
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Body component
+ * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
+ * automatisch de juiste typografie, kleur en achtergrond erven.
+ *
+ * @example
+ * ```tsx
+ * // In een applicatie: wrap de root-content
+ * <Body>
+ *   <h1>Mijn pagina</h1>
+ *   <p>Inhoud met geërfde stijlen</p>
+ * </Body>
+ *
+ * // Of pas de CSS class direct toe op het <body> element
+ * // <body class="dsn-body">
+ * ```
+ */
+declare const Body: React.ForwardRefExoticComponent<BodyProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Body, BodyProps };
+//# sourceMappingURL=Body.d.mts.map

package/dist/Body/Body.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body.d.mts","names":[],"sources":["../../src/Body/Body.tsx"],"mappings":";;UAIiB,kBAAkB,MAAM,eAAe;;;;EAItD,WAAW,MAAM;;;;;;;;;;;;;;;;;;;cAoBN,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}

package/dist/Body/Body2.mjs

@@ -0,0 +1,36 @@
+/* empty css      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Body/Body.tsx
+/**
+* Body component
+* Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen
+* automatisch de juiste typografie, kleur en achtergrond erven.
+*
+* @example
+* ```tsx
+* // In een applicatie: wrap de root-content
+* <Body>
+*   <h1>Mijn pagina</h1>
+*   <p>Inhoud met geërfde stijlen</p>
+* </Body>
+*
+* // Of pas de CSS class direct toe op het <body> element
+* // <body class="dsn-body">
+* ```
+*/
+const Body = React.forwardRef(({ className, children, ...props }, ref) => {
+	const classes = classNames("dsn-body", className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+Body.displayName = "Body";
+//#endregion
+export { Body };
+
+//# sourceMappingURL=Body2.mjs.map

package/dist/Body/Body2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Body2.mjs","names":[],"sources":["../../src/Body/Body.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Body.css';\n\nexport interface BodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Child-elementen die de document-level stijlen erven\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Body component\n * Stelt document-level CSS stijlen in via CSS inheritance zodat alle child-elementen\n * automatisch de juiste typografie, kleur en achtergrond erven.\n *\n * @example\n * ```tsx\n * // In een applicatie: wrap de root-content\n * <Body>\n *   <h1>Mijn pagina</h1>\n *   <p>Inhoud met geërfde stijlen</p>\n * </Body>\n *\n * // Of pas de CSS class direct toe op het <body> element\n * // <body class=\"dsn-body\">\n * ```\n */\nexport const Body = React.forwardRef<HTMLDivElement, BodyProps>(\n  ({ className, children, ...props }, ref) => {\n    const classes = classNames('dsn-body', className);\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nBody.displayName = 'Body';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA4BA,MAAa,OAAO,MAAM,YACvB,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,UAAU,WAAW,YAAY,SAAS;CAEhD,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EACpC;CACE,CAAA;AAET,CACF;AAEA,KAAK,cAAc"}

package/dist/Body/index.d.mts

@@ -0,0 +1,2 @@
+import { Body, BodyProps } from "./Body.mjs";
+export { Body, type BodyProps };

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.mts

@@ -0,0 +1,45 @@
+import React from "react";
+//#region src/BreadcrumbNavigation/BreadcrumbNavigation.d.ts
+interface BreadcrumbNavigationProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * Toegankelijke naam van het `<nav>` landmark
+   * @default "Broodkruimelpad"
+   */
+  'aria-label'?: string;
+  /**
+   * `"compact"` activeert container-query responsief gedrag:
+   * bij weinig ruimte wordt enkel het ouder-item met terug-pijl getoond
+   * @default "default"
+   */
+  variant?: 'default' | 'compact';
+  /**
+   * `BreadcrumbNavigationItem` elementen
+   */
+  children: React.ReactNode;
+}
+/**
+ * BreadcrumbNavigation component
+ * Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
+ * Plaatsen vóór `<main>`, na de primaire navigatie.
+ *
+ * @example
+ * ```tsx
+ * // Standaard
+ * <BreadcrumbNavigation aria-label="Broodkruimelpad">
+ *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>
+ * </BreadcrumbNavigation>
+ *
+ * // Compact variant
+ * <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
+ *   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+ *   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>
+ * </BreadcrumbNavigation>
+ * ```
+ */
+declare const BreadcrumbNavigation: React.ForwardRefExoticComponent<BreadcrumbNavigationProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { BreadcrumbNavigation, BreadcrumbNavigationProps };
+//# sourceMappingURL=BreadcrumbNavigation.d.mts.map

package/dist/BreadcrumbNavigation/BreadcrumbNavigation.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbNavigation.d.mts","names":[],"sources":["../../src/BreadcrumbNavigation/BreadcrumbNavigation.tsx"],"mappings":";;UAKiB,kCAAkC,MAAM,eAAe;;;;;EAKtE;;;;;;EAOA;;;;EAKA,UAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;cAyBL,sBAAoB,MAAA,0BAAA,4BAAA,MAAA,cAAA"}

package/dist/BreadcrumbNavigation/BreadcrumbNavigation2.mjs

@@ -0,0 +1,51 @@
+/* empty css                      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/BreadcrumbNavigation/BreadcrumbNavigation.tsx
+/**
+* BreadcrumbNavigation component
+* Toont de hiërarchische locatie van de gebruiker en biedt navigatie naar bovenliggende pagina's.
+* Plaatsen vóór `<main>`, na de primaire navigatie.
+*
+* @example
+* ```tsx
+* // Standaard
+* <BreadcrumbNavigation aria-label="Broodkruimelpad">
+*   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+*   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+*   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>
+* </BreadcrumbNavigation>
+*
+* // Compact variant
+* <BreadcrumbNavigation aria-label="Broodkruimelpad" variant="compact">
+*   <BreadcrumbNavigationItem href="/home">Home</BreadcrumbNavigationItem>
+*   <BreadcrumbNavigationItem href="/categorie">Categorie</BreadcrumbNavigationItem>
+*   <BreadcrumbNavigationItem current>Product</BreadcrumbNavigationItem>
+* </BreadcrumbNavigation>
+* ```
+*/
+const BreadcrumbNavigation = React.forwardRef(({ className, "aria-label": ariaLabel = "Broodkruimelpad", variant = "default", children, ...props }, ref) => {
+	const classes = classNames("dsn-breadcrumb-navigation", variant === "compact" && "dsn-breadcrumb-navigation--compact", className);
+	const childArray = React.Children.toArray(children);
+	const processedChildren = childArray.map((child, index) => {
+		if (!React.isValidElement(child)) return child;
+		if (variant === "compact" && index === childArray.length - 2) return React.cloneElement(child, { showBackIcon: true });
+		return child;
+	});
+	return /* @__PURE__ */ jsx("nav", {
+		ref,
+		className: classes,
+		"aria-label": ariaLabel,
+		...props,
+		children: /* @__PURE__ */ jsx("ol", {
+			className: "dsn-breadcrumb-navigation__list",
+			children: processedChildren
+		})
+	});
+});
+BreadcrumbNavigation.displayName = "BreadcrumbNavigation";
+//#endregion
+export { BreadcrumbNavigation };
+
+//# sourceMappingURL=BreadcrumbNavigation2.mjs.map