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

package/package.json

@@ -1,22 +1,24 @@
 {
   "name": "@dsn-starter-kit/components-react",
-  "version": "1.0.2",
+  "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": "1.0.2",
-    "@dsn-starter-kit/design-tokens": "1.0.2"
+    "@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,63 +0,0 @@
-/**
- * ActionGroup Component
- * Groups related actions (Buttons and Links) and manages their layout.
- *
- * Usage:
- * <!-- Horizontal (default) — wraps automatically when viewport is too narrow -->
- * <div class="dsn-action-group">
- *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *     <span class="dsn-button__label">Opslaan</span>
- *   </button>
- *   <button class="dsn-button dsn-button--subtle dsn-button--size-default">
- *     <span class="dsn-button__label">Annuleren</span>
- *   </button>
- * </div>
- *
- * <!-- Horizontal with Link as soft exit -->
- * <div class="dsn-action-group">
- *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *     <span class="dsn-button__label">Volgende stap</span>
- *   </button>
- *   <a class="dsn-link" href="/">Terug naar overzicht</a>
- * </div>
- *
- * <!-- Vertical -->
- * <div class="dsn-action-group dsn-action-group--vertical">
- *   <button class="dsn-button dsn-button--strong dsn-button--size-default">
- *     <span class="dsn-button__label">Primaire actie</span>
- *   </button>
- *   <button class="dsn-button dsn-button--subtle dsn-button--size-default">
- *     <span class="dsn-button__label">Secundaire actie</span>
- *   </button>
- * </div>
- */
-
-/* ===========================
-   Base layout — horizontal (default)
-   =========================== */
-.dsn-action-group {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: var(--dsn-action-group-column-gap);
-  row-gap: var(--dsn-action-group-row-gap);
-}
-
-/* Link en LinkButton hebben align-self: flex-start om uitrekken te voorkomen
-   in verticale contexten — in een horizontale ActionGroup resetten we dit
-   zodat ze verticaal centreren met de Buttons naast hen. */
-.dsn-action-group:not(.dsn-action-group--vertical) > .dsn-link,
-.dsn-action-group:not(.dsn-action-group--vertical) > .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,41 +0,0 @@
-import React from 'react';
-import './ActionGroup.css';
-export interface ActionGroupProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * 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.
- *
- * @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>
- * ```
- */
-export declare const ActionGroup: React.ForwardRefExoticComponent<ActionGroupProps & React.RefAttributes<HTMLDivElement>>;
-//# 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,cAAc,CAAC;IAC5E;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,CAAC;IAEtC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,WAAW,yFAcvB,CAAC"}

package/dist/ActionGroup/ActionGroup.js

@@ -1,36 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './ActionGroup.css';
-/**
- * ActionGroup component
- * Groepeert gerelateerde acties en verzorgt de lay-out van Buttons en Links.
- * Horizontale richting (default) wraps automatisch bij te weinig ruimte.
- *
- * @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>
- * ```
- */
-export const ActionGroup = React.forwardRef(({ className, direction = 'horizontal', children, ...props }, ref) => {
-    const classes = classNames('dsn-action-group', direction === 'vertical' && 'dsn-action-group--vertical', className);
-    return (_jsx("div", { ref: ref, className: classes, role: "group", ...props, children: children }));
-});
-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;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,YAAY,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,SAAS,KAAK,UAAU,IAAI,4BAA4B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,OAAO,KAAK,KAAK,YACtD,QAAQ,GACL,CACP,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,145 +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.
- *
- * Usage:
- * <!-- Info variant (default), with icon -->
- * <div class="dsn-alert" role="alert">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- info-circle --></svg>
- *   <strong class="dsn-alert__heading">Heading</strong>
- *   <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">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- circle-check --></svg>
- *   <strong class="dsn-alert__heading">Gelukt</strong>
- *   <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">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- exclamation-circle --></svg>
- *   <strong class="dsn-alert__heading">Er is een fout opgetreden</strong>
- *   <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">
- *   <svg class="dsn-icon dsn-alert__icon" aria-hidden="true"><!-- alert-triangle --></svg>
- *   <strong class="dsn-alert__heading">Let op</strong>
- *   <div class="dsn-alert__content">
- *     <p>Uw sessie verloopt binnenkort.</p>
- *   </div>
- * </div>
- *
- * <!-- Without icon -->
- * <div class="dsn-alert dsn-alert--no-icon" role="alert">
- *   <strong class="dsn-alert__heading">Heading</strong>
- *   <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,69 +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;
-    /**
-     * 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>
- * ```
- */
-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;AASxE,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;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,eAAO,MAAM,KAAK,mFAmDjB,CAAC"}

package/dist/Alert/Alert.js

@@ -1,57 +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',
-};
-/**
- * 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>
- * ```
- */
-export const Alert = React.forwardRef(({ className, variant = 'info', heading, headingLevel = 2, iconStart, children, ...props }, ref) => {
-    const noIcon = iconStart === null;
-    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 })), _jsx(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-alert__heading", children: 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;AAkCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;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,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAElC,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,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,oBAAoB,YAE7B,OAAO,GACA,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;
-}
-

package/dist/Backdrop/Backdrop.d.ts

@@ -1,26 +0,0 @@
-import React from 'react';
-import './Backdrop.css';
-export interface BackdropProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Schakelt het blur-filter in of uit.
-     * Gebruik `false` als fallback voor omgevingen zonder backdrop-filter support.
-     * @default true
-     */
-    blur?: boolean;
-}
-/**
- * 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.
- *
- * @example
- * ```tsx
- * {isOpen && <Backdrop />}
- * {isOpen && <Backdrop blur={false} />}
- * ```
- */
-export declare const Backdrop: React.ForwardRefExoticComponent<BackdropProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Backdrop.d.ts.map

package/dist/Backdrop/Backdrop.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Backdrop.d.ts","sourceRoot":"","sources":["../../src/Backdrop/Backdrop.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,sFAepB,CAAC"}

package/dist/Backdrop/Backdrop.js

@@ -1,23 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Backdrop.css';
-/**
- * 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.
- *
- * @example
- * ```tsx
- * {isOpen && <Backdrop />}
- * {isOpen && <Backdrop blur={false} />}
- * ```
- */
-export const Backdrop = React.forwardRef(({ className, blur = true, ...props }, ref) => {
-    return (_jsx("div", { ref: ref, className: classNames('dsn-backdrop', !blur && 'dsn-backdrop--no-blur', className), "aria-hidden": "true", ...props }));
-});
-Backdrop.displayName = 'Backdrop';
-//# sourceMappingURL=Backdrop.js.map

package/dist/Backdrop/Backdrop.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Backdrop.js","sourceRoot":"","sources":["../../src/Backdrop/Backdrop.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAWxB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,IAAI,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC5C,OAAO,CACL,cACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CACnB,cAAc,EACd,CAAC,IAAI,IAAI,uBAAuB,EAChC,SAAS,CACV,iBACW,MAAM,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/Backdrop/index.d.ts

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

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

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

package/dist/Backdrop/index.js

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

package/dist/Backdrop/index.js.map

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

package/dist/Body/Body.css

@@ -1,14 +0,0 @@
-/**
- * Body component styles voor React
- * Re-exporteert de basis Body stijlen vanuit components-html
- */
-
-.dsn-body {
-  background-color: var(--dsn-color-neutral-bg-document);
-  color: var(--dsn-color-neutral-color-document);
-  font-family: var(--dsn-text-font-family-default);
-  font-size: var(--dsn-text-font-size-md);
-  line-height: var(--dsn-text-line-height-md);
-  font-weight: var(--dsn-text-font-weight-default);
-}
-