@dbcdk/react-components 0.0.9 → 0.0.12

package/dist/components/filter-field/FilterField.module.css

@@ -10,16 +10,22 @@
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 
+  position: relative;
+
   transition:
     border-color var(--transition-fast) var(--ease-standard),
     box-shadow var(--transition-fast) var(--ease-standard),
     background-color var(--transition-fast) var(--ease-standard);
 }
 
-/* .filterField.active {
-  border-color: var(--color-border-selected);
-  background: var(--color-bg-selected);
-} */
+/* More comfortable active state:
+   - less "blue outline" noise
+   - slightly warmer surface hint
+*/
+.filterField.active {
+  border-color: color-mix(in srgb, var(--color-border-default) 75%, var(--color-border-selected));
+  background: color-mix(in srgb, var(--color-bg-surface) 96%, var(--color-bg-selected));
+}
 
 .filterField.sm {
   block-size: calc(var(--component-size-sm) + var(--density));
@@ -39,6 +45,7 @@
   user-select: none;
 }
 
+/* Operator trigger */
 .filterField .operatorTrigger {
   display: inline-flex;
   align-items: center;
@@ -68,30 +75,139 @@
   color: var(--color-disabled-fg);
   background: var(--color-disabled-bg);
 }
-
 .filterField .operatorText {
   white-space: nowrap;
 }
 
+/* When active, operator is less dominant (calmer + more "token"-like) */
+.filterField.active .operatorTrigger {
+  background: transparent;
+  color: var(--color-fg-muted);
+}
+.filterField.active .operatorTrigger:hover {
+  background: var(--opac-bg-dark);
+  color: var(--color-fg-default);
+}
+
+/* Wrapper for the select / multiselect control */
 .filterField .valueWrapper {
   display: inline-flex;
   align-items: center;
   padding: 0;
   height: 100%;
+
+  flex: 1;
+  min-width: 0;
 }
 
-.valueWrapper > * {
+/* Ensure the control inside can stretch/shrink */
+.filterField .valueWrapper > * {
   height: 100%;
-  & > * {
-    height: 100% !important;
-  }
+  width: 100%;
+  min-width: 0;
 }
-
-.valueWrapper button {
+.filterField .valueWrapper > * > * {
   height: 100% !important;
+}
+
+/* Active: emphasize VALUE area (but keep it soft) */
+.filterField.active .valueWrapper {
+  background: color-mix(in srgb, var(--color-bg-surface) 88%, var(--color-bg-selected));
+  border-left: var(--border-width-thin) solid
+    color-mix(in srgb, var(--color-border-default) 80%, var(--color-border-selected));
+  border-top-right-radius: calc(var(--border-radius-default) - 1px);
+  border-bottom-right-radius: calc(var(--border-radius-default) - 1px);
+}
+
+/* =========================
+   TRIGGER BUTTON TARGETING
+   ========================= */
+
+/* Select trigger button */
+.filterField .valueWrapper :global(button[data-forminput]) {
+  width: 100%;
+  height: 100%;
+  border: 0 !important;
+
+  /* slightly more breathing room than before */
+  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs)) !important;
+
+  text-align: left;
+  justify-content: flex-start;
+}
+
+/* MultiSelect trigger button (Popover container is a div; trigger is its direct child button) */
+.filterField .valueWrapper > div > button {
+  width: 100%;
+  height: 100%;
   border: 0 !important;
-  padding-inline: var(--spacing-sm) !important;
+  padding-inline: calc(var(--spacing-sm) + var(--spacing-2xs)) !important;
+
+  text-align: left;
+  justify-content: flex-start;
+}
+
+/* Slight spacing between clear (×) and chevron for Select + MultiSelect
+   (feels less cramped / more intentional) */
+.filterField .valueWrapper :global(button[data-forminput]) :global(.dbc-flex),
+.filterField .valueWrapper > div > button {
+  column-gap: var(--spacing-xs);
+}
+
+/* Make the internal Select layout behave */
+.filterField .valueWrapper :global(.dbc-flex) {
+  width: 100% !important;
+  min-width: 0;
+}
+
+.filterField .valueWrapper :global(.dbc-flex > span:first-child) {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Keep ClearButton + chevron from stretching */
+.filterField .valueWrapper :global(.dbc-flex) > *:not(span:first-child) {
+  flex: 0 0 auto;
+}
+
+/* For MultiSelect: label + chip should truncate nicely */
+.filterField .valueWrapper > div > button > span:first-child {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* Emphasize chosen value text in active state (but slightly less "boldy") */
+.filterField.active .valueWrapper input {
+  font-weight: 550;
 }
+.filterField.active .valueWrapper :global(button[data-forminput]),
+.filterField.active .valueWrapper > div > button {
+  font-weight: 550 !important;
+}
+
+/* Icons calmer by default; crisp on hover/focus */
+.filterField.active .valueWrapper svg {
+  opacity: 0.72;
+}
+.filterField.active .valueWrapper:hover svg,
+.filterField.active .valueWrapper :global(button[data-forminput]):focus-visible svg,
+.filterField.active .valueWrapper > div > button:focus-visible svg {
+  opacity: 1;
+}
+
+/* =========================
+   INPUT styling
+   ========================= */
 
 .filterField input {
   appearance: none;
@@ -103,6 +219,11 @@
   inline-size: auto;
   min-inline-size: 10ch;
   block-size: 100%;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+
+  /* a tiny bit more comfort */
+  padding-block: calc(var(--spacing-3xs) + var(--density));
 }
 
 .filterField button {

package/dist/components/forms/checkbox/Checkbox.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { JSX } from 'react';
+import type { JSX, ReactNode } from 'react';
 type Variant = 'default' | 'primary' | 'outlined';
 type Size = 'sm' | 'md' | 'lg';
 interface CheckboxProps {
@@ -7,8 +7,8 @@ interface CheckboxProps {
     onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
     variant?: Variant;
     disabled?: boolean;
-    /** Text shown next to the box (per-item label) */
-    label?: string;
+    modified?: boolean;
+    label?: ReactNode;
     size?: Size;
     containerLabel?: string;
     error?: string;
@@ -17,15 +17,9 @@ interface CheckboxProps {
     labelWidth?: string;
     fullWidth?: boolean;
     required?: boolean;
-    /**
-     * If true, do NOT wrap with InputContainer.
-     * Use this inside CheckboxGroup (so you don't get group-form layout per item).
-     */
     noContainer?: boolean;
-    /** Optional id for accessibility (label htmlFor) */
     id?: string;
-    /** Data attributes pass-through */
     'data-cy'?: string;
 }
-export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, modified, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
 export {};

package/dist/components/forms/checkbox/Checkbox.js

@@ -4,7 +4,7 @@ import { Check } from 'lucide-react';
 import { useId, useState } from 'react';
 import styles from './Checkbox.module.css';
 import { InputContainer } from '../input-container/InputContainer';
-export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', modified, containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
     const [internal, setInternal] = useState(false);
     const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
     const generatedId = useId();
@@ -19,9 +19,7 @@ export function Checkbox({ checked: controlled, onChange, variant = 'outlined',
     const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsx("button", { id: controlId, disabled: disabled, type: "button", role: "checkbox", "aria-checked": isChecked, "aria-disabled": disabled || undefined, "aria-invalid": Boolean(error) || undefined, onClick: toggle, className: [styles.checkbox, isChecked ? styles.checked : '', styles[variant], styles[size]]
                     .filter(Boolean)
                     .join(' '), children: isChecked && _jsx(Check, { className: styles.icon }) }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
-    // For CheckboxGroup use-case
-    if (noContainer || (!containerLabel && !error))
+    if (noContainer)
         return content;
-    // Standalone form field use-case
-    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+    return (_jsx(InputContainer, { modified: modified, label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
 }

package/dist/components/forms/checkbox-group/CheckboxGroup.js

@@ -66,7 +66,7 @@ export function CheckboxGroup({ label, options, selectedValues, onChange, onTogg
     return (_jsxs("div", { className: wrapperClassName, "data-cy": dataCy, style: { ['--checkboxgroup-action-min-width']: actionMinWidth }, children: [label && _jsx("span", { className: styles.groupLabel, children: label }), _jsx("div", { className: itemsClassName, role: "group", "aria-label": label, children: options.map(opt => {
                     const isChecked = selectedSet.has(opt.value);
                     const isDisabled = disabled || !!opt.disabled;
-                    return (_jsx(Checkbox, { label: opt.label, checked: isChecked, disabled: isDisabled, variant: variant, size: size, onChange: () => {
+                    return (_jsx(Checkbox, { label: opt.label, checked: isChecked, disabled: isDisabled, variant: variant, size: "sm", onChange: () => {
                             if (isDisabled)
                                 return;
                             toggleValue(opt.value);

package/dist/components/forms/checkbox-group/CheckboxGroup.module.css

@@ -30,7 +30,7 @@
 .contained {
   padding: 0 var(--spacing-xs);
   border: var(--border-width-thin) solid var(--color-border-subtle);
-  border-radius: var(--border-radius-md);
+  border-radius: var(--border-radius-default);
   background: var(--color-bg-surface);
 }
 

package/dist/components/forms/input/Input.d.ts

@@ -15,6 +15,7 @@ export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size
     buttonIcon?: React.ReactNode;
     tooltip?: React.ReactNode;
     tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    modified?: boolean;
 };
 /**
  * Explicit exported type annotation is required with --isolatedDeclarations.

package/dist/components/forms/input/Input.js

@@ -23,9 +23,7 @@ function mergeRefs(...refs) {
  */
 export const Input = forwardRef(function Input({ 
 // InputContainer props
-label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
-// ✅ Input-level tooltip props
-tooltip, tooltipPlacement = 'right', 
+label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified, 
 // Input-only props
 icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, 
 // Native input props
@@ -50,7 +48,7 @@ id, style, className, ...inputProps }, ref) {
         placement: tooltipPlacement,
         offset: 8,
     });
-    return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: _jsxs("div", { style: rootStyle, className: [
+    return (_jsx(InputContainer, { label: label, htmlFor: inputId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: _jsxs("div", { style: rootStyle, className: [
                 styles.container,
                 fullWidth ? styles.fullWidth : '',
                 onClear ? styles.withClear : '',

package/dist/components/forms/input/Input.module.css

@@ -3,8 +3,8 @@
   /* inline-flex makes width behave weird in parents */
   display: inline-flex;
   align-items: stretch;
+  flex-grow: 1;
   gap: 0;
-
   /* width control */
   inline-size: var(--input-width, auto);
   min-inline-size: var(--input-min-width, 0);
@@ -33,14 +33,13 @@
   flex: 1 1 auto;
   min-inline-size: 0; /* critical */
   inline-size: 100%;
-
+  background: var(--color-bg-surface);
   font-family: var(--font-family);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
   box-sizing: border-box;
   text-overflow: ellipsis;
 
-  background-color: var(--color-bg-surface);
   border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-default);
 
@@ -53,6 +52,13 @@
     box-shadow var(--transition-fast) var(--ease-standard);
 }
 
+.input:disabled {
+  background-color: var(--color-disabled-bg);
+  border: 0;
+  color: var(--color-disabled-fg);
+  cursor: not-allowed;
+  opacity: 0.5;
+}
 /* Button group styling */
 .withButton .input {
   border-top-right-radius: 0;
@@ -75,26 +81,19 @@
 }
 
 .input:focus-visible {
-  outline: none;
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
 }
 
 /* Variants */
 .filled {
   background-color: var(--color-bg-surface);
-  border: 0;
 }
 .standalone {
   border-radius: var(--border-radius-rounded);
   background-color: var(--color-bg-surface);
   box-shadow: var(--shadow-xs), var(--shadow-md);
 }
-.standalone:focus-visible {
-  outline: none;
-  border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
-}
+
 .outlined {
   background-color: transparent;
 }

package/dist/components/forms/input-container/InputContainer.d.ts

@@ -11,5 +11,6 @@ export interface InputContainerProps {
     orientation?: 'vertical' | 'horizontal';
     labelWidth?: string;
     labelAlignment?: 'top' | 'center';
+    modified?: boolean;
 }
-export declare function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, labelWidth, }: InputContainerProps): React.ReactElement;
+export declare function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, labelWidth, modified, }: InputContainerProps): React.ReactElement;

package/dist/components/forms/input-container/InputContainer.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './InputContainer.module.css';
-export function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', labelWidth = '120px', }) {
+export function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth = false, required = false, children, orientation = 'horizontal', labelWidth = '160px', modified = false, }) {
     const message = error !== null && error !== void 0 ? error : helpText;
     const messageClass = error ? styles.errorText : styles.helpText;
     const renderLabel = label && (_jsxs("label", { className: styles.label, htmlFor: htmlFor, children: [label, required && _jsx("span", { className: styles.required, children: " *" })] }));
     const renderMessageRow = (message || helpTextAddition) && (_jsxs("div", { className: `${messageClass} ${styles.messageRow}`, children: [_jsx("span", { children: message }), helpTextAddition && _jsx("span", { className: styles.helpTextAddition, children: helpTextAddition })] }));
     if (orientation === 'vertical') {
-        return (_jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-xs", style: { width: fullWidth ? '100%' : undefined }, children: [renderLabel, children, renderMessageRow] }));
+        return (_jsxs("div", { "data-modified": modified ? true : undefined, className: `dbc-flex dbc-flex-column dbc-gap-xs ${styles.inputContainer}`, style: { width: fullWidth ? '100%' : undefined }, children: [renderLabel, children, renderMessageRow] }));
     }
-    return (_jsx("div", { className: styles.inputContainer, style: {
+    return (_jsx("div", { "data-modified": modified ? true : undefined, className: styles.inputContainer, style: {
             '--label-width': labelWidth,
             width: fullWidth ? '100%' : undefined,
         }, children: _jsxs("div", { className: `${styles.horizontal} dbc-flex dbc-flex-column dbc-gap-xs`, children: [_jsxs("div", { className: `${styles.labelContainer} dbc-flex dbc-items-center dbc-gap-xs`, children: [renderLabel, children] }), renderMessageRow] }) }));

package/dist/components/forms/input-container/InputContainer.module.css

@@ -6,6 +6,12 @@
   gap: var(--gap);
 }
 
+.label {
+  color: var(--color-fg-default);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+}
+
 .horizontal .errorText,
 .horizontal .helpText {
   margin-left: calc(var(--label-width) + var(--gap));
@@ -32,3 +38,62 @@
   color: var(--color-status-error);
   font-weight: bold;
 }
+
+/* ---------------- MODIFIED FIELD (DIRECT CONTROL TINT) ---------------- */
+
+/* Optional scan cue: left bar only (no box around control) */
+.inputContainer[data-modified] {
+  border-left: var(--border-width-thick) solid var(--color-status-warning-border);
+  padding-left: var(--spacing-xs);
+}
+
+/**
+ * Tint "real controls" directly.
+ * This covers:
+ * - native input/textarea
+ * - button-based components (Select trigger, Checkbox button, etc.)
+ * - combobox triggers
+ */
+.inputContainer[data-modified]
+  :is(input, textarea, button[data-forminput], [role='combobox'][data-forminput]) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 45%, var(--color-bg-surface));
+}
+
+/**
+ * If your controls also have borders, nudge them slightly warmer.
+ * (Keep subtle so it doesn't look like validation.)
+ */
+.inputContainer[data-modified]
+  :is(input, textarea, button[data-forminput], [role='combobox'][data-forminput]) {
+  border-color: color-mix(
+    in srgb,
+    var(--color-status-warning-border) 35%,
+    var(--color-border-default)
+  );
+}
+
+/**
+ * Checkbox/Radio special case:
+ * - Their "label" is inside children.
+ * - InputContainer’s own label uses .label class.
+ * We want to tint ONLY the child labels, not the container label column.
+ */
+.inputContainer[data-modified] label:not(.label) {
+  background-color: color-mix(in srgb, var(--color-status-warning-bg) 35%, transparent);
+  border-radius: var(--border-radius-default);
+  padding: 2px 6px;
+}
+
+/* Correct disabled selector (no accidental “actionable” tint) */
+.inputContainer[data-modified]
+  :is(input, textarea, button[data-forminput], [role='combobox'][data-forminput]):disabled,
+.inputContainer[data-modified]
+  :is(
+    input,
+    textarea,
+    button[data-forminput],
+    [role='combobox'][data-forminput]
+  )[aria-disabled='true'] {
+  background-color: var(--color-disabled-bg);
+  border-color: var(--color-disabled-border);
+}

package/dist/components/forms/radio-buttons/RadioButton.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+export interface RadioButtonProps {
+    /** group name (required for radio behavior) */
+    name: string;
+    /** this option's value */
+    value: string;
+    /** controlled selected value for the group */
+    selectedValue?: string;
+    /** uncontrolled checked (rare; prefer selectedValue on group) */
+    checked?: boolean;
+    /** called with (value, event) */
+    onChange?: (value: string, event: React.ChangeEvent<HTMLInputElement>) => void;
+    disabled?: boolean;
+    label?: string;
+    variant?: Variant;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    /**
+     * If true, do NOT wrap with InputContainer.
+     * Use inside RadioGroup.
+     */
+    noContainer?: boolean;
+    id?: string;
+    'data-cy'?: string;
+}
+export declare function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: RadioButtonProps): JSX.Element;
+export {};

package/dist/components/forms/radio-buttons/RadioButton.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import styles from './RadioButtons.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+export function RadioButton({ name, value, selectedValue, checked, onChange, disabled, label, variant = 'outlined', size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `radio-${generatedId}`;
+    const isChecked = selectedValue !== undefined ? selectedValue === value : Boolean(checked);
+    const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsxs("span", { className: styles.controlWrap, children: [_jsx("input", { id: controlId, className: styles.input, type: "radio", name: name, value: value, checked: isChecked, disabled: disabled, required: required, "aria-invalid": Boolean(error) || undefined, onChange: e => {
+                            if (disabled)
+                                return;
+                            onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value, e);
+                        } }), _jsx("span", { className: [
+                            styles.radio,
+                            isChecked ? styles.checked : '',
+                            disabled ? styles.disabled : '',
+                            styles[variant],
+                            styles[size],
+                        ]
+                            .filter(Boolean)
+                            .join(' '), "aria-hidden": "true", children: _jsx("span", { className: styles.dot }) })] }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
+    if (noContainer || (!containerLabel && !error))
+        return content;
+    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+}

package/dist/components/forms/radio-buttons/RadioButtonGroup.d.ts

@@ -0,0 +1,25 @@
+import type { JSX } from 'react';
+export type RadioOption<V extends string = string> = {
+    label: string;
+    value: V;
+    disabled?: boolean;
+};
+export interface RadioGroupProps<V extends string = string> {
+    name?: string;
+    value: V | null;
+    onChange: (value: V) => void;
+    options: RadioOption<V>[];
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    helpText?: string;
+    required?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    modified?: boolean;
+    /** layout of radios themselves */
+    direction?: 'row' | 'column';
+    'data-cy'?: string;
+}
+export declare function RadioButtonGroup<V extends string = string>({ name, value, onChange, options, disabled, label, error, helpText, required, orientation, labelWidth, fullWidth, modified, direction, 'data-cy': dataCy, }: RadioGroupProps<V>): JSX.Element;

package/dist/components/forms/radio-buttons/RadioButtonGroup.js

@@ -0,0 +1,19 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from 'react';
+import { RadioButton } from './RadioButton';
+import { InputContainer } from '../input-container/InputContainer';
+export function RadioButtonGroup({ name, value, onChange, options, disabled = false, label, error, helpText, required = false, orientation = 'horizontal', labelWidth = '160px', fullWidth = false, modified = false, direction = 'column', 'data-cy': dataCy, }) {
+    const generated = useId();
+    const groupName = name !== null && name !== void 0 ? name : `radio-group-${generated}`;
+    const content = (_jsx("div", { role: "radiogroup", "aria-invalid": Boolean(error) || undefined, "data-cy": dataCy, style: {
+            display: 'flex',
+            flexDirection: direction,
+            gap: '8px',
+        }, children: options.map(opt => (_jsx(RadioButton, { noContainer: true, name: groupName, value: String(opt.value), selectedValue: value !== null && value !== void 0 ? value : undefined, disabled: disabled || opt.disabled, label: opt.label, required: required, onChange: v => onChange(v), "data-cy": dataCy ? `${dataCy}-option-${String(opt.value)}` : undefined }, String(opt.value)))) }));
+    // If no InputContainer props were provided, just return group content
+    if (!label && !error)
+        return content;
+    // Wrap once as a proper field
+    return (_jsx(InputContainer, { label: label, htmlFor: undefined, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, modified: modified, children: content }));
+}