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

package/dist/FileInput/FileInput.d.mts

@@ -0,0 +1,38 @@
+import React from "react";
+//#region src/FileInput/FileInput.d.ts
+interface FileInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Whether the input is in an invalid state
+   * @default false
+   */
+  invalid?: boolean;
+}
+/**
+ * File Input component
+ * Styled wrapper around native <input type="file"> with support for
+ * disabled and invalid states and multiple file selection.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FileInput />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="attachment">Bijlage</FormFieldLabel>
+ * <FileInput id="attachment" accept=".pdf,.docx" />
+ *
+ * // Multiple files
+ * <FileInput multiple />
+ *
+ * // Invalid
+ * <FileInput invalid aria-describedby="error" />
+ * ```
+ */
+declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { FileInput, FileInputProps };
+//# sourceMappingURL=FileInput.d.mts.map

package/dist/FileInput/FileInput.d.mts.map

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

package/dist/FileInput/FileInput2.mjs

@@ -0,0 +1,41 @@
+/* empty css           */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/FileInput/FileInput.tsx
+/**
+* File Input component
+* Styled wrapper around native <input type="file"> with support for
+* disabled and invalid states and multiple file selection.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <FileInput />
+*
+* // With label
+* <FormFieldLabel htmlFor="attachment">Bijlage</FormFieldLabel>
+* <FileInput id="attachment" accept=".pdf,.docx" />
+*
+* // Multiple files
+* <FileInput multiple />
+*
+* // Invalid
+* <FileInput invalid aria-describedby="error" />
+* ```
+*/
+const FileInput = React.forwardRef(({ className, invalid, ...props }, ref) => {
+	const classes = classNames("dsn-file-input", className);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "file",
+		className: classes,
+		"aria-invalid": invalid || void 0,
+		...props
+	});
+});
+FileInput.displayName = "FileInput";
+//#endregion
+export { FileInput };
+
+//# sourceMappingURL=FileInput2.mjs.map

package/dist/FileInput/FileInput2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput2.mjs","names":[],"sources":["../../src/FileInput/FileInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FileInput.css';\n\nexport interface FileInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n}\n\n/**\n * File Input component\n * Styled wrapper around native <input type=\"file\"> with support for\n * disabled and invalid states and multiple file selection.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FileInput />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"attachment\">Bijlage</FormFieldLabel>\n * <FileInput id=\"attachment\" accept=\".pdf,.docx\" />\n *\n * // Multiple files\n * <FileInput multiple />\n *\n * // Invalid\n * <FileInput invalid aria-describedby=\"error\" />\n * ```\n */\nexport const FileInput = React.forwardRef<HTMLInputElement, FileInputProps>(\n  ({ className, invalid, ...props }, ref) => {\n    const classes = classNames('dsn-file-input', className);\n\n    return (\n      <input\n        ref={ref}\n        type=\"file\"\n        className={classes}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nFileInput.displayName = 'FileInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,YAAY,MAAM,YAC5B,EAAE,WAAW,SAAS,GAAG,SAAS,QAAQ;CACzC,MAAM,UAAU,WAAW,kBAAkB,SAAS;CAEtD,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAW;EACX,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}

package/dist/FileInput/index.d.mts

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

package/dist/FormField/FormField.d.mts

@@ -0,0 +1,103 @@
+import { FormFieldStatusVariant } from "../FormFieldStatus/FormFieldStatus.mjs";
+import "../FormFieldStatus/index.mjs";
+import React from "react";
+//#region src/FormField/FormField.d.ts
+interface FormFieldProps {
+  /**
+   * The label text for the form field
+   */
+  label: string;
+  /**
+   * The ID of the form control. Used for the label's htmlFor and as the base
+   * for the generated description/error/status IDs. When omitted, the IDs are
+   * generated via useId(), but the label is no longer explicitly linked.
+   */
+  htmlFor?: string;
+  /**
+   * Optional suffix for the label (e.g., "(niet verplicht)" or "(verplicht)")
+   */
+  labelSuffix?: 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,
+   * such as a character counter.
+   * @default false
+   */
+  statusLive?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * The form control element (input, textarea, CheckboxGroup, RadioGroup, etc.)
+   */
+  children: React.ReactNode;
+}
+/**
+ * Form Field component
+ * Container that combines FormFieldLabel, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
+ * Uses div/label structure (for fieldset/legend use FormFieldset component)
+ *
+ * Description, error and status are linked to the control via aria-describedby.
+ * FormField clones the child element to add the attribute, so the child must be
+ * a single element that forwards props to its DOM node. An aria-describedby the
+ * consumer already set on the control is preserved.
+ *
+ * @example
+ * ```tsx
+ * // Text input field
+ * <FormField label="E-mailadres" htmlFor="email" description="We sturen hier geen spam naartoe">
+ *   <TextInput id="email" type="email" />
+ * </FormField>
+ *
+ * // With error
+ * <FormField
+ *   label="Wachtwoord"
+ *   htmlFor="password"
+ *   error="Wachtwoord moet minimaal 8 tekens bevatten"
+ * >
+ *   <PasswordInput id="password" invalid />
+ * </FormField>
+ *
+ * // With status (character counter): statusLive announces each change
+ * <FormField
+ *   label="Bio"
+ *   htmlFor="bio"
+ *   status="280 van 500 karakters gebruikt"
+ *   statusLive
+ * >
+ *   <TextArea id="bio" rows={4} />
+ * </FormField>
+ *
+ * // With positive status
+ * <FormField
+ *   label="Wachtwoord"
+ *   htmlFor="password"
+ *   status="Wachtwoord is sterk genoeg"
+ *   statusVariant="positive"
+ * >
+ *   <PasswordInput id="password" />
+ * </FormField>
+ * ```
+ */
+declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+//#endregion
+export { FormField, FormFieldProps };
+//# sourceMappingURL=FormField.d.mts.map

package/dist/FormField/FormField.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.mts","names":[],"sources":["../../src/FormField/FormField.tsx"],"mappings":";;;;UASiB;;;;EAIf;;;;;;EAOA;;;;EAKA;;;;EAKA,cAAc,MAAM;;;;EAKpB,QAAQ,MAAM;;;;EAKd,SAAS,MAAM;;;;;EAMf,gBAAgB;;;;;;;EAQhB;;;;EAKA;;;;EAKA,UAAU,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAkDL,WAAS,MAAA,0BAAA,iBAAA,MAAA,cAAA"}

package/dist/FormField/FormField2.mjs

@@ -0,0 +1,101 @@
+import { FormFieldLabel } from "../FormFieldLabel/FormFieldLabel2.mjs";
+import { FormFieldDescription } from "../FormFieldDescription/FormFieldDescription2.mjs";
+import { FormFieldErrorMessage } from "../FormFieldErrorMessage/FormFieldErrorMessage2.mjs";
+import { FormFieldStatus } from "../FormFieldStatus/FormFieldStatus2.mjs";
+import { describeControl } from "../utils/describeControl.mjs";
+/* empty css           */
+import React, { useId } from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FormField/FormField.tsx
+/**
+* Form Field component
+* Container that combines FormFieldLabel, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
+* Uses div/label structure (for fieldset/legend use FormFieldset component)
+*
+* Description, error and status are linked to the control via aria-describedby.
+* FormField clones the child element to add the attribute, so the child must be
+* a single element that forwards props to its DOM node. An aria-describedby the
+* consumer already set on the control is preserved.
+*
+* @example
+* ```tsx
+* // Text input field
+* <FormField label="E-mailadres" htmlFor="email" description="We sturen hier geen spam naartoe">
+*   <TextInput id="email" type="email" />
+* </FormField>
+*
+* // With error
+* <FormField
+*   label="Wachtwoord"
+*   htmlFor="password"
+*   error="Wachtwoord moet minimaal 8 tekens bevatten"
+* >
+*   <PasswordInput id="password" invalid />
+* </FormField>
+*
+* // With status (character counter): statusLive announces each change
+* <FormField
+*   label="Bio"
+*   htmlFor="bio"
+*   status="280 van 500 karakters gebruikt"
+*   statusLive
+* >
+*   <TextArea id="bio" rows={4} />
+* </FormField>
+*
+* // With positive status
+* <FormField
+*   label="Wachtwoord"
+*   htmlFor="password"
+*   status="Wachtwoord is sterk genoeg"
+*   statusVariant="positive"
+* >
+*   <PasswordInput id="password" />
+* </FormField>
+* ```
+*/
+const FormField = React.forwardRef(({ label, htmlFor, labelSuffix, description, error, status, statusVariant = "default", statusLive = false, className, children }, ref) => {
+	const generatedId = useId();
+	const idBase = htmlFor ?? generatedId;
+	const descriptionId = description ? `${idBase}-description` : void 0;
+	const errorId = error ? `${idBase}-error` : void 0;
+	const statusId = status ? `${idBase}-status` : void 0;
+	const control = describeControl(children, [
+		descriptionId,
+		errorId,
+		statusId
+	]);
+	const containerClasses = classNames("dsn-form-field", { "dsn-form-field--invalid": !!error }, className);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: containerClasses,
+		children: [
+			/* @__PURE__ */ jsx(FormFieldLabel, {
+				htmlFor,
+				suffix: labelSuffix,
+				children: label
+			}),
+			description && /* @__PURE__ */ jsx(FormFieldDescription, {
+				id: descriptionId,
+				children: description
+			}),
+			error && /* @__PURE__ */ jsx(FormFieldErrorMessage, {
+				id: errorId,
+				children: error
+			}),
+			control,
+			status && /* @__PURE__ */ jsx(FormFieldStatus, {
+				id: statusId,
+				variant: statusVariant,
+				live: statusLive,
+				children: status
+			})
+		]
+	});
+});
+FormField.displayName = "FormField";
+//#endregion
+export { FormField };
+
+//# sourceMappingURL=FormField2.mjs.map

package/dist/FormField/FormField2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField2.mjs","names":[],"sources":["../../src/FormField/FormField.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { FormFieldLabel } from '../FormFieldLabel';\nimport { FormFieldDescription } from '../FormFieldDescription';\nimport { FormFieldErrorMessage } from '../FormFieldErrorMessage';\nimport { FormFieldStatus, FormFieldStatusVariant } from '../FormFieldStatus';\nimport { describeControl } from '../utils/describeControl';\nimport './FormField.css';\n\nexport interface FormFieldProps {\n  /**\n   * The label text for the form field\n   */\n  label: string;\n\n  /**\n   * The ID of the form control. Used for the label's htmlFor and as the base\n   * for the generated description/error/status IDs. When omitted, the IDs are\n   * generated via useId(), but the label is no longer explicitly linked.\n   */\n  htmlFor?: string;\n\n  /**\n   * Optional suffix for the label (e.g., \"(niet verplicht)\" or \"(verplicht)\")\n   */\n  labelSuffix?: 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   * such as a character counter.\n   * @default false\n   */\n  statusLive?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * The form control element (input, textarea, CheckboxGroup, RadioGroup, etc.)\n   */\n  children: React.ReactNode;\n}\n\n/**\n * Form Field component\n * Container that combines FormFieldLabel, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus\n * Uses div/label structure (for fieldset/legend use FormFieldset component)\n *\n * Description, error and status are linked to the control via aria-describedby.\n * FormField clones the child element to add the attribute, so the child must be\n * a single element that forwards props to its DOM node. An aria-describedby the\n * consumer already set on the control is preserved.\n *\n * @example\n * ```tsx\n * // Text input field\n * <FormField label=\"E-mailadres\" htmlFor=\"email\" description=\"We sturen hier geen spam naartoe\">\n *   <TextInput id=\"email\" type=\"email\" />\n * </FormField>\n *\n * // With error\n * <FormField\n *   label=\"Wachtwoord\"\n *   htmlFor=\"password\"\n *   error=\"Wachtwoord moet minimaal 8 tekens bevatten\"\n * >\n *   <PasswordInput id=\"password\" invalid />\n * </FormField>\n *\n * // With status (character counter): statusLive announces each change\n * <FormField\n *   label=\"Bio\"\n *   htmlFor=\"bio\"\n *   status=\"280 van 500 karakters gebruikt\"\n *   statusLive\n * >\n *   <TextArea id=\"bio\" rows={4} />\n * </FormField>\n *\n * // With positive status\n * <FormField\n *   label=\"Wachtwoord\"\n *   htmlFor=\"password\"\n *   status=\"Wachtwoord is sterk genoeg\"\n *   statusVariant=\"positive\"\n * >\n *   <PasswordInput id=\"password\" />\n * </FormField>\n * ```\n */\nexport const FormField = React.forwardRef<HTMLDivElement, FormFieldProps>(\n  (\n    {\n      label,\n      htmlFor,\n      labelSuffix,\n      description,\n      error,\n      status,\n      statusVariant = 'default',\n      statusLive = false,\n      className,\n      children,\n    },\n    ref\n  ) => {\n    const generatedId = useId();\n    const idBase = htmlFor ?? 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    // Koppel de extra teksten aan de control zelf. De volgorde volgt de\n    // visuele volgorde, zodat een screenreader dezelfde route loopt als het oog.\n    const control = describeControl(children, [\n      descriptionId,\n      errorId,\n      statusId,\n    ]);\n\n    const containerClasses = classNames(\n      'dsn-form-field',\n      {\n        'dsn-form-field--invalid': !!error,\n      },\n      className\n    );\n\n    return (\n      <div ref={ref} className={containerClasses}>\n        <FormFieldLabel htmlFor={htmlFor} suffix={labelSuffix}>\n          {label}\n        </FormFieldLabel>\n\n        {description && (\n          <FormFieldDescription id={descriptionId}>\n            {description}\n          </FormFieldDescription>\n        )}\n\n        {error && (\n          <FormFieldErrorMessage id={errorId}>{error}</FormFieldErrorMessage>\n        )}\n\n        {control}\n\n        {status && (\n          <FormFieldStatus\n            id={statusId}\n            variant={statusVariant}\n            live={statusLive}\n          >\n            {status}\n          </FormFieldStatus>\n        )}\n      </div>\n    );\n  }\n);\n\nFormField.displayName = 'FormField';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkHA,MAAa,YAAY,MAAM,YAE3B,EACE,OACA,SACA,aACA,aACA,OACA,QACA,gBAAgB,WAChB,aAAa,OACb,WACA,YAEF,QACG;CACH,MAAM,cAAc,MAAM;CAC1B,MAAM,SAAS,WAAW;CAE1B,MAAM,gBAAgB,cAAc,GAAG,OAAO,gBAAgB,KAAA;CAC9D,MAAM,UAAU,QAAQ,GAAG,OAAO,UAAU,KAAA;CAC5C,MAAM,WAAW,SAAS,GAAG,OAAO,WAAW,KAAA;CAI/C,MAAM,UAAU,gBAAgB,UAAU;EACxC;EACA;EACA;CACF,CAAC;CAED,MAAM,mBAAmB,WACvB,kBACA,EACE,2BAA2B,CAAC,CAAC,MAC/B,GACA,SACF;CAEA,OACE,qBAAC,OAAD;EAAU;EAAK,WAAW;EAA1B,UAAA;GACE,oBAAC,gBAAD;IAAyB;IAAS,QAAQ;IACvC,UAAA;GACa,CAAA;GAEf,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;EAEhB;;AAET,CACF;AAEA,UAAU,cAAc"}

package/dist/FormField/index.d.mts

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

package/dist/FormFieldDescription/FormFieldDescription.d.mts

@@ -0,0 +1,53 @@
+import React from "react";
+//#region src/FormFieldDescription/FormFieldDescription.d.ts
+interface FormFieldDescriptionProps extends React.HTMLAttributes<HTMLElement> {
+  /**
+   * HTML element to render: use 'div' when the description contains block-level
+   * content, which a `<p>` cannot hold. Note that block-level content in a
+   * description is discouraged, see the component docs.
+   * @default 'p'
+   */
+  as?: 'p' | 'div';
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Description content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Form Field Description component
+ * Optional help text displayed below the label and above the form control.
+ *
+ * Use text only. The content of an `aria-describedby` reference is flattened into a
+ * single string, so list structure and links lose their meaning. VoiceOver in Safari
+ * does not read a list inside a description at all, and a link inside a description
+ * cannot be reached or activated. To make several requirements scannable, put them on
+ * their own lines with a `<br>` and a space on both sides of it: the description then
+ * stays a single `<p>` holding only text. A real list belongs above the form field,
+ * outside the `aria-describedby` reference, where it keeps its list semantics.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FormFieldDescription>
+ *   Vul hier uw officiële voornaam in zoals deze op uw paspoort staat.
+ * </FormFieldDescription>
+ *
+ * // With ID for aria-describedby
+ * <FormFieldDescription id="email-description">
+ *   We gebruiken uw e-mailadres alleen voor accountgerelateerde berichten.
+ * </FormFieldDescription>
+ *
+ * // Several requirements: one line each via <br>, never a list
+ * <FormFieldDescription id="upload-description">
+ *   Het bestand mag maximaal 5 MB zijn. <br /> Toegestane bestandstypen: pdf en docx.
+ * </FormFieldDescription>
+ * ```
+ */
+declare const FormFieldDescription: React.ForwardRefExoticComponent<FormFieldDescriptionProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { FormFieldDescription, FormFieldDescriptionProps };
+//# sourceMappingURL=FormFieldDescription.d.mts.map

package/dist/FormFieldDescription/FormFieldDescription.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldDescription.d.mts","names":[],"sources":["../../src/FormFieldDescription/FormFieldDescription.tsx"],"mappings":";;UAIiB,kCAAkC,MAAM,eAAe;;;;;;;EAOtE;;;;EAKA;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAiCN,sBAAoB,MAAA,0BAAA,4BAAA,MAAA,cAAA"}

package/dist/FormFieldDescription/FormFieldDescription2.mjs

@@ -0,0 +1,49 @@
+/* empty css                      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/FormFieldDescription/FormFieldDescription.tsx
+/**
+* Form Field Description component
+* Optional help text displayed below the label and above the form control.
+*
+* Use text only. The content of an `aria-describedby` reference is flattened into a
+* single string, so list structure and links lose their meaning. VoiceOver in Safari
+* does not read a list inside a description at all, and a link inside a description
+* cannot be reached or activated. To make several requirements scannable, put them on
+* their own lines with a `<br>` and a space on both sides of it: the description then
+* stays a single `<p>` holding only text. A real list belongs above the form field,
+* outside the `aria-describedby` reference, where it keeps its list semantics.
+*
+* @example
+* ```tsx
+* // Basic usage
+* <FormFieldDescription>
+*   Vul hier uw officiële voornaam in zoals deze op uw paspoort staat.
+* </FormFieldDescription>
+*
+* // With ID for aria-describedby
+* <FormFieldDescription id="email-description">
+*   We gebruiken uw e-mailadres alleen voor accountgerelateerde berichten.
+* </FormFieldDescription>
+*
+* // Several requirements: one line each via <br>, never a list
+* <FormFieldDescription id="upload-description">
+*   Het bestand mag maximaal 5 MB zijn. <br /> Toegestane bestandstypen: pdf en docx.
+* </FormFieldDescription>
+* ```
+*/
+const FormFieldDescription = React.forwardRef(({ as: As = "p", className, children, ...props }, ref) => {
+	const classes = classNames("dsn-form-field-description", className);
+	return /* @__PURE__ */ jsx(As, {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+FormFieldDescription.displayName = "FormFieldDescription";
+//#endregion
+export { FormFieldDescription };
+
+//# sourceMappingURL=FormFieldDescription2.mjs.map

package/dist/FormFieldDescription/FormFieldDescription2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldDescription2.mjs","names":[],"sources":["../../src/FormFieldDescription/FormFieldDescription.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FormFieldDescription.css';\n\nexport interface FormFieldDescriptionProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * HTML element to render: use 'div' when the description contains block-level\n   * content, which a `<p>` cannot hold. Note that block-level content in a\n   * description is discouraged, see the component docs.\n   * @default 'p'\n   */\n  as?: 'p' | 'div';\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Description content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Description component\n * Optional help text displayed below the label and above the form control.\n *\n * Use text only. The content of an `aria-describedby` reference is flattened into a\n * single string, so list structure and links lose their meaning. VoiceOver in Safari\n * does not read a list inside a description at all, and a link inside a description\n * cannot be reached or activated. To make several requirements scannable, put them on\n * their own lines with a `<br>` and a space on both sides of it: the description then\n * stays a single `<p>` holding only text. A real list belongs above the form field,\n * outside the `aria-describedby` reference, where it keeps its list semantics.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FormFieldDescription>\n *   Vul hier uw officiële voornaam in zoals deze op uw paspoort staat.\n * </FormFieldDescription>\n *\n * // With ID for aria-describedby\n * <FormFieldDescription id=\"email-description\">\n *   We gebruiken uw e-mailadres alleen voor accountgerelateerde berichten.\n * </FormFieldDescription>\n *\n * // Several requirements: one line each via <br>, never a list\n * <FormFieldDescription id=\"upload-description\">\n *   Het bestand mag maximaal 5 MB zijn. <br /> Toegestane bestandstypen: pdf en docx.\n * </FormFieldDescription>\n * ```\n */\nexport const FormFieldDescription = React.forwardRef<\n  HTMLElement,\n  FormFieldDescriptionProps\n>(({ as: As = 'p', className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-description', className);\n\n  return (\n    <As\n      ref={ref as React.Ref<HTMLParagraphElement>}\n      className={classes}\n      {...props}\n    >\n      {children}\n    </As>\n  );\n});\n\nFormFieldDescription.displayName = 'FormFieldDescription';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsDA,MAAa,uBAAuB,MAAM,YAGvC,EAAE,IAAI,KAAK,KAAK,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1D,MAAM,UAAU,WAAW,8BAA8B,SAAS;CAElE,OACE,oBAAC,IAAD;EACO;EACL,WAAW;EACX,GAAI;EAEH;CACC,CAAA;AAER,CAAC;AAED,qBAAqB,cAAc"}

package/dist/FormFieldDescription/index.d.mts

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

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.mts

@@ -0,0 +1,42 @@
+import React from "react";
+//#region src/FormFieldErrorMessage/FormFieldErrorMessage.d.ts
+interface FormFieldErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /**
+   * Whether to show the exclamation-circle icon before the message
+   * @default true
+   */
+  showIcon?: boolean;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Error message content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Form Field Error Message component
+ * Error message displayed below the description and above the form control
+ * Shows exclamation-circle icon by default for visual emphasis
+ *
+ * @example
+ * ```tsx
+ * // Basic usage with icon (default)
+ * <FormFieldErrorMessage>Dit veld is verplicht.</FormFieldErrorMessage>
+ *
+ * // Without icon
+ * <FormFieldErrorMessage showIcon={false}>
+ *   Ongeldige waarde opgegeven.
+ * </FormFieldErrorMessage>
+ *
+ * // With ID for aria-describedby
+ * <FormFieldErrorMessage id="email-error">
+ *   Vul een geldig e-mailadres in.
+ * </FormFieldErrorMessage>
+ * ```
+ */
+declare const FormFieldErrorMessage: React.ForwardRefExoticComponent<FormFieldErrorMessageProps & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { FormFieldErrorMessage, FormFieldErrorMessageProps };
+//# sourceMappingURL=FormFieldErrorMessage.d.mts.map

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldErrorMessage.d.mts","names":[],"sources":["../../src/FormFieldErrorMessage/FormFieldErrorMessage.tsx"],"mappings":";;UAKiB,mCAAmC,MAAM,eAAe;;;;;EAKvE;;;;EAKA;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;;cAwBN,uBAAqB,MAAA,0BAAA,6BAAA,MAAA,cAAA"}

package/dist/FormFieldErrorMessage/FormFieldErrorMessage2.mjs

@@ -0,0 +1,44 @@
+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/FormFieldErrorMessage/FormFieldErrorMessage.tsx
+/**
+* Form Field Error Message component
+* Error message displayed below the description and above the form control
+* Shows exclamation-circle icon by default for visual emphasis
+*
+* @example
+* ```tsx
+* // Basic usage with icon (default)
+* <FormFieldErrorMessage>Dit veld is verplicht.</FormFieldErrorMessage>
+*
+* // Without icon
+* <FormFieldErrorMessage showIcon={false}>
+*   Ongeldige waarde opgegeven.
+* </FormFieldErrorMessage>
+*
+* // With ID for aria-describedby
+* <FormFieldErrorMessage id="email-error">
+*   Vul een geldig e-mailadres in.
+* </FormFieldErrorMessage>
+* ```
+*/
+const FormFieldErrorMessage = React.forwardRef(({ showIcon = true, className, children, ...props }, ref) => {
+	const classes = classNames("dsn-form-field-error-message", className);
+	return /* @__PURE__ */ jsxs("p", {
+		ref,
+		className: classes,
+		...props,
+		children: [showIcon && /* @__PURE__ */ jsx(Icon, {
+			name: "exclamation-circle",
+			"aria-hidden": true
+		}), children]
+	});
+});
+FormFieldErrorMessage.displayName = "FormFieldErrorMessage";
+//#endregion
+export { FormFieldErrorMessage };
+
+//# sourceMappingURL=FormFieldErrorMessage2.mjs.map

package/dist/FormFieldErrorMessage/FormFieldErrorMessage2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldErrorMessage2.mjs","names":[],"sources":["../../src/FormFieldErrorMessage/FormFieldErrorMessage.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport './FormFieldErrorMessage.css';\n\nexport interface FormFieldErrorMessageProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  /**\n   * Whether to show the exclamation-circle icon before the message\n   * @default true\n   */\n  showIcon?: boolean;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Error message content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Error Message component\n * Error message displayed below the description and above the form control\n * Shows exclamation-circle icon by default for visual emphasis\n *\n * @example\n * ```tsx\n * // Basic usage with icon (default)\n * <FormFieldErrorMessage>Dit veld is verplicht.</FormFieldErrorMessage>\n *\n * // Without icon\n * <FormFieldErrorMessage showIcon={false}>\n *   Ongeldige waarde opgegeven.\n * </FormFieldErrorMessage>\n *\n * // With ID for aria-describedby\n * <FormFieldErrorMessage id=\"email-error\">\n *   Vul een geldig e-mailadres in.\n * </FormFieldErrorMessage>\n * ```\n */\nexport const FormFieldErrorMessage = React.forwardRef<\n  HTMLParagraphElement,\n  FormFieldErrorMessageProps\n>(({ showIcon = true, className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-error-message', className);\n\n  return (\n    <p ref={ref} className={classes} {...props}>\n      {showIcon && <Icon name=\"exclamation-circle\" aria-hidden />}\n      {children}\n    </p>\n  );\n});\n\nFormFieldErrorMessage.displayName = 'FormFieldErrorMessage';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CA,MAAa,wBAAwB,MAAM,YAGxC,EAAE,WAAW,MAAM,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC7D,MAAM,UAAU,WAAW,gCAAgC,SAAS;CAEpE,OACE,qBAAC,KAAD;EAAQ;EAAK,WAAW;EAAS,GAAI;EAArC,UAAA,CACG,YAAY,oBAAC,MAAD;GAAM,MAAK;GAAqB,eAAA;EAAa,CAAA,GACzD,QACA;;AAEP,CAAC;AAED,sBAAsB,cAAc"}

package/dist/FormFieldErrorMessage/index.d.mts

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

package/dist/FormFieldLabel/FormFieldLabel.d.mts

@@ -0,0 +1,40 @@
+import React from "react";
+//#region src/FormFieldLabel/FormFieldLabel.d.ts
+interface FormFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * Optional suffix text displayed after the label (e.g., "(niet verplicht)")
+   */
+  suffix?: string;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Label content
+   */
+  children?: React.ReactNode;
+}
+/**
+ * Form Field Label component
+ * Label for form controls with optional suffix for "(niet verplicht)" or "(verplicht)"
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FormFieldLabel htmlFor="firstname">Voornaam</FormFieldLabel>
+ *
+ * // With suffix for optional fields
+ * <FormFieldLabel htmlFor="middlename" suffix="(niet verplicht)">
+ *   Tussenvoegsel
+ * </FormFieldLabel>
+ *
+ * // With suffix for required fields (when most fields are optional)
+ * <FormFieldLabel htmlFor="email" suffix="(verplicht)">
+ *   E-mailadres
+ * </FormFieldLabel>
+ * ```
+ */
+declare const FormFieldLabel: React.ForwardRefExoticComponent<FormFieldLabelProps & React.RefAttributes<HTMLLabelElement>>;
+//#endregion
+export { FormFieldLabel, FormFieldLabelProps };
+//# sourceMappingURL=FormFieldLabel.d.mts.map

package/dist/FormFieldLabel/FormFieldLabel.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.d.mts","names":[],"sources":["../../src/FormFieldLabel/FormFieldLabel.tsx"],"mappings":";;UAIiB,4BAA4B,MAAM,oBAAoB;;;;EAIrE;;;;EAKA;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;;;;;;;;;cAuBN,gBAAc,MAAA,0BAAA,sBAAA,MAAA,cAAA"}

package/dist/FormFieldLabel/FormFieldLabel2.mjs

@@ -0,0 +1,42 @@
+/* empty css                */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/FormFieldLabel/FormFieldLabel.tsx
+/**
+* Form Field Label component
+* Label for form controls with optional suffix for "(niet verplicht)" or "(verplicht)"
+*
+* @example
+* ```tsx
+* // Basic usage
+* <FormFieldLabel htmlFor="firstname">Voornaam</FormFieldLabel>
+*
+* // With suffix for optional fields
+* <FormFieldLabel htmlFor="middlename" suffix="(niet verplicht)">
+*   Tussenvoegsel
+* </FormFieldLabel>
+*
+* // With suffix for required fields (when most fields are optional)
+* <FormFieldLabel htmlFor="email" suffix="(verplicht)">
+*   E-mailadres
+* </FormFieldLabel>
+* ```
+*/
+const FormFieldLabel = React.forwardRef(({ suffix, className, children, ...props }, ref) => {
+	const classes = classNames("dsn-form-field-label", className);
+	return /* @__PURE__ */ jsxs("label", {
+		ref,
+		className: classes,
+		...props,
+		children: [children, suffix && /* @__PURE__ */ jsx("span", {
+			className: "dsn-form-field-label-suffix",
+			children: suffix
+		})]
+	});
+});
+FormFieldLabel.displayName = "FormFieldLabel";
+//#endregion
+export { FormFieldLabel };
+
+//# sourceMappingURL=FormFieldLabel2.mjs.map

package/dist/FormFieldLabel/FormFieldLabel2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel2.mjs","names":[],"sources":["../../src/FormFieldLabel/FormFieldLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './FormFieldLabel.css';\n\nexport interface FormFieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  /**\n   * Optional suffix text displayed after the label (e.g., \"(niet verplicht)\")\n   */\n  suffix?: string;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Label content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Form Field Label component\n * Label for form controls with optional suffix for \"(niet verplicht)\" or \"(verplicht)\"\n *\n * @example\n * ```tsx\n * // Basic usage\n * <FormFieldLabel htmlFor=\"firstname\">Voornaam</FormFieldLabel>\n *\n * // With suffix for optional fields\n * <FormFieldLabel htmlFor=\"middlename\" suffix=\"(niet verplicht)\">\n *   Tussenvoegsel\n * </FormFieldLabel>\n *\n * // With suffix for required fields (when most fields are optional)\n * <FormFieldLabel htmlFor=\"email\" suffix=\"(verplicht)\">\n *   E-mailadres\n * </FormFieldLabel>\n * ```\n */\nexport const FormFieldLabel = React.forwardRef<\n  HTMLLabelElement,\n  FormFieldLabelProps\n>(({ suffix, className, children, ...props }, ref) => {\n  const classes = classNames('dsn-form-field-label', className);\n\n  return (\n    <label ref={ref} className={classes} {...props}>\n      {children}\n      {suffix && <span className=\"dsn-form-field-label-suffix\">{suffix}</span>}\n    </label>\n  );\n});\n\nFormFieldLabel.displayName = 'FormFieldLabel';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyCA,MAAa,iBAAiB,MAAM,YAGjC,EAAE,QAAQ,WAAW,UAAU,GAAG,SAAS,QAAQ;CACpD,MAAM,UAAU,WAAW,wBAAwB,SAAS;CAE5D,OACE,qBAAC,SAAD;EAAY;EAAK,WAAW;EAAS,GAAI;EAAzC,UAAA,CACG,UACA,UAAU,oBAAC,QAAD;GAAM,WAAU;GAA+B,UAAA;EAAa,CAAA,CAClE;;AAEX,CAAC;AAED,eAAe,cAAc"}

package/dist/FormFieldLabel/index.d.mts

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