@dsn-starter-kit/components-react 1.0.0

package/dist/Link/Link.js

@@ -0,0 +1,58 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Link.css';
+/**
+ * Link component with icon support and size variants
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (inherits font from parent)
+ * <Link href="/about">About us</Link>
+ *
+ * // With explicit size
+ * <Link href="/about" size="small">Small link</Link>
+ * <Link href="/about" size="default">Default link</Link>
+ * <Link href="/about" size="large">Large link</Link>
+ *
+ * // With icon before text
+ * <Link href="/download" iconStart={<Icon name="download" />}>
+ *   Download
+ * </Link>
+ *
+ * // With icon after text
+ * <Link href="/next" iconEnd={<Icon name="arrow-right" />}>
+ *   Next page
+ * </Link>
+ *
+ * // External link (opens in new tab with visible hint)
+ * <Link href="https://example.com" external>
+ *   External site
+ * </Link>
+ *
+ * // Current page
+ * <Link href="/dashboard" current>Dashboard</Link>
+ *
+ * // Disabled
+ * <Link disabled>Unavailable</Link>
+ * ```
+ */
+export const Link = React.forwardRef(({ disabled = false, current = false, external = false, size, iconStart, iconEnd, className, href, target, rel, tabIndex, children, onClick, ...props }, ref) => {
+    // Only add size class when explicitly provided.
+    // Without a size prop, the link inherits font from its parent,
+    // which is the expected behavior for inline usage in paragraphs.
+    const classes = classNames('dsn-link', size && `dsn-link--size-${size}`, className);
+    const handleClick = (e) => {
+        if (disabled) {
+            e.preventDefault();
+            return;
+        }
+        onClick?.(e);
+    };
+    // External links: add target, rel, and visible hint automatically
+    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, "aria-current": current ? 'page' : undefined, onClick: handleClick, ...props, children: [iconStart, children, external && ' (opent nieuw tabblad)', iconEnd] }));
+});
+Link.displayName = 'Link';
+//# sourceMappingURL=Link.js.map

package/dist/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AAoDpB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,SAAS,EACT,OAAO,EACP,SAAS,EACT,IAAI,EACJ,MAAM,EACN,GAAG,EACH,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,gDAAgD;IAChD,+DAA+D;IAC/D,iEAAiE;IACjE,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,IAAI,IAAI,kBAAkB,IAAI,EAAE,EAChC,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,kEAAkE;IAClE,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,kBACtB,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,EAC1C,OAAO,EAAE,WAAW,KAChB,KAAK,aAER,SAAS,EACT,QAAQ,EACR,QAAQ,IAAI,wBAAwB,EACpC,OAAO,IACN,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Link/index.d.ts

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

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

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

package/dist/Link/index.js

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

package/dist/Link/index.js.map

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

package/dist/LinkButton/LinkButton.css

@@ -0,0 +1,40 @@
+/**
+ * LinkButton Component Styles for React
+ * Re-exports the base LinkButton styles from components-html
+ */
+
+/**
+ * LinkButton Component
+ * Resets native <button> styles so the element inherits dsn-link appearance.
+ * Always combine with the dsn-link class:
+ *   <button class="dsn-link dsn-link-button">Label</button>
+ */
+
+.dsn-link-button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  /* font: inherit is intentionally omitted — dsn-link already sets this,
+     and repeating it here would override font-size from dsn-link--size-* */
+}
+
+/* dsn-link uses [aria-disabled='true'] for its disabled state,
+   but <button> uses the native disabled attribute — that selector does not match.
+   We manually apply the same visual treatment via :disabled. */
+.dsn-link.dsn-link-button:disabled {
+  color: var(--dsn-link-disabled-color);
+  text-decoration-line: none;
+  cursor: not-allowed;
+}
+
+/* Prevent hover/active styles from applying on a disabled button.
+   dsn-link uses :not([aria-disabled='true']) which does not cover :disabled. */
+.dsn-link.dsn-link-button:disabled:hover,
+.dsn-link.dsn-link-button:disabled:active {
+  color: var(--dsn-link-disabled-color);
+  text-decoration-line: none;
+}
+

package/dist/LinkButton/LinkButton.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import './LinkButton.css';
+export type LinkButtonSize = 'small' | 'default' | 'large';
+export interface LinkButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button size — controls font-size, gap, and icon size.
+     * When omitted, the button inherits the surrounding font (same as Link).
+     */
+    size?: LinkButtonSize;
+    /**
+     * Icon element rendered before the button text
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Icon element rendered after the button text
+     */
+    iconEnd?: React.ReactNode;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Button content
+     */
+    children?: React.ReactNode;
+}
+/**
+ * LinkButton — semantically a <button>, visually styled as a Link.
+ *
+ * Use when an action requires a JavaScript handler or form submit,
+ * but the visual prominence of a Button does not fit the context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (inherits font from parent)
+ * <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>
+ *
+ * // With explicit size
+ * <LinkButton size="small">Klein</LinkButton>
+ *
+ * // With icon
+ * <LinkButton iconStart={<Icon name="arrow-left" aria-hidden />}>Terug</LinkButton>
+ *
+ * // Disabled
+ * <LinkButton disabled>Niet beschikbaar</LinkButton>
+ *
+ * // Form submit
+ * <LinkButton type="submit">Bevestigen</LinkButton>
+ * ```
+ */
+export declare const LinkButton: React.ForwardRefExoticComponent<LinkButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=LinkButton.d.ts.map

package/dist/LinkButton/LinkButton.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.d.ts","sourceRoot":"","sources":["../../src/LinkButton/LinkButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACpF;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,UAAU,2FA4BtB,CAAC"}

package/dist/LinkButton/LinkButton.js

@@ -0,0 +1,34 @@
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './LinkButton.css';
+/**
+ * LinkButton — semantically a <button>, visually styled as a Link.
+ *
+ * Use when an action requires a JavaScript handler or form submit,
+ * but the visual prominence of a Button does not fit the context.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (inherits font from parent)
+ * <LinkButton onClick={handleClick}>Wachtwoord vergeten?</LinkButton>
+ *
+ * // With explicit size
+ * <LinkButton size="small">Klein</LinkButton>
+ *
+ * // With icon
+ * <LinkButton iconStart={<Icon name="arrow-left" aria-hidden />}>Terug</LinkButton>
+ *
+ * // Disabled
+ * <LinkButton disabled>Niet beschikbaar</LinkButton>
+ *
+ * // Form submit
+ * <LinkButton type="submit">Bevestigen</LinkButton>
+ * ```
+ */
+export const LinkButton = React.forwardRef(({ size, iconStart, iconEnd, className, type = 'button', children, ...props }, ref) => {
+    const classes = classNames('dsn-link', 'dsn-link-button', size && `dsn-link--size-${size}`, className);
+    return (_jsxs("button", { ref: ref, type: type, className: classes, ...props, children: [iconStart, children, iconEnd] }));
+});
+LinkButton.displayName = 'LinkButton';
+//# sourceMappingURL=LinkButton.js.map

package/dist/LinkButton/LinkButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkButton.js","sourceRoot":"","sources":["../../src/LinkButton/LinkButton.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAgC1B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CACE,EACE,IAAI,EACJ,SAAS,EACT,OAAO,EACP,SAAS,EACT,IAAI,GAAG,QAAQ,EACf,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,iBAAiB,EACjB,IAAI,IAAI,kBAAkB,IAAI,EAAE,EAChC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,kBAAQ,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aACxD,SAAS,EACT,QAAQ,EACR,OAAO,IACD,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/LinkButton/index.d.ts

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

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

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

package/dist/LinkButton/index.js

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

package/dist/LinkButton/index.js.map

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

package/dist/Logo/Logo.css

@@ -0,0 +1,33 @@
+/**
+ * Logo Component
+ * Theme-aware SVG logo component met design token kleuren.
+ *
+ * De twee kleurlagen — primaire merkkleur en labelkleur — zijn gekoppeld aan
+ * design tokens zodat het logo zich automatisch aanpast aan elk thema en elke kleurmodus.
+ *
+ * Standalone gebruik (met accessible title):
+ * <svg class="dsn-logo" xmlns="http://www.w3.org/2000/svg" width="186" height="48"
+ *      viewBox="0 0 186 48" fill="none" role="img" aria-labelledby="logo-title">
+ *   <title id="logo-title">Starter Kit</title>
+ *   <path class="dsn-logo__primary" d="M0 0h185.491v48H0z"/>
+ *   <path class="dsn-logo__label" d="M8 8h169.491v32H8z"/>
+ *   <!-- letterpaden met dsn-logo__primary -->
+ * </svg>
+ *
+ * Decoratief gebruik (in een link):
+ * <a href="/">
+ *   <svg class="dsn-logo" aria-hidden="true" ...>
+ *     <!-- geen <title> — link levert de accessible name -->
+ *   </svg>
+ *   <span class="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ * </a>
+ */
+
+.dsn-logo__primary {
+  fill: var(--dsn-logo-color-primary);
+}
+
+.dsn-logo__label {
+  fill: var(--dsn-logo-color-label);
+}
+

package/dist/Logo/Logo.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import './Logo.css';
+export interface LogoProps extends React.SVGProps<SVGSVGElement> {
+    /**
+     * Accessible naam via <title> in de SVG.
+     * Niet gerenderd wanneer aria-hidden={true}.
+     * @default 'Starter Kit'
+     */
+    title?: string;
+}
+/**
+ * Logo component
+ * Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.
+ *
+ * De twee kleurlagen zijn gekoppeld aan tokens:
+ * - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)
+ * - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)
+ *
+ * @example
+ * // Standalone — screenreader leest de title
+ * <Logo />
+ *
+ * // Decoratief — in een link, omringende context levert de accessible name
+ * <a href="/">
+ *   <Logo aria-hidden={true} />
+ *   <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ * </a>
+ *
+ * // Custom title (bijv. na white-label herbranding)
+ * <Logo title="Mijn Organisatie" />
+ */
+export declare const Logo: React.ForwardRefExoticComponent<Omit<LogoProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+//# sourceMappingURL=Logo.d.ts.map

package/dist/Logo/Logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.d.ts","sourceRoot":"","sources":["../../src/Logo/Logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,YAAY,CAAC;AAEpB,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC9D;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,eAAO,MAAM,IAAI,8FAmChB,CAAC"}

package/dist/Logo/Logo.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 './Logo.css';
+/**
+ * Logo component
+ * Rendert het Starter Kit-logo als inline SVG met theme-aware kleuren via design tokens.
+ *
+ * De twee kleurlagen zijn gekoppeld aan tokens:
+ * - dsn-logo__primary — achtergrondrechthoek + letterpaden (merkkleur van het actieve thema)
+ * - dsn-logo__label — binnenste rechthoek (documentachtergrondkleur, doorkijkje-effect)
+ *
+ * @example
+ * // Standalone — screenreader leest de title
+ * <Logo />
+ *
+ * // Decoratief — in een link, omringende context levert de accessible name
+ * <a href="/">
+ *   <Logo aria-hidden={true} />
+ *   <span className="dsn-visually-hidden">Starter Kit — terug naar homepage</span>
+ * </a>
+ *
+ * // Custom title (bijv. na white-label herbranding)
+ * <Logo title="Mijn Organisatie" />
+ */
+export const Logo = React.forwardRef(({ className, title = 'Starter Kit', 'aria-hidden': ariaHidden, ...props }, ref) => {
+    const titleId = useId();
+    const isDecorative = ariaHidden === true || ariaHidden === 'true';
+    return (_jsxs("svg", { ref: ref, className: classNames('dsn-logo', className), xmlns: "http://www.w3.org/2000/svg", width: "186", height: "48", viewBox: "0 0 186 48", fill: "none", role: isDecorative ? undefined : 'img', "aria-labelledby": isDecorative ? undefined : titleId, "aria-hidden": isDecorative ? true : undefined, ...props, children: [!isDecorative && _jsx("title", { id: titleId, children: title }), _jsx("path", { className: "dsn-logo__primary", d: "M0 0h185.491v48H0z" }), _jsx("path", { className: "dsn-logo__label", d: "M8 8h169.491v32H8z" }), _jsx("path", { className: "dsn-logo__primary", d: "M164.624 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.734q.422 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.178.178-.6.178h-3.267V31.2q0 .423-.2.622-.178.178-.6.178M144.059 32q-.423 0-.622-.178-.178-.2-.178-.622v-2.644q0-.423.178-.6.2-.2.622-.2h2.2v-7.467h-2.2q-.423 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h9.466q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178h-2.155v7.467h2.155q.423 0 .6.2.2.177.2.6V31.2q0 .423-.2.622-.177.178-.6.178zM131.279 32h-3.445q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h3.445q.421 0 .6.2.2.178.2.6v5.111h.889l2.288-5.178q.156-.399.423-.555.266-.178.689-.178h3.422q.378 0 .511.2.133.178-.022.533l-2.267 5.178q1.245.066 1.978.889.755.8.755 2.133V31.2q0 .423-.2.622-.177.178-.6.178h-3.422q-.422 0-.622-.178-.178-.2-.178-.622v-4.333q0-.356-.178-.556-.177-.2-.533-.2h-2.933V31.2q0 .423-.2.622-.179.178-.6.178M110.551 20v2.844h1.666q.578 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.423q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.267.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178h-3.445q-.422 0-.622-.178-.178-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M102.099 32h-10.31q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2H102.1q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178h-6.133v1.711h4.333q.423 0 .6.2.2.178.2.6v2.378q0 .422-.2.622-.177.178-.6.178h-4.333V27.8h6.133q.423 0 .6.2.2.178.2.6v2.6q0 .423-.2.622-.177.178-.6.178M83.96 32h-3.6q-.423 0-.622-.178-.178-.2-.178-.622V20.289h-3.267q-.422 0-.622-.178-.178-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h11.733q.423 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.177.178-.6.178H84.76V31.2q0 .423-.2.622-.178.178-.6.178M65.585 20v2.844h1.666q.579 0 .778-.288.2-.312.2-.756v-.756q0-.444-.2-.733-.2-.31-.778-.311zm-.8 12h-3.422q-.423 0-.623-.178-.177-.2-.178-.622V16.8q0-.423.178-.6.2-.2.622-.2h7.4q2.49 0 3.423 1.044.955 1.022.955 2.667v1.022q0 .934-.289 1.6-.266.645-.955.934 1.2.134 1.933.977.756.845.756 2.245V31.2q0 .423-.2.622-.178.178-.6.178H70.34q-.422 0-.622-.178-.177-.2-.178-.622v-3.4q0-.489-.2-.711-.177-.245-.644-.245h-3.111V31.2q0 .423-.2.622-.178.178-.6.178M50.13 20.667l-1.044 3.377h3.489l-1.045-3.377a.76.76 0 0 0-.2-.29.3.3 0 0 0-.222-.088h-.555q-.134 0-.245.089a1 1 0 0 0-.178.289M48.864 31.2q0 .423-.2.622-.179.178-.6.178h-3.267q-.422 0-.622-.178-.178-.2-.178-.622v-5.867q0-.666.2-1.533.222-.867.667-2.022l1.933-5.045q.133-.378.4-.555.29-.178.733-.178h5.978q.422 0 .69.178.288.177.421.555l1.934 5.045q.443 1.155.644 2.022.222.867.222 1.533V31.2q0 .423-.2.622-.177.178-.6.178h-3.355q-.445 0-.667-.178-.2-.2-.2-.622v-3.111h-3.933zM38.192 32h-3.6q-.422 0-.622-.178-.178-.2-.178-.622V20.289h-3.266q-.423 0-.623-.178-.177-.2-.177-.622V16.8q0-.423.177-.6.2-.2.623-.2h11.733q.421 0 .6.2.2.178.2.6v2.689q0 .422-.2.622-.179.178-.6.178h-3.267V31.2q0 .423-.2.622-.177.178-.6.178M23.822 32H16.8q-.423 0-.622-.178-.178-.2-.178-.622v-2.6q0-.423.178-.6.2-.2.622-.2h5.978q.288 0 .422-.178a.74.74 0 0 0 .156-.466q0-.378-.156-.556-.134-.178-.422-.2l-3.334-.467q-1.556-.222-2.51-1.022-.934-.8-.934-2.667v-2.333q0-1.89 1.222-2.889Q18.445 16 20.6 16h6.222q.423 0 .6.2.2.178.2.6v2.644q0 .423-.2.623-.177.177-.6.177h-5.178a.53.53 0 0 0-.444.2.68.68 0 0 0-.156.467q0 .29.156.489a.6.6 0 0 0 .444.222l3.312.445q1.556.222 2.51 1.022.957.8.956 2.667v2.333q0 1.89-1.244 2.911-1.223 1-3.356 1" })] }));
+});
+Logo.displayName = 'Logo';
+//# sourceMappingURL=Logo.js.map

package/dist/Logo/Logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Logo.js","sourceRoot":"","sources":["../../src/Logo/Logo.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AAWpB;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EAAE,SAAS,EAAE,KAAK,GAAG,aAAa,EAAE,aAAa,EAAE,UAAU,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,KAAK,EAAE,CAAC;IACxB,MAAM,YAAY,GAAG,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,MAAM,CAAC;IAElE,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,UAAU,EAAE,SAAS,CAAC,EAC5C,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAC,KAAK,EACX,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,YAAY,EACpB,IAAI,EAAC,MAAM,EACX,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,qBACrB,YAAY,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,OAAO,iBACtC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KACxC,KAAK,aAER,CAAC,YAAY,IAAI,gBAAO,EAAE,EAAE,OAAO,YAAG,KAAK,GAAS,EAErD,eAAM,SAAS,EAAC,mBAAmB,EAAC,CAAC,EAAC,oBAAoB,GAAG,EAE7D,eAAM,SAAS,EAAC,iBAAiB,EAAC,CAAC,EAAC,oBAAoB,GAAG,EAE3D,eACE,SAAS,EAAC,mBAAmB,EAC7B,CAAC,EAAC,8hHAA8hH,GAChiH,IACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Logo/index.d.ts

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

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

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

package/dist/Logo/index.js

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

package/dist/Logo/index.js.map

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

package/dist/Menu/Menu.css

@@ -0,0 +1,57 @@
+/**
+ * Menu Component
+ * Containercomponent voor MenuLink- en MenuButton-items.
+ * Rendert een <ul> met verticale (standaard) of horizontale oriëntatie.
+ *
+ * Altijd gewrapped in een semantisch element (<nav>) — verantwoordelijkheid van de ouder.
+ *
+ * Structuur:
+ * <ul class="dsn-menu">
+ *   <li class="dsn-menu-link dsn-menu-link--level-1">...</li>
+ *   <li class="dsn-menu-button">...</li>
+ * </ul>
+ *
+ * Horizontaal:
+ * <ul class="dsn-menu dsn-menu--horizontal">
+ *   ...
+ * </ul>
+ */
+
+/* =============================================================================
+   Base
+   ============================================================================= */
+
+.dsn-menu {
+  /* Reset */
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  /* Layout — verticaal (standaard) */
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  gap: var(--dsn-menu-gap-vertical);
+}
+
+/* =============================================================================
+   Icon-start uitlijning — level 2+ indent gelijk aan icon-breedte + gap
+   Gebruik wanneer level-1 items een iconStart hebben.
+   ============================================================================= */
+
+.dsn-menu--icon-start {
+  --dsn-menu-link-level-indent: calc(
+    var(--dsn-menu-item-icon-size) + var(--dsn-menu-item-gap)
+  );
+}
+
+/* =============================================================================
+   Horizontale oriëntatie
+   ============================================================================= */
+
+.dsn-menu--horizontal {
+  flex-direction: row;
+  align-items: center;
+  gap: var(--dsn-menu-gap-horizontal);
+}
+

package/dist/Menu/Menu.d.ts

@@ -0,0 +1,56 @@
+import React from 'react';
+import './Menu.css';
+export type MenuOrientation = 'vertical' | 'horizontal';
+export interface MenuProps extends React.HTMLAttributes<HTMLUListElement> {
+    /**
+     * Bepaalt de lay-out van de items.
+     * - `vertical` (standaard): items onder elkaar, volledige breedte
+     * - `horizontal`: items naast elkaar, breedte op inhoud
+     * @default 'vertical'
+     */
+    orientation?: MenuOrientation;
+    /**
+     * Geeft aan dat level-1 items een `iconStart` hebben.
+     * Level 2+ items worden dan ingesprongen zodat hun tekst uitlijnt met het label van level 1.
+     * @default false
+     */
+    iconStart?: boolean;
+    /**
+     * `MenuLink`- en/of `MenuButton`-items (verplicht)
+     */
+    children: React.ReactNode;
+    /**
+     * Aanvullende CSS-klassen voor het `<ul>`-element
+     */
+    className?: string;
+}
+/**
+ * Menu component
+ * Containercomponent voor MenuLink- en MenuButton-items.
+ * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
+ *
+ * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
+ * dit is de verantwoordelijkheid van de ouder.
+ *
+ * @example
+ * ```tsx
+ * // Verticaal (standaard)
+ * <nav aria-label="Hoofdnavigatie">
+ *   <Menu>
+ *     <MenuLink href="/home">Home</MenuLink>
+ *     <MenuLink href="/over">Over ons</MenuLink>
+ *     <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
+ *   </Menu>
+ * </nav>
+ *
+ * // Horizontaal
+ * <nav aria-label="Paginanavigatie">
+ *   <Menu orientation="horizontal">
+ *     <MenuLink href="/home" current>Home</MenuLink>
+ *     <MenuLink href="/over">Over ons</MenuLink>
+ *   </Menu>
+ * </nav>
+ * ```
+ */
+export declare const Menu: React.ForwardRefExoticComponent<MenuProps & React.RefAttributes<HTMLUListElement>>;
+//# sourceMappingURL=Menu.d.ts.map

package/dist/Menu/Menu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,eAAe,GAAG,UAAU,GAAG,YAAY,CAAC;AAExD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IACvE;;;;;OAKG;IACH,WAAW,CAAC,EAAE,eAAe,CAAC;IAE9B;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,eAAO,MAAM,IAAI,oFAwBhB,CAAC"}

package/dist/Menu/Menu.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Menu.css';
+/**
+ * Menu component
+ * Containercomponent voor MenuLink- en MenuButton-items.
+ * Rendert een `<ul>` met verticale (standaard) of horizontale oriëntatie.
+ *
+ * Gebruik `Menu` altijd binnen een semantisch element zoals `<nav>` —
+ * dit is de verantwoordelijkheid van de ouder.
+ *
+ * @example
+ * ```tsx
+ * // Verticaal (standaard)
+ * <nav aria-label="Hoofdnavigatie">
+ *   <Menu>
+ *     <MenuLink href="/home">Home</MenuLink>
+ *     <MenuLink href="/over">Over ons</MenuLink>
+ *     <MenuButton onClick={handleLogout}>Uitloggen</MenuButton>
+ *   </Menu>
+ * </nav>
+ *
+ * // Horizontaal
+ * <nav aria-label="Paginanavigatie">
+ *   <Menu orientation="horizontal">
+ *     <MenuLink href="/home" current>Home</MenuLink>
+ *     <MenuLink href="/over">Over ons</MenuLink>
+ *   </Menu>
+ * </nav>
+ * ```
+ */
+export const Menu = React.forwardRef(({ orientation = 'vertical', iconStart = false, className, children, ...props }, ref) => {
+    const classes = classNames('dsn-menu', orientation === 'horizontal' && 'dsn-menu--horizontal', iconStart && 'dsn-menu--icon-start', className);
+    return (_jsx("ul", { ref: ref, className: classes, ...props, children: children }));
+});
+Menu.displayName = 'Menu';
+//# sourceMappingURL=Menu.js.map

package/dist/Menu/Menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Menu.js","sourceRoot":"","sources":["../../src/Menu/Menu.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,YAAY,CAAC;AA+BpB;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,WAAW,GAAG,UAAU,EACxB,SAAS,GAAG,KAAK,EACjB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,WAAW,KAAK,YAAY,IAAI,sBAAsB,EACtD,SAAS,IAAI,sBAAsB,EACnC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACxC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Menu/index.d.ts

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

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

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

package/dist/Menu/index.js

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

package/dist/Menu/index.js.map

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

package/dist/MenuButton/MenuButton.css

@@ -0,0 +1,106 @@
+/**
+ * MenuButton Component
+ * Navigatieknop voor JS-acties met icoon- en badge-ondersteuning.
+ * Semantisch een `<button>`, visueel consistent met MenuLink.
+ *
+ * Gedeelde visuele stijl via --dsn-menu-item-* tokens (menu-item.json).
+ *
+ * Structuur:
+ * <li class="dsn-menu-button">
+ *   <button type="button" class="dsn-menu-button__button">
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-start --></svg>
+ *     <span class="dsn-menu-button__label">Label</span>
+ *     <span class="dsn-dot-badge dsn-dot-badge--negative" aria-hidden="true"></span>
+ *     <svg class="dsn-icon" aria-hidden="true"><!-- icoon-end --></svg>
+ *   </button>
+ * </li>
+ */
+
+/* =============================================================================
+   List item
+   ============================================================================= */
+
+.dsn-menu-button {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* =============================================================================
+   Button
+   ============================================================================= */
+
+.dsn-menu-button__button {
+  /* Button reset */
+  appearance: none;
+  background: none;
+  border: 0;
+  cursor: pointer;
+  position: relative; /* Ankerpunt voor DotBadge */
+
+  /* Layout */
+  display: inline-flex;
+  align-items: center;
+  width: 100%;
+  min-block-size: var(--dsn-menu-item-min-block-size);
+  gap: var(--dsn-menu-item-gap);
+  padding-block: var(--dsn-menu-item-padding-block);
+  padding-inline: var(--dsn-menu-item-padding-inline);
+
+  /* Typography */
+  font-family: inherit;
+  font-size: var(--dsn-menu-item-font-size);
+  font-weight: var(--dsn-menu-item-font-weight);
+  line-height: var(--dsn-menu-item-line-height);
+  text-align: start;
+
+  /* Colors */
+  color: var(--dsn-menu-item-color);
+  background-color: var(--dsn-menu-item-background-color);
+
+  /* Transitions */
+  transition:
+    background-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+}
+
+.dsn-menu-button__button > .dsn-icon {
+  width: var(--dsn-menu-item-icon-size);
+  height: var(--dsn-menu-item-icon-size);
+  flex-shrink: 0;
+}
+
+.dsn-menu-button__label {
+  /* De <button> zelf is full-width via width: 100%.
+     Het label vult de resterende ruimte zodat iconEnd rechts uitlijnt. */
+  flex: 1;
+  text-align: start;
+}
+
+/* =============================================================================
+   States
+   ============================================================================= */
+
+.dsn-menu-button__button:hover {
+  color: var(--dsn-menu-item-hover-color);
+  background-color: var(--dsn-menu-item-hover-background-color);
+}
+
+.dsn-menu-button__button:active {
+  color: var(--dsn-menu-item-active-color);
+  background-color: var(--dsn-menu-item-active-background-color);
+}
+
+.dsn-menu-button__button:focus-visible {
+  background-color: var(--dsn-focus-background-color);
+  color: var(--dsn-focus-color);
+  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);
+}
+