entangle-ui 0.2.0 → 0.3.0

package/dist/esm/components/shell/MenuBar/MenuBar.js

@@ -0,0 +1,340 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useMemo, useCallback, createContext, useEffect, useContext, useId } from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+// --- Context ---
+const MenuBarContext = /*#__PURE__*/ createContext({
+    size: 'md',
+    menuOffset: 2,
+    openMenuId: null,
+    setOpenMenuId: () => { },
+    registerMenu: () => { },
+    unregisterMenu: () => { },
+    menuIds: [],
+});
+const useMenuBar = () => useContext(MenuBarContext);
+// --- Styled Components ---
+const StyledMenuBar = styled.div `
+  display: flex;
+  align-items: center;
+  height: ${({ $size, theme }) => $size === 'sm' ? '24px' : `${theme.shell.menuBar.height}px`};
+  background: ${({ theme }) => theme.shell.menuBar.bg};
+  color: ${({ theme }) => theme.shell.menuBar.text};
+  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
+  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
+  padding: 0 ${({ theme }) => theme.spacing.sm}px;
+  user-select: none;
+  flex-shrink: 0;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledMenuContainer = styled.div `
+  position: relative;
+  height: 100%;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledTrigger = styled.button `
+  display: inline-flex;
+  align-items: center;
+  height: 100%;
+  padding: 0 ${({ theme }) => theme.spacing.md}px;
+  border: none;
+  background: ${({ $active, theme }) => $active ? theme.shell.menuBar.activeBg : 'transparent'};
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+
+  &:hover {
+    background: ${({ $active, theme }) => $active ? theme.shell.menuBar.activeBg : theme.shell.menuBar.hoverBg};
+  }
+
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
+    outline-offset: -1px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+  }
+`;
+const StyledDropdown = styled.div `
+  position: absolute;
+  top: 100%;
+  left: 0;
+  min-width: 200px;
+  background: ${({ theme }) => theme.colors.background.elevated};
+  border: 1px solid ${({ theme }) => theme.colors.border.default};
+  border-radius: ${({ theme }) => theme.borderRadius.md}px;
+  box-shadow: ${({ theme }) => theme.shadows.lg};
+  padding: ${({ theme }) => theme.spacing.xs}px 0;
+  z-index: ${({ theme }) => theme.zIndex.dropdown};
+`;
+const StyledItem = styled.button `
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: ${({ theme }) => theme.spacing.sm}px
+    ${({ theme }) => theme.spacing.lg}px;
+  border: none;
+  background: transparent;
+  color: ${({ theme }) => theme.colors.text.primary};
+  font: inherit;
+  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
+  cursor: pointer;
+  white-space: nowrap;
+  gap: ${({ theme }) => theme.spacing.md}px;
+  text-align: left;
+
+  &:hover:not(:disabled) {
+    background: ${({ theme }) => theme.colors.surface.hover};
+  }
+
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
+    outline-offset: -1px;
+    background: ${({ theme }) => theme.colors.surface.hover};
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledShortcut = styled.span `
+  margin-left: auto;
+  color: ${({ theme }) => theme.shell.menuBar.shortcutText};
+  font-size: ${({ theme }) => theme.typography.fontSize.xs}px;
+`;
+const StyledSeparator = styled.div `
+  height: 1px;
+  margin: ${({ theme }) => theme.spacing.xs}px 0;
+  background: ${({ theme }) => theme.colors.border.default};
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledSubTrigger = styled(StyledItem) `
+  justify-content: space-between;
+`;
+const StyledSubDropdown = styled.div `
+  position: absolute;
+  top: -${({ theme }) => theme.spacing.xs}px;
+  left: 100%;
+  min-width: 180px;
+  background: ${({ theme }) => theme.colors.background.elevated};
+  border: 1px solid ${({ theme }) => theme.colors.border.default};
+  border-radius: ${({ theme }) => theme.borderRadius.md}px;
+  box-shadow: ${({ theme }) => theme.shadows.lg};
+  padding: ${({ theme }) => theme.spacing.xs}px 0;
+  z-index: ${({ theme }) => theme.zIndex.dropdown + 1};
+`;
+const StyledSubContainer = styled.div `
+  position: relative;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const SUBMENU_CLOSE_DELAY = 150;
+const MENU_ITEM_SELECTOR = '[role="menuitem"]:not(:disabled)';
+const ChevronRight = () => (jsx("span", { style: {
+        fontSize: '8px',
+        lineHeight: 1,
+    }, children: "\u25B6" }));
+// --- Sub-components ---
+const MenuBarItem = ({ onClick, shortcut, disabled = false, icon, children, className, style, testId, css, ref, ...rest }) => {
+    const { setOpenMenuId } = useMenuBar();
+    const handleClick = useCallback(() => {
+        if (onClick) {
+            onClick();
+            setOpenMenuId(null);
+        }
+    }, [onClick, setOpenMenuId]);
+    return (jsxs(StyledItem, { role: "menuitem", onClick: handleClick, disabled: disabled, className: className, style: style, "data-testid": testId, "$css": css, ref: ref, type: "button", tabIndex: -1, ...rest, children: [icon && jsx("span", { children: icon }), jsx("span", { children: children }), shortcut && jsx(StyledShortcut, { children: shortcut })] }));
+};
+MenuBarItem.displayName = 'MenuBar.Item';
+const MenuBarSub = ({ label, children, disabled = false, className, style, testId, css, ref, ...rest }) => {
+    const [open, setOpen] = useState(false);
+    const closeTimer = useRef(null);
+    const handleEnter = useCallback(() => {
+        if (closeTimer.current) {
+            clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+        if (!disabled)
+            setOpen(true);
+    }, [disabled]);
+    const handleLeave = useCallback(() => {
+        closeTimer.current = setTimeout(() => setOpen(false), SUBMENU_CLOSE_DELAY);
+    }, []);
+    useEffect(() => {
+        return () => {
+            if (closeTimer.current)
+                clearTimeout(closeTimer.current);
+        };
+    }, []);
+    return (jsxs(StyledSubContainer, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, onMouseEnter: handleEnter, onMouseLeave: handleLeave, ...rest, children: [jsxs(StyledSubTrigger, { role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, disabled: disabled, type: "button", tabIndex: -1, "$css": css, children: [jsx("span", { children: label }), jsx(ChevronRight, {})] }), open && jsx(StyledSubDropdown, { role: "menu", children: children })] }));
+};
+MenuBarSub.displayName = 'MenuBar.Sub';
+const MenuBarSeparator = ({ className, style, testId, css, ref, ...rest }) => {
+    return (jsx(StyledSeparator, { role: "separator", className: className, style: style, "data-testid": testId, "$css": css, ref: ref, ...rest }));
+};
+MenuBarSeparator.displayName = 'MenuBar.Separator';
+// --- MenuBarMenu (top-level dropdown trigger) ---
+const MenuBarMenu = ({ label, children, disabled = false, className, style, testId, css, ref, ...rest }) => {
+    const menuId = useId();
+    const { openMenuId, setOpenMenuId, registerMenu, unregisterMenu, menuOffset, } = useMenuBar();
+    const triggerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const isOpen = openMenuId === menuId;
+    useEffect(() => {
+        registerMenu(menuId);
+        return () => unregisterMenu(menuId);
+    }, [menuId, registerMenu, unregisterMenu]);
+    const handleClick = useCallback(() => {
+        if (disabled)
+            return;
+        setOpenMenuId(isOpen ? null : menuId);
+    }, [disabled, isOpen, menuId, setOpenMenuId]);
+    const handleMouseEnter = useCallback(() => {
+        // Open on hover only when another menu is already open
+        if (openMenuId !== null && openMenuId !== menuId && !disabled) {
+            setOpenMenuId(menuId);
+        }
+    }, [openMenuId, menuId, disabled, setOpenMenuId]);
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'ArrowDown' || e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setOpenMenuId(menuId);
+            // Focus first item in dropdown after open
+            setTimeout(() => {
+                const firstItem = dropdownRef.current?.querySelector(MENU_ITEM_SELECTOR);
+                firstItem?.focus();
+            }, 0);
+        }
+        if (e.key === 'Escape') {
+            e.preventDefault();
+            setOpenMenuId(null);
+            triggerRef.current?.focus();
+        }
+    }, [menuId, setOpenMenuId]);
+    const handleDropdownKeyDown = useCallback((e) => {
+        const items = Array.from(dropdownRef.current?.querySelectorAll(MENU_ITEM_SELECTOR) ?? []);
+        const currentIndex = items.indexOf(document.activeElement);
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            const next = currentIndex + 1 < items.length ? currentIndex + 1 : 0;
+            items[next]?.focus();
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            const prev = currentIndex - 1 >= 0 ? currentIndex - 1 : items.length - 1;
+            items[prev]?.focus();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            setOpenMenuId(null);
+            triggerRef.current?.focus();
+        }
+    }, [setOpenMenuId]);
+    // Close dropdown when clicking outside
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleOutsideClick = (e) => {
+            const target = e.target;
+            if (!triggerRef.current?.contains(target) &&
+                !dropdownRef.current?.contains(target)) {
+                setOpenMenuId(null);
+            }
+        };
+        document.addEventListener('mousedown', handleOutsideClick);
+        return () => document.removeEventListener('mousedown', handleOutsideClick);
+    }, [isOpen, setOpenMenuId]);
+    return (jsxs(StyledMenuContainer, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: [jsx(StyledTrigger, { ref: triggerRef, "$active": isOpen, onClick: handleClick, onMouseEnter: handleMouseEnter, onKeyDown: handleKeyDown, disabled: disabled, type: "button", role: "menuitem", "aria-haspopup": "true", "aria-expanded": isOpen, tabIndex: -1, children: label }), isOpen && (jsx(StyledDropdown, { ref: dropdownRef, role: "menu", "aria-label": label, onKeyDown: handleDropdownKeyDown, style: { top: `calc(100% + ${menuOffset}px)` }, children: children }))] }));
+};
+MenuBarMenu.displayName = 'MenuBar.Menu';
+// --- Root Component ---
+const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style, testId, css, ref: externalRef, ...rest }) => {
+    const [openMenuId, setOpenMenuId] = useState(null);
+    const menuIdsRef = useRef([]);
+    const safeMenuOffset = Math.max(0, menuOffset);
+    const [, forceUpdate] = useState(0);
+    const barRef = useRef(null);
+    const setBarRef = useMemo(() => (node) => {
+        barRef.current = node;
+        if (typeof externalRef === 'function') {
+            externalRef(node);
+        }
+        else if (externalRef && typeof externalRef === 'object') {
+            externalRef.current =
+                node;
+        }
+    }, [externalRef]);
+    const registerMenu = useCallback((id) => {
+        if (!menuIdsRef.current.includes(id)) {
+            menuIdsRef.current = [...menuIdsRef.current, id];
+            forceUpdate(c => c + 1);
+        }
+    }, []);
+    const unregisterMenu = useCallback((id) => {
+        menuIdsRef.current = menuIdsRef.current.filter(m => m !== id);
+        forceUpdate(c => c + 1);
+    }, []);
+    const handleBarKeyDown = useCallback((e) => {
+        if (!barRef.current)
+            return;
+        const triggers = Array.from(barRef.current.querySelectorAll(':scope > div > [role="menuitem"]'));
+        const currentIndex = triggers.indexOf(document.activeElement);
+        if (e.key === 'ArrowRight') {
+            e.preventDefault();
+            const next = currentIndex + 1 < triggers.length ? currentIndex + 1 : 0;
+            triggers[next]?.focus();
+            // If menu is open, switch to next menu
+            if (openMenuId !== null) {
+                // Get the menu id from the trigger's parent — let the hover handler do its job
+                triggers[next]?.click();
+            }
+        }
+        else if (e.key === 'ArrowLeft') {
+            e.preventDefault();
+            const prev = currentIndex - 1 >= 0 ? currentIndex - 1 : triggers.length - 1;
+            triggers[prev]?.focus();
+            if (openMenuId !== null) {
+                triggers[prev]?.click();
+            }
+        }
+    }, [openMenuId]);
+    const contextValue = useMemo(() => ({
+        size: $size,
+        menuOffset: safeMenuOffset,
+        openMenuId,
+        setOpenMenuId,
+        registerMenu,
+        unregisterMenu,
+        menuIds: menuIdsRef.current,
+    }), [
+        $size,
+        safeMenuOffset,
+        openMenuId,
+        setOpenMenuId,
+        registerMenu,
+        unregisterMenu,
+    ]);
+    return (jsx(MenuBarContext.Provider, { value: contextValue, children: jsx(StyledMenuBar, { ref: setBarRef, "$size": $size, className: className, style: style, "data-testid": testId, "$css": css, role: "menubar", onKeyDown: handleBarKeyDown, tabIndex: 0, ...rest, children: children }) }));
+};
+MenuBarRoot.displayName = 'MenuBar';
+// --- Compound Component ---
+const MenuBar = /*#__PURE__*/ Object.assign(MenuBarRoot, {
+    Menu: MenuBarMenu,
+    Item: MenuBarItem,
+    Sub: MenuBarSub,
+    Separator: MenuBarSeparator,
+});
+
+export { MenuBar };
+//# sourceMappingURL=MenuBar.js.map

package/dist/esm/components/shell/MenuBar/MenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MenuBar.js","sources":["../../../../../../src/components/shell/MenuBar/MenuBar.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;AAuBA;AAEA,MAAM,cAAc,iBAAiB,aAAa,CAAsB;AACtE,IAAA,IAAI,EAAE,IAAI;AACV,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,UAAU,EAAE,IAAI;AAChB,IAAA,aAAa,EAAE,MAAK,GAAG;AACvB,IAAA,YAAY,EAAE,MAAK,GAAG;AACtB,IAAA,cAAc,EAAE,MAAK,GAAG;AACxB,IAAA,OAAO,EAAE,EAAE;AACZ,CAAA,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,UAAU,CAAC,cAAc,CAAC;AAEnD;AAEA,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAG9B;;;YAGU,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,KACzB,KAAK,KAAK,IAAI,GAAG,MAAM,GAAG,CAAG,EAAA,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAI,EAAA,CAAA,CAAA;AAC/C,cAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;AAC1C,SAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAA;AACnC,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;AACzC,eAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,UAAU,CAAC,IAAI,CAAA;eACjD,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;;AAI1C,EAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;CAC/C;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAoC;;;;AAItE,EAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;CAC/C;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAsB;;;;eAI1C,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;gBAE9B,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAC/B,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,GAAG,aAAa,CAAA;;;;;;;;AAQxC,gBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAC/B,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAA;;;;AAIjD,uBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQhE;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;AAKjB,cAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAA;AACzC,oBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;mBAC7C,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;gBACvC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAClC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAC/B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAA;CAChD;AAED,MAAM,UAAU,GAAG,MAAM,CAAC,MAAM,CAE9B;;;;aAIW,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;MACtC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;AAG1B,SAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAA;;AAEpC,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;;;SAGjD,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;;AAItB,gBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;;;;AAIlC,uBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAA;;AAE/C,gBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,KAAK,CAAA;;;;;;;;AAQvD,EAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;CAC/C;AAED,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAA;;AAEvB,SAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAA;AAC3C,aAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAA;CACzD;AAED,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAyC;;YAE/D,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;AAC3B,cAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;;AAEtD,EAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;CAC/C;AAED,MAAM,gBAAgB,GAAG,MAAM,CAAC,UAAU,CAAC,CAAA;;CAE1C;AAED,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;UAE1B,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;;;AAGzB,cAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,QAAQ,CAAA;AACzC,oBAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,CAAA;mBAC7C,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,YAAY,CAAC,EAAE,CAAA;gBACvC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;aAClC,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,OAAO,CAAC,EAAE,CAAA;AAC/B,WAAA,EAAA,CAAC,EAAE,KAAK,EAAE,KAAK,KAAK,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC,CAAA;CACpD;AAED,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAmC;;;AAGpE,EAAA,EAAA,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,UAAU,CAAC,IAAI,EAAE,KAAK,CAAC;CAC/C;AAED,MAAM,mBAAmB,GAAG,GAAG;AAE/B,MAAM,kBAAkB,GAAG,kCAAkC;AAE7D,MAAM,YAAY,GAAG,OACnBA,GAAA,CAAA,MAAA,EAAA,EACE,KAAK,EAAE;AACL,QAAA,QAAQ,EAAE,KAAK;AACf,QAAA,UAAU,EAAE,CAAC;AACd,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,CAGI,CACR;AAED;AAEA,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,EAAE,aAAa,EAAE,GAAG,UAAU,EAAE;AAEtC,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;QACnC,IAAI,OAAO,EAAE;AACX,YAAA,OAAO,EAAE;YACT,aAAa,CAAC,IAAI,CAAC;;AAEvB,KAAC,EAAE,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;AAE5B,IAAA,QACEC,IAAA,CAAC,UAAU,EAAA,EACT,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,WAAW,EACpB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EAAA,MAAA,EACb,GAAG,EACT,GAAG,EAAE,GAAG,EACR,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,EAAE,EAAA,GACR,IAAI,EAAA,QAAA,EAAA,CAEP,IAAI,IAAID,GAAO,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,IAAI,EAAQ,CAAA,EAC5BA,GAAO,CAAA,MAAA,EAAA,EAAA,QAAA,EAAA,QAAQ,EAAQ,CAAA,EACtB,QAAQ,IAAIA,GAAC,CAAA,cAAc,EAAE,EAAA,QAAA,EAAA,QAAQ,EAAkB,CAAA,CAAA,EAAA,CAC7C;AAEjB,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,cAAc;AAExC,MAAM,UAAU,GAA8B,CAAC,EAC7C,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACvC,IAAA,MAAM,UAAU,GAAG,MAAM,CAAuC,IAAI,CAAC;AAErE,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,IAAI,UAAU,CAAC,OAAO,EAAE;AACtB,YAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC;AAChC,YAAA,UAAU,CAAC,OAAO,GAAG,IAAI;;AAE3B,QAAA,IAAI,CAAC,QAAQ;YAAE,OAAO,CAAC,IAAI,CAAC;AAC9B,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC;AAEd,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,MAAM,OAAO,CAAC,KAAK,CAAC,EAAE,mBAAmB,CAAC;KAC3E,EAAE,EAAE,CAAC;IAEN,SAAS,CAAC,MAAK;AACb,QAAA,OAAO,MAAK;YACV,IAAI,UAAU,CAAC,OAAO;AAAE,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC;AAC1D,SAAC;KACF,EAAE,EAAE,CAAC;AAEN,IAAA,QACEC,IAAC,CAAA,kBAAkB,EACjB,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,iBACC,MAAM,EAAA,MAAA,EACb,GAAG,EACT,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW,EAAA,GACrB,IAAI,EAAA,QAAA,EAAA,CAERA,KAAC,gBAAgB,EAAA,EACf,IAAI,EAAC,UAAU,mBACD,MAAM,EAAA,eAAA,EACL,IAAI,EACnB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,EAAE,EAAA,MAAA,EACN,GAAG,EAAA,QAAA,EAAA,CAETD,wBAAO,KAAK,EAAA,CAAQ,EACpBA,GAAA,CAAC,YAAY,EAAG,EAAA,CAAA,CAAA,EAAA,CACC,EAClB,IAAI,IAAIA,GAAC,CAAA,iBAAiB,EAAC,EAAA,IAAI,EAAC,MAAM,EAAA,QAAA,EAAE,QAAQ,EAAqB,CAAA,CAAA,EAAA,CACnD;AAEzB,CAAC;AAED,UAAU,CAAC,WAAW,GAAG,aAAa;AAEtC,MAAM,gBAAgB,GAAoC,CAAC,EACzD,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;IACH,QACEA,GAAC,CAAA,eAAe,EACd,EAAA,IAAI,EAAC,WAAW,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACC,aAAA,EAAA,MAAM,EACb,MAAA,EAAA,GAAG,EACT,GAAG,EAAE,GAAG,EACJ,GAAA,IAAI,EACR,CAAA;AAEN,CAAC;AAED,gBAAgB,CAAC,WAAW,GAAG,mBAAmB;AAElD;AAEA,MAAM,WAAW,GAA+B,CAAC,EAC/C,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EACH,GAAG,IAAI,EACR,KAAI;AACH,IAAA,MAAM,MAAM,GAAG,KAAK,EAAE;AACtB,IAAA,MAAM,EACJ,UAAU,EACV,aAAa,EACb,YAAY,EACZ,cAAc,EACd,UAAU,GACX,GAAG,UAAU,EAAE;AAChB,IAAA,MAAM,UAAU,GAAG,MAAM,CAAoB,IAAI,CAAC;AAClD,IAAA,MAAM,WAAW,GAAG,MAAM,CAAiB,IAAI,CAAC;AAChD,IAAA,MAAM,MAAM,GAAG,UAAU,KAAK,MAAM;IAEpC,SAAS,CAAC,MAAK;QACb,YAAY,CAAC,MAAM,CAAC;AACpB,QAAA,OAAO,MAAM,cAAc,CAAC,MAAM,CAAC;KACpC,EAAE,CAAC,MAAM,EAAE,YAAY,EAAE,cAAc,CAAC,CAAC;AAE1C,IAAA,MAAM,WAAW,GAAG,WAAW,CAAC,MAAK;AACnC,QAAA,IAAI,QAAQ;YAAE;QACd,aAAa,CAAC,MAAM,GAAG,IAAI,GAAG,MAAM,CAAC;KACtC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,MAAM,EAAE,aAAa,CAAC,CAAC;AAE7C,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAK;;QAExC,IAAI,UAAU,KAAK,IAAI,IAAI,UAAU,KAAK,MAAM,IAAI,CAAC,QAAQ,EAAE;YAC7D,aAAa,CAAC,MAAM,CAAC;;KAExB,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,aAAa,CAAC,CAAC;AAEjD,IAAA,MAAM,aAAa,GAAG,WAAW,CAC/B,CAAC,CAAmC,KAAI;AACtC,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE;YAC/D,CAAC,CAAC,cAAc,EAAE;YAClB,aAAa,CAAC,MAAM,CAAC;;YAErB,UAAU,CAAC,MAAK;gBACd,MAAM,SAAS,GAAG,WAAW,CAAC,OAAO,EAAE,aAAa,CAClD,kBAAkB,CACG;gBACvB,SAAS,EAAE,KAAK,EAAE;aACnB,EAAE,CAAC,CAAC;;AAEP,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YACtB,CAAC,CAAC,cAAc,EAAE;YAClB,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE;;AAE/B,KAAC,EACD,CAAC,MAAM,EAAE,aAAa,CAAC,CACxB;AAED,IAAA,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,CAAgC,KAAI;AACnC,QAAA,MAAM,KAAK,GAAG,KAAK,CAAC,IAAI,CACtB,WAAW,CAAC,OAAO,EAAE,gBAAgB,CACnC,kBAAkB,CACnB,IAAI,EAAE,CACR;QACD,MAAM,YAAY,GAAG,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,aAA4B,CAAC;AAEzE,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YACzB,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AACnE,YAAA,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE;;AACf,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,EAAE;YAC9B,CAAC,CAAC,cAAc,EAAE;YAClB,MAAM,IAAI,GACR,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,KAAK,CAAC,MAAM,GAAG,CAAC;AAC7D,YAAA,KAAK,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE;;AACf,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,EAAE;YAC7B,CAAC,CAAC,cAAc,EAAE;YAClB,aAAa,CAAC,IAAI,CAAC;AACnB,YAAA,UAAU,CAAC,OAAO,EAAE,KAAK,EAAE;;AAE/B,KAAC,EACD,CAAC,aAAa,CAAC,CAChB;;IAGD,SAAS,CAAC,MAAK;AACb,QAAA,IAAI,CAAC,MAAM;YAAE;AAEb,QAAA,MAAM,kBAAkB,GAAG,CAAC,CAAa,KAAI;AAC3C,YAAA,MAAM,MAAM,GAAG,CAAC,CAAC,MAAc;YAC/B,IACE,CAAC,UAAU,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC;gBACrC,CAAC,WAAW,CAAC,OAAO,EAAE,QAAQ,CAAC,MAAM,CAAC,EACtC;gBACA,aAAa,CAAC,IAAI,CAAC;;AAEvB,SAAC;AAED,QAAA,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC;QAC1D,OAAO,MAAM,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC;AAC5E,KAAC,EAAE,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAE3B,QACEC,KAAC,mBAAmB,EAAA,EAClB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EACC,aAAA,EAAA,MAAM,UACb,GAAG,EAAA,GACL,IAAI,EAAA,QAAA,EAAA,CAERD,GAAC,CAAA,aAAa,IACZ,GAAG,EAAE,UAAU,EACN,SAAA,EAAA,MAAM,EACf,OAAO,EAAE,WAAW,EACpB,YAAY,EAAE,gBAAgB,EAC9B,SAAS,EAAE,aAAa,EACxB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,UAAU,mBACD,MAAM,EAAA,eAAA,EACL,MAAM,EACrB,QAAQ,EAAE,EAAE,EAAA,QAAA,EAEX,KAAK,EACQ,CAAA,EACf,MAAM,KACLA,IAAC,cAAc,EAAA,EACb,GAAG,EAAE,WAAW,EAChB,IAAI,EAAC,MAAM,gBACC,KAAK,EACjB,SAAS,EAAE,qBAAqB,EAChC,KAAK,EAAE,EAAE,GAAG,EAAE,CAAA,YAAA,EAAe,UAAU,CAAA,GAAA,CAAK,EAAE,EAAA,QAAA,EAE7C,QAAQ,EACM,CAAA,CAClB,CACmB,EAAA,CAAA;AAE1B,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,cAAc;AAExC;AAEA,MAAM,WAAW,GAA2B,CAAC,EAC3C,KAAK,GAAG,IAAI,EACZ,UAAU,GAAG,CAAC,EACd,QAAQ,EACR,SAAS,EACT,KAAK,EACL,MAAM,EACN,GAAG,EACH,GAAG,EAAE,WAAW,EAChB,GAAG,IAAI,EACR,KAAI;IACH,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAgB,IAAI,CAAC;AACjE,IAAA,MAAM,UAAU,GAAG,MAAM,CAAW,EAAE,CAAC;IACvC,MAAM,cAAc,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,UAAU,CAAC;IAC9C,MAAM,GAAG,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC;AACnC,IAAA,MAAM,MAAM,GAAG,MAAM,CAAiB,IAAI,CAAC;IAC3C,MAAM,SAAS,GAAG,OAAO,CACvB,MAAM,CAAC,IAA2B,KAAI;AACpC,QAAA,MAAM,CAAC,OAAO,GAAG,IAAI;AACrB,QAAA,IAAI,OAAO,WAAW,KAAK,UAAU,EAAE;YACrC,WAAW,CAAC,IAAI,CAAC;;AACZ,aAAA,IAAI,WAAW,IAAI,OAAO,WAAW,KAAK,QAAQ,EAAE;AACxD,YAAA,WAA6D,CAAC,OAAO;AACpE,gBAAA,IAAI;;AAEV,KAAC,EACD,CAAC,WAAW,CAAC,CACd;AAED,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,EAAU,KAAI;QAC9C,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,EAAE;YACpC,UAAU,CAAC,OAAO,GAAG,CAAC,GAAG,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC;YAChD,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;;KAE1B,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,CAAC,EAAU,KAAI;AAChD,QAAA,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;QAC7D,WAAW,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACxB,EAAE,EAAE,CAAC;AAEN,IAAA,MAAM,gBAAgB,GAAG,WAAW,CAClC,CAAC,CAAgC,KAAI;QACnC,IAAI,CAAC,MAAM,CAAC,OAAO;YAAE;AAErB,QAAA,MAAM,QAAQ,GAAG,KAAK,CAAC,IAAI,CACzB,MAAM,CAAC,OAAO,CAAC,gBAAgB,CAC7B,kCAAkC,CACnC,CACF;QACD,MAAM,YAAY,GAAG,QAAQ,CAAC,OAAO,CACnC,QAAQ,CAAC,aAA4B,CACtC;AAED,QAAA,IAAI,CAAC,CAAC,GAAG,KAAK,YAAY,EAAE;YAC1B,CAAC,CAAC,cAAc,EAAE;AAClB,YAAA,MAAM,IAAI,GAAG,YAAY,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,YAAY,GAAG,CAAC,GAAG,CAAC;AACtE,YAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE;;AAEvB,YAAA,IAAI,UAAU,KAAK,IAAI,EAAE;;AAEvB,gBAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE;;;AAEpB,aAAA,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,EAAE;YAChC,CAAC,CAAC,cAAc,EAAE;YAClB,MAAM,IAAI,GACR,YAAY,GAAG,CAAC,IAAI,CAAC,GAAG,YAAY,GAAG,CAAC,GAAG,QAAQ,CAAC,MAAM,GAAG,CAAC;AAChE,YAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE;AACvB,YAAA,IAAI,UAAU,KAAK,IAAI,EAAE;AACvB,gBAAA,QAAQ,CAAC,IAAI,CAAC,EAAE,KAAK,EAAE;;;AAG7B,KAAC,EACD,CAAC,UAAU,CAAC,CACb;AAED,IAAA,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO;AACL,QAAA,IAAI,EAAE,KAAK;AACX,QAAA,UAAU,EAAE,cAAc;QAC1B,UAAU;QACV,aAAa;QACb,YAAY;QACZ,cAAc;QACd,OAAO,EAAE,UAAU,CAAC,OAAO;AAC5B,KAAA,CAAC,EACF;QACE,KAAK;QACL,cAAc;QACd,UAAU;QACV,aAAa;QACb,YAAY;QACZ,cAAc;AACf,KAAA,CACF;IAED,QACEA,IAAC,cAAc,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,YAAY,EAC1C,QAAA,EAAAA,GAAA,CAAC,aAAa,EACZ,EAAA,GAAG,EAAE,SAAS,EAAA,OAAA,EACP,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,KAAK,EAAA,aAAA,EACC,MAAM,EACb,MAAA,EAAA,GAAG,EACT,IAAI,EAAC,SAAS,EACd,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,CAAC,EACP,GAAA,IAAI,YAEP,QAAQ,EAAA,CACK,EACQ,CAAA;AAE9B,CAAC;AAED,WAAW,CAAC,WAAW,GAAG,SAAS;AAEnC;AAEa,MAAA,OAAO,iBAAiB,MAAM,CAAC,MAAM,CAAC,WAAW,EAAE;AAC9D,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,IAAI,EAAE,WAAW;AACjB,IAAA,GAAG,EAAE,UAAU;AACf,IAAA,SAAS,EAAE,gBAAgB;AAC5B,CAAA;;;;"}

package/dist/esm/components/shell/StatusBar/StatusBar.js

@@ -0,0 +1,134 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useContext, createContext, useMemo } from 'react';
+import styled from '@emotion/styled';
+import { processCss } from '../../../utils/styledUtils.js';
+
+const StatusBarContext = /*#__PURE__*/ createContext({
+    size: 'sm',
+});
+const useStatusBar = () => useContext(StatusBarContext);
+// --- Styled Components ---
+const StyledStatusBar = styled.div `
+  display: flex;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  height: ${({ $size, theme }) => $size === 'sm' ? `${theme.shell.statusBar.height}px` : '26px'};
+  background: ${({ $variant, theme }) => {
+    switch ($variant) {
+        case 'error':
+            return theme.colors.accent.error;
+        case 'accent':
+            return theme.shell.statusBar.bg;
+        default:
+            return theme.shell.statusBar.bg;
+    }
+}};
+  color: ${({ theme }) => theme.shell.statusBar.text};
+  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
+  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
+  padding: 0 ${({ theme }) => theme.spacing.md}px;
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledSection = styled.div `
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => theme.spacing.sm}px;
+  flex: ${({ $side }) => ($side === 'left' ? '1 1 auto' : '0 0 auto')};
+  justify-content: ${({ $side }) => $side === 'left' ? 'flex-start' : 'flex-end'};
+  overflow: hidden;
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const itemStyles = (props) => `
+  display: inline-flex;
+  align-items: center;
+  gap: ${props.theme.spacing.sm}px;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  padding: 0 ${props.theme.spacing.sm}px;
+  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: 1;
+  position: relative;
+`;
+const StyledItemButton = styled.button `
+  ${props => itemStyles(props)}
+  cursor: pointer;
+  border-radius: ${({ theme }) => theme.borderRadius.sm}px;
+
+  &:hover {
+    background: ${({ theme }) => theme.colors.surface.whiteOverlay};
+  }
+
+  &:focus-visible {
+    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
+    outline-offset: -1px;
+  }
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: default;
+    &:hover {
+      background: transparent;
+    }
+  }
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledItemSpan = styled.span `
+  ${props => itemStyles(props)}
+
+  ${({ $css, theme }) => processCss($css, theme)}
+`;
+const StyledBadge = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: ${({ $dot }) => ($dot ? '6px' : '14px')};
+  height: ${({ $dot }) => ($dot ? '6px' : '14px')};
+  border-radius: ${({ $dot }) => ($dot ? '50%' : '7px')};
+  background: ${({ theme }) => theme.colors.accent.warning};
+  color: ${({ theme }) => theme.colors.text.primary};
+  font-size: ${({ theme }) => theme.typography.fontSize.xxs}px;
+  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
+  padding: ${({ $dot }) => ($dot ? '0' : '0 3px')};
+  line-height: 1;
+`;
+// --- Sub-components ---
+const StatusBarSection = /*#__PURE__*/ React.memo(({ $side = 'left', children, className, style, testId, css, ref, ...rest }) => {
+    return (jsx(StyledSection, { ref: ref, "$side": $side, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: children }));
+});
+StatusBarSection.displayName = 'StatusBar.Section';
+const StatusBarItem = /*#__PURE__*/ React.memo(({ onClick, icon, children, title, badge, disabled = false, className, style, testId, css, ref, ...rest }) => {
+    useStatusBar();
+    const content = (jsxs(Fragment, { children: [icon, children && jsx("span", { children: children }), badge !== undefined && badge !== false && (jsx(StyledBadge, { "$dot": badge === true, children: typeof badge === 'number' ? badge : null }))] }));
+    if (onClick) {
+        return (jsx(StyledItemButton, { onClick: onClick, title: title, disabled: disabled, className: className, style: style, "data-testid": testId, "$css": css, ref: ref, type: "button", ...rest, children: content }));
+    }
+    return (jsx(StyledItemSpan, { title: title, className: className, style: style, "data-testid": testId, "$css": css, ref: ref, ...rest, children: content }));
+});
+StatusBarItem.displayName = 'StatusBar.Item';
+// --- Root Component ---
+const StatusBarRoot = ({ $size = 'sm', $variant = 'default', children, className, style, testId, css, ref, ...rest }) => {
+    const contextValue = useMemo(() => ({ size: $size }), [$size]);
+    return (jsx(StatusBarContext.Provider, { value: contextValue, children: jsx(StyledStatusBar, { ref: ref, "$variant": $variant, "$size": $size, className: className, style: style, "data-testid": testId, "$css": css, role: "status", "aria-live": "polite", ...rest, children: children }) }));
+};
+StatusBarRoot.displayName = 'StatusBar';
+// --- Compound Component ---
+const StatusBar = /*#__PURE__*/ Object.assign(StatusBarRoot, {
+    Section: StatusBarSection,
+    Item: StatusBarItem,
+});
+
+export { StatusBar };
+//# sourceMappingURL=StatusBar.js.map

package/dist/esm/components/shell/StatusBar/StatusBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.js","sources":["../../../../../../src/components/shell/StatusBar/StatusBar.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs","_Fragment"],"mappings":"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"}