@dsn-starter-kit/components-react 1.0.0

package/dist/ButtonLink/ButtonLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/ButtonLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,GACjB,SAAS,GACT,kBAAkB,GAClB,kBAAkB,GAClB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACpF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,2FAiEtB,CAAC"}

package/dist/ButtonLink/ButtonLink.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './ButtonLink.css';
+/**
+ * ButtonLink — semantically an <a>, visually styled as a Button.
+ *
+ * Use when an action navigates to a URL but needs the visual prominence of a Button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (strong, default size)
+ * <ButtonLink href="/volgende">Volgende stap</ButtonLink>
+ *
+ * // Subtle variant
+ * <ButtonLink href="/" variant="subtle">Terug naar overzicht</ButtonLink>
+ *
+ * // With icon
+ * <ButtonLink href="/download" iconStart={<Icon name="download" aria-hidden />}>
+ *   Download rapport
+ * </ButtonLink>
+ *
+ * // Icon-only
+ * <ButtonLink href="/info" iconOnly iconStart={<Icon name="info-circle" aria-hidden />}>
+ *   Meer informatie
+ * </ButtonLink>
+ *
+ * // Disabled
+ * <ButtonLink href="/dashboard" disabled>Niet beschikbaar</ButtonLink>
+ *
+ * // Opens in new tab with visible hint
+ * <ButtonLink href="https://example.com" external>Externe pagina</ButtonLink>
+ * ```
+ */
+export const ButtonLink = React.forwardRef(({ href, variant = 'strong', size = 'default', fullWidth = false, iconOnly = false, iconStart, iconEnd, disabled = false, external = false, className, target, rel, tabIndex, children, onClick, ...props }, ref) => {
+    const classes = classNames('dsn-button', `dsn-button--${variant}`, `dsn-button--size-${size}`, fullWidth && 'dsn-button--full-width', iconOnly && 'dsn-button--icon-only', 'dsn-button-link', className);
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    // External links: set target and rel automatically, unless explicitly overridden
+    const resolvedTarget = external ? (target ?? '_blank') : target;
+    const resolvedRel = external ? (rel ?? 'noopener noreferrer') : rel;
+    return (_jsxs("a", { ref: ref, className: classes, href: disabled ? undefined : href, target: resolvedTarget, rel: resolvedRel, tabIndex: disabled ? -1 : tabIndex, "aria-disabled": disabled || undefined, onClick: handleClick, ...props, children: [iconStart, children !== undefined && children !== null && (_jsx("span", { className: "dsn-button__label", children: children })), external && ' (opent nieuw tabblad)', iconEnd] }));
+});
+ButtonLink.displayName = 'ButtonLink';
+//# sourceMappingURL=ButtonLink.js.map

package/dist/ButtonLink/ButtonLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ButtonLink.js","sourceRoot":"","sources":["../../src/ButtonLink/ButtonLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAkF1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,IAAI,EACJ,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,SAAS,EAChB,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,OAAO,EACP,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,MAAM,EACN,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,YAAY,EACZ,eAAe,OAAO,EAAE,EACxB,oBAAoB,IAAI,EAAE,EAC1B,SAAS,IAAI,wBAAwB,EACrC,QAAQ,IAAI,uBAAuB,EACnC,iBAAiB,EACjB,SAAS,CACV,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,CAAsC,EAAE,EAAE;QAC7D,IAAI,QAAQ,EAAE,CAAC;YACb,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,OAAO;QACT,CAAC;QACD,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC;IACf,CAAC,CAAC;IAEF,iFAAiF;IACjF,MAAM,cAAc,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IAChE,MAAM,WAAW,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,qBAAqB,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;IAEpE,OAAO,CACL,aACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,EACjC,MAAM,EAAE,cAAc,EACtB,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,mBACnB,QAAQ,IAAI,SAAS,EACpC,OAAO,EAAE,WAAW,KAChB,KAAK,aAER,SAAS,EACT,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,IAAI,CAC9C,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,CACtD,EACA,QAAQ,IAAI,wBAAwB,EACpC,OAAO,IACN,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/ButtonLink/index.d.ts

@@ -0,0 +1,3 @@
+export { ButtonLink } from './ButtonLink';
+export type { ButtonLinkProps, ButtonLinkVariant, ButtonLinkSize, } from './ButtonLink';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EACV,eAAe,EACf,iBAAiB,EACjB,cAAc,GACf,MAAM,cAAc,CAAC"}

package/dist/ButtonLink/index.js

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

package/dist/ButtonLink/index.js.map

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

package/dist/Card/Card.css

@@ -0,0 +1,169 @@
+/* =============================================================================
+   Card
+   Configureerbare container voor gestructureerde content met header, body en footer.
+   Stretched-link techniek: ::before pseudo-element van de CardHeading link dekt de
+   volledige card — screenreaders lezen alleen de heading-tekst als linknaam.
+   ============================================================================= */
+
+/* Card — root container */
+.dsn-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--dsn-card-background-color);
+  border: var(--dsn-card-border-width) solid var(--dsn-card-border-color);
+  border-radius: var(--dsn-card-border-radius);
+  box-shadow: var(--dsn-card-box-shadow);
+  overflow: hidden;
+  margin-block-start: 0;
+  transition:
+    background-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    box-shadow var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+/* Hover: verhoogde achtergrond en schaduw benadrukken interactiviteit */
+.dsn-card:has(.dsn-card-heading__link:hover) {
+  background-color: var(--dsn-card-background-color-hover);
+  box-shadow: var(--dsn-card-box-shadow-hover);
+}
+
+/* Focus: focus-ring rondom de gehele card — zelfde tokens als Button en Link */
+.dsn-card:has(.dsn-card-heading__link:focus-visible) {
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+  box-shadow: 0 0 0
+    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
+    var(--dsn-focus-inverse-outline-color);
+}
+
+/* Card header — geen padding; afbeelding gaat edge-to-edge */
+.dsn-card__header {
+  flex-shrink: 0;
+}
+
+/* Afbeelding in header: bovenste hoeken volgen card border-radius, onderkant recht */
+.dsn-card__header > .dsn-image .dsn-image__img {
+  border-start-start-radius: var(--dsn-card-border-radius);
+  border-start-end-radius: var(--dsn-card-border-radius);
+  border-end-start-radius: 0;
+  border-end-end-radius: 0;
+}
+
+/* Card body — groeit zodat footer altijd onderaan blijft */
+.dsn-card__body {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-card-body-row-gap);
+  padding-block: var(--dsn-card-body-padding-block);
+  padding-inline: var(--dsn-card-body-padding-inline);
+}
+
+/* Inline-elementen in de body (badges, tags) nemen hun eigen breedte — niet full-width */
+.dsn-card__body > .dsn-status-badge,
+.dsn-card__body > .dsn-dot-badge {
+  align-self: flex-start;
+}
+
+/* Card footer — uitgelijnde onderkant */
+.dsn-card__footer {
+  padding-block-end: var(--dsn-card-footer-padding-block-end);
+  padding-inline: var(--dsn-card-footer-padding-inline);
+}
+
+/* Directe kinderen van footer staan boven de stretched link (z-index: 1 van ::before) */
+.dsn-card__footer > * {
+  position: relative;
+  z-index: 2;
+}
+
+/* Afbeeldingsplaceholder — visuele consistentie wanneer geen afbeelding beschikbaar */
+.dsn-card__image-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 16 / 9;
+  background-color: var(--dsn-card-image-placeholder-background-color);
+  color: var(--dsn-card-image-placeholder-color);
+}
+
+/* Placeholder icoon via SVG background-image */
+.dsn-card__image-placeholder::before {
+  content: '';
+  display: block;
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: currentColor;
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='2' ry='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-repeat: no-repeat;
+  mask-position: center;
+  opacity: 0.4;
+}
+
+/* =============================================================================
+   CardHeading — sub-component
+   Heading met stretched link die de volledige card klikbaar maakt.
+   ============================================================================= */
+
+.dsn-card-heading {
+  font-family: var(--dsn-card-heading-font-family);
+  font-size: var(--dsn-card-heading-font-size);
+  font-weight: var(--dsn-card-heading-font-weight);
+  line-height: var(--dsn-card-heading-line-height);
+  color: var(--dsn-card-heading-color);
+  text-wrap: balance;
+  margin-block-start: 0;
+  margin-block-end: 0;
+}
+
+/* Link in de heading — erft kleur en maakt de card klikbaar via stretched link */
+.dsn-card-heading__link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.dsn-card-heading__link:hover {
+  text-decoration: underline;
+}
+
+/* Stretched link: ::before dekt de volledige card */
+.dsn-card-heading__link::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+}
+
+/* Eigen focus-outline uitschakelen — card toont de focus-ring */
+.dsn-card-heading__link:focus-visible {
+  outline: none;
+}
+
+/* =============================================================================
+   CardGroup — layout wrapper
+   Flexbox met gelijke hoogte en automatische kolommen via auto-fill.
+   ============================================================================= */
+
+.dsn-card-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--dsn-card-group-gap);
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.dsn-card-group > * {
+  flex: 1 1 var(--dsn-card-group-item-min-width);
+  min-width: 0;
+  display: flex;
+}
+
+.dsn-card-group > * > .dsn-card {
+  flex: 1;
+}
+

package/dist/Card/Card.d.ts

@@ -0,0 +1,105 @@
+import React from 'react';
+import './Card.css';
+export interface CardProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * URL voor de stretched link. De `CardHeading` ontvangt `href` automatisch
+     * via React context en wraps de heading-tekst in een `<a>`.
+     */
+    href?: string;
+    /** Sub-componenten: `CardHeader`, `CardBody`, `CardFooter` */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * Card component
+ * Configureerbare container voor gestructureerde content met header, body en footer.
+ * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
+ * Screenreaders lezen alleen de heading-tekst als linknaam.
+ *
+ * @example
+ * ```tsx
+ * <Card href="/artikel/slug">
+ *   <CardHeader>
+ *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *   </CardHeader>
+ *   <CardBody>
+ *     <CardHeading level={2}>Artikeltitel</CardHeading>
+ *     <Paragraph>Korte beschrijving.</Paragraph>
+ *   </CardBody>
+ *   <CardFooter>
+ *     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+export declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLElement>>;
+export interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Afbeelding (`Image` component). Zonder children → toont placeholder
+     * met `aspect-ratio: 16 / 9` voor visuele consistentie in groep.
+     */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardHeader sub-component
+ * Zonder children → toont automatisch een afbeeldingsplaceholder.
+ */
+export declare const CardHeader: React.ForwardRefExoticComponent<CardHeaderProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardBodyProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `CardHeading`, optionele extra content (bijv. `StatusBadge`), `Paragraph` */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardBody sub-component
+ * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+ */
+export declare const CardBody: React.ForwardRefExoticComponent<CardBodyProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * Semantisch heading-niveau. Visuele appearance is altijd "card-heading".
+     * @default 2
+     */
+    level?: 2 | 3 | 4;
+    /** Heading-tekst */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardHeading sub-component
+ * Ontvangt `href` automatisch via React context van de parent `Card`.
+ * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+ * Het `::before` pseudo-element dekt de volledige card (stretched link).
+ */
+export declare const CardHeading: React.ForwardRefExoticComponent<CardHeadingProps & React.RefAttributes<HTMLHeadingElement>>;
+export interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** `Link` of `ButtonLink` — staat boven de stretched link via CSS z-index */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardFooter sub-component
+ * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
+ * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
+ * bestemming heeft als de card — vermijdt een dubbele tabstop.
+ */
+export declare const CardFooter: React.ForwardRefExoticComponent<CardFooterProps & React.RefAttributes<HTMLDivElement>>;
+export interface CardGroupProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Semantisch container-element.
+     * Gebruik `div` wanneer cards geen lijst-context hebben.
+     * @default 'ul'
+     */
+    as?: 'ul' | 'div';
+    /** `Card` componenten */
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * CardGroup sub-component
+ * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
+ * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
+ */
+export declare const CardGroup: React.ForwardRefExoticComponent<CardGroupProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=Card.d.ts.map

package/dist/Card/Card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.d.ts","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAgBpB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,IAAI,+EAchB,CAAC;AAQF,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,UAAU,wFAgBtB,CAAC;AAQF,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACzE,gFAAgF;IAChF,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,QAAQ,sFAYpB,CAAC;AAQF,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC;IAChF;;;OAGG;IACH,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAElB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,WAAW,6FAsBtB,CAAC;AAQH,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E,6EAA6E;IAC7E,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,wFAYtB,CAAC;AAQF,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACvE;;;;OAIG;IACH,EAAE,CAAC,EAAE,IAAI,GAAG,KAAK,CAAC;IAElB,yBAAyB;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;GAIG;AACH,eAAO,MAAM,SAAS,oFAerB,CAAC"}

package/dist/Card/Card.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Card.css';
+const CardContext = React.createContext({});
+/**
+ * Card component
+ * Configureerbare container voor gestructureerde content met header, body en footer.
+ * Gebruikt een stretched-link techniek: de link in `CardHeading` dekt de volledige card.
+ * Screenreaders lezen alleen de heading-tekst als linknaam.
+ *
+ * @example
+ * ```tsx
+ * <Card href="/artikel/slug">
+ *   <CardHeader>
+ *     <Image src="/foto.jpg" alt="" width={800} height={450} ratio="16:9" />
+ *   </CardHeader>
+ *   <CardBody>
+ *     <CardHeading level={2}>Artikeltitel</CardHeading>
+ *     <Paragraph>Korte beschrijving.</Paragraph>
+ *   </CardBody>
+ *   <CardFooter>
+ *     <Link href="/artikel/slug" aria-hidden tabIndex={-1}>Lees meer</Link>
+ *   </CardFooter>
+ * </Card>
+ * ```
+ */
+export const Card = React.forwardRef(({ className, href, children, ...props }, ref) => {
+    return (_jsx(CardContext.Provider, { value: { href }, children: _jsx("article", { ref: ref, className: classNames('dsn-card', className), ...props, children: children }) }));
+});
+Card.displayName = 'Card';
+/**
+ * CardHeader sub-component
+ * Zonder children → toont automatisch een afbeeldingsplaceholder.
+ */
+export const CardHeader = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-card__header', className), ...props, children: children ? (children) : (_jsx("div", { className: "dsn-card__image-placeholder", "aria-hidden": "true" })) }));
+});
+CardHeader.displayName = 'CardHeader';
+/**
+ * CardBody sub-component
+ * Groeit via `flex: 1` zodat de footer altijd onderaan uitlijnt.
+ */
+export const CardBody = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-card__body', className), ...props, children: children }));
+});
+CardBody.displayName = 'CardBody';
+/**
+ * CardHeading sub-component
+ * Ontvangt `href` automatisch via React context van de parent `Card`.
+ * Wanneer `href` beschikbaar is, wraps de heading-tekst in een `<a class="dsn-card-heading__link">`.
+ * Het `::before` pseudo-element dekt de volledige card (stretched link).
+ */
+export const CardHeading = React.forwardRef(({ className, level = 2, children, ...props }, ref) => {
+    const { href } = React.useContext(CardContext);
+    const Tag = `h${level}`;
+    return (_jsx(Tag, { ref: ref, className: classNames('dsn-card-heading', className), ...props, children: href ? (_jsx("a", { href: href, className: "dsn-card-heading__link", children: children })) : (children) }));
+});
+CardHeading.displayName = 'CardHeading';
+/**
+ * CardFooter sub-component
+ * Directe kinderen staan boven de stretched link via `z-index: 2` in CSS.
+ * Gebruik `aria-hidden` + `tabIndex={-1}` op de link wanneer deze dezelfde
+ * bestemming heeft als de card — vermijdt een dubbele tabstop.
+ */
+export const CardFooter = React.forwardRef(({ className, children, ...props }, ref) => {
+    return (_jsx("div", { ref: ref, className: classNames('dsn-card__footer', className), ...props, children: children }));
+});
+CardFooter.displayName = 'CardFooter';
+/**
+ * CardGroup sub-component
+ * Flexbox wrapper die gelijke hoogte garandeert en de footer in elke card onderaan uitlijnt.
+ * Rendert `role="list"` wanneer `as="ul"` — nodig omdat CSS-resets de lijstsemantiek verwijderen.
+ */
+export const CardGroup = React.forwardRef(({ className, as: Tag = 'ul', children, ...props }, ref) => {
+    const roleProps = Tag === 'ul' ? { role: 'list' } : {};
+    return (_jsx(Tag, { ref: ref, className: classNames('dsn-card-group', className), ...roleProps, ...props, children: children }));
+});
+CardGroup.displayName = 'CardGroup';
+//# sourceMappingURL=Card.js.map

package/dist/Card/Card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Card.js","sourceRoot":"","sources":["../../src/Card/Card.tsx"],"names":[],"mappings":"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"}

package/dist/Card/index.d.ts

@@ -0,0 +1,3 @@
+export { Card, CardHeader, CardBody, CardHeading, CardFooter, CardGroup, } from './Card';
+export type { CardProps, CardHeaderProps, CardBodyProps, CardHeadingProps, CardFooterProps, CardGroupProps, } from './Card';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,GACV,MAAM,QAAQ,CAAC;AAChB,YAAY,EACV,SAAS,EACT,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,eAAe,EACf,cAAc,GACf,MAAM,QAAQ,CAAC"}

package/dist/Card/index.js

@@ -0,0 +1,2 @@
+export { Card, CardHeader, CardBody, CardHeading, CardFooter, CardGroup, } from './Card';
+//# sourceMappingURL=index.js.map

package/dist/Card/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/Card/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,IAAI,EACJ,UAAU,EACV,QAAQ,EACR,WAAW,EACX,UAAU,EACV,SAAS,GACV,MAAM,QAAQ,CAAC"}