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

package/dist/DateInputGroup/DateInputGroup.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 { NumberInput } from '../NumberInput';
-import './DateInputGroup.css';
-/**
- * Date Input Group component
- * Three separate inputs for day, month and year.
- * More accessible than a native date picker: works consistently across all browsers and
- * devices, and allows partial input (e.g. year only).
- *
- * Wrap in a FormFieldset for a complete form field with legend and error message.
- *
- * @example
- * ```tsx
- * // Basic usage
- * <DateInputGroup
- *   value={{ day: '', month: '', year: '' }}
- *   onChange={(val) => setValue(val)}
- * />
- *
- * // Complete form field
- * <FormFieldset>
- *   <FormFieldLegend>Geboortedatum</FormFieldLegend>
- *   <FormFieldDescription>Bijvoorbeeld: 15 3 1990</FormFieldDescription>
- *   <DateInputGroup
- *     id="geboortedatum"
- *     value={value}
- *     onChange={setValue}
- *   />
- * </FormFieldset>
- *
- * // Invalid state
- * <DateInputGroup invalid value={value} onChange={setValue} />
- * ```
- */
-export const DateInputGroup = React.forwardRef(({ className, value, onChange, invalid, disabled, id, ...props }, ref) => {
-    const classes = classNames('dsn-date-input-group', className);
-    const handleChange = (field) => (e) => {
-        onChange?.({
-            day: value?.day ?? '',
-            month: value?.month ?? '',
-            year: value?.year ?? '',
-            [field]: e.target.value,
-        });
-    };
-    const dayId = id ? `${id}-dag` : undefined;
-    const monthId = id ? `${id}-maand` : undefined;
-    const yearId = id ? `${id}-jaar` : undefined;
-    return (_jsxs("div", { ref: ref, className: classes, ...props, children: [_jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: dayId, children: "Dag" }), _jsx(NumberInput, { id: dayId, width: "xs", value: value?.day ?? '', onChange: handleChange('day'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "DD", min: 1, max: 31 })] }), _jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: monthId, children: "Maand" }), _jsx(NumberInput, { id: monthId, width: "xs", value: value?.month ?? '', onChange: handleChange('month'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "MM", min: 1, max: 12 })] }), _jsxs("div", { className: "dsn-date-input-group__field", children: [_jsx("label", { className: "dsn-date-input-group__label", htmlFor: yearId, children: "Jaar" }), _jsx(NumberInput, { id: yearId, width: "sm", value: value?.year ?? '', onChange: handleChange('year'), invalid: invalid, "aria-invalid": invalid || undefined, disabled: disabled, placeholder: "JJJJ", min: 1, max: 9999 })] })] }));
-});
-DateInputGroup.displayName = 'DateInputGroup';
-//# sourceMappingURL=DateInputGroup.js.map

package/dist/DateInputGroup/DateInputGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DateInputGroup.js","sourceRoot":"","sources":["../../src/DateInputGroup/DateInputGroup.tsx"],"names":[],"mappings":"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"}

package/dist/DateInputGroup/index.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInputGroup/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,YAAY,EACV,mBAAmB,EACnB,mBAAmB,GACpB,MAAM,kBAAkB,CAAC"}

package/dist/DateInputGroup/index.js

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

package/dist/DateInputGroup/index.js.map

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

package/dist/Details/Details.css

@@ -1,148 +0,0 @@
-/**
- * Details component styles for React
- * Re-exports the base Details styles from components-html
- */
-
-/**
- * Details Component
- * Expandable disclosure widget based on the native <details>/<summary> element.
- *
- * Usage:
- * <!-- Default (closed) -->
- * <details class="dsn-details">
- *   <summary class="dsn-details__summary">
- *     <svg class="dsn-icon dsn-details__icon" aria-hidden="true"><!-- chevron-down --></svg>
- *     <span class="dsn-details__summary-label">Label</span>
- *   </summary>
- *   <div class="dsn-details__content">
- *     <p class="dsn-paragraph">Aanvullende informatie.</p>
- *   </div>
- * </details>
- *
- * <!-- Default open -->
- * <details class="dsn-details" open>
- *   <summary class="dsn-details__summary">
- *     <svg class="dsn-icon dsn-details__icon" aria-hidden="true"><!-- chevron-down --></svg>
- *     <span class="dsn-details__summary-label">Label</span>
- *   </summary>
- *   <div class="dsn-details__content">
- *     <p class="dsn-paragraph">Inhoud is standaard zichtbaar.</p>
- *   </div>
- * </details>
- */
-
-/* ===========================
-   Base layout
-   =========================== */
-.dsn-details {
-  display: flex;
-  flex-direction: column;
-  row-gap: var(--dsn-details-row-gap);
-}
-
-/* ===========================
-   Summary (toggle trigger)
-   =========================== */
-.dsn-details__summary {
-  display: flex;
-  align-items: center;
-  gap: var(--dsn-details-summary-gap);
-  width: fit-content;
-  list-style: none;
-  cursor: pointer;
-}
-
-/* Hide native browser disclosure marker (WebKit) */
-.dsn-details__summary::-webkit-details-marker {
-  display: none;
-}
-
-/* ===========================
-   Summary label
-   =========================== */
-.dsn-details__summary-label {
-  color: var(--dsn-details-summary-color);
-  text-decoration-line: var(--dsn-details-summary-text-decoration-line);
-  text-underline-offset: var(--dsn-details-summary-text-underline-offset);
-  text-decoration-thickness: var(
-    --dsn-details-summary-text-decoration-thickness
-  );
-}
-
-/* ===========================
-   Summary hover state
-   =========================== */
-.dsn-details__summary:hover .dsn-details__summary-label {
-  color: var(--dsn-details-summary-hover-color);
-  text-decoration-line: var(--dsn-details-summary-hover-text-decoration-line);
-}
-
-/* ===========================
-   Summary active state
-   =========================== */
-.dsn-details__summary:active .dsn-details__summary-label {
-  color: var(--dsn-details-summary-active-color);
-}
-
-/* ===========================
-   Summary focus state — consistent met Link component
-   =========================== */
-.dsn-details__summary:focus-visible {
-  background-color: var(--dsn-focus-background-color);
-  color: var(--dsn-focus-color);
-  text-decoration: none;
-  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
-    var(--dsn-focus-outline-color);
-  outline-offset: var(--dsn-focus-outline-offset);
-  box-shadow: 0 0 0
-    calc(var(--dsn-focus-outline-offset) + var(--dsn-focus-outline-width))
-    var(--dsn-focus-inverse-outline-color);
-  box-decoration-break: clone;
-}
-
-/* ===========================
-   Icon — rotates 180° when open
-   =========================== */
-.dsn-details__icon {
-  flex-shrink: 0;
-  width: var(--dsn-details-icon-size);
-  height: var(--dsn-details-icon-size);
-  color: var(--dsn-details-summary-color);
-  transition: transform var(--dsn-transition-duration-normal)
-    var(--dsn-transition-easing-default);
-}
-
-.dsn-details[open] .dsn-details__icon {
-  transform: rotate(180deg);
-}
-
-/* ===========================
-   Forced colors (High Contrast mode)
-   =========================== */
-@media (forced-colors: active) {
-  .dsn-details__icon {
-    forced-color-adjust: auto;
-    color: LinkText;
-  }
-
-  .dsn-details__summary:hover .dsn-details__icon {
-    color: LinkText;
-  }
-}
-
-/* ===========================
-   Content area
-   =========================== */
-.dsn-details__content {
-  margin-inline-start: calc(
-    var(--dsn-details-icon-size) / 2 -
-      var(--dsn-details-content-border-inline-start-width) / 2
-  );
-  background-color: var(--dsn-details-content-background-color);
-  border-inline-start: var(--dsn-details-content-border-inline-start-width)
-    solid var(--dsn-details-content-border-color);
-  padding-inline-start: var(--dsn-details-content-padding-inline-start);
-  padding-inline-end: var(--dsn-details-content-padding-inline-end);
-  padding-block: var(--dsn-details-content-padding-block);
-}
-

package/dist/Details/Details.d.ts

@@ -1,46 +0,0 @@
-import React from 'react';
-import './Details.css';
-export interface DetailsProps extends Omit<React.HTMLAttributes<HTMLDetailsElement>, 'onToggle'> {
-    /**
-     * Zichtbare labeltekst in de `<summary>`
-     */
-    summary: string;
-    /**
-     * Standaard open bij eerste render (ongecontroleerde staat)
-     * @default false
-     */
-    defaultOpen?: boolean;
-    /**
-     * Callback die wordt aangeroepen wanneer de open/dicht staat wijzigt
-     */
-    onToggle?: (open: boolean) => void;
-    /**
-     * De verborgen inhoud
-     */
-    children?: React.ReactNode;
-}
-/**
- * Details component
- * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
- * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
- *
- * @example
- * ```tsx
- * // Standaard gesloten
- * <Details summary="Meer informatie">
- *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
- * </Details>
- *
- * // Standaard open
- * <Details summary="Meer informatie" defaultOpen>
- *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
- * </Details>
- *
- * // Met toggle callback
- * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
- *   <Paragraph>Inhoud.</Paragraph>
- * </Details>
- * ```
- */
-export declare const Details: React.ForwardRefExoticComponent<DetailsProps & React.RefAttributes<HTMLDetailsElement>>;
-//# sourceMappingURL=Details.d.ts.map

package/dist/Details/Details.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,eAAe,CAAC;AAEvB,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,EACxC,UAAU,CACX;IACC;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAEnC;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,OAAO,yFA2BnB,CAAC"}

package/dist/Details/Details.js

@@ -1,37 +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 './Details.css';
-/**
- * Details component
- * Uitvouwbare inhoudsaanwijzer voor aanvullende inhoud die niet iedereen nodig heeft.
- * Gebaseerd op het native `<details>`/`<summary>` element — CSS-only, geen JavaScript voor de toggle.
- *
- * @example
- * ```tsx
- * // Standaard gesloten
- * <Details summary="Meer informatie">
- *   <Paragraph>Aanvullende informatie die beschikbaar is voor wie dit nodig heeft.</Paragraph>
- * </Details>
- *
- * // Standaard open
- * <Details summary="Meer informatie" defaultOpen>
- *   <Paragraph>Inhoud is standaard zichtbaar.</Paragraph>
- * </Details>
- *
- * // Met toggle callback
- * <Details summary="Meer informatie" onToggle={(open) => console.log('open:', open)}>
- *   <Paragraph>Inhoud.</Paragraph>
- * </Details>
- * ```
- */
-export const Details = React.forwardRef(({ className, summary, defaultOpen = false, onToggle, children, ...props }, ref) => {
-    const classes = classNames('dsn-details', className);
-    const handleToggle = (event) => {
-        onToggle?.(event.currentTarget.open);
-    };
-    return (_jsxs("details", { ref: ref, className: classes, open: defaultOpen || undefined, onToggle: handleToggle, ...props, children: [_jsxs("summary", { className: "dsn-details__summary", children: [_jsx(Icon, { name: "chevron-down", className: "dsn-details__icon", "aria-hidden": true }), _jsx("span", { className: "dsn-details__summary-label", children: summary })] }), _jsx("div", { className: "dsn-details__content", children: children })] }));
-});
-Details.displayName = 'Details';
-//# sourceMappingURL=Details.js.map

package/dist/Details/Details.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Details.js","sourceRoot":"","sources":["../../src/Details/Details.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,eAAe,CAAC;AA4BvB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CACrC,CACE,EAAE,SAAS,EAAE,OAAO,EAAE,WAAW,GAAG,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EACzE,GAAG,EACH,EAAE;IACF,MAAM,OAAO,GAAG,UAAU,CAAC,aAAa,EAAE,SAAS,CAAC,CAAC;IAErD,MAAM,YAAY,GAAG,CAAC,KAA+C,EAAE,EAAE;QACvE,QAAQ,EAAE,CAAE,KAAK,CAAC,aAAoC,CAAC,IAAI,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO,CACL,mBACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,OAAO,EAClB,IAAI,EAAE,WAAW,IAAI,SAAS,EAC9B,QAAQ,EAAE,YAAY,KAClB,KAAK,aAET,mBAAS,SAAS,EAAC,sBAAsB,aACvC,KAAC,IAAI,IAAC,IAAI,EAAC,cAAc,EAAC,SAAS,EAAC,mBAAmB,wBAAe,EACtE,eAAM,SAAS,EAAC,4BAA4B,YAAE,OAAO,GAAQ,IACrD,EACV,cAAK,SAAS,EAAC,sBAAsB,YAAE,QAAQ,GAAO,IAC9C,CACX,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC"}

package/dist/Details/index.d.ts

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

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

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

package/dist/Details/index.js

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

package/dist/Details/index.js.map

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

package/dist/DotBadge/DotBadge.css

@@ -1,111 +0,0 @@
-/**
- * DotBadge Component
- * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
- * zonder label of getal de aandacht te trekken bij een statuswijziging.
- *
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
- * Parent-wrapper heeft position: relative nodig.
- *
- * Usage:
- * <!-- Basis dot (negative, meest gebruikt) -->
- * <span class="dsn-dot-badge dsn-dot-badge--negative" aria-hidden="true"></span>
- *
- * <!-- Met pulse-effect voor urgente statuswijzigingen -->
- * <span class="dsn-dot-badge dsn-dot-badge--negative dsn-dot-badge--pulse" aria-hidden="true"></span>
- *
- * <!-- Positive variant -->
- * <span class="dsn-dot-badge dsn-dot-badge--positive" aria-hidden="true"></span>
- *
- * <!-- Info variant -->
- * <span class="dsn-dot-badge dsn-dot-badge--info" aria-hidden="true"></span>
- *
- * <!-- Warning variant -->
- * <span class="dsn-dot-badge dsn-dot-badge--warning" aria-hidden="true"></span>
- *
- * <!-- Neutral variant -->
- * <span class="dsn-dot-badge dsn-dot-badge--neutral" aria-hidden="true"></span>
- */
-
-.dsn-dot-badge {
-  display: block;
-  position: absolute;
-  inline-size: var(--dsn-dot-badge-size);
-  block-size: var(--dsn-dot-badge-size);
-  border-radius: 50%;
-  background-color: var(--dsn-dot-badge-color);
-  inset-block-start: var(--dsn-dot-badge-inset-block-start);
-  inset-inline-end: var(--dsn-dot-badge-inset-inline-end);
-}
-
-/* Variant kleuren — inverse-bg-default: de gevulde dot is een achtergrond-element,
-   geen tekst. inverse-bg-default is de vivid kleur die zowel op lichte als donkere
-   achtergronden leesbaar is als dot. In een inverse context (zie page-header.css)
-   wordt overgeschakeld naar bg-default (lichte pastelkleur) voor hoog contrast op
-   donkere achtergronden. */
-.dsn-dot-badge--negative {
-  --dsn-dot-badge-color: var(--dsn-color-negative-inverse-bg-default);
-}
-
-.dsn-dot-badge--positive {
-  --dsn-dot-badge-color: var(--dsn-color-positive-inverse-bg-default);
-}
-
-.dsn-dot-badge--warning {
-  --dsn-dot-badge-color: var(--dsn-color-warning-inverse-bg-default);
-}
-
-.dsn-dot-badge--info {
-  --dsn-dot-badge-color: var(--dsn-color-info-inverse-bg-default);
-}
-
-.dsn-dot-badge--neutral {
-  --dsn-dot-badge-color: var(--dsn-color-neutral-inverse-bg-default);
-}
-
-/* Pulse-effect via ::before pseudo-element — geen extra DOM-nodes nodig */
-.dsn-dot-badge--pulse::before {
-  content: '';
-  display: block;
-  position: absolute;
-  inset: 0;
-  border-radius: 50%;
-  background-color: var(--dsn-dot-badge-color);
-  animation: dsn-dot-badge-pulse var(--dsn-dot-badge-pulse-duration)
-    var(--dsn-dot-badge-pulse-easing) infinite;
-}
-
-@keyframes dsn-dot-badge-pulse {
-  0% {
-    transform: scale(1);
-    opacity: 0.8;
-  }
-  70% {
-    transform: scale(2.5);
-    opacity: 0;
-  }
-  100% {
-    transform: scale(2.5);
-    opacity: 0;
-  }
-}
-
-/* Animatie respecteert prefers-reduced-motion — dot blijft zichtbaar */
-@media (prefers-reduced-motion: reduce) {
-  .dsn-dot-badge--pulse::before {
-    animation: none;
-  }
-}
-
-/* Forced colors (High Contrast mode)
-   background-color wordt vervangen door Canvas — dot is onzichtbaar zonder border.
-   Pulse-animatie uitschakelen: opacity-animatie op systeemkleuren is onbetrouwbaar. */
-@media (forced-colors: active) {
-  .dsn-dot-badge {
-    border: 1px solid transparent;
-  }
-
-  .dsn-dot-badge--pulse::before {
-    animation: none;
-  }
-}
-

package/dist/DotBadge/DotBadge.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-import './DotBadge.css';
-export type DotBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
-export interface DotBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Signaalkleur van de stip
-     * @default 'negative'
-     */
-    variant?: DotBadgeVariant;
-    /**
-     * Voegt een pulserend ring-effect toe om extra aandacht te trekken
-     * @default false
-     */
-    pulse?: boolean;
-}
-/**
- * DotBadge component
- * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
- * zonder label of getal de aandacht te trekken bij een statuswijziging.
- *
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
- * Parent-wrapper heeft position: relative nodig.
- *
- * @example
- * ```tsx
- * // Basis gebruik — negatieve dot bij een icon-only Button
- * <div style={{ position: 'relative', display: 'inline-flex' }}>
- *   <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
- *     Inbox
- *     <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
- *   </Button>
- *   <DotBadge variant="negative" />
- * </div>
- *
- * // Met pulse-effect voor urgente statuswijzigingen
- * <DotBadge variant="negative" pulse />
- * ```
- */
-export declare const DotBadge: React.ForwardRefExoticComponent<DotBadgeProps & React.RefAttributes<HTMLSpanElement>>;
-//# sourceMappingURL=DotBadge.d.ts.map

package/dist/DotBadge/DotBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"DotBadge.d.ts","sourceRoot":"","sources":["../../src/DotBadge/DotBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,gBAAgB,CAAC;AAExB,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,aAAc,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC1E;;;OAGG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC;IAE1B;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,QAAQ,uFAWpB,CAAC"}

package/dist/DotBadge/DotBadge.js

@@ -1,33 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './DotBadge.css';
-/**
- * DotBadge component
- * Kleine gekleurde stip die bij een Button of Link wordt geplaatst om
- * zonder label of getal de aandacht te trekken bij een statuswijziging.
- *
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
- * Parent-wrapper heeft position: relative nodig.
- *
- * @example
- * ```tsx
- * // Basis gebruik — negatieve dot bij een icon-only Button
- * <div style={{ position: 'relative', display: 'inline-flex' }}>
- *   <Button variant="subtle" iconOnly iconStart={<Icon name="inbox" aria-hidden />}>
- *     Inbox
- *     <span className="dsn-visually-hidden">, 3 ongelezen berichten</span>
- *   </Button>
- *   <DotBadge variant="negative" />
- * </div>
- *
- * // Met pulse-effect voor urgente statuswijzigingen
- * <DotBadge variant="negative" pulse />
- * ```
- */
-export const DotBadge = React.forwardRef(({ className, variant = 'negative', pulse = false, ...props }, ref) => {
-    const classes = classNames('dsn-dot-badge', `dsn-dot-badge--${variant}`, pulse && 'dsn-dot-badge--pulse', className);
-    return _jsx("span", { ref: ref, className: classes, "aria-hidden": "true", ...props });
-});
-DotBadge.displayName = 'DotBadge';
-//# sourceMappingURL=DotBadge.js.map

package/dist/DotBadge/DotBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"DotBadge.js","sourceRoot":"","sources":["../../src/DotBadge/DotBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,gBAAgB,CAAC;AAuBxB;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CACtC,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,UAAU,EAAE,KAAK,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACpE,MAAM,OAAO,GAAG,UAAU,CACxB,eAAe,EACf,kBAAkB,OAAO,EAAE,EAC3B,KAAK,IAAI,sBAAsB,EAC/B,SAAS,CACV,CAAC;IAEF,OAAO,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,iBAAc,MAAM,KAAK,KAAK,GAAI,CAAC;AAC9E,CAAC,CACF,CAAC;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU,CAAC"}

package/dist/DotBadge/index.d.ts

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

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

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

package/dist/DotBadge/index.js

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

package/dist/DotBadge/index.js.map

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