@dsn-starter-kit/components-react 1.0.0

package/dist/Icon/Icon.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { iconMap } from './icon-registry.generated';
+import './Icon.css';
+export { iconMap };
+/**
+ * Icon component using individual Tabler Icon SVG imports
+ * Only icons you use will be included in your bundle (tree-shaking)
+ *
+ * @example
+ * ```tsx
+ * // Decorative icon (no label needed)
+ * <Icon name="check" size="md" />
+ *
+ * // Standalone icon (needs label)
+ * <Icon name="settings" size="lg" aria-label="Open settings" />
+ *
+ * // Icon with text (mark as decorative)
+ * <span>
+ *   <Icon name="check" size="sm" />
+ *   Task complete
+ * </span>
+ * ```
+ */
+export const Icon = React.forwardRef(({ name, size = 'md', className, 'aria-label': ariaLabel, ...props }, ref) => {
+    const IconComponent = iconMap[name];
+    if (!IconComponent) {
+        if (process.env.NODE_ENV !== 'production') {
+            console.warn(`[DSN Icon] Icon "${name}" not found. Available icons: ${Object.keys(iconMap).join(', ')}`);
+        }
+        return null;
+    }
+    const classes = classNames('dsn-icon', size !== 'md' && `dsn-icon--${size}`, className);
+    // If no aria-label is provided, mark as decorative
+    const ariaProps = ariaLabel
+        ? { 'aria-label': ariaLabel, role: 'img' }
+        : { 'aria-hidden': true };
+    return (_jsx(IconComponent, { ref: ref, className: classes, ...ariaProps, ...props }));
+});
+Icon.displayName = 'Icon';
+//# sourceMappingURL=Icon.js.map

package/dist/Icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AAGpD,OAAO,YAAY,CAAC;AAGpB,OAAO,EAAE,OAAO,EAAE,CAAC;AA8BnB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EAAE,IAAI,EAAE,IAAI,GAAG,IAAI,EAAE,SAAS,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,aAAa,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAEpC,IAAI,CAAC,aAAa,EAAE,CAAC;QACnB,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE,CAAC;YAC1C,OAAO,CAAC,IAAI,CACV,oBAAoB,IAAI,iCAAiC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAC3F,CAAC;QACJ,CAAC;QACD,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,IAAI,KAAK,IAAI,IAAI,aAAa,IAAI,EAAE,EACpC,SAAS,CACV,CAAC;IAEF,mDAAmD;IACnD,MAAM,SAAS,GAAG,SAAS;QACzB,CAAC,CAAC,EAAE,YAAY,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE;QAC1C,CAAC,CAAC,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;IAE5B,OAAO,CACL,KAAC,aAAa,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,SAAS,KAAM,KAAK,GAAI,CAC1E,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Icon/icon-registry.generated.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export type IconName = 'alert-triangle' | 'archive' | 'arrow-down' | 'arrow-left' | 'arrow-narrow-down' | 'arrow-narrow-up' | 'arrow-right' | 'arrow-up' | 'arrows-sort' | 'bell' | 'calendar-event' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle-check' | 'clock' | 'dots-vertical' | 'download' | 'edit' | 'exclamation-circle' | 'external-link' | 'eye' | 'file-description' | 'folder' | 'heart-filled' | 'heart' | 'home' | 'info-circle' | 'loader' | 'mail' | 'menu' | 'message-circle' | 'minus' | 'paperclip' | 'pencil' | 'photo' | 'plus' | 'printer' | 'search' | 'selector' | 'settings' | 'sort-ascending' | 'sort-descending' | 'star-filled' | 'star' | 'trash' | 'upload' | 'user' | 'x';
+export declare const iconMap: Record<IconName, React.FC<React.SVGProps<SVGSVGElement>>>;
+//# sourceMappingURL=icon-registry.generated.d.ts.map

package/dist/Icon/icon-registry.generated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.generated.d.ts","sourceRoot":"","sources":["../../src/Icon/icon-registry.generated.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAsD1B,MAAM,MAAM,QAAQ,GAChB,gBAAgB,GAChB,SAAS,GACT,YAAY,GACZ,YAAY,GACZ,mBAAmB,GACnB,iBAAiB,GACjB,aAAa,GACb,UAAU,GACV,aAAa,GACb,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,cAAc,GACd,cAAc,GACd,eAAe,GACf,YAAY,GACZ,cAAc,GACd,OAAO,GACP,eAAe,GACf,UAAU,GACV,MAAM,GACN,oBAAoB,GACpB,eAAe,GACf,KAAK,GACL,kBAAkB,GAClB,QAAQ,GACR,cAAc,GACd,OAAO,GACP,MAAM,GACN,aAAa,GACb,QAAQ,GACR,MAAM,GACN,MAAM,GACN,gBAAgB,GAChB,OAAO,GACP,WAAW,GACX,QAAQ,GACR,OAAO,GACP,MAAM,GACN,SAAS,GACT,QAAQ,GACR,UAAU,GACV,UAAU,GACV,gBAAgB,GAChB,iBAAiB,GACjB,aAAa,GACb,MAAM,GACN,OAAO,GACP,QAAQ,GACR,MAAM,GACN,GAAG,CAAC;AAER,eAAO,MAAM,OAAO,EAAE,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC,CAoD7E,CAAC"}

package/dist/Icon/icon-registry.generated.js

@@ -0,0 +1,105 @@
+import AlertTriangleIcon from '../../../components-html/assets/icons/alert-triangle.svg?react';
+import ArchiveIcon from '../../../components-html/assets/icons/archive.svg?react';
+import ArrowDownIcon from '../../../components-html/assets/icons/arrow-down.svg?react';
+import ArrowLeftIcon from '../../../components-html/assets/icons/arrow-left.svg?react';
+import ArrowNarrowDownIcon from '../../../components-html/assets/icons/arrow-narrow-down.svg?react';
+import ArrowNarrowUpIcon from '../../../components-html/assets/icons/arrow-narrow-up.svg?react';
+import ArrowRightIcon from '../../../components-html/assets/icons/arrow-right.svg?react';
+import ArrowUpIcon from '../../../components-html/assets/icons/arrow-up.svg?react';
+import ArrowsSortIcon from '../../../components-html/assets/icons/arrows-sort.svg?react';
+import BellIcon from '../../../components-html/assets/icons/bell.svg?react';
+import CalendarEventIcon from '../../../components-html/assets/icons/calendar-event.svg?react';
+import CheckIcon from '../../../components-html/assets/icons/check.svg?react';
+import ChevronDownIcon from '../../../components-html/assets/icons/chevron-down.svg?react';
+import ChevronLeftIcon from '../../../components-html/assets/icons/chevron-left.svg?react';
+import ChevronRightIcon from '../../../components-html/assets/icons/chevron-right.svg?react';
+import ChevronUpIcon from '../../../components-html/assets/icons/chevron-up.svg?react';
+import CircleCheckIcon from '../../../components-html/assets/icons/circle-check.svg?react';
+import ClockIcon from '../../../components-html/assets/icons/clock.svg?react';
+import DotsVerticalIcon from '../../../components-html/assets/icons/dots-vertical.svg?react';
+import DownloadIcon from '../../../components-html/assets/icons/download.svg?react';
+import EditIcon from '../../../components-html/assets/icons/edit.svg?react';
+import ExclamationCircleIcon from '../../../components-html/assets/icons/exclamation-circle.svg?react';
+import ExternalLinkIcon from '../../../components-html/assets/icons/external-link.svg?react';
+import EyeIcon from '../../../components-html/assets/icons/eye.svg?react';
+import FileDescriptionIcon from '../../../components-html/assets/icons/file-description.svg?react';
+import FolderIcon from '../../../components-html/assets/icons/folder.svg?react';
+import HeartFilledIcon from '../../../components-html/assets/icons/heart-filled.svg?react';
+import HeartIcon from '../../../components-html/assets/icons/heart.svg?react';
+import HomeIcon from '../../../components-html/assets/icons/home.svg?react';
+import InfoCircleIcon from '../../../components-html/assets/icons/info-circle.svg?react';
+import LoaderIcon from '../../../components-html/assets/icons/loader.svg?react';
+import MailIcon from '../../../components-html/assets/icons/mail.svg?react';
+import MenuIcon from '../../../components-html/assets/icons/menu.svg?react';
+import MessageCircleIcon from '../../../components-html/assets/icons/message-circle.svg?react';
+import MinusIcon from '../../../components-html/assets/icons/minus.svg?react';
+import PaperclipIcon from '../../../components-html/assets/icons/paperclip.svg?react';
+import PencilIcon from '../../../components-html/assets/icons/pencil.svg?react';
+import PhotoIcon from '../../../components-html/assets/icons/photo.svg?react';
+import PlusIcon from '../../../components-html/assets/icons/plus.svg?react';
+import PrinterIcon from '../../../components-html/assets/icons/printer.svg?react';
+import SearchIcon from '../../../components-html/assets/icons/search.svg?react';
+import SelectorIcon from '../../../components-html/assets/icons/selector.svg?react';
+import SettingsIcon from '../../../components-html/assets/icons/settings.svg?react';
+import SortAscendingIcon from '../../../components-html/assets/icons/sort-ascending.svg?react';
+import SortDescendingIcon from '../../../components-html/assets/icons/sort-descending.svg?react';
+import StarFilledIcon from '../../../components-html/assets/icons/star-filled.svg?react';
+import StarIcon from '../../../components-html/assets/icons/star.svg?react';
+import TrashIcon from '../../../components-html/assets/icons/trash.svg?react';
+import UploadIcon from '../../../components-html/assets/icons/upload.svg?react';
+import UserIcon from '../../../components-html/assets/icons/user.svg?react';
+import XIcon from '../../../components-html/assets/icons/x.svg?react';
+export const iconMap = {
+    'alert-triangle': AlertTriangleIcon,
+    'archive': ArchiveIcon,
+    'arrow-down': ArrowDownIcon,
+    'arrow-left': ArrowLeftIcon,
+    'arrow-narrow-down': ArrowNarrowDownIcon,
+    'arrow-narrow-up': ArrowNarrowUpIcon,
+    'arrow-right': ArrowRightIcon,
+    'arrow-up': ArrowUpIcon,
+    'arrows-sort': ArrowsSortIcon,
+    'bell': BellIcon,
+    'calendar-event': CalendarEventIcon,
+    'check': CheckIcon,
+    'chevron-down': ChevronDownIcon,
+    'chevron-left': ChevronLeftIcon,
+    'chevron-right': ChevronRightIcon,
+    'chevron-up': ChevronUpIcon,
+    'circle-check': CircleCheckIcon,
+    'clock': ClockIcon,
+    'dots-vertical': DotsVerticalIcon,
+    'download': DownloadIcon,
+    'edit': EditIcon,
+    'exclamation-circle': ExclamationCircleIcon,
+    'external-link': ExternalLinkIcon,
+    'eye': EyeIcon,
+    'file-description': FileDescriptionIcon,
+    'folder': FolderIcon,
+    'heart-filled': HeartFilledIcon,
+    'heart': HeartIcon,
+    'home': HomeIcon,
+    'info-circle': InfoCircleIcon,
+    'loader': LoaderIcon,
+    'mail': MailIcon,
+    'menu': MenuIcon,
+    'message-circle': MessageCircleIcon,
+    'minus': MinusIcon,
+    'paperclip': PaperclipIcon,
+    'pencil': PencilIcon,
+    'photo': PhotoIcon,
+    'plus': PlusIcon,
+    'printer': PrinterIcon,
+    'search': SearchIcon,
+    'selector': SelectorIcon,
+    'settings': SettingsIcon,
+    'sort-ascending': SortAscendingIcon,
+    'sort-descending': SortDescendingIcon,
+    'star-filled': StarFilledIcon,
+    'star': StarIcon,
+    'trash': TrashIcon,
+    'upload': UploadIcon,
+    'user': UserIcon,
+    'x': XIcon,
+};
+//# sourceMappingURL=icon-registry.generated.js.map

package/dist/Icon/icon-registry.generated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.generated.js","sourceRoot":"","sources":["../../src/Icon/icon-registry.generated.ts"],"names":[],"mappings":"AAIA,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAC/F,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAClF,OAAO,aAAa,MAAM,4DAA4D,CAAC;AACvF,OAAO,aAAa,MAAM,4DAA4D,CAAC;AACvF,OAAO,mBAAmB,MAAM,mEAAmE,CAAC;AACpG,OAAO,iBAAiB,MAAM,iEAAiE,CAAC;AAChG,OAAO,cAAc,MAAM,6DAA6D,CAAC;AACzF,OAAO,WAAW,MAAM,0DAA0D,CAAC;AACnF,OAAO,cAAc,MAAM,6DAA6D,CAAC;AACzF,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAC/F,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,gBAAgB,MAAM,+DAA+D,CAAC;AAC7F,OAAO,aAAa,MAAM,4DAA4D,CAAC;AACvF,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,gBAAgB,MAAM,+DAA+D,CAAC;AAC7F,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,qBAAqB,MAAM,oEAAoE,CAAC;AACvG,OAAO,gBAAgB,MAAM,+DAA+D,CAAC;AAC7F,OAAO,OAAO,MAAM,qDAAqD,CAAC;AAC1E,OAAO,mBAAmB,MAAM,kEAAkE,CAAC;AACnG,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,eAAe,MAAM,8DAA8D,CAAC;AAC3F,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,cAAc,MAAM,6DAA6D,CAAC;AACzF,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAC/F,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,aAAa,MAAM,2DAA2D,CAAC;AACtF,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,WAAW,MAAM,yDAAyD,CAAC;AAClF,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,YAAY,MAAM,0DAA0D,CAAC;AACpF,OAAO,iBAAiB,MAAM,gEAAgE,CAAC;AAC/F,OAAO,kBAAkB,MAAM,iEAAiE,CAAC;AACjG,OAAO,cAAc,MAAM,6DAA6D,CAAC;AACzF,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,SAAS,MAAM,uDAAuD,CAAC;AAC9E,OAAO,UAAU,MAAM,wDAAwD,CAAC;AAChF,OAAO,QAAQ,MAAM,sDAAsD,CAAC;AAC5E,OAAO,KAAK,MAAM,mDAAmD,CAAC;AAuDtE,MAAM,CAAC,MAAM,OAAO,GAA8D;IAChF,gBAAgB,EAAE,iBAAiB;IACnC,SAAS,EAAE,WAAW;IACtB,YAAY,EAAE,aAAa;IAC3B,YAAY,EAAE,aAAa;IAC3B,mBAAmB,EAAE,mBAAmB;IACxC,iBAAiB,EAAE,iBAAiB;IACpC,aAAa,EAAE,cAAc;IAC7B,UAAU,EAAE,WAAW;IACvB,aAAa,EAAE,cAAc;IAC7B,MAAM,EAAE,QAAQ;IAChB,gBAAgB,EAAE,iBAAiB;IACnC,OAAO,EAAE,SAAS;IAClB,cAAc,EAAE,eAAe;IAC/B,cAAc,EAAE,eAAe;IAC/B,eAAe,EAAE,gBAAgB;IACjC,YAAY,EAAE,aAAa;IAC3B,cAAc,EAAE,eAAe;IAC/B,OAAO,EAAE,SAAS;IAClB,eAAe,EAAE,gBAAgB;IACjC,UAAU,EAAE,YAAY;IACxB,MAAM,EAAE,QAAQ;IAChB,oBAAoB,EAAE,qBAAqB;IAC3C,eAAe,EAAE,gBAAgB;IACjC,KAAK,EAAE,OAAO;IACd,kBAAkB,EAAE,mBAAmB;IACvC,QAAQ,EAAE,UAAU;IACpB,cAAc,EAAE,eAAe;IAC/B,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,aAAa,EAAE,cAAc;IAC7B,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,MAAM,EAAE,QAAQ;IAChB,gBAAgB,EAAE,iBAAiB;IACnC,OAAO,EAAE,SAAS;IAClB,WAAW,EAAE,aAAa;IAC1B,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;IAChB,SAAS,EAAE,WAAW;IACtB,QAAQ,EAAE,UAAU;IACpB,UAAU,EAAE,YAAY;IACxB,UAAU,EAAE,YAAY;IACxB,gBAAgB,EAAE,iBAAiB;IACnC,iBAAiB,EAAE,kBAAkB;IACrC,aAAa,EAAE,cAAc;IAC7B,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,MAAM,EAAE,QAAQ;IAChB,GAAG,EAAE,KAAK;CACX,CAAC"}

package/dist/Icon/index.d.ts

@@ -0,0 +1,3 @@
+export { Icon, iconMap } from './Icon';
+export type { IconProps, IconName, IconSize } from './Icon';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACvC,YAAY,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC"}

package/dist/Icon/index.js

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

package/dist/Icon/index.js.map

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

package/dist/Image/Image.css

@@ -0,0 +1,123 @@
+/**
+ * Image component styles for React
+ * Re-exports the base Image styles from components-html
+ */
+
+/**
+ * Image Component
+ * Performante, toegankelijke wrapper rond het native <img> element.
+ * Ondersteunt vaste beeldverhoudingen, lazy loading en optioneel bijschrift.
+ *
+ * Usage:
+ * <!-- Basis -->
+ * <figure class="dsn-image">
+ *   <img
+ *     class="dsn-image__img"
+ *     src="afbeelding.jpg"
+ *     alt="Beschrijving van de afbeelding"
+ *     width="800"
+ *     height="600"
+ *     loading="lazy"
+ *     decoding="async"
+ *   />
+ * </figure>
+ *
+ * <!-- Met vaste beeldverhouding -->
+ * <figure class="dsn-image dsn-image--ratio-16-9">
+ *   <img
+ *     class="dsn-image__img"
+ *     src="hero.jpg"
+ *     alt="Beschrijving"
+ *     width="1600"
+ *     height="900"
+ *     loading="lazy"
+ *     decoding="async"
+ *   />
+ * </figure>
+ *
+ * <!-- Met bijschrift -->
+ * <figure class="dsn-image">
+ *   <img
+ *     class="dsn-image__img"
+ *     src="foto.jpg"
+ *     alt="Beschrijving van de foto"
+ *     width="800"
+ *     height="600"
+ *     loading="lazy"
+ *     decoding="async"
+ *   />
+ *   <figcaption class="dsn-image__caption">Bijschrift bij de afbeelding</figcaption>
+ * </figure>
+ *
+ * <!-- Decoratief (aria-hidden op figure) -->
+ * <figure class="dsn-image" aria-hidden="true">
+ *   <img
+ *     class="dsn-image__img"
+ *     src="decoratief.jpg"
+ *     alt=""
+ *     width="800"
+ *     height="600"
+ *     loading="lazy"
+ *     decoding="async"
+ *   />
+ * </figure>
+ */
+
+/* ===========================
+   Root container
+   =========================== */
+.dsn-image {
+  display: block;
+  margin: 0;
+}
+
+/* ===========================
+   Image element
+   =========================== */
+.dsn-image__img {
+  display: block;
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  border-radius: var(--dsn-image-border-radius);
+}
+
+/* ===========================
+   Aspect ratio modifiers
+   Aspect-ratio forceert de weergaveverhouding;
+   object-fit: cover snijdt de rest bij.
+   =========================== */
+.dsn-image--ratio-16-9 .dsn-image__img {
+  aspect-ratio: 16 / 9;
+  height: 100%;
+}
+
+.dsn-image--ratio-4-3 .dsn-image__img {
+  aspect-ratio: 4 / 3;
+  height: 100%;
+}
+
+.dsn-image--ratio-1-1 .dsn-image__img {
+  aspect-ratio: 1 / 1;
+  height: 100%;
+}
+
+/* ===========================
+   Object-fit: contain modifier
+   Toont de volledige afbeelding zonder bijsnijden.
+   =========================== */
+.dsn-image--object-fit-contain .dsn-image__img {
+  object-fit: contain;
+}
+
+/* ===========================
+   Caption
+   =========================== */
+.dsn-image__caption {
+  display: block;
+  margin-block-start: var(--dsn-image-caption-margin-block-start);
+  color: var(--dsn-image-caption-color);
+  font-size: var(--dsn-image-caption-font-size);
+  line-height: var(--dsn-image-caption-line-height);
+}
+

package/dist/Image/Image.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+import './Image.css';
+export interface ImageProps extends React.HTMLAttributes<HTMLElement> {
+    /** Verplicht. URL van de afbeelding */
+    src: string;
+    /** Verplicht. Alternatieve tekst. Lege string (`""`) voor decoratieve afbeeldingen — activeert automatisch `aria-hidden="true"` op de figure */
+    alt: string;
+    /** Verplicht. Intrinsieke breedte in pixels (voorkomt CLS) */
+    width: number;
+    /** Verplicht. Intrinsieke hoogte in pixels (voorkomt CLS) */
+    height: number;
+    /** Forceert beeldverhouding via CSS `aspect-ratio` + `object-fit: cover` */
+    ratio?: '16:9' | '4:3' | '1:1';
+    /** Hoe de afbeelding het ratio-kader vult. @default 'cover' */
+    objectFit?: 'cover' | 'contain';
+    /**
+     * LCP-modus: `loading="eager"` + `fetchpriority="high"`.
+     * Gebruik maximaal één keer per pagina voor de primaire LCP-afbeelding.
+     * @default false
+     */
+    priority?: boolean;
+    /** Optioneel bijschrift, rendert als `<figcaption>` */
+    caption?: React.ReactNode;
+    /** Pass-through naar native `srcset` attribuut */
+    srcSet?: string;
+    /** Pass-through naar native `sizes` attribuut */
+    sizes?: string;
+}
+/**
+ * Image component
+ * Performante, toegankelijke wrapper rond het native `<img>` element.
+ * Biedt ingebakken lazy loading, expliciete ondersteuning voor LCP/hero-afbeeldingen
+ * via een `priority` prop, en vaste beeldverhoudingen via de CSS `aspect-ratio` property.
+ *
+ * @example
+ * ```tsx
+ * // Basis
+ * <Image src="/foto.jpg" alt="Beschrijving" width={800} height={600} />
+ *
+ * // Met vaste beeldverhouding
+ * <Image src="/hero.jpg" alt="Hero" width={1600} height={900} ratio="16:9" />
+ *
+ * // LCP / hero-afbeelding — max. één keer per pagina
+ * <Image src="/hero.jpg" alt="Pagina hero" width={1600} height={900} ratio="16:9" priority />
+ *
+ * // Met bijschrift
+ * <Image src="/foto.jpg" alt="Beschrijving" width={800} height={600} caption="Bijschrift" />
+ *
+ * // Decoratief — alt="" activeert automatisch aria-hidden="true" op de figure
+ * <Image src="/decoratief.jpg" alt="" width={800} height={600} />
+ * ```
+ */
+export declare const Image: React.ForwardRefExoticComponent<ImageProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Image.d.ts.map

package/dist/Image/Image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.d.ts","sourceRoot":"","sources":["../../src/Image/Image.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,aAAa,CAAC;AAQrB,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACnE,uCAAuC;IACvC,GAAG,EAAE,MAAM,CAAC;IAEZ,gJAAgJ;IAChJ,GAAG,EAAE,MAAM,CAAC;IAEZ,8DAA8D;IAC9D,KAAK,EAAE,MAAM,CAAC;IAEd,6DAA6D;IAC7D,MAAM,EAAE,MAAM,CAAC;IAEf,4EAA4E;IAC5E,KAAK,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,KAAK,CAAC;IAE/B,+DAA+D;IAC/D,SAAS,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IAEhC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,uDAAuD;IACvD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B,kDAAkD;IAClD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,iDAAiD;IACjD,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAQD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,KAAK,gFAuDjB,CAAC"}

package/dist/Image/Image.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Image.css';
+const ratioClassMap = {
+    '16:9': 'dsn-image--ratio-16-9',
+    '4:3': 'dsn-image--ratio-4-3',
+    '1:1': 'dsn-image--ratio-1-1',
+};
+/**
+ * Image component
+ * Performante, toegankelijke wrapper rond het native `<img>` element.
+ * Biedt ingebakken lazy loading, expliciete ondersteuning voor LCP/hero-afbeeldingen
+ * via een `priority` prop, en vaste beeldverhoudingen via de CSS `aspect-ratio` property.
+ *
+ * @example
+ * ```tsx
+ * // Basis
+ * <Image src="/foto.jpg" alt="Beschrijving" width={800} height={600} />
+ *
+ * // Met vaste beeldverhouding
+ * <Image src="/hero.jpg" alt="Hero" width={1600} height={900} ratio="16:9" />
+ *
+ * // LCP / hero-afbeelding — max. één keer per pagina
+ * <Image src="/hero.jpg" alt="Pagina hero" width={1600} height={900} ratio="16:9" priority />
+ *
+ * // Met bijschrift
+ * <Image src="/foto.jpg" alt="Beschrijving" width={800} height={600} caption="Bijschrift" />
+ *
+ * // Decoratief — alt="" activeert automatisch aria-hidden="true" op de figure
+ * <Image src="/decoratief.jpg" alt="" width={800} height={600} />
+ * ```
+ */
+export const Image = React.forwardRef(({ className, src, alt, width, height, ratio, objectFit = 'cover', priority = false, caption, srcSet, sizes, ...props }, ref) => {
+    const isDecorative = alt === '';
+    const figureClasses = classNames('dsn-image', ratio && ratioClassMap[ratio], objectFit === 'contain' && 'dsn-image--object-fit-contain', className);
+    const imgProps = {
+        className: 'dsn-image__img',
+        src,
+        alt,
+        width,
+        height,
+        decoding: 'async',
+        ...(priority
+            ? { loading: 'eager', fetchpriority: 'high' }
+            : { loading: 'lazy' }),
+        ...(srcSet && { srcSet }),
+        ...(sizes && { sizes }),
+    };
+    return (_jsxs("figure", { ref: ref, className: figureClasses, ...(isDecorative && { 'aria-hidden': true }), ...props, children: [_jsx("img", { ...imgProps }), caption && (_jsx("figcaption", { className: "dsn-image__caption", children: caption }))] }));
+});
+Image.displayName = 'Image';
+//# sourceMappingURL=Image.js.map

package/dist/Image/Image.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","sourceRoot":"","sources":["../../src/Image/Image.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,aAAa,CAAC;AA4CrB,MAAM,aAAa,GAAqD;IACtE,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,sBAAsB;IAC7B,KAAK,EAAE,sBAAsB;CAC9B,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,EACT,GAAG,EACH,GAAG,EACH,KAAK,EACL,MAAM,EACN,KAAK,EACL,SAAS,GAAG,OAAO,EACnB,QAAQ,GAAG,KAAK,EAChB,OAAO,EACP,MAAM,EACN,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,YAAY,GAAG,GAAG,KAAK,EAAE,CAAC;IAEhC,MAAM,aAAa,GAAG,UAAU,CAC9B,WAAW,EACX,KAAK,IAAI,aAAa,CAAC,KAAK,CAAC,EAC7B,SAAS,KAAK,SAAS,IAAI,+BAA+B,EAC1D,SAAS,CACV,CAAC;IAEF,MAAM,QAAQ,GAAa;QACzB,SAAS,EAAE,gBAAgB;QAC3B,GAAG;QACH,GAAG;QACH,KAAK;QACL,MAAM;QACN,QAAQ,EAAE,OAAO;QACjB,GAAG,CAAC,QAAQ;YACV,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE;YAC7C,CAAC,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,CAAC;QACxB,GAAG,CAAC,MAAM,IAAI,EAAE,MAAM,EAAE,CAAC;QACzB,GAAG,CAAC,KAAK,IAAI,EAAE,KAAK,EAAE,CAAC;KACxB,CAAC;IAEF,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,KACpB,CAAC,YAAY,IAAI,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC,KACzC,KAAK,aAET,iBAAS,QAAQ,GAAI,EACpB,OAAO,IAAI,CACV,qBAAY,SAAS,EAAC,oBAAoB,YAAE,OAAO,GAAc,CAClE,IACM,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Image/index.d.ts

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

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

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

package/dist/Image/index.js

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

package/dist/Image/index.js.map

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

package/dist/Link/Link.css

@@ -0,0 +1,113 @@
+/**
+ * Link Component Styles for React
+ * Re-exports the base Link styles from components-html
+ */
+
+/**
+ * Link Component
+ * Uses component tokens for consistent styling
+ */
+
+.dsn-link {
+  /* Layout */
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  gap: var(--dsn-link-gap);
+  position: relative; /* Ankerpunt voor DotBadge */
+
+  /* Typography */
+  color: var(--dsn-link-color);
+  text-decoration-line: var(--dsn-link-text-decoration-line);
+  text-decoration-color: var(--dsn-link-text-decoration-color);
+  text-decoration-thickness: var(--dsn-link-text-decoration-thickness);
+  text-underline-offset: var(--dsn-link-text-underline-offset);
+  font: inherit;
+
+  /* Interaction */
+  cursor: pointer;
+  transition:
+    color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    text-decoration-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+/* Icon sizing */
+.dsn-link > .dsn-icon {
+  width: var(--dsn-link-icon-size);
+  height: var(--dsn-link-icon-size);
+  flex-shrink: 0;
+}
+
+/* Size Variants */
+.dsn-link--size-small {
+  font-size: var(--dsn-link-size-small-font-size);
+  gap: var(--dsn-link-size-small-gap);
+}
+
+.dsn-link--size-default {
+  font-size: var(--dsn-link-size-default-font-size);
+  gap: var(--dsn-link-size-default-gap);
+}
+
+.dsn-link--size-large {
+  font-size: var(--dsn-link-size-large-font-size);
+  gap: var(--dsn-link-size-large-gap);
+}
+
+/* Icon sizing per link size */
+.dsn-link--size-small > .dsn-icon {
+  width: var(--dsn-link-size-small-icon-size);
+  height: var(--dsn-link-size-small-icon-size);
+}
+
+.dsn-link--size-default > .dsn-icon {
+  width: var(--dsn-link-size-default-icon-size);
+  height: var(--dsn-link-size-default-icon-size);
+}
+
+.dsn-link--size-large > .dsn-icon {
+  width: var(--dsn-link-size-large-icon-size);
+  height: var(--dsn-link-size-large-icon-size);
+}
+
+/* Hover */
+.dsn-link:hover:not([aria-disabled='true']) {
+  color: var(--dsn-link-hover-color);
+  text-decoration-line: var(--dsn-link-hover-text-decoration-line);
+}
+
+/* Active */
+.dsn-link:active:not([aria-disabled='true']) {
+  color: var(--dsn-link-active-color);
+}
+
+/* Focus */
+.dsn-link:focus-visible {
+  background-color: var(--dsn-focus-background-color);
+  color: var(--dsn-focus-color);
+  text-decoration: none;
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+  box-shadow: 0 0 0
+    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
+    var(--dsn-focus-inverse-outline-color);
+  box-decoration-break: clone;
+}
+
+/* Current page */
+.dsn-link[aria-current='page'] {
+  cursor: default;
+  text-decoration-line: none;
+}
+
+/* Disabled */
+.dsn-link[aria-disabled='true'] {
+  color: var(--dsn-link-disabled-color);
+  text-decoration-line: none;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+

package/dist/Link/Link.d.ts

@@ -0,0 +1,80 @@
+import React from 'react';
+import './Link.css';
+export type LinkSize = 'small' | 'default' | 'large';
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Whether the link is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the link represents the current page
+     * @default false
+     */
+    current?: boolean;
+    /**
+     * Link size — controls font-size, gap, and icon size.
+     * When omitted, the link inherits the surrounding font (ideal for inline usage in paragraphs).
+     */
+    size?: LinkSize;
+    /**
+     * Icon element rendered before the link text
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Icon element rendered after the link text
+     */
+    iconEnd?: React.ReactNode;
+    /**
+     * Whether the link opens in a new tab.
+     * Automatically adds target="_blank", rel="noopener noreferrer",
+     * and an inline "(opent nieuw tabblad)" hint.
+     * @default false
+     */
+    external?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Link content
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Link component with icon support and size variants
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (inherits font from parent)
+ * <Link href="/about">About us</Link>
+ *
+ * // With explicit size
+ * <Link href="/about" size="small">Small link</Link>
+ * <Link href="/about" size="default">Default link</Link>
+ * <Link href="/about" size="large">Large link</Link>
+ *
+ * // With icon before text
+ * <Link href="/download" iconStart={<Icon name="download" />}>
+ *   Download
+ * </Link>
+ *
+ * // With icon after text
+ * <Link href="/next" iconEnd={<Icon name="arrow-right" />}>
+ *   Next page
+ * </Link>
+ *
+ * // External link (opens in new tab with visible hint)
+ * <Link href="https://example.com" external>
+ *   External site
+ * </Link>
+ *
+ * // Current page
+ * <Link href="/dashboard" current>Dashboard</Link>
+ *
+ * // Disabled
+ * <Link disabled>Unavailable</Link>
+ * ```
+ */
+export declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=Link.d.ts.map

package/dist/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI,qFA6DhB,CAAC"}