cortex-react-components 2.26.5 → 2.28.0

package/dist/components/AdvancedComponents/notifications-panel.mjs

@@ -1,2 +1,2 @@
 "use client";
-"use strict";import{a}from"../../chunk-MU5WPW4N.mjs";import"../../chunk-FT3AE7L2.mjs";import"../../chunk-ZUA4KNIR.mjs";import"../../chunk-CSBGSBEU.mjs";import"../../chunk-QTW33JYG.mjs";import"../../chunk-MDJREBVI.mjs";import"../../chunk-ZWHGOTSF.mjs";import"../../chunk-Q3G5UAAD.mjs";import"../../chunk-XGRRLABA.mjs";import"../../chunk-YEKQJ4YC.mjs";export{a as NotificationsPanel};
+"use strict";import{a}from"../../chunk-MU5WPW4N.mjs";import"../../chunk-FT3AE7L2.mjs";import"../../chunk-ZUA4KNIR.mjs";import"../../chunk-CSBGSBEU.mjs";import"../../chunk-MDJREBVI.mjs";import"../../chunk-ZWHGOTSF.mjs";import"../../chunk-Q3G5UAAD.mjs";import"../../chunk-XGRRLABA.mjs";import"../../chunk-QTW33JYG.mjs";import"../../chunk-YEKQJ4YC.mjs";export{a as NotificationsPanel};

package/dist/components/AdvancedComponents/org-chart-component/CompanyNode.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CompanyInfo } from './types';
+interface CompanyNodeProps {
+    companyInfo: CompanyInfo;
+}
+export declare const CompanyNode: React.FC<CompanyNodeProps>;
+export {};

package/dist/components/AdvancedComponents/org-chart-component/CompanyNode.js

@@ -0,0 +1 @@
+"use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var d=Object.getOwnPropertyNames;var i=Object.prototype.hasOwnProperty;var c=(e,r)=>{for(var o in r)s(e,o,{get:r[o],enumerable:!0})},n=(e,r,o,l)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of d(r))!i.call(e,a)&&a!==o&&s(e,a,{get:()=>r[a],enumerable:!(l=m(r,a))||l.enumerable});return e};var p=e=>n(s({},"__esModule",{value:!0}),e);var u={};c(u,{CompanyNode:()=>f});module.exports=p(u);var t=require("react/jsx-runtime"),f=({companyInfo:e})=>(0,t.jsxs)("div",{className:"flex flex-col items-center",children:[(0,t.jsx)("div",{className:"w-16 h-16 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center shadow-sm",children:e.logo?.url?(0,t.jsx)("img",{src:e.logo.url,alt:e.logo.alt||e.name,className:"w-12 h-12 rounded-full object-cover"}):(0,t.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center",children:(0,t.jsx)("span",{className:"text-xs font-bold text-primary",children:e.name.split(" ").map(r=>r[0]).join("").slice(0,3).toUpperCase()})})}),(0,t.jsx)("div",{className:"mt-2 text-center",children:(0,t.jsx)("p",{className:"text-sm font-semibold text-card-foreground",children:e.name})}),(0,t.jsx)("div",{className:"w-0.5 h-1 bg-border mt-2"})]});0&&(module.exports={CompanyNode});

package/dist/components/AdvancedComponents/org-chart-component/CompanyNode.mjs

@@ -0,0 +1 @@
+import{a}from"../../../chunk-6UULUGR2.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{a as CompanyNode};

package/dist/components/AdvancedComponents/org-chart-component/OrgChart.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { OrgChartProps } from './types';
+/**
+ * OrgChart Component
+ *
+ * Displays an organizational hierarchy chart based on user data.
+ *
+ * @param users - Array of user objects with manager relationships
+ * @param onNodeClick - Optional callback when a node is clicked
+ * @param className - Optional additional CSS classes
+ * @param expandable - Whether nodes can be collapsed/expanded (default: false)
+ * @param initiallyExpanded - Whether nodes start expanded (default: true)
+ * @param companyInfo - Optional company information (name, logo) to display at the top
+ * @param defaultExpandedLevels - Number of levels to show expanded by default (default: 2)
+ */
+export declare const OrgChart: React.FC<OrgChartProps>;
+export default OrgChart;

package/dist/components/AdvancedComponents/org-chart-component/OrgChart.js

@@ -0,0 +1,12 @@
+"use strict";var R=Object.defineProperty;var W=Object.getOwnPropertyDescriptor;var z=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var H=(e,r)=>{for(var n in r)R(e,n,{get:r[n],enumerable:!0})},A=(e,r,n,d)=>{if(r&&typeof r=="object"||typeof r=="function")for(let t of z(r))!F.call(e,t)&&t!==n&&R(e,t,{get:()=>r[t],enumerable:!(d=W(r,t))||d.enumerable});return e};var D=e=>A(R({},"__esModule",{value:!0}),e);var G={};H(G,{OrgChart:()=>$,default:()=>q});module.exports=D(G);function k(e){let r=new Map,n=[];e.forEach(t=>{r.set(t.id,{...t,children:[],level:0})}),e.forEach(t=>{let a=r.get(t.id);if(!a)return;let s=typeof t.manager=="string"?t.manager:t.manager?.id;if(s){let i=r.get(s);i?(i.children.push(a),a.level=i.level+1):n.push(a)}else n.push(a)});let d=(t,a)=>{t.level=a,t.children.forEach(s=>d(s,a+1))};return n.forEach(t=>d(t,0)),n}function M(e){if(!e)return"?";let r=e.trim().split(/\s+/);return r.length===1?r[0].substring(0,2).toUpperCase():(r[0][0]+r[r.length-1][0]).toUpperCase()}function T(e){return e&&{P:"bg-primary/20 text-primary border-primary/30",SM:"bg-accent/20 text-accent border-accent/30",M:"bg-accent/15 text-accent border-accent/25",SC2:"bg-card text-card-foreground border-border",SC1:"bg-card text-card-foreground border-border",C3:"bg-muted text-muted-foreground border-border",C2:"bg-muted text-muted-foreground border-border",C1:"bg-muted text-muted-foreground border-border"}[e]||"bg-muted text-muted-foreground"}var g=require("react");var j={P:"Partner",SM:"Senior Manager",M:"Manager",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3"};var o=require("react/jsx-runtime"),L=({node:e,onNodeClick:r,expandable:n=!1,isExpanded:d=!0,onToggleExpand:t})=>{let a=e.children.length>0,s=n&&a;return(0,o.jsx)("div",{className:"flex flex-col items-center",children:(0,o.jsxs)("div",{className:`
+          relative bg-card border border-border rounded-lg shadow-sm
+          transition-all duration-200 hover:shadow-md hover:border-primary/50
+          ${r?"cursor-pointer":""}
+          w-64 p-4 min-h-[180px] flex flex-col
+        `,onClick:()=>r?.(e),children:[(0,o.jsxs)("div",{className:"flex items-start gap-3",children:[(0,o.jsx)("div",{className:"flex-shrink-0",children:e.profilePicture?.url?(0,o.jsx)("img",{src:e.profilePicture.url,alt:e.profilePicture.alt||e.name,className:"w-12 h-12 rounded-full object-cover border-2 border-primary/20"}):(0,o.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center",children:(0,o.jsx)("span",{className:"text-sm font-semibold text-primary",children:M(e.name)})})}),(0,o.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,o.jsx)("h3",{className:"font-semibold text-card-foreground text-sm truncate",children:e.name}),(0,o.jsx)("p",{className:"text-xs text-muted-foreground truncate",children:e.email}),e.jobRole&&(0,o.jsx)("div",{className:"mt-2",children:(0,o.jsx)("span",{className:`
+                    inline-block px-2 py-0.5 rounded text-xs font-medium border
+                    ${T(e.jobRole)}
+                  `,children:j[e.jobRole]})})]})]}),(0,o.jsx)("div",{className:"mt-3 pt-3 border-t border-border flex-1 flex flex-col justify-start",children:e.about?(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)("p",{className:"text-xs text-muted-foreground line-clamp-2",title:e.about.length>100?e.about:void 0,children:e.about}),e.about.length>100&&(0,o.jsx)("div",{className:"mt-1 text-xs text-muted-foreground/70 italic",children:"Hover to see full description"})]}):(0,o.jsx)("div",{className:"text-xs text-muted-foreground/50 italic",children:"No description available"})}),s&&(0,o.jsx)("button",{onClick:i=>{i.stopPropagation(),t?.()},className:"absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-card border-2 border-border hover:border-primary/50 flex items-center justify-center transition-colors z-30","aria-label":d?"Collapse":"Expand",children:(0,o.jsx)("svg",{className:`w-3 h-3 text-muted-foreground transition-transform ${d?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,o.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})})};var U=({companyInfo:e})=>(0,o.jsxs)("div",{className:"flex flex-col items-center",children:[(0,o.jsx)("div",{className:"w-16 h-16 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center shadow-sm",children:e.logo?.url?(0,o.jsx)("img",{src:e.logo.url,alt:e.logo.alt||e.name,className:"w-12 h-12 rounded-full object-cover"}):(0,o.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center",children:(0,o.jsx)("span",{className:"text-xs font-bold text-primary",children:e.name.split(" ").map(r=>r[0]).join("").slice(0,3).toUpperCase()})})}),(0,o.jsx)("div",{className:"mt-2 text-center",children:(0,o.jsx)("p",{className:"text-sm font-semibold text-card-foreground",children:e.name})}),(0,o.jsx)("div",{className:"w-0.5 h-1 bg-border mt-2"})]});var I=(e,r)=>({...e,level:e.level+r,children:e.children.map(n=>I(n,r))}),S=({nodes:e,onNodeClick:r,expandable:n=!1,initiallyExpanded:d=!0,companyInfo:t,defaultExpandedLevels:a=2})=>{if(t&&e.length>1){let s=e.map(i=>({...i,level:i.level+1,children:i.children.map(y=>I(y,1))}));return(0,o.jsx)(E,{node:{id:"company",name:t.name,email:"",children:s,level:0},onNodeClick:r,expandable:n,initiallyExpanded:d,isCompanyNode:!0,companyInfo:t,defaultExpandedLevels:a})}return(0,o.jsx)("div",{className:"flex flex-col items-center gap-0",children:e.map((s,i)=>(0,o.jsx)(E,{node:s,onNodeClick:r,expandable:n,initiallyExpanded:d,isLast:i===e.length-1,defaultExpandedLevels:a},s.id))})},E=({node:e,onNodeClick:r,expandable:n,initiallyExpanded:d=!0,isLast:t=!1,isCompanyNode:a=!1,companyInfo:s,defaultExpandedLevels:i=2})=>{let y=a||e.level<i,[f,B]=(0,g.useState)(y),x=e.children.length>0,h=(0,g.useRef)(null),[b,O]=(0,g.useState)({childPositions:[],containerWidth:0});return(0,g.useEffect)(()=>{if(!x||!f||!h.current){O({childPositions:[],containerWidth:0});return}let u=setTimeout(()=>{let p=h.current;if(!p)return;let v=Array.from(p.children);if(v.length===0)return;let C=p.getBoundingClientRect(),w=v.map(P=>{let N=P.getBoundingClientRect();return N.left+N.width/2-C.left});O({childPositions:w,containerWidth:C.width})},0);return()=>clearTimeout(u)},[x,f,e.children.length]),(0,g.useEffect)(()=>{if(!x||!f)return;let u=new ResizeObserver(()=>{if(!h.current)return;let p=h.current,v=Array.from(p.children);if(v.length===0)return;let C=p.getBoundingClientRect(),w=v.map(P=>{let N=P.getBoundingClientRect();return N.left+N.width/2-C.left});O({childPositions:w,containerWidth:C.width})});return h.current&&u.observe(h.current),()=>u.disconnect()},[x,f]),(0,o.jsxs)("div",{className:`flex flex-col items-center ${t?"":"mb-8"}`,children:[a&&s?(0,o.jsx)(U,{companyInfo:s}):(0,o.jsx)(L,{node:e,onNodeClick:r,expandable:n,isExpanded:f,onToggleExpand:()=>B(!f)}),x&&f&&(0,o.jsxs)("div",{className:"relative",children:[e.children.length>1&&b.childPositions.length>0&&(0,o.jsxs)("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 pointer-events-none z-10",children:[(0,o.jsx)("div",{className:"absolute top-0 left-0 w-0.5 h-8 bg-border -translate-x-1/2"}),(0,o.jsx)("div",{className:"absolute top-8 h-0.5 bg-border",style:{left:`${Math.min(...b.childPositions)-b.containerWidth/2}px`,width:`${Math.max(...b.childPositions)-Math.min(...b.childPositions)}px`}}),b.childPositions.map((u,p)=>(0,o.jsx)("div",{className:"absolute w-0.5 bg-border -translate-x-1/2",style:{left:`${u-b.containerWidth/2}px`,top:"32px",height:"32px"}},p))]}),e.children.length===1&&(0,o.jsx)("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 w-0.5 h-16 bg-border pointer-events-none z-10"}),(0,o.jsx)("div",{className:"mt-16 w-full overflow-x-auto",children:(0,o.jsx)("div",{ref:h,className:`
+                flex gap-8 pb-4
+                ${e.children.length===1?"justify-center":"justify-start min-w-max px-4"}
+              `,children:e.children.map(u=>(0,o.jsx)("div",{className:"flex-shrink-0",children:(0,o.jsx)(E,{node:u,onNodeClick:r,expandable:n,initiallyExpanded:d,defaultExpandedLevels:i})},u.id))})})]})]})};var $=({users:e,onNodeClick:r,className:n="",expandable:d=!1,initiallyExpanded:t=!0,companyInfo:a,defaultExpandedLevels:s=2})=>{let i=k(e);return e.length===0?(0,o.jsx)("div",{className:`flex items-center justify-center p-8 ${n}`,children:(0,o.jsx)("div",{className:"text-center",children:(0,o.jsx)("p",{className:"text-muted-foreground",children:"No users to display"})})}):i.length===0?(0,o.jsx)("div",{className:`flex items-center justify-center p-8 ${n}`,children:(0,o.jsxs)("div",{className:"text-center",children:[(0,o.jsx)("p",{className:"text-muted-foreground",children:"Unable to build organization tree"}),(0,o.jsx)("p",{className:"text-xs text-muted-foreground mt-1",children:"Check that manager relationships are properly configured"})]})}):(0,o.jsx)("div",{className:`org-chart w-full overflow-x-auto ${n}`,children:(0,o.jsx)("div",{className:"inline-block min-w-full p-8",children:(0,o.jsx)(S,{nodes:i,onNodeClick:r,expandable:d,initiallyExpanded:t,companyInfo:i.length>1?a:void 0,defaultExpandedLevels:s})})})},q=$;0&&(module.exports={OrgChart});

package/dist/components/AdvancedComponents/org-chart-component/OrgChart.mjs

@@ -0,0 +1 @@
+import{a,b}from"../../../chunk-ZLFZBT3K.mjs";import"../../../chunk-LEZ6G4X7.mjs";import"../../../chunk-6UULUGR2.mjs";import"../../../chunk-DNMM3Q72.mjs";import"../../../chunk-VFIMFZX5.mjs";import"../../../chunk-32G45Z2G.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{a as OrgChart,b as default};

package/dist/components/AdvancedComponents/org-chart-component/OrgNode.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OrgNodeProps } from './types';
+export declare const OrgNode: React.FC<OrgNodeProps>;

package/dist/components/AdvancedComponents/org-chart-component/OrgNode.js

@@ -0,0 +1,9 @@
+"use strict";var s=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(r,t)=>{for(var a in t)s(r,a,{get:t[a],enumerable:!0})},x=(r,t,a,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of p(t))!b.call(r,o)&&o!==a&&s(r,o,{get:()=>t[o],enumerable:!(n=m(t,o))||n.enumerable});return r};var h=r=>x(s({},"__esModule",{value:!0}),r);var v={};f(v,{OrgNode:()=>C});module.exports=h(v);function i(r){if(!r)return"?";let t=r.trim().split(/\s+/);return t.length===1?t[0].substring(0,2).toUpperCase():(t[0][0]+t[t.length-1][0]).toUpperCase()}function l(r){return r&&{P:"bg-primary/20 text-primary border-primary/30",SM:"bg-accent/20 text-accent border-accent/30",M:"bg-accent/15 text-accent border-accent/25",SC2:"bg-card text-card-foreground border-border",SC1:"bg-card text-card-foreground border-border",C3:"bg-muted text-muted-foreground border-border",C2:"bg-muted text-muted-foreground border-border",C1:"bg-muted text-muted-foreground border-border"}[r]||"bg-muted text-muted-foreground"}var d={P:"Partner",SM:"Senior Manager",M:"Manager",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3"};var e=require("react/jsx-runtime"),C=({node:r,onNodeClick:t,expandable:a=!1,isExpanded:n=!0,onToggleExpand:o})=>{let c=r.children.length>0,g=a&&c;return(0,e.jsx)("div",{className:"flex flex-col items-center",children:(0,e.jsxs)("div",{className:`
+          relative bg-card border border-border rounded-lg shadow-sm
+          transition-all duration-200 hover:shadow-md hover:border-primary/50
+          ${t?"cursor-pointer":""}
+          w-64 p-4 min-h-[180px] flex flex-col
+        `,onClick:()=>t?.(r),children:[(0,e.jsxs)("div",{className:"flex items-start gap-3",children:[(0,e.jsx)("div",{className:"flex-shrink-0",children:r.profilePicture?.url?(0,e.jsx)("img",{src:r.profilePicture.url,alt:r.profilePicture.alt||r.name,className:"w-12 h-12 rounded-full object-cover border-2 border-primary/20"}):(0,e.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center",children:(0,e.jsx)("span",{className:"text-sm font-semibold text-primary",children:i(r.name)})})}),(0,e.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,e.jsx)("h3",{className:"font-semibold text-card-foreground text-sm truncate",children:r.name}),(0,e.jsx)("p",{className:"text-xs text-muted-foreground truncate",children:r.email}),r.jobRole&&(0,e.jsx)("div",{className:"mt-2",children:(0,e.jsx)("span",{className:`
+                    inline-block px-2 py-0.5 rounded text-xs font-medium border
+                    ${l(r.jobRole)}
+                  `,children:d[r.jobRole]})})]})]}),(0,e.jsx)("div",{className:"mt-3 pt-3 border-t border-border flex-1 flex flex-col justify-start",children:r.about?(0,e.jsxs)(e.Fragment,{children:[(0,e.jsx)("p",{className:"text-xs text-muted-foreground line-clamp-2",title:r.about.length>100?r.about:void 0,children:r.about}),r.about.length>100&&(0,e.jsx)("div",{className:"mt-1 text-xs text-muted-foreground/70 italic",children:"Hover to see full description"})]}):(0,e.jsx)("div",{className:"text-xs text-muted-foreground/50 italic",children:"No description available"})}),g&&(0,e.jsx)("button",{onClick:u=>{u.stopPropagation(),o?.()},className:"absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-card border-2 border-border hover:border-primary/50 flex items-center justify-center transition-colors z-30","aria-label":n?"Collapse":"Expand",children:(0,e.jsx)("svg",{className:`w-3 h-3 text-muted-foreground transition-transform ${n?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,e.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})})};0&&(module.exports={OrgNode});

package/dist/components/AdvancedComponents/org-chart-component/OrgNode.mjs

@@ -0,0 +1 @@
+import{a}from"../../../chunk-DNMM3Q72.mjs";import"../../../chunk-VFIMFZX5.mjs";import"../../../chunk-32G45Z2G.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{a as OrgNode};

package/dist/components/AdvancedComponents/org-chart-component/OrgTree.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { OrgChartNode, OrgChartUser } from './types';
+interface CompanyInfo {
+    name: string;
+    logo?: {
+        url: string;
+        alt?: string;
+    };
+}
+interface OrgTreeProps {
+    nodes: OrgChartNode[];
+    onNodeClick?: (user: OrgChartUser) => void;
+    expandable?: boolean;
+    initiallyExpanded?: boolean;
+    companyInfo?: CompanyInfo;
+    defaultExpandedLevels?: number;
+}
+export declare const OrgTree: React.FC<OrgTreeProps>;
+export {};

package/dist/components/AdvancedComponents/org-chart-component/OrgTree.js

@@ -0,0 +1,12 @@
+"use strict";var w=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var I=Object.getOwnPropertyNames;var B=Object.prototype.hasOwnProperty;var W=(e,r)=>{for(var n in r)w(e,n,{get:r[n],enumerable:!0})},$=(e,r,n,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let a of I(r))!B.call(e,a)&&a!==n&&w(e,a,{get:()=>r[a],enumerable:!(i=U(r,a))||i.enumerable});return e};var z=e=>$(w({},"__esModule",{value:!0}),e);var H={};W(H,{OrgTree:()=>F});module.exports=z(H);var u=require("react");function E(e){if(!e)return"?";let r=e.trim().split(/\s+/);return r.length===1?r[0].substring(0,2).toUpperCase():(r[0][0]+r[r.length-1][0]).toUpperCase()}function k(e){return e&&{P:"bg-primary/20 text-primary border-primary/30",SM:"bg-accent/20 text-accent border-accent/30",M:"bg-accent/15 text-accent border-accent/25",SC2:"bg-card text-card-foreground border-border",SC1:"bg-card text-card-foreground border-border",C3:"bg-muted text-muted-foreground border-border",C2:"bg-muted text-muted-foreground border-border",C1:"bg-muted text-muted-foreground border-border"}[e]||"bg-muted text-muted-foreground"}var M={P:"Partner",SM:"Senior Manager",M:"Manager",SC1:"Senior Consultant 1",SC2:"Senior Consultant 2",C1:"Consultant 1",C2:"Consultant 2",C3:"Consultant 3"};var t=require("react/jsx-runtime"),j=({node:e,onNodeClick:r,expandable:n=!1,isExpanded:i=!0,onToggleExpand:a})=>{let g=e.children.length>0,d=n&&g;return(0,t.jsx)("div",{className:"flex flex-col items-center",children:(0,t.jsxs)("div",{className:`
+          relative bg-card border border-border rounded-lg shadow-sm
+          transition-all duration-200 hover:shadow-md hover:border-primary/50
+          ${r?"cursor-pointer":""}
+          w-64 p-4 min-h-[180px] flex flex-col
+        `,onClick:()=>r?.(e),children:[(0,t.jsxs)("div",{className:"flex items-start gap-3",children:[(0,t.jsx)("div",{className:"flex-shrink-0",children:e.profilePicture?.url?(0,t.jsx)("img",{src:e.profilePicture.url,alt:e.profilePicture.alt||e.name,className:"w-12 h-12 rounded-full object-cover border-2 border-primary/20"}):(0,t.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center",children:(0,t.jsx)("span",{className:"text-sm font-semibold text-primary",children:E(e.name)})})}),(0,t.jsxs)("div",{className:"flex-1 min-w-0",children:[(0,t.jsx)("h3",{className:"font-semibold text-card-foreground text-sm truncate",children:e.name}),(0,t.jsx)("p",{className:"text-xs text-muted-foreground truncate",children:e.email}),e.jobRole&&(0,t.jsx)("div",{className:"mt-2",children:(0,t.jsx)("span",{className:`
+                    inline-block px-2 py-0.5 rounded text-xs font-medium border
+                    ${k(e.jobRole)}
+                  `,children:M[e.jobRole]})})]})]}),(0,t.jsx)("div",{className:"mt-3 pt-3 border-t border-border flex-1 flex flex-col justify-start",children:e.about?(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)("p",{className:"text-xs text-muted-foreground line-clamp-2",title:e.about.length>100?e.about:void 0,children:e.about}),e.about.length>100&&(0,t.jsx)("div",{className:"mt-1 text-xs text-muted-foreground/70 italic",children:"Hover to see full description"})]}):(0,t.jsx)("div",{className:"text-xs text-muted-foreground/50 italic",children:"No description available"})}),d&&(0,t.jsx)("button",{onClick:s=>{s.stopPropagation(),a?.()},className:"absolute -bottom-3 left-1/2 -translate-x-1/2 w-6 h-6 rounded-full bg-card border-2 border-border hover:border-primary/50 flex items-center justify-center transition-colors z-30","aria-label":i?"Collapse":"Expand",children:(0,t.jsx)("svg",{className:`w-3 h-3 text-muted-foreground transition-transform ${i?"rotate-180":""}`,fill:"none",viewBox:"0 0 24 24",stroke:"currentColor",children:(0,t.jsx)("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 9l-7 7-7-7"})})})]})})};var L=({companyInfo:e})=>(0,t.jsxs)("div",{className:"flex flex-col items-center",children:[(0,t.jsx)("div",{className:"w-16 h-16 rounded-full bg-primary/10 border-2 border-primary/20 flex items-center justify-center shadow-sm",children:e.logo?.url?(0,t.jsx)("img",{src:e.logo.url,alt:e.logo.alt||e.name,className:"w-12 h-12 rounded-full object-cover"}):(0,t.jsx)("div",{className:"w-12 h-12 rounded-full bg-primary/20 flex items-center justify-center",children:(0,t.jsx)("span",{className:"text-xs font-bold text-primary",children:e.name.split(" ").map(r=>r[0]).join("").slice(0,3).toUpperCase()})})}),(0,t.jsx)("div",{className:"mt-2 text-center",children:(0,t.jsx)("p",{className:"text-sm font-semibold text-card-foreground",children:e.name})}),(0,t.jsx)("div",{className:"w-0.5 h-1 bg-border mt-2"})]});var T=(e,r)=>({...e,level:e.level+r,children:e.children.map(n=>T(n,r))}),F=({nodes:e,onNodeClick:r,expandable:n=!1,initiallyExpanded:i=!0,companyInfo:a,defaultExpandedLevels:g=2})=>{if(a&&e.length>1){let d=e.map(s=>({...s,level:s.level+1,children:s.children.map(N=>T(N,1))}));return(0,t.jsx)(R,{node:{id:"company",name:a.name,email:"",children:d,level:0},onNodeClick:r,expandable:n,initiallyExpanded:i,isCompanyNode:!0,companyInfo:a,defaultExpandedLevels:g})}return(0,t.jsx)("div",{className:"flex flex-col items-center gap-0",children:e.map((d,s)=>(0,t.jsx)(R,{node:d,onNodeClick:r,expandable:n,initiallyExpanded:i,isLast:s===e.length-1,defaultExpandedLevels:g},d.id))})},R=({node:e,onNodeClick:r,expandable:n,initiallyExpanded:i=!0,isLast:a=!1,isCompanyNode:g=!1,companyInfo:d,defaultExpandedLevels:s=2})=>{let N=g||e.level<s,[p,S]=(0,u.useState)(N),b=e.children.length>0,f=(0,u.useRef)(null),[h,y]=(0,u.useState)({childPositions:[],containerWidth:0});return(0,u.useEffect)(()=>{if(!b||!p||!f.current){y({childPositions:[],containerWidth:0});return}let c=setTimeout(()=>{let m=f.current;if(!m)return;let x=Array.from(m.children);if(x.length===0)return;let v=m.getBoundingClientRect(),O=x.map(P=>{let C=P.getBoundingClientRect();return C.left+C.width/2-v.left});y({childPositions:O,containerWidth:v.width})},0);return()=>clearTimeout(c)},[b,p,e.children.length]),(0,u.useEffect)(()=>{if(!b||!p)return;let c=new ResizeObserver(()=>{if(!f.current)return;let m=f.current,x=Array.from(m.children);if(x.length===0)return;let v=m.getBoundingClientRect(),O=x.map(P=>{let C=P.getBoundingClientRect();return C.left+C.width/2-v.left});y({childPositions:O,containerWidth:v.width})});return f.current&&c.observe(f.current),()=>c.disconnect()},[b,p]),(0,t.jsxs)("div",{className:`flex flex-col items-center ${a?"":"mb-8"}`,children:[g&&d?(0,t.jsx)(L,{companyInfo:d}):(0,t.jsx)(j,{node:e,onNodeClick:r,expandable:n,isExpanded:p,onToggleExpand:()=>S(!p)}),b&&p&&(0,t.jsxs)("div",{className:"relative",children:[e.children.length>1&&h.childPositions.length>0&&(0,t.jsxs)("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 pointer-events-none z-10",children:[(0,t.jsx)("div",{className:"absolute top-0 left-0 w-0.5 h-8 bg-border -translate-x-1/2"}),(0,t.jsx)("div",{className:"absolute top-8 h-0.5 bg-border",style:{left:`${Math.min(...h.childPositions)-h.containerWidth/2}px`,width:`${Math.max(...h.childPositions)-Math.min(...h.childPositions)}px`}}),h.childPositions.map((c,m)=>(0,t.jsx)("div",{className:"absolute w-0.5 bg-border -translate-x-1/2",style:{left:`${c-h.containerWidth/2}px`,top:"32px",height:"32px"}},m))]}),e.children.length===1&&(0,t.jsx)("div",{className:"absolute top-0 left-1/2 -translate-x-1/2 w-0.5 h-16 bg-border pointer-events-none z-10"}),(0,t.jsx)("div",{className:"mt-16 w-full overflow-x-auto",children:(0,t.jsx)("div",{ref:f,className:`
+                flex gap-8 pb-4
+                ${e.children.length===1?"justify-center":"justify-start min-w-max px-4"}
+              `,children:e.children.map(c=>(0,t.jsx)("div",{className:"flex-shrink-0",children:(0,t.jsx)(R,{node:c,onNodeClick:r,expandable:n,initiallyExpanded:i,defaultExpandedLevels:s})},c.id))})})]})]})};0&&(module.exports={OrgTree});

package/dist/components/AdvancedComponents/org-chart-component/OrgTree.mjs

@@ -0,0 +1 @@
+import{a}from"../../../chunk-LEZ6G4X7.mjs";import"../../../chunk-6UULUGR2.mjs";import"../../../chunk-DNMM3Q72.mjs";import"../../../chunk-VFIMFZX5.mjs";import"../../../chunk-32G45Z2G.mjs";import"../../../chunk-YEKQJ4YC.mjs";export{a as OrgTree};

package/dist/components/AdvancedComponents/org-chart-component/examples/PayloadIntegration.js

@@ -0,0 +1,233 @@
+var a=`
+\`\`\`js
+/**
+ * Example: Integrating OrgChart with PayloadCMS3
+ * 
+ * This example shows how to fetch user data from Payload using the client SDK
+ * and render it in the OrgChart component.
+ */
+
+import React from 'react';
+import { OrgChart } from '../OrgChart';
+import type { User } from '../types';
+
+/**
+ * Server Component Example (Next.js App Router)
+ * 
+ * Use this approach in a server component to fetch data at build/request time.
+ */
+export async function OrgChartServerComponent() {
+  // Import Payload config (adjust path to your project structure)
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  // Get Payload instance
+  const payload = await getPayload({ config });
+  
+  // Fetch all users with manager relationships
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2, // Include manager relationship data
+    limit: 1000, // Adjust based on your org size
+  });
+  
+  // Transform Payload data to OrgChart format
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Organization Chart</h1>
+      <OrgChart 
+        users={users} 
+        expandable={true}
+        initiallyExpanded={true}
+      />
+    </div>
+  );
+}
+
+/**
+ * Client Component Example (with Server Action or API Route)
+ * 
+ * Use this approach when you need client-side interactivity.
+ */
+'use client';
+
+interface OrgChartClientComponentProps {
+  initialUsers: User[];
+}
+
+export function OrgChartClientComponent({ initialUsers }: OrgChartClientComponentProps) {
+  const [users, setUsers] = React.useState<User[]>(initialUsers);
+  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
+  
+  const handleNodeClick = (user: User) => {
+    setSelectedUser(user);
+    // You could also navigate to a user detail page here
+    // router.push(\`/team/\${user.id}\`);
+  };
+  
+  return (
+    <div className="container mx-auto py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Organization Chart</h1>
+        <p className="text-muted-foreground mt-2">
+          Click on any team member to view details
+        </p>
+      </div>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Org Chart */}
+        <div className="lg:col-span-2">
+          <OrgChart 
+            users={users}
+            onNodeClick={handleNodeClick}
+            expandable={true}
+            initiallyExpanded={true}
+          />
+        </div>
+        
+        {/* Selected User Details */}
+        <div className="lg:col-span-1">
+          {selectedUser ? (
+            <div className="bg-card border border-border rounded-lg p-6 sticky top-8">
+              <h2 className="text-xl font-semibold mb-4">Team Member Details</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm text-muted-foreground">Name</label>
+                  <p className="font-medium">{selectedUser.name}</p>
+                </div>
+                <div>
+                  <label className="text-sm text-muted-foreground">Email</label>
+                  <p className="font-medium">{selectedUser.email}</p>
+                </div>
+                {selectedUser.jobRole && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">Role</label>
+                    <p className="font-medium">{selectedUser.jobRole}</p>
+                  </div>
+                )}
+                {selectedUser.about && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">About</label>
+                    <p className="text-sm">{selectedUser.about}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="bg-muted/50 border border-border rounded-lg p-6 text-center">
+              <p className="text-muted-foreground">
+                Select a team member to view details
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * API Route Example (Next.js App Router)
+ * 
+ * Create this file at: app/api/org-chart/route.ts
+ */
+export async function GET() {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+  });
+  
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return Response.json({ users });
+}
+
+/**
+ * Server Action Example (Next.js App Router)
+ * 
+ * Create this file at: app/actions/getOrgChartData.ts
+ */
+'use server';
+
+export async function getOrgChartData(): Promise<User[]> {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+    // Optional: Add sorting
+    sort: 'name',
+  });
+  
+  return usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+}
+
+/**
+ * Usage in a page component:
+ * 
+ * import { getOrgChartData } from '@/app/actions/getOrgChartData';
+ * import { OrgChartClientComponent } from '@/components/OrgChartClientComponent';
+ * 
+ * export default async function OrgChartPage() {
+ *   const users = await getOrgChartData();
+ *   return <OrgChartClientComponent initialUsers={users} />;
+ * }
+ */
+\`\`\``;

package/dist/components/AdvancedComponents/org-chart-component/examples/PayloadIntegration.mjs

@@ -0,0 +1,233 @@
+import"../../../../chunk-YEKQJ4YC.mjs";var a=`
+\`\`\`js
+/**
+ * Example: Integrating OrgChart with PayloadCMS3
+ * 
+ * This example shows how to fetch user data from Payload using the client SDK
+ * and render it in the OrgChart component.
+ */
+
+import React from 'react';
+import { OrgChart } from '../OrgChart';
+import type { User } from '../types';
+
+/**
+ * Server Component Example (Next.js App Router)
+ * 
+ * Use this approach in a server component to fetch data at build/request time.
+ */
+export async function OrgChartServerComponent() {
+  // Import Payload config (adjust path to your project structure)
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  // Get Payload instance
+  const payload = await getPayload({ config });
+  
+  // Fetch all users with manager relationships
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2, // Include manager relationship data
+    limit: 1000, // Adjust based on your org size
+  });
+  
+  // Transform Payload data to OrgChart format
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return (
+    <div className="container mx-auto py-8">
+      <h1 className="text-3xl font-bold mb-8">Organization Chart</h1>
+      <OrgChart 
+        users={users} 
+        expandable={true}
+        initiallyExpanded={true}
+      />
+    </div>
+  );
+}
+
+/**
+ * Client Component Example (with Server Action or API Route)
+ * 
+ * Use this approach when you need client-side interactivity.
+ */
+'use client';
+
+interface OrgChartClientComponentProps {
+  initialUsers: User[];
+}
+
+export function OrgChartClientComponent({ initialUsers }: OrgChartClientComponentProps) {
+  const [users, setUsers] = React.useState<User[]>(initialUsers);
+  const [selectedUser, setSelectedUser] = React.useState<User | null>(null);
+  
+  const handleNodeClick = (user: User) => {
+    setSelectedUser(user);
+    // You could also navigate to a user detail page here
+    // router.push(\`/team/\${user.id}\`);
+  };
+  
+  return (
+    <div className="container mx-auto py-8">
+      <div className="mb-8">
+        <h1 className="text-3xl font-bold">Organization Chart</h1>
+        <p className="text-muted-foreground mt-2">
+          Click on any team member to view details
+        </p>
+      </div>
+      
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {/* Org Chart */}
+        <div className="lg:col-span-2">
+          <OrgChart 
+            users={users}
+            onNodeClick={handleNodeClick}
+            expandable={true}
+            initiallyExpanded={true}
+          />
+        </div>
+        
+        {/* Selected User Details */}
+        <div className="lg:col-span-1">
+          {selectedUser ? (
+            <div className="bg-card border border-border rounded-lg p-6 sticky top-8">
+              <h2 className="text-xl font-semibold mb-4">Team Member Details</h2>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm text-muted-foreground">Name</label>
+                  <p className="font-medium">{selectedUser.name}</p>
+                </div>
+                <div>
+                  <label className="text-sm text-muted-foreground">Email</label>
+                  <p className="font-medium">{selectedUser.email}</p>
+                </div>
+                {selectedUser.jobRole && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">Role</label>
+                    <p className="font-medium">{selectedUser.jobRole}</p>
+                  </div>
+                )}
+                {selectedUser.about && (
+                  <div>
+                    <label className="text-sm text-muted-foreground">About</label>
+                    <p className="text-sm">{selectedUser.about}</p>
+                  </div>
+                )}
+              </div>
+            </div>
+          ) : (
+            <div className="bg-muted/50 border border-border rounded-lg p-6 text-center">
+              <p className="text-muted-foreground">
+                Select a team member to view details
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * API Route Example (Next.js App Router)
+ * 
+ * Create this file at: app/api/org-chart/route.ts
+ */
+export async function GET() {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+  });
+  
+  const users: User[] = usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+  
+  return Response.json({ users });
+}
+
+/**
+ * Server Action Example (Next.js App Router)
+ * 
+ * Create this file at: app/actions/getOrgChartData.ts
+ */
+'use server';
+
+export async function getOrgChartData(): Promise<User[]> {
+  const { getPayload } = await import('payload');
+  const config = await import('@/payload.config').then((m) => m.default);
+  
+  const payload = await getPayload({ config });
+  
+  const usersResponse = await payload.find({
+    collection: 'users',
+    depth: 2,
+    limit: 1000,
+    // Optional: Add sorting
+    sort: 'name',
+  });
+  
+  return usersResponse.docs.map((doc) => ({
+    id: doc.id,
+    name: doc.name || '',
+    email: doc.email,
+    jobRole: doc.jobRole,
+    manager: doc.manager,
+    about: doc.about,
+    profilePicture: doc.profilePicture
+      ? {
+          url: typeof doc.profilePicture === 'object' 
+            ? doc.profilePicture.url 
+            : doc.profilePicture,
+          alt: doc.name,
+        }
+      : undefined,
+  }));
+}
+
+/**
+ * Usage in a page component:
+ * 
+ * import { getOrgChartData } from '@/app/actions/getOrgChartData';
+ * import { OrgChartClientComponent } from '@/components/OrgChartClientComponent';
+ * 
+ * export default async function OrgChartPage() {
+ *   const users = await getOrgChartData();
+ *   return <OrgChartClientComponent initialUsers={users} />;
+ * }
+ */
+\`\`\``;export{a as default};

package/dist/components/AdvancedComponents/org-chart-component/index.d.ts

@@ -0,0 +1,6 @@
+export { OrgChart } from './OrgChart';
+export { OrgNode } from './OrgNode';
+export { OrgTree } from './OrgTree';
+export { CompanyNode } from './CompanyNode';
+export * from './utils';
+export * from './types';