@rio-cloud/rio-uikit 2.0.0 → 2.1.0

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';\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     *\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

@@ -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.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":";;;;AAoBA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,MAAAC,GAAM,UAAAC,GAAU,mBAAAC,GAAmB,MAAAC,MAASJ,GAE9CK,IAAa;AAAA,IACf,OAAO,GAAGH,CAAQ;AAAA,IAClB,QAAQ,GAAGA,CAAQ;AAAA,IACnB,UAAU,GAAGA,CAAQ;AAAA,IACrB,YAAY,GAAGA,CAAQ;AAAA,EAAA;AAG3B,SACI,gBAAAI,EAAC,QAAA,EAAK,WAAW,oBAAoBH,CAAiB,IAClD,UAAA;AAAA,IAAA,gBAAAI,EAAC,UAAK,WAAW,YAAYN,CAAI,IAAI,OAAOI,GAAY;AAAA,IACxD,gBAAAE,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAH,EAAA,CAAK;AAAA,EAAA,GACxC;AAER,GAyHMI,IAAc,CAACR,MAA+C;AAChE,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,mBAAAE,IAAoB;AAAA,IACpB,UAAAD,IAAW;AAAA,IACX,OAAAO;AAAA,IACA,SAAAC,IAAUC;AAAA,IACV,UAAAC,IAAWD;AAAA,IACX,SAAAE;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHzB,GAEE0B,IAAeb,KAAY,MAE3Bc,IAAWC,EAAyB,IAAI,GAExCC,IAAsB,CAACC,MAA2C;AACpE,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAAA;AAAA,MACL,KAAK;AACD,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAGA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAA2C;AAGvD,QAFAA,EAAM,eAAA,GAEF,CAAAf,GAKJ;AAAA,UAAIW,GAAc;AACd,QAAAd,EAASkB,CAAK;AACd;AAAA,MACJ;AAGA,UAAIH,EAAS,SAAS;AAClB,cAAMK,IAAWL,EAAS,QAAQ;AAClC,QAAAK,EAAS,UAAU,CAACA,EAAS;AAAA,MACjC;AAAA;AAAA,EACJ,GAEM5B,IAAOK,KAASe,GAEhBS,IAAkBC,EAAW,SAASjB,KAAU,gBAAgBD,CAAS,GACzEmB,IAAkBD,EAAWhB,KAAS,cAAcF,CAAS;AAMnE,SACI,gBAAAV;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGmB;AAAA,MACJ,WAAWQ;AAAA,MACX,UAAAX;AAAA,MACA,WAAWO;AAAA,MACX,KAAKF;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAApB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAAO;AAAA,YACA,SAAAD;AAAA,YACA,UAAAE;AAAA,YACA,WAAWoB;AAAA,YACX,KAAKZ;AAAA,YACL,SAAAb;AAAA,YAEA,UAAUgB,IAAed,IAAW;AAAA,YACpC,MAAAQ;AAAA,YACA,OAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAvBa,CAAC,CAACpB,KA0Bf,gBAAAM,EAACR,GAAA,EAAgB,MAAAE,GAAY,UAAAC,GAAoB,mBAAAC,GAAsC,MAAAC,GAAY;AAAA,QAxBzF,CAACH,KAAQ,CAACkB,uBA2BnB,QAAA,EAAK,WAAU,cACZ,UAAA,gBAAAZ,EAAC,QAAA,EAAM,aAAK,EAAA,CAChB;AAAA,QA9BgBY,KAAUK,KAgCNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAhB,EAAY,sBAAsB;AAClCA,EAAY,wBAAwB;"}
+{"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 () => {}\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);\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":";;;;AAoBA,MAAMA,IAAkB,CAACC,MAAgC;AACrD,QAAM,EAAE,MAAAC,GAAM,UAAAC,GAAU,mBAAAC,GAAmB,MAAAC,MAASJ,GAE9CK,IAAa;AAAA,IACf,OAAO,GAAGH,CAAQ;AAAA,IAClB,QAAQ,GAAGA,CAAQ;AAAA,IACnB,UAAU,GAAGA,CAAQ;AAAA,IACrB,YAAY,GAAGA,CAAQ;AAAA,EAAA;AAG3B,SACI,gBAAAI,EAAC,QAAA,EAAK,WAAW,oBAAoBH,CAAiB,IAClD,UAAA;AAAA,IAAA,gBAAAI,EAAC,UAAK,WAAW,YAAYN,CAAI,IAAI,OAAOI,GAAY;AAAA,IACxD,gBAAAE,EAAC,QAAA,EAAK,WAAU,eAAe,UAAAH,EAAA,CAAK;AAAA,EAAA,GACxC;AAER,GA6HMI,IAAc,CAACR,MAA+C;AAChE,QAAM;AAAA,IACF,MAAAC,IAAO;AAAA,IACP,mBAAAE,IAAoB;AAAA,IACpB,UAAAD,IAAW;AAAA,IACX,OAAAO;AAAA,IACA,SAAAC,IAAUC;AAAA,IACV,UAAAC,IAAWD;AAAA,IACX,SAAAE;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC,IAAQ;AAAA,IACR,QAAAC,IAAS;AAAA,IACT,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHzB,GAEE0B,IAAeb,KAAY,MAE3Bc,IAAWC,EAAyB,IAAI,GAExCC,IAAsB,CAACC,MAA2C;AACpE,YAAQA,EAAM,KAAA;AAAA,MACV,KAAK;AAAA;AAAA,MACL,KAAK;AACD,QAAAC,EAAOD,CAAK;AACZ;AAAA,IAGA;AAAA,EAEZ,GAEMC,IAAS,CAACD,MAA2C;AAGvD,QAFAA,EAAM,eAAA,GAEF,CAAAf,GAKJ;AAAA,UAAIW,GAAc;AACd,QAAAd,EAASkB,CAAK;AACd;AAAA,MACJ;AAGA,UAAIH,EAAS,SAAS;AAClB,cAAMK,IAAWL,EAAS,QAAQ;AAClC,QAAAK,EAAS,UAAU,CAACA,EAAS;AAAA,MACjC;AAAA;AAAA,EACJ,GAEM5B,IAAOK,KAASe,GAEhBS,IAAkBC,EAAW,SAASjB,KAAU,gBAAgBD,CAAS,GACzEmB,IAAkBD,EAAWhB,KAAS,cAAcF,CAAS;AAMnE,SACI,gBAAAV;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGmB;AAAA,MACJ,WAAWQ;AAAA,MACX,UAAAX;AAAA,MACA,WAAWO;AAAA,MACX,KAAKF;AAAA,MAEL,UAAA;AAAA,QAAA,gBAAApB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,gBAAAO;AAAA,YACA,SAAAD;AAAA,YACA,UAAAE;AAAA,YACA,WAAWoB;AAAA,YACX,KAAKZ;AAAA,YACL,SAAAb;AAAA,YAEA,UAAUgB,IAAed,IAAW;AAAA,YACpC,MAAAQ;AAAA,YACA,OAAAC;AAAA,UAAA;AAAA,QAAA;AAAA,QAvBa,CAAC,CAACpB,KA0Bf,gBAAAM,EAACR,GAAA,EAAgB,MAAAE,GAAY,UAAAC,GAAoB,mBAAAC,GAAsC,MAAAC,GAAY;AAAA,QAxBzF,CAACH,KAAQ,CAACkB,uBA2BnB,QAAA,EAAK,WAAU,cACZ,UAAA,gBAAAZ,EAAC,QAAA,EAAM,aAAK,EAAA,CAChB;AAAA,QA9BgBY,KAAUK,KAgCNA;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGpC;AAEAhB,EAAY,sBAAsB;AAClCA,EAAY,wBAAwB;"}

package/components/releaseNotes/ReleaseNotes.d.ts

@@ -18,8 +18,6 @@ export type ReleaseNotesProps = {
      * Translated release notes of the following shape:
      *
      * @example
-     *
-     * ```tsx
      * {
      *     "0.1.2": {
      *         date: '23.07.2018',
@@ -32,7 +30,6 @@ export type ReleaseNotesProps = {
      *         ),
      *     }
      * }
-     * ```
      */
     releaseNotes: ReleaseNotesData;
 };

package/components/releaseNotes/ReleaseNotes.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReleaseNotes.js","sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     *\n     * ```tsx\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     * ```\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"names":["Note","props","note","version","date","content","jsxs","jsx","isArray","map","item","ReleaseNotes","releaseNotes","remainingProps","toPairs","key"],"mappings":";;AAaA,MAAMA,IAAO,CAACC,MAAqB;AAC/B,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYF,GACpB,EAAE,MAAAG,GAAM,SAAAC,EAAA,IAAYH;AAC1B,SACI,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,iBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,GAAGJ,CAAO,IAAG;AAAA,MACzD,gBAAAI,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACtC,EAAA,CACJ;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mCACV,UAAAC,EAAQH,CAAO,IACZ,gBAAAE,EAAC,MAAA,EAAG,WAAU,iDACT,UAAAE,EAAIJ,GAAS,CAACK,MACX,gBAAAH,EAAC,MAAA,EAA6C,UAAAG,EAAA,GAArC,GAAGP,CAAO,SAAS,KAAK,OAAA,CAAQ,EAAU,CACtD,EAAA,CACL,IAEA,gBAAAI,EAAC,OAAA,EAAK,aAAQ,EAAA,CAEtB;AAAA,EAAA,EAAA,GAjBsC,GAAGJ,CAAO,OAkBpD;AAER,GAiCMQ,IAAe,CAACV,MAA6B;AAC/C,QAAM,EAAE,cAAAW,GAAc,GAAGC,EAAA,IAAmBZ;AAC5C,SACI,gBAAAM,EAAC,SAAK,GAAGM,GACJ,YAAIC,EAAQF,CAAY,GAAG,CAAC,CAACG,GAAKb,CAAI,wBAClCF,GAAA,EAAe,MAAAE,GAAY,SAASa,EAAA,GAA1BA,CAA+B,CAC7C,GACL;AAER;"}
+{"version":3,"file":"ReleaseNotes.js","sources":["../../../src/components/releaseNotes/ReleaseNotes.tsx"],"sourcesContent":["import type React from 'react';\nimport { isArray, map, toPairs } from 'es-toolkit/compat';\n\nexport type NoteContent = (React.ReactNode | JSX.Element) | (React.ReactNode | JSX.Element)[];\n\nexport type NoteProps = {\n    version: string;\n    note: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nconst Note = (props: NoteProps) => {\n    const { note, version } = props;\n    const { date, content } = note;\n    return (\n        <div className='panel panel-default' key={`${version}-note`}>\n            <div className='panel-heading'>\n                <div className='display-flex justify-content-between'>\n                    <span className='text-size-16 text-medium'>{`${version}`}</span>\n                    <span className='text-thin'>{date}</span>\n                </div>\n            </div>\n            <div className='panel-body white-space-pre-line'>\n                {isArray(content) ? (\n                    <ul className='margin-bottom-0 margin-left-5 padding-left-25'>\n                        {map(content, (item: React.ReactNode) => (\n                            <li key={`${version}-note-${Math.random()}`}>{item}</li>\n                        ))}\n                    </ul>\n                ) : (\n                    <div>{content}</div>\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport type ReleaseNotesData = {\n    [key: string]: {\n        date: string;\n        content: NoteContent;\n    };\n};\n\nexport type ReleaseNotesProps = {\n    /**\n     * Translated release notes of the following shape:\n     *\n     * @example\n     * {\n     *     \"0.1.2\": {\n     *         date: '23.07.2018',\n     *         content: (\n     *             <div className='padding-left-15'>\n     *                 Map view within the tour history table\n     *                 • Modern map design as used in the Beta of the fleet monitor\n     *                 • Works with all event types\n     *             </div>\n     *         ),\n     *     }\n     * }\n     */\n    releaseNotes: ReleaseNotesData;\n};\n\nconst ReleaseNotes = (props: ReleaseNotesProps) => {\n    const { releaseNotes, ...remainingProps } = props;\n    return (\n        <div {...remainingProps}>\n            {map(toPairs(releaseNotes), ([key, note]) => (\n                <Note key={key} note={note} version={key} />\n            ))}\n        </div>\n    );\n};\n\nexport default ReleaseNotes;\n"],"names":["Note","props","note","version","date","content","jsxs","jsx","isArray","map","item","ReleaseNotes","releaseNotes","remainingProps","toPairs","key"],"mappings":";;AAaA,MAAMA,IAAO,CAACC,MAAqB;AAC/B,QAAM,EAAE,MAAAC,GAAM,SAAAC,EAAA,IAAYF,GACpB,EAAE,MAAAG,GAAM,SAAAC,EAAA,IAAYH;AAC1B,SACI,gBAAAI,EAAC,OAAA,EAAI,WAAU,uBACX,UAAA;AAAA,IAAA,gBAAAC,EAAC,SAAI,WAAU,iBACX,UAAA,gBAAAD,EAAC,OAAA,EAAI,WAAU,wCACX,UAAA;AAAA,MAAA,gBAAAC,EAAC,QAAA,EAAK,WAAU,4BAA4B,UAAA,GAAGJ,CAAO,IAAG;AAAA,MACzD,gBAAAI,EAAC,QAAA,EAAK,WAAU,aAAa,UAAAH,EAAA,CAAK;AAAA,IAAA,EAAA,CACtC,EAAA,CACJ;AAAA,IACA,gBAAAG,EAAC,OAAA,EAAI,WAAU,mCACV,UAAAC,EAAQH,CAAO,IACZ,gBAAAE,EAAC,MAAA,EAAG,WAAU,iDACT,UAAAE,EAAIJ,GAAS,CAACK,MACX,gBAAAH,EAAC,MAAA,EAA6C,UAAAG,EAAA,GAArC,GAAGP,CAAO,SAAS,KAAK,OAAA,CAAQ,EAAU,CACtD,EAAA,CACL,IAEA,gBAAAI,EAAC,OAAA,EAAK,aAAQ,EAAA,CAEtB;AAAA,EAAA,EAAA,GAjBsC,GAAGJ,CAAO,OAkBpD;AAER,GA8BMQ,IAAe,CAACV,MAA6B;AAC/C,QAAM,EAAE,cAAAW,GAAc,GAAGC,EAAA,IAAmBZ;AAC5C,SACI,gBAAAM,EAAC,SAAK,GAAGM,GACJ,YAAIC,EAAQF,CAAY,GAAG,CAAC,CAACG,GAAKb,CAAI,wBAClCF,GAAA,EAAe,MAAAE,GAAY,SAASa,EAAA,GAA1BA,CAA+B,CAC7C,GACL;AAER;"}

package/components/resizer/Resizer.d.ts

@@ -10,19 +10,31 @@ export type ResizerProps = {
      * Defines where the resize handle is positioned relative to the element to resize.
      *
      * Possible values are:
-     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or
-     * `left`, `right`, `top`, `bottom`.
+     *
+     * - `Resizer.LEFT`,
+     * - `Resizer.RIGHT`,
+     * - `Resizer.TOP`,
+     * - `Resizer.BOTTOM`
+     * - `'left`',
+     * - `'right`',
+     * - `'top`',
+     * - `'bottom'`
      */
     position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;
     /**
      * Defines on which axis to resize.
      *
      * Possible values are:
-     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.
+     *
+     * - `Resizer.HORIZONTAL`
+     * - `Resizer.VERTICAL`
+     * - `'x'`
+     * - `'y'`
      */
     direction?: typeof HORIZONTAL | typeof VERTICAL;
     /**
      * Callback when the resize starts, means when the handle is pressed. It returns the respective event.
+     *
      * @param event
      * @returns
      */
@@ -31,12 +43,14 @@ export type ResizerProps = {
      * Callback when the resize handle is moved. The function returns the distant between the last
      * position and the mouse movement. Means you can either subtract or add this diff to the elements
      * width you want to change.
+     *
      * @param diff
      * @returns
      */
     onResize?: (diff: number) => void;
     /**
      * Callback when the resize ends, means when the handle is released. It returns the respective event.
+     *
      * @param event
      * @returns
      */

package/components/resizer/Resizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Resizer.js","sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     * `Resizer.LEFT`, `Resizer.RIGHT`, `Resizer.TOP`, `Resizer.BOTTOM` or\n     * `left`, `right`, `top`, `bottom`.\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     * `Resizer.HORIZONTAL`, `Resizer.VERTICAL` or `x`, `y`.\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return () => {\n            removeListeners();\n        };\n    }, []);\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"names":["HORIZONTAL","VERTICAL","LEFT","RIGHT","TOP","BOTTOM","createListeners","targetNode","onEnd","onMove","ownerDocument","Resizer","props","className","direction","position","onResizeStart","noop","onResize","onResizeEnd","children","remainingProps","eventsRef","useRef","elementRef","isDragRef","startPositionRef","useEffect","removeListeners","getClientX","event","getClientY","handleMouseStart","mouseEvent","clientX","clientY","handleEnd","handleMove","handleTouchStart","firstTouch","diff","wrapperClasses","classNames","jsx"],"mappings":"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"}
+{"version":3,"file":"Resizer.js","sources":["../../../src/components/resizer/Resizer.tsx"],"sourcesContent":["import React, { useEffect, useRef, type MouseEvent, type TouchEvent, type PropsWithChildren } from 'react';\nimport classNames from 'classnames';\nimport { noop } from 'es-toolkit/function';\n\nconst HORIZONTAL = 'x';\nconst VERTICAL = 'y';\n\nconst LEFT = 'left';\nconst RIGHT = 'right';\nconst TOP = 'top';\nconst BOTTOM = 'bottom';\n\nexport type ResizerProps = {\n    /**\n     * Defines where the resize handle is positioned relative to the element to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.LEFT`,\n     * - `Resizer.RIGHT`,\n     * - `Resizer.TOP`,\n     * - `Resizer.BOTTOM`\n     * - `'left`',\n     * - `'right`',\n     * - `'top`',\n     * - `'bottom'`\n     */\n    position?: typeof LEFT | typeof RIGHT | typeof TOP | typeof BOTTOM;\n\n    /**\n     * Defines on which axis to resize.\n     *\n     * Possible values are:\n     *\n     * - `Resizer.HORIZONTAL`\n     * - `Resizer.VERTICAL`\n     * - `'x'`\n     * - `'y'`\n     */\n    direction?: typeof HORIZONTAL | typeof VERTICAL;\n\n    /**\n     * Callback when the resize starts, means when the handle is pressed. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeStart?: (event: MouseEvent | TouchEvent) => void;\n\n    /**\n     * Callback when the resize handle is moved. The function returns the distant between the last\n     * position and the mouse movement. Means you can either subtract or add this diff to the elements\n     * width you want to change.\n     *\n     * @param diff\n     * @returns\n     */\n    onResize?: (diff: number) => void;\n\n    /**\n     * Callback when the resize ends, means when the handle is released. It returns the respective event.\n     *\n     * @param event\n     * @returns\n     */\n    onResizeEnd?: (event: Event) => void;\n\n    /**\n     * Additional classes to be set on the wrapper element.\n     */\n    className?: string;\n};\n\ntype Position = {\n    x: number;\n    y: number;\n};\n\nconst createListeners = (\n    targetNode: HTMLDivElement | null,\n    onEnd: (event: Event) => void,\n    onMove: (event: Event) => void\n) => {\n    if (!targetNode) {\n        return;\n    }\n\n    // The read-only ownerDocument property of the Node interface returns\n    // the top-level document object of the node.\n    const ownerDocument = targetNode.ownerDocument;\n\n    ownerDocument.addEventListener('mouseup', onEnd);\n    ownerDocument.addEventListener('mousemove', onMove);\n    ownerDocument.addEventListener('touchend', onEnd);\n    ownerDocument.addEventListener('touchmove', onMove);\n    return {\n        remove: () => {\n            ownerDocument.removeEventListener('mouseup', onEnd);\n            ownerDocument.removeEventListener('mousemove', onMove);\n            ownerDocument.removeEventListener('touchend', onEnd);\n            ownerDocument.removeEventListener('touchmove', onMove);\n        },\n    };\n};\n\nconst Resizer = (props: PropsWithChildren<ResizerProps>) => {\n    const {\n        className = '',\n        direction = HORIZONTAL,\n        position = RIGHT,\n        onResizeStart = noop,\n        onResize = noop,\n        onResizeEnd = noop,\n        children,\n        ...remainingProps\n    } = props;\n\n    const eventsRef = useRef<{ remove: () => void } | undefined | null>(null);\n\n    // Use refs here instead of local state as the move event listener fired before the state is set\n    // and then it would work with outdated state at that time.\n    const elementRef = useRef<HTMLDivElement>(null);\n    const isDragRef = useRef<boolean>(false);\n    const startPositionRef = useRef<Position>({ x: 0, y: 0 });\n\n    useEffect(() => {\n        return () => {\n            removeListeners();\n        };\n    }, []);\n\n    const getClientX = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientX;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientX;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const getClientY = (event: Event) => {\n        // Note: some browsers don't provide the global \"TouchEvent\" constructor!\n        if (!!window.TouchEvent && event instanceof window.TouchEvent) {\n            return event.touches[0].clientY;\n        }\n\n        if (event instanceof MouseEvent) {\n            return event.clientY;\n        }\n\n        throw new Error('Unsupported event type');\n    };\n\n    const handleMouseStart = (event: React.MouseEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const mouseEvent = event.nativeEvent;\n        const { clientX, clientY } = mouseEvent;\n        startPositionRef.current = {\n            x: clientX,\n            y: clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleTouchStart = (event: React.TouchEvent) => {\n        isDragRef.current = true;\n\n        // Use the native event to check for the event type. Otherwise the type check\n        // fails and the start position would be { x: 0, y: 0 }.\n        const touchEvent = event.nativeEvent;\n        const firstTouch = touchEvent.touches[0];\n        startPositionRef.current = {\n            x: firstTouch.clientX,\n            y: firstTouch.clientY,\n        };\n\n        onResizeStart(event);\n\n        eventsRef.current = createListeners(elementRef.current, handleEnd, handleMove);\n    };\n\n    const handleMove = (event: Event) => {\n        if (!isDragRef.current) {\n            return;\n        }\n\n        if (direction === Resizer.HORIZONTAL) {\n            const diff = startPositionRef.current.x - getClientX(event);\n\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        if (direction === Resizer.VERTICAL) {\n            const diff = startPositionRef.current.y - getClientY(event);\n            if (diff !== 0) {\n                onResize(diff);\n            }\n        }\n\n        startPositionRef.current = {\n            x: getClientX(event),\n            y: getClientY(event),\n        };\n    };\n\n    const handleEnd = (event: Event) => {\n        isDragRef.current = false;\n        onResizeEnd(event);\n        removeListeners();\n    };\n\n    const removeListeners = () => {\n        if (eventsRef.current) {\n            eventsRef.current.remove();\n        }\n    };\n\n    const wrapperClasses = classNames(\n        'Resizer',\n        direction === 'x' && 'resize-horizontal',\n        direction === 'y' && 'resize-vertical',\n        position === 'left' && 'resize-left',\n        position === 'right' && 'resize-right',\n        position === 'top' && 'resize-top',\n        position === 'bottom' && 'resize-bottom',\n        className && className\n    );\n\n    return (\n        <div\n            ref={elementRef}\n            className={wrapperClasses}\n            onMouseDown={handleMouseStart}\n            onTouchStart={handleTouchStart}\n            {...remainingProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nResizer.HORIZONTAL = HORIZONTAL as typeof HORIZONTAL;\nResizer.VERTICAL = VERTICAL as typeof VERTICAL;\n\nResizer.LEFT = LEFT as typeof LEFT;\nResizer.RIGHT = RIGHT as typeof RIGHT;\nResizer.TOP = TOP as typeof TOP;\nResizer.BOTTOM = BOTTOM as typeof BOTTOM;\n\nexport default Resizer;\n"],"names":["HORIZONTAL","VERTICAL","LEFT","RIGHT","TOP","BOTTOM","createListeners","targetNode","onEnd","onMove","ownerDocument","Resizer","props","className","direction","position","onResizeStart","noop","onResize","onResizeEnd","children","remainingProps","eventsRef","useRef","elementRef","isDragRef","startPositionRef","useEffect","removeListeners","getClientX","event","getClientY","handleMouseStart","mouseEvent","clientX","clientY","handleEnd","handleMove","handleTouchStart","firstTouch","diff","wrapperClasses","classNames","jsx"],"mappings":";;;;AAIA,MAAMA,IAAa,KACbC,IAAW,KAEXC,IAAO,QACPC,IAAQ,SACRC,IAAM,OACNC,IAAS,UAoETC,IAAkB,CACpBC,GACAC,GACAC,MACC;AACD,MAAI,CAACF;AACD;AAKJ,QAAMG,IAAgBH,EAAW;AAEjC,SAAAG,EAAc,iBAAiB,WAAWF,CAAK,GAC/CE,EAAc,iBAAiB,aAAaD,CAAM,GAClDC,EAAc,iBAAiB,YAAYF,CAAK,GAChDE,EAAc,iBAAiB,aAAaD,CAAM,GAC3C;AAAA,IACH,QAAQ,MAAM;AACV,MAAAC,EAAc,oBAAoB,WAAWF,CAAK,GAClDE,EAAc,oBAAoB,aAAaD,CAAM,GACrDC,EAAc,oBAAoB,YAAYF,CAAK,GACnDE,EAAc,oBAAoB,aAAaD,CAAM;AAAA,IACzD;AAAA,EAAA;AAER,GAEME,IAAU,CAACC,MAA2C;AACxD,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,WAAAC,IAAYd;AAAA,IACZ,UAAAe,IAAWZ;AAAA,IACX,eAAAa,IAAgBC;AAAA,IAChB,UAAAC,IAAWD;AAAA,IACX,aAAAE,IAAcF;AAAA,IACd,UAAAG;AAAA,IACA,GAAGC;AAAA,EAAA,IACHT,GAEEU,IAAYC,EAAkD,IAAI,GAIlEC,IAAaD,EAAuB,IAAI,GACxCE,IAAYF,EAAgB,EAAK,GACjCG,IAAmBH,EAAiB,EAAE,GAAG,GAAG,GAAG,GAAG;AAExD,EAAAI,EAAU,MACC,MAAM;AACT,IAAAC,EAAA;AAAA,EACJ,GACD,CAAA,CAAE;AAEL,QAAMC,IAAa,CAACC,MAAiB;AAEjC,QAAM,OAAO,cAAcA,aAAiB,OAAO;AAC/C,aAAOA,EAAM,QAAQ,CAAC,EAAE;AAG5B,QAAIA,aAAiB;AACjB,aAAOA,EAAM;AAGjB,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC5C,GAEMC,IAAa,CAACD,MAAiB;AAEjC,QAAM,OAAO,cAAcA,aAAiB,OAAO;AAC/C,aAAOA,EAAM,QAAQ,CAAC,EAAE;AAG5B,QAAIA,aAAiB;AACjB,aAAOA,EAAM;AAGjB,UAAM,IAAI,MAAM,wBAAwB;AAAA,EAC5C,GAEME,IAAmB,CAACF,MAA4B;AAClD,IAAAL,EAAU,UAAU;AAIpB,UAAMQ,IAAaH,EAAM,aACnB,EAAE,SAAAI,GAAS,SAAAC,EAAA,IAAYF;AAC7B,IAAAP,EAAiB,UAAU;AAAA,MACvB,GAAGQ;AAAA,MACH,GAAGC;AAAA,IAAA,GAGPnB,EAAcc,CAAK,GAEnBR,EAAU,UAAUhB,EAAgBkB,EAAW,SAASY,GAAWC,CAAU;AAAA,EACjF,GAEMC,IAAmB,CAACR,MAA4B;AAClD,IAAAL,EAAU,UAAU;AAKpB,UAAMc,IADaT,EAAM,YACK,QAAQ,CAAC;AACvC,IAAAJ,EAAiB,UAAU;AAAA,MACvB,GAAGa,EAAW;AAAA,MACd,GAAGA,EAAW;AAAA,IAAA,GAGlBvB,EAAcc,CAAK,GAEnBR,EAAU,UAAUhB,EAAgBkB,EAAW,SAASY,GAAWC,CAAU;AAAA,EACjF,GAEMA,IAAa,CAACP,MAAiB;AACjC,QAAKL,EAAU,SAIf;AAAA,UAAIX,MAAcH,EAAQ,YAAY;AAClC,cAAM6B,IAAOd,EAAiB,QAAQ,IAAIG,EAAWC,CAAK;AAE1D,QAAIU,MAAS,KACTtB,EAASsB,CAAI;AAAA,MAErB;AAEA,UAAI1B,MAAcH,EAAQ,UAAU;AAChC,cAAM6B,IAAOd,EAAiB,QAAQ,IAAIK,EAAWD,CAAK;AAC1D,QAAIU,MAAS,KACTtB,EAASsB,CAAI;AAAA,MAErB;AAEA,MAAAd,EAAiB,UAAU;AAAA,QACvB,GAAGG,EAAWC,CAAK;AAAA,QACnB,GAAGC,EAAWD,CAAK;AAAA,MAAA;AAAA;AAAA,EAE3B,GAEMM,IAAY,CAACN,MAAiB;AAChC,IAAAL,EAAU,UAAU,IACpBN,EAAYW,CAAK,GACjBF,EAAA;AAAA,EACJ,GAEMA,IAAkB,MAAM;AAC1B,IAAIN,EAAU,WACVA,EAAU,QAAQ,OAAA;AAAA,EAE1B,GAEMmB,IAAiBC;AAAA,IACnB;AAAA,IACA5B,MAAc,OAAO;AAAA,IACrBA,MAAc,OAAO;AAAA,IACrBC,MAAa,UAAU;AAAA,IACvBA,MAAa,WAAW;AAAA,IACxBA,MAAa,SAAS;AAAA,IACtBA,MAAa,YAAY;AAAA,IACzBF,KAAaA;AAAA,EAAA;AAGjB,SACI,gBAAA8B;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKnB;AAAA,MACL,WAAWiB;AAAA,MACX,aAAaT;AAAA,MACb,cAAcM;AAAA,MACb,GAAGjB;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGb;AAEAT,EAAQ,aAAaX;AACrBW,EAAQ,WAAWV;AAEnBU,EAAQ,OAAOT;AACfS,EAAQ,QAAQR;AAChBQ,EAAQ,MAAMP;AACdO,EAAQ,SAASN;"}

package/components/rioglyph/Rioglyph.d.ts

@@ -2,7 +2,7 @@ import { RioglyphIconType } from './RioglyphIconType';
 export type IconType = RioglyphIconType;
 export type RioglyphProps = {
     /**
-     * The icon class to display.
+     * The rioglyph icon string OR an external .svg link
      */
     icon: IconType | string;
     /**
@@ -14,31 +14,43 @@ export type RioglyphProps = {
      */
     size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';
     /**
-     * Spinning animation
+     * Spinning animation.
+     *
+     * @default false
      */
     spinning?: boolean;
     /**
-     * Pulsing animation
+     * Pulsing animation.
+     *
+     * @default false
      */
     pulsing?: boolean;
     /**
-     * Filled style
+     * Filled style.
+     *
+     * @default false
      */
     filled?: boolean;
     /**
-     * Pulsing animation
+     * Add a disabled line
+     *
+     * @default false
      */
     disabled?: boolean;
     /**
-     * Pulsing animation
+     * Recolor the disabled line to the danger color.
+     *
+     * @default false
      */
     disabledDanger?: boolean;
     /**
-     * Pulsing animation
+     * Flip the disabled line.
+     *
+     * @default false
      */
     disabledInverse?: boolean;
     /**
-     * The icon class to display as a pair (optional).
+     * The rioglyph icon string OR an external .svg link.
      */
     pairIcon?: IconType | string;
     /**

package/components/rioglyph/Rioglyph.js.map

@@ -1 +1 @@
-{"version":3,"file":"Rioglyph.js","sources":["../../../src/components/rioglyph/Rioglyph.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { RioglyphIconType } from './RioglyphIconType';\n\nexport type IconType = RioglyphIconType;\n\nexport type RioglyphProps = {\n    /**\n     * The icon class to display.\n     */\n    icon: IconType | string;\n\n    /**\n     * Additional classes set to the icon span.\n     */\n    iconClassName?: string;\n\n    /**\n     * The size (text-size) of the icon\n     */\n    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';\n\n    /**\n     * Spinning animation\n     */\n    spinning?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    pulsing?: boolean;\n\n    /**\n     * Filled style\n     */\n    filled?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    disabled?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    disabledDanger?: boolean;\n\n    /**\n     * Pulsing animation\n     */\n    disabledInverse?: boolean;\n\n    /**\n     * The icon class to display as a pair (optional).\n     */\n    pairIcon?: IconType | string;\n\n    /**\n     * Additional classes set to the pairIcon span.\n     */\n    pairIconClassName?: string;\n};\n\nconst Rioglyph = (props: RioglyphProps) => {\n    const {\n        icon,\n        iconClassName = '',\n        pairIcon,\n        pairIconClassName = '',\n        size,\n        spinning = false,\n        pulsing = false,\n        filled = false,\n        disabled = false,\n        disabledDanger = false,\n        disabledInverse = false,\n    } = props;\n\n    const spinningClass = spinning ? 'spinning' : '';\n    const pulsingClass = pulsing ? 'pulsing' : '';\n    const filledClass = filled ? 'rioglyph-filled' : '';\n    const disabledClass = disabled ? 'rioglyph-disabled' : '';\n    const disabledDangerClass = disabledDanger ? 'rioglyph-disabled rioglyph-disabled-danger' : '';\n    const disabledInverseClass = disabledInverse ? 'rioglyph-disabled rioglyph-disabled-inverse' : '';\n\n    let iconStyle: React.CSSProperties | undefined;\n    if (icon.includes('.svg')) {\n        iconStyle = { '--i': `url(${icon})` } as React.CSSProperties;\n    }\n\n    if (pairIcon) {\n        const wrapperClasses = classNames('rioglyph-icon-pair', size && `text-size-${size}`);\n        const iconClasses = classNames('rioglyph', !icon.includes('.svg') && icon, iconClassName);\n        const pairIconClasses = classNames(\n            'rioglyph',\n            !pairIcon.includes('.svg') && pairIcon,\n            pairIconClassName,\n            spinningClass,\n            pulsingClass\n        );\n\n        let pairIconStyle: React.CSSProperties | undefined;\n        if (pairIcon?.includes('.svg')) {\n            pairIconStyle = { '--i': `url(${pairIcon})` } as React.CSSProperties;\n        }\n\n        return (\n            <span className={wrapperClasses}>\n                <span className={iconClasses} style={iconStyle} />\n                <span className={pairIconClasses} style={pairIconStyle} />\n            </span>\n        );\n    }\n\n    const iconClasses = classNames(\n        'rioglyph',\n        !icon.includes('.svg') && icon,\n        size && `text-size-${size}`,\n        disabledClass,\n        disabledDangerClass,\n        disabledInverseClass,\n        iconClassName,\n        spinningClass,\n        pulsingClass,\n        filledClass\n    );\n\n    return <span className={iconClasses} style={iconStyle} />;\n};\n\nexport default Rioglyph;\n"],"names":["Rioglyph","props","icon","iconClassName","pairIcon","pairIconClassName","size","spinning","pulsing","filled","disabled","disabledDanger","disabledInverse","spinningClass","pulsingClass","filledClass","disabledClass","disabledDangerClass","disabledInverseClass","iconStyle","wrapperClasses","classNames","iconClasses","pairIconClasses","pairIconStyle","jsxs","jsx"],"mappings":";;AA+DA,MAAMA,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,EAAA,IAClBX,GAEEY,IAAgBN,IAAW,aAAa,IACxCO,IAAeN,IAAU,YAAY,IACrCO,IAAcN,IAAS,oBAAoB,IAC3CO,IAAgBN,IAAW,sBAAsB,IACjDO,IAAsBN,IAAiB,+CAA+C,IACtFO,IAAuBN,IAAkB,gDAAgD;AAE/F,MAAIO;AAKJ,MAJIjB,EAAK,SAAS,MAAM,MACpBiB,IAAY,EAAE,OAAO,OAAOjB,CAAI,IAAA,IAGhCE,GAAU;AACV,UAAMgB,IAAiBC,EAAW,sBAAsBf,KAAQ,aAAaA,CAAI,EAAE,GAC7EgB,IAAcD,EAAW,YAAY,CAACnB,EAAK,SAAS,MAAM,KAAKA,GAAMC,CAAa,GAClFoB,IAAkBF;AAAA,MACpB;AAAA,MACA,CAACjB,EAAS,SAAS,MAAM,KAAKA;AAAA,MAC9BC;AAAA,MACAQ;AAAA,MACAC;AAAA,IAAA;AAGJ,QAAIU;AACJ,WAAIpB,GAAU,SAAS,MAAM,MACzBoB,IAAgB,EAAE,OAAO,OAAOpB,CAAQ,IAAA,IAIxC,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,GACb,UAAA;AAAA,MAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAAA,MAChD,gBAAAO,EAAC,QAAA,EAAK,WAAWH,GAAiB,OAAOC,EAAA,CAAe;AAAA,IAAA,GAC5D;AAAA,EAER;AAEA,QAAMF,IAAcD;AAAA,IAChB;AAAA,IACA,CAACnB,EAAK,SAAS,MAAM,KAAKA;AAAA,IAC1BI,KAAQ,aAAaA,CAAI;AAAA,IACzBU;AAAA,IACAC;AAAA,IACAC;AAAA,IACAf;AAAA,IACAU;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAGJ,SAAO,gBAAAW,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAC3D;"}
+{"version":3,"file":"Rioglyph.js","sources":["../../../src/components/rioglyph/Rioglyph.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport type { RioglyphIconType } from './RioglyphIconType';\n\nexport type IconType = RioglyphIconType;\n\nexport type RioglyphProps = {\n    /**\n     * The rioglyph icon string OR an external .svg link\n     */\n    icon: IconType | string;\n\n    /**\n     * Additional classes set to the icon span.\n     */\n    iconClassName?: string;\n\n    /**\n     * The size (text-size) of the icon\n     */\n    size?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | '10' | '11' | '12' | '14' | '16' | '18' | '20';\n\n    /**\n     * Spinning animation.\n     * \n     * @default false\n     */\n    spinning?: boolean;\n\n    /**\n     * Pulsing animation.\n     * \n     * @default false\n     */\n    pulsing?: boolean;\n\n    /**\n     * Filled style.\n     * \n     * @default false\n     */\n    filled?: boolean;\n\n    /**\n     * Add a disabled line\n     * \n     * @default false\n     */\n    disabled?: boolean;\n\n    /**\n     * Recolor the disabled line to the danger color.\n     * \n     * @default false\n     */\n    disabledDanger?: boolean;\n\n    /**\n     * Flip the disabled line.\n     * \n     * @default false\n     */\n    disabledInverse?: boolean;\n\n    /**\n     * The rioglyph icon string OR an external .svg link.\n     */\n    pairIcon?: IconType | string;\n\n    /**\n     * Additional classes set to the pairIcon span.\n     */\n    pairIconClassName?: string;\n};\n\nconst Rioglyph = (props: RioglyphProps) => {\n    const {\n        icon,\n        iconClassName = '',\n        pairIcon,\n        pairIconClassName = '',\n        size,\n        spinning = false,\n        pulsing = false,\n        filled = false,\n        disabled = false,\n        disabledDanger = false,\n        disabledInverse = false,\n    } = props;\n\n    const spinningClass = spinning ? 'spinning' : '';\n    const pulsingClass = pulsing ? 'pulsing' : '';\n    const filledClass = filled ? 'rioglyph-filled' : '';\n    const disabledClass = disabled ? 'rioglyph-disabled' : '';\n    const disabledDangerClass = disabledDanger ? 'rioglyph-disabled rioglyph-disabled-danger' : '';\n    const disabledInverseClass = disabledInverse ? 'rioglyph-disabled rioglyph-disabled-inverse' : '';\n\n    let iconStyle: React.CSSProperties | undefined;\n    if (icon.includes('.svg')) {\n        iconStyle = { '--i': `url(${icon})` } as React.CSSProperties;\n    }\n\n    if (pairIcon) {\n        const wrapperClasses = classNames('rioglyph-icon-pair', size && `text-size-${size}`);\n        const iconClasses = classNames('rioglyph', !icon.includes('.svg') && icon, iconClassName);\n        const pairIconClasses = classNames(\n            'rioglyph',\n            !pairIcon.includes('.svg') && pairIcon,\n            pairIconClassName,\n            spinningClass,\n            pulsingClass\n        );\n\n        let pairIconStyle: React.CSSProperties | undefined;\n        if (pairIcon?.includes('.svg')) {\n            pairIconStyle = { '--i': `url(${pairIcon})` } as React.CSSProperties;\n        }\n\n        return (\n            <span className={wrapperClasses}>\n                <span className={iconClasses} style={iconStyle} />\n                <span className={pairIconClasses} style={pairIconStyle} />\n            </span>\n        );\n    }\n\n    const iconClasses = classNames(\n        'rioglyph',\n        !icon.includes('.svg') && icon,\n        size && `text-size-${size}`,\n        disabledClass,\n        disabledDangerClass,\n        disabledInverseClass,\n        iconClassName,\n        spinningClass,\n        pulsingClass,\n        filledClass\n    );\n\n    return <span className={iconClasses} style={iconStyle} />;\n};\n\nexport default Rioglyph;\n"],"names":["Rioglyph","props","icon","iconClassName","pairIcon","pairIconClassName","size","spinning","pulsing","filled","disabled","disabledDanger","disabledInverse","spinningClass","pulsingClass","filledClass","disabledClass","disabledDangerClass","disabledInverseClass","iconStyle","wrapperClasses","classNames","iconClasses","pairIconClasses","pairIconStyle","jsxs","jsx"],"mappings":";;AA2EA,MAAMA,IAAW,CAACC,MAAyB;AACvC,QAAM;AAAA,IACF,MAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,UAAAC;AAAA,IACA,mBAAAC,IAAoB;AAAA,IACpB,MAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,SAAAC,IAAU;AAAA,IACV,QAAAC,IAAS;AAAA,IACT,UAAAC,IAAW;AAAA,IACX,gBAAAC,IAAiB;AAAA,IACjB,iBAAAC,IAAkB;AAAA,EAAA,IAClBX,GAEEY,IAAgBN,IAAW,aAAa,IACxCO,IAAeN,IAAU,YAAY,IACrCO,IAAcN,IAAS,oBAAoB,IAC3CO,IAAgBN,IAAW,sBAAsB,IACjDO,IAAsBN,IAAiB,+CAA+C,IACtFO,IAAuBN,IAAkB,gDAAgD;AAE/F,MAAIO;AAKJ,MAJIjB,EAAK,SAAS,MAAM,MACpBiB,IAAY,EAAE,OAAO,OAAOjB,CAAI,IAAA,IAGhCE,GAAU;AACV,UAAMgB,IAAiBC,EAAW,sBAAsBf,KAAQ,aAAaA,CAAI,EAAE,GAC7EgB,IAAcD,EAAW,YAAY,CAACnB,EAAK,SAAS,MAAM,KAAKA,GAAMC,CAAa,GAClFoB,IAAkBF;AAAA,MACpB;AAAA,MACA,CAACjB,EAAS,SAAS,MAAM,KAAKA;AAAA,MAC9BC;AAAA,MACAQ;AAAA,MACAC;AAAA,IAAA;AAGJ,QAAIU;AACJ,WAAIpB,GAAU,SAAS,MAAM,MACzBoB,IAAgB,EAAE,OAAO,OAAOpB,CAAQ,IAAA,IAIxC,gBAAAqB,EAAC,QAAA,EAAK,WAAWL,GACb,UAAA;AAAA,MAAA,gBAAAM,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAAA,MAChD,gBAAAO,EAAC,QAAA,EAAK,WAAWH,GAAiB,OAAOC,EAAA,CAAe;AAAA,IAAA,GAC5D;AAAA,EAER;AAEA,QAAMF,IAAcD;AAAA,IAChB;AAAA,IACA,CAACnB,EAAK,SAAS,MAAM,KAAKA;AAAA,IAC1BI,KAAQ,aAAaA,CAAI;AAAA,IACzBU;AAAA,IACAC;AAAA,IACAC;AAAA,IACAf;AAAA,IACAU;AAAA,IACAC;AAAA,IACAC;AAAA,EAAA;AAGJ,SAAO,gBAAAW,EAAC,QAAA,EAAK,WAAWJ,GAAa,OAAOH,GAAW;AAC3D;"}

package/components/rules/RulesWrapper.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { motion as e, AnimatePresence as r } from "motion/react";
 const n = ({ children: o, ...t }) => (
-  // @ts-ignore-next-line
+  // @ts-expect-error-next-line
   /* @__PURE__ */ i(e.div, { initial: !1, layout: !0, ...t, children: /* @__PURE__ */ i(r, { children: /* @__PURE__ */ i(e.div, { layout: "position", children: o }) }) })
 );
 export {

package/components/rules/RulesWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"RulesWrapper.js","sources":["../../../src/components/rules/RulesWrapper.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\ntype RulesWrapperProps = HTMLAttributes<HTMLDivElement>;\n\nconst RulesWrapper = ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => (\n    // @ts-ignore-next-line\n    <motion.div initial={false} layout {...remainingProps}>\n        {/* @ts-ignore-next-line */}\n        <AnimatePresence>\n            <motion.div layout='position'>{children}</motion.div>\n        </AnimatePresence>\n    </motion.div>\n);\n\nexport default RulesWrapper;\n"],"names":["RulesWrapper","children","remainingProps","jsx","motion","AnimatePresence"],"mappings":";;AAKA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA;AAAA;AAAA,EAEjC,gBAAAC,EAACC,EAAO,KAAP,EAAW,SAAS,IAAO,QAAM,IAAE,GAAGF,GAEnC,4BAACG,GAAA,EACG,UAAA,gBAAAF,EAACC,EAAO,KAAP,EAAW,QAAO,YAAY,UAAAH,GAAS,GAC5C,EAAA,CACJ;AAAA;"}
+{"version":3,"file":"RulesWrapper.js","sources":["../../../src/components/rules/RulesWrapper.tsx"],"sourcesContent":["import type { HTMLAttributes, PropsWithChildren } from 'react';\nimport { AnimatePresence, motion } from 'motion/react';\n\ntype RulesWrapperProps = HTMLAttributes<HTMLDivElement>;\n\nconst RulesWrapper = ({ children, ...remainingProps }: PropsWithChildren<RulesWrapperProps>) => (\n    // @ts-expect-error-next-line\n    <motion.div initial={false} layout {...remainingProps}>\n        <AnimatePresence>\n            <motion.div layout='position'>{children}</motion.div>\n        </AnimatePresence>\n    </motion.div>\n);\n\nexport default RulesWrapper;\n"],"names":["RulesWrapper","children","remainingProps","jsx","motion","AnimatePresence"],"mappings":";;AAKA,MAAMA,IAAe,CAAC,EAAE,UAAAC,GAAU,GAAGC,EAAA;AAAA;AAAA,EAEjC,gBAAAC,EAACC,EAAO,KAAP,EAAW,SAAS,IAAO,QAAM,IAAE,GAAGF,GACnC,4BAACG,GAAA,EACG,UAAA,gBAAAF,EAACC,EAAO,KAAP,EAAW,QAAO,YAAY,UAAAH,GAAS,GAC5C,EAAA,CACJ;AAAA;"}

package/components/saveableInput/SaveableDateInput.d.ts

@@ -18,15 +18,20 @@ export type SaveableDateInputProps = {
      */
     isValid?: boolean;
     /**
-     * This is the error message that is shown below the input. It uses the built-in error handling, and will be shown when the "isValid" prop is set to false.
+     * This is the error message that is shown below the input. It uses the built-in error handling,
+     * and will be shown when the "isValid" prop is set to false.
      */
     errorMessage?: string | React.ReactNode;
     /**
-     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop is set to false.
+     * Defines wether the error icon is shown or not. If enabled, it will be shown when the "isValid" prop
+     * is set to false.
+     *
+     * @default false
      */
     hideErrorIcon?: boolean;
     /**
      * Callback function triggered when the value changes and is saved.
+     *
      * @param value
      * @param previousValue
      * @returns
@@ -35,6 +40,7 @@ export type SaveableDateInputProps = {
     /**
      * Callback function that gets triggered on every input change. Use this to control the component
      * or when implementing key validation.
+     *
      * @param keyValue the key value that has been entered
      * @returns
      */
@@ -42,11 +48,13 @@ export type SaveableDateInputProps = {
     /**
      * Callback function that gets triggered when the input is in edit mode. Use this
      * to control the component and to handle the previous value on the outside.
+     *
      * @returns
      */
     onEnterEdit?: () => void;
     /**
      * Callback function that gets triggered when edit mode is exited (either saved or cancelled).
+     *
      * @param wasSaved - true if value was saved, false if cancelled/reset
      * @returns
      */
@@ -54,6 +62,7 @@ export type SaveableDateInputProps = {
     /**
      * Callback function that gets triggered when the user aborts the edit mode. Use this
      * to control the component and handle the resetting of previous value on the outside.
+     *
      * @returns
      */
     onCancel?: () => void;
@@ -67,15 +76,24 @@ export type SaveableDateInputProps = {
     invalidExitBehavior?: 'stay-open' | 'reset-and-close';
     /**
      * Defines the button style: `default` or `primary`.
+     *
+     * @default 'primary'
      */
     buttonStyle?: 'primary' | 'default';
     /**
      * Additional HTML attributes to be set on the input element.
      */
     inputProps?: HTMLAttributes<HTMLInputElement>;
+    /**
+     * Additional props passed to the underlying DatePicker component.
+     *
+     * @default {}
+     */
     datePickerProps?: DatePickerProps;
     /**
      * Disables the component so the user cannot enter the edit mode.
+     *
+     * @default false
      */
     disabled?: boolean;
     /**