@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/overlay/OverlayTrigger.d.ts

@@ -11,7 +11,7 @@ export type OverlayTriggerProps = {
      * Manually toggling `show` does **not** wait for `delay` to change the visibility.
      *
      * @controllable onToggle
-     * @default: false
+     * @default false
      */
     show?: boolean;
     /**
@@ -31,6 +31,15 @@ export type OverlayTriggerProps = {
      *
      * The `click` trigger ignores the configured `delay`.
      *
+     * Possible values are:
+     *
+     * - `OverlayTrigger.TRIGGER_CLICK`
+     * - `OverlayTrigger.TRIGGER_HOVER`
+     * - `OverlayTrigger.TRIGGER_HOVER`
+     * - `'hover'`
+     * - `'click'`
+     * - `'focus'`
+     *
      * @default 'hover'
      */
     trigger?: TriggerType;
@@ -48,6 +57,39 @@ export type OverlayTriggerProps = {
     /**
      * The placement of the Overlay in relation to it's `target`.
      *
+     * possible values are:
+     *
+     * - `OverlayTrigger.AUTO_START`
+     * - `OverlayTrigger.AUTO`
+     * - `OverlayTrigger.AUTO_END`
+     * - `OverlayTrigger.TOP_START`
+     * - `OverlayTrigger.TOP`
+     * - `OverlayTrigger.TOP_END`
+     * - `OverlayTrigger.RIGHT_START`
+     * - `OverlayTrigger.RIGHT`
+     * - `OverlayTrigger.RIGHT_END`
+     * - `OverlayTrigger.BOTTOM_START`
+     * - `OverlayTrigger.BOTTOM`
+     * - `OverlayTrigger.BOTTOM_END`
+     * - `OverlayTrigger.LEFT_START`
+     * - `OverlayTrigger.LEFT`
+     * - `OverlayTrigger.LEFT_END`
+     * - `'auto-start'`
+     * - `'auto'`
+     * - `'auto-end'`
+     * - `'top-start'`
+     * - `'top'`
+     * - `'top-end'`
+     * - `'right-start'`
+     * - `'right'`
+     * - `'right-end'`
+     * - `'bottom-start'`
+     * - `'bottom'`
+     * - `'bottom-end'`
+     * - `'left-start'`
+     * - `'left'`
+     * - `'left-end'`
+     *
      * @default 'top'
      */
     placement?: Placement;

package/components/overlay/OverlayTrigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"OverlayTrigger.js","sources":["../../../src/components/overlay/OverlayTrigger.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper, type Modifier } from 'react-popper';\nimport type { Options } from '@popperjs/core';\n\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { useClickOutsideWithRef } from '../../hooks/useClickOutside';\nimport { useChainedTimeout } from '../../hooks/useTimeout';\nimport { useUncontrolledProp } from '../../hooks/useUncontrollable';\n\ntype PopperConfig = Partial<Options>;\n\nexport type OverlayTriggerProps = {\n    /**\n     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired\n     * with `onToggle` to avoid breaking user interactions.\n     *\n     * Manually toggling `show` does **not** wait for `delay` to change the visibility.\n     *\n     * @controllable onToggle\n     * @default: false\n     */\n    show?: boolean;\n\n    /**\n     * The initial visibility state of the Overlay.\n     *\n     * @default false\n     */\n    defaultShow?: boolean;\n\n    /**\n     * Defines the usage of React Portal.\n     *\n     * @default true\n     */\n    enablePortal?: boolean;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility\n     *\n     * The `click` trigger ignores the configured `delay`.\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * A millisecond delay amount to show and hide the Overlay once triggered\n     */\n    delay?: number | { show?: number; hide?: number };\n\n    /**\n     * An element or text to overlay next to the target.\n     */\n    overlay: React.ReactElement;\n\n    /**\n     * The placement of the Overlay in relation to it's `target`.\n     *\n     * @default 'top'\n     */\n    placement?: Placement;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     * If no custom config is provided, a default config will be used. This default config\n     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow\n     * modifier so the correct arrow element can be injected for the arrow modifier.\n     *\n     * @example\n     * popperConfig={{\n     *     modifiers: [\n     *          {\n     *              name: 'offset',\n     *              options: {\n     *                  offset: [0, 5],\n     *              },\n     *          },\n     *          {\n     *              name: 'arrow',\n     *              options: {},\n     *          },\n     *      ],\n     *  }}\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.\n     *\n     * @default true\n     */\n    rootClose?: boolean;\n\n    /**\n     * A callback that fires when the user triggers a change in tooltip visibility.\n     *\n     * `onToggle` is called with the desired next `show`, and generally should be passed\n     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`\n     *\n     * @controllable `show`\n     */\n    onToggle?: (show: boolean) => void;\n};\n\ntype TriggerProps = {\n    ref: React.Ref<unknown>;\n    onClick?: React.MouseEventHandler;\n    onFocus?: React.FocusEventHandler;\n    onBlur?: React.FocusEventHandler;\n    onMouseOver?: React.MouseEventHandler;\n    onMouseOut?: React.MouseEventHandler;\n};\n\nconst OverlayTrigger = (props: PropsWithChildren<OverlayTriggerProps>) => {\n    const {\n        show: propsShow,\n        defaultShow = false,\n        enablePortal = true,\n        trigger = TRIGGER.HOVER,\n        delay,\n        overlay,\n        placement = 'top',\n        popperConfig,\n        onToggle = () => {},\n        rootClose = true,\n        children,\n    } = props;\n\n    // Use a hook to handle controlled props that work in pairs like in this case the \"show\"  and \"onToggle\"\n    // props. It returns a setter function that automatically triggers the callback.\n    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);\n\n    const hoverStateRef = useRef<string>('');\n\n    const timeout = useChainedTimeout();\n\n    const { onFocus, onBlur, onClick } =\n        typeof children !== 'function' ? React.Children.only(children as any).props : ({} as any);\n\n    // Simple implementation of mouseEnter and mouseLeave.\n    // React's built version is broken: https://github.com/facebook/react/issues/4251\n    // for cases when the trigger is disabled and mouseOut/Over can cause flicker\n    // moving from one child element to another.\n    const handleMouseOverOut = (\n        handler: (...args: [React.MouseEvent, ...unknown[]]) => void,\n        args: [React.MouseEvent, ...unknown[]],\n        _relatedNative: 'fromElement' | 'toElement'\n    ) => {\n        const [event] = args;\n        const target = event.currentTarget as Node;\n\n        const related = event.relatedTarget as Node | null;\n\n        if ((!related || related !== target) && !target.contains(related)) {\n            handler(...args);\n        }\n    };\n\n    const handleShow = () => {\n        timeout.clear();\n        hoverStateRef.current = 'show';\n\n        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {\n            setShow(true);\n            return;\n        }\n\n        timeout.set(\n            () => {\n                if (hoverStateRef.current === 'show') {\n                    setShow(true);\n                }\n            },\n            typeof delay === 'number' ? delay : delay?.show\n        );\n    };\n\n    const handleHide = () => {\n        timeout.clear();\n        hoverStateRef.current = 'hide';\n\n        if (typeof delay === 'number' || !delay?.hide) {\n            setShow(false);\n            return;\n        }\n\n        timeout.set(() => {\n            if (hoverStateRef.current === 'hide') {\n                setShow(false);\n            }\n        }, delay?.hide);\n    };\n\n    const handleFocus = useCallback(\n        (...args: unknown[]) => {\n            handleShow();\n            onFocus?.(...args);\n        },\n        [handleShow, onFocus]\n    );\n\n    const handleBlur = useCallback(\n        (...args: unknown[]) => {\n            handleHide();\n            onBlur?.(...args);\n        },\n        [handleHide, onBlur]\n    );\n\n    const handleClick = useCallback(\n        (...args: unknown[]) => {\n            setShow(!show);\n            onClick?.(...args);\n        },\n        [onClick, setShow, show]\n    );\n\n    const handleMouseOver = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleShow, args, 'fromElement');\n        },\n        [handleShow]\n    );\n\n    const handleMouseOut = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleHide, args, 'toElement');\n        },\n        [handleHide]\n    );\n\n    const [triggerNode, setTriggerNode] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const [arrowPlacement, setArrowPlacement] = useState(placement);\n\n    const handleClickOutside = useCallback(\n        (event: MouseEvent | TouchEvent) => {\n            const isToggleTarget = triggerNode?.contains(event.target as Node);\n            const isOverlayTarget = popperElement?.contains(event.target as Node);\n\n            // Check if the click occurred outside the trigger element. Clicking on the trigger\n            // itself is handled by the onClick handler\n            if (show && rootClose && !isToggleTarget && !isOverlayTarget) {\n                handleHide();\n            }\n        },\n        [triggerNode, popperElement, rootClose, handleHide]\n    );\n\n    useClickOutsideWithRef(triggerNode, handleClickOutside);\n\n    const triggerProps: TriggerProps = {\n        ref: mergeRefs([(children as any).ref, setTriggerNode]),\n    };\n\n    if (trigger === 'click') {\n        triggerProps.onClick = handleClick;\n    } else if (trigger === 'focus') {\n        triggerProps.onFocus = handleFocus;\n        triggerProps.onBlur = handleBlur;\n    } else if (trigger === 'hover') {\n        triggerProps.onMouseOver = handleMouseOver;\n        triggerProps.onMouseOut = handleMouseOut;\n    }\n\n    const defaultPopperConfig = {\n        placement,\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'flip',\n                options: {\n                    fallbackPlacements: ['right', 'left', 'top'],\n                },\n            },\n        ],\n    };\n\n    if (popperConfig) {\n        popperConfig.placement = placement;\n\n        // if it has an arrow modifier, inject the arrow element\n        const updatedModifiers: Modifier<any, any>[] = [];\n        popperConfig.modifiers?.map((mod: Modifier<any, any>) => {\n            if (mod.name !== 'arrow') {\n                return updatedModifiers.push(mod);\n            }\n            return updatedModifiers.push({\n                ...mod,\n                options: {\n                    ...mod.options,\n                    element: arrowElement,\n                },\n            });\n        });\n\n        popperConfig.modifiers = updatedModifiers;\n    }\n\n    const popper = usePopper(triggerNode, popperElement, popperConfig || defaultPopperConfig);\n\n    // In case the overlay causes an overflow and the \"flip\" modifier\n    // changes the overlays placement, we nee to update the arrow placement as well\n    useEffect(() => {\n        if (popper.state) {\n            // Adjust arrow styles based on placement if necessary\n            setArrowPlacement(popper.state.placement);\n        }\n    }, [popper.state?.placement]);\n\n    const overlayElement = React.cloneElement(overlay, {\n        ...popper.attributes.popper,\n        ref: setPopperElement,\n        placement: arrowPlacement,\n        style: { ...popper.styles.popper },\n        arrowProps: {\n            ...popper.attributes.arrow,\n            style: popper.styles.arrow,\n            ref: setArrowElement,\n        },\n    });\n\n    return (\n        <>\n            {show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement)}\n            {React.cloneElement(children as any, triggerProps)}\n        </>\n    );\n};\n\nOverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;\nOverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;\nOverlayTrigger.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\n// placement\nOverlayTrigger.AUTO_START = PLACEMENT.AUTO_START;\nOverlayTrigger.AUTO = PLACEMENT.AUTO;\nOverlayTrigger.AUTO_END = PLACEMENT.AUTO_END;\nOverlayTrigger.TOP_START = PLACEMENT.TOP_START;\nOverlayTrigger.TOP = PLACEMENT.TOP;\nOverlayTrigger.TOP_END = PLACEMENT.TOP_END;\nOverlayTrigger.RIGHT_START = PLACEMENT.RIGHT_START;\nOverlayTrigger.RIGHT = PLACEMENT.RIGHT;\nOverlayTrigger.RIGHT_END = PLACEMENT.RIGHT_END;\nOverlayTrigger.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOverlayTrigger.BOTTOM = PLACEMENT.BOTTOM;\nOverlayTrigger.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOverlayTrigger.LEFT_START = PLACEMENT.LEFT_START;\nOverlayTrigger.LEFT = PLACEMENT.LEFT;\nOverlayTrigger.LEFT_END = PLACEMENT.LEFT_END;\n\nexport default OverlayTrigger;\n"],"names":["OverlayTrigger","props","propsShow","defaultShow","enablePortal","trigger","TRIGGER","delay","overlay","placement","popperConfig","onToggle","rootClose","children","show","setShow","useUncontrolledProp","hoverStateRef","useRef","timeout","useChainedTimeout","onFocus","onBlur","onClick","React","handleMouseOverOut","handler","args","_relatedNative","event","target","related","handleShow","handleHide","handleFocus","useCallback","handleBlur","handleClick","handleMouseOver","handleMouseOut","triggerNode","setTriggerNode","useState","popperElement","setPopperElement","arrowElement","setArrowElement","arrowPlacement","setArrowPlacement","handleClickOutside","isToggleTarget","isOverlayTarget","useClickOutsideWithRef","triggerProps","mergeRefs","defaultPopperConfig","updatedModifiers","mod","popper","usePopper","useEffect","overlayElement","jsxs","Fragment","ReactDOM","PLACEMENT"],"mappings":"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"}
+{"version":3,"file":"OverlayTrigger.js","sources":["../../../src/components/overlay/OverlayTrigger.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef, useState, type PropsWithChildren } from 'react';\nimport ReactDOM from 'react-dom';\nimport { usePopper, type Modifier } from 'react-popper';\nimport type { Options } from '@popperjs/core';\n\nimport { PLACEMENT, type Placement } from '../../values/Placement';\nimport { TRIGGER, type TriggerType } from '../../values/Trigger';\nimport mergeRefs from '../../utils/mergeRefs';\nimport { useClickOutsideWithRef } from '../../hooks/useClickOutside';\nimport { useChainedTimeout } from '../../hooks/useTimeout';\nimport { useUncontrolledProp } from '../../hooks/useUncontrollable';\n\ntype PopperConfig = Partial<Options>;\n\nexport type OverlayTriggerProps = {\n    /**\n     * The visibility of the Overlay. `show` is a _controlled_ prop so should be paired\n     * with `onToggle` to avoid breaking user interactions.\n     *\n     * Manually toggling `show` does **not** wait for `delay` to change the visibility.\n     *\n     * @controllable onToggle\n     * @default false\n     */\n    show?: boolean;\n\n    /**\n     * The initial visibility state of the Overlay.\n     *\n     * @default false\n     */\n    defaultShow?: boolean;\n\n    /**\n     * Defines the usage of React Portal.\n     *\n     * @default true\n     */\n    enablePortal?: boolean;\n\n    /**\n     * Specify which action or actions trigger Overlay visibility\n     *\n     * The `click` trigger ignores the configured `delay`.\n     *\n     * Possible values are:\n     *\n     * - `OverlayTrigger.TRIGGER_CLICK`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `OverlayTrigger.TRIGGER_HOVER`\n     * - `'hover'`\n     * - `'click'`\n     * - `'focus'`\n     *\n     * @default 'hover'\n     */\n    trigger?: TriggerType;\n\n    /**\n     * A millisecond delay amount to show and hide the Overlay once triggered\n     */\n    delay?: number | { show?: number; hide?: number };\n\n    /**\n     * An element or text to overlay next to the target.\n     */\n    overlay: React.ReactElement;\n\n    /**\n     * The placement of the Overlay in relation to it's `target`.\n     *\n     * possible values are:\n     *\n     * - `OverlayTrigger.AUTO_START`\n     * - `OverlayTrigger.AUTO`\n     * - `OverlayTrigger.AUTO_END`\n     * - `OverlayTrigger.TOP_START`\n     * - `OverlayTrigger.TOP`\n     * - `OverlayTrigger.TOP_END`\n     * - `OverlayTrigger.RIGHT_START`\n     * - `OverlayTrigger.RIGHT`\n     * - `OverlayTrigger.RIGHT_END`\n     * - `OverlayTrigger.BOTTOM_START`\n     * - `OverlayTrigger.BOTTOM`\n     * - `OverlayTrigger.BOTTOM_END`\n     * - `OverlayTrigger.LEFT_START`\n     * - `OverlayTrigger.LEFT`\n     * - `OverlayTrigger.LEFT_END`\n     * - `'auto-start'`\n     * - `'auto'`\n     * - `'auto-end'`\n     * - `'top-start'`\n     * - `'top'`\n     * - `'top-end'`\n     * - `'right-start'`\n     * - `'right'`\n     * - `'right-end'`\n     * - `'bottom-start'`\n     * - `'bottom'`\n     * - `'bottom-end'`\n     * - `'left-start'`\n     * - `'left'`\n     * - `'left-end'`\n     *\n     * @default 'top'\n     */\n    placement?: Placement;\n\n    /**\n     * A Popper.js config object passed to the underlying popper instance.\n     * If no custom config is provided, a default config will be used. This default config\n     * includes an arrow element. In case you want to use a custom config and an arrow, include the arrow\n     * modifier so the correct arrow element can be injected for the arrow modifier.\n     *\n     * @example\n     * popperConfig={{\n     *     modifiers: [\n     *          {\n     *              name: 'offset',\n     *              options: {\n     *                  offset: [0, 5],\n     *              },\n     *          },\n     *          {\n     *              name: 'arrow',\n     *              options: {},\n     *          },\n     *      ],\n     *  }}\n     */\n    popperConfig?: PopperConfig;\n\n    /**\n     * Specify whether the overlay should trigger onHide when the user clicks outside the overlay.\n     *\n     * @default true\n     */\n    rootClose?: boolean;\n\n    /**\n     * A callback that fires when the user triggers a change in tooltip visibility.\n     *\n     * `onToggle` is called with the desired next `show`, and generally should be passed\n     * back to the `show` prop. `onToggle` fires _after_ the configured `delay`\n     *\n     * @controllable `show`\n     */\n    onToggle?: (show: boolean) => void;\n};\n\ntype TriggerProps = {\n    ref: React.Ref<unknown>;\n    onClick?: React.MouseEventHandler;\n    onFocus?: React.FocusEventHandler;\n    onBlur?: React.FocusEventHandler;\n    onMouseOver?: React.MouseEventHandler;\n    onMouseOut?: React.MouseEventHandler;\n};\n\nconst OverlayTrigger = (props: PropsWithChildren<OverlayTriggerProps>) => {\n    const {\n        show: propsShow,\n        defaultShow = false,\n        enablePortal = true,\n        trigger = TRIGGER.HOVER,\n        delay,\n        overlay,\n        placement = 'top',\n        popperConfig,\n        onToggle = () => {},\n        rootClose = true,\n        children,\n    } = props;\n\n    // Use a hook to handle controlled props that work in pairs like in this case the \"show\"  and \"onToggle\"\n    // props. It returns a setter function that automatically triggers the callback.\n    const [show, setShow] = useUncontrolledProp(propsShow, defaultShow, onToggle);\n\n    const hoverStateRef = useRef<string>('');\n\n    const timeout = useChainedTimeout();\n\n    const { onFocus, onBlur, onClick } =\n        typeof children !== 'function' ? React.Children.only(children as any).props : ({} as any);\n\n    // Simple implementation of mouseEnter and mouseLeave.\n    // React's built version is broken: https://github.com/facebook/react/issues/4251\n    // for cases when the trigger is disabled and mouseOut/Over can cause flicker\n    // moving from one child element to another.\n    const handleMouseOverOut = (\n        handler: (...args: [React.MouseEvent, ...unknown[]]) => void,\n        args: [React.MouseEvent, ...unknown[]],\n        _relatedNative: 'fromElement' | 'toElement'\n    ) => {\n        const [event] = args;\n        const target = event.currentTarget as Node;\n\n        const related = event.relatedTarget as Node | null;\n\n        if ((!related || related !== target) && !target.contains(related)) {\n            handler(...args);\n        }\n    };\n\n    const handleShow = () => {\n        timeout.clear();\n        hoverStateRef.current = 'show';\n\n        if (delay === 0 || (typeof delay !== 'number' && !delay?.show)) {\n            setShow(true);\n            return;\n        }\n\n        timeout.set(\n            () => {\n                if (hoverStateRef.current === 'show') {\n                    setShow(true);\n                }\n            },\n            typeof delay === 'number' ? delay : delay?.show\n        );\n    };\n\n    const handleHide = () => {\n        timeout.clear();\n        hoverStateRef.current = 'hide';\n\n        if (typeof delay === 'number' || !delay?.hide) {\n            setShow(false);\n            return;\n        }\n\n        timeout.set(() => {\n            if (hoverStateRef.current === 'hide') {\n                setShow(false);\n            }\n        }, delay?.hide);\n    };\n\n    const handleFocus = useCallback(\n        (...args: unknown[]) => {\n            handleShow();\n            onFocus?.(...args);\n        },\n        [handleShow, onFocus]\n    );\n\n    const handleBlur = useCallback(\n        (...args: unknown[]) => {\n            handleHide();\n            onBlur?.(...args);\n        },\n        [handleHide, onBlur]\n    );\n\n    const handleClick = useCallback(\n        (...args: unknown[]) => {\n            setShow(!show);\n            onClick?.(...args);\n        },\n        [onClick, setShow, show]\n    );\n\n    const handleMouseOver = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleShow, args, 'fromElement');\n        },\n        [handleShow]\n    );\n\n    const handleMouseOut = useCallback(\n        (...args: [React.MouseEvent, ...unknown[]]) => {\n            handleMouseOverOut(handleHide, args, 'toElement');\n        },\n        [handleHide]\n    );\n\n    const [triggerNode, setTriggerNode] = useState<HTMLButtonElement | null>(null);\n    const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);\n    const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);\n\n    const [arrowPlacement, setArrowPlacement] = useState(placement);\n\n    const handleClickOutside = useCallback(\n        (event: MouseEvent | TouchEvent) => {\n            const isToggleTarget = triggerNode?.contains(event.target as Node);\n            const isOverlayTarget = popperElement?.contains(event.target as Node);\n\n            // Check if the click occurred outside the trigger element. Clicking on the trigger\n            // itself is handled by the onClick handler\n            if (show && rootClose && !isToggleTarget && !isOverlayTarget) {\n                handleHide();\n            }\n        },\n        [triggerNode, popperElement, rootClose, handleHide]\n    );\n\n    useClickOutsideWithRef(triggerNode, handleClickOutside);\n\n    const triggerProps: TriggerProps = {\n        ref: mergeRefs([(children as any).ref, setTriggerNode]),\n    };\n\n    if (trigger === 'click') {\n        triggerProps.onClick = handleClick;\n    } else if (trigger === 'focus') {\n        triggerProps.onFocus = handleFocus;\n        triggerProps.onBlur = handleBlur;\n    } else if (trigger === 'hover') {\n        triggerProps.onMouseOver = handleMouseOver;\n        triggerProps.onMouseOut = handleMouseOut;\n    }\n\n    const defaultPopperConfig = {\n        placement,\n        modifiers: [\n            {\n                name: 'arrow',\n                options: {\n                    element: arrowElement,\n                },\n            },\n            {\n                name: 'flip',\n                options: {\n                    fallbackPlacements: ['right', 'left', 'top'],\n                },\n            },\n        ],\n    };\n\n    if (popperConfig) {\n        popperConfig.placement = placement;\n\n        // if it has an arrow modifier, inject the arrow element\n        const updatedModifiers: Modifier<any, any>[] = [];\n        popperConfig.modifiers?.map((mod: Modifier<any, any>) => {\n            if (mod.name !== 'arrow') {\n                return updatedModifiers.push(mod);\n            }\n            return updatedModifiers.push({\n                ...mod,\n                options: {\n                    ...mod.options,\n                    element: arrowElement,\n                },\n            });\n        });\n\n        popperConfig.modifiers = updatedModifiers;\n    }\n\n    const popper = usePopper(triggerNode, popperElement, popperConfig || defaultPopperConfig);\n\n    // In case the overlay causes an overflow and the \"flip\" modifier\n    // changes the overlays placement, we nee to update the arrow placement as well\n    useEffect(() => {\n        if (popper.state) {\n            // Adjust arrow styles based on placement if necessary\n            setArrowPlacement(popper.state.placement);\n        }\n    }, [popper.state?.placement]);\n\n    const overlayElement = React.cloneElement(overlay, {\n        ...popper.attributes.popper,\n        ref: setPopperElement,\n        placement: arrowPlacement,\n        style: { ...popper.styles.popper },\n        arrowProps: {\n            ...popper.attributes.arrow,\n            style: popper.styles.arrow,\n            ref: setArrowElement,\n        },\n    });\n\n    return (\n        <>\n            {show && (enablePortal ? ReactDOM.createPortal(overlayElement, document.body) : overlayElement)}\n            {React.cloneElement(children as any, triggerProps)}\n        </>\n    );\n};\n\nOverlayTrigger.TRIGGER_CLICK = TRIGGER.CLICK;\nOverlayTrigger.TRIGGER_HOVER = TRIGGER.HOVER;\nOverlayTrigger.TRIGGER_FOCUS = TRIGGER.FOCUS;\n\n// placement\nOverlayTrigger.AUTO_START = PLACEMENT.AUTO_START;\nOverlayTrigger.AUTO = PLACEMENT.AUTO;\nOverlayTrigger.AUTO_END = PLACEMENT.AUTO_END;\nOverlayTrigger.TOP_START = PLACEMENT.TOP_START;\nOverlayTrigger.TOP = PLACEMENT.TOP;\nOverlayTrigger.TOP_END = PLACEMENT.TOP_END;\nOverlayTrigger.RIGHT_START = PLACEMENT.RIGHT_START;\nOverlayTrigger.RIGHT = PLACEMENT.RIGHT;\nOverlayTrigger.RIGHT_END = PLACEMENT.RIGHT_END;\nOverlayTrigger.BOTTOM_START = PLACEMENT.BOTTOM_START;\nOverlayTrigger.BOTTOM = PLACEMENT.BOTTOM;\nOverlayTrigger.BOTTOM_END = PLACEMENT.BOTTOM_END;\nOverlayTrigger.LEFT_START = PLACEMENT.LEFT_START;\nOverlayTrigger.LEFT = PLACEMENT.LEFT;\nOverlayTrigger.LEFT_END = PLACEMENT.LEFT_END;\n\nexport default OverlayTrigger;\n"],"names":["OverlayTrigger","props","propsShow","defaultShow","enablePortal","trigger","TRIGGER","delay","overlay","placement","popperConfig","onToggle","rootClose","children","show","setShow","useUncontrolledProp","hoverStateRef","useRef","timeout","useChainedTimeout","onFocus","onBlur","onClick","React","handleMouseOverOut","handler","args","_relatedNative","event","target","related","handleShow","handleHide","handleFocus","useCallback","handleBlur","handleClick","handleMouseOver","handleMouseOut","triggerNode","setTriggerNode","useState","popperElement","setPopperElement","arrowElement","setArrowElement","arrowPlacement","setArrowPlacement","handleClickOutside","isToggleTarget","isOverlayTarget","useClickOutsideWithRef","triggerProps","mergeRefs","defaultPopperConfig","updatedModifiers","mod","popper","usePopper","useEffect","overlayElement","jsxs","Fragment","ReactDOM","PLACEMENT"],"mappings":"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"}

package/components/page/Page.js

@@ -1,5 +1,5 @@
 import { jsx as n } from "react/jsx-runtime";
-import p from "classnames";
+import p from "../../utils/classNames.js";
 const f = (o) => {
   const { className: e, width: r, orientation: s = "portrait", shadow: i = !0, border: d = !1, children: c } = o, h = p(
     "Page",

package/components/page/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../src/components/page/Page.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nexport type PageProps = {\n    /**\n     * Defines the width in pixel of the page. In landscape mode, the width is set as height.\n     * The component uses internally the aspect-ratio of a standard DIN A4 page.\n     * Please make sure the element does not get stretched when using flexbox.\n     */\n    width: number;\n\n    /**\n     * Defines the layout of the page\n     *\n     * @default 'portrait'\n     */\n    orientation?: 'portrait' | 'landscape';\n\n    /**\n     * Defines to use a pre-defined shadow style. May be disabled on white background.\n     *\n     * @default true\n     */\n    shadow?: boolean;\n\n    /**\n     * Defines to use a pre-defined border style. This may be used to render\n     * the page on a white background of as part of another element like a panel.\n     */\n    border?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element\n     */\n    className?: string;\n};\n\nconst Page = (props: PropsWithChildren<PageProps>) => {\n    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;\n\n    const wrapperClassNames = classNames(\n        'Page',\n        orientation,\n        shadow && 'shadow-hard',\n        border && 'border border-width-2',\n        className\n    );\n\n    const isPortrait = orientation === 'portrait';\n\n    const style: React.CSSProperties = {};\n\n    if (width && isPortrait) {\n        style.width = `${width}px`;\n    }\n\n    if (width && !isPortrait) {\n        style.height = `${width}px`;\n    }\n\n    return (\n        <div className={wrapperClassNames} style={style}>\n            {children}\n        </div>\n    );\n};\n\nexport default Page;\n"],"names":["Page","props","className","width","orientation","shadow","border","children","wrapperClassNames","classNames","isPortrait","style","jsx"],"mappings":";;AAsCA,MAAMA,IAAO,CAACC,MAAwC;AAClD,QAAM,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,IAAc,YAAY,QAAAC,IAAS,IAAM,QAAAC,IAAS,IAAO,UAAAC,EAAA,IAAaN,GAE1FO,IAAoBC;AAAA,IACtB;AAAA,IACAL;AAAA,IACAC,KAAU;AAAA,IACVC,KAAU;AAAA,IACVJ;AAAA,EAAA,GAGEQ,IAAaN,MAAgB,YAE7BO,IAA6B,CAAA;AAEnC,SAAIR,KAASO,MACTC,EAAM,QAAQ,GAAGR,CAAK,OAGtBA,KAAS,CAACO,MACVC,EAAM,SAAS,GAAGR,CAAK,OAIvB,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAmB,OAAAG,GAC9B,UAAAJ,GACL;AAER;"}
+{"version":3,"file":"Page.js","sources":["../../../src/components/page/Page.tsx"],"sourcesContent":["import type React from 'react';\nimport type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\n\nexport type PageProps = {\n    /**\n     * Defines the width in pixel of the page. In landscape mode, the width is set as height.\n     * The component uses internally the aspect-ratio of a standard DIN A4 page.\n     * Please make sure the element does not get stretched when using flexbox.\n     */\n    width: number;\n\n    /**\n     * Defines the layout of the page\n     *\n     * @default 'portrait'\n     */\n    orientation?: 'portrait' | 'landscape';\n\n    /**\n     * Defines to use a pre-defined shadow style. May be disabled on white background.\n     *\n     * @default true\n     */\n    shadow?: boolean;\n\n    /**\n     * Defines to use a pre-defined border style. This may be used to render\n     * the page on a white background of as part of another element like a panel.\n     */\n    border?: boolean;\n\n    /**\n     * Additional classes to be set on the wrapper element\n     */\n    className?: string;\n};\n\nconst Page = (props: PropsWithChildren<PageProps>) => {\n    const { className, width, orientation = 'portrait', shadow = true, border = false, children } = props;\n\n    const wrapperClassNames = classNames(\n        'Page',\n        orientation,\n        shadow && 'shadow-hard',\n        border && 'border border-width-2',\n        className\n    );\n\n    const isPortrait = orientation === 'portrait';\n\n    const style: React.CSSProperties = {};\n\n    if (width && isPortrait) {\n        style.width = `${width}px`;\n    }\n\n    if (width && !isPortrait) {\n        style.height = `${width}px`;\n    }\n\n    return (\n        <div className={wrapperClassNames} style={style}>\n            {children}\n        </div>\n    );\n};\n\nexport default Page;\n"],"names":["Page","props","className","width","orientation","shadow","border","children","wrapperClassNames","classNames","isPortrait","style","jsx"],"mappings":";;AAuCA,MAAMA,IAAO,CAACC,MAAwC;AAClD,QAAM,EAAE,WAAAC,GAAW,OAAAC,GAAO,aAAAC,IAAc,YAAY,QAAAC,IAAS,IAAM,QAAAC,IAAS,IAAO,UAAAC,EAAA,IAAaN,GAE1FO,IAAoBC;AAAA,IACtB;AAAA,IACAL;AAAA,IACAC,KAAU;AAAA,IACVC,KAAU;AAAA,IACVJ;AAAA,EAAA,GAGEQ,IAAaN,MAAgB,YAE7BO,IAA6B,CAAA;AAEnC,SAAIR,KAASO,MACTC,EAAM,QAAQ,GAAGR,CAAK,OAGtBA,KAAS,CAACO,MACVC,EAAM,SAAS,GAAGR,CAAK,OAIvB,gBAAAS,EAAC,OAAA,EAAI,WAAWJ,GAAmB,OAAAG,GAC9B,UAAAJ,GACL;AAER;"}

package/components/pager/Pager.d.ts

@@ -16,6 +16,7 @@ export type PagerProps = {
     /**
      * Set right alignment for "previous" pager content to be aligned
      * to the right side of the pager and the arrow on the left side.
+     *
      * @default false
      */
     alignRight?: boolean;
@@ -31,11 +32,13 @@ export type PagerProps = {
     variant?: ObjectValues<typeof PagerVariant>;
     /**
      * Sets the pager disabled.
+     *
      * @default false
      */
     disabled?: boolean;
     /**
      * Callback function for when the component is clicked.
+     *
      * @param event
      * @returns
      */

package/components/pager/Pager.js

@@ -1,6 +1,6 @@
 import { jsxs as r, jsx as s } from "react/jsx-runtime";
 import { useState as I } from "react";
-import e from "classnames";
+import e from "../../utils/classNames.js";
 const i = {
   VARIANT_FULL: "full",
   VARIANT_COMPACT: "compact"

package/components/pager/Pager.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pager.js","sources":["../../../src/components/pager/Pager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\nimport classNames from 'classnames';\n\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const PagerVariant = {\n    VARIANT_FULL: 'full',\n    VARIANT_COMPACT: 'compact',\n} as const;\n\nexport type PagerProps = {\n    /**\n     * The title or name of the section next/previous section.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The optional label for the full variant.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Set right alignment for \"previous\" pager content to be aligned\n     * to the right side of the pager and the arrow on the left side.\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Define how large the component should be rendered.\n     *\n     * Possible values are:\n     * `Pager.VARIANT_FULL`, `Pager.VARIANT_COMPACT` or\n     * `full`, `compact`.\n     *\n     * @default `full`\n     */\n    variant?: ObjectValues<typeof PagerVariant>;\n\n    /**\n     * Sets the pager disabled.\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function for when the component is clicked.\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\nconst Pager = (props: PagerProps) => {\n    const {\n        title,\n        label,\n        alignRight = false,\n        variant = PagerVariant.VARIANT_FULL,\n        disabled = false,\n        onClick,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [isHover, setIsHover] = useState(false);\n\n    const handleEnter = () => !disabled && setIsHover(true);\n    const handleLeave = () => setIsHover(false);\n\n    const isCompactVariant = variant === Pager.VARIANT_COMPACT;\n\n    const wrapperClassesBase = classNames(\n        'Pager',\n        'bg-white',\n        'border',\n        'display-flex justify-space-between align-items-center',\n        isHover && 'border-color-highlight',\n        alignRight && 'flex-row-reverse',\n        disabled && 'pointer-events-none',\n        'cursor-pointer user-select-none'\n    );\n\n    const iconClassesBase = classNames(\n        'rioglyph',\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    const titleClassesBase = classNames(\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    // The compact version has a slightly different markup and different classes for the\n    // individual parts, hence we extend the base classes\n    if (isCompactVariant) {\n        const wrapperClassesCompact = classNames(\n            wrapperClassesBase,\n            'rounded-circle',\n            'padding-y-5 padding-x-15',\n            'width-auto',\n            className\n        );\n\n        const iconClassesCompact = classNames(\n            iconClassesBase,\n            alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5',\n            'text-size-10'\n        );\n\n        return (\n            <div\n                {...remainingProps}\n                className={wrapperClassesCompact}\n                onMouseEnter={handleEnter}\n                onMouseLeave={handleLeave}\n                onClick={onClick}\n            >\n                <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                    <div className={titleClassesBase}>{title}</div>\n                </div>\n                <span className={iconClassesCompact} />\n            </div>\n        );\n    }\n\n    const wrapperClassesFull = classNames(\n        wrapperClassesBase,\n        'rounded',\n        'padding-y-15 padding-x-20',\n        'width-100pct',\n        className\n    );\n\n    const iconClassesFull = classNames(\n        iconClassesBase,\n        alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10',\n        'text-size-200pct'\n    );\n\n    const titleClassesFull = classNames(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');\n\n    return (\n        <div\n            {...remainingProps}\n            className={wrapperClassesFull}\n            onMouseEnter={handleEnter}\n            onMouseLeave={handleLeave}\n            onClick={onClick}\n        >\n            <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                <div className='text-color-gray line-height-16'>{label}</div>\n                <div className={titleClassesFull}>{title}</div>\n            </div>\n            <div className='text-size-12 display-grid place-items-center'>\n                <span className={iconClassesFull} />\n            </div>\n        </div>\n    );\n};\n\nPager.VARIANT_FULL = PagerVariant.VARIANT_FULL;\nPager.VARIANT_COMPACT = PagerVariant.VARIANT_COMPACT;\n\nexport default Pager;\n"],"names":["PagerVariant","Pager","props","title","label","alignRight","variant","disabled","onClick","className","remainingProps","isHover","setIsHover","useState","handleEnter","handleLeave","isCompactVariant","wrapperClassesBase","classNames","iconClassesBase","titleClassesBase","wrapperClassesCompact","iconClassesCompact","jsxs","jsx","wrapperClassesFull","iconClassesFull","titleClassesFull"],"mappings":";;;AAMO,MAAMA,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,iBAAiB;AACrB,GAkDMC,IAAQ,CAACC,MAAsB;AACjC,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC,IAAUN,EAAa;AAAA,IACvB,UAAAO,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR,GAEE,CAACS,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAc,MAAM,CAACP,KAAYK,EAAW,EAAI,GAChDG,IAAc,MAAMH,EAAW,EAAK,GAEpCI,IAAmBV,MAAYL,EAAM,iBAErCgB,IAAqBC;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAP,KAAW;AAAA,IACXN,KAAc;AAAA,IACdE,KAAY;AAAA,IACZ;AAAA,EAAA,GAGEY,IAAkBD;AAAA,IACpB;AAAA,IACAX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA,GAGTS,IAAmBF;AAAA,IACrBX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA;AAKf,MAAIK,GAAkB;AAClB,UAAMK,IAAwBH;AAAA,MAC1BD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAR;AAAA,IAAA,GAGEa,IAAqBJ;AAAA,MACvBC;AAAA,MACAd,IAAa,yCAAyC;AAAA,MACtD;AAAA,IAAA;AAGJ,WACI,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGb;AAAA,QACJ,WAAWW;AAAA,QACX,cAAcP;AAAA,QACd,cAAcC;AAAA,QACd,SAAAP;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAW,qCAAqCnB,IAAa,oBAAoB,EAAE,IACpF,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWJ,GAAmB,UAAAjB,EAAA,CAAM,GAC7C;AAAA,UACA,gBAAAqB,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjD;AAEA,QAAMG,IAAqBP;AAAA,IACvBD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGEiB,IAAkBR;AAAA,IACpBC;AAAA,IACAd,IAAa,wCAAwC;AAAA,IACrD;AAAA,EAAA,GAGEsB,IAAmBT,EAAWE,GAAkBf,KAAc,cAAc,0BAA0B;AAE5G,SACI,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGb;AAAA,MACJ,WAAWe;AAAA,MACX,cAAcX;AAAA,MACd,cAAcC;AAAA,MACd,SAAAP;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAe,EAAC,SAAI,WAAW,qCAAqClB,IAAa,oBAAoB,EAAE,IACpF,UAAA;AAAA,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,kCAAkC,UAAApB,GAAM;AAAA,UACvD,gBAAAoB,EAAC,OAAA,EAAI,WAAWG,GAAmB,UAAAxB,EAAA,CAAM;AAAA,QAAA,GAC7C;AAAA,QACA,gBAAAqB,EAAC,SAAI,WAAU,gDACX,4BAAC,QAAA,EAAK,WAAWE,GAAiB,EAAA,CACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAzB,EAAM,eAAeD,EAAa;AAClCC,EAAM,kBAAkBD,EAAa;"}
+{"version":3,"file":"Pager.js","sources":["../../../src/components/pager/Pager.tsx"],"sourcesContent":["import type React from 'react';\nimport { useState } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport type { ObjectValues } from '../../utils/ObjectValues';\n\nexport const PagerVariant = {\n    VARIANT_FULL: 'full',\n    VARIANT_COMPACT: 'compact',\n} as const;\n\nexport type PagerProps = {\n    /**\n     * The title or name of the section next/previous section.\n     */\n    title: string | React.ReactNode;\n\n    /**\n     * The optional label for the full variant.\n     */\n    label?: string | React.ReactNode;\n\n    /**\n     * Set right alignment for \"previous\" pager content to be aligned\n     * to the right side of the pager and the arrow on the left side.\n     *\n     * @default false\n     */\n    alignRight?: boolean;\n\n    /**\n     * Define how large the component should be rendered.\n     *\n     * Possible values are:\n     * `Pager.VARIANT_FULL`, `Pager.VARIANT_COMPACT` or\n     * `full`, `compact`.\n     *\n     * @default `full`\n     */\n    variant?: ObjectValues<typeof PagerVariant>;\n\n    /**\n     * Sets the pager disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Callback function for when the component is clicked.\n     *\n     * @param event\n     * @returns\n     */\n    onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;\n\n    /**\n     * Additional classes for the wrapper element.\n     */\n    className?: string;\n};\n\nconst Pager = (props: PagerProps) => {\n    const {\n        title,\n        label,\n        alignRight = false,\n        variant = PagerVariant.VARIANT_FULL,\n        disabled = false,\n        onClick,\n        className,\n        ...remainingProps\n    } = props;\n\n    const [isHover, setIsHover] = useState(false);\n\n    const handleEnter = () => !disabled && setIsHover(true);\n    const handleLeave = () => setIsHover(false);\n\n    const isCompactVariant = variant === Pager.VARIANT_COMPACT;\n\n    const wrapperClassesBase = classNames(\n        'Pager',\n        'bg-white',\n        'border',\n        'display-flex justify-space-between align-items-center',\n        isHover && 'border-color-highlight',\n        alignRight && 'flex-row-reverse',\n        disabled && 'pointer-events-none',\n        'cursor-pointer user-select-none'\n    );\n\n    const iconClassesBase = classNames(\n        'rioglyph',\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    const titleClassesBase = classNames(\n        disabled ? 'text-color-light' : 'text-color-darker',\n        isHover && 'text-color-highlight'\n    );\n\n    // The compact version has a slightly different markup and different classes for the\n    // individual parts, hence we extend the base classes\n    if (isCompactVariant) {\n        const wrapperClassesCompact = classNames(\n            wrapperClassesBase,\n            'rounded-circle',\n            'padding-y-5 padding-x-15',\n            'width-auto',\n            className\n        );\n\n        const iconClassesCompact = classNames(\n            iconClassesBase,\n            alignRight ? 'rioglyph-chevron-left margin-right-5' : 'rioglyph-chevron-right margin-left-5',\n            'text-size-10'\n        );\n\n        return (\n            <div\n                {...remainingProps}\n                className={wrapperClassesCompact}\n                onMouseEnter={handleEnter}\n                onMouseLeave={handleLeave}\n                onClick={onClick}\n            >\n                <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                    <div className={titleClassesBase}>{title}</div>\n                </div>\n                <span className={iconClassesCompact} />\n            </div>\n        );\n    }\n\n    const wrapperClassesFull = classNames(\n        wrapperClassesBase,\n        'rounded',\n        'padding-y-15 padding-x-20',\n        'width-100pct',\n        className\n    );\n\n    const iconClassesFull = classNames(\n        iconClassesBase,\n        alignRight ? 'rioglyph-arrow-left margin-right-10' : 'rioglyph-arrow-right margin-left-10',\n        'text-size-200pct'\n    );\n\n    const titleClassesFull = classNames(titleClassesBase, alignRight && 'text-right', 'text-size-16 text-medium');\n\n    return (\n        <div\n            {...remainingProps}\n            className={wrapperClassesFull}\n            onMouseEnter={handleEnter}\n            onMouseLeave={handleLeave}\n            onClick={onClick}\n        >\n            <div className={`display-flex flex-1-1 flex-column ${alignRight ? 'align-items-end' : ''}`}>\n                <div className='text-color-gray line-height-16'>{label}</div>\n                <div className={titleClassesFull}>{title}</div>\n            </div>\n            <div className='text-size-12 display-grid place-items-center'>\n                <span className={iconClassesFull} />\n            </div>\n        </div>\n    );\n};\n\nPager.VARIANT_FULL = PagerVariant.VARIANT_FULL;\nPager.VARIANT_COMPACT = PagerVariant.VARIANT_COMPACT;\n\nexport default Pager;\n"],"names":["PagerVariant","Pager","props","title","label","alignRight","variant","disabled","onClick","className","remainingProps","isHover","setIsHover","useState","handleEnter","handleLeave","isCompactVariant","wrapperClassesBase","classNames","iconClassesBase","titleClassesBase","wrapperClassesCompact","iconClassesCompact","jsxs","jsx","wrapperClassesFull","iconClassesFull","titleClassesFull"],"mappings":";;;AAMO,MAAMA,IAAe;AAAA,EACxB,cAAc;AAAA,EACd,iBAAiB;AACrB,GAqDMC,IAAQ,CAACC,MAAsB;AACjC,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC,IAAUN,EAAa;AAAA,IACvB,UAAAO,IAAW;AAAA,IACX,SAAAC;AAAA,IACA,WAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHR,GAEE,CAACS,GAASC,CAAU,IAAIC,EAAS,EAAK,GAEtCC,IAAc,MAAM,CAACP,KAAYK,EAAW,EAAI,GAChDG,IAAc,MAAMH,EAAW,EAAK,GAEpCI,IAAmBV,MAAYL,EAAM,iBAErCgB,IAAqBC;AAAA,IACvB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAP,KAAW;AAAA,IACXN,KAAc;AAAA,IACdE,KAAY;AAAA,IACZ;AAAA,EAAA,GAGEY,IAAkBD;AAAA,IACpB;AAAA,IACAX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA,GAGTS,IAAmBF;AAAA,IACrBX,IAAW,qBAAqB;AAAA,IAChCI,KAAW;AAAA,EAAA;AAKf,MAAIK,GAAkB;AAClB,UAAMK,IAAwBH;AAAA,MAC1BD;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACAR;AAAA,IAAA,GAGEa,IAAqBJ;AAAA,MACvBC;AAAA,MACAd,IAAa,yCAAyC;AAAA,MACtD;AAAA,IAAA;AAGJ,WACI,gBAAAkB;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAGb;AAAA,QACJ,WAAWW;AAAA,QACX,cAAcP;AAAA,QACd,cAAcC;AAAA,QACd,SAAAP;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAW,qCAAqCnB,IAAa,oBAAoB,EAAE,IACpF,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAWJ,GAAmB,UAAAjB,EAAA,CAAM,GAC7C;AAAA,UACA,gBAAAqB,EAAC,QAAA,EAAK,WAAWF,EAAA,CAAoB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjD;AAEA,QAAMG,IAAqBP;AAAA,IACvBD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACAR;AAAA,EAAA,GAGEiB,IAAkBR;AAAA,IACpBC;AAAA,IACAd,IAAa,wCAAwC;AAAA,IACrD;AAAA,EAAA,GAGEsB,IAAmBT,EAAWE,GAAkBf,KAAc,cAAc,0BAA0B;AAE5G,SACI,gBAAAkB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGb;AAAA,MACJ,WAAWe;AAAA,MACX,cAAcX;AAAA,MACd,cAAcC;AAAA,MACd,SAAAP;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAe,EAAC,SAAI,WAAW,qCAAqClB,IAAa,oBAAoB,EAAE,IACpF,UAAA;AAAA,UAAA,gBAAAmB,EAAC,OAAA,EAAI,WAAU,kCAAkC,UAAApB,GAAM;AAAA,UACvD,gBAAAoB,EAAC,OAAA,EAAI,WAAWG,GAAmB,UAAAxB,EAAA,CAAM;AAAA,QAAA,GAC7C;AAAA,QACA,gBAAAqB,EAAC,SAAI,WAAU,gDACX,4BAAC,QAAA,EAAK,WAAWE,GAAiB,EAAA,CACtC;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEAzB,EAAM,eAAeD,EAAa;AAClCC,EAAM,kBAAkBD,EAAa;"}

package/components/popover/Popover.d.ts

@@ -17,6 +17,7 @@ export type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {
      * This is generally provided by the OverlayTrigger component positioning the Popover.
      *
      * Possible values are:
+     *
      * - `auto`
      * - `top`
      * - `right`

package/components/popover/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n    type PropsWithChildren,\n    type ReactNode,\n    type ComponentProps,\n    isValidElement,\n    useState,\n    useEffect,\n} from 'react';\n\nimport { PLACEMENT } from '../../values/Placement';\n\nexport const PLACEMENT_MAP = {\n    AUTO: PLACEMENT.AUTO,\n    TOP: PLACEMENT.TOP,\n    RIGHT: PLACEMENT.RIGHT,\n    BOTTOM: PLACEMENT.BOTTOM,\n    LEFT: PLACEMENT.LEFT,\n} as const;\n\nexport type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * HTML ID attribute, necessary for accessibility.\n     */\n    id: string;\n\n    /**\n     * Sets the direction the Popover is positioned towards.\n     *\n     * This is generally provided by the OverlayTrigger component positioning the Popover.\n     *\n     * Possible values are:\n     * - `auto`\n     * - `top`\n     * - `right`\n     * - `bottom`\n     * - `left`\n     */\n    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Any element to be rendered as the title of the Popover.\n     *\n     * It creates a `Popover.Title` inside the `Popover` passing the title directly into it.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the `Popover.Title` element.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes to be set on the `Popover.Content` element.\n     */\n    contentClassName?: string;\n\n    /**\n     * Additional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst PopoverTitle = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-header popover-title ${className}`}>{children}</div>\n);\n\nconst PopoverContent = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-content popover-body ${className}`}>{children}</div>\n);\n\nconst isPopoverTitleOrContent = (element: ReactNode): boolean => {\n    return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);\n};\n\ntype PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {\n    Title: typeof PopoverTitle;\n    Content: typeof PopoverContent;\n};\n\nconst Popover = forwardRef<HTMLDivElement, PropsWithChildren<PopoverProps>>((props, ref) => {\n    const {\n        placement = 'bottom',\n        arrowProps,\n        title,\n        titleClassName = '',\n        contentClassName = '',\n        children,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const hasTitle = !!title;\n    const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);\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    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            // eslint-disable-next-line react/no-unknown-property\n            x-placement={placement}\n            ref={ref}\n            className={`popover fade ${isMounted ? 'show' : ''} ${className}`}\n        >\n            <div className='arrow' {...arrowProps} />\n            {hasTitle && <PopoverTitle className={titleClassName}>{title}</PopoverTitle>}\n            {hasCustomContent ? children : <PopoverContent className={contentClassName}>{children}</PopoverContent>}\n        </div>\n    );\n}) as PopoverType;\n\nPopover.Title = PopoverTitle;\nPopover.Content = PopoverContent;\n\nObject.assign(Popover, PLACEMENT_MAP);\n\nexport default Popover;\n"],"names":["PLACEMENT_MAP","PLACEMENT","PopoverTitle","className","children","jsx","PopoverContent","isPopoverTitleOrContent","element","isValidElement","Popover","forwardRef","props","ref","placement","arrowProps","title","titleClassName","contentClassName","remainingProps","hasTitle","hasCustomContent","React","isMounted","setIsMounted","useState","useEffect","jsxs"],"mappings":";;;AAcO,MAAMA,IAAgB;AAAA,EACzB,MAAMC,EAAU;AAAA,EAChB,KAAKA,EAAU;AAAA,EACf,OAAOA,EAAU;AAAA,EACjB,QAAQA,EAAU;AAAA,EAClB,MAAMA,EAAU;AACpB,GAkDMC,IAAe,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,EAAA,MACpC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEE,IAAiB,CAAC,EAAE,WAAAH,IAAY,IAAI,UAAAC,EAAA,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEG,IAA0B,CAACC,MACtBC,EAAeD,CAAO,MAAMA,EAAQ,SAASN,KAAgBM,EAAQ,SAASF,IAQnFI,IAAUC,EAA4D,CAACC,GAAOC,MAAQ;AACxF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAd;AAAA,IACA,WAAAD,IAAY;AAAA,IACZ,GAAGgB;AAAA,EAAA,IACHP,GAEEQ,IAAW,CAAC,CAACJ,GACbK,IAAmBC,EAAM,SAAS,QAAQlB,CAAQ,EAAE,KAAKG,CAAuB,GAIhF,CAACgB,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAChD,SAAAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAGlC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,MAAK;AAAA,MAGL,eAAaL;AAAA,MACb,KAAAD;AAAA,MACA,WAAW,gBAAgBU,IAAY,SAAS,EAAE,IAAIpB,CAAS;AAAA,MAE/D,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,SAAS,GAAGU,EAAA,CAAY;AAAA,QACtCK,KAAY,gBAAAf,EAACH,GAAA,EAAa,WAAWe,GAAiB,UAAAD,GAAM;AAAA,QAC5DK,IAAmBjB,IAAW,gBAAAC,EAACC,GAAA,EAAe,WAAWY,GAAmB,UAAAd,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlG,CAAC;AAEDM,EAAQ,QAAQR;AAChBQ,EAAQ,UAAUJ;AAElB,OAAO,OAAOI,GAASV,CAAa;"}
+{"version":3,"file":"Popover.js","sources":["../../../src/components/popover/Popover.tsx"],"sourcesContent":["import React, {\n    forwardRef,\n    type ForwardRefExoticComponent,\n    type RefAttributes,\n    type PropsWithChildren,\n    type ReactNode,\n    type ComponentProps,\n    isValidElement,\n    useState,\n    useEffect,\n} from 'react';\n\nimport { PLACEMENT } from '../../values/Placement';\n\nexport const PLACEMENT_MAP = {\n    AUTO: PLACEMENT.AUTO,\n    TOP: PLACEMENT.TOP,\n    RIGHT: PLACEMENT.RIGHT,\n    BOTTOM: PLACEMENT.BOTTOM,\n    LEFT: PLACEMENT.LEFT,\n} as const;\n\nexport type PopoverProps = Omit<ComponentProps<'div'>, 'title'> & {\n    /**\n     * HTML ID attribute, necessary for accessibility.\n     */\n    id: string;\n\n    /**\n     * Sets the direction the Popover is positioned towards.\n     *\n     * This is generally provided by the OverlayTrigger component positioning the Popover.\n     *\n     * Possible values are:\n     *\n     * - `auto`\n     * - `top`\n     * - `right`\n     * - `bottom`\n     * - `left`\n     */\n    placement?: 'auto' | 'top' | 'right' | 'bottom' | 'left';\n\n    /**\n     * Additional props assigned to the arrow element. Internally used.\n     */\n    arrowProps?: Record<string, unknown>;\n\n    /**\n     * Any element to be rendered as the title of the Popover.\n     *\n     * It creates a `Popover.Title` inside the `Popover` passing the title directly into it.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Additional classes to be set on the `Popover.Title` element.\n     */\n    titleClassName?: string;\n\n    /**\n     * Additional classes to be set on the `Popover.Content` element.\n     */\n    contentClassName?: string;\n\n    /**\n     * Additional class names for the wrapper element.\n     */\n    className?: string;\n};\n\nconst PopoverTitle = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-header popover-title ${className}`}>{children}</div>\n);\n\nconst PopoverContent = ({ className = '', children }: PropsWithChildren<{ className?: string }>) => (\n    <div className={`popover-content popover-body ${className}`}>{children}</div>\n);\n\nconst isPopoverTitleOrContent = (element: ReactNode): boolean => {\n    return isValidElement(element) && (element.type === PopoverTitle || element.type === PopoverContent);\n};\n\ntype PopoverType = ForwardRefExoticComponent<PropsWithChildren<PopoverProps> & RefAttributes<HTMLDivElement>> & {\n    Title: typeof PopoverTitle;\n    Content: typeof PopoverContent;\n};\n\nconst Popover = forwardRef<HTMLDivElement, PropsWithChildren<PopoverProps>>((props, ref) => {\n    const {\n        placement = 'bottom',\n        arrowProps,\n        title,\n        titleClassName = '',\n        contentClassName = '',\n        children,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const hasTitle = !!title;\n    const hasCustomContent = React.Children.toArray(children).some(isPopoverTitleOrContent);\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    return (\n        <div\n            {...remainingProps}\n            role='tooltip'\n            // x-placement is used by the css to define how to position the arrow.\n            // eslint-disable-next-line react/no-unknown-property\n            x-placement={placement}\n            ref={ref}\n            className={`popover fade ${isMounted ? 'show' : ''} ${className}`}\n        >\n            <div className='arrow' {...arrowProps} />\n            {hasTitle && <PopoverTitle className={titleClassName}>{title}</PopoverTitle>}\n            {hasCustomContent ? children : <PopoverContent className={contentClassName}>{children}</PopoverContent>}\n        </div>\n    );\n}) as PopoverType;\n\nPopover.Title = PopoverTitle;\nPopover.Content = PopoverContent;\n\nObject.assign(Popover, PLACEMENT_MAP);\n\nexport default Popover;\n"],"names":["PLACEMENT_MAP","PLACEMENT","PopoverTitle","className","children","jsx","PopoverContent","isPopoverTitleOrContent","element","isValidElement","Popover","forwardRef","props","ref","placement","arrowProps","title","titleClassName","contentClassName","remainingProps","hasTitle","hasCustomContent","React","isMounted","setIsMounted","useState","useEffect","jsxs"],"mappings":";;;AAcO,MAAMA,IAAgB;AAAA,EACzB,MAAMC,EAAU;AAAA,EAChB,KAAKA,EAAU;AAAA,EACf,OAAOA,EAAU;AAAA,EACjB,QAAQA,EAAU;AAAA,EAClB,MAAMA,EAAU;AACpB,GAmDMC,IAAe,CAAC,EAAE,WAAAC,IAAY,IAAI,UAAAC,EAAA,MACpC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEE,IAAiB,CAAC,EAAE,WAAAH,IAAY,IAAI,UAAAC,EAAA,MACtC,gBAAAC,EAAC,OAAA,EAAI,WAAW,gCAAgCF,CAAS,IAAK,UAAAC,EAAA,CAAS,GAGrEG,IAA0B,CAACC,MACtBC,EAAeD,CAAO,MAAMA,EAAQ,SAASN,KAAgBM,EAAQ,SAASF,IAQnFI,IAAUC,EAA4D,CAACC,GAAOC,MAAQ;AACxF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,YAAAC;AAAA,IACA,OAAAC;AAAA,IACA,gBAAAC,IAAiB;AAAA,IACjB,kBAAAC,IAAmB;AAAA,IACnB,UAAAd;AAAA,IACA,WAAAD,IAAY;AAAA,IACZ,GAAGgB;AAAA,EAAA,IACHP,GAEEQ,IAAW,CAAC,CAACJ,GACbK,IAAmBC,EAAM,SAAS,QAAQlB,CAAQ,EAAE,KAAKG,CAAuB,GAIhF,CAACgB,GAAWC,CAAY,IAAIC,EAAS,EAAK;AAChD,SAAAC,EAAU,MAAMF,EAAa,EAAI,GAAG,CAAA,CAAE,GAGlC,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGR;AAAA,MACJ,MAAK;AAAA,MAGL,eAAaL;AAAA,MACb,KAAAD;AAAA,MACA,WAAW,gBAAgBU,IAAY,SAAS,EAAE,IAAIpB,CAAS;AAAA,MAE/D,UAAA;AAAA,QAAA,gBAAAE,EAAC,OAAA,EAAI,WAAU,SAAS,GAAGU,EAAA,CAAY;AAAA,QACtCK,KAAY,gBAAAf,EAACH,GAAA,EAAa,WAAWe,GAAiB,UAAAD,GAAM;AAAA,QAC5DK,IAAmBjB,IAAW,gBAAAC,EAACC,GAAA,EAAe,WAAWY,GAAmB,UAAAd,EAAA,CAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGlG,CAAC;AAEDM,EAAQ,QAAQR;AAChBQ,EAAQ,UAAUJ;AAElB,OAAO,OAAOI,GAASV,CAAa;"}

package/components/preloader/ImagePreloader.d.ts

@@ -34,7 +34,7 @@ export type ImagePreloaderProps = {
      *
      * The function will receive props containing the `status` and `image` properties.
      *
-     * `status` will be one of 'PENDING', 'FAILED' or 'LOADED'. `image` is the Image element.
+     * `status` will be one of `PENDING`, `FAILED` or `LOADED`. `image` is the Image element.
      */
     children?: ImagePreloaderChild;
 };

package/components/preloader/ImagePreloader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImagePreloader.js","sources":["../../../src/components/preloader/ImagePreloader.tsx"],"sourcesContent":["import { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nconst loadImage =\n    (onLoad: (event: Event) => void, onError: (event: Event | string) => void) =>\n    (src: string, isAnonymous: boolean) => {\n        const image = new Image();\n\n        if (isAnonymous) {\n            image.crossOrigin = 'anonymous';\n        }\n\n        // attach listeners\n        image.onload = onLoad;\n        image.onerror = onError;\n\n        // preload the actual image\n        image.src = src;\n\n        return image;\n    };\n\ntype ImagePreloaderStatus = 'PENDING' | 'FAILED' | 'LOADED';\n\nexport type ImagePreloaderChild = (props: {\n    status: ImagePreloaderStatus;\n    image: HTMLImageElement;\n}) => JSX.Element | null;\n\nexport type ImagePreloaderProps = {\n    /**\n     * The URL of the image to load.\n     */\n    src: string;\n\n    /**\n     * Invoked when the image is loaded.\n     *\n     * @param image The native Image object.\n     */\n    onLoaded?: (image: HTMLImageElement) => void;\n\n    /**\n     * Invoked when the image failed to load.\n     *\n     * @param image The native Image object.\n     */\n    onFailed?: (image: HTMLImageElement) => void;\n\n    /**\n     * Whether to set the \"crossOrigin\" to \"anonymous\".\n     *\n     * @default false\n     */\n    isAnonymous?: boolean;\n\n    /**\n     * A render function can be used to access both the current state and the image element.\n     *\n     * Using this, you can decide how to render the different states and/or the loaded image.\n     *\n     * The function will receive props containing the `status` and `image` properties.\n     *\n     * `status` will be one of 'PENDING', 'FAILED' or 'LOADED'. `image` is the Image element.\n     */\n    children?: ImagePreloaderChild;\n};\n\nconst ImagePreloader = (props: ImagePreloaderProps) => {\n    const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;\n\n    const [status, setStatus] = useState<ImagePreloaderStatus>('PENDING');\n    const [image, setImage] = useState<HTMLImageElement | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    const willUnmount = useRef(false);\n\n    const handleImageLoaded = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('LOADED');\n        onLoaded(currentImage);\n    }, [onLoaded]);\n\n    const handleImageFailed = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('FAILED');\n        onFailed(currentImage);\n    }, [onFailed]);\n\n    const loadImageWithCallbacks = useMemo(\n        () => loadImage(handleImageLoaded, handleImageFailed),\n        [handleImageLoaded, handleImageFailed]\n    );\n\n    useEffect(() => {\n        willUnmount.current = false;\n        setStatus('PENDING');\n\n        const nextImage = loadImageWithCallbacks(src, isAnonymous);\n        imageRef.current = nextImage;\n        setImage(nextImage);\n\n        return () => {\n            willUnmount.current = true;\n        };\n    }, [src, isAnonymous, loadImageWithCallbacks]);\n\n    return children && image ? children({ status, image }) : null;\n};\n\nImagePreloader.STATUS_PENDING = 'PENDING';\nImagePreloader.STATUS_LOADED = 'LOADED';\nImagePreloader.STATUS_FAILED = 'FAILED';\n\nexport default ImagePreloader;\n"],"names":["loadImage","onLoad","onError","src","isAnonymous","image","ImagePreloader","props","onLoaded","noop","onFailed","children","status","setStatus","useState","setImage","imageRef","useRef","willUnmount","handleImageLoaded","useCallback","currentImage","handleImageFailed","loadImageWithCallbacks","useMemo","useEffect","nextImage"],"mappings":";;AAGA,MAAMA,IACF,CAACC,GAAgCC,MACjC,CAACC,GAAaC,MAAyB;AACnC,QAAMC,IAAQ,IAAI,MAAA;AAElB,SAAID,MACAC,EAAM,cAAc,cAIxBA,EAAM,SAASJ,GACfI,EAAM,UAAUH,GAGhBG,EAAM,MAAMF,GAELE;AACX,GAgDEC,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,KAAAJ,GAAK,aAAAC,IAAc,IAAO,UAAAI,IAAWC,GAAM,UAAAC,IAAWD,GAAM,UAAAE,EAAA,IAAaJ,GAE3E,CAACK,GAAQC,CAAS,IAAIC,EAA+B,SAAS,GAC9D,CAACT,GAAOU,CAAQ,IAAID,EAAkC,IAAI,GAC1DE,IAAWC,EAAgC,IAAI,GAE/CC,IAAcD,EAAO,EAAK,GAE1BE,IAAoBC,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBL,EAASa,CAAY;AAAA,EACzB,GAAG,CAACb,CAAQ,CAAC,GAEPc,IAAoBF,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBH,EAASW,CAAY;AAAA,EACzB,GAAG,CAACX,CAAQ,CAAC,GAEPa,IAAyBC;AAAA,IAC3B,MAAMxB,EAAUmB,GAAmBG,CAAiB;AAAA,IACpD,CAACH,GAAmBG,CAAiB;AAAA,EAAA;AAGzC,SAAAG,EAAU,MAAM;AACZ,IAAAP,EAAY,UAAU,IACtBL,EAAU,SAAS;AAEnB,UAAMa,IAAYH,EAAuBpB,GAAKC,CAAW;AACzD,WAAAY,EAAS,UAAUU,GACnBX,EAASW,CAAS,GAEX,MAAM;AACT,MAAAR,EAAY,UAAU;AAAA,IAC1B;AAAA,EACJ,GAAG,CAACf,GAAKC,GAAamB,CAAsB,CAAC,GAEtCZ,KAAYN,IAAQM,EAAS,EAAE,QAAAC,GAAQ,OAAAP,EAAA,CAAO,IAAI;AAC7D;AAEAC,EAAe,iBAAiB;AAChCA,EAAe,gBAAgB;AAC/BA,EAAe,gBAAgB;"}
+{"version":3,"file":"ImagePreloader.js","sources":["../../../src/components/preloader/ImagePreloader.tsx"],"sourcesContent":["import { type JSX, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nconst loadImage =\n    (onLoad: (event: Event) => void, onError: (event: Event | string) => void) =>\n    (src: string, isAnonymous: boolean) => {\n        const image = new Image();\n\n        if (isAnonymous) {\n            image.crossOrigin = 'anonymous';\n        }\n\n        // attach listeners\n        image.onload = onLoad;\n        image.onerror = onError;\n\n        // preload the actual image\n        image.src = src;\n\n        return image;\n    };\n\ntype ImagePreloaderStatus = 'PENDING' | 'FAILED' | 'LOADED';\n\nexport type ImagePreloaderChild = (props: {\n    status: ImagePreloaderStatus;\n    image: HTMLImageElement;\n}) => JSX.Element | null;\n\nexport type ImagePreloaderProps = {\n    /**\n     * The URL of the image to load.\n     */\n    src: string;\n\n    /**\n     * Invoked when the image is loaded.\n     *\n     * @param image The native Image object.\n     */\n    onLoaded?: (image: HTMLImageElement) => void;\n\n    /**\n     * Invoked when the image failed to load.\n     *\n     * @param image The native Image object.\n     */\n    onFailed?: (image: HTMLImageElement) => void;\n\n    /**\n     * Whether to set the \"crossOrigin\" to \"anonymous\".\n     *\n     * @default false\n     */\n    isAnonymous?: boolean;\n\n    /**\n     * A render function can be used to access both the current state and the image element.\n     *\n     * Using this, you can decide how to render the different states and/or the loaded image.\n     *\n     * The function will receive props containing the `status` and `image` properties.\n     *\n     * `status` will be one of `PENDING`, `FAILED` or `LOADED`. `image` is the Image element.\n     */\n    children?: ImagePreloaderChild;\n};\n\nconst ImagePreloader = (props: ImagePreloaderProps) => {\n    const { src, isAnonymous = false, onLoaded = noop, onFailed = noop, children } = props;\n\n    const [status, setStatus] = useState<ImagePreloaderStatus>('PENDING');\n    const [image, setImage] = useState<HTMLImageElement | null>(null);\n    const imageRef = useRef<HTMLImageElement | null>(null);\n\n    const willUnmount = useRef(false);\n\n    const handleImageLoaded = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('LOADED');\n        onLoaded(currentImage);\n    }, [onLoaded]);\n\n    const handleImageFailed = useCallback(() => {\n        const currentImage = imageRef.current;\n\n        if (willUnmount.current || !currentImage) {\n            return;\n        }\n        setStatus('FAILED');\n        onFailed(currentImage);\n    }, [onFailed]);\n\n    const loadImageWithCallbacks = useMemo(\n        () => loadImage(handleImageLoaded, handleImageFailed),\n        [handleImageLoaded, handleImageFailed]\n    );\n\n    useEffect(() => {\n        willUnmount.current = false;\n        setStatus('PENDING');\n\n        const nextImage = loadImageWithCallbacks(src, isAnonymous);\n        imageRef.current = nextImage;\n        setImage(nextImage);\n\n        return () => {\n            willUnmount.current = true;\n        };\n    }, [src, isAnonymous, loadImageWithCallbacks]);\n\n    return children && image ? children({ status, image }) : null;\n};\n\nImagePreloader.STATUS_PENDING = 'PENDING';\nImagePreloader.STATUS_LOADED = 'LOADED';\nImagePreloader.STATUS_FAILED = 'FAILED';\n\nexport default ImagePreloader;\n"],"names":["loadImage","onLoad","onError","src","isAnonymous","image","ImagePreloader","props","onLoaded","noop","onFailed","children","status","setStatus","useState","setImage","imageRef","useRef","willUnmount","handleImageLoaded","useCallback","currentImage","handleImageFailed","loadImageWithCallbacks","useMemo","useEffect","nextImage"],"mappings":";;AAGA,MAAMA,IACF,CAACC,GAAgCC,MACjC,CAACC,GAAaC,MAAyB;AACnC,QAAMC,IAAQ,IAAI,MAAA;AAElB,SAAID,MACAC,EAAM,cAAc,cAIxBA,EAAM,SAASJ,GACfI,EAAM,UAAUH,GAGhBG,EAAM,MAAMF,GAELE;AACX,GAgDEC,IAAiB,CAACC,MAA+B;AACnD,QAAM,EAAE,KAAAJ,GAAK,aAAAC,IAAc,IAAO,UAAAI,IAAWC,GAAM,UAAAC,IAAWD,GAAM,UAAAE,EAAA,IAAaJ,GAE3E,CAACK,GAAQC,CAAS,IAAIC,EAA+B,SAAS,GAC9D,CAACT,GAAOU,CAAQ,IAAID,EAAkC,IAAI,GAC1DE,IAAWC,EAAgC,IAAI,GAE/CC,IAAcD,EAAO,EAAK,GAE1BE,IAAoBC,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBL,EAASa,CAAY;AAAA,EACzB,GAAG,CAACb,CAAQ,CAAC,GAEPc,IAAoBF,EAAY,MAAM;AACxC,UAAMC,IAAeL,EAAS;AAE9B,IAAIE,EAAY,WAAW,CAACG,MAG5BR,EAAU,QAAQ,GAClBH,EAASW,CAAY;AAAA,EACzB,GAAG,CAACX,CAAQ,CAAC,GAEPa,IAAyBC;AAAA,IAC3B,MAAMxB,EAAUmB,GAAmBG,CAAiB;AAAA,IACpD,CAACH,GAAmBG,CAAiB;AAAA,EAAA;AAGzC,SAAAG,EAAU,MAAM;AACZ,IAAAP,EAAY,UAAU,IACtBL,EAAU,SAAS;AAEnB,UAAMa,IAAYH,EAAuBpB,GAAKC,CAAW;AACzD,WAAAY,EAAS,UAAUU,GACnBX,EAASW,CAAS,GAEX,MAAM;AACT,MAAAR,EAAY,UAAU;AAAA,IAC1B;AAAA,EACJ,GAAG,CAACf,GAAKC,GAAamB,CAAsB,CAAC,GAEtCZ,KAAYN,IAAQM,EAAS,EAAE,QAAAC,GAAQ,OAAAP,EAAA,CAAO,IAAI;AAC7D;AAEAC,EAAe,iBAAiB;AAChCA,EAAe,gBAAgB;AAC/BA,EAAe,gBAAgB;"}

package/components/radiobutton/RadioButton.d.ts

@@ -1,5 +1,5 @@
 import { ChangeEventHandler, MouseEventHandler, PropsWithChildren, ReactNode, Ref, HTMLProps } from 'react';
-export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick'> & {
+export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick' | 'onChange'> & {
     /**
      * Define any rioglyph icon like "rioglyph-truck".
      */
@@ -7,7 +7,7 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
     /**
      * The label position.
      *
-     * Possible values are: "horizontal" or "vertical".
+     * Possible values are: `'horizontal'` or `'vertical'`.
      *
      * @default 'vertical'
      */
@@ -25,7 +25,7 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
     /**
      * Callback function that is invoked when the radio button is clicked.
      *
-     * @default noop
+     * @default () => {}
      */
     onClick?: MouseEventHandler<{
         value: string | string[] | number;
@@ -34,7 +34,7 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
      * Callback function that is invoked when the radio button is toggled and the state should change (for controlled
      * usage).
      *
-     * @default noop
+     * @default () => {}
      */
     onChange?: ChangeEventHandler;
     /**
@@ -81,8 +81,10 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
     name?: string;
     /**
      * The value attribute is a string containing the radio button's value but __it is never shown to the user__.
+     *
      * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are
      * currently checked are submitted, and the reported value is the value of the value attribute.
+     *
      * If the value is not otherwise specified, it is the string on by default.
      *
      * This is useful when using native `FormData` when submitting a form to get the selected radio button value.
@@ -92,8 +94,10 @@ export type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onCl
      * Number of the index used for keyboard support.
      *
      * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is
-     * defined by the document's source order. To disable the focus set the value to -1. A positive value means the
-     * element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.
+     * defined by the document's source order. To disable the focus set the value to -1.
+     *
+     * A positive value means the element should be focusable in sequential keyboard navigation,
+     * with its order defined by the value of the number.
      *
      * @default 0
      */

package/components/radiobutton/RadioButton.js

@@ -1,7 +1,7 @@
 import { jsxs as N, jsx as n } from "react/jsx-runtime";
 import { useRef as O } from "react";
-import g from "classnames";
-import { noop as x } from "es-toolkit/compat";
+import { noop as g } from "es-toolkit/compat";
+import x from "../../utils/classNames.js";
 const S = (s) => {
   const { icon: o, iconSize: e, iconLabelPosition: a, text: i } = s, l = {
     width: `${e}px`,
@@ -19,8 +19,8 @@ const S = (s) => {
     iconLabelPosition: e = "vertical",
     iconSize: a = 16,
     label: i,
-    onClick: l = x,
-    onChange: m = x,
+    onClick: l = g,
+    onChange: m = g,
     checked: c,
     defaultChecked: I,
     disabled: u = !1,
@@ -53,7 +53,7 @@ const S = (s) => {
         b.checked = !b.checked;
       }
     }
-  }, C = i || r, B = g("radio", L && "radio-inline", h), E = g(y && "icon-right", h);
+  }, C = i || r, B = x("radio", L && "radio-inline", h), E = x(y && "icon-right", h);
   return /* @__PURE__ */ N(
     "label",
     {

package/components/radiobutton/RadioButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radiobutton/RadioButton.tsx"],"sourcesContent":["import {\n    type ChangeEventHandler,\n    type KeyboardEvent,\n    type MouseEventHandler,\n    type PropsWithChildren,\n    type ReactNode,\n    type Ref,\n    useRef,\n    type HTMLProps,\n} from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/compat';\n\ntype RadioButtonIconProps = {\n    icon: string;\n    iconSize: number;\n    iconLabelPosition: 'vertical' | 'horizontal';\n    text: string | ReactNode;\n};\n\nconst RadioButtonIcon = (props: RadioButtonIconProps) => {\n    const { icon, iconSize, iconLabelPosition, text } = props;\n\n    const iconStyles = {\n        width: `${iconSize}px`,\n        height: `${iconSize}px`,\n        fontSize: `${iconSize}px`,\n        lineHeight: `${iconSize}px`,\n    };\n\n    return (\n        <span className={`radio-icon label-${iconLabelPosition}`}>\n            <span className={`rioglyph ${icon}`} style={iconStyles} />\n            <span className='radio-label'>{text}</span>\n        </span>\n    );\n};\n\nexport type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick'> & {\n    /**\n     * Define any rioglyph icon like \"rioglyph-truck\".\n     */\n    icon?: string;\n\n    /**\n     * The label position.\n     *\n     * Possible values are: \"horizontal\" or \"vertical\".\n     *\n     * @default 'vertical'\n     */\n    iconLabelPosition?: 'vertical' | 'horizontal';\n\n    /**\n     * The icon Size in px.\n     *\n     * @default 16\n     */\n    iconSize?: number;\n\n    /**\n     * Defines the label text.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Callback function that is invoked when the radio button is clicked.\n     *\n     * @default noop\n     */\n    onClick?: MouseEventHandler<{ value: string | string[] | number }>;\n\n    /**\n     * Callback function that is invoked when the radio button is toggled and the state should change (for controlled\n     * usage).\n     *\n     * @default noop\n     */\n    onChange?: ChangeEventHandler;\n\n    /**\n     * Defines whether the radio is checked (for controlled usage).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the radio is initially checked (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    className?: string;\n\n    /**\n     * Defines whether the radio button is applying an inline style.\n     *\n     * Use this in combination with other radio buttons.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Displays the icon on the right side of the text.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a radio tick.\n     *\n     * @default false\n     */\n    custom?: boolean;\n\n    /**\n     * Name to be given to the input element.\n     */\n    name?: string;\n\n    /**\n     * The value attribute is a string containing the radio button's value but __it is never shown to the user__.\n     * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are\n     * currently checked are submitted, and the reported value is the value of the value attribute.\n     * If the value is not otherwise specified, it is the string on by default.\n     *\n     * This is useful when using native `FormData` when submitting a form to get the selected radio button value.\n     */\n    value?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is\n     * defined by the document's source order. To disable the focus set the value to -1. A positive value means the\n     * element should be focusable in sequential keyboard navigation, with its order defined by the value of the number.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Ref which is added to the input element.\n     */\n    inputRef?: Ref<HTMLInputElement>;\n};\n\nconst RadioButton = (props: PropsWithChildren<RadioButtonProps>) => {\n    const {\n        icon = '',\n        iconLabelPosition = 'vertical',\n        iconSize = 16,\n        label,\n        onClick = noop,\n        onChange = noop,\n        checked,\n        defaultChecked,\n        disabled = false,\n        className,\n        inline = false,\n        right = false,\n        custom = false,\n        name,\n        value,\n        tabIndex = 0,\n        inputRef,\n        children,\n        ...remainingProps\n    } = props;\n\n    const isControlled = checked !== null && checked !== undefined;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    const handleToggleKeyDown = (event: KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ': // toggle on space\n            case 'Enter': // open on enter\n                toggle(event);\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: KeyboardEvent<HTMLLabelElement>) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        // Controlled case - uses \"onChange()\" instead of \"onClick()\" callback\n        if (isControlled) {\n            onChange(event);\n            return;\n        }\n\n        // Uncontrolled case - set the input checked or unchecked\n        if (labelRef.current) {\n            const checkbox = labelRef.current.firstChild as HTMLInputElement;\n            checkbox.checked = !checkbox.checked;\n        }\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames('radio', inline && 'radio-inline', className);\n    const inputClassnames = classNames(right && 'icon-right', className);\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                type='radio'\n                defaultChecked={defaultChecked}\n                checked={checked}\n                disabled={disabled}\n                className={inputClassnames}\n                ref={inputRef}\n                onClick={onClick}\n                // Only wire onChange for controlled usage; uncontrolled relies on native state + onClick.\n                onChange={isControlled ? onChange : undefined}\n                name={name}\n                value={value}\n            />\n            {renderCustomIcon && (\n                <RadioButtonIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && (\n                <span className='radio-text'>\n                    <span>{text}</span>\n                </span>\n            )}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nRadioButton.ICON_LABEL_VERTICAL = 'vertical';\nRadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport default RadioButton;\n"],"names":["RadioButtonIcon","props","icon","iconSize","iconLabelPosition","text","iconStyles","jsxs","jsx","RadioButton","label","onClick","noop","onChange","checked","defaultChecked","disabled","className","inline","right","custom","name","value","tabIndex","inputRef","children","remainingProps","isControlled","labelRef","useRef","handleToggleKeyDown","event","toggle","checkbox","labelClassnames","classNames","inputClassnames"],"mappings":"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"}
+{"version":3,"file":"RadioButton.js","sources":["../../../src/components/radiobutton/RadioButton.tsx"],"sourcesContent":["import {\n    type ChangeEvent,\n    type ChangeEventHandler,\n    type KeyboardEvent,\n    type MouseEventHandler,\n    type PropsWithChildren,\n    type ReactNode,\n    type Ref,\n    useRef,\n    type HTMLProps,\n} from 'react';\nimport { noop } from 'es-toolkit/compat';\n\nimport classNames from '../../utils/classNames';\n\ntype RadioButtonIconProps = {\n    icon: string;\n    iconSize: number;\n    iconLabelPosition: 'vertical' | 'horizontal';\n    text: string | ReactNode;\n};\n\nconst RadioButtonIcon = (props: RadioButtonIconProps) => {\n    const { icon, iconSize, iconLabelPosition, text } = props;\n\n    const iconStyles = {\n        width: `${iconSize}px`,\n        height: `${iconSize}px`,\n        fontSize: `${iconSize}px`,\n        lineHeight: `${iconSize}px`,\n    };\n\n    return (\n        <span className={`radio-icon label-${iconLabelPosition}`}>\n            <span className={`rioglyph ${icon}`} style={iconStyles} />\n            <span className='radio-label'>{text}</span>\n        </span>\n    );\n};\n\nexport type RadioButtonProps = Omit<HTMLProps<HTMLLabelElement>, 'label' | 'onClick' | 'onChange'> & {\n    /**\n     * Define any rioglyph icon like \"rioglyph-truck\".\n     */\n    icon?: string;\n\n    /**\n     * The label position.\n     *\n     * Possible values are: `'horizontal'` or `'vertical'`.\n     *\n     * @default 'vertical'\n     */\n    iconLabelPosition?: 'vertical' | 'horizontal';\n\n    /**\n     * The icon Size in px.\n     *\n     * @default 16\n     */\n    iconSize?: number;\n\n    /**\n     * Defines the label text.\n     */\n    label?: string | ReactNode;\n\n    /**\n     * Callback function that is invoked when the radio button is clicked.\n     *\n     * @default () => {}\n     */\n    onClick?: MouseEventHandler<{ value: string | string[] | number }>;\n\n    /**\n     * Callback function that is invoked when the radio button is toggled and the state should change (for controlled\n     * usage).\n     *\n     * @default () => {}\n     */\n    onChange?: ChangeEventHandler;\n\n    /**\n     * Defines whether the radio is checked (for controlled usage).\n     */\n    checked?: boolean;\n\n    /**\n     * Defines whether the radio is initially checked (state can be changed on click).\n     */\n    defaultChecked?: boolean;\n\n    /**\n     * Defines whether the checkbox is disabled.\n     *\n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Additional classes to be set on the input element.\n     */\n    className?: string;\n\n    /**\n     * Defines whether the radio button is applying an inline style.\n     *\n     * Use this in combination with other radio buttons.\n     *\n     * @default false\n     */\n    inline?: boolean;\n\n    /**\n     * Displays the icon on the right side of the text.\n     *\n     * @default false\n     */\n    right?: boolean;\n\n    /**\n     * Allows for rendering a completely different layout with or without a radio tick.\n     *\n     * @default false\n     */\n    custom?: boolean;\n\n    /**\n     * Name to be given to the input element.\n     */\n    name?: string;\n\n    /**\n     * The value attribute is a string containing the radio button's value but __it is never shown to the user__.\n     *\n     * It serves a special purpose for inputs of type radio: when a form is submitted, only radio buttons which are\n     * currently checked are submitted, and the reported value is the value of the value attribute.\n     *\n     * If the value is not otherwise specified, it is the string on by default.\n     *\n     * This is useful when using native `FormData` when submitting a form to get the selected radio button value.\n     */\n    value?: string;\n\n    /**\n     * Number of the index used for keyboard support.\n     *\n     * An index of 0 means that the element should be focusable in sequential keyboard navigation, but its order is\n     * defined by the document's source order. To disable the focus set the value to -1.\n     *\n     * A positive value means the element should be focusable in sequential keyboard navigation,\n     * with its order defined by the value of the number.\n     *\n     * @default 0\n     */\n    tabIndex?: number;\n\n    /**\n     * Ref which is added to the input element.\n     */\n    inputRef?: Ref<HTMLInputElement>;\n};\n\nconst RadioButton = (props: PropsWithChildren<RadioButtonProps>) => {\n    const {\n        icon = '',\n        iconLabelPosition = 'vertical',\n        iconSize = 16,\n        label,\n        onClick = noop,\n        onChange = noop,\n        checked,\n        defaultChecked,\n        disabled = false,\n        className,\n        inline = false,\n        right = false,\n        custom = false,\n        name,\n        value,\n        tabIndex = 0,\n        inputRef,\n        children,\n        ...remainingProps\n    } = props;\n\n    const isControlled = checked !== null && checked !== undefined;\n\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    const handleToggleKeyDown = (event: KeyboardEvent<HTMLLabelElement>) => {\n        switch (event.key) {\n            case ' ': // toggle on space\n            case 'Enter': // open on enter\n                toggle(event);\n                break;\n\n            default:\n                break;\n        }\n    };\n\n    const toggle = (event: KeyboardEvent<HTMLLabelElement>) => {\n        event.preventDefault();\n\n        if (disabled) {\n            return;\n        }\n\n        // Controlled case - uses \"onChange()\" instead of \"onClick()\" callback\n        if (isControlled) {\n            onChange(event as unknown as ChangeEvent<HTMLInputElement>);\n            return;\n        }\n\n        // Uncontrolled case - set the input checked or unchecked\n        if (labelRef.current) {\n            const checkbox = labelRef.current.firstChild as HTMLInputElement;\n            checkbox.checked = !checkbox.checked;\n        }\n    };\n\n    const text = label || children;\n\n    const labelClassnames = classNames('radio', inline && 'radio-inline', className);\n    const inputClassnames = classNames(right && 'icon-right', className);\n\n    const renderCustomIcon = !!icon;\n    const renderCustomContent = custom && children;\n    const renderDefault = !icon && !custom;\n\n    return (\n        <label\n            {...remainingProps}\n            className={labelClassnames}\n            tabIndex={tabIndex}\n            onKeyDown={handleToggleKeyDown}\n            ref={labelRef}\n        >\n            <input\n                type='radio'\n                defaultChecked={defaultChecked}\n                checked={checked}\n                disabled={disabled}\n                className={inputClassnames}\n                ref={inputRef}\n                onClick={onClick}\n                // Only wire onChange for controlled usage; uncontrolled relies on native state + onClick.\n                onChange={isControlled ? onChange : undefined}\n                name={name}\n                value={value}\n            />\n            {renderCustomIcon && (\n                <RadioButtonIcon icon={icon} iconSize={iconSize} iconLabelPosition={iconLabelPosition} text={text} />\n            )}\n            {renderDefault && (\n                <span className='radio-text'>\n                    <span>{text}</span>\n                </span>\n            )}\n            {renderCustomContent && children}\n        </label>\n    );\n};\n\nRadioButton.ICON_LABEL_VERTICAL = 'vertical';\nRadioButton.ICON_LABEL_HORIZONTAL = 'horizontal';\n\nexport default RadioButton;\n"],"names":["RadioButtonIcon","props","icon","iconSize","iconLabelPosition","text","iconStyles","jsxs","jsx","RadioButton","label","onClick","noop","onChange","checked","defaultChecked","disabled","className","inline","right","custom","name","value","tabIndex","inputRef","children","remainingProps","isControlled","labelRef","useRef","handleToggleKeyDown","event","toggle","checkbox","labelClassnames","classNames","inputClassnames"],"mappings":"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"}

package/components/radiobutton/RadioCardGroup.d.ts

@@ -0,0 +1,86 @@
+import { ChangeEvent, HTMLProps, ReactNode } from 'react';
+export type RadioCardOption = {
+    /**
+     * Value passed to the underlying input element.
+     */
+    value: string;
+    /**
+     * Card headline content.
+     */
+    label: string | ReactNode;
+    /**
+     * Optional description shown below the card headline.
+     */
+    description?: string | ReactNode;
+    /**
+     * Disables the option.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional classes to apply to a single card.
+     */
+    className?: string;
+};
+export type RadioCardGroupProps = Omit<HTMLProps<HTMLDivElement>, 'onChange' | 'defaultValue'> & {
+    /**
+     * Name used for all radios in this group.
+     */
+    name: string;
+    /**
+     * List of selectable options.
+     */
+    options?: RadioCardOption[];
+    /**
+     * Selected value (controlled usage).
+     */
+    value?: string;
+    /**
+     * Initially selected value (uncontrolled usage).
+     */
+    defaultValue?: string;
+    /**
+     * Card layout variant.
+     *
+     * Possible values are: `'inline'`, `'stacked'` or `'stacked-horizontal'`.
+     *
+     * @default 'inline'
+     */
+    variant?: 'inline' | 'stacked' | 'stacked-horizontal';
+    /**
+     * Gap utility class used for the inline layout.
+     *
+     * @default 'gap-15'
+     */
+    gap?: string;
+    /**
+     * Callback invoked when selection changes.
+     */
+    onChange?: (value: string, event: ChangeEvent<HTMLInputElement>) => void;
+    /**
+     * Additional classes applied to each card.
+     */
+    cardClassName?: string;
+};
+type RadioCardItemProps = Omit<HTMLProps<HTMLLabelElement>, 'onClick' | 'onChange' | 'onBlur' | 'onFocus'> & {
+    /**
+     * Value passed to the underlying radio input.
+     */
+    value: string;
+    /**
+     * Disables this radio card.
+     *
+     * @default false
+     */
+    disabled?: boolean;
+};
+type InternalRadioCardItemProps = {
+    _itemIndex?: number;
+    _itemsCount?: number;
+};
+export declare const RadioCardItem: (props: RadioCardItemProps & InternalRadioCardItemProps) => import("react/jsx-runtime").JSX.Element;
+type RadioCardIndicatorProps = Omit<HTMLProps<HTMLSpanElement>, 'children'>;
+export declare const RadioCardIndicator: ({ className, ...remainingProps }: RadioCardIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+declare const RadioCardGroup: (props: RadioCardGroupProps) => import("react/jsx-runtime").JSX.Element;
+export default RadioCardGroup;