@festo-ui/react 9.0.1-dev.771 → 9.0.1-dev.775

package/dist/forms/select/Select.css

@@ -1,160 +0,0 @@
-.fwe-select-wrapper {
-  width: inherit;
-  min-width: 48px;
-  display: flex;
-}
-
-.fwe-select-wrapper .fr-select-input {
-  opacity: 0;
-  pointer-events: none;
-  box-sizing: border-box;
-  width: 100%;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-}
-
-.fwe-select-wrapper.fwe-disabled:before {
-  color: var(--fwe-text-disabled);
-}
-
-.fwe-select-wrapper .fwe-select {
-  text-align: left;
-  cursor: pointer;
-  height: unset;
-  background: none;
-  min-height: 33px;
-  padding: 0;
-}
-
-.fwe-select-wrapper .fwe-select .fwe-select-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  padding-right: 24px;
-  line-height: 1.5rem;
-  overflow: hidden;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled) ~ .fwe-select-label:after {
-  content: "*";
-  display: inline-block;
-  position: relative;
-  left: 3px;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-required:not(.fwe-disabled):not(.fwe-invalid) ~ .fwe-select-valid {
-  display: block;
-}
-
-.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
-  color: var(--fwe-hero);
-}
-
-.fwe-select-wrapper .fwe-select:focus:not(:disabled) option {
-  color: var(--fwe-text);
-}
-
-.fwe-select-wrapper .fwe-select:focus:not(:disabled) {
-  border-color: var(--fwe-hero);
-}
-
-.fwe-select-wrapper .fwe-select:focus:invalid {
-  border-color: var(--fwe-red);
-}
-
-.fwe-select-wrapper .fwe-select.fwe-disabled {
-  cursor: default;
-  border-color: var(--fwe-control-disabled) !important;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-disabled ~ .fwe-select-label, .fwe-select-wrapper .fwe-select.fwe-disabled .fwe-select-content {
-  color: var(--fwe-text-disabled);
-}
-
-.fwe-select-wrapper .fwe-select.fwe-disabled .fwe-chip {
-  color: var(--fwe-text-disabled);
-  border: 1px solid var(--fwe-control-disabled);
-  pointer-events: none;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:hover, .fwe-select-wrapper .fwe-select.fwe-invalid.fwe-select:focus {
-  border-color: var(--fwe-red);
-}
-
-.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-invalid {
-  display: block;
-}
-
-.fwe-select-wrapper .fwe-select.fwe-invalid ~ .fwe-select-description {
-  display: none;
-}
-
-.fr-select-scroll {
-  overflow-y: scroll;
-}
-
-.fwe-select-options-container {
-  z-index: var(--fwe-z-index-popover);
-  max-width: 100vw;
-  font-size: var(--fwe-font-size-base);
-  background-color: var(--fwe-white);
-  border: 1px solid var(--fwe-gray-200);
-  border-radius: 4px;
-  margin: 0;
-  padding: 8px;
-  list-style: none;
-  box-shadow: 0 1px 4px #00000029;
-}
-
-.fwe-select-options-container .fwe-select-option {
-  cursor: pointer;
-  min-height: 24px;
-  padding: 12px 8px;
-  line-height: 24px;
-  position: relative;
-}
-
-.fwe-select-options-container .fwe-select-option:hover, .fwe-select-options-container .fwe-select-option:focus {
-  background-color: var(--fwe-gray-100);
-  outline: none;
-}
-
-.fwe-select-options-container .fwe-select-option:last-child {
-  border-bottom: none;
-}
-
-.fwe-select-options-container .fwe-select-option .fwe-select-option-content {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  min-height: 24px;
-  line-height: 24px;
-  display: block;
-  overflow: hidden;
-}
-
-.fr-backdrop {
-  z-index: var(--fwe-z-index-modal);
-  position: fixed;
-  inset: 0;
-}
-
-.chip-text-truncate {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  display: inline-block;
-  overflow: hidden;
-}
-
-.chip-removable {
-  cursor: pointer;
-  border: none;
-  padding: 0;
-}
-
-.fwe-chip .chip-removable svg {
-  margin: 0;
-  position: absolute;
-  top: 4px;
-  right: 5px;
-}
-

package/dist/forms/select/internal/HiddenInput.d.ts

@@ -1,8 +0,0 @@
-import type { SelectOptionType } from '../select-option/SelectOption';
-interface HiddenInputProps<T> {
-    value: any;
-    onChange: (value: SelectOptionType<T>) => void;
-    options: SelectOptionType<T>[];
-}
-export declare function HiddenInput<T>({ value, onChange, options, }: HiddenInputProps<T>): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/HiddenInput.js

@@ -1,15 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-function HiddenInput({ value, onChange, options }) {
-    function handleChange(event) {
-        const child = options.find(({ data })=>data === event.target.value);
-        if (void 0 !== child) onChange(child);
-    }
-    return /*#__PURE__*/ jsx("input", {
-        className: "fr-select-input",
-        "aria-hidden": true,
-        tabIndex: -1,
-        value: value,
-        onChange: handleChange
-    });
-}
-export { HiddenInput };

package/dist/forms/select/internal/ListItem.d.ts

@@ -1,18 +0,0 @@
-import React, { type Ref, type RefObject } from 'react';
-import type { SelectOptionProps, SelectOptionType } from '../select-option/SelectOption';
-export interface ListItemProps<T> extends React.ComponentPropsWithoutRef<'li'> {
-    empty?: boolean;
-    item: SelectOptionType<T> | React.ReactElement<SelectOptionProps<T>>;
-    options: SelectOptionType<T>[];
-    index: number;
-    onOptionChange: (option: SelectOptionType<T>) => void;
-    onFocusChange: (index: number) => void;
-    onClose: () => void;
-    selectedLabel?: string | string[];
-    withCheckbox?: boolean;
-}
-declare function ListItemComponent<T>({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }: ListItemProps<T>, ref: Ref<RefObject<HTMLLIElement>[]>): import("react/jsx-runtime").JSX.Element;
-export declare const ListItem: <T>(props: ListItemProps<T> & {
-    ref?: Ref<RefObject<HTMLLIElement>[]>;
-}) => ReturnType<typeof ListItemComponent>;
-export {};

package/dist/forms/select/internal/ListItem.js

@@ -1,69 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import react, { forwardRef } from "react";
-import { SelectCheckbox } from "./SelectCheckbox.js";
-function ListItemComponent({ children, className, empty, options, onClose, onOptionChange, index, selectedLabel, item, withCheckbox, onFocusChange, ...restProps }, ref) {
-    const isChild = /*#__PURE__*/ react.isValidElement(item);
-    const option = isChild ? item.props.option : item;
-    const propsWithoutOption = isChild ? {
-        ...item.props,
-        option: void 0
-    } : {};
-    const checked = Array.isArray(selectedLabel) ? selectedLabel.includes(option.label) : selectedLabel === option.label;
-    function handleKeyDown(e) {
-        const arrowKeys = [
-            'ArrowDown',
-            'ArrowUp'
-        ];
-        const validKeys = [
-            'Enter',
-            ' '
-        ];
-        if (arrowKeys.concat(validKeys).includes(e.key)) e.preventDefault();
-        if ('ArrowDown' === e.key) onFocusChange((index + 1) % options.length);
-        if ('ArrowUp' === e.key) {
-            const nextIndex = (index - 1 + options.length) % options.length;
-            onFocusChange(nextIndex);
-        }
-        if ([
-            'Enter',
-            ' '
-        ].includes(e.key)) {
-            if (option.disabled) return;
-            onOptionChange(option);
-        }
-        if ('Escape' === e.key) onClose();
-    }
-    function handleClick() {
-        if (option.disabled) return;
-        onOptionChange(option);
-    }
-    const itemRef = 'function' != typeof ref ? ref?.current?.[index] : void 0;
-    return /*#__PURE__*/ jsx("li", {
-        onClick: handleClick,
-        ref: itemRef,
-        role: "option",
-        onKeyDown: handleKeyDown,
-        "aria-selected": checked,
-        className: classnames('fwe-select-option', {
-            'fwe-empty': !option.label
-        }, className),
-        tabIndex: 0,
-        ...restProps,
-        children: /*#__PURE__*/ jsx(SelectCheckbox, {
-            disabled: option.disabled,
-            onClick: (e)=>e.stopPropagation(),
-            checked: checked,
-            withCheckbox: withCheckbox,
-            children: isChild ? /*#__PURE__*/ jsx("span", {
-                ...propsWithoutOption
-            }) : /*#__PURE__*/ jsx("span", {
-                className: "fwe-select-option-content",
-                "data-testid": "fwe-select-option-content",
-                children: option.label
-            })
-        })
-    });
-}
-const ListItem = /*#__PURE__*/ forwardRef(ListItemComponent);
-export { ListItem };

package/dist/forms/select/internal/SelectButton.d.ts

@@ -1,12 +0,0 @@
-interface SelectButtonProps {
-    onToggle: () => void;
-    focused?: boolean;
-    required: boolean;
-    error?: string;
-    disabled?: boolean;
-    onChipClick: (label: string) => void;
-    label?: string | string[];
-    renderLabelContent?: (label?: string | string[]) => JSX.Element;
-}
-export declare const SelectButton: (props: SelectButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
-export {};

package/dist/forms/select/internal/SelectButton.js

@@ -1,49 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-import { SelectButtonContent } from "./SelectButtonContent.js";
-const SelectButton = /*#__PURE__*/ forwardRef(({ onToggle, disabled, label, focused, required, error, onChipClick, renderLabelContent }, ref)=>{
-    const empty = void 0 === label && !focused;
-    function handleKeyDown(e) {
-        if (disabled) return;
-        const validKeys = [
-            'Enter',
-            ' ',
-            'ArrowUp',
-            'ArrowDown'
-        ];
-        if (validKeys.includes(e.key)) {
-            e.preventDefault();
-            onToggle();
-        }
-    }
-    function handleClick(e) {
-        if (disabled) return;
-        e.stopPropagation();
-        onToggle();
-    }
-    return /*#__PURE__*/ jsx("button", {
-        type: "button",
-        tabIndex: 0,
-        className: classnames('fwe-select', {
-            'fwe-focus': focused,
-            'fwe-empty': empty,
-            'fwe-required': required,
-            'fwe-disabled': disabled,
-            'fwe-invalid': error
-        }),
-        onClick: handleClick,
-        ref: ref,
-        onKeyDown: handleKeyDown,
-        disabled: disabled,
-        children: /*#__PURE__*/ jsx("div", {
-            className: "fwe-select-content",
-            children: /*#__PURE__*/ jsx(SelectButtonContent, {
-                onClick: onChipClick,
-                label: label,
-                renderLabelContent: renderLabelContent
-            })
-        })
-    });
-});
-export { SelectButton };

package/dist/forms/select/internal/SelectButtonContent.d.ts

@@ -1,7 +0,0 @@
-interface SelectButtonContentProps {
-    label?: string | string[];
-    renderLabelContent?: (label?: string | string[]) => JSX.Element;
-    onClick: (label: string) => void;
-}
-export declare function SelectButtonContent({ label, renderLabelContent, onClick, }: SelectButtonContentProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/SelectButtonContent.js

@@ -1,31 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { IconCloseSmall } from "@festo-ui/react-icons";
-function SelectButtonContent({ label, renderLabelContent, onClick }) {
-    const handleChipClick = (chipLabel)=>(e)=>{
-            e.stopPropagation();
-            onClick(chipLabel);
-        };
-    if (renderLabelContent) return renderLabelContent(label);
-    if (Array.isArray(label)) return /*#__PURE__*/ jsx("div", {
-        className: "fwe-chip-container",
-        children: label.map((v)=>/*#__PURE__*/ jsxs("div", {
-                className: "fwe-chip chip-text-truncate fwe-pr-4",
-                title: v,
-                children: [
-                    v,
-                    /*#__PURE__*/ jsx("button", {
-                        type: "button",
-                        className: "chip-removable",
-                        onClick: handleChipClick(v),
-                        children: /*#__PURE__*/ jsx(IconCloseSmall, {
-                            size: 16
-                        })
-                    })
-                ]
-            }, v))
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: label
-    });
-}
-export { SelectButtonContent };

package/dist/forms/select/internal/SelectCheckbox.d.ts

@@ -1,4 +0,0 @@
-import { type CheckboxProps } from '../../checkbox/Checkbox';
-export declare function SelectCheckbox({ children, withCheckbox, ...props }: CheckboxProps & {
-    withCheckbox?: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/forms/select/internal/SelectCheckbox.js

@@ -1,13 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { Checkbox } from "../../checkbox/Checkbox.js";
-function SelectCheckbox({ children, withCheckbox, ...props }) {
-    if (withCheckbox) return /*#__PURE__*/ jsx(Checkbox, {
-        tabIndex: -1,
-        ...props,
-        children: children
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-}
-export { SelectCheckbox };

package/dist/forms/select/internal/SelectLabel.d.ts

@@ -1,7 +0,0 @@
-interface SelectLabelProps {
-    hideLabel?: boolean;
-    label?: string;
-    id?: string;
-}
-export declare function SelectLabel({ hideLabel, label, id }: SelectLabelProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/SelectLabel.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-function SelectLabel({ hideLabel, label, id }) {
-    return /*#__PURE__*/ jsx("label", {
-        className: classnames('fwe-select-label', {
-            'fwe-sr-only': hideLabel
-        }),
-        htmlFor: id,
-        children: label || ''
-    });
-}
-export { SelectLabel };

package/dist/forms/select/internal/SelectOptionsContainer.d.ts

@@ -1,17 +0,0 @@
-import { type Key, type Ref } from 'react';
-import type { SelectConfiguration } from '../../../utils/types';
-import type { SelectOptionType } from '../select-option/SelectOption';
-interface SelectOptionsContainerProps<T> {
-    options?: SelectOptionType<T>[];
-    config?: SelectConfiguration;
-    onClose: () => void;
-    label?: string | string[];
-    onOptionChange: (option: SelectOptionType<T>) => void;
-    multiple?: boolean;
-    children: React.ReactNode;
-}
-declare function SelectOptionsContainerComponent<T extends Key | null | undefined>({ options, config, onClose, label, onOptionChange, multiple, children, }: SelectOptionsContainerProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOptionsContainer: <T>(props: SelectOptionsContainerProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectOptionsContainerComponent>;
-export {};

package/dist/forms/select/internal/SelectOptionsContainer.js

@@ -1,103 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createRef, forwardRef, isValidElement, useEffect, useRef, useState } from "react";
-import { usePopper } from "react-popper";
-import { ListItem } from "./ListItem.js";
-import { SelectScrollContainer } from "./SelectScrollContainer.js";
-import { getChildren } from "./utils.js";
-function SelectOptionsContainerComponent({ options, config, onClose, label, onOptionChange, multiple, children }, ref) {
-    const [popperElement, setPopperElement] = useState(null);
-    const refObject = 'function' != typeof ref ? ref?.current : null;
-    const { styles, attributes } = usePopper(refObject, popperElement, {
-        placement: 'bottom-start',
-        modifiers: [
-            {
-                name: 'offset',
-                options: {
-                    offset: [
-                        0,
-                        3
-                    ]
-                }
-            },
-            {
-                name: 'flip',
-                options: {
-                    fallbackPlacements: [
-                        'bottom-start',
-                        'top-start'
-                    ]
-                }
-            }
-        ]
-    });
-    function getCssProperies() {
-        if (config?.contentWidth) return {
-            ...styles.popper,
-            minWidth: `${refObject?.clientWidth}px`,
-            width: config?.contentWidth
-        };
-        return {
-            ...styles.popper,
-            minWidth: `${refObject?.clientWidth}px`
-        };
-    }
-    const allChildren = getChildren(children);
-    const childrenList = allChildren.childrenList;
-    const usedOptions = options ?? childrenList.map((child)=>child.props.option);
-    const { length } = usedOptions;
-    const listItemRef = useRef(Array.from({
-        length
-    }, ()=>/*#__PURE__*/ createRef()));
-    const selectedIndex = Array.isArray(label) ? usedOptions.findIndex((option)=>option.label === label.at(-1)) : usedOptions.findIndex((option)=>option.label === label);
-    const [init, setInit] = useState(false);
-    useEffect(()=>{
-        if (!init) requestAnimationFrame(()=>{
-            setInit(true);
-            const index = -1 === selectedIndex ? 0 : selectedIndex;
-            listItemRef.current?.[index].current?.focus();
-        });
-    }, [
-        selectedIndex,
-        init
-    ]);
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            /*#__PURE__*/ jsx("div", {
-                "aria-hidden": true,
-                className: "fr-backdrop",
-                onClick: onClose
-            }),
-            /*#__PURE__*/ jsxs("ul", {
-                ref: setPopperElement,
-                style: getCssProperies(),
-                ...attributes.popper,
-                className: "fwe-select-options-container",
-                role: "listbox",
-                children: [
-                    allChildren.before,
-                    /*#__PURE__*/ jsx(SelectScrollContainer, {
-                        length: length,
-                        config: config,
-                        children: [
-                            ...options || [],
-                            ...childrenList
-                        ].map((item, i)=>/*#__PURE__*/ jsx(ListItem, {
-                                withCheckbox: multiple,
-                                item: item,
-                                selectedLabel: label,
-                                onClose: onClose,
-                                onFocusChange: (index)=>listItemRef.current[index].current?.focus(),
-                                onOptionChange: onOptionChange,
-                                ref: listItemRef,
-                                index: i,
-                                options: usedOptions
-                            }, /*#__PURE__*/ (isValidElement(item) ? item.props.option : item).data))
-                    }),
-                    allChildren.after
-                ]
-            })
-        ]
-    });
-}
-const SelectOptionsContainer = /*#__PURE__*/ forwardRef(SelectOptionsContainerComponent);
-export { SelectOptionsContainer };

package/dist/forms/select/internal/SelectScrollContainer.d.ts

@@ -1,8 +0,0 @@
-import type { SelectConfiguration } from '../../../utils/types';
-interface SelectScrollContainerProps {
-    readonly config?: SelectConfiguration;
-    readonly children: React.ReactNode;
-    readonly length: number;
-}
-export declare function SelectScrollContainer({ config, children, length, }: SelectScrollContainerProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/forms/select/internal/SelectScrollContainer.js

@@ -1,15 +0,0 @@
-import { Fragment, jsx } from "react/jsx-runtime";
-import { calcVirtualScrollHeight } from "../utils.js";
-function SelectScrollContainer({ config, children, length }) {
-    if (config?.scroll?.enabled) return /*#__PURE__*/ jsx("div", {
-        className: "fr-select-scroll",
-        style: {
-            height: calcVirtualScrollHeight(config, length)
-        },
-        children: children
-    });
-    return /*#__PURE__*/ jsx(Fragment, {
-        children: children
-    });
-}
-export { SelectScrollContainer };

package/dist/forms/select/internal/SelectWrapper.d.ts

@@ -1,6 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-interface SelectWrapperProps extends ComponentPropsWithoutRef<'div'> {
-    disabled?: boolean;
-}
-export declare const SelectWrapper: (props: SelectWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
-export {};

package/dist/forms/select/internal/SelectWrapper.js

@@ -1,12 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef } from "react";
-const SelectWrapper = /*#__PURE__*/ forwardRef(({ children, disabled, className, ...props }, ref)=>/*#__PURE__*/ jsx("div", {
-        ...props,
-        ref: ref,
-        className: classnames('fwe-select-wrapper', {
-            'fwe-disabled': disabled
-        }, className),
-        children: children
-    }));
-export { SelectWrapper };

package/dist/forms/select/internal/index.d.ts

@@ -1,6 +0,0 @@
-export { HiddenInput } from './HiddenInput';
-export { ListItem } from './ListItem';
-export { SelectButton } from './SelectButton';
-export { SelectLabel } from './SelectLabel';
-export { SelectOptionsContainer } from './SelectOptionsContainer';
-export { SelectWrapper } from './SelectWrapper';

package/dist/forms/select/internal/index.js

@@ -1,7 +0,0 @@
-import { HiddenInput } from "./HiddenInput.js";
-import { ListItem } from "./ListItem.js";
-import { SelectButton } from "./SelectButton.js";
-import { SelectLabel } from "./SelectLabel.js";
-import { SelectOptionsContainer } from "./SelectOptionsContainer.js";
-import { SelectWrapper } from "./SelectWrapper.js";
-export { HiddenInput, ListItem, SelectButton, SelectLabel, SelectOptionsContainer, SelectWrapper };

package/dist/forms/select/internal/utils.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import type { SelectOptionProps } from '../select-option/SelectOption';
-export declare function getChildren<T>(children: React.ReactNode): {
-    childrenList: React.ReactElement<SelectOptionProps<T>, string | React.JSXElementConstructor<any>>[];
-    after: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-    before: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-};

package/dist/forms/select/internal/utils.js

@@ -1,30 +0,0 @@
-import classnames from "classnames";
-import react from "react";
-import { SelectOption } from "../select-option/SelectOption.js";
-function getChildren(children) {
-    const before = [];
-    const childrenList = [];
-    const after = [];
-    let foundFirstOption = false;
-    react.Children.forEach(children, (element)=>{
-        if (react.isValidElement(element)) if (react.isValidElement(element) && element.type === SelectOption) {
-            foundFirstOption = true;
-            const className = classnames('fwe-select-option-content', element.props.className);
-            const { props } = element;
-            childrenList.push({
-                ...element,
-                props: {
-                    ...props,
-                    className
-                }
-            });
-        } else if (foundFirstOption) after.push(element);
-        else before.push(element);
-    });
-    return {
-        childrenList,
-        after,
-        before
-    };
-}
-export { getChildren };

package/dist/forms/select/select-option/SelectOption.d.ts

@@ -1,14 +0,0 @@
-import { type ComponentPropsWithoutRef, type Ref } from 'react';
-export interface SelectOptionType<T> {
-    readonly label: string;
-    readonly data: T;
-    readonly disabled?: boolean;
-}
-export interface SelectOptionProps<T> extends ComponentPropsWithoutRef<'span'> {
-    option: SelectOptionType<T>;
-}
-declare function SelectOptionComponent<T>({ children, className, ...props }: SelectOptionProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const SelectOption: <T>(props: SelectOptionProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof SelectOptionComponent>;
-export {};