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

package/dist/ButtonLink/ButtonLink.js

@@ -1,50 +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 './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

@@ -1 +0,0 @@
-{"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

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

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

@@ -1 +0,0 @@
-{"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

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

package/dist/ButtonLink/index.js.map

@@ -1 +0,0 @@
-{"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

@@ -1,169 +0,0 @@
-/* =============================================================================
-   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

@@ -1,105 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

@@ -1,80 +0,0 @@
-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

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

package/dist/Card/index.d.ts

@@ -1,3 +0,0 @@
-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

@@ -1 +0,0 @@
-{"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

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

package/dist/Card/index.js.map

@@ -1 +0,0 @@
-{"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"}