@rio-cloud/rio-uikit 2.1.0 → 2.2.1

package/components/timepicker/TimePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimePicker.js","sources":["../../../src/components/timepicker/TimePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\nimport type { InputMask } from 'imask';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\nimport { isNil } from 'es-toolkit/predicate';\nimport moment, { type Moment } from 'moment';\nimport invariant from 'tiny-invariant';\n\nconst MINUTES_OFFSET = 15;\n\nconst mask = '00:00';\nconst fullRegexp = /^(?:\\d|[01]\\d|2[0-3]):[0-5]\\d$/;\n\nconst getPadded = (value: number) => (value >= 10 ? `${value}` : `0${value}`);\nconst formatTimeString = (hours: number, minutes: number) => `${getPadded(hours)}:${getPadded(minutes)}`;\n\nconst roundedUp = (time: Moment, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;\n\nconst getInitialTime = () => {\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return formatTimeString(hours, minutes);\n};\n\nconst isTimeValid = (value: string) => fullRegexp.test(value);\n\nconst isControlledAndValid = (value: string | undefined): value is string => {\n    const hasExternalValue = !isNil(value);\n    if (!hasExternalValue) {\n        return false;\n    }\n\n    const isValid = value === '' || isTimeValid(value);\n    if (!isValid) {\n        invariant(false, 'Wrong time format. Please pass in value with the following format: \"hh:mm\".');\n    }\n    return isValid;\n};\n\nexport type TimePickerProps = {\n    /**\n     * Value of the time as string. Note, when value is given the component is treated as controlled.\n     */\n    value?: string;\n\n    /**\n     * Callback function when the value changes and is a valid time format.\n     *\n     * If not it handles the state internally until the time is valid and filled.\n     */\n    onChange?: (value: string) => void;\n\n    /**\n     * Defines whether to always show the input mask placeholder.\n     *\n     * @default true\n     */\n    alwaysShowMask?: boolean;\n\n    /**\n     * Defines whether to show the input icon.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional properties to be set on the input element.\n     */\n    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TimePicker = (props: TimePickerProps) => {\n    const {\n        value,\n        onChange = noop,\n        alwaysShowMask = true,\n        showIcon = false,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        className = '',\n        inputProps = {},\n        ...remainingProps\n    } = props;\n\n    const initialTime = isControlledAndValid(value) ? value : getInitialTime();\n\n    const [timeValue, setTimeValue] = useState(initialTime);\n\n    // Update internal time value from outside when used as a controlled component\n    useEffect(() => {\n        if (isControlledAndValid(value)) {\n            setTimeValue(value);\n            onChange(value);\n        }\n    }, [value]);\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        const input = event.target;\n        // Check if value is empty or partially filled\n        if (!input.value || input.value.startsWith('-')) {\n            // Move cursor to the first empty position (usually 0)\n            // Timeout needed to wait for IMask internal focus handling\n            setTimeout(() => {\n                input.setSelectionRange(0, 0);\n            }, 0);\n        }\n\n        // If you want to preserve custom onFocus from props\n        inputProps.onFocus?.(event);\n    };\n\n    const handleAcceptTime = (val: string, maskRef: InputMask<{ [x: string]: unknown }>) => {\n        setTimeValue(val);\n\n        if (maskRef.masked.isComplete) {\n            onChange(val);\n        }\n    };\n\n    const isValid = isTimeValid(timeValue);\n\n    const handleIncrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time);\n        time.minute(rounded).second(0);\n        time.add(MINUTES_OFFSET, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n        onChange(updatedTimeValue);\n    };\n\n    const handleDecrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time);\n        time.minute(rounded).second(0);\n        time.subtract(MINUTES_OFFSET, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n        onChange(updatedTimeValue);\n    };\n\n    const { className: inputClassName, ...otherInputProps } = inputProps;\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    return (\n        <div {...remainingProps} className={classNames('TimePicker', 'input-group', className)}>\n            {showIcon && (\n                <span className='input-group-addon'>\n                    <span className='rioglyph rioglyph-time-alt' />\n                </span>\n            )}\n            <div className='form-control-feedback-wrapper'>\n                <IMaskInput\n                    {...otherInputProps}\n                    className={classNames('TimePickerInput', 'form-control', inputClassName)}\n                    // mask={mask}\n                    mask='HH:MM'\n                    blocks={{\n                        HH: {\n                            mask: IMask.MaskedRange,\n                            from: 0,\n                            to: 23,\n                            maxLength: 2,\n                        },\n                        MM: {\n                            mask: IMask.MaskedRange,\n                            from: 0,\n                            to: 59,\n                            maxLength: 2,\n                        },\n                    }}\n                    value={timeValue}\n                    onAccept={handleAcceptTime}\n                    onFocus={handleFocus}\n                    lazy={!alwaysShowMask}\n                    placeholderChar='-'\n                    overwrite\n                />\n                {hasFeedback && (\n                    <>\n                        {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                        {warningMessage && <span className='form-control-feedback rioglyph rioglyph-warning-sign' />}\n                        <span className={`help-block white-space-${messageWhiteSpace}`}>\n                            <span>{errorMessage || warningMessage}</span>\n                        </span>\n                    </>\n                )}\n            </div>\n            {isValid && (\n                <div className='TimePickerIncreaseButton input-group-addon'>\n                    <div\n                        className='text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer'\n                        onClick={handleDecrease}\n                    >\n                        <div className='rioglyph rioglyph-chevron-left scale-90' />\n                    </div>\n                    <div\n                        className='text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer'\n                        onClick={handleIncrease}\n                    >\n                        <div className='rioglyph rioglyph-chevron-right scale-90' />\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n};\n\nexport default TimePicker;\n"],"names":["MINUTES_OFFSET","fullRegexp","getPadded","value","formatTimeString","hours","minutes","roundedUp","time","offset","getInitialTime","date","isTimeValid","isControlledAndValid","isNil","isValid","invariant","TimePicker","props","onChange","noop","alwaysShowMask","showIcon","errorMessage","warningMessage","messageWhiteSpace","className","inputProps","remainingProps","initialTime","timeValue","setTimeValue","useState","useEffect","handleFocus","event","input","handleAcceptTime","val","maskRef","handleIncrease","moment","rounded","updatedTimeValue","handleDecrease","inputClassName","otherInputProps","hasFeedback","jsxs","classNames","jsx","IMaskInput","IMask","Fragment"],"mappings":"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"}
+{"version":3,"file":"TimePicker.js","sources":["../../../src/components/timepicker/TimePicker.tsx"],"sourcesContent":["import type React from 'react';\nimport { useEffect, useRef, useState } from 'react';\nimport { IMask, IMaskInput } from 'react-imask';\nimport type { InputMask } from 'imask';\nimport { noop } from 'es-toolkit/compat';\nimport { isNil } from 'es-toolkit/predicate';\nimport moment, { type Moment } from 'moment';\nimport invariant from 'tiny-invariant';\n\nimport BaseSelectDropdown, { type SelectOption } from '../selects/BaseSelectDropdown';\nimport useClickOutside from '../../useClickOutside';\nimport useMergeRefs from '../../hooks/useMergeRefs';\nimport classNames from '../../utils/classNames';\n\nconst MINUTES_OFFSET = 15;\n\nconst mask = '00:00';\nconst fullRegexp = /^(?:\\d|[01]\\d|2[0-3]):[0-5]\\d$/;\n\nconst getPadded = (value: number) => (value >= 10 ? `${value}` : `0${value}`);\nconst formatTimeString = (hours: number, minutes: number) => `${getPadded(hours)}:${getPadded(minutes)}`;\n\nconst roundedUp = (time: Moment, offset = MINUTES_OFFSET) => Math.floor(time.minutes() / offset) * offset;\nconst isValidMinuteOffset = (offset: number) => Number.isInteger(offset) && offset > 0 && offset <= 60;\nconst getEffectiveMinuteOffset = (offset: number) => (isValidMinuteOffset(offset) ? offset : MINUTES_OFFSET);\nconst getDropdownTimeValues = (offset: number) => {\n    const values: string[] = [];\n    const minutesPerDay = 24 * 60;\n    for (let totalMinutes = 0; totalMinutes < minutesPerDay; totalMinutes += offset) {\n        const hours = Math.floor(totalMinutes / 60);\n        const minutes = totalMinutes % 60;\n        values.push(formatTimeString(hours, minutes));\n    }\n    return values;\n};\n\nconst getInitialTime = () => {\n    const date = new Date();\n    const hours = date.getHours();\n    const minutes = date.getMinutes();\n    return formatTimeString(hours, minutes);\n};\n\nconst isTimeValid = (value: string) => fullRegexp.test(value);\n\nconst isControlledAndValid = (value: string | undefined): value is string => {\n    const hasExternalValue = !isNil(value);\n    if (!hasExternalValue) {\n        return false;\n    }\n\n    const isValid = value === '' || isTimeValid(value);\n    if (!isValid) {\n        invariant(false, 'Wrong time format. Please pass in value with the following format: \"hh:mm\".');\n    }\n    return isValid;\n};\n\nexport type TimePickerProps = {\n    /**\n     * Value of the time as string. Note, when value is given the component is treated as controlled.\n     */\n    value?: string;\n\n    /**\n     * Callback function when the value changes and is a valid time format.\n     * It also emits an empty string when the input is cleared.\n     *\n     * If not it handles the state internally until the time is valid and filled.\n     */\n    onChange?: (value: string) => void;\n\n    /**\n     * Defines whether to always show the input mask placeholder.\n     *\n     * @default true\n     */\n    alwaysShowMask?: boolean;\n\n    /**\n     * Defines whether to show the input icon.\n     *\n     * @default false\n     */\n    showIcon?: boolean;\n\n    /**\n     * Defines whether to show a dropdown with pre-defined time values.\n     *\n     * @default false\n     */\n    dropdown?: boolean;\n\n    /**\n     * Defines the minute interval for time controls and dropdown values.\n     * Invalid values fallback to 15.\n     *\n     * @default 15\n     */\n    minuteOffset?: number;\n\n    /**\n     * Defines whether the component is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Input error message.\n     */\n    errorMessage?: string | React.ReactNode;\n\n    /**\n     * Input warning message.\n     */\n    warningMessage?: string | React.ReactNode;\n\n    /**\n     * Feedback message width.\n     *\n     * @default 'normal'\n     */\n    messageWhiteSpace?: 'normal' | 'nowrap' | 'pre-line';\n\n    /**\n     * Additional properties to be set on the input element.\n     */\n    inputProps?: Omit<React.InputHTMLAttributes<HTMLInputElement>, 'value' | 'onChange'>;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\nconst TimePicker = (props: TimePickerProps) => {\n    const {\n        value,\n        onChange = noop,\n        alwaysShowMask = true,\n        showIcon = false,\n        dropdown = false,\n        minuteOffset = MINUTES_OFFSET,\n        disabled = false,\n        errorMessage,\n        warningMessage,\n        messageWhiteSpace = 'normal',\n        className = '',\n        inputProps = {},\n        ...remainingProps\n    } = props;\n\n    const initialTime = isControlledAndValid(value) ? value : getInitialTime();\n\n    const [timeValue, setTimeValue] = useState(initialTime);\n\n    const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n    const effectiveMinuteOffset = getEffectiveMinuteOffset(minuteOffset);\n\n    const isInputDisabled = disabled || !!inputProps.disabled;\n    const timePickerRef = useRef<HTMLDivElement>(null);\n    const hasMountedRef = useRef(false);\n    const suppressNextAcceptRef = useRef(false);\n\n    const clickOutsideRef = useClickOutside(() => {\n        if (dropdown) {\n            setIsDropdownOpen(false);\n        }\n    });\n\n    const mergedTimePickerRefs = useMergeRefs(timePickerRef, clickOutsideRef);\n\n    // Update internal time value from outside when used as a controlled component\n    useEffect(() => {\n        if (isControlledAndValid(value)) {\n            setTimeValue(value);\n        }\n    }, [value]);\n\n    useEffect(() => {\n        hasMountedRef.current = true;\n\n        return () => {\n            hasMountedRef.current = false;\n        };\n    }, []);\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        const input = event.target;\n        // Check if value is empty or partially filled\n        if (!input.value || input.value.startsWith('-')) {\n            // Move cursor to the first empty position (usually 0)\n            // Timeout needed to wait for IMask internal focus handling\n            setTimeout(() => {\n                input.setSelectionRange(0, 0);\n            }, 0);\n        }\n\n        // If you want to preserve custom onFocus from props\n        inputProps.onFocus?.(event);\n\n        if (dropdown && !isInputDisabled) {\n            setIsDropdownOpen(true);\n        }\n    };\n\n    const handleAcceptTime = (val: string, maskRef: InputMask<{ [x: string]: unknown }>) => {\n        if (suppressNextAcceptRef.current) {\n            suppressNextAcceptRef.current = false;\n            return;\n        }\n\n        setTimeValue(val);\n\n        if (!hasMountedRef.current) {\n            return;\n        }\n\n        if (maskRef.masked.isComplete) {\n            onChange(val);\n            return;\n        }\n\n        if (maskRef.unmaskedValue === '') {\n            onChange('');\n        }\n    };\n\n    const isValid = isTimeValid(timeValue);\n\n    const handleIncrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.add(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const handleDecrease = () => {\n        const time = moment(`2020-01-01 ${timeValue}`);\n        const rounded = roundedUp(time, effectiveMinuteOffset);\n        time.minute(rounded).second(0);\n        time.subtract(effectiveMinuteOffset, 'minutes');\n        const updatedTimeValue = formatTimeString(time.hours(), time.minutes());\n\n        setTimeValue(updatedTimeValue);\n    };\n\n    const { className: inputClassName, ...otherInputProps } = inputProps;\n\n    const dropdownOptions: SelectOption[] = getDropdownTimeValues(effectiveMinuteOffset).map(option => ({\n        id: option,\n        label: option,\n        selected: option === timeValue,\n    }));\n\n    const handleSelectDropdownValue = (selectedItem: SelectOption | undefined) => {\n        if (!selectedItem || isInputDisabled) {\n            return;\n        }\n\n        suppressNextAcceptRef.current = true;\n        setTimeValue(selectedItem.id);\n        onChange(selectedItem.id);\n        setIsDropdownOpen(false);\n    };\n\n    const hasFeedback = errorMessage || warningMessage;\n\n    const wrapperClassName = classNames('TimePicker', dropdown && 'dropdown', isDropdownOpen && 'open', className);\n\n    return (\n        <div {...remainingProps} className={wrapperClassName} ref={mergedTimePickerRefs}>\n            <div className='input-group'>\n                {showIcon && (\n                    <span className='input-group-addon'>\n                        <span className='rioglyph rioglyph-time-alt' />\n                    </span>\n                )}\n                <div className='form-control-feedback-wrapper'>\n                    <IMaskInput\n                        {...otherInputProps}\n                        className={classNames('TimePickerInput', 'form-control', inputClassName)}\n                        disabled={isInputDisabled}\n                        mask='HH:MM'\n                        blocks={{\n                            HH: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 23,\n                                maxLength: 2,\n                            },\n                            MM: {\n                                mask: IMask.MaskedRange,\n                                from: 0,\n                                to: 59,\n                                maxLength: 2,\n                            },\n                        }}\n                        value={timeValue}\n                        onAccept={handleAcceptTime}\n                        onFocus={handleFocus}\n                        lazy={!alwaysShowMask}\n                        placeholderChar='-'\n                        overwrite\n                    />\n                    {hasFeedback && (\n                        <>\n                            {errorMessage && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}\n                            {warningMessage && (\n                                <span className='form-control-feedback rioglyph rioglyph-warning-sign' />\n                            )}\n                            <span className={`help-block white-space-${messageWhiteSpace}`}>\n                                <span>{errorMessage || warningMessage}</span>\n                            </span>\n                        </>\n                    )}\n                </div>\n                {isValid && (\n                    <div\n                        className={classNames(\n                            'TimePickerIncreaseButton input-group-addon',\n                            isInputDisabled && 'pointer-events-none bg-lightest'\n                        )}\n                    >\n                        <div\n                            className='text-color-gray hover-text-color-dark display-grid place-items-center cursor-pointer'\n                            onClick={handleDecrease}\n                        >\n                            <div className='rioglyph rioglyph-chevron-left scale-90' />\n                        </div>\n                        <div\n                            className='text-color-gray hover-text-color-dark margin-left-5 display-grid place-items-center cursor-pointer'\n                            onClick={handleIncrease}\n                        >\n                            <div className='rioglyph rioglyph-chevron-right scale-90' />\n                        </div>\n                    </div>\n                )}\n            </div>\n            {dropdown && (\n                <BaseSelectDropdown\n                    isOpen={isDropdownOpen}\n                    options={dropdownOptions}\n                    onSelect={handleSelectDropdownValue}\n                    dropdownClassName='max-height-200 overflow-auto width-100pct'\n                />\n            )}\n        </div>\n    );\n};\n\nexport default TimePicker;\n"],"names":["MINUTES_OFFSET","fullRegexp","getPadded","value","formatTimeString","hours","minutes","roundedUp","time","offset","isValidMinuteOffset","getEffectiveMinuteOffset","getDropdownTimeValues","values","totalMinutes","getInitialTime","date","isTimeValid","isControlledAndValid","isNil","isValid","invariant","TimePicker","props","onChange","noop","alwaysShowMask","showIcon","dropdown","minuteOffset","disabled","errorMessage","warningMessage","messageWhiteSpace","className","inputProps","remainingProps","initialTime","timeValue","setTimeValue","useState","isDropdownOpen","setIsDropdownOpen","effectiveMinuteOffset","isInputDisabled","timePickerRef","useRef","hasMountedRef","suppressNextAcceptRef","clickOutsideRef","useClickOutside","mergedTimePickerRefs","useMergeRefs","useEffect","handleFocus","event","input","handleAcceptTime","val","maskRef","handleIncrease","moment","rounded","updatedTimeValue","handleDecrease","inputClassName","otherInputProps","dropdownOptions","option","handleSelectDropdownValue","selectedItem","hasFeedback","wrapperClassName","classNames","jsxs","jsx","IMaskInput","IMask","Fragment","BaseSelectDropdown"],"mappings":"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"}

package/components/tooltip/Tooltip.js

@@ -1,7 +1,7 @@
 import { jsx as t, jsxs as M } from "react/jsx-runtime";
 import { forwardRef as I, useState as w, useEffect as G } from "react";
-import l from "classnames";
 import { omit as g } from "es-toolkit/compat";
+import l from "../../utils/classNames.js";
 import { isDesktop as h } from "../../utils/deviceUtils.js";
 import { PLACEMENT as x } from "../../values/Placement.js";
 import { TEXT_ALIGNMENT as o } from "../../values/TextAlignment.js";

package/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n} from 'react';\nimport classNames from 'classnames';\nimport { omit } from 'es-toolkit/compat';\n\nimport { isDesktop } from '../../utils/deviceUtils';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TEXT_ALIGNMENT } from '../../values/TextAlignment';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport type { RefComponent } from '../../utils/RefComponent';\n\nconst STYLE_MAP = {\n    STYLE_DEFAULT: 'default',\n    STYLE_ONBOARDING: 'onboarding',\n} as const;\n\nconst TEXT_ALIGNMENT_MAP = {\n    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,\n    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,\n    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,\n} as const;\n\nexport type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type TooltipProps = {\n    /**\n     * An HTML id attribute, necessary for accessibility.\n     */\n    id?: string;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards. This is generally provided by the\n     * OverlayTrigger component positioning the tooltip.\n     *\n     * @default 'bottom'\n     */\n    placement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * Defines the position of the text content.\n     *\n     * Possible values are:\n     *\n     * - `'center'`\n     * - `'left'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;\n\n    /**\n     * Defines the look of the tooltip.\n     * Possible values are: `default` and `onboarding`\n     *\n     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are:\n     *\n     * - `'auto'`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\n     *\n     * @default false\n     */\n    allowOnTouch?: boolean;\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Additional style properties assigned to the wrapper element.\n     */\n    style?: CSSProperties;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the inner element.\n     */\n    innerClassName?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;\n\nexport type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> &\n    typeof STYLE_MAP &\n    typeof PLACEMENT &\n    typeof TEXT_ALIGNMENT_MAP;\n\nconst Tooltip = forwardRef((props: PropsWithChildren<TooltipProps>, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        allowOnTouch = false,\n        arrowProps,\n        children,\n        className = '',\n        innerClassName = '',\n        placement = 'bottom',\n        style,\n        textAlignment = 'center',\n        tooltipStyle = 'default',\n        width = 'auto',\n        ...remainingProps\n    } = omit(props, ['popper', 'positionLeft', 'positionTop']);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    if (!isDesktop() && !allowOnTouch) {\n        // Workaround: we have to return a DOM node as otherwise the\n        // react-transition library would throw an error on mobile\n        // when triggering a browser reflow and accessing the node directly.\n        return <span className='display-none' />;\n    }\n\n    const wrapperClasses = classNames(\n        'tooltip',\n        tooltipStyle && `tooltip-${tooltipStyle}`,\n        placement,\n        'fade',\n        isMounted && 'show',\n        className\n    );\n\n    const innerClasses = classNames(\n        'tooltip-inner',\n        textAlignment && `text-${textAlignment}`,\n        width && `width-${width}`,\n        innerClassName && innerClassName\n    );\n\n    /* eslint-disable react/no-unknown-property */\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            x-placement={placement}\n            ref={ref}\n            className={wrapperClasses}\n            style={{ ...style }}\n            data-offset={20}\n        >\n            <div className='tooltip-arrow' {...arrowProps} />\n            <div className={innerClasses}>{children}</div>\n        </div>\n    );\n}) as TooltipType;\n\n// statics\nObject.assign(Tooltip, STYLE_MAP);\nObject.assign(Tooltip, PLACEMENT); // is keyed as-is\nObject.assign(Tooltip, TEXT_ALIGNMENT_MAP);\n\nexport default Tooltip;\n"],"names":["STYLE_MAP","TEXT_ALIGNMENT_MAP","TEXT_ALIGNMENT","Tooltip","forwardRef","props","ref","allowOnTouch","arrowProps","children","className","innerClassName","placement","style","textAlignment","tooltipStyle","width","remainingProps","omit","isMounted","setIsMounted","useState","useEffect","isDesktop","jsx","wrapperClasses","classNames","innerClasses","jsxs","PLACEMENT"],"mappings":";;;;;;;AAkBA,MAAMA,IAAY;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAqB;AAAA,EACvB,qBAAqBC,EAAe;AAAA,EACpC,uBAAuBA,EAAe;AAAA,EACtC,sBAAsBA,EAAe;AACzC,GAyFMC,IAAUC,EAAW,CAACC,GAAwCC,MAAsC;AACtG,QAAM;AAAA,IACF,cAAAC,IAAe;AAAA,IACf,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,IACHC,EAAKb,GAAO,CAAC,UAAU,gBAAgB,aAAa,CAAC,GAInD,CAACc,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAGhD,MAFAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAElC,CAACG,OAAe,CAAChB;AAIjB,WAAO,gBAAAiB,EAAC,QAAA,EAAK,WAAU,eAAA,CAAe;AAG1C,QAAMC,IAAiBC;AAAA,IACnB;AAAA,IACAX,KAAgB,WAAWA,CAAY;AAAA,IACvCH;AAAA,IACA;AAAA,IACAO,KAAa;AAAA,IACbT;AAAA,EAAA,GAGEiB,IAAeD;AAAA,IACjB;AAAA,IACAZ,KAAiB,QAAQA,CAAa;AAAA,IACtCE,KAAS,SAASA,CAAK;AAAA,IACvBL,KAAkBA;AAAA,EAAA;AAItB,SACI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,MAAK;AAAA,MAEL,eAAaL;AAAA,MACb,KAAAN;AAAA,MACA,WAAWmB;AAAA,MACX,OAAO,EAAE,GAAGZ,EAAA;AAAA,MACZ,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGhB,EAAA,CAAY;AAAA,QAC/C,gBAAAgB,EAAC,OAAA,EAAI,WAAWG,GAAe,UAAAlB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;AAGD,OAAO,OAAON,GAASH,CAAS;AAChC,OAAO,OAAOG,GAAS0B,CAAS;AAChC,OAAO,OAAO1B,GAASF,CAAkB;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import {\n    useEffect,\n    useState,\n    forwardRef,\n    type CSSProperties,\n    type ForwardedRef,\n    type PropsWithChildren,\n    type HTMLAttributes,\n} from 'react';\nimport { omit } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\nimport { isDesktop } from '../../utils/deviceUtils';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TEXT_ALIGNMENT } from '../../values/TextAlignment';\nimport type { ObjectValues } from '../../utils/ObjectValues';\nimport type { RefComponent } from '../../utils/RefComponent';\n\nconst STYLE_MAP = {\n    STYLE_DEFAULT: 'default',\n    STYLE_ONBOARDING: 'onboarding',\n} as const;\n\nconst TEXT_ALIGNMENT_MAP = {\n    TEXT_ALIGNMENT_LEFT: TEXT_ALIGNMENT.LEFT,\n    TEXT_ALIGNMENT_CENTER: TEXT_ALIGNMENT.CENTER,\n    TEXT_ALIGNMENT_RIGHT: TEXT_ALIGNMENT.RIGHT,\n} as const;\n\nexport type TooltipWidth = 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500;\n\nexport type TooltipProps = {\n    /**\n     * An HTML id attribute, necessary for accessibility.\n     */\n    id?: string;\n\n    /**\n     * Sets the direction the Tooltip is positioned towards. This is generally provided by the\n     * OverlayTrigger component positioning the tooltip.\n     *\n     * @default 'bottom'\n     */\n    placement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * Defines the position of the text content.\n     *\n     * Possible values are:\n     *\n     * - `'center'`\n     * - `'left'`\n     * - `'right'`\n     *\n     * @default 'center'\n     */\n    textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;\n\n    /**\n     * Defines the look of the tooltip.\n     * Possible values are: `default` and `onboarding`\n     *\n     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are:\n     *\n     * - `'auto'`\n     * - `100`\n     * - `150`\n     * - `200`\n     * - `250`\n     * - `300`\n     * - `350`\n     * - `400`\n     * - `450`\n     * - `500`\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\n     *\n     * @default false\n     */\n    allowOnTouch?: boolean;\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Additional style properties assigned to the wrapper element.\n     */\n    style?: CSSProperties;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * Additional classes to be set on the inner element.\n     */\n    innerClassName?: string;\n} & Omit<HTMLAttributes<HTMLDivElement>, 'id' | 'style' | 'className'>;\n\nexport type TooltipType = RefComponent<PropsWithChildren<TooltipProps>> &\n    typeof STYLE_MAP &\n    typeof PLACEMENT &\n    typeof TEXT_ALIGNMENT_MAP;\n\nconst Tooltip = forwardRef((props: PropsWithChildren<TooltipProps>, ref: ForwardedRef<HTMLDivElement>) => {\n    const {\n        allowOnTouch = false,\n        arrowProps,\n        children,\n        className = '',\n        innerClassName = '',\n        placement = 'bottom',\n        style,\n        textAlignment = 'center',\n        tooltipStyle = 'default',\n        width = 'auto',\n        ...remainingProps\n    } = omit(props, ['popper', 'positionLeft', 'positionTop']);\n\n    // Mount the component but don't show it yet via CSS.\n    // After it is mounted, we set the visibility class to use CSS animation\n    const [isMounted, setIsMounted] = useState(false);\n    useEffect(() => setIsMounted(true), []);\n\n    if (!isDesktop() && !allowOnTouch) {\n        // Workaround: we have to return a DOM node as otherwise the\n        // react-transition library would throw an error on mobile\n        // when triggering a browser reflow and accessing the node directly.\n        return <span className='display-none' />;\n    }\n\n    const wrapperClasses = classNames(\n        'tooltip',\n        tooltipStyle && `tooltip-${tooltipStyle}`,\n        placement,\n        'fade',\n        isMounted && 'show',\n        className\n    );\n\n    const innerClasses = classNames(\n        'tooltip-inner',\n        textAlignment && `text-${textAlignment}`,\n        width && `width-${width}`,\n        innerClassName && innerClassName\n    );\n\n    /* eslint-disable react/no-unknown-property */\n    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            x-placement={placement}\n            ref={ref}\n            className={wrapperClasses}\n            style={{ ...style }}\n            data-offset={20}\n        >\n            <div className='tooltip-arrow' {...arrowProps} />\n            <div className={innerClasses}>{children}</div>\n        </div>\n    );\n}) as TooltipType;\n\n// statics\nObject.assign(Tooltip, STYLE_MAP);\nObject.assign(Tooltip, PLACEMENT); // is keyed as-is\nObject.assign(Tooltip, TEXT_ALIGNMENT_MAP);\n\nexport default Tooltip;\n"],"names":["STYLE_MAP","TEXT_ALIGNMENT_MAP","TEXT_ALIGNMENT","Tooltip","forwardRef","props","ref","allowOnTouch","arrowProps","children","className","innerClassName","placement","style","textAlignment","tooltipStyle","width","remainingProps","omit","isMounted","setIsMounted","useState","useEffect","isDesktop","jsx","wrapperClasses","classNames","innerClasses","jsxs","PLACEMENT"],"mappings":";;;;;;;AAkBA,MAAMA,IAAY;AAAA,EACd,eAAe;AAAA,EACf,kBAAkB;AACtB,GAEMC,IAAqB;AAAA,EACvB,qBAAqBC,EAAe;AAAA,EACpC,uBAAuBA,EAAe;AAAA,EACtC,sBAAsBA,EAAe;AACzC,GAyFMC,IAAUC,EAAW,CAACC,GAAwCC,MAAsC;AACtG,QAAM;AAAA,IACF,cAAAC,IAAe;AAAA,IACf,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,gBAAAC,IAAiB;AAAA,IACjB,WAAAC,IAAY;AAAA,IACZ,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,cAAAC,IAAe;AAAA,IACf,OAAAC,IAAQ;AAAA,IACR,GAAGC;AAAA,EAAA,IACHC,EAAKb,GAAO,CAAC,UAAU,gBAAgB,aAAa,CAAC,GAInD,CAACc,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAGhD,MAFAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAElC,CAACG,OAAe,CAAChB;AAIjB,WAAO,gBAAAiB,EAAC,QAAA,EAAK,WAAU,eAAA,CAAe;AAG1C,QAAMC,IAAiBC;AAAA,IACnB;AAAA,IACAX,KAAgB,WAAWA,CAAY;AAAA,IACvCH;AAAA,IACA;AAAA,IACAO,KAAa;AAAA,IACbT;AAAA,EAAA,GAGEiB,IAAeD;AAAA,IACjB;AAAA,IACAZ,KAAiB,QAAQA,CAAa;AAAA,IACtCE,KAAS,SAASA,CAAK;AAAA,IACvBL,KAAkBA;AAAA,EAAA;AAItB,SACI,gBAAAiB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGX;AAAA,MACJ,MAAK;AAAA,MAEL,eAAaL;AAAA,MACb,KAAAN;AAAA,MACA,WAAWmB;AAAA,MACX,OAAO,EAAE,GAAGZ,EAAA;AAAA,MACZ,eAAa;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAW,EAAC,OAAA,EAAI,WAAU,iBAAiB,GAAGhB,EAAA,CAAY;AAAA,QAC/C,gBAAAgB,EAAC,OAAA,EAAI,WAAWG,GAAe,UAAAlB,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpD,CAAC;AAGD,OAAO,OAAON,GAASH,CAAS;AAChC,OAAO,OAAOG,GAAS0B,CAAS;AAChC,OAAO,OAAO1B,GAASF,CAAkB;"}

package/components/tracker/Tracker.d.ts

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+export type TrackerBlock = {
+    /**
+     * Unique identifier for a block.
+     */
+    id?: string;
+    /**
+     * Defines the block color by setting a UIKIT bg-<name> class.
+     */
+    color?: string;
+    /**
+     * Tooltip content shown on hover.
+     */
+    tooltip?: ReactNode;
+    /**
+     * Called when clicking the block.
+     */
+    onClick?: (id: string) => void;
+    /**
+     * Additional class names for the block.
+     */
+    className?: string;
+};
+export type TrackerProps = {
+    /**
+     * Array of block objects.
+     */
+    data: TrackerBlock[];
+    /**
+     * Background color of a block, when no color is provided in `data`.
+     *
+     * @default 'bg-success'
+     */
+    defaultBackgroundColor?: string;
+    /**
+     * Add a hover effect to the tracker blocks.
+     *
+     * @default false
+     */
+    hoverEffect?: boolean;
+    /**
+     * Minimum width per tracker block in pixels.
+     *
+     * The tracker compresses blocks automatically down to this value.
+     *
+     * @default 5
+     */
+    minBlockWidth?: number;
+    /**
+     * Maximum width per tracker block in pixels.
+     *
+     * @default 10
+     */
+    maxBlockWidth?: number;
+    /**
+     * Gap between tracker blocks in pixels.
+     *
+     * @default 2
+     */
+    blockGap?: number;
+    /**
+     * Height per tracker block in pixels.
+     *
+     * @default 30
+     */
+    blockHeight?: number;
+    /**
+     * When enabled, the tracker shows fewer blocks once `minBlockWidth` is reached.
+     *
+     * @default true
+     */
+    collapseOnMinBlockWidth?: boolean;
+    /**
+     * Show the last blocks instead of the first blocks when collapsing due to width.
+     *
+     * @default false
+     */
+    collapseShowLastBlocks?: boolean;
+    /**
+     * Additional class names on the wrapper element.
+     */
+    className?: string;
+};
+declare const Tracker: (props: TrackerProps) => import("react/jsx-runtime").JSX.Element;
+export default Tracker;

package/components/tracker/Tracker.js

@@ -0,0 +1,54 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useMemo as T } from "react";
+import C from "../../utils/classNames.js";
+import H from "../../hooks/useResizeObserver.js";
+import A from "./TrackerBlock.js";
+const E = 5, O = 10, F = 2, G = 30, R = (d) => {
+  const {
+    data: t,
+    defaultBackgroundColor: k = "bg-success",
+    hoverEffect: p = !1,
+    minBlockWidth: M = E,
+    maxBlockWidth: b = O,
+    blockGap: B = F,
+    blockHeight: W = G,
+    collapseOnMinBlockWidth: n = !0,
+    collapseShowLastBlocks: r = !1,
+    className: f
+  } = d, [g, I, { inlineSize: h }] = H(), c = Math.max(1, M), l = Math.max(c, b), a = Math.max(0, B), x = Math.max(1, W), { visibleData: u, blockWidth: _ } = T(() => {
+    if (t.length === 0)
+      return { visibleData: t, blockWidth: l };
+    const e = h ?? t.length * l + (t.length - 1) * a, s = Math.max(
+      1,
+      Math.floor((e + a) / (c + a))
+    ), o = n ? Math.min(t.length, s) : t.length, i = r ? t.slice(-o) : t.slice(0, o), D = Math.max(0, e - (i.length - 1) * a) / i.length, L = Math.max(c, Math.min(l, D));
+    return { visibleData: i, blockWidth: L };
+  }, [
+    t,
+    h,
+    c,
+    l,
+    a,
+    n,
+    r
+  ]), v = C("tracker", f);
+  return /* @__PURE__ */ m("div", { ref: g, className: v, style: { gap: `${a}px` }, children: u.map((e, s) => {
+    const o = e.id ?? `${s}`;
+    return /* @__PURE__ */ m(
+      A,
+      {
+        id: o,
+        block: e,
+        defaultBackgroundColor: k,
+        hoverEffect: p,
+        blockWidth: _,
+        blockHeight: x
+      },
+      o
+    );
+  }) });
+};
+export {
+  R as default
+};
+//# sourceMappingURL=Tracker.js.map

package/components/tracker/Tracker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tracker.js","sources":["../../../src/components/tracker/Tracker.tsx"],"sourcesContent":["import { useMemo, type ReactNode } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../hooks/useResizeObserver';\nimport TrackerBlockItem from './TrackerBlock';\n\nconst DEFAULT_MIN_BLOCK_WIDTH = 5;\nconst DEFAULT_MAX_BLOCK_WIDTH = 10;\nconst DEFAULT_BLOCK_GAP = 2;\nconst DEFAULT_BLOCK_HEIGHT = 30;\n\nexport type TrackerBlock = {\n    /**\n     * Unique identifier for a block.\n     */\n    id?: string;\n\n    /**\n     * Defines the block color by setting a UIKIT bg-<name> class.\n     */\n    color?: string;\n\n    /**\n     * Tooltip content shown on hover.\n     */\n    tooltip?: ReactNode;\n\n    /**\n     * Called when clicking the block.\n     */\n    onClick?: (id: string) => void;\n\n    /**\n     * Additional class names for the block.\n     */\n    className?: string;\n};\n\nexport type TrackerProps = {\n    /**\n     * Array of block objects.\n     */\n    data: TrackerBlock[];\n\n    /**\n     * Background color of a block, when no color is provided in `data`.\n     *\n     * @default 'bg-success'\n     */\n    defaultBackgroundColor?: string;\n\n    /**\n     * Add a hover effect to the tracker blocks.\n     *\n     * @default false\n     */\n    hoverEffect?: boolean;\n\n    /**\n     * Minimum width per tracker block in pixels.\n     *\n     * The tracker compresses blocks automatically down to this value.\n     *\n     * @default 5\n     */\n    minBlockWidth?: number;\n\n    /**\n     * Maximum width per tracker block in pixels.\n     *\n     * @default 10\n     */\n    maxBlockWidth?: number;\n\n    /**\n     * Gap between tracker blocks in pixels.\n     *\n     * @default 2\n     */\n    blockGap?: number;\n\n    /**\n     * Height per tracker block in pixels.\n     *\n     * @default 30\n     */\n    blockHeight?: number;\n\n    /**\n     * When enabled, the tracker shows fewer blocks once `minBlockWidth` is reached.\n     *\n     * @default true\n     */\n    collapseOnMinBlockWidth?: boolean;\n\n    /**\n     * Show the last blocks instead of the first blocks when collapsing due to width.\n     *\n     * @default false\n     */\n    collapseShowLastBlocks?: boolean;\n\n    /**\n     * Additional class names on the wrapper element.\n     */\n    className?: string;\n};\n\nconst Tracker = (props: TrackerProps) => {\n    const {\n        data,\n        defaultBackgroundColor = 'bg-success',\n        hoverEffect = false,\n        minBlockWidth = DEFAULT_MIN_BLOCK_WIDTH,\n        maxBlockWidth = DEFAULT_MAX_BLOCK_WIDTH,\n        blockGap = DEFAULT_BLOCK_GAP,\n        blockHeight = DEFAULT_BLOCK_HEIGHT,\n        collapseOnMinBlockWidth = true,\n        collapseShowLastBlocks = false,\n        className,\n    } = props;\n    const [trackerRef, _, { inlineSize }] = useResizeObserver<HTMLDivElement>();\n\n    const clampedMinBlockWidth = Math.max(1, minBlockWidth);\n    const clampedMaxBlockWidth = Math.max(clampedMinBlockWidth, maxBlockWidth);\n    const clampedBlockGap = Math.max(0, blockGap);\n    const clampedBlockHeight = Math.max(1, blockHeight);\n\n    const { visibleData, blockWidth } = useMemo(() => {\n        if (data.length === 0) {\n            return { visibleData: data, blockWidth: clampedMaxBlockWidth };\n        }\n\n        const containerWidth = inlineSize ?? data.length * clampedMaxBlockWidth + (data.length - 1) * clampedBlockGap;\n        const maxVisibleWithMinWidth = Math.max(\n            1,\n            Math.floor((containerWidth + clampedBlockGap) / (clampedMinBlockWidth + clampedBlockGap))\n        );\n        const visibleBlocksCount = collapseOnMinBlockWidth\n            ? Math.min(data.length, maxVisibleWithMinWidth)\n            : data.length;\n        const visibleData = collapseShowLastBlocks\n            ? data.slice(-visibleBlocksCount)\n            : data.slice(0, visibleBlocksCount);\n\n        const availableWidth = Math.max(0, containerWidth - (visibleData.length - 1) * clampedBlockGap);\n        const widthPerBlock = availableWidth / visibleData.length;\n        const blockWidth = Math.max(clampedMinBlockWidth, Math.min(clampedMaxBlockWidth, widthPerBlock));\n\n        return { visibleData, blockWidth };\n    }, [\n        data,\n        inlineSize,\n        clampedMinBlockWidth,\n        clampedMaxBlockWidth,\n        clampedBlockGap,\n        collapseOnMinBlockWidth,\n        collapseShowLastBlocks,\n    ]);\n\n    const wrapperClasses = classNames('tracker', className);\n\n    return (\n        <div ref={trackerRef} className={wrapperClasses} style={{ gap: `${clampedBlockGap}px` }}>\n            {visibleData.map((block, index) => {\n                const id = block.id ?? `${index}`;\n                return (\n                    <TrackerBlockItem\n                        key={id}\n                        id={id}\n                        block={block}\n                        defaultBackgroundColor={defaultBackgroundColor}\n                        hoverEffect={hoverEffect}\n                        blockWidth={blockWidth}\n                        blockHeight={clampedBlockHeight}\n                    />\n                );\n            })}\n        </div>\n    );\n};\n\nexport default Tracker;\n"],"names":["DEFAULT_MIN_BLOCK_WIDTH","DEFAULT_MAX_BLOCK_WIDTH","DEFAULT_BLOCK_GAP","DEFAULT_BLOCK_HEIGHT","Tracker","props","data","defaultBackgroundColor","hoverEffect","minBlockWidth","maxBlockWidth","blockGap","blockHeight","collapseOnMinBlockWidth","collapseShowLastBlocks","className","trackerRef","_","inlineSize","useResizeObserver","clampedMinBlockWidth","clampedMaxBlockWidth","clampedBlockGap","clampedBlockHeight","visibleData","blockWidth","useMemo","containerWidth","maxVisibleWithMinWidth","visibleBlocksCount","widthPerBlock","wrapperClasses","classNames","block","index","id","jsx","TrackerBlockItem"],"mappings":";;;;;AAMA,MAAMA,IAA0B,GAC1BC,IAA0B,IAC1BC,IAAoB,GACpBC,IAAuB,IAmGvBC,IAAU,CAACC,MAAwB;AACrC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,wBAAAC,IAAyB;AAAA,IACzB,aAAAC,IAAc;AAAA,IACd,eAAAC,IAAgBT;AAAA,IAChB,eAAAU,IAAgBT;AAAA,IAChB,UAAAU,IAAWT;AAAA,IACX,aAAAU,IAAcT;AAAA,IACd,yBAAAU,IAA0B;AAAA,IAC1B,wBAAAC,IAAyB;AAAA,IACzB,WAAAC;AAAA,EAAA,IACAV,GACE,CAACW,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAElCC,IAAuB,KAAK,IAAI,GAAGX,CAAa,GAChDY,IAAuB,KAAK,IAAID,GAAsBV,CAAa,GACnEY,IAAkB,KAAK,IAAI,GAAGX,CAAQ,GACtCY,IAAqB,KAAK,IAAI,GAAGX,CAAW,GAE5C,EAAE,aAAAY,GAAa,YAAAC,EAAA,IAAeC,EAAQ,MAAM;AAC9C,QAAIpB,EAAK,WAAW;AAChB,aAAO,EAAE,aAAaA,GAAM,YAAYe,EAAA;AAG5C,UAAMM,IAAiBT,KAAcZ,EAAK,SAASe,KAAwBf,EAAK,SAAS,KAAKgB,GACxFM,IAAyB,KAAK;AAAA,MAChC;AAAA,MACA,KAAK,OAAOD,IAAiBL,MAAoBF,IAAuBE,EAAgB;AAAA,IAAA,GAEtFO,IAAqBhB,IACrB,KAAK,IAAIP,EAAK,QAAQsB,CAAsB,IAC5CtB,EAAK,QACLkB,IAAcV,IACdR,EAAK,MAAM,CAACuB,CAAkB,IAC9BvB,EAAK,MAAM,GAAGuB,CAAkB,GAGhCC,IADiB,KAAK,IAAI,GAAGH,KAAkBH,EAAY,SAAS,KAAKF,CAAe,IACvDE,EAAY,QAC7CC,IAAa,KAAK,IAAIL,GAAsB,KAAK,IAAIC,GAAsBS,CAAa,CAAC;AAE/F,WAAO,EAAE,aAAAN,GAAa,YAAAC,EAAAA;AAAAA,EAC1B,GAAG;AAAA,IACCnB;AAAA,IACAY;AAAA,IACAE;AAAA,IACAC;AAAA,IACAC;AAAA,IACAT;AAAA,IACAC;AAAA,EAAA,CACH,GAEKiB,IAAiBC,EAAW,WAAWjB,CAAS;AAEtD,2BACK,OAAA,EAAI,KAAKC,GAAY,WAAWe,GAAgB,OAAO,EAAE,KAAK,GAAGT,CAAe,QAC5E,YAAY,IAAI,CAACW,GAAOC,MAAU;AAC/B,UAAMC,IAAKF,EAAM,MAAM,GAAGC,CAAK;AAC/B,WACI,gBAAAE;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEG,IAAAF;AAAA,QACA,OAAAF;AAAA,QACA,wBAAA1B;AAAA,QACA,aAAAC;AAAA,QACA,YAAAiB;AAAA,QACA,aAAaF;AAAA,MAAA;AAAA,MANRY;AAAA,IAAA;AAAA,EASjB,CAAC,EAAA,CACL;AAER;"}

package/components/tracker/TrackerBlock.d.ts

@@ -0,0 +1,11 @@
+import { TrackerBlock as TrackerBlockData } from './Tracker';
+type TrackerBlockProps = {
+    id: string;
+    block: TrackerBlockData;
+    defaultBackgroundColor: string;
+    hoverEffect: boolean;
+    blockWidth: number;
+    blockHeight: number;
+};
+declare const TrackerBlock: (props: TrackerBlockProps) => import("react/jsx-runtime").JSX.Element;
+export default TrackerBlock;

package/components/tracker/TrackerBlock.js

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import d from "../../utils/classNames.js";
+import m from "../tooltip/SimpleTooltip.js";
+const u = (n) => {
+  const { id: e, block: o, defaultBackgroundColor: a, hoverEffect: s, blockWidth: i, blockHeight: k } = n, t = !!o.onClick, p = d(
+    "tracker-block",
+    o.color || a,
+    s && "tracker-block-hover",
+    t && "cursor-pointer",
+    o.className
+  ), r = /* @__PURE__ */ c(
+    "div",
+    {
+      className: p,
+      onClick: () => o.onClick?.(e),
+      onKeyDown: (l) => {
+        t && (l.key === "Enter" || l.key === " ") && (l.preventDefault(), o.onClick?.(e));
+      },
+      role: t ? "button" : void 0,
+      tabIndex: t ? 0 : void 0,
+      "aria-label": typeof o.tooltip == "string" ? o.tooltip : void 0,
+      style: {
+        width: `${i}px`,
+        minWidth: `${i}px`,
+        height: `${k}px`
+      }
+    }
+  );
+  return o.tooltip ? /* @__PURE__ */ c(m, { content: o.tooltip, allowOnTouch: !0, placement: "top", delay: { show: 100, hide: 50 }, children: r }) : r;
+};
+export {
+  u as default
+};
+//# sourceMappingURL=TrackerBlock.js.map

package/components/tracker/TrackerBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TrackerBlock.js","sources":["../../../src/components/tracker/TrackerBlock.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\nimport SimpleTooltip from '../tooltip/SimpleTooltip';\nimport type { TrackerBlock as TrackerBlockData } from './Tracker';\n\ntype TrackerBlockProps = {\n    id: string;\n    block: TrackerBlockData;\n    defaultBackgroundColor: string;\n    hoverEffect: boolean;\n    blockWidth: number;\n    blockHeight: number;\n};\n\nconst TrackerBlock = (props: TrackerBlockProps) => {\n    const { id, block, defaultBackgroundColor, hoverEffect, blockWidth, blockHeight } = props;\n\n    const isClickable = Boolean(block.onClick);\n\n    const blockClasses = classNames(\n        'tracker-block',\n        block.color || defaultBackgroundColor,\n        hoverEffect && 'tracker-block-hover',\n        isClickable && 'cursor-pointer',\n        block.className\n    );\n\n    const blockElement = (\n        <div\n            className={blockClasses}\n            onClick={() => block.onClick?.(id)}\n            onKeyDown={event => {\n                if (!isClickable) {\n                    return;\n                }\n\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    block.onClick?.(id);\n                }\n            }}\n            role={isClickable ? 'button' : undefined}\n            tabIndex={isClickable ? 0 : undefined}\n            aria-label={typeof block.tooltip === 'string' ? block.tooltip : undefined}\n            style={{\n                width: `${blockWidth}px`,\n                minWidth: `${blockWidth}px`,\n                height: `${blockHeight}px`,\n            }}\n        />\n    );\n\n    if (!block.tooltip) {\n        return blockElement;\n    }\n\n    return (\n        <SimpleTooltip content={block.tooltip} allowOnTouch placement='top' delay={{ show: 100, hide: 50 }}>\n            {blockElement}\n        </SimpleTooltip>\n    );\n};\n\nexport default TrackerBlock;\n"],"names":["TrackerBlock","props","id","block","defaultBackgroundColor","hoverEffect","blockWidth","blockHeight","isClickable","blockClasses","classNames","blockElement","jsx","event","SimpleTooltip"],"mappings":";;;AAaA,MAAMA,IAAe,CAACC,MAA6B;AAC/C,QAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,wBAAAC,GAAwB,aAAAC,GAAa,YAAAC,GAAY,aAAAC,MAAgBN,GAE9EO,IAAc,EAAQL,EAAM,SAE5BM,IAAeC;AAAA,IACjB;AAAA,IACAP,EAAM,SAASC;AAAA,IACfC,KAAe;AAAA,IACfG,KAAe;AAAA,IACfL,EAAM;AAAA,EAAA,GAGJQ,IACF,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWH;AAAA,MACX,SAAS,MAAMN,EAAM,UAAUD,CAAE;AAAA,MACjC,WAAW,CAAAW,MAAS;AAChB,QAAKL,MAIDK,EAAM,QAAQ,WAAWA,EAAM,QAAQ,SACvCA,EAAM,eAAA,GACNV,EAAM,UAAUD,CAAE;AAAA,MAE1B;AAAA,MACA,MAAMM,IAAc,WAAW;AAAA,MAC/B,UAAUA,IAAc,IAAI;AAAA,MAC5B,cAAY,OAAOL,EAAM,WAAY,WAAWA,EAAM,UAAU;AAAA,MAChE,OAAO;AAAA,QACH,OAAO,GAAGG,CAAU;AAAA,QACpB,UAAU,GAAGA,CAAU;AAAA,QACvB,QAAQ,GAAGC,CAAW;AAAA,MAAA;AAAA,IAC1B;AAAA,EAAA;AAIR,SAAKJ,EAAM,4BAKNW,GAAA,EAAc,SAASX,EAAM,SAAS,cAAY,IAAC,WAAU,OAAM,OAAO,EAAE,MAAM,KAAK,MAAM,MACzF,UAAAQ,GACL,IANOA;AAQf;"}

package/components/video/ResponsiveVideo.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import _ from "classnames";
+import _ from "../../utils/classNames.js";
 const n = "4by3", l = "16by9", o = (r) => {
   const { src: a, className: s = "", allowFullScreen: t = !0, aspectRatio: c = "16by9" } = r, i = _("video-responsive", `video-responsive-${c}`, s && s);
   return /* @__PURE__ */ e("div", { className: i, children: /* @__PURE__ */ e("iframe", { src: a, allowFullScreen: t }) });

package/components/video/ResponsiveVideo.js.map

@@ -1 +1 @@
-{"version":3,"file":"ResponsiveVideo.js","sources":["../../../src/components/video/ResponsiveVideo.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nconst FOUR_BY_THREE = '4by3';\nconst SIXTEEN_BY_NINE = '16by9';\n\nexport type AspectRatio = typeof FOUR_BY_THREE | typeof SIXTEEN_BY_NINE;\n\nexport type ResponsiveVideoProps = {\n    /**\n     * The link to the source of the video file.\n     */\n    src: string;\n\n    /**\n     * Defined the aspect ratio of the video.\n     *\n     * Possible values are:\n     *\n     * - `ResponsiveVideo.ASPECT_RATIO_4_BY_3`\n     * - `ResponsiveVideo.ASPECT_RATIO_16_BY_9`\n     * - `'4by3'`\n     * - `'16by9'`\n     *\n     * @default '16by9'\n     */\n    aspectRatio: '4by3' | '16by9';\n\n    /**\n     * Allows the fullscreen feature of the underlying embedded iframe.\n     *\n     * @default true\n     */\n    allowFullScreen?: boolean;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst ResponsiveVideo = (props: ResponsiveVideoProps) => {\n    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;\n\n    const wrapperClassName = classNames('video-responsive', `video-responsive-${aspectRatio}`, className && className);\n\n    return (\n        <div className={wrapperClassName}>\n            <iframe src={src} allowFullScreen={allowFullScreen} />\n        </div>\n    );\n};\n\nResponsiveVideo.ASPECT_RATIO_4_BY_3 = FOUR_BY_THREE as typeof FOUR_BY_THREE;\nResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE as typeof SIXTEEN_BY_NINE;\n\nexport default ResponsiveVideo;\n"],"names":["FOUR_BY_THREE","SIXTEEN_BY_NINE","ResponsiveVideo","props","src","className","allowFullScreen","aspectRatio","wrapperClassName","classNames","jsx"],"mappings":";;AAEA,MAAMA,IAAgB,QAChBC,IAAkB,SAqClBC,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,KAAAC,GAAK,WAAAC,IAAY,IAAI,iBAAAC,IAAkB,IAAM,aAAAC,IAAc,YAAYJ,GAEzEK,IAAmBC,EAAW,oBAAoB,oBAAoBF,CAAW,IAAIF,KAAaA,CAAS;AAEjH,SACI,gBAAAK,EAAC,SAAI,WAAWF,GACZ,4BAAC,UAAA,EAAO,KAAAJ,GAAU,iBAAAE,GAAkC,EAAA,CACxD;AAER;AAEAJ,EAAgB,sBAAsBF;AACtCE,EAAgB,uBAAuBD;"}
+{"version":3,"file":"ResponsiveVideo.js","sources":["../../../src/components/video/ResponsiveVideo.tsx"],"sourcesContent":["import classNames from '../../utils/classNames';\n\nconst FOUR_BY_THREE = '4by3';\nconst SIXTEEN_BY_NINE = '16by9';\n\nexport type AspectRatio = typeof FOUR_BY_THREE | typeof SIXTEEN_BY_NINE;\n\nexport type ResponsiveVideoProps = {\n    /**\n     * The link to the source of the video file.\n     */\n    src: string;\n\n    /**\n     * Defined the aspect ratio of the video.\n     *\n     * Possible values are:\n     *\n     * - `ResponsiveVideo.ASPECT_RATIO_4_BY_3`\n     * - `ResponsiveVideo.ASPECT_RATIO_16_BY_9`\n     * - `'4by3'`\n     * - `'16by9'`\n     *\n     * @default '16by9'\n     */\n    aspectRatio: '4by3' | '16by9';\n\n    /**\n     * Allows the fullscreen feature of the underlying embedded iframe.\n     *\n     * @default true\n     */\n    allowFullScreen?: boolean;\n\n    /**\n     * Additional classes added to the wrapping element.\n     */\n    className?: string;\n};\n\nconst ResponsiveVideo = (props: ResponsiveVideoProps) => {\n    const { src, className = '', allowFullScreen = true, aspectRatio = '16by9' } = props;\n\n    const wrapperClassName = classNames('video-responsive', `video-responsive-${aspectRatio}`, className && className);\n\n    return (\n        <div className={wrapperClassName}>\n            <iframe src={src} allowFullScreen={allowFullScreen} />\n        </div>\n    );\n};\n\nResponsiveVideo.ASPECT_RATIO_4_BY_3 = FOUR_BY_THREE as typeof FOUR_BY_THREE;\nResponsiveVideo.ASPECT_RATIO_16_BY_9 = SIXTEEN_BY_NINE as typeof SIXTEEN_BY_NINE;\n\nexport default ResponsiveVideo;\n"],"names":["FOUR_BY_THREE","SIXTEEN_BY_NINE","ResponsiveVideo","props","src","className","allowFullScreen","aspectRatio","wrapperClassName","classNames","jsx"],"mappings":";;AAEA,MAAMA,IAAgB,QAChBC,IAAkB,SAqClBC,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,KAAAC,GAAK,WAAAC,IAAY,IAAI,iBAAAC,IAAkB,IAAM,aAAAC,IAAc,YAAYJ,GAEzEK,IAAmBC,EAAW,oBAAoB,oBAAoBF,CAAW,IAAIF,KAAaA,CAAS;AAEjH,SACI,gBAAAK,EAAC,SAAI,WAAWF,GACZ,4BAAC,UAAA,EAAO,KAAAJ,GAAU,iBAAAE,GAAkC,EAAA,CACxD;AAER;AAEAJ,EAAgB,sBAAsBF;AACtCE,EAAgB,uBAAuBD;"}

package/hooks/useCookies.d.ts

@@ -0,0 +1,79 @@
+export type CookieSameSite = 'Strict' | 'Lax' | 'None';
+export type CookieOptions = {
+    /**
+     * Cookie path scope.
+     *
+     * @default '/'
+     */
+    path?: string;
+    /**
+     * Cookie domain scope (for example `.rio.cloud`).
+     */
+    domain?: string;
+    /**
+     * Absolute expiration date for the cookie.
+     */
+    expires?: Date | string;
+    /**
+     * Cookie lifetime in seconds.
+     */
+    maxAge?: number;
+    /**
+     * Cross-site cookie behavior.
+     *
+     * Possible values are:
+     *
+     * - `Strict`
+     * - `Lax`
+     * - `None`
+     */
+    sameSite?: CookieSameSite;
+    /**
+     * Adds the `Secure` flag so the cookie is sent over HTTPS only.
+     */
+    secure?: boolean;
+};
+export type UseCookiesResult = {
+    /**
+     * Sets a cookie with optional metadata.
+     *
+     * @param name - Cookie name.
+     * @param value - Cookie value.
+     * @param options - Additional cookie options.
+     */
+    setCookie: (name: string, value: string, options?: CookieOptions) => void;
+    /**
+     * Deletes a cookie by name.
+     *
+     * @param name - Cookie name.
+     * @param options - Optional path/domain to target the correct cookie scope.
+     */
+    deleteCookie: (name: string, options?: Pick<CookieOptions, 'path' | 'domain'>) => void;
+    /**
+     * Returns true if the cookie exists.
+     *
+     * @param name - Cookie name.
+     */
+    hasCookie: (name: string) => boolean;
+    /**
+     * Reads a cookie value.
+     *
+     * @param name - Cookie name.
+     */
+    getCookie: (name: string) => string | undefined;
+};
+/**
+ * Returns helpers to set, delete, and read browser cookies.
+ *
+ * @returns {UseCookiesResult} Cookie helper functions.
+ *
+ * @example
+ * const { setCookie, deleteCookie, hasCookie, getCookie } = useCookies();
+ *
+ * setCookie('token', 'abc123', { path: '/', maxAge: 60 * 60 });
+ * const isLoggedIn = hasCookie('token');
+ * const token = getCookie('token');
+ * deleteCookie('token');
+ */
+declare const useCookies: () => UseCookiesResult;
+export default useCookies;

package/hooks/useCookies.js

@@ -0,0 +1,33 @@
+import { useCallback as a } from "react";
+const u = () => typeof document > "u" ? {} : document.cookie.split(";").map((n) => n.trim()).filter(Boolean).reduce(
+  (n, o) => {
+    const s = o.indexOf("="), i = s >= 0 ? o.slice(0, s) : o, t = s >= 0 ? o.slice(s + 1) : "";
+    return n[decodeURIComponent(i)] = decodeURIComponent(t), n;
+  },
+  {}
+), f = () => {
+  const n = a((t, c, e = {}) => {
+    if (typeof document > "u")
+      return;
+    const r = [`${encodeURIComponent(t)}=${encodeURIComponent(c)}`, `path=${e.path ?? "/"}`];
+    if (e.domain && r.push(`domain=${e.domain}`), e.expires) {
+      const m = e.expires instanceof Date ? e.expires.toUTCString() : e.expires;
+      r.push(`expires=${m}`);
+    }
+    typeof e.maxAge == "number" && r.push(`max-age=${e.maxAge}`), e.sameSite && r.push(`samesite=${e.sameSite}`), e.secure && r.push("secure"), document.cookie = r.join("; ");
+  }, []), o = a(
+    (t, c = {}) => {
+      n(t, "", {
+        ...c,
+        expires: /* @__PURE__ */ new Date(0),
+        maxAge: 0
+      });
+    },
+    [n]
+  ), s = a((t) => Object.hasOwn(u(), t), []), i = a((t) => u()[t], []);
+  return { setCookie: n, deleteCookie: o, hasCookie: s, getCookie: i };
+};
+export {
+  f as default
+};
+//# sourceMappingURL=useCookies.js.map

package/hooks/useCookies.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCookies.js","sources":["../../src/hooks/useCookies.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nexport type CookieSameSite = 'Strict' | 'Lax' | 'None';\n\nexport type CookieOptions = {\n    /**\n     * Cookie path scope.\n     *\n     * @default '/'\n     */\n    path?: string;\n\n    /**\n     * Cookie domain scope (for example `.rio.cloud`).\n     */\n    domain?: string;\n\n    /**\n     * Absolute expiration date for the cookie.\n     */\n    expires?: Date | string;\n\n    /**\n     * Cookie lifetime in seconds.\n     */\n    maxAge?: number;\n\n    /**\n     * Cross-site cookie behavior.\n     *\n     * Possible values are:\n     *\n     * - `Strict`\n     * - `Lax`\n     * - `None`\n     */\n    sameSite?: CookieSameSite;\n\n    /**\n     * Adds the `Secure` flag so the cookie is sent over HTTPS only.\n     */\n    secure?: boolean;\n};\n\nexport type UseCookiesResult = {\n    /**\n     * Sets a cookie with optional metadata.\n     *\n     * @param name - Cookie name.\n     * @param value - Cookie value.\n     * @param options - Additional cookie options.\n     */\n    setCookie: (name: string, value: string, options?: CookieOptions) => void;\n\n    /**\n     * Deletes a cookie by name.\n     *\n     * @param name - Cookie name.\n     * @param options - Optional path/domain to target the correct cookie scope.\n     */\n    deleteCookie: (name: string, options?: Pick<CookieOptions, 'path' | 'domain'>) => void;\n\n    /**\n     * Returns true if the cookie exists.\n     *\n     * @param name - Cookie name.\n     */\n    hasCookie: (name: string) => boolean;\n\n    /**\n     * Reads a cookie value.\n     *\n     * @param name - Cookie name.\n     */\n    getCookie: (name: string) => string | undefined;\n};\n\nconst parseCookies = (): Record<string, string> => {\n    if (typeof document === 'undefined') {\n        return {};\n    }\n\n    return document.cookie\n        .split(';')\n        .map(entry => entry.trim())\n        .filter(Boolean)\n        .reduce(\n            (acc, entry) => {\n                const separatorIndex = entry.indexOf('=');\n                const rawName = separatorIndex >= 0 ? entry.slice(0, separatorIndex) : entry;\n                const rawValue = separatorIndex >= 0 ? entry.slice(separatorIndex + 1) : '';\n\n                acc[decodeURIComponent(rawName)] = decodeURIComponent(rawValue);\n                return acc;\n            },\n            {} as Record<string, string>\n        );\n};\n\n/**\n * Returns helpers to set, delete, and read browser cookies.\n *\n * @returns {UseCookiesResult} Cookie helper functions.\n *\n * @example\n * const { setCookie, deleteCookie, hasCookie, getCookie } = useCookies();\n *\n * setCookie('token', 'abc123', { path: '/', maxAge: 60 * 60 });\n * const isLoggedIn = hasCookie('token');\n * const token = getCookie('token');\n * deleteCookie('token');\n */\nconst useCookies = (): UseCookiesResult => {\n    const setCookie = useCallback((name: string, value: string, options: CookieOptions = {}) => {\n        if (typeof document === 'undefined') {\n            return;\n        }\n\n        const segments = [`${encodeURIComponent(name)}=${encodeURIComponent(value)}`, `path=${options.path ?? '/'}`];\n\n        if (options.domain) {\n            segments.push(`domain=${options.domain}`);\n        }\n\n        if (options.expires) {\n            const expires = options.expires instanceof Date ? options.expires.toUTCString() : options.expires;\n            segments.push(`expires=${expires}`);\n        }\n\n        if (typeof options.maxAge === 'number') {\n            segments.push(`max-age=${options.maxAge}`);\n        }\n\n        if (options.sameSite) {\n            segments.push(`samesite=${options.sameSite}`);\n        }\n\n        if (options.secure) {\n            segments.push('secure');\n        }\n\n        // biome-ignore lint/suspicious/noDocumentCookie: this hook intentionally manages cookies through the browser cookie API.\n        document.cookie = segments.join('; ');\n    }, []);\n\n    const deleteCookie = useCallback(\n        (name: string, options: Pick<CookieOptions, 'path' | 'domain'> = {}) => {\n            setCookie(name, '', {\n                ...options,\n                expires: new Date(0),\n                maxAge: 0,\n            });\n        },\n        [setCookie]\n    );\n\n    const hasCookie = useCallback((name: string) => {\n        return Object.hasOwn(parseCookies(), name);\n    }, []);\n\n    const getCookie = useCallback((name: string) => {\n        return parseCookies()[name];\n    }, []);\n\n    return { setCookie, deleteCookie, hasCookie, getCookie };\n};\n\nexport default useCookies;\n"],"names":["parseCookies","entry","acc","separatorIndex","rawName","rawValue","useCookies","setCookie","useCallback","name","value","options","segments","expires","deleteCookie","hasCookie","getCookie"],"mappings":";AA6EA,MAAMA,IAAe,MACb,OAAO,WAAa,MACb,CAAA,IAGJ,SAAS,OACX,MAAM,GAAG,EACT,IAAI,CAAAC,MAASA,EAAM,KAAA,CAAM,EACzB,OAAO,OAAO,EACd;AAAA,EACG,CAACC,GAAKD,MAAU;AACZ,UAAME,IAAiBF,EAAM,QAAQ,GAAG,GAClCG,IAAUD,KAAkB,IAAIF,EAAM,MAAM,GAAGE,CAAc,IAAIF,GACjEI,IAAWF,KAAkB,IAAIF,EAAM,MAAME,IAAiB,CAAC,IAAI;AAEzE,WAAAD,EAAI,mBAAmBE,CAAO,CAAC,IAAI,mBAAmBC,CAAQ,GACvDH;AAAA,EACX;AAAA,EACA,CAAA;AAAC,GAiBPI,IAAa,MAAwB;AACvC,QAAMC,IAAYC,EAAY,CAACC,GAAcC,GAAeC,IAAyB,OAAO;AACxF,QAAI,OAAO,WAAa;AACpB;AAGJ,UAAMC,IAAW,CAAC,GAAG,mBAAmBH,CAAI,CAAC,IAAI,mBAAmBC,CAAK,CAAC,IAAI,QAAQC,EAAQ,QAAQ,GAAG,EAAE;AAM3G,QAJIA,EAAQ,UACRC,EAAS,KAAK,UAAUD,EAAQ,MAAM,EAAE,GAGxCA,EAAQ,SAAS;AACjB,YAAME,IAAUF,EAAQ,mBAAmB,OAAOA,EAAQ,QAAQ,gBAAgBA,EAAQ;AAC1F,MAAAC,EAAS,KAAK,WAAWC,CAAO,EAAE;AAAA,IACtC;AAEA,IAAI,OAAOF,EAAQ,UAAW,YAC1BC,EAAS,KAAK,WAAWD,EAAQ,MAAM,EAAE,GAGzCA,EAAQ,YACRC,EAAS,KAAK,YAAYD,EAAQ,QAAQ,EAAE,GAG5CA,EAAQ,UACRC,EAAS,KAAK,QAAQ,GAI1B,SAAS,SAASA,EAAS,KAAK,IAAI;AAAA,EACxC,GAAG,CAAA,CAAE,GAECE,IAAeN;AAAA,IACjB,CAACC,GAAcE,IAAkD,OAAO;AACpE,MAAAJ,EAAUE,GAAM,IAAI;AAAA,QAChB,GAAGE;AAAA,QACH,SAAS,oBAAI,KAAK,CAAC;AAAA,QACnB,QAAQ;AAAA,MAAA,CACX;AAAA,IACL;AAAA,IACA,CAACJ,CAAS;AAAA,EAAA,GAGRQ,IAAYP,EAAY,CAACC,MACpB,OAAO,OAAOT,EAAA,GAAgBS,CAAI,GAC1C,CAAA,CAAE,GAECO,IAAYR,EAAY,CAACC,MACpBT,EAAA,EAAeS,CAAI,GAC3B,CAAA,CAAE;AAEL,SAAO,EAAE,WAAAF,GAAW,cAAAO,GAAc,WAAAC,GAAW,WAAAC,EAAA;AACjD;"}

package/hooks/useInterval.js

@@ -1,12 +1,12 @@
-import { useRef as u, useEffect as o } from "react";
+import { useRef as u, useEffect as s } from "react";
 const f = (e, r) => {
   const t = u(null), n = u(e);
-  return o(() => {
+  return s(() => {
     n.current = e;
-  }, [e]), o(() => {
-    const s = () => n.current();
+  }, [e]), s(() => {
+    const o = () => n.current();
     if (typeof r == "number")
-      return t.current = window.setInterval(s, r), () => window.clearInterval(t.current ?? void 0);
+      return t.current = setInterval(o, r), () => clearInterval(t.current ?? void 0);
   }, [r]), t;
 };
 export {

package/hooks/useInterval.js.map

@@ -1 +1 @@
-{"version":3,"file":"useInterval.js","sources":["../../src/hooks/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n// See https://overreacted.io/making-setinterval-declarative-with-react-hooks/\n\n/**\n * Custom hook to execute a callback function at specified intervals.\n *\n * @param callback - The callback function to be executed.\n * @param delay - The interval duration in milliseconds. Set to null to stop the interval.\n *\n * @returns A mutable ref object that holds the interval ID.\n */\nconst useInterval = (callback: () => void, delay: number | null): React.MutableRefObject<number | null> => {\n    const intervalRef = useRef<number | null>(null);\n    const savedCallback = useRef<() => void>(callback);\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    useEffect(() => {\n        const tick = () => savedCallback.current();\n\n        if (typeof delay === 'number') {\n            intervalRef.current = window.setInterval(tick, delay);\n            return () => window.clearInterval(intervalRef.current ?? undefined);\n        }\n    }, [delay]);\n\n    return intervalRef;\n};\n\nexport default useInterval;\n"],"names":["useInterval","callback","delay","intervalRef","useRef","savedCallback","useEffect","tick"],"mappings":";AAYA,MAAMA,IAAc,CAACC,GAAsBC,MAAgE;AACvG,QAAMC,IAAcC,EAAsB,IAAI,GACxCC,IAAgBD,EAAmBH,CAAQ;AAEjD,SAAAK,EAAU,MAAM;AACZ,IAAAD,EAAc,UAAUJ;AAAA,EAC5B,GAAG,CAACA,CAAQ,CAAC,GAEbK,EAAU,MAAM;AACZ,UAAMC,IAAO,MAAMF,EAAc,QAAA;AAEjC,QAAI,OAAOH,KAAU;AACjB,aAAAC,EAAY,UAAU,OAAO,YAAYI,GAAML,CAAK,GAC7C,MAAM,OAAO,cAAcC,EAAY,WAAW,MAAS;AAAA,EAE1E,GAAG,CAACD,CAAK,CAAC,GAEHC;AACX;"}
+{"version":3,"file":"useInterval.js","sources":["../../src/hooks/useInterval.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n// See https://overreacted.io/making-setinterval-declarative-with-react-hooks/\n\n/**\n * Custom hook to execute a callback function at specified intervals.\n *\n * @param callback - The callback function to be executed.\n * @param delay - The interval duration in milliseconds. Set to null to stop the interval.\n *\n * @returns A mutable ref object that holds the interval ID.\n */\nconst useInterval = (callback: () => void, delay: number | null): React.MutableRefObject<number | null> => {\n    const intervalRef = useRef<number | null>(null);\n    const savedCallback = useRef<() => void>(callback);\n\n    useEffect(() => {\n        savedCallback.current = callback;\n    }, [callback]);\n\n    useEffect(() => {\n        const tick = () => savedCallback.current();\n\n        if (typeof delay === 'number') {\n            intervalRef.current = setInterval(tick, delay) as unknown as number;\n            return () => clearInterval(intervalRef.current ?? undefined);\n        }\n    }, [delay]);\n\n    return intervalRef;\n};\n\nexport default useInterval;\n"],"names":["useInterval","callback","delay","intervalRef","useRef","savedCallback","useEffect","tick"],"mappings":";AAYA,MAAMA,IAAc,CAACC,GAAsBC,MAAgE;AACvG,QAAMC,IAAcC,EAAsB,IAAI,GACxCC,IAAgBD,EAAmBH,CAAQ;AAEjD,SAAAK,EAAU,MAAM;AACZ,IAAAD,EAAc,UAAUJ;AAAA,EAC5B,GAAG,CAACA,CAAQ,CAAC,GAEbK,EAAU,MAAM;AACZ,UAAMC,IAAO,MAAMF,EAAc,QAAA;AAEjC,QAAI,OAAOH,KAAU;AACjB,aAAAC,EAAY,UAAU,YAAYI,GAAML,CAAK,GACtC,MAAM,cAAcC,EAAY,WAAW,MAAS;AAAA,EAEnE,GAAG,CAACD,CAAK,CAAC,GAEHC;AACX;"}

package/hooks/useIsFocusWithin.js

@@ -1,5 +1,5 @@
 import { useRef as a, useState as E, useEffect as I } from "react";
-const F = ({
+const L = ({
   ref: d,
   onFocusWithin: u = () => {
   },
@@ -17,7 +17,7 @@ const F = ({
     const f = () => {
       s(), r || (i(!0), u());
     }, l = (v) => {
-      s(), t.current = window.setTimeout(() => {
+      s(), t.current = setTimeout(() => {
         e.contains(v.relatedTarget) || (i(!1), o()), t.current = null;
       }, c);
     };
@@ -30,6 +30,6 @@ const F = ({
   };
 };
 export {
-  F as default
+  L as default
 };
 //# sourceMappingURL=useIsFocusWithin.js.map

package/hooks/useIsFocusWithin.js.map

@@ -1 +1 @@
-{"version":3,"file":"useIsFocusWithin.js","sources":["../../src/hooks/useIsFocusWithin.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\ntype UseIsFocusWithinOptions<T extends HTMLElement> = {\n    /**\n     * Optional external ref to the DOM element to track.\n     * If not provided, the hook will return its own internal ref.\n     */\n    ref?: React.RefObject<T>;\n\n    /**\n     * Optional callback triggered when focus enters the element or its children.\n     */\n    onFocusWithin?: () => void;\n\n    /**\n     * Optional callback triggered when focus leaves the element and all its children.\n     */\n    onBlurWithin?: () => void;\n\n    /**\n     * Optional delay (in ms) before calling onBlurWithin.\n     * Useful when focus might quickly shift between internal elements.\n     * @default 0\n     */\n    delay?: number;\n};\n\n/**\n * React hook that tracks whether focus is currently within a given element or its children.\n * Provides a boolean state and a ref to attach to the tracked element.\n *\n * @param options Hook configuration including external ref, callbacks, and optional delay.\n * @returns An object containing the ref and whether focus is currently within the element.\n */\nconst useIsFocusWithin = <T extends HTMLElement>({\n    ref: externalRef,\n    onFocusWithin = () => {},\n    onBlurWithin = () => {},\n    delay = 0,\n}: UseIsFocusWithinOptions<T> = {}) => {\n    const internalRef = useRef<T>(null);\n    const targetRef = externalRef ?? internalRef;\n\n    const [isFocusedWithin, setIsFocusedWithin] = useState(false);\n    const timeoutId = useRef<number | null>(null);\n\n    const clearTimeoutIfAny = () => {\n        if (timeoutId.current !== null) {\n            window.clearTimeout(timeoutId.current);\n            timeoutId.current = null;\n        }\n    };\n\n    useEffect(() => {\n        const node = targetRef.current;\n        if (!node) {\n            return;\n        }\n\n        const handleFocusIn = () => {\n            clearTimeoutIfAny();\n            if (!isFocusedWithin) {\n                setIsFocusedWithin(true);\n                onFocusWithin();\n            }\n        };\n\n        const handleFocusOut = (e: FocusEvent) => {\n            clearTimeoutIfAny();\n            timeoutId.current = window.setTimeout(() => {\n                if (!node.contains(e.relatedTarget as Node)) {\n                    setIsFocusedWithin(false);\n                    onBlurWithin();\n                }\n                timeoutId.current = null;\n            }, delay);\n        };\n\n        node.addEventListener('focusin', handleFocusIn);\n        node.addEventListener('focusout', handleFocusOut);\n\n        return () => {\n            node.removeEventListener('focusin', handleFocusIn);\n            node.removeEventListener('focusout', handleFocusOut);\n            clearTimeoutIfAny();\n        };\n    }, [targetRef, delay, onFocusWithin, onBlurWithin, isFocusedWithin]);\n\n    return {\n        ref: targetRef,\n        isFocusedWithin,\n    };\n};\n\nexport default useIsFocusWithin;\n"],"names":["useIsFocusWithin","externalRef","onFocusWithin","onBlurWithin","delay","internalRef","useRef","targetRef","isFocusedWithin","setIsFocusedWithin","useState","timeoutId","clearTimeoutIfAny","useEffect","node","handleFocusIn","handleFocusOut","e"],"mappings":";AAkCA,MAAMA,IAAmB,CAAwB;AAAA,EAC7C,KAAKC;AAAA,EACL,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAAC,IAAe,MAAM;AAAA,EAAC;AAAA,EACtB,OAAAC,IAAQ;AACZ,IAAgC,OAAO;AACnC,QAAMC,IAAcC,EAAU,IAAI,GAC5BC,IAAYN,KAAeI,GAE3B,CAACG,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GACtDC,IAAYL,EAAsB,IAAI,GAEtCM,IAAoB,MAAM;AAC5B,IAAID,EAAU,YAAY,SACtB,OAAO,aAAaA,EAAU,OAAO,GACrCA,EAAU,UAAU;AAAA,EAE5B;AAEA,SAAAE,EAAU,MAAM;AACZ,UAAMC,IAAOP,EAAU;AACvB,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAgB,MAAM;AACxB,MAAAH,EAAA,GACKJ,MACDC,EAAmB,EAAI,GACvBP,EAAA;AAAA,IAER,GAEMc,IAAiB,CAACC,MAAkB;AACtC,MAAAL,EAAA,GACAD,EAAU,UAAU,OAAO,WAAW,MAAM;AACxC,QAAKG,EAAK,SAASG,EAAE,aAAqB,MACtCR,EAAmB,EAAK,GACxBN,EAAA,IAEJQ,EAAU,UAAU;AAAA,MACxB,GAAGP,CAAK;AAAA,IACZ;AAEA,WAAAU,EAAK,iBAAiB,WAAWC,CAAa,GAC9CD,EAAK,iBAAiB,YAAYE,CAAc,GAEzC,MAAM;AACT,MAAAF,EAAK,oBAAoB,WAAWC,CAAa,GACjDD,EAAK,oBAAoB,YAAYE,CAAc,GACnDJ,EAAA;AAAA,IACJ;AAAA,EACJ,GAAG,CAACL,GAAWH,GAAOF,GAAeC,GAAcK,CAAe,CAAC,GAE5D;AAAA,IACH,KAAKD;AAAA,IACL,iBAAAC;AAAA,EAAA;AAER;"}
+{"version":3,"file":"useIsFocusWithin.js","sources":["../../src/hooks/useIsFocusWithin.ts"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\n\ntype UseIsFocusWithinOptions<T extends HTMLElement> = {\n    /**\n     * Optional external ref to the DOM element to track.\n     * If not provided, the hook will return its own internal ref.\n     */\n    ref?: React.RefObject<T>;\n\n    /**\n     * Optional callback triggered when focus enters the element or its children.\n     */\n    onFocusWithin?: () => void;\n\n    /**\n     * Optional callback triggered when focus leaves the element and all its children.\n     */\n    onBlurWithin?: () => void;\n\n    /**\n     * Optional delay (in ms) before calling onBlurWithin.\n     * Useful when focus might quickly shift between internal elements.\n     * @default 0\n     */\n    delay?: number;\n};\n\n/**\n * React hook that tracks whether focus is currently within a given element or its children.\n * Provides a boolean state and a ref to attach to the tracked element.\n *\n * @param options Hook configuration including external ref, callbacks, and optional delay.\n * @returns An object containing the ref and whether focus is currently within the element.\n */\nconst useIsFocusWithin = <T extends HTMLElement>({\n    ref: externalRef,\n    onFocusWithin = () => {},\n    onBlurWithin = () => {},\n    delay = 0,\n}: UseIsFocusWithinOptions<T> = {}) => {\n    const internalRef = useRef<T>(null);\n    const targetRef = externalRef ?? internalRef;\n\n    const [isFocusedWithin, setIsFocusedWithin] = useState(false);\n    const timeoutId = useRef<number | null>(null);\n\n    const clearTimeoutIfAny = () => {\n        if (timeoutId.current !== null) {\n            window.clearTimeout(timeoutId.current);\n            timeoutId.current = null;\n        }\n    };\n\n    useEffect(() => {\n        const node = targetRef.current;\n        if (!node) {\n            return;\n        }\n\n        const handleFocusIn = () => {\n            clearTimeoutIfAny();\n            if (!isFocusedWithin) {\n                setIsFocusedWithin(true);\n                onFocusWithin();\n            }\n        };\n\n        const handleFocusOut = (e: FocusEvent) => {\n            clearTimeoutIfAny();\n            timeoutId.current = setTimeout(() => {\n                if (!node.contains(e.relatedTarget as Node)) {\n                    setIsFocusedWithin(false);\n                    onBlurWithin();\n                }\n                timeoutId.current = null;\n            }, delay) as unknown as number;\n        };\n\n        node.addEventListener('focusin', handleFocusIn);\n        node.addEventListener('focusout', handleFocusOut);\n\n        return () => {\n            node.removeEventListener('focusin', handleFocusIn);\n            node.removeEventListener('focusout', handleFocusOut);\n            clearTimeoutIfAny();\n        };\n    }, [targetRef, delay, onFocusWithin, onBlurWithin, isFocusedWithin]);\n\n    return {\n        ref: targetRef,\n        isFocusedWithin,\n    };\n};\n\nexport default useIsFocusWithin;\n"],"names":["useIsFocusWithin","externalRef","onFocusWithin","onBlurWithin","delay","internalRef","useRef","targetRef","isFocusedWithin","setIsFocusedWithin","useState","timeoutId","clearTimeoutIfAny","useEffect","node","handleFocusIn","handleFocusOut","e"],"mappings":";AAkCA,MAAMA,IAAmB,CAAwB;AAAA,EAC7C,KAAKC;AAAA,EACL,eAAAC,IAAgB,MAAM;AAAA,EAAC;AAAA,EACvB,cAAAC,IAAe,MAAM;AAAA,EAAC;AAAA,EACtB,OAAAC,IAAQ;AACZ,IAAgC,OAAO;AACnC,QAAMC,IAAcC,EAAU,IAAI,GAC5BC,IAAYN,KAAeI,GAE3B,CAACG,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GACtDC,IAAYL,EAAsB,IAAI,GAEtCM,IAAoB,MAAM;AAC5B,IAAID,EAAU,YAAY,SACtB,OAAO,aAAaA,EAAU,OAAO,GACrCA,EAAU,UAAU;AAAA,EAE5B;AAEA,SAAAE,EAAU,MAAM;AACZ,UAAMC,IAAOP,EAAU;AACvB,QAAI,CAACO;AACD;AAGJ,UAAMC,IAAgB,MAAM;AACxB,MAAAH,EAAA,GACKJ,MACDC,EAAmB,EAAI,GACvBP,EAAA;AAAA,IAER,GAEMc,IAAiB,CAACC,MAAkB;AACtC,MAAAL,EAAA,GACAD,EAAU,UAAU,WAAW,MAAM;AACjC,QAAKG,EAAK,SAASG,EAAE,aAAqB,MACtCR,EAAmB,EAAK,GACxBN,EAAA,IAEJQ,EAAU,UAAU;AAAA,MACxB,GAAGP,CAAK;AAAA,IACZ;AAEA,WAAAU,EAAK,iBAAiB,WAAWC,CAAa,GAC9CD,EAAK,iBAAiB,YAAYE,CAAc,GAEzC,MAAM;AACT,MAAAF,EAAK,oBAAoB,WAAWC,CAAa,GACjDD,EAAK,oBAAoB,YAAYE,CAAc,GACnDJ,EAAA;AAAA,IACJ;AAAA,EACJ,GAAG,CAACL,GAAWH,GAAOF,GAAeC,GAAcK,CAAe,CAAC,GAE5D;AAAA,IACH,KAAKD;AAAA,IACL,iBAAAC;AAAA,EAAA;AAER;"}

package/hooks/useLatest.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Keeps a mutable ref in sync with the latest value from the current render.
+ *
+ * Useful when an effect or callback must always access the newest value
+ * without adding that value to a dependency array and re-triggering logic.
+ *
+ * Common use cases:
+ * - Access latest callback props inside long-lived effects/listeners
+ * - Avoid stale closures in timers, subscriptions, and event handlers
+ *
+ * @typeParam TValue - The value type to keep up to date.
+ * @param value - Current value from render scope.
+ * @returns A ref whose `.current` always points to the latest value.
+ */
+declare const useLatest: <TValue>(value: TValue) => React.MutableRefObject<TValue>;
+export default useLatest;

package/hooks/useLatest.js

@@ -0,0 +1,11 @@
+import { useRef as r, useEffect as s } from "react";
+const o = (t) => {
+  const e = r(t);
+  return s(() => {
+    e.current = t;
+  }, [t]), e;
+};
+export {
+  o as default
+};
+//# sourceMappingURL=useLatest.js.map

package/hooks/useLatest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useLatest.js","sources":["../../src/hooks/useLatest.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\n/**\n * Keeps a mutable ref in sync with the latest value from the current render.\n *\n * Useful when an effect or callback must always access the newest value\n * without adding that value to a dependency array and re-triggering logic.\n *\n * Common use cases:\n * - Access latest callback props inside long-lived effects/listeners\n * - Avoid stale closures in timers, subscriptions, and event handlers\n *\n * @typeParam TValue - The value type to keep up to date.\n * @param value - Current value from render scope.\n * @returns A ref whose `.current` always points to the latest value.\n */\nconst useLatest = <TValue>(value: TValue): React.MutableRefObject<TValue> => {\n    const ref = useRef(value);\n\n    useEffect(() => {\n        ref.current = value;\n    }, [value]);\n\n    return ref;\n};\n\nexport default useLatest;\n"],"names":["useLatest","value","ref","useRef","useEffect"],"mappings":";AAgBA,MAAMA,IAAY,CAASC,MAAkD;AACzE,QAAMC,IAAMC,EAAOF,CAAK;AAExB,SAAAG,EAAU,MAAM;AACZ,IAAAF,EAAI,UAAUD;AAAA,EAClB,GAAG,CAACA,CAAK,CAAC,GAEHC;AACX;"}

package/hooks/usePostMessage.d.ts

@@ -23,7 +23,8 @@ export type RemoteAction = {
  *
  * @param messagePrefix a custom prefix to limit the event listener for these events
  * @param onReceiveMessage a callback function triggered when a message is received
- * @returns
+ * @deprecated Please use the {@link import('./useIncomingPostMessages')#default useIncomingPostMessages} and/or
+ * {@link import('./usePostMessageSender')#default usePostMessageSender} hooks instead.
  */
 declare const usePostMessage: (messagePrefix: string, onReceiveMessage?: (eventData: any) => void) => {
     sendMessageToParent: (message: RemoteAction) => void;