@dsn-starter-kit/components-react 1.0.0

package/dist/ProgressBar/ProgressBar.css

@@ -0,0 +1,91 @@
+/**
+ * ProgressBar Component
+ * Horizontale voortgangsbalk voor bepaalde wachttijden.
+ *
+ * Het native <progress>-element heeft impliciete role="progressbar", aria-valuenow,
+ * aria-valuemin en aria-valuemax. Een visueel verborgen <label> koppelt de toegankelijke
+ * naam via for/id. De percentage-tekst heeft aria-hidden="true" om dubbele aankondiging
+ * te vermijden.
+ *
+ * Usage:
+ * <!-- Basis -->
+ * <div class="dsn-progress-bar">
+ *   <label class="dsn-visually-hidden" for="pb-1">Bestand uploaden</label>
+ *   <div class="dsn-progress-bar__header">
+ *     <p class="dsn-paragraph dsn-progress-bar__percentage" aria-hidden="true">35%</p>
+ *   </div>
+ *   <progress id="pb-1" class="dsn-progress-bar__bar" value="35" max="100">35%</progress>
+ * </div>
+ *
+ * <!-- Met beschrijving -->
+ * <div class="dsn-progress-bar">
+ *   <label class="dsn-visually-hidden" for="pb-2">Bestand uploaden</label>
+ *   <div class="dsn-progress-bar__header">
+ *     <p class="dsn-paragraph dsn-progress-bar__percentage" aria-hidden="true">35%</p>
+ *   </div>
+ *   <progress id="pb-2" class="dsn-progress-bar__bar" value="35" max="100">35%</progress>
+ *   <p class="dsn-paragraph dsn-progress-bar__description">Bestand wordt geüpload...</p>
+ * </div>
+ */
+
+.dsn-progress-bar {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-progress-bar-gap-header);
+}
+
+.dsn-progress-bar__header {
+  display: flex;
+  align-items: baseline;
+}
+
+/* Paragraph margin-reset: voorkomen dat dsn-paragraph zijn eigen margin-block-end toepast */
+.dsn-progress-bar .dsn-paragraph {
+  margin-block-end: 0;
+}
+
+.dsn-progress-bar__bar {
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--dsn-progress-bar-block-size);
+  border: none;
+  border-radius: var(--dsn-progress-bar-border-radius);
+  /* Firefox: track-kleur via element background */
+  background-color: var(--dsn-progress-bar-color-track);
+  color: var(--dsn-progress-bar-color-fill);
+}
+
+/* Chrome/Safari: track */
+.dsn-progress-bar__bar::-webkit-progress-bar {
+  background-color: var(--dsn-progress-bar-color-track);
+  border-radius: var(--dsn-progress-bar-border-radius);
+}
+
+/* Chrome/Safari: fill */
+.dsn-progress-bar__bar::-webkit-progress-value {
+  background-color: var(--dsn-progress-bar-color-fill);
+  border-radius: var(--dsn-progress-bar-border-radius);
+  transition: inline-size var(--dsn-transition-duration-slow)
+    var(--dsn-transition-easing-linear);
+}
+
+/* Firefox: fill */
+.dsn-progress-bar__bar::-moz-progress-bar {
+  background-color: var(--dsn-progress-bar-color-fill);
+  border-radius: var(--dsn-progress-bar-border-radius);
+  transition: inline-size var(--dsn-transition-duration-slow)
+    var(--dsn-transition-easing-linear);
+}
+
+.dsn-progress-bar__description {
+  margin-block-start: var(--dsn-progress-bar-gap-footer);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .dsn-progress-bar__bar::-webkit-progress-value,
+  .dsn-progress-bar__bar::-moz-progress-bar {
+    transition: none;
+  }
+}
+

package/dist/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+import './ProgressBar.css';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visueel verborgen label dat de voortgangsbalk beschrijft voor screenreaders.
+     * Altijd vereist — gekoppeld via <label for> aan het <progress>-element.
+     */
+    label: string;
+    /**
+     * Huidige voortgang (0 t/m max).
+     */
+    value: number;
+    /**
+     * Maximale waarde. Percentage wordt berekend als Math.round((value / max) * 100).
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Optionele beschrijvende tekst onder de balk.
+     */
+    description?: React.ReactNode;
+    /**
+     * ID voor het <progress>-element en de bijbehorende <label>.
+     * Automatisch gegenereerd via useId() indien weggelaten.
+     */
+    id?: string;
+}
+/**
+ * ProgressBar component
+ * Horizontale voortgangsbalk voor bepaalde wachttijden.
+ *
+ * Het native <progress>-element biedt impliciete role="progressbar" met
+ * aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen
+ * <label> koppelt de toegankelijke naam via for/id.
+ *
+ * @example
+ * ```tsx
+ * // Basis
+ * <ProgressBar label="Bestand uploaden" value={35} />
+ *
+ * // Met beschrijving
+ * <ProgressBar
+ *   label="Bestand uploaden"
+ *   value={35}
+ *   description="Bestand wordt geüpload, even geduld..."
+ * />
+ *
+ * // Stappen (stap 3 van 7)
+ * <ProgressBar label="Stap voortgang" value={3} max={7} />
+ * ```
+ */
+export declare const ProgressBar: React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=ProgressBar.d.ts.map

package/dist/ProgressBar/ProgressBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAgB,MAAM,OAAO,CAAC;AAErC,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE9B;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb;AAED;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,eAAO,MAAM,WAAW,yFAuCvB,CAAC"}

package/dist/ProgressBar/ProgressBar.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useId } from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './ProgressBar.css';
+/**
+ * ProgressBar component
+ * Horizontale voortgangsbalk voor bepaalde wachttijden.
+ *
+ * Het native <progress>-element biedt impliciete role="progressbar" met
+ * aria-valuenow, aria-valuemin en aria-valuemax. Een visueel verborgen
+ * <label> koppelt de toegankelijke naam via for/id.
+ *
+ * @example
+ * ```tsx
+ * // Basis
+ * <ProgressBar label="Bestand uploaden" value={35} />
+ *
+ * // Met beschrijving
+ * <ProgressBar
+ *   label="Bestand uploaden"
+ *   value={35}
+ *   description="Bestand wordt geüpload, even geduld..."
+ * />
+ *
+ * // Stappen (stap 3 van 7)
+ * <ProgressBar label="Stap voortgang" value={3} max={7} />
+ * ```
+ */
+export const ProgressBar = React.forwardRef(({ className, label, value, max = 100, description, id, ...props }, ref) => {
+    const generatedId = useId();
+    const progressId = id ?? generatedId;
+    const percentage = Math.round((value / max) * 100);
+    return (_jsxs("div", { ref: ref, className: classNames('dsn-progress-bar', className), ...props, children: [_jsx("label", { className: "dsn-visually-hidden", htmlFor: progressId, children: label }), _jsx("div", { className: "dsn-progress-bar__header", children: _jsxs("p", { className: "dsn-paragraph dsn-progress-bar__percentage", "aria-hidden": "true", children: [percentage, "%"] }) }), _jsxs("progress", { id: progressId, className: "dsn-progress-bar__bar", value: value, max: max, children: [percentage, "%"] }), description && (_jsx("p", { className: "dsn-paragraph dsn-progress-bar__description", children: description }))] }));
+});
+ProgressBar.displayName = 'ProgressBar';
+//# sourceMappingURL=ProgressBar.js.map

package/dist/ProgressBar/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../src/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,EAAE,KAAK,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,mBAAmB,CAAC;AAgC3B;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,GAAG,GAAG,GAAG,EAAE,WAAW,EAAE,EAAE,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzE,MAAM,WAAW,GAAG,KAAK,EAAE,CAAC;IAC5B,MAAM,UAAU,GAAG,EAAE,IAAI,WAAW,CAAC;IACrC,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,GAAG,GAAG,CAAC,CAAC;IAEnD,OAAO,CACL,eACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,KAChD,KAAK,aAET,gBAAO,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAE,UAAU,YACvD,KAAK,GACA,EACR,cAAK,SAAS,EAAC,0BAA0B,YACvC,aACE,SAAS,EAAC,4CAA4C,iBAC1C,MAAM,aAEjB,UAAU,SACT,GACA,EACN,oBACE,EAAE,EAAE,UAAU,EACd,SAAS,EAAC,uBAAuB,EACjC,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,aAEP,UAAU,SACF,EACV,WAAW,IAAI,CACd,YAAG,SAAS,EAAC,6CAA6C,YACvD,WAAW,GACV,CACL,IACG,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/ProgressBar/index.d.ts

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

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

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

package/dist/ProgressBar/index.js

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

package/dist/ProgressBar/index.js.map

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

package/dist/Radio/Radio.css

@@ -0,0 +1,169 @@
+/**
+ * Radio Component Styles
+ * Custom radio button with inner circle indicator
+ */
+
+.dsn-radio {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--dsn-radio-size);
+  height: var(--dsn-radio-size);
+  flex-shrink: 0;
+}
+
+/* Native radio input (visually hidden but accessible) */
+.dsn-radio__input {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+
+.dsn-radio__input:disabled {
+  cursor: not-allowed;
+}
+
+/* Custom visual control */
+.dsn-radio__control {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: var(--dsn-radio-border-width) solid var(--dsn-radio-border-color);
+  border-radius: 50%;
+  background-color: var(--dsn-radio-background-color);
+  transition:
+    border-color 0.2s ease,
+    background-color 0.2s ease;
+  pointer-events: none;
+}
+
+/* Inner circle indicator */
+.dsn-radio__inner-circle {
+  width: var(--dsn-radio-icon-size);
+  height: var(--dsn-radio-icon-size);
+  border-radius: 50%;
+  background-color: transparent;
+  opacity: 0;
+  transform: scale(0.5);
+  transition:
+    opacity 0.2s ease,
+    transform 0.2s ease,
+    background-color 0.2s ease;
+}
+
+/* ========================================================================
+   STATES
+   ======================================================================== */
+
+/* Hover state */
+.dsn-radio__input:not(:disabled):hover + .dsn-radio__control {
+  border-width: var(--dsn-radio-hover-border-width);
+  border-color: var(--dsn-radio-hover-border-color);
+  background-color: var(--dsn-radio-hover-background-color);
+}
+
+/* Active state */
+.dsn-radio__input:not(:disabled):active + .dsn-radio__control {
+  border-width: var(--dsn-radio-active-border-width);
+  border-color: var(--dsn-radio-active-border-color);
+  background-color: var(--dsn-radio-active-background-color);
+}
+
+/* Focus state */
+.dsn-radio__input:focus-visible + .dsn-radio__control {
+  outline: var(--dsn-focus-outline-width) var(--dsn-focus-outline-style)
+    var(--dsn-focus-outline-color);
+  outline-offset: var(--dsn-focus-outline-offset);
+  border-width: var(--dsn-radio-focus-border-width);
+  border-color: var(--dsn-radio-focus-border-color);
+  background-color: var(--dsn-radio-focus-background-color);
+}
+
+/* Checked state */
+.dsn-radio__input:checked + .dsn-radio__control {
+  border-width: var(--dsn-radio-checked-border-width);
+  border-color: var(--dsn-radio-checked-border-color);
+  background-color: var(--dsn-radio-checked-background-color);
+}
+
+.dsn-radio__input:checked + .dsn-radio__control .dsn-radio__inner-circle {
+  background-color: var(--dsn-radio-checked-color);
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Checked + Hover */
+.dsn-radio__input:checked:not(:disabled):hover + .dsn-radio__control {
+  border-width: var(--dsn-radio-checked-hover-border-width);
+  border-color: var(--dsn-radio-checked-hover-border-color);
+  background-color: var(--dsn-radio-checked-hover-background-color);
+}
+
+.dsn-radio__input:checked:not(:disabled):hover
+  + .dsn-radio__control
+  .dsn-radio__inner-circle {
+  background-color: var(--dsn-radio-checked-hover-color);
+}
+
+/* Checked + Active */
+.dsn-radio__input:checked:not(:disabled):active + .dsn-radio__control {
+  border-width: var(--dsn-radio-checked-active-border-width);
+  border-color: var(--dsn-radio-checked-active-border-color);
+  background-color: var(--dsn-radio-checked-active-background-color);
+}
+
+.dsn-radio__input:checked:not(:disabled):active
+  + .dsn-radio__control
+  .dsn-radio__inner-circle {
+  background-color: var(--dsn-radio-checked-active-color);
+}
+
+/* Checked + Focus */
+.dsn-radio__input:checked:focus-visible + .dsn-radio__control {
+  border-width: var(--dsn-radio-checked-focus-border-width);
+  border-color: var(--dsn-radio-checked-focus-border-color);
+  background-color: var(--dsn-radio-checked-focus-background-color);
+}
+
+.dsn-radio__input:checked:focus-visible
+  + .dsn-radio__control
+  .dsn-radio__inner-circle {
+  background-color: var(--dsn-radio-checked-focus-color);
+}
+
+/* Disabled state */
+.dsn-radio__input:disabled + .dsn-radio__control {
+  border-color: var(--dsn-radio-disabled-border-color);
+  background-color: var(--dsn-radio-disabled-background-color);
+}
+
+/* Checked + Disabled */
+.dsn-radio__input:checked:disabled + .dsn-radio__control {
+  border-color: var(--dsn-radio-checked-disabled-border-color);
+  background-color: var(--dsn-radio-checked-disabled-background-color);
+}
+
+.dsn-radio__input:checked:disabled
+  + .dsn-radio__control
+  .dsn-radio__inner-circle {
+  background-color: var(--dsn-radio-checked-disabled-color);
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* Invalid state */
+.dsn-radio__input--invalid + .dsn-radio__control {
+  border-width: var(--dsn-radio-invalid-border-width);
+  border-color: var(--dsn-radio-invalid-border-color);
+  background-color: var(--dsn-radio-invalid-background-color);
+}
+
+.dsn-radio__input--invalid:focus-visible + .dsn-radio__control {
+  outline-color: var(--dsn-radio-invalid-border-color);
+}

package/dist/Radio/Radio.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import './Radio.css';
+export interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type'> {
+    /**
+     * Whether the radio button is in an invalid state
+     */
+    invalid?: boolean;
+}
+/**
+ * Radio button component for single selection (without label)
+ * Use RadioOption component to combine with a label
+ */
+export declare const Radio: React.ForwardRefExoticComponent<RadioProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=Radio.d.ts.map

package/dist/Radio/Radio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.d.ts","sourceRoot":"","sources":["../../src/Radio/Radio.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,aAAa,CAAC;AAErB,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,KAAK,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAC3C,MAAM,CACP;IACC;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,KAAK,qFAuBjB,CAAC"}

package/dist/Radio/Radio.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './Radio.css';
+/**
+ * Radio button component for single selection (without label)
+ * Use RadioOption component to combine with a label
+ */
+export const Radio = React.forwardRef(({ invalid, className, ...props }, ref) => {
+    const inputClasses = classNames('dsn-radio__input', invalid && 'dsn-radio__input--invalid', className);
+    return (_jsxs("div", { className: "dsn-radio", children: [_jsx("input", { ref: ref, type: "radio", className: inputClasses, "aria-invalid": invalid ? 'true' : undefined, ...props }), _jsx("span", { className: "dsn-radio__control", "aria-hidden": "true", children: _jsx("span", { className: "dsn-radio__inner-circle" }) })] }));
+});
+Radio.displayName = 'Radio';
+//# sourceMappingURL=Radio.js.map

package/dist/Radio/Radio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Radio.js","sourceRoot":"","sources":["../../src/Radio/Radio.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,aAAa,CAAC;AAYrB;;;GAGG;AACH,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CACnC,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxC,MAAM,YAAY,GAAG,UAAU,CAC7B,kBAAkB,EAClB,OAAO,IAAI,2BAA2B,EACtC,SAAS,CACV,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,WAAW,aACxB,gBACE,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,OAAO,EACZ,SAAS,EAAE,YAAY,kBACT,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,KACtC,KAAK,GACT,EACF,eAAM,SAAS,EAAC,oBAAoB,iBAAa,MAAM,YACrD,eAAM,SAAS,EAAC,yBAAyB,GAAQ,GAC5C,IACH,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC"}

package/dist/Radio/index.d.ts

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

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

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

package/dist/Radio/index.js

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

package/dist/Radio/index.js.map

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

package/dist/RadioGroup/RadioGroup.css

@@ -0,0 +1,10 @@
+/**
+ * RadioGroup Component Styles
+ * Container for multiple RadioOption components
+ */
+
+.dsn-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--dsn-radio-group-gap);
+}

package/dist/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import './RadioGroup.css';
+export interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Radio options to display in the group
+     */
+    children: React.ReactNode;
+}
+/**
+ * Radio Group component
+ * Container for multiple RadioOption components
+ *
+ * Note: This is just a list container. For a complete form field with label,
+ * wrap this in a FormFieldset component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (list only)
+ * <RadioGroup>
+ *   <RadioOption name="gender" label="Man" value="male" />
+ *   <RadioOption name="gender" label="Vrouw" value="female" />
+ *   <RadioOption name="gender" label="Anders" value="other" />
+ * </RadioGroup>
+ *
+ * // Complete form field (with FormFieldset and FormFieldLegend)
+ * <FormFieldset>
+ *   <FormFieldLegend>Geslacht</FormFieldLegend>
+ *   <RadioGroup>
+ *     <RadioOption name="gender" label="Man" value="male" />
+ *     <RadioOption name="gender" label="Vrouw" value="female" />
+ *     <RadioOption name="gender" label="Anders" value="other" />
+ *   </RadioGroup>
+ * </FormFieldset>
+ * ```
+ */
+export declare const RadioGroup: React.ForwardRefExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=RadioGroup.d.ts.map

package/dist/RadioGroup/RadioGroup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,kBAAkB,CAAC;AAE1B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC3E;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,eAAO,MAAM,UAAU,wFAUtB,CAAC"}

package/dist/RadioGroup/RadioGroup.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import './RadioGroup.css';
+/**
+ * Radio Group component
+ * Container for multiple RadioOption components
+ *
+ * Note: This is just a list container. For a complete form field with label,
+ * wrap this in a FormFieldset component.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (list only)
+ * <RadioGroup>
+ *   <RadioOption name="gender" label="Man" value="male" />
+ *   <RadioOption name="gender" label="Vrouw" value="female" />
+ *   <RadioOption name="gender" label="Anders" value="other" />
+ * </RadioGroup>
+ *
+ * // Complete form field (with FormFieldset and FormFieldLegend)
+ * <FormFieldset>
+ *   <FormFieldLegend>Geslacht</FormFieldLegend>
+ *   <RadioGroup>
+ *     <RadioOption name="gender" label="Man" value="male" />
+ *     <RadioOption name="gender" label="Vrouw" value="female" />
+ *     <RadioOption name="gender" label="Anders" value="other" />
+ *   </RadioGroup>
+ * </FormFieldset>
+ * ```
+ */
+export const RadioGroup = React.forwardRef(({ className, children, ...props }, ref) => {
+    const classes = classNames('dsn-radio-group', className);
+    return (_jsx("div", { ref: ref, className: classes, ...props, children: children }));
+});
+RadioGroup.displayName = 'RadioGroup';
+//# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sourceRoot":"","sources":["../../src/RadioGroup/RadioGroup.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,kBAAkB,CAAC;AAS1B;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,UAAU,CACxC,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACzC,MAAM,OAAO,GAAG,UAAU,CAAC,iBAAiB,EAAE,SAAS,CAAC,CAAC;IAEzD,OAAO,CACL,cAAK,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,OAAO,KAAM,KAAK,YACzC,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAC"}

package/dist/RadioGroup/index.d.ts

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

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

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

package/dist/RadioGroup/index.js

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

package/dist/RadioGroup/index.js.map

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

package/dist/RadioOption/RadioOption.css

@@ -0,0 +1,17 @@
+/**
+ * RadioOption Component Styles
+ * Radio button with label - combines Radio and OptionLabel
+ */
+
+.dsn-radio-option {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--dsn-radio-option-gap);
+  padding-block: var(--dsn-radio-option-padding-block);
+  cursor: pointer;
+  width: fit-content;
+}
+
+.dsn-radio-option:has(input:disabled) {
+  cursor: not-allowed;
+}

package/dist/RadioOption/RadioOption.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { RadioProps } from '../Radio';
+import './RadioOption.css';
+export interface RadioOptionProps extends RadioProps {
+    /**
+     * Label text for the radio button
+     */
+    label: string;
+}
+/**
+ * Radio button with label - combines Radio and OptionLabel
+ */
+export declare const RadioOption: React.ForwardRefExoticComponent<RadioOptionProps & React.RefAttributes<HTMLInputElement>>;
+//# sourceMappingURL=RadioOption.d.ts.map

package/dist/RadioOption/RadioOption.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.d.ts","sourceRoot":"","sources":["../../src/RadioOption/RadioOption.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAE7C,OAAO,mBAAmB,CAAC;AAE3B,MAAM,WAAW,gBAAiB,SAAQ,UAAU;IAClD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,WAAW,2FAWvB,CAAC"}

package/dist/RadioOption/RadioOption.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { classNames } from '@dsn-starter-kit/core';
+import { Radio } from '../Radio';
+import { OptionLabel } from '../OptionLabel';
+import './RadioOption.css';
+/**
+ * Radio button with label - combines Radio and OptionLabel
+ */
+export const RadioOption = React.forwardRef(({ label, disabled, className, ...radioProps }, ref) => {
+    const wrapperClasses = classNames('dsn-radio-option', className);
+    return (_jsxs("label", { className: wrapperClasses, children: [_jsx(Radio, { ref: ref, disabled: disabled, ...radioProps }), _jsx(OptionLabel, { disabled: disabled, children: label })] }));
+});
+RadioOption.displayName = 'RadioOption';
+//# sourceMappingURL=RadioOption.js.map

package/dist/RadioOption/RadioOption.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioOption.js","sourceRoot":"","sources":["../../src/RadioOption/RadioOption.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAc,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,mBAAmB,CAAC;AAS3B;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CACzC,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,UAAU,EAAE,EAAE,GAAG,EAAE,EAAE;IACrD,MAAM,cAAc,GAAG,UAAU,CAAC,kBAAkB,EAAE,SAAS,CAAC,CAAC;IAEjE,OAAO,CACL,iBAAO,SAAS,EAAE,cAAc,aAC9B,KAAC,KAAK,IAAC,GAAG,EAAE,GAAG,EAAE,QAAQ,EAAE,QAAQ,KAAM,UAAU,GAAI,EACvD,KAAC,WAAW,IAAC,QAAQ,EAAE,QAAQ,YAAG,KAAK,GAAe,IAChD,CACT,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,WAAW,CAAC,WAAW,GAAG,aAAa,CAAC"}

package/dist/RadioOption/index.d.ts

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

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

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

package/dist/RadioOption/index.js

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

package/dist/RadioOption/index.js.map

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