@dbcdk/react-components 0.0.96 → 0.0.97

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

@@ -1,379 +0,0 @@
-.filterField {
-  display: inline-flex;
-  align-items: stretch;
-  gap: 0;
-  position: relative;
-  z-index: 0;
-  font-size: var(--font-size-sm);
-  font-family: var(--font-family);
-  color: var(--color-fg-default);
-  border: 1px solid transparent;
-  border-radius: var(--border-radius-default);
-  overflow: visible;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
-}
-
-/* =========================
-   VARIANTS
-   ========================= */
-
-.filterField.surface {
-  background: var(--color-bg-surface);
-  border-color: var(--color-border-subtle);
-  box-shadow: var(--shadow-xs);
-  --filter-operator-bg: var(--color-bg-surface);
-}
-
-.filterField.surface:hover {
-  border-color: var(--color-border-default);
-  box-shadow: var(--shadow-sm);
-}
-
-.filterField.surface.active {
-  background: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
-  border-color: var(--color-border-selected);
-  box-shadow: var(--shadow-sm);
-  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 45%, var(--color-bg-surface));
-}
-
-.filterField.outlined {
-  background: var(--color-bg-surface);
-  border-color: var(--color-border-subtle);
-  box-shadow: none;
-  --filter-operator-bg: var(--color-bg-surface);
-}
-
-.filterField.outlined:hover {
-  border-color: var(--color-border-default);
-}
-
-.filterField.outlined.active {
-  background: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
-  border-color: var(--color-border-selected);
-  box-shadow: none;
-  --filter-operator-bg: color-mix(in srgb, var(--color-bg-selected) 38%, var(--color-bg-surface));
-}
-
-.filterField.subtle {
-  background: var(--color-bg-toolbar);
-  border-color: transparent;
-  box-shadow: inset 0 0 0 1px transparent;
-  --filter-operator-bg: color-mix(in srgb, var(--color-fg-default) 4%, var(--color-bg-toolbar));
-}
-
-.filterField.subtle:hover {
-  background: var(--color-bg-surface-strong);
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-fg-default) 6%,
-    var(--color-bg-surface-strong)
-  );
-}
-
-.filterField.subtle.active {
-  background: color-mix(in srgb, var(--color-bg-selected) 55%, var(--color-bg-surface-strong));
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px transparent;
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-bg-selected) 55%,
-    var(--color-bg-surface-strong)
-  );
-}
-
-.filterField.active .label {
-  color: var(--color-fg-default);
-}
-
-/* =========================
-   FOCUS
-   ========================= */
-
-.filterField:focus-within {
-  z-index: 1;
-}
-
-.filterField.surface:focus-within,
-.filterField.outlined:focus-within,
-.filterField.subtle:focus-within {
-  border-color: var(--color-border-selected);
-}
-
-.filterField.surface:focus-within {
-  box-shadow: var(--shadow-sm);
-}
-
-.filterField.outlined:focus-within,
-.filterField.subtle:focus-within {
-  box-shadow: none;
-}
-
-.filterField.surface.active:focus-within {
-  box-shadow: var(--shadow-sm);
-}
-
-.filterField.outlined.active:focus-within,
-.filterField.subtle.active:focus-within {
-  box-shadow: none;
-}
-
-/* =========================
-   SIZES
-   ========================= */
-
-.filterField.sm {
-  block-size: var(--component-size-sm);
-}
-
-.filterField.md {
-  block-size: var(--component-size-md);
-}
-
-.filterField.lg {
-  block-size: var(--component-size-lg);
-}
-
-/* =========================
-   LABEL
-   ========================= */
-
-.filterField .label {
-  display: inline-flex;
-  align-items: center;
-  padding-block: var(--spacing-2xs);
-  padding-inline: var(--spacing-xs);
-  padding-inline-end: var(--spacing-xxs);
-  font-size: var(--font-size-sm);
-  color: var(--color-fg-subtle);
-  white-space: nowrap;
-  user-select: none;
-}
-
-/* =========================
-   OPERATOR
-   ========================= */
-
-.filterField .operatorWrapper {
-  flex: 0 0 auto;
-  display: flex;
-  align-items: stretch;
-  min-width: 0;
-}
-
-.filterField .operatorTrigger {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--spacing-xxs);
-  height: 100%;
-  padding-block: var(--spacing-2xs);
-  padding-inline: var(--spacing-xxs);
-  color: var(--color-fg-default);
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  position: relative;
-  z-index: 0;
-  font-weight: var(--font-weight-default);
-  font-size: var(--font-size-sm);
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    color var(--transition-fast) var(--ease-standard);
-  flex: 0 0 auto;
-  white-space: nowrap;
-}
-
-.filterField .operatorTrigger::after {
-  content: '';
-  position: absolute;
-  inset: 1px 0;
-  background: var(--filter-operator-bg, transparent);
-  pointer-events: none;
-  z-index: 0;
-}
-
-.filterField .operatorTrigger > * {
-  position: relative;
-  z-index: 1;
-}
-
-.filterField .operatorTrigger:hover:not(:disabled) {
-  color: var(--color-fg-default);
-}
-
-.filterField .operatorTrigger:hover:not(:disabled)::after {
-  background: color-mix(
-    in srgb,
-    var(--color-fg-default) 8%,
-    var(--filter-operator-bg, transparent)
-  );
-}
-
-/* =========================
-   SEPARATORS
-   ========================= */
-
-.filterField .operatorTrigger::before {
-  content: '';
-  position: absolute;
-  inset-inline-start: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 1px;
-  background: var(--color-border-subtle);
-  pointer-events: none;
-}
-
-/* =========================
-   DISABLED
-   ========================= */
-
-.filterField .operatorTrigger:disabled,
-.filterField .operatorTrigger[aria-disabled='true'] {
-  cursor: not-allowed;
-  color: var(--color-disabled-fg);
-}
-
-.filterField.surface .operatorTrigger:disabled,
-.filterField.outlined .operatorTrigger:disabled {
-  --filter-operator-bg: var(--color-disabled-bg);
-}
-
-.filterField.subtle .operatorTrigger:disabled {
-  --filter-operator-bg: color-mix(
-    in srgb,
-    var(--color-fg-default) 3%,
-    var(--color-bg-surface-subtle)
-  );
-}
-
-.operatorTrigger svg {
-  height: var(--component-size-xxs);
-  width: var(--component-size-xxs);
-  flex: 0 0 auto;
-}
-
-/* =========================
-   VALUE WRAPPER
-   ========================= */
-
-.filterField .valueWrapper {
-  display: flex;
-  align-items: center;
-  padding: 0;
-  height: 100%;
-  flex: 1 1 auto;
-  min-width: 0;
-  position: relative;
-}
-
-/* Base child sizing */
-.filterField .valueWrapper > * {
-  height: 100%;
-  min-width: 0;
-}
-
-.filterField .valueWrapper > div {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  min-width: 0;
-}
-
-/* Fill mode: regular inputs should stretch */
-.filterField .valueWrapper:not(.autoWidth) > * {
-  width: 100%;
-  flex: 1 1 auto;
-}
-
-.filterField .valueWrapper:not(.autoWidth) > div {
-  width: 100%;
-  flex: 1 1 auto;
-}
-
-/* Auto-width mode: let Typeahead keep its measured width */
-.filterField .valueWrapper.autoWidth {
-  flex: 1 1 auto;
-  width: auto;
-  min-width: 0;
-}
-
-.filterField .valueWrapper.autoWidth > * {
-  width: auto;
-  flex: 1 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-
-.filterField .valueWrapper.autoWidth > div {
-  width: auto;
-  flex: 1 1 auto;
-  min-width: 0;
-  max-width: 100%;
-}
-
-/* Embedded Input internals */
-.filterField .valueWrapper .field {
-  min-height: unset;
-  height: 100%;
-  block-size: 100%;
-  box-shadow: none;
-  border: none;
-  background: transparent;
-  min-width: 0;
-  width: 100%;
-  flex: 1 1 auto;
-}
-
-/* Keep a small breathing space inside the filter row */
-.embeddedInputField {
-  min-width: 0;
-  width: 100%;
-  flex: 1 1 auto;
-}
-
-.embeddedInputElement {
-  flex: 1 1 auto;
-  inline-size: 100%;
-  width: 100%;
-  min-width: 0;
-  height: 100%;
-  block-size: 100%;
-  min-height: unset;
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  padding-block: 0;
-  padding-inline: 0;
-  margin: 0;
-  box-sizing: border-box;
-}
-
-.filterField .valueWrapper .startAdornment {
-  margin-left: 0;
-  gap: 2px;
-  min-width: 0;
-}
-
-/* =========================
-   TEXT
-   ========================= */
-
-.filterField .operatorText {
-  white-space: nowrap;
-  font-family: var(--font-family-mono);
-  font-size: var(--font-size-xs);
-}
-
-.filterField input {
-  height: 100%;
-  min-width: 0;
-}
-
-.filterField input::placeholder {
-  color: var(--color-fg-subtle);
-}

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

@@ -1,52 +0,0 @@
-'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', fullWidth = false, disabled = false, showAllOption = false, allLabel = 'Alle', allIcon, allTogglesNone = false, noneValue = '__none__', type = 'rounded', dataCy, }) {
-    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) {
-            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 : ''}`, "data-cy": dataCy, 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, { type: type, size: size, severity: "neutral", customIcon: allIcon, selected: isAllSelected || isNoneSelected, 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, customIcon: opt.icon, severity: "neutral", type: type, selected: isSelected, children: opt.label }) }, opt.value));
-                    })] })] }));
-}

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

@@ -1,59 +0,0 @@
-/* ChipMultiToggle.module.css */
-
-.wrapper {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: var(--spacing-xs);
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-.label {
-  font-weight: var(--font-weight-medium);
-  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;
-  gap: var(--spacing-xxs);
-}
-
-.chipButton {
-  padding: 0;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  font: inherit;
-  color: inherit;
-}
-
-.chipButton:disabled {
-  opacity: 1;
-  color: var(--color-disabled-fg);
-}
-
-.chipButton:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-
-.chipButton:focus-visible > * {
-  border-color: var(--color-border-selected);
-  box-shadow: inset 0 0 0 1px var(--color-border-selected);
-}
-
-.chipButton:focus-visible > .rounded {
-  border-radius: var(--border-radius-rounded);
-}
-
-.chipButton:focus-visible > .default {
-  border-radius: var(--border-radius-default);
-}

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

@@ -1,28 +0,0 @@
-'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 = 'default', disabled, label, labelAs = '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();
-    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, size === 'sm' ? styles.containerSm : '']
-            .filter(Boolean)
-            .join(' '), "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 &&
-                (labelAs === 'label' ? (_jsx("label", { className: styles.label, htmlFor: controlId, children: label })) : (_jsx("span", { className: styles.label, children: label })))] }));
-    if (noContainer)
-        return content;
-    return (_jsx(InputContainer, { modified: modified, label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, size: size, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
-}

package/dist/components/forms/checkbox/Checkbox.module.css

@@ -1,103 +0,0 @@
-.container {
-  display: inline-flex;
-  align-items: flex-start;
-  gap: var(--spacing-sm);
-  vertical-align: middle;
-  line-height: var(--line-height-normal);
-}
-
-.containerSm {
-  gap: var(--spacing-xs);
-}
-
-.checkbox {
-  width: var(--component-size-sm);
-  height: var(--component-size-sm);
-  padding: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-sm);
-  background-color: var(--color-bg-surface);
-  cursor: pointer;
-  transition:
-    background-color var(--transition-fast) var(--ease-standard),
-    border-color var(--transition-fast) var(--ease-standard),
-    box-shadow var(--transition-fast) var(--ease-standard);
-}
-
-.checkbox.sm {
-  width: var(--component-size-xs);
-  height: var(--component-size-xs);
-}
-
-.label {
-  display: block;
-  font-size: var(--font-size-sm);
-  min-width: 0;
-  flex: 1 1 auto;
-  line-height: var(--line-height-normal);
-  white-space: normal;
-  overflow-wrap: anywhere;
-  word-break: break-word;
-}
-
-.checkbox:hover {
-  border-color: var(--color-fg-default);
-}
-
-.checked {
-  background-color: var(--color-brand);
-  border-color: var(--color-brand);
-}
-
-.icon {
-  width: var(--icon-size-md);
-  height: var(--icon-size-md);
-  color: var(--color-fg-on-brand);
-  stroke-width: 2;
-  pointer-events: none;
-}
-
-.default {
-  background-color: var(--color-bg-toolbar);
-  border-color: var(--color-bg-toolbar);
-  &:not(:hover) {
-    border-color: var(--color-bg-toolbar);
-  }
-
-  .icon {
-    color: var(--color-fg-default);
-  }
-}
-
-.outlined.checked {
-  background-color: transparent;
-  border-color: var(--color-border-default);
-  &:not(:hover) {
-    border-color: var(--color-brand);
-  }
-
-  .icon {
-    color: var(--color-brand);
-  }
-}
-
-.success.checked {
-  background-color: var(--color-status-success);
-  &:not(:hover) {
-    border-color: transparent;
-  }
-}
-
-.info.checked {
-  background-color: var(--color-status-info);
-  &:not(:hover) {
-    border-color: transparent;
-  }
-
-  .icon {
-    color: var(--color-fg-on-brand);
-  }
-}

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

@@ -1,75 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo } from 'react';
-import styles from './CheckboxGroup.module.css';
-import { Checkbox } from '../checkbox/Checkbox';
-export function CheckboxGroup({ label, options, selectedValues, onChange, onToggle, variant = 'outlined', size = 'md', wrap = false, fullWidth = false, disabled = false, contained = true, actionLabels = { clear: 'Ryd', all: 'Alle' }, onActionClick, 'data-cy': dataCy, }) {
-    var _a, _b;
-    const selectedSet = useMemo(() => new Set(selectedValues), [selectedValues]);
-    const enabledValues = useMemo(() => options.filter(o => !(disabled || o.disabled)).map(o => o.value), [options, disabled]);
-    const allEnabledSelected = enabledValues.length > 0 && enabledValues.every(v => selectedSet.has(v));
-    const toggleValue = (value) => {
-        if (disabled)
-            return;
-        const next = new Set(selectedSet);
-        const willSelect = !next.has(value);
-        if (willSelect)
-            next.add(value);
-        else
-            next.delete(value);
-        onChange(Array.from(next));
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle(value, willSelect);
-    };
-    const selectAll = () => {
-        if (disabled)
-            return;
-        if (enabledValues.length === 0)
-            return;
-        onChange([...enabledValues]);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle('__select_all__', true);
-    };
-    const deselectAll = () => {
-        if (disabled)
-            return;
-        onChange([]);
-        onToggle === null || onToggle === void 0 ? void 0 : onToggle('__deselect_all__', false);
-    };
-    const handleAction = () => {
-        if (disabled)
-            return;
-        if (enabledValues.length === 0)
-            return;
-        if (allEnabledSelected) {
-            // currently all -> "Ryd" clears all
-            deselectAll();
-            onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick('clear');
-        }
-        else {
-            // not all -> "Alle" selects all
-            selectAll();
-            onActionClick === null || onActionClick === void 0 ? void 0 : onActionClick('all');
-        }
-    };
-    const wrapperClassName = [
-        styles.wrapper,
-        fullWidth ? styles.fullWidth : '',
-        contained ? styles.contained : styles.plain,
-        styles[size],
-    ]
-        .filter(Boolean)
-        .join(' ');
-    const itemsClassName = [styles.items, wrap ? styles.wrap : styles.noWrap].join(' ');
-    // Prevent UI jump by reserving width equal to the longer label.
-    const allText = (_a = actionLabels.all) !== null && _a !== void 0 ? _a : 'Alle';
-    const clearText = (_b = actionLabels.clear) !== null && _b !== void 0 ? _b : 'Ryd';
-    const actionMinWidth = `${Math.max(allText.length, clearText.length)}ch`;
-    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: "sm", onChange: () => {
-                            if (isDisabled)
-                                return;
-                            toggleValue(opt.value);
-                        }, noContainer: true }, opt.value));
-                }) }), _jsx("button", { type: "button", className: styles.actionButton, onClick: handleAction, disabled: disabled || enabledValues.length === 0, "aria-disabled": disabled || enabledValues.length === 0, children: _jsx("span", { className: styles.actionText, "data-mode": allEnabledSelected ? 'clear' : 'all', children: allEnabledSelected ? clearText : allText }) })] }));
-}