no-frills-ui 0.0.14-alpha.1 → 0.0.14-alpha.11

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

@@ -1,112 +1,114 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { Children, useState } from 'react';
+import { jsxs, jsx } from '@emotion/react/jsx-runtime';
+import React, { useState, Children, isValidElement } from 'react';
 import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import constants from '../../shared/constants';
-import { Badge, BADGE_TYPE } from '../Badge';
-import { Ellipsis } from '../../shared/styles';
-const Container = styled.div `
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    min-height: 400px;
-`;
-const Header = styled.div `
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    border-bottom: 1px solid var(--border-light-color, ${constants.BORDER_LIGHT_COLOR});
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
+import { Ellipsis } from '../../shared/styles.js';
+import Badge, { BADGE_TYPE } from '../Badge/Badge.js';
 
-    @media (min-width: 601px) {
-        &::before {
-            position: absolute;
-            top: 25px;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background-color: var(--light-grey, ${constants.LIGHT_GREY});
-            content: ' ';
-            z-index: 0;
-        }
-    }
-    
-    & > * {
-        z-index: 1;
-    }
-`;
-const HeaderButton = styled.button `
-    border: none;
-    padding: 16px 24px 16px 16px;
-    font-size: 16px;
-    cursor: pointer;
-    background-color: ${props => props.active
-    ? `var(--border-light-color, ${constants.BORDER_LIGHT_COLOR})`
-    : `var(--background, ${constants.BACKGROUND})`};
-    font-weight: ${props => props.active ? 'bold' : 'normal'};
-    overflow: hidden;
-    display:flex;
-    align-items: center;
-
-    &:disabled {
-        cursor: not-allowed;
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
-    }
-
-    &:enabled:hover, &:focus {
-        background-color: var(--primary-light, ${constants.PRIMARY_LIGHTER});
-    }
-
-    @media (max-width: 600px) {
-        & {
-            display: none;
-        }
-    }
-`;
-const MobileHeader = styled.div `
-    padding: 16px;
-    font-size: 16px;
-    line-height: 18px;
-    align-items: center;
-    font-weight: bold;
-    flex: 1;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-    @media (min-width: 601px) {
-        & {
-            display: none;
-        }
-    }
-`;
-export default function Stepper(props) {
-    const [active, setActive] = useState(props.active);
-    const { children, onStepClick } = props;
-    const stepClickHandler = (index) => () => {
-        setActive(index);
-        onStepClick === null || onStepClick === void 0 ? void 0 : onStepClick(index);
-    };
-    const getBadgeType = (index, completed, disabled) => {
+const Container$1 = /*#__PURE__*/ styled("div", {
+    target: "e1o5kbe30",
+    label: "Container"
+})("flex:1;display:flex;flex-direction:column;min-height:400px;");
+const Header = /*#__PURE__*/ styled("div", {
+    target: "e1o5kbe31",
+    label: "Header"
+})("display:flex;flex-direction:row;justify-content:space-between;border-bottom:1px solid ", getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR), ";@media (min-width:601px){&::before{position:absolute;top:25px;left:0;right:0;height:2px;background-color:", getThemeValue(THEME_NAME.LIGHT_GREY), ";content:' ';z-index:0;}}& > *{z-index:1;}");
+const HeaderButton = /*#__PURE__*/ styled("button", {
+    target: "e1o5kbe32",
+    label: "HeaderButton"
+})("border:none;padding:16px 24px 16px 16px;font-size:16px;cursor:pointer;background-color:", (props)=>props.active ? getThemeValue(THEME_NAME.BORDER_LIGHT_COLOR) : getThemeValue(THEME_NAME.BACKGROUND), ";font-weight:", (props)=>props.active ? 'bold' : 'normal', ";overflow:hidden;display:flex;align-items:center;color:", getThemeValue(THEME_NAME.TEXT_COLOR_DARK), ";&:disabled{cursor:not-allowed;background-color:", getThemeValue(THEME_NAME.DISABLED_BACKGROUND), ";}&:enabled:hover,&:focus{background-color:", getThemeValue(THEME_NAME.PRIMARY_LIGHTER), ";}@media (max-width:600px){&{display:none;}}");
+const MobileHeader = /*#__PURE__*/ styled("div", {
+    target: "e1o5kbe33",
+    label: "MobileHeader"
+})("padding:16px;font-size:16px;line-height:18px;align-items:center;font-weight:bold;flex:1;display:flex;flex-direction:row;justify-content:space-between;@media (min-width:601px){&{display:none;}}");
+function StepperComponent(props, ref) {
+    const { active: propsActive = 0, onStepClick, children, ...rest } = props;
+    const [active, setActive] = useState(propsActive);
+    const childrenArray = Children.toArray(children);
+    const stepRefs = [];
+    const stepClickHandler = (index)=>()=>{
+            setActive(index);
+            onStepClick?.(index);
+            // Move focus to the active step
+            stepRefs[index]?.focus();
+        };
+    const getBadgeType = (index, completed, disabled)=>{
         if (disabled) {
             return BADGE_TYPE.DISABLED;
-        }
-        else if (index === active) {
+        } else if (index === active) {
             return BADGE_TYPE.PRIMARY;
-        }
-        else if (completed) {
+        } else if (completed) {
             return BADGE_TYPE.SUCCESS;
         }
         return BADGE_TYPE.DISABLED;
     };
-    return (_jsxs(Container, { children: [_jsxs(Header, { children: [Children.map(children, (child, index) => (_jsx(_Fragment, { children: _jsxs(HeaderButton, { active: index === active, type: 'button', disabled: child.props.disabled, onClick: stepClickHandler(index), children: [_jsx(Badge, { inline: true, type: getBadgeType(index, child.props.completed, child.props.disabled) }), _jsx(Ellipsis, { children: child.props.name })] }) }))), _jsxs(MobileHeader, { children: [_jsx("span", { children: children[active].props.name }), _jsxs(Badge, { inline: true, type: BADGE_TYPE.PRIMARY, children: [active + 1, " of ", children.length] })] })] }), children[active]] }));
+    // Keyboard navigation for step buttons
+    const onStepKeyDown = (index)=>(e)=>{
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                const next = (index + 1) % childrenArray.length;
+                stepRefs[next]?.focus();
+            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+                stepRefs[prev]?.focus();
+            }
+        };
+    return /*#__PURE__*/ jsxs(Container$1, {
+        ref: ref,
+        ...rest,
+        children: [
+            /*#__PURE__*/ jsxs(Header, {
+                role: "tablist",
+                "aria-label": "Stepper Steps",
+                children: [
+                    Children.map(children, (child, index)=>{
+                        if (!/*#__PURE__*/ isValidElement(child)) return null;
+                        return /*#__PURE__*/ jsxs(HeaderButton, {
+                            ref: (el)=>stepRefs[index] = el,
+                            active: index === active,
+                            type: "button",
+                            role: "tab",
+                            "aria-selected": index === active,
+                            "aria-disabled": !!child.props.disabled,
+                            tabIndex: index === active ? 0 : -1,
+                            disabled: child.props.disabled,
+                            onClick: stepClickHandler(index),
+                            onKeyDown: onStepKeyDown(index),
+                            children: [
+                                /*#__PURE__*/ jsx(Badge, {
+                                    inline: true,
+                                    type: getBadgeType(index, child.props.completed, child.props.disabled)
+                                }),
+                                /*#__PURE__*/ jsx(Ellipsis, {
+                                    children: child.props.name
+                                })
+                            ]
+                        });
+                    }),
+                    /*#__PURE__*/ jsxs(MobileHeader, {
+                        children: [
+                            /*#__PURE__*/ jsx("span", {
+                                children: /*#__PURE__*/ isValidElement(childrenArray[active]) ? childrenArray[active].props.name : ''
+                            }),
+                            /*#__PURE__*/ jsxs(Badge, {
+                                inline: true,
+                                type: BADGE_TYPE.PRIMARY,
+                                children: [
+                                    active + 1,
+                                    " of ",
+                                    Children.count(children)
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            childrenArray[active]
+        ]
+    });
 }
-Stepper.propTypes = {
-    /** Index of currently active step */
-    active: PropTypes.number,
-    /** Callback function for click event on a step */
-    onStepClick: PropTypes.func,
-};
-Stepper.defaultProps = {
-    active: 0,
-};
-//# sourceMappingURL=Stepper.js.map
+const Stepper = /*#__PURE__*/ React.forwardRef(StepperComponent);
+
+export { Stepper as default };
+//# sourceMappingURL=Stepper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../../src/components/Stepper/Stepper.tsx"],"names":[],"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\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                    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\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","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,17 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx } from "@emotion/react/jsx-runtime";
-import PropTypes from 'prop-types';
-const Tab = (props) => {
+import { jsx, Fragment } from '@emotion/react/jsx-runtime';
+
+const Tab = (props)=>{
     const { children } = props;
-    return _jsx(_Fragment, { children: children });
+    return /*#__PURE__*/ jsx(Fragment, {
+        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 default Tab;
-//# sourceMappingURL=Tab.js.map
+
+export { Tab as default };
+//# sourceMappingURL=Tab.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../../src/components/Tabs/Tab.tsx"],"names":[],"mappings":";AACA,OAAO,SAAS,MAAM,YAAY,CAAC;AAEnC,MAAM,GAAG,GAAG,CAAC,KAA2D,EAAE,EAAE;IACxE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3B,OAAO,4BAAG,QAAQ,GAAI,CAAC;AAC3B,CAAC,CAAC;AAEF,GAAG,CAAC,SAAS,GAAG;IACZ,sDAAsD;IACtD,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,UAAU;IACjC,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;CAC3B,CAAA;AAED,GAAG,CAAC,YAAY,GAAG;IACf,QAAQ,EAAE,KAAK;CAClB,CAAA;AAED,eAAe,GAAG,CAAC"}
+{"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 PropTypes from 'prop-types';
-interface ITabsProps {
+declare const Tabs: import("react").ForwardRefExoticComponent<{
+    /**
+     * Active Tab Index
+     * @default 0
+     */
     active?: number;
+    /** OnChange event handler */
     onChange?: (index: number) => void;
-    props?: any;
-    bodyProps?: any;
-    children: any;
-}
-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,59 +1,100 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-import { useState, Children, useEffect } from 'react';
+import { jsxs, Fragment, jsx } from '@emotion/react/jsx-runtime';
+import { forwardRef, useState, Children, useEffect, isValidElement } from 'react';
 import styled from '@emotion/styled';
-import PropTypes from 'prop-types';
-import constants from '../../shared/constants';
-const Button = styled.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 var(--primary, ${constants.PRIMARY})` : 'none')};
-    color: ${(props) => (props.active ? `var(--primary, ${constants.PRIMARY})` : '#000')};
-    cursor: pointer;
+import { getThemeValue, THEME_NAME } from '../../shared/constants.js';
 
-    &:hover, &:focus {
-        background-color: var(--primary-lighter, #cfe9ff);
-        border-bottom: ${(props) => (props.active ? `3px solid var(--primary, ${constants.PRIMARY})` : `3px solid var(--primary, ${constants.PRIMARY})`)};
+const Button = /*#__PURE__*/ styled("button", {
+    target: "e132lwyw0",
+    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: "e132lwyw1",
+    label: "ButtonContainer"
+})("border-bottom:1px solid ", getThemeValue(THEME_NAME.DISABLED_BORDER), ";margin-bottom:5px;position:relative;");
+const TabBody = /*#__PURE__*/ styled("div", {
+    target: "e132lwyw2",
+    label: "TabBody"
+})("min-height:150px;");
+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();
+            onChange?.(index);
+        };
+    // Keyboard navigation for tab buttons
+    const onTabKeyDown = (index)=>(e)=>{
+            if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
+                e.preventDefault();
+                const next = (index + 1) % childrenArray.length;
+                tabRefs[next]?.focus();
+            } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
+                e.preventDefault();
+                const prev = (index - 1 + childrenArray.length) % childrenArray.length;
+                tabRefs[prev]?.focus();
+            }
+        };
+    useEffect(()=>{
+        if (propsActive !== undefined) {
+            setActive(propsActive);
+            onChange?.(propsActive);
+        }
+    }, [
+        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}`;
+    });
+    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}`;
+    });
+    // Sanity check for active index
+    if (active === undefined || active < 0 || active >= childrenArray.length) {
+        return null;
     }
-
-    &[disabled] {
-        background-color: var(--disabled-background, ${constants.DISABLED_BACKGROUND});
-        color: var(--disabled, ${constants.DISABLED});
-        border-bottom: 3px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-    }
-`;
-const ButtonContainer = styled.div `
-    border-bottom: 1px solid var(--disabled-border, ${constants.DISABLED_BORDER});
-    margin-bottom: 5px;
-    position: relative;
-`;
-const TabBody = styled.div `
-    min-height: 150px;
-`;
-;
-export default function Tabs(props) {
-    const [active, setActive] = useState(props.active);
-    const switchTab = (index) => () => setActive(index);
-    const { children } = props;
-    useEffect(() => {
-        setActive(props.active);
-        props.onChange && props.onChange(props.active);
-    }, [props.active]);
-    return (_jsxs(_Fragment, { children: [_jsx(ButtonContainer, Object.assign({}, props.props, { children: Children.map(children, (child, index) => (_jsx(Button, { type: "button", active: active === index, onClick: switchTab(index), disabled: child.props.disabled, children: child.props.name }))) })), _jsx(TabBody, Object.assign({}, props.bodyProps, { children: children[active] }))] }));
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(ButtonContainer, {
+                role: "tablist",
+                "aria-label": "Tabs",
+                ref: ref,
+                ...rest,
+                children: childrenArray.map((child, index)=>/*#__PURE__*/ jsx(Button, {
+                        ref: (el)=>tabRefs[index] = el,
+                        id: tabIds[index],
+                        type: "button",
+                        role: "tab",
+                        "aria-selected": active === index,
+                        "aria-controls": panelIds[index],
+                        tabIndex: active === index ? 0 : -1,
+                        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]))
+            }),
+            /*#__PURE__*/ jsx(TabBody, {
+                ...bodyProps,
+                id: panelIds[active],
+                role: "tabpanel",
+                "aria-labelledby": tabIds[active],
+                tabIndex: 0,
+                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,
-};
-//# sourceMappingURL=Tabs.js.map
+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","sourceRoot":"","sources":["../../../src/components/Tabs/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAC7D,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,SAAS,MAAM,wBAAwB,CAAC;AAE/C,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAqB;;;;;;qBAM5B,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;aAC7F,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC;;;;;yBAK/D,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC,CAAC,CAAC,4BAA4B,SAAS,CAAC,OAAO,GAAG,CAAC;;;;uDAIjG,SAAS,CAAC,mBAAmB;iCACnD,SAAS,CAAC,QAAQ;0DACO,SAAS,CAAC,eAAe;;CAElF,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;sDACoB,SAAS,CAAC,eAAe;;;CAG9E,CAAC;AAEF,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;CAEzB,CAAC;AAQD,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAiB;IAC1C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,MAAM,SAAS,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAC5D,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,SAAS,CAAC,GAAG,EAAE;QACX,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxB,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IACnD,CAAC,EAAE,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC;IAEnB,OAAO,CACH,8BACI,KAAC,eAAe,oBAAK,KAAK,CAAC,KAAK,cAExB,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,EAAE,EAAE,CAAC,CACrC,KAAC,MAAM,IACH,IAAI,EAAC,QAAQ,EACb,MAAM,EAAE,MAAM,KAAK,KAAK,EACxB,OAAO,EAAE,SAAS,CAAC,KAAK,CAAC,EACzB,QAAQ,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,YAE7B,KAAK,CAAC,KAAK,CAAC,IAAI,GACZ,CACZ,CAAC,IAEQ,EAClB,KAAC,OAAO,oBAAK,KAAK,CAAC,SAAS,cACvB,QAAQ,CAAC,MAAM,CAAC,IACX,IACX,CACN,CAAC;AACN,CAAC;AAED,IAAI,CAAC,SAAS,GAAG;IACb,uBAAuB;IACvB,MAAM,EAAE,SAAS,CAAC,MAAM;IACxB,6BAA6B;IAC7B,QAAQ,EAAE,SAAS,CAAC,IAAI;IACxB,8CAA8C;IAC9C,KAAK,EAAE,SAAS,CAAC,MAAM;IACvB,2CAA2C;IAC3C,SAAS,EAAE,SAAS,CAAC,MAAM;CAC9B,CAAA;AAGD,IAAI,CAAC,YAAY,GAAE;IACf,MAAM,EAAE,CAAC;CACZ,CAAA"}
+{"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\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 = 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    // 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                    <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                {...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","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,21 +13,48 @@ export declare enum TOAST_TYPE {
     DANGER = "DANGER"
 }
 declare class Toast {
-    private element;
-    private toast;
-    private timeout;
+    private element?;
+    private ariaLiveContainer?;
+    private toast?;
+    private timeout?;
+    private root?;
+    private politeRegion?;
+    private assertiveRegion?;
+    private isPaused;
+    private currentOptions;
     constructor();
+    /**
+     * Clean up event listeners and DOM elements
+     * Call this when the app is tearing down (useful for tests)
+     */
+    destroy: () => void;
+    /**
+     * Set up keyboard listener for dismissing toast with Escape key
+     */
+    private setupKeyboardListeners;
+    /**
+     * Handle keyboard events for toast interaction
+     */
+    private handleKeyDown;
+    /**
+     * Update the appropriate live region with toast content
+     */
+    private updateLiveRegion;
     remove: () => void;
+    /**
+     * Pause toast auto-dismiss
+     */
+    private pauseTimeout;
+    /**
+     * Resume toast auto-dismiss
+     */
+    private resumeTimeout;
     /**
      * Pause toast when user is hovering over it.
-     *
-     * @param id
      */
     pause: () => void;
     /**
      * Restart the removal of toast.
-     *
-     * @param id
      */
     resume: (options: ToastOptions) => () => void;
     add(options: ToastOptions): void;