@dsn-starter-kit/components-react 1.0.0

package/dist/Grid/GridItem.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../src/Grid/GridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,MAAM,WAAW,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC3E,MAAM,MAAM,eAAe,GACvB,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,CAAC,GACD,EAAE,GACF,EAAE,GACF,EAAE,GACF,EAAE,CAAC;AAEP,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,WAAW,CAAC;IAExB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,sCAAsC;IACtC,UAAU,CAAC,EAAE,eAAe,CAAC;IAE7B,yCAAyC;IACzC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,eAAe,CAAC;IAE3B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,QAAQ,sFA6CpB,CAAC"}

package/dist/Grid/GridItem.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+/**
+ * GridItem component
+ * Directe child van Grid met kolomspanning en optionele responsive varianten.
+ *
+ * @example
+ * ```tsx
+ * // Vaste kolomverdeling
+ * <Grid>
+ *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>
+ *   <GridItem colSpan={4}>Sidebar</GridItem>
+ * </Grid>
+ *
+ * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg
+ * <Grid contained>
+ *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
+ *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>
+ *   <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>
+ * </Grid>
+ *
+ * // Full-bleed: breekt uit tot de container-randen
+ * <Grid contained>
+ *   <GridItem colSpan={8}>Normale content</GridItem>
+ *   <GridItem fullBleed>
+ *     <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>
+ *       Edge-to-edge sectie
+ *     </div>
+ *   </GridItem>
+ * </Grid>
+ * ```
+ */
+export const GridItem = React.forwardRef(({ className, colSpan, colSpanSm, colSpanMd, colSpanLg, colStart, colStartSm, colStartMd, colStartLg, colEnd, colEndSm, colEndMd, colEndLg, fullBleed, children, ...props }, ref) => {
+    const classes = classNames(colSpan && `dsn-col-${colSpan}`, colSpanSm && `dsn-col-sm-${colSpanSm}`, colSpanMd && `dsn-col-md-${colSpanMd}`, colSpanLg && `dsn-col-lg-${colSpanLg}`, colStart && `dsn-col-start-${colStart}`, colStartSm && `dsn-col-start-sm-${colStartSm}`, colStartMd && `dsn-col-start-md-${colStartMd}`, colStartLg && `dsn-col-start-lg-${colStartLg}`, colEnd && `dsn-col-end-${colEnd}`, colEndSm && `dsn-col-end-sm-${colEndSm}`, colEndMd && `dsn-col-end-md-${colEndMd}`, colEndLg && `dsn-col-end-lg-${colEndLg}`, fullBleed && 'dsn-full-bleed', className);
+    return (_jsx("div", { ref: ref, className: classes || undefined, ...props, children: children }));
+});
+GridItem.displayName = 'GridItem';
+//# sourceMappingURL=GridItem.js.map

package/dist/Grid/GridItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.js","sourceRoot":"","sources":["../../src/Grid/GridItem.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AA2EnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EACE,SAAS,EACT,OAAO,EACP,SAAS,EACT,SAAS,EACT,SAAS,EACT,QAAQ,EACR,UAAU,EACV,UAAU,EACV,UAAU,EACV,MAAM,EACN,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,OAAO,IAAI,WAAW,OAAO,EAAE,EAC/B,SAAS,IAAI,cAAc,SAAS,EAAE,EACtC,SAAS,IAAI,cAAc,SAAS,EAAE,EACtC,SAAS,IAAI,cAAc,SAAS,EAAE,EACtC,QAAQ,IAAI,iBAAiB,QAAQ,EAAE,EACvC,UAAU,IAAI,oBAAoB,UAAU,EAAE,EAC9C,UAAU,IAAI,oBAAoB,UAAU,EAAE,EAC9C,UAAU,IAAI,oBAAoB,UAAU,EAAE,EAC9C,MAAM,IAAI,eAAe,MAAM,EAAE,EACjC,QAAQ,IAAI,kBAAkB,QAAQ,EAAE,EACxC,QAAQ,IAAI,kBAAkB,QAAQ,EAAE,EACxC,QAAQ,IAAI,kBAAkB,QAAQ,EAAE,EACxC,SAAS,IAAI,gBAAgB,EAC7B,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,IAAI,SAAS,KAAM,KAAK,YACtD,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/Grid/index.d.ts

@@ -0,0 +1,5 @@
+export { Grid } from './Grid';
+export type { GridProps } from './Grid';
+export { GridItem } from './GridItem';
+export type { GridItemProps, GridColSpan } from './GridItem';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/Grid/index.js

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

package/dist/Grid/index.js.map

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

package/dist/Heading/Heading.css

@@ -0,0 +1,81 @@
+/**
+ * Heading Component Styles for React
+ * Re-exports the base Heading styles from components-html
+ */
+
+/**
+ * Heading Component
+ * Uses semantic component tokens for consistent styling
+ *
+ * Each appearance level has its own complete set of tokens
+ * (font-family, font-weight, color, font-size, line-height, margin).
+ *
+ * The `level` prop controls the semantic HTML element (h1–h6).
+ * The `appearance` prop controls the visual style, independently of level.
+ */
+
+.dsn-heading {
+  margin-block-start: 0;
+  text-wrap: balance;
+}
+
+/* Heading 1 Appearance */
+.dsn-heading--heading-1 {
+  font-family: var(--dsn-heading-level-1-font-family);
+  font-weight: var(--dsn-heading-level-1-font-weight);
+  color: var(--dsn-heading-level-1-color);
+  font-size: var(--dsn-heading-level-1-font-size);
+  line-height: var(--dsn-heading-level-1-line-height);
+  margin-block-end: var(--dsn-heading-level-1-margin-block-end);
+}
+
+/* Heading 2 Appearance */
+.dsn-heading--heading-2 {
+  font-family: var(--dsn-heading-level-2-font-family);
+  font-weight: var(--dsn-heading-level-2-font-weight);
+  color: var(--dsn-heading-level-2-color);
+  font-size: var(--dsn-heading-level-2-font-size);
+  line-height: var(--dsn-heading-level-2-line-height);
+  margin-block-end: var(--dsn-heading-level-2-margin-block-end);
+}
+
+/* Heading 3 Appearance */
+.dsn-heading--heading-3 {
+  font-family: var(--dsn-heading-level-3-font-family);
+  font-weight: var(--dsn-heading-level-3-font-weight);
+  color: var(--dsn-heading-level-3-color);
+  font-size: var(--dsn-heading-level-3-font-size);
+  line-height: var(--dsn-heading-level-3-line-height);
+  margin-block-end: var(--dsn-heading-level-3-margin-block-end);
+}
+
+/* Heading 4 Appearance */
+.dsn-heading--heading-4 {
+  font-family: var(--dsn-heading-level-4-font-family);
+  font-weight: var(--dsn-heading-level-4-font-weight);
+  color: var(--dsn-heading-level-4-color);
+  font-size: var(--dsn-heading-level-4-font-size);
+  line-height: var(--dsn-heading-level-4-line-height);
+  margin-block-end: var(--dsn-heading-level-4-margin-block-end);
+}
+
+/* Heading 5 Appearance */
+.dsn-heading--heading-5 {
+  font-family: var(--dsn-heading-level-5-font-family);
+  font-weight: var(--dsn-heading-level-5-font-weight);
+  color: var(--dsn-heading-level-5-color);
+  font-size: var(--dsn-heading-level-5-font-size);
+  line-height: var(--dsn-heading-level-5-line-height);
+  margin-block-end: var(--dsn-heading-level-5-margin-block-end);
+}
+
+/* Heading 6 Appearance */
+.dsn-heading--heading-6 {
+  font-family: var(--dsn-heading-level-6-font-family);
+  font-weight: var(--dsn-heading-level-6-font-weight);
+  color: var(--dsn-heading-level-6-color);
+  font-size: var(--dsn-heading-level-6-font-size);
+  line-height: var(--dsn-heading-level-6-line-height);
+  margin-block-end: var(--dsn-heading-level-6-margin-block-end);
+}
+

package/dist/Heading/Heading.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import './Heading.css';
+export type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export type HeadingAppearance = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6';
+export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Semantic heading level — determines the HTML element (h1–h6)
+     * @default 2
+     */
+    level?: HeadingLevel;
+    /**
+     * Visual appearance — controls font size, line height, and spacing.
+     * Defaults to matching the level (e.g. level 2 → heading-2).
+     */
+    appearance?: HeadingAppearance;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Heading content
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Heading component with independent semantic level and visual appearance
+ *
+ * @example
+ * ```tsx
+ * // Basic usage — level and appearance match
+ * <Heading level={1}>Page Title</Heading>
+ *
+ * // Semantic h2, styled as heading-4
+ * <Heading level={2} appearance="heading-4">Subsection</Heading>
+ * ```
+ */
+export declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+//# sourceMappingURL=Heading.d.ts.map

package/dist/Heading/Heading.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.ts","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;AACjD,MAAM,MAAM,iBAAiB,GACzB,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,GACX,WAAW,CAAC;AAEhB,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAC5E;;;OAGG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,iBAAiB,CAAC;IAE/B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,OAAO,yFAkBnB,CAAC"}

package/dist/Heading/Heading.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Heading.css';
+/**
+ * Heading component with independent semantic level and visual appearance
+ *
+ * @example
+ * ```tsx
+ * // Basic usage — level and appearance match
+ * <Heading level={1}>Page Title</Heading>
+ *
+ * // Semantic h2, styled as heading-4
+ * <Heading level={2} appearance="heading-4">Subsection</Heading>
+ * ```
+ */
+export const Heading = React.forwardRef(({ level = 2, appearance, className, children, ...props }, ref) => {
+    const resolvedAppearance = appearance ?? `heading-${level}`;
+    const Tag = `h${level}`;
+    const classes = classNames('dsn-heading', `dsn-heading--${resolvedAppearance}`, className);
+    return (_jsx(Tag, { ref: ref, className: classes, ...props, children: children }));
+});
+Heading.displayName = 'Heading';
+//# sourceMappingURL=Heading.js.map

package/dist/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sourceRoot":"","sources":["../../src/Heading/Heading.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,eAAe,CAAC;AAmCvB;;;;;;;;;;;GAWG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAChE,MAAM,kBAAkB,GACtB,UAAU,IAAK,WAAW,KAAK,EAAwB,CAAC;IAC1D,MAAM,GAAG,GAAG,IAAI,KAAK,EAAW,CAAC;IAEjC,MAAM,OAAO,GAAG,UAAU,CACxB,aAAa,EACb,gBAAgB,kBAAkB,EAAE,EACpC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,KAAC,GAAG,IAAC,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Heading/index.d.ts

@@ -0,0 +1,3 @@
+export { Heading } from './Heading';
+export type { HeadingProps, HeadingLevel, HeadingAppearance } from './Heading';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/Heading/index.js

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

package/dist/Heading/index.js.map

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

package/dist/Hero/Hero.css

@@ -0,0 +1,205 @@
+/**
+ * Hero Component
+ * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
+ * paginabreedte via het BreakoutSection-patroon (margin-inline: calc(50% - 50vw)).
+ *
+ * Vereiste: de parent heeft overflow-x: clip (dsn-page-body).
+ *
+ * Usage:
+ * <section class="dsn-hero" aria-labelledby="hero-heading">
+ *   <div class="dsn-hero__inner">
+ *     <div class="dsn-hero__content">
+ *       <!-- heading, paragraph, action group of searchbox -->
+ *     </div>
+ *   </div>
+ * </section>
+ *
+ * Searchbox (zoekfunctie als primaire actie):
+ * <div class="dsn-hero__searchbox">
+ *   <!-- SearchInput wrapper + submit button -->
+ * </div>
+ */
+
+/* =============================================================================
+   Base
+   ============================================================================= */
+
+.dsn-hero {
+  margin-inline: calc(50% - 50vw);
+  min-block-size: max(
+    var(--dsn-hero-min-block-size),
+    var(--dsn-hero-block-size)
+  );
+  background-color: var(--dsn-hero-background-color-default);
+  color: var(--dsn-hero-color-default);
+  display: flex;
+  flex-direction: column;
+}
+
+/* =============================================================================
+   Inner — centrerende wrapper (stemt af op dsn-page-body__inner)
+   ============================================================================= */
+
+.dsn-hero__inner {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  max-inline-size: var(--dsn-page-max-inline-size);
+  margin-inline: auto;
+  padding-inline: var(--dsn-hero-padding-inline);
+  padding-block: var(--dsn-hero-padding-block);
+  inline-size: 100%;
+}
+
+/* =============================================================================
+   Content — verticaal gecentreerde slot-container
+   ============================================================================= */
+
+.dsn-hero__content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+/* =============================================================================
+   Searchbox — zoekveld + submit button naast elkaar
+   ============================================================================= */
+
+.dsn-hero__searchbox {
+  display: flex;
+  align-items: center;
+  gap: var(--dsn-space-inline-md);
+}
+
+/* SearchInput wrapper vult beschikbare ruimte; button behoudt zijn natuurlijke breedte */
+.dsn-hero__searchbox .dsn-search-input-wrapper {
+  flex: 1;
+  min-inline-size: 0;
+  max-inline-size: none;
+}
+
+.dsn-hero__searchbox .dsn-text-input {
+  max-inline-size: none;
+  inline-size: 100%;
+}
+
+/* =============================================================================
+   Modifier: --inverse
+   Achtergrond + tekst- en componentkleur-overrides via CSS custom properties.
+   Patroon identiek aan PageHeader en PageFooter --inverse.
+   ============================================================================= */
+
+.dsn-hero--inverse {
+  background-color: var(--dsn-hero-background-color-inverse);
+  color: var(--dsn-hero-color-inverse);
+
+  /* Tekst-componenten */
+  --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-4-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-5-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-6-color: var(--dsn-hero-color-inverse);
+  --dsn-paragraph-color: var(--dsn-hero-color-inverse);
+
+  /* Strong button — action-1 kleurenschaal op inverse achtergrond */
+  --dsn-button-strong-background-color: var(--dsn-color-action-1-bg-default);
+  --dsn-button-strong-color: var(--dsn-color-action-1-color-default);
+  --dsn-button-strong-hover-background-color: var(
+    --dsn-color-action-1-bg-hover
+  );
+  --dsn-button-strong-hover-color: var(--dsn-color-action-1-color-hover);
+  --dsn-button-strong-active-background-color: var(
+    --dsn-color-action-1-bg-active
+  );
+  --dsn-button-strong-active-color: var(--dsn-color-action-1-color-active);
+
+  /* Subtle button — transparant met lichte tekst/rand op inverse achtergrond */
+  --dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-button-subtle-hover-background-color: var(
+    --dsn-color-accent-1-inverse-bg-hover
+  );
+  --dsn-button-subtle-hover-color: var(
+    --dsn-color-accent-1-inverse-color-hover
+  );
+  --dsn-button-subtle-active-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  --dsn-button-subtle-active-color: var(
+    --dsn-color-accent-1-inverse-color-active
+  );
+}
+
+/* =============================================================================
+   Modifier: --image
+   ============================================================================= */
+
+.dsn-hero--image {
+  background-image: var(--dsn-hero-bg-image);
+  background-size: cover;
+  background-position: center;
+  color: var(--dsn-hero-color-inverse);
+
+  /* Tekst-componenten */
+  --dsn-heading-level-1-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-2-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-3-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-4-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-5-color: var(--dsn-hero-color-inverse);
+  --dsn-heading-level-6-color: var(--dsn-hero-color-inverse);
+  --dsn-paragraph-color: var(--dsn-hero-color-inverse);
+
+  /* Buttons — zelfde als inverse */
+  --dsn-button-strong-background-color: var(--dsn-color-action-1-bg-default);
+  --dsn-button-strong-color: var(--dsn-color-action-1-color-default);
+  --dsn-button-strong-hover-background-color: var(
+    --dsn-color-action-1-bg-hover
+  );
+  --dsn-button-strong-hover-color: var(--dsn-color-action-1-color-hover);
+  --dsn-button-strong-active-background-color: var(
+    --dsn-color-action-1-bg-active
+  );
+  --dsn-button-strong-active-color: var(--dsn-color-action-1-color-active);
+  --dsn-button-subtle-color: var(--dsn-color-accent-1-inverse-color-default);
+  --dsn-button-subtle-hover-background-color: var(
+    --dsn-color-accent-1-inverse-bg-hover
+  );
+  --dsn-button-subtle-hover-color: var(
+    --dsn-color-accent-1-inverse-color-hover
+  );
+  --dsn-button-subtle-active-background-color: var(
+    --dsn-color-accent-1-inverse-bg-active
+  );
+  --dsn-button-subtle-active-color: var(
+    --dsn-color-accent-1-inverse-color-active
+  );
+}
+
+/* =============================================================================
+   Modifier: --image-blend (gecombineerd met --image)
+   ============================================================================= */
+
+.dsn-hero--image.dsn-hero--image-blend {
+  background-color: var(--dsn-hero-image-blend-color);
+  background-blend-mode: multiply;
+}
+
+/* =============================================================================
+   Modifier: --align-center
+   ============================================================================= */
+
+.dsn-hero--align-center .dsn-hero__content {
+  align-items: center;
+  text-align: center;
+}
+
+/* ActionGroup en searchbox centreren mee */
+.dsn-hero--align-center .dsn-action-group {
+  justify-content: center;
+}
+
+.dsn-hero--align-center .dsn-hero__searchbox {
+  justify-content: center;
+}
+

package/dist/Hero/Hero.d.ts

@@ -0,0 +1,45 @@
+import React from 'react';
+import './Hero.css';
+export type HeroVariant = 'default' | 'inverse' | 'image' | 'image-blend';
+export type HeroAlign = 'start' | 'center';
+export interface HeroProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Achtergrondstijl van de Hero.
+     * @default 'default'
+     */
+    variant?: HeroVariant;
+    /**
+     * URL van de achtergrondafbeelding — vereist bij `variant="image"` of `"image-blend"`.
+     * Wordt toegepast als CSS custom property `--dsn-hero-bg-image`.
+     */
+    backgroundImage?: string;
+    /**
+     * Horizontale uitlijning van de inhoud en tekst.
+     * @default 'start'
+     */
+    align?: HeroAlign;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Hero component
+ * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
+ * paginabreedte via het BreakoutSection-patroon.
+ *
+ * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).
+ *
+ * @example
+ * ```tsx
+ * <Hero>
+ *   <Stack space="lg">
+ *     <Heading level={1}>Paginatitel</Heading>
+ *     <Paragraph variant="lead">Introductietekst.</Paragraph>
+ *     <ActionGroup>
+ *       <ButtonLink href="/start" variant="strong" size="large">Aan de slag</ButtonLink>
+ *     </ActionGroup>
+ *   </Stack>
+ * </Hero>
+ * ```
+ */
+export declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Hero.d.ts.map

package/dist/Hero/Hero.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.ts","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,SAAS,GAAG,OAAO,GAAG,aAAa,CAAC;AAC1E,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AAE3C,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;GAmBG;AACH,eAAO,MAAM,IAAI,+EAoChB,CAAC"}

package/dist/Hero/Hero.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 './Hero.css';
+/**
+ * Hero component
+ * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige
+ * paginabreedte via het BreakoutSection-patroon.
+ *
+ * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).
+ *
+ * @example
+ * ```tsx
+ * <Hero>
+ *   <Stack space="lg">
+ *     <Heading level={1}>Paginatitel</Heading>
+ *     <Paragraph variant="lead">Introductietekst.</Paragraph>
+ *     <ActionGroup>
+ *       <ButtonLink href="/start" variant="strong" size="large">Aan de slag</ButtonLink>
+ *     </ActionGroup>
+ *   </Stack>
+ * </Hero>
+ * ```
+ */
+export const Hero = React.forwardRef(({ variant = 'default', backgroundImage, align = 'start', className, children, style, ...props }, ref) => {
+    const classes = classNames('dsn-hero', variant === 'inverse' && 'dsn-hero--inverse', (variant === 'image' || variant === 'image-blend') && 'dsn-hero--image', variant === 'image-blend' && 'dsn-hero--image-blend', align === 'center' && 'dsn-hero--align-center', className);
+    const inlineStyle = backgroundImage
+        ? { '--dsn-hero-bg-image': `url('${backgroundImage}')`, ...style }
+        : { ...style };
+    return (_jsx("section", { ref: ref, className: classes, style: inlineStyle, ...props, children: _jsx("div", { className: "dsn-hero__inner", children: _jsx("div", { className: "dsn-hero__content", children: children }) }) }));
+});
+Hero.displayName = 'Hero';
+//# sourceMappingURL=Hero.js.map

package/dist/Hero/Hero.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.js","sourceRoot":"","sources":["../../src/Hero/Hero.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AA4BpB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,OAAO,GAAG,SAAS,EACnB,eAAe,EACf,KAAK,GAAG,OAAO,EACf,SAAS,EACT,QAAQ,EACR,KAAK,EACL,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,OAAO,KAAK,SAAS,IAAI,mBAAmB,EAC5C,CAAC,OAAO,KAAK,OAAO,IAAI,OAAO,KAAK,aAAa,CAAC,IAAI,iBAAiB,EACvE,OAAO,KAAK,aAAa,IAAI,uBAAuB,EACpD,KAAK,KAAK,QAAQ,IAAI,wBAAwB,EAC9C,SAAS,CACV,CAAC;IAEF,MAAM,WAAW,GAEb,eAAe;QACjB,CAAC,CAAC,EAAE,qBAAqB,EAAE,QAAQ,eAAe,IAAI,EAAE,GAAG,KAAK,EAAE;QAClE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,CAAC;IAEjB,OAAO,CACL,kBAAS,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,WAAW,KAAM,KAAK,YAClE,cAAK,SAAS,EAAC,iBAAiB,YAC9B,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,GAC/C,GACE,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Hero/index.d.ts

@@ -0,0 +1,3 @@
+export { Hero } from './Hero';
+export type { HeroProps, HeroVariant, HeroAlign } from './Hero';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/Hero/index.js

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

package/dist/Hero/index.js.map

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

package/dist/Icon/Icon.css

@@ -0,0 +1,57 @@
+/**
+ * Icon Component Styles for React
+ * Re-exports the base Icon styles from components-html
+ */
+
+/**
+ * Icon Component Styles
+ * Uses design tokens for sizing (coupled to typography)
+ *
+ * Usage:
+ *   <svg class="dsn-icon dsn-icon--lg" ...>
+ *     <use href="..." />
+ *   </svg>
+ */
+
+.dsn-icon {
+  /* Base styles */
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+
+  /* Default size (md) */
+  width: var(--dsn-icon-size-md);
+  height: var(--dsn-icon-size-md);
+}
+
+/* Size Variants - Using design tokens */
+.dsn-icon--sm {
+  width: var(--dsn-icon-size-sm);
+  height: var(--dsn-icon-size-sm);
+}
+
+.dsn-icon--lg {
+  width: var(--dsn-icon-size-lg);
+  height: var(--dsn-icon-size-lg);
+}
+
+.dsn-icon--xl {
+  width: var(--dsn-icon-size-xl);
+  height: var(--dsn-icon-size-xl);
+}
+
+.dsn-icon--2xl {
+  width: var(--dsn-icon-size-2xl);
+  height: var(--dsn-icon-size-2xl);
+}
+
+.dsn-icon--3xl {
+  width: var(--dsn-icon-size-3xl);
+  height: var(--dsn-icon-size-3xl);
+}
+
+.dsn-icon--4xl {
+  width: var(--dsn-icon-size-4xl);
+  height: var(--dsn-icon-size-4xl);
+}
+

package/dist/Icon/Icon.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { iconMap } from './icon-registry.generated';
+import type { IconName } from './icon-registry.generated';
+import './Icon.css';
+export type { IconName };
+export { iconMap };
+export type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+export interface IconProps extends Omit<React.SVGAttributes<SVGSVGElement>, 'name'> {
+    /**
+     * Icon name from Tabler Icons
+     */
+    name: IconName;
+    /**
+     * Icon size variant
+     * @default 'md'
+     */
+    size?: IconSize;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Accessible label for the icon
+     * If not provided, icon is marked as decorative (aria-hidden="true")
+     */
+    'aria-label'?: string;
+}
+/**
+ * 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 declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=Icon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/Icon/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAC;AACpD,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAE1D,OAAO,YAAY,CAAC;AAEpB,YAAY,EAAE,QAAQ,EAAE,CAAC;AACzB,OAAO,EAAE,OAAO,EAAE,CAAC;AACnB,MAAM,MAAM,QAAQ,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAEzE,MAAM,WAAW,SAAU,SAAQ,IAAI,CACrC,KAAK,CAAC,aAAa,CAAC,aAAa,CAAC,EAClC,MAAM,CACP;IACC;;OAEG;IACH,IAAI,EAAE,QAAQ,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,IAAI,iFA+BhB,CAAC"}