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

package/dist/Note/Note.d.ts

@@ -1,93 +0,0 @@
-import React from 'react';
-import './Note.css';
-export type NoteVariant = 'neutral' | 'info' | 'positive' | 'negative' | 'warning';
-export type NoteAs = 'div' | 'aside' | 'nav' | 'section';
-export interface NoteProps extends React.HTMLAttributes<HTMLElement> {
-    /**
-     * HTML-element — ontkoppelt semantiek van visuele stijl
-     * @default 'div'
-     */
-    as?: NoteAs;
-    /**
-     * Semantische variant die de signaalkleur bepaalt
-     * @default 'neutral'
-     */
-    variant?: NoteVariant;
-    /**
-     * Optionele heading-tekst (renders als `<Heading appearance="heading-3">`)
-     */
-    heading?: string;
-    /**
-     * Semantisch heading-niveau — bepaalt het HTML-element (h1–h6)
-     * @default 3
-     */
-    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
-    /**
-     * Icoon vóór de heading.
-     * - `undefined` (default) — aanbevolen icoon per variant
-     * - `null` — geen icoon
-     * - `ReactNode` — aangepast icoon
-     */
-    iconStart?: React.ReactNode;
-    /**
-     * Visueel verborgen tekst die de variant benoemt voor screenreadergebruikers
-     * (inclusief scheidingsteken en spatie). Komt vóór de heading, of vóór de
-     * content als er geen heading is.
-     * - `undefined` (default) — standaardtekst per variant:
-     *   `''` (neutral) / `'Informatie: '` / `'Succes: '` / `'Foutmelding: '` / `'Let op: '`
-     * - `''` — geen variant-label (bijv. als de heading de variant al benoemt)
-     * - `string` — eigen tekst, bijv. voor een andere taal
-     */
-    variantLabel?: string;
-    /**
-     * Body-content: tekst, lijst, links, etc.
-     */
-    children?: React.ReactNode;
-}
-/**
- * Note component
- * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
- * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.
- *
- * @example
- * ```tsx
- * // Neutral (default), inline tip
- * <Note heading="Let op">
- *   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>
- * </Note>
- *
- * // Info variant
- * <Note variant="info" heading="Wist je dat...">
- *   <Paragraph>Extra context.</Paragraph>
- * </Note>
- *
- * // Zonder heading — icoon overspant beide rijen
- * <Note variant="warning">
- *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
- * </Note>
- *
- * // as="aside" — echt aanvullende content
- * <Note as="aside" variant="info" heading="Achtergrondinformatie">
- *   <Paragraph>Meer context.</Paragraph>
- * </Note>
- *
- * // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
- * <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
- *   <UnorderedList>
- *     <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
- *   </UnorderedList>
- * </Note>
- *
- * // Icoon weglaten
- * <Note variant="info" heading="Opmerking" iconStart={null}>
- *   <Paragraph>Zonder icoon.</Paragraph>
- * </Note>
- *
- * // Variant-label onderdrukken (heading benoemt de variant al)
- * <Note variant="warning" heading="Waarschuwing" variantLabel="">
- *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
- * </Note>
- * ```
- */
-export declare const Note: React.ForwardRefExoticComponent<NoteProps & React.RefAttributes<HTMLElement>>;
-//# sourceMappingURL=Note.d.ts.map

package/dist/Note/Note.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Note.d.ts","sourceRoot":"","sources":["../../src/Note/Note.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAIrC,OAAO,YAAY,CAAC;AAEpB,MAAM,MAAM,WAAW,GACnB,SAAS,GACT,MAAM,GACN,UAAU,GACV,UAAU,GACV,SAAS,CAAC;AACd,MAAM,MAAM,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,KAAK,GAAG,SAAS,CAAC;AAkBzD,MAAM,WAAW,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAClE;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IAEZ;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;OAGG;IACH,YAAY,CAAC,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAErC;;;;;OAKG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE5B;;;;;;;;OAQG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4CG;AACH,eAAO,MAAM,IAAI,+EA+EhB,CAAC"}

package/dist/Note/Note.js

@@ -1,81 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useId } from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import { Icon } from '../Icon';
-import { Heading } from '../Heading';
-import './Note.css';
-const PREFERRED_ICONS = {
-    neutral: 'info-circle',
-    info: 'info-circle',
-    positive: 'circle-check',
-    negative: 'exclamation-circle',
-    warning: 'alert-triangle',
-};
-const VARIANT_LABELS = {
-    neutral: '',
-    info: 'Informatie: ',
-    positive: 'Succes: ',
-    negative: 'Foutmelding: ',
-    warning: 'Let op: ',
-};
-/**
- * Note component
- * Visueel uitgelicht bericht voor aanvullende of belangrijke informatie.
- * Passieve tegenhanger van Alert — geen live region, wordt alleen voorgelezen bij navigatie.
- *
- * @example
- * ```tsx
- * // Neutral (default), inline tip
- * <Note heading="Let op">
- *   <Paragraph>Aanvullende informatie over dit onderwerp.</Paragraph>
- * </Note>
- *
- * // Info variant
- * <Note variant="info" heading="Wist je dat...">
- *   <Paragraph>Extra context.</Paragraph>
- * </Note>
- *
- * // Zonder heading — icoon overspant beide rijen
- * <Note variant="warning">
- *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
- * </Note>
- *
- * // as="aside" — echt aanvullende content
- * <Note as="aside" variant="info" heading="Achtergrondinformatie">
- *   <Paragraph>Meer context.</Paragraph>
- * </Note>
- *
- * // as="nav" — eigenstandige navigatiesectie (niet voor een pagina-inhoudsopgave: gebruik TableOfContents)
- * <Note as="nav" variant="neutral" heading="Gerelateerde pagina's" headingLevel={2}>
- *   <UnorderedList>
- *     <li><Link href="/gerelateerd-1">Gerelateerde pagina 1</Link></li>
- *   </UnorderedList>
- * </Note>
- *
- * // Icoon weglaten
- * <Note variant="info" heading="Opmerking" iconStart={null}>
- *   <Paragraph>Zonder icoon.</Paragraph>
- * </Note>
- *
- * // Variant-label onderdrukken (heading benoemt de variant al)
- * <Note variant="warning" heading="Waarschuwing" variantLabel="">
- *   <Paragraph>Dit heeft gevolgen voor uw aanvraag.</Paragraph>
- * </Note>
- * ```
- */
-export const Note = React.forwardRef(({ as: As = 'div', className, variant = 'neutral', heading, headingLevel = 3, iconStart, variantLabel, children, ...props }, ref) => {
-    const headingId = useId();
-    const noIcon = iconStart === null;
-    const noHeading = !heading;
-    const resolvedVariantLabel = variantLabel ?? VARIANT_LABELS[variant];
-    const resolvedIcon = iconStart === undefined ? (_jsx(Icon, { name: PREFERRED_ICONS[variant], size: "xl", "aria-hidden": true })) : (iconStart);
-    const classes = classNames('dsn-note', variant !== 'neutral' && `dsn-note--${variant}`, noHeading && 'dsn-note--no-heading', className);
-    // For landmark elements with a heading, add aria-labelledby automatically
-    const isLandmark = As === 'nav' || As === 'aside' || As === 'section';
-    const labelledBy = isLandmark && heading && !props['aria-label'] && !props['aria-labelledby']
-        ? headingId
-        : undefined;
-    return (_jsxs(As, { ref: ref, className: classes, "aria-labelledby": labelledBy, ...props, children: [!noIcon && (_jsx("span", { className: "dsn-note__icon", "aria-hidden": true, children: resolvedIcon })), heading && (_jsxs(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-note__heading", id: isLandmark ? headingId : undefined, children: [resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), heading] })), noHeading && resolvedVariantLabel && (_jsx("span", { className: "dsn-visually-hidden", children: resolvedVariantLabel })), children && _jsx("div", { className: "dsn-note__content", children: children })] }));
-});
-Note.displayName = 'Note';
-//# sourceMappingURL=Note.js.map

package/dist/Note/Note.js.map

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

package/dist/Note/index.d.ts

@@ -1,3 +0,0 @@
-export { Note } from './Note';
-export type { NoteProps, NoteVariant, NoteAs } from './Note';
-//# sourceMappingURL=index.d.ts.map

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

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

package/dist/Note/index.js

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

package/dist/Note/index.js.map

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

package/dist/NumberBadge/NumberBadge.css

@@ -1,83 +0,0 @@
-/**
- * NumberBadge Component
- * Compact inline-element dat een getal toont (bijv. ongelezen berichten of openstaande taken).
- * Geplaatst binnen een Button of Menu-item, naast het label, via de iconEnd-positie.
- *
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
- *
- * Usage:
- * <!-- Standalone -->
- * <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
- *
- * <!-- Inline in een Button (buiten het label, als iconEnd) -->
- * <button type="button" class="dsn-button dsn-button--subtle">
- *   <svg class="dsn-icon" aria-hidden="true"><!-- inbox --></svg>
- *   <span class="dsn-button__label">Inbox</span>
- *   <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">5</span>
- * </button>
- *
- * <!-- Afgekapt getal (99+) — screenreader-context in dsn-button__label -->
- * <button type="button" class="dsn-button dsn-button--subtle">
- *   <svg class="dsn-icon" aria-hidden="true"><!-- inbox --></svg>
- *   <span class="dsn-button__label">
- *     Inbox
- *     <span class="dsn-visually-hidden">, 128 ongelezen berichten</span>
- *   </span>
- *   <span class="dsn-number-badge dsn-number-badge--negative" aria-hidden="true">99+</span>
- * </button>
- *
- * <!-- Standalone varianten -->
- * <span class="dsn-number-badge dsn-number-badge--positive" aria-hidden="true">5</span>
- * <span class="dsn-number-badge dsn-number-badge--warning" aria-hidden="true">5</span>
- * <span class="dsn-number-badge dsn-number-badge--info" aria-hidden="true">5</span>
- * <span class="dsn-number-badge dsn-number-badge--neutral" aria-hidden="true">5</span>
- */
-
-.dsn-number-badge {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  /*
-   * min-inline-size = hoogte van de badge: 1lh (regel) + 2× padding-block
-   * De 1lh-unit schaalt mee met de fluid type scale — bij een ééncijferig
-   * getal blijft de badge altijd een perfecte cirkel ongeacht de font-size.
-   */
-  min-inline-size: calc(1lh + 2 * var(--dsn-number-badge-padding-block));
-  padding-block: var(--dsn-number-badge-padding-block);
-  padding-inline: var(--dsn-number-badge-padding-inline);
-  border-radius: var(--dsn-number-badge-border-radius);
-  border: var(--dsn-number-badge-border-width) solid
-    var(--dsn-number-badge-border-color);
-  font-family: inherit;
-  font-size: var(--dsn-number-badge-font-size);
-  line-height: var(--dsn-number-badge-line-height);
-  font-weight: var(--dsn-number-badge-font-weight);
-  white-space: nowrap;
-}
-
-/* Variant kleuren */
-.dsn-number-badge--negative {
-  color: var(--dsn-number-badge-negative-color);
-  background-color: var(--dsn-number-badge-negative-background-color);
-}
-
-.dsn-number-badge--positive {
-  color: var(--dsn-number-badge-positive-color);
-  background-color: var(--dsn-number-badge-positive-background-color);
-}
-
-.dsn-number-badge--warning {
-  color: var(--dsn-number-badge-warning-color);
-  background-color: var(--dsn-number-badge-warning-background-color);
-}
-
-.dsn-number-badge--info {
-  color: var(--dsn-number-badge-info-color);
-  background-color: var(--dsn-number-badge-info-background-color);
-}
-
-.dsn-number-badge--neutral {
-  color: var(--dsn-number-badge-neutral-color);
-  background-color: var(--dsn-number-badge-neutral-background-color);
-}
-

package/dist/NumberBadge/NumberBadge.d.ts

@@ -1,42 +0,0 @@
-import React from 'react';
-import './NumberBadge.css';
-export type NumberBadgeVariant = 'negative' | 'positive' | 'warning' | 'info' | 'neutral';
-export interface NumberBadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Signaalkleur van de badge
-     * @default 'negative'
-     */
-    variant?: NumberBadgeVariant;
-    /**
-     * Als `children` als getal groter is dan `maxCount`, wordt `{maxCount}+` getoond.
-     * Heeft geen effect als `children` geen getal is.
-     */
-    maxCount?: number;
-}
-/**
- * NumberBadge component
- * Compact inline-element dat een getal toont — zoals het aantal ongelezen berichten
- * of openstaande taken. Geplaatst binnen een Button of Menu-item, naast het label.
- *
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
- *
- * @example
- * ```tsx
- * // Basis gebruik — inline in een Button
- * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
- *   Inbox
- *   <NumberBadge variant="negative">5</NumberBadge>
- * </Button>
- *
- * // Afgekapt getal — toont "99+" als count > 99
- * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
- *   <span>
- *     Inbox
- *     <span className="dsn-visually-hidden">, 128 ongelezen berichten</span>
- *   </span>
- *   <NumberBadge variant="negative" maxCount={99}>128</NumberBadge>
- * </Button>
- * ```
- */
-export declare const NumberBadge: React.ForwardRefExoticComponent<NumberBadgeProps & React.RefAttributes<HTMLSpanElement>>;
-//# sourceMappingURL=NumberBadge.d.ts.map

package/dist/NumberBadge/NumberBadge.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberBadge.d.ts","sourceRoot":"","sources":["../../src/NumberBadge/NumberBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,MAAM,kBAAkB,GAC1B,UAAU,GACV,UAAU,GACV,SAAS,GACT,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7E;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAE7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,WAAW,0FA2BvB,CAAC"}

package/dist/NumberBadge/NumberBadge.js

@@ -1,46 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './NumberBadge.css';
-/**
- * NumberBadge component
- * Compact inline-element dat een getal toont — zoals het aantal ongelezen berichten
- * of openstaande taken. Geplaatst binnen een Button of Menu-item, naast het label.
- *
- * Altijd aria-hidden="true" — context via dsn-visually-hidden in de parent.
- *
- * @example
- * ```tsx
- * // Basis gebruik — inline in een Button
- * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
- *   Inbox
- *   <NumberBadge variant="negative">5</NumberBadge>
- * </Button>
- *
- * // Afgekapt getal — toont "99+" als count > 99
- * <Button variant="subtle" iconStart={<Icon name="inbox" aria-hidden />}>
- *   <span>
- *     Inbox
- *     <span className="dsn-visually-hidden">, 128 ongelezen berichten</span>
- *   </span>
- *   <NumberBadge variant="negative" maxCount={99}>128</NumberBadge>
- * </Button>
- * ```
- */
-export const NumberBadge = React.forwardRef(({ className, variant = 'negative', maxCount, children, ...props }, ref) => {
-    const classes = classNames('dsn-number-badge', `dsn-number-badge--${variant}`, className);
-    let displayValue = children;
-    if (maxCount !== undefined) {
-        const numeric = typeof children === 'number'
-            ? children
-            : typeof children === 'string' && /^\d+$/.test(children)
-                ? parseInt(children, 10)
-                : null;
-        if (numeric !== null && numeric > maxCount) {
-            displayValue = `${maxCount}+`;
-        }
-    }
-    return (_jsx("span", { ref: ref, className: classes, "aria-hidden": "true", ...props, children: displayValue }));
-});
-NumberBadge.displayName = 'NumberBadge';
-//# sourceMappingURL=NumberBadge.js.map

package/dist/NumberBadge/NumberBadge.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberBadge.js","sourceRoot":"","sources":["../../src/NumberBadge/NumberBadge.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAuB3B;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,OAAO,GAAG,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,qBAAqB,OAAO,EAAE,EAC9B,SAAS,CACV,CAAC;IAEF,IAAI,YAAY,GAAoB,QAAQ,CAAC;IAC7C,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;QAC3B,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,QAAQ;YAC1B,CAAC,CAAC,QAAQ;YACV,CAAC,CAAC,OAAO,QAAQ,KAAK,QAAQ,IAAI,OAAO,CAAC,IAAI,CAAC,QAAQ,CAAC;gBACtD,CAAC,CAAC,QAAQ,CAAC,QAAQ,EAAE,EAAE,CAAC;gBACxB,CAAC,CAAC,IAAI,CAAC;QACb,IAAI,OAAO,KAAK,IAAI,IAAI,OAAO,GAAG,QAAQ,EAAE,CAAC;YAC3C,YAAY,GAAG,GAAG,QAAQ,GAAG,CAAC;QAChC,CAAC;IACH,CAAC;IAED,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,iBAAc,MAAM,KAAK,KAAK,YAC7D,YAAY,GACR,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/NumberBadge/index.d.ts

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

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

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

package/dist/NumberBadge/index.js

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

package/dist/NumberBadge/index.js.map

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

package/dist/NumberInput/NumberInput.css

@@ -1,4 +0,0 @@
-/**
- * NumberInput Component Styles
- * Uses dsn-text-input styles from TextInput.css — no additional styles needed
- */

package/dist/NumberInput/NumberInput.d.ts

@@ -1,45 +0,0 @@
-import React from 'react';
-import { FormControlWidth } from '@dsn-starter-kit/core';
-import '../TextInput/TextInput.css';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
-    /**
-     * Whether the input is in an invalid state
-     * @default false
-     */
-    invalid?: boolean;
-    /**
-     * Width variant for the input
-     * @default undefined (uses default max-width from form-control)
-     */
-    width?: FormControlWidth;
-    /**
-     * Allow decimal input (e.g. amounts). When false, uses GOV.UK pattern:
-     * inputmode="numeric" + pattern="[0-9]*" for a numeric-only keyboard.
-     * When true, uses inputmode="decimal" without pattern restriction.
-     * @default false
-     */
-    allowDecimals?: boolean;
-    /**
-     * Additional CSS class names
-     */
-    className?: string;
-}
-/**
- * Number Input component
- * Uses type="text" with inputmode="decimal" for better mobile UX (no spinner buttons)
- *
- * @example
- * ```tsx
- * // Basic usage
- * <NumberInput placeholder="0,00" />
- *
- * // With label
- * <FormFieldLabel htmlFor="amount">Bedrag</FormFieldLabel>
- * <NumberInput id="amount" />
- *
- * // Invalid state
- * <NumberInput invalid aria-invalid="true" aria-describedby="error" />
- * ```
- */
-export declare const NumberInput: React.ForwardRefExoticComponent<NumberInputProps & React.RefAttributes<HTMLInputElement>>;
-//# sourceMappingURL=NumberInput.d.ts.map

package/dist/NumberInput/NumberInput.d.ts.map

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

package/dist/NumberInput/NumberInput.js

@@ -1,27 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import '../TextInput/TextInput.css';
-/**
- * Number Input component
- * Uses type="text" with inputmode="decimal" for better mobile UX (no spinner buttons)
- *
- * @example
- * ```tsx
- * // Basic usage
- * <NumberInput placeholder="0,00" />
- *
- * // With label
- * <FormFieldLabel htmlFor="amount">Bedrag</FormFieldLabel>
- * <NumberInput id="amount" />
- *
- * // Invalid state
- * <NumberInput invalid aria-invalid="true" aria-describedby="error" />
- * ```
- */
-export const NumberInput = React.forwardRef(({ className, invalid, width, allowDecimals = false, ...props }, ref) => {
-    const classes = classNames('dsn-text-input', width && `dsn-text-input--width-${width}`, className);
-    return (_jsx("input", { ref: ref, type: "text", inputMode: allowDecimals ? 'decimal' : 'numeric', pattern: allowDecimals ? undefined : '[0-9]*', className: classes, "aria-invalid": invalid || undefined, autoComplete: "off", ...props }));
-});
-NumberInput.displayName = 'NumberInput';
-//# sourceMappingURL=NumberInput.js.map

package/dist/NumberInput/NumberInput.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"NumberInput.js","sourceRoot":"","sources":["../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAoB,MAAM,uBAAuB,CAAC;AACrE,OAAO,4BAA4B,CAAC;AAgCpC;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,aAAa,GAAG,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtE,MAAM,OAAO,GAAG,UAAU,CACxB,gBAAgB,EAChB,KAAK,IAAI,yBAAyB,KAAK,EAAE,EACzC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,MAAM,EACX,SAAS,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,EAChD,OAAO,EAAE,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAC7C,SAAS,EAAE,OAAO,kBACJ,OAAO,IAAI,SAAS,EAClC,YAAY,EAAC,KAAK,KACd,KAAK,GACT,CACH,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/NumberInput/index.d.ts

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

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

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

package/dist/NumberInput/index.js

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

package/dist/NumberInput/index.js.map

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

package/dist/OptionLabel/OptionLabel.css

@@ -1,18 +0,0 @@
-/**
- * OptionLabel Component Styles
- * Label for checkbox and radio options
- */
-
-.dsn-option-label {
-  font-family: var(--dsn-option-label-font-family);
-  font-size: var(--dsn-option-label-font-size);
-  font-weight: var(--dsn-option-label-font-weight);
-  line-height: var(--dsn-option-label-line-height);
-  color: var(--dsn-option-label-color);
-  cursor: inherit;
-  user-select: none;
-}
-
-.dsn-option-label--disabled {
-  color: var(--dsn-option-label-disabled-color);
-}

package/dist/OptionLabel/OptionLabel.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import './OptionLabel.css';
-export interface OptionLabelProps extends React.HTMLAttributes<HTMLSpanElement> {
-    /**
-     * Whether the label is for a disabled input
-     */
-    disabled?: boolean;
-}
-/**
- * Label component for checkbox and radio button options
- */
-export declare const OptionLabel: React.ForwardRefExoticComponent<OptionLabelProps & React.RefAttributes<HTMLSpanElement>>;
-//# sourceMappingURL=OptionLabel.d.ts.map

package/dist/OptionLabel/OptionLabel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionLabel.d.ts","sourceRoot":"","sources":["../../src/OptionLabel/OptionLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7E;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,0FAcvB,CAAC"}

package/dist/OptionLabel/OptionLabel.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
-import { classNames } from '@dsn-starter-kit/core';
-import './OptionLabel.css';
-/**
- * Label component for checkbox and radio button options
- */
-export const OptionLabel = React.forwardRef(({ disabled, className, children, ...props }, ref) => {
-    const classes = classNames('dsn-option-label', disabled && 'dsn-option-label--disabled', className);
-    return (_jsx("span", { ref: ref, className: classes, ...props, children: children }));
-});
-OptionLabel.displayName = 'OptionLabel';
-//# sourceMappingURL=OptionLabel.js.map

package/dist/OptionLabel/OptionLabel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"OptionLabel.js","sourceRoot":"","sources":["../../src/OptionLabel/OptionLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAS3B;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACnD,MAAM,OAAO,GAAG,UAAU,CACxB,kBAAkB,EAClB,QAAQ,IAAI,4BAA4B,EACxC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAM,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YAC1C,QAAQ,GACJ,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/OptionLabel/index.d.ts

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

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

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

package/dist/OptionLabel/index.js

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

package/dist/OptionLabel/index.js.map

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

package/dist/OrderedList/OrderedList.css

@@ -1,37 +0,0 @@
-/**
- * OrderedList Component Styles for React
- * Re-exports the base OrderedList styles from components-html
- */
-
-/**
- * Ordered List Component
- * Uses component tokens for consistent styling.
- */
-
-.dsn-ordered-list {
-  font-family: var(--dsn-ordered-list-font-family);
-  font-weight: var(--dsn-ordered-list-font-weight);
-  color: var(--dsn-ordered-list-color);
-  font-size: var(--dsn-ordered-list-font-size);
-  line-height: var(--dsn-ordered-list-line-height);
-  max-inline-size: var(--dsn-ordered-list-max-inline-size);
-  padding-inline-start: var(--dsn-ordered-list-padding-inline-start);
-  margin-block-start: 0;
-  margin-block-end: var(--dsn-ordered-list-margin-block-end);
-  list-style-type: decimal;
-}
-
-/* Number markers */
-.dsn-ordered-list ::marker {
-  color: var(--dsn-ordered-list-marker-color);
-}
-
-/* Spacing between list items */
-.dsn-ordered-list > li {
-  margin-block-end: var(--dsn-ordered-list-gap);
-}
-
-.dsn-ordered-list > li:last-child {
-  margin-block-end: 0;
-}
-