@rio-cloud/rio-uikit 2.0.1 → 2.2.0

package/components/banner/Banner.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import { createContext as H, useState as y, useRef as E, useEffect as x } from "react";
 import { useReducedMotion as T, AnimatePresence as b, motion as C } from "motion/react";
-import q from "classnames";
+import q from "../../utils/classNames.js";
 import D from "../card/Card.js";
 import m from "../button/Button.js";
 import F from "./BannerActions.js";

package/components/banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { useState, useEffect, createContext, useRef, type ReactNode } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\n\nimport classNames from 'classnames';\n\nimport Card from '../card/Card';\nimport Button from '../button/Button';\nimport BannerPageActions from './BannerActions';\nimport BannerPageContent from './BannerContent';\nimport BannerPageIcon from './BannerIcon';\nimport BannerPage from './BannerPage';\n\nconst BannerContext = createContext<{ nextPage: () => void; prevPage: () => void } | undefined>(undefined);\n\ntype BannerProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default true\n     */\n    show: boolean;\n\n    /**\n     * Defines if a close button is shown or not. You can still add a custom\n     * CTA button to the content that handles visibility.\n     *\n     * @default true\n     */\n    dismissible?: boolean;\n\n    /**\n     * Callback when the close button is clicked.\n     *\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Defines the time when the next page is shown in milliseconds.\n     *\n     * @default 20_000\n     */\n    pageTimeout?: number;\n\n    /**\n     * Defines if the page navigation buttons shall be shown or not.\n     *\n     * @default true\n     */\n    showPageNavigation?: boolean;\n\n    /**\n     * Defines if a border is shown or not. When placed on a white background, please disable the border\n     * so it looks better.\n     *\n     * @default true\n     */\n    border?: boolean;\n\n    /**\n     * Enables or disables initial animation.\n     *\n     * @default true\n     */\n    initialAnimation?: boolean;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The actual banner content. Wrap your content in a <Banner.Page> component.\n     *\n     * When having multiple pages, usa an array of <Banner.Page> components.\n     */\n    children: ReactNode | ReactNode[];\n};\n\nconst Banner = (props: BannerProps) => {\n    const {\n        show = true,\n        dismissible = true,\n        onClose = () => {},\n        pageTimeout = 20_000,\n        showPageNavigation = true,\n        border = true,\n        initialAnimation = true,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const pages = Array.isArray(children) ? children : [children];\n    const pageAmount = pages.length;\n    const hasMultiplePages = pageAmount > 1;\n\n    const [currentPage, setCurrentPage] = useState(0);\n\n    const shouldReduceMotion = useReducedMotion();\n    const hasAnimation = !shouldReduceMotion && initialAnimation;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: \"currentPage\" resets interval on manual page change\n    useEffect(() => {\n        if (!show || pageAmount === 1) {\n            return;\n        }\n\n        const interval = setInterval(() => {\n            nextPage();\n        }, pageTimeout);\n\n        return () => clearInterval(interval);\n    }, [pageAmount, pageTimeout, show, currentPage]);\n\n    // Update height measurement after layout is complete\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // Use ResizeObserver to get accurate measurements after layout\n        const resizeObserver = new ResizeObserver(entries => {\n            const entry = entries[0];\n            if (entry) {\n                // Use getBoundingClientRect for most accurate height\n                const height = entry.target.getBoundingClientRect().height;\n                setContentHeight(height);\n            }\n        });\n\n        resizeObserver.observe(contentRef.current);\n\n        return () => resizeObserver.disconnect();\n    }, [show, currentPage]);\n\n    const nextPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev + 1) % pageAmount);\n        }\n    };\n\n    const prevPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);\n        }\n    };\n\n    const cardClasses = classNames(\n        'Banner display-flex text-color-darker overflow-hidden',\n        'position-relative',\n        !border && 'border-color-white',\n        className\n    );\n\n    return (\n        <BannerContext.Provider value={{ nextPage, prevPage }}>\n            <AnimatePresence>\n                {show && (\n                    <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: contentHeight, opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{\n                            height: { duration: 0.2 },\n                            opacity: { duration: 0.2 },\n                            ease: 'easeInOut',\n                        }}\n                    >\n                        <div ref={contentRef} style={{ position: 'relative' }}>\n                            <Card className={cardClasses} padding={20} {...remainingProps}>\n                                <div className='flex-1-1 overflow-hidden'>\n                                    <AnimatePresence mode='wait'>\n                                        <motion.div\n                                            key={currentPage}\n                                            initial={hasAnimation ? { opacity: 0, x: 100 } : false}\n                                            animate={{ opacity: 1, x: 0 }}\n                                            exit={hasAnimation ? { opacity: 0, x: -100 } : undefined}\n                                            transition={{\n                                                duration: 1.5,\n                                                ease: [0.25, 1, 0.5, 1],\n                                            }}\n                                        >\n                                            {pages[currentPage]}\n                                        </motion.div>\n                                    </AnimatePresence>\n\n                                    {hasMultiplePages && showPageNavigation && (\n                                        <div className='margin-5'>\n                                            <div className='position-absolute bottom-5' style={{ right: '45px' }}>\n                                                <div className='display-flex'>\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={prevPage}\n                                                        iconName='rioglyph-arrow-left'\n                                                        iconOnly\n                                                    />\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={nextPage}\n                                                        iconName='rioglyph-arrow-right'\n                                                        iconOnly\n                                                    />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                                {dismissible && (\n                                    <div className='flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls'>\n                                        <Button\n                                            bsStyle='muted'\n                                            bsSize='sm'\n                                            onClick={onClose}\n                                            iconName='rioglyph-remove'\n                                            iconOnly\n                                        />\n                                    </div>\n                                )}\n                            </Card>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </BannerContext.Provider>\n    );\n};\n\nBanner.Page = BannerPage;\nBanner.Icon = BannerPageIcon;\nBanner.Content = BannerPageContent;\nBanner.Actions = BannerPageActions;\n\nexport default Banner;\n"],"names":["BannerContext","createContext","Banner","props","show","dismissible","onClose","pageTimeout","showPageNavigation","border","initialAnimation","className","children","remainingProps","pages","pageAmount","hasMultiplePages","currentPage","setCurrentPage","useState","hasAnimation","useReducedMotion","contentRef","useRef","contentHeight","setContentHeight","useEffect","interval","nextPage","resizeObserver","entries","entry","height","prev","prevPage","cardClasses","classNames","jsx","AnimatePresence","motion","jsxs","Card","Button","BannerPage","BannerPageIcon","BannerPageContent","BannerPageActions"],"mappings":"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"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/banner/Banner.tsx"],"sourcesContent":["import { useState, useEffect, createContext, useRef, type ReactNode } from 'react';\nimport { motion, AnimatePresence, useReducedMotion } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport Card from '../card/Card';\nimport Button from '../button/Button';\nimport BannerPageActions from './BannerActions';\nimport BannerPageContent from './BannerContent';\nimport BannerPageIcon from './BannerIcon';\nimport BannerPage from './BannerPage';\n\nconst BannerContext = createContext<{ nextPage: () => void; prevPage: () => void } | undefined>(undefined);\n\ntype BannerProps = {\n    /**\n     * Defines if the content is shown or not.\n     *\n     * @default true\n     */\n    show: boolean;\n\n    /**\n     * Defines if a close button is shown or not. You can still add a custom\n     * CTA button to the content that handles visibility.\n     *\n     * @default true\n     */\n    dismissible?: boolean;\n\n    /**\n     * Callback when the close button is clicked.\n     *\n     * @returns\n     */\n    onClose?: () => void;\n\n    /**\n     * Defines the time when the next page is shown in milliseconds.\n     *\n     * @default 20_000\n     */\n    pageTimeout?: number;\n\n    /**\n     * Defines if the page navigation buttons shall be shown or not.\n     *\n     * @default true\n     */\n    showPageNavigation?: boolean;\n\n    /**\n     * Defines if a border is shown or not. When placed on a white background, please disable the border\n     * so it looks better.\n     *\n     * @default true\n     */\n    border?: boolean;\n\n    /**\n     * Enables or disables initial animation.\n     *\n     * @default true\n     */\n    initialAnimation?: boolean;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n\n    /**\n     * The actual banner content. Wrap your content in a <Banner.Page> component.\n     *\n     * When having multiple pages, usa an array of <Banner.Page> components.\n     */\n    children: ReactNode | ReactNode[];\n};\n\nconst Banner = (props: BannerProps) => {\n    const {\n        show = true,\n        dismissible = true,\n        onClose = () => {},\n        pageTimeout = 20_000,\n        showPageNavigation = true,\n        border = true,\n        initialAnimation = true,\n        className = '',\n        children,\n        ...remainingProps\n    } = props;\n\n    const pages = Array.isArray(children) ? children : [children];\n    const pageAmount = pages.length;\n    const hasMultiplePages = pageAmount > 1;\n\n    const [currentPage, setCurrentPage] = useState(0);\n\n    const shouldReduceMotion = useReducedMotion();\n    const hasAnimation = !shouldReduceMotion && initialAnimation;\n\n    const contentRef = useRef<HTMLDivElement>(null);\n    const [contentHeight, setContentHeight] = useState(0);\n\n    // biome-ignore lint/correctness/useExhaustiveDependencies: \"currentPage\" resets interval on manual page change\n    useEffect(() => {\n        if (!show || pageAmount === 1) {\n            return;\n        }\n\n        const interval = setInterval(() => {\n            nextPage();\n        }, pageTimeout);\n\n        return () => clearInterval(interval);\n    }, [pageAmount, pageTimeout, show, currentPage]);\n\n    // Update height measurement after layout is complete\n    // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>\n    useEffect(() => {\n        if (!contentRef.current) {\n            return;\n        }\n\n        // Use ResizeObserver to get accurate measurements after layout\n        const resizeObserver = new ResizeObserver(entries => {\n            const entry = entries[0];\n            if (entry) {\n                // Use getBoundingClientRect for most accurate height\n                const height = entry.target.getBoundingClientRect().height;\n                setContentHeight(height);\n            }\n        });\n\n        resizeObserver.observe(contentRef.current);\n\n        return () => resizeObserver.disconnect();\n    }, [show, currentPage]);\n\n    const nextPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev + 1) % pageAmount);\n        }\n    };\n\n    const prevPage = () => {\n        if (hasMultiplePages) {\n            setCurrentPage(prev => (prev - 1 + pageAmount) % pageAmount);\n        }\n    };\n\n    const cardClasses = classNames(\n        'Banner display-flex text-color-darker overflow-hidden',\n        'position-relative',\n        !border && 'border-color-white',\n        className\n    );\n\n    return (\n        <BannerContext.Provider value={{ nextPage, prevPage }}>\n            <AnimatePresence>\n                {show && (\n                    <motion.div\n                        initial={{ height: 0, opacity: 0 }}\n                        animate={{ height: contentHeight, opacity: 1 }}\n                        exit={{ height: 0, opacity: 0 }}\n                        transition={{\n                            height: { duration: 0.2 },\n                            opacity: { duration: 0.2 },\n                            ease: 'easeInOut',\n                        }}\n                    >\n                        <div ref={contentRef} style={{ position: 'relative' }}>\n                            <Card className={cardClasses} padding={20} {...remainingProps}>\n                                <div className='flex-1-1 overflow-hidden'>\n                                    <AnimatePresence mode='wait'>\n                                        <motion.div\n                                            key={currentPage}\n                                            initial={hasAnimation ? { opacity: 0, x: 100 } : false}\n                                            animate={{ opacity: 1, x: 0 }}\n                                            exit={hasAnimation ? { opacity: 0, x: -100 } : undefined}\n                                            transition={{\n                                                duration: 1.5,\n                                                ease: [0.25, 1, 0.5, 1],\n                                            }}\n                                        >\n                                            {pages[currentPage]}\n                                        </motion.div>\n                                    </AnimatePresence>\n\n                                    {hasMultiplePages && showPageNavigation && (\n                                        <div className='margin-5'>\n                                            <div className='position-absolute bottom-5' style={{ right: '45px' }}>\n                                                <div className='display-flex'>\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={prevPage}\n                                                        iconName='rioglyph-arrow-left'\n                                                        iconOnly\n                                                    />\n                                                    <Button\n                                                        bsStyle='muted'\n                                                        bsSize='xs'\n                                                        onClick={nextPage}\n                                                        iconName='rioglyph-arrow-right'\n                                                        iconOnly\n                                                    />\n                                                </div>\n                                            </div>\n                                        </div>\n                                    )}\n                                </div>\n                                {dismissible && (\n                                    <div className='flex-0 margin-left-10 margin-right--5 margin-top--5 margin-top-0-ls align-self-start align-self-center-ls'>\n                                        <Button\n                                            bsStyle='muted'\n                                            bsSize='sm'\n                                            onClick={onClose}\n                                            iconName='rioglyph-remove'\n                                            iconOnly\n                                        />\n                                    </div>\n                                )}\n                            </Card>\n                        </div>\n                    </motion.div>\n                )}\n            </AnimatePresence>\n        </BannerContext.Provider>\n    );\n};\n\nBanner.Page = BannerPage;\nBanner.Icon = BannerPageIcon;\nBanner.Content = BannerPageContent;\nBanner.Actions = BannerPageActions;\n\nexport default Banner;\n"],"names":["BannerContext","createContext","Banner","props","show","dismissible","onClose","pageTimeout","showPageNavigation","border","initialAnimation","className","children","remainingProps","pages","pageAmount","hasMultiplePages","currentPage","setCurrentPage","useState","hasAnimation","useReducedMotion","contentRef","useRef","contentHeight","setContentHeight","useEffect","interval","nextPage","resizeObserver","entries","entry","height","prev","prevPage","cardClasses","classNames","jsx","AnimatePresence","motion","jsxs","Card","Button","BannerPage","BannerPageIcon","BannerPageContent","BannerPageActions"],"mappings":"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"}

package/components/banner/BannerContent.js

@@ -1,5 +1,5 @@
 import { jsxs as t, jsx as s } from "react/jsx-runtime";
-import f from "classnames";
+import f from "../../utils/classNames.js";
 import x from "../../hooks/useResizeObserver.js";
 const h = 400, z = (r) => {
   const {

package/components/banner/BannerContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"BannerContent.js","sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\nimport classNames from 'classnames';\n\nimport useResizeObserver from '../../useResizeObserver';\n\nconst DEFAULT_MIN_WIDTH_BREAKPOINT = 400;\n\ntype BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {\n    /**\n     * The title for the banner.\n     */\n    title?: string | React.ReactElement;\n\n    /**\n     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.\n     */\n    actions?: React.ReactElement;\n\n    /**\n     * Breakpoint in pixels where the action buttons are placed under the banner text.\n     *\n     * On larger screens, the buttons are next to the text.\n     *\n     * @default 400\n     */\n    minWidthBreakpoint?: number;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerContent = (props: PropsWithChildren<BannerContentProps>) => {\n    const {\n        title,\n        actions,\n        children,\n        minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    // Check size of the container for responsive breakpoints\n    const [contentRef, _, { inlineSize }] = useResizeObserver();\n    const containerWidth = inlineSize ?? 0;\n\n    const contentWithActionClass = classNames(\n        'flex-1-1',\n        'BannerContent',\n        'display-flex gap-15',\n        containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center',\n        className\n    );\n\n    if (actions) {\n        return (\n            <div ref={contentRef} className={contentWithActionClass} {...remainingProps}>\n                <div className='flex-1-1 min-width-100'>\n                    {title && <div className='text-size-16 text-medium'>{title}</div>}\n                    {children}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n\n    return (\n        <div className='flex-1-1'>\n            {title && <div className='text-size-16 text-medium'>{title}</div>}\n            {children}\n        </div>\n    );\n};\n\nexport default BannerContent;\n"],"names":["DEFAULT_MIN_WIDTH_BREAKPOINT","BannerContent","props","title","actions","children","minWidthBreakpoint","className","remainingProps","contentRef","_","inlineSize","useResizeObserver","contentWithActionClass","classNames","jsxs","jsx"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4B/BC,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC,IAAqBN;AAAA,IACrB,WAAAO,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHN,GAGE,CAACO,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAGlCC,IAAyBC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,KALmBH,KAAc,KAMhBL,IAAqB,gBAAgB;AAAA,IACtDC;AAAA,EAAA;AAGJ,SAAIH,sBAEK,OAAA,EAAI,KAAKK,GAAY,WAAWI,GAAyB,GAAGL,GACzD,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,MAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,MAC1DE;AAAA,IAAA,GACL;AAAA,IACCD;AAAA,EAAA,GACL,IAKJ,gBAAAW,EAAC,OAAA,EAAI,WAAU,YACV,UAAA;AAAA,IAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,IAC1DE;AAAA,EAAA,GACL;AAER;"}
+{"version":3,"file":"BannerContent.js","sources":["../../../src/components/banner/BannerContent.tsx"],"sourcesContent":["import type { PropsWithChildren } from 'react';\n\nimport classNames from '../../utils/classNames';\nimport useResizeObserver from '../../useResizeObserver';\n\nconst DEFAULT_MIN_WIDTH_BREAKPOINT = 400;\n\ntype BannerContentProps = Partial<Pick<HTMLDivElement, 'id'>> & {\n    /**\n     * The title for the banner.\n     */\n    title?: string | React.ReactElement;\n\n    /**\n     * Use this to add the banner call-to-action buttons. Wrap them in a <Banner.Actions> component.\n     */\n    actions?: React.ReactElement;\n\n    /**\n     * Breakpoint in pixels where the action buttons are placed under the banner text.\n     *\n     * On larger screens, the buttons are next to the text.\n     *\n     * @default 400\n     */\n    minWidthBreakpoint?: number;\n\n    /**\n     * Additional classname added to the wrapper element.\n     */\n    className?: string;\n};\n\nconst BannerContent = (props: PropsWithChildren<BannerContentProps>) => {\n    const {\n        title,\n        actions,\n        children,\n        minWidthBreakpoint = DEFAULT_MIN_WIDTH_BREAKPOINT,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    // Check size of the container for responsive breakpoints\n    const [contentRef, _, { inlineSize }] = useResizeObserver();\n    const containerWidth = inlineSize ?? 0;\n\n    const contentWithActionClass = classNames(\n        'flex-1-1',\n        'BannerContent',\n        'display-flex gap-15',\n        containerWidth < minWidthBreakpoint ? 'flex-column' : 'flex-row align-items-center',\n        className\n    );\n\n    if (actions) {\n        return (\n            <div ref={contentRef} className={contentWithActionClass} {...remainingProps}>\n                <div className='flex-1-1 min-width-100'>\n                    {title && <div className='text-size-16 text-medium'>{title}</div>}\n                    {children}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n\n    return (\n        <div className='flex-1-1'>\n            {title && <div className='text-size-16 text-medium'>{title}</div>}\n            {children}\n        </div>\n    );\n};\n\nexport default BannerContent;\n"],"names":["DEFAULT_MIN_WIDTH_BREAKPOINT","BannerContent","props","title","actions","children","minWidthBreakpoint","className","remainingProps","contentRef","_","inlineSize","useResizeObserver","contentWithActionClass","classNames","jsxs","jsx"],"mappings":";;;AAKA,MAAMA,IAA+B,KA4B/BC,IAAgB,CAACC,MAAiD;AACpE,QAAM;AAAA,IACF,OAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,oBAAAC,IAAqBN;AAAA,IACrB,WAAAO,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHN,GAGE,CAACO,GAAYC,GAAG,EAAE,YAAAC,EAAA,CAAY,IAAIC,EAAA,GAGlCC,IAAyBC;AAAA,IAC3B;AAAA,IACA;AAAA,IACA;AAAA,KALmBH,KAAc,KAMhBL,IAAqB,gBAAgB;AAAA,IACtDC;AAAA,EAAA;AAGJ,SAAIH,sBAEK,OAAA,EAAI,KAAKK,GAAY,WAAWI,GAAyB,GAAGL,GACzD,UAAA;AAAA,IAAA,gBAAAO,EAAC,OAAA,EAAI,WAAU,0BACV,UAAA;AAAA,MAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,MAC1DE;AAAA,IAAA,GACL;AAAA,IACCD;AAAA,EAAA,GACL,IAKJ,gBAAAW,EAAC,OAAA,EAAI,WAAU,YACV,UAAA;AAAA,IAAAZ,KAAS,gBAAAa,EAAC,OAAA,EAAI,WAAU,4BAA4B,UAAAb,GAAM;AAAA,IAC1DE;AAAA,EAAA,GACL;AAER;"}

package/components/barList/BarList.d.ts

@@ -1,12 +1,38 @@
 import { default as React } from 'react';
 import { SortDirectionType } from '../../utils/SortUtils';
+/**
+ * A single entry in the BarList.
+ *
+ * @template T Custom payload merged into the row data.
+ */
 export type BarListRow<T> = T & {
+    /**
+     * Optional unique identifier. Falls back to `name` when not provided.
+     */
     key?: string;
+    /**
+     * Optional URL. When provided, the label renders as a link.
+     */
     href?: string;
+    /**
+     * Numeric value used for sorting and bar width calculations.
+     */
     value: number;
+    /**
+     * Label shown for the bar.
+     */
     name: string;
+    /**
+     * Text color override for this specific row.
+     */
     color?: string;
+    /**
+     * Progress color override for this specific row.
+     */
     barColor?: string;
+    /**
+     * Background color override for this specific row.
+     */
     background?: string;
 };
 /**

package/components/barList/BarList.js

@@ -1,7 +1,7 @@
 import { jsxs as h, jsx as e } from "react/jsx-runtime";
 import f, { useMemo as j } from "react";
-import n from "classnames";
 import { motion as u } from "motion/react";
+import n from "../../utils/classNames.js";
 import { SortDirection as A } from "../../utils/SortUtils.js";
 import { useSortedBars as H } from "./useSortedBars.js";
 const O = {

package/components/barList/BarList.js.map

@@ -1 +1 @@
-{"version":3,"file":"BarList.js","sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport classNames from 'classnames';\nimport { motion, type Variants } from 'motion/react';\n\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\nexport type BarListRow<T> = T & {\n    key?: string;\n    href?: string;\n    value: number;\n    name: string;\n    color?: string; // individual progress color override\n    barColor?: string; // individual bar color override\n    background?: string; // individual background override\n};\n\n/**\n * Props for the BarList component.\n *\n * @template T - The type of the custom data associated with each bar row.\n */\ntype BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Array of bar row data to be rendered.\n     */\n    data: BarListRow<T>[];\n\n    /**\n     * Optional function to format the numeric value displayed on the right side of each bar.\n     * Can return a string or a React element.\n     *\n     * @example\n     * valueFormatter={(value) => `${value}%`}\n     */\n    valueFormatter?: (value: number) => string | React.ReactElement;\n\n    /**\n     * A reference value used to calculate relative widths.\n     * If not provided, the maximum value in `data` will be used.\n     *\n     * @default max(data.value)\n     */\n    referenceValue?: number;\n\n    /**\n     * Whether to animate the bar width transitions using Framer Motion.\n     *\n     * @default false\n     */\n    showAnimation?: boolean;\n\n    /**\n     * Callback fired when a bar is clicked.\n     *\n     * @param payload - The full data object of the clicked bar.\n     */\n    onSelectRow?: (payload: BarListRow<T>) => void;\n\n    /**\n     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.\n     *\n     * @default 'none'\n     */\n    sortOrder?: SortDirectionType | 'none';\n\n    /**\n     * Height of each bar row in pixels.\n     *\n     * @default 32\n     */\n    rowHeight?: number;\n\n    /**\n     * Opacity applied to non-hovered bars (between 0 and 1).\n     *\n     * @default 0.5\n     */\n    opacity?: number;\n\n    /**\n     * CSS color string used for the active/progress portion of each bar.\n     *\n     * @default 'bg-highlight-light'\n     */\n    barColor?: string;\n\n    /**\n     * CSS color string used for the text labels.\n     *\n     * @default 'text-color-darker'\n     */\n    labelColor?: string;\n\n    /**\n     * CSS color string used for the bar background.\n     *\n     * @default 'bg-transparent'\n     */\n    background?: string;\n\n    /**\n     * Additional className added to the wrapper element.\n     */\n    className?: string;\n};\n\n// Animation variants\nconst containerVariants: Variants = {\n    animate: {\n        transition: {\n            staggerChildren: 0.1,\n        },\n    },\n};\n\nconst barVariants: Variants = {\n    initial: { width: 0 },\n    animate: (width: number) => ({\n        width: `${width}%`,\n        transition: { duration: 0.8, ease: 'easeOut' },\n    }),\n};\n\nconst DEFAULT_ROW_HEIGHT = 25;\nconst DEFAULT_OPACITY = 0.5;\n\nconst BarListInner = <T,>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>) => {\n    const {\n        data = [],\n        valueFormatter = value => value.toString(),\n        showAnimation = false,\n        onSelectRow,\n        referenceValue,\n        sortOrder = SortDirection.DESCENDING,\n        barColor = 'bg-highlight-light',\n        labelColor = 'text-color-darker',\n        background = 'bg-transparent',\n        rowHeight = DEFAULT_ROW_HEIGHT,\n        opacity = DEFAULT_OPACITY,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const sortedData = useSortedBars(data, sortOrder, item => item.value);\n\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n\n    const widths = useMemo(() => {\n        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);\n        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));\n    }, [sortedData, referenceValue]);\n\n    return (\n        <div\n            {...remainingProps}\n            ref={forwardedRef}\n            className={classNames('display-flex justify-content-between gap-15', className)}\n        >\n            <motion.div\n                variants={showAnimation ? containerVariants : undefined}\n                initial='initial'\n                animate='animate'\n                className='width-100pct space-y-5'\n            >\n                {sortedData.map((item, index) => {\n                    const width = widths[index];\n\n                    const itemLabelColor = item.color ?? labelColor;\n                    const itemBarColor = item.barColor ?? barColor;\n                    const itemBackground = item.background ?? background;\n\n                    return (\n                        <div\n                            key={item.key ?? item.name}\n                            onMouseEnter={() => setHoveredIndex(index)}\n                            onMouseLeave={() => setHoveredIndex(null)}\n                            onClick={() => onSelectRow?.(item)}\n                            className={classNames(\n                                'position-relative width-100pct rounded-small',\n                                'transition-all transition-ease-in-out transition-duration-01',\n                                itemBackground,\n                                onSelectRow && 'cursor-pointer',\n                                hoveredIndex === index && 'bg-lightest'\n                            )}\n                        >\n                            {/* Animated Progress Bar */}\n                            <motion.div\n                                custom={width}\n                                variants={showAnimation ? barVariants : undefined}\n                                className={classNames(\n                                    'display-flex align-items-center rounded-small',\n                                    'transition-all transition-ease-in-out transition-duration-01',\n                                    itemBarColor\n                                )}\n                                style={{ height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }}\n                                role='presentation'\n                            />\n\n                            {/* Label */}\n                            <div className='position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10'>\n                                {item.href ? (\n                                    <a\n                                        href={item.href}\n                                        className={itemLabelColor}\n                                        target='_blank'\n                                        rel='noreferrer'\n                                        onClick={event => event.stopPropagation()}\n                                    >\n                                        {item.name}\n                                    </a>\n                                ) : (\n                                    <div className={itemLabelColor}>{item.name}</div>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </motion.div>\n\n            {/* legend */}\n            <div className='space-y-5'>\n                {sortedData.map(item => (\n                    <div\n                        key={item.key ?? item.name}\n                        className={classNames('display-flex align-items-center justify-content-end')}\n                        style={{ height: `${rowHeight}px` }}\n                    >\n                        <div className='text-color-darkest'>{valueFormatter(item.value)}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nBarListInner.displayName = 'BarList';\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n    props: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"],"names":["containerVariants","barVariants","width","DEFAULT_ROW_HEIGHT","DEFAULT_OPACITY","BarListInner","props","forwardedRef","data","valueFormatter","value","showAnimation","onSelectRow","referenceValue","sortOrder","SortDirection","barColor","labelColor","background","rowHeight","opacity","className","remainingProps","sortedData","useSortedBars","item","hoveredIndex","setHoveredIndex","React","widths","useMemo","base","jsxs","classNames","jsx","motion","index","itemLabelColor","itemBarColor","itemBackground","event","BarList"],"mappings":";;;;;;AA4GA,MAAMA,IAA8B;AAAA,EAChC,SAAS;AAAA,IACL,YAAY;AAAA,MACR,iBAAiB;AAAA,IAAA;AAAA,EACrB;AAER,GAEMC,IAAwB;AAAA,EAC1B,SAAS,EAAE,OAAO,EAAA;AAAA,EAClB,SAAS,CAACC,OAAmB;AAAA,IACzB,OAAO,GAAGA,CAAK;AAAA,IACf,YAAY,EAAE,UAAU,KAAK,MAAM,UAAA;AAAA,EAAU;AAErD,GAEMC,IAAqB,IACrBC,IAAkB,KAElBC,IAAe,CAAKC,GAAwBC,MAAqD;AACnG,QAAM;AAAA,IACF,MAAAC,IAAO,CAAA;AAAA,IACP,gBAAAC,IAAiB,CAAAC,MAASA,EAAM,SAAA;AAAA,IAChC,eAAAC,IAAgB;AAAA,IAChB,aAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,WAAAC,IAAYC,EAAc;AAAA,IAC1B,UAAAC,IAAW;AAAA,IACX,YAAAC,IAAa;AAAA,IACb,YAAAC,IAAa;AAAA,IACb,WAAAC,IAAYhB;AAAA,IACZ,SAAAiB,IAAUhB;AAAA,IACV,WAAAiB,IAAY;AAAA,IACZ,GAAGC;AAAA,EAAA,IACHhB,GAEEiB,IAAaC,EAAchB,GAAMM,GAAW,CAAAW,MAAQA,EAAK,KAAK,GAE9D,CAACC,GAAcC,CAAe,IAAIC,EAAM,SAAwB,IAAI,GAEpEC,IAASC,EAAQ,MAAM;AACzB,UAAMC,IAAOlB,KAAkB,KAAK,IAAI,GAAGU,EAAW,IAAI,CAAAE,MAAQA,EAAK,KAAK,GAAG,CAAC;AAChF,WAAOF,EAAW,IAAI,CAAAE,MAASM,MAAS,KAAKN,EAAK,UAAU,IAAI,IAAI,KAAK,IAAKA,EAAK,QAAQM,IAAQ,KAAK,CAAC,CAAE;AAAA,EAC/G,GAAG,CAACR,GAAYV,CAAc,CAAC;AAE/B,SACI,gBAAAmB;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAGV;AAAA,MACJ,KAAKf;AAAA,MACL,WAAW0B,EAAW,+CAA+CZ,CAAS;AAAA,MAE9E,UAAA;AAAA,QAAA,gBAAAa;AAAA,UAACC,EAAO;AAAA,UAAP;AAAA,YACG,UAAUxB,IAAgBX,IAAoB;AAAA,YAC9C,SAAQ;AAAA,YACR,SAAQ;AAAA,YACR,WAAU;AAAA,YAET,UAAAuB,EAAW,IAAI,CAACE,GAAMW,MAAU;AAC7B,oBAAMlC,IAAQ2B,EAAOO,CAAK,GAEpBC,IAAiBZ,EAAK,SAASR,GAC/BqB,IAAeb,EAAK,YAAYT,GAChCuB,IAAiBd,EAAK,cAAcP;AAE1C,qBACI,gBAAAc;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBAEG,cAAc,MAAML,EAAgBS,CAAK;AAAA,kBACzC,cAAc,MAAMT,EAAgB,IAAI;AAAA,kBACxC,SAAS,MAAMf,IAAca,CAAI;AAAA,kBACjC,WAAWQ;AAAA,oBACP;AAAA,oBACA;AAAA,oBACAM;AAAA,oBACA3B,KAAe;AAAA,oBACfc,MAAiBU,KAAS;AAAA,kBAAA;AAAA,kBAI9B,UAAA;AAAA,oBAAA,gBAAAF;AAAA,sBAACC,EAAO;AAAA,sBAAP;AAAA,wBACG,QAAQjC;AAAA,wBACR,UAAUS,IAAgBV,IAAc;AAAA,wBACxC,WAAWgC;AAAA,0BACP;AAAA,0BACA;AAAA,0BACAK;AAAA,wBAAA;AAAA,wBAEJ,OAAO,EAAE,QAAQ,GAAGnB,CAAS,MAAM,SAASO,MAAiBU,IAAQ,IAAIhB,EAAA;AAAA,wBACzE,MAAK;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAIT,gBAAAc,EAAC,OAAA,EAAI,WAAU,kGACV,YAAK,OACF,gBAAAA;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,MAAMT,EAAK;AAAA,wBACX,WAAWY;AAAA,wBACX,QAAO;AAAA,wBACP,KAAI;AAAA,wBACJ,SAAS,CAAAG,MAASA,EAAM,gBAAA;AAAA,wBAEvB,UAAAf,EAAK;AAAA,sBAAA;AAAA,oBAAA,IAGV,gBAAAS,EAAC,OAAA,EAAI,WAAWG,GAAiB,UAAAZ,EAAK,MAAK,EAAA,CAEnD;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAxCKA,EAAK,OAAOA,EAAK;AAAA,cAAA;AAAA,YA2ClC,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,0BAIJ,OAAA,EAAI,WAAU,aACV,UAAAF,EAAW,IAAI,CAAAE,MACZ,gBAAAS;AAAA,UAAC;AAAA,UAAA;AAAA,YAEG,WAAWD,EAAW,qDAAqD;AAAA,YAC3E,OAAO,EAAE,QAAQ,GAAGd,CAAS,KAAA;AAAA,YAE7B,4BAAC,OAAA,EAAI,WAAU,sBAAsB,UAAAV,EAAegB,EAAK,KAAK,EAAA,CAAE;AAAA,UAAA;AAAA,UAJ3DA,EAAK,OAAOA,EAAK;AAAA,QAAA,CAM7B,EAAA,CACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGZ;AAEApB,EAAa,cAAc;AAE3B,MAAMoC,IAAUb,EAAM,WAAWvB,CAAY;"}
+{"version":3,"file":"BarList.js","sources":["../../../src/components/barList/BarList.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { motion, type Variants } from 'motion/react';\n\nimport classNames from '../../utils/classNames';\nimport { SortDirection, type SortDirectionType } from '../../utils/SortUtils';\nimport { useSortedBars } from './useSortedBars';\n\n/**\n * A single entry in the BarList.\n *\n * @template T Custom payload merged into the row data.\n */\nexport type BarListRow<T> = T & {\n    /**\n     * Optional unique identifier. Falls back to `name` when not provided.\n     */\n    key?: string;\n\n    /**\n     * Optional URL. When provided, the label renders as a link.\n     */\n    href?: string;\n\n    /**\n     * Numeric value used for sorting and bar width calculations.\n     */\n    value: number;\n\n    /**\n     * Label shown for the bar.\n     */\n    name: string;\n\n    /**\n     * Text color override for this specific row.\n     */\n    color?: string;\n\n    /**\n     * Progress color override for this specific row.\n     */\n    barColor?: string;\n\n    /**\n     * Background color override for this specific row.\n     */\n    background?: string;\n};\n\n/**\n * Props for the BarList component.\n *\n * @template T - The type of the custom data associated with each bar row.\n */\ntype BarListProps<T = unknown> = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Array of bar row data to be rendered.\n     */\n    data: BarListRow<T>[];\n\n    /**\n     * Optional function to format the numeric value displayed on the right side of each bar.\n     * Can return a string or a React element.\n     *\n     * @example\n     * valueFormatter={(value) => `${value}%`}\n     */\n    valueFormatter?: (value: number) => string | React.ReactElement;\n\n    /**\n     * A reference value used to calculate relative widths.\n     * If not provided, the maximum value in `data` will be used.\n     *\n     * @default max(data.value)\n     */\n    referenceValue?: number;\n\n    /**\n     * Whether to animate the bar width transitions using Framer Motion.\n     *\n     * @default false\n     */\n    showAnimation?: boolean;\n\n    /**\n     * Callback fired when a bar is clicked.\n     *\n     * @param payload - The full data object of the clicked bar.\n     */\n    onSelectRow?: (payload: BarListRow<T>) => void;\n\n    /**\n     * The sort order for the bars. Options are 'asc', 'desc', or 'none'.\n     *\n     * @default 'none'\n     */\n    sortOrder?: SortDirectionType | 'none';\n\n    /**\n     * Height of each bar row in pixels.\n     *\n     * @default 32\n     */\n    rowHeight?: number;\n\n    /**\n     * Opacity applied to non-hovered bars (between 0 and 1).\n     *\n     * @default 0.5\n     */\n    opacity?: number;\n\n    /**\n     * CSS color string used for the active/progress portion of each bar.\n     *\n     * @default 'bg-highlight-light'\n     */\n    barColor?: string;\n\n    /**\n     * CSS color string used for the text labels.\n     *\n     * @default 'text-color-darker'\n     */\n    labelColor?: string;\n\n    /**\n     * CSS color string used for the bar background.\n     *\n     * @default 'bg-transparent'\n     */\n    background?: string;\n\n    /**\n     * Additional className added to the wrapper element.\n     */\n    className?: string;\n};\n\n// Animation variants\nconst containerVariants: Variants = {\n    animate: {\n        transition: {\n            staggerChildren: 0.1,\n        },\n    },\n};\n\nconst barVariants: Variants = {\n    initial: { width: 0 },\n    animate: (width: number) => ({\n        width: `${width}%`,\n        transition: { duration: 0.8, ease: 'easeOut' },\n    }),\n};\n\nconst DEFAULT_ROW_HEIGHT = 25;\nconst DEFAULT_OPACITY = 0.5;\n\nconst BarListInner = <T,>(props: BarListProps<T>, forwardedRef: React.ForwardedRef<HTMLDivElement>) => {\n    const {\n        data = [],\n        valueFormatter = value => value.toString(),\n        showAnimation = false,\n        onSelectRow,\n        referenceValue,\n        sortOrder = SortDirection.DESCENDING,\n        barColor = 'bg-highlight-light',\n        labelColor = 'text-color-darker',\n        background = 'bg-transparent',\n        rowHeight = DEFAULT_ROW_HEIGHT,\n        opacity = DEFAULT_OPACITY,\n        className = '',\n        ...remainingProps\n    } = props;\n\n    const sortedData = useSortedBars(data, sortOrder, item => item.value);\n\n    const [hoveredIndex, setHoveredIndex] = React.useState<number | null>(null);\n\n    const widths = useMemo(() => {\n        const base = referenceValue ?? Math.max(...sortedData.map(item => item.value), 0);\n        return sortedData.map(item => (base === 0 || item.value === 0 ? 0 : Math.max((item.value / base) * 100, 2)));\n    }, [sortedData, referenceValue]);\n\n    return (\n        <div\n            {...remainingProps}\n            ref={forwardedRef}\n            className={classNames('display-flex justify-content-between gap-15', className)}\n        >\n            <motion.div\n                variants={showAnimation ? containerVariants : undefined}\n                initial='initial'\n                animate='animate'\n                className='width-100pct space-y-5'\n            >\n                {sortedData.map((item, index) => {\n                    const width = widths[index];\n\n                    const itemLabelColor = item.color ?? labelColor;\n                    const itemBarColor = item.barColor ?? barColor;\n                    const itemBackground = item.background ?? background;\n\n                    return (\n                        <div\n                            key={item.key ?? item.name}\n                            onMouseEnter={() => setHoveredIndex(index)}\n                            onMouseLeave={() => setHoveredIndex(null)}\n                            onClick={() => onSelectRow?.(item)}\n                            className={classNames(\n                                'position-relative width-100pct rounded-small',\n                                'transition-all transition-ease-in-out transition-duration-01',\n                                itemBackground,\n                                onSelectRow && 'cursor-pointer',\n                                hoveredIndex === index && 'bg-lightest'\n                            )}\n                        >\n                            {/* Animated Progress Bar */}\n                            <motion.div\n                                custom={width}\n                                variants={showAnimation ? barVariants : undefined}\n                                className={classNames(\n                                    'display-flex align-items-center rounded-small',\n                                    'transition-all transition-ease-in-out transition-duration-01',\n                                    itemBarColor\n                                )}\n                                style={{ height: `${rowHeight}px`, opacity: hoveredIndex === index ? 1 : opacity }}\n                                role='presentation'\n                            />\n\n                            {/* Label */}\n                            <div className='position-absolute left-0 top-50pct translate-y-50pct display-flex width-100pct padding-left-10'>\n                                {item.href ? (\n                                    <a\n                                        href={item.href}\n                                        className={itemLabelColor}\n                                        target='_blank'\n                                        rel='noreferrer'\n                                        onClick={event => event.stopPropagation()}\n                                    >\n                                        {item.name}\n                                    </a>\n                                ) : (\n                                    <div className={itemLabelColor}>{item.name}</div>\n                                )}\n                            </div>\n                        </div>\n                    );\n                })}\n            </motion.div>\n\n            {/* legend */}\n            <div className='space-y-5'>\n                {sortedData.map(item => (\n                    <div\n                        key={item.key ?? item.name}\n                        className={classNames('display-flex align-items-center justify-content-end')}\n                        style={{ height: `${rowHeight}px` }}\n                    >\n                        <div className='text-color-darkest'>{valueFormatter(item.value)}</div>\n                    </div>\n                ))}\n            </div>\n        </div>\n    );\n};\n\nBarListInner.displayName = 'BarList';\n\nconst BarList = React.forwardRef(BarListInner) as <T>(\n    props: BarListProps<T> & { ref?: React.ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof BarListInner>;\n\nexport default BarList;\n"],"names":["containerVariants","barVariants","width","DEFAULT_ROW_HEIGHT","DEFAULT_OPACITY","BarListInner","props","forwardedRef","data","valueFormatter","value","showAnimation","onSelectRow","referenceValue","sortOrder","SortDirection","barColor","labelColor","background","rowHeight","opacity","className","remainingProps","sortedData","useSortedBars","item","hoveredIndex","setHoveredIndex","React","widths","useMemo","base","jsxs","classNames","jsx","motion","index","itemLabelColor","itemBarColor","itemBackground","event","BarList"],"mappings":"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"}

package/components/bottomSheet/BottomSheet.d.ts

@@ -2,6 +2,7 @@ import { MutableRefObject, PropsWithChildren, ReactElement, ReactNode } from 're
 export type BottomSheetProps = {
     /**
      * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.
+     *
      * @default false
      */
     show: boolean;
@@ -36,32 +37,45 @@ export type BottomSheetProps = {
     showMaximizeButton?: boolean;
     /**
      * The callback function triggered when the maximize button is clicked and the height changes.
+     *
+     * @default () => {}
      */
     onHeightChange?: VoidFunction;
     /**
      * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.
+     *
      * @default false
      */
     detach?: boolean;
     /**
      * Defines the amount of pixels for the sheet.
+     *
      * @default 15
      */
     detachOffset?: number;
     /**
      * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.
+     *
      * @default false
      */
     hasBackdrop?: boolean;
     /**
      * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.
+     *
+     * @default () => {}
      */
     onBackdropClick?: VoidFunction;
-    /** A react ref added to the bottom sheet body. */
+    /**
+     * A react ref added to the bottom sheet body.
+     */
     bodyRef?: MutableRefObject<HTMLDivElement | null>;
-    /** Additional classes to be set on the body element. */
+    /**
+     * Additional classes to be set on the body element.
+     */
     bodyClassName?: string;
-    /** Additional classes to be set on the wrapping element. */
+    /**
+     * Additional classes to be set on the wrapping element.
+     */
     className?: string;
 };
 declare const BottomSheet: (props: BottomSheetProps & PropsWithChildren) => ReactElement;

package/components/bottomSheet/BottomSheet.js

@@ -1,9 +1,9 @@
 import { jsxs as n, Fragment as I, jsx as e } from "react/jsx-runtime";
 import { useState as g, useEffect as M } from "react";
 import { createPortal as j } from "react-dom";
-import f from "classnames";
 import { motion as R } from "motion/react";
 import { isFunction as V } from "es-toolkit/predicate";
+import f from "../../utils/classNames.js";
 import { getOrCreatePortalRoot as _ } from "../../utils/portalRoot.js";
 const $ = -1e3, r = 15, J = (u) => {
   const {

package/components/bottomSheet/BottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport classNames from 'classnames';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.\n     */\n    onBackdropClick?: VoidFunction;\n\n    /** A react ref added to the bottom sheet body. */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /** Additional classes to be set on the body element. */\n    bodyClassName?: string;\n\n    /** Additional classes to be set on the wrapping element. */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = () => {\n        onBackdropClick();\n        handleToggle();\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"names":["OFFSET_POSITION","DEFAULT_OFFSET_PX","BottomSheet","props","show","onClose","width","height","title","detach","detachOffset","hasBackdrop","showCloseButton","showMaximizeButton","onHeightChange","bodyRef","bodyClassName","className","children","onBackdropClick","remainingProps","isShown","setIsShown","useState","isMaxHeight","setIsMaxHeight","useEffect","modalRoot","getOrCreatePortalRoot","handleToggle","newValue","isFunction","handleBackdropClick","handleMaximize","sheetClasses","classNames","sheetBodyClasses","sheetHeight","createPortal","jsxs","Fragment","motion","jsx"],"mappings":"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"}
+{"version":3,"file":"BottomSheet.js","sources":["../../../src/components/bottomSheet/BottomSheet.tsx"],"sourcesContent":["import {\n    type MutableRefObject,\n    type PropsWithChildren,\n    type ReactElement,\n    type ReactNode,\n    useEffect,\n    useState,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { motion } from 'motion/react';\nimport { isFunction } from 'es-toolkit/predicate';\n\nimport classNames from '../../utils/classNames';\nimport { getOrCreatePortalRoot } from '../../utils/portalRoot';\n\nconst OFFSET_POSITION = -1000;\nconst DEFAULT_OFFSET_PX = 15;\n\nexport type BottomSheetProps = {\n    /**\n     * Set the visibility of the bottom sheet. The component is already mounted and just moved offscreen.\n     *\n     * @default false\n     */\n    show: boolean;\n\n    /**\n     * Callback for when the sheet closes.\n     */\n    onClose?: (isShown: boolean) => void;\n\n    /**\n     * The width of the bottom sheet. This is useful for desktop when not using the entire screen width.\n     * When no width is given it will take the width of the content and maximum `100%` of the screen.\n     * So it this case you might want to apply a `max-width-xxx` via `className` to control it better.\n     */\n    width?: number | string;\n\n    /**\n     * The height of the bottom sheet. If no height is given, the height is automatically\n     * calculated from the content.\n     */\n    height?: number | string;\n\n    /**\n     * The title content shown in the header. If no title is given, the bottom sheet header is not shown.\n     */\n    title?: string | ReactNode;\n\n    /**\n     * Defines whether or not the close button is shown.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Defines whether or not the maximize button in the header is shown.\n     * @default false\n     */\n    showMaximizeButton?: boolean;\n\n    /**\n     * The callback function triggered when the maximize button is clicked and the height changes.\n     *\n     * @default () => {}\n     */\n    onHeightChange?: VoidFunction;\n\n    /**\n     * Set to `true` to detach the bottom sheet from the left side and the bottom and create a little offset.\n     *\n     * @default false\n     */\n    detach?: boolean;\n\n    /**\n     * Defines the amount of pixels for the sheet.\n     *\n     * @default 15\n     */\n    detachOffset?: number;\n\n    /**\n     * Set to `true` to render a modal like backdrop to emphasize the bottom sheet.\n     *\n     * @default false\n     */\n    hasBackdrop?: boolean;\n\n    /**\n     * Callback function triggered when the backdrop is clicked. Usually used to close the bottom sheet.\n     *\n     * @default () => {}\n     */\n    onBackdropClick?: VoidFunction;\n\n    /**\n     * A react ref added to the bottom sheet body.\n     */\n    bodyRef?: MutableRefObject<HTMLDivElement | null>;\n\n    /**\n     * Additional classes to be set on the body element.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Additional classes to be set on the wrapping element.\n     */\n    className?: string;\n};\n\nconst BottomSheet = (props: BottomSheetProps & PropsWithChildren) => {\n    const {\n        show = false,\n        onClose,\n        width,\n        height,\n        title,\n        detach = false,\n        detachOffset = DEFAULT_OFFSET_PX,\n        hasBackdrop = false,\n        showCloseButton = true,\n        showMaximizeButton = false,\n        onHeightChange = () => {},\n        bodyRef,\n        bodyClassName,\n        className,\n        children,\n        onBackdropClick = () => {},\n        ...remainingProps\n    } = props;\n\n    const [isShown, setIsShown] = useState(show);\n    const [isMaxHeight, setIsMaxHeight] = useState(false);\n\n    useEffect(() => setIsShown(show), [show]);\n\n    const modalRoot = getOrCreatePortalRoot();\n\n    const handleToggle = () => {\n        const newValue = !isShown;\n        if (isFunction(onClose)) {\n            onClose(newValue);\n        } else {\n            setIsShown(newValue);\n        }\n    };\n\n    const handleBackdropClick = () => {\n        onBackdropClick();\n        handleToggle();\n    };\n\n    const handleMaximize = () => {\n        const newValue = !isMaxHeight;\n        setIsMaxHeight(newValue);\n        onHeightChange();\n    };\n\n    const sheetClasses = classNames(\n        'bottom-sheet',\n        'position-fixed left-0',\n        !height && !isMaxHeight && 'height-auto',\n        'bg-white',\n        'shadow-hard',\n        detach ? 'rounded' : 'rounded-top-left rounded-top-right',\n        className && className\n    );\n\n    const sheetBodyClasses = classNames('bottom-sheet-body', 'height-100pct', bodyClassName && bodyClassName);\n\n    const sheetHeight = isMaxHeight ? window.innerHeight : height;\n\n    // Note: we always have to kep the body element in the DOM as there might be a ref assigned to it.\n    // Unmounting it will lead to losing the reference and breaking the functionality that is implemented on that ref.\n    // That is the reason why there is no \"AnimatePresence\" with an \"exit\" animation here.\n    // Instead, we change the \"animate\" values.\n\n    return createPortal(\n        <>\n            <motion.div\n                {...remainingProps}\n                className={sheetClasses}\n                style={{\n                    width,\n                    maxWidth: detach ? `calc(100% - ${DEFAULT_OFFSET_PX * 2}px)` : '100%',\n                    margin: detach ? `${DEFAULT_OFFSET_PX}px` : 0,\n                }}\n                initial={{ opacity: 0 }}\n                animate={{\n                    opacity: isShown ? 1 : 0,\n                    y: 0,\n                    bottom: isShown ? 0 : OFFSET_POSITION,\n                    height: isShown ? sheetHeight : 0,\n                }}\n            >\n                <div className='bottom-sheet-header'>\n                    {title && (\n                        <div\n                            className={\n                                'bottom-sheet-title display-flex justify-content-between padding-15 ' +\n                                'border border-top-none border-left-none border-right-none border-color-lighter'\n                            }\n                        >\n                            <div className='text-size-18'>{title}</div>\n                        </div>\n                    )}\n                    {showCloseButton && (\n                        <div className='bottom-sheet-close position-absolute top-10 right-10'>\n                            <button type='button' className='btn btn-muted btn-sm btn-icon-only' onClick={handleToggle}>\n                                <span className='rioglyph rioglyph-remove' />\n                            </button>\n                        </div>\n                    )}\n                    {showMaximizeButton && (\n                        <div\n                            className={\n                                'bottom-sheet-maximize height-30 ' +\n                                'position-absolute top-5 left-50pct translate-x-50 cursor-pointer'\n                            }\n                            onClick={handleMaximize}\n                        >\n                            <div className='height-5 width-40 rounded bg-lighter' />\n                        </div>\n                    )}\n                </div>\n                <div className={sheetBodyClasses} ref={bodyRef}>\n                    {isShown && children}\n                </div>\n            </motion.div>\n\n            {hasBackdrop && isShown && <div className='bottom-sheet-backdrop' onClick={handleBackdropClick} />}\n        </>,\n        modalRoot\n    ) as ReactElement;\n};\n\nexport default BottomSheet;\n"],"names":["OFFSET_POSITION","DEFAULT_OFFSET_PX","BottomSheet","props","show","onClose","width","height","title","detach","detachOffset","hasBackdrop","showCloseButton","showMaximizeButton","onHeightChange","bodyRef","bodyClassName","className","children","onBackdropClick","remainingProps","isShown","setIsShown","useState","isMaxHeight","setIsMaxHeight","useEffect","modalRoot","getOrCreatePortalRoot","handleToggle","newValue","isFunction","handleBackdropClick","handleMaximize","sheetClasses","classNames","sheetBodyClasses","sheetHeight","createPortal","jsxs","Fragment","motion","jsx"],"mappings":"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"}

package/components/bottomSheet/TimedBottomSheet.d.ts

@@ -4,6 +4,8 @@ type TimedBottomSheetProps = {
      * The `dismissed` flag can be used to tell this component that the user has clicked on the content
      * of the component like a button or a link. In this case, the bottom sheet will store a flag in the
      * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.
+     *
+     * @default false
      */
     dismissed?: boolean;
     /**
@@ -27,11 +29,13 @@ type TimedBottomSheetProps = {
     hideAfter?: number;
     /**
      * With this enabled, the BottomSheet will not hide automatically.
+     *
      * @default false
      */
     alwaysOn?: boolean;
     /**
      * Enables or disabled the close button.
+     *
      * @default true
      */
     showCloseButton?: boolean;
@@ -41,6 +45,8 @@ type TimedBottomSheetProps = {
     width?: number;
     /**
      * Flag to allow to remove the localStorage flag again once the component is not needed anymore.
+     *
+     * @default false
      */
     cleanupLocalStorage?: boolean;
     /**
@@ -51,11 +57,15 @@ type TimedBottomSheetProps = {
     localStoragePrefix?: string;
     /**
      * Callback function that gets triggered when the user closed the bottom sheet with the close button.
+     *
+     * @default () => {}
      * @returns void
      */
     onClose?: () => void;
     /**
      * Optional className to be set on the body.
+     *
+     * @default 'padding-25 margin-right-25'
      */
     bodyClassName?: string;
     /**

package/components/bottomSheet/TimedBottomSheet.js.map

@@ -1 +1 @@
-{"version":3,"file":"TimedBottomSheet.js","sources":["../../../src/components/bottomSheet/TimedBottomSheet.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport BottomSheet from './BottomSheet';\nimport useTimeout from '../../hooks/useTimeout';\nimport useLocalStorage from '../../useLocalStorage';\n\nconst DEFAULT_SHOW_AFTER = 0; // immediately after mount\nconst DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour\n\n// Features:\n// [x] show delayed\n// [x] option to hide automatically after x\n// [x] store closed user state in localStorage\n// [x] don't show when user has clicked to hide - per feature\n// [x] Cleanup localStorage feature\n// [x] hide on click inside of content (button or link, etc.) - control from outside\n// [-] GA tracking of user hide click - should be done outside\n\ntype TimedBottomSheetProps = {\n    /**\n     * The `dismissed` flag can be used to tell this component that the user has clicked on the content\n     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the\n     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.\n     */\n    dismissed?: boolean;\n\n    /**\n     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.\n     * It should be unique to avoid conflicts with other timed bottom sheets.\n     */\n    featureName: string;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.\n     *\n     * @default 0\n     */\n    showAfter?: number;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000\n     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown\n     * on the next page load.\n     *\n     * @default 3_600_000\n     */\n    hideAfter?: number;\n\n    /**\n     * With this enabled, the BottomSheet will not hide automatically.\n     * @default false\n     */\n    alwaysOn?: boolean;\n\n    /**\n     * Enables or disabled the close button.\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.\n     */\n    width?: number;\n\n    /**\n     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.\n     */\n    cleanupLocalStorage?: boolean;\n\n    /**\n     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.\n     *\n     * Use this prefix for your service name for instance.\n     */\n    localStoragePrefix?: string;\n\n    /**\n     * Callback function that gets triggered when the user closed the bottom sheet with the close button.\n     * @returns void\n     */\n    onClose?: () => void;\n\n    /**\n     * Optional className to be set on the body.\n     */\n    bodyClassName?: string;\n\n    /**\n     * Optional className to be set on the component. Use this to define a max-width value.\n     */\n    className?: string;\n};\n\nconst sanitizeFeatureName = (value: string) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');\n\n/**\n * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use\n * the localStorage to save user interaction.\n *\n * Don't forget to cleanup the localStorage for the user when removing a feature\n * by setting \"cleanupLocalStorage\" to \"true\" and deploy it like this.\n * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.\n *\n * @example\n    const [isDismissed, setIsDismissed] = useState(false);\n\n    const handleClose = () => { // If needed trigger Google Analytics here };\n\n    return (\n        <TimedBottomSheet\n            dismissed={isDismissed}\n            featureName='dummyBottomSheet'\n            showAfter={1_000}\n            hideAfter={15_000}\n            className='max-width-500'\n            onClose={handleClose}\n        >\n            <div className='display-flex align-items-center gap-20'>\n                Lorem ipsum dolor sit amet\n                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>\n                    Got it\n                </Button>\n            </div>\n        </TimedBottomSheet>\n    );\n */\nexport const TimedBottomSheet = (props: PropsWithChildren<TimedBottomSheetProps>) => {\n    const {\n        dismissed = false,\n        featureName,\n        showAfter = DEFAULT_SHOW_AFTER,\n        hideAfter = DEFAULT_HIDE_AFTER,\n        alwaysOn = false,\n        showCloseButton = true,\n        width,\n        cleanupLocalStorage = false,\n        onClose = noop,\n        bodyClassName = 'padding-25 margin-right-25',\n        localStoragePrefix = '',\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n\n    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(\n        `${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`,\n        false\n    );\n\n    // In case the visibility is controlled by the outside, means the user clicked on the\n    // content of the bottom sheet, close the sheet and set the localStorage flag for not\n    // showing it again\n    const [prevDismissed, setPrevDismissed] = useState(dismissed);\n    if (dismissed && dismissed !== prevDismissed) {\n        setPrevDismissed(dismissed);\n        setIsHiddenByUser(true);\n        setShowBottomSheet(false);\n    }\n\n    // Show the bottom sheet automatically after a given amount of time\n    useTimeout(() => {\n        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {\n            setShowBottomSheet(true);\n        }\n    }, showAfter);\n\n    // Hide the bottom sheet automatically after a given amount of time\n    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);\n\n    // Cleanup functionality. The cleanup will remove the localStorage flag on mount\n    // and will not show the bottom sheet.\n    useEffect(() => {\n        if (cleanupLocalStorage) {\n            removeIsHiddenFlag();\n        }\n    }, []);\n\n    const handleCloseBottomSheet = () => {\n        setShowBottomSheet(false);\n        setIsHiddenByUser(true);\n        onClose();\n    };\n\n    return (\n        <div {...remainingProps}>\n            <BottomSheet\n                show={showBottomSheet}\n                width={width}\n                detach\n                showCloseButton={showCloseButton}\n                onClose={handleCloseBottomSheet}\n                className={className}\n                bodyClassName={bodyClassName}\n            >\n                {children}\n            </BottomSheet>\n        </div>\n    );\n};\n\nexport default TimedBottomSheet;\n"],"names":["DEFAULT_SHOW_AFTER","DEFAULT_HIDE_AFTER","sanitizeFeatureName","value","TimedBottomSheet","props","dismissed","featureName","showAfter","hideAfter","alwaysOn","showCloseButton","width","cleanupLocalStorage","onClose","noop","bodyClassName","localStoragePrefix","className","children","remainingProps","showBottomSheet","setShowBottomSheet","useState","isHiddenByUser","setIsHiddenByUser","removeIsHiddenFlag","useLocalStorage","prevDismissed","setPrevDismissed","useTimeout","useEffect","jsx","BottomSheet"],"mappings":";;;;;;AAOA,MAAMA,IAAqB,GACrBC,IAAqB,MAuFrBC,IAAsB,CAACC,MAAkB,GAAGA,EAAM,OAAO,CAAC,EAAE,YAAA,CAAa,GAAGA,EAAM,MAAM,CAAC,CAAC,GAAG,WAAW,KAAK,EAAE,GAiCxGC,IAAmB,CAACC,MAAoD;AACjF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAC;AAAA,IACA,WAAAC,IAAYR;AAAA,IACZ,WAAAS,IAAYR;AAAA,IACZ,UAAAS,IAAW;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,SAAAC,IAAUC;AAAA,IACV,eAAAC,IAAgB;AAAA,IAChB,oBAAAC,IAAqB;AAAA,IACrB,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GAEtD,CAACC,GAAgBC,GAAmBC,CAAkB,IAAIC;AAAA,IAC5D,GAAGV,CAAkB,OAAOf,EAAoBK,CAAW,CAAC;AAAA,IAC5D;AAAA,EAAA,GAME,CAACqB,GAAeC,CAAgB,IAAIN,EAASjB,CAAS;AAC5D,SAAIA,KAAaA,MAAcsB,MAC3BC,EAAiBvB,CAAS,GAC1BmB,EAAkB,EAAI,GACtBH,EAAmB,EAAK,IAI5BQ,EAAW,MAAM;AACb,IAAI,CAACxB,KAAa,CAACkB,KAAkB,CAACX,KAClCS,EAAmB,EAAI;AAAA,EAE/B,GAAGd,CAAS,GAGZsB,EAAW,MAAMR,EAAmB,EAAAZ,CAAuB,GAAGF,IAAYC,CAAS,GAInFsB,EAAU,MAAM;AACZ,IAAIlB,KACAa,EAAA;AAAA,EAER,GAAG,CAAA,CAAE,GASD,gBAAAM,EAAC,OAAA,EAAK,GAAGZ,GACL,UAAA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMZ;AAAA,MACN,OAAAT;AAAA,MACA,QAAM;AAAA,MACN,iBAAAD;AAAA,MACA,SAbmB,MAAM;AACjC,QAAAW,EAAmB,EAAK,GACxBG,EAAkB,EAAI,GACtBX,EAAA;AAAA,MACJ;AAAA,MAUY,WAAAI;AAAA,MACA,eAAAF;AAAA,MAEC,UAAAG;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}
+{"version":3,"file":"TimedBottomSheet.js","sources":["../../../src/components/bottomSheet/TimedBottomSheet.tsx"],"sourcesContent":["import { useState, useEffect, type PropsWithChildren } from 'react';\nimport { noop } from 'es-toolkit/function';\n\nimport BottomSheet from './BottomSheet';\nimport useTimeout from '../../hooks/useTimeout';\nimport useLocalStorage from '../../useLocalStorage';\n\nconst DEFAULT_SHOW_AFTER = 0; // immediately after mount\nconst DEFAULT_HIDE_AFTER = 3_600_000; // after 1 hour\n\n// Features:\n// [x] show delayed\n// [x] option to hide automatically after x\n// [x] store closed user state in localStorage\n// [x] don't show when user has clicked to hide - per feature\n// [x] Cleanup localStorage feature\n// [x] hide on click inside of content (button or link, etc.) - control from outside\n// [-] GA tracking of user hide click - should be done outside\n\ntype TimedBottomSheetProps = {\n    /**\n     * The `dismissed` flag can be used to tell this component that the user has clicked on the content\n     * of the component like a button or a link. In this case, the bottom sheet will store a flag in the\n     * localStorage to hide the bottom sheet for the next time and it will close the sheet right away.\n     *\n     * @default false\n     */\n    dismissed?: boolean;\n\n    /**\n     * The `featureName` prop is used to name the localStorage flag that is used to control the visibility.\n     * It should be unique to avoid conflicts with other timed bottom sheets.\n     */\n    featureName: string;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet shall be shown. Default value is 0 to show it right away.\n     *\n     * @default 0\n     */\n    showAfter?: number;\n\n    /**\n     * Defines the time in milliseconds when the bottom sheet hides itself automatically. Default value is 3_600_000\n     * to hide it after 1 hour. In this case, the localStorage flag is not set and the bottom sheet will be shown\n     * on the next page load.\n     *\n     * @default 3_600_000\n     */\n    hideAfter?: number;\n\n    /**\n     * With this enabled, the BottomSheet will not hide automatically.\n     *\n     * @default false\n     */\n    alwaysOn?: boolean;\n\n    /**\n     * Enables or disabled the close button.\n     *\n     * @default true\n     */\n    showCloseButton?: boolean;\n\n    /**\n     * Optional width of the bottom sheet. Alternatively, you can set a `max-width-xxx` via className instead.\n     */\n    width?: number;\n\n    /**\n     * Flag to allow to remove the localStorage flag again once the component is not needed anymore.\n     *\n     * @default false\n     */\n    cleanupLocalStorage?: boolean;\n\n    /**\n     * A prefix that will be used for the local storage flag to store whether the bottom sheet should be hidden.\n     *\n     * Use this prefix for your service name for instance.\n     */\n    localStoragePrefix?: string;\n\n    /**\n     * Callback function that gets triggered when the user closed the bottom sheet with the close button.\n     *\n     * @default () => {}\n     * @returns void\n     */\n    onClose?: () => void;\n\n    /**\n     * Optional className to be set on the body.\n     *\n     * @default 'padding-25 margin-right-25'\n     */\n    bodyClassName?: string;\n\n    /**\n     * Optional className to be set on the component. Use this to define a max-width value.\n     */\n    className?: string;\n};\n\nconst sanitizeFeatureName = (value: string) => `${value.charAt(0).toUpperCase()}${value.slice(1)}`.replaceAll(' ', '');\n\n/**\n * A wrapper component for the BottomSheet that allows to control it's visibility via timers and to use\n * the localStorage to save user interaction.\n *\n * Don't forget to cleanup the localStorage for the user when removing a feature\n * by setting \"cleanupLocalStorage\" to \"true\" and deploy it like this.\n * The cleanup will remove the localStorage flag on mount and will not show the bottom sheet.\n *\n * @example\n    const [isDismissed, setIsDismissed] = useState(false);\n\n    const handleClose = () => { // If needed trigger Google Analytics here };\n\n    return (\n        <TimedBottomSheet\n            dismissed={isDismissed}\n            featureName='dummyBottomSheet'\n            showAfter={1_000}\n            hideAfter={15_000}\n            className='max-width-500'\n            onClose={handleClose}\n        >\n            <div className='display-flex align-items-center gap-20'>\n                Lorem ipsum dolor sit amet\n                <Button bsStyle={Button.PRIMARY} onClick={() => setIsDismissed(true)}>\n                    Got it\n                </Button>\n            </div>\n        </TimedBottomSheet>\n    );\n */\nexport const TimedBottomSheet = (props: PropsWithChildren<TimedBottomSheetProps>) => {\n    const {\n        dismissed = false,\n        featureName,\n        showAfter = DEFAULT_SHOW_AFTER,\n        hideAfter = DEFAULT_HIDE_AFTER,\n        alwaysOn = false,\n        showCloseButton = true,\n        width,\n        cleanupLocalStorage = false,\n        onClose = noop,\n        bodyClassName = 'padding-25 margin-right-25',\n        localStoragePrefix = '',\n        className,\n        children,\n        ...remainingProps\n    } = props;\n\n    const [showBottomSheet, setShowBottomSheet] = useState(false);\n\n    const [isHiddenByUser, setIsHiddenByUser, removeIsHiddenFlag] = useLocalStorage(\n        `${localStoragePrefix}hide${sanitizeFeatureName(featureName)}`,\n        false\n    );\n\n    // In case the visibility is controlled by the outside, means the user clicked on the\n    // content of the bottom sheet, close the sheet and set the localStorage flag for not\n    // showing it again\n    const [prevDismissed, setPrevDismissed] = useState(dismissed);\n    if (dismissed && dismissed !== prevDismissed) {\n        setPrevDismissed(dismissed);\n        setIsHiddenByUser(true);\n        setShowBottomSheet(false);\n    }\n\n    // Show the bottom sheet automatically after a given amount of time\n    useTimeout(() => {\n        if (!dismissed && !isHiddenByUser && !cleanupLocalStorage) {\n            setShowBottomSheet(true);\n        }\n    }, showAfter);\n\n    // Hide the bottom sheet automatically after a given amount of time\n    useTimeout(() => setShowBottomSheet(alwaysOn ? true : false), showAfter + hideAfter);\n\n    // Cleanup functionality. The cleanup will remove the localStorage flag on mount\n    // and will not show the bottom sheet.\n    useEffect(() => {\n        if (cleanupLocalStorage) {\n            removeIsHiddenFlag();\n        }\n    }, []);\n\n    const handleCloseBottomSheet = () => {\n        setShowBottomSheet(false);\n        setIsHiddenByUser(true);\n        onClose();\n    };\n\n    return (\n        <div {...remainingProps}>\n            <BottomSheet\n                show={showBottomSheet}\n                width={width}\n                detach\n                showCloseButton={showCloseButton}\n                onClose={handleCloseBottomSheet}\n                className={className}\n                bodyClassName={bodyClassName}\n            >\n                {children}\n            </BottomSheet>\n        </div>\n    );\n};\n\nexport default TimedBottomSheet;\n"],"names":["DEFAULT_SHOW_AFTER","DEFAULT_HIDE_AFTER","sanitizeFeatureName","value","TimedBottomSheet","props","dismissed","featureName","showAfter","hideAfter","alwaysOn","showCloseButton","width","cleanupLocalStorage","onClose","noop","bodyClassName","localStoragePrefix","className","children","remainingProps","showBottomSheet","setShowBottomSheet","useState","isHiddenByUser","setIsHiddenByUser","removeIsHiddenFlag","useLocalStorage","prevDismissed","setPrevDismissed","useTimeout","useEffect","jsx","BottomSheet"],"mappings":";;;;;;AAOA,MAAMA,IAAqB,GACrBC,IAAqB,MAiGrBC,IAAsB,CAACC,MAAkB,GAAGA,EAAM,OAAO,CAAC,EAAE,YAAA,CAAa,GAAGA,EAAM,MAAM,CAAC,CAAC,GAAG,WAAW,KAAK,EAAE,GAiCxGC,IAAmB,CAACC,MAAoD;AACjF,QAAM;AAAA,IACF,WAAAC,IAAY;AAAA,IACZ,aAAAC;AAAA,IACA,WAAAC,IAAYR;AAAA,IACZ,WAAAS,IAAYR;AAAA,IACZ,UAAAS,IAAW;AAAA,IACX,iBAAAC,IAAkB;AAAA,IAClB,OAAAC;AAAA,IACA,qBAAAC,IAAsB;AAAA,IACtB,SAAAC,IAAUC;AAAA,IACV,eAAAC,IAAgB;AAAA,IAChB,oBAAAC,IAAqB;AAAA,IACrB,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACHf,GAEE,CAACgB,GAAiBC,CAAkB,IAAIC,EAAS,EAAK,GAEtD,CAACC,GAAgBC,GAAmBC,CAAkB,IAAIC;AAAA,IAC5D,GAAGV,CAAkB,OAAOf,EAAoBK,CAAW,CAAC;AAAA,IAC5D;AAAA,EAAA,GAME,CAACqB,GAAeC,CAAgB,IAAIN,EAASjB,CAAS;AAC5D,SAAIA,KAAaA,MAAcsB,MAC3BC,EAAiBvB,CAAS,GAC1BmB,EAAkB,EAAI,GACtBH,EAAmB,EAAK,IAI5BQ,EAAW,MAAM;AACb,IAAI,CAACxB,KAAa,CAACkB,KAAkB,CAACX,KAClCS,EAAmB,EAAI;AAAA,EAE/B,GAAGd,CAAS,GAGZsB,EAAW,MAAMR,EAAmB,EAAAZ,CAAuB,GAAGF,IAAYC,CAAS,GAInFsB,EAAU,MAAM;AACZ,IAAIlB,KACAa,EAAA;AAAA,EAER,GAAG,CAAA,CAAE,GASD,gBAAAM,EAAC,OAAA,EAAK,GAAGZ,GACL,UAAA,gBAAAY;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,MAAMZ;AAAA,MACN,OAAAT;AAAA,MACA,QAAM;AAAA,MACN,iBAAAD;AAAA,MACA,SAbmB,MAAM;AACjC,QAAAW,EAAmB,EAAK,GACxBG,EAAkB,EAAI,GACtBX,EAAA;AAAA,MACJ;AAAA,MAUY,WAAAI;AAAA,MACA,eAAAF;AAAA,MAEC,UAAAG;AAAA,IAAA;AAAA,EAAA,GAET;AAER;"}

package/components/button/Button.d.ts

@@ -30,11 +30,13 @@ export type BUTTON_SIZE = ObjectValues<typeof SIZES_MAP>;
 type RegularButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
+     *
      * @default false
      */
     asToggle?: false;
     /**
      * Callback function triggered when clicking the button.
+     *
      * @param event The MouseEvent that triggered the click.
      */
     onClick?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
@@ -42,16 +44,18 @@ type RegularButton = {
 type ToggleButton = {
     /**
      * Use the button as a toggle button. The toggle state can be controlled via the `active` prop.
+     *
      * @default false
      */
     asToggle: true;
     /**
      * Callback function triggered when clicking the button.
+     *
      * @param value The new value of the toggle button.
      */
     onClick?: (value: boolean) => void;
 };
-export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'> & {
+type BaseButtonProps = {
     /**
      * Whether the button should be disabled.
      *
@@ -60,22 +64,20 @@ export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'>
     disabled?: boolean;
     /**
      * Set the button toggled. Should be used in combination with "asToggle" prop.
+     *
      * @default false
      */
     active?: boolean;
-    /**
-     * Defines the type of the button. This may be used for form submit buttons.
-     * @default 'button'
-     */
-    type?: 'button' | 'submit';
     /**
      * Use when the content of the button is an icon only to adapt the button spacing accordingly.
+     *
      * @default false
      */
     iconOnly?: boolean;
     /**
      * Adds right side spacing for an icon. This should be used when having navigation buttons
      * that use an icon on the right side.
+     *
      * @default false
      */
     iconRight?: boolean;
@@ -88,17 +90,19 @@ export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'>
      * Defines whether the button text break into multiple lines when the button space exceeds.
      *
      * Multiline buttons should be used as exception only.
+     *
      * @default false
      */
     multiline?: boolean;
     /**
      * Defines whether the button takes up the full width of the parent element.
+     *
      * @default false
      */
     block?: boolean;
     /**
      * Sets the button style.
-     * @default "default"
+     * @default 'default'
      */
     bsStyle?: BUTTON_STYLE;
     /**
@@ -115,6 +119,7 @@ export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'>
     noRippleEffect?: boolean;
     /**
      * Number of the index used for keyboard support.
+     *
      * @default 0
      */
     tabIndex?: number;
@@ -122,7 +127,48 @@ export type ButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'onClick'>
      * Additional classes to be set on the button element.
      */
     className?: string;
+};
+type NativeButtonProps = Omit<HTMLProps<HTMLButtonElement>, 'as' | 'type' | 'onClick' | 'ref'> & BaseButtonProps & {
+    /**
+     * Defines this component as a native button element.
+     *
+     * @default 'button'
+     */
+    as?: 'button';
+    /**
+     * Defines the type of the button. This may be used for form submit buttons.
+     *
+     * @default 'button'
+     */
+    type?: 'button' | 'submit';
 } & (RegularButton | ToggleButton);
+type LinkButtonProps = Omit<HTMLProps<HTMLAnchorElement>, 'as' | 'type' | 'onClick' | 'ref'> & BaseButtonProps & {
+    /**
+     * Defines this component as a link element.
+     */
+    as: 'a';
+    /**
+     * Native button type is not supported when using `as="a"`.
+     */
+    type?: never;
+    /**
+     * Defines the destination URL for the link button.
+     */
+    href: string;
+    /**
+     * Toggle behavior is not supported when using `as="a"`.
+     *
+     * @default false
+     */
+    asToggle?: false;
+    /**
+     * Callback function triggered when clicking the link.
+     *
+     * @param event The MouseEvent that triggered the click.
+     */
+    onClick?: (event: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void;
+};
+export type ButtonProps = NativeButtonProps | LinkButtonProps;
 type Props = PropsWithChildren<ButtonProps>;
 type ButtonType = ForwardRefExoticComponent<Props & RefAttributes<HTMLButtonElement>> & {
     DEFAULT: 'default';