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

package/dist/FormFieldLegend/FormFieldLegend.d.mts

@@ -0,0 +1,41 @@
+import React from "react";
+//#region src/FormFieldLegend/FormFieldLegend.d.ts
+interface FormFieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {
+  /**
+   * Optional suffix text displayed after the legend (e.g., "(niet verplicht)")
+   */
+  suffix?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Legend content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Form Field Legend component
+ * Legend for fieldsets with optional suffix for "(niet verplicht)" or "(verplicht)"
+ * Uses the same CSS classes as FormFieldLabel for consistent styling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FormFieldLegend>Interesses</FormFieldLegend>
+ *
+ * // With suffix for optional fields
+ * <FormFieldLegend suffix="(niet verplicht)">
+ *   Hobby's
+ * </FormFieldLegend>
+ *
+ * // With suffix for required fields
+ * <FormFieldLegend suffix="(verplicht)">
+ *   Geslacht
+ * </FormFieldLegend>
+ * ```
+ */
+declare const FormFieldLegend: React.ForwardRefExoticComponent<FormFieldLegendProps & React.RefAttributes<HTMLLegendElement>>;
+//#endregion
+export { FormFieldLegend, FormFieldLegendProps };
+//# sourceMappingURL=FormFieldLegend.d.mts.map

package/dist/FormFieldLegend/FormFieldLegend.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegend.d.mts","names":[],"sources":["../../src/FormFieldLegend/FormFieldLegend.tsx"],"mappings":";;UAIiB,6BAA6B,MAAM,eAAe;;;;EAIjE;;;;EAKA;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;cAwBN,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}

package/dist/FormFieldLegend/FormFieldLegend2.mjs

@@ -0,0 +1,43 @@
+/* empty css                 */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FormFieldLegend/FormFieldLegend.tsx
+/**
+* Form Field Legend component
+* Legend for fieldsets with optional suffix for "(niet verplicht)" or "(verplicht)"
+* Uses the same CSS classes as FormFieldLabel for consistent styling
+*
+* @example
+* ```tsx
+* // Basic usage
+* <FormFieldLegend>Interesses</FormFieldLegend>
+*
+* // With suffix for optional fields
+* <FormFieldLegend suffix="(niet verplicht)">
+*   Hobby's
+* </FormFieldLegend>
+*
+* // With suffix for required fields
+* <FormFieldLegend suffix="(verplicht)">
+*   Geslacht
+* </FormFieldLegend>
+* ```
+*/
+const FormFieldLegend = React.forwardRef(({ suffix, className, children, ...props }, ref) => {
+	const classes = classNames("dsn-form-field-label", className);
+	return /* @__PURE__ */ jsxs("legend", {
+		ref,
+		className: classes,
+		...props,
+		children: [children, suffix && /* @__PURE__ */ jsx("span", {
+			className: "dsn-form-field-label-suffix",
+			children: suffix
+		})]
+	});
+});
+FormFieldLegend.displayName = "FormFieldLegend";
+//#endregion
+export { FormFieldLegend };
+
+//# sourceMappingURL=FormFieldLegend2.mjs.map

package/dist/FormFieldLegend/FormFieldLegend2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegend2.mjs","names":[],"sources":["../../src/FormFieldLegend/FormFieldLegend.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FormFieldLegend.css';\n\nexport interface FormFieldLegendProps extends React.HTMLAttributes<HTMLLegendElement> {\n  /**\n   * Optional suffix text displayed after the legend (e.g., \"(niet verplicht)\")\n   */\n  suffix?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Legend content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Legend component\n * Legend for fieldsets with optional suffix for \"(niet verplicht)\" or \"(verplicht)\"\n * Uses the same CSS classes as FormFieldLabel for consistent styling\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FormFieldLegend>Interesses</FormFieldLegend>\n *\n * // With suffix for optional fields\n * <FormFieldLegend suffix=\"(niet verplicht)\">\n *   Hobby's\n * </FormFieldLegend>\n *\n * // With suffix for required fields\n * <FormFieldLegend suffix=\"(verplicht)\">\n *   Geslacht\n * </FormFieldLegend>\n * ```\n */\nexport const FormFieldLegend = React.forwardRef<\n  HTMLLegendElement,\n  FormFieldLegendProps\n>(({ suffix, className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-label', className);\n\n  return (\n    <legend ref={ref} className={classes} {...props}>\n      {children}\n      {suffix && <span className=\"dsn-form-field-label-suffix\">{suffix}</span>}\n    </legend>\n  );\n});\n\nFormFieldLegend.displayName = 'FormFieldLegend';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AA0CA,MAAa,kBAAkB,MAAM,YAGlC,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS,QAAQ;CACpD,MAAM,UAAU,WAAW,wBAAwB,SAAS;CAE5D,OACE,qBAAC,UAAD;EAAa;EAAK,WAAW;EAAS,GAAI;EAA1C,UAAA,CACG,UACA,UAAU,oBAAC,QAAD;GAAM,WAAU;GAA+B,UAAA;EAAa,CAAA,CACjE;;AAEZ,CAAC;AAED,gBAAgB,cAAc"}

package/dist/FormFieldLegend/index.d.mts

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

package/dist/FormFieldStatus/FormFieldStatus.d.mts

@@ -0,0 +1,62 @@
+import React from "react";
+//#region src/FormFieldStatus/FormFieldStatus.d.ts
+type FormFieldStatusVariant = 'default' | 'positive' | 'warning';
+interface FormFieldStatusProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Status variant
+   * @default 'default'
+   */
+  variant?: FormFieldStatusVariant;
+  /**
+   * Whether to show the icon (only for positive and warning variants)
+   * @default true
+   */
+  showIcon?: boolean;
+  /**
+   * Whether to announce changes to this status via an aria-live region.
+   * Enable this only for status text that changes during interaction, such as
+   * a character counter. A status that never changes should not be a live
+   * region: it would be announced twice.
+   * @default false
+   */
+  live?: boolean;
+  /**
+   * Status content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Form Field Status component
+ * Status message displayed below the form control
+ * Supports three variants: default (subtle info), positive (success), warning (caution)
+ *
+ * @example
+ * ```tsx
+ * // Default - Character counter (no icon)
+ * <FormFieldStatus>45 van 100 karakters</FormFieldStatus>
+ *
+ * // Positive - Success feedback (with check icon)
+ * <FormFieldStatus variant="positive">Wachtwoord is sterk genoeg</FormFieldStatus>
+ *
+ * // Warning - Caution (with alert-triangle icon)
+ * <FormFieldStatus variant="warning">Wachtwoord is zwak</FormFieldStatus>
+ *
+ * // Without icon (for positive/warning)
+ * <FormFieldStatus variant="positive" showIcon={false}>
+ *   Gebruikersnaam beschikbaar
+ * </FormFieldStatus>
+ *
+ * // With ID for aria-describedby
+ * <FormFieldStatus id="bio-status">
+ *   280 van 500 karakters gebruikt
+ * </FormFieldStatus>
+ * ```
+ */
+declare const FormFieldStatus: React.ForwardRefExoticComponent<FormFieldStatusProps & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { FormFieldStatus, FormFieldStatusProps, FormFieldStatusVariant };
+//# sourceMappingURL=FormFieldStatus.d.mts.map

package/dist/FormFieldStatus/FormFieldStatus.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldStatus.d.mts","names":[],"sources":["../../src/FormFieldStatus/FormFieldStatus.tsx"],"mappings":";;KAKY;UAEK,6BAA6B,MAAM,eAAe;;;;EAIjE;;;;;EAMA,UAAU;;;;;EAMV;;;;;;;;EASA;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cA8BN,iBAAe,MAAA,0BAAA,uBAAA,MAAA,cAAA"}

package/dist/FormFieldStatus/FormFieldStatus2.mjs

@@ -0,0 +1,54 @@
+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/FormFieldStatus/FormFieldStatus.tsx
+/**
+* Form Field Status component
+* Status message displayed below the form control
+* Supports three variants: default (subtle info), positive (success), warning (caution)
+*
+* @example
+* ```tsx
+* // Default - Character counter (no icon)
+* <FormFieldStatus>45 van 100 karakters</FormFieldStatus>
+*
+* // Positive - Success feedback (with check icon)
+* <FormFieldStatus variant="positive">Wachtwoord is sterk genoeg</FormFieldStatus>
+*
+* // Warning - Caution (with alert-triangle icon)
+* <FormFieldStatus variant="warning">Wachtwoord is zwak</FormFieldStatus>
+*
+* // Without icon (for positive/warning)
+* <FormFieldStatus variant="positive" showIcon={false}>
+*   Gebruikersnaam beschikbaar
+* </FormFieldStatus>
+*
+* // With ID for aria-describedby
+* <FormFieldStatus id="bio-status">
+*   280 van 500 karakters gebruikt
+* </FormFieldStatus>
+* ```
+*/
+const FormFieldStatus = React.forwardRef(({ className, variant = "default", showIcon = true, live = false, children, ...props }, ref) => {
+	const classes = classNames("dsn-form-field-status", variant !== "default" && `dsn-form-field-status--${variant}`, className);
+	const iconName = variant === "positive" ? "check" : variant === "warning" ? "alert-triangle" : null;
+	const shouldShowIcon = showIcon && iconName && variant !== "default";
+	return /* @__PURE__ */ jsxs("p", {
+		ref,
+		className: classes,
+		"aria-live": live ? "polite" : void 0,
+		"aria-atomic": live ? true : void 0,
+		...props,
+		children: [shouldShowIcon && /* @__PURE__ */ jsx(Icon, {
+			name: iconName,
+			"aria-hidden": "true"
+		}), children]
+	});
+});
+FormFieldStatus.displayName = "FormFieldStatus";
+//#endregion
+export { FormFieldStatus };
+
+//# sourceMappingURL=FormFieldStatus2.mjs.map

package/dist/FormFieldStatus/FormFieldStatus2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldStatus2.mjs","names":[],"sources":["../../src/FormFieldStatus/FormFieldStatus.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './FormFieldStatus.css';\n\nexport type FormFieldStatusVariant = 'default' | 'positive' | 'warning';\n\nexport interface FormFieldStatusProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Status variant\n   * @default 'default'\n   */\n  variant?: FormFieldStatusVariant;\n\n  /**\n   * Whether to show the icon (only for positive and warning variants)\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Whether to announce changes to this status via an aria-live region.\n   * Enable this only for status text that changes during interaction, such as\n   * a character counter. A status that never changes should not be a live\n   * region: it would be announced twice.\n   * @default false\n   */\n  live?: boolean;\n\n  /**\n   * Status content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Status component\n * Status message displayed below the form control\n * Supports three variants: default (subtle info), positive (success), warning (caution)\n *\n * @example\n * ```tsx\n * // Default - Character counter (no icon)\n * <FormFieldStatus>45 van 100 karakters</FormFieldStatus>\n *\n * // Positive - Success feedback (with check icon)\n * <FormFieldStatus variant=\"positive\">Wachtwoord is sterk genoeg</FormFieldStatus>\n *\n * // Warning - Caution (with alert-triangle icon)\n * <FormFieldStatus variant=\"warning\">Wachtwoord is zwak</FormFieldStatus>\n *\n * // Without icon (for positive/warning)\n * <FormFieldStatus variant=\"positive\" showIcon={false}>\n *   Gebruikersnaam beschikbaar\n * </FormFieldStatus>\n *\n * // With ID for aria-describedby\n * <FormFieldStatus id=\"bio-status\">\n *   280 van 500 karakters gebruikt\n * </FormFieldStatus>\n * ```\n */\nexport const FormFieldStatus = React.forwardRef<\n  HTMLParagraphElement,\n  FormFieldStatusProps\n>(\n  (\n    {\n      className,\n      variant = 'default',\n      showIcon = true,\n      live = false,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-form-field-status',\n      variant !== 'default' && `dsn-form-field-status--${variant}`,\n      className\n    );\n\n    const iconName =\n      variant === 'positive'\n        ? 'check'\n        : variant === 'warning'\n          ? 'alert-triangle'\n          : null;\n    const shouldShowIcon = showIcon && iconName && variant !== 'default';\n\n    return (\n      <p\n        ref={ref}\n        className={classes}\n        aria-live={live ? 'polite' : undefined}\n        aria-atomic={live ? true : undefined}\n        {...props}\n      >\n        {shouldShowIcon && <Icon name={iconName} aria-hidden=\"true\" />}\n        {children}\n      </p>\n    );\n  }\n);\n\nFormFieldStatus.displayName = 'FormFieldStatus';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEA,MAAa,kBAAkB,MAAM,YAKjC,EACE,WACA,UAAU,WACV,WAAW,MACX,OAAO,OACP,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,yBACA,YAAY,aAAa,0BAA0B,WACnD,SACF;CAEA,MAAM,WACJ,YAAY,aACR,UACA,YAAY,YACV,mBACA;CACR,MAAM,iBAAiB,YAAY,YAAY,YAAY;CAE3D,OACE,qBAAC,KAAD;EACO;EACL,WAAW;EACX,aAAW,OAAO,WAAW,KAAA;EAC7B,eAAa,OAAO,OAAO,KAAA;EAC3B,GAAI;EALN,UAAA,CAOG,kBAAkB,oBAAC,MAAD;GAAM,MAAM;GAAU,eAAY;EAAQ,CAAA,GAC5D,QACA;;AAEP,CACF;AAEA,gBAAgB,cAAc"}

package/dist/FormFieldStatus/index.d.mts

@@ -0,0 +1,2 @@
+import { FormFieldStatus, FormFieldStatusProps, FormFieldStatusVariant } from "./FormFieldStatus.mjs";
+export { FormFieldStatus, type FormFieldStatusProps, type FormFieldStatusVariant };

package/dist/FormFieldset/FormFieldset.d.mts

@@ -0,0 +1,100 @@
+import { FormFieldStatusVariant } from "../FormFieldStatus/FormFieldStatus.mjs";
+import "../FormFieldStatus/index.mjs";
+import React from "react";
+//#region src/FormFieldset/FormFieldset.d.ts
+interface FormFieldsetProps {
+  /**
+   * The legend text for the fieldset
+   */
+  legend: string;
+  /**
+   * Optional suffix for the legend (e.g., "(niet verplicht)" or "(verplicht)")
+   */
+  legendSuffix?: string;
+  /**
+   * Optional description text
+   */
+  description?: React.ReactNode;
+  /**
+   * Optional error message (shows when field is invalid)
+   */
+  error?: React.ReactNode;
+  /**
+   * Optional status message
+   */
+  status?: React.ReactNode;
+  /**
+   * Status variant (for status message styling)
+   * @default 'default'
+   */
+  statusVariant?: FormFieldStatusVariant;
+  /**
+   * Announce status changes to screen readers via an aria-live region.
+   * Only enable this for status text that changes during interaction.
+   * @default false
+   */
+  statusLive?: boolean;
+  /**
+   * Optional ID for the fieldset. Used as the base for the generated
+   * description/error/status IDs. Generated via useId() when omitted.
+   */
+  id?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * The form control element (CheckboxGroup, RadioGroup, DateInputGroup, etc.)
+   */
+  children: React.ReactNode;
+}
+/**
+ * Form Fieldset component
+ * Container that combines FormFieldLegend, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
+ * Uses fieldset/legend structure for group controls (CheckboxGroup, RadioGroup, DateInputGroup)
+ *
+ * Description, error and status are linked via aria-describedby on the fieldset
+ * itself: a group has no single control to hang the association on.
+ *
+ * @example
+ * ```tsx
+ * // Checkbox group
+ * <FormFieldset legend="Interesses" description="Selecteer minimaal één interesse">
+ *   <CheckboxGroup>
+ *     <CheckboxOption label="Sport" value="sport" />
+ *     <CheckboxOption label="Muziek" value="music" />
+ *     <CheckboxOption label="Reizen" value="travel" />
+ *   </CheckboxGroup>
+ * </FormFieldset>
+ *
+ * // Radio group with error
+ * <FormFieldset
+ *   legend="Geslacht"
+ *   legendSuffix="(verplicht)"
+ *   error="Selecteer een optie"
+ * >
+ *   <RadioGroup>
+ *     <RadioOption name="gender" label="Man" value="male" />
+ *     <RadioOption name="gender" label="Vrouw" value="female" />
+ *     <RadioOption name="gender" label="Anders" value="other" />
+ *   </RadioGroup>
+ * </FormFieldset>
+ *
+ * // With status
+ * <FormFieldset
+ *   legend="Voorkeuren"
+ *   status="Minimaal 2 opties vereist"
+ *   statusVariant="warning"
+ * >
+ *   <CheckboxGroup>
+ *     <CheckboxOption label="E-mail" value="email" />
+ *     <CheckboxOption label="SMS" value="sms" />
+ *     <CheckboxOption label="Push" value="push" />
+ *   </CheckboxGroup>
+ * </FormFieldset>
+ * ```
+ */
+declare const FormFieldset: React.ForwardRefExoticComponent<FormFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+//#endregion
+export { FormFieldset, FormFieldsetProps };
+//# sourceMappingURL=FormFieldset.d.mts.map

package/dist/FormFieldset/FormFieldset.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldset.d.mts","names":[],"sources":["../../src/FormFieldset/FormFieldset.tsx"],"mappings":";;;;UAQiB;;;;EAIf;;;;EAKA;;;;EAKA,cAAc,MAAM;;;;EAKpB,QAAQ,MAAM;;;;EAKd,SAAS,MAAM;;;;;EAMf,gBAAgB;;;;;;EAOhB;;;;;EAMA;;;;EAKA;;;;EAKA,UAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiDL,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}

package/dist/FormFieldset/FormFieldset2.mjs

@@ -0,0 +1,100 @@
+import { FormFieldDescription } from "../FormFieldDescription/FormFieldDescription2.mjs";
+import { FormFieldErrorMessage } from "../FormFieldErrorMessage/FormFieldErrorMessage2.mjs";
+import { FormFieldStatus } from "../FormFieldStatus/FormFieldStatus2.mjs";
+import { FormFieldLegend } from "../FormFieldLegend/FormFieldLegend2.mjs";
+/* empty css              */
+import React, { useId } from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FormFieldset/FormFieldset.tsx
+/**
+* Form Fieldset component
+* Container that combines FormFieldLegend, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
+* Uses fieldset/legend structure for group controls (CheckboxGroup, RadioGroup, DateInputGroup)
+*
+* Description, error and status are linked via aria-describedby on the fieldset
+* itself: a group has no single control to hang the association on.
+*
+* @example
+* ```tsx
+* // Checkbox group
+* <FormFieldset legend="Interesses" description="Selecteer minimaal één interesse">
+*   <CheckboxGroup>
+*     <CheckboxOption label="Sport" value="sport" />
+*     <CheckboxOption label="Muziek" value="music" />
+*     <CheckboxOption label="Reizen" value="travel" />
+*   </CheckboxGroup>
+* </FormFieldset>
+*
+* // Radio group with error
+* <FormFieldset
+*   legend="Geslacht"
+*   legendSuffix="(verplicht)"
+*   error="Selecteer een optie"
+* >
+*   <RadioGroup>
+*     <RadioOption name="gender" label="Man" value="male" />
+*     <RadioOption name="gender" label="Vrouw" value="female" />
+*     <RadioOption name="gender" label="Anders" value="other" />
+*   </RadioGroup>
+* </FormFieldset>
+*
+* // With status
+* <FormFieldset
+*   legend="Voorkeuren"
+*   status="Minimaal 2 opties vereist"
+*   statusVariant="warning"
+* >
+*   <CheckboxGroup>
+*     <CheckboxOption label="E-mail" value="email" />
+*     <CheckboxOption label="SMS" value="sms" />
+*     <CheckboxOption label="Push" value="push" />
+*   </CheckboxGroup>
+* </FormFieldset>
+* ```
+*/
+const FormFieldset = React.forwardRef(({ legend, legendSuffix, description, error, status, statusVariant = "default", statusLive = false, id, className, children }, ref) => {
+	const generatedId = useId();
+	const idBase = id ?? generatedId;
+	const descriptionId = description ? `${idBase}-description` : void 0;
+	const errorId = error ? `${idBase}-error` : void 0;
+	const statusId = status ? `${idBase}-status` : void 0;
+	const describedBy = [
+		descriptionId,
+		errorId,
+		statusId
+	].filter(Boolean).join(" ") || void 0;
+	const containerClasses = classNames("dsn-form-field", { "dsn-form-field--invalid": !!error }, className);
+	return /* @__PURE__ */ jsxs("fieldset", {
+		ref,
+		id,
+		className: containerClasses,
+		"aria-describedby": describedBy,
+		children: [
+			/* @__PURE__ */ jsx(FormFieldLegend, {
+				suffix: legendSuffix,
+				children: legend
+			}),
+			description && /* @__PURE__ */ jsx(FormFieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			error && /* @__PURE__ */ jsx(FormFieldErrorMessage, {
+				id: errorId,
+				children: error
+			}),
+			children,
+			status && /* @__PURE__ */ jsx(FormFieldStatus, {
+				id: statusId,
+				variant: statusVariant,
+				live: statusLive,
+				children: status
+			})
+		]
+	});
+});
+FormFieldset.displayName = "FormFieldset";
+//#endregion
+export { FormFieldset };
+
+//# sourceMappingURL=FormFieldset2.mjs.map

package/dist/FormFieldset/FormFieldset2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldset2.mjs","names":[],"sources":["../../src/FormFieldset/FormFieldset.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { FormFieldLegend } from '../FormFieldLegend';\nimport { FormFieldDescription } from '../FormFieldDescription';\nimport { FormFieldErrorMessage } from '../FormFieldErrorMessage';\nimport { FormFieldStatus, FormFieldStatusVariant } from '../FormFieldStatus';\nimport './FormFieldset.css';\n\nexport interface FormFieldsetProps {\n  /**\n   * The legend text for the fieldset\n   */\n  legend: string;\n\n  /**\n   * Optional suffix for the legend (e.g., \"(niet verplicht)\" or \"(verplicht)\")\n   */\n  legendSuffix?: string;\n\n  /**\n   * Optional description text\n   */\n  description?: React.ReactNode;\n\n  /**\n   * Optional error message (shows when field is invalid)\n   */\n  error?: React.ReactNode;\n\n  /**\n   * Optional status message\n   */\n  status?: React.ReactNode;\n\n  /**\n   * Status variant (for status message styling)\n   * @default 'default'\n   */\n  statusVariant?: FormFieldStatusVariant;\n\n  /**\n   * Announce status changes to screen readers via an aria-live region.\n   * Only enable this for status text that changes during interaction.\n   * @default false\n   */\n  statusLive?: boolean;\n\n  /**\n   * Optional ID for the fieldset. Used as the base for the generated\n   * description/error/status IDs. Generated via useId() when omitted.\n   */\n  id?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * The form control element (CheckboxGroup, RadioGroup, DateInputGroup, etc.)\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Form Fieldset component\n * Container that combines FormFieldLegend, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus\n * Uses fieldset/legend structure for group controls (CheckboxGroup, RadioGroup, DateInputGroup)\n *\n * Description, error and status are linked via aria-describedby on the fieldset\n * itself: a group has no single control to hang the association on.\n *\n * @example\n * ```tsx\n * // Checkbox group\n * <FormFieldset legend=\"Interesses\" description=\"Selecteer minimaal één interesse\">\n *   <CheckboxGroup>\n *     <CheckboxOption label=\"Sport\" value=\"sport\" />\n *     <CheckboxOption label=\"Muziek\" value=\"music\" />\n *     <CheckboxOption label=\"Reizen\" value=\"travel\" />\n *   </CheckboxGroup>\n * </FormFieldset>\n *\n * // Radio group with error\n * <FormFieldset\n *   legend=\"Geslacht\"\n *   legendSuffix=\"(verplicht)\"\n *   error=\"Selecteer een optie\"\n * >\n *   <RadioGroup>\n *     <RadioOption name=\"gender\" label=\"Man\" value=\"male\" />\n *     <RadioOption name=\"gender\" label=\"Vrouw\" value=\"female\" />\n *     <RadioOption name=\"gender\" label=\"Anders\" value=\"other\" />\n *   </RadioGroup>\n * </FormFieldset>\n *\n * // With status\n * <FormFieldset\n *   legend=\"Voorkeuren\"\n *   status=\"Minimaal 2 opties vereist\"\n *   statusVariant=\"warning\"\n * >\n *   <CheckboxGroup>\n *     <CheckboxOption label=\"E-mail\" value=\"email\" />\n *     <CheckboxOption label=\"SMS\" value=\"sms\" />\n *     <CheckboxOption label=\"Push\" value=\"push\" />\n *   </CheckboxGroup>\n * </FormFieldset>\n * ```\n */\nexport const FormFieldset = React.forwardRef<\n  HTMLFieldSetElement,\n  FormFieldsetProps\n>(\n  (\n    {\n      legend,\n      legendSuffix,\n      description,\n      error,\n      status,\n      statusVariant = 'default',\n      statusLive = false,\n      id,\n      className,\n      children,\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const idBase = id ?? generatedId;\n\n    const descriptionId = description ? `${idBase}-description` : undefined;\n    const errorId = error ? `${idBase}-error` : undefined;\n    const statusId = status ? `${idBase}-status` : undefined;\n\n    // Bij een groep controls hangt de koppeling aan het fieldset zelf: er is\n    // geen enkele control om hem aan te hangen. De volgorde volgt de visuele\n    // volgorde, zodat een screenreader dezelfde route loopt als het oog.\n    const describedBy =\n      [descriptionId, errorId, statusId].filter(Boolean).join(' ') || undefined;\n\n    const containerClasses = classNames(\n      'dsn-form-field',\n      {\n        'dsn-form-field--invalid': !!error,\n      },\n      className\n    );\n\n    return (\n      <fieldset\n        ref={ref}\n        id={id}\n        className={containerClasses}\n        aria-describedby={describedBy}\n      >\n        <FormFieldLegend suffix={legendSuffix}>{legend}</FormFieldLegend>\n\n        {description && (\n          <FormFieldDescription id={descriptionId}>\n            {description}\n          </FormFieldDescription>\n        )}\n\n        {error && (\n          <FormFieldErrorMessage id={errorId}>{error}</FormFieldErrorMessage>\n        )}\n\n        {children}\n\n        {status && (\n          <FormFieldStatus\n            id={statusId}\n            variant={statusVariant}\n            live={statusLive}\n          >\n            {status}\n          </FormFieldStatus>\n        )}\n      </fieldset>\n    );\n  }\n);\n\nFormFieldset.displayName = 'FormFieldset';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8GA,MAAa,eAAe,MAAM,YAK9B,EACE,QACA,cACA,aACA,OACA,QACA,gBAAgB,WAChB,aAAa,OACb,IACA,WACA,YAEF,QACG;CACH,MAAM,cAAc,MAAM;CAC1B,MAAM,SAAS,MAAM;CAErB,MAAM,gBAAgB,cAAc,GAAG,OAAO,gBAAgB,KAAA;CAC9D,MAAM,UAAU,QAAQ,GAAG,OAAO,UAAU,KAAA;CAC5C,MAAM,WAAW,SAAS,GAAG,OAAO,WAAW,KAAA;CAK/C,MAAM,cACJ;EAAC;EAAe;EAAS;CAAQ,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG,KAAK,KAAA;CAElE,MAAM,mBAAmB,WACvB,kBACA,EACE,2BAA2B,CAAC,CAAC,MAC/B,GACA,SACF;CAEA,OACE,qBAAC,YAAD;EACO;EACD;EACJ,WAAW;EACX,oBAAkB;EAJpB,UAAA;GAME,oBAAC,iBAAD;IAAiB,QAAQ;IAAe,UAAA;GAAwB,CAAA;GAE/D,eACC,oBAAC,sBAAD;IAAsB,IAAI;IACvB,UAAA;GACmB,CAAA;GAGvB,SACC,oBAAC,uBAAD;IAAuB,IAAI;IAAU,UAAA;GAA6B,CAAA;GAGnE;GAEA,UACC,oBAAC,iBAAD;IACE,IAAI;IACJ,SAAS;IACT,MAAM;IAEL,UAAA;GACc,CAAA;EAEX;;AAEd,CACF;AAEA,aAAa,cAAc"}

package/dist/FormFieldset/index.d.mts

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

package/dist/Grid/Grid.d.mts

@@ -0,0 +1,37 @@
+import React from "react";
+//#region src/Grid/Grid.d.ts
+interface GridProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Voegt een maximale breedte toe (--dsn-grid-max-width) en centreert de grid horizontaal.
+   * Gebruik dit voor pagina-brede layouts met een vaste breedte.
+   * @default false
+   */
+  contained?: boolean;
+  /**
+   * Child-elementen van de grid.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Grid layout component
+ * 12-koloms CSS Grid container met gutter en optionele max-width.
+ * Gebruik GridItem voor kolomspanning van directe children.
+ *
+ * @example
+ * ```tsx
+ * // Standaard grid (volledige breedte)
+ * <Grid>
+ *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ *
+ * // Contained grid met max-width
+ * <Grid contained>
+ *   <GridItem colSpan={12}>Full-width sectie</GridItem>
+ * </Grid>
+ * ```
+ */
+declare const Grid: React.ForwardRefExoticComponent<GridProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { Grid, GridProps };
+//# sourceMappingURL=Grid.d.mts.map

package/dist/Grid/Grid.d.mts.map

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

package/dist/Grid/Grid2.mjs

@@ -0,0 +1,38 @@
+/* empty css      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Grid/Grid.tsx
+/**
+* Grid layout component
+* 12-koloms CSS Grid container met gutter en optionele max-width.
+* Gebruik GridItem voor kolomspanning van directe children.
+*
+* @example
+* ```tsx
+* // Standaard grid (volledige breedte)
+* <Grid>
+*   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+*   <GridItem colSpan={4}>Sidebar</GridItem>
+* </Grid>
+*
+* // Contained grid met max-width
+* <Grid contained>
+*   <GridItem colSpan={12}>Full-width sectie</GridItem>
+* </Grid>
+* ```
+*/
+const Grid = React.forwardRef(({ className, contained, children, ...props }, ref) => {
+	const classes = classNames("dsn-grid", contained && "dsn-grid--contained", className);
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+Grid.displayName = "Grid";
+//#endregion
+export { Grid };
+
+//# sourceMappingURL=Grid2.mjs.map

package/dist/Grid/Grid2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid2.mjs","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Grid.css';\n\nexport interface GridProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Voegt een maximale breedte toe (--dsn-grid-max-width) en centreert de grid horizontaal.\n   * Gebruik dit voor pagina-brede layouts met een vaste breedte.\n   * @default false\n   */\n  contained?: boolean;\n\n  /**\n   * Child-elementen van de grid.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Grid layout component\n * 12-koloms CSS Grid container met gutter en optionele max-width.\n * Gebruik GridItem voor kolomspanning van directe children.\n *\n * @example\n * ```tsx\n * // Standaard grid (volledige breedte)\n * <Grid>\n *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>\n *   <GridItem colSpan={4}>Sidebar</GridItem>\n * </Grid>\n *\n * // Contained grid met max-width\n * <Grid contained>\n *   <GridItem colSpan={12}>Full-width sectie</GridItem>\n * </Grid>\n * ```\n */\nexport const Grid = React.forwardRef<HTMLDivElement, GridProps>(\n  ({ className, contained, children, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-grid',\n      contained && 'dsn-grid--contained',\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nGrid.displayName = 'Grid';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCA,MAAa,OAAO,MAAM,YACvB,EAAE,WAAW,WAAW,UAAU,GAAG,SAAS,QAAQ;CACrD,MAAM,UAAU,WACd,YACA,aAAa,uBACb,SACF;CAEA,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EACpC;CACE,CAAA;AAET,CACF;AAEA,KAAK,cAAc"}

package/dist/Grid/GridItem.d.mts

@@ -0,0 +1,87 @@
+import React from "react";
+//#region src/Grid/GridItem.d.ts
+type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+type GridColPosition = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13;
+interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Aantal kolommen dat dit item beslaat (1–12).
+   * Zonder colSpan beslaat het item de volledige breedte (12 kolommen).
+   */
+  colSpan?: GridColSpan;
+  /**
+   * Kolomspanning vanaf sm-breakpoint (36em ~576px).
+   * Overschrijft colSpan op dit breekpunt.
+   */
+  colSpanSm?: GridColSpan;
+  /**
+   * Kolomspanning vanaf md-breakpoint (44em ~704px).
+   * Overschrijft colSpan op dit breekpunt.
+   */
+  colSpanMd?: GridColSpan;
+  /**
+   * Kolomspanning vanaf lg-breakpoint (64em ~1024px).
+   * Overschrijft colSpan op dit breekpunt.
+   */
+  colSpanLg?: GridColSpan;
+  /** Startkolom (grid-column-start, 1–13). */
+  colStart?: GridColPosition;
+  /** Startkolom vanaf sm-breakpoint. */
+  colStartSm?: GridColPosition;
+  /** Startkolom vanaf md-breakpoint. */
+  colStartMd?: GridColPosition;
+  /** Startkolom vanaf lg-breakpoint. */
+  colStartLg?: GridColPosition;
+  /** Eindkolom (grid-column-end, 1–13). */
+  colEnd?: GridColPosition;
+  /** Eindkolom vanaf sm-breakpoint. */
+  colEndSm?: GridColPosition;
+  /** Eindkolom vanaf md-breakpoint. */
+  colEndMd?: GridColPosition;
+  /** Eindkolom vanaf lg-breakpoint. */
+  colEndLg?: GridColPosition;
+  /**
+   * Breekt visueel uit tot de buitenrand van de grid container.
+   * Het item beslaat de volledige breedte inclusief de grid margin.
+   * Gebruik dit voor achtergrondvlakken die edge-to-edge lopen.
+   * @default false
+   */
+  fullBleed?: boolean;
+  /**
+   * Child-elementen van het grid item.
+   */
+  children?: React.ReactNode;
+}
+/**
+ * GridItem component
+ * Directe child van Grid met kolomspanning en optionele responsive varianten.
+ *
+ * @example
+ * ```tsx
+ * // Vaste kolomverdeling
+ * <Grid>
+ *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ *
+ * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg
+ * <Grid contained>
+ *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
+ *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
+ *   <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>
+ * </Grid>
+ *
+ * // Full-bleed: breekt uit tot de container-randen
+ * <Grid contained>
+ *   <GridItem colSpan={8}>Normale content</GridItem>
+ *   <GridItem fullBleed>
+ *     <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>
+ *       Edge-to-edge sectie
+ *     </div>
+ *   </GridItem>
+ * </Grid>
+ * ```
+ */
+declare const GridItem: React.ForwardRefExoticComponent<GridItemProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { GridColPosition, GridColSpan, GridItem, GridItemProps };
+//# sourceMappingURL=GridItem.d.mts.map

package/dist/Grid/GridItem.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.d.mts","names":[],"sources":["../../src/Grid/GridItem.tsx"],"mappings":";;KAGY;KACA;UAeK,sBAAsB,MAAM,eAAe;;;;;EAK1D,UAAU;;;;;EAMV,YAAY;;;;;EAMZ,YAAY;;;;;EAMZ,YAAY;;EAGZ,WAAW;;EAEX,aAAa;;EAEb,aAAa;;EAEb,aAAa;;EAGb,SAAS;;EAET,WAAW;;EAEX,WAAW;;EAEX,WAAW;;;;;;;EAQX;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCN,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}