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

package/dist/Button/Button.css

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

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

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

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

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

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

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

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

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

package/dist/Button/index.js.map

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

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

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

package/dist/ButtonLink/ButtonLink.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ButtonLink.d.ts","sourceRoot":"","sources":["../../src/ButtonLink/ButtonLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,MAAM,iBAAiB,GACzB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,GACjB,SAAS,GACT,kBAAkB,GAClB,kBAAkB,GAClB,QAAQ,GACR,iBAAiB,GACjB,iBAAiB,CAAC;AAEtB,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE3D,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IACpF;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;IAE5B;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC;IAEtB;;;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;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;;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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,UAAU,2FAiEtB,CAAC"}

package/dist/ButtonLink/ButtonLink.js

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './ButtonLink.css';
-/**
- * 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 const ButtonLink = React.forwardRef(({ href, variant = 'strong', size = 'default', fullWidth = false, iconOnly = false, iconStart, iconEnd, disabled = false, external = false, className, target, rel, tabIndex, children, onClick, ...props }, ref) => {
-    const classes = classNames('dsn-button', `dsn-button--${variant}`, `dsn-button--size-${size}`, fullWidth && 'dsn-button--full-width', iconOnly && 'dsn-button--icon-only', 'dsn-button-link', className);
-    const handleClick = (e) => {
-        if (disabled) {
-            e.preventDefault();
-            return;
-        }
-        onClick?.(e);
-    };
-    // External links: set target and rel automatically, unless explicitly overridden
-    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, onClick: handleClick, ...props, children: [iconStart, children !== undefined && children !== null && (_jsx("span", { className: "dsn-button__label", children: children })), external && ' (opent nieuw tabblad)', iconEnd] }));
-});
-ButtonLink.displayName = 'ButtonLink';
-//# sourceMappingURL=ButtonLink.js.map