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

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@dsn-starter-kit/components-react",
-  "version": "2.0.0",
+  "version": "3.0.0",
   "description": "React components for the design system",
-  "main": "dist/index.js",
-  "module": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.mts",
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "default": "./dist/index.js"
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
     },
     "./css": "./dist/index.css",
-    "./icon-registry.generated": {
-      "types": "./dist/Icon/icon-registry.generated.d.ts",
-      "import": "./dist/Icon/icon-registry.generated.js",
-      "default": "./dist/Icon/icon-registry.generated.js"
-    }
+    "./package.json": "./package.json"
   },
   "files": [
     "dist"
@@ -32,8 +34,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@dsn-starter-kit/core": "2.0.0",
-    "@dsn-starter-kit/design-tokens": "2.0.0"
+    "@dsn-starter-kit/core": "3.0.0",
+    "@dsn-starter-kit/design-tokens": "3.0.0"
   },
   "peerDependencies": {
     "react": ">=18.0.0",
@@ -45,13 +47,14 @@
     "@types/react-dom": "^18.2.18",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.3.3"
+    "typescript": "^5.3.3",
+    "tsdown": "^0.22.14"
   },
   "scripts": {
     "generate:icons": "node scripts/generate-icons.js",
-    "build": "node scripts/generate-icons.js && node scripts/build-css.js && tsc",
+    "build": "node scripts/generate-icons.js && tsdown",
     "clean": "rm -rf dist",
     "type-check": "tsc --noEmit",
-    "watch": "tsc --watch"
+    "watch": "tsdown --watch"
   }
 }

package/dist/ActionGroup/ActionGroup.css

@@ -1,95 +0,0 @@
-/**
- * ActionGroup Component
- * Groups related actions (Buttons and Links) and manages their layout.
- * Renders as a <ul> with each action in a <li>, with an aria-label
- * describing the group — screenreaders announce the item count and the
- * group's purpose (see issue #295).
- *
- * Usage:
- * <!-- Horizontal (default) — wraps automatically when viewport is too narrow -->
- * <ul class="dsn-action-group" aria-label="Acties">
- *   <li class="dsn-action-group__item">
- *     <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *       <span class="dsn-button__label">Opslaan</span>
- *     </button>
- *   </li>
- *   <li class="dsn-action-group__item">
- *     <button class="dsn-button dsn-button--subtle dsn-button--size-default">
- *       <span class="dsn-button__label">Annuleren</span>
- *     </button>
- *   </li>
- * </ul>
- *
- * <!-- Horizontal with Link as soft exit -->
- * <ul class="dsn-action-group" aria-label="Acties">
- *   <li class="dsn-action-group__item">
- *     <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *       <span class="dsn-button__label">Volgende stap</span>
- *     </button>
- *   </li>
- *   <li class="dsn-action-group__item">
- *     <a class="dsn-link" href="/">Terug naar overzicht</a>
- *   </li>
- * </ul>
- *
- * <!-- Vertical -->
- * <ul class="dsn-action-group dsn-action-group--vertical" aria-label="Acties">
- *   <li class="dsn-action-group__item">
- *     <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *       <span class="dsn-button__label">Primaire actie</span>
- *     </button>
- *   </li>
- *   <li class="dsn-action-group__item">
- *     <button class="dsn-button dsn-button--subtle dsn-button--size-default">
- *       <span class="dsn-button__label">Secundaire actie</span>
- *     </button>
- *   </li>
- * </ul>
- *
- * <!-- Aangepast aria-label -->
- * <ul class="dsn-action-group" aria-label="Formulierknoppen">
- *   ...
- * </ul>
- */
-
-/* ===========================
-   Base layout — horizontal (default)
-   =========================== */
-.dsn-action-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  column-gap: var(--dsn-action-group-column-gap);
-  row-gap: var(--dsn-action-group-row-gap);
-}
-
-/* ===========================
-   Item — wraps each Button/Link
-   =========================== */
-.dsn-action-group__item {
-  display: flex;
-  align-items: center;
-}
-
-/* Link en LinkButton hebben align-self: flex-start om uitrekken te voorkomen
-   in verticale contexten — align-self op het element zelf overschrijft de
-   align-items van het omringende dsn-action-group__item, dus resetten we dit
-   hier zodat ze verticaal centreren met de Button ernaast. */
-.dsn-action-group__item > .dsn-link,
-.dsn-action-group__item > .dsn-link-button {
-  align-self: center;
-}
-
-/* ===========================
-   Vertical modifier
-   =========================== */
-.dsn-action-group--vertical {
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-items: flex-start;
-}
-

package/dist/ActionGroup/ActionGroup.d.ts

@@ -1,49 +0,0 @@
-import React from 'react';
-import './ActionGroup.css';
-export interface ActionGroupProps extends React.HTMLAttributes<HTMLUListElement> {
-    /**
-     * Richting van de groep — horizontale rij met wrapping of verticale kolom
-     * @default 'horizontal'
-     */
-    direction?: 'horizontal' | 'vertical';
-    /**
-     * `Button`- en/of `Link`-componenten
-     */
-    children?: React.ReactNode;
-}
-/**
- * ActionGroup component
- * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
- * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
- * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
- * aantal acties en de groepsnaam aankondigen (zie issue #295).
- *
- * @example
- * ```tsx
- * // Horizontaal (default)
- * <ActionGroup>
- *   <Button variant="strong">Opslaan</Button>
- *   <Button variant="subtle">Annuleren</Button>
- * </ActionGroup>
- *
- * // Horizontaal met Link
- * <ActionGroup>
- *   <Button variant="strong">Volgende stap</Button>
- *   <Link href="/">Terug naar overzicht</Link>
- * </ActionGroup>
- *
- * // Verticaal
- * <ActionGroup direction="vertical">
- *   <Button variant="strong">Primaire actie</Button>
- *   <Button variant="subtle">Secundaire actie</Button>
- * </ActionGroup>
- *
- * // Aangepast aria-label
- * <ActionGroup aria-label="Formulierknoppen">
- *   <Button variant="strong" type="submit">Verstuur</Button>
- *   <Button variant="subtle">Annuleren</Button>
- * </ActionGroup>
- * ```
- */
-export declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLUListElement>>;
-//# sourceMappingURL=ActionGroup.d.ts.map

package/dist/ActionGroup/ActionGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionGroup.d.ts","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAeD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,eAAO,MAAM,WAAW,2FA2BvB,CAAC"}

package/dist/ActionGroup/ActionGroup.js

@@ -1,54 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './ActionGroup.css';
-/**
- * Flattens top-level React.Fragment children (e.g. `<>...</>`) so each
- * action ends up as its own `<li>`, regardless of whether the caller wraps
- * multiple children in a Fragment or passes them as direct JSX children.
- */
-function flattenActions(children) {
-    return React.Children.toArray(children).flatMap((child) => React.isValidElement(child) && child.type === React.Fragment
-        ? flattenActions(child.props.children)
-        : [child]);
-}
-/**
- * ActionGroup component
- * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
- * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
- * Rendert als `<ul>` met elke actie in een `<li>`, zodat screenreaders het
- * aantal acties en de groepsnaam aankondigen (zie issue #295).
- *
- * @example
- * ```tsx
- * // Horizontaal (default)
- * <ActionGroup>
- *   <Button variant="strong">Opslaan</Button>
- *   <Button variant="subtle">Annuleren</Button>
- * </ActionGroup>
- *
- * // Horizontaal met Link
- * <ActionGroup>
- *   <Button variant="strong">Volgende stap</Button>
- *   <Link href="/">Terug naar overzicht</Link>
- * </ActionGroup>
- *
- * // Verticaal
- * <ActionGroup direction="vertical">
- *   <Button variant="strong">Primaire actie</Button>
- *   <Button variant="subtle">Secundaire actie</Button>
- * </ActionGroup>
- *
- * // Aangepast aria-label
- * <ActionGroup aria-label="Formulierknoppen">
- *   <Button variant="strong" type="submit">Verstuur</Button>
- *   <Button variant="subtle">Annuleren</Button>
- * </ActionGroup>
- * ```
- */
-export const ActionGroup = React.forwardRef(({ className, direction = 'horizontal', 'aria-label': ariaLabel = 'Acties', children, ...props }, ref) => {
-    const classes = classNames('dsn-action-group', direction === 'vertical' && 'dsn-action-group--vertical', className);
-    return (_jsx("ul", { ref: ref, className: classes, "aria-label": ariaLabel, ...props, children: flattenActions(children).map((child, index) => (_jsx("li", { className: "dsn-action-group__item", children: child }, index))) }));
-});
-ActionGroup.displayName = 'ActionGroup';
-//# sourceMappingURL=ActionGroup.js.map

package/dist/ActionGroup/ActionGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ActionGroup.js","sourceRoot":"","sources":["../../src/ActionGroup/ActionGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAe3B;;;;GAIG;AACH,SAAS,cAAc,CAAC,QAAyB;IAC/C,OAAO,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE,CACxD,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,KAAK,CAAC,QAAQ;QAC1D,CAAC,CAAC,cAAc,CAAE,KAAK,CAAC,KAAwC,CAAC,QAAQ,CAAC;QAC1E,CAAC,CAAC,CAAC,KAAK,CAAC,CACZ,CAAC;AACJ,CAAC;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAiCG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CACE,EACE,SAAS,EACT,SAAS,GAAG,YAAY,EACxB,YAAY,EAAE,SAAS,GAAG,QAAQ,EAClC,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,SAAS,KAAK,UAAU,IAAI,4BAA4B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,gBAAc,SAAS,KAAM,KAAK,YAC/D,cAAc,CAAC,QAAQ,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CAC9C,aAAI,SAAS,EAAC,wBAAwB,YACnC,KAAK,IADoC,KAAK,CAE5C,CACN,CAAC,GACC,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/ActionGroup/index.d.ts

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

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

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

package/dist/ActionGroup/index.js

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

package/dist/ActionGroup/index.js.map

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

package/dist/Alert/Alert.css

@@ -1,159 +0,0 @@
-/**
- * Alert Component Styles for React
- * Re-exports the base Alert styles from components-html
- */
-
-/**
- * Alert Component
- * Important message that informs the user about the current activity or state.
- *
- * The icon is decorative (aria-hidden); a visually hidden variant label at the
- * start of the heading announces the variant to screen reader users. Real text
- * (not aria-label on the svg) so it gets translated by translation tools,
- * works in braille and stays available when the icon is omitted.
- * Default labels: "Informatie: " / "Succes: " / "Foutmelding: " / "Let op: ".
- *
- * Usage:
- * <!-- Info variant (default), with icon -->
- * <div class="dsn-alert" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- info-circle --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
- *   <div class="dsn-alert__content">
- *     <p>Body text or any content.</p>
- *   </div>
- * </div>
- *
- * <!-- Positive variant -->
- * <div class="dsn-alert dsn-alert--positive" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- circle-check --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Succes: </span>Gelukt</h2>
- *   <div class="dsn-alert__content">
- *     <p>Uw aanvraag is succesvol ingediend.</p>
- *   </div>
- * </div>
- *
- * <!-- Negative variant -->
- * <div class="dsn-alert dsn-alert--negative" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- exclamation-circle --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Foutmelding: </span>Er is een fout opgetreden</h2>
- *   <div class="dsn-alert__content">
- *     <p>Controleer uw gegevens en probeer het opnieuw.</p>
- *   </div>
- * </div>
- *
- * <!-- Warning variant -->
- * <div class="dsn-alert dsn-alert--warning" role="alert">
- *   <span class="dsn-alert__icon" aria-hidden="true">
- *     <svg class="dsn-icon dsn-icon--xl" aria-hidden="true"><!-- alert-triangle --></svg>
- *   </span>
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Let op: </span>Uw sessie verloopt binnenkort</h2>
- *   <div class="dsn-alert__content">
- *     <p>Sla uw werk op om gegevensverlies te voorkomen.</p>
- *   </div>
- * </div>
- *
- * <!-- Without icon: keep the visually hidden variant label -->
- * <div class="dsn-alert dsn-alert--no-icon" role="alert">
- *   <h2 class="dsn-heading dsn-heading--heading-3 dsn-alert__heading"><span class="dsn-visually-hidden">Informatie: </span>Heading</h2>
- *   <div class="dsn-alert__content">
- *     <p>Body text without an icon.</p>
- *   </div>
- * </div>
- */
-
-/* ===========================
-   Local color tokens (info = default)
-   =========================== */
-.dsn-alert {
-  --dsn-alert-icon-color: var(--dsn-alert-info-icon-color);
-  --dsn-alert-color: var(--dsn-alert-info-color);
-  --dsn-alert-background-color: var(--dsn-alert-info-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-info-border-color);
-}
-
-.dsn-alert--positive {
-  --dsn-alert-icon-color: var(--dsn-alert-positive-icon-color);
-  --dsn-alert-color: var(--dsn-alert-positive-color);
-  --dsn-alert-background-color: var(--dsn-alert-positive-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-positive-border-color);
-}
-
-.dsn-alert--negative {
-  --dsn-alert-icon-color: var(--dsn-alert-negative-icon-color);
-  --dsn-alert-color: var(--dsn-alert-negative-color);
-  --dsn-alert-background-color: var(--dsn-alert-negative-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-negative-border-color);
-}
-
-.dsn-alert--warning {
-  --dsn-alert-icon-color: var(--dsn-alert-warning-icon-color);
-  --dsn-alert-color: var(--dsn-alert-warning-color);
-  --dsn-alert-background-color: var(--dsn-alert-warning-background-color);
-  --dsn-alert-border-color: var(--dsn-alert-warning-border-color);
-}
-
-/* ===========================
-   Base layout
-   =========================== */
-.dsn-alert {
-  display: grid;
-  grid-template-columns: var(--dsn-alert-icon-size) 1fr;
-  column-gap: var(--dsn-alert-column-gap);
-  row-gap: var(--dsn-alert-row-gap);
-  padding-block: var(--dsn-alert-padding-block);
-  padding-inline: var(--dsn-alert-padding-inline);
-  border-radius: var(--dsn-alert-border-radius);
-  border: var(--dsn-alert-border-width) solid var(--dsn-alert-border-color);
-  background-color: var(--dsn-alert-background-color);
-  color: var(--dsn-alert-color);
-}
-
-/* ===========================
-   Icon
-   =========================== */
-.dsn-alert__icon {
-  grid-column: 1;
-  grid-row: 1;
-  align-self: center;
-  flex-shrink: 0;
-  width: var(--dsn-alert-icon-size);
-  height: var(--dsn-alert-icon-size);
-  color: var(--dsn-alert-icon-color);
-}
-
-/* ===========================
-   Heading
-   =========================== */
-.dsn-alert__heading {
-  grid-column: 2;
-  grid-row: 1;
-  align-self: center;
-  margin-block-end: 0;
-}
-
-/* ===========================
-   Content
-   =========================== */
-.dsn-alert__content {
-  grid-column: 2;
-  grid-row: 2;
-}
-
-/* ===========================
-   No-icon modifier
-   =========================== */
-.dsn-alert--no-icon {
-  grid-template-columns: 1fr;
-}
-
-.dsn-alert--no-icon .dsn-alert__heading,
-.dsn-alert--no-icon .dsn-alert__content {
-  grid-column: 1;
-}
-

package/dist/Alert/Alert.d.ts

@@ -1,83 +0,0 @@
-import React from 'react';
-import './Alert.css';
-export type AlertVariant = 'info' | 'positive' | 'negative' | 'warning';
-export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Semantische variant die de signaalkleur bepaalt
-     * @default 'info'
-     */
-    variant?: AlertVariant;
-    /**
-     * Koptekst van het bericht (verplicht)
-     */
-    heading: string;
-    /**
-     * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
-     * @default 2
-     */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * Icoon vóór de heading.
-     * - `undefined` (default) — aanbevolen icoon per variant
-     * - `null` — geen icoon
-     * - `ReactNode` — aangepast icoon
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Visueel verborgen tekst vóór de heading die de variant benoemt voor
-     * screenreadergebruikers (inclusief scheidingsteken en spatie).
-     * - `undefined` (default) — standaardtekst per variant:
-     *   `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
-     * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
-     * - `string` — eigen tekst, bijv. voor een andere taal
-     */
-    variantLabel?: string;
-    /**
-     * Optionele body content (tekst, lijst, links, etc.)
-     */
-    children?: React.ReactNode;
-}
-/**
- * Alert component
- * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
- *
- * @example
- * ```tsx
- * // Info (default)
- * <Alert heading="Uw aanvraag wordt verwerkt">
- *   Dit kan enkele minuten duren.
- * </Alert>
- *
- * // Positive
- * <Alert variant="positive" heading="Gelukt">
- *   Uw gegevens zijn opgeslagen.
- * </Alert>
- *
- * // Negative
- * <Alert variant="negative" heading="Er is een fout opgetreden">
- *   Controleer uw gegevens en probeer het opnieuw.
- * </Alert>
- *
- * // Warning
- * <Alert variant="warning" heading="Let op">
- *   Uw sessie verloopt over 5 minuten.
- * </Alert>
- *
- * // Zonder icoon
- * <Alert variant="info" heading="Opmerking" iconStart={null}>
- *   Aanvullende informatie.
- * </Alert>
- *
- * // Met aangepast icoon
- * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
- *   Gebruik de zoekfunctie om snel te navigeren.
- * </Alert>
- *
- * // Variant-label onderdrukken (heading benoemt de variant al)
- * <Alert variant="negative" heading="Foutmelding" variantLabel="">
- *   Controleer uw gegevens.
- * </Alert>
- * ```
- */
-export declare const Alert: React.ForwardRefExoticComponent<AlertProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Alert.d.ts.map

package/dist/Alert/Alert.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.d.ts","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,UAAU,GAAG,UAAU,GAAG,SAAS,CAAC;AAgBxE,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;;;;;OAOG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,KAAK,mFAwDjB,CAAC"}

package/dist/Alert/Alert.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import { Icon } from '../Icon';
-import { Heading } from '../Heading';
-import './Alert.css';
-const PREFERRED_ICONS = {
-    info: 'info-circle',
-    positive: 'circle-check',
-    negative: 'exclamation-circle',
-    warning: 'alert-triangle',
-};
-const VARIANT_LABELS = {
-    info: 'Informatie: ',
-    positive: 'Succes: ',
-    negative: 'Foutmelding: ',
-    warning: 'Let op: ',
-};
-/**
- * Alert component
- * Belangrijk bericht dat de gebruiker informeert over de huidige activiteit of toestand.
- *
- * @example
- * ```tsx
- * // Info (default)
- * <Alert heading="Uw aanvraag wordt verwerkt">
- *   Dit kan enkele minuten duren.
- * </Alert>
- *
- * // Positive
- * <Alert variant="positive" heading="Gelukt">
- *   Uw gegevens zijn opgeslagen.
- * </Alert>
- *
- * // Negative
- * <Alert variant="negative" heading="Er is een fout opgetreden">
- *   Controleer uw gegevens en probeer het opnieuw.
- * </Alert>
- *
- * // Warning
- * <Alert variant="warning" heading="Let op">
- *   Uw sessie verloopt over 5 minuten.
- * </Alert>
- *
- * // Zonder icoon
- * <Alert variant="info" heading="Opmerking" iconStart={null}>
- *   Aanvullende informatie.
- * </Alert>
- *
- * // Met aangepast icoon
- * <Alert variant="info" heading="Tip" iconStart={<Icon name="star" aria-hidden />}>
- *   Gebruik de zoekfunctie om snel te navigeren.
- * </Alert>
- *
- * // Variant-label onderdrukken (heading benoemt de variant al)
- * <Alert variant="negative" heading="Foutmelding" variantLabel="">
- *   Controleer uw gegevens.
- * </Alert>
- * ```
- */
-export const Alert = React.forwardRef(({ className, variant = 'info', heading, headingLevel = 2, iconStart, variantLabel, children, ...props }, ref) => {
-    const noIcon = iconStart === null;
-    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];
-    const resolvedIcon = iconStart === undefined ? (_jsx(Icon, { name: PREFERRED_ICONS[variant], size: "xl", "aria-hidden": true })) : (iconStart);
-    const classes = classNames('dsn-alert', variant !== 'info' && `dsn-alert--${variant}`, noIcon && 'dsn-alert--no-icon', className);
-    return (_jsxs("div", { ref: ref, className: classes, role: "alert", ...props, children: [!noIcon && (_jsx("span", { className: "dsn-alert__icon", "aria-hidden": true, children: resolvedIcon })), _jsxs(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-alert__heading", children: [resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), heading] }), children && _jsx("div", { className: "dsn-alert__content", children: children })] }));
-});
-Alert.displayName = 'Alert';
-//# sourceMappingURL=Alert.js.map

package/dist/Alert/Alert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Alert.js","sourceRoot":"","sources":["../../src/Alert/Alert.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,aAAa,CAAC;AAIrB,MAAM,eAAe,GAAiC;IACpD,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAEF,MAAM,cAAc,GAAiC;IACnD,IAAI,EAAE,cAAc;IACpB,QAAQ,EAAE,UAAU;IACpB,QAAQ,EAAE,eAAe;IACzB,OAAO,EAAE,UAAU;CACpB,CAAC;AA4CF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,SAAS,EACT,OAAO,GAAG,MAAM,EAChB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,YAAY,EACZ,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClC,MAAM,oBAAoB,GAAG,YAAY,IAAI,cAAc,CAAC,OAAO,CAAC,CAAC;IAErE,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,OAAO,KAAK,MAAM,IAAI,cAAc,OAAO,EAAE,EAC7C,MAAM,IAAI,oBAAoB,EAC9B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,aACtD,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,iBAAiB,iCAC9B,YAAY,GACR,CACR,EACD,MAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,oBAAoB,aAE7B,oBAAoB,IAAI,CACvB,eAAM,SAAS,EAAC,qBAAqB,YAAE,oBAAoB,GAAQ,CACpE,EACA,OAAO,IACA,EACT,QAAQ,IAAI,cAAK,SAAS,EAAC,oBAAoB,YAAE,QAAQ,GAAO,IAC7D,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Alert/index.d.ts

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

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

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

package/dist/Alert/index.js

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

package/dist/Alert/index.js.map

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

package/dist/Backdrop/Backdrop.css

@@ -1,30 +0,0 @@
-/**
- * Backdrop Component
- * Vaste, volledig-scherm overlay die de achtergrondinhoud visueel verhult
- * wanneer een modaal UI-element open is (Modal Dialog, Drawer).
- *
- * Altijd aria-hidden="true" — puur decoratief, geen interactieve rol.
- * Conditioneel renderen vanuit de parent.
- *
- * Usage:
- * <div class="dsn-backdrop" aria-hidden="true"></div>
- */
-
-.dsn-backdrop {
-  position: fixed;
-  inset: 0;
-  /* Fallback voor omgevingen zonder color-mix() support (~6%) */
-  background-color: var(--dsn-backdrop-background-color);
-  background-color: color-mix(
-    in srgb,
-    var(--dsn-backdrop-background-color) var(--dsn-backdrop-opacity),
-    transparent
-  );
-  backdrop-filter: blur(var(--dsn-backdrop-blur));
-  z-index: var(--dsn-backdrop-z-index);
-}
-
-.dsn-backdrop--no-blur {
-  backdrop-filter: none;
-}
-