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

package/dist/Image/index.d.ts

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

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

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

package/dist/Image/index.js

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

package/dist/Image/index.js.map

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

package/dist/Link/Link.css

@@ -1,113 +0,0 @@
-/**
- * Link Component Styles for React
- * Re-exports the base Link styles from components-html
- */
-
-/**
- * Link Component
- * Uses component tokens for consistent styling
- */
-
-.dsn-link {
-  /* Layout */
-  display: inline-flex;
-  align-self: flex-start;
-  align-items: center;
-  gap: var(--dsn-link-gap);
-  position: relative; /* Ankerpunt voor DotBadge */
-
-  /* Typography */
-  color: var(--dsn-link-color);
-  text-decoration-line: var(--dsn-link-text-decoration-line);
-  text-decoration-color: var(--dsn-link-text-decoration-color);
-  text-decoration-thickness: var(--dsn-link-text-decoration-thickness);
-  text-underline-offset: var(--dsn-link-text-underline-offset);
-  font: inherit;
-
-  /* Interaction */
-  cursor: pointer;
-  transition:
-    color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default),
-    text-decoration-color var(--dsn-transition-duration-normal)
-      var(--dsn-transition-easing-default);
-}
-
-/* Icon sizing */
-.dsn-link > .dsn-icon {
-  width: var(--dsn-link-icon-size);
-  height: var(--dsn-link-icon-size);
-  flex-shrink: 0;
-}
-
-/* Size Variants */
-.dsn-link--size-small {
-  font-size: var(--dsn-link-size-small-font-size);
-  gap: var(--dsn-link-size-small-gap);
-}
-
-.dsn-link--size-default {
-  font-size: var(--dsn-link-size-default-font-size);
-  gap: var(--dsn-link-size-default-gap);
-}
-
-.dsn-link--size-large {
-  font-size: var(--dsn-link-size-large-font-size);
-  gap: var(--dsn-link-size-large-gap);
-}
-
-/* Icon sizing per link size */
-.dsn-link--size-small > .dsn-icon {
-  width: var(--dsn-link-size-small-icon-size);
-  height: var(--dsn-link-size-small-icon-size);
-}
-
-.dsn-link--size-default > .dsn-icon {
-  width: var(--dsn-link-size-default-icon-size);
-  height: var(--dsn-link-size-default-icon-size);
-}
-
-.dsn-link--size-large > .dsn-icon {
-  width: var(--dsn-link-size-large-icon-size);
-  height: var(--dsn-link-size-large-icon-size);
-}
-
-/* Hover */
-.dsn-link:hover:not([aria-disabled='true']) {
-  color: var(--dsn-link-hover-color);
-  text-decoration-line: var(--dsn-link-hover-text-decoration-line);
-}
-
-/* Active */
-.dsn-link:active:not([aria-disabled='true']) {
-  color: var(--dsn-link-active-color);
-}
-
-/* Focus */
-.dsn-link:focus-visible {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  text-decoration: none;
-  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);
-  box-decoration-break: clone;
-}
-
-/* Current page */
-.dsn-link[aria-current='page'] {
-  cursor: default;
-  text-decoration-line: none;
-}
-
-/* Disabled */
-.dsn-link[aria-disabled='true'] {
-  color: var(--dsn-link-disabled-color);
-  text-decoration-line: none;
-  cursor: not-allowed;
-  pointer-events: none;
-}
-

package/dist/Link/Link.d.ts

@@ -1,80 +0,0 @@
-import React from 'react';
-import './Link.css';
-export type LinkSize = 'small' | 'default' | 'large';
-export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /**
-     * Whether the link is disabled
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Whether the link represents the current page
-     * @default false
-     */
-    current?: boolean;
-    /**
-     * Link size — controls font-size, gap, and icon size.
-     * When omitted, the link inherits the surrounding font (ideal for inline usage in paragraphs).
-     */
-    size?: LinkSize;
-    /**
-     * Icon element rendered before the link text
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Icon element rendered after the link text
-     */
-    iconEnd?: React.ReactNode;
-    /**
-     * Whether the link opens in a new tab.
-     * Automatically adds target="_blank", rel="noopener noreferrer",
-     * and an inline "(opent nieuw tabblad)" hint.
-     * @default false
-     */
-    external?: boolean;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-    /**
-     * Link content
-     */
-    children?: React.ReactNode;
-}
-/**
- * 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 declare const Link: React.ForwardRefExoticComponent<LinkProps & React.RefAttributes<HTMLAnchorElement>>;
-//# sourceMappingURL=Link.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../src/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAErD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC9E;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAEhB;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,eAAO,MAAM,IAAI,qFA6DhB,CAAC"}

package/dist/Link/Link.js

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

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

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

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

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

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

package/dist/Link/index.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/LinkButton/index.js.map

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

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

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

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

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

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

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

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

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

package/dist/Logo/index.js

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

package/dist/Logo/index.js.map

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

package/dist/Menu/Menu.css

@@ -1,57 +0,0 @@
-/**
- * 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);
-}
-