@festo-ui/react 9.0.1-dev.781 → 9.0.1-dev.783

package/dist/forms/combobox/ComboBox.js

@@ -1,175 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import "./ComboBox.css";
-import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
-import classnames from "classnames";
-import { forwardRef, useMemo, useState } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-function getHighlightedLabel(label, query) {
-    if (!query) return [
-        {
-            text: label,
-            highlighted: false
-        }
-    ];
-    const parts = [];
-    const lowerLabel = label.toLowerCase();
-    const lowerQuery = query.toLowerCase();
-    let currentIndex = 0;
-    while(currentIndex < label.length){
-        const matchIndex = lowerLabel.indexOf(lowerQuery, currentIndex);
-        if (-1 === matchIndex) {
-            parts.push({
-                text: label.slice(currentIndex),
-                highlighted: false
-            });
-            break;
-        }
-        if (matchIndex > currentIndex) parts.push({
-            text: label.slice(currentIndex, matchIndex),
-            highlighted: false
-        });
-        parts.push({
-            text: label.slice(matchIndex, matchIndex + query.length),
-            highlighted: true
-        });
-        currentIndex = matchIndex + query.length;
-    }
-    return parts;
-}
-function ComboBoxComponent({ defaultValue = '', value: controlled, label, options = [], onChange, required = false, disabled, name, id: idProp, hint, error, placeholder, onInputChange, emptyMessage = 'No results found', className, ...props }, ref) {
-    const id = useId(idProp);
-    const [value, setValue] = useControlled({
-        controlled,
-        default: defaultValue,
-        onChange
-    });
-    const [query, setQuery] = useState('');
-    const selectedOption = useMemo(()=>options.find((option)=>option.data === value && !option.disabled), [
-        options,
-        value
-    ]);
-    const filteredOptions = useMemo(()=>{
-        if (!query) return options;
-        const normalizedQuery = query.toLowerCase();
-        return options.filter((option)=>option.label.toLowerCase().includes(normalizedQuery));
-    }, [
-        options,
-        query
-    ]);
-    function handleChange(option) {
-        if (!option || option.disabled) return;
-        setValue(option.data);
-        setQuery('');
-    }
-    function handleInputChange(inputValue) {
-        setQuery(inputValue);
-        onInputChange?.(inputValue);
-    }
-    const inputClasses = classnames('fr-combobox-input', {
-        'fr-required': required,
-        'fr-disabled': disabled,
-        'fr-invalid': error,
-        'fr-empty': !query && !selectedOption
-    });
-    return /*#__PURE__*/ jsx(Combobox, {
-        value: selectedOption ?? null,
-        onChange: handleChange,
-        disabled: disabled,
-        immediate: true,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: classnames(className, 'fr-combobox-wrapper', {
-                'fr-disabled': disabled,
-                'fr-invalid': error,
-                'fr-required': required
-            }),
-            ref: ref,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx("label", {
-                    className: "fr-combobox-label",
-                    htmlFor: id,
-                    children: label || ''
-                }),
-                /*#__PURE__*/ jsxs("div", {
-                    className: "fr-combobox-control",
-                    children: [
-                        /*#__PURE__*/ jsx(ComboboxInput, {
-                            className: inputClasses,
-                            id: id,
-                            required: required,
-                            disabled: disabled,
-                            placeholder: placeholder,
-                            autoComplete: "off",
-                            displayValue: (option)=>option?.label ?? '',
-                            onChange: (event)=>handleInputChange(event.target.value)
-                        }),
-                        /*#__PURE__*/ jsx(ComboboxButton, {
-                            className: "fr-combobox-button",
-                            disabled: disabled,
-                            "aria-label": "Optionen anzeigen"
-                        })
-                    ]
-                }),
-                name && /*#__PURE__*/ jsx("input", {
-                    type: "hidden",
-                    name: name,
-                    value: String(value ?? ''),
-                    disabled: disabled
-                }),
-                /*#__PURE__*/ jsxs(ComboboxOptions, {
-                    className: "fwe-options-container",
-                    as: "ul",
-                    portal: false,
-                    style: {
-                        minWidth: 'var(--input-width)'
-                    },
-                    anchor: {
-                        to: 'bottom start',
-                        gap: 12,
-                        padding: 8
-                    },
-                    children: [
-                        0 === filteredOptions.length && /*#__PURE__*/ jsx("li", {
-                            className: "fwe-combobox-option fwe-combobox-empty",
-                            children: /*#__PURE__*/ jsx("span", {
-                                className: "fwe-combobox-option-content",
-                                children: emptyMessage
-                            })
-                        }),
-                        filteredOptions.map((option)=>/*#__PURE__*/ jsx(ComboboxOption, {
-                                value: option,
-                                disabled: option.disabled,
-                                as: "li",
-                                className: ({ focus, selected, disabled: isDisabled })=>classnames('fwe-combobox-option', {
-                                        'fwe-selected': selected,
-                                        'fwe-focus': focus,
-                                        'fwe-disabled': isDisabled
-                                    }),
-                                children: /*#__PURE__*/ jsx("span", {
-                                    className: "fwe-combobox-option-content",
-                                    "data-testid": "fwe-combobox-option-content",
-                                    children: getHighlightedLabel(option.label, query).map((part, index)=>/*#__PURE__*/ jsx("span", {
-                                            className: classnames({
-                                                'fwe-combobox-highlight': part.highlighted
-                                            }),
-                                            children: part.text
-                                        }, `${part.text}-${index}`))
-                                })
-                            }, String(option.data)))
-                    ]
-                }),
-                hint && !error && /*#__PURE__*/ jsx("div", {
-                    className: "fr-combobox-description",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("div", {
-                    className: "fr-combobox-invalid",
-                    children: error
-                })
-            ]
-        })
-    });
-}
-const ComboBox = /*#__PURE__*/ forwardRef(ComboBoxComponent);
-export { ComboBox };

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

@@ -1,20 +0,0 @@
-import type { Ref } from 'react';
-import type { ComponentBase } from '../../utils/types';
-import type { SelectOption } from '../select/Select';
-export interface MultiSelectProps<T> extends ComponentBase {
-    readonly defaultValue?: T[];
-    readonly value?: T[];
-    readonly label?: string;
-    readonly options?: SelectOption<T>[];
-    readonly onChange?: (value: T[]) => void;
-    readonly disabled?: boolean;
-    readonly name?: string;
-    readonly hint?: string;
-    readonly error?: string;
-    readonly placeholder?: string;
-}
-declare function MultiSelectComponent<T>({ defaultValue, value: controlled, label, options, onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }: MultiSelectProps<T>, ref: Ref<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-export declare const MultiSelect: <T>(props: MultiSelectProps<T> & {
-    ref?: Ref<HTMLDivElement>;
-}) => ReturnType<typeof MultiSelectComponent>;
-export {};

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

@@ -1,191 +0,0 @@
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from "@headlessui/react";
-import classnames from "classnames";
-import { forwardRef, useCallback, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-import MultiSelect_module from "./MultiSelect.module.js";
-function MultiSelectComponent({ defaultValue = [], value: controlled, label, options = [], onChange, disabled, name, id: idProp, hint, error, placeholder, className, ...props }, ref) {
-    const id = useId(idProp);
-    const labelId = `${id}-label`;
-    const [value, setValue] = useControlled({
-        controlled,
-        default: defaultValue,
-        onChange
-    });
-    const selectedOptions = useMemo(()=>options.filter((option)=>!option.disabled && (value ?? []).includes(option.data)), [
-        options,
-        value
-    ]);
-    function handleChange(nextOptions) {
-        setValue(nextOptions.map((option)=>option.data));
-    }
-    const chipsRef = useRef(null);
-    const [overflowCount, setOverflowCount] = useState(0);
-    const measureOverflow = useCallback((optionCount)=>{
-        const container = chipsRef.current;
-        if (!container) return void setOverflowCount(0);
-        const allChildren = Array.from(container.children);
-        const optionChildren = allChildren.filter((child)=>'true' === child.dataset.optionChip);
-        for (const child of optionChildren)child.style.display = '';
-        const containerRect = container.getBoundingClientRect();
-        const isOverflow = optionChildren.some((child)=>{
-            const childRect = child.getBoundingClientRect();
-            return childRect.right > containerRect.right;
-        });
-        if (isOverflow && optionCount > 1) {
-            let remainingWidth = containerRect.width - 64;
-            let count = 0;
-            for (const child of optionChildren){
-                const width = child.getBoundingClientRect().width + 8;
-                if (width <= remainingWidth) {
-                    remainingWidth -= width;
-                    child.style.display = '';
-                } else {
-                    count++;
-                    child.style.display = 'none';
-                }
-            }
-            setOverflowCount(count);
-        } else setOverflowCount(0);
-    }, []);
-    useLayoutEffect(()=>{
-        measureOverflow(selectedOptions.length);
-        const container = chipsRef.current;
-        if (!container) return;
-        const observer = new ResizeObserver(()=>{
-            measureOverflow(selectedOptions.length);
-        });
-        observer.observe(container);
-        return ()=>observer.disconnect();
-    }, [
-        selectedOptions,
-        measureOverflow
-    ]);
-    return /*#__PURE__*/ jsx(Listbox, {
-        value: selectedOptions,
-        onChange: handleChange,
-        disabled: disabled,
-        multiple: true,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: classnames(className, 'fwe-select-wrapper', {
-                'fwe-disabled': disabled
-            }),
-            ref: ref,
-            ...props,
-            children: [
-                /*#__PURE__*/ jsx(ListboxButton, {
-                    className: classnames('fwe-select', {
-                        'fwe-invalid': error
-                    }),
-                    id: id,
-                    "aria-labelledby": label ? labelId : void 0,
-                    disabled: disabled,
-                    children: selectedOptions.length > 0 ? /*#__PURE__*/ jsxs("span", {
-                        ref: chipsRef,
-                        className: MultiSelect_module["chip-container"],
-                        children: [
-                            selectedOptions.map((o)=>/*#__PURE__*/ jsx("span", {
-                                    "data-option-chip": "true",
-                                    className: classnames('fwe-chip', {
-                                        'fwe-disabled': disabled
-                                    }),
-                                    style: {
-                                        minWidth: 0,
-                                        flexShrink: 1 === selectedOptions.length ? 1 : 0
-                                    },
-                                    children: /*#__PURE__*/ jsx("span", {
-                                        className: MultiSelect_module["chip-ellipsis"],
-                                        children: o.label
-                                    })
-                                }, String(o.data))),
-                            overflowCount > 0 && /*#__PURE__*/ jsxs(Fragment, {
-                                children: [
-                                    /*#__PURE__*/ jsx("span", {
-                                        children: "..."
-                                    }),
-                                    /*#__PURE__*/ jsx("span", {
-                                        className: "fwe-chip",
-                                        children: overflowCount
-                                    })
-                                ]
-                            })
-                        ]
-                    }) : placeholder ?? ''
-                }),
-                /*#__PURE__*/ jsx("label", {
-                    className: "fwe-select-label",
-                    id: labelId,
-                    htmlFor: id,
-                    children: label || ''
-                }),
-                /*#__PURE__*/ jsx(ListboxOptions, {
-                    className: "fwe-options-container fwe-options-container--multi-select",
-                    as: "ul",
-                    portal: false,
-                    style: {
-                        minWidth: 'var(--button-width)'
-                    },
-                    anchor: {
-                        to: 'bottom start',
-                        gap: 12,
-                        padding: 8
-                    },
-                    children: options.map((option)=>/*#__PURE__*/ jsx(ListboxOption, {
-                            value: option,
-                            disabled: option.disabled,
-                            as: "li",
-                            style: {
-                                cursor: option.disabled ? 'default' : 'pointer'
-                            },
-                            children: ({ selected })=>/*#__PURE__*/ jsxs("label", {
-                                    className: classnames('fwe-checkbox', {
-                                        'fwe-disabled': option.disabled
-                                    }),
-                                    style: {
-                                        pointerEvents: 'none',
-                                        cursor: 'pointer'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ jsx("input", {
-                                            type: "checkbox",
-                                            checked: selected,
-                                            disabled: option.disabled,
-                                            readOnly: true,
-                                            tabIndex: -1,
-                                            style: {
-                                                pointerEvents: 'none',
-                                                cursor: 'pointer'
-                                            }
-                                        }),
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: "fwe-checkbox-checkmark"
-                                        }),
-                                        /*#__PURE__*/ jsx("span", {
-                                            className: "fwe-checkbox-label-content",
-                                            children: option.label
-                                        })
-                                    ]
-                                })
-                        }, String(option.data)))
-                }),
-                name && (value ?? []).map((selectedValue, index)=>/*#__PURE__*/ jsx("input", {
-                        type: "hidden",
-                        name: name,
-                        value: String(selectedValue),
-                        disabled: disabled
-                    }, `${name}-${String(selectedValue)}-${index}`)),
-                hint && !error && /*#__PURE__*/ jsx("div", {
-                    className: "fwe-select-description",
-                    children: hint
-                }),
-                error && /*#__PURE__*/ jsx("div", {
-                    className: "fwe-select-invalid",
-                    children: error
-                })
-            ]
-        })
-    });
-}
-const MultiSelect = /*#__PURE__*/ forwardRef(MultiSelectComponent);
-export { MultiSelect };

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

@@ -1,8 +0,0 @@
-import "./MultiSelect_module.css";
-const MultiSelect_module = {
-    "chip-container": "chip-container-VYPHrz",
-    chipContainer: "chip-container-VYPHrz",
-    "chip-ellipsis": "chip-ellipsis-AW26fc",
-    chipEllipsis: "chip-ellipsis-AW26fc"
-};
-export { MultiSelect_module as default };

package/dist/forms/multi-select/MultiSelect_module.css

@@ -1,13 +0,0 @@
-.chip-container-VYPHrz {
-  flex-wrap: nowrap;
-  gap: 8px;
-  display: flex;
-  overflow: hidden;
-}
-
-.chip-ellipsis-AW26fc {
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-}
-

package/dist/forms/radio/RadioButton.d.ts

@@ -1,14 +0,0 @@
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface RadioButtonProps extends ClassNamePropsWithChildren {
-    readonly id?: string;
-    readonly defaultChecked?: boolean;
-    readonly checked?: boolean;
-    readonly onChange?: (value: string) => void;
-    readonly name?: string;
-    readonly value?: string;
-    readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly large?: boolean;
-    readonly disabled?: boolean;
-    readonly required?: boolean;
-}
-export declare function RadioButton(props: RadioButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/radio/RadioButton.js

@@ -1,61 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import { useContext } from "react";
-import { useId } from "../../utils/useId.js";
-import { RadioGroupContext } from "./RadioGroupContext.js";
-function RadioButton(props) {
-    const { id: idProps, onChange, value, name, defaultChecked: defaultCheckedProp, checked, labelPosition = 'after', large = false, disabled = false, required = false, children, className } = props;
-    const { disabled: groupDisabled, labelPosition: groupLabelPosition, large: groupLarge, name: groupName, value: groupValue, required: groupRequired, handleValueChange: onGroupValueChange, isControlled } = useContext(RadioGroupContext);
-    const innerLabelPosition = groupLabelPosition ?? labelPosition;
-    const classes = classnames('fwe-radio', {
-        'fwe-radio-label-below': 'below' === innerLabelPosition
-    }, {
-        'fwe-radio-label-before': 'before' === innerLabelPosition
-    }, {
-        'fwe-radio-lg': large || groupLarge
-    }, className);
-    const controlledChecked = void 0 !== checked || isControlled && void 0 !== groupValue ? Boolean(checked || groupValue === value) : void 0;
-    const getDefaultChecked = ()=>{
-        if (void 0 !== controlledChecked) return;
-        if (void 0 !== defaultCheckedProp) return defaultCheckedProp;
-        if (!isControlled && void 0 !== groupValue) return groupValue === value;
-    };
-    const defaultChecked = getDefaultChecked();
-    function handleChange(event) {
-        const newValue = event.target.value;
-        if (newValue) onGroupValueChange?.(newValue);
-        onChange?.(newValue);
-    }
-    const id = useId(idProps);
-    return /*#__PURE__*/ jsxs("label", {
-        className: classes,
-        htmlFor: id,
-        children: [
-            /*#__PURE__*/ jsxs("div", {
-                className: "fwe-radio-check",
-                children: [
-                    /*#__PURE__*/ jsx("input", {
-                        defaultChecked: defaultChecked,
-                        checked: controlledChecked,
-                        type: "radio",
-                        id: id,
-                        name: groupName || name,
-                        value: value,
-                        onChange: handleChange,
-                        disabled: disabled || groupDisabled,
-                        required: required || groupRequired
-                    }),
-                    /*#__PURE__*/ jsx("div", {
-                        className: "fwe-radio-checkmark"
-                    }),
-                    ' '
-                ]
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-radio-label-content",
-                children: children
-            })
-        ]
-    });
-}
-export { RadioButton };

package/dist/forms/radio/RadioGroup.d.ts

@@ -1,12 +0,0 @@
-import { type ComponentPropsWithoutRef } from 'react';
-export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
-    readonly name?: string;
-    readonly defaultValue?: string;
-    readonly onValueChange?: (value: string) => void;
-    readonly value?: string;
-    readonly labelPosition?: 'before' | 'after' | 'below';
-    readonly large?: boolean;
-    readonly disabled?: boolean;
-    readonly required?: boolean;
-}
-export declare const RadioGroup: (props: RadioGroupProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dist/forms/radio/RadioGroup.js

@@ -1,50 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import classnames from "classnames";
-import { forwardRef, useCallback, useMemo } from "react";
-import { useControlled } from "../../utils/useControlled.js";
-import { useId } from "../../utils/useId.js";
-import { RadioGroupContext } from "./RadioGroupContext.js";
-const RadioGroup = /*#__PURE__*/ forwardRef(({ children, className, onValueChange, value: controlledValue, defaultValue, name, labelPosition, large, disabled, required, ...props }, ref)=>{
-    const contextName = useId(name);
-    const [value, setValue] = useControlled({
-        controlled: controlledValue,
-        default: defaultValue
-    });
-    const handleValueChange = useCallback((newValue)=>{
-        onValueChange?.(newValue);
-        setValue(newValue);
-    }, [
-        onValueChange,
-        setValue
-    ]);
-    const contextValue = useMemo(()=>({
-            labelPosition,
-            large,
-            disabled,
-            required,
-            handleValueChange,
-            value,
-            isControlled: void 0 !== controlledValue,
-            name: contextName
-        }), [
-        controlledValue,
-        handleValueChange,
-        labelPosition,
-        large,
-        disabled,
-        required,
-        value,
-        contextName
-    ]);
-    return /*#__PURE__*/ jsx(RadioGroupContext.Provider, {
-        value: contextValue,
-        children: /*#__PURE__*/ jsx("div", {
-            ref: ref,
-            className: classnames('fwe-radio-group', className),
-            role: "radiogroup",
-            ...props,
-            children: children
-        })
-    });
-});
-export { RadioGroup };

package/dist/forms/radio/RadioGroupContext.d.ts

@@ -1,12 +0,0 @@
-interface ContextProps {
-    name: string;
-    value: string;
-    isControlled: boolean;
-    labelPosition: 'before' | 'after' | 'below';
-    large: boolean;
-    handleValueChange: (value: string) => void;
-    disabled: boolean;
-    required: boolean;
-}
-export declare const RadioGroupContext: import("react").Context<Partial<ContextProps>>;
-export {};

package/dist/forms/radio/RadioGroupContext.js

@@ -1,3 +0,0 @@
-import { createContext } from "react";
-const RadioGroupContext = /*#__PURE__*/ createContext({});
-export { RadioGroupContext };

package/dist/forms/segment/Segment.d.ts

@@ -1,13 +0,0 @@
-import React from 'react';
-import type { ClassNamePropsWithChildren } from '../../utils/types';
-export interface SegmentConfiguration {
-    readonly outline?: boolean;
-    readonly iconOnly?: boolean;
-}
-export interface SegmentProps extends ClassNamePropsWithChildren {
-    readonly legend: string;
-    readonly config?: SegmentConfiguration;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
-    readonly value?: any;
-}
-export declare function Segment(props: SegmentProps): import("react/jsx-runtime").JSX.Element;

package/dist/forms/segment/Segment.js

@@ -1,59 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import classnames from "classnames";
-import react from "react";
-import { useControlled } from "../../utils/useControlled.js";
-const defaultConfig = {
-    outline: true,
-    iconOnly: true
-};
-function Segment(props) {
-    const { children, legend, config, onChange, className, value: valueProps } = props;
-    const innerConfig = {
-        ...defaultConfig,
-        ...config
-    };
-    let useIcon = false;
-    let useIconAndText = false;
-    let tmpValue = '';
-    react.Children.forEach(children, (child, index)=>{
-        if (!/*#__PURE__*/ react.isValidElement(child)) return null;
-        if (0 === index && null !== child.props.icon) if (innerConfig.iconOnly) useIcon = true;
-        else useIconAndText = true;
-        if (child.props.checked) tmpValue = child.props.value;
-        return null;
-    });
-    const [value, setValue] = useControlled({
-        controlled: valueProps,
-        default: tmpValue
-    });
-    const handleChange = (event, _value)=>{
-        if (onChange) onChange(event, _value);
-        setValue(_value);
-    };
-    return /*#__PURE__*/ jsxs("fieldset", {
-        className: classnames('fwe-segment', {
-            'fwe-segment-outline': innerConfig.outline,
-            'fwe-segment-icon': useIcon,
-            'fwe-segment-icon-text': useIconAndText
-        }, className),
-        children: [
-            /*#__PURE__*/ jsx("legend", {
-                className: "fwe-sr-only fwe-d-inline-block",
-                children: legend
-            }),
-            /*#__PURE__*/ jsx("div", {
-                className: "fwe-segment-group",
-                children: react.Children.map(children, (child)=>{
-                    if (!/*#__PURE__*/ react.isValidElement(child)) return null;
-                    return /*#__PURE__*/ react.cloneElement(child, {
-                        ...child.props,
-                        onChange: handleChange,
-                        iconOnly: innerConfig.iconOnly,
-                        checked: child.props.value === value
-                    });
-                })
-            })
-        ]
-    });
-}
-export { Segment };

package/dist/forms/segment/segment-control/SegmentControl.d.ts

@@ -1,14 +0,0 @@
-import type React from 'react';
-import type { ClassNameProps } from '../../../utils/types';
-export interface SegmentControlProps extends ClassNameProps {
-    readonly label: string;
-    readonly name: string;
-    readonly value: any;
-    readonly checked?: boolean;
-    readonly disabled?: boolean;
-    readonly icon?: React.ReactNode;
-    readonly onChange?: (event: React.ChangeEvent<HTMLInputElement>, value: any) => void;
-    readonly id?: string;
-    readonly iconOnly?: boolean;
-}
-export declare function SegmentControl(props: SegmentControlProps): import("react/jsx-runtime").JSX.Element;