@dsn-starter-kit/components-react 1.0.0

package/dist/BreakoutSection/BreakoutSection.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './BreakoutSection.css';
+/**
+ * BreakoutSection layout component
+ * Laat een sectie "uitslaan" buiten een beperkte paginabreedte om de volledige
+ * viewportbreedte te beslaan via `margin-inline: calc(50% - 50vw)`.
+ *
+ * Vereiste: de parent (.dsn-page-body) heeft `overflow-x: clip` zodat er geen
+ * horizontale scrolbalk verschijnt.
+ *
+ * @example
+ * ```tsx
+ * <BreakoutSection style={{ backgroundColor: 'var(--dsn-color-accent-1-inverse-bg-default)' }}>
+ *   <div style={{ maxInlineSize: 'var(--dsn-page-max-inline-size)', marginInline: 'auto', paddingInline: 'var(--dsn-page-body-padding-inline)' }}>
+ *     <Heading level={2}>Uitgeslagen sectie</Heading>
+ *   </div>
+ * </BreakoutSection>
+ * ```
+ */
+export const BreakoutSection = React.forwardRef(({ as: As = 'section', className, children, ...props }, ref) => {
+    const classes = classNames('dsn-breakout-section', className);
+    return (_jsx(As, { ref: ref, className: classes, ...props, children: children }));
+});
+BreakoutSection.displayName = 'BreakoutSection';
+//# sourceMappingURL=BreakoutSection.js.map

package/dist/BreakoutSection/BreakoutSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreakoutSection.js","sourceRoot":"","sources":["../../src/BreakoutSection/BreakoutSection.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,uBAAuB,CAAC;AAc/B;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,UAAU,CAG7C,CAAC,EAAE,EAAE,EAAE,EAAE,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IAC/D,MAAM,OAAO,GAAG,UAAU,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC;IAE9D,OAAO,CACL,KAAC,EAAE,IAAC,GAAG,EAAE,GAAgC,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACrE,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,WAAW,GAAG,iBAAiB,CAAC"}

package/dist/BreakoutSection/index.d.ts

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

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

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

package/dist/BreakoutSection/index.js

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

package/dist/BreakoutSection/index.js.map

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

package/dist/Button/Button.css

@@ -0,0 +1,337 @@
+/**
+ * Button Component Styles for React
+ * Re-exports the base Button styles from components-html
+ */
+
+/**
+ * Button Component
+ * Uses component tokens for consistent styling
+ */
+
+.dsn-button {
+  /* Reset */
+  display: inline-flex;
+  align-self: flex-start;
+  align-items: center;
+  justify-content: center;
+  position: relative; /* Ankerpunt voor DotBadge */
+
+  /* Typography */
+  font-family: var(--dsn-button-font-family);
+  font-weight: var(--dsn-button-font-weight);
+  line-height: var(--dsn-button-line-height);
+  text-decoration: none;
+
+  /* Borders */
+  border: var(--dsn-button-border-width) solid transparent;
+  border-radius: var(--dsn-button-border-radius);
+
+  /* Interaction */
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default),
+    border-color var(--dsn-transition-duration-normal)
+      var(--dsn-transition-easing-default);
+
+  /* Accessibility - WCAG pointer target */
+  min-block-size: var(--dsn-button-min-block-size);
+  min-inline-size: var(--dsn-button-min-inline-size);
+}
+
+/* =============================================================================
+   Size Variants
+   ============================================================================= */
+
+.dsn-button--size-small {
+  font-size: var(--dsn-button-size-small-font-size);
+  padding-block: var(--dsn-button-size-small-padding-block);
+  padding-inline: var(--dsn-button-size-small-padding-inline);
+  gap: var(--dsn-button-size-small-gap);
+  min-block-size: var(--dsn-button-size-small-min-block-size);
+}
+
+.dsn-button--size-default {
+  font-size: var(--dsn-button-size-default-font-size);
+  padding-block: var(--dsn-button-size-default-padding-block);
+  padding-inline: var(--dsn-button-size-default-padding-inline);
+  gap: var(--dsn-button-size-default-gap);
+}
+
+.dsn-button--size-large {
+  font-size: var(--dsn-button-size-large-font-size);
+  padding-block: var(--dsn-button-size-large-padding-block);
+  padding-inline: var(--dsn-button-size-large-padding-inline);
+  gap: var(--dsn-button-size-large-gap);
+}
+
+/* Icon sizing per button size */
+.dsn-button--size-small > .dsn-icon {
+  width: var(--dsn-button-size-small-icon-size);
+  height: var(--dsn-button-size-small-icon-size);
+}
+
+.dsn-button--size-default > .dsn-icon {
+  width: var(--dsn-button-size-default-icon-size);
+  height: var(--dsn-button-size-default-icon-size);
+}
+
+.dsn-button--size-large > .dsn-icon {
+  width: var(--dsn-button-size-large-icon-size);
+  height: var(--dsn-button-size-large-icon-size);
+}
+
+/* Icon Only Button */
+.dsn-button--icon-only {
+  padding-inline: var(--dsn-button-size-default-icon-only-padding);
+}
+
+.dsn-button--icon-only.dsn-button--size-small {
+  padding-inline: var(--dsn-button-size-small-icon-only-padding);
+}
+
+.dsn-button--icon-only.dsn-button--size-large {
+  padding-inline: var(--dsn-button-size-large-icon-only-padding);
+}
+
+/* Icon Only — hide text label visually, keep accessible for screen readers */
+.dsn-button--icon-only .dsn-button__label {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* =============================================================================
+   Focus State
+   ============================================================================= */
+
+.dsn-button:focus-visible {
+  background-color: var(--dsn-focus-background-color);
+  color: var(--dsn-focus-color);
+  border-color: var(--dsn-focus-background-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);
+}
+
+/* =============================================================================
+   Color Variants
+   ============================================================================= */
+
+/* Variant: Strong (main CTA) */
+.dsn-button--strong {
+  background-color: var(--dsn-button-strong-background-color);
+  color: var(--dsn-button-strong-color);
+  border-color: var(--dsn-button-strong-border-color);
+}
+
+.dsn-button--strong:hover:not(:disabled) {
+  background-color: var(--dsn-button-strong-hover-background-color);
+  color: var(--dsn-button-strong-hover-color);
+  border-color: var(--dsn-button-strong-hover-border-color);
+}
+
+.dsn-button--strong:active:not(:disabled) {
+  background-color: var(--dsn-button-strong-active-background-color);
+  color: var(--dsn-button-strong-active-color);
+  border-color: var(--dsn-button-strong-active-border-color);
+}
+
+/* Variant: Default (alternative actions) */
+.dsn-button--default {
+  background-color: var(--dsn-button-default-background-color);
+  color: var(--dsn-button-default-color);
+  border-color: var(--dsn-button-default-border-color);
+}
+
+.dsn-button--default:hover:not(:disabled) {
+  background-color: var(--dsn-button-default-hover-background-color);
+  color: var(--dsn-button-default-hover-color);
+  border-color: var(--dsn-button-default-hover-border-color);
+}
+
+.dsn-button--default:active:not(:disabled) {
+  background-color: var(--dsn-button-default-active-background-color);
+  color: var(--dsn-button-default-active-color);
+  border-color: var(--dsn-button-default-active-border-color);
+}
+
+/* Variant: Subtle (low emphasis) */
+.dsn-button--subtle {
+  background-color: var(--dsn-button-subtle-background-color);
+  color: var(--dsn-button-subtle-color);
+  border-color: var(--dsn-button-subtle-border-color);
+}
+
+.dsn-button--subtle:hover:not(:disabled) {
+  background-color: var(--dsn-button-subtle-hover-background-color);
+  color: var(--dsn-button-subtle-hover-color);
+  border-color: var(--dsn-button-subtle-hover-border-color);
+}
+
+.dsn-button--subtle:active:not(:disabled) {
+  background-color: var(--dsn-button-subtle-active-background-color);
+  color: var(--dsn-button-subtle-active-color);
+  border-color: var(--dsn-button-subtle-active-border-color);
+}
+
+/* =============================================================================
+   Sentiment Variants: Negative
+   ============================================================================= */
+
+.dsn-button--strong-negative {
+  background-color: var(--dsn-button-strong-negative-background-color);
+  color: var(--dsn-button-strong-negative-color);
+  border-color: var(--dsn-button-strong-negative-border-color);
+}
+
+.dsn-button--strong-negative:hover:not(:disabled) {
+  background-color: var(--dsn-button-strong-negative-hover-background-color);
+  color: var(--dsn-button-strong-negative-hover-color);
+  border-color: var(--dsn-button-strong-negative-hover-border-color);
+}
+
+.dsn-button--strong-negative:active:not(:disabled) {
+  background-color: var(--dsn-button-strong-negative-active-background-color);
+  color: var(--dsn-button-strong-negative-active-color);
+  border-color: var(--dsn-button-strong-negative-active-border-color);
+}
+
+.dsn-button--default-negative {
+  background-color: var(--dsn-button-default-negative-background-color);
+  color: var(--dsn-button-default-negative-color);
+  border-color: var(--dsn-button-default-negative-border-color);
+}
+
+.dsn-button--default-negative:hover:not(:disabled) {
+  background-color: var(--dsn-button-default-negative-hover-background-color);
+  color: var(--dsn-button-default-negative-hover-color);
+  border-color: var(--dsn-button-default-negative-hover-border-color);
+}
+
+.dsn-button--default-negative:active:not(:disabled) {
+  background-color: var(--dsn-button-default-negative-active-background-color);
+  color: var(--dsn-button-default-negative-active-color);
+  border-color: var(--dsn-button-default-negative-active-border-color);
+}
+
+.dsn-button--subtle-negative {
+  background-color: var(--dsn-button-subtle-negative-background-color);
+  color: var(--dsn-button-subtle-negative-color);
+  border-color: var(--dsn-button-subtle-negative-border-color);
+}
+
+.dsn-button--subtle-negative:hover:not(:disabled) {
+  background-color: var(--dsn-button-subtle-negative-hover-background-color);
+  color: var(--dsn-button-subtle-negative-hover-color);
+  border-color: var(--dsn-button-subtle-negative-hover-border-color);
+}
+
+.dsn-button--subtle-negative:active:not(:disabled) {
+  background-color: var(--dsn-button-subtle-negative-active-background-color);
+  color: var(--dsn-button-subtle-negative-active-color);
+  border-color: var(--dsn-button-subtle-negative-active-border-color);
+}
+
+/* =============================================================================
+   Sentiment Variants: Positive
+   ============================================================================= */
+
+.dsn-button--strong-positive {
+  background-color: var(--dsn-button-strong-positive-background-color);
+  color: var(--dsn-button-strong-positive-color);
+  border-color: var(--dsn-button-strong-positive-border-color);
+}
+
+.dsn-button--strong-positive:hover:not(:disabled) {
+  background-color: var(--dsn-button-strong-positive-hover-background-color);
+  color: var(--dsn-button-strong-positive-hover-color);
+  border-color: var(--dsn-button-strong-positive-hover-border-color);
+}
+
+.dsn-button--strong-positive:active:not(:disabled) {
+  background-color: var(--dsn-button-strong-positive-active-background-color);
+  color: var(--dsn-button-strong-positive-active-color);
+  border-color: var(--dsn-button-strong-positive-active-border-color);
+}
+
+.dsn-button--default-positive {
+  background-color: var(--dsn-button-default-positive-background-color);
+  color: var(--dsn-button-default-positive-color);
+  border-color: var(--dsn-button-default-positive-border-color);
+}
+
+.dsn-button--default-positive:hover:not(:disabled) {
+  background-color: var(--dsn-button-default-positive-hover-background-color);
+  color: var(--dsn-button-default-positive-hover-color);
+  border-color: var(--dsn-button-default-positive-hover-border-color);
+}
+
+.dsn-button--default-positive:active:not(:disabled) {
+  background-color: var(--dsn-button-default-positive-active-background-color);
+  color: var(--dsn-button-default-positive-active-color);
+  border-color: var(--dsn-button-default-positive-active-border-color);
+}
+
+.dsn-button--subtle-positive {
+  background-color: var(--dsn-button-subtle-positive-background-color);
+  color: var(--dsn-button-subtle-positive-color);
+  border-color: var(--dsn-button-subtle-positive-border-color);
+}
+
+.dsn-button--subtle-positive:hover:not(:disabled) {
+  background-color: var(--dsn-button-subtle-positive-hover-background-color);
+  color: var(--dsn-button-subtle-positive-hover-color);
+  border-color: var(--dsn-button-subtle-positive-hover-border-color);
+}
+
+.dsn-button--subtle-positive:active:not(:disabled) {
+  background-color: var(--dsn-button-subtle-positive-active-background-color);
+  color: var(--dsn-button-subtle-positive-active-color);
+  border-color: var(--dsn-button-subtle-positive-active-border-color);
+}
+
+/* =============================================================================
+   States
+   ============================================================================= */
+
+/* Disabled State */
+.dsn-button:disabled {
+  background-color: var(--dsn-button-disabled-background-color);
+  color: var(--dsn-button-disabled-color);
+  border-color: var(--dsn-button-disabled-border-color);
+  cursor: not-allowed;
+}
+
+/* Loading State */
+.dsn-button--loading {
+  pointer-events: none;
+}
+
+.dsn-button--loading > .dsn-button__loader {
+  animation: dsn-button-spin 0.8s linear infinite;
+}
+
+@keyframes dsn-button-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Full Width */
+.dsn-button--full-width {
+  width: 100%;
+}
+

package/dist/Button/Button.d.ts

@@ -0,0 +1,90 @@
+import React from 'react';
+import './Button.css';
+export type ButtonVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive';
+export type ButtonSize = 'small' | 'default' | 'large';
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Button visual style
+     * @default 'strong'
+     */
+    variant?: ButtonVariant;
+    /**
+     * Button size
+     * @default 'default'
+     */
+    size?: ButtonSize;
+    /**
+     * Whether button shows loading state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Whether button takes full width of container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether button contains only an icon (adjusts padding)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * 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;
+}
+/**
+ * Button component with multiple variants and sizes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button variant="strong">Save</Button>
+ *
+ * // With icon before text
+ * <Button variant="default" iconStart={<Icon name="plus" />}>
+ *   Add item
+ * </Button>
+ *
+ * // With icon after text
+ * <Button variant="default" iconEnd={<Icon name="arrow-right" />}>
+ *   Next
+ * </Button>
+ *
+ * // With icons on both sides
+ * <Button iconStart={<Icon name="check" />} iconEnd={<Icon name="arrow-right" />}>
+ *   Confirm
+ * </Button>
+ *
+ * // Icon only — children is the accessible text label, icon via iconStart
+ * <Button variant="subtle" iconOnly iconStart={<Icon name="x" />}>
+ *   Sluiten
+ * </Button>
+ *
+ * // Loading state
+ * <Button loading disabled>Saving...</Button>
+ *
+ * // Different sizes
+ * <Button size="small">Small</Button>
+ * <Button size="default">Default</Button>
+ * <Button size="large">Large</Button>
+ *
+ * // Sentiment variants
+ * <Button variant="strong-negative">Delete</Button>
+ * <Button variant="strong-positive">Confirm</Button>
+ * ```
+ */
+export declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,cAAc,CAAC;AAEtB,MAAM,MAAM,aAAa,GACrB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,GACjB,SAAS,GACT,kBAAkB,GAClB,kBAAkB,GAClB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,CAAC;AACtB,MAAM,MAAM,UAAU,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAEvD,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAChF;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IAExB;;;OAGG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;IAElB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,eAAO,MAAM,MAAM,uFAiDlB,CAAC"}

package/dist/Button/Button.js

@@ -0,0 +1,53 @@
+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 './Button.css';
+/**
+ * Button component with multiple variants and sizes
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button variant="strong">Save</Button>
+ *
+ * // With icon before text
+ * <Button variant="default" iconStart={<Icon name="plus" />}>
+ *   Add item
+ * </Button>
+ *
+ * // With icon after text
+ * <Button variant="default" iconEnd={<Icon name="arrow-right" />}>
+ *   Next
+ * </Button>
+ *
+ * // With icons on both sides
+ * <Button iconStart={<Icon name="check" />} iconEnd={<Icon name="arrow-right" />}>
+ *   Confirm
+ * </Button>
+ *
+ * // Icon only — children is the accessible text label, icon via iconStart
+ * <Button variant="subtle" iconOnly iconStart={<Icon name="x" />}>
+ *   Sluiten
+ * </Button>
+ *
+ * // Loading state
+ * <Button loading disabled>Saving...</Button>
+ *
+ * // Different sizes
+ * <Button size="small">Small</Button>
+ * <Button size="default">Default</Button>
+ * <Button size="large">Large</Button>
+ *
+ * // Sentiment variants
+ * <Button variant="strong-negative">Delete</Button>
+ * <Button variant="strong-positive">Confirm</Button>
+ * ```
+ */
+export const Button = React.forwardRef(({ variant = 'strong', size = 'default', loading = false, fullWidth = false, iconOnly = false, iconStart, iconEnd, className, disabled, children, type = 'button', ...props }, ref) => {
+    const classes = classNames('dsn-button', `dsn-button--${variant}`, `dsn-button--size-${size}`, loading && 'dsn-button--loading', fullWidth && 'dsn-button--full-width', iconOnly && 'dsn-button--icon-only', className);
+    const loaderIcon = loading ? (_jsx(Icon, { name: "loader", className: "dsn-button__loader", "aria-hidden": true })) : null;
+    return (_jsxs("button", { ref: ref, type: type, className: classes, disabled: disabled || loading, "aria-busy": loading || undefined, ...props, children: [loading ? loaderIcon : iconStart, children !== undefined && children !== null && (_jsx("span", { className: "dsn-button__label", children: children })), iconEnd] }));
+});
+Button.displayName = 'Button';
+//# sourceMappingURL=Button.js.map

package/dist/Button/Button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.js","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,cAAc,CAAC;AAkEtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,UAAU,CACpC,CACE,EACE,OAAO,GAAG,QAAQ,EAClB,IAAI,GAAG,SAAS,EAChB,OAAO,GAAG,KAAK,EACf,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,OAAO,EACP,SAAS,EACT,QAAQ,EACR,QAAQ,EACR,IAAI,GAAG,QAAQ,EACf,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,YAAY,EACZ,eAAe,OAAO,EAAE,EACxB,oBAAoB,IAAI,EAAE,EAC1B,OAAO,IAAI,qBAAqB,EAChC,SAAS,IAAI,wBAAwB,EACrC,QAAQ,IAAI,uBAAuB,EACnC,SAAS,CACV,CAAC;IAEF,MAAM,UAAU,GAAG,OAAO,CAAC,CAAC,CAAC,CAC3B,KAAC,IAAI,IAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,oBAAoB,wBAAe,CAClE,CAAC,CAAC,CAAC,IAAI,CAAC;IAET,OAAO,CACL,kBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,OAAO,EAClB,QAAQ,EAAE,QAAQ,IAAI,OAAO,eAClB,OAAO,IAAI,SAAS,KAC3B,KAAK,aAER,OAAO,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,SAAS,EAChC,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,IAAI,IAAI,CAC9C,eAAM,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAQ,CACtD,EACA,OAAO,IACD,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC"}

package/dist/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button } from './Button';
+export type { ButtonProps, ButtonVariant, ButtonSize } from './Button';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/Button/index.js

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

package/dist/Button/index.js.map

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

package/dist/ButtonLink/ButtonLink.css

@@ -0,0 +1,29 @@
+/**
+ * ButtonLink Component Styles for React
+ * Re-exports the base ButtonLink styles from components-html
+ */
+
+/**
+ * ButtonLink Component
+ * Resets <a> styles so the element uses dsn-button appearance.
+ * Always combine with dsn-button, dsn-button--{variant}, and dsn-button--size-{size}:
+ *   <a class="dsn-button dsn-button--strong dsn-button--size-default dsn-button-link" href="/">Label</a>
+ */
+
+.dsn-button-link {
+  /* Anchor reset — dsn-button handles most resets already */
+  text-decoration: none; /* Safety net: mocht dsn-button dit ooit weglaten */
+}
+
+/* Disabled staat via aria-disabled — <a> heeft geen native :disabled.
+   dsn-button:disabled matcht niet op <a>, dus we repliceren de stijlen handmatig.
+   pointer-events: none blokkeert ook hover/active (Button's :not(:disabled) matcht
+   altijd op <a>, dus we kunnen niet op die guards vertrouwen). */
+.dsn-button-link[aria-disabled='true'] {
+  background-color: var(--dsn-button-disabled-background-color);
+  color: var(--dsn-button-disabled-color);
+  border-color: var(--dsn-button-disabled-border-color);
+  cursor: not-allowed;
+  pointer-events: none;
+}
+

package/dist/ButtonLink/ButtonLink.d.ts

@@ -0,0 +1,92 @@
+import React from 'react';
+import './ButtonLink.css';
+export type ButtonLinkVariant = 'strong' | 'strong-negative' | 'strong-positive' | 'default' | 'default-negative' | 'default-positive' | 'subtle' | 'subtle-negative' | 'subtle-positive';
+export type ButtonLinkSize = 'small' | 'default' | 'large';
+export interface ButtonLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    /**
+     * Navigation URL
+     */
+    href?: string;
+    /**
+     * Visual style — same variants as Button (excl. 'link')
+     * @default 'strong'
+     */
+    variant?: ButtonLinkVariant;
+    /**
+     * Button size
+     * @default 'default'
+     */
+    size?: ButtonLinkSize;
+    /**
+     * Whether the button-link takes full width of container
+     * @default false
+     */
+    fullWidth?: boolean;
+    /**
+     * Whether button-link contains only an icon (hides label text visually)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Icon element rendered before the label text
+     */
+    iconStart?: React.ReactNode;
+    /**
+     * Icon element rendered after the label text
+     */
+    iconEnd?: React.ReactNode;
+    /**
+     * Whether the link is disabled.
+     * Maps to aria-disabled="true" + tabIndex={-1} + prevents navigation.
+     * <a> has no native disabled attribute.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Whether the link opens in a new tab.
+     * Automatically adds target="_blank", rel="noopener noreferrer",
+     * and an inline "(opent nieuw tabblad)" hint — same behaviour as Link.
+     * @default false
+     */
+    external?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Link content (wrapped in dsn-button__label, same as Button)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * ButtonLink — semantically an <a>, visually styled as a Button.
+ *
+ * Use when an action navigates to a URL but needs the visual prominence of a Button.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (strong, default size)
+ * <ButtonLink href="/volgende">Volgende stap</ButtonLink>
+ *
+ * // Subtle variant
+ * <ButtonLink href="/" variant="subtle">Terug naar overzicht</ButtonLink>
+ *
+ * // With icon
+ * <ButtonLink href="/download" iconStart={<Icon name="download" aria-hidden />}>
+ *   Download rapport
+ * </ButtonLink>
+ *
+ * // Icon-only
+ * <ButtonLink href="/info" iconOnly iconStart={<Icon name="info-circle" aria-hidden />}>
+ *   Meer informatie
+ * </ButtonLink>
+ *
+ * // Disabled
+ * <ButtonLink href="/dashboard" disabled>Niet beschikbaar</ButtonLink>
+ *
+ * // Opens in new tab with visible hint
+ * <ButtonLink href="https://example.com" external>Externe pagina</ButtonLink>
+ * ```
+ */
+export declare const ButtonLink: React.ForwardRefExoticComponent<ButtonLinkProps & React.RefAttributes<HTMLAnchorElement>>;
+//# sourceMappingURL=ButtonLink.d.ts.map