@dsn-starter-kit/components-react 1.0.0

package/dist/FileInput/FileInput.css

@@ -0,0 +1,112 @@
+/**
+ * File Input Component
+ * Unstyled container + styled ::file-selector-button (as dsn-button--default).
+ * No outer border or background: the browser renders button + filename text.
+ *
+ * Usage:
+ * <input type="file" class="dsn-file-input" />
+ */
+
+.dsn-file-input {
+  /* Typography */
+  font-family: var(--dsn-file-input-font-family);
+  font-size: var(--dsn-file-input-font-size);
+  font-weight: var(--dsn-file-input-font-weight);
+  line-height: var(--dsn-file-input-line-height);
+
+  /* Subtle color for the "No file chosen" / filename text */
+  color: var(--dsn-file-input-color);
+  background-color: transparent;
+  border: none;
+
+  /* Sizing */
+  min-block-size: var(--dsn-file-input-min-block-size);
+  min-inline-size: var(--dsn-file-input-min-inline-size);
+
+  /* Display */
+  display: block;
+  box-sizing: border-box;
+
+  /* Vertical space so the ::file-selector-button focus ring is not clipped */
+  padding-block: calc(
+    var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width)
+  );
+  padding-inline: 0;
+}
+
+/* Remove browser default focus outline — handled via ::file-selector-button below */
+.dsn-file-input:focus {
+  outline: none;
+}
+
+/* File selector button — styled like dsn-button--default */
+.dsn-file-input::file-selector-button {
+  /* Typography */
+  font-family: var(--dsn-button-font-family);
+  font-size: var(--dsn-button-size-default-font-size);
+  font-weight: var(--dsn-button-font-weight);
+  line-height: var(--dsn-button-line-height);
+
+  /* Colors */
+  background-color: var(--dsn-button-default-background-color);
+  color: var(--dsn-button-default-color);
+
+  /* Border — full radius on all sides */
+  border: var(--dsn-button-border-width) solid
+    var(--dsn-button-default-border-color);
+  border-radius: var(--dsn-button-border-radius);
+
+  /* Spacing */
+  padding-block: var(--dsn-button-size-default-padding-block);
+  padding-inline: var(--dsn-button-size-default-padding-inline);
+  margin-inline-end: var(--dsn-file-input-column-gap);
+
+  /* Sizing */
+  min-block-size: var(--dsn-button-min-block-size);
+
+  /* Interaction */
+  cursor: pointer;
+
+  /* Transitions */
+  transition:
+    background-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    border-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+/* Hover — button gets default hover styling */
+.dsn-file-input:hover:not(:disabled)::file-selector-button {
+  background-color: var(--dsn-button-default-hover-background-color);
+  color: var(--dsn-button-default-hover-color);
+  border-color: var(--dsn-button-default-hover-border-color);
+}
+
+/* Focus — button shows the design system focus ring */
+.dsn-file-input:focus-visible::file-selector-button {
+  background-color: var(--dsn-focus-background-color);
+  color: var(--dsn-focus-color);
+  border-color: var(--dsn-focus-background-color);
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+  box-shadow: 0 0 0
+    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
+    var(--dsn-focus-inverse-outline-color);
+}
+
+/* Disabled — button uses the same tokens as dsn-button:disabled; text is muted */
+.dsn-file-input:disabled {
+  color: var(--dsn-file-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.dsn-file-input:disabled::file-selector-button {
+  background-color: var(--dsn-button-disabled-background-color);
+  color: var(--dsn-button-disabled-color);
+  border-color: var(--dsn-button-disabled-border-color);
+  cursor: not-allowed;
+}
+

package/dist/FileInput/FileInput.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import './FileInput.css';
+export 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" />
+ * ```
+ */
+export declare const FileInput: React.ForwardRefExoticComponent<FileInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=FileInput.d.ts.map

package/dist/FileInput/FileInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.d.ts","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,SAAS,yFAcrB,CAAC"}

package/dist/FileInput/FileInput.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './FileInput.css';
+/**
+ * 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" />
+ * ```
+ */
+export const FileInput = React.forwardRef(({ className, invalid, ...props }, ref) => {
+    const classes = classNames('dsn-file-input', className);
+    return (_jsx("input", { ref: ref, type: "file", className: classes, "aria-invalid": invalid || undefined, ...props }));
+});
+FileInput.displayName = 'FileInput';
+//# sourceMappingURL=FileInput.js.map

package/dist/FileInput/FileInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../src/FileInput/FileInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,iBAAiB,CAAC;AAkBzB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxC,MAAM,OAAO,GAAG,UAAU,CAAC,gBAAgB,EAAE,SAAS,CAAC,CAAC;IAExD,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,OAAO,kBACJ,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/FileInput/index.d.ts

@@ -0,0 +1,3 @@
+export { FileInput } from './FileInput';
+export type { FileInputProps } from './FileInput';
+//# sourceMappingURL=index.d.ts.map

package/dist/FileInput/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FileInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/FileInput/index.js

@@ -0,0 +1,2 @@
+export { FileInput } from './FileInput';
+//# sourceMappingURL=index.js.map

package/dist/FileInput/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FileInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/FormField/FormField.css

@@ -0,0 +1,16 @@
+/**
+ * FormField Component Styles
+ * Container component that combines FormFieldLabel, FormFieldDescription,
+ * FormFieldErrorMessage, FormFieldStatus, and form controls
+ */
+
+.dsn-form-field {
+  display: block;
+}
+
+/* Invalid state - thick red left border when error message is present */
+.dsn-form-field--invalid {
+  border-inline-start: var(--dsn-form-field-invalid-border-inline-start-width)
+    solid var(--dsn-form-field-invalid-border-inline-start-color);
+  padding-inline-start: var(--dsn-form-field-invalid-padding-inline-start);
+}

package/dist/FormField/FormField.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+import { FormFieldStatusVariant } from '../FormFieldStatus';
+import './FormField.css';
+export interface FormFieldProps {
+    /**
+     * The label text for the form field
+     */
+    label: string;
+    /**
+     * The ID of the form control (used for htmlFor/aria-describedby)
+     */
+    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;
+    /**
+     * 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)
+ *
+ * @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)
+ * <FormField
+ *   label="Bio"
+ *   htmlFor="bio"
+ *   status="280 van 500 karakters gebruikt"
+ * >
+ *   <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>
+ * ```
+ */
+export declare const FormField: React.ForwardRefExoticComponent<FormFieldProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=FormField.d.ts.map

package/dist/FormField/FormField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.d.ts","sourceRoot":"","sources":["../../src/FormField/FormField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAmB,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,iBAAiB,CAAC;AAEzB,MAAM,WAAW,cAAc;IAC7B;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAExB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,sBAAsB,CAAC;IAEvC;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,SAAS,uFAsDrB,CAAC"}

package/dist/FormField/FormField.js

@@ -0,0 +1,60 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { FormFieldLabel } from '../FormFieldLabel';
+import { FormFieldDescription } from '../FormFieldDescription';
+import { FormFieldErrorMessage } from '../FormFieldErrorMessage';
+import { FormFieldStatus } from '../FormFieldStatus';
+import './FormField.css';
+/**
+ * Form Field component
+ * Container that combines FormFieldLabel, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
+ * Uses div/label structure (for fieldset/legend use FormFieldset component)
+ *
+ * @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)
+ * <FormField
+ *   label="Bio"
+ *   htmlFor="bio"
+ *   status="280 van 500 karakters gebruikt"
+ * >
+ *   <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>
+ * ```
+ */
+export const FormField = React.forwardRef(({ label, htmlFor, labelSuffix, description, error, status, statusVariant = 'default', className, children, }, ref) => {
+    const descriptionId = htmlFor && description ? `${htmlFor}-description` : undefined;
+    const errorId = htmlFor && error ? `${htmlFor}-error` : undefined;
+    const statusId = htmlFor && status ? `${htmlFor}-status` : undefined;
+    const containerClasses = classNames('dsn-form-field', {
+        'dsn-form-field--invalid': !!error,
+    }, className);
+    return (_jsxs("div", { ref: ref, className: containerClasses, children: [_jsx(FormFieldLabel, { htmlFor: htmlFor, suffix: labelSuffix, children: label }), description && (_jsx(FormFieldDescription, { id: descriptionId, children: description })), error && (_jsx(FormFieldErrorMessage, { id: errorId, children: error })), children, status && (_jsx(FormFieldStatus, { id: statusId, variant: statusVariant, children: status }))] }));
+});
+FormField.displayName = 'FormField';
+//# sourceMappingURL=FormField.js.map

package/dist/FormField/FormField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormField.js","sourceRoot":"","sources":["../../src/FormField/FormField.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,cAAc,EAAE,MAAM,mBAAmB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,EAAE,eAAe,EAA0B,MAAM,oBAAoB,CAAC;AAC7E,OAAO,iBAAiB,CAAC;AAkDzB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CACvC,CACE,EACE,KAAK,EACL,OAAO,EACP,WAAW,EACX,WAAW,EACX,KAAK,EACL,MAAM,EACN,aAAa,GAAG,SAAS,EACzB,SAAS,EACT,QAAQ,GACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GACjB,OAAO,IAAI,WAAW,CAAC,CAAC,CAAC,GAAG,OAAO,cAAc,CAAC,CAAC,CAAC,SAAS,CAAC;IAChE,MAAM,OAAO,GAAG,OAAO,IAAI,KAAK,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC;IAClE,MAAM,QAAQ,GAAG,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,OAAO,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC;IAErE,MAAM,gBAAgB,GAAG,UAAU,CACjC,gBAAgB,EAChB;QACE,yBAAyB,EAAE,CAAC,CAAC,KAAK;KACnC,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,aACxC,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,YAClD,KAAK,GACS,EAEhB,WAAW,IAAI,CACd,KAAC,oBAAoB,IAAC,EAAE,EAAE,aAAa,YACpC,WAAW,GACS,CACxB,EAEA,KAAK,IAAI,CACR,KAAC,qBAAqB,IAAC,EAAE,EAAE,OAAO,YAAG,KAAK,GAAyB,CACpE,EAEA,QAAQ,EAER,MAAM,IAAI,CACT,KAAC,eAAe,IAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,EAAE,aAAa,YAClD,MAAM,GACS,CACnB,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,SAAS,CAAC,WAAW,GAAG,WAAW,CAAC"}

package/dist/FormField/index.d.ts

@@ -0,0 +1,3 @@
+export { FormField } from './FormField';
+export type { FormFieldProps } from './FormField';
+//# sourceMappingURL=index.d.ts.map

package/dist/FormField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/FormField/index.js

@@ -0,0 +1,2 @@
+export { FormField } from './FormField';
+//# sourceMappingURL=index.js.map

package/dist/FormField/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FormField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC"}

package/dist/FormFieldDescription/FormFieldDescription.css

@@ -0,0 +1,25 @@
+/**
+ * FormFieldDescription Component Styles for React
+ * Re-exports the base FormFieldDescription styles from components-html
+ */
+
+/**
+ * Form Field Description Component
+ * Optional help text displayed below the label and above the form control
+ *
+ * Usage:
+ * <p class="dsn-form-field-description">
+ *   Vul hier uw officiële voornaam in zoals deze op uw paspoort staat.
+ * </p>
+ */
+
+.dsn-form-field-description {
+  font-family: var(--dsn-form-field-description-font-family);
+  font-size: var(--dsn-form-field-description-font-size);
+  font-weight: var(--dsn-form-field-description-font-weight);
+  line-height: var(--dsn-form-field-description-line-height);
+  color: var(--dsn-form-field-description-color);
+  margin-block-start: 0;
+  margin-block-end: var(--dsn-form-field-description-margin-block-end);
+}
+

package/dist/FormFieldDescription/FormFieldDescription.d.ts

@@ -0,0 +1,47 @@
+import React from 'react';
+import './FormFieldDescription.css';
+export interface FormFieldDescriptionProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * HTML element to render — use 'div' when the description contains block-level
+     * content such as a list (a <ul> cannot be nested inside a <p>)
+     * @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 `as="div"` when the description contains block-level content like a list.
+ *
+ * @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>
+ *
+ * // With a list (requires as="div" to avoid invalid HTML)
+ * <FormFieldDescription as="div" id="upload-description">
+ *   Toegestane bestandstypen:
+ *   <UnorderedList>
+ *     <li>PDF (max. 5 MB)</li>
+ *     <li>Word-documenten (.docx)</li>
+ *   </UnorderedList>
+ * </FormFieldDescription>
+ * ```
+ */
+export declare const FormFieldDescription: React.ForwardRefExoticComponent<FormFieldDescriptionProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=FormFieldDescription.d.ts.map

package/dist/FormFieldDescription/FormFieldDescription.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldDescription.d.ts","sourceRoot":"","sources":["../../src/FormFieldDescription/FormFieldDescription.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,yBAA0B,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClF;;;;OAIG;IACH,EAAE,CAAC,EAAE,GAAG,GAAG,KAAK,CAAC;IAEjB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,oBAAoB,+FAe/B,CAAC"}

package/dist/FormFieldDescription/FormFieldDescription.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './FormFieldDescription.css';
+/**
+ * Form Field Description component
+ * Optional help text displayed below the label and above the form control.
+ * Use `as="div"` when the description contains block-level content like a list.
+ *
+ * @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>
+ *
+ * // With a list (requires as="div" to avoid invalid HTML)
+ * <FormFieldDescription as="div" id="upload-description">
+ *   Toegestane bestandstypen:
+ *   <UnorderedList>
+ *     <li>PDF (max. 5 MB)</li>
+ *     <li>Word-documenten (.docx)</li>
+ *   </UnorderedList>
+ * </FormFieldDescription>
+ * ```
+ */
+export const FormFieldDescription = React.forwardRef(({ as: As = 'p', className, children, ...props }, ref) => {
+    const classes = classNames('dsn-form-field-description', className);
+    return (_jsx(As, { ref: ref, className: classes, ...props, children: children }));
+});
+FormFieldDescription.displayName = 'FormFieldDescription';
+//# sourceMappingURL=FormFieldDescription.js.map

package/dist/FormFieldDescription/FormFieldDescription.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldDescription.js","sourceRoot":"","sources":["../../src/FormFieldDescription/FormFieldDescription.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,4BAA4B,CAAC;AAqBpC;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,KAAK,CAAC,UAAU,CAGlD,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzD,MAAM,OAAO,GAAG,UAAU,CAAC,4BAA4B,EAAE,SAAS,CAAC,CAAC;IAEpE,OAAO,CACL,KAAC,EAAE,IACD,GAAG,EAAE,GAAsC,EAC3C,SAAS,EAAE,OAAO,KACd,KAAK,YAER,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAC"}

package/dist/FormFieldDescription/index.d.ts

@@ -0,0 +1,3 @@
+export { FormFieldDescription } from './FormFieldDescription';
+export type { FormFieldDescriptionProps } from './FormFieldDescription';
+//# sourceMappingURL=index.d.ts.map

package/dist/FormFieldDescription/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,YAAY,EAAE,yBAAyB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/FormFieldDescription/index.js

@@ -0,0 +1,2 @@
+export { FormFieldDescription } from './FormFieldDescription';
+//# sourceMappingURL=index.js.map

package/dist/FormFieldDescription/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FormFieldDescription/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC"}

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.css

@@ -0,0 +1,38 @@
+/**
+ * FormFieldErrorMessage Component Styles for React
+ * Re-exports the base FormFieldErrorMessage styles from components-html
+ */
+
+/**
+ * Form Field Error Message Component
+ * Error message displayed below the description and above the form control
+ * Supports optional icon (exclamation-circle) before the message text
+ *
+ * Usage:
+ * <p class="dsn-form-field-error-message">
+ *   <svg class="dsn-icon" aria-hidden="true">...</svg>
+ *   Dit veld is verplicht.
+ * </p>
+ */
+
+.dsn-form-field-error-message {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dsn-form-field-error-message-gap);
+  font-family: var(--dsn-form-field-error-message-font-family);
+  font-size: var(--dsn-form-field-error-message-font-size);
+  font-weight: var(--dsn-form-field-error-message-font-weight);
+  line-height: var(--dsn-form-field-error-message-line-height);
+  color: var(--dsn-form-field-error-message-color);
+  margin-block-start: 0;
+  margin-block-end: var(--dsn-form-field-error-message-margin-block-end);
+}
+
+/* Icon sizing within error message */
+.dsn-form-field-error-message > .dsn-icon {
+  flex-shrink: 0;
+  width: var(--dsn-form-field-error-message-icon-size);
+  height: var(--dsn-form-field-error-message-icon-size);
+  color: inherit;
+}
+

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import './FormFieldErrorMessage.css';
+export 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>
+ * ```
+ */
+export declare const FormFieldErrorMessage: React.ForwardRefExoticComponent<FormFieldErrorMessageProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=FormFieldErrorMessage.d.ts.map

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldErrorMessage.d.ts","sourceRoot":"","sources":["../../src/FormFieldErrorMessage/FormFieldErrorMessage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,6BAA6B,CAAC;AAErC,MAAM,WAAW,0BAA2B,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IAC5F;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,qBAAqB,yGAYhC,CAAC"}

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Icon } from '../Icon';
+import './FormFieldErrorMessage.css';
+/**
+ * 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>
+ * ```
+ */
+export const FormFieldErrorMessage = React.forwardRef(({ showIcon = true, className, children, ...props }, ref) => {
+    const classes = classNames('dsn-form-field-error-message', className);
+    return (_jsxs("p", { ref: ref, className: classes, ...props, children: [showIcon && _jsx(Icon, { name: "exclamation-circle", "aria-hidden": true }), children] }));
+});
+FormFieldErrorMessage.displayName = 'FormFieldErrorMessage';
+//# sourceMappingURL=FormFieldErrorMessage.js.map

package/dist/FormFieldErrorMessage/FormFieldErrorMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldErrorMessage.js","sourceRoot":"","sources":["../../src/FormFieldErrorMessage/FormFieldErrorMessage.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,6BAA6B,CAAC;AAoBrC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG,KAAK,CAAC,UAAU,CAGnD,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5D,MAAM,OAAO,GAAG,UAAU,CAAC,8BAA8B,EAAE,SAAS,CAAC,CAAC;IAEtE,OAAO,CACL,aAAG,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aACvC,QAAQ,IAAI,KAAC,IAAI,IAAC,IAAI,EAAC,oBAAoB,wBAAe,EAC1D,QAAQ,IACP,CACL,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,WAAW,GAAG,uBAAuB,CAAC"}

package/dist/FormFieldErrorMessage/index.d.ts

@@ -0,0 +1,3 @@
+export { FormFieldErrorMessage } from './FormFieldErrorMessage';
+export type { FormFieldErrorMessageProps } from './FormFieldErrorMessage';
+//# sourceMappingURL=index.d.ts.map