it-data-nexus-ui-library 2.7.0 → 2.8.1

package/dist/components/ActionBar.mjs

@@ -1 +1 @@
-import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import{useTheme as i,useMediaQuery as r,AppBar as l,Toolbar as o}from"@mui/material";import{Box as s}from"./_Primitives/Box.mjs";import{Stack as c}from"./_Primitives/Stack.mjs";import{NexusHome as d}from"./Logo/NexusHome.mjs";import{ThemeToggle as x}from"./Theme/ThemeToggle.mjs";import f from"./Logo/NexusLogo.mjs";import{ActionBarTitle as a}from"./Typography.mjs";import{useRef as h,useState as u,useEffect as m}from"react";const p=({title:p,extraLeft:g,extraRight:w,homeHref:y,showHome:v=!0,logo:j})=>{const C=j??e(f,{}),I=i(),b=r(I.breakpoints.up("lg")),B=h(null),[R,k]=u(49),z=h(null),E=h(null),L=h(null),M=h(null),A=h(null),S=h(null),[T,H]=u(null),[$,D]=u(null);return m(()=>{const e=B.current;if(!e)return;const n=()=>k(e.getBoundingClientRect().height);n();const t=window.ResizeObserver;if(!t)return;const i=new t(n);return i.observe(e),()=>i.disconnect()},[]),m(()=>{if(!b)return H(null),void D(null);function e(){const e=E.current,n=L.current,t=z.current,i=M.current,r=A.current,l=S.current;if(!e||!n||!t)return;const o=e.getBoundingClientRect(),s=n.getBoundingClientRect(),c=t.getBoundingClientRect();if(i){const e=i.getBoundingClientRect().width||0,n=(o.right+s.left)/2,t=o.right+e/2+8,r=s.left-e/2-8,l=Math.min(Math.max(n,t),r);H(l-c.left)}else H(null);if(r&&l){const e=r.getBoundingClientRect().width||0,n=l.getBoundingClientRect(),t=(s.right+n.left)/2,i=s.right+e/2+8,o=n.left-e/2-8,d=Math.min(Math.max(t,i),o);D(d-c.left)}else D(null)}e(),window.addEventListener("resize",e);let n=null;const t=window.ResizeObserver;return t&&(n=new t(e),z.current&&n.observe(z.current)),()=>{window.removeEventListener("resize",e),n&&n.disconnect()}},[b,g,w]),n(t,{children:[e(l,{position:"sticky",component:"header",color:"inherit",elevation:0,ref:B,sx:{zIndex:{xs:I.zIndex.appBar,sm:I.zIndex.drawer+1},[I.breakpoints.up("sm")]:{position:"fixed"}},children:n(o,{variant:"dense",sx:{display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:{lg:"center"},py:{xs:.5,lg:0}},children:[n(c,{sx:{display:{xs:"flex",sm:"none"},width:"100%"},spacing:.25,children:[n(c,{direction:"row",sx:{justifyContent:"flex-end","& .MuiIconButton-root":{padding:"4px"},"& svg":{fontSize:"1.1rem"}},children:[v&&e(d,{href:y}),e(x,{})]}),e(a,{sx:{textAlign:"center",fontSize:"1.1rem"},children:p})]}),(g||w)&&n(c,{direction:"row",sx:{display:{xs:"flex",sm:"none"},justifyContent:"center",alignItems:"center",gap:1,width:"100%",mt:1},children:[g,w]}),n(c,{sx:{display:{xs:"none",sm:"flex",lg:"none"},width:"100%"},spacing:.5,children:[n(c,{direction:"row",sx:{alignItems:"center",width:"100%"},children:[e(s,{sx:{flex:1,display:"flex",alignItems:"center"},children:e(s,{sx:{height:"38px",pt:.5},children:C})}),e(a,{children:p}),n(c,{direction:"row",sx:{flex:1,justifyContent:"flex-end",alignItems:"center",gap:1},children:[v&&e(d,{href:y}),e(x,{})]})]}),(g||w)&&n(c,{direction:"row",sx:{justifyContent:"center",alignItems:"center",gap:2,pb:.5},children:[g&&e(s,{children:g}),w&&e(s,{children:w})]})]}),e(s,{sx:{display:{xs:"none",lg:"block"},width:"100%"},children:n(s,{sx:{display:"flex",flexDirection:"row",alignItems:"center",width:"100%",position:"relative"},ref:z,children:[e(s,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-start"},children:e(s,{sx:{height:"38px",pt:.5},ref:E,children:C})}),e(s,{sx:{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,right:0,pointerEvents:"none"},children:e(s,{sx:{pointerEvents:"auto",textAlign:"center"},children:e(s,{ref:L,children:e(a,{children:p})})})}),e(s,{sx:{display:g?"block":"none",position:"absolute",left:null!=T?`${T}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:e(s,{ref:M,children:g})}),e(s,{sx:{display:w?"block":"none",position:"absolute",left:null!=$?`${$}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:e(s,{ref:A,children:w})}),e(s,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-end"},children:n(s,{sx:{flex:"0 0 auto",display:"flex",alignItems:"center",gap:1},ref:S,children:[v&&e(d,{href:y}),e(x,{})]})})]})})]})}),e(s,{sx:{display:{xs:"none",sm:"block"},height:`${R}px`,flexShrink:0}})]})};export{p as ActionBar};
+import{jsx as e,jsxs as n,Fragment as t}from"react/jsx-runtime";import{useTheme as i,useMediaQuery as r,AppBar as l,Toolbar as o,IconButton as s}from"@mui/material";import c from"@mui/icons-material/ChevronLeft";import a from"@mui/icons-material/Menu";import{Box as d}from"./_Primitives/Box.mjs";import{Stack as m}from"./_Primitives/Stack.mjs";import{NexusHome as f}from"./Logo/NexusHome.mjs";import{ThemeToggle as x}from"./Theme/ThemeToggle.mjs";import h from"./Logo/NexusLogo.mjs";import{ActionBarTitle as p}from"./Typography.mjs";import{useRef as u,useState as g,useEffect as w}from"react";const y=({title:y,extraLeft:v,extraRight:C,homeHref:I,showHome:b=!0,logo:j,mobileNavigation:z})=>{const R=j??e(h,{}),k=i(),B=r(k.breakpoints.up("lg")),L=u(null),[E,M]=g(49),T=u(null),S=u(null),A=u(null),H=u(null),O=u(null),N=u(null),[$,D]=g(null),[P,W]=g(null);return w(()=>{const e=L.current;if(!e)return;const n=()=>M(e.getBoundingClientRect().height);n();const t=window.ResizeObserver;if(!t)return;const i=new t(n);return i.observe(e),()=>i.disconnect()},[]),w(()=>{if(!B)return D(null),void W(null);function e(){const e=S.current,n=A.current,t=T.current,i=H.current,r=O.current,l=N.current;if(!e||!n||!t)return;const o=e.getBoundingClientRect(),s=n.getBoundingClientRect(),c=t.getBoundingClientRect();if(i){const e=i.getBoundingClientRect().width||0,n=(o.right+s.left)/2,t=o.right+e/2+8,r=s.left-e/2-8,l=Math.min(Math.max(n,t),r);D(l-c.left)}else D(null);if(r&&l){const e=r.getBoundingClientRect().width||0,n=l.getBoundingClientRect(),t=(s.right+n.left)/2,i=s.right+e/2+8,o=n.left-e/2-8,a=Math.min(Math.max(t,i),o);W(a-c.left)}else W(null)}e(),window.addEventListener("resize",e);let n=null;const t=window.ResizeObserver;return t&&(n=new t(e),T.current&&n.observe(T.current)),()=>{window.removeEventListener("resize",e),n&&n.disconnect()}},[B,v,C]),n(t,{children:[e(l,{position:"sticky",component:"header",color:"inherit",elevation:0,ref:L,sx:{zIndex:{xs:k.zIndex.appBar,sm:k.zIndex.drawer+1},[k.breakpoints.up("sm")]:{position:"fixed"}},children:n(o,{variant:"dense",sx:{display:"flex",flexDirection:"column",alignItems:"stretch",justifyContent:{lg:"center"},py:{xs:.5,lg:0}},children:[n(m,{direction:"row",sx:{display:{xs:"grid",sm:"none"},gridTemplateColumns:"minmax(72px, 1fr) minmax(0, auto) minmax(72px, 1fr)",alignItems:"center",width:"100%",minHeight:40,"& .MuiIconButton-root":{padding:"4px"},"& svg":{fontSize:"1.1rem"}},children:[e(d,{sx:{display:"flex",alignItems:"center",justifyContent:"flex-start"},children:z&&e(s,{ref:z.buttonRef,onClick:z.onToggle,size:"small","aria-label":z.open?"Close navigation":"Open navigation","aria-expanded":z.open,children:z.open?e(c,{fontSize:"small"}):e(a,{fontSize:"small"})})}),e(p,{noWrap:!0,sx:{minWidth:0,textAlign:"center",overflow:"hidden",textOverflow:"ellipsis"},children:y}),n(m,{direction:"row",sx:{justifyContent:"flex-end",alignItems:"center"},children:[b&&e(f,{href:I}),e(x,{})]})]}),(v||C)&&n(m,{direction:"row",sx:{display:{xs:"flex",sm:"none"},justifyContent:"center",alignItems:"center",gap:1,width:"100%",mt:1},children:[v,C]}),n(m,{sx:{display:{xs:"none",sm:"flex",lg:"none"},width:"100%"},spacing:.5,children:[n(m,{direction:"row",sx:{alignItems:"center",width:"100%"},children:[e(d,{sx:{flex:1,display:"flex",alignItems:"center"},children:e(d,{sx:{height:"38px",pt:.5},children:R})}),e(p,{children:y}),n(m,{direction:"row",sx:{flex:1,justifyContent:"flex-end",alignItems:"center",gap:1},children:[b&&e(f,{href:I}),e(x,{})]})]}),(v||C)&&n(m,{direction:"row",sx:{justifyContent:"center",alignItems:"center",gap:2,pb:.5},children:[v&&e(d,{children:v}),C&&e(d,{children:C})]})]}),e(d,{sx:{display:{xs:"none",lg:"block"},width:"100%"},children:n(d,{sx:{display:"flex",flexDirection:"row",alignItems:"center",width:"100%",position:"relative"},ref:T,children:[e(d,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-start"},children:e(d,{sx:{height:"38px",pt:.5},ref:S,children:R})}),e(d,{sx:{display:"flex",justifyContent:"center",alignItems:"center",position:"absolute",left:0,right:0,pointerEvents:"none"},children:e(d,{sx:{pointerEvents:"auto",textAlign:"center"},children:e(d,{ref:A,children:e(p,{children:y})})})}),e(d,{sx:{display:v?"block":"none",position:"absolute",left:null!=$?`${$}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:e(d,{ref:H,children:v})}),e(d,{sx:{display:C?"block":"none",position:"absolute",left:null!=P?`${P}px`:void 0,transform:"translateX(-50%)",pointerEvents:"auto",textAlign:"center"},children:e(d,{ref:O,children:C})}),e(d,{sx:{display:"flex",alignItems:"center",flex:1,justifyContent:"flex-end"},children:n(d,{sx:{flex:"0 0 auto",display:"flex",alignItems:"center",gap:1},ref:N,children:[b&&e(f,{href:I}),e(x,{})]})})]})})]})}),e(d,{sx:{display:{xs:"none",sm:"block"},height:`${E}px`,flexShrink:0}})]})};export{y as ActionBar};

package/dist/components/AgentChat/AgentChatWindow.mjs

@@ -1 +1 @@
-import{jsx as i,jsxs as e,Fragment as t}from"react/jsx-runtime";import{Box as r}from"../_Primitives/Box.mjs";import{Stack as o}from"../_Primitives/Stack.mjs";import{Caption as m}from"../Typography.mjs";import{Paper as n}from"../_Primitives/Paper.mjs";import{ChatInput as s}from"./ChatInput.mjs";import"react";import"@mui/icons-material/Check";import"@mui/icons-material/ContentCopy";import"@mui/icons-material/Download";import"@mui/material";import"@mui/material/styles";import"../Theme/tokens.mjs";import"./ChatComponents/ChatAvatar.mjs";import"react-markdown";import"remark-gfm";import"../Code.mjs";import"@mui/icons-material/ExpandMore";import"@mui/icons-material/ExpandLess";import"@mui/icons-material/CheckCircle";import"@mui/icons-material/OpenInNew";import"@mui/icons-material/ThumbUp";import"@mui/icons-material/ThumbDown";import l from"./ChatComponents/SuggestedPrompts.mjs";import{AgentChatWindowHeader as a}from"./AgentChatWindowHeader.mjs";const p=({title:p="Nexus AI Chat",subtitle:c="Your intelligent assistant",showAiChip:d=!0,headerActions:u,body:h,followUpLabel:x="Suggested follow-ups:",followUpPrompts:f,onSelectFollowUp:y,onSend:b,inputDisabled:g=!1,inputPlaceholder:C="Ask me anything...",isStreaming:w=!1,onStop:A,inputActions:j,inputRef:S,inputLabel:k="Message",isEmpty:P=!1,inputSx:D,sx:v})=>{const I=Boolean(f&&f.length>0&&y),R=i(s,{onSend:b,disabled:g,placeholder:C,isStreaming:w,onStop:A,actions:j,inputRef:S,label:k});return e(r,{sx:[{display:"flex",flex:1,flexDirection:"column",minWidth:0,minHeight:0,height:"100%"},...Array.isArray(v)?v:v?[v]:[]],children:[i(a,{title:p,subtitle:c,showAiChip:d,actions:u}),P?e(n,{sx:{borderRadius:0,border:"none",flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",px:2,pb:4},children:[h,i(r,{sx:[{mt:3,width:"100%"},...Array.isArray(D)?D:D?[D]:[]],children:R})]}):e(t,{children:[i(n,{sx:{borderRadius:0,border:"none",flex:1,display:"flex",flexDirection:"column",overflowY:"scroll"},children:h}),I&&e(o,{direction:{xs:"column",md:"row"},spacing:1,sx:{px:2,py:1,justifyContent:{xs:"center",sm:"flex-end"},alignItems:"center"},children:[i(m,{sx:{display:"block",mb:1},children:x}),i(l,{prompts:f??[],onSelect:y})]}),i(n,{sx:{borderRadius:0,border:"none"},children:i(r,{sx:[{p:2,flexShrink:0},...Array.isArray(D)?D:D?[D]:[]],children:R})})]})]})};export{p as AgentChatWindow};
+import{jsx as r,jsxs as t,Fragment as e}from"react/jsx-runtime";import{useState as i,useRef as n,useEffect as o}from"react";import{Box as s}from"../_Primitives/Box.mjs";import{Stack as a}from"../_Primitives/Stack.mjs";import{Caption as l}from"../Typography.mjs";import{Paper as m}from"../_Primitives/Paper.mjs";import{ChatInput as c}from"./ChatInput.mjs";import"@mui/icons-material/Check";import"@mui/icons-material/ContentCopy";import"@mui/icons-material/Download";import"@mui/material";import"@mui/material/styles";import"../Theme/tokens.mjs";import"./ChatComponents/ChatAvatar.mjs";import"react-markdown";import"remark-gfm";import"../Code.mjs";import"@mui/icons-material/ExpandMore";import"@mui/icons-material/ExpandLess";import"@mui/icons-material/CheckCircle";import"@mui/icons-material/OpenInNew";import"@mui/icons-material/ThumbUp";import"@mui/icons-material/ThumbDown";import u from"./ChatComponents/SuggestedPrompts.mjs";import{AgentChatWindowHeader as p}from"./AgentChatWindowHeader.mjs";const d=({title:d="Nexus AI Chat",subtitle:h="Your intelligent assistant",showAiChip:f=!0,headerActions:x,body:C,followUpLabel:g="Suggested follow-ups:",followUpPrompts:b,onSelectFollowUp:y,onSend:w,inputDisabled:S=!1,inputPlaceholder:A="Ask me anything...",isStreaming:j=!1,onStop:k,inputActions:D,inputRef:v,inputLabel:T="Message",isEmpty:M=!1,inputSx:P,sx:I})=>{const[R,E]=i(!1),L=n(0),U=n(0),Y=n(0),H=n(null),W=Boolean(b&&b.length>0&&y);o(()=>{M&&(E(!1),L.current=0,U.current=0)},[M]);const _=r(c,{onSend:w,disabled:S,placeholder:A,isStreaming:j,onStop:k,actions:D,inputRef:v,label:T});return t(s,{sx:[{display:"flex",flex:1,flexDirection:"column",minWidth:0,minHeight:0,height:"100%"},...Array.isArray(I)?I:I?[I]:[]],onWheelCapture:()=>{Y.current=Date.now()},onTouchStartCapture:r=>{H.current=r.touches[0]?.clientY??null},onTouchMoveCapture:r=>{const t=r.touches[0]?.clientY;void 0!==t&&null!==H.current&&Math.abs(t-H.current)>1&&(Y.current=Date.now(),H.current=t)},onScrollCapture:r=>{const t=r.target;if(!(t instanceof HTMLElement))return;if("true"!==t.dataset.agentChatScrollContainer)return;const e=t.scrollTop,i=e-L.current;if(L.current=e,e<=0)return U.current=0,void E(!1);Date.now()-Y.current>250?U.current=0:(Math.sign(i)!==Math.sign(U.current)?U.current=i:U.current+=i,U.current>=12?(E(!0),U.current=0):U.current<=-12&&(E(!1),U.current=0))},children:[r(s,{sx:{display:{xs:R?"none":"block",sm:"block"},flexShrink:0},children:r(p,{title:d,subtitle:h,showAiChip:f,actions:x})}),M?t(m,{sx:{borderRadius:0,border:"none",flex:1,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",px:2,pb:4},children:[C,r(s,{sx:[{mt:3,width:"100%"},...Array.isArray(P)?P:P?[P]:[]],children:_})]}):t(e,{children:[r(m,{"data-agent-chat-scroll-container":"true",sx:{borderRadius:0,border:"none",flex:1,display:"flex",flexDirection:"column",overflowY:"scroll"},children:C}),W&&t(a,{direction:{xs:"column",md:"row"},spacing:1,sx:{px:2,py:1,justifyContent:{xs:"center",sm:"flex-end"},alignItems:"center"},children:[r(l,{sx:{display:"block",mb:1},children:g}),r(u,{prompts:b??[],onSelect:y})]}),r(m,{sx:{borderRadius:0,border:"none"},children:r(s,{sx:[{p:2,flexShrink:0},...Array.isArray(P)?P:P?[P]:[]],children:_})})]})]})};export{d as AgentChatWindow};

package/dist/components/AgentChat/ChatComponents/MessageList.mjs

@@ -1 +1 @@
-import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as o}from"react";import{Box as n}from"../../_Primitives/Box.mjs";import i from"./MessageBubble.mjs";import c from"./StreamingBubble.mjs";import l from"./TypingIndicator.mjs";import{latestTraceLabel as s}from"./latestTraceLabel.mjs";const m=({messages:m,isTyping:a,streamingText:u,liveTraceEvents:g,highlightQuery:h,onAbort:p,showActivity:f=!1,compact:b=!1,markdownComponents:d,onFeedback:x})=>{const y=r(null),v=r(null),T=r(!1),j=r(m.length),w=r(!1),A=()=>{const t=v.current;t&&(w.current=!0,t.scrollTop=t.scrollHeight,requestAnimationFrame(()=>{w.current=!1}))};o(()=>{const t=m[m.length-1];m.length>j.current&&"user"===t?.role&&(T.current=!1,A()),j.current=m.length},[m]),o(()=>{T.current||A()},[a,u]);const k=(u||"").trim().length>0,H=a&&(k||f),B=a&&!H;return t(n,{ref:v,onScroll:()=>{w.current||(T.current=!(()=>{const t=v.current;return!t||t.scrollHeight-t.scrollTop-t.clientHeight<80})())},sx:{flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:1.5,px:2,py:1.5},children:[m.filter(t=>"user"===t.role||t.content).map(t=>e(i,{message:t,highlightQuery:h,showActivity:f,compact:b,markdownComponents:d,onFeedback:x},t.id)),H&&e(c,{text:u||"",traceEvents:g||[],highlightQuery:h,onAbort:p,showActivity:f,compact:b}),B&&e(l,{traceLabel:g&&g.length>0?s(g):void 0}),e(n,{ref:y})]})};export{m as default};
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import{useRef as r,useEffect as o}from"react";import{Box as n}from"../../_Primitives/Box.mjs";import c from"./MessageBubble.mjs";import i from"./StreamingBubble.mjs";import l from"./TypingIndicator.mjs";import{latestTraceLabel as s}from"./latestTraceLabel.mjs";const m=({messages:m,isTyping:a,streamingText:u,liveTraceEvents:g,highlightQuery:h,onAbort:p,showActivity:f=!1,compact:d=!1,markdownComponents:b,onFeedback:x})=>{const y=r(null),v=r(null),T=r(!1),j=r(m.length),w=r(!1),A=()=>{const t=v.current;t&&(w.current=!0,t.scrollTop=t.scrollHeight,requestAnimationFrame(()=>{w.current=!1}))};o(()=>{const t=m[m.length-1];m.length>j.current&&"user"===t?.role&&(T.current=!1,A()),j.current=m.length},[m]),o(()=>{T.current||A()},[a,u]);const k=(u||"").trim().length>0,H=a&&(k||f),B=a&&!H;return t(n,{ref:v,"data-agent-chat-scroll-container":"true",onScroll:()=>{w.current||(T.current=!(()=>{const t=v.current;return!t||t.scrollHeight-t.scrollTop-t.clientHeight<80})())},sx:{flex:1,minHeight:0,overflowY:"auto",display:"flex",flexDirection:"column",gap:1.5,px:2,py:1.5},children:[m.filter(t=>"user"===t.role||t.content).map(t=>e(c,{message:t,highlightQuery:h,showActivity:f,compact:d,markdownComponents:b,onFeedback:x},t.id)),H&&e(i,{text:u||"",traceEvents:g||[],highlightQuery:h,onAbort:p,showActivity:f,compact:d}),B&&e(l,{traceLabel:g&&g.length>0?s(g):void 0}),e(n,{ref:y})]})};export{m as default};

package/dist/components/MetricCard.mjs

@@ -1 +1 @@
-import{jsx as r}from"react/jsx-runtime";import{Card as e,CardContent as l}from"@mui/material";import{MetricStat as a}from"./MetricStat.mjs";const o={xs:0,sm:.3,md:.5,lg:1},t=({label:t,value:i,delta:s,deltaColor:m,valueColor:d,size:c,cardSx:x,sx:n})=>{const p=o[c??"md"];return r(e,{sx:[{boxShadow:"none"},...Array.isArray(x)?x:x?[x]:[]],children:r(l,{sx:{p:p,"&:last-child":{pb:p}},children:r(a,{label:t,value:i,delta:s,deltaColor:m,valueColor:d,size:c,sx:n})})})};t.displayName="MetricCard";export{t as MetricCard};
+import{jsx as o}from"react/jsx-runtime";import{Card as r,CardContent as l}from"@mui/material";import{MetricStat as e}from"./MetricStat.mjs";const a={xs:0,sm:.3,md:.5,lg:1},i=({label:i,value:t,delta:s,deltaColor:m,valueColor:c,size:d,icon:n,iconColor:x,cardSx:p,sx:u})=>{const C=a[d??"md"];return o(r,{sx:[{boxShadow:"none"},...Array.isArray(p)?p:p?[p]:[]],children:o(l,{sx:{p:C,"&:last-child":{pb:C}},children:o(e,{label:i,value:t,delta:s,deltaColor:m,valueColor:c,size:d,icon:n,iconColor:x,sx:u})})})};i.displayName="MetricCard";export{i as MetricCard};

package/dist/components/MetricStat.mjs

@@ -1 +1 @@
-import{jsxs as r,jsx as o}from"react/jsx-runtime";import{Stack as e}from"./_Primitives/Stack.mjs";import{H4 as i,MetricValue as a,Caption as l}from"./Typography.mjs";const s=({label:s,value:t,delta:c,deltaColor:n,valueColor:m,size:d,sx:p})=>r(e,{sx:[{gap:.25},...Array.isArray(p)?p:p?[p]:[]],children:[o(i,{sx:{color:"text.secondary"},children:s}),r(e,{direction:"row",sx:{alignItems:"baseline",gap:1},children:[o(a,{size:d,sx:m?{color:m}:void 0,children:t}),c&&o(l,{component:"span",sx:n?{color:n}:void 0,children:c})]})]});s.displayName="MetricStat";export{s as MetricStat};
+import{jsxs as r,jsx as o}from"react/jsx-runtime";import{Stack as e}from"./_Primitives/Stack.mjs";import{H4 as i,MetricValue as l,Caption as t}from"./Typography.mjs";const a=({label:a,value:s,delta:n,deltaColor:c,valueColor:d,size:m,icon:x,iconColor:p,sx:h})=>r(e,{sx:[{gap:.25},...Array.isArray(h)?h:h?[h]:[]],children:[o(i,{sx:{color:"text.secondary"},children:a}),r(e,{direction:"row",sx:{alignItems:"center",gap:1},children:[x&&o(x,{"aria-hidden":"true",sx:{color:p,fontSize:"lg"===m?40:"sm"===m?28:"xs"===m?22:34}}),o(l,{size:m,sx:d?{color:d}:void 0,children:s}),n&&o(t,{component:"span",sx:[{alignSelf:"flex-end"},...c?[{color:c}]:[]],children:n})]})]});a.displayName="MetricStat";export{a as MetricStat};

package/dist/components/SegmentedControl.mjs

@@ -1 +1 @@
-import{jsx as e}from"react/jsx-runtime";import{ToggleButtonGroup as r,ToggleButton as o}from"@mui/material";const t={small:{height:32,px:"14px",fontSize:"0.8125rem"},medium:{height:40,px:"20px",fontSize:"0.9375rem"},large:{height:48,px:"28px",fontSize:"1rem"}};function a({options:a,value:i,onChange:l,ariaLabel:n,size:p="medium",sx:d,...s}){const{height:x,px:g,fontSize:m}=t[p];return e(r,{exclusive:!0,value:i,onChange:(e,r)=>{null!==r&&l(r)},"aria-label":n,sx:[e=>({bgcolor:"dark"===e.palette.mode?"rgba(255,255,255,0.08)":"rgba(255,255,255,0.85)",borderRadius:"999px",border:"1px solid",borderColor:"divider",boxShadow:"inset 0 1px 2px rgba(10, 22, 34, 0.05)",p:"3px",gap:"2px",minHeight:x,width:"fit-content","& .MuiToggleButton-root":{border:"none",borderRadius:"999px !important",textTransform:"none",fontWeight:600,paddingInline:g,paddingBlock:0,fontSize:m,lineHeight:1,alignSelf:"stretch",color:e.palette.text.primary,transition:"background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease","&:not(.Mui-selected):hover":{bgcolor:e.palette.action.hover,color:e.palette.text.primary}},"&& .MuiToggleButton-root.Mui-selected":{bgcolor:e.palette.primary.main,color:e.palette.primary.contrastText,boxShadow:"0 1px 4px rgba(20, 39, 59, 0.3), inset 0 1px 0 rgba(255,255,255,0.12)","&:hover":{bgcolor:e.palette.primary.dark}}}),...Array.isArray(d)?d:d?[d]:[]],...s,children:a.map(r=>e(o,{value:r.value,disabled:r.disabled,"aria-label":r.ariaLabel,children:r.label},r.value))})}export{a as SegmentedControl};
+import{jsx as e}from"react/jsx-runtime";import{ToggleButtonGroup as r,ToggleButton as o}from"@mui/material";const t={small:{height:32,px:"14px",fontSize:"0.8125rem"},medium:{height:40,px:"20px",fontSize:"0.9375rem"},large:{height:48,px:"28px",fontSize:"1rem"}};function a({options:a,value:i,onChange:l,ariaLabel:n,size:p="medium",sx:d,...x}){const{height:s,px:g,fontSize:b}=t[p];return e(r,{exclusive:!0,value:i,onChange:(e,r)=>{null!==r&&l(r)},"aria-label":n,sx:[e=>({bgcolor:"dark"===e.palette.mode?"rgba(255,255,255,0.08)":"rgba(255,255,255,0.85)",borderRadius:"999px",border:"1px solid",borderColor:"divider",boxShadow:"inset 0 1px 2px rgba(10, 22, 34, 0.05)",p:"3px",gap:"4px",minHeight:s,width:"fit-content",maxWidth:"100%",boxSizing:"border-box",flexWrap:"wrap",justifyContent:"center","& .MuiToggleButton-root":{border:"none",borderRadius:"999px !important",textTransform:"none",fontWeight:600,paddingInline:g,paddingBlock:0,fontSize:b,lineHeight:1,whiteSpace:"nowrap",alignSelf:"stretch",color:e.palette.text.primary,transition:"background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease","&:not(.Mui-selected):hover":{bgcolor:e.palette.action.hover,color:e.palette.text.primary}},"&& .MuiToggleButton-root.Mui-selected":{bgcolor:e.palette.primary.main,color:e.palette.primary.contrastText,boxShadow:"0 1px 4px rgba(20, 39, 59, 0.3), inset 0 1px 0 rgba(255,255,255,0.12)","&:hover":{bgcolor:e.palette.primary.dark}}}),...Array.isArray(d)?d:d?[d]:[]],...x,children:a.map(r=>e(o,{value:r.value,disabled:r.disabled,"aria-label":r.ariaLabel,children:r.label},r.value))})}export{a as SegmentedControl};

package/dist/components/SideBlade/SideBlade.mjs

@@ -1 +1 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useTheme as o,useMediaQuery as r,Drawer as n,Box as t,IconButton as l}from"@mui/material";import a from"@mui/icons-material/ChevronLeft";import d from"@mui/icons-material/Menu";const s="0.25s",p=({open:t,onToggle:l,children:a,collapsedContent:d,expandedWidth:p=300,collapsedWidth:x=64,sx:b,headerActions:f})=>{const m=o(),v=r(m.breakpoints.down("sm"));return e(n,v?{anchor:"left",variant:"temporary",open:t,onClose:l,keepMounted:!0,slotProps:{paper:{sx:[{width:p,boxSizing:"border-box",backgroundColor:"background.paper",borderRight:`1px solid ${m.palette.divider}`,overflowX:"hidden"},...Array.isArray(b)?b:b?[b]:[]]}},children:[i(h,{open:t,onToggle:l,collapsedWidth:x,headerActions:f}),i(c,{open:t,collapsedContent:d,children:a})]}:{anchor:"left",variant:"permanent",open:t,slotProps:{paper:{sx:[{position:"relative",width:t?p:x,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box",overflowX:"hidden",transition:`width ${s} ease`,backgroundColor:"background.paper",borderRadius:0,borderRight:`1px solid ${m.palette.divider}`,display:"flex",flexDirection:"column"},...Array.isArray(b)?b:b?[b]:[]]}},sx:{width:t?p:x,flexShrink:0,transition:`width ${s} ease`,"& .MuiDrawer-paper":{width:t?p:x,transition:`width ${s} ease`}},children:[i(h,{open:t,onToggle:l,collapsedWidth:x,headerActions:f}),i(c,{open:t,collapsedContent:d,children:a})]})},c=({open:o,children:r,collapsedContent:n})=>e(t,{sx:{position:"relative",flex:1,overflow:"hidden"},children:[i(t,{sx:{height:"100%",overflowY:"auto",overflowX:"hidden",opacity:o?1:0,visibility:o?"visible":"hidden",transition:`opacity ${s} ease, visibility ${s} ease`},children:r}),n&&i(t,{sx:{position:"absolute",inset:0,overflowY:"auto",overflowX:"hidden",opacity:o?0:1,visibility:o?"hidden":"visible",transition:`opacity ${s} ease, visibility ${s} ease`},children:n})]}),h=({open:o,onToggle:r,collapsedWidth:n,headerActions:s})=>{const p=i(o?a:d,{fontSize:"small"});return e(t,{sx:{display:"flex",alignItems:"center",justifyContent:o&&s?"space-between":o?"flex-end":"center",minHeight:48,px:.5,flexShrink:0},children:[o&&s&&i(t,{sx:{display:"flex",alignItems:"center"},children:s}),i(l,{onClick:r,size:"small","aria-label":o?"Collapse side blade":"Expand side blade",sx:{width:n-16,borderRadius:1,color:"text.secondary","&:hover":{color:"text.primary",backgroundColor:"action.hover"}},children:p})]})};export{p as SideBlade};
+import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useRef as o,useEffect as r}from"react";import{useTheme as n,useMediaQuery as t,Drawer as a,Box as l,IconButton as s}from"@mui/material";import d from"@mui/icons-material/ChevronLeft";import c from"@mui/icons-material/Menu";const p="0.25s",h=({open:l,onToggle:s,mobileOpen:d,onMobileToggle:c,mobileTriggerRef:h,children:m,collapsedContent:x,expandedWidth:f=300,collapsedWidth:g=64,sx:v,headerActions:w})=>{const y=n(),C=t(y.breakpoints.down("sm")),k=o(null),$=o(!1),A=d??l,T=c??s,S=o(C&&A);r(()=>{const e=C&&S.current&&!A;if(S.current=C&&A,!e)return;const i=document.activeElement;i instanceof HTMLElement&&k.current?.contains(i)&&i.blur(),$.current=!0},[C,A]);const E=()=>{const e=document.activeElement;e instanceof HTMLElement&&k.current?.contains(e)&&e.blur(),$.current=!0,T()},R=()=>{$.current&&($.current=!1,h?.current?.focus())};return e(a,C?{ref:k,anchor:"left",variant:"temporary",open:A,onClose:E,disableRestoreFocus:!0,slotProps:{paper:{sx:[{width:f,boxSizing:"border-box",backgroundColor:"background.paper",borderRight:`1px solid ${y.palette.divider}`,overflowX:"hidden"},...Array.isArray(v)?v:v?[v]:[]]},transition:{onExited:R}},children:[i(b,{open:!0,onToggle:E,collapsedWidth:g,headerActions:w,ariaLabel:"Close navigation"}),i(u,{open:!0,children:m})]}:{anchor:"left",variant:"permanent",open:l,slotProps:{paper:{sx:[{position:"relative",width:l?f:g,flexShrink:0,whiteSpace:"nowrap",boxSizing:"border-box",overflowX:"hidden",transition:`width ${p} ease`,backgroundColor:"background.paper",borderRadius:0,borderRight:`1px solid ${y.palette.divider}`,display:"flex",flexDirection:"column"},...Array.isArray(v)?v:v?[v]:[]]}},sx:{width:l?f:g,flexShrink:0,transition:`width ${p} ease`,"& .MuiDrawer-paper":{width:l?f:g,transition:`width ${p} ease`}},children:[i(b,{open:l,onToggle:s,collapsedWidth:g,headerActions:w}),i(u,{open:l,collapsedContent:x,children:m})]})},u=({open:o,children:r,collapsedContent:n})=>e(l,{sx:{position:"relative",flex:1,overflow:"hidden"},children:[i(l,{sx:{height:"100%",overflowY:"auto",overflowX:"hidden",opacity:o?1:0,visibility:o?"visible":"hidden",transition:`opacity ${p} ease, visibility ${p} ease`},children:r}),n&&i(l,{sx:{position:"absolute",inset:0,overflowY:"auto",overflowX:"hidden",opacity:o?0:1,visibility:o?"hidden":"visible",transition:`opacity ${p} ease, visibility ${p} ease`},children:n})]}),b=({open:o,onToggle:r,collapsedWidth:n,headerActions:t,ariaLabel:a})=>{const p=i(o?d:c,{fontSize:"small"});return e(l,{sx:{display:"flex",alignItems:"center",justifyContent:o&&t?"space-between":o?"flex-end":"center",minHeight:48,px:.5,flexShrink:0},children:[o&&t&&i(l,{sx:{display:"flex",alignItems:"center"},children:t}),i(s,{onClick:r,size:"small","aria-label":a??(o?"Collapse side blade":"Expand side blade"),sx:{width:n-16,borderRadius:1,color:"text.secondary","&:hover":{color:"text.primary",backgroundColor:"action.hover"}},children:p})]})};export{h as SideBlade};

package/dist/generated/version.mjs

@@ -1 +1 @@
-const o="2.7.0";export{o as SAGE_NEXUS_UI_VERSION};
+const o="2.8.1";export{o as SAGE_NEXUS_UI_VERSION};

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 import * as react from 'react';
-import react__default, { ReactNode, ReactElement, FormEventHandler, ComponentType, CSSProperties, PropsWithChildren } from 'react';
+import react__default, { ReactNode, Ref, ReactElement, FormEventHandler, RefObject, ComponentType, CSSProperties, PropsWithChildren } from 'react';
 import { AlertProps, BoxProps, SxProps as SxProps$1, Theme as Theme$1, TypographyProps, ContainerProps, GridProps, LinkProps as LinkProps$1, SelectProps as SelectProps$1, ToggleButtonGroupProps, SwitchProps, SliderProps, AccordionSummaryProps, ButtonProps, ChipProps, CardProps as CardProps$1, PaperProps, CircularProgressProps, CollapseProps, ButtonBaseProps, CheckboxProps, FormControlLabelProps, FormGroupProps, DialogProps, DialogActionsProps, DialogContentProps, DialogContentTextProps, DialogTitleProps, DividerProps, TableProps, TableBodyProps, TableCellProps, TableHeadProps, TableRowProps, IconButtonProps as IconButtonProps$1, SkeletonProps as SkeletonProps$1, StackProps, TabProps, TabsProps, TextFieldProps, TooltipProps as TooltipProps$1 } from '@mui/material';
 export { AlertProps, AlertTitle, BoxProps, ButtonBaseProps, CheckboxProps, ChipProps, CircularProgressProps, CollapseProps, ContainerProps, DialogActionsProps, DialogContentProps, DialogContentTextProps, DialogProps, DialogTitleProps, DividerProps, FormControlLabelProps, FormGroupProps, GridProps, MenuItem, PaperProps, SliderProps, StackProps, SwitchProps, TabProps, TableBodyProps, TableCellProps, TableHeadProps, TableProps, TableRowProps, TabsProps, TextFieldProps, Theme, alpha, useMediaQuery, useTheme } from '@mui/material';
 import { SxProps, Theme } from '@mui/material/styles';
 import { Components } from 'react-markdown';
+import SvgIcon from '@mui/material/SvgIcon';
 import { DataGridProps } from '@mui/x-data-grid';
 export { DataGridProps, GridColDef, GridColumnVisibilityModel, GridPaginationModel, GridRenderCellParams, GridRowsProp, GridSortModel, GridValueGetter } from '@mui/x-data-grid';
 import { SxProps as SxProps$2 } from '@mui/system';
@@ -594,6 +595,10 @@ interface MetricStatProps {
     valueColor?: string;
     /** Size passed to MetricValue. Defaults to 'md' (2rem / 32px). */
     size?: MetricValueSize;
+    /** Optional icon rendered horizontally beside the metric value. */
+    icon?: typeof SvgIcon;
+    /** MUI theme colour token for the icon. Omit for default text colour. */
+    iconColor?: string;
     sx?: SxProps<Theme>;
 }
 /**
@@ -608,7 +613,7 @@ interface MetricStatProps {
  * large p — not a heading), and the delta is a Caption.
  */
 declare const MetricStat: {
-    ({ label, value, delta, deltaColor, valueColor, size, sx }: MetricStatProps): react.JSX.Element;
+    ({ label, value, delta, deltaColor, valueColor, size, icon: Icon, iconColor, sx, }: MetricStatProps): react.JSX.Element;
     displayName: string;
 };
 
@@ -627,7 +632,7 @@ interface MetricCardProps extends MetricStatProps {
  * ```
  */
 declare const MetricCard: {
-    ({ label, value, delta, deltaColor, valueColor, size, cardSx, sx, }: MetricCardProps): react.JSX.Element;
+    ({ label, value, delta, deltaColor, valueColor, size, icon, iconColor, cardSx, sx, }: MetricCardProps): react.JSX.Element;
     displayName: string;
 };
 
@@ -638,8 +643,13 @@ interface ActionBarProps {
     homeHref?: string;
     showHome?: boolean;
     logo?: ReactNode;
+    mobileNavigation?: {
+        open: boolean;
+        onToggle: () => void;
+        buttonRef?: Ref<HTMLButtonElement>;
+    };
 }
-declare const ActionBar: ({ title, extraLeft, extraRight, homeHref, showHome, logo, }: ActionBarProps) => ReactElement;
+declare const ActionBar: ({ title, extraLeft, extraRight, homeHref, showHome, logo, mobileNavigation, }: ActionBarProps) => ReactElement;
 
 interface AccordionGroupProps {
     children: ReactNode;
@@ -1129,6 +1139,9 @@ declare const SearchInput: react__default.FC<SearchInputProps>;
 interface SideBladeProps {
     open: boolean;
     onToggle: () => void;
+    mobileOpen?: boolean;
+    onMobileToggle?: () => void;
+    mobileTriggerRef?: RefObject<HTMLButtonElement | null>;
     children?: ReactNode;
     collapsedContent?: ReactNode; /** Width of the blade when expanded (px). Default: 300 */
     expandedWidth?: number; /** Width of the blade when collapsed (px). Default: 64 */
@@ -1142,7 +1155,7 @@ interface SideBladeProps {
  * On mobile (< sm) it becomes a full temporary overlay drawer.
  * Content is fully customisable via `children`.
  */
-declare const SideBlade: ({ open, onToggle, children, collapsedContent, expandedWidth, collapsedWidth, sx, headerActions, }: SideBladeProps) => react.JSX.Element;
+declare const SideBlade: ({ open, onToggle, mobileOpen, onMobileToggle, mobileTriggerRef, children, collapsedContent, expandedWidth, collapsedWidth, sx, headerActions, }: SideBladeProps) => react.JSX.Element;
 
 interface SideBladeNavItem {
     label: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "it-data-nexus-ui-library",
-  "version": "2.7.0",
+  "version": "2.8.1",
   "description": "Nexus core components",
   "license": "ISC",
   "author": "emsmart-sage",