@dbcdk/react-components 0.0.96 → 0.0.97

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

@@ -1,115 +0,0 @@
-.wrapper {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex-direction: row; /* keep on one line */
-}
-
-.fullWidth {
-  width: 100%;
-}
-
-/* Heights aligned with other controls */
-.xs {
-  min-height: var(--component-size-xs);
-}
-
-.sm {
-  min-height: var(--component-size-sm);
-}
-
-.md {
-  min-height: var(--component-size-md);
-}
-
-.lg {
-  min-height: var(--component-size-lg);
-}
-
-/* Subtle container (lightweight) */
-.contained {
-  padding: 0 var(--spacing-xs);
-  border: var(--border-width-thin) solid var(--color-border-subtle);
-  border-radius: var(--border-radius-default);
-  background: var(--color-bg-surface);
-}
-
-.plain {
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.groupLabel {
-  font-weight: var(--font-weight-medium);
-  color: var(--color-fg-muted);
-  white-space: nowrap;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-}
-
-.items {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-xs);
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.wrap {
-  flex-wrap: wrap;
-}
-
-.noWrap {
-  flex-wrap: nowrap;
-}
-
-/* Right action */
-.actionButton {
-  appearance: none;
-  border: none;
-  background: transparent;
-  padding: 0;
-  margin-left: auto;
-  cursor: pointer;
-
-  display: inline-flex;
-  align-items: center;
-
-  height: 100%;
-}
-
-.actionButton:disabled {
-  cursor: not-allowed;
-}
-
-.actionText {
-  display: inline-block;
-  font-size: var(--font-size-sm);
-  line-height: var(--line-height-tight);
-  font-weight: var(--font-weight-medium);
-  white-space: nowrap;
-  text-align: right;
-
-  min-width: var(--checkboxgroup-action-min-width, 4ch);
-  color: var(--color-link);
-}
-
-.actionText[data-mode='all'] {
-  color: var(--color-link);
-}
-
-.actionText[data-mode='clear'] {
-  color: var(--color-link);
-}
-
-.actionButton:not(:disabled):hover .actionText {
-  color: var(--color-link-hover);
-  text-decoration: underline;
-}
-
-.actionButton:focus-visible {
-  outline: 2px solid var(--color-border-strong);
-  outline-offset: 3px;
-  border-radius: var(--border-radius-rounded);
-}

package/dist/components/forms/form-select/FormSelect.js

@@ -1,86 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ChevronDown, X } from 'lucide-react';
-import * as React from 'react';
-import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
-import styles from './FormSelect.module.css';
-import { InputContainer } from '../input-container/InputContainer';
-function isEqualValue(a, b, datakey) {
-    if (a === b)
-        return true;
-    if (!a || !b)
-        return false;
-    if (typeof a === 'object' && typeof b === 'object' && datakey) {
-        return a[datakey] === b[datakey];
-    }
-    return false;
-}
-function serializeValue(value, datakey) {
-    if (typeof value === 'string' || typeof value === 'number')
-        return String(value);
-    if (datakey && value && typeof value === 'object') {
-        const v = value[datakey];
-        return v == null ? '' : String(v);
-    }
-    throw new Error('FormSelect: option value is an object but no `datakey` was provided. Native select requires string/number values.');
-}
-function findSelectedOption(options, selectedValue, datakey) {
-    return options.find(o => isEqualValue(o.value, selectedValue, datakey));
-}
-export function FormSelect({ 
-// InputContainer props
-label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = true, required, tooltip, tooltipPlacement = 'right', modified = false, 
-// FormSelect props
-id, name, options, selectedValue, onChange, placeholder = 'Vælg', size = 'md', variant = 'outlined', onClear, datakey, dataCy, disabled, includePlaceholderOption = true, allowClearWhenRequired = false, }) {
-    const generatedId = React.useId();
-    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
-    const describedById = `${controlId}-desc`;
-    const selected = React.useMemo(() => findSelectedOption(options, selectedValue, datakey), [options, selectedValue, datakey]);
-    const tooltipEnabled = Boolean(tooltip);
-    const { triggerProps, id: tooltipId } = useTooltipTrigger({
-        content: tooltipEnabled ? tooltip : null,
-        placement: tooltipPlacement,
-        offset: 8,
-    });
-    const describedBy = (() => {
-        const ids = [];
-        if (error || helpText)
-            ids.push(describedById);
-        if (tooltipEnabled)
-            ids.push(tooltipId);
-        return ids.length ? ids.join(' ') : undefined;
-    })();
-    const nativeValue = React.useMemo(() => {
-        if (selected && selected.value != null)
-            return serializeValue(selected.value, datakey);
-        return '';
-    }, [selected, datakey]);
-    const canClear = Boolean(onClear) && !disabled && (allowClearWhenRequired || !required);
-    const showClear = canClear && Boolean(selected);
-    const placeholderDisabled = Boolean(required) && !allowClearWhenRequired;
-    const handleNativeChange = e => {
-        const raw = e.target.value;
-        if (raw === '') {
-            // Clear only if consumer provided onClear
-            onClear === null || onClear === void 0 ? void 0 : onClear();
-            return;
-        }
-        const opt = options.find(o => serializeValue(o.value, datakey) === raw);
-        if (opt)
-            onChange(opt.value);
-    };
-    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, modified: modified, children: [_jsxs("div", { className: [
-                    styles.container,
-                    fullWidth ? styles.fullWidth : '',
-                    canClear ? styles.withButton : '',
-                ]
-                    .filter(Boolean)
-                    .join(' '), children: [_jsxs("div", { className: styles.field, children: [_jsxs("select", { ...(tooltipEnabled ? triggerProps : {}), id: controlId, name: name, className: [styles.input, styles[size], styles[variant]].filter(Boolean).join(' '), value: nativeValue, onChange: handleNativeChange, disabled: disabled, "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'formselect', "data-forminput": true, children: [includePlaceholderOption && (_jsx("option", { value: "", disabled: placeholderDisabled, children: placeholder })), options.map(opt => {
-                                        const v = serializeValue(opt.value, datakey);
-                                        return (_jsx("option", { value: v, children: opt.label }, v));
-                                    })] }), _jsx("span", { className: styles.chevron, "aria-hidden": "true", children: _jsx(ChevronDown, { size: 20 }) })] }), canClear && (_jsx("button", { type: "button", className: styles.trailingButton, onClick: e => {
-                            e.preventDefault();
-                            e.stopPropagation();
-                            onClear === null || onClear === void 0 ? void 0 : onClear();
-                        }, "aria-label": "Ryd valg", disabled: !showClear, "data-cy": dataCy ? `${dataCy}-clear` : 'formselect-clear', children: _jsx(X, { size: 18, "aria-hidden": "true" }) }))] }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
-}

package/dist/components/forms/form-select/FormSelect.module.css

@@ -1,236 +0,0 @@
-/* FormSelect.module.css */
-
-/* =========================================
-   Root container (select + optional clear)
-   ========================================= */
-
-.container {
-  display: inline-flex;
-  align-items: stretch;
-  flex-grow: 1;
-  gap: 0;
-
-  inline-size: var(--input-width, auto);
-  min-inline-size: var(--input-min-width, 0);
-  max-inline-size: var(--input-max-width, none);
-
-  position: relative;
-  border-radius: var(--border-radius-default);
-}
-
-/* Full width variant */
-.fullWidth {
-  display: flex;
-  inline-size: 100%;
-  min-inline-size: 0;
-}
-
-/* =========================================
-   Focus ring (GROUP LEVEL)
-   ========================================= */
-
-.container:focus-within {
-  box-shadow: 0 0 0 2px var(--color-border-selected);
-  z-index: 1;
-}
-
-/* IMPORTANT:
-   When focused, do NOT also turn the select's border blue,
-   otherwise you get the vertical seam line next to the button. */
-.container:focus-within .input {
-  border-color: var(--color-border-default);
-}
-.container:focus-within .trailingButton {
-  border-color: var(--color-border-default);
-}
-
-/* =========================================
-   Field wrapper (native select + chevron)
-   ========================================= */
-
-.field {
-  position: relative;
-  display: flex;
-  align-items: center;
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  color: var(--color-fg-default);
-}
-
-/* =========================================
-   Native select styling
-   ========================================= */
-
-.input {
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-
-  flex: 1 1 auto;
-  min-inline-size: 0;
-  inline-size: 100%;
-  max-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;
-
-  border: var(--border-width-thin) solid var(--color-border-default);
-  border-radius: var(--border-radius-default);
-
-  padding-inline: var(--spacing-sm);
-  padding-block: var(--spacing-xs);
-
-  /* Reserve space for chevron */
-  padding-inline-end: calc(var(--spacing-lg) + 28px);
-
-  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);
-}
-
-/* Disabled select */
-.input:disabled {
-  background-color: var(--color-disabled-bg);
-  color: var(--color-disabled-fg);
-  cursor: not-allowed;
-}
-
-/* Hover state */
-.input:hover:not(:disabled) {
-  border-color: var(--color-border-strong);
-}
-
-/* Remove default focus ring (we use group-level ring) */
-.input:focus-visible {
-  outline: none;
-  /* DO NOT set border-color here */
-}
-
-/* =========================================
-   Variants
-   ========================================= */
-
-.filled {
-  background-color: var(--color-bg-surface);
-}
-
-.standalone {
-  border-radius: var(--border-radius-rounded);
-  background-color: var(--color-bg-surface);
-  box-shadow: var(--shadow-xs), var(--shadow-md);
-}
-
-.outlined {
-  background-color: transparent;
-}
-
-/* =========================================
-   Sizes
-   ========================================= */
-
-.sm {
-  block-size: var(--component-size-sm);
-  font-size: var(--font-size-sm);
-}
-
-.md {
-  block-size: var(--component-size-md);
-  font-size: var(--font-size-sm);
-}
-
-.lg {
-  block-size: var(--component-size-lg);
-  font-size: var(--font-size-lg);
-}
-
-/* =========================================
-   Chevron (decorative only)
-   ========================================= */
-
-.chevron {
-  position: absolute;
-  inset-inline-end: var(--spacing-sm);
-  top: 50%;
-  transform: translateY(-50%);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-  color: var(--color-fg-subtle);
-}
-
-.chevron svg {
-  inline-size: 20px;
-  block-size: 20px;
-}
-
-/* =========================================
-   Clear button integration
-   ========================================= */
-
-/* Remove right radius from select when button exists */
-.withButton .input {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-
-  /* Prevent double border seam; the button provides the right side */
-  border-right-color: transparent;
-}
-
-/* Trailing clear button */
-.trailingButton {
-  position: relative;
-  z-index: 2;
-  flex: 0 0 auto;
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-
-  padding-inline: var(--spacing-sm);
-
-  border: var(--border-width-thin) solid var(--color-border-default);
-
-  /* Seam join: don't draw left border; select covers it */
-  border-left-color: transparent;
-  margin-left: calc(-1 * var(--border-width-thin));
-
-  border-top-right-radius: var(--border-radius-default);
-  border-bottom-right-radius: var(--border-radius-default);
-
-  background: 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);
-}
-
-/* Hover state */
-.trailingButton:hover:not(:disabled) {
-  border-color: var(--color-border-strong);
-  background-color: var(--color-bg-surface-hover, var(--color-bg-surface));
-}
-
-/* Remove individual focus ring (group handles it) */
-.trailingButton:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-
-/* Disabled clear button:
-   keep border/background stable; dim only icon */
-.trailingButton:disabled {
-  cursor: default;
-  background: var(--color-bg-surface);
-}
-
-.trailingButton:disabled svg {
-  opacity: 0.4;
-}

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

@@ -1,77 +0,0 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useId, useRef } from 'react';
-import { Button } from '../../../components/button/Button';
-import { ClearButton } from '../../../components/clear-button/ClearButton';
-import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
-import styles from '../input/Input.module.css';
-import { InputContainer } from '../input-container/InputContainer';
-function mergeRefs(...refs) {
-    return (node) => {
-        for (const ref of refs) {
-            if (!ref)
-                continue;
-            if (typeof ref === 'function')
-                ref(node);
-            else
-                ref.current = node;
-        }
-    };
-}
-export const Input = forwardRef(function Input({ label, error, helpText, orientation = 'vertical', labelWidth = '160px', fullWidth = false, required, tooltip, tooltipPlacement = 'right', modified = false, icon, autoFocus, minWidth, width, maxWidth, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonDisabled = false, buttonLabel, buttonIcon, trailingLabel, id, tooltipOpenOnFocus = true, style, className, fieldClassName, inputClassName, startAdornment, endAdornment, ...inputProps }, ref) {
-    const inputRef = useRef(null);
-    const reactId = useId();
-    const inputId = id !== null && id !== void 0 ? id : `input-${reactId}`;
-    useEffect(() => {
-        var _a;
-        if (autoFocus)
-            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-    }, [autoFocus]);
-    const hasButton = Boolean(onButtonClick || buttonLabel || buttonIcon);
-    const hasTrailingLabel = Boolean(trailingLabel);
-    const hasValue = Boolean(inputProps.value);
-    const hasVisibleClear = Boolean(onClear && hasValue);
-    const hasEndAdornment = Boolean(endAdornment);
-    const reservesInlineClearSlot = Boolean(onClear);
-    const hasInlineClear = Boolean(hasVisibleClear && hasEndAdornment);
-    const rootStyle = {
-        ...(style !== null && style !== void 0 ? style : {}),
-        ...(minWidth ? { ['--input-min-width']: minWidth } : null),
-        ...(width ? { ['--input-width']: width } : null),
-        ...(maxWidth ? { ['--input-max-width']: maxWidth } : null),
-    };
-    const { triggerProps } = useTooltipTrigger({
-        content: tooltip,
-        placement: tooltipPlacement,
-        offset: 8,
-        delayOpenMs: 0,
-        focusOpenMode: tooltipOpenOnFocus ? 'any' : 'focus-visible',
-        closeOnPointerDown: false,
-    });
-    const trailingButtonVariant = variant === 'outlined' || variant === 'standalone' ? 'outlined' : 'default';
-    return (_jsx(InputContainer, { label: label, labelAction: inputProps.labelAction, 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 : '',
-                hasInlineClear ? styles.withInlineClear : '',
-                hasButton ? styles.withButton : '',
-                hasTrailingLabel ? styles.withTrailingLabel : '',
-                className !== null && className !== void 0 ? className : '',
-            ]
-                .filter(Boolean)
-                .join(' '), children: [_jsxs("div", { className: [
-                        styles.field,
-                        styles[variant],
-                        icon ? styles.fieldWithIcon : '',
-                        inputSize ? styles[inputSize] : '',
-                        modified ? styles.modified : '',
-                        fieldClassName !== null && fieldClassName !== void 0 ? fieldClassName : '',
-                    ]
-                        .filter(Boolean)
-                        .join(' '), "data-forminput": "field", "data-modified": modified ? 'true' : undefined, "aria-disabled": inputProps.disabled ? 'true' : undefined, ...(tooltip ? triggerProps : {}), children: [icon && (_jsx("span", { className: styles.icon, "data-input-role": "icon", children: icon })), startAdornment && (_jsx("span", { className: styles.startAdornment, "data-input-role": "start-adornment", children: startAdornment })), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [styles.input, inputSize ? styles[inputSize] : '', inputClassName !== null && inputClassName !== void 0 ? inputClassName : '']
-                                .filter(Boolean)
-                                .join(' ') }), (reservesInlineClearSlot || hasEndAdornment) && (_jsxs("span", { className: styles.endAdornment, "data-input-role": "end-adornment", children: [reservesInlineClearSlot ? (_jsx("span", { className: styles.clearSlot, "aria-hidden": hasVisibleClear ? undefined : 'true', children: hasVisibleClear && onClear ? _jsx(ClearButton, { onClick: onClear }) : null })) : null, endAdornment] })), hasVisibleClear && !hasEndAdornment && onClear ? (_jsx(ClearButton, { onClick: onClear, absolute: true })) : null] }), hasTrailingLabel && (_jsx("span", { className: [styles.trailingLabel, inputSize ? styles[inputSize] : '']
-                        .filter(Boolean)
-                        .join(' '), children: trailingLabel })), hasButton && (_jsxs(Button, { onClick: onButtonClick, disabled: buttonDisabled, className: styles.trailingButton, type: "button", variant: trailingButtonVariant, size: inputSize, children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
-});
-Input.displayName = 'Input';