@dsn-starter-kit/components-react 1.0.0

package/dist/Note/Note.js

@@ -0,0 +1,68 @@
+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',
+};
+/**
+ * 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" — inhoudsopgave
+ * <Note as="nav" variant="neutral" heading="Op deze pagina" headingLevel={2}>
+ *   <UnorderedList>
+ *     <li><Link href="#sectie-1">Sectie 1</Link></li>
+ *   </UnorderedList>
+ * </Note>
+ *
+ * // Icoon weglaten
+ * <Note variant="info" heading="Opmerking" iconStart={null}>
+ *   <Paragraph>Zonder icoon.</Paragraph>
+ * </Note>
+ * ```
+ */
+export const Note = React.forwardRef(({ as: As = 'div', className, variant = 'neutral', heading, headingLevel = 3, iconStart, children, ...props }, ref) => {
+    const headingId = useId();
+    const noIcon = iconStart === null;
+    const noHeading = !heading;
+    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 && (_jsx(Heading, { level: headingLevel, appearance: "heading-3", className: "dsn-note__heading", id: isLandmark ? headingId : undefined, children: heading })), children && _jsx("div", { className: "dsn-note__content", children: children })] }));
+});
+Note.displayName = 'Note';
+//# sourceMappingURL=Note.js.map

package/dist/Note/Note.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Note.js","sourceRoot":"","sources":["../../src/Note/Note.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAC/B,OAAO,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AACrC,OAAO,YAAY,CAAC;AAUpB,MAAM,eAAe,GAAgC;IACnD,OAAO,EAAE,aAAa;IACtB,IAAI,EAAE,aAAa;IACnB,QAAQ,EAAE,cAAc;IACxB,QAAQ,EAAE,oBAAoB;IAC9B,OAAO,EAAE,gBAAgB;CAC1B,CAAC;AAwCF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAuCG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAClC,CACE,EACE,EAAE,EAAE,EAAE,GAAG,KAAK,EACd,SAAS,EACT,OAAO,GAAG,SAAS,EACnB,OAAO,EACP,YAAY,GAAG,CAAC,EAChB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EACD,GAAG,EACH,EAAE;IACF,MAAM,SAAS,GAAG,KAAK,EAAE,CAAC;IAC1B,MAAM,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAClC,MAAM,SAAS,GAAG,CAAC,OAAO,CAAC;IAE3B,MAAM,YAAY,GAChB,SAAS,KAAK,SAAS,CAAC,CAAC,CAAC,CACxB,KAAC,IAAI,IACH,IAAI,EAAE,eAAe,CAAC,OAAO,CAAuC,EACpE,IAAI,EAAC,IAAI,wBAET,CACH,CAAC,CAAC,CAAC,CACF,SAAS,CACV,CAAC;IAEJ,MAAM,OAAO,GAAG,UAAU,CACxB,UAAU,EACV,OAAO,KAAK,SAAS,IAAI,aAAa,OAAO,EAAE,EAC/C,SAAS,IAAI,sBAAsB,EACnC,SAAS,CACV,CAAC;IAEF,0EAA0E;IAC1E,MAAM,UAAU,GAAG,EAAE,KAAK,KAAK,IAAI,EAAE,KAAK,OAAO,IAAI,EAAE,KAAK,SAAS,CAAC;IACtE,MAAM,UAAU,GACd,UAAU,IAAI,OAAO,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,iBAAiB,CAAC;QACxE,CAAC,CAAC,SAAS;QACX,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,MAAC,EAAE,IACD,GAAG,EAAE,GAAgC,EACrC,SAAS,EAAE,OAAO,qBACD,UAAU,KACvB,KAAK,aAER,CAAC,MAAM,IAAI,CACV,eAAM,SAAS,EAAC,gBAAgB,iCAC7B,YAAY,GACR,CACR,EACA,OAAO,IAAI,CACV,KAAC,OAAO,IACN,KAAK,EAAE,YAAY,EACnB,UAAU,EAAC,WAAW,EACtB,SAAS,EAAC,mBAAmB,EAC7B,EAAE,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,YAErC,OAAO,GACA,CACX,EACA,QAAQ,IAAI,cAAK,SAAS,EAAC,mBAAmB,YAAE,QAAQ,GAAO,IAC7D,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC"}

package/dist/Note/index.d.ts

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

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

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

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

package/dist/Note/index.js.map

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

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

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

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

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

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

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

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

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

package/dist/NumberBadge/index.js

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

package/dist/NumberBadge/index.js.map

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

package/dist/NumberInput/NumberInput.css

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

package/dist/NumberInput/NumberInput.d.ts

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

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

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

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

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

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

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

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

package/dist/NumberInput/index.js.map

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

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

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

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

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

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

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

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

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

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

package/dist/OptionLabel/index.js.map

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

@@ -0,0 +1,37 @@
+/**
+ * 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;
+}
+

package/dist/OrderedList/OrderedList.d.ts

@@ -0,0 +1,32 @@
+import React from 'react';
+import './OrderedList.css';
+export interface OrderedListProps extends React.OlHTMLAttributes<HTMLOListElement> {
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * List content (li elements)
+     */
+    children?: React.ReactNode;
+}
+/**
+ * Ordered list component with numbered markers
+ *
+ * @example
+ * ```tsx
+ * <OrderedList>
+ *   <li>First step</li>
+ *   <li>Second step</li>
+ *   <li>Third step</li>
+ * </OrderedList>
+ *
+ * // Starting from a specific number
+ * <OrderedList start={5}>
+ *   <li>Fifth step</li>
+ *   <li>Sixth step</li>
+ * </OrderedList>
+ * ```
+ */
+export declare const OrderedList: React.ForwardRefExoticComponent<OrderedListProps & React.RefAttributes<HTMLOListElement>>;
+//# sourceMappingURL=OrderedList.d.ts.map

package/dist/OrderedList/OrderedList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.d.ts","sourceRoot":"","sources":["../../src/OrderedList/OrderedList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;IAChF;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,eAAO,MAAM,WAAW,2FAUvB,CAAC"}

package/dist/OrderedList/OrderedList.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './OrderedList.css';
+/**
+ * Ordered list component with numbered markers
+ *
+ * @example
+ * ```tsx
+ * <OrderedList>
+ *   <li>First step</li>
+ *   <li>Second step</li>
+ *   <li>Third step</li>
+ * </OrderedList>
+ *
+ * // Starting from a specific number
+ * <OrderedList start={5}>
+ *   <li>Fifth step</li>
+ *   <li>Sixth step</li>
+ * </OrderedList>
+ * ```
+ */
+export const OrderedList = React.forwardRef(({ className, children, ...props }, ref) => {
+    const classes = classNames('dsn-ordered-list', className);
+    return (_jsx("ol", { ref: ref, className: classes, ...props, children: children }));
+});
+OrderedList.displayName = 'OrderedList';
+//# sourceMappingURL=OrderedList.js.map

package/dist/OrderedList/OrderedList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderedList.js","sourceRoot":"","sources":["../../src/OrderedList/OrderedList.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAc3B;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAE1D,OAAO,CACL,aAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACxC,QAAQ,GACN,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/OrderedList/index.d.ts

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

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

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

package/dist/OrderedList/index.js

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

package/dist/OrderedList/index.js.map

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