@dsn-starter-kit/components-react 1.0.0

package/dist/SearchInput/SearchInput.css

@@ -0,0 +1,59 @@
+/**
+ * SearchInput Component Styles
+ * Wrapper positions the search icon inline-start inside the input.
+ * The input uses dsn-text-input base styles with extra padding-inline-start
+ * to prevent typed text from overlapping the icon.
+ */
+
+/* Wrapper — positions icon absolutely inside the input */
+.dsn-search-input-wrapper {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--dsn-form-control-max-inline-size);
+}
+
+/* Icon — centered vertically, positioned at inline-start */
+.dsn-search-input__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-start: var(--dsn-form-control-padding-inline-start);
+  transform: translateY(-50%);
+  inline-size: var(--dsn-search-input-icon-size);
+  block-size: var(--dsn-search-input-icon-size);
+  color: var(--dsn-text-input-color);
+  pointer-events: none;
+}
+
+/* Input — extra padding-inline-start to make room for the icon */
+.dsn-search-input {
+  padding-inline-start: var(--dsn-search-input-padding-inline-start-with-icon);
+}
+
+/* Hide browser-native clear button — will be implemented as a separate pattern */
+.dsn-search-input::-webkit-search-cancel-button {
+  display: none;
+}
+.dsn-search-input::-webkit-search-decoration {
+  display: none;
+}
+
+/* Width variants on the wrapper */
+.dsn-search-input-wrapper--width-xs {
+  max-inline-size: var(--dsn-form-control-width-xs);
+}
+.dsn-search-input-wrapper--width-sm {
+  max-inline-size: var(--dsn-form-control-width-sm);
+}
+.dsn-search-input-wrapper--width-md {
+  max-inline-size: var(--dsn-form-control-width-md);
+}
+.dsn-search-input-wrapper--width-lg {
+  max-inline-size: var(--dsn-form-control-width-lg);
+}
+.dsn-search-input-wrapper--width-xl {
+  max-inline-size: var(--dsn-form-control-width-xl);
+}
+.dsn-search-input-wrapper--width-full {
+  max-inline-size: var(--dsn-form-control-width-full);
+}

package/dist/SearchInput/SearchInput.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+import './SearchInput.css';
+export interface SearchInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Whether the input is in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Width variant for the input
+     * @default undefined (uses default max-width from form-control)
+     */
+    width?: FormControlWidth;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Search Input component
+ * Search input with a non-interactive search icon positioned at inline-start.
+ * The icon has the same color as the input text (dsn-text-input-color).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SearchInput placeholder="Zoeken..." />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="search">Zoeken</FormFieldLabel>
+ * <SearchInput id="search" />
+ *
+ * // Invalid state
+ * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export declare const SearchInput: React.ForwardRefExoticComponent<SearchInputProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=SearchInput.d.ts.map

package/dist/SearchInput/SearchInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.d.ts","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,4BAA4B,CAAC;AACpC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAC5C,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,2FAyBvB,CAAC"}

package/dist/SearchInput/SearchInput.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Icon } from '../Icon';
+import '../TextInput/TextInput.css';
+import './SearchInput.css';
+/**
+ * Search Input component
+ * Search input with a non-interactive search icon positioned at inline-start.
+ * The icon has the same color as the input text (dsn-text-input-color).
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <SearchInput placeholder="Zoeken..." />
+ *
+ * // With label
+ * <FormFieldLabel htmlFor="search">Zoeken</FormFieldLabel>
+ * <SearchInput id="search" />
+ *
+ * // Invalid state
+ * <SearchInput invalid aria-invalid="true" aria-describedby="error" />
+ * ```
+ */
+export const SearchInput = React.forwardRef(({ className, invalid, width, ...props }, ref) => {
+    const wrapperClasses = classNames('dsn-search-input-wrapper', width && `dsn-search-input-wrapper--width-${width}`);
+    const inputClasses = classNames('dsn-text-input', 'dsn-search-input', className);
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsx(Icon, { name: "search", className: "dsn-search-input__icon", "aria-hidden": true }), _jsx("input", { ref: ref, type: "search", className: inputClasses, "aria-invalid": invalid || undefined, ...props })] }));
+});
+SearchInput.displayName = 'SearchInput';
+//# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../src/SearchInput/SearchInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,mBAAmB,CAAC;AAwB3B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/C,MAAM,cAAc,GAAG,UAAU,CAC/B,0BAA0B,EAC1B,KAAK,IAAI,mCAAmC,KAAK,EAAE,CACpD,CAAC;IACF,MAAM,YAAY,GAAG,UAAU,CAC7B,gBAAgB,EAChB,kBAAkB,EAClB,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC5B,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,wBAAwB,wBAAe,EACrE,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,SAAS,EAAE,YAAY,kBACT,OAAO,IAAI,SAAS,KAC9B,KAAK,GACT,IACE,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/SearchInput/index.d.ts

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

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

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

package/dist/SearchInput/index.js

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

package/dist/SearchInput/index.js.map

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

package/dist/Select/Select.css

@@ -0,0 +1,86 @@
+/**
+ * Select Component Styles
+ * Wrapper positions the chevron-down icon absolutely at inline-end inside the select.
+ * The select uses dsn-text-input base styles with extra padding-inline-end
+ * to prevent selected text from overlapping the icon.
+ * The native dropdown arrow is hidden via appearance: none.
+ */
+
+/* Wrapper — positions icon absolutely inside the select */
+.dsn-select-wrapper {
+  position: relative;
+  display: block;
+  inline-size: 100%;
+  max-inline-size: var(--dsn-form-control-max-inline-size);
+}
+
+/* Chevron icon — centered vertically, positioned at inline-end */
+.dsn-select__icon {
+  position: absolute;
+  inset-block-start: 50%;
+  inset-inline-end: var(--dsn-select-icon-inset-inline-end);
+  transform: translateY(-50%);
+  inline-size: var(--dsn-select-icon-size);
+  block-size: var(--dsn-select-icon-size);
+  color: var(--dsn-select-icon-color);
+  pointer-events: none;
+}
+
+/* Select — reset browser defaults, hide native arrow, add padding for custom icon */
+/* Also override :read-only styles from dsn-text-input, because browsers consider
+   <select> as :read-only (non-typeable), which incorrectly triggers those styles. */
+/* max-inline-size is set to none so the wrapper controls the width, not the select itself. */
+.dsn-select {
+  appearance: none;
+  background-color: var(--dsn-text-input-background-color);
+  border: var(--dsn-text-input-border-width) solid
+    var(--dsn-text-input-border-color);
+  color: var(--dsn-text-input-color);
+  cursor: pointer;
+  max-inline-size: none;
+  padding-inline-end: var(--dsn-select-padding-inline-end-with-icon);
+}
+
+/* Undo the :read-only styles inherited from dsn-text-input */
+.dsn-select:read-only {
+  background-color: var(--dsn-text-input-background-color);
+  border-color: var(--dsn-text-input-border-color);
+  color: var(--dsn-text-input-color);
+  cursor: pointer;
+}
+
+.dsn-select:disabled {
+  background-color: var(--dsn-text-input-disabled-background-color);
+  border-color: var(--dsn-text-input-disabled-border-color);
+  cursor: not-allowed;
+}
+
+.dsn-select[aria-invalid='true'] {
+  background-color: var(--dsn-text-input-invalid-background-color);
+  border-color: var(--dsn-text-input-invalid-border-color);
+}
+
+/* Remove native arrow in IE/Edge */
+.dsn-select::-ms-expand {
+  display: none;
+}
+
+/* Width variants on the wrapper */
+.dsn-select-wrapper--width-xs {
+  max-inline-size: var(--dsn-form-control-width-xs);
+}
+.dsn-select-wrapper--width-sm {
+  max-inline-size: var(--dsn-form-control-width-sm);
+}
+.dsn-select-wrapper--width-md {
+  max-inline-size: var(--dsn-form-control-width-md);
+}
+.dsn-select-wrapper--width-lg {
+  max-inline-size: var(--dsn-form-control-width-lg);
+}
+.dsn-select-wrapper--width-xl {
+  max-inline-size: var(--dsn-form-control-width-xl);
+}
+.dsn-select-wrapper--width-full {
+  max-inline-size: var(--dsn-form-control-width-full);
+}

package/dist/Select/Select.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { FormControlWidth } from '@dsn-starter-kit/core';
+import '../TextInput/TextInput.css';
+import './Select.css';
+export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
+    /**
+     * Whether the select is in an invalid state
+     * @default false
+     */
+    invalid?: boolean;
+    /**
+     * Width variant for the select
+     * @default undefined (uses default max-width from form-control)
+     */
+    width?: FormControlWidth;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+}
+/**
+ * Select component
+ * Dropdown select with a custom chevron-down icon at inline-end.
+ * The native select arrow is hidden; the custom icon is decorative and non-interactive.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select>
+ *   <option value="">Kies een optie</option>
+ *   <option value="1">Optie 1</option>
+ *   <option value="2">Optie 2</option>
+ * </Select>
+ *
+ * // With label
+ * <FormField label="Land" htmlFor="land">
+ *   <Select id="land">
+ *     <option value="">Kies een land</option>
+ *     <option value="nl">Nederland</option>
+ *     <option value="be">België</option>
+ *   </Select>
+ * </FormField>
+ *
+ * // Width variant
+ * <Select width="lg">...</Select>
+ *
+ * // Invalid state
+ * <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
+ * ```
+ */
+export declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+//# sourceMappingURL=Select.d.ts.map

package/dist/Select/Select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.d.ts","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAc,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAErE,OAAO,4BAA4B,CAAC;AACpC,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC;IAEzB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,MAAM,uFA0BlB,CAAC"}

package/dist/Select/Select.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Icon } from '../Icon';
+import '../TextInput/TextInput.css';
+import './Select.css';
+/**
+ * Select component
+ * Dropdown select with a custom chevron-down icon at inline-end.
+ * The native select arrow is hidden; the custom icon is decorative and non-interactive.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select>
+ *   <option value="">Kies een optie</option>
+ *   <option value="1">Optie 1</option>
+ *   <option value="2">Optie 2</option>
+ * </Select>
+ *
+ * // With label
+ * <FormField label="Land" htmlFor="land">
+ *   <Select id="land">
+ *     <option value="">Kies een land</option>
+ *     <option value="nl">Nederland</option>
+ *     <option value="be">België</option>
+ *   </Select>
+ * </FormField>
+ *
+ * // Width variant
+ * <Select width="lg">...</Select>
+ *
+ * // Invalid state
+ * <Select invalid aria-invalid="true" aria-describedby="error">...</Select>
+ * ```
+ */
+export const Select = React.forwardRef(({ className, invalid, width, disabled, children, ...props }, ref) => {
+    const wrapperClasses = classNames('dsn-select-wrapper', width && `dsn-select-wrapper--width-${width}`);
+    const selectClasses = classNames('dsn-text-input', 'dsn-select', className);
+    return (_jsxs("div", { className: wrapperClasses, children: [_jsx("select", { ref: ref, className: selectClasses, "aria-invalid": invalid || undefined, disabled: disabled, ...props, children: children }), !disabled && (_jsx(Icon, { name: "chevron-down", className: "dsn-select__icon", "aria-hidden": true }))] }));
+});
+Select.displayName = 'Select';
+//# sourceMappingURL=Select.js.map

package/dist/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../src/Select/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,cAAc,CAAC;AAqBtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnE,MAAM,cAAc,GAAG,UAAU,CAC/B,oBAAoB,EACpB,KAAK,IAAI,6BAA6B,KAAK,EAAE,CAC9C,CAAC;IAEF,MAAM,aAAa,GAAG,UAAU,CAAC,gBAAgB,EAAE,YAAY,EAAE,SAAS,CAAC,CAAC;IAE5E,OAAO,CACL,eAAK,SAAS,EAAE,cAAc,aAC5B,iBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,aAAa,kBACV,OAAO,IAAI,SAAS,EAClC,QAAQ,EAAE,QAAQ,KACd,KAAK,YAER,QAAQ,GACF,EACR,CAAC,QAAQ,IAAI,CACZ,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,kBAAkB,wBAAe,CACtE,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/Select/index.d.ts

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

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

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

package/dist/Select/index.js

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

package/dist/Select/index.js.map

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

package/dist/SkipLink/SkipLink.css

@@ -0,0 +1,58 @@
+/**
+ * SkipLink Component Styles for React
+ * Re-exports the base SkipLink styles from components-html
+ */
+
+/**
+ * SkipLink Component
+ * Accessibility component — eerste focusbare element op de pagina.
+ * Verborgen totdat de gebruiker er met Tab op focust.
+ */
+
+.dsn-skip-link {
+  /* Verborgen standaard — zelfde patroon als dsn-visually-hidden */
+  position: absolute;
+  clip-path: inset(50%);
+  overflow: hidden;
+  white-space: nowrap;
+
+  /* Hoge z-index zodat de link altijd boven andere elementen staat bij focus */
+  z-index: var(--dsn-skip-link-z-index);
+
+  /* Structuur */
+  display: inline-block;
+
+  /* Spacing */
+  padding-block: var(--dsn-skip-link-padding-block);
+  padding-inline: var(--dsn-skip-link-padding-inline);
+
+  /* Afronding */
+  border-radius: var(--dsn-skip-link-border-radius);
+
+  /* Typografie */
+  font: inherit;
+  text-decoration: none;
+}
+
+/* Focus state — link wordt zichtbaar en gepositioneerd */
+.dsn-skip-link:focus-visible {
+  /* Clip verwijderen zodat de link zichtbaar wordt */
+  clip-path: none;
+  overflow: visible;
+  white-space: normal;
+
+  /* Positionering in de hoek van het viewport */
+  inset-block-start: var(--dsn-skip-link-offset-block-start);
+  inset-inline-start: var(--dsn-skip-link-offset-inline-start);
+
+  /* Focus stijl — consistent met dsn-link focus */
+  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);
+}
+

package/dist/SkipLink/SkipLink.d.ts

@@ -0,0 +1,35 @@
+import React from 'react';
+import './SkipLink.css';
+export interface SkipLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Het doel-ID waarnaar de gebruiker gesprongen wordt (inclusief `#`).
+     * Het element met dit ID moet `tabindex="-1"` hebben als het niet natively focusbaar is.
+     * @example "#main-content"
+     */
+    href: string;
+    /**
+     * Tekst van de skip-link — zichtbaar voor screenreaders en bij focus.
+     * @default "Ga direct naar de hoofdinhoud"
+     */
+    children?: React.ReactNode;
+    /**
+     * Extra CSS klassen
+     */
+    className?: string;
+}
+/**
+ * SkipLink — toegankelijkheidskoppeling om herhalende navigatie te omzeilen.
+ *
+ * Plaatst de link als **eerste focusbaar element** in de DOM, vóór `<header>` en `<nav>`.
+ * Voldoet aan WCAG 2.1 succescriterium 2.4.1 (Bypass Blocks, Level A).
+ *
+ * @example
+ * ```tsx
+ * // Standaard gebruik — eerste element in <body>
+ * <SkipLink href="#main-content">Ga direct naar de hoofdinhoud</SkipLink>
+ * <header>...</header>
+ * <main id="main-content" tabIndex={-1}>...</main>
+ * ```
+ */
+export declare const SkipLink: React.ForwardRefExoticComponent<SkipLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=SkipLink.d.ts.map

package/dist/SkipLink/SkipLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.d.ts","sourceRoot":"","sources":["../../src/SkipLink/SkipLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAClF;;;;OAIG;IACH,IAAI,EAAE,MAAM,CAAC;IAEb;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,QAAQ,yFAgBpB,CAAC"}

package/dist/SkipLink/SkipLink.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './SkipLink.css';
+/**
+ * SkipLink — toegankelijkheidskoppeling om herhalende navigatie te omzeilen.
+ *
+ * Plaatst de link als **eerste focusbaar element** in de DOM, vóór `<header>` en `<nav>`.
+ * Voldoet aan WCAG 2.1 succescriterium 2.4.1 (Bypass Blocks, Level A).
+ *
+ * @example
+ * ```tsx
+ * // Standaard gebruik — eerste element in <body>
+ * <SkipLink href="#main-content">Ga direct naar de hoofdinhoud</SkipLink>
+ * <header>...</header>
+ * <main id="main-content" tabIndex={-1}>...</main>
+ * ```
+ */
+export const SkipLink = React.forwardRef(({ href, children = 'Ga direct naar de hoofdinhoud', className, ...props }, ref) => {
+    return (_jsx("a", { ref: ref, href: href, className: classNames('dsn-skip-link', className), ...props, children: children }));
+});
+SkipLink.displayName = 'SkipLink';
+//# sourceMappingURL=SkipLink.js.map

package/dist/SkipLink/SkipLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkipLink.js","sourceRoot":"","sources":["../../src/SkipLink/SkipLink.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAsBxB;;;;;;;;;;;;;GAaG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CACE,EAAE,IAAI,EAAE,QAAQ,GAAG,+BAA+B,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,OAAO,CACL,YACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,UAAU,CAAC,eAAe,EAAE,SAAS,CAAC,KAC7C,KAAK,YAER,QAAQ,GACP,CACL,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/SkipLink/index.d.ts

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

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

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

package/dist/SkipLink/index.js

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

package/dist/SkipLink/index.js.map

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

package/dist/Spinner/Spinner.css

@@ -0,0 +1,101 @@
+/**
+ * Spinner Component
+ * Cirkelvormige laadindicator voor onbepaalde wachttijden.
+ *
+ * role="status" op de container maakt de laadtoestand toegankelijk voor screenreaders.
+ * De SVG-cirkel is decoratief (aria-hidden="true") — het label geeft de toegankelijke naam.
+ *
+ * Usage:
+ * <!-- Standaard (label rechts) -->
+ * <div class="dsn-spinner" role="status">
+ *   <svg class="dsn-spinner__circle" viewBox="0 0 24 24" aria-hidden="true">
+ *     <circle class="dsn-spinner__track" cx="12" cy="12" r="10" />
+ *     <circle class="dsn-spinner__arc" cx="12" cy="12" r="10" />
+ *   </svg>
+ *   <span class="dsn-spinner__label">Laden...</span>
+ * </div>
+ *
+ * <!-- Grote variant (label gecentreerd onder spinner) -->
+ * <div class="dsn-spinner dsn-spinner--large" role="status">
+ *   <svg class="dsn-spinner__circle" viewBox="0 0 24 24" aria-hidden="true">
+ *     <circle class="dsn-spinner__track" cx="12" cy="12" r="10" />
+ *     <circle class="dsn-spinner__arc" cx="12" cy="12" r="10" />
+ *   </svg>
+ *   <span class="dsn-spinner__label">Laden...</span>
+ * </div>
+ *
+ * <!-- Visueel verborgen label (toegankelijk voor screenreaders via dsn-visually-hidden) -->
+ * <div class="dsn-spinner" role="status">
+ *   <svg class="dsn-spinner__circle" viewBox="0 0 24 24" aria-hidden="true">
+ *     <circle class="dsn-spinner__track" cx="12" cy="12" r="10" />
+ *     <circle class="dsn-spinner__arc" cx="12" cy="12" r="10" />
+ *   </svg>
+ *   <span class="dsn-spinner__label dsn-visually-hidden">Laden...</span>
+ * </div>
+ */
+
+.dsn-spinner {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  gap: var(--dsn-spinner-gap-size);
+}
+
+.dsn-spinner--large {
+  flex-direction: column;
+  align-items: center;
+}
+
+.dsn-spinner__circle {
+  flex-shrink: 0;
+  width: var(--dsn-spinner-size);
+  height: var(--dsn-spinner-size);
+  animation: dsn-spinner-rotate var(--dsn-spinner-duration) linear infinite;
+  transform-origin: center;
+}
+
+.dsn-spinner--large .dsn-spinner__circle {
+  width: var(--dsn-spinner-size-large);
+  height: var(--dsn-spinner-size-large);
+}
+
+/* Baan: volledige achtergrondcirkel als visuele rails */
+.dsn-spinner__track {
+  fill: none;
+  stroke: var(--dsn-spinner-track-color);
+  stroke-width: var(--dsn-spinner-stroke-width);
+}
+
+/* Boog: gedeeltelijke cirkel die de animatie zichtbaar maakt */
+.dsn-spinner__arc {
+  fill: none;
+  stroke: var(--dsn-spinner-color);
+  stroke-width: var(--dsn-spinner-stroke-width);
+  stroke-linecap: round;
+  /* 75% zichtbaar (47.12 van 62.83 omtrek), 25% gap — bij r=10 in 24-unit viewBox */
+  stroke-dasharray: 47 16;
+}
+
+@keyframes dsn-spinner-rotate {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* prefers-reduced-motion: subtiel pulseren i.p.v. roteren */
+@media (prefers-reduced-motion: reduce) {
+  .dsn-spinner__circle {
+    animation: dsn-spinner-pulse var(--dsn-spinner-duration) ease-in-out
+      infinite alternate;
+  }
+}
+
+@keyframes dsn-spinner-pulse {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0.3;
+  }
+}
+

package/dist/Spinner/Spinner.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import './Spinner.css';
+export type SpinnerSize = 'default' | 'large';
+export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Tekstlabel dat de laadtoestand beschrijft voor alle gebruikers.
+     * Altijd vereist — ook bij hideLabel wordt het label doorgegeven aan screenreaders.
+     */
+    label: string;
+    /**
+     * Verbergt het label visueel maar behoudt het voor screenreaders via dsn-visually-hidden
+     * @default false
+     */
+    hideLabel?: boolean;
+    /**
+     * Grootte van de spinner.
+     * default: 24×24px, label rechts.
+     * large: 48×48px, label gecentreerd onder de spinner.
+     * @default 'default'
+     */
+    size?: SpinnerSize;
+}
+/**
+ * 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 declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=Spinner.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,eAAe,CAAC;AAEvB,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AAE9C,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,OAAO,qFA8BnB,CAAC"}