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

package/dist/NumberBadge/NumberBadge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge.d.mts","names":[],"sources":["../../src/NumberBadge/NumberBadge.tsx"],"mappings":";;KAIY;UAOK,yBAAyB,MAAM,eAAe;;;;;EAK7D,UAAU;;;;;EAMV;;;;;;;;;;;;;;;;;;;;;;;;;;;cA4BW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/NumberBadge/NumberBadge2.mjs

@@ -0,0 +1,50 @@
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/NumberBadge/NumberBadge.tsx
+/**
+* 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>
+* ```
+*/
+const NumberBadge = React.forwardRef(({ className, variant = "negative", maxCount, children, ...props }, ref) => {
+	const classes = classNames("dsn-number-badge", `dsn-number-badge--${variant}`, className);
+	let displayValue = children;
+	if (maxCount !== void 0) {
+		const numeric = typeof children === "number" ? children : typeof children === "string" && /^\d+$/.test(children) ? parseInt(children, 10) : null;
+		if (numeric !== null && numeric > maxCount) displayValue = `${maxCount}+`;
+	}
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: classes,
+		"aria-hidden": "true",
+		...props,
+		children: displayValue
+	});
+});
+NumberBadge.displayName = "NumberBadge";
+//#endregion
+export { NumberBadge };
+
+//# sourceMappingURL=NumberBadge2.mjs.map

package/dist/NumberBadge/NumberBadge2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberBadge2.mjs","names":[],"sources":["../../src/NumberBadge/NumberBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './NumberBadge.css';\n\nexport type NumberBadgeVariant =\n  | 'negative'\n  | 'positive'\n  | 'warning'\n  | 'info'\n  | 'neutral';\n\nexport interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Signaalkleur van de badge\n   * @default 'negative'\n   */\n  variant?: NumberBadgeVariant;\n\n  /**\n   * Als `children` als getal groter is dan `maxCount`, wordt `{maxCount}+` getoond.\n   * Heeft geen effect als `children` geen getal is.\n   */\n  maxCount?: number;\n}\n\n/**\n * NumberBadge component\n * Compact inline-element dat een getal toont — zoals het aantal ongelezen berichten\n * of openstaande taken. Geplaatst binnen een Button of Menu-item, naast het label.\n *\n * Altijd aria-hidden=\"true\" — context via dsn-visually-hidden in de parent.\n *\n * @example\n * ```tsx\n * // Basis gebruik — inline in een Button\n * <Button variant=\"subtle\" iconStart={<Icon name=\"inbox\" aria-hidden />}>\n *   Inbox\n *   <NumberBadge variant=\"negative\">5</NumberBadge>\n * </Button>\n *\n * // Afgekapt getal — toont \"99+\" als count > 99\n * <Button variant=\"subtle\" iconStart={<Icon name=\"inbox\" aria-hidden />}>\n *   <span>\n *     Inbox\n *     <span className=\"dsn-visually-hidden\">, 128 ongelezen berichten</span>\n *   </span>\n *   <NumberBadge variant=\"negative\" maxCount={99}>128</NumberBadge>\n * </Button>\n * ```\n */\nexport const NumberBadge = React.forwardRef<HTMLSpanElement, NumberBadgeProps>(\n  ({ className, variant = 'negative', maxCount, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-number-badge',\n      `dsn-number-badge--${variant}`,\n      className\n    );\n\n    let displayValue: React.ReactNode = children;\n    if (maxCount !== undefined) {\n      const numeric =\n        typeof children === 'number'\n          ? children\n          : typeof children === 'string' && /^\\d+$/.test(children)\n            ? parseInt(children, 10)\n            : null;\n      if (numeric !== null && numeric > maxCount) {\n        displayValue = `${maxCount}+`;\n      }\n    }\n\n    return (\n      <span ref={ref} className={classes} aria-hidden=\"true\" {...props}>\n        {displayValue}\n      </span>\n    );\n  }\n);\n\nNumberBadge.displayName = 'NumberBadge';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,UAAU,YAAY,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC1E,MAAM,UAAU,WACd,oBACA,qBAAqB,WACrB,SACF;CAEA,IAAI,eAAgC;CACpC,IAAI,aAAa,KAAA,GAAW;EAC1B,MAAM,UACJ,OAAO,aAAa,WAChB,WACA,OAAO,aAAa,YAAY,QAAQ,KAAK,QAAQ,IACnD,SAAS,UAAU,EAAE,IACrB;EACR,IAAI,YAAY,QAAQ,UAAU,UAChC,eAAe,GAAG,SAAS;CAE/B;CAEA,OACE,oBAAC,QAAD;EAAW;EAAK,WAAW;EAAS,eAAY;EAAO,GAAI;EACxD,UAAA;CACG,CAAA;AAEV,CACF;AAEA,YAAY,cAAc"}

package/dist/NumberBadge/index.d.mts

@@ -0,0 +1,2 @@
+import { NumberBadge, NumberBadgeProps, NumberBadgeVariant } from "./NumberBadge.mjs";
+export { NumberBadge, NumberBadgeProps, NumberBadgeVariant };

package/dist/NumberInput/NumberInput.d.mts

@@ -0,0 +1,47 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/NumberInput/NumberInput.d.ts
+interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Width variant for the input
+   * @default undefined (uses default max-width from form-control)
+   */
+  width?: FormControlWidth;
+  /**
+   * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:
+   * inputmode="numeric" + pattern="[0-9]*" for a numeric-only keyboard.
+   * When true, uses inputmode="decimal" without pattern restriction.
+   * @default false
+   */
+  allowDecimals?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+}
+/**
+ * Number Input component
+ * Uses type="text" with inputmode="decimal" for better mobile UX (no spinner buttons)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <NumberInput placeholder="0,00" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="amount">Bedrag</FormFieldLabel>
+ * <NumberInput id="amount" />
+ *
+ * // Invalid state
+ * <NumberInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { NumberInput, NumberInputProps };
+//# sourceMappingURL=NumberInput.d.mts.map

package/dist/NumberInput/NumberInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.d.mts","names":[],"sources":["../../src/NumberInput/NumberInput.tsx"],"mappings":";;;UAIiB,yBAAyB,KACxC,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,QAAQ;;;;;;;EAQR;;;;EAKA;;;;;;;;;;;;;;;;;;;cAoBW,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/NumberInput/NumberInput.mjs

@@ -0,0 +1,40 @@
+/* empty css                      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/NumberInput/NumberInput.tsx
+/**
+* Number Input component
+* Uses type="text" with inputmode="decimal" for better mobile UX (no spinner buttons)
+*
+* @example
+* ```tsx
+* // Basic usage
+* <NumberInput placeholder="0,00" />
+*
+* // With label
+* <FormFieldLabel htmlFor="amount">Bedrag</FormFieldLabel>
+* <NumberInput id="amount" />
+*
+* // Invalid state
+* <NumberInput invalid aria-invalid="true" aria-describedby="error" />
+* ```
+*/
+const NumberInput = React.forwardRef(({ className, invalid, width, allowDecimals = false, ...props }, ref) => {
+	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "text",
+		inputMode: allowDecimals ? "decimal" : "numeric",
+		pattern: allowDecimals ? void 0 : "[0-9]*",
+		className: classes,
+		"aria-invalid": invalid || void 0,
+		autoComplete: "off",
+		...props
+	});
+});
+NumberInput.displayName = "NumberInput";
+//#endregion
+export { NumberInput };
+
+//# sourceMappingURL=NumberInput.mjs.map

package/dist/NumberInput/NumberInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberInput.mjs","names":[],"sources":["../../src/NumberInput/NumberInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport interface NumberInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:\n   * inputmode=\"numeric\" + pattern=\"[0-9]*\" for a numeric-only keyboard.\n   * When true, uses inputmode=\"decimal\" without pattern restriction.\n   * @default false\n   */\n  allowDecimals?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Number Input component\n * Uses type=\"text\" with inputmode=\"decimal\" for better mobile UX (no spinner buttons)\n *\n * @example\n * ```tsx\n * // Basic usage\n * <NumberInput placeholder=\"0,00\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"amount\">Bedrag</FormFieldLabel>\n * <NumberInput id=\"amount\" />\n *\n * // Invalid state\n * <NumberInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(\n  ({ className, invalid, width, allowDecimals = false, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"text\"\n        inputMode={allowDecimals ? 'decimal' : 'numeric'}\n        pattern={allowDecimals ? undefined : '[0-9]*'}\n        className={classes}\n        aria-invalid={invalid || undefined}\n        autoComplete=\"off\"\n        {...props}\n      />\n    );\n  }\n);\n\nNumberInput.displayName = 'NumberInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmDA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,SAAS,OAAO,gBAAgB,OAAO,GAAG,SAAS,QAAQ;CACvE,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW,gBAAgB,YAAY;EACvC,SAAS,gBAAgB,KAAA,IAAY;EACrC,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,cAAa;EACb,GAAI;CACL,CAAA;AAEL,CACF;AAEA,YAAY,cAAc"}

package/dist/NumberInput/index.d.mts

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

package/dist/OptionLabel/OptionLabel.d.mts

@@ -0,0 +1,15 @@
+import React from "react";
+//#region src/OptionLabel/OptionLabel.d.ts
+interface OptionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Whether the label is for a disabled input
+   */
+  disabled?: boolean;
+}
+/**
+ * Label component for checkbox and radio button options
+ */
+declare const OptionLabel: React.ForwardRefExoticComponent<OptionLabelProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { OptionLabel, OptionLabelProps };
+//# sourceMappingURL=OptionLabel.d.mts.map

package/dist/OptionLabel/OptionLabel.d.mts.map

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

package/dist/OptionLabel/OptionLabel2.mjs

@@ -0,0 +1,22 @@
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/OptionLabel/OptionLabel.tsx
+/**
+* Label component for checkbox and radio button options
+*/
+const OptionLabel = React.forwardRef(({ disabled, className, children, ...props }, ref) => {
+	const classes = classNames("dsn-option-label", disabled && "dsn-option-label--disabled", className);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+OptionLabel.displayName = "OptionLabel";
+//#endregion
+export { OptionLabel };
+
+//# sourceMappingURL=OptionLabel2.mjs.map

package/dist/OptionLabel/OptionLabel2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OptionLabel2.mjs","names":[],"sources":["../../src/OptionLabel/OptionLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './OptionLabel.css';\n\nexport interface OptionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Whether the label is for a disabled input\n   */\n  disabled?: boolean;\n}\n\n/**\n * Label component for checkbox and radio button options\n */\nexport const OptionLabel = React.forwardRef<HTMLSpanElement, OptionLabelProps>(\n  ({ disabled, className, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-option-label',\n      disabled && 'dsn-option-label--disabled',\n      className\n    );\n\n    return (\n      <span ref={ref} className={classes} {...props}>\n        {children}\n      </span>\n    );\n  }\n);\n\nOptionLabel.displayName = 'OptionLabel';\n"],"mappings":";;;;;;;;AAcA,MAAa,cAAc,MAAM,YAC9B,EAAE,UAAU,WAAW,UAAU,GAAG,SAAS,QAAQ;CACpD,MAAM,UAAU,WACd,oBACA,YAAY,8BACZ,SACF;CAEA,OACE,oBAAC,QAAD;EAAW;EAAK,WAAW;EAAS,GAAI;EACrC;CACG,CAAA;AAEV,CACF;AAEA,YAAY,cAAc"}

package/dist/OptionLabel/index.d.mts

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

package/dist/OrderedList/OrderedList.d.mts

@@ -0,0 +1,34 @@
+import React from "react";
+//#region src/OrderedList/OrderedList.d.ts
+interface OrderedListProps extends React.OlHTMLAttributes<HTMLOListElement> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * List content (li elements)
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Ordered list component with numbered markers
+ *
+ * @example
+ * ```tsx
+ * <OrderedList>
+ *   <li>First step</li>
+ *   <li>Second step</li>
+ *   <li>Third step</li>
+ * </OrderedList>
+ *
+ * // Starting from a specific number
+ * <OrderedList start={5}>
+ *   <li>Fifth step</li>
+ *   <li>Sixth step</li>
+ * </OrderedList>
+ * ```
+ */
+declare const OrderedList: React.ForwardRefExoticComponent<OrderedListProps & React.RefAttributes<HTMLOListElement>>;
+//#endregion
+export { OrderedList, OrderedListProps };
+//# sourceMappingURL=OrderedList.d.mts.map

package/dist/OrderedList/OrderedList.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.d.mts","names":[],"sources":["../../src/OrderedList/OrderedList.tsx"],"mappings":";;UAIiB,yBAAyB,MAAM,iBAAiB;;;;EAI/D;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;cAqBN,aAAW,MAAA,0BAAA,mBAAA,MAAA,cAAA"}

package/dist/OrderedList/OrderedList2.mjs

@@ -0,0 +1,37 @@
+/* empty css             */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/OrderedList/OrderedList.tsx
+/**
+* Ordered list component with numbered markers
+*
+* @example
+* ```tsx
+* <OrderedList>
+*   <li>First step</li>
+*   <li>Second step</li>
+*   <li>Third step</li>
+* </OrderedList>
+*
+* // Starting from a specific number
+* <OrderedList start={5}>
+*   <li>Fifth step</li>
+*   <li>Sixth step</li>
+* </OrderedList>
+* ```
+*/
+const OrderedList = React.forwardRef(({ className, children, ...props }, ref) => {
+	const classes = classNames("dsn-ordered-list", className);
+	return /* @__PURE__ */ jsx("ol", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+OrderedList.displayName = "OrderedList";
+//#endregion
+export { OrderedList };
+
+//# sourceMappingURL=OrderedList2.mjs.map

package/dist/OrderedList/OrderedList2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList2.mjs","names":[],"sources":["../../src/OrderedList/OrderedList.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './OrderedList.css';\n\nexport interface OrderedListProps extends React.OlHTMLAttributes<HTMLOListElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * List content (li elements)\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Ordered list component with numbered markers\n *\n * @example\n * ```tsx\n * <OrderedList>\n *   <li>First step</li>\n *   <li>Second step</li>\n *   <li>Third step</li>\n * </OrderedList>\n *\n * // Starting from a specific number\n * <OrderedList start={5}>\n *   <li>Fifth step</li>\n *   <li>Sixth step</li>\n * </OrderedList>\n * ```\n */\nexport const OrderedList = React.forwardRef<HTMLOListElement, OrderedListProps>(\n  ({ className, children, ...props }, ref) => {\n    const classes = classNames('dsn-ordered-list', className);\n\n    return (\n      <ol ref={ref} className={classes} {...props}>\n        {children}\n      </ol>\n    );\n  }\n);\n\nOrderedList.displayName = 'OrderedList';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAa,cAAc,MAAM,YAC9B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,UAAU,WAAW,oBAAoB,SAAS;CAExD,OACE,oBAAC,MAAD;EAAS;EAAK,WAAW;EAAS,GAAI;EACnC;CACC,CAAA;AAER,CACF;AAEA,YAAY,cAAc"}

package/dist/OrderedList/index.d.mts

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

package/dist/PageBody/PageBody.d.mts

@@ -0,0 +1,35 @@
+import React from "react";
+//#region src/PageBody/PageBody.d.ts
+interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * De paginainhoud: doorgaans een `<main>` element met `id="main-content"`.
+   */
+  children: React.ReactNode;
+  /**
+   * Extra CSS-klassen
+   */
+  className?: string;
+}
+/**
+ * PageBody component
+ * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare
+ * verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan
+ * de viewport staat (sticky footer patroon via `flex: 1`).
+ *
+ * @example
+ * ```tsx
+ * <PageLayout>
+ *   <PageHeader logoSlot={<Logo />} />
+ *   <PageBody>
+ *     <main id="main-content" tabIndex={-1}>
+ *       <Container>...</Container>
+ *     </main>
+ *   </PageBody>
+ *   <PageFooter slot1={<Logo />} />
+ * </PageLayout>
+ * ```
+ */
+declare const PageBody: React.ForwardRefExoticComponent<PageBodyProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { PageBody, PageBodyProps };
+//# sourceMappingURL=PageBody.d.mts.map

package/dist/PageBody/PageBody.d.mts.map

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

package/dist/PageBody/PageBody2.mjs

@@ -0,0 +1,40 @@
+/* empty css          */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/PageBody/PageBody.tsx
+/**
+* PageBody component
+* Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare
+* verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan
+* de viewport staat (sticky footer patroon via `flex: 1`).
+*
+* @example
+* ```tsx
+* <PageLayout>
+*   <PageHeader logoSlot={<Logo />} />
+*   <PageBody>
+*     <main id="main-content" tabIndex={-1}>
+*       <Container>...</Container>
+*     </main>
+*   </PageBody>
+*   <PageFooter slot1={<Logo />} />
+* </PageLayout>
+* ```
+*/
+const PageBody = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-page-body", className),
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "dsn-page-body__inner",
+			children
+		})
+	});
+});
+PageBody.displayName = "PageBody";
+//#endregion
+export { PageBody };
+
+//# sourceMappingURL=PageBody2.mjs.map

package/dist/PageBody/PageBody2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageBody2.mjs","names":[],"sources":["../../src/PageBody/PageBody.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './PageBody.css';\n\nexport interface PageBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De paginainhoud: doorgaans een `<main>` element met `id=\"main-content\"`.\n   */\n  children: React.ReactNode;\n\n  /**\n   * Extra CSS-klassen\n   */\n  className?: string;\n}\n\n/**\n * PageBody component\n * Structurele wrapper voor de hoofdinhoud van een pagina. Vult de beschikbare\n * verticale ruimte op binnen `PageLayout` zodat `PageFooter` altijd onderaan\n * de viewport staat (sticky footer patroon via `flex: 1`).\n *\n * @example\n * ```tsx\n * <PageLayout>\n *   <PageHeader logoSlot={<Logo />} />\n *   <PageBody>\n *     <main id=\"main-content\" tabIndex={-1}>\n *       <Container>...</Container>\n *     </main>\n *   </PageBody>\n *   <PageFooter slot1={<Logo />} />\n * </PageLayout>\n * ```\n */\nexport const PageBody = React.forwardRef<HTMLDivElement, PageBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-page-body', className)}\n        {...props}\n      >\n        <div className=\"dsn-page-body__inner\">{children}</div>\n      </div>\n    );\n  }\n);\n\nPageBody.displayName = 'PageBody';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAmCA,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,iBAAiB,SAAS;EAChD,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAU;GAAwB;EAAc,CAAA;CAClD,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/PageBody/index.d.mts

@@ -0,0 +1,2 @@
+import { PageBody, PageBodyProps } from "./PageBody.mjs";
+export { PageBody, PageBodyProps };

package/dist/PageFooter/PageFooter.d.mts

@@ -0,0 +1,57 @@
+import React from "react";
+//#region src/PageFooter/PageFooter.d.ts
+type PageFooterColorScheme = 'default' | 'inverse';
+interface PageFooterProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children'> {
+  /** Kolom 1 (inline-start). Doorgaans het organisatielogo in een `<a>`. */
+  slot1?: React.ReactNode;
+  /** Kolom 2. Optioneel — wordt niet gerenderd als weggelaten. */
+  slot2?: React.ReactNode;
+  /** Kolom 3. Vrije inhoud: navigatielinks, tekst, adressen, etc. */
+  slot3?: React.ReactNode;
+  /** Kolom 4 (inline-end). Vrije inhoud: juridische links, social media, etc. */
+  slot4?: React.ReactNode;
+  /**
+   * Kleurschema van de footer.
+   * - `default`: accent-1 achtergrond (`bg-default`)
+   * - `inverse`: accent-1-inverse achtergrond voor een donkere huisstijlvariant
+   * @default 'default'
+   */
+  colorScheme?: PageFooterColorScheme;
+}
+/**
+ * PageFooter component
+ * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en
+ * een 4-koloms grid. Responsief: verticale stapeling op mobiel,
+ * vier gelijke kolommen op grote viewports (≥ 64em).
+ *
+ * Het `<footer>` element als directe afstammeling van `<body>` heeft
+ * impliciet `role="contentinfo"` — geen extra attribuut nodig.
+ *
+ * @example
+ * ```tsx
+ * <PageFooter
+ *   slot1={
+ *     <a href="/">
+ *       <Logo aria-hidden={true} />
+ *       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ *     </a>
+ *   }
+ *   slot3={
+ *     <UnorderedList>
+ *       <li><Link href="/nieuws">Nieuws</Link></li>
+ *       <li><Link href="/over-ons">Over ons</Link></li>
+ *     </UnorderedList>
+ *   }
+ *   slot4={
+ *     <UnorderedList>
+ *       <li><Link href="/privacy">Privacyverklaring</Link></li>
+ *       <li><Link href="/accessibility">Toegankelijkheid</Link></li>
+ *     </UnorderedList>
+ *   }
+ * />
+ * ```
+ */
+declare const PageFooter: React.ForwardRefExoticComponent<PageFooterProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { PageFooter, PageFooterColorScheme, PageFooterProps };
+//# sourceMappingURL=PageFooter.d.mts.map

package/dist/PageFooter/PageFooter.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter.d.mts","names":[],"sources":["../../src/PageFooter/PageFooter.tsx"],"mappings":";;KAMY;UAEK,wBAAwB,KACvC,MAAM,eAAe;;EAIrB,QAAQ,MAAM;;EAGd,QAAQ,MAAM;;EAGd,QAAQ,MAAM;;EAGd,QAAQ,MAAM;;;;;;;EAQd,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAoCH,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/PageFooter/PageFooter2.mjs

@@ -0,0 +1,78 @@
+import { Grid } from "../Grid/Grid2.mjs";
+import { GridItem } from "../Grid/GridItem.mjs";
+/* empty css            */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/PageFooter/PageFooter.tsx
+/**
+* PageFooter component
+* Paginavoettekst met accent-1 achtergrond, dikke border-block-start en
+* een 4-koloms grid. Responsief: verticale stapeling op mobiel,
+* vier gelijke kolommen op grote viewports (≥ 64em).
+*
+* Het `<footer>` element als directe afstammeling van `<body>` heeft
+* impliciet `role="contentinfo"` — geen extra attribuut nodig.
+*
+* @example
+* ```tsx
+* <PageFooter
+*   slot1={
+*     <a href="/">
+*       <Logo aria-hidden={true} />
+*       <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+*     </a>
+*   }
+*   slot3={
+*     <UnorderedList>
+*       <li><Link href="/nieuws">Nieuws</Link></li>
+*       <li><Link href="/over-ons">Over ons</Link></li>
+*     </UnorderedList>
+*   }
+*   slot4={
+*     <UnorderedList>
+*       <li><Link href="/privacy">Privacyverklaring</Link></li>
+*       <li><Link href="/accessibility">Toegankelijkheid</Link></li>
+*     </UnorderedList>
+*   }
+* />
+* ```
+*/
+const PageFooter = React.forwardRef(({ className, slot1, slot2, slot3, slot4, colorScheme = "default", ...props }, ref) => {
+	const classes = classNames("dsn-page-footer", colorScheme === "inverse" && "dsn-page-footer--inverse", className);
+	return /* @__PURE__ */ jsx("footer", {
+		ref,
+		className: classes,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "dsn-page-footer__inner",
+			children: /* @__PURE__ */ jsxs(Grid, { children: [
+				slot1 && /* @__PURE__ */ jsx(GridItem, {
+					colSpan: 12,
+					colSpanLg: 3,
+					children: slot1
+				}),
+				slot2 && /* @__PURE__ */ jsx(GridItem, {
+					colSpan: 12,
+					colSpanLg: 3,
+					children: slot2
+				}),
+				slot3 && /* @__PURE__ */ jsx(GridItem, {
+					colSpan: 12,
+					colSpanLg: 3,
+					children: slot3
+				}),
+				slot4 && /* @__PURE__ */ jsx(GridItem, {
+					colSpan: 12,
+					colSpanLg: 3,
+					children: slot4
+				})
+			] })
+		})
+	});
+});
+PageFooter.displayName = "PageFooter";
+//#endregion
+export { PageFooter };
+
+//# sourceMappingURL=PageFooter2.mjs.map

package/dist/PageFooter/PageFooter2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageFooter2.mjs","names":[],"sources":["../../src/PageFooter/PageFooter.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Grid } from '../Grid';\nimport { GridItem } from '../Grid';\nimport './PageFooter.css';\n\nexport type PageFooterColorScheme = 'default' | 'inverse';\n\nexport interface PageFooterProps extends Omit<\n  React.HTMLAttributes<HTMLElement>,\n  'children'\n> {\n  /** Kolom 1 (inline-start). Doorgaans het organisatielogo in een `<a>`. */\n  slot1?: React.ReactNode;\n\n  /** Kolom 2. Optioneel — wordt niet gerenderd als weggelaten. */\n  slot2?: React.ReactNode;\n\n  /** Kolom 3. Vrije inhoud: navigatielinks, tekst, adressen, etc. */\n  slot3?: React.ReactNode;\n\n  /** Kolom 4 (inline-end). Vrije inhoud: juridische links, social media, etc. */\n  slot4?: React.ReactNode;\n\n  /**\n   * Kleurschema van de footer.\n   * - `default`: accent-1 achtergrond (`bg-default`)\n   * - `inverse`: accent-1-inverse achtergrond voor een donkere huisstijlvariant\n   * @default 'default'\n   */\n  colorScheme?: PageFooterColorScheme;\n}\n\n/**\n * PageFooter component\n * Paginavoettekst met accent-1 achtergrond, dikke border-block-start en\n * een 4-koloms grid. Responsief: verticale stapeling op mobiel,\n * vier gelijke kolommen op grote viewports (≥ 64em).\n *\n * Het `<footer>` element als directe afstammeling van `<body>` heeft\n * impliciet `role=\"contentinfo\"` — geen extra attribuut nodig.\n *\n * @example\n * ```tsx\n * <PageFooter\n *   slot1={\n *     <a href=\"/\">\n *       <Logo aria-hidden={true} />\n *       <span className=\"dsn-visually-hidden\">Starter Kit — terug naar homepage</span>\n *     </a>\n *   }\n *   slot3={\n *     <UnorderedList>\n *       <li><Link href=\"/nieuws\">Nieuws</Link></li>\n *       <li><Link href=\"/over-ons\">Over ons</Link></li>\n *     </UnorderedList>\n *   }\n *   slot4={\n *     <UnorderedList>\n *       <li><Link href=\"/privacy\">Privacyverklaring</Link></li>\n *       <li><Link href=\"/accessibility\">Toegankelijkheid</Link></li>\n *     </UnorderedList>\n *   }\n * />\n * ```\n */\nexport const PageFooter = React.forwardRef<HTMLElement, PageFooterProps>(\n  (\n    {\n      className,\n      slot1,\n      slot2,\n      slot3,\n      slot4,\n      colorScheme = 'default',\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-page-footer',\n      colorScheme === 'inverse' && 'dsn-page-footer--inverse',\n      className\n    );\n\n    return (\n      <footer ref={ref} className={classes} {...props}>\n        <div className=\"dsn-page-footer__inner\">\n          <Grid>\n            {slot1 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot1}\n              </GridItem>\n            )}\n            {slot2 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot2}\n              </GridItem>\n            )}\n            {slot3 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot3}\n              </GridItem>\n            )}\n            {slot4 && (\n              <GridItem colSpan={12} colSpanLg={3}>\n                {slot4}\n              </GridItem>\n            )}\n          </Grid>\n        </div>\n      </footer>\n    );\n  }\n);\n\nPageFooter.displayName = 'PageFooter';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,MAAa,aAAa,MAAM,YAE5B,EACE,WACA,OACA,OACA,OACA,OACA,cAAc,WACd,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,mBACA,gBAAgB,aAAa,4BAC7B,SACF;CAEA,OACE,oBAAC,UAAD;EAAa;EAAK,WAAW;EAAS,GAAI;EACxC,UAAA,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,qBAAC,MAAD,EAAA,UAAA;IACG,SACC,oBAAC,UAAD;KAAU,SAAS;KAAI,WAAW;KAC/B,UAAA;IACO,CAAA;IAEX,SACC,oBAAC,UAAD;KAAU,SAAS;KAAI,WAAW;KAC/B,UAAA;IACO,CAAA;IAEX,SACC,oBAAC,UAAD;KAAU,SAAS;KAAI,WAAW;KAC/B,UAAA;IACO,CAAA;IAEX,SACC,oBAAC,UAAD;KAAU,SAAS;KAAI,WAAW;KAC/B,UAAA;IACO,CAAA;GAER,EAAA,CAAA;EACH,CAAA;CACC,CAAA;AAEZ,CACF;AAEA,WAAW,cAAc"}

package/dist/PageFooter/index.d.mts

@@ -0,0 +1,2 @@
+import { PageFooter, PageFooterColorScheme, PageFooterProps } from "./PageFooter.mjs";
+export { PageFooter, PageFooterColorScheme, PageFooterProps };