@dbcdk/react-components 0.0.5 → 0.0.6

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

@@ -0,0 +1,75 @@
+'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: size, 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 }) })] }));
+}

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

@@ -0,0 +1,115 @@
+.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-md);
+  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/{input → forms/input}/Input.d.ts

@@ -1,18 +1,22 @@
 import * as React from 'react';
-import type { Size } from '../../types/sizes.types';
+import type { Size } from '../../../types/sizes.types';
+import type { InputContainerProps } from '../input-container/InputContainer';
 export type InputVariant = 'outlined' | 'filled' | 'standalone';
-export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
-    label?: string;
+export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'width'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
     icon?: React.ReactNode;
     autoFocus?: boolean;
     minWidth?: string | number;
     width?: string | number;
-    fullWidth?: boolean;
     inputSize?: Size;
     variant?: InputVariant;
     onClear?: () => void;
     onButtonClick?: () => void;
     buttonLabel?: string;
     buttonIcon?: React.ReactNode;
-}
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+};
+/**
+ * Explicit exported type annotation is required with --isolatedDeclarations.
+ */
 export declare const Input: React.ForwardRefExoticComponent<React.PropsWithoutRef<InputProps> & React.RefAttributes<HTMLInputElement>>;

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

@@ -0,0 +1,70 @@
+'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;
+        }
+    };
+}
+/**
+ * Explicit exported type annotation is required with --isolatedDeclarations.
+ */
+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', 
+// Input-only props
+icon, autoFocus, minWidth, width, inputSize = 'md', variant = 'outlined', onClear, onButtonClick, buttonLabel, buttonIcon, 
+// Native input props
+id, style, className, ...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 rootStyle = {
+        ...(style !== null && style !== void 0 ? style : {}),
+        ...(minWidth ? { ['--input-min-width']: minWidth } : null),
+        ...(width ? { ['--input-width']: width } : null),
+    };
+    // Anchor tooltip to the stable "field" wrapper (input + icon + clear button)
+    const { triggerProps } = useTooltipTrigger({
+        content: tooltip,
+        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: [
+                styles.container,
+                fullWidth ? styles.fullWidth : '',
+                onClear ? styles.withClear : '',
+                hasButton ? styles.withButton : '',
+                className !== null && className !== void 0 ? className : '',
+            ]
+                .filter(Boolean)
+                .join(' '), children: [_jsxs("div", { className: styles.field, ...(tooltip ? triggerProps : {}), children: [icon && _jsx("span", { className: styles.icon, children: icon }), _jsx("input", { ...inputProps, id: inputId, ref: mergeRefs(inputRef, ref), className: [
+                                styles.input,
+                                icon ? styles.inputWithIcon : '',
+                                inputSize ? styles[inputSize] : '',
+                                styles[variant],
+                            ]
+                                .filter(Boolean)
+                                .join(' ') }), onClear && inputProps.value && _jsx(ClearButton, { onClick: onClear, absolute: true })] }), hasButton && (_jsxs(Button, { onClick: onButtonClick, className: styles.trailingButton, type: "button", children: [buttonIcon !== null && buttonIcon !== void 0 ? buttonIcon : null, buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : null] }))] }) }));
+});
+Input.displayName = 'Input';

package/dist/components/{input → forms/input}/Input.module.css

@@ -73,6 +73,7 @@
 .input:hover {
   border-color: var(--color-border-strong);
 }
+
 .input:focus-visible {
   outline: none;
   border-color: var(--color-border-selected);

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

@@ -0,0 +1,15 @@
+import React from 'react';
+export interface InputContainerProps {
+    label?: string;
+    htmlFor?: string;
+    error?: string;
+    helpText?: string;
+    helpTextAddition?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    children: React.ReactNode;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    labelAlignment?: 'top' | 'center';
+}
+export declare function InputContainer({ label, htmlFor, error, helpText, helpTextAddition, fullWidth, required, children, orientation, labelWidth, }: InputContainerProps): React.ReactElement;

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

@@ -0,0 +1,15 @@
+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', }) {
+    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 (_jsx("div", { 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

@@ -0,0 +1,34 @@
+.horizontal {
+  --gap: var(--spacing-sm);
+}
+
+.labelContainer {
+  gap: var(--gap);
+}
+
+.horizontal .errorText,
+.horizontal .helpText {
+  margin-left: calc(var(--label-width) + var(--gap));
+}
+
+.helpText {
+  color: var(--color-fg-subtle);
+  font-size: var(--font-size-sm);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.horizontal label {
+  width: var(--label-width);
+}
+
+.errorText {
+  color: var(--color-status-error);
+  font-size: var(--font-size-sm);
+}
+
+.required {
+  color: var(--color-status-error);
+  font-weight: bold;
+}

package/dist/components/forms/multi-select/MultiSelect.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import { ButtonVariant } from '../../../components/button/Button';
+export interface MultiselectOption<T> {
+    label: string;
+    value: T;
+    icon?: ReactNode;
+}
+interface MultiSelectProps<T> {
+    options: MultiselectOption<T>[];
+    selectedValues: T[];
+    onChange: (selectedValue: T) => void;
+    placeholder?: string;
+    children?: ReactNode;
+    variant?: ButtonVariant;
+    size?: 'sm' | 'md' | 'lg';
+    onClear?: () => void;
+    dataCy?: string;
+}
+export declare function MultiSelect<T extends string | number>({ options, selectedValues, onChange, children, variant, size, onClear, dataCy, }: MultiSelectProps<T>): ReactNode;
+export {};

package/dist/components/forms/multi-select/MultiSelect.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Square } from 'lucide-react';
+import { Button } from '../../../components/button/Button';
+import { Chip } from '../../../components/chip/Chip';
+import { ClearButton } from '../../../components/clear-button/ClearButton';
+import { Menu } from '../../../components/menu/Menu';
+import { Popover } from '../../../components/popover/Popover';
+export function MultiSelect({ options, selectedValues = [], onChange, children, variant = 'outlined', size = 'md', onClear, dataCy, }) {
+    return (_jsx(Popover, { dataCy: dataCy, trigger: (onClick, icon) => (_jsxs(Button, { variant: variant, onClick: onClick, size: size, children: [_jsxs("span", { children: [children || 'Vælg', ' ', selectedValues.length > 0 ? (_jsx(Chip, { size: "sm", severity: "info", children: `${selectedValues.length}` })) : null] }), onClear && selectedValues.length > 0 && _jsx(ClearButton, { onClick: onClear }), icon] })), children: _jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value), children: _jsxs("button", { onClick: () => {
+                        onChange(option.value);
+                    }, children: [_jsx("span", { style: {
+                                pointerEvents: 'none',
+                                display: 'flex',
+                                alignItems: 'center',
+                                color: !(selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value))
+                                    ? 'var(--color-border-strong)'
+                                    : 'inherit',
+                            }, children: (selectedValues === null || selectedValues === void 0 ? void 0 : selectedValues.includes(option.value)) ? _jsx(Check, {}) : _jsx(Square, {}) }), option.label] }) }, option.value))) }) }));
+}

package/dist/components/forms/select/Select.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonVariant } from '../../button/Button';
+import { InputContainer } from '../input-container/InputContainer';
+import { MultiselectOption } from '../multi-select/MultiSelect';
+type InputContainerProps = React.ComponentProps<typeof InputContainer>;
+export type SelectProps<T> = Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    id?: string;
+    options: MultiselectOption<T>[];
+    selectedValue: T | null;
+    onChange: (value: T) => void;
+    placeholder?: string;
+    size?: 'sm' | 'md' | 'lg';
+    variant?: ButtonVariant;
+    onClear?: () => void;
+    datakey?: string;
+    dataCy?: string;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+};
+export declare function Select<T extends string | number | Record<string, any>>({ label, error, helpText, orientation, labelWidth, fullWidth, required, tooltip, tooltipPlacement, id, options, selectedValue, onChange, placeholder, size, variant, onClear, datakey, dataCy, }: SelectProps<T>): React.ReactNode;
+export {};

package/dist/components/forms/select/Select.js

@@ -0,0 +1,94 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { useEffect, useId, useRef, useState } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import { Button } from '../../button/Button';
+import { ClearButton } from '../../clear-button/ClearButton';
+import { Menu } from '../../menu/Menu';
+import { Popover } from '../../popover/Popover';
+import { InputContainer } from '../input-container/InputContainer';
+export function Select({ 
+// InputContainer props
+label, error, helpText, orientation = 'vertical', labelWidth = '120px', fullWidth = true, required, 
+// ✅ tooltip props
+tooltip, tooltipPlacement = 'right', 
+// Select props
+id, options, selectedValue, onChange, placeholder = 'Vælg', size, variant = 'outlined', onClear, datakey, dataCy, }) {
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `select-${generatedId}`;
+    const describedById = `${controlId}-desc`;
+    const popoverRef = useRef(null);
+    const optionRefs = useRef([]);
+    const selectedIndex = options.findIndex(o => o.value === selectedValue);
+    const [activeIndex, setActiveIndex] = useState(selectedIndex >= 0 ? selectedIndex : 0);
+    useEffect(() => {
+        var _a;
+        (_a = optionRefs.current[activeIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [activeIndex]);
+    const handleKeyDown = (e) => {
+        var _a, _b;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                setActiveIndex(i => Math.min(i + 1, options.length - 1));
+                break;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setActiveIndex(i => Math.max(i - 1, 0));
+                break;
+            }
+            case 'Enter':
+            case ' ': {
+                e.preventDefault();
+                const opt = options[activeIndex];
+                if (opt) {
+                    onChange(opt.value);
+                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                }
+                break;
+            }
+            case 'Escape': {
+                e.preventDefault();
+                (_b = popoverRef.current) === null || _b === void 0 ? void 0 : _b.close();
+                break;
+            }
+        }
+    };
+    const selected = options.find(o => o.value === selectedValue);
+    // Tooltip trigger props (anchor to the Button)
+    const tooltipEnabled = Boolean(tooltip);
+    const { triggerProps, id: tooltipId } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    // If you want BOTH tooltip + error/helpText describedby:
+    // merge describedby ids (keeping existing describedById)
+    const describedBy = (() => {
+        const ids = [];
+        if (error || helpText)
+            ids.push(describedById);
+        if (tooltipEnabled)
+            ids.push(tooltipId);
+        return ids.length ? ids.join(' ') : undefined;
+    })();
+    return (_jsxs(InputContainer, { label: label, htmlFor: controlId, fullWidth: fullWidth, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, required: required, children: [_jsx(Popover, { ref: popoverRef, trigger: (onClick, icon) => (_jsx(Button
+                // IMPORTANT: keep triggerProps last for events, but let our aria-describedby win
+                // We'll spread triggerProps and then override aria-describedby to include both.
+                , { ...(tooltipEnabled ? triggerProps : {}), id: controlId, "data-cy": dataCy !== null && dataCy !== void 0 ? dataCy : 'select-button', onKeyDown: handleKeyDown, fullWidth: fullWidth, variant: variant, onClick: e => {
+                        setActiveIndex(selectedIndex >= 0 ? selectedIndex : 0);
+                        onClick(e);
+                    }, size: size, type: "button", "aria-haspopup": "listbox", "aria-invalid": Boolean(error) || undefined, "aria-describedby": describedBy, children: _jsxs("span", { className: "dbc-flex dbc-justify-between dbc-items-center dbc-gap-xxs", style: { width: '100%' }, children: [_jsx("span", { children: selected ? selected.label : placeholder }), onClear && selected && _jsx(ClearButton, { onClick: onClear }), icon] }) })), children: _jsx(Menu, { onKeyDown: handleKeyDown, role: "listbox", children: options.map((opt, index) => {
+                        const isSelected = typeof opt.value === 'object' && typeof selectedValue === 'object' && datakey
+                            ? (selectedValue === null || selectedValue === void 0 ? void 0 : selectedValue[datakey]) === opt.value[datakey]
+                            : opt.value === selectedValue;
+                        const isActive = index === activeIndex;
+                        return (_jsx(Menu.Item, { active: isActive, "aria-selected": isSelected, children: _jsxs("button", { ref: el => (optionRefs.current[index] = el), type: "button", tabIndex: isActive ? 0 : -1, onClick: () => {
+                                    var _a;
+                                    onChange(opt.value);
+                                    (_a = popoverRef.current) === null || _a === void 0 ? void 0 : _a.close();
+                                }, onFocus: () => setActiveIndex(index), style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [_jsx("span", { style: { width: 16, display: 'inline-flex', justifyContent: 'center' }, children: isSelected ? _jsx(Check, {}) : null }), opt.label] }) }, String(opt.value)));
+                    }) }) }), (error || helpText) && (_jsx("span", { id: describedById, style: { display: 'none' }, children: error !== null && error !== void 0 ? error : helpText }))] }));
+}

package/dist/components/forms/text-area/Textarea.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export type TextareaProps = Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'onChange' | 'disabled'> & Omit<InputContainerProps, 'children' | 'htmlFor' | 'tooltip' | 'tooltipPlacement'> & {
+    value: string;
+    inputChanged: (event: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    disabled?: boolean;
+    loading?: React.ReactNode;
+    rows?: number;
+    showCount?: boolean;
+    tooltip?: React.ReactNode;
+    tooltipPlacement?: 'top' | 'right' | 'bottom' | 'left';
+    showTooltip?: boolean;
+    adjustHeight?: boolean;
+    placeholder?: string;
+    id?: string;
+};
+export declare const Textarea: React.FC<TextareaProps>;

package/dist/components/forms/text-area/Textarea.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useId, useMemo } from 'react';
+import { useTooltipTrigger } from '../../../components/overlay/tooltip/useTooltipTrigger';
+import styles from './Textarea.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+export const Textarea = function Textarea({ value, inputChanged, disabled, rows = 3, showCount, tooltip, tooltipPlacement = 'right', showTooltip, placeholder, adjustHeight, id, 
+// InputContainer props
+label, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required, 
+// Native textarea props
+className, ...rest }) {
+    const generatedId = useId();
+    const textareaId = id !== null && id !== void 0 ? id : `textarea-${generatedId}`;
+    const onInput = useCallback((e) => {
+        const textarea = e.currentTarget;
+        if (adjustHeight) {
+            textarea.style.height = 'auto';
+            textarea.style.height = `${textarea.scrollHeight}px`;
+        }
+        inputChanged(e);
+    }, [inputChanged, adjustHeight]);
+    const inputField = useMemo(() => (_jsx("textarea", { ...rest, id: textareaId, className: [styles.textarea, className].filter(Boolean).join(' '), placeholder: placeholder, rows: rows, value: value, onChange: onInput, disabled: disabled, "aria-invalid": Boolean(error) || undefined })), [rest, textareaId, className, placeholder, rows, value, onInput, disabled, error]);
+    // Enable tooltip if tooltip exists, and if showTooltip is either true or undefined.
+    // (So you can deprecate showTooltip later without breaking callers.)
+    const tooltipEnabled = Boolean(tooltip) && (showTooltip !== null && showTooltip !== void 0 ? showTooltip : true);
+    const { triggerProps } = useTooltipTrigger({
+        content: tooltipEnabled ? tooltip : null,
+        placement: tooltipPlacement,
+        offset: 8,
+    });
+    return (_jsx(InputContainer, { label: label, htmlFor: textareaId, error: error, helpText: helpText, helpTextAddition: showCount ? `${value === null || value === void 0 ? void 0 : value.length} tegn i denne boks` : undefined, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: _jsx("div", { className: styles.container, children: _jsx("div", { ...(tooltipEnabled ? triggerProps : {}), children: inputField }) }) }));
+};
+Textarea.displayName = 'Textarea';

package/dist/components/forms/text-area/Textarea.module.css

@@ -0,0 +1,26 @@
+.container {
+  flex-grow: 1;
+}
+.container textarea {
+  width: 100%;
+  padding: var(--spacing-xs);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-sm);
+  font-family: var(--font-family);
+}
+
+.internalCount {
+  text-align: right;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-subtle);
+}
+
+.container textarea:hover {
+  border-color: var(--color-border-strong);
+}
+
+.container textarea:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}