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

package/dist/SummaryList/SummaryList.css

@@ -1,151 +0,0 @@
-/**
- * SummaryList Component
- * Displays information as key-value pairs, typically at the end of a form
- * ("check your answers") or as a metadata overview.
- *
- * Usage:
- * <!-- Basic (no actions) -->
- * <dl class="dsn-summary-list">
- *   <div class="dsn-summary-list__row">
- *     <dt class="dsn-summary-list__key">Name</dt>
- *     <dd class="dsn-summary-list__value">Sarah Hendricks</dd>
- *   </div>
- * </dl>
- *
- * <!-- With actions -->
- * <dl class="dsn-summary-list">
- *   <div class="dsn-summary-list__row">
- *     <dt class="dsn-summary-list__key">Name</dt>
- *     <dd class="dsn-summary-list__value">Sarah Hendricks</dd>
- *     <dd class="dsn-summary-list__actions">
- *       <a class="dsn-link" href="#">Change <span class="dsn-visually-hidden"> name</span></a>
- *     </dd>
- *   </div>
- * </dl>
- *
- * <!-- Mixed list: row without actions uses --no-actions for consistent column alignment -->
- * <dl class="dsn-summary-list">
- *   <div class="dsn-summary-list__row">...</div>
- *   <div class="dsn-summary-list__row dsn-summary-list__row--no-actions">
- *     <dt class="dsn-summary-list__key">Reference</dt>
- *     <dd class="dsn-summary-list__value">ABC-123</dd>
- *   </div>
- * </dl>
- */
-
-/* ===========================
-   Root container
-   =========================== */
-.dsn-summary-list {
-  margin: 0;
-  padding: 0;
-}
-
-/* ===========================
-   Row
-   =========================== */
-.dsn-summary-list__row {
-  display: flex;
-  flex-direction: column;
-  padding-block: var(--dsn-summary-list-row-padding-block);
-  border-block-end: var(--dsn-summary-list-row-border-block-end-width) solid
-    var(--dsn-summary-list-row-border-block-end-color);
-}
-
-.dsn-summary-list__row:first-child {
-  border-block-start: var(--dsn-summary-list-row-border-block-end-width) solid
-    var(--dsn-summary-list-row-border-block-end-color);
-}
-
-/* ===========================
-   Key cell
-   =========================== */
-.dsn-summary-list__key {
-  margin: 0;
-  color: var(--dsn-summary-list-key-color);
-  font-weight: var(--dsn-summary-list-key-font-weight);
-}
-
-/* ===========================
-   Value cell
-   =========================== */
-.dsn-summary-list__value {
-  margin: 0;
-  color: var(--dsn-summary-list-value-color);
-}
-
-/* ===========================
-   Actions cell
-   =========================== */
-.dsn-summary-list__actions {
-  display: flex;
-  margin: 0;
-  margin-block-start: var(
-    --dsn-summary-list-actions-margin-block-start-stacked
-  );
-}
-
-/* ===========================
-   Multiple actions list
-   =========================== */
-.dsn-summary-list__actions-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--dsn-summary-list-actions-gap);
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.dsn-summary-list__actions-list-item {
-  display: flex;
-  margin: 0;
-  padding: 0;
-}
-
-/* ===========================
-   No-border modifier
-   =========================== */
-.dsn-summary-list--no-border .dsn-summary-list__row,
-.dsn-summary-list--no-border .dsn-summary-list__row:first-child {
-  border: none;
-}
-
-/* ===========================
-   Wide layout: CSS Grid with subgrid
-   key (~30%) | value (1fr) | actions (auto)
-   =========================== */
-@media (min-width: 44em) {
-  .dsn-summary-list {
-    display: grid;
-    grid-template-columns:
-      var(--dsn-summary-list-key-basis)
-      1fr
-      auto;
-  }
-
-  .dsn-summary-list__row {
-    grid-column: 1 / -1;
-    display: grid;
-    grid-template-columns: subgrid;
-    align-items: baseline;
-    flex-direction: unset;
-    gap: 0 var(--dsn-summary-list-row-gap);
-  }
-
-  .dsn-summary-list__key {
-    grid-column: 1;
-  }
-
-  .dsn-summary-list__value {
-    grid-column: 2;
-  }
-
-  .dsn-summary-list__actions {
-    grid-column: 3;
-    margin-block-start: 0;
-    align-self: start;
-    justify-content: end;
-  }
-}
-

package/dist/SummaryList/SummaryList.d.ts

@@ -1,49 +0,0 @@
-import React from 'react';
-import './SummaryList.css';
-export interface SummaryListProps extends React.HTMLAttributes<HTMLDListElement> {
-    /**
-     * Removes the row separator borders
-     * @default false
-     */
-    noBorder?: boolean;
-    /**
-     * `SummaryListRow` elements
-     */
-    children?: React.ReactNode;
-}
-export declare const SummaryList: React.ForwardRefExoticComponent<SummaryListProps & React.RefAttributes<HTMLDListElement>>;
-export interface SummaryListRowProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Marks a row without an actions cell; ensures consistent column alignment
-     * in mixed lists where some rows have actions and others do not.
-     * @default false
-     */
-    noActions?: boolean;
-    /**
-     * `SummaryListKey`, `SummaryListValue`, and optionally `SummaryListActions`
-     */
-    children?: React.ReactNode;
-}
-export declare const SummaryListRow: React.ForwardRefExoticComponent<SummaryListRowProps & React.RefAttributes<HTMLDivElement>>;
-export interface SummaryListKeyProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Label text or content
-     */
-    children?: React.ReactNode;
-}
-export declare const SummaryListKey: React.ForwardRefExoticComponent<SummaryListKeyProps & React.RefAttributes<HTMLElement>>;
-export interface SummaryListValueProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Value content; may contain text, a `Link`, or other inline elements
-     */
-    children?: React.ReactNode;
-}
-export declare const SummaryListValue: React.ForwardRefExoticComponent<SummaryListValueProps & React.RefAttributes<HTMLElement>>;
-export interface SummaryListActionsProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * One or more `Link` or `LinkButton` components
-     */
-    children?: React.ReactNode;
-}
-export declare const SummaryListActions: React.ForwardRefExoticComponent<SummaryListActionsProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=SummaryList.d.ts.map

package/dist/SummaryList/SummaryList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SummaryList.d.ts","sourceRoot":"","sources":["../../src/SummaryList/SummaryList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAM3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,WAAW,2FAcvB,CAAC;AAQF,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/E;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,4FAezB,CAAC;AAQH,MAAM,WAAW,mBAAoB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC5E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,cAAc,yFAWzB,CAAC;AAQH,MAAM,WAAW,qBAAsB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9E;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,2FAW3B,CAAC;AAQH,MAAM,WAAW,uBAAwB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAChF;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,kBAAkB,6FAqB7B,CAAC"}

package/dist/SummaryList/SummaryList.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './SummaryList.css';
-export const SummaryList = React.forwardRef(({ className, noBorder = false, children, ...props }, ref) => {
-    const classes = classNames('dsn-summary-list', noBorder && 'dsn-summary-list--no-border', className);
-    return (_jsx("dl", { ref: ref, className: classes, ...props, children: children }));
-});
-SummaryList.displayName = 'SummaryList';
-export const SummaryListRow = React.forwardRef(({ className, noActions = false, children, ...props }, ref) => {
-    const classes = classNames('dsn-summary-list__row', noActions && 'dsn-summary-list__row--no-actions', className);
-    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
-});
-SummaryListRow.displayName = 'SummaryListRow';
-export const SummaryListKey = React.forwardRef(({ className, children, ...props }, ref) => {
-    const classes = classNames('dsn-summary-list__key', className);
-    return (_jsx("dt", { ref: ref, className: classes, ...props, children: children }));
-});
-SummaryListKey.displayName = 'SummaryListKey';
-export const SummaryListValue = React.forwardRef(({ className, children, ...props }, ref) => {
-    const classes = classNames('dsn-summary-list__value', className);
-    return (_jsx("dd", { ref: ref, className: classes, ...props, children: children }));
-});
-SummaryListValue.displayName = 'SummaryListValue';
-export const SummaryListActions = React.forwardRef(({ className, children, ...props }, ref) => {
-    const classes = classNames('dsn-summary-list__actions', className);
-    const isMultiple = React.Children.count(children) > 1;
-    return (_jsx("dd", { ref: ref, className: classes, ...props, children: isMultiple ? (_jsx("ul", { className: "dsn-summary-list__actions-list", children: React.Children.map(children, (child) => (_jsx("li", { className: "dsn-summary-list__actions-list-item", children: child }))) })) : (children) }));
-});
-SummaryListActions.displayName = 'SummaryListActions';
-//# sourceMappingURL=SummaryList.js.map

package/dist/SummaryList/SummaryList.js.map

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

package/dist/SummaryList/index.d.ts

@@ -1,3 +0,0 @@
-export { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions, } from './SummaryList';
-export type { SummaryListProps, SummaryListRowProps, SummaryListKeyProps, SummaryListValueProps, SummaryListActionsProps, } from './SummaryList';
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,eAAe,CAAC;AAEvB,YAAY,EACV,gBAAgB,EAChB,mBAAmB,EACnB,mBAAmB,EACnB,qBAAqB,EACrB,uBAAuB,GACxB,MAAM,eAAe,CAAC"}

package/dist/SummaryList/index.js

@@ -1,2 +0,0 @@
-export { SummaryList, SummaryListRow, SummaryListKey, SummaryListValue, SummaryListActions, } from './SummaryList';
-//# sourceMappingURL=index.js.map

package/dist/SummaryList/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SummaryList/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,WAAW,EACX,cAAc,EACd,cAAc,EACd,gBAAgB,EAChB,kBAAkB,GACnB,MAAM,eAAe,CAAC"}

package/dist/Table/Table.css

@@ -1,243 +0,0 @@
-/* ===== Scroll-wrapper ===== */
-/*
- * Scroll-affordance schaduw (Lea Verou techniek):
- * - Dekkende overlagen (background-attachment: local) scrollen mee met de content
- *   en verbergen de schaduwen wanneer je aan het begin of einde bent.
- * - Schaduw-overlagen (background-attachment: scroll) blijven gefixeerd aan de viewport
- *   van de wrapper en zijn altijd aanwezig.
- * - Resultaat: schaduw is zichtbaar zodra er content is om naartoe te scrollen,
- *   en verdwijnt automatisch als je de rand bereikt.
- *
- * ⚠️ Vereist dat --dsn-table-wrapper-background-color overeenkomt met de omringende
- * pagina-achtergrond. Overschrijf dit token als de tabel op een gekleurde achtergrond staat.
- * Overschrijf --dsn-table-wrapper-scroll-shadow-color als je een andere schaduwkleur wilt.
- */
-
-.dsn-table-wrapper {
-  /* Lokale variabelen zodat de waarden maar één keer herhaald hoeven te worden. */
-  --_bg: var(
-    --dsn-table-wrapper-background-color,
-    var(--dsn-color-neutral-bg-document)
-  );
-  --_shadow: var(
-    --dsn-table-wrapper-scroll-shadow-color,
-    var(--dsn-color-shadow-scroll)
-  );
-
-  overflow-x: auto;
-  background-color: var(--_bg);
-  background-image:
-    /* Start-cover (local): verbergt de startschaduw als je helemaal links bent */
-    linear-gradient(to right, var(--_bg) 0%, transparent 100%),
-    /* Einde-cover (local): verbergt de eindschaduw als je helemaal rechts bent */
-    linear-gradient(to left, var(--_bg) 0%, transparent 100%),
-    /* Startschaduw (scroll): altijd aanwezig, gedekt door de start-cover zolang je links bent */
-    linear-gradient(to right, var(--_shadow) 0%, transparent 100%),
-    /* Eindschaduw (scroll): altijd aanwezig, gedekt door de einde-cover zolang je rechts bent */
-    linear-gradient(to left, var(--_shadow) 0%, transparent 100%);
-  background-repeat: no-repeat;
-  /* Cover (4rem) is breder dan de schaduw (2rem) zodat hij volledig dekt bij rust */
-  background-size:
-    4rem 100%,
-    4rem 100%,
-    2rem 100%,
-    2rem 100%;
-  background-position: left, right, left, right;
-  background-attachment: local, local, scroll, scroll;
-}
-
-/* ===== Tabel basis ===== */
-
-.dsn-table {
-  border-collapse: collapse;
-  inline-size: 100%;
-  font-size: inherit;
-}
-
-/* ===== Caption ===== */
-
-.dsn-table__caption {
-  caption-side: top;
-  text-align: start;
-  padding-block-end: var(--dsn-table-cell-padding-block-end);
-  color: var(--dsn-table-caption-color);
-  font-family: var(--dsn-table-caption-font-family);
-  font-size: var(--dsn-table-caption-font-size);
-  font-weight: var(--dsn-table-caption-font-weight);
-  line-height: var(--dsn-table-caption-line-height);
-}
-
-/* ===== Header (thead) ===== */
-
-.dsn-table thead {
-  background-color: var(--dsn-table-header-background-color);
-  color: var(--dsn-table-header-color);
-}
-
-.dsn-table thead tr {
-  border-block-end: var(--dsn-table-header-border-block-end-width) solid
-    var(--dsn-table-header-border-block-end-color);
-}
-
-.dsn-table thead th {
-  padding-block-start: var(--dsn-table-cell-padding-block-start);
-  padding-block-end: var(--dsn-table-cell-padding-block-end);
-  padding-inline-start: var(--dsn-table-cell-padding-inline-start);
-  padding-inline-end: var(--dsn-table-cell-padding-inline-end);
-  font-weight: var(--dsn-table-header-cell-font-weight);
-  text-align: start;
-  /* middle i.p.v. bottom: zorgt voor consistente uitlijning tussen
-   * kolomkoppen met én zonder sorteerknop */
-  vertical-align: middle;
-}
-
-/* ===== Body (tbody) ===== */
-
-.dsn-table tbody tr {
-  border-block-end: var(--dsn-table-row-border-block-end-width) solid
-    var(--dsn-table-row-border-block-end-color);
-}
-
-.dsn-table tbody td,
-.dsn-table tbody th {
-  padding-block-start: var(--dsn-table-cell-padding-block-start);
-  padding-block-end: var(--dsn-table-cell-padding-block-end);
-  padding-inline-start: var(--dsn-table-cell-padding-inline-start);
-  padding-inline-end: var(--dsn-table-cell-padding-inline-end);
-  text-align: start;
-  vertical-align: middle;
-}
-
-/* Rijkoppen (th scope="row") krijgen hetzelfde gewicht als kolomkoppen */
-.dsn-table tbody th {
-  font-weight: var(--dsn-table-header-cell-font-weight);
-}
-
-/* ===== Footer (tfoot) ===== */
-
-.dsn-table tfoot {
-  background-color: var(--dsn-table-footer-background-color);
-  color: var(--dsn-table-footer-color);
-}
-
-.dsn-table tfoot tr {
-  border-block-start: var(--dsn-table-footer-border-block-start-width) solid
-    var(--dsn-table-footer-border-block-start-color);
-}
-
-.dsn-table tfoot td,
-.dsn-table tfoot th {
-  padding-block-start: var(--dsn-table-cell-padding-block-start);
-  padding-block-end: var(--dsn-table-cell-padding-block-end);
-  padding-inline-start: var(--dsn-table-cell-padding-inline-start);
-  padding-inline-end: var(--dsn-table-cell-padding-inline-end);
-  font-weight: var(--dsn-table-footer-font-weight);
-  text-align: start;
-  vertical-align: middle;
-}
-
-/* ===== Kolomhoofd-inhoud (sorteerbaar) ===== */
-/*
- * Flexbox-wrapper binnenin een sorteerbare <th>.
- * Plaatst de kolomtekst links en de icon-only sorteerknop rechts naast elkaar.
- *
- * HTML-patroon:
- * <th scope="col" aria-sort="ascending">
- *   <span class="dsn-table__header-content">
- *     Naam
- *     <button
- *       class="dsn-button dsn-button--size-small dsn-button--subtle dsn-button--icon-only dsn-table__sort-button"
- *       type="button"
- *       aria-label="Sorteer op Naam"
- *     >
- *       <svg class="dsn-icon dsn-table__sort-icon--none" aria-hidden="true">...</svg>
- *       <svg class="dsn-icon dsn-table__sort-icon--ascending" aria-hidden="true">...</svg>
- *       <svg class="dsn-icon dsn-table__sort-icon--descending" aria-hidden="true">...</svg>
- *     </button>
- *   </span>
- * </th>
- */
-
-.dsn-table__header-content {
-  display: flex;
-  align-items: center;
-  gap: var(--dsn-space-inline-sm);
-}
-
-/* In numerieke kolommen de hele header-content rechts uitlijnen,
- * zodat de kolomtitel en het sorteerknopje uitlijnen met de data eronder. */
-.dsn-table .dsn-table__cell--numeric .dsn-table__header-content {
-  justify-content: flex-end;
-}
-
-/* ===== Sorteerknop ===== */
-/*
- * Aanvullende klasse op dsn-button dsn-button--size-small dsn-button--subtle dsn-button--icon-only.
- * Voorkomt dat de knop inkrimpt in smalle kolommen.
- */
-
-.dsn-table__sort-button {
-  flex-shrink: 0;
-}
-
-/* ===== Sorteericoon — drie staten via aria-sort op de th ===== */
-
-.dsn-table__sort-icon--none,
-.dsn-table__sort-icon--ascending,
-.dsn-table__sort-icon--descending {
-  display: none;
-}
-
-[aria-sort='none'] .dsn-table__sort-icon--none {
-  display: inline-flex;
-}
-
-[aria-sort='ascending'] .dsn-table__sort-icon--ascending {
-  display: inline-flex;
-}
-
-[aria-sort='descending'] .dsn-table__sort-icon--descending {
-  display: inline-flex;
-}
-
-/* ===== Numerieke cellen ===== */
-/*
- * Gebruik op <th> en <td> voor kolommen met cijfers of geldbedragen.
- * Tabular-nums zorgt voor consistente cijferbreedte zodat komma's en
- * decimalen netjes uitlijnen bij vergelijking.
- *
- * ⚠️ Dubbele klasse-selector (.dsn-table .dsn-table__cell--numeric) is nodig
- * om de text-align: start op .dsn-table tbody td (specificiteit 0,1,2) te
- * overwinnen. Deze selector heeft specificiteit 0,2,0 en wint daarmee.
- */
-
-.dsn-table .dsn-table__cell--numeric {
-  text-align: end;
-  font-variant-numeric: tabular-nums;
-}
-
-/* ===== Inline-componenten in tabelcellen ===== */
-/*
- * Inline-flex elementen (zoals .dsn-checkbox) gebruiken baseline-uitlijning
- * binnen de inline formatting context van een tabelcel. Dit veroorzaakt een
- * kleine verticale offset ondanks vertical-align: middle op de <td>/<th>.
- * Door vertical-align: middle ook op het element zelf te zetten, wordt het
- * uitgelijnd op de helft van de x-hoogte van de cel — wat visueel klopt.
- */
-
-.dsn-table td .dsn-checkbox,
-.dsn-table th .dsn-checkbox {
-  vertical-align: middle;
-}
-
-/* ===== Selecteerbare rijen ===== */
-/*
- * Zet aria-selected="true" op <tr> om een rij als geselecteerd te markeren.
- * Gebruik in combinatie met een checkbox in de eerste kolom.
- */
-
-.dsn-table tbody tr[aria-selected='true'] {
-  background-color: var(--dsn-color-neutral-bg-active);
-  color: var(--dsn-color-neutral-color-active);
-}
-

package/dist/Table/Table.d.ts

@@ -1,61 +0,0 @@
-import React from 'react';
-import './Table.css';
-export type TableProps = React.HTMLAttributes<HTMLTableElement> & {
-    /**
-     * Zichtbaar bijschrift boven de tabel.
-     * Dient ook als toegankelijke naam van de tabel voor schermlezers.
-     */
-    caption: string;
-    /**
-     * Optionele ID voor de caption.
-     * Standaard auto-gegenereerd via `useId()`.
-     * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.
-     */
-    captionId?: string;
-    /**
-     * Wikkelt de tabel in een scroll-container (`role="region"`, `tabIndex={0}`, `aria-labelledby`).
-     * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.
-     */
-    scrollable?: boolean;
-};
-/**
- * Tabel component voor het weergeven van tweedimensionale tabeldata.
- *
- * Gebruik altijd `<th scope="col">` voor kolomkoppen en `<th scope="row">` voor rijkoppen.
- * Voeg `<tfoot>` toe via children voor een optionele totaal- of samenvattingsrij.
- *
- * @example
- * <Table caption="Productoverzicht">
- *   <thead>
- *     <tr>
- *       <th scope="col">Product</th>
- *       <th scope="col">Prijs</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <th scope="row">Laptop</th>
- *       <td>€999</td>
- *     </tr>
- *   </tbody>
- * </Table>
- */
-export declare const Table: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLTableElement> & {
-    /**
-     * Zichtbaar bijschrift boven de tabel.
-     * Dient ook als toegankelijke naam van de tabel voor schermlezers.
-     */
-    caption: string;
-    /**
-     * Optionele ID voor de caption.
-     * Standaard auto-gegenereerd via `useId()`.
-     * Wordt gebruikt voor `aria-labelledby` op de scroll-wrapper.
-     */
-    captionId?: string;
-    /**
-     * Wikkelt de tabel in een scroll-container (`role="region"`, `tabIndex={0}`, `aria-labelledby`).
-     * Gebruik dit voor tabellen die mogelijk breder zijn dan hun container.
-     */
-    scrollable?: boolean;
-} & React.RefAttributes<HTMLTableElement>>;
-//# sourceMappingURL=Table.d.ts.map

package/dist/Table/Table.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC,GAAG;IAChE;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK;IAxChB;;;OAGG;aACM,MAAM;IACf;;;;OAIG;gBACS,MAAM;IAClB;;;OAGG;iBACU,OAAO;0CAoErB,CAAC"}

package/dist/Table/Table.js

@@ -1,37 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId } from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Table.css';
-/**
- * Tabel component voor het weergeven van tweedimensionale tabeldata.
- *
- * Gebruik altijd `<th scope="col">` voor kolomkoppen en `<th scope="row">` voor rijkoppen.
- * Voeg `<tfoot>` toe via children voor een optionele totaal- of samenvattingsrij.
- *
- * @example
- * <Table caption="Productoverzicht">
- *   <thead>
- *     <tr>
- *       <th scope="col">Product</th>
- *       <th scope="col">Prijs</th>
- *     </tr>
- *   </thead>
- *   <tbody>
- *     <tr>
- *       <th scope="row">Laptop</th>
- *       <td>€999</td>
- *     </tr>
- *   </tbody>
- * </Table>
- */
-export const Table = React.forwardRef(({ caption, captionId: captionIdProp, scrollable = false, children, className, ...props }, ref) => {
-    const autoId = useId();
-    const captionId = captionIdProp ?? `dsn-table-caption-${autoId}`;
-    const table = (_jsxs("table", { ref: ref, className: classNames('dsn-table', className), ...props, children: [_jsx("caption", { id: captionId, className: "dsn-table__caption", children: caption }), children] }));
-    if (scrollable) {
-        return (_jsx("div", { className: "dsn-table-wrapper", role: "region", "aria-labelledby": captionId, tabIndex: 0, children: table }));
-    }
-    return table;
-});
-Table.displayName = 'Table';
-//# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Table.js","sourceRoot":"","sources":["../../src/Table/Table.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,aAAa,CAAC;AAqBrB;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CACE,EACE,OAAO,EACP,SAAS,EAAE,aAAa,EACxB,UAAU,GAAG,KAAK,EAClB,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,MAAM,GAAG,KAAK,EAAE,CAAC;IACvB,MAAM,SAAS,GAAG,aAAa,IAAI,qBAAqB,MAAM,EAAE,CAAC;IAEjE,MAAM,KAAK,GAAG,CACZ,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,WAAW,EAAE,SAAS,CAAC,KACzC,KAAK,aAET,kBAAS,EAAE,EAAE,SAAS,EAAE,SAAS,EAAC,oBAAoB,YACnD,OAAO,GACA,EACT,QAAQ,IACH,CACT,CAAC;IAEF,IAAI,UAAU,EAAE,CAAC;QACf,OAAO,CACL,cACE,SAAS,EAAC,mBAAmB,EAC7B,IAAI,EAAC,QAAQ,qBACI,SAAS,EAC1B,QAAQ,EAAE,CAAC,YAEV,KAAK,GACF,CACP,CAAC;IACJ,CAAC;IAED,OAAO,KAAK,CAAC;AACf,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Table/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Table/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC"}

package/dist/Table/index.js

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

package/dist/Table/index.js.map

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