@rio-cloud/rio-uikit 1.12.0 → 1.13.1

package/src/components/page/Page.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import classNames from 'classnames';
-const Page = (props) => {
-    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;
-    const wrapperClassNames = classNames('Page', orientation, shadow && 'shadow-hard', border && 'border border-width-2', className);
-    const isPortrait = orientation === 'portrait';
-    const style = {};
-    if (width && isPortrait) {
-        style.width = `${width}px`;
-    }
-    if (width && !isPortrait) {
-        style.height = `${width}px`;
-    }
-    return (_jsx("div", { className: wrapperClassNames, style: style, children: children }));
-};
-export default Page;

package/src/components/pager/Pager.d.ts

@@ -1,53 +0,0 @@
-import React from 'react';
-import type { ObjectValues } from '../../utils/ObjectValues';
-export declare const PagerVariant: {
-    readonly VARIANT_FULL: "full";
-    readonly VARIANT_COMPACT: "compact";
-};
-export type PagerProps = {
-    /**
-     * The title or name of the section next/previous section.
-     */
-    title: string | React.ReactNode;
-    /**
-     * The optional label for the full variant.
-     */
-    label?: string | React.ReactNode;
-    /**
-     * Set right alignment for "previous" pager content to be aligned
-     * to the right side of the pager and the arrow on the left side.
-     * @default false
-     */
-    alignRight?: boolean;
-    /**
-     * Define how large the component should be rendered.
-     *
-     * Possible values are:
-     * `Pager.VARIANT_FULL`, `Pager.VARIANT_COMPACT` or
-     * `full`, `compact`.
-     *
-     * @default `full`
-     */
-    variant?: ObjectValues<typeof PagerVariant>;
-    /**
-     * Sets the pager disabled.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Callback function for when the component is clicked.
-     * @param event
-     * @returns
-     */
-    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
-    /**
-     * Additional classes for the wrapper element.
-     */
-    className?: string;
-};
-declare const Pager: {
-    (props: PagerProps): import("react/jsx-runtime").JSX.Element;
-    VARIANT_FULL: "full";
-    VARIANT_COMPACT: "compact";
-};
-export default Pager;

package/src/components/pager/Pager.js

@@ -1,31 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import classNames from 'classnames';
-export const PagerVariant = {
-    VARIANT_FULL: 'full',
-    VARIANT_COMPACT: 'compact',
-};
-const Pager = (props) => {
-    const { title, label, alignRight = false, variant = PagerVariant.VARIANT_FULL, disabled = false, onClick, className, ...remainingProps } = props;
-    const [isHover, setIsHover] = useState(false);
-    const handleEnter = () => !disabled && setIsHover(true);
-    const handleLeave = () => setIsHover(false);
-    const isCompactVariant = variant === Pager.VARIANT_COMPACT;
-    const wrapperClassesBase = classNames('Pager', 'bg-white', 'border', 'display-flex justify-space-between align-items-center', isHover && 'border-color-highlight', alignRight && 'flex-row-reverse', disabled && 'pointer-events-none', 'cursor-pointer user-select-none');
-    const iconClassesBase = classNames('rioglyph', disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
-    const titleClassesBase = classNames(disabled ? 'text-color-light' : 'text-color-darker', isHover && 'text-color-highlight');
-    // The compact version has a slightly different markup and different classes for the
-    // individual parts, hence we extend the base classes
-    if (isCompactVariant) {
-        const wrapperClassesCompact = classNames(wrapperClassesBase, 'rounded-circle', 'padding-y-5 padding-x-15', 'width-auto', className);
-        const iconClassesCompact = classNames(iconClassesBase, alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5', 'text-size-10');
-        return (_jsxs("div", { ...remainingProps, className: wrapperClassesCompact, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick, children: [_jsx("div", { className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`, children: _jsx("div", { className: titleClassesBase, children: title }) }), _jsx("span", { className: iconClassesCompact })] }));
-    }
-    const wrapperClassesFull = classNames(wrapperClassesBase, 'rounded', 'padding-y-15 padding-x-20', 'width-100pct', className);
-    const iconClassesFull = classNames(iconClassesBase, alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10', 'text-size-200pct');
-    const titleClassesFull = classNames(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');
-    return (_jsxs("div", { ...remainingProps, className: wrapperClassesFull, onMouseEnter: handleEnter, onMouseLeave: handleLeave, onClick: onClick, children: [_jsxs("div", { className: `display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`, children: [_jsx("div", { className: 'text-color-gray line-height-16', children: label }), _jsx("div", { className: titleClassesFull, children: title })] }), _jsx("div", { className: 'text-size-12 display-grid place-items-center', children: _jsx("span", { className: iconClassesFull }) })] }));
-};
-Pager.VARIANT_FULL = PagerVariant.VARIANT_FULL;
-Pager.VARIANT_COMPACT = PagerVariant.VARIANT_COMPACT;
-export default Pager;

package/src/components/popover/Popover.d.ts

@@ -1,61 +0,0 @@
-import { type ForwardRefExoticComponent, type RefAttributes, type PropsWithChildren, type ReactNode, type ComponentProps } from 'react';
-export declare const PLACEMENT_MAP: {
-    readonly AUTO: "auto";
-    readonly TOP: "top";
-    readonly RIGHT: "right";
-    readonly BOTTOM: "bottom";
-    readonly LEFT: "left";
-};
-export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
-    /**
-     * HTML ID attribute, necessary for accessibility.
-     */
-    id: string;
-    /**
-     * Sets the direction the Popover is positioned towards.
-     *
-     * This is generally provided by the OverlayTrigger component positioning the Popover.
-     *
-     * Possible values are:
-     * - `auto`
-     * - `top`
-     * - `right`
-     * - `bottom`
-     * - `left`
-     */
-    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';
-    /**
-     * Additional props assigned to the arrow element. Internally used.
-     */
-    arrowProps?: Record<string, unknown>;
-    /**
-     * Any element to be rendered as the title of the Popover.
-     *
-     * It creates a `Popover.Title` inside the `Popover` passing the title directly into it.
-     */
-    title?: string | ReactNode;
-    /**
-     * Additional classes to be set on the `Popover.Title` element.
-     */
-    titleClassName?: string;
-    /**
-     * Additional classes to be set on the `Popover.Content` element.
-     */
-    contentClassName?: string;
-    /**
-     * Additional class names for the wrapper element.
-     */
-    className?: string;
-};
-declare const PopoverTitle: ({ className, children }: PropsWithChildren<{
-    className?: string;
-}>) => import("react/jsx-runtime").JSX.Element;
-declare const PopoverContent: ({ className, children }: PropsWithChildren<{
-    className?: string;
-}>) => import("react/jsx-runtime").JSX.Element;
-type PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {
-    Title: typeof PopoverTitle;
-    Content: typeof PopoverContent;
-};
-declare const Popover: PopoverType;
-export default Popover;

package/src/components/popover/Popover.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { forwardRef, isValidElement, useState, useEffect, } from 'react';
-import { PLACEMENT } from '../../values/Placement';
-export const PLACEMENT_MAP = {
-    AUTO: PLACEMENT.AUTO,
-    TOP: PLACEMENT.TOP,
-    RIGHT: PLACEMENT.RIGHT,
-    BOTTOM: PLACEMENT.BOTTOM,
-    LEFT: PLACEMENT.LEFT,
-};
-const PopoverTitle = ({ className = '', children }) => (_jsx("div", { className: `popover-header popover-title ${className}`, children: children }));
-const PopoverContent = ({ className = '', children }) => (_jsx("div", { className: `popover-content popover-body ${className}`, children: children }));
-const isPopoverTitleOrContent = (element) => {
-    return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);
-};
-const Popover = forwardRef((props, ref) => {
-    const { placement = 'bottom', arrowProps, title, titleClassName = '', contentClassName = '', children, className = '', ...remainingProps } = props;
-    const hasTitle = !!title;
-    const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);
-    // Mount the component but don't show it yet via CSS.
-    // After it is mounted, we set the visibility class to use CSS animation
-    const [isMounted, setIsMounted] = useState(false);
-    useEffect(() => setIsMounted(true), []);
-    return (_jsxs("div", { ...remainingProps, role: 'tooltip', "x-placement": placement, ref: ref, className: `popover fade ${isMounted ? 'show' : ''} ${className}`, children: [_jsx("div", { className: 'arrow', ...arrowProps }), hasTitle && _jsx(PopoverTitle, { className: titleClassName, children: title }), hasCustomContent ? children : _jsx(PopoverContent, { className: contentClassName, children: children })] }));
-});
-Popover.Title = PopoverTitle;
-Popover.Content = PopoverContent;
-Object.assign(Popover, PLACEMENT_MAP);
-export default Popover;

package/src/components/position/Position.d.ts

@@ -1,16 +0,0 @@
-export type PositionProps = {
-    /**
-     * The latitude to display.
-     */
-    latitude: number;
-    /**
-     * The longitude to display.
-     */
-    longitude: number;
-    /**
-     * Can be used to override the default output.
-     */
-    address?: string;
-};
-declare const Position: (props: PositionProps) => import("react/jsx-runtime").JSX.Element;
-export default Position;

package/src/components/position/Position.js

@@ -1,13 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const format = (degrees, positivePrefix, negativePrefix) => {
-    const prefix = degrees >= 0 ? positivePrefix : negativePrefix;
-    const absDegrees = Math.abs(degrees);
-    const flooredDegrees = Math.floor(absDegrees);
-    const minutes = (absDegrees - flooredDegrees) * 60;
-    return `${prefix}${flooredDegrees}\u00b0 ${minutes.toFixed(3)}\u2032`;
-};
-const Position = (props) => {
-    const { latitude, longitude, address } = props;
-    return (_jsx("span", { className: 'vehiclePositionInfo', children: address || `${format(latitude, 'N', 'S')} ${format(longitude, 'E', 'W')}` }));
-};
-export default Position;

package/src/components/preloader/ImagePreloader.d.ts

@@ -1,47 +0,0 @@
-import { type JSX } from 'react';
-type ImagePreloaderStatus = 'PENDING' | 'FAILED' | 'LOADED';
-export type ImagePreloaderChild = (props: {
-    status: ImagePreloaderStatus;
-    image: HTMLImageElement;
-}) => JSX.Element | null;
-export type ImagePreloaderProps = {
-    /**
-     * The URL of the image to load.
-     */
-    src: string;
-    /**
-     * Invoked when the image is loaded.
-     *
-     * @param image The native Image object.
-     */
-    onLoaded?: (image: HTMLImageElement) => void;
-    /**
-     * Invoked when the image failed to load.
-     *
-     * @param image The native Image object.
-     */
-    onFailed?: (image: HTMLImageElement) => void;
-    /**
-     * Whether to set the "crossOrigin" to "anonymous".
-     *
-     * @default false
-     */
-    isAnonymous?: boolean;
-    /**
-     * A render function can be used to access both the current state and the image element.
-     *
-     * Using this, you can decide how to render the different states and/or the loaded image.
-     *
-     * The function will receive props containing the `status` and `image` properties.
-     *
-     * `status` will be one of 'PENDING', 'FAILED' or 'LOADED'. `image` is the Image element.
-     */
-    children?: ImagePreloaderChild;
-};
-declare const ImagePreloader: {
-    (props: ImagePreloaderProps): JSX.Element | null;
-    STATUS_PENDING: string;
-    STATUS_LOADED: string;
-    STATUS_FAILED: string;
-};
-export default ImagePreloader;

package/src/components/preloader/ImagePreloader.js

@@ -1,50 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-import noop from 'lodash/noop';
-const loadImage = (onLoad, onError) => (src, isAnonymous) => {
-    const image = new Image();
-    if (isAnonymous) {
-        image.crossOrigin = 'anonymous';
-    }
-    // attach listeners
-    image.onload = onLoad;
-    image.onerror = onError;
-    // preload the actual image
-    image.src = src;
-    return image;
-};
-const ImagePreloader = (props) => {
-    const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;
-    const [status, setStatus] = useState('PENDING');
-    const [image, setImage] = useState();
-    const willUnmount = useRef(false);
-    const handleImageLoaded = () => {
-        if (willUnmount.current) {
-            return;
-        }
-        setStatus('LOADED');
-        onLoaded(image);
-    };
-    const handleImageFailed = () => {
-        if (willUnmount.current) {
-            return;
-        }
-        setStatus('FAILED');
-        onFailed(image);
-    };
-    const loadImageWithCallbacks = loadImage(handleImageLoaded, handleImageFailed);
-    useEffect(() => {
-        setImage(loadImageWithCallbacks(src, isAnonymous));
-        return () => {
-            willUnmount.current = true;
-        };
-    }, []);
-    useEffect(() => {
-        setStatus('PENDING');
-        setImage(loadImageWithCallbacks(src, isAnonymous));
-    }, [src]);
-    return children ? children({ status, image: image }) : null;
-};
-ImagePreloader.STATUS_PENDING = 'PENDING';
-ImagePreloader.STATUS_LOADED = 'LOADED';
-ImagePreloader.STATUS_FAILED = 'FAILED';
-export default ImagePreloader;

package/src/components/radiobutton/RadioButton.d.ts

@@ -1,111 +0,0 @@
-import { type ChangeEventHandler, type MouseEventHandler, type PropsWithChildren, type ReactNode, type Ref, HTMLProps } from 'react';
-export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick'> & {
-    /**
-     * Define any rioglyph icon like "rioglyph-truck".
-     */
-    icon?: string;
-    /**
-     * The label position.
-     *
-     * Possible values are: "horizontal" or "vertical".
-     *
-     * @default 'vertical'
-     */
-    iconLabelPosition?: 'vertical' | 'horizontal';
-    /**
-     * The icon Size in px.
-     *
-     * @default 16
-     */
-    iconSize?: number;
-    /**
-     * Defines the label text.
-     */
-    label?: string | ReactNode;
-    /**
-     * Callback function that is invoked when the radio button is clicked.
-     *
-     * @default noop
-     */
-    onClick?: MouseEventHandler<{
-        value: string | string[] | number;
-    }>;
-    /**
-     * Callback function that is invoked when the radio button is toggled and the state should change (for controlled
-     * usage).
-     *
-     * @default noop
-     */
-    onChange?: ChangeEventHandler;
-    /**
-     * Defines whether the radio is checked (for controlled usage).
-     */
-    checked?: boolean;
-    /**
-     * Defines whether the radio is initially checked (state can be changed on click).
-     */
-    defaultChecked?: boolean;
-    /**
-     * Defines whether the checkbox is disabled.
-     *
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Additional classes to be set on the input element.
-     */
-    className?: string;
-    /**
-     * Defines whether the radio button is applying an inline style.
-     *
-     * Use this in combination with other radio buttons.
-     *
-     * @default false
-     */
-    inline?: boolean;
-    /**
-     * Displays the icon on the right side of the text.
-     *
-     * @default false
-     */
-    right?: boolean;
-    /**
-     * Allows for rendering a completely different layout with or without a radio tick.
-     *
-     * @default false
-     */
-    custom?: boolean;
-    /**
-     * Name to be given to the input element.
-     */
-    name?: string;
-    /**
-     * The value attribute is a string containing the radio button's value but __it is never shown to the user__.
-     * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are
-     * currently checked are submitted, and the reported value is the value of the value attribute.
-     * If the value is not otherwise specified, it is the string on by default.
-     *
-     * This is useful when using native `FormData` when submitting a form to get the selected radio button value.
-     */
-    value?: string;
-    /**
-     * Number of the index used for keyboard support.
-     *
-     * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is
-     * defined by the document's source order. To disable the focus set the value to -1. A positive value means the
-     * element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.
-     *
-     * @default 0
-     */
-    tabIndex?: number;
-    /**
-     * Ref which is added to the input element.
-     */
-    inputRef?: Ref<HTMLInputElement>;
-};
-declare const RadioButton: {
-    (props: PropsWithChildren<RadioButtonProps>): import("react/jsx-runtime").JSX.Element;
-    ICON_LABEL_VERTICAL: string;
-    ICON_LABEL_HORIZONTAL: string;
-};
-export default RadioButton;

package/src/components/radiobutton/RadioButton.js

@@ -1,56 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useRef, } from 'react';
-import classNames from 'classnames';
-import noop from 'lodash/noop';
-const RadioButtonIcon = (props) => {
-    const { icon, iconSize, iconLabelPosition, text } = props;
-    const iconStyles = {
-        width: `${iconSize}px`,
-        height: `${iconSize}px`,
-        fontSize: `${iconSize}px`,
-        lineHeight: `${iconSize}px`,
-    };
-    return (_jsxs("span", { className: `radio-icon label-${iconLabelPosition}`, children: [_jsx("span", { className: `rioglyph ${icon}`, style: iconStyles }), _jsx("span", { className: 'radio-label', children: text })] }));
-};
-const RadioButton = (props) => {
-    const { icon = '', iconLabelPosition = 'vertical', iconSize = 16, label, onClick = noop, onChange = noop, checked, defaultChecked, disabled = false, className, inline = false, right = false, custom = false, name, value, tabIndex = 0, inputRef, children, ...remainingProps } = props;
-    const isControlled = checked !== null && checked !== undefined;
-    const labelRef = useRef(null);
-    const handleToggleKeyDown = (event) => {
-        switch (event.key) {
-            case ' ': // toggle on space
-            case 'Enter': // open on enter
-                toggle(event);
-                break;
-            default:
-                break;
-        }
-    };
-    const toggle = (event) => {
-        event.preventDefault();
-        if (disabled) {
-            return;
-        }
-        // Controlled case - uses "onChange()" instead of "onClick()" callback
-        if (isControlled) {
-            onChange(event);
-            return;
-        }
-        // Uncontrolled case - set the input checked or unchecked
-        if (labelRef.current) {
-            const checkbox = labelRef.current.firstChild;
-            checkbox.checked = !checkbox.checked;
-        }
-        onClick(event);
-    };
-    const text = label || children;
-    const labelClassnames = classNames('radio', inline && 'radio-inline', className);
-    const inputClassnames = classNames(right && 'icon-right', className);
-    const renderCustomIcon = !!icon;
-    const renderCustomContent = custom && children;
-    const renderDefault = !icon && !custom;
-    return (_jsxs("label", { ...remainingProps, className: labelClassnames, tabIndex: tabIndex, onKeyDown: handleToggleKeyDown, ref: labelRef, children: [_jsx("input", { type: 'radio', defaultChecked: defaultChecked, checked: checked, disabled: disabled, className: inputClassnames, ref: inputRef, onClick: onClick, onChange: onChange, name: name, value: value }), renderCustomIcon && (_jsx(RadioButtonIcon, { icon: icon, iconSize: iconSize, iconLabelPosition: iconLabelPosition, text: text })), renderDefault && (_jsx("span", { className: 'radio-text', children: _jsx("span", { children: text }) })), renderCustomContent && children] }));
-};
-RadioButton.ICON_LABEL_VERTICAL = 'vertical';
-RadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';
-export default RadioButton;

package/src/components/releaseNotes/ReleaseNotes.d.ts

@@ -1,40 +0,0 @@
-import React from 'react';
-export type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];
-export type NoteProps = {
-    version: string;
-    note: {
-        date: string;
-        content: NoteContent;
-    };
-};
-export type ReleaseNotesData = {
-    [key: string]: {
-        date: string;
-        content: NoteContent;
-    };
-};
-export type ReleaseNotesProps = {
-    /**
-     * Translated release notes of the following shape:
-     *
-     * @example
-     *
-     * ```tsx
-     * {
-     *     "0.1.2": {
-     *         date: '23.07.2018',
-     *         content: (
-     *             <div className='padding-left-15'>
-     *                 Map view within the tour history table
-     *                 • Modern map design as used in the Beta of the fleet monitor
-     *                 • Works with all event types
-     *             </div>
-     *         ),
-     *     }
-     * }
-     * ```
-     */
-    releaseNotes: ReleaseNotesData;
-};
-declare const ReleaseNotes: (props: ReleaseNotesProps) => import("react/jsx-runtime").JSX.Element;
-export default ReleaseNotes;

package/src/components/releaseNotes/ReleaseNotes.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import isArray from 'lodash/fp/isArray';
-import map from 'lodash/fp/map';
-import toPairs from 'lodash/fp/toPairs';
-const Note = (props) => {
-    const { note, version } = props;
-    const { date, content } = note;
-    return (_jsxs("div", { className: 'panel panel-default', children: [_jsx("div", { className: 'panel-heading', children: _jsxs("div", { className: 'display-flex justify-content-between', children: [_jsx("span", { className: 'text-size-16 text-medium', children: `${version}` }), _jsx("span", { className: 'text-thin', children: date })] }) }), _jsx("div", { className: 'panel-body white-space-pre-line', children: isArray(content) ? (_jsx("ul", { className: 'margin-bottom-0 margin-left-5 padding-left-25', children: map((item) => (_jsx("li", { children: item }, `${version}-note-${Math.random()}`)), content) })) : (_jsx("div", { children: content })) })] }, `${version}-note`));
-};
-const ReleaseNotes = (props) => {
-    const { releaseNotes, ...remainingProps } = props;
-    return (_jsx("div", { ...remainingProps, children: map(([key, note]) => (_jsx(Note, { note: note, version: key }, key)), toPairs(releaseNotes)) }));
-};
-export default ReleaseNotes;

package/src/components/resizer/Resizer.d.ts

@@ -1,58 +0,0 @@
-import { type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';
-declare const HORIZONTAL = "x";
-declare const VERTICAL = "y";
-declare const LEFT = "left";
-declare const RIGHT = "right";
-declare const TOP = "top";
-declare const BOTTOM = "bottom";
-export type ResizerProps = {
-    /**
-     * Defines where the resize handle is positioned relative to the element to resize.
-     *
-     * Possible values are:
-     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or
-     * `left`, `right`, `top`, `bottom`.
-     */
-    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;
-    /**
-     * Defines on which axis to resize.
-     *
-     * Possible values are:
-     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.
-     */
-    direction?: typeof HORIZONTAL | typeof VERTICAL;
-    /**
-     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.
-     * @param event
-     * @returns
-     */
-    onResizeStart?: (event: MouseEvent | TouchEvent) => void;
-    /**
-     * Callback when the resize handle is moved. The function returns the distant between the last
-     * position and the mouse movement. Means you can either subtract or add this diff to the elements
-     * width you want to change.
-     * @param diff
-     * @returns
-     */
-    onResize?: (diff: number) => void;
-    /**
-     * Callback when the resize ends, means when the handle is released. It returns the respective event.
-     * @param event
-     * @returns
-     */
-    onResizeEnd?: (event: Event) => void;
-    /**
-     * Additional classes to be set on the wrapper element.
-     */
-    className?: string;
-};
-declare const Resizer: {
-    (props: PropsWithChildren<ResizerProps>): import("react/jsx-runtime").JSX.Element;
-    HORIZONTAL: "x";
-    VERTICAL: "y";
-    LEFT: "left";
-    RIGHT: "right";
-    TOP: "top";
-    BOTTOM: "bottom";
-};
-export default Resizer;