@ikas/core 1.0.3 → 1.0.4

package/dist/index111.js

@@ -1,77 +1,207 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { useSidebar as b, SidebarGroup as f, SidebarGroupLabel as h } from "@ikas/ui";
-import { cn as a } from "./index3.js";
-import { NavigationMenu as x } from "./index109.js";
-import g from "./index77.js";
-function j({
-  salesChannelMenu: r,
+import { jsxs as a, Fragment as C, jsx as e } from "react/jsx-runtime";
+import g from "react";
+import { useSidebar as A, SidebarMenu as S, SidebarMenuItem as j, SidebarMenuButton as O, SidebarFooter as I, Avatar as F, AvatarImage as P, AvatarFallback as R, Popover as x, PopoverTrigger as p, PopoverContent as N, Tooltip as W } from "@ikas/ui";
+import { cn as u } from "./index3.js";
+import { IconWrapper as k } from "./index109.js";
+import { getSidebarTooltipClass as y } from "./index110.js";
+import z from "./index123.js";
+import D from "./index124.js";
+function K({
+  footerMenu: t,
+  footerTopMenu: r,
+  showAvatarBorder: h,
+  setShowAvatarBorder: l,
   selectedUUIDList: i,
-  openKeys: s,
-  onOpenKeysChange: n,
-  onItemClick: d,
-  onLeafClick: c,
-  showTypographyText: l,
-  getSalesChannelIconBackgroundColor: m,
-  theme: p
+  onItemClick: b,
+  onLeafClick: n,
+  theme: d = "dark",
+  isExpandedFooterVisible: c,
+  clearExpandedMenu: s
 }) {
-  const { state: u } = b(), t = u === "collapsed";
-  return (
-    // margin-block 16px (original style.tsx:1007). Horizontal padding
-    // (16px expanded / 18px collapsed) comes from the SidebarGroup primitive.
-    /* @__PURE__ */ o(f, { className: "my-4", children: [
-      /* @__PURE__ */ o(
-        h,
-        {
-          className: a(
-            "mb-1 flex h-auto items-center justify-between gap-2 text-xs font-medium text-sidebar-accent-foreground dark:text-gray-black-4",
-            t ? "p-0" : "py-2 pl-2.5 pr-2"
+  const { state: m } = A(), o = m === "collapsed";
+  return /* @__PURE__ */ a(C, { children: [
+    r && /* @__PURE__ */ e("div", { className: "flex h-[68px] shrink-0 items-center bg-sidebar px-4", children: /* @__PURE__ */ e(S, { className: "group-data-[collapsible=icon]:items-center", children: /* @__PURE__ */ e(j, { children: /* @__PURE__ */ a(
+      O,
+      {
+        isActive: i.includes(r.uuid),
+        tooltip: {
+          children: r.labelTitle,
+          className: y(d),
+          showArrow: !1
+        },
+        onClick: () => {
+          n(r), b(r);
+        },
+        children: [
+          r.icon && /* @__PURE__ */ e(k, { icon: r.icon, size: 16 }),
+          !o && /* @__PURE__ */ e("span", { className: "truncate", children: r.label ?? r.labelTitle })
+        ]
+      }
+    ) }) }) }),
+    (c || !!t) && /* @__PURE__ */ a(
+      I,
+      {
+        className: u(
+          "h-[72px] min-h-[72px] flex-row items-center gap-0 border-t border-sidebar-border p-0",
+          c && "justify-center border-t-0"
+        ),
+        children: [
+          c && /* @__PURE__ */ e(
+            "button",
+            {
+              onClick: () => s == null ? void 0 : s(),
+              className: "flex items-center justify-center rounded bg-black p-2.5 text-sidebar-foreground transition-colors duration-300 hover:bg-gray-black-7 hover:text-sidebar-accent-foreground",
+              children: /* @__PURE__ */ e(z, { className: "h-4 w-4" })
+            }
           ),
-          children: [
-            !t && /* @__PURE__ */ e("span", { children: r.labelTitle }),
-            r.onAddClick && /* SalesChannelAddButton: 36x36; frame 20x20, radius 2px, border
-            dark #4a4a4f / light #121926; hover frame dark #9c9c9f
-            (original style.tsx:949-1002) */
-            /* @__PURE__ */ o(
-              "button",
-              {
-                onClick: r.onAddClick,
-                className: a(
-                  "group/scadd relative flex h-9 w-9 shrink-0 items-center justify-center transition-colors duration-300 hover:text-sidebar-accent-foreground",
-                  !t && "-my-2 -mr-2"
-                ),
-                children: [
-                  /* @__PURE__ */ e(g, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ e(
-                    "span",
-                    {
-                      className: "pointer-events-none absolute inset-[7px] rounded-sm border border-gray-blue-9 transition-colors duration-300 dark:border-gray-black-6 dark:group-hover/scadd:border-gray-black-4",
-                      "aria-hidden": !0
-                    }
-                  )
-                ]
-              }
-            )
-          ]
+          t && /* @__PURE__ */ e(
+            _,
+            {
+              footerMenu: t,
+              showAvatarBorder: h,
+              setShowAvatarBorder: l,
+              isCollapsed: o,
+              theme: d
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function v(t) {
+  return u(
+    "flex min-w-[200px] max-w-[300px] flex-col rounded border-none bg-sidebar-popup p-2 shadow-xs",
+    t === "dark" && "dark text-sidebar-foreground"
+  );
+}
+function _({
+  footerMenu: t,
+  showAvatarBorder: r,
+  setShowAvatarBorder: h,
+  isCollapsed: l,
+  theme: i
+}) {
+  var m, o;
+  const b = `${((m = t.firstName) == null ? void 0 : m[0]) ?? ""}${((o = t.lastName) == null ? void 0 : o[0]) ?? ""}`.toUpperCase(), n = g.useRef(null), [d, c] = g.useState(!1);
+  g.useEffect(() => {
+    const f = n.current;
+    f && c(f.scrollWidth > f.clientWidth);
+  }, [t.fullName, l]);
+  const s = /* @__PURE__ */ a(
+    F,
+    {
+      className: u(
+        "h-9 w-9 shrink-0",
+        // Avatar border: expanded dark #2e2e33 / light #e3e8ef,
+        // collapsed dark #4a4a4f / light #e3e8ef (original style.tsx:582-597)
+        r && (l ? "ring-1 ring-gray-blue-2 dark:ring-gray-black-6" : "ring-1 ring-gray-blue-2 dark:ring-gray-black-7")
+      ),
+      children: [
+        /* @__PURE__ */ e(
+          P,
+          {
+            src: t.thumbnailImageSrc,
+            alt: t.fullName,
+            onError: () => (h(!0), !0)
+          }
+        ),
+        /* @__PURE__ */ e(R, { className: "bg-transparent text-xs text-gray-blue-5 dark:text-gray-black-3", children: b })
+      ]
+    }
+  );
+  return l ? /* @__PURE__ */ a(x, { children: [
+    /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "flex h-full w-full cursor-pointer items-center justify-center transition-colors duration-300 hover:bg-sidebar-accent", children: s }) }),
+    /* @__PURE__ */ e(
+      N,
+      {
+        side: "right",
+        align: "start",
+        sideOffset: -8,
+        alignOffset: -12,
+        showArrow: !1,
+        className: v(i),
+        children: /* @__PURE__ */ e(
+          w,
+          {
+            actions: t.actions,
+            theme: i
+          }
+        )
+      }
+    )
+  ] }) : /* @__PURE__ */ a("div", { className: "flex h-full w-full items-center gap-2 px-4", children: [
+    s,
+    /* @__PURE__ */ a("div", { className: "flex min-w-0 max-w-[124px] flex-1 flex-col", children: [
+      d ? /* @__PURE__ */ e(
+        W,
+        {
+          content: t.fullName,
+          className: y(i),
+          showArrow: !1,
+          children: /* @__PURE__ */ e(
+            "span",
+            {
+              ref: n,
+              className: "truncate text-sm font-medium text-sidebar-accent-foreground",
+              children: t.fullName
+            }
+          )
+        }
+      ) : /* @__PURE__ */ e(
+        "span",
+        {
+          ref: n,
+          className: "truncate text-sm font-medium text-sidebar-accent-foreground",
+          children: t.fullName
         }
       ),
+      /* @__PURE__ */ e("span", { className: "truncate text-xs text-sidebar-foreground", children: t.merchantName })
+    ] }),
+    /* @__PURE__ */ a(x, { children: [
+      /* @__PURE__ */ e(p, { asChild: !0, children: /* @__PURE__ */ e("button", { className: "ml-auto flex h-8 w-8 shrink-0 items-center justify-center rounded border border-transparent text-gray-blue-5 transition-colors duration-300 hover:border-gray-blue-2 hover:bg-gray-blue-0 dark:text-white dark:hover:border-gray-black-7 dark:hover:bg-gray-black-7", children: /* @__PURE__ */ e(D, { className: "h-4 w-4" }) }) }),
       /* @__PURE__ */ e(
-        x,
+        N,
         {
-          items: r.childItems ?? [],
-          selectedUUIDList: i,
-          openKeys: s,
-          onOpenKeysChange: n,
-          onItemClick: d,
-          onLeafClick: c,
-          isSalesChannel: !0,
-          showTypographyText: l,
-          getSalesChannelIconBackgroundColor: m,
-          theme: p
+          side: "right",
+          align: "start",
+          sideOffset: 8,
+          alignOffset: 6,
+          showArrow: !1,
+          className: v(i),
+          children: /* @__PURE__ */ e(
+            w,
+            {
+              actions: t.actions,
+              theme: i
+            }
+          )
         }
       )
     ] })
-  );
+  ] });
+}
+function w({
+  actions: t
+}) {
+  return /* @__PURE__ */ e("div", { className: "flex flex-col", children: t.map((r) => /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: r.item.onClick,
+      className: u(
+        "flex h-9 cursor-pointer items-center gap-2 rounded px-2.5 text-sm font-medium transition-colors duration-300",
+        "text-sidebar-accent-foreground hover:bg-sidebar-popup-hover dark:text-sidebar-foreground",
+        r.isRed ? "hover:text-gray-blue-6 dark:hover:text-error" : "dark:hover:text-sidebar-foreground"
+      ),
+      children: [
+        r.item.icon && /* @__PURE__ */ e(k, { icon: r.item.icon, size: 16 }),
+        /* @__PURE__ */ e("span", { className: "truncate", children: r.item.labelTitle }),
+        !!r.item.newDataCount && /* @__PURE__ */ e("span", { className: "ml-auto flex h-5 min-w-[26px] items-center justify-center rounded-xl bg-purple text-xs text-white", children: r.item.newDataCount })
+      ]
+    },
+    r.item.uuid
+  )) });
 }
 export {
-  j as SalesChannelMenu
+  K as NavigationFooter
 };

package/dist/index112.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("./index3.cjs");function v({isVisible:i,sidebarModel:a,sidebarViewModel:e,onNavigate:l,clearExpandedMenu:s,theme:n,style:o,verticalOffset:d,selectedExpandedMenu:t,menuItems:u,expandedMenuTopContent:f,NavigationComponent:p}){return r.jsx("div",{className:h.cn("absolute left-0 top-0 h-full w-full transition-transform duration-300",i?"translate-x-0":"translate-x-full"),style:{width:e.sidebarCollapsed?"var(--sidebar-collapsed-width, 72px)":"var(--sidebar-width, 240px)"},children:a&&r.jsx(p,{sidebarViewModel:a,onNavigate:l,clearExpandedMenu:s,expandedMenuTopContent:f,theme:n,style:{...o,viewTransitionName:"sidebar-expanded"},verticalOffset:d,expandedMenuItem:u.find(b=>b.path===(t==null?void 0:t.path))})})}exports.ExpandedOverlay=v;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("@ikas/ui"),a=require("./index3.cjs"),p=require("./index110.cjs"),x=require("./index77.cjs");function g({salesChannelMenu:r,selectedUUIDList:n,openKeys:i,onOpenKeysChange:o,onItemClick:c,onLeafClick:d,showTypographyText:l,getSalesChannelIconBackgroundColor:u,theme:b}){const{state:m}=s.useSidebar(),t=m==="collapsed";return e.jsxs(s.SidebarGroup,{className:"my-4",children:[e.jsxs(s.SidebarGroupLabel,{className:a.cn("mb-1 flex h-auto items-center justify-between gap-2 text-xs font-medium text-sidebar-accent-foreground dark:text-gray-black-4",t?"p-0":"py-2 pl-2.5 pr-2"),children:[!t&&e.jsx("span",{children:r.labelTitle}),r.onAddClick&&e.jsxs("button",{onClick:r.onAddClick,className:a.cn("group/scadd relative flex h-9 w-9 shrink-0 items-center justify-center transition-colors duration-300 hover:text-sidebar-accent-foreground",!t&&"-my-2 -mr-2"),children:[e.jsx(x.default,{className:"h-4 w-4"}),e.jsx("span",{className:"pointer-events-none absolute inset-[7px] rounded-sm border border-gray-blue-9 transition-colors duration-300 dark:border-gray-black-6 dark:group-hover/scadd:border-gray-black-4","aria-hidden":!0})]})]}),e.jsx(p.NavigationMenu,{items:r.childItems??[],selectedUUIDList:n,openKeys:i,onOpenKeysChange:o,onItemClick:c,onLeafClick:d,isSalesChannel:!0,showTypographyText:l,getSalesChannelIconBackgroundColor:u,theme:b})]})}exports.SalesChannelMenu=g;

package/dist/index112.js

@@ -1,50 +1,77 @@
-import { jsx as t } from "react/jsx-runtime";
-import { cn as w } from "./index3.js";
-function x({
-  isVisible: i,
-  sidebarModel: r,
-  sidebarViewModel: l,
-  onNavigate: o,
-  clearExpandedMenu: s,
-  theme: n,
-  style: f,
-  verticalOffset: p,
-  selectedExpandedMenu: a,
-  menuItems: m,
-  expandedMenuTopContent: d,
-  NavigationComponent: e
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useSidebar as b, SidebarGroup as f, SidebarGroupLabel as h } from "@ikas/ui";
+import { cn as a } from "./index3.js";
+import { NavigationMenu as x } from "./index110.js";
+import g from "./index77.js";
+function j({
+  salesChannelMenu: r,
+  selectedUUIDList: i,
+  openKeys: s,
+  onOpenKeysChange: n,
+  onItemClick: d,
+  onLeafClick: c,
+  showTypographyText: l,
+  getSalesChannelIconBackgroundColor: m,
+  theme: p
 }) {
-  return /* @__PURE__ */ t(
-    "div",
-    {
-      className: w(
-        "absolute left-0 top-0 h-full w-full transition-transform duration-300",
-        i ? "translate-x-0" : "translate-x-full"
+  const { state: u } = b(), t = u === "collapsed";
+  return (
+    // margin-block 16px (original style.tsx:1007). Horizontal padding
+    // (16px expanded / 18px collapsed) comes from the SidebarGroup primitive.
+    /* @__PURE__ */ o(f, { className: "my-4", children: [
+      /* @__PURE__ */ o(
+        h,
+        {
+          className: a(
+            "mb-1 flex h-auto items-center justify-between gap-2 text-xs font-medium text-sidebar-accent-foreground dark:text-gray-black-4",
+            t ? "p-0" : "py-2 pl-2.5 pr-2"
+          ),
+          children: [
+            !t && /* @__PURE__ */ e("span", { children: r.labelTitle }),
+            r.onAddClick && /* SalesChannelAddButton: 36x36; frame 20x20, radius 2px, border
+            dark #4a4a4f / light #121926; hover frame dark #9c9c9f
+            (original style.tsx:949-1002) */
+            /* @__PURE__ */ o(
+              "button",
+              {
+                onClick: r.onAddClick,
+                className: a(
+                  "group/scadd relative flex h-9 w-9 shrink-0 items-center justify-center transition-colors duration-300 hover:text-sidebar-accent-foreground",
+                  !t && "-my-2 -mr-2"
+                ),
+                children: [
+                  /* @__PURE__ */ e(g, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "pointer-events-none absolute inset-[7px] rounded-sm border border-gray-blue-9 transition-colors duration-300 dark:border-gray-black-6 dark:group-hover/scadd:border-gray-black-4",
+                      "aria-hidden": !0
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
       ),
-      style: {
-        width: l.sidebarCollapsed ? "var(--sidebar-collapsed-width, 72px)" : "var(--sidebar-width, 240px)"
-      },
-      children: r && /* @__PURE__ */ t(
-        e,
+      /* @__PURE__ */ e(
+        x,
         {
-          sidebarViewModel: r,
-          onNavigate: o,
-          clearExpandedMenu: s,
-          expandedMenuTopContent: d,
-          theme: n,
-          style: {
-            ...f,
-            viewTransitionName: "sidebar-expanded"
-          },
-          verticalOffset: p,
-          expandedMenuItem: m.find(
-            (h) => h.path === (a == null ? void 0 : a.path)
-          )
+          items: r.childItems ?? [],
+          selectedUUIDList: i,
+          openKeys: s,
+          onOpenKeysChange: n,
+          onItemClick: d,
+          onLeafClick: c,
+          isSalesChannel: !0,
+          showTypographyText: l,
+          getSalesChannelIconBackgroundColor: m,
+          theme: p
         }
       )
-    }
+    ] })
   );
 }
 export {
-  x as ExpandedOverlay
+  j as SalesChannelMenu
 };

package/dist/index113.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),A=require("mobx-react-lite"),X=require("mobx"),M=require("react-router-dom"),G=require("@ikas/ui"),C=require("./index3.cjs"),a=require("./index8.cjs"),W=require("./index180.cjs"),_=require("./index181.cjs"),J=require("./index182.cjs"),Q=require("./index183.cjs"),Y=require("./index184.cjs"),Z=require("./index185.cjs"),$=require("./index186.cjs"),ee=require("./index11.cjs"),te=require("./index131.cjs"),re=require("./index61.cjs");function le(b){var I,D;const{model:l,columnDefinition:e,rowData:t,isHeader:c,isSummary:d,isSelected:P,index:K,expandableCellProps:i}=b,v=l.displayedColumnDefinitions.findIndex(n=>n.columnKey===e.columnKey),O=!!l.isSelectable&&v===0,m=c?e.headerAlignment??e.alignment:e.alignment,f=l.isStickyColumnEnabled&&v===0?l.isSelectable?40:0:void 0,U=t&&e.isDisabled?e.isDisabled(t):!1,p=X.action(n=>{const{setValue:s}=e;s&&(l.selectedData.length&&P?l.selectedData.forEach(u=>s(u,n)):t&&s(t,n))}),k=n=>{c||d||l.onCellClick&&t&&(n.preventDefault(),l.onCellClick(t,e))},E=t?t[l.idKey]+""+e.columnKey:void 0,o=E?(I=l.validator)==null?void 0:I.results[E]:void 0,B=!!((D=o==null?void 0:o.messages)!=null&&D.length),L=()=>{var n,s,u,y,R;if(c)return r.jsx(W.HeaderCell,{model:l,columnDefinition:e,alignment:m});if(d)return r.jsx(_.SummaryCell,{columnDefinition:e,alignment:m});switch(e.type){case a.CellType.TEXT:return r.jsx(J.TextCell,{value:(n=e.getValue)==null?void 0:n.call(e,t),rowData:t,columnDefinition:e,onValueChange:p});case a.CellType.NUMBER:return r.jsx(Q.NumberCell,{value:(s=e.getValue)==null?void 0:s.call(e,t),rowData:t,columnDefinition:e,onValueChange:p});case a.CellType.PRICE:return r.jsx(Y.PriceCell,{value:(u=e.getValue)==null?void 0:u.call(e,t),rowData:t,columnDefinition:e});case a.CellType.SELECT:return r.jsx(Z.SelectCell,{value:(y=e.getValue)==null?void 0:y.call(e,t),rowData:t,columnDefinition:e,onValueChange:p});case a.CellType.IMAGE_SELECT:return r.jsx($.ImageSelectCell,{value:(R=e.getValue)==null?void 0:R.call(e,t),rowData:t,columnDefinition:e,onValueChange:p});case a.CellType.PRODUCT:return r.jsx(ee.ProductCell,{rowData:t,columnDefinition:e});case a.CellType.CUSTOM:return e.render(t);default:return r.jsx("div",{})}},h=n=>{const s=r.jsx("div",{className:C.cn("w-full",(o==null?void 0:o.status)==="error"&&"has-error"),children:n});return B?r.jsx(G.Tooltip,{title:r.jsx("div",{className:"text-center",children:o==null?void 0:o.messages.map((u,y)=>r.jsxs("div",{className:"mb-1.5 last:mb-0 relative pl-2",children:[r.jsx("span",{className:"absolute left-0 text-base",children:"*"}),u]},y))}),color:"error",children:s}):s},T=()=>{if(c||d)return L();const n=L(),s=e.type;return s===a.CellType.TEXT&&e.inputMode||s===a.CellType.NUMBER&&e.inputMode||s===a.CellType.SELECT||s===a.CellType.PRICE?h(n):n},S=()=>i?!i.isExpandable&&i.paddingLeft?r.jsx("div",{style:{marginRight:6}}):i.isExpandable?r.jsx("div",{className:"flex items-start h-full",children:r.jsx("div",{className:"w-4 h-4 relative z-[699] mr-1.5 cursor-pointer",style:{top:3},onClick:n=>{n.stopPropagation(),i.changeExpandStatus()},children:r.jsx(re.default,{className:C.cn("h-4 w-4 text-gray-blue-5 transition-transform duration-300 ease-in-out -rotate-90 cursor-pointer",i.isExpanded&&"rotate-0")})})}):null:null;let x=0;const j=!l.isSelectable;let g=l.isDraggable&&K===0&&!c&&!d;g&&e.isDragDisabled&&t&&(g=!e.isDragDisabled(t),x+=j?48:38),typeof(i==null?void 0:i.paddingLeft)=="number"&&(x+=i.paddingLeft);const F=e.isLinkEnabled&&e.isLinkCoverContent&&l.getRowLink&&t,z=e.isLinkEnabled&&!e.isLinkCoverContent&&l.getRowLink&&t,w=t&&l.getRowLink?l.getRowLink(t):void 0,q=c||d,N=C.cn("flex items-center flex-wrap relative w-full",q?C.cn("min-h-[40px] py-0 px-3",l.hideHeaderBackgroundColor?"bg-white":"bg-gray-blue-1"):"min-h-[54px] py-4 px-3 bg-white",O&&"pl-0",U&&!q&&"opacity-50 pointer-events-none",e.borderLeft&&"border-l border-gray-blue-2",e.borderRight&&"border-r border-gray-blue-2",f!=null&&"datatable-sticky-column"),V={justifyContent:m??"flex-start",paddingLeft:x>0?x:void 0,...f!=null?{position:"sticky",left:f,zIndex:2,transition:"box-shadow 0.3s",boxShadow:"var(--datatable-sticky-shadow, none)"}:{}};return F?r.jsxs(M.Link,{className:C.cn(N,"datatable-link-column no-underline text-inherit"),style:V,to:w??"",onClick:k,children:[g&&r.jsx(H,{isFirstElement:j}),S(),T()]}):r.jsxs("div",{className:N,style:V,onClick:k,children:[g&&r.jsx(H,{isFirstElement:j}),S(),T(),z&&r.jsx(M.Link,{className:"absolute inset-0",to:w??""})]})}function H({isFirstElement:b}){return r.jsx("span",{className:"absolute top-1/2 -translate-y-1/2 flex items-center justify-center p-2.5",style:{left:b?0:-10},"aria-description":"datatable dnd icon",children:r.jsx(te.default,{className:"h-4 w-4 text-gray-blue"})})}const ne=A.observer(le);exports.Cell=ne;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),h=require("./index3.cjs");function v({isVisible:i,sidebarModel:a,sidebarViewModel:e,onNavigate:l,clearExpandedMenu:s,theme:n,style:o,verticalOffset:d,selectedExpandedMenu:t,menuItems:u,expandedMenuTopContent:f,NavigationComponent:p}){return r.jsx("div",{className:h.cn("absolute left-0 top-0 h-full w-full transition-transform duration-300",i?"translate-x-0":"translate-x-full"),style:{width:e.sidebarCollapsed?"var(--sidebar-collapsed-width, 72px)":"var(--sidebar-width, 240px)"},children:a&&r.jsx(p,{sidebarViewModel:a,onNavigate:l,clearExpandedMenu:s,expandedMenuTopContent:f,theme:n,style:{...o,viewTransitionName:"sidebar-expanded"},verticalOffset:d,expandedMenuItem:u.find(b=>b.path===(t==null?void 0:t.path))})})}exports.ExpandedOverlay=v;