@inf-monkeys-tech/monkeys-design 1.0.111 → 1.0.112

package/dist/components/navigation-sidebar/index.mjs

@@ -495,7 +495,13 @@ function mergeStyles(...sources) {
   );
 }
 function getPresetDefaults(preset) {
-  return presetDefaults[preset] ?? presetDefaults.default;
+  const defaults = presetDefaults[preset];
+  if (!defaults) {
+    throw new TypeError(
+      `Unknown Data Explorer theme preset "${String(preset)}". Expected one of: ${Object.keys(presetDefaults).join(", ")}.`
+    );
+  }
+  return defaults;
 }
 function resolveDataExplorerAppearance(appearance) {
   const preset = appearance?.preset ?? "default";
@@ -1721,7 +1727,46 @@ function resolveAppearance(appearance) {
       surface === "outlined" && "border-border bg-background text-foreground shadow-none"
     ),
     itemHeight: density === "compact" ? "min-h-9" : density === "comfortable" ? "min-h-14" : "min-h-11",
-    itemPadding: density === "compact" ? "px-2 py-1.5" : density === "comfortable" ? "px-3 py-3" : "px-3 py-2"
+    itemPadding: density === "compact" ? "px-2 py-1.5" : density === "comfortable" ? "px-3 py-3" : "px-3 py-2",
+    searchHeight: density === "compact" ? "h-8" : density === "comfortable" ? "h-10" : "h-9"
+  };
+}
+var navigationTreeRowHoverClassName = "hover:bg-[var(--monkeys-component-navigation-sidebar-tree-row-hover-background,hsl(var(--muted)))] hover:text-[var(--monkeys-component-navigation-sidebar-tree-row-hover-foreground,hsl(var(--foreground)))]";
+var navigationTreeRowSelectedClassName = "bg-[var(--monkeys-component-navigation-sidebar-tree-row-selected-background,hsl(var(--accent)))] text-[var(--monkeys-component-navigation-sidebar-tree-row-selected-foreground,hsl(var(--accent-foreground)))] hover:bg-[var(--monkeys-component-navigation-sidebar-tree-row-selected-background,hsl(var(--accent)))] hover:text-[var(--monkeys-component-navigation-sidebar-tree-row-selected-foreground,hsl(var(--accent-foreground)))]";
+var navigationTreeNestedControlClassName = "hover:!bg-transparent hover:!text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+function resolveNavigationTreeClassNames(classNames) {
+  return {
+    ...classNames,
+    groupHeader: cn(navigationTreeRowHoverClassName, classNames?.groupHeader),
+    itemSelected: cn(
+      navigationTreeRowSelectedClassName,
+      classNames?.itemSelected
+    ),
+    nodeButton: cn(
+      navigationTreeRowHoverClassName,
+      "aria-selected:bg-[var(--monkeys-component-navigation-sidebar-tree-row-selected-background,hsl(var(--accent)))] aria-selected:text-[var(--monkeys-component-navigation-sidebar-tree-row-selected-foreground,hsl(var(--accent-foreground)))] aria-selected:hover:bg-[var(--monkeys-component-navigation-sidebar-tree-row-selected-background,hsl(var(--accent)))] aria-selected:hover:text-[var(--monkeys-component-navigation-sidebar-tree-row-selected-foreground,hsl(var(--accent-foreground)))]",
+      classNames?.nodeButton
+    ),
+    expander: cn(
+      navigationTreeNestedControlClassName,
+      classNames?.expander
+    ),
+    nodeToggle: cn(
+      navigationTreeNestedControlClassName,
+      classNames?.nodeToggle
+    ),
+    groupActions: cn(
+      navigationTreeNestedControlClassName,
+      classNames?.groupActions
+    ),
+    nodeActions: cn(
+      navigationTreeNestedControlClassName,
+      classNames?.nodeActions
+    ),
+    nodeDragHandle: cn(
+      navigationTreeNestedControlClassName,
+      classNames?.nodeDragHandle
+    )
   };
 }
 function EntryButton({
@@ -2344,7 +2389,13 @@ function NavigationSidebarInner(props, ref) {
       );
     }
     const treeProps = props.tree;
-    return /* @__PURE__ */ jsx(DataExplorerViewTree, { ...treeProps });
+    return /* @__PURE__ */ jsx(
+      DataExplorerViewTree,
+      {
+        ...treeProps,
+        classNames: resolveNavigationTreeClassNames(treeProps.classNames)
+      }
+    );
   };
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
@@ -2440,61 +2491,79 @@ function NavigationSidebarInner(props, ref) {
                 ]
               }
             ) : null,
-            !resolvedCollapsed && props.search ? /* @__PURE__ */ jsx("div", { className: cn("p-3 pb-2", props.classNames?.search), children: /* @__PURE__ */ jsxs("div", { className: "flex h-9 items-center gap-2 rounded-md border border-border bg-background px-3 text-muted-foreground focus-within:ring-2 focus-within:ring-ring", children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "flex shrink-0",
-                    props.classNames?.searchIcon
-                  ),
-                  "aria-hidden": "true",
-                  children: props.search.icon ?? /* @__PURE__ */ jsx(SearchIcon, {})
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "input",
-                {
-                  type: "search",
-                  value: resolvedSearchValue,
-                  placeholder: props.search.placeholder,
-                  "aria-label": props.search.ariaLabel,
-                  className: cn(
-                    "min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground",
-                    props.classNames?.searchInput
-                  ),
-                  onChange: (event) => {
-                    const nextValue = event.currentTarget.value;
-                    if (props.search?.value === void 0)
-                      setInternalSearchValue(nextValue);
-                    props.search?.onValueChange?.(nextValue);
+            !resolvedCollapsed && props.search ? /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: cn(
+                  "px-[var(--monkeys-component-navigation-sidebar-content-inline-padding,var(--global-spacing,0.75rem))] pb-2 pt-3",
+                  props.classNames?.search
+                ),
+                children: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex items-center gap-2 rounded-md border border-input bg-[var(--monkeys-component-navigation-sidebar-search-background,hsl(var(--monkeys-color-control-surface)))] px-3 text-muted-foreground ring-offset-control-surface focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
+                      appearance.searchHeight
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        "span",
+                        {
+                          className: cn(
+                            "flex shrink-0",
+                            props.classNames?.searchIcon
+                          ),
+                          "aria-hidden": "true",
+                          children: props.search.icon ?? /* @__PURE__ */ jsx(SearchIcon, {})
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "input",
+                        {
+                          type: "search",
+                          value: resolvedSearchValue,
+                          placeholder: props.search.placeholder,
+                          "aria-label": props.search.ariaLabel,
+                          className: cn(
+                            "min-w-0 flex-1 bg-transparent text-sm text-foreground outline-none placeholder:text-muted-foreground",
+                            props.classNames?.searchInput
+                          ),
+                          onChange: (event) => {
+                            const nextValue = event.currentTarget.value;
+                            if (props.search?.value === void 0)
+                              setInternalSearchValue(nextValue);
+                            props.search?.onValueChange?.(nextValue);
+                          }
+                        }
+                      ),
+                      resolvedSearchValue && props.search.clearLabel ? /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: cn(
+                            "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                            props.classNames?.searchClear
+                          ),
+                          "aria-label": props.search.clearLabel,
+                          title: props.search.clearLabel,
+                          onClick: () => {
+                            if (props.search?.value === void 0)
+                              setInternalSearchValue("");
+                            props.search?.onValueChange?.("");
+                          },
+                          children: /* @__PURE__ */ jsx(ClearIcon, {})
+                        }
+                      ) : null
+                    ]
                   }
-                }
-              ),
-              resolvedSearchValue && props.search.clearLabel ? /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: cn(
-                    "inline-flex h-6 w-6 items-center justify-center rounded text-muted-foreground hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                    props.classNames?.searchClear
-                  ),
-                  "aria-label": props.search.clearLabel,
-                  title: props.search.clearLabel,
-                  onClick: () => {
-                    if (props.search?.value === void 0)
-                      setInternalSearchValue("");
-                    props.search?.onValueChange?.("");
-                  },
-                  children: /* @__PURE__ */ jsx(ClearIcon, {})
-                }
-              ) : null
-            ] }) }) : null,
+                )
+              }
+            ) : null,
             /* @__PURE__ */ jsx(
               "div",
               {
                 className: cn(
-                  "min-h-0 flex-1 overflow-y-auto p-3",
+                  "min-h-0 flex-1 overflow-y-auto px-[var(--monkeys-component-navigation-sidebar-content-inline-padding,var(--global-spacing,0.75rem))] py-3",
                   resolvedCollapsed && "px-1.5",
                   props.classNames?.content
                 ),