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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/FormFieldDescription/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,38 +0,0 @@
-/**
- * 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

@@ -1,40 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,32 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/FormFieldErrorMessage/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,48 +0,0 @@
-/**
- * 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

@@ -1,38 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,30 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/FormFieldLabel/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,7 +0,0 @@
-/**
- * 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

@@ -1,39 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,31 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

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

package/dist/FormFieldLegend/index.js

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

package/dist/FormFieldLegend/index.js.map

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

package/dist/FormFieldStatus/FormFieldStatus.css

@@ -1,66 +0,0 @@
-/**
- * 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

@@ -1,52 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,44 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/FormFieldStatus/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,24 +0,0 @@
-/**
- * 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);
-}