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

package/dist/File/File.js

@@ -1,100 +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 { Spinner } from '../Spinner';
-import { FormFieldErrorMessage } from '../FormFieldErrorMessage';
-import './File.css';
-/**
- * File component
- * Toont meta-informatie over een bestand (naam, type, grootte) samen met acties.
- * Ondersteunt vier upload-states (default, loading, uploaded, error) en een
- * interactieve variant voor controle- of detailpagina's.
- *
- * @example
- * ```tsx
- * // Default — eerder geüpload bestand, met verwijder-optie
- * <File
- *   fileName="document.pdf"
- *   fileType="PDF"
- *   fileSize="1,2 MB"
- *   href="/bestanden/document.pdf"
- *   onDelete={() => handleDelete()}
- * />
- *
- * // Interactief — bestandsnaam als link (nieuw tabblad)
- * <File
- *   fileName="rapport-2024.pdf"
- *   fileType="PDF"
- *   fileSize="2,1 MB"
- *   href="/bestanden/rapport-2024.pdf"
- * />
- *
- * // Interactief — download CTA
- * <File
- *   fileName="rapport-2024.pdf"
- *   fileType="PDF"
- *   fileSize="2,1 MB"
- *   href="/bestanden/rapport-2024.pdf"
- *   ctaVariant="download"
- * />
- * ```
- */
-export const File = React.forwardRef(({ className, fileName, fileType, fileSize, status = 'default', errorMessage, href, onDelete, deleteLabel = 'Verwijder', ctaVariant = 'view', ctaLabel, mediaType = 'document', previewSrc, loadingLabel = 'Bezig met uploaden', uploadedLabel, ...props }, ref) => {
-    const [currentStatus, setCurrentStatus] = React.useState(status);
-    const [liveText, setLiveText] = React.useState('');
-    // Synchroniseer externe status-prop met interne state
-    React.useEffect(() => {
-        setCurrentStatus(status);
-    }, [status]);
-    // Bij uploaded: vul aria-live regio en keer na 2s terug naar default
-    React.useEffect(() => {
-        if (currentStatus !== 'uploaded')
-            return;
-        const resolvedUploadedLabel = uploadedLabel ?? `${fileName} succesvol geüpload`;
-        setLiveText(resolvedUploadedLabel);
-        const timer = setTimeout(() => {
-            setCurrentStatus('default');
-            setLiveText('');
-        }, 2000);
-        return () => clearTimeout(timer);
-    }, [currentStatus, fileName, uploadedLabel]);
-    // Bestandsnaam zonder extensie voor visuele weergave
-    const fileNameWithoutExt = React.useMemo(() => {
-        const lastDot = fileName.lastIndexOf('.');
-        return lastDot > 0 ? fileName.slice(0, lastDot) : fileName;
-    }, [fileName]);
-    // Meta-tekst: "PDF · 1,2 MB" of alleen type of grootte
-    const metaParts = [fileType, fileSize].filter(Boolean);
-    const metaText = metaParts.join(' · ');
-    // Interactieve modus: href aanwezig en geen onDelete
-    const isInteractive = Boolean(href) && !onDelete;
-    // Stretched link: interactief zonder aparte download-CTA
-    const isStretchedLink = isInteractive && ctaVariant !== 'download';
-    const rootClasses = classNames('dsn-file', currentStatus === 'loading' && 'dsn-file--loading', currentStatus === 'uploaded' && 'dsn-file--uploaded', currentStatus === 'error' && 'dsn-file--error', isStretchedLink && 'dsn-file--interactive', className);
-    const nameClasses = classNames('dsn-file__name', href && 'dsn-link', isStretchedLink && 'dsn-file__name--stretched');
-    const iconName = mediaType === 'image' ? 'photo' : 'file-description';
-    const resolvedCtaLabel = ctaLabel ?? 'Download';
-    return (_jsxs("div", { ref: ref, className: rootClasses, ...props, children: [_jsx("div", { className: "dsn-file__media", "aria-hidden": "true", children: previewSrc ? (_jsx("img", { className: "dsn-file__preview", src: previewSrc, alt: "" })) : (_jsx(Icon, { name: iconName, "aria-hidden": true })) }), _jsxs("div", { className: "dsn-file__content", children: [href ? (_jsx("a", { className: nameClasses, href: href, target: "_blank", rel: "noopener noreferrer", children: fileNameWithoutExt })) : (_jsx("span", { className: nameClasses, children: fileNameWithoutExt })), metaText && _jsx("span", { className: "dsn-file__meta", children: metaText }), currentStatus === 'error' && errorMessage && (_jsx(FormFieldErrorMessage, { children: errorMessage }))] }), _jsxs("div", { className: "dsn-file__actions", children: [!isInteractive && currentStatus === 'loading' && (_jsx(Spinner, { label: loadingLabel, hideLabel: true })), !isInteractive && currentStatus === 'uploaded' && (_jsx(Icon, { className: "dsn-file__status-icon", name: "check", "aria-hidden": true })), !isInteractive &&
-                        (currentStatus === 'default' || currentStatus === 'error') &&
-                        onDelete && (_jsxs("button", { type: "button", className: "dsn-link dsn-link-button dsn-link--size-default", onClick: onDelete, children: [_jsx(Icon, { name: "trash", "aria-hidden": true }), deleteLabel, _jsxs("span", { className: "dsn-visually-hidden", children: [" ", fileName] })] })), isInteractive && ctaVariant === 'download' && (_jsxs("a", { className: "dsn-link", href: href, "aria-hidden": "true", tabIndex: -1, download: true, children: [_jsx(Icon, { name: "download", "aria-hidden": true }), resolvedCtaLabel] }))] }), _jsx("span", { className: "dsn-visually-hidden", "aria-live": "polite", "aria-atomic": "true", children: liveText })] }));
-});
-File.displayName = 'File';
-/**
- * FileList component
- * Wrapper voor meerdere File componenten.
- * Rendert een <ul role="list"> met <li> wrappers — nodig omdat CSS-resets lijstsemantiek verwijderen.
- *
- * @example
- * ```tsx
- * <FileList>
- *   <File fileName="document.pdf" fileType="PDF" fileSize="1,2 MB" href="..." onDelete={() => {}} />
- *   <File fileName="foto.jpg" fileType="JPG" fileSize="3,4 MB" href="..." onDelete={() => {}} />
- * </FileList>
- * ```
- */
-export const FileList = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("ul", { ref: ref, className: classNames('dsn-file-list', className), role: "list", ...props, children: React.Children.map(children, (child, index) => (_jsx("li", { children: child }, index))) }));
-});
-FileList.displayName = 'FileList';
-//# sourceMappingURL=File.js.map

package/dist/File/File.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"File.js","sourceRoot":"","sources":["../../src/File/File.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,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AACjE,OAAO,YAAY,CAAC;AA2EpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,GAAG,SAAS,EAClB,YAAY,EACZ,IAAI,EACJ,QAAQ,EACR,WAAW,GAAG,WAAW,EACzB,UAAU,GAAG,MAAM,EACnB,QAAQ,EACR,SAAS,GAAG,UAAU,EACtB,UAAU,EACV,YAAY,GAAG,oBAAoB,EACnC,aAAa,EACb,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GACrC,KAAK,CAAC,QAAQ,CAAa,MAAM,CAAC,CAAC;IACrC,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEnD,sDAAsD;IACtD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,gBAAgB,CAAC,MAAM,CAAC,CAAC;IAC3B,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,qEAAqE;IACrE,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,aAAa,KAAK,UAAU;YAAE,OAAO;QAEzC,MAAM,qBAAqB,GACzB,aAAa,IAAI,GAAG,QAAQ,qBAAqB,CAAC;QACpD,WAAW,CAAC,qBAAqB,CAAC,CAAC;QAEnC,MAAM,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE;YAC5B,gBAAgB,CAAC,SAAS,CAAC,CAAC;YAC5B,WAAW,CAAC,EAAE,CAAC,CAAC;QAClB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACnC,CAAC,EAAE,CAAC,aAAa,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC,CAAC;IAE7C,qDAAqD;IACrD,MAAM,kBAAkB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QAC5C,MAAM,OAAO,GAAG,QAAQ,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;QAC1C,OAAO,OAAO,GAAG,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC7D,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,uDAAuD;IACvD,MAAM,SAAS,GAAG,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;IACvD,MAAM,QAAQ,GAAG,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAEvC,qDAAqD;IACrD,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC;IACjD,yDAAyD;IACzD,MAAM,eAAe,GAAG,aAAa,IAAI,UAAU,KAAK,UAAU,CAAC;IAEnE,MAAM,WAAW,GAAG,UAAU,CAC5B,UAAU,EACV,aAAa,KAAK,SAAS,IAAI,mBAAmB,EAClD,aAAa,KAAK,UAAU,IAAI,oBAAoB,EACpD,aAAa,KAAK,OAAO,IAAI,iBAAiB,EAC9C,eAAe,IAAI,uBAAuB,EAC1C,SAAS,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,UAAU,CAC5B,gBAAgB,EAChB,IAAI,IAAI,UAAU,EAClB,eAAe,IAAI,2BAA2B,CAC/C,CAAC;IAEF,MAAM,QAAQ,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,kBAAkB,CAAC;IACtE,MAAM,gBAAgB,GAAG,QAAQ,IAAI,UAAU,CAAC;IAEhD,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,WAAW,KAAM,KAAK,aAE9C,cAAK,SAAS,EAAC,iBAAiB,iBAAa,MAAM,YAChD,UAAU,CAAC,CAAC,CAAC,CACZ,cAAK,SAAS,EAAC,mBAAmB,EAAC,GAAG,EAAE,UAAU,EAAE,GAAG,EAAC,EAAE,GAAG,CAC9D,CAAC,CAAC,CAAC,CACF,KAAC,IAAI,IAAC,IAAI,EAAE,QAAQ,wBAAgB,CACrC,GACG,EAGN,eAAK,SAAS,EAAC,mBAAmB,aAC/B,IAAI,CAAC,CAAC,CAAC,CACN,YACE,SAAS,EAAE,WAAW,EACtB,IAAI,EAAE,IAAI,EACV,MAAM,EAAC,QAAQ,EACf,GAAG,EAAC,qBAAqB,YAExB,kBAAkB,GACjB,CACL,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAE,WAAW,YAAG,kBAAkB,GAAQ,CAC1D,EACA,QAAQ,IAAI,eAAM,SAAS,EAAC,gBAAgB,YAAE,QAAQ,GAAQ,EAC9D,aAAa,KAAK,OAAO,IAAI,YAAY,IAAI,CAC5C,KAAC,qBAAqB,cAAE,YAAY,GAAyB,CAC9D,IACG,EAGN,eAAK,SAAS,EAAC,mBAAmB,aAC/B,CAAC,aAAa,IAAI,aAAa,KAAK,SAAS,IAAI,CAChD,KAAC,OAAO,IAAC,KAAK,EAAE,YAAY,EAAE,SAAS,SAAG,CAC3C,EACA,CAAC,aAAa,IAAI,aAAa,KAAK,UAAU,IAAI,CACjD,KAAC,IAAI,IAAC,SAAS,EAAC,uBAAuB,EAAC,IAAI,EAAC,OAAO,wBAAe,CACpE,EACA,CAAC,aAAa;wBACb,CAAC,aAAa,KAAK,SAAS,IAAI,aAAa,KAAK,OAAO,CAAC;wBAC1D,QAAQ,IAAI,CACV,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,iDAAiD,EAC3D,OAAO,EAAE,QAAQ,aAEjB,KAAC,IAAI,IAAC,IAAI,EAAC,OAAO,wBAAe,EAChC,WAAW,EACZ,gBAAM,SAAS,EAAC,qBAAqB,kBAAG,QAAQ,IAAQ,IACjD,CACV,EACF,aAAa,IAAI,UAAU,KAAK,UAAU,IAAI,CAC7C,aACE,SAAS,EAAC,UAAU,EACpB,IAAI,EAAE,IAAI,iBACE,MAAM,EAClB,QAAQ,EAAE,CAAC,CAAC,EACZ,QAAQ,mBAER,KAAC,IAAI,IAAC,IAAI,EAAC,UAAU,wBAAe,EACnC,gBAAgB,IACf,CACL,IACG,EAGN,eACE,SAAS,EAAC,qBAAqB,eACrB,QAAQ,iBACN,MAAM,YAEjB,QAAQ,GACJ,IACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC;AAY1B;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,EACjD,IAAI,EAAC,MAAM,KACP,KAAK,YAER,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,uBAAiB,KAAK,IAAb,KAAK,CAAc,CAC7B,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/File/index.d.ts

@@ -1,3 +0,0 @@
-export { File, FileList } from './File';
-export type { FileProps, FileListProps, FileStatus, FileCtaVariant, FileMediaType, } from './File';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/File/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EACV,SAAS,EACT,aAAa,EACb,UAAU,EACV,cAAc,EACd,aAAa,GACd,MAAM,QAAQ,CAAC"}

package/dist/File/index.js

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

package/dist/File/index.js.map

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

package/dist/FileInput/FileInput.css

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

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

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

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

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

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

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

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

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

package/dist/FileInput/index.js.map

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

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

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

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

@@ -1,60 +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 } 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

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

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

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

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

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

package/dist/FormField/index.js.map

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

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

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

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

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

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

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