entangle-ui 0.3.0 → 0.5.0

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

@@ -1,8 +1,8 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useContext, createContext, useState, useCallback, useMemo } from 'react';
-import styled from '@emotion/styled';
-import { useTheme, Global, css } from '@emotion/react';
-import { processCss } from '../../../utils/styledUtils.js';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useContext, useState, useCallback, useMemo, createContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { viewportLockClass, shellRoot, statusBarSlot, dockSlot, toolbarTopSlot, sideToolbarSlot, menuBarSlot } from './AppShell.css.js';
 
 // --- Context ---
 const AppShellContext = /*#__PURE__*/ createContext({
@@ -12,116 +12,31 @@ const AppShellContext = /*#__PURE__*/ createContext({
     sideChromeSeparator: 'border',
 });
 const useAppShell = () => useContext(AppShellContext);
-const StyledAppShell = styled.div `
-  display: grid;
-  grid-template-rows: auto auto 1fr auto;
-  grid-template-columns: auto 1fr auto;
-  grid-template-areas:
-    'menubar menubar menubar'
-    'toolbar-top toolbar-top toolbar-top'
-    'toolbar-left dock toolbar-right'
-    'statusbar statusbar statusbar';
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  background: ${({ theme }) => theme.colors.background.primary};
-  color: ${({ theme }) => theme.colors.text.primary};
-  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledMenuBarSlot = styled.header `
-  grid-area: menubar;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledToolbarTopSlot = styled.div `
-  grid-area: toolbar-top;
-  border-bottom: ${({ $topChromeSeparator, theme }) => $topChromeSeparator === 'border' || $topChromeSeparator === 'both'
-    ? `1px solid ${theme.colors.border.default}`
-    : 'none'};
-  box-shadow: ${({ $topChromeSeparator, theme }) => $topChromeSeparator === 'shadow' || $topChromeSeparator === 'both'
-    ? theme.shadows.separatorBottom
-    : 'none'};
-  z-index: ${({ theme }) => theme.zIndex.base};
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledSideToolbarSlot = styled.aside `
-  grid-area: ${({ $side }) => `toolbar-${$side}`};
-  min-width: 0;
-  min-height: 0;
-  overflow: hidden;
-  border-right: ${({ $side, $sideChromeSeparator, theme }) => $side === 'left' &&
-    ($sideChromeSeparator === 'border' || $sideChromeSeparator === 'both')
-    ? `1px solid ${theme.colors.border.default}`
-    : 'none'};
-  border-left: ${({ $side, $sideChromeSeparator, theme }) => $side === 'right' &&
-    ($sideChromeSeparator === 'border' || $sideChromeSeparator === 'both')
-    ? `1px solid ${theme.colors.border.default}`
-    : 'none'};
-  box-shadow: ${({ $side, $sideChromeSeparator, theme }) => {
-    if ($sideChromeSeparator !== 'shadow' && $sideChromeSeparator !== 'both')
-        return 'none';
-    return $side === 'left'
-        ? theme.shadows.separatorRight
-        : theme.shadows.separatorLeft;
-}};
-  z-index: ${({ theme }) => theme.zIndex.base};
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledDockSlot = styled.main `
-  grid-area: dock;
-  position: relative;
-  overflow: hidden;
-  min-width: 0;
-  min-height: 0;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledStatusBarSlot = styled.footer `
-  grid-area: statusbar;
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
 // --- Slot Components ---
-const MenuBarSlot = ({ children, className, style, testId, css, ref, ...rest }) => (jsx(StyledMenuBarSlot, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: children }));
+const MenuBarSlot = ({ children, className, style, testId, ref, ...rest }) => (jsx("header", { ref: ref, className: cx(menuBarSlot, className), style: style, "data-testid": testId, ...rest, children: children }));
 MenuBarSlot.displayName = 'AppShell.MenuBar';
-const ToolbarSlot = ({ children, className, style, testId, css, ref, position = 'top', ...rest }) => {
+const ToolbarSlot = ({ children, className, style, testId, ref, position = 'top', ...rest }) => {
     const { isToolbarVisible, topChromeSeparator, sideChromeSeparator } = useAppShell();
     if (!isToolbarVisible(position))
         return null;
     switch (position) {
         case 'left':
         case 'right':
-            return (jsx(StyledSideToolbarSlot, { ref: ref, className: className, style: style, "data-testid": testId, "$side": position, "$sideChromeSeparator": sideChromeSeparator, "$css": css, ...rest, children: children }));
+            return (jsx("aside", { ref: ref, className: cx(sideToolbarSlot({
+                    side: position,
+                    separator: sideChromeSeparator,
+                }), className), style: style, "data-testid": testId, ...rest, children: children }));
         default:
-            return (jsx(StyledToolbarTopSlot, { ref: ref, className: className, style: style, "data-testid": testId, "$topChromeSeparator": topChromeSeparator, "$css": css, ...rest, children: children }));
+            return (jsx("div", { ref: ref, className: cx(toolbarTopSlot({ separator: topChromeSeparator }), className), style: style, "data-testid": testId, ...rest, children: children }));
     }
 };
 ToolbarSlot.displayName = 'AppShell.Toolbar';
-const DockSlot = ({ children, className, style, testId, css, ref, ...rest }) => (jsx(StyledDockSlot, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: children }));
+const DockSlot = ({ children, className, style, testId, ref, ...rest }) => (jsx("main", { ref: ref, className: cx(dockSlot, className), style: style, "data-testid": testId, ...rest, children: children }));
 DockSlot.displayName = 'AppShell.Dock';
-const StatusBarSlot = ({ children, className, style, testId, css, ref, ...rest }) => (jsx(StyledStatusBarSlot, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, ...rest, children: children }));
+const StatusBarSlot = ({ children, className, style, testId, ref, ...rest }) => (jsx("footer", { ref: ref, className: cx(statusBarSlot, className), style: style, "data-testid": testId, ...rest, children: children }));
 StatusBarSlot.displayName = 'AppShell.StatusBar';
-// --- Viewport Lock Styles ---
-const ViewportLockStyles = () => {
-    const theme = useTheme();
-    return (jsx(Global, { styles: css `
-        html,
-        body {
-          margin: 0;
-          padding: 0;
-          overflow: hidden;
-          width: 100vw;
-          height: 100vh;
-          background: ${theme.colors.background.primary};
-        }
-      ` }));
-};
 // --- Root Component ---
-const AppShellRoot = ({ viewportLock = false, topChromeSeparator = 'border', sideChromeSeparator = 'border', children, className, style, testId, css, ref, ...rest }) => {
+const AppShellRoot = ({ viewportLock = false, topChromeSeparator = 'border', sideChromeSeparator = 'border', children, className, style, testId, ref, ...rest }) => {
     const [toolbarVisibility, setToolbarVisibility] = useState({
         top: true,
         left: true,
@@ -142,7 +57,7 @@ const AppShellRoot = ({ viewportLock = false, topChromeSeparator = 'border', sid
         topChromeSeparator,
         sideChromeSeparator,
     ]);
-    return (jsxs(AppShellContext.Provider, { value: contextValue, children: [viewportLock && jsx(ViewportLockStyles, {}), jsx(StyledAppShell, { ref: ref, className: className, style: style, "data-testid": testId, "$css": css, role: "application", ...rest, children: children })] }));
+    return (jsx(AppShellContext.Provider, { value: contextValue, children: jsx("div", { ref: ref, className: cx(shellRoot, viewportLock && viewportLockClass, className), style: style, "data-testid": testId, role: "application", ...rest, children: children }) }));
 };
 AppShellRoot.displayName = 'AppShell';
 // --- Compound Component ---

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

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sources":["../../../../../../src/components/shell/AppShell/AppShell.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"AppShell.js","sources":["../../../../../../src/components/shell/AppShell/AppShell.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AA2BA;AAEA;AACE;AACA;AACA;AACA;AACD;AAEM;AAEP;AAEA;AAkBA;AAEA;;AAYE;AAAiC;;AAG/B;AACA;;AAMU;AACA;AACD;AAUT;AACE;;AAeN;AACA;AAEA;AAmBA;AAEA;AAmBA;AAEA;AAEA;AAYE;AAGE;AACA;AACA;AACD;;;AASG;;AAKJ;;;;;AAMG;;;;;AAMA;;AAiBL;AAEA;AAEA;AAEO;AACL;AACA;AACA;AACA;AACD;;"}

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.css.js

@@ -0,0 +1,18 @@
+import './../../../assets/src/components/shell/FloatingPanel/FloatingPanel.css.ts.vanilla-1rIAXEFp.css';
+
+var collapsibleHidden = 'FloatingPanel_collapsibleHidden__exxnv7b';
+var collapsibleVisible = 'FloatingPanel_collapsibleVisible__exxnv7a';
+var header = 'FloatingPanel_header__exxnv76';
+var headerActions = 'FloatingPanel_headerActions__exxnv78';
+var headerButton = 'FloatingPanel_headerButton__exxnv79';
+var panel = 'FloatingPanel_panel__exxnv75';
+var panelHeightVar = 'var(--panelHeightVar__exxnv73)';
+var panelWidthVar = 'var(--panelWidthVar__exxnv72)';
+var panelZIndexVar = 'var(--panelZIndexVar__exxnv74)';
+var posXVar = 'var(--posXVar__exxnv70)';
+var posYVar = 'var(--posYVar__exxnv71)';
+var resizeHandle = 'FloatingPanel_resizeHandle__exxnv7c';
+var title = 'FloatingPanel_title__exxnv77';
+
+export { collapsibleHidden, collapsibleVisible, header, headerActions, headerButton, panel, panelHeightVar, panelWidthVar, panelZIndexVar, posXVar, posYVar, resizeHandle, title };
+//# sourceMappingURL=FloatingPanel.css.js.map

package/dist/esm/components/shell/FloatingPanel/FloatingPanel.css.js.map

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

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

@@ -1,8 +1,13 @@
+"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useRef, useState, useCallback, useMemo, createContext, useId, useContext, useEffect } from 'react';
-import styled from '@emotion/styled';
+import { useRef, useState, useCallback, useMemo, useId, useEffect, createContext, useContext } from 'react';
+import { assignInlineVars } from '../../../node_modules/@vanilla-extract/dynamic/dist/vanilla-extract-dynamic.esm.js';
+import { cx } from '../../../utils/cx.js';
 import { ScrollArea } from '../../layout/ScrollArea/ScrollArea.js';
-import { processCss } from '../../../utils/styledUtils.js';
+import { CloseIcon } from '../../Icons/CloseIcon.js';
+import { ChevronUpIcon } from '../../Icons/ChevronUpIcon.js';
+import { ChevronDownIcon } from '../../Icons/ChevronDownIcon.js';
+import { panelZIndexVar, panelHeightVar, panelWidthVar, posYVar, posXVar, header, title, headerActions, headerButton, collapsibleHidden, collapsibleVisible, resizeHandle, panel } from './FloatingPanel.css.js';
 
 // --- FloatingManager Context ---
 const FloatingManagerContext = 
@@ -36,93 +41,8 @@ const FloatingManager = ({ baseZIndex = 100, children, }) => {
     return (jsx(FloatingManagerContext.Provider, { value: contextValue, children: children }));
 };
 FloatingManager.displayName = 'FloatingManager';
-// --- Styled Components ---
-const StyledPanel = styled.div `
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  background: ${({ theme }) => theme.colors.background.secondary};
-  border: 1px solid ${({ theme }) => theme.colors.border.default};
-  border-radius: ${({ theme }) => theme.borderRadius.md}px;
-  box-shadow: ${({ theme }) => theme.shadows.lg};
-  overflow: hidden;
-
-  &:focus-visible {
-    outline: 1px solid ${({ theme }) => theme.colors.border.focus};
-  }
-
-  ${({ $css, theme }) => processCss($css, theme)}
-`;
-const StyledHeader = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 28px;
-  padding: 0 ${({ theme }) => theme.spacing.md}px;
-  background: ${({ theme }) => theme.colors.background.tertiary};
-  cursor: grab;
-  user-select: none;
-  flex-shrink: 0;
-
-  &:active {
-    cursor: grabbing;
-  }
-`;
-const StyledTitle = styled.span `
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  font-family: ${({ theme }) => theme.typography.fontFamily.sans};
-  color: ${({ theme }) => theme.colors.text.primary};
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const StyledHeaderActions = styled.div `
-  display: flex;
-  align-items: center;
-  gap: ${({ theme }) => theme.spacing.xs}px;
-  margin-left: ${({ theme }) => theme.spacing.md}px;
-`;
-const StyledHeaderButton = styled.span `
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 18px;
-  height: 18px;
-  border-radius: ${({ theme }) => theme.borderRadius.sm}px;
-  color: ${({ theme }) => theme.colors.text.secondary};
-  cursor: pointer;
-  font-size: ${({ theme }) => theme.typography.fontSize.md}px;
-  line-height: 1;
-
-  &:hover {
-    background: ${({ theme }) => theme.colors.surface.whiteOverlay};
-    color: ${({ theme }) => theme.colors.text.primary};
-  }
-`;
-const StyledCollapsible = styled.div `
-  ${({ $collapsed }) => $collapsed ? 'display: none;' : 'display: flex; flex: 1; min-height: 0;'}
-`;
-const StyledResizeHandle = styled.div `
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  width: 12px;
-  height: 12px;
-  cursor: se-resize;
-
-  &::after {
-    content: '';
-    position: absolute;
-    right: 2px;
-    bottom: 2px;
-    width: 6px;
-    height: 6px;
-    border-right: 2px solid ${({ theme }) => theme.colors.text.muted};
-    border-bottom: 2px solid ${({ theme }) => theme.colors.text.muted};
-  }
-`;
 // --- FloatingPanel Component ---
-const FloatingPanel = ({ title, position: controlledPosition, defaultPosition = { x: 100, y: 100 }, onPositionChange, size: controlledSize, defaultSize = { width: 280, height: 200 }, onSizeChange, minWidth = 150, minHeight = 100, maxWidth = Infinity, maxHeight = Infinity, collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, onClose, closable = true, resizable = true, children, className, panelId, style, testId, css, ref: externalRef, ...rest }) => {
+const FloatingPanel = ({ title: panelTitle, position: controlledPosition, defaultPosition = { x: 100, y: 100 }, onPositionChange, size: controlledSize, defaultSize = { width: 280, height: 200 }, onSizeChange, minWidth = 150, minHeight = 100, maxWidth = Infinity, maxHeight = Infinity, collapsed: controlledCollapsed, defaultCollapsed = false, onCollapsedChange, onClose, closable = true, resizable = true, children, className, panelId, style, testId, ref: externalRef, ...rest }) => {
     const generatedId = useId();
     const id = panelId ?? generatedId;
     const manager = useFloatingManager();
@@ -151,7 +71,7 @@ const FloatingPanel = ({ title, position: controlledPosition, defaultPosition =
             setInternalCollapsed(next);
         onCollapsedChange?.(next);
     }, [isCollapsed, controlledCollapsed, onCollapsedChange]);
-    // FloatingManager registration — use stable id, run once
+    // FloatingManager registration -- use stable id, run once
     const managerRef = useRef(manager);
     managerRef.current = manager;
     useEffect(() => {
@@ -221,14 +141,17 @@ const FloatingPanel = ({ title, position: controlledPosition, defaultPosition =
         target.addEventListener('pointermove', handleResizeMove);
         target.addEventListener('pointerup', handleResizeEnd);
     }, [currentSize, minWidth, minHeight, maxWidth, maxHeight, setSize]);
-    return (jsxs(StyledPanel, { ref: setPanelRef, className: className, "data-testid": testId, "$css": css, role: "dialog", "aria-modal": "false", "aria-label": title, tabIndex: -1, onPointerDown: handleBringToFront, style: {
+    const inlineVars = assignInlineVars({
+        [posXVar]: `${pos.x}px`,
+        [posYVar]: `${pos.y}px`,
+        [panelWidthVar]: `${currentSize.width}px`,
+        [panelHeightVar]: isCollapsed ? 'auto' : `${currentSize.height}px`,
+        [panelZIndexVar]: String(zIndex),
+    });
+    return (jsxs("div", { ref: setPanelRef, className: cx(panel, className), "data-testid": testId, role: "dialog", "aria-modal": "false", "aria-label": panelTitle, tabIndex: -1, onPointerDown: handleBringToFront, style: {
             ...style,
-            left: pos.x,
-            top: pos.y,
-            width: currentSize.width,
-            height: isCollapsed ? 'auto' : currentSize.height,
-            zIndex,
-        }, ...rest, children: [jsxs(StyledHeader, { onPointerDown: handleDragStart, "data-testid": "panel-header", children: [jsx(StyledTitle, { children: title }), jsxs(StyledHeaderActions, { children: [jsx(StyledHeaderButton, { role: "button", tabIndex: 0, onClick: toggleCollapse, "aria-label": isCollapsed ? 'Expand panel' : 'Collapse panel', children: isCollapsed ? '▼' : '▲' }), closable && onClose && (jsx(StyledHeaderButton, { role: "button", tabIndex: 0, onClick: onClose, "aria-label": "Close panel", children: "\u2715" }))] })] }), jsx(StyledCollapsible, { "$collapsed": isCollapsed, children: jsx(ScrollArea, { direction: "both", scrollbarVisibility: "auto", scrollbarWidth: 5, autoFill: true, children: children }) }), resizable && !isCollapsed && (jsx(StyledResizeHandle, { onPointerDown: handleResizeStart, "data-testid": "resize-handle" }))] }));
+            ...inlineVars,
+        }, ...rest, children: [jsxs("div", { className: header, onPointerDown: handleDragStart, "data-testid": "panel-header", children: [jsx("span", { className: title, children: panelTitle }), jsxs("div", { className: headerActions, children: [jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: toggleCollapse, "aria-label": isCollapsed ? 'Expand panel' : 'Collapse panel', children: isCollapsed ? (jsx(ChevronDownIcon, { size: "sm", color: "secondary", decorative: true })) : (jsx(ChevronUpIcon, { size: "sm", color: "secondary", decorative: true })) }), closable && onClose && (jsx("span", { className: headerButton, role: "button", tabIndex: 0, onClick: onClose, "aria-label": "Close panel", children: jsx(CloseIcon, { size: "sm", color: "secondary", decorative: true }) }))] })] }), jsx("div", { className: isCollapsed ? collapsibleHidden : collapsibleVisible, children: jsx(ScrollArea, { direction: "both", scrollbarVisibility: "auto", scrollbarWidth: 5, autoFill: true, children: children }) }), resizable && !isCollapsed && (jsx("div", { className: resizeHandle, onPointerDown: handleResizeStart, "data-testid": "resize-handle" }))] }));
 };
 FloatingPanel.displayName = 'FloatingPanel';
 

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

@@ -1 +1 @@
-{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"FloatingPanel.js","sources":["../../../../../../src/components/shell/FloatingPanel/FloatingPanel.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;;AAyCA;AAEA;AACE;AAEF;AAEO;AAIL;;AAGA;;;;;;AAOA;AACE;;;AAIF;AACE;;AACoC;;;;AAKtC;;AAGI;AACF;AAIF;AAKA;AAKF;AAEA;AAEA;;AA6BE;AACA;AACA;;;AAKA;AACA;AAEI;;AACA;AACF;;;AAOF;AACA;AAEI;;AACA;AACF;;;AAMF;AACA;AACE;;;AAEA;;;AAIF;AACA;;AAGE;;AAEF;AAEA;AACE;AACF;;;AAKA;;AAGI;AACA;;;AAEO;AACJ;AACC;;AAEN;AAGF;AAEA;;AAGI;AACA;;AAGE;AACA;;AAGF;;;;;;AAMA;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKF;;;AAII;AACA;AAEA;AACA;AACA;AACA;AAEA;AACE;AACA;AACA;AACA;;AAEF;;AAGE;AACA;AACF;AAEA;AACA;AACF;;AAKA;AACA;AACA;AACA;AACA;AACD;AAED;AAWM;AACA;;AAwDR;AAEA;;"}

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

@@ -0,0 +1,16 @@
+import './../../../assets/src/components/shell/MenuBar/MenuBar.css.ts.vanilla-TgPcl4yA.css';
+import { c as createRuntimeFn } from '../../../node_modules/@vanilla-extract/recipes/dist/createRuntimeFn-62c9670f.esm.js';
+
+var dropdown = 'MenuBar_dropdown__1h81mxv7';
+var menuBarRoot = createRuntimeFn({defaultClassName:'MenuBar_menuBarRoot__1h81mxv0',variantClassNames:{size:{sm:'MenuBar_menuBarRoot_size_sm__1h81mxv1',md:'MenuBar_menuBarRoot_size_md__1h81mxv2'}},defaultVariants:{size:'md'},compoundVariants:[]});
+var menuContainer = 'MenuBar_menuContainer__1h81mxv3';
+var menuItem = 'MenuBar_menuItem__1h81mxv8';
+var separator = 'MenuBar_separator__1h81mxva';
+var shortcut = 'MenuBar_shortcut__1h81mxv9';
+var subContainer = 'MenuBar_subContainer__1h81mxvd';
+var subDropdown = 'MenuBar_subDropdown__1h81mxvc';
+var subTrigger = 'MenuBar_subTrigger__1h81mxvb MenuBar_menuItem__1h81mxv8';
+var trigger = createRuntimeFn({defaultClassName:'MenuBar_trigger__1h81mxv4',variantClassNames:{active:{true:'MenuBar_trigger_active_true__1h81mxv5',false:'MenuBar_trigger_active_false__1h81mxv6'}},defaultVariants:{active:false},compoundVariants:[]});
+
+export { dropdown, menuBarRoot, menuContainer, menuItem, separator, shortcut, subContainer, subDropdown, subTrigger, trigger };
+//# sourceMappingURL=MenuBar.css.js.map

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

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

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

@@ -1,7 +1,8 @@
+"use client";
 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';
+import { useState, useRef, useMemo, useCallback, useEffect, useId, createContext, useContext } from 'react';
+import { cx } from '../../../utils/cx.js';
+import { menuBarRoot, separator, subTrigger, subDropdown, subContainer, shortcut, menuItem, trigger, dropdown, menuContainer } from './MenuBar.css.js';
 
 // --- Context ---
 const MenuBarContext = /*#__PURE__*/ createContext({
@@ -14,131 +15,6 @@ const MenuBarContext = /*#__PURE__*/ createContext({
     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: {
@@ -146,7 +22,7 @@ const ChevronRight = () => (jsx("span", { style: {
         lineHeight: 1,
     }, children: "\u25B6" }));
 // --- Sub-components ---
-const MenuBarItem = ({ onClick, shortcut, disabled = false, icon, children, className, style, testId, css, ref, ...rest }) => {
+const MenuBarItem = ({ onClick, shortcut: shortcutText, disabled = false, icon, children, className, style, testId, ref, ...rest }) => {
     const { setOpenMenuId } = useMenuBar();
     const handleClick = useCallback(() => {
         if (onClick) {
@@ -154,10 +30,10 @@ const MenuBarItem = ({ onClick, shortcut, disabled = false, icon, children, clas
             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 })] }));
+    return (jsxs("button", { role: "menuitem", onClick: handleClick, disabled: disabled, className: cx(menuItem, className), style: style, "data-testid": testId, ref: ref, type: "button", tabIndex: -1, ...rest, children: [icon && jsx("span", { children: icon }), jsx("span", { children: children }), shortcutText && jsx("span", { className: shortcut, children: shortcutText })] }));
 };
 MenuBarItem.displayName = 'MenuBar.Item';
-const MenuBarSub = ({ label, children, disabled = false, className, style, testId, css, ref, ...rest }) => {
+const MenuBarSub = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
     const [open, setOpen] = useState(false);
     const closeTimer = useRef(null);
     const handleEnter = useCallback(() => {
@@ -177,15 +53,15 @@ const MenuBarSub = ({ label, children, disabled = false, className, style, testI
                 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 })] }));
+    return (jsxs("div", { ref: ref, className: cx(subContainer, className), style: style, "data-testid": testId, onMouseEnter: handleEnter, onMouseLeave: handleLeave, ...rest, children: [jsxs("button", { className: subTrigger, role: "menuitem", "aria-haspopup": "true", "aria-expanded": open, disabled: disabled, type: "button", tabIndex: -1, children: [jsx("span", { children: label }), jsx(ChevronRight, {})] }), open && (jsx("div", { className: subDropdown, 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 }));
+const MenuBarSeparator = ({ className, style, testId, ref, ...rest }) => {
+    return (jsx("div", { role: "separator", className: cx(separator, className), style: style, "data-testid": testId, 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 MenuBarMenu = ({ label, children, disabled = false, className, style, testId, ref, ...rest }) => {
     const menuId = useId();
     const { openMenuId, setOpenMenuId, registerMenu, unregisterMenu, menuOffset, } = useMenuBar();
     const triggerRef = useRef(null);
@@ -255,11 +131,11 @@ const MenuBarMenu = ({ label, children, disabled = false, className, style, test
         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 }))] }));
+    return (jsxs("div", { ref: ref, className: cx(menuContainer, className), style: style, "data-testid": testId, ...rest, children: [jsx("button", { ref: triggerRef, className: trigger({ 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("div", { ref: dropdownRef, className: dropdown, 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 MenuBarRoot = ({ size = 'md', menuOffset = 2, children, className, style, testId, ref: externalRef, ...rest }) => {
     const [openMenuId, setOpenMenuId] = useState(null);
     const menuIdsRef = useRef([]);
     const safeMenuOffset = Math.max(0, menuOffset);
@@ -296,7 +172,6 @@ const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style,
             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();
             }
         }
@@ -310,7 +185,7 @@ const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style,
         }
     }, [openMenuId]);
     const contextValue = useMemo(() => ({
-        size: $size,
+        size,
         menuOffset: safeMenuOffset,
         openMenuId,
         setOpenMenuId,
@@ -318,14 +193,14 @@ const MenuBarRoot = ({ $size = 'md', menuOffset = 2, children, className, style,
         unregisterMenu,
         menuIds: menuIdsRef.current,
     }), [
-        $size,
+        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 }) }));
+    return (jsx(MenuBarContext.Provider, { value: contextValue, children: jsx("div", { ref: setBarRef, className: cx(menuBarRoot({ size }), className), style: style, "data-testid": testId, role: "menubar", onKeyDown: handleBarKeyDown, tabIndex: 0, ...rest, children: children }) }));
 };
 MenuBarRoot.displayName = 'MenuBar';
 // --- Compound Component ---