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

package/dist/Drawer/Drawer.js

@@ -1,115 +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 { Button } from '../Button';
-import { Icon } from '../Icon';
-import './Drawer.css';
-const DrawerContext = React.createContext({
-    headingId: '',
-});
-/**
- * Drawer component
- * Zijpaneel dat vanuit links of rechts de viewport inschuift.
- *
- * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond
- * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina
- * nodig heeft voor context.
- *
- * @example
- * ```tsx
- * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>
- *   <DrawerHeader>
- *     <DrawerHeading>Filteropties</DrawerHeading>
- *   </DrawerHeader>
- *   <DrawerBody>
- *     <Paragraph>Inhoud van het zijpaneel</Paragraph>
- *   </DrawerBody>
- *   <DrawerFooter>
- *     <ActionGroup>
- *       <Button variant="strong" onClick={() => setIsOpen(false)}>Toepassen</Button>
- *       <Button variant="default" onClick={() => setIsOpen(false)}>Annuleren</Button>
- *     </ActionGroup>
- *   </DrawerFooter>
- * </Drawer>
- * ```
- */
-export const Drawer = React.forwardRef(({ className, isOpen, onClose, modal = true, side = 'right', children, ...props }, ref) => {
-    const internalRef = React.useRef(null);
-    const dialogRef = ref ?? internalRef;
-    const headingId = React.useId();
-    React.useEffect(() => {
-        const dialog = dialogRef.current;
-        if (!dialog)
-            return;
-        if (isOpen && !dialog.open) {
-            if (modal) {
-                dialog.showModal();
-            }
-            else {
-                dialog.show();
-            }
-        }
-        else if (!isOpen && dialog.open) {
-            dialog.close();
-        }
-    }, [isOpen, modal, dialogRef]);
-    // Non-modaal: handmatige Escape-afhandeling via keydown
-    React.useEffect(() => {
-        if (modal)
-            return;
-        const dialog = dialogRef.current;
-        if (!dialog || !isOpen)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === 'Escape') {
-                onClose?.();
-            }
-        };
-        dialog.addEventListener('keydown', handleKeyDown);
-        return () => dialog.removeEventListener('keydown', handleKeyDown);
-    }, [modal, isOpen, onClose, dialogRef]);
-    // Modaal: native cancel-event (Escape via browser)
-    const handleCancel = (event) => {
-        event.preventDefault();
-        onClose?.();
-    };
-    const classes = classNames('dsn-drawer', side === 'left' ? 'dsn-drawer--side-left' : 'dsn-drawer--side-right', className);
-    return (_jsx(DrawerContext.Provider, { value: { headingId, onClose }, children: _jsx("dialog", { ref: dialogRef, className: classes, "aria-labelledby": headingId, onCancel: handleCancel, ...props, children: children }) }));
-});
-Drawer.displayName = 'Drawer';
-/**
- * DrawerHeader
- * De headerstrook van het zijpaneel met heading en sluitknop.
- */
-export const DrawerHeader = React.forwardRef(({ className, children, ...props }, ref) => {
-    const { onClose } = React.useContext(DrawerContext);
-    return (_jsxs("div", { ref: ref, className: classNames('dsn-drawer__header', className), ...props, children: [children, _jsx(Button, { variant: "subtle", size: "small", iconOnly: true, onClick: onClose, iconStart: _jsx(Icon, { name: "x", "aria-hidden": true }), children: "Sluiten" })] }));
-});
-DrawerHeader.displayName = 'DrawerHeader';
-/**
- * DrawerHeading
- * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
- */
-export const DrawerHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
-    const { headingId } = React.useContext(DrawerContext);
-    const Tag = `h${level}`;
-    return (_jsx(Tag, { ref: ref, id: headingId, className: classNames('dsn-drawer-heading', className), ...props, children: children }));
-});
-DrawerHeading.displayName = 'DrawerHeading';
-/**
- * DrawerBody
- * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
- */
-export const DrawerBody = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: classNames('dsn-drawer__body', className), ...props, children: children }));
-});
-DrawerBody.displayName = 'DrawerBody';
-/**
- * DrawerFooter
- * De voettekst van het zijpaneel met actieknoppen.
- */
-export const DrawerFooter = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: classNames('dsn-drawer__footer', className), ...props, children: children }));
-});
-DrawerFooter.displayName = 'DrawerFooter';
-//# sourceMappingURL=Drawer.js.map

package/dist/Drawer/Drawer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drawer.js","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,cAAc,CAAC;AAWtB,MAAM,aAAa,GAAG,KAAK,CAAC,aAAa,CAAqB;IAC5D,SAAS,EAAE,EAAE;CACd,CAAC,CAAC;AA4CH;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EACE,SAAS,EACT,MAAM,EACN,OAAO,EACP,KAAK,GAAG,IAAI,EACZ,IAAI,GAAG,OAAO,EACd,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,WAAW,GAAG,KAAK,CAAC,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC1D,MAAM,SAAS,GACZ,GAA0C,IAAI,WAAW,CAAC;IAC7D,MAAM,SAAS,GAAG,KAAK,CAAC,KAAK,EAAE,CAAC;IAEhC,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM;YAAE,OAAO;QAEpB,IAAI,MAAM,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC;YAC3B,IAAI,KAAK,EAAE,CAAC;gBACV,MAAM,CAAC,SAAS,EAAE,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,IAAI,EAAE,CAAC;YAChB,CAAC;QACH,CAAC;aAAM,IAAI,CAAC,MAAM,IAAI,MAAM,CAAC,IAAI,EAAE,CAAC;YAClC,MAAM,CAAC,KAAK,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EAAE,CAAC,MAAM,EAAE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IAE/B,wDAAwD;IACxD,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE;QACnB,IAAI,KAAK;YAAE,OAAO;QAClB,MAAM,MAAM,GAAG,SAAS,CAAC,OAAO,CAAC;QACjC,IAAI,CAAC,MAAM,IAAI,CAAC,MAAM;YAAE,OAAO;QAE/B,MAAM,aAAa,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC7C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,OAAO,EAAE,EAAE,CAAC;YACd,CAAC;QACH,CAAC,CAAC;QAEF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;QAClD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,aAAa,CAAC,CAAC;IACpE,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,CAAC;IAExC,mDAAmD;IACnD,MAAM,YAAY,GAAG,CAAC,KAA8C,EAAE,EAAE;QACtE,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,OAAO,EAAE,EAAE,CAAC;IACd,CAAC,CAAC;IAEF,MAAM,OAAO,GAAG,UAAU,CACxB,YAAY,EACZ,IAAI,KAAK,MAAM,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,wBAAwB,EACpE,SAAS,CACV,CAAC;IAEF,OAAO,CACL,KAAC,aAAa,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,OAAO,EAAE,YACnD,iBACE,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,OAAO,qBACD,SAAS,EAC1B,QAAQ,EAAE,YAAY,KAClB,KAAK,YAER,QAAQ,GACF,GACc,CAC1B,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC;AAa9B;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,EAAE,OAAO,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IAEpD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,KAClD,KAAK,aAER,QAAQ,EACT,KAAC,MAAM,IACL,OAAO,EAAC,QAAQ,EAChB,IAAI,EAAC,OAAO,EACZ,QAAQ,QACR,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,KAAC,IAAI,IAAC,IAAI,EAAC,GAAG,wBAAe,wBAGjC,IACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC;AAmB1C;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,KAAK,CAAC,UAAU,CAG3C,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtD,MAAM,EAAE,SAAS,EAAE,GAAG,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC;IACtD,MAAM,GAAG,GAAG,IAAI,KAAK,EAAuB,CAAC;IAE7C,OAAO,CACL,KAAC,GAAG,IACF,GAAG,EAAE,GAAG,EACR,EAAE,EAAE,SAAS,EACb,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,KAClD,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,aAAa,CAAC,WAAW,GAAG,eAAe,CAAC;AAa5C;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAChD,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC;AAatC;;;GAGG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,KAAK,CAAC,UAAU,CAC1C,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,oBAAoB,EAAE,SAAS,CAAC,KAClD,KAAK,YAER,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAC"}

package/dist/Drawer/index.d.ts

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

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

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

package/dist/Drawer/index.js.map

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

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

package/dist/EmailInput/EmailInput.d.ts

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

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

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

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

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

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

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

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

package/dist/EmailInput/index.js.map

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

@@ -1,222 +0,0 @@
-/* =============================================================================
-   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;
-  }
-}
-
-/* =============================================================================
-   Forced colors (High Contrast mode)
-   ============================================================================= */
-
-@media (forced-colors: active) {
-  .dsn-file__media > .dsn-icon {
-    forced-color-adjust: auto;
-    color: CanvasText;
-  }
-
-  .dsn-file__status-icon {
-    forced-color-adjust: auto;
-    color: CanvasText;
-  }
-}
-
-/* =============================================================================
-   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

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

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