@dsn-starter-kit/components-react 1.0.0

package/dist/DotBadge/DotBadge.css

@@ -0,0 +1,98 @@
+/**
+ * DotBadge Component
+ * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
+ * zonder label of getal de aandacht te trekken bij een statuswijziging.
+ *
+ * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
+ * Parent-wrapper heeft position: relative nodig.
+ *
+ * Usage:
+ * <!-- Basis dot (negative, meest gebruikt) -->
+ * <span class="dsn-dot-badge dsn-dot-badge--negative" aria-hidden="true"></span>
+ *
+ * <!-- Met pulse-effect voor urgente statuswijzigingen -->
+ * <span class="dsn-dot-badge dsn-dot-badge--negative dsn-dot-badge--pulse" aria-hidden="true"></span>
+ *
+ * <!-- Positive variant -->
+ * <span class="dsn-dot-badge dsn-dot-badge--positive" aria-hidden="true"></span>
+ *
+ * <!-- Info variant -->
+ * <span class="dsn-dot-badge dsn-dot-badge--info" aria-hidden="true"></span>
+ *
+ * <!-- Warning variant -->
+ * <span class="dsn-dot-badge dsn-dot-badge--warning" aria-hidden="true"></span>
+ *
+ * <!-- Neutral variant -->
+ * <span class="dsn-dot-badge dsn-dot-badge--neutral" aria-hidden="true"></span>
+ */
+
+.dsn-dot-badge {
+  display: block;
+  position: absolute;
+  inline-size: var(--dsn-dot-badge-size);
+  block-size: var(--dsn-dot-badge-size);
+  border-radius: 50%;
+  background-color: var(--dsn-dot-badge-color);
+  inset-block-start: var(--dsn-dot-badge-inset-block-start);
+  inset-inline-end: var(--dsn-dot-badge-inset-inline-end);
+}
+
+/* Variant kleuren — inverse-bg-default: de gevulde dot is een achtergrond-element,
+   geen tekst. inverse-bg-default is de vivid kleur die zowel op lichte als donkere
+   achtergronden leesbaar is als dot. In een inverse context (zie page-header.css)
+   wordt overgeschakeld naar bg-default (lichte pastelkleur) voor hoog contrast op
+   donkere achtergronden. */
+.dsn-dot-badge--negative {
+  --dsn-dot-badge-color: var(--dsn-color-negative-inverse-bg-default);
+}
+
+.dsn-dot-badge--positive {
+  --dsn-dot-badge-color: var(--dsn-color-positive-inverse-bg-default);
+}
+
+.dsn-dot-badge--warning {
+  --dsn-dot-badge-color: var(--dsn-color-warning-inverse-bg-default);
+}
+
+.dsn-dot-badge--info {
+  --dsn-dot-badge-color: var(--dsn-color-info-inverse-bg-default);
+}
+
+.dsn-dot-badge--neutral {
+  --dsn-dot-badge-color: var(--dsn-color-neutral-inverse-bg-default);
+}
+
+/* Pulse-effect via ::before pseudo-element — geen extra DOM-nodes nodig */
+.dsn-dot-badge--pulse::before {
+  content: '';
+  display: block;
+  position: absolute;
+  inset: 0;
+  border-radius: 50%;
+  background-color: var(--dsn-dot-badge-color);
+  animation: dsn-dot-badge-pulse var(--dsn-dot-badge-pulse-duration)
+    var(--dsn-dot-badge-pulse-easing) infinite;
+}
+
+@keyframes dsn-dot-badge-pulse {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  70% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+/* Animatie respecteert prefers-reduced-motion — dot blijft zichtbaar */
+@media (prefers-reduced-motion: reduce) {
+  .dsn-dot-badge--pulse::before {
+    animation: none;
+  }
+}
+

package/dist/DotBadge/DotBadge.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import './DotBadge.css';
+export type DotBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
+export interface DotBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * Signaalkleur van de stip
+     * @default 'negative'
+     */
+    variant?: DotBadgeVariant;
+    /**
+     * Voegt een pulserend ring-effect toe om extra aandacht te trekken
+     * @default false
+     */
+    pulse?: boolean;
+}
+/**
+ * DotBadge component
+ * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
+ * zonder label of getal de aandacht te trekken bij een statuswijziging.
+ *
+ * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
+ * Parent-wrapper heeft position: relative nodig.
+ *
+ * @example
+ * ```tsx
+ * // Basis gebruik — negatieve dot bij een icon-only Button
+ * <div style={{ position: 'relative', display: 'inline-flex' }}>
+ *   <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
+ *     Inbox
+ *     <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
+ *   </Button>
+ *   <DotBadge variant="negative" />
+ * </div>
+ *
+ * // Met pulse-effect voor urgente statuswijzigingen
+ * <DotBadge variant="negative" pulse />
+ * ```
+ */
+export declare const DotBadge: React.ForwardRefExoticComponent<DotBadgeProps & React.RefAttributes<HTMLSpanElement>>;
+//# sourceMappingURL=DotBadge.d.ts.map

package/dist/DotBadge/DotBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotBadge.d.ts","sourceRoot":"","sources":["../../src/DotBadge/DotBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC1E;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,QAAQ,uFAWpB,CAAC"}

package/dist/DotBadge/DotBadge.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './DotBadge.css';
+/**
+ * DotBadge component
+ * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
+ * zonder label of getal de aandacht te trekken bij een statuswijziging.
+ *
+ * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
+ * Parent-wrapper heeft position: relative nodig.
+ *
+ * @example
+ * ```tsx
+ * // Basis gebruik — negatieve dot bij een icon-only Button
+ * <div style={{ position: 'relative', display: 'inline-flex' }}>
+ *   <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
+ *     Inbox
+ *     <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
+ *   </Button>
+ *   <DotBadge variant="negative" />
+ * </div>
+ *
+ * // Met pulse-effect voor urgente statuswijzigingen
+ * <DotBadge variant="negative" pulse />
+ * ```
+ */
+export const DotBadge = React.forwardRef(({ className, variant = 'negative', pulse = false, ...props }, ref) => {
+    const classes = classNames('dsn-dot-badge', `dsn-dot-badge--${variant}`, pulse && 'dsn-dot-badge--pulse', className);
+    return _jsx("span", { ref: ref, className: classes, "aria-hidden": "true", ...props });
+});
+DotBadge.displayName = 'DotBadge';
+//# sourceMappingURL=DotBadge.js.map

package/dist/DotBadge/DotBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DotBadge.js","sourceRoot":"","sources":["../../src/DotBadge/DotBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAuBxB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,UAAU,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,kBAAkB,OAAO,EAAE,EAC3B,KAAK,IAAI,sBAAsB,EAC/B,SAAS,CACV,CAAC;IAEF,OAAO,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,iBAAc,MAAM,KAAK,KAAK,GAAI,CAAC;AAC9E,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/DotBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DotBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DotBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC"}

package/dist/DotBadge/index.js

@@ -0,0 +1,2 @@
+export * from './DotBadge';
+//# sourceMappingURL=index.js.map

package/dist/DotBadge/index.js.map

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

package/dist/Drawer/Drawer.css

@@ -0,0 +1,258 @@
+/* ===== Drawer ===== */
+
+/*
+ * dsn-drawer — Zijpaneel dat vanuit links of rechts de viewport inschuift
+ *
+ * Gebaseerd op het native <dialog> element.
+ * Modaal (modal prop): openen via .showModal() — natieve focus-trap + ::backdrop.
+ * Non-modaal:          openen via .show()      — achtergrond blijft interactief.
+ *
+ * HTML-structuur:
+ *
+ * <dialog class="dsn-drawer dsn-drawer--side-right" aria-labelledby="drawer-title">
+ *   <div class="dsn-drawer__header">
+ *     <h2 class="dsn-drawer-heading" id="drawer-title">Titel</h2>
+ *     <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only">
+ *       <svg class="dsn-icon" aria-hidden="true"><!-- x --></svg>
+ *       <span class="dsn-button__label">Sluiten</span>
+ *     </button>
+ *   </div>
+ *   <div class="dsn-drawer__body">
+ *     <!-- inhoud -->
+ *   </div>
+ *   <div class="dsn-drawer__footer">
+ *     <div class="dsn-action-group">
+ *       <!-- knoppen -->
+ *     </div>
+ *   </div>
+ * </dialog>
+ */
+
+.dsn-drawer {
+  /* Reset native <dialog> styling */
+  border: none;
+  box-shadow: var(--dsn-drawer-box-shadow);
+  background: var(--dsn-drawer-background-color);
+  padding: 0;
+
+  /* Grootte */
+  inline-size: min(
+    var(--dsn-drawer-max-width),
+    calc(100svw - var(--dsn-drawer-min-gap))
+  );
+  block-size: 100svh;
+  max-block-size: 100svh;
+
+  /* Positionering — override UA's auto-centrering voor zowel modal als non-modal */
+  position: fixed;
+  inset-block: 0;
+  margin-block: 0;
+
+  /* Altijd flex-direction column, ook tijdens sluitanimatie */
+  flex-direction: column;
+
+  /* Animatietransitie (ook voor sluitanimatie) */
+  opacity: 1;
+  transform: translateX(0);
+  transition:
+    opacity var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    transform var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    display var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete,
+    overlay var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete;
+}
+
+/*
+ * Flexbox layout alleen bij open staat.
+ * Gebruik [open] zodat de UA-stylesheet's display:none van kracht blijft
+ * wanneer de drawer gesloten is — anders overschrijft display:flex de UA.
+ */
+.dsn-drawer[open] {
+  display: flex;
+}
+
+/* Animatie uitschakelen bij prefers-reduced-motion */
+@media (prefers-reduced-motion: reduce) {
+  .dsn-drawer {
+    transition: none;
+  }
+}
+
+/* ===== Side: Right (standaard) ===== */
+
+.dsn-drawer--side-right {
+  right: 0;
+  left: auto;
+
+  /* Alleen de rand aan de kant van de pagina (links) */
+  border-inline-start: var(--dsn-drawer-border-width) solid
+    var(--dsn-drawer-border-color);
+}
+
+/* Openingsanimatie rechts: start buiten beeld rechts */
+@starting-style {
+  .dsn-drawer--side-right[open] {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+/* Native backdrop (alleen bij .showModal()) */
+.dsn-drawer--side-right::backdrop {
+  background: var(--dsn-backdrop-background, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--dsn-backdrop-blur, blur(2px));
+  opacity: 1;
+  transition:
+    opacity var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    display var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete,
+    overlay var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete;
+}
+
+@starting-style {
+  .dsn-drawer--side-right[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsn-drawer--side-right::backdrop {
+    transition: none;
+  }
+}
+
+/* ===== Side: Left ===== */
+
+.dsn-drawer--side-left {
+  left: 0;
+  right: auto;
+
+  /* Alleen de rand aan de kant van de pagina (rechts) */
+  border-inline-end: var(--dsn-drawer-border-width) solid
+    var(--dsn-drawer-border-color);
+}
+
+/* Openingsanimatie links: start buiten beeld links */
+@starting-style {
+  .dsn-drawer--side-left[open] {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+/* Native backdrop (alleen bij .showModal()) */
+.dsn-drawer--side-left::backdrop {
+  background: var(--dsn-backdrop-background, rgba(0, 0, 0, 0.5));
+  backdrop-filter: var(--dsn-backdrop-blur, blur(2px));
+  opacity: 1;
+  transition:
+    opacity var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    display var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete,
+    overlay var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default) allow-discrete;
+}
+
+@starting-style {
+  .dsn-drawer--side-left[open]::backdrop {
+    opacity: 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsn-drawer--side-left::backdrop {
+    transition: none;
+  }
+}
+
+/* ===== Header ===== */
+
+.dsn-drawer__header {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-space-inline-xl);
+  flex-shrink: 0;
+
+  padding-block-start: var(--dsn-drawer-header-padding-block-start);
+  padding-block-end: var(--dsn-drawer-header-padding-block-end);
+  padding-inline: var(--dsn-drawer-header-padding-inline);
+
+  /* Scheidingslijn onder de header */
+  border-block-end: var(--dsn-drawer-border-width) solid
+    var(--dsn-drawer-border-color);
+}
+
+/* ===== Heading ===== */
+
+.dsn-drawer-heading {
+  flex: 1;
+  margin: 0;
+
+  font-family: var(--dsn-drawer-heading-font-family);
+  font-weight: var(--dsn-drawer-heading-font-weight);
+  font-size: var(--dsn-drawer-heading-font-size);
+  line-height: var(--dsn-drawer-heading-line-height);
+  color: var(--dsn-drawer-heading-color);
+}
+
+/* ===== Body met scroll-affordance ===== */
+/*
+ * Scroll-affordance schaduw (Lea Verou techniek — verticale variant):
+ * - Dekkende overlagen (background-attachment: local) scrollen mee met de content
+ *   en verbergen de schaduwen wanneer je aan het begin of einde bent.
+ * - Schaduw-overlagen (background-attachment: scroll) blijven gefixeerd.
+ * - Resultaat: schaduw is zichtbaar zodra er content is om naartoe te scrollen.
+ *
+ * ⚠️ Vereist dat de achtergrondkleur overeenkomt met de drawer-achtergrond.
+ */
+
+.dsn-drawer__body {
+  --_bg: var(--dsn-drawer-background-color);
+  --_shadow: var(--dsn-color-shadow-scroll, rgba(0, 0, 0, 0.12));
+
+  flex: 1;
+  overflow-y: auto;
+
+  padding-block: var(--dsn-drawer-body-padding-block);
+  padding-inline: var(--dsn-drawer-body-padding-inline);
+
+  background-color: var(--_bg);
+  background-image:
+    /* Top-cover (local): verbergt de bovenschaduw als je helemaal boven bent */
+    linear-gradient(to bottom, var(--_bg) 0%, transparent 100%),
+    /* Onder-cover (local): verbergt de onderschaduw als je helemaal onder bent */
+    linear-gradient(to top, var(--_bg) 0%, transparent 100%),
+    /* Bovenschaduw (scroll): altijd aanwezig */
+    linear-gradient(to bottom, var(--_shadow) 0%, transparent 100%),
+    /* Onderschaduw (scroll): altijd aanwezig */
+    linear-gradient(to top, var(--_shadow) 0%, transparent 100%);
+  background-repeat: no-repeat;
+  background-size:
+    100% 4rem,
+    100% 4rem,
+    100% 2rem,
+    100% 2rem;
+  background-position: top, bottom, top, bottom;
+  background-attachment: local, local, scroll, scroll;
+}
+
+/* ===== Footer ===== */
+
+.dsn-drawer__footer {
+  flex-shrink: 0;
+
+  padding-block-start: var(--dsn-drawer-footer-padding-block-start);
+  padding-block-end: var(--dsn-drawer-footer-padding-block-end);
+  padding-inline: var(--dsn-drawer-footer-padding-inline);
+
+  /* Scheidingslijn boven de footer */
+  border-block-start: var(--dsn-drawer-border-width) solid
+    var(--dsn-drawer-border-color);
+}
+

package/dist/Drawer/Drawer.d.ts

@@ -0,0 +1,109 @@
+import React from 'react';
+import './Drawer.css';
+export interface DrawerProps extends Omit<React.HTMLAttributes<HTMLDialogElement>, 'children'> {
+    /**
+     * Bepaalt of het zijpaneel getoond wordt.
+     */
+    isOpen: boolean;
+    /**
+     * Callback die wordt aangeroepen wanneer het zijpaneel sluit
+     * (sluitknop, Escape-toets).
+     */
+    onClose?: () => void;
+    /**
+     * Modaal of non-modaal gedrag.
+     * - `true` (standaard): opent via `.showModal()` — achtergrond geblokkeerd,
+     *   natieve focus-trap, Escape sluit via `cancel`-event.
+     * - `false`: opent via `.show()` — achtergrond blijft interactief,
+     *   Escape sluit via `keydown`-listener.
+     * @default true
+     */
+    modal?: boolean;
+    /**
+     * De kant van de viewport vanwaar het zijpaneel inschuift.
+     * @default "right"
+     */
+    side?: 'right' | 'left';
+    /**
+     * De subcomponenten van het zijpaneel:
+     * `DrawerHeader`, `DrawerBody`, `DrawerFooter`
+     */
+    children?: React.ReactNode;
+}
+/**
+ * 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 declare const Drawer: React.ForwardRefExoticComponent<DrawerProps & React.RefAttributes<HTMLDialogElement>>;
+export interface DrawerHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Inhoud van de header — doorgaans een `DrawerHeading`
+     */
+    children?: React.ReactNode;
+}
+/**
+ * DrawerHeader
+ * De headerstrook van het zijpaneel met heading en sluitknop.
+ */
+export declare const DrawerHeader: React.ForwardRefExoticComponent<DrawerHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Semantisch heading-niveau. Kies op basis van documenthiërarchie, niet visuele grootte.
+     * @default 2
+     */
+    level?: 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * De zichtbare heading-tekst
+     */
+    children?: React.ReactNode;
+}
+/**
+ * DrawerHeading
+ * De heading van het zijpaneel. ID wordt automatisch gegenereerd voor aria-labelledby.
+ */
+export declare const DrawerHeading: React.ForwardRefExoticComponent<DrawerHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface DrawerBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * De hoofdinhoud van het zijpaneel
+     */
+    children?: React.ReactNode;
+}
+/**
+ * DrawerBody
+ * De scrollbare inhoudssectie van het zijpaneel met scroll-affordance schaduw.
+ */
+export declare const DrawerBody: React.ForwardRefExoticComponent<DrawerBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface DrawerFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * De acties van het zijpaneel — doorgaans een `ActionGroup` met knoppen
+     */
+    children?: React.ReactNode;
+}
+/**
+ * DrawerFooter
+ * De voettekst van het zijpaneel met actieknoppen.
+ */
+export declare const DrawerFooter: React.ForwardRefExoticComponent<DrawerFooterProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Drawer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../src/Drawer/Drawer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,cAAc,CAAC;AAmBtB,MAAM,WAAW,WAAY,SAAQ,IAAI,CACvC,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC,EACvC,UAAU,CACX;IACC;;OAEG;IACH,MAAM,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IAErB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAEhB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,uFA2ElB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,0FAuBxB,CAAC;AAQF,MAAM,WAAW,kBAAmB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAClF;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAE9B;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,+FAiBxB,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,wFAYtB,CAAC;AAQF,MAAM,WAAW,iBAAkB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;GAGG;AACH,eAAO,MAAM,YAAY,0FAYxB,CAAC"}

package/dist/Drawer/Drawer.js

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