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

package/dist/TableOfContents/TableOfContents.d.ts

@@ -0,0 +1,61 @@
+import React from 'react';
+import { type HeadingLevel } from '../Heading';
+import './TableOfContents.css';
+export type TableOfContentsAppearance = 'framed' | 'plain';
+export interface TableOfContentsItem {
+    /**
+     * Anchor target — moet overeenkomen met het `id` van de bijbehorende H2 op de pagina
+     */
+    id: string;
+    /**
+     * Zichtbare linktekst
+     */
+    label: string;
+}
+export interface TableOfContentsProps extends React.HTMLAttributes<HTMLElement> {
+    /**
+     * Zichtbare heading-tekst
+     * @default 'Op deze pagina'
+     */
+    heading?: string;
+    /**
+     * Semantisch heading-niveau
+     * @default 2
+     */
+    headingLevel?: HeadingLevel;
+    /**
+     * Visuele weergave:
+     * - `'framed'` — accent-1 achtergrond + linkerborder, heading als heading-3 (voor gebruik inline in de content-flow)
+     * - `'plain'` — geen kader, heading als heading-5 (voor gebruik in een losstaande kolom)
+     * @default 'framed'
+     */
+    appearance?: TableOfContentsAppearance;
+    /**
+     * Secties waarnaar gelinkt wordt — alleen H2's horen hierin opgenomen te worden
+     */
+    items: TableOfContentsItem[];
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * TableOfContents component
+ * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
+ *
+ * @example
+ * ```tsx
+ * // Framed (default) — inline in de content-flow
+ * <TableOfContents
+ *   items={[
+ *     { id: 'sectie-1', label: 'Sectie 1' },
+ *     { id: 'sectie-2', label: 'Sectie 2' },
+ *   ]}
+ * />
+ *
+ * // Plain — in een losstaande kolom naast de hoofdinhoud
+ * <TableOfContents appearance="plain" items={items} />
+ * ```
+ */
+export declare const TableOfContents: React.ForwardRefExoticComponent<TableOfContentsProps & React.RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TableOfContents.d.ts.map

package/dist/TableOfContents/TableOfContents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.d.ts","sourceRoot":"","sources":["../../src/TableOfContents/TableOfContents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,YAAY,CAAC;AAGxD,OAAO,uBAAuB,CAAC;AAE/B,MAAM,MAAM,yBAAyB,GAAG,QAAQ,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,mBAAmB;IAClC;;OAEG;IACH,EAAE,EAAE,MAAM,CAAC;IAEX;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,oBAAqB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,YAAY,CAAC;IAE5B;;;;;OAKG;IACH,UAAU,CAAC,EAAE,yBAAyB,CAAC;IAEvC;;OAEG;IACH,KAAK,EAAE,mBAAmB,EAAE,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,eAAe,0FAgD3B,CAAC"}

package/dist/TableOfContents/TableOfContents.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Heading } from '../Heading';
+import { Link } from '../Link';
+import { UnorderedList } from '../UnorderedList';
+import './TableOfContents.css';
+/**
+ * TableOfContents component
+ * Inhoudsopgave met ankerlinks naar de H2-secties op de huidige pagina.
+ *
+ * @example
+ * ```tsx
+ * // Framed (default) — inline in de content-flow
+ * <TableOfContents
+ *   items={[
+ *     { id: 'sectie-1', label: 'Sectie 1' },
+ *     { id: 'sectie-2', label: 'Sectie 2' },
+ *   ]}
+ * />
+ *
+ * // Plain — in een losstaande kolom naast de hoofdinhoud
+ * <TableOfContents appearance="plain" items={items} />
+ * ```
+ */
+export const TableOfContents = React.forwardRef(({ heading = 'Op deze pagina', headingLevel = 2, appearance = 'framed', items, className, ...props }, ref) => {
+    const headingId = useId();
+    const classes = classNames('dsn-table-of-contents', appearance === 'plain' && 'dsn-table-of-contents--plain', className);
+    return (_jsxs("nav", { ref: ref, className: classes, "aria-labelledby": headingId, ...props, children: [_jsx(Heading, { level: headingLevel, appearance: appearance === 'plain' ? 'heading-5' : 'heading-3', className: "dsn-table-of-contents__heading", id: headingId, children: heading }), _jsx(UnorderedList, { children: items.map((item) => (_jsx("li", { children: _jsx(Link, { href: `#${item.id}`, children: item.label }) }, item.id))) })] }));
+});
+TableOfContents.displayName = 'TableOfContents';
+//# sourceMappingURL=TableOfContents.js.map

package/dist/TableOfContents/TableOfContents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableOfContents.js","sourceRoot":"","sources":["../../src/TableOfContents/TableOfContents.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,OAAO,EAAqB,MAAM,YAAY,CAAC;AACxD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AACjD,OAAO,uBAAuB,CAAC;AAgD/B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAI7C,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,YAAY,GAAG,CAAC,EAChB,UAAU,GAAG,QAAQ,EACrB,KAAK,EACL,SAAS,EACT,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAE1B,MAAM,OAAO,GAAG,UAAU,CACxB,uBAAuB,EACvB,UAAU,KAAK,OAAO,IAAI,8BAA8B,EACxD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eACE,GAAG,EAAE,GAA6B,EAClC,SAAS,EAAE,OAAO,qBACD,SAAS,KACtB,KAAK,aAET,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAE,UAAU,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAC9D,SAAS,EAAC,gCAAgC,EAC1C,EAAE,EAAE,SAAS,YAEZ,OAAO,GACA,EACV,KAAC,aAAa,cACX,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACnB,uBACE,KAAC,IAAI,IAAC,IAAI,EAAE,IAAI,IAAI,CAAC,EAAE,EAAE,YAAG,IAAI,CAAC,KAAK,GAAQ,IADvC,IAAI,CAAC,EAAE,CAEX,CACN,CAAC,GACY,IACZ,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/TableOfContents/index.d.ts

@@ -0,0 +1,3 @@
+export { TableOfContents } from './TableOfContents';
+export type { TableOfContentsProps, TableOfContentsAppearance, TableOfContentsItem, } from './TableOfContents';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TableOfContents/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,YAAY,EACV,oBAAoB,EACpB,yBAAyB,EACzB,mBAAmB,GACpB,MAAM,mBAAmB,CAAC"}

package/dist/TableOfContents/index.js

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

package/dist/TableOfContents/index.js.map

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