@dsn-starter-kit/components-react 1.0.0

package/dist/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"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"}

package/dist/Drawer/index.d.ts

@@ -0,0 +1,3 @@
+export { Drawer, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, } from './Drawer';
+export type { DrawerProps, DrawerHeaderProps, DrawerHeadingProps, DrawerBodyProps, DrawerFooterProps, } from './Drawer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EACV,WAAW,EACX,iBAAiB,EACjB,kBAAkB,EAClB,eAAe,EACf,iBAAiB,GAClB,MAAM,UAAU,CAAC"}

package/dist/Drawer/index.js

@@ -0,0 +1,2 @@
+export { Drawer, DrawerHeader, DrawerHeading, DrawerBody, DrawerFooter, } from './Drawer';
+//# sourceMappingURL=index.js.map

package/dist/Drawer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Drawer/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,MAAM,EACN,YAAY,EACZ,aAAa,EACb,UAAU,EACV,YAAY,GACb,MAAM,UAAU,CAAC"}

package/dist/EmailInput/EmailInput.css

@@ -0,0 +1,4 @@
+/**
+ * EmailInput Component Styles
+ * Uses dsn-text-input styles from TextInput.css — no additional styles needed
+ */

package/dist/EmailInput/EmailInput.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+export interface EmailInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Whether the input is in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Width variant for the input
+     * @default undefined (uses default max-width from form-control)
+     */
+    width?: FormControlWidth;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Email Input component
+ * Email input with appropriate inputmode and autocomplete
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EmailInput placeholder="naam@voorbeeld.nl" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="email">E-mailadres</FormFieldLabel>
+ * <EmailInput id="email" />
+ *
+ * // Invalid state
+ * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=EmailInput.d.ts.map

package/dist/EmailInput/EmailInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.d.ts","sourceRoot":"","sources":["../../src/EmailInput/EmailInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAEpC,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAC3C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,eAAO,MAAM,UAAU,0FAoBtB,CAAC"}

package/dist/EmailInput/EmailInput.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+/**
+ * Email Input component
+ * Email input with appropriate inputmode and autocomplete
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <EmailInput placeholder="naam@voorbeeld.nl" />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="email">E-mailadres</FormFieldLabel>
+ * <EmailInput id="email" />
+ *
+ * // Invalid state
+ * <EmailInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export const EmailInput = React.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
+    const classes = classNames('dsn-text-input', width && `dsn-text-input--width-${width}`, className);
+    return (_jsx("input", { ref: ref, type: "email", inputMode: "email", className: classes, autoComplete: autoComplete || 'email', "aria-invalid": invalid || undefined, ...props }));
+});
+EmailInput.displayName = 'EmailInput';
+//# sourceMappingURL=EmailInput.js.map

package/dist/EmailInput/EmailInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.js","sourceRoot":"","sources":["../../src/EmailInput/EmailInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAwBpC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC7D,MAAM,OAAO,GAAG,UAAU,CACxB,gBAAgB,EAChB,KAAK,IAAI,yBAAyB,KAAK,EAAE,EACzC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,OAAO,EACjB,SAAS,EAAE,OAAO,EAClB,YAAY,EAAE,YAAY,IAAI,OAAO,kBACvB,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/EmailInput/index.d.ts

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

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

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

package/dist/EmailInput/index.js

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

package/dist/EmailInput/index.js.map

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

package/dist/File/File.css

@@ -0,0 +1,206 @@
+/* =============================================================================
+   File
+   Toont bestandsmeta (naam, type, grootte) en contextafhankelijke acties.
+   CSS grid met 3 kolommen: media-vlak | content | actions
+   ============================================================================= */
+
+/* File — root container */
+.dsn-file {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto 1fr auto;
+  align-items: center;
+  gap: var(--dsn-file-gap);
+  padding-block: var(--dsn-file-padding-block);
+  padding-inline: var(--dsn-file-padding-inline);
+  background-color: var(--dsn-file-background-color);
+  border: var(--dsn-file-border-width) solid var(--dsn-file-border-color);
+  border-radius: var(--dsn-file-border-radius);
+  box-shadow: var(--dsn-file-box-shadow);
+}
+
+/* Error state: rode randkleur signaleert de mislukking */
+.dsn-file--error {
+  border-color: var(--dsn-file-border-color-error);
+}
+
+/* =============================================================================
+   Interactieve variant — hover/active/focus via :has() op de stretched link
+   Zelfde techniek als Card, aangevuld met border-color
+   ============================================================================= */
+
+.dsn-file--interactive {
+  cursor: pointer;
+  transition:
+    background-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    border-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    box-shadow var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+/* Hover op de gehele container — ook actief wanneer de CTA-link gehoverd wordt */
+.dsn-file--interactive:hover {
+  background-color: var(--dsn-file-background-color-hover);
+  border-color: var(--dsn-file-border-color-hover);
+  box-shadow: var(--dsn-file-box-shadow-hover);
+}
+
+/* Active alleen via de stretched link — niet bij klik op de CTA-link */
+.dsn-file--interactive:has(.dsn-file__name--stretched:active) {
+  background-color: var(--dsn-file-background-color-active);
+  border-color: var(--dsn-file-border-color-active);
+}
+
+.dsn-file--interactive:has(.dsn-file__name--stretched:focus-visible) {
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+}
+
+/* =============================================================================
+   Media-vlak — icoon of afbeeldingspreview
+   ============================================================================= */
+
+.dsn-file__media {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  block-size: var(--dsn-file-media-size);
+  inline-size: var(--dsn-file-media-size);
+  border-radius: var(--dsn-file-media-border-radius);
+  background-color: var(--dsn-file-media-background-color);
+  overflow: hidden;
+  flex-shrink: 0;
+}
+
+/* Icoon in media-vlak */
+.dsn-file__media > .dsn-icon {
+  color: var(--dsn-file-media-icon-color);
+  width: var(--dsn-file-media-icon-size);
+  height: var(--dsn-file-media-icon-size);
+  flex-shrink: 0;
+}
+
+/* Preview-afbeelding vult het vaste media-vlak volledig */
+.dsn-file__preview {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* =============================================================================
+   Content — naam, meta en optionele ErrorMessage
+   ============================================================================= */
+
+.dsn-file__content {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-file-content-gap);
+  min-width: 0;
+}
+
+/* Bestandsnaam — bold, mag over meerdere regels lopen */
+.dsn-file__name {
+  font-weight: var(--dsn-file-name-font-weight);
+}
+
+/* Alleen als span: expliciete kleur (als link geeft dsn-link de kleur) */
+span.dsn-file__name {
+  color: var(--dsn-file-name-color);
+}
+
+/* Stretched link — ::before dekt de volledige component */
+.dsn-file__name--stretched::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+/* Geen eigen focus-stijlen — de focus-ring zit op de gehele component */
+.dsn-file__name--stretched:focus-visible {
+  background-color: transparent;
+  color: inherit;
+  outline: none;
+  box-shadow: none;
+}
+
+/* Meta — type + grootte */
+.dsn-file__meta {
+  font-size: var(--dsn-file-meta-font-size);
+  color: var(--dsn-file-meta-color);
+}
+
+/* =============================================================================
+   Actions — inline-end area: Spinner, status-icoon, of Button/Link
+   ============================================================================= */
+
+.dsn-file__actions {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+/* Directe kinderen van actions staan boven de stretched link */
+.dsn-file__actions > * {
+  position: relative;
+  z-index: 2;
+}
+
+/* Status-icoon bij uploaded state — fadeIn bij verschijnen */
+.dsn-file__status-icon {
+  color: var(--dsn-file-status-icon-color);
+  width: var(--dsn-file-status-icon-size);
+  height: var(--dsn-file-status-icon-size);
+  flex-shrink: 0;
+  animation: dsn-file-action-in var(--dsn-transition-duration-normal)
+    var(--dsn-transition-easing-default);
+}
+
+/* Spinner, verwijder-knop — fadeIn bij verschijnen of terugkeer naar default */
+.dsn-file__actions > .dsn-spinner,
+.dsn-file__actions > .dsn-link-button {
+  animation: dsn-file-action-in var(--dsn-transition-duration-normal)
+    var(--dsn-transition-easing-default);
+}
+
+@keyframes dsn-file-action-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+/* =============================================================================
+   FileList — ul wrapper voor meerdere File items
+   ============================================================================= */
+
+.dsn-file-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-file-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* =============================================================================
+   Reduced motion — animaties uitzetten voor gebruikers die dat prefereren
+   ============================================================================= */
+
+@media (prefers-reduced-motion: reduce) {
+  .dsn-file--interactive {
+    transition: none;
+  }
+
+  .dsn-file__status-icon,
+  .dsn-file__actions > .dsn-link-button {
+    animation: none;
+  }
+}
+

package/dist/File/File.d.ts

@@ -0,0 +1,116 @@
+import React from 'react';
+import './File.css';
+export type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';
+export type FileCtaVariant = 'view' | 'download';
+export type FileMediaType = 'document' | 'image';
+export interface FileProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Bestandsnaam inclusief extensie (vereist). Extensie wordt visueel afgekapt. */
+    fileName: string;
+    /** Bestandstype als afkorting: "PDF", "JPG". Getoond in dsn-file__meta. */
+    fileType?: string;
+    /** Bestandsgrootte als geformatteerde string: "1,2 MB". */
+    fileSize?: string;
+    /**
+     * State van het bestand.
+     * Bij 'uploaded' keert het component na 2 seconden automatisch terug naar 'default'.
+     * @default 'default'
+     */
+    status?: FileStatus;
+    /** Foutmelding, getoond bij status="error". */
+    errorMessage?: string;
+    /** URL naar het bestand. Maakt de naam een <a> en schakelt de interactieve variant in. */
+    href?: string;
+    /** Callback voor de verwijderactie. Toont de "Verwijder"-knop. */
+    onDelete?: () => void;
+    /**
+     * Zichtbare tekst op de verwijder-knop.
+     * @default "Verwijder"
+     */
+    deleteLabel?: string;
+    /**
+     * CTA-type in de interactieve variant.
+     * 'view' toont geen aparte CTA; de bestandsnaam opent als stretched link in een nieuw tabblad.
+     * 'download' toont een aparte download-knop; de bestandsnaam opent in een nieuw tabblad.
+     * @default 'view'
+     */
+    ctaVariant?: FileCtaVariant;
+    /**
+     * Overschrijft het standaard CTA-label voor de download-variant.
+     * Standaard: "Download".
+     */
+    ctaLabel?: string;
+    /**
+     * Bepaalt het icoon: file-description.svg of photo.svg.
+     * Genegeerd wanneer previewSrc aanwezig is.
+     * @default 'document'
+     */
+    mediaType?: FileMediaType;
+    /** URL van de afbeeldingspreview. Vervangt het icoon in het media-vlak. */
+    previewSrc?: string;
+    /**
+     * Visueel verborgen label voor de Spinner.
+     * @default "Bezig met uploaden"
+     */
+    loadingLabel?: string;
+    /**
+     * Tekst voor de aria-live regio bij de uploaded state.
+     * @default "{fileName} succesvol geüpload"
+     */
+    uploadedLabel?: string;
+}
+/**
+ * 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 declare const File: React.ForwardRefExoticComponent<FileProps & React.RefAttributes<HTMLDivElement>>;
+export interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {
+    /** File componenten */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * 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 declare const FileList: React.ForwardRefExoticComponent<FileListProps & React.RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=File.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../src/File/File.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,SAAS,GAAG,UAAU,GAAG,OAAO,CAAC;AACtE,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,UAAU,CAAC;AACjD,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,OAAO,CAAC;AAEjD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACrE,kFAAkF;IAClF,QAAQ,EAAE,MAAM,CAAC;IAEjB,2EAA2E;IAC3E,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IAEpB,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB,0FAA0F;IAC1F,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,kEAAkE;IAClE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IAEtB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,cAAc,CAAC;IAE5B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;;OAIG;IACH,SAAS,CAAC,EAAE,aAAa,CAAC;IAE1B,2EAA2E;IAC3E,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI,kFA6JhB,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC3E,uBAAuB;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,QAAQ,wFAepB,CAAC"}

package/dist/File/File.js

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

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","sourceRoot":"","sources":["../../src/File/File.tsx"],"names":[],"mappings":"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"}

package/dist/File/index.d.ts

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

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

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

package/dist/File/index.js.map

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