@dbcdk/react-components 0.0.4 → 0.0.6

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;
@@ -14,9 +13,9 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  border: var(--border-width-thin) solid var(--color-border-strong);
+  border: var(--border-width-thin) solid var(--color-border-default);
   border-radius: var(--border-radius-sm);
-  background-color: var(--color-surface);
+  background-color: var(--color-bg-surface);
   cursor: pointer;
   transition:
     background-color var(--transition-fast) var(--ease-standard),
@@ -35,19 +34,19 @@
 }
 
 .checkbox:hover {
-  border-color: var(--color-text);
+  border-color: var(--color-fg-default);
 }
 
 .checked {
-  background-color: var(--color-primary);
-  border-color: var(--color-primary);
+  background-color: var(--color-brand);
+  border-color: var(--color-brand);
 }
 
 .icon {
-  width: var(--icon-size);
-  height: var(--icon-size);
-  color: var(--color-text-on-primary);
-  stroke-width: 3;
+  width: var(--icon-size-md);
+  height: var(--icon-size-md);
+  color: var(--color-fg-on-brand);
+  stroke-width: 2;
   pointer-events: none;
 }
 
@@ -58,6 +57,6 @@
   }
 
   .icon {
-    color: var(--color-text);
+    color: var(--color-fg-default);
   }
 }

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 {};

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/forms/input/Input.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import type { Size } from '../../../types/sizes.types';
+import type { InputContainerProps } from '../input-container/InputContainer';
+export type InputVariant = 'outlined' | 'filled' | 'standalone';
+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;
+    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/forms/input/Input.module.css

@@ -0,0 +1,160 @@
+/* Root control group */
+.container {
+  /* inline-flex makes width behave weird in parents */
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+
+  /* width control */
+  inline-size: var(--input-width, auto);
+  min-inline-size: var(--input-min-width, 0);
+  max-inline-size: var(--input-max-width, none);
+}
+
+/* When you want it to take available space */
+.fullWidth {
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+}
+
+/* The "field" (input + icons + clear) */
+.field {
+  position: relative;
+  display: flex;
+  align-items: center;
+  flex: 1 1 auto;
+  min-inline-size: 0; /* critical for ellipsis inside flex */
+  color: var(--color-fg-default);
+}
+
+/* Actual input */
+.input {
+  flex: 1 1 auto;
+  min-inline-size: 0; /* critical */
+  inline-size: 100%;
+
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  box-sizing: border-box;
+  text-overflow: ellipsis;
+
+  background-color: var(--color-bg-surface);
+  border: var(--border-width-thin) solid var(--color-border-default);
+  border-radius: var(--border-radius-default);
+
+  padding-inline: var(--control-padding-x);
+  padding-block: calc(var(--control-padding-y) + var(--density));
+
+  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);
+}
+
+/* Button group styling */
+.withButton .input {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Optional: if ClearButton is absolutely positioned, reserve space */
+.withClear .input {
+  padding-inline-end: calc(var(--control-padding-x) + 28px);
+}
+
+/* Placeholder */
+.input::placeholder {
+  color: var(--color-fg-muted);
+}
+
+/* Hover & focus */
+.input:hover {
+  border-color: var(--color-border-strong);
+}
+
+.input:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}
+
+/* Variants */
+.filled {
+  background-color: var(--color-bg-surface);
+  border: 0;
+}
+.standalone {
+  border-radius: var(--border-radius-rounded);
+  background-color: var(--color-bg-surface);
+  box-shadow: var(--shadow-xs), var(--shadow-md);
+}
+.standalone:focus-visible {
+  outline: none;
+  border-color: var(--color-border-selected);
+  box-shadow: var(--focus-ring);
+}
+.outlined {
+  background-color: transparent;
+}
+
+/* Sizes */
+.xs {
+  block-size: calc(var(--component-size-xs) + var(--density));
+  font-size: var(--font-size-sm);
+  padding: 0 var(--spacing-xxs);
+}
+.sm {
+  block-size: calc(var(--component-size-sm) + var(--density));
+  font-size: var(--font-size-sm);
+}
+.md {
+  block-size: calc(var(--component-size-md) + var(--density));
+  font-size: var(--font-size-sm);
+}
+.lg {
+  block-size: calc(var(--component-size-lg) + var(--density));
+  font-size: var(--font-size-lg);
+}
+
+/* Leading icon */
+.inputWithIcon {
+  padding-inline-start: calc(var(--icon-size-md) + var(--spacing-lg));
+}
+
+.icon {
+  position: absolute;
+  inset-inline-start: var(--spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+  pointer-events: none;
+  color: var(--color-fg-subtle);
+}
+.icon svg {
+  inline-size: var(--icon-size-md);
+  block-size: var(--icon-size-md);
+}
+
+/* Trailing action button (outside field) */
+.trailingButton {
+  flex: 0 0 auto;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  border-left: var(--border-width-thin) solid transparent;
+  margin-left: calc(-1 * var(--border-width-thin));
+}
+.trailingButton:hover {
+  border-color: var(--color-border-default);
+  z-index: 2;
+}
+
+/* Date/time picker indicator (WebKit) */
+.input[type='datetime-local']::-webkit-calendar-picker-indicator {
+  filter: invert(0.7);
+}

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 {};