@dsn-starter-kit/components-react 1.0.0

package/dist/Spinner/Spinner.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Spinner.css';
+/**
+ * Spinner component
+ * Cirkelvormige laadindicator voor onbepaalde wachttijden.
+ *
+ * role="status" op de container kondigt de laadtoestand aan bij screenreaders.
+ * Het label is altijd aanwezig — visueel verbergen via hideLabel behoudt toegankelijkheid.
+ *
+ * @example
+ * ```tsx
+ * // Standaard met zichtbaar label
+ * <Spinner label="Laden..." />
+ *
+ * // Grote variant met label onder de spinner
+ * <Spinner size="large" label="Pagina wordt geladen" />
+ *
+ * // Enkel visueel verborgen label (toegankelijk voor screenreaders)
+ * <Spinner label="Laden..." hideLabel />
+ * ```
+ */
+export const Spinner = React.forwardRef(({ className, label, hideLabel = false, size = 'default', ...props }, ref) => {
+    const classes = classNames('dsn-spinner', size === 'large' && 'dsn-spinner--large', className);
+    const labelClasses = classNames('dsn-spinner__label', hideLabel && 'dsn-visually-hidden');
+    return (_jsxs("div", { ref: ref, className: classes, role: "status", ...props, children: [_jsxs("svg", { className: "dsn-spinner__circle", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "dsn-spinner__track", cx: "12", cy: "12", r: "10" }), _jsx("circle", { className: "dsn-spinner__arc", cx: "12", cy: "12", r: "10" })] }), _jsx("span", { className: labelClasses, children: label })] }));
+});
+Spinner.displayName = 'Spinner';
+//# sourceMappingURL=Spinner.js.map

package/dist/Spinner/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,eAAe,CAAC;AA0BvB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,aAAa,EACb,IAAI,KAAK,OAAO,IAAI,oBAAoB,EACxC,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,oBAAoB,EACpB,SAAS,IAAI,qBAAqB,CACnC,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,KAAK,KAAK,aACxD,eACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAC,WAAW,iBACP,MAAM,aAElB,iBAAQ,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAChE,iBAAQ,SAAS,EAAC,kBAAkB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC1D,EACN,eAAM,SAAS,EAAE,YAAY,YAAG,KAAK,GAAQ,IACzC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Spinner/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Spinner';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Spinner/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC"}

package/dist/Spinner/index.js

@@ -0,0 +1,2 @@
+export * from './Spinner';
+//# sourceMappingURL=index.js.map

package/dist/Spinner/index.js.map

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

package/dist/Stack/Stack.css

@@ -0,0 +1,59 @@
+/**
+ * Stack Component Styles for React
+ * Re-exports the base Stack styles from components-html
+ */
+
+/**
+ * Stack Layout Component
+ * Applies consistent vertical spacing between direct child elements using flexbox + gap.
+ *
+ * Usage:
+ * <!-- Default (md = 8px) -->
+ * <div class="dsn-stack">
+ *   <div>...</div>
+ *   <div>...</div>
+ * </div>
+ *
+ * <!-- Explicit space variant -->
+ * <div class="dsn-stack dsn-stack--space-lg">
+ *   <div>...</div>
+ *   <div>...</div>
+ * </div>
+ */
+
+.dsn-stack {
+  --dsn-stack-space: var(--dsn-space-row-md);
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-stack-space);
+}
+
+/* Space variant modifiers */
+.dsn-stack--space-sm {
+  --dsn-stack-space: var(--dsn-space-row-sm);
+}
+.dsn-stack--space-md {
+  --dsn-stack-space: var(--dsn-space-row-md);
+}
+.dsn-stack--space-lg {
+  --dsn-stack-space: var(--dsn-space-row-lg);
+}
+.dsn-stack--space-xl {
+  --dsn-stack-space: var(--dsn-space-row-xl);
+}
+.dsn-stack--space-2xl {
+  --dsn-stack-space: var(--dsn-space-row-2xl);
+}
+.dsn-stack--space-3xl {
+  --dsn-stack-space: var(--dsn-space-row-3xl);
+}
+.dsn-stack--space-4xl {
+  --dsn-stack-space: var(--dsn-space-row-4xl);
+}
+.dsn-stack--space-5xl {
+  --dsn-stack-space: var(--dsn-space-row-5xl);
+}
+.dsn-stack--space-6xl {
+  --dsn-stack-space: var(--dsn-space-row-6xl);
+}
+

package/dist/Stack/Stack.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import './Stack.css';
+export type StackSpace = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Verticale ruimte tussen directe child-elementen
+     * @default 'md'
+     */
+    space?: StackSpace;
+    /**
+     * Child-elementen om verticaal te stapelen
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Stack layout component
+ * Brengt consistente verticale ruimte aan tussen directe child-elementen via flexbox + gap.
+ *
+ * @example
+ * ```tsx
+ * // Default (md = 8px)
+ * <Stack>
+ *   <Paragraph>Eerste paragraaf</Paragraph>
+ *   <Paragraph>Tweede paragraaf</Paragraph>
+ * </Stack>
+ *
+ * // Grote ruimte tussen secties
+ * <Stack space="3xl">
+ *   <section>...</section>
+ *   <section>...</section>
+ * </Stack>
+ * ```
+ */
+export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Stack.d.ts.map

package/dist/Stack/Stack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAClB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,mFAcjB,CAAC"}

package/dist/Stack/Stack.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Stack.css';
+/**
+ * Stack layout component
+ * Brengt consistente verticale ruimte aan tussen directe child-elementen via flexbox + gap.
+ *
+ * @example
+ * ```tsx
+ * // Default (md = 8px)
+ * <Stack>
+ *   <Paragraph>Eerste paragraaf</Paragraph>
+ *   <Paragraph>Tweede paragraaf</Paragraph>
+ * </Stack>
+ *
+ * // Grote ruimte tussen secties
+ * <Stack space="3xl">
+ *   <section>...</section>
+ *   <section>...</section>
+ * </Stack>
+ * ```
+ */
+export const Stack = React.forwardRef(({ className, space = 'md', children, ...props }, ref) => {
+    const classes = classNames('dsn-stack', space !== 'md' && `dsn-stack--space-${space}`, className);
+    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
+});
+Stack.displayName = 'Stack';
+//# sourceMappingURL=Stack.js.map

package/dist/Stack/Stack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,aAAa,CAAC;AA0BrB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,KAAK,KAAK,IAAI,IAAI,oBAAoB,KAAK,EAAE,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Stack/index.d.ts

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

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

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

package/dist/Stack/index.js

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

package/dist/Stack/index.js.map

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

package/dist/StatusBadge/StatusBadge.css

@@ -0,0 +1,87 @@
+/**
+ * StatusBadge Component Styles for React
+ * Re-exports the base StatusBadge styles from components-html
+ */
+
+/**
+ * Status Badge Component
+ * Compact label that communicates status with a signal color and optional icon.
+ *
+ * Usage:
+ * <!-- Neutral (default), without icon -->
+ * <strong class="dsn-status-badge">Actief</strong>
+ *
+ * <!-- Info variant (with icon) -->
+ * <strong class="dsn-status-badge dsn-status-badge--info">
+ *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- info-circle --></svg>
+ *   Nieuw
+ * </strong>
+ *
+ * <!-- Positive variant (with icon) -->
+ * <strong class="dsn-status-badge dsn-status-badge--positive">
+ *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- circle-check --></svg>
+ *   Goedgekeurd
+ * </strong>
+ *
+ * <!-- Negative variant (with icon) -->
+ * <strong class="dsn-status-badge dsn-status-badge--negative">
+ *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- exclamation-circle --></svg>
+ *   Afgewezen
+ * </strong>
+ *
+ * <!-- Warning variant (with icon) -->
+ * <strong class="dsn-status-badge dsn-status-badge--warning">
+ *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- alert-triangle --></svg>
+ *   Let op
+ * </strong>
+ */
+
+.dsn-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--dsn-status-badge-gap);
+  font-family: inherit;
+  font-size: var(--dsn-status-badge-font-size);
+  line-height: var(--dsn-status-badge-line-height);
+  text-transform: var(--dsn-status-badge-text-transform);
+  color: var(--dsn-status-badge-neutral-color);
+  background-color: var(--dsn-status-badge-neutral-background-color);
+  border-radius: var(--dsn-status-badge-border-radius);
+  border: var(--dsn-status-badge-border-width) solid
+    var(--dsn-status-badge-border-color);
+  padding-block: var(--dsn-status-badge-padding-block);
+  padding-inline: var(--dsn-status-badge-padding-inline);
+}
+
+/* Info variant */
+.dsn-status-badge--info {
+  color: var(--dsn-status-badge-info-color);
+  background-color: var(--dsn-status-badge-info-background-color);
+}
+
+/* Positive variant */
+.dsn-status-badge--positive {
+  color: var(--dsn-status-badge-positive-color);
+  background-color: var(--dsn-status-badge-positive-background-color);
+}
+
+/* Negative variant */
+.dsn-status-badge--negative {
+  color: var(--dsn-status-badge-negative-color);
+  background-color: var(--dsn-status-badge-negative-background-color);
+}
+
+/* Warning variant */
+.dsn-status-badge--warning {
+  color: var(--dsn-status-badge-warning-color);
+  background-color: var(--dsn-status-badge-warning-background-color);
+}
+
+/* Icon sizing — inherits text color via color: inherit */
+.dsn-status-badge > .dsn-icon {
+  flex-shrink: 0;
+  width: var(--dsn-status-badge-icon-size);
+  height: var(--dsn-status-badge-icon-size);
+  color: inherit;
+}
+

package/dist/StatusBadge/StatusBadge.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import './StatusBadge.css';
+export type StatusBadgeVariant = 'neutral' | 'positive' | 'negative' | 'warning' | 'info';
+export interface StatusBadgeProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Semantische variant die de signaalkleur bepaalt
+     * @default 'neutral'
+     */
+    variant?: StatusBadgeVariant;
+    /**
+     * Optioneel decoratief icoon vóór de badge-tekst (altijd aria-hidden)
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Badge-tekst (verplicht)
+     */
+    children: React.ReactNode;
+}
+/**
+ * StatusBadge component
+ * Compact label dat een status communiceert met een signaalkleur en optioneel icoon.
+ *
+ * @example
+ * ```tsx
+ * // Neutral (default), zonder icoon
+ * <StatusBadge>Actief</StatusBadge>
+ *
+ * // Positive met icoon
+ * <StatusBadge variant="positive" iconStart={<Icon name="circle-check" size="sm" aria-hidden />}>
+ *   Goedgekeurd
+ * </StatusBadge>
+ *
+ * // Negative met icoon
+ * <StatusBadge variant="negative" iconStart={<Icon name="exclamation-circle" size="sm" aria-hidden />}>
+ *   Afgewezen
+ * </StatusBadge>
+ *
+ * // Info met icoon
+ * <StatusBadge variant="info" iconStart={<Icon name="info-circle" size="sm" aria-hidden />}>
+ *   Nieuw
+ * </StatusBadge>
+ *
+ * // Warning met icoon
+ * <StatusBadge variant="warning" iconStart={<Icon name="alert-triangle" size="sm" aria-hidden />}>
+ *   Let op
+ * </StatusBadge>
+ * ```
+ */
+export declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/StatusBadge/StatusBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../src/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,WAAW,sFAevB,CAAC"}

package/dist/StatusBadge/StatusBadge.js

@@ -0,0 +1,40 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './StatusBadge.css';
+/**
+ * StatusBadge component
+ * Compact label dat een status communiceert met een signaalkleur en optioneel icoon.
+ *
+ * @example
+ * ```tsx
+ * // Neutral (default), zonder icoon
+ * <StatusBadge>Actief</StatusBadge>
+ *
+ * // Positive met icoon
+ * <StatusBadge variant="positive" iconStart={<Icon name="circle-check" size="sm" aria-hidden />}>
+ *   Goedgekeurd
+ * </StatusBadge>
+ *
+ * // Negative met icoon
+ * <StatusBadge variant="negative" iconStart={<Icon name="exclamation-circle" size="sm" aria-hidden />}>
+ *   Afgewezen
+ * </StatusBadge>
+ *
+ * // Info met icoon
+ * <StatusBadge variant="info" iconStart={<Icon name="info-circle" size="sm" aria-hidden />}>
+ *   Nieuw
+ * </StatusBadge>
+ *
+ * // Warning met icoon
+ * <StatusBadge variant="warning" iconStart={<Icon name="alert-triangle" size="sm" aria-hidden />}>
+ *   Let op
+ * </StatusBadge>
+ * ```
+ */
+export const StatusBadge = React.forwardRef(({ className, variant = 'neutral', iconStart, children, ...props }, ref) => {
+    const classes = classNames('dsn-status-badge', variant !== 'neutral' && `dsn-status-badge--${variant}`, className);
+    return (_jsxs("strong", { ref: ref, className: classes, ...props, children: [iconStart, children] }));
+});
+StatusBadge.displayName = 'StatusBadge';
+//# sourceMappingURL=StatusBadge.js.map

package/dist/StatusBadge/StatusBadge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../src/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AA2B3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,OAAO,KAAK,SAAS,IAAI,qBAAqB,OAAO,EAAE,EACvD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,kBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aAC5C,SAAS,EACT,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/StatusBadge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './StatusBadge';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/StatusBadge/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}

package/dist/StatusBadge/index.js

@@ -0,0 +1,2 @@
+export * from './StatusBadge';
+//# sourceMappingURL=index.js.map

package/dist/StatusBadge/index.js.map

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

package/dist/SummaryList/SummaryList.css

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

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

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

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

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

package/dist/SummaryList/index.d.ts

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

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