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

package/dist/Drawer/Drawer2.mjs

@@ -0,0 +1,156 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import { Button } from "../Button/Button2.mjs";
+/* empty css        */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Drawer/Drawer.tsx
+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>
+* ```
+*/
+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
+	]);
+	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
+	]);
+	const handleCancel = (event) => {
+		event.preventDefault();
+		onClose?.();
+	};
+	const classes = classNames("dsn-drawer", side === "left" ? "dsn-drawer--side-left" : "dsn-drawer--side-right", className);
+	return /* @__PURE__ */ jsx(DrawerContext.Provider, {
+		value: {
+			headingId,
+			onClose
+		},
+		children: /* @__PURE__ */ jsx("dialog", {
+			ref: dialogRef,
+			className: classes,
+			"aria-labelledby": headingId,
+			onCancel: handleCancel,
+			...props,
+			children
+		})
+	});
+});
+Drawer.displayName = "Drawer";
+/**
+* DrawerHeader
+* De headerstrook van het zijpaneel met heading en sluitknop.
+*/
+const DrawerHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { onClose } = React.useContext(DrawerContext);
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: classNames("dsn-drawer__header", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Button, {
+			variant: "subtle",
+			size: "small",
+			iconOnly: true,
+			onClick: onClose,
+			iconStart: /* @__PURE__ */ 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.
+*/
+const DrawerHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+	const { headingId } = React.useContext(DrawerContext);
+	const Tag = `h${level}`;
+	return /* @__PURE__ */ jsx(Tag, {
+		ref,
+		id: headingId,
+		className: classNames("dsn-drawer-heading", className),
+		...props,
+		children
+	});
+});
+DrawerHeading.displayName = "DrawerHeading";
+/**
+* DrawerBody
+* De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
+*/
+const DrawerBody = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-drawer__body", className),
+		...props,
+		children
+	});
+});
+DrawerBody.displayName = "DrawerBody";
+/**
+* DrawerFooter
+* De voettekst van het zijpaneel met actieknoppen.
+*/
+const DrawerFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classNames("dsn-drawer__footer", className),
+		...props,
+		children
+	});
+});
+DrawerFooter.displayName = "DrawerFooter";
+//#endregion
+export { Drawer, DrawerBody, DrawerFooter, DrawerHeader, DrawerHeading };
+
+//# sourceMappingURL=Drawer2.mjs.map

package/dist/Drawer/Drawer2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer2.mjs","names":[],"sources":["../../src/Drawer/Drawer.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Button } from '../Button';\nimport { Icon } from '../Icon';\nimport './Drawer.css';\n\n// =============================================================================\n// Context\n// =============================================================================\n\ninterface DrawerContextValue {\n  headingId: string;\n  onClose?: () => void;\n}\n\nconst DrawerContext = React.createContext<DrawerContextValue>({\n  headingId: '',\n});\n\n// =============================================================================\n// Drawer (root)\n// =============================================================================\n\nexport interface DrawerProps extends Omit<\n  React.HTMLAttributes<HTMLDialogElement>,\n  'children'\n> {\n  /**\n   * Bepaalt of het zijpaneel getoond wordt.\n   */\n  isOpen: boolean;\n\n  /**\n   * Callback die wordt aangeroepen wanneer het zijpaneel sluit\n   * (sluitknop, Escape-toets).\n   */\n  onClose?: () => void;\n\n  /**\n   * Modaal of non-modaal gedrag.\n   * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,\n   *   natieve focus-trap, Escape sluit via `cancel`-event.\n   * - `false`: opent via `.show()` — achtergrond blijft interactief,\n   *   Escape sluit via `keydown`-listener.\n   * @default true\n   */\n  modal?: boolean;\n\n  /**\n   * De kant van de viewport vanwaar het zijpaneel inschuift.\n   * @default \"right\"\n   */\n  side?: 'right' | 'left';\n\n  /**\n   * De subcomponenten van het zijpaneel:\n   * `DrawerHeader`, `DrawerBody`, `DrawerFooter`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Drawer component\n * Zijpaneel dat vanuit links of rechts de viewport inschuift.\n *\n * Gebruik `modal={true}` (standaard) voor gefocuste taken waarbij de achtergrond\n * geblokkeerd moet worden. Gebruik `modal={false}` als de gebruiker de achtergrondpagina\n * nodig heeft voor context.\n *\n * @example\n * ```tsx\n * <Drawer isOpen={isOpen} onClose={() => setIsOpen(false)}>\n *   <DrawerHeader>\n *     <DrawerHeading>Filteropties</DrawerHeading>\n *   </DrawerHeader>\n *   <DrawerBody>\n *     <Paragraph>Inhoud van het zijpaneel</Paragraph>\n *   </DrawerBody>\n *   <DrawerFooter>\n *     <ActionGroup>\n *       <Button variant=\"strong\" onClick={() => setIsOpen(false)}>Toepassen</Button>\n *       <Button variant=\"default\" onClick={() => setIsOpen(false)}>Annuleren</Button>\n *     </ActionGroup>\n *   </DrawerFooter>\n * </Drawer>\n * ```\n */\nexport const Drawer = React.forwardRef<HTMLDialogElement, DrawerProps>(\n  (\n    {\n      className,\n      isOpen,\n      onClose,\n      modal = true,\n      side = 'right',\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const internalRef = React.useRef<HTMLDialogElement>(null);\n    const dialogRef =\n      (ref as React.RefObject<HTMLDialogElement>) ?? internalRef;\n    const headingId = React.useId();\n\n    React.useEffect(() => {\n      const dialog = dialogRef.current;\n      if (!dialog) return;\n\n      if (isOpen && !dialog.open) {\n        if (modal) {\n          dialog.showModal();\n        } else {\n          dialog.show();\n        }\n      } else if (!isOpen && dialog.open) {\n        dialog.close();\n      }\n    }, [isOpen, modal, dialogRef]);\n\n    // Non-modaal: handmatige Escape-afhandeling via keydown\n    React.useEffect(() => {\n      if (modal) return;\n      const dialog = dialogRef.current;\n      if (!dialog || !isOpen) return;\n\n      const handleKeyDown = (event: KeyboardEvent) => {\n        if (event.key === 'Escape') {\n          onClose?.();\n        }\n      };\n\n      dialog.addEventListener('keydown', handleKeyDown);\n      return () => dialog.removeEventListener('keydown', handleKeyDown);\n    }, [modal, isOpen, onClose, dialogRef]);\n\n    // Modaal: native cancel-event (Escape via browser)\n    const handleCancel = (event: React.SyntheticEvent<HTMLDialogElement>) => {\n      event.preventDefault();\n      onClose?.();\n    };\n\n    const classes = classNames(\n      'dsn-drawer',\n      side === 'left' ? 'dsn-drawer--side-left' : 'dsn-drawer--side-right',\n      className\n    );\n\n    return (\n      <DrawerContext.Provider value={{ headingId, onClose }}>\n        <dialog\n          ref={dialogRef}\n          className={classes}\n          aria-labelledby={headingId}\n          onCancel={handleCancel}\n          {...props}\n        >\n          {children}\n        </dialog>\n      </DrawerContext.Provider>\n    );\n  }\n);\n\nDrawer.displayName = 'Drawer';\n\n// =============================================================================\n// DrawerHeader\n// =============================================================================\n\nexport interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Inhoud van de header — doorgaans een `DrawerHeading`\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerHeader\n * De headerstrook van het zijpaneel met heading en sluitknop.\n */\nexport const DrawerHeader = React.forwardRef<HTMLDivElement, DrawerHeaderProps>(\n  ({ className, children, ...props }, ref) => {\n    const { onClose } = React.useContext(DrawerContext);\n\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-drawer__header', className)}\n        {...props}\n      >\n        {children}\n        <Button\n          variant=\"subtle\"\n          size=\"small\"\n          iconOnly\n          onClick={onClose}\n          iconStart={<Icon name=\"x\" aria-hidden />}\n        >\n          Sluiten\n        </Button>\n      </div>\n    );\n  }\n);\n\nDrawerHeader.displayName = 'DrawerHeader';\n\n// =============================================================================\n// DrawerHeading\n// =============================================================================\n\nexport interface DrawerHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.\n   * @default 2\n   */\n  level?: 1 | 2 | 3 | 4 | 5 | 6;\n\n  /**\n   * De zichtbare heading-tekst\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerHeading\n * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.\n */\nexport const DrawerHeading = React.forwardRef<\n  HTMLHeadingElement,\n  DrawerHeadingProps\n>(({ className, level = 2, children, ...props }, ref) => {\n  const { headingId } = React.useContext(DrawerContext);\n  const Tag = `h${level}` as React.ElementType;\n\n  return (\n    <Tag\n      ref={ref}\n      id={headingId}\n      className={classNames('dsn-drawer-heading', className)}\n      {...props}\n    >\n      {children}\n    </Tag>\n  );\n});\n\nDrawerHeading.displayName = 'DrawerHeading';\n\n// =============================================================================\n// DrawerBody\n// =============================================================================\n\nexport interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De hoofdinhoud van het zijpaneel\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerBody\n * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.\n */\nexport const DrawerBody = React.forwardRef<HTMLDivElement, DrawerBodyProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-drawer__body', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nDrawerBody.displayName = 'DrawerBody';\n\n// =============================================================================\n// DrawerFooter\n// =============================================================================\n\nexport interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * De acties van het zijpaneel — doorgaans een `ActionGroup` met knoppen\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * DrawerFooter\n * De voettekst van het zijpaneel met actieknoppen.\n */\nexport const DrawerFooter = React.forwardRef<HTMLDivElement, DrawerFooterProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        className={classNames('dsn-drawer__footer', className)}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n);\n\nDrawerFooter.displayName = 'DrawerFooter';\n"],"mappings":";;;;;;;AAeA,MAAM,gBAAgB,MAAM,cAAkC,EAC5D,WAAW,GACb,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsED,MAAa,SAAS,MAAM,YAExB,EACE,WACA,QACA,SACA,QAAQ,MACR,OAAO,SACP,UACA,GAAG,SAEL,QACG;CACH,MAAM,cAAc,MAAM,OAA0B,IAAI;CACxD,MAAM,YACH,OAA8C;CACjD,MAAM,YAAY,MAAM,MAAM;CAE9B,MAAM,gBAAgB;EACpB,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,QAAQ;EAEb,IAAI,UAAU,CAAC,OAAO,MAAM;GAC1B,IAAI,OACF,OAAO,UAAU;QAEjB,OAAO,KAAK;EAEhB,OAAO,IAAI,CAAC,UAAU,OAAO,MAC3B,OAAO,MAAM;CAEjB,GAAG;EAAC;EAAQ;EAAO;CAAS,CAAC;CAG7B,MAAM,gBAAgB;EACpB,IAAI,OAAO;EACX,MAAM,SAAS,UAAU;EACzB,IAAI,CAAC,UAAU,CAAC,QAAQ;EAExB,MAAM,iBAAiB,UAAyB;GAC9C,IAAI,MAAM,QAAQ,UAChB,UAAU;EAEd;EAEA,OAAO,iBAAiB,WAAW,aAAa;EAChD,aAAa,OAAO,oBAAoB,WAAW,aAAa;CAClE,GAAG;EAAC;EAAO;EAAQ;EAAS;CAAS,CAAC;CAGtC,MAAM,gBAAgB,UAAmD;EACvE,MAAM,eAAe;EACrB,UAAU;CACZ;CAEA,MAAM,UAAU,WACd,cACA,SAAS,SAAS,0BAA0B,0BAC5C,SACF;CAEA,OACE,oBAAC,cAAc,UAAf;EAAwB,OAAO;GAAE;GAAW;EAAQ;EAClD,UAAA,oBAAC,UAAD;GACE,KAAK;GACL,WAAW;GACX,mBAAiB;GACjB,UAAU;GACV,GAAI;GAEH;EACK,CAAA;CACc,CAAA;AAE5B,CACF;AAEA,OAAO,cAAc;;;;;AAiBrB,MAAa,eAAe,MAAM,YAC/B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,MAAM,EAAE,YAAY,MAAM,WAAW,aAAa;CAElD,OACE,qBAAC,OAAD;EACO;EACL,WAAW,WAAW,sBAAsB,SAAS;EACrD,GAAI;EAHN,UAAA,CAKG,UACD,oBAAC,QAAD;GACE,SAAQ;GACR,MAAK;GACL,UAAA;GACA,SAAS;GACT,WAAW,oBAAC,MAAD;IAAM,MAAK;IAAI,eAAA;GAAa,CAAA;GACxC,UAAA;EAEO,CAAA,CACL;;AAET,CACF;AAEA,aAAa,cAAc;;;;;AAuB3B,MAAa,gBAAgB,MAAM,YAGhC,EAAE,WAAW,QAAQ,GAAG,UAAU,GAAG,SAAS,QAAQ;CACvD,MAAM,EAAE,cAAc,MAAM,WAAW,aAAa;CACpD,MAAM,MAAM,IAAI;CAEhB,OACE,oBAAC,KAAD;EACO;EACL,IAAI;EACJ,WAAW,WAAW,sBAAsB,SAAS;EACrD,GAAI;EAEH;CACE,CAAA;AAET,CAAC;AAED,cAAc,cAAc;;;;;AAiB5B,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,oBAAoB,SAAS;EACnD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,WAAW,cAAc;;;;;AAiBzB,MAAa,eAAe,MAAM,YAC/B,EAAE,WAAW,UAAU,GAAG,SAAS,QAAQ;CAC1C,OACE,oBAAC,OAAD;EACO;EACL,WAAW,WAAW,sBAAsB,SAAS;EACrD,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,aAAa,cAAc"}

package/dist/Drawer/index.d.mts

@@ -0,0 +1,2 @@
+import { Drawer, DrawerBody, DrawerBodyProps, DrawerFooter, DrawerFooterProps, DrawerHeader, DrawerHeaderProps, DrawerHeading, DrawerHeadingProps, DrawerProps } from "./Drawer.mjs";
+export { Drawer, DrawerBody, type DrawerBodyProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerHeading, type DrawerHeadingProps, type DrawerProps };

package/dist/EmailInput/EmailInput.d.mts

@@ -0,0 +1,40 @@
+import React from "react";
+import { FormControlWidth } from "@dsn-starter-kit/core";
+//#region src/EmailInput/EmailInput.d.ts
+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" />
+ * ```
+ */
+declare const EmailInput: React.ForwardRefExoticComponent<EmailInputProps & React.RefAttributes<HTMLInputElement>>;
+//#endregion
+export { EmailInput, EmailInputProps };
+//# sourceMappingURL=EmailInput.d.mts.map

package/dist/EmailInput/EmailInput.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.d.mts","names":[],"sources":["../../src/EmailInput/EmailInput.tsx"],"mappings":";;;UAIiB,wBAAwB,KACvC,MAAM,oBAAoB;;;;;EAO1B;;;;;EAMA,QAAQ;;;;EAKR;;;;;;;;;;;;;;;;;;;cAoBW,YAAU,MAAA,0BAAA,kBAAA,MAAA,cAAA"}

package/dist/EmailInput/EmailInput.mjs

@@ -0,0 +1,39 @@
+/* empty css                      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/EmailInput/EmailInput.tsx
+/**
+* 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" />
+* ```
+*/
+const EmailInput = React.forwardRef(({ className, invalid, width, autoComplete, ...props }, ref) => {
+	const classes = classNames("dsn-text-input", width && `dsn-text-input--width-${width}`, className);
+	return /* @__PURE__ */ jsx("input", {
+		ref,
+		type: "email",
+		inputMode: "email",
+		className: classes,
+		autoComplete: autoComplete || "email",
+		"aria-invalid": invalid || void 0,
+		...props
+	});
+});
+EmailInput.displayName = "EmailInput";
+//#endregion
+export { EmailInput };
+
+//# sourceMappingURL=EmailInput.mjs.map

package/dist/EmailInput/EmailInput.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmailInput.mjs","names":[],"sources":["../../src/EmailInput/EmailInput.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames, FormControlWidth } from '@dsn-starter-kit/core';\nimport '../TextInput/TextInput.css';\n\nexport interface EmailInputProps extends Omit<\n  React.InputHTMLAttributes<HTMLInputElement>,\n  'type'\n> {\n  /**\n   * Whether the input is in an invalid state\n   * @default false\n   */\n  invalid?: boolean;\n\n  /**\n   * Width variant for the input\n   * @default undefined (uses default max-width from form-control)\n   */\n  width?: FormControlWidth;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n}\n\n/**\n * Email Input component\n * Email input with appropriate inputmode and autocomplete\n *\n * @example\n * ```tsx\n * // Basic usage\n * <EmailInput placeholder=\"naam@voorbeeld.nl\" />\n *\n * // With label\n * <FormFieldLabel htmlFor=\"email\">E-mailadres</FormFieldLabel>\n * <EmailInput id=\"email\" />\n *\n * // Invalid state\n * <EmailInput invalid aria-invalid=\"true\" aria-describedby=\"error\" />\n * ```\n */\nexport const EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(\n  ({ className, invalid, width, autoComplete, ...props }, ref) => {\n    const classes = classNames(\n      'dsn-text-input',\n      width && `dsn-text-input--width-${width}`,\n      className\n    );\n\n    return (\n      <input\n        ref={ref}\n        type=\"email\"\n        inputMode=\"email\"\n        className={classes}\n        autoComplete={autoComplete || 'email'}\n        aria-invalid={invalid || undefined}\n        {...props}\n      />\n    );\n  }\n);\n\nEmailInput.displayName = 'EmailInput';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAa,aAAa,MAAM,YAC7B,EAAE,WAAW,SAAS,OAAO,cAAc,GAAG,SAAS,QAAQ;CAC9D,MAAM,UAAU,WACd,kBACA,SAAS,yBAAyB,SAClC,SACF;CAEA,OACE,oBAAC,SAAD;EACO;EACL,MAAK;EACL,WAAU;EACV,WAAW;EACX,cAAc,gBAAgB;EAC9B,gBAAc,WAAW,KAAA;EACzB,GAAI;CACL,CAAA;AAEL,CACF;AAEA,WAAW,cAAc"}

package/dist/EmailInput/index.d.mts

@@ -0,0 +1,2 @@
+import { EmailInput, EmailInputProps } from "./EmailInput.mjs";
+export { EmailInput, type EmailInputProps };

package/dist/File/File.d.mts

@@ -0,0 +1,124 @@
+import React from "react";
+//#region src/File/File.d.ts
+type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';
+type FileCtaVariant = 'view' | 'download';
+type FileMediaType = 'document' | 'image';
+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;
+  /**
+   * Tekst voor de aria-live regio bij de error state.
+   * Standaard "{fileName}: {errorMessage}", of "{fileName} uploaden mislukt"
+   * wanneer er geen errorMessage is.
+   */
+  errorLabel?: 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"
+ * />
+ * ```
+ */
+declare const File: React.ForwardRefExoticComponent<FileProps & React.RefAttributes<HTMLDivElement>>;
+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>
+ * ```
+ */
+declare const FileList: React.ForwardRefExoticComponent<FileListProps & React.RefAttributes<HTMLUListElement>>;
+//#endregion
+export { File, FileCtaVariant, FileList, FileListProps, FileMediaType, FileProps, FileStatus };
+//# sourceMappingURL=File.d.mts.map

package/dist/File/File.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.d.mts","names":[],"sources":["../../src/File/File.tsx"],"mappings":";;KAOY;KACA;KACA;UAEK,kBAAkB,MAAM,eAAe;;EAEtD;;EAGA;;EAGA;;;;;;EAOA,SAAS;;EAGT;;EAGA;;EAGA;;;;;EAMA;;;;;;;EAQA,aAAa;;;;;EAMb;;;;;;EAOA,YAAY;;EAGZ;;;;;EAMA;;;;;EAMA;;;;;;EAOA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAsCW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA;UAuLA,sBAAsB,MAAM,eAAe;;EAE1D,WAAW,MAAM;EACjB;;;;;;;;;;;;;;;cAgBW,UAAQ,MAAA,0BAAA,gBAAA,MAAA,cAAA"}

package/dist/File/File2.mjs

@@ -0,0 +1,196 @@
+import { Icon } from "../Icon/Icon2.mjs";
+import { Spinner } from "../Spinner/Spinner2.mjs";
+import { FormFieldErrorMessage } from "../FormFieldErrorMessage/FormFieldErrorMessage2.mjs";
+/* empty css      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/File/File.tsx
+/**
+* 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"
+* />
+* ```
+*/
+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, errorLabel, ...props }, ref) => {
+	const [currentStatus, setCurrentStatus] = React.useState(status);
+	const [liveText, setLiveText] = React.useState("");
+	React.useEffect(() => {
+		setCurrentStatus(status);
+	}, [status]);
+	React.useEffect(() => {
+		if (currentStatus === "uploaded") {
+			setLiveText(uploadedLabel ?? `${fileName} succesvol geüpload`);
+			const timer = setTimeout(() => {
+				setCurrentStatus("default");
+				setLiveText("");
+			}, 2e3);
+			return () => clearTimeout(timer);
+		}
+		if (currentStatus === "error") {
+			setLiveText(errorLabel ?? (errorMessage ? `${fileName}: ${errorMessage}` : `${fileName} uploaden mislukt`));
+			return;
+		}
+		setLiveText("");
+	}, [
+		currentStatus,
+		fileName,
+		uploadedLabel,
+		errorLabel,
+		errorMessage
+	]);
+	const fileNameWithoutExt = React.useMemo(() => {
+		const lastDot = fileName.lastIndexOf(".");
+		return lastDot > 0 ? fileName.slice(0, lastDot) : fileName;
+	}, [fileName]);
+	const metaText = [fileType, fileSize].filter(Boolean).join(" · ");
+	const isInteractive = Boolean(href) && !onDelete;
+	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 /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: rootClasses,
+		...props,
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "dsn-file__media",
+				"aria-hidden": "true",
+				children: previewSrc ? /* @__PURE__ */ jsx("img", {
+					className: "dsn-file__preview",
+					src: previewSrc,
+					alt: ""
+				}) : /* @__PURE__ */ jsx(Icon, {
+					name: iconName,
+					"aria-hidden": true
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dsn-file__content",
+				children: [
+					href ? /* @__PURE__ */ jsx("a", {
+						className: nameClasses,
+						href,
+						target: "_blank",
+						rel: "noopener noreferrer",
+						children: fileNameWithoutExt
+					}) : /* @__PURE__ */ jsx("span", {
+						className: nameClasses,
+						children: fileNameWithoutExt
+					}),
+					metaText && /* @__PURE__ */ jsx("span", {
+						className: "dsn-file__meta",
+						children: metaText
+					}),
+					currentStatus === "error" && errorMessage && /* @__PURE__ */ jsx(FormFieldErrorMessage, { children: errorMessage })
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "dsn-file__actions",
+				children: [
+					!isInteractive && currentStatus === "loading" && /* @__PURE__ */ jsx(Spinner, {
+						label: loadingLabel,
+						hideLabel: true
+					}),
+					!isInteractive && currentStatus === "uploaded" && /* @__PURE__ */ jsx(Icon, {
+						className: "dsn-file__status-icon",
+						name: "check",
+						"aria-hidden": true
+					}),
+					!isInteractive && (currentStatus === "default" || currentStatus === "error") && onDelete && /* @__PURE__ */ jsxs("button", {
+						type: "button",
+						className: "dsn-link dsn-link-button dsn-link--size-default",
+						onClick: onDelete,
+						children: [
+							/* @__PURE__ */ jsx(Icon, {
+								name: "trash",
+								"aria-hidden": true
+							}),
+							deleteLabel,
+							/* @__PURE__ */ jsxs("span", {
+								className: "dsn-visually-hidden",
+								children: [" ", fileName]
+							})
+						]
+					}),
+					isInteractive && ctaVariant === "download" && /* @__PURE__ */ jsxs("a", {
+						className: "dsn-link",
+						href,
+						"aria-hidden": "true",
+						tabIndex: -1,
+						download: true,
+						children: [/* @__PURE__ */ jsx(Icon, {
+							name: "download",
+							"aria-hidden": true
+						}), resolvedCtaLabel]
+					})
+				]
+			}),
+			/* @__PURE__ */ 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>
+* ```
+*/
+const FileList = React.forwardRef(({ className, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className: classNames("dsn-file-list", className),
+		role: "list",
+		...props,
+		children: React.Children.map(children, (child, index) => /* @__PURE__ */ jsx("li", { children: child }, index))
+	});
+});
+FileList.displayName = "FileList";
+//#endregion
+export { File, FileList };
+
+//# sourceMappingURL=File2.mjs.map

package/dist/File/File2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"File2.mjs","names":[],"sources":["../../src/File/File.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { Icon } from '../Icon';\nimport { Spinner } from '../Spinner';\nimport { FormFieldErrorMessage } from '../FormFieldErrorMessage';\nimport './File.css';\n\nexport type FileStatus = 'default' | 'loading' | 'uploaded' | 'error';\nexport type FileCtaVariant = 'view' | 'download';\nexport type FileMediaType = 'document' | 'image';\n\nexport interface FileProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Bestandsnaam inclusief extensie (vereist). Extensie wordt visueel afgekapt. */\n  fileName: string;\n\n  /** Bestandstype als afkorting: \"PDF\", \"JPG\". Getoond in dsn-file__meta. */\n  fileType?: string;\n\n  /** Bestandsgrootte als geformatteerde string: \"1,2 MB\". */\n  fileSize?: string;\n\n  /**\n   * State van het bestand.\n   * Bij 'uploaded' keert het component na 2 seconden automatisch terug naar 'default'.\n   * @default 'default'\n   */\n  status?: FileStatus;\n\n  /** Foutmelding, getoond bij status=\"error\". */\n  errorMessage?: string;\n\n  /** URL naar het bestand. Maakt de naam een <a> en schakelt de interactieve variant in. */\n  href?: string;\n\n  /** Callback voor de verwijderactie. Toont de \"Verwijder\"-knop. */\n  onDelete?: () => void;\n\n  /**\n   * Zichtbare tekst op de verwijder-knop.\n   * @default \"Verwijder\"\n   */\n  deleteLabel?: string;\n\n  /**\n   * CTA-type in de interactieve variant.\n   * 'view' toont geen aparte CTA; de bestandsnaam opent als stretched link in een nieuw tabblad.\n   * 'download' toont een aparte download-knop; de bestandsnaam opent in een nieuw tabblad.\n   * @default 'view'\n   */\n  ctaVariant?: FileCtaVariant;\n\n  /**\n   * Overschrijft het standaard CTA-label voor de download-variant.\n   * Standaard: \"Download\".\n   */\n  ctaLabel?: string;\n\n  /**\n   * Bepaalt het icoon: file-description.svg of photo.svg.\n   * Genegeerd wanneer previewSrc aanwezig is.\n   * @default 'document'\n   */\n  mediaType?: FileMediaType;\n\n  /** URL van de afbeeldingspreview. Vervangt het icoon in het media-vlak. */\n  previewSrc?: string;\n\n  /**\n   * Visueel verborgen label voor de Spinner.\n   * @default \"Bezig met uploaden\"\n   */\n  loadingLabel?: string;\n\n  /**\n   * Tekst voor de aria-live regio bij de uploaded state.\n   * @default \"{fileName} succesvol geüpload\"\n   */\n  uploadedLabel?: string;\n\n  /**\n   * Tekst voor de aria-live regio bij de error state.\n   * Standaard \"{fileName}: {errorMessage}\", of \"{fileName} uploaden mislukt\"\n   * wanneer er geen errorMessage is.\n   */\n  errorLabel?: string;\n}\n\n/**\n * File component\n * Toont meta-informatie over een bestand (naam, type, grootte) samen met acties.\n * Ondersteunt vier upload-states (default, loading, uploaded, error) en een\n * interactieve variant voor controle- of detailpagina's.\n *\n * @example\n * ```tsx\n * // Default — eerder geüpload bestand, met verwijder-optie\n * <File\n *   fileName=\"document.pdf\"\n *   fileType=\"PDF\"\n *   fileSize=\"1,2 MB\"\n *   href=\"/bestanden/document.pdf\"\n *   onDelete={() => handleDelete()}\n * />\n *\n * // Interactief — bestandsnaam als link (nieuw tabblad)\n * <File\n *   fileName=\"rapport-2024.pdf\"\n *   fileType=\"PDF\"\n *   fileSize=\"2,1 MB\"\n *   href=\"/bestanden/rapport-2024.pdf\"\n * />\n *\n * // Interactief — download CTA\n * <File\n *   fileName=\"rapport-2024.pdf\"\n *   fileType=\"PDF\"\n *   fileSize=\"2,1 MB\"\n *   href=\"/bestanden/rapport-2024.pdf\"\n *   ctaVariant=\"download\"\n * />\n * ```\n */\nexport const File = React.forwardRef<HTMLDivElement, FileProps>(\n  (\n    {\n      className,\n      fileName,\n      fileType,\n      fileSize,\n      status = 'default',\n      errorMessage,\n      href,\n      onDelete,\n      deleteLabel = 'Verwijder',\n      ctaVariant = 'view',\n      ctaLabel,\n      mediaType = 'document',\n      previewSrc,\n      loadingLabel = 'Bezig met uploaden',\n      uploadedLabel,\n      errorLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const [currentStatus, setCurrentStatus] =\n      React.useState<FileStatus>(status);\n    const [liveText, setLiveText] = React.useState('');\n\n    // Synchroniseer externe status-prop met interne state\n    React.useEffect(() => {\n      setCurrentStatus(status);\n    }, [status]);\n\n    // Vul de aria-live regio bij een eindstatus van de upload.\n    // De tekst wordt pas ná de eerste render gezet, zodat screenreaders de\n    // wijziging in de regio waarnemen en aankondigen.\n    React.useEffect(() => {\n      // Uploaded: kondig succes aan en keer na 2s terug naar default\n      if (currentStatus === 'uploaded') {\n        setLiveText(uploadedLabel ?? `${fileName} succesvol geüpload`);\n\n        const timer = setTimeout(() => {\n          setCurrentStatus('default');\n          setLiveText('');\n        }, 2000);\n\n        return () => clearTimeout(timer);\n      }\n\n      // Error: kondig de mislukking aan, inclusief de reden wanneer bekend.\n      // De tekst blijft staan zolang de error-state actief is.\n      if (currentStatus === 'error') {\n        setLiveText(\n          errorLabel ??\n            (errorMessage\n              ? `${fileName}: ${errorMessage}`\n              : `${fileName} uploaden mislukt`)\n        );\n        return undefined;\n      }\n\n      // Default en loading: geen aankondiging\n      setLiveText('');\n      return undefined;\n    }, [currentStatus, fileName, uploadedLabel, errorLabel, errorMessage]);\n\n    // Bestandsnaam zonder extensie voor visuele weergave\n    const fileNameWithoutExt = React.useMemo(() => {\n      const lastDot = fileName.lastIndexOf('.');\n      return lastDot > 0 ? fileName.slice(0, lastDot) : fileName;\n    }, [fileName]);\n\n    // Meta-tekst: \"PDF · 1,2 MB\" of alleen type of grootte\n    const metaParts = [fileType, fileSize].filter(Boolean);\n    const metaText = metaParts.join(' · ');\n\n    // Interactieve modus: href aanwezig en geen onDelete\n    const isInteractive = Boolean(href) && !onDelete;\n    // Stretched link: interactief zonder aparte download-CTA\n    const isStretchedLink = isInteractive && ctaVariant !== 'download';\n\n    const rootClasses = classNames(\n      'dsn-file',\n      currentStatus === 'loading' && 'dsn-file--loading',\n      currentStatus === 'uploaded' && 'dsn-file--uploaded',\n      currentStatus === 'error' && 'dsn-file--error',\n      isStretchedLink && 'dsn-file--interactive',\n      className\n    );\n\n    const nameClasses = classNames(\n      'dsn-file__name',\n      href && 'dsn-link',\n      isStretchedLink && 'dsn-file__name--stretched'\n    );\n\n    const iconName = mediaType === 'image' ? 'photo' : 'file-description';\n    const resolvedCtaLabel = ctaLabel ?? 'Download';\n\n    return (\n      <div ref={ref} className={rootClasses} {...props}>\n        {/* Media-vlak: icoon of preview */}\n        <div className=\"dsn-file__media\" aria-hidden=\"true\">\n          {previewSrc ? (\n            <img className=\"dsn-file__preview\" src={previewSrc} alt=\"\" />\n          ) : (\n            <Icon name={iconName} aria-hidden />\n          )}\n        </div>\n\n        {/* Content: naam, meta en optionele ErrorMessage */}\n        <div className=\"dsn-file__content\">\n          {href ? (\n            <a\n              className={nameClasses}\n              href={href}\n              target=\"_blank\"\n              rel=\"noopener noreferrer\"\n            >\n              {fileNameWithoutExt}\n            </a>\n          ) : (\n            <span className={nameClasses}>{fileNameWithoutExt}</span>\n          )}\n          {metaText && <span className=\"dsn-file__meta\">{metaText}</span>}\n          {currentStatus === 'error' && errorMessage && (\n            <FormFieldErrorMessage>{errorMessage}</FormFieldErrorMessage>\n          )}\n        </div>\n\n        {/* Actions: Spinner, status-icoon, verwijder-knop of CTA-link */}\n        <div className=\"dsn-file__actions\">\n          {!isInteractive && currentStatus === 'loading' && (\n            <Spinner label={loadingLabel} hideLabel />\n          )}\n          {!isInteractive && currentStatus === 'uploaded' && (\n            <Icon className=\"dsn-file__status-icon\" name=\"check\" aria-hidden />\n          )}\n          {!isInteractive &&\n            (currentStatus === 'default' || currentStatus === 'error') &&\n            onDelete && (\n              <button\n                type=\"button\"\n                className=\"dsn-link dsn-link-button dsn-link--size-default\"\n                onClick={onDelete}\n              >\n                <Icon name=\"trash\" aria-hidden />\n                {deleteLabel}\n                <span className=\"dsn-visually-hidden\"> {fileName}</span>\n              </button>\n            )}\n          {isInteractive && ctaVariant === 'download' && (\n            <a\n              className=\"dsn-link\"\n              href={href}\n              aria-hidden=\"true\"\n              tabIndex={-1}\n              download\n            >\n              <Icon name=\"download\" aria-hidden />\n              {resolvedCtaLabel}\n            </a>\n          )}\n        </div>\n\n        {/* aria-live regio: kondigt statuswijzigingen aan voor screenreaders */}\n        <span\n          className=\"dsn-visually-hidden\"\n          aria-live=\"polite\"\n          aria-atomic=\"true\"\n        >\n          {liveText}\n        </span>\n      </div>\n    );\n  }\n);\n\nFile.displayName = 'File';\n\n// =============================================================================\n// FileList — ul wrapper voor meerdere File items\n// =============================================================================\n\nexport interface FileListProps extends React.HTMLAttributes<HTMLUListElement> {\n  /** File componenten */\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * FileList component\n * Wrapper voor meerdere File componenten.\n * Rendert een <ul role=\"list\"> met <li> wrappers — nodig omdat CSS-resets lijstsemantiek verwijderen.\n *\n * @example\n * ```tsx\n * <FileList>\n *   <File fileName=\"document.pdf\" fileType=\"PDF\" fileSize=\"1,2 MB\" href=\"...\" onDelete={() => {}} />\n *   <File fileName=\"foto.jpg\" fileType=\"JPG\" fileSize=\"3,4 MB\" href=\"...\" onDelete={() => {}} />\n * </FileList>\n * ```\n */\nexport const FileList = React.forwardRef<HTMLUListElement, FileListProps>(\n  ({ className, children, ...props }, ref) => {\n    return (\n      <ul\n        ref={ref}\n        className={classNames('dsn-file-list', className)}\n        role=\"list\"\n        {...props}\n      >\n        {React.Children.map(children, (child, index) => (\n          <li key={index}>{child}</li>\n        ))}\n      </ul>\n    );\n  }\n);\n\nFileList.displayName = 'FileList';\n"],"mappings":"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"}

package/dist/File/index.d.mts

@@ -0,0 +1,2 @@
+import { File, FileCtaVariant, FileList, FileListProps, FileMediaType, FileProps, FileStatus } from "./File.mjs";
+export { File, type FileCtaVariant, FileList, type FileListProps, type FileMediaType, type FileProps, type FileStatus };