no-frills-ui 0.0.14-alpha.8 → 0.0.14-rc.1

package/lib-esm/components/Stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\ntype StepperProps = PropsWithChildren<{\n    active: number;\n    onStepClick?: (index: number) => void;\n}>;\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)\n            : getThemeValue(THEME_NAME.BACKGROUND)};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nexport default function Stepper(props: StepperProps) {\n    const [active, setActive] = useState(props.active);\n    const { children, onStepClick } = props;\n    const childrenArray = Children.toArray(children);\n    const stepRefs = [] as Array<HTMLButtonElement | null>;\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n        // Move focus to the active step\n        stepRefs[index]?.focus();\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    // Keyboard navigation for step buttons\n    const onStepKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            stepRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            stepRefs[prev]?.focus();\n        }\n    };\n\n    return (\n        <Container>\n            <Header role=\"tablist\" aria-label=\"Stepper Steps\">\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    return (\n                        <HeaderButton\n                            ref={(el) => (stepRefs[index] = el)}\n                            active={index === active}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={index === active}\n                            aria-disabled={!!child.props.disabled}\n                            tabIndex={index === active ? 0 : -1}\n                            disabled={child.props.disabled}\n                            onClick={stepClickHandler(index)}\n                            onKeyDown={onStepKeyDown(index)}\n                        >\n                            <Badge\n                                inline\n                                type={getBadgeType(\n                                    index,\n                                    child.props.completed,\n                                    child.props.disabled,\n                                )}\n                            />\n                            <Ellipsis>{child.props.name}</Ellipsis>\n                        </HeaderButton>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? childrenArray[active].props.name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nStepper.propTypes = {\n    /** Index of currently active step */\n    active: PropTypes.number,\n    /** Callback function for click event on a step */\n    onStepClick: PropTypes.func,\n};\n\nStepper.defaultProps = {\n    active: 0,\n};\n"],"names":["Container","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","LIGHT_GREY","HeaderButton","props","active","BACKGROUND","TEXT_COLOR_DARK","DISABLED_BACKGROUND","PRIMARY_LIGHTER","MobileHeader","Stepper","setActive","useState","children","onStepClick","childrenArray","Children","toArray","stepRefs","stepClickHandler","index","focus","getBadgeType","completed","disabled","BADGE_TYPE","DISABLED","PRIMARY","SUCCESS","onStepKeyDown","e","key","preventDefault","next","length","prev","_jsxs","role","aria-label","map","child","isValidElement","ref","el","type","aria-selected","aria-disabled","tabIndex","onClick","onKeyDown","_jsx","Badge","inline","Ellipsis","name","span","count","propTypes","PropTypes","number","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Stepper.js","sources":["../../../src/components/Stepper/Stepper.tsx"],"sourcesContent":["import React, { Children, PropsWithChildren, useState, isValidElement } from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport { Ellipsis } from '../../shared/styles';\nimport { Badge, BADGE_TYPE } from '../Badge';\n\nconst Container = styled.div`\n    flex: 1;\n    display: flex;\n    flex-direction: column;\n    min-height: 400px;\n`;\n\nconst Header = styled.div`\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)};\n\n    @media (min-width: 601px) {\n        &::before {\n            position: absolute;\n            top: 25px;\n            left: 0;\n            right: 0;\n            height: 2px;\n            background-color: ${getThemeValue(THEME_NAME.LIGHT_GREY)};\n            content: ' ';\n            z-index: 0;\n        }\n    }\n\n    & > * {\n        z-index: 1;\n    }\n`;\n\nconst HeaderButton = styled.button<{ active: boolean }>`\n    border: none;\n    padding: 16px 24px 16px 16px;\n    font-size: 16px;\n    cursor: pointer;\n    background-color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR)\n            : getThemeValue(THEME_NAME.BACKGROUND)};\n    font-weight: ${(props) => (props.active ? 'bold' : 'normal')};\n    overflow: hidden;\n    display: flex;\n    align-items: center;\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n\n    &:disabled {\n        cursor: not-allowed;\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n    }\n\n    &:enabled:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n    }\n\n    @media (max-width: 600px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\nconst MobileHeader = styled.div`\n    padding: 16px;\n    font-size: 16px;\n    line-height: 18px;\n    align-items: center;\n    font-weight: bold;\n    flex: 1;\n    display: flex;\n    flex-direction: row;\n    justify-content: space-between;\n\n    @media (min-width: 601px) {\n        & {\n            display: none;\n        }\n    }\n`;\n\ntype StepperProps = PropsWithChildren<{\n    /**\n     * Index of currently active step\n     * @default 0\n     */\n    active?: number;\n    /** Callback function for click event on a step */\n    onStepClick?: (index: number) => void;\n}> &\n    React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Stepper Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction StepperComponent(props: StepperProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onStepClick, children, ...rest } = props;\n\n    const [active, setActive] = useState(propsActive);\n    const childrenArray = Children.toArray(children);\n    const stepRefs = [] as Array<HTMLButtonElement | null>;\n\n    const stepClickHandler = (index: number) => () => {\n        setActive(index);\n        onStepClick?.(index);\n        // Move focus to the active step\n        stepRefs[index]?.focus();\n    };\n\n    const getBadgeType = (index: number, completed: boolean, disabled: boolean) => {\n        if (disabled) {\n            return BADGE_TYPE.DISABLED;\n        } else if (index === active) {\n            return BADGE_TYPE.PRIMARY;\n        } else if (completed) {\n            return BADGE_TYPE.SUCCESS;\n        }\n        return BADGE_TYPE.DISABLED;\n    };\n\n    // Keyboard navigation for step buttons\n    const onStepKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            stepRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            stepRefs[prev]?.focus();\n        }\n    };\n\n    return (\n        <Container ref={ref} {...rest}>\n            <Header role=\"tablist\" aria-label=\"Stepper Steps\">\n                {Children.map(children, (child, index) => {\n                    if (!isValidElement(child)) return null;\n                    const reactElement = child as React.ReactElement<{\n                        disabled?: boolean;\n                        completed?: boolean;\n                        name?: string;\n                    }>;\n                    return (\n                        <HeaderButton\n                            ref={(el) => {\n                                stepRefs[index] = el;\n                            }}\n                            active={index === active}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={index === active}\n                            aria-disabled={!!reactElement.props.disabled}\n                            tabIndex={index === active ? 0 : -1}\n                            disabled={reactElement.props.disabled}\n                            onClick={stepClickHandler(index)}\n                            onKeyDown={onStepKeyDown(index)}\n                        >\n                            <Badge\n                                inline\n                                type={getBadgeType(\n                                    index,\n                                    reactElement.props.completed || false,\n                                    reactElement.props.disabled || false,\n                                )}\n                            />\n                            <Ellipsis>{reactElement.props.name}</Ellipsis>\n                        </HeaderButton>\n                    );\n                })}\n                <MobileHeader>\n                    <span>\n                        {isValidElement(childrenArray[active])\n                            ? (childrenArray[active] as React.ReactElement<{ name?: string }>).props\n                                  .name\n                            : ''}\n                    </span>\n                    <Badge inline type={BADGE_TYPE.PRIMARY}>\n                        {active + 1} of {Children.count(children)}\n                    </Badge>\n                </MobileHeader>\n            </Header>\n            {childrenArray[active]}\n        </Container>\n    );\n}\n\nconst Stepper = React.forwardRef(StepperComponent);\nexport default Stepper;\n"],"names":["Container","styled","Header","getThemeValue","THEME_NAME","BORDER_LIGHT_COLOR","LIGHT_GREY","HeaderButton","props","active","BACKGROUND","TEXT_COLOR_DARK","DISABLED_BACKGROUND","PRIMARY_LIGHTER","MobileHeader","StepperComponent","ref","propsActive","onStepClick","children","rest","setActive","useState","childrenArray","Children","toArray","stepRefs","stepClickHandler","index","focus","getBadgeType","completed","disabled","BADGE_TYPE","DISABLED","PRIMARY","SUCCESS","onStepKeyDown","e","key","preventDefault","next","length","prev","_jsxs","role","aria-label","map","child","isValidElement","reactElement","el","type","aria-selected","aria-disabled","tabIndex","onClick","onKeyDown","_jsx","Badge","inline","Ellipsis","name","span","count","Stepper","React","forwardRef"],"mappings":"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"}

package/lib-esm/components/Tabs/Tab.d.ts

@@ -1,18 +1,12 @@
 import { PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
-declare const Tab: {
-    (props: PropsWithChildren<{
-        name: string;
-        disabled: boolean;
-    }>): import("@emotion/react/jsx-runtime").JSX.Element;
-    propTypes: {
-        /** Name of the tab. This shown in the tab's button */
-        name: PropTypes.Validator<string>;
-        /** If the tab is disabled */
-        disabled: PropTypes.Requireable<boolean>;
-    };
-    defaultProps: {
-        disabled: boolean;
-    };
-};
+type TabProps = PropsWithChildren<{
+    /** Name of the tab. This shown in the tab's button */
+    name: string;
+    /**
+     * If the tab is disabled
+     * @default false
+     */
+    disabled?: boolean;
+}>;
+declare const Tab: (props: TabProps) => import("@emotion/react/jsx-runtime").JSX.Element;
 export default Tab;

package/lib-esm/components/Tabs/Tab.js

@@ -1,5 +1,4 @@
 import { jsx, Fragment } from '@emotion/react/jsx-runtime';
-import PropTypes from 'prop-types';
 
 const Tab = (props)=>{
     const { children } = props;
@@ -7,13 +6,6 @@ const Tab = (props)=>{
         children: children
     });
 };
-Tab.propTypes = {
-    /** Name of the tab. This shown in the tab's button */ name: PropTypes.string.isRequired,
-    /** If the tab is disabled */ disabled: PropTypes.bool
-};
-Tab.defaultProps = {
-    disabled: false
-};
 
 export { Tab as default };
 //# sourceMappingURL=Tab.js.map

package/lib-esm/components/Tabs/Tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\nimport PropTypes from 'prop-types';\n\nconst Tab = (props: PropsWithChildren<{ name: string; disabled: boolean }>) => {\n    const { children } = props;\n    return <>{children}</>;\n};\n\nTab.propTypes = {\n    /** Name of the tab. This shown in the tab's button */\n    name: PropTypes.string.isRequired,\n    /** If the tab is disabled */\n    disabled: PropTypes.bool,\n};\n\nTab.defaultProps = {\n    disabled: false,\n};\n\nexport default Tab;\n"],"names":["Tab","props","children","_jsx","_Fragment","propTypes","name","PropTypes","string","isRequired","disabled","bool","defaultProps"],"mappings":";;;AAGA,MAAMA,MAAM,CAACC,KAAAA,GAAAA;IACT,MAAM,EAAEC,QAAQ,EAAE,GAAGD,KAAAA;IACrB,qBAAOE,GAAA,CAAAC,QAAA,EAAA;AAAGF,QAAAA,QAAAA,EAAAA;;AACd;AAEAF,GAAAA,CAAIK,SAAS,GAAG;AACZ,2DACAC,IAAAA,EAAMC,SAAAA,CAAUC,MAAM,CAACC,UAAU;kCAEjCC,QAAAA,EAAUH,SAAAA,CAAUI;AACxB,CAAA;AAEAX,GAAAA,CAAIY,YAAY,GAAG;IACfF,QAAAA,EAAU;AACd,CAAA;;;;"}
+{"version":3,"file":"Tab.js","sources":["../../../src/components/Tabs/Tab.tsx"],"sourcesContent":["import { PropsWithChildren } from 'react';\n\ntype TabProps = PropsWithChildren<{\n    /** Name of the tab. This shown in the tab's button */\n    name: string;\n    /**\n     * If the tab is disabled\n     * @default false\n     */\n    disabled?: boolean;\n}>;\n\nconst Tab = (props: TabProps) => {\n    const { children } = props;\n    return <>{children}</>;\n};\n\nexport default Tab;\n"],"names":["Tab","props","children","_jsx","_Fragment"],"mappings":";;AAYA,MAAMA,MAAM,CAACC,KAAAA,GAAAA;IACT,MAAM,EAAEC,QAAQ,EAAE,GAAGD,KAAAA;IACrB,qBAAOE,GAAA,CAAAC,QAAA,EAAA;AAAGF,QAAAA,QAAAA,EAAAA;;AACd;;;;"}

package/lib-esm/components/Tabs/Tabs.d.ts

@@ -1,25 +1,14 @@
-import { PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
-type ITabsProps = PropsWithChildren<{
+declare const Tabs: import("react").ForwardRefExoticComponent<{
+    /**
+     * Active Tab Index
+     * @default 0
+     */
     active?: number;
+    /** OnChange event handler */
     onChange?: (index: number) => void;
-    props?: object;
-    bodyProps?: object;
-}>;
-declare function Tabs(props: ITabsProps): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Tabs {
-    var propTypes: {
-        /** Active Tab Index */
-        active: PropTypes.Requireable<number>;
-        /** OnChange event handler */
-        onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        /** Props for div that contains tab buttons */
-        props: PropTypes.Requireable<object>;
-        /** Props for div that contains tab body */
-        bodyProps: PropTypes.Requireable<object>;
-    };
-    var defaultProps: {
-        active: number;
-    };
-}
+    /** Props for div that contains tab body */
+    bodyProps?: React.HTMLAttributes<HTMLDivElement>;
+} & {
+    children?: import("react").ReactNode | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export default Tabs;

package/lib-esm/components/Tabs/Tabs.js

@@ -1,30 +1,33 @@
 import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
-import { useState, Children, useEffect, isValidElement } from 'react';
-import PropTypes from 'prop-types';
+import { forwardRef, useState, Children, useEffect, isValidElement } from 'react';
 import styled from '@emotion/styled';
 import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
 const Button = /*#__PURE__*/ styled("button", {
-    target: "e6iym3a0",
+    target: "ewz2woa0",
     label: "Button"
 })("background-color:transparent;border:none;padding:8px 12px;font-size:14px;border-radius:3px 3px 0 0;border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none', ";color:", (props)=>props.active ? getThemeValue(THEME_NAME.PRIMARY) : getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";cursor:pointer;&:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";border-bottom:", (props)=>props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`, ";}&[disabled]{background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";color:", getThemeValue(THEME_NAME.DISABLED), ";border-bottom:3px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";}");
 const ButtonContainer = /*#__PURE__*/ styled("div", {
-    target: "e6iym3a1",
+    target: "ewz2woa1",
     label: "ButtonContainer"
 })("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
 const TabBody = /*#__PURE__*/ styled("div", {
-    target: "e6iym3a2",
+    target: "ewz2woa2",
     label: "TabBody"
 })("min-height:150px;");
-function Tabs(props) {
-    const [active, setActive] = useState(props.active);
-    const { children } = props;
+/**
+ * Tabs Component
+ * @param props - Component props
+ * @param ref - Ref forwarded to the underlying HTMLDivElement
+ */ function TabsComponent(props, ref) {
+    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;
+    const [active, setActive] = useState(propsActive);
     const tabRefs = [];
     const childrenArray = Children.toArray(children);
     const switchTab = (index)=>()=>{
             setActive(index);
             tabRefs[index]?.focus();
-            props.onChange?.(index);
+            onChange?.(index);
         };
     // Keyboard navigation for tab buttons
     const onTabKeyDown = (index)=>(e)=>{
@@ -39,29 +42,41 @@ function Tabs(props) {
             }
         };
     useEffect(()=>{
-        setActive(props.active);
-        props.onChange?.(props.active);
+        if (propsActive !== undefined) {
+            setActive(propsActive);
+            onChange?.(propsActive);
+        }
     }, [
-        props
+        propsActive,
+        onChange
     ]);
     // Generate unique IDs for tabs and panels using sanitized tab name and index
     const sanitize = (str)=>str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();
     const tabIds = childrenArray.map((child, i)=>{
         const name = /*#__PURE__*/ isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
-        return `nfui-tab-${sanitize(name)}-${i}`;
+        return `nfui-tab-${sanitize(name || '')}-${i}`;
     });
     const panelIds = childrenArray.map((child, i)=>{
         const name = /*#__PURE__*/ isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;
-        return `nfui-tabpanel-${sanitize(name)}-${i}`;
+        return `nfui-tabpanel-${sanitize(name || '')}-${i}`;
     });
+    // Sanity check for active index
+    if (active === undefined || active < 0 || active >= childrenArray.length) {
+        return null;
+    }
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             /*#__PURE__*/ jsx(ButtonContainer, {
                 role: "tablist",
                 "aria-label": "Tabs",
-                ...props.props,
-                children: childrenArray.map((child, index)=>/*#__PURE__*/ jsx(Button, {
-                        ref: (el)=>tabRefs[index] = el,
+                ref: ref,
+                ...rest,
+                children: childrenArray.map((child, index)=>{
+                    const reactElement = child;
+                    return /*#__PURE__*/ jsx(Button, {
+                        ref: (el)=>{
+                            tabRefs[index] = el;
+                        },
                         id: tabIds[index],
                         type: "button",
                         role: "tab",
@@ -71,31 +86,24 @@ function Tabs(props) {
                         active: active === index,
                         onClick: switchTab(index),
                         onKeyDown: onTabKeyDown(index),
-                        disabled: /*#__PURE__*/ isValidElement(child) ? child.props.disabled : false,
-                        "aria-disabled": /*#__PURE__*/ isValidElement(child) ? child.props.disabled : false,
-                        children: /*#__PURE__*/ isValidElement(child) ? child.props.name : ''
-                    }, tabIds[index]))
+                        disabled: /*#__PURE__*/ isValidElement(child) ? reactElement.props.disabled : false,
+                        "aria-disabled": /*#__PURE__*/ isValidElement(child) ? reactElement.props.disabled : false,
+                        children: /*#__PURE__*/ isValidElement(child) ? reactElement.props.name : ''
+                    }, tabIds[index]);
+                })
             }),
             /*#__PURE__*/ jsx(TabBody, {
+                ...bodyProps,
                 id: panelIds[active],
                 role: "tabpanel",
                 "aria-labelledby": tabIds[active],
                 tabIndex: 0,
-                ...props.bodyProps,
                 children: childrenArray[active]
             })
         ]
     });
 }
-Tabs.propTypes = {
-    /** Active Tab Index */ active: PropTypes.number,
-    /** OnChange event handler */ onChange: PropTypes.func,
-    /** Props for div that contains tab buttons */ props: PropTypes.object,
-    /** Props for div that contains tab body */ bodyProps: PropTypes.object
-};
-Tabs.defaultProps = {
-    active: 0
-};
+const Tabs = /*#__PURE__*/ forwardRef(TabsComponent);
 
 export { Tabs as default };
 //# sourceMappingURL=Tabs.js.map

package/lib-esm/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import { useState, Children, useEffect, PropsWithChildren, isValidElement } from 'react';\nimport PropTypes from 'prop-types';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    active?: number;\n    onChange?: (index: number) => void;\n    props?: object;\n    bodyProps?: object;\n}>;\n\nexport default function Tabs(props: ITabsProps) {\n    const [active, setActive] = useState(props.active);\n    const { children } = props;\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        props.onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        setActive(props.active);\n        props.onChange?.(props.active);\n    }, [props]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tab-${sanitize(name)}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name = isValidElement(child) && child.props.name ? child.props.name : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name)}-${i}`;\n    });\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" {...props.props}>\n                {childrenArray.map((child, index) => (\n                    <Button\n                        key={tabIds[index]}\n                        ref={(el) => (tabRefs[index] = el)}\n                        id={tabIds[index]}\n                        type=\"button\"\n                        role=\"tab\"\n                        aria-selected={active === index}\n                        aria-controls={panelIds[index]}\n                        tabIndex={active === index ? 0 : -1}\n                        active={active === index}\n                        onClick={switchTab(index)}\n                        onKeyDown={onTabKeyDown(index)}\n                        disabled={isValidElement(child) ? child.props.disabled : false}\n                        aria-disabled={isValidElement(child) ? child.props.disabled : false}\n                    >\n                        {isValidElement(child) ? child.props.name : ''}\n                    </Button>\n                ))}\n            </ButtonContainer>\n            <TabBody\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n                {...props.bodyProps}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nTabs.propTypes = {\n    /** Active Tab Index */\n    active: PropTypes.number,\n    /** OnChange event handler */\n    onChange: PropTypes.func,\n    /** Props for div that contains tab buttons */\n    props: PropTypes.object,\n    /** Props for div that contains tab body */\n    bodyProps: PropTypes.object,\n};\n\nTabs.defaultProps = {\n    active: 0,\n};\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","Tabs","setActive","useState","children","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onChange","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","ref","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","bodyProps","propTypes","PropTypes","number","func","object","defaultProps"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import {\n    useState,\n    Children,\n    useEffect,\n    PropsWithChildren,\n    isValidElement,\n    forwardRef,\n} from 'react';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\n\nconst Button = styled.button<{ active: boolean }>`\n    background-color: transparent;\n    border: none;\n    padding: 8px 12px;\n    font-size: 14px;\n    border-radius: 3px 3px 0 0;\n    border-bottom: ${(props) =>\n        props.active ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}` : 'none'};\n    color: ${(props) =>\n        props.active\n            ? getThemeValue(THEME_NAME.PRIMARY)\n            : getThemeValue(THEME_NAME.TEXT_COLOR_DARK)};\n    cursor: pointer;\n\n    &:hover,\n    &:focus {\n        background-color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHTER)};\n        border-bottom: ${(props) =>\n            props.active\n                ? `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`\n                : `3px solid ${getThemeValue(THEME_NAME.PRIMARY)}`};\n    }\n\n    &[disabled] {\n        background-color: ${getThemeValue(THEME_NAME.DISABLED_BACKGROUND)};\n        color: ${getThemeValue(THEME_NAME.DISABLED)};\n        border-bottom: 3px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    }\n`;\n\nconst ButtonContainer = styled.div`\n    border-bottom: 1px solid ${getThemeValue(THEME_NAME.DISABLED_BORDER)};\n    margin-bottom: 5px;\n    position: relative;\n`;\n\nconst TabBody = styled.div`\n    min-height: 150px;\n`;\n\ntype ITabsProps = PropsWithChildren<{\n    /**\n     * Active Tab Index\n     * @default 0\n     */\n    active?: number;\n    /** OnChange event handler */\n    onChange?: (index: number) => void;\n    /** Props for div that contains tab body */\n    bodyProps?: React.HTMLAttributes<HTMLDivElement>;\n}>;\n\n/**\n * Tabs Component\n * @param props - Component props\n * @param ref - Ref forwarded to the underlying HTMLDivElement\n */\nfunction TabsComponent(props: ITabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { active: propsActive = 0, onChange, bodyProps, children, ...rest } = props;\n    const [active, setActive] = useState(propsActive);\n    const tabRefs = [] as Array<HTMLButtonElement | null>;\n    const childrenArray = Children.toArray(children);\n\n    const switchTab = (index: number) => () => {\n        setActive(index);\n        tabRefs[index]?.focus();\n        onChange?.(index);\n    };\n\n    // Keyboard navigation for tab buttons\n    const onTabKeyDown = (index: number) => (e: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {\n            e.preventDefault();\n            const next = (index + 1) % childrenArray.length;\n            tabRefs[next]?.focus();\n        } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {\n            e.preventDefault();\n            const prev = (index - 1 + childrenArray.length) % childrenArray.length;\n            tabRefs[prev]?.focus();\n        }\n    };\n\n    useEffect(() => {\n        if (propsActive !== undefined) {\n            setActive(propsActive);\n            onChange?.(propsActive);\n        }\n    }, [propsActive, onChange]);\n\n    // Generate unique IDs for tabs and panels using sanitized tab name and index\n    const sanitize = (str: string) => str.replace(/[^a-zA-Z0-9_-]/g, '').toLowerCase();\n    const tabIds = childrenArray.map((child, i) => {\n        const name =\n            isValidElement(child) && (child as React.ReactElement<{ name?: string }>).props.name\n                ? (child as React.ReactElement<{ name?: string }>).props.name\n                : `tab${i}`;\n        return `nfui-tab-${sanitize(name || '')}-${i}`;\n    });\n    const panelIds = childrenArray.map((child, i) => {\n        const name =\n            isValidElement(child) && (child as React.ReactElement<{ name?: string }>).props.name\n                ? (child as React.ReactElement<{ name?: string }>).props.name\n                : `tab${i}`;\n        return `nfui-tabpanel-${sanitize(name || '')}-${i}`;\n    });\n\n    // Sanity check for active index\n    if (active === undefined || active < 0 || active >= childrenArray.length) {\n        return null;\n    }\n\n    return (\n        <>\n            <ButtonContainer role=\"tablist\" aria-label=\"Tabs\" ref={ref} {...rest}>\n                {childrenArray.map((child, index) => {\n                    const reactElement = child as React.ReactElement<{\n                        disabled?: boolean;\n                        name?: string;\n                    }>;\n                    return (\n                        <Button\n                            key={tabIds[index]}\n                            ref={(el) => {\n                                tabRefs[index] = el;\n                            }}\n                            id={tabIds[index]}\n                            type=\"button\"\n                            role=\"tab\"\n                            aria-selected={active === index}\n                            aria-controls={panelIds[index]}\n                            tabIndex={active === index ? 0 : -1}\n                            active={active === index}\n                            onClick={switchTab(index)}\n                            onKeyDown={onTabKeyDown(index)}\n                            disabled={isValidElement(child) ? reactElement.props.disabled : false}\n                            aria-disabled={\n                                isValidElement(child) ? reactElement.props.disabled : false\n                            }\n                        >\n                            {isValidElement(child) ? reactElement.props.name : ''}\n                        </Button>\n                    );\n                })}\n            </ButtonContainer>\n            <TabBody\n                {...bodyProps}\n                id={panelIds[active]}\n                role=\"tabpanel\"\n                aria-labelledby={tabIds[active]}\n                tabIndex={0}\n            >\n                {childrenArray[active]}\n            </TabBody>\n        </>\n    );\n}\n\nconst Tabs = forwardRef(TabsComponent);\nexport default Tabs;\n"],"names":["Button","styled","props","active","getThemeValue","THEME_NAME","PRIMARY","TEXT_COLOR_DARK","PRIMARY_LIGHTER","DISABLED_BACKGROUND","DISABLED","DISABLED_BORDER","ButtonContainer","TabBody","TabsComponent","ref","propsActive","onChange","bodyProps","children","rest","setActive","useState","tabRefs","childrenArray","Children","toArray","switchTab","index","focus","onTabKeyDown","e","key","preventDefault","next","length","prev","useEffect","undefined","sanitize","str","replace","toLowerCase","tabIds","map","child","i","name","isValidElement","panelIds","_jsxs","_Fragment","_jsx","role","aria-label","reactElement","el","id","type","aria-selected","aria-controls","tabIndex","onClick","onKeyDown","disabled","aria-disabled","aria-labelledby","Tabs","forwardRef"],"mappings":"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"}

package/lib-esm/components/Toast/Toast.d.ts

@@ -13,13 +13,13 @@ export declare enum TOAST_TYPE {
     DANGER = "DANGER"
 }
 declare class Toast {
-    private element;
-    private ariaLiveContainer;
-    private toast;
-    private timeout;
-    private root;
-    private politeRegion;
-    private assertiveRegion;
+    private element?;
+    private ariaLiveContainer?;
+    private toast?;
+    private timeout?;
+    private root?;
+    private politeRegion?;
+    private assertiveRegion?;
     private isPaused;
     private currentOptions;
     constructor();

package/lib-esm/components/Toast/Toast.js

@@ -28,15 +28,15 @@ const getBackgroundColor = (type)=>{
     }
 };
 const ToastContainer = /*#__PURE__*/ styled(Card, {
-    target: "ei8ihm80",
+    target: "e1bc14ug0",
     label: "ToastContainer"
 })("box-sizing:border-box;border-radius:3px;padding:12px;background-color:", (props)=>getBackgroundColor(props.type), ";color:", getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT), ";margin:20px;font-size:14px;line-height:20px;transform:translateY(100%);transition:transform 0.3s ease;width:344px;display:flex;align-items:center;position:relative;& svg{width:20px;height:20px;fill:currentColor;}@media (max-width:480px){&{margin:0;width:100vw;border-radius:0;}}.nf-layer-enter &{transform:translateY(0%);}");
 const TextContainer = /*#__PURE__*/ styled("div", {
-    target: "ei8ihm81",
+    target: "e1bc14ug1",
     label: "TextContainer"
 })("flex:1;");
 const CloseContainer = /*#__PURE__*/ styled("button", {
-    target: "ei8ihm82",
+    target: "e1bc14ug2",
     label: "CloseContainer"
 })("background-color:transparent;color:", getThemeValue(THEME_NAME.PRIMARY_LIGHT), ";padding:6px 10px;border:none;border-radius:3px;text-transform:uppercase;cursor:pointer;&:focus{background-color:rgba(255,255,255,0.1);}");
 const DEFAULT_DURATION = 2000;
@@ -59,6 +59,7 @@ const createAriaLiveRegion = (id, ariaLive)=>{
 };
 class Toast {
     add(options) {
+        if (!this.element) return;
         const { text, buttonText, buttonClick, duration, type = "NORMAL" } = options;
         this.currentOptions = options;
         this.isPaused = false;
@@ -117,9 +118,9 @@ class Toast {
             if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {
                 document.body.removeChild(this.ariaLiveContainer);
             }
-            this.politeRegion = null;
-            this.assertiveRegion = null;
-            this.ariaLiveContainer = null;
+            this.politeRegion = undefined;
+            this.assertiveRegion = undefined;
+            this.ariaLiveContainer = undefined;
         };
         /**
      * Set up keyboard listener for dismissing toast with Escape key
@@ -148,8 +149,8 @@ class Toast {
      * Update the appropriate live region with toast content
      */ this.updateLiveRegion = (content, isAssertive)=>{
             const region = isAssertive ? this.assertiveRegion : this.politeRegion;
-            region.textContent = '';
             if (region) {
+                region.textContent = '';
                 // Add content after delay
                 setTimeout(()=>{
                     if (region) {
@@ -163,16 +164,16 @@ class Toast {
                 this.toast[1]();
                 if (this.timeout) {
                     clearTimeout(this.timeout);
-                    this.timeout = null;
+                    this.timeout = undefined;
                 }
             }
-            this.toast = null;
+            this.toast = undefined;
             this.currentOptions = null;
             this.isPaused = false;
             setTimeout(()=>{
                 if (!this.toast && this.root) {
                     this.root.unmount();
-                    this.root = null;
+                    this.root = undefined;
                 }
             }, 300);
         };
@@ -217,7 +218,7 @@ class Toast {
         this.setupKeyboardListeners();
     }
 }
-var Toast$1 = new Toast();
+var Toast_default = new Toast();
 
-export { TOAST_TYPE, Toast$1 as default };
+export { TOAST_TYPE, Toast_default as default };
 //# sourceMappingURL=Toast.js.map

package/lib-esm/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n    text: string;\n    buttonText?: string;\n    buttonClick?: () => void;\n    duration?: number;\n    type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n    NORMAL = 'NORMAL',\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    WARNING = 'WARNING',\n    DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n    switch (type) {\n        case TOAST_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n        case TOAST_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case TOAST_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case TOAST_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case TOAST_TYPE.NORMAL:\n            return getThemeValue(THEME_NAME.TOAST);\n    }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n    box-sizing: border-box;\n    border-radius: 3px;\n    padding: 12px;\n    background-color: ${(props) => getBackgroundColor(props.type)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    margin: 20px;\n    font-size: 14px;\n    line-height: 20px;\n    transform: translateY(100%);\n    transition: transform 0.3s ease;\n    width: 344px;\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    & svg {\n        width: 20px;\n        height: 20px;\n        fill: currentColor;\n    }\n\n    @media (max-width: 480px) {\n        & {\n            margin: 0;\n            width: 100vw;\n            border-radius: 0;\n        }\n    }\n\n    .nf-layer-enter & {\n        transform: translateY(0%);\n    }\n`;\n\nconst TextContainer = styled.div`\n    flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n    background-color: transparent;\n    color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    padding: 6px 10px;\n    border: none;\n    border-radius: 3px;\n    text-transform: uppercase;\n    cursor: pointer;\n\n    &:focus {\n        background-color: rgba(255, 255, 255, 0.1);\n    }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nconst createAriaLiveRegion = (id: string, ariaLive: 'polite' | 'assertive') => {\n    const region = document.createElement('div');\n    region.id = id;\n    region.style.position = 'absolute';\n    region.style.width = '1px';\n    region.style.height = '1px';\n    region.style.padding = '0';\n    region.style.margin = '-1px';\n    region.style.overflow = 'hidden';\n    region.style.clip = 'rect(0, 0, 0, 0)';\n    region.style.whiteSpace = 'nowrap';\n    region.style.borderWidth = '0';\n    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');\n    region.setAttribute('aria-live', ariaLive);\n    region.setAttribute('aria-atomic', 'true');\n    return region;\n};\n\nclass Toast {\n    private element: HTMLDivElement;\n    private ariaLiveContainer: HTMLDivElement;\n    private toast: ReturnType<typeof LayerManager.renderLayer>;\n    private timeout: NodeJS.Timeout;\n    private root: Root;\n    private politeRegion: HTMLDivElement;\n    private assertiveRegion: HTMLDivElement;\n    private isPaused: boolean = false;\n    private currentOptions: ToastOptions | null = null;\n\n    constructor() {\n        if (typeof document === 'undefined') return;\n\n        this.element = document?.createElement('div');\n        this.ariaLiveContainer = document?.createElement('div');\n        this.ariaLiveContainer.id = 'nf-toast-container';\n        document.body.appendChild(this.ariaLiveContainer);\n\n        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');\n        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');\n        this.ariaLiveContainer.appendChild(this.politeRegion);\n        this.ariaLiveContainer.appendChild(this.assertiveRegion);\n\n        this.setupKeyboardListeners();\n    }\n\n    /**\n     * Clean up event listeners and DOM elements\n     * Call this when the app is tearing down (useful for tests)\n     */\n    public destroy = () => {\n        if (typeof document !== 'undefined') {\n            document.removeEventListener('keydown', this.handleKeyDown);\n        }\n        this.remove();\n        if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n            document.body.removeChild(this.ariaLiveContainer);\n        }\n        this.politeRegion = null;\n        this.assertiveRegion = null;\n        this.ariaLiveContainer = null;\n    };\n\n    /**\n     * Set up keyboard listener for dismissing toast with Escape key\n     */\n    private setupKeyboardListeners = () => {\n        if (typeof document !== 'undefined') {\n            document.addEventListener('keydown', this.handleKeyDown);\n        }\n    };\n\n    /**\n     * Handle keyboard events for toast interaction\n     */\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (!this.toast) return;\n\n        // Escape key dismisses the toast\n        if (event.key === 'Escape') {\n            this.remove();\n        }\n        // Space key pauses/resumes auto-dismiss\n        else if (event.key === ' ' && this.currentOptions) {\n            event.preventDefault();\n            if (this.isPaused) {\n                this.resumeTimeout();\n            } else {\n                this.pauseTimeout();\n            }\n        }\n    };\n\n    /**\n     * Update the appropriate live region with toast content\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegion : this.politeRegion;\n        region.textContent = '';\n\n        if (region) {\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 200);\n        }\n    };\n\n    public remove = () => {\n        if (this.toast) {\n            this.toast[1]();\n            if (this.timeout) {\n                clearTimeout(this.timeout);\n                this.timeout = null;\n            }\n        }\n        this.toast = null;\n        this.currentOptions = null;\n        this.isPaused = false;\n\n        setTimeout(() => {\n            if (!this.toast && this.root) {\n                this.root.unmount();\n                this.root = null;\n            }\n        }, 300);\n    };\n\n    /**\n     * Pause toast auto-dismiss\n     */\n    private pauseTimeout = () => {\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n            this.isPaused = true;\n        }\n    };\n\n    /**\n     * Resume toast auto-dismiss\n     */\n    private resumeTimeout = () => {\n        if (this.currentOptions && this.isPaused) {\n            this.timeout = setTimeout(() => {\n                this.remove();\n            }, this.currentOptions.duration || DEFAULT_DURATION);\n            this.isPaused = false;\n        }\n    };\n\n    /**\n     * Pause toast when user is hovering over it.\n     */\n    public pause = () => {\n        this.pauseTimeout();\n    };\n\n    /**\n     * Restart the removal of toast.\n     */\n    public resume = (options: ToastOptions) => () => {\n        this.currentOptions = options;\n        this.resumeTimeout();\n    };\n\n    public add(options: ToastOptions) {\n        const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n        this.currentOptions = options;\n        this.isPaused = false;\n        this.remove();\n\n        // Determine if this is an assertive message (warning/danger)\n        const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;\n\n        // Announce to screen readers\n        const announcement = buttonText ? `${text} ${buttonText} button available` : text;\n        this.updateLiveRegion(announcement, isAssertive);\n\n        this.toast = LayerManager.renderLayer({\n            exitDelay: 300,\n            closeOnEsc: false,\n            closeOnOverlayClick: false,\n            alwaysOnTop: true,\n            position: LAYER_POSITION.BOTTOM_LEFT,\n            component: (\n                <>\n                    {/* Visual toast (hidden from screen readers) */}\n                    <ToastContainer\n                        {...options}\n                        type={type}\n                        elevated\n                        onMouseEnter={this.pause}\n                        onMouseLeave={this.resume(options)}\n                        aria-hidden=\"true\"\n                    >\n                        <TextContainer>{text}</TextContainer>\n                        {buttonText && (\n                            <CloseContainer\n                                onClick={buttonClick}\n                                type=\"button\"\n                                aria-label={`${buttonText} - Press Space to pause auto-dismiss, Escape to close`}\n                            >\n                                {buttonText}\n                            </CloseContainer>\n                        )}\n                    </ToastContainer>\n                </>\n            ),\n        });\n        const Component = this.toast[0];\n        this.root = createRoot(this.element);\n        this.root.render(<Component />);\n\n        this.timeout = setTimeout(() => {\n            this.remove();\n        }, duration || DEFAULT_DURATION);\n    }\n}\n\nexport default new Toast();\n"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","element","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import { createRoot, type Root } from 'react-dom/client';\nimport styled from '@emotion/styled';\nimport { getThemeValue, THEME_NAME } from '../../shared/constants';\nimport LayerManager, { LAYER_POSITION } from '../../shared/LayerManager';\nimport { Card } from '../Card';\n\nexport interface ToastOptions {\n    text: string;\n    buttonText?: string;\n    buttonClick?: () => void;\n    duration?: number;\n    type?: TOAST_TYPE;\n}\n\nexport enum TOAST_TYPE {\n    NORMAL = 'NORMAL',\n    INFO = 'INFO',\n    SUCCESS = 'SUCCESS',\n    WARNING = 'WARNING',\n    DANGER = 'DANGER',\n}\n\nconst getBackgroundColor = (type: TOAST_TYPE) => {\n    switch (type) {\n        case TOAST_TYPE.INFO:\n            return getThemeValue(THEME_NAME.INFO);\n        case TOAST_TYPE.SUCCESS:\n            return getThemeValue(THEME_NAME.SUCCESS);\n        case TOAST_TYPE.WARNING:\n            return getThemeValue(THEME_NAME.WARNING);\n        case TOAST_TYPE.DANGER:\n            return getThemeValue(THEME_NAME.ERROR);\n        case TOAST_TYPE.NORMAL:\n            return getThemeValue(THEME_NAME.TOAST);\n    }\n};\n\nconst ToastContainer = styled(Card)<{ type: TOAST_TYPE }>`\n    box-sizing: border-box;\n    border-radius: 3px;\n    padding: 12px;\n    background-color: ${(props) => getBackgroundColor(props.type)};\n    color: ${getThemeValue(THEME_NAME.TEXT_COLOR_LIGHT)};\n    margin: 20px;\n    font-size: 14px;\n    line-height: 20px;\n    transform: translateY(100%);\n    transition: transform 0.3s ease;\n    width: 344px;\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    & svg {\n        width: 20px;\n        height: 20px;\n        fill: currentColor;\n    }\n\n    @media (max-width: 480px) {\n        & {\n            margin: 0;\n            width: 100vw;\n            border-radius: 0;\n        }\n    }\n\n    .nf-layer-enter & {\n        transform: translateY(0%);\n    }\n`;\n\nconst TextContainer = styled.div`\n    flex: 1;\n`;\n\nconst CloseContainer = styled.button`\n    background-color: transparent;\n    color: ${getThemeValue(THEME_NAME.PRIMARY_LIGHT)};\n    padding: 6px 10px;\n    border: none;\n    border-radius: 3px;\n    text-transform: uppercase;\n    cursor: pointer;\n\n    &:focus {\n        background-color: rgba(255, 255, 255, 0.1);\n    }\n`;\n\nconst DEFAULT_DURATION = 2000;\n\nconst createAriaLiveRegion = (id: string, ariaLive: 'polite' | 'assertive') => {\n    const region = document.createElement('div');\n    region.id = id;\n    region.style.position = 'absolute';\n    region.style.width = '1px';\n    region.style.height = '1px';\n    region.style.padding = '0';\n    region.style.margin = '-1px';\n    region.style.overflow = 'hidden';\n    region.style.clip = 'rect(0, 0, 0, 0)';\n    region.style.whiteSpace = 'nowrap';\n    region.style.borderWidth = '0';\n    region.setAttribute('role', ariaLive === 'assertive' ? 'alert' : 'log');\n    region.setAttribute('aria-live', ariaLive);\n    region.setAttribute('aria-atomic', 'true');\n    return region;\n};\n\nclass Toast {\n    private element?: HTMLDivElement;\n    private ariaLiveContainer?: HTMLDivElement;\n    private toast?: ReturnType<typeof LayerManager.renderLayer>;\n    private timeout?: NodeJS.Timeout;\n    private root?: Root;\n    private politeRegion?: HTMLDivElement;\n    private assertiveRegion?: HTMLDivElement;\n    private isPaused: boolean = false;\n    private currentOptions: ToastOptions | null = null;\n\n    constructor() {\n        if (typeof document === 'undefined') return;\n\n        this.element = document?.createElement('div');\n        this.ariaLiveContainer = document?.createElement('div');\n        this.ariaLiveContainer.id = 'nf-toast-container';\n        document.body.appendChild(this.ariaLiveContainer);\n\n        this.politeRegion = createAriaLiveRegion('nf-toast-polite-region', 'polite');\n        this.assertiveRegion = createAriaLiveRegion('nf-toast-assertive-region', 'assertive');\n        this.ariaLiveContainer.appendChild(this.politeRegion);\n        this.ariaLiveContainer.appendChild(this.assertiveRegion);\n\n        this.setupKeyboardListeners();\n    }\n\n    /**\n     * Clean up event listeners and DOM elements\n     * Call this when the app is tearing down (useful for tests)\n     */\n    public destroy = () => {\n        if (typeof document !== 'undefined') {\n            document.removeEventListener('keydown', this.handleKeyDown);\n        }\n        this.remove();\n        if (this.ariaLiveContainer && document.body.contains(this.ariaLiveContainer)) {\n            document.body.removeChild(this.ariaLiveContainer);\n        }\n        this.politeRegion = undefined;\n        this.assertiveRegion = undefined;\n        this.ariaLiveContainer = undefined;\n    };\n\n    /**\n     * Set up keyboard listener for dismissing toast with Escape key\n     */\n    private setupKeyboardListeners = () => {\n        if (typeof document !== 'undefined') {\n            document.addEventListener('keydown', this.handleKeyDown);\n        }\n    };\n\n    /**\n     * Handle keyboard events for toast interaction\n     */\n    private handleKeyDown = (event: KeyboardEvent) => {\n        if (!this.toast) return;\n\n        // Escape key dismisses the toast\n        if (event.key === 'Escape') {\n            this.remove();\n        }\n        // Space key pauses/resumes auto-dismiss\n        else if (event.key === ' ' && this.currentOptions) {\n            event.preventDefault();\n            if (this.isPaused) {\n                this.resumeTimeout();\n            } else {\n                this.pauseTimeout();\n            }\n        }\n    };\n\n    /**\n     * Update the appropriate live region with toast content\n     */\n    private updateLiveRegion = (content: string, isAssertive: boolean) => {\n        const region = isAssertive ? this.assertiveRegion : this.politeRegion;\n\n        if (region) {\n            region.textContent = '';\n            // Add content after delay\n            setTimeout(() => {\n                if (region) {\n                    region.textContent = content;\n                }\n            }, 200);\n        }\n    };\n\n    public remove = () => {\n        if (this.toast) {\n            this.toast[1]();\n            if (this.timeout) {\n                clearTimeout(this.timeout);\n                this.timeout = undefined;\n            }\n        }\n        this.toast = undefined;\n        this.currentOptions = null;\n        this.isPaused = false;\n\n        setTimeout(() => {\n            if (!this.toast && this.root) {\n                this.root.unmount();\n                this.root = undefined;\n            }\n        }, 300);\n    };\n\n    /**\n     * Pause toast auto-dismiss\n     */\n    private pauseTimeout = () => {\n        if (this.timeout) {\n            clearTimeout(this.timeout);\n            this.isPaused = true;\n        }\n    };\n\n    /**\n     * Resume toast auto-dismiss\n     */\n    private resumeTimeout = () => {\n        if (this.currentOptions && this.isPaused) {\n            this.timeout = setTimeout(() => {\n                this.remove();\n            }, this.currentOptions.duration || DEFAULT_DURATION);\n            this.isPaused = false;\n        }\n    };\n\n    /**\n     * Pause toast when user is hovering over it.\n     */\n    public pause = () => {\n        this.pauseTimeout();\n    };\n\n    /**\n     * Restart the removal of toast.\n     */\n    public resume = (options: ToastOptions) => () => {\n        this.currentOptions = options;\n        this.resumeTimeout();\n    };\n\n    public add(options: ToastOptions) {\n        if (!this.element) return;\n\n        const { text, buttonText, buttonClick, duration, type = TOAST_TYPE.NORMAL } = options;\n        this.currentOptions = options;\n        this.isPaused = false;\n        this.remove();\n\n        // Determine if this is an assertive message (warning/danger)\n        const isAssertive = type === TOAST_TYPE.WARNING || type === TOAST_TYPE.DANGER;\n\n        // Announce to screen readers\n        const announcement = buttonText ? `${text} ${buttonText} button available` : text;\n        this.updateLiveRegion(announcement, isAssertive);\n\n        this.toast = LayerManager.renderLayer({\n            exitDelay: 300,\n            closeOnEsc: false,\n            closeOnOverlayClick: false,\n            alwaysOnTop: true,\n            position: LAYER_POSITION.BOTTOM_LEFT,\n            component: (\n                <>\n                    {/* Visual toast (hidden from screen readers) */}\n                    <ToastContainer\n                        {...options}\n                        type={type}\n                        elevated\n                        onMouseEnter={this.pause}\n                        onMouseLeave={this.resume(options)}\n                        aria-hidden=\"true\"\n                    >\n                        <TextContainer>{text}</TextContainer>\n                        {buttonText && (\n                            <CloseContainer\n                                onClick={buttonClick}\n                                type=\"button\"\n                                aria-label={`${buttonText} - Press Space to pause auto-dismiss, Escape to close`}\n                            >\n                                {buttonText}\n                            </CloseContainer>\n                        )}\n                    </ToastContainer>\n                </>\n            ),\n        });\n        const Component = this.toast[0];\n        this.root = createRoot(this.element);\n        this.root.render(<Component />);\n\n        this.timeout = setTimeout(() => {\n            this.remove();\n        }, duration || DEFAULT_DURATION);\n    }\n}\n\nexport default new Toast();\n"],"names":["TOAST_TYPE","getBackgroundColor","type","getThemeValue","THEME_NAME","INFO","SUCCESS","WARNING","ERROR","TOAST","ToastContainer","styled","Card","props","TEXT_COLOR_LIGHT","TextContainer","CloseContainer","PRIMARY_LIGHT","DEFAULT_DURATION","createAriaLiveRegion","id","ariaLive","region","document","createElement","style","position","width","height","padding","margin","overflow","clip","whiteSpace","borderWidth","setAttribute","Toast","add","options","element","text","buttonText","buttonClick","duration","currentOptions","isPaused","remove","isAssertive","announcement","updateLiveRegion","toast","LayerManager","renderLayer","exitDelay","closeOnEsc","closeOnOverlayClick","alwaysOnTop","LAYER_POSITION","BOTTOM_LEFT","component","_jsx","_Fragment","_jsxs","elevated","onMouseEnter","pause","onMouseLeave","resume","aria-hidden","onClick","aria-label","Component","root","createRoot","render","timeout","setTimeout","destroy","removeEventListener","handleKeyDown","ariaLiveContainer","body","contains","removeChild","politeRegion","undefined","assertiveRegion","setupKeyboardListeners","addEventListener","event","key","preventDefault","resumeTimeout","pauseTimeout","content","textContent","clearTimeout","unmount","appendChild"],"mappings":"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"}

package/lib-esm/components/Toast/ToastStory.d.ts

@@ -1,27 +1,24 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import { TOAST_TYPE } from './Toast';
-type ToastOptions = PropTypes.InferProps<typeof ToastStory.propTypes>;
+type ToastOptions = {
+    /** Text of the toast */
+    text: string;
+    /** Id for the notification, helps in de-duplication. */
+    id?: string;
+    /**
+     * Duration for the toast in milliseconds
+     * @default 2000
+     */
+    duration?: number;
+    /**
+     * Type of toast
+     * @default TOAST_TYPE.NORMAL
+     */
+    type?: TOAST_TYPE;
+    /** Action button text */
+    buttonText?: string;
+    /** Action button click callback */
+    buttonClick?: () => void;
+};
 /** This component is only used for storybook documentation */
-export default class ToastStory extends React.Component<ToastOptions> {
-    static propTypes: {
-        /** Text of the toast */
-        text: PropTypes.Validator<string>;
-        /** Id for the notification, helps in de-duplication. */
-        id: PropTypes.Requireable<string>;
-        /** Duration for the toast in milliseconds */
-        duration: PropTypes.Requireable<number>;
-        /** Type of toast */
-        type: PropTypes.Requireable<TOAST_TYPE>;
-        /** Action button text */
-        buttonText: PropTypes.Requireable<string>;
-        /** Action button click callback */
-        buttonClick: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static defaultProps: {
-        duration: number;
-        type: TOAST_TYPE;
-    };
-    render(): React.ReactNode;
-}
+export default function ToastStory(props: ToastOptions): null;
 export {};

package/lib-esm/components/Tooltip/Tooltip.d.ts

@@ -1,22 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 export declare enum TOOLTIP_POSITION {
     TOP = "TOP",
     BOTTOM = "BOTTOM",
     LEFT = "LEFT",
     RIGHT = "RIGHT"
 }
-declare function Tooltip(props: React.PropsWithChildren<TooltipProps>): import("@emotion/react/jsx-runtime").JSX.Element;
-declare namespace Tooltip {
-    var propTypes: {
-        /** Text to show in the tooltip */
-        tooltipText: PropTypes.Validator<NonNullable<NonNullable<PropTypes.ReactNodeLike>>>;
-        /** Position of the tooltip */
-        position: PropTypes.Requireable<TOOLTIP_POSITION>;
-    };
-    var defaultProps: {
-        position: TOOLTIP_POSITION;
-    };
-}
+declare const Tooltip: React.ForwardRefExoticComponent<{
+    /** Text to show in the tooltip */
+    tooltipText: string | React.ReactNode;
+    /**
+     * Position of the tooltip
+     * @default TOOLTIP_POSITION.BOTTOM
+     */
+    position?: TOOLTIP_POSITION;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default Tooltip;
-type TooltipProps = PropTypes.InferProps<typeof Tooltip.propTypes>;