@dbcdk/react-components 0.0.5 → 0.0.6

package/dist/components/filter-field/FilterField.d.ts

@@ -5,7 +5,7 @@ export interface FilterEvent {
     operator: Operator;
     value: string | string[] | null;
 }
-export interface MultiselectOption {
+interface MultiselectOption {
     label: string;
     value: string;
     icon?: React.ReactNode;
@@ -25,4 +25,7 @@ export interface FilterFieldProps extends Omit<React.InputHTMLAttributes<HTMLInp
     disabled?: boolean;
 }
 export declare const NUMBER_OPERATORS: Operator[];
-export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, ...inputProps }: FilterFieldProps): React.ReactElement;
+export declare function FilterField({ field, control, operator, value, onChange, operators, options, single, size, label, placeholder, disabled, 'data-cy': dataCy, ...inputProps }: FilterFieldProps & {
+    'data-cy'?: string;
+}): React.ReactElement;
+export {};

package/dist/components/filter-field/FilterField.js

@@ -1,182 +1,139 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useMemo, useEffect, useRef } from 'react';
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Check } from 'lucide-react';
-import { Popover } from '../popover/Popover';
-import { Input } from '../input/Input';
-import { Menu } from '../menu/Menu';
-import { MultiSelect } from '../multi-select/MultiSelect';
-import { Select } from '../select/Select';
+import { useMemo, useRef, useState, useEffect } from 'react';
+import { Input } from '../../components/forms/input/Input';
+import { MultiSelect } from '../../components/forms/multi-select/MultiSelect';
 import styles from './FilterField.module.css';
-
+import { Select } from '../forms/select/Select';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
 const LABELS = {
-  is: "is",
-  isNot: "not",
-  contains: "contains",
-  notContains: "not contain",
-  startsWith: "starts with",
-  endsWith: "ends with",
-  gt: ">",
-  lt: "<",
-  gte: "\u2265",
-  lte: "\u2264",
-  in: "",
-  notIn: "not in",
-  isEmpty: "empty",
-  isNotEmpty: "not empty"
+    is: 'is',
+    isNot: 'not',
+    contains: 'contains',
+    notContains: 'not contain',
+    startsWith: 'starts with',
+    endsWith: 'ends with',
+    gt: '>',
+    lt: '<',
+    gte: '≥',
+    lte: '≤',
+    in: '',
+    notIn: 'not in',
+    isEmpty: 'empty',
+    isNotEmpty: 'not empty',
 };
 const DEFAULT_TEXT_OPERATORS = [
-  "is",
-  "isNot",
-  "contains",
-  "notContains",
-  "startsWith",
-  "endsWith",
-  "isEmpty",
-  "isNotEmpty"
+    'is',
+    'isNot',
+    'contains',
+    'notContains',
+    'startsWith',
+    'endsWith',
+    'isEmpty',
+    'isNotEmpty',
 ];
-const NUMBER_OPERATORS = [
-  "is",
-  "isNot",
-  "gt",
-  "lt",
-  "gte",
-  "lte",
-  "isEmpty",
-  "isNotEmpty"
+export const NUMBER_OPERATORS = [
+    'is',
+    'isNot',
+    'gt',
+    'lt',
+    'gte',
+    'lte',
+    'isEmpty',
+    'isNotEmpty',
 ];
-function OperatorDropdown({
-  value,
-  onChange,
-  operators,
-  size = "sm",
-  disabled
-}) {
-  const popRef = useRef(null);
-  const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
-  useEffect(() => {
-    setActiveIndex(Math.max(0, operators.indexOf(value)));
-  }, [operators, value]);
-  const handleSelect = (op) => {
-    var _a;
-    onChange(op);
-    setActiveIndex(operators.indexOf(op));
-    (_a = popRef.current) == null ? void 0 : _a.close();
-  };
-  return /* @__PURE__ */ jsx(
-    Popover,
-    {
-      ref: popRef,
-      minWidth: "220px",
-      trigger: (toggle, icon) => /* @__PURE__ */ jsxs(
-        "button",
-        {
-          type: "button",
-          onClick: toggle,
-          disabled,
-          "aria-label": "Change operator",
-          className: `${styles.operatorTrigger} ${styles[size]}`,
-          children: [
-            /* @__PURE__ */ jsx("span", { className: styles.operatorText, children: LABELS[value] }),
-            icon
-          ]
-        }
-      ),
-      children: /* @__PURE__ */ jsx(Menu, { children: operators.map((op) => {
-        const selected = op === value;
-        return /* @__PURE__ */ jsx(Menu.Item, { active: selected, children: /* @__PURE__ */ jsxs("button", { onClick: () => handleSelect(op), children: [
-          /* @__PURE__ */ jsx("span", { style: { width: 16, display: "inline-flex", justifyContent: "center" }, children: selected ? /* @__PURE__ */ jsx(Check, { size: 16 }) : null }),
-          LABELS[op]
-        ] }) }, op);
-      }) })
-    }
-  );
+function OperatorDropdown({ value, onChange, operators, size = 'sm', disabled, }) {
+    const popRef = useRef(null);
+    const [activeIndex, setActiveIndex] = useState(() => Math.max(0, operators.indexOf(value)));
+    useEffect(() => {
+        setActiveIndex(Math.max(0, operators.indexOf(value)));
+    }, [operators, value]);
+    const handleSelect = (op) => {
+        var _a;
+        onChange(op);
+        setActiveIndex(operators.indexOf(op));
+        (_a = popRef.current) === null || _a === void 0 ? void 0 : _a.close();
+    };
+    return (_jsx(Popover, { ref: popRef, minWidth: "220px", trigger: (toggle, icon) => (_jsxs("button", { type: "button", onClick: toggle, disabled: disabled, "aria-label": "Change operator", className: `${styles.operatorTrigger} ${styles[size]}`, children: [_jsx("span", { className: styles.operatorText, children: LABELS[value] }), icon] })), children: _jsx(Menu, { children: operators.map(op => {
+                const selected = op === value;
+                return (_jsx(Menu.Item, { active: selected, children: _jsxs("button", { type: "button", onClick: () => handleSelect(op), disabled: disabled, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: selected ? _jsx(Check, { size: 16 }) : null }), LABELS[op]] }) }, op));
+            }) }) }));
 }
-function FilterField({
-  field,
-  control,
-  operator,
-  value,
-  onChange,
-  operators,
-  options = [],
-  single = true,
-  size = "md",
-  label,
-  placeholder = "Type value\u2026",
-  disabled,
-  ...inputProps
-}) {
-  const [selectedOperator, setSelectedOperator] = useState(operator);
-  const ops = useMemo(() => operators != null ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
-  useEffect(() => {
-  }, [operator]);
-  useEffect(() => {
-    if (ops.includes(operator)) {
-      setSelectedOperator(operator);
-    }
-  }, [operator]);
-  const emit = (next) => {
-    var _a, _b, _c;
-    setSelectedOperator((_a = next.operator) != null ? _a : selectedOperator);
-    onChange({
-      field,
-      operator: (_b = next.operator) != null ? _b : selectedOperator,
-      value: (_c = next.value) != null ? _c : value
-    });
-  };
-  return /* @__PURE__ */ jsxs("div", { className: ` ${styles.filterField} ${styles[size]}`, children: [
-    label ? /* @__PURE__ */ jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null,
-    /* @__PURE__ */ jsx(
-      OperatorDropdown,
-      {
-        value: selectedOperator,
-        onChange: (op) => emit({ operator: op }),
-        operators: ops,
-        size,
-        disabled
-      }
-    ),
-    /* @__PURE__ */ jsx("div", { className: `${control === "input" ? "" : styles.valueWrapper}`, children: control === "input" ? /* @__PURE__ */ jsx(
-      Input,
-      {
-        ...inputProps,
-        value: value != null ? value : "",
-        onChange: (e) => emit({ value: e.currentTarget.value }),
-        inputSize: size,
-        placeholder,
-        fullWidth: true,
-        minWidth: "120px",
-        disabled,
-        onClear: () => emit({ value: "" })
-      }
-    ) : single ? /* @__PURE__ */ jsx(
-      Select,
-      {
-        options,
-        selectedValue: value != null ? value : null,
-        onChange: (v) => emit({ value: v }),
-        placeholder,
-        size,
-        variant: "inline",
-        onClear: () => emit({ value: "" })
-      }
-    ) : /* @__PURE__ */ jsx(
-      MultiSelect,
-      {
-        options,
-        size,
-        variant: "inline",
-        selectedValues: Array.isArray(value) ? value : [],
-        onChange: (v) => {
-          const current = new Set(Array.isArray(value) ? value : []);
-          current.has(v) ? current.delete(v) : current.add(v);
-          emit({ value: Array.from(current) });
-        },
-        onClear: () => emit({ value: [] }),
-        children: placeholder
-      }
-    ) })
-  ] });
+export function FilterField({ field, control, operator, value, onChange, operators, options = [], single = true, size = 'md', label, placeholder = 'Type value…', disabled, 'data-cy': dataCy, ...inputProps }) {
+    var _a, _b;
+    const [selectedOperator, setSelectedOperator] = useState(operator);
+    const ops = useMemo(() => operators !== null && operators !== void 0 ? operators : DEFAULT_TEXT_OPERATORS, [operators]);
+    // Local state ONLY for input control (to avoid URL->props lag)
+    const [localValue, setLocalValue] = useState((_a = value) !== null && _a !== void 0 ? _a : '');
+    const debounceRef = useRef(null);
+    const isTypingRef = useRef(false);
+    useEffect(() => {
+        if (ops.includes(operator)) {
+            setSelectedOperator(operator);
+        }
+    }, [operator, ops]);
+    const emit = (next) => {
+        var _a, _b;
+        const nextOperator = (_a = next.operator) !== null && _a !== void 0 ? _a : selectedOperator;
+        const nextValue = (_b = next.value) !== null && _b !== void 0 ? _b : value;
+        if (next.operator)
+            setSelectedOperator(nextOperator);
+        onChange({
+            field,
+            operator: nextOperator,
+            value: nextValue,
+        });
+    };
+    const scheduleEmitValue = (nextVal) => {
+        if (debounceRef.current)
+            clearTimeout(debounceRef.current);
+        debounceRef.current = setTimeout(() => {
+            isTypingRef.current = false;
+            emit({ value: nextVal });
+        }, 250); // tweak debounce as needed
+    };
+    // Sync internal value when parent value changes (e.g. URL updates)
+    useEffect(() => {
+        var _a;
+        if (control !== 'input')
+            return;
+        const incoming = (_a = value) !== null && _a !== void 0 ? _a : '';
+        // don't fight the user mid-typing; once parent catches up, we allow sync again
+        if (!isTypingRef.current && incoming !== localValue) {
+            setLocalValue(incoming);
+        }
+        if (incoming === localValue) {
+            isTypingRef.current = false;
+        }
+    }, [value, control, localValue]);
+    // Cleanup debounce on unmount
+    useEffect(() => {
+        return () => {
+            if (debounceRef.current)
+                clearTimeout(debounceRef.current);
+        };
+    }, []);
+    return (_jsxs("div", { ...(dataCy ? { 'data-cy': dataCy } : {}), className: ` ${styles.filterField} ${styles[size]} ${value ? styles.active : ''}`, children: [label ? _jsx("span", { className: `${styles.label} ${styles[size]}`, children: label }) : null, _jsx(OperatorDropdown, { value: selectedOperator, onChange: op => emit({ operator: op }), operators: ops, size: size, disabled: disabled }), _jsx("div", { className: `${control === 'input' ? 'dbc-flex' : styles.valueWrapper}`, children: control === 'input' ? (_jsx(Input, { ...inputProps, value: localValue, onChange: e => {
+                        const next = e.currentTarget.value;
+                        isTypingRef.current = true;
+                        setLocalValue(next); // immediate UI update
+                        scheduleEmitValue(next); // debounced parent update
+                    }, inputSize: size, placeholder: placeholder, width: "160px", minWidth: "120px", disabled: disabled, onClear: () => {
+                        isTypingRef.current = false;
+                        if (debounceRef.current)
+                            clearTimeout(debounceRef.current);
+                        setLocalValue('');
+                        emit({ value: '' }); // clear should be immediate
+                    } })) : single ? (_jsx(Select, { options: options, selectedValue: (_b = value) !== null && _b !== void 0 ? _b : null, onChange: v => emit({ value: v }), placeholder: placeholder, size: size, variant: "inline", onClear: () => emit({ value: '' }) })) : (_jsx(MultiSelect, { options: options, size: size, variant: "inline", selectedValues: (Array.isArray(value) ? value : []), onChange: v => {
+                        const current = new Set((Array.isArray(value) ? value : []));
+                        if (current.has(v)) {
+                            current.delete(v);
+                        }
+                        else {
+                            current.add(v);
+                        }
+                        emit({ value: Array.from(current) });
+                    }, onClear: () => emit({ value: [] }), children: placeholder })) })] }));
 }
-
-export { FilterField, NUMBER_OPERATORS };

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

@@ -16,10 +16,10 @@
     background-color var(--transition-fast) var(--ease-standard);
 }
 
-.filterField:focus-within {
+/* .filterField.active {
   border-color: var(--color-border-selected);
-  box-shadow: var(--focus-ring);
-}
+  background: var(--color-bg-selected);
+} */
 
 .filterField.sm {
   block-size: calc(var(--component-size-sm) + var(--density));
@@ -76,9 +76,21 @@
 .filterField .valueWrapper {
   display: inline-flex;
   align-items: center;
+  padding: 0;
+  height: 100%;
+}
 
-  padding-block: calc(var(--spacing-2xs) + var(--density));
-  padding-inline: var(--spacing-sm);
+.valueWrapper > * {
+  height: 100%;
+  & > * {
+    height: 100% !important;
+  }
+}
+
+.valueWrapper button {
+  height: 100% !important;
+  border: 0 !important;
+  padding-inline: var(--spacing-sm) !important;
 }
 
 .filterField input {
@@ -93,6 +105,10 @@
   block-size: 100%;
 }
 
+.filterField button {
+  border-radius: 0;
+}
+
 .filterField input::placeholder {
   color: var(--color-fg-muted);
 }

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.d.ts

@@ -0,0 +1,36 @@
+import type { JSX } from 'react';
+import React from 'react';
+interface ChipToggleOption {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+}
+interface ChipMultiToggleProps {
+    /** Optional group label (e.g. "Fejlede i") */
+    label?: string;
+    options: ChipToggleOption[];
+    selectedValues: string[];
+    onChange: (nextSelectedValues: string[]) => void;
+    onToggle?: (toggledValue: string, isSelected: boolean) => void;
+    size?: 'sm' | 'md' | 'lg';
+    selectedSeverity: 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+    unselectedSeverity?: 'neutral' | 'info' | 'success' | 'warning' | 'danger' | null;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    showAllOption?: boolean;
+    allLabel?: string;
+    allIcon?: React.ReactNode;
+    /**
+     * ✅ If true, clicking "All" toggles between:
+     * - All (no filtering) => []
+     * - None (match nothing) => [noneValue]
+     */
+    allTogglesNone?: boolean;
+    /**
+     * Sentinel stored in selectedValues to represent "none selected".
+     * Must not collide with any real option.value.
+     */
+    noneValue?: string;
+}
+export declare function ChipMultiToggle({ label, options, selectedValues, onChange, onToggle, size, selectedSeverity, unselectedSeverity, fullWidth, disabled, showAllOption, allLabel, allIcon, allTogglesNone, noneValue, }: ChipMultiToggleProps): JSX.Element;
+export {};

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Chip } from '../../../components/chip/Chip';
+import styles from './ChipMultiToggle.module.css';
+export function ChipMultiToggle({ label, options, selectedValues = [], onChange, onToggle, size = 'sm', selectedSeverity = 'info', unselectedSeverity = null, fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, allTogglesNone = false, noneValue = '__none__', }) {
+    const selectedSet = React.useMemo(() => new Set(selectedValues), [selectedValues]);
+    const isNoneSelected = allTogglesNone && selectedSet.has(noneValue);
+    const isAllSelected = showAllOption && !isNoneSelected && selectedSet.size === 0;
+    const toggleValue = (value) => {
+        if (disabled)
+            return;
+        // If we're in "none" state, selecting any option should exit none state
+        const next = new Set(selectedSet);
+        if (isNoneSelected)
+            next.delete(noneValue);
+        const willSelect = !next.has(value);
+        if (willSelect)
+            next.add(value);
+        else
+            next.delete(value);
+        const nextArr = Array.from(next);
+        onChange(nextArr);
+        onToggle === null || onToggle === void 0 ? void 0 : onToggle(value, willSelect);
+    };
+    const toggleAll = () => {
+        if (disabled)
+            return;
+        if (!allTogglesNone) {
+            // Classic "All" = clear selection
+            onChange([]);
+            return;
+        }
+        // Toggle between All <-> None
+        if (isAllSelected) {
+            onChange([noneValue]);
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(noneValue, true);
+        }
+        else if (isNoneSelected) {
+            onChange([]);
+            onToggle === null || onToggle === void 0 ? void 0 : onToggle(noneValue, false);
+        }
+        else {
+            // If some are selected, clicking All goes to All (clear)
+            onChange([]);
+        }
+    };
+    return (_jsxs("div", { className: `${styles.wrapper} ${fullWidth ? styles.fullWidth : ''}`, children: [label && _jsx("span", { className: styles.label, children: label }), _jsxs("div", { className: styles.container, children: [showAllOption && (_jsx("button", { type: "button", className: styles.chipButton, onClick: toggleAll, "aria-pressed": isAllSelected || isNoneSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isAllSelected || isNoneSelected ? selectedSeverity : unselectedSeverity), customIcon: allIcon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: isNoneSelected ? `${allLabel} (ingen)` : allLabel }) }, "__all__")), options.map(opt => {
+                        // If none-state is active, everything else should look unselected
+                        const isSelected = !isNoneSelected && selectedSet.has(opt.value);
+                        return (_jsx("button", { type: "button", className: styles.chipButton, onClick: () => toggleValue(opt.value), "aria-pressed": isSelected, disabled: disabled, children: _jsx(Chip, { size: size, severity: (isSelected ? selectedSeverity : unselectedSeverity), customIcon: opt.icon, type: unselectedSeverity === null ? 'outlined' : 'rounded', children: opt.label }) }, opt.value));
+                    })] })] }));
+}

package/dist/components/filtering/chip-multi-toggle/ChipMultiToggle.module.css

@@ -0,0 +1,60 @@
+/* ChipMultiToggle.module.css */
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  /* use theme spacing tokens */
+  gap: var(--spacing-xs);
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.label {
+  font-weight: var(--font-weight-medium);
+
+  /* theme uses --color-fg-muted / --color-fg-subtle (not --color-text-muted) */
+  color: var(--color-fg-muted);
+
+  white-space: nowrap;
+  line-height: var(--line-height-tight);
+  font-size: var(--font-size-sm);
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+
+  /* use theme spacing token */
+  gap: var(--spacing-xxs);
+}
+
+.chipButton {
+  padding: 0;
+  border: 0;
+  background: transparent;
+  cursor: pointer;
+
+  /* avoid default button styles on some browsers */
+  font: inherit;
+  color: inherit;
+}
+
+.chipButton:disabled {
+  cursor: not-allowed;
+
+  /* align with theme disabled */
+  opacity: 1;
+  color: var(--color-disabled-fg);
+}
+
+/* Focus ring should use theme focus tokens */
+.chipButton:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--border-radius-rounded);
+}

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    variant?: Variant;
+    disabled?: boolean;
+    /** Text shown next to the box (per-item label) */
+    label?: string;
+    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 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 {};

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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, }) {
+    const [internal, setInternal] = useState(false);
+    const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `checkbox-${generatedId}`;
+    const toggle = (e) => {
+        if (disabled)
+            return;
+        const value = !isChecked;
+        setInternal(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
+    };
+    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))
+        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 }));
+}

package/dist/components/{checkbox → forms/checkbox}/Checkbox.module.css

@@ -1,7 +1,6 @@
 .container {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: var(--spacing-sm);
   vertical-align: middle;
   line-height: 0;

package/dist/components/forms/checkbox-group/CheckboxGroup.d.ts

@@ -0,0 +1,47 @@
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+export interface CheckboxGroupOption {
+    label: string;
+    value: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    /** Label shown before the checkboxes (e.g. "Fejlede i:") */
+    label?: string;
+    options: CheckboxGroupOption[];
+    selectedValues: string[];
+    /**
+     * Called with the NEXT selectedValues array (so parent can just setState(next)).
+     */
+    onChange: (nextSelectedValues: string[]) => void;
+    /** Optional: called when a single value was toggled */
+    onToggle?: (toggledValue: string, isSelected: boolean) => void;
+    /** Pass-through styling */
+    variant?: Variant;
+    size?: Size;
+    /** Layout */
+    wrap?: boolean;
+    fullWidth?: boolean;
+    disabled?: boolean;
+    /**
+     * Renders a compact container row suitable for toolbars:
+     * [Label] [Checkboxes...] [Action]
+     */
+    contained?: boolean;
+    /**
+     * Right-side action that keeps the same width:
+     * - When NOT all enabled options are selected => shows "Alle" and selects all on click
+     * - When ALL enabled options are selected => shows "Ryd" and deselects all on click
+     */
+    actionLabels?: {
+        clear?: string;
+        all?: string;
+    };
+    /** Optional hook when action is clicked */
+    onActionClick?: (mode: 'clear' | 'all') => void;
+    /** Data attributes pass-through */
+    'data-cy'?: string;
+}
+export declare function CheckboxGroup({ label, options, selectedValues, onChange, onToggle, variant, size, wrap, fullWidth, disabled, contained, actionLabels, onActionClick, 'data-cy': dataCy, }: CheckboxGroupProps): JSX.Element;
+export {};