@medable/nucleus-ui 2.0.0

package/radio_group/src/lib/radio_group_option.d.ts

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+type Option<T> = {
+    value: T;
+    label: string | ReactNode;
+    dataTestId?: string;
+    description?: string;
+};
+interface ComponentProps<T = string> {
+    option: Option<T>;
+    hasError?: boolean;
+    disabled?: boolean;
+}
+export declare const RadioGroupOption: <T>({ disabled, hasError, option }: ComponentProps<T>) => import("react/jsx-runtime").JSX.Element;
+export {};

package/radio_group/src/lib/radio_group_option.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Description, Label, Radio } from '@headlessui/react';
+import classNames from 'classnames';
+export const RadioGroupOption = ({ disabled, hasError, option }) => {
+    const classes = {
+        label: classNames('nucleus-block nucleus-text-sm nucleus-leading-tight nucleus-font-medium', {
+            'nucleus-text-text-error': hasError,
+            'nucleus-text-text-disabled': disabled,
+            'nucleus-text-text-primary': !disabled && !hasError,
+        }),
+        component: {
+            option: classNames('nucleus-relative nucleus-flex nucleus-cursor-pointer focus:nucleus-outline-none nucleus-p-0 nucleus-gap-2 nucleus-group', { 'nucleus-pointer-events-none': disabled }),
+        },
+        description: 'nucleus-text-sm nucleus-leading-tight nucleus-text-text-secondary nucleus-flex-none nucleus-grow-0 nucleus-mt-1',
+    };
+    return (_jsx(Radio, { "aria-label": typeof option.label === 'string' ? option.label : '', "data-testid": option.dataTestId, value: option.value, disabled: disabled, className: classes.component.option, children: ({ focus, checked }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: classNames('nucleus-h-4 nucleus-w-4 nucleus-mt-[0.15625rem] nucleus-min-w-4 nucleus-cursor-pointer nucleus-rounded-full nucleus-border nucleus-flex nucleus-items-center nucleus-justify-center', 'group-hover:nucleus-border-[3px] nucleus-border-solid nucleus-box-border', {
+                        'nucleus-ring-2 nucleus-ring-offset-2 nucleus-ring-primary-500': focus,
+                        'nucleus-bg-neutral-400 nucleus-border-transparent': checked && disabled,
+                        'nucleus-bg-primary-500 nucleus-border-transparent': checked && !disabled,
+                        'nucleus-bg-white nucleus-border-neutral-450': !checked && !disabled,
+                        'nucleus-border-neutral-400 nucleus-bg-neutral-200': disabled,
+                        'nucleus-border-red-500': hasError,
+                    }), "aria-hidden": 'true', children: _jsx("span", { className: classNames('nucleus-rounded-full nucleus-w-1.5 nucleus-h-1.5', {
+                            'nucleus-bg-neutral-200': disabled,
+                            'nucleus-bg-white': !disabled,
+                        }) }) }), _jsxs("div", { className: 'nucleus-flex nucleus-flex-col nucleus-font-sans', children: [_jsx(Label, { as: 'span', className: classes.label, children: option.label }), option.description && (_jsx(Description, { as: 'span', className: classes.description, children: option.description }))] })] })) }));
+};
+//# sourceMappingURL=radio_group_option.js.map

package/search_field/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/search_field';

package/search_field/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/search_field';
+//# sourceMappingURL=index.js.map

package/search_field/src/lib/search_field.d.ts

@@ -0,0 +1,46 @@
+import React from 'react';
+type SearchFieldSizes = 'sm' | 'base' | 'lg' | 'full';
+export interface SearchFieldProps {
+    /**
+     * This sets the aria-label accessibility attribute for the search field.
+     */
+    ariaLabel: string;
+    autoComplete?: '' | 'off' | 'on';
+    /**
+     * This sets the data-testid attribute on the search field component. This is useful for test frameworks like Jest or Cypress.
+     */
+    dataTestId?: string;
+    /**
+     * Controls whether the search field is disabled or not. Disabled fields do not react to any change, focus or hover events. The accessibility property `aria-disabled` will also be set to this value.
+     */
+    disabled?: boolean;
+    /**
+     * Sets placeholder of the search field.
+     */
+    placeholder?: string;
+    /**
+     * Sets the size of the search field.
+     */
+    width?: SearchFieldSizes;
+    /**
+     * Sets the value of the search field.
+     */
+    value?: string;
+    /**
+     * The function to call when the input is changed.
+     */
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    /**
+     * The function to call when the search field is cleared.
+     */
+    onClear: () => void;
+    /**
+     * The function to call when the user initiates the search (enter key).
+     */
+    onSearch?: (val?: string) => void;
+}
+/**
+ * The search field component is used for filtering data, primarily from a table, by using a search string.
+ */
+export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;
+export {};

package/search_field/src/lib/search_field.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { Icon } from '../../../icon/src';
+import { Input } from '../../../input/src';
+/**
+ * The search field component is used for filtering data, primarily from a table, by using a search string.
+ */
+export const SearchField = forwardRef(function SearchField({ ariaLabel, autoComplete, dataTestId, disabled = false, width = 'base', value, onClear, onSearch, onChange, placeholder, }, ref) {
+    const onKeyDown = (e) => {
+        if (e.key === 'Enter') {
+            onSearch === null || onSearch === void 0 ? void 0 : onSearch(value);
+        }
+    };
+    return (_jsx(Input, { ref: ref, id: 'search', label: '', autoComplete: autoComplete, disabled: disabled, value: value, onKeyDown: onKeyDown, placeholder: placeholder, width: width, startAdornment: _jsx(Icon, { name: 'search' }), endAdornment: value && (_jsx("button", { className: 'nucleus-pointer-events-auto nucleus-flex nucleus-aspect-square nucleus-w-7 nucleus-items-center nucleus-justify-center nucleus-border-none nucleus-bg-transparent nucleus-m-0 nucleus-rounded-full nucleus-p-0 hover:nucleus-cursor-pointer hover:nucleus-bg-neutral-200 focus:nucleus-border-solid focus:nucleus-outline-none focus:nucleus-border-2 focus:nucleus-border-primary-500', "aria-label": 'Clear', onClick: onClear, children: _jsx(Icon, { name: 'close' }) })), "aria-label": ariaLabel, onChange: onChange, dataTestId: dataTestId }));
+});
+//# sourceMappingURL=search_field.js.map

package/segmented_control/src/index.d.ts

@@ -0,0 +1 @@
+export * from './lib/segmented_control.component';

package/segmented_control/src/index.js

@@ -0,0 +1,2 @@
+export * from './lib/segmented_control.component';
+//# sourceMappingURL=index.js.map

package/segmented_control/src/lib/segmented_control.component.d.ts

@@ -0,0 +1,31 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlItem {
+    id: string;
+    hidden?: boolean;
+    label: ReactNode;
+    className?: string;
+}
+export interface SegmentedControlProps {
+    /**
+     * Different items to be shown in the Segmented Control
+     */
+    items: SegmentedControlItem[];
+    /**
+     * Index of the initial active item
+     */
+    initialItemIndex?: number;
+    /**
+     * Index of the active item
+     */
+    activeItemIndex?: number;
+    /**
+     * Callback function to be called when an item is clicked
+     * @param index
+     */
+    onItemClick: (item: SegmentedControlItem, index: number) => void;
+    className?: string;
+}
+/**
+ * Segmented control is a linear set of two or more segments, each of which functions as a button.
+ */
+export declare const SegmentedControl: ({ items, initialItemIndex, activeItemIndex, onItemClick, className, }: SegmentedControlProps) => import("react/jsx-runtime").JSX.Element;

package/segmented_control/src/lib/segmented_control.component.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Tab, TabGroup, TabList } from '@headlessui/react';
+import { extendTailwindMerge } from 'tailwind-merge';
+const twMerge = extendTailwindMerge({
+    prefix: 'nucleus-',
+});
+/**
+ * Segmented control is a linear set of two or more segments, each of which functions as a button.
+ */
+export const SegmentedControl = ({ items, initialItemIndex = 0, activeItemIndex, onItemClick, className, }) => {
+    const handleOnChange = (index) => {
+        onItemClick(items[index], index);
+    };
+    return (_jsx(TabGroup, { defaultIndex: initialItemIndex, selectedIndex: activeItemIndex, onChange: handleOnChange, as: 'div', className: 'nucleus-inline-flex nucleus-box-border', children: _jsx(TabList, { className: twMerge('nucleus-box-border nucleus-flex nucleus-flex-shrink-0 nucleus-overflow-x-auto nucleus-overflow-y-hidden nucleus-whitespace-nowrap nucleus-border-solid nucleus-p-1 nucleus-rounded-lg nucleus-border-0 nucleus-bg-neutral-100 nucleus-gap-1', className), children: items.map((tab) => {
+                return (_jsx(Tab, { hidden: tab.hidden, disabled: tab.hidden, className: twMerge(`
+                  nucleus-font-sans nucleus-box-border nucleus-border-none nucleus-bg-transparent nucleus-text-text-secondary nucleus-font-medium nucleus-text-xs nucleus-cursor-pointer
+                  nucleus-normal-case nucleus-outline-0 nucleus-border-2 nucleus-border-transparent nucleus-border-x-0 nucleus-outline-none nucleus-px-3 nucleus-py-2 nucleus-rounded-lg
+                  [&[data-headlessui-state~="selected"]]:nucleus-border-b-2 [&[data-headlessui-state~="selected"]]:nucleus-bg-white [&[data-headlessui-state~="selected"]]:nucleus-shadow-sm [&[data-headlessui-state~="selected"]]:focus-visible:nucleus-bg-white 
+                  [&[data-headlessui-state~="selected"]]:focus-visible:nucleus-border-2 [&[data-headlessui-state~="selected"]]:nucleus-text-text-primary hover:nucleus-bg-white focus-visible:nucleus-border-primary-500 
+                  ${tab.className}
+                `), children: tab.label }, `${tab.label}-label`));
+            }) }) }));
+};
+//# sourceMappingURL=segmented_control.component.js.map

package/select/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/select.component';
+export * from './lib/select.types';

package/select/src/index.js

@@ -0,0 +1,3 @@
+export * from './lib/select.component';
+export * from './lib/select.types';
+//# sourceMappingURL=index.js.map

package/select/src/lib/select.component.d.ts

@@ -0,0 +1,6 @@
+import { SelectOption, SelectProps } from './select.types';
+/**
+ * Select allows a user to select an item from a prefilled list of items.
+ * @remarks accessibility best practices for listbox: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+ */
+export declare const Select: <T extends SelectOption = SelectOption>({ dataTestId, value, onChange, options, multiple, width, description, errorMessage, label, selectionLabel, hasError, required, hideRequiredIndicator, disabled, position, displayTooltip, displayTooltipOnlyOnOverflow, tooltipDelay, placeholder, showMultipleSelectionBadges, searchableOptions, searchPlaceholder, searchableOptionsNoItemsText, onLoadMore, onSearchOptions, ...selectProps }: SelectProps<T>) => import("react/jsx-runtime").JSX.Element;

package/select/src/lib/select.component.js

@@ -0,0 +1,165 @@
+import { __awaiter, __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
+import { Label, Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react';
+import classNames from 'classnames';
+import { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Badge } from '../../../badge/src';
+import { Checkbox } from '../../../checkbox/src';
+import { isRtl, LocaleContext, useLocalizeMessage } from '../../../i18n/src';
+import { Icon } from '../../../icon/src';
+import { SearchField } from '../../../search_field/src';
+import { Spinner } from '../../../spinner/src';
+import { Tooltip } from '../../../tooltip/src';
+import { Text } from '../../../typography/src';
+const PLACEMENT_MAP_LTR = {
+    bottom: 'bottom-start',
+    top: 'top-start',
+};
+const PLACEMENT_MAP_RTL = {
+    bottom: 'bottom-end',
+    top: 'top-end',
+};
+// Distance in pixels from bottom of scroll container to trigger loading more items
+const SCROLL_LOAD_THRESHOLD = 50;
+const classes = {
+    size: {
+        xs: 'nucleus-w-input-xs',
+        sm: 'nucleus-w-input-sm',
+        base: 'nucleus-w-input-base',
+        lg: 'nucleus-w-input-lg',
+        full: 'nucleus-w-input-full',
+    },
+    label: 'nucleus-font-medium nucleus-text-sm nucleus-text-text-primary nucleus-flex-none nucleus-order-none nucleus-grow-0 nucleus-block',
+    required: 'nucleus-w-1.5 nucleus-h-5 nucleus-font-medium nucleus-text-sm nucleus-text-red-500 nucleus-flex-none nucleus-order-1 nucleus-grow-0 nucleus-pl-px',
+    component: {
+        common: 'nucleus-border-box nucleus-cursor-pointer nucleus-h-10 nucleus-relative nucleus-border-solid nucleus-border nucleus-w-full nucleus-cursor-default nucleus-rounded-md nucleus-py-2 sm:nucleus-text-sm nucleus-border focus-visible:nucleus-ring-1 focus:nucleus-outline-none focus:nucleus-ring-1 nucleus-text-start nucleus-pl-3 nucleus-pr-2 nucleus-flex nucleus-justify-between nucleus-items-center',
+        commonColors: 'nucleus-border-neutral-300 nucleus-bg-white nucleus-text-text-primary focus-visible:nucleus-bg-neutral-50 focus-visible:nucleus-text-text-primary focus:nucleus-ring-primary-500 focus:nucleus-border-primary-500 focus-visible:nucleus-ring-primary-500 hover:nucleus-bg-neutral-50 hover:nucleus-text-text-primary hover:nucleus-border-neutral-500',
+        disabled: '!nucleus-bg-neutral-200 nucleus-border-neutral-200 nucleus-text-text-disabled nucleus-pointer-events-none nucleus-border-0',
+        error: 'nucleus-bg-white nucleus-border-red-500 nucleus-text-text-error hover:nucleus-border-red-500 focus:nucleus-ring-red-500 focus:nucleus-border-red-500 focus-visible:nucleus-ring-red-500',
+    },
+    description: 'nucleus-font-medium nucleus-text-xs nucleus-text-text-secondary nucleus-flex-none nucleus-grow-0 nucleus-mb-2 nucleus-mt-0 nucleus-p-0',
+    error: 'nucleus-font-medium nucleus-text-xs nucleus-text-text-error nucleus-order-1 nucleus-grow nucleus-m-0',
+    errorContainer: 'nucleus-mt-2 nucleus-flex nucleus-items-center nucleus-gap-2 nucleus-font-sans',
+};
+/**
+ * Select allows a user to select an item from a prefilled list of items.
+ * @remarks accessibility best practices for listbox: https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
+ */
+export const Select = (_a) => {
+    var { dataTestId, value, onChange, options, multiple, width = 'base', description, errorMessage, label, selectionLabel, hasError, required, hideRequiredIndicator, disabled, position = 'bottom', displayTooltip = false, displayTooltipOnlyOnOverflow = true, tooltipDelay = 500, placeholder, showMultipleSelectionBadges, searchableOptions, searchPlaceholder, searchableOptionsNoItemsText, onLoadMore, onSearchOptions } = _a, selectProps = __rest(_a, ["dataTestId", "value", "onChange", "options", "multiple", "width", "description", "errorMessage", "label", "selectionLabel", "hasError", "required", "hideRequiredIndicator", "disabled", "position", "displayTooltip", "displayTooltipOnlyOnOverflow", "tooltipDelay", "placeholder", "showMultipleSelectionBadges", "searchableOptions", "searchPlaceholder", "searchableOptionsNoItemsText", "onLoadMore", "onSearchOptions"]);
+    const translate = useLocalizeMessage();
+    const [searchTerm, setSearchTerm] = useState('');
+    const [isLoadingMore, setIsLoadingMore] = useState(false);
+    const prevOpen = useRef(false);
+    const searchInputRef = useRef(null);
+    const { refs, floatingStyles, elements } = useFloating({
+        placement: isRtl(useContext(LocaleContext)) ? PLACEMENT_MAP_RTL[position] : PLACEMENT_MAP_LTR[position],
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(4), flip({ crossAxis: false })],
+    });
+    const filteredOptions = useMemo(() => {
+        if (onSearchOptions) {
+            return options;
+        }
+        if (!searchableOptions || !searchTerm.trim()) {
+            return options;
+        }
+        return options.filter((option) => option.label.toLowerCase().includes(searchTerm.toLowerCase()));
+    }, [options, searchTerm, searchableOptions, onSearchOptions]);
+    const selectionLabelValue = useMemo(() => {
+        if (!multiple) {
+            return (value === null || value === void 0 ? void 0 : value.label) || placeholder;
+        }
+        if (selectionLabel) {
+            return selectionLabel;
+        }
+        return value.length > 0 ? translate('Select an option ({ count })', { count: value.length }) : placeholder;
+    }, [selectionLabel, value, multiple, placeholder]);
+    const onCheckboxChange = useCallback((checked, selectedValue) => {
+        if (multiple) {
+            const newValues = checked ? [...value, selectedValue] : value.filter((v) => v.value !== selectedValue.value);
+            onChange(newValues);
+        }
+    }, [value, multiple, onChange]);
+    const removeBadge = useCallback((optionToRemove) => {
+        if (multiple) {
+            const newValues = value.filter((v) => v.value !== optionToRemove.value);
+            onChange(newValues);
+        }
+    }, [value, multiple, onChange]);
+    const handleSearchChange = useCallback((e) => {
+        setSearchTerm(e.target.value);
+    }, []);
+    const handleSearchClear = useCallback(() => {
+        setSearchTerm('');
+        onSearchOptions === null || onSearchOptions === void 0 ? void 0 : onSearchOptions('');
+    }, [onSearchOptions]);
+    useEffect(() => {
+        if (elements.floating) {
+            elements.floating.scrollTop = 1; // Trigger the scrollbar to appear
+            elements.floating.scrollTop = 0; // Reset to original position
+        }
+    }, [elements]);
+    const handleScroll = useCallback((event) => __awaiter(void 0, void 0, void 0, function* () {
+        if (!onLoadMore || isLoadingMore) {
+            return;
+        }
+        const container = event.currentTarget;
+        const { scrollHeight, scrollTop, clientHeight } = container;
+        if (scrollHeight - scrollTop <= clientHeight + SCROLL_LOAD_THRESHOLD) {
+            setIsLoadingMore(true);
+            yield onLoadMore();
+            setIsLoadingMore(false);
+        }
+    }), [onLoadMore, isLoadingMore]);
+    return (_jsxs("div", { className: `${classes.size[width]} nucleus-inline-block`, children: [_jsx(Listbox, Object.assign({ multiple: multiple, value: value, onChange: onChange, by: 'value', as: 'div', className: 'nucleus-relative nucleus-font-sans', disabled: disabled, "aria-label": label, "aria-required": required, "data-testid": dataTestId }, selectProps, { children: ({ open }) => {
+                    var _a;
+                    if (!prevOpen.current && open) {
+                        setSearchTerm('');
+                        onSearchOptions === null || onSearchOptions === void 0 ? void 0 : onSearchOptions('');
+                        if (searchableOptions) {
+                            setTimeout(() => {
+                                var _a;
+                                (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                            }, 0);
+                        }
+                    }
+                    prevOpen.current = open;
+                    return (_jsxs(_Fragment, { children: [label && (_jsxs(Label, { className: classNames(classes.label, classes.size[width], !description && 'nucleus-mb-2'), children: [label, required && !hideRequiredIndicator && _jsx("span", { className: classes.required, children: "*" })] })), description && _jsx("p", { className: classNames(classes.description, classes.size[width]), children: description }), _jsxs(ListboxButton, { className: classNames(classes.component.common, {
+                                    [classes.component.disabled]: disabled,
+                                    [classes.component.error]: hasError,
+                                    [classes.component.commonColors]: !disabled && !hasError && !open,
+                                    'nucleus-bg-primary-75 nucleus-text-text-primary nucleus-border-0': open,
+                                }), ref: refs.setReference, "aria-disabled": !!disabled, children: [displayTooltip ? (_jsx(Tooltip, { title: selectionLabelValue, wrapperClassName: 'nucleus-truncate nucleus-text-sm nucleus-inline', as: 'span', delayShow: tooltipDelay, displayOnlyOnOverflow: displayTooltipOnlyOnOverflow, children: selectionLabelValue })) : (_jsx("span", { className: 'nucleus-truncate', children: selectionLabelValue })), _jsxs("div", { className: 'nucleus-ml-auto', children: [open && _jsx(Icon, { name: 'chevronUp', color: 'grayDark', size: 'sm' }), !open && _jsx(Icon, { name: 'chevronDown', color: 'gray', size: 'sm' })] })] }), createPortal(_jsxs(ListboxOptions, { className: 'nucleus-absolute nucleus-z-50 nucleus-max-h-60 nucleus-list-none nucleus-overflow-auto nucleus-bg-white nucleus-font-sans nucleus-text-base nucleus-shadow-xl nucleus-m-0 nucleus-mt-1 nucleus-rounded-md nucleus-p-0 nucleus-pb-1 focus:nucleus-outline-none sm:nucleus-text-sm', ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), { width: (_a = elements.reference) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().width }), onScroll: handleScroll, onKeyDownCapture: (e) => {
+                                    if (e.target.id === 'search') {
+                                        if (e.key === 'Enter' && onSearchOptions) {
+                                            onSearchOptions(e.target.value);
+                                        }
+                                        e.stopPropagation();
+                                    }
+                                }, children: [searchableOptions && (_jsx("div", { className: 'nucleus-p-2', children: _jsx(SearchField, { ref: searchInputRef, ariaLabel: translate('Search options'), placeholder: searchPlaceholder || translate('Search options...'), value: searchTerm, onChange: handleSearchChange, onClear: handleSearchClear, onSearch: onSearchOptions ? (val) => onSearchOptions(val || '') : () => { }, dataTestId: `${dataTestId}-search-options`, width: 'full' }) })), filteredOptions.map((option) => {
+                                        if (option.hidden) {
+                                            return null;
+                                        }
+                                        return (_jsx(ListboxOption, { value: option, "data-label": option.label, "data-value": option.value, disabled: option.isDisabled, className: ({ selected }) => classNames('nucleus-py-2 nucleus-pl-3 nucleus-pr-10 nucleus-cursor-pointer', {
+                                                'nucleus-text-text-disabled': option.isDisabled,
+                                                'nucleus-pointer-events-none': option.isDisabled && !option.disabledTooltip,
+                                                'nucleus-cursor-default': option.isDisabled && option.disabledTooltip,
+                                                'nucleus-bg-primary-500 nucleus-text-white': !option.isDisabled && !multiple && selected,
+                                                'ui-active:nucleus-bg-neutral-200 ui-active:nucleus-text-black ui-not-active:nucleus-bg-white ui-not-active:nucleus-text-black': !option.isDisabled && (!selected || multiple),
+                                            }), children: ({ selected }) => {
+                                                const content = multiple ? (_jsxs("div", { className: 'nucleus-flex nucleus-items-center nucleus-gap-3', children: [_jsx(Checkbox, { checked: selected, onChange: (checked) => onCheckboxChange(checked, option), label: `Checkbox select option ${option.label}`, hideLabel: true, disabled: option.isDisabled }), _jsx(Text, { size: 'sm', children: option.label })] })) : (_jsx(Text, { size: 'sm', children: option.label }));
+                                                return option.isDisabled && option.disabledTooltip ? (_jsx(Tooltip, { title: option.disabledTooltip, children: _jsx("div", { className: `${classes.size[width]} nucleus-text-start`, children: content }) })) : (content);
+                                            } }, option.value));
+                                    }), filteredOptions.length === 0 && (_jsx("div", { className: 'nucleus-py-2 nucleus-px-3 nucleus-pointer-events-none', children: _jsx(Text, { size: 'sm', className: 'nucleus-text-text-secondary', children: searchableOptionsNoItemsText || translate('No options found') }) })), onLoadMore && isLoadingMore && (_jsx("div", { className: 'nucleus-py-3 nucleus-flex nucleus-justify-center', children: _jsx(Spinner, { size: 'sm' }) }))] }), document.body)] }));
+                } })), hasError && errorMessage && (_jsxs("div", { className: classNames(classes.size[width], classes.errorContainer), children: [_jsx("span", { children: _jsx(Icon, { name: 'error', color: 'red', size: 'sm' }) }), _jsx("p", { className: classes.error, role: 'alert', children: errorMessage })] })), multiple && showMultipleSelectionBadges && value && value.length > 0 && (_jsx("div", { className: classNames(classes.size[width], 'nucleus-mt-2 nucleus-flex nucleus-flex-wrap nucleus-gap-2'), children: value.map((selectedOption) => (_jsx(Badge, { variant: 'common', label: selectedOption.label, endIcon: {
+                        name: 'close',
+                        size: 'sm',
+                        onClick: () => {
+                            removeBadge(selectedOption);
+                        },
+                    } }, selectedOption.value))) }))] }));
+};
+//# sourceMappingURL=select.component.js.map

package/select/src/lib/select.types.d.ts

@@ -0,0 +1,143 @@
+export type SelectOption<T = Record<string, unknown>> = {
+    isDisabled?: boolean;
+    label: string;
+    value: string;
+    /**
+     * Determines if the option is hidden from the user.
+     */
+    hidden?: boolean;
+    /**
+     * Any additional data that is required for the user to understand this option.
+     */
+    meta?: T;
+    /**
+     * Tooltip for the option. If the option is disabled, the tooltip will be shown when the user hovers over the option.
+     */
+    disabledTooltip?: string;
+};
+export type SelectProps<T extends SelectOption = SelectOption> = {
+    /**
+     * This sets the data-testid attribute on the select component. This is useful for test frameworks like Jest or
+     * Cypress.
+     */
+    dataTestId?: string;
+    /**
+     * Options that the user can select from.
+     */
+    options: T[];
+    /**
+     * Sets the size of the select.
+     */
+    width?: 'xs' | 'sm' | 'base' | 'lg' | 'full';
+    /**
+     * Placeholder text to show when no value is selected
+     */
+    placeholder?: string;
+    /**
+     * Indicates that this field is required to be filled out by the user. The accessibility property `aria-required`
+     * will also be set to this value.
+     */
+    required?: boolean;
+    /**
+     * If true, hides the required indicator on the label.
+     */
+    hideRequiredIndicator?: boolean;
+    /**
+     * Controls whether the select is disabled or not. Disabled selects do not react to any change, focus or hover
+     * events. The accessibility property `aria-disabled` will also be set to this value.
+     */
+    disabled?: boolean;
+    /**
+     * Any supporting text that is required for the user to understand this field.
+     */
+    description?: string;
+    /**
+     * Any error message for this field.
+     */
+    errorMessage?: string;
+    /**
+     * A boolean to indicate whether the select field has error.
+     */
+    hasError?: boolean;
+    /**
+     * The text label for this component. The accessibility property `aria-label` will also be set to this value.
+     */
+    label?: string;
+    /**
+     * The position where the Select options will be rendered. The default value is `bottom`, meaning the options will appear below the component.
+     */
+    position?: 'bottom' | 'top';
+    /**
+     * Whether to display a tooltip for the selected option when hovered over.
+     */
+    displayTooltip?: boolean;
+    /**
+     * The delay in milliseconds before the tooltip is shown.
+     */
+    tooltipDelay?: number;
+    /**
+     * Whether to display the tooltip only when the reference element is overflowing.
+     */
+    displayTooltipOnlyOnOverflow?: boolean;
+    /**
+     * Whether to show selected values as badges underneath the dropdown when multiple selection is enabled. Default is true.
+     */
+    showMultipleSelectionBadges?: boolean;
+    /**
+     * Whether to show a search input field in the dropdown to filter options. Default is false.
+     */
+    searchableOptions?: boolean;
+    /**
+     * Custom placeholder text for the search input field when `searchableOptions` is enabled.
+     */
+    searchPlaceholder?: string;
+    /**
+     * The text to show when no options are found. Default is 'No options found'.
+     */
+    searchableOptionsNoItemsText?: string;
+    /**
+     * Async function to load more options when the user scrolls to the bottom of the dropdown.
+     * Enables infinite scroll functionality.
+     */
+    onLoadMore?: () => Promise<void>;
+    /**
+     * Callback fired when the search input value changes. When provided, the component
+     * skips client-side filtering and delegates search entirely to the parent.
+     * Use this for server-side search where the parent fetches and passes filtered options.
+     */
+    onSearchOptions?: (searchTerm: string) => void;
+} & SingleOrMultipleProps<T>;
+type SingleOrMultipleProps<T extends SelectOption = SelectOption> = {
+    /**
+     * Allows the user to select multiple options.
+     */
+    multiple?: false;
+    /**
+     * function to be called when the value of the select changes.
+     */
+    onChange: (value: T) => void;
+    /**
+     * The selected option.
+     */
+    value?: T;
+    selectionLabel?: never;
+} | {
+    /**
+     * Allows the user to select multiple options.
+     */
+    multiple: true;
+    /**
+     * function to be called when the value of the select changes.
+     */
+    onChange: (value: T[]) => void;
+    /**
+     * The selected option. Should be an array.
+     */
+    value: T[];
+    /**
+     * Label of the select button that expands/collapses the options. This is used mainly for the multiple select
+     * variant. For single select, the selected value will be shown.
+     */
+    selectionLabel?: string;
+};
+export {};

package/select/src/lib/select.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=select.types.js.map

package/side_nav/src/index.d.ts

@@ -0,0 +1,2 @@
+export * from './lib/side_nav.component';
+export * from './lib/side_nav.types';

package/side_nav/src/index.js

@@ -0,0 +1,3 @@
+export * from './lib/side_nav.component';
+export * from './lib/side_nav.types';
+//# sourceMappingURL=index.js.map

package/side_nav/src/lib/side_nav.component.d.ts

@@ -0,0 +1,2 @@
+import { SideNavProps } from './side_nav.types';
+export declare const SideNav: ({ LinkComponent, activeLinkPath, collapsable, items, onLinkClick, studyCard, }: SideNavProps) => import("react/jsx-runtime").JSX.Element;