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

package/dist/DateInput/DateInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.mts","names":[],"sources":["../../src/DateInput/DateInput.tsx"],"mappings":";;UAOiB,uBAAuB,KACtC,MAAM,oBAAoB;;;;;EAO1B;;;;EAKA;;;;;;;;;;;;;;;;;;;;;;;cAwBW,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/DateInput/DateInput2.mjs

@@ -0,0 +1,69 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import { Button } from "../Button/Button2.mjs";
+/* empty css                      */
+/* empty css           */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/DateInput/DateInput.tsx
+/**
+* Date Input component
+* Date input with an interactive calendar button at inline-end that opens the native date picker.
+* Fixed width (sm) — not configurable, as date inputs have a predictable content width.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <DateInput />
+*
+* // With label
+* <FormFieldLabel htmlFor="date">Datum</FormFieldLabel>
+* <DateInput id="date" />
+*
+* // With default value
+* <DateInput defaultValue="2025-03-15" />
+*
+* // Invalid state
+* <DateInput invalid aria-invalid="true" aria-describedby="error" />
+* ```
+*/
+const DateInput = React.forwardRef(({ className, invalid, disabled, readOnly, ...props }, ref) => {
+	const inputRef = React.useRef(null);
+	const handleRef = React.useCallback((node) => {
+		inputRef.current = node;
+		if (typeof ref === "function") ref(node);
+		else if (ref) ref.current = node;
+	}, [ref]);
+	const handleButtonClick = () => {
+		if (inputRef.current && "showPicker" in inputRef.current) inputRef.current.showPicker();
+	};
+	const inputClasses = classNames("dsn-text-input", "dsn-date-input", className);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "dsn-date-input-wrapper",
+		children: [/* @__PURE__ */ jsx("input", {
+			ref: handleRef,
+			type: "date",
+			className: inputClasses,
+			"aria-invalid": invalid || void 0,
+			disabled,
+			readOnly,
+			...props
+		}), !disabled && !readOnly && /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			size: "small",
+			iconOnly: true,
+			iconStart: /* @__PURE__ */ jsx(Icon, {
+				name: "calendar-event",
+				"aria-hidden": true
+			}),
+			className: "dsn-date-input__button",
+			onClick: handleButtonClick,
+			children: "Datumkiezer openen"
+		})]
+	});
+});
+DateInput.displayName = "DateInput";
+//#endregion
+export { DateInput };
+
+//# sourceMappingURL=DateInput2.mjs.map

package/dist/DateInput/DateInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput2.mjs","names":[],"sources":["../../src/DateInput/DateInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport '../TextInput/TextInput.css';\nimport './DateInput.css';\n\nexport interface DateInputProps 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   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Date Input component\n * Date input with an interactive calendar button at inline-end that opens the native date picker.\n * Fixed width (sm) — not configurable, as date inputs have a predictable content width.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"date\">Datum</FormFieldLabel>\n * <DateInput id=\"date\" />\n *\n * // With default value\n * <DateInput defaultValue=\"2025-03-15\" />\n *\n * // Invalid state\n * <DateInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(\n  ({ className, invalid, disabled, readOnly, ...props }, ref) => {\n    const inputRef = React.useRef<HTMLInputElement>(null);\n\n    // Merge external ref with internal ref\n    const handleRef = React.useCallback(\n      (node: HTMLInputElement | null) => {\n        (inputRef as React.MutableRefObject<HTMLInputElement | null>).current =\n          node;\n        if (typeof ref === 'function') {\n          ref(node);\n        } else if (ref) {\n          (ref as React.MutableRefObject<HTMLInputElement | null>).current =\n            node;\n        }\n      },\n      [ref]\n    );\n\n    const handleButtonClick = () => {\n      if (inputRef.current && 'showPicker' in inputRef.current) {\n        inputRef.current.showPicker();\n      }\n    };\n\n    const inputClasses = classNames(\n      'dsn-text-input',\n      'dsn-date-input',\n      className\n    );\n\n    return (\n      <div className=\"dsn-date-input-wrapper\">\n        <input\n          ref={handleRef}\n          type=\"date\"\n          className={inputClasses}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          readOnly={readOnly}\n          {...props}\n        />\n        {!disabled && !readOnly && (\n          <Button\n            variant=\"subtle\"\n            size=\"small\"\n            iconOnly\n            iconStart={<Icon name=\"calendar-event\" aria-hidden />}\n            className=\"dsn-date-input__button\"\n            onClick={handleButtonClick}\n          >\n            Datumkiezer openen\n          </Button>\n        )}\n      </div>\n    );\n  }\n);\n\nDateInput.displayName = 'DateInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,UAAU,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,WAAW,MAAM,OAAyB,IAAI;CAGpD,MAAM,YAAY,MAAM,aACrB,SAAkC;EACjC,SAA8D,UAC5D;EACF,IAAI,OAAO,QAAQ,YACjB,IAAI,IAAI;OACH,IAAI,KACT,IAAyD,UACvD;CAEN,GACA,CAAC,GAAG,CACN;CAEA,MAAM,0BAA0B;EAC9B,IAAI,SAAS,WAAW,gBAAgB,SAAS,SAC/C,SAAS,QAAQ,WAAW;CAEhC;CAEA,MAAM,eAAe,WACnB,kBACA,kBACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,oBAAC,SAAD;GACE,KAAK;GACL,MAAK;GACL,WAAW;GACX,gBAAc,WAAW,KAAA;GACf;GACA;GACV,GAAI;EACL,CAAA,GACA,CAAC,YAAY,CAAC,YACb,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAiB,eAAA;GAAa,CAAA;GACpD,WAAU;GACV,SAAS;GACV,UAAA;EAEO,CAAA,CAEP;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/DateInput/index.d.mts

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

package/dist/DateInputGroup/DateInputGroup.d.mts

@@ -0,0 +1,67 @@
+import React from "react";
+//#region src/DateInputGroup/DateInputGroup.d.ts
+interface DateInputGroupValue {
+  day: string;
+  month: string;
+  year: string;
+}
+interface DateInputGroupProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+  /**
+   * The current value of the date group
+   */
+  value?: DateInputGroupValue;
+  /**
+   * Called when any field changes, with the full updated value object
+   */
+  onChange?: (value: DateInputGroupValue) => void;
+  /**
+   * Whether all fields are in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+  /**
+   * Whether all fields are disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * id prefix used to generate unique ids for each field (dag, maand, jaar)
+   * E.g. id="geboortedatum" → "geboortedatum-dag", "geboortedatum-maand", "geboortedatum-jaar"
+   */
+  id?: string;
+}
+/**
+ * Date Input Group component
+ * Three separate inputs for day, month and year.
+ * More accessible than a native date picker: works consistently across all browsers and
+ * devices, and allows partial input (e.g. year only).
+ *
+ * Wrap in a FormFieldset for a complete form field with legend and error message.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DateInputGroup
+ *   value={{ day: '', month: '', year: '' }}
+ *   onChange={(val) => setValue(val)}
+ * />
+ *
+ * // Complete form field
+ * <FormFieldset>
+ *   <FormFieldLegend>Geboortedatum</FormFieldLegend>
+ *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
+ *   <DateInputGroup
+ *     id="geboortedatum"
+ *     value={value}
+ *     onChange={setValue}
+ *   />
+ * </FormFieldset>
+ *
+ * // Invalid state
+ * <DateInputGroup invalid value={value} onChange={setValue} />
+ * ```
+ */
+declare const DateInputGroup: React.ForwardRefExoticComponent<DateInputGroupProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { DateInputGroup, DateInputGroupProps, DateInputGroupValue };
+//# sourceMappingURL=DateInputGroup.d.mts.map

package/dist/DateInputGroup/DateInputGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputGroup.d.mts","names":[],"sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"mappings":";;UAKiB;EACf;EACA;EACA;;UAGe,4BAA4B,KAC3C,MAAM,eAAe;;;;EAMrB,QAAQ;;;;EAKR,YAAY,OAAO;;;;;EAMnB;;;;;EAMA;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkCW,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/DateInputGroup/DateInputGroup2.mjs

@@ -0,0 +1,120 @@
+import { NumberInput } from "../NumberInput/NumberInput.mjs";
+/* empty css                */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/DateInputGroup/DateInputGroup.tsx
+/**
+* Date Input Group component
+* Three separate inputs for day, month and year.
+* More accessible than a native date picker: works consistently across all browsers and
+* devices, and allows partial input (e.g. year only).
+*
+* Wrap in a FormFieldset for a complete form field with legend and error message.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <DateInputGroup
+*   value={{ day: '', month: '', year: '' }}
+*   onChange={(val) => setValue(val)}
+* />
+*
+* // Complete form field
+* <FormFieldset>
+*   <FormFieldLegend>Geboortedatum</FormFieldLegend>
+*   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
+*   <DateInputGroup
+*     id="geboortedatum"
+*     value={value}
+*     onChange={setValue}
+*   />
+* </FormFieldset>
+*
+* // Invalid state
+* <DateInputGroup invalid value={value} onChange={setValue} />
+* ```
+*/
+const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {
+	const classes = classNames("dsn-date-input-group", className);
+	const handleChange = (field) => (e) => {
+		onChange?.({
+			day: value?.day ?? "",
+			month: value?.month ?? "",
+			year: value?.year ?? "",
+			[field]: e.target.value
+		});
+	};
+	const dayId = id ? `${id}-dag` : void 0;
+	const monthId = id ? `${id}-maand` : void 0;
+	const yearId = id ? `${id}-jaar` : void 0;
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classes,
+		...props,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "dsn-date-input-group__field",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "dsn-date-input-group__label",
+					htmlFor: dayId,
+					children: "Dag"
+				}), /* @__PURE__ */ jsx(NumberInput, {
+					id: dayId,
+					width: "xs",
+					value: value?.day ?? "",
+					onChange: handleChange("day"),
+					invalid,
+					"aria-invalid": invalid || void 0,
+					disabled,
+					placeholder: "DD",
+					min: 1,
+					max: 31
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dsn-date-input-group__field",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "dsn-date-input-group__label",
+					htmlFor: monthId,
+					children: "Maand"
+				}), /* @__PURE__ */ jsx(NumberInput, {
+					id: monthId,
+					width: "xs",
+					value: value?.month ?? "",
+					onChange: handleChange("month"),
+					invalid,
+					"aria-invalid": invalid || void 0,
+					disabled,
+					placeholder: "MM",
+					min: 1,
+					max: 12
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dsn-date-input-group__field",
+				children: [/* @__PURE__ */ jsx("label", {
+					className: "dsn-date-input-group__label",
+					htmlFor: yearId,
+					children: "Jaar"
+				}), /* @__PURE__ */ jsx(NumberInput, {
+					id: yearId,
+					width: "sm",
+					value: value?.year ?? "",
+					onChange: handleChange("year"),
+					invalid,
+					"aria-invalid": invalid || void 0,
+					disabled,
+					placeholder: "JJJJ",
+					min: 1,
+					max: 9999
+				})]
+			})
+		]
+	});
+});
+DateInputGroup.displayName = "DateInputGroup";
+//#endregion
+export { DateInputGroup };
+
+//# sourceMappingURL=DateInputGroup2.mjs.map

package/dist/DateInputGroup/DateInputGroup2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateInputGroup2.mjs","names":[],"sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { NumberInput } from '../NumberInput';\nimport './DateInputGroup.css';\n\nexport interface DateInputGroupValue {\n  day: string;\n  month: string;\n  year: string;\n}\n\nexport interface DateInputGroupProps extends Omit<\n  React.HTMLAttributes<HTMLDivElement>,\n  'onChange'\n> {\n  /**\n   * The current value of the date group\n   */\n  value?: DateInputGroupValue;\n\n  /**\n   * Called when any field changes, with the full updated value object\n   */\n  onChange?: (value: DateInputGroupValue) => void;\n\n  /**\n   * Whether all fields are in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Whether all fields are disabled\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * id prefix used to generate unique ids for each field (dag, maand, jaar)\n   * E.g. id=\"geboortedatum\" → \"geboortedatum-dag\", \"geboortedatum-maand\", \"geboortedatum-jaar\"\n   */\n  id?: string;\n}\n\n/**\n * Date Input Group component\n * Three separate inputs for day, month and year.\n * More accessible than a native date picker: works consistently across all browsers and\n * devices, and allows partial input (e.g. year only).\n *\n * Wrap in a FormFieldset for a complete form field with legend and error message.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <DateInputGroup\n *   value={{ day: '', month: '', year: '' }}\n *   onChange={(val) => setValue(val)}\n * />\n *\n * // Complete form field\n * <FormFieldset>\n *   <FormFieldLegend>Geboortedatum</FormFieldLegend>\n *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>\n *   <DateInputGroup\n *     id=\"geboortedatum\"\n *     value={value}\n *     onChange={setValue}\n *   />\n * </FormFieldset>\n *\n * // Invalid state\n * <DateInputGroup invalid value={value} onChange={setValue} />\n * ```\n */\nexport const DateInputGroup = React.forwardRef<\n  HTMLDivElement,\n  DateInputGroupProps\n>(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {\n  const classes = classNames('dsn-date-input-group', className);\n\n  const handleChange =\n    (field: keyof DateInputGroupValue) =>\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.({\n        day: value?.day ?? '',\n        month: value?.month ?? '',\n        year: value?.year ?? '',\n        [field]: e.target.value,\n      });\n    };\n\n  const dayId = id ? `${id}-dag` : undefined;\n  const monthId = id ? `${id}-maand` : undefined;\n  const yearId = id ? `${id}-jaar` : undefined;\n\n  return (\n    <div ref={ref} className={classes} {...props}>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={dayId}>\n          Dag\n        </label>\n        <NumberInput\n          id={dayId}\n          width=\"xs\"\n          value={value?.day ?? ''}\n          onChange={handleChange('day')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"DD\"\n          min={1}\n          max={31}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={monthId}>\n          Maand\n        </label>\n        <NumberInput\n          id={monthId}\n          width=\"xs\"\n          value={value?.month ?? ''}\n          onChange={handleChange('month')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"MM\"\n          min={1}\n          max={12}\n        />\n      </div>\n      <div className=\"dsn-date-input-group__field\">\n        <label className=\"dsn-date-input-group__label\" htmlFor={yearId}>\n          Jaar\n        </label>\n        <NumberInput\n          id={yearId}\n          width=\"sm\"\n          value={value?.year ?? ''}\n          onChange={handleChange('year')}\n          invalid={invalid}\n          aria-invalid={invalid || undefined}\n          disabled={disabled}\n          placeholder=\"JJJJ\"\n          min={1}\n          max={9999}\n        />\n      </div>\n    </div>\n  );\n});\n\nDateInputGroup.displayName = 'DateInputGroup';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2EA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,WAAW,OAAO,UAAU,SAAS,UAAU,IAAI,GAAG,SAAS,QAAQ;CAC1E,MAAM,UAAU,WAAW,wBAAwB,SAAS;CAE5D,MAAM,gBACH,WACA,MAA2C;EAC1C,WAAW;GACT,KAAK,OAAO,OAAO;GACnB,OAAO,OAAO,SAAS;GACvB,MAAM,OAAO,QAAQ;IACpB,QAAQ,EAAE,OAAO;EACpB,CAAC;CACH;CAEF,MAAM,QAAQ,KAAK,GAAG,GAAG,QAAQ,KAAA;CACjC,MAAM,UAAU,KAAK,GAAG,GAAG,UAAU,KAAA;CACrC,MAAM,SAAS,KAAK,GAAG,GAAG,SAAS,KAAA;CAEnC,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EAAvC,UAAA;GACE,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAO,UAAA;IAExD,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,OAAM;KACN,OAAO,OAAO,OAAO;KACrB,UAAU,aAAa,KAAK;KACnB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAS,UAAA;IAE1D,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,OAAM;KACN,OAAO,OAAO,SAAS;KACvB,UAAU,aAAa,OAAO;KACrB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;GACL,qBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,oBAAC,SAAD;KAAO,WAAU;KAA8B,SAAS;KAAQ,UAAA;IAEzD,CAAA,GACP,oBAAC,aAAD;KACE,IAAI;KACJ,OAAM;KACN,OAAO,OAAO,QAAQ;KACtB,UAAU,aAAa,MAAM;KACpB;KACT,gBAAc,WAAW,KAAA;KACf;KACV,aAAY;KACZ,KAAK;KACL,KAAK;IACN,CAAA,CACE;;EACF;;AAET,CAAC;AAED,eAAe,cAAc"}

package/dist/DateInputGroup/index.d.mts

@@ -0,0 +1,2 @@
+import { DateInputGroup, DateInputGroupProps, DateInputGroupValue } from "./DateInputGroup.mjs";
+export { DateInputGroup, type DateInputGroupProps, type DateInputGroupValue };

package/dist/Details/Details.d.mts

@@ -0,0 +1,48 @@
+import React from "react";
+//#region src/Details/Details.d.ts
+interface DetailsProps extends Omit<React.HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
+  /**
+   * Zichtbare labeltekst in de `<summary>`
+   */
+  summary: string;
+  /**
+   * Standaard open bij eerste render (ongecontroleerde staat)
+   * @default false
+   */
+  defaultOpen?: boolean;
+  /**
+   * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt
+   */
+  onToggle?: (open: boolean) => void;
+  /**
+   * De verborgen inhoud
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Details component
+ * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
+ * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
+ *
+ * @example
+ * ```tsx
+ * // Standaard gesloten
+ * <Details summary="Meer informatie">
+ *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
+ * </Details>
+ *
+ * // Standaard open
+ * <Details summary="Meer informatie" defaultOpen>
+ *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
+ * </Details>
+ *
+ * // Met toggle callback
+ * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
+ *   <Paragraph>Inhoud.</Paragraph>
+ * </Details>
+ * ```
+ */
+declare const Details: React.ForwardRefExoticComponent<DetailsProps & React.RefAttributes<HTMLDetailsElement>>;
+//#endregion
+export { Details, DetailsProps };
+//# sourceMappingURL=Details.d.mts.map

package/dist/Details/Details.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details.d.mts","names":[],"sources":["../../src/Details/Details.tsx"],"mappings":";;UAKiB,qBAAqB,KACpC,MAAM,eAAe;;;;EAMrB;;;;;EAMA;;;;EAKA,YAAY;;;;EAKZ,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;cA0BN,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA"}

package/dist/Details/Details2.mjs

@@ -0,0 +1,61 @@
+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/Details/Details.tsx
+/**
+* Details component
+* Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
+* Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
+*
+* @example
+* ```tsx
+* // Standaard gesloten
+* <Details summary="Meer informatie">
+*   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
+* </Details>
+*
+* // Standaard open
+* <Details summary="Meer informatie" defaultOpen>
+*   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
+* </Details>
+*
+* // Met toggle callback
+* <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
+*   <Paragraph>Inhoud.</Paragraph>
+* </Details>
+* ```
+*/
+const Details = React.forwardRef(({ className, summary, defaultOpen = false, onToggle, children, ...props }, ref) => {
+	const classes = classNames("dsn-details", className);
+	const handleToggle = (event) => {
+		onToggle?.(event.currentTarget.open);
+	};
+	return /* @__PURE__ */ jsxs("details", {
+		ref,
+		className: classes,
+		open: defaultOpen || void 0,
+		onToggle: handleToggle,
+		...props,
+		children: [/* @__PURE__ */ jsxs("summary", {
+			className: "dsn-details__summary",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				name: "chevron-down",
+				className: "dsn-details__icon",
+				"aria-hidden": true
+			}), /* @__PURE__ */ jsx("span", {
+				className: "dsn-details__summary-label",
+				children: summary
+			})]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "dsn-details__content",
+			children
+		})]
+	});
+});
+Details.displayName = "Details";
+//#endregion
+export { Details };
+
+//# sourceMappingURL=Details2.mjs.map

package/dist/Details/Details2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Details2.mjs","names":[],"sources":["../../src/Details/Details.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './Details.css';\n\nexport interface DetailsProps extends Omit<\n  React.HTMLAttributes<HTMLDetailsElement>,\n  'onToggle'\n> {\n  /**\n   * Zichtbare labeltekst in de `<summary>`\n   */\n  summary: string;\n\n  /**\n   * Standaard open bij eerste render (ongecontroleerde staat)\n   * @default false\n   */\n  defaultOpen?: boolean;\n\n  /**\n   * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt\n   */\n  onToggle?: (open: boolean) => void;\n\n  /**\n   * De verborgen inhoud\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Details component\n * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.\n * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.\n *\n * @example\n * ```tsx\n * // Standaard gesloten\n * <Details summary=\"Meer informatie\">\n *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>\n * </Details>\n *\n * // Standaard open\n * <Details summary=\"Meer informatie\" defaultOpen>\n *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>\n * </Details>\n *\n * // Met toggle callback\n * <Details summary=\"Meer informatie\" onToggle={(open) => console.log('open:', open)}>\n *   <Paragraph>Inhoud.</Paragraph>\n * </Details>\n * ```\n */\nexport const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(\n  (\n    { className, summary, defaultOpen = false, onToggle, children, ...props },\n    ref\n  ) => {\n    const classes = classNames('dsn-details', className);\n\n    const handleToggle = (event: React.SyntheticEvent<HTMLDetailsElement>) => {\n      onToggle?.((event.currentTarget as HTMLDetailsElement).open);\n    };\n\n    return (\n      <details\n        ref={ref}\n        className={classes}\n        open={defaultOpen || undefined}\n        onToggle={handleToggle}\n        {...props}\n      >\n        <summary className=\"dsn-details__summary\">\n          <Icon name=\"chevron-down\" className=\"dsn-details__icon\" aria-hidden />\n          <span className=\"dsn-details__summary-label\">{summary}</span>\n        </summary>\n        <div className=\"dsn-details__content\">{children}</div>\n      </details>\n    );\n  }\n);\n\nDetails.displayName = 'Details';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,UAAU,MAAM,YAEzB,EAAE,WAAW,SAAS,cAAc,OAAO,UAAU,UAAU,GAAG,SAClE,QACG;CACH,MAAM,UAAU,WAAW,eAAe,SAAS;CAEnD,MAAM,gBAAgB,UAAoD;EACxE,WAAY,MAAM,cAAqC,IAAI;CAC7D;CAEA,OACE,qBAAC,WAAD;EACO;EACL,WAAW;EACX,MAAM,eAAe,KAAA;EACrB,UAAU;EACV,GAAI;EALN,UAAA,CAOE,qBAAC,WAAD;GAAS,WAAU;GAAnB,UAAA,CACE,oBAAC,MAAD;IAAM,MAAK;IAAe,WAAU;IAAoB,eAAA;GAAa,CAAA,GACrE,oBAAC,QAAD;IAAM,WAAU;IAA8B,UAAA;GAAc,CAAA,CACrD;EACT,CAAA,GAAA,oBAAC,OAAD;GAAK,WAAU;GAAwB;EAAc,CAAA,CAC9C;;AAEb,CACF;AAEA,QAAQ,cAAc"}

package/dist/Details/index.d.mts

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

package/dist/DotBadge/DotBadge.d.mts

@@ -0,0 +1,44 @@
+import React from "react";
+//#region src/DotBadge/DotBadge.d.ts
+type DotBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
+interface DotBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Signaalkleur van de stip
+   * @default 'negative'
+   */
+  variant?: DotBadgeVariant;
+  /**
+   * Voegt een pulserend ring-effect toe om extra aandacht te trekken.
+   * De pulse loopt 3 keer (4500ms) en stopt dan vanzelf, zodat de beweging
+   * binnen de 5 seconden van WCAG 2.2.2 blijft. De dot zelf blijft staan.
+   * @default false
+   */
+  pulse?: boolean;
+}
+/**
+ * DotBadge component
+ * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
+ * zonder label of getal de aandacht te trekken bij een statuswijziging.
+ *
+ * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
+ * Parent-wrapper heeft position: relative nodig.
+ *
+ * @example
+ * ```tsx
+ * // Basis gebruik — negatieve dot bij een icon-only Button
+ * <div style={{ position: 'relative', display: 'inline-flex' }}>
+ *   <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
+ *     Inbox
+ *     <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
+ *   </Button>
+ *   <DotBadge variant="negative" />
+ * </div>
+ *
+ * // Met pulse-effect voor urgente statuswijzigingen
+ * <DotBadge variant="negative" pulse />
+ * ```
+ */
+declare const DotBadge: React.ForwardRefExoticComponent<DotBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//#endregion
+export { DotBadge, DotBadgeProps, DotBadgeVariant };
+//# sourceMappingURL=DotBadge.d.mts.map

package/dist/DotBadge/DotBadge.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotBadge.d.mts","names":[],"sources":["../../src/DotBadge/DotBadge.tsx"],"mappings":";;KAIY;UAOK,sBAAsB,MAAM,eAAe;;;;;EAK1D,UAAU;;;;;;;EAQV;;;;;;;;;;;;;;;;;;;;;;;;;cA0BW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/DotBadge/DotBadge2.mjs

@@ -0,0 +1,42 @@
+/* empty css          */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/DotBadge/DotBadge.tsx
+/**
+* DotBadge component
+* Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
+* zonder label of getal de aandacht te trekken bij een statuswijziging.
+*
+* Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
+* Parent-wrapper heeft position: relative nodig.
+*
+* @example
+* ```tsx
+* // Basis gebruik — negatieve dot bij een icon-only Button
+* <div style={{ position: 'relative', display: 'inline-flex' }}>
+*   <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
+*     Inbox
+*     <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
+*   </Button>
+*   <DotBadge variant="negative" />
+* </div>
+*
+* // Met pulse-effect voor urgente statuswijzigingen
+* <DotBadge variant="negative" pulse />
+* ```
+*/
+const DotBadge = React.forwardRef(({ className, variant = "negative", pulse = false, ...props }, ref) => {
+	const classes = classNames("dsn-dot-badge", `dsn-dot-badge--${variant}`, pulse && "dsn-dot-badge--pulse", className);
+	return /* @__PURE__ */ jsx("span", {
+		ref,
+		className: classes,
+		"aria-hidden": "true",
+		...props
+	});
+});
+DotBadge.displayName = "DotBadge";
+//#endregion
+export { DotBadge };
+
+//# sourceMappingURL=DotBadge2.mjs.map

package/dist/DotBadge/DotBadge2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotBadge2.mjs","names":[],"sources":["../../src/DotBadge/DotBadge.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './DotBadge.css';\n\nexport type DotBadgeVariant =\n  | 'negative'\n  | 'positive'\n  | 'warning'\n  | 'info'\n  | 'neutral';\n\nexport interface DotBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  /**\n   * Signaalkleur van de stip\n   * @default 'negative'\n   */\n  variant?: DotBadgeVariant;\n\n  /**\n   * Voegt een pulserend ring-effect toe om extra aandacht te trekken.\n   * De pulse loopt 3 keer (4500ms) en stopt dan vanzelf, zodat de beweging\n   * binnen de 5 seconden van WCAG 2.2.2 blijft. De dot zelf blijft staan.\n   * @default false\n   */\n  pulse?: boolean;\n}\n\n/**\n * DotBadge component\n * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om\n * zonder label of getal de aandacht te trekken bij een statuswijziging.\n *\n * Altijd aria-hidden=\"true\" — context via dsn-visually-hidden in de parent.\n * Parent-wrapper heeft position: relative nodig.\n *\n * @example\n * ```tsx\n * // Basis gebruik — negatieve dot bij een icon-only Button\n * <div style={{ position: 'relative', display: 'inline-flex' }}>\n *   <Button variant=\"subtle\" iconOnly iconStart={<Icon name=\"inbox\" aria-hidden />}>\n *     Inbox\n *     <span className=\"dsn-visually-hidden\">, 3 ongelezen berichten</span>\n *   </Button>\n *   <DotBadge variant=\"negative\" />\n * </div>\n *\n * // Met pulse-effect voor urgente statuswijzigingen\n * <DotBadge variant=\"negative\" pulse />\n * ```\n */\nexport const DotBadge = React.forwardRef<HTMLSpanElement, DotBadgeProps>(\n  ({ className, variant = 'negative', pulse = false, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-dot-badge',\n      `dsn-dot-badge--${variant}`,\n      pulse && 'dsn-dot-badge--pulse',\n      className\n    );\n\n    return <span ref={ref} className={classes} aria-hidden=\"true\" {...props} />;\n  }\n);\n\nDotBadge.displayName = 'DotBadge';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,WAAW,MAAM,YAC3B,EAAE,WAAW,UAAU,YAAY,QAAQ,OAAO,GAAG,SAAS,QAAQ;CACrE,MAAM,UAAU,WACd,iBACA,kBAAkB,WAClB,SAAS,wBACT,SACF;CAEA,OAAO,oBAAC,QAAD;EAAW;EAAK,WAAW;EAAS,eAAY;EAAO,GAAI;CAAQ,CAAA;AAC5E,CACF;AAEA,SAAS,cAAc"}

package/dist/DotBadge/index.d.mts

@@ -0,0 +1,2 @@
+import { DotBadge, DotBadgeProps, DotBadgeVariant } from "./DotBadge.mjs";
+export { DotBadge, DotBadgeProps, DotBadgeVariant };

package/dist/Drawer/Drawer.d.mts

@@ -0,0 +1,111 @@
+import React from "react";
+//#region src/Drawer/Drawer.d.ts
+interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
+  /**
+   * Bepaalt of het zijpaneel getoond wordt.
+   */
+  isOpen: boolean;
+  /**
+   * Callback die wordt aangeroepen wanneer het zijpaneel sluit
+   * (sluitknop, Escape-toets).
+   */
+  onClose?: () => void;
+  /**
+   * Modaal of non-modaal gedrag.
+   * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,
+   *   natieve focus-trap, Escape sluit via `cancel`-event.
+   * - `false`: opent via `.show()` — achtergrond blijft interactief,
+   *   Escape sluit via `keydown`-listener.
+   * @default true
+   */
+  modal?: boolean;
+  /**
+   * De kant van de viewport vanwaar het zijpaneel inschuift.
+   * @default "right"
+   */
+  side?: 'right' | 'left';
+  /**
+   * De subcomponenten van het zijpaneel:
+   * `DrawerHeader`, `DrawerBody`, `DrawerFooter`
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Drawer component
+ * Zijpaneel dat vanuit links of rechts de viewport inschuift.
+ *
+ * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond
+ * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina
+ * nodig heeft voor context.
+ *
+ * @example
+ * ```tsx
+ * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
+ *   <DrawerHeader>
+ *     <DrawerHeading>Filteropties</DrawerHeading>
+ *   </DrawerHeader>
+ *   <DrawerBody>
+ *     <Paragraph>Inhoud van het zijpaneel</Paragraph>
+ *   </DrawerBody>
+ *   <DrawerFooter>
+ *     <ActionGroup>
+ *       <Button variant="strong" onClick={() => setIsOpen(false)}>Toepassen</Button>
+ *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
+ *     </ActionGroup>
+ *   </DrawerFooter>
+ * </Drawer>
+ * ```
+ */
+declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDialogElement>>;
+interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Inhoud van de header — doorgaans een `DrawerHeading`
+   */
+  children?: React.ReactNode;
+}
+/**
+ * DrawerHeader
+ * De headerstrook van het zijpaneel met heading en sluitknop.
+ */
+declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+interface DrawerHeadingProps 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;
+}
+/**
+ * DrawerHeading
+ * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+declare const DrawerHeading: React.ForwardRefExoticComponent<DrawerHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * De hoofdinhoud van het zijpaneel
+   */
+  children?: React.ReactNode;
+}
+/**
+ * DrawerBody
+ * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
+ */
+declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * De acties van het zijpaneel — doorgaans een `ActionGroup` met knoppen
+   */
+  children?: React.ReactNode;
+}
+/**
+ * DrawerFooter
+ * De voettekst van het zijpaneel met actieknoppen.
+ */
+declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Drawer, DrawerBody, DrawerBodyProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerHeading, DrawerHeadingProps, DrawerProps };
+//# sourceMappingURL=Drawer.d.mts.map

package/dist/Drawer/Drawer.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.mts","names":[],"sources":["../../src/Drawer/Drawer.tsx"],"mappings":";;UAuBiB,oBAAoB,KACnC,MAAM,eAAe;;;;EAMrB;;;;;EAMA;;;;;;;;;EAUA;;;;;EAMA;;;;;EAMA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA6BN,QAAM,MAAA,0BAAA,cAAA,MAAA,cAAA;UAmFF,0BAA0B,MAAM,eAAe;;;;EAI9D,WAAW,MAAM;;;;;;cAON,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA;UA+BR,2BAA2B,MAAM,eAAe;;;;;EAK/D;;;;EAKA,WAAW,MAAM;;;;;;cAON,eAAa,MAAA,0BAAA,qBAAA,MAAA,cAAA;UAyBT,wBAAwB,MAAM,eAAe;;;;EAI5D,WAAW,MAAM;;;;;;cAON,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA;UAoBN,0BAA0B,MAAM,eAAe;;;;EAI9D,WAAW,MAAM;;;;;;cAON,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}