@dbcdk/react-components 0.0.5 → 0.0.7

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

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

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { JSX } from 'react';
+type Variant = 'default' | 'primary' | 'outlined';
+type Size = 'sm' | 'md' | 'lg';
+interface CheckboxProps {
+    checked?: boolean;
+    onChange?: (checked: boolean, event: React.MouseEvent<HTMLButtonElement>) => void;
+    variant?: Variant;
+    disabled?: boolean;
+    /** Text shown next to the box (per-item label) */
+    label?: string;
+    size?: Size;
+    containerLabel?: string;
+    error?: string;
+    helpText?: string;
+    orientation?: 'vertical' | 'horizontal';
+    labelWidth?: string;
+    fullWidth?: boolean;
+    required?: boolean;
+    /**
+     * If true, do NOT wrap with InputContainer.
+     * Use this inside CheckboxGroup (so you don't get group-form layout per item).
+     */
+    noContainer?: boolean;
+    /** Optional id for accessibility (label htmlFor) */
+    id?: string;
+    /** Data attributes pass-through */
+    'data-cy'?: string;
+}
+export declare function Checkbox({ checked: controlled, onChange, variant, disabled, label, size, containerLabel, error, helpText, orientation, labelWidth, fullWidth, required, noContainer, id, 'data-cy': dataCy, }: CheckboxProps): JSX.Element;
+export {};

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

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from 'lucide-react';
+import { useId, useState } from 'react';
+import styles from './Checkbox.module.css';
+import { InputContainer } from '../input-container/InputContainer';
+export function Checkbox({ checked: controlled, onChange, variant = 'outlined', disabled, label, size = 'md', containerLabel, error, helpText, orientation = 'horizontal', labelWidth = '120px', fullWidth = false, required = false, noContainer = false, id, 'data-cy': dataCy, }) {
+    const [internal, setInternal] = useState(false);
+    const isChecked = controlled !== null && controlled !== void 0 ? controlled : internal;
+    const generatedId = useId();
+    const controlId = id !== null && id !== void 0 ? id : `checkbox-${generatedId}`;
+    const toggle = (e) => {
+        if (disabled)
+            return;
+        const value = !isChecked;
+        setInternal(value);
+        onChange === null || onChange === void 0 ? void 0 : onChange(value, e);
+    };
+    const content = (_jsxs("span", { className: styles.container, "data-cy": dataCy, children: [_jsx("button", { id: controlId, disabled: disabled, type: "button", role: "checkbox", "aria-checked": isChecked, "aria-disabled": disabled || undefined, "aria-invalid": Boolean(error) || undefined, onClick: toggle, className: [styles.checkbox, isChecked ? styles.checked : '', styles[variant], styles[size]]
+                    .filter(Boolean)
+                    .join(' '), children: isChecked && _jsx(Check, { className: styles.icon }) }), label && (_jsx("label", { className: styles.label, htmlFor: controlId, children: label }))] }));
+    // For CheckboxGroup use-case
+    if (noContainer || (!containerLabel && !error))
+        return content;
+    // Standalone form field use-case
+    return (_jsx(InputContainer, { label: containerLabel, htmlFor: controlId, error: error, helpText: helpText, orientation: orientation, labelWidth: labelWidth, fullWidth: fullWidth, required: required, children: content }));
+}

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

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

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

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

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