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

package/dist/Grid/GridItem.mjs

@@ -0,0 +1,48 @@
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Grid/GridItem.tsx
+/**
+* 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>
+* ```
+*/
+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 /* @__PURE__ */ jsx("div", {
+		ref,
+		className: classes || void 0,
+		...props,
+		children
+	});
+});
+GridItem.displayName = "GridItem";
+//#endregion
+export { GridItem };
+
+//# sourceMappingURL=GridItem.mjs.map

package/dist/Grid/GridItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GridItem.mjs","names":[],"sources":["../../src/Grid/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\n\nexport type GridColSpan = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\nexport type GridColPosition =\n  | 1\n  | 2\n  | 3\n  | 4\n  | 5\n  | 6\n  | 7\n  | 8\n  | 9\n  | 10\n  | 11\n  | 12\n  | 13;\n\nexport interface GridItemProps extends React.HTMLAttributes<HTMLDivElement> {\n  /**\n   * Aantal kolommen dat dit item beslaat (1–12).\n   * Zonder colSpan beslaat het item de volledige breedte (12 kolommen).\n   */\n  colSpan?: GridColSpan;\n\n  /**\n   * Kolomspanning vanaf sm-breakpoint (36em ~576px).\n   * Overschrijft colSpan op dit breekpunt.\n   */\n  colSpanSm?: GridColSpan;\n\n  /**\n   * Kolomspanning vanaf md-breakpoint (44em ~704px).\n   * Overschrijft colSpan op dit breekpunt.\n   */\n  colSpanMd?: GridColSpan;\n\n  /**\n   * Kolomspanning vanaf lg-breakpoint (64em ~1024px).\n   * Overschrijft colSpan op dit breekpunt.\n   */\n  colSpanLg?: GridColSpan;\n\n  /** Startkolom (grid-column-start, 1–13). */\n  colStart?: GridColPosition;\n  /** Startkolom vanaf sm-breakpoint. */\n  colStartSm?: GridColPosition;\n  /** Startkolom vanaf md-breakpoint. */\n  colStartMd?: GridColPosition;\n  /** Startkolom vanaf lg-breakpoint. */\n  colStartLg?: GridColPosition;\n\n  /** Eindkolom (grid-column-end, 1–13). */\n  colEnd?: GridColPosition;\n  /** Eindkolom vanaf sm-breakpoint. */\n  colEndSm?: GridColPosition;\n  /** Eindkolom vanaf md-breakpoint. */\n  colEndMd?: GridColPosition;\n  /** Eindkolom vanaf lg-breakpoint. */\n  colEndLg?: GridColPosition;\n\n  /**\n   * Breekt visueel uit tot de buitenrand van de grid container.\n   * Het item beslaat de volledige breedte inclusief de grid margin.\n   * Gebruik dit voor achtergrondvlakken die edge-to-edge lopen.\n   * @default false\n   */\n  fullBleed?: boolean;\n\n  /**\n   * Child-elementen van het grid item.\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * GridItem component\n * Directe child van Grid met kolomspanning en optionele responsive varianten.\n *\n * @example\n * ```tsx\n * // Vaste kolomverdeling\n * <Grid>\n *   <GridItem colSpan={8}>Hoofdinhoud</GridItem>\n *   <GridItem colSpan={4}>Sidebar</GridItem>\n * </Grid>\n *\n * // Responsive: 12 kolommen op mobiel, 6 op md, 4 op lg\n * <Grid contained>\n *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>\n *   <GridItem colSpan={12} colSpanMd={6} colSpanLg={4}>Item</GridItem>\n *   <GridItem colSpan={12} colSpanMd={12} colSpanLg={4}>Item</GridItem>\n * </Grid>\n *\n * // Full-bleed: breekt uit tot de container-randen\n * <Grid contained>\n *   <GridItem colSpan={8}>Normale content</GridItem>\n *   <GridItem fullBleed>\n *     <div style={{ background: 'var(--dsn-color-brand-bg)', padding: '2rem' }}>\n *       Edge-to-edge sectie\n *     </div>\n *   </GridItem>\n * </Grid>\n * ```\n */\nexport const GridItem = React.forwardRef<HTMLDivElement, GridItemProps>(\n  (\n    {\n      className,\n      colSpan,\n      colSpanSm,\n      colSpanMd,\n      colSpanLg,\n      colStart,\n      colStartSm,\n      colStartMd,\n      colStartLg,\n      colEnd,\n      colEndSm,\n      colEndMd,\n      colEndLg,\n      fullBleed,\n      children,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      colSpan && `dsn-col-${colSpan}`,\n      colSpanSm && `dsn-col-sm-${colSpanSm}`,\n      colSpanMd && `dsn-col-md-${colSpanMd}`,\n      colSpanLg && `dsn-col-lg-${colSpanLg}`,\n      colStart && `dsn-col-start-${colStart}`,\n      colStartSm && `dsn-col-start-sm-${colStartSm}`,\n      colStartMd && `dsn-col-start-md-${colStartMd}`,\n      colStartLg && `dsn-col-start-lg-${colStartLg}`,\n      colEnd && `dsn-col-end-${colEnd}`,\n      colEndSm && `dsn-col-end-sm-${colEndSm}`,\n      colEndMd && `dsn-col-end-md-${colEndMd}`,\n      colEndLg && `dsn-col-end-lg-${colEndLg}`,\n      fullBleed && 'dsn-full-bleed',\n      className\n    );\n\n    return (\n      <div ref={ref} className={classes || undefined} {...props}>\n        {children}\n      </div>\n    );\n  }\n);\n\nGridItem.displayName = 'GridItem';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0GA,MAAa,WAAW,MAAM,YAE1B,EACE,WACA,SACA,WACA,WACA,WACA,UACA,YACA,YACA,YACA,QACA,UACA,UACA,UACA,WACA,UACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,WAAW,WAAW,WACtB,aAAa,cAAc,aAC3B,aAAa,cAAc,aAC3B,aAAa,cAAc,aAC3B,YAAY,iBAAiB,YAC7B,cAAc,oBAAoB,cAClC,cAAc,oBAAoB,cAClC,cAAc,oBAAoB,cAClC,UAAU,eAAe,UACzB,YAAY,kBAAkB,YAC9B,YAAY,kBAAkB,YAC9B,YAAY,kBAAkB,YAC9B,aAAa,kBACb,SACF;CAEA,OACE,oBAAC,OAAD;EAAU;EAAK,WAAW,WAAW,KAAA;EAAW,GAAI;EACjD;CACE,CAAA;AAET,CACF;AAEA,SAAS,cAAc"}

package/dist/Grid/index.d.mts

@@ -0,0 +1,3 @@
+import { Grid, GridProps } from "./Grid.mjs";
+import { GridColSpan, GridItem, GridItemProps } from "./GridItem.mjs";
+export { Grid, type GridColSpan, GridItem, type GridItemProps, type GridProps };

package/dist/Heading/Heading.d.mts

@@ -0,0 +1,40 @@
+import React from "react";
+//#region src/Heading/Heading.d.ts
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+type HeadingAppearance = 'heading-1' | 'heading-2' | 'heading-3' | 'heading-4' | 'heading-5' | 'heading-6';
+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>
+ * ```
+ */
+declare const Heading: React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { Heading, HeadingAppearance, HeadingLevel, HeadingProps };
+//# sourceMappingURL=Heading.d.mts.map

package/dist/Heading/Heading.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.d.mts","names":[],"sources":["../../src/Heading/Heading.tsx"],"mappings":";;KAIY;KACA;UAQK,qBAAqB,MAAM,eAAe;;;;;EAKzD,QAAQ;;;;;EAMR,aAAa;;;;EAKb;;;;EAKA,WAAW,MAAM;;;;;;;;;;;;;;cAeN,SAAO,MAAA,0BAAA,eAAA,MAAA,cAAA"}

package/dist/Heading/Heading2.mjs

@@ -0,0 +1,33 @@
+/* empty css         */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Heading/Heading.tsx
+/**
+* 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>
+* ```
+*/
+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 /* @__PURE__ */ jsx(Tag, {
+		ref,
+		className: classes,
+		...props,
+		children
+	});
+});
+Heading.displayName = "Heading";
+//#endregion
+export { Heading };
+
+//# sourceMappingURL=Heading2.mjs.map

package/dist/Heading/Heading2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading2.mjs","names":[],"sources":["../../src/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Heading.css';\n\nexport type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;\nexport type HeadingAppearance =\n  | 'heading-1'\n  | 'heading-2'\n  | 'heading-3'\n  | 'heading-4'\n  | 'heading-5'\n  | 'heading-6';\n\nexport interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantic heading level — determines the HTML element (h1–h6)\n   * @default 2\n   */\n  level?: HeadingLevel;\n\n  /**\n   * Visual appearance — controls font size, line height, and spacing.\n   * Defaults to matching the level (e.g. level 2 → heading-2).\n   */\n  appearance?: HeadingAppearance;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Heading content\n   */\n  children?: React.ReactNode;\n}\n\n/**\n * Heading component with independent semantic level and visual appearance\n *\n * @example\n * ```tsx\n * // Basic usage — level and appearance match\n * <Heading level={1}>Page Title</Heading>\n *\n * // Semantic h2, styled as heading-4\n * <Heading level={2} appearance=\"heading-4\">Subsection</Heading>\n * ```\n */\nexport const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(\n  ({ level = 2, appearance, className, children, ...props }, ref) => {\n    const resolvedAppearance =\n      appearance ?? (`heading-${level}` as HeadingAppearance);\n    const Tag = `h${level}` as const;\n\n    const classes = classNames(\n      'dsn-heading',\n      `dsn-heading--${resolvedAppearance}`,\n      className\n    );\n\n    return (\n      <Tag ref={ref} className={classes} {...props}>\n        {children}\n      </Tag>\n    );\n  }\n);\n\nHeading.displayName = 'Heading';\n"],"mappings":";;;;;;;;;;;;;;;;;AAiDA,MAAa,UAAU,MAAM,YAC1B,EAAE,QAAQ,GAAG,YAAY,WAAW,UAAU,GAAG,SAAS,QAAQ;CACjE,MAAM,qBACJ,cAAe,WAAW;CAC5B,MAAM,MAAM,IAAI;CAEhB,MAAM,UAAU,WACd,eACA,gBAAgB,sBAChB,SACF;CAEA,OACE,oBAAC,KAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EACpC;CACE,CAAA;AAET,CACF;AAEA,QAAQ,cAAc"}

package/dist/Heading/index.d.mts

@@ -0,0 +1,2 @@
+import { Heading, HeadingAppearance, HeadingLevel, HeadingProps } from "./Heading.mjs";
+export { Heading, type HeadingAppearance, type HeadingLevel, type HeadingProps };

package/dist/HeadingGroup/HeadingGroup.d.mts

@@ -0,0 +1,25 @@
+import { HeadingAppearance, HeadingLevel } from "../Heading/Heading.mjs";
+import React from "react";
+//#region src/HeadingGroup/HeadingGroup.d.ts
+interface HeadingGroupProps 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;
+  /**
+   * Content of the pre-heading. Wrapped in a dsn-pre-heading span automatically.
+   */
+  preHeading?: React.ReactNode;
+  children?: React.ReactNode;
+  className?: string;
+}
+declare const HeadingGroup: React.ForwardRefExoticComponent<HeadingGroupProps & React.RefAttributes<HTMLHeadingElement>>;
+//#endregion
+export { HeadingGroup, HeadingGroupProps };
+//# sourceMappingURL=HeadingGroup.d.mts.map

package/dist/HeadingGroup/HeadingGroup.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingGroup.d.mts","names":[],"sources":["../../src/HeadingGroup/HeadingGroup.tsx"],"mappings":";;;UAKiB,0BAA0B,MAAM,eAAe;;;;;EAK9D,QAAQ;;;;;EAMR,aAAa;;;;EAKb,aAAa,MAAM;EAEnB,WAAW,MAAM;EACjB;;cAGW,cAAY,MAAA,0BAAA,oBAAA,MAAA,cAAA"}

package/dist/HeadingGroup/HeadingGroup2.mjs

@@ -0,0 +1,24 @@
+/* empty css              */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/HeadingGroup/HeadingGroup.tsx
+const HeadingGroup = React.forwardRef(({ level = 2, appearance, preHeading, className, children, ...props }, ref) => {
+	const resolvedAppearance = appearance ?? `heading-${level}`;
+	const Tag = `h${level}`;
+	const classes = classNames("dsn-heading", `dsn-heading--${resolvedAppearance}`, "dsn-heading-group", className);
+	return /* @__PURE__ */ jsxs(Tag, {
+		ref,
+		className: classes,
+		...props,
+		children: [preHeading != null && /* @__PURE__ */ jsx("span", {
+			className: "dsn-pre-heading",
+			children: preHeading
+		}), children]
+	});
+});
+HeadingGroup.displayName = "HeadingGroup";
+//#endregion
+export { HeadingGroup };
+
+//# sourceMappingURL=HeadingGroup2.mjs.map

package/dist/HeadingGroup/HeadingGroup2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeadingGroup2.mjs","names":[],"sources":["../../src/HeadingGroup/HeadingGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport type { HeadingLevel, HeadingAppearance } from '../Heading/Heading';\nimport './HeadingGroup.css';\n\nexport interface HeadingGroupProps extends React.HTMLAttributes<HTMLHeadingElement> {\n  /**\n   * Semantic heading level — determines the HTML element (h1–h6)\n   * @default 2\n   */\n  level?: HeadingLevel;\n\n  /**\n   * Visual appearance — controls font size, line height, and spacing.\n   * Defaults to matching the level (e.g. level 2 → heading-2).\n   */\n  appearance?: HeadingAppearance;\n\n  /**\n   * Content of the pre-heading. Wrapped in a dsn-pre-heading span automatically.\n   */\n  preHeading?: React.ReactNode;\n\n  children?: React.ReactNode;\n  className?: string;\n}\n\nexport const HeadingGroup = React.forwardRef<\n  HTMLHeadingElement,\n  HeadingGroupProps\n>(\n  (\n    { level = 2, appearance, preHeading, className, children, ...props },\n    ref\n  ) => {\n    const resolvedAppearance =\n      appearance ?? (`heading-${level}` as HeadingAppearance);\n    const Tag = `h${level}` as const;\n\n    const classes = classNames(\n      'dsn-heading',\n      `dsn-heading--${resolvedAppearance}`,\n      'dsn-heading-group',\n      className\n    );\n\n    return (\n      <Tag ref={ref} className={classes} {...props}>\n        {preHeading != null && (\n          <span className=\"dsn-pre-heading\">{preHeading}</span>\n        )}\n        {children}\n      </Tag>\n    );\n  }\n);\n\nHeadingGroup.displayName = 'HeadingGroup';\n"],"mappings":";;;;;AA2BA,MAAa,eAAe,MAAM,YAK9B,EAAE,QAAQ,GAAG,YAAY,YAAY,WAAW,UAAU,GAAG,SAC7D,QACG;CACH,MAAM,qBACJ,cAAe,WAAW;CAC5B,MAAM,MAAM,IAAI;CAEhB,MAAM,UAAU,WACd,eACA,gBAAgB,sBAChB,qBACA,SACF;CAEA,OACE,qBAAC,KAAD;EAAU;EAAK,WAAW;EAAS,GAAI;EAAvC,UAAA,CACG,cAAc,QACb,oBAAC,QAAD;GAAM,WAAU;GAAmB,UAAA;EAAiB,CAAA,GAErD,QACE;;AAET,CACF;AAEA,aAAa,cAAc"}

package/dist/HeadingGroup/index.d.mts

@@ -0,0 +1,2 @@
+import { HeadingGroup, HeadingGroupProps } from "./HeadingGroup.mjs";
+export { HeadingGroup, type HeadingGroupProps };

package/dist/Hero/Hero.d.mts

@@ -0,0 +1,47 @@
+import React from "react";
+//#region src/Hero/Hero.d.ts
+type HeroVariant = 'default' | 'inverse' | 'image' | 'image-blend';
+type HeroAlign = 'start' | 'center';
+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>
+ * ```
+ */
+declare const Hero: React.ForwardRefExoticComponent<HeroProps & React.RefAttributes<HTMLElement>>;
+//#endregion
+export { Hero, HeroAlign, HeroProps, HeroVariant };
+//# sourceMappingURL=Hero.d.mts.map

package/dist/Hero/Hero.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero.d.mts","names":[],"sources":["../../src/Hero/Hero.tsx"],"mappings":";;KAIY;KACA;UAEK,kBAAkB,MAAM,eAAe;;;;;EAKtD,UAAU;;;;;EAMV;;;;;EAMA,QAAQ;EAER,WAAW,MAAM;EACjB;;;;;;;;;;;;;;;;;;;;;;cAuBW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}

package/dist/Hero/Hero2.mjs

@@ -0,0 +1,50 @@
+/* empty css      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Hero/Hero.tsx
+/**
+* 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>
+* ```
+*/
+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 /* @__PURE__ */ jsx("section", {
+		ref,
+		className: classes,
+		style: inlineStyle,
+		...props,
+		children: /* @__PURE__ */ jsx("div", {
+			className: "dsn-hero__inner",
+			children: /* @__PURE__ */ jsx("div", {
+				className: "dsn-hero__content",
+				children
+			})
+		})
+	});
+});
+Hero.displayName = "Hero";
+//#endregion
+export { Hero };
+
+//# sourceMappingURL=Hero2.mjs.map

package/dist/Hero/Hero2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hero2.mjs","names":[],"sources":["../../src/Hero/Hero.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport './Hero.css';\n\nexport type HeroVariant = 'default' | 'inverse' | 'image' | 'image-blend';\nexport type HeroAlign = 'start' | 'center';\n\nexport interface HeroProps extends React.HTMLAttributes<HTMLElement> {\n  /**\n   * Achtergrondstijl van de Hero.\n   * @default 'default'\n   */\n  variant?: HeroVariant;\n\n  /**\n   * URL van de achtergrondafbeelding — vereist bij `variant=\"image\"` of `\"image-blend\"`.\n   * Wordt toegepast als CSS custom property `--dsn-hero-bg-image`.\n   */\n  backgroundImage?: string;\n\n  /**\n   * Horizontale uitlijning van de inhoud en tekst.\n   * @default 'start'\n   */\n  align?: HeroAlign;\n\n  children?: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Hero component\n * Prominente introductiesectie direct onder de PageHeader. Beslaat de volledige\n * paginabreedte via het BreakoutSection-patroon.\n *\n * Vereiste: de parent heeft `overflow-x: clip` (dsn-page-body).\n *\n * @example\n * ```tsx\n * <Hero>\n *   <Stack space=\"lg\">\n *     <Heading level={1}>Paginatitel</Heading>\n *     <Paragraph variant=\"lead\">Introductietekst.</Paragraph>\n *     <ActionGroup>\n *       <ButtonLink href=\"/start\" variant=\"strong\" size=\"large\">Aan de slag</ButtonLink>\n *     </ActionGroup>\n *   </Stack>\n * </Hero>\n * ```\n */\nexport const Hero = React.forwardRef<HTMLElement, HeroProps>(\n  (\n    {\n      variant = 'default',\n      backgroundImage,\n      align = 'start',\n      className,\n      children,\n      style,\n      ...props\n    },\n    ref\n  ) => {\n    const classes = classNames(\n      'dsn-hero',\n      variant === 'inverse' && 'dsn-hero--inverse',\n      (variant === 'image' || variant === 'image-blend') && 'dsn-hero--image',\n      variant === 'image-blend' && 'dsn-hero--image-blend',\n      align === 'center' && 'dsn-hero--align-center',\n      className\n    );\n\n    const inlineStyle: React.CSSProperties & {\n      '--dsn-hero-bg-image'?: string;\n    } = backgroundImage\n      ? { '--dsn-hero-bg-image': `url('${backgroundImage}')`, ...style }\n      : { ...style };\n\n    return (\n      <section ref={ref} className={classes} style={inlineStyle} {...props}>\n        <div className=\"dsn-hero__inner\">\n          <div className=\"dsn-hero__content\">{children}</div>\n        </div>\n      </section>\n    );\n  }\n);\n\nHero.displayName = 'Hero';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAkDA,MAAa,OAAO,MAAM,YAEtB,EACE,UAAU,WACV,iBACA,QAAQ,SACR,WACA,UACA,OACA,GAAG,SAEL,QACG;CACH,MAAM,UAAU,WACd,YACA,YAAY,aAAa,sBACxB,YAAY,WAAW,YAAY,kBAAkB,mBACtD,YAAY,iBAAiB,yBAC7B,UAAU,YAAY,0BACtB,SACF;CAEA,MAAM,cAEF,kBACA;EAAE,uBAAuB,QAAQ,gBAAgB;EAAK,GAAG;CAAM,IAC/D,EAAE,GAAG,MAAM;CAEf,OACE,oBAAC,WAAD;EAAc;EAAK,WAAW;EAAS,OAAO;EAAa,GAAI;EAC7D,UAAA,oBAAC,OAAD;GAAK,WAAU;GACb,UAAA,oBAAC,OAAD;IAAK,WAAU;IAAqB;GAAc,CAAA;EAC/C,CAAA;CACE,CAAA;AAEb,CACF;AAEA,KAAK,cAAc"}

package/dist/Hero/index.d.mts

@@ -0,0 +1,2 @@
+import { Hero, HeroAlign, HeroProps, HeroVariant } from "./Hero.mjs";
+export { Hero, type HeroAlign, type HeroProps, type HeroVariant };

package/dist/Icon/Icon.d.mts

@@ -0,0 +1,47 @@
+import { IconName, iconMap } from "./icon-registry.generated.mjs";
+import React from "react";
+//#region src/Icon/Icon.d.ts
+type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+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>
+ * ```
+ */
+declare const Icon: React.ForwardRefExoticComponent<IconProps & React.RefAttributes<SVGSVGElement>>;
+//#endregion
+export { Icon, type IconName, IconProps, IconSize, iconMap };
+//# sourceMappingURL=Icon.d.mts.map

package/dist/Icon/Icon.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.mts","names":[],"sources":["../../src/Icon/Icon.tsx"],"mappings":";;;KASY;UAEK,kBAAkB,KACjC,MAAM,cAAc;;;;EAMpB,MAAM;;;;;EAMN,OAAO;;;;EAKP;;;;;EAMA;;;;;;;;;;;;;;;;;;;;;cAsBW,MAAI,MAAA,0BAAA,YAAA,MAAA,cAAA"}

package/dist/Icon/Icon2.mjs

@@ -0,0 +1,47 @@
+import { iconMap } from "./icon-registry.generated.mjs";
+/* empty css      */
+import React from "react";
+import { classNames } from "@dsn-starter-kit/core";
+import { jsx } from "react/jsx-runtime";
+//#region src/Icon/Icon.tsx
+/**
+* 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>
+* ```
+*/
+const Icon = React.forwardRef(({ name, size = "md", className, "aria-label": ariaLabel, ...props }, ref) => {
+	const IconComponent = iconMap[name];
+	if (!IconComponent) {
+		if (process.env.NODE_ENV !== "production") console.warn(`[DSN Icon] Icon "${name}" not found. Available icons: ${Object.keys(iconMap).join(", ")}`);
+		return null;
+	}
+	const classes = classNames("dsn-icon", size !== "md" && `dsn-icon--${size}`, className);
+	return /* @__PURE__ */ jsx(IconComponent, {
+		ref,
+		className: classes,
+		...ariaLabel ? {
+			"aria-label": ariaLabel,
+			role: "img"
+		} : { "aria-hidden": true },
+		...props
+	});
+});
+Icon.displayName = "Icon";
+//#endregion
+export { Icon, iconMap };
+
+//# sourceMappingURL=Icon2.mjs.map

package/dist/Icon/Icon2.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon2.mjs","names":[],"sources":["../../src/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport { classNames } from '@dsn-starter-kit/core';\nimport { iconMap } from './icon-registry.generated';\nimport type { IconName } from './icon-registry.generated';\n\nimport './Icon.css';\n\nexport type { IconName };\nexport { iconMap };\nexport type IconSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';\n\nexport interface IconProps extends Omit<\n  React.SVGAttributes<SVGSVGElement>,\n  'name'\n> {\n  /**\n   * Icon name from Tabler Icons\n   */\n  name: IconName;\n\n  /**\n   * Icon size variant\n   * @default 'md'\n   */\n  size?: IconSize;\n\n  /**\n   * Additional CSS class names\n   */\n  className?: string;\n\n  /**\n   * Accessible label for the icon\n   * If not provided, icon is marked as decorative (aria-hidden=\"true\")\n   */\n  'aria-label'?: string;\n}\n\n/**\n * Icon component using individual Tabler Icon SVG imports\n * Only icons you use will be included in your bundle (tree-shaking)\n *\n * @example\n * ```tsx\n * // Decorative icon (no label needed)\n * <Icon name=\"check\" size=\"md\" />\n *\n * // Standalone icon (needs label)\n * <Icon name=\"settings\" size=\"lg\" aria-label=\"Open settings\" />\n *\n * // Icon with text (mark as decorative)\n * <span>\n *   <Icon name=\"check\" size=\"sm\" />\n *   Task complete\n * </span>\n * ```\n */\nexport const Icon = React.forwardRef<SVGSVGElement, IconProps>(\n  (\n    { name, size = 'md', className, 'aria-label': ariaLabel, ...props },\n    ref\n  ) => {\n    const IconComponent = iconMap[name];\n\n    if (!IconComponent) {\n      if (process.env.NODE_ENV !== 'production') {\n        console.warn(\n          `[DSN Icon] Icon \"${name}\" not found. Available icons: ${Object.keys(iconMap).join(', ')}`\n        );\n      }\n      return null;\n    }\n\n    const classes = classNames(\n      'dsn-icon',\n      size !== 'md' && `dsn-icon--${size}`,\n      className\n    );\n\n    // If no aria-label is provided, mark as decorative\n    const ariaProps = ariaLabel\n      ? { 'aria-label': ariaLabel, role: 'img' }\n      : { 'aria-hidden': true };\n\n    return (\n      <IconComponent ref={ref} className={classes} {...ariaProps} {...props} />\n    );\n  }\n);\n\nIcon.displayName = 'Icon';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAyDA,MAAa,OAAO,MAAM,YAEtB,EAAE,MAAM,OAAO,MAAM,WAAW,cAAc,WAAW,GAAG,SAC5D,QACG;CACH,MAAM,gBAAgB,QAAQ;CAE9B,IAAI,CAAC,eAAe;EAClB,IAAI,QAAQ,IAAI,aAAa,cAC3B,QAAQ,KACN,oBAAoB,KAAK,gCAAgC,OAAO,KAAK,OAAO,CAAC,CAAC,KAAK,IAAI,GACzF;EAEF,OAAO;CACT;CAEA,MAAM,UAAU,WACd,YACA,SAAS,QAAQ,aAAa,QAC9B,SACF;CAOA,OACE,oBAAC,eAAD;EAAoB;EAAK,WAAW;EAAS,GAL7B,YACd;GAAE,cAAc;GAAW,MAAM;EAAM,IACvC,EAAE,eAAe,KAAK;EAGoC,GAAI;CAAQ,CAAA;AAE5E,CACF;AAEA,KAAK,cAAc"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"icon-registry.generated.d.mts","names":[],"sources":["../../src/Icon/icon-registry.generated.ts"],"mappings":";;KAOY,gBAAgB,MAAM,0BAChC,MAAM,SAAS,iBAAiB,MAAM,cAAc;KA6hB1C;cAqDC,SAAS,OAAO,UAAU"}