@dynamic-framework/ui-react 2.9.0 → 2.11.0

package/dist/esm/components/DStepperDesktop/DStepperDesktop.js

@@ -0,0 +1,27 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useMemo } from 'react';
+import DIcon from '../DIcon/DIcon.js';
+import { useDContext } from '../../contexts/DContext.js';
+
+function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical = false, completed, alignStart = false, className, style, }) {
+    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { check, }, } = useDContext();
+    const icon = useMemo(() => iconSuccessProp || check, [check, iconSuccessProp]);
+    if (currentStep < 1 || currentStep > options.length) {
+        throw new Error('Current step should be in the range from 1 to options length');
+    }
+    return (jsx("div", { className: classNames({
+            'd-stepper-desktop': true,
+            'is-vertical': vertical,
+            'is-align-start': alignStart && !vertical,
+        }, className), style: style, children: options.map(({ label, value, description }) => (jsxs("div", { className: classNames({
+                'd-step': true,
+                'd-step-current': value === currentStep && !completed,
+            }), children: [jsx("div", { className: "d-step-value", children: jsxs("div", { className: classNames({
+                            'd-step-icon-container': true,
+                            'd-step-check': value < currentStep || completed,
+                        }), children: [((value < currentStep) || completed) && (jsx(DIcon, { icon: icon, familyClass: iconSuccessFamilyClass !== null && iconSuccessFamilyClass !== void 0 ? iconSuccessFamilyClass : familyClass, familyPrefix: iconSuccessFamilyPrefix !== null && iconSuccessFamilyPrefix !== void 0 ? iconSuccessFamilyPrefix : familyPrefix, materialStyle: iconSuccessMaterialStyle !== null && iconSuccessMaterialStyle !== void 0 ? iconSuccessMaterialStyle : materialStyle, className: "d-step-icon" })), value] }) }), jsxs("div", { className: "d-step-text-container", children: [jsx("div", { className: "d-step-label", children: label }), description && (jsx("div", { className: "d-step-description", children: description }))] })] }, value))) }));
+}
+
+export { DStepper as default };
+//# sourceMappingURL=DStepperDesktop.js.map

package/dist/esm/components/DStepperDesktop/DStepperDesktop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DStepperDesktop.js","sources":["../../../../dist-transpiled/components/DStepperDesktop/DStepperDesktop.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nimport { useMemo } from 'react';\nimport DIcon from '../DIcon';\nimport { useDContext } from '../../contexts';\nexport default function DStepper({ options, currentStep, iconSuccess: iconSuccessProp, iconSuccessFamilyClass, iconSuccessFamilyPrefix, iconSuccessMaterialStyle, vertical = false, completed, alignStart = false, className, style, }) {\n    const { icon: { familyClass, familyPrefix, materialStyle, }, iconMap: { check, }, } = useDContext();\n    const icon = useMemo(() => iconSuccessProp || check, [check, iconSuccessProp]);\n    if (currentStep < 1 || currentStep > options.length) {\n        throw new Error('Current step should be in the range from 1 to options length');\n    }\n    return (_jsx(\"div\", { className: classNames({\n            'd-stepper-desktop': true,\n            'is-vertical': vertical,\n            'is-align-start': alignStart && !vertical,\n        }, className), style: style, children: options.map(({ label, value, description }) => (_jsxs(\"div\", { className: classNames({\n                'd-step': true,\n                'd-step-current': value === currentStep && !completed,\n            }), children: [_jsx(\"div\", { className: \"d-step-value\", children: _jsxs(\"div\", { className: classNames({\n                            'd-step-icon-container': true,\n                            'd-step-check': value < currentStep || completed,\n                        }), children: [((value < currentStep) || completed) && (_jsx(DIcon, { icon: icon, familyClass: iconSuccessFamilyClass !== null && iconSuccessFamilyClass !== void 0 ? iconSuccessFamilyClass : familyClass, familyPrefix: iconSuccessFamilyPrefix !== null && iconSuccessFamilyPrefix !== void 0 ? iconSuccessFamilyPrefix : familyPrefix, materialStyle: iconSuccessMaterialStyle !== null && iconSuccessMaterialStyle !== void 0 ? iconSuccessMaterialStyle : materialStyle, className: \"d-step-icon\" })), value] }) }), _jsxs(\"div\", { className: \"d-step-text-container\", children: [_jsx(\"div\", { className: \"d-step-label\", children: label }), description && (_jsx(\"div\", { className: \"d-step-description\", children: description }))] })] }, value))) }));\n}\n//# sourceMappingURL=DStepperDesktop.js.map"],"names":["_jsx","_jsxs"],"mappings":";;;;;;AAKe,SAAS,QAAQ,CAAC,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,EAAE,sBAAsB,EAAE,uBAAuB,EAAE,wBAAwB,EAAE,QAAQ,GAAG,KAAK,EAAE,SAAS,EAAE,UAAU,GAAG,KAAK,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE;AACxO,IAAI,MAAM,EAAE,IAAI,EAAE,EAAE,WAAW,EAAE,YAAY,EAAE,aAAa,GAAG,EAAE,OAAO,EAAE,EAAE,KAAK,GAAG,GAAG,GAAG,WAAW,EAAE;AACvG,IAAI,MAAM,IAAI,GAAG,OAAO,CAAC,MAAM,eAAe,IAAI,KAAK,EAAE,CAAC,KAAK,EAAE,eAAe,CAAC,CAAC;AAClF,IAAI,IAAI,WAAW,GAAG,CAAC,IAAI,WAAW,GAAG,OAAO,CAAC,MAAM,EAAE;AACzD,QAAQ,MAAM,IAAI,KAAK,CAAC,8DAA8D,CAAC;AACvF,IAAI;AACJ,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC;AAChD,YAAY,mBAAmB,EAAE,IAAI;AACrC,YAAY,aAAa,EAAE,QAAQ;AACnC,YAAY,gBAAgB,EAAE,UAAU,IAAI,CAAC,QAAQ;AACrD,SAAS,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,WAAW,EAAE,MAAMC,IAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC;AACpI,gBAAgB,QAAQ,EAAE,IAAI;AAC9B,gBAAgB,gBAAgB,EAAE,KAAK,KAAK,WAAW,IAAI,CAAC,SAAS;AACrE,aAAa,CAAC,EAAE,QAAQ,EAAE,CAACD,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAEC,IAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC;AACnH,4BAA4B,uBAAuB,EAAE,IAAI;AACzD,4BAA4B,cAAc,EAAE,KAAK,GAAG,WAAW,IAAI,SAAS;AAC5E,yBAAyB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,WAAW,KAAK,SAAS,MAAMD,GAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,WAAW,EAAE,sBAAsB,KAAK,IAAI,IAAI,sBAAsB,KAAK,MAAM,GAAG,sBAAsB,GAAG,WAAW,EAAE,YAAY,EAAE,uBAAuB,KAAK,IAAI,IAAI,uBAAuB,KAAK,MAAM,GAAG,uBAAuB,GAAG,YAAY,EAAE,aAAa,EAAE,wBAAwB,KAAK,IAAI,IAAI,wBAAwB,KAAK,MAAM,GAAG,wBAAwB,GAAG,aAAa,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,EAAEC,IAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,QAAQ,EAAE,CAACD,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,cAAc,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,EAAE,WAAW,KAAKA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,oBAAoB,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC;AAC1vB;;;;"}

package/dist/esm/components/DStepperDesktop/index.js

@@ -0,0 +1,6 @@
+import DStepper from './DStepperDesktop.js';
+
+
+
+export { DStepper as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DStepperDesktop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/DStepperMobile/DStepperMobile.js

@@ -0,0 +1,37 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { PREFIX_BS } from '../config.js';
+
+function DStepper({ options, currentStep, className, style, }) {
+    if (currentStep < 1 || currentStep > options.length) {
+        throw new Error('Current step should be in the range from 1 to options length');
+    }
+    const currentOption = useMemo(() => { var _a; return (_a = options[currentStep - 1]) !== null && _a !== void 0 ? _a : {}; }, [currentStep, options]);
+    const [currentAngle, setCurrentAngle] = useState(0);
+    useEffect(() => {
+        const targetAngle = (currentStep / options.length) * 360;
+        const animationInterval = setInterval(() => {
+            const angleDifference = targetAngle - currentAngle;
+            const step = Math.sign(angleDifference) * 5;
+            if (Math.abs(angleDifference) <= Math.abs(step)) {
+                setCurrentAngle(targetAngle);
+                clearInterval(animationInterval);
+            }
+            else {
+                setCurrentAngle(currentAngle + step);
+            }
+        }, 16);
+        return () => {
+            clearInterval(animationInterval);
+        };
+    }, [currentAngle, currentStep, options.length]);
+    const progressStyle = useMemo(() => `conic-gradient(
+      from 0deg,
+      var(--${PREFIX_BS}step-progress-outter-fill-background-color) ${currentAngle}deg,
+      var(--${PREFIX_BS}step-progress-outter-background-color) 0deg)`, [currentAngle]);
+    return (jsxs("div", { className: classNames('d-stepper', className), style: style, children: [jsx("div", { className: "d-step-bar", style: { background: progressStyle }, children: jsx("p", { className: "d-step-number", children: `${currentStep}/${options.length}` }) }), jsx("div", { className: "d-step-info", children: Object.keys(currentOption).length > 0 && (jsxs(Fragment, { children: [jsx("div", { className: "d-step-label", children: currentOption.label }), jsx("div", { className: "d-step-description", children: currentOption.description || '' })] })) })] }));
+}
+
+export { DStepper as default };
+//# sourceMappingURL=DStepperMobile.js.map

package/dist/esm/components/DStepperMobile/DStepperMobile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DStepperMobile.js","sources":["../../../../dist-transpiled/components/DStepperMobile/DStepperMobile.js"],"sourcesContent":["import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useEffect, useMemo, useState, } from 'react';\nimport classNames from 'classnames';\nimport { PREFIX_BS } from '../config';\nexport default function DStepper({ options, currentStep, className, style, }) {\n    if (currentStep < 1 || currentStep > options.length) {\n        throw new Error('Current step should be in the range from 1 to options length');\n    }\n    const currentOption = useMemo(() => { var _a; return (_a = options[currentStep - 1]) !== null && _a !== void 0 ? _a : {}; }, [currentStep, options]);\n    const [currentAngle, setCurrentAngle] = useState(0);\n    useEffect(() => {\n        const targetAngle = (currentStep / options.length) * 360;\n        const animationInterval = setInterval(() => {\n            const angleDifference = targetAngle - currentAngle;\n            const step = Math.sign(angleDifference) * 5;\n            if (Math.abs(angleDifference) <= Math.abs(step)) {\n                setCurrentAngle(targetAngle);\n                clearInterval(animationInterval);\n            }\n            else {\n                setCurrentAngle(currentAngle + step);\n            }\n        }, 16);\n        return () => {\n            clearInterval(animationInterval);\n        };\n    }, [currentAngle, currentStep, options.length]);\n    const progressStyle = useMemo(() => `conic-gradient(\n      from 0deg,\n      var(--${PREFIX_BS}step-progress-outter-fill-background-color) ${currentAngle}deg,\n      var(--${PREFIX_BS}step-progress-outter-background-color) 0deg)`, [currentAngle]);\n    return (_jsxs(\"div\", { className: classNames('d-stepper', className), style: style, children: [_jsx(\"div\", { className: \"d-step-bar\", style: { background: progressStyle }, children: _jsx(\"p\", { className: \"d-step-number\", children: `${currentStep}/${options.length}` }) }), _jsx(\"div\", { className: \"d-step-info\", children: Object.keys(currentOption).length > 0 && (_jsxs(_Fragment, { children: [_jsx(\"div\", { className: \"d-step-label\", children: currentOption.label }), _jsx(\"div\", { className: \"d-step-description\", children: currentOption.description || '' })] })) })] }));\n}\n//# sourceMappingURL=DStepperMobile.js.map"],"names":["_jsxs","_jsx","_Fragment"],"mappings":"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"}

package/dist/esm/components/DStepperMobile/index.js

@@ -0,0 +1,6 @@
+import DStepper from './DStepperMobile.js';
+
+
+
+export { DStepper as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DStepperMobile/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/DTabs/DTabs.js

@@ -0,0 +1,106 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useContext, useState, useCallback, useEffect, useMemo, useRef, Children } from 'react';
+import classNames from 'classnames';
+import TabContext, { TabsStateContext } from './TabContext.js';
+import DTabContent from './components/DTabContent.js';
+import DTabsProvider from './components/DTabsProvider.js';
+
+function DTabs({ children, defaultSelected, onChange, options, className, classNameTab, classNameContent, style, vertical, variant = 'underline', dataAttributes, ariaLabel, ariaLabelledBy, }) {
+    var _a;
+    const shared = useContext(TabsStateContext);
+    const [ownSelected, setOwnSelected] = useState(defaultSelected);
+    const selected = shared
+        ? shared.selected
+        : ownSelected !== null && ownSelected !== void 0 ? ownSelected : (_a = options.find((opt) => !opt.disabled)) === null || _a === void 0 ? void 0 : _a.tab;
+    const setSelected = shared ? shared.setSelected : setOwnSelected;
+    const onSelect = useCallback((option) => {
+        if (option.tab) {
+            setSelected(option.tab);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(option);
+    }, [onChange, setSelected]);
+    useEffect(() => {
+        setOwnSelected(defaultSelected);
+    }, [defaultSelected]);
+    const generateClasses = useMemo(() => (Object.assign({ nav: true, 'd-tabs-nav-vertical': vertical && variant !== 'tabs', [`nav-${variant}`]: true }, className && { [className]: true })), [vertical, variant, className]);
+    const tabRefs = useRef([]);
+    // Ensure selected is never disabled
+    useEffect(() => {
+        if (options.length === 0)
+            return;
+        const selectedOption = options.find((opt) => opt.tab === selected);
+        if (selectedOption && selectedOption.disabled) {
+            const firstEnabled = options.find((opt) => !opt.disabled);
+            if (firstEnabled)
+                setSelected(firstEnabled.tab);
+        }
+    }, [options, selected, setSelected]);
+    // Focus only moves in response to the user: arrow keys and clicks call
+    // this directly. Changes to `selected` that don't come from an interaction
+    // (mount, a new `defaultSelected`, the disabled-tab fallback above) leave
+    // focus where it is, so the page doesn't scroll to the tablist and no other
+    // element (a search field, an OTP input) loses focus.
+    const focusTab = useCallback((idx) => {
+        var _a;
+        (_a = tabRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus();
+    }, []);
+    const handleKeyDown = useCallback((idx, e) => {
+        const count = options.length;
+        if (count === 0)
+            return;
+        let next = idx;
+        let prev = idx;
+        if (e.key === 'ArrowRight' || (vertical && e.key === 'ArrowDown')) {
+            e.preventDefault();
+            for (let i = 0; i < count; i += 1) {
+                next = (next + 1) % count;
+                if (!options[next].disabled) {
+                    focusTab(next);
+                    setSelected(options[next].tab);
+                    break;
+                }
+            }
+        }
+        if (e.key === 'ArrowLeft' || (vertical && e.key === 'ArrowUp')) {
+            e.preventDefault();
+            for (let i = 0; i < count; i += 1) {
+                prev = (prev - 1 + count) % count;
+                if (!options[prev].disabled) {
+                    focusTab(prev);
+                    setSelected(options[prev].tab);
+                    break;
+                }
+            }
+        }
+    }, [options, vertical, focusTab, setSelected]);
+    let tablistProps = {};
+    if (ariaLabelledBy) {
+        tablistProps = { 'aria-labelledby': ariaLabelledBy };
+    }
+    else if (ariaLabel) {
+        tablistProps = { 'aria-label': ariaLabel };
+    }
+    const isSelected = useCallback((tab) => (selected === tab), [selected]);
+    const value = useMemo(() => ({
+        isSelected,
+    }), [isSelected]);
+    return (jsx(TabContext.Provider, { value: value, children: jsxs("div", Object.assign({ className: classNames({
+                'd-tabs': true,
+                'd-tabs-column': !vertical || variant === 'tabs',
+            }), style: style }, dataAttributes, { children: [jsx("ul", Object.assign({ className: classNames(generateClasses), role: "tablist", "aria-orientation": vertical ? 'vertical' : undefined }, tablistProps, { children: options.map((option, idx) => {
+                        const isTabSelected = !!option.tab && option.tab === selected;
+                        return (jsx("li", { role: "presentation", className: "nav-item", children: jsx("button", { ref: (element) => {
+                                    tabRefs.current[idx] = element;
+                                }, id: `${option.tab}Tab`, className: classNames('nav-link', { active: isTabSelected }, classNameTab), type: "button", role: "tab", "aria-controls": `${option.tab}Pane`, "aria-selected": isTabSelected, tabIndex: isTabSelected ? 0 : -1, disabled: option.disabled, onClick: () => {
+                                    focusTab(idx);
+                                    onSelect(option);
+                                }, onKeyDown: (e) => handleKeyDown(idx, e), children: option.label }) }, option.tab));
+                    }) })), Children.toArray(children).length > 0 && (jsx("div", { className: classNames('d-tabs-content tab-content', classNameContent), children: children }))] })) }));
+}
+var DTabs$1 = Object.assign(DTabs, {
+    Tab: DTabContent,
+    Provider: DTabsProvider,
+});
+
+export { DTabs$1 as default };
+//# sourceMappingURL=DTabs.js.map

package/dist/esm/components/DTabs/DTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTabs.js","sources":["../../../../dist-transpiled/components/DTabs/DTabs.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { Children, useState, useCallback, useContext, useEffect, useRef, useMemo, } from 'react';\nimport classNames from 'classnames';\nimport TabContext, { TabsStateContext } from './TabContext';\nimport DTabContent from './components/DTabContent';\nimport DTabsProvider from './components/DTabsProvider';\nfunction DTabs({ children, defaultSelected, onChange, options, className, classNameTab, classNameContent, style, vertical, variant = 'underline', dataAttributes, ariaLabel, ariaLabelledBy, }) {\n    var _a;\n    const shared = useContext(TabsStateContext);\n    const [ownSelected, setOwnSelected] = useState(defaultSelected);\n    const selected = shared\n        ? shared.selected\n        : ownSelected !== null && ownSelected !== void 0 ? ownSelected : (_a = options.find((opt) => !opt.disabled)) === null || _a === void 0 ? void 0 : _a.tab;\n    const setSelected = shared ? shared.setSelected : setOwnSelected;\n    const onSelect = useCallback((option) => {\n        if (option.tab) {\n            setSelected(option.tab);\n        }\n        onChange === null || onChange === void 0 ? void 0 : onChange(option);\n    }, [onChange, setSelected]);\n    useEffect(() => {\n        setOwnSelected(defaultSelected);\n    }, [defaultSelected]);\n    const generateClasses = useMemo(() => (Object.assign({ nav: true, 'd-tabs-nav-vertical': vertical && variant !== 'tabs', [`nav-${variant}`]: true }, className && { [className]: true })), [vertical, variant, className]);\n    const tabRefs = useRef([]);\n    // Ensure selected is never disabled\n    useEffect(() => {\n        if (options.length === 0)\n            return;\n        const selectedOption = options.find((opt) => opt.tab === selected);\n        if (selectedOption && selectedOption.disabled) {\n            const firstEnabled = options.find((opt) => !opt.disabled);\n            if (firstEnabled)\n                setSelected(firstEnabled.tab);\n        }\n    }, [options, selected, setSelected]);\n    // Focus only moves in response to the user: arrow keys and clicks call\n    // this directly. Changes to `selected` that don't come from an interaction\n    // (mount, a new `defaultSelected`, the disabled-tab fallback above) leave\n    // focus where it is, so the page doesn't scroll to the tablist and no other\n    // element (a search field, an OTP input) loses focus.\n    const focusTab = useCallback((idx) => {\n        var _a;\n        (_a = tabRefs.current[idx]) === null || _a === void 0 ? void 0 : _a.focus();\n    }, []);\n    const handleKeyDown = useCallback((idx, e) => {\n        const count = options.length;\n        if (count === 0)\n            return;\n        let next = idx;\n        let prev = idx;\n        if (e.key === 'ArrowRight' || (vertical && e.key === 'ArrowDown')) {\n            e.preventDefault();\n            for (let i = 0; i < count; i += 1) {\n                next = (next + 1) % count;\n                if (!options[next].disabled) {\n                    focusTab(next);\n                    setSelected(options[next].tab);\n                    break;\n                }\n            }\n        }\n        if (e.key === 'ArrowLeft' || (vertical && e.key === 'ArrowUp')) {\n            e.preventDefault();\n            for (let i = 0; i < count; i += 1) {\n                prev = (prev - 1 + count) % count;\n                if (!options[prev].disabled) {\n                    focusTab(prev);\n                    setSelected(options[prev].tab);\n                    break;\n                }\n            }\n        }\n    }, [options, vertical, focusTab, setSelected]);\n    let tablistProps = {};\n    if (ariaLabelledBy) {\n        tablistProps = { 'aria-labelledby': ariaLabelledBy };\n    }\n    else if (ariaLabel) {\n        tablistProps = { 'aria-label': ariaLabel };\n    }\n    const isSelected = useCallback((tab) => (selected === tab), [selected]);\n    const value = useMemo(() => ({\n        isSelected,\n    }), [isSelected]);\n    return (_jsx(TabContext.Provider, { value: value, children: _jsxs(\"div\", Object.assign({ className: classNames({\n                'd-tabs': true,\n                'd-tabs-column': !vertical || variant === 'tabs',\n            }), style: style }, dataAttributes, { children: [_jsx(\"ul\", Object.assign({ className: classNames(generateClasses), role: \"tablist\", \"aria-orientation\": vertical ? 'vertical' : undefined }, tablistProps, { children: options.map((option, idx) => {\n                        const isTabSelected = !!option.tab && option.tab === selected;\n                        return (_jsx(\"li\", { role: \"presentation\", className: \"nav-item\", children: _jsx(\"button\", { ref: (element) => {\n                                    tabRefs.current[idx] = element;\n                                }, id: `${option.tab}Tab`, className: classNames('nav-link', { active: isTabSelected }, classNameTab), type: \"button\", role: \"tab\", \"aria-controls\": `${option.tab}Pane`, \"aria-selected\": isTabSelected, tabIndex: isTabSelected ? 0 : -1, disabled: option.disabled, onClick: () => {\n                                    focusTab(idx);\n                                    onSelect(option);\n                                }, onKeyDown: (e) => handleKeyDown(idx, e), children: option.label }) }, option.tab));\n                    }) })), Children.toArray(children).length > 0 && (_jsx(\"div\", { className: classNames('d-tabs-content tab-content', classNameContent), children: children }))] })) }));\n}\nexport default Object.assign(DTabs, {\n    Tab: DTabContent,\n    Provider: DTabsProvider,\n});\n//# sourceMappingURL=DTabs.js.map"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/DTabs/TabContext.js

@@ -0,0 +1,14 @@
+import { useContext, createContext } from 'react';
+
+const TabContext = createContext(undefined);
+const TabsStateContext = createContext(undefined);
+function useTabContext() {
+    const context = useContext(TabContext);
+    if (context === undefined) {
+        throw new Error('useTabContext was used outside of DTabs');
+    }
+    return context;
+}
+
+export { TabsStateContext, TabContext as default, useTabContext };
+//# sourceMappingURL=TabContext.js.map

package/dist/esm/components/DTabs/TabContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabContext.js","sources":["../../../../dist-transpiled/components/DTabs/TabContext.js"],"sourcesContent":["import { createContext, useContext } from 'react';\nconst TabContext = createContext(undefined);\nexport const TabsStateContext = createContext(undefined);\nexport function useTabContext() {\n    const context = useContext(TabContext);\n    if (context === undefined) {\n        throw new Error('useTabContext was used outside of DTabs');\n    }\n    return context;\n}\nexport default TabContext;\n//# sourceMappingURL=TabContext.js.map"],"names":[],"mappings":";;AACK,MAAC,UAAU,GAAG,aAAa,CAAC,SAAS;AAC9B,MAAC,gBAAgB,GAAG,aAAa,CAAC,SAAS;AAChD,SAAS,aAAa,GAAG;AAChC,IAAI,MAAM,OAAO,GAAG,UAAU,CAAC,UAAU,CAAC;AAC1C,IAAI,IAAI,OAAO,KAAK,SAAS,EAAE;AAC/B,QAAQ,MAAM,IAAI,KAAK,CAAC,yCAAyC,CAAC;AAClE,IAAI;AACJ,IAAI,OAAO,OAAO;AAClB;;;;"}

package/dist/esm/components/DTabs/components/DTabContent.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import { useTabContext, TabsStateContext } from '../TabContext.js';
+
+function DTabContent({ tab, children, className, style, }) {
+    const { isSelected } = useTabContext();
+    if (!isSelected(tab)) {
+        return null;
+    }
+    return (jsx("div", { className: classNames('tab-pane fade show active', className), id: `${tab}Pane`, role: "tabpanel", tabIndex: 0, "aria-labelledby": `${tab}Tab`, style: style, children: jsx(TabsStateContext.Provider, { value: undefined, children: children }) }));
+}
+
+export { DTabContent as default };
+//# sourceMappingURL=DTabContent.js.map

package/dist/esm/components/DTabs/components/DTabContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTabContent.js","sources":["../../../../../dist-transpiled/components/DTabs/components/DTabContent.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nimport { TabsStateContext, useTabContext } from '../TabContext';\nexport default function DTabContent({ tab, children, className, style, }) {\n    const { isSelected } = useTabContext();\n    if (!isSelected(tab)) {\n        return null;\n    }\n    return (_jsx(\"div\", { className: classNames('tab-pane fade show active', className), id: `${tab}Pane`, role: \"tabpanel\", tabIndex: 0, \"aria-labelledby\": `${tab}Tab`, style: style, children: _jsx(TabsStateContext.Provider, { value: undefined, children: children }) }));\n}\n//# sourceMappingURL=DTabContent.js.map"],"names":["_jsx"],"mappings":";;;;AAGe,SAAS,WAAW,CAAC,EAAE,GAAG,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,GAAG,EAAE;AAC1E,IAAI,MAAM,EAAE,UAAU,EAAE,GAAG,aAAa,EAAE;AAC1C,IAAI,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE;AAC1B,QAAQ,OAAO,IAAI;AACnB,IAAI;AACJ,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,2BAA2B,EAAE,SAAS,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,GAAG,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,EAAE,iBAAiB,EAAE,CAAC,EAAE,GAAG,CAAC,GAAG,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAEA,GAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;AAC9Q;;;;"}

package/dist/esm/components/DTabs/components/DTabsProvider.js

@@ -0,0 +1,22 @@
+import { jsx } from 'react/jsx-runtime';
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import TabContext, { TabsStateContext } from '../TabContext.js';
+
+/**
+ * Owns the selected tab so the tab bar (`DTabs`) and its panels (`DTabs.Tab`)
+ * can live anywhere inside it, e.g. the bar in a header and the panels in
+ * another column.
+ */
+function DTabsProvider({ defaultSelected, children, }) {
+    const [selected, setSelected] = useState(defaultSelected);
+    useEffect(() => {
+        setSelected(defaultSelected);
+    }, [defaultSelected]);
+    const isSelected = useCallback((tab) => (selected === tab), [selected]);
+    const state = useMemo(() => ({ selected, setSelected }), [selected]);
+    const value = useMemo(() => ({ isSelected }), [isSelected]);
+    return (jsx(TabsStateContext.Provider, { value: state, children: jsx(TabContext.Provider, { value: value, children: children }) }));
+}
+
+export { DTabsProvider as default };
+//# sourceMappingURL=DTabsProvider.js.map

package/dist/esm/components/DTabs/components/DTabsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTabsProvider.js","sources":["../../../../../dist-transpiled/components/DTabs/components/DTabsProvider.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { useCallback, useEffect, useMemo, useState, } from 'react';\nimport TabContext, { TabsStateContext } from '../TabContext';\n/**\n * Owns the selected tab so the tab bar (`DTabs`) and its panels (`DTabs.Tab`)\n * can live anywhere inside it, e.g. the bar in a header and the panels in\n * another column.\n */\nexport default function DTabsProvider({ defaultSelected, children, }) {\n    const [selected, setSelected] = useState(defaultSelected);\n    useEffect(() => {\n        setSelected(defaultSelected);\n    }, [defaultSelected]);\n    const isSelected = useCallback((tab) => (selected === tab), [selected]);\n    const state = useMemo(() => ({ selected, setSelected }), [selected]);\n    const value = useMemo(() => ({ isSelected }), [isSelected]);\n    return (_jsx(TabsStateContext.Provider, { value: state, children: _jsx(TabContext.Provider, { value: value, children: children }) }));\n}\n//# sourceMappingURL=DTabsProvider.js.map"],"names":["_jsx"],"mappings":";;;;AAGA;AACA;AACA;AACA;AACA;AACe,SAAS,aAAa,CAAC,EAAE,eAAe,EAAE,QAAQ,GAAG,EAAE;AACtE,IAAI,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,eAAe,CAAC;AAC7D,IAAI,SAAS,CAAC,MAAM;AACpB,QAAQ,WAAW,CAAC,eAAe,CAAC;AACpC,IAAI,CAAC,EAAE,CAAC,eAAe,CAAC,CAAC;AACzB,IAAI,MAAM,UAAU,GAAG,WAAW,CAAC,CAAC,GAAG,MAAM,QAAQ,KAAK,GAAG,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAC3E,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AACxE,IAAI,MAAM,KAAK,GAAG,OAAO,CAAC,OAAO,EAAE,UAAU,EAAE,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC;AAC/D,IAAI,QAAQA,GAAI,CAAC,gBAAgB,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAEA,GAAI,CAAC,UAAU,CAAC,QAAQ,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,EAAE,CAAC;AACxI;;;;"}

package/dist/esm/components/DTabs/index.js

@@ -0,0 +1,9 @@
+import DTabs from './DTabs.js';
+export { default as DTabContent } from './components/DTabContent.js';
+export { default as DTabsProvider } from './components/DTabsProvider.js';
+export { useTabContext } from './TabContext.js';
+
+
+
+export { DTabs as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DTabs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/components/DTimeline/DTimeline.js

@@ -0,0 +1,12 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import DIcon from '../DIcon/DIcon.js';
+
+function DTimeline({ className, style, dataAttributes, items, }) {
+    return (jsx("div", Object.assign({ style: style, className: classNames('d-timeline', className) }, dataAttributes, { children: items.map((item, index) => (jsxs("div", { className: classNames('d-timeline-item', {
+                [`d-timeline-item-${item.status}`]: item.status,
+            }), children: [jsx("div", { className: "d-timeline-item-connector" }), jsx("div", { className: "d-timeline-item-icon", children: jsx(DIcon, { icon: item.icon || 'Check', size: "1rem" }) }), jsxs("div", { className: "d-timeline-item-content", children: [jsx("div", { className: "d-timeline-item-title", children: item.title }), item.description && jsx("div", { className: "d-timeline-item-description", children: item.description }), item.time && jsx("div", { className: "d-timeline-item-time", children: item.time }), item.children] })] }, index))) })));
+}
+
+export { DTimeline as default };
+//# sourceMappingURL=DTimeline.js.map

package/dist/esm/components/DTimeline/DTimeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DTimeline.js","sources":["../../../../dist-transpiled/components/DTimeline/DTimeline.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nimport DIcon from '../DIcon';\nexport default function DTimeline({ className, style, dataAttributes, items, }) {\n    return (_jsx(\"div\", Object.assign({ style: style, className: classNames('d-timeline', className) }, dataAttributes, { children: items.map((item, index) => (_jsxs(\"div\", { className: classNames('d-timeline-item', {\n                [`d-timeline-item-${item.status}`]: item.status,\n            }), children: [_jsx(\"div\", { className: \"d-timeline-item-connector\" }), _jsx(\"div\", { className: \"d-timeline-item-icon\", children: _jsx(DIcon, { icon: item.icon || 'Check', size: \"1rem\" }) }), _jsxs(\"div\", { className: \"d-timeline-item-content\", children: [_jsx(\"div\", { className: \"d-timeline-item-title\", children: item.title }), item.description && _jsx(\"div\", { className: \"d-timeline-item-description\", children: item.description }), item.time && _jsx(\"div\", { className: \"d-timeline-item-time\", children: item.time }), item.children] })] }, index))) })));\n}\n//# sourceMappingURL=DTimeline.js.map"],"names":["_jsx","_jsxs"],"mappings":";;;;AAGe,SAAS,SAAS,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,EAAE,KAAK,GAAG,EAAE;AAChF,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,SAAS,CAAC,EAAE,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,MAAMC,IAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,iBAAiB,EAAE;AACxN,gBAAgB,CAAC,CAAC,gBAAgB,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,GAAG,IAAI,CAAC,MAAM;AAC/D,aAAa,CAAC,EAAE,QAAQ,EAAE,CAACD,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,2BAA2B,EAAE,CAAC,EAAEA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,sBAAsB,EAAE,QAAQ,EAAEA,GAAI,CAAC,KAAK,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,IAAI,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAEC,IAAK,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,yBAAyB,EAAE,QAAQ,EAAE,CAACD,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,uBAAuB,EAAE,QAAQ,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI,CAAC,WAAW,IAAIA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,6BAA6B,EAAE,QAAQ,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI,CAAC,IAAI,IAAIA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,sBAAsB,EAAE,QAAQ,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,IAAI,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AAC3jB;;;;"}

package/dist/esm/components/DTimeline/index.js

@@ -0,0 +1,6 @@
+import DTimeline from './DTimeline.js';
+
+
+
+export { DTimeline as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DTimeline/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/esm/components/DToast/DToast.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+import DToastHeader from './components/DToastHeader.js';
+import DToastBody from './components/DToastBody.js';
+
+const LIVE_REGION_ATTRIBUTES = {
+    alert: { role: 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' },
+    status: { role: 'status', 'aria-live': 'polite', 'aria-atomic': 'true' },
+    none: {},
+};
+function DToast({ children, role = 'alert', className, style, dataAttributes, }) {
+    return (jsx("div", Object.assign({ className: classNames('toast', className) }, LIVE_REGION_ATTRIBUTES[role], { style: style }, dataAttributes, { children: children })));
+}
+var DToast$1 = Object.assign(DToast, {
+    Header: DToastHeader,
+    Body: DToastBody,
+});
+
+export { DToast$1 as default };
+//# sourceMappingURL=DToast.js.map

package/dist/esm/components/DToast/DToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DToast.js","sources":["../../../../dist-transpiled/components/DToast/DToast.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nimport DToastHeader from './components/DToastHeader';\nimport DToastBody from './components/DToastBody';\nconst LIVE_REGION_ATTRIBUTES = {\n    alert: { role: 'alert', 'aria-live': 'assertive', 'aria-atomic': 'true' },\n    status: { role: 'status', 'aria-live': 'polite', 'aria-atomic': 'true' },\n    none: {},\n};\nfunction DToast({ children, role = 'alert', className, style, dataAttributes, }) {\n    return (_jsx(\"div\", Object.assign({ className: classNames('toast', className) }, LIVE_REGION_ATTRIBUTES[role], { style: style }, dataAttributes, { children: children })));\n}\nexport default Object.assign(DToast, {\n    Header: DToastHeader,\n    Body: DToastBody,\n});\n//# sourceMappingURL=DToast.js.map"],"names":["_jsx"],"mappings":";;;;;AAIA,MAAM,sBAAsB,GAAG;AAC/B,IAAI,KAAK,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,aAAa,EAAE,MAAM,EAAE;AAC7E,IAAI,MAAM,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,WAAW,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,EAAE;AAC5E,IAAI,IAAI,EAAE,EAAE;AACZ,CAAC;AACD,SAAS,MAAM,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAG,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,cAAc,GAAG,EAAE;AACjF,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,EAAE,SAAS,EAAE,UAAU,CAAC,OAAO,EAAE,SAAS,CAAC,EAAE,EAAE,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,EAAE,KAAK,EAAE,EAAE,cAAc,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC7K;AACA,eAAe,MAAM,CAAC,MAAM,CAAC,MAAM,EAAE;AACrC,IAAI,MAAM,EAAE,YAAY;AACxB,IAAI,IAAI,EAAE,UAAU;AACpB,CAAC,CAAC;;;;"}

package/dist/esm/components/DToast/components/DToastBody.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+function DToastBody({ children, className, style }) {
+    return (jsx("div", { className: classNames('toast-body', className), style: style, children: children }));
+}
+
+export { DToastBody as default };
+//# sourceMappingURL=DToastBody.js.map

package/dist/esm/components/DToast/components/DToastBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DToastBody.js","sources":["../../../../../dist-transpiled/components/DToast/components/DToastBody.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nexport default function DToastBody({ children, className, style }) {\n    return (_jsx(\"div\", { className: classNames('toast-body', className), style: style, children: children }));\n}\n//# sourceMappingURL=DToastBody.js.map"],"names":["_jsx"],"mappings":";;;AAEe,SAAS,UAAU,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;AACnE,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,YAAY,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC7G;;;;"}

package/dist/esm/components/DToast/components/DToastHeader.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import classNames from 'classnames';
+
+function DToastHeader({ children, className, style }) {
+    return (jsx("div", { className: classNames('toast-header', className), style: style, children: children }));
+}
+
+export { DToastHeader as default };
+//# sourceMappingURL=DToastHeader.js.map

package/dist/esm/components/DToast/components/DToastHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DToastHeader.js","sources":["../../../../../dist-transpiled/components/DToast/components/DToastHeader.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport classNames from 'classnames';\nexport default function DToastHeader({ children, className, style }) {\n    return (_jsx(\"div\", { className: classNames('toast-header', className), style: style, children: children }));\n}\n//# sourceMappingURL=DToastHeader.js.map"],"names":["_jsx"],"mappings":";;;AAEe,SAAS,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,EAAE;AACrE,IAAI,QAAQA,GAAI,CAAC,KAAK,EAAE,EAAE,SAAS,EAAE,UAAU,CAAC,cAAc,EAAE,SAAS,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAC;AAC/G;;;;"}

package/dist/esm/components/DToast/index.js

@@ -0,0 +1,8 @@
+import DToast from './DToast.js';
+export { default as DToastHeader } from './components/DToastHeader.js';
+export { default as DToastBody } from './components/DToastBody.js';
+
+
+
+export { DToast as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DToast/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/components/DToastContainer/DToastContainer.js

@@ -0,0 +1,9 @@
+import { jsx } from 'react/jsx-runtime';
+import { Toaster } from 'react-hot-toast';
+
+function DToastContainer({ containerClassName, position = 'bottom-center', reverseOrder = false, containerStyle, toastOptions, gutter = 8, }) {
+    return (jsx(Toaster, { containerClassName: containerClassName, position: position, reverseOrder: reverseOrder, containerStyle: containerStyle, gutter: gutter, toastOptions: toastOptions }));
+}
+
+export { DToastContainer as default };
+//# sourceMappingURL=DToastContainer.js.map

package/dist/esm/components/DToastContainer/DToastContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DToastContainer.js","sources":["../../../../dist-transpiled/components/DToastContainer/DToastContainer.js"],"sourcesContent":["import { jsx as _jsx } from \"react/jsx-runtime\";\nimport { Toaster } from 'react-hot-toast';\nexport default function DToastContainer({ containerClassName, position = 'bottom-center', reverseOrder = false, containerStyle, toastOptions, gutter = 8, }) {\n    return (_jsx(Toaster, { containerClassName: containerClassName, position: position, reverseOrder: reverseOrder, containerStyle: containerStyle, gutter: gutter, toastOptions: toastOptions }));\n}\n//# sourceMappingURL=DToastContainer.js.map"],"names":["_jsx"],"mappings":";;;AAEe,SAAS,eAAe,CAAC,EAAE,kBAAkB,EAAE,QAAQ,GAAG,eAAe,EAAE,YAAY,GAAG,KAAK,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,GAAG,CAAC,GAAG,EAAE;AAC7J,IAAI,QAAQA,GAAI,CAAC,OAAO,EAAE,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,QAAQ,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,CAAC;AACjM;;;;"}

package/dist/esm/components/DToastContainer/index.js

@@ -0,0 +1,7 @@
+import DToastContainer from './DToastContainer.js';
+export { default as useDToast } from './useDToast.js';
+
+
+
+export { DToastContainer as default };
+//# sourceMappingURL=index.js.map

package/dist/esm/components/DToastContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;"}

package/dist/esm/components/DToastContainer/useDToast.js

@@ -0,0 +1,58 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { toast } from 'react-hot-toast';
+import classNames from 'classnames';
+import DToast from '../DToast/DToast.js';
+import DIcon from '../DIcon/DIcon.js';
+import { useDContext } from '../../contexts/DContext.js';
+
+/**
+ * Hook that provides a `toast` function to dispatch DToast notifications.
+ *
+ * Prerequisites:
+ * - The calling component must be inside `DContextProvider` (provides icon context).
+ * - `DToastContainer` must be present somewhere in the component tree as a render target.
+ *
+ * @returns {{ toast }} Object containing a `toast` dispatcher function.
+ * @requires DContextProvider
+ * @requires DToastContainer
+ * @example
+ * const { toast } = useDToast();
+ * toast({ title: 'Saved', color: 'success' });
+ */
+function useDToast() {
+    const { iconMap: { xLg, }, } = useDContext();
+    /**
+     * Dispatches a toast notification rendered as a `DToast` component.
+     * When `data` is a `ToastData` object, the default DToast layout is used.
+     * When `data` is a render function, full custom content is rendered instead.
+     * Returns the toast ID, which can be passed to `reactHotToast.dismiss(id)`.
+     * @param data - Toast content as `ToastData` or a render function for custom layouts.
+     * @param toastProps - Optional per-toast overrides: id, duration, position.
+     */
+    const toast$1 = useCallback((data, toastProps) => {
+        if (typeof data === 'function') {
+            return toast.custom(data, toastProps);
+        }
+        const { title, description, icon, closeIcon, timestamp, color, role, closeAriaLabel = 'Close', } = data;
+        return toast.custom(({ id, visible }) => {
+            if (!visible) {
+                return null;
+            }
+            if (!description) {
+                return (jsx(DToast, { role: role, className: classNames({
+                        [`toast-${color}`]: !!color,
+                    }, 'show'), children: jsxs(DToast.Body, { children: [icon && (jsx(DIcon, { className: "toast-icon", icon: icon })), jsx("p", { className: "toast-title", children: title }), jsx("button", { type: "button", className: "d-close", "aria-label": closeAriaLabel, onClick: () => toast.dismiss(id), children: jsx(DIcon, { icon: closeIcon || xLg }) })] }) }));
+            }
+            return (jsxs(DToast, { role: role, className: classNames({
+                    [`toast-${color}`]: !!color,
+                }, 'show'), children: [jsxs(DToast.Header, { children: [icon && (jsx(DIcon, { className: "toast-icon", icon: icon })), jsx("p", { className: "toast-title", children: title }), timestamp && (jsx("small", { className: "toast-timestamp", children: timestamp })), jsx("button", { type: "button", className: "d-close", "aria-label": closeAriaLabel, onClick: () => toast.dismiss(id), children: jsx(DIcon, { icon: closeIcon || xLg }) })] }), jsx(DToast.Body, { children: jsx("span", { children: description }) })] }));
+        }, toastProps);
+    }, [xLg]);
+    return {
+        toast: toast$1,
+    };
+}
+
+export { useDToast as default };
+//# sourceMappingURL=useDToast.js.map

package/dist/esm/components/DToastContainer/useDToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDToast.js","sources":["../../../../dist-transpiled/components/DToastContainer/useDToast.js"],"sourcesContent":["import { jsx as _jsx, jsxs as _jsxs } from \"react/jsx-runtime\";\nimport { useCallback, } from 'react';\nimport { toast as reactHotToast, } from 'react-hot-toast';\nimport classNames from 'classnames';\nimport DToast from '../DToast/DToast';\nimport DIcon from '../DIcon';\nimport { useDContext } from '../../contexts';\n/**\n * Hook that provides a `toast` function to dispatch DToast notifications.\n *\n * Prerequisites:\n * - The calling component must be inside `DContextProvider` (provides icon context).\n * - `DToastContainer` must be present somewhere in the component tree as a render target.\n *\n * @returns {{ toast }} Object containing a `toast` dispatcher function.\n * @requires DContextProvider\n * @requires DToastContainer\n * @example\n * const { toast } = useDToast();\n * toast({ title: 'Saved', color: 'success' });\n */\nexport default function useDToast() {\n    const { iconMap: { xLg, }, } = useDContext();\n    /**\n     * Dispatches a toast notification rendered as a `DToast` component.\n     * When `data` is a `ToastData` object, the default DToast layout is used.\n     * When `data` is a render function, full custom content is rendered instead.\n     * Returns the toast ID, which can be passed to `reactHotToast.dismiss(id)`.\n     * @param data - Toast content as `ToastData` or a render function for custom layouts.\n     * @param toastProps - Optional per-toast overrides: id, duration, position.\n     */\n    const toast = useCallback((data, toastProps) => {\n        if (typeof data === 'function') {\n            return reactHotToast.custom(data, toastProps);\n        }\n        const { title, description, icon, closeIcon, timestamp, color, role, closeAriaLabel = 'Close', } = data;\n        return reactHotToast.custom(({ id, visible }) => {\n            if (!visible) {\n                return null;\n            }\n            if (!description) {\n                return (_jsx(DToast, { role: role, className: classNames({\n                        [`toast-${color}`]: !!color,\n                    }, 'show'), children: _jsxs(DToast.Body, { children: [icon && (_jsx(DIcon, { className: \"toast-icon\", icon: icon })), _jsx(\"p\", { className: \"toast-title\", children: title }), _jsx(\"button\", { type: \"button\", className: \"d-close\", \"aria-label\": closeAriaLabel, onClick: () => reactHotToast.dismiss(id), children: _jsx(DIcon, { icon: closeIcon || xLg }) })] }) }));\n            }\n            return (_jsxs(DToast, { role: role, className: classNames({\n                    [`toast-${color}`]: !!color,\n                }, 'show'), children: [_jsxs(DToast.Header, { children: [icon && (_jsx(DIcon, { className: \"toast-icon\", icon: icon })), _jsx(\"p\", { className: \"toast-title\", children: title }), timestamp && (_jsx(\"small\", { className: \"toast-timestamp\", children: timestamp })), _jsx(\"button\", { type: \"button\", className: \"d-close\", \"aria-label\": closeAriaLabel, onClick: () => reactHotToast.dismiss(id), children: _jsx(DIcon, { icon: closeIcon || xLg }) })] }), _jsx(DToast.Body, { children: _jsx(\"span\", { children: description }) })] }));\n        }, toastProps);\n    }, [xLg]);\n    return {\n        toast,\n    };\n}\n//# sourceMappingURL=useDToast.js.map"],"names":["toast","reactHotToast","_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/components/DTooltip/DTooltip.js

@@ -0,0 +1,51 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useMemo } from 'react';
+import { useFloating, autoUpdate, offset, flip, shift, arrow, useHover, useFocus, useDismiss, useClick, useRole, useInteractions, FloatingPortal, FloatingArrow } from '@floating-ui/react';
+import classNames from 'classnames';
+
+const ARROW_WIDTH = 8;
+const ARROW_HEIGHT = 4;
+const GAP = 2;
+/**
+ * Tooltip is an abstraction component that wraps any element (`Component`) and displays
+ * floating contextual content (`children`) positioned relative to it using Floating UI.
+ * Use it to add short, non-critical hints or descriptions triggered by hover, focus, or
+ * click, without altering the surrounding layout.
+ */
+function DTooltip({ className, childrenClassName, style, offSet = ARROW_HEIGHT + GAP, padding, withFocus = false, withClick = false, withHover = true, open = false, placement = 'top', size, Component, children, }) {
+    const [isOpen, setIsOpen] = useState(open);
+    const arrowRef = useRef(null);
+    const { refs, context, floatingStyles, } = useFloating({
+        open: isOpen,
+        onOpenChange: setIsOpen,
+        placement,
+        whileElementsMounted: autoUpdate,
+        middleware: [
+            offset(offSet),
+            flip(),
+            shift({
+                padding,
+            }),
+            arrow({
+                element: arrowRef,
+            }),
+        ],
+    });
+    const hover = useHover(context, { move: false });
+    const focus = useFocus(context);
+    const dismiss = useDismiss(context, { ancestorScroll: true });
+    const click = useClick(context);
+    const role = useRole(context, { role: 'tooltip' });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        withHover ? hover : undefined,
+        withClick ? click : undefined,
+        withFocus ? focus : undefined,
+        dismiss,
+        role,
+    ]);
+    const generateClasses = useMemo(() => (Object.assign({ 'tooltip show': true, [`tooltip-${size}`]: !!size }, className && { [className]: true })), [size, className]);
+    return (jsxs(Fragment, { children: [jsx("div", Object.assign({ className: childrenClassName, ref: refs.setReference }, getReferenceProps(), { children: Component })), jsx(FloatingPortal, { children: isOpen && (jsxs("div", Object.assign({ className: classNames(generateClasses), ref: refs.setFloating, style: Object.assign(Object.assign({}, floatingStyles), style) }, getFloatingProps(), { children: [jsx(FloatingArrow, { ref: arrowRef, context: context, width: ARROW_WIDTH, height: ARROW_HEIGHT }), jsx("div", { className: "tooltip-inner", children: children })] }))) })] }));
+}
+
+export { DTooltip as default };
+//# sourceMappingURL=DTooltip.js.map