elseware-ui 3.0.10 → 3.0.12

package/dist/index.js

@@ -14115,19 +14115,6 @@ var Flag = ({
   );
 };
 
-// src/components/data-display/graphs/layouts/registry.ts
-var registry = /* @__PURE__ */ new Map();
-var registerLayout = (type2, executor) => {
-  registry.set(type2, executor);
-};
-var getLayout = (type2) => {
-  const layout = registry.get(type2);
-  if (!layout) {
-    throw new Error(`Layout "${type2}" not registered`);
-  }
-  return layout;
-};
-
 // node_modules/d3-dispatch/src/dispatch.js
 var noop = { value: () => {
 } };
@@ -17111,6 +17098,45 @@ function createTreeLayout(nodes, edges, width, height) {
     };
   });
 }
+
+// src/components/data-display/graphs/layouts/registry.ts
+var registry = /* @__PURE__ */ new Map();
+var defaultLayoutsRegistered = false;
+var registerLayout = (type2, executor) => {
+  registry.set(type2, executor);
+};
+var registerDefaultLayouts = () => {
+  if (defaultLayoutsRegistered) return;
+  registerLayout("force", ({ nodes, edges, width, height, onTick }) => {
+    const sim = createForceLayout(nodes, edges, width, height);
+    sim.on("tick", () => {
+      onTick?.([...nodes]);
+    });
+    return {
+      type: "simulation",
+      stop: () => sim.stop()
+    };
+  });
+  registerLayout("grid", ({ nodes, width, height, onTick }) => {
+    const result = createGridLayout(nodes, width, height);
+    onTick?.(result);
+    return { type: "static" };
+  });
+  registerLayout("tree", ({ nodes, edges, width, height, onTick }) => {
+    const result = createTreeLayout(nodes, edges, width, height);
+    onTick?.(result);
+    return { type: "static" };
+  });
+  defaultLayoutsRegistered = true;
+};
+var getLayout = (type2) => {
+  registerDefaultLayouts();
+  const layout = registry.get(type2);
+  if (!layout) {
+    throw new Error(`Layout "${type2}" not registered`);
+  }
+  return layout;
+};
 var NODE_SIZE = 48;
 var GraphNode = ({ node: node2, renderCustom }) => {
   if (node2.x === void 0 || node2.y === void 0) return null;
@@ -31424,7 +31450,7 @@ var GlowWrapper = ({
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
-            className: "\n          pointer-events-none absolute inset-0 opacity-0 \n          group-hover:opacity-100 transition-opacity duration-300\n        ",
+            className: "\r\n          pointer-events-none absolute inset-0 opacity-0 \r\n          group-hover:opacity-100 transition-opacity duration-300\r\n        ",
             style: { background: "var(--glow-bg)" }
           }
         ),
@@ -32776,7 +32802,16 @@ function Sidebar({
   ) }) });
 }
 var Sidebar_default = Sidebar;
+var TNThemeContext = React26.createContext({
+  components: {},
+  classNames: {}
+});
+var TNThemeProvider = TNThemeContext.Provider;
+var useTNTheme = () => React26.useContext(TNThemeContext);
+var useTNSlot = (slot) => React26.useContext(TNThemeContext).classNames?.[slot];
 var TNContext = ({ icon, name: name2, badge }) => {
+  const iconSlot = useTNSlot("icon");
+  const labelSlot = useTNSlot("label");
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     icon && /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -32784,7 +32819,8 @@ var TNContext = ({ icon, name: name2, badge }) => {
         className: cn(
           "text-base text-gray-500 dark:text-gray-400",
           "transition-colors duration-200",
-          "group-hover:text-eui-secondary-700"
+          "group-hover:text-eui-secondary-700",
+          iconSlot
         ),
         children: icon
       }
@@ -32795,7 +32831,8 @@ var TNContext = ({ icon, name: name2, badge }) => {
         className: cn(
           "flex-1",
           "transition-colors duration-200",
-          "group-hover:text-eui-secondary-700"
+          "group-hover:text-eui-secondary-700",
+          labelSlot
         ),
         children: name2
       }
@@ -32812,6 +32849,8 @@ var TNItem = ({
   className,
   ...rest
 }) => {
+  const itemSlot = useTNSlot("item");
+  const selectedSlot = useTNSlot("itemSelected");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
@@ -32823,7 +32862,9 @@ var TNItem = ({
         "transition-all duration-200",
         "text-gray-400",
         "hover:bg-gray-300/10",
+        itemSlot,
         selected && "bg-gray-300/10",
+        selected && selectedSlot,
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(TNContext, { icon, name: name2, badge })
@@ -32839,6 +32880,7 @@ var TNDropdownItem = ({
   onClick,
   className
 }) => {
+  const dropdownItemSlot = useTNSlot("dropdownItem");
   const handle2 = (e) => {
     if (to) {
       navigate ? navigate(to) : window.location.href = to;
@@ -32857,6 +32899,7 @@ var TNDropdownItem = ({
         "hover:bg-gray-100 dark:hover:bg-gray-700/50",
         "hover:text-gray-900 dark:hover:text-gray-300",
         "transition-colors duration-200",
+        dropdownItemSlot,
         className
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx(TNContext, { icon, name: name2, badge })
@@ -32864,12 +32907,14 @@ var TNDropdownItem = ({
   );
 };
 var TNDropdownTitle = ({ name: name2, className }) => {
+  const dropdownTitleSlot = useTNSlot("dropdownTitle");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       className: cn(
         "px-3 py-4 text-xs font-semibold uppercase tracking-wide",
         "text-gray-500 dark:text-gray-600",
+        dropdownTitleSlot,
         className
       ),
       children: name2
@@ -32882,9 +32927,14 @@ var TNDropdownGroup = ({
   badge,
   items,
   navigate,
+  components,
   className
 }) => {
   const [open, setOpen] = React26.useState(true);
+  const dropdownGroupSlot = useTNSlot("dropdownGroup");
+  const Item = components?.dropdownItem || TNDropdownItem;
+  const Group = components?.dropdownGroup || TNDropdownGroup;
+  const Title = components?.dropdownTitle || TNDropdownTitle;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
@@ -32899,6 +32949,7 @@ var TNDropdownGroup = ({
           "dark:from-green-900/30 dark:to-transparent",
           "hover:from-gray-200 dark:hover:from-green-900/50",
           "transition-all duration-200",
+          dropdownGroupSlot,
           className
         ),
         children: [
@@ -32917,12 +32968,20 @@ var TNDropdownGroup = ({
     ),
     open && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "ml-2 border-l border-gray-200 dark:border-gray-700 pl-1", children: items.map((item, i) => {
       if (item.type === "title") {
-        return /* @__PURE__ */ jsxRuntime.jsx(TNDropdownTitle, { ...item }, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(Title, { ...item }, i);
       }
       if (item.type === "group") {
-        return /* @__PURE__ */ jsxRuntime.jsx(TNDropdownGroup, { ...item, navigate }, i);
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          Group,
+          {
+            ...item,
+            navigate,
+            components
+          },
+          i
+        );
       }
-      return /* @__PURE__ */ jsxRuntime.jsx(TNDropdownItem, { ...item, navigate }, i);
+      return /* @__PURE__ */ jsxRuntime.jsx(Item, { ...item, navigate }, i);
     }) })
   ] });
 };
@@ -32934,6 +32993,7 @@ var TNDropdown = ({
   const Item = components?.dropdownItem || TNDropdownItem;
   const Group = components?.dropdownGroup || TNDropdownGroup;
   const Title = components?.dropdownTitle || TNDropdownTitle;
+  const dropdownSlot = useTNSlot("dropdown");
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
@@ -32945,7 +33005,8 @@ var TNDropdown = ({
         "min-w-[260px]",
         "w-max",
         "max-w-[90vw]",
-        "overflow-auto"
+        "overflow-auto",
+        dropdownSlot
       ),
       children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "py-0", children: items.map((item, i) => {
         if (item.type === "title") return /* @__PURE__ */ jsxRuntime.jsx(Title, { ...item }, i);
@@ -32971,10 +33032,12 @@ var TNGroup = ({
   navigate,
   columns,
   components,
-  selected
+  selected,
+  className
 }) => {
   const [open, setOpen] = React26.useState(false);
   const timeoutRef = React26.useRef(null);
+  const groupSlot = useTNSlot("group");
   const handleEnter = () => {
     if (timeoutRef.current) clearTimeout(timeoutRef.current);
     setOpen(true);
@@ -32984,15 +33047,16 @@ var TNGroup = ({
       setOpen(false);
     }, 150);
   };
+  const Trigger = components?.item || TNItem;
   const Dropdown = components?.dropdown || TNDropdown;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
-      className: "relative flex items-center",
+      className: cn("relative flex items-center", groupSlot, className),
       onMouseEnter: handleEnter,
       onMouseLeave: handleLeave,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(TNItem, { icon, name: name2, selected: selected || open }),
+        /* @__PURE__ */ jsxRuntime.jsx(Trigger, { icon, name: name2, selected: selected || open }),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-full left-0 -mt-[1px]", children: open && /* @__PURE__ */ jsxRuntime.jsx(
           Dropdown,
           {
@@ -33019,7 +33083,9 @@ var TopNav = ({
   items = [],
   currentPath,
   navigate,
-  components
+  components,
+  classNames: classNames73,
+  className
 }) => {
   const pathname = currentPath ?? (typeof window !== "undefined" ? window.location.pathname : "");
   const resolved = {
@@ -33039,7 +33105,9 @@ var TopNav = ({
         {
           icon: node2.icon,
           name: node2.name,
+          badge: node2.badge,
           selected,
+          className: node2.className,
           onClick: () => handleNavigate(node2.to)
         },
         node2.key || index3
@@ -33057,6 +33125,7 @@ var TopNav = ({
           navigate,
           columns: node2.columns,
           components,
+          className: node2.className,
           selected
         },
         node2.key || index3
@@ -33064,7 +33133,13 @@ var TopNav = ({
     }
     return null;
   };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: items.map(renderNode) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TNThemeProvider,
+    {
+      value: { components: components || {}, classNames: classNames73 || {} },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center", classNames73?.root, className), children: items.map(renderNode) })
+    }
+  );
 };
 function ReviewForm({
   initialValues,
@@ -59312,10 +59387,13 @@ exports.StarRatingInput = StarRatingInput_default;
 exports.StatPlot = StatPlot;
 exports.StaticChartDataSource = StaticChartDataSource;
 exports.Switch = Switch_default;
+exports.TNContext = TNContext;
 exports.TNDropdown = TNDropdown;
+exports.TNDropdownGroup = TNDropdownGroup;
 exports.TNDropdownItem = TNDropdownItem;
 exports.TNDropdownTitle = TNDropdownTitle;
 exports.TNGroup = TNGroup;
+exports.TNItem = TNItem;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCell = TableCell;
@@ -59475,6 +59553,8 @@ exports.usePageTracking = usePageTracking;
 exports.useResolvedChartState = useResolvedChartState;
 exports.useReviewThreadState = useReviewThreadState;
 exports.useSessionTracking = useSessionTracking;
+exports.useTNSlot = useTNSlot;
+exports.useTNTheme = useTNTheme;
 exports.useTheme = useTheme_default;
 exports.writeAnalyticsQueueStorage = writeAnalyticsQueueStorage;
 exports.writeConsentStorage = writeConsentStorage;