@chayns-components/navigation 5.0.0-beta.1389

package/README.md

@@ -0,0 +1,34 @@
+<div align="center">
+    <h1>
+        <img src="https://raw.githubusercontent.com/TobitSoftware/chayns-components/master/assets/logo.png" width="600px" alt="chayns-components" />
+    </h1>
+    <p>A set of beautiful React components for developing your own applications with chayns.</p>
+    <div>
+        <img src="https://img.shields.io/npm/dm/@chayns-components/core.svg?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/npm/v/@chayns-components/core?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/license/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+        <img src="https://img.shields.io/github/contributors/TobitSoftware/chayns-components?style=for-the-badge" alt="" />
+    </div>
+</div>
+
+---
+
+## Installation
+
+First you need to install the core part of the chayns-components.
+
+```bash
+# NPM
+npm install @chayns-components/navigation
+
+# Yarn
+yarn add @chayns-components/navigation
+```
+
+> **Information:** Since the components have now been implemented with the styled-components
+> library, the styles are delivered directly with the components. There is no need to load an extra
+> stylesheet anymore.
+
+## Usage
+
+For detailed usage visit the [storybook](https://components.chayns.site/storybook).

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.constants.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO = exports.DYNAMIC_TOOLBAR_SPACER_BASE_CLASS = exports.DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA = exports.DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX = exports.DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX = exports.DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH = exports.DYNAMIC_TOOLBAR_HEIGHT_PX = exports.DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW = exports.DYNAMIC_TOOLBAR_CONTENT_PADDING_PX = exports.DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX = exports.DYNAMIC_TOOLBAR_BASE_CLASS = exports.DYNAMIC_TOOLBAR_BADGE_MAX_VALUE = void 0;
+// Shared constants keep toolbar layout/math identical across components and stories.
+const DYNAMIC_TOOLBAR_BADGE_MAX_VALUE = exports.DYNAMIC_TOOLBAR_BADGE_MAX_VALUE = 99;
+const DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH = exports.DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH = 64;
+const DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA = exports.DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA = 20;
+const DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO = exports.DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO = 0.8;
+const DYNAMIC_TOOLBAR_HEIGHT_PX = exports.DYNAMIC_TOOLBAR_HEIGHT_PX = 85;
+const DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX = exports.DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX = 52;
+const DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW = exports.DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW = 80;
+const DYNAMIC_TOOLBAR_CONTENT_PADDING_PX = exports.DYNAMIC_TOOLBAR_CONTENT_PADDING_PX = 6;
+const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX = exports.DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX = 30;
+const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX = exports.DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX = 36;
+const DYNAMIC_TOOLBAR_BASE_CLASS = exports.DYNAMIC_TOOLBAR_BASE_CLASS = 'beta-chayns-dynamic-toolbar';
+const DYNAMIC_TOOLBAR_SPACER_BASE_CLASS = exports.DYNAMIC_TOOLBAR_SPACER_BASE_CLASS = 'beta-chayns-dynamic-toolbar-spacer';
+//# sourceMappingURL=DynamicToolbar.constants.js.map

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.constants.js","names":["DYNAMIC_TOOLBAR_BADGE_MAX_VALUE","exports","DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH","DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA","DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO","DYNAMIC_TOOLBAR_HEIGHT_PX","DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX","DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW","DYNAMIC_TOOLBAR_CONTENT_PADDING_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX","DYNAMIC_TOOLBAR_BASE_CLASS","DYNAMIC_TOOLBAR_SPACER_BASE_CLASS"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.constants.ts"],"sourcesContent":["// Shared constants keep toolbar layout/math identical across components and stories.\nexport const DYNAMIC_TOOLBAR_BADGE_MAX_VALUE = 99;\nexport const DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH = 64;\nexport const DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA = 20;\nexport const DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO = 0.8;\n\nexport const DYNAMIC_TOOLBAR_HEIGHT_PX = 85;\nexport const DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX = 52;\nexport const DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW = 80;\nexport const DYNAMIC_TOOLBAR_CONTENT_PADDING_PX = 6;\nexport const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX = 30;\nexport const DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX = 36;\n\nexport const DYNAMIC_TOOLBAR_BASE_CLASS = 'beta-chayns-dynamic-toolbar';\nexport const DYNAMIC_TOOLBAR_SPACER_BASE_CLASS = 'beta-chayns-dynamic-toolbar-spacer';\n"],"mappings":";;;;;;AAAA;AACO,MAAMA,+BAA+B,GAAAC,OAAA,CAAAD,+BAAA,GAAG,EAAE;AAC1C,MAAME,8BAA8B,GAAAD,OAAA,CAAAC,8BAAA,GAAG,EAAE;AACzC,MAAMC,iCAAiC,GAAAF,OAAA,CAAAE,iCAAA,GAAG,EAAE;AAC5C,MAAMC,oCAAoC,GAAAH,OAAA,CAAAG,oCAAA,GAAG,GAAG;AAEhD,MAAMC,yBAAyB,GAAAJ,OAAA,CAAAI,yBAAA,GAAG,EAAE;AACpC,MAAMC,iCAAiC,GAAAL,OAAA,CAAAK,iCAAA,GAAG,EAAE;AAC5C,MAAMC,gCAAgC,GAAAN,OAAA,CAAAM,gCAAA,GAAG,EAAE;AAC3C,MAAMC,kCAAkC,GAAAP,OAAA,CAAAO,kCAAA,GAAG,CAAC;AAC5C,MAAMC,yCAAyC,GAAAR,OAAA,CAAAQ,yCAAA,GAAG,EAAE;AACpD,MAAMC,0CAA0C,GAAAT,OAAA,CAAAS,0CAAA,GAAG,EAAE;AAErD,MAAMC,0BAA0B,GAAAV,OAAA,CAAAU,0BAAA,GAAG,6BAA6B;AAChE,MAAMC,iCAAiC,GAAAX,OAAA,CAAAW,iCAAA,GAAG,oCAAoC","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.js

@@ -0,0 +1,163 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("motion/react");
+var _core = require("@chayns-components/core");
+var _DynamicToolbarItemButton = _interopRequireDefault(require("./dynamic-toolbar-item-button/DynamicToolbarItemButton"));
+var _DynamicToolbarOverflowTray = _interopRequireDefault(require("./dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray"));
+var _DynamicToolbar = require("./DynamicToolbar.styles");
+var _DynamicToolbar2 = require("./DynamicToolbar.constants");
+var _DynamicToolbar3 = require("./DynamicToolbar.types");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DynamicToolbar = ({
+  activeItemId,
+  className,
+  items = [],
+  layout = _DynamicToolbar3.DynamicToolbarLayout.Floating,
+  onItemSelect
+}) => {
+  const [isAutoHidden, setIsAutoHidden] = (0, _react.useState)(false);
+  const [isOverflowTrayOpen, setIsOverflowTrayOpen] = (0, _react.useState)(false);
+  const [availableWidth, setAvailableWidth] = (0, _react.useState)();
+  const previousScrollYRef = (0, _react.useRef)(0);
+  const scrollAnimationFrame = (0, _react.useRef)();
+  const toolbarClassName = className ? `${_DynamicToolbar2.DYNAMIC_TOOLBAR_BASE_CLASS} ${className}` : _DynamicToolbar2.DYNAMIC_TOOLBAR_BASE_CLASS;
+  const isHidden = layout === _DynamicToolbar3.DynamicToolbarLayout.Floating && isAutoHidden || layout === _DynamicToolbar3.DynamicToolbarLayout.Hidden || items.length === 0;
+  const handleToggleOverflowTrayVisibility = (0, _react.useCallback)(() => {
+    setIsOverflowTrayOpen(prevState => !prevState);
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const updateAvailableWidth = () => {
+      setAvailableWidth(window.innerWidth * _DynamicToolbar2.DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO);
+    };
+
+    // Toggle the floating toolbar visibility while tracking the last scroll position.
+    const handleScroll = () => {
+      if (scrollAnimationFrame.current) {
+        return;
+      }
+      scrollAnimationFrame.current = window.requestAnimationFrame(() => {
+        scrollAnimationFrame.current = undefined;
+        const currentScrollY = window.scrollY;
+        const previousScrollY = previousScrollYRef.current;
+        const isScrollingDown = currentScrollY > previousScrollY;
+        const hasReachedHideThreshold = Math.abs(currentScrollY - previousScrollY) > _DynamicToolbar2.DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA;
+        if (isScrollingDown && hasReachedHideThreshold) {
+          previousScrollYRef.current = currentScrollY;
+          setIsAutoHidden(true);
+          setIsOverflowTrayOpen(false);
+          return;
+        }
+        if (!isScrollingDown && hasReachedHideThreshold) {
+          previousScrollYRef.current = currentScrollY;
+          setIsAutoHidden(false);
+          return;
+        }
+        previousScrollYRef.current = currentScrollY;
+      });
+    };
+    updateAvailableWidth();
+    window.addEventListener('resize', updateAvailableWidth);
+    window.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return () => {
+      window.removeEventListener('resize', updateAvailableWidth);
+      window.removeEventListener('scroll', handleScroll);
+      if (scrollAnimationFrame.current) {
+        window.cancelAnimationFrame(scrollAnimationFrame.current);
+      }
+    };
+  }, []);
+  (0, _react.useEffect)(() => {
+    if (isHidden && isOverflowTrayOpen) {
+      setIsOverflowTrayOpen(false);
+    }
+  }, [isHidden, isOverflowTrayOpen]);
+  const handleItemSelection = (0, _react.useCallback)(item => {
+    if (item.isDisabled) {
+      return;
+    }
+    onItemSelect === null || onItemSelect === void 0 || onItemSelect(item);
+  }, [onItemSelect]);
+  const {
+    visibleItems,
+    overflowItems
+  } = (0, _react.useMemo)(() => {
+    // Derive how many items fit into the toolbar before overflowing.
+    if (!availableWidth) {
+      return {
+        visibleItems: items,
+        overflowItems: []
+      };
+    }
+    const totalSlots = Math.max(1, Math.floor(availableWidth / _DynamicToolbar2.DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH));
+    if (items.length <= totalSlots) {
+      return {
+        visibleItems: items,
+        overflowItems: []
+      };
+    }
+    const visibleCount = Math.max(1, totalSlots - 1);
+    return {
+      visibleItems: items.slice(0, visibleCount),
+      overflowItems: items.slice(visibleCount)
+    };
+  }, [availableWidth, items]);
+  (0, _react.useEffect)(() => {
+    if (overflowItems.length === 0 && isOverflowTrayOpen) {
+      setIsOverflowTrayOpen(false);
+    }
+  }, [overflowItems.length, isOverflowTrayOpen]);
+  const renderedVisibleItems = (0, _react.useMemo)(() => visibleItems.map(item => /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.default, {
+    badgeMaxValue: _DynamicToolbar2.DYNAMIC_TOOLBAR_BADGE_MAX_VALUE,
+    isActive: item.id === activeItemId,
+    item: item,
+    key: item.id,
+    onSelect: handleItemSelection
+  })), [activeItemId, handleItemSelection, visibleItems]);
+  return /*#__PURE__*/_react.default.createElement(_react2.AnimatePresence, {
+    initial: false
+  }, !isHidden && /*#__PURE__*/_react.default.createElement(_DynamicToolbar.StyledMotionDynamicToolbar, {
+    animate: {
+      y: 0
+    },
+    className: toolbarClassName,
+    exit: {
+      y: '100%'
+    },
+    initial: {
+      y: '100%'
+    },
+    key: "dynamic-toolbar",
+    transition: {
+      duration: 0.2,
+      type: 'tween'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DynamicToolbarOverflowTray.default, {
+    activeItemId: activeItemId,
+    handleItemSelection: handleItemSelection,
+    items: overflowItems,
+    isOpen: isOverflowTrayOpen,
+    key: "overflow-tray"
+  }), /*#__PURE__*/_react.default.createElement(_DynamicToolbar.StyledDynamicToolbarBackground, {
+    $layout: layout
+  }), /*#__PURE__*/_react.default.createElement(_DynamicToolbar.StyledDynamicToolbarContent, null, renderedVisibleItems), overflowItems.length > 0 && /*#__PURE__*/_react.default.createElement(_DynamicToolbar.StyledDynamicToolbarOverflowTrigger, {
+    onClick: handleToggleOverflowTrayVisibility
+  }, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    color: layout === _DynamicToolbar3.DynamicToolbarLayout.Area ? 'white' : undefined,
+    icons: ['fa fa-ellipsis-vertical'],
+    size: 22
+  }))));
+};
+DynamicToolbar.displayName = 'DynamicToolbar';
+var _default = exports.default = DynamicToolbar;
+//# sourceMappingURL=DynamicToolbar.js.map

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.js","names":["_react","_interopRequireWildcard","require","_react2","_core","_DynamicToolbarItemButton","_interopRequireDefault","_DynamicToolbarOverflowTray","_DynamicToolbar","_DynamicToolbar2","_DynamicToolbar3","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DynamicToolbar","activeItemId","className","items","layout","DynamicToolbarLayout","Floating","onItemSelect","isAutoHidden","setIsAutoHidden","useState","isOverflowTrayOpen","setIsOverflowTrayOpen","availableWidth","setAvailableWidth","previousScrollYRef","useRef","scrollAnimationFrame","toolbarClassName","DYNAMIC_TOOLBAR_BASE_CLASS","isHidden","Hidden","length","handleToggleOverflowTrayVisibility","useCallback","prevState","useEffect","window","undefined","updateAvailableWidth","innerWidth","DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO","handleScroll","current","requestAnimationFrame","currentScrollY","scrollY","previousScrollY","isScrollingDown","hasReachedHideThreshold","Math","abs","DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA","addEventListener","passive","removeEventListener","cancelAnimationFrame","handleItemSelection","item","isDisabled","visibleItems","overflowItems","useMemo","totalSlots","max","floor","DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH","visibleCount","slice","renderedVisibleItems","map","createElement","badgeMaxValue","DYNAMIC_TOOLBAR_BADGE_MAX_VALUE","isActive","id","key","onSelect","AnimatePresence","initial","StyledMotionDynamicToolbar","animate","y","exit","transition","duration","type","isOpen","StyledDynamicToolbarBackground","$layout","StyledDynamicToolbarContent","StyledDynamicToolbarOverflowTrigger","onClick","Icon","color","Area","icons","size","displayName","_default","exports"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.tsx"],"sourcesContent":["import React, { FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { AnimatePresence } from 'motion/react';\nimport { Icon } from '@chayns-components/core';\nimport DynamicToolbarItemButton from './dynamic-toolbar-item-button/DynamicToolbarItemButton';\nimport DynamicToolbarOverflowTray from './dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray';\nimport {\n    StyledDynamicToolbarBackground,\n    StyledDynamicToolbarContent,\n    StyledDynamicToolbarOverflowTrigger,\n    StyledMotionDynamicToolbar,\n} from './DynamicToolbar.styles';\nimport {\n    DYNAMIC_TOOLBAR_BADGE_MAX_VALUE,\n    DYNAMIC_TOOLBAR_BASE_CLASS,\n    DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH,\n    DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA,\n    DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO,\n} from './DynamicToolbar.constants';\nimport type { DynamicToolbarItem, DynamicToolbarProps } from './DynamicToolbar.types';\nimport { DynamicToolbarLayout } from './DynamicToolbar.types';\n\nconst DynamicToolbar: FC<DynamicToolbarProps> = ({\n    activeItemId,\n    className,\n    items = [],\n    layout = DynamicToolbarLayout.Floating,\n    onItemSelect,\n}) => {\n    const [isAutoHidden, setIsAutoHidden] = useState(false);\n    const [isOverflowTrayOpen, setIsOverflowTrayOpen] = useState(false);\n    const [availableWidth, setAvailableWidth] = useState<number>();\n\n    const previousScrollYRef = useRef(0);\n    const scrollAnimationFrame = useRef<number>();\n\n    const toolbarClassName = className\n        ? `${DYNAMIC_TOOLBAR_BASE_CLASS} ${className}`\n        : DYNAMIC_TOOLBAR_BASE_CLASS;\n\n    const isHidden =\n        (layout === DynamicToolbarLayout.Floating && isAutoHidden) ||\n        layout === DynamicToolbarLayout.Hidden ||\n        items.length === 0;\n\n    const handleToggleOverflowTrayVisibility = useCallback(() => {\n        setIsOverflowTrayOpen((prevState) => !prevState);\n    }, []);\n\n    useEffect(() => {\n        if (typeof window === 'undefined') {\n            return undefined;\n        }\n\n        const updateAvailableWidth = () => {\n            setAvailableWidth(window.innerWidth * DYNAMIC_TOOLBAR_VIEWPORT_WIDTH_RATIO);\n        };\n\n        // Toggle the floating toolbar visibility while tracking the last scroll position.\n        const handleScroll = () => {\n            if (scrollAnimationFrame.current) {\n                return;\n            }\n\n            scrollAnimationFrame.current = window.requestAnimationFrame(() => {\n                scrollAnimationFrame.current = undefined;\n\n                const currentScrollY = window.scrollY;\n                const previousScrollY = previousScrollYRef.current;\n                const isScrollingDown = currentScrollY > previousScrollY;\n                const hasReachedHideThreshold =\n                    Math.abs(currentScrollY - previousScrollY) > DYNAMIC_TOOLBAR_SCROLL_HIDE_DELTA;\n\n                if (isScrollingDown && hasReachedHideThreshold) {\n                    previousScrollYRef.current = currentScrollY;\n                    setIsAutoHidden(true);\n                    setIsOverflowTrayOpen(false);\n\n                    return;\n                }\n\n                if (!isScrollingDown && hasReachedHideThreshold) {\n                    previousScrollYRef.current = currentScrollY;\n                    setIsAutoHidden(false);\n\n                    return;\n                }\n\n                previousScrollYRef.current = currentScrollY;\n            });\n        };\n\n        updateAvailableWidth();\n\n        window.addEventListener('resize', updateAvailableWidth);\n        window.addEventListener('scroll', handleScroll, { passive: true });\n\n        return () => {\n            window.removeEventListener('resize', updateAvailableWidth);\n            window.removeEventListener('scroll', handleScroll);\n\n            if (scrollAnimationFrame.current) {\n                window.cancelAnimationFrame(scrollAnimationFrame.current);\n            }\n        };\n    }, []);\n\n    useEffect(() => {\n        if (isHidden && isOverflowTrayOpen) {\n            setIsOverflowTrayOpen(false);\n        }\n    }, [isHidden, isOverflowTrayOpen]);\n\n    const handleItemSelection = useCallback(\n        (item: DynamicToolbarItem) => {\n            if (item.isDisabled) {\n                return;\n            }\n\n            onItemSelect?.(item);\n        },\n        [onItemSelect],\n    );\n\n    const { visibleItems, overflowItems } = useMemo(() => {\n        // Derive how many items fit into the toolbar before overflowing.\n        if (!availableWidth) {\n            return { visibleItems: items, overflowItems: [] };\n        }\n\n        const totalSlots = Math.max(1, Math.floor(availableWidth / DYNAMIC_TOOLBAR_MIN_ITEM_WIDTH));\n\n        if (items.length <= totalSlots) {\n            return { visibleItems: items, overflowItems: [] };\n        }\n\n        const visibleCount = Math.max(1, totalSlots - 1);\n\n        return {\n            visibleItems: items.slice(0, visibleCount),\n            overflowItems: items.slice(visibleCount),\n        };\n    }, [availableWidth, items]);\n\n    useEffect(() => {\n        if (overflowItems.length === 0 && isOverflowTrayOpen) {\n            setIsOverflowTrayOpen(false);\n        }\n    }, [overflowItems.length, isOverflowTrayOpen]);\n\n    const renderedVisibleItems = useMemo(\n        () =>\n            visibleItems.map((item) => (\n                <DynamicToolbarItemButton\n                    badgeMaxValue={DYNAMIC_TOOLBAR_BADGE_MAX_VALUE}\n                    isActive={item.id === activeItemId}\n                    item={item}\n                    key={item.id}\n                    onSelect={handleItemSelection}\n                />\n            )),\n        [activeItemId, handleItemSelection, visibleItems],\n    );\n\n    return (\n        <AnimatePresence initial={false}>\n            {!isHidden && (\n                <StyledMotionDynamicToolbar\n                    animate={{ y: 0 }}\n                    className={toolbarClassName}\n                    exit={{ y: '100%' }}\n                    initial={{ y: '100%' }}\n                    key=\"dynamic-toolbar\"\n                    transition={{ duration: 0.2, type: 'tween' }}\n                >\n                    <DynamicToolbarOverflowTray\n                        activeItemId={activeItemId}\n                        handleItemSelection={handleItemSelection}\n                        items={overflowItems}\n                        isOpen={isOverflowTrayOpen}\n                        key=\"overflow-tray\"\n                    />\n                    <StyledDynamicToolbarBackground $layout={layout} />\n                    <StyledDynamicToolbarContent>\n                        {renderedVisibleItems}\n                    </StyledDynamicToolbarContent>\n                    {overflowItems.length > 0 && (\n                        <StyledDynamicToolbarOverflowTrigger\n                            onClick={handleToggleOverflowTrayVisibility}\n                        >\n                            <Icon\n                                color={layout === DynamicToolbarLayout.Area ? 'white' : undefined}\n                                icons={['fa fa-ellipsis-vertical']}\n                                size={22}\n                            />\n                        </StyledDynamicToolbarOverflowTrigger>\n                    )}\n                </StyledMotionDynamicToolbar>\n            )}\n        </AnimatePresence>\n    );\n};\n\nDynamicToolbar.displayName = 'DynamicToolbar';\n\nexport default DynamicToolbar;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.styles.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionDynamicToolbar = exports.StyledDynamicToolbarOverflowTrigger = exports.StyledDynamicToolbarContent = exports.StyledDynamicToolbarBackground = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _DynamicToolbar = require("./DynamicToolbar.types");
+var _DynamicToolbar2 = require("./DynamicToolbar.constants");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledMotionDynamicToolbar = exports.StyledMotionDynamicToolbar = (0, _styledComponents.default)(_react.motion.div)`
+    align-items: flex-start;
+    bottom: 0;
+    display: flex;
+    height: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_HEIGHT_PX}px;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    width: 100%;
+`;
+const StyledDynamicToolbarContent = exports.StyledDynamicToolbarContent = _styledComponents.default.div`
+    display: flex;
+    gap: 6px;
+    height: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+    justify-content: center;
+    padding: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;
+    width: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;
+`;
+const StyledDynamicToolbarBackground = exports.StyledDynamicToolbarBackground = _styledComponents.default.div`
+    background-color: ${({
+  theme
+}) => theme.primary};
+    position: absolute;
+    transition:
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease,
+        height 0.3s ease,
+        width 0.3s ease;
+
+    ${({
+  $layout
+}) => $layout === _DynamicToolbar.DynamicToolbarLayout.Floating ? (0, _styledComponents.css)`
+                  border-radius: 8px;
+                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+                  height: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+                  width: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;
+              ` : (0, _styledComponents.css)`
+                  border-radius: 0;
+                  box-shadow: none;
+                  height: 100%;
+                  width: 100vw;
+              `}
+`;
+const StyledDynamicToolbarOverflowTrigger = exports.StyledDynamicToolbarOverflowTrigger = _styledComponents.default.button`
+    align-items: center;
+    background: none;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    height: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+    justify-content: center;
+    padding: 0;
+    position: absolute;
+    right: calc(
+        ((100vw - ${_DynamicToolbar2.DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw) / 2) -
+            ${_DynamicToolbar2.DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX}px
+    );
+    width: ${_DynamicToolbar2.DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX}px;
+`;
+//# sourceMappingURL=DynamicToolbar.styles.js.map

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","_DynamicToolbar","_DynamicToolbar2","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionDynamicToolbar","exports","styled","motion","div","DYNAMIC_TOOLBAR_HEIGHT_PX","StyledDynamicToolbarContent","DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX","DYNAMIC_TOOLBAR_CONTENT_PADDING_PX","DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW","StyledDynamicToolbarBackground","theme","primary","$layout","DynamicToolbarLayout","Floating","css","StyledDynamicToolbarOverflowTrigger","button","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX","DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.styles.ts"],"sourcesContent":["import { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { DynamicToolbarLayout } from './DynamicToolbar.types';\nimport {\n    DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX,\n    DYNAMIC_TOOLBAR_CONTENT_PADDING_PX,\n    DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW,\n    DYNAMIC_TOOLBAR_HEIGHT_PX,\n    DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX,\n    DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX,\n} from './DynamicToolbar.constants';\n\nexport const StyledMotionDynamicToolbar = styled(motion.div)`\n    align-items: flex-start;\n    bottom: 0;\n    display: flex;\n    height: ${DYNAMIC_TOOLBAR_HEIGHT_PX}px;\n    justify-content: center;\n    left: 0;\n    position: fixed;\n    width: 100%;\n`;\n\nexport const StyledDynamicToolbarContent = styled.div`\n    display: flex;\n    gap: 6px;\n    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n    justify-content: center;\n    padding: ${DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;\n    width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;\n`;\n\ntype StyledDynamicToolbarBackgroundProps = WithTheme<{\n    $layout: DynamicToolbarLayout;\n}>;\n\nexport const StyledDynamicToolbarBackground = styled.div<StyledDynamicToolbarBackgroundProps>`\n    background-color: ${({ theme }) => theme.primary};\n    position: absolute;\n    transition:\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        height 0.3s ease,\n        width 0.3s ease;\n\n    ${({ $layout }) =>\n        $layout === DynamicToolbarLayout.Floating\n            ? css`\n                  border-radius: 8px;\n                  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n                  height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n                  width: ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;\n              `\n            : css`\n                  border-radius: 0;\n                  box-shadow: none;\n                  height: 100%;\n                  width: 100vw;\n              `}\n`;\n\nexport const StyledDynamicToolbarOverflowTrigger = styled.button`\n    align-items: center;\n    background: none;\n    border: none;\n    cursor: pointer;\n    display: flex;\n    height: ${DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;\n    justify-content: center;\n    padding: 0;\n    position: absolute;\n    right: calc(\n        ((100vw - ${DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw) / 2) -\n            ${DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_OFFSET_PX}px\n    );\n    width: ${DYNAMIC_TOOLBAR_OVERFLOW_TRIGGER_WIDTH_PX}px;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,eAAA,GAAAH,OAAA;AACA,IAAAI,gBAAA,GAAAJ,OAAA;AAOoC,SAAAE,wBAAAG,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAL,uBAAA,YAAAA,CAAAG,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAE7B,MAAMkB,0BAA0B,GAAAC,OAAA,CAAAD,0BAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAC;AAC5D;AACA;AACA;AACA,cAAcC,0CAAyB;AACvC;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,2BAA2B,GAAAL,OAAA,CAAAK,2BAAA,GAAGJ,yBAAM,CAACE,GAAG;AACrD;AACA;AACA,cAAcG,kDAAiC;AAC/C;AACA,eAAeC,mDAAkC;AACjD,aAAaC,iDAAgC;AAC7C,CAAC;AAMM,MAAMC,8BAA8B,GAAAT,OAAA,CAAAS,8BAAA,GAAGR,yBAAM,CAACE,GAAwC;AAC7F,wBAAwB,CAAC;EAAEO;AAAM,CAAC,KAAKA,KAAK,CAACC,OAAO;AACpD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAQ,CAAC,KACVA,OAAO,KAAKC,oCAAoB,CAACC,QAAQ,GACnC,IAAAC,qBAAG;AACjB;AACA;AACA,4BAA4BT,kDAAiC;AAC7D,2BAA2BE,iDAAgC;AAC3D,eAAe,GACD,IAAAO,qBAAG;AACjB;AACA;AACA;AACA;AACA,eAAe;AACf,CAAC;AAEM,MAAMC,mCAAmC,GAAAhB,OAAA,CAAAgB,mCAAA,GAAGf,yBAAM,CAACgB,MAAM;AAChE;AACA;AACA;AACA;AACA;AACA,cAAcX,kDAAiC;AAC/C;AACA;AACA;AACA;AACA,oBAAoBE,iDAAgC;AACpD,cAAcU,2DAA0C;AACxD;AACA,aAAaC,0DAAyC;AACtD,CAAC","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.types.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DynamicToolbarLayout = void 0;
+let DynamicToolbarLayout = exports.DynamicToolbarLayout = /*#__PURE__*/function (DynamicToolbarLayout) {
+  DynamicToolbarLayout["Area"] = "area";
+  DynamicToolbarLayout["Hidden"] = "hidden";
+  DynamicToolbarLayout["Floating"] = "floating";
+  return DynamicToolbarLayout;
+}({});
+//# sourceMappingURL=DynamicToolbar.types.js.map

package/lib/cjs/components/dynamic-toolbar/DynamicToolbar.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbar.types.js","names":["DynamicToolbarLayout","exports"],"sources":["../../../../src/components/dynamic-toolbar/DynamicToolbar.types.ts"],"sourcesContent":["import type { IconProps } from '@chayns-components/core';\n\nexport enum DynamicToolbarLayout {\n    Area = 'area',\n    Hidden = 'hidden',\n    Floating = 'floating',\n}\n\nexport type DynamicToolbarItem = {\n    // Optional badge count that highlights pending conversations.\n    badgeCount?: number;\n    // Icon names that are forwarded to the shared Icon component.\n    icons: IconProps['icons'];\n    // Unique identifier that drives selection state and callbacks.\n    id: string;\n    // Marks the action as temporarily unavailable.\n    isDisabled?: boolean;\n    // Human-readable label for accessibility announcements.\n    label: string;\n    // Optional visual separator to highlight contextual groups.\n    hasRightSeparator?: boolean;\n};\n\nexport type DynamicToolbarProps = {\n    /**\n     * @description Identifier of the action that should appear as active.\n     * @example\n     * <DynamicToolbar activeItemId=\"chat\" items={[...]} />\n     * @optional\n     */\n    activeItemId?: string | null;\n    /**\n     * @description Custom class name passed to the root container for styled-component overrides.\n     * @example\n     * <DynamicToolbar className=\"support-toolbar\" items={[...]} />\n     * @optional\n     */\n    className?: string;\n    /**\n     * @description Ordered collection of toolbar actions that should be rendered.\n     * @example\n     * <DynamicToolbar items={[{ id: 'chat', icons: ['far fa-comment'], label: 'Chat' }]} />\n     */\n    items: DynamicToolbarItem[];\n    /**\n     * @description Controls whether the toolbar floats, snaps to the edges, or is hidden.\n     * @example\n     * <DynamicToolbar layout={DynamicToolbarLayout.FLUSH} items={[...]} />\n     * @default DynamicToolbarLayout.Floating\n     * @optional\n     */\n    layout?: DynamicToolbarLayout;\n    /**\n     * @description Callback that receives the item triggered by the user.\n     * @example\n     * <DynamicToolbar onItemSelect={(item) => console.log(item.id)} items={[...]} />\n     * @optional\n     */\n    onItemSelect?: (item: DynamicToolbarItem) => void;\n};\n"],"mappings":";;;;;;IAEYA,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,0BAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAApBA,oBAAoB;EAAA,OAApBA,oBAAoB;AAAA","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _core = require("@chayns-components/core");
+var _DynamicToolbarItemButton = require("./DynamicToolbarItemButton.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+/**
+ * Renders a single toolbar entry and optionally shows a badge or label depending on the context.
+ */
+const DynamicToolbarItemButton = ({
+  badgeMaxValue,
+  isActive,
+  isInOverflowTray = false,
+  item,
+  onSelect
+}) => {
+  const hasBadge = typeof item.badgeCount === 'number' && item.badgeCount > 0;
+  const badgeDisplayValue = hasBadge && item.badgeCount ? formatBadgeValue(item.badgeCount, badgeMaxValue) : null;
+  const handleClick = (0, _react.useCallback)(() => {
+    onSelect(item);
+  }, [onSelect, item]);
+  return /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.StyledDynamicToolbarItemButton, {
+    type: "button",
+    disabled: item.isDisabled,
+    $isDisabled: Boolean(item.isDisabled),
+    $isInOverflowTray: isInOverflowTray,
+    $hasRightSeparator: item.hasRightSeparator,
+    onClick: handleClick
+  }, /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.StyledDynamicToolbarItemIconWrapper, null, /*#__PURE__*/_react.default.createElement(_core.Icon, {
+    color: isInOverflowTray ? undefined : 'white',
+    icons: item.icons,
+    size: 22
+  }), badgeDisplayValue && /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.StyledDynamicToolbarItemBadge, null, badgeDisplayValue)), isActive && /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.StyledMotionDynamicToolbarItemButtonBackground, {
+    layoutId: "toolbarItemBackground"
+  }), isInOverflowTray && /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.StyledDynamicToolbarItemLabel, {
+    className: "ellipsis"
+  }, item.label));
+};
+
+/**
+ * Converts the raw badge count into the compact value displayed next to the icon.
+ */
+const formatBadgeValue = (value, maxValue) => {
+  if (value > maxValue) {
+    return `${maxValue}+`;
+  }
+  return `${value}`;
+};
+var _default = exports.default = DynamicToolbarItemButton;
+//# sourceMappingURL=DynamicToolbarItemButton.js.map

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarItemButton.js","names":["_react","_interopRequireWildcard","require","_core","_DynamicToolbarItemButton","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DynamicToolbarItemButton","badgeMaxValue","isActive","isInOverflowTray","item","onSelect","hasBadge","badgeCount","badgeDisplayValue","formatBadgeValue","handleClick","useCallback","createElement","StyledDynamicToolbarItemButton","type","disabled","isDisabled","$isDisabled","Boolean","$isInOverflowTray","$hasRightSeparator","hasRightSeparator","onClick","StyledDynamicToolbarItemIconWrapper","Icon","color","undefined","icons","size","StyledDynamicToolbarItemBadge","StyledMotionDynamicToolbarItemButtonBackground","layoutId","StyledDynamicToolbarItemLabel","className","label","value","maxValue","_default","exports"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.tsx"],"sourcesContent":["import React, { FC, useCallback } from 'react';\nimport { Icon } from '@chayns-components/core';\nimport type { DynamicToolbarItem } from '../DynamicToolbar.types';\nimport {\n    StyledDynamicToolbarItemButton,\n    StyledMotionDynamicToolbarItemButtonBackground,\n    StyledDynamicToolbarItemIconWrapper,\n    StyledDynamicToolbarItemBadge,\n    StyledDynamicToolbarItemLabel,\n} from './DynamicToolbarItemButton.styles';\n\nexport type DynamicToolbarItemButtonProps = {\n    /**\n     * Maximum badge value before switching to the `max+` format.\n     */\n    badgeMaxValue: number;\n    /**\n     * Indicates whether the corresponding item is currently active.\n     */\n    isActive: boolean;\n    /**\n     * Indicates whether the corresponding item is rendered within an overflow tray.\n     */\n    isInOverflowTray?: boolean;\n    /**\n     * Item configuration that should be rendered.\n     */\n    item: DynamicToolbarItem;\n    /**\n     * Callback triggered when the user selects the toolbar entry.\n     */\n    onSelect: (item: DynamicToolbarItem) => void;\n};\n\n/**\n * Renders a single toolbar entry and optionally shows a badge or label depending on the context.\n */\nconst DynamicToolbarItemButton: FC<DynamicToolbarItemButtonProps> = ({\n    badgeMaxValue,\n    isActive,\n    isInOverflowTray = false,\n    item,\n    onSelect,\n}) => {\n    const hasBadge = typeof item.badgeCount === 'number' && item.badgeCount > 0;\n\n    const badgeDisplayValue =\n        hasBadge && item.badgeCount ? formatBadgeValue(item.badgeCount, badgeMaxValue) : null;\n\n    const handleClick = useCallback(() => {\n        onSelect(item);\n    }, [onSelect, item]);\n\n    return (\n        <StyledDynamicToolbarItemButton\n            type=\"button\"\n            disabled={item.isDisabled}\n            $isDisabled={Boolean(item.isDisabled)}\n            $isInOverflowTray={isInOverflowTray}\n            $hasRightSeparator={item.hasRightSeparator}\n            onClick={handleClick}\n        >\n            <StyledDynamicToolbarItemIconWrapper>\n                <Icon color={isInOverflowTray ? undefined : 'white'} icons={item.icons} size={22} />\n                {badgeDisplayValue && (\n                    <StyledDynamicToolbarItemBadge>\n                        {badgeDisplayValue}\n                    </StyledDynamicToolbarItemBadge>\n                )}\n            </StyledDynamicToolbarItemIconWrapper>\n            {isActive && (\n                <StyledMotionDynamicToolbarItemButtonBackground layoutId=\"toolbarItemBackground\" />\n            )}\n            {isInOverflowTray && (\n                <StyledDynamicToolbarItemLabel className=\"ellipsis\">\n                    {item.label}\n                </StyledDynamicToolbarItemLabel>\n            )}\n        </StyledDynamicToolbarItemButton>\n    );\n};\n\n/**\n * Converts the raw badge count into the compact value displayed next to the icon.\n */\nconst formatBadgeValue = (value: number, maxValue: number): string => {\n    if (value > maxValue) {\n        return `${maxValue}+`;\n    }\n\n    return `${value}`;\n};\n\nexport default DynamicToolbarItemButton;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.styles.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionDynamicToolbarItemButtonBackground = exports.StyledDynamicToolbarItemLabel = exports.StyledDynamicToolbarItemIconWrapper = exports.StyledDynamicToolbarItemButton = exports.StyledDynamicToolbarItemBadge = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledDynamicToolbarItemButton = exports.StyledDynamicToolbarItemButton = _styledComponents.default.button`
+    align-items: center;
+    background: transparent;
+    border: none;
+    cursor: ${({
+  $isDisabled
+}) => $isDisabled ? 'default' : 'pointer'};
+    display: flex;
+    flex: 1 1 0;
+    flex-direction: column;
+    justify-content: space-between;
+    height: ${({
+  $isInOverflowTray
+}) => $isInOverflowTray ? '56px' : '40px'};
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    padding: 8px;
+    min-width: 0;
+    position: relative;
+    transition: opacity 0.2s ease;
+
+    &::after {
+        background: white;
+        bottom: 6px;
+        content: '';
+        display: ${({
+  $hasRightSeparator
+}) => $hasRightSeparator ? 'block' : 'none'};
+        opacity: 0.6;
+        position: absolute;
+        right: -4px;
+        top: 6px;
+        width: 2px;
+    }
+`;
+const StyledDynamicToolbarItemIconWrapper = exports.StyledDynamicToolbarItemIconWrapper = _styledComponents.default.span`
+    position: relative;
+`;
+const StyledDynamicToolbarItemBadge = exports.StyledDynamicToolbarItemBadge = _styledComponents.default.span`
+    align-items: center;
+    background-color: #e53935;
+    border-radius: 9px;
+    color: #fff;
+    display: flex;
+    font-size: 0.75rem;
+    font-weight: bold;
+    height: 18px;
+    justify-content: center;
+    left: 50%;
+    line-height: 1;
+    min-width: 18px;
+    padding: 0 0.35rem;
+    position: absolute;
+    top: -8px;
+    z-index: 1;
+`;
+const StyledMotionDynamicToolbarItemButtonBackground = exports.StyledMotionDynamicToolbarItemButtonBackground = (0, _styledComponents.default)(_react.motion.div)`
+    background: rgba(0, 0, 0, 0.15);
+    border-radius: 4px;
+    bottom: 0;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+`;
+const StyledDynamicToolbarItemLabel = exports.StyledDynamicToolbarItemLabel = _styledComponents.default.span`
+    font-size: 0.75rem;
+    width: 100%;
+`;
+//# sourceMappingURL=DynamicToolbarItemButton.styles.js.map

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarItemButton.styles.js","names":["_react","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledDynamicToolbarItemButton","exports","styled","button","$isDisabled","$isInOverflowTray","$hasRightSeparator","StyledDynamicToolbarItemIconWrapper","span","StyledDynamicToolbarItemBadge","StyledMotionDynamicToolbarItemButtonBackground","motion","div","StyledDynamicToolbarItemLabel"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-item-button/DynamicToolbarItemButton.styles.ts"],"sourcesContent":["import { WithTheme } from '@chayns-components/core';\nimport { motion } from 'motion/react';\nimport styled from 'styled-components';\n\ntype StyledDynamicToolbarItemButtonProps = WithTheme<{\n    $isDisabled: boolean;\n    $isInOverflowTray?: boolean;\n    $hasRightSeparator?: boolean;\n}>;\n\nexport const StyledDynamicToolbarItemButton = styled.button<StyledDynamicToolbarItemButtonProps>`\n    align-items: center;\n    background: transparent;\n    border: none;\n    cursor: ${({ $isDisabled }) => ($isDisabled ? 'default' : 'pointer')};\n    display: flex;\n    flex: 1 1 0;\n    flex-direction: column;\n    justify-content: space-between;\n    height: ${({ $isInOverflowTray }) => ($isInOverflowTray ? '56px' : '40px')};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    padding: 8px;\n    min-width: 0;\n    position: relative;\n    transition: opacity 0.2s ease;\n\n    &::after {\n        background: white;\n        bottom: 6px;\n        content: '';\n        display: ${({ $hasRightSeparator }) => ($hasRightSeparator ? 'block' : 'none')};\n        opacity: 0.6;\n        position: absolute;\n        right: -4px;\n        top: 6px;\n        width: 2px;\n    }\n`;\n\nexport const StyledDynamicToolbarItemIconWrapper = styled.span`\n    position: relative;\n`;\n\nexport const StyledDynamicToolbarItemBadge = styled.span`\n    align-items: center;\n    background-color: #e53935;\n    border-radius: 9px;\n    color: #fff;\n    display: flex;\n    font-size: 0.75rem;\n    font-weight: bold;\n    height: 18px;\n    justify-content: center;\n    left: 50%;\n    line-height: 1;\n    min-width: 18px;\n    padding: 0 0.35rem;\n    position: absolute;\n    top: -8px;\n    z-index: 1;\n`;\n\nexport const StyledMotionDynamicToolbarItemButtonBackground = styled(motion.div)`\n    background: rgba(0, 0, 0, 0.15);\n    border-radius: 4px;\n    bottom: 0;\n    left: 0;\n    position: absolute;\n    right: 0;\n    top: 0;\n`;\n\nexport const StyledDynamicToolbarItemLabel = styled.span`\n    font-size: 0.75rem;\n    width: 100%;\n`;\n"],"mappings":";;;;;;AACA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQhC,MAAMG,8BAA8B,GAAAC,OAAA,CAAAD,8BAAA,GAAGE,yBAAM,CAACC,MAA2C;AAChG;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAY,CAAC,KAAMA,WAAW,GAAG,SAAS,GAAG,SAAU;AACxE;AACA;AACA;AACA;AACA,cAAc,CAAC;EAAEC;AAAkB,CAAC,KAAMA,iBAAiB,GAAG,MAAM,GAAG,MAAO;AAC9E,eAAe,CAAC;EAAED;AAAY,CAAC,KAAMA,WAAW,GAAG,GAAG,GAAG,CAAE;AAC3D;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB,CAAC;EAAEE;AAAmB,CAAC,KAAMA,kBAAkB,GAAG,OAAO,GAAG,MAAO;AACtF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,mCAAmC,GAAAN,OAAA,CAAAM,mCAAA,GAAGL,yBAAM,CAACM,IAAI;AAC9D;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAR,OAAA,CAAAQ,6BAAA,GAAGP,yBAAM,CAACM,IAAI;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAME,8CAA8C,GAAAT,OAAA,CAAAS,8CAAA,GAAG,IAAAR,yBAAM,EAACS,aAAM,CAACC,GAAG,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMC,6BAA6B,GAAAZ,OAAA,CAAAY,6BAAA,GAAGX,yBAAM,CAACM,IAAI;AACxD;AACA;AACA,CAAC","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _DynamicToolbar = require("../DynamicToolbar.constants");
+var _DynamicToolbarItemButton = _interopRequireDefault(require("../dynamic-toolbar-item-button/DynamicToolbarItemButton"));
+var _DynamicToolbarOverflowTray = require("./DynamicToolbarOverflowTray.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const DynamicToolbarOverflowTray = ({
+  activeItemId,
+  handleItemSelection,
+  items,
+  isOpen
+}) => {
+  // Render overflow buttons only when the backing data changes.
+  const trayItems = (0, _react.useMemo)(() => items.map(item => /*#__PURE__*/_react.default.createElement(_DynamicToolbarItemButton.default, {
+    badgeMaxValue: _DynamicToolbar.DYNAMIC_TOOLBAR_BADGE_MAX_VALUE,
+    isActive: item.id === activeItemId,
+    isInOverflowTray: true,
+    item: item,
+    key: item.id,
+    onSelect: handleItemSelection
+  })), [items, activeItemId, handleItemSelection]);
+  return /*#__PURE__*/_react.default.createElement(_DynamicToolbarOverflowTray.StyledMotionDynamicToolbarOverflowTrayWrapper, null, /*#__PURE__*/_react.default.createElement(_DynamicToolbarOverflowTray.StyledMotionDynamicToolbarOverflowTray, {
+    animate: {
+      y: isOpen ? 0 : '100%'
+    },
+    initial: false,
+    transition: {
+      duration: 0.2,
+      ease: 'easeOut'
+    }
+  }, /*#__PURE__*/_react.default.createElement(_DynamicToolbarOverflowTray.StyledDynamicToolbarOverflowTrayItems, null, trayItems), /*#__PURE__*/_react.default.createElement(_DynamicToolbarOverflowTray.StyledMotionDynamicToolbarOverflowTraySpacer, null)));
+};
+DynamicToolbarOverflowTray.displayName = 'DynamicToolbarOverflowTray';
+var _default = exports.default = DynamicToolbarOverflowTray;
+//# sourceMappingURL=DynamicToolbarOverflowTray.js.map

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DynamicToolbarOverflowTray.js","names":["_react","_interopRequireWildcard","require","_DynamicToolbar","_DynamicToolbarItemButton","_interopRequireDefault","_DynamicToolbarOverflowTray","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","DynamicToolbarOverflowTray","activeItemId","handleItemSelection","items","isOpen","trayItems","useMemo","map","item","createElement","badgeMaxValue","DYNAMIC_TOOLBAR_BADGE_MAX_VALUE","isActive","id","isInOverflowTray","key","onSelect","StyledMotionDynamicToolbarOverflowTrayWrapper","StyledMotionDynamicToolbarOverflowTray","animate","y","initial","transition","duration","ease","StyledDynamicToolbarOverflowTrayItems","StyledMotionDynamicToolbarOverflowTraySpacer","displayName","_default","exports"],"sources":["../../../../../src/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.tsx"],"sourcesContent":["import React, { FC, useMemo } from 'react';\nimport { DYNAMIC_TOOLBAR_BADGE_MAX_VALUE } from '../DynamicToolbar.constants';\nimport DynamicToolbarItemButton from '../dynamic-toolbar-item-button/DynamicToolbarItemButton';\nimport type { DynamicToolbarItem } from '../DynamicToolbar.types';\nimport {\n    StyledDynamicToolbarOverflowTrayItems,\n    StyledMotionDynamicToolbarOverflowTray,\n    StyledMotionDynamicToolbarOverflowTraySpacer,\n    StyledMotionDynamicToolbarOverflowTrayWrapper,\n} from './DynamicToolbarOverflowTray.styles';\n\nexport type DynamicToolbarOverflowTrayProps = {\n    activeItemId?: string | null;\n    handleItemSelection: (item: DynamicToolbarItem) => void;\n    items: DynamicToolbarItem[];\n    isOpen: boolean;\n};\n\nconst DynamicToolbarOverflowTray: FC<DynamicToolbarOverflowTrayProps> = ({\n    activeItemId,\n    handleItemSelection,\n    items,\n    isOpen,\n}) => {\n    // Render overflow buttons only when the backing data changes.\n    const trayItems = useMemo(\n        () =>\n            items.map((item) => (\n                <DynamicToolbarItemButton\n                    badgeMaxValue={DYNAMIC_TOOLBAR_BADGE_MAX_VALUE}\n                    isActive={item.id === activeItemId}\n                    isInOverflowTray\n                    item={item}\n                    key={item.id}\n                    onSelect={handleItemSelection}\n                />\n            )),\n        [items, activeItemId, handleItemSelection],\n    );\n\n    return (\n        <StyledMotionDynamicToolbarOverflowTrayWrapper>\n            <StyledMotionDynamicToolbarOverflowTray\n                animate={{ y: isOpen ? 0 : '100%' }}\n                initial={false}\n                transition={{ duration: 0.2, ease: 'easeOut' }}\n            >\n                <StyledDynamicToolbarOverflowTrayItems>\n                    {trayItems}\n                </StyledDynamicToolbarOverflowTrayItems>\n                <StyledMotionDynamicToolbarOverflowTraySpacer />\n            </StyledMotionDynamicToolbarOverflowTray>\n        </StyledMotionDynamicToolbarOverflowTrayWrapper>\n    );\n};\n\nDynamicToolbarOverflowTray.displayName = 'DynamicToolbarOverflowTray';\n\nexport default DynamicToolbarOverflowTray;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/dynamic-toolbar/dynamic-toolbar-overflow-tray/DynamicToolbarOverflowTray.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionDynamicToolbarOverflowTrayWrapper = exports.StyledMotionDynamicToolbarOverflowTraySpacer = exports.StyledMotionDynamicToolbarOverflowTray = exports.StyledDynamicToolbarOverflowTrayItems = void 0;
+var _react = require("motion/react");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _DynamicToolbar = require("../DynamicToolbar.constants");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledMotionDynamicToolbarOverflowTray = exports.StyledMotionDynamicToolbarOverflowTray = (0, _styledComponents.default)(_react.motion.div)`
+    background-color: ${({
+  theme
+}) => theme['100']};
+    border-radius: 8px;
+`;
+const StyledDynamicToolbarOverflowTrayItems = exports.StyledDynamicToolbarOverflowTrayItems = _styledComponents.default.div`
+    display: flex;
+    flex-wrap: wrap;
+    gap: ${_DynamicToolbar.DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;
+    padding: ${_DynamicToolbar.DYNAMIC_TOOLBAR_CONTENT_PADDING_PX}px;
+`;
+const StyledMotionDynamicToolbarOverflowTrayWrapper = exports.StyledMotionDynamicToolbarOverflowTrayWrapper = _styledComponents.default.div`
+    position: fixed;
+    bottom: 33px;
+    width: ${_DynamicToolbar.DYNAMIC_TOOLBAR_CONTENT_WIDTH_VW}vw;
+    overflow: hidden;
+`;
+const StyledMotionDynamicToolbarOverflowTraySpacer = exports.StyledMotionDynamicToolbarOverflowTraySpacer = _styledComponents.default.div`
+    height: ${_DynamicToolbar.DYNAMIC_TOOLBAR_CONTENT_HEIGHT_PX}px;
+`;
+//# sourceMappingURL=DynamicToolbarOverflowTray.styles.js.map