@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/tooltip/SimpleTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleTooltip.js","sources":["../../../src/components/tooltip/SimpleTooltip.tsx"],"sourcesContent":["import React, { type MutableRefObject, type PropsWithChildren } from 'react';\n\nimport Tooltip, { type TooltipProps } from './Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\n\nexport type delayProp = {\n    show: number;\n    hide: number;\n};\n\nexport type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {\n    /**\n     * The tooltip content.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility.\n     * Possible values are: `hover`, `click`, `focus`\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * The react ref object assigned to the target of the tooltip.\n     */\n    targetRef?: MutableRefObject<HTMLDivElement>;\n\n    /**\n     * A millisecond delay amount to show the Overlay once triggered.\n     * If passed an Object, you can control the show and hide timeouts individually.\n     */\n    delay?: number | delayProp;\n\n    /**\n     * A Popper.js config object passed to the the underlying popper instance.\n     */\n    popperConfig?: object;\n};\n\nconst SimpleTooltip = (props: PropsWithChildren<SimpleTooltipProps>) => {\n    const {\n        children,\n        placement = PLACEMENT.AUTO,\n        trigger,\n        content,\n        delay,\n        popperConfig,\n        targetRef,\n        ...remainingProps\n    } = props;\n\n    return (\n        <OverlayTrigger\n            placement={placement}\n            trigger={trigger}\n            overlay={\n                <Tooltip {...remainingProps} ref={targetRef}>\n                    {content}\n                </Tooltip>\n            }\n            delay={delay}\n            popperConfig={popperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n};\n\nSimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;\nSimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;\nSimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\nexport default SimpleTooltip;\n"],"names":["SimpleTooltip","props","children","placement","PLACEMENT","trigger","content","delay","popperConfig","targetRef","remainingProps","jsx","OverlayTrigger","Tooltip","TRIGGER"],"mappings":";;;;;AA0CA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC,IAAYC,EAAU;AAAA,IACtB,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,SACI,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAAT;AAAA,MACA,SAAAE;AAAA,MACA,SACI,gBAAAM,EAACE,GAAA,EAAS,GAAGH,GAAgB,KAAKD,GAC7B,UAAAH,GACL;AAAA,MAEJ,OAAAC;AAAA,MACA,cAAAC;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAF,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;"}
+{"version":3,"file":"SimpleTooltip.js","sources":["../../../src/components/tooltip/SimpleTooltip.tsx"],"sourcesContent":["import type { MutableRefObject, PropsWithChildren } from 'react';\n\nimport Tooltip, { type TooltipProps } from './Tooltip';\nimport OverlayTrigger from '../overlay/OverlayTrigger';\nimport { PLACEMENT } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\n\nexport type DelayProp = {\n    /**\n     * A millisecond delay amount before showing the Overlay once triggered.\n     */\n    show: number;\n\n    /**\n     * A millisecond delay amount before hiding the Overlay once triggered.\n     */\n    hide: number;\n};\n\nexport type SimpleTooltipProps = Omit<TooltipProps, 'content'> & {\n    /**\n     * The tooltip content.\n     */\n    content: string | React.ReactNode;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility.\n     *\n     * Possible values are:\n     *\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * The react ref object assigned to the target of the tooltip.\n     */\n    targetRef?: MutableRefObject<HTMLDivElement>;\n\n    /**\n     * A millisecond delay amount to show the Overlay once triggered.\n     * If passed an Object, you can control the show and hide timeouts individually.\n     *\n     * @example\n     * {\n     *     show: 1_000,\n     *     delay: 500,\n     * }\n     */\n    delay?: number | DelayProp;\n\n    /**\n     * A Popper.js config object passed to the the underlying popper instance.\n     */\n    popperConfig?: object;\n};\n\nconst SimpleTooltip = (props: PropsWithChildren<SimpleTooltipProps>) => {\n    const {\n        children,\n        placement = PLACEMENT.AUTO,\n        trigger,\n        content,\n        delay,\n        popperConfig,\n        targetRef,\n        ...remainingProps\n    } = props;\n\n    return (\n        <OverlayTrigger\n            placement={placement}\n            trigger={trigger}\n            overlay={\n                <Tooltip {...remainingProps} ref={targetRef}>\n                    {content}\n                </Tooltip>\n            }\n            delay={delay}\n            popperConfig={popperConfig}\n        >\n            {children}\n        </OverlayTrigger>\n    );\n};\n\nSimpleTooltip.TRIGGER_CLICK = TRIGGER.CLICK;\nSimpleTooltip.TRIGGER_HOVER = TRIGGER.HOVER;\nSimpleTooltip.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\nexport default SimpleTooltip;\n"],"names":["SimpleTooltip","props","children","placement","PLACEMENT","trigger","content","delay","popperConfig","targetRef","remainingProps","jsx","OverlayTrigger","Tooltip","TRIGGER"],"mappings":";;;;;AA6DA,MAAMA,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,UAAAC;AAAA,IACA,WAAAC,IAAYC,EAAU;AAAA,IACtB,SAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT;AAEJ,SACI,gBAAAU;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAAT;AAAA,MACA,SAAAE;AAAA,MACA,SACI,gBAAAM,EAACE,GAAA,EAAS,GAAGH,GAAgB,KAAKD,GAC7B,UAAAH,GACL;AAAA,MAEJ,OAAAC;AAAA,MACA,cAAAC;AAAA,MAEC,UAAAN;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAF,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;AACtCd,EAAc,gBAAgBc,EAAQ;"}

package/components/tooltip/Tooltip.d.ts

@@ -21,28 +21,48 @@ export type TooltipProps = {
     /**
      * Sets the direction the Tooltip is positioned towards. This is generally provided by the
      * OverlayTrigger component positioning the tooltip.
+     *
      * @default 'bottom'
      */
     placement?: ObjectValues<typeof PLACEMENT>;
     /**
      * Defines the position of the text content.
-     * Possible values are: `"center"` | `"left"` | `"right"`
+     *
+     * Possible values are:
+     *
+     * - `'center'`
+     * - `'left'`
+     * - `'right'`
+     *
      * @default 'center'
      */
     textAlignment?: ObjectValues<typeof TEXT_ALIGNMENT>;
     /**
      * Defines the look of the tooltip.
      * Possible values are: `default` and `onboarding`
+     *
      * @default 'default'
      */
     tooltipStyle?: ObjectValues<typeof STYLE_MAP>;
     /**
      * Defines the width of 'the tooltip.
-     * Possible values are: 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500
+     * Possible values are:
+     *
+     * - `'auto'`
+     * - `100`
+     * - `150`
+     * - `200`
+     * - `250`
+     * - `300`
+     * - `350`
+     * - `400`
+     * - `450`
+     * - `500`
      */
     width?: TooltipWidth;
     /**
      * Render Tooltips on mobile devices.
+     *
      * @default false
      */
     allowOnTouch?: boolean;

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     * @default 'bottom'\n     */\n    placement?: ObjectValues<typeof PLACEMENT>;\n\n    /**\n     * Defines the position of the text content.\n     * Possible values are: `\"center\"` | `\"left\"` | `\"right\"`\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     * @default 'default'\n     */\n    tooltipStyle?: ObjectValues<typeof STYLE_MAP>;\n\n    /**\n     * Defines the width of 'the tooltip.\n     * Possible values are: 'auto' | 100 | 150 | 200 | 250 | 300 | 350 | 400 | 450 | 500\n     */\n    width?: TooltipWidth;\n\n    /**\n     * Render Tooltips on mobile devices.\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,GAqEMC,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.d.ts

@@ -8,15 +8,20 @@ export type ResponsiveVideoProps = {
     src: string;
     /**
      * Defined the aspect ratio of the video.
-     * @default `16by9`
      *
      * Possible values are:
-     * `ResponsiveVideo.ASPECT_RATIO_4_BY_3`, `ResponsiveVideo.ASPECT_RATIO_16_BY_9` or
-     * `4by3`, `16by9`.
+     *
+     * - `ResponsiveVideo.ASPECT_RATIO_4_BY_3`
+     * - `ResponsiveVideo.ASPECT_RATIO_16_BY_9`
+     * - `'4by3'`
+     * - `'16by9'`
+     *
+     * @default '16by9'
      */
     aspectRatio: '4by3' | '16by9';
     /**
      * Allows the fullscreen feature of the underlying embedded iframe.
+     *
      * @default true
      */
     allowFullScreen?: boolean;

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     * @default `16by9`\n     *\n     * Possible values are:\n     * `ResponsiveVideo.ASPECT_RATIO_4_BY_3`, `ResponsiveVideo.ASPECT_RATIO_16_BY_9` or\n     * `4by3`, `16by9`.\n     */\n    aspectRatio: '4by3' | '16by9';\n\n    /**\n     * Allows the fullscreen feature of the underlying embedded iframe.\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,SAgClBC,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/useKey.d.ts

@@ -9,5 +9,5 @@ type KeyboardEventType = 'keyup' | 'keydown' | 'keypress';
  *                                         If the first argument is a callback, this is the node (defaults to document).
  * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).
  */
-declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: (event: KeyboardEvent) => void | KeyboardEventType[], eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
+declare const useKey: (keyOrCallback: string | ((event: KeyboardEvent) => void), callbackOrEventTypes?: ((event: KeyboardEvent) => void) | KeyboardEventType[], eventTypesOrNode?: KeyboardEventType[] | Document, node?: Document | HTMLElement) => void;
 export default useKey;

package/hooks/useKey.js.map

@@ -1 +1 @@
-{"version":3,"file":"useKey.js","sources":["../../src/hooks/useKey.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype KeyboardEventType = 'keyup' | 'keydown' | 'keypress';\n\n/**\n * Custom hook to handle keyboard events.\n *\n * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.\n * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.\n *                               If the first argument is a callback, this is an optional array of event types.\n * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.\n *                                         If the first argument is a callback, this is the node (defaults to document).\n * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).\n */\nconst useKey = (\n    keyOrCallback: string | ((event: KeyboardEvent) => void),\n    callbackOrEventTypes?: (event: KeyboardEvent) => void | KeyboardEventType[],\n    eventTypesOrNode: KeyboardEventType[] | Document = ['keydown'],\n    node: Document | HTMLElement = document\n) => {\n    const callbacksRef = useRef<((event: KeyboardEvent) => void)[]>([]);\n\n    useEffect(() => {\n        const isKeyMode = typeof keyOrCallback === 'string';\n\n        const callback = isKeyMode\n            ? (callbackOrEventTypes as (event: KeyboardEvent) => void)\n            : (keyOrCallback as (event: KeyboardEvent) => void);\n\n        const keyHandler = (event: KeyboardEvent) => {\n            if (isKeyMode) {\n                if (event.key === keyOrCallback) {\n                    callback(event);\n                }\n            } else {\n                callback(event);\n            }\n        };\n\n        // Register the keyHandler\n        callbacksRef.current.push(keyHandler);\n\n        const genericHandler = (event: KeyboardEvent) => {\n            for (const callBecky of callbacksRef.current) {\n                callBecky(event);\n            }\n        };\n\n        const eventTypes = Array.isArray(eventTypesOrNode) ? (eventTypesOrNode as KeyboardEventType[]) : ['keydown'];\n\n        for (const eventType of eventTypes) {\n            node.addEventListener(eventType, genericHandler as EventListener);\n        }\n\n        return () => {\n            for (const eventType of eventTypes) {\n                node.removeEventListener(eventType, genericHandler as EventListener);\n            }\n            // Clean up callback reference\n            callbacksRef.current = callbacksRef.current.filter(singleCallback => singleCallback !== keyHandler);\n        };\n    }, [keyOrCallback, callbackOrEventTypes, eventTypesOrNode, node]);\n};\n\nexport default useKey;\n"],"names":["useKey","keyOrCallback","callbackOrEventTypes","eventTypesOrNode","node","callbacksRef","useRef","useEffect","isKeyMode","callback","keyHandler","event","genericHandler","callBecky","eventTypes","eventType","singleCallback"],"mappings":";AAcA,MAAMA,IAAS,CACXC,GACAC,GACAC,IAAmD,CAAC,SAAS,GAC7DC,IAA+B,aAC9B;AACD,QAAMC,IAAeC,EAA2C,EAAE;AAElE,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAY,OAAOP,KAAkB,UAErCQ,IAAWD,IACVN,IACAD,GAEDS,IAAa,CAACC,MAAyB;AACzC,MAAIH,IACIG,EAAM,QAAQV,KACdQ,EAASE,CAAK,IAGlBF,EAASE,CAAK;AAAA,IAEtB;AAGA,IAAAN,EAAa,QAAQ,KAAKK,CAAU;AAEpC,UAAME,IAAiB,CAACD,MAAyB;AAC7C,iBAAWE,KAAaR,EAAa;AACjC,QAAAQ,EAAUF,CAAK;AAAA,IAEvB,GAEMG,IAAa,MAAM,QAAQX,CAAgB,IAAKA,IAA2C,CAAC,SAAS;AAE3G,eAAWY,KAAaD;AACpB,MAAAV,EAAK,iBAAiBW,GAAWH,CAA+B;AAGpE,WAAO,MAAM;AACT,iBAAWG,KAAaD;AACpB,QAAAV,EAAK,oBAAoBW,GAAWH,CAA+B;AAGvE,MAAAP,EAAa,UAAUA,EAAa,QAAQ,OAAO,CAAAW,MAAkBA,MAAmBN,CAAU;AAAA,IACtG;AAAA,EACJ,GAAG,CAACT,GAAeC,GAAsBC,GAAkBC,CAAI,CAAC;AACpE;"}
+{"version":3,"file":"useKey.js","sources":["../../src/hooks/useKey.ts"],"sourcesContent":["import { useEffect, useRef } from 'react';\n\ntype KeyboardEventType = 'keyup' | 'keydown' | 'keypress';\n\n/**\n * Custom hook to handle keyboard events.\n *\n * @param keyOrCallback - Either a key string (e.g., 'Enter') or a callback function.\n * @param callbackOrEventTypes - If the first argument is a key, this should be the callback function.\n *                               If the first argument is a callback, this is an optional array of event types.\n * @param [eventTypesOrNode=['keydown']] - If the first argument is a key, this should be an array of event types.\n *                                         If the first argument is a callback, this is the node (defaults to document).\n * @param [node=document] - Optional DOM node to attach the event listener to (defaults to document).\n */\nconst useKey = (\n    keyOrCallback: string | ((event: KeyboardEvent) => void),\n    callbackOrEventTypes?: ((event: KeyboardEvent) => void) | KeyboardEventType[],\n    eventTypesOrNode: KeyboardEventType[] | Document = ['keydown'],\n    node: Document | HTMLElement = document\n) => {\n    const callbacksRef = useRef<((event: KeyboardEvent) => void)[]>([]);\n\n    useEffect(() => {\n        const isKeyMode = typeof keyOrCallback === 'string';\n\n        const callback = isKeyMode\n            ? (callbackOrEventTypes as (event: KeyboardEvent) => void)\n            : (keyOrCallback as (event: KeyboardEvent) => void);\n\n        const keyHandler = (event: KeyboardEvent) => {\n            if (isKeyMode) {\n                if (event.key === keyOrCallback) {\n                    callback(event);\n                }\n            } else {\n                callback(event);\n            }\n        };\n\n        // Register the keyHandler\n        callbacksRef.current.push(keyHandler);\n\n        const genericHandler = (event: KeyboardEvent) => {\n            for (const callBecky of callbacksRef.current) {\n                callBecky(event);\n            }\n        };\n\n        const eventTypes = Array.isArray(eventTypesOrNode) ? (eventTypesOrNode as KeyboardEventType[]) : ['keydown'];\n\n        for (const eventType of eventTypes) {\n            node.addEventListener(eventType, genericHandler as EventListener);\n        }\n\n        return () => {\n            for (const eventType of eventTypes) {\n                node.removeEventListener(eventType, genericHandler as EventListener);\n            }\n            // Clean up callback reference\n            callbacksRef.current = callbacksRef.current.filter(singleCallback => singleCallback !== keyHandler);\n        };\n    }, [keyOrCallback, callbackOrEventTypes, eventTypesOrNode, node]);\n};\n\nexport default useKey;\n"],"names":["useKey","keyOrCallback","callbackOrEventTypes","eventTypesOrNode","node","callbacksRef","useRef","useEffect","isKeyMode","callback","keyHandler","event","genericHandler","callBecky","eventTypes","eventType","singleCallback"],"mappings":";AAcA,MAAMA,IAAS,CACXC,GACAC,GACAC,IAAmD,CAAC,SAAS,GAC7DC,IAA+B,aAC9B;AACD,QAAMC,IAAeC,EAA2C,EAAE;AAElE,EAAAC,EAAU,MAAM;AACZ,UAAMC,IAAY,OAAOP,KAAkB,UAErCQ,IAAWD,IACVN,IACAD,GAEDS,IAAa,CAACC,MAAyB;AACzC,MAAIH,IACIG,EAAM,QAAQV,KACdQ,EAASE,CAAK,IAGlBF,EAASE,CAAK;AAAA,IAEtB;AAGA,IAAAN,EAAa,QAAQ,KAAKK,CAAU;AAEpC,UAAME,IAAiB,CAACD,MAAyB;AAC7C,iBAAWE,KAAaR,EAAa;AACjC,QAAAQ,EAAUF,CAAK;AAAA,IAEvB,GAEMG,IAAa,MAAM,QAAQX,CAAgB,IAAKA,IAA2C,CAAC,SAAS;AAE3G,eAAWY,KAAaD;AACpB,MAAAV,EAAK,iBAAiBW,GAAWH,CAA+B;AAGpE,WAAO,MAAM;AACT,iBAAWG,KAAaD;AACpB,QAAAV,EAAK,oBAAoBW,GAAWH,CAA+B;AAGvE,MAAAP,EAAa,UAAUA,EAAa,QAAQ,OAAO,CAAAW,MAAkBA,MAAmBN,CAAU;AAAA,IACtG;AAAA,EACJ,GAAG,CAACT,GAAeC,GAAsBC,GAAkBC,CAAI,CAAC;AACpE;"}