@dsn-starter-kit/components-react 1.0.0

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

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

package/dist/FormFieldErrorMessage/index.js

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

package/dist/FormFieldErrorMessage/index.js.map

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

package/dist/FormFieldLabel/FormFieldLabel.css

@@ -0,0 +1,48 @@
+/**
+ * FormFieldLabel Component Styles for React
+ * Re-exports the base FormFieldLabel styles from components-html
+ */
+
+/**
+ * Form Field Label Component
+ * Label for form controls with optional suffix for "(niet verplicht)" or "(verplicht)"
+ *
+ * Usage:
+ * <label class="dsn-form-field-label">
+ *   Voornaam
+ *   <span class="dsn-form-field-label-suffix">(niet verplicht)</span>
+ * </label>
+ */
+
+.dsn-form-field-label {
+  display: block;
+  font-family: var(--dsn-form-field-label-font-family);
+  font-size: var(--dsn-form-field-label-font-size);
+  font-weight: var(--dsn-form-field-label-font-weight);
+  line-height: var(--dsn-form-field-label-line-height);
+  color: var(--dsn-form-field-label-color);
+  margin-block-start: 0;
+  margin-block-end: var(--dsn-form-field-label-margin-block-end);
+}
+
+/* Reduced margin when followed by description */
+.dsn-form-field-label:has(+ .dsn-form-field-description) {
+  margin-block-end: var(
+    --dsn-form-field-label-margin-block-end-with-description
+  );
+}
+
+/**
+ * Form Field Label Suffix
+ * Optional suffix text within the label (e.g., "(niet verplicht)")
+ * Same size but regular weight and inline with label text
+ */
+.dsn-form-field-label-suffix {
+  font-family: var(--dsn-form-field-label-suffix-font-family);
+  font-size: var(--dsn-form-field-label-suffix-font-size);
+  font-weight: var(--dsn-form-field-label-suffix-font-weight);
+  line-height: var(--dsn-form-field-label-suffix-line-height);
+  color: var(--dsn-form-field-label-suffix-color);
+  margin-inline-start: var(--dsn-form-field-label-suffix-margin-inline-start);
+}
+

package/dist/FormFieldLabel/FormFieldLabel.d.ts

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

package/dist/FormFieldLabel/FormFieldLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.d.ts","sourceRoot":"","sources":["../../src/FormFieldLabel/FormFieldLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,sBAAsB,CAAC;AAE9B,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;IACtF;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,cAAc,8FAYzB,CAAC"}

package/dist/FormFieldLabel/FormFieldLabel.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './FormFieldLabel.css';
+/**
+ * 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>
+ * ```
+ */
+export const FormFieldLabel = React.forwardRef(({ suffix, className, children, ...props }, ref) => {
+    const classes = classNames('dsn-form-field-label', className);
+    return (_jsxs("label", { ref: ref, className: classes, ...props, children: [children, suffix && _jsx("span", { className: "dsn-form-field-label-suffix", children: suffix })] }));
+});
+FormFieldLabel.displayName = 'FormFieldLabel';
+//# sourceMappingURL=FormFieldLabel.js.map

package/dist/FormFieldLabel/FormFieldLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLabel.js","sourceRoot":"","sources":["../../src/FormFieldLabel/FormFieldLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,sBAAsB,CAAC;AAmB9B;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,KAAK,CAAC,UAAU,CAG5C,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAE9D,OAAO,CACL,iBAAO,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aAC3C,QAAQ,EACR,MAAM,IAAI,eAAM,SAAS,EAAC,6BAA6B,YAAE,MAAM,GAAQ,IAClE,CACT,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,WAAW,GAAG,gBAAgB,CAAC"}

package/dist/FormFieldLabel/index.d.ts

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

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

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

package/dist/FormFieldLabel/index.js

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

package/dist/FormFieldLabel/index.js.map

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

package/dist/FormFieldLegend/FormFieldLegend.css

@@ -0,0 +1,7 @@
+/**
+ * FormFieldLegend Component Styles
+ * Re-uses FormFieldLabel styles for consistent appearance
+ * The legend element uses the same .dsn-form-field-label class
+ */
+
+/* FormFieldLegend uses the FormFieldLabel CSS classes, no additional styles needed */

package/dist/FormFieldLegend/FormFieldLegend.d.ts

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

package/dist/FormFieldLegend/FormFieldLegend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegend.d.ts","sourceRoot":"","sources":["../../src/FormFieldLegend/FormFieldLegend.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IACnF;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,eAAe,gGAY1B,CAAC"}

package/dist/FormFieldLegend/FormFieldLegend.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './FormFieldLegend.css';
+/**
+ * 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>
+ * ```
+ */
+export const FormFieldLegend = React.forwardRef(({ suffix, className, children, ...props }, ref) => {
+    const classes = classNames('dsn-form-field-label', className);
+    return (_jsxs("legend", { ref: ref, className: classes, ...props, children: [children, suffix && _jsx("span", { className: "dsn-form-field-label-suffix", children: suffix })] }));
+});
+FormFieldLegend.displayName = 'FormFieldLegend';
+//# sourceMappingURL=FormFieldLegend.js.map

package/dist/FormFieldLegend/FormFieldLegend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldLegend.js","sourceRoot":"","sources":["../../src/FormFieldLegend/FormFieldLegend.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,uBAAuB,CAAC;AAmB/B;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnD,MAAM,OAAO,GAAG,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAE9D,OAAO,CACL,kBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aAC5C,QAAQ,EACR,MAAM,IAAI,eAAM,SAAS,EAAC,6BAA6B,YAAE,MAAM,GAAQ,IACjE,CACV,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/FormFieldLegend/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FormFieldLegend';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldLegend/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/FormFieldLegend/index.js

@@ -0,0 +1,2 @@
+export * from './FormFieldLegend';
+//# sourceMappingURL=index.js.map

package/dist/FormFieldLegend/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FormFieldLegend/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC"}

package/dist/FormFieldStatus/FormFieldStatus.css

@@ -0,0 +1,66 @@
+/**
+ * FormFieldStatus Component Styles for React
+ * Re-exports the base FormFieldStatus styles from components-html
+ */
+
+/**
+ * Form Field Status Component
+ * Status message displayed below the form control
+ * Supports three variants: default (subtle info), positive (success), warning (caution)
+ *
+ * Usage:
+ * <!-- Default variant (no icon) -->
+ * <p class="dsn-form-field-status">
+ *   45 van 100 karakters
+ * </p>
+ *
+ * <!-- Positive variant (with check icon) -->
+ * <p class="dsn-form-field-status dsn-form-field-status--positive">
+ *   <svg class="dsn-icon" aria-hidden="true">...</svg>
+ *   Wachtwoord is sterk genoeg
+ * </p>
+ *
+ * <!-- Warning variant (with alert-triangle icon) -->
+ * <p class="dsn-form-field-status dsn-form-field-status--warning">
+ *   <svg class="dsn-icon" aria-hidden="true">...</svg>
+ *   Wachtwoord is zwak
+ * </p>
+ */
+
+.dsn-form-field-status {
+  font-family: var(--dsn-form-field-status-font-family);
+  font-size: var(--dsn-form-field-status-font-size);
+  font-weight: var(--dsn-form-field-status-font-weight);
+  line-height: var(--dsn-form-field-status-line-height);
+  color: var(--dsn-form-field-status-color);
+  margin-block-start: var(--dsn-form-field-status-margin-block-start);
+  margin-block-end: 0;
+}
+
+/* Positive and warning variants use flexbox for icon + text layout */
+.dsn-form-field-status--positive,
+.dsn-form-field-status--warning {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--dsn-form-field-status-gap);
+}
+
+/* Positive variant - success feedback */
+.dsn-form-field-status--positive {
+  color: var(--dsn-form-field-status-positive-color);
+}
+
+/* Warning variant - caution feedback */
+.dsn-form-field-status--warning {
+  color: var(--dsn-form-field-status-warning-color);
+}
+
+/* Icon sizing within status message (positive and warning only) */
+.dsn-form-field-status--positive > .dsn-icon,
+.dsn-form-field-status--warning > .dsn-icon {
+  flex-shrink: 0;
+  width: var(--dsn-form-field-status-icon-size);
+  height: var(--dsn-form-field-status-icon-size);
+  color: inherit;
+}
+

package/dist/FormFieldStatus/FormFieldStatus.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import './FormFieldStatus.css';
+export type FormFieldStatusVariant = 'default' | 'positive' | 'warning';
+export 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;
+    /**
+     * 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>
+ * ```
+ */
+export declare const FormFieldStatus: React.ForwardRefExoticComponent<FormFieldStatusProps & React.RefAttributes<HTMLParagraphElement>>;
+//# sourceMappingURL=FormFieldStatus.d.ts.map

package/dist/FormFieldStatus/FormFieldStatus.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldStatus.d.ts","sourceRoot":"","sources":["../../src/FormFieldStatus/FormFieldStatus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,sBAAsB,GAAG,SAAS,GAAG,UAAU,GAAG,SAAS,CAAC;AAExE,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,oBAAoB,CAAC;IACtF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,sBAAsB,CAAC;IAEjC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,eAAe,mGA6B3B,CAAC"}

package/dist/FormFieldStatus/FormFieldStatus.js

@@ -0,0 +1,44 @@
+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 './FormFieldStatus.css';
+/**
+ * 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>
+ * ```
+ */
+export const FormFieldStatus = React.forwardRef(({ className, variant = 'default', showIcon = true, 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 (_jsxs("p", { ref: ref, className: classes, ...props, children: [shouldShowIcon && _jsx(Icon, { name: iconName, "aria-hidden": "true" }), children] }));
+});
+FormFieldStatus.displayName = 'FormFieldStatus';
+//# sourceMappingURL=FormFieldStatus.js.map

package/dist/FormFieldStatus/FormFieldStatus.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldStatus.js","sourceRoot":"","sources":["../../src/FormFieldStatus/FormFieldStatus.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,uBAAuB,CAAC;AA4B/B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAI7C,CACE,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,QAAQ,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACvE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,uBAAuB,EACvB,OAAO,KAAK,SAAS,IAAI,0BAA0B,OAAO,EAAE,EAC5D,SAAS,CACV,CAAC;IAEF,MAAM,QAAQ,GACZ,OAAO,KAAK,UAAU;QACpB,CAAC,CAAC,OAAO;QACT,CAAC,CAAC,OAAO,KAAK,SAAS;YACrB,CAAC,CAAC,gBAAgB;YAClB,CAAC,CAAC,IAAI,CAAC;IACb,MAAM,cAAc,GAAG,QAAQ,IAAI,QAAQ,IAAI,OAAO,KAAK,SAAS,CAAC;IAErE,OAAO,CACL,aAAG,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aACvC,cAAc,IAAI,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,iBAAc,MAAM,GAAG,EAC7D,QAAQ,IACP,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/FormFieldStatus/index.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldStatus/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,mBAAmB,CAAC"}

package/dist/FormFieldStatus/index.js

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

package/dist/FormFieldStatus/index.js.map

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

package/dist/FormFieldset/FormFieldset.css

@@ -0,0 +1,24 @@
+/**
+ * FormFieldset Component Styles
+ * Container for group controls using fieldset/legend
+ * Re-uses FormField CSS classes for consistency
+ */
+
+/* FormFieldset uses the same .dsn-form-field classes as FormField */
+/* Additional fieldset-specific styles if needed can be added here */
+
+fieldset.dsn-form-field {
+  border-block-start: none;
+  border-block-end: none;
+  border-inline-end: none;
+  border-inline-start: none;
+  margin: 0;
+  padding: 0;
+  min-inline-size: 0; /* Reset fieldset min-width */
+}
+
+fieldset.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/FormFieldset/FormFieldset.d.ts

@@ -0,0 +1,83 @@
+import React from 'react';
+import { FormFieldStatusVariant } from '../FormFieldStatus';
+import './FormFieldset.css';
+export 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;
+    /**
+     * 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)
+ *
+ * @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>
+ * ```
+ */
+export declare const FormFieldset: React.ForwardRefExoticComponent<FormFieldsetProps & React.RefAttributes<HTMLFieldSetElement>>;
+//# sourceMappingURL=FormFieldset.d.ts.map

package/dist/FormFieldset/FormFieldset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldset.d.ts","sourceRoot":"","sources":["../../src/FormFieldset/FormFieldset.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAmB,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAC7E,OAAO,oBAAoB,CAAC;AAE5B,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,MAAM,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAO,MAAM,YAAY,+FA2CxB,CAAC"}

package/dist/FormFieldset/FormFieldset.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { FormFieldLegend } from '../FormFieldLegend';
+import { FormFieldDescription } from '../FormFieldDescription';
+import { FormFieldErrorMessage } from '../FormFieldErrorMessage';
+import { FormFieldStatus } from '../FormFieldStatus';
+import './FormFieldset.css';
+/**
+ * Form Fieldset component
+ * Container that combines FormFieldLegend, FormFieldDescription, Control, FormFieldErrorMessage, and FormFieldStatus
+ * Uses fieldset/legend structure for group controls (CheckboxGroup, RadioGroup, DateInputGroup)
+ *
+ * @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>
+ * ```
+ */
+export const FormFieldset = React.forwardRef(({ legend, legendSuffix, description, error, status, statusVariant = 'default', className, children, }, ref) => {
+    const containerClasses = classNames('dsn-form-field', {
+        'dsn-form-field--invalid': !!error,
+    }, className);
+    return (_jsxs("fieldset", { ref: ref, className: containerClasses, children: [_jsx(FormFieldLegend, { suffix: legendSuffix, children: legend }), description && (_jsx(FormFieldDescription, { children: description })), error && _jsx(FormFieldErrorMessage, { children: error }), children, status && (_jsx(FormFieldStatus, { variant: statusVariant, children: status }))] }));
+});
+FormFieldset.displayName = 'FormFieldset';
+//# sourceMappingURL=FormFieldset.js.map

package/dist/FormFieldset/FormFieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormFieldset.js","sourceRoot":"","sources":["../../src/FormFieldset/FormFieldset.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,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,oBAAoB,CAAC;AA6C5B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAI1C,CACE,EACE,MAAM,EACN,YAAY,EACZ,WAAW,EACX,KAAK,EACL,MAAM,EACN,aAAa,GAAG,SAAS,EACzB,SAAS,EACT,QAAQ,GACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,gBAAgB,GAAG,UAAU,CACjC,gBAAgB,EAChB;QACE,yBAAyB,EAAE,CAAC,CAAC,KAAK;KACnC,EACD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,oBAAU,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,gBAAgB,aAC7C,KAAC,eAAe,IAAC,MAAM,EAAE,YAAY,YAAG,MAAM,GAAmB,EAEhE,WAAW,IAAI,CACd,KAAC,oBAAoB,cAAE,WAAW,GAAwB,CAC3D,EAEA,KAAK,IAAI,KAAC,qBAAqB,cAAE,KAAK,GAAyB,EAE/D,QAAQ,EAER,MAAM,IAAI,CACT,KAAC,eAAe,IAAC,OAAO,EAAE,aAAa,YAAG,MAAM,GAAmB,CACpE,IACQ,CACZ,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/FormFieldset/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FormFieldset';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/FormFieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/dist/FormFieldset/index.js

@@ -0,0 +1,2 @@
+export * from './FormFieldset';
+//# sourceMappingURL=index.js.map

package/dist/FormFieldset/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/FormFieldset/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}