@helpwave/hightide/dist/index.d.ts

helpwave's component and theming library

import * as react_jsx_runtime from 'react/jsx-runtime';
import * as react from 'react';
import react__default, { HTMLAttributes, SVGProps, ReactNode, PropsWithChildren, RefObject, CSSProperties, Dispatch, SetStateAction, ButtonHTMLAttributes, InputHTMLAttributes, ComponentProps, TableHTMLAttributes, TextareaHTMLAttributes, LabelHTMLAttributes } from 'react';
import { TableFeature, ColumnDef, Table as Table$1, InitialTableState, Row, TableState, TableOptions, RowData, FilterFn, RowSelectionState, RowModel, Column, SortDirection, ColumnSizingState } from '@tanstack/react-table';
import { Translation, TranslationEntries, PartialTranslationExtension } from '@helpwave/internationalization';
import Link from 'next/link';

type Size = 'sm' | 'md' | 'lg';
type HelpwaveBadgeProps = HTMLAttributes<HTMLSpanElement> & {
    size?: Size;
};
/**
 * A Badge with the helpwave logo and the helpwave name
 */
declare const HelpwaveBadge: ({ size, ...props }: HelpwaveBadgeProps) => react_jsx_runtime.JSX.Element;

type HelpwaveProps = SVGProps<SVGSVGElement> & {
    color?: string;
    animate?: 'none' | 'loading' | 'pulse' | 'bounce';
    size?: 'sm' | 'md' | 'lg';
    animationDuration?: number;
};
/**
 * The helpwave loading spinner based on the svg logo.
 */
declare const HelpwaveLogo: ({ color, size, animate, animationDuration, ...props }: HelpwaveProps) => react_jsx_runtime.JSX.Element;

type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | null;
type ImageConfig = {
    avatarUrl: string;
    alt: string;
};
type AvatarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    image?: ImageConfig;
    name?: string;
    size?: AvatarSize;
};
/**
 * A component for showing a profile picture
 */
declare const Avatar: ({ image: initialImage, name, size, ...props }: AvatarProps) => react_jsx_runtime.JSX.Element;
type AvatarGroupProps = HTMLAttributes<HTMLDivElement> & {
    avatars: Omit<AvatarProps, 'size'>[];
    showTotalNumber?: boolean;
    size?: AvatarSize;
};
/**
 * A component for showing a group of Avatar's
 */
declare const AvatarGroup: ({ avatars, showTotalNumber, size, ...props }: AvatarGroupProps) => react_jsx_runtime.JSX.Element;

type ChipSize = 'xs' | 'sm' | 'md' | 'lg' | null;
type ChipColoringStyle = 'solid' | 'tonal' | null;
declare const chipColors: readonly ["primary", "secondary", "positive", "warning", "negative", "neutral"];
type ChipColor = typeof chipColors[number];
declare const ChipUtil: {
    colors: readonly ["primary", "secondary", "positive", "warning", "negative", "neutral"];
};
type ChipProps = HTMLAttributes<HTMLDivElement> & {
    color?: ChipColor;
    coloringStyle?: ChipColoringStyle;
    size?: ChipSize;
};
/**
 * A component for displaying a single chip
 */
declare const Chip: ({ children, color, coloringStyle, size, ...props }: ChipProps) => react_jsx_runtime.JSX.Element;
type ChipListProps = HTMLAttributes<HTMLUListElement> & {
    list: ChipProps[];
};
/**
 * A component for displaying a list of chips
 */
declare const ChipList: ({ list, ...props }: ChipListProps) => react_jsx_runtime.JSX.Element;

type ExpansionIconProps = HTMLAttributes<HTMLDivElement> & {
    isExpanded: boolean;
    disabled?: boolean;
};
declare const ExpansionIcon: ({ children, isExpanded, disabled, ...props }: ExpansionIconProps) => react_jsx_runtime.JSX.Element;

type ProgressIndicatorProps = {
    progress: number;
    strokeWidth?: number;
    size?: keyof typeof sizeMapping;
    direction?: 'clockwise' | 'counterclockwise';
    rotation?: number;
};
declare const sizeMapping: {
    small: number;
    medium: number;
    big: number;
};
/**
 * A progress indicator
 *
 * Start rotation is 3 o'clock and fills counterclockwise
 *
 * Progress is given from 0 to 1
 */
declare const ProgressIndicator: ({ progress, strokeWidth, size, direction, rotation }: ProgressIndicatorProps) => react_jsx_runtime.JSX.Element;

type TagProps = {
    size?: number;
    className?: string;
};
/**
 * Tag icon from flaticon
 *
 * https://www.flaticon.com/free-icon/price-tag_721550?term=label&page=1&position=8&origin=tag&related_id=721550
 *
 * When using it make attribution
 */
declare const TagIcon: ({ className, size, }: TagProps) => react_jsx_runtime.JSX.Element;

type FormFieldAriaAttributes = Pick<HTMLAttributes<HTMLElement>, 'aria-labelledby' | 'aria-describedby' | 'aria-disabled' | 'aria-readonly' | 'aria-invalid' | 'aria-errormessage' | 'aria-required'>;
type FormFieldInteractionStates = {
    invalid: boolean;
    disabled: boolean;
    readOnly: boolean;
    required: boolean;
};
type FormFieldLayoutIds = {
    input: string;
    error: string;
    label: string;
    description: string;
};
type FormFieldLayoutBag = {
    interactionStates: FormFieldInteractionStates;
    ariaAttributes: FormFieldAriaAttributes;
    id: string;
};
type FormFieldLayoutProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & Omit<Partial<FormFieldInteractionStates>, 'invalid'> & {
    children: (bag: FormFieldLayoutBag) => ReactNode;
    ids?: Partial<FormFieldLayoutIds>;
    label?: ReactNode;
    labelProps?: Omit<HTMLAttributes<HTMLLabelElement>, 'children' | 'id'>;
    invalidDescription?: ReactNode;
    invalidDescriptionProps?: Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'id'>;
    description?: ReactNode;
    descriptionProps?: Omit<HTMLAttributes<HTMLParagraphElement>, 'children' | 'id'>;
    showRequiredIndicator?: boolean;
};
declare const FormFieldLayout: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLDivElement>, "children"> & Omit<Partial<FormFieldInteractionStates>, "invalid"> & {
    children: (bag: FormFieldLayoutBag) => ReactNode;
    ids?: Partial<FormFieldLayoutIds>;
    label?: ReactNode;
    labelProps?: Omit<HTMLAttributes<HTMLLabelElement>, "children" | "id">;
    invalidDescription?: ReactNode;
    invalidDescriptionProps?: Omit<HTMLAttributes<HTMLDivElement>, "children" | "id">;
    description?: ReactNode;
    descriptionProps?: Omit<HTMLAttributes<HTMLParagraphElement>, "children" | "id">;
    showRequiredIndicator?: boolean;
} & react.RefAttributes<HTMLDivElement>>;

type FormValidationBehaviour = 'always' | 'touched' | 'submit';
type FormValue = Record<string, any>;
type FormEvent<T extends FormValue> = {
    type: 'onSubmit';
    key: 'ALL';
    hasErrors: boolean;
    values: T;
    errors: Partial<Record<keyof T, ReactNode>>;
} | {
    type: 'reset';
    key: 'ALL';
    values: T;
    errors: Partial<Record<keyof T, ReactNode>>;
} | {
    type: 'onTouched';
    key: keyof T;
    value: T[keyof T];
    values: T;
} | {
    type: 'onUpdate';
    key: 'ALL';
    updatedKeys: (keyof T)[];
    update: Partial<T>;
    values: T;
    hasErrors: boolean;
    errors: Partial<Record<keyof T, ReactNode>>;
} | {
    type: 'onChange';
    key: keyof T;
    value: T[keyof T];
    values: T;
} | {
    type: 'onError';
    key: keyof T;
    value: T[keyof T];
    values: T;
    error: ReactNode;
};
type FormEventListener<T extends FormValue> = (event: FormEvent<T>) => void;
type FormValidator<T extends FormValue> = (value: T[keyof T]) => ReactNode;
type FormStoreProps<T extends FormValue> = {
    initialValues: T;
    hasTriedSubmitting?: boolean;
    submittingTouchesAll?: boolean;
    validators?: Partial<{
        [K in keyof T]: (v: T[K]) => ReactNode;
    }>;
};
declare class FormStore<T extends FormValue> {
    private values;
    private initialValues;
    private validators;
    private hasTriedSubmitting;
    private errors;
    private touched;
    private listeners;
    private submittingTouchesAll;
    constructor({ initialValues, hasTriedSubmitting, submittingTouchesAll, validators, }: FormStoreProps<T>);
    getValue<K extends keyof T>(key: K): T[K];
    getAllValues(): T;
    setValue<K extends keyof T>(key: K, value: T[K], triggerUpdate?: boolean): void;
    setValues(values: Partial<T>, triggerUpdate?: boolean): void;
    getTouched(key: keyof T): boolean;
    getAllTouched(): Partial<Record<keyof T, boolean>>;
    setTouched(key: keyof T, isTouched?: boolean): void;
    getHasError(): boolean;
    getErrors(): Partial<Record<keyof T, ReactNode>>;
    getError(key: keyof T): ReactNode;
    private setError;
    getHasTriedSubmitting(): boolean;
    changeValidators(validators: Partial<Record<keyof T, FormValidator<T>>>): void;
    validate(key: keyof T): void;
    validateAll(): void;
    subscribe(key: keyof T | 'ALL', listener: FormEventListener<T>): () => void;
    private notify;
    submit(): void;
    reset(): void;
}

type UseCreateFormProps<T extends FormValue> = Omit<FormStoreProps<T>, 'validationBehaviour'> & {
    onFormSubmit: (values: T) => void;
    onFormError?: (values: T, errors: Partial<Record<keyof T, ReactNode>>) => void;
    /**
     * Called when the form values change.
     *
     * E.g. a key press for an input field.
     *
     * For most purposes use {@link onUpdate} instead.
     * @param values The new values of the form.
     */
    onValueChange?: (values: T) => void;
    /**
     * Called when the form values change and the corresponding inputs determined that the user
     * finished editing these fields and the client should make an update against the server.
     *
     * E.g. a user finished editing an input field by pressing enter or blurring the field.
     *
     * @param updatedKeys The keys that were updated.
     * @param update The update that was made.
     */
    onValidUpdate?: (updatedKeys: (keyof T)[], update: Partial<T>) => void;
    /**
     * Called when the form values change and the corresponding inputs determined that the user
     * finished editing these fields and the client should make an update against the server.
     *
     * E.g. a user finished editing an input field by pressing enter or blurring the field.
     *
     * @param updatedKeys The keys that were updated.
     * @param update The update that was made.
     */
    onUpdate?: (updatedKeys: (keyof T)[], update: Partial<T>) => void;
    scrollToElements?: boolean;
    scrollOptions?: ScrollIntoViewOptions;
};
type UseCreateFormResult<T extends FormValue> = {
    /**
     * The form store.
     * Do not attempt to read the store directly, use useFormObserver or useFormField instead.
     * Otherwise you will not get the latest values and errors.
     */
    store: FormStore<T>;
    reset: () => void;
    submit: () => void;
    update: (updater: Partial<T> | ((current: T) => Partial<T>), triggerUpdate?: boolean) => void;
    validateAll: () => void;
    registerRef: (key: keyof T) => (el: HTMLElement | null) => void;
};
declare function useCreateForm<T extends FormValue>({ onFormSubmit, onFormError, onValueChange, onUpdate, onValidUpdate, initialValues, hasTriedSubmitting, validators, scrollToElements, scrollOptions, }: UseCreateFormProps<T>): UseCreateFormResult<T>;

type FormFieldFocusableElementProps = FormFieldAriaAttributes & {
    id: string;
    ref: (element: HTMLElement | null) => void;
};
type FormFieldBag<T extends FormValue, K extends keyof T> = {
    dataProps: FormFieldDataHandling<T[K]>;
    focusableElementProps: FormFieldFocusableElementProps;
    interactionStates: FormFieldInteractionStates;
    touched: boolean;
    other: {
        updateValue: (value: T[K]) => void;
    };
};
interface FormFieldProps<T extends FormValue, K extends keyof T> extends Omit<FormFieldLayoutProps, 'invalidDescription' | 'children'> {
    children: (bag: FormFieldBag<T, K>) => ReactNode;
    name: K;
    triggerUpdateOnEditComplete?: boolean;
    validationBehaviour?: FormValidationBehaviour;
}
type FormFieldDataHandling<T> = {
    value: T;
    onValueChange: (value: T) => void;
    onEditComplete: (value: T) => void;
};
declare const FormField: <T extends FormValue, K extends keyof T>({ children, name, triggerUpdateOnEditComplete, validationBehaviour, ...props }: FormFieldProps<T, K>) => react_jsx_runtime.JSX.Element;

type FormContextType<T extends FormValue> = UseCreateFormResult<T>;
declare const FormContext: react.Context<FormContextType<any>>;
type FormProviderProps<T extends FormValue> = PropsWithChildren & {
    state: FormContextType<T>;
};
declare const FormProvider: <T extends FormValue>({ children, state }: FormProviderProps<T>) => react_jsx_runtime.JSX.Element;
declare function useForm<T extends FormValue>(): FormContextType<T>;
interface UseFormFieldParameter<T extends FormValue> {
    key: keyof T;
}
interface UseFormFieldOptions {
    triggerUpdate?: boolean;
    validationBehaviour?: FormValidationBehaviour;
}
interface UserFormFieldProps<T extends FormValue> extends UseFormFieldParameter<T>, UseFormFieldOptions {
}
type FormFieldResult<T> = {
    store: FormStore<T>;
    value: T;
    error: ReactNode;
    touched: boolean;
    hasTriedSubmitting: boolean;
    dataProps: FormFieldDataHandling<T>;
    registerRef: (el: HTMLElement | null) => void;
};
declare function useFormField<T extends FormValue, K extends keyof T>(key: K, { triggerUpdate, validationBehaviour }: UseFormFieldOptions): FormFieldResult<T[K]> | null;
type UseFormObserverProps<T extends FormValue> = {
    formStore?: FormStore<T>;
};
interface FormObserverResult<T extends FormValue> {
    store: FormStore<T>;
    values: T;
    touched: Partial<Record<keyof T, boolean>>;
    errors: Partial<Record<keyof T, ReactNode>>;
    hasErrors: boolean;
    hasTriedSubmitting: boolean;
}
declare function useFormObserver<T extends FormValue>({ formStore }?: UseFormObserverProps<T>): FormObserverResult<T> | null;
interface UseFormObserverKeyProps<T extends FormValue, K extends keyof T> {
    formStore?: FormStore<T>;
    formKey: K;
}
interface FormObserverKeyResult<T extends FormValue, K extends keyof T> {
    store: FormStore<T>;
    value: T[K];
    error: ReactNode;
    hasError: boolean;
    touched: boolean;
}
declare function useFormObserverKey<T extends FormValue, K extends keyof T>({ formStore, formKey }: UseFormObserverKeyProps<T, K>): FormObserverKeyResult<T, K> | null;

interface FormObserverProps<T extends FormValue> extends UseFormObserverProps<T> {
    children: (bag: FormObserverResult<T>) => ReactNode;
}
declare const FormObserver: <T extends FormValue>({ children, formStore }: FormObserverProps<T>) => ReactNode;
interface FormObserverKeyProps<T extends FormValue, K extends keyof T> extends UseFormObserverKeyProps<T, K> {
    children: (bag: FormObserverKeyResult<T, K>) => ReactNode;
}
declare const FormObserverKey: <T extends FormValue, K extends keyof T>({ children, formStore, formKey }: FormObserverKeyProps<T, K>) => ReactNode;

type FloatingElementAlignment = 'beforeStart' | 'afterStart' | 'center' | 'beforeEnd' | 'afterEnd';
type CalculatePositionOptions = {
    verticalAlignment?: FloatingElementAlignment;
    horizontalAlignment?: FloatingElementAlignment;
    screenPadding?: number;
    gap?: number;
    avoidOverlap?: boolean;
};
type UseAnchoredPositionOptions = CalculatePositionOptions & {
    isPolling?: boolean;
    isReactingToResize?: boolean;
    isReactingToScroll?: boolean;
    pollingInterval?: number;
};
type UseAnchoredPostitionProps = UseAnchoredPositionOptions & {
    container: RefObject<HTMLElement>;
    anchor: RefObject<HTMLElement>;
    window?: RefObject<HTMLElement>;
    active?: boolean;
};
declare function useAnchoredPosition({ active, window: windowRef, anchor: anchorRef, container: containerRef, isPolling, isReactingToResize, isReactingToScroll, pollingInterval, verticalAlignment, horizontalAlignment, avoidOverlap, screenPadding, gap, }: UseAnchoredPostitionProps): CSSProperties;

type BackgroundOverlayProps = HTMLAttributes<HTMLDivElement>;
interface AnchoredFloatingContainerProps extends HTMLAttributes<HTMLDivElement> {
    anchor?: RefObject<HTMLElement>;
    options?: UseAnchoredPositionOptions;
    active?: boolean;
}
declare const AnchoredFloatingContainer: react.ForwardRefExoticComponent<AnchoredFloatingContainerProps & react.RefAttributes<HTMLDivElement>>;

interface CarouselSlideProps extends HTMLAttributes<HTMLDivElement> {
    isSelected: boolean;
    index: number;
}
declare const CarouselSlide: react__default.ForwardRefExoticComponent<CarouselSlideProps & react__default.RefAttributes<HTMLDivElement>>;
type CarouselProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    children: ReactNode[];
    animationTime?: number;
    isLooping?: boolean;
    isAutoPlaying?: boolean;
    autoLoopingTimeOut?: number;
    autoLoopAnimationTime?: number;
    hintNext?: boolean;
    arrows?: boolean;
    dots?: boolean;
    /**
     * Percentage that is allowed to be scrolled further
     */
    overScrollThreshold?: number;
    blurColor?: string;
    heightClassName?: string;
    slideClassName?: string;
    slideContainerProps?: HTMLAttributes<HTMLDivElement>;
    onSlideChanged?: (index: number) => void;
};
declare const Carousel: ({ children, animationTime, isLooping, isAutoPlaying, autoLoopingTimeOut, autoLoopAnimationTime, hintNext, arrows, dots, blurColor, heightClassName, slideClassName, slideContainerProps, onSlideChanged, ...props }: CarouselProps) => react_jsx_runtime.JSX.Element;

type DividerInserterProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> & {
    children: ReactNode[];
    divider: (index: number) => ReactNode;
};
/**
 * A Component for inserting a divider in the middle of each child element
 *
 *  undefined elements are removed
 */
declare const DividerInserter: ({ children, divider, ...restProps }: DividerInserterProps) => react_jsx_runtime.JSX.Element;

type ExpandableRootProps = HTMLAttributes<HTMLDivElement> & {
    isExpanded?: boolean;
    onExpandedChange?: (isExpanded: boolean) => void;
    isInitialExpanded?: boolean;
    disabled?: boolean;
    allowContainerToggle?: boolean;
};
declare const ExpandableRoot: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    isExpanded?: boolean;
    onExpandedChange?: (isExpanded: boolean) => void;
    isInitialExpanded?: boolean;
    disabled?: boolean;
    allowContainerToggle?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
type ExpandableHeaderProps = HTMLAttributes<HTMLDivElement> & {
    isUsingDefaultIcon?: boolean;
};
declare const ExpandableHeader: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    isUsingDefaultIcon?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
type ExpandableContentProps = HTMLAttributes<HTMLDivElement> & {
    forceMount?: boolean;
};
declare const ExpandableContent: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    forceMount?: boolean;
} & react.RefAttributes<HTMLDivElement>>;
interface ExpandableProps extends ExpandableRootProps {
    trigger: ReactNode;
    triggerProps?: Omit<ExpandableHeaderProps, 'children'>;
    contentProps?: Omit<ExpandableContentProps, 'children'>;
    contentExpandedClassName?: string;
}
declare const Expandable: react.ForwardRefExoticComponent<ExpandableProps & react.RefAttributes<HTMLDivElement>>;

type FAQItem = Pick<ExpandableProps, 'isExpanded' | 'className'> & {
    title: string;
    content: ReactNode;
};
type FAQSectionProps = {
    entries: FAQItem[];
};
declare const FAQSection: ({ entries, }: FAQSectionProps) => react_jsx_runtime.JSX.Element;

interface InfiniteScrollProps {
    itemCount: number;
    /** How many items to keep in the DOM at once (default: 30) */
    bufferSize?: number;
    /** How many items to add tp the DOM when reaching one end at once (default: 7) */
    stepSize?: number;
    /** Pixels from edge to trigger a fetch/shift (default: 30) */
    scrollThreshold?: number;
    /** Initial index to center on or start at (optional) */
    initialIndex?: number;
    /** Render prop for each item */
    children: (index: number) => ReactNode;
    /** Optional classname for the scroll container */
    className?: string;
    /** Optional style for the container */
    style?: React.CSSProperties;
}
declare function InfiniteScroll({ children, itemCount, bufferSize, scrollThreshold, stepSize, initialIndex, className, style, }: InfiniteScrollProps): react_jsx_runtime.JSX.Element;

type ListBoxItemProps = HTMLAttributes<HTMLLIElement> & {
    value: string;
    disabled?: boolean;
};
declare const ListBoxItem: react__default.ForwardRefExoticComponent<HTMLAttributes<HTMLLIElement> & {
    value: string;
    disabled?: boolean;
} & react__default.RefAttributes<HTMLLIElement>>;
type ListBoxOrientation = 'vertical' | 'horizontal';
type ListBoxPrimitiveProps = HTMLAttributes<HTMLUListElement> & {
    value?: string[];
    initialValue?: string[];
    onItemClicked?: (value: string) => void;
    onSelectionChanged?: (value: string[]) => void;
    isSelection?: boolean;
    isMultiple?: boolean;
    orientation?: ListBoxOrientation;
};
declare const ListBoxPrimitive: react__default.ForwardRefExoticComponent<HTMLAttributes<HTMLUListElement> & {
    value?: string[];
    initialValue?: string[];
    onItemClicked?: (value: string) => void;
    onSelectionChanged?: (value: string[]) => void;
    isSelection?: boolean;
    isMultiple?: boolean;
    orientation?: ListBoxOrientation;
} & react__default.RefAttributes<HTMLUListElement>>;
type ListBoxMultipleProps = Omit<ListBoxPrimitiveProps, 'isMultiple'>;
declare const ListBoxMultiple: ({ ...props }: ListBoxMultipleProps) => react_jsx_runtime.JSX.Element;
type ListBoxProps = Omit<ListBoxPrimitiveProps, 'isMultiple' | 'value' | 'onSelectionChanged'> & {
    value?: string;
    onSelectionChanged?: (value: string) => void;
};
declare const ListBox: react__default.ForwardRefExoticComponent<Omit<ListBoxPrimitiveProps, "value" | "onSelectionChanged" | "isMultiple"> & {
    value?: string;
    onSelectionChanged?: (value: string) => void;
} & react__default.RefAttributes<HTMLUListElement>>;

type ASTNodeModifierType = 'none' | 'italic' | 'bold' | 'underline' | 'font-space' | 'primary' | 'secondary' | 'warn' | 'positive' | 'negative';
declare const astNodeInserterType: readonly ["helpwave", "newline"];
type ASTNodeInserterType = typeof astNodeInserterType[number];
type ASTNodeDefaultType = 'text';
type ASTNode = {
    type: ASTNodeModifierType;
    children: ASTNode[];
} | {
    type: ASTNodeInserterType;
} | {
    type: ASTNodeDefaultType;
    text: string;
};
type ASTNodeInterpreterProps = {
    node: ASTNode;
    isRoot?: boolean;
    className?: string;
};
declare const ASTNodeInterpreter: ({ node, isRoot, className, }: ASTNodeInterpreterProps) => string | react_jsx_runtime.JSX.Element;
type MarkdownInterpreterProps = {
    text: string;
    className?: string;
};
declare const MarkdownInterpreter: ({ text, className }: MarkdownInterpreterProps) => react_jsx_runtime.JSX.Element;

interface TabInfo {
    id: string;
    labelId: string;
    label: ReactNode;
    disabled?: boolean;
    ref: RefObject<HTMLElement>;
}
type PortalState = {
    id: string;
    ref: RefObject<HTMLElement>;
};
interface TabContextType {
    tabs: {
        activeId: string | null;
        setActiveId: Dispatch<SetStateAction<string | null>>;
        subscribe: (info: TabInfo) => () => void;
        infos?: TabInfo[];
    };
    portal: {
        id: string | null;
        element: HTMLElement | null;
        setPortal: (state: PortalState | null) => void;
    };
}
declare function useTabContext(): TabContextType;
interface TabSwitcherProps extends PropsWithChildren {
    activeId?: string;
    onActiveIdChange?: (activeId: string | null) => void;
    initialActiveId?: string;
}
/**
 * The controlling component of several Tabpanels.
 *
 * The uncontrolled mode only works if the Tabpanels do not remount.
 */
declare function TabSwitcher({ children, activeId: controlledActiveId, onActiveIdChange, initialActiveId }: TabSwitcherProps): react_jsx_runtime.JSX.Element;
type TabListProps = HTMLAttributes<HTMLUListElement>;
declare function TabList({ ...props }: TabListProps): react_jsx_runtime.JSX.Element;
type TabViewProps = HTMLAttributes<HTMLDivElement>;
declare function TabView({ ...props }: TabViewProps): react_jsx_runtime.JSX.Element;
type TabPanelProps = HTMLAttributes<HTMLDivElement> & {
    label: string;
    forceMount?: boolean;
    disabled?: boolean;
    initiallyActive?: boolean;
};
declare function TabPanel({ label, forceMount, disabled, initiallyActive, ...props }: TabPanelProps): react_jsx_runtime.JSX.Element;

type TextImageColor = 'primary' | 'secondary' | 'dark';
type TextImageProps = {
    title: string;
    description: string;
    imageUrl: string;
    onShowMoreClicked?: () => void;
    color?: TextImageColor;
    badge?: string;
    contentClassName?: string;
    className?: string;
};
/**
 * A Component for layering a Text upon an image
 */
declare const TextImage: ({ title, description, imageUrl, onShowMoreClicked, color, badge, contentClassName, className, }: TextImageProps) => react_jsx_runtime.JSX.Element;

type VerticalDividerProps = {
    width?: number;
    height?: number;
    strokeWidth?: number;
    dashGap?: number;
    dashLength?: number;
};
/**
 * A Component for creating a vertical Divider
 */
declare const VerticalDivider: ({ width, height, strokeWidth, dashGap, dashLength, }: VerticalDividerProps) => react_jsx_runtime.JSX.Element;

type VisibilityProps = PropsWithChildren & {
    isVisible?: boolean;
};
declare function Visibility({ children, isVisible }: VisibilityProps): react_jsx_runtime.JSX.Element;

type DialogPosition = 'top' | 'center' | 'none';
type DialogProps = HTMLAttributes<HTMLDivElement> & {
    /** Whether the dialog is currently open */
    isOpen?: boolean;
    /** Title of the Dialog used for accessibility */
    titleElement: ReactNode;
    /** Description of the Dialog used for accessibility */
    description: ReactNode;
    /** Callback when the dialog tries to close */
    onClose?: () => void;
    /** Styling for the background */
    backgroundClassName?: string;
    /** If true shows a close button and sends onClose on background clicks */
    isModal?: boolean;
    position?: DialogPosition;
    isAnimated?: boolean;
    containerClassName?: string;
};
/**
 * A generic dialog window which is managed by its parent
 */
declare const Dialog: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    /** Whether the dialog is currently open */
    isOpen?: boolean;
    /** Title of the Dialog used for accessibility */
    titleElement: ReactNode;
    /** Description of the Dialog used for accessibility */
    description: ReactNode;
    /** Callback when the dialog tries to close */
    onClose?: () => void;
    /** Styling for the background */
    backgroundClassName?: string;
    /** If true shows a close button and sends onClose on background clicks */
    isModal?: boolean;
    position?: DialogPosition;
    isAnimated?: boolean;
    containerClassName?: string;
} & react.RefAttributes<HTMLDivElement>>;

type DialogContextType = {
    isOpen: boolean;
    setIsOpen: Dispatch<SetStateAction<boolean>>;
    isModal: boolean;
};
declare const DialogContext: react.Context<DialogContextType>;
declare function useDialogContext(): DialogContextType;

interface DialogOpenerWrapperBag {
    open: () => void;
    close: () => void;
    isOpen: boolean;
    toggleOpen: () => void;
    props: {
        'onClick': () => void;
        'aria-haspopup': 'dialog';
    };
}
interface DialogOpenerWrapperProps {
    children: (props: DialogOpenerWrapperBag) => ReactNode;
}
declare function DialogOpenerWrapper({ children }: DialogOpenerWrapperProps): ReactNode;
interface DialogOpenerPassingProps {
    'children'?: React.ReactNode;
    'onClick'?: React.MouseEventHandler<HTMLButtonElement>;
    'aria-haspopup'?: 'dialog';
}

interface DialogRootProps extends PropsWithChildren {
    isOpen?: boolean;
    onIsOpenChange?: (isOpen: boolean) => void;
    initialIsOpen?: boolean;
    isModal?: boolean;
}
declare function DialogRoot({ children, isOpen: controlledIsOpen, onIsOpenChange, initialIsOpen, isModal, }: DialogRootProps): react_jsx_runtime.JSX.Element;

/**
 * The different sizes for a button
 */
type ButtonSize = 'xs' | 'sm' | 'md' | 'lg' | null;
type ButtonColoringStyle = 'outline' | 'solid' | 'text' | 'tonal' | null;
declare const buttonColorsList: readonly ["primary", "secondary", "positive", "warning", "negative", "neutral"];
/**
 * The allowed colors for the Button
 */
type ButtonColor = typeof buttonColorsList[number] | null;
declare const ButtonUtil: {
    colors: readonly ["primary", "secondary", "positive", "warning", "negative", "neutral"];
};
/**
 * The shard properties between all button types
 */
type ButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
    /**
     * @default 'medium'
     */
    size?: ButtonSize;
    color?: ButtonColor;
    /**
     * @default 'solid'
     */
    coloringStyle?: ButtonColoringStyle;
    allowClickEventPropagation?: boolean;
};
/**
 * A button with a solid background and different sizes
 */
declare const Button: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
    /**
     * @default 'medium'
     */
    size?: ButtonSize;
    color?: ButtonColor;
    /**
     * @default 'solid'
     */
    coloringStyle?: ButtonColoringStyle;
    allowClickEventPropagation?: boolean;
} & react.RefAttributes<HTMLButtonElement>>;

type ConfirmDialogType = 'positive' | 'negative' | 'neutral' | 'primary';
type ButtonOverwriteType = {
    text?: string;
    color?: ButtonColor;
    disabled?: boolean;
};
type ConfirmDialogProps = Omit<DialogProps, 'onClose'> & {
    isShowingDecline?: boolean;
    requireAnswer?: boolean;
    onCancel: () => void;
    onConfirm: () => void;
    onDecline?: () => void;
    confirmType?: ConfirmDialogType;
    /**
     * Order: Cancel, Decline, Confirm
     */
    buttonOverwrites?: [ButtonOverwriteType, ButtonOverwriteType, ButtonOverwriteType];
};
/**
 * A Dialog for asking the user for confirmation
 */
declare const ConfirmDialog: ({ children, onCancel, onConfirm, onDecline, confirmType, buttonOverwrites, className, ...restProps }: PropsWithChildren<ConfirmDialogProps>) => react_jsx_runtime.JSX.Element;

type DiscardChangesDialogProps = Omit<ConfirmDialogProps, 'onDecline' | 'onConfirm' | 'buttonOverwrites' | 'titleElement' | 'description'> & {
    isShowingDecline?: boolean;
    requireAnswer?: boolean;
    onCancel: () => void;
    onSave: () => void;
    onDontSave: () => void;
    titleOverwrite?: ReactNode;
    descriptionOverwrite?: ReactNode;
};
declare const DiscardChangesDialog: ({ children, onCancel, onSave, onDontSave, titleOverwrite, descriptionOverwrite, ...props }: PropsWithChildren<DiscardChangesDialogProps>) => react_jsx_runtime.JSX.Element;

type UseDelayOptionsResolved = {
    delay: number;
    disabled: boolean;
};
type UseDelayOptions = Partial<UseDelayOptionsResolved>;
declare function useDelay(options?: UseDelayOptions): {
    restartTimer: (onDelayFinish: () => void) => void;
    clearTimer: () => void;
    hasActiveTimer: boolean;
};

type EditCompleteOptionsResolved = {
    onBlur: boolean;
    afterDelay: boolean;
    allowEnterComplete?: boolean;
} & Omit<UseDelayOptionsResolved, 'disabled'>;
type EditCompleteOptions = Partial<EditCompleteOptionsResolved>;
type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'value'> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
    editCompleteOptions?: EditCompleteOptions;
    initialValue?: string;
};
/**
 * A Component for inputting text or other information
 *
 * Its state is managed must be managed by the parent
 */
declare const Input: react__default.ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "value"> & Partial<FormFieldDataHandling<string>> & Partial<FormFieldInteractionStates> & {
    editCompleteOptions?: EditCompleteOptions;
    initialValue?: string;
} & react__default.RefAttributes<HTMLInputElement>>;

type InputModalProps = ConfirmDialogProps & {
    inputs: InputProps[];
};
/**
 * A modal for receiving multiple inputs
 */
declare const InputDialog: ({ inputs, buttonOverwrites, ...props }: InputModalProps) => react_jsx_runtime.JSX.Element;

type RegisteredOption = {
    value: string;
    label: ReactNode;
    disabled: boolean;
    ref: React.RefObject<HTMLLIElement>;
};
type HighlightStartPositionBehavior = 'first' | 'last';
type SelectIconAppearance = 'left' | 'right' | 'none';
type InternalSelectContextState = {
    isOpen: boolean;
    options: RegisteredOption[];
    highlightedValue?: string;
};
type SelectContextIds = {
    trigger: string;
    content: string;
};
type SelectContextState = InternalSelectContextState & FormFieldInteractionStates & {
    value: string[];
    selectedOptions: RegisteredOption[];
};
type SelectConfiguration = {
    isMultiSelect: boolean;
    iconAppearance: SelectIconAppearance;
};
type ToggleOpenOptions = {
    highlightStartPositionBehavior?: HighlightStartPositionBehavior;
};
type SelectContextType = {
    ids: SelectContextIds;
    setIds: Dispatch<SetStateAction<SelectContextIds>>;
    state: SelectContextState;
    config: SelectConfiguration;
    item: {
        register: (item: RegisteredOption) => void;
        unregister: (value: string) => void;
        toggleSelection: (value: string, isSelected?: boolean) => void;
        highlightItem: (value: string) => void;
        moveHighlightedIndex: (delta: number) => void;
    };
    trigger: {
        ref: React.RefObject<HTMLElement>;
        register: (element: React.RefObject<HTMLElement>) => void;
        unregister: () => void;
        toggleOpen: (isOpen?: boolean, options?: ToggleOpenOptions) => void;
    };
};
declare const SelectContext: react.Context<SelectContextType>;
declare function useSelectContext(): SelectContextType;
type SharedSelectRootProps = Partial<FormFieldInteractionStates> & PropsWithChildren & {
    id?: string;
    initialIsOpen?: boolean;
    iconAppearance?: SelectIconAppearance;
    onClose?: () => void;
};
type SelectRootProps = SharedSelectRootProps & Partial<FormFieldDataHandling<string>> & {
    initialValue?: string;
};
declare const SelectRoot: ({ value, onValueChange, onEditComplete, ...props }: SelectRootProps) => react_jsx_runtime.JSX.Element;
type MultiSelectRootProps = SharedSelectRootProps & Partial<FormFieldDataHandling<string[]>> & {
    initialValue?: string[];
};
declare const MultiSelectRoot: ({ value, onValueChange, initialValue, onEditComplete, ...props }: MultiSelectRootProps) => react_jsx_runtime.JSX.Element;

type UseFocusTrapProps = {
    container: RefObject<HTMLElement>;
    active: boolean;
    initialFocus?: RefObject<HTMLElement>;
};
declare const useFocusTrap: ({ container, active, initialFocus, }: UseFocusTrapProps) => void;

interface UseOutsideClickOptions {
    refs: RefObject<HTMLElement>[];
    active?: boolean;
}
interface UseOutsideClickHandlers {
    onOutsideClick: (event: MouseEvent | TouchEvent) => void;
}
interface UseOutsideClickProps extends UseOutsideClickOptions, UseOutsideClickHandlers {
}
declare const useOutsideClick: ({ refs, onOutsideClick, active }: UseOutsideClickProps) => void;

interface PopUpProps extends AnchoredFloatingContainerProps, Partial<UseOutsideClickHandlers> {
    isOpen?: boolean;
    focusTrapOptions?: Omit<UseFocusTrapProps, 'container'>;
    outsideClickOptions?: UseOutsideClickOptions;
    onClose?: () => void;
    forceMount?: boolean;
    anchorExcludedFromOutsideClick?: boolean;
}
declare const PopUp: react.ForwardRefExoticComponent<PopUpProps & react.RefAttributes<HTMLDivElement>>;

type SelectOptionProps = Omit<HTMLAttributes<HTMLLIElement>, 'children'> & {
    value: string;
    disabled?: boolean;
    iconAppearance?: SelectIconAppearance;
    children?: ReactNode;
};
declare const SelectOption: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLLIElement>, "children"> & {
    value: string;
    disabled?: boolean;
    iconAppearance?: SelectIconAppearance;
    children?: ReactNode;
} & react.RefAttributes<HTMLLIElement>>;
type SelectButtonProps = ButtonHTMLAttributes<HTMLButtonElement> & {
    placeholder?: ReactNode;
    selectedDisplay?: (value: string[]) => ReactNode;
    hideExpansionIcon?: boolean;
};
declare const SelectButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
    placeholder?: ReactNode;
    selectedDisplay?: (value: string[]) => ReactNode;
    hideExpansionIcon?: boolean;
} & react.RefAttributes<HTMLButtonElement>>;
type SelectContentProps = PopUpProps;
declare const SelectContent: react.ForwardRefExoticComponent<PopUpProps & react.RefAttributes<HTMLUListElement>>;
type MultiSelectOptionProps = SelectOptionProps;
declare const MultiSelectOption: react.ForwardRefExoticComponent<Omit<HTMLAttributes<HTMLLIElement>, "children"> & {
    value: string;
    disabled?: boolean;
    iconAppearance?: SelectIconAppearance;
    children?: ReactNode;
} & react.RefAttributes<HTMLLIElement>>;
type MultiSelectContentProps = SelectContentProps;
declare const MultiSelectContent: react.ForwardRefExoticComponent<PopUpProps & react.RefAttributes<HTMLUListElement>>;
type MultiSelectButtonProps = SelectButtonProps;
declare const MultiSelectButton: react.ForwardRefExoticComponent<ButtonHTMLAttributes<HTMLButtonElement> & {
    placeholder?: ReactNode;
    selectedDisplay?: (value: string[]) => ReactNode;
    hideExpansionIcon?: boolean;
} & react.RefAttributes<HTMLButtonElement>>;

type SelectProps = SelectRootProps & {
    contentPanelProps?: SelectContentProps;
    buttonProps?: Omit<SelectButtonProps, 'selectedDisplay'> & {
        selectedDisplay?: (value: string) => ReactNode;
    };
};
declare const Select: react.ForwardRefExoticComponent<Partial<FormFieldInteractionStates> & {
    children?: ReactNode | undefined;
} & {
    id?: string;
    initialIsOpen?: boolean;
    iconAppearance?: SelectIconAppearance;
    onClose?: () => void;
} & Partial<FormFieldDataHandling<string>> & {
    initialValue?: string;
} & {
    contentPanelProps?: SelectContentProps;
    buttonProps?: Omit<SelectButtonProps, "selectedDisplay"> & {
        selectedDisplay?: (value: string) => ReactNode;
    };
} & react.RefAttributes<HTMLButtonElement>>;

type LanguageSelectProps = Omit<SelectProps, 'value'>;
declare const LanguageSelect: ({ ...props }: LanguageSelectProps) => react_jsx_runtime.JSX.Element;
type LanguageDialogProps = Omit<DialogProps, 'titleElement' | 'description'> & PropsWithChildren<{
    titleOverwrite?: ReactNode;
    descriptionOverwrite?: ReactNode;
}>;
/**
 * A Dialog for selecting the Language
 *
 * The State of open needs to be managed by the parent
 */
declare const LanguageDialog: ({ onClose, titleOverwrite, descriptionOverwrite, ...props }: LanguageDialogProps) => react_jsx_runtime.JSX.Element;

declare const hightideTranslationLocales: readonly ["de-DE", "en-US"];
type HightideTranslationLocales = typeof hightideTranslationLocales[number];
type HightideTranslationEntries = {
    'add': string;
    'after': string;
    'age': string;
    'all': string;
    'apply': string;
    'back': string;
    'before': string;
    'between': string;
    'cancel': string;
    'carousel': string;
    'caseSensitive': string;
    'change': string;
    'changeColumnDisplay': string;
    'changePinning': string;
    'changeSelection': string;
    'changeVisibility': string;
    'chooseLanguage': string;
    'chooseSlide': string;
    'chooseTheme': string;
    'clear': string;
    'clearValue': string;
    'click': string;
    'clickToCopy': string;
    'clickToSelect': string;
    'close': string;
    'closeDialog': string;
    'columnPicker': string;
    'columnPickerDescription': string;
    'columns': string;
    'confirm': string;
    'contains': string;
    'copied': string;
    'copy': string;
    'create': string;
    'date': string;
    'decline': string;
    'decreaseSortingPriority': string;
    'delete': string;
    'discard': string;
    'discardChanges': string;
    'done': string;
    'edit': string;
    'endDate': string;
    'endsWith': string;
    'enterText': string;
    'entriesPerPage': string;
    'entryDate': string;
    'equals': string;
    'error': string;
    'errorOccurred': string;
    'exit': string;
    'fieldRequiredError': string;
    'filter': string;
    'filterNonWhitespace': string;
    'filterNotUndefined': string;
    'filterUndefined': string;
    'first': string;
    'goodToSeeYou': string;
    'greaterThan': string;
    'greaterThanOrEqual': string;
    'hideColumn': string;
    'identifier': string;
    'increaseSortingPriority': string;
    'invalidEmail': string;
    'invalidEmailError': string;
    'isFalse': string;
    'isTrue': string;
    'language': string;
    'last': string;
    'less': string;
    'lessThan': string;
    'lessThanOrEqual': string;
    'loading': string;
    'locale': string;
    'max': string;
    'maxLengthError': string;
    'min': string;
    'minLengthError': string;
    'more': string;
    'moveDown': string;
    'moveUp': string;
    'name': string;
    'next': string;
    'no': string;
    'none': string;
    'noParameterRequired': string;
    'notBetween': string;
    'notContains': string;
    'notEmpty': string;
    'notEquals': string;
    'nothingFound': string;
    'of': string;
    'onOrAfter': string;
    'onOrBefore': string;
    'optional': string;
    'outOfRangeNumber': (values: {
        min: number;
        max: number;
    }) => string;
    'outOfRangeSelectionItems': (values: {
        min: number;
        max: number;
    }) => string;
    'outOfRangeString': (values: {
        min: number;
        max: number;
    }) => string;
    'parameter': string;
    'pinLeft': string;
    'pinned': string;
    'pinRight': string;
    'pinToLeft': string;
    'pinToRight': string;
    'pleaseWait': string;
    'previous': string;
    'pThemes': (values: {
        count: number;
    }) => string;
    'remove': string;
    'removeProperty': string;
    'required': string;
    'reset': string;
    'rSortingOrderAfter': (values: {
        otherSortings: number;
    }) => string;
    'save': string;
    'saved': string;
    'sDateTimeSelect': (values: {
        datetimeMode: string;
    }) => string;
    'search': string;
    'select': string;
    'selection': string;
    'selectOption': string;
    'sGender': (values: {
        gender: string;
    }) => string;
    'show': string;
    'showColumn': string;
    'showLess': string;
    'showMore': string;
    'showSlide': (values: {
        index: number;
    }) => string;
    'slide': string;
    'slideNavigation': string;
    'slideOf': (values: {
        index: number;
        length: number;
    }) => string;
    'sorting': string;
    'sSortingState': (values: {
        sortDirection: string;
    }) => string;
    'startDate': string;
    'startsWith': string;
    'sThemeMode': (values: {
        theme: string;
    }) => string;
    'street': string;
    'submit': string;
    'success': string;
    'tag': string;
    'tags': string;
    'text': string;
    'time.ago': string;
    'time.agoDays': (values: {
        days: number;
    }) => string;
    'time.april': string;
    'time.august': string;
    'time.century': (values: {
        count: number;
    }) => string;
    'time.day': (values: {
        count: number;
    }) => string;
    'time.decade': (values: {
        count: number;
    }) => string;
    'time.december': string;
    'time.february': string;
    'time.hour': (values: {
        count: number;
    }) => string;
    'time.in': string;
    'time.inDays': (values: {
        days: number;
    }) => string;
    'time.january': string;
    'time.july': string;
    'time.june': string;
    'time.march': string;
    'time.may': string;
    'time.microsecond': (values: {
        count: number;
    }) => string;
    'time.millisecond': (values: {
        count: number;
    }) => string;
    'time.minute': (values: {
        count: number;
    }) => string;
    'time.month': (values: {
        count: number;
    }) => string;
    'time.nanosecond': (values: {
        count: number;
    }) => string;
    'time.nextMonth': string;
    'time.november': string;
    'time.october': string;
    'time.previousMonth': string;
    'time.second': (values: {
        count: number;
    }) => string;
    'time.september': string;
    'time.sMonthName': (values: {
        month: string;
    }) => string;
    'time.today': string;
    'time.tomorrow': string;
    'time.year': (values: {
        count: number;
    }) => string;
    'time.yesterday': string;
    'tooFewSelectionItems': (values: {
        min: number;
    }) => string;
    'tooLong': (values: {
        max: number;
    }) => string;
    'tooManySelectionItems': (values: {
        max: number;
    }) => string;
    'tooShort': (values: {
        min: number;
    }) => string;
    'unpin': string;
    'unsavedChanges': string;
    'unsavedChangesSaveQuestion': string;
    'update': string;
    'value': string;
    'welcome': string;
    'yes': string;
};
declare const hightideTranslation: Translation<HightideTranslationLocales, Partial<HightideTranslationEntries>>;

type DeepPartial<T> = T extends string | number | boolean | bigint | symbol | null | undefined | Function ? T : T extends Array<infer U> ? Array<DeepPartial<U>> : T extends Map<infer K, infer V> ? Map<DeepPartial<K>, DeepPartial<V>> : T extends Set<infer U> ? Set<DeepPartial<U>> : T extends object ? {
    [P in keyof T]?: DeepPartial<T[P]>;
} : T;
type SuperSet<T, Base> = Base extends T ? T : never;
type SingleOrArray<T> = T | T[];
type Exact<T, U extends T> = U;

type TooltipConfig = {
    /**
     * Number of milliseconds until the tooltip appears
     */
    appearDelay: number;
    isAnimated: boolean;
};
type ThemeConfig = {
    /**
     * The initial theme to show when:
     * 1. The system preference is not or cannot be loaded
     * 2. The user has not set an app preference
     */
    initialTheme: ResolvedTheme;
};
type LocalizationConfig = {
    /**
     * The initial locale to use when:
     * 1. The system preference is not or cannot be loaded
     * 2. The user has not set an app preference
     */
    defaultLocale: HightideTranslationLocales;
};
type HightideConfig = {
    tooltip: TooltipConfig;
    theme: ThemeConfig;
    locale: LocalizationConfig;
};
type ConfigType = {
    config: HightideConfig;
    setConfig: (configOverwrite: DeepPartial<HightideConfig>) => void;
};
declare const HightideConfigContext: react.Context<ConfigType>;
type HightideConfigProviderProps = PropsWithChildren & DeepPartial<HightideConfig>;
declare const HightideConfigProvider: ({ children, ...initialOverwrite }: HightideConfigProviderProps) => react_jsx_runtime.JSX.Element;
declare const useHightideConfig: () => ConfigType;

declare const themes: readonly ["light", "dark", "system"];
type ThemeType = typeof themes[number];
type ResolvedTheme = Exclude<ThemeType, 'system'>;
declare const ThemeUtil: {
    themes: readonly ["light", "dark", "system"];
};
type ThemeContextType = {
    theme: ThemeType;
    resolvedTheme: ResolvedTheme;
    setTheme: Dispatch<SetStateAction<ThemeType>>;
};
declare const ThemeContext: react.Context<ThemeContextType>;
type ThemeProviderProps = PropsWithChildren & Partial<ThemeConfig> & {
    /**
     * Only set this if you want to control the theme yourself
     */
    theme?: ThemeType;
};
declare const ThemeProvider: ({ children, theme, initialTheme }: ThemeProviderProps) => react_jsx_runtime.JSX.Element;
declare const useTheme: () => ThemeContextType;

interface ThemeIconProps extends HTMLAttributes<SVGSVGElement> {
    theme?: ThemeType;
}
declare const ThemeIcon: ({ theme: themeOverride, ...props }: ThemeIconProps) => react_jsx_runtime.JSX.Element;
type ThemeSelectProps = Omit<SelectProps, 'value'>;
declare const ThemeSelect: ({ ...props }: ThemeSelectProps) => react_jsx_runtime.JSX.Element;
interface ThemeDialogProps extends Omit<DialogProps, 'titleElement' | 'description'> {
    titleOverwrite?: ReactNode;
    descriptionOverwrite?: ReactNode;
}
/**
 * A Dialog for selecting the Theme
 *
 * The State of open needs to be managed by the parent
 */
declare const ThemeDialog: ({ onClose, titleOverwrite, descriptionOverwrite, ...props }: PropsWithChildren<ThemeDialogProps>) => react_jsx_runtime.JSX.Element;

type DrawerAligment = 'left' | 'right' | 'bottom' | 'top';
type DrawerProps = HTMLAttributes<HTMLDivElement> & {
    isOpen: boolean;
    alignment: DrawerAligment;
    titleElement: ReactNode;
    description: ReactNode;
    isAnimated?: boolean;
    containerClassName?: string;
    backgroundClassName?: string;
    onClose: () => void;
    forceMount?: boolean;
    hasDefaultCloseIcon?: boolean;
};
declare const Drawer: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & {
    isOpen: boolean;
    alignment: DrawerAligment;
    titleElement: ReactNode;
    description: ReactNode;
    isAnimated?: boolean;
    containerClassName?: string;
    backgroundClassName?: string;
    onClose: () => void;
    forceMount?: boolean;
    hasDefaultCloseIcon?: boolean;
} & react.RefAttributes<HTMLDivElement>>;

interface TooltipTriggerContextValue {
    ref: RefObject<HTMLElement>;
    callbackRef: (el: HTMLElement | null) => void;
    props: {
        'onPointerEnter': () => void;
        'onPointerLeave': () => void;
        'onPointerCancel': () => void;
        'onClick': () => void;
        'onBlur': () => void;
        'aria-describedby'?: string;
    };
}
interface TooltipContextType {
    tooltip: {
        id: string;
        setId: (id: string) => void;
    };
    trigger: TooltipTriggerContextValue;
    disabled: boolean;
    isShown: boolean;
    open: () => void;
    close: () => void;
}
declare const TooltipContext: react.Context<TooltipContextType>;
declare const useTooltip: () => TooltipContextType;
interface TooltipRootProps extends PropsWithChildren {
    isInitiallyShown?: boolean;
    onIsShownChange?: (isShown: boolean) => void;
    appearDelay?: number;
    disabled?: boolean;
}
declare const TooltipRoot: ({ children