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

package/dist/Spinner/Spinner.css

@@ -1,118 +0,0 @@
-/**
- * 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);
-  }
-}
-
-/* Forced colors (High Contrast mode)
-   SVG stroke wordt genegeerd — forced-color-adjust: auto laat de browser
-   de kleuren overnemen. Track verbergen: enkel de arc is informatief. */
-@media (forced-colors: active) {
-  .dsn-spinner__circle {
-    forced-color-adjust: none;
-  }
-
-  .dsn-spinner__track {
-    stroke: transparent;
-  }
-
-  .dsn-spinner__arc {
-    stroke: CanvasText;
-  }
-}
-
-/* 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

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

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

package/dist/Spinner/Spinner.js

@@ -1,30 +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 './Spinner.css';
-/**
- * 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 const Spinner = React.forwardRef(({ className, label, hideLabel = false, size = 'default', ...props }, ref) => {
-    const classes = classNames('dsn-spinner', size === 'large' && 'dsn-spinner--large', className);
-    const labelClasses = classNames('dsn-spinner__label', hideLabel && 'dsn-visually-hidden');
-    return (_jsxs("div", { ref: ref, className: classes, role: "status", ...props, children: [_jsxs("svg", { className: "dsn-spinner__circle", viewBox: "0 0 24 24", "aria-hidden": "true", children: [_jsx("circle", { className: "dsn-spinner__track", cx: "12", cy: "12", r: "10" }), _jsx("circle", { className: "dsn-spinner__arc", cx: "12", cy: "12", r: "10" })] }), _jsx("span", { className: labelClasses, children: label })] }));
-});
-Spinner.displayName = 'Spinner';
-//# sourceMappingURL=Spinner.js.map

package/dist/Spinner/Spinner.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Spinner.js","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,eAAe,CAAC;AA0BvB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,IAAI,GAAG,SAAS,EAAE,GAAG,KAAK,EAAE,EACnE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CACxB,aAAa,EACb,IAAI,KAAK,OAAO,IAAI,oBAAoB,EACxC,SAAS,CACV,CAAC;IAEF,MAAM,YAAY,GAAG,UAAU,CAC7B,oBAAoB,EACpB,SAAS,IAAI,qBAAqB,CACnC,CAAC;IAEF,OAAO,CACL,eAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAC,QAAQ,KAAK,KAAK,aACxD,eACE,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAC,WAAW,iBACP,MAAM,aAElB,iBAAQ,SAAS,EAAC,oBAAoB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,EAChE,iBAAQ,SAAS,EAAC,kBAAkB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAG,IAC1D,EACN,eAAM,SAAS,EAAE,YAAY,YAAG,KAAK,GAAQ,IACzC,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Spinner/index.d.ts

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

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

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

package/dist/Spinner/index.js

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

package/dist/Spinner/index.js.map

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

package/dist/Stack/Stack.css

@@ -1,59 +0,0 @@
-/**
- * Stack Component Styles for React
- * Re-exports the base Stack styles from components-html
- */
-
-/**
- * Stack Layout Component
- * Applies consistent vertical spacing between direct child elements using flexbox + gap.
- *
- * Usage:
- * <!-- Default (md = 8px) -->
- * <div class="dsn-stack">
- *   <div>...</div>
- *   <div>...</div>
- * </div>
- *
- * <!-- Explicit space variant -->
- * <div class="dsn-stack dsn-stack--space-lg">
- *   <div>...</div>
- *   <div>...</div>
- * </div>
- */
-
-.dsn-stack {
-  --dsn-stack-space: var(--dsn-space-row-md);
-  display: flex;
-  flex-direction: column;
-  gap: var(--dsn-stack-space);
-}
-
-/* Space variant modifiers */
-.dsn-stack--space-sm {
-  --dsn-stack-space: var(--dsn-space-row-sm);
-}
-.dsn-stack--space-md {
-  --dsn-stack-space: var(--dsn-space-row-md);
-}
-.dsn-stack--space-lg {
-  --dsn-stack-space: var(--dsn-space-row-lg);
-}
-.dsn-stack--space-xl {
-  --dsn-stack-space: var(--dsn-space-row-xl);
-}
-.dsn-stack--space-2xl {
-  --dsn-stack-space: var(--dsn-space-row-2xl);
-}
-.dsn-stack--space-3xl {
-  --dsn-stack-space: var(--dsn-space-row-3xl);
-}
-.dsn-stack--space-4xl {
-  --dsn-stack-space: var(--dsn-space-row-4xl);
-}
-.dsn-stack--space-5xl {
-  --dsn-stack-space: var(--dsn-space-row-5xl);
-}
-.dsn-stack--space-6xl {
-  --dsn-stack-space: var(--dsn-space-row-6xl);
-}
-

package/dist/Stack/Stack.d.ts

@@ -1,35 +0,0 @@
-import React from 'react';
-import './Stack.css';
-export type StackSpace = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | '6xl';
-export interface StackProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * Verticale ruimte tussen directe child-elementen
-     * @default 'md'
-     */
-    space?: StackSpace;
-    /**
-     * Child-elementen om verticaal te stapelen
-     */
-    children?: React.ReactNode;
-}
-/**
- * Stack layout component
- * Brengt consistente verticale ruimte aan tussen directe child-elementen via flexbox + gap.
- *
- * @example
- * ```tsx
- * // Default (md = 8px)
- * <Stack>
- *   <Paragraph>Eerste paragraaf</Paragraph>
- *   <Paragraph>Tweede paragraaf</Paragraph>
- * </Stack>
- *
- * // Grote ruimte tussen secties
- * <Stack space="3xl">
- *   <section>...</section>
- *   <section>...</section>
- * </Stack>
- * ```
- */
-export declare const Stack: React.ForwardRefExoticComponent<StackProps & React.RefAttributes<HTMLDivElement>>;
-//# sourceMappingURL=Stack.d.ts.map

package/dist/Stack/Stack.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.d.ts","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,UAAU,GAClB,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,IAAI,GACJ,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,GACL,KAAK,CAAC;AAEV,MAAM,WAAW,UAAW,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACtE;;;OAGG;IACH,KAAK,CAAC,EAAE,UAAU,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,eAAO,MAAM,KAAK,mFAcjB,CAAC"}

package/dist/Stack/Stack.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './Stack.css';
-/**
- * Stack layout component
- * Brengt consistente verticale ruimte aan tussen directe child-elementen via flexbox + gap.
- *
- * @example
- * ```tsx
- * // Default (md = 8px)
- * <Stack>
- *   <Paragraph>Eerste paragraaf</Paragraph>
- *   <Paragraph>Tweede paragraaf</Paragraph>
- * </Stack>
- *
- * // Grote ruimte tussen secties
- * <Stack space="3xl">
- *   <section>...</section>
- *   <section>...</section>
- * </Stack>
- * ```
- */
-export const Stack = React.forwardRef(({ className, space = 'md', children, ...props }, ref) => {
-    const classes = classNames('dsn-stack', space !== 'md' && `dsn-stack--space-${space}`, className);
-    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
-});
-Stack.displayName = 'Stack';
-//# sourceMappingURL=Stack.js.map

package/dist/Stack/Stack.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Stack.js","sourceRoot":"","sources":["../../src/Stack/Stack.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,aAAa,CAAC;AA0BrB;;;;;;;;;;;;;;;;;;GAkBG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,SAAS,EAAE,KAAK,GAAG,IAAI,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CACxB,WAAW,EACX,KAAK,KAAK,IAAI,IAAI,oBAAoB,KAAK,EAAE,EAC7C,SAAS,CACV,CAAC;IAEF,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Stack/index.d.ts

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

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

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

package/dist/Stack/index.js

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

package/dist/Stack/index.js.map

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

package/dist/StatusBadge/StatusBadge.css

@@ -1,87 +0,0 @@
-/**
- * StatusBadge Component Styles for React
- * Re-exports the base StatusBadge styles from components-html
- */
-
-/**
- * Status Badge Component
- * Compact label that communicates status with a signal color and optional icon.
- *
- * Usage:
- * <!-- Neutral (default), without icon -->
- * <strong class="dsn-status-badge">Actief</strong>
- *
- * <!-- Info variant (with icon) -->
- * <strong class="dsn-status-badge dsn-status-badge--info">
- *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- info-circle --></svg>
- *   Nieuw
- * </strong>
- *
- * <!-- Positive variant (with icon) -->
- * <strong class="dsn-status-badge dsn-status-badge--positive">
- *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- circle-check --></svg>
- *   Goedgekeurd
- * </strong>
- *
- * <!-- Negative variant (with icon) -->
- * <strong class="dsn-status-badge dsn-status-badge--negative">
- *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- exclamation-circle --></svg>
- *   Afgewezen
- * </strong>
- *
- * <!-- Warning variant (with icon) -->
- * <strong class="dsn-status-badge dsn-status-badge--warning">
- *   <svg class="dsn-icon dsn-icon--sm" aria-hidden="true"><!-- alert-triangle --></svg>
- *   Let op
- * </strong>
- */
-
-.dsn-status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--dsn-status-badge-gap);
-  font-family: inherit;
-  font-size: var(--dsn-status-badge-font-size);
-  line-height: var(--dsn-status-badge-line-height);
-  text-transform: var(--dsn-status-badge-text-transform);
-  color: var(--dsn-status-badge-neutral-color);
-  background-color: var(--dsn-status-badge-neutral-background-color);
-  border-radius: var(--dsn-status-badge-border-radius);
-  border: var(--dsn-status-badge-border-width) solid
-    var(--dsn-status-badge-border-color);
-  padding-block: var(--dsn-status-badge-padding-block);
-  padding-inline: var(--dsn-status-badge-padding-inline);
-}
-
-/* Info variant */
-.dsn-status-badge--info {
-  color: var(--dsn-status-badge-info-color);
-  background-color: var(--dsn-status-badge-info-background-color);
-}
-
-/* Positive variant */
-.dsn-status-badge--positive {
-  color: var(--dsn-status-badge-positive-color);
-  background-color: var(--dsn-status-badge-positive-background-color);
-}
-
-/* Negative variant */
-.dsn-status-badge--negative {
-  color: var(--dsn-status-badge-negative-color);
-  background-color: var(--dsn-status-badge-negative-background-color);
-}
-
-/* Warning variant */
-.dsn-status-badge--warning {
-  color: var(--dsn-status-badge-warning-color);
-  background-color: var(--dsn-status-badge-warning-background-color);
-}
-
-/* Icon sizing — inherits text color via color: inherit */
-.dsn-status-badge > .dsn-icon {
-  flex-shrink: 0;
-  width: var(--dsn-status-badge-icon-size);
-  height: var(--dsn-status-badge-icon-size);
-  color: inherit;
-}
-

package/dist/StatusBadge/StatusBadge.d.ts

@@ -1,50 +0,0 @@
-import React from 'react';
-import './StatusBadge.css';
-export type StatusBadgeVariant = 'neutral' | 'positive' | 'negative' | 'warning' | 'info';
-export interface StatusBadgeProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * Semantische variant die de signaalkleur bepaalt
-     * @default 'neutral'
-     */
-    variant?: StatusBadgeVariant;
-    /**
-     * Optioneel decoratief icoon vóór de badge-tekst (altijd aria-hidden)
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Badge-tekst (verplicht)
-     */
-    children: React.ReactNode;
-}
-/**
- * StatusBadge component
- * Compact label dat een status communiceert met een signaalkleur en optioneel icoon.
- *
- * @example
- * ```tsx
- * // Neutral (default), zonder icoon
- * <StatusBadge>Actief</StatusBadge>
- *
- * // Positive met icoon
- * <StatusBadge variant="positive" iconStart={<Icon name="circle-check" size="sm" aria-hidden />}>
- *   Goedgekeurd
- * </StatusBadge>
- *
- * // Negative met icoon
- * <StatusBadge variant="negative" iconStart={<Icon name="exclamation-circle" size="sm" aria-hidden />}>
- *   Afgewezen
- * </StatusBadge>
- *
- * // Info met icoon
- * <StatusBadge variant="info" iconStart={<Icon name="info-circle" size="sm" aria-hidden />}>
- *   Nieuw
- * </StatusBadge>
- *
- * // Warning met icoon
- * <StatusBadge variant="warning" iconStart={<Icon name="alert-triangle" size="sm" aria-hidden />}>
- *   Let op
- * </StatusBadge>
- * ```
- */
-export declare const StatusBadge: React.ForwardRefExoticComponent<StatusBadgeProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/StatusBadge/StatusBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusBadge.d.ts","sourceRoot":"","sources":["../../src/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAC1B,SAAS,GACT,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,CAAC;AAEX,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IACzE;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;OAEG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,eAAO,MAAM,WAAW,sFAevB,CAAC"}

package/dist/StatusBadge/StatusBadge.js

@@ -1,40 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './StatusBadge.css';
-/**
- * StatusBadge component
- * Compact label dat een status communiceert met een signaalkleur en optioneel icoon.
- *
- * @example
- * ```tsx
- * // Neutral (default), zonder icoon
- * <StatusBadge>Actief</StatusBadge>
- *
- * // Positive met icoon
- * <StatusBadge variant="positive" iconStart={<Icon name="circle-check" size="sm" aria-hidden />}>
- *   Goedgekeurd
- * </StatusBadge>
- *
- * // Negative met icoon
- * <StatusBadge variant="negative" iconStart={<Icon name="exclamation-circle" size="sm" aria-hidden />}>
- *   Afgewezen
- * </StatusBadge>
- *
- * // Info met icoon
- * <StatusBadge variant="info" iconStart={<Icon name="info-circle" size="sm" aria-hidden />}>
- *   Nieuw
- * </StatusBadge>
- *
- * // Warning met icoon
- * <StatusBadge variant="warning" iconStart={<Icon name="alert-triangle" size="sm" aria-hidden />}>
- *   Let op
- * </StatusBadge>
- * ```
- */
-export const StatusBadge = React.forwardRef(({ className, variant = 'neutral', iconStart, children, ...props }, ref) => {
-    const classes = classNames('dsn-status-badge', variant !== 'neutral' && `dsn-status-badge--${variant}`, className);
-    return (_jsxs("strong", { ref: ref, className: classes, ...props, children: [iconStart, children] }));
-});
-StatusBadge.displayName = 'StatusBadge';
-//# sourceMappingURL=StatusBadge.js.map

package/dist/StatusBadge/StatusBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusBadge.js","sourceRoot":"","sources":["../../src/StatusBadge/StatusBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AA2B3B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,OAAO,KAAK,SAAS,IAAI,qBAAqB,OAAO,EAAE,EACvD,SAAS,CACV,CAAC;IAEF,OAAO,CACL,kBAAQ,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,aAC5C,SAAS,EACT,QAAQ,IACF,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/StatusBadge/index.d.ts

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

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

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

package/dist/StatusBadge/index.js

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

package/dist/StatusBadge/index.js.map

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